/* UNBIUNIUM — ink, bone and steel. One theme for every screen: the loading screen's fonts (Yuji Boku brush
   kanji, Shippori Mincho Japanese, wide-spaced Rajdhani English), bone-white highlights and vermilion ink. */
:root {
  --bg: #050507;
  --panel: rgba(9, 9, 11, 0.86);
  --panel-2: rgba(24, 24, 26, 0.72);
  --line: rgba(236, 230, 218, 0.12);
  --line-2: rgba(236, 230, 218, 0.28);
  --text: #ece6da;
  --muted: #8f8a82;
  --dim: #6f6a62;
  --accent: #e6e0d4;     /* bone */
  --ink: #b02a20;        /* vermilion seal ink */
  --ink-2: #d8402f;
  --strip: linear-gradient(90deg, rgba(230,226,216,.2) 0%, rgba(230,226,216,.08) 60%, rgba(230,226,216,0) 100%);
  --blue: #7fb4dd;
  --red: #e2574b;
  --good: #a8d39a;
  --jp: 'Shippori Mincho', 'Yu Mincho', serif;
  --brush: 'Yuji Boku', 'Shippori Mincho', serif;
  --mono: 'Share Tech Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: 'Rajdhani', 'Segoe UI', sans-serif; font-size: 16px; user-select: none; }
#game, #game canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: rgba(236,230,218,.18); } ::-webkit-scrollbar-track { background: transparent; }

/* Japanese + English label pair used in headings and buttons. */
.jp { font-family: var(--jp); font-weight: 700; }
.en { letter-spacing: .2em; }

/* ---------- buttons ---------- */
button { font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: #c9c3b8; background: rgba(12,12,14,.55); border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  border-radius: 0; padding: 10px 18px; cursor: pointer; transition: color .15s, background .15s, border-color .15s;
  display: inline-flex; align-items: baseline; gap: 12px; }
button .jp { font-size: .82em; letter-spacing: .25em; color: var(--dim); transition: color .15s; }
button:hover:not(:disabled) { color: #fff; border-left-color: var(--accent); background: var(--strip); }
button:hover:not(:disabled) .jp { color: var(--ink-2); }
button:disabled { opacity: .35; cursor: default; }
button.primary { color: #fff; border-color: var(--line-2); border-left-color: var(--accent); background: var(--strip); }
button.primary .jp { color: var(--ink-2); }
button.primary:hover:not(:disabled) { background: linear-gradient(90deg, rgba(230,226,216,.32), rgba(230,226,216,.1) 70%, rgba(230,226,216,.02)); }
button.tiny { font-size: 11px; padding: 3px 9px; margin-left: 8px; vertical-align: middle; letter-spacing: .14em; border-left-width: 1px; }
button.big-btn { width: 100%; padding: 15px; font-size: 20px; margin-top: 16px; justify-content: center; letter-spacing: .3em; }
button.big-btn .jp { font-size: 1.15em; }
button.back { font-size: 12px; padding: 6px 12px; letter-spacing: .18em; }

input, select { font-family: inherit; font-size: 16px; color: var(--text); background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line); border-bottom-color: var(--line-2); border-radius: 0; padding: 7px 9px; }
select option { background: #121214; }
input:focus, select:focus { outline: none; border-color: var(--accent); }
input[type=range] { padding: 0; accent-color: var(--ink-2); }
input[type=checkbox] { accent-color: var(--ink-2); }
label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 13px; letter-spacing: .12em; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: #c9c3b8; }

.screen { position: fixed; inset: 0; z-index: 10; display: none; }
.screen.show { display: flex; }

/* ---------- loading screen ---------- */
#backdrop { position: fixed; inset: 0; z-index: 9; background: #050507; overflow: hidden; display: none; }
#backdrop.show { display: block; }
#loading { background: transparent; z-index: 50; overflow: hidden; }
#load-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s ease;
  filter: saturate(0.55) contrast(1.08) brightness(0.95); }
#load-bg.show { opacity: 1; }
.load-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(4,4,6,.92) 0%, rgba(4,4,6,.7) 22%, rgba(4,4,6,.15) 48%, rgba(4,4,6,0) 62%),
    linear-gradient(0deg, rgba(4,4,6,.85) 0%, rgba(4,4,6,0) 28%),
    radial-gradient(ellipse at 62% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%); }
