.gaming-area { font-family:EveryWayNunito,system-ui,sans-serif; color:#103363; }
.gaming-area *, .gaming-area *::before, .gaming-area *::after { box-sizing:border-box; }
.gaming-area [hidden] { display:none !important; }
.gaming-area .skip-link { position:absolute; left:16px; top:-80px; z-index:20; padding:10px; background:white; }
.gaming-area .skip-link:focus { top:8px; }
.gaming-area :where(button) { border:1.5px solid #bfddf6; border-radius:14px; color:#103363; background:#f6fbff; min-height:48px; font-family:inherit; font-weight:850; }
.gaming-area :where(button:hover) { background:#e6f3ff; }
.gaming-area .site-header { max-width:none; margin:0; height:77px; padding:4px 34px 4px 42px; flex-wrap:nowrap; border-bottom:1px solid #bfddf6; }
.gaming-area .wordmark { width:120px; flex-basis:120px; }
.gaming-area .wordmark img { height:68px; object-fit:contain; }
.gaming-area .utility-nav { margin-left:auto; }
.gaming-area .utility-nav button { border:0; border-radius:0; background:transparent; font-weight:600; }
.gaming-area :focus-visible { outline:3px solid #8b5b00; outline-offset:4px; }
.gaming-area ::selection { background:#ffdf89; color:#103363; }
.gaming-area .catalog .scenario-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.locker-game { max-width:1200px; padding:20px 24px; }
.game-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:14px 0 8px; }
.game-heading h1 { font-size:clamp(32px,4vw,44px); font-weight:950; }
.game-intro { margin:8px 0; font-size:20px; }
.lock-tools { display:flex; align-items:flex-end; gap:12px; margin:12px 0 4px; }
.lock-choice { display:flex; flex-wrap:wrap; align-items:center; gap:12px; min-width:0; width:fit-content; margin:0; font-size:18px; font-weight:800; }
.lock-choice select { min-height:48px; font:inherit; color:#103363; padding:8px 36px 8px 12px; border:1.5px solid #bfddf6; border-radius:14px; background:#f6fbff; max-width:100%; }
.gaming-area .restart-button { display:grid; place-items:center; width:48px; min-width:48px; padding:0; }
.design-note { font-size:15px; color:#365a7c; margin:0 0 20px; }
.gaming-area main button img, .game-footer button img { width:23px; height:23px; object-fit:contain; }
.sound-button, .game-help button, .game-footer button { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.game-workspace { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:stretch; gap:28px; }
.scene-column { display:flex; flex-direction:column; gap:20px; min-width:0; }
.scene-column .hallway { flex-shrink:0; }
.scenario-picker { margin-top:auto; }
.scenario-picker h2 { font-size:22px; font-weight:900; margin:0 0 12px; }
.scenario-options { display:grid; gap:10px; }
.gaming-area .scenario-options button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; min-height:82px; padding:12px 18px; text-align:left; font-size:20px; background:white; }
.scenario-options small { font-size:16px; line-height:1.4; font-weight:600; }
.gaming-area .scenario-options button[aria-pressed="true"] { border-color:#0562e9; background:#e5f1ff; }
.gaming-area .scenario-options button:disabled { color:#365a7c; background:#edf4f9; opacity:1; cursor:default; }
.hallway { position:relative; border-radius:20px; overflow:hidden; background:#e7f3fa; height:470px; }
.hallway-art { position:absolute; width:100%; height:100%; object-fit:cover; object-position:left center; }
.gaming-area .locker-target { position:absolute; left:39%; top:12%; width:57%; height:76%; padding:0; background:transparent; border:0; border-radius:8px; }
.gaming-area .locker-target:hover { background:transparent; }
.locker-target > img:first-child { width:100%; height:100%; object-fit:contain; }
.locker-target .small-lock { position:absolute; width:19%; height:auto; right:14%; top:42%; }
.handle-scene { position:absolute; left:57%; top:7%; height:82%; aspect-ratio:330/1000; perspective:700px; }
.locker-shell { width:100%; height:100%; object-fit:contain; }
.handle-door { position:absolute; left:7%; top:2%; width:86%; height:96%; transform-origin:left center; transform:rotateY(0); transition:transform .38s cubic-bezier(.16,1,.3,1); }
.handle-door.is-open { transform:rotateY(-105deg); }
.door-art { width:100%; height:100%; object-fit:contain; }
.gaming-area .door-target { position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; padding:0; }
.gaming-area .scene-handle { position:absolute; right:3%; top:36%; width:44%; min-width:48px; aspect-ratio:600/1068; padding:0; border:0; background:transparent; }
.gaming-area main button .scene-face { display:block; width:100%; height:100%; object-fit:contain; }
.handle-door.is-open .scene-handle { visibility:hidden; }
.scene-digits { position:absolute; inset:0; font-size:11px; font-weight:950; font-variant-numeric:tabular-nums; pointer-events:none; }
.scene-digits span { position:absolute; left:30%; top:24%; transform:translate(-50%,-50%); }
.scene-digits span:nth-child(2), .scene-digits span:nth-child(4) { left:70%; }
.scene-digits span:nth-child(3), .scene-digits span:nth-child(4) { top:54%; }
.gaming-area main button .scene-knob { position:absolute; left:50%; top:78%; width:36%; height:auto; transform:translate(-50%,-50%) rotate(0); transition:transform .2s ease-out; }
.handle-door[data-locked="true"] .scene-knob { transform:translate(-50%,-50%) rotate(-90deg); }
.scene-status { position:absolute; bottom:0; left:0; right:0; margin:0; padding:14px; text-align:center; background:#f8fcfff2; color:#103363; font-size:17px; font-weight:800; }
.lock-controls { display:flex; flex-direction:column; padding:0; min-width:0; }
.step-cue { display:flex; align-items:center; gap:14px; }
.step-cue > img { width:62px; height:62px; object-fit:contain; }
.step-cue h2 { font-size:28px; line-height:1.25; margin:2px 0; font-weight:900; }
#step-count { margin:0; font-size:14px; color:#365a7c; font-weight:700; }
#instruction { font-size:19px; margin:14px 0; }
.code-card { display:flex; gap:12px; align-items:center; justify-content:center; margin:12px 0; padding:8px; border:1px solid #bfddf6; border-radius:12px; background:white; }
.code-card { flex-wrap:wrap; }
.code-card small { flex-basis:100%; text-align:center; color:#365a7c; font-size:14px; }
.code-card > span { font-size:15px; font-weight:800; }
#saved-code { display:flex; gap:6px; }
#saved-code span { background:#edf6ff; padding:3px 8px; border-radius:5px; font-size:25px; line-height:1.2; font-weight:900; font-variant-numeric:tabular-nums; }
.combination { display:grid; place-items:center; width:min(100%,390px); height:480px; flex-shrink:0; margin:auto auto 16px; }
.lock-device { position:relative; width:100%; aspect-ratio:1.25; }
.lock-device > img { width:100%; height:100%; object-fit:contain; }
.wheel-controls { position:absolute; left:27%; right:27%; top:72.5%; transform:translateY(-50%); height:132px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7%; }
.wheel { min-width:0; display:grid; grid-template-rows:48px 36px 48px; align-items:center; justify-items:center; }
.wheel output { width:100%; text-align:center; font-weight:950; font-size:clamp(24px,4vw,40px); line-height:1; color:#103363; font-variant-numeric:tabular-nums; }
.wheel output { touch-action:pan-x; cursor:ns-resize; user-select:none; }
.wheel output[aria-disabled="true"] { cursor:default; }
.wheel-tip { color:#365a7c; font-size:15px; text-align:center; margin:0 0 12px; }
.handle-mode .lock-device { width:min(100%,270px); aspect-ratio:600/1068; }
.handle-mode .wheel-controls { left:16%; right:16%; top:24%; height:calc(30% + 132px); transform:translateY(-66px); grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:132px 132px; align-content:space-between; gap:0 18%; }
.handle-mode .wheel output { font-size:32px; }
.gaming-area .handle-knob { position:absolute; left:50%; top:78%; transform:translate(-50%,-50%); width:36%; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:transparent; }
.gaming-area main .handle-knob img { width:100%; height:100%; transform:rotate(0); transition:transform .2s ease-out; }
.handle-mode[data-locked="true"] .handle-knob img { transform:rotate(-90deg); }
.gaming-area .handle-knob:hover { background:transparent; }
.handle-knob:disabled { opacity:1; cursor:default; }
.gaming-area .wheel button { padding:0; min-width:48px; width:48px; height:48px; border-radius:9px; background:#f8fcfff2; }
.wheel button img { transform:rotate(-90deg); width:18px; height:18px; }
.wheel button[data-direction="-1"] img { transform:rotate(90deg); }
#game-action.is-cue { outline:3px solid #a27620; outline-offset:4px; }
.gaming-area .game-action { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#0562e9; color:white; border-color:#0562e9; font-size:21px; padding:13px 16px; }
.gaming-area .game-action:hover { background:#0054cb; }
.game-action img { filter:brightness(0) invert(1); }
.game-action:disabled { background:#e6eff7; color:#365a7c; opacity:1; border-color:#bfddf6; }
.game-action:disabled img { filter:none; }
#feedback { margin:8px 0; min-height:0; font-size:18px; font-weight:800; }
#feedback:empty { display:none; }
.game-help, .completed-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.game-help button { flex:1; padding:10px; }
.completed-actions button { flex:1; font-size:16px; padding:8px 12px; }
.game-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:24px 0 0; border-top:1px solid #bfddf6; padding-top:20px; }
.game-footer > div { display:flex; flex-wrap:wrap; gap:12px; }
.helper-note { margin:24px 0 0; color:#365a7c; font-size:14px; }
.helper-note summary { cursor:pointer; padding:8px 0; }
.helper-note p { max-width:70ch; }
#game-workspace[data-phase="done"] .hallway { outline:3px solid #447b65; outline-offset:3px; }
.gaming-area .locker-target:focus-visible { outline-offset:-4px; }
@media(max-width:760px) {
  .locker-game { padding:16px; }
  .game-heading { gap:8px; }
  .game-intro { font-size:17px; }
  .sound-button { padding:8px; font-size:14px; }
  .game-workspace { grid-template-columns:1fr; gap:12px; }
  .hallway { min-height:0; height:230px; }
  .locker-target { max-width:170px; }
  .lock-controls { padding:8px 0; }
  .step-cue h2 { font-size:25px; }
  .step-cue > img { width:48px; height:48px; }
  #instruction { margin:12px 0; font-size:18px; }
  .combination { width:min(100%,340px); }
  .game-footer { align-items:flex-start; flex-direction:column; }
  .game-footer > div { width:100%; }
  .game-footer button { flex:1; padding:8px 10px; }
  .gaming-area .catalog .scenario-grid { grid-template-columns:1fr; max-width:480px; }
}
@media(max-width:380px) {
  .combination:not(.handle-mode) .wheel:first-child button { transform:translateX(-8px); }
  .combination:not(.handle-mode) .wheel:nth-child(3) button { transform:translateX(8px); }
}
@media(prefers-reduced-motion:no-preference) { .game-action { transition:background-color .15s ease-out; } }
.reduce-motion .game-action { transition:none; }
.reduce-motion .handle-door, .reduce-motion .handle-knob img, .reduce-motion .scene-knob { transition:none!important; }
@media(prefers-reduced-motion:reduce) { .handle-door, .handle-knob img, .scene-knob { transition:none!important; } }
@media(max-width:640px) {
  .gaming-area .site-header { height:72px; padding:4px 16px; }
  .gaming-area .wordmark { width:92px; flex-basis:92px; }
  .gaming-area .wordmark img { height:62px; }
}