:root{
    --bg: #14111c;
    --panel: #1f1829;
    --panel-2: #251c33;
    --line: #3a2e4d;
    --brick: #9c5544;
    --magenta: #e63fa1;
    --cyan: #49d6e6;
    --gold: #ffcf3f;
    --green: #59d98a;
    --red: #d6493f;
    --text: #f3eef7;
    --muted: #b3a6c4;
    --topbar-h: 60px;
    --footer-h: 46px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}

  html, body{
    height:100dvh;
    height:100vh;
    overflow:hidden;
    background:var(--bg);
    color:var(--text);
    font-family:'Space Grotesk', -apple-system, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  html[lang="zh"] body{ font-family:'Noto Sans SC','Space Grotesk',-apple-system,sans-serif; }
  .pixel{ font-family:'Press Start 2P', monospace; }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  button{ font-family:inherit; cursor:pointer; }
  ::selection{ background:var(--magenta); color:#fff; }

  .app{
    height:100dvh; height:100vh;
    display:grid;
    grid-template-rows: var(--topbar-h) 1fr var(--footer-h);
    grid-template-areas: "top" "main" "foot";
  }

  /* ================= topbar ================= */
  .topbar{
    grid-area:top;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px;
    background:rgba(20,17,28,.9);
    border-bottom:1px solid var(--line);
    gap:12px; min-width:0;
  }
  .brand{
    font-family:'Press Start 2P',monospace; font-size:13px; color:var(--gold);
    white-space:nowrap; text-decoration:none; flex-shrink:0;
  }
  .tabnav{ display:flex; gap:6px; flex-shrink:1; min-width:0; overflow:hidden; }
  .tabnav button{
    background:none; border:1px solid transparent; color:var(--muted);
    font-size:13px; padding:8px 11px; white-space:nowrap;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .tabnav button:hover{ color:var(--text); }
  .tabnav button.active{ color:var(--gold); border-color:var(--line); background:var(--panel); }
  .top-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

  .lang-toggle{ display:flex; border:1px solid var(--line); overflow:hidden; flex-shrink:0; }
  .lang-toggle button{
    background:transparent; border:none; color:var(--muted); font-size:11.5px; padding:8px 10px;
    transition:background .15s ease, color .15s ease;
  }
  .lang-toggle button.active{ background:var(--gold); color:#231704; font-weight:700; }
  .lang-toggle button:not(.active):hover{ color:var(--text); }

  .social-icons{ display:flex; gap:6px; }
  .social-icons a{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border:1px solid var(--line); color:var(--muted);
    text-decoration:none; font-size:12.5px; transition:color .15s ease, border-color .15s ease;
    flex-shrink:0;
  }
  .social-icons a:hover{ color:var(--cyan); border-color:var(--cyan); }

  .btn{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:600;
    padding:8px 13px; border:1px solid transparent; text-decoration:none;
    transition:transform .12s ease, box-shadow .12s ease; white-space:nowrap;
  }
  .btn-primary{ background:var(--gold); color:#231704; border:2px solid #000; box-shadow:3px 3px 0 #000; }
  .btn-primary:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 #000; }
  .btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
  .btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
  .btn-danger{ background:transparent; color:var(--red); border:1px solid var(--red); }
  .btn-danger:hover{ background:var(--red); color:#fff; }
  .btn[disabled]{ opacity:.5; cursor:not-allowed; pointer-events:none; }

  /* ---------- wallet widget ---------- */
  .wallet-widget{ position:relative; flex-shrink:0; }
  .wallet-chip{
    display:flex; align-items:center; gap:8px;
    background:var(--panel); border:1px solid var(--line);
    padding:6px 10px 6px 6px; font-size:12px; cursor:pointer;
  }
  .wallet-chip:hover{ border-color:var(--cyan); }
  .net-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; }
  .net-dot.ok{ background:var(--green); box-shadow:0 0 7px var(--green); }
  .net-dot.wrong{ background:var(--gold); box-shadow:0 0 7px var(--gold); }
  .wallet-chip .addr{ font-family:'Press Start 2P',monospace; font-size:10px; color:var(--text); }
  .wallet-chip .bal{ color:var(--muted); font-size:11px; }

  .wallet-dropdown{
    position:absolute; top:calc(100% + 8px); right:0; z-index:60;
    background:var(--panel); border:1px solid var(--line);
    min-width:250px; padding:14px; display:none;
  }
  .wallet-dropdown.open{ display:block; }
  .wallet-dropdown .row{ display:flex; justify-content:space-between; font-size:12px; padding:7px 0; border-bottom:1px solid var(--line); color:var(--muted); }
  .wallet-dropdown .row b{ color:var(--text); font-weight:600; }
  .wallet-dropdown .actions{ display:flex; gap:8px; margin-top:12px; }
  .wallet-dropdown .actions .btn{ flex:1; justify-content:center; font-size:11px; padding:9px 6px; }
  .network-banner{
    display:flex; align-items:center; gap:8px;
    background:rgba(255,207,63,.08); border:1px solid rgba(255,207,63,.35);
    color:var(--gold); font-size:11px; padding:8px 10px; margin-bottom:10px;
  }

  /* ================= main: board + side panel ================= */
  .main{
    grid-area:main; display:grid; grid-template-columns: 1fr 340px;
    gap:14px; padding:14px; min-height:0;
  }
  .board-panel, .side-panel{
    background:var(--panel); border:1px solid var(--line);
    display:flex; flex-direction:column; min-height:0; overflow:hidden;
  }
  .panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px; border-bottom:1px solid var(--line); flex-shrink:0; gap:10px;
  }
  .panel-head h1{ font-size:14px; font-weight:700; }
  .panel-head .kicker{
    font-family:'Press Start 2P',monospace; font-size:9px; color:var(--brick);
    background:#2a1a17; border:1px solid #4a2a22; padding:4px 7px; flex-shrink:0;
  }
  html[lang="zh"] .panel-head .kicker{ font-family:'Noto Sans SC',sans-serif; font-weight:700; }
  .live-pill{ color:var(--cyan); font-size:11px; display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .live-pill::before{ content:""; width:7px; height:7px; background:var(--cyan); border-radius:50%; box-shadow:0 0 8px var(--cyan); }

  .sim-banner{
    display:flex; align-items:center; gap:8px; flex-shrink:0;
    padding:6px 16px; font-size:10.5px; color:var(--muted);
    background:var(--panel-2); border-bottom:1px solid var(--line);
  }
  .sim-banner .dot{ width:6px; height:6px; background:var(--gold); flex-shrink:0; }

  .stat-strip{ display:flex; gap:10px; padding:9px 16px; border-bottom:1px solid var(--line); flex-shrink:0; overflow-x:auto; }
  .stat-chip{ background:var(--panel-2); border:1px solid var(--line); padding:7px 11px; min-width:92px; flex-shrink:0; }
  .stat-chip b{ display:block; font-family:'Press Start 2P',monospace; font-size:12px; color:var(--cyan); }
  .stat-chip span{ font-size:9.5px; color:var(--muted); }

  .grid-wrap{ flex:1; min-height:0; padding:10px 16px 14px; }
  .grid{ height:100%; display:grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap:8px; }
  .card{
    position:relative; background:var(--panel-2); border:1px solid var(--line);
    overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
    transition:transform .12s ease, border-color .12s ease;
  }
  .card:hover{ transform:translateY(-2px); border-color:var(--cyan); }
  .card.selected{ outline:2px solid var(--cyan); outline-offset:-2px; }
  .card-art{ position:relative; flex:1; min-height:0; overflow:hidden; }
  .card-art img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
  .card-id{ position:absolute; top:3px; left:4px; font-size:9px; color:var(--muted); background:rgba(0,0,0,.55); padding:1px 4px; }
  .card-timer{ position:absolute; top:3px; right:4px; font-family:'Press Start 2P',monospace; font-size:9px; padding:2px 5px; color:#1a1220; background:var(--gold); }
  .card.state-idle .card-timer{ background:var(--gold); color:#1a1220; }
  .card.state-live .card-timer{ background:var(--magenta); color:#fff; animation:pulse 1s ease-in-out infinite; }
  .card.state-sold .card-timer, .card.state-burned .card-timer{ display:none; }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
  @media (prefers-reduced-motion: reduce){ .card.state-live .card-timer{ animation:none; } }
  .card-foot{ padding:5px 6px; font-size:9.5px; color:var(--muted); border-top:1px solid var(--line); background:var(--panel); display:flex; justify-content:space-between; gap:4px; }
  .card-foot b{ color:var(--gold); font-weight:600; }
  .card.state-sold{ opacity:.4; cursor:default; }
  .card.state-sold .card-art::after{ content:attr(data-sold-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Press Start 2P',monospace; font-size:9px; color:#fff; background:rgba(0,0,0,.6); text-align:center; }
  .card.state-burned{ opacity:.32; cursor:default; filter:grayscale(1); }
  .card.state-burned .card-art::after{ content:attr(data-burned-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Press Start 2P',monospace; font-size:8px; color:var(--brick); background:rgba(0,0,0,.6); text-align:center; }

  /* ================= side panel ================= */
  .side-tabs{ display:flex; border-bottom:1px solid var(--line); flex-shrink:0; }
  .side-tabs button{ flex:1; background:none; border:none; color:var(--muted); font-size:11px; padding:10px 4px; border-bottom:2px solid transparent; }
  .side-tabs button.active{ color:var(--gold); border-bottom-color:var(--gold); }
  .side-content{ flex:1; min-height:0; overflow-y:auto; padding:14px 16px; }
  .side-pane{ display:none; }
  .side-pane.active{ display:block; }
  .rule{ display:flex; gap:10px; margin-bottom:14px; }
  .rule .n{ font-family:'Press Start 2P',monospace; font-size:10px; color:var(--magenta); border:1px solid var(--magenta); width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .rule h3{ font-size:12.5px; margin-bottom:3px; }
  .rule p{ font-size:11.5px; color:var(--muted); line-height:1.45; }
  .split2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
  .split2 .card2{ background:var(--panel-2); border:1px solid var(--line); padding:10px; }
  .split2 .card2 .pct{ font-family:'Press Start 2P',monospace; color:var(--cyan); font-size:15px; display:block; margin-bottom:4px; }
  .split2 .card2 p{ font-size:10.5px; color:var(--muted); line-height:1.4; }
  .side-content p.body{ font-size:11.5px; color:var(--muted); line-height:1.5; margin-bottom:12px; }
  .dex-strip{ display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); padding:10px 12px; font-size:11px; color:var(--muted); }
  .dex-mark{ font-family:'Press Start 2P',monospace; font-size:10px; color:var(--bg); background:var(--cyan); padding:6px 8px; flex-shrink:0; }
  .dex-strip a{ color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(73,214,230,.4); }
  .chain-strip{ display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); padding:10px 12px; font-size:11px; color:var(--muted); margin-top:8px; }
  .chain-mark{ font-family:'Press Start 2P',monospace; font-size:9px; color:#0b1e21; background:var(--green); padding:6px 8px; flex-shrink:0; }

  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{ width:100%; text-align:left; background:none; border:none; color:var(--text); font-size:12px; font-weight:600; padding:11px 2px; display:flex; justify-content:space-between; gap:8px; }
  .faq-q .icon{ color:var(--gold); font-family:'Press Start 2P',monospace; font-size:11px; transition:transform .2s ease; }
  .faq-item.open .faq-q .icon{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .22s ease; font-size:11px; color:var(--muted); line-height:1.5; }
  .faq-item.open .faq-a{ padding-bottom:12px; }

  /* ================= footer ================= */
  .footer{ grid-area:foot; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-top:1px solid var(--line); background:rgba(20,17,28,.9); gap:12px; min-width:0; }
  .footer .fine{ font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .footer-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

  /* ================= bid drawer ================= */
  .drawer-overlay{ position:fixed; inset:0; background:rgba(10,8,14,.6); display:flex; align-items:flex-end; justify-content:center; z-index:100; opacity:0; pointer-events:none; transition:opacity .18s ease; }
  .drawer-overlay.open{ opacity:1; pointer-events:auto; }
  .drawer{ width:100%; max-width:640px; background:var(--panel); border:1px solid var(--line); border-bottom:none; padding:20px 22px; transform:translateY(16px); transition:transform .18s ease; max-height:82vh; overflow-y:auto; }
  .drawer-overlay.open .drawer{ transform:translateY(0); }
  .drawer-head{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
  .drawer-head img{ width:64px; height:64px; image-rendering:pixelated; border:1px solid var(--line); flex-shrink:0; }
  .drawer-head h2{ font-size:16px; margin-bottom:3px; }
  .drawer-head .status{ font-size:11.5px; color:var(--muted); }
  .drawer-close{ margin-left:auto; background:none; border:none; color:var(--muted); font-size:22px; line-height:1; align-self:flex-start; }
  .drawer-close:hover{ color:var(--text); }
  .drawer-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:9px 0; border-bottom:1px solid var(--line); }
  .drawer-row .v{ font-weight:700; color:var(--gold); }
  .drawer-timer{ font-family:'Press Start 2P',monospace; font-size:28px; color:var(--magenta); text-align:center; margin:16px 0; }
  .quick-bids{ display:flex; gap:8px; margin:14px 0 10px; }
  .quick-bids button{ flex:1; background:var(--panel-2); border:1px solid var(--cyan); color:var(--cyan); font-weight:700; font-size:13px; padding:12px 4px; transition:background .12s ease, color .12s ease; }
  .quick-bids button:hover{ background:var(--cyan); color:#0b1e21; }
  .bid-form{ display:flex; gap:10px; }
  .bid-form input{ flex:1; background:var(--bg); border:1px solid var(--line); color:var(--text); padding:12px 14px; font-size:15px; font-family:inherit; }
  .bid-form input:focus{ outline:none; border-color:var(--cyan); }
  .bid-form .btn-primary{ padding:12px 20px; font-size:13.5px; }
  .drawer-hint{ font-size:11.5px; color:var(--muted); margin-top:10px; }
  .drawer-connect-gate{ text-align:center; padding:18px 10px; }
  .drawer-connect-gate p{ font-size:12.5px; color:var(--muted); margin-bottom:12px; }

  /* ================= toasts ================= */
  .toast-stack{ position:fixed; bottom:calc(var(--footer-h) + 14px); right:16px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:300px; }
  .toast{ background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--cyan); padding:10px 14px; font-size:12.5px; animation:toastIn .2s ease both; }
  .toast.success{ border-left-color:var(--green); }
  .toast.error{ border-left-color:var(--red); }
  @keyframes toastIn{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:translateX(0);} }

  @media (max-width: 900px){
    .main{ grid-template-columns:1fr; grid-template-rows:1fr auto; }
    .side-panel{ max-height:38dvh; }
    .grid{ grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(5,1fr); }
    .tabnav{ display:none; }
  }
/* tx link under the bid form */
.tx-link{ font-size:11.5px; margin-top:8px; word-break:break-all; }
.tx-link a{ color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(73,214,230,.4); }
.tx-link a:hover{ color:var(--gold); border-bottom-color:var(--gold); }
.drawer-connect-gate p{ font-size:12.5px; color:var(--muted); margin-bottom:12px; line-height:1.5; }