/* ============================================================================
   PACHIUNGO: ROGUE WORLDS — styles.css
   ============================================================================ */

/* default palette (Púrpura Neón) — React overrides on :root when tweaked */
:root{
  --bg-0:#0b0418; --bg-1:#150826; --bg-glow:#3a0d63;
  --neon:#c44dff; --neon-2:#ff3df0; --accent:#ffd66b;
  --ball:#e6b8ff; --ink:#f3e9ff;

  --ink-dim: color-mix(in srgb, var(--ink) 55%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink) 32%, transparent);
  --line: color-mix(in srgb, var(--neon) 26%, transparent);
  --panel-bg: color-mix(in srgb, var(--bg-1) 78%, #000 22%);
  --glass: color-mix(in srgb, var(--bg-1) 60%, transparent);

  --f-display:"Orbitron", system-ui, sans-serif;
  --f-ui:"Chakra Petch", system-ui, sans-serif;
  --f-sign:"Monoton", system-ui, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:var(--f-ui);
  color:var(--ink);
  background:var(--bg-0);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* animated bokeh / nebula backdrop */
#bg-fx{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1200px 800px at 18% -10%, color-mix(in srgb,var(--bg-glow) 70%, transparent), transparent 60%),
    radial-gradient(1000px 700px at 110% 120%, color-mix(in srgb,var(--neon) 26%, transparent), transparent 55%),
    radial-gradient(800px 600px at 90% 0%, color-mix(in srgb,var(--neon-2) 16%, transparent), transparent 60%),
    var(--bg-0);
}
#bg-fx::after{
  content:""; position:absolute; inset:-20%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, color-mix(in srgb,var(--accent) 80%,transparent), transparent),
    radial-gradient(2px 2px at 60% 70%, color-mix(in srgb,var(--neon) 80%,transparent), transparent),
    radial-gradient(3px 3px at 80% 20%, color-mix(in srgb,var(--neon-2) 70%,transparent), transparent),
    radial-gradient(2px 2px at 35% 80%, color-mix(in srgb,var(--accent) 60%,transparent), transparent),
    radial-gradient(2px 2px at 90% 60%, color-mix(in srgb,var(--neon) 60%,transparent), transparent);
  background-size:auto;
  opacity:.5; animation:drift 40s linear infinite;
}
@keyframes drift{ from{transform:translateY(0)} to{transform:translateY(-40px)} }

/* ---------- App shell ---------- */
.app{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column;
}

/* top bar */
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb,var(--bg-1) 85%,transparent), transparent);
  backdrop-filter:blur(8px);
  flex:0 0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand .avatar{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  background-size:cover; background-position:center 18%;
  border:2px solid color-mix(in srgb,var(--neon) 70%, transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--neon) 60%,transparent), inset 0 0 8px rgba(0,0,0,.5);
}
.brand .titles{ min-width:0; }
.brand .game-name{
  font-family:var(--f-display); font-weight:800; font-size:15px; letter-spacing:.14em;
  line-height:1; color:var(--ink);
  text-shadow:0 0 10px color-mix(in srgb,var(--neon) 70%, transparent);
}
.brand .game-name b{ color:var(--neon-2); }
.brand .world-name{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); margin-top:3px;
}
.brand .world-name span{ color:var(--accent); }

.top-meters{ display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end;}

/* a meter pill (energy, dopa, score) */
.meter{
  display:flex; align-items:center; gap:8px;
  padding:6px 12px 6px 10px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.meter .m-ico{ width:18px; height:18px; display:grid; place-items:center; color:var(--accent); filter:drop-shadow(0 0 5px currentColor);}
.meter .m-ico svg{ width:100%; height:100%; }
.meter .m-val{ font-family:var(--f-display); font-weight:700; font-size:15px; line-height:1; }
.meter .m-lbl{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); line-height:1; margin-top:2px;}
.meter .m-text{ display:flex; flex-direction:column; }
.meter.charges .m-ico{ color:var(--neon); }
.meter.dopa .m-ico{ color:var(--neon-2); }

/* ---------- Play area ---------- */
.play{
  flex:1 1 auto; min-height:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  position:relative;
}

