/* Exit Strategy: the game page (HUD, board, overlays, door panel, joysticks). Theme colours arrive as --skin-* variables.
   Direction: <html lang dir> comes from ?lang= (js/i18n.js). RTL flips the text and the reading order only (Bible
   §5.5.5): the HUD and the cards use logical properties, while the play area and what sits on it (the maze, the map,
   the glass stick, the view buttons, the door panel's place) keep their physical sides in every language. */
:root { --bg: #0d0e12; --text: #f5f5f7; --muted: #a3a8b5; --accent: #f5a623; --cyan: #38e4ff; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --skin-panel: rgba(18,22,30,.9); --skin-frame: #3a4657; --skin-text: #f5f5f7; --skin-accent: #f5a623;
  /* the design system: glass surfaces tinted by the theme's panel colour, hairline frames, one accent glow */
  --ok: #34d877; --bad: #ff5d73;
  --glass: color-mix(in srgb, var(--skin-panel) 58%, rgba(8,10,16,.55));
  --glass-hi: color-mix(in srgb, var(--skin-panel) 70%, rgba(255,255,255,.14));
  --card: color-mix(in srgb, var(--skin-panel) 34%, #0c0e15);
  --line: color-mix(in srgb, var(--skin-frame) 55%, rgba(255,255,255,.18));
  --glow: color-mix(in srgb, var(--skin-accent) 45%, transparent);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  /* the theme's display font (js/themes.js sets --theme-font) for Latin pages */
  --skin-font: var(--theme-font, var(--font)); }
/* Hebrew and Arabic: Rubik for everything on the page, digits and Latin names included (Bible §10 rule 1, §5.5.4),
   switched here on the language rather than by a per-glyph fallback chain. The theme's own font is Latin-only. */
:root:lang(he), :root:lang(ar) { --font: 'Rubik', system-ui, sans-serif; --skin-font: 'Rubik', system-ui, sans-serif; }
/* tracking pulls Arabic's joined letters apart and reads as gaps in Hebrew, which has no capitals to space out */
:root:lang(he) *, :root:lang(ar) * { letter-spacing: normal !important; }
/* a non-English page stays blank for the moment until its words are in (js/i18n.js clears this at once) */
html.i18n-pending body { visibility: hidden; }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); height: 100vh; height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; overscroll-behavior: none; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---- the HUD: the theme's own scene behind a band of framed plaques. Phones stack the sign over three plaques;
   wide screens put it all in one row with the sign in the middle. */
.mhud { flex: none; position: relative; z-index: 3; display: grid; grid-template-columns: 1.22fr 1.1fr .88fr; column-gap: 6px; row-gap: 6px;
  align-items: center; padding: max(6px, env(safe-area-inset-top)) 10px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.18), color-mix(in srgb, var(--skin-chrome, #10131b) 62%, rgba(0,0,0,.5)) 72%, color-mix(in srgb, var(--skin-chrome, #10131b) 80%, #000)),
    var(--skin-bg-wide, none) center 38% / cover no-repeat, var(--skin-chrome, #10131b);
  border-bottom: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0,0,0,.55); font-family: var(--skin-font, var(--font)); }
.mhud::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 4%, var(--skin-accent) 50%, transparent 96%); opacity: .85; pointer-events: none;
  box-shadow: 0 0 14px 1px var(--glow); }
.mhud > .mhud__btns { grid-row: 1; grid-column: 1; justify-self: start; display: flex; gap: 6px; z-index: 1; }
.mhud__btns .round-btn { width: 42px; height: 42px; border-width: 2px; } .mhud__btns .round-btn[hidden] { display: none; }
/* a host launch adds the back button next to the menu: the sign keeps clear of both */
html.hosted .mhud > .plaque-logo { max-width: calc(100% - 206px); }
.mhud > .plaque-logo { grid-row: 1; grid-column: 1 / -1; justify-self: center; justify-content: center; max-width: calc(100% - 112px); min-width: 0; }
.mhud > .plaque-logo img { height: clamp(38px, 5.8vh, 52px); }
.mhud > .plaque-logo b { font-size: clamp(1.2rem, 5vw, 1.8rem); }
.mhud > .lvl { grid-row: 1; grid-column: 3; justify-self: end; z-index: 1; }
.mhud__left, .mhud__right { display: contents; }
.mplq--time { grid-row: 2; grid-column: 1; } .mplq--found { grid-row: 2; grid-column: 2; } .mplq--doors { grid-row: 2; grid-column: 3; }

/* level medallion: a ring of five segments, lit for the levels behind you */
.lvl { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1;
  background: radial-gradient(circle at 50% 30%, var(--glass-hi), var(--glass) 70%); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.22); color: var(--skin-text); }
.lvl__ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); pointer-events: none; overflow: visible; }
.lvl__ring path { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.lvl__ring .seg { stroke: rgba(255,255,255,.16); } .lvl__ring .seg.done { stroke: var(--skin-accent); filter: drop-shadow(0 0 3px var(--glow)); } .lvl__ring .seg.now { stroke: #fff; animation: seg-now 1.6s ease-in-out infinite; }
@keyframes seg-now { 50% { stroke: var(--skin-accent); } }
.lvl b { font-family: var(--font); font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lvl small { font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-top: 1px; }

/* plaques: the theme's panel and frame, accent brackets on two corners */
.mplq { position: relative; min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-md); color: var(--skin-text);
  background: linear-gradient(180deg, var(--glass-hi), var(--glass)); border: 1px solid var(--line); overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.25); transition: border-color .3s, box-shadow .3s; }
/* a lit edge along the top of every chip, in the theme's accent */
.mplq::before { content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--skin-accent); opacity: .85;
  box-shadow: 0 0 10px 1px var(--glow); pointer-events: none; }
.mplq span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .7; white-space: nowrap; }
.mplq b { display: block; font-family: var(--font); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.05; }
.mplq__txt { min-width: 0; display: flex; flex-direction: column; }
/* time: the clock against par; the ring fills toward par and turns red past it */
.mplq--time b { font-size: 1.34rem; color: #fff; letter-spacing: -.02em; text-shadow: 0 0 18px var(--glow); }
.mplq--time small { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.mplq--time small em { font-family: var(--font); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.mplq--time small i { font-style: normal; }
.gauge { flex: none; width: 34px; height: 34px; }
.gauge__bg { fill: rgba(0,0,0,.32); stroke: rgba(255,255,255,.12); stroke-width: 4; }
.gauge__fg { fill: none; stroke: var(--skin-accent); filter: drop-shadow(0 0 2px var(--glow)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 20px 20px; transition: stroke .3s; }
.gauge__hub { fill: var(--skin-text); } .gauge__hand { stroke: var(--skin-text); stroke-width: 2.2; stroke-linecap: round; transform-origin: 20px 20px; }
.mplq--time.over { border-color: var(--bad); } .mplq--time.over::before { background: var(--bad); box-shadow: 0 0 10px 1px var(--bad); } .mplq--time.over b { color: var(--bad); text-shadow: none; } .mplq--time.over .gauge__fg { stroke: var(--bad); }
/* found: the level's finds as silhouettes that light up when picked up */
.mplq--found { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; }
.mplq__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.mplq__head b { font-size: 1rem; color: var(--skin-accent); }
.mplq--found.done { border-color: color-mix(in srgb, var(--ok) 70%, transparent); } .mplq--found.done::before { background: var(--ok); box-shadow: 0 0 10px 1px var(--ok); } .mplq--found.done .mplq__head b { color: var(--ok); }
.finds { display: flex; align-items: center; min-height: 22px; }
.find { flex: none; width: 22px; height: 22px; border-radius: 50%; margin-inline-end: 3px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), rgba(0,0,0,.5)) center / 86% no-repeat; background-size: 86%; border: 1px dashed rgba(255,255,255,.28);
  filter: grayscale(1) brightness(.5) contrast(1.4); opacity: .8; transition: filter .35s, border-color .35s, transform .35s, opacity .35s; }
.find.got { filter: none; opacity: 1; border: 1.5px solid var(--skin-accent); background-color: color-mix(in srgb, var(--skin-accent) 22%, rgba(0,0,0,.35)); box-shadow: 0 0 10px color-mix(in srgb, var(--skin-accent) 60%, transparent); animation: find-pop .5s ease-out; }
.finds--tight .find { margin-inline-end: -5px; } .finds--tight .find.got { z-index: 1; }
@keyframes find-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
/* doors: the theme's own door, with a red tag for the doors wrong answers added */
.mplq__art { flex: none; position: relative; width: 32px; height: 32px; border-radius: 10px; background: rgba(0,0,0,.4) center / cover no-repeat; border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center; color: var(--skin-accent); box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.mplq__art svg { width: 20px; height: 20px; } .mplq__art.has-art svg { display: none; }
.mplq__art em { position: absolute; inset-inline-start: -5px; bottom: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff;
  font-family: var(--font); font-style: normal; font-size: 10px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.mplq__art em[hidden] { display: none; }
.mplq--doors b { font-size: 1.1rem; color: var(--skin-accent); }
.mplq--doors.over b { color: var(--bad); }
.mplq--doors.clear b { color: var(--ok); } .mplq--doors.clear::before { background: var(--ok); box-shadow: 0 0 10px 1px var(--ok); }
/* the moods from the theme (look.mood) */
html[data-mood="steel"] .mplq, html[data-mood="steel"] .mplq__art, html[data-mood="steel"] .panel, html[data-mood="steel"] .door { border-radius: 4px; }
html[data-mood="steel"] .mplq::before { inset-inline: 0 auto; width: 34%; border-radius: 0; }
html[data-mood="chalk"] .mplq { border-style: dashed; }
html[data-mood="cartoon"] .mplq { border-width: 1.5px; border-radius: 18px; }
html[data-mood="parchment"] .mplq { box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,230,170,.18), inset 0 1px 0 rgba(255,255,255,.16); }

/* narrow phones */
@media (max-width: 380px) {
  .mhud { column-gap: 5px; padding-left: 8px; padding-right: 8px; }
  .mplq { padding: 5px 6px; gap: 5px; } .gauge { width: 30px; height: 30px; } .mplq--time b { font-size: 1.1rem; }
  .find { width: 21px; height: 21px; } .mplq__art { width: 26px; height: 26px; } .mplq span { font-size: 8px; letter-spacing: .08em; }
}
/* tablets and small laptops: the plaques sit in a centred row under the sign */
@media (min-width: 640px) {
  .mhud { grid-template-columns: 1fr minmax(0, 240px) minmax(0, 250px) minmax(0, 170px) 1fr; padding-left: 16px; padding-right: 16px; }
  .mhud > .mhud__btns { grid-column: 1; } .mhud > .lvl { grid-column: 5; }
  .mplq--time { grid-column: 2; } .mplq--found { grid-column: 3; } .mplq--doors { grid-column: 4; }
  .mhud__btns .round-btn { width: 46px; height: 46px; } .lvl { width: 50px; height: 50px; }
  html.hosted .mhud > .plaque-logo { max-width: calc(100% - 220px); }
}
/* wide screens: one row, the sign in the middle */
@media (min-width: 1100px) and (min-height: 600px) {
  .mhud { grid-template-columns: 50px 1fr auto 1fr 50px; column-gap: 14px; padding: 10px 18px 12px; }
  .mhud__left, .mhud__right { display: flex; gap: 10px; align-items: stretch; }
  .mhud__left { grid-column: 2; grid-row: 1; justify-self: end; } .mhud__right { grid-column: 4; grid-row: 1; justify-self: start; }
  .mhud > .plaque-logo { grid-column: 3; max-width: 320px; } .mhud > .plaque-logo img { height: 64px; }
  .mhud > .lvl { grid-column: 5; } .lvl { width: 52px; height: 52px; }
  html.hosted .mhud { grid-template-columns: 106px 1fr auto 1fr 106px; } html.hosted .mhud > .plaque-logo { max-width: 320px; }
  .mplq { height: auto; padding: 8px 12px; } .mplq--time { min-width: 196px; } .mplq--doors { min-width: 138px; } .mplq--found { min-width: 210px; }
  .gauge { width: 42px; height: 42px; } .mplq--time b { font-size: 1.5rem; } .mplq span { font-size: 10px; }
  .find { width: 28px; height: 28px; margin-inline-end: 5px; } .finds { min-height: 28px; } .finds--tight .find { margin-inline-end: 4px; }
  .mplq__art { width: 38px; height: 38px; } .mplq--doors b { font-size: 1.3rem; } .mplq__head b { font-size: 1.1rem; }
}
/* landscape phones: one short row */
@media (orientation: landscape) and (max-height: 520px) {
  .mhud { grid-template-columns: 36px 1fr auto 1fr 36px; column-gap: 8px; padding: 4px 10px 6px; }
  .mhud__left, .mhud__right { display: flex; gap: 6px; align-items: stretch; }
  .mhud__left { grid-column: 2; grid-row: 1; justify-self: end; } .mhud__right { grid-column: 4; grid-row: 1; justify-self: start; }
  .mhud > .plaque-logo { grid-column: 3; max-width: 150px; } .mhud > .plaque-logo img { height: 32px; }
  .mhud__btns .round-btn { width: 34px; height: 34px; } .mhud > .lvl { grid-column: 5; }
  html.hosted .mhud { grid-template-columns: 74px 1fr auto 1fr 74px; } html.hosted .mhud > .plaque-logo { max-width: 150px; } .lvl { width: 34px; height: 34px; } .lvl small { display: none; } .lvl b { font-size: 14px; }
  .mplq { padding: 3px 7px; gap: 5px; border-radius: 11px; }
  .gauge { width: 26px; height: 26px; } .mplq--time b { font-size: 1rem; } .mplq span { font-size: 7.5px; } .mplq--time small { font-size: 8px; }
  .find { width: 18px; height: 18px; } .finds { min-height: 18px; } .mplq__art { width: 24px; height: 24px; } .mplq__art svg { width: 15px; height: 15px; }
  .mplq--doors b, .mplq__head b { font-size: .9rem; } .mplq--found { gap: 1px; }
}
.icon-btn { background: rgba(255,255,255,.06); border: 0; color: #fff; width: 38px; height: 38px; border-radius: 50%; font-size: 16px; }
.icon-btn:hover { background: rgba(255,255,255,.12); }

.stage { position: relative; flex: 1; min-height: 0; background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--skin-chrome, #0b0e19) 70%, #1a1f2e), #06080d); }
.stage > canvas.gl { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: none; }
/* a soft vignette over the scene keeps the eye in the middle of the maze */
.stage::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.42) 100%); }
/* the view buttons: one glass toolbar */
.controls { position: absolute; top: 12px; right: 12px; display: flex; gap: 3px; z-index: 5; padding: 4px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.controls button { height: 34px; min-width: 34px; padding: 0 12px; border-radius: 10px; font-family: var(--skin-font, var(--font)); font-size: 13px; font-weight: 800; letter-spacing: .01em;
  color: var(--skin-text); background: transparent; border: 0; transition: background .15s, box-shadow .15s, color .15s; }
.controls button:hover { background: rgba(255,255,255,.1); }
.controls button.active { background: var(--skin-accent); color: #10131b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.18), 0 0 18px var(--glow); }
#btn-zoom-in { margin-inline-start: 4px; } #btn-zoom-in, #btn-zoom-out { font-size: 18px; padding: 0; width: 34px; }
#minimap { position: absolute; left: 12px; bottom: 12px; z-index: 5; border-radius: 14px; padding: 6px; background: var(--glass);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hint { position: absolute; bottom: 12px; right: 12px; z-index: 5; font-size: 12px; color: color-mix(in srgb, var(--skin-text) 75%, transparent); padding: 7px 12px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hint kbd { display: inline-block; min-width: 18px; text-align: center; padding: 0 5px; border-radius: 5px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-bottom-width: 2px;
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--skin-text); }

/* ---- cards: a glass sheet over a blurred scene, the theme's own backdrop washing in at the top */
.overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden;
  background: radial-gradient(90% 80% at 50% 45%, color-mix(in srgb, var(--skin-chrome, #08090e) 45%, rgba(6,7,12,.55)), rgba(4,5,9,.86));
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }
.overlay[hidden] { display: none; }
.panel { position: relative; isolation: isolate; overflow: hidden; width: min(520px, 100%); margin: auto; text-align: center; color: var(--skin-text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 70%, transparent), var(--card) 46%);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 30px 24px;
  box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
  animation: panel-in .35s cubic-bezier(.2,.9,.25,1.15); }
.panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 150px; z-index: -1; opacity: .5;
  background: var(--skin-bg-wide, none) center 35% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.panel::after { content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--skin-accent), transparent); box-shadow: 0 0 16px 2px var(--glow); }
@keyframes panel-in { from { transform: translateY(14px) scale(.97); } to { transform: none; } }
.panel__label { display: inline-block; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--skin-accent); font-weight: 800; margin-bottom: 10px;
  padding-block: 5px; padding-inline: 14px 12px; border-radius: 999px; background: color-mix(in srgb, var(--skin-accent) 14%, rgba(0,0,0,.35)); border: 1px solid color-mix(in srgb, var(--skin-accent) 40%, transparent); }
