/* Territory – the board fills whatever the phone gives it: a plaque header (logo, then the menu button and, inside the
   app, the back button; everything else is in the drawer), compact stat plaques, the play area, and the touch pad beside
   the board in landscape / under it in portrait. Nothing scrolls, and the board is never allowed to collapse: its box is
   sized from the play area by fitStage(). Overlay cards shrink to fit (UI.fitOverlays). */
:root {
  --bg: #0d0e12; --panel: #16181f; --text: #f5f5f7; --muted: #a3a8b5; --accent: #f5a623; --line: #38e4ff; --danger: #ff3d81;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --skin-panel: rgba(18,22,30,.88); --skin-frame: #3a4657; --skin-text: #f5f5f7; --skin-accent: #f5a623; --skin-highlight: #f5a623;
}
/* Languages (js/i18n.js sets <html lang dir> from ?lang= before the first paint). Hebrew and Arabic are set in Rubik, the
   one family for every script (Bible rule 1); Latin keeps Inter. Letter-spacing breaks Arabic joining and looks loose in
   Hebrew, so both read at normal spacing. */
:root:lang(he), :root:lang(ar) { --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
:root:is(:lang(he), :lang(ar)) * { letter-spacing: normal !important; }
/* Hebrew and Arabic have no capitals, so the small uppercase labels are set a step larger to read as well */
:root:is(:lang(he), :lang(ar)) .splaque span { font-size: 11px; }
:root:is(:lang(he), :lang(ar)) :is(.panel__label, .stats span, .drawer__row > .k) { font-size: 12.5px; }
/* Right-to-left flips the text and its reading order only (Bible rule 25): the header, the board and the touch pad keep
   their places, so the column is laid out left to right and the words inside it read right to left. Numbers keep their
   own order (I18N.t isolates them; the progress track stays a left-to-right gauge). */
.column.terr { direction: ltr; }
html[dir="rtl"] :is(.statrow, .banner, .msg) { direction: rtl; }
.splaque--claim .track { direction: ltr; }
* { box-sizing: border-box; }
html { color-scheme: dark; height: 100%; overflow: hidden; }   /* the parked drawer must never widen the page on a phone */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* the theme's scene sits behind the board, dimmed so the play area stays readable */
html.has-skin-bg body::before { content: ''; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(125% 78% at 50% 4%, rgba(8,9,14,.06), rgba(8,9,14,.5) 52%, rgba(5,7,11,.86)), var(--skin-bg-wide) center / cover no-repeat; }
@media (orientation: portrait) { html.has-skin-bg body::before { background-image: radial-gradient(125% 78% at 50% 4%, rgba(8,9,14,.06), rgba(8,9,14,.5) 52%, rgba(5,7,11,.86)), var(--skin-bg-portrait, var(--skin-bg-wide)); } }

/* ---- page frame */
.stage-wrap { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center;
  padding: 10px max(10px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }   /* room below for the ship's force field (#game-top) */
.column.terr { width: 100%; max-width: 1280px; height: 100%; min-height: 0; display: grid; gap: 7px;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "top" "stats" "play"; }
/* the sign rides the page's centre (the Einstein's Lab scheme); the bar's buttons keep the top right corner */
.topbar { grid-area: top; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; grid-template-areas: "tl sign menu"; align-items: center; gap: 8px; }
/* on desktop the bar and the stats keep to the board's width (fitStage writes --ui-max on the column);
   a phone held upright keeps the full-width bar, whose cells need every pixel the screen has */
@media (hover: hover) and (pointer: fine) {
  .topbar, .statrow { width: 100%; max-width: var(--ui-max, none); justify-self: center; margin-inline: auto; }
}
.sign { grid-area: sign; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tbtns { grid-area: menu; justify-self: end; display: flex; align-items: center; gap: 8px; }
.tbtns.tbtns--left { grid-area: tl; justify-self: start; }   /* pause keeps the top left corner */
.tbtns .round-btn { width: 46px; height: 46px; border-radius: 13px; font-size: 19px; }
.tbtns .round-btn[hidden] { display: none; }
/* when the theme ships a carved menu button, the art is the button; it keeps the other buttons' size */
.round-btn.has-art { width: 46px; height: 46px; border: 0; border-radius: 0; background: var(--menu-img) center / contain no-repeat; box-shadow: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); transition: transform .12s ease, filter .12s ease; }
.round-btn.has-art svg { display: none; }
.round-btn.has-art:hover { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)) brightness(1.08); }
.round-btn.has-art:active { transform: translateY(2px) scale(.96); filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)) brightness(.95); }
.round-btn.has-art:focus-visible { outline: 2px solid var(--skin-accent); outline-offset: 2px; border-radius: 50%; }
.plaque-logo { justify-content: center; width: 100%; }
.plaque-logo img { width: min(100%, 340px); height: auto; max-height: 12vh; object-fit: contain; }
.plaque-logo b { font-size: clamp(1.4rem, 6vw, 2.2rem); letter-spacing: .06em; }
/* one continuous instrument bar (the Einstein's Lab scheme): every cell sits in the same plate, split by thin seams */
.statrow { grid-area: stats; position: relative; display: flex; gap: 0; min-width: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--skin-panel) 86%, #000), color-mix(in srgb, var(--skin-panel) 48%, #000)); border: 1.5px solid color-mix(in srgb, var(--skin-accent) 55%, transparent);
  border-radius: 13px; padding: 3px 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 18px -6px var(--skin-accent), 0 6px 18px rgba(0,0,0,.5); }
