/* Polymatia Play: retro terminal / 8-bit skin for engine.js. */
:root { --bg:#050805; --panel:#0a120a; --green:#39ff6a; --dim:#1f8a3a; --text:#c8f5d2; --red:#ff5a5a; --amber:#ffcf5a; --cyan:#9fe8ff;
  --glow:0 0 6px rgba(57,255,106,.7), 0 0 18px rgba(57,255,106,.3); }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); scroll-padding-top:110px; } /* keep focused or scrolled-to items out from under the sticky HUD */
body { background:var(--bg); color:var(--text); font:16px/1.7 "IBM Plex Mono", ui-monospace, monospace; min-height:100vh; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:49;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.7) 100%); }
.px { font-family:"Press Start 2P", ui-monospace, monospace; color:var(--green); text-shadow:var(--glow); line-height:1.6; }
.tag { font:10px/2 "Press Start 2P", monospace; color:var(--dim); letter-spacing:.1em; }
code { font-family:"IBM Plex Mono", monospace; color:var(--green); background:rgba(57,255,106,.08); padding:0 .25em; }
strong { color:var(--green); font-weight:600; }
a { color:var(--green); }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
button:focus-visible, input:focus-visible, .screen:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.screen:focus { outline:none; }

/* HUD */
.hud { position:sticky; top:0; z-index:40; background:rgba(5,8,5,.97); border-bottom:2px solid var(--dim); padding:8px 16px; }
.hud-row { max-width:760px; margin:0 auto; display:flex; align-items:center; gap:10px; justify-content:space-between; }
.hud-row.stats { margin-top:8px; justify-content:flex-start; gap:12px; }
.hud-title { font-size:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.hud-btn { font:9px "Press Start 2P", monospace; color:var(--green); border:1px solid var(--dim); padding:7px 8px; white-space:nowrap; }
.hud-btn:hover, .hud-btn[aria-pressed="true"] { border-color:var(--green); }
.hud-lv { font-size:11px; white-space:nowrap; }
.xpbar { flex:1 1 60px; min-width:50px; max-width:240px; height:12px; border:1px solid var(--green); padding:1px; display:block; }
.xpbar i { display:block; height:100%; background:var(--green); box-shadow:0 0 8px rgba(57,255,106,.6); transition:width .4s steps(8); }
.hud-xp { font-size:12px; color:var(--text); white-space:nowrap; }
.hearts { display:flex; gap:4px; }
.heart svg { width:18px; height:16px; display:block; fill:var(--red); filter:drop-shadow(0 0 3px rgba(255,90,90,.7)); shape-rendering:crispEdges; }
.heart.gone svg { fill:#2a1414; filter:none; }
.streak { font:9px "Press Start 2P", monospace; color:var(--amber); white-space:nowrap; margin-left:auto; }

.screen { display:block; max-width:760px; margin:0 auto; padding:28px 16px 64px; }
.boot { color:var(--dim); }
.cursor { display:inline-block; width:.6em; height:1em; background:var(--green); vertical-align:-.15em; margin-left:.2em; animation:blink 1s steps(1) infinite; }

/* Buttons */
.btn { display:inline-block; margin-top:18px; padding:14px 18px; background:var(--green); color:var(--bg); font:11px/1.4 "Press Start 2P", monospace;
  box-shadow:0 0 18px rgba(57,255,106,.45); border:2px solid var(--green); }
.btn:hover { background:#7dffa0; }
.btn.ghost { background:transparent; color:var(--green); box-shadow:none; }
.btn.big { font-size:13px; padding:16px 22px; margin-top:22px; animation:pulse 1.6s steps(2) infinite; }
.btn[disabled] { opacity:.45; cursor:default; }
.row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.keys { margin-top:10px; font-size:12px; color:var(--dim); }

/* Map */
.maphead { text-align:center; padding:12px 0 18px; }
.maphead h1 { margin-top:14px; font-size:clamp(18px, 5.6vw, 32px); }
.sub { margin:14px auto 0; max-width:560px; }
.mapstats { margin-top:12px; font-size:13px; color:var(--dim); }
.won { margin-top:20px; font-size:14px; }
.zone { margin-top:22px; border:2px solid var(--dim); background:var(--panel); padding:16px; }
.zone.cleared { border-color:var(--green); box-shadow:0 0 22px rgba(57,255,106,.14); }
.zone.locked { opacity:.55; }
.zone h2 { font:600 16px/1.5 "IBM Plex Mono", monospace; color:var(--text); }
.zone h2 .px { font-size:11px; margin-right:6px; }
.zdone { font-size:8px !important; border:1px solid var(--green); padding:3px 5px; vertical-align:2px; }
.zintro { margin-top:6px; font-size:14px; color:var(--text); opacity:.85; }
.path { list-style:none; margin-top:12px; position:relative; }
.path li { position:relative; }
.path li + li::before { content:""; position:absolute; left:21px; top:-8px; height:8px; border-left:2px dashed var(--dim); }
.path li + li { margin-top:8px; }
.node { width:100%; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; text-align:left; padding:4px 8px 4px 0; }
.node:hover:not([disabled]) .nt { color:var(--green); }
.nd { width:44px; height:44px; display:grid; place-items:center; border:2px solid var(--green); font-size:13px; background:var(--bg); }
.nt { font-size:15px; line-height:1.35; }
.nx { font:8px "Press Start 2P", monospace; color:var(--dim); white-space:nowrap; }
.node.cleared .nd { background:var(--green); color:var(--bg); text-shadow:none; }
.node.cleared .nx { color:var(--green); }
.node.locked { cursor:not-allowed; }
.node.locked .nd { border-color:var(--dim); color:var(--dim); text-shadow:none; }
.node.locked .nt { color:var(--dim); }
.node.current .nd { box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--green), 0 0 18px rgba(57,255,106,.6); animation:pulse 1.2s steps(2) infinite; }
.node.current .nx { color:var(--amber); }
.node.boss .nd { border-color:var(--amber); color:var(--amber); text-shadow:0 0 8px rgba(255,207,90,.6); }
.node.boss.cleared .nd { background:var(--amber); color:var(--bg); }
.mapfoot { margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.mapfoot .btn { font-size:9px; padding:10px 12px; margin-top:0; }

/* Level */
.lvhead h1 { margin-top:6px; font-size:clamp(14px, 4.2vw, 22px); }
.steps { display:flex; gap:4px; margin-top:12px; }
.steps i { flex:1; height:8px; border:1px solid var(--dim); }
.steps i.done { background:var(--dim); }
.steps i.now { background:var(--green); border-color:var(--green); box-shadow:0 0 8px rgba(57,255,106,.6); }
.panel { margin-top:18px; border:2px solid var(--green); background:var(--panel); padding:20px 18px; box-shadow:0 0 26px rgba(57,255,106,.12); }
.panel h2 { font-size:12px; margin-bottom:12px; }
.panel.center { text-align:center; }
.prose p + p { margin-top:12px; }
.prose p::before { content:"> "; color:var(--green); }
.cap { color:var(--dim); font-size:14px; margin-top:8px; }
.code { margin-top:14px; padding:14px; background:#020402; border:1px solid var(--dim); overflow-x:auto; font:14px/1.6 "IBM Plex Mono", monospace; color:var(--text); white-space:pre; tab-size:4; }
.code code { background:none; padding:0; color:inherit; }
.t-k { color:var(--green); font-weight:600; text-shadow:0 0 6px rgba(57,255,106,.5); }
.t-b { color:#7dffa0; }
.t-s { color:var(--amber); }
.t-n { color:var(--cyan); }
.t-c { color:var(--dim); font-style:italic; }
.out { margin-top:10px; border:1px dashed var(--dim); padding:10px 14px; }
.out .px { font-size:8px; color:var(--dim); text-shadow:none; }
.out pre { margin-top:6px; font:14px/1.6 "IBM Plex Mono", monospace; color:var(--green); white-space:pre-wrap; }
.kind { font-size:10px; color:var(--amber); text-shadow:0 0 8px rgba(255,207,90,.5); }
.q { margin-top:10px; font-size:17px; }
.choices { display:grid; gap:10px; margin-top:16px; }
.choice { display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; text-align:left; padding:12px; border:2px solid var(--dim); background:var(--bg); min-height:48px; }
.choice b { font-size:11px; color:var(--green); padding-top:4px; }
.choice.mono span { white-space:pre-wrap; font-family:"IBM Plex Mono", monospace; }
.choice:hover:not([disabled]) { border-color:var(--green); }
.choice.right { border-color:var(--green); background:rgba(57,255,106,.14); box-shadow:0 0 14px rgba(57,255,106,.35); }
.choice.wrong { border-color:var(--red); color:var(--red); text-decoration:line-through; opacity:.75; }
.choice[disabled] { cursor:default; }
.blank { font:inherit; color:var(--amber); background:rgba(255,207,90,.08); border:0; border-bottom:2px solid var(--amber); padding:0 2px; border-radius:0; outline:none; min-width:3ch; max-width:100%; }
.blank:focus { background:rgba(255,207,90,.18); }
.blank.ok { color:var(--green); border-color:var(--green); background:rgba(57,255,106,.1); }
.fb { margin-top:14px; }
.fb .prose { margin-top:8px; }
.good { font:11px "Press Start 2P", monospace; color:var(--green); text-shadow:var(--glow); }
.bad { font:11px/1.8 "Press Start 2P", monospace; color:var(--red); text-shadow:0 0 8px rgba(255,90,90,.6); }
.shake { animation:shake .35s steps(6); }
.blk-boss { border-color:var(--amber); box-shadow:0 0 26px rgba(255,207,90,.15); }
.boss-name { color:var(--amber); text-shadow:0 0 8px rgba(255,207,90,.6); font-size:13px; }
.bosshp { display:flex; align-items:center; gap:4px; margin:10px 0; }
.bosshp .px { font-size:9px; color:var(--amber); text-shadow:none; margin-right:6px; }
.bosshp i { width:22px; height:12px; border:1px solid var(--amber); }
.bosshp i.on { background:var(--amber); }
.bossq { margin-top:14px; border-top:1px dashed var(--dim); padding-top:14px; }
.big-msg { font-size:clamp(18px, 6vw, 28px); margin:8px 0 14px; }
.big-msg.bad { font-size:clamp(18px, 6vw, 28px); }
.lvname { font-size:15px; }
.gain { font-size:22px; margin:16px 0 8px; color:var(--amber); text-shadow:0 0 10px rgba(255,207,90,.6); }
.perfect { font-size:9px; color:var(--amber); text-shadow:none; }
.rankup { margin-top:12px; font-size:13px; }
.newbadges { margin:18px auto 0; max-width:420px; }
.badges { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; margin-top:16px; }
.badge { border:2px solid var(--dim); padding:12px; display:flex; flex-direction:column; gap:6px; text-align:left; margin-top:8px; }
.badges .badge { margin-top:0; }
.badge .px { font-size:10px; color:var(--dim); text-shadow:none; }
.badge.on { border-color:var(--amber); box-shadow:0 0 14px rgba(255,207,90,.2); }
.badge.on .px { color:var(--amber); text-shadow:0 0 8px rgba(255,207,90,.6); }
.badge span:last-child { font-size:13px; }

/* html block: editor + sandboxed preview */
.lab { margin-top:14px; display:grid; gap:8px; }
.lab-l { font-size:9px; color:var(--dim); text-shadow:none; }
.lab-code { width:100%; min-height:140px; resize:vertical; padding:12px; background:#020402; color:var(--text); border:1px solid var(--dim);
  font:15px/1.55 "IBM Plex Mono", ui-monospace, monospace; tab-size:2; white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; border-radius:0; }
.lab-code:focus { outline:3px solid #fff; outline-offset:2px; }
.lab-code[readonly] { border-color:var(--green); }
.lab-view { width:100%; height:220px; border:2px solid var(--dim); background:#fff; color-scheme:light; }
.checks { list-style:none; margin-top:14px; display:grid; gap:6px; font-size:14px; }
.checks li { display:flex; gap:10px; align-items:baseline; }
.checks b { font-size:10px; color:var(--dim); text-shadow:none; flex:none; }
.checks li.ok b { color:var(--green); text-shadow:var(--glow); }
.checks li.no b { color:var(--red); }
.blk-html .row { justify-content:flex-start; }
.blk-html .fb .btn.ghost { margin-left:12px; }

/* ---------- v2: hero, stars, items, chapter medals, collection, Python runner */
.pet { display:flex; flex-direction:column; align-items:center; gap:6px; }
.pet-body { line-height:0; animation:bob 1.6s steps(2) infinite; filter:drop-shadow(0 0 6px rgba(57,255,106,.35)); }
.pet.happy .pet-body { animation:hop .5s steps(3) 2; }
.pet.sad .pet-body { animation:none; transform:translateY(3px); filter:grayscale(.4) drop-shadow(0 0 4px rgba(255,90,90,.4)); }
.pet.wow .pet-body { animation:wiggle .4s steps(4) 3; }
.hero-svg { display:block; image-rendering:pixelated; }
.bubble { position:relative; font:9px/1.6 "Press Start 2P", monospace; color:var(--bg); background:var(--text); padding:6px 9px; max-width:240px; text-align:center; }
.bubble::before { content:""; position:absolute; top:-6px; left:50%; margin-left:-6px; border:6px solid transparent; border-top:0; border-bottom-color:var(--text); }
.maphead .pet { margin-bottom:10px; }
.lvtop { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.lvtop .pet { flex:none; min-width:64px; }
.lvtop .bubble { position:absolute; right:16px; margin-top:62px; z-index:5; max-width:170px; }
.lvtop .pet { position:relative; }
.lvtop .bubble[hidden] { display:none; }
.star { display:inline-block; fill:#24331f; vertical-align:middle; }
.star.on { fill:var(--amber); filter:drop-shadow(0 0 3px rgba(255,207,90,.7)); }
.hud-stars { display:flex; align-items:center; gap:4px; font-size:12px; white-space:nowrap; }
.hud-stars b { font-weight:600; color:var(--amber); }
.nstars { display:inline-flex; gap:2px; }
.bigstars { display:flex; justify-content:center; gap:10px; margin:14px 0 4px; }
.bigstars span { animation:pop .5s steps(4) both; animation-delay:var(--d); }
.zhead { display:flex; align-items:center; gap:12px; }
.medal { --m:var(--green); position:relative; display:inline-grid; place-items:center; width:58px; height:64px; flex:none;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background:#1a2a1c; }
.medal::before { content:""; position:absolute; inset:5px; clip-path:inherit; background:var(--bg); }
.medal b { position:relative; font-size:16px; color:#3a4a3c; text-shadow:none; }
.medal.on { background:var(--m); box-shadow:0 0 20px var(--m); }
.medal.on::before { background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 45%), color-mix(in srgb, var(--m) 30%, #050805); }
.medal.on b { color:var(--m); text-shadow:0 0 8px var(--m); }
.medal.sm { width:40px; height:44px; }
.medal.sm b { font-size:11px; }
.medal.xl { width:150px; height:168px; }
.medal.xl b { font-size:48px; }
.medal-stage { margin:18px 0 6px; animation:pop .7s steps(5) both; }
.medals-row { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:14px 0; }
.field { display:grid; gap:6px; text-align:left; }
.field input { width:100%; }
.creator .field { max-width:280px; margin:18px auto 0; }
.field .px, .langpick .px { font-size:9px; color:var(--dim); text-shadow:none; }
.field input, .langpick select { font:16px "IBM Plex Mono", monospace; color:var(--green); background:#020402; border:2px solid var(--dim); padding:10px; border-radius:0; }
.creator .lab-l { margin-top:18px; }
.opts { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px; }
.opt { padding:6px; border:2px solid var(--dim); background:var(--bg); }
.opt.on, .opt:hover { border-color:var(--green); box-shadow:0 0 10px rgba(57,255,106,.4); }
.swatch { width:36px; height:36px; border:3px solid var(--bg); outline:2px solid var(--dim); }
.swatch.on { outline:3px solid #fff; }
.pet.big .pet-body { filter:drop-shadow(0 0 14px rgba(57,255,106,.45)); }
.coll-hero { display:flex; flex-direction:column; align-items:center; gap:4px; margin:6px 0 10px; }
.panel h2 small { font-size:9px; color:var(--dim); }
.panel > h2.px { margin-top:26px; }
.rewards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.reward { border:2px dashed var(--dim); padding:12px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; opacity:.45; filter:grayscale(1); }
.reward.on { opacity:1; filter:none; border:2px solid var(--amber); box-shadow:0 0 16px rgba(255,207,90,.25); }
.reward .px { font-size:9px; color:var(--amber); text-shadow:none; }
.reward .btn { margin-top:4px; font-size:9px; padding:10px; text-decoration:none; }
.certicon { border:2px solid var(--amber); padding:14px 10px; font-size:12px !important; }
.medals { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.medals li { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:10px 6px; border:1px solid #1a2a1c; }
.medals li .px { font-size:8px; color:var(--dim); text-shadow:none; }
.medals li.on .px { color:var(--amber); }
.medals li span:last-child { font-size:12px; }
.items { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; margin-top:10px; }
.item { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border:2px solid #1a2a1c; text-align:center; }
.item .px { font-size:7px; color:var(--dim); text-shadow:none; }
.item .q { font-size:22px; padding:12px 0; color:#2a3a2c; }
.item .cap { font-size:11px; margin:0; }
.item.own { border-color:var(--dim); }
.item.own .px { color:var(--text); }
.item.worn { border-color:var(--green); box-shadow:0 0 12px rgba(57,255,106,.35); }
.item.worn .px { color:var(--green); }
.lvstars { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:6px; margin-top:10px; }
.lvstars li { display:flex; align-items:center; gap:3px; font-size:12px; }
.lvstars .px { font-size:8px; color:var(--dim); text-shadow:none; width:38px; }
.newitem { margin:18px auto 0; display:flex; flex-direction:column; align-items:center; gap:8px; border:2px solid var(--cyan); padding:12px; max-width:300px; box-shadow:0 0 18px rgba(159,232,255,.2); animation:pop .5s steps(4) both; animation-delay:.6s; }
.newitem .px { font-size:10px; color:var(--cyan); text-shadow:0 0 8px rgba(159,232,255,.5); }
.chapterwin, .finale { border-color:var(--amber); box-shadow:0 0 40px rgba(255,207,90,.25); }
.finale .btn { text-decoration:none; }
.mapfoot { align-items:center; }
.langpick { display:flex; align-items:center; gap:8px; }
.langpick select { font-size:13px; padding:8px; }
.lab-out { margin:0; min-height:56px; max-height:320px; overflow:auto; padding:12px; background:#020402; border:1px dashed var(--dim); color:var(--green);
  font:14px/1.55 "IBM Plex Mono", monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.lab-out.wait { color:var(--dim); }
.lab-out.err { color:var(--red); border-color:var(--red); }
.lab-in { margin:0; padding:8px 12px; border:1px solid #1a2a1c; color:var(--amber); font:13px/1.5 "IBM Plex Mono", monospace; white-space:pre-wrap; }
.lab-file summary { cursor:pointer; font:13px "IBM Plex Mono", monospace; color:var(--cyan); }
.lab-file pre { margin-top:6px; padding:8px 12px; border:1px solid #1a2a1c; font:13px/1.5 "IBM Plex Mono", monospace; white-space:pre-wrap; max-height:200px; overflow:auto; }
.blk-run .row { justify-content:flex-start; }
.blk-run .fb .btn.ghost { margin-left:12px; }
.blk-run .keys { text-align:left; }
@keyframes bob { 50% { transform:translateY(-3px); } }
@keyframes hop { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes wiggle { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-8deg); } 75% { transform:rotate(8deg); } }
@keyframes pop { 0% { transform:scale(0); opacity:0; } 70% { transform:scale(1.2); opacity:1; } 100% { transform:scale(1); } }
@media (max-width:480px) {
  .hud-stars { font-size:11px; }
  .medal.xl { width:120px; height:134px; }
  .medal.xl b { font-size:38px; }
  .lvtop .bubble { right:12px; }
}

@keyframes blink { 50% { opacity:0; } }
@keyframes pulse { 50% { filter:brightness(1.35); } }
@keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(4px); } }

@media (max-width:480px) {
  .hud { padding:8px 12px; }
  .hud-row.stats { gap:8px; }
  .hud-xp { font-size:11px; }
  .screen { padding:20px 12px 56px; }
  .panel { padding:16px 12px; }
  .zone { padding:14px 10px; }
  .node { grid-template-columns:40px 1fr; }
  .nd { width:40px; height:40px; }
  .nx { grid-column:2; margin-top:-6px; }
  .path li + li::before { left:19px; }
  .code { font-size:13px; padding:12px 10px; }
  .q { font-size:16px; }
  .lab-code { font-size:16px; } /* 16px stops iOS from zooming into the editor */
  .lab-view { height:200px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* v3: review, placement, hint ladder, plain-word errors, concept cards, home base, evolution */
.review-btn { margin-top:12px; }
.deeper { margin:4px 0 10px; font-size:14px; }
.deeper summary { cursor:pointer; font-size:9px; color:var(--cyan); text-shadow:none; }
.deeper ul { margin:6px 0 0 18px; }
.deeper a { color:var(--cyan); }
.ladder { margin-top:10px; }
.hintbox { border-left:3px solid var(--amber); padding:4px 12px; margin:10px 0; }
.hintbox .px { font-size:9px; color:var(--amber); text-shadow:none; }
.errx { margin-top:8px; padding:8px 12px; border:1px solid var(--amber); color:var(--text); font-size:15px; }
.errx .px { font-size:9px; color:var(--amber); text-shadow:none; }
.errx p { margin:4px 0; }
.errfix { color:var(--green); }
.cards { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; margin:10px 0 18px; }
.card { border:1px solid var(--m, var(--dim)); padding:8px 10px; font-size:14px; }
.card summary { cursor:pointer; }
.card summary .px, .card .px { font-size:9px; color:var(--m, var(--dim)); text-shadow:none; }
.card .code { margin:8px 0; font-size:13px; }
.card.locked { color:var(--dim); border-style:dashed; }
.newcards { margin:12px auto; max-width:420px; text-align:left; }
.newcards ul { margin-left:20px; }
.base .room { border:2px solid var(--dim); margin:12px 0; background:linear-gradient(#0a160a 0 62%, #102010 62% 100%); }
.base .wall { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:12px; }
.base .floor { display:flex; align-items:flex-end; justify-content:center; gap:28px; padding:8px 12px 0; }
.base .shelf { display:flex; gap:6px; align-items:flex-end; border-bottom:4px solid #5a3a1a; padding:0 8px 2px; min-height:52px; }
.base .desk { padding:10px 12px; border-top:2px solid var(--dim); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.base .desk .px { font-size:9px; }
.evo-name { font-size:11px; margin-top:8px; }
.basestats { list-style:none; display:flex; flex-wrap:wrap; gap:14px; margin:12px 0; }
.basestats li { display:flex; gap:6px; align-items:center; }
.basestats .px { font-size:12px; }
.hero-svg.evo3 { filter:drop-shadow(0 0 4px rgba(159,232,255,.8)); }
@media (prefers-reduced-motion: no-preference) { .hero-svg.evo3 { animation:evo 2.4s ease-in-out infinite; } }
@keyframes evo { 50% { filter:drop-shadow(0 0 9px rgba(159,232,255,.95)); } }
.zhead .home-btn, .zhead .sheet-btn { margin-left:auto; }
.zhead .home-btn + .sheet-btn { margin-left:6px; }
.home-btn.on { color:var(--amber); border-color:var(--amber); }
.homeform { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:14px 0; }
.homeform .btn { margin:0; }
.tag.finisher { color:var(--amber); }
.unlockform .waiver { flex-basis:100%; display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:1.5; text-align:left; cursor:pointer; }
.unlockform .waiver input { margin-top:4px; width:18px; height:18px; flex:none; }
.legal-links { text-align:center; font-size:12px; margin:18px 0 0; opacity:.7; }
.legal-links a { color:inherit; }