:root {
  --navy: #062b5c;
  --navy-dark: #031a38;
  --blue: #0097d7;
  --cyan: #65d6f7;
  --pale: #eef8fc;
  --white: #ffffff;
  --ink: #10263f;
  --muted: #607286;
  --line: #c8d9e3;
  --good: #007f6b;
  --bad: #b8344b;
  font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink);
  background: #f5f8fa;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f5f8fa; font-size: 16px; }
button, select { font: inherit; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.app-shell { min-height: 100vh; }

.topbar {
  height: 70px;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { border: 0; background: none; display: flex; align-items: center; gap: 13px; color: var(--navy); cursor: pointer; padding: 2px; text-align:left; }
.brand-mark { display:grid; justify-items:center; gap:1px; min-width:45px; }
.brand-mark img { width: 38px; height: 38px; object-fit: contain; }
.brand-mark strong { font-size: 12px; line-height: 1; }
.acat-copy { display:grid; gap:3px; }
.acat-word { display:flex; gap:5px; color:var(--navy); font-size:23px; line-height:1; letter-spacing:.12em; }
.acat-full { display:flex; gap:4px; align-items:baseline; color:var(--muted); font-size:8px; line-height:1; letter-spacing:.02em; white-space:nowrap; }
.acat-full b { color:var(--navy); font-size:10px; font-weight:800; }
.acat-full i { font-style:normal; font-size:8px; }
nav { display: flex; gap: 24px; height: 100%; }
.nav-btn { border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); padding: 0 4px; font-weight: 700; cursor: pointer; }
.nav-btn.active { color: var(--navy); border-bottom-color: var(--blue); }

main { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 70px; }
.view { display: none; }
.view.active { display: block; }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .2em; }