.load-grain { position: absolute; inset: -50%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-3%,2%) } 50% { transform: translate(2%,-3%) } 75% { transform: translate(-2%,-1%) } 100% { transform: translate(1%,3%) } }

.load-title { position: absolute; left: 6vw; top: 7vh; display: flex; align-items: flex-start; gap: 14px; pointer-events: none; }
.load-title .kanji { writing-mode: vertical-rl; font-family: 'Yuji Boku', 'Shippori Mincho', serif; font-size: clamp(90px, 15vh, 170px);
  line-height: 1; color: #ece8e0; letter-spacing: .02em;
  text-shadow: 0 0 2px rgba(255,255,255,.25), 0 6px 30px rgba(0,0,0,.9), 2px 2px 0 rgba(140,20,14,.35);
  animation: inkIn 1.8s ease-out both; }
.load-title .seal { margin-top: 12px; display: flex; gap: 4px; padding: 8px 6px; border: 1px solid rgba(236,232,224,.55);
  background: rgba(10,10,12,.35); animation: inkIn 2.4s ease-out both; }
.load-title .seal span { writing-mode: vertical-rl; font-family: 'Shippori Mincho', serif; color: #d8d2c6; }
.load-title .seal-a { font-size: 15px; letter-spacing: .25em; font-weight: 700; }
.load-title .seal-b { font-size: 11px; letter-spacing: .3em; color: #b02a20 !important; font-weight: 800; }
@keyframes inkIn { from { opacity: 0; filter: blur(8px); transform: translateY(-8px); } to { opacity: 1; filter: blur(0); transform: none; } }

.load-en { position: absolute; left: 6vw; top: calc(7vh + clamp(200px, 32vh, 360px)); font-size: 15px; letter-spacing: .5em;
  color: #e8e2d6; font-weight: 600; text-shadow: 0 2px 10px #000; }
.load-en span { color: #8d8a84; }

.load-status { position: absolute; left: 0; bottom: 17vh; width: min(520px, 92vw); padding: 12px 22px 14px 6vw;
  background: linear-gradient(90deg, rgba(230,226,216,.16) 0%, rgba(230,226,216,.08) 60%, rgba(230,226,216,0) 100%);
  border-left: 3px solid #e6e0d4; }
.load-row { display: flex; justify-content: space-between; align-items: baseline; }
.load-jp { font-family: 'Shippori Mincho', serif; font-weight: 700; font-size: 22px; color: #f1ece2; letter-spacing: .18em; }
.load-pct { font-family: 'Share Tech Mono', monospace; color: #c9c3b8; font-size: 15px; }
#load-text { margin-top: 2px; color: #a19c93; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; }
#loading .bar { width: 100%; height: 2px; background: rgba(255,255,255,.12); margin-top: 10px; }
#load-bar { height: 100%; width: 0; background: linear-gradient(90deg, #8f1d16, #e6e0d4); box-shadow: 0 0 10px rgba(230,224,212,.6); transition: width .25s; }

.load-tip { position: absolute; left: 6vw; bottom: calc(17vh - 46px); max-width: min(520px, 88vw); display: flex; gap: 12px; align-items: center;
  color: #8f8a82; font-size: 14px; letter-spacing: .06em; }
.load-tip .tip-k { font-family: 'Shippori Mincho', serif; color: #b02a20; font-weight: 800; border: 1px solid rgba(176,42,32,.6); padding: 1px 6px; flex: none; }

.load-keys { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 28px; padding: 12px 6vw; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.08); background: rgba(4,4,6,.55); color: #8a857d; font-size: 12px; letter-spacing: .14em; }
.load-keys kbd { font-family: 'Share Tech Mono', monospace; background: #d8d2c6; color: #111; padding: 1px 6px; margin-right: 6px; border-radius: 2px; font-size: 11px; }

@media (max-width: 640px) {
  .load-title { left: 16px; top: 4vh; }
  .load-en { left: 16px; font-size: 12px; letter-spacing: .3em; }
  .load-status { padding-left: 16px; bottom: 20vh; }
  .load-tip { left: 16px; }
  .load-keys { gap: 12px 18px; padding: 10px 16px; }
}

/* ---------- panels ---------- */
.panel-screen, .center-screen { align-items: center; justify-content: center; padding: 16px; }
.panel-screen { background: linear-gradient(90deg, rgba(4,4,6,.6), rgba(4,4,6,.25) 60%, rgba(4,4,6,.45)); padding-bottom: 54px; }
.center-screen { background: radial-gradient(ellipse at center, rgba(4,4,6,.45) 0%, rgba(4,4,6,.82) 100%); }
/* Huge faint brush kanji behind each screen. */
.screen[data-kanji]::before { content: attr(data-kanji); position: absolute; left: 2.5vw; top: 4vh; writing-mode: vertical-rl;
  font-family: var(--brush); font-size: clamp(90px, 20vh, 220px); line-height: 1; color: rgba(236,230,218,.07); pointer-events: none; }
@media (max-width: 1360px) { .screen[data-kanji]::before { display: none; } }
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 22px 26px; width: 560px; max-width: 100%; max-height: 88vh; overflow-y: auto;
  backdrop-filter: blur(8px); box-shadow: 0 30px 80px rgba(0,0,0,.65); animation: panelIn .35s ease-out both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel.wide { width: 1100px; }
.panel.narrow { width: 460px; text-align: center; border-left-width: 1px; border-top: 3px solid var(--accent); }
.panel.narrow .menu-buttons { width: 100%; margin-top: 18px; }
.panel.narrow .menu-buttons button { justify-content: center; }
.panel.narrow .objectives { display: inline-block; text-align: left; margin: 4px auto 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.menu-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 36px; width: 300px; max-width: 80vw; }
.menu-buttons button { text-align: left; padding: 12px 18px; font-size: 17px; }

h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--text);
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.panel.narrow h2 { justify-content: center; }
h2 .jp { font-family: var(--brush); font-weight: 400; font-size: 1.9em; letter-spacing: .06em; color: #f1ece2;
  text-shadow: 0 4px 18px rgba(0,0,0,.8), 2px 2px 0 rgba(140,20,14,.35); }
h2 .en { color: #c9c3b8; }
h3 { margin: 6px 0 10px; font-size: 16px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text); }
h3 .jp { color: var(--ink-2); margin-right: 8px; letter-spacing: .15em; }
h4 { margin: 18px 0 10px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); font-weight: 600;
  display: flex; align-items: baseline; gap: 10px; }
h4 .jp { color: var(--text); font-size: 15px; letter-spacing: .25em; }
h4::after { content: ''; flex: 1; height: 1px; background: var(--line); align-self: center; }
.kicker { font-family: var(--jp); font-weight: 700; color: var(--ink-2); letter-spacing: .3em; font-size: 13px; margin-bottom: 8px; }
.big-kanji { font-family: var(--brush); font-size: 84px; line-height: 1.05; color: #f1ece2; text-shadow: 0 6px 30px rgba(0,0,0,.9), 3px 3px 0 rgba(140,20,14,.4); animation: inkIn 1.2s ease-out both; }
.big-kanji.win { color: #f1ece2; } .big-kanji.lose { color: var(--ink-2); }
.brief { color: #bdb7ab; line-height: 1.55; font-size: 16px; letter-spacing: .02em; }
.hint { color: var(--muted); font-size: 13px; letter-spacing: .06em; }
.status { padding: 9px 14px; background: var(--strip); border-left: 3px solid var(--accent); margin-bottom: 14px; font-size: 14px; letter-spacing: .06em; }

.split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .teams { grid-template-columns: 1fr !important; } }
.form-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; }
.form-col { display: flex; flex-direction: column; gap: 12px; }

/* ---------- campaign ---------- */
.mission-list { display: flex; flex-direction: column; gap: 2px; }
.mission { padding: 10px 14px; background: transparent; border-left: 3px solid transparent; cursor: pointer; transition: background .15s; }
.mission:hover { background: rgba(230,226,216,.06); }
.mission.sel { border-left-color: var(--accent); background: var(--strip); }
.mission.locked { opacity: .4; cursor: not-allowed; }
.mission .num { color: var(--muted); font-family: var(--mono); margin-right: 10px; }
.mission b { letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.mission .mjp { font-family: var(--jp); font-weight: 700; color: var(--ink-2); margin-left: 10px; letter-spacing: .15em; font-size: 14px; }
.mission .stars { float: right; color: var(--accent); letter-spacing: 3px; }
.mission .mdesc { color: var(--muted); font-size: 13px; margin-top: 2px; }
#mission-title { font-size: 20px; }
.objectives { padding-left: 0; list-style: none; color: #cfc9be; }
.objectives li { margin: 5px 0; padding-left: 22px; position: relative; }
.objectives li::before { content: '◆'; position: absolute; left: 2px; color: var(--ink-2); font-size: 10px; top: 4px; }

/* ---------- aircraft & world cards ---------- */
.plane-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.plane-grid.small { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.plane-card { position: relative; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid transparent;
  padding: 10px 12px 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.plane-card:hover { border-left-color: var(--line-2); background: rgba(236,230,218,.06); }
.plane-card.sel { border-left-color: var(--accent); background: var(--strip); border-color: var(--line-2); }
.plane-card.disabled { opacity: .3; pointer-events: none; }
.plane-card .pkanji { position: absolute; right: 6px; top: 2px; font-family: var(--brush); font-size: 46px; line-height: 1; color: rgba(236,230,218,.12);
  pointer-events: none; transition: color .15s; }
.plane-card.sel .pkanji { color: rgba(216,64,47,.55); }
.plane-grid.small .plane-card .pkanji { font-size: 34px; }
.plane-card .pname { position: relative; font-weight: 600; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.plane-card .prole { position: relative; color: var(--muted); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.plane-card .pnum { color: var(--dim); font-family: var(--mono); letter-spacing: 0; margin-right: 8px; }
.plane-card .pdesc { position: relative; color: var(--muted); font-size: 13px; margin: 6px 0; line-height: 1.35; }
.stat { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin: 3px 0; letter-spacing: .12em; text-transform: uppercase; }
.stat .sbar { height: 2px; background: rgba(255,255,255,.1); }
.stat .sbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ink), var(--accent)); }
.plane-grid.small .pdesc, .plane-grid.small .stat { display: none; }

.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.world-card { position: relative; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid transparent; padding: 0 0 12px; cursor: pointer; overflow: hidden; transition: background .15s; }
.world-card:hover { background: rgba(236,230,218,.06); border-left-color: var(--line-2); }
.world-card.sel { border-left-color: var(--accent); border-color: var(--line-2); background: var(--strip); }
.world-card .wswatch { height: 30px; margin-bottom: 10px; filter: saturate(.6) brightness(.85); }
.world-card .wtag { color: var(--muted); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; padding: 0 12px; }
.world-card .wjp { font-family: var(--jp); font-weight: 700; color: var(--ink-2); letter-spacing: .2em; font-size: 13px; margin-left: 6px; text-transform: none; }
.world-card .wname { font-weight: 600; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; padding: 0 12px; }
.world-card .wdesc { color: var(--muted); font-size: 13px; line-height: 1.35; padding: 4px 12px 0; }
.mission-meta { color: var(--muted); font-size: 13px; letter-spacing: .1em; margin: -4px 0 8px; }
.mission-meta b { color: var(--text); }
.form-row.tight { margin: 0; }
.form-row.tight label { flex: 1; }
.form-row.checks { gap: 22px; }
h4 .hint { font-size: 11px; color: var(--ink-2); letter-spacing: .16em; text-transform: uppercase; font-family: var(--jp); font-weight: 700; }

/* ---------- multiplayer ---------- */
.room-list { display: flex; flex-direction: column; gap: 4px; min-height: 120px; max-height: 300px; overflow-y: auto; margin-bottom: 8px; }
.room { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--panel-2); border-left: 3px solid var(--line-2); }
.room .rmeta { color: var(--muted); font-size: 13px; }
.room-empty { color: var(--muted); padding: 20px; text-align: center; border: 1px dashed var(--line); letter-spacing: .1em; }
.code-chip { font-size: 12px; background: rgba(0,0,0,.4); border: 1px solid var(--ink); padding: 3px 9px; margin-left: 10px; vertical-align: middle; letter-spacing: .2em; color: var(--muted); }
.code-chip b { color: var(--ink-2); font-family: var(--mono); font-size: 18px; }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.team { background: var(--panel-2); border: 1px solid var(--line); padding: 8px 12px; min-height: 120px; }
.team0 { border-left: 3px solid var(--blue); } .team1 { border-left: 3px solid var(--red); }
.team0 h3, .team0 h3 .jp { color: var(--blue); } .team1 h3, .team1 h3 .jp { color: var(--red); }
.team ul { list-style: none; padding: 0; margin: 0; }
.team li { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; justify-content: space-between; }
.team li .ready { color: var(--good); font-size: 12px; letter-spacing: .15em; }
.team li .host { color: var(--ink-2); font-size: 11px; margin-left: 6px; letter-spacing: .15em; }
.team li .lplane { color: var(--muted); font-size: 13px; }
.lobby-bottom { display: grid; grid-template-columns: 1fr 240px; gap: 14px; margin-top: 14px; }
.lobby-actions { display: flex; flex-direction: column; gap: 8px; }
.chat { display: flex; flex-direction: column; gap: 6px; }
.chat-log { height: 120px; overflow-y: auto; background: rgba(0,0,0,.4); border: 1px solid var(--line); padding: 6px 8px; font-size: 14px; }
.chat-log .cn0 { color: var(--blue); } .chat-log .cn1 { color: var(--red); } .chat-log .sys { color: var(--muted); font-style: italic; }

/* ---------- controls & settings ---------- */
table.controls { width: 100%; border-collapse: collapse; }
table.controls td { padding: 7px 8px; border-bottom: 1px solid var(--line); color: #cfc9be; }
table.controls td:first-child { color: var(--text); font-family: var(--mono); white-space: nowrap; width: 40%; }
.settings-panel { width: 980px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs .tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 16px; font-size: 14px; color: var(--muted); }
.tabs .tab:hover:not(:disabled) { background: none; color: #fff; }
.tabs .tab.sel { color: #fff; border-bottom-color: var(--ink-2); background: none; }
.settings-body { min-height: 380px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; }
@media (max-width: 820px) { .settings-grid { grid-template-columns: 1fr; } }
.setting { display: flex; flex-direction: column; gap: 5px; }
.setting .slabel { display: flex; justify-content: space-between; gap: 10px; color: var(--text); font-size: 14px; letter-spacing: .1em; }
.setting .slabel .val { color: var(--ink-2); font-family: var(--mono); font-size: 14px; white-space: nowrap; letter-spacing: 0; }
.setting .sdesc { color: var(--muted); font-size: 12px; line-height: 1.35; letter-spacing: .02em; }
.setting.check-row { flex-direction: row; align-items: flex-start; gap: 10px; }
.setting.check-row input { margin-top: 3px; width: 16px; height: 16px; }
.setting select, .setting input[type=range] { width: 100%; }
.hw-info { grid-column: 1 / -1; padding: 9px 14px; background: var(--strip); border-left: 3px solid var(--accent); font-size: 13px; color: #c9c3b8; letter-spacing: .04em; }
.hw-info b { color: var(--text); }
table.binds { width: 100%; border-collapse: collapse; }
table.binds th { text-align: left; color: var(--muted); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 4px 8px; }
table.binds td { padding: 3px 8px; border-bottom: 1px solid rgba(255,255,255,.05); }
table.binds td:first-child { color: var(--text); letter-spacing: .06em; }
button.bind { width: 100%; min-width: 130px; padding: 6px 10px; font-size: 14px; font-family: var(--mono); text-transform: none; letter-spacing: .02em; border-left-width: 1px; justify-content: center; }
button.bind.empty { color: var(--dim); }
button.bind.listening { border-color: var(--ink-2); color: var(--ink-2); animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 2px rgba(216,64,47,.35); } }
.binds-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- results ---------- */
.result-stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; text-align: left; margin: 14px auto; max-width: 300px; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; color: var(--muted); }
.result-stats span:nth-child(even) { color: var(--text); text-align: right; font-family: var(--mono); letter-spacing: 0; font-size: 16px; }
#result-title { letter-spacing: .4em; }
#result-title.win { color: var(--text); } #result-title.lose { color: var(--ink-2); }

/* ---------- in-game overlays ---------- */
#scoreboard { position: fixed; z-index: 8; left: 50%; top: 12%; transform: translateX(-50%); width: 760px; max-width: 94vw;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 16px 20px; display: none; backdrop-filter: blur(6px); }
#scoreboard.show { display: block; }
#scoreboard table { width: 100%; border-collapse: collapse; font-size: 15px; }
#scoreboard th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 4px; }
#scoreboard td { padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.05); font-family: var(--mono); }
#scoreboard td:first-child { font-family: inherit; letter-spacing: .06em; }
#scoreboard .t0 { color: var(--blue); } #scoreboard .t1 { color: var(--red); } #scoreboard .me { background: var(--strip); }
#scoreboard .sb-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 22px; font-weight: 600; letter-spacing: .2em; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
#scoreboard .sb-head .jp { font-family: var(--brush); font-weight: 400; font-size: 30px; color: var(--text); letter-spacing: .05em; }

#chat-input { position: fixed; z-index: 9; left: 20px; bottom: 210px; width: 380px; display: none; border-left: 3px solid var(--accent); }
#chat-input.show { display: block; }
#click-to-play { position: fixed; z-index: 9; left: 50%; top: 60%; transform: translateX(-50%); padding: 8px 18px;
  background: rgba(6,6,8,.75); border-left: 3px solid var(--accent); color: var(--text); letter-spacing: .2em; display: none; pointer-events: none; }
#click-to-play .jp { color: var(--ink-2); margin-right: 8px; letter-spacing: .15em; }
#click-to-play.show { display: block; }
#toast { position: fixed; z-index: 60; left: 50%; bottom: 60px; transform: translateX(-50%); background: rgba(6,6,8,.9);
  border: 1px solid var(--line); border-left: 3px solid var(--ink-2); color: var(--text); padding: 11px 20px; font-size: 15px;
  letter-spacing: .06em; transition: opacity .3s; max-width: 90vw; text-align: left; pointer-events: none; }
#toast .jp { color: var(--ink-2); margin-right: 10px; letter-spacing: .15em; }

/* Key hint bar on the menu screens (shares the loading screen's bar style). */
#menu-keys { position: fixed; z-index: 11; display: none; }
#menu-keys.show { display: flex; }
#menu-keys .mk-brand { margin-left: auto; font-family: var(--jp); font-weight: 700; color: var(--dim); letter-spacing: .3em; }

#fps { position: fixed; z-index: 30; right: 10px; bottom: 6px; font-family: 'Share Tech Mono', monospace; font-size: 13px; color: #7dff8a;
  background: rgba(0,0,0,.45); padding: 2px 7px; display: none; pointer-events: none; }
#fps.show { display: block; }

/* ---------- main menu: loading-screen look ---------- */
#screen-main.jp-menu { background: transparent; }
.jp-list { position: absolute; left: 0; top: calc(7vh + clamp(232px, 36vh, 400px)); display: flex; flex-direction: column; width: min(460px, 92vw); }
.jp-list button { display: flex; align-items: baseline; gap: 16px; text-align: left; background: none; border: none; border-left: 3px solid transparent;
  border-radius: 0; padding: clamp(6px, 1.1vh, 10px) 22px clamp(6px, 1.1vh, 10px) calc(6vw - 3px); font-size: clamp(16px, 2.4vh, 20px);
  letter-spacing: .22em; color: #b9b3a8; text-shadow: 0 2px 8px #000; box-shadow: none; transition: color .15s, background .15s; }
.jp-list button .jp { font-family: 'Shippori Mincho', serif; font-size: .7em; letter-spacing: .3em; color: #6f6a62; font-weight: 700; }
.jp-list button:hover:not(:disabled), .jp-list button.sel { color: #fff; box-shadow: none; border-color: #e6e0d4;
  background: linear-gradient(90deg, rgba(230,226,216,.2) 0%, rgba(230,226,216,.08) 60%, rgba(230,226,216,0) 100%); }
.jp-list button.sel .jp, .jp-list button:hover .jp { color: #b02a20; }
#screen-main .pilot-tag { position: absolute; left: 6vw; bottom: 62px; margin: 0; color: #8a857d; font-size: 13px; letter-spacing: .2em; }
#screen-main .pilot-tag b { color: #e6e0d4; margin-left: 8px; }
@media (max-width: 640px) { .jp-list button { padding-left: 13px; } #screen-main .pilot-tag { left: 16px; } }

/* ---------- touch controls (js/touch.js) ---------- */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
#touch { position: fixed; inset: 0; z-index: 6; display: none; pointer-events: none; font-family: 'Rajdhani', sans-serif;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px); }
#touch.show { display: block; }
#touch > * { pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#touch .t-aim { position: absolute; inset: 0; }
#touch.dead .t-weapons, #touch.dead .t-moves, #touch.dead .t-throttle, #touch.dead .t-stickzone { display: none; }

#touch .t-btn { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: #ece6da; background: rgba(8,8,10,.42); border: 1px solid rgba(236,230,218,.35); border-radius: 999px;
  font-size: 11px; letter-spacing: .14em; line-height: 1; transition: background .08s, transform .08s; }
#touch .t-btn b { font-weight: 700; }
#touch .t-btn i { font-style: normal; font-family: var(--jp); font-weight: 700; font-size: 9px; letter-spacing: .2em; color: #8f8a82; }
#touch .t-btn.down { background: rgba(236,230,218,.32); transform: scale(.94); }
#touch .t-btn.on { border-color: #d8402f; background: rgba(176,42,32,.35); }
#touch .t-btn.empty { opacity: .35; }
#touch .t-btn.hide { display: none; }

/* weapons, bottom right */
#touch .t-weapons { position: absolute; right: 0; bottom: 0; width: 0; height: 0; }
#touch .t-weapons .t-btn { width: 58px; height: 58px; }
#touch .t-fire { right: calc(18px + var(--sr)); bottom: calc(18px + var(--sb)); width: 88px !important; height: 88px !important;
  font-size: 14px; border: 2px solid rgba(216,64,47,.85); background: rgba(176,42,32,.28); }
#touch .t-fire.down { background: rgba(216,64,47,.55); }
#touch .t-rocket { right: calc(116px + var(--sr)); bottom: calc(14px + var(--sb)); }
#touch .t-bomb { right: calc(32px + var(--sr)); bottom: calc(116px + var(--sb)); }
#touch .t-boost { right: calc(108px + var(--sr)); bottom: calc(88px + var(--sb)); width: 54px !important; height: 54px !important; }
#touch .t-brake { right: calc(180px + var(--sr)); bottom: calc(66px + var(--sb)); width: 50px !important; height: 50px !important; }

/* manoeuvres, bottom centre */
#touch .t-moves { position: absolute; left: 50%; bottom: calc(8px + var(--sb)); transform: translateX(-50%); display: flex; gap: 6px; }
#touch .t-moves .t-btn, #touch .t-top .t-btn { position: relative; height: 40px; min-width: 50px; padding: 0 8px; border-radius: 3px; font-size: 10px; }

/* top bar, top right */
#touch .t-top { position: absolute; right: calc(10px + var(--sr)); top: calc(8px + var(--st)); display: flex; gap: 6px; }
#touch .t-pause { min-width: 44px !important; font-size: 13px !important; }

/* floating stick, bottom left */
#touch .t-stickzone { position: absolute; left: calc(64px + var(--sl)); bottom: 0; width: calc(42% - 64px); height: 62%; }
#touch .t-base { position: absolute; left: 22px; bottom: calc(18px + var(--sb)); width: 116px; height: 116px; border-radius: 50%;
  border: 1px solid rgba(236,230,218,.3); background: radial-gradient(circle, rgba(8,8,10,.15) 0%, rgba(8,8,10,.4) 100%); opacity: .55; }
#touch .t-base.active { opacity: 1; }
#touch .t-knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: rgba(236,230,218,.28); border: 1px solid rgba(236,230,218,.75); }

/* throttle, far left */
#touch .t-throttle { position: absolute; left: calc(12px + var(--sl)); bottom: calc(18px + var(--sb)); width: 46px; height: min(150px, 34vh);
  display: flex; flex-direction: column; align-items: center; gap: 4px; }
#touch .t-track { position: relative; flex: 1; width: 100%; background: rgba(8,8,10,.42); border: 1px solid rgba(236,230,218,.35); border-radius: 3px; }
#touch .t-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(236,230,218,.08), rgba(236,230,218,.3)); }
#touch .t-thumb { position: absolute; left: -4px; right: -4px; height: 10px; margin-bottom: -5px; background: #ece6da; border-radius: 2px; box-shadow: 0 0 8px rgba(0,0,0,.6); }
#touch .t-ab { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #d8402f; }
#touch .t-track.lift .t-ab { display: none; }
#touch .t-track.lift::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(236,230,218,.5); }
#touch .t-thr-label { display: flex; flex-direction: column; align-items: center; font-size: 10px; letter-spacing: .14em; color: #ece6da; }
#touch .t-thr-label i { font-style: normal; font-family: var(--jp); font-size: 9px; color: #8f8a82; }

/* portrait phones: ask for landscape */
#rotate { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #050507; color: #ece6da; text-align: center; letter-spacing: .2em; }
#rotate .rot-icon { font-size: 54px; animation: rot 2.4s ease-in-out infinite; }
#rotate b { display: block; font-size: 18px; text-transform: uppercase; }
#rotate span { display: block; margin-top: 6px; font-family: var(--jp); font-size: 12px; color: #8f8a82; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (max-width: 600px) { body.touch #rotate { display: flex; } }

/* touch devices: no keyboard hints, cheaper menu effects */
body.touch .load-keys, body.touch #menu-keys, body.touch #click-to-play { display: none !important; }
body.touch .load-grain { animation: none; }
body.touch .panel { backdrop-filter: none; }
body.touch .panel, body.touch .settings-body, body.touch .room-list { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
@media (hover: none) {
  button:hover:not(:disabled) { color: #c9c3b8; border-left-color: var(--line-2); background: rgba(12,12,14,.55); }
  button.primary:hover:not(:disabled) { color: #fff; border-left-color: var(--accent); background: var(--strip); }
}

/* short landscape screens (phones): compact menus */
@media (max-height: 520px) {
  .load-title { top: 3vh; }
  .load-title .kanji { font-size: clamp(56px, 17vh, 90px); }
  .load-title .seal-a { font-size: 12px; } .load-title .seal-b { font-size: 9px; }
  .load-en { top: calc(3vh + clamp(118px, 36vh, 190px)); font-size: 12px; letter-spacing: .3em; }
  .load-status { bottom: 14vh; }
  .load-tip { bottom: calc(14vh - 40px); font-size: 12px; }
  #screen-main .load-title { left: auto; right: 5vw; }
  #screen-main .load-en { left: auto; right: 5vw; top: auto; bottom: 18px; }
  .jp-list { top: 50%; transform: translateY(-50%); width: min(380px, 56vw); }
  .jp-list button { padding-top: 6px !important; padding-bottom: 6px !important; font-size: 17px !important; }
  #screen-main .pilot-tag { bottom: 16px; left: 6vw; }
  .panel-screen { padding: 8px; padding-bottom: 8px; }
  .center-screen { padding: 8px; }
  .panel { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 14px 16px; }
  .panel-head { margin-bottom: 8px; padding-bottom: 8px; }
  .panel-head h2 { font-size: 18px; }
  button.big-btn { padding: 11px; font-size: 17px; margin-top: 10px; }
  .panel.narrow h2 .jp, .big-kanji { font-size: 1.3em; }
  .panel.narrow .menu-buttons { margin-top: 8px; gap: 6px; }
  .menu-buttons button { padding-top: 7px; padding-bottom: 7px; }
}