/* Kaçış Odası (docs/specs/escape-room.md): one room (Bütün sınıf, Tek oyuncu) or two side by side (İki takım). Each
   room shows its head (name, locks, clock), a code-drawn SVG scene with the five locks, the door-code strip and the
   card (the lock's question, or the keypad at the door). Scene colours are local tokens with dark and high-contrast
   values; text colours come from tokens.css. Only transform and opacity animate, on inner SVG groups and the card, so
   measured boxes stand still. Reduced motion stops everything on the stage. */

#arenaBody:has(> .escape-arena) { display: flex; flex-direction: column; overflow: hidden; padding: 10px 16px 12px; }
.escape-arena { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; }
.escape-arena > #arenaPlay.arena-play--escape { display: flex; flex: 1; min-height: 0; margin: 0; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; }

.escape-stage {
  --wall: #f4ead8; --wall-line: #e3d4ba; --floor: #c9a77c; --floor-line: #b08c60; --window: #cfe8f7; --window-bar: #f4ead8;
  --wood: #9a6a3c; --wood-2: #b9824c; --wood-band: #6e4724; --steel: #8d99a8; --steel-2: #a9b4c1; --dark-space: #3b3f4a;
  --brass: #d9a520; --brass-line: #8a6510; --metal: #6b7584; --gold-bar: #f2c94c; --door: #2f6f8f; --door-panel: #3d84a8;
  --frame: #5b4a3a; --light: #fff6c7; --badge-off: #8b93a1; --badge-now: #e0a800; --badge-open: #2f9e5b;
  display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0;
  -webkit-user-select: none; user-select: none; font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .escape-stage {
  --wall: #2a3140; --wall-line: #353e50; --floor: #4a3a2c; --floor-line: #5c4836; --window: #1d3a52; --window-bar: #2a3140;
  --wood: #7a5230; --wood-2: #8f6238; --wood-band: #4d321a; --steel: #5d6878; --steel-2: #707c8d; --dark-space: #141821;
  --door: #24566f; --door-panel: #2e6a88; --frame: #3c3128; --light: #ffe680;
}
.escape-rooms { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; }
.escape-stage[data-teams="true"] .escape-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- A room: head, then scene and panel ---------- */
.escape-room {
  --side: var(--player-a); --side-ink: var(--player-a-ink); --side-tint: var(--player-a-tint); --side-line: var(--player-a-line);
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-width: 0; min-height: 0; padding: 10px 12px 12px;
  background: linear-gradient(180deg, var(--side-tint), var(--surface) 60%); border: 2px solid var(--side-line); border-radius: 20px; contain: layout paint;
}
.escape-room.side-1 { --side: var(--player-b); --side-ink: var(--player-b-ink); --side-tint: var(--player-b-tint); --side-line: var(--player-b-line); }
.escape-stage:not([data-teams="true"]) .escape-room { --side-ink: var(--ink); --side-tint: var(--surface-2); --side-line: var(--line-strong); }
.escape-room__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding-right: 56px; }
.escape-stage[data-teams="true"] .escape-room__head { padding-right: 0; }
.escape-stage[data-teams="true"] .escape-room.side-0 .escape-room__head { padding-right: 32px; }
.escape-stage[data-teams="true"] .escape-room.side-1 .escape-room__head { padding-left: 32px; }
.escape-room__who { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.escape-room__name { overflow: hidden; color: var(--side-ink); font-size: clamp(18px, 1.6vw, 22px); font-weight: 900; white-space: nowrap; text-overflow: ellipsis; }
.escape-room__progress { flex: none; padding: 2px 10px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 999px; font-size: 14px; font-weight: 800; }
.escape-timer { position: relative; flex: none; }
.escape-timer strong { display: block; min-width: 92px; padding: 4px 14px; color: var(--on-inverse); background: var(--navy); border-radius: 999px; font-size: 24px; font-weight: 900; text-align: center; }
html[data-theme="dark"] .escape-timer strong { color: var(--ink); background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--line-strong); }
.escape-timer.is-urgent strong, html[data-theme="dark"] .escape-timer.is-urgent strong { color: var(--red-ink); background: var(--red-tint); box-shadow: inset 0 0 0 2px var(--red-base); }
.escape-timer__penalty { position: absolute; top: 100%; right: 6px; z-index: 2; padding: 1px 8px; color: var(--red-ink); background: var(--red-tint); border-radius: 999px; font-size: 14px; font-weight: 900; opacity: 0; pointer-events: none; }
.escape-timer__penalty.is-shown { animation: escape-penalty 1.4s ease-out both; }
@keyframes escape-penalty { 0% { opacity: 0; transform: translateY(-6px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }

.escape-room__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; min-height: 0; }
.escape-stage[data-teams="true"] .escape-room__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(110px, 0.8fr) minmax(0, 2fr); gap: 8px; }
.escape-scene { display: flex; align-items: center; justify-content: center; min-height: 0; margin: 0; overflow: hidden; background: var(--wall); border: 2px solid var(--line); border-radius: 16px; }
.escape-scene__svg { display: block; width: 100%; height: 100%; max-height: 100%; }
.escape-room__panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }

