/* hoodWARs palette — Robinhood: lime #CCFF00 on warm black #110e08.
     Role names kept from the base project so the whole UI re-themes from here:
     amber = primary (lime) · cyan = "you" / ivory · magenta = rival / Robinhood orange · violet = Robinhood green */
  :root{
    --bg:#F3F0E6;
    --bg-panel:#FFFFFF;
    --bg-panel-alt:#E8E4D4;
    --accent-amber:#4F6A00;
    --accent-cyan:#2B271C;
    --accent-magenta:#C43A00;
    --accent-violet:#0A7A3B;
    --on-accent:#F7FFD0;
    --text-primary:#110E08;
    --text-muted:#5A564C;
    --border:#8F8A78;
    --danger:#C43A00;
    --success:#0A7A3B;
    --scan:0.035;
    --vig:0.10;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#110E08;
      --bg-panel:#1C180D;
      --bg-panel-alt:#2A261C;
      --accent-amber:#CCFF00;
      --accent-cyan:#F2EFE4;
      --accent-magenta:#FF5000;
      --accent-violet:#00C805;
      --on-accent:#110E08;
      --text-primary:#FFFFFF;
      --text-muted:#A8A398;
      --border:#4D4A46;
      --danger:#FF5000;
      --success:#00C805;
      --scan:0.12;
      --vig:0.45;
    }
  }
  :root[data-theme="dark"]{
    --bg:#110E08;
    --bg-panel:#1C180D;
    --bg-panel-alt:#2A261C;
    --accent-amber:#CCFF00;
    --accent-cyan:#F2EFE4;
    --accent-magenta:#FF5000;
    --accent-violet:#00C805;
    --on-accent:#110E08;
    --text-primary:#FFFFFF;
    --text-muted:#A8A398;
    --border:#4D4A46;
    --danger:#FF5000;
    --success:#00C805;
    --scan:0.12;
    --vig:0.45;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text-primary);
    font-family:'VT323',monospace;
    min-height:100vh;
    background-image:
      radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent-amber) 10%, transparent), transparent 45%),
      radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent-violet) 8%, transparent), transparent 40%);
    position:relative;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background:repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,var(--scan)) 0px,
      rgba(0,0,0,var(--scan)) 1px,
      transparent 1px,
      transparent 3px
    );
    pointer-events:none;
    opacity:0.65;
    z-index:1;
  }
  body::after{
    content:"";
    position:fixed; inset:0;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,var(--vig)) 100%);
    pointer-events:none;
    z-index:1;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  a{color:inherit;}
  button{font-family:inherit;}
  .pixel{font-family:'Press Start 2P', monospace; line-height:1.5;}

  .wrap{max-width:1040px;margin:0 auto;padding:0 24px 80px;position:relative;z-index:2;}

  /* ---------- header ---------- */
  header{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding:20px 24px;
    max-width:1040px; margin:0 auto;
    position:relative; z-index:2;
  }
  .logo{
    font-family:'Press Start 2P', monospace;
    font-size:15px;
    letter-spacing:0.02em;
    text-transform:none;
    display:flex; align-items:center; gap:12px;
    color:var(--text-primary);
    text-shadow: 2px 2px 0 var(--border);
  }
  .logo b{color:var(--accent-amber); font-weight:400;}
  .logo::after{
    content:"_"; color:var(--accent-amber);
    animation:blink 1s steps(1) infinite;
  }
  .logo .dot{
    width:10px;height:10px;
    background:var(--accent-amber);
    box-shadow:0 0 10px var(--accent-amber);
    flex-shrink:0;
  }
  .header-right{display:flex; align-items:center; gap:14px; font-size:16px; flex-wrap:wrap;}
  .net-chip{
    display:inline-flex; align-items:center; gap:8px;
    border:2px solid var(--border); background:var(--bg-panel);
    padding:6px 12px; font-family:'VT323',monospace; font-size:16px; color:var(--text-muted);
    white-space:nowrap;
  }
  .net-chip i{width:8px; height:8px; border-radius:50%; background:var(--accent-amber); box-shadow:0 0 8px var(--accent-amber); animation:pulse 1.6s ease-in-out infinite;}
  .net-chip b{color:var(--text-primary); font-weight:400;}
  .tx-line{font-family:'VT323',monospace; font-size:15px; color:var(--text-muted); text-align:center; margin-top:14px;}
  .wallet-chip{
    display:flex; align-items:center; gap:8px;
    background:var(--bg-panel-alt);
    border:2px solid var(--border);
    padding:8px 14px;
    font-family:'VT323',monospace;
    font-weight:600;
    font-size:18px;
  }
  .wallet-chip .bal{color:var(--accent-amber); font-variant-numeric:tabular-nums;}
  .notify-dot{
    position:absolute; top:-6px; right:-6px;
    width:14px; height:14px; border-radius:50%;
    background:var(--danger); border:2px solid var(--bg);
    box-shadow:0 0 6px var(--danger);
    animation:pulse 1.2s ease-in-out infinite;
  }
  .ghost-link{
    color:var(--text-muted);
    font-family:'VT323',monospace;
    font-size:16px;
    text-decoration:none;
    border-bottom:1px solid transparent;
    cursor:pointer;
    background:none; border:none; padding:0;
  }
  .ghost-link:hover{color:var(--accent-cyan); border-bottom-color:var(--accent-cyan);}

  /* ---------- panel / cabinet bezel frame ---------- */
  .panel{
    background:var(--bg-panel);
    border:3px solid var(--text-primary);
    box-shadow:0 0 0 3px var(--bg), 0 0 0 6px var(--accent-amber), 6px 6px 0 6px rgba(0,0,0,0.35);
    position:relative;
    padding:28px;
    margin:6px 8px 12px 6px;
  }
  .panel::before, .panel::after{
    content:""; position:absolute; width:18px; height:18px; pointer-events:none;
  }
  .panel::before{ top:-6px; left:-6px; border-top:3px solid var(--accent-amber); border-left:3px solid var(--accent-amber); }
  .panel::after{ bottom:-6px; right:-6px; border-bottom:3px solid var(--accent-cyan); border-right:3px solid var(--accent-cyan); }

  /* ---------- screens ---------- */
  .screen{display:none;}
  .screen.active{display:block; animation:flicker 0.35s ease-out;}
  @keyframes flicker{
    0%{opacity:0; transform:translateY(4px);}
    60%{opacity:1;}
    100%{opacity:1; transform:translateY(0);}
  }

  /* ---------- landing ---------- */
  .hero{padding:52px 0 24px; text-align:left; position:relative; overflow:hidden;}
  .hero::before{
    content:"";
    position:absolute; left:-20%; right:-20%; bottom:-6%; height:60%;
    background-image:
      repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-amber) 40%, transparent) 0 2px, transparent 2px 64px),
      repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent-amber) 26%, transparent) 0 2px, transparent 2px 36px);
    transform: perspective(280px) rotateX(58deg);
    transform-origin:bottom;
    opacity:0.4;
    pointer-events:none;
    z-index:0;
    -webkit-mask-image: linear-gradient(to top, black, transparent 88%);
    mask-image: linear-gradient(to top, black, transparent 88%);
  }
  .hero > *{position:relative; z-index:1;}
  .eyebrow{
    color:var(--accent-cyan);
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    letter-spacing:0.02em;
    line-height:1.6;
    margin-bottom:18px;
  }
  h1.title{
    font-family:'Press Start 2P', monospace;
    font-size:clamp(20px, 3.6vw, 34px);
    line-height:1.5;
    margin:0 0 22px;
    max-width:15ch;
    color:var(--text-primary);
    text-shadow: 2px 2px 0 var(--bg-panel-alt);
  }
  .lede{
    color:var(--text-muted);
    font-size:20px;
    line-height:1.5;
    max-width:46ch;
    margin:0 0 20px;
  }
  h1.title .hl{color:var(--accent-amber);}
  @keyframes blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

  /* ---------- cabinet buttons ---------- */
  .btn{
    font-family:'VT323',monospace;
    font-size:22px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    line-height:1;
    padding:14px 28px;
    border:none;
    cursor:pointer;
    color:var(--on-accent);
    background:var(--accent-amber);
    box-shadow:0 5px 0 0 color-mix(in srgb, var(--accent-amber) 55%, black);
    transition:transform 0.08s ease, box-shadow 0.08s ease;
    clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
  }
  .btn:hover{transform:translateY(-2px); box-shadow:0 7px 0 0 color-mix(in srgb, var(--accent-amber) 55%, black);}
  .btn:active{transform:translateY(4px); box-shadow:0 1px 0 0 color-mix(in srgb, var(--accent-amber) 55%, black);}
  .btn.secondary{
    background:var(--bg-panel-alt); color:var(--text-primary);
    box-shadow:0 5px 0 0 var(--border);
  }
  .btn.secondary:hover{box-shadow:0 7px 0 0 var(--border);}
  .btn.secondary:active{box-shadow:0 1px 0 0 var(--border);}
  .btn.magenta{background:var(--accent-magenta); color:#fff; box-shadow:0 5px 0 0 color-mix(in srgb, var(--accent-magenta) 55%, black);}
  .btn.magenta:hover{box-shadow:0 7px 0 0 color-mix(in srgb, var(--accent-magenta) 55%, black);}
  .btn.magenta:active{box-shadow:0 1px 0 0 color-mix(in srgb, var(--accent-magenta) 55%, black);}
  .btn:disabled{opacity:0.4; cursor:not-allowed; transform:none !important; box-shadow:none !important;}
  .btn.small{padding:8px 16px; font-size:17px; box-shadow:0 3px 0 0 color-mix(in srgb, var(--accent-amber) 55%, black);}
  .btn.small:active{transform:translateY(3px); box-shadow:0 1px 0 0 color-mix(in srgb, var(--accent-amber) 55%, black);}
  .btn.text{background:none; color:var(--text-muted); box-shadow:none; padding:10px 4px;}
  .btn.text:hover{color:var(--accent-cyan); transform:none; box-shadow:none;}

  .cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

  .stat-strip{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2px;
    background:var(--border); border:2px solid var(--border); margin-top:40px;
  }
  .stat{background:var(--bg-panel); padding:18px 20px;}
  .stat .num{font-size:19px; color:var(--accent-cyan); font-variant-numeric:tabular-nums;}
  .stat .lbl{font-family:'VT323',monospace; font-size:15px; color:var(--text-muted); margin-top:10px; text-transform:uppercase; letter-spacing:0.02em;}

  /* ---------- modal ---------- */
  .modal-backdrop{position:fixed; inset:0; background:rgba(8,6,2,0.84); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
  .modal-backdrop.hidden{display:none;}
  [hidden]{display:none !important;}   /* a plain `hidden` attribute must always win over display:flex etc. */
  .modal{background:var(--bg-panel); border:3px solid var(--text-primary); box-shadow:0 0 0 3px var(--bg), 0 0 0 6px var(--accent-amber); max-width:420px; width:100%; padding:32px; position:relative; margin:6px;}
  .modal::before, .modal::after{content:""; position:absolute; width:16px; height:16px;}
  .modal::before{top:-5px; left:-5px; border-top:3px solid var(--accent-cyan); border-left:3px solid var(--accent-cyan);}
  .modal::after{bottom:-5px; right:-5px; border-bottom:3px solid var(--accent-cyan); border-right:3px solid var(--accent-cyan);}
  .modal h3{font-family:'Press Start 2P',monospace; font-size:16px; margin:0 0 14px; line-height:1.5; color:var(--accent-amber);}
  .modal p{color:var(--text-muted); font-size:18px; line-height:1.4; margin:0 0 22px;}
  .coin-spinner{width:54px; height:54px; border-radius:50%; border:4px solid var(--border); border-top-color:var(--accent-amber); margin:0 auto 20px; animation:spin 0.9s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .modal .field input{width:100%;}
  .modal-step{display:none;}
  .modal-step.active{display:block;}

  /* ---------- section heading ---------- */
  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin:52px 0 20px; gap:12px; flex-wrap:wrap;}
  .section-head h2{font-family:'Press Start 2P',monospace; font-size:15px; margin:0; text-transform:uppercase; color:var(--accent-cyan);}
  .section-head .hint{font-family:'VT323',monospace; color:var(--text-muted); font-size:17px;}

  /* ---------- game select tabs ---------- */
  .game-tabs{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:40px;}
  .game-tab{
    text-align:left; background:var(--bg-panel); border:1px solid var(--border);
    padding:18px; cursor:pointer; display:flex; flex-direction:column; gap:6px;
    position:relative;
  }
  .game-tab:hover{border-color:var(--accent-cyan);}
  .game-tab.active{border-color:var(--accent-amber); background:var(--bg-panel-alt);}
  .game-tab .gname{font-family:'VT323',monospace; font-weight:700; font-size:19px; color:var(--accent-violet);}
  .game-tab .gtag{font-size:16px; color:var(--text-muted); line-height:1.4;}
  .game-tab .grounds{font-size:11px; color:var(--accent-cyan); margin-top:2px;}

  /* ---------- opponent grid ---------- */
  .opp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px;}
  .opp-card{
    background:var(--bg-panel); border:1px solid var(--border);
    padding:20px; cursor:pointer; text-align:left;
    display:flex; flex-direction:column; gap:12px;
    position:relative; transition:border-color 0.12s ease;
  }
  .opp-card:hover{border-color:var(--accent-cyan);}
  .opp-card.selected{border-color:var(--accent-amber); background:var(--bg-panel-alt);}
  .opp-card.selected::after{content:"Selected"; position:absolute; top:12px; right:12px; font-size:11px; color:var(--accent-amber); font-weight:600;}
  .lock-badge{position:absolute; top:12px; left:12px; font-size:15px;}
  .opp-top{display:flex; align-items:center; gap:12px;}
  .avatar{width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:20px; background:var(--bg-panel-alt); border:1px solid var(--border);}
  .opp-name{font-weight:600; font-size:15px; color:var(--accent-magenta);}
  .opp-sub{font-size:16px; color:var(--text-muted);}
  .opp-meta{display:flex; justify-content:space-between; align-items:center; font-size:16px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:12px;}
  .opp-meta b{color:var(--text-primary); font-family:'VT323',monospace; font-size:15px; font-variant-numeric:tabular-nums;}
  .opp-meta .plays{color:var(--accent-cyan); font-family:'VT323',monospace; font-weight:600; font-size:15px; text-align:right; max-width:60%;}
  .filter-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:18px;}
  .filter-row .field{margin:0; flex:1 1 240px; max-width:340px;}
  .stake-filter{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--bg-panel-alt); border:1px solid var(--border); padding:8px 14px; font-family:'VT323',monospace; font-size:17px; color:var(--text-muted);}
  .stake-filter input{background:none; border:none; border-bottom:1px solid var(--border); color:var(--text-primary); font-family:'VT323',monospace; font-size:18px; width:78px; padding:2px 4px; outline:none; font-variant-numeric:tabular-nums;}
  .stake-filter input:focus{border-bottom-color:var(--accent-amber);}
  .stake-filter .unit{color:var(--accent-amber);}
  .hwars-note{font-family:'VT323',monospace; font-size:17px; color:var(--text-muted);}
  .hwars-note.ok{color:var(--success);}
  .hwars-note.err{color:var(--danger);}
  .hwars-confirm{margin-top:16px; padding:14px 16px; background:var(--bg-panel-alt); border:2px solid var(--accent-magenta);}
  .hwars-confirm[hidden]{display:none;}
  .oracle-bar{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:5;
    display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap;
    padding:8px 24px; background:var(--bg-panel); border-bottom:2px solid var(--border);
    font-family:'VT323',monospace; font-size:18px; color:var(--text-muted);
  }
  .oracle-bar[hidden]{display:none;}
  .or-tag{display:inline-flex; align-items:center; gap:8px; color:var(--text-primary); text-transform:uppercase; letter-spacing:0.04em;}
  .or-tag i{width:8px; height:8px; border-radius:50%; background:var(--accent-amber); box-shadow:0 0 8px var(--accent-amber); animation:pulse 1.6s ease-in-out infinite;}
  .or-item{display:inline-flex; align-items:baseline; gap:8px; font-variant-numeric:tabular-nums; white-space:nowrap;}
  .or-item b{font-weight:400; color:var(--text-muted);}
  .or-price{color:var(--text-primary); font-size:20px;}
  .or-chg.up, .or-price.up{color:var(--success);}
  .or-chg.down, .or-price.down{color:var(--danger);}
  .or-meta{margin-left:auto; font-size:15px;}
  .usd-line{font-family:'VT323',monospace; font-size:16px; color:var(--text-muted); margin-top:10px;}
  @media (max-width:640px){
    .oracle-bar{padding:6px 16px; font-size:15px; gap:2px 12px;}
    .or-tag{order:1;} .or-meta{order:2; margin-left:auto; font-size:14px;} .or-long{display:none;}
    .or-item{order:3; gap:6px;} .or-price{font-size:16px;}
  }
  #balanceSlot{display:inline-flex; gap:10px; flex-wrap:wrap;}
  td.num, th.num{white-space:nowrap;}
  .cur-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 22px;}
  .cur-label{font-family:'VT323',monospace; font-size:18px; color:var(--text-muted); margin-right:2px;}
  .cur-note b{color:var(--text-primary); font-weight:400;}
  .cur-btn{font-family:'VT323',monospace; font-size:20px; letter-spacing:0.03em; padding:8px 18px; background:var(--bg-panel-alt); color:var(--text-primary); border:2px solid var(--border); cursor:pointer;}
  .cur-btn:hover{border-color:var(--accent-amber);}
  .cur-btn.active{background:var(--accent-amber); color:var(--on-accent); border-color:var(--accent-amber);}
  .cur-btn:focus-visible, .chip:focus-visible, .ghost-link:focus-visible{outline:2px solid var(--accent-amber); outline-offset:2px;}
  .cur-note{font-family:'VT323',monospace; font-size:16px; color:var(--text-muted);}
  .wallet-chip.active{border-color:var(--accent-amber);}
  .toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:60; max-width:min(92vw, 460px); background:var(--bg-panel); color:var(--text-primary); border:2px solid var(--accent-amber); padding:12px 18px; font-family:'VT323',monospace; font-size:18px; text-align:center;}
  .empty-note{color:var(--text-muted); font-size:16px; padding:20px 0;}
  .empty-note.err{color:var(--danger);}

  /* ---------- fields ---------- */
  .field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
  .field label{font-size:16px; color:var(--text-muted);}
  .field input[type="text"], .field input[type="number"]{
    background:var(--bg-panel-alt); border:1px solid var(--border); color:var(--text-primary);
    padding:11px 14px; font-family:'VT323',monospace; font-size:15px; outline:none;
  }
  .field input:focus{border-color:var(--accent-cyan);}

  /* ---------- icon picker ---------- */
  .icon-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
  .icon-pick{
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; background:var(--bg-panel-alt); border:2px solid var(--border);
    cursor:pointer; transition:border-color 0.1s ease, transform 0.06s ease;
  }
  .icon-pick:hover{border-color:var(--accent-cyan);}
  .icon-pick.selected{border-color:var(--accent-amber); box-shadow:0 0 10px color-mix(in srgb, var(--accent-amber) 60%, transparent); transform:translateY(-2px);}

  /* ---------- stake panel ---------- */
  .stake-box{margin-top:24px;}
  .stake-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
  .stake-input-wrap{display:flex; align-items:center; gap:10px; background:var(--bg-panel-alt); border:1px solid var(--border); padding:10px 16px;}
  .stake-input-wrap input{background:none; border:none; outline:none; color:var(--text-primary); font-family:'VT323',monospace; font-weight:700; font-size:26px; width:110px; font-variant-numeric:tabular-nums;}
  .stake-unit{font-family:'VT323',monospace; font-weight:600; color:var(--accent-amber);}
  .chip-row{display:flex; gap:8px;}
  .chip{background:transparent; border:1px solid var(--border); color:var(--text-muted); padding:8px 12px; font-size:15px; cursor:pointer;}
  .chip:hover{border-color:var(--accent-cyan); color:var(--text-primary);}

  .breakdown{margin-top:22px; border-top:1px solid var(--border); padding-top:18px; display:flex; flex-direction:column; gap:8px; max-width:360px;}
  .b-row{display:flex; justify-content:space-between; font-size:16px; color:var(--text-muted);}
  .b-row b{white-space:nowrap; color:var(--text-primary); font-family:'VT323',monospace; font-variant-numeric:tabular-nums; font-size:16px;}
  .b-row.total{border-top:1px solid var(--border); padding-top:8px; margin-top:4px;}
  .b-row.total b{color:var(--accent-amber); font-size:19px;}

  /* ---------- match waiting ---------- */
  .challenge-name-line{text-align:center; margin-bottom:8px;}
  .challenge-name-line .g{font-size:15px; color:var(--accent-cyan); font-family:'VT323',monospace; font-weight:600;}
  .challenge-name-line .n{font-family:'VT323',monospace; font-weight:700; font-size:22px; margin-top:2px;}
  .versus{display:flex; align-items:center; justify-content:center; gap:28px; margin:28px 0 36px;}
  .vplayer{text-align:center;}
  .vplayer .avatar{width:72px; height:72px; font-size:30px; margin:0 auto 10px;}
  .vplayer .name{font-weight:600; color:var(--accent-magenta);}
  .vplayer .sub{font-size:16px; color:var(--text-muted);}
  .vs-mark{font-family:'VT323',monospace; font-weight:700; font-size:22px; color:var(--accent-magenta);}
  .pot-readout{text-align:center; margin:8px 0 30px;}
  .pot-readout .lbl{font-size:15px; color:var(--text-muted); margin-bottom:10px;}
  .pot-readout .val{font-size:30px; color:var(--accent-amber); font-variant-numeric:tabular-nums;}
  .status-line{text-align:center; color:var(--text-muted); font-size:16px; display:flex; align-items:center; justify-content:center; gap:10px;}
  .pulse-dot{width:8px; height:8px; border-radius:50%; background:var(--accent-cyan); animation:pulse 1.1s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:0.3;} 50%{opacity:1;}}

  /* ---------- game ---------- */
  .game-hud{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:14px;}
  .hud-item .lbl{font-size:11px; color:var(--text-muted); margin-bottom:8px;}
  .hud-item .val{font-size:20px; font-variant-numeric:tabular-nums;}
  .game-tagline{color:var(--text-muted); font-size:15px; margin-bottom:22px;}
  .question-display{
    text-align:center; font-family:'VT323',monospace; font-weight:700; font-size:34px;
    color:var(--accent-cyan); margin-bottom:20px; min-height:44px;
  }
  .game-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:340px; margin:0 auto 24px;}
  .game-grid.cols-2{grid-template-columns:repeat(2,1fr); max-width:260px;}
  .tile{
    aspect-ratio:1; background:var(--bg-panel-alt); border:1px solid var(--border); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-family:'VT323',monospace; font-weight:700; font-size:22px; color:var(--text-primary);
    box-shadow:0 4px 0 0 color-mix(in srgb, var(--border) 60%, black);
    transition:transform 0.06s ease, box-shadow 0.06s ease;
    clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
  }
  .tile:active{transform:translateY(3px); box-shadow:0 1px 0 0 color-mix(in srgb, var(--border) 60%, black);}
  .tile.live{box-shadow:0 1px 0 0 color-mix(in srgb, var(--border) 60%, black), 0 0 20px currentColor; animation:pop 0.15s ease-out;}
  .tile.live.t-reaction{background:var(--accent-cyan); border-color:var(--accent-cyan); color:var(--accent-cyan);}
  .tile.correct-flash{background:var(--success); border-color:var(--success); color:#fff;}
  .tile.wrong-flash{background:var(--danger); border-color:var(--danger); color:#fff;}
  .tile.c-amber{border-color:var(--accent-amber);} .tile.c-amber.live{background:var(--accent-amber); color:var(--accent-amber);}
  .tile.c-cyan{border-color:var(--accent-cyan);} .tile.c-cyan.live{background:var(--accent-cyan); color:var(--accent-cyan);}
  .tile.c-magenta{border-color:var(--accent-magenta);} .tile.c-magenta.live{background:var(--accent-magenta); color:var(--accent-magenta);}
  .tile.c-violet{border-color:var(--accent-violet);} .tile.c-violet.live{background:var(--accent-violet); color:var(--accent-violet);}
  @keyframes pop{from{transform:scale(0.85);} to{transform:scale(1);}}
  .game-msg{text-align:center; color:var(--text-muted); font-size:16px; min-height:20px;}

  /* ---------- realtime arenas (Pong / Snake Arena) ---------- */
  #rtStatus{margin-bottom:16px;}
  .rt-status-row{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
  .rt-status-item{font-family:'VT323',monospace; font-size:17px; color:var(--text-muted);}
  .rt-status-item b{color:var(--text-primary); font-size:20px;}
  .rt-timer{font-family:'Press Start 2P',monospace; font-size:14px; color:var(--accent-amber);}

  .dpad-wrap{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:10px;}
  .dpad{display:grid; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); gap:6px;}
  .dpad button{
    font-family:'VT323',monospace; font-size:22px; background:var(--bg-panel-alt); border:2px solid var(--border);
    color:var(--text-primary); cursor:pointer;
  }
  .dpad button:active{background:var(--accent-cyan); color:var(--on-accent);}
  .dpad .dpad-up{grid-column:2; grid-row:1;}
  .dpad .dpad-left{grid-column:1; grid-row:2;}
  .dpad .dpad-center{grid-column:2; grid-row:2; visibility:hidden;}
  .dpad .dpad-right{grid-column:3; grid-row:2;}
  .dpad .dpad-down{grid-column:2; grid-row:3;}
  .rt-action-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}

  .health-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .health-row .name{width:74px; font-family:'VT323',monospace; font-size:17px; flex-shrink:0;}
  .health-bar-track{flex:1; height:16px; background:var(--bg-panel-alt); border:1px solid var(--border); position:relative; overflow:hidden;}
  .health-bar-fill{height:100%; transition:width 0.2s ease;}
  .health-bar-fill.you{background:var(--accent-cyan);}
  .health-bar-fill.opp{background:var(--accent-magenta);}

  .pong-canvas{display:block; margin:0 auto 18px; background:var(--bg-panel-alt); border:2px solid var(--border); max-width:100%; height:auto;}
  #pgUpBtn, #pgDownBtn{width:110px; font-size:20px; padding:14px 10px; user-select:none; touch-action:none;}

  .snake-grid{display:grid; gap:1px; margin:0 auto 18px; max-width:420px; background:var(--border);}
  .snake-cell{aspect-ratio:1; background:var(--bg-panel-alt); display:flex; align-items:center; justify-content:center; font-size:9px;}
  .snake-cell.you-body{background:var(--accent-cyan);}
  .snake-cell.you-head{background:var(--accent-cyan); box-shadow:0 0 8px var(--accent-cyan);}
  .snake-cell.opp-body{background:var(--accent-magenta);}
  .snake-cell.opp-head{background:var(--accent-magenta); box-shadow:0 0 8px var(--accent-magenta);}
  .snake-cell.food{background:var(--bg-panel-alt);}
  .snake-cell.food::after{content:"🪶"; font-size:11px;}

  /* ---------- result ---------- */
  .result-banner{text-align:center; padding:36px 0 18px;}
  .result-banner .tag{font-family:'VT323',monospace; color:var(--accent-cyan); font-weight:600; letter-spacing:0.03em;}
  .result-banner h2{font-family:'VT323',monospace; font-size:44px; margin:8px 0 4px;}
  .result-banner.lose h2{color:var(--text-muted);}
  .result-banner.win h2{color:var(--accent-amber);}
  .score-row{display:flex; justify-content:center; gap:40px; margin:20px 0 8px; font-size:16px; color:var(--text-muted);}
  .score-row b{display:block; font-size:20px; color:var(--text-primary); font-variant-numeric:tabular-nums; margin-top:10px;}
  .direct-note{font-size:16px; color:var(--text-muted); margin-top:10px; text-align:center;}

  /* ---------- table (admin) ---------- */
  table{width:100%; border-collapse:collapse; font-size:16px;}
  th{text-align:left; color:var(--text-muted); font-weight:400; font-family:'Press Start 2P', monospace; font-size:9px; padding:12px; border-bottom:1px solid var(--border);}
  td{padding:12px; border-bottom:1px solid var(--border);}
  td.num, th.num{text-align:right; font-family:'VT323',monospace; font-variant-numeric:tabular-nums; font-size:15px;}
  .status-pill{font-family:'Press Start 2P', monospace; font-size:9px; padding:5px 9px; border:1px solid var(--border); color:var(--text-muted); display:inline-block;}
  .status-pill.live{color:var(--accent-cyan); border-color:var(--accent-cyan);}
  .status-pill.settled{color:var(--success); border-color:var(--success);}

  .admin-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin:26px 0 30px;}
  .admin-stats .panel{padding:20px;}
  .admin-stats .lbl{font-size:16px; color:var(--text-muted); margin-bottom:12px;}
  .admin-stats .val{font-size:17px; font-variant-numeric:tabular-nums;}
  .admin-stats .val.amber{color:var(--accent-amber);}
  .admin-stats .val.cyan{color:var(--accent-cyan);}
  .commission-panel{margin-bottom:36px;}
  .commission-panel .row{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;}
  .commission-panel .rate-input-wrap{display:flex; align-items:center; gap:8px; background:var(--bg-panel-alt); border:1px solid var(--border); padding:10px 14px;}
  .commission-panel .rate-input-wrap input{background:none; border:none; outline:none; width:64px; font-family:'VT323',monospace; font-weight:700; font-size:22px; color:var(--text-primary); font-variant-numeric:tabular-nums;}
  .rate-note{font-size:16px; color:var(--text-muted); margin-top:10px; max-width:56ch; line-height:1.5;}
  .save-note{font-size:16px; color:var(--success); margin-top:10px; display:none;}
  .payout-addr{font-size:15px; color:var(--text-muted); margin-top:14px;}
  .payout-addr b{color:var(--text-primary); font-family:'VT323',monospace;}

  footer.tiny-note{max-width:1040px; margin:60px auto 0; padding:20px 24px; color:var(--text-muted); font-size:16px; border-top:1px solid var(--border);}

  @media (max-width:640px){
    .versus{gap:16px;}
    .stat-strip{grid-template-columns:1fr;}
    .pixel{font-size:10px;}
  }