.panel h1, .panel h2 { font-family: var(--skin-font, var(--font)); text-shadow: 0 4px 24px rgba(0,0,0,.55); }
.panel h1 { font-size: clamp(2.2rem, 5.4vw, 3.2rem); margin: 0 0 6px; letter-spacing: -.025em; font-weight: 800; line-height: 1.05; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 28px rgba(0,0,0,.8), 0 0 40px var(--glow); }
.panel h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 6px; letter-spacing: -.02em; font-weight: 800; line-height: 1.1; }
.panel p { color: color-mix(in srgb, var(--skin-text) 86%, transparent); margin: 0 0 14px; line-height: 1.5; font-size: 15px; }
.panel .muted { color: var(--muted); font-size: 13px; }
.panel p b { color: var(--skin-accent); }
/* the title card: a line, then the rules as four pictures in order */
.panel--title { width: min(480px, 100%); padding-top: 38px; }
.panel--title::before { height: 220px; opacity: .55; }
.panel--title h1 { margin-bottom: 4px; }
.title-line { font-size: 16px !important; font-weight: 700; color: var(--skin-text) !important; opacity: .92; margin-bottom: 22px !important; }
.steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; counter-reset: step; }
.steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; counter-increment: step; }
.steps li[hidden] { display: none; }
.steps li + li::before { content: ''; position: absolute; inset-inline-start: -8px; top: 29px; width: 7px; height: 7px; border-top: 2px solid var(--skin-accent); border-right: 2px solid var(--skin-accent);
  transform: translate(-50%, -50%) rotate(45deg); opacity: .7; }
/* the steps read right to left in RTL, so the arrows between them point left */
[dir="rtl"] .steps li + li::before { transform: translate(50%, -50%) rotate(-135deg); }
.step__ic { position: relative; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--skin-accent);
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.14), rgba(255,255,255,.03) 70%) center / 80% no-repeat, color-mix(in srgb, var(--skin-panel) 55%, rgba(0,0,0,.3));
  border: 1px solid color-mix(in srgb, var(--skin-accent) 45%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px rgba(0,0,0,.35); }
.step__ic.has-art { background-size: 80%; background-position: center; background-repeat: no-repeat; }
.step__ic::after { content: counter(step); position: absolute; inset-inline-end: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font: 900 10px/1 var(--font); color: #10131b; background: var(--skin-accent); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.step__ic svg { width: 28px; height: 28px; } .step__ic.has-art svg { display: none; }
.steps b { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--skin-text); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.stats--six { grid-template-columns: repeat(3, 1fr); }
.stats--six b { font-size: 18px; }
.stats div { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-sm); padding: 10px; }
.stats span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.stats b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.splits { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin: 14px 0; }
.splits div { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 8px 4px; }
.splits span { display: block; font-size: 10px; color: var(--muted); }
.splits b { font-size: 14px; font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
/* chunky game buttons: a lit face over a darker edge that presses down */
.btn { position: relative; border: 0; border-radius: 14px; padding: 13px 26px; font-family: var(--skin-font, var(--font)); font-weight: 800; font-size: 16px; letter-spacing: .01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; transition: transform .1s, box-shadow .1s, filter .15s; }
.btn:active { transform: translateY(3px); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn--primary, .btn--accent { min-width: 150px; color: #10131b;
  background: linear-gradient(180deg, color-mix(in srgb, var(--skin-accent) 78%, #fff), var(--skin-accent) 55%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--skin-accent) 55%, #000), 0 10px 26px var(--glow), inset 0 1px 0 rgba(255,255,255,.55); }
.btn--primary:active, .btn--accent:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--skin-accent) 55%, #000), 0 4px 12px var(--glow), inset 0 1px 0 rgba(255,255,255,.55); }
.btn--primary:hover, .btn--accent:hover { filter: brightness(1.07); }
.btn--ghost { background: rgba(255,255,255,.07); color: var(--skin-text); border: 1px solid var(--line); box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.btn--ghost:active { box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.btn--ghost:hover { background: color-mix(in srgb, rgba(255,255,255,.07) 70%, var(--skin-accent) 18%); }
.btn[hidden] { display: none; }
.keys { margin-top: 14px; font-size: 12px; color: var(--muted); }
.keys:empty { display: none; }
.keys kbd { display: inline-block; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-bottom-width: 2px; font-family: inherit; font-size: 11px; margin: 0 2px; }
.loading[hidden] { display: none; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; z-index: 4; pointer-events: none;
  animation: loading-pulse 1.4s ease-in-out infinite; }
@keyframes loading-pulse { 50% { opacity: .45; } }

@media (max-width: 900px) {
  .icon-btn { width: 32px; height: 32px; font-size: 14px; }
  .stats--six { grid-template-columns: repeat(2, 1fr); gap: 6px; } .stats--six div { padding: 6px 8px; } .stats--six b { font-size: 15px; }
  .hint { display: none; }
}
/* landscape phones: the sign shrinks and the overlays step aside so the maze keeps the screen */
@media (orientation: landscape) and (max-height: 520px) {
  .lesson-host { display: none; }
  #minimap { width: 118px; height: auto; left: 8px; bottom: 8px; }
  .controls { top: 8px; right: 8px; } .controls button { height: 30px; min-width: 30px; font-size: 12px; padding: 0 8px; }
}
@media (max-height: 560px) { .lesson-host { display: none; } }
@media (hover: none) and (pointer: coarse) { .hint { display: none; } }
.lesson-host { position: absolute; left: 12px; top: 12px; z-index: 5; width: min(calc(100% - 340px), 640px); pointer-events: none; }
.lesson-host .lesson { display: inline-block; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 7px 12px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow); }
@media (max-width: 700px) { .lesson-host { display: none; } }
@media (max-height: 700px) { .panel { padding-top: 16px; padding-bottom: 14px; } }
@media (max-width: 900px) { .panel { padding: 22px 18px 18px; border-radius: 20px; } .panel h1 { font-size: 2.1rem; } .panel p { font-size: 13.5px; } }

/* ---- locked doors: first-person question panel over the scene ---- */
body.door-mode .lesson-host, body.door-mode .controls, body.door-mode .hint { display: none; }
.door { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 7; color: var(--skin-text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 80%, transparent), var(--card)); border: 1px solid color-mix(in srgb, var(--skin-accent) 55%, transparent);
  border-radius: var(--r-lg); padding: 16px 16px 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4), 0 0 40px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); transition: opacity .3s ease, transform .3s ease; max-height: 62%; overflow: auto; }
.door[hidden] { display: none; }
.door:not(.door--in) { opacity: 0; transform: translateY(12px); pointer-events: none; }
.door__crest { position: absolute; inset-inline-end: 12px; top: 10px; width: 46px; height: 46px; object-fit: contain; border-radius: 12px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.6)); }
.door__crest[hidden] { display: none; }
.door__label { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--skin-accent); font-weight: 800;
  padding: 4px 11px; max-width: 100%; border-radius: 999px; background: color-mix(in srgb, var(--skin-accent) 14%, rgba(0,0,0,.3)); border: 1px solid color-mix(in srgb, var(--skin-accent) 38%, transparent); }