/* ---------- The scene ---------- */
.escape-wall { fill: var(--wall); } .escape-wall-line { fill: none; stroke: var(--wall-line); stroke-width: 2; }
.escape-floor { fill: var(--floor); } .escape-floor-line { fill: none; stroke: var(--floor-line); stroke-width: 1.5; }
.escape-window { fill: var(--window); stroke: var(--frame); stroke-width: 3; } .escape-window-bar { stroke: var(--frame); stroke-width: 3; }
.escape-wood { fill: var(--wood); } .escape-wood-2 { fill: var(--wood-2); stroke: var(--wood-band); stroke-width: 1.5; }
.escape-band { fill: none; stroke: var(--wood-band); stroke-width: 4; }
.escape-steel { fill: var(--steel); } .escape-steel-2 { fill: var(--steel-2); stroke: var(--metal); stroke-width: 2; }
.escape-dark { fill: var(--dark-space); } .escape-metal { fill: var(--metal); }
.escape-brass { fill: var(--brass); stroke: var(--brass-line); stroke-width: 2; } .escape-keyhole { fill: var(--dark-space); }
.escape-shackle { fill: none; stroke: var(--metal); stroke-width: 6; stroke-linecap: round; } .escape-chain { stroke: var(--metal); stroke-width: 3; }
.escape-dial { fill: var(--steel); stroke: var(--metal); stroke-width: 3; } .escape-dial-mark { stroke: var(--dark-space); stroke-width: 2.5; stroke-linecap: round; }
.escape-gold-stack rect { fill: var(--gold-bar); stroke: var(--brass-line); stroke-width: 1; }
.escape-glow { fill: var(--light); opacity: 0; }
.escape-shelf { stroke: var(--wood); stroke-width: 3; } .escape-book { fill: #c2453c; } .escape-book.is-b { fill: #3f7fbf; } .escape-ball { fill: var(--gold-bar); }
.escape-knob { fill: var(--brass); stroke: var(--brass-line); stroke-width: 1; }
.escape-frame { fill: var(--frame); } .escape-light { fill: var(--light); }
.escape-door { fill: var(--door); stroke: var(--frame); stroke-width: 2; } .escape-panel { fill: var(--door-panel); }
.escape-keypad { fill: var(--dark-space); stroke: var(--metal); stroke-width: 1.5; }
.escape-rays path { stroke: var(--light); stroke-width: 10; stroke-linecap: round; opacity: 0; }
.escape-badge circle { fill: var(--badge-off); stroke: var(--wall); stroke-width: 2.5; }
.escape-badge text { fill: #fff; font: 900 13px var(--font-sans); }
.escape-tag { opacity: 0; transform-box: fill-box; transform-origin: center; }
.escape-tag rect { fill: #fff; stroke: var(--badge-open); stroke-width: 2.5; }
.escape-tag text { fill: #1d6b3d; font: 900 20px var(--font-sans); }
.escape-tag.is-shown { opacity: 1; }

/* Lock states: the current one rings gold, an open one swings or lifts away (inner groups only). */
.escape-lock :is(.escape-padlock, .escape-safe-door, .escape-lid, .escape-cab-door, .escape-door-leaf) { transform-box: fill-box; transition: transform .7s var(--ease-out), opacity .7s var(--ease-out); }
.escape-padlock { transform-origin: 50% 100%; } .escape-safe-door { transform-origin: 0 50%; } .escape-lid { transform-origin: 50% 100%; }
.escape-cab-door.is-left { transform-origin: 0 50%; } .escape-cab-door.is-right { transform-origin: 100% 50%; } .escape-door-leaf { transform-origin: 0 50%; }
.escape-lock[data-state="current"] :is(.escape-brass, .escape-dial, .escape-wood-2, .escape-door) { stroke: var(--badge-now); stroke-width: 4; }
.escape-lock[data-state="open"] .escape-padlock { transform: translateY(26px) rotate(18deg); opacity: .55; }
.escape-lock[data-state="open"] .escape-shackle { transform: translateY(-6px); }
.escape-lock[data-state="open"] .escape-safe-door { transform: scaleX(.18); }
.escape-lock[data-state="open"] .escape-lid { transform: translateY(-10px) scaleY(.45); }
.escape-lock[data-state="open"] .escape-glow { opacity: .9; }
.escape-lock[data-state="open"] .escape-cab-door { transform: scaleX(.2); }
.escape-lock[data-state="open"] .escape-door-leaf { transform: scaleX(.14); }
.escape-lock[data-state="open"] .escape-rays path { opacity: .55; transition: opacity 1s .4s; }
.escape-room[data-phase="code"] .escape-lock--door .escape-keypad, .escape-lock--door[data-state="current"] .escape-keypad { stroke: var(--badge-now); stroke-width: 3; }
.escape-badge[data-state="current"] circle { fill: var(--badge-now); }
.escape-badge[data-state="open"] circle { fill: var(--badge-open); }
.escape-lock.is-opening :is(.escape-padlock, .escape-safe-door, .escape-lid, .escape-cab-door, .escape-door-leaf) { animation: escape-unlock .45s var(--ease-bounce) both; }
@keyframes escape-unlock { 0% { translate: 0 0; } 30% { translate: -3px 0; } 60% { translate: 3px 0; } 100% { translate: 0 0; } }

/* ---------- The code strip ---------- */
.escape-code { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.escape-slot { display: grid; justify-items: center; padding: 3px 4px 4px; color: var(--ink-2); background: var(--surface); border: 2px dashed var(--line-strong); border-radius: 12px; }
.escape-slot small { overflow: hidden; max-width: 100%; font-size: 12px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.escape-slot b { color: var(--ink-2); font-size: 24px; font-weight: 900; line-height: 1.1; }
.escape-slot[data-state="current"] { background: var(--gold-tint); border: 2px solid var(--gold-base); }
.escape-slot[data-state="found"] { color: var(--green-ink); background: var(--green-tint); border: 2px solid var(--green-base); }
.escape-slot[data-state="found"] b { color: var(--green-ink); }
.escape-slot.is-pop b { animation: escape-pop .5s var(--ease-bounce) both; }
@keyframes escape-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- The card ---------- */
.escape-card { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; padding: 10px 12px 12px; overflow: auto; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 16px; }
.escape-card.is-shake { animation: escape-shake .4s ease-in-out both; }
@keyframes escape-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.escape-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.escape-card__tag { padding: 2px 10px; color: var(--ink); background: var(--gold-tint); border: 2px solid var(--gold-base); border-radius: 999px; font-size: 14px; font-weight: 900; white-space: nowrap; }
.escape-card__pack { overflow: hidden; color: var(--ink-2); font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.escape-card__prompt { margin: 0; color: var(--ink); font-size: clamp(19px, 1.7vw, 24px); font-weight: 800; line-height: 1.3; text-wrap: balance; }
.escape-card__prompt.is-big { font-size: clamp(22px, 2.1vw, 30px); }
.escape-card__prompt.is-long { font-size: clamp(17px, 1.55vw, 22px); }
.escape-stage[data-teams="true"] .escape-card__prompt { font-size: clamp(17px, 1.4vw, 21px); }
.escape-stage[data-teams="true"] .escape-card__prompt.is-long { font-size: clamp(15px, 1.15vw, 17px); }
/* A chart or diagram takes the card's free height (the options keep theirs), never less than 96 px. */
.escape-card .buzzer-visual { min-height: 96px; }
.escape-hint { margin: 0; padding: 6px 10px; color: var(--ink); background: var(--sky-tint); border-left: 4px solid var(--sky-base); border-radius: 8px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35; }
.escape-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.escape-option {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px 12px; color: var(--ink); background: var(--surface-2);
  border: 2px solid var(--line-strong); border-bottom-width: 4px; border-radius: 14px; font: 800 clamp(17px, 1.5vw, 21px)/1.2 var(--font-sans);
  text-align: left; cursor: pointer; touch-action: manipulation; transition: transform .12s var(--ease-out);
}
.escape-option:active { transform: translateY(2px); }
.escape-option:focus-visible, .escape-key:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.escape-option kbd { flex: none; min-width: 26px; padding: 0 6px; color: var(--ink-2); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 7px; font: 800 14px/1.5 var(--font-sans); text-align: center; }
.escape-option__text { min-width: 0; overflow-wrap: anywhere; }
.escape-stage[data-teams="true"] .escape-option kbd { display: none; }
.escape-card__foot { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.escape-card__foot > .uk-btn { flex: none; --uk-size: 44px; }
.escape-status { flex: 1; min-width: 0; margin: 0; color: var(--ink-2); font-size: 15px; font-weight: 800; }
.escape-status[data-tone="good"] { color: var(--green-ink); } .escape-status[data-tone="bad"] { color: var(--red-ink); }
.escape-stage[data-phase="finished"] :is(.escape-option, .escape-key, [data-escape-action="hint"]) { pointer-events: none; }

/* The door: the found digits are on the strip above; type them in order. */
.escape-keypad__note { margin: 0; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.35; }
.escape-typed { display: grid; grid-template-columns: repeat(5, minmax(0, 52px)); justify-content: center; gap: 8px; }
.escape-typed__box { display: grid; place-items: center; height: 52px; color: var(--ink); background: var(--surface-2); border: 2px solid var(--line-strong); border-radius: 12px; font-size: 28px; font-weight: 900; }
.escape-typed__box.is-filled { border-color: var(--gold-base); background: var(--gold-tint); }
.escape-typed.is-shake { animation: escape-shake .4s ease-in-out both; }
.escape-keypad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.escape-key { min-height: 50px; color: var(--ink); background: var(--surface-2); border: 2px solid var(--line-strong); border-bottom-width: 4px; border-radius: 12px; font: 900 22px var(--font-sans); cursor: pointer; touch-action: manipulation; }
.escape-key:active { transform: translateY(2px); }
.escape-key.is-del { font-size: 16px; }
.escape-key.is-open { color: var(--on-primary); background: var(--primary); border-color: var(--primary-dark); font-size: 18px; }
.escape-key:disabled { opacity: .5; cursor: default; }
.escape-end { display: grid; flex: 1; place-content: center; gap: 6px; text-align: center; }
.escape-end p { margin: 0; color: var(--ink); font-size: 18px; font-weight: 700; }
.escape-end__big { font-size: 30px !important; font-weight: 900 !important; }
.escape-end.is-escaped .escape-end__big { color: var(--green-ink); } .escape-end.is-out .escape-end__big { color: var(--red-ink); }

/* ---------- Referee, pause (as the other contest stages) ---------- */
.escape-arena > .referee-region { position: absolute; z-index: 8; pointer-events: none; }
#arenaDialog:not([data-referee-phase="playing"]) .escape-arena > .referee-region, #arenaDialog .escape-arena > .referee-region[data-count] { top: 50%; left: 50%; display: grid; width: min(300px, calc(100% - 24px)); padding: 12px 16px; gap: 6px; background: var(--glass-strong); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); transform: translate(-50%, -50%); }
#arenaDialog:not([data-referee-phase="playing"]) .escape-arena > .referee-region .referee-art, #arenaDialog .escape-arena > .referee-region[data-count] .referee-art { width: 176px; margin: 0 auto; }
#arenaDialog .escape-arena > .referee-region[data-count]:not([data-count="BAŞLA!"]) .referee-art { translate: calc(-.2 * 176px) 0; }
#arenaDialog .escape-arena > .referee-region .referee-message { min-height: 0; font-size: 14px; text-align: center; }
#arenaDialog[data-referee-phase="playing"] .escape-arena > .referee-region:not([data-count]) { top: 4px; right: 14px; width: 44px; }
#arenaDialog[data-referee-phase="playing"] .escape-arena:has([data-teams="true"]) > .referee-region:not([data-count]) { right: auto; left: 50%; transform: translateX(-50%); }
#arenaDialog[data-referee-phase="playing"] .escape-arena > .referee-region:not([data-count]) .referee-art { width: 44px; }
#arenaDialog[data-referee-phase="playing"] .escape-arena > .referee-region:not([data-count]) .referee-message { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#arenaDialog.is-finished .escape-arena > .referee-region { display: none; }
.escape-arena > .arena-paused { position: absolute; top: 50%; left: 50%; z-index: 9; width: min(360px, calc(100% - 32px)); padding: 22px 20px; background: var(--glass-strong); border: 2px solid var(--line-strong); border-radius: 22px; box-shadow: var(--shadow-lg); transform: translate(-50%, -50%); }
.escape-arena > .arena-paused h3 { margin: 0 0 12px; }
.escape-arena.is-paused .escape-stage { opacity: .6; }
.arena-dialog.live-surface .escape-arena > .arena-paused { pointer-events: auto; }

/* ---------- Result: the device record card and the per-lock review ---------- */
.escape-result__scope { color: var(--ink-2); font-size: 12px; }
/* The final cards share a subgrid whose row 2 holds the outcome; the scope takes row 3, where a room card has its tiles. */
#arenaDialog .arena-scores--final .escape-result__record > .escape-result__scope { grid-column: 1 / -1; grid-row: 3; align-self: end; }
.escape-result__record.is-record { border-color: var(--gold-base); background: var(--gold-tint); }
.escape-review { margin: 4px 0 10px; padding-left: 20px; }
.escape-review li { margin: 4px 0; line-height: 1.4; }

/* ---------- High contrast: plain edges, black and white scene accents ---------- */
body.high-contrast .escape-stage { --badge-off: #000; --badge-now: #000; --badge-open: #000; --light: #fff; }
body.high-contrast .escape-room, body.high-contrast .escape-card, body.high-contrast .escape-scene, body.high-contrast .escape-slot, body.high-contrast .escape-option, body.high-contrast .escape-key { border-color: var(--ink); }
body.high-contrast .escape-room { background: var(--surface); }
body.high-contrast .escape-slot[data-state="current"] { border-width: 3px; border-style: solid; }
body.high-contrast .escape-slot[data-state="found"] { border-width: 3px; outline: 2px solid var(--ink); outline-offset: -6px; }
body.high-contrast .escape-tag text { fill: #000; } body.high-contrast .escape-tag rect { stroke: #000; }
body.high-contrast .escape-lock[data-state="current"] :is(.escape-brass, .escape-dial, .escape-wood-2, .escape-door) { stroke-dasharray: 6 3; }

/* ---------- Smaller screens ---------- */
@media (max-width: 900px) {
  #arenaBody:has(> .escape-arena) { padding: 8px; overflow: auto; }
  .escape-stage[data-teams="true"] .escape-room__body { grid-template-rows: minmax(90px, 0.6fr) minmax(0, 2fr); }
  .escape-room { padding: 8px; border-radius: 16px; }
  .escape-timer strong { min-width: 76px; padding: 3px 10px; font-size: 20px; }
  .escape-option { min-height: 48px; }
  #arenaDialog[data-referee-phase="playing"] .escape-arena > .referee-region:not([data-count]) { display: none; }
  .escape-room__head, .escape-stage[data-teams="true"] .escape-room.side-0 .escape-room__head, .escape-stage[data-teams="true"] .escape-room.side-1 .escape-room__head { padding: 0; }
}
/* Phones: the room stacks (scene strip, code, card) and the dialog scrolls; two rooms stack too. */
@media (max-width: 640px) {
  .escape-stage[data-teams="true"] .escape-rooms { grid-template-columns: minmax(0, 1fr); }
  .escape-room__body, .escape-stage[data-teams="true"] .escape-room__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px; }
  .escape-scene { height: 150px; }
  .escape-room__name { font-size: 17px; }
  .escape-room__progress { font-size: 12px; }
  .escape-slot small { font-size: 10px; }
  .escape-slot b { font-size: 20px; }
  .escape-card { overflow: visible; }
  .escape-card__prompt, .escape-card__prompt.is-big { font-size: 19px; }
  .escape-options { grid-template-columns: minmax(0, 1fr); }
  .escape-option { min-height: 46px; font-size: 17px; }
  .escape-keypad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .escape-typed { grid-template-columns: repeat(5, minmax(0, 44px)); }
  .escape-typed__box { height: 46px; }
}
/* Short landscape screens (the smartboard at 768 px tall): the scene gives way to the card. */
@media (max-height: 800px) and (min-width: 901px) {
  .escape-stage[data-teams="true"] .escape-option { min-height: 46px; padding: 4px 10px; }
  .escape-stage[data-teams="true"] .escape-key { min-height: 42px; }
  .escape-stage[data-teams="true"] .escape-typed__box { height: 44px; }
}

/* Sideways phone (844x390), one room: the arena header and the room's own chrome shrink, the scene and the door-code
   strip share the left column and the card takes the whole right column, so the question and every option show
   without scrolling. (Two rooms keep their stacked layout above.) */
@media (max-height: 500px) and (min-width: 641px) {
  #arenaDialog:has(> #arenaBody > .escape-arena) .arena-header { gap: 8px; padding: 4px 12px; }
  #arenaDialog:has(> #arenaBody > .escape-arena) .arena-header p { margin: 0; font-size: 11.5px; }
  #arenaDialog:has(> #arenaBody > .escape-arena) .arena-header h2 { font-size: 18px; line-height: 1.15; }
  #arenaBody:has(> .escape-arena) { padding: 4px 8px 6px; }
  .escape-stage:not([data-teams="true"]) .escape-room { gap: 4px; padding: 6px 10px 8px; }
  .escape-stage:not([data-teams="true"]) .escape-room__head { min-height: 36px; }
  .escape-stage:not([data-teams="true"]) .escape-timer strong { min-width: 72px; padding: 2px 12px; font-size: 18px; }
  .escape-stage:not([data-teams="true"]) .escape-room__body { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px 10px; }
  .escape-stage:not([data-teams="true"]) .escape-room__panel { display: contents; }
  .escape-stage:not([data-teams="true"]) .escape-scene { grid-area: 1 / 1; }
  .escape-stage:not([data-teams="true"]) .escape-code { grid-area: 2 / 1; }
  .escape-stage:not([data-teams="true"]) .escape-card { grid-area: 1 / 2 / 3 / 3; gap: 4px; padding: 4px 10px 6px; }
  .escape-stage:not([data-teams="true"]) .escape-card__prompt, .escape-stage:not([data-teams="true"]) .escape-card__prompt.is-big, .escape-stage:not([data-teams="true"]) .escape-card__prompt.is-long { font-size: 17px; line-height: 1.25; }
  .escape-stage:not([data-teams="true"]) .escape-options { gap: 4px 6px; }
  .escape-stage:not([data-teams="true"]) .escape-option { min-height: 44px; font-size: 17px; }
  .escape-stage:not([data-teams="true"]) .escape-hint { font-size: 16px; }
}

/* ---------- Reduced motion (setting or OS): nothing on the stage transitions or animates ---------- */
body.reduced-motion .escape-stage, body.reduced-motion .escape-stage *, body.reduced-motion .escape-stage *::before, body.reduced-motion .escape-stage *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) .escape-stage, body:not(.motion-on) .escape-stage *, body:not(.motion-on) .escape-stage *::before, body:not(.motion-on) .escape-stage *::after { transition: none !important; animation: none !important; }
}