.splaque { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 8px;
  background: none; border: 0; border-radius: 9px; padding: 6px 9px; box-shadow: none; }
.splaque + .splaque { border-inline-start: 1px solid rgba(255,255,255,.14); border-radius: 0; }
/* bracket corners on the bar, the way a plated instrument panel is built */
.statrow::before, .statrow::after { content: ''; position: absolute; width: 9px; height: 9px; border: 2px solid var(--skin-accent); opacity: .85; pointer-events: none; }
.statrow::before { left: 3px; top: 3px; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.statrow::after { right: 3px; bottom: 3px; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }
html[data-mood="cartoon"] .statrow { border-width: 3px; }
html[data-mood="chalk"] .statrow { border-style: dashed; }
html[data-mood="steel"] .statrow { border-radius: 0; }
.splaque > div { min-width: 0; }
/* a small carved glyph in the theme's accent */
.sico { flex: none; width: 24px; height: 24px; position: relative; opacity: .5; }
.sico::before { content: ''; position: absolute; inset: 0; background: var(--skin-accent); -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.sico--level { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M2 20 9 7l4 6 3-4 6 11z'/%3E%3C/svg%3E"); }
.sico--score { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m12 2 2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E"); }
/* the claim ring fills as ground is taken and turns green once the target is met */
.ring { flex: none; width: 30px; height: 30px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--ringc, #38e4ff) calc(var(--p, 0) * 1%), rgba(255,255,255,.16) 0);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 12px -2px var(--ringc, #38e4ff); }
.ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #071013; }
.ring.done { --ringc: #46d369; }
.splaque span, .splaque b { overflow: hidden; text-overflow: ellipsis; }
.splaque--claim { flex: 2.1 1 0; }
.splaque--claim b { font-size: 1.35rem; }
/* the track is a span, so the plaque's label rule (overflow: hidden) would clip the marker and its goal number */
.splaque--claim .track { position: relative; display: block; overflow: visible; height: 6px; border-radius: 4px; background: rgba(255,255,255,.14); margin-top: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.splaque--claim .track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #38e4ff, #7ef0ff); border-radius: 4px; transition: width .2s; box-shadow: 0 0 8px -1px #38e4ff; }
.splaque--claim .track i.done { background: #46d369; }
.claimlabel em { font-style: normal; }
.splaque--claim .track em { position: absolute; top: -3px; width: 2px; height: 11px; background: #fff; opacity: .75; }
/* the goal as a number riding the target marker (#hud-goal, set by game.js): shown by the narrow layouts that hide
   the label's "target" text, so the goal is never off the screen */
.splaque--claim .track b { display: none; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 1px;
  font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: 0; line-height: 1; color: #fff; opacity: .95; text-shadow: 0 1px 2px rgba(0,0,0,.8); white-space: nowrap; overflow: visible; }
/* lives are the theme's own token, drawn as many times as you have left; a lost one pulses the row so it is seen */
.lifebar { display: flex; gap: 3px; align-items: center; min-height: 20px; }
.lifebar.hit { animation: lifehit .7s ease; }
@keyframes lifehit { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
.lifebar i { width: 19px; height: 19px; background: var(--life-img) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.lifebar i.spent { filter: grayscale(1) brightness(.5); opacity: .5; }
.lifebar.plain { color: var(--danger); letter-spacing: .1em; display: block; }
.splaque--power b { font-size: .85rem; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.splaque--power { flex: 1.5 1 0; max-width: 190px; }
/* no boost running: the cell folds away and the bar closes its seams; a boost pops it in when it switches on */
.splaque--power.idle { display: none; }
@media (max-width: 560px) { .splaque--power { display: none; } }
/* narrow phones: smaller bar buttons */
@media (max-width: 620px) { .tbtns { gap: 6px; } .tbtns .round-btn { width: 42px; height: 42px; } }
@media (max-width: 430px) { .sico { display: none; } }   /* the labels come first when the row is this tight */
/* narrow phones: the carved glyphs give up their room so every label stays readable */
@media (max-width: 620px) {
  .statrow { padding: 2px 3px; }
  .splaque { padding: 5px 7px; gap: 6px; }
  .ring { width: 27px; height: 27px; }
  .sico { width: 17px; height: 17px; }
  .splaque span { font-size: 8px; letter-spacing: .04em; }
  .splaque { padding: 5px 6px; gap: 5px; }
  .claimlabel em { display: none; }   /* no room for the "target" text: the goal rides the bar marker instead */
  .splaque--claim .track b { display: block; }
  .splaque b { font-size: 1.05rem; }
  .splaque--claim b { font-size: 1.3rem; }
  .splaque--score { flex: 1.5 1 0; }          /* six-figure scores need the room */
  .splaque--score b { font-size: .92rem; }
  .lifebar i { width: 16px; height: 16px; }
}

/* ---- play area: board plus the touch pad; the board box comes from fitStage() and never shrinks to nothing */
.playfield { grid-area: play; min-height: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.padwrap { flex: none; display: none; align-items: center; justify-content: center; gap: 10px; width: 100%; }
@media (hover: none) and (pointer: coarse) { .padwrap { display: flex; } }
/* the frame is real padding, so fitStage() sizes the box to hold a 5:3 board plus the frame */
.stage { --frame: 19px; position: relative; flex: none; padding: var(--frame); border-radius: 16px;
  background:
    radial-gradient(circle at 12px 12px, #d6dde8 0 2px, #7d879c 2.6px 4.4px, rgba(0,0,0,.55) 4.8px 5.8px, transparent 6px),
    radial-gradient(circle at calc(100% - 12px) 12px, #d6dde8 0 2px, #7d879c 2.6px 4.4px, rgba(0,0,0,.55) 4.8px 5.8px, transparent 6px),
    radial-gradient(circle at 12px calc(100% - 12px), #d6dde8 0 2px, #7d879c 2.6px 4.4px, rgba(0,0,0,.55) 4.8px 5.8px, transparent 6px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #d6dde8 0 2px, #7d879c 2.6px 4.4px, rgba(0,0,0,.55) 4.8px 5.8px, transparent 6px),
    /* the carved stone itself */
    linear-gradient(180deg, rgba(40,46,56,.86), rgba(18,22,29,.92)), var(--frame-img, none) center / 210px auto;
  background-color: #1a1e26;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -3px 0 rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.75), 0 26px 70px rgba(0,0,0,.75), 0 0 52px -14px var(--skin-accent); }
/* the frame carries no dashed light strips or hazard tape: the plate, its rivets and the theme's soft glow are enough */
.stage__in { position: relative; width: 100%; height: 100%; border-radius: 5px; background: #0b0e19;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.8), inset 0 0 36px rgba(0,0,0,.55); }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#game { border-radius: 5px; }
/* the ship's layer overhangs the board on every side (game.js sizeCanvas sets the reach), under the banner and the coach */
#game-top { position: absolute; pointer-events: none; }

/* ---- the level banner across the middle of the board (a DOM line, so it is translated, set in the language's font and
   fits the board in every language), and the small toast at the top of the board. The band stays put and fades; its
   lines slide in a short way from the side a line starts on, inside padding wider than the slide, so no word ever
   crosses the board's edge. game.js (fitBanner) scales the type down (--fit) until every line fits whole: words are
   never broken and nothing is cut off. */
.stage__in { container-type: size; }
.banner { position: absolute; left: 0; right: 0; top: 50%; z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 28px; padding-inline: clamp(14px, 6cqw, 28px); background: rgba(0,0,0,.55); color: #fff; text-align: center; pointer-events: none; overflow-wrap: normal;
  opacity: 0; transform: translateY(-50%); transition: opacity .16s ease-in; }
.banner > * { max-width: 100%; text-wrap: balance; transform: translateX(calc(-1 * min(12px, 2.5cqw))); transition: transform .16s ease-in; }
html[dir="rtl"] .banner:not(.show) > * { transform: translateX(min(12px, 2.5cqw)); }   /* it slides in from the side the line starts on */
.banner.show { opacity: 1; transition: opacity .3s ease-out; }
.banner.show > * { transform: none; transition: transform .5s cubic-bezier(.2,.9,.3,1.2); }
.banner b { font-size: 26px; font-size: calc(clamp(20px, 7cqw, 46px) * var(--fit, 1)); font-weight: 900; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.banner i { font-style: normal; font-weight: 800; color: var(--skin-accent); font-size: 16px; font-size: calc(clamp(14px, 3.6cqw, 24px) * var(--fit, 1)); line-height: 1.25; }
.banner i:empty { display: none; }
.banner span { font-weight: 600; font-size: 14px; font-size: calc(clamp(13px, 3cqw, 19px) * var(--fit, 1)); line-height: 1.3; color: #f3f5f9; }
/* Hebrew and Arabic vowel marks sit above and below the letters: their lines get the room */
:root:is(:lang(he), :lang(ar)) .banner b { line-height: 1.3; }
:root:is(:lang(he), :lang(ar)) .banner :is(i, span) { line-height: 1.45; }

/* ---- touch pad: under the board in portrait, beside it in landscape; keyboard players never see it */
/* the joystick: a round base (the theme's pad art when it ships one) and a knob the thumb drags; js/game.js steers */
.stick { display: none; position: relative; flex: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.stick__base { position: relative; width: var(--stick, 150px); height: var(--stick, 150px); border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--skin-panel) 80%, #fff 6%), color-mix(in srgb, var(--skin-panel) 55%, #000) 74%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-accent) 55%, transparent), 0 0 22px color-mix(in srgb, var(--skin-accent) 40%, transparent), inset 0 0 20px rgba(0,0,0,.55); }
.stick.has-base .stick__base { background: var(--pad-img) center / contain no-repeat; box-shadow: none;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--skin-accent) 35%, transparent)); }
.stick__knob { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 36% 30%, #4a6ea6, #182c54 68%, #0d1b33);
  box-shadow: 0 0 16px color-mix(in srgb, var(--skin-accent) 70%, transparent), inset 0 2px 5px rgba(255,255,255,.28), 0 5px 12px rgba(0,0,0,.5);
  transition: transform .07s linear; }
@media (hover: none) and (pointer: coarse) { .stick { display: block; } .keys--keyboard { display: none; } }
@media (orientation: portrait) and (max-height: 720px) { .stick { --stick: 132px; } }
/* every phone held upright: the board runs to the screen's edges, with a slimmer frame around it */
@media (orientation: portrait) and (pointer: coarse) {
  .stage-wrap { padding: 8px max(4px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
  .stage { --frame: 10px; border-radius: 12px; }
}
@media (hover: hover) and (pointer: fine) { .keys--touch { display: none; } }

/* ---- landscape phones: header and stats share one row, the pad sits beside the board */
@media (orientation: landscape) and (max-height: 640px) {
  .stage-wrap { padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .column.terr { gap: 6px 10px; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "tl sign stats menu" "play play play play"; }
  .topbar { display: contents; }
  .plaque-logo { grid-area: sign; } .plaque-logo img { width: auto; height: 40px; max-height: none; } .plaque-logo b { font-size: 1.15rem; }
  .tbtns { grid-area: menu; gap: 6px; } .tbtns .round-btn { width: 42px; height: 42px; }
  .statrow { grid-area: stats; align-items: center; }
  .splaque { padding: 4px 8px; }
  .playfield { grid-area: play; flex-direction: row; gap: 12px; }
  .padwrap { width: auto; flex: none; }
  .stick { --stick: 132px; margin-inline: 6px; }
}
@media (orientation: landscape) and (max-height: 400px) { .stick { --stick: 112px; } .plaque-logo img { width: auto; height: 34px; max-height: none; } .splaque b { font-size: .95rem; } }
/* the one-row header on a landscape phone: the carved glyphs give up their room so six-figure scores and every label fit */
@media (orientation: landscape) and (max-height: 640px) {
  .sico { display: none; }
  .splaque--level { flex: .8 1 0; } .splaque--score { flex: 1.5 1 0; }
}
@media (orientation: landscape) and (max-height: 640px) and (max-width: 760px) {
  .claimlabel em { display: none; }   /* no room for the "target" text: the goal rides the bar marker instead */
  .splaque--claim .track b { display: block; }
  .splaque--power { display: none; }  /* as on a narrow phone held upright; a boost still announces itself on the board */
  .splaque span { letter-spacing: .06em; }
}
/* a short phone held upright: a smaller sign and stick, so the board keeps its room below the plaques */
@media (orientation: portrait) and (max-height: 700px) {
  .plaque-logo img { max-height: 13vh; }
  .stick { --stick: 116px; }
}
/* every phone held upright: the sign gives most of its height back to the board (the title card has its own logo) */
@media (orientation: portrait) and (max-width: 480px) {
  .plaque-logo img { max-height: 11vh; }
}

/* ---- overlays: they cover the whole play area, panels stay inside the viewport */
.panel img { max-width: 100%; }
/* the world stays in view behind a card: a light dim only, and the card itself is dark glass over it */
.overlay { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,7,16,.35); overflow: hidden; }
.overlay[hidden] { display: none; }
/* a theme with a backdrop puts every card on it: its own art, dark at the edges and lit where the card stands */
html.has-backdrop .overlay { background: radial-gradient(120% 90% at 50% 50%, rgba(4,7,16,0) 40%, rgba(4,7,16,.45)), var(--backdrop-wide) center / cover no-repeat; }
@media (orientation: portrait) { html.has-backdrop .overlay { background-image: radial-gradient(120% 90% at 50% 50%, rgba(4,7,16,0) 40%, rgba(4,7,16,.45)), var(--backdrop-portrait); } }
.panel { width: min(560px, 100%); margin: auto; text-align: center;
  background: color-mix(in srgb, var(--skin-panel) 55%, rgba(3,6,14,.35));
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border: 1.5px solid color-mix(in srgb, var(--skin-accent) 60%, transparent); border-radius: 16px; padding: 24px 24px 20px;
  animation: panelglow 2.8s ease-in-out infinite; }
@keyframes panelglow {
  0%, 100% { border-color: color-mix(in srgb, var(--skin-accent) 55%, transparent);
    box-shadow: 0 0 10px 0 color-mix(in srgb, var(--skin-accent) 40%, transparent), 0 0 34px 2px color-mix(in srgb, var(--skin-accent) 18%, transparent), 0 30px 80px rgba(0,0,0,.6); }
  50% { border-color: var(--skin-accent);
    box-shadow: 0 0 18px 2px color-mix(in srgb, var(--skin-accent) 70%, transparent), 0 0 52px 6px color-mix(in srgb, var(--skin-accent) 32%, transparent), 0 30px 80px rgba(0,0,0,.6); }
}
@media (prefers-reduced-motion: reduce) { .panel { animation: none; box-shadow: 0 0 14px 1px color-mix(in srgb, var(--skin-accent) 50%, transparent), 0 30px 80px rgba(0,0,0,.6); } }
.panel__label { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--skin-accent); font-weight: 700; margin-bottom: 8px; }
.panel h1 { font-size: clamp(1.8rem, 5vw, 3rem); margin: 0 0 6px; letter-spacing: -.03em; font-weight: 900; }
.panel__logo img { display: block; height: min(96px, 16vh); width: auto; max-width: 100%; object-fit: contain; margin: 2px auto 8px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.55)); }
.panel__logo img[hidden] { display: none; } .panel__logo img:not([hidden]) + span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.panel h2 { font-size: clamp(1.5rem, 4vw, 2.4rem); margin: 0 0 6px; letter-spacing: -.02em; font-weight: 900; }
.panel p { color: #d8dbe3; margin: 0 0 14px; line-height: 1.5; font-size: 15px; }
.panel .muted { color: var(--muted); font-size: 13px; }
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; text-align: start; }
.howto div { background: rgba(255,255,255,.04); border-radius: 8px; padding: 12px; font-size: 12.5px; line-height: 1.4; color: #d8dbe3; }
.howto b { display: block; color: #fff; margin-bottom: 4px; font-size: 13px; }
.howto i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 6px; vertical-align: -1px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.stats div { background: rgba(255,255,255,.04); border-radius: 8px; padding: 10px; }
.stats span { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stats b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.btn { border: 0; border-radius: 8px; padding: 12px 24px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.btn--primary { background: #fff; color: #000; }
.btn--accent { background: var(--accent); color: #1a1100; }
.btn--ghost { background: rgba(255,255,255,.1); color: #fff; }
.btn[hidden] { display: none; }
.keys { margin-top: 12px; font-size: 12px; color: var(--muted); }
.keys kbd { display: inline-block; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); font-family: inherit; font-size: 11px; margin: 0 2px; }
.msg { position: absolute; top: 12px; left: 50%; transform: translate(-50%, -10px); z-index: 20; width: max-content; max-width: calc(100% - 24px);
  background: rgba(0,0,0,.72); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .1em;
  text-transform: uppercase; text-align: center; overflow-wrap: anywhere; opacity: 0; transition: .25s; pointer-events: none; }
.msg.show { opacity: 1; transform: translate(-50%, 0); }
/* the coach bubble: one short step over the board, below the banner and out of the toast's way. Only its skip button
   takes the pointer, so a drag that starts on it still steers the unit. */
.coach { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 18; display: flex; align-items: center; gap: 10px;
  max-width: min(86%, 440px); padding: 8px 12px; background: rgba(5,10,18,.86); border: 1.5px solid var(--skin-accent); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 18px -6px var(--skin-accent); pointer-events: none; }
.coach[hidden] { display: none; }
html[dir="rtl"] .coach { direction: rtl; }
#coach-text { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #fff; text-wrap: balance; }
:root:is(:lang(he), :lang(ar)) #coach-text { line-height: 1.5; }
#coach-skip { flex: none; pointer-events: auto; border: 0; border-radius: 8px; padding: 5px 10px; background: rgba(255,255,255,.14); color: #e8ebf2; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
#coach-skip:hover { background: rgba(255,255,255,.24); }
#coach-skip:focus-visible { outline: 2px solid var(--skin-accent); outline-offset: 2px; }
@media (max-width: 620px) { .coach { bottom: 10%; padding: 7px 10px; gap: 8px; } #coach-text { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .banner, .banner.show, .banner > *, .msg { transition: none; } .banner > *, html[dir="rtl"] .banner:not(.show) > * { transform: none; } .lifebar.hit { animation: none; } }
@media (max-width: 600px) { .howto { grid-template-columns: 1fr; } }
/* short screens: the title card keeps only what a player needs to start */
@media (max-height: 620px) {
  .panel { padding: 16px 16px 14px; }
  .howto, .keys--keyboard { display: none; }
  .panel h1 { font-size: 1.7rem; } .panel p { font-size: 13px; margin-bottom: 10px; } .panel .muted { display: none; }
  .stats { margin: 10px 0; gap: 8px; } .stats b { font-size: 18px; }
}
/* the game-over card: what took the last life, with the one tip that matches it */
.panel .overwhy { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #e4e7ee; }
.panel .overwhy[hidden] { display: none; }
/* the score the app records, shown on the clear card inside the app */
.hostscore { display: block; margin: -4px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--skin-accent); }
.hostscore[hidden] { display: none; }

/* ---- the scoreboard (the clear card): a sci-fi frame js/game.js draws to the card's exact size (scifiFrame), over
   dark glass with the theme's stars and its corner art; tiles and the button cut at their corners like the frame */
.panel.scifi { position: relative; padding: 32px 22px 30px; background: none; border: 0; border-radius: 0; box-shadow: none;
  animation: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-family: 'Exo 2', var(--font); }
:root:is(:lang(he), :lang(ar)) .panel.scifi { font-family: var(--font); }
.scifi > :not(.scifi__glass):not(.scifi__frame) { position: relative; z-index: 2; }
.scifi__glass { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--skin-panel) 82%, transparent), color-mix(in srgb, var(--skin-panel) 94%, transparent));
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.scifi__stars { position: absolute; inset: 0; background: var(--cover-img, none) center / cover; opacity: .6; mix-blend-mode: screen; }
/* the corner pieces keep one size on every card, so only their tops ever rise behind the button's ends */
.scifi__planet { --d: 170px; position: absolute; left: calc(var(--d) * -.16); bottom: calc(var(--d) * -.62); width: var(--d); height: var(--d);
  background: var(--corner-img, none) center / contain no-repeat; mix-blend-mode: screen; }
.scifi__planet--end { left: auto; right: calc(var(--d) * -.16); transform: scaleX(-1); }
.scifi__frame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scifi__frame path { fill: none; }
.scifi__frame .scifi__glow path { stroke: var(--skin-accent); stroke-width: 3; }
.scifi__frame .scifi__glow { animation: scifiglow 2.8s ease-in-out infinite; }
.scifi__frame .scifi__edge--line { stroke: color-mix(in srgb, var(--skin-accent) 70%, #fff); stroke-width: 1.5; stroke-linejoin: round; }
.scifi__frame .scifi__bar { stroke-linecap: round; }
.scifi__frame .scifi__bar--line { stroke: #fff; stroke-width: 2.2; opacity: .85; }
.scifi__frame :is(.scifi__slot, .scifi__tab) { fill: rgba(0,0,0,.42); stroke: color-mix(in srgb, var(--skin-accent) 75%, transparent); stroke-width: 1; }
.scifi__frame .scifi__marks { stroke: var(--skin-accent); stroke-width: 1.5; stroke-linecap: round; }
.scifi__frame .scifi__dots { fill: var(--skin-accent); }
@keyframes scifiglow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scifi__frame .scifi__glow { animation: none; opacity: .8; } }

/* the level line between two stepped rules; they turn with the reading direction, so the steps always face the words */
.scifi__head { display: flex; align-items: center; gap: 10px; margin: 0 -4px 2px; }
.scifi__head .panel__label { flex: 0 1 auto; margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .26em;
  text-shadow: 0 0 10px color-mix(in srgb, var(--skin-accent) 60%, transparent); }
.scifi__rule { flex: 1 1 0; min-width: 14px; height: 12px; overflow: visible; }
.scifi__rule polyline { fill: none; stroke: var(--skin-accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .75; }
.scifi__rule--end { transform: scaleX(-1); }
html[dir="rtl"] .scifi__rule { transform: scaleX(-1); }
html[dir="rtl"] .scifi__rule--end { transform: none; }
.panel.scifi h2 { margin: 2px 0 14px; font-size: clamp(1.75rem, 7.6vw, 2.35rem); font-weight: 800; letter-spacing: .01em; color: var(--skin-text);
  text-shadow: 0 0 2px color-mix(in srgb, var(--skin-accent) 80%, transparent), 0 0 18px color-mix(in srgb, var(--skin-accent) 55%, transparent); }
.scifi .hostscore { margin: -8px 0 12px; }

/* the four tiles: a cut-corner plate (its edge is the accent showing round an inset fill), a badge with the icon */
.scifi__stats { gap: 10px; margin: 0 0 16px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--skin-accent) 32%, transparent)); }
.scifi__stats .stat { --c: 10px; position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 10px 10px 11px;
  border-radius: 0; text-align: start; background: color-mix(in srgb, var(--skin-accent) 55%, transparent);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.scifi__stats .stat::before { content: ''; position: absolute; inset: 1px; z-index: -1;
  background: linear-gradient(160deg, color-mix(in srgb, var(--skin-panel) 76%, #fff 7%), color-mix(in srgb, var(--skin-panel) 94%, #000));
  clip-path: polygon(calc(var(--c) - .59px) 0, 100% 0, 100% calc(100% - var(--c) + .59px), calc(100% - var(--c) + .59px) 100%, 0 100%, 0 calc(var(--c) - .59px)); }
.stat__ico { --c: 9px; position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--skin-accent);
  background: color-mix(in srgb, var(--skin-accent) 42%, transparent);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.stat__ico::before { content: ''; position: absolute; inset: 1px; z-index: -1;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--skin-panel) 70%, #fff 10%), color-mix(in srgb, var(--skin-panel) 96%, #000));
  clip-path: polygon(calc(var(--c) - .59px) 0, calc(100% - var(--c) + .59px) 0, 100% calc(var(--c) - .59px), 100% calc(100% - var(--c) + .59px),
    calc(100% - var(--c) + .59px) 100%, calc(var(--c) - .59px) 100%, 0 calc(100% - var(--c) + .59px), 0 calc(var(--c) - .59px)); }
.stat__ico svg { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--skin-accent) 75%, transparent)); }
.stat__ico svg .ln { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.stat__ring { width: 24px; height: 24px; border-radius: 50%;
  background: conic-gradient(var(--skin-accent) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--skin-accent) 18%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 53%); mask: radial-gradient(circle, transparent 50%, #000 53%); }
.scifi__stats .stat__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; background: none; border-radius: 0; }
.scifi__stats span { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.15; color: color-mix(in srgb, var(--skin-text) 72%, transparent); }
.scifi__stats b { display: block; overflow: hidden; white-space: nowrap; font-size: 23px; font-weight: 800; line-height: 1.1; color: var(--skin-text); }

/* the button: the accent edge round a deep blue plate, both cut to a stretched hexagon; the row glows */
.scifi .actions { gap: 12px; margin-top: 2px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--skin-accent) 70%, transparent)); }
.scifi .actions .btn { --c: 15px; position: relative; justify-content: center; min-width: 58%; height: 48px; padding: 0 30px; border: 0; border-radius: 0;
  font-size: 18px; font-weight: 800; letter-spacing: .02em; color: var(--skin-text); background: var(--skin-accent); box-shadow: none;
  text-shadow: 0 0 10px color-mix(in srgb, var(--skin-accent) 85%, transparent);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% 50%, calc(100% - var(--c)) 100%, var(--c) 100%, 0 50%); }
.scifi .actions .btn::before { content: ''; position: absolute; inset: 2px; z-index: -1;
  background: linear-gradient(180deg, color-mix(in oklab, var(--skin-frame) 62%, var(--skin-accent)), color-mix(in oklab, var(--skin-frame) 58%, var(--skin-panel)));
  clip-path: polygon(calc(var(--c) - 1px) 0, calc(100% - var(--c) + 1px) 0, 100% 50%, calc(100% - var(--c) + 1px) 100%, calc(var(--c) - 1px) 100%, 0 50%); }
.scifi .actions .btn--ghost { min-width: 0; background: color-mix(in srgb, var(--skin-accent) 50%, transparent); text-shadow: none; }
.scifi .actions .btn--ghost::before { background: linear-gradient(180deg, color-mix(in srgb, var(--skin-panel) 82%, #fff 6%), var(--skin-panel)); }
.scifi .actions .btn:hover::before { filter: brightness(1.15); }
.scifi .actions .btn:active { transform: translateY(1px); }
.scifi .actions .btn:focus-visible { outline: none; background: var(--skin-text); }

/* narrow phones: a smaller badge and figures, so six-figure scores still sit beside their icons */
@media (max-width: 420px) {
  .panel.scifi { padding: 30px 16px 28px; }
  .scifi__stats { gap: 8px; }
  .scifi__stats .stat { gap: 8px; padding: 9px 8px 9px 9px; }
  .stat__ico { width: 34px; height: 34px; --c: 8px; } .stat__ico svg { width: 19px; height: 19px; } .stat__ring { width: 21px; height: 21px; }
  .scifi__stats b { font-size: 20px; }
  .scifi__planet { --d: 150px; }
}
/* the game over in the same frame: the reason and its tip, then the best score, set softer than the figures */
.scifi .overwhy { margin: 0 0 14px; font-size: 14.5px; line-height: 1.45; color: color-mix(in srgb, var(--skin-text) 88%, transparent); }
.scifi .muted { margin: 0 0 14px; font-size: 13.5px; letter-spacing: .02em; color: color-mix(in srgb, var(--skin-text) 66%, transparent); }