/* Colour themes, picked in the ⚙ drawer and remembered in this browser; js/look-boot.js applies the saved one before
     the page paints. A site's own theme (an id in its theme list outside the shared set) is styled as data-theme="dark"
     (a warm near-black base with a vivid red accent); the pages always set data-theme, so the plain :root values
     (and "light") only show on a page without it. Role names kept from the base project so the whole UI re-themes
     from here: amber = primary · cyan = "you" / warm ivory · magenta = rival · violet = secondary.
     The dark themes tell the browser so (color-scheme), for dark scrollbars and form controls. */
  :root[data-theme]:not([data-theme="light"]){ color-scheme:dark; }
  :root{
    --bg:#F7EEEC;
    --bg-panel:#FFFFFF;
    --bg-panel-alt:#F1E1DE;
    --accent-amber:#C2281D;
    --accent-cyan:#241412;
    --accent-magenta:#D9531E;
    --accent-violet:#1F8F55;
    --on-accent:#FFFFFF;
    --text-primary:#1A1210;
    --text-muted:#6B5A56;
    --border:#DFC9C4;
    --danger:#D1373A;
    --success:#1F8F55;
    --scan:0.035;
    --vig:0.10;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#120808;
      --bg-panel:#1F0F0E;
      --bg-panel-alt:#2A1513;
      --accent-amber:#E8362B;
      --accent-cyan:#FBEAE6;
      --accent-magenta:#FF7A45;
      --accent-violet:#33C17A;
      --on-accent:#170B0A;
      --text-primary:#FBEEEA;
      --text-muted:#B08C86;
      --border:#3D211E;
      --danger:#FF4757;
      --success:#33C17A;
      --scan:0.12;
      --vig:0.45;
    }
  }
  :root[data-theme="dark"]{
    --bg:#120808;
    --bg-panel:#1F0F0E;
    --bg-panel-alt:#2A1513;
    --accent-amber:#E8362B;
    --accent-cyan:#FBEAE6;
    --accent-magenta:#FF7A45;
    --accent-violet:#33C17A;
    --on-accent:#170B0A;
    --text-primary:#FBEEEA;
    --text-muted:#B08C86;
    --border:#3D211E;
    --danger:#FF4757;
    --success:#33C17A;
    --scan:0.12;
    --vig:0.45;
  }

  /* ---- THEME: arcade ---- */
  /* Full-colour retro arcade: synthwave purple-black, vivid cyan primary, hot-pink rival,
     electric-yellow accents. Scanlines cranked up for maximum CRT vibes. */
  :root[data-theme="arcade"]{
    --bg:#0D0221;
    --bg-panel:#14082E;
    --bg-panel-alt:#1E0F40;
    --accent-amber:#FFD400;
    --accent-cyan:#FFFFFF;
    --accent-magenta:#FF2D78;
    --accent-violet:#39FF88;
    --on-accent:#0D0221;
    --text-primary:#F0E6FF;
    --text-muted:#9B7FCC;
    --border:#3D1F6E;
    --danger:#FF2D78;
    --success:#39FF88;
    --scan:0.18;
    --vig:0.55;
  }

  /* ---- THEME: phosphor · Phosphor -- warm near-black, phosphor green primary, orange rival */
  :root[data-theme="phosphor"]{
    --bg:#110E08;
    --bg-panel:#1C180D;
    --bg-panel-alt:#2A261C;
    --accent-amber:#00C805;
    --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.14;
    --vig:0.45;
  }

  /* ---- THEME: midnight ---- */
  /* Deep-ocean midnight blue — calm, premium, low-fatigue for long sessions.
     Electric-gold primary, cool-white text, indigo panels. */
  :root[data-theme="midnight"]{
    --bg:#060B18;
    --bg-panel:#0D1528;
    --bg-panel-alt:#141F38;
    --accent-amber:#F0B429;
    --accent-cyan:#E8F0FF;
    --accent-magenta:#7C6FF7;
    --accent-violet:#2DD4BF;
    --on-accent:#060B18;
    --text-primary:#E8F0FF;
    --text-muted:#6B82A8;
    --border:#1E2D4A;
    --danger:#F87171;
    --success:#2DD4BF;
    --scan:0.08;
    --vig:0.40;
  }
  /* ---- THEME: blue · Blue Screen -- deep navy, electric blue primary, orange rival */
  :root[data-theme="blue"]{
    --bg:#050B1A;
    --bg-panel:#0B1633;
    --bg-panel-alt:#122252;
    --accent-amber:#3D7BFF;
    --accent-cyan:#EAF1FF;
    --accent-magenta:#FF7A45;
    --accent-violet:#5CE1E6;
    --on-accent:#050B1A;
    --text-primary:#FFFFFF;
    --text-muted:#8FA3C8;
    --border:#22335E;
    --danger:#FF5C6C;
    --success:#3DDC97;
    --scan:0.12;
    --vig:0.45;
  }

  /* ---- THEME: amber · Amber CRT -- warm terminal amber */
  :root[data-theme="amber"]{
    --bg:#120C08;
    --bg-panel:#1E150E;
    --bg-panel-alt:#2B2016;
    --accent-amber:#FFB000;
    --accent-cyan:#FFF1DC;
    --accent-magenta:#FF5A3D;
    --accent-violet:#C990FF;
    --on-accent:#120C08;
    --text-primary:#FFFFFF;
    --text-muted:#B3A594;
    --border:#56473B;
    --danger:#FF5A3D;
    --success:#5FD38D;
    --scan:0.12;
    --vig:0.45;
  }

  /* ---- THEME: neon · Neon Arcade -- hot pink and sun yellow */
  :root[data-theme="neon"]{
    --bg:#0F0A14;
    --bg-panel:#1A1222;
    --bg-panel-alt:#261C31;
    --accent-amber:#FF3D9A;
    --accent-cyan:#FFD23F;
    --accent-magenta:#FF7438;
    --accent-violet:#B69CFF;
    --on-accent:#0F0A14;
    --text-primary:#FFFFFF;
    --text-muted:#B4A6C0;
    --border:#4E4060;
    --danger:#FF7438;
    --success:#4ADE80;
    --scan:0.12;
    --vig:0.45;
  }

  /* ---- THEME: orchid · Orchid Pixel -- orchid purple, ember orange, gold */
  :root[data-theme="orchid"]{
    --bg:#0D0B12;
    --bg-panel:#18141F;
    --bg-panel-alt:#241E2E;
    --accent-amber:#C77DFF;
    --accent-cyan:#F2EDE4;
    --accent-magenta:#FF6A2B;
    --accent-violet:#FFD23F;
    --on-accent:#0D0B12;
    --text-primary:#FFFFFF;
    --text-muted:#ABA3B8;
    --border:#4A4258;
    --danger:#FF6A2B;
    --success:#5FD38D;
    --scan:0.12;
    --vig:0.45;
  }

  /* ---- THEME: frost · Frost -- ice cyan on deep teal-black, pink rival */
  :root[data-theme="frost"]{
    --bg:#06131B;
    --bg-panel:#0C1F2A;
    --bg-panel-alt:#132C3B;
    --accent-amber:#5CE1FF;
    --accent-cyan:#EFFBFF;
    --accent-magenta:#FF6FA8;
    --accent-violet:#A5B4FF;
    --on-accent:#06131B;
    --text-primary:#FFFFFF;
    --text-muted:#8FB3C4;
    --border:#23465A;
    --danger:#FF6F7D;
    --success:#4ADE80;
    --scan:0.10;
    --vig:0.42;
  }

  /* ---- THEME: aurora · Aurora -- violet and mint on deep indigo night, sky-blue rival */
  :root[data-theme="aurora"]{
    --bg:#0B0A1A;
    --bg-panel:#141229;
    --bg-panel-alt:#1E1A3A;
    --accent-amber:#A970FF;
    --accent-cyan:#EEF0FF;
    --accent-magenta:#00C2FF;
    --accent-violet:#14F195;
    --on-accent:#0B0A1A;
    --text-primary:#FFFFFF;
    --text-muted:#9C98C4;
    --border:#2F2A58;
    --danger:#FF5C7A;
    --success:#14F195;
    --scan:0.10;
    --vig:0.42;
  }


  *{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;
  }
  /* Reduced motion is handled by the ⚙ Motion setting: it starts OFF on devices that ask for
     reduced motion (html.no-motion stops every animation), and a player can still choose ON. */

  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;
    justify-content:flex-end; margin-left:auto;} /* the whole group sits right, also when it wraps below the logo */
  .theme-switcher{display:flex; align-items:center; gap:4px; position:relative;}
  .theme-btn{
    width:20px; height:20px; border-radius:50%; border:2px solid transparent;
    cursor:pointer; padding:0; transition:border-color 0.15s, transform 0.15s;
    flex-shrink:0;
  }
  .theme-btn:hover{transform:scale(1.2);}
  .theme-btn.active{border-color:var(--text-primary); transform:scale(1.15);}
  .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.2s ease-out;}
  .screen.active button, .screen.active a, .screen.active input, .screen.active select{pointer-events:all;}
  @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);}
  .op-note{font-family:'VT323',monospace; font-size:17px; color:var(--text-muted);}
  .op-note.ok{color:var(--success);}
  .op-note.err{color:var(--danger);}
  .op-confirm{margin-top:16px; padding:14px 16px; background:var(--bg-panel-alt); border:2px solid var(--accent-magenta);}
  .op-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);}

  .stake-slider-row{margin-top:14px; max-width:420px;}
  .stake-slider-row input[type="range"]{
    -webkit-appearance:none; appearance:none; width:100%; height:8px;
    background:var(--bg-panel-alt); border:1px solid var(--border); cursor:pointer; outline:none;
  }
  .stake-slider-row input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
    background:var(--accent-amber); border:2px solid var(--bg-panel); box-shadow:0 0 0 1px var(--border), 0 0 8px var(--accent-amber);
    cursor:pointer; margin-top:-8px;
  }
  .stake-slider-row input[type="range"]::-moz-range-thumb{
    width:20px; height:20px; border-radius:50%; background:var(--accent-amber);
    border:2px solid var(--bg-panel); box-shadow:0 0 0 1px var(--border), 0 0 8px var(--accent-amber); cursor:pointer;
  }
  .stake-slider-row input[type="range"]::-moz-range-track{background:var(--bg-panel-alt); border:1px solid var(--border); height:8px;}
  .stake-slider-minmax{display:flex; justify-content:space-between; font-family:'VT323',monospace; font-size:14px; color:var(--text-muted); margin-top:6px;}

  .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); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
  .hero-socials{display:flex; align-items:center; gap:16px; margin:16px 0 16px; justify-content:flex-start;}
  .how-bottom-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:14px;}
  .social-link{display:inline-flex; align-items:center; gap:7px; color:var(--text-muted); text-decoration:none; font-family:'VT323',monospace; font-size:18px; transition:color 0.15s; line-height:1; vertical-align:middle;}
  .social-link:hover{color:var(--accent-amber);}
  .social-link svg{width:20px; height:20px; fill:currentColor; flex-shrink:0; display:block;}
  .social-placeholder{opacity:0.25; cursor:default; pointer-events:none;}
  .how-socials{display:flex; align-items:center; gap:20px;}
  .footer-socials{display:flex; align-items:center; gap:20px;}
.foot-disclaimer:not(:empty)::before{content:" · ";} /* a site with no disclaimer line shows no separator */

  @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);}
.faq-demo{background:var(--bg-panel); border:2px solid var(--border); padding:16px; margin-bottom:16px; text-align:center;}
.faq-demo-canvas{max-width:100%; height:auto; background:var(--bg-panel-alt); border:1px solid var(--border); cursor:pointer; touch-action:none;}
.faq-demo-caption{margin:10px 0 0; font-size:15px; color:var(--text-muted); line-height:1.4;}
.faq-demo-live-stage{min-height:220px; display:flex; align-items:center; justify-content:center; background:var(--bg-panel-alt); border:1px solid var(--border); padding:12px;}
.faq-demo-placeholder{color:var(--text-muted); font-size:16px; margin:0; max-width:36ch;}
.faq-demo-result{font-family:'VT323',monospace; font-size:22px; color:var(--accent-amber); margin:12px 0 0;}
.faq-demo-live-controls{margin-top:14px;}

/* 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 .lock-badge{display:inline-block; font-size:14px; 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}

/* ---------- player icon picker (Profile page) ---------- */
.avatar-now{font-size:22px; margin-left:6px; vertical-align:middle;}
.avatar-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); gap:6px; max-width:420px; margin-top:8px;}
.avatar-opt{font-size:22px; line-height:1; padding:8px 0; background:var(--bg-panel-alt); border:2px solid var(--border); cursor:pointer; transition:border-color .12s, transform .12s;}
.avatar-opt:hover{border-color:var(--accent-amber); transform:translateY(-2px);}
.avatar-opt.on{border-color:var(--accent-amber); box-shadow:0 0 10px color-mix(in srgb, var(--accent-amber) 45%, transparent);}
.avatar-opt:focus-visible{outline:2px solid var(--accent-amber); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .avatar-opt{transition:none;} .avatar-opt:hover{transform:none;} }

