/* Shared presentation for singles, online, doubles, co-op and adventures. */
:root{--pixel:ui-monospace,"Cascadia Mono","Courier New",monospace;--gold:#ffd44a;--line:#59406d;--muted:#c1accb;--arena-panel:#171020;--arena-surface:#100b1a}
body{background:radial-gradient(ellipse at 50% 0,#30132f,#0b0811 65rem);color:#f7f2ff;font-family:Inter,"Segoe UI",Arial,sans-serif}
.app,body>main{width:100%;max-width:1520px;margin-inline:auto;padding:14px}
.topbar{min-height:64px;height:auto;gap:14px;padding:12px 16px;border:1px solid var(--line);background:linear-gradient(#1c152b,#100c1b);flex-wrap:wrap}
.topbar .brand{color:#f7f2ff;font:900 18px/1.3 var(--pixel);letter-spacing:.06em}
.topbar .brand small{color:#ff8090;font:700 12px/1.4 var(--pixel)}
button,select,.button{border-radius:2px}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #67e4ed;outline-offset:3px}
#lobby:not([hidden]){grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr)}
#lobby:not([hidden]) .lobby-main{padding:28px;border-right:1px solid var(--line);background:radial-gradient(ellipse at 5% 15%,#36132f99,transparent 55%),var(--arena-surface)}
#lobby:not([hidden]) .lobby-side,#lobby:not([hidden]) .sidebar{padding:20px;gap:16px;background:var(--arena-surface)}
#lobby h1{font:900 clamp(28px,3.4vw,49px)/1.2 var(--pixel);margin:18px 0 14px;letter-spacing:0}
#lobby .lobby-lead,#lobby .intro{font-size:16px;line-height:1.5;margin:12px 0 24px;color:#cdbed9}
#lobby .setup-card,.card{border:1px solid var(--line);background:var(--arena-panel);padding:16px}
#lobby .tamer-select,#lobby .tamers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
#lobby:not([hidden]) .tamer-card,#lobby:not([hidden]) .tamer{height:auto;min-height:210px;padding:10px;display:flex;flex-direction:column;text-align:center;align-items:center;background:linear-gradient(#24172f,#100b18);border:1px solid var(--line)}
#lobby:not([hidden]) .tamer-card img,#lobby:not([hidden]) .tamer img{width:100%;height:160px;max-height:none;flex:none;object-fit:contain}
#lobby .tamer-card b,#lobby .tamer b{font:800 14px/1.3 var(--pixel);margin-top:8px}
#lobby .tamer-card small,#lobby .tamer small{font-size:12px;line-height:1.4}
#lobby .tamer-card.selected,#lobby .tamer.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:linear-gradient(135deg,#61253f,#241329)}
#lobby .roster-select,#lobby .roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
#lobby .roster-card{display:flex;flex-direction:column;align-items:stretch;min-height:230px;padding:30px 12px 14px;background:linear-gradient(#271b33,#120d1c);border-radius:2px}
#lobby .roster-card img{width:100%;height:130px;object-fit:contain;margin-bottom:10px}
#lobby .roster-card b{font:800 14px/1.4 var(--pixel);overflow-wrap:anywhere}
#lobby .mode-tab,#lobby .tabs button,#lobby .lobby-modes button{min-height:44px;padding:10px 12px;font:800 12px/1.4 var(--pixel)}
#lobby .mode-tabs,#lobby .lobby-modes{flex-wrap:wrap}
#lobby .enter-battle,#lobby .primary{min-height:48px;border:2px solid var(--gold);background:linear-gradient(110deg,#932a4b,#651e3e);font:800 14px/1.5 var(--pixel)}
/* Original storm-and-island promotion, fitted without clipping its artwork. */
#lobby .island-banner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);padding:0;gap:0;background:#0b0816;box-shadow:inset 0 0 50px #48205d66}
#lobby .island-banner>div{padding:clamp(20px,3vw,40px);z-index:1}
#lobby .island-banner .island-art{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;filter:none;grid-row:auto}
#lobby .island-banner h2{margin:10px 0;font:900 clamp(25px,3vw,42px)/1.15 var(--pixel)}
/* Both battle engines share a stable arena and a flowing command console. */
body:has(#gameShell:not([hidden])),body:has(#battle:not([hidden])){height:auto;min-height:100svh;overflow:auto}
.app:has(#gameShell:not([hidden])),.app:has(#battle:not([hidden])){display:block;height:auto;min-height:100svh;overflow:visible;max-width:1520px;padding:14px}
.app:has(#gameShell:not([hidden]))>.topbar,.app:has(#battle:not([hidden]))>.topbar{height:auto;min-height:64px;margin-bottom:14px}
#gameShell.game-shell,#battle.battle-layout{display:grid;height:auto;overflow:visible;grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:14px}
#gameShell .battle-card,#battle .battle-card{display:flex;flex-direction:column;height:auto;min-height:0;min-width:0;overflow:hidden;border:1px solid var(--line)}
#gameShell .arena,#battle .arena{container-type:inline-size;aspect-ratio:3/2;width:100%;height:auto;min-height:0;flex:none}
#gameShell .controls,#gameShell .controls.moves-open,#battle .controls{height:auto;min-height:0;max-height:none;overflow:visible;display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--arena-panel)}
#gameShell .main-actions,#gameShell .move-grid,#battle .move-choices{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#gameShell .side-actions{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;padding:0}
#gameShell .move,#battle .move-choice{min-height:100px;padding:12px!important;border:1px solid #6a4b70;background:linear-gradient(#2a1a34,#1b1225);border-radius:2px}
#gameShell .move b,#battle .move-choice b{font:800 14px/1.4 var(--pixel)}
#gameShell .move small,#battle .move-description{font-size:14px;line-height:1.4}
#gameShell .tamer-dialogue,#battle .dialogue{height:auto;min-height:76px;padding:10px;gap:12px;background:linear-gradient(110deg,#322037,#171020);border:1px solid #896541;border-left:4px solid var(--gold)}
#gameShell .tamer-dialogue p,#battle .dialogue p{height:auto;max-height:none;font-size:14px;line-height:1.5}
#gameShell .sidebar,#battle .feed-card{height:min(700px,85svh);max-height:none;position:sticky;top:14px;border:1px solid var(--line);background:#120d1a}
.summary,.moju-summary{border:1px solid var(--gold);background:#120e1b;color:#f7f2ff;max-height:90dvh}
.summary-head,.summary-footer{background:#25172f;padding:16px 20px;border-color:var(--line)}
.summary-body{gap:24px;padding:20px}.summary-move{border:1px solid var(--line);padding:14px;margin-bottom:10px;background:#21162b}
.summary-move p{font-size:14px;line-height:1.5}.summary-head h2{font-family:var(--pixel)}
body>main>nav{padding:16px;border:1px solid var(--line);background:#1c152b}body>main h1,body>main h2{font-family:var(--pixel)}
@media(max-width:1100px){#lobby:not([hidden]),#gameShell.game-shell,#battle.battle-layout{grid-template-columns:minmax(0,1fr)}#lobby:not([hidden]) .lobby-main{border-right:0}#gameShell .sidebar,#battle .feed-card{position:static;height:260px}}
@media(max-width:600px){.app,body>main{padding:8px}#lobby:not([hidden]) .lobby-main,#lobby:not([hidden]) .lobby-side,#lobby:not([hidden]) .sidebar{padding:16px}#lobby .island-banner{grid-template-columns:1fr}#lobby .island-banner .island-art{grid-row:1}#lobby .tamer-select,#lobby .tamers{grid-template-columns:repeat(2,minmax(0,1fr))}#lobby .roster-select,#lobby .roster{grid-template-columns:repeat(2,minmax(0,1fr))}#gameShell .move-grid,#battle .move-choices{grid-template-columns:1fr}.summary-body{grid-template-columns:1fr;padding:14px}.summary-head,.summary-footer{flex-wrap:wrap}.topbar .brand{font-size:14px}}

/* Readable tamer nicknames across both lobby layouts. */
#lobby:not([hidden]) :is(.tamer-card,.tamer) small{display:block!important;font:600 1rem/1.4 Arial,sans-serif!important;color:#eee0f5;margin:6px 0 4px;white-space:normal;overflow-wrap:normal}
#lobby:not([hidden]) :is(.tamer-card,.tamer){height:auto!important;min-height:210px;padding-bottom:12px}