/* board column */
.board-col{
  grid-area:board;
  display:flex; flex-direction:column; align-items:center;
  min-height:0; min-width:0; padding:12px;
  position:relative;
}
.board-frame{
  position:relative; flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  width:100%;
}
/* fixed-size internal board, scaled by JS */
.board{
  position:relative;
  flex:0 0 auto;
  width:var(--board-w,460px); height:var(--board-h,780px);
  transform-origin:center center;
  border-radius:22px;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--bg-glow) 55%,transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb,var(--bg-1) 92%,#000), color-mix(in srgb,var(--bg-0) 96%,#000));
  border:1px solid color-mix(in srgb,var(--neon) 40%,transparent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 0 40px color-mix(in srgb,var(--neon) 30%,transparent),
    inset 0 0 60px color-mix(in srgb,var(--bg-glow) 40%,transparent);
  overflow:hidden;
}
.board canvas{ position:absolute; inset:0; width:100%; height:100%; }
.board-overlay{ position:absolute; inset:0; pointer-events:none; }

/* drop indicator */
.dropper{
  position:absolute; top:0; width:34px; height:34px; margin-left:-17px;
  pointer-events:none; transform:translateY(-2px);
  display:grid; place-items:center;
}
.dropper::before{
  content:""; position:absolute; top:0; left:50%; width:2px; height:46px;
  background:linear-gradient(var(--accent), transparent);
  transform:translateX(-50%); opacity:.6;
}
.dropper .orb{
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--ball) 55%, var(--neon));
  box-shadow:0 0 14px var(--neon), 0 0 26px color-mix(in srgb,var(--neon-2) 70%,transparent);
}

/* bin labels strip under board */
.bins{
  position:absolute; left:0; right:0; bottom:0; height:64px;
  display:flex; pointer-events:none;
}
.bin{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:2px; padding-bottom:8px; position:relative;
  border-left:1px solid color-mix(in srgb,var(--neon) 18%,transparent);
}
.bin:first-child{ border-left:0; }
.bin .b-ico{ width:24px; height:24px; color:var(--rc,#fff); filter:drop-shadow(0 0 6px currentColor); }
.bin .b-ico svg{ width:100%; height:100%; }
.bin .b-name{ font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.bin.flash{ animation:binflash .5s ease; }
@keyframes binflash{ 0%{background:color-mix(in srgb,var(--rc) 50%,transparent);} 100%{background:transparent;} }
.bin.qg::after{
  content:"×2"; position:absolute; top:4px; left:50%; transform:translateX(-50%);
  font-family:var(--f-display); font-weight:700; font-size:11px; color:var(--accent);
  text-shadow:0 0 8px var(--accent);
}

/* launch bar under board */
.launch-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  margin-top:10px; width:100%; max-width:var(--board-w,460px); justify-content:space-between;
}
.charge-track{ flex:1 1 auto; }
.charge-track .ct-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px;}
.charge-track .ct-lbl{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.charge-track .ct-val{ font-family:var(--f-display); font-weight:700; font-size:13px;}
.charge-bar{ height:8px; border-radius:999px; background:color-mix(in srgb,var(--bg-1) 80%,#000); border:1px solid var(--line); overflow:hidden;}
.charge-bar i{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--neon), var(--neon-2));
  box-shadow:0 0 12px var(--neon); transition:width .25s ease;}

/* buttons */
.btn{
  font-family:var(--f-display); font-weight:700; letter-spacing:.08em;
  border:1px solid var(--line); background:var(--glass); color:var(--ink);
  padding:11px 18px; border-radius:12px; cursor:pointer; font-size:13px;
  display:inline-flex; align-items:center; gap:8px; transition:.15s; white-space:nowrap;
}
.btn:hover{ border-color:var(--neon); box-shadow:0 0 16px color-mix(in srgb,var(--neon) 50%,transparent); transform:translateY(-1px);}
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn.primary{ background:linear-gradient(135deg, var(--neon), var(--neon-2)); border-color:transparent; color:#fff;
  box-shadow:0 6px 20px color-mix(in srgb,var(--neon) 45%,transparent);}
.btn.primary:hover{ filter:brightness(1.08); box-shadow:0 8px 28px color-mix(in srgb,var(--neon) 60%,transparent);}
.btn .b-ico{ width:16px; height:16px; }
.btn .b-ico svg{ width:100%; height:100%; }
.btn.ghost{ background:transparent; }
.btn.auto-on{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 16px color-mix(in srgb,var(--accent) 45%,transparent);}

/* ---------- Panels ---------- */
.panel{
  background:var(--panel-bg);
  border:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.panel-left{ grid-area:left; border-left:0; border-top:0; border-bottom:0; }
.panel-right{ grid-area:right; border-right:0; border-top:0; border-bottom:0; }
.panel-h{
  flex:0 0 auto; padding:14px 16px 10px; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--line);
}
.panel-h .ph-ico{ width:16px; height:16px; color:var(--neon); filter:drop-shadow(0 0 6px currentColor);}
.panel-h .ph-ico svg{ width:100%; height:100%; }
.panel-h h2{ font-family:var(--f-display); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.panel-h .ph-sub{ margin-left:auto; font-size:10px; color:var(--ink-faint); letter-spacing:.1em;}
.panel-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 14px 24px; display:flex; flex-direction:column; gap:14px;}
.panel-body::-webkit-scrollbar{ width:8px; }
.panel-body::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--neon) 30%,transparent); border-radius:8px; border:2px solid transparent; background-clip:content-box;}

