* { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --bg: #eef1e8; --panel: #fbfcf8; --panel2: #eef0e7;
    --line: rgba(30,40,32,0.12);
    --txt: #1d2530; --dim: #5c6862;
    --green: #2f9e6b; --green-deep: #1f8a5c;
    --purple: #7a5af0; --gold: #936900;
    --mono: Consolas, "Courier New", monospace;
    --nav-offset: 108px;
  }
  html { scroll-behavior: smooth; scroll-padding-top: var(--nav-offset); }
  button, input, select { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  :focus-visible { outline: 3px solid #356b9c; outline-offset: 4px; }
  ::selection { background: #c7e8d6; color: #172e27; }
  input { caret-color: var(--green-deep); }
  input::placeholder { color: var(--dim); opacity: 1; }
  body { scrollbar-color: #7d9587 var(--panel2); }
  body.modal-open { overflow: hidden; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body {
    background: var(--bg);
    color: var(--txt);
    font-family: "Segoe UI", "PingFang SC", -apple-system, sans-serif;
    overflow-x: hidden;
  }
  .mono { font-family: Consolas, "Courier New", monospace; }

  /* Shared navigation / modal rules: hashlings-shell.css */
  /* online-time $HASH pill (Request 26) — coin glyph + balance, clickable to scroll to time-panel */
  .coin-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--panel); border: 1px solid var(--line);
    color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
    cursor: pointer; transition: border-color .2s, background .2s;
    font-variant-numeric: tabular-nums;
  }
  .coin-pill:hover { border-color: var(--gold); background: rgba(212,178,123,0.08); }
  .coin-pill .glyph { width: 12px; height: 12px; }
  .swap-row { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 10px 0; }
  .swap-input {
    width: 130px; background: var(--panel2); color: var(--txt); border: 1px solid var(--line);
    border-radius: 8px; padding: 10px 12px; font-size: 14px; text-align: right; outline: none;
  }
  .swap-arrow { color: var(--dim); font-size: 18px; }
  .swap-rate { font-size: 11px; color: var(--dim); margin: 4px 0 14px; }
  .btn {
    padding: 9px 18px; border-radius: 9px; border: none; cursor: pointer;
    font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
    background: var(--green); color: #05261a;
    transition: transform .1s, opacity .2s;
  }
  .btn:hover { opacity: .9; }
  .btn:active { transform: scale(.96); }
  .btn.ghost { background: var(--panel2); color: var(--txt); border: 1px solid var(--line); }
  .btn.gold { background: var(--gold); color: #2b2005; }
  .btn:disabled { opacity: .35; cursor: not-allowed; }
  /* account button — wallet avatar instead of raw address */
  .btn.account { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; border: none; }
  .btn.account .acct-av { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(30,40,32,0.12); }
  .btn.account .acct-av canvas { width: 34px; height: 34px; image-rendering: pixelated; display: block; }
  .btn.account .acct-bal { font-size: 12px; color: var(--gold); font-family: var(--mono); }
  /* language dropdown */
  .lang-dd { position: relative; display: inline-block; }
  .lang-dd-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
    color: var(--txt); cursor: pointer; padding: 10px 14px;
    font-size: 13px; font-weight: 700; letter-spacing: .5px;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
  }
  .lang-dd-btn:hover { border-color: var(--green); }
  .lang-dd-btn .arrow {
    width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--dim); transition: transform .15s;
  }
  .lang-dd.open .lang-dd-btn .arrow { transform: rotate(180deg); }
  .lang-dd-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
    min-width: 100%; overflow: hidden;
    box-shadow: 0 8px 24px rgba(31,42,31,0.18);
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .15s, transform .15s;
    z-index: 100;
  }
  .lang-dd.open .lang-dd-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .lang-dd-item {
    display: block; padding: 9px 14px; cursor: pointer; color: var(--txt);
    font-size: 12px; font-weight: 600; white-space: nowrap;
    transition: background .12s;
  }
  .lang-dd-item:hover { background: var(--panel2); }
  .lang-dd-item.on { background: rgba(111,211,168,.12); color: var(--green); }
  .lang-dd-item .check { float: right; opacity: 0; }
  .lang-dd-item.on .check { opacity: 1; }

  /* account dropdown (top-right) — pick your avatar / active creature, logout */
  .acct-dd { position: relative; display: inline-block; }
  .acct-dd-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    width: 250px; overflow: hidden;
    box-shadow: 0 10px 34px rgba(31,42,31,0.20);
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .15s, transform .15s; z-index: 100;
  }
  .acct-dd.open .acct-dd-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .acct-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--line);
  }
  /* editable nickname + auto-appended #abcd id (collision-proof player name) */
  .acct-av-mini {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0; cursor: pointer;
    transition: border-color .12s, transform .12s;
    overflow: hidden;
  }
  .acct-av-mini:hover { border-color: var(--green); }
  .acct-av-mini:active { transform: scale(.94); }
  .acct-av-mini canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
  .acct-av-mini.is-empty { color: var(--dim); font-size: 11px; line-height: 30px; }
  .acct-nick {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    color: var(--txt); font-size: 12px; font-weight: 700; letter-spacing: .3px;
    padding: 4px 6px; outline: none; transition: border-color .12s, background .12s;
  }
  .acct-nick:hover { border-color: var(--line); }
  .acct-nick:focus { border-color: var(--green); background: var(--panel2); }
  .acct-nick::placeholder { color: var(--dim); font-weight: 500; }
  .acct-num {
    flex-shrink: 0; color: var(--gold); font-size: 11px; font-weight: 700;
    padding: 2px 6px; background: rgba(212,178,123,.10); border-radius: 6px;
  }
  .acct-addr { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-logout {
    flex-shrink: 0; background: transparent; border: 1px solid var(--line);
    color: var(--dim); border-radius: 7px; padding: 4px 8px; font-size: 11px; cursor: pointer;
    transition: color .12s, border-color .12s;
  }
  .acct-logout:hover { color: var(--txt); border-color: var(--dim); }
  .acct-list-label {
    padding: 8px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: .5px;
    color: var(--dim); text-transform: uppercase;
  }
  .acct-list { max-height: 280px; overflow-y: auto; }
  .acct-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    transition: background .12s;
  }
  .acct-item:hover { background: var(--panel2); }
  .acct-item .aav {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 1px solid var(--line);
  }
  .acct-item .aav canvas { width: 32px; height: 32px; image-rendering: pixelated; display: block; }
  .acct-item .aifo { flex: 1; min-width: 0; }
  .acct-item .aid { color: var(--gold); font-size: 12px; letter-spacing: .3px; }
  .acct-item .aname { color: var(--txt); font-size: 11px; }
  .acct-item .aacts { display: flex; gap: 4px; flex-shrink: 0; }
  .acct-mini {
    background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
    border-radius: 6px; padding: 3px 7px; font-size: 10px; cursor: pointer; white-space: nowrap;
    transition: color .12s, border-color .12s, background .12s;
  }
  .acct-mini:hover { border-color: var(--green); color: var(--green); }
  .acct-mini.on { background: rgba(111,211,168,.12); color: var(--green); border-color: var(--green); }
  .acct-empty { padding: 16px 12px; text-align: center; color: var(--dim); font-size: 12px; }

  /* ===== HERO ===== */
  .hero {
    padding: 130px 32px 60px; text-align: center; position: relative;
  }
  .hero::before {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(600px 300px at 20% 10%, rgba(111,211,168,0.08), transparent),
      radial-gradient(600px 300px at 80% 20%, rgba(167,139,250,0.08), transparent);
    pointer-events: none;
  }
  /* pixel clouds floating across the hero sky — drift from off-screen left
     to off-screen right at different speeds and altitudes. Pure background:
     stays below every piece of content (nav 50 / modal 100 / auto-flow text), so
     clouds can never cover the UI. */
  .hero-clouds {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
  }
  .hero-cloud {
    position: absolute;
    image-rendering: pixelated; image-rendering: crisp-edges;
    filter: drop-shadow(0 2px 0 rgba(31,42,31,.10));
    will-change: transform;
  }
  .hero-cloud.c1 { top: 14%; left: -8%;  width: 90px;  animation: hcloud 38s linear infinite;       opacity: .85; }
  .hero-cloud.c2 { top: 22%; left: -12%; width: 130px; animation: hcloud 52s linear infinite -22s;  opacity: .90; }
  .hero-cloud.c3 { top: 30%; left: -10%; width: 70px;  animation: hcloud 30s linear infinite -8s;   opacity: .80; }
  .hero-cloud.c4 { top: 8%;  left: -6%;  width: 110px; animation: hcloud 46s linear infinite -34s;  opacity: .85; }
  @keyframes hcloud {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 22%)); }
  }
  .hero h1 {
    font-size: 52px; font-weight: 900; letter-spacing: 4px; line-height: 1.1;
    margin-bottom: 14px;
  }
  .hero h1 .g { color: var(--green); }
  .hero h1 .p { color: var(--purple); }
  .hero .tagline { color: var(--dim); font-size: 16px; letter-spacing: 1px; margin-bottom: 34px; }
  .hero .cta-row { display: flex; gap: 14px; justify-content: center; margin-bottom: 10px; }
  .hero .cta-row .btn { padding: 14px 30px; font-size: 15px; border-radius: 12px; }
  .hero .stats {
    display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-top: 40px;
    color: var(--dim); font-size: 12px; letter-spacing: 1px;
  }
  .hero .stats b { display: block; font-size: 22px; color: var(--txt); margin-bottom: 4px; }

  /* ===== SECTIONS ===== */
  section { padding: 48px 32px; max-width: 1080px; margin: 0 auto; }
  .sec-head { text-align: center; margin-bottom: 28px; }
  .sec-head h2 { font-size: 30px; font-weight: 800; letter-spacing: 3px;
    text-shadow: 0 1px 2px rgba(255,255,255,0.55);  /* match .sec-head p — dark H2 stays crisp on colored field */
  }
  .sec-head p {
    color: #3a4651;   /* darker than --dim, still readable on white panels AND on the field bg */
    margin-top: 10px; font-size: 14px; letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(255,255,255,0.55);  /* subtle light halo lifts text off the field */
  }
  .sec-head .chip {
    display: inline-block; font-size: 11px; letter-spacing: 2px; color: var(--green);
    border: 1px solid rgba(111,211,168,0.35); padding: 5px 14px; border-radius: 999px;
    margin-bottom: 14px;
    text-shadow: 0 1px 2px rgba(255,255,255,0.55);  /* match p/h2 — chip's pale green survives on the field */
  }

  /* ===== MINT ===== */
  .mint-card {
    display: flex; gap: 28px; align-items: center; justify-content: center;
    background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
    padding: 34px; flex-wrap: wrap;
  }
  .mint-stage { text-align: center; }
  .mint-stage canvas {
    width: 240px; height: 240px; image-rendering: pixelated;
    border-radius: 20px; border: 1px solid var(--line);
  }
  .mint-stage .av-wrap {
    width: 240px; height: 240px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    /* 👑 No background, no border, no radius — transparent canvas, just sizes the
       preview area. The creature + ID/traits float on the surrounding page. */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .mint-stage .av-wrap canvas { border: none; }
  .mint-stage .nftid { margin-top: 10px; color: var(--gold); font-size: 13px; }
  .mint-stage .addr { margin-top: 4px; color: var(--dim); font-size: 11px; letter-spacing: 0.5px; }
  .mint-info { max-width: 420px; min-width: 0; }
  .mint-community-count { display:grid; gap:3px; width:min(100%,300px); margin:0; padding:13px 15px; border:1px solid rgba(104,153,69,.45); border-radius:12px; background:rgba(244,251,223,.92); color:#29452d; box-shadow:0 8px 22px rgba(42,79,34,.12); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
  .mint-community-count .mint-community-eyebrow { color:#658058; font-size:10px; font-weight:800; letter-spacing:.12em; }
  .mint-community-count strong { display:flex; align-items:baseline; gap:7px; min-width:0; line-height:1.1; font-variant-numeric:tabular-nums; }
  .mint-community-count [data-community-number] { flex:none; color:#244c30; font-size:30px; letter-spacing:-1px; }
  .mint-community-count [data-community-label] { min-width:0; color:#3e6242; font-size:12px; line-height:1.45; }
  .mint-community-count small { color:#6e8069; font-size:10px; line-height:1.45; }
  .mint-community-count[data-state="syncing"] [data-community-number] { color:#71806e; }
  .home-layout #mint .mint-card { position:relative; }
  /* Keep the count in the avatar/identity grid instead of at the card's foot. */
  .home-layout #mint .mint-card > .mint-stage { min-width:0; align-content:center; }
  .home-layout #mint .mint-card > .mint-stage .av-wrap { grid-column:1; grid-row:1; align-self:center; }
  .home-layout #mint .mint-card > .mint-stage .mint-identity { grid-column:2; grid-row:1; align-self:center; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
  .home-layout #mint .mint-card > .mint-stage .nftid { align-self:auto; margin:0; }
  .home-layout #mint .mint-card > .mint-stage .addr { align-self:auto; margin:2px 0 0; }
  .home-layout #mint .mint-card > .mint-stage .mint-community-count { width:min(100%,250px); margin:8px 0 0; padding:7px 10px; gap:1px; box-shadow:none; }
  .home-layout #mint .mint-card > .mint-stage .mint-community-count strong { gap:5px; flex-wrap:wrap; }
  .home-layout #mint .mint-card > .mint-stage .mint-community-count [data-community-number] { font-size:22px; letter-spacing:-.4px; }
  .home-layout #mint .mint-card > .mint-stage .mint-community-count [data-community-label] { font-size:10px; }
  .home-layout #mint .mint-card > .mint-stage .mint-community-count small { font-size:9px; }
  @media(max-width:380px){.home-layout .home-intro #mint .mint-card > .mint-stage{grid-template-columns:96px minmax(0,1fr);gap:4px 10px;}.home-layout #mint .mint-card > .mint-stage .av-wrap,.home-layout #mint .mint-card > .mint-stage .av-wrap canvas{width:96px;height:96px;}.home-layout #mint .mint-card > .mint-stage .mint-community-count{padding:5px 7px;}.home-layout #mint .mint-card > .mint-stage .mint-community-count [data-community-number]{font-size:19px;}}
  #mint.is-minted > .mint-complete { position:relative; }
  #mint.is-minted > .mint-complete > .mint-community-count { position:absolute; right:28px; bottom:28px; width:min(42%,300px); z-index:2; }
  #mint.is-minted > .mint-complete > p { max-width:52%; }
  @media(max-width:700px){
    #mint.is-minted > .mint-complete > .mint-community-count { position:static; width:100%; max-width:100%; margin-top:22px; }
    #mint.is-minted > .mint-complete > p { max-width:none; }
  }
  .mint-info h3 { font-size: 20px; margin-bottom: 8px; }
  .mint-info p { color: var(--dim); font-size: 13px; line-height: 1.7; margin-bottom: 18px; }
  .mint-ctrl { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; }
  .mint-input {
    flex: 1; min-width: 0; background: var(--panel2); border: 1px solid var(--line);
    border-radius: 10px; color: var(--txt); font-size: 12px; padding: 9px 12px;
    outline: none; transition: border-color .15s;
  }
  .mint-input:focus { border-color: var(--green); }
  .mint-input:read-only { color: var(--green); cursor: not-allowed; }
  .mint-random-btn {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 38px; height: 38px; min-width: 38px;
    border-radius: 10px; background: var(--panel2);
    border: 1px solid var(--line); color: var(--txt);
    cursor: pointer; padding: 0;
    transition: transform .18s, border-color .15s, color .15s, background .15s;
  }
  .mint-random-btn:hover { border-color: var(--green); color: var(--green); transform: rotate(15deg); }
  .mint-random-btn:active { transform: rotate(180deg) scale(.92); }
  /* already-minted = no more rolling; show as settled */
  .mint-random-btn.is-locked {
    opacity: .45; cursor: not-allowed; pointer-events: none;
  }
  .mint-hint { font-size: 12px; color: var(--dim); margin: -10px 0 14px; }
  .mint-hint.warn { color: #a83333; font-weight: 600; }
  .mint-hint.locked { color: var(--green); font-weight: 600; }
  .traits { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
  .tag {
    font-size: 11px; padding: 4px 10px; border-radius: 999px;
    background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  }
  .tag.gold {
    /* Light-theme premium badge: cream-gold fill + gold border + dark-gold text.
       Old dark-on-dark + gold-glow styling read as "Web 1.0" against the white
       background (user feedback). Keeps the gold "VIP" semantics without the
       heavy black pill. */
    background: #f5e8c4;
    border: 1px solid #d4a843;
    color: #7a5c0a;
    box-shadow: none;
  }
  .tag.purple {
    background: #efe5fb;
    border: 1px solid #af8bd9;
    color: #5b2f83;
    box-shadow: none;
  }
  .tag.ts {
    background: transparent; border: 1px dashed var(--line); color: var(--dim);
    font-family: 'JetBrains Mono', monospace;
  }
  .coll-item .cts { font-size: 9px; color: var(--dim); margin: 0; font-family: 'JetBrains Mono', monospace; }

  /* ===== BLINDBOX ===== */
  .home-layout #box.box-workbench { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:20px 24px; align-items:start; }
  #box.box-workbench > .sec-head { grid-column:1/-1; margin:0; text-align:left; }
  #box.box-workbench > .sec-head p { margin-left:0; }
  #box .box-roll { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; width:100%; max-width:440px; margin:0 auto; text-align:center; }
  #box .box-roll h3 { margin:0; font:16px/1.5 HashlingsPixel,var(--hl-font,monospace); }
  #box .box-roll-art { width:192px; height:192px; overflow:hidden; border-radius:12px; }
  #box .box-roll-art canvas { display:block; width:192px; height:192px; image-rendering:pixelated; }
  #box .box-roll-meta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; width:100%; min-width:0; gap:4px 10px; }
  #box .box-roll-meta strong { font-size:15px; line-height:24px; }
  #box .box-roll-meta span { color:var(--dim); font-size:12px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #box #boxRollId { font-family:'JetBrains Mono',monospace; color:var(--accent,#319665); }
  #box .box-roll-traits { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:4px; margin:0; width:100%; min-height:28px; flex:0 0 auto; overflow-x:auto; scrollbar-width:thin; }
  #box .box-roll-traits .tag { font-size:11px; line-height:17px; padding:3px 6px; flex:none; white-space:nowrap; }
  #box .box-roll-btn,#box .box-roll-btn:hover,#box .box-roll-btn:active { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:160px; height:44px; min-height:44px; padding:0 18px; background:var(--hl-action,#d2f65a); color:var(--hl-action-ink,#1b2814); border:1px solid transparent; border-radius:8px; transform:none; box-shadow:none; font:18px/1 HashlingsPixel,monospace; }
  #box .box-roll-btn:hover { background:var(--hl-action-hover,#c4ea43); }
  #box .box-roll-btn :is(span,svg) { color:inherit; }
  #box .box-roll-btn svg { width:22px; height:22px; flex:none; shape-rendering:crispEdges; }
  #box .box-roll-btn:focus-visible { outline:3px solid #55782e; outline-offset:3px; }
  #box #boxRollNote { margin:0; min-height:40px; color:var(--dim); font-size:12px; line-height:20px; text-wrap:pretty; }
  @media(max-width:760px) {
    .home-layout #box.box-workbench { grid-template-columns:minmax(0,1fr); gap:20px; }
    #box .box-roll { max-width:360px; gap:10px; }
    #box .box-roll-art,#box .box-roll-art canvas { width:160px; height:160px; }
    #box .box-roll-meta { grid-template-rows:24px 20px; }
    #box .box-roll-traits { flex-wrap:wrap; height:auto; min-height:28px; flex:0 0 auto; overflow:visible; }
  }
  .blind-wrap { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
  .box-stage {
    width: 100%; max-width: 640px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 20px; padding: 28px; text-align: center;
  }
  .mystery-box {
    width: 140px; height: 140px; margin: 8px auto 18px;
    background: linear-gradient(145deg, #d33a2c, #a82a1a);
    border: 3px solid #f0c948; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 54px; position: relative; overflow: hidden;
    box-shadow: 0 4px 0 #7a1812, 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 4px rgba(255,255,255,.12);
    image-rendering: pixelated;
  }
  /* Q 版礼物盒：黄色十字丝带（横 + 竖各一条） */
  .mystery-box::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 14px; margin-top: -7px;
    background: linear-gradient(90deg, #f0c948, #e0b938, #f0c948);
    border-top: 1px solid #8a6a18; border-bottom: 1px solid #8a6a18;
    z-index: 1;
  }
  /* Mystery-box glyph scales to fit (default .glyph.lg = 42px looks tiny in 140px box) */
  .mystery-box .glyph { width: 84px; height: 84px; vertical-align: middle; }
  .mystery-box::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 14px; margin-left: -7px;
    background: linear-gradient(180deg, #f0c948, #e0b938, #f0c948);
    border-left: 1px solid #8a6a18; border-right: 1px solid #8a6a18;
  }
  @keyframes sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
  .reveal-wrap {
    width: 160px; height: 160px; margin: 8px auto 18px; border-radius: 16px;
    display: none; align-items: center; justify-content: center;
    border: 1px solid rgba(184,134,11,0.5);
  }
  .reveal-wrap canvas { width: 160px; height: 160px; image-rendering: pixelated; border-radius: 16px; }
  /* 👑 reveal-row wraps the centered creature card with two flanking trait
     columns — fills the empty horizontal space on either side so the unboxed
     sprite reads as "fully revealed" instead of "lone postcard in the void". */
  .reveal-row {
    display: none;
    align-items: center; justify-content: center;
    gap: 24px; width: 100%;
    margin: 8px 0 18px;
  }
  .reveal-row .reveal-stage { margin: 0; }  /* override the standalone margin */
  .reveal-side {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    min-width: 96px; max-width: 150px;
  }
  .reveal-side .tag {
    /* lighter weight than the bottom trait strip so the eye locks onto the
       creature card first, then sweeps outward to read identity → mood. */
    font-size: 11px; padding: 4px 10px;
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--txt);
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(15,20,15,0.04);
  }
  .reveal-side .tag.gold {
    /* rare FX keeps its cream-gold identity from the bottom strip */
    background: #f5e8c4;
    border: 1px solid #d4a843;
    color: #7a5c0a;
    box-shadow: none;
  }
  .reveal-side .tag.purple {
    background: #efe5fb;
    border: 1px solid #af8bd9;
    color: #5b2f83;
    box-shadow: none;
  }
  /* reveal stage hosts the aura canvas + creature card stacked */
  .reveal-stage {
    position: relative; width: 260px; height: 260px; margin: 8px auto 18px;
    display: none; align-items: center; justify-content: center;
  }
  .reveal-aura {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
  }
  /* Persistent "alive" breathing + drift so the unboxed sprite doesn't look
     like a static postcard (the sprite's pixel-level animation runs at ~11fps
     due to renderFrame's tq quantization — a 1.4s scale+rotate cycle on the
     stage itself gives the eye a clear motion cue every few frames). */
  .reveal-stage .reveal-wrap {
    animation:
      popIn .5s cubic-bezier(.22,1,.36,1),
      bobbing 1.4s ease-in-out infinite alternate;
  }
  @keyframes bobbing {
    0%   { transform: scale(1.00) rotate(-1.6deg) translateY(-2px); }
    50%  { transform: scale(1.035) rotate(0deg)    translateY( 0); }
    100% { transform: scale(1.00) rotate( 1.6deg) translateY( 2px); }
  }
  /* Rare FX (crown/aura/gem) replace popIn with popInRare and use a beefier
     bobbingRare that also pulses the golden glow. The 0.25s animation-delay
     on bobbingRare keeps popInRare's rotation clear during the 0.7s entrance. */
  .reveal-stage.fx-crown .reveal-wrap,
  .reveal-stage.fx-aura  .reveal-wrap,
  .reveal-stage.fx-gem   .reveal-wrap {
    border-color: rgba(240,201,72,0.95);
    box-shadow:
      0 0 24px rgba(240,201,72,0.55),
      0 0 60px rgba(240,201,72,0.30),
      inset 0 0 16px rgba(240,201,72,0.18);
    animation:
      popInRare .7s cubic-bezier(.22,1,.36,1),
      bobbingRare 1.6s ease-in-out infinite alternate .25s;
  }
  @keyframes bobbingRare {
    0%   { transform: scale(1.00) rotate(-2.2deg) translateY(-3px); box-shadow: 0 0 24px rgba(240,201,72,0.55), 0 0 60px rgba(240,201,72,0.30), inset 0 0 16px rgba(240,201,72,0.18); }
    50%  { transform: scale(1.06) rotate(0deg)    translateY( 0); box-shadow: 0 0 32px rgba(240,201,72,0.85), 0 0 80px rgba(240,201,72,0.45), inset 0 0 20px rgba(240,201,72,0.25); }
    100% { transform: scale(1.00) rotate( 2.2deg) translateY( 3px); box-shadow: 0 0 24px rgba(240,201,72,0.55), 0 0 60px rgba(240,201,72,0.30), inset 0 0 16px rgba(240,201,72,0.18); }
  }
  @keyframes popInRare {
    0%   { transform: scale(.1) rotate(-12deg); opacity: 0; }
    40%  { transform: scale(1.30) rotate(4deg);  opacity: 1; }
    70%  { transform: scale(.92) rotate(-2deg); opacity: 1; }
    100% { transform: scale(1)   rotate(0);     opacity: 1; }
  }
  .reveal-stage.fx-halo .reveal-wrap { border-color: rgba(240,201,72,0.75); }
  .reveal-stage.fx-comet .reveal-wrap { border-color: rgba(95,158,217,0.7); }
  .reveal-stage.trait-purple .reveal-wrap {
    border-color: rgba(166,103,224,.92);
    box-shadow: 0 0 24px rgba(141,82,204,.46), 0 0 58px rgba(77,211,201,.2), inset 0 0 16px rgba(187,128,243,.2);
  }
  .box-price { color: var(--gold); font-size: 15px; font-weight: 700; margin-bottom: 16px; }
  .odds { font-size: 11px; color: var(--dim); line-height: 2; margin-top: 16px; text-align: left; }
  .odds .gd { color: var(--gold); }

  /* ===== BOX PICKER ===== */
  .box-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; width: 100%; max-width: 620px; }
  .box-card {
    width: 100%; background: var(--panel); border: 1px solid var(--line);
    border-radius: 16px; padding: 18px 12px; text-align: center; cursor: pointer;
    transition: transform .15s, border-color .15s;
  }
  .box-card:hover { transform: translateY(-4px); border-color: var(--green); }
  .box-card .box-icon {
    width: 90px; height: 90px; margin: 0 auto 12px; border-radius: 16px;
    border: 2px solid; display: flex; align-items: center; justify-content: center;
  }
  .box-card .box-icon .glyph { width: 42px; height: 42px; vertical-align: middle; }
  .box-card .box-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
  .box-card .box-cost { color: var(--gold); font-size: 14px; font-weight: 700; }
  .box-card .box-bias { color: var(--dim); font-size: 10px; margin-top: 6px; line-height: 1.4; }
  .box-card.active { border-color: var(--green); box-shadow: 0 0 0 2px rgba(111,211,168,0.35); }
  .box-card[data-tier="blue"].active { border-color: #5f9ed9; box-shadow: 0 0 0 2px rgba(95,158,217,0.35); }
  .box-card[data-tier="purple"].active { border-color: #a78bfa; box-shadow: 0 0 0 2px rgba(167,139,250,0.35); }
  .box-detail { margin-top: 18px; }
  .box-open { text-align: center; }
  /* duplicate .reveal-wrap intentionally removed — the canonical styles
     (including .reveal-stage variants) live higher up next to the markup */
  @keyframes popIn {
    from { transform: scale(.2); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  .mystery-box.shake { animation: shake .14s infinite; }
  @keyframes shake {
    0% { transform: rotate(-3deg) scale(1); }
    50% { transform: rotate(3deg) scale(1.05); }
    100% { transform: rotate(-3deg) scale(1); }
  }
  .mystery-box.open { animation: boxOpen 1.2s cubic-bezier(.36,.07,.19,.97) forwards; }
  @keyframes boxOpen {
    /* 👑 "震动然后打开" — 两次震荡（左/右）→ 缩小到 0 露出生物 */
    0%   { transform: rotate(0deg) scale(1);    opacity: 1; }
    10%  { transform: rotate(-8deg) scale(1.06); }
    20%  { transform: rotate(7deg)  scale(1.08); }
    30%  { transform: rotate(-6deg) scale(1.04); }
    40%  { transform: rotate(5deg)  scale(1.10); }
    55%  { transform: rotate(0deg)  scale(0.95); }
    70%  { transform: rotate(0deg)  scale(0.6);  opacity: 0.8; }
    85%  { transform: rotate(0deg)  scale(0.3);  opacity: 0.4; }
    100% { transform: rotate(0deg)  scale(0);    opacity: 0; }
  }
  .mystery-box.burst {
    animation: burst .6s ease-out forwards;
  }
  @keyframes burst {
    0%   { transform: scale(1); opacity: 1; }
    40%  { transform: scale(1.3); opacity: .8; }
    100% { transform: scale(2.5); opacity: 0; }
  }
  /* open button tinted by selected tier */
  #boxBtn { --box-accent: var(--gold); margin-top: 22px; min-width: 220px; }
  #boxBtn:hover { box-shadow: 0 0 0 2px var(--box-accent), 0 8px 24px rgba(0,0,0,.18); }
  .box-card .box-stock{display:inline-block;margin-top:9px;padding:4px 7px;border:1px solid currentColor;border-radius:5px;color:#bce0bd;background:#18302b;font-size:11px;font-weight:700}
  .box-inventory-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px}
  .box-inventory-actions #boxBtn{margin-top:0}
  .box-purchase-quantity{display:grid;grid-template-columns:auto auto;align-items:center;gap:3px 8px;color:var(--dim);font-size:11px;text-align:left}
  .box-purchase-quantity>small{grid-column:1/-1;color:var(--dim);font-size:10px;text-align:right}
  #payBoxQuantity{width:min(100%,260px);margin:14px auto;grid-template-columns:minmax(0,1fr) auto;font-size:12px}
  #payBoxQuantity[hidden]{display:none}
  #payBoxQuantity>small{text-align:center;line-height:1.4}
  .box-quantity-stepper{display:grid;grid-template-columns:44px 58px 44px;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
  .box-quantity-stepper button,.box-quantity-stepper input{box-sizing:border-box;height:44px;min-height:44px;border:0;background:transparent;color:var(--ink);font:700 14px 'JetBrains Mono',monospace;text-align:center}
  .box-quantity-stepper button{width:44px;min-width:44px;cursor:pointer}
  .box-quantity-stepper input{width:58px;border-right:1px solid var(--line);border-left:1px solid var(--line);border-radius:0;appearance:textfield}
  .box-quantity-stepper input::-webkit-inner-spin-button{appearance:none;margin:0}
  .box-quantity-stepper button:disabled{opacity:.35;cursor:not-allowed}
  .box-quantity-stepper:focus-within{border-color:var(--gold);box-shadow:0 0 0 2px rgba(240,201,72,.18)}
  .box-quantity-stepper :is(button,input):focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--gold)}
  .box-inventory-open{min-width:220px;border:1px solid #acd9a2;background:#244c3d;color:#f4ffe8}
  .box-inventory-open:disabled{opacity:.5;cursor:not-allowed}
  .box-stock-hint{margin:10px auto 0;max-width:460px;text-align:center;color:var(--dim);font-size:12px;line-height:1.5}

  .attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 8px 12px 10px; font-size: 10px; }
  .attr-row { display: flex; gap: 6px; align-items: baseline; }
  .attr-k { color: var(--dim); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; }
  .attr-v { color: var(--gold); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
  /* ===== COLLECTION ===== */
  .coll-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
  .coll-item {
    width: 100px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 10px 12px;     /* more top padding → avatar wrapper visually centered */
    text-align: center; cursor: pointer;
    transition: border-color .15s;
    display: flex; flex-direction: column; align-items: center;
    gap: 5px;
  }
  .coll-item:hover { border-color: var(--dim); }
  /* Current-character identity belongs to the map marker. Keep deployment and keyboard-focus states. */
  .coll-item.on-map { border-color: var(--green); box-shadow: 0 0 0 1px rgba(111,211,168,0.30); }
  .coll-item.on-map .cid { color: var(--green); }
  .coll-item canvas { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 8px; }
  .role-card-avatar {
    width: 64px; height: 64px; border-radius: 16px; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
    padding: 0; box-sizing: border-box;
  }
  .role-card-avatar canvas { display: block; flex: none; width: 100%; height: 100%; border-radius: 0; }
  .coll-item .cid { font-size: 10px; color: var(--gold); margin: 0; }
  .coll-item .cspec { font-size: 10px; color: var(--dim); margin: 0; }
  .role-card-identity { display: flex; align-items: baseline; justify-content: center; gap: 6px; white-space: nowrap; max-width: 100%; }
  .coll-item .cts { font-size: 9px; color: var(--dim); margin: 0; }

  /* ===== WORLD ===== */
  .world-gate {
    background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
    padding: 50px; text-align: center;
  }
  .world-gate h3 { font-size: 22px; margin-bottom: 10px; }
  .world-gate p { color: var(--dim); font-size: 13px; margin-bottom: 22px; }
  .world-stage {
    position: relative; width: min(960px, 94vw); margin: 0 auto;
  }
  #worldview {
    width: 100%; image-rendering: pixelated;
    border-radius: 16px; border: 1px solid var(--line); cursor: default;
    display: block;
  }
  .zoom-ctrl {
    position: absolute; right: 12px; bottom: 12px;
    display: flex; align-items: center; gap: 6px;
    padding: 6px; border-radius: 10px;
    background: rgba(255,255,255,0.82); border: 1px solid var(--line);
    backdrop-filter: blur(4px);
  }
  .zoom-ctrl button {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
    background: rgba(30,40,32,0.05); color: var(--txt); cursor: pointer;
    font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  }
  .zoom-ctrl button:hover { background: var(--panel2); }
  .camera-center-icon{position:relative;display:block;width:16px;height:16px;border:2px solid currentColor;border-radius:50%;box-sizing:border-box}
  .camera-center-icon i{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%)}
  .zoom-ctrl .zoom-pct {
    min-width: 44px; text-align: center; font-size: 11px; color: var(--dim);
    font-variant-numeric: tabular-nums;
  }
  /* ===== WEATHER & TIME-OF-DAY PICKER ===== */
  .wx-widget {
    position: absolute; top: 12px; right: 12px; z-index: 8;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  }
  .wx-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.92); color: var(--txt);
    border: 1px solid var(--line); backdrop-filter: blur(4px);
    font-size: 12px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: border-color .12s, transform .08s;
  }
  .wx-trigger:hover { border-color: var(--green); }
  .wx-trigger:active { transform: scale(0.97); }
  .wx-trigger-icon { font-size: 16px; line-height: 1; }
  .wx-trigger-text { font-weight: 500; line-height: 1; }
  .wx-trigger-pin {
    color: var(--gold); font-size: 11px; margin-left: 2px; line-height: 1;
    transform: translateY(-1px);
  }
  .wx-trigger .chev {
    font-size: 9px; line-height: 1; margin-left: 2px; color: var(--dim);
    transition: transform .16s ease;
  }
  .wx-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .wx-pop {
    position: relative;
    width: 252px; padding: 12px; border-radius: 12px;
    background: #ffffff; border: 1px solid var(--line);
    box-shadow: 0 6px 22px rgba(0,0,0,0.12);
    display: flex; flex-direction: column; gap: 12px;
  }
  .wx-pop[hidden] { display: none; }
  .wx-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 10px; letter-spacing: 1px; color: var(--dim);
    text-transform: uppercase; font-weight: 600;
  }
  .wx-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
    background: var(--panel2); border: 1px solid var(--line);
    color: var(--dim); font-size: 12px; line-height: 1; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
  }
  .wx-close:hover { background: var(--panel); border-color: var(--green); color: var(--txt); }
  .wx-close:active { transform: scale(0.9); }
  .wx-section { display: flex; flex-direction: column; gap: 6px; }
  .wx-sec-label {
    font-size: 9.5px; letter-spacing: .5px; color: var(--dim);
    text-transform: uppercase;
  }
  .wx-grid, .wx-time {
    display: grid; gap: 4px;
    grid-template-columns: repeat(4, 1fr);
  }
  .wx-time { grid-template-columns: repeat(3, 1fr); }
  .wx-cell {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border-radius: 8px; cursor: pointer;
    background: var(--panel2); border: 1px solid var(--line);
    color: var(--txt); font-size: 11px; line-height: 1.1;
    transition: background .12s, border-color .12s, transform .08s;
  }
  .wx-cell:hover { background: var(--panel); border-color: var(--green); }
  .wx-cell:active { transform: scale(0.96); }
  .wx-cell .ic { font-size: 18px; line-height: 1; }
  .wx-cell.active {
    background: linear-gradient(180deg, rgba(63,191,111,0.16), var(--panel));
    border-color: var(--green); color: var(--green); font-weight: 600;
  }
  .wx-cell span {
    font-size: 9.5px; letter-spacing: .2px; line-height: 1.05;
    max-width: 56px; text-align: center;
  }
  .wx-reset {
    align-self: stretch; padding: 7px 10px; border-radius: 8px;
    background: transparent; border: 1px dashed var(--line);
    color: var(--dim); font-size: 11px; cursor: pointer;
    transition: color .12s, border-color .12s;
  }
  .wx-reset:hover { color: var(--green); border-color: var(--green); }
  .wx-reset:active { transform: scale(0.98); }
  /* Keep the shared picker above the clipped map, with touch-sized controls. */
  #wxTrigger{box-sizing:border-box;min-height:38px;height:38px;max-width:180px;padding:6px 10px;gap:5px;border-radius:10px;box-shadow:none;white-space:nowrap}
  #wxTriggerText{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.25}
  #wxPop{box-sizing:border-box;position:fixed;inset:auto;margin:0;width:min(288px,calc(100vw - 16px));max-height:calc(100dvh - 16px);padding:10px;gap:10px;z-index:1000;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid var(--line);border-radius:12px;background:var(--hl-paper,#fffef8);color:var(--txt);font-family:var(--hl-font,system-ui,sans-serif)}
  #wxPop[hidden]{display:none!important}
  #wxPop::backdrop{background:transparent;pointer-events:none}
  #wxPop .wx-head,#wxPop .wx-section,#wxPop .wx-reset{flex-shrink:0}
  #wxPop .wx-head{font-size:11px;letter-spacing:.3px;min-height:36px}
  #wxPop .wx-grid,#wxPop .wx-time{gap:5px;grid-template-columns:repeat(4,minmax(0,1fr))}
  #wxPop .wx-time{grid-template-columns:repeat(3,minmax(0,1fr))}
  #wxPop .wx-cell{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:48px;height:48px;max-height:none;padding:5px 2px;gap:3px;border:1px solid var(--line);border-radius:9px;box-shadow:none;font-size:11px;line-height:1.2;transform:none}
  #wxPop .wx-cell .ic{font-size:17px;line-height:18px;max-width:100%}
  #wxPop .wx-cell span:not(.ic){font-size:11px;line-height:14px;letter-spacing:0;max-width:100%;white-space:nowrap}
  #wxPop .wx-cell.active{border-color:var(--green);background:var(--hl-active,#e6f4bb);color:var(--hl-brand,#294632)}
  #wxPop .wx-sec-label{font-size:10px;line-height:1.3;letter-spacing:0}
  #wxPop #wxClose{box-sizing:border-box;flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;padding:0;border-radius:8px;box-shadow:none}
  #wxPop #wxReset{box-sizing:border-box;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:11px;line-height:1.4;white-space:normal}
  #wxTrigger:focus-visible,#wxPop :is(button,input):focus-visible{outline:0!important;outline-offset:0!important;border-color:#42764c;box-shadow:none!important}
  @media(max-width:600px){.wx-widget{top:8px;right:8px}#wxTrigger{min-height:38px;height:38px;max-width:160px}}
  .hud-seats {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: min(960px, 94vw);
    box-sizing: border-box; margin: 0 auto 12px;
  }
  .hud-seat {
    position: relative; width: 54px; padding: 6px 4px 4px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--line); background: var(--panel); text-align: center;
    transition: border-color .12s, box-shadow .12s;
  }
  .hud-seat:hover { border-color: var(--dim); }
  .hud-seat.active { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(212,168,67,0.45); }
  .hud-seat .seat-av {
    width: 32px; height: 32px; margin: 0 auto; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;                 /* solid avatar bg — no transparent washout */
  }
  .hud-seat .seat-av canvas { width: 32px; height: 32px; image-rendering: pixelated; display: block; }
  .hud-seat .sid { font-size: 8px; color: var(--dim); margin-top: 4px; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-seat.active .sid { color: var(--gold); }
  .hud-seat.locked { border-style: dashed; border-color: rgba(212,168,67,0.5); cursor: pointer; }
  .hud-seat.locked:hover { border-color: var(--gold); }
  .hud-seat .seat-av.plus {
    background: rgba(212,168,67,0.10); color: var(--gold); font-size: 18px; line-height: 1;
    font-weight: 700;
  }
  .hud-seat.locked .sid { color: var(--gold); }
  .hud-seat .seat-x {
    position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; line-height: 13px;
    border-radius: 50%; border: none; background: rgba(0,0,0,0.35); color: #fff;
    font-size: 9px; cursor: pointer; padding: 0; display: none;
  }
  .hud-seat:hover .seat-x { display: block; }
  .hud-seat .seat-x:hover { background: rgba(224,80,80,0.9); }
  .hud-seat.add { border-style: dashed; border-color: rgba(30,40,32,0.25); color: var(--dim); }
  .hud-seat.add:hover { border-color: var(--green); color: var(--green); }
  /* full: roster already at maxSeats() — show a lock, non-interactive */
  .hud-seat.add.full { border-color: rgba(30,40,32,0.14); cursor: not-allowed; opacity: .55; }
  .hud-seat.add.full:hover { border-color: rgba(30,40,32,0.14); color: var(--dim); }
  .hud-seat.add.full .seat-av.plus { background: rgba(30,40,32,0.07); color: var(--dim); }
  .world-hud {
    display: flex; gap: 14px; align-items: center;
    /* User reported the HUD card looked "白色透明" — var(--panel) is too close
       to the page background (--bg: #eef1e8 vs --panel: #fbfcf8) so the card
       blends in. Force an opaque solid white + a darker border so the card's
       shape is unambiguously visible against any page background. */
    background: #ffffff;
    border: 1px solid rgba(30,40,32,0.22);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border-radius: 14px; padding: 12px 16px;
    width: min(960px, 94vw); box-sizing: border-box; margin: 0 auto 14px;
  }
  .hud-info { display: flex; flex-direction: column; gap: 5px; flex: 1; }
  .hud-row { display: flex; gap: 10px; align-items: center; font-size: 12px; }
  .hud-label { color: var(--dim); min-width: 56px; }
  .hud-addr { color: var(--green); font-size: 11px; }
  .hud-val { color: var(--txt); }
  .hud-row .tag { font-size: 9px; padding: 2px 7px; }
  .world-tip { text-align: center; color: var(--dim); font-size: 12px; margin-top: 12px; }

  /* ===== WORLD SWITCHER (multi-world tiles) ===== */
  .world-switcher {
    display: flex; gap: 10px; flex-wrap: nowrap;
    width: min(960px, 94vw); box-sizing: border-box; margin: 12px auto 0;
    overflow-x: auto;
  }
  .ws-card {
    position: relative;
    flex: 1 1 0; min-width: 0;
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: var(--panel); border: 1px solid var(--line);
    transition: border-color .12s, box-shadow .12s, background .12s;
  }
  .ws-card:hover { border-color: var(--dim); }
  .ws-card.active {
    border: 2px solid var(--green);
    background: var(--panel);
  }
  .ws-card.empty {
    border-style: dashed; border-color: var(--line);
    background: var(--panel2);
  }
  .ws-card .ws-label {
    min-width: 0; line-height: 1.4;
  }
  .ws-card .ws-theme {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; color: var(--txt); font-weight:700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-right: 52px;
  }
  .ws-card .ws-icon {
    width: 18px; height: 18px; flex: 0 0 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px; background: color-mix(in srgb, var(--green) 12%, var(--panel2));
  }
  .ws-card .ws-icon .glyph { width: 14px; height: 14px; vertical-align: middle; }
  .ws-card .ws-slot {
    position:absolute!important; top:8px!important; right:10px!important; left:auto!important; bottom:auto!important;
    display:flex; align-items:center; gap:5px; font-size: 11px; color: var(--dim); letter-spacing: .2px;
  }
  .ws-card .ws-wid { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; font-weight:600; }
  .ws-card .ws-cap { font-size: 12px; color: var(--green); font-variant-numeric: tabular-nums; margin-top: 5px; }
  .ws-card .ws-cap:empty { display: none; }
  .ws-card .ws-lore { font-size: 11px; color: var(--dim); font-style: italic; line-height: 1.4; max-width: 170px; margin-top: 4px; opacity: .9; }
  .hud-row-lore .hud-val { font-size: 10.5px; max-width: 170px; line-height: 1.4; }
  .ws-card .ws-empty { color: var(--dim); font-size: 11px; }
  .ws-card .ws-av {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel2); border: 1px solid var(--line);
  }
  .ws-card .ws-av canvas { width: 32px; height: 32px; image-rendering: pixelated; }
  .ws-card .ws-av.ws-av-empty {
    border-style: dashed; border-color: var(--dim); opacity: 0.65;
  }
  .ws-card .ws-av .ws-av-placeholder {
    font-size: 18px; color: var(--dim); font-weight: 300; line-height: 1;
  }
  /* Stack of mini avatars for inactive slots that already hold creatures —
     shows what's actually standing in that world (replaces the bare "→").
     Flex row with a small negative margin so each face shows a clear strip
     (avoids the "one blob" heavy-overlap look) and the +N badge sits last,
     always above and readable. */
  .ws-card .ws-av.ws-av-stack {
    position: relative;
    width: auto; height: 22px; padding: 0;
    background: transparent !important; border: none !important;
    overflow: visible;
    display: flex; align-items: center; gap: 0;
  }
  .ws-card .ws-av.ws-av-stack .ws-av-item {
    position: relative;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    margin-left: -6px; /* light overlap so each face still reads */
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    flex: 0 0 auto;
  }
  .ws-card .ws-av.ws-av-stack .ws-av-item:first-child { margin-left: 0; }
  .ws-card .ws-av.ws-av-stack .ws-av-item canvas { width: 22px; height: 22px; image-rendering: pixelated; }
  .ws-card .ws-av.ws-av-stack .ws-av-item.ws-av-more {
    background: var(--panel); color: var(--txt);
    font-size: 9px; font-weight: 800; letter-spacing: 0.2px;
    border-color: var(--line);
    z-index: 2;
  }
  /* (removed) the +"Add creature" crew-picker button — the moved-up #collection
     row is now the single-step active-creature picker. World cards click to
     switch world only. */
  .ws-card .ws-buy {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--panel2);
    color: var(--txt); cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, border-color .12s;
  }
  .ws-card .ws-buy {
    width: auto; padding: 0 10px; height: 28px; font-size: 10px;
    background: var(--panel); border: 1px dashed var(--gold);
    color: var(--gold); font-weight: 600; letter-spacing: .3px;
  }
  .ws-card .ws-buy:hover { background: rgba(212,168,67,0.12); }
  .ws-card .ws-buy:disabled { opacity: 0.45; cursor: not-allowed; }
  .ws-card .ws-cost { font-size: 9px; color: var(--dim); margin-top: 2px; }
  .ws-card .ws-buy-wrap { display: flex; flex-direction: column; align-items: stretch; }
  .ws-card.empty .ws-label { display: flex; align-items: center; gap: 8px; }
  .ws-card.empty .ws-slot-mark { font-size: 16px; }
  .ws-card .ws-listed-mark {
    display:inline-flex; align-items:center; min-height:18px; padding:0 5px;
    border-radius:5px; border:1px solid #d8b76a; background:#fff4d9; color:#8b6415;
    font-size:9px; line-height:1; font-weight:700; letter-spacing:.1px;
  }
  /* The land claim action travels with the selected card instead of sitting
     below every owned-land row. Keep its compact button readable in the card. */
  .ws-card > .time-panel.land-claim-action {
    grid-column: 1 / -1; width: auto; margin: auto 0 0; padding: 8px 8px 0;
    border-radius: 0; gap: 0; background: transparent; border:0; border-top:1px solid var(--line);
    min-height: 42px; position:relative; z-index:3; pointer-events:auto;
  }
  .ws-card > .time-panel.land-claim-action .tp-claim { width: 100%; padding: 6px 8px; }

  /* ===== ONLINE-TIME TOKEN PANEL (reuses the mining-panel look) ===== */
  .time-panel {
    width: min(960px, 94vw); box-sizing: border-box;
    margin: 14px auto 0; padding: 12px 16px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    display: flex; flex-direction: column; gap: 9px;
  }
  .time-panel .tp-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .time-panel .tp-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--txt);
  }
  .time-panel .tp-icon { display: inline-flex; color: var(--gold); }
  .time-panel .tp-icon .glyph { width: 12px; height: 12px; }
  .time-panel .tp-bal { font-size: 20px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
  /* world yield line — sits just below the map so the deploy→income boost is obvious */
  .world-yield {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: min(960px, 94vw); box-sizing: border-box;
    margin: 12px auto 0; padding: 10px 16px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    font-size: 13px; font-weight: 600; color: var(--txt);
  }
  .world-yield .glyph { width: 14px; height: 14px; color: var(--gold); }
  .world-yield b { color: var(--gold); font-weight: 800; }
  .time-panel .tp-bar {
    position: relative; height: 8px; border-radius: 5px; overflow: hidden;
    background: var(--panel2); border: 1px solid var(--line);
  }
  .time-panel .tp-fill {
    height: 100%; width: 0%; border-radius: 5px;
    background: linear-gradient(90deg, var(--green-deep), var(--gold));
    transition: width 0.2s linear;
  }
  .time-panel .tp-note { font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; }
  .time-panel .tp-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  }
  .time-panel .tp-claim {
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
    background: var(--gold); color: #1a1a26; border: 1px solid var(--gold);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .time-panel .tp-claim:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(212,168,67,0.35); }
  .time-panel .tp-claim:disabled { opacity: 0.38; cursor: not-allowed; background: var(--panel2); color: var(--dim); border-color: var(--line); }
  .time-panel.is-full .tp-note { color: var(--gold); font-weight: 600; }

  /* ===== WORLD GENERATION LOADING ===== */
  .world-loading {
    background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
    text-align: center; width: min(960px, 94vw);
    /* Reserve the canvas height while the map is built. */
    min-height: 560px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 40px;
    box-sizing: border-box; margin: 0 auto;
  }
  .wl-title { font-size: 18px; font-weight: 600; margin-top: 18px; }

  /* ===== WALLET MODAL / TOAST ===== */
  /* Shared navigation / modal rules: hashlings-shell.css */
  /* payment confirm modal */
  .pay-item { color: var(--txt); font-size: 14px; font-weight: 700; margin-bottom: 10px; }
  .pay-price { color: var(--gold); font-size: 30px; font-weight: 900; letter-spacing: 1px; line-height: 1; margin-bottom: 8px; }
  .pay-price .cur { font-size: 15px; font-weight: 700; color: var(--dim); margin-left: 6px; }
  .pay-bal { color: var(--dim); font-size: 11px; margin-bottom: 18px; }
  .pay-row { display: flex; gap: 10px; }
  .pay-row .btn { flex: 1; }
  /* character detail sheet */
  .creature-card { position: relative; width: 360px; padding: 26px 24px 24px; }
  .creature-close {
    position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
    border-radius: 8px; border: 1px solid var(--line); background: var(--panel2);
    color: var(--dim); font-size: 18px; line-height: 1; cursor: pointer;
  }
  .creature-close:hover { color: var(--txt); border-color: var(--dim); }
  .creature-head { display: flex; gap: 18px; align-items: center; margin-top: 4px; }
  .creature-av {
    width: 96px; height: 96px; flex-shrink: 0; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; border: 1px solid var(--line);
  }
  .creature-av canvas { width: 96px; height: 96px; image-rendering: pixelated; }
  .creature-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .creature-identity { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
  .creature-id { color: var(--gold); font-size: 13px; letter-spacing: 0.5px; }
  .creature-name { color: var(--txt); font-size: 16px; font-weight: 600; }
  .creature-mini { color: var(--dim); font-size: 11px; }
  .creature-traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
  .creature-card .attr-grid { grid-template-columns: 1fr; }
  .wallets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .wallet {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 6px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--panel2); cursor: pointer; color: var(--txt);
    font-size: 11px; transition: border-color .15s;
  }
  .wallet:hover { border-color: var(--green); }
  .wlogo {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 700; color: #fff;
  }
  .login-sec-label {
    font-size: 10px; letter-spacing: 1px; color: var(--dim);
    text-transform: uppercase; font-weight: 600; margin-bottom: 8px;
  }
  .google-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: #ffffff; color: #3c4043; border: 1px solid var(--line);
    padding: 12px 16px; font-size: 13px; font-weight: 500;
  }
  .google-btn:hover { border-color: var(--dim); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
  .or-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 0; color: var(--dim); font-size: 11px;
  }
  .or-divider::before, .or-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
  }
  .login-recent-item {
    text-align: left; padding: 9px 12px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--panel2);
    color: var(--txt); font-size: 12px; cursor: pointer;
    transition: border-color .12s, background .12s;
  }
  .login-recent-item:hover { border-color: var(--green); background: var(--panel); }
  /* crew picker (world-switcher → add creature into scene) */
  .crew-pick-card { width: 480px; max-width: 92vw; padding: 22px 22px 18px; }
  .crew-pick-card .coll-item { width: 100px; }
  /* Reserve the same reason space on every deployment card; state changes do not resize it. */
  #crewPickGrid .deployment-card-reason { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; width: 100%; height: 4.5em; min-height: 4.5em; margin-top: auto; font-size: 11px; line-height: 1.5; color: var(--gold); }
  #crewPickGrid .coll-item.deployment-unavailable { cursor: not-allowed; border-color: var(--line); box-shadow: none; transform: none; }
  #crewPickGrid .deployment-unavailable .role-card-avatar { opacity: .55; }
  #crewPickGrid .coll-item.deployment-fit { border-color:#4e9864; background:#f0f7e8; box-shadow:inset 0 0 0 2px #4e986480, 0 2px 0 #4e986455; }
  #crewPickGrid .coll-item.deployment-fit::after { content:'✓ +10%'; display:block; margin-top:3px; padding:2px 6px; border-radius:999px; background:#dcefd5; color:#2f6b40; font-size:10px; font-weight:700; line-height:1.2; }
  #crewPickGrid .deployment-fit-label { color:#2f6b40; font-weight:650; }
  #crewPickGrid .coll-item.active { outline:2px solid var(--gold,#a08028); outline-offset:-4px; }
  #crewPickHint { min-height: 3em; }
  /* Owned plots sit below the map column and use the same centered measure as the HUD. */
  .owned-lands-panel { width:100%; box-sizing:border-box; margin:20px 0 0; padding:0; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.68); overflow:hidden; }
  .owned-lands-panel > summary { display:flex; align-items:center; gap:8px; padding:11px 13px; cursor:pointer; list-style:none; color:var(--txt); }
  .owned-lands-panel > summary::-webkit-details-marker { display:none; }
  .owned-lands-summary-icon { display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; border-radius:6px; background:rgba(47,158,107,.12); color:var(--green); font-weight:800; }
  .owned-lands-panel > summary strong { font-size:13px; }
  .owned-lands-panel > summary small { margin-left:auto; color:var(--dim); font-size:10px; }
  .owned-lands-panel[open] > summary { border-bottom:1px solid var(--line); }
  .owned-lands-panel .owned-land-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; padding:12px; }
  .owned-land-card { min-width:0; min-height:122px; display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-sizing:border-box; }
  .owned-land-card.is-deployed { border-color:rgba(47,158,107,.46); }
  .owned-land-card.is-listed { border-color:rgba(177,132,24,.7); }
  .owned-land-card.is-available { border-style:dashed; }
  .owned-land-card-head { display:flex; align-items:center; gap:7px; min-width:0; }
  .owned-land-glyph { width:34px; height:34px; flex:0 0 34px; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; position:relative; border-radius:9px; background:var(--panel2); color:var(--green-deep,var(--green)); border:1px solid var(--line); }
  .owned-land-glyph .land-biome-icon { width:100%; height:100%; display:block; image-rendering:pixelated; }
  .owned-land-glyph .glyph { width:24px; height:24px; fill:currentColor; image-rendering:pixelated; }
  .owned-land-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt); font-size:13px; font-weight:750; }
  .owned-land-level { margin-left:auto; flex:0 0 auto; color:var(--dim); font:600 10px 'JetBrains Mono',monospace; }
  .owned-land-id { color:var(--dim); font-size:10px; line-height:1.25; min-height:1.25em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .owned-land-card-foot { display:flex; align-items:center; gap:7px; margin-top:auto; min-width:0; }
  .owned-land-state { display:inline-flex; align-items:center; gap:5px; min-width:0; color:var(--dim); font-size:10px; font-weight:650; white-space:nowrap; }
  .owned-land-state i { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--dim); }
  .is-deployed .owned-land-state { color:var(--green-deep,var(--green)); }
  .is-deployed .owned-land-state i { background:var(--green); }
  .is-listed .owned-land-state { color:var(--gold); }
  .is-listed .owned-land-state i { background:var(--gold); }
  .owned-land-occupancy { margin-left:auto; color:var(--dim); font-size:9px; white-space:nowrap; }
  .owned-land-replace { align-self:stretch; margin-top:4px; min-height:30px; padding:5px 9px; border:1px solid var(--green); border-radius:7px; background:rgba(47,158,107,.1); color:var(--green-deep,var(--green)); font-family:inherit; font-size:11px; font-weight:700; line-height:1.4; cursor:pointer; }
  .owned-land-replace:hover { background:rgba(47,158,107,.2); }
  @media (max-width: 720px) { .owned-lands-panel { width:100%; margin-top:16px; } }
  @media (max-width: 390px) { .owned-lands-panel .owned-land-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:9px; } .owned-land-card { min-height:112px; padding:9px; } .owned-land-glyph { width:30px; height:30px; flex-basis:30px; } .owned-land-glyph .glyph { width:21px; height:21px; } .owned-land-title { font-size:11px; } .owned-land-state { font-size:9px; } }  #toast {
    position: fixed; top: calc(env(safe-area-inset-top, 0px) + 82px); bottom: auto; left: 50%; transform: translateX(-50%) translateY(-80px);
    background: var(--panel2); border: 1px solid rgba(111,211,168,0.5); color: var(--green);
    padding: 12px 22px; border-radius: 12px; font-size: 13px; z-index: 5000;
    max-width: min(560px, calc(100vw - 24px)); text-align:center; box-shadow:0 10px 28px rgba(15,34,23,.2);
    opacity:0; visibility:hidden; transition:transform .3s ease,opacity .2s ease; pointer-events: none;
  }
  #toast[hidden] { display:none; }
  #toast.show { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }

  .land-weather-bulletin { display:flex; align-items:flex-start; gap:14px; box-sizing:border-box; width:100%; margin:0 0 24px; padding:18px 20px; border:1px solid #c5dbb5; border-radius:14px; background:linear-gradient(110deg,#edf6e5,#fafcf7); color:var(--txt); text-align:left; }
  .land-weather-bulletin[hidden] { display:none; }
  .land-weather-symbol { display:flex; align-items:center; justify-content:center; flex:0 0 42px; height:42px; border-radius:10px; background:#dbeccf; color:var(--green-deep); }
  .land-weather-symbol .glyph { width:24px; height:24px; margin:0; }
  .land-weather-copy { min-width:0; flex:1; }
  .land-weather-heading { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; line-height:1.5; }
  .land-weather-heading strong { font-size:15px; }
  .land-weather-heading span { font-size:13px; }
  .land-weather-heading small { margin-left:auto; padding:3px 8px; border:1px solid #c5dbb5; border-radius:6px; color:var(--dim); font-size:11px; }
  .land-weather-copy p { margin:7px 0 0; font-size:13px; line-height:1.7; }
  .land-weather-copy b { font-weight:600; color:var(--green-deep); }
  .land-weather-copy .land-weather-note { color:var(--dim); font-size:11px; }
  @media(max-width:560px) { .land-weather-bulletin { padding:14px 12px; gap:10px; } .land-weather-symbol { flex-basis:32px; height:32px; } .land-weather-heading small { margin-left:0; } }

  /* ===== ABOUT ===== */
  .abt-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    max-width: 900px; margin: 0 auto;
  }
  .abt-step {
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    padding: 22px 20px;
  }
  .abt-step b { color: var(--green); font-size: 12px; letter-spacing: 2px; }
  .abt-step h4 { margin: 8px 0 6px; font-size: 14px; letter-spacing: 1.5px; }
  .abt-step p { color: var(--dim); font-size: 12.5px; line-height: 1.65; }

  footer {
    border-top: 1px solid var(--line); padding: 30px; text-align: center;
    color: var(--dim); font-size: 12px; letter-spacing: 1px;
  }
  footer .fl { color: var(--green); font-weight: 700; }

  /* ===== WHITEPAPER ===== */
  .wp-flywheel {
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    padding: 24px; margin: 0 auto 40px; max-width: 760px;
  }
  .wp-flywheel svg { width: 100%; height: auto; display: block; }

  .wp-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px; max-width: 1080px; margin: 0 auto 40px;
  }
  .wp-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 20px; position: relative; overflow: hidden;
    transition: transform .2s, border-color .2s;
  }
  .wp-card:hover { transform: translateY(-2px); border-color: var(--dim); }
  .wp-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 60%, currentColor 200%);
    opacity: 0.08; pointer-events: none;
  }
  .wp-card.green  { color: #6fd3a8; }
  .wp-card.purple { color: #a78bfa; }
  .wp-card.red    { color: #ef4444; }
  .wp-card.gold   { color: #fbbf24; }
  .wp-tag {
    display: inline-block; padding: 4px 10px; border-radius: 6px;
    background: currentColor; color: #0b0b12; font-size: 10px;
    font-weight: 800; letter-spacing: 1.5px; margin-bottom: 10px;
  }
  .wp-card h3 { color: var(--txt); font-size: 17px; margin: 6px 0 8px; }
  .wp-card p { color: var(--dim); font-size: 12.5px; line-height: 1.6; margin: 0 0 12px; }
  .wp-stat {
    border-top: 1px solid var(--line); padding-top: 10px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .wp-stat span { color: var(--dim); font-size: 11px; letter-spacing: 0.5px; }
  .wp-stat b { color: currentColor; font-size: 14px; font-family: var(--mono); }

  .wp-params {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 24px 28px; max-width: 760px; margin: 0 auto 24px;
  }
  .wp-params h3 {
    color: var(--green); font-size: 12px; letter-spacing: 2px;
    margin: 0 0 14px; font-weight: 700;
  }
  .wp-params table { width: 100%; border-collapse: collapse; }
  .wp-params td { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .wp-params td:first-child { color: var(--dim); width: 140px; }
  .wp-params td:nth-child(2) { color: var(--green); font-family: var(--mono); width: 180px; }
  .wp-params td:last-child { color: var(--txt); }
  .wp-params tr:last-child td { border-bottom: none; }

  .wp-link {
    max-width: 760px; margin: 0 auto 40px;
  }
  .wp-link a {
    display: flex; align-items: center; gap: 16px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 16px 20px; color: var(--txt); text-decoration: none;
    transition: border-color .15s, background .15s;
  }
  .wp-link a:hover { border-color: var(--gold); background: rgba(212,168,67,.05); }
  .wp-link-icon { font-size: 24px; }
  .wp-link a div { flex: 1; }
  .wp-link a b { display: block; font-size: 13px; letter-spacing: 1.5px; color: var(--gold); }
  .wp-link a small { display: block; color: var(--dim); font-size: 11px; margin-top: 4px; }
  .wp-link-arrow { color: var(--gold); font-size: 20px; }

  /* ===== RESPONSIVE ===== */
  /* Tablet — keep layouts recognizable but compact. */
  @media (max-width: 720px) {
    :root { --nav-offset: 134px; }
    nav { top: 10px; width: calc(100% - 20px); padding: 8px 10px; gap: 8px; flex-wrap: wrap; border-radius: 12px; }
    nav .logo { margin-right: auto; }
    nav .logo b { display: block; }
    .logo b { font-size: 15px; letter-spacing: 2px; }
    nav .links { order: 3; width: 100%; gap: 0; margin: 0; padding: 0; flex-wrap: nowrap; box-shadow: none; border: 0; border-radius: 6px; }
    nav .links a { flex: 1; min-height: 44px; font-size: 12px; letter-spacing: 0; padding: 8px 5px; }
    .nav-mascot { display: none; }
    .nav-right { gap: 8px; }
    .coin-pill { padding: 5px 9px; font-size: 11px; gap: 4px; }
    .hero { padding: 156px 16px 32px; }
    .abt-grid { grid-template-columns: 1fr; gap: 12px; }
    .hero h1 { font-size: 36px; letter-spacing: 2px; }
    .hero .tagline { font-size: 13px; letter-spacing: 0.5px; margin-bottom: 24px; }
    .hero .cta-row { gap: 10px; flex-wrap: wrap; }
    .hero .cta-row .btn { padding: 11px 20px; font-size: 13px; }
    .hero .stats { gap: 22px; margin-top: 28px; }
    .hero .stats b { font-size: 18px; }

    section { padding: 48px 18px; }
    .sec-head { margin-bottom: 28px; }
    .sec-head h2 { font-size: 22px; letter-spacing: 2px; }
    .sec-head p { font-size: 13px; }

    .mint-card { padding: 22px; gap: 20px; }
    .mint-stage .av-wrap { width: 180px; height: 180px; }
    .mint-stage canvas { width: 180px; height: 180px; }
    .mint-info h3 { font-size: 18px; }
    .mint-info p { font-size: 12.5px; line-height: 1.6; }

    .blind-wrap { gap: 18px; }
    .box-stage { padding: 20px; }
    .box-card { padding: 14px; }
    .mystery-box { width: 110px; height: 110px; font-size: 42px; margin-bottom: 14px; }
    .reveal-wrap { width: 130px; height: 130px; }
    .reveal-wrap canvas { width: 130px; height: 130px; }
    .reveal-stage { width: 200px; height: 200px; }
    .reveal-row { gap: 16px; }
    .reveal-side { min-width: 80px; gap: 8px; }
    .reveal-side .tag { font-size: 10px; padding: 3px 8px; }

    .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
    .filter-bar .filter-group { flex-direction: row; justify-content: space-between; gap: 8px; }
    .filter-bar .flabel { font-size: 11px; }
    .filter-bar select { flex: 1; min-width: 0; }

    .world-hud { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
    .hud-row { font-size: 11px; gap: 6px; }
    .hud-label { min-width: 48px; font-size: 10px; }

    .world-switcher { gap: 8px; }
    .ws-card { padding: 8px 10px; gap: 8px; }
    .ws-card .ws-theme { font-size: 11px; }

    .world-stage { width: min(960px, 96vw); }
    .world-tip { font-size: 11px; }

    .wp-flywheel, .wp-params { padding: 18px; max-width: 100%; }
    .wp-params td { font-size: 12px; }
    .wp-params td:first-child { width: 100px; }
    .wp-params td:nth-child(2) { width: 130px; }
    footer { padding: 22px 14px; font-size: 11px; }

    .modal-card { padding: 18px; max-width: 92vw; }
  }

  /* Phone — single column, tight padding, finger-sized targets. */
  @media (max-width: 480px) {
    nav { padding: 6px 8px; gap: 6px; }
    .logo svg { width: 24px; height: 24px; }
    .logo b { font-size: 12px; letter-spacing: 1px; }
    /* single row, never taller: shrink the font (viewport-scaled) instead of
       wrapping to a second line — ja/zh labels are longer so a wrap used to
       grow the nav vertically. nowrap + clamp keeps it one row at any width. */
    nav .links { gap: 0; flex-wrap: nowrap; }
    nav .links a { font-size: 11px; padding: 8px 4px; letter-spacing: 0; }

    .hero { padding: 148px 16px 28px; }
    .hero h1 { font-size: 28px; letter-spacing: 1.5px; line-height: 1.1; }
    .hero .tagline { font-size: 14px; line-height: 1.65; margin-bottom: 24px; }
    .hero .cta-row .btn { padding: 10px 14px; font-size: 12px; }
    .hero .stats { gap: 14px; margin-top: 22px; font-size: 10px; }
    .hero .stats b { font-size: 14px; }

    section { padding: 36px 12px; }
    .sec-head { margin-bottom: 22px; }
    .sec-head h2 { font-size: 18px; letter-spacing: 1.5px; }
    .sec-head p { font-size: 13px; line-height: 1.65; }
    .sec-head .chip { font-size: 10px; padding: 4px 10px; }

    .btn { padding: 9px 14px; font-size: 12px; }

    .mint-card { padding: 14px; gap: 14px; }
    .mint-stage .av-wrap { width: 140px; height: 140px; }
    .mint-stage canvas { width: 140px; height: 140px; }
    .mint-info { max-width: 100%; }
    .mint-info h3 { font-size: 16px; }
    .mint-info p { font-size: 12px; line-height: 1.55; }
    .mint-input { font-size: 16px; padding: 10px; }
    .tag { font-size: 10px; padding: 3px 8px; }

    .box-stage { padding: 14px; border-radius: 14px; }
    .box-card { width: 100%; padding: 10px; }
    .box-card .box-icon { width: 56px; height: 56px; margin-bottom: 10px; border-radius: 8px; }
    .box-picker { gap: 6px; }
    .box-detail { padding: 0; }
    .mystery-box { width: 88px; height: 88px; font-size: 34px; }
    .reveal-wrap { width: 110px; height: 110px; }
    .reveal-wrap canvas { width: 110px; height: 110px; }
    .reveal-stage { width: 180px; height: 180px; }
    /* phone: side columns get narrower; if a column is empty skip it via :empty */
    .reveal-row { gap: 12px; }
    .reveal-side { min-width: 64px; max-width: 110px; gap: 6px; }
    .reveal-side .tag { font-size: 9px; padding: 3px 7px; }

    .filter-bar { padding: 12px; }
    .filter-bar input[type=range] { flex: 1; }

    .world-hud { padding: 8px 10px; }
    .hud-info { gap: 4px; }
    .hud-row { font-size: 10px; gap: 6px; }
    .hud-label { min-width: 42px; font-size: 9px; }
    .hud-addr { font-size: 10px; }
    .hud-val { font-size: 11px; }

    .hud-seats { gap: 6px; margin-bottom: 8px; }
    .hud-seat { width: 46px; padding: 4px 3px 3px; }
    .hud-seat .seat-av { width: 26px; height: 26px; }
    .hud-seat .seat-av canvas { width: 26px; height: 26px; }
    .hud-seat .sid { font-size: 7px; }

    .world-stage { width: 100%; margin: 0 auto; }
    .world-loading { min-height: 58vw; padding: 24px 16px; }  /* 跟 100vw 画布同高 */
    .zoom-ctrl { right: 6px; bottom: 6px; padding: 4px; }
    .zoom-ctrl button { width: 40px; height: 40px; font-size: 16px; }
    .zoom-ctrl .zoom-pct { min-width: 36px; font-size: 10px; }
    .world-tip { font-size: 10px; padding: 0 8px; }

    .world-switcher { gap: 6px; padding-bottom: 4px; }
    .ws-card { padding: 6px 8px; gap: 6px; grid-template-columns: 1fr auto; grid-template-areas: "label nav" "av buy"; }
    .ws-card .ws-label { grid-area: label; }
    .ws-card .ws-av { grid-area: av; width: 32px; height: 32px; }
    .ws-card .ws-av canvas { width: 28px; height: 28px; }
    /* ws-buy only renders on EMPTY slots — keep grid-area "nav" so the buy-wrap
       can lay out in the "buy" cell when both cells exist on mobile. */
    .ws-card .ws-buy { grid-area: nav; width: 28px; height: 28px; font-size: 12px; }
    .ws-card .ws-buy-wrap { grid-area: buy; }
    .ws-card .ws-theme { font-size: 11px; }
    .ws-card .ws-slot, .ws-card .ws-cap, .ws-card .ws-cost { font-size: 8px; }

    .coll-row { gap: 8px; }
    .coll-item { width: 100%; max-width: 100px; padding: 8px; }

    .modal { padding: 12px; }
    .modal-card { padding: 14px; width: 100%; max-width: 100%; border-radius: 14px; }
    .creature-card { padding: 14px; }
    .creature-head { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    .creature-av { width: 80px; height: 80px; }
    .creature-id { font-size: 11px; }
    .creature-name { font-size: 14px; }
    .creature-mini { font-size: 11px; }
    .creature-traits { gap: 5px; }
    .creature-traits .tag { font-size: 9px; padding: 3px 7px; }

    .swap-row { flex-direction: column; gap: 4px; }
    .swap-input { width: 100%; }

    .wp-flywheel, .wp-params { padding: 14px; }
    .wp-grid { grid-template-columns: 1fr; }
    .wp-card { padding: 16px; }
    .wp-card h3 { font-size: 15px; }
    .wp-card p { font-size: 12px; }

    #toast { top: calc(env(safe-area-inset-top, 0px) + 70px); bottom: auto; padding: 10px 16px; font-size: 12px; }
    footer { padding: 20px 10px; font-size: 10px; }
  }

  /* ===== PIXEL GLYPHS (replaces emoji chrome) =====
     Crisp 8x8 monochrome vector icons rendered at any size via shape-rendering:
     crispEdges. Color follows currentColor so each call site controls the tint
     via CSS (no emoji font = no "Chinese indie game" feel). */
  .glyph {
    display: inline-block;
    width: 28px; height: 28px;
    vertical-align: -7px;
    fill: currentColor;
    shape-rendering: crispEdges;
  }
  .glyph.lg   { width: 42px; height: 42px; vertical-align: -11px; }
  .glyph.sm   { width: 16px; height: 16px; vertical-align: -3px; }
  .glyph.tiny { width: 12px; height: 12px; vertical-align: -2px; }
  /* glyph used as a section/box art center — fill is full box */
  .glyph-art { display: flex; align-items: center; justify-content: center; }
  /* Shared control and content rhythm; canvas artwork stays nearest-neighbor. */
  .btn,.lang-dd-btn,.mint-random-btn,.acct-logout { min-height: 44px; }
  .btn { border-radius: 8px; }
  .btn:not(.ghost):not(.account):not(.google-btn) { color: #fff; }
  .btn:disabled { cursor: not-allowed; transform: none; }
  .lang-dd-menu,.acct-dd-menu { visibility: hidden; }
  .lang-dd.open .lang-dd-menu,.acct-dd.open .acct-dd-menu { visibility: visible; }
  .lang-dd-item { display: block; width: 100%; border: 0; text-align: start; background: transparent; font: inherit; min-height: 40px; }
  .hero .tagline { max-width: 62ch; margin-inline: auto; line-height: 1.65; }
  .sec-head p { max-width: 62ch; margin-inline: auto; }
  .mint-card,.box-stage,.world-gate { border-radius: 12px; }
  .box-card { border-radius: 8px; }
  .box-cost,.tp-bal,.pay-price { font-variant-numeric: tabular-nums; }
  #loginModal h3 { padding-right: 30px; }
  .field-error { color: #a83333; font-size: 13px; line-height: 1.5; margin-top: 8px; }
  [aria-invalid="true"] { border-color: #a83333 !important; }
  #loginAddress { font-size: 16px; }
  @media (max-width:480px) {
    .mint-info p { font-size: 13px; line-height: 1.7; }
    .mint-info { width: 100%; }
    .mint-info .btn { width: 100%; }
    .mint-stage .av-wrap,.mint-stage canvas { width: 160px; height: 160px; }
    .reveal-row { flex-wrap: wrap; gap: 8px; }
    .reveal-stage { order: -1; flex-basis: 100%; }
    .nav-right { gap: 5px; }
    .coin-pill { font-size: 10px; padding: 5px; }
    .acct-dd-menu { width: min(280px,calc(100vw - 30px)); right: -54px; }
    .box-card .box-cost { font-size: 12px; }
    .box-card .box-name { font-size: 12px; }
    #toast { max-width: calc(100vw - 24px); white-space: normal; }
  }
  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto; }
    *,*::before,*::after { animation: none !important; transition: none !important; }
  }

.mint-launch-note{display:inline-flex;align-items:center;margin:10px 0 6px;padding:5px 10px;border:1px solid rgba(78,192,137,.35);border-radius:999px;background:rgba(78,192,137,.14);color:#9cf2c0;font-weight:700;font-size:12px;line-height:1.2}