@font-face { font-family: 'Fredoka'; src: url('../assets/fonts/fredoka-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('../assets/fonts/fredoka-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('../assets/fonts/fredoka-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url('../assets/fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --font: 'Fredoka', 'Nunito', 'Segoe UI', Roboto, system-ui, sans-serif;
  --pixel: 'Press Start 2P', ui-monospace, monospace;
  --ink: #120c07; --ink2: #3a2a1a;
  --gold: #c99a43; --gold-hi: #e7c27a; --gold-dk: #6b4f24;
  --cream: #fff4d6; --parch: #f6ead0;
  --wood: #3b2d1f; --wood2: #281d13; --wood3: #4b3a28;
  --math: #4aa8ff; --science: #5ee36b; --reading: #ffb13a; --art: #ff6fb5; --mixed: #b98bff;
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  /* The UI theme (js/ui/theme.js sets these for the place on screen; these are the Stone Keep's). */
  --th-panel-hi: #3b2d1f; --th-panel-lo: #281d13; --th-frame: #c99a43; --th-frame-hi: #e7c27a; --th-frame-dk: #6b4f24; --th-rim: #4a3622;
  --th-card: rgba(16, 11, 7, .86); --th-ring: #6b5233; --th-tile: #2a1f14; --th-line: #3a2a1a; --th-well: #120c07;
  --th-btn-hi: #5b4732; --th-btn-lo: #45341f; --th-btn-sh: #2e2217; --th-btn-lt: #7d6444;
  --th-title: #ffd25a; --th-sub: #c8b48a; --th-text: #fff4d6; --th-soft: #ffe9b0; --th-glow: rgba(255, 160, 50, .55); --th-glow-soft: rgba(255, 160, 50, .2);
  --th-paper: #f6ead0; --th-pz-line: #c9ab78; --th-pz-soft: #d9bf8c; --th-pz-shade: rgba(120, 80, 30, .18); --th-card-lo: #f1e2c2; --th-card-sh: #d6bf92;
  --th-opt-hi: #5a87d6; --th-opt-lo: #3c66b8; --th-opt-sh: #2a4a8a; --th-opt-lt: #8fb2ee;
  --th-accent: #c8662e; --th-danger-hi: #d4503e; --th-danger-lo: #a8301f; --th-danger-sh: #6e140f; --th-danger-lt: #f07a6a;
  --th-c1: none; --th-c2: none; --th-c3: none; --th-c4: none; --th-tex: none; --th-paper-tex: none; --th-cs: 30px;
  --th-d-top: none; --th-d-top-w: 32px; --th-d-bottom-l: none; --th-d-bottom-r: none; --th-d-side-l: none; --th-d-side-r: none; --th-d-drape-l: none; --th-d-drape-r: none; --th-pad: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050302; }
body { font-family: var(--font); font-weight: 500; color: var(--th-text); user-select: none; -webkit-user-select: none; overscroll-behavior: none; touch-action: none; }
button { font-family: inherit; }
button:focus-visible { outline: 4px solid #ffd25a; outline-offset: 2px; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 80% 75% at 50% 52%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
#worldui { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
#touch { position: absolute; inset: 0; z-index: 4; }
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#hud > * { pointer-events: auto; }
#screens { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#screens > .screen { pointer-events: none; }
#screens > .screen > * { pointer-events: auto; }
#screens > .screen.block { pointer-events: auto; }
#toasts { position: absolute; left: 50%; top: calc(76px + var(--safe-t)); z-index: 30; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(560px, 92vw); }
#banner { position: absolute; inset: 0; z-index: 32; pointer-events: none; display: flex; align-items: center; justify-content: center; }
#fade { position: absolute; inset: 0; z-index: 90; background: #000; pointer-events: none; opacity: 1; transition: opacity .5s; }
#fade.out { opacity: 0; }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 20px; border: none; border-radius: 12px; cursor: pointer;
  font-weight: 700; font-size: 19px; color: var(--th-text); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); white-space: nowrap;
  background: linear-gradient(var(--th-btn-hi), var(--th-btn-lo)); box-shadow: inset 0 -6px 0 var(--th-btn-sh), inset 0 3px 0 var(--th-btn-lt), 0 0 0 4px var(--ink), 0 6px 0 4px rgba(0, 0, 0, .3);
  transition: transform .1s, filter .15s;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--th-btn-sh), 0 0 0 4px var(--ink); }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: default; transform: none; }