/* resource readout grid */
.res-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.res-chip{
  display:flex; align-items:center; gap:9px; padding:8px 10px;
  border-radius:11px; background:color-mix(in srgb,var(--bg-0) 55%,transparent);
  border:1px solid color-mix(in srgb,var(--rc) 30%,transparent);
}
.res-chip .rc-ico{ width:22px; height:22px; color:var(--rc); filter:drop-shadow(0 0 6px currentColor); flex:0 0 auto;}
.res-chip .rc-ico svg{ width:100%; height:100%; }
.res-chip .rc-meta{ min-width:0; }
.res-chip .rc-val{ font-family:var(--f-display); font-weight:700; font-size:16px; line-height:1; font-variant-numeric:tabular-nums;}
.res-chip .rc-name{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}
.res-chip.bump{ animation:bump .35s ease; }
@keyframes bump{ 0%{transform:scale(1);} 40%{transform:scale(1.08); border-color:var(--rc);} 100%{transform:scale(1);} }

.section-label{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:2px 0 -4px;}

/* build cards */
.build-card{
  border-radius:14px; padding:12px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb,var(--bg-1) 80%,transparent), color-mix(in srgb,var(--bg-0) 70%,transparent));
  border:1px solid var(--line); transition:.15s;
}
.build-card.ready{ border-color:color-mix(in srgb,var(--accent) 70%,transparent); box-shadow:0 0 18px color-mix(in srgb,var(--accent) 22%,transparent);}
.build-card.built{ opacity:.55; }
.build-card .bc-top{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px;}
.build-card .bc-name{ font-family:var(--f-display); font-weight:700; font-size:14px;}
.build-card .bc-tier{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-left:auto;}
.build-card .bc-blurb{ font-size:11px; color:var(--ink-dim); line-height:1.35; margin-bottom:10px;}
.build-card .bc-cost{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.cost-tag{ display:flex; align-items:center; gap:4px; font-size:11px; padding:3px 7px; border-radius:7px;
  background:color-mix(in srgb,var(--bg-0) 60%,transparent); border:1px solid var(--line); font-variant-numeric:tabular-nums;}
.cost-tag .ct-ico{ width:13px; height:13px; color:var(--cc); }
.cost-tag .ct-ico svg{ width:100%; height:100%; }
.cost-tag.ok{ color:var(--ink); border-color:color-mix(in srgb,var(--cc) 50%,transparent);}
.cost-tag.lack{ color:var(--ink-faint); }
.build-card .bc-foot{ display:flex; align-items:center; gap:8px; }
.build-card .bc-reward{ font-size:10px; color:var(--ink-faint); letter-spacing:.06em;}
.build-card .bc-reward b{ color:var(--accent); }
.build-card .bc-btn{ margin-left:auto; padding:7px 14px; font-size:11px; border-radius:9px; }
.built-stamp{ position:absolute; top:10px; right:-30px; transform:rotate(28deg); background:var(--accent); color:#1a0a00;
  font-family:var(--f-display); font-weight:800; font-size:10px; letter-spacing:.2em; padding:3px 34px; }

/* fragment progress */
.frag{ border-radius:14px; padding:13px 14px; border:1px solid var(--line);
  background:linear-gradient(135deg, color-mix(in srgb,var(--neon) 14%,transparent), transparent);}
.frag .fr-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px;}
.frag .fr-lbl{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);}
.frag .fr-pct{ font-family:var(--f-display); font-weight:800; font-size:22px; color:var(--accent); text-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);}
.frag .fr-bar{ height:10px; border-radius:999px; background:color-mix(in srgb,var(--bg-0) 70%,#000); overflow:hidden; border:1px solid var(--line);}
.frag .fr-bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--neon),var(--accent)); box-shadow:0 0 14px var(--accent); transition:width .5s cubic-bezier(.3,.8,.3,1);}