/* ---------- house-token division leaderboard (lobby) ---------- */
.lb-divs{margin-top:34px;}
.div-tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px;}
.div-tab{background:var(--bg-panel-alt); border:2px solid var(--border); color:var(--text-primary); padding:9px 6px; text-align:center; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:3px;}
.div-tab .n{font-family:'Press Start 2P',monospace; font-size:9px;}
.div-tab .r{font-size:14px; color:var(--text-muted);}
.div-tab .mine{font-size:13px; color:var(--accent-amber);}
.div-tab:hover{border-color:var(--accent-amber);}
.div-tab.on{border-color:var(--accent-amber); box-shadow:0 0 10px color-mix(in srgb, var(--accent-amber) 45%, transparent);}
.div-tab:focus-visible{outline:2px solid var(--accent-amber); outline-offset:2px;}
.lb-table td.neg{color:var(--danger);}
.lb-note{font-size:15px; color:var(--text-muted); margin:8px 0 0;}
@media (max-width:600px){ .div-tabs{grid-template-columns:repeat(2,1fr);} }
.lb-table .rk{width:48px; font-family:'Press Start 2P',monospace; font-size:10px; color:var(--text-muted);}
.lb-table tr.top1 .rk{color:#FFD24A;}
.lb-table tr.top2 .rk{color:#C9D1D9;}
.lb-table tr.top3 .rk{color:#E0915A;}
.lb-table td.w{color:var(--success);}
.lb-table tr.me td{background:color-mix(in srgb, var(--accent-amber) 12%, transparent);}
.lb-table .you{color:var(--text-muted); font-size:.85em;}

/* ---------- stake currency switch, currency filter and badges (lobby) ---------- */
.stake-row{flex-wrap:wrap; align-items:center; gap:12px;}
.cur-seg{display:flex; border:2px solid var(--border);}
.cur-opt{display:flex; align-items:center; gap:7px; padding:9px 14px; cursor:pointer; font-family:'Press Start 2P',monospace; font-size:9px; color:var(--text-muted); background:var(--bg-panel-alt);}
.cur-opt input{accent-color:var(--accent-amber); margin:0;}
.cur-opt.on{background:var(--accent-amber); color:var(--on-accent);}
.cur-opt:focus-within{outline:2px solid var(--accent-amber); outline-offset:2px;}
.cur-note{font-size:15px; color:var(--text-muted); margin:6px 0 0;}
.cur-filter{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px;}
.cur-filter b{font-weight:400; color:var(--text-primary); margin-right:4px;}
.cur-filter label{display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--accent-amber); cursor:pointer;}
.cur-filter input{accent-color:var(--accent-amber);}
.cur-badge{margin-left:auto; flex-shrink:0; align-self:flex-start; font-family:'Press Start 2P',monospace; font-size:7px; padding:4px 6px; border:1px solid; white-space:nowrap;}
.cur-badge.native{color:#FF9F4A; border-color:#FF9F4A;}
.cur-badge.house{color:#C084FF; border-color:#C084FF;}

/* weekly leaderboard: period switch and countdown */
.div-period{display:flex; width:max-content; max-width:100%; border:2px solid var(--border); margin-bottom:8px;}
.div-period button{font-family:'Press Start 2P',monospace; font-size:8px; padding:9px 12px; background:var(--bg-panel-alt); border:none; color:var(--text-muted); cursor:pointer;}
.div-period button.on{background:var(--accent-amber); color:var(--on-accent);}
.div-period button:focus-visible{outline:2px solid var(--accent-amber); outline-offset:2px;}
.lb-countdown{font-size:16px; color:var(--accent-amber); border:1px dashed var(--accent-amber); padding:3px 9px; white-space:nowrap;}

/* =====================================================================================
   ⚙ SETTINGS PANEL
   ===================================================================================== */
.gear-btn{font-size:20px; line-height:1; padding:6px 9px; cursor:pointer; background:var(--bg-panel-alt); color:var(--text-primary); border:1px solid var(--accent-amber);}
.gear-btn.open,.gear-btn:hover{background:var(--accent-amber); color:var(--on-accent);}
.gear-btn:focus-visible{outline:2px solid var(--text-primary); outline-offset:2px;}
.settings-drawer{position:fixed; top:74px; right:max(14px, calc((100vw - 1040px) / 2 + 14px)); width:310px; max-width:calc(100vw - 28px);
  max-height:calc(100vh - 90px); overflow:auto; z-index:1000; box-sizing:border-box; padding:14px;
  background:var(--bg-panel); color:var(--text-primary); border:2px solid var(--accent-amber); box-shadow:0 12px 32px rgba(0,0,0,.6); font-family:'VT323',monospace;}
.settings-drawer[hidden]{display:none;}
.settings-drawer h4{font-family:'Press Start 2P',monospace; font-size:8px; font-weight:400; color:var(--text-muted); margin:14px 0 7px; text-transform:uppercase;}
.sd-head{display:flex; justify-content:space-between; align-items:center; font-family:'Press Start 2P',monospace; font-size:10px; line-height:1;}
.sd-x{background:none; border:none; color:var(--text-primary); font-size:24px; line-height:1; padding:0 2px; cursor:pointer;}
.sd-wallet{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 8px 8px 10px; min-height:54px; box-sizing:border-box; background:var(--bg-panel-alt); border:1px solid var(--border);}
.sd-who{display:flex; flex-direction:column; justify-content:center; line-height:1.15; min-width:0;}
.sd-name{font-size:18px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sd-who small{font-size:14px; color:var(--text-muted);}
.sd-exit{box-sizing:border-box; width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0; line-height:0; cursor:pointer; background:#000; border:2px solid var(--accent-amber);}
.sd-exit svg{display:block; width:22px; height:22px; overflow:visible;}
.sd-exit svg path{fill:none; stroke:var(--accent-amber); stroke-width:2.8;}
.sd-exit:hover,.sd-exit:focus-visible{background:var(--accent-amber); outline:none;}
.sd-exit:hover svg path,.sd-exit:focus-visible svg path{stroke:#000;}
.sd-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:6px;}
.sd-opt{display:flex; align-items:center; gap:8px; padding:7px; text-align:left; cursor:pointer; font-family:'VT323',monospace; font-size:17px; line-height:1.1;
  background:var(--bg-panel-alt); color:var(--text-primary); border:2px solid var(--border);}
.sd-style{flex-direction:column; align-items:flex-start; gap:1px;}
.sd-opt small{font-size:13px; color:var(--text-muted);}
.sd-opt.on{border-color:var(--accent-amber); box-shadow:0 0 8px color-mix(in srgb, var(--accent-amber) 50%, transparent);}
.sd-opt:focus-visible{outline:2px solid var(--text-primary); outline-offset:2px;}
.sd-dot{width:18px; height:18px; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,.3);}
.sd-tg{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; font-size:18px; border-bottom:1px dashed var(--border);}
.sd-tg small{display:block; font-size:14px; color:var(--text-muted);}
.sd-sw-wrap{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.sd-sw-wrap b{font-family:'Press Start 2P',monospace; font-size:7px; font-weight:400; width:26px; text-align:right; color:var(--text-muted);}
.sd-sw-wrap b.on{color:var(--text-primary);}
.sd-sw{box-sizing:border-box; width:48px; height:24px; padding:0; border-radius:12px; position:relative; cursor:pointer; background:#000; border:2px solid var(--text-muted);}
.sd-sw::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-primary); transition:left .15s;}
.sd-sw.on{background:var(--accent-amber); border-color:var(--accent-amber);}
.sd-sw.on::after{left:26px; background:#fff;}
.sd-sw:focus-visible{outline:2px solid var(--text-primary); outline-offset:2px;}
.sd-reset{margin-top:12px; width:100%; padding:10px; cursor:pointer; font-family:'Press Start 2P',monospace; font-size:8px; text-transform:uppercase;
  background:transparent; color:var(--text-primary); border:1px solid var(--accent-amber);}
.sd-reset:hover{background:var(--accent-amber); color:var(--on-accent);}

/* =====================================================================================
   STYLES (a layer over the colour theme). html[data-fx] is set from the Style choice;
   "Signature" = crt on the landing page, cab everywhere else. More styles are in looks.css.
   ===================================================================================== */
.cab-marquee,.cab-coin{display:none;}

/* --- scanline overlay for CRT and Arcade Cabinet: drawn ON TOP of the page (the base
   overlay sits behind the content), never blocking clicks; the settings panel (z 1000) stays above --- */
:root[data-fx="crt"]{--scan:0.24; --vig:0.72;}
:root[data-fx="cab"]{--scan:0.12; --vig:0.5;}
:root[data-fx="crt"] body::before,:root[data-fx="cab"] body::before{
  z-index:900; opacity:1;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,var(--scan)) 0 2px, transparent 2px 4px);
}
:root[data-fx="crt"] body::after,:root[data-fx="cab"] body::after{
  z-index:900;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,var(--vig)) 100%), linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05));
  animation:sw-flicker 5.5s infinite;
}
/* tube flicker: a brief dip in brightness every few seconds */
@keyframes sw-flicker{0%,44%,56%,100%{opacity:1;} 46%{opacity:.55;} 48%{opacity:.95;} 50%{opacity:.6;} 53%{opacity:1;}}
/* CRT only: a faint bright band rolling down the screen */
:root[data-fx="crt"]::before{content:''; position:fixed; left:0; right:0; top:-25vh; height:25vh; z-index:901; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.045), transparent); animation:sw-roll 8s linear infinite;}
@keyframes sw-roll{to{transform:translateY(150vh);}}
:root.no-scan body::after{animation:none !important; background:none !important;}
:root.no-scan::before{display:none;}

/* --- CRT Deluxe: phosphor glow --- */
:root[data-fx="crt"] .logo b,:root[data-fx="crt"] .hl,:root[data-fx="crt"] .stat .num{text-shadow:0 0 8px var(--accent-amber), 0 0 20px color-mix(in srgb, var(--accent-amber) 55%, transparent);}
:root[data-fx="crt"] .panel{box-shadow:0 0 0 3px var(--bg), 0 0 0 6px var(--accent-amber), 0 0 22px color-mix(in srgb, var(--accent-amber) 45%, transparent);}
:root[data-fx="crt"] .opp-card{box-shadow:0 0 12px color-mix(in srgb, var(--accent-amber) 30%, transparent), inset 0 0 12px color-mix(in srgb, var(--accent-amber) 10%, transparent);}
:root[data-fx="crt"] .btn:not(.secondary):not(.small){box-shadow:0 5px 0 0 color-mix(in srgb, var(--accent-amber) 55%, black), 0 0 18px color-mix(in srgb, var(--accent-amber) 60%, transparent);}

/* --- Arcade Cabinet: marquee, bezel, chunky 8-bit panels with hard shadows --- */
:root[data-fx="cab"] .cab-marquee{display:flex; align-items:center; justify-content:center; height:40px; box-sizing:border-box;
  width:calc(100% - 48px); max-width:992px; margin:0 auto 12px; /* same column as the header and screens (1040px minus 24px padding each side) */
  font-family:'Press Start 2P',monospace; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--on-accent);
  background:linear-gradient(90deg, var(--accent-amber), var(--accent-magenta), var(--accent-amber)); box-shadow:0 4px 0 color-mix(in srgb, var(--accent-amber) 45%, black);}
:root[data-fx="cab"] .cab-coin{display:block; position:fixed; right:18px; bottom:12px; z-index:50; pointer-events:none;
  font-family:'Press Start 2P',monospace; font-size:9px; color:var(--accent-magenta); animation:blink 1s steps(1) infinite;}
:root[data-fx="cab"] body{box-shadow:inset 0 0 0 10px color-mix(in srgb, var(--bg-panel-alt) 85%, black);}
:root[data-fx="cab"] .logo b{color:var(--accent-magenta); text-shadow:3px 3px 0 var(--accent-amber);}
:root[data-fx="cab"] .panel{border:3px solid var(--text-primary); box-shadow:6px 6px 0 #000;}
:root[data-fx="cab"] .panel::before,:root[data-fx="cab"] .panel::after{display:none;}
:root[data-fx="cab"] .opp-card,:root[data-fx="cab"] .stat,:root[data-fx="cab"] .wallet-chip,:root[data-fx="cab"] .net-chip{border:3px solid var(--text-primary); box-shadow:4px 4px 0 #000;}
:root[data-fx="cab"] .btn{border:3px solid var(--text-primary); box-shadow:4px 4px 0 #000; clip-path:none;}

/* --- 16-bit Pixel: dithered background, stepped pixel borders, bevelled buttons --- */
:root[data-fx="pix"] body{background-image:radial-gradient(color-mix(in srgb, var(--accent-amber) 12%, transparent) 1px, transparent 1px); background-size:6px 6px;}
:root[data-fx="pix"] .logo-text{text-shadow:2px 2px 0 var(--accent-amber), 4px 4px 0 #000;}
:root[data-fx="pix"] .panel{border:none; box-shadow:0 0 0 4px var(--accent-amber), 0 0 0 8px #000;}
:root[data-fx="pix"] .panel::before,:root[data-fx="pix"] .panel::after{display:none;}
:root[data-fx="pix"] .opp-card,:root[data-fx="pix"] .stat{border:none; box-shadow:0 0 0 3px var(--accent-amber), 0 0 0 6px #000;}
:root[data-fx="pix"] .btn{box-shadow:inset -4px -4px 0 rgba(0,0,0,.4), inset 4px 4px 0 rgba(255,255,255,.35);}

/* --- 3D Arcade: keycap buttons, raised glass panels, extruded titles, spinning coins, a moving floor grid.
   Cards tilt toward the pointer (app.js tilt3d, desktop only). Motion OFF / reduced motion keep the depth but stop the movement. --- */
:root[data-fx="3d"] body{background-image:
  radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent-amber) 15%, transparent), transparent 60%),
  radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--accent-magenta) 12%, transparent), transparent 60%);}
:root[data-fx="3d"]::after{content:''; position:fixed; left:-30%; right:-30%; bottom:0; height:48vh; z-index:0; pointer-events:none; opacity:.4;
  background-image:repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-magenta) 60%, transparent) 0 2px, transparent 2px 80px),
                   repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent-magenta) 45%, transparent) 0 2px, transparent 2px 80px);
  transform:perspective(420px) rotateX(64deg); transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 85%); mask-image:linear-gradient(to top, #000 10%, transparent 85%);
  animation:d3-floor 2.4s linear infinite;}