.door__label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--skin-accent); box-shadow: 0 0 8px var(--skin-accent); animation: seg-now 1.6s ease-in-out infinite; }
.door__crest:not([hidden]) ~ .door__q { padding-inline-end: 52px; }
/* pre-line: a question may be written on two lines ("\n" in theme.json), as a sentence with its translation under it */
.door__q { font-family: var(--skin-font, var(--font)); font-size: 19px; font-weight: 700; line-height: 1.3; margin: 10px 0 12px; letter-spacing: -.005em; white-space: pre-line; }
.door__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.door__opt { display: flex; align-items: center; gap: 10px; text-align: start; padding: 11px 12px; border-radius: 14px; color: var(--skin-text); font-weight: 650; font-size: 14.5px; line-height: 1.25;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1); transition: background .15s, border-color .15s, transform .12s, box-shadow .12s; }
.door__opt:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--skin-accent) 20%, rgba(255,255,255,.08)), rgba(255,255,255,.06)); border-color: var(--skin-accent); transform: translateY(-1px); }
.door__opt:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.door__opt:focus-visible { outline: 2px solid var(--skin-accent); outline-offset: 2px; }
.door__opt i { flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.16); border-bottom-width: 2px; color: var(--skin-accent);
  font-family: var(--font); font-style: normal; font-weight: 900; font-size: 12px; display: grid; place-items: center; }
.door__opt.no { opacity: .45; text-decoration: line-through; border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); box-shadow: none; animation: opt-shake .35s; }
.door__opt.no i { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); border-color: transparent; }
.door__opt.ok { background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 80%, #fff), var(--ok)); border-color: var(--ok); color: #052e14; transform: scale(1.02);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ok) 50%, #000), 0 0 26px color-mix(in srgb, var(--ok) 55%, transparent); }
.door__opt.ok i { background: rgba(0,0,0,.16); color: #052e14; border-color: transparent; }
@keyframes opt-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.door__opt:disabled:not(.ok):not(.no) { opacity: .5; }
.door__label em, .door__label i { font-style: normal; }
.door__foot { margin-top: 10px; font-size: 12px; color: var(--muted); }
.door__foot:empty { display: none; }
.door__toast { margin-top: 10px; font-size: 13px; font-weight: 800; color: #1a1100; background: var(--skin-accent); border-radius: 12px; padding: 9px 12px; box-shadow: 0 0 22px var(--glow); animation: note-pop .3s ease-out; }
@keyframes note-pop { from { opacity: 0; transform: translateY(6px); } }
.door__toast[hidden] { display: none; }
/* while the wrong-answer toast is up it replaces the foot line (js/game.js toast()), which says the same thing */
.door--toast .door__foot { display: none; }
@media (min-aspect-ratio: 1/1) and (min-width: 600px) {
  .door { left: auto; top: 12px; bottom: 12px; right: 12px; width: min(440px, 44%); max-height: none; display: flex; flex-direction: column; justify-content: center; padding: 18px 20px 16px; }
  .door:not(.door--in) { transform: translateX(14px); }
  .door__q { font-size: 21px; margin: 8px 0 14px; }
  .door__opts { grid-template-columns: 1fr; }
}
@media (min-aspect-ratio: 1/1) and (min-width: 600px) and (max-height: 520px) {
  .door { width: min(480px, 56%); padding: 10px 12px 8px; justify-content: flex-start; overflow: auto; }
  .door__label { font-size: 9.5px; letter-spacing: .12em; padding: 3px 9px; }
  .door__q { font-size: 15px; margin: 4px 0 8px; line-height: 1.22; }
  .door__toast { margin-top: 6px; padding: 6px 9px; font-size: 12px; line-height: 1.25; }
  .door__opts { grid-template-columns: 1fr 1fr; gap: 6px; }
  .door__opt { padding: 7px 9px; font-size: 12.5px; gap: 7px; } .door__opt i { width: 20px; height: 20px; font-size: 11px; }
  .door__foot { display: none; }
}
@media (max-width: 480px) {
  .door { left: 8px; right: 8px; bottom: 8px; padding: 12px 12px 10px; max-height: 66%; }
  .door__q { font-size: 16px; }
  .door__opts { grid-template-columns: 1fr; gap: 6px; }
  .door__opt { padding: 9px 10px; font-size: 14px; }
}
/* short phones (390x633 and the like): the longest question with its four answers and the toast, in any language,
   still fits without the panel scrolling; the answers keep their 44px touch height */
@media (max-width: 480px) and (max-height: 720px) {
  .door { max-height: 76%; padding: 10px 10px 8px; }
  .door__q { margin: 6px 0 8px; line-height: 1.25; }
  .door__opt { min-height: 44px; padding: 7px 10px; line-height: 1.2; }
  .door__foot { margin-top: 7px; }
  .door__toast { margin-top: 7px; padding: 7px 10px; font-size: 12.5px; }
}

/* ---- completion time is what a level is won on, so it leads the result cards */
.result { position: relative; margin: 14px auto 6px; padding: 14px 16px 12px; border-radius: var(--r-md); max-width: 360px;
  background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--skin-accent) 18%, transparent), rgba(255,255,255,.03) 70%);
  border: 1px solid color-mix(in srgb, var(--skin-accent) 45%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 30px -12px var(--glow); }
.result span { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.result b { display: block; font-size: clamp(2.5rem, 10vw, 3.4rem); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.05; margin: 2px 0;
  color: #fff; text-shadow: 0 0 28px var(--glow), 0 2px 0 color-mix(in srgb, var(--skin-accent) 60%, #000); }
.result em { display: inline-block; font-style: normal; font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--skin-text) 85%, transparent); margin-top: 4px; }
.result em.best { color: #052e14; background: var(--ok); padding: 3px 10px; border-radius: 999px; box-shadow: 0 0 18px color-mix(in srgb, var(--ok) 50%, transparent); }
#ov-clear .result { margin-top: 0; }   /* the time leads the card now that the heading is gone */
.result small[hidden] { display: none; }
.result small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.stats--four { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.stats--four div { padding: 7px 9px; } .stats--four b { font-size: 16px; }
@media (min-width: 620px) { .stats--four { grid-template-columns: repeat(4, 1fr); } }

/* ---- a banner for what just happened: a find, the exit opening, the exit still shut */
.note { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px;
  width: min(92%, 440px); padding-block: 8px; padding-inline: 8px 14px; border-radius: 18px; color: var(--skin-text);
  background: linear-gradient(180deg, var(--glass-hi), var(--glass)); border: 1px solid color-mix(in srgb, var(--skin-accent) 60%, transparent);
  box-shadow: var(--shadow), 0 0 30px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.18); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  pointer-events: none; animation: note-in .3s cubic-bezier(.2,.9,.25,1.2); }
.note[hidden] { display: none; }
.note img { width: 46px; height: 46px; object-fit: contain; flex: none; padding: 3px; border-radius: 13px; background: radial-gradient(circle, color-mix(in srgb, var(--skin-accent) 30%, transparent), transparent 70%); }
.note img[hidden] { display: none; }
.note b { display: block; font-family: var(--skin-font, var(--font)); font-size: 14.5px; font-weight: 800; color: var(--skin-accent); }
.note span { display: block; font-size: 12.5px; color: color-mix(in srgb, var(--skin-text) 82%, transparent); line-height: 1.35; }
.note.warn { border-color: var(--bad); box-shadow: var(--shadow), 0 0 30px -8px var(--bad); } .note.warn b { color: var(--bad); }
@keyframes note-in { from { opacity: 0; transform: translate(-50%, -10px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
body.pov-mode .lesson-host, body.note-on .lesson-host { display: none; }
/* below the view buttons where the banner would otherwise cover them */
@media (max-width: 1099px) { .note { top: 56px; } }
@media (orientation: landscape) and (max-height: 520px) { .note { top: 46px; width: min(70%, 420px); } }

/* ---- glass joysticks: frosted base and a glossy knob tinted with the theme's accent. The fixed one drives first
   person (up walks, down steps back, left and right turn); the floating one appears wherever you drag from above. */
.stick, #joystick { --glass-tint: color-mix(in srgb, var(--skin-accent) 14%, rgba(12,16,26,.30));
  border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.22), rgba(255,255,255,.05) 55%, rgba(255,255,255,.02) 100%), var(--glass-tint);
  border: 1.5px solid rgba(255,255,255,.34);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.3), inset 0 -14px 26px rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--skin-accent) 40%, transparent),
    0 14px 34px rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); }
