/* Fredoka (SIL Open Font License), bundled so the game looks right offline and in the apps */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(vendor/fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(vendor/fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bg: #12152e;
  --bg2: #1c2050;
  --panel: #20255a;
  --panel2: #2a3070;
  --line: #3a4190;
  --text: #f3f4ff;
  --muted: #a9aed8;
  --accent: #ffd166;
  --accent2: #ff5d73;
  --good: #7bd389;
  --radius: 18px;
  font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; -webkit-tap-highlight-color: transparent; }
html { overflow-x: clip; }
body { touch-action: manipulation; overscroll-behavior: none; }
body {
  background: radial-gradient(1200px 700px at 20% -10%, #3b2d80 0%, transparent 60%),
              radial-gradient(900px 600px at 110% 20%, #134e6f 0%, transparent 55%), var(--bg);
  background-attachment: fixed;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
h1, h2, h3 { margin: 0 0 0.5em; font-weight: 600; }
h3 small, h2 small { color: var(--muted); font-weight: 400; font-size: 0.75em; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.hidden { display: none !important; }

.screen { max-width: 1240px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.panel { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.row.end { justify-content: flex-end; }
.row.center { justify-content: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }

.btn { background: #343b85; border: 1px solid #4b53a8; border-radius: 12px; padding: 10px 16px; font-weight: 500; transition: transform 0.08s, background 0.15s; }
.btn:hover:not(:disabled) { background: #3f479b; transform: translateY(-1px); }
.btn.primary { background: linear-gradient(180deg, #ffd166, #ffb703); color: #2a1a00; border-color: #ffcf5a; font-weight: 600; }
.btn.danger { background: #8a2a3d; border-color: #b23a52; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.07); }
.btn.small { padding: 6px 12px; font-size: 0.88rem; border-radius: 10px; }
.btn.huge { font-size: 1.5rem; padding: 14px 48px; border-radius: 16px; margin-top: 18px; }
.btn.icon { padding: 8px 12px; }
.text { background: #151937; border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 10px 12px; font: inherit; width: 100%; }
select.text { width: 100%; }
.mini { font-size: 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.coin { background: rgba(255, 209, 102, 0.15); color: var(--accent); padding: 2px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; }

/* top bar */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 18px; }
.topbar h1 { margin: 0; font-size: 1.6rem; text-align: center; }
.topbar > :first-child { justify-self: start; }
.topbar > :last-child { justify-self: end; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.25); padding: 5px 6px 5px 5px; border-radius: 999px; border: 1px solid var(--line); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--pc); color: #1a1a2e; display: grid; place-items: center; font-weight: 700; }
.avatar.big { width: 46px; height: 46px; font-size: 1.3rem; }

/* title */
.logo { font-size: clamp(3rem, 9vw, 6.5rem); font-weight: 700; letter-spacing: 0.06em; margin: 0; text-align: center;
  background: linear-gradient(180deg, #fff3c4, #ffd166 45%, #ff7b54); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #7a2e57) drop-shadow(0 14px 24px rgba(0, 0, 0, 0.4)); }
.logo.small { font-size: 2rem; filter: drop-shadow(0 3px 0 #7a2e57); }
/* the Drawriors wordmark image (brand/title.png, made by .dev/brand/) replaces the text logo */
.logo.logo-img { background: none; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35)); line-height: 0; }
.logo.logo-img img { display: block; width: min(100%, 600px, 92vh); /* ≤ ~22% of the screen height */ height: auto; margin: 0 auto; }
.logo.small.logo-img { filter: none; min-width: 0; }
.logo.small.logo-img img { width: auto; height: 2.6rem; }
@media (max-width: 560px) { .logo.small.logo-img img { height: min(1.7rem, 5.4vw); } }
.tag { text-align: center; color: var(--muted); font-size: 1.2rem; margin: 6px 0 28px; }
.title-screen { max-width: 620px; padding-top: max(7vh, env(safe-area-inset-top)); }
.profile-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.profile-row { display: flex; gap: 6px; align-items: center; }
.profile-card { flex: 1; display: flex; align-items: center; gap: 14px; background: #181c45; border: 2px solid transparent; border-radius: 14px; padding: 10px 14px; text-align: left; }
.profile-card:hover { border-color: var(--pc); }
.pinfo { flex: 1; display: flex; flex-direction: column; }
.pinfo small { color: var(--muted); }

/* hub */
.hub-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.hub-stage { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 460px; }
.stage3d { flex: 1; position: relative; min-height: 380px; background: radial-gradient(circle at 50% 60%, #34407e, #1a1e48 70%); }
.stage-cap { padding: 12px 18px; color: var(--muted); }
.stage-cap b { color: var(--text); }
.stage-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cap-open { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.cap-n { margin-left: auto; font-size: 0.85rem; background: rgba(0, 0, 0, 0.25); border-radius: 999px; padding: 1px 9px; }
/* hub: flip through all your creatures on the stage */
.stage-nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 1px solid var(--line); background: rgba(16, 19, 48, 0.7); color: var(--text); font-size: 1.9rem; line-height: 1; display: grid; place-items: center; padding: 0 0 4px; cursor: pointer; }
.stage-nav:hover { border-color: var(--accent); }
.stage-nav:active { transform: scale(0.92); }
.stage-nav.prev { left: 10px; }
.stage-nav.next { right: 10px; }
.hub-roster { gap: 6px; padding: 8px 12px 2px; scrollbar-width: thin; }
.roster-pick { flex: 0 0 52px; padding: 2px; border-radius: 12px; border: 2px solid transparent; background: #181c45; cursor: pointer; }
.roster-pick.on { border-color: var(--accent); }
.roster-pick .thumb { border-radius: 8px; }
.hub-menu { display: flex; flex-direction: column; gap: 12px; }
.big-btn { display: flex; align-items: center; gap: 14px; text-align: left; font-size: 1.25rem; font-weight: 600; padding: 18px 22px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); transition: transform 0.1s, border-color 0.15s; }
.big-btn span { font-size: 1.6rem; width: 36px; text-align: center; }
.big-btn small { margin-left: auto; background: rgba(0, 0, 0, 0.3); border-radius: 999px; padding: 2px 10px; font-size: 0.9rem; color: var(--muted); }
.big-btn:hover { transform: translateX(4px); border-color: var(--accent); }
.big-btn.start { font-size: 2rem; padding: 24px; justify-content: center; background: linear-gradient(180deg, #ff7b8d, #ff3f5e); border-color: #ff9aa8; box-shadow: 0 8px 0 #9c2238, 0 14px 30px rgba(255, 63, 94, 0.35); letter-spacing: 0.08em; }
.big-btn.start:hover { transform: translateY(-2px); }
.big-btn.start:active { transform: translateY(4px); box-shadow: 0 4px 0 #9c2238; }

/* 3D containers */
.stage3d canvas, .preview3d canvas, .shop3d canvas, .show3d canvas, .mk3d canvas, .winner-3d canvas { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.preview3d, .shop3d, .show3d, .mk3d, .winner-3d { position: relative; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 60%, #34407e, #1a1e48 70%); }
.empty-3d { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 20px; z-index: 1; pointer-events: none; }

/* editor */
.editor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; }
.ed-left, .ed-right { display: flex; flex-direction: column; gap: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.tool-group { display: flex; gap: 6px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px; }
.tool { background: transparent; border: 0; border-radius: 8px; padding: 6px 10px; }
.tool:hover { background: rgba(255, 255, 255, 0.08); }
.tool.active { background: var(--accent); color: #2a1a00; }
.check input { accent-color: var(--accent); }
.palettes { display: flex; gap: 16px; flex-wrap: wrap; }
.palettes > div { display: flex; align-items: center; gap: 8px; }
.swatches { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); padding: 0; }
.sw.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.swatches input[type=color] { width: 28px; height: 28px; border: 0; background: none; padding: 0; cursor: pointer; }
.canvas-wrap { position: relative; aspect-ratio: 1; width: 100%; border-radius: 16px; overflow: hidden; touch-action: none;
  background: #fff; background-image: radial-gradient(#dfe3f5 1.2px, transparent 1.2px); background-size: 22px 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#draw { cursor: crosshair; }
.mirror-line { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed rgba(123, 97, 255, 0.35); pointer-events: none; display: none; }
.canvas-wrap.mirror .mirror-line { display: block; }
.canvas-hint { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #8a90b8; pointer-events: none; font-size: 0.95rem; }
.canvas-wrap.has-ink .canvas-hint { display: none; }
.preview3d { aspect-ratio: 1.15; }
.ed-stats .arch { font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.tip { color: var(--muted); font-size: 0.85rem; margin: 0; }

.statbars { display: flex; flex-direction: column; gap: 6px; }
.sb { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 8px; font-size: 0.9rem; }
.sb .bar { height: 10px; background: #151937; border-radius: 999px; overflow: hidden; }
.sb .bar i { display: block; height: 100%; background: linear-gradient(90deg, #7bd389, #ffd166); border-radius: 999px; transition: width 0.3s; }
.sb b { text-align: right; }

/* modes */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 4vh; }
.mode-card { text-align: center; padding: 30px 22px; border-radius: 22px; border: 2px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); transition: transform 0.12s, border-color 0.15s; display: flex; flex-direction: column; align-items: center; }
.mode-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.mode-ic { font-size: 3.6rem; margin-bottom: 10px; }
.mode-card p { color: var(--muted); flex: 1; }
.reward { margin-top: 8px; }

/* setup */
.slots { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.slots.n4 { grid-template-columns: repeat(4, 1fr); }
.slot { border-top: 5px solid var(--pc); display: flex; flex-direction: column; gap: 8px; }
.slot.off { opacity: 0.6; }
.slot-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.slot-head h3 { margin: 0; }
.slot-head select { width: auto; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 320px; overflow: auto; padding: 2px; }
.pick { background: #181c45; border: 2px solid transparent; border-radius: 14px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.85rem; min-width: 0; }
.pick span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pick small { color: var(--muted); }
.pick.on { border-color: var(--accent); background: #262b63; }
.pick.sm { flex: 0 0 86px; }
.thumb { width: 100%; aspect-ratio: 1; border-radius: 10px; background: radial-gradient(circle, #3a4590, #22285c); display: grid; place-items: center; overflow: hidden; }
.thumb img { width: 90%; height: 90%; object-fit: contain; }
.cpu-face { font-size: 4rem; text-align: center; padding: 10px 0; }
.seg { display: flex; background: #151937; border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { flex: 1; background: transparent; border: 0; border-radius: 9px; padding: 7px 10px; }
.seg button.on { background: var(--accent); color: #2a1a00; font-weight: 600; }

/* arena */
#battle { position: fixed; inset: 0; }
.arena { position: absolute; inset: 0; overflow: hidden; user-select: none; }
.arena-canvas canvas { display: block; }
.hud { position: absolute; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; pointer-events: none; }
/* Battle overlays sit on top of the live 3D canvas: anything that repaints every frame there (a blur of
   the moving scene, an animated shadow or filter) cost a budget phone half its frame rate. Animate only
   transform/opacity, and keep overlays on their own layers (docs/PERFORMANCE.md). */
.hud-card { display: flex; gap: 10px; align-items: center; background: rgba(12, 14, 36, 0.86); border: 2px solid var(--pc); border-radius: 16px; padding: 6px 12px 6px 6px; min-width: 220px; transition: opacity 0.3s; will-change: transform; }
.hud-card img { width: 48px; height: 48px; object-fit: contain; background: rgba(255, 255, 255, 0.06); border-radius: 10px; }
.hud-card.out { opacity: 0.4; filter: grayscale(1); }
.hud-info { flex: 1; }
.hud-name { font-weight: 600; }
.hud-name small { color: var(--muted); font-weight: 400; }
.hp { height: 12px; background: rgba(255, 255, 255, 0.12); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.hp { position: relative; }
.hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 999px; transform-origin: left center; } /* arena.js sets scaleX(hp) */
.hp i.chip { background: #fff; opacity: 0.75; }
.hp i.fill { background: linear-gradient(90deg, #7bd389, #b6f29a); transition: transform 0.12s; }
.hp i.fill.low { background: linear-gradient(90deg, #ff5d73, #ff9f43); animation: pulse 0.6s infinite alternate; }
@keyframes pulse { to { opacity: 0.55; } }
.sp-ready { font-size: 1.1rem; color: #555b8f; } /* colour/glow switch instantly: a transition on them repaints over the battle (docs/PERFORMANCE.md) */
.sp-ready.ready { display: inline-block; will-change: transform; color: var(--accent); text-shadow: 0 0 10px var(--accent); animation: spStar 0.5s ease-in-out infinite alternate; }
@keyframes spStar { to { transform: scale(1.22); } }
.arena-help { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(12, 14, 36, 0.7); padding: 8px 16px; border-radius: 999px; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.arena-help b { color: var(--text); background: rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 0 6px; }
.arena-help .sep { display: inline-block; width: 1px; height: 14px; background: var(--line); margin: 0 12px; vertical-align: middle; }
.banner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.banner.show { opacity: 1; }
.banner span { font-size: clamp(3rem, 10vw, 8rem); font-weight: 700; color: #fff; text-shadow: 0 6px 0 #7a2e57, 0 12px 40px rgba(0, 0, 0, 0.6); animation: pop 0.35s ease-out; }
.banner .go { color: var(--accent); }
.banner .win { font-size: clamp(2.4rem, 7vw, 5.5rem); color: var(--accent); }
@keyframes pop { from { transform: scale(1.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.popups { position: absolute; inset: 0; pointer-events: none; }
.popup { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 1.5rem; color: #fff; text-shadow: 0 3px 0 #000a; white-space: nowrap; }
.popup.crit { color: #ffd166; font-size: 2rem; }
.popup.big { color: #ff5d73; font-size: 2.6rem; }
.popup.pow { color: #ffd166; font-size: 2.6rem; font-weight: 800; rotate: -8deg; -webkit-text-stroke: 2px #7a2e57; paint-order: stroke fill; text-shadow: 0 4px 0 #7a2e57, 0 0 24px rgba(255, 209, 102, 0.6); letter-spacing: 0.02em; }
.popup.special { color: #fff; font-size: 1.6rem; text-shadow: 0 3px 0 #000a, 0 0 18px var(--accent); }
.popup.special.combo { color: #ffd166; font-size: 2rem; }
.popup.perfect { color: #9be7ff; font-size: 1.7rem; text-shadow: 0 3px 0 #0a3550, 0 0 16px #9be7ff; }
/* comic bursts (arena.js burstFor): a spiky two-tone star behind a big outlined word, like the
   promo video. Only transform/opacity change per frame (docs/PERFORMANCE.md). */
.popup.burst { isolation: isolate; padding: 0.95em 1.15em; font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: 0.02em; color: #fff; text-shadow: none; -webkit-text-stroke: 0.16em #2a1650; paint-order: stroke fill; will-change: transform, opacity; }
.hud-card.edge { box-shadow: 0 0 0 2px #ff3355; } /* edge danger (static: no animation over the battle) */
.popup.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; }
.popup.burst b { position: relative; display: block; }
.popup.burst.big { font-size: 2.6rem; }
.popup.burst.ko { font-size: 3.4rem; }
/* hit chain counter for each human player, under their side of the HUD */
.chains { position: absolute; inset: 0; pointer-events: none; }
.chain { position: absolute; top: 26%; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.25s; }
.chain.left { left: max(18px, env(safe-area-inset-left)); } .chain.right { right: max(18px, env(safe-area-inset-right)); }
.chain.on { opacity: 1; transform: scale(1); }
.chain b { font-size: 3.4rem; line-height: 0.9; font-weight: 800; color: #fff; -webkit-text-stroke: 2px #7a2e57; paint-order: stroke fill; text-shadow: 0 4px 0 #7a2e57; }
.chain span { font-size: 0.9rem; font-weight: 700; color: #ffd166; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 0 2px 0 #000a; }
.chain.hot b { color: #ffd166; text-shadow: 0 4px 0 #7a2e57, 0 0 20px rgba(255, 209, 102, 0.8); }
.chain.bump b { animation: chainBump 0.22s ease-out; }
@keyframes chainBump { from { transform: scale(1.5) rotate(-6deg); } to { transform: scale(1); } }
/* whole-screen colour flash (specials, big hits, getting hit) */
.screen-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, var(--fc, #fff) 140%); z-index: 1; }
.screen-flash.go { animation: screenFlash 0.4s ease-out; }
@keyframes screenFlash { from { opacity: var(--fa, 0.25); } to { opacity: 0; } }
/* keyboard help: key + icon + word */
.arena-help em { font-style: normal; font-weight: 700; color: var(--accent); margin-right: 4px; }
.arena-help .kb { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; }
.arena-help .kb i { font-style: normal; }
/* pause: moves & combos list */
.pause { z-index: 4; } /* above the touch buttons */
.pause .panel { max-height: 92dvh; overflow: auto; }
.moves { text-align: left; margin: 4px auto 14px; max-width: 460px; }
.moves h3 { margin: 0 0 8px; font-size: 1rem; color: var(--accent); text-align: center; }
.moves ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.moves li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 6px 10px; }
.moves li b { font-size: 0.95rem; } .moves li small { grid-column: 2; color: var(--muted); font-size: 0.8rem; }
.mv-keys { grid-row: span 2; display: inline-flex; align-items: center; gap: 2px; }
.mv-keys em { font-style: normal; color: var(--muted); }
.mv-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; }
.mv-ic svg { width: 62%; height: 62%; }
.mv-ic.atk { background: #e8364f; } .mv-ic.jump { background: #2fae5a; } .mv-ic.sp { background: #f2a400; } .mv-ic.dodge { background: #1f9bd1; }
.moves-tip { margin: 8px 0 0; color: var(--muted); font-size: 0.82rem; text-align: center; }
.loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--bg); z-index: 5; }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 6px solid #2c3270; border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pause-btn { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: rgba(12, 14, 36, 0.7); font-size: 0.9rem; z-index: 3; }
.banner .intro { font-size: 1rem; animation: none; text-shadow: none; }
.vs { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; padding: 0 16px; }
.vs span { display: flex; flex-direction: column; align-items: center; font-size: clamp(1.4rem, 4vw, 2.6rem); font-weight: 700; color: #fff; padding: 10px 18px; border-radius: 18px; background: rgba(12, 14, 36, 0.75); border: 3px solid var(--pc); animation: pop 0.4s ease-out both; text-shadow: 0 3px 0 #0008; }
.vs span small { font-size: 0.45em; font-weight: 500; color: var(--muted); }
.vs b { font-size: clamp(1.8rem, 5vw, 3.4rem); color: var(--accent2); text-shadow: 0 4px 0 #7a2e57; }
.pause { position: absolute; inset: 0; background: rgba(6, 8, 24, 0.6); display: grid; place-items: center; backdrop-filter: blur(4px); }
.pause .panel { text-align: center; min-width: 300px; }

/* results */
.results { max-width: 640px; padding-top: 5vh; }
.result-card { text-align: center; }
.winner-3d { height: 320px; margin: 10px 0; }
.rewards { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.reward-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #181c45; border-left: 5px solid var(--pc); border-radius: 10px; padding: 10px 14px; }
.reward-line .gain { color: var(--accent); font-weight: 700; }

/* shop */
.shop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; }
.shop-left { display: flex; flex-direction: column; gap: 12px; }
.strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; flex-shrink: 0; } /* a scroller in a flex column would otherwise shrink to nothing */
.shop3d { aspect-ratio: 1.2; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs button { flex: 1; background: #181c45; border: 1px solid var(--line); border-radius: 12px; padding: 10px; font-weight: 600; }
.tabs button.on { background: var(--accent); color: #2a1a00; border-color: var(--accent); }
.filters { margin-bottom: 12px; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.item { background: #181c45; border: 2px solid transparent; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.item.equipped { border-color: var(--good); }
.item.previewing { border-color: var(--accent); }
.item-face { background: transparent; border: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; }
.item-face .ic { font-size: 2.2rem; }
.item-face small { color: var(--muted); }
.ups { display: flex; flex-direction: column; gap: 10px; }
.up-row { display: flex; align-items: center; gap: 12px; background: #181c45; border-radius: 14px; padding: 12px; }
.up-row .ic { font-size: 1.8rem; }
.up-row small { color: var(--muted); }
.pips { display: flex; gap: 4px; margin-top: 6px; }
.pips i { width: 22px; height: 8px; border-radius: 4px; background: #2c3270; }
.pips i.on { background: var(--accent); }

/* collection */
.collection { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.showcase { display: flex; flex-direction: column; gap: 14px; }
.show3d { aspect-ratio: 1.3; }
.grid-wrap { display: flex; flex-direction: column; gap: 12px; align-self: start; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.empty { text-align: center; padding: 40px; }

/* market */
.market { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.market-list { display: flex; flex-direction: column; gap: 8px; align-self: start; }
.listing { display: flex; align-items: center; gap: 12px; background: #181c45; border: 2px solid transparent; border-radius: 14px; padding: 8px; cursor: pointer; }
.listing.on { border-color: var(--accent); }
.listing .thumb { width: 60px; flex: none; }
.listing small { display: block; color: var(--muted); }
.price { color: var(--accent); font-weight: 700; }
.badge { font-size: 0.7rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(76, 201, 240, 0.18); color: #8fdcf5; vertical-align: middle; }
.badge.player { background: rgba(123, 211, 137, 0.18); color: #9fe3a9; }
.market-side { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.mk3d { aspect-ratio: 1.1; }
.adopt { background: #181c45; border-radius: 14px; padding: 14px; }

/* modal + toast */
.modal-bg { position: fixed; inset: 0; background: rgba(5, 6, 20, 0.6); display: grid; place-items: center; z-index: 50; backdrop-filter: blur(3px); padding: 16px; }
.modal { width: min(440px, 100%); }
.modal-body { color: var(--muted); margin-bottom: 12px; }
#toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px) scale(0.95); background: #262c6e; color: var(--text); border: 1px solid var(--accent); padding: 10px 20px; border-radius: 999px; font-weight: 600; opacity: 0; transition: 0.25s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none; z-index: 60; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(255, 209, 102, 0.12); max-width: calc(100vw - 32px); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

@media (max-width: 900px) {
  .hub-grid, .editor, .shop, .collection, .market, .modes { grid-template-columns: 1fr; }
  .slots, .slots.n4 { grid-template-columns: 1fr 1fr; }
  .arena-help { white-space: normal; text-align: center; width: 92%; border-radius: 14px; }
}
@media (max-width: 560px) {
  .slots, .slots.n4 { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 1.2rem; }
}

/* ---------- new UI bits ---------- */
.top-right { display: flex; align-items: center; gap: 6px; justify-self: end; }
.btn.mute { font-size: 1.1rem; padding: 6px 10px; }
.tbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 22%, transparent); color: var(--tc); vertical-align: middle; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { background: #181c45; border: 2px solid transparent; border-radius: 999px; padding: 6px 12px; font-size: 0.88rem; }
.chip-btn.on { border-color: var(--accent); background: #262b63; }
.look { display: flex; flex-direction: column; gap: 10px; background: rgba(0, 0, 0, 0.18); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.look-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.look-row > .mini { width: 38px; }
.text.slim { width: auto; flex: 1; min-width: 160px; padding: 8px 10px; }
.type-blurb { color: var(--muted); font-size: 0.88rem; margin: 2px 0 10px; }
.type-blurb b { color: var(--text); }
.ed-stats .arch small { color: var(--muted); font-weight: 400; font-size: 0.75rem; }
.type-card { display: flex; gap: 14px; align-items: center; background: color-mix(in srgb, var(--tc) 14%, #181c45); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; }
.type-card .ti { font-size: 2.4rem; }
.type-card p { margin: 2px 0; color: var(--muted); font-size: 0.9rem; }
.type-card small { color: var(--accent); }
.shop-body h3 { margin: 16px 0 8px; }

/* ---------- touch controls ---------- */
.touchpad { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 2; }
.touchpad.show { display: block; }
.tp-zone { position: absolute; bottom: 0; top: 30%; width: 50%; pointer-events: auto; touch-action: none; }
.tp-zone.left { left: 0; } .tp-zone.right { right: 0; }
.touchpad:not(.two) .tp-zone.left { width: 58%; }
.tp-stick { position: absolute; left: 22%; top: 70%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.25); opacity: 0.55; transition: opacity 0.15s; }
.tp-zone.right .tp-stick { left: 78%; }
.tp-zone.active .tp-stick { opacity: 1; }
.tp-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.tp-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); pointer-events: none; }
/* four action buttons in an arc round a big Attack button (thumb-sized, icon + word) */
.tp-btns { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); width: 224px; height: 224px; pointer-events: none; }
.tp-btns.two.left { right: auto; left: calc(50% - 236px); }
.tp-btns.two.right { right: auto; left: calc(50% + 12px); }
.tp-btn { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.55); color: #fff; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 -5px 0 rgba(0, 0, 0, 0.18); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform 0.06s, filter 0.06s; will-change: transform; }
.tp-btn svg { width: 58%; height: 58%; margin-top: -4%; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); }
.tp-btn span { font-size: 0.64rem; margin-top: -2px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); pointer-events: none; white-space: nowrap; }
.tp-btn.down { transform: scale(0.88); filter: brightness(1.35); }
.tp-btn.atk { width: 98px; height: 98px; right: 0; bottom: 0; background: radial-gradient(circle at 35% 30%, #ff8a9b, #e8364f 70%); }
.tp-btn.atk span { font-size: 0.75rem; }
.tp-btn.atk[data-mode="air"] { background: radial-gradient(circle at 35% 30%, #ffc078, #f06a1d 70%); }
.tp-btn.atk[data-mode="dash"] { background: radial-gradient(circle at 35% 30%, #9be7ff, #2a8fd6 70%); }
.tp-btn.jump { width: 72px; height: 72px; right: 122px; bottom: 13px; background: radial-gradient(circle at 35% 30%, #a6f0a8, #2fae5a 70%); }
.tp-btn.sp { width: 74px; height: 74px; right: 90px; bottom: 90px; background: radial-gradient(circle at 35% 30%, #ffe08a, #f2a400 70%); }
.tp-btn.sp::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(10, 12, 32, 0.62) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events: none; }
/* ready: a ring grows and fades out (transform + opacity only: an animated box-shadow repainted every frame) */
.tp-btn.sp.ready::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid rgba(255, 209, 102, 0.85); pointer-events: none; animation: spReady 0.7s ease-out infinite; }
@keyframes spReady { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.28); opacity: 0; } }
.tp-btn.dodge { width: 70px; height: 70px; right: 14px; bottom: 122px; background: radial-gradient(circle at 35% 30%, #9be7ff, #1f9bd1 70%); }
.tp-btns.two { transform: scale(0.8); transform-origin: bottom right; }
.tp-btns.two.left { transform-origin: bottom left; }
.arena.is-touch .arena-help { display: none; }

/* ---------- phones & tablets ---------- */
@media (max-width: 900px) {
  .screen { padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .hub-stage { min-height: 320px; }
  .stage3d { min-height: 260px; }
  .big-btn { padding: 14px 18px; font-size: 1.1rem; }
  .big-btn.start { font-size: 1.6rem; padding: 18px; }
  .hud { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: calc(64px + env(safe-area-inset-right)); gap: 6px; justify-content: flex-start; }
  .hud-card { min-width: 0; flex: 1 1 140px; max-width: 220px; padding: 4px 8px 4px 4px; gap: 6px; }
  .hud-card img { width: 34px; height: 34px; }
  .hud-name { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-name small { display: none; }
  .popup { font-size: 1.15rem; } .popup.big { font-size: 1.9rem; } .popup.crit { font-size: 1.5rem; } .popup.pow { font-size: 1.9rem; } .popup.special { font-size: 1.25rem; }
  .popup.burst { font-size: 1.35rem; } .popup.burst.big { font-size: 1.8rem; } .popup.burst.ko { font-size: 2.4rem; }
  .chain b { font-size: 2.5rem; } .chain { top: 22%; }
  .canvas-wrap { max-width: 560px; margin: 0 auto; }
  .preview3d { aspect-ratio: 1.4; }
}
@media (max-width: 560px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 6px; }
  .topbar h1 { font-size: 1.05rem; }
  .pname { display: none; }
  .chip { padding: 3px 6px 3px 3px; }
  .btn { padding: 9px 12px; }
  .tool { padding: 6px 7px; font-size: 0.85rem; }
  .sw { width: 22px; height: 22px; }
  .modes { margin-top: 1vh; }
  .mode-card { padding: 18px 14px; }
  .mode-ic { font-size: 2.6rem; }
  .items { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .sb { grid-template-columns: 92px 1fr 34px; font-size: 0.82rem; }
  .tabs button { padding: 8px 4px; font-size: 0.85rem; }
  .tp-btns { transform: scale(0.88); transform-origin: bottom right; }
  .tp-btns.two { transform: scale(0.7); transform-origin: bottom center; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hud { top: max(4px, env(safe-area-inset-top)); } .hud-card img { width: 28px; height: 28px; }
  .tp-btns { transform: scale(0.82); transform-origin: bottom right; }
  .tp-btns.two { transform: scale(0.66); }
}

/* ---------- UI polish pass ---------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn:active:not(:disabled), .big-btn:active, .mode-card:active, .pick:active, .chip-btn:active { transform: scale(0.97); }
.screen { animation: enter 0.28s ease-out both; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar .btn.ghost[data-back], .topbar [data-act=switch] { white-space: nowrap; }
kbd { font: inherit; font-size: 0.85em; font-weight: 600; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; color: var(--text); }

/* coin chip feedback */
.coin.up { animation: coin-up 0.6s ease-out; }
.coin.down { animation: coin-down 0.5s ease-out; }
@keyframes coin-up { 30% { transform: scale(1.3); background: rgba(123, 211, 137, 0.35); color: #c9ffd1; } }
@keyframes coin-down { 30% { transform: scale(0.88); background: rgba(255, 93, 115, 0.3); } }

/* steps (title + help) */
.steps { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: st; }
.steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; counter-increment: st; }
.steps li::before { content: counter(st); position: absolute; top: 6px; left: 8px; font-size: 0.7rem; font-weight: 700; color: var(--accent); }
.steps span { font-size: 1.7rem; }
.steps small { color: var(--muted); font-size: 0.78rem; line-height: 1.25; }
.intro-steps li { animation: enter 0.4s ease-out both; }
.intro-steps li:nth-child(2) { animation-delay: 0.08s; } .intro-steps li:nth-child(3) { animation-delay: 0.16s; }
.modal.wide { width: min(600px, 100%); }
.help .keys { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 4px 0 10px; }
.help .keys th { font-weight: 600; color: var(--text); text-align: center; padding: 4px; }
.help .keys td { text-align: center; padding: 6px 4px; border-top: 1px solid var(--line); color: var(--text); }
.help .keys td:first-child { text-align: left; color: var(--muted); white-space: nowrap; }
.help p { margin: 0; }

/* hub */
.big-btn.start { flex-wrap: wrap; row-gap: 0; }
.big-btn.start em { flex-basis: 100%; text-align: center; font-style: normal; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; opacity: 0.85; }
.big-btn.start span { width: auto; }
.big-btn:hover span { animation: wiggle 0.4s ease-in-out; }
@keyframes wiggle { 30% { transform: rotate(-12deg) scale(1.15); } 70% { transform: rotate(8deg); } }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px; }
.pstat { display: flex; flex-direction: column; align-items: center; background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 8px 4px; }
.pstat b { font-size: 1.3rem; }
.pstat small { color: var(--muted); font-size: 0.75rem; }
.pstats .next { grid-column: 1 / -1; margin: 2px 0 0; font-size: 0.9rem; color: var(--muted); background: rgba(255, 209, 102, 0.08); border: 1px dashed rgba(255, 209, 102, 0.35); border-radius: 10px; padding: 8px 12px; }
.stage3d .empty-3d { pointer-events: auto; line-height: 1.6; }
.empty-ic { font-size: 3.5rem; animation: bob 2s ease-in-out infinite; }
.empty-3d .btn { margin-top: 10px; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(4deg); } }

/* results */
.result-card { position: relative; overflow: hidden; }
.reward-line { animation: enter 0.35s ease-out both; animation-delay: calc(0.3s + var(--d, 0s)); }
.reward-line.won { background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 22%, #181c45), #181c45); }
.reward-line .gain { font-variant-numeric: tabular-nums; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); transform: scale(var(--s)); animation: fall var(--t) cubic-bezier(.3, .6, .5, 1) var(--dl) both; }
@keyframes fall { from { transform: translateY(0) rotate(0) scale(var(--s)); opacity: 1; } to { transform: translateY(110vh) rotate(var(--r)) scale(var(--s)); opacity: 0.2; } }

@media (max-width: 900px) {
  .modes { gap: 12px; margin-top: 1vh; }
  .mode-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'ic h' 'ic p' 'ic r'; column-gap: 16px; text-align: left; align-items: center; padding: 16px 18px; }
  .mode-card .mode-ic { grid-area: ic; margin: 0; }
  .mode-card h2 { grid-area: h; margin: 0; font-size: 1.25rem; }
  .mode-card p { grid-area: p; margin: 4px 0; font-size: 0.9rem; }
  .mode-card .reward { grid-area: r; margin: 0; }
}
@media (max-width: 560px) {
  .lbl { display: none; }
  .topbar .btn.ghost[data-back], .topbar [data-act=switch] { font-size: 1.25rem; padding: 6px 12px; }
  .top-right { gap: 2px; }
  .topbar .btn.icon { padding: 6px 8px; }
  .steps li { padding: 10px 4px; }
  .steps span { font-size: 1.4rem; }
  .pstat b { font-size: 1.1rem; }
  .help .keys { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .confetti { display: none; }
}
@media (max-width: 560px) {
  .topbar h1.logo.small { font-size: 1.35rem; letter-spacing: 0.02em; overflow: visible; }
}
.reward-line .gain i { font-style: normal; }

/* saves */
.saves h3 { margin: 16px 0 8px; }
.save-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.save-status div { display: flex; flex-direction: column; align-items: center; background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 8px; }
.save-status b { font-size: 1.3rem; }
.save-status small { color: var(--muted); font-size: 0.75rem; }
.save-facts { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; color: var(--muted); }
.snaps { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.snap { display: flex; align-items: center; gap: 10px; background: #181c45; border-radius: 12px; padding: 8px 10px; }
.snap small { display: block; color: var(--muted); }
label.btn { display: inline-flex; align-items: center; cursor: pointer; }
.modal-bg.top { z-index: 55; }
.cloud-box { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.cloud-box a { color: var(--accent); }
.btn.danger-text { color: #ff8fa0; }
.sync-code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; background: #151937; border: 2px dashed var(--accent); color: var(--accent); border-radius: 14px; padding: 12px; margin: 6px 0 10px; user-select: all; }
.code-input { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.05em; }
.code-input::placeholder { text-transform: none; letter-spacing: 0; font-family: inherit; }

/* adventure ladder */
.modes { grid-template-columns: repeat(3, 1fr); }
.mode-card.adventure { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: linear-gradient(180deg, #3a3478, var(--panel)); }
.ladder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.ladder-path h2 small { margin-left: 6px; }
.stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 8px; }
.stage { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: #181c45; border: 2px solid transparent; border-radius: 14px; padding: 6px 12px 6px 6px; }
.stage .thumb { width: 52px; flex: none; }
.stage .lockt { font-size: 1.4rem; }
.stage.on { border-color: var(--accent); background: #262b63; }
.stage.done { background: linear-gradient(90deg, rgba(123, 211, 137, 0.14), #181c45); }
.stage.boss { border-color: rgba(255, 209, 102, 0.45); background: linear-gradient(90deg, rgba(255, 209, 102, 0.16), #181c45); }
.stage.boss.on { border-color: var(--accent); }
.stage.locked { opacity: 0.55; }
.snum { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: rgba(0, 0, 0, 0.3); }
.stage.done .snum { background: var(--good); color: #10301a; }
.sinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sinfo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sinfo small { color: var(--muted); }
.sstars { color: var(--accent); font-weight: 700; white-space: nowrap; letter-spacing: 0.08em; }
.ladder-side { display: flex; flex-direction: column; gap: 10px; align-self: start; position: sticky; top: 12px; }
.rival3d { aspect-ratio: 1.3; }
.rival-info h3 { margin: 0 0 4px; }
.rival-info p { margin: 0 0 4px; }
.big-stars { display: flex; justify-content: center; gap: 10px; font-size: 3rem; color: #4a4f8a; margin: -4px 0 4px; }
.big-stars span { animation: star-pop 0.45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: var(--d); }
.big-stars span.on { color: var(--accent); text-shadow: 0 0 18px rgba(255, 209, 102, 0.7); }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
@media (max-width: 1100px) { .modes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .modes { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: 1fr; }
  .ladder-side { position: static; order: -1; }
  .rival3d { aspect-ratio: 1.6; }
}

/* online fights */
.mode-card.online { border-color: color-mix(in srgb, #4cc9f0 55%, var(--line)); background: linear-gradient(180deg, #24427a, var(--panel)); }
.online-screen > :not(.topbar) { max-width: 900px; margin-left: auto; margin-right: auto; } /* the top bar stays full width: Back in the same corner as everywhere (docs/UI.md) */
.online-mine { margin-bottom: 16px; }
.online-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.online-grid .panel { display: flex; flex-direction: column; gap: 8px; }
.online-grid .btn.huge { margin-top: auto; }
.online-wait { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.room-code { font-size: 2.6rem; letter-spacing: 0.2em; padding: 12px 28px; }
.waiting { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.spinner.small { width: 20px; height: 20px; border-width: 3px; }
.versus { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.versus > div { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 140px; }
.versus .thumb { width: 110px; }
.versus small { color: var(--muted); text-align: center; }
.vs-mid { font-size: 2rem; font-weight: 700; color: var(--accent2); }
.center { text-align: center; }
@media (max-width: 700px) { .online-grid { grid-template-columns: 1fr; } .room-code { font-size: 2rem; } }

/* online lobby: teams / FFA */
.lobby-opts { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; }
.cpu-seg { align-items: center; }
.cpu-seg .mini { padding: 0 8px; }
.lobby-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; width: 100%; align-items: start; }
.lvs { align-self: center; font-weight: 700; font-size: 1.4rem; color: var(--accent2); }
.lteam { display: flex; flex-direction: column; gap: 6px; background: color-mix(in srgb, var(--tc, #a9aed8) 10%, #151937); border: 1px solid color-mix(in srgb, var(--tc, #a9aed8) 40%, transparent); border-radius: 14px; padding: 10px; }
.lteam h3 { margin: 0 0 2px; color: var(--tc); font-size: 1rem; }
.lteam.ffa { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lp { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: #181c45; border: 2px solid var(--pc); border-radius: 12px; padding: 6px 10px; }
.lp small { color: var(--muted); }
.lp.me { box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.35); }
.lp.cpu { border-style: dashed; border-color: var(--line); opacity: 0.7; }
.lp:disabled { opacity: 1; cursor: default; }
@media (max-width: 560px) { .lobby-teams { grid-template-columns: 1fr; } .lvs { justify-self: center; } }

/* arena: team HUD, many fighters, team intro */
.hud .hud-team { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 18px; background: color-mix(in srgb, var(--tc) 14%, transparent); }
.hud:has(.hud-team) { justify-content: space-between; }
.hud.many .hud-card { min-width: 0; width: 136px; padding: 3px 8px 3px 3px; gap: 6px; }
.hud.many .hud-card img { width: 30px; height: 30px; }
.hud.many .hud-name { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud.many .hud-name small { display: none; }
.hud.many .hp { height: 8px; }
.vs.teams { align-items: stretch; }
.vs-team { display: flex; flex-direction: column; gap: 4px; padding: 12px 18px; border-radius: 18px; background: rgba(12, 14, 36, 0.78); border: 3px solid var(--pc); animation: pop 0.4s ease-out both; }
.vs-team h3 { margin: 0 0 4px; color: var(--pc); font-size: clamp(1.1rem, 3vw, 1.8rem); }
.vs-team em { font-style: normal; color: #fff; font-weight: 600; font-size: clamp(0.9rem, 2.2vw, 1.3rem); }
@media (max-width: 900px) { .hud.many .hud-card { width: 112px; } .hud .hud-team { gap: 4px; } }
/* team HUD: Red on the left, Blue on the right, each team's cards wrapping within its half */
.hud:has(.hud-team) { flex-wrap: nowrap; align-items: flex-start; }
.hud .hud-team { flex: 0 1 auto; max-width: 50%; }
@media (max-width: 1150px) { .hud.many .hud-card { width: 112px; } }
@media (max-width: 900px), (max-height: 500px) {
  .hud.many .hud-card { width: 84px; padding: 2px 6px 2px 2px; gap: 4px; border-width: 1.5px; border-radius: 10px; }
  .hud.many .hud-card img { width: 20px; height: 20px; border-radius: 6px; }
  .hud.many .hud-name { font-size: 0.66rem; }
  .hud.many .hp { height: 6px; margin-top: 2px; }
  .hud.many .sp-ready { display: none; }
  .hud .hud-team { gap: 3px; padding: 3px; border-radius: 12px; }
}
.hud.many { right: 66px; }

/* arena picker */
.arena-panel { margin-top: 16px; }
.arena-pick { width: 100%; text-align: left; }
.arena-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.arena-chip { flex: none; width: 104px; height: 74px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.15); background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 6px 8px; text-align: left; position: relative; overflow: hidden; }
.arena-chip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55)); pointer-events: none; }
.arena-chip .aic { font-size: 1.4rem; position: relative; z-index: 1; }
.arena-chip .anm { font-size: 0.74rem; font-weight: 600; color: #fff; text-shadow: 0 1px 2px #000a; position: relative; z-index: 1; line-height: 1.1; }
.arena-chip.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.35); }
.arena-chip:disabled { opacity: 1; cursor: default; }

/* ===================================================================   Wallet & economy (js/wallet.js, js/economy.js): gem chip, reward notes,
   Wallet screen, Gem Shop, grown-up gate dialogs.
   ========================================================================== */
.gem { background: rgba(160, 231, 255, 0.14); color: #a0e7ff; padding: 2px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.gem.up { animation: coin-up 0.6s ease-out; }
.gem.down { animation: coin-down 0.5s ease-out; }
button.wallet-chip { gap: 6px; color: var(--text); transition: border-color 0.15s, transform 0.08s; }
button.wallet-chip:hover { border-color: #a0e7ff; }
.gem-gain { color: #a0e7ff; margin-left: 6px; }
.reward-notes { list-style: none; margin: -2px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.reward-notes li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; background: rgba(160, 231, 255, 0.08); border: 1px dashed rgba(160, 231, 255, 0.35); border-radius: 10px; padding: 6px 12px; animation: enter 0.35s ease-out both; animation-delay: var(--d, 0.6s); text-align: left; }
.reward-notes li b { margin-left: auto; color: #a0e7ff; white-space: nowrap; }
.reward-notes li.capped { background: rgba(255, 255, 255, 0.04); border-color: var(--line); color: var(--muted); }

.wallet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wallet h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wallet section > p { margin: 10px 0 0; }
.w-bal { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.w-cur { display: flex; align-items: center; gap: 14px; border-radius: 16px; padding: 14px 18px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); }
.w-cur.coins { background: linear-gradient(135deg, rgba(255, 209, 102, 0.22), rgba(0, 0, 0, 0.2)); border-color: rgba(255, 209, 102, 0.4); }
.w-cur.gems { background: linear-gradient(135deg, rgba(160, 231, 255, 0.22), rgba(0, 0, 0, 0.2)); border-color: rgba(160, 231, 255, 0.4); }
.w-ic { font-size: 2.6rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.w-cur b { display: block; font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.w-cur.coins b { color: var(--accent); } .w-cur.gems b { color: #a0e7ff; }
.w-cur small { color: var(--muted); }
.w-today { grid-column: 1 / -1; }
.w-today small { color: var(--muted); display: block; margin-top: 6px; }
.w-today small b { color: var(--text); }
.w-bar { height: 10px; border-radius: 999px; background: #151937; overflow: hidden; border: 1px solid var(--line); }
.w-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd166, #ff9f43); border-radius: inherit; }
.w-test { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: #2a1a00; background: repeating-linear-gradient(45deg, #ffd166 0 8px, #ffb703 8px 16px); padding: 3px 10px; border-radius: 999px; }
.w-test.sm { font-size: 0.6rem; padding: 1px 6px; vertical-align: middle; }
.w-test.block { display: block; text-align: center; border-radius: 10px; padding: 8px; margin: 0 0 12px; font-size: 0.8rem; }
.w-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.w-bundles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.w-bundle { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 10px; border-radius: 16px; border: 2px solid rgba(160, 231, 255, 0.35); background: radial-gradient(120% 90% at 50% 0%, rgba(160, 231, 255, 0.2), #181c45 70%); transition: transform 0.1s, border-color 0.15s; }
.w-bundle:hover:not(:disabled) { transform: translateY(-2px); border-color: #a0e7ff; }
.w-bic { font-size: 2.2rem; line-height: 1.2; }
.w-bundle b { font-size: 1.15rem; }
.w-bundle small { color: #8fe3a0; font-size: 0.78rem; }
.w-price { margin-top: 6px; background: linear-gradient(180deg, #ffd166, #ffb703); color: #2a1a00; font-weight: 700; padding: 4px 14px; border-radius: 999px; }
.w-soon { background: rgba(0, 0, 0, 0.2); border: 1px dashed var(--line); border-radius: 14px; padding: 14px; color: var(--muted); }
.w-soon b { color: var(--text); }
.w-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.w-list li { display: flex; align-items: center; gap: 10px; background: #181c45; border-radius: 12px; padding: 7px 12px; }
.w-list li > span { font-size: 1.3rem; width: 28px; text-align: center; }
.w-list li div { flex: 1; min-width: 0; }
.w-list li small { display: block; color: var(--muted); font-size: 0.78rem; }
.w-list em { font-style: normal; font-weight: 700; color: #a0e7ff; white-space: nowrap; }
.w-list em.done { color: var(--good); }
.w-list li.got { opacity: 0.7; }
.w-ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; }
.w-ledger li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.w-ledger b { font-weight: 500; font-size: 0.92rem; }
.w-ledger small { display: block; color: var(--muted); font-size: 0.74rem; overflow-wrap: anywhere; }
.w-lic { font-size: 1.2rem; width: 26px; text-align: center; flex: none; }
.w-d { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-d .plus { color: var(--good); } .w-d .minus { color: #ff8fa0; }
.w-usage { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.w-usage b { color: var(--text); }
.w-grown { grid-column: 1 / -1; border-style: dashed; }
.w-modal .w-q { font-size: 1.35rem; font-weight: 600; color: var(--text); text-align: center; margin: 14px 0 4px; }
.w-modal .w-wrong { color: #ff8fa0; }
.w-modal .w-answer { font-size: 1.4rem; text-align: center; letter-spacing: 0.1em; }
.w-modal.center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(300px, 100%); }
.w-confirm { display: flex; align-items: center; gap: 12px; background: #181c45; border-radius: 14px; padding: 12px; color: var(--text); }
.w-confirm div { flex: 1; } .w-confirm small { display: block; color: var(--muted); }
.w-confirm .w-price { margin: 0; }
.w-thanks { font-size: 2.6rem; font-weight: 700; text-align: center; color: #a0e7ff; margin: 6px 0; }
@media (max-width: 900px) {
  .wallet { grid-template-columns: 1fr; }
  .w-col { display: contents; } /* phone order: shop, swap, how to earn, history */
  .w-shop { order: 1; } .w-swap { order: 2; } .w-earn { order: 3; } .w-hist { order: 4; } .w-grown { order: 5; }
}
@media (max-width: 560px) {
  .w-bal { grid-template-columns: 1fr 1fr; padding: 12px; gap: 8px; }
  .w-cur { padding: 10px; gap: 8px; }
  .w-ic { font-size: 1.8rem; }
  .w-cur b { font-size: 1.6rem; }
  .wallet-chip .pname { display: none; }
  .wallet-chip .coin, .wallet-chip .gem { padding: 2px 7px; font-size: 0.85rem; }
}
/* ==============================================================   Progression, missions, trophies, guide & settings (js/progress.js, js/settings.js)
   ===================================================================== */
/* level badge */
.avatar { position: relative; }
.lv-badge { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; color: #2a1a00; background: radial-gradient(circle at 35% 30%, #fff3c4, #ffd166 55%, #ffb703); border: 2px solid #fff3c4; box-shadow: 0 2px 0 #9c6a00; font-variant-numeric: tabular-nums; flex: none; }
.lv-badge.sm { position: absolute; right: -6px; bottom: -5px; min-width: 17px; height: 17px; font-size: 0.62rem; border-width: 1.5px; padding: 0 3px; box-shadow: 0 1px 0 #9c6a00; }
.avatar.big .lv-badge.sm { min-width: 20px; height: 20px; font-size: 0.7rem; }
.lv-badge.big { min-width: 48px; height: 48px; font-size: 1.4rem; border-width: 3px; }

/* XP bar: fills from --from to --to */
.xpbar { height: 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 4px; }
.xpbar i { display: block; height: 100%; width: var(--to); border-radius: inherit; background: linear-gradient(90deg, #7bd389, #c6f36b); box-shadow: 0 0 10px rgba(123, 211, 137, 0.5) inset; animation: xp-fill 1.1s cubic-bezier(.3, .7, .3, 1) var(--d, 0.3s) both; }
.xpbar.slim { height: 8px; }
@keyframes xp-fill { from { width: var(--from); } }

/* hub panel */
.prog-panel { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.prog-head { display: flex; align-items: center; gap: 12px; }
.prog-head small { color: var(--muted); margin-left: 4px; }
.prog-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prog-btns .btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; }
.prog-btns small { color: var(--muted); font-size: 0.8rem; }
.dot { position: absolute; top: -7px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent2); color: #fff; font-size: 0.78rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); animation: dot-pop 1.6s ease-in-out infinite; }
@keyframes dot-pop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.2); } }

/* results card */
.prog-results { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: left; }
.xp-line { display: flex; align-items: center; gap: 12px; background: #181c45; border-radius: 12px; padding: 8px 12px; animation: enter 0.35s ease-out both; animation-delay: var(--d); }
.xp-line .xpbar i { --d: 0.9s; }
.xp-top { display: flex; align-items: baseline; gap: 8px; }
.xp-top small { color: var(--muted); }
.xp-gain { margin-left: auto; color: #c6f36b; font-weight: 700; font-variant-numeric: tabular-nums; }
.prog-mdone { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, rgba(255, 209, 102, 0.18), #181c45); border: 1px dashed rgba(255, 209, 102, 0.5); border-radius: 12px; padding: 8px 12px; animation: enter 0.35s ease-out 1.2s both; }
.prog-mdone > span:first-child { font-size: 1.4rem; }

/* sheets: missions & trophy room */
#prog-root .modal-bg { z-index: 52; }
.prog-sheet { max-height: min(88vh, 760px); overflow: auto; }
.prog-sheet h2 small { margin-left: 6px; }
.missions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.mission { display: flex; align-items: center; gap: 12px; background: #181c45; border: 2px solid transparent; border-radius: 14px; padding: 10px 12px; }
.mission.done:not(.claimed) { border-color: var(--accent); background: linear-gradient(90deg, rgba(255, 209, 102, 0.16), #181c45); }
.mission.claimed { opacity: 0.7; }
.mission small { color: var(--muted); font-size: 0.78rem; }
.m-ic { font-size: 1.8rem; width: 40px; text-align: center; flex: none; }
.m-state { color: var(--accent); font-weight: 600; white-space: nowrap; font-size: 0.9rem; }
.mission.claimed .m-state { color: var(--good); }
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.trophy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; background: #181c45; border: 2px solid transparent; border-radius: 14px; padding: 12px 8px; }
.trophy b { font-size: 0.95rem; line-height: 1.15; }
.trophy small { color: var(--muted); font-size: 0.75rem; line-height: 1.25; }
.trophy .xpbar { width: 100%; }
.trophy .btn { margin-top: 4px; }
.t-ic { font-size: 2.1rem; line-height: 1.1; }
.trophy.locked .t-ic { filter: grayscale(1); opacity: 0.6; }
.trophy.got { background: linear-gradient(180deg, rgba(255, 209, 102, 0.14), #181c45); }
.trophy.new { border-color: var(--accent); box-shadow: 0 0 18px rgba(255, 209, 102, 0.3); }
.t-state { color: var(--good) !important; font-weight: 600; margin-top: auto; }
.trophy.locked .t-state { color: var(--muted) !important; font-weight: 400; }

/* celebration pop-up */
.cele-bg { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 20, 0.66); backdrop-filter: blur(3px); animation: fade-in 0.2s ease-out both; }
.cele-bg.out { animation: fade-out 0.18s ease-in both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.cele { position: relative; overflow: hidden; width: min(380px, 100%); text-align: center; padding: 26px 20px 20px; animation: cele-pop 0.5s cubic-bezier(.2, 1.5, .4, 1) both; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
@keyframes cele-pop { from { transform: scale(0.6); opacity: 0; } }
.cele-rays { position: absolute; left: 50%; top: 64px; width: 420px; height: 420px; margin: -210px 0 0 -210px; background: repeating-conic-gradient(rgba(255, 209, 102, 0.16) 0 10deg, transparent 10deg 24deg); border-radius: 50%; animation: spin 12s linear infinite; pointer-events: none; -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); }
@keyframes spin { to { transform: rotate(360deg); } }
.cele > :not(.cele-rays) { position: relative; }
.cele-ic { font-size: 4rem; line-height: 1; animation: cele-ic 0.7s cubic-bezier(.2, 1.6, .4, 1) 0.1s both; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)); }
@keyframes cele-ic { from { transform: scale(0) rotate(-30deg); } }
.cele-who { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 6px; }
.cele-kick { display: block; margin-top: 6px; color: var(--accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }
.cele h2 { margin: 2px 0 6px; font-size: 1.8rem; }
.cele p { margin: 0; color: var(--muted); }

/* first-run guide */
.guide-tip { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, rgba(76, 201, 240, 0.2), rgba(76, 201, 240, 0.06)); border: 2px solid rgba(76, 201, 240, 0.65); border-radius: 14px; padding: 10px 12px; margin: 0 0 12px; animation: enter 0.4s ease-out 0.2s both; line-height: 1.4; }
.guide-tip .g-ic { font-size: 1.5rem; }
.guide-tip .btn.ghost { color: var(--muted); flex: none; }
.guide-tip .btn.primary { margin-left: 4px; }
.hub-menu .guide-tip { margin: 0; }
.guide-glow { position: relative; z-index: 1; animation: guide-glow 1.6s ease-in-out infinite !important; }
@keyframes guide-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(76, 201, 240, 0.7); } 50% { box-shadow: 0 0 0 8px rgba(76, 201, 240, 0); } }
.big-btn.start.guide-glow { animation-name: guide-glow-start !important; }
@keyframes guide-glow-start { 0%, 100% { box-shadow: 0 8px 0 #9c2238, 0 0 0 0 rgba(76, 201, 240, 0.8); } 50% { box-shadow: 0 8px 0 #9c2238, 0 0 0 10px rgba(76, 201, 240, 0); } }

/* settings */
.settings h3 { margin: 16px 0 6px; font-size: 1rem; color: var(--muted); }
.set-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.set-row small { display: block; color: var(--muted); font-size: 0.78rem; }
.set-row input[type=range] { width: min(180px, 40vw); accent-color: var(--accent); }
.set-val { width: 42px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.switch { flex: none; width: 52px; height: 30px; border-radius: 999px; border: 1px solid var(--line); background: #151937; padding: 3px; display: flex; transition: background 0.15s; }
.switch i { width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s; }
.switch.on { background: color-mix(in srgb, var(--good) 45%, #151937); border-color: var(--good); }
.switch.on i { transform: translateX(22px); background: #fff; }

/* accessibility switches */
html.big-text { font-size: 112.5%; }
html.calm *, html.calm *::before, html.calm *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
html.calm .confetti, html.calm .cele-rays { display: none; }
@media (prefers-reduced-motion: reduce) { .cele-rays, .dot { animation: none; } .guide-glow { animation: none !important; outline: 3px solid rgba(76, 201, 240, 0.8); outline-offset: 2px; } }
html.calm .guide-glow { outline: 3px solid rgba(76, 201, 240, 0.8); outline-offset: 2px; }
@media (max-width: 560px) {
  .prog-btns .btn { padding: 9px 6px; font-size: 0.92rem; }
  .trophies { grid-template-columns: repeat(2, 1fr); }
  .mission { flex-wrap: wrap; }
  .mission .btn, .mission .m-state { margin-left: 52px; }
  .lv-badge.big { min-width: 40px; height: 40px; font-size: 1.15rem; }
}
@media (max-width: 440px) { .hub .topbar [data-mute] { display: none; } } /* Sound is in ⚙️ Settings; keeps the logo whole */
/* ---------- drawing studio (js/draw.js + js/brushes.js; layout: docs/DRAWING.md) ----------
   One screen, no page scroll. JS (layout() in draw.js) sets --cv (canvas size) and --pvh
   (3D height above the canvas in the tall layout) and toggles .wide / .tall / .pip. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.studio-screen { max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.studio-screen > .guide-tip { margin: 0 auto 8px; max-width: 1100px; width: 100%; padding: 6px 10px; font-size: 0.9rem; }
@media (orientation: portrait) and (max-width: 900px), (max-height: 560px) { .studio-screen > .guide-tip { display: none; } } /* the empty-canvas card says the same */
#ed { flex: 1; min-height: 0; }
.studio { --side: clamp(250px, 27vw, 400px); --cv: 300px; --pvh: 0px; height: 100%; max-width: 1640px; margin: 0 auto; display: grid; gap: 10px; position: relative; }
.studio.wide { grid-template-columns: auto minmax(0, 1fr) var(--side); grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "top top top" "rail ctx side" "rail stage side"; }
.studio.tall { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px;
  grid-template-areas: "top" "stage" "ctx" "rail"; }
.studio.tall .st-side { display: contents; }

/* top bar */
.st-top { grid-area: top; display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-ib { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 1.3rem; display: grid; place-items: center; padding: 0; }
.st-ib:hover:not(:disabled) { border-color: var(--accent); }
.st-ib:disabled { opacity: 0.35; }
.st-name { flex: 1 1 auto; min-width: 0; max-width: 360px; height: 44px; font-weight: 600; }
.st-hist { display: flex; gap: 6px; margin-left: auto; }
.st-save { flex: none; height: 44px; padding: 0 18px; font-size: 1.05rem; white-space: nowrap; box-shadow: 0 4px 0 #c98f00; }

/* tools: vertical rail (wide) or bottom dock (tall) */
.st-tools { grid-area: rail; display: grid; gap: 4px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 6px; }
.studio.wide .st-tools { grid-template-columns: 72px; overflow-y: auto; }
.studio.tall .st-tools { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 4px; }
.st-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; border: 0; border-radius: 12px; background: transparent; padding: 5px 2px; color: var(--text); transition: transform 0.12s, background 0.15s; }
.st-tool .ic { font-size: 1.5rem; line-height: 1; transition: transform 0.15s; }
.st-tool .lb { font-size: 0.7rem; font-weight: 600; color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.st-tool:hover { background: rgba(255, 255, 255, 0.08); }
.st-tool.active { background: var(--accent); box-shadow: 0 3px 0 #c98f00; }
.st-tool.active .lb { color: #2a1a00; }
.st-tool.active .ic { transform: scale(1.12) rotate(-8deg); }
.studio.tall .st-tool { min-height: 48px; }
.studio.tall .st-tool .lb { font-size: 0.6rem; }
@media (max-width: 440px) { .studio.tall .st-tool .lb { display: none; } .studio.tall .st-tool .ic { font-size: 1.45rem; } }
@media (max-height: 640px) { .studio.wide .st-tools { grid-template-columns: 50px; gap: 3px; padding: 4px; } .studio.wide .st-tool { min-height: 42px; } .studio.wide .st-tool .lb { display: none; } }

/* options strip: only what the current tool needs */
.st-ctx { grid-area: ctx; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.st-ctx [hidden] { display: none !important; }
.st-ctx[data-tool=fill] .st-sizes { display: none; }
.st-seg { display: flex; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 3px; flex: none; }
.st-seg button { min-width: 40px; min-height: 40px; border: 0; border-radius: 10px; background: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--text); }
.st-seg button:hover { background: rgba(255, 255, 255, 0.08); }
.st-seg button.on { background: #3f479b; box-shadow: inset 0 0 0 2px var(--accent); }
.st-sizes i { display: block; width: var(--d); height: var(--d); border-radius: 50%; background: var(--text); }
.st-colors { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 6px; }
.st-colors .swatches { flex: 0 1 auto; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 26px; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px 3px; }
.st-colors .swatches::-webkit-scrollbar { display: none; }
.studio .sw { width: 100%; height: auto; aspect-ratio: 1; max-width: 26px; justify-self: center; border-width: 1.5px; }
.st-custom { flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; cursor: pointer;
  background: conic-gradient(#ff4f6d, #ffd23f, #3ddc97, #2ec4f1, #7b61ff, #ff6ec7, #ff4f6d); border: 2px solid rgba(255, 255, 255, 0.35); }
.st-custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.st-pal { flex: none; min-height: 32px; background: #343b85; border: 1px solid #4b53a8; border-radius: 10px; padding: 4px 9px; font-size: 0.8rem; color: var(--text); white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.st-stickers { flex: 1 1 340px; min-width: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.st-stk { aspect-ratio: 1; min-width: 0; max-width: 48px; border-radius: 10px; border: 2px solid transparent; background: #f4f5ff; padding: 2px; justify-self: center; width: 100%; }
.st-stk canvas { width: 100%; height: 100%; display: block; }
.st-stk.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.4); }
.st-stkctl { display: flex; align-items: center; gap: 4px; flex: none; }
.st-stkctl button { min-width: 40px; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 1rem; }
.st-stkctl button:hover { border-color: var(--accent); }
.st-stkinfo { margin-left: 4px; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.5em; }
.st-patterns { display: flex; gap: 5px; flex: none; }
.st-patbtn { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border-radius: 12px; border: 2px solid var(--accent); background: #262b63; color: var(--text); font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.st-patbtn canvas { width: 32px; height: 32px; border-radius: 8px; display: block; }
.st-patbtn .st-more { opacity: 0.7; font-size: 0.75rem; }
.st-texpick { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: min(420px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.st-texpick[hidden] { display: none; }
.st-texpick .mini { padding-right: 44px; min-height: 22px; }
.st-texgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.st-tex { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border-radius: 12px; border: 2px solid transparent; background: #181c45; color: var(--text); font-size: 0.72rem; }
.canvas-wrap .st-tex canvas { position: static; width: 100%; height: auto; max-width: 52px; aspect-ratio: 1; border-radius: 9px; display: block; }
.st-tex:hover { border-color: rgba(255, 209, 102, 0.5); }
.st-tex.on { border-color: var(--accent); background: #262b63; }
.studio.tall .st-ctx { gap: 6px; }
.studio.tall .st-colors, .studio.tall .st-stickers { order: -1; flex-basis: 100%; }
.studio.tall .st-stickers { grid-template-columns: repeat(10, minmax(0, 1fr)); }
@media (max-width: 440px) { .studio.tall .st-patterns .lb, .st-pal span { display: none; } }

/* the canvas: biggest square that fits, centred */
.st-stage { grid-area: stage; min-width: 0; min-height: 0; pointer-events: none; }
.studio .canvas-wrap { grid-area: stage; width: var(--cv); height: var(--cv); max-width: none; margin: 0; justify-self: center; align-self: center; }
.studio.tall .canvas-wrap { align-self: end; }
.studio.tall.pip .canvas-wrap { align-self: center; }
.studio .canvas-wrap #guide, .studio .canvas-wrap #overlay { pointer-events: none; }
.studio .canvas-wrap[data-tool=fill] #draw { cursor: cell; }
.studio .canvas-wrap[data-tool=sticker] #draw { cursor: copy; }
.studio .canvas-wrap.sym-mirror .mirror-line { display: block; }
.spin-lines { position: absolute; inset: 0; display: none; pointer-events: none; }
.spin-lines i { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed rgba(123, 97, 255, 0.3); }
.spin-lines i:nth-child(2) { transform: rotate(60deg); }
.spin-lines i:nth-child(3) { transform: rotate(120deg); }
.canvas-wrap.sym-radial .spin-lines { display: block; }
.st-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(27, 27, 47, 0.82); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; pointer-events: none; animation: st-pop 0.25s ease-out both; }
@keyframes st-pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.st-badge[hidden] { display: none; }
.st-badge b { color: var(--accent); }
.st-empty { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); /* top edge: the middle is where the first outline gets drawn */ width: min(86%, 380px); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 20px rgba(60, 60, 120, 0.15); color: #6a7099; pointer-events: none; font-size: 0.92rem; }
.st-empty b { font-size: clamp(1.05rem, 3.4vw, 1.45rem); color: #5b6196; }
.st-empty .st-tpls { justify-content: center; pointer-events: auto; }
.st-empty .chip-btn { background: #eef0ff; color: #3a3f78; min-height: 38px; }
.st-empty .chip-btn:hover { border-color: #7b61ff; }
.canvas-wrap.has-ink .st-empty, .canvas-wrap.ghosting .st-empty, .canvas-wrap.tpl-closed .st-empty { display: none; }
.st-empty .x-close { pointer-events: auto; top: 6px; right: 6px; width: 34px; height: 34px; color: #5b6196; border-color: #d6d9f5; background: #eef0ff; }
.st-empty > b { padding: 0 30px; }
.st-shapes .mini { padding-right: 44px; min-height: 22px; }
.st-ghostbar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; white-space: nowrap; }
.st-ghostbar[hidden] { display: none; }
.st-tpls { display: flex; flex-wrap: wrap; gap: 6px; }
.studio .canvas-wrap { container-type: size; }
@container (max-width: 400px) {
  .st-empty { gap: 6px; padding: 12px; font-size: 0.85rem; }
  .st-empty .st-tpls { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: 100%; scrollbar-width: none; padding-bottom: 2px; }
  .st-empty .chip-btn { flex: none; min-height: 36px; padding: 4px 10px; }
}
.studio.tall.pip:not(.has-shape):not(.look-open) .preview3d { display: none; } /* nothing to show yet: keep the empty canvas clear */
.st-view { position: absolute; inset: 0; transform-origin: 0 0; }
.canvas-wrap.zoomed { box-shadow: inset 0 0 0 3px rgba(123, 97, 255, 0.45); }
.st-unzoom { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3; min-height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(27, 27, 47, 0.85); color: #fff; font-weight: 600; }
.st-unzoom[hidden] { display: none; }
/* floating canvas buttons: symmetry (bottom-left), shapes (bottom-right), draw-it-for-me (bottom-centre) */
.st-float { position: absolute; bottom: 10px; z-index: 3; min-height: 42px; min-width: 42px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: rgba(27, 27, 47, 0.78); color: #fff; font-size: 1.15rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.st-float .lb { font-size: 0.82rem; font-weight: 600; }
.st-float:hover { background: rgba(27, 27, 47, 0.92); }
.st-shapebtn { left: 10px; }
.st-shapebtn.on { box-shadow: 0 0 0 2px #a48bff, 0 4px 12px rgba(0, 0, 0, 0.25); }
.st-symmark { font-size: 0.95rem; margin-left: -2px; }
.st-symmark[hidden] { display: none; }
.st-shapes { position: absolute; left: 10px; bottom: 60px; z-index: 4; width: min(300px, calc(100% - 20px)); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: var(--panel2); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); animation: st-pop 0.18s ease-out both; }
.st-shapes[hidden] { display: none; }
.st-shapes .chip-btn { min-height: 40px; }
.st-tip { position: absolute; left: 50%; bottom: 62px; transform: translate(-50%, 6px); z-index: 2; width: max-content; max-width: min(86%, 460px); text-align: center; font-size: 0.88rem; line-height: 1.3; color: #2b2f5e; background: rgba(255, 255, 255, 0.95); border-radius: 14px; padding: 7px 12px; box-shadow: 0 4px 14px rgba(40, 40, 90, 0.2); pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; }
.st-tip.show { opacity: 0.92; transform: translate(-50%, 0); }
.st-tip.flash { opacity: 1; background: #fff3cf; box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(40, 40, 90, 0.2); }

/* 3D preview + look panel */
.st-side { grid-area: side; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.studio .preview3d { aspect-ratio: auto; flex: 1 1 0; min-height: 160px; transition: border-radius 0.25s, box-shadow 0.25s; }
.preview3d.bump { animation: st-bump 0.5s ease-out; }
@keyframes st-bump { 0% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(255, 209, 102, 0); } }
/* waiting for the 3D rebuild after a stroke: a soft glow (opacity only, so it keeps animating
   on the compositor while the rebuild blocks the page) */
.preview3d.building::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(circle at 50% 55%, rgba(255, 209, 102, 0.35), transparent 60%); animation: st-building 0.6s ease-in-out infinite alternate; }
@keyframes st-building { from { opacity: 0.2; } to { opacity: 1; } }
.st-pvopen { display: none; position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; padding: 0; }
.st-pvopen span { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); font-size: 0.9rem; }
.st-look { display: flex; flex-direction: column; gap: 10px; background: rgba(0, 0, 0, 0.18); border: 1px solid var(--line); border-radius: 14px; padding: 12px; overflow-y: auto; flex: none; max-height: 62%; }
.st-lookhead { display: none; align-items: center; justify-content: space-between; gap: 8px; }
.st-look .look-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-look .look-row > .mini { width: 38px; flex: none; }
.st-look .swatches { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, 24px); gap: 4px; min-width: 0; }
.st-look .chips { flex: 1; min-width: 0; }
.st-look .chip-btn { padding: 5px 10px; font-size: 0.84rem; }
.st-look .ed-stats .arch { margin-bottom: 2px; }
.st-look .type-blurb { font-size: 0.82rem; margin: 0 0 6px; }
.st-look .statbars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.st-look .sb { grid-template-columns: 66px 1fr 26px; font-size: 0.76rem; gap: 5px; }
.st-look .sb .bar { height: 7px; }
.st-idle { margin: 0; color: var(--muted); font-size: 0.82rem; }
.st-idle:empty { display: none; }
.st-scrim { display: none; }

/* tall: 3D above the canvas, or a floating bubble; tap it for the Look sheet */
.studio.tall .preview3d { grid-area: stage; align-self: start; justify-self: stretch; height: var(--pvh); min-height: 0; flex: none; z-index: 1; }
.studio.tall .st-pvopen { display: block; }
.studio.tall .st-look { display: none; }
.studio.tall .st-idle { display: none; }
.studio.tall.pip .preview3d { justify-self: end; width: clamp(96px, 26vw, 150px); height: clamp(96px, 26vw, 150px); margin: calc(var(--cvoff) + 8px) calc((100% - var(--cv)) / 2 + 8px) 0 0; border-radius: 50%; z-index: 3; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.85); }
.studio.tall.pip .preview3d.bump { animation: st-bump 0.5s ease-out; }
.studio.tall.pip .empty-3d { font-size: 0.7rem; padding: 10px; }
.studio.tall.pip .st-pvopen span { right: 50%; bottom: 4px; transform: translateX(50%); width: 24px; height: 24px; font-size: 0.7rem; }
.studio.tall.look-open .preview3d { position: fixed; z-index: 41; left: 0; right: 0; top: 0; width: auto; height: 46dvh; margin: 0; border-radius: 0 0 22px 22px; box-shadow: none; }
.studio.tall.look-open .st-pvopen { display: none; }
.studio.tall.look-open .st-look { display: flex; position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; top: calc(46dvh + 8px); max-height: none; border-radius: 22px 22px 0 0; background: var(--panel); padding: 14px max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); animation: st-sheet 0.25s ease-out both; }
.studio.tall.look-open .st-lookhead { display: flex; }
.studio.tall.look-open .st-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(5, 6, 20, 0.7); }
@keyframes st-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* short + wide (phone landscape): everything in columns so the canvas gets the full height */
.studio.wide.short { --side: clamp(200px, 26vw, 300px); gap: 8px; grid-template-columns: auto auto minmax(0, 1fr) var(--side); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "rail ctx stage top" "rail ctx stage side"; }
.studio.short .st-name { display: none; }
.studio.short .st-top { gap: 4px; }
.studio.short .st-ib { width: 40px; height: 40px; }
.studio.short .st-hist { gap: 4px; }
.studio.short .st-save { padding: 0 10px; height: 40px; }
.studio.short .st-save span { display: none; }
.studio.short .st-save::after { content: 'Go!'; }
.studio.short .st-ctx { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 96px; overflow-y: auto; scrollbar-width: none; gap: 6px; }
.studio.short .st-ctx > * { flex: none; }
.studio.short .st-sizes { display: grid; grid-template-columns: 1fr 1fr; }
.studio.short .st-colors { flex-direction: column; align-items: stretch; }
.studio.short .st-colors .swatches { grid-auto-flow: row; grid-template-columns: repeat(3, 24px); grid-auto-columns: auto; overflow: visible; justify-content: center; gap: 4px; }
.studio.short .st-custom { align-self: center; }
.studio.short .st-pal span { display: none; }
.studio.short .st-stickers { grid-template-columns: 1fr 1fr; }
.studio.short .st-stkctl { display: grid; grid-template-columns: 1fr 1fr; }
.studio.short .st-stkinfo { grid-column: 1 / -1; text-align: center; margin: 0; }
.studio.short .st-patbtn { justify-content: center; width: 100%; padding: 3px; }
.studio.short .st-patbtn .lb { display: none; }
.studio.short .st-look { max-height: none; flex: 1 1 0; min-height: 0; padding: 10px; }
.studio.short .st-look .look-row > .mini { width: 100%; }
.studio.short .preview3d { min-height: 110px; }
/* name prompt (saving without a name) */
.studio.naming .st-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(5, 6, 20, 0.7); }
.st-namebox { position: fixed; z-index: 42; left: 0; right: 0; margin: 0 auto; top: 22%; width: min(400px, calc(100vw - 28px)); display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); animation: st-pop 0.2s ease-out both; }
.st-namebox[hidden] { display: none; }
.st-namebox b { font-size: 1.15rem; }
.st-namerow { display: flex; gap: 8px; }
.st-namerow .text { height: 44px; font-size: 1.1rem; }
.st-namebox .row { margin-top: 2px; }
/* tall: the name field leaves the top bar (asked on save); colours get the whole first row */
.studio.tall .st-name { display: none; }
.studio.tall .st-colors { display: contents; }
.studio.tall .st-colors .swatches { order: -1; flex: 1 1 100%; grid-auto-columns: 26px; justify-content: center; }
.studio.tall .st-custom, .studio.tall .st-pal { order: 1; }
.studio.tall .st-sizes { order: 0; }
@media (max-width: 440px) { .st-save { padding: 0 14px; } .st-name { font-size: 0.95rem; } .st-hist { gap: 4px; } }

/* ==========================================================================
   Shop, Loadout & Training (js/shop.js, docs/SHOP.md)
   Rarity colour comes in as --rc on cards, rows and the dock.
   ========================================================================== */
.shop2 { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
.sh-left { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.sh-left .shop3d { aspect-ratio: 1.15; }
.sh-right { min-width: 0; display: flex; flex-direction: column; }
.sh-body { min-width: 0; }
.sh-body h3 { margin: 18px 0 8px; }
.sh-tabs button { white-space: nowrap; }
.try-tag { position: absolute; left: 10px; top: 10px; z-index: 2; background: rgba(10, 12, 40, 0.75); border: 1px solid var(--accent); color: var(--accent); font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.rank-chip { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255, 209, 102, 0.16); color: var(--accent); vertical-align: middle; }
.eq-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 12px; }
.eq-dot { aspect-ratio: 1; border-radius: 12px; background: #151937; border: 2px solid #2c3270; font-size: 1.35rem; display: grid; place-items: center; padding: 0; }
.eq-dot i { font-style: normal; opacity: 0.28; filter: grayscale(1); font-size: 1.1rem; }
.eq-dot.on { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, #151937); }

/* daily deals */
.deals { background: linear-gradient(135deg, rgba(255, 209, 102, 0.14), rgba(255, 93, 115, 0.1)); border: 1px solid rgba(255, 209, 102, 0.35); border-radius: 16px; padding: 10px; margin-bottom: 12px; }
.deals-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 4px 8px; }
.deals-head small { color: var(--muted); }
.deal-row { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 8px; }

/* item cards */
.filters { margin-bottom: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; font-size: 0.88rem; }
.filters button small { font-size: 0.68rem; opacity: 0.7; font-weight: 400; }
.gear-note { margin: 0 2px 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 12px 8px 8px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rc) 26%, transparent), transparent 70%), #181c45;
  border: 2px solid color-mix(in srgb, var(--rc) 35%, transparent); transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s; }
.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rc) 70%, transparent); }
.card.focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.25); }
.card.on { border-color: var(--good); }
.card.on.focus { box-shadow: 0 0 0 3px rgba(123, 211, 137, 0.3); }
.c-ic { font-size: 2.3rem; line-height: 1.15; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.c-name { font-size: 0.9rem; font-weight: 600; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-desc { color: var(--muted); font-size: 0.75rem; text-align: center; line-height: 1.25; }
.c-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; font-size: 0.78rem; }
.c-price { color: var(--accent); font-weight: 700; white-space: nowrap; }
.c-price.poor { color: var(--muted); }
.c-price s { color: var(--muted); font-weight: 400; }
.state { color: var(--muted); font-weight: 600; }
.state.on { color: var(--good); }
.rtag { font-style: normal; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, transparent); padding: 1px 6px; border-radius: 6px; }
.ribbon { position: absolute; top: 7px; right: -22px; transform: rotate(35deg); background: var(--accent2); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 24px; }
.card.feat { padding-top: 26px; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; column-gap: 10px; text-align: left; }
.card.feat .c-ic { font-size: 3rem; }
.card.feat .c-name { font-size: 1rem; }
.card.feat .c-desc { flex-basis: 100%; }
.card.feat::before { content: '★ Featured'; position: absolute; left: 10px; top: 6px; font-size: 0.66rem; font-weight: 700; color: var(--accent); }
.card.mini .c-ic { font-size: 1.9rem; }
.card.mini .rtag { display: none; }
.card.just { animation: shop-pop 0.6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes shop-pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* item detail dock: sticks to the bottom of the screen while browsing */
.dock { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 5; margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px;
  background: linear-gradient(180deg, #2c3378, #20255a); border: 2px solid var(--rc, var(--line)); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45); }
.dock.idle { justify-content: center; border-style: dashed; border-color: var(--line); box-shadow: none; background: rgba(0, 0, 0, 0.15); position: static; }
.dock .d-ic { font-size: 2.4rem; }
.dock p { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.d-act { display: flex; align-items: center; gap: 4px; }
.d-act .btn { white-space: nowrap; }

/* loadout */
.lo-slots { display: flex; flex-direction: column; gap: 8px; }
.lo-row { background: #181c45; border: 2px solid color-mix(in srgb, var(--rc) 45%, transparent); border-radius: 14px; overflow: hidden; }
.lo-row.open { border-color: var(--accent); }
.lo-head { width: 100%; display: flex; align-items: center; gap: 12px; background: transparent; border: 0; padding: 8px 12px; text-align: left; }
.lo-ic { font-size: 1.8rem; width: 2.2rem; text-align: center; }
.lo-ic i { font-style: normal; opacity: 0.3; filter: grayscale(1); }
.lo-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lo-txt small { color: var(--muted); font-size: 0.75rem; }
.lo-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { color: var(--muted); }
.lo-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; align-items: center; }
.opt { background: #151937; border: 2px solid color-mix(in srgb, var(--rc, #4b53a8) 50%, transparent); border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 0.86rem; display: inline-flex; gap: 6px; align-items: center; }
.opt span { font-size: 1.15rem; }
.opt.on { border-color: var(--accent); background: #2a2f6b; }
.opt.shopit { border-style: dashed; border-color: var(--line); margin-left: auto; }
.fx-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fx-list li { background: rgba(123, 211, 137, 0.08); border: 1px solid rgba(123, 211, 137, 0.3); border-radius: 12px; padding: 8px 10px; font-size: 0.88rem; color: var(--muted); }
.fx-list li span { margin-right: 6px; }
.fx-list li b { color: var(--text); margin-right: 4px; }
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preset { background: #181c45; border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.preset.blank { border-style: dashed; }
.preset .pi { font-size: 1.15rem; min-height: 1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.preset .row { margin-top: 4px; gap: 6px; flex-wrap: wrap; }
.preset .btn { flex: 1; padding: 6px 8px; }
.lo-modal { max-height: calc(100dvh - 32px); overflow: auto; }
.lo-modal h2 small { display: block; margin-top: 2px; }
.lo-modal .modal-body { color: var(--text); }
.lo-modal h3 { margin: 14px 0 8px; }
.lo-modal > .row { position: sticky; bottom: -18px; margin: 0 -18px -18px; padding: 12px 18px; background: linear-gradient(180deg, transparent, var(--panel) 35%); }
.lo-btn { margin-top: 8px; width: 100%; }
.mine-head { margin-top: 4px; }
.hud-lo { margin-left: 4px; font-size: 0.8em; letter-spacing: 1px; }

/* training */
.rank-card { background: linear-gradient(135deg, rgba(255, 209, 102, 0.12), rgba(179, 136, 255, 0.12)); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 22px; margin-bottom: 12px; }
.rank-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rank-top small { display: block; color: var(--muted); font-size: 0.82rem; }
.rank-big { font-size: 1.7rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.rank-bar { position: relative; height: 10px; border-radius: 999px; background: #151937; }
.rank-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffd166, #ff9f43); transition: width 0.3s; }
.rank-bar > b { position: absolute; top: -5px; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; background: #2c3270; border: 2px solid #4b53a8; color: var(--muted); }
.rank-bar > b.on { background: var(--accent); border-color: #ffe39a; color: #2a1a00; }
.delta { color: var(--muted); font-size: 0.88rem; margin-left: 4px; }
.delta em { color: var(--good); font-style: normal; font-weight: 700; }
.tiers { display: flex; flex-direction: column; gap: 10px; }
.tier { background: rgba(0, 0, 0, 0.16); border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.tier-h { display: flex; justify-content: space-between; margin: 0 4px 8px; }
.tier-h small { color: var(--accent); }
.tier.locked .tier-h small { color: var(--muted); }
.perk-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.perk-pair .or { align-self: center; color: var(--muted); font-size: 0.8rem; }
.perk { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: #181c45; border: 2px solid #2c3270; border-radius: 14px; padding: 10px 8px; min-width: 0; }
.perk .pk-ic { font-size: 1.7rem; }
.perk small { color: var(--muted); font-size: 0.78rem; line-height: 1.25; }
.perk.on { border-color: var(--accent); background: color-mix(in srgb, #ffd166 12%, #181c45); box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.18); }
.perk.on b::after { content: ' ✔'; color: var(--accent); }
.tier.locked .perk { opacity: 0.45; filter: grayscale(0.7); }

@media (max-width: 900px) {
  .shop2 { grid-template-columns: 1fr; }
  .sh-left { position: static; }
  .sh-left .shop3d { aspect-ratio: 1.5; }
}
@media (max-width: 560px) {
  .deal-row { grid-template-columns: repeat(3, 1fr); }
  .deal-row .card.feat { grid-column: 1 / -1; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .c-ic { font-size: 2rem; }
  .eq-dot { font-size: 1.15rem; border-radius: 10px; }
  .sh-tabs button { font-size: 0.8rem; padding: 8px 2px; }
  .presets { grid-template-columns: 1fr; }
  .preset { flex-direction: row; align-items: center; gap: 10px; }
  .preset .pi { flex: 1; }
  .preset .row { margin: 0; flex-wrap: nowrap; }
  .perk-pair { grid-template-columns: 1fr 1fr; }
  .perk-pair .or { display: none; }
  .dock { flex-wrap: wrap; gap: 8px; }
  .dock .d-ic { font-size: 2rem; }
  .d-act { width: 100%; }
  .d-act .btn:not(.ghost) { flex: 1; }
}
/* shop: optional gem prices (Epic / Legendary cosmetics) */
.c-gem { color: #a0e7ff; font-weight: 600; }
.btn.gem-buy { color: #a0e7ff; border-color: rgba(160, 231, 255, 0.45); }
.btn.gem-buy.sure { background: rgba(160, 231, 255, 0.18); border-color: #a0e7ff; color: var(--text); }

/* ==========================================================================
   Fit every screen (docs/LAYOUT.md)
   Wide/landscape: screens marked .fit fill the viewport exactly; each column scrolls on its
   own and the 3D view takes the space that's left. Phones (portrait): the page scrolls, the
   3D view sticks to the top while you browse, and FIGHT stays on screen.
   ========================================================================== */
/* FIGHT stays on screen (bottom of the page, or of its scrolling column) */
.fight-bar { position: sticky; bottom: 0; z-index: 6; padding: 12px 0 max(10px, env(safe-area-inset-bottom)); margin-top: 8px; background: linear-gradient(180deg, rgba(18, 21, 46, 0), rgba(18, 21, 46, 0.9) 35%); }
.fight-bar .btn.huge { margin-top: 0; }
.panel .fight-bar { background: linear-gradient(180deg, rgba(32, 37, 90, 0), var(--panel) 35%); }
@media (min-width: 901px) and (min-height: 520px), (orientation: landscape) and (min-width: 640px) {
  .screen.fit { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .screen.fit > .topbar, .screen.fit > .guide-tip { flex: none; }
  .fit .hub-grid, .fit .ladder, .fit .collection, .fit .market, .fit .shop2 { flex: 1; min-height: 0; align-items: stretch; }
  .fit .hub-grid, .fit .collection { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .fit .ladder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fit .market { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .fit .shop2 { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); }
  /* columns scroll on their own */
  .fit .hub-menu, .fit .ladder-path, .fit .ladder-side, .fit .showcase, .fit .grid-wrap, .fit .market-list, .fit .market-side, .fit .sh-left, .fit .sh-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .fit .ladder-side, .fit .grid-wrap, .fit .market-list, .fit .market-side, .fit .sh-left { align-self: stretch; position: static; order: 0; }
  .fit .sh-right { min-height: 0; }
  .fit .sh-body { flex: 1; margin-right: -6px; padding-right: 6px; }
  /* the 3D takes what's left (and shrinks first when space is short) */
  .fit .hub-stage { min-height: 0; }
  .fit .stage3d { min-height: 0; }
  .fit .rival3d, .fit .show3d, .fit .mk3d, .fit .sh-left .shop3d { aspect-ratio: auto; flex: 1 1 0; min-height: 150px; }
  .fit .market-side .mk3d { min-height: 200px; }
  .fit .hub-menu { padding: 4px 6px 4px 4px; margin: -4px -6px -4px -4px; }
}
/* short wide screens (laptops, phone landscape): tighter hub menu */
@media (min-width: 640px) and (max-height: 820px) and (orientation: landscape) {
  .fit .hub-menu { gap: 8px; }
  .fit .big-btn { padding: 11px 18px; font-size: 1.08rem; border-radius: 14px; }
  .fit .big-btn span { font-size: 1.35rem; }
  .fit .big-btn.start { padding: 14px; font-size: 1.6rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .screen { padding-top: max(8px, env(safe-area-inset-top)); }
  .topbar { margin-bottom: 8px; }
  .topbar h1 { font-size: 1.2rem; }
  .fit .hub-grid, .fit .ladder, .fit .collection, .fit .market, .fit .shop2 { gap: 12px; }
  .fit .panel { padding: 12px; }
  .fit .big-btn { padding: 8px 14px; font-size: 0.98rem; }
  .fit .big-btn.start { padding: 10px; font-size: 1.35rem; }
  .fit .big-btn.start em { display: none; }
  .fit .rival3d, .fit .show3d, .fit .mk3d, .fit .sh-left .shop3d { min-height: 120px; }
  .btn.huge { font-size: 1.2rem; padding: 10px 28px; margin-top: 8px; }
  .results { padding-top: 8px; }
  .winner-3d { height: 42vh; }
  /* landscape phones (the app is landscape-only): all five modes on one screen, three per row */
  .modes { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 0; }
  .mode-card { padding: 10px 14px; column-gap: 12px; border-radius: 16px; }
  .mode-card .mode-ic { font-size: 2.1rem; }
  .mode-card h2 { font-size: 1.05rem; }
  .mode-card p { font-size: 0.8rem; margin: 2px 0; line-height: 1.25; }
  /* studio starter card: compact, so most of the canvas stays free to draw on */
  .st-empty { gap: 4px; padding: 8px 10px; font-size: 0.78rem; width: min(92%, 380px); }
  .st-empty b { font-size: 1rem; }
  .st-empty .chip-btn { min-height: 32px; }
  /* hub: two-column menu, so every button is on screen without scrolling */
  .hub-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
  .hub-menu > :not(.big-btn), .hub-menu .big-btn.start { grid-column: 1 / -1; }
  .hub-menu .big-btn:not(.start) { padding: 8px 10px; font-size: 0.92rem; min-height: 46px; gap: 8px; border-radius: 14px; line-height: 1.15; }
  .hub-menu .big-btn:not(.start) span { font-size: 1.2rem; width: 24px; }
  /* players screen: small logo, no intro steps, so "Who's playing?" is on screen */
  .title-screen { padding-top: max(8px, env(safe-area-inset-top)); }
  .title-screen .logo { font-size: 2.4rem; }
  .title-screen .intro-steps { display: none; }
  .title-screen { max-width: 1000px; height: 100vh; height: 100dvh; padding-bottom: max(8px, env(safe-area-inset-bottom)); display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 8px; align-items: center; }
  .title-screen .logo-wrap { grid-area: 1 / 1; min-width: 0; }
  .title-screen .logo.logo-img img { width: 100%; }
  .title-screen .tag { font-size: 1rem; margin: 4px 0 0; }
  .title-screen .players { grid-area: 1 / 2 / 3 / 3; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; }
  .title-screen .players h2 { margin: 0 0 8px; font-size: 1.2rem; }
  .title-screen .profile-card { padding: 6px 10px; }
  .title-screen > .row.center { grid-area: 2 / 1; flex-wrap: wrap; gap: 6px; }
  .title-screen > .row.center .btn { padding: 6px 12px; font-size: 0.9rem; }
  /* hub: smaller roster thumbs so the 3D keeps its room */
  .hub-roster { padding: 6px 8px 0; }
  .roster-pick { flex-basis: 40px; }
  .stage-cap { padding: 6px 12px; font-size: 0.9rem; }
  .stage-nav { width: 38px; height: 38px; margin-top: -19px; font-size: 1.6rem; }
  /* setup screens (PvC, PvP, FFA): creatures in one sliding row instead of a tall grid */
  .slots, .slots.n4 { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot { gap: 4px; min-width: 0; }
  .pick-grid { min-width: 0; display: flex; overflow-x: auto; overflow-y: hidden; max-height: none; flex-shrink: 0; padding-bottom: 4px; }
  .pick-grid .pick { flex: 0 0 88px; }
  .cpu-face { font-size: 2.6rem; padding: 0; }
  .arena-chip { width: 96px; height: 60px; }
  /* Adventure: rival (3D + info) and your fighter side by side, FIGHT along the bottom */
  .fit .ladder-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "v head" "v strip" "info strip" "fight fight"; gap: 6px 10px; }
  .fit .ladder-side .rival3d { grid-area: v; min-height: 110px; }
  .ladder-side .rival-info { grid-area: info; font-size: 0.82rem; min-width: 0; }
  .ladder-side .rival-info h3 { font-size: 1rem; }
  .ladder-side .mine-head { grid-area: head; margin: 0; }
  .ladder-side .strip.mine { grid-area: strip; align-self: start; min-width: 0; }
  .ladder-side .fight-bar { grid-area: fight; margin: 0; padding-top: 4px; }
  .rival-info p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pick.sm { flex-basis: 76px; }
  /* wallet: two columns again (one long column was ≈3000 px tall) */
  .wallet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .w-col { display: flex; gap: 10px; }
  .w-bundle { padding: 8px 6px; }
  .w-bic { font-size: 1.6rem; }
}

/* touch screens: tap targets at least 40 px (kids' fingers) */
@media (pointer: coarse) {
  .btn.small, .filters button, .seg button { min-height: 40px; }
  .switch { width: 60px; height: 36px; }
  .switch i { width: 28px; height: 28px; }
  .switch.on i { transform: translateX(24px); }
  .set-row input[type=range] { height: 36px; }
}

/* phones (portrait) and narrow windows */
@media (orientation: portrait) and (max-width: 900px), (max-width: 639px) {
  /* titles get two lines instead of "Player vs C…"; sound lives in ⚙️ Settings */
  .topbar h1:not(.logo) { font-size: clamp(0.95rem, 4.6vw, 1.5rem); line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .topbar .mute { display: none; }
  .hub .topbar h1.logo.small { font-size: clamp(1.05rem, 5.4vw, 1.6rem); min-width: max-content; padding: 0 3px; } /* gradient text clips at its box */
  .hub .top-right { gap: 2px; }
  .hub .topbar { gap: 4px; }
  /* hub: a shorter stage and a two-column menu, so START and every button fit */
  .hub-stage { min-height: 0; }
  .stage3d { min-height: 0; height: clamp(200px, 34dvh, 420px); flex: none; }
  .hub-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hub-menu > :not(.big-btn), .hub-menu .big-btn.start { grid-column: 1 / -1; }
  .hub-menu .big-btn:not(.start) { padding: 12px 12px; font-size: 1rem; gap: 8px; border-radius: 16px; min-height: 64px; line-height: 1.15; }
  .hub-menu .big-btn:not(.start) span { font-size: 1.35rem; width: 26px; }
  .hub-menu .big-btn:not(.start) small { padding: 1px 7px; font-size: 0.78rem; }
  .big-btn:hover { transform: none; }
  /* the 3D stays on screen while you browse below it */
  .sh-left, .showcase, .market-side { display: contents; }
  .shop2, .collection, .market { gap: 12px; }
  .sh-left > .strip { order: 1; }
  .sh-left > .shop3d, .showcase > .show3d, .market-side > .mk3d {
    order: 2; position: sticky; top: 0; z-index: 5; aspect-ratio: auto; height: clamp(170px, 32dvh, 380px);
    box-shadow: 0 10px 22px rgba(5, 6, 20, 0.6), 0 0 0 1px var(--line); }
  .sh-left > .sh-sel { order: 3; }
  .sh-right { order: 4; }
  .shop2 > .sh-left > *:not(.shop3d), .collection .show-info { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
  .collection .show-info { order: 3; }
  .collection .grid-wrap { order: 1; padding: 10px; }
  .collection .cgrid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 96px; overflow-x: auto; padding-bottom: 4px; }
  .collection .grid-wrap .btn { align-self: start; }
  .market-side > .mk3d { order: 1; }
  .market:not(.has-preview) .market-side > .mk3d { display: none; }
  .market-list { order: 2; }
  .market-side > .adopt { order: 3; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
  /* FIGHT stays at the bottom of the screen */
  .fight-bar .btn.huge { width: 100%; }
  .ladder .rival3d { aspect-ratio: auto; height: clamp(170px, 30dvh, 360px); }
}
@media (min-width: 1600px) { .screen.fit { max-width: 1520px; } }
/* the joystick's resting spot stays fully on screen on narrow phones */
.tp-stick { left: max(22%, 66px); }
.tp-zone.right .tp-stick { left: min(78%, calc(100% - 66px)); }
/* results: the buttons stay on screen; short landscape puts the winner beside the rewards */
.result-card { overflow: clip; } /* clip (not hidden) so the sticky button row follows the page */
.result-actions { position: sticky; bottom: 0; z-index: 3; margin: 0 -18px -18px; padding: 12px 18px max(14px, env(safe-area-inset-bottom)); flex-wrap: wrap; background: linear-gradient(180deg, rgba(32, 37, 90, 0), var(--panel) 30%); }
@media (orientation: landscape) and (max-height: 620px) {
  .results { max-width: 920px; }
  .result-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 18px; align-content: start; text-align: left; }
  .result-card > :not(.confetti) { grid-column: 2; }
  .result-card > .winner-3d { grid-column: 1; grid-row: 1 / span 8; height: auto; min-height: 220px; margin: 0; }
  .result-card > h1 { text-align: left; }
  .result-card .rewards { margin: 8px 0; }
  .result-actions { justify-content: flex-start; margin: 0 -18px -18px 0; padding-left: 0; }
}
/* pop-ups taller than the screen (help on a phone held sideways): the overlay scrolls and
   the dialog starts at the top instead of being cut off at both ends */
.modal-bg, .cele-bg { overflow-y: auto; overscroll-behavior: contain; place-items: start stretch; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.modal-bg > *, .cele-bg > * { margin: auto; }
.prog-sheet { max-height: none; }
/* very narrow phones: the hub's Wallet button shows gems, so the top bar keeps just coins */
@media (max-width: 360px) { .hub .wallet-chip .gem { display: none; } .topbar .btn.icon { padding: 6px 5px; } }

/* ---------- 3D sculpt studio (js/sculpt.js; docs/SCULPT.md) ---------- */
.create-modes { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
@media (max-width: 560px) { .create-modes { grid-template-columns: 1fr; } }
.sculpt { height: 100%; max-width: 1640px; margin: 0 auto; display: grid; gap: 8px; position: relative;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "top top top" "rail opts opts" "rail stage look"; }
.sculpt .st-top { grid-area: top; }
.sc-tools { grid-area: rail; display: grid; grid-template-columns: 72px; gap: 4px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 6px; overflow-y: auto; }
.sc-tools .st-sizes i, .sc-sizes i { display: block; width: var(--d); height: var(--d); border-radius: 50%; background: var(--text); }
.sc-opts { grid-area: opts; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; }
.sc-opts [hidden] { display: none !important; }
.sc-colors .sw { width: 30px; height: 30px; }
.sc-eyes { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-stage { grid-area: stage; position: relative; min-height: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 35%, #3b3470, #1d1a3a 75%); }
.sc-view { position: absolute; inset: 0; touch-action: none; }
.sc-view canvas { width: 100% !important; height: 100% !important; touch-action: none; }
.sc-empty { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(88%, 420px); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); color: #6a7099; font-size: 0.9rem; z-index: 2; pointer-events: none; }
.sc-empty[hidden] { display: none; }
.sc-empty b { font-size: clamp(1.05rem, 3.4vw, 1.35rem); color: #5b6196; }
.sc-empty .st-tpls { justify-content: center; pointer-events: auto; }
.sc-empty .chip-btn { background: #eef0ff; color: #3a3f78; min-height: 38px; }
.sc-views { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.sc-views .st-ib { width: 40px; height: 40px; font-size: 1.1rem; background: rgba(27, 27, 47, 0.78); }
.sc-mirror { left: 10px; }
.sc-mirror.on { box-shadow: 0 0 0 2px #a48bff, 0 4px 12px rgba(0, 0, 0, 0.25); }
.sc-lookbtn { right: 10px; }
.sculpt.looking .sc-lookbtn { box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0, 0, 0, 0.25); }
.sc-clear { left: 50%; transform: translateX(-50%); }
.sc-tip { bottom: 62px; }
.sc-look { grid-area: look; width: clamp(240px, 26vw, 360px); display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px; overflow-y: auto; }
.sc-look[hidden] { display: none; }
.sc-look .st-lookhead { display: flex; }
/* portrait / phones: options and tool dock under the 3D, the Look panel slides over it */
@media (max-aspect-ratio: 1/1), (max-width: 720px) {
  .sculpt { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "top" "stage" "opts" "rail"; gap: 6px; }
  .sc-tools { grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 4px; overflow: visible; }
  .sc-tools .st-tool { min-height: 50px; }
  .sc-opts { justify-content: center; min-height: 44px; gap: 6px; }
  .sc-colors .sw { width: 26px; height: 26px; }
  .sc-look { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: 55%; z-index: 20; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4); }
  .sc-stage .st-float .lb { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .sculpt { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "rail top look" "rail opts look" "rail stage look"; gap: 4px; }
  .sc-tools { grid-template-columns: 56px; }
  .sc-tools .st-tool { min-height: 40px; }
  .sc-tools .st-tool .lb { display: none; }
  .sc-opts { min-height: 0; gap: 6px; }
  .sc-opts .st-seg button { min-width: 32px; min-height: 32px; }
  .sc-colors .sw { width: 24px; height: 24px; }
  .sc-stage .lb { display: none; }
}

/* ---------- messages out of the way, with ✕ (toasts, studio tips) ---------- */
#toast { top: calc(10px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -24px) scale(0.95); display: flex; align-items: center; gap: 10px;
  padding: 5px 5px 5px 16px; max-width: min(92vw, 520px); font-size: 0.92rem; cursor: pointer; }
#toast.show { pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.toast-x, .tip-x { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.14); color: inherit; font-size: 0.85rem; line-height: 1; }
.st-tip, .sc-tip { left: auto; right: 8px; top: 8px; bottom: auto; transform: translateY(-6px); max-width: min(62%, 380px); text-align: left;
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; font-size: 0.82rem; }
.st-tip.show, .sc-tip.show { transform: none; pointer-events: auto; }
.st-tip .tip-x, .sc-tip .tip-x { background: rgba(40, 40, 90, 0.1); width: 30px; height: 30px; }

/* ---------- turning in 3D, made obvious (js/spinpad.js): turn ball, zoom bar, ⟲, ✥ Move ---------- */
.spinpad { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 4; width: 128px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 8px; border-radius: 22px; background: rgba(15, 15, 40, 0.4); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(4px);
  touch-action: none; user-select: none; -webkit-user-select: none; }
.sp-ball { width: 100px; height: 100px; border-radius: 50%; cursor: grab; touch-action: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.12s; outline: none; }
.sp-ball svg { width: 100%; height: 100%; display: block; }
.sp-ball:hover, .sp-ball:focus-visible { transform: scale(1.04); }
.sp-ball.on { cursor: grabbing; transform: scale(0.96); filter: drop-shadow(0 0 10px rgba(255, 209, 102, 0.7)); }
.sp-zoom { display: flex; align-items: center; gap: 4px; width: 100%; color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.sp-zoom input { flex: 1; min-width: 0; height: 30px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sp-row { display: flex; gap: 6px; width: 100%; justify-content: center; }
.spinpad button { min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: #3a3f78; font-size: 1.05rem; font-weight: 700;
  line-height: 1; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); display: inline-flex; align-items: center; justify-content: center; gap: 3px; transition: transform 0.1s, background 0.1s; }
.spinpad .sp-move .lb { font-size: 0.8rem; }
.spinpad .sp-move.on { background: var(--accent); color: #3a2a00; box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.45), 0 3px 8px rgba(0, 0, 0, 0.3); }
.spinpad button:active { transform: scale(0.92); }
.sculpt.moving .sc-stage { box-shadow: inset 0 0 0 3px var(--accent); }
.spinpad.small { width: 104px; } .spinpad.small .sp-ball { width: 78px; height: 78px; } .spinpad.small button { min-width: 34px; height: 34px; }
.sc-coach { position: absolute; right: 150px; top: 50%; z-index: 4; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  background: #fff3cf; color: #3a2a00; font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(0, 0, 0, 0.3);
  animation: coach-nudge 0.9s ease-in-out infinite; }
.sc-coach[hidden] { display: none; }
@keyframes coach-nudge { 50% { transform: translate(8px, -50%); } }
.spin-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; pointer-events: none; white-space: nowrap;
  background: rgba(255, 255, 255, 0.92); color: #3a3f78; font-weight: 700; font-size: 0.8rem; padding: 4px 12px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); }
.spin-hint span { display: inline-block; animation: hint-drag 1.4s ease-in-out infinite; }
@keyframes hint-drag { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.studio.tall.pip .spin-hint { font-size: 0.62rem; padding: 2px 8px; bottom: 8px; }

/* ---------- sculpt on a landscape phone: the stage gets the full height ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .sculpt { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "rail opts top look" "rail opts stage look"; }
  .sculpt .st-name { visibility: hidden; } /* asked for when saving */
  .sc-opts { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; width: 78px; min-height: 0;
    overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 6px 4px; }
  .sc-opts .sc-sizes { display: grid; grid-template-columns: repeat(2, 34px); }
  .sc-opts .sc-sizes button { min-width: 34px; min-height: 34px; }
  .sc-opts .sc-colors { display: grid; grid-template-columns: repeat(2, 30px); gap: 5px; justify-content: center; }
  .sc-opts .sc-eyes { flex-direction: column; }
  .spinpad { width: 112px; gap: 5px; padding: 7px 6px; } .spinpad .sp-ball { width: 78px; height: 78px; } .spinpad button { min-width: 36px; height: 36px; }
  .spinpad .sp-move .lb { display: none; }
  .sc-coach { right: 132px; }
}
/* narrow / portrait stage: the turn pad goes to the bottom-right corner, off the creature */
@media (max-aspect-ratio: 1/1), (max-width: 720px) {
  .sc-stage .spinpad { top: auto; bottom: 58px; right: 6px; transform: none; width: 108px; gap: 5px; padding: 7px 6px; }
  .sc-stage .spinpad .sp-ball { width: 76px; height: 76px; }
  .sc-stage .spinpad button { min-width: 36px; height: 36px; }
  .sc-stage .spinpad .sp-move .lb { display: none; }
  .sc-coach { top: auto; bottom: 120px; right: 122px; transform: none; animation-name: coach-nudge-x; }
  @keyframes coach-nudge-x { 50% { transform: translateX(8px); } }
}
.preview3d:not(.has-model) .spin-hint { display: none; } /* nothing to spin yet */

/* ================= unified UI language (docs/UI.md) ================= */
/* Back: the top-left corner of every screen, the same pill everywhere */
.back-btn, .studio [data-act=cancel], .sculpt [data-act=cancel] {
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--text); font-size: 1.15rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; justify-self: start; }
.back-btn .lbl { font-size: 0.95rem; }
.studio [data-act=cancel], .sculpt [data-act=cancel] { width: 44px; padding: 0; }
/* landscape phones: the studios' Back joins the other screens in the top-left corner */
@media (max-height: 560px) and (orientation: landscape) {
  .studio.short [data-act=cancel], .sculpt [data-act=cancel] { position: fixed; z-index: 30; top: max(6px, env(safe-area-inset-top)); left: max(6px, env(safe-area-inset-left)); }
  .studio.short .st-tools, .sculpt .sc-tools { margin-top: 50px; }
}
/* Close: the top-right corner of every pop-up */
.modal, .pause .panel { position: relative; }
.modal > h2, .pause .panel > h2 { padding-right: 44px; }
.x-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.08); color: var(--text); font-size: 1rem; line-height: 1;
  display: grid; place-items: center; }
.x-close:hover { background: rgba(255, 255, 255, 0.16); }
/* results: the card stays narrow, the top bar (Back) spans the screen like everywhere else */
.screen.results { max-width: 1240px; padding-top: max(16px, env(safe-area-inset-top)); }
.screen.results > .result-card { max-width: 640px; margin: 0 auto; }
@media (orientation: landscape) and (max-height: 620px) { .screen.results > .result-card { max-width: 920px; } .screen.results > .topbar { margin-bottom: 8px; } }
/* pause menu: above the touch controls, scrolls on short screens, its buttons always in view */
.pause { z-index: 8; padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)); }
.pause .panel { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.pause .panel > .row:last-child { position: sticky; bottom: -18px; margin: 8px -18px -18px; padding: 10px 18px 14px; background: linear-gradient(180deg, transparent, var(--panel) 30%); }
@media (max-height: 560px) and (orientation: landscape) {
  .sculpt .sc-tools { align-self: stretch; min-height: 0; overflow-y: auto; gap: 2px; }
  .sculpt .sc-tools .st-tool { min-height: 38px; }
}

/* ---------- share links (docs/SHARING.md) ---------- */
.share-note { margin: 2px 0 8px; color: var(--text); font-size: 0.92rem; }
.share-note [data-tally] { color: var(--muted); }
.share-tally { margin: 2px 0 10px; color: var(--muted); }
.share-tally b { color: var(--text); }
.share-url { width: 100%; margin: 6px 0; font-size: 0.9rem; }

/* owner: the Share button on My Creatures stands out from the plain buttons */
.btn.share-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 12px; padding: 10px 16px; text-align: left; color: #fff; border: 0; border-radius: 16px; background: linear-gradient(115deg, #ff5d73, #b388ff 55%, #4cc9f0); box-shadow: 0 6px 20px rgba(255, 93, 115, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.share-btn:hover { filter: brightness(1.07); }
.share-btn .sb-ic { font-size: 1.7rem; line-height: 1; }
.share-btn b { display: block; font-size: 1.12rem; font-weight: 600; }
.share-btn small { display: block; font-size: 0.82rem; opacity: 0.92; }
/* a light sweep now and then (transform only, so it never repaints) */
.share-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: translateX(-130%) skewX(-20deg); animation: shareShine 5s ease-in-out 1s infinite; }
@keyframes shareShine { 0%, 70% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
html.calm .share-btn::after { display: none; }
@media (prefers-reduced-motion: reduce) { .share-btn::after { display: none; } }

/* visitor: the 3D drawrior fills the page; info is a pop-up, the dock holds the fighter + 2 buttons */
.screen.share-screen { max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.share-screen > .topbar { flex: none; }
.share-screen > .panel.empty { margin: auto; max-width: 560px; text-align: center; }
.share-stage { position: relative; flex: 1; min-height: 0; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 58%, #34407e, #1a1e48 72%); }
.share-stage .show3d { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: none; touch-action: none; }
.share-head { position: absolute; z-index: 2; top: 12px; left: 16px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.share-head > * { pointer-events: auto; }
.share-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 1.4rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); min-width: 0; }
.share-title small { flex-basis: 100%; font-size: 0.85rem; color: var(--muted); }
.btn.share-info { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 1.35rem; background: rgba(52, 59, 133, 0.85); }
.share-hint { position: absolute; z-index: 2; left: 50%; top: 22%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(10, 12, 30, 0.6); font-size: 0.85rem; white-space: nowrap; pointer-events: none; transition: opacity 0.6s; }
.share-stage:not(.ready) .share-hint, .share-stage.touched .share-hint { opacity: 0; }
.share-loading { position: absolute; z-index: 1; left: 50%; top: 42%; transform: translateX(-50%); font-size: 1.1rem; color: var(--muted); pointer-events: none; transition: opacity 0.4s; }
.share-stage.ready .share-loading { opacity: 0; }
.share-dock { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; padding: 30px 14px 14px; background: linear-gradient(180deg, rgba(18, 21, 46, 0), rgba(18, 21, 46, 0.85) 55%); pointer-events: none; }
.share-dock > * { pointer-events: auto; }
.fighter-mini { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: min(100%, 340px); }
.fighter-mini .lbl { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.fm { flex: none; width: 46px; height: 46px; padding: 3px; border-radius: 12px; background: #181c45; border: 2px solid transparent; }
.fm.on { border-color: var(--accent); background: #262b63; }
.fm img { width: 100%; height: 100%; object-fit: contain; }
.share-cta { display: flex; gap: 10px; margin-left: auto; }
.share-cta .btn { white-space: nowrap; }
.share-cta .btn.primary { font-size: 1.15rem; padding: 12px 26px; }
@media (max-width: 560px) {
  .share-dock { flex-direction: column; align-items: stretch; }
  .share-cta { margin-left: 0; }
  .share-cta .btn { flex: 1; }
}
@media (max-height: 520px) and (orientation: landscape) {
  /* short landscape phones: Fight / Draw stack on the right, so the drawrior keeps the middle */
  .share-cta { flex-direction: column; align-items: stretch; }
  .share-cta .btn.primary { padding: 10px 22px; }
  .share-dock { background: none; padding-top: 0; }
  .fighter-mini .lbl { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
}

/* a mode that isn't ready yet (the 3D sculpt studio): shown, not usable */
.mode-card.soon { position: relative; cursor: not-allowed; }
.mode-card.soon > :not(.soon-tag) { opacity: 0.5; filter: grayscale(0.6); }
.mode-card.soon:hover { transform: none; border-color: var(--line); }
.soon-tag { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px; background: #ffd166; color: #2a1a00; font-size: 0.78rem; font-weight: 600; }

/* ---------- studio board buttons (docs/DRAWING.md): body colour (top right), skin (bottom right) ---------- */
.st-float.st-bodybtn { top: 10px; bottom: auto; right: 10px; }
.st-bodydot { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, 0.25); }
.st-float.st-skinbtn { right: 10px; padding-left: 4px; }
.st-skinbtn img { width: 36px; height: 36px; object-fit: contain; }
.st-bodypick, .st-skinpick { position: absolute; right: 10px; z-index: 5; width: min(360px, calc(100% - 20px)); max-height: calc(100% - 80px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); animation: st-pop 0.18s ease-out both; }
.st-bodypick { top: 60px; }
.st-skinpick { bottom: 60px; }
.st-bodypick[hidden], .st-skinpick[hidden] { display: none; }
.st-bodypick .mini, .st-skinpick .mini { padding-right: 44px; min-height: 22px; }
.st-bodygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.st-bodyopt { aspect-ratio: 1; padding: 4px; border-radius: 12px; border: 2px solid transparent; background: #f4f5ff; }
.canvas-wrap .st-bodyopt canvas { position: static; width: 100%; height: 100%; display: block; }
.st-bodyopt.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--c); }
.st-anycol { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; }
.st-anycol input { width: 44px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.st-skingrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.st-skin { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 4px 6px; border-radius: 12px; border: 2px solid transparent; background: radial-gradient(circle at 50% 45%, #3a4590, #22285c 75%); font-size: 0.82rem; }
.st-skin img { width: 100%; max-width: 96px; aspect-ratio: 1; object-fit: contain; }
.st-skin.on { border-color: var(--accent); }
.st-skinpick .muted { margin: 0; }
.st-symseg { display: flex; gap: 6px; flex-wrap: wrap; }
.st-symseg button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 2px solid transparent; background: #343b85; color: #fff; font-size: 1.05rem; }
.st-symseg button .lb { font-size: 0.85rem; font-weight: 600; }
.st-symseg button.on { border-color: #a48bff; background: #4a3f9e; }
/* the draw tip sits left of the colour button */
.st-tip { right: 70px; }

.st-skinemo { display: grid; place-items: center; width: 100%; max-width: 96px; aspect-ratio: 1; font-size: 2.4rem; }

/* local builds: performance readout (js/perfhud.js) */
#perfhud { position: fixed; right: max(6px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); z-index: 9999; pointer-events: none;
  contain: layout paint style; white-space: pre; font: 10px/1.35 ui-monospace, Menlo, monospace; color: #b8ffcf;
  background: rgba(8, 10, 24, 0.72); border: 1px solid rgba(120, 255, 170, 0.25); border-radius: 6px; padding: 4px 6px; }

/* skin close-ups (assets/skins) in the Shop: cards, the item dock and the base-skin chips */
.c-ic .skin-ic, .d-ic .skin-ic { width: 1.6em; height: 1.6em; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.skin-chip { display: inline-flex; align-items: center; gap: 6px; }
.skin-chip .skin-ic { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }