/* Beastbound — page chrome around the 240x176 canvas: a handheld-style
   console, the Game Boy pad, the title card and the chat panel. */
:root {
  --bg: #1a1c2c;
  --shell: #5a5fa8;
  --shell-d: #3c3f7c;
  --shell-l: #7c82c8;
  --bezel: #2c2f44;
  --ink: #f0f0f8;
  --muted: #a8acc8;
  --accent: #f8d038;
  --red: #d83830;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; }

/* web/style.css pins .volume-slider position:fixed top:12px — undo it here so
   any slider inside our panels stays where it is mounted. */
.volume-slider { position: static !important; top: auto !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ── top bar ── */
#topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  padding-top: max(6px, env(safe-area-inset-top)); background: #111322; border-bottom: 2px solid #000;
  min-height: 42px; z-index: 5; }
#topbar .back-link { color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; }
#topbar .back-link:hover { color: var(--ink); }
.brand { font-weight: 900; letter-spacing: 2px; color: var(--accent); font-size: 15px; text-shadow: 2px 2px 0 #000; }
.top-spacer { flex: 1; }
.where { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.top-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px;
  padding: 0 8px; border-radius: 8px; border: 2px solid #000; background: #2c2f48; color: var(--ink);
  cursor: pointer; font-size: 15px; list-style: none; }
.top-btn:hover { background: #3c4064; }
.top-btn.on, #fsBtn.on { background: var(--shell); }
.top-gear { position: relative; }
.top-gear > summary::-webkit-details-marker { display: none; }
/* site_audio.css pins #hudAudio fixed, bottom:12px, left:50% + translateX(-50%): restate ALL of it */
.top-gear #hudAudio { position: absolute; right: 0; top: 40px; left: auto; bottom: auto; transform: none; z-index: 30; background: #1e2034;
  border: 2px solid #000; border-radius: 10px; padding: 8px; min-width: 250px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#fsBtn { font-size: 13px; }
/* phones: the ♪ button sits right of centre, so a panel anchored to it ran off
   the right edge and took the skip-track button with it. Pin it to the viewport
   with a definite width; the shared strip shrinks its sliders to fit. */
@media (max-width: 520px) {
  .top-gear #hudAudio { position: fixed; left: 8px; right: 8px; top: 46px; min-width: 0; }
  .top-gear #hudAudio .mps-audio { width: 100%; box-sizing: border-box; }
}

/* ── console ── */
#console { flex: 1 1 auto; min-height: 0; display: grid; place-content: center; gap: 10px 18px;
  padding: 10px; grid-template-areas: "screen"; }
#screenWrap { grid-area: screen; justify-self: center; align-self: center; padding: 12px 14px 18px; border-radius: 12px 12px 36px 12px;
  background: var(--bezel); box-shadow: 0 0 0 3px #000, inset 0 0 0 2px #444862, 0 10px 30px rgba(0,0,0,.5); position: relative; }
#screenWrap::after { content: "BEASTBOUND COLOR"; position: absolute; left: 14px; bottom: 3px; font-size: 9px;
  letter-spacing: 2px; color: #8890b8; font-weight: 800; font-style: italic; }
#screen { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #000;
  box-shadow: 0 0 0 2px #000; touch-action: none; }

/* the pad's parts join the console grid directly */
#pad { display: contents; }
.pad-dpad, .pad-ab, .pad-mid { display: none; }
body.pad-on .pad-dpad, body.pad-on .pad-ab, body.pad-on .pad-mid { display: flex; }

body.pad-on.portrait #console { grid-template-areas: "screen screen" "dpad ab" "mid mid";
  grid-template-columns: 1fr 1fr; align-content: start; padding: 10px 4px; gap: 14px 10px; }
body.pad-on.portrait #screenWrap { padding: 6px 6px 16px; border-radius: 10px 10px 28px 10px; }
body.pad-on.portrait #screenWrap::after { left: 8px; bottom: 2px; font-size: 8px; }
/* main.js layout(): keep the console clear of the title card on wide screens */
body.title-side #console { padding-right: 370px; }
body.pad-on.landscape #console { grid-template-areas: "dpad screen ab" "dpad mid ab";
  grid-template-columns: auto auto auto; }

