/* The landscape spans the entire board. Local translucent surfaces protect
   reading contrast without restoring the former opaque top/bottom bands. */
.app-shell { position:relative; isolation:isolate; background:transparent; }
.split { isolation:auto; background:transparent; --keyboard-height:clamp(156px,18vh,194px); }
.landscape { position:fixed; inset:0; z-index:-1; background:#253d40; }
.landscape img { inset:0; width:100%; height:100%; object-fit:cover; }
.landscape::after { background:linear-gradient(#06202826,transparent 27%,transparent 62%,#06202724); }
.topbar { background:linear-gradient(#071b234d,#071b2312); border-bottom-color:#d7e4d222; }
.hud,.team-b .hud { background:transparent; text-shadow:0 2px 5px #05151a; }
.prompt,.team-b .prompt { background:linear-gradient(90deg,#071f2d94,#0b24313b 75%,#0b24310a); box-shadow:none; }
.base-form,.prompt-label,.prompt-note { text-shadow:0 2px 5px #031017,0 0 2px #031017; }
.keyboard,.team-b .keyboard { background:transparent; padding-block:5px; }
.key-row button,.team-b .key-row button {
  position:relative; isolation:isolate; background-image:none;
  background-color:#0b243159; border:1px solid #e2d4a878; border-radius:5px;
  box-shadow:inset 0 1px 0 #f2e6b654,inset 0 -2px 0 #041a234d,0 2px 5px #04182238;
  backdrop-filter:blur(2px); color:#fff9e7;
  text-shadow:0 2px 3px #001019,0 0 2px #001019;
}
.key-row button::before { content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; background:url('../media/crawl-v8/stone-key.png') center/100% 100%; opacity:.16; pointer-events:none; }
.key-row button:disabled,.team-b .key-row button:disabled { opacity:.82; color:#dbe3dc; border-color:#c6d5cb55; background-color:#0b243138; }
.key-row .enter-key { border-color:var(--accent); box-shadow:inset 0 0 14px -6px var(--accent),0 0 5px #09212a4d; }
.answer-panel { background:linear-gradient(90deg,#071f2d70,#071f2d25); border-bottom-color:#e1d4aa66; text-shadow:0 2px 4px #03151d; }
.power-panel,.team-b .power-panel { background:transparent; }
.power-buttons button { background:radial-gradient(ellipse,#15323b8c,#071b245c); box-shadow:inset 0 0 0 2px #bdd9dc24,0 2px 5px #00182250; backdrop-filter:blur(2px); color:#fff0bf; }
.power-buttons button:disabled { opacity:.7; }
.charge-pips i:not(.filled) { opacity:.85; }
.teacher-actions > button,.teacher-menu > summary { background:#0a243278; border-color:#c5e4e566; text-shadow:0 1px 2px #00121c; }
/* Flash/shake are confined to imagery; text and hit targets never move. */
.landscape[data-transition='active']::after { background:linear-gradient(#06202826,transparent 27%,transparent 62%,#06202724),rgba(176,218,255,var(--world-flash,0)); }
@media(prefers-reduced-transparency:reduce) {
 .prompt,.team-b .prompt,.answer-panel { background:#09222fdb; }
 .key-row button,.team-b .key-row button { background-color:#102b39e6; }
}

/* Keep the grid space, reveal touch controls only during this side's input. */
.team:not([data-input-open='true']) > .keyboard {
 visibility:hidden; opacity:0; pointer-events:none;
}
.team[data-input-open='true'] > .keyboard { animation:keyboard-reveal 140ms ease-out; }
@keyframes keyboard-reveal { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) {
 .team[data-input-open='true'] > .keyboard { animation:none; }
}
.team[data-motion='reduced'] > .keyboard { animation:none; }

/* Quiet heraldic teacher controls: labels stay available to assistive tools. */
.teacher-actions { gap:4px; }
.teacher-actions > .teacher-crest,.teacher-menu > .teacher-crest {
 display:grid; place-items:center; width:44px; height:48px; padding:2px;
 border:0; border-radius:0; background:transparent; color:#c1c4b1;
 box-shadow:none; text-shadow:none; cursor:pointer;
}
.teacher-crest svg { width:32px; height:40px; fill:none; stroke:currentColor; stroke-width:1.5; pointer-events:none; }
.teacher-crest .crest-outline { fill:#102b3347; stroke-opacity:.55; }
.teacher-crest .crest-pause { stroke-width:2.5; }
.teacher-crest .crest-play { display:none; fill:currentColor; stroke:none; }
.teacher-crest[data-paused='true'] .crest-pause { display:none; }
.teacher-crest[data-paused='true'] .crest-play { display:block; }
.teacher-crest:disabled { opacity:.35; cursor:default; }
.teacher-crest:focus-visible { outline:2px solid #d3c290; outline-offset:2px; }
.teacher-menu[open] > .teacher-crest .crest-outline { stroke:#d3c290; stroke-opacity:1; }