/* active tech tokens list */
.tech-list{ display:flex; flex-direction:column; gap:8px; }
.tech-row{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px;
  background:color-mix(in srgb,var(--bg-0) 50%,transparent); border:1px solid var(--tr,var(--line)); }
.tech-row .tr-ico{ width:24px; height:24px; color:var(--tr); filter:drop-shadow(0 0 6px currentColor); flex:0 0 auto;}
.tech-row .tr-ico svg{ width:100%; height:100%; }
.tech-row .tr-meta{ min-width:0; flex:1 1 auto;}
.tech-row .tr-name{ font-family:var(--f-display); font-weight:700; font-size:12px; }
.tech-row .tr-rar{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--tr);}
.tech-row .tr-x{ font-size:11px; color:var(--ink-faint); cursor:pointer; pointer-events:auto; padding:4px; border-radius:6px;}
.tech-row .tr-x:hover{ color:var(--neon-2); background:color-mix(in srgb,var(--neon-2) 18%,transparent);}
.empty-note{ font-size:11px; color:var(--ink-faint); line-height:1.45; padding:6px 2px;}
.qg-lanes{ display:flex; gap:4px; margin-top:6px; }
.qg-lane{ width:20px; height:20px; border-radius:6px; cursor:pointer; font:700 10px var(--f-ui);
  background:color-mix(in srgb,var(--bg-0) 60%,transparent); color:var(--ink-faint);
  border:1px solid color-mix(in srgb,var(--rc) 40%,transparent); }
.qg-lane.on{ background:var(--rc); color:#0a0418; box-shadow:0 0 8px var(--rc); }
@keyframes ringpop{ from{transform:scale(1); opacity:.9;} to{transform:scale(9); opacity:0;} }

/* worlds map */
.worlds{ display:flex; flex-direction:column; gap:6px; }
.world-row{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px; border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg-0) 45%,transparent);}
.world-row.active{ border-color:var(--accent); box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent) 14%,transparent);}
.world-row.locked{ opacity:.45; }
.world-row .wr-dot{ width:10px; height:10px; border-radius:50%; background:var(--ink-faint); flex:0 0 auto;}
.world-row.active .wr-dot{ background:var(--accent); box-shadow:0 0 10px var(--accent);}
.world-row .wr-meta{ min-width:0; flex:1 1 auto;}
.world-row .wr-name{ font-size:12px; font-weight:600;}
.world-row .wr-sub{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);}
.world-row .wr-lock{ font-size:11px; color:var(--ink-faint);}
.world-row.go{ cursor:pointer; transition:border-color .18s, transform .12s, box-shadow .18s; }
.world-row.go:hover{ border-color:var(--neon); transform:translateX(2px);
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--neon) 12%,transparent); }
.world-row.go .wr-dot{ background:var(--neon); box-shadow:0 0 8px var(--neon); }
.world-row .wr-go{ font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--neon); opacity:.7; white-space:nowrap; }
.world-row.go:hover .wr-go{ opacity:1; }

/* collection */
.collect{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.creature{ border-radius:11px; padding:10px; border:1px solid var(--cr,var(--line)); text-align:center;
  background:color-mix(in srgb,var(--bg-0) 45%,transparent); position:relative; }
.creature.locked{ opacity:.4; filter:grayscale(.6); }
.creature .cr-name{ font-size:11px; font-weight:600; }
.creature .cr-rar{ font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--cr); margin-top:2px;}
.creature .cr-emoji{ font-size:22px; }

/* ---------- Tab bar (mobile) ---------- */
.tabbar{ display:none; }

/* ---------- Modals ---------- */
.scrim{
  position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  background:color-mix(in srgb,#000 70%, var(--bg-glow) 30%); backdrop-filter:blur(6px); padding:20px;
}
.scrim.show{ display:flex; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }

.draft{ width:min(960px, 100%); text-align:center; }
.draft-h{ margin-bottom:6px; }
.draft-kicker{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); }
.draft-title{ font-family:var(--f-display); font-weight:800; font-size:clamp(22px,3vw,34px); letter-spacing:.04em;
  text-shadow:0 0 22px color-mix(in srgb,var(--neon) 60%,transparent); margin:4px 0 4px;}