.pad-dpad { grid-area: dpad; position: relative; width: 132px; height: 132px; justify-self: center; align-self: center;
  touch-action: none; user-select: none; }
.pad-cross { position: absolute; inset: 0; }
.pad-cross::before, .pad-cross::after { content: ""; position: absolute; background: #24263a;
  border-radius: 8px; box-shadow: 0 4px 0 #000, inset 0 2px 0 #3c3f5c; }
.pad-cross::before { left: 44px; top: 4px; width: 44px; height: 124px; }
.pad-cross::after { left: 4px; top: 44px; width: 124px; height: 44px; }
.pad-arrow { position: absolute; color: #6c7090; font-size: 15px; pointer-events: none; z-index: 2; }
.pad-arrow.up { left: 59px; top: 12px; } .pad-arrow.down { left: 59px; bottom: 12px; }
.pad-arrow.left { left: 13px; top: 56px; } .pad-arrow.right { right: 13px; top: 56px; }
.pad-dpad[data-dir="up"] .pad-arrow.up, .pad-dpad[data-dir="down"] .pad-arrow.down,
.pad-dpad[data-dir="left"] .pad-arrow.left, .pad-dpad[data-dir="right"] .pad-arrow.right { color: var(--accent); }

.pad-ab { grid-area: ab; gap: 14px; align-items: center; justify-content: center; justify-self: center; align-self: center;
  transform: rotate(-22deg); user-select: none; }
.pad-btn { width: 62px; height: 62px; border-radius: 50%; border: 0; background: #b8285c; color: #f8d0e0;
  font-weight: 900; font-size: 18px; box-shadow: 0 5px 0 #5c0c2c, inset 0 3px 0 #e05888; touch-action: none; cursor: pointer; }
.pad-btn.pad-a { margin-top: -26px; }
.pad-btn.on { transform: translateY(4px); box-shadow: 0 1px 0 #5c0c2c, inset 0 3px 0 #e05888; }

.pad-mid { grid-area: mid; gap: 18px; justify-content: center; align-items: center; user-select: none; }
.pad-pill { padding: 6px 14px; border-radius: 14px; border: 0; background: #3c3f58; color: var(--muted);
  font-size: 11px; font-weight: 800; letter-spacing: 1px; transform: rotate(-22deg);
  box-shadow: 0 3px 0 #000; touch-action: none; cursor: pointer; }
.pad-pill.on { transform: rotate(-22deg) translateY(2px); box-shadow: 0 1px 0 #000; }

/* ── chat ── */
#chatPanel { position: fixed; right: 10px; top: 54px; width: 300px; max-height: calc(100% - 70px); z-index: 20;
  display: flex; flex-direction: column; background: #1e2034f2; border: 2px solid #000; border-radius: 12px;
  padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#chatPanel[hidden] { display: none; }
.chat-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800;
  color: var(--accent); margin-bottom: 6px; }
.chat-x { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; }
#lobbyChat { min-height: 0; }
body.portrait #chatPanel { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 45%; }

/* ── overlays ── */
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(8,10,20,.55); }
.overlay[hidden] { display: none; }
.card { width: min(380px, 100%); max-height: 100%; overflow: auto; background: #f8f4e8; color: #283040;
  border: 4px solid #283048; border-radius: 14px; padding: 18px 20px; text-align: center;
  box-shadow: 0 0 0 3px #7890c0, 0 16px 40px rgba(0,0,0,.6); }
.card h2 { margin: 4px 0 10px; }
#titleCard { background: transparent; align-items: flex-end; padding-bottom: 22px; pointer-events: none; }
#titleCard .card { pointer-events: auto; }
.logo { font-weight: 900; font-size: 34px; letter-spacing: 3px; color: #d83830; text-shadow: 3px 3px 0 #283048; line-height: 1; }
.logo span { color: #3058c8; }
.tagline { margin: 8px 0 14px; font-size: 14px; color: #505870; }
.lbl { display: none; }
#nameInput { width: 100%; padding: 10px 12px; font-size: 16px; border-radius: 10px; border: 2px solid #283048;
  text-align: center; margin-bottom: 8px; background: #fff; color: #283040; }
.gender { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.gender button { flex: 1; padding: 7px; border-radius: 10px; border: 2px solid #283048; background: #fff; color: #283040; cursor: pointer; }
.gender button.on { background: #3058c8; color: #fff; }
.primary, .secondary { display: block; width: 100%; padding: 11px; border-radius: 10px; border: 2px solid #283048;
  font-weight: 800; font-size: 16px; cursor: pointer; margin: 6px 0; }
.primary { background: #d83830; color: #fff; box-shadow: 0 4px 0 #283048; }
.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #283048; }
.primary:disabled { opacity: .6; }
.secondary { background: #fff; color: #283040; font-size: 14px; }
.row { display: flex; gap: 8px; } .row .secondary { flex: 1; }
.muted { color: #6c7088; } .small { font-size: 12px; margin: 2px 0 8px; }
.card .back-link { display: inline-block; margin-top: 10px; color: #3058c8; font-size: 14px; }
.title-audio { margin-top: 10px; text-align: left; }
/* the 330px desktop title card is narrower than the shared strip's minimum:
   tighten it so the track-skip button is not clipped off the right edge */
.title-audio .mps-audio { gap: 5px; padding: 5px 7px; box-sizing: border-box; max-width: 100%; }
.title-audio .mps-audio-btn { padding: 7px 7px; }
.title-audio .mps-audio-slider { min-width: 24px; }

/* how to play */
#howto { z-index: 50; }
.howto-card { width: min(560px, 100%); max-height: 100%; overflow: auto; background: #f8f4e8; color: #283040;
  border: 4px solid #283048; border-radius: 14px; padding: 16px 20px; box-shadow: 0 0 0 3px #7890c0; text-align: left; }
.howto-card h2 { margin: 0 0 8px; color: #d83830; }
.howto-card h3 { margin: 12px 0 4px; color: #3058c8; }
.howto-card p { margin: 6px 0; font-size: 14px; line-height: 1.4; }
.howto-keys, .howto-types { border-collapse: collapse; font-size: 13px; width: 100%; }
.howto-keys td, .howto-types td { padding: 3px 6px; border-bottom: 1px solid #e0d8c0; }
.howto-types td:first-child { font-weight: 800; color: #fff; border-radius: 4px; width: 80px; text-align: center; }
.t-fire{background:#f08030}.t-water{background:#6890f0}.t-grass{background:#58b048}.t-electric{background:#e0c020}
.t-ice{background:#78c8c8}.t-fighting{background:#c03028}.t-poison{background:#a040a0}.t-ground{background:#c8a048}
.t-flying{background:#9878e8}.t-psychic{background:#f85888}.t-bug{background:#98a820}.t-rock{background:#b8a038}
.t-ghost{background:#705898}.t-dragon{background:#7038f8}
.howto-close { margin-top: 12px; width: 100%; padding: 10px; border-radius: 10px; border: 2px solid #283048;
  background: #d83830; color: #fff; font-weight: 800; cursor: pointer; }

/* rankings overlay card: lift the shared 420px cap */
.lb-card { max-width: min(560px, 96vw) !important; }

@media (min-width: 900px) and (min-height: 560px) {
  #titleCard { justify-content: flex-end; align-items: center; padding: 16px 28px; }
  #titleCard .card { width: 330px; }
  #titleCard .logo { font-size: 26px; }
}
@media (max-width: 520px) {
  #titleCard .logo { display: none; }
  .brand { display: none; }
  .where { display: none; }
  #topbar { gap: 4px; padding: 6px; }
  .top-btn { min-width: 30px; height: 30px; padding: 0 6px; }
  #screenWrap { padding: 8px 8px 14px; border-radius: 10px 10px 28px 10px; }
  #screenWrap::after { font-size: 7px; left: 10px; bottom: 2px; }
  .pad-btn { width: 58px; height: 58px; }
}