/* Classroom redesign: all rules are scoped to the live training UI. */
#laptop-screen-viewport {overflow:hidden!important;padding:0!important}
body.training-fullscreen #laptop-screen-viewport {height:100dvh!important}
#training-game-root {height:100%;min-height:0!important;container-type:inline-size}
#training-game-root .game-shell {height:100%;width:100%;max-width:none!important;margin:0;padding:0!important;overflow:hidden}
#training-game-root #practice {height:100%;min-height:0;display:grid;grid-template-rows:94px 78px minmax(0,1fr);border:0;border-radius:0;box-shadow:none;overflow:hidden}
#practice::before,#practice::after {display:none}
#training-game-root .top-hud {display:grid;grid-template-columns:205px minmax(0,1fr) 330px;gap:16px;align-items:center;padding:8px 16px;background:#071324;border-bottom:1px solid #263d55;min-height:0}
.game-identity {display:flex;align-items:center;gap:10px;min-width:0}
.mini-brand {display:block;flex:none;line-height:0}
.mini-brand img {display:block;width:45px;height:auto;border-radius:3px}
#training-game-root h1 {font-size:18px;line-height:1.2;letter-spacing:0;color:#d8f6ff;font-weight:800;margin:0}
.hint-center {min-width:0;min-height:0;align-self:stretch;display:flex;align-items:center;overflow:auto;scrollbar-width:thin}
#training-game-root #hint-text {margin:0;padding:0;background:none;border:0;color:#e3d5ff;font-size:16px;line-height:1.35;font-weight:600}
#training-game-root #feedback {margin:0;font-size:15px;line-height:1.3;color:#abc0d6;max-width:none}
.hint-center:has(#hint-text:not([hidden])) #feedback {display:none}
#feedback:not([data-kind=retry]):not([data-kind=success]),#feedback[data-expired=true] {visibility:hidden}
#feedback[data-kind=retry] {color:#ffbf88!important}
#feedback[data-kind=success] {color:#88efbf!important}
.hud-tools {min-width:0}
.hud-buttons {display:flex;align-items:center;gap:8px;margin-bottom:4px}
#training-game-root #hint {font-size:18px;font-weight:900;padding:5px 19px;line-height:1.15;border-color:#7ceeff}
/* Cost remains in the adjacent visible rules and the button's accessible name. */
#training-game-root #hint small {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#training-game-root #restart,#training-game-root #sound {font-size:12px;padding:5px 9px;line-height:1.3}
#training-game-root .intro {display:block!important;max-width:none;margin:0!important;color:#adc1d8;font-size:11px!important;line-height:1.3}
.magnify-tip {margin:3px 0 0;color:#9becfc;font-size:12px;line-height:1.2;font-weight:700}
.challenge-hud {display:grid;grid-template-columns:170px minmax(0,1fr) 145px;align-items:center;gap:14px;padding:8px 16px;background:linear-gradient(100deg,#0c2031,#14182e);border-bottom:1px solid #2d4560;min-height:0}
.progress-group {display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
#training-game-root .step-label {min-width:0;max-width:none;white-space:nowrap;font-size:12px;line-height:1.35}
#training-game-root #progress {display:grid!important;grid-template-columns:repeat(10,6px);grid-template-rows:repeat(3,6px);gap:3px!important;max-width:none!important;margin:0;padding:0;flex:none}
#training-game-root #progress li {width:6px!important;height:6px!important;border-width:1px;animation:none}
#practice:has(#point-status[data-eligible=false]) #progress li.current {background:#ffb67d;border-color:#ffe6cd;box-shadow:0 0 0 2px #8d432f}
#training-game-root #practice .instruction {min-height:0!important;padding:0!important;display:block;text-align:center;background:none;overflow:hidden}
#training-game-root #practice #instruction {font-size:clamp(19px,2.1vw,29px)!important;line-height:1.1;letter-spacing:0;margin:0}
#training-game-root #detail {font-size:12px;line-height:1.25;margin:4px 0 0}
.score-group {display:flex;align-items:flex-end;flex-direction:column;gap:5px;min-width:0}
#training-game-root .score-badge {margin:0;font-size:15px;white-space:nowrap;padding:5px 9px;line-height:1.25}
#training-game-root .point-chip {font-size:10px;line-height:1.2;padding:3px 6px;margin:0;white-space:nowrap}
#training-game-root .frame {min-height:0;min-width:0;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;background:#030a12;line-height:0}
#training-game-root #stage {flex:none;margin:0!important;min-width:0!important;max-width:none!important;max-height:none;overflow:visible}
#training-game-root #screenshot {display:block;width:100%;height:100%;object-fit:contain;max-height:none}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The story retains its original footer. Training branding moves into the HUD. */
body:has(#story-root[hidden]) > .attribution {display:none!important}
#magnifier {position:fixed;width:180px;height:180px;border-radius:50%;overflow:hidden;pointer-events:none!important;border:2px solid #e5faff;box-shadow:0 8px 24px #000a,0 0 0 1px #41728b;background:#fff;z-index:20000;contain:strict}
#magnifier img {position:absolute;max-width:none!important;max-height:none!important;pointer-events:none!important;user-select:none}
#magnifier::after {content:'';position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;border:1px solid #d87025;border-radius:50%;box-shadow:0 0 0 1px #fff9;pointer-events:none}
#training-game-root #debug {position:absolute;z-index:50;left:8px;top:174px;width:min(340px,85%);max-height:calc(100% - 184px);overflow:auto;padding:10px;font-size:11px;opacity:.96}
#training-game-root #debug .debug-controls {gap:8px;margin:8px 0}
#training-game-root #complete {height:100%;max-height:100%;overflow:auto;border-radius:0;margin:0;padding:20px}
#training-game-root #complete .summary {margin:15px 0;gap:24px}
#training-game-root #finale-image {width:auto;max-width:100%;max-height:35dvh;object-fit:contain;margin:10px auto}
@container (max-width:1050px) {
  #training-game-root #practice {grid-template-rows:100px 86px minmax(0,1fr)}
  #training-game-root .top-hud {grid-template-columns:160px minmax(0,1fr) 290px;gap:12px;padding:6px 10px}
  #training-game-root h1 {font-size:15px}
  .mini-brand img {width:35px}
  #training-game-root #hint-text {font-size:14px;line-height:1.3}
  #training-game-root #feedback {font-size:13px}
  .challenge-hud {grid-template-columns:154px minmax(0,1fr) 130px;gap:10px;padding:6px 10px}
  #training-game-root #practice #instruction {font-size:20px!important}
  #training-game-root .score-badge {font-size:13px}
}
@container (max-width:740px) {
  #training-game-root #practice {grid-template-rows:108px 98px minmax(0,1fr)}
  #training-game-root .top-hud {grid-template-columns:110px minmax(0,1fr) 210px;gap:8px;padding:5px 8px}
  .game-identity {gap:5px}.mini-brand img{width:25px}
  #training-game-root h1 {font-size:12px}
  #training-game-root .intro {font-size:10px!important}
  #training-game-root #hint-text {font-size:13px}
  .hud-buttons {gap:4px}#training-game-root #hint{font-size:16px;padding:5px 12px}
  #training-game-root #restart,#training-game-root #sound {font-size:11px;padding:5px 6px}
  .challenge-hud {grid-template-columns:92px minmax(0,1fr) 110px;gap:8px;padding:5px 8px}
  .progress-group {flex-direction:column;align-items:flex-start;gap:4px}
  #training-game-root .step-label {max-width:none;font-size:11px}
  #training-game-root #practice #instruction {font-size:18px!important}
  #training-game-root #detail {font-size:11px}
  #training-game-root .score-badge {font-size:12px;padding:4px 6px}
}
@media(max-height:620px) and (min-width:740px) {
  #training-game-root #practice {grid-template-rows:82px 70px minmax(0,1fr)}
  #training-game-root .top-hud{padding-top:4px;padding-bottom:4px}
  #training-game-root #practice #instruction{font-size:19px!important}
  #training-game-root #detail{font-size:11px}
}