:root {
  --bg: #07090f; --panel: #10131d; --panel2: #171b28; --line: #2a3044; --text: #eef1f7; --muted: #8b93a8;
  --accent: #ffd23e; --accent2: #59c3ff; --red: #ff5d5d;
  --font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; }
#screen { position: fixed; inset: 0; display: block; image-rendering: pixelated; }
#ui { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 5; }
#ui[hidden] { display: none; }
#ui.dim { background: radial-gradient(ellipse at center, rgba(7,9,15,.62), rgba(7,9,15,.88)); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.screen { width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: auto; padding: 8px; scrollbar-width: thin; }
h2 { margin: 0; font-size: clamp(18px, 2.4vw, 28px); letter-spacing: 2px; font-weight: 900; text-shadow: 3px 3px 0 #000; text-align: center; }
h3 { margin: 6px 0 4px; font-size: 20px; letter-spacing: 1.5px; font-weight: 900; }

/* ---- Pixel panels / buttons ---- */
.mi { outline: none; position: relative; }
.menu-list { display: flex; flex-direction: column; gap: 8px; width: min(440px, 100%); }
.menu-list.row { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; }
.menu-list > .mi, .link-btn, .diff {
  display: block; text-align: left; padding: 13px 18px; background: var(--panel); color: var(--text); font-weight: 800; font-size: 15px; letter-spacing: 1.5px;
  box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #000; text-decoration: none; transition: transform .06s, background .06s;
}
.menu-list.row > .mi { text-align: center; min-width: 190px; }
.menu-list > .mi.focus, .link-btn.focus, .diff.focus, .menu-list > .mi:hover {
  background: var(--accent); color: #141008; box-shadow: inset 0 0 0 2px #fff3b0, 0 4px 0 #000; transform: translateX(4px);
}
.menu-list.row > .mi.focus { transform: translateY(-2px); }
.menu-list > .mi.focus::before { content: "▶"; position: absolute; left: -22px; color: var(--accent); text-shadow: 2px 2px 0 #000; }
.link-btn { color: var(--muted); }
.footer-hint { color: var(--muted); font-size: 12px; letter-spacing: 1px; text-align: center; }

/* ---- Title ---- */
.title-screen { justify-content: center; gap: 22px; text-align: center; }
.logo { text-align: center; }
.logo-main, .logo.small { font-size: clamp(40px, 8vw, 92px); font-weight: 900; letter-spacing: 4px; line-height: 1; color: var(--accent);
  text-shadow: 0 4px 0 #c47a12, 0 8px 0 #6b3a06, 6px 12px 0 #000; -webkit-text-stroke: 2px #2a1604; }
.logo.small { font-size: clamp(28px, 4.5vw, 52px); margin-bottom: 8px; }
.logo-sub { margin-top: 18px; font-size: clamp(12px, 1.6vw, 16px); letter-spacing: 6px; color: #fff; text-shadow: 2px 2px 0 #000; font-weight: 800; }
.press { font-size: clamp(14px, 2vw, 20px); font-weight: 900; letter-spacing: 3px; color: #fff; text-shadow: 3px 3px 0 #000; animation: blink 1.1s steps(2, start) infinite; margin-top: 30px; }
.title-hint { color: #c8cfdc; font-size: 12px; text-shadow: 2px 2px 0 #000; letter-spacing: 1px; }
.hidden-btn { position: absolute; width: 1px; height: 1px; opacity: 0; }
.load-errors { color: #ffb0a0; font-size: 12px; max-width: 700px; background: rgba(0,0,0,.6); padding: 8px 12px; }
@keyframes blink { to { visibility: hidden; } }

/* ---- Select ---- */
.select-screen { width: min(1180px, 100%); }
.sel-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; flex-wrap: wrap; }
.diff { font-size: 13px; padding: 10px 14px; }
.sel-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; width: 100%; min-height: 0; }
.sel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; align-content: start; }
.card { background: var(--panel); box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #000; padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .06s; }
.card canvas { width: 96px; height: 72px; image-rendering: pixelated; background: linear-gradient(#22283a, #151a27); }
.card.focus, .card:hover { box-shadow: inset 0 0 0 3px var(--accent), 0 4px 0 #000; transform: translateY(-3px); background: var(--panel2); }
.card-name { font-weight: 900; font-size: 13px; letter-spacing: 1px; text-align: center; }
.card-types { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.type { font-size: 10px; font-weight: 900; color: #101010; padding: 2px 5px; letter-spacing: .5px; text-shadow: none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.random .random-q, .random-big { font-size: 46px; font-weight: 900; color: var(--accent); height: 72px; display: grid; place-items: center; text-shadow: 3px 3px 0 #000; }
.random-big { height: 120px; font-size: 80px; }
.sel-detail { background: var(--panel); box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #000; padding: 12px; display: flex; flex-direction: column; gap: 5px; max-height: calc(100vh - 150px); overflow: auto; }
.detail-portrait { width: 140px; height: 100px; image-rendering: pixelated; align-self: center; background: radial-gradient(ellipse at 50% 70%, #2b3550, #141826 70%); }
.sel-detail h3 { text-align: center; }
.sel-detail .card-types { margin-bottom: 4px; }
.desc { color: #c3c9d6; font-size: 11.5px; line-height: 1.5; margin: 2px 0; }
.traits { font-size: 11px; color: #d6c6ff; text-align: center; }
.ability { background: #1d1a2c; box-shadow: inset 0 0 0 1px #3d3560; padding: 6px 8px; display: grid; gap: 3px; font-size: 11px; color: #c9c2e6; line-height: 1.45; }
.ability b { color: #ffd23e; font-size: 11px; letter-spacing: 1px; }
.stats { display: grid; gap: 3px; margin: 4px 0 6px; }
.stat { display: grid; grid-template-columns: 64px 1fr 30px; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); }
.stat b { color: #fff; text-align: right; }
.bar { height: 8px; background: #252b3b; box-shadow: inset 0 0 0 1px #000; }
.bar i { display: block; height: 100%; }
.moves { display: grid; gap: 6px; }
.move { background: var(--panel2); padding: 5px 8px; box-shadow: inset 0 0 0 1px var(--line); }
.move-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.move-top strong { font-size: 13px; }
.move-top .meta { margin-left: auto; color: var(--muted); font-size: 10px; }
.slot { font-size: 10px; color: #9aa4b8; min-width: 34px; }
.move-desc { color: #aab2c2; font-size: 11px; margin-top: 4px; line-height: 1.45; }
.move.bad { color: #ffb0a0; }

/* ---- Arena select ---- */
.arena-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; width: 100%; }
.arena-card { background: var(--panel); box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #000; padding: 10px; display: flex; flex-direction: column; gap: 6px; align-items: center; transition: transform .06s; }
.arena-card canvas { width: 100%; aspect-ratio: 16/9; height: auto; image-rendering: pixelated; }
.arena-card.focus, .arena-card:hover { box-shadow: inset 0 0 0 3px var(--accent), 0 4px 0 #000; transform: translateY(-3px); }
.arena-card.random .random-q { height: auto; aspect-ratio: 16/9; width: 100%; }
.arena-desc { font-size: 11px; color: var(--muted); text-align: center; }

/* ---- Join ---- */
.join-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(760px, 100%); }
.join-slot { background: var(--panel); box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #000; padding: 22px; min-height: 150px; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; text-align: center; }
.join-slot.ready.p1 { box-shadow: inset 0 0 0 3px #59c3ff, 0 4px 0 #000; }
.join-slot.ready.p2 { box-shadow: inset 0 0 0 3px #ff5d5d, 0 4px 0 #000; }
.join-label { font-weight: 900; font-size: 18px; letter-spacing: 2px; }
.join-dev { white-space: pre-line; color: var(--muted); font-size: 12px; line-height: 1.7; }
.ready .join-dev { color: #fff; font-weight: 800; }
.join-note { color: var(--muted); font-size: 12px; text-align: center; }
.join-screen > .mi, .info-screen > .mi { padding: 11px 26px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #000; font-weight: 800; letter-spacing: 1.5px; }
.join-screen > .mi.focus, .info-screen > .mi.focus { background: var(--accent); color: #141008; }

/* ---- Results ---- */
.winner-portrait { width: 200px; height: 150px; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 70%, #3b3220, transparent 70%); }
.res-table, .controls { border-collapse: collapse; background: var(--panel); box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #000; font-size: 13px; }
.res-table th, .res-table td, .controls th, .controls td { padding: 8px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.res-table th, .controls th { color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.res-table td:first-child { font-weight: 900; }

/* ---- Settings / info ---- */
.settings .setting { display: flex; justify-content: space-between; gap: 20px; }
.settings .setting b { color: inherit; }
.tips { max-width: 760px; color: #c8cfdc; font-size: 13px; line-height: 1.6; padding-left: 20px; margin: 0; }
.tips li { margin: 4px 0; }
.movelist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; width: 100%; }
.ml-col { display: grid; gap: 6px; align-content: start; }
.pause-screen h2 { font-size: 34px; color: var(--accent); }

#toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 10; background: #111827; color: #e8ecf5; padding: 10px 16px; font-size: 13px; box-shadow: inset 0 0 0 2px var(--accent2), 0 4px 0 #000; max-width: calc(100% - 32px); }
#toast[hidden] { display: none; }

@media (max-width: 860px) {
  .sel-body { grid-template-columns: 1fr; }
  .sel-detail { max-height: none; }
  .join-slots { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .press { animation: none; } * { transition: none !important; } }
.ability.super { background: #2a2312; box-shadow: inset 0 0 0 1px #6a5420; color: #f0e2b8; }
.mi.diff-main { color: #ffe14a; letter-spacing: 1px; }
.mi.assist-main { color: #7ff0ff; }

/* Reference title composition: turf, cast circle, layered gold/navy logo. */
.reference-title { width: min(1440px, 100%); padding: 0; gap: 10px; overflow: hidden; }
.title-stage { width: 100%; max-height: calc(100vh - 106px); aspect-ratio: 16/9; position: relative; isolation: isolate; overflow: hidden; border-radius: 6px; box-shadow: 0 12px 50px #0009; }
.title-field { position: absolute; width: 100%; height: 100%; inset: 0; image-rendering: pixelated; filter: saturate(.85) brightness(.92); }
.title-pokemon { position: absolute; width: calc(13% * var(--size)); height: calc(24% * var(--size)); transform: translate(-50%,-64%); image-rendering: pixelated; z-index: 1; }
.arena-logo { position: absolute; left: 50%; top: 48%; width: 59%; height: 43%; transform: translate(-50%,-50%); z-index: 2; filter: drop-shadow(0 7px 0 #0009); }
.title-pokeball { position: absolute; width: 49%; aspect-ratio: 1; left: 26%; top: -4%; background: linear-gradient(#f2443b 0 47%,#101b30 47% 54%,#eee8d5 54%); border: clamp(3px,.7vw,10px) solid #101b30; border-radius: 50%; box-shadow: 0 0 0 3px #d7af59,0 0 0 7px #111923,inset 0 0 0 3px #ffdf7890; }
.title-pokeball::after { content: ''; position: absolute; left: 50%; top: 50%; width: 23%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 6px solid #101b30; border-radius: 50%; background: #f4f1df; box-shadow: inset 0 0 0 3px #aaa99d; }
.pokemon-word, .arena-word { position: absolute; width: 100%; font-family: 'Arial Black',Impact,Arial,sans-serif; font-weight: 1000; text-align: center; line-height: 1; paint-order: stroke fill; color: #ffd21b; -webkit-text-stroke: clamp(4px,.8vw,12px) #102555; text-shadow: 0 4px 0 #e6a10a,0 8px 0 #a65305,0 12px 0 #06132c; }
.pokemon-word { top: 1%; font-size: clamp(35px,8.4vw,119px); font-style: italic; transform: rotate(-6deg); letter-spacing: -6px; }
.arena-word { top: 57%; font-size: clamp(50px,10.8vw,155px); letter-spacing: 2px; transform: scaleY(1.13); }
.title-start { font-weight: 900; font-size: clamp(12px,1.5vw,18px); letter-spacing: 3px; color: #ffdf69; padding: 8px 24px; text-shadow: 2px 2px #000; }
.title-start.focus, .title-start:hover { color: #fff; }
.title-start::before, .title-start::after { content: '—'; color: #8a9bb2; margin: 0 14px; }
.title-hint { font-size: 10px; opacity: .65; }
.sel-grid { grid-template-columns: repeat(auto-fill,minmax(99px,1fr)); gap: 7px; }
.card { padding: 5px 4px 7px; }
.card canvas { width: 78px; height: 58px; }
.card-name { font-size: 11px; letter-spacing: .5px; }
.card .type { font-size: 8px; padding: 2px 3px; }
@media(max-width:700px) {
  .pokemon-word { letter-spacing: -2px; font-size: 8.4vw; }
  .arena-word { font-size: 10.8vw; }
  .title-start { letter-spacing: 1px; }
  .title-start::before,.title-start::after { display: none; }
  .reference-title { gap: 5px; }
}
.loading-screen { font-weight:900; color:#ffe18a; font-size:17px; letter-spacing:2px; text-align:center; }
.art-credits { width:min(740px,100%); display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:8px 22px; max-height:50vh; overflow:auto; }

/* Expanded roster: keep both selection and the chosen fighter's details accessible. */
.select-screen .sel-grid { max-height:calc(100dvh - 190px); overflow:auto; padding:4px; scrollbar-width:thin; }
@media(max-width:700px) { .select-screen .sel-grid { max-height:46dvh; } }

.roster-count { color:var(--muted); font-size:11px; letter-spacing:1px; }
.new-badge { position:absolute; top:5px; right:5px; z-index:1; color:#172020; background:#c9df91; font-size:8px; font-weight:900; padding:2px 4px; box-shadow:0 1px 0 #172020; }

/* Four battle buttons, with species move choices before each match. */
.move-kit-screen{max-width:960px;width:min(96vw,960px);max-height:94vh;overflow:auto;padding:24px;}
.move-kit-screen h2{margin:0 0 10px;font-size:clamp(18px,2.4vw,28px);}
.kit-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0;}
.kit-slot{min-height:66px;padding:12px;font-size:14px;text-align:left;border:2px solid #445266;background:#172131;color:#d9e3ed;}
.kit-slot.selected{border-color:#e9c576;background:#283342;}
.kit-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.kit-choice{display:flex;align-items:flex-start;flex-direction:column;gap:7px;min-height:108px;text-align:left;padding:14px;position:relative;background:#111d2c;border:1px solid #465669;color:#e7eced;}
.kit-choice.equipped:after{content:'SLOT ' attr(data-equipped);position:absolute;right:8px;top:8px;font-size:10px;color:#e4c580;}
.kit-detail{min-height:85px;margin:16px 0;padding:14px;background:#101a26;line-height:1.6;color:#c3ced8;}
.kit-actions{display:flex;gap:10px;flex-wrap:wrap;}.kit-actions button{padding:12px 18px;}
@media(max-width:600px){.kit-slots,.kit-choices{grid-template-columns:repeat(2,minmax(0,1fr));}.move-kit-screen{padding:14px;}.kit-choice{min-height:95px;}}

/* Legendary encounters and trainer benches. */
.encounter-screen{max-width:1040px;width:min(96vw,1040px);max-height:94vh;overflow:auto;padding:24px;box-sizing:border-box}.encounter-screen h2{text-align:center;color:#e7d6a1}.boss-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.boss-card,.trainer-card,.bench-card{background:#172337;border:1px solid #536c7e;border-radius:10px;padding:14px;color:#e8eff0}.boss-card{min-height:260px;text-align:center}.boss-card h3{color:#f1d28a}.mode-portrait{image-rendering:pixelated;max-width:100%;height:auto}.trainer-options{display:grid;gap:10px}.trainer-card{text-align:left}.team-line{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}.team-member{display:flex;flex-direction:column;align-items:center;font-size:11px;min-width:80px}.team-review{text-align:center}.start-encounter{margin:14px auto;background:#385a52;color:white;padding:14px}.bench-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.bench-card{display:flex;flex-direction:column;align-items:center;gap:7px}.bench-card:disabled{opacity:.45}.bench-hp{height:5px;background:#35414f;width:90%;overflow:hidden}.bench-hp i{display:block;background:#a5d477;height:100%}.result-team{margin:15px 0}.fainted{opacity:.35}.encounter-screen .mi.focus{outline:3px solid #e9d28c;outline-offset:2px}.encounter-screen>.mi{margin-top:12px}@media(max-width:600px){.encounter-screen{padding:12px}.boss-options{grid-template-columns:1fr}.boss-card{min-height:160px}.bench-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-member{min-width:60px}.encounter-screen h2{font-size:20px}}

/* All screens stay inside the viewport. Only their content panes scroll. */
#ui{height:100dvh;padding:clamp(8px,2vh,16px)}
.screen{max-height:100%;min-height:0;overscroll-behavior:contain;scroll-padding:12px}
.screen>*{flex-shrink:0}
.mi.focus,.mi:focus-visible{outline:3px solid #ffe39a;outline-offset:3px;background-color:#30445a;color:#fff8df;z-index:2}
.mi:disabled{cursor:default;outline:none!important}
.menu-list>.mi{min-height:38px;padding:10px 16px}
.move-kit-screen{height:min(720px,calc(100dvh - 32px));max-height:100%;width:min(1080px,100%);padding:16px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;align-items:stretch;gap:10px;overflow:hidden;background:#0c1524f5;border:1px solid #42536d;border-radius:10px}
.kit-heading{display:grid;gap:7px}.kit-heading h2{font-size:clamp(17px,2vw,25px);margin:0}.kit-heading .desc{text-align:center;font-size:12px}.flow-step{font-size:10px;color:#91c8e0;text-align:center;letter-spacing:1px}
.kit-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:auto;min-height:0;padding:5px;align-content:start}
.kit-home-grid .kit-slot{display:grid;gap:7px;min-height:120px;padding:14px}.kit-slot strong{font-size:18px}.slot-button-label{font-size:11px;font-weight:bold;color:#e3c779}.kit-home-grid .type{justify-self:start}.kit-home-grid .desc{font-size:11px;line-height:1.4}
.kit-status{margin:0;padding:6px 10px;background:#152238;border-left:3px solid #8bcbb4;font-size:11px;color:#b7d8c9;min-height:28px}
.kit-actions{display:flex;justify-content:center;align-items:center;gap:10px;margin:0;padding:8px 0;background:#0c1524;flex-wrap:wrap}.kit-actions .mi{background:#24344b;padding:12px 16px;font-size:12px;font-weight:bold;border:1px solid #506680}.kit-actions .primary{background:#345b52;border-color:#93c6af}.kit-actions .focus{background:#5a7153}
.kit-edit-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,30%);gap:14px;min-height:0;overflow:hidden}.kit-choices{overflow:auto;min-height:0;align-content:start;padding:5px;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.kit-choice{min-height:92px;padding:12px;gap:5px}.kit-equipped{font-size:9px;color:#d5c18e}.kit-detail{overflow:auto;min-height:0;margin:0;padding:12px;line-height:1.5;border:1px solid #34465f}.kit-detail h3{font-size:17px}.move-instruction{font-size:12px;color:#f0da9f;line-height:1.6}
.encounter-screen{width:min(1080px,100%);max-height:100%;padding:12px}.boss-options,.bench-grid{width:100%}.boss-card{min-height:200px;padding:10px}.boss-card.focus,.bench-card.focus,.trainer-card.focus{background:#30445a}.boss-card .mode-portrait{width:90px;height:90px}.encounter-screen .mi{flex-shrink:0}
@media(max-height:650px){.screen{gap:9px}.kit-home-grid .kit-slot{min-height:96px;padding:10px}.kit-home-grid .desc{max-height:46px;overflow:hidden}.kit-heading .desc{font-size:11px}.move-kit-screen{padding:10px;gap:7px}.kit-slot strong{font-size:15px}.kit-actions .mi{padding:10px}.boss-card{min-height:160px}.boss-card .mode-portrait{width:66px;height:66px}}
@media(max-width:650px){.kit-edit-body{grid-template-columns:1fr}.kit-detail{display:none}.kit-home-grid .kit-slot{min-height:96px;padding:10px}.kit-home-grid .desc{max-height:44px;overflow:hidden}.kit-actions{gap:6px}.kit-actions .mi{font-size:10px;padding:10px}.boss-options{grid-template-columns:1fr}.select-screen .sel-body{grid-template-columns:minmax(0,1fr) minmax(150px,35%)}.sel-detail{padding:7px}.sel-detail .stats,.sel-detail .moves{display:none}.sel-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr))}}

/* Adventure progress and shared raid setup use the same controller focus system. */
.adventure-screen { max-width: 1000px; }
.campaign-hub { width: min(780px, 94vw); }
.badge-track { display: flex; gap: 12px; justify-content: center; margin: 12px 0 22px; }
.gym-badge { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 7px; border: 1px solid #364658; border-radius: 8px; padding: 14px 5px; background: #101a29; color: #8193a9; font-size: 11px; }
.gym-badge.earned { color: var(--badge-color); border-color: var(--badge-color); background: #182c35; }
.badge-symbol { font-size: 30px; }
.gym-badge small, .save-note { font-size: 10px; line-height: 1.6; }
.badge-award, .champion-crown { color: #ffe1a0; text-align: center; padding: 16px; font-size: 21px; }
.adventure-screen .menu-list { margin: 14px auto; }
@media(max-width: 600px) { .badge-track { gap: 5px; } .gym-badge { font-size: 8px; padding: 9px 3px; } }

/* Mode-specific presentation; shared menu focus and controller navigation are retained. */
.online-screen {max-width:900px;max-height:94vh;overflow:auto}.online-screen .boss-options{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.room-code{font:800 clamp(32px,7vw,68px) ui-monospace,monospace;letter-spacing:.22em;color:#b5f8d0;text-align:center;padding:12px}.room-code-input{font:700 32px ui-monospace,monospace;text-align:center;text-transform:uppercase;letter-spacing:.18em;background:#142639;border:2px solid #78bbae;color:#e8fff6;border-radius:8px;width:100%;padding:15px}.online-players{display:flex;gap:12px;margin:18px 0;flex-wrap:wrap}.online-player{flex:1;padding:18px;background:#142438;border:1px solid #567281;border-radius:8px;min-width:200px}.online-lobby{text-align:center}.online-status{position:fixed;top:7px;left:50%;transform:translateX(-50%);z-index:20;background:#0b1724df;color:#ceeedf;padding:6px 12px;border-radius:5px;font:700 11px ui-monospace,monospace;max-width:95vw;text-align:center;pointer-events:none}
.exploration-screen{max-width:930px;max-height:94vh;overflow:auto}.starter-grid{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:18px}.starter-grid>.mi,.collection-grid>.mi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;white-space:normal;text-align:center;padding:15px}.starter-grid .desc{font-size:13px}.collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin:16px 0}.collection-grid small{font-size:11px;color:#bcd0c7}.exploration-screen .menu-list>.mode-portrait{align-self:center}.journal-goal{padding:10px 14px;background:#18322c;border-left:3px solid #94bc87;font-size:14px;border-radius:3px}.exploration-screen .menu-list{max-width:740px;margin-left:auto;margin-right:auto}.exploration-screen .desc{line-height:1.55}.exploration-screen .menu-list>.mi{white-space:normal}.exploration-screen .mode-portrait{image-rendering:pixelated}@media(max-width:600px){.starter-grid{gap:6px;grid-template-columns:repeat(3,minmax(85px,1fr))}.starter-grid .mi{padding:8px;font-size:11px}.starter-grid canvas{max-width:80px;height:80px}.collection-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}.online-status{font-size:9px}}

.trainer-controls{position:fixed;left:14px;top:92px;z-index:8}.trainer-controls button{background:#132739ee;color:#dbf4ee;border:1px solid #7096a7;border-radius:8px;padding:10px 14px;font:bold 12px monospace;cursor:pointer}.trainer-controls button:disabled{color:#a8b1ba;cursor:default}.trainer-controls[hidden]{display:none}.online-lobby>.menu-list{margin:18px auto 0;max-width:520px}.online-players{gap:12px}.online-screen .join-note{max-width:900px}