.home-intro { padding: 10px 0 36px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.home-intro h1, .records-heading h1 { margin: 0; color: var(--navy); font-size: clamp(32px, 4vw, 48px); line-height: 1.2; letter-spacing: -.025em; }
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.game-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--blue); padding: 28px; }
.card-topline { display: flex; justify-content: space-between; }
.game-no { color: #9eb6c5; font: 700 15px/1 ui-monospace, monospace; }
.game-card h2 { margin: 24px 0 26px; color: var(--navy); font-size: 27px; }
.time-select { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; margin-bottom: 18px; color: var(--muted); font-size: 13px; font-weight: 700; }
.time-select select { width: 100%; border: 1px solid #aebfca; border-radius: 3px; background: #fff; color: var(--navy); padding: 11px 12px; font-weight: 700; }
.primary-btn, .secondary-btn { border: 0; border-radius: 3px; padding: 14px 18px; font-weight: 800; cursor: pointer; }
.primary-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; }
.primary-btn:hover { background: #0a477d; }
.secondary-btn { background: #e5eef3; color: var(--navy); }
.text-btn, .back-btn { border: 0; background: transparent; color: var(--blue); font-weight: 700; cursor: pointer; padding: 10px; }
.disclaimer { margin: 22px 0 0; text-align: center; color: #81919e; font-size: 12px; }

.game-view { max-width: 1050px; margin: auto; position: relative; }
#observation.view { display: none; }
#observation.view.active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: center; }
#observation .game-header, #observation .progress-track { grid-column: 1 / -1; width: 100%; }
#observation .observation-stage { grid-column: 1; grid-row: 2; }
#observation .answer-zone { grid-column: 2; grid-row: 2; width: 100%; margin: 0; }
.game-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; }
.game-header h1 { margin: 0; color: var(--navy); font-size: 28px; }
.hud { display: flex; align-items: center; gap: 7px; }
.hud span { padding: 9px 12px; background: #fff; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 12px; }
.hud strong { margin-left: 5px; color: var(--navy); font-size: 16px; }
.hud .timer { min-width: 84px; background: var(--navy); border-color: var(--navy); color: #fff; text-align: center; font: 700 19px/1 ui-monospace, monospace; }
.progress-track { height: 4px; margin-top: 18px; overflow: hidden; background: #cedce4; }
.progress-track span { display: block; width: 100%; height: 100%; background: var(--blue); transition: width 1s linear; }
.orientation-card { grid-column: auto; }
.upcoming-label { color: var(--muted); font-size: 11px; font-weight: 700; }
.upcoming-card { opacity: .72; }
.primary-btn:disabled, .time-select select:disabled { cursor: not-allowed; opacity: .55; }

.observation-stage {
  width: min(70vh, 580px);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  background: #fff;
  border: 6px solid #fff;
  border-radius: 50%;
  outline: 1px solid #9eb7c6;
}
.observation-stage canvas { width: 100%; height: 100%; display: block; }
.stage-overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(3, 26, 56, .94); color: #fff; }
.stage-overlay.hidden { display: none; }
.stage-overlay strong { font-size: 72px; line-height: 1; }
.stage-overlay span { margin-top: 14px; color: #c7eaf8; font-size: 14px; }
.answer-zone { position: relative; z-index: 5; width: min(520px, calc(100% - 32px)); margin: 16px auto 0; background: #fff; border: 1px solid var(--line); padding: 20px; text-align: center; box-shadow: 0 8px 24px rgba(3, 26, 56, .12); }
.answer-zone.hidden { display: none; }
.answer-zone p { margin: 0 0 18px; color: var(--navy); font-size: 19px; font-weight: 800; }
.answer-zone .panel-feedback, .orientation-panel > .panel-feedback { position: relative; left: auto; top: auto; display: block; min-width: 0; margin: 0 auto 16px; padding: 14px 20px; transform: scale(.96); font-size: 28px; }
.answer-zone .panel-feedback.show, .orientation-panel > .panel-feedback.show { transform: scale(1); }
.option-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.option-row button, .two-buttons button { border: 1px solid #aebfca; border-radius: 3px; background: #fff; color: var(--navy); padding: 14px; font-weight: 800; cursor: pointer; }
.option-row button:hover, .two-buttons button:hover { border-color: var(--blue); background: var(--pale); }
.orientation-panel { background:#fff; border:1px solid var(--line); padding:32px; text-align:center; }
.instrument-console { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:430px; margin:0 auto 24px; padding:18px; border:1px solid #aebfca; border-radius:6px; background:#e9edf0; }
.instrument { text-align:center; }
.instrument > span { display:block; margin-top:7px; color:#253747; font-size:14px; font-weight:800; letter-spacing:.08em; }
.compass-face { width:170px; height:170px; margin:auto; position:relative; overflow:hidden; border:7px solid #344656; border-radius:50%; background:#17222c; box-shadow:inset 0 0 0 2px #9cadb9; }
.compass-face::after { content:''; position:absolute; inset:12px; border:1px solid #667988; border-radius:50%; background:repeating-conic-gradient(from -1deg,transparent 0 8deg,#d9e0e5 8deg 9deg); opacity:.6; }
.compass-dial { position:absolute; inset:0; z-index:2; transform-origin:center; transition:transform .15s ease; }
.compass-dial b,.compass-dial em,.compass-dial strong,.compass-dial small { position:absolute; z-index:2; color:#fff; font-style:normal; font-size:16px; font-weight:800; line-height:1; }
.compass-dial b { top:15px; left:50%; transform:translateX(-50%); }.compass-dial em{right:16px;top:50%;transform:translateY(-50%)}.compass-dial strong{bottom:15px;left:50%;transform:translateX(-50%)}.compass-dial small{left:16px;top:50%;transform:translateY(-50%)}
.gyro-aircraft { position:absolute; z-index:5; left:50%; top:50%; width:54px; height:78px; fill:#f39b47; transform:translate(-50%,-50%); }
.rbi-arrow { position:absolute; z-index:5; left:9%; top:calc(50% - 3px); width:82%; height:6px; transform-origin:50% 50%; background:#f1dd35; }
.rbi-arrow::after { content:''; position:absolute; right:-2px; top:50%; transform:translateY(-50%); border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:18px solid #f1dd35; }
.orientation-answer-layout { display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:center; max-width:620px; margin:20px auto 0; }
.rbi-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); aspect-ratio:1; border:1px solid var(--line); background:#fff; position:relative; }
.rbi-grid button { display:grid; place-items:center; border:1px solid #d5e0e6; color:var(--navy); background:#fff; font-weight:800; font-size:20px; cursor:pointer; }
.rbi-grid button.selected { background:var(--pale); border:2px solid var(--blue); }
.rbi-grid .pos-1{grid-area:1/2}.rbi-grid .pos-2{grid-area:1/3}.rbi-grid .pos-3{grid-area:2/3}.rbi-grid .pos-4{grid-area:3/3}.rbi-grid .pos-5{grid-area:3/2}.rbi-grid .pos-6{grid-area:3/1}.rbi-grid .pos-7{grid-area:2/1}.rbi-grid .pos-8{grid-area:1/1}.rbi-grid b { position:absolute; inset:33.33% 33.33%; display:grid; place-items:center; background:#eef1f2; color:#4d5960; font-size:25px; }
.choice-label { margin:0 0 8px; color:var(--navy); font-weight:800; }
.orientation-options { display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:0; width:min(100%,220px); aspect-ratio:1; margin:0 auto; border:1px solid #aebfca; }
.orientation-options button.selected { background:var(--pale); border:2px solid var(--blue); }
.orientation-submit { margin-top:12px; }
.orientation-prompt { color:var(--navy); font-weight:800; }
.orientation-options button { min-height:0; border:1px solid #aebfca; border-radius:0; background:#fff; color:var(--navy); cursor:pointer; }
.orientation-options svg { width:64%; height:64%; fill:#0c2138; }
.north-mark { position:absolute; left:50%; top:-25px; transform:translateX(-50%); padding:3px 10px; background:#d7dde1; color:#17222c; font-style:normal; font-weight:800; }

.multi-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 560px; }
.task-panel { display: flex; flex-direction: column; position: relative; background: #fff; border: 1px solid var(--line); padding: 22px; }
.shape-task { grid-row: 1 / 3; }
.task-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.task-label span { margin-right: 7px; color: var(--blue); }
.task-panel h2 { margin: 9px 0 18px; color: var(--navy); font-size: 18px; }
.shape-workspace { flex:1; display:flex; flex-direction:column; justify-content:center; padding-top:18px; }
.shape-symbols { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 26px; color: var(--navy); white-space: nowrap; }
.shape-symbols svg { display:block; flex:0 1 74px; width:min(18%,74px); height:auto; aspect-ratio:1; fill:currentColor; }
.two-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.two-buttons button { min-height: 68px; touch-action: manipulation; }
.panel-feedback { position: absolute; left: 50%; top: 50%; z-index: 5; min-width: 108px; padding: 12px 18px; transform: translate(-50%, -50%) scale(.96); opacity: 0; border: 2px solid currentColor; background: rgba(255, 255, 255, .96); text-align: center; font-size: 21px; font-weight: 800; pointer-events: none; transition: opacity .12s, transform .12s; }
.panel-feedback.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.panel-feedback.correct { color: var(--good); }
.panel-feedback.incorrect { color: var(--bad); }
.shape-task #shape-feedback { left:auto; right:14px; top:14px; min-width:92px; padding:8px 12px; transform:scale(.96); font-size:17px; }
.shape-task #shape-feedback.show { transform:scale(1); }
.math-question { flex: 1; display: flex; align-items: center; justify-content: center; gap: .3em; color: var(--navy); text-align: center; white-space: nowrap; font: 800 clamp(21px, 2.7vw, 34px)/1.2 ui-monospace, monospace; }
.math-question span { display: inline; color: var(--blue); font-size: 1em; }
.audio-display { flex: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 10px 15px; background: var(--pale); border: 1px solid #d8e7ee; }
.audio-display button { border: 0; background: transparent; color: var(--blue); font-weight: 700; cursor: pointer; }
.sound-bars { display: flex; align-items: center; gap: 4px; height: 38px; }
.sound-bars i { display: block; width: 4px; height: 13px; background: var(--blue); animation: pulse .7s ease-in-out infinite alternate; }
.sound-bars i:nth-child(2), .sound-bars i:nth-child(4) { animation-delay: .2s; }
.sound-bars i:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { to { height: 31px; } }

.control-layout { display:grid; grid-template-columns:132px minmax(0,1fr) 236px; gap:12px; min-height:520px; }
.tunnel-stage { position:relative; overflow:hidden; min-height:430px; border:1px solid #36536c; background:#173f65; }
.tunnel-stage canvas { display:block; width:100%; height:100%; touch-action:none; }
.control-status { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(6,43,92,.32); font-size:clamp(30px,5vw,58px); font-weight:900; letter-spacing:.08em; opacity:0; pointer-events:none; transition:opacity .12s; }
.control-status.show { opacity:1; }
.control-status.hit { background:rgba(184,52,75,.48); color:#fff; }
.control-console, .control-speed-panel { display:flex; flex-direction:column; justify-content:center; gap:14px; padding:14px; border:1px solid var(--line); background:#fff; }
.control-pad { width:min(100%,220px); aspect-ratio:1; position:relative; margin:0 auto; overflow:hidden; border:3px solid #315a8d; border-radius:50%; background:#f7fbfd; touch-action:none; user-select:none; }
.pad-axis { position:absolute; left:50%; top:50%; background:#315a8d; opacity:.72; transform:translate(-50%,-50%); pointer-events:none; }
.pad-axis.horizontal { width:100%; height:3px; }
.pad-axis.vertical { width:3px; height:100%; }
.control-knob { position:absolute; left:50%; top:50%; width:54px; height:54px; padding:0; border:4px double #315a8d; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 2px 7px rgba(7,43,91,.22); touch-action:none; cursor:grab; }
.control-knob:active { cursor:grabbing; }
.control-speed-panel button { min-height:104px; border:1px solid #9eb7c6; border-radius:3px; background:#fff; color:var(--navy); font-weight:800; cursor:pointer; touch-action:manipulation; }
.control-speed-panel button span { display:block; margin-bottom:5px; color:var(--blue); font-size:34px; line-height:1; }
.control-speed-panel button:active { background:var(--pale); border-color:var(--blue); }

.result-panel { max-width: 760px; margin: auto; padding: clamp(28px, 5vw, 52px); background: #fff; border: 1px solid var(--line); text-align: center; }
.result-panel h1 { margin: 0 0 24px; color: var(--navy); font-size: 36px; }
.score-ring { width: 170px; height: 170px; margin: 0 auto 20px; display: grid; place-content: center; border: 10px solid var(--blue); border-radius: 50%; }
.score-ring strong { color: var(--navy); font-size: 50px; line-height: 1; }
.score-ring span { margin-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: .14em; }
.result-message { color: var(--muted); }
.result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 28px 0; background: var(--line); border: 1px solid var(--line); }
.result-stat { background: #fff; padding: 17px; }
.result-stat span { display: block; color: var(--muted); font-size: 12px; }
.result-stat strong { display: block; margin-top: 5px; color: var(--navy); font-size: 21px; }
.result-actions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.result-actions .primary-btn { width: auto; min-width: 150px; justify-content: center; }

.records-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 28px; }
.record-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.summary-card, .history-panel { background: #fff; border: 1px solid var(--line); padding: 21px; }
.summary-card span { color: var(--muted); font-size: 13px; }
.summary-card strong { display: block; margin-top: 7px; color: var(--navy); font-size: 28px; }
.history-panel h2 { margin-top: 0; color: var(--navy); font-size: 19px; }
.history-row { display: grid; grid-template-columns: 1.5fr .8fr .8fr 1fr; gap: 12px; align-items: center; padding: 15px 5px; border-top: 1px solid #e1e9ee; }
.history-row:first-child { border-top: 0; }
.history-row strong { color: var(--navy); }
.history-row span { color: var(--muted); font-size: 14px; }
.history-empty { padding: 38px; color: var(--muted); text-align: center; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; padding: 11px 18px; transform: translate(-50%, 24px); opacity: 0; background: var(--navy); color: #fff; border-radius: 3px; font-weight: 700; transition: .2s; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.good { background: var(--good); }
.toast.bad { background: var(--bad); }
.rotate-notice { display: none; }

@media (max-width: 760px) {
  .topbar { height: 62px; padding: 0 15px; }
  .brand { gap:8px; }
  .brand-mark { min-width:36px; }
  .brand-mark img { width: 31px; height: 31px; }
  .brand-mark strong { font-size:10px; }
  .acat-word { font-size:18px; gap:3px; }
  .acat-full { font-size:6px; gap:2px; }
  .acat-full b { font-size:7px; }
  .acat-full i { font-size:6px; }
  nav { gap: 16px; }
  main { width: min(100% - 24px, 1100px); padding: 30px 0 48px; }
  .home-intro { padding-top: 0; }
  .game-grid { grid-template-columns: 1fr; }
  .orientation-card { grid-column:auto; }
  .game-card { padding: 22px; }
  .game-header { align-items: start; gap: 12px; }
  .game-header h1 { font-size: 22px; }
  .hud { display: grid; grid-template-columns: 1fr 1fr; }
  .hud span { padding: 7px 8px; }
  .hud .timer { grid-column: 1 / 3; }
  .observation-stage { width: min(calc(100vw - 36px), 540px); }
  #observation.view.active { display: block; }
  .orientation-answer-layout { grid-template-columns:1fr; max-width:420px; }
  .control-layout { grid-template-columns:1fr; min-height:0; }
  .tunnel-stage { min-height:52vh; }
  .control-console { align-items:center; padding:14px; }
  .control-pad { width:min(42vw,210px); margin:0; }
  .control-speed-panel { flex-direction:row; }
  .control-speed-panel button { flex:1; min-height:74px; }
  #observation .answer-zone { width: min(520px, calc(100% - 24px)); margin: 12px auto 0; padding: 16px; }
  .multi-grid { display: flex; flex-direction: column; min-height: 0; }
  .task-panel { min-height: 240px; padding: 18px; }
  .shape-task { min-height: 280px; }
  .shape-symbols { margin: 18px 0 18px; font-size: clamp(25px, 9vw, 38px); }
  .math-question { font-size: clamp(18px, 5vw, 27px); }
  .record-summary { grid-template-columns: 1fr; }
  .records-heading { align-items: start; }
  .history-row { grid-template-columns: 1.4fr .7fr .7fr; }
  .history-row span:last-child { grid-column: 1 / 4; }
  .result-stats { grid-template-columns: 1fr 1fr; }
  .result-panel { padding: 27px 16px; }
  .score-ring { width: 150px; height: 150px; }
  .disclaimer { line-height: 1.6; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .topbar { height: 48px; padding: 0 12px; }
  .brand { gap:6px; }
  .brand-mark { min-width:30px; }
  .brand-mark img { width:25px; height:25px; }
  .brand-mark strong { font-size:8px; }
  .acat-word { font-size:14px; gap:2px; }
  .acat-full { font-size:5px; gap:1px; }
  .acat-full b { font-size:6px; }
  .acat-full i { font-size:5px; }
  nav { gap: 14px; }
  main { width: calc(100% - 16px); padding: 8px 0; }
  .game-header { align-items: center; margin-bottom: 7px; }
  .game-header .eyebrow { display: none; }
  .game-header h1 { font-size: 17px; }
  .hud { display: flex; gap: 5px; }
  .hud span { padding: 5px 7px; font-size: 10px; }
  .hud strong { font-size: 13px; }
  .hud .timer { min-width: 67px; font-size: 15px; }
  .multi-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 7px; height: calc(100vh - 114px); min-height: 244px; }
  .task-panel { min-height: 0; padding: 9px; }
  .shape-task { grid-row: 1 / 3; min-height: 0; }
  .task-label { font-size: 8px; }
  .task-panel h2 { margin: 3px 0 5px; font-size: 13px; }
  .shape-symbols { gap: 3px; font-size: clamp(25px, 5vw, 39px); }
  .math-question { font-size: clamp(17px, 3.4vw, 28px); }
  .two-buttons { gap: 6px; }
  .two-buttons button { min-height: 64px; padding: 7px 5px; font-size: 14px; }
  .audio-display { min-height: 36px; margin-bottom: 5px; padding: 2px 8px; }
  .audio-display button { font-size: 11px; }
  .sound-bars { height: 24px; }
  .sound-bars i { height: 9px; animation: none; }
  .progress-track { margin-top: 6px; }
  .panel-feedback { min-width: 88px; padding: 9px 12px; font-size: 17px; }
  .control-layout { grid-template-columns:96px minmax(0,1fr) 150px; gap:7px; height:calc(100vh - 114px); min-height:244px; }
  .tunnel-stage { min-height:0; }
  .control-console, .control-speed-panel { gap:7px; padding:7px; }
  .control-speed-panel { flex-direction:column; }
  .control-pad { width:clamp(108px,34vh,136px); }
  .control-knob { width:42px; height:42px; }
  .control-speed-panel button { min-height:74px; font-size:13px; }
  .control-speed-panel button span { display:block; margin:0 0 3px; font-size:24px; }
}

@media (orientation: portrait) and (max-width: 760px) {
  #multitask.active .rotate-notice, #control.active .rotate-notice { display: block; margin-bottom: 12px; padding: 11px; background: var(--navy); color: #fff; text-align: center; font-size: 14px; font-weight: 700; }
  #control.active .rotate-notice { min-height:52vh; place-content:center; padding:28px; font-size:18px; line-height:1.7; }
  #control.active .game-header, #control.active .control-layout, #control.active .progress-track { display:none; }
}

body.control-portrait-lock { overflow:hidden; }
body.control-portrait-lock #control.active .rotate-notice {
  display:grid; position:fixed; inset:0; z-index:1000; place-content:center; margin:0; padding:32px;
  background:var(--navy); color:#fff; text-align:center; font-size:clamp(22px,6vw,34px); font-weight:800; line-height:1.7;
}
body.control-portrait-lock #control.active .rotate-notice small { display:block; margin-top:14px; font-size:14px; font-weight:500; }
body.control-portrait-lock #control.active .game-header,
body.control-portrait-lock #control.active .control-layout,
body.control-portrait-lock #control.active .progress-track { visibility:hidden; pointer-events:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Center the direction problem in its tall panel and keep every drawn shape equal. */
.shape-task .shape-symbols { flex:0 0 auto; margin:0 0 26px; }
.shape-task .two-buttons { flex: 0 0 auto; }
.shape-task .two-buttons button { min-height: 88px; padding: 14px 10px; font-size: 18px; }
@media (orientation: landscape) and (max-height: 600px) {
  .shape-workspace { padding-top:10px; }
  .shape-task .shape-symbols { margin:0 0 12px; }
  .shape-symbols svg { flex-basis:54px; width:min(18%,54px); }
  .shape-task .two-buttons button { min-height:76px; padding:8px 5px; font-size:15px; }
}