/* --- app shell additions --- */
.how-list{margin:0 0 12px 22px; padding:0; font-size:19px; line-height:1.45;}
.how-list li{margin-bottom:8px;}
.how-list b{color:var(--accent-amber);}
.fineprint{color:var(--text-muted); font-size:16px; line-height:1.4;}
.fineprint a, footer a, .modal a{color:var(--accent-amber);}
.wallet-opt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--bg-panel-alt); color:var(--text-primary); border:1px solid var(--border); padding:12px 14px; font-size:20px; cursor:pointer;}
.wallet-opt:hover{border-color:var(--accent-amber);}
.wallet-opt img{width:28px; height:28px;}
.opp-card .cta-row{margin-top:4px;}
.opp-card.mine{border-color:var(--accent-amber);}
.res-win{color:var(--success);} .res-loss{color:var(--danger);} .res-draw{color:var(--text-muted);}

/* game checkboxes on the challenge form + pager + game chips on cards */
.game-pick{display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 16px;}
.game-pick label{display:flex; align-items:center; gap:8px; background:var(--bg-panel-alt); border:1px solid var(--border); padding:8px 12px; cursor:pointer; font-size:18px; color:var(--text-primary);}
.game-pick label:has(input:checked){border-color:var(--accent-amber);}
.game-pick input, .accept-games input{accent-color:var(--accent-magenta); width:18px; height:18px;}
.game-pick-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; font-size:18px; color:var(--text-muted);}
.game-pick-head .chip{padding:4px 10px; font-size:14px;}
.accept-games{display:flex; flex-direction:column; gap:8px; margin:0 0 16px;}
.accept-games label{display:flex; align-items:center; gap:10px; background:var(--bg-panel-alt); border:1px solid var(--border); padding:10px 12px; cursor:pointer; font-size:19px; color:var(--text-primary);}
.accept-games label:has(input:checked){border-color:var(--accent-amber);}
.opp-games{display:flex; flex-wrap:wrap; gap:6px;}
.opp-games span{font-size:14px; border:1px solid var(--border); padding:1px 8px; color:var(--text-muted);}
.pager{display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap; margin-top:20px; font-size:18px; color:var(--text-muted);}
.pager .pages{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.pager .pg{min-width:38px; padding:7px 10px; background:transparent; border:1px solid var(--border); color:var(--text-primary); font-size:17px; cursor:pointer;}
.pager .pg:hover:not(:disabled){border-color:var(--accent-cyan);}
.pager .pg.active{border-color:var(--accent-amber); color:var(--accent-amber); font-weight:700;}
.pager .pg:disabled{opacity:.45; cursor:default;}
.pager .gap{padding:0 4px;}
.pager select{background:var(--bg-panel-alt); color:var(--text-primary); border:1px solid var(--border); padding:7px 10px; font-size:17px;}

.funds-banner{margin-bottom:16px; border-color:var(--accent-amber); display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:19px;}
.funds-banner b{color:var(--accent-amber);}
.refund-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--border); font-size:18px;}
.refund-row:first-child{border-top:0;}
.refund-row .gno{font-family:'Press Start 2P',monospace; font-size:12px; color:var(--accent-cyan); margin-right:10px;}
.refund-row .sub{color:var(--text-muted); font-size:16px;}
.gno-chip{font-family:'Press Start 2P',monospace; font-size:11px; color:var(--accent-cyan);}
.sub{color:var(--text-muted); font-size:16px;}