.stick::before, #joystick::before { content: ''; position: absolute; inset: 24%; border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--skin-accent) 18%, transparent); pointer-events: none; }
.stick__knob, #joystick i { position: absolute; left: 50%; top: 50%; border-radius: 50%; display: block;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.95) 0 6%, rgba(255,255,255,.35) 18%, transparent 42%),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--skin-accent) 85%, #fff 10%), color-mix(in srgb, var(--skin-accent) 45%, transparent) 70%),
    color-mix(in srgb, var(--skin-accent) 30%, rgba(255,255,255,.12));
  border: 1.5px solid rgba(255,255,255,.6);
  box-shadow: 0 10px 20px rgba(0,0,0,.45), inset 0 -6px 12px rgba(0,0,0,.22), inset 0 2px 2px rgba(255,255,255,.5), 0 0 22px color-mix(in srgb, var(--skin-accent) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stick { position: absolute; right: 16px; bottom: 16px; z-index: 6; width: 148px; height: 148px; display: none; cursor: grab; }
body.pov-mode .stick { display: block; }
body.door-mode .stick, body.door-mode .note { display: none; }
@media (max-width: 700px) { body.door-mode #minimap { display: none; } }   /* the question panel covers the bottom of a phone */
.stick__knob { width: 62px; height: 62px; margin: -31px 0 0 -31px; transition: transform .22s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.stick.on { cursor: grabbing; } .stick.on .stick__knob { transition: none; }
.stick.on::before { box-shadow: inset 0 0 26px color-mix(in srgb, var(--skin-accent) 40%, transparent); }
/* direction marks on the rim, lit on the side you push */
.stick__dir { position: absolute; left: 50%; top: 50%; width: 14px; height: 9px; margin: -4.5px 0 0 -7px; background: var(--skin-accent); opacity: .6;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 4px var(--skin-accent)); transition: opacity .12s; pointer-events: none; }
.stick__dir--up { transform: translateY(-58px); } .stick__dir--down { transform: translateY(58px) rotate(180deg); }
.stick__dir--left { transform: translateX(-58px) rotate(-90deg); } .stick__dir--right { transform: translateX(58px) rotate(90deg); }
.stick__dir.lit { opacity: 1; }
#joystick { position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px; pointer-events: none; z-index: 6; }
#joystick i { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
#joystick[hidden] { display: none; }
body.pov-mode #btn-zoom-in, body.pov-mode #btn-zoom-out { display: none; }
body.pov-mode .hint { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .stick { width: 116px; height: 116px; right: 10px; bottom: 10px; } .stick__knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .stick__dir--up { transform: translateY(-45px); } .stick__dir--down { transform: translateY(45px) rotate(180deg); }
  .stick__dir--left { transform: translateX(-45px) rotate(-90deg); } .stick__dir--right { transform: translateX(45px) rotate(90deg); }
}

/* narrow phones in first person: the map and the stick share the bottom edge, so both give a little */
@media (max-width: 430px) {
  body.pov-mode #minimap { width: 140px; height: auto; left: 8px; bottom: 10px; }
  .stick { width: 136px; height: 136px; right: 10px; bottom: 10px; }
  .stick__dir--up { transform: translateY(-53px); } .stick__dir--down { transform: translateY(53px) rotate(180deg); }
  .stick__dir--left { transform: translateX(-53px) rotate(-90deg); } .stick__dir--right { transform: translateX(53px) rotate(90deg); }
}
/* the crest sits top right of the question panel: the label keeps clear of it */
.door__crest:not([hidden]) ~ .door__label { max-width: calc(100% - 56px); }

/* ------------------------------------------------------------------ tabletop preset (look.mood: "tabletop")
   The desk-shot presentation (einstein): the sign on the left, the four cards in one row, menu on the right,
   a clean stage where the board is the focal point. Everything here is gated on the mood, so other themes
   render exactly as before. The new DOM bits it uses stay hidden for every other mood: */
.logo-tab, .lvl__dots, .mplq__best { display: none; }

/* the HUD row: [sign][time][doors][found][level]········[menu] */
html[data-mood="tabletop"] .mhud { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 10px; row-gap: 8px;
  padding: max(14px, env(safe-area-inset-top)) 22px 12px; }
html[data-mood="tabletop"] .mhud__left, html[data-mood="tabletop"] .mhud__right { display: contents; }
html[data-mood="tabletop"] .mhud > .plaque-logo { order: 1; max-width: none; flex: 0 1 250px; min-width: 160px; }
html[data-mood="tabletop"] .mplq--time { order: 2; flex: 1 1 15%; min-width: 172px; }
html[data-mood="tabletop"] .mplq--doors { order: 3; flex: 1 1 12%; min-width: 128px; }
html[data-mood="tabletop"] .mplq--found { order: 4; flex: 1.4 1 20%; min-width: 180px; }
html[data-mood="tabletop"] .mhud > .lvl { order: 5; flex: 1 1 14%; min-width: 165px; }
html[data-mood="tabletop"] .mhud__btns { order: 6; margin-inline-start: auto; align-self: center; }
html[data-mood="tabletop"] .mhud .round-btn { width: 50px; height: 50px; }
html[data-mood="tabletop"] .mplq, html[data-mood="tabletop"] .mhud > .lvl { height: auto; min-height: 64px; }
html[data-mood="tabletop"] .mhud > .plaque-logo { align-items: stretch; }
html[data-mood="tabletop"] .logo-tab { min-height: 64px; }

/* the sign: atom + the theme's name stacked, a card like the others */
html[data-mood="tabletop"] .plaque-logo img, html[data-mood="tabletop"] #game-logo-text { display: none; }
/* with a logo picture, the sign IS the picture (it carries its own plaque): no drawn card around it */
html[data-mood="tabletop"] .plaque-logo #game-logo:not([hidden]) { display: block; height: 68px; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
html[data-mood="tabletop"] .plaque-logo:has(#game-logo:not([hidden])) .logo-tab { display: none; }
html[data-mood="tabletop"] .plaque-logo:has(#game-logo:not([hidden])) { background: none; border: 0; box-shadow: none; padding: 0; align-items: center; }
html[data-mood="tabletop"] .logo-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 16px; border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--glass-hi), var(--glass)); border: 1px solid var(--line); color: var(--skin-text);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.18); }
html[data-mood="tabletop"] .logo-tab__ic { width: 36px; height: 36px; color: var(--skin-accent); filter: drop-shadow(0 0 7px var(--glow)); flex: none; }
html[data-mood="tabletop"] .logo-tab__tx { display: flex; flex-direction: column; line-height: 1.04; letter-spacing: .05em; min-width: 0; }
html[data-mood="tabletop"] .logo-tab__tx b { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-mood="tabletop"] #logo-tab-top { font-size: 15px; }
html[data-mood="tabletop"] #logo-tab-sub { font-size: 25px; }

/* time: big warm readout over the level's best */
html[data-mood="tabletop"] .mplq--time b { color: var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-mood="tabletop"] .mplq--time.over b { color: var(--bad); text-shadow: none; }
html[data-mood="tabletop"] .mplq--time .gauge__fg { stroke: var(--accent); }
html[data-mood="tabletop"] .mplq--time.over .gauge__fg { stroke: var(--bad); }
html[data-mood="tabletop"] .mplq__par { display: none; }
html[data-mood="tabletop"] .mplq__best { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* level: a card saying LEVEL n with the run as a dotted track */
html[data-mood="tabletop"] .mhud > .lvl { position: relative; width: auto; height: auto; border-radius: var(--r-md); display: flex; align-items: center;
  gap: 10px; padding: 6px 16px; background: linear-gradient(180deg, var(--glass-hi), var(--glass)); border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.2); }
