:root{
  --bg-0:#241811;
  --bg-1:#4a3626;
  --frame:#6b4a31;
  --frame-dark:#3b281b;
  --cell:#f2dfb7;
  --cell-line:#c5a878;
  --ink:#2b2019;
  --ink-soft:#776454;
  --paper:#fff7e8;

  --red:#e05a47;
  --red-dark:#a83b2e;
  --green:#58a867;
  --green-dark:#347642;
  --yellow:#f2c84b;
  --yellow-dark:#c3911d;
  --blue:#4c8dcc;
  --blue-dark:#2f6195;
}

  *{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }

  html,body{
    margin:0; padding:0; min-height:100%;
    background:
      radial-gradient(circle at 20% 0%,#4a3626 0%, transparent 55%)
      ,radial-gradient(circle at 90% 100%, #4a3626 0%, transparent 55%)
      var(--bg-0);
    color:var(--paper);
    font-family:'Inter', system-ui, sans-serif;
  }

  h1,h2,h3, .display{ font-family:'Fredoka', system-ui, sans-serif; }

  #app{
    max-width:480px;
    margin:0 auto;
    min-height:100vh;
    padding:14px 14px 28px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .topbar{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    padding:2px 4px 0;
  }
  .topbar h1{
    margin:0;
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:0.3px;
    color:var(--paper);
  }
  .topbar .tagline{
    font-size:0.72rem;
    color:rgba(255,255,255,0.65);
  }

  .card{
    background:var(--paper);
    color:var(--ink);
    border-radius:18px;
    padding:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.35);
  }
  .card h2{
    margin:0 0 4px;
    font-size:1.2rem;
    color:var(--ink);
  }
  .card p.sub{
    margin:0 0 16px;
    font-size:0.85rem;
    color:var(--ink-soft);
  }

  .player-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 8px;
    border-radius:12px;
    margin-bottom:6px;
    background:var(--cell);
  }
  .player-row .swatch{
    width:26px; height:26px; border-radius:50%;
    flex-shrink:0;
    box-shadow: inset 0 -3px 4px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.4);
  }
  .player-row .pname{
    flex:1;
    font-weight:600;
    font-size:0.95rem;
  }
  .toggle-pill{
    border:none;
    border-radius:999px;
    padding:6px 12px;
    font-size:0.72rem;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
    background:var(--cell);
    color:var(--ink-soft);
    transition:background .15s, color .15s;
  
  }
  .toggle-pill.on{
    background:var(--ink);
    color:var(--paper);
  
  }
  .toggle-pill.disabled{
    opacity:0.35;
    pointer-events:none;
  }
  .role-pill{
    border:none;
    border-radius:999px;
    padding:6px 10px;
    font-size:0.68rem;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
    background:transparent;
    border:1.5px solid var(--ink-soft);
    color:var(--ink-soft);
    min-width:64px;
  }
  .role-pill.disabled{ opacity:0.3; pointer-events:none; }

  .start-btn{
    width:100%;
    margin-top:12px;
    padding:13px;
    border:none;
    border-radius:12px;
    background:var(--green);
    color:var(--paper);
    font-family:'Fredoka', sans-serif;
    font-size:1.05rem;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 4px 0 var(--green-dark);
    transition:transform .05s;
  }
  .start-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--green-dark); }
  .start-btn:disabled{
    background:var(--ink-soft);
    cursor:not-allowed;
  }
  .hint{ font-size:0.72rem; color:var(--ink-soft); margin-top:8px; text-align:center; }

  .status-bar{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(0,0,0,0.25);
    border-radius:14px;
    padding:10px 14px;
    border:1.5px solid rgba(255,255,255,0.08);
  }
  .status-dot{
    width:16px; height:16px; border-radius:50%;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.12);
    flex-shrink:0;
  }
  .status-text{
    font-size:0.92rem;
    font-weight:600;
  }
  .status-sub{
    font-size:0.72rem;
    color:var(--ink-soft);
    margin-top:1px;
  }

  .board-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    background:linear-gradient(160deg, var(--frame), var(--frame-dark));
    border-radius:16px;
    padding:2.6%;
    box-shadow:0 12px 26px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.06);
  }
  .board{
    position:relative;
    width:100%; height:100%;
    display:grid;
    grid-template-columns:repeat(15, 1fr);
    grid-template-rows:repeat(15, 1fr);
    background:var(--cell);
    border-radius:6px;
    overflow:hidden;
  }
  .cell{
    border:0.5px solid var(--cell-line);
  }
  .cell.yard-red{ background:var(--red); }
  .cell.yard-green{ background:var(--green); }
  .cell.yard-yellow{ background:var(--yellow); }
  .cell.yard-blue{ background:var(--blue); }
  .yard-box{
    background:var(--paper);
    border-radius:10px;
  }
  .cell.path-safe{ background:var(--paper); }
  .cell.home-red{ background:var(--red); }
  .cell.home-green{ background:var(--green); }
  .cell.home-yellow{ background:var(--yellow); }
  .cell.home-blue{ background:var(--blue); }
  .cell.center{ background:transparent; border:none; }

  .star{
    width:60%; height:60%;
    color:var(--ink);
    opacity:0.85;
  }
  .cell{ display:flex; align-items:center; justify-content:center; }

  .center-graphic{
    position:absolute;
    pointer-events:none;
  }

  .arrow{
    position:absolute;
    width:0; height:0;
    opacity:0.9;
  }

  .token{
    position:absolute;
    border-radius:50%;
    box-shadow: inset 0 -3px 5px rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.4);
    transition: left .35s cubic-bezier(.4,1.4,.6,1), top .35s cubic-bezier(.4,1.4,.6,1), transform .15s;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
  }
  .token.movable{
    cursor:pointer;
    animation:bounce 0.9s infinite;
    z-index:8;
  }
  .token.tk-red{ background:radial-gradient(circle at 35% 30%, #ff9a8c, var(--red) 45%, var(--red-dark)); }
  .token.tk-green{ background:radial-gradient(circle at 35% 30%, #a5e3ad, var(--green) 45%, var(--green-dark)); }
  .token.tk-yellow{ background:radial-gradient(circle at 35% 30%, #ffe99a, var(--yellow) 45%, var(--yellow-dark)); }
  .token.tk-blue{ background:radial-gradient(circle at 35% 30%, #9bc9f2, var(--blue) 45%, var(--blue-dark)); }
  .token .dot{
    width:30%; height:30%;
    border-radius:50%;
    background:rgba(255,255,255,0.55);
  }

  @keyframes bounce{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-14%) scale(1.06); }
  }

  .controls{
    display:flex;
    align-items:center;
    gap:14px;
    justify-content:center;
    padding:6px 0 2px;
  }
  .dice{
    width:58px; height:58px;
    background:var(--paper);
    border-radius:14px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    padding:9px;
    box-shadow:0 4px 0 var(--frame-dark);
    transition:transform .12s;
  }
  .dice.rolling{ animation:diceroll .55s ease-out; }
  @keyframes diceroll{
    0%{ transform:rotate(0deg) scale(1); }
    35%{ transform:rotate(160deg) scale(1.12); }
    70%{ transform:rotate(300deg) scale(0.96); }
    100%{ transform:rotate(360deg) scale(1); }
  }
  .pip{ border-radius:50%; background:transparent; margin:auto; width:9px; height:9px; }
  .pip.on{ background:var(--ink); }

  .roll-btn{
    padding:15px 26px;
    border:none;
    border-radius:14px;
    background:var(--red);
    color:var(--paper);
    font-family:'Fredoka', sans-serif;
    font-size:1.05rem;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 4px 0 var(--red-dark);
    transition:transform .05s, opacity .15s;
  }
  .roll-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--red-dark); }
  .roll-btn:disabled{ background:var(--ink-soft); cursor:not-allowed; }

  .log{
    background:rgba(0,0,0,0.25);
    border-radius:12px;
    padding:8px 12px;
    font-size:0.78rem;
    color:var(--paper);
    max-height:74px;
    overflow-y:auto;
    line-height:1.55;
    border:1.5px solid rgba(255,255,255,0.06);
  }
  .log div.entry:last-child{ color:var(--yellow); }

  .overlay{
    position:fixed; inset:0;
    background:rgba(20,14,9,0.78);
    display:flex; align-items:center; justify-content:center;
    z-index:50;
    padding:20px;
  }
  .win-card{
    background:var(--paper);
    color:var(--ink);
    border-radius:20px;
    padding:28px 24px;
    text-align:center;
    max-width:320px;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
  }
  .win-card .crown{ font-size:2.6rem; }
  .win-card h2{ margin:6px 0 4px; }
  .win-card p{ color:var(--ink-soft); margin:0 0 18px; font-size:0.88rem; }
  .win-card button{
    padding:12px 22px;
    border:none;
    border-radius:12px;
    background:var(--green);
    color:var(--paper);
    font-family:'Fredoka',sans-serif;
    font-weight:600;
    font-size:0.98rem;
    box-shadow:0 4px 0 var(--green-dark);
    cursor:pointer;
  }

  .hidden{ display:none !important; }

  .move-hint{
    text-align:center;
    font-size:0.76rem;
    color:var(--paper);
  }