/* game guide / FAQ */
.faq-tabs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:20px;}
.faq-tab{padding:12px 10px; font-size:18px; font-family:'VT323',monospace; text-align:center; color:var(--text-primary); background:var(--bg-panel); border:2px solid var(--border); cursor:pointer;}
.faq-tab:hover{border-color:var(--accent-cyan);}
.faq-tab.active{border-color:var(--accent-amber); background:var(--bg-panel-alt); color:var(--accent-amber);}
.faq-tab:focus-visible{outline:2px solid var(--accent-amber); outline-offset:2px;}
.faq-intro{font-size:19px; color:var(--text-muted); margin:0 0 14px; line-height:1.4;}
.faq-item{background:var(--bg-panel); border:2px solid var(--border); margin-bottom:10px;}
.faq-item summary{cursor:pointer; padding:12px 14px; font-size:19px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px; color:var(--text-primary);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; color:var(--accent-amber); font-family:'Press Start 2P',monospace; font-size:12px; align-self:center;}
.faq-item[open] summary::after{content:'-';}
.faq-item summary:focus-visible{outline:2px solid var(--accent-amber); outline-offset:-2px;}
.faq-item p{margin:0; padding:0 14px 14px; font-size:18px; line-height:1.5; color:var(--text-muted);}

/* 3-4 player tables */
.seat-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:22px 0 26px;}
.seat{border:2px solid var(--border); background:var(--bg-panel-alt); padding:10px 12px; display:flex; flex-direction:column; gap:2px;}
.seat .nm{font-weight:600; color:var(--accent-magenta);}
.seat.me .nm{color:var(--accent-cyan);}
.seat .ad{font-size:15px; color:var(--text-muted);}
.seat .st{font-size:16px; color:var(--text-muted);}
.seat.paid{border-color:var(--accent-cyan);}
.seat.paid .st{color:var(--accent-cyan);}
.opp-card .table-badge{display:inline-block; font-size:14px; border:1px solid var(--accent-amber); color:var(--accent-amber); padding:1px 8px; margin-left:6px;}
.opp-card .seat-chips{display:flex; flex-wrap:wrap; gap:6px;}
.opp-card .seat-chips span{font-size:14px; border:1px solid var(--border); padding:1px 8px;}
.opp-card .seat-chips span.empty{color:var(--text-muted); border-style:dashed;}

.testnet-ribbon{background:var(--accent-magenta);color:#fff;text-align:center;font:600 12px/1 system-ui,sans-serif;letter-spacing:.06em;padding:7px 12px;text-transform:uppercase}