.draft-sub{ font-size:13px; color:var(--ink-dim); margin-bottom:26px;}
.draft-cards{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

/* APEX-style trading card */
.tcard{
  width:212px; max-width:42vw; aspect-ratio:5/7; border-radius:16px; cursor:pointer; position:relative;
  padding:3px; background:linear-gradient(150deg, var(--tc) 0%, color-mix(in srgb,var(--tc) 30%,#000) 50%, var(--tc) 100%);
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb,var(--tc) 50%,transparent);
  transition:transform .18s cubic-bezier(.3,.8,.3,1), box-shadow .18s; transform:translateY(0);
}
.tcard:hover{ transform:translateY(-10px) scale(1.03); box-shadow:0 26px 60px rgba(0,0,0,.7), 0 0 30px var(--tc);}
.tcard-inner{
  height:100%; border-radius:13px; overflow:hidden; position:relative;
  background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--tc) 40%,transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  display:flex; flex-direction:column;
}
.tcard-frame{ position:absolute; inset:7px; border:1.5px solid color-mix(in srgb,var(--accent) 60%,transparent); border-radius:9px; pointer-events:none;
  box-shadow:inset 0 0 20px color-mix(in srgb,var(--tc) 26%,transparent);}
.tcard-top{ display:flex; align-items:center; justify-content:space-between; padding:13px 14px 0;}
.tcard-brand{ font-family:var(--f-display); font-weight:800; font-size:10px; letter-spacing:.18em; color:var(--accent);}
.tcard-rar{ font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tc); border:1px solid var(--tc); border-radius:5px; padding:2px 6px;}
.tcard-art{ flex:1 1 auto; display:grid; place-items:center; position:relative; }
.tcard-art .big-ico{ width:46%; color:var(--tc); filter:drop-shadow(0 0 22px var(--tc));}
.tcard-art .big-ico svg{ width:100%; height:100%; }
.tcard-art .halo{ position:absolute; width:58%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--tc) 40%,transparent), transparent 70%); animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{ 0%,100%{transform:scale(.9); opacity:.6;} 50%{transform:scale(1.08); opacity:1;} }
.tcard-name{ font-family:var(--f-display); font-weight:800; font-size:15px; letter-spacing:.02em; padding:0 14px; text-align:center;
  text-shadow:0 0 12px var(--tc);}
.tcard-desc{ font-size:11px; color:var(--ink-dim); line-height:1.4; padding:7px 16px 16px; text-align:center; min-height:54px;}
.tcard-foot{ display:flex; align-items:center; justify-content:center; gap:6px; padding:0 12px 12px;}
.tcard-foot .tf-brand{ font-family:var(--f-display); font-weight:700; font-size:9px; letter-spacing:.2em; color:var(--accent); opacity:.8;}

.draft-skip{ margin-top:26px; }

/* world complete modal */
.complete{ width:min(560px,100%); text-align:center; padding:36px 30px;
  border-radius:22px; border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--bg-glow) 60%,transparent), var(--bg-1));
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 40px color-mix(in srgb,var(--accent) 30%,transparent);}
.complete .c-kicker{ font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--accent);}
.complete h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(26px,4vw,40px); margin:10px 0 6px;
  text-shadow:0 0 26px color-mix(in srgb,var(--neon) 70%,transparent);}
.complete p{ color:var(--ink-dim); font-size:14px; line-height:1.5; max-width:42ch; margin:0 auto 22px;}

/* toasts */
#toasts{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast{ display:flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px;
  background:var(--panel-bg); border:1px solid var(--toc,var(--neon)); color:var(--ink); font-size:13px;
  box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 18px color-mix(in srgb,var(--toc,var(--neon)) 30%,transparent);
  animation:toastin .3s ease, toastout .3s ease 2.4s forwards; max-width:80vw;}
.toast .t-ico{ width:18px; height:18px; color:var(--toc,var(--neon)); flex:0 0 auto;}
.toast .t-ico svg{ width:100%; height:100%; }
@keyframes toastin{ from{transform:translateY(14px); opacity:0;} to{transform:translateY(0); opacity:1;} }
@keyframes toastout{ to{transform:translateY(-8px); opacity:0;} }

/* floating score popups over board */
.popup{ position:absolute; font-family:var(--f-display); font-weight:800; font-size:15px; pointer-events:none;
  text-shadow:0 0 10px currentColor; animation:floatup 1s ease forwards; z-index:5;}
@keyframes floatup{ 0%{transform:translate(-50%,0); opacity:0;} 15%{opacity:1;} 100%{transform:translate(-50%,-46px); opacity:0;} }

