/* 操作判断の階層を整える表示専用CSS。アリーナ寸法とシミュレーション時間から独立している。
   ゴールドはPico／操作、シアンはTARGET、警告色は制限時間直前だけに使用する。 */
:root { --ui-text: #e9f0ed; --ui-secondary: #b8c7d2; --ui-font: "Yu Gothic UI", "Meiryo", sans-serif; }
/* READY stays in the charge bar; the pulse wins over the simultaneous near-miss tint. */
body.ready:not(.stopped) .charge { box-shadow: inset 0 0 14px #fff3c414; }
body.ready:not(.stopped) .charge #gauge-value { color: #fff3ce; text-shadow: 0 0 7px #ffe8b64d; }
body.gauge-ready-idle .charge::after,body.gauge-ready-wave .charge::after { content: ''; position: absolute; inset: 1px; border: 1px solid #fff; pointer-events: none; z-index: 2; }
body.gauge-ready-idle .charge::after { animation: gauge-ready-idle var(--ready-idle-period) ease-out infinite; }
/* Same phase as the idle wave; arrival keeps its brighter white flash and halo. */
body.gauge-ready-idle:not(.gauge-ready-wave):not(.gauge-ready-flash) .charge progress { animation: gauge-ready-bar var(--ready-idle-period) ease-out infinite; }
body.gauge-ready-wave .charge::after { animation: gauge-ready-wave var(--ready-wave-seconds) ease-out both; }
body.ready.gauge-ready-flash .charge { animation: none; filter: none; box-shadow: inset 0 0 20px #ffffff45; }
body.gauge-ready-flash .charge progress::-webkit-progress-value { background: #fff; box-shadow: 0 0 10px #ffffffc0; }
body.gauge-ready-flash .charge progress::-moz-progress-bar { background: #fff; box-shadow: 0 0 10px #ffffffc0; }
@keyframes gauge-ready-wave { from { opacity: .9; inset: 1px; } to { opacity: 0; inset: calc(-1 * var(--ready-wave-expand)); } }
@keyframes gauge-ready-idle { 0%,60% { opacity: 0; inset: 1px; } 65% { opacity: var(--ready-idle-opacity); inset: 1px; } 100% { opacity: 0; inset: calc(-1 * var(--ready-idle-expand)); } }
@keyframes gauge-ready-bar { 0%,60%,82%,100% { filter: none; box-shadow: none; } 65% { filter: brightness(1.22) saturate(.25); box-shadow: 0 0 5px #ffffff20; } }
@media (prefers-reduced-motion: reduce) { body.gauge-ready-idle .charge::after { animation: none; opacity: 0; } body.gauge-ready-idle .charge progress { animation: none !important; filter: none; box-shadow: none; } body.gauge-ready-wave .charge::after { animation: none; opacity: .25; inset: 1px; } }
.play-footer { gap: 8px 20px; flex-wrap: wrap; }
#hint { color: var(--ui-text); font: 14px/1.5 var(--ui-font); margin: 0; }
.play-footer .score-stat { display: flex; align-items: baseline; gap: 10px; margin-left: auto; white-space: nowrap; font: 12px var(--utility); color: var(--ui-secondary); }
#score { font-size: 16px; font-weight: 400; color: #c3cfd6; }
.field-caption, .field-legend, .masthead-logo small { display: none; }
.play-help { margin: 0; padding: 0; border: 0; background: none; font: 14px/1.7 var(--ui-font); color: var(--ui-secondary); }
.play-help summary { cursor: pointer; width: fit-content; min-height: 24px; text-decoration: underline; text-underline-offset: 4px; }
.play-help[open] { flex-basis: 100%; order: 3; }
.play-help > div { border-top: 1px solid #526276; padding: 10px 0; }
.play-help p { margin: 8px 0; }.play-help b { color: #f5d695; }.play-help small { font-size: 12px; }
.status-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.status-stat > span { margin: 0; }
.wave-stat::before,.wave-stat::after { display: none; }
.hud span, .charge label span { letter-spacing: .045em; }
#target-note { color: #b5e5e8; font: 12px/1.1 var(--ui-font); white-space: nowrap; }
#lock-count { color: #a1edf0; font-variant-numeric: tabular-nums; white-space: nowrap; }
#life { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: #ffdf96; font-variant-numeric: tabular-nums; }
#life::before { content: ""; width: 14px; height: 19px; border: 2px solid #ffe6ab; border-radius: 50% 50% 45% 45%; background: #ffda85; box-shadow: 0 0 9px #f5d69566; }
#life.is-empty { color: #b4bac4; }#life.is-empty::before { background: transparent; border-color: #717c8d; box-shadow: none; }
.charge label { align-items: center; }.charge label span { color: var(--ui-secondary); }
#stop-time { color: #ffdf96; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1; }
.charge progress { height: 9px; }
.charge progress::-webkit-progress-bar { background: #39465a; }
.ready .charge progress::-webkit-progress-value,.stopped .charge progress::-webkit-progress-value { background: #ffe2a2; box-shadow: none; }
.ready .charge progress::-moz-progress-bar,.stopped .charge progress::-moz-progress-bar { background: #ffe2a2; }
.stop-critical .charge progress::-webkit-progress-value { background: #ffb16e; }.stop-critical .charge progress::-moz-progress-bar { background: #ffb16e; }
.stop-final .charge progress::-webkit-progress-value { background: #ff899b; }.stop-final .charge progress::-moz-progress-bar { background: #ff899b; }
.stopped #stop-time { color: #fff0c4; }.stop-critical #stop-time { color: #ffd080; }.stop-final #stop-time { color: #ffadba; }
.stop-critical .charge { border-left: 4px solid #ffb16e; }.stop-final .charge { border-left-color: #ff899b; }
#gauge-value { font: 12px var(--ui-font); color: var(--ui-secondary); white-space: nowrap; }
.controls button { font-size: 13px; }.controls kbd { font-size: 12px; }
.ready:not(.stopped) #time-stop { background: #f5d695; color: #251e14; border-color: #ffe9b9; }
/* On PC, SPACE is the execution input. Disabled mouse activation must not
   dim the instruction the player is required to follow. */
body:not(.touch-controls).stopped #time-stop:disabled { opacity: 1; color: #fff0c4; background: #342e24; border-color: #ab915d; }
body:not(.touch-controls).stopped #time-stop.execute-ready:disabled { color: #261d12; background: #f5d695; border-color: #ffe9b9; }
.area-caption { font: 13px/1.4 var(--ui-font); color: #d2e0e3; text-shadow: 0 1px 4px #020712; }
.tutorial-prompt { font-size: 17px; letter-spacing: .025em; background: #09131eeb; color: #fff0c4; top: 3%; padding: 9px 14px; }
.tutorial-prompt kbd { font-size: 14px; color: #ffe1a2; }
.lock-ready small,.callout small,.execution-cue span { font-size: 15px; letter-spacing: .03em; }
.result > span,.formal-result dt { font-size: 14px; letter-spacing: .08em; }
.result button { font-size: 16px; background: #f5d695; color: #241e13; }.result kbd { font-size: 13px; }
.result p { font: 16px/1.8 var(--ui-font); }.assist-choices p { font-size: 14px; }
.area-transition > span { font-size: 16px; letter-spacing: .06em; }.area-transition small { font-size: 15px; }
.area-transition.is-restoring strong { font-size: clamp(34px,4vw,64px); }
/* BRIEFINGはMOVE／NEAR MISS／FREEZE／DRAW／EXECUTEの5ページで構成し、各ページ固有のデモ演出を持つ。 */
.briefing-panel { width: min(100%,1200px); }
.briefing-header span,.briefing-header strong { font-size: 15px; letter-spacing: .08em; }
.briefing-page { grid-template-columns: minmax(320px,.85fr) minmax(420px,1.15fr); }
.briefing-copy { padding: 32px; }.briefing-number { font-size: 16px; letter-spacing: .08em; color: #ffe0a0; }
.briefing-copy h2 { font-size: clamp(30px,3vw,48px); line-height: 1.1; margin: 18px 0; }
.briefing-copy p { font: 18px/1.9 var(--ui-font); color: #e0e9e8; }
.briefing-input,.briefing-input kbd { font-size: 14px; }
.briefing-actions button { font-size: 16px; min-height: 52px; }.briefing-actions kbd { font-size: 13px; }
.briefing-progress i { height: 5px; }
/* Use the safe lower-left title footprint; the title art does not scale here. */
.pico-title .title-start { font-size: 21px; }
.pico-title .title-training-launch strong { font-size: 17px; }.pico-title .title-training-launch span { font-size: 14px; }
.pico-title .title-secondary button { font-size: 14px; min-height: 44px; }
.pico-title .title-info,.pico-title .title-info p { font-size: 16px; }
.pico-title .title-controls-list dd,.pico-title .title-controls-list dt { font-size: 14px; }
.pico-title .title-controls-list kbd { font-size: 13px; }
.pico-title .title-panel-header h2,.pico-title #title-training,.pico-title [data-title-close] { font-size: 14px; }
.pico-title [data-title-close] { min-height: 44px; }
/* Map labels and actions share the photograph-relative beacon and mask coordinates. */
.map-board { isolation: isolate; }
.world-before { z-index: 1; }.world-diagram { z-index: 2; }.map-node { z-index: 3; }.map-art-message { z-index: 4; }
.map-header button { font-size: 14px; min-height: 40px; }
.map-intro .map-kicker,.map-copy,.map-footer { display: none; }
.map-intro { max-width: 240px; }.map-intro h1 { font-size: 26px; }
.map-progress { margin-top: 16px; }.map-progress strong { font-size: 32px; }.map-progress strong span { font-size: 16px; }
.map-progress > span { font-size: 12px; letter-spacing: .03em; }#map-progress-lights i { width: 25px; height: 4px; }
.map-notice { font: 16px/1.65 var(--ui-font); max-width: 240px; }
.map-node b { font: 700 18px var(--utility); letter-spacing: .015em; }.map-node small { font: 14px/1.5 var(--ui-font); }.map-node em { font: 12px/1.5 var(--utility); letter-spacing: .03em; }
.map-node[data-status="locked"] .map-node-label { opacity: 1; color: #c0cbd6; }
.map-node-label { padding: 5px 8px; border-radius: 3px; background: #070e18b8; text-shadow: 0 1px 4px #000; }
.map-node[aria-pressed="true"] .map-node-label { box-shadow: inset 0 -2px #f5d695; color: #ffe5ad; }
.map-detail { width: 300px; padding-top: 8px; bottom: 2%; }.map-detail h2 { font-size: 34px; }.map-detail .map-kicker { font-size: 13px; letter-spacing: .06em; }
#map-area-ja { font-size: 16px; margin-bottom: 10px; }#map-area-status { font-size: 13px; letter-spacing: 0; }
#map-area-description { font: 14px/1.7 var(--ui-font); }.map-detail dl { font-size: 13px; }
#map-enter { font-size: 17px; min-height: 52px; }
#world-map #map-training strong { font-size: 15px; }#world-map #map-training span { font-size: 13px; }
.map-session-note { font-size: 12px; }
/* Desktop arena dimensions reserve 124px for the HUD, or 103px on short screens,
   while the playfield dimensions remain constant. */
@media (min-width: 1101px) and (min-height: 701px) {
  .hud { min-height: 72px; height: 72px; padding: 6px 22px; gap: 24px; grid-template-columns: minmax(245px,1fr) 85px minmax(220px,.8fr); }
  .hud span { font-size: 12px; }.status-stat { gap: 1px; }#phase { font-size: 25px; letter-spacing: .025em; }#status-action { font-size: 15px; letter-spacing: .025em; }
  .wave-stat { min-width: 0; }#wave-current { font-size: 28px; }#wave-total { font-size: 15px; }
  .hud-secondary { gap: 32px; align-items: center; }.hud-secondary > div { gap: 0; }.hud-secondary strong { font-size: 30px; }.life-stat { padding-left: 24px; }
  .charge { min-height: 52px; height: 52px; padding: 4px 22px; grid-template-columns: 225px minmax(0,1fr) 76px; gap: 16px; }
  .charge label span { font-size: 12px; }#stop-time { font-size: 40px; }
  .controls { grid-template-columns: repeat(3,minmax(96px,125px)) minmax(240px,360px); }
  .utilities button { font-size: 14px; }
}
@media (min-width: 1101px) and (min-height: 701px) and (max-height: 850px) {
  .hud { height: 62px; min-height: 62px; padding-block: 3px; gap: 12px; grid-template-columns: minmax(230px,1fr) 68px 200px; }
  #phase { font-size: 23px; }#status-action { font-size: 14px; }.hud-secondary { gap: 20px; }.hud-secondary strong { font-size: 27px; }
  .charge { height: 41px; min-height: 41px; padding-block: 2px; }#stop-time { font-size: 34px; }
  .controls { grid-template-columns: repeat(3,96px) minmax(220px,1fr); padding-block: 10px; }.controls button { min-height: 48px; }
}
@media (min-width: 1001px) and (max-height: 850px) {
  .map-layout { width: min(100%,calc((100svh - 248px) * 1.7916667)); }
  .map-intro h1 { font-size: 22px; }.map-progress strong { font-size: 25px; }.map-notice { max-width: 190px; font-size: 14px; }
  .map-detail { position: static; width: 100%; margin-top: 36px; padding: 10px 0; border-left: 0; border-top: 1px solid #b79a5b66; background: none; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 5px 18px; }
  .map-detail .map-kicker { grid-column: 1; grid-row: 1; margin: 0; }.map-detail h2 { grid-column: 1; grid-row: 2; font-size: 26px; }
  #map-area-ja { grid-column: 1; grid-row: 3; margin: 0; font-size: 14px; }#map-area-status { grid-column: 2; grid-row: 1; }
  .map-detail dl { grid-column: 2; grid-row: 2/4; margin: 0; font-size: 12px; align-self: center; }
  #map-enter { grid-column: 3; grid-row: 1/3; min-height: 48px; }#world-map #map-training { grid-column: 3; grid-row: 3; min-height: 50px; margin: 0; padding: 7px 10px; }
}
@media (max-width: 1100px), (max-height: 700px) {
  #phase { font-size: 18px; }#status-action { font-size: 12px; }#stop-time { font-size: 25px; }.charge label span { font-size: 11px; }
  #lock-count,#life { font-size: 23px; }#target-note { font-size: 10px; }.controls button { font-size: 12px; }
  .pico-title .title-start { font-size: 17px; }.pico-title .title-training-launch strong { font-size: 14px; }.pico-title .title-training-launch span { font-size: 12px; }
  .pico-title .title-secondary button { font-size: 12px; }.pico-title .title-info,.pico-title .title-info p { font-size: 14px; }
}
@media (max-width: 800px) {
  .briefing-page { grid-template-columns: minmax(220px,.8fr) minmax(300px,1.2fr); }.briefing-copy { padding: 20px; }.briefing-copy p { font-size: 16px; }
  .briefing-header span,.briefing-header strong { font-size: 12px; }.briefing-actions button { font-size: 13px; }
  .briefing-copy h2 { font-size: 30px; }.briefing-screen { overflow-y: auto; }.briefing-panel { margin-block: auto; }
  .map-node b { font-size: 13px; }.map-node small { font-size: 11px; }.map-node em { font-size: 10px; }.map-intro { max-width: none; }
}
@media (max-width: 650px) {
  .briefing-page { grid-template-columns: 1fr; }
  .hud { gap: 8px; }.hud-secondary { align-items: center; }#target-note { display: none; }
  #life { gap: 7px; }#life::before { width: 10px; height: 14px; }
  .charge { grid-template-columns: 90px minmax(0,1fr) 62px; }.charge label { display: block; }#gauge-value { font-size: 10px; }
  .area-caption { font-size: 10px; }.tutorial-prompt { font-size: 13px; padding: 6px 9px; }.tutorial-prompt kbd { font-size: 11px; }
  #hint { font-size: 12px; }.play-footer { flex-wrap: wrap; }.result button { font-size: 13px; }.result > span,.formal-result dt { font-size: 12px; }
  .area-transition > span,.area-transition small { font-size: 12px; }.area-transition.is-restoring strong { font-size: 32px; }
  .map-detail { width: 100%; }.map-notice { max-width: none; font-size: 14px; }.map-node-label { padding: 2px 4px; }
}
@media (max-height: 520px) and (min-width: 651px) {
  .briefing-page { grid-template-columns: minmax(250px,.8fr) minmax(320px,1.2fr); }.briefing-copy { padding: 12px; }
  .briefing-copy h2 { font-size: 25px; margin: 8px 0; }.briefing-copy p { font-size: 14px; line-height: 1.5; }.briefing-input { margin-top: 10px; }
  .briefing-actions button { min-height: 44px; }.briefing-number { font-size: 13px; }
  .pico-title .title-training-launch span { font-size: 10px; }.pico-title .title-secondary button { font-size: 10px; min-height: 36px; }
}