@keyframes d3-floor{to{background-position:0 80px, 0 80px;}}
html.playing[data-fx="3d"]::after{display:none;}
:root[data-fx="3d"] .hero::before{display:none;}
/* extruded letters */
:root[data-fx="3d"] .logo{text-shadow:1px 1px 0 var(--accent-magenta), 2px 2px 0 var(--accent-magenta), 3px 3px 0 color-mix(in srgb, var(--accent-magenta) 65%, #000), 4px 4px 0 color-mix(in srgb, var(--accent-magenta) 45%, #000), 6px 8px 10px rgba(0,0,0,.6);}
:root[data-fx="3d"] h1.title{transform:perspective(600px) rotateX(10deg); transform-origin:left bottom;
  text-shadow:1px 1px 0 var(--bg-panel-alt), 2px 2px 0 var(--border), 3px 3px 0 var(--border), 4px 4px 0 color-mix(in srgb, var(--border) 70%, #000), 5px 5px 0 color-mix(in srgb, var(--border) 50%, #000), 8px 12px 16px rgba(0,0,0,.65);}
:root[data-fx="3d"] h1.title .hl{text-shadow:1px 1px 0 color-mix(in srgb, var(--accent-amber) 75%, #000), 2px 2px 0 color-mix(in srgb, var(--accent-amber) 62%, #000), 3px 3px 0 color-mix(in srgb, var(--accent-amber) 50%, #000), 4px 4px 0 color-mix(in srgb, var(--accent-amber) 40%, #000), 5px 5px 0 color-mix(in srgb, var(--accent-amber) 30%, #000), 0 0 26px color-mix(in srgb, var(--accent-amber) 50%, transparent);}
:root[data-fx="3d"] .stat .num{text-shadow:1px 1px 0 var(--border), 2px 2px 0 var(--border), 3px 3px 0 #000;}
/* keycap buttons: lit top face, thick side wall, floor shadow; they sink all the way when pressed */
:root[data-fx="3d"] .btn{--k:var(--accent-amber); clip-path:none; border-radius:10px; transform:translateY(-4px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--k) 70%, #fff) 0%, var(--k) 38%, color-mix(in srgb, var(--k) 85%, #000) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 color-mix(in srgb, var(--k) 60%, #000), 0 7px 0 color-mix(in srgb, var(--k) 45%, #000), 0 8px 0 #000, 0 14px 20px rgba(0,0,0,.5);}
:root[data-fx="3d"] .btn:hover{transform:translateY(-6px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 color-mix(in srgb, var(--k) 60%, #000), 0 9px 0 color-mix(in srgb, var(--k) 45%, #000), 0 10px 0 #000, 0 18px 24px rgba(0,0,0,.5), 0 0 26px color-mix(in srgb, var(--k) 40%, transparent);}
:root[data-fx="3d"] .btn:active{transform:translateY(3px); box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 1px 0 #000, 0 3px 6px rgba(0,0,0,.45);}
:root[data-fx="3d"] .btn.magenta{--k:var(--accent-magenta);}
:root[data-fx="3d"] .btn.secondary{--k:var(--bg-panel-alt);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16), inset 0 -3px 0 rgba(0,0,0,.35), 0 7px 0 var(--border), 0 8px 0 #000, 0 14px 20px rgba(0,0,0,.5);}
:root[data-fx="3d"] .btn.small{border-radius:8px; transform:translateY(-3px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 color-mix(in srgb, var(--k) 45%, #000), 0 5px 0 #000, 0 9px 12px rgba(0,0,0,.45);}
:root[data-fx="3d"] .btn.secondary.small{box-shadow:inset 0 2px 0 rgba(255,255,255,.16), 0 4px 0 var(--border), 0 5px 0 #000, 0 9px 12px rgba(0,0,0,.45);}
:root[data-fx="3d"] .btn.text{background:none; box-shadow:none; transform:none;}
:root[data-fx="3d"] .btn:disabled{transform:none !important;}
:root[data-fx="3d"] .wallet-btn,:root[data-fx="3d"] .connect-btn{border:0; border-radius:10px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2), 0 6px 0 var(--border), 0 7px 0 #000, 0 12px 16px rgba(0,0,0,.5);}
:root[data-fx="3d"] .connect-btn{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-amber) 70%, #fff), var(--accent-amber) 45%, color-mix(in srgb, var(--accent-amber) 85%, #000));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 6px 0 color-mix(in srgb, var(--accent-amber) 45%, #000), 0 7px 0 #000, 0 12px 16px rgba(0,0,0,.5);}
/* raised glass panels and cards */
:root[data-fx="3d"] .panel{border:0; border-radius:16px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--bg-panel-alt) 88%, #fff 5%) 0%, var(--bg-panel) 55%, color-mix(in srgb, var(--bg-panel) 85%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px color-mix(in srgb, var(--accent-amber) 35%, transparent),
             0 9px 0 var(--border), 0 10px 0 #000, 0 26px 44px rgba(0,0,0,.55);}
:root[data-fx="3d"] .panel::before,:root[data-fx="3d"] .panel::after{display:none;}
:root[data-fx="3d"] .comp-card,:root[data-fx="3d"] .opp-card,:root[data-fx="3d"] .mode-tile,:root[data-fx="3d"] .mini-card{border-radius:14px; border-width:2px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--bg-panel-alt) 88%, #fff 5%) 0%, var(--bg-panel) 60%, color-mix(in srgb, var(--bg-panel) 85%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 7px 0 var(--border), 0 8px 0 #000, 0 20px 30px rgba(0,0,0,.5);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .18s ease-out, box-shadow .18s;}
:root[data-fx="3d"] .mode-tile.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 7px 0 var(--border), 0 8px 0 #000, 0 20px 30px rgba(0,0,0,.5), 0 0 22px color-mix(in srgb, var(--c) 45%, transparent);}
:root[data-fx="3d"] .comp-card:hover,:root[data-fx="3d"] .opp-card:hover,:root[data-fx="3d"] .mode-tile:hover,:root[data-fx="3d"] .mini-card:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 9px 0 var(--border), 0 10px 0 #000, 0 28px 40px rgba(0,0,0,.55), 0 0 30px color-mix(in srgb, var(--accent-amber) 18%, transparent);}
:root[data-fx="3d"] .stat-strip{background:none; border:0; gap:14px;}
:root[data-fx="3d"] .stat{border-radius:12px; background:linear-gradient(180deg, var(--bg-panel-alt), var(--bg-panel));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 0 var(--border), 0 7px 0 #000, 0 14px 20px rgba(0,0,0,.45);}
/* mode tabs on a sunken rail */
:root[data-fx="3d"] .mode-tabs{gap:6px; padding:6px; border:0; border-radius:12px; background:color-mix(in srgb, var(--bg) 70%, #000);
  box-shadow:inset 0 4px 10px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.07);}
:root[data-fx="3d"] .mode-tab{margin:0; border:0; border-radius:8px; color:var(--text-primary); transform:translateY(-2px);
  background:linear-gradient(180deg, var(--bg-panel-alt), var(--bg-panel)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 0 #000, 0 6px 8px rgba(0,0,0,.4);}
:root[data-fx="3d"] .mode-tab.on{transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.35), inset 0 -3px 0 var(--c), 0 0 16px color-mix(in srgb, var(--c) 40%, transparent);}
/* coins with a lit face and rim */
:root[data-fx="3d"] .wow-coin i{background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--k) 55%, #fff), var(--k) 45%, color-mix(in srgb, var(--k) 60%, #000) 100%);
  box-shadow:inset 0 0 0 5px color-mix(in srgb, var(--k) 65%, #000), inset 0 -8px 12px rgba(0,0,0,.35), 0 14px 20px rgba(0,0,0,.55);}

/* 3D Arcade on the home page */
:root[data-fx="3d"] .ld-big{text-shadow:1px 1px 0 var(--border), 2px 2px 0 var(--border), 3px 3px 0 color-mix(in srgb, var(--border) 75%, #000), 4px 4px 0 color-mix(in srgb, var(--border) 60%, #000), 5px 5px 0 color-mix(in srgb, var(--border) 45%, #000), 6px 6px 0 #000, 10px 14px 18px rgba(0,0,0,.6);}
:root[data-fx="3d"] .ld-big b{text-shadow:1px 1px 0 color-mix(in srgb, var(--accent-amber) 75%, #000), 2px 2px 0 color-mix(in srgb, var(--accent-amber) 62%, #000), 3px 3px 0 color-mix(in srgb, var(--accent-amber) 50%, #000), 4px 4px 0 color-mix(in srgb, var(--accent-amber) 40%, #000), 5px 5px 0 color-mix(in srgb, var(--accent-amber) 30%, #000), 6px 6px 0 #000, 0 0 30px color-mix(in srgb, var(--accent-amber) 45%, transparent);}
:root[data-fx="3d"] .ld-hero{border:0; border-radius:18px 18px 0 0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-amber) 35%, transparent), inset 0 0 60px rgba(0,0,0,.6), 0 26px 44px rgba(0,0,0,.55);}
:root[data-fx="3d"] .ld-stats{border:0; border-radius:0 0 18px 18px; background:linear-gradient(180deg, var(--bg-panel-alt), var(--bg-panel));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 0 var(--border), 0 9px 0 #000, 0 22px 30px rgba(0,0,0,.5);}
:root[data-fx="3d"] .ld-ticker{border:0; border-radius:12px; margin-top:22px; background:color-mix(in srgb, var(--bg) 60%, #000);
  box-shadow:inset 0 4px 10px rgba(0,0,0,.8), inset 0 0 0 2px color-mix(in srgb, var(--accent-amber) 55%, transparent), 0 0 18px color-mix(in srgb, var(--accent-amber) 22%, transparent);}
:root[data-fx="3d"] .ld-cta,:root[data-fx="3d"] .try-btn{--k:var(--accent-amber); border:0; border-radius:10px; transform:translateY(-4px); transition:transform .07s, box-shadow .07s;
  background:linear-gradient(180deg, color-mix(in srgb, var(--k) 70%, #fff) 0%, var(--k) 38%, color-mix(in srgb, var(--k) 85%, #000) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 color-mix(in srgb, var(--k) 60%, #000), 0 6px 0 color-mix(in srgb, var(--k) 45%, #000), 0 7px 0 #000, 0 12px 18px rgba(0,0,0,.5);}
:root[data-fx="3d"] .ld-cta:hover,:root[data-fx="3d"] .try-btn:hover{transform:translateY(-6px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 color-mix(in srgb, var(--k) 60%, #000), 0 8px 0 color-mix(in srgb, var(--k) 45%, #000), 0 9px 0 #000, 0 16px 22px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb, var(--k) 40%, transparent);}
:root[data-fx="3d"] .ld-cta:active,:root[data-fx="3d"] .try-btn:active{transform:translateY(3px); box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 1px 0 #000, 0 3px 6px rgba(0,0,0,.45);}
:root[data-fx="3d"] .ld-cta.prac,:root[data-fx="3d"] .try-btn{--k:var(--prac);}
:root[data-fx="3d"] .try-btn{color:var(--on-prac);}
:root[data-fx="3d"] .ld-cta.ghost{--k:var(--bg-panel-alt); color:var(--text-primary);}
:root[data-fx="3d"] .ld-mb .ld-cta{--k:var(--m);}
:root[data-fx="3d"] .gear-btn{border:0; border-radius:8px; background:linear-gradient(180deg, color-mix(in srgb, var(--bg-panel-alt) 70%, #fff 14%), var(--bg-panel-alt));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2), 0 4px 0 var(--border), 0 5px 0 #000, 0 9px 12px rgba(0,0,0,.45);}
:root[data-fx="3d"] .sb-switch{border-radius:999px;}
:root[data-fx="3d"] .ld-mode,:root[data-fx="3d"] .ld-game,:root[data-fx="3d"] .ld-host,:root[data-fx="3d"] .ld-step,:root[data-fx="3d"] .ld-tr,:root[data-fx="3d"] .wboss{border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, var(--bg-panel-alt) 88%, #fff 5%) 0%, var(--bg-panel) 60%, color-mix(in srgb, var(--bg-panel) 85%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 0 var(--border), 0 9px 0 #000, 0 22px 34px rgba(0,0,0,.5);}
:root[data-fx="3d"] .ld-mode{border-width:2px; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .18s ease-out, box-shadow .18s;}
:root[data-fx="3d"] .ld-mode:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 0 var(--border), 0 11px 0 #000, 0 30px 44px rgba(0,0,0,.55), 0 0 30px color-mix(in srgb, var(--m) 35%, transparent);}
:root[data-fx="3d"] .ld-game{border-radius:12px; transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .18s ease-out;}
:root[data-fx="3d"] .ld-game .ic{filter:drop-shadow(0 6px 4px rgba(0,0,0,.6));}
:root[data-fx="3d"] .wboss{border-width:3px;}

/* glitching logo: Signature on the landing page */
.logo-text{position:relative;}
:root.logo-glitch .logo-text::before,:root.logo-glitch .logo-text::after{content:attr(data-text); position:absolute; left:0; top:0; pointer-events:none;}
:root.logo-glitch .logo-text::before{color:var(--accent-amber); clip-path:inset(0 0 55% 0); animation:sw-g1 2.6s infinite steps(2);}
:root.logo-glitch .logo-text::after{color:var(--accent-magenta); clip-path:inset(55% 0 0 0); animation:sw-g2 2.6s infinite steps(2);}
@keyframes sw-g1{0%,85%,100%{transform:translate(-2px,0);}88%{transform:translate(-6px,-1px);}92%{transform:translate(3px,1px);}}
@keyframes sw-g2{0%,85%,100%{transform:translate(2px,0);}88%{transform:translate(6px,1px);}92%{transform:translate(-3px,-1px);}}

/* player names always use the theme's main text colour, in every style */
.opp-name,.seat .nm,.lb-table td:nth-child(2),.sd-name,.wallet-chip,.df-pname,.pk-name{-webkit-text-stroke:0; color:var(--text-primary);}

/* --- Effects switches --- */
:root.no-scan{--scan:0 !important; --vig:0 !important;}
:root.no-motion *,:root.no-motion *::before,:root.no-motion *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important;}

@media (max-width:600px){
  .settings-drawer{top:64px; right:8px; left:8px; width:auto; max-width:none;}
  :root[data-fx="cab"] .cab-marquee{font-size:9px; letter-spacing:1px; width:calc(100% - 24px);}
}

/* ---------- "Buy <house token>" header button (link set in the operator console) ---------- */
.buy-house{display:inline-flex; align-items:center; padding:8px 11px; font-family:'Press Start 2P',monospace; font-size:8px; line-height:1; text-decoration:none; white-space:nowrap;
  color:#16051f; background:#C084FF; border:2px solid var(--text-primary); box-shadow:3px 3px 0 #000;}
.buy-house:hover,.buy-house:focus-visible{background:#d4a6ff; outline:none;}
.buy-house:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, #C084FF 55%, transparent);}
.buy-short{display:none;}
@media (max-width:600px){ .buy-long{display:none;} .buy-short{display:inline;} }

/* =====================================================================================
   HEADER: one status bar + wallet button (opens the account & settings panel)
   ===================================================================================== */
.status-bar{display:flex; align-items:stretch; height:38px; box-sizing:border-box; border:2px solid var(--border); background:var(--bg-panel); font-family:'VT323',monospace; font-size:18px;}
.sb-seg{display:flex; align-items:center; gap:7px; padding:0 12px; white-space:nowrap; border-left:1px solid var(--border); color:var(--text-primary);}
.sb-seg:first-child{border-left:none;} /* dividers sit on the left, so a hidden segment never leaves a stray one */
.sb-seg[hidden]{display:none;}
.sb-net{color:#FFB020;}
.sb-net i{width:8px; height:8px; border-radius:50%; background:#FFB020; box-shadow:0 0 6px #FFB020;}
.sb-net b{font-weight:400; color:inherit;}
.sb-net.mainnet{color:var(--success);} .sb-net.mainnet i{background:var(--success); box-shadow:0 0 6px var(--success);}
.sb-house{color:#C084FF;}

/* wallet button: raised arcade button that sinks when pressed, bobbing caret, first-visit ping */
.wallet-btn{position:relative; height:38px; box-sizing:border-box; display:inline-flex; align-items:center; gap:8px; padding:0 12px; cursor:pointer;
  font-family:'VT323',monospace; font-size:19px; color:var(--text-primary); background:var(--bg-panel-alt); border:2px solid var(--text-primary);
  box-shadow:0 5px 0 0 #000; transform:translateY(-3px); transition:transform .06s, box-shadow .06s, background .12s, color .12s;}
.wallet-btn:hover{border-color:var(--accent-amber); box-shadow:0 5px 0 0 var(--accent-amber);}
.wallet-btn:active{transform:translateY(2px); box-shadow:0 0 0 0 #000;}
.wallet-btn.open{background:var(--accent-amber); color:var(--on-accent); border-color:var(--accent-amber); box-shadow:0 2px 0 0 #000; transform:translateY(0);}
.wallet-btn:focus-visible{outline:2px solid var(--text-primary); outline-offset:3px;}
.wb-car{display:inline-block; font-size:12px; animation:wb-bob 1.4s ease-in-out infinite; transition:transform .25s steps(3);}
.wallet-btn:hover .wb-car{animation-duration:.6s;}
.wallet-btn.open .wb-car{animation:none; transform:rotate(180deg);}
@keyframes wb-bob{0%,100%{transform:translateY(-1px);} 50%{transform:translateY(3px);}}
.wb-ping{position:absolute; top:-6px; right:-6px; width:10px; height:10px; border-radius:50%; background:var(--accent-amber); border:1px solid var(--bg);}
.wb-ping::after{content:''; position:absolute; inset:0; border-radius:50%; background:var(--accent-amber); animation:wb-ping 1.4s cubic-bezier(0,0,.2,1) infinite;}
@keyframes wb-ping{75%,100%{transform:scale(2.6); opacity:0;}}
.connect-btn{height:38px; box-sizing:border-box; padding:0 14px; cursor:pointer; font-family:'Press Start 2P',monospace; font-size:8px; text-transform:uppercase;
  color:var(--on-accent); background:var(--accent-amber); border:2px solid var(--text-primary); box-shadow:0 5px 0 0 #000; transform:translateY(-3px); transition:transform .06s, box-shadow .06s;}
.connect-btn:active{transform:translateY(2px); box-shadow:none;}
.gear-btn[hidden]{display:none;}
/* visitors browsing without a wallet */
.browse-tag{display:inline-flex; align-items:center; height:32px; padding:0 10px; margin-right:8px; border:1px dashed var(--border); color:var(--text-muted); font-size:14px; white-space:nowrap;}
@media (max-width:560px){ .browse-tag{display:none;} }
.arena-gate{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-bottom:16px; border-style:dashed;}
.arena-gate p{flex:1 1 280px; margin:0;}
.ask-connect .ask-steps{margin:6px 0 12px; padding-left:22px; text-align:left;}
.ask-connect .ask-steps li{margin:6px 0;}
.ask-connect .ask-safe{font-size:14px; color:var(--text-muted); margin:0 0 16px;}
.chat-gate .btn{margin-left:6px;}

/* account section */
.sd-account{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.sd-acct{display:flex; align-items:center; gap:10px;}
.sd-av{width:42px; height:42px; flex-shrink:0; display:grid; place-items:center; font-size:25px; background:var(--bg-panel-alt); border:2px solid var(--border);}
.sd-addr{display:flex; align-items:center; gap:6px; font-size:15px; color:var(--text-muted);}
.sd-copy{font-family:'Press Start 2P',monospace; font-size:6px; text-transform:uppercase; padding:4px 5px; cursor:pointer; background:none; border:1px solid var(--border); color:var(--text-primary);}
.sd-copy:hover{border-color:var(--accent-amber);}
.sd-bals{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.sd-bal{background:var(--bg-panel-alt); border:1px solid var(--border); padding:6px 8px; font-size:18px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis;}
.sd-bal small{display:block; font-size:13px; color:var(--text-muted);}
.sd-bal .sd-bal-house{color:#C084FF;}
.sd-acts{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.sd-act{height:36px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; text-decoration:none;
  font-family:'Press Start 2P',monospace; font-size:7px; text-transform:uppercase; color:var(--text-primary); background:var(--bg-panel-alt); border:2px solid var(--border);}
.sd-act:hover,.sd-act:focus-visible{border-color:var(--accent-amber); outline:none;}
.sd-buy{background:#C084FF; border-color:#C084FF; color:#16051f;}
.sd-out{background:#000; border-color:var(--accent-amber); color:var(--accent-amber);}
.sd-out svg{width:14px; height:14px;} .sd-out svg path{fill:none; stroke:var(--accent-amber); stroke-width:3;}
.sd-out:hover,.sd-out:focus-visible{background:var(--accent-amber); color:#000;} .sd-out:hover svg path,.sd-out:focus-visible svg path{stroke:#000;}
.sd-connect{background:var(--accent-amber); border-color:var(--accent-amber); color:var(--on-accent);}

/* CRT power-on / power-off for the panel */
.settings-drawer{transform-origin:center top;}
.settings-drawer.powering{animation:sd-crt-on .38s steps(8) both;}
/* the white flash is invisible at rest (opacity:0) and only shows while its animation runs, so
   stopping animations (Motion off) can never leave it covering the panel */
.settings-drawer.powering::after{content:''; position:absolute; inset:0; background:#fff; pointer-events:none; opacity:0; animation:sd-crt-flash .38s ease-out both;}
.settings-drawer.powering > *{animation:sd-row-in .2s .3s ease-out both;}
.settings-drawer.closing{animation:sd-crt-off .22s steps(5) both;}
@keyframes sd-crt-on{0%{transform:scale(.02,.01);} 40%{transform:scale(1,.02);} 100%{transform:scale(1,1);}}
@keyframes sd-crt-flash{0%,40%{opacity:.9;} 100%{opacity:0;}}
@keyframes sd-crt-off{0%{transform:none;} 60%{transform:scale(1,.02);} 100%{transform:scale(0,0); opacity:0;}}
@keyframes sd-row-in{from{opacity:0;} to{opacity:1;}}

@media (max-width:600px){
  .status-bar{font-size:16px;} .sb-seg{padding:0 8px;}
  .wallet-btn{font-size:17px; padding:0 10px;}
}

/* =====================================================================================
   DAILY COMPETITIONS
   ===================================================================================== */
.head-btns{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto;}
.comp-countdown{font-size:16px; color:var(--accent-magenta); border:1px dashed var(--accent-magenta); padding:3px 9px; white-space:nowrap;}
.comp-intro{font-size:18px; color:var(--text-muted); margin:0 0 16px; max-width:760px;}
.comp-game h3{font-family:'Press Start 2P',monospace; font-size:11px; font-weight:400; margin:18px 0 10px;}
.comp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px;}
.comp-card{display:flex; flex-direction:column; gap:10px; padding:14px; background:var(--bg-panel); border:3px solid var(--text-primary); box-shadow:5px 5px 0 #000;}
.comp-card.tier-bronze{border-color:#E0915A;} .comp-card.tier-silver{border-color:#C9D1D9;} .comp-card.tier-gold{border-color:#FFD24A;} .comp-card.tier-diamond{border-color:#7FE7FF; box-shadow:5px 5px 0 #000, 0 0 16px rgba(127,231,255,.35);}
.comp-card-top{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.comp-tier{font-family:'Press Start 2P',monospace; font-size:9px;}
.comp-card .cur-badge{margin-left:0;}
.comp-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;}
.comp-stat{background:var(--bg-panel-alt); border:1px solid var(--border); padding:5px 7px; min-width:0;}
.comp-stat small{display:block; font-size:13px; color:var(--text-muted);}
.comp-stat b{font-weight:400; font-size:17px; color:var(--text-primary); overflow-wrap:anywhere;}
.comp-pool{color:var(--success) !important;}
.comp-me{font-size:15px; color:var(--text-muted);}
.comp-card .btn{align-self:flex-start;}
.comp-detail{display:grid; grid-template-columns:1.3fr 1fr; gap:16px;}
.comp-detail h3{margin:0 0 10px;}
.comp-bigpool{font-family:'Press Start 2P',monospace; font-size:16px; color:var(--success); margin:4px 0 6px;}
.comp-runs{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 12px;}
.comp-run{flex:1 1 70px; text-align:center; padding:7px 6px; font-size:17px; background:var(--bg-panel-alt); border:2px dashed var(--border); color:var(--text-muted);}
.comp-run.done{border-style:solid; border-color:var(--text-primary); color:var(--text-primary);}
.comp-run.best{border-color:var(--success); color:var(--success);}
.comp-res{margin-bottom:12px;}
.comp-res-head{font-family:'Press Start 2P',monospace; font-size:9px; margin-bottom:8px;}
.comp-podium{display:flex; gap:14px; flex-wrap:wrap; font-size:17px; margin-bottom:8px;}
.comp-won{display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--success); font-size:18px;}
@media (max-width:760px){ .comp-detail{grid-template-columns:1fr;} }

/* Block Stacker play screen */
.stk-wrap{display:flex; justify-content:center; align-items:flex-start; gap:14px; margin-top:8px;}
.stk-side{display:flex; flex-direction:column; gap:10px; width:110px;}
.stk-box{background:var(--bg-panel); border:2px solid var(--border); padding:6px 8px; font-size:18px;}
.stk-box small{display:block; font-family:'Press Start 2P',monospace; font-size:7px; color:var(--text-muted); margin-bottom:4px;}
.stk-box b{font-weight:400; font-size:20px;}
.stk-box canvas{display:block; width:100%; height:auto; image-rendering:pixelated;}
.stk-keys{font-size:14px; color:var(--text-muted); line-height:1.35;}
.stk-board-wrap{position:relative; border:3px solid var(--text-primary); box-shadow:6px 6px 0 #000; line-height:0;}
#stkBoard{display:block; width:min(62vw, 300px); height:auto; aspect-ratio:1/2; image-rendering:pixelated; background:#07070b;}
.stk-count{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Press Start 2P',monospace; font-size:14px; color:var(--text-primary); background:rgba(0,0,0,.55); line-height:1.2;}
.stk-count[hidden]{display:none;}
.stk-touch{display:none; grid-template-columns:repeat(3, 1fr); gap:8px; max-width:360px; margin:14px auto 0;}
.stk-touch button{height:52px; font-family:'Press Start 2P',monospace; font-size:12px; color:var(--text-primary); background:var(--bg-panel-alt); border:2px solid var(--text-primary); box-shadow:0 4px 0 #000; touch-action:manipulation;}
.stk-touch button:active{transform:translateY(3px); box-shadow:none;}
.stk-over{max-width:360px; text-align:center;}
.stk-over-score{font-family:'Press Start 2P',monospace; font-size:24px; color:var(--success); margin:8px 0;}
@media (max-width:760px), (pointer:coarse){
  .stk-keys{display:none;}
  .stk-touch{display:grid;}
  .stk-side{width:84px;}
}
/* operator: competitions form */
.comp-form{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-bottom:10px;}
.comp-form select,.comp-form input{width:100%; box-sizing:border-box;}
@media (max-width:760px){ .comp-form{grid-template-columns:1fr 1fr;} }
.modal-back{position:fixed; inset:0; z-index:950; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72);}
.modal-back[hidden]{display:none;}
/* Block Breaker play screen (the Stacker layout and touch pad hide while it's showing) */
.stk-wrap[hidden],.stk-touch[hidden],.brk-wrap[hidden]{display:none !important;}
.brk-wrap{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:8px;}
.brk-hud{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted);}
.brk-hud span{background:var(--bg-panel); border:2px solid var(--border); padding:7px 9px;}
.brk-hud b{font-family:'VT323',monospace; font-weight:400; font-size:20px; color:var(--text-primary); margin-left:6px;}
.brk-board-wrap{position:relative; border:3px solid var(--text-primary); box-shadow:6px 6px 0 #000; line-height:0;}
#brkBoard{display:block; width:min(92vw, 400px); height:auto; aspect-ratio:320/440; background:#07070b; touch-action:none; cursor:none;}
.brk-help{font-size:15px; color:var(--text-muted); text-align:center; max-width:420px; margin:0;}

.comp-last{font-family:'Press Start 2P',monospace; font-size:6px; padding:4px 5px; color:#FFB020; border:1px solid #FFB020; margin-left:auto;}
.comp-card-top .comp-last + .cur-badge{margin-left:6px;}

/* minimum-players status on competition cards and pages */
.comp-min{font-size:15px; line-height:1.25;}
.comp-min.need{color:#FFB020;}
.comp-min.ok{color:var(--success);}
.comp-minbox{display:flex; flex-direction:column; gap:3px; margin:4px 0 8px; padding:8px 10px; background:var(--bg-panel-alt); border:1px solid var(--border); font-size:16px;}

.comp-prizes{font-size:15px; color:var(--text-primary); background:var(--bg-panel-alt); border:1px dashed var(--border); padding:5px 8px;}
.comp-prize-table td,.comp-prize-table th{padding:5px 8px;}

/* ---------- league crests (tiers / divisions); medals stay for top positions ---------- */
.tier-label{display:inline-flex; align-items:center; gap:7px; vertical-align:middle;}
.crest{display:inline-grid; place-items:center; flex-shrink:0; width:20px; height:23px; padding-bottom:2px; box-sizing:border-box;
  font-family:'Press Start 2P',monospace; font-size:6px; line-height:1; color:#120808;
  clip-path:polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.25);}
.crest-bronze{background:#E0915A;} .crest-silver{background:#C9D1D9;} .crest-gold{background:#FFD24A;}
.crest-diamond{background:#7FE7FF; animation:crest-shine 2.6s infinite;}
@keyframes crest-shine{0%,70%,100%{filter:brightness(1);} 80%{filter:brightness(1.6);}}
.tier-title{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.tier-title .crest{width:26px; height:30px; font-size:8px;}
.div-tab .n .tier-label{justify-content:center;}

.comp-min.need.urgent{color:var(--danger);}

/* ---------- tournaments: per-card countdown and the new-tournament alert ---------- */
.comp-time{font-size:15px; color:var(--accent-magenta);}
.comp-time.soon{color:#7FE7FF;}
.comp-time.urgent{color:var(--danger);}
/* A: gold count bubble with a pulsing ring   D: bouncing trophy and a gold glow */
.tourney-btn{position:relative; overflow:visible;}
.tourney-btn .tro{display:inline-block;}
.tourney-btn.has-new{box-shadow:0 5px 0 0 #000, 0 0 14px rgba(255,210,74,.6);}
.tourney-btn.has-new .tro{animation:t-hop 1s ease-in-out infinite;}
@keyframes t-hop{0%,55%,100%{transform:translateY(0);} 20%{transform:translateY(-6px) rotate(-8deg);} 35%{transform:translateY(0) rotate(6deg);}}
.t-bub{position:absolute; top:-9px; right:-9px; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:9px;
  display:grid; place-items:center; font-family:'Press Start 2P',monospace; font-size:7px; color:#120808; background:#FFD24A; border:2px solid var(--bg);
  animation:t-pop .4s cubic-bezier(.2,1.6,.4,1) both;}
.t-bub::after{content:''; position:absolute; inset:-2px; border-radius:10px; border:2px solid #FFD24A; animation:t-ring 1.6s ease-out infinite;}
@keyframes t-pop{from{transform:scale(0);} to{transform:scale(1);}}
@keyframes t-ring{0%{opacity:.9; transform:scale(1);} 100%{opacity:0; transform:scale(1.9);}}
.sd-new{font-family:'Press Start 2P',monospace; font-size:6px; padding:3px 5px; margin-left:6px; background:#FFD24A; color:#120808;}
.sd-new[hidden]{display:none;}
#compUpcoming{margin-top:4px;}

.sd-vol{width:130px; accent-color:var(--accent-amber);}

/* tournament time: option C (time left, a shrinking bar, the format underneath) */
.comp-time{display:flex; flex-direction:column; gap:4px; font-size:16px; color:var(--accent-magenta);}
.comp-time-left{font-size:17px;}
.comp-bar{height:8px; background:var(--bg-panel-alt); border:1px solid var(--border); position:relative; overflow:hidden;}
.comp-bar i{position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--accent-magenta); transition:width .9s linear;}
.comp-time-sub{font-size:14px; color:var(--text-muted);}
.comp-time.urgent{color:var(--danger);} .comp-time.urgent .comp-bar i{background:var(--danger);}
.comp-time.soon{color:#7FE7FF;} .comp-time.soon .comp-bar i{background:#7FE7FF; opacity:.35;}
.section-head .comp-time{min-width:200px;}
#stkTime.low,#brkTime.low{color:var(--danger);}
.stk-box[hidden],.brk-hud span[hidden]{display:none;}

/* which rules a tournament plays: time attack or classic */
.comp-mode{align-self:flex-start; font-family:'Press Start 2P',monospace; font-size:6px; padding:4px 6px; border:1px solid var(--text-muted); color:var(--text-muted);}
.comp-mode.ta{border-color:#FFD24A; color:#FFD24A;}
.run-mode{text-align:center; font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted); margin:4px 0 8px;}
.run-mode.ta{color:#FFD24A;}

/* =====================================================================================
   TOKEN WARS
   ===================================================================================== */
.war-btn{border-color:#3DDC97 !important;}
.war-card{position:relative; border-color:#3DDC97 !important;}
.war-flag{position:absolute; top:-10px; right:10px; font-family:'Press Start 2P',monospace; font-size:6px; padding:4px 6px; background:#3DDC97; color:#04140c;}
.war-host{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:14px; color:var(--text-muted);}
.war-host b{font-weight:400; color:var(--text-primary);}
.war-logo{width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; font-family:'Press Start 2P',monospace; font-size:9px; color:#120808; flex-shrink:0;}
.war-tag{font-family:'Press Start 2P',monospace; font-size:6px; padding:3px 5px; border:1px solid #FFB020; color:#FFB020;}
.war-name{font-family:'Press Start 2P',monospace; font-size:9px; line-height:1.5;}
.war-name small{font-family:'VT323',monospace; font-size:15px; color:var(--text-muted);}
.war-facts{display:flex; flex-direction:column; gap:3px; font-size:14px;}
.war-spon{color:#FFD24A;} .war-share{color:var(--text-muted);}
.war-burn{color:#FF7A45; background:#1a0c06; border:1px solid #4a2412; padding:4px 7px;}
.war-risk{display:flex; flex-direction:column; gap:2px; font-size:14px; background:#0c0c0c; border:1px solid var(--border); padding:6px 8px;}
.war-risk .lv-g{color:var(--success);} .war-risk .lv-y{color:#FFB020;} .war-risk .lv-r{color:#ff6b6b;}
.war-disc{font-size:13px; color:var(--text-muted); border-top:1px dashed var(--border); padding-top:6px;}
.war-panel{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.war-strip{display:flex; flex-wrap:wrap; width:100%; margin-bottom:14px; border:2px solid var(--border); background:#0c0808; cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit;}
.war-strip div{flex:1; min-width:150px; padding:8px 12px; border-right:1px solid var(--border);} .war-strip div:last-child{border-right:none;}
.war-strip small{display:block; font-size:13px; color:var(--text-muted);} .war-strip b{font-weight:400; font-size:18px;}
.war-strip .fire,.trans-k .fire{color:#FF7A45;} .war-strip .lp,.trans-k .lp{color:#27F2FF;}
.war-row2{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
@media (max-width:620px){ .war-row2{grid-template-columns:1fr;} }
.war-hint{display:block; font-size:13px; color:var(--text-muted);}
.war-tok{font-size:15px; padding:6px 9px; margin:-4px 0 10px; border:1px solid;}
.war-tok.ok{color:#3DDC97; border-color:#3DDC97; background:#0c1512;} .war-tok.bad{color:#ff6b6b; border-color:#ff6b6b;}
/* Create a Token WAR: "Who can play" radio choice */
.who-opts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
@media (max-width:640px){.who-opts{grid-template-columns:minmax(0,1fr);}}
.who-opt{display:flex; gap:8px; align-items:flex-start; border:1px solid var(--line,#3a2a2a); padding:9px 10px; cursor:pointer; min-width:0;}
.who-opt.on{border-color:var(--accent,#E22C20); background:rgba(255,255,255,.04);}
.who-opt.off{opacity:.5; cursor:not-allowed;}
.who-opt input{margin-top:4px; flex:none; accent-color:var(--accent,#E22C20);}
.who-opt b{display:block;} .who-opt small{display:block; opacity:.75; font-size:13px; line-height:1.3;}
.who-more{margin-top:8px;}
/* NFT Holder WARs: the seat box on a Token WAR's page */
.nft-seat{border:1px solid #B48CFF; padding:10px 12px; margin:10px 0; background:rgba(180,140,255,.06);}
.nft-seat-head b{color:#B48CFF;} .nft-seat-head small{opacity:.75;}
.nft-seat-form{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;} .nft-seat-form input{flex:1 1 220px; min-width:0;}
.nft-seat-change summary{cursor:pointer; font-size:14px; opacity:.8; margin-top:6px;}
.war-fee{display:flex; flex-direction:column; gap:6px; margin:8px 0;} .war-fee b{font-weight:400; font-size:22px;}
.war-bar{display:flex; height:14px; border:1px solid var(--border);} .war-bar i{display:block; height:100%;}
.war-manage{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
.war-mhead{display:flex; align-items:center; gap:10px;} .war-mhead b{font-weight:400; font-size:19px;} .war-mhead small{color:var(--text-muted);}
.war-stage{margin-left:auto; font-family:'Press Start 2P',monospace; font-size:6px; padding:4px 6px; border:1px solid;}
.war-stage.live{color:#3DDC97;} .war-stage.soon{color:#7FE7FF;} .war-stage.done{color:var(--text-muted);} .war-stage.r{color:#ff6b6b;}
.war-link{font-size:15px; color:#7FE7FF; overflow-wrap:anywhere;}
.war-inline{display:inline-flex; gap:6px; align-items:center;}
.war-manage input,.war-row2 input{box-sizing:border-box; background:var(--bg-panel-alt); border:1px solid var(--border); color:var(--text-primary); font-family:'VT323',monospace; font-size:17px; padding:5px 8px; width:100%;}
.trans-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px;}
@media (max-width:760px){ .trans-grid{grid-template-columns:1fr 1fr;} }
.trans-k{background:var(--bg-panel); border:2px solid var(--border); padding:10px;} .trans-k small{display:block; font-size:13px; color:var(--text-muted);} .trans-k b{font-weight:400; font-size:22px; display:block;}

.war-op-h{font-family:'Press Start 2P',monospace; font-size:8px; font-weight:400; color:var(--text-muted); margin:16px 0 8px;}

/* =====================================================================================
   MODE BAR: Arena / Cups / Token WARs (tiles + a tab strip; a bottom bar on phones)
   ===================================================================================== */
.modebar{margin:0 0 18px;} /* sits in the page column (.wrap), like the screens */
.modebar[hidden]{display:none;}
.mode-tiles{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;}
.mode-tile{position:relative; display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer; padding:12px; font-family:inherit; color:var(--text-primary);
  background:var(--bg-panel); border:3px solid var(--border); box-shadow:5px 5px 0 #000; transition:transform .08s;}
.mode-tile:hover{transform:translateY(-2px);}
.mode-tile.on{border-color:var(--c); box-shadow:5px 5px 0 #000, 0 0 18px color-mix(in srgb, var(--c) 45%, transparent);}
.mode-tile:focus-visible,.mode-tab:focus-visible{outline:2px solid var(--text-primary); outline-offset:3px;}
.mode-ic{font-size:26px; line-height:1; display:inline-block; align-self:flex-start;}
.mode-nm{font-family:'Press Start 2P',monospace; font-size:11px; color:var(--c); margin-top:6px;}
.mode-ds{font-size:15px; color:var(--text-muted); line-height:1.2;}
.mode-live{display:flex; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--text-muted); margin-top:4px;}
.mode-live b{font-weight:400; color:var(--text-primary); margin-right:3px;}
.mode-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 6px var(--success); margin-right:5px;}
.mode-tile.has-new{box-shadow:5px 5px 0 #000, 0 0 14px rgba(255,210,74,.55);}
.mode-tile.has-new .mode-ic{animation:t-hop 1s ease-in-out infinite;}
.mode-tabs{display:flex; margin-top:14px; border-bottom:2px solid var(--border); position:sticky; top:0; z-index:40; background:var(--bg);}
.mode-tab{flex:1; font-family:'Press Start 2P',monospace; font-size:8px; padding:11px 6px; background:none; border:none; border-bottom:3px solid transparent;
  margin-bottom:-2px; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;}
.mode-tab.on{color:var(--text-primary); border-bottom-color:var(--c);}
.mode-tab-ic{font-size:14px;}
.mode-tab-new{font-size:7px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:8px; background:#FFD24A; color:#120808; display:inline-grid; place-items:center;}
/* phones: compact tiles, and the tab strip becomes a bottom bar */
@media (max-width:700px){
  .mode-tiles{grid-template-columns:1fr;}
  .mode-tile{flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:10px;}
  .mode-tile .mode-ds{display:none;}
  .mode-nm{margin-top:0;}
  .mode-live{margin:0 0 0 auto;}
  .mode-tabs{position:fixed; left:0; right:0; bottom:0; top:auto; margin:0; border-bottom:none; border-top:2px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom, 0px); box-shadow:0 -6px 18px rgba(0,0,0,.5);}
  .mode-tab{flex-direction:column; gap:3px; padding:9px 4px; border-bottom:none; border-top:3px solid transparent; margin:0;}
  .mode-tab.on{border-top-color:var(--c);}
  body.has-modebar{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px));}
}

/* =====================================================================================
   OPERATOR CONSOLE: sidebar + sections
   ===================================================================================== */
.op-shell{display:grid; grid-template-columns:210px 1fr; gap:0; min-height:70vh; border:1px solid var(--border); background:var(--bg);}
.op-side{position:sticky; top:0; align-self:start; max-height:100vh; overflow:auto; display:flex; flex-direction:column; gap:2px; padding:12px 8px; background:color-mix(in srgb, var(--bg) 88%, #000); border-right:1px solid var(--border);}
.op-brand{font-family:'Press Start 2P',monospace; font-size:10px; padding:6px 8px 12px;} .op-brand b{color:var(--accent-amber); font-weight:400;}
.op-brand small{display:block; font-family:'VT323',monospace; font-size:14px; color:var(--text-muted); margin-top:4px;}
.op-grp{font-family:'Press Start 2P',monospace; font-size:6px; letter-spacing:1px; color:var(--text-muted); padding:10px 8px 4px;}
.op-nav{display:flex; align-items:center; gap:6px; padding:7px 8px; font-family:'VT323',monospace; font-size:17px; color:var(--text-muted); background:none; border:none; border-left:3px solid transparent; text-align:left; cursor:pointer; white-space:nowrap;}
.op-nav:hover{color:var(--text-primary); background:var(--bg-panel);} .op-nav.on{color:var(--text-primary); background:var(--bg-panel-alt); border-left-color:var(--accent-amber);}
.op-nav:focus-visible{outline:2px solid var(--text-primary); outline-offset:-2px;}
.op-badge{margin-left:auto; font-family:'Press Start 2P',monospace; font-size:6px; padding:3px 5px; border-radius:7px; background:#FFB020; color:#1a0f00;}
.op-main{min-width:0; display:flex; flex-direction:column;}
.op-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 92%, #000); position:sticky; top:0; z-index:5;}
.op-top-sp{flex:1;}
.op-pill{font-family:'VT323',monospace; font-size:15px; padding:3px 9px; border:1px solid var(--border); background:var(--bg-panel); color:var(--text-primary);}
.op-pill.net-main{color:var(--success);} .op-pill.net-test{color:#FFB020;}
.op-attn{cursor:pointer; color:#FFB020; border-color:#FFB020;}
.op-main > .panel#opProblem{margin:12px 16px 0;}
.op-sec{padding:16px;} .op-sec[hidden]{display:none;}
.op-h2{font-family:'Press Start 2P',monospace; font-size:13px; margin:0 0 4px;}
.op-lead{font-size:17px; color:var(--text-muted); margin:0 0 14px;}
.op-sec .panel.commission-panel{margin-bottom:14px;}
.card-op{background:var(--bg-panel); border:1px solid var(--border); padding:12px; margin-bottom:14px;}
.card-op h3{font-family:'Press Start 2P',monospace; font-size:8px; font-weight:400; color:var(--text-muted); margin:0 0 10px;}
.op-cols{display:grid; grid-template-columns:1.4fr 1fr; gap:14px;}
.op-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.op-alert{display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:6px; font-size:16px; background:var(--bg-panel-alt); border-left:3px solid var(--text-muted);}
.op-alert .btn{margin-left:auto;} .op-alert.b{border-left-color:var(--danger);} .op-alert.w{border-left-color:#FFB020;} .op-alert.i{border-left-color:#7FE7FF;} .op-alert.ok{border-left-color:var(--success); color:var(--success);}
.op-chart{display:flex; align-items:flex-end; gap:8px; height:140px; padding-top:6px; border-bottom:1px solid var(--border);}
.op-bar{flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:2px; position:relative;}
.op-bar i{display:block; width:42%; min-height:2px;} .op-bar em{position:absolute; bottom:-18px; font-style:normal; font-size:12px; color:var(--text-muted);}
.b-native{background:#FF9F4A;} .b-house{background:#C084FF;}
.op-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:14px; color:var(--text-muted); margin-top:24px;}
.op-legend i{display:inline-block; width:10px; height:10px; margin-right:5px; vertical-align:middle;}
.op-kv{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--border); font-size:17px;}
.op-kv small{display:block; font-size:13px; color:var(--text-muted);} .op-kv b{font-weight:400;}
.op-health{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
.op-hc{background:var(--bg-panel-alt); padding:8px; font-size:15px;}
.op-sw{box-sizing:border-box; width:46px; height:24px; border-radius:12px; flex-shrink:0; position:relative; cursor:pointer; background:#000; border:2px solid var(--text-muted); padding:0;}
.op-sw::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-primary); transition:left .15s;}
.op-sw.on{background:var(--success); border-color:var(--success);} .op-sw.on::after{left:24px;}
.op-player{border:1px solid var(--border); padding:8px 10px; margin-top:8px;}
.op-on{font-weight:400; color:var(--success);} .op-banned{font-weight:400; color:var(--danger);}
.op-recent{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;} .op-recent span{font-size:14px; padding:2px 6px; background:var(--bg-panel-alt); color:var(--text-muted);}
.op-ann-preview{border:3px solid var(--border); padding:10px; font-size:17px; color:var(--text-muted);} .op-ann-preview.on{border-color:var(--accent-amber); color:var(--text-primary);}
@media (max-width:860px){
  .op-shell{grid-template-columns:1fr;}
  .op-side{position:sticky; top:0; z-index:6; flex-direction:row; overflow-x:auto; max-height:none; border-right:none; border-bottom:1px solid var(--border); padding:6px;}
  .op-brand,.op-grp{display:none;}
  .op-nav{border-left:none; border-bottom:3px solid transparent;} .op-nav.on{border-bottom-color:var(--accent-amber);}
  .op-top{position:static;}
  .op-cols,.op-health{grid-template-columns:1fr;}
}

/* =====================================================================================
   THEMED FORMS: every text box, drop-down, date picker and slider inside .field
   (the original rule only matched type="text"/"number", so plain inputs and selects fell back to
   browser defaults), plus button-based segmented toggles (.cur-seg > button)
   ===================================================================================== */
.field input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.field select, .field textarea,
.war-manage input, .war-row2 input, .war-inline input{
  box-sizing:border-box; width:100%; background:var(--bg-panel-alt); border:1px solid var(--border); border-radius:0;
  color:var(--text-primary); padding:10px 12px; font-family:'VT323',monospace; font-size:17px; line-height:1.2; outline:none;
  color-scheme:dark; box-shadow:inset 2px 2px 0 rgba(0,0,0,.35); transition:border-color .12s, box-shadow .12s;
}
.field input::placeholder, .field textarea::placeholder, .war-manage input::placeholder{color:var(--text-muted); opacity:.75;}
.field input:focus, .field select:focus, .field textarea:focus, .war-manage input:focus, .war-inline input:focus{
  border-color:var(--accent-cyan); box-shadow:inset 2px 2px 0 rgba(0,0,0,.35), 0 0 0 2px color-mix(in srgb, var(--accent-cyan) 35%, transparent);
}
.field input:disabled, .field select:disabled{opacity:.55; cursor:not-allowed;}
/* drop-downs: a pixel arrow instead of the browser's */
.field select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:calc(100% - 17px) 55%, calc(100% - 11px) 55%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat;}
.field select option{background:var(--bg-panel); color:var(--text-primary);}
/* date & time picker */
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(1) saturate(3) hue-rotate(320deg); cursor:pointer;}
/* sliders */
.field input[type="range"]{width:100%; accent-color:var(--accent-amber); cursor:pointer; margin:8px 0 2px;}
/* segmented toggles built from buttons (native coin / house token, Start now / Schedule) */
.cur-seg{display:inline-flex; flex-wrap:wrap; border:2px solid var(--border); background:var(--bg-panel-alt); margin:2px 0 12px; box-shadow:3px 3px 0 #000;}
.cur-seg > button{font-family:'Press Start 2P',monospace; font-size:8px; letter-spacing:.5px; padding:10px 14px; border:none; border-right:2px solid var(--border);
  background:transparent; color:var(--text-muted); cursor:pointer; transition:background .12s, color .12s;}
.cur-seg > button:last-child{border-right:none;}
.cur-seg > button:hover{color:var(--text-primary); background:var(--bg-panel);}
.cur-seg > button.on{background:var(--accent-amber); color:var(--on-accent);}
.cur-seg > button:focus-visible{outline:2px solid var(--text-primary); outline-offset:-3px;}
/* the create-screen fields sit a little tighter than the lobby's */
#warCreateBody .field{margin-bottom:12px;}
#warCreateBody .war-row2{gap:12px;}
#warCreateBody .panel h3{font-family:'Press Start 2P',monospace; font-size:9px; font-weight:400; color:var(--text-muted); margin:0 0 12px;}

/* ---------- drop-downs, style B: a raised pixel button with a bold ▼ in the theme's accent ----------
   (replaces the faint arrow above; the arrow is two gradients so it can use the theme colour) */
.field select{
  border:2px solid var(--text-primary); background-color:var(--bg-panel); box-shadow:3px 3px 0 #000; padding:10px 42px 10px 12px;
  background-image:linear-gradient(45deg, transparent 50%, var(--accent-amber) 50%), linear-gradient(135deg, var(--accent-amber) 50%, transparent 50%);
  background-position:calc(100% - 22px) 52%, calc(100% - 14px) 52%; background-size:8px 8px, 8px 8px; background-repeat:no-repeat;
  transition:transform .06s, box-shadow .06s, background-color .12s, border-color .12s;
}
.field select:hover{background-color:var(--bg-panel-alt); transform:translate(-1px, -1px); box-shadow:4px 4px 0 #000;}
.field select:active{transform:translate(2px, 2px); box-shadow:1px 1px 0 #000;}
.field select:focus{border-color:var(--accent-cyan); box-shadow:3px 3px 0 #000, 0 0 0 2px color-mix(in srgb, var(--accent-cyan) 35%, transparent);}

/* ---------- pixel drop-downs (js/pxselect.js): on mouse devices a .field select opens the site's own list, not the
   browser's popup, which some browsers draw as a white box. The real <select> stays in the page, hidden. ---------- */
.field select.px-native{position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; overflow:hidden;}
.px-wrap{position:relative; display:block;}
.px-sel{
  box-sizing:border-box; display:block; width:100%; text-align:left; cursor:pointer; color:var(--text-primary);
  font-family:'VT323',monospace; font-size:17px; line-height:1.2; padding:10px 42px 10px 12px;
  border:2px solid var(--text-primary); background-color:var(--bg-panel); box-shadow:3px 3px 0 #000;
  background-image:linear-gradient(45deg, transparent 50%, var(--accent-amber) 50%), linear-gradient(135deg, var(--accent-amber) 50%, transparent 50%);
  background-position:calc(100% - 22px) 52%, calc(100% - 14px) 52%; background-size:8px 8px, 8px 8px; background-repeat:no-repeat;
  transition:transform .06s, box-shadow .06s, background-color .12s, border-color .12s;
}
.px-sel-l{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.px-sel:hover{background-color:var(--bg-panel-alt); transform:translate(-1px, -1px); box-shadow:4px 4px 0 #000;}
.px-sel:active{transform:translate(2px, 2px); box-shadow:1px 1px 0 #000;}
.px-sel:focus-visible, .px-sel.open{outline:none; border-color:var(--accent-cyan); box-shadow:3px 3px 0 #000, 0 0 0 2px color-mix(in srgb, var(--accent-cyan) 35%, transparent);}
.px-sel:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:3px 3px 0 #000;}
.px-menu{position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:60; max-height:264px; overflow:auto; padding:4px 0;
  background:var(--bg-panel); border:2px solid var(--text-primary); box-shadow:4px 4px 0 #000;}
.px-menu.up{top:auto; bottom:calc(100% + 5px);}
.px-opt{display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--text-primary); cursor:pointer;
  font-family:'VT323',monospace; font-size:17px; line-height:1.2; padding:8px 12px 8px 22px;}
.px-opt:hover, .px-opt:focus-visible{outline:none; background:var(--bg-panel-alt); color:var(--accent-cyan);}
.px-opt.on{color:var(--accent-amber); box-shadow:inset 4px 0 0 var(--accent-amber);}
.px-opt:disabled{opacity:.45; cursor:not-allowed; background:transparent;}

/* ---------- Host FAQ (create a Token WAR) ---------- */
.hfaq-btn{border-color:var(--accent-amber) !important; color:var(--accent-amber) !important; background:var(--bg-panel-alt) !important;}
.faq-i{display:inline-grid; place-items:center; width:17px; height:17px; margin-left:6px; padding:0; border-radius:50%; vertical-align:middle; cursor:pointer;
  border:1px solid var(--accent-cyan); color:var(--accent-cyan); background:none; font-family:'VT323',monospace; font-size:13px; line-height:1;}
.faq-i:hover,.faq-i:focus-visible{background:var(--accent-cyan); color:var(--bg); outline:none;}
.hfaq-shade{position:fixed; inset:0; z-index:960; background:rgba(0,0,0,.55);}
.hfaq-shade[hidden],.hfaq[hidden]{display:none;}
.hfaq{position:fixed; top:0; right:0; bottom:0; z-index:970; width:min(440px, 100%); display:flex; flex-direction:column;
  background:var(--bg-panel); border-left:3px solid var(--accent-amber); box-shadow:-10px 0 30px rgba(0,0,0,.5); animation:hfaq-in .22s ease-out;}
@keyframes hfaq-in{from{transform:translateX(100%);} to{transform:none;}}
.no-motion .hfaq{animation:none;}
.hfaq-head{display:flex; align-items:center; gap:8px; padding:14px; border-bottom:1px solid var(--border); padding-top:calc(14px + env(safe-area-inset-top, 0px));}
.hfaq-head b{font-family:'Press Start 2P',monospace; font-size:10px; font-weight:400;}
.hfaq-x{margin-left:auto; background:none; border:none; color:var(--text-primary); font-size:26px; line-height:1; cursor:pointer;}
.hfaq-search{margin:12px 14px 6px; box-sizing:border-box; width:calc(100% - 28px); background:var(--bg-panel-alt); border:1px solid var(--border); color:var(--text-primary);
  padding:9px 11px; font-family:'VT323',monospace; font-size:17px; outline:none;}
.hfaq-search:focus{border-color:var(--accent-cyan);}
.hfaq-cats{display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 8px;}
.hfaq-cats button{font-family:'Press Start 2P',monospace; font-size:6px; padding:5px 7px; border:1px solid var(--border); background:var(--bg-panel-alt); color:var(--text-muted); cursor:pointer;}
.hfaq-cats button.on{border-color:var(--accent-amber); color:var(--text-primary);}
.hfaq-list{overflow:auto; padding:0 14px calc(14px + env(safe-area-inset-bottom, 0px)); flex:1;}
.hfaq-q{border:1px solid var(--border); margin-bottom:6px; background:var(--bg-panel-alt);}
.hfaq-q.open{border-color:var(--accent-amber);}
.hfaq-q.flash{animation:hfaq-flash 1.2s;} @keyframes hfaq-flash{0%,40%{box-shadow:0 0 0 2px var(--accent-cyan);} 100%{box-shadow:none;}}
.hfaq-q button{width:100%; display:flex; align-items:center; gap:8px; text-align:left; padding:9px 10px; background:none; border:none; color:var(--text-primary); font-family:'VT323',monospace; font-size:17px; cursor:pointer;}
.hfaq-q button::after{content:'+'; margin-left:auto; color:var(--accent-amber); font-size:20px;}
.hfaq-q.open button::after{content:'−';}
.hfaq-q p{margin:0; padding:0 10px 10px; font-size:16px; color:var(--text-muted); line-height:1.35;}
.hfaq-empty{color:var(--text-muted); font-size:16px;}

/* =====================================================================================
   COMPACT CARDS (Cups + Token WARs lists) and the detail sheet that grows out of them
   ===================================================================================== */
.mini-grid{grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)) !important; gap:12px;}
.mini-card{position:relative; display:flex; flex-direction:column; gap:7px; text-align:left; cursor:pointer; padding:10px; font-family:inherit; color:var(--text-primary);
  background:var(--bg-panel); border:2px solid var(--h); box-shadow:4px 4px 0 #000; transition:transform .12s, box-shadow .12s;}
.mini-card:hover{transform:translate(-2px, -2px); box-shadow:6px 6px 0 #000;}
.mini-card:focus-visible{outline:2px solid var(--text-primary); outline-offset:2px;}
.mini-flag{position:absolute; top:-8px; right:8px; font-family:'Press Start 2P',monospace; font-size:5px; padding:3px 5px; background:var(--h); color:#0a0a0a;}
.mini-flag.ta{background:#FFD24A;}
.mini-top{display:flex; align-items:center; gap:8px;}
.mini-name{font-family:'Press Start 2P',monospace; font-size:8px; line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mini-sub{font-size:14px; color:var(--text-muted); display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.mini-tok{font-family:'Press Start 2P',monospace; font-size:6px; padding:3px 5px; border:1px solid var(--h); color:var(--h);}
.mini-time{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--accent-magenta);}
.mini-time.urgent{color:var(--danger);} .mini-time.soon{color:#7FE7FF;}
.mini-bar{flex:1; height:5px; background:var(--bg-panel-alt); border:1px solid var(--border);} .mini-bar i{display:block; height:100%; background:currentColor;}
.mini-time.soon .mini-bar i{opacity:.35;}
.mini-nums{display:grid; grid-template-columns:1fr 1fr; gap:5px;}
.mini-nums div{background:var(--bg-panel-alt); padding:4px 6px; min-width:0;} .mini-nums small{display:block; font-size:12px; color:var(--text-muted);}
.mini-nums b{font-weight:400; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
.mini-foot{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:18px;}
.mini-chip{font-size:13px; padding:0 6px; border:1px solid;}
.mini-chip.spon{color:#FFD24A; border-color:#FFD24A;} .mini-chip.me{color:var(--success); border-color:var(--success);}
.mini-risk{display:inline-flex; gap:3px;} .mini-risk i{width:8px; height:8px; border-radius:50%; display:inline-block;}
.mini-risk .lv-g{background:var(--success);} .mini-risk .lv-y{background:#FFB020;} .mini-risk .lv-r{background:var(--danger);}
.mini-go{margin-left:auto; font-family:'Press Start 2P',monospace; font-size:6px; color:var(--h);}
.cur-badge.war-tok{color:var(--h); border-color:var(--h);}
/* sort / filter tabs */
.sort-bar{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px;}
.sort-bar button{font-family:'Press Start 2P',monospace; font-size:7px; padding:8px 10px; border:1px solid var(--border); background:var(--bg-panel-alt); color:var(--text-muted); cursor:pointer;}
.sort-bar button:hover{color:var(--text-primary);}
.sort-bar button.on{border-color:var(--accent-amber); color:var(--text-primary); box-shadow:inset 0 -3px 0 var(--accent-amber);}
.sort-bar button:focus-visible{outline:2px solid var(--text-primary); outline-offset:2px;}
/* the detail sheet: grows from the card's rectangle to the centre, shrinks back on close */
.sheet-shade{position:fixed; inset:0; z-index:955; background:rgba(0,0,0,.6); opacity:0; transition:opacity .25s;}
.sheet-shade.on{opacity:1;}
.comp-sheet{position:fixed; z-index:958; overflow:hidden; background:var(--bg-panel); border:3px solid var(--h); box-shadow:8px 8px 0 #000;
  transition:left .32s cubic-bezier(.2,.9,.3,1), top .32s cubic-bezier(.2,.9,.3,1), width .32s cubic-bezier(.2,.9,.3,1), height .32s cubic-bezier(.2,.9,.3,1);}
.comp-sheet.instant{transition:none;}
.sheet-inner{height:100%; overflow:auto; box-sizing:border-box; padding:14px; opacity:0; transition:opacity .18s .2s;}
.comp-sheet.open .sheet-inner{opacity:1;} .comp-sheet.instant .sheet-inner{transition:none;}
.sheet-inner > .comp-card{border:none !important; box-shadow:none !important; padding:0; background:none;}
.sheet-x{position:absolute; top:6px; right:10px; z-index:2; background:none; border:none; color:var(--text-primary); font-size:26px; line-height:1; cursor:pointer;}
.sheet-acts{margin-top:12px;}
.sheet-shade + .comp-sheet{padding-top:env(safe-area-inset-top, 0px);}

/* =====================================================================================
   LANDING PAGE (arcade attract screen; graphics drawn in the theme's colours)
   ===================================================================================== */
.ld{margin:0 -4px;}
.ld-nav{display:flex; justify-content:flex-end; gap:16px; flex-wrap:wrap; margin:0 0 10px;}
.ld-link{background:none; border:none; color:var(--text-muted); font-family:'VT323',monospace; font-size:18px; cursor:pointer; padding:2px 0;}
.ld-link:hover,.ld-link:focus-visible{color:var(--text-primary); outline:none; text-decoration:underline;}
.ld-hero{position:relative; height:430px; overflow:hidden; border:2px solid var(--border); background:var(--bg);}
.ld-hero canvas{position:absolute; inset:0; width:100%; height:100%;}
.ld-hc{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 16px;}
.ld-big{font-family:'Press Start 2P',monospace; font-weight:400; font-size:clamp(24px, 6vw, 54px); line-height:1.15; letter-spacing:2px; margin:0; position:relative; text-shadow:3px 3px 0 #000;}
.ld-big b{color:var(--accent-amber); font-weight:400;}
.ld-big::before,.ld-big::after{content:attr(data-t); position:absolute; left:0; right:0; top:0; opacity:.7;}
.ld-big::before{color:var(--accent-cyan); transform:translate(-2px, 0); animation:ld-gl1 4s infinite steps(1);}
.ld-big::after{color:var(--accent-amber); transform:translate(2px, 0); animation:ld-gl2 4s infinite steps(1);}
@keyframes ld-gl1{0%,93%,100%{clip-path:inset(100% 0 0 0);} 94%{clip-path:inset(10% 0 60% 0);} 96%{clip-path:inset(55% 0 20% 0);}}
@keyframes ld-gl2{0%,93%,100%{clip-path:inset(100% 0 0 0);} 95%{clip-path:inset(62% 0 10% 0);} 97%{clip-path:inset(15% 0 70% 0);}}
.no-motion .ld-big::before,.no-motion .ld-big::after{animation:none; clip-path:inset(100% 0 0 0);}
.ld-tag{font-size:clamp(18px, 2.5vw, 23px); color:var(--text-muted); margin:16px 0 24px; max-width:640px; line-height:1.3;}
.ld-tag em{font-style:normal; color:var(--text-primary);}
.ld-ctas{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;} .ld-ctas.left{justify-content:flex-start;}
.ld-cta{font-family:'Press Start 2P',monospace; font-size:9px; padding:12px 16px; border:3px solid var(--text-primary); background:var(--accent-amber); color:var(--on-accent);
  box-shadow:4px 4px 0 #000; cursor:pointer; white-space:nowrap;}
.ld-cta.ghost{background:transparent; color:var(--text-primary); border-width:2px;}
.ld-cta:active{transform:translate(2px, 2px); box-shadow:1px 1px 0 #000;}
.ld-cta:focus-visible{outline:2px solid var(--accent-cyan); outline-offset:3px;}
.ld-stats{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; padding:10px; font-size:18px; color:var(--text-muted); background:var(--bg-panel); border:2px solid var(--border); border-top:none;}
.ld-stats b{font-weight:400; color:var(--text-primary); font-size:22px; margin-right:4px;}
.ld-ticker{border-top:3px solid var(--accent-amber); border-bottom:3px solid var(--accent-amber); background:#000; overflow:hidden; white-space:nowrap; margin:14px 0 0;}
.ld-ticker > div{display:inline-block; padding:9px 0; animation:ld-tick 40s linear infinite; font-size:18px;}
.ld-ticker:hover > div{animation-play-state:paused;}
.ld-ticker span{margin:0 26px;} .ld-ticker b{color:var(--accent-cyan); font-weight:400;}
@keyframes ld-tick{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.ld-ticker span{white-space:nowrap;}
/* motion off (drawer or the OS 'reduce motion' setting): one copy, centred, whole items wrap as units */
.no-motion .ld-ticker > div{animation:none; display:flex; flex-wrap:wrap; justify-content:center; row-gap:6px; width:100%; box-sizing:border-box; white-space:normal;}
.no-motion .ld-ticker .dup{display:none;}
.ld-sec{padding:34px 0 0;}
.ld-st{font-family:'Press Start 2P',monospace; font-size:13px; font-weight:400; text-align:center; margin:0 0 6px;}
.ld-ss{text-align:center; color:var(--text-muted); font-size:18px; margin:0 0 22px;}
.ld-modes{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.ld-mode{background:var(--bg-panel); border:3px solid var(--m); box-shadow:6px 6px 0 #000; display:flex; flex-direction:column; transition:transform .15s;}
.ld-mode:hover{transform:translateY(-4px);}
.ld-scr{position:relative; background:#000; border-bottom:3px solid var(--m); height:150px;}
.ld-scr canvas{display:block; width:100%; height:100%;}
.ld-lbl{position:absolute; top:6px; left:8px; font-family:'Press Start 2P',monospace; font-size:6px; color:var(--m); background:#000; padding:3px 5px; border:1px solid var(--m);}
.ld-mb{padding:14px; display:flex; flex-direction:column; gap:8px; flex:1;}
.ld-mb h3{font-family:'Press Start 2P',monospace; font-size:12px; font-weight:400; margin:0; color:var(--m);}
.ld-mb p{margin:0; font-size:17px; color:var(--text-muted); line-height:1.25; flex:1;}
.ld-mb ul{margin:0; padding:0; list-style:none; font-size:16px;} .ld-mb li::before{content:'▸ '; color:var(--m);}
.ld-mb .ld-cta{align-self:flex-start; font-size:8px; padding:10px 12px; background:var(--m);}
.ld-steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.ld-step{background:var(--bg-panel); border:2px solid var(--border); padding:14px;}
.ld-step .n{font-family:'Press Start 2P',monospace; font-size:20px; color:var(--accent-amber); text-shadow:3px 3px 0 #000;}
.ld-step h4{font-family:'Press Start 2P',monospace; font-size:9px; font-weight:400; margin:8px 0;} .ld-step p{margin:0; font-size:17px; color:var(--text-muted);}
.ld-trust{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
.ld-tr{background:var(--bg-panel-alt); border:1px solid var(--border); padding:12px; text-align:center;}
.ld-tr .ic{font-size:26px;} .ld-tr b{display:block; font-family:'Press Start 2P',monospace; font-size:8px; font-weight:400; margin:8px 0 4px;} .ld-tr small{font-size:15px; color:var(--text-muted);}
.ld-roster{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:10px;}
.ld-game{background:var(--bg-panel); border:2px solid var(--border); padding:12px 6px; text-align:center; font-size:16px; transition:transform .12s, border-color .12s;}
.ld-game[hidden]{display:none;}
.ld-game:hover{transform:translateY(-3px); border-color:var(--accent-amber);}
.ld-game .ic{display:block; font-size:30px; margin-bottom:6px;}
.ld-game em{display:block; font-style:normal; font-family:'Press Start 2P',monospace; font-size:5px; color:var(--accent-amber); margin-top:4px;}
.ld-game.cup em{color:var(--accent-cyan);}
.ld-host{display:grid; grid-template-columns:1.2fr 1fr; gap:16px; align-items:center; background:var(--bg-panel); border:3px solid var(--accent-magenta); box-shadow:6px 6px 0 #000; padding:18px;}
.ld-host h3{font-family:'Press Start 2P',monospace; font-size:12px; font-weight:400; color:var(--accent-magenta); margin:0 0 8px; line-height:1.5;}
.ld-host p{font-size:18px; color:var(--text-muted); margin:0 0 12px;}
.ld-burn{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.ld-burn div{background:#000; border:1px solid var(--border); padding:10px; text-align:center;}
.ld-burn b{display:block; font-size:24px; font-weight:400; color:var(--accent-cyan);} .ld-burn small{color:var(--text-muted); font-size:14px;}
.ld-foot{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:34px; padding:18px 0 4px; border-top:1px solid var(--border); color:var(--text-muted); font-size:16px;}
.ld-sp{flex:1;}
.ld-makers{opacity:0.85;}
.ld-makers::before{content:'·'; margin-right:14px; opacity:0.6;}
.ld-makers:empty{display:none;}
@media (max-width:760px){
  .ld-hero{height:460px;} .ld-modes,.ld-steps,.ld-host{grid-template-columns:1fr;} .ld-trust{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion: reduce){ .ld-ticker > div,.ld-big::before,.ld-big::after{animation:none;} .ld-ticker .dup{display:none;} .ld-ticker > div{display:flex; flex-wrap:wrap; justify-content:center; width:100%; white-space:normal;} }

.sto-bar{flex:1; height:8px; margin:0 12px; background:var(--bg-panel-alt); border:1px solid var(--border);} .sto-bar i{display:block; height:100%; background:var(--accent-cyan);}

/* ---------- Flap / Asteroid Miner play panel ---------- */
.arc-wrap{display:flex; flex-direction:column; align-items:center; gap:10px;}
.arc-wrap[hidden]{display:none;}
.arc-hud{width:100%; max-width:720px;} .arc-hud em{font-style:normal;}
.arc-hud b.low{color:var(--danger);}
.arc-board-wrap{position:relative; width:100%; max-width:720px; aspect-ratio:4 / 3; border:3px solid var(--text-primary); box-shadow:5px 5px 0 #000; background:#000;}
.arc-board-wrap canvas{display:block; width:100%; height:100%; touch-action:none;}
.arc-pads{display:none; gap:8px; width:100%; max-width:720px;}
.arc-pads button{flex:1; font-family:'Press Start 2P',monospace; font-size:11px; padding:16px 0; border:2px solid var(--text-primary); background:var(--bg-panel-alt); color:var(--text-primary); touch-action:none; user-select:none;}
.arc-pads button:active{background:var(--accent-amber); color:var(--on-accent);}
@media (hover:none), (max-width:700px){ .arc-pads{display:flex;} }
.ld-game.new::after{content:'NEW'; display:block; margin-top:4px; font-family:'Press Start 2P',monospace; font-size:5px; color:var(--accent-magenta);}
.ld-roster.cups-first .ld-game.cup{order:-1;} /* a site may list its Cup games first (text player.rosterClass) */
/* Native coin only until the operator sets the house token on-chain: html[data-house="1"] is set from the server's state. */
html:not([data-house="1"]) .needs-house{display:none !important;}
html[data-house="1"] .no-house{display:none !important;}
.panel.coming-soon{text-align:center; padding:28px 18px;}
.panel.coming-soon h3{margin:0 0 8px;}
.wallet-opt{display:flex; align-items:center; gap:10px; justify-content:flex-start;}
.wallet-opt img{width:22px; height:22px; border-radius:4px;}

/* ---------- detail sheet v2: header bar, body, action bar; sized to its content ---------- */
.comp-sheet{display:flex; flex-direction:column;}
.sheet-head{display:flex; align-items:center; gap:10px; padding:12px; background:var(--bg-panel-alt); border-bottom:1px solid var(--border); flex-shrink:0;}
.sheet-head .crest{transform:scale(1.35); margin:0 6px 0 4px;}
.sheet-logo{width:34px; height:34px; font-size:12px;}
.sheet-titles{min-width:0; flex:1;}
.sheet-title{font-family:'Press Start 2P',monospace; font-size:11px; line-height:1.5; overflow-wrap:anywhere;}
.sheet-tags{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; font-size:15px; color:var(--text-muted);}
.sheet-tags b{font-weight:400; color:var(--text-primary);}
.sheet-ta{font-family:'Press Start 2P',monospace; font-size:6px; padding:3px 5px; border:1px solid #FFD24A; color:#FFD24A;}
.sheet-head .sheet-x{position:static; align-self:flex-start; width:32px; height:32px; flex-shrink:0; font-size:20px; line-height:1;
  background:var(--bg); border:2px solid var(--border); color:var(--text-primary); cursor:pointer;}
.sheet-head .sheet-x:hover,.sheet-head .sheet-x:focus-visible{border-color:var(--text-primary); outline:none;}
.sheet-body{flex:1; min-height:0; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:10px; opacity:0; transition:opacity .18s .2s;}
.sheet-acts{display:flex; gap:10px; align-items:center; padding:12px; border-top:1px solid var(--border); background:var(--bg-panel-alt); flex-shrink:0; opacity:0; transition:opacity .18s .2s;}
.sheet-acts .btn:first-child{flex:1;}
.sheet-acts .btn[disabled]{opacity:.6; cursor:default;}
.comp-sheet.open .sheet-body,.comp-sheet.open .sheet-acts{opacity:1;}
.comp-sheet.instant .sheet-body,.comp-sheet.instant .sheet-acts{transition:none;}
.sheet-body .comp-stats{margin:0;}

/* ---------- themed confirm dialog (replaces the browser's confirm()) ---------- */
.cm-back{position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.65); display:grid; place-items:center; padding:16px;}
.cm{--k:var(--danger); width:min(440px, 100%); background:var(--bg-panel); border:3px solid var(--k); box-shadow:8px 8px 0 #000; animation:cm-pop .16s ease-out;}
.cm-k-warn{--k:#FFB020;} .cm-k-go{--k:var(--success);}
@keyframes cm-pop{from{transform:scale(.92); opacity:0;} to{transform:none; opacity:1;}}
.no-motion .cm{animation:none;}
.cm-h{display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--bg-panel-alt); border-bottom:1px solid var(--border);}
.cm-ic{width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; font-size:18px; border:2px solid var(--k); background:var(--bg);}
.cm-h b{font-family:'Press Start 2P',monospace; font-size:10px; font-weight:400; line-height:1.5;}
.cm-b{padding:14px; font-size:17px; line-height:1.35; color:var(--text-muted);}
.cm-b p{margin:0 0 6px; color:var(--text-primary);}
.cm-b ul{margin:0; padding-left:18px;} .cm-b li{margin:4px 0;}
.cm-f{display:flex; gap:10px; justify-content:flex-end; padding:12px 14px; border-top:1px solid var(--border);}
.cm-yes.cm-danger{background:var(--danger); color:#fff;}
.cm-yes.cm-warn{background:#FFB020; color:#1a0f00;}
.cm-yes.cm-go{background:var(--success); color:#041b0c;}

/* =====================================================================================
   CLANS
   ===================================================================================== */
.two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:14px; align-items:start;}
@media (max-width:760px){ .two-col{grid-template-columns:1fr;} }
.clan-emb{display:inline-grid; place-items:center; width:34px; height:34px; font-size:18px; border:2px solid var(--c); background:#000; box-shadow:2px 2px 0 #000; flex-shrink:0; vertical-align:middle;}
.clan-emb.sm{width:26px; height:26px; font-size:14px;} .clan-emb.lg{width:58px; height:58px; font-size:30px; border-width:3px;}
.clan-ctag{font-family:'Press Start 2P',monospace; font-size:7px; padding:3px 5px; border:1px solid var(--c); color:var(--c); vertical-align:middle;}
.clan-tag{font-family:'Press Start 2P',monospace; font-size:7px; color:var(--c, var(--accent-cyan)); margin-right:5px;}
.clan-link{background:none; border:none; color:var(--text-primary); font-family:'VT323',monospace; font-size:17px; cursor:pointer; padding:0; text-align:left;}
.clan-link:hover{text-decoration:underline;}
.clan-pts{color:#FFD24A; font-weight:400;}
.clan-yours{font-size:14px; color:#FFD24A;}
.lb-table td.up{color:var(--success);} .lb-table td.dn{color:var(--danger);}
.clan-row{display:flex; align-items:center; gap:8px; padding:5px 0; flex-wrap:wrap;}
.clan-banner{display:flex; align-items:center; gap:14px; padding:14px; margin-bottom:14px; border:3px solid var(--c); box-shadow:5px 5px 0 #000;
  background:linear-gradient(135deg, color-mix(in srgb, var(--c) 28%, transparent), rgba(0,0,0,.5)), var(--bg-panel);}
.clan-bt{min-width:0; flex:1;} .clan-bt h2{font-family:'Press Start 2P',monospace; font-size:13px; font-weight:400; margin:0 0 4px; line-height:1.5;}
.clan-rank{text-align:right;} .clan-rank b{display:block; font-family:'Press Start 2P',monospace; font-size:16px; font-weight:400; color:#FFD24A;} .clan-rank small{color:var(--text-muted);}
.clan-kpis{grid-template-columns:repeat(4, 1fr) !important; margin-bottom:14px;}
@media (max-width:620px){ .clan-kpis{grid-template-columns:1fr 1fr !important;} }
.clan-role{font-family:'Press Start 2P',monospace; font-size:5px; padding:2px 4px; border:1px solid; margin-left:6px; color:var(--text-muted);}
.clan-role.leader{color:#FFD24A;} .clan-role.officer{color:var(--accent-cyan);}
.clan-acts{display:inline-flex; gap:5px; flex-wrap:wrap; justify-content:flex-end;} .clan-acts .btn{padding:5px 7px; font-size:6px;}
.clan-embs{display:flex; gap:6px; flex-wrap:wrap;} .clan-embs button{width:36px; height:36px; font-size:18px; background:#000; border:2px solid var(--border); cursor:pointer;} .clan-embs button.on{border-color:#FFD24A;}
.clan-cols{display:inline-flex; gap:6px; flex-wrap:wrap; vertical-align:middle;} .clan-cols button{width:26px; height:26px; border:2px solid #000; cursor:pointer; padding:0;} .clan-cols button.on{outline:2px solid var(--text-primary); outline-offset:1px;}
.clan-st{display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--border);}
.clan-st .rk{font-size:18px;} .clan-st b{font-size:20px;}
.mini-flag.clan{background:var(--accent-magenta); color:#fff;} .sheet-ta.clan{border-color:var(--accent-magenta); color:var(--accent-magenta);}

/* =====================================================================================
   HOST DASHBOARD
   ===================================================================================== */
.dash-kpis{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:14px;}
@media (max-width:760px){ .dash-kpis{grid-template-columns:1fr 1fr;} }
.dash-k b{font-size:21px !important; overflow-wrap:anywhere;} .dash-k em{display:block; font-style:normal; font-size:13px; color:var(--text-muted);}
.dash-hi{color:#3DDC97 !important;} .dash-gold{color:#FFD24A !important;}
.dash-chart{display:flex; align-items:flex-end; gap:4px; height:140px; border-bottom:1px solid var(--border); padding-bottom:0; margin-bottom:22px;}
.dash-chart div{flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:2px; position:relative;}
.dash-chart i{display:block; width:40%; min-height:2px;} .dash-chart i.r{background:#3DDC97;} .dash-chart i.p{background:#FFD24A;}
.dash-chart em{position:absolute; bottom:-18px; font-style:normal; font-size:11px; color:var(--text-muted);}
.dash-leg .r{color:#3DDC97;} .dash-leg .p{color:#FFD24A;}
.dash-funnel > div{display:grid; grid-template-columns:150px 1fr 60px; gap:8px; align-items:center; font-size:15px; margin:6px 0;}
.dash-funnel b{font-weight:400; text-align:right;}
.dash-heat{display:grid; grid-template-columns:repeat(24, 1fr); gap:2px;} .dash-heat span{height:20px; background:var(--bg-panel-alt);}
.dash-heatl{display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); margin-top:4px;}
.dash-ins{border-left:3px solid #3DDC97; background:var(--bg-panel-alt); padding:7px 10px; margin:6px 0; font-size:16px;}
.dash-st{font-size:13px; color:var(--text-muted);} .dash-st.live{color:#3DDC97;} .dash-st.upcoming{color:var(--accent-cyan);} .dash-st.cancelled{color:var(--danger);}

/* =====================================================================================
   PROMO IMAGE WINDOW
   ===================================================================================== */
.promo-dlg{width:min(960px, 100%) !important;}
.promo-b{display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 220px); overflow:auto;}
.promo-ctl{display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--text-muted);}
.promo-cv{display:block; width:100%; height:auto; border:3px solid #000; box-shadow:5px 5px 0 #000; background:#000;}

/* ---------- clan headings (title left, reset time right) and settings ---------- */
.clan-h3{display:flex !important; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.clan-reset{font-family:'VT323',monospace; font-size:15px; color:var(--text-muted); letter-spacing:0;}
.clan-hub .panel .cta-row{margin-top:12px;}
.clan-check{display:flex; align-items:center; gap:8px; font-size:16px; color:var(--text-muted); margin:6px 0 12px; cursor:pointer;}
.clan-check input{width:18px; height:18px; accent-color:var(--accent-amber);}

/* ---------- clan chat ---------- */
.clan-chat{margin-top:14px; position:relative;}
.chat-pin{display:flex; align-items:flex-start; gap:10px; padding:10px; margin-bottom:10px; background:color-mix(in srgb, #FFD24A 10%, var(--bg-panel-alt)); border:1px solid #FFD24A; font-size:17px;}
.chat-pin small{display:block; color:var(--text-muted); font-size:13px;}
.chat-pin-ic{font-size:18px;} .chat-pin > div{flex:1; min-width:0; overflow-wrap:anywhere;}
.chat-pin-acts{display:inline-flex; gap:6px; flex-shrink:0;}
.chat-pin.editing textarea{flex:1; min-height:48px; background:var(--bg-panel-alt); border:1px solid var(--border); color:var(--text-primary); font-family:'VT323',monospace; font-size:17px; padding:6px 8px;}
.chat-pinbtn{margin-bottom:10px;}
.chat-list{height:360px; overflow-y:auto; padding:6px 8px; background:var(--bg); border:1px solid var(--border); display:flex; flex-direction:column; gap:6px; overscroll-behavior:contain;}
.chat-older{align-self:center; margin:4px 0;}
.chat-start{align-self:center; margin:4px 0; font-size:14px; color:var(--text-muted);}
.chat-msg{padding:6px 8px; background:var(--bg-panel); border-left:3px solid var(--border); position:relative;}
.chat-msg.me{border-left-color:var(--accent-amber); background:color-mix(in srgb, var(--accent-amber) 7%, var(--bg-panel));}
.chat-msg.del .chat-text{color:var(--text-muted); font-style:italic;}
.chat-meta{display:flex; align-items:baseline; gap:8px; font-size:15px;}
.chat-meta b{font-weight:400; color:var(--accent-cyan);} .chat-msg.me .chat-meta b{color:var(--accent-amber);}
.chat-meta small{color:var(--text-muted); font-size:13px;}
.chat-acts{margin-left:auto; display:inline-flex; gap:4px; opacity:0; transition:opacity .12s;}
.chat-msg:hover .chat-acts,.chat-msg:focus-within .chat-acts{opacity:1;}
@media (hover:none){ .chat-acts{opacity:1;} }
.chat-act{background:none; border:1px solid var(--border); color:var(--text-muted); font-size:12px; padding:1px 5px; cursor:pointer; font-family:'VT323',monospace;}
.chat-act:hover{color:var(--text-primary); border-color:var(--text-primary);}
.chat-text{font-size:17px; line-height:1.3; overflow-wrap:anywhere; white-space:pre-wrap;}
.chat-unread{display:flex; align-items:center; gap:8px; margin:4px 0; color:var(--accent-magenta); font-size:14px;}
.chat-unread::before,.chat-unread::after{content:''; flex:1; height:1px; background:var(--accent-magenta);}
.chat-jump{position:absolute; right:24px; bottom:118px; z-index:2;}
.chat-jump[hidden]{display:none;}
.chat-muted{color:#FFB020; font-size:15px; margin:8px 0 0;}
.chat-send{display:flex; gap:8px; align-items:flex-end; margin-top:10px;}
.chat-send textarea{flex:1; min-height:40px; max-height:120px; resize:none; box-sizing:border-box; background:var(--bg-panel-alt); border:1px solid var(--border); color:var(--text-primary);
  font-family:'VT323',monospace; font-size:17px; padding:9px 10px; outline:none;}
.chat-send textarea:focus{border-color:var(--accent-cyan);}
.chat-count{font-size:13px; color:var(--text-muted); min-width:52px; text-align:right;}
.chat-rules{margin:6px 0 0;}

/* ---------- Token WAR chat ---------- */
.war-chat{position:relative; overflow:hidden;}
.chat-sys{align-self:center; max-width:92%; text-align:center; font-size:14px; color:#FFD24A; padding:2px 10px; border:1px dashed rgba(255,210,74,.45);}
.chat-msg.host{border-left-color:#3DDC97; background:rgba(61,220,151,.07);}
.chat-msg.host .chat-meta b{color:#3DDC97;}
.chat-host{font-family:'Press Start 2P',monospace; font-size:5px; padding:2px 4px; background:#3DDC97; color:#04140c;}
.chat-ent{font-family:'Press Start 2P',monospace; font-size:5px; padding:2px 4px; border:1px solid #FFD24A; color:#FFD24A;}
.war-pin{background:rgba(61,220,151,.1); border-color:#3DDC97;}
.war-reacts{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:8px 0;}
.war-react{font-size:18px; padding:4px 10px; background:var(--bg-panel-alt); border:2px solid var(--border); color:var(--text-primary); cursor:pointer; font-family:'VT323',monospace;}
.war-react:hover{border-color:#FFD24A;} .war-react[disabled]{opacity:.5; cursor:default;}
.war-react span{font-size:13px; color:var(--text-muted); margin-left:4px;}
.war-float{position:absolute; bottom:90px; font-size:26px; pointer-events:none; animation:war-up 1.6s ease-out forwards; z-index:3;}
@keyframes war-up{from{transform:translateY(0); opacity:1;} to{transform:translateY(-200px); opacity:0;}}
.chat-gate{padding:10px; border:1px dashed #FFD24A; color:#FFD24A; font-size:16px;}
.chat-closed{padding:10px; border:1px solid var(--border); background:var(--bg-panel-alt); font-size:16px; color:var(--text-muted);}

/* ---------- price bar: the house token's price, when the server sends one ---------- */
.or-usd{color:var(--text-muted);}
@media (max-width:620px){ .or-usd{display:none;} }

/* ---------- update mode: the players' banner, and the console card ---------- */
.upd-banner{position:sticky; top:0; z-index:1100; display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; padding:9px 14px;
  background:#3a2a05; color:#FFD24A; border-bottom:2px solid #000; font-size:17px; text-align:center;}
.upd-banner b{font-weight:400; color:#fff;} .upd-banner .upd-cd{font-family:'Press Start 2P',monospace; font-size:11px; color:#FFD24A;}
.upd-banner .upd-why{color:#e8d5a0;}
.upd-banner.off{background:#3a1405; color:#FFB020;}
.upd-banner[hidden]{display:none;}
.upd-state{padding:10px; margin:0 0 8px; border:2px solid var(--border); text-align:center; font-size:16px; color:var(--text-muted);}
.upd-state.wait{border-color:#FFB020; color:#FFB020;} .upd-state.safe{border-color:var(--success); color:var(--success);}

/* ---------- chain switcher (js/chainswitch.js): the network chip opens a menu of the WARs sites ---------- */
.status-bar{position:relative;}
.sb-net.sb-switch{cursor:pointer; background:none; border:none; font:inherit; padding:0 10px 0 12px;}
.sb-net.sb-switch:hover,.sb-net.sb-switch[aria-expanded="true"]{background:var(--bg-panel-alt);}
.sb-net.sb-switch:focus-visible{outline:2px solid var(--text-primary); outline-offset:-2px;}
.sb-caret{font-size:14px; color:var(--text-muted); transition:transform .15s;}
.sb-net[aria-expanded="true"] .sb-caret{transform:rotate(180deg);}
.net-menu{position:absolute; top:calc(100% + 8px); left:-2px; width:340px; max-width:calc(100vw - 32px); z-index:1001; box-sizing:border-box;
  background:var(--bg-panel); color:var(--text-primary); border:2px solid var(--accent-amber); box-shadow:0 12px 32px rgba(0,0,0,.6); padding:12px; font-family:'VT323',monospace;}
.net-menu[hidden]{display:none;}
.net-menu h4{font-family:'Press Start 2P',monospace; font-size:8px; font-weight:400; color:var(--text-muted); margin:2px 2px 10px; text-transform:uppercase; letter-spacing:.06em;}
.nm-opt{display:grid; grid-template-columns:36px 1fr auto; gap:3px 10px; align-items:center; width:100%; text-align:left; padding:8px; margin-top:4px;
  background:none; border:1px solid transparent; color:var(--text-primary); font:inherit; font-size:18px; cursor:pointer;}
.nm-opt:hover:not([disabled]),.nm-opt:focus-visible{border-color:var(--border); background:var(--bg-panel-alt); outline:none;}
.nm-opt[aria-current="true"]{border-color:var(--accent-amber); cursor:default;}
.nm-opt[disabled]{opacity:.55; cursor:not-allowed;}
.nm-badge{width:36px; height:36px; display:grid; place-items:center; grid-row:span 2; font-family:'Press Start 2P',monospace; font-size:10px;}
.nm-badge.logo{display:block; object-fit:contain; border-radius:8px;} /* the chain's own logo (network.json "logo") */
.sb-net .sb-logo{width:16px; height:16px; border-radius:4px; object-fit:contain; flex:none;}
.nm-name{font-size:21px; line-height:1;}
.nm-name small{color:var(--text-muted); font-size:17px;}
.nm-pill{font-size:15px; padding:1px 7px; border:1px solid var(--border); color:var(--text-muted); white-space:nowrap;}
.nm-pill.here{border-color:var(--accent-amber); color:var(--accent-amber);}
.nm-sub{grid-column:2 / 4; font-size:16px; color:var(--text-muted); line-height:1.1;}
.nm-sub.ok{color:var(--success);}
.nm-foot{margin:10px 2px 0; padding-top:9px; border-top:1px solid var(--border); font-size:16px; color:var(--text-muted); line-height:1.15;}
@media (max-width:560px){ .net-menu{position:fixed; top:calc(env(safe-area-inset-top, 0px) + 64px); left:16px; right:16px; width:auto; max-width:none;} }
:root.no-motion .sb-caret{transition:none;}

/* ---- verified names (SITE.names): verified mark (green ✓) and the small tag next to a custom name ("vish ✓vishnu") ---- */
.ck{color:var(--success); font-weight:400;}
.bn-tag{display:inline-flex; align-items:center; gap:2px; margin-left:4px; padding:0 4px; font-size:.82em; line-height:1.25; color:var(--accent-violet);
  border:1px solid color-mix(in srgb, var(--accent-violet) 45%, transparent); background:color-mix(in srgb, var(--accent-violet) 10%, transparent);
  white-space:nowrap; max-width:11em; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; cursor:help;}
.bn-tag .ck{flex:none;}
@media (max-width:600px){ .bn-tag{font-size:0; padding:0 3px; gap:0;} .bn-tag .ck{font-size:13px;} } /* phones: just the ✓ */
/* profile: verified name box */
.bn-box{border:2px solid var(--border); background:var(--bg-panel-alt); padding:10px 12px; display:flex; flex-direction:column; gap:6px; max-width:520px;}
.bn-box .bn-big{font-size:1.25em; color:var(--accent-violet);} .bn-box .bn-ok{color:var(--success);}
.bn-box .bn-dim{color:var(--text-muted);} .bn-box a{color:var(--accent-violet);}
.bn-box label.bn-chk{display:flex; align-items:center; gap:8px; cursor:pointer;}

/* =====================================================================================
   MEME ARENA: King of the Hill, raids, Flash / Holders tags, logos
   ===================================================================================== */
img.war-logo.has-img,img.king-logo.has-img{object-fit:cover; image-rendering:pixelated; background:#000;}
.war-logo.big{width:40px; height:40px; font-size:14px;}
.war-logo.open{background:transparent; border:2px dashed var(--text-muted); color:var(--text-muted);}
.mini-flag.raid{background:#FF4FD8; color:#fff;} .mini-flag.flash{background:#FFD24A;}
.mini-chip.hold{color:#27F2FF; border-color:#27F2FF;}
.king{position:relative; border-color:#FFD24A !important; box-shadow:0 0 0 2px #000, 0 0 24px rgba(255,210,74,.18); margin-bottom:6px;}
.king-crown{font-family:'Press Start 2P',monospace; font-size:10px; color:#FFD24A; margin-bottom:10px;}
.king-main{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.king-logo{width:96px; height:96px; border-radius:6px; display:grid; place-items:center; font-family:'Press Start 2P',monospace; font-size:34px; color:#120808; border:3px solid #FFD24A;}
.king-sym{font-family:'Press Start 2P',monospace; font-size:22px; line-height:1.3;}
.king-why{color:var(--text-muted); font-size:16px;}
.king-stats{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:6px;}
.king-stats small{display:block; font-size:13px; color:var(--text-muted);} .king-stats b{font-weight:400; font-size:20px;}
.king-q{margin-top:10px; display:flex; flex-direction:column; gap:3px;} .king-q small{color:var(--text-muted);}
.king-qi{background:none; border:none; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:0;} .king-qi i{font-style:normal; color:#FFB020;}
.king.empty p{margin:0 0 10px;}
.raid-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px;}
.raid-card{display:flex; flex-direction:column; gap:8px; text-align:left; font:inherit; color:inherit; cursor:pointer; background:var(--bg-panel,#0f0a0a); border:2px solid #FF4FD8; padding:10px 12px;}
.raid-card:hover,.raid-card:focus-visible{box-shadow:0 0 0 2px #000, 0 0 16px rgba(255,79,216,.35);}
.raid-tags{display:flex; flex-wrap:wrap; gap:5px;}
.rt{font-family:'Press Start 2P',monospace; font-size:6px; padding:3px 5px; border:1px solid var(--text-muted); color:var(--text-muted);}
.rt.k{border-color:#FFD24A; color:#FFD24A;} .rt.f{border-color:#FFD24A; color:#0a0a0a; background:#FFD24A;} .rt.g{border-color:#FF4FD8; color:#FF4FD8;} .rt.h{border-color:#27F2FF; color:#27F2FF;}
.raid-vs{display:flex; flex-direction:column; align-items:flex-start; gap:2px;}
.raid-vs .vs{font-family:'Press Start 2P',monospace; font-size:8px; color:#FF4FD8;}
.raid-side{display:inline-flex; align-items:center; gap:5px;} .raid-side b{font-weight:400;} .raid-side small{color:var(--text-muted); font-size:14px;}
.raid-side.lead b{color:#FFD24A;} .raid-side.wait{opacity:.7;}
.raid-when{font-size:15px; color:var(--text-muted);}
.raid-head{margin-bottom:12px;} .raid-title{font-family:'Press Start 2P',monospace; font-size:18px; line-height:1.5; margin:8px 0 4px; word-break:break-word;}
.raid-clock{font-size:20px; color:#FFD24A;}
.raid-sides{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px;}
.raid-sidep{display:flex; flex-direction:column; gap:8px;} .raid-sidep.win{border-color:#FFD24A !important; box-shadow:0 0 18px rgba(255,210,74,.25);} .raid-sidep.wait{border-style:dashed;}
.raid-sh{display:flex; align-items:center; gap:8px;} .raid-sh small{color:var(--text-muted);} .raid-sh .rt{margin-left:auto;}
.raid-meter{position:relative; height:26px; background:#140c0c; border:1px solid var(--border);}
.raid-meter i{position:absolute; left:0; top:0; bottom:0; transition:width .6s;} .raid-meter b{position:relative; font-weight:400; padding:0 8px; line-height:26px; font-size:18px; text-shadow:1px 1px 0 #000;}
.raid-nums{display:flex; flex-wrap:wrap; gap:4px 16px;} .raid-nums small{display:block; font-size:13px; color:var(--text-muted);} .raid-nums b{font-weight:400;}
.raid-badge{color:#FFD24A;}
.raid-feed div{font-size:15px; padding:2px 0; border-bottom:1px dashed var(--border);} .raid-feed small{color:var(--text-muted);}
.raid-result{border-color:#FFD24A !important; margin-bottom:12px;}
.lb-note.urgent{color:#FFB020;} .flash-note{color:#FFD24A;}
.raid-link{align-self:flex-start;}
.war-switch{font:inherit; font-size:15px; cursor:pointer; padding:6px 10px; background:#0c0c0c; color:var(--text-muted); border:2px solid var(--border); text-align:left;}
.war-switch.on{color:#0a0a0a; background:#3DDC97; border-color:#3DDC97;}
.panel.raid-on{border-color:#FF4FD8 !important;}
.war-logobox{display:flex; align-items:center; gap:10px; flex-wrap:wrap; border:1px dashed var(--border); padding:8px 10px; margin:8px 0;}
.war-logobox > div{flex:1; min-width:180px;} .war-logobox small{display:block; color:var(--text-muted); font-size:14px;}
.war-logoprev{flex:1; display:flex; flex-direction:column; gap:8px;}
.war-logoprev-row{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;}
.war-logoprev figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:4px;} .war-logoprev figcaption{font-size:12px; color:var(--text-muted);}
.war-logo-lg{width:128px; height:128px; border-radius:12px; border:1px solid var(--border); background:var(--bg-2, #0004); object-fit:cover;}
.war-logo-pix{width:48px; height:48px; image-rendering:pixelated; background:#000; border-radius:6px;}
.arena-skin{display:flex; gap:10px; align-items:flex-start;} .arena-skin img{image-rendering:pixelated; border:1px solid var(--border); background:#000;} .arena-skin .op-kv{flex:1; border-bottom:none;}

/* ---------- Phone play mode ----------
   While a Cup run or an Arena match is on screen (html.playing, set by goto in app.js), phones hide the site around
   the game: the ribbon, oracle bar, header, banners and long help lines. The board is sized to the screen that's
   left, and the touch buttons sit fixed at the bottom, in the thumb zone. Desktop never changes. */
.brk-pad{display:none;}
@media (max-width:760px), (pointer:coarse){
  html.playing .testnet-ribbon, html.playing .oracle-bar, html.playing body > header, html.playing .cab-marquee, html.playing .cab-coin,
  html.playing #modeBar, html.playing #announce, html.playing footer.tiny-note, html.playing #runMode, html.playing .brk-help, html.playing #arcHelp{display:none !important;}
  html.playing, html.playing body{overscroll-behavior:none;}
  html.playing .wrap{padding:calc(6px + env(safe-area-inset-top, 0px)) 8px calc(150px + env(safe-area-inset-bottom, 0px));}
  /* toasts: small, just above the buttons, never over the board or the score (Arena: at the top) */
  html.playing .toast{bottom:calc(158px + env(safe-area-inset-bottom, 0px)); font-size:15px; padding:5px 12px; opacity:.94;}
  html.playing:has(#game.active) .toast{top:calc(8px + env(safe-area-inset-top, 0px)); bottom:auto;}
  html.playing #compPlay .cta-row{order:-1; width:100%; max-width:720px; justify-content:flex-end !important; margin:0;}
  html.playing #compPlay .cta-row .btn{padding:6px 10px;}
  /* the bottom bar: the game's touch buttons, always on screen */
  html.playing .arc-pads:not(:empty), html.playing .stk-touch:not([hidden]), html.playing .brk-pad{position:fixed; left:0; right:0; bottom:0; z-index:40; box-sizing:border-box; max-width:none; margin:0;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background:var(--bg); border-top:2px solid var(--border);}
  html.playing .arc-pads:not(:empty){display:flex;}
  html.playing .arc-pads button{padding:22px 0; font-size:13px;}
  html.playing .stk-touch:not([hidden]){display:grid;}
  html.playing .stk-touch button{height:58px;}
  /* Asteroid Miner, Flap, Invader Wave, Gem Pump, Rainbow Road Runner */
  html.playing .arc-wrap{gap:6px;}
  html.playing .arc-board-wrap{width:min(100%, calc((100dvh - 240px) * 4 / 3)); box-shadow:none;}
  html.playing .arc-hud span{padding:6px 7px;}
  /* Block Breaker: a strip under the board moves the paddle too */
  html.playing .brk-wrap{gap:6px; margin-top:0;}
  html.playing .brk-hud span{padding:5px 6px;}
  html.playing #brkBoard{width:min(92vw, 400px, calc((100dvh - 250px) * 320 / 440));}
  html.playing .brk-wrap:not([hidden]) .brk-pad{display:flex; align-items:center; justify-content:center; height:72px; font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted); touch-action:none; user-select:none; -webkit-user-select:none;}
  html.playing .brk-board-wrap, html.playing .stk-board-wrap{box-shadow:none;}
  /* Block Stacker: the side columns become a strip above the board, with HOLD and NEXT beside it */
  html.playing .stk-wrap{display:grid; grid-template-columns:52px 1fr 1fr 1fr 52px; gap:5px; align-items:start; width:100%; max-width:430px; margin:0 auto;}
  html.playing .stk-side{display:contents;}
  html.playing .stk-box{padding:3px 5px; font-size:14px; min-width:0;}
  html.playing .stk-box b{font-size:15px;}
  html.playing .stk-box small{font-size:6px; margin-bottom:2px;}
  html.playing .stk-left > :nth-child(1){grid-row:2; grid-column:1;}
  html.playing .stk-left > :nth-child(2){grid-row:1; grid-column:1 / 3;}
  html.playing .stk-left > :nth-child(3){grid-row:1; grid-column:3;}
  html.playing .stk-left > :nth-child(5){grid-row:1; grid-column:4;}
  html.playing .stk-left > :nth-child(4), html.playing .stk-left > :nth-child(6), html.playing .stk-left > :nth-child(7), html.playing .stk-keys{display:none !important;}
  html.playing .stk-side:not(.stk-left) > :nth-child(1){grid-row:2; grid-column:5;}
  html.playing #stkQuit{grid-row:1; grid-column:5; padding:4px 2px; font-size:7px; line-height:1.4; align-self:stretch;}
  html.playing .stk-board-wrap{grid-row:2; grid-column:2 / 5; justify-self:center;}
  html.playing #stkBoard{width:min(calc(100vw - 140px), calc((100dvh - 250px) / 2));}
  /* Arena matches */
  html.playing .wrap:has(#game.active){padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
  html.playing #game .section-head{margin:2px 0 6px;}
  html.playing #game > .panel{padding:8px;}
  html.playing #game .game-hud{margin-bottom:4px; gap:8px;}
  html.playing #countdown{min-height:22px !important; margin:0;}
  html.playing #game .hw-hint{display:none;}
  html.playing #game .hw-legend{font-size:15px; gap:10px; margin-bottom:4px;}
  html.playing #game .hw-canvas{margin-bottom:8px;}
  html.playing #game .hw-pong .hw-canvas{max-width:calc((100dvh - 200px) * 5 / 3);}
  html.playing #game .hw-snake .hw-canvas{max-width:calc((100dvh - 320px) * 1.6);}
  html.playing #game .hw-hodl .hw-canvas{max-width:calc((100dvh - 340px) * 1.37);}
  html.playing #game .hw-bullrun .hw-canvas{max-width:calc(100dvh - 380px);}
  html.playing #game .hw-nodeassault .hw-canvas{max-width:calc((100dvh - 340px) * 640 / 736);}
  html.playing #game .hodl-touch{margin-bottom:0;}
}
/* a phone on its side leaves too little height for the board and the buttons: ask for upright */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  html.playing body::after{content:'↻  Turn your phone upright to play'; position:fixed; inset:0; z-index:990; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center;
    background:var(--bg); color:var(--accent-amber); font-family:'Press Start 2P',monospace; font-size:13px; line-height:1.8;}
}

/* ---------- Practice (trial mode): practice chips, no wallet (js/practice.js) ----------
   One fixed "practice" blue on every theme, so practising never looks like real play. */
:root{--prac:#2FC8FF; --on-prac:#02121A;}
.prac-ribbon{display:none; align-items:center; justify-content:center; gap:12px; padding:6px 12px; background:var(--prac); color:var(--on-prac);
  font-family:'Press Start 2P',monospace; font-size:9px; line-height:1.6; text-align:center;}
html.practice .prac-ribbon{display:flex;}
.prac-ribbon button{font:inherit; font-size:8px; padding:4px 8px; min-height:28px; background:transparent; color:var(--on-prac); border:2px solid var(--on-prac); cursor:pointer;}
.prac-chips{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; margin-right:8px; border:2px solid var(--prac); color:var(--prac); font-size:16px; white-space:nowrap;}
.prac-chips i{width:10px; height:10px; border-radius:50%; border:2px solid var(--prac); box-sizing:border-box;}
.try-btn{height:38px; box-sizing:border-box; padding:0 12px; margin-right:8px; cursor:pointer; font-family:'Press Start 2P',monospace; font-size:8px; text-transform:uppercase;
  color:var(--prac); background:transparent; border:2px solid var(--prac);}
@media (max-width:420px){ .try-btn{padding:0 8px; font-size:7px;} }
.ld-cta.prac{background:var(--prac); color:var(--on-prac);}
.btn.prac-go{background:var(--prac); color:var(--on-prac); border-color:var(--prac);}
.btn.prac-real{background:var(--success); color:#04130A; border-color:var(--success);}
/* preview (WALLET_OFF): the "wallet play is on testnet" bar on every page */
.wallet-off{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:16px; padding:12px 14px; border:1px solid var(--accent-violet); border-radius:10px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent-amber) 18%, transparent), color-mix(in srgb, var(--accent-violet) 12%, transparent));}
.wallet-off p{margin:0; flex:1 1 240px; min-width:0;}
.wallet-off b{color:var(--accent-violet);}
.wallet-off .wo-btn{white-space:nowrap; text-decoration:none;}
a.connect-btn{display:inline-flex; align-items:center; text-decoration:none;}
.modal a.btn{color:var(--on-accent); text-decoration:none; display:inline-flex; align-items:center; justify-content:center;}
.ask-try{margin:14px 0 0; text-align:center; color:var(--text-muted);}
.linkish{font:inherit; color:var(--prac); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer;}
.prac-note{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:0 0 14px; padding:10px 12px; border:1px solid var(--prac); border-left-width:4px; color:var(--text-primary); background:var(--bg-panel-alt);}
.prac-note b{font-family:'Press Start 2P',monospace; font-size:8px; color:var(--prac);}
.cur-badge.prac{color:var(--prac); border-color:var(--prac);}
.crest-practice{background:var(--prac);}
.prac-panel{border-color:var(--prac);}
.prac-panel h3{margin:0 0 8px; color:var(--prac);}
.prac-host{border-color:var(--prac); margin-bottom:18px;}
.prac-host h3{margin:0 0 4px;}
.prac-host .war-form{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 14px;}
@media (max-width:560px){ .prac-host .war-form{grid-template-columns:1fr;} }
#pracArena{display:none;} html.practice #pracArena{display:block;}
html.practice #lobby :is(#notReady, #arenaGate, #createBox, #oppHead, #oppHead + .game-pick-head, .cur-filter, #gameFilter, .filter-row, #oppGrid, #pager, #oppEmpty, #ahPicks, .ah-wallbar, .ah-filters, #ahLower){display:none;}
.prac-stage{min-height:200px;}
@media (max-width:760px), (pointer:coarse){ html.playing .prac-ribbon{display:none;} }

/* ---- hosted Cups (host.js): flag on the card, the host's list, recruit badges ---- */
.mini-flag.hosted{background:#3DDCFF; color:#0a0a0a;} /* its own colour on every theme: not a tier, clan, raid or time-attack flag */
.host-list{display:flex; flex-direction:column; gap:10px;}
.host-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border);}
.host-row:last-child{border-bottom:0;}
.host-row-main{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 220px;}
.host-row-main small{color:var(--text-muted); font-size:13px;}
.host-row-main .host-state{color:var(--text);}
.host-badges{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px;}
.host-badge{font-size:13px; padding:4px 8px; border:1px solid var(--border); border-radius:4px; color:var(--text-muted); opacity:.6;}
.host-badge.on{border-color:var(--accent-amber); color:var(--accent-amber); opacity:1;}
.host-check{display:flex; gap:12px; align-items:flex-start; padding:12px; margin:4px 0 14px; border:1px solid var(--border); border-radius:6px; cursor:pointer;}
.host-check input{width:20px; height:20px; flex:none; margin-top:2px;}
.host-check span{display:flex; flex-direction:column; gap:4px;}
.host-check small{color:var(--text-muted); font-size:13px;}
.host-row-main .host-link{color:var(--accent-amber); word-break:break-all;}
.host-week { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--text-muted); }
.host-week b { color: var(--text); }
#hostedPanel textarea { width: 100%; font-family: monospace; font-size: 12px; }
.host-row .host-toggle{min-width:250px; justify-content:center; text-align:center;}