html[data-mood="tabletop"] .lvl__ring, html[data-mood="tabletop"] .lvl small { display: none; }
html[data-mood="tabletop"] .lvl::before { content: attr(data-label); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
html[data-mood="tabletop"] .lvl b { font-size: 22px; }
html[data-mood="tabletop"] .lvl__dots { display: flex; align-items: center; gap: 7px; margin-inline-start: 4px; min-width: 0; flex-wrap: wrap; }
html[data-mood="tabletop"] .lvl__dots u { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
html[data-mood="tabletop"] .lvl__dots u.done { background: color-mix(in srgb, var(--skin-accent) 55%, transparent); border-color: var(--skin-accent); }
html[data-mood="tabletop"] .lvl__dots u.now { background: var(--skin-accent); border-color: rgba(255,255,255,.5); box-shadow: 0 0 8px var(--glow); }

/* ---- the desk-shot HUD, to the reference frame: the cards float straight over the desk photograph
   (no header band), navy glass with a thin blue edge, white labels, the time in warm orange, the found
   row as empty sockets that fill, the level as a dotted track, the sign as an emblem beside stacked type. */
html.desk-photo[data-mood="tabletop"] .mhud { background: none; border-bottom: 0; box-shadow: none; }
html.desk-photo[data-mood="tabletop"] .mhud::after { display: none; }
html.desk-photo[data-mood="tabletop"] .stage { background: none; }
html.desk-photo[data-mood="tabletop"] .stage::before, html.desk-photo[data-mood="tabletop"] .stage::after { display: none; }   /* the photograph carries its own light: no painted glow, no vignette over it */
html[data-mood="tabletop"] .mhud { padding: max(14px, env(safe-area-inset-top)) 24px 10px; column-gap: 12px; }
html[data-mood="tabletop"] .mplq, html[data-mood="tabletop"] .mhud > .lvl, html[data-mood="tabletop"] .logo-tab, html[data-mood="tabletop"] .mhud .round-btn {
  border-radius: 14px; border: 1px solid rgba(160, 210, 255, .35);
  background: linear-gradient(180deg, rgba(22, 52, 92, .55), rgba(8, 26, 52, .62));
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(200, 230, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .25); }
html[data-mood="tabletop"] .mplq { padding: 8px 18px 8px 14px; gap: 12px; }
html[data-mood="tabletop"] .mhud, html[data-mood="tabletop"] .mhud > .lvl { overflow: hidden; }
html[data-mood="tabletop"] .mplq::before { left: 10%; right: 10%; height: 2px; opacity: .55; background: linear-gradient(90deg, transparent, var(--skin-accent), transparent); }
html[data-mood="tabletop"] .mplq span { font-size: 11px; font-weight: 600; letter-spacing: .08em; opacity: .92; color: #fff; }
html[data-mood="tabletop"] .mplq b, html[data-mood="tabletop"] .lvl b { font-weight: 700; letter-spacing: 0; }
html[data-mood="tabletop"] .lvl::before { font-weight: 600; letter-spacing: .08em; }
html[data-mood="tabletop"] .door__q { font-weight: 600; font-size: 20px; line-height: 1.3; }
html[data-mood="tabletop"] .door__opt { font-weight: 500; font-size: 15px; }
html[data-mood="tabletop"] .door__label { font-weight: 600; letter-spacing: .14em; }
html[data-mood="tabletop"] .panel b, html[data-mood="tabletop"] .result b { font-weight: 700; letter-spacing: 0; }
html[data-mood="tabletop"] .mplq__ico { display: none; flex: none; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
html[data-mood="tabletop"] .mplq__ico:not([hidden]) { display: block; }
html[data-mood="tabletop"] .mplq--time .gauge { display: none; }
html[data-mood="tabletop"] .mplq--time:has(.mplq__ico[hidden]) .gauge { display: block; }
html[data-mood="tabletop"] .mplq--time b { font-size: 30px; color: #ffb13b; letter-spacing: .01em; text-shadow: 0 0 12px rgba(255, 150, 40, .35); }
html[data-mood="tabletop"] .mplq__best { font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.75); }
html[data-mood="tabletop"] .mplq__best::before { content: '- '; }
html[data-mood="tabletop"] .mplq--doors b { font-size: 26px; color: #bfe9ff; }
html[data-mood="tabletop"] .mplq__art { width: 46px; height: 46px; border-radius: 10px; border: 0; background-color: transparent; background-size: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
html[data-mood="tabletop"] .mplq--found { flex-direction: row; align-items: center; }
html[data-mood="tabletop"] .mplq__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
html[data-mood="tabletop"] .mplq__head b { font-size: 26px; color: #fff; }
html[data-mood="tabletop"] .mplq--found.done .mplq__head b { color: var(--ok); }
html[data-mood="tabletop"] .find { width: 24px; height: 24px; margin-right: 8px; border: 2px solid rgba(255,255,255,.22); background-color: rgba(255,255,255,.06); background-size: 0; filter: none; opacity: 1; }
html[data-mood="tabletop"] .find.got { background-size: 86%; border-color: var(--skin-accent); }
html[data-mood="tabletop"] .finds--tight .find { margin-right: 3px; }
html[data-mood="tabletop"] .lvl::before { font-size: 13px; letter-spacing: .1em; color: #fff; font-weight: 700; }
html[data-mood="tabletop"] .lvl b { font-size: 22px; color: #fff; }
html[data-mood="tabletop"] .lvl__dots { gap: 0; margin-left: 6px; flex-wrap: nowrap; flex: 0 1 auto; overflow: hidden; }
html[data-mood="tabletop"] .lvl__dots u { position: relative; width: 11px; height: 11px; border: 0; background: #2a4668; }
html[data-mood="tabletop"] .lvl__dots u + u { margin-left: 12px; }
html[data-mood="tabletop"] .lvl__dots u + u::before { content: ''; position: absolute; right: 100%; top: 50%; width: 12px; height: 2px; margin-top: -1px; background: #2a4668; }
html[data-mood="tabletop"] .lvl__dots u.done { background: color-mix(in srgb, var(--skin-accent) 70%, #2a4668); }
html[data-mood="tabletop"] .lvl__dots u.done + u::before, html[data-mood="tabletop"] .lvl__dots u.now + u::before { background: color-mix(in srgb, var(--skin-accent) 50%, #2a4668); }
html[data-mood="tabletop"] .lvl__dots u.now { background: var(--skin-accent); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--skin-accent) 70%, transparent); }
html[data-mood="tabletop"] .mhud .round-btn { width: 54px; height: 54px; border-radius: 14px; color: #fff; }
html[data-mood="tabletop"] .mhud .round-btn svg { width: 26px; height: 26px; }
/* the sign: the atom emblem, then the theme's name stacked in heavy white type */
html[data-mood="tabletop"] .logo-tab { padding: 6px 18px 6px 10px; gap: 10px; }
html[data-mood="tabletop"] .logo-tab__ic { display: none; }
html[data-mood="tabletop"] .plaque-logo .logo-tab__img:not([hidden]) { display: block; flex: none; width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--skin-accent) 45%, transparent)); }
html[data-mood="tabletop"] .logo-tab__img[hidden] { display: none; }
html[data-mood="tabletop"] .logo-tab:has(.logo-tab__img[hidden]) .logo-tab__ic { display: block; }
html[data-mood="tabletop"] .logo-tab__tx { letter-spacing: .02em; line-height: 1; gap: 2px; }
html[data-mood="tabletop"] #logo-tab-top { font-size: 19px; }
html[data-mood="tabletop"] #logo-tab-sub { font-size: 34px; }
html[data-mood="tabletop"] .mhud > .plaque-logo { flex: 0 1 230px; }

/* the finale's word, landing letter by letter over the circling camera */
.success { position: absolute; inset: 0; padding-top: 12%; overflow: hidden; z-index: 6; pointer-events: none; text-align: center; font-family: var(--skin-font, var(--font));
  font-weight: 800; font-style: italic; font-size: clamp(60px, 12vw, 170px); letter-spacing: .02em; line-height: 1; }
.success[hidden] { display: none; }
.success b { display: inline-block; opacity: 0; transform: skewX(-6deg) scale(2.8); filter: blur(10px);
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--skin-accent) 20%, #fff) 38%, color-mix(in srgb, var(--skin-accent) 70%, #fff) 62%, var(--skin-accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 40, 80, .55); paint-order: stroke fill;
  filter: drop-shadow(0 4px 0 rgba(0, 30, 70, .9)) drop-shadow(0 12px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 24px color-mix(in srgb, var(--skin-accent) 55%, transparent));
  animation: success-slam .55s cubic-bezier(.1, 1.3, .3, 1) both, success-pulse 1.6s ease-in-out 1.4s infinite; animation-delay: calc(var(--i) * 70ms + 400ms), calc(var(--i) * 70ms + 1.4s); }
@keyframes success-slam { 0% { opacity: 0; transform: skewX(-6deg) scale(2.8); filter: blur(10px) drop-shadow(0 0 0 transparent); } 60% { opacity: 1; transform: skewX(-6deg) scale(.92); filter: blur(0) drop-shadow(0 4px 0 rgba(0,30,70,.9)) drop-shadow(0 12px 22px rgba(0,0,0,.55)) drop-shadow(0 0 24px color-mix(in srgb, var(--skin-accent) 55%, transparent)); } 100% { opacity: 1; transform: skewX(-6deg) scale(1); filter: blur(0) drop-shadow(0 4px 0 rgba(0,30,70,.9)) drop-shadow(0 12px 22px rgba(0,0,0,.55)) drop-shadow(0 0 24px color-mix(in srgb, var(--skin-accent) 55%, transparent)); } }
@keyframes success-pulse { 50% { transform: skewX(-6deg) scale(1.04); } }
@media (max-width: 760px) { .success { padding-top: 22%; } }

/* the HUD floats over the scene: the stage fills the whole page and the bar sits on top of it with nothing
   behind its cards, so the desk and the door view run on under them; what is pinned to the stage's top edge
   (the note, the docked question panel) starts under the bar instead */
html[data-mood="tabletop"] body { position: relative; }
html[data-mood="tabletop"] .mhud { position: absolute; top: 0; left: 0; right: 0; z-index: 12; background: none; border-bottom: 0; box-shadow: none; }   /* above the cards' overlays, so its buttons always take a tap */
html[data-mood="tabletop"] .mhud::after { display: none; }
html[data-mood="tabletop"] .stage { position: absolute; inset: 0; }
html[data-mood="tabletop"] .note { top: calc(var(--hud-h, 90px) + 10px); }
html[data-mood="tabletop"] .door { top: calc(var(--hud-h, 90px) + 12px); bottom: 12px; max-height: none; height: fit-content; margin: auto 0;
  background: linear-gradient(180deg, rgba(18, 44, 82, .8), rgba(7, 22, 46, .86)); border: 1px solid rgba(160, 210, 255, .4); border-radius: 18px;
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
@media (max-width: 759px) { html[data-mood="tabletop"] .door { top: auto; margin: 0; } }

/* ---- the question card: a quiz card in the theme's own navy and cyan - a tab on top with the lock and a
   difficulty pill, the question big and centred, four chunky answer pills in four colours, stacked */
html[data-mood="tabletop"] .door { padding: 0; overflow: visible; border-radius: 22px; width: min(500px, 46%); }
html[data-mood="tabletop"] .door__crest { display: none; }
html[data-mood="tabletop"] .door__label { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); white-space: nowrap; max-width: calc(100% - 24px);
  padding: 7px 10px 7px 14px; gap: 10px; border-radius: 999px; font-size: 12px; letter-spacing: .1em; font-weight: 700; color: #eaf7ff;
  background: linear-gradient(180deg, #1c5fa8, #10407a); border: 2px solid rgba(160, 220, 255, .55); box-shadow: 0 5px 0 #092a52, 0 10px 22px rgba(0,0,0,.45); }
html[data-mood="tabletop"] .door__label::before { width: 12px; height: 12px; border-radius: 3px; background: none; box-shadow: none; animation: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/%3E%3C/svg%3E"); background-size: contain; }
html[data-mood="tabletop"] .door__sep { display: none; }
html[data-mood="tabletop"] .door__diff { margin-inline-start: 10px; padding: 3px 11px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #fff; font-weight: 800;
  background: #35b86b; box-shadow: 0 3px 0 #1f7a44, inset 0 1px 0 rgba(255,255,255,.35); }
html[data-mood="tabletop"] .door__diff[data-diff="normal"] { background: #ff9b2f; box-shadow: 0 3px 0 #b85f10, inset 0 1px 0 rgba(255,255,255,.35); }
html[data-mood="tabletop"] .door__diff[data-diff="hard"] { background: #ff5a6e; box-shadow: 0 3px 0 #a3283a, inset 0 1px 0 rgba(255,255,255,.35); }
html[data-mood="tabletop"] .door__q { padding: 34px 26px 6px; margin: 0; text-align: center; font-size: 24px; font-weight: 700; line-height: 1.25; color: #fff; letter-spacing: -.01em; }
html[data-mood="tabletop"] .door__opts { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px 20px 8px; }
html[data-mood="tabletop"] .door__opt { --pill: #2f7bff; --pill-dark: #164ea8; gap: 14px; padding: 12px 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,.28); color: #fff;
  font-size: 18px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 0 rgba(0,0,0,.25);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pill) 80%, #fff), var(--pill) 55%, color-mix(in srgb, var(--pill) 85%, #000));
  box-shadow: 0 6px 0 var(--pill-dark), 0 12px 20px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.35); }
html[data-mood="tabletop"] .door__opt:nth-child(2) { --pill: #7a5cff; --pill-dark: #4a35b0; }
html[data-mood="tabletop"] .door__opt:nth-child(3) { --pill: #ff8a3d; --pill-dark: #b5501a; }
html[data-mood="tabletop"] .door__opt:nth-child(4) { --pill: #3ec46d; --pill-dark: #1f8a46; }
html[data-mood="tabletop"] .door__opt i { width: 38px; height: 38px; border-radius: 50%; font-size: 18px; font-weight: 800; color: #fff; border: 0;
  background: color-mix(in srgb, var(--pill-dark) 85%, #000); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
html[data-mood="tabletop"] .door__opt:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--pill) 65%, #fff), var(--pill) 55%, color-mix(in srgb, var(--pill) 85%, #000)); border-color: #fff; transform: translateY(-2px); }
html[data-mood="tabletop"] .door__opt:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pill-dark), inset 0 2px 0 rgba(255,255,255,.35); }
html[data-mood="tabletop"] .door__opt.no { opacity: .55; filter: saturate(.3); text-decoration: line-through; box-shadow: 0 3px 0 rgba(0,0,0,.4); border-color: rgba(255,255,255,.15); background: #3a4a62; }
html[data-mood="tabletop"] .door__opt.no i { background: rgba(0,0,0,.4); color: #fff; }
html[data-mood="tabletop"] .door__opt.ok { --pill: #3ec46d; --pill-dark: #1f8a46; color: #fff; border-color: #fff; transform: scale(1.03); box-shadow: 0 6px 0 var(--pill-dark), 0 0 28px rgba(62,196,109,.7), inset 0 2px 0 rgba(255,255,255,.35); }
html[data-mood="tabletop"] .door__opt.ok i { background: #1f8a46; color: #fff; }
html[data-mood="tabletop"] .door__foot { margin: 6px 20px 16px; text-align: center; font-size: 12px; color: rgba(255,255,255,.7); }
html[data-mood="tabletop"] .door__toast { margin: 0 20px 16px; }
@media (max-width: 759px) {
  html[data-mood="tabletop"] .door { width: auto; max-height: 68%; overflow: auto; border-radius: 20px; }
  html[data-mood="tabletop"] .door__label { position: sticky; top: 8px; margin: 8px auto 0; display: inline-flex; transform: none; left: auto; }
  html[data-mood="tabletop"] .door__q { padding: 16px 18px 4px; font-size: 20px; }
  html[data-mood="tabletop"] .door__opts { gap: 10px; padding: 10px 14px 6px; }
  html[data-mood="tabletop"] .door__opt { padding: 10px 14px; font-size: 16px; gap: 12px; }
  html[data-mood="tabletop"] .door__opt i { width: 32px; height: 32px; font-size: 15px; }
}

/* the table's two buttons in place of the drawer: sound, and the way out */
#btn-mute[hidden], #btn-exit[hidden] { display: none; }
#btn-mute .ic-off, #btn-mute[aria-pressed="true"] .ic-on { display: none; }
#btn-mute[aria-pressed="true"] .ic-off { display: block; }
html[data-mood="tabletop"] .mhud__btns { gap: 10px; }
html[data-mood="tabletop"] #btn-exit, html[data-mood="tabletop"] #btn-back { color: #ffb4bf; }

/* a clean stage: no lesson strip, no key bar, no view toolbar (C, V, +, − and the drawer still work) */
html[data-mood="tabletop"] .lesson-host, html[data-mood="tabletop"] .hint, html[data-mood="tabletop"] .controls { display: none; }

/* the map: a floating navy panel */
html[data-mood="tabletop"] #minimap { left: 18px; bottom: 18px; padding: 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(22, 52, 92, .55), rgba(8, 26, 52, .62)); border: 1px solid rgba(160, 210, 255, .35);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 22px color-mix(in srgb, var(--skin-accent) 12%, transparent); }

/* phones: the sign and the time share the first row with the menu, the rest wrap under */
@media (max-width: 760px) {
  html[data-mood="tabletop"] .mhud { column-gap: 6px; row-gap: 6px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; }
  html[data-mood="tabletop"] .mhud__btns { order: 3; }
  html[data-mood="tabletop"] .mplq, html[data-mood="tabletop"] .mhud > .lvl { min-height: 54px; }
  html[data-mood="tabletop"] .logo-tab { min-height: 54px; }
  html[data-mood="tabletop"] .mhud > .plaque-logo { flex: 1 1 40%; min-width: 0; }
  html[data-mood="tabletop"] .plaque-logo #game-logo:not([hidden]) { height: 54px; }
  html[data-mood="tabletop"] .logo-tab { padding: 5px 10px; gap: 7px; }
  html[data-mood="tabletop"] .logo-tab__ic { width: 26px; height: 26px; }
  html[data-mood="tabletop"] #logo-tab-top { font-size: 10.5px; }
  html[data-mood="tabletop"] #logo-tab-sub { font-size: 17px; }
  html[data-mood="tabletop"] .mplq--time { min-width: 150px; }
  html[data-mood="tabletop"] .mplq { padding: 6px 12px 6px 10px; gap: 8px; }
  html[data-mood="tabletop"] .mplq__ico, html[data-mood="tabletop"] .mplq__art { width: 34px; height: 34px; }
  html[data-mood="tabletop"] .mplq--time b { font-size: 22px; } html[data-mood="tabletop"] .mplq--doors b, html[data-mood="tabletop"] .mplq__head b { font-size: 20px; }
  html[data-mood="tabletop"] .mplq__best { font-size: 10px; }
  html[data-mood="tabletop"] .find { width: 18px; height: 18px; margin-right: 5px; }
  html[data-mood="tabletop"] .mplq--found { min-width: 150px; }
  html[data-mood="tabletop"] .mplq__head { flex-direction: column; align-items: flex-start; gap: 0; } html[data-mood="tabletop"] .mplq__head b { font-size: 20px; }
  html[data-mood="tabletop"] .mplq--found { min-width: 128px; }
  html[data-mood="tabletop"] .mhud > .lvl { padding: 5px 10px; gap: 6px; }
  html[data-mood="tabletop"] .plaque-logo .logo-tab__img:not([hidden]) { width: 40px; height: 40px; }
  html[data-mood="tabletop"] #logo-tab-top { font-size: 13px; } html[data-mood="tabletop"] #logo-tab-sub { font-size: 22px; }
  html[data-mood="tabletop"] .lvl::before { font-size: 11px; } html[data-mood="tabletop"] .lvl__dots u { width: 8px; height: 8px; }
  html[data-mood="tabletop"] .lvl__dots u + u { margin-left: 8px; } html[data-mood="tabletop"] .lvl__dots u + u::before { width: 8px; }
  html[data-mood="tabletop"] .mhud .round-btn { width: 44px; height: 44px; }
  html[data-mood="tabletop"] .mplq--doors, html[data-mood="tabletop"] .mplq--found { min-width: 112px; }
  html[data-mood="tabletop"] .mhud > .lvl { min-width: 120px; padding: 5px 10px; gap: 7px; }
  html[data-mood="tabletop"] .lvl b { font-size: 16px; }
  html[data-mood="tabletop"] .lvl__dots { gap: 5px; } html[data-mood="tabletop"] .lvl__dots u { width: 7px; height: 7px; }
  html[data-mood="tabletop"] .mhud .round-btn { width: 44px; height: 44px; }
  html[data-mood="tabletop"] #minimap { left: 10px; bottom: 10px; padding: 6px; width: 150px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  html[data-mood="tabletop"] .mhud { padding: 6px 10px 6px; column-gap: 6px; }
  html[data-mood="tabletop"] .mhud > .lvl, html[data-mood="tabletop"] .mplq, html[data-mood="tabletop"] .logo-tab { min-height: 44px; }
  html[data-mood="tabletop"] .mhud > .lvl { flex: 0 1 auto; margin-left: auto; min-width: 0; }
  html[data-mood="tabletop"] .mhud > .plaque-logo { flex: 0 1 170px; }
  html[data-mood="tabletop"] .logo-tab { padding: 4px 10px; gap: 8px; }
  html[data-mood="tabletop"] .plaque-logo .logo-tab__img:not([hidden]) { width: 36px; height: 36px; }
  html[data-mood="tabletop"] #logo-tab-top { font-size: 12px; } html[data-mood="tabletop"] #logo-tab-sub { font-size: 20px; }
  html[data-mood="tabletop"] .mhud > .plaque-logo { flex: 0 1 200px; }
  html[data-mood="tabletop"] .plaque-logo #game-logo:not([hidden]) { height: 44px; }
  html[data-mood="tabletop"] .mplq__ico, html[data-mood="tabletop"] .mplq__art { width: 34px; height: 34px; }
  html[data-mood="tabletop"] .mplq--time b { font-size: 22px; } html[data-mood="tabletop"] .mplq--doors b, html[data-mood="tabletop"] .mplq__head b { font-size: 20px; }
  html[data-mood="tabletop"] .mhud .round-btn { width: 36px; height: 36px; }
  html[data-mood="tabletop"] #minimap { width: 128px; left: 8px; bottom: 8px; padding: 5px; }
}

/* ---- the tabletop's screen-space set: the desk is the page itself, the dressing is transparent pictures
   cropped by the viewport's edge, all under the (transparent) canvas so nothing can cover the board. */
html[data-mood="tabletop"] .stage { background: radial-gradient(circle at 50% 45%, #102746 0%, #08182c 45%, #040b15 100%); }
html[data-mood="tabletop"] .stage canvas { z-index: 2; }
html[data-mood="tabletop"] .stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(42% 34% at 86% 10%, rgba(255,170,80,0.13), transparent 70%),
    radial-gradient(36% 30% at 6% 90%, rgba(255,170,80,0.09), transparent 70%),
    radial-gradient(50% 44% at 50% 52%, rgba(0,140,255,0.10), transparent 72%); }
/* a theme that brings its own desk photograph carries its light and props in the picture: no painted glows on top */
html[data-mood="tabletop"] .stage--photo::before { display: none; }
.env-frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; display: none; }
html[data-mood="tabletop"] .env-frame { display: block; }
.env { position: absolute; display: none; filter: drop-shadow(0 16px 26px rgba(0,0,0,.5)); }
html[data-mood="tabletop"] .env.on { display: block; }
html[data-mood="tabletop"] .env--notebook { left: -4vw; bottom: 8vh; width: 22vw; transform: rotate(-8deg); }
html[data-mood="tabletop"] .env--pencil { left: 15.5vw; bottom: 13vh; width: 5vw; transform: rotate(24deg); }
html[data-mood="tabletop"] .env--books { right: -3vw; top: 38vh; width: 18vw; transform: rotate(4deg); }
html[data-mood="tabletop"] .env--newton { right: 1vw; bottom: -2vh; width: 14vw; }
html[data-mood="tabletop"] .env--lamp { right: -2vw; top: 8vh; width: 14vw; }
@media (max-width: 760px) {
  html[data-mood="tabletop"] .env--notebook { width: 38vw; left: -10vw; }
  html[data-mood="tabletop"] .env--books { width: 30vw; right: -9vw; }
  html[data-mood="tabletop"] .env--lamp { width: 26vw; right: -7vw; }
  html[data-mood="tabletop"] .env--pencil, html[data-mood="tabletop"] .env--newton { display: none; }
}

/* the finale: the bar, the map and any note fade out behind the lap and the word */
body.finale .mhud, body.finale #minimap, body.finale .note { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
/* two things the bar does without on the tabletop: the found sockets and the best line */
html[data-mood="tabletop"] .finds, html[data-mood="tabletop"] .mplq__best { display: none; }
/* the question card on phones: the tab sits inside the card, centred above the question; no toast under it */
html[data-mood="tabletop"] .door__toast { display: none !important; }
@media (max-width: 759px) {
  html[data-mood="tabletop"] .door__label { position: relative; left: auto; top: auto; margin: 12px auto 0; display: table; transform: none; }
  html[data-mood="tabletop"] .door__q { padding-top: 12px; }
}

/* every word on the bar white and readable over anything behind the glass */
html[data-mood="tabletop"] .mplq span, html[data-mood="tabletop"] .lvl::before, html[data-mood="tabletop"] .lvl b::before { color: #fff; opacity: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 6px rgba(0, 0, 0, .35); }
html[data-mood="tabletop"] .mplq b, html[data-mood="tabletop"] .lvl b { text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 8px rgba(0, 0, 0, .4); }
html[data-mood="tabletop"] .mplq--time.over b { color: #ffb0bb; }
html[data-mood="tabletop"] .mplq__art em { left: auto; right: -7px; top: -6px; bottom: auto; font-size: 11px; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
/* room under the bar before anything else starts */
@media (min-width: 760px) { html[data-mood="tabletop"] .door { top: calc(var(--hud-h, 90px) + 18px); } }
html[data-mood="tabletop"] .note { top: calc(var(--hud-h, 90px) + 16px); }
/* the card's tab never runs past its own edge: it shrinks before it overflows */
html[data-mood="tabletop"] .door__label { max-width: calc(100% - 20px); }
@media (max-width: 759px) {
  html[data-mood="tabletop"] .door__label { font-size: 11px; letter-spacing: .06em; padding: 6px 8px 6px 12px; gap: 8px; }
  html[data-mood="tabletop"] .door__diff { font-size: 10px; padding: 3px 9px; }
}

/* the drawn sign (a language without a logo picture) sizes to its own words inside the pill: nothing clipped */
html[data-mood="tabletop"] .mhud > .plaque-logo { flex: none; width: max-content; max-width: none; min-width: 0; }
html[data-mood="tabletop"] .logo-tab { width: auto; min-height: 0; padding: 4px 14px 4px 8px; background: none; border: 0; box-shadow: none; }
html[data-mood="tabletop"] .logo-tab__tx b { overflow: visible; text-overflow: clip; white-space: nowrap; }
html[data-mood="tabletop"] #logo-tab-top { font-size: 12px; letter-spacing: .08em; }
html[data-mood="tabletop"] #logo-tab-sub { font-size: 24px; }
@media (max-width: 899px) { html[data-mood="tabletop"] #logo-tab-top { font-size: 10px; } html[data-mood="tabletop"] #logo-tab-sub { font-size: 18px; } html[data-mood="tabletop"] .logo-tab__ic { width: 28px; height: 28px; } }

/* a short screen (a phone on its side): the quiz card has only the height under the bar, so it takes the compact
   sizes whatever the width, two answers to a row when the card is wide enough, and never runs off the page */
@media (max-height: 520px) {
  html[data-mood="tabletop"] .door { top: calc(var(--hud-h, 70px) + 10px); bottom: auto; margin: 0; height: auto; max-height: calc(100dvh - var(--hud-h, 70px) - 20px); overflow: auto; width: min(640px, 72%); }
  html[data-mood="tabletop"] .door__label { position: sticky; top: 6px; margin: 6px auto 0; display: inline-flex; transform: none; left: auto; }
  html[data-mood="tabletop"] .door__q { padding: 8px 16px 2px; font-size: 17px; line-height: 1.2; }
  html[data-mood="tabletop"] .door__opts { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 12px 4px; }
  html[data-mood="tabletop"] .door__opt { padding: 6px 10px; font-size: 13.5px; gap: 8px; line-height: 1.15; min-height: 0; }
  html[data-mood="tabletop"] .door__opt i { width: 26px; height: 26px; font-size: 13px; }
  html[data-mood="tabletop"] .door__foot { margin: 2px 12px 8px; font-size: 11px; }
}
@media (max-height: 520px) and (max-width: 759px) {
  html[data-mood="tabletop"] .door { width: auto; left: 10px; right: 10px; }
}

/* the tabletop's desk photograph on the page itself, under the transparent stage, so the cards float over it; a
   screen taller than it is wide takes the theme's portrait desk when it has one (the engine sets desk-tall) */
html.desk-photo body { background: #040b15 var(--desk-wide) center / cover no-repeat; }
html.desk-photo.desk-tall body { background-image: var(--desk-tall); }

/* ---- the level-complete card on the tabletop: a banner tab with a star over the card, the time in a lit panel
   with the HUD's stopwatch, four stat tiles with icons, and the next and retry pills in the quiz card's colours.
   The tab and icons exist only here: every other mood keeps the plain card */
.clear__tab, .clear__ico, .stat__ico { display: none; }
html[data-mood="tabletop"] #ov-clear .panel::after { display: none; }   /* the banner tab sits on that edge */
html[data-mood="tabletop"] #ov-clear .panel { overflow: visible; padding-top: 34px; border-radius: 22px; background: linear-gradient(180deg, rgba(18, 44, 82, .92), rgba(7, 22, 46, .95)); border: 1px solid rgba(160, 210, 255, .4); }
html[data-mood="tabletop"] .clear__tab { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; max-width: calc(100% - 24px);
  padding: 8px 22px 8px 14px; border-radius: 999px; background: linear-gradient(180deg, #1d4f8f, #0f2e5c); border: 2px solid rgba(160, 210, 255, .55); box-shadow: 0 6px 0 #071b30, 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3); }
html[data-mood="tabletop"] .clear__tab b { font-size: 22px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #ffd54a; text-shadow: 0 2px 0 #8a5a00, 0 0 18px rgba(255, 200, 60, .45); overflow: hidden; text-overflow: ellipsis; }
html[data-mood="tabletop"] .clear__star { width: 34px; height: 34px; flex: none; color: #ffd54a; filter: drop-shadow(0 2px 0 #8a5a00) drop-shadow(0 0 10px rgba(255, 200, 60, .6)); }
html[data-mood="tabletop"] #ov-clear .result { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: start; padding: 12px 16px; max-width: 420px;
  background: linear-gradient(180deg, rgba(10, 30, 60, .9), rgba(6, 18, 40, .9)); border: 1px solid rgba(160, 210, 255, .35); }
html[data-mood="tabletop"] .clear__ico:not([hidden]) { display: block; grid-row: 1 / span 3; width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
html[data-mood="tabletop"] #ov-clear .result span { grid-column: 2; }
html[data-mood="tabletop"] #ov-clear .result b { grid-column: 2; color: #ffb53a; text-shadow: 0 3px 0 #7a3f00, 0 0 24px rgba(255, 170, 40, .4); font-size: clamp(2.4rem, 9vw, 3.2rem); margin: 0; }
html[data-mood="tabletop"] #ov-clear .result em, html[data-mood="tabletop"] #ov-clear .result small { grid-column: 2; justify-self: start; }
html[data-mood="tabletop"] #ov-clear .result em.best { font-size: 13px; padding: 4px 14px; }
html[data-mood="tabletop"] #ov-clear .stats--four { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; }
html[data-mood="tabletop"] #ov-clear .stats--four div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: start; padding: 8px 10px; border-radius: 14px;
  background: rgba(6, 18, 40, .7); border: 1px solid rgba(160, 210, 255, .25); }
html[data-mood="tabletop"] .stat__ico { display: grid; place-items: center; grid-row: 1 / span 2; width: 38px; height: 38px; color: #cfe2ff; }
html[data-mood="tabletop"] .stat__ico svg, html[data-mood="tabletop"] .stat__ico img:not([hidden]) { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
html[data-mood="tabletop"] .stat__ico--bad { color: #ff5a6e; }
html[data-mood="tabletop"] #ov-clear .stats--four span { grid-column: 2; margin: 0; }
html[data-mood="tabletop"] #ov-clear .stats--four b { grid-column: 2; font-size: 18px; color: #fff; }
html[data-mood="tabletop"] #ov-clear .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html[data-mood="tabletop"] #ov-clear .btn { --pill: #3ec46d; --pill-dark: #1f8a46; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,.3); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pill) 70%, #fff) 0%, var(--pill) 45%, color-mix(in srgb, var(--pill) 85%, #000) 100%); box-shadow: 0 5px 0 var(--pill-dark), 0 10px 20px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.35); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
html[data-mood="tabletop"] #ov-clear .btn--ghost { --pill: #2f7bff; --pill-dark: #164ea8; }
html[data-mood="tabletop"] #ov-clear .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--pill-dark), inset 0 2px 0 rgba(255,255,255,.35); }
html[data-mood="tabletop"] #ov-clear #btn-next::before { content: '\25B6'; font-size: 13px; }
html[data-mood="tabletop"] #ov-clear #btn-retry::before { content: '\21BB'; font-size: 19px; line-height: 1; }
@media (max-width: 479px) {
  html[data-mood="tabletop"] .clear__tab { padding: 6px 16px 6px 10px; gap: 8px; } html[data-mood="tabletop"] .clear__tab b { font-size: 17px; } html[data-mood="tabletop"] .clear__star { width: 26px; height: 26px; }
  html[data-mood="tabletop"] .clear__ico:not([hidden]) { width: 56px; height: 56px; }
  html[data-mood="tabletop"] #ov-clear .btn { padding: 11px 10px; font-size: 15px; }
  html[data-mood="tabletop"] #ov-clear .stats--four span { font-size: 8.5px; letter-spacing: .1em; line-height: 1.15; }
  html[data-mood="tabletop"] #ov-clear .stats--four div { column-gap: 8px; padding: 7px 8px; } html[data-mood="tabletop"] .stat__ico { width: 32px; height: 32px; } html[data-mood="tabletop"] .stat__ico svg, html[data-mood="tabletop"] .stat__ico img:not([hidden]) { width: 28px; height: 28px; }
  html[data-mood="tabletop"] #ov-clear .result em.best { font-size: 11.5px; padding: 3px 10px; }
}
@media (max-height: 520px) {
  html[data-mood="tabletop"] #ov-clear .panel { padding-top: 26px; }
  html[data-mood="tabletop"] #ov-clear .stats--four { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
  html[data-mood="tabletop"] #ov-clear .result { padding: 6px 12px; } html[data-mood="tabletop"] .clear__ico:not([hidden]) { width: 48px; height: 48px; }
  html[data-mood="tabletop"] #ov-clear .btn { padding: 8px 12px; font-size: 15px; }
}

/* ---- the painted board (a theme with art.board), after the designer's sheet: a steel frame with gold corner
   brackets as a border picture (so it fits any card size and language), a plank banner with the star medal over
   the top edge, the time in a wide inset with the stopwatch, four icon-and-number tiles in small insets (no
   labels: the icons say it), and two round picture buttons. Every panel piece is a border picture with its
   middle filled, so nothing is drawn by CSS inside the frame */
html.board[data-mood="tabletop"] #ov-clear .panel { border: 58px solid transparent; border-image: var(--board-frame) 115 / 58px / 0 stretch; border-radius: 0; padding: 34px 2px 6px; background: #0c1a2e; background-clip: border-box; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
html.board[data-mood="tabletop"] #ov-clear .panel::before { display: none; }
html.board[data-mood="tabletop"] .clear__tab { container-type: inline-size; top: -58px; transform: translate(-50%, -44%); width: min(112%, 560px); max-width: none; aspect-ratio: 1000 / 568; padding: 0; background: var(--board-banner) center / 100% 100% no-repeat; border: 0; box-shadow: none; border-radius: 0; display: block; }
html.board[data-mood="tabletop"] .clear__star { display: none; }
html.board[data-mood="tabletop"] .clear__tab b { position: absolute; left: 10%; right: 10%; top: 58%; bottom: 12%; display: flex; align-items: center; justify-content: center; font-size: clamp(15px, 6.4cqw, 32px); font-weight: 800; text-transform: uppercase; color: #fff4d8; text-shadow: 0 2px 0 #6b3a10, 0 0 10px rgba(0,0,0,.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.board[data-mood="tabletop"] #ov-clear .result { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; max-width: none; margin: 0 0 10px; padding: 12px 18px; border: 1px solid rgba(130, 170, 220, .16); border-radius: 16px; background: #13263f; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
html.board.board-words[data-mood="tabletop"] .clear__tab b { display: none; }
/* the painted board keeps its picture layout in every language (icons on the left, play left, retry right):
   only the words themselves run right to left */
html.board[data-mood="tabletop"] #ov-clear .result, html.board[data-mood="tabletop"] #ov-clear .stats--four, html.board[data-mood="tabletop"] #ov-clear .actions { direction: ltr; }
html.board[data-mood="tabletop"]:lang(he) #ov-clear .result em, html.board[data-mood="tabletop"]:lang(ar) #ov-clear .result em, html.board[data-mood="tabletop"]:lang(he) #ov-clear .result small, html.board[data-mood="tabletop"]:lang(ar) #ov-clear .result small { direction: rtl; }
html.board[data-mood="tabletop"] #ov-clear .result span { display: none; }
html.board[data-mood="tabletop"] .clear__ico:not([hidden]) { display: block; grid-row: 1 / span 2; width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
html.board[data-mood="tabletop"] #ov-clear .result b { grid-column: 2; color: #ffb21f; font-size: clamp(2.5rem, 10vw, 3.6rem); font-weight: 800; text-shadow: 0 3px 0 #7a3f00, 0 0 22px rgba(255, 170, 40, .35); margin: 0; }
html.board[data-mood="tabletop"] #ov-clear .result em, html.board[data-mood="tabletop"] #ov-clear .result small { grid-column: 1 / -1; justify-self: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html.board[data-mood="tabletop"] .clear__ico:not([hidden]) { grid-row: 1; }
html.board[data-mood="tabletop"] #ov-clear .result em.best { margin-top: 0; font-size: 12px; padding: 3px 12px; }
html.board[data-mood="tabletop"] #ov-clear .stats--four { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 8px; }
html.board[data-mood="tabletop"] #ov-clear .stats--four div { display: flex; align-items: center; gap: 14px; min-height: 0; padding: 10px 14px; border: 1px solid rgba(130, 170, 220, .16); border-radius: 14px; background: #13263f; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); text-align: start; }
html.board[data-mood="tabletop"] #ov-clear .stats--four span { display: none; }
html.board[data-mood="tabletop"] #ov-clear .stats--four b { font-size: 24px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); white-space: nowrap; }
html.board[data-mood="tabletop"] .stat__ico { display: grid; place-items: center; width: 46px; height: 46px; }
html.board[data-mood="tabletop"] .stat__ico img:not([hidden]) { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
html.board[data-mood="tabletop"] .stat__ico:has(img:not([hidden])) svg { display: none; }
html.board[data-mood="tabletop"] #ov-clear .actions { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 10px; margin: 4px 0 -68px; position: relative; z-index: 2; }
/* the medal and banner stand ~80px above the frame and the buttons hang a little below it: the overlay pads for
   both and the frame centres with auto margins, so the whole card (medal to buttons) sits mid-screen (Omri 3 Oct) */
html.board[data-mood="tabletop"] #ov-clear .panel { margin-bottom: 40px; }
@media (min-height: 521px) {
  html.board[data-mood="tabletop"] #ov-clear { padding: 100px 20px 40px; }
  html.board[data-mood="tabletop"] #ov-clear .panel { margin: auto; }
}
html.board[data-mood="tabletop"] #ov-clear .btn { width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; background: var(--board-next) center / contain no-repeat; box-shadow: none; color: transparent; font-size: 1px; line-height: 0; text-shadow: none; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
html.board[data-mood="tabletop"] #ov-clear .btn--ghost { background-image: var(--board-retry); }
html.board[data-mood="tabletop"] #ov-clear .btn::before { content: none; }
html.board[data-mood="tabletop"] #ov-clear .btn:hover { transform: translateY(-2px) scale(1.04); }
html.board[data-mood="tabletop"] #ov-clear .btn:active { transform: translateY(3px) scale(.98); filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
@media (max-width: 479px) {
  html.board[data-mood="tabletop"] #ov-clear .panel { border-width: 40px; border-image-width: 40px; padding: 26px 0 4px; }
  html.board[data-mood="tabletop"] .clear__tab { top: -40px; width: min(120%, 400px); }
  html.board[data-mood="tabletop"] #ov-clear .result { padding: 8px 12px; column-gap: 8px; margin-bottom: 8px; }
  html.board[data-mood="tabletop"] .clear__ico:not([hidden]) { width: 56px; height: 56px; }
  html.board[data-mood="tabletop"] #ov-clear .result em.best { font-size: 11px; padding: 2px 10px; }
  html.board[data-mood="tabletop"] #ov-clear .stats--four { gap: 8px; }
  html.board[data-mood="tabletop"] #ov-clear .stats--four div { gap: 8px; padding: 8px 10px; }
  html.board[data-mood="tabletop"] #ov-clear .stats--four b { font-size: 18px; }
  html.board[data-mood="tabletop"] .stat__ico, html.board[data-mood="tabletop"] .stat__ico img:not([hidden]) { width: 36px; height: 36px; }
  html.board[data-mood="tabletop"] #ov-clear .actions { gap: 8px; margin-bottom: -52px; }
  html.board[data-mood="tabletop"] #ov-clear .btn { width: 68px; height: 68px; }
}
@media (max-height: 520px) {
  html.board[data-mood="tabletop"] #ov-clear .panel { border-width: 30px; border-image-width: 30px; padding: 22px 2px 2px; width: min(640px, 100%); margin-top: 40px; }
  /* a short screen has no room for the medal: the banner shows its plank alone, astride the frame's top band */
  html.board[data-mood="tabletop"] .clear__tab { top: -30px; width: min(50%, 240px); height: 62px; aspect-ratio: auto; transform: translate(-50%, -40%); background: var(--board-banner) center bottom / 100% auto no-repeat; }
  html.board[data-mood="tabletop"] .clear__tab b { top: 14%; bottom: 16%; font-size: clamp(13px, 6.4cqw, 22px); }
  html.board[data-mood="tabletop"] #ov-clear .result { padding: 4px 10px; margin-bottom: 6px; }
  html.board[data-mood="tabletop"] .clear__ico:not([hidden]) { width: 48px; height: 48px; }
  html.board[data-mood="tabletop"] #ov-clear .result b { font-size: 2rem; }
  html.board[data-mood="tabletop"] #ov-clear .stats--four { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 4px; }
  html.board[data-mood="tabletop"] #ov-clear .stats--four div { gap: 6px; padding: 5px 8px; min-width: 0; }
  html.board[data-mood="tabletop"] #ov-clear .stats--four b { font-size: 17px; }
  html.board[data-mood="tabletop"] .stat__ico, html.board[data-mood="tabletop"] .stat__ico img:not([hidden]) { width: 30px; height: 30px; }
  html.board[data-mood="tabletop"] #ov-clear .actions { gap: 6px; margin: 0 0 -40px; }
  html.board[data-mood="tabletop"] #ov-clear .panel { margin-bottom: 24px; }
  html.board[data-mood="tabletop"] #ov-clear .btn { width: 54px; height: 54px; }
}

/* one letter spacing everywhere on the tabletop: the tracked-out small caps of the classic HUD and cards read
   badly in Poppins at these sizes, so every rule above that spreads or tightens letters is overruled here */
html[data-mood="tabletop"], html[data-mood="tabletop"] * { letter-spacing: normal !important; }

/* (kept last on purpose: the pill's phone tiers must come after the card tiers above to win the cascade) */
/* ---- the bar is one glass pill, centred, its parts divided by hairlines - the sign on its own plaque at the
   left, DOORS, FOUND and TIME in a row, then LEVEL and the buttons as rounded squares. Phones get the same pill
   at a compact size: one row in landscape, two rows in portrait (the sign, level and buttons over the counters) */
@media (min-width: 0) {
  html[data-mood="tabletop"] .mhud { left: 50%; right: auto; top: 14px; transform: translateX(-50%); width: max-content; max-width: none; zoom: var(--hud-zoom, 1);
    flex-wrap: nowrap; align-items: center; column-gap: 0; padding: 7px 8px 7px 7px; border-radius: 999px; overflow: visible;
    background: linear-gradient(180deg, rgba(22, 52, 92, .55), rgba(8, 26, 52, .62)); border: 1px solid rgba(160, 210, 255, .35);
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(200, 230, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 30px color-mix(in srgb, var(--skin-accent) 16%, transparent); }
  html[data-mood="tabletop"] .mhud > .plaque-logo, html[data-mood="tabletop"] .mplq { flex: none; min-width: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 0; }
  html[data-mood="tabletop"] .mplq::before { display: none; }
  html[data-mood="tabletop"] .mhud > .plaque-logo { order: 1; padding: 0 14px 0 0; }
  html[data-mood="tabletop"] .plaque-logo #game-logo:not([hidden]) { height: 64px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
  html[data-mood="tabletop"] .mplq { padding: 4px 22px; gap: 12px; border-left: 1px solid rgba(160, 210, 255, .28); }
  html[data-mood="tabletop"] .mplq--doors { order: 2; } html[data-mood="tabletop"] .mplq--found { order: 3; } html[data-mood="tabletop"] .mplq--time { order: 4; border-right: 1px solid rgba(160, 210, 255, .28); }
  html[data-mood="tabletop"] .mplq span { font-size: 13px; letter-spacing: .1em; color: #cfe2ff; }
  html[data-mood="tabletop"] .mplq--doors b, html[data-mood="tabletop"] .mplq__head b { font-size: 30px; }
  html[data-mood="tabletop"] .mplq--found { align-items: center; }
  html[data-mood="tabletop"] .mplq__body { gap: 2px; }
  html[data-mood="tabletop"] .mplq__head { flex-direction: column; align-items: flex-start; gap: 0; }
  html[data-mood="tabletop"] .find { width: 18px; height: 18px; margin-right: 6px; }
  html[data-mood="tabletop"] .mplq--time b { font-size: 32px; }
  html[data-mood="tabletop"] .mplq__best { color: #cfe2ff; }
  html[data-mood="tabletop"] .mplq__ico, html[data-mood="tabletop"] .mplq__art { width: 52px; height: 52px; }
  html[data-mood="tabletop"] .mhud > .lvl { order: 5; flex: none; margin-left: 14px; min-height: 0; height: 64px; padding: 0 18px; border-radius: 18px; gap: 10px;
    background: linear-gradient(180deg, rgba(30, 64, 110, .6), rgba(12, 34, 66, .7)); border: 1px solid rgba(160, 210, 255, .4); box-shadow: inset 0 1px 0 rgba(200,230,255,.3); }
  html[data-mood="tabletop"] .lvl::before { font-size: 13px; letter-spacing: .1em; color: #cfe2ff; }
  html[data-mood="tabletop"] .lvl b { font-size: 30px; }
  html[data-mood="tabletop"] .lvl__dots { display: none; }
  html[data-mood="tabletop"] .mhud__btns { order: 6; margin-left: 8px; gap: 8px; }
  html[data-mood="tabletop"] .mhud .round-btn { width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(30, 64, 110, .6), rgba(12, 34, 66, .7)); border: 1px solid rgba(160, 210, 255, .4); box-shadow: inset 0 1px 0 rgba(200,230,255,.3); }
}
/* landscape phones and small tablets: the same row, compact */
@media (max-width: 899px) {
  html[data-mood="tabletop"] .mhud { top: max(8px, env(safe-area-inset-top)); padding: 5px 6px; }
  html[data-mood="tabletop"] .plaque-logo #game-logo:not([hidden]) { height: 44px; }
  html[data-mood="tabletop"] .mhud > .plaque-logo { padding: 0 8px 0 0; }
  html[data-mood="tabletop"] .mplq { padding: 2px 12px; gap: 8px; }
  html[data-mood="tabletop"] .mplq span, html[data-mood="tabletop"] .lvl::before { font-size: 10px; letter-spacing: .08em; }
  html[data-mood="tabletop"] .mplq--doors b, html[data-mood="tabletop"] .mplq__head b, html[data-mood="tabletop"] .mplq--time b, html[data-mood="tabletop"] .lvl b { font-size: 20px; }
  html[data-mood="tabletop"] .mplq__best { font-size: 9px; }
  html[data-mood="tabletop"] .mplq__ico, html[data-mood="tabletop"] .mplq__art { width: 34px; height: 34px; }
  html[data-mood="tabletop"] .find { width: 13px; height: 13px; margin-right: 4px; border-width: 1.5px; }
  html[data-mood="tabletop"] .mhud > .lvl { height: 44px; padding: 0 12px; border-radius: 13px; gap: 6px; margin-left: 8px; }
  html[data-mood="tabletop"] .mhud__btns { margin-left: 6px; gap: 6px; }
  html[data-mood="tabletop"] .mhud .round-btn { width: 44px; height: 44px; border-radius: 13px; }
  html[data-mood="tabletop"] .mhud .round-btn svg { width: 20px; height: 20px; }
}

/* narrow phones: the same single line, down to icons and numbers - the icons say what each count is - and the
   whole pill is zoomed to fit the width (see hudFit in game.js), so it is always one piece, never a stack */
@media (max-width: 479px) {
  html[data-mood="tabletop"] .mplq span, html[data-mood="tabletop"] .mplq__best, html[data-mood="tabletop"] .lvl::before { display: none; }
  html[data-mood="tabletop"] .mplq { padding: 2px 6px; gap: 4px; }
  html[data-mood="tabletop"] .mplq__ico, html[data-mood="tabletop"] .mplq__art { width: 30px; height: 30px; }
  html[data-mood="tabletop"] .mplq--doors b, html[data-mood="tabletop"] .mplq__head b, html[data-mood="tabletop"] .mplq--time b, html[data-mood="tabletop"] .lvl b { font-size: 19px; }
  html[data-mood="tabletop"] .mplq__body { gap: 1px; }
  html[data-mood="tabletop"] .find { width: 9px; height: 9px; margin-right: 3px; border-width: 1px; }
  html[data-mood="tabletop"] .plaque-logo #game-logo:not([hidden]) { height: 40px; }
  html[data-mood="tabletop"] .mhud > .lvl { padding: 0 7px; margin-left: 4px; height: 40px; min-width: 0; flex: none; }
  html[data-mood="tabletop"] .lvl b::before { content: 'L'; font-size: 11px; letter-spacing: .06em; margin-right: 2px; color: #cfe2ff; }
  html[data-mood="tabletop"] .mhud .round-btn { width: 36px; height: 36px; }
  html[data-mood="tabletop"] .mhud__btns { gap: 4px; }
  html[data-mood="tabletop"] .mhud > .plaque-logo { padding-inline: 4px; }
  /* a phone shows the sign's emblem alone: the words would cost the whole bar its size */
  html[data-mood="tabletop"] .plaque-logo #game-logo:not([hidden]) { display: none; }
  html[data-mood="tabletop"] .plaque-logo:has(#game-logo:not([hidden])) .logo-tab { display: flex; }
  html[data-mood="tabletop"] .logo-tab { padding: 2px 4px; gap: 0; min-height: 0; width: auto; background: none; border: 0; box-shadow: none; }
  html[data-mood="tabletop"] .logo-tab__tx { display: none; }
  html[data-mood="tabletop"] .logo-tab__img:not([hidden]) { width: 38px; height: 38px; }
  html[data-mood="tabletop"] .logo-tab__img:not([hidden]) ~ .logo-tab__ic, html[data-mood="tabletop"] .logo-tab:has(.logo-tab__img:not([hidden])) .logo-tab__ic { display: none; }
}