* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      background: linear-gradient(180deg, #dff7d8 0%, #f9f5d7 100%);
      color: #2d2d2d;
    }

    .wrap {
      max-width: 1280px;
      margin: 0 auto;
      padding: 24px;
    }

    h1 {
      margin: 0 0 16px;
      text-align: center;
      font-size: 32px;
    }

    .subtitle {
      text-align: center;
      margin-bottom: 20px;
      color: #4d4d4d;
    }

    .game-layout {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 24px;
      align-items: start;
    }

    .board-area {
      background: #ffffffcc;
      border-radius: 20px;
      padding: 18px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }

    .board-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 18px;
      overflow: hidden;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.5), transparent 20%),
        linear-gradient(180deg, #cdebb5 0%, #f7edc7 100%);
      border: 4px solid #7b9a55;
    }

    .board {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
    }

    .cell {
      position: relative;
      border: 1px solid rgba(80, 110, 60, 0.25);
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 4px;
      overflow: hidden;
    }

    .cell:nth-child(odd) {
      background: rgba(255,255,255,0.18);
    }

    .cell:nth-child(even) {
      background: rgba(160, 208, 124, 0.15);
    }

    .cell-number {
      font-size: 13px;
      font-weight: 700;
      color: #4e4e4e;
      z-index: 2;
      background: rgba(255,255,255,0.65);
      padding: 1px 5px;
      border-radius: 999px;
    }

    .start-label,
    .finish-label {
      position: absolute;
      font-weight: 800;
      font-size: 14px;
      padding: 4px 10px;
      border-radius: 999px;
      color: #fff;
      z-index: 5;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    }

    .start-label {
      right: 8px;
      bottom: 8px;
      background: #ff8a00;
    }

    .finish-label {
      right: 8px;
      top: 8px;
      background: #2e9f3d;
    }

    .overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
    }

    .token-layer {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
    }

    .token {
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 3px solid #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.22);
      transition: left 0.35s ease, top 0.35s ease;
    }

    .token.p1 {
      background: #ff5252;
    }

    .token.p2 {
      background: #3b82f6;
    }

    .side-panel {
      background: #ffffffcc;
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      position: sticky;
      top: 20px;
    }

    .status-box {
      background: #f6f8ed;
      border: 1px solid #d7e2c1;
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 16px;
    }

    .status-box h2 {
      font-size: 18px;
      margin: 0 0 10px;
    }

    .players {
      display: grid;
      gap: 10px;
      margin-bottom: 16px;
    }

    .player-card {
      border-radius: 14px;
      padding: 12px;
      font-weight: 700;
      background: #f8f8f8;
      border: 2px solid transparent;
    }

    .player-card.active {
      border-color: #333;
      background: #fff8d8;
    }

    .player-card.p1 {
      box-shadow: inset 0 0 0 2px rgba(255,82,82,0.15);
    }

    .player-card.p2 {
      box-shadow: inset 0 0 0 2px rgba(59,130,246,0.15);
    }

    .controls {
      display: grid;
      gap: 12px;
      margin-bottom: 16px;
    }

    button {
      border: none;
      border-radius: 14px;
      padding: 14px 16px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.12s ease, opacity 0.12s ease;
    }

    button:hover {
      transform: translateY(-1px);
    }

    button:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none;
    }

    .btn-roll {
      background: #ffcc29;
      color: #3b2f00;
    }

    .btn-reset {
      background: #4caf50;
      color: #fff;
    }

    .dice-box {
      text-align: center;
      padding: 16px;
      border-radius: 16px;
      background: #f9fbff;
      border: 1px solid #dbe8ff;
      margin-bottom: 16px;
    }

    .dice {
      width: 72px;
      height: 72px;
      margin: 0 auto 10px;
      background: #fff;
      border-radius: 16px;
      border: 3px solid #333;
      display: grid;
      place-items: center;
      font-size: 32px;
      font-weight: 900;
    }

    .log {
      height: 240px;
      overflow: auto;
      border-radius: 14px;
      border: 1px solid #ddd;
      background: #fff;
      padding: 12px;
      line-height: 1.6;
      font-size: 14px;
    }

    .log-item {
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #e5e5e5;
    }

    .legend {
      margin-top: 16px;
      font-size: 14px;
      color: #444;
      line-height: 1.6;
      background: #f8fff1;
      border: 1px solid #dbecc9;
      border-radius: 14px;
      padding: 12px;
    }

    @media (max-width: 980px) {
      .game-layout {
        grid-template-columns: 1fr;
      }

      .side-panel {
        position: static;
      }
    }

/* PLAYROOM theme and responsive layout. */
:root{color-scheme:dark}body{background:#090f1d;color:#eaf1fa;font-family:system-ui,"Malgun Gothic",sans-serif}.wrap{max-width:1320px;padding:26px 32px}.game-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #28344a;padding-bottom:20px;margin-bottom:30px}.game-header a{font-size:13px;color:#79e3c7;text-decoration:none;font-weight:800;letter-spacing:.06em}.game-header>span{font-size:10px;letter-spacing:.12em;color:#90a4bd}.eyebrow{color:#7ae9c9;letter-spacing:.18em;font-size:11px;font-weight:700;margin-bottom:12px}h1{text-align:left;margin-bottom:12px;font-size:36px;letter-spacing:-.04em}.subtitle{text-align:left;font-size:14px;color:#93a6bf;margin-bottom:30px}.board-area,.side-panel{background:#111d2e;border:1px solid #2b3950;box-shadow:0 14px 35px #0002;padding:18px;border-radius:16px}.game-layout{grid-template-columns:minmax(0,1fr) 310px;gap:20px}.side-panel{top:20px}.status-box,.dice-box,.legend{background:#162439;border:1px solid #304059;color:#acbed1}.status-box h2{font-size:13px;letter-spacing:.04em;color:#90a9c3}#turnText{font-weight:750;color:#eef5fe}.player-card{background:#162439;border:1px solid #32435b;font-size:14px}.player-card.active{background:#173b38;border-color:#63d6b9;color:#cbffec}.dice{background:#edf8f5;color:#16362c;border:0;box-shadow:0 6px 0 #94cabc}.btn-roll{background:#79e6c5;color:#092a23}.btn-reset{background:#23354d;border:1px solid #476079;color:#d7e5f4}.log{background:#0d1726;color:#a8b9ce;border:1px solid #2b3d54;height:180px;font-size:12px}.log-item{border-color:#27394e}.legend{font-size:12px;line-height:1.9}.board-wrapper{background:#102739;border:2px solid #3b6270}.cell:nth-child(odd){background:#214052}.cell:nth-child(even){background:#173142}.cell-number{background:#0d1d2c;color:#c1d6e4;font-size:11px}.view-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}.view-tools span{color:#9bb5ca;font-size:11px;margin-right:auto}.view-tools button{font-size:11px;padding:8px 10px;border:1px solid #425772;border-radius:6px;background:#21364a;color:#c4e5ee}#stage3d{height:clamp(350px,60vw,700px);border-radius:12px;overflow:hidden;touch-action:none;background:#0a1624}#stage3d canvas{display:block;width:100%;height:100%}[hidden]{display:none!important}a:focus-visible,button:focus-visible{outline:3px solid #7ae9c9;outline-offset:4px}.start-label,.finish-label{font-size:10px;padding:3px 6px}@media(max-width:980px){.game-layout{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px}.side-panel>div{margin:0}.legend,.log{grid-column:1/-1}.wrap{padding:20px}.game-header>span{display:none}.controls{align-content:center}}@media(max-width:480px){h1{font-size:28px}.wrap{padding:15px}.board-area{padding:10px}.side-panel{padding:14px;gap:10px}.cell-number{font-size:9px;padding:1px 3px}.status-box{padding:10px}button{font-size:13px}.player-card{font-size:11px}.dice-box{padding:10px}#stage3d{height:400px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* The serpentine board starts and ends in the leftmost column. */
.start-label,.finish-label{left:8px;right:auto}