/* synaptic objective HUD (top of board) */
.syn-hud{ position:absolute; top:10px; left:50%; transform:translateX(-50%) translateY(-6px);
  z-index:6; display:none; align-items:center; gap:10px; padding:6px 13px; border-radius:999px;
  background:color-mix(in srgb,var(--bg-0) 74%, transparent);
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 26%,transparent); backdrop-filter:blur(6px);
  pointer-events:none; white-space:nowrap; opacity:0; transition:opacity .3s ease, transform .3s ease;}
.syn-hud.show{ display:flex; opacity:1; transform:translateX(-50%) translateY(0); }
.syn-hud .syn-lbl{ font-family:var(--f-display); font-weight:800; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent);}
.syn-hud .syn-chain{ display:flex; align-items:center; gap:0; }
.syn-hud .syn-dot{ width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  font:700 10px var(--f-display); color:#160a00; background:var(--accent); box-shadow:0 0 10px var(--accent);}
.syn-hud .syn-link{ width:13px; height:2px; background:color-mix(in srgb,var(--accent) 60%,transparent);}
.syn-hud .syn-hint{ font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}

/* draft replacement cards */
.tcard.repl .tf-brand{ color:var(--neon-2); }
.tcard.repl:hover .tcard-inner{ box-shadow:inset 0 0 26px color-mix(in srgb,var(--neon-2) 32%,transparent); }

/* intro overlay */
#intro{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 10%, color-mix(in srgb,var(--bg-glow) 70%,transparent), var(--bg-0)); padding:24px;
  transition:opacity .6s ease;}
.intro-card{ max-width:620px; text-align:center; }
.intro-card .ic-sign{ font-family:var(--f-sign); font-size:clamp(34px,8vw,72px); line-height:1; color:var(--neon);
  text-shadow:0 0 18px var(--neon), 0 0 40px color-mix(in srgb,var(--neon-2) 70%,transparent); margin-bottom:6px;}
.intro-card .ic-sub{ font-family:var(--f-display); font-weight:700; letter-spacing:.34em; text-transform:uppercase; font-size:13px; color:var(--accent); margin-bottom:24px;}
.intro-card .ic-luna{ width:150px; height:150px; border-radius:50%; margin:0 auto 22px; background-size:cover; background-position:center 15%;
  border:2px solid color-mix(in srgb,var(--neon) 70%,transparent); box-shadow:0 0 30px var(--neon), inset 0 0 20px rgba(0,0,0,.6);}
.intro-card .ic-story{ color:var(--ink-dim); font-size:14px; line-height:1.6; max-width:46ch; margin:0 auto 28px;}
.intro-card .ic-story b{ color:var(--ink); font-weight:600;}

/* ---------- Responsive: desktop 3-column ---------- */
@media (min-width:900px){
  .play{
    grid-template-columns:minmax(260px,310px) 1fr minmax(260px,330px);
    grid-template-areas:"left board right";
    grid-template-rows:1fr;
  }
}
/* ---------- Responsive: mobile single column + tabs ---------- */
@media (max-width:899px){
  .play{ grid-template-areas:"board"; }
  .panel{ position:absolute; inset:0; z-index:20; transform:translateY(100%); transition:transform .3s cubic-bezier(.3,.8,.3,1);
    border:0; border-top:1px solid var(--line); border-radius:18px 18px 0 0; }
  .panel.open{ transform:translateY(0); }
  .play{ grid-template-columns:1fr; }
  .tabbar{
    display:flex; flex:0 0 auto; border-top:1px solid var(--line);
    background:color-mix(in srgb,var(--bg-1) 92%,#000); padding:6px;
    gap:6px; z-index:30;
  }
  .tab{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border-radius:12px;
    background:transparent; border:1px solid transparent; color:var(--ink-faint); cursor:pointer; font-family:var(--f-ui); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;}
  .tab .t-ico{ width:20px; height:20px; }
  .tab .t-ico svg{ width:100%; height:100%; }
  .tab.active{ color:var(--neon); border-color:var(--line); background:var(--glass); box-shadow:0 0 14px color-mix(in srgb,var(--neon) 26%,transparent);}
  .panel-h .panel-close{ margin-left:auto; pointer-events:auto; cursor:pointer; color:var(--ink-faint); font-size:18px; padding:2px 8px;}
  .top-meters{ gap:6px; }
  .meter{ padding:5px 10px 5px 8px; }
  .tcard{ max-width:60vw; }
}
@media (min-width:900px){
  .panel-close{ display:none; }
}