/* ROTOVERNA – start page, retro screen, touch pad, shared overlays */
:root {
  --ink: #f4ead8; --dim: #b9a98f; --hot: #ff9a3c; --ice: #7fe3ff; --bg: #0b0705;
  --ui: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; font-family: var(--ui); }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
#app { position: fixed; inset: 0; }
.layer { position: absolute; inset: 0; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ start page */
#select { overflow-y: auto; touch-action: pan-y; display: flex; }
#select .bg {
  position: fixed; inset: 0; background: #0b0705 url(../assets/img/title_bg.jpg) center / cover no-repeat;
  filter: saturate(1.05);
}
#select .bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(11,7,5,0.15), rgba(11,7,5,0.82) 70%), linear-gradient(transparent 55%, rgba(11,7,5,0.9)); }
#select .inner { position: relative; margin: auto; width: min(980px, 100%); padding: 28px 18px 22px; text-align: center; }
#select .logo { margin: 0 auto 4px; font-size: clamp(42px, 9vw, 96px); letter-spacing: 0.08em; color: var(--hot); text-shadow: 0 0 24px rgba(255,140,40,0.6), 0 3px 0 #5a2600; font-weight: 900; line-height: 1; }
#select .logo img { width: min(720px, 92%); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,0.7)); }
#select .tagline { margin: 6px 0 10px; font-size: clamp(16px, 2.6vw, 24px); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ice); text-shadow: 0 0 12px rgba(80,200,255,0.5); }
#select .credit { margin: -4px 0 14px; font-size: 13px; letter-spacing: 0.2em; color: var(--hot); opacity: 0.9; text-shadow: 0 1px 3px #000; }
#select .league { display: inline-block; margin: -6px 0 14px; padding: 3px 12px; border-radius: 999px; font-size: 13px; letter-spacing: 0.06em; color: var(--ice); background: rgba(0,0,0,0.5); border: 1px solid rgba(120,210,255,0.35); }
#select .league:empty { display: none; }
#select .intro { max-width: 720px; margin: 0 auto 22px; color: var(--ink); opacity: 0.88; line-height: 1.5; font-size: 15px; text-shadow: 0 1px 2px #000; }
#select .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#select .card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 0 16px;
  border: 2px solid rgba(255,255,255,0.14); border-radius: 14px; background: rgba(10,8,8,0.72); cursor: pointer; overflow: hidden;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#select .card .shot { display: block; width: 100%; aspect-ratio: 16 / 9; background: #111 center / cover no-repeat; margin-bottom: 8px; }
#select .card.retro .shot { background-image: url(../assets/img/card_retro.png); image-rendering: pixelated; }
#select .card.modern .shot { background-image: url(../assets/img/card_modern.jpg); }
#select .card .name { font-size: 30px; font-weight: 900; letter-spacing: 0.12em; }
#select .card.retro .name { font-family: 'Courier New', monospace; color: #a9ff9f; }
#select .card.modern .name { color: var(--hot); }
#select .card .sub { font-size: 14px; color: var(--dim); }
#select .card .best { font-size: 12px; color: var(--dim); opacity: 0.8; }
#select .card.sel, #select .card:hover { transform: translateY(-3px); border-color: var(--hot); box-shadow: 0 0 28px rgba(255,140,40,0.35); }
#select .card.retro.sel, #select .card.retro:hover { border-color: #a9ff9f; box-shadow: 0 0 28px rgba(140,255,140,0.3); }
#select .keys { margin: 18px 0 6px; font-size: 13px; color: var(--dim); }
#select .filewarn { display: none; color: #ff8a6a; font-size: 14px; }
body.file #select .filewarn { display: block; }
#select .gpuwarn { display: none; max-width: 720px; margin: 10px auto 0; color: #ffb48a; font-size: 14px; line-height: 1.45; }
body.nogl #select .gpuwarn { display: block; }
body.nogl #select .card.modern { opacity: 0.55; filter: grayscale(0.6); }
#select footer { margin-top: 12px; font-size: 12px; color: var(--dim); opacity: 0.85; line-height: 1.5; }
/* language: a two-way switch in the top right corner, always in the same place */
#select .langswitch { position: absolute; top: 14px; right: 16px; z-index: 2; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25); }
#select .langswitch button { min-width: 42px; padding: 5px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; transition: background .15s, color .15s; }
#select .langswitch button:hover { color: var(--ink); }
#select .langswitch button.on { background: var(--hot); color: #1a0e04; cursor: default; }
@media (max-width: 640px) {
  #select .cards { grid-template-columns: 1fr; }
  #select .intro { font-size: 14px; }
  #select .keys { display: none; }
  #select .inner { padding-top: 54px; }
  #select .langswitch { top: 10px; right: 10px; }
}

/* ------------------------------------------------------------------ retro screen (384 × 272, scaled, pixels kept) */
#retro { background: #000; display: flex; align-items: center; justify-content: center; }
#retro .screen { position: relative; aspect-ratio: 384 / 272; width: min(100vw, calc(100vh * 384 / 272)); max-height: 100vh; }
#retro canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#retro.crt canvas { filter: contrast(1.08) saturate(1.12) blur(0.35px); }
#retro.crt .screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(100% / 272 * 0.55), rgba(0,0,0,0.28) calc(100% / 272 * 0.55), rgba(0,0,0,0.28) calc(100% / 272)),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(0,0,0,0.55) 100%);
  border-radius: 2.5% / 3.5%;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.6);
}
#retro.crt .screen { border-radius: 2.5% / 3.5%; overflow: hidden; }
body[data-mode="retro"] #pad { --pad-c: rgba(169,255,159,0.18); --pad-b: rgba(169,255,159,0.5); }

/* ------------------------------------------------------------------ touch pad */
#pad { position: fixed; inset: 0; pointer-events: none; z-index: 20; --pad-c: rgba(255,154,60,0.16); --pad-b: rgba(255,170,90,0.55); }
#pad button { pointer-events: auto; border: 2px solid var(--pad-b); background: var(--pad-c); border-radius: 50%; color: #fff; font-size: 24px; touch-action: none; display: flex; align-items: center; justify-content: center; }
#pad button.on { background: rgba(255,255,255,0.35); }
#pad .left { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; gap: 14px; }
#pad .right { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 70px 70px; grid-template-rows: 70px 70px; gap: 12px; }
#pad .left button { width: 76px; height: 76px; }
#pad .right button { width: 70px; height: 70px; }
#pad .b-up { grid-column: 2; grid-row: 1; }
#pad .b-fire { grid-column: 2; grid-row: 2; }
#pad .b-charge { grid-column: 1; grid-row: 2; }
#pad .top { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 10px; }
#pad .b-small { width: 44px; height: 44px; font-size: 16px; border-radius: 10px !important; }
@media (orientation: portrait) {
  #retro { align-items: flex-start; padding-top: max(8px, env(safe-area-inset-top)); }
}

/* ------------------------------------------------------------------ shared */
#toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -20px); padding: 8px 16px; border-radius: 8px; background: rgba(0,0,0,0.78); color: #fff; font-size: 15px; opacity: 0; transition: all 0.2s; pointer-events: none; z-index: 40; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 30; }