:root{
    /* Palette: Alabaster Grey, Silver, Silver, Rosy Granite, Dim Grey */
    --ink:#e9e3e6; --panel:#c3baba; --panel2:#b2b2b2;
    --line:#9a8f97; --gold:#736f72; --cream:#736f72;
    --pipe:#9a8f97; --pipe-dark:#736f72; --muted:#9a8f97;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:radial-gradient(120% 80% at 50% -10%, #e9e3e6 0%, #c3baba 90%);
    color:var(--cream);
    font-family:"Impact","Haettenschweiler","Arial Narrow Bold",sans-serif;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:100%;gap:16px;padding:18px 12px;
    -webkit-tap-highlight-color:transparent;user-select:none;
  }
  .title{
    font-size:clamp(28px,7vw,44px);letter-spacing:2px;line-height:1;text-transform:uppercase;
    text-shadow:3px 3px 0 #b2b2b2, 6px 6px 0 rgba(115,111,114,.3);
  }
  .title b{color:var(--gold)}

  .layout{display:flex;gap:18px;align-items:stretch;justify-content:center;flex-wrap:wrap}
  .left{display:flex;flex-direction:column;gap:12px;align-items:center}

  .stage{
    position:relative;width:min(90vw,380px);aspect-ratio:400/600;border-radius:0;overflow:hidden;
    box-shadow:0 24px 60px -20px rgba(0,0,0,.8),0 0 0 4px var(--panel),0 0 0 6px rgba(255,255,255,.05);
    cursor:pointer;
  }
  canvas{display:block;width:100%;height:100%;touch-action:none}

  .topbar{
    position:fixed;top:12px;right:12px;z-index:900;
    display:flex;align-items:center;gap:10px;
  }

  .mute{
    width:40px;height:40px;border:0;border-radius:0;
    background:rgba(115,111,114,.85);backdrop-filter:blur(4px);color:#fff;font-size:19px;line-height:1;
    cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 8px rgba(115,111,114,.4);
    transition:transform .12s ease, background .15s ease;
  }
  .mute:hover{background:rgba(115,111,114,1);transform:scale(1.06)}
  .mute:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  .hint{
    font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;letter-spacing:.5px;
    font-size:13px;color:var(--muted);text-align:center;
    transition:opacity .8s ease;opacity:1;
  }
  .hint.gone{opacity:0;pointer-events:none}
  .hint kbd{
    font-family:inherit;background:var(--panel);border:1px solid var(--line);border-bottom-width:2px;
    border-radius:0;padding:1px 7px;color:var(--cream);
  }

  /* leaderboard chart */
  .panel{
    width:230px;max-width:90vw;background:linear-gradient(180deg,var(--panel) 0%, var(--panel2) 100%);
    border:1px solid var(--line);border-radius:0;padding:16px 14px;
    display:flex;flex-direction:column;gap:4px;align-self:stretch;
    box-shadow:0 24px 60px -28px rgba(0,0,0,.8);
  }
  .panel h2{
    font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-weight:700;
    font-size:20px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);
    text-shadow:1px 1px 0 #e9e3e6;margin-bottom:2px;
  }
  .panel .sub{
    font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;font-size:10.5px;letter-spacing:.6px;
    text-transform:uppercase;color:var(--muted);margin-bottom:10px;
  }
  .board{display:flex;flex-direction:column;gap:7px;flex:1}
  .row{display:grid;grid-template-columns:18px 1fr 30px;align-items:center;column-gap:8px;
    font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;font-size:13px}
  .row .rank{color:var(--muted);text-align:right}
  .row .name{position:relative;z-index:1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    grid-column:2;grid-row:1;padding:3px 8px}
  .row .bar{grid-column:2;grid-row:1;height:22px;background:var(--panel2);border-radius:0;overflow:hidden}
  .row .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pipe-dark),var(--pipe));border-radius:0;
    transition:width .5s ease}
  .row .sc{text-align:right;color:var(--cream);font-size:14px}
  .row.you .name{color:#fff}
  .row.you .bar i{background:linear-gradient(90deg,#9a8f97,#736f72)}
  .row.you .sc{color:var(--gold)}
  .panel .foot{
    font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;font-size:10px;letter-spacing:.4px;
    color:var(--muted);margin-top:10px;text-align:center;opacity:.8
  }

  /* ---- Intro rules popup ---- */
  .rules-overlay{
    position:fixed;inset:0;z-index:1000;
    display:flex;align-items:center;justify-content:center;padding:18px;
    background:rgba(115,111,114,.8);backdrop-filter:blur(5px);
    transition:opacity .45s ease;
  }
  .rules-overlay.gone{opacity:0;pointer-events:none}
  .rules-card{
    width:100%;max-width:340px;background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
    border:1px solid var(--line);border-radius:0;padding:24px 22px;
    box-shadow:0 24px 60px -16px rgba(0,0,0,.8);
    animation:rulesPop .35s cubic-bezier(.2,.9,.3,1.2);
  }
  @keyframes rulesPop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
  .rules-title{
    font-size:26px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);
    text-shadow:1px 1px 0 #e9e3e6;text-align:center;margin-bottom:14px;
  }
  .rules-list{
    list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:20px;
    font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;font-size:14px;
    line-height:1.45;color:var(--cream);
  }
  .rules-list li{padding-left:20px;position:relative}
  .rules-list li::before{content:"›";position:absolute;left:4px;color:var(--gold);font-size:16px;line-height:1.3}
  .rules-list b{color:var(--gold)}
  .rules-list kbd{
    font-family:inherit;background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;
    border-radius:0;padding:1px 6px;color:var(--cream);
  }
  .rules-splits{color:var(--gold);white-space:nowrap}
  .btn-rules{
    width:100%;font-family:inherit;font-size:18px;letter-spacing:2px;text-transform:uppercase;
    background:linear-gradient(135deg,var(--pipe-dark),var(--pipe));color:#fff;border:none;
    padding:12px 0;border-radius:0;cursor:pointer;
    box-shadow:0 4px 16px rgba(115,111,114,.35);
    transition:transform .12s,box-shadow .12s;
  }
  .btn-rules:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(115,111,114,.5)}

  /* ---- Wallet bar ---- */
  .wallet-bar{display:flex;align-items:center;gap:10px}
  .btn-wallet{
    font-family:inherit;font-size:13px;letter-spacing:1px;text-transform:uppercase;
    background:linear-gradient(135deg,var(--pipe),var(--pipe-dark));color:#fff;border:none;
    padding:7px 18px;border-radius:0;cursor:pointer;
    box-shadow:0 4px 16px rgba(115,111,114,.35);
    transition:transform .12s,box-shadow .12s;
  }
  .btn-wallet:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(115,111,114,.5)}
  .btn-wallet.connected{background:linear-gradient(135deg,#b2b2b2,#9a8f97);box-shadow:0 4px 16px rgba(115,111,114,.3)}
  .wallet-addr{
    font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;font-size:12px;
    letter-spacing:.5px;color:var(--muted)
  }
  .btn-disconnect{
    font-family:inherit;font-size:11px;letter-spacing:1px;text-transform:uppercase;
    background:transparent;color:var(--muted);border:1px solid var(--line);
    padding:5px 10px;border-radius:0;cursor:pointer;
    transition:color .15s,border-color .15s;
  }
  .btn-disconnect:hover{color:var(--cream);border-color:var(--muted)}

  /* ---- Pay gate overlay ---- */
  .pay-gate{
    position:absolute;inset:0;background:rgba(115,111,114,.85);backdrop-filter:blur(4px);
    display:none;align-items:center;justify-content:center;z-index:10;border-radius:0;
  }
  .pay-gate.active{display:flex}
  .pay-box{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:28px 24px;background:var(--panel);border:1px solid var(--line);border-radius:0;
    box-shadow:0 16px 48px rgba(0,0,0,.6);width:88%;max-width:280px;text-align:center;
  }
  .pay-title{font-size:26px;letter-spacing:2px;color:var(--gold);text-shadow:1px 1px 0 #e9e3e6}
  .pay-pot{font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;font-size:22px;color:#fff;letter-spacing:1px}
  .pay-desc{
    font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;font-size:13px;
    color:var(--muted);line-height:1.7
  }
  .pay-splits{color:var(--gold)}
  .pay-name{
    width:100%;font-family:inherit;font-size:18px;letter-spacing:3px;text-transform:uppercase;
    background:var(--panel2);border:1px solid var(--line);border-radius:0;
    color:var(--cream);padding:8px 12px;text-align:center;outline:none;
  }
  .pay-name:focus{border-color:var(--gold)}
  .btn-pay{
    width:100%;font-family:inherit;font-size:16px;letter-spacing:2px;text-transform:uppercase;
    background:linear-gradient(135deg,var(--pipe-dark),var(--pipe));color:#fff;border:none;
    padding:11px 0;border-radius:0;cursor:pointer;
    box-shadow:0 4px 16px rgba(115,111,114,.35);
    transition:transform .12s,box-shadow .12s;
  }
  .btn-pay:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(115,111,114,.5)}
  .btn-pay:disabled{opacity:.55;cursor:default}
  .pay-status{
    font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;font-size:12px;
    color:var(--muted);min-height:16px;letter-spacing:.5px;
  }

  /* ---- Pot display + countdown in sidebar ---- */
  .pot-display{
    display:flex;flex-direction:column;align-items:center;
    background:var(--panel2);border:1px solid var(--line);border-radius:0;
    padding:10px 8px;margin-bottom:4px;
  }
  .pot-label{
    font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;font-size:9px;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)
  }
  .pot-amount{font-size:22px;color:var(--gold);letter-spacing:1px;text-shadow:1px 1px 0 #e9e3e6}
  .countdown{
    font-family:"Arial Narrow",Arial,sans-serif;font-weight:bold;font-size:11px;
    letter-spacing:.8px;color:var(--muted);text-align:center;margin-bottom:6px;
  }
  /* Prize rank badges for top 3 */
  .row.prize-1 .rank::after{content:" 🥇";font-size:10px}
  .row.prize-2 .rank::after{content:" 🥈";font-size:10px}
  .row.prize-3 .rank::after{content:" 🥉";font-size:10px}