.btn.small { min-height: 40px; padding: 6px 14px; font-size: 16px; border-radius: 10px; }
.btn.big { min-height: 64px; padding: 14px 30px; font-size: 26px; border-radius: 16px; }
.btn.huge { min-height: 84px; padding: 16px 44px; font-size: 34px; border-radius: 20px; }
.btn.green { background: linear-gradient(#5ec466, #3f9e48); box-shadow: inset 0 -6px 0 #24642b, inset 0 3px 0 #8fe596, 0 0 0 4px var(--ink), 0 6px 0 4px rgba(0, 0, 0, .3); }
.btn.red { background: linear-gradient(var(--th-danger-hi), var(--th-danger-lo)); box-shadow: inset 0 -6px 0 var(--th-danger-sh), inset 0 3px 0 var(--th-danger-lt), 0 0 0 4px var(--ink), 0 6px 0 4px rgba(0, 0, 0, .3); }
/* Attention UI stays bright in every theme: the main green and gold actions, puzzle answers, the slash
   button, coach tips, alerts, the boss bar. Inside a themed panel the main action also glows a little. */
.panel .btn.green:not(:active), .pz-gotit .btn.green:not(:active) { box-shadow: inset 0 -6px 0 #24642b, inset 0 3px 0 #8fe596, 0 0 0 4px var(--ink), 0 6px 0 4px rgba(0, 0, 0, .3), 0 0 26px 4px rgba(120, 235, 130, .32); }
.btn.gold { color: #3a2208; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); background: linear-gradient(#ffd96a, #e0a52a); box-shadow: inset 0 -6px 0 #a8701a, inset 0 3px 0 #fff0a8, 0 0 0 4px var(--ink), 0 6px 0 4px rgba(0, 0, 0, .3); }
.btn.blue { background: linear-gradient(#5a9aff, #2f6fd0); box-shadow: inset 0 -6px 0 #1f4a8a, inset 0 3px 0 #9ac4ff, 0 0 0 4px var(--ink), 0 6px 0 4px rgba(0, 0, 0, .3); }
.btn.purple { background: linear-gradient(#a070e0, #7a4bc6); box-shadow: inset 0 -6px 0 #4a2a80, inset 0 3px 0 #c8a8ff, 0 0 0 4px var(--ink), 0 6px 0 4px rgba(0, 0, 0, .3); }
.btn .badge { position: absolute; top: -10px; right: -10px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; font-size: 15px; line-height: 26px; color: #fff; background: #e0483a; box-shadow: 0 0 0 3px var(--ink); animation: bob 1.2s ease-in-out infinite; }
.big-buttons .btn { min-height: 58px; font-size: 22px; }
.big-buttons .opt { min-height: 130px; }

/* Panels: the frame, fill, texture and corner ornaments all come from the theme. */
.panel {
  position: relative; color: var(--th-text);
  background: var(--th-tex), linear-gradient(var(--th-panel-hi), var(--th-panel-lo));
  box-shadow: inset 0 0 0 4px var(--th-frame), inset 0 0 0 7px var(--th-frame-dk), inset 0 0 40px rgba(0, 0, 0, .35), 0 0 0 4px var(--ink), 0 0 0 8px var(--th-rim), 0 0 0 11px var(--ink),
    0 26px 60px rgba(0, 0, 0, .75), 0 0 80px 6px var(--th-glow-soft);
}
.panel::before, .pz-panel::before { content: ''; position: absolute; inset: -9px; pointer-events: none;
  background: var(--th-c1) left top / var(--th-cs) no-repeat, var(--th-c2) right top / var(--th-cs) no-repeat, var(--th-c3) right bottom / var(--th-cs) no-repeat, var(--th-c4) left bottom / var(--th-cs) no-repeat;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.panel::after, .pz-panel::after { content: ''; position: absolute; inset: -21px -15px; padding: 0 36px; pointer-events: none;
  background: var(--th-d-drape-l) left top / 160px 64px no-repeat border-box, var(--th-d-drape-r) right top / 160px 64px no-repeat border-box, var(--th-d-top) left top / var(--th-d-top-w) 32px round no-repeat content-box, var(--th-d-bottom-l) left bottom / 160px 48px no-repeat border-box, var(--th-d-bottom-r) right bottom / 160px 48px no-repeat border-box,
    var(--th-d-side-l) left 0 top 50px / 30px 64px no-repeat border-box, var(--th-d-side-r) right 0 top 50px / 30px 64px no-repeat border-box; }
/* Panels that scroll keep their decorations: the content scrolls inside. */
.panel > .pn-in { min-height: 0; overflow: auto; margin: -4px; padding: 4px; }
.gem-ico { display: inline-block; width: .95em; height: .95em; vertical-align: -0.1em; background: linear-gradient(135deg, #b9f6ff 0 30%, #4fd2ff 30% 60%, #1e8fd6 60%); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); filter: drop-shadow(0 0 4px rgba(120, 220, 255, .8)); }

/* ---------- HUD ---------- */
.hud-tl { position: absolute; left: calc(12px + var(--safe-l)); top: calc(10px + var(--safe-t)); display: flex; flex-direction: column; gap: 8px; }
.hud-card { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 14px; background: var(--th-card); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); }
.hud-ava { position: relative; width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: var(--hc, #4b3a28); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3), 0 0 0 3px var(--ink); }
.hud-name { font-weight: 700; font-size: 16px; line-height: 1.1; text-shadow: 2px 2px 0 #000; }
/* Your level: the badge on your hero, and the bar every gem fills (game/level.js) */
.hud-card .who { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.lvl-b { position: absolute; right: -9px; bottom: -9px; z-index: 1; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 11px; color: #3a2400; background: linear-gradient(#fff3b0, #ffc93a 60%, #e09a1a); box-shadow: 0 0 0 2px var(--ink), 0 0 10px rgba(255, 200, 60, .6); }
.lvbar { position: relative; height: 16px; border-radius: 8px; background: var(--th-well, #120c07); box-shadow: 0 0 0 2px var(--ink); overflow: hidden; }
.lvbar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(#fff0a0, #ffc93a 55%, #e0962a); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); transition: width .35s ease-out; }
.lvbar > span { position: relative; display: block; padding: 0 8px; font-size: 12px; font-weight: 700; line-height: 16px; color: #fff; text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; white-space: nowrap; }
.lvbar.big { height: 28px; border-radius: 14px; } .lvbar.big > i { border-radius: 14px; } .lvbar.big > span { font-size: 16px; line-height: 28px; padding: 0 14px; }
.hud-card.lvup { animation: lvUp .9s cubic-bezier(.2, 1.6, .4, 1); }
.hud-card.lvup .lvbar { animation: lvBar .9s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes lvBar { 0% { transform: scale(1); } 30% { transform: scale(1.12); box-shadow: 0 0 0 2px var(--ink), 0 0 16px 5px rgba(255, 210, 90, .9); } 100% { transform: scale(1); } }
.lvbar .lr-num { --h: 16px; } .lvbar.big .lr-num { --h: 28px; }
@keyframes lvUp { 0% { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 0 rgba(255, 210, 90, 0); } 35% { box-shadow: 0 0 0 3px #fff3b0, 0 0 0 6px var(--ink), 0 0 34px 10px rgba(255, 210, 90, .8); } 100% { box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink), 0 0 0 rgba(255, 210, 90, 0); } }
@keyframes lvBadge { 0% { transform: scale(1); } 30% { transform: scale(1.9) rotate(-8deg); } 100% { transform: scale(1); } }
/* the level badge in name tags, portrait cards and menus */
.lv { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; padding: 0 .35em; border-radius: 999px; font-family: var(--pixel); font-size: 10px; line-height: 1.7em; color: #3a2400; text-shadow: none; background: linear-gradient(#fff3b0, #ffc93a 60%, #e09a1a); box-shadow: 0 0 0 2px #000; }
.lv.pop { animation: lvBadge .8s cubic-bezier(.2, 1.8, .4, 1); }
/* a level-up (game/levelfx.js): the number rolls from the old level to the new one, on the HUD
   badge, on the name tag and on a big badge over the head that pops up, shines and floats away */
.lr-num { --h: 1.15em; display: inline-block; vertical-align: top; height: var(--h); overflow: hidden; }
.lr-num i { display: block; height: var(--h); line-height: var(--h); font-style: normal; text-align: center; }
.lr-track { display: block; animation: lrRoll var(--rt, .5s) cubic-bezier(.3, 1.35, .5, 1) .5s both; }
@keyframes lrRoll { to { transform: translateY(calc(var(--n) * -1 * var(--h))); } }
.lv .lr-num { --h: 1.7em; }
.lvl-b .lr-num { --h: 24px; }
.tag.lvroll-tag { z-index: 2; }
.lv-roll { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; animation: lvRollIn 3s ease-out both; }
.lvroll-tag.friend .lv-roll { margin-bottom: 24px; transform-origin: 50% 100%; scale: .8; }
.lv-roll .lr-say { padding: 3px 10px; border-radius: 10px; font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--th-text, #fff); text-shadow: none; white-space: nowrap; background: var(--th-card, #2a2018); box-shadow: 0 0 0 2px var(--c), 0 0 0 4px #000, 0 0 14px 2px var(--c); }
.lv-roll .lr-say .who { color: var(--c); }
.lv-roll .lr-up { font-family: var(--pixel); font-size: 12px; color: #fff3b0; text-shadow: 0 0 8px var(--c), -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000; white-space: nowrap; }
.lv-roll .lr-badge { margin-top: 5px; min-width: 1.5em; padding: 0 .3em; font-size: 28px; line-height: 1.25em; box-shadow: 0 0 0 3px #000, 0 0 18px 5px var(--c); }
.lv-roll .lr-badge .lr-num { --h: 1.25em; }
.lv-roll .lr-rays { position: absolute; left: 50%; top: 62%; width: 150px; height: 150px; margin: -75px 0 0 -75px; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 244, 190, .6) 0 9deg, transparent 9deg 30deg); -webkit-mask: radial-gradient(circle, #000 22%, transparent 68%); mask: radial-gradient(circle, #000 22%, transparent 68%); animation: lrRays 3s linear both; }
@keyframes lvRollIn { 0% { transform: translateY(14px) scale(.2); opacity: 0; } 9% { transform: scale(1.15); opacity: 1; } 15% { transform: scale(1); } 31% { transform: scale(1); } 37% { transform: scale(1.28); } 45% { transform: scale(1); } 78% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-36px); opacity: 0; } }
@keyframes lrRays { 0% { transform: rotate(0) scale(.3); opacity: 0; } 30% { opacity: .5; } 38% { transform: rotate(40deg) scale(1.15); opacity: 1; } 100% { transform: rotate(140deg) scale(.9); opacity: 0; } }
.reduce-motion .lv-roll .lr-rays { display: none; }
.tag.dot .nm .lv { display: none; }
.hud-gems { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 10px; border-radius: 999px; font-weight: 700; font-size: 26px; background: var(--th-card); box-shadow: 0 0 0 3px color-mix(in srgb, #3a7a9a 50%, var(--th-ring)), 0 0 0 6px var(--ink); align-self: flex-start; text-shadow: 2px 2px 0 #000; }
.hud-gems.bump { animation: bump .25s; }
.hud-gems .gem-ico { width: 26px; height: 26px; }
/* power-ups in play (for the whole team) */
.hud-powers { display: flex; gap: 6px; flex-wrap: wrap; max-width: 260px; }
/* your gold pet filling with gold (game/lessonjar.js) with the power-ups beside it */
.jar-row { display: flex; align-items: center; gap: 12px; }
.jar-row:not(:has(.lesson-jar:not([hidden]))):not(:has(.pup)) { display: none; }
.pup { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--th-card); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc, #ffd25a) 55%, var(--th-ring)), 0 0 0 4px var(--ink); }
.pup .i { font-size: 20px; }
.pup.new { animation: popIn .4s cubic-bezier(.2, 1.8, .4, 1); }
/* the floor bar: the subject areas, everyone's marker, and the boss with the Team Blast ring */
.hud-tc { position: absolute; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); width: min(50vw, 600px, calc(100vw - 440px)); padding-right: 30px; }
.floor-lb { position: absolute; left: calc(50% - 15px); top: 34px; transform: translateX(-50%); padding: 2px 8px; border-radius: 8px; font-family: var(--pixel); font-size: 8px; line-height: 12px; letter-spacing: .06em; white-space: nowrap; color: var(--th-title, #ffd25a); background: var(--th-card); box-shadow: 0 0 0 2px var(--th-ring), 0 0 0 4px var(--ink); pointer-events: none; }
.strip { position: relative; height: 22px; border-radius: 11px; background: var(--th-card); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); }
.strip .seg { position: absolute; top: 5px; bottom: 5px; border-radius: 6px; background: var(--c); opacity: .55; }
.strip .seg.done { opacity: 1; }
.strip .gate { position: absolute; top: 50%; width: 26px; height: 26px; margin-left: -13px; margin-top: -13px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--th-tile); box-shadow: 0 0 0 2px var(--c), 0 0 0 4px var(--ink); }
.strip .boss { position: absolute; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; z-index: 3; }
.strip .mark { position: absolute; top: -9px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); box-shadow: 0 0 0 3px var(--ink); transition: left .3s linear; }
.strip .mark.me { width: 26px; height: 26px; margin-left: -13px; top: -13px; z-index: 2; }
.strip .mark.shadow { opacity: .6; }
.hud-tr { position: absolute; right: calc(12px + var(--safe-r)); top: calc(10px + var(--safe-t)); display: flex; align-items: flex-start; gap: 10px; }
.hud-btn { width: 52px; height: 52px; border: none; border-radius: 14px; cursor: pointer; font-size: 24px; color: var(--th-text); background: linear-gradient(var(--th-btn-hi), var(--th-btn-lo)); box-shadow: inset 0 -5px 0 var(--th-btn-sh), inset 0 3px 0 var(--th-btn-lt), 0 0 0 3px var(--ink), 0 0 0 5px var(--th-frame-dk); }
.hud-btn:active { transform: translateY(2px); }
/* back from ghost mode */
/* ghost mode: the screen's edges glow ghost-blue, and a big "I'm back!" breathes in the middle;
   a tap anywhere else makes it jump (.nudge) */
.hint-keys { position: absolute; left: 50%; bottom: calc(clamp(48px, 15vh, 84px) * 1.6 + 30px + var(--safe-b)); transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--th-soft); background: var(--th-card); white-space: nowrap; pointer-events: none; transition: opacity .6s; }
.hint-keys kbd { display: inline-block; min-width: 22px; padding: 0 5px; border-radius: 5px; font-family: var(--font); font-weight: 700; color: #3a2a1a; background: #f0e2c4; box-shadow: 0 2px 0 #9a8a6a; }
.bossbar { position: absolute; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); width: min(46vw, 560px, calc(100vw - 500px)); text-align: center; }
.bossbar .nm { font-family: var(--pixel); font-size: 14px; color: #ff9384; text-shadow: 3px 3px 0 #000; margin-bottom: 6px; letter-spacing: .08em; }
.bossbar .bar { position: relative; height: 22px; border-radius: 6px; background: #2a0c0c; box-shadow: 0 0 0 3px #6b2a2a, 0 0 0 6px var(--ink); overflow: hidden; }
.bossbar .bar i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(#ff7a6a, #c8342a); transition: transform .4s ease-out; }
.bossbar .bar b { position: absolute; inset: 0; transform-origin: left; background: #fff3; transition: transform 1.2s ease-in .3s; }
.bossbar .bar .tick { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ink); }
.bossbar.shielded .bar i { background: linear-gradient(#9ae0ff, #4a9ad0); }

/* touch controls */
.pad { position: absolute; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: var(--th-pad) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); pointer-events: none; opacity: .5; }
/* (held or not, the pad stays see-through: the owner's wish) */
.pad i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--th-frame-hi), var(--th-frame) 70%, var(--th-frame-dk)); box-shadow: 0 0 0 4px var(--ink), 0 6px 0 2px rgba(0, 0, 0, .3); }
.slash-btn { position: absolute; right: calc(26px + var(--safe-r)); bottom: calc(26px + var(--safe-b)); width: 104px; height: 104px; border: none; border-radius: 50%; font-size: 46px; cursor: pointer; background: radial-gradient(circle at 35% 30%, #ff8a6a, #b5281f); box-shadow: inset 0 -8px 0 #6e140f, 0 0 0 5px var(--ink), 0 0 0 9px var(--th-frame), 0 0 0 12px var(--ink), 0 8px 0 10px rgba(0, 0, 0, .3), 0 0 26px 10px var(--th-glow-soft); z-index: 11; }
.slash-btn:active, .slash-btn.hit { transform: scale(.93); }
.left-handed .slash-btn { right: auto; left: calc(26px + var(--safe-l)); }

/* world UI */
.tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; will-change: transform; }
.tag .nm { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; color: #fff; text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000; }
.tag .nm b { padding: 1px 5px; border-radius: 5px; font-size: 11px; color: #111; background: var(--c); text-shadow: none; box-shadow: 0 0 0 2px #000; }
.tag.shadow .nm { color: #bfe6ff; opacity: .85; }
.tag.foe .nm { color: #ff9384; }
.tag.foe .nm:empty { display: none; } /* (baddies show no name: only a thin health line) */
.tag.echo .nm { color: #9ad8ff; }
.tag .hp { width: 34px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .45); overflow: hidden; opacity: .75; }
.tag .hp i { display: block; height: 100%; background: #ff7a6a; transform-origin: left; transition: transform .3s; }
.tag .alert { font-family: var(--pixel); font-size: 22px; color: #ffd23a; text-shadow: 0 0 12px rgba(255, 160, 0, .9), 3px 3px 0 #5a2a00; animation: bob .6s ease-in-out infinite; }
.tag .scroll { font-size: 22px; filter: drop-shadow(0 0 8px #ffd25a); animation: bob 1.2s ease-in-out infinite; }
.tag .think { display: flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #3a2a1a; background: #fff6c8; box-shadow: 0 0 0 2px #000; }
.float { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 700; font-size: 18px; color: #fff; text-shadow: 2px 2px 0 #000; will-change: transform, opacity; }
.float.gem { color: #a6f3ff; font-size: 16px; }
.float.big { font-family: var(--pixel); font-size: 20px; color: #ffe066; text-shadow: 0 0 14px rgba(255, 180, 0, .9), 3px 3px 0 #5a2a00; }
.float.badge { padding: 6px 12px; border-radius: 10px; font-size: 17px; color: var(--th-text); background: var(--th-card); box-shadow: 0 0 0 3px var(--th-frame), 0 0 0 6px var(--ink); }
.float.bad { color: #ffb08a; }
.float.streak { font-size: 18px; color: #ffb13a; text-shadow: 0 0 14px rgba(255, 120, 0, .95), 3px 3px 0 #5a1a00; }
.float.lvup { font-family: var(--pixel); font-size: 14px; color: #ffe066; text-shadow: 0 0 10px rgba(255, 180, 0, .9), 2px 2px 0 #000; }

/* toasts and banners */
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 14px; font-weight: 600; font-size: 17px; color: var(--th-text); background: var(--th-card); box-shadow: 0 0 0 3px var(--tc, var(--th-ring)), 0 0 0 6px var(--ink), 0 10px 24px rgba(0, 0, 0, .4); animation: toastIn .35s cubic-bezier(.2, 1.6, .4, 1); }
.toast .i { font-size: 26px; }
.toast.out { animation: toastOut .3s forwards; }
.toast.coach { font-size: 19px; background: #fff6c8; color: #3a2a1a; box-shadow: 0 0 0 3px #e0b450, 0 0 0 6px var(--ink), 0 10px 24px rgba(0, 0, 0, .4); }
/* a tutorial tip (hud.coachCard): one at a time, it stays until the child taps */
.coach-card { order: -1; display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 10px 10px 10px 16px; border-radius: 16px; font-weight: 600; font-size: 19px; line-height: 1.25; color: #3a2a1a; background: #fff6c8; box-shadow: 0 0 0 3px #e0b450, 0 0 0 6px var(--ink), 0 10px 24px rgba(0, 0, 0, .4); pointer-events: auto; animation: toastIn .35s cubic-bezier(.2, 1.6, .4, 1); }
.coach-card .i { flex: none; font-size: 30px; }
.coach-card .t { flex: 1; }
.coach-card .ok { flex: none; width: 52px; height: 52px; border: none; border-radius: 14px; cursor: pointer; font-size: 26px; background: linear-gradient(#7ee07a, #3aa63a); box-shadow: inset 0 -4px 0 #237a23, 0 0 0 3px var(--ink); animation: coachOk 1.4s ease-in-out .9s infinite; }
.coach-card .ok:active { transform: translateY(2px); }
.coach-card.out { animation: toastOut .28s forwards; pointer-events: none; }
@keyframes coachOk { 50% { transform: scale(1.1); } }
@media (max-height: 500px) { .coach-card { font-size: 16px; padding: 7px 8px 7px 12px; gap: 9px; } .coach-card .i { font-size: 24px; } .coach-card .ok { width: 44px; height: 44px; font-size: 22px; } }
.area-banner { text-align: center; animation: bannerIn 2.6s ease-out forwards; }
.area-banner .top { font-family: var(--pixel); font-size: clamp(12px, 1.6vw, 18px); color: #fff; letter-spacing: .2em; text-shadow: 3px 3px 0 #000; }
.area-banner { max-width: 96vw; }
.area-banner .big { margin-top: 10px; font-family: var(--pixel); font-size: clamp(20px, 7vw, 92px); line-height: 1.25; color: var(--c); text-shadow: 0 6px 0 rgba(0, 0, 0, .55), 0 11px 0 #000, 0 0 50px var(--c); }
.area-banner .ico { font-size: clamp(40px, 6vw, 70px); display: block; margin-bottom: 6px; filter: drop-shadow(0 0 20px var(--c)); }
.area-banner.low { align-self: flex-end; margin-bottom: 7vh; }
.area-banner.low .big { font-size: clamp(18px, 5vw, 64px); }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; animation: fadeIn .3s; }
.screen.center { align-items: center; justify-content: center; }
.scrim { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .25), rgba(0, 0, 0, .78)); }
.logo { text-align: center; line-height: 1; }
.logo .l1 { font-family: var(--pixel); font-size: clamp(30px, min(8vw, 12vh), 104px); background: linear-gradient(180deg, #fff6c4 0%, #ffd65e 38%, #f39b2f 68%, #b5531b 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .06em 0 #5a2a0c) drop-shadow(0 .04em 0 #1e0d04) drop-shadow(0 0 .3em rgba(255, 150, 40, .55)); }
.logo .l1 + .l1 { margin-top: .2em; }
.logo .gemrow { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.logo .gemrow span { width: clamp(16px, 2.4vw, 28px); height: clamp(16px, 2.4vw, 28px); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); animation: bob 1.6s ease-in-out infinite; }
.title-screen { justify-content: space-between !important; padding: calc(5vh + var(--safe-t)) 0 calc(9vh + var(--safe-b)); }
.title-screen .play-wrap { display: flex; flex-direction: column; align-items: center; }
.tap-start { margin-top: 5vh; font-family: var(--pixel); font-size: clamp(12px, 1.6vw, 18px); color: #fff4d6; text-shadow: 3px 3px 0 #000; animation: blink 1.2s steps(2) infinite; }
.foot-note { position: absolute; bottom: calc(12px + var(--safe-b)); left: 0; right: 0; text-align: center; font-size: 13px; color: #9a8a6a; }
/* a quiet text link that is a button (the title's 🔒 Privacy, the policy link on "play online?") */
.link-btn { background: none; border: 0; padding: 6px 4px; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; pointer-events: auto; }
.link-btn:hover, .link-btn:focus-visible { color: #ffd25a; }
/* the first start's "Play with friends online?" (screens.onlineAsk) */
.online-ask .oa-ico { font-size: 54px; line-height: 1; margin-bottom: 6px; }
.online-ask p { font-size: 16px; color: #e8dcc0; }
.online-ask p .link-btn { font-size: 15px; color: #c9b48c; margin-top: 4px; }
.online-ask-modal .row .yes { min-width: 200px; }
/* "Get the app" on a phone or tablet's browser (ui/install.js), and the title screen's button for it */
#install { position: absolute; inset: 0; z-index: 97; display: flex; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; user-select: text; -webkit-user-select: text;
  padding: calc(18px + var(--safe-t)) calc(16px + var(--safe-r)) calc(18px + var(--safe-b)) calc(16px + var(--safe-l));
  background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 170, 60, .14), transparent 70%), #050302; animation: fadeIn .35s; transition: opacity .35s; }
#install.out { opacity: 0; pointer-events: none; }
.ins-box { margin: auto; width: 100%; max-width: 430px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ins-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ins-icon { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 0 0 3px var(--th-frame), 0 0 0 6px var(--ink), 0 10px 30px rgba(0, 0, 0, .6), 0 0 44px rgba(80, 190, 255, .3); }
.ins-name { font-family: var(--pixel); font-size: 18px; line-height: 1.4; color: #ffd25a; text-shadow: 3px 3px 0 #000; }
.ins-tag { margin-top: 4px; font-size: 18px; font-weight: 600; color: #fff4d6; }
.ins-subj { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.ins-subj span { padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff4d6; background: rgba(255, 255, 255, .08); background: color-mix(in srgb, var(--c) 20%, #120c07); box-shadow: inset 0 0 0 2px var(--c); }
.ins-card { width: 100%; padding: 22px 18px 20px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ins-card h2 { margin: 0; font-size: 26px; line-height: 1.15; color: var(--th-title); text-shadow: 2px 2px 0 #000; }
.ins-perks { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ins-perks li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.2; color: #e8dcc0; background: var(--th-card); box-shadow: 0 0 0 2px var(--th-ring); }
.ins-perks li span { font-size: 26px; line-height: 1; }
.btn.ins-go { width: 100%; white-space: normal; }
.ins-fine { margin: 0; font-size: 13px; color: #c9b48c; }
.ins-or { margin: -6px 0 -4px; font-size: 14px; color: #9a8a6a; }
.ins-web { background: none; border: 0; margin-top: 2px; padding: 8px 14px; font: inherit; font-size: 16px; font-weight: 600; color: #c9b48c; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ins-web:hover, .ins-web:focus-visible { color: #ffd25a; }
.ins-web-note { margin-top: -16px; font-size: 13px; color: #8a7a5c; }
.ins-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.ins-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 17px; line-height: 1.6; background: var(--th-card); box-shadow: 0 0 0 2px var(--th-ring); }
.ins-steps li > b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #3a2208; background: linear-gradient(#ffd96a, #e0a52a); box-shadow: 0 0 0 2px var(--ink); }
.ins-steps li span b { color: #fff4d6; }
.ins-k { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 32px; height: 30px; border-radius: 8px; color: #0a7aff; background: #f4f6fa; box-shadow: 0 0 0 2px var(--ink); font-style: normal; }
.ins-k svg { width: 20px; height: 20px; }
.ins-yay { font-size: 54px; line-height: 1; }
.ins-p { margin: 0; font-size: 18px; color: #e8dcc0; }
.ins-mini { width: 26px; height: 26px; border-radius: 7px; vertical-align: middle; box-shadow: 0 0 0 2px var(--ink); }
/* a phone held sideways: the name on the left, the card on the right */
@media (orientation: landscape) and (max-height: 540px) {
  #install { padding-top: calc(12px + var(--safe-t)); padding-bottom: calc(12px + var(--safe-b)); }
  .ins-box { max-width: 780px; display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; column-gap: 28px; row-gap: 4px; }
  .ins-head { grid-row: 1 / span 3; }
  .ins-subj { max-width: 250px; margin-inline: auto; }
  .ins-card, .ins-web, .ins-web-note { grid-column: 2; }
  .ins-web-note { margin-top: -6px; }
  .ins-card { padding: 16px 16px 14px; gap: 10px; }
  .ins-card h2 { font-size: 22px; }
  .ins-perks li { padding: 6px 4px; font-size: 13px; } .ins-perks li span { font-size: 20px; }
  .ins-steps { gap: 6px; } .ins-steps li { padding: 6px 10px; font-size: 15px; }
  .btn.big.ins-go { min-height: 54px; padding: 10px 20px; font-size: 22px; }
}
.ins-title { position: absolute; top: calc(14px + var(--safe-t)); right: calc(16px + var(--safe-r)); }
@media (orientation: portrait) and (max-width: 600px) {
  .title-screen.get-app { padding-top: calc(72px + var(--safe-t)); } /* (the logo clears it) */
  .title-screen { padding-bottom: calc(9vh + 30px + var(--safe-b)); } /* (the foot note takes two lines) */
}
/* the privacy policy or terms inside the game (screens.policy) */
.modal.policy-modal .panel { width: min(780px, 94vw); height: calc(100% - 24px); padding: 12px 12px 10px; }
.modal.policy-modal .mbody { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.policy-view { flex: 1 1 auto; min-height: 0; }
.policy-view iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 10px; background: #1a120b; }

/* camp hub */
.camp-top { position: absolute; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); top: calc(12px + var(--safe-t)); display: flex; align-items: flex-start; gap: 12px; pointer-events: none; }
.camp-top > * { pointer-events: auto; }
.camp-top .grow { flex: 1; }
.camp-top .lv-card { border: none; font-family: var(--font); color: var(--th-text); text-align: left; }
.camp-top .lv-card .who { min-width: 170px; }
.lv-next { font-size: 13px; font-weight: 600; color: var(--th-sub); }
/* The two camp columns never overlap: the menu is a fixed share of the width, with the
   smaller buttons in a 2 x 2 grid under the big Adventure button. */
.camp-menu { position: absolute; right: calc(24px + var(--safe-r)); bottom: calc(24px + var(--safe-b)); display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: min(460px, 44vw); }
.camp-menu .btn.huge { width: 100%; }
/* the floor the next adventure carries on from */
.adv-floor { display: inline-block; margin-left: 14px; padding: 2px 10px; border-radius: 999px; font-size: .5em; vertical-align: middle; background: rgba(0, 0, 0, .22); }
.camp-menu .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.camp-menu .row .btn { width: 100%; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.camp-left { position: absolute; left: calc(24px + var(--safe-l)); bottom: calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; max-width: min(400px, 44vw); }
@media (max-height: 560px) { .camp-left { gap: 8px; } .how-card { padding: 8px 12px; gap: 4px; } .how-card > div { font-size: 13px; } }
/* how the game works, at camp */
.how-card { display: flex; flex-direction: column; gap: 7px; padding: 12px 16px; border-radius: 14px; background: var(--th-card); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); }
.how-card > div { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.how-card i { flex: none; width: 28px; font-style: normal; font-size: 22px; text-align: center; }
.how-card i .gem-ico { width: 22px; height: 22px; }
.how-card b { color: var(--th-title); }
.lesson-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(#4a3a14, #2a2008); box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 26px rgba(255, 210, 90, .35); cursor: pointer; border: none; color: var(--cream); text-align: left; font-family: var(--font); }
.lesson-card .i { font-size: 40px; }
.lesson-card b { display: block; font-size: 18px; color: #ffd25a; }
.lesson-card span { font-size: 14px; font-weight: 600; }
.lesson-card.done { background: var(--th-card); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); }

/* side sheet (hero, shop, trophies, settings) */
.sheet { position: absolute; right: calc(16px + var(--safe-r)); top: calc(16px + var(--safe-t)); bottom: calc(16px + var(--safe-b)); width: min(520px, 58vw); display: flex; flex-direction: column; padding: 22px 22px 18px; animation: slideIn .3s cubic-bezier(.2, 1.2, .4, 1); }
/* (centred with margins, not a transform: the pop-in animation sets transform, and a centring
   transform under it made the panel start off to the right and snap to the middle) */
.sheet.wide { width: min(760px, 92vw); left: 0; right: 0; margin: 0 auto; animation: popIn .3s cubic-bezier(.2, 1.4, .4, 1); }
/* the same screen or card drawn again (a tap inside it): no pop-in, no fade, it just updates */
.screen.still, .screen.still .sheet, .modal.still, .modal.still .panel { animation: none; }
.sheet h2 { margin: 0 0 4px; font-size: 28px; color: var(--th-title); text-shadow: 0 3px 0 var(--th-frame-dk), 3px 5px 0 #000, 0 0 18px var(--th-glow-soft); }
.sheet .sub { margin: 0 0 12px; font-size: 15px; color: var(--th-sub); }
.sheet .scroll { flex: 1; overflow: auto; padding: 4px 6px 6px 2px; margin: 0 -6px 0 0; }
.sheet .close { position: absolute; right: 18px; top: 16px; }
.sheet .actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tab { padding: 8px 14px; border: none; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 16px; color: var(--th-sub); background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink); }
.tab.on { color: #1a120b; background: #ffd25a; }
/* the heroes, each a picture of itself (ui/heroshot.js) and its name */
.hero-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 8px; padding: 4px; }
.hero-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border: none; border-radius: 14px; cursor: pointer; color: var(--th-text); background: var(--th-tile); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); font-family: var(--font); }
.hero-card .hc-pic { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 112px; border-radius: 10px; background: radial-gradient(ellipse 60% 22% at 50% 92%, rgba(0, 0, 0, .35), transparent 70%); }
.hero-card .hc-pic img { height: 100%; width: auto; max-width: 100%; object-fit: contain; pointer-events: none; }
.hero-card .hc-pic i { align-self: center; font-style: normal; font-size: 44px; }
.hero-card b { font-size: 18px; }
.hero-card.on { background: #4a3a1a; box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 20px rgba(255, 210, 90, .4); }
.hero-card.on .hc-pic { background: radial-gradient(ellipse 60% 22% at 50% 92%, rgba(0, 0, 0, .35), transparent 70%), radial-gradient(circle at 50% 55%, rgba(255, 210, 90, .28), transparent 65%); }
/* the first questions (grade, hero, name): a panel only as tall as what it holds, beside the hero
   (where fit-content isn't known it is simply full height) */
.sheet.fit { height: -webkit-fit-content; height: fit-content; max-height: calc(100% - 32px - var(--safe-t) - var(--safe-b)); margin: auto 0; }
/* short screens (a phone held sideways): pop-ups get a little tighter, so they fit with no scrolling */
@media (max-height: 500px) {
  .modal .panel { padding: 18px 22px 16px; }
  .modal .btn.big { min-height: 56px; padding: 10px 26px; font-size: 24px; }
  .modal .big-ic { font-size: 42px; }
}
/* very short screens (a phone held sideways with the browser's bars showing): panels use the edges */
@media (max-height: 400px) {
  .sheet { top: calc(8px + var(--safe-t)); bottom: calc(8px + var(--safe-b)); padding: 14px 18px 12px; }
  .sheet.fit { max-height: calc(100% - 16px - var(--safe-t) - var(--safe-b)); }
  .sheet .close { top: 10px; }
  .sheet h2 { font-size: 23px; }
  .hero-card .hc-pic { height: 96px; }
  .modal .panel { padding: 16px 20px 14px; }
  .modal h2 { font-size: 25px; margin-bottom: 6px; }
  .modal p { margin-bottom: 12px; }
  .modal .mini-jar.big { height: 70px; width: 58px !important; margin: 20px auto 8px; }
  .modal .btn.big { min-height: 54px; padding: 10px 26px; font-size: 23px; }
}
.sheet.fit .scroll { flex: 0 1 auto; }
.first-pick .actions { align-items: center; }
.first-pick .actions > :last-child { margin-left: auto; }
.first-pick .actions .link-btn { font-size: 15px; color: var(--th-sub); }
.fp-head { display: flex; align-items: center; gap: 10px; }
.fp-head h2 { flex: 1; min-width: 0; margin: 0; }
.fp-head .replay { flex: none; padding: 4px 10px; font-size: 18px; }
/* what grade are you in? small tiles, all of them in sight */
.grade-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; margin: 8px 0 6px; padding: 4px; }
.grade-card { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 8px 4px 9px; border: none; border-radius: 12px; cursor: pointer; font-family: var(--font); color: var(--th-text); background: var(--th-tile); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 5px var(--ink); }
.grade-card .i { font-size: 24px; line-height: 1.2; }
.grade-card b { font-size: 16px; white-space: nowrap; }
.grade-card:active { transform: translateY(2px); }
.grade-card.on { background: #4a3a1a; box-shadow: 0 0 0 3px #ffd25a, 0 0 0 5px var(--ink), 0 0 16px rgba(255, 210, 90, .45); }
/* short screens: the ten grades in two tight rows, so the Next button stays in view */
@media (max-height: 340px) { .grade-pick { gap: 6px; margin: 2px 0; } .grade-card { padding: 5px 4px 6px; } .grade-card .i { font-size: 20px; } }
/* a player name between ◀ and ▶, through the names rolled (ui/screens.js nameHistory); 🎲 for another */
.nh { display: flex; align-items: center; justify-content: center; gap: 10px; }
.nh-nm { flex: 0 1 284px; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 6px 14px; border-radius: 14px; text-align: center; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 2px rgba(255, 210, 90, .55); }
.nh .nm { display: inline-block; min-width: 0; font-size: 30px; font-weight: 700; line-height: 1.15; color: #ffd25a; text-shadow: 0 3px 0 #000; }
.nh-b { flex: none; width: 58px; min-height: 58px; padding: 0; font-size: 24px; border-radius: 50%; }
.nh-b:disabled { opacity: .35; filter: grayscale(1); }
.nm.pop { animation: namePop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes namePop { from { transform: scale(.7); opacity: .3; } }
.name-pick .nh { margin: 12px 0; }
.name-pick .np-roll { display: flex; justify-content: center; margin-bottom: 4px; }
/* (the card for a new name, ui/screens.js rollName: it only changes on ✔ Use it) */
.roll-name .rn-now { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--th-sub); }
.roll-name .rn-now small { margin-right: 4px; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, .3); }
.roll-name .rn-again { margin: 12px 0 6px; }
@media (max-height: 460px) { .roll-name h2 { font-size: 24px; margin-bottom: 6px; } .roll-name .rn-now { margin-bottom: 6px; } .roll-name .rn-again { margin: 8px 0 2px; } .name-pick .nh { margin: 8px 0; } }
/* (the box keeps its width, so ◀ ▶ stay put while tapping through names of any length) */
@media (max-width: 760px), (max-height: 460px) { .nh { gap: 8px; } .nh-nm { flex-basis: 226px; min-height: 52px; padding: 5px 10px; } .nh .nm { font-size: 24px; } .nh-b { width: 52px; min-height: 52px; font-size: 21px; } }
/* (an upright phone: a long name can go onto 2 lines, at its space, in a box always 2 lines tall) */
@media (max-width: 480px) { .nh { gap: 6px; } .nh-nm { flex-basis: 204px; min-height: 62px; padding: 5px 8px; } .nh .nm { font-size: min(22px, 6vw); } .nh-b { width: 48px; min-height: 48px; } .modal.roll-name-modal .panel { padding-left: 16px; padding-right: 16px; } }
/* grown-ups only: the sum and the game's own number pad (never the phone's keyboard) */
.gate { display: flex; align-items: center; justify-content: center; gap: 24px; }
.gate-q { min-width: 170px; text-align: center; }
.gate-q h2 { font-size: 26px; }
.modal .gate-sum { margin: 0; font-size: 30px; font-weight: 700; }
.gate-ans { min-width: 120px; margin: 8px auto 0; padding: 4px 14px; border-radius: 12px; font-size: 32px; font-weight: 700; line-height: 1.3; color: #ffd25a; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px var(--th-ring); }
.gate-ans.empty { color: var(--th-sub); }
.gate-ans.miss { color: #ffab9c; font-size: 22px; line-height: 1.9; }
.gate-pad { display: grid; grid-template-columns: repeat(3, 58px); gap: 8px; }
.gk { height: 50px; padding: 0; border: none; border-radius: 12px; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 24px; color: var(--th-text); background: var(--th-tile); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3), 0 0 0 3px var(--ink); }
.gk:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3), 0 0 0 3px var(--ink); }
.gk.del { font-size: 20px; }
.gk.go { color: #fff; background: linear-gradient(#7ee07a, #3aa63a); box-shadow: inset 0 -4px 0 #237a23, 0 0 0 3px var(--ink); }
@media (max-height: 420px) { .gk { height: 42px; } .gate-pad { gap: 6px; grid-template-columns: repeat(3, 54px); } .gate-modal .panel { padding: 16px 20px 14px; } }
@media (orientation: portrait) and (max-width: 600px) { .gate { flex-direction: column; gap: 14px; } }
.slot-row { margin: 10px 0 4px; font-weight: 700; font-size: 16px; color: var(--th-title); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { position: relative; width: 46px; height: 46px; border: none; border-radius: 12px; cursor: pointer; background: var(--c); box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .2), inset 3px 3px 0 rgba(255, 255, 255, .3), 0 0 0 3px var(--ink); }
.sw.on { box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .2), 0 0 0 3px #fff, 0 0 0 6px var(--ink); transform: scale(1.08); }
.sw.locked::after { content: '🔒'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(0, 0, 0, .35); border-radius: 12px; }
.sw .price { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #a6f3ff; background: #120c07; white-space: nowrap; z-index: 2; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border: none; border-radius: 14px; cursor: pointer; color: var(--th-text); background: var(--th-tile); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); font-family: var(--font); }
.item .i { font-size: 38px; line-height: 1.1; }
.item b { font-size: 14px; text-align: center; }
.item .price { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; color: #a6f3ff; }
.item.owned .price { color: #8fe596; }
.item.on { background: #4a3a1a; box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink); }
.item.cant { opacity: .55; }
.name-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-size: 22px; font-weight: 700; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 2px solid var(--th-line); font-size: 18px; font-weight: 600; }
.set-row small { display: block; font-size: 13px; color: var(--th-sub); font-weight: 500; }
.toggle { position: relative; width: 66px; height: 36px; flex: none; border: none; border-radius: 18px; cursor: pointer; background: var(--th-btn-lo); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3), 0 0 0 3px var(--ink); }
.toggle::after { content: ''; position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--th-sub); transition: left .15s; }
.toggle.on { background: #3f9e48; }
.toggle.on::after { left: 34px; background: #fff; }
/* God mode's secret code tapped in (ui/screens.js godCode): the settings panel flashes */
.sheet .god-flash { position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; background: #fff8dc; opacity: 0; animation: godFlash .45s ease-out; }
@keyframes godFlash { 12% { opacity: .9; } 100% { opacity: 0; } }
input[type=range] { width: 180px; accent-color: #e0a640; }
.seg-ctl { display: flex; gap: 6px; }
.seg-ctl button { padding: 6px 12px; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--th-sub); background: var(--th-tile); box-shadow: 0 0 0 2px var(--ink); }
.seg-ctl button.on { color: #1a120b; background: #ffd25a; }
/* the grade picker in Grown-ups (JK, SK, 1-8): wraps onto two rows when it must */
.seg-ctl.grades { flex-wrap: wrap; justify-content: flex-end; max-width: 330px; }
.seg-ctl.grades button { min-width: 40px; padding: 6px 8px; }
.set-row select { max-width: min(280px, 46vw); padding: 8px 12px; border: none; border-radius: 10px; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--th-text); background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--th-ring); }
.set-row select option, .set-row select optgroup { color: #1a120b; background: #fff4d6; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; text-align: center; background: var(--th-tile); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); }
.badge-card .i { font-size: 40px; }
.badge-card b { font-size: 15px; }
.badge-card small { font-size: 12px; color: var(--th-sub); }
.badge-card.off { opacity: .45; filter: grayscale(1); }
/* the Skill Book (game/mastery.js): a badge for every skill mastered, the ones on the way, what's next */
.skill-book { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.sk-h { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 15px; color: var(--th-title); }
.sk-h small { font-size: 12px; font-weight: 600; color: var(--th-sub); }
.sk-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 6px; }
.sk { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 8px; border-radius: 12px; text-align: center; background: var(--th-tile); box-shadow: 0 0 0 2px var(--th-ring); }
.sk .i { font-size: 30px; line-height: 1.1; }
.sk b { font-size: 13px; line-height: 1.15; }
.sk small { font-size: 11px; color: var(--th-sub); }
.sk.done { background: linear-gradient(#3d4a6a, #23304a); box-shadow: 0 0 0 3px #7ad7ff, 0 0 12px 2px rgba(122, 215, 255, .35); }
.sk.done small { color: #a8e6ff; }
.sk.next { opacity: .55; }
.skbar { width: 80%; height: 6px; border-radius: 3px; background: #120c07; box-shadow: 0 0 0 1px var(--ink); overflow: hidden; }
.skbar i { display: block; height: 100%; background: linear-gradient(90deg, #7ad7ff, #4aa8ff); }
.newbadge.skill { background: #23304a; box-shadow: 0 0 0 3px #7ad7ff, 0 0 0 5px var(--ink); }
/* grown-ups: progress, in plain words */
.pg-subj { margin: 6px 0 12px; }
.pg-h { margin: 6px 0 2px; font-weight: 700; font-size: 14px; color: var(--th-sub); }
.pg-list { margin: 0; padding: 0; list-style: none; }
.pg-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 4px 0; border-radius: 10px; background: var(--th-tile); }
.pg-list .i { font-size: 22px; }
.pg-list li > span:last-child { display: flex; flex-direction: column; }
.pg-list b { font-size: 15px; }
.pg-list small { font-size: 12px; color: var(--th-sub); }
.pg-list.going li { opacity: .9; }
.rankbar { margin: 6px 0 14px; }
.rankbar .bar { height: 16px; border-radius: 8px; background: var(--th-well); box-shadow: 0 0 0 3px #000; overflow: hidden; }
.rankbar .bar i { display: block; height: 100%; background: linear-gradient(#ffe07a, #e0962a); transition: width 1.2s ease-out; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { padding: 10px; border-radius: 12px; text-align: center; background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink); }
.stat b { display: block; font-size: 26px; color: var(--th-title); }
.stat span { font-size: 13px; color: var(--th-sub); font-weight: 600; }

/* results */
.results { width: min(1000px, 94vw); max-height: calc(100% - 24px); display: flex; flex-direction: column; overflow: visible; padding: 22px 26px 18px; text-align: center; }
.results .rsub { margin: 6px 0 0; font-size: 17px; color: var(--th-sub); }
/* Only the middle scrolls (if ever needed); the button row is always visible. */
.results .rbody { flex: 0 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 6px 22px; align-items: start; margin-top: 8px; padding: 4px; }
.results .actions { flex-shrink: 0; display: flex; justify-content: center; gap: 12px; padding-top: 14px; }
@media (max-width: 760px) { .results .rbody { grid-template-columns: 1fr; } }
.results h1 { margin: 0; font-family: var(--pixel); font-size: clamp(20px, 3.4vw, 34px); color: var(--th-title); text-shadow: 0 0 20px var(--th-glow), 3px 3px 0 #000; }
.results .chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 6px; }
.results .stat { min-width: 0; padding: 8px 6px; }
.newbadge { display: inline-flex; align-items: center; gap: 8px; margin: 4px; padding: 6px 12px; border-radius: 999px; font-weight: 700; background: #4a3a1a; box-shadow: 0 0 0 3px #ffd25a, 0 0 0 5px var(--ink); animation: popIn .4s cubic-bezier(.2, 1.8, .4, 1) both; }

/* modal dialog */
.modal { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); animation: fadeIn .2s; pointer-events: auto; }
.modal .panel { width: min(520px, 92vw); padding: 26px 26px 22px; text-align: center; animation: popIn .3s cubic-bezier(.2, 1.6, .4, 1);
  display: flex; flex-direction: column; max-height: calc(100% - 24px); }
.modal .mbody { flex: 0 1 auto; min-height: 0; overflow: auto; }
.modal .panel > .row { flex-shrink: 0; padding-top: 4px; }
.modal h2 { margin: 0 0 10px; font-size: 30px; color: var(--th-title); text-shadow: 0 3px 0 var(--th-frame-dk), 3px 6px 0 #000, 0 0 22px var(--th-glow); letter-spacing: .02em; }
.modal p { margin: 0 0 18px; font-size: 18px; line-height: 1.4; }
.modal .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.modal input[type=text], .modal input[type=number] { width: 140px; padding: 10px; border: none; border-radius: 10px; font-family: var(--font); font-size: 24px; font-weight: 700; text-align: center; color: #3a2a1a; background: #fff6c8; box-shadow: 0 0 0 3px var(--ink); }

/* lesson */
.lesson-ui { position: absolute; inset: 0; pointer-events: none; }
.lesson-ui > * { pointer-events: auto; }
/* the lesson's subtitles: a slim strip, so the lesson itself has the screen (lesson.js frame()
   fits the scene into the space above it) */
.caption { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); width: min(860px, 94vw); padding: 8px 18px 9px; border-radius: 14px; text-align: center; line-height: 1.25; color: #fff; background: color-mix(in srgb, var(--th-card) 90%, transparent); box-shadow: 0 0 0 3px var(--th-frame), 0 0 0 6px var(--ink); }
.lesson-top { position: absolute; left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); top: calc(14px + var(--safe-t)); display: flex; align-items: center; gap: 12px; }
.lesson-top .t { flex: 1; font-family: var(--pixel); font-size: clamp(11px, 1.5vw, 16px); color: var(--th-title); text-shadow: 3px 3px 0 #000; }
.dots { display: flex; gap: 6px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: #3a2a4a; box-shadow: 0 0 0 2px #000; }
.dots i.on { background: #ffd25a; }
.lesson-ui.check .dots, .lesson-ui.check .skip { display: none; } /* the weekly check: questions only */
.lesson-top .ff[hidden] { display: none; } /* (God mode's ⏩: only while the lesson talks) */
.power-reveal { text-align: center; }



/* ---------- loading ---------- */
#loading { position: absolute; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #050302; transition: opacity .5s; }
#loading .bar { width: min(320px, 70vw); height: 14px; border-radius: 7px; background: #1a120b; box-shadow: 0 0 0 3px var(--th-ring); overflow: hidden; }
#loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(#ffe07a, #e0962a); transition: width .2s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .gemspin { width: 48px; height: 48px; background: linear-gradient(135deg, #b9f6ff 0 30%, #4fd2ff 30% 60%, #1e8fd6 60%); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); animation: spinY 1.2s linear infinite; }

@keyframes bump { 50% { transform: scale(1.18); } }
@keyframes toastIn { from { transform: translateY(-16px) scale(.85); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } }
@keyframes bannerIn { 0% { transform: scale(2); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 78% { transform: scale(1); opacity: 1; } 100% { transform: scale(.96) translateY(-20px); opacity: 0; } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spinY { to { transform: rotateY(360deg); } }

@media (max-width: 760px) {
  .hud-tc, .bossbar { top: calc(70px + var(--safe-t)); width: 70vw; }
  .sheet { width: auto; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); top: auto; height: 62vh; bottom: calc(10px + var(--safe-b)); }
  .camp-left { max-width: 60vw; bottom: auto; top: calc(80px + var(--safe-t)); }
  .camp-menu .btn.huge { font-size: 26px; min-height: 70px; padding: 12px 28px; }
  .hud-name { display: none; } .hud-card .who { min-width: 84px; }
  .hud-card { padding: 4px; }
}
/* A small phone held sideways: the sheets use the screen's full height (the bottom sheet, 62% of it,
   is for phones held upright), and the narrow ones sit on the right with your hero beside them */
@media (max-width: 760px) and (orientation: landscape) {
  .sheet { top: calc(8px + var(--safe-t)); bottom: calc(8px + var(--safe-b)); height: auto; }
  .sheet:not(.wide):not(.fit) { left: auto; width: min(560px, 70vw); }
}
/* (the smallest ones: My Hero's tabs in one row, the squad seats' lines kept to one line each) */
@media (max-width: 760px) and (max-height: 400px) and (orientation: landscape) {
  .sheet:not(.wide):not(.fit) { width: min(560px, 76vw); }
  .sheet.panel .tabs { gap: 5px; margin-bottom: 8px; flex-wrap: nowrap; }
  .sheet.panel .tab { flex: 0 1 auto; padding: 5px 7px; font-size: 13px; white-space: nowrap; }
  .hero-card .hc-pic { height: 80px; }
  .hero-card b { font-size: 15px; }
  .seat small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .squad-board .slot-row { margin: 4px 0 3px; }
  .sb-joined .sb-jq { padding: 4px 10px; }
}
.easy-read { letter-spacing: .04em; word-spacing: .12em; }
.easy-read .pz-title, .easy-read .pz-explain, .easy-read .pz-hintbox { line-height: 1.45; }

/* phones held upright: ask to rotate (the dungeon runs sideways) */
#rotate { position: absolute; inset: 0; z-index: 80; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px; text-align: center; background: rgba(5, 3, 2, .94); }
#rotate .i { font-size: 70px; animation: tilt 2s ease-in-out infinite; }
#rotate p { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.35; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 700px) { body.in-run:not(.rotate-ok) #rotate { display: flex; } }

/* phones held upright at camp: everything stacks (cards on top, the hero in the middle, the menu
   at the bottom), so nothing runs off the edge and every button label fits */
@media (orientation: portrait) and (max-width: 700px) {
  .camp-top { flex-wrap: wrap; gap: 10px; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); top: calc(10px + var(--safe-t)); }
  .camp-top .lv-card { flex: 1 1 0; min-width: 0; }
  .camp-top .lv-card .who { min-width: 0; }
  .camp-top .hud-gems { font-size: 22px; padding: 4px 12px 4px 8px; }
  .camp-top .grow { display: none; }
  .camp-top .squad-card { order: 5; flex: 1 1 100%; width: auto; }
  .camp-top .squad-card .sc-foot > span:first-child { display: inline; }
  .camp-top .gem-col { display: contents; } /* (the wish bar gets a row of its own, so the level card keeps its room) */
  .camp-top .wish-bar { order: 4; }
  .camp-left { top: auto; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); bottom: calc(196px + var(--safe-b)); max-width: none; }
  .camp-left .how-card { display: none; }
  .lesson-card { padding: 8px 12px; }
  .lesson-card b { font-size: 16px; }
  .lesson-card span { font-size: 13px; }
  .camp-menu { left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); bottom: calc(12px + var(--safe-b)); width: auto; gap: 10px; }
  .camp-menu .btn.huge { font-size: 26px; min-height: 64px; padding: 10px 20px; }
  .camp-menu .row .btn { font-size: 17px; min-height: 48px; padding: 8px 6px; }
  .sheet .sub .replay { vertical-align: middle; }
  .sheet { height: auto; max-height: calc(88vh - var(--safe-t)); }
  .sheet h2 { font-size: 22px; padding-right: 96px; line-height: 1.15; }
  .grade-pick { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } /* (JK to Grade 8: two rows of five) */
  .grade-pick .grade-card b { font-size: 13px; }
  .hero-card .hc-pic { height: 96px; }
}

/* ---------- Lessons ---------- */
.caption .txt { display: block; font-size: clamp(17px, 2.4vw, 26px); font-weight: 700; color: #ffe7a0; }
.caption .said { display: block; margin-top: 3px; font-size: clamp(13px, 1.6vw, 17px); font-weight: 500; line-height: 1.3; color: #d8d0f0; }
@media (max-height: 500px) {
  .caption { bottom: calc(8px + var(--safe-b)); padding: 5px 14px 6px; border-radius: 12px; }
  .caption .txt { font-size: 16px; }
  .caption .said { margin-top: 1px; font-size: 13px; }
  .lesson-top { top: calc(8px + var(--safe-t)); }
}
.lesson-end { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, 92vw); max-height: calc(100% - 24px); display: flex; flex-direction: column; padding: 24px; text-align: center; }
.lesson-end .big { font-size: 54px; }
.lesson-end h2 { margin: 4px 0 8px; font-size: 30px; color: var(--th-title); text-shadow: 0 3px 0 var(--th-frame-dk), 3px 5px 0 #000; }
.lesson-end p { margin: 0 0 18px; font-size: 18px; }
.lesson-end .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lib-card { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 14px 16px; border-radius: 14px; background: var(--th-card); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); }
.lib-card .i { font-size: 46px; line-height: 1; }
.lib-card .meta { flex: 1; min-width: 0; }
.lib-card b { display: block; font-size: 20px; color: var(--th-title); }
.lib-card small { font-size: 14px; color: var(--th-sub); }
.lib-note { margin: 6px 2px; font-size: 14px; color: var(--th-sub); }
.lib-card.now { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 18px rgba(255, 210, 90, .35); }
.lib-card.now small { color: #ffd25a; font-weight: 700; }

/* ---------- Rest camp (during an adventure) ---------- */
.rest-card { position: absolute; left: 50%; top: calc(62px + var(--safe-t)); transform: translateX(-50%); z-index: 30; width: min(640px, 94vw); max-height: calc(100% - 80px); display: flex; flex-direction: column;
  padding: 14px 18px 16px; text-align: center; pointer-events: auto; animation: popIn .35s cubic-bezier(.2, 1.4, .4, 1); }
.rest-card.away { display: none; }
.rest-card .rc-head { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.rest-card .rc-head .i { font-size: 40px; filter: drop-shadow(0 0 10px rgba(255, 150, 40, .7)); }
.rest-card .rc-head b { display: block; font-family: var(--pixel); font-size: clamp(16px, 2.4vw, 22px); color: var(--th-title); text-shadow: 3px 3px 0 #000; }
.rest-card .rc-head small { font-size: 15px; color: var(--th-soft); }
.rest-card .rc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 8px; }
.rest-card .stat { padding: 6px 4px; }
.rest-card .stat b { font-size: 22px; }
.rest-card .rc-line { font-size: 15px; color: var(--th-soft); margin-bottom: 8px; }
.rest-card .rc-badges { margin-bottom: 8px; }
.rest-card .rc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* (a long card: the buttons stay in sight at its bottom, the rest scrolls behind them) */
.rest-card .rc-actions { position: sticky; bottom: -4px; z-index: 1; margin: 8px -4px -4px; padding: 10px 4px 4px; background: linear-gradient(transparent, var(--th-panel-lo) 14px); }
.rest-card .go small { font-size: .7em; opacity: .85; margin-left: 4px; }
@media (max-height: 560px) { .rest-card { top: calc(52px + var(--safe-t)); padding: 10px 14px 12px; } .rest-card .rc-stats { margin: 8px 0 6px; } .rest-card .rc-head .i { font-size: 30px; } }
.tag.exit-sign .nm { font-size: 20px; color: #ffd25a; padding: 4px 12px; border-radius: 12px; background: var(--th-card); box-shadow: 0 0 0 3px var(--ink); animation: bob 1.2s ease-in-out infinite; }
@media (max-width: 760px) { .lesson-top { flex-wrap: wrap; row-gap: 6px; } .lesson-top .dots { order: 3; width: 100%; justify-content: center; } }

/* ---------- Team play ---------- */
/* The Team Blast ring around the boss medallion at the end of the floor bar: every win fills it */
.strip .boss { --tp: 0; background: conic-gradient(#7ad7ff calc(var(--tp) * 360deg), #3a1a1a 0); box-shadow: 0 0 0 3px var(--ink), 0 0 calc(4px + var(--tp) * 16px) calc(var(--tp) * 5px) rgba(122, 215, 255, .75); }
.strip .boss span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6a1a14, #2a0806); box-shadow: inset 0 0 0 2px #b5281f; font-size: 22px; }
.strip .boss.hit { animation: bossHit .35s ease-out; }
.strip .boss.full { animation: blastReady 1.2s ease-in-out infinite; }
@keyframes bossHit { 40% { transform: scale(1.22); } }
@keyframes blastReady { 50% { box-shadow: 0 0 0 3px var(--ink), 0 0 26px 9px rgba(160, 230, 255, .95); } }
.strip .mark.pulse { animation: markPulse .9s ease-out; }
@keyframes markPulse { 30% { box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--c), 0 0 16px 6px var(--c); } }
.power-orb { position: fixed; z-index: 30; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0 25%, var(--c) 45%, transparent 72%); box-shadow: 0 0 14px 6px var(--c); }
/* rewards flying from where they were earned to where they belong on screen (ui/fly.js) */
.fly-x { position: fixed; left: 0; top: 0; z-index: 45; width: 0; height: 0; pointer-events: none; }
.fly-y { position: absolute; left: 0; top: 0; display: grid; place-items: center; pointer-events: none; will-change: transform; line-height: 1; }
/* gems by size (game/gems.js): small = 1, big = 10, huge = 100; the same blue gem, bigger and brighter */
.fly-y.gem-fly .gem-ico { width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(140, 230, 255, .95)) drop-shadow(0 0 2px #fff); }
.fly-y.gem-fly.big .gem-ico { width: 34px; height: 34px; filter: drop-shadow(0 0 9px rgba(150, 235, 255, 1)) drop-shadow(0 0 3px #fff); }
.fly-y.gem-fly.huge .gem-ico { width: 52px; height: 52px; background: linear-gradient(135deg, #ffffff 0 30%, #8fe8ff 30% 60%, #2aa6ee 60%); filter: drop-shadow(0 0 14px rgba(170, 240, 255, 1)) drop-shadow(0 0 4px #fff); }
.fly-y.gem-fly.big::after, .fly-y.gem-fly.huge::after { content: '✦'; position: absolute; top: -9px; right: -11px; font-size: 15px; color: #fff; text-shadow: 0 0 6px #bff4ff, 0 0 2px #fff; animation: gemTwinkle .35s ease-in-out infinite alternate; }
.fly-y.gem-fly.huge::after { top: -12px; right: -16px; font-size: 22px; }
@keyframes gemTwinkle { from { transform: scale(.6) rotate(0deg); opacity: .6; } to { transform: scale(1.15) rotate(45deg); opacity: 1; } }
.fly-y.trick-fly { font-size: 24px; filter: drop-shadow(0 0 8px #ff8a3a); }
.fly-y.pup-fly { font-size: 30px; filter: drop-shadow(0 0 10px var(--pc, #fff)); }
.fly-y.prize-fly { font-size: 34px; filter: drop-shadow(0 0 10px #fff4b0); }
.pup.wait { visibility: hidden; }
.caught { animation: caught .32s ease-out; }
@keyframes caught { 0% { transform: scale(1); } 40% { transform: scale(1.4); filter: brightness(1.8) drop-shadow(0 0 8px #fff); } 100% { transform: scale(1); } }
.hud-feed { position: absolute; right: calc(14px + var(--safe-r)); top: calc(136px + var(--safe-t)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.hud-feed .fe { padding: 5px 12px 5px 10px; border-radius: 12px; font-size: 15px; font-weight: 600; color: #f2e8d6; background: var(--th-card); box-shadow: inset 4px 0 0 var(--c), 0 0 0 2px var(--ink); animation: feedIn .3s ease-out; transition: opacity .5s; }
.hud-feed .fe b { color: var(--c); }
.hud-feed .fe small { margin-left: 4px; font-size: 12px; color: #b7a98f; }
.hud-feed .fe.out { opacity: 0; }
@keyframes feedIn { from { transform: translateX(30px); opacity: 0; } }
.hud-edges .edge { position: fixed; z-index: 6; display: flex; align-items: center; gap: 4px; transform: translateY(-50%); pointer-events: none; font-weight: 700; font-size: 12px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.hud-edges .edge::before { content: ''; width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.hud-edges .edge.left { left: calc(6px + var(--safe-l)); }
.hud-edges .edge.left::before { border-right: 16px solid var(--c); }
.hud-edges .edge.right { right: calc(6px + var(--safe-r)); flex-direction: row-reverse; }
.hud-edges .edge.right::before { border-left: 16px solid var(--c); }
.hud-edges .edge.flash { animation: edgeFlash .6s ease-in-out 2; }
@keyframes edgeFlash { 50% { transform: translateY(-50%) scale(1.5); filter: drop-shadow(0 0 8px var(--c)); } }
/* Name tags in a big group: friends and the nearest few in full, everyone else a dot */
.tag.member .nm { color: color-mix(in srgb, var(--c) 55%, #fff); }
.tag.dot .nm { font-size: 0; width: 12px; height: 12px; padding: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #000; }
/* your own hero: a bobbing YOU pointing down at you, in every adventure */
.tag.you .nm { font-size: 13px; color: #fff3c4; text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000, 0 0 6px rgba(0, 0, 0, .6); } /* (your name only: a ring under your feet marks your hero, entities.js setYou) */
.float.team { padding: 3px 9px; border-radius: 9px; font-size: 14px; color: #fff; background: var(--th-card); box-shadow: 0 0 0 2px var(--ink); }
.tag .fight { font-size: 16px; animation: bob .5s ease-in-out infinite; }
@media (max-width: 760px) { .hud-feed { top: calc(118px + var(--safe-t)); } .hud-feed .fe { font-size: 13px; } }

/* ---------- knock-outs ---------- */
.float.big.ko { font-size: 30px; color: #ffb13a; text-shadow: 0 0 16px rgba(255, 90, 40, .95), 3px 3px 0 #5a1400, -2px -2px 0 #5a1400; }
.float.big.ko.perfect { font-size: 34px; color: #fff27a; text-shadow: 0 0 18px rgba(255, 200, 40, 1), 3px 3px 0 #5a2a00, -2px -2px 0 #5a2a00; }
.float.gem.big { font-size: 22px; }
.float.gem.nogems { font-size: 20px; color: #a8a298; text-decoration: line-through 3px #e0685a; } /* two misses: no gems this time (run.noGems) */
.float.gem.nogems .gem-ico { filter: grayscale(1) brightness(.75); }

.hud-card.tap { cursor: pointer; }
.hud-card.tap:focus-visible { outline: 4px solid #ffd25a; outline-offset: 2px; }
.hud-card.tap:active { transform: translateY(2px); }

/* Ghost mode (game/run.js setGhost): your see-through name tag and portrait card */
.tag.ghost .nm { color: #cdeeff; opacity: .85; }
.av-card.ghost .av-pic img, .av-card.ghost .av-fb { opacity: .45; filter: grayscale(.6) brightness(1.25); }
.modal .ghost-note { margin: 0 0 4px; max-width: 380px; font-size: 14px; line-height: 1.35; text-align: center; opacity: .85; }

/* ---------- the rest camp and results: the team, your level, what you unlocked ---------- */
.rc-sub { margin: 12px 0 2px; font-weight: 700; font-size: 16px; color: var(--th-title); }
.rc-sub b { color: #7ad7ff; }
.team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 4px; }
.team-row .tm { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; }
.team-row .fc { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 46px; border-radius: 9px; background: color-mix(in srgb, var(--pc) 40%, #120c07); box-shadow: 0 0 0 3px var(--pc), 0 0 0 5px var(--ink); }
.team-row .fc img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; object-position: 50% 32%; }
.team-row .fc i { font-style: normal; font-size: 24px; }
.team-row .fc .lv { position: absolute; right: -8px; bottom: -8px; }
.team-row b { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--th-text); }
.team-row small { font-size: 13px; font-weight: 700; color: var(--th-sub); }
.team-row .tm.me .fc { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 5px var(--ink), 0 0 14px 3px rgba(255, 210, 90, .6); }
.team-row .more { justify-content: center; font-weight: 700; font-size: 18px; color: var(--th-sub); }
.lv-line { display: flex; align-items: center; gap: 10px; margin: 8px auto; max-width: 460px; }
.lv-line > .lv { font-size: 14px; }
.lv-line .lvbar { flex: 1; }
.lv-line small { font-size: 13px; font-weight: 600; color: var(--th-sub); white-space: nowrap; }
.unlocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.rest-card .rc-stats { grid-template-columns: repeat(3, 1fr); }
.results .lv-line { margin: 8px 0; }

/* A screen held sideways: the rest card lays out side by side in two columns (the browser balances
   them), so all of it fits with no scrolling (owner rule, CLAUDE.md). On a phone (a short screen)
   the results do too, in up to three, and both get smaller. */
@media (orientation: landscape) {
  .rest-card { width: min(860px, 96vw); }
  .rest-card .rc-body { columns: 2 200px; column-gap: 18px; }
  .rest-card .rc-body > * { break-inside: avoid; }
  .rest-card .team-row { gap: 6px; }
  .rest-card .team-row .tm { min-width: 58px; }
  .rest-card .team-row b { max-width: 70px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .rest-card { max-height: calc(100% - 58px - var(--safe-t) - var(--safe-b)); padding: 8px 14px 10px; }
  .rest-card .rc-head { gap: 8px; }
  .rest-card .rc-head .i { font-size: 24px; }
  .rest-card .rc-head b { font-size: 16px; }
  .rest-card .rc-head small { font-size: 13px; }
  .rest-card .rc-body { margin-top: 2px; }
  .results .rbody { display: block; columns: 3 200px; column-gap: 18px; margin-top: 2px; }
  .results .rcol { display: contents; }
  .results .rcol > * { break-inside: avoid; }
  .results .rcol > .slot-row { break-after: avoid; } /* (a heading stays with what it heads) */
  .rest-card .rc-sub { margin: 2px 0 0; font-size: 14px; }
  .rest-card .team-row { flex-wrap: nowrap; gap: 3px; margin: 4px 0 2px; }
  .rest-card .team-row .tm { min-width: 0; flex: 0 1 46px; }
  .rest-card .team-row .fc { width: 38px; height: 34px; }
  .rest-card .team-row .fc i { font-size: 18px; }
  .rest-card .team-row .fc .lv { right: -7px; bottom: -6px; transform: scale(.85); }
  .rest-card .team-row b { max-width: 100%; font-size: 11px; }
  .rest-card .team-row small { font-size: 11px; line-height: 1; }
  .rest-card .r-gems, .results .r-gems { margin: 4px auto 6px; padding: 4px 18px 3px; font-size: 26px; }
  .rest-card .r-gems .gem-ico, .results .r-gems .gem-ico { width: 24px; height: 24px; }
  .rest-card .r-gems > span:not(.gem-ico), .results .r-gems > span:not(.gem-ico) { font-size: 12px; }
  .rest-card .lv-line, .results .lv-line { margin: 4px auto; }
  .rest-card .sq-line, .results .sq-line { margin: 4px 0; padding: 3px 8px 0; }
  .rest-card .sq-rows, .results .sq-rows { gap: 3px; margin: 2px auto 5px; padding: 5px 10px; }
  .rest-card .unlocks, .results .unlocks, .rest-card .rc-badges { margin: 0 0 4px; gap: 2px; }
  .rest-card .newbadge, .results .newbadge { margin: 2px; padding: 3px 10px; gap: 6px; font-size: 13px; }
  .rest-card .rc-actions { margin-top: 2px; padding-top: 6px; }
  .rest-card .rc-actions .btn, .results .actions .btn { min-height: 46px; padding: 6px 18px; font-size: 18px; }
  .rest-card .rc-actions .btn.big, .results .actions .btn.big { padding: 6px 22px; font-size: 21px; }
  .results { max-height: calc(100% - 12px); padding: 10px 18px 10px; }
  .results h1 { font-size: clamp(18px, 3vw, 26px); }
  .results .rsub { margin-top: 2px; font-size: 14px; }
  .results .chips { margin: 2px 0 4px; gap: 6px; }
  .results .stat { padding: 4px; }
  .results .stat b { font-size: 20px; }
  .results .stat span { font-size: 12px; }
  .results .slot-row { margin: 2px 0; font-size: 14px; }
  .results .actions { padding-top: 6px; }
}
/* (smaller phones held sideways: smaller still) */
@media (max-height: 400px) and (orientation: landscape) {
  .rest-card { top: calc(46px + var(--safe-t)); max-height: calc(100% - 50px - var(--safe-t) - var(--safe-b)); padding: 6px 12px 8px; }
  .rest-card .rc-head b { font-size: 15px; }
  .rest-card .rc-head small { font-size: 12px; }
  .rest-card .rc-sub { font-size: 12px; }
  .rest-card .team-row .fc { width: 34px; height: 30px; }
  .rest-card .r-gems, .results .r-gems { margin: 2px auto 4px; padding: 3px 14px 2px; font-size: 22px; }
  .rest-card .r-gems .gem-ico, .results .r-gems .gem-ico { width: 20px; height: 20px; }
  .rest-card .r-gems > span:not(.gem-ico), .results .r-gems > span:not(.gem-ico) { font-size: 11px; }
  .rest-card .sq-rows, .results .sq-rows { gap: 1px; padding: 3px 10px; }
  .rest-card .sq-row b, .results .sq-row b { font-size: 13px; }
  .rest-card .newbadge, .results .newbadge { padding: 2px 8px; gap: 4px; font-size: 12px; }
  .rest-card .rc-actions .btn, .results .actions .btn { min-height: 44px; font-size: 17px; }
  .rest-card .rc-actions .btn.big, .results .actions .btn.big { font-size: 19px; }
  .results h1 { font-size: 18px; }
  .results .stat b { font-size: 18px; }
}

/* ---------- your level at camp ---------- */
.lv-board .lv-big { margin: 6px 0 4px; }
.lv-board .hint { font-size: 12px; font-weight: 600; color: var(--th-sub); }
.lv-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 10px; }
.lv-track .lt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: 12px; text-align: center; background: var(--th-tile); box-shadow: 0 0 0 2px var(--th-ring); }
.lv-track .lt .n { position: absolute; left: 7px; top: 4px; font-family: var(--pixel); font-size: 9px; color: #ffd25a; }
.lv-track .lt .i { font-size: 26px; line-height: 1.2; }
.lv-track .lt small { font-size: 12px; line-height: 1.15; color: var(--th-sub); }
.lv-track .lt.next { background: #3d3112; box-shadow: 0 0 0 3px #ffd25a, 0 0 12px 2px rgba(255, 210, 90, .5); }
.lv-moves { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lv-moves .mv { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; text-align: center; background: var(--th-tile); opacity: .5; filter: grayscale(.7); }
.lv-moves .mv.on { opacity: 1; filter: none; box-shadow: 0 0 0 2px #7ad7ff; }
.lv-moves .mv .i { font-size: 26px; }
.lv-moves .mv b { font-size: 15px; color: var(--th-title); }
.lv-moves .mv small { font-size: 11px; line-height: 1.2; color: var(--th-sub); }
.lv-welcome .big-lv .lv { font-size: 30px; padding: 0 .4em; }
.lv-welcome h2 { margin: 10px 0 6px; }
.item.zone .price { color: #ffd25a; }
/* zone gear (game/zones.js): the zone's icon in the corner; locked until the zone is reached */
.item .ztag { position: absolute; top: 5px; left: 7px; font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 0 var(--ink)); }
.item .price.zlock { font-size: 12px; line-height: 1.2; text-align: center; color: var(--th-sub); }
/* ---------- the shop's cues, the wish and gold gear (game/shop.js, ui/screens.js heroSheet) ---------- */
/* what you can get now glows softly (a still glow: a whole shop of moving glows costs a slow
   laptop too much); the rest say how many more gems they need */
.item.afford { box-shadow: 0 0 0 3px #6fdcff, 0 0 0 6px var(--ink), 0 0 16px 3px rgba(111, 220, 255, .45); }
.item .more { margin-top: -3px; font-size: 13px; font-weight: 700; color: var(--th-sub); }
.sw.afford { box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .2), inset 3px 3px 0 rgba(255, 255, 255, .3), 0 0 0 3px #5fb8d8, 0 0 10px 2px rgba(111, 220, 255, .35); }
.sw .price.more { color: var(--th-sub); }
/* the wish star on anything you don't own: dim, lit when it is your wish */
.wish-b { position: absolute; top: 5px; right: 5px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; line-height: 1; background: rgba(18, 12, 7, .8); box-shadow: 0 0 0 2px var(--th-ring); filter: grayscale(1) brightness(1.1); opacity: .65; cursor: pointer; }
.wish-b:hover { opacity: 1; }
.wish-b.on { opacity: 1; filter: none; background: #4a3a10; box-shadow: 0 0 0 2px #ffd25a, 0 0 10px 2px rgba(255, 210, 90, .8); }
.sw .wish-b { top: -10px; right: -10px; width: 22px; height: 22px; font-size: 12px; }
.item.wished { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 14px 3px rgba(255, 210, 90, .5); }
.item.wished.cant { opacity: .85; }
.item.wished.afford { animation: wishGlow 1.6s ease-in-out infinite; }
.sw.wished { box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .2), 0 0 0 3px #ffd25a, 0 0 0 5px var(--ink), 0 0 12px 3px rgba(255, 210, 90, .6); }
@keyframes wishGlow { 50% { box-shadow: 0 0 0 3px #fff3b0, 0 0 0 6px var(--ink), 0 0 24px 8px rgba(255, 210, 90, .8); } }
/* the squad set: locked with the squad chest's picture (its look: silver, gold, crystal) */
.item.squad .price .chest { margin-right: 2px; }
/* gold gear: the icon in gold, a gold tile, and the button that makes an item gold */
.item.gold .i, .ipic.gold { filter: sepia(1) saturate(3.5) hue-rotate(-10deg) brightness(1.08) drop-shadow(0 0 6px rgba(255, 200, 60, .85)); }
.item.gold { background: linear-gradient(#5a4614, var(--th-tile) 75%); }
.item .gold-b { margin-top: 2px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; color: #3a2400; white-space: nowrap; background: linear-gradient(#fff3b0, #ffc93a 60%, #e09a1a); box-shadow: 0 0 0 2px var(--ink); cursor: pointer; }
.item .gold-b:not(.afford) { filter: saturate(.35) brightness(.8); }
.item .gold-b.afford { box-shadow: 0 0 0 2px var(--ink), 0 0 10px 2px rgba(255, 210, 90, .7); }
.item .gold-tag { font-size: 13px; font-weight: 700; color: #ffd25a; text-shadow: 0 0 8px rgba(255, 200, 60, .8); }
/* just bought: a burst of light; the wish bar's tap: the item pulses */
.item.got::after, .sw.got::after { content: ''; position: absolute; inset: -4px; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 3px #fff3b0, 0 0 26px 10px rgba(255, 220, 120, .9); animation: gotBurst 1.1s ease-out forwards; }
.item.got .i { animation: gotPop .7s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes gotBurst { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
@keyframes gotPop { 40% { transform: scale(1.4) rotate(-8deg); } }
.item.focus, .sw.focus { animation: focusPulse .7s ease-in-out 3; }
@keyframes focusPulse { 50% { transform: scale(1.07); filter: brightness(1.25); } }
.reduce-motion .item.wished.afford, .reduce-motion .wish-bar.ready, .reduce-motion .item.focus, .reduce-motion .sw.focus { animation: none; }
/* the wish bar: what you wished for, filling with your gems (at camp under your gems, in My Hero
   in the header); with enough gems it glows and says so */
.gem-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wish-bar { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border: none; border-radius: 999px; cursor: pointer; font-family: var(--font); color: var(--th-text); background: var(--th-card); box-shadow: 0 0 0 3px color-mix(in srgb, #ffd25a 45%, var(--th-ring)), 0 0 0 6px var(--ink); }
.wish-bar .wb-star { font-size: 13px; font-style: normal; margin-right: -2px; }
.wish-bar .ipic { font-size: 24px; line-height: 1; }
.ipic.sw-pic { display: inline-block; width: 1em; height: 1em; border-radius: 6px; background: var(--c); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .2), inset 2px 2px 0 rgba(255, 255, 255, .3), 0 0 0 2px var(--ink); }
.wb-bar { position: relative; display: block; flex: none; width: 96px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--th-well); box-shadow: inset 0 0 0 2px var(--ink); }
.wb-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: linear-gradient(#c8faff, #4fd2ff 55%, #1e8fd6); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.wb-p { display: flex; align-items: center; gap: 3px; font-size: 16px; font-weight: 700; color: #a6f3ff; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.wb-p .gem-ico { width: 16px; height: 16px; }
.wish-bar.ready { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 16px 4px rgba(255, 210, 90, .7); animation: wishReady 1.6s ease-in-out infinite; }
@keyframes wishReady { 50% { box-shadow: 0 0 0 3px #fff3b0, 0 0 0 6px var(--ink), 0 0 26px 9px rgba(255, 210, 90, .9); } }
.wish-bar.ready .wb-bar { width: auto; height: auto; padding: 2px 10px; overflow: visible; background: linear-gradient(#fff3b0, #ffc93a 60%, #e09a1a); }
.wish-bar.ready .wb-bar > i { display: none; }
.wish-bar.ready .wb-bar b { font-size: 15px; font-weight: 700; color: #3a2400; white-space: nowrap; }
.sheet .sub .wish-bar.mini { display: inline-flex; vertical-align: middle; margin: -4px 0 -2px 10px; padding: 2px 10px 2px 6px; box-shadow: 0 0 0 2px color-mix(in srgb, #ffd25a 45%, var(--th-ring)), 0 0 0 4px var(--ink); }
.sheet .sub .wish-bar.mini.ready { box-shadow: 0 0 0 2px #ffd25a, 0 0 0 4px var(--ink), 0 0 12px 3px rgba(255, 210, 90, .7); animation: none; }
.wish-bar.mini .ipic { font-size: 18px; }
.wish-bar.mini .wb-bar { width: 72px; height: 11px; }
.wish-bar.mini .wb-p { font-size: 14px; }
.wish-bar.mini.ready .wb-bar { width: auto; height: auto; padding: 1px 8px; }
.wish-bar.mini.ready .wb-bar b { font-size: 13px; }
/* an item you can't get yet: its picture, your gems filling toward it, and the wish button */
.item-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ipic.big { display: inline-block; font-size: 64px; line-height: 1.1; }
.ipic.sw-pic.big { width: 72px; height: 72px; margin: 6px 0; border-radius: 16px; }
.item-card h2 { margin: 4px 0; }
.item-card .wb-bar.big { width: min(260px, 70vw); height: 20px; border-radius: 10px; }
.item-card .wb-bar.big > i { border-radius: 10px; }
.item-card p { margin: 6px 0 2px; font-size: 18px; }
.ic-wished { align-self: center; padding: 0 8px; font-weight: 700; font-size: 18px; color: #ffd25a; }
@media (max-height: 460px) { .ipic.big { font-size: 44px; } .ipic.sw-pic.big { width: 52px; height: 52px; } .item-card h2 { font-size: 22px; } }
@media (max-width: 760px) { .lv-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lv-moves { grid-template-columns: repeat(3, minmax(0, 1fr)); } .camp-top .lv-card .who { min-width: 0; } .lv-next { display: none; } }

/* ---------- the weekly lesson's reward: your gold pet (game/goldpet.js, game/petbuddy.js) ---------- */
/* a picture of it (screens.petArt): its portrait (ui/heroshot.js petShot) in a soft gold glow with a
   few sparkles, drawn smaller for an early form so the pictures grow as it evolves (--ps). --pa: its
   size. sleep: not out yet this week (dim, 💤); .pa-medal: its medallion. */
.pet-art { --pa: 64px; --ps: .7; position: relative; flex: none; display: inline-block; width: var(--pa); height: var(--pa); font-size: 0; }
.pet-art.big { --pa: 128px; margin: 0 auto 4px; display: block; }
.pet-art.f1 { --ps: .66; } .pet-art.f2 { --ps: .84; } .pet-art.f3 { --ps: 1.02; }
.pet-art > i, .pet-art > img { position: absolute; font-style: normal; line-height: 1; }
.pet-art .glow { left: 50%; top: 8%; width: 92%; height: 86%; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 210, 90, .55), rgba(255, 168, 42, .18) 60%, transparent); }
.pet-art.f2 .glow, .pet-art.f3 .glow { width: 104%; height: 96%; top: 2%; animation: petPulse 2.4s ease-in-out infinite; }
@keyframes petPulse { 50% { opacity: .65; transform: translateX(-50%) scale(1.08); } }
.pet-art .pa-pic { left: 50%; bottom: 3%; width: calc(var(--pa) * var(--ps)); height: calc(var(--pa) * var(--ps)); transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 0 calc(var(--pa) * .05) rgba(255, 210, 90, .85)); animation: petBob 2.4s ease-in-out infinite; pointer-events: none; }
.pet-art .pet-emo.pa-pic { display: flex; align-items: center; justify-content: center; font-size: calc(var(--pa) * var(--ps) * .78); filter: sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.08) drop-shadow(0 0 calc(var(--pa) * .05) rgba(255, 210, 90, .85)); }
@keyframes petBob { 50% { transform: translateX(-50%) translateY(calc(var(--pa) * -.05)) rotate(-3deg); } }
.pet-art .sp { left: 50%; font-size: calc(var(--pa) * .16); color: #fff6c0; text-shadow: 0 0 calc(var(--pa) * .06) #ffd25a; transform: translateX(-50%); animation: petTw 1.6s ease-in-out infinite; }
.pet-art .s1 { top: 6%; margin-left: calc(var(--pa) * -.36); }
.pet-art .s2 { top: 16%; margin-left: calc(var(--pa) * .36); animation-delay: -.8s; color: #fff2b0; }
.pet-art .s3 { top: -6%; margin-left: calc(var(--pa) * .04); animation-delay: -.4s; color: #ffffff; }
@keyframes petTw { 0%, 100% { opacity: .25; transform: translateX(-50%) scale(.6); } 50% { opacity: 1; transform: translateX(-50%) scale(1.15); } }
.pet-art.sleep .glow { opacity: .3; animation: none; }
.pet-art.sleep .pa-pic { filter: grayscale(.7) brightness(.55) drop-shadow(0 0 2px rgba(0, 0, 0, .8)); animation: petSleep 3.2s ease-in-out infinite; }
.pet-art.sleep .pet-emo.pa-pic { filter: sepia(1) saturate(2) grayscale(.6) brightness(.6); }
@keyframes petSleep { 50% { transform: translateX(-50%) scale(1.03, .97); } }
.pet-art .zz { right: 0; top: 0; font-size: calc(var(--pa) * .26); animation: petZz 2.6s ease-in-out infinite; }
@keyframes petZz { 0% { opacity: 0; transform: translate(-30%, 30%) scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(10%, -30%) scale(1.1); } }
.pet-art .pa-medal { right: -4%; bottom: -2%; font-size: calc(var(--pa) * .3); filter: drop-shadow(0 0 calc(var(--pa) * .05) rgba(255, 210, 90, .95)); animation: namePop .5s cubic-bezier(.2, 1.6, .4, 1) .3s both; }
.reduce-motion .pet-art .pa-pic, .reduce-motion .pet-art .sp, .reduce-motion .pet-art .zz, .reduce-motion .pet-art .glow { animation-duration: 6s; }
/* a pet's forms as dots (screens formDots): the ones it has reached lit gold */
.form-dots { display: inline-flex; gap: 4px; align-items: center; }
.form-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .45); box-shadow: 0 0 0 1.5px var(--ink); }
.form-dots i.on { background: radial-gradient(circle at 35% 30%, #fffbe0, #ffd25a 45%, #e8901a); box-shadow: 0 0 0 1.5px var(--ink), 0 0 5px rgba(255, 210, 90, .8); }
/* weeks in a row fed full, toward the medallion (⭐ ⭐ ⭐ 🏅): the camp card, the Gold Pet tab */
.cr-weeks { display: inline-flex; gap: 6px; align-items: center; font-size: 22px; line-height: 1; }
.cr-weeks i { font-style: normal; filter: grayscale(1) brightness(.55); opacity: .7; }
.cr-weeks i.on { filter: drop-shadow(0 0 6px #ffcf5a); opacity: 1; }
.cr-weeks i.on.now { animation: lvBadge .9s cubic-bezier(.2, 1.8, .4, 1) .3s both; }
/* the camp's lesson card: a glowing invitation until this week is passed */
.lesson-card { gap: 14px; }
.lesson-card:not(.done) { animation: lessonGlow 2.2s ease-in-out infinite; }
@keyframes lessonGlow { 50% { box-shadow: 0 0 0 3px #ffe58a, 0 0 0 6px var(--ink), 0 0 34px 6px rgba(255, 210, 90, .6); } }
.lesson-card i { font-style: normal; }
.lesson-card .cr-weeks { font-size: 15px; gap: 3px; margin-left: 4px; vertical-align: -2px; }
/* friends' gold pets: on name tags, portrait cards and team rows (game/goldpet.js petIcon), its emoji
   drawn gold, a little bigger for each form, its 🏅 at its corner */
.gp-ic { position: relative; display: inline-block; font-style: normal; font-size: 1.05em; line-height: 1; filter: sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.08) drop-shadow(0 0 3px #ffcf5a); animation: starIc 2.4s ease-in-out infinite; }
.gp-ic.f2 { font-size: 1.16em; filter: sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.12) drop-shadow(0 0 4px #ffcf5a) drop-shadow(0 0 7px rgba(255, 190, 60, .7)); }
.gp-ic.f3 { font-size: 1.28em; filter: sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.16) drop-shadow(0 0 4px #ffe680) drop-shadow(0 0 9px #ffb02a); animation: starIc 1.6s ease-in-out infinite; }
.gp-ic b { position: absolute; right: -.4em; bottom: -.25em; font-size: .55em; font-weight: 400; line-height: 1; }
@keyframes starIc { 50% { transform: scale(1.12) rotate(-6deg); } }
.tag.starred .nm { color: #ffe9a0; text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000, 0 0 10px rgba(255, 200, 60, .9); }
.team-row .fc .gp-ic { position: absolute; left: -9px; top: -10px; font-size: 18px; }
.reduce-motion .gp-ic { animation: none; }
/* My Hero → Gold Pet (screens.petTab): your gold pets and the ones to come in one row, then the
   one you have out: its 3 forms (the ones to come as dark shapes) and its medallion */
.gp-tab .gp-call { display: block; width: 100%; margin: 2px 0 10px; font-size: 16px; }
.gp-pick { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin: 4px 0 6px; }
.gp-card { position: relative; padding: 4px 3px 6px; }
.gp-card .hc-pic { position: relative; height: 62px; align-items: center; }
.gp-card .hc-pic .pet-emo { font-style: normal; font-size: 38px; filter: sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.08) drop-shadow(0 0 4px rgba(255, 210, 90, .8)); }
.gp-card b { font-size: 12px; line-height: 1.15; text-align: center; }
.gp-card .form-dots { margin-top: 2px; }
.gp-card .form-dots i { width: 6px; height: 6px; }
.gp-card .gp-medal { position: absolute; right: 0; bottom: -2px; font-style: normal; font-size: 20px; filter: drop-shadow(0 0 4px rgba(255, 210, 90, .9)); }
.gp-card .gp-on { position: absolute; left: 5px; top: 4px; font-style: normal; font-size: 13px; font-weight: 800; color: #1a120b; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; background: #ffd25a; box-shadow: 0 0 0 2px var(--ink); }
.gp-card.soon { cursor: pointer; opacity: .75; }
.gp-card.soon b { color: var(--th-sub); }
.gp-shadow { font-style: normal; font-size: 40px; filter: brightness(0); opacity: .55; }
.gp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gp-medals { padding: 2px 10px; border-radius: 999px; font-size: 15px; color: #ffe08a; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px rgba(255, 207, 90, .5); }
.gp-medals.none { opacity: .55; }
.gp-path { display: flex; align-items: flex-start; justify-content: center; gap: 2px; margin: 2px 0 4px; }
.gp-arrow { align-self: center; margin-top: -18px; font-size: 20px; color: #ffd25a; }
.gp-form { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; text-align: center; }
.gp-fpic { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 60px; height: 60px; border-radius: 12px; background: radial-gradient(circle at 50% 60%, rgba(255, 210, 90, .22), transparent 70%); }
.gp-fpic img, .gp-fpic .pet-emo { display: block; object-fit: contain; filter: drop-shadow(0 0 4px rgba(255, 210, 90, .7)); }
.gp-fpic .pet-emo { font-style: normal; filter: sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.08) drop-shadow(0 0 4px rgba(255, 210, 90, .7)); }
.gp-form:nth-child(1) .gp-fpic img { width: 62%; height: 62%; } .gp-form:nth-child(3) .gp-fpic img { width: 82%; height: 82%; } .gp-form:nth-child(5) .gp-fpic img { width: 100%; height: 100%; }
.gp-form:nth-child(1) .gp-fpic .pet-emo { font-size: 24px; } .gp-form:nth-child(3) .gp-fpic .pet-emo { font-size: 33px; } .gp-form:nth-child(5) .gp-fpic .pet-emo { font-size: 42px; }
.gp-form.now .gp-fpic { box-shadow: 0 0 0 2px #ffd25a, 0 0 12px rgba(255, 210, 90, .5); }
.gp-form.locked .gp-fpic img, .gp-form.locked .gp-fpic .pet-emo { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 220, 140, .7)) drop-shadow(0 0 3px rgba(255, 200, 90, .35)); opacity: .8; }
.gp-form .gp-q { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #ffe08a; text-shadow: 2px 2px 0 #000; }
.gp-form small { font-size: 11px; font-weight: 700; line-height: 1.15; color: var(--th-sub); }
.gp-form.now small { color: #ffe08a; }
.gp-medal-step .gp-fpic { align-items: center; }
.gp-medal-step .gp-fpic i { font-style: normal; font-size: 34px; filter: drop-shadow(0 0 6px rgba(255, 210, 90, .9)); }
.gp-medal-step.locked .gp-fpic i { filter: grayscale(1) brightness(.6); opacity: .6; }
.gp-medal-step .cr-weeks { font-size: 11px; gap: 1px; }
@media (min-height: 620px) { .gp-card .hc-pic { height: 78px; } .gp-fpic { width: 70px; height: 70px; } .gp-form { width: 82px; } }
/* a phone held sideways: My Hero's tabs on one row, and the Gold Pet tab compact enough to show its
   pets and the way it grows without scrolling */
@media (max-height: 450px) {
  .hero-sheet .tabs { flex-wrap: nowrap; gap: 5px; margin-bottom: 8px; }
  .hero-sheet .tab { padding: 6px 8px; font-size: 14px; white-space: nowrap; }
  .gp-tab .gp-call { margin: 0 0 6px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
  .gp-pick { gap: 7px; margin: 2px 0 2px; }
  .gp-card .hc-pic { height: 46px; }
  .gp-card .hc-pic .pet-emo, .gp-shadow { font-size: 30px; }
  .gp-card b { font-size: 11px; }
  .gp-h { margin: 4px 0 2px; font-size: 14px; }
  .gp-medals { padding: 0 8px; font-size: 13px; }
  .gp-fpic { width: 48px; height: 48px; }
  .gp-form { width: 64px; }
  .gp-form small { font-size: 10px; }
  .gp-medal-step .gp-fpic i { font-size: 28px; }
}
@media (max-width: 520px) { .gp-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gp-path { flex-wrap: wrap; } }
/* (smaller phones held sideways: smaller still, so the way it grows shows too) */
@media (max-height: 400px) {
  .gp-tab .gp-call { margin-bottom: 4px; padding-top: 4px; padding-bottom: 4px; }
  .gp-card .hc-pic { height: 38px; }
  .gp-card .hc-pic .pet-emo, .gp-shadow { font-size: 26px; }
  .gp-fpic { width: 42px; height: 42px; }
  .gp-path { margin-bottom: 0; }
}
/* trophies: each gold pet with its medallion */
.gp-badge .i { position: relative; display: inline-block; line-height: 1; }
.gp-badge .i img { display: block; width: 52px; height: 52px; object-fit: contain; }
.gp-badge .i .pet-emo { font-style: normal; font-size: 40px; filter: sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.08); }
.gp-badge .gp-medal { position: absolute; right: -10px; bottom: -4px; font-style: normal; font-size: 22px; }
.gp-badge.off .gp-medal { opacity: .35; }
/* the gold pet's prize label in My Hero → Gear (catalog `jar` items: game/lessonjar.js) */
.item.petprize .price { font-size: 12px; line-height: 1.2; text-align: center; color: #ffd25a; }
.item.petprize .price .gp-ic { animation: none; }
/* the camp's lesson pop-up: your pet's picture as the last step */
.la-steps span i.la-pet img { display: block; width: 1.35em; height: 1.35em; object-fit: contain; }
.tab .tab-pet { width: 1.45em; height: 1.45em; margin: -6px 0 -6px -2px; vertical-align: -.4em; object-fit: contain; }
.tab .pet-emo.tab-pet { display: inline-block; width: auto; height: auto; margin: 0; vertical-align: 0; font-style: normal; filter: sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.08); }
.la-steps span i.la-pet .pet-emo { font-style: normal; filter: sepia(1) saturate(5) hue-rotate(-14deg) brightness(1.08); }
/* your pet evolved, or earned its medallion (screens.petReward) */
.pr-form { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 20px; color: #ffe08a; }
.pr-form .form-dots { gap: 6px; }
.pr-form .form-dots i { width: 12px; height: 12px; }
.pr-medal { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; font-size: 18px; }
.pr-medal i { font-style: normal; font-size: 38px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255, 210, 90, .9)); animation: namePop .5s cubic-bezier(.2, 1.6, .4, 1) .2s both; }
@media (max-height: 500px) { .pet-reward .pet-art.big { --pa: 96px; } .pet-reward h2 { margin: 0 0 4px; } .pr-form { margin-bottom: 6px; font-size: 17px; } .pr-medal { margin-bottom: 8px; font-size: 16px; } .pr-medal i { font-size: 30px; } }
/* the reward card (your gold pet came out, screens.lessonResult; it evolved, screens.petReward): it
   always fits the screen, with no scrolling, so on a short one (a phone held sideways) the pet
   shrinks with the height */
.power-reveal h2 { margin-top: 6px; }
.power-reveal .pet-art.big { --pa: clamp(60px, 19vh, 128px); }
.pr-weeks { margin: 0 0 12px; }
.pr-next { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 4px 0 14px; font-size: 18px; }
.pr-next .mini-jar { margin-top: 12px; }
@media (max-height: 500px) {
  .power-reveal h2 { margin: 0 0 4px; font-size: 24px; }
  .pr-weeks { margin: 0 0 4px; }
  .pr-weeks .cr-weeks { font-size: 18px; }
  .pr-next .mini-jar { margin-top: 4px; }
}
.lesson-ask .la-what { margin: -2px 0 10px; font-size: 18px; opacity: .9; }
.la-steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0 0 14px; }
.la-steps span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; font-size: 16px; font-weight: 700; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px rgba(255, 207, 90, .5); }
.la-steps span i { font-style: normal; font-size: 22px; line-height: 1; }
.la-steps .la-arrow { font-size: 22px; color: #ffd25a; }
@media (max-height: 500px) { .power-reveal .pet-art.big { --pa: 96px; } .power-reveal.lesson-ask .pet-art.big { --pa: 76px; } .lesson-ask h2 { margin: 0; } .lesson-ask .la-what { margin: 0 0 6px; font-size: 16px; } .la-steps { margin-bottom: 8px; } .la-steps span { padding: 5px 9px; font-size: 14px; } .la-steps span i { font-size: 18px; } }
.jar-prize .jp-hero { display: block; width: 120px; height: 144px; margin: 0 auto -6px; filter: drop-shadow(0 0 14px rgba(255, 210, 90, .75)); animation: namePop .5s cubic-bezier(.2, 1.6, .4, 1); }
.jar-prize .jp-icon { display: block; font-size: 84px; line-height: 1.1; filter: drop-shadow(0 0 16px rgba(255, 210, 90, .9)); animation: namePop .5s cubic-bezier(.2, 1.6, .4, 1); }
@media (max-height: 500px) { .jar-prize .jp-hero { width: 90px; height: 108px; } .jar-prize .jp-icon { font-size: 60px; } .pr-next { margin: 0 0 8px; font-size: 16px; } }
/* the smallest phones held sideways (320 px tall): the gold pet cards still fit */
@media (max-height: 340px) {
  .modal .panel { padding: 10px 16px 10px; }
  .modal .btn.big { min-height: 48px; padding: 8px 22px; font-size: 21px; }
  .power-reveal .pet-art.big, .power-reveal.lesson-ask .pet-art.big, .pet-reward .pet-art.big { --pa: 52px; }
  .power-reveal h2 { font-size: 21px; }
  .jar-prize .jp-hero { width: 76px; height: 92px; }
  .jar-prize .jp-icon { font-size: 50px; }
  .code-entry .cp-grid { gap: 5px; margin: 4px auto 2px; }
  .code-entry .cp-p { padding: 3px 2px 5px; }
  .code-entry .cp-p i { font-size: 20px; }
}
.pr-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -6px 0 16px; }
.pr-perks span { padding: 6px 10px; border-radius: 10px; font-size: 15px; font-weight: 600; text-align: left; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 2px rgba(255, 207, 90, .45); }
/* your gold pet's arrival at camp when the lesson is passed (CampScene.celebrate): the camp menu steps aside */
#screens .camp > * { transition: opacity .4s; }
body.ceremony #screens .camp > * { opacity: 0; pointer-events: none; }
/* short screens: the "how to play" card makes way for your hero */
@media (max-height: 520px) { .how-card { display: none; } }

/* ---------- the Hat Trick (game/run.js) ---------- */
.hud-card .trick { display: flex; align-items: center; height: 16px; }
.trick .pips { display: flex; align-items: center; gap: 4px; }
.trick .pips .ic { font-size: 12px; line-height: 1; margin-right: 1px; filter: grayscale(.7) brightness(.8); opacity: .7; }
.trick .pips i { width: 9px; height: 9px; border-radius: 50%; background: #2a1c10; box-shadow: 0 0 0 2px var(--ink); }
.trick .pips i.on { background: radial-gradient(circle at 40% 35%, #fff2b0, #ff9a2a 55%, #c84a10); box-shadow: 0 0 0 2px var(--ink), 0 0 8px 2px rgba(255, 140, 40, .8); }
.trick .pips i.pop { animation: lvBadge .6s cubic-bezier(.2, 1.8, .4, 1); }
.trick .pips .fire { padding: 1px 7px; border-radius: 999px; font-family: var(--pixel); font-size: 8px; line-height: 14px; color: #fff3c8; background: linear-gradient(#ff8a3a, #c8400a); box-shadow: 0 0 0 2px var(--ink), 0 0 10px 2px rgba(255, 120, 30, .8); animation: fireTag 1s ease-in-out infinite; white-space: nowrap; }
@keyframes fireTag { 50% { box-shadow: 0 0 0 2px var(--ink), 0 0 16px 4px rgba(255, 150, 40, 1); } }
.hud-card.fire { box-shadow: 0 0 0 3px #ff9a3a, 0 0 0 6px var(--ink), 0 0 22px 4px rgba(255, 120, 30, .55); }
.tag.fire .nm { color: #ffe0b0; text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000, 0 0 10px rgba(255, 120, 30, .95); }
.fire-ic { display: inline-block; font-style: normal; animation: bob .5s ease-in-out infinite; }
.step-fly { position: fixed; z-index: 31; font-size: 26px; line-height: 1; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }

/* ---------- what the gems were for ---------- */
.gems-row { position: relative; align-self: flex-start; }
.gem-why { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; pointer-events: none; }
@media (max-width: 960px) { #hud .hud-name { display: none; } #hud .hud-card .who { min-width: 100px; } #hud .hud-card { padding: 4px 10px 4px 4px; } }
.hud-tl > .hud-card { align-self: flex-start; }
.gem-why .gw { display: flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #f2e8d6; white-space: nowrap; background: rgba(18, 12, 7, .82); box-shadow: 0 0 0 2px #3a7a9a; animation: whyIn .3s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .4s; }
.gem-why .gw b { color: #a6f3ff; font-size: 16px; }
.gem-why .gw.bump b { animation: bump .25s; }
.gem-why .gw.out { opacity: 0; }
@keyframes whyIn { from { transform: translateX(-16px) scale(.8); opacity: 0; } }

/* ---------- your squads (HUD, bottom of the top-left stack): animal, name, a bar that grows ---------- */
.hud-squads { align-self: flex-start; display: flex; flex-direction: column; gap: 4px; padding: 5px 10px 5px 6px; border: none; border-radius: 14px; cursor: pointer; font-family: var(--font); text-align: left; color: var(--th-text); background: var(--th-card); box-shadow: 0 0 0 3px color-mix(in srgb, #ffb446 45%, var(--th-ring)), 0 0 0 6px var(--ink); }
.hud-squads[hidden] { display: none; }
.hud-squads:active { transform: translateY(2px); }
.sq-r { --bc: #c8924a; display: flex; align-items: center; gap: 6px; height: 22px; }
.sq-r.pulse .sq-bar { animation: bump .45s; }
.sq-r .sq-ic { width: 22px; text-align: center; font-size: 18px; line-height: 1; }
.sq-r b { width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--th-title); }
.sq-bar { position: relative; flex: none; width: 56px; height: 9px; border-radius: 5px; overflow: hidden; background: rgba(0, 0, 0, .4); box-shadow: 0 0 0 2px var(--ink); }
.sq-bar i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 4px; border-radius: 5px; background: linear-gradient(color-mix(in srgb, var(--bc) 55%, #fff), var(--bc)); transition: width .5s cubic-bezier(.2, 1.4, .4, 1); }
.sq-r.t-silver { --bc: #a8b4c2; }
.sq-r.t-gold { --bc: #ffc23a; }
.sq-r.t-crystal { --bc: #6ad0f0; }
.sq-r.t-crystal .sq-bar i { box-shadow: 0 0 8px 2px rgba(122, 215, 255, .8); }
.sq-r .on-ic { width: 8px; height: 8px; }
@media (max-width: 760px), (max-height: 460px) { .sq-r b { width: 116px; font-size: 12px; } .sq-r { height: 19px; } .sq-r .sq-ic { font-size: 16px; } }
.steps-lb { position: absolute; z-index: 30; display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 16px; color: #fff3c8; white-space: nowrap; pointer-events: none; background: rgba(60, 30, 4, .88); box-shadow: 0 0 0 3px #ffb446, 0 0 0 5px var(--ink), 0 0 18px 4px rgba(255, 170, 60, .5); transform: translate(-50%, -50%); animation: stepsLb 2.6s ease-out forwards; }
.steps-lb b { color: #ffd27a; }
@keyframes stepsLb { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 12% { transform: translate(-50%, -80%) scale(1.1); opacity: 1; } 75% { transform: translate(-50%, -110%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -130%); opacity: 0; } }

/* ---------- the pause button (top right, over puzzles too) and the pause card ---------- */
.pause-btn { position: absolute; z-index: 45; right: calc(12px + var(--safe-r)); top: calc(10px + var(--safe-t)); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 14px; cursor: pointer; color: var(--th-text); background: linear-gradient(var(--th-btn-hi), var(--th-btn-lo)); box-shadow: inset 0 -5px 0 var(--th-btn-sh), inset 0 3px 0 var(--th-btn-lt), 0 0 0 3px var(--ink), 0 0 0 5px var(--th-frame-dk); transition: opacity .25s; }
.pause-btn .i, .pause-card .pc-ic { display: flex; gap: 6px; }
.pause-btn .i i, .pause-card .pc-ic i { display: block; width: 7px; height: 22px; border-radius: 2px; background: currentColor; box-shadow: 0 0 0 2px var(--ink); }
.pause-btn:active { transform: translateY(2px); }
body:not(.in-run) .pause-btn { display: none; }
body:has(.team-panel, .squad-board, .hero-sheet) .pause-btn { display: none; } /* (a squad sheet, or My Hero at the rest camp, over the adventure: its ✔ Done sits there) */
body.pz-open .pause-btn { width: 44px; height: 44px; right: calc(4px + var(--safe-r)); top: calc(4px + var(--safe-t)); }
body.pz-open .pause-btn .i i { width: 6px; height: 18px; }
/* paused: the card goes over an open puzzle too (it waits underneath) */
body.run-held #screens { z-index: 50; }
.pause-card { text-align: center; }
.pause-card .pc-ic { justify-content: center; gap: 12px; margin: 2px auto 6px; color: #fff6dc; }
.pause-card .pc-ic i { width: 16px; height: 50px; border-radius: 4px; box-shadow: 0 0 0 3px var(--ink); }
.pause-card h2 { margin: 4px 0 14px; }
.pause-card .pc-go { margin-bottom: 14px; }
.pc-more { gap: 12px; }
.pc-more .settings { min-width: 56px; }
/* the play break: a picture, two lines and a ring counting the minute down (screens.playBreak) */
.play-break { text-align: center; }
.play-break .pb-art { display: flex; justify-content: center; align-items: flex-end; gap: 4px; font-size: 64px; line-height: 1; }
.play-break .pb-art span:nth-child(2) { font-size: 40px; animation: pbBounce 1.1s ease-in-out infinite; }
.play-break .pb-art span:nth-child(3) { align-self: flex-start; font-size: 44px; }
.play-break h2 { margin: 8px 0 2px; }
.play-break p { margin: 0 0 12px; font-size: 18px; }
.pb-ring { --p: 1; position: relative; width: 84px; height: 84px; margin: 0 auto 6px; border-radius: 50%; background: conic-gradient(#7ad7ff calc(var(--p) * 360deg), rgba(255, 255, 255, .12) 0); box-shadow: 0 0 0 3px var(--ink); }
.pb-ring::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--th-card, #2a1e12); }
.pb-ring b { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.pb-ring[hidden], .pb-go[hidden] { display: none; }
@keyframes pbBounce { 50% { transform: translateY(-14px) rotate(25deg); } }
.reduce-motion .play-break .pb-art span { animation: none; }
@media (max-height: 500px) { .play-break .pb-art { font-size: 44px; } .play-break .pb-art span:nth-child(2) { font-size: 28px; } .play-break .pb-art span:nth-child(3) { font-size: 30px; } .pb-ring { width: 64px; height: 64px; } .pb-ring b { font-size: 22px; } .play-break p { margin-bottom: 8px; } }

/* ---------- squad markers on tags, cards and rows ---------- */
.on-ic { display: inline-block; width: 9px; height: 9px; margin-right: 1px; border-radius: 50%; background: #5ee36b; box-shadow: 0 0 0 2px #000, 0 0 8px 2px rgba(94, 227, 107, .9); font-style: normal; vertical-align: middle; }
.wisp-ic { font-style: normal; filter: drop-shadow(0 0 4px #9ff0ff); }
.tag.camp-tag .nm { font-size: 13px; }
.team-row .tm.ghost .fc { --pc: #7d8796; transform: scale(.88); } /* (a ghost: grey and faded, as everywhere: css/avatars.css) */
.team-row .tm.ghost .fc img, .team-row .tm.ghost .fc i { filter: grayscale(.9); opacity: .5; }
.team-row .tm.wisp .fc { opacity: .6; }
.team-row small .on-ic { margin-right: 4px; }
/* the level badge takes the colour of your hero's look (game/level.js LOOKS) */
.lv.t-rookie { background: linear-gradient(#f2e2c4, #c9a77a 60%, #9a7a50); }
.lv.t-hero { background: linear-gradient(#d8f6ff, #7ad7ff 60%, #3a9ad0); }
.lv.t-champion { background: linear-gradient(#d8ffe0, #6ef08a 60%, #2aa04a); }
.lv.t-legend { background: linear-gradient(#ffe0c0, #ff9a3a 60%, #c85a10); box-shadow: 0 0 0 2px #000, 0 0 8px 1px rgba(255, 140, 50, .7); }
.lv.t-mythic { background: linear-gradient(#fff8d0, #ffd25a 55%, #e09a1a); box-shadow: 0 0 0 2px #000, 0 0 10px 2px rgba(255, 210, 90, .9); }
/* from level 25 a frame too: silver (Epic), gold (Titan, Astral), diamond (Celestial, Eternal),
   then a turning rainbow (Ascended). The frames are rings of shadow in em, so a badge never changes
   size and a big badge gets a big frame. */
.lv.t-epic { color: #2a0f4a; background: linear-gradient(#f2e6ff, #c08aff 58%, #7a44c8); box-shadow: 0 0 0 .14em #f6f9ff, 0 0 0 .27em #8d98aa, 0 0 0 .4em #000, 0 0 .7em .1em rgba(192, 138, 255, .7); }
.lv.t-titan { color: #3a0808; background: linear-gradient(#ffe2e2, #ff6a6a 58%, #c02a3a); box-shadow: 0 0 0 .14em #fff3b0, 0 0 0 .27em #d9971c, 0 0 0 .4em #000, 0 0 .7em .1em rgba(255, 190, 70, .8); }
.lv.t-astral { color: #10164a; background: linear-gradient(#e8ecff, #8fa2ff 58%, #4a5ad0); box-shadow: 0 0 0 .14em #fff3b0, 0 0 0 .27em #d9971c, 0 0 0 .4em #000, 0 0 .8em .15em rgba(160, 180, 255, .8); }
.lv.t-celestial { color: #04343c; background: linear-gradient(#ebfdff, #6ee8ff 58%, #1aa0c0); box-shadow: 0 0 0 .14em #ffffff, 0 0 0 .27em #7adcff, 0 0 0 .4em #000, 0 0 .8em .15em rgba(140, 240, 255, .9); }
.lv.t-eternal { color: #4a0838; background: linear-gradient(#ffe8f7, #ff86d6 58%, #c83a9a); box-shadow: 0 0 0 .14em #ffffff, 0 0 0 .27em #7adcff, 0 0 0 .4em #000, 0 0 .8em .15em rgba(255, 150, 220, .9); }
.lv.t-ascended { color: #3a2400; background: linear-gradient(#ffffff, #fff0b0 58%, #f0c040); box-shadow: -.1em -.1em 0 .17em #ff5a7a, .1em -.1em 0 .17em #ffd25a, .1em .1em 0 .17em #5ee36b, -.1em .1em 0 .17em #4aa8ff, 0 0 0 .4em #000, 0 0 .9em .2em rgba(255, 255, 255, .7); animation: lvRainbow 2.4s linear infinite; }
.lv.t-ascended.pop { animation: lvBadge .8s cubic-bezier(.2, 1.8, .4, 1), lvRainbow 2.4s linear infinite; }
/* (the rainbow's colours run round the frame; the badge itself stays white and gold) */
@keyframes lvRainbow { 0%, 100% { box-shadow: -.1em -.1em 0 .17em #ff5a7a, .1em -.1em 0 .17em #ffd25a, .1em .1em 0 .17em #5ee36b, -.1em .1em 0 .17em #4aa8ff, 0 0 0 .4em #000, 0 0 .9em .2em rgba(255, 255, 255, .7); } 25% { box-shadow: -.1em -.1em 0 .17em #4aa8ff, .1em -.1em 0 .17em #ff5a7a, .1em .1em 0 .17em #ffd25a, -.1em .1em 0 .17em #5ee36b, 0 0 0 .4em #000, 0 0 .9em .2em rgba(255, 255, 255, .7); } 50% { box-shadow: -.1em -.1em 0 .17em #5ee36b, .1em -.1em 0 .17em #4aa8ff, .1em .1em 0 .17em #ff5a7a, -.1em .1em 0 .17em #ffd25a, 0 0 0 .4em #000, 0 0 .9em .2em rgba(255, 255, 255, .7); } 75% { box-shadow: -.1em -.1em 0 .17em #ffd25a, .1em -.1em 0 .17em #5ee36b, .1em .1em 0 .17em #4aa8ff, -.1em .1em 0 .17em #ff5a7a, 0 0 0 .4em #000, 0 0 .9em .2em rgba(255, 255, 255, .7); } }
.reduce-motion .lv.t-ascended { animation: none; }
/* the level board's looks: all eleven, two rows */
.lv-looks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; }
.lv-looks .mv.lk .i .lv { font-size: 12px; }
.lv-looks .mv.lk.on { box-shadow: 0 0 0 2px var(--lc); }
.lv-looks .mv.lk.cur { box-shadow: 0 0 0 3px var(--lc), 0 0 14px 2px color-mix(in srgb, var(--lc) 60%, transparent); }
@media (max-width: 760px) { .lv-looks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- the journey map (ui/squadui.js) ---------- */

/* ---------- the camp's squad card ---------- */
.squad-card { display: flex; flex-direction: column; gap: 2px; width: min(310px, 30vw); padding: 7px 10px 6px; border: none; border-radius: 14px; cursor: pointer; text-align: left; font-family: var(--font); color: var(--th-text); background: var(--th-card); box-shadow: 0 0 0 3px color-mix(in srgb, #ffb446 50%, var(--th-ring)), 0 0 0 6px var(--ink); }
.squad-card:active { transform: translateY(2px); }
.squad-card:focus-visible { outline: 4px solid #ffd25a; outline-offset: 2px; }
.sc-head { display: flex; align-items: center; gap: 6px; }
.sc-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--th-title); }
.sc-ic { font-size: 20px; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 600; color: var(--th-sub); }
.sc-foot b { color: #ffd27a; }
.dim { filter: grayscale(1) brightness(.6); opacity: .4; }
@media (max-width: 760px) { .squad-card { width: 200px; } .squad-card .sc-foot > span:first-child { display: none; } .sc-seats { gap: 4px; } .sc-seats i { width: 20px; height: 20px; font-size: 13px; } }

/* ---------- the squad board ---------- */
.squad-board .sb-journey { padding: 10px 12px; border-radius: 12px; background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink); }
.sb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sb-top b { font-size: 17px; color: var(--th-title); }
.sb-top small, .squad-board .hint, .modal .hint { font-size: 13px; font-weight: 600; color: var(--th-sub); }
.sb-next { margin: 4px 0; font-size: 16px; font-weight: 600; }
.sb-next b { color: #ffd27a; }
.sb-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sb-m { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 8px; border: none; border-radius: 12px; font-family: var(--font); color: var(--th-text); text-align: center; background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink); }
button.sb-m { cursor: pointer; }
button.sb-m:active { transform: translateY(2px); }
.sb-m.me { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 5px var(--ink); }
.sb-m.online { box-shadow: 0 0 0 3px #5ee36b, 0 0 0 5px var(--ink), 0 0 12px 2px rgba(94, 227, 107, .45); }
.sb-m b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; color: var(--th-title); }
.sb-m small { font-size: 12px; font-weight: 600; color: var(--th-sub); }
.sb-m .st.on { color: #8ff09a; }
.sb-add { border: 3px dashed color-mix(in srgb, var(--th-ring) 70%, transparent); background: transparent; box-shadow: none; }
.sb-add .fc { background: #2a3a1a; box-shadow: 0 0 0 3px #5ee36b, 0 0 0 5px var(--ink); }
.fa-row .fc, .new-friend .fc, .sb-m .fc, .member-card .fc, .add-friend .fc { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 46px; border-radius: 9px; background: color-mix(in srgb, var(--pc, #8a7a5a) 40%, #120c07); box-shadow: 0 0 0 3px var(--pc, #8a7a5a), 0 0 0 5px var(--ink); }
.fa-row .fc i, .new-friend .fc i, .sb-m .fc i, .member-card .fc i, .add-friend .fc i { font-style: normal; font-size: 24px; }
.fa-row .fc .lv, .new-friend .fc .lv, .sb-m .fc .lv, .member-card .fc .lv, .add-friend .fc .lv { position: absolute; right: -8px; bottom: -8px; }
/* the camp's squad card: who is playing right now */
.sc-live { display: flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #c8ffd0; background: rgba(40, 120, 50, .45); }
/* the squad board without a friends server */
.sb-net { margin: 12px 0 4px; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--th-sub); background: rgba(0, 0, 0, .22); }
/* a friend's news (member card, Ghost Report) */
.mc-news { margin: 0 auto 12px; padding: 0; max-width: 360px; list-style: none; text-align: left; font-size: 15px; }
.mc-news li { padding: 3px 0; }
.mc-news li::before { content: '⭐ '; }
.mc-news small { color: var(--th-sub); }
/* picking squadmates from your friends */
.pick-friend .sb-members { max-height: 46vh; overflow: auto; padding: 6px; margin-bottom: 8px; }
/* grown-ups: friends */
.friends-admin .fa-ok { color: #8ff09a; font-weight: 700; margin: 0 0 6px; }
.friends-admin .fa-off { color: #ffcf7a; font-weight: 700; margin: 0 0 6px; }
.fa-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 6px 0; border-radius: 12px; background: var(--th-tile); flex-wrap: wrap; }
.fa-row > span:not(.fc) { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.fa-row small { font-size: 13px; color: var(--th-sub); }
.fa-row .code { font-family: var(--pixel); font-size: 12px; color: #ffd25a; letter-spacing: 1px; }
.fa-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.fa-actions .ccode { width: 130px; padding: 8px 10px; border: none; border-radius: 10px; font-family: var(--pixel); font-size: 14px; text-transform: uppercase; color: #3a2a1a; background: #fff6c8; box-shadow: 0 0 0 3px var(--ink); }
.new-friend .fc { margin: 0 auto 12px; }
.fc.big { width: 76px; height: 68px; margin: 0 auto 12px; }
.fc.big i { font-size: 36px !important; }
.sb-me { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 14px 0 4px; padding: 10px; border-radius: 12px; text-align: center; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 2px color-mix(in srgb, #ffd25a 45%, transparent); }
.pn { font-size: 24px; color: #ffd25a; letter-spacing: .02em; }
.sb-me small { font-size: 13px; font-weight: 600; color: var(--th-sub); }
.gp-text { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gp-text p { margin: 0; font-size: 15px; line-height: 1.35; }
.gp-text p b { color: #ffd27a; }
.gp-text small { font-size: 13px; font-weight: 600; color: var(--th-sub); line-height: 1.3; }
.sb-tools { display: flex; justify-content: center; margin: 14px 0 4px; }

/* ---------- squad modals ---------- */
.modal.wide-modal .panel { width: min(640px, 94vw); }
.big-ic { display: block; font-size: 54px; line-height: 1.1; margin-bottom: 4px; }
.af-name { display: flex; justify-content: center; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.af-name span { min-width: 64px; padding: 6px 12px; border-radius: 12px; font-size: 20px; font-weight: 700; color: var(--th-sub); background: rgba(0, 0, 0, .3); box-shadow: 0 0 0 2px var(--ink); }
.af-name span.set { color: #ffd25a; }
.af-name span.cur { color: #fff; box-shadow: 0 0 0 3px #ffd25a, 0 0 12px 2px rgba(255, 210, 90, .6); animation: bump 1.4s ease-in-out infinite; }
.add-friend .sub { margin: 4px 0 10px; font-size: 17px; }
.af-grid { display: grid; gap: 8px; margin: 0 auto 6px; }
.af-grid.s1, .af-grid.s2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.af-grid.s3 { grid-template-columns: repeat(3, 72px); justify-content: center; }
.af-w, .af-k { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: none; border-radius: 12px; cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--th-text); background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 rgba(0, 0, 0, .3); }
.af-w i { font-style: normal; font-size: 26px; line-height: 1.1; }
.af-k { justify-content: center; height: 58px; font-size: 26px; }
.af-k.del { font-size: 22px; }
.af-w:active, .af-k:active { transform: translateY(2px); }
.add-friend.found .pn { margin: 0 0 10px; }
.member-card .nick-l { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 16px; font-weight: 700; font-size: 17px; }
.member-card .nick-l small { font-size: 13px; font-weight: 600; color: var(--th-sub); }
.member-card .nick { width: min(260px, 70vw); padding: 10px; border: none; border-radius: 10px; font-family: var(--font); font-size: 22px; font-weight: 700; text-align: center; color: #3a2a1a; background: #fff6c8; box-shadow: 0 0 0 3px var(--ink); }
/* A phone held sideways: the friend's card puts who they are beside what they did and their
   nickname, and adding a friend shows its words in two rows and its number pad in two, so both
   fit with no scrolling (owner rule, CLAUDE.md) */
@media (max-height: 500px) and (orientation: landscape) {
  .modal.member .panel, .modal.add-friend-modal .panel { width: min(780px, 96vw); }
  .modal .member-card { display: flex; align-items: center; gap: 22px; }
  .member-card .mc-a, .member-card .mc-b { flex: 1 1 0; min-width: 0; }
  .member-card .mc-a .hint { margin-bottom: 6px; }
  .member-card .mc-b .mc-news { margin-bottom: 8px; font-size: 14px; }
  .member-card .nick-l { margin: 4px 0 6px; }
  .af-grid.s1, .af-grid.s2 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .af-w { padding: 5px 2px; font-size: 13px; }
  .af-w i { font-size: 22px; }
  .af-grid.s3 { grid-template-columns: repeat(6, 64px); gap: 6px; }
  .af-grid.s3 .af-k { height: 50px; font-size: 24px; }
  .af-grid.s3 .af-k[data-k="0"] { order: 1; }
  .af-grid.s3 .af-k.del { order: 2; } /* (1 to 6, then 7 8 9 0 ⌫) */
  .add-friend .sub { margin: 2px 0 8px; font-size: 15px; }
  .af-name { margin-bottom: 4px; }
  .af-name span { padding: 4px 10px; font-size: 17px; }
}
.gr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.gr-stats .stat b { color: #ffd27a; }
.wr-chest { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 auto 14px; padding: 10px 18px; max-width: 360px; border-radius: 14px; font-size: 30px; font-weight: 700; color: #ffe58a; background: linear-gradient(#4a3a14, #2a2008); box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 26px rgba(255, 210, 90, .45); }
.wr-chest small { font-size: 13px; color: var(--th-sub); }
.wr-chest .gem-ico { width: 28px; height: 28px; vertical-align: -4px; }
.squad-intro .how-card { margin: 0 0 14px; text-align: left; }
/* the squad on the rest card and the results */
.sq-line { margin: 8px 0; padding: 6px 10px 2px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.sq-l-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.sq-l-top small { font-size: 13px; font-weight: 600; color: var(--th-sub); }
.sq-l-top small b { color: #ffd27a; }
.sq-l-top.more { padding: 4px 0 6px; border-top: 1px solid rgba(255, 255, 255, .08); }
/* several squads (up to 3): the camp card's rows, the board's tabs, the HUD chip's +n */
.squad-card.multi { gap: 4px; }
.sc-row, .sq-row { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--th-sub); }
.sc-row .sc-ic, .sq-row .sc-ic { font-size: 17px; }
.sc-bar { flex: 1; min-width: 40px; height: 8px; border-radius: 4px; background: #120c07; box-shadow: 0 0 0 2px var(--ink); overflow: hidden; }
.sc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd27a, #ff9a2a); }
.sc-lm { font-size: 15px; filter: drop-shadow(0 0 4px rgba(255, 200, 90, .55)); }
.sq-rows { display: flex; flex-direction: column; gap: 8px; margin: 4px auto 12px; max-width: 460px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.sq-row b { flex: 0 1 auto; min-width: 0; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--th-title); }
.sq-row small { min-width: 54px; text-align: right; font-size: 13px; color: var(--th-sub); }
.sb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.sb-tab { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: none; border-radius: 10px; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--th-sub); background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink); }
.sb-tab span { font-size: 18px; }
.sb-tab.on { color: var(--th-title); background: color-mix(in srgb, #ffb446 26%, var(--th-tile)); box-shadow: 0 0 0 3px #ffb446, 0 0 0 5px var(--ink); }
.sb-tab.new { color: #8ff09a; background: transparent; box-shadow: 0 0 0 2px var(--ink); border: 2px dashed color-mix(in srgb, #5ee36b 60%, transparent); }
.sb-tab:active { transform: translateY(2px); }
.sb-many { margin: 10px 2px 0; }
.sb-tools { gap: 10px; flex-wrap: wrap; }
/* the week's wrap-up */
.week-results h2 { margin-bottom: 10px; }
.wr-you { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.wr-t { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 96px; padding: 8px 10px 7px; border-radius: 14px; background: var(--th-tile); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 5px var(--ink); animation: popIn .45s cubic-bezier(.2, 1.8, .4, 1) both; }
.wr-t i { font-style: normal; font-size: 26px; line-height: 1.1; }
.wr-t b { font-size: 28px; line-height: 1.1; color: #ffd27a; }
.wr-t span { font-size: 13px; font-weight: 700; color: var(--th-sub); }
.wr-squads p { margin: 0 0 12px; font-size: 17px; }
.wr-stars { display: flex; flex-direction: column; gap: 6px; margin: 0 auto 12px; max-width: 460px; }
.wr-s { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 8px; border-radius: 12px; text-align: left; background: rgba(0, 0, 0, .22); }
.wr-s > span:not(.fc) { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.wr-s > i { font-style: normal; font-size: 22px; }
.wr-s .fc { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--pc, #8a7a5a) 40%, #120c07); box-shadow: 0 0 0 3px var(--pc, #8a7a5a), 0 0 0 5px var(--ink); }
.wr-s .fc i { font-style: normal; font-size: 19px; }
.wr-s .fc .lv { position: absolute; right: -8px; bottom: -8px; transform: scale(.85); }
@media (max-height: 520px) { .wr-t { min-width: 82px; padding: 5px 8px; } .wr-t i { font-size: 20px; } .wr-t b { font-size: 22px; } .wr-ic { font-size: 28px; } .wr-stars, .sq-rows { margin-bottom: 8px; } .week-results .wr-s:nth-child(n+3) { display: none; } }
.sc-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.1; color: var(--th-title); }
.sc-nm .sc-bar { flex: none; height: 6px; }
.week-results h2 { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wr-ic { font-size: 40px; line-height: 1; }
/* A screen held sideways (a phone, or a laptop with lots to show): the wrap-up and the away report
   flow into two columns, which the browser balances, under their title, so the chest and the
   button show with no scrolling (owner rule, CLAUDE.md). */
@media (orientation: landscape) and (max-height: 800px) {
  .modal.week-modal .panel, .modal.ghost-modal .panel { width: min(860px, 96vw); }
  .modal .week-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'h h' 'a b' 'c b'; grid-template-rows: auto auto 1fr; column-gap: 20px; align-items: start; }
  .week-results > h2 { grid-area: h; }
  .week-results > .wr-a { grid-area: a; }
  .week-results > .wr-b { grid-area: b; }
  .week-results > .wr-chest, .week-results > .wr-c { grid-area: c; }
  .modal .ghost-report { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 20px; }
  .ghost-report > * { flex: 1 1 100%; }
  .ghost-report > .gr-a, .ghost-report > .gr-b { flex: 1 1 0; min-width: 0; }
  .week-results .sq-rows, .ghost-report .sq-rows { margin-top: 0; }
}
/* ...and on a phone, all of it smaller */
@media (max-height: 520px) and (orientation: landscape) {
  .week-results h2 { margin: 0 0 6px; font-size: 22px; }
  .week-results .wr-ic { font-size: 24px; }
  .week-results .wr-gems, .ghost-report .gr-gems { margin: 4px auto 8px; padding: 4px 18px 3px; font-size: 26px; }
  .week-results .wr-gems .gem-ico, .ghost-report .gr-gems .gem-ico { width: 24px; height: 24px; }
  .week-results .wr-gems > span:not(.gem-ico), .ghost-report .gr-gems small { font-size: 12px; }
  .week-results .wr-you { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
  .week-results .wr-t { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; min-width: 0; padding: 3px 10px 4px; }
  .week-results .wr-t span { grid-column: 1 / -1; font-size: 12px; }
  .week-results .wr-t i { font-size: 18px; }
  .week-results .wr-t b { font-size: 21px; }
  .week-results .sq-rows, .ghost-report .sq-rows { margin-bottom: 8px; padding: 5px 8px; gap: 4px; }
  .week-results .wr-stars { gap: 4px; margin-bottom: 8px; }
  .week-results .wr-s { padding: 3px 8px 3px 6px; }
  .week-results .wr-s > span:not(.fc) { font-size: 13px; }
  .week-results .wr-chest { margin: 0 auto 4px; padding: 4px 12px; font-size: 22px; }
  .week-results .wr-chest small { font-size: 12px; }
  .modal .ghost-report { justify-content: center; }
  .ghost-report > .big-ic { flex: 0 0 auto; margin: 0 8px 0 0; font-size: 30px; } /* (the ghost beside the title) */
  .ghost-report > h2 { flex: 0 1 auto; margin-bottom: 2px; font-size: 24px; }
  .ghost-report .hint { margin-bottom: 6px; }
  .ghost-report p { margin-bottom: 8px; font-size: 15px; }
  .ghost-report .newbadge { margin: 2px; padding: 3px 10px; gap: 6px; font-size: 13px; }
  .ghost-report .mc-news { margin-bottom: 6px; font-size: 13px; }
  .ghost-report .mc-news li { padding: 1px 0; }
}
/* (the smallest phones held sideways: smaller still) */
@media (max-height: 400px) and (orientation: landscape) {
  .ghost-report p { margin-bottom: 6px; font-size: 13px; }
  .ghost-report .newbadge { padding: 2px 8px; font-size: 12px; }
  .ghost-report .gr-gems { padding: 2px 14px; font-size: 22px; }
  .ghost-report .mc-news { font-size: 12px; }
  .week-results .wr-chest { font-size: 20px; }
  .week-results .wr-chest small { display: none; }
}
/* a phone held upright: the wrap-up's three numbers side by side, smaller name badges in the away
   report, so both fit too */
@media (orientation: portrait) and (max-width: 700px) {
  .week-results .wr-you { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .week-results .wr-t { min-width: 0; padding: 6px 4px 5px; }
  .week-results .wr-t i { font-size: 20px; }
  .week-results .wr-t b { font-size: 22px; }
  .week-results .wr-t span { font-size: 12px; }
  .ghost-report .newbadge, .results .newbadge { margin: 2px; padding: 3px 10px; gap: 6px; font-size: 13px; }
  .results { padding: 16px 14px 12px; }
  .results .r-gems { margin-bottom: 8px; }
  .results .chips { margin: 4px 0; }
}
/* ---------- your gold pet's gold (game/lessonjar.js): every gold puzzle solved feeds it ---------- */
/* The HUD's corner box: your pet's picture filling with gold, what feeding it full gives on its side */
.lesson-jar { position: relative; align-self: flex-start; display: flex; align-items: center; justify-content: center; padding: 5px 7px 3px; border-radius: 14px; background: var(--th-card); box-shadow: 0 0 0 3px color-mix(in srgb, #ffd25a 55%, var(--th-ring)), 0 0 0 6px var(--ink); --f: 0; }
.lesson-jar[hidden] { display: none; }
/* Your gold pet filling with gold (game/lessonjar.js; it was a jar, then a crown): its picture dark,
   and the same picture over it shown from the bottom up (--f: 0 to 1), so the gold rises in it. (The
   mini-jar is the same, at camp.) The pictures are <img>s (ui/heroshot.js petShot), or the pet's emoji
   until it can be drawn. */
.lesson-jar .jar, .mini-jar { position: relative; display: inline-block; line-height: 1; font-style: normal; }
.lesson-jar .jar { width: 40px; height: 36px; font-size: 34px; }
.lesson-jar .jar i, .mini-jar i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; line-height: 1; }
.lesson-jar .jar img, .mini-jar img { display: block; width: 1.15em; height: 1.15em; object-fit: contain; pointer-events: none; }
.lesson-jar .jar img { width: 40px; height: 40px; }
/* (a picture: its empty part dim but still your pet, not a black blob) */
.mini-jar.pic .e, .lesson-jar .jar .e:has(img) { filter: grayscale(1) brightness(.5) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000); opacity: .85; }
.lesson-jar .jar .e, .mini-jar .e { filter: grayscale(1) brightness(.42) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000); opacity: .9; }
.lesson-jar .jar .fill, .mini-jar .fill { -webkit-clip-path: inset(calc(8% + (1 - var(--f)) * 92%) 0 0 0); clip-path: inset(calc(8% + (1 - var(--f)) * 92%) 0 0 0); filter: drop-shadow(0 0 3px rgba(255, 210, 90, .9)); transition: clip-path .5s cubic-bezier(.2, 1.4, .4, 1), -webkit-clip-path .5s cubic-bezier(.2, 1.4, .4, 1); }
.lesson-jar.full .jar .fill, .mini-jar.full .fill { -webkit-clip-path: none; clip-path: none; animation: petFull 1.8s ease-in-out infinite; } /* (full: nothing to cut off, so its glow is round) */
@keyframes petFull { 50% { filter: drop-shadow(0 0 7px #ffe27a) drop-shadow(0 0 14px rgba(255, 200, 60, .9)) brightness(1.15); } } /* (fed full: it glows) */
.reduce-motion .lesson-jar.full .jar .fill, .reduce-motion .mini-jar.full .fill { animation: none; }
/* gold (game/lessonjar.js WONDER): a shiny gold drop with a sparkle, over every gold Lesson Keeper,
   on its puzzle, and flying into your gold pet. Pure CSS, so it looks the same on every device. */
.star-ico { position: relative; display: inline-block; width: .9em; height: .9em; margin: 0 .05em; font-style: normal; line-height: 1; vertical-align: -0.1em; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fffdf0 0 10%, #ffe68a 20%, #ffc93a 48%, #e8901a 76%, #9a5208 100%);
  box-shadow: 0 0 0 .07em #3a2000, inset -.06em -.08em .1em rgba(120, 60, 0, .55), 0 0 .3em rgba(255, 205, 80, .85); }
.star-ico::after { content: ''; position: absolute; right: -.16em; top: -.2em; width: .48em; height: .48em; background: #fffbe8;
  -webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.lesson-jar .jar-prize { position: absolute; right: -11px; bottom: -7px; z-index: 2; font-size: 17px; line-height: 1; filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0 0 4px rgba(255, 210, 90, .9)); animation: prizeBob 2.4s ease-in-out infinite; }
.lesson-jar .jar-prize[hidden] { display: none; }
@keyframes prizeBob { 50% { transform: translateY(-2px) rotate(-8deg); } }
.lesson-jar.slosh .jar { animation: jarSlosh .6s cubic-bezier(.2, 1.8, .4, 1); }
.lesson-jar.full { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 16px 3px rgba(255, 210, 90, .6); }

.lesson-jar.burst .jar { animation: jarBurst 1.6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes jarSlosh { 0% { transform: scale(1); } 35% { transform: scale(1.25, .85) rotate(-6deg); } 70% { transform: scale(.95, 1.08) rotate(4deg); } }
@keyframes jarBurst { 0% { transform: scale(1); } 20% { transform: scale(1.3) rotate(-10deg); } 30% { transform: scale(1.3) rotate(10deg); } 40% { transform: scale(1.35) rotate(-8deg); } 50% { transform: scale(1.8); filter: brightness(2.2); } 62% { transform: scale(.7); } 100% { transform: scale(1); } }
.jar-drop { position: fixed; z-index: 41; width: 22px; height: 22px; display: grid; place-items: center; pointer-events: none; font-size: 22px; line-height: 1; filter: drop-shadow(0 0 6px rgba(255, 215, 90, .95)); }
.jar-spark { position: fixed; z-index: 31; font-size: 22px; line-height: 1; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 220, 120, .9)); }
.tag.lesson .nm { color: #ffe08a; }
.tag.lesson .scroll { font-size: 26px; }
/* a lesson puzzle won: the corner jar itself grows and steps out (hud.jarFill), the gold pours in,
   a label under it says why, and it shrinks back into its place */
.lesson-jar.pouring { z-index: 30; box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 18px 4px rgba(255, 210, 90, .7); }
.jar-why { position: absolute; z-index: 30; transform: translate(-50%, 0) scale(.6); display: flex; flex-direction: column; align-items: center; font-size: 20px; font-weight: 700; color: #fff3c8; text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 200, 80, .8); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s, transform .3s cubic-bezier(.2, 1.8, .4, 1); }
.jar-why small { font-size: 16px; color: #ffd25a; }
.jar-why.said { opacity: 1; transform: translate(-50%, 0) scale(1); }
.jar-drop.big { width: 30px; height: 30px; font-size: 30px; filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0 0 8px rgba(255, 215, 90, 1)); }
@media (max-height: 520px) { .jar-why { font-size: 16px; } .jar-why small { font-size: 13px; } }
/* ---------- the squad chest (ui/chest.js): an open chest whose pile of gems rises as it fills ---------- */
.chest { --w: 56px; --f: 0; --c1: #8a5a2e; --c2: #5a3a1c; --c3: #c8924a; position: relative; display: inline-block; flex: none; width: var(--w); height: calc(var(--w) * .82); vertical-align: middle; }
.chest.xs { --w: 26px; } .chest.sm { --w: 44px; } .chest.big { --w: 92px; }
.chest > i { position: absolute; display: block; }
.chest .lid { left: 6%; right: 6%; top: 10%; height: 42%; border-radius: 45% 45% 8% 8% / 80% 80% 12% 12%; background: linear-gradient(var(--c3), var(--c1)); box-shadow: inset 0 calc(var(--w) * -.05) 0 var(--c2), 0 0 0 calc(var(--w) * .03) #1a1009; }
.chest .heap { left: 12%; right: 12%; bottom: 44%; height: calc(var(--f) * 46% + 2%); border-radius: 50% 50% 10% 10% / 90% 90% 10% 10%; background: radial-gradient(circle at 28% 62%, #7af0ff 0 10%, transparent 11%), radial-gradient(circle at 70% 45%, #ff8ad8 0 9%, transparent 10%), radial-gradient(circle at 50% 30%, #fffbe0 0 8%, transparent 9%), linear-gradient(#fff0a0, #ffc23a 55%, #e8901a); box-shadow: 0 0 calc(var(--w) * .14) rgba(255, 210, 90, calc(var(--f) * .9)); transition: height .5s cubic-bezier(.2, 1.4, .4, 1); }
.chest .body { left: 4%; right: 4%; bottom: 0; height: 50%; border-radius: 6% 6% 14% 14%; background: linear-gradient(var(--c1), var(--c2)); box-shadow: inset 0 calc(var(--w) * .05) 0 var(--c3), 0 0 0 calc(var(--w) * .03) #1a1009; }
.chest .body::before { content: ''; position: absolute; left: 0; right: 0; top: 40%; height: 16%; background: var(--c2); }
.chest .lock { left: 42%; width: 16%; bottom: 16%; height: 20%; border-radius: 3px; background: #ffe58a; box-shadow: 0 0 0 calc(var(--w) * .02) #1a1009; }
.chest.t-silver { --c1: #a8b4c2; --c2: #6c7a8a; --c3: #eef4fa; }
.chest.t-gold { --c1: #e2a82a; --c2: #a8741c; --c3: #fff0a0; }
.chest.t-crystal { --c1: #6ad0f0; --c2: #3a8ab8; --c3: #e8fbff; filter: drop-shadow(0 0 calc(var(--w) * .1) rgba(122, 215, 255, .8)); }
.cv { color: #ffd27a; }
.sq-row .chest, .sc-row .chest { margin: 0 2px; }
.grew { font-style: normal; font-weight: 800; color: #8ff09a; }
/* the camp card: the chest, and what it is worth */
.sc-chest { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0; }
.sc-chest > span { display: flex; flex-direction: column; min-width: 0; }
.sc-chest b { font-size: 15px; color: var(--th-title); white-space: nowrap; }
.sc-chest small { font-size: 12px; font-weight: 600; color: var(--th-sub); }
.squad-card .gem-ico, .sq-rows .gem-ico, .sb-chest .gem-ico { width: 16px; height: 16px; vertical-align: -3px; }
.sc-row small { min-width: 44px; text-align: right; }
/* the squad board: the chest, what it is worth and its looks */
.sbc-main { display: flex; align-items: center; gap: 18px; margin: 8px 6px 4px; }
.sbc-main > div { display: flex; flex-direction: column; gap: 2px; }
.sbc-v { font-size: 28px; font-weight: 800; }
.sbc-v .gem-ico { width: 26px !important; height: 26px !important; }
.sbc-n { font-size: 16px; font-weight: 700; color: var(--th-title); }
.sbc-main small { font-size: 13px; font-weight: 600; color: var(--th-sub); }
.sbc-tiers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 4px; }
.sbc-tiers > span { display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--th-sub); opacity: .5; background: rgba(0, 0, 0, .2); }
.sbc-tiers > span.on { opacity: .85; }
.sbc-tiers > span.now { opacity: 1; color: #ffe08a; box-shadow: 0 0 0 2px #ffd25a; }
.sbc-tiers > i { font-style: normal; color: var(--th-sub); }
/* 💎 first: the away report, the rest card, the results, the wrap-up */
.gr-gems, .r-gems, .wr-gems { display: flex; flex-direction: column; align-items: center; margin: 4px auto 12px; padding: 8px 22px 6px; border-radius: 16px; width: fit-content; font-size: 34px; font-weight: 800; color: #ffe58a; background: linear-gradient(#3a2c10, #221806); box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 22px rgba(255, 210, 90, .35); animation: popIn .45s cubic-bezier(.2, 1.8, .4, 1) both; }
.gr-gems > span, .r-gems, .wr-gems { line-height: 1.1; }
.r-gems, .wr-gems { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 8px; align-items: center; }
.r-gems > span:not(.gem-ico), .wr-gems > span:not(.gem-ico), .gr-gems small { flex-basis: 100%; text-align: center; font-size: 14px; font-weight: 700; color: var(--th-sub); }
.gr-gems .gem-ico, .r-gems .gem-ico, .wr-gems .gem-ico { width: 32px; height: 32px; vertical-align: -6px; }
.wr-chest { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.wr-chest small { flex-basis: 100%; text-align: center; }
/* your pet's gold without numbers: the puzzle chip's little bar */
.pzj { display: inline-block; width: 34px; height: 8px; margin-left: 5px; border-radius: 4px; vertical-align: 1px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.pzj i { display: block; height: 100%; background: linear-gradient(90deg, #ffe58a, #ffc23a); }
.chest.ic { --w: 22px; vertical-align: -4px; }
.how-card .chest.ic { --w: 26px; }
/* your gold pet filling, at camp (the lesson card, trophies, the lesson result): the same as in
   adventures (above), what feeding it full gives on its side */
.mini-jar { flex: none; width: 32px !important; height: 30px; font-size: 28px !important; }
.mini-jar.mid { width: 52px !important; height: 46px; font-size: 44px !important; }
.mini-jar.big { display: block; width: 90px !important; height: 80px; margin: 6px auto 6px; font-size: 76px !important; }
.mini-jar .mj-prize { position: absolute; z-index: 2; left: auto; top: auto; transform: none; right: -14px; bottom: -6px; font-style: normal; font-size: 16px; line-height: 1; filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0 0 4px rgba(255, 210, 90, .9)); animation: prizeBob 2.4s ease-in-out infinite; }
.mini-jar.mid .mj-prize { right: -26px; bottom: -4px; font-size: 22px; }
.mini-jar.big .mj-prize { right: -34px; font-size: 32px; }
/* ---------- squads with seats (ui/squadui.js): your 5 seats and their codes, friends' squads ---------- */
/* the camp card while nobody is in a squad yet: it shows the empty seats and glows */
.squad-card.invite { gap: 4px; animation: inviteGlow 2.2s ease-in-out infinite; }
/* its big "Squad" title, so the corner reads as the squad's place at a glance */
.sc-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: -1px 0 1px; }
.sc-title > span:first-child { font-family: var(--pixel); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #ffd27a; text-shadow: 2px 2px 0 #000; }
.sc-mid { display: flex; align-items: center; gap: 6px; }
.sc-mid .sc-v { margin-left: auto; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sc-seats { display: flex; gap: 6px; margin: 2px 0; }
.sc-seats i { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 16px; font-weight: 800; color: #ffd27a; outline: 2px dashed #ffd27a; outline-offset: -2px; }
.sc-seats i.m { font-size: 13px; outline: none; background: color-mix(in srgb, var(--pc, #8a7a5a) 45%, #120c07); box-shadow: 0 0 0 2px var(--pc, #8a7a5a), 0 0 0 4px var(--ink); }
.sc-seats i.m.on::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: #5ee36b; box-shadow: 0 0 0 2px var(--ink); }
@keyframes inviteGlow { 50% { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 18px 4px rgba(255, 210, 90, .55); } }
.sb-own { padding: 10px 12px 12px; border-radius: 12px; background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink); }
.sb-name { display: flex; align-items: center; gap: 8px; }
.sb-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; color: var(--th-title); }
.sb-name small { flex: 1; font-size: 13px; font-weight: 600; color: var(--th-sub); }
.sb-chestline { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.sb-chestline > span { display: flex; flex-direction: column; }
.sb-chestline b { font-size: 16px; }
.sb-chestline small { font-size: 13px; font-weight: 600; color: var(--th-sub); }
.sb-how { margin: 8px 0 10px; font-size: 15px; font-weight: 600; }
.sb-seats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 12px 4px 8px; border: none; border-radius: 12px; font-family: var(--font); color: var(--th-text); text-align: center; background: rgba(0, 0, 0, .25); box-shadow: 0 0 0 3px var(--ink); }
button.seat { cursor: pointer; }
button.seat:active { transform: translateY(2px); }
.seat b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--th-title); }
.seat small { font-size: 12px; font-weight: 600; color: var(--th-sub); }
.seat.me { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 5px var(--ink); }
.seat.empty { background: transparent; box-shadow: none; outline: 3px dashed color-mix(in srgb, #ffd25a 55%, transparent); outline-offset: -3px; }
.seat.empty { justify-content: center; }
.seat.empty .tk { display: flex; align-items: center; justify-content: center; width: 52px; height: 46px; font-size: 30px; }
.seat.empty small { color: #ffd27a; font-size: 18px; font-weight: 800; }
/* an empty seat's code, on the seat: its 6 pictures in two rows of 3 */
.seat-code { padding: 6px 4px; border-radius: 10px; font-size: 21px; line-height: 1.2; background: #fff6c8; box-shadow: 0 0 0 3px var(--ink), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.seat-code i { display: inline-block; width: 1.3em; font-style: normal; text-align: center; }
.sb-name .sb-chest { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sb-chest > span { display: flex; flex-direction: column; align-items: flex-start; }
.sb-chest b { font-size: 16px; color: var(--th-title); white-space: nowrap; }
.sb-name .sb-chest small { flex: none; font-size: 12px; }
.seat.online { box-shadow: 0 0 0 3px #5ee36b, 0 0 0 5px var(--ink), 0 0 12px 2px rgba(94, 227, 107, .45); }
.seat .st.on { color: #8ff09a; }
/* a friend who just sat down while the board was open (ui/squadui.js watchBoard) */
.seat.fresh { animation: seatIn .8s cubic-bezier(.3, 1.6, .5, 1), seatGlow 1s ease-in-out .8s 3; }
@keyframes seatIn { from { transform: scale(.4); opacity: 0; } }
@keyframes seatGlow { 50% { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 5px var(--ink), 0 0 22px 6px rgba(255, 210, 90, .8); } }
.seat .fc, .sb-jq .fc { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 46px; border-radius: 9px; background: color-mix(in srgb, var(--pc, #8a7a5a) 40%, #120c07); box-shadow: 0 0 0 3px var(--pc, #8a7a5a), 0 0 0 5px var(--ink); }
.seat .fc i, .sb-jq .fc i { font-style: normal; font-size: 24px; }
.seat .fc .lv, .sb-jq .fc .lv { position: absolute; right: -8px; bottom: -8px; }
.sb-joined { display: flex; flex-direction: column; gap: 10px; }
.sb-jq { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink); }
.jq-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jq-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; color: var(--th-title); }
.jq-n small { font-size: 13px; font-weight: 600; color: var(--th-sub); }
.jq-faces { display: flex; gap: 8px; }
.jq-f { padding: 0; border: none; background: none; cursor: pointer; }
.sb-jq .jq-f .fc { width: 36px; height: 32px; }
.sb-jq .jq-f .fc i { font-size: 17px; }
.sb-jq .jq-f .fc .lv { display: none; }
/* an asleep squadmate (game/squad.js isAsleep): their hero greyed out, with a 💤 */
.seat.asleep .fc, .jq-f.asleep .fc, .tp-p.asleep .fc, .wr-s.asleep .fc, .sleep-card .fc { --pc: #6d7380 !important; position: relative; }
.seat.asleep .fc i, .jq-f.asleep .fc i, .tp-p.asleep .fc i, .wr-s.asleep .fc i, .sleep-card .fc i { filter: grayscale(.8) brightness(.85); }
.seat.asleep .fc::after, .jq-f.asleep .fc::after, .tp-p.asleep .fc::after, .wr-s.asleep .fc::after, .sleep-card .fc::after { content: '💤'; position: absolute; top: -13px; right: -11px; font-size: 18px; }
.jq-f.asleep .fc::after { top: -9px; right: -8px; font-size: 13px; }
.sleep-card .fc::after { top: -20px; right: -22px; font-size: 32px; }
.seat.asleep .st, .tp-p.asleep .st { color: #a9c8ff; }
.tp-p.asleep { cursor: default; }
.tp-p.asleep:active { transform: none; }
.sc-seats i.m.zz { --pc: #6d7380 !important; opacity: .7; }
.btn.keep { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } /* (the sleep card's Keep it for <name>: a long name on a phone) */
.jq-v { font-size: 13px; font-weight: 700; white-space: nowrap; }
.sb-join { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: none; border-radius: 12px; cursor: pointer; text-align: left; font-family: var(--font); color: var(--th-text); background: transparent; outline: 3px dashed color-mix(in srgb, #5ee36b 60%, transparent); outline-offset: -3px; }
.sb-join:active { transform: translateY(2px); }
.sb-join span { font-size: 26px; }
.sb-join b { font-size: 17px; color: var(--th-title); }
.sb-join small { flex: 1; text-align: right; font-size: 13px; font-weight: 600; color: var(--th-sub); }
/* a seat's code: 6 pictures in two groups of 3 (no words) */
.tk-code { display: flex; justify-content: center; align-items: stretch; gap: 8px; margin: 10px 0; }
.tk-code span { display: flex; align-items: center; justify-content: center; width: 68px; min-height: 68px; border-radius: 12px; background: #fff6c8; box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 rgba(0, 0, 0, .12); }
.tk-code i { font-style: normal; font-size: 40px; line-height: 1.05; }
.tk-code em { width: 10px; }
.tk-code.slots span { min-height: 56px; width: 56px; background: rgba(0, 0, 0, .3); }
.tk-code.slots i { font-size: 32px; }
.seat-ticket .sub, .code-pick .sub { margin: 4px 0 4px; font-size: 17px; }
/* the 30 pictures to tap, always in the same order (catalog.js SEAT_PICS) */
.cp-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin: 6px auto 8px; }
.cp-p { display: flex; align-items: center; justify-content: center; padding: 7px 2px 9px; border: none; border-radius: 10px; cursor: pointer; font-family: var(--font); color: var(--th-text); background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 rgba(0, 0, 0, .3); }
.cp-p:active { transform: translateY(2px); }
.cp-p:disabled { opacity: .45; cursor: default; transform: none; }
.cp-p i { font-style: normal; font-size: 30px; line-height: 1.1; }
@media (max-width: 760px) {
  .sb-seats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seat-code { font-size: 18px; }
  .cp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cp-p { padding: 5px 2px 7px; }
  .tk-code { gap: 5px; } .tk-code span { width: 48px; min-height: 50px; } .tk-code i { font-size: 30px; }
  .tk-code.slots span { width: 44px; min-height: 46px; } .tk-code.slots i { font-size: 26px; }
  .sb-jq { flex-wrap: wrap; } .jq-faces { order: 5; }
  .sb-join small { display: none; }
}
/* the squad board on a phone held sideways: your squad and the friends' squads in one screen,
   nothing to scroll (smaller seats, the two "Join" places side by side) */
@media (max-height: 520px) {
  .squad-board { padding-top: 14px; padding-bottom: 12px; }
  .squad-board h2 { font-size: 23px; }
  .squad-board .close { top: 10px; }
  .squad-board .scroll { padding-top: 2px; }
  .sb-own { padding: 7px 10px 9px; }
  .sb-name { gap: 6px; margin-bottom: 6px; }
  .sb-name b { font-size: 17px; }
  .sb-seats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } /* (all 6 seats in one row, on small phones too) */
  .sb-jq { flex-wrap: nowrap; } .jq-faces { order: 0; }
  .seat { gap: 1px; padding: 6px 3px 4px; }
  .seat .fc { width: 42px; height: 36px; }
  .seat .fc i { font-size: 20px; }
  .seat b { font-size: 13px; }
  .seat small { font-size: 11px; }
  .seat.empty .tk { width: 42px; height: 34px; font-size: 24px; }
  .seat.empty small { font-size: 15px; line-height: 1; }
  .seat-code { padding: 3px 3px; font-size: 16px; }
  .squad-board .slot-row { margin: 8px 0 4px; font-size: 14px; }
  .sb-joined { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .sb-joined .sb-jq { flex: 1 1 100%; padding: 6px 10px; }
  .sb-join { flex: 1 1 180px; padding: 8px 12px; }
  .sb-join span { font-size: 20px; }
  .sb-join b { font-size: 15px; }
  .squad-board .sb-net { margin-top: 8px; padding: 6px 10px; font-size: 13px; }
}
/* a sideways phone: all 30 pictures in 3 rows, big enough for small fingers, with nothing to
   scroll (the line of help makes room for them) */
@media (max-height: 520px) {
  .cp-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); margin: 8px auto 4px; } .cp-p i { font-size: 25px; } .cp-p { padding: 5px 2px 8px; }
  .tk-code { margin: 6px 0; } .tk-code span { min-height: 50px; } .tk-code i { font-size: 30px; } .tk-code.slots span { min-height: 40px; } .tk-code.slots i { font-size: 24px; }
  .code-pick .sub { display: none; }
}
@media (max-height: 380px) { .cp-p i { font-size: 22px; } .cp-p { padding: 4px 2px 6px; } .tk-code { margin: 4px 0; } }
/* ---------- who plays with you (ui/teamui.js): your team, and all your squads at once ---------- */
.tp-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 8px 0 6px; }
.tp-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 104px; padding: 12px 4px 7px; border: none; border-radius: 12px; font-family: var(--font); color: var(--th-text); text-align: center; background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink); }
button.tp-c { cursor: pointer; }
button.tp-c:active { transform: translateY(2px); }
.tp-c.me { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 5px var(--ink); }
.tp-c.live { box-shadow: 0 0 0 3px #5ee36b, 0 0 0 5px var(--ink), 0 0 12px 2px rgba(94, 227, 107, .45); }
.tp-c.ghost { opacity: .85; } /* (its picture greyed: .fc.ghost, css/avatars.css) */
.tp-c.wisp { opacity: .7; }
.tp-c .fc.wisp { --pc: #9ff0ff; }
.tp-c b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--th-title); }
.tp-c small { font-size: 11px; font-weight: 700; color: var(--th-sub); white-space: nowrap; }
.tp-c .x { position: absolute; right: -7px; top: -7px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 900; color: #fff; background: #c8423a; box-shadow: 0 0 0 2px var(--ink); }
.tp-nx { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); padding: 1px 7px; border-radius: 8px; font-style: normal; font-size: 10px; font-weight: 800; white-space: nowrap; color: #0c2a10; background: #8ff09a; box-shadow: 0 0 0 2px var(--ink); }
.tp-how { margin: 6px 0 10px; text-align: center; font-size: 14px; font-weight: 600; color: var(--th-sub); }
.tp-how b { color: #8ff09a; }
.tp-squads { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.tp-sq { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--th-ring) 50%, transparent); }
.tp-sq .hint { margin: 4px 6px; }
.tp-sqh { display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.tp-sqh b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--th-title); }
.tp-sqh small { font-size: 11px; font-weight: 800; color: #ffd27a; }
.tp-p { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 8px; border: none; border-radius: 10px; cursor: pointer; text-align: left; font-family: var(--font); color: var(--th-text); background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink); }
.tp-p:active { transform: translateY(2px); }
.tp-p.on { background: color-mix(in srgb, #ffd25a 16%, var(--th-tile)); box-shadow: 0 0 0 3px #ffd25a, 0 0 0 5px var(--ink); }
.tp-p .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-p .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--th-title); }
.tp-p .nm small { font-size: 12px; font-weight: 700; color: var(--th-sub); white-space: nowrap; }
.tp-p.live .st, .tp-c.live .st { color: #8ff09a; }
.tp-p .ck { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; font-weight: 900; color: var(--th-sub); background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 2px var(--ink); }
.tp-p.on .ck { color: #0c2a10; background: #5ee36b; }
.tp-yu { font-size: 12px; }
.tp-c .fc, .tp-p .fc { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 46px; border-radius: 9px; background: color-mix(in srgb, var(--pc, #8a7a5a) 40%, #120c07); box-shadow: 0 0 0 3px var(--pc, #8a7a5a), 0 0 0 5px var(--ink); }
.tp-p .fc { width: 40px; height: 36px; }
.tp-c .fc i, .tp-p .fc i { font-style: normal; font-size: 24px; }
.tp-p .fc i { font-size: 19px; }
.tp-c .fc .lv, .tp-p .fc .lv { position: absolute; right: -8px; bottom: -8px; }
.tp-p .fc .lv { transform: scale(.85); }
.tp-c .fc .gp-ic, .tp-p .fc .gp-ic { position: absolute; left: -9px; top: -10px; font-size: 16px; }
.tp-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 4px; }
@media (max-width: 760px), (max-height: 520px) {
  .tp-team { gap: 10px; }
  .tp-c { width: 84px; padding: 10px 3px 6px; }
  .tp-c .fc { width: 42px; height: 38px; } .tp-c .fc i { font-size: 20px; }
  .tp-c b { font-size: 13px; }
  .tp-squads { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
  .tp-sq { padding: 6px 6px 8px; }
  .tp-p { gap: 8px; padding: 5px 6px; }
  .tp-p .fc { width: 34px; height: 31px; } .tp-p .fc i { font-size: 16px; }
  .tp-p .nm b { font-size: 14px; } .tp-p .nm small { font-size: 11px; }
  .tp-p .ck { width: 24px; height: 24px; font-size: 14px; }
  .team-panel h2 { font-size: 22px; }
  .tp-how { margin: 4px 0 8px; font-size: 12px; }
}
/* (a phone: the whole screen, so more of the squads shows) */
@media (max-width: 760px) { .sheet.team-panel { top: calc(8px + var(--safe-t)); bottom: calc(8px + var(--safe-b)); height: auto; padding: 16px 14px 12px; } }

/* Settings rows on a narrow screen (a phone held upright): the controls go under their label when
   they don't fit beside it, instead of squeezing it into a column of single words. */
@media (max-width: 520px) {
  .set-row { flex-wrap: wrap; gap: 8px 12px; }
  .set-row > span { flex: 1 1 200px; min-width: 0; }
  .set-row .seg-ctl { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
}

/* ---------- players on this device, and getting back in (ui/backupui.js) ---------- */
/* the title: "Who's playing?" with each player's face, and 🔑 I already play on a new device */
.title-screen .play-wrap .already { margin-top: 18px; }
.who-pick .who-h { font-family: var(--pixel); font-size: clamp(13px, 1.8vw, 20px); color: #fff4d6; text-shadow: 3px 3px 0 #000; margin-bottom: 14px; text-align: center; }
.who-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: min(760px, 94vw); }
.who { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; padding: 10px 4px 8px; border: none; border-radius: 16px; cursor: pointer; font-family: var(--font); color: var(--th-text); background: var(--th-tile); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); transition: transform .1s; pointer-events: auto; }
.who:hover { transform: translateY(-3px); }
.who:active { transform: translateY(2px); }
.who.now { box-shadow: 0 0 0 4px #ffd25a, 0 0 0 7px var(--ink), 0 0 22px rgba(255, 210, 90, .6); }
.who b { font-size: 15px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who.add .who-face { background: rgba(0, 0, 0, .3); box-shadow: 0 0 0 3px #8a7a5a, 0 0 0 5px var(--ink); }
.who-face { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 58px; border-radius: 12px; flex: none;
  background: color-mix(in srgb, var(--pc, #8a7a5a) 40%, #120c07); box-shadow: 0 0 0 3px var(--pc, #8a7a5a), 0 0 0 5px var(--ink); }
.who-face i { font-style: normal; font-size: 32px; }
.who-face .lv { position: absolute; right: -8px; bottom: -8px; }
.fa-row > span.who-face { flex: none; min-width: 0; flex-direction: row; width: 52px; height: 46px; } .fa-row .who-face i { font-size: 24px; }
/* "Add a player" and "Welcome back!": two big choices */
.ap-choices { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 14px; }
.ap-c { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 190px; padding: 16px 10px 14px; border: none; border-radius: 16px; cursor: pointer; font-family: var(--font); color: var(--th-text); background: var(--th-tile); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); }
.ap-c:hover { transform: translateY(-2px); } .ap-c:active { transform: translateY(2px); }
.ap-c span { font-size: 44px; line-height: 1.1; } .ap-c b { font-size: 20px; } .ap-c small { font-size: 13px; color: var(--th-sub); }
.already .hint, .email-step .hint { margin: 0 0 8px; }
/* a player's code: 10 pictures in two rows of 5, and its letters for grown-ups */
.tk-code.code10 { display: grid; grid-template-columns: repeat(5, max-content); justify-content: center; }
.sp-letters { text-align: center; font-family: var(--pixel); font-size: clamp(16px, 2.6vw, 24px); letter-spacing: 3px; color: #ffd25a; text-shadow: 2px 2px 0 #000; margin: 12px 0 10px; user-select: all; }
.code-entry .ce-type { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--th-sub); margin: 2px 0 6px; }
.code-entry .ce-type input { width: 240px; max-width: 62vw; padding: 8px 6px; border: none; border-radius: 10px; font-family: var(--pixel); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; text-align: center; color: #3a2a1a; background: #fff6c8; box-shadow: 0 0 0 3px var(--ink); }
.ce-err { margin: 6px 0 0 !important; font-size: 16px !important; font-weight: 700; color: #ffb4a0; }
/* a grown-up's email: the address, then the 6-digit number */
.email-step input.em, .email-step input.num { width: min(360px, 80vw); padding: 12px; border: none; border-radius: 10px; font-family: var(--font); font-size: 22px; font-weight: 700; text-align: center; color: #3a2a1a; background: #fff6c8; box-shadow: 0 0 0 3px var(--ink); margin: 4px 0 10px; }
.email-step input.num { width: 220px; font-family: var(--pixel); font-size: 26px; letter-spacing: 8px; }
.email-step .link-btn { font-size: 13px; }
/* the family's players to pick on a new device */
.fp-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 8px 0 12px; }
.fp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 140px; padding: 12px 6px 10px; border: none; border-radius: 14px; cursor: pointer; font-family: var(--font); color: var(--th-text); background: var(--th-tile); box-shadow: 0 0 0 3px var(--th-ring), 0 0 0 6px var(--ink); opacity: .6; }
.fp.on { opacity: 1; box-shadow: 0 0 0 4px #5ee36b, 0 0 0 7px var(--ink); }
.fp b { font-size: 15px; } .fp small { font-size: 12px; color: var(--th-sub); }
.fp .tick { position: absolute; top: 6px; right: 8px; font-size: 18px; color: #5ee36b; display: none; } .fp.on .tick { display: block; }
.save-progress .sp-main { margin-bottom: 6px; }
.save-progress .tk-code.code10 { margin: 8px 0 4px; }
@media (max-width: 760px) {
  .who { width: 86px; } .who-face { width: 54px; height: 50px; } .who-face i { font-size: 26px; }
  .tk-code.code10 span { width: 44px; min-height: 46px; } .tk-code.code10 i { font-size: 26px; }
  .ap-c { width: 150px; }
}
@media (max-height: 520px) {
  .who-pick .who-h { margin-bottom: 8px; } .who { padding: 6px 4px; } .who-face { width: 50px; height: 44px; } .who-face i { font-size: 24px; }
  .tk-code.code10 span { min-height: 40px; } .tk-code.code10 i { font-size: 24px; }
  .code-entry .ce-type { margin: 0 0 2px; }
}
/* A phone held sideways: the steps of getting back in (ui/backupui.js) fit with no scrolling. The
   code's 10 empty boxes sit in one row, the choices get smaller pictures (owner rule, CLAUDE.md). */
@media (max-height: 500px) and (orientation: landscape) {
  .code-entry h2 { margin-bottom: 2px; font-size: 24px; }
  .code-entry .tk-code.code10 { grid-template-columns: repeat(10, max-content); gap: 5px; margin: 4px 0 6px; }
  .code-entry .tk-code.code10 span { width: 38px; min-height: 38px; }
  .code-entry .tk-code.code10 i { font-size: 22px; }
  .ap-choices { gap: 12px; margin: 4px 0 8px; }
  .ap-c { padding: 10px 8px 8px; }
  .ap-c span { font-size: 32px; }
  .ap-c b { font-size: 17px; }
  .fp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 112px)); justify-content: center; gap: 10px; margin: 4px 0 8px; }
  .fp { width: auto; padding: 8px 4px 6px; gap: 4px; }
  .fp b { font-size: 12px; overflow-wrap: anywhere; }
  .fp .who-face { width: 44px; height: 40px; }
  .fp .who-face i { font-size: 21px; }
  .fp .tick { top: 3px; right: 5px; font-size: 15px; }
}
@media (max-height: 400px) {
  .modal .big-ic { font-size: 34px; }
  .modal .fc.big { width: 60px; height: 54px; margin-bottom: 8px; }
  .modal .fc.big i { font-size: 28px !important; }
  .email-step input.em, .email-step input.num { margin: 2px 0 6px; padding: 8px; font-size: 19px; }
  .ap-c { padding: 6px 8px; }
  .ap-c span { font-size: 26px; }
  .already .hint, .email-step .hint { font-size: 12px; }
  .email-step .sub { margin-bottom: 6px; }
  .add-friend h2 { margin-bottom: 4px; font-size: 22px; }
  .code-entry h2 { font-size: 21px; }
}
/* ---------- phones held sideways: a smaller HUD, out at the edges, so more of the game shows ----------
   The top-left stack (hero card, gems, your gold pet's gold, squads) shrinks the most; the buttons, the thumb
   pad and the slash button a little. (During a puzzle css/puzzles.css scales the stack itself.) */
@media (max-height: 500px) {
  #hud .hud-tl { left: calc(6px + var(--safe-l)); top: calc(6px + var(--safe-t)); gap: 7px; transform: scale(.7); }
  .sq-r b { width: 88px; }
  .sq-bar { width: 40px; }
  .hud-tr { right: calc(8px + var(--safe-r)); top: calc(6px + var(--safe-t)); }
  .hud-btn { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
  .pause-btn { right: calc(8px + var(--safe-r)); top: calc(6px + var(--safe-t)); width: 42px; height: 42px; border-radius: 12px; }
  .pause-btn .i i { width: 6px; height: 18px; }
  .pause-card .pc-ic i { height: 36px; width: 12px; }
  .hud-tc, .bossbar { top: calc(10px + var(--safe-t)); width: min(600px, calc(100vw - 360px - var(--safe-l) - var(--safe-r))); }
  .slash-btn { right: calc(20px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); width: 80px; height: 80px; font-size: 36px; }
  .left-handed .slash-btn { left: calc(20px + var(--safe-l)); }
  .pad { width: 116px; height: 116px; margin: -58px 0 0 -58px; opacity: .4; }
  .pad i { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  #toasts { top: calc(56px + var(--safe-t)); width: min(500px, 80vw); gap: 6px; }
  .toast { padding: 7px 14px; font-size: 14px; gap: 8px; }
  .toast .i { font-size: 20px; }
  .area-banner .big { font-size: clamp(20px, 5.4vw, 60px); }
  .area-banner .ico { font-size: 36px; }
  .hud-feed { top: calc(56px + var(--safe-t)); }
}
@media (max-height: 400px) { #hud .hud-tl { transform: scale(.64); } }