/* A narrow bezel keeps the original field ratio without a cabinet-sized footprint. */
body { background:#0a0d10; }
.arcade-phone-note { display:none; }
@media(pointer:coarse) { .arcade-phone-note { display:block;margin:12px 0 0;color:var(--dim);font:14px/1.5 var(--ui); } }
#app {
  --field-width:min(calc(100vw - 32px),calc((100dvh - 80px) * 1.5384615385));
  padding:30px 16px 50px; box-sizing:border-box;
}
#field { --case-bottom:6px; overflow:visible; font-family:var(--ui); }
#app #field::before {
  content:""; position:absolute; inset:-6px; z-index:0; pointer-events:none;
  border:1px solid #434b4e; border-radius:5px;
  background:linear-gradient(135deg,#32393c,#111719 28%,#242c2f 75%,#41484a);
  box-shadow:inset 0 1px #939b9b33,0 2px 8px #0008;
  mix-blend-mode:normal; opacity:1;
}
#canvas { position:relative; z-index:1; }
#app #field::after {
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:repeating-linear-gradient(0deg,#0000 0 3px,#00000010 3px 4px);
  box-shadow:inset 0 0 0 1px #11191c; animation:none;
  width:auto; height:auto; opacity:1; mix-blend-mode:normal;
}
body[data-state="paused"] #canvas,body[data-state="replay"] #canvas { filter:none; }
.osd,#replay-bar > span:first-child { text-shadow:none; }
.arcade-sign { position:absolute; top:-25px; left:0; right:0; height:16px; z-index:4; display:flex; align-items:center; justify-content:center; }
.arcade-sign strong { font:500 11px/1 var(--num); letter-spacing:.2em; text-transform:uppercase; color:#8a9392; white-space:nowrap; }
.arcade-series { display:none; }
/* Quiet text tools stay outside the playfield. */
#app #field > nav.arcade-tools {
  position:absolute; top:calc(100% + var(--case-bottom) + 6px); bottom:auto; left:0; right:0; height:32px; z-index:4;
  display:flex; justify-content:flex-end; align-items:center; gap:24px; visibility:visible;
}
#app #field > nav.arcade-tools .link { font:13px/1.4 var(--ui); min-height:30px; padding:5px 0; color:#a4adab; }
#app #field > nav.arcade-tools .link:hover { color:var(--ink); }
body[data-state="playing"] #app #field > nav.arcade-tools #pause,
body[data-state="paused"] #app #field > nav.arcade-tools #pause { display:inline-block; }
body[data-state="replay"] #app #field > nav.arcade-tools { display:none; }
body[data-input="touch"] #app #field > nav.arcade-tools { gap:20px; }
body[data-input="touch"] #app #field > nav.arcade-tools .link { font-size:12px; }

/* Keep TKKN's title, subtitle, primary arrow, language row and lower-right navigation. */
#intro .title-wordmark { width:43cqi; }
#intro .credit { display:none; }
body[data-input="touch"] #intro .line { display:none; }
#intro .hangar-nav { gap:1.7em; }
#open-log,#open-online,#result-log,#result-online,#flight-log,#online-panel,
.damage-figure,.result-news,#result-extras,#result-progress,#result-excitement,
#rank-name,#touch-panel { display:none !important; }
.atmosphere-settings label:has(#background-choice),.atmosphere-settings label:has(#diagnostics-choice) { display:none; }
.aircraft-menu { position:absolute; left:56%; top:28%; width:34%; }
.aircraft-menu h2 { margin:14px 0 24px; font:500 max(20px,2.7cqi)/1.2 var(--ui); }
.aircraft-menu .primary b { font-weight:400; }
.arcade-utilities { display:grid; gap:18px; padding-top:20px; border-top:1px solid #30393e; }
.arcade-languages:empty { display:none; }
.arcade-files,.arcade-exits { display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px; }
.arcade-utilities a,.arcade-utilities button { color:#9ba9ae; text-decoration:none; font:13px/1.4 var(--ui); }
.arcade-utilities a:hover,.arcade-utilities button:hover { color:#eee9dc; }
#sound-panel > p,.atmosphere-settings > small,.arcade-files #fullscreen { display:none; }
.arcade-audition { color:#9ba9ae; font:13px/1.5 var(--ui); }
.arcade-audition summary { cursor:pointer; }
.arcade-audition .sound-actions { margin-top:14px; }
#sound-panel,#sound-panel :is(button,input,select,textarea,h2) { font-family:var(--ui); }
/* Touch layouts retain the original field geometry and relative-drag controls. */
body[data-input="touch"] .arcade-fullscreen { display:none; }
body[data-input="touch"] #overlay.full { position:absolute; inset:0; padding:0; background:transparent; z-index:2; }
body[data-input="touch"] #intro .anchor { left:6%; bottom:24%; max-width:88%; }
body[data-input="touch"] #intro .top { left:6%; top:6%; right:auto; }
body[data-input="touch"] #intro .hangar-nav { left:6%; right:6%; bottom:7%; gap:1.4em; }
body[data-input="touch"] #intro .line { margin-top:10px; font-size:12px; }
body[data-input="touch"] #intro .primary { margin-top:10px; padding:4px 0; font-size:20px; line-height:1.2; }
body[data-input="touch"] #intro .primary span { display:none; }
body[data-input="touch"] #intro .title-wordmark { width:65cqi; }
body[data-input="touch"] .thumb-pad { border:1px solid #27333b; border-radius:4px; background:#10171b; }
body[data-input="touch"] .pad-guide strong { font:12px/1.4 var(--ui); }
body[data-input="touch"] .pad-guide > span { display:none; }
@media (orientation:portrait) {
  body[data-input="touch"] #app {
    --field-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding:calc(30px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
    grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto minmax(110px,160px);
    align-content:center; column-gap:10px; row-gap:48px;
  }
  body[data-input="touch"] #field { grid-column:1/-1; grid-row:1; align-self:start; }
  body[data-input="touch"] #touch-pad-left { grid-column:1; grid-row:2; margin:0; }
  body[data-input="touch"] #touch-pad { grid-column:2; grid-row:2; margin:0; }
  body[data-input="touch"] #aircraft-panel .top { top:6%; right:6%; }
  body[data-input="touch"] .aircraft-menu { top:16%; left:48%; width:46%; }
  body[data-input="touch"] .aircraft-menu h2 { font-size:16px; margin:6px 0 8px; }
  body[data-input="touch"] .aircraft-menu .eyebrow { font-size:10px; }
  body[data-input="touch"] .aircraft-menu .pick button { font-size:12px; line-height:1.25; padding:6px 0; }
  body[data-input="touch"] .aircraft-menu .primary { margin-top:8px; padding:3px 0; font-size:18px; line-height:1.2; }
  body[data-input="touch"] .aircraft-menu .primary span { display:none; }
}
@media (orientation:landscape) {
  body[data-input="touch"] #app {
    --field-width:min(calc(100vw - 160px),calc((100dvh - 72px) * 1.5384615385));
    padding:30px 12px 42px; grid-template-columns:minmax(44px,1fr) var(--field-width) minmax(44px,1fr); grid-template-rows:1fr; column-gap:14px;
  }
  body[data-input="touch"] #field { grid-column:2; grid-row:1; }
  body[data-input="touch"] #touch-pad-left { grid-column:1; grid-row:1; }
  body[data-input="touch"] #touch-pad { grid-column:3; grid-row:1; }
  body[data-input="touch"] .aircraft-menu { top:17%; left:48%; width:46%; }
  body[data-input="touch"] .aircraft-menu h2 { font-size:14px; margin:6px 0 8px; }
  body[data-input="touch"] .aircraft-menu .eyebrow { font-size:10px; }
  body[data-input="touch"] .aircraft-menu .pick button { font-size:12px; padding:5px 0; line-height:1.25; }
  body[data-input="touch"] .aircraft-menu .primary { font-size:17px; line-height:1.2; padding:3px 0; margin-top:6px; }
  body[data-input="touch"] .aircraft-menu .primary span { display:none; }
  body[data-input="touch"] #overlay:not(.full) #intro .anchor { bottom:22%; max-width:88%; }
  body[data-input="touch"] #overlay:not(.full) #intro .title-wordmark { width:65cqi; }
  body[data-input="touch"] #overlay:not(.full) #intro .primary { font-size:18px; line-height:1.2; padding:4px 0; }
  body[data-input="touch"] #overlay:not(.full) #intro .hangar-nav { left:6%; right:6%; bottom:4%; max-width:none; justify-content:flex-start; gap:16px; }
}

/* Results and pause reuse TKKN's original type, left margin and arrow actions. */
@container (max-width:600px) {
  /* Narrow desktop windows need the same vertical menu room as phones. */
  body[data-input="keyboard"] #overlay:has(#result:not([hidden])) {
    position:fixed; inset:0; padding:0; z-index:8; background:#000;
  }
  body[data-input="keyboard"] #result .anchor { left:6vw; bottom:96px; max-width:88vw; }
  body[data-input="keyboard"] #result .result-time { font-size:clamp(40px,12vh,72px); }
  body[data-input="keyboard"] #result .foot { left:6vw; right:6vw; bottom:28px; flex-wrap:wrap; gap:12px 24px; }
  #intro .anchor { bottom:27%; max-width:88%; }
  #intro .title-wordmark { width:65cqi; }
  #intro .primary { font-size:18px; line-height:1.2; padding:4px 0; margin-top:10px; }
  #intro .hangar-nav { left:6%; right:6%; bottom:5%; justify-content:flex-start; gap:16px; }
  #aircraft-panel .aircraft-menu { top:16%; left:48%; width:46%; }
  #aircraft-panel .aircraft-menu .eyebrow { font-size:10px; line-height:1.2; }
  #aircraft-panel .aircraft-menu h2 { font-size:14px; line-height:1.2; margin:6px 0 8px; }
  #aircraft-panel .pick button { font-size:12px; line-height:1.25; padding:5px 0; }
  #aircraft-panel .primary { font-size:17px; line-height:1.2; padding:3px 0; margin-top:6px; }
}

/* Native pause: flat arrow action and the original OSD, without the boxed arcade override. */
body[data-input="touch"][data-state="paused"] #overlay,
body[data-input="touch"][data-state="dead"] #overlay {
  position:fixed; inset:0; padding:0; z-index:8; background:#000;
}
body[data-input="touch"][data-state="paused"] #app #field > nav.arcade-tools {
  position:fixed; top:calc(16px + env(safe-area-inset-top)); right:calc(16px + env(safe-area-inset-right));
  left:auto; bottom:auto; width:auto; height:32px; z-index:9;
}

/* Give the native entry its own space when a portrait field cannot hold the menu. */
@media (orientation:portrait) and (max-width:700px) {
  body[data-state="idle"] #overlay:has(#intro:not([hidden])) { position:fixed; inset:0; padding:0; z-index:8; background:#000; }
  body[data-state="idle"] #intro .anchor { left:6vw; bottom:27dvh; max-width:88vw; }
  body[data-state="idle"] #intro .title-wordmark { width:min(76vw,480px); }
  body[data-state="idle"] #intro .hangar-nav { left:6vw; right:6vw; bottom:8dvh; gap:8px 16px; max-width:none; justify-content:flex-start; }
}

#intro #duel-entry {font-size:24px;margin-top:12px;min-height:44px;gap:18px}
#intro #duel-entry b {font-weight:400}
body[data-input="touch"] #intro #duel-entry {font-size:20px;margin-top:6px;min-height:44px}

.phone-title-ship {display:none}
@media (orientation:portrait) and (max-width:700px) {
  body[data-state="idle"] #intro .phone-title-ship {display:block;position:absolute;top:13dvh;left:50%;transform:translateX(-50%);width:min(70vw,300px);height:auto;opacity:.88}
  body[data-state="idle"] #intro .anchor {top:43dvh;bottom:auto}
  body[data-input="touch"] #app {--field-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));padding:calc(46px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);grid-template-rows:auto minmax(0,1fr);align-content:stretch;row-gap:48px;column-gap:0}
  body[data-input="touch"] .thumb-pad {border:0;border-radius:0;background:linear-gradient(#10171b66,#0a0d1000 65%);min-height:0;transition:background-color .18s ease-out}
  body[data-input="touch"] .thumb-pad[data-active="true"] {background-color:#18222855}
  body[data-input="touch"] .pad-guide {display:none}
  body[data-input="touch"] #touch-pad-left,body[data-input="touch"] #touch-pad {margin:0;width:100%}
  body[data-input="touch"][data-state="replay"] #replay-bar {position:fixed;top:calc(46px + env(safe-area-inset-top) + (100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) * .65 + 28px);left:16px;right:16px;display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 0;background:#000;z-index:8}
  body[data-input="touch"] #replay-bar .link {min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;padding:0 8px}
  body[data-input="touch"] #replay-bar > span:first-child {font-size:13px;letter-spacing:0;flex:1}
  body[data-input="touch"] #replay-progress {order:5;flex:0 0 100%;height:44px;background:transparent}
  body[data-input="touch"] #replay-progress::-webkit-progress-bar {background:linear-gradient(transparent 21px,var(--hair) 21px 23px,transparent 23px)}
  body[data-input="touch"] #replay-progress::-webkit-progress-value {background:linear-gradient(transparent 21px,var(--dim) 21px 23px,transparent 23px)}
}

@media (orientation:portrait) and (max-width:700px) {
 body[data-input="touch"][data-state="replay"] .thumb-pad {visibility:hidden}
}

/* Portrait menus keep readable controls clear of the full-width flight field. */
@media (orientation:portrait) and (max-width:700px) {
  body[data-input="touch"] #app { row-gap:64px; }
  body[data-input="touch"] #app #field > nav.arcade-tools {
    left:16px; right:16px; height:44px; gap:20px;
  }
  body[data-input="touch"] #app #field > nav.arcade-tools .link {
    min-width:44px; min-height:44px; font-size:14px;
  }
  body[data-input="touch"][data-state="paused"] #app #field > nav.arcade-tools { left:auto; }
  body[data-input="touch"] #intro .top { right:6%; gap:16px; }
  body[data-input="touch"] #intro .top .link,
  body[data-input="touch"] #intro .hangar-nav .link { min-width:44px; min-height:44px; display:inline-flex; align-items:center; }
  body[data-input="touch"] #intro #hangar-settings { display:inline-flex; }
  body[data-input="touch"] #aircraft-panel .aircraft-menu { top:18%; }
  body[data-input="touch"] #aircraft-panel .eyebrow,
  body[data-input="touch"] #aircraft-panel .pick small { display:none; }
  body[data-input="touch"] #aircraft-panel .aircraft-menu h2 { font-size:16px; margin:0 0 8px; }
  body[data-input="touch"] #aircraft-panel .pick button { font-size:16px; min-height:44px; padding:8px 0; }
  body[data-input="touch"] #aircraft-panel :is(#aircraft-back,#aircraft-launch) { min-height:44px; }
  body[data-input="touch"] #result .anchor { bottom:calc(156px + env(safe-area-inset-bottom)); }
  body[data-input="touch"] #result .foot {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px;
    bottom:calc(24px + env(safe-area-inset-bottom));
  }
  body[data-input="touch"] #result .foot .link { min-height:44px; font-size:14px; text-align:left; }
  body[data-input="touch"] #sound-panel { width:100%; border-left:0; padding:24px; }
  body[data-input="touch"] #sound-panel :is(button,select) { min-width:44px; min-height:44px; }
  body[data-input="touch"] #sound-panel .link:not(.arcade-fullscreen):not(#fullscreen),
  body[data-input="touch"] .arcade-utilities a { min-height:44px; display:inline-flex; align-items:center; }
  body[data-input="touch"] #sound-panel summary { min-height:44px; line-height:44px; }
}

/* Portrait touch targets retain the original flat text actions. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:700px) {
  body[data-input="touch"] #intro #start { min-width:88px;min-height:44px;padding:8px 0; }
  body[data-input="touch"] #intro .top .link,
  body[data-input="touch"] #intro .hangar-nav .link { font-size:14px; }
  body[data-input="touch"] #intro .hangar-nav { row-gap:6px;column-gap:18px; }
  body[data-input="touch"] #aircraft-back { min-width:44px; }
  body[data-input="touch"] #sound-panel .arcade-utilities a { font-size:14px; }
  body[data-input="touch"] #music-volume { height:44px;min-height:44px;padding:0; }
  body[data-input="touch"] #music-volume::-webkit-slider-thumb { width:22px;height:22px; }
  body[data-input="touch"] #music-volume::-moz-range-thumb { width:22px;height:22px; }
}

@media (pointer:coarse) and (orientation:portrait) and (max-width:700px) {
  body[data-input="touch"] #intro .hangar-nav { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px;bottom:32px; }
}