@charset "UTF-8";
:root { color-scheme: dark; --bg: #090b0d; --line: #272b2d; --text: #e8e8e1; --muted: #8c9293; --accent: #d9c6a1; --ship: #eeeadd; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--bg); color: var(--text); overflow: hidden; }
body { font-family: "Helvetica Neue", "Segoe UI", "Microsoft YaHei", sans-serif; -webkit-user-select: none; user-select: none; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 1px solid var(--ship); outline-offset: 5px; }
canvas:focus-visible { outline: none; }
button:disabled { opacity: .25; cursor: default; }
[hidden] { display: none !important; }
#app { --field-width: min(100%, calc((100dvh - 163px) * 1.5384615385)); width: min(1160px, 100%); height: 100dvh; margin: auto; padding: 0 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
header { width: var(--field-width); height: 96px; flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.brand { font-size: 17px; font-weight: 500; letter-spacing: 2px; color: #b6bcb9; }
#graze-count { display: block; margin-top: 7px; font-size: 12px; font-weight: 400; letter-spacing: .5px; color: #77837b; }
#graze-count.active { color: #e0ffda; }
.brand-number { margin-left: 6px; color: var(--text); font-weight: 400; letter-spacing: 0; }
.label { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.clock, .record { display: flex; flex-direction: column; gap: 5px; }.clock { align-items: center; }.record { align-items: flex-end; }
#time, #best, .result-time { font-family: "Cascadia Mono", "Consolas", monospace; font-variant-numeric: tabular-nums; }
#time { font-size: 34px; font-weight: 400; letter-spacing: -1.7px; line-height: 1.1; }#time span { color: var(--muted); font-size: 14px; padding-left: 8px; letter-spacing: 0; }
#rank-name { font-size: 14px; line-height: 1.2; color: #d0c2a7; white-space: nowrap; }
body[data-state="replay"] #clock-label { color: #bbc8c7; }
body[data-replay-phase="slow"] #time, body[data-replay-phase="slow"] #rank-name { color: #f2ce8a; }
body[data-replay-phase="impact"] #time, body[data-replay-phase="impact"] #rank-name { color: #efa887; }
#best { font-size: 15px; color: #b3b9b6; }
#record-value { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#bullet-notice { --bullet-color: #d5b775; position: absolute; z-index: 1; top: 14px; right: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; text-shadow: 0 1px 4px #000, 0 0 9px #000; }
#bullet-notice .label { color: #c6c9bf; font-size: 11px; letter-spacing: 2px; }
#bullet-notice[data-kind="slow"] { --bullet-color: #64d98a; }
#bullet-notice[data-kind="fast"] { --bullet-color: #ead7ab; }
.notice-type { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; color: #f0f0e5; white-space: nowrap; }
.notice-type i { width: 7px; height: 7px; border-radius: 50%; background: var(--bullet-color); }
#bullet-notice[data-kind="fast"] i { width: 10px; height: 6px; }
#field { position: relative; container-type: inline-size; width: var(--field-width); aspect-ratio: 1000 / 650; flex-shrink: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#overlay { position: absolute; z-index: 2; inset: 0; display: flex; justify-content: center; align-items: center; text-align: center; background: radial-gradient(ellipse at center, #090b0dfc 0%, #090b0de8 35%, #090b0d35 90%); }
#overlay.gone { display: none; }.intro, .result { padding: 24px; }
.eyebrow { color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 2px; }
h1 { margin: 0 0 24px; font-size: clamp(38px, 5vw, 58px); font-weight: 400; letter-spacing: 2px; line-height: 1.15; }
h1 span { color: var(--text); font-weight: 300; padding-left: 12px; letter-spacing: -2px; }
.current-aircraft { margin:-14px auto 12px; }.current-aircraft canvas { width:120px; height:75px; margin:auto; }
.current-aircraft figcaption { color:#77837b; font-size:11px; letter-spacing:1px; }
p { color: #9aa19f; font-size: 15px; margin: 0 0 34px; }
.primary { min-width: 186px; padding: 13px 20px; background: #e4e3d9; color: #171a1a; border: 1px solid #e4e3d9; border-radius: 2px; font-size: 15px; font-weight: 500; text-align: left; }
.primary span { float: right; margin-left: 38px; color: #737973; }.primary:hover { background: #f3f0e5; }.primary:active { background: #cacac2; }
.intro-help { color: #8f9795; font-size: 14px; margin-top: 26px; }.intro-help i { padding: 0 10px; font-style: normal; }
.hitbox-help { color: #69716f; font-size: 12px; margin-top: 12px; }
.result-time { font-size: clamp(44px, 6.8vw, 78px); font-weight: 300; letter-spacing: -4px; margin: 14px 0 18px; }.result-time small { font-size: 23px; color: #8c9491; margin-left: 10px; }
.result p { margin-bottom: 28px; }h2 { font-size: 32px; font-weight: 400; margin: 18px 0 28px; }
.result-stats { color: #a2b3a7; font-size: 14px; margin: -12px 0 22px; }
.secondary { display: block; margin: 14px auto 0; padding: 9px 18px; border: 1px solid #424b46; border-radius: 2px; background: #131817; color: #c2cec5; font-size: 14px; }
.secondary:hover:not(:disabled) { color: #f0f3e8; border-color: #738279; }
.result { max-height: 100%; overflow-y: auto; }.result-actions { display: flex; justify-content: center; gap: 10px; }
.result-actions .primary { min-width: 164px; }.result-actions .primary span { margin-left: 18px; }
.result-actions .secondary { margin: 0; white-space: nowrap; }
#result { width: min(680px, 100%); }
.result-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; align-items: center; margin-bottom: 24px; }
.damage-figure { margin: 0; }
#damage-canvas { width: 100%; height: auto; aspect-ratio: 10 / 11; max-height: 260px; object-fit: contain; }
.damage-figure figcaption { font-size: 14px; color: #c5cdc7; line-height: 1.5; }
.result-summary { text-align: left; }
.result-summary .result-stats { margin: 0; color: #c0cdc2; }
.result-style { margin-top: 7px; color: #ded0ae; font-size: 14px; letter-spacing: 1px; }
.result-excitement { margin-top: 7px; color: #ded0ae; font-size: 14px; }
body[data-input="touch"] #bullet-notice { top: 8px; gap: 2px; }
body[data-input="touch"] .notice-type { font-size: 14px; }
body[data-input="touch"] .result-style, body[data-input="touch"] .result-excitement { font-size: 12px; margin-top: 4px; }
@container (max-width: 600px) {
  #result { padding: 16px; }
  .result-layout { grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: 18px; margin-bottom: 14px; }
  #damage-canvas { max-height: 190px; }
  .result-summary .eyebrow { font-size: 14px; letter-spacing: 1px; }
  .result-summary .result-time { font-size: 40px; letter-spacing: -2px; margin: 10px 0; }
  .result-summary p { font-size: 12px; margin: 8px 0; }
  #result .intro-help { display: none; }
}
@container (max-width: 400px) {
  #result { padding: 12px; }
  .result-layout { gap: 12px; margin-bottom: 10px; }
  #damage-canvas { max-height: 120px; }
  .damage-figure figcaption { font-size: 12px; }
  .result-summary .result-time { font-size: 29px; margin: 7px 0; }
  .result-summary .result-time small { font-size: 15px; margin-left: 5px; }
  #result .result-actions { gap: 8px; }
  #result .result-actions button { min-width: 0; font-size: 12px; padding: 8px 10px; }
}
#replay-bar { position: relative; width: 100%; height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 0 7px; color: #cdd7cf; font-size: 14px; }
body[data-state="replay"] footer .controls, body[data-state="replay"] footer nav, body[data-state="replay"] #status { display: none; }
#replay-bar small { color: #98ad9b; margin-left: 6px; }#replay-countdown { margin-left: auto; color: #b9c2ba; font: 12px "Consolas", monospace; }
#exit-replay, #replay-mode { color: #dfe6db; border: 1px solid #455249; background: transparent; border-radius: 2px; padding: 4px 10px; white-space: nowrap; }
body[data-replay-phase="slow"] #replay-speed { color: #f2ce8a; }
@media (max-width: 680px) {
  .current-aircraft { margin:-10px auto 8px; }.current-aircraft canvas { width:96px; height:60px; }
  #replay-bar { gap: 7px; font-size: 12px; flex-wrap: wrap; align-content: center; }
  #replay-countdown { font-size: 11px; }
  #exit-replay, #replay-mode { padding: 4px 6px; font-size: 12px; }
}
#replay-progress { position: absolute; bottom: 7px; left: 0; width: 100%; height: 2px; border: 0; accent-color: #93bea0; }
#replay-progress::-webkit-progress-bar { background: #25302b; }#replay-progress::-webkit-progress-value { background: #93bea0; }
#status { position: absolute; bottom: 16px; left: 18px; display: flex; align-items: center; gap: 8px; color: #737d78; font-size: 12px; pointer-events: none; }
.status-dot { width: 3px; height: 3px; border-radius: 50%; background: #89988c; }
body[data-state="playing"] #status { visibility: hidden; }
#focus-label { position: absolute; bottom: 16px; right: 18px; font-size: 12px; letter-spacing: 1px; color: #a3b3a9; opacity: 0; pointer-events: none; }#focus-label.active { opacity: .75; }
footer { position: relative; width: var(--field-width); display: flex; justify-content: space-between; align-items: center; height: 66px; flex-shrink: 0; gap: 10px; }
#sound-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(330px, 100%); padding: 18px; border: 1px solid #414949; background: #111617; z-index: 3; box-shadow: 0 6px 24px #0008; }
.sound-heading { display: flex; align-items: center; justify-content: space-between; font-size: 15px; margin-bottom: 14px; }
#sound-close { border: 0; background: transparent; color: #a5aeab; font-size: 14px; padding: 4px; }
#sound-panel p { font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.sound-actions { display: flex; gap: 10px; }
.sound-actions button { flex: 1; padding: 8px; border: 1px solid #53605b; background: #1c2521; color: #e1e7e1; border-radius: 2px; font-size: 14px; }
#sound-feedback { display: block; margin-top: 12px; color: #a6bbb0; font-size: 12px; line-height: 1.5; min-height: 36px; }
.controls { display: flex; gap: 22px; font-size: 14px; color: #79837f; align-items: center; }
kbd { font: 12px "Consolas", monospace; color: #afb7b1; padding: 0 2px; margin-right: 3px; }
nav { display: flex; gap: 6px; }nav button { width: 36px; height: 36px; border: 0; border-radius: 2px; background: transparent; color: #8f9992; display: grid; place-items: center; }
nav button:hover:not(:disabled) { color: #e8e8df; background: #191d1d; }nav button[aria-pressed="false"] { opacity: .4; }
#sound { width: 70px; display: flex; gap: 5px; align-items: center; justify-content: center; }#sound-state { font-size: 12px; }
#sound-test { width: 42px; font-size: 12px; }
nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }.mobile { display: none; }
@media (max-width: 680px) {
  #app { padding: 0 12px; --field-width: min(100%, calc((100dvh - 137px) * 1.5384615385)); }
  header { height: 80px; }.brand { font-size: 15px; letter-spacing: 1px; }#time { font-size: 25px; }#best { font-size: 13px; }
  .label { font-size: 12px; letter-spacing: 0; }footer { height: 56px; }.controls { gap: 6px; font-size: 14px; }
  .desktop { display: none; }.mobile { display: flex; }.intro-help.mobile { justify-content: center; }.touch-hint { display: none; }
  h1 { font-size: 36px; margin: 0 0 12px; }p { font-size: 14px; margin-bottom: 18px; }
  .primary { padding: 10px 15px; font-size: 14px; min-width: 166px; }.intro-help { margin-top: 16px; font-size: 14px; }
  .hitbox-help { display: none; }#status { bottom: 9px; left: 11px; }.result-time { margin: 6px 0; }.result p { margin-bottom: 16px; }
}
@media (pointer: coarse) { .desktop { display: none; }.mobile { display: flex; }.intro-help.mobile { justify-content: center; } }
@media (max-height: 480px) {
  #app { --field-width: min(100%, calc((100dvh - 103px) * 1.5384615385)); }header { height: 58px; }footer { height: 44px; }
  .intro { padding: 10px; }h1 { font-size: 32px; margin: 0 0 10px; }.intro-help { margin-top: 12px; }p { margin-bottom: 14px; }
  .primary { padding: 8px 16px; }.result-time { font-size: 40px; margin: 4px 0; }.result p { margin-bottom: 12px; }.hitbox-help { display: none; }
}
@media (max-width: 680px), (max-height: 480px) {
  .result { padding: 12px; }.result-time { font-size: 36px; line-height: 1.1; margin: 6px 0; }
  .result p { font-size: 12px; margin: 6px 0 12px; }.result-stats { font-size: 12px; margin: 0 0 12px; }
  .result-actions .primary { min-width: 130px; font-size: 14px; padding: 8px 12px; }
  .result-actions .secondary { font-size: 13px; padding: 8px 12px; }.result .intro-help { display: none; }
  #replay-bar { padding: 0 0 7px; gap: 8px; font-size: 12px; }
}
.mode-link { display: block; margin: 12px auto 0; padding: 8px 12px; border: 0; color: #a7cbb9; background: transparent; font-size: 13px; }
.graze-preview { width: 100%; padding: 9px; margin-top: 10px; background: #27382f; border: 1px solid #688775; color: #d4f3df; border-radius: 2px; }
body[data-input="touch"] { overscroll-behavior: none; }
body[data-input="touch"] #app {
  --pad-width: clamp(150px, 25vw, 260px);
  --field-width: min(calc(100vw - var(--pad-width) - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.5384615385));
  display: grid; grid-template-columns: var(--field-width) var(--pad-width); grid-template-rows: 56px auto 48px;
  gap: 0 16px; width: 100%; align-content: center; justify-content: center;
  padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
}
body[data-input="touch"] header { grid-column: 1; grid-row: 1; height: 56px; }
body[data-input="touch"] #field { grid-column: 1; grid-row: 2; }
body[data-input="touch"] footer { grid-column: 1; grid-row: 3; height: 48px; justify-content: center; }
body[data-input="touch"] .desktop, body[data-input="touch"] footer .controls { display: none; }
body[data-input="touch"] .intro-help.mobile { display: flex; font-size: 12px; }
body[data-input="touch"] .brand { font-size: 14px; letter-spacing: 0; }
body[data-input="touch"] #time { font-size: 25px; }
body[data-input="touch"] #rank-name, body[data-input="touch"] #best { font-size: 11px; }
body[data-input="touch"] .label, body[data-input="touch"] #graze-count { font-size: 10px; }
body[data-input="touch"] nav button { min-height: 44px; }
body[data-input="touch"] #status { display: none; }
body[data-input="touch"] .intro { padding: 10px; }
body[data-input="touch"] .intro h1 { font-size: 30px; margin-bottom: 8px; }
body[data-input="touch"] .intro p { font-size: 13px; margin-bottom: 12px; }
body[data-input="touch"] .intro-help { margin-top: 10px; }
body[data-input="touch"] .mode-link { margin-top: 4px; padding: 6px 10px; }
body[data-input="touch"] #damage-canvas { max-height: min(135px, 24dvh); }
body[data-input="touch"] #replay-bar { font-size: 11px; gap: 6px; }
body[data-input="touch"] #replay-countdown { font-size: 10px; }
body[data-input="touch"] #exit-replay, body[data-input="touch"] #replay-mode { font-size: 11px; padding: 5px; }
#touch-panel { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; gap: 8px; min-height: 0; height: 100%; }
.touch-heading { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #9aada4; }
.touch-heading button { min-height: 36px; border: 1px solid #35483e; padding: 6px 12px; color: #bfd4c7; background: #101713; }
#touch-pad { flex: 1; min-height: 54px; position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; border: 1px solid #344239; border-radius: 12px; background: #101612; }
#touch-pad[data-active="true"] { border-color: #6c9d7e; background: #131e17; }
.pad-guide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 9px; pointer-events: none; text-align: center; }
.pad-guide strong { font-size: 15px; font-weight: 400; color: #9eafa4; letter-spacing: 2px; }
.pad-guide span { font-size: 11px; line-height: 1.6; color: #64776b; }
#touch-pad[data-active="true"] .pad-guide { opacity: .4; }
#touch-point { position: absolute; width: 12px; height: 12px; margin: -6px; border: 1px solid #d5eedc; border-radius: 50%; background: #a4d6b033; pointer-events: none; }
.touch-settings { display: flex; gap: 4px; align-items: center; font-size: 11px; color: #7d9385; }
.touch-settings span { margin-right: auto; }
.touch-settings button { min-width: 32px; min-height: 36px; border: 1px solid #354339; border-radius: 3px; background: transparent; color: #92a59a; font-size: 12px; }
.touch-settings button[aria-pressed="true"] { color: #dcf3df; background: #26372b; border-color: #61846a; }
.touch-action { min-height: 40px; width: 100%; padding: 8px; border: 1px solid #a6c2ab; border-radius: 3px; color: #17251b; background: #bfd1bb; font-size: 14px; }
#touch-notice { color: #819588; font-size: 10px; line-height: 1.4; min-height: 14px; text-align: center; }
@media (orientation: portrait) {
  body[data-input="touch"] #app { --field-width: min(calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((100dvh - 348px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.5384615385)); display: flex; flex-direction: column; gap: 0; }
  body[data-input="touch"] #touch-panel { width: var(--field-width); height: 220px; flex-shrink: 0; margin-top: 8px; }
  body[data-input="touch"] .touch-heading { min-height: 30px; }
}
@media (orientation: landscape) and (max-height: 360px) {
  #touch-panel { gap: 4px; }.pad-guide span { display: none; }
  .touch-heading button { min-height: 30px; }.touch-settings button { min-height: 30px; }
  #touch-notice { font-size: 9px; }
}

.battle-scars { margin-top: 8px; color: #c4c6bd; font-size: 11px; font-weight: 600; letter-spacing: .22em; }

#bullet-roster { position:absolute; top:10px; right:12px; z-index:1; color:#adb4af; font-size:11px; pointer-events:none; padding:4px 7px; background:#000a; }
#bullet-notice { top:42px; gap:6px; padding:10px 18px; min-width:180px; border-left:2px solid var(--bullet-color); background:#090d10ed; align-items:flex-start; }
#notice-detail { color:#afb9b5; font-size:12px; }
#notice-countdown { margin-left:12px; font:16px Consolas,monospace; color:var(--bullet-color); }
body[data-input="touch"] #bullet-notice { top:31px; right:6px; padding:7px 10px; min-width:150px; gap:3px; }
body[data-input="touch"] #bullet-roster { top:5px; right:6px; font-size:9px; }
body[data-input="touch"] #notice-detail { font-size:10px; }
#sound-panel { position:fixed; top:50%; bottom:auto; right:max(12px,env(safe-area-inset-right)); transform:translateY(-50%); width:min(330px,calc(100vw - 24px)); max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto; }
.atmosphere-settings { padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.atmosphere-settings label { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0; font-size:13px; color:#c0c8c3; }
.atmosphere-settings select { min-height:36px; width:140px; background:#131b1c; color:#e2e5df; border:1px solid #46524b; padding:4px 8px; font:inherit; }
.atmosphere-settings input { width:140px; accent-color:#bfcfc1; }
.atmosphere-settings small { color:#8f9e98; font-size:12px; }
#settings { width:44px; font-size:12px; }
#field { border:0; outline:1px solid var(--line); outline-offset:-1px; }
.language-choice { display:flex; justify-content:center; gap:14px; margin-bottom:12px; }
.language-choice button { padding:6px; font-size:12px; background:none; border:0; color:#7f8c86; }
.language-choice button[aria-pressed="true"] { color:#e4e8df; text-decoration:underline; text-underline-offset:5px; }
html[lang="en"] #settings, html[lang="en"] #sound-test { width:56px; }
html[lang="en"] .controls { gap:10px; font-size:12px; }
html[lang="en"] body[data-input="touch"] .brand { font-size:12px; }
body[data-input="touch"] #field .intro { max-height:100%; overflow-y:auto; }
body[data-input="touch"] .primary span { display:none; }
.score-detail { margin-top:5px; font-size:11px; color:#91a099; }
.result-progress { margin-top:12px; font-size:13px; color:#d5ddba; line-height:1.5; }
#flight-log { width:min(480px,100%); }
#flight-log p { margin:10px 0; font-size:13px; }
#log-canvas { height:180px; width:auto; max-width:100%; margin:auto; }
.log-actions { display:flex; justify-content:center; gap:10px; margin-bottom:14px; }
.log-actions .secondary { margin:0; }
#flight-log small { font-size:11px; color:#8f9992; }
.milestone-collection, .livery-picker { margin:14px 0; padding-top:12px; border-top:1px solid #29332e; }
.milestone-list { display:flex; justify-content:center; gap:7px; margin:8px 0 6px; }
.milestone-list button { min-width:72px; padding:7px 9px; font-size:11px; }
.milestone-list button[aria-pressed="true"] { border-color:#c0d9b1; color:#e5eedf; }
@media (max-height:480px) { #log-canvas { height:100px; } }
#trend-canvas { width:100%; height:auto; margin:12px 0 5px; }
#trend-note { display:block; margin-bottom:10px; }
.log-files { margin-top:16px; flex-wrap:wrap; }
.log-files button { font-size:12px; padding:7px 10px; }
#restore-panel { border:1px solid #82775a; padding:12px; margin:12px 0; }
#log-feedback { color:#b3cabb; min-height:16px; }
#card-preview { display:block; width:100%; height:auto; margin-top:14px; }
#diagnostics { position:fixed; left:12px; bottom:4px; z-index:4; max-width:calc(100vw - 24px); font:11px/1.5 Consolas,monospace; color:#c7d7ce; background:#080d10ec; padding:5px 8px; pointer-events:none; }
@media (orientation:portrait) {
  body[data-input="touch"] #app { --touch-height:clamp(180px,28dvh,240px); --field-width:min(calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - var(--touch-height) - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.5384615385)); }
  body[data-input="touch"] #touch-panel { height:var(--touch-height); }
}
@media (orientation:landscape) and (max-height:420px) {
  body[data-input="touch"] #app { --field-width:min(calc(100vw - var(--pad-width) - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.5384615385)); grid-template-rows:40px auto 48px; }
  body[data-input="touch"] header { height:40px; }
  body[data-input="touch"] #clock-label { display:none; }
  body[data-input="touch"] .intro h1 { font-size:24px; }
  body[data-input="touch"] .intro p { margin-bottom:8px; }
  body[data-input="touch"] .intro-help { margin-top:6px; }
}
#replay-feedback:empty { display:none; }
#replay-feedback { font-size:12px; color:#d4b994; max-width:100%; }
#online-panel { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; margin:auto; padding:24px; background:#0d1213; color:#e2e5df; border:1px solid #48514b; }
#online-panel::backdrop { background:#000c; }
.online-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.online-heading h2 { font-size:22px; margin:0; }
#online-panel .secondary { min-height:40px; padding:8px 12px; font-size:12px; margin:0; }
#online-panel p,#online-panel small { font-size:12px; line-height:1.6; color:#a6b5ac; }
#online-panel p { margin:12px 0; }
#online-status:empty { display:none; }
.duel-link { color:#ddcdaa; text-underline-offset:4px; }
#online-status { min-height:20px; color:#d6c2a0!important; }
.online-fields { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.online-fields label { flex:1 1 120px; font-size:12px; text-align:left; }
.online-fields input,.online-fields select { display:block; width:100%; margin-top:6px; min-height:40px; background:#17201c; color:#e2e5df; border:1px solid #48574e; padding:7px; font:inherit; }
#online-panel .log-actions { flex-wrap:wrap; justify-content:flex-start; margin-top:14px; }
#online-rows { margin:18px 0; padding-left:28px; font:13px/1.8 Consolas,monospace; }
#online-rows li { padding:8px 4px; border-bottom:1px solid #29332e; overflow-wrap:anywhere; }
#video-panel { width:min(620px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; margin:auto; padding:22px; background:#0d1213; color:#e2e5df; border:1px solid #48514b; }
#video-panel::backdrop { background:#000d; }
#video-panel h2 { font-size:22px; margin:0; }
#video-panel p { font:12px/1.6 system-ui,sans-serif; color:#a6b5ac; }
#video-panel .secondary { padding:10px 16px; font-size:14px; min-height:42px; }
#video-progress { display:block; width:100%; margin:16px 0; accent-color:#9bc2b2; }
#video-preview { display:block; width:100%; max-height:45dvh; margin:14px 0; background:#000; }
#video-download { display:inline-block; color:#e4e7df; text-decoration:none; border:1px solid #718a7b; }