:root {
      --bg: #0b0d12;
      --bg-deep: #06070a;
      --panel: #14161d;
      --panel-2: #191c24;
      --line: #262a34;
      --brass: #b8863f;
      --brass-soft: #8a6530;
      --gold: #e8b055;
      --text: #e8e6df;
      --text-dim: #9a9ba3;
      --text-faint: #5c5e68;
      --ok: #6fae7a;
      --warn: #d9a441;
      --danger: #e2543c;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      background: radial-gradient(120% 140% at 50% -10%, #171a22 0%, var(--bg) 45%, var(--bg-deep) 100%);
      color: var(--text);
      font-family: 'Inter', sans-serif;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
    }

    #app {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
    }


    /* ---------- LOCAL 2-PLAYER GAME FLOW ---------- */
    #startscreen {
      position: absolute;
      inset: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(70% 70% at 50% 35%, rgba(45, 31, 12, .42), rgba(4, 5, 8, .94));
      backdrop-filter: blur(5px);
    }

    #startscreen.hide {
      display: none;
    }

    .start-card {
      width: min(420px, calc(100vw - 32px));
      padding: 34px 30px;
      text-align: center;
      background: rgba(20, 22, 29, .97);
      border: 1px solid var(--brass-soft);
      border-radius: 18px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
    }

    .start-badge {
      display: inline-block;
      padding: 5px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--text-faint);
      font: 600 10px 'IBM Plex Mono', monospace;
      letter-spacing: 1.4px;
    }

    .start-card h2 {
      margin: 14px 0 7px;
      font: 680 32px 'Fraunces', serif;
      color: var(--gold);
    }

    .start-card p {
      margin: 0 auto 22px;
      max-width: 320px;
      color: var(--text-dim);
      font-size: 13px;
      line-height: 1.5;
    }

    .game-btn {
      border: 1px solid var(--brass-soft);
      background: linear-gradient(180deg, #c99652, var(--brass));
      color: #1a1408;
      border-radius: 11px;
      padding: 12px 22px;
      cursor: pointer;
      font-weight: 800;
      letter-spacing: .5px;
      font-size: 13px;
      min-width: 180px;
    }

    #turnbar {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 18;
      display: none;
      align-items: center;
      gap: 10px;
      padding: 9px 12px 9px 15px;
      border: 1px solid var(--brass-soft);
      border-radius: 12px;
      background: rgba(20, 22, 29, .94);
      backdrop-filter: blur(7px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
      white-space: nowrap;
    }

    #turnbar.show {
      display: flex;
    }

    .turn-label {
      font-size: 9px;
      color: var(--text-faint);
      letter-spacing: 1.2px;
      font-weight: 700;
    }

    #turn-player {
      font-size: 13px;
      color: var(--gold);
      font-weight: 800;
      letter-spacing: .5px;
    }

    #turn-timer {
      min-width: 58px;
      text-align: center;
      padding: 4px 7px;
      border-radius: 7px;
      background: #0d0f14;
      color: var(--text);
      font: 700 13px 'IBM Plex Mono', monospace;
    }

    #turn-timer.warning {
      color: var(--warn);
    }

    #turn-timer.danger {
      color: var(--danger);
      animation: pulse .5s infinite;
    }

    #forfeitbtn {
      border: 1px solid #6d3329;
      background: #241411;
      color: #f07a63;
      border-radius: 8px;
      padding: 6px 9px;
      cursor: pointer;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .5px;
    }

    #players-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .player-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 8px;
      border: 1px solid transparent;
      border-radius: 8px;
      font-size: 12px;
    }

    .player-row.active {
      background: #211a10;
      border-color: var(--brass-soft);
    }

    .player-row span {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .player-row i {
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text-faint);
    }

    .player-row.active i {
      background: var(--gold);
      box-shadow: 0 0 7px var(--gold);
    }

    .player-row b {
      font-size: 9px;
      color: var(--text-faint);
      letter-spacing: .8px;
    }

    .player-row.active b {
      color: var(--gold);
    }

    /* ---------- TOP BAR ---------- */
    #topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 20px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(20, 22, 29, 0.92), rgba(15, 16, 21, 0.86));
      backdrop-filter: blur(6px);
      z-index: 20;
      position: relative;
      flex-wrap: wrap;
      gap: 10px;
    }

    #brand {
      display: flex;
      flex-direction: column;
      line-height: 1.05;
    }

    #brand h1 {
      font-family: 'Fraunces', serif;
      font-optical-sizing: auto;
      font-weight: 680;
      font-size: 22px;
      letter-spacing: 0.5px;
      margin: 0;
      color: var(--gold);
      text-shadow: 0 0 18px rgba(232, 176, 85, 0.18);
    }

    #brand p {
      margin: 2px 0 0;
      font-size: 11.5px;
      color: var(--text-dim);
      letter-spacing: 0.3px;
    }

    #topcontrols {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .pill-group {
      display: flex;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 3px;
      gap: 2px;
    }

    .pill {
      border: none;
      background: transparent;
      color: var(--text-dim);
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.4px;
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
      transition: all .15s ease;
    }

    .pill:hover {
      color: var(--text);
    }

    .pill.active {
      background: linear-gradient(180deg, #c99652, var(--brass));
      color: #1a1408;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
    }

    .iconbtn {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--text-dim);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      transition: all .15s ease;
    }

    .iconbtn:hover {
      color: var(--gold);
      border-color: var(--brass-soft);
    }

    .iconbtn.on {
      color: var(--gold);
      border-color: var(--brass);
    }

    #resetbtn {
      display: flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--brass-soft);
      background: var(--panel-2);
      color: var(--gold);
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.4px;
      padding: 8px 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: all .15s ease;
    }

    #resetbtn:hover {
      background: #1f2029;
      box-shadow: 0 0 0 1px var(--brass) inset;
    }

    /* ---------- MAIN LAYOUT ---------- */
    #main {
      flex: 1;
      display: flex;
      min-height: 0;
      position: relative;
    }

    #viewport {
      flex: 1;
      position: relative;
      min-width: 0;
    }

    #canvas-host {
      position: absolute;
      inset: 0;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      touch-action: none;
    }

    aside.panel {
      width: 252px;
      flex-shrink: 0;
      border-color: var(--line);
      background: linear-gradient(180deg, rgba(20, 22, 29, 0.9), rgba(15, 16, 21, 0.82));
      backdrop-filter: blur(6px);
      overflow-y: auto;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      z-index: 15;
    }

    #leftpanel {
      border-right: 1px solid var(--line);
    }

    #rightpanel {
      border-left: 1px solid var(--line);
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
    }

    .card h2 {
      margin: 0 0 10px;
      font-size: 10.5px;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--text-faint);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .card h2::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--brass);
      box-shadow: 0 0 6px var(--gold);
    }

    /* pieces grid */
    #piecesgrid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 5px;
    }

    .piece-cell {
      aspect-ratio: 1;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: #1b1d25;
      color: var(--text-dim);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .12s ease;
      user-select: none;
    }

    .piece-cell:hover {
      border-color: var(--brass-soft);
      color: var(--text);
    }

    .piece-cell.selected {
      background: linear-gradient(160deg, #3a2c14, #241a0c);
      border-color: var(--gold);
      color: var(--gold);
      box-shadow: 0 0 10px rgba(232, 176, 85, 0.25);
    }

    .piece-cell.removed {
      opacity: 0.28;
      text-decoration: line-through;
      cursor: default;
    }

    /* data rows */
    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 0;
      font-size: 12.5px;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    }

    .row:last-child {
      border-bottom: none;
    }

    .row .k {
      color: var(--text-dim);
    }

    .row .v {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.3px;
    }

    .v.ok {
      color: var(--ok);
    }

    .v.warn {
      color: var(--warn);
    }

    .v.danger {
      color: var(--danger);
    }

    /* stability gauge (signature element) */
    #gauge-wrap {
      margin-top: 2px;
    }

    #gauge {
      position: relative;
      height: 34px;
      border-radius: 8px;
      background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 10%);
      background-color: #0e0f14;
      border: 1px solid var(--line);
      overflow: hidden;
    }

    #gauge-fill {
      position: absolute;
      inset: 0;
      width: 100%;
      transform-origin: left center;
      background: linear-gradient(90deg, var(--ok), var(--warn));
      transition: width .25s ease, background .25s ease;
      opacity: 0.85;
    }

    #gauge-needle {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--gold);
      box-shadow: 0 0 8px var(--gold);
      left: 0%;
      transition: left .25s ease;
    }

    #gauge-label {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      font-size: 13px;
      color: #0c0d10;
      mix-blend-mode: normal;
    }

    #gauge-pct {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.5px;
      color: var(--text);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    }

    #com-track {
      position: relative;
      height: 8px;
      border-radius: 4px;
      background: #0e0f14;
      border: 1px solid var(--line);
      margin-top: 6px;
    }

    #com-support {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 30%;
      width: 40%;
      background: rgba(111, 174, 122, 0.25);
      border-left: 1px solid var(--ok);
      border-right: 1px solid var(--ok);
    }

    #com-dot {
      position: absolute;
      top: -3px;
      width: 6px;
      height: 14px;
      border-radius: 2px;
      background: var(--gold);
      left: 50%;
      box-shadow: 0 0 6px var(--gold);
      transition: left .2s ease, background .2s ease;
    }

    /* move history */
    #history {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 150px;
      overflow-y: auto;
    }

    #history .h-item {
      font-size: 11.5px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--text-dim);
      display: flex;
      gap: 8px;
      padding: 3px 0;
    }

    #history .h-item b {
      color: var(--gold);
      width: 20px;
      flex-shrink: 0;
    }

    #history .h-empty {
      color: var(--text-faint);
      font-size: 11.5px;
      font-style: italic;
    }

    /* controls legend */
    .legend-row {
      display: flex;
      justify-content: space-between;
      font-size: 11.5px;
      padding: 4px 0;
      color: var(--text-dim);
    }

    .legend-row kbd {
      background: #1c1e26;
      border: 1px solid var(--line);
      border-radius: 5px;
      padding: 2px 7px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--text);
      font-size: 10.5px;
    }

    /* block info floating panel */
    #blockinfo {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 14;
      width: 200px;
      background: var(--panel);
      border: 1px solid var(--brass-soft);
      border-radius: 12px;
      padding: 12px 14px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
      display: none;
    }

    #blockinfo.show {
      display: block;
    }

    #blockinfo h3 {
      margin: 0 0 8px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--gold);
      font-size: 14px;
      letter-spacing: 0.5px;
    }

    /* top-center state banner */
    #statebanner {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 14;
      background: rgba(20, 22, 29, 0.85);
      border: 1px solid var(--line);
      backdrop-filter: blur(6px);
      padding: 7px 18px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-dim);
      transition: all .3s ease;
    }

    #statebanner .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--ok);
      box-shadow: 0 0 8px var(--ok);
    }

    #statebanner.warning .dot {
      background: var(--warn);
      box-shadow: 0 0 8px var(--warn);
    }

    #statebanner.danger .dot {
      background: var(--danger);
      box-shadow: 0 0 8px var(--danger);
      animation: pulse 0.6s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.35;
      }
    }

    /* victory toast */
    #victory {
      position: absolute;
      bottom: 26px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      z-index: 16;
      background: linear-gradient(160deg, #2a2210, #1c1608);
      border: 1px solid var(--gold);
      border-radius: 14px;
      padding: 14px 22px;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transition: all .4s ease;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }

    #victory.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    #victory h3 {
      margin: 0 0 4px;
      font-family: 'Fraunces', serif;
      font-size: 20px;
      color: var(--gold);
    }

    #victory p {
      margin: 0;
      font-size: 12px;
      color: var(--text-dim);
    }

    #victory button {
      margin-top: 8px;
      background: none;
      border: 1px solid var(--brass-soft);
      color: var(--gold);
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 11px;
      cursor: pointer;
    }

    /* game over overlay */
    #gameover {
      position: absolute;
      inset: 0;
      z-index: 30;
      display: none;
      align-items: center;
      justify-content: center;
      background: radial-gradient(80% 80% at 50% 40%, rgba(20, 10, 8, 0.75), rgba(4, 3, 3, 0.92));
      backdrop-filter: blur(3px);
    }

    #gameover.show {
      display: flex;
    }

    #gameover .card {
      width: 340px;
      text-align: center;
      background: var(--panel);
      border: 1px solid var(--danger);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
      padding: 26px 22px;
    }

    #gameover .emoji {
      font-size: 38px;
      margin-bottom: 6px;
    }

    #gameover h2 {
      font-family: 'Fraunces', serif;
      font-size: 22px;
      color: var(--text);
      text-transform: none;
      letter-spacing: 0;
      margin: 0 0 6px;
    }

    #gameover h2::before {
      display: none;
    }

    #gameover p {
      color: var(--text-dim);
      font-size: 13px;
      margin: 4px 0;
    }

    #gameover .stat-row {
      display: flex;
      justify-content: space-between;
      margin: 14px 0;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
    }

    #gameover button {
      margin-top: 10px;
      width: 100%;
      padding: 11px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      background: linear-gradient(180deg, #c99652, var(--brass));
      color: #1a1408;
      font-weight: 700;
      letter-spacing: 0.5px;
      font-size: 13px;
    }

    /* mobile drawer toggles */
    #mobiletoggles {
      display: none;
      position: absolute;
      bottom: 16px;
      z-index: 18;
      gap: 10px;
      left: 16px;
      right: 16px;
      justify-content: space-between;
      pointer-events: none;
    }

    #mobiletoggles button {
      pointer-events: auto;
      background: var(--panel);
      border: 1px solid var(--brass-soft);
      color: var(--gold);
      border-radius: 10px;
      padding: 9px 14px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    /* fatal error */
    #fatal-error {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: var(--bg-deep);
      color: var(--text);
      text-align: center;
      padding: 30px;
      gap: 8px;
    }

    #fatal-error h2 {
      font-family: 'Fraunces', serif;
      color: var(--danger);
    }

    #fatal-error p {
      color: var(--text-dim);
      max-width: 420px;
    }

    #loading {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      background: var(--bg-deep);
      color: var(--text-dim);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      letter-spacing: 1px;
      transition: opacity .5s ease;
    }

    #loading .spinner {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 2px solid var(--line);
      border-top-color: var(--gold);
      animation: spin 0.9s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--line);
      border-radius: 3px;
    }

    @media (max-width: 880px) {
      aside.panel {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 78vw;
        max-width: 300px;
        transform: translateX(-110%);
        transition: transform .25s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
      }

      #rightpanel {
        right: 0;
        left: auto;
        transform: translateX(110%);
      }

      #leftpanel.open {
        transform: translateX(0);
      }

      #rightpanel.open {
        transform: translateX(0);
      }

      #mobiletoggles {
        display: flex;
      }

      #brand p {
        display: none;
      }

      #blockinfo {
        width: 170px;
      }
    }