*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* No text in the game is meant to be selected — highlighting only ever happens by
   accident (long-press / drag) and is a pure nuisance. Disable it document-wide, then
   re-enable it only where text genuinely needs picking: editable fields (so typing and
   the caret work) and the multiplayer room code (so the host can copy it to share).
   The -webkit- prefixes + touch-callout are load-bearing on iOS Safari. */
html {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  /* Pin text to its authored size. Without this, mobile browsers (iOS Safari especially,
     and inside the itch iframe) run their "text inflation" algorithm and enlarge fonts in
     blocks they judge wide — inconsistently between visits/relayouts, so a screen like the
     Main Menu or bet screen looks normal one time and oversized the next. */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* Only TEXT fields (and the copyable room code) — NOT range sliders, which otherwise
   show the iOS long-press highlight/magnifier on their track. */
input:not([type="range"]), textarea, [contenteditable="true"], .room-code, .cloud-code {
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
}
/* Range sliders: suppress the long-press highlight/magnifier + tap flash while keeping
   the thumb draggable. Set EXPLICITLY (not just inherited from html) — form controls'
   UA stylesheet overrides an inherited user-select/touch-callout, which is why the
   sliders stayed selectable. Covers the audio + betting sliders. */
input[type="range"], .audio-slider, .bet-slider {
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Buttons additionally get touch-action: manipulation — kills the double-tap-zoom
   delay WITHOUT blocking scroll (buttons inside scrollable screens still let the page
   scroll). The hold-only speed button overrides to touch-action: none to capture its
   press-and-hold. */
button { touch-action: manipulation; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f5f0; color: #1a1a18;
  min-height: 100vh; display: flex; justify-content: center; padding: 2rem 1rem;
}
#game { width: 100%; max-width: 600px; }
/* Screens that fit lock scrolling (toggled by showScreen) so iOS overscroll can't
   drag a short page and cut off its top. Only intro/shop/lab/pc stay scrollable. */
html.lock-scroll, html.lock-scroll body { overflow: hidden; }
.screen { display: none; }
.screen.active { display: block; }
h1 { font-size: 22px; font-weight: 500; margin-bottom: 0.5rem; }
p  { font-size: 14px; color: #555550; line-height: 1.6; }
.card { background: #fff; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.card h3 { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.rule-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 0.5px solid rgba(0,0,0,0.08); color: #555550; }
.rule-row:last-child { border-bottom: none; }
.rule-val { font-weight: 500; color: #1a1a18; }
.btn { width: 100%; padding: 11px; font-size: 14px; font-weight: 500; border-radius: 8px; cursor: pointer; border: 0.5px solid rgba(0,0,0,0.15); background: #f0efeb; color: #1a1a18; transition: background 0.1s; }
@media (hover: hover) { .btn:hover { background: #e5e4e0; } }
.fighter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1rem; }
.fighter-card { background: #fff; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 12px 14px; }
.fighter-name { font-size: 13px; font-weight: 500; color: #555550; margin-bottom: 6px; }
.fighter-name.right { text-align: right; }
.hp-label { display: flex; justify-content: space-between; font-size: 12px; color: #555550; margin-bottom: 3px; }
.hp-bar-wrap { background: #e8e7e3; border-radius: 999px; height: 10px; overflow: hidden; margin-top: 4px; }
.hp-bar { height: 10px; border-radius: 999px; transition: width 0.5s ease; }
.battle-log { background: #f0efeb; border-radius: 8px; padding: 10px 14px; font-size: 13px; min-height: 80px; max-height: 200px; overflow-y: auto; line-height: 1.8; margin-bottom: 1rem; }
.line-super  { color: #993c1d; font-weight: 500; }
.line-immune { color: #999; }
.line-weak   { color: #185fa5; }
.line-normal { color: #1a1a18; }
.line-info   { color: #777; font-size: 12px; }
.log-divider { border: none; border-top: 0.5px solid rgba(0,0,0,0.1); margin: 6px 0 4px; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 500; }
.badge-super  { background: #faece7; color: #993c1d; }
.badge-normal { background: #fff; color: #555550; border: 0.5px solid rgba(0,0,0,0.12); }
.badge-weak   { background: #e6f1fb; color: #185fa5; }
.badge-immune { background: #e8e7e3; color: #999; }
.whose-turn { font-size: 12px; font-weight: 500; color: #555550; background: #f0efeb; border-radius: 8px; padding: 5px 10px; display: inline-block; margin-bottom: 8px; }
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 1rem; }
.type-btn { border: 0.5px solid rgba(0,0,0,0.15); border-radius: 8px; padding: 8px 2px 6px; cursor: pointer; font-size: 11px; font-weight: 500; text-align: center; transition: transform 0.1s, opacity 0.2s, border-color 0.1s; background: #fff; color: #1a1a18; display: flex; flex-direction: column; align-items: center; gap: 3px; }
@media (hover: hover) { .type-btn:hover:not(:disabled) { transform: scale(1.05); border-color: rgba(0,0,0,0.4); } }
.type-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
.type-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.draft-header { margin-bottom: 0.75rem; position: relative; text-align: center; }
.draft-back-btn { position: absolute; left: 0; top: 0; width: auto; padding: 5px 12px; font-size: 12px; font-weight: 500; border-radius: 8px; cursor: pointer; border: 0.5px solid rgba(0,0,0,0.15); background: #f0efeb; color: #555550; }
@media (hover: hover) { .draft-back-btn:hover { background: #e5e4e0; color: #1a1a18; } }
.draft-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1rem; }
.draft-col-header { font-size: 12px; font-weight: 500; color: #555550; margin-bottom: 6px; }
.draft-col.right .draft-col-header { text-align: right; }
.draft-pick-list { display: flex; flex-direction: column; gap: 4px; min-height: 140px; }
.draft-pick-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; background: #fff; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 6px; padding: 5px 8px; }
.draft-col.right .draft-pick-item { flex-direction: row-reverse; }
.draft-pool-label { font-size: 12px; font-weight: 500; color: #555550; margin-bottom: 6px; }
.type-btn.taken { opacity: 0.18; pointer-events: none; }
.sil-title { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.sil-subtitle { font-size: 13px; color: #555550; margin-bottom: 1.25rem; }
.sil-img-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 1rem; }
/* image-rendering:auto — the guess/silhouette screens sit on the pixelated draft-bg,
   whose image-rendering is inherited; without this the 475px official artwork is
   nearest-neighbor scaled to blocky (matches the other sprite-class resets). */
.sil-img { width: 200px; height: 200px; object-fit: contain; filter: brightness(0); transition: filter 0.6s ease; image-rendering: auto; }
.sil-name { font-size: 20px; font-weight: 500; margin-top: 8px; min-height: 28px; }
.sil-msg { font-size: 14px; color: #555550; text-align: center; margin-bottom: 1rem; min-height: 20px; }
.sil-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1rem; }
.choice-btn { border: 0.5px solid rgba(0,0,0,0.15); border-radius: 8px; padding: 10px 8px; cursor: pointer; font-size: 13px; font-weight: 500; background: #fff; color: #1a1a18; transition: transform 0.1s, background 0.1s; }
@media (hover: hover) { .choice-btn:hover:not(:disabled) { background: #f0efeb; transform: scale(1.02); } }
.choice-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
/* Below ₽100 the bet screen can't take a wager, so the stake controls are gone
   entirely and this top-up panel is the main event — big, bordered, and pulsing so
   it's impossible to miss. Its Play button IS a real `.btn` (unlike the old offer,
   which players skimmed past as filler) and the ONLY primary action in that state. */
.topup-panel { text-align: center; margin: 0 0 16px; padding: 18px 16px; border-radius: 12px; border: 2px solid rgba(29,158,117,0.6); background: rgba(29,158,117,0.1); animation: guess-cta-pulse 1.5s ease-out 4; }
.topup-head { font-size: 16px; font-weight: 700; color: #14795a; margin: 0 0 6px; }
.topup-sub  { font-size: 13px; color: #555550; margin: 0 0 14px; }
.topup-play { font-size: 15px; font-weight: 700; padding: 12px 24px; }
@keyframes guess-cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(29,158,117,0); } 50% { box-shadow: 0 0 0 6px rgba(29,158,117,0.22); } }
@media (prefers-reduced-motion: reduce) { .topup-panel { animation: none; } }

.room-code { font-size: 36px; font-weight: 600; letter-spacing: 8px; text-align: center; padding: 14px 0 6px; }
.lobby-waiting { font-size: 13px; color: #555550; text-align: center; margin-bottom: 4px; }
.lobby-join-row { display: flex; gap: 8px; margin-bottom: 6px; }
.code-input { width: 100px; flex-shrink: 0; padding: 9px 12px; font-size: 18px; letter-spacing: 5px; text-transform: uppercase; border: 0.5px solid rgba(0,0,0,0.2); border-radius: 8px; background: #f5f5f0; color: #1a1a18; outline: none; }
.code-input:focus { border-color: rgba(0,0,0,0.4); }
.lobby-join-btn { flex-shrink: 0; width: auto; padding: 9px 20px; }
.lobby-error { font-size: 13px; color: #e24b4a; min-height: 18px; }
.result-mode-label { font-size: 12px; font-weight: 500; color: #555550; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; min-height: 16px; }
#result-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.secondary-btn { background: transparent; border-color: rgba(0,0,0,0.1); color: #888; }
@media (hover: hover) { .secondary-btn:hover { background: #e5e4e0; color: #1a1a18; } }
/* A centred card so the win/lose text + XP summary stay readable over the arena scene. */
.result-banner {
  text-align: center;
  max-width: 400px;
  margin: 1.5rem auto;
  padding: 2rem 1.5rem;
  background: rgba(255,255,255,0.92);
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
}
.result-banner .winner { font-size: 26px; font-weight: 500; margin-bottom: 0.5rem; }
.result-banner .sub { font-size: 14px; color: #555550; margin-bottom: 2rem; }
.restart-btn { padding: 10px 32px; font-size: 14px; border-radius: 8px; cursor: pointer; border: 0.5px solid rgba(0,0,0,0.15); background: #f0efeb; color: #1a1a18; }
@media (hover: hover) { .restart-btn:hover { background: #e5e4e0; } }
/* ── Confirm modal ────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); padding: 1rem; }
.modal-card { background: #fff; border-radius: 14px; padding: 1.5rem; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.modal-text { font-size: 15px; color: #1a1a18; line-height: 1.5; margin-bottom: 1.25rem; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; }
/* Lowered variant (Safari catch): sit in the lower-middle with a faint backdrop so
   the revealed Pokémon sprite stays visible above the popup. Padding tuned so the
   card top lands ~level with the action button on the ~720px-tall embed. */
.modal-overlay.modal-low { align-items: flex-end; background: rgba(0,0,0,0.15); padding-bottom: 10rem; }
/* Splash restore popup: sit near the top so the mobile keyboard can't cover the input. */
#start-restore-modal { align-items: flex-start; padding-top: 8vh; }
#start-restore-modal .cloud-input { margin: 4px 0 2px; }
/* ── Title splash (audio gesture gate) ────────────────────────────────────── */
#start-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: #f5f5f0; cursor: pointer; transition: opacity 0.45s ease; }
#start-overlay.hidden { opacity: 0; pointer-events: none; }
/* Decorative type-emblem strips down each side of the splash. On desktop they fill the
   gutters outside the 640px content column; on narrow/mobile screens that math collapses
   to 0, so we floor the width at 72px and sit the strips BEHIND the splash content
   (z-index) — so the emblems stay visible on every screen size, text always on top. */
#start-overlay::before, #start-overlay::after {
  content: ""; position: fixed; top: 0; bottom: 0; pointer-events: none; z-index: 0;
  width: max((100vw - 640px) / 2, 72px);
  background: url('../assets/types_vertical.png') no-repeat center;
  background-size: contain;   /* fit the whole strip — no side-crop */
  opacity: 0.45;
}
#start-overlay::before { left: 0; }
#start-overlay::after  { right: 0; }
.start-inner { position: relative; z-index: 1; text-align: center; padding: 2rem; }
.start-inner h1 { font-size: 32px; font-weight: 500; margin-bottom: 0.5rem; }
.start-inner p { margin-bottom: 1.75rem; }
/* Title logo replaces the "Pokémon Arena" wordmark. The PNG carries transparent
   padding, so negative margins tighten the gap to the tagline below. */
.title-logo { display: block; width: min(62vw, 360px); height: auto; margin: -0.75rem auto 0.9rem; }
.intro-logo { width: min(58vw, 280px); margin: -0.5rem auto 1rem; }
/* Developer credit — small + muted, on the splash and at the foot of the menu. */
.dev-credit { font-size: 11px; letter-spacing: 0.04em; color: #b3b0a6; margin-top: 1rem; text-align: center; }
.menu-credit { margin: 1.75rem 0 0.5rem; }
.start-btn { width: auto; padding: 12px 36px; font-size: 15px; }

/* ── New-game starter picker (over the splash) ────────────────────────────── */
#start-starter-overlay { position: fixed; inset: 0; z-index: 120; background: #f5f5f0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.starter-inner { max-width: 560px; margin: 0 auto; padding: 2rem 1rem 3rem; text-align: center; }
.starter-inner h1 { font-size: 26px; font-weight: 500; margin-bottom: 0.4rem; }
.starter-inner p { margin-bottom: 1.5rem; color: #666; font-size: 14px; }
.starter-region { margin-bottom: 1.1rem; }
.starter-region-name { font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #999; margin-bottom: 8px; }
.starter-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.starter-card { display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 6px 10px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08);
  background: #fff; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; font: inherit; }
.starter-img { width: 66px; height: 66px; object-fit: contain; image-rendering: auto; }
.starter-name { font-size: 13px; font-weight: 600; }
.starter-type { font-size: 10px; font-weight: 700; color: #fff; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; }
@media (hover: hover) { .starter-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.14); } }
.starter-card:active { transform: translateY(-1px); }
/* Pick moment: lift + gold ring on the chosen card, dim + lock the rest for a beat. */
#starter-regions.chosen { pointer-events: none; }
#starter-regions.chosen .starter-card { opacity: 0.32; transition: opacity 0.3s ease; }
#starter-regions.chosen .starter-card.picked { opacity: 1; }
.starter-card.picked { box-shadow: 0 0 0 3px var(--type-color, #f6c343), 0 12px 30px rgba(0,0,0,0.28);
  animation: starterPop 0.42s ease forwards; }
@keyframes starterPop { 0% { transform: scale(1); } 55% { transform: scale(1.13); } 100% { transform: scale(1.06); } }

/* ── Intro mode cards ─────────────────────────────────────────────────────── */
.mode-card { border-left: 3px solid transparent; }
.mode-card h3 { font-size: 15px; margin-bottom: 6px; }
.mode-card h3.mode-title { font-size: 22px; font-weight: 600; }
.mode-sub { font-size: 12px; font-weight: 500; color: #999; margin-left: 7px; text-transform: uppercase; letter-spacing: 0.5px; }
.mode-card p  { margin-bottom: 0; }
.mode-card .btn { margin-top: 14px; }
.mode-card.cpu { border-left-color: #1d9e75; }
.mode-card.mp  { border-left-color: #e8833a; }

/* ── Sound panel ──────────────────────────────────────────────────────────── */
.audio-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.audio-mute { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; border: 0.5px solid rgba(0,0,0,0.15); background: #f0efeb; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
@media (hover: hover) { .audio-mute:hover { background: #e5e4e0; } }
.audio-label { font-size: 13px; font-weight: 500; width: 64px; flex-shrink: 0; }
.audio-slider { flex: 1; accent-color: #1d9e75; cursor: pointer; }

/* ── Shop ─────────────────────────────────────────────────────────────────── */
.shop-card { border-left: 3px solid #378add; }
.gc-card { border-left-color: #b84fb0; }   /* Game Corner: deep orchid (icon's magenta hue, depth matched to the other accents), distinct from the Shop's blue */
.shop-balance { font-size: 13px; font-weight: 500; color: #555550; margin-bottom: 1rem; }
.shop-balance span { font-weight: 600; color: #1a1a18; }
.shop-item { display: flex; align-items: center; gap: 14px; }
.shop-item-icon { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.shop-item-info { flex: 1; }
.shop-item-info h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.shop-item-info p { font-size: 13px; margin-bottom: 0; }
.shop-buy { width: auto; flex-shrink: 0; padding: 9px 18px; font-size: 13px; font-weight: 600; }
.shop-buy:disabled { opacity: 0.45; cursor: not-allowed; }
.shop-item.owned { border-color: rgba(29,158,117,0.5); }
.shop-count { font-size: 11px; font-weight: 600; color: #1d9e75; margin-left: 4px; }
/* Owned count as a consistent small line under the item name (see shopItemCard). */
.shop-owned { font-size: 11px; font-weight: 600; color: #1d9e75; margin: -1px 0 5px; }

/* ── Cloud Save card (intro menu) ─────────────────────────────────────────────── */
#cloud-card p { margin-bottom: 12px; }
.cloud-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-actions .btn { width: auto; flex: 1 1 auto; }
.cloud-code {
  font-size: 22px; font-weight: 700; letter-spacing: 2px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f5f5f0; border: 0.5px solid rgba(0,0,0,0.15); border-radius: 8px;
  padding: 12px 8px; margin-bottom: 10px; word-break: break-all; color: #1a1a18;
}
.cloud-hint { font-size: 12px; color: #777; margin: 12px 0 4px; }
.cloud-synced { font-size: 11px; color: #999; margin-bottom: 0; }
.cloud-restore { margin-top: 12px; }
.cloud-input {
  width: 100%; padding: 10px 12px; font-size: 16px; letter-spacing: 1px;
  text-transform: uppercase; border: 0.5px solid rgba(0,0,0,0.2); border-radius: 8px;
  background: #f5f5f0; color: #1a1a18; outline: none; margin-bottom: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cloud-input:focus { border-color: rgba(0,0,0,0.4); }
.cloud-restore-row { display: flex; gap: 8px; }
.cloud-restore-row .btn { flex: 1; }
.cloud-msg { font-size: 12px; color: #777; min-height: 16px; margin-top: 6px; }
.cloud-msg.err { color: #e24b4a; }

/* Small back button at the top of the Lab / PC (so you needn't scroll to leave) */
/* Sticky so it stays pinned top-left while a long Shop/PC list scrolls under it —
   no more scrolling back up to leave. Compact pill; z-index keeps it above content. */
.top-back { position: sticky; top: 2rem; z-index: 5; width: auto; padding: 4px 10px; margin-bottom: 10px; font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; background: rgba(245,245,240,0.85); backdrop-filter: blur(4px); border: 0.5px solid rgba(0,0,0,0.12); color: #888; transition: background 0.1s, color 0.1s; }
@media (hover: hover) { .top-back:hover { background: #e5e4e0; color: #1a1a18; } }

/* Menu: two buttons side by side (The Lab / The PC) */
.menu-btn-row { display: flex; gap: 10px; }
/* Stack the emoji above a centered label so the narrow 3-up buttons read cleanly on
   mobile instead of the emoji wrapping inline with the first word (ragged two lines). */
.menu-btn-row .btn {
  flex: 1; margin-top: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 6px; line-height: 1.15;
}
.menu-btn-row .btn .btn-emoji  { font-size: 20px; line-height: 0; }
/* Sprite icons in place of the old menu emojis. image-rendering:auto so the 128px
   sprites downscale smoothly. The Lab uses a Mewtwo silhouette (brightness(0)),
   flipped to white in dark mode so it stays visible on the dark button. */
.menu-btn-row .btn .btn-emoji img { width: 30px; height: 30px; object-fit: contain; image-rendering: auto; display: block; }
.menu-btn-row .btn .btn-emoji img.silhouette { filter: brightness(0); }
.menu-btn-row .btn .btn-label  { white-space: nowrap; }
/* Shop button inline icon (rounded, since shop.jpg has an opaque background). */
.btn-icon { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; vertical-align: -6px; image-rendering: auto; }

/* Screen backgrounds — a faint, fixed pixel-art scene the UI scrolls over (toggled
   on <body> by showScreen). Veiled with translucent beige for readability — tune the
   veil alpha (lower = bolder image). The PC flips between two scenes on each entry. */
body.lab-bg, body.shop-bg, body.pc-bg-1, body.pc-bg-2, body.safari-bg, body.draft-bg,
body.arena-bg-1, body.arena-bg-2, body.gamecorner-bg, body.duel-bg {
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  image-rendering: pixelated;
}
body.lab-bg    { background-image: linear-gradient(rgba(245,245,240,0.6), rgba(245,245,240,0.6)), url('../assets/backgrounds/lab.png');  background-position: center 15%; }
body.shop-bg   { background-image: linear-gradient(rgba(245,245,240,0.6), rgba(245,245,240,0.6)), url('../assets/backgrounds/shop.png'); }
body.pc-bg-1   { background-image: linear-gradient(rgba(245,245,240,0.6), rgba(245,245,240,0.6)), url('../assets/backgrounds/pc_1.png'); }
body.pc-bg-2   { background-image: linear-gradient(rgba(245,245,240,0.6), rgba(245,245,240,0.6)), url('../assets/backgrounds/pc_2.png'); }
body.safari-bg { background-image: linear-gradient(rgba(245,245,240,0.6), rgba(245,245,240,0.6)), url('../assets/backgrounds/safari.png'); }
body.draft-bg  { background-image: linear-gradient(rgba(245,245,240,0.6), rgba(245,245,240,0.6)), url('../assets/backgrounds/draft.png'); }
body.arena-bg-1 { background-image: linear-gradient(rgba(245,245,240,0.6), rgba(245,245,240,0.6)), url('../assets/backgrounds/arena_1.png'); }
body.arena-bg-2 { background-image: linear-gradient(rgba(245,245,240,0.6), rgba(245,245,240,0.6)), url('../assets/backgrounds/arena_2.png'); }
body.gamecorner-bg { background-image: linear-gradient(rgba(245,245,240,0.6), rgba(245,245,240,0.6)), url('../assets/backgrounds/game_corner.png'); }
body.duel-bg   { background-image: linear-gradient(rgba(245,245,240,0.6), rgba(245,245,240,0.6)), url('../assets/backgrounds/duel.png'); }

/* Keep loose header text + back buttons legible over the background images */
#screen-lab h1, #screen-lab > p, #screen-lab .shop-balance,
#screen-shop h1, #screen-shop .shop-balance,
#screen-safari h1, #screen-safari > p, #screen-safari .shop-balance, #screen-safari .safari-msg,
#screen-gamecorner h1, #screen-gamecorner > p,
#screen-pc h1, #screen-pc > p { text-shadow: 0 0 3px #f5f5f0, 0 0 6px #f5f5f0, 0 0 6px #f5f5f0, 0 0 10px #f5f5f0; }
#screen-lab .top-back, #screen-pc .top-back, #screen-safari .top-back, #screen-gamecorner .top-back { background: #f0efeb; }

/* The Lab — evolution lines */
.lab-line { padding: 14px 16px; }
.lab-line-head { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.lab-line-row { display: flex; align-items: flex-start; justify-content: center; gap: 6px; flex-wrap: wrap; }
.lab-line-row + .lab-line-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.07); }
.lab-mon { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 88px; }
.lab-mon-img { width: 52px; height: 52px; object-fit: contain; transition: filter 0.2s; }
.lab-mon.locked .lab-mon-img { filter: brightness(0); }   /* silhouette, like the guessing game */
.lab-mon-name { font-size: 12px; font-weight: 500; }
.lab-arrow { align-self: center; color: #aaa; font-size: 16px; padding-top: 18px; }
.lab-buy { width: auto; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.lab-buy:disabled { opacity: 0.5; cursor: not-allowed; }
.lab-owned { font-size: 12px; font-weight: 600; color: #1d9e75; padding: 5px 0; }

/* The Lab — legendary & mythical boutique gallery, grouped by generation */
.lab-gen { padding: 14px 16px; }
.lab-gen-head { font-size: 14px; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.02em; }
.lab-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.lab-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px;
  border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.45); text-align: center; }
.lab-card-img { width: 58px; height: 58px; object-fit: contain; transition: filter 0.25s; image-rendering: auto; }
.lab-card.unowned .lab-card-img { filter: brightness(0); }   /* silhouette until restored */
.lab-card-name { font-size: 12px; font-weight: 600; }
.lab-card.unowned .lab-card-name { color: #888; }            /* dimmed, but readable — it's a shop */
.lab-card.owned { background: rgba(29,158,117,0.10); border-color: rgba(29,158,117,0.4); }

/* The PC — assign a Pokémon per type */
.pc-slot { padding: 12px 16px; }
.pc-slot-head { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.pc-slot-name { flex: 1; }
.pc-current { width: 40px; height: 40px; object-fit: contain; image-rendering: auto; }
.pc-options { display: flex; flex-wrap: wrap; gap: 9px; }
.pc-opt { width: 60px; height: 60px; padding: 4px; border-radius: 10px; border: 1.5px solid rgba(0,0,0,0.12); background: #f0efeb; cursor: pointer; transition: border-color 0.12s, transform 0.1s; }
/* image-rendering: auto overrides the pixelated rendering inherited from the
   pc-bg/lab-bg body background, so the 128px sprites downscale smoothly. */
.pc-opt img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; image-rendering: auto; }
@media (hover: hover) { .pc-opt:hover { transform: scale(1.06); } }
.pc-opt.sel { border-color: #1d9e75; border-width: 2.5px; }
/* Flash a slot when the player lands here from the post-catch "equip" nudge */
.pc-slot.pc-focus { box-shadow: 0 0 0 2.5px #1d9e75; transition: box-shadow 0.2s; }

/* The Safari Zone — wild encounters */
.safari-stage { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 220px; margin-bottom: 1rem; text-align: center; }
.safari-sprite { width: 150px; height: 150px; object-fit: contain; transition: filter 0.3s ease; image-rendering: auto; }
.safari-sprite.silhouette { filter: brightness(0); }
.safari-ball { width: 72px; height: 72px; object-fit: contain; opacity: 0.85; image-rendering: auto; }
/* Near-black + glow (added in the legibility rules below) so messages read clearly
   over the Safari background art; flipped to light in the dark-mode block. */
.safari-msg { font-size: 15px; font-weight: 600; margin: 0; color: #1a1a18; }

/* Evolution screen — the spin-evolve moment */
.evo-stage { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; margin: 13vh auto 1.5rem; text-align: center; }
.evo-sprite { width: 180px; height: 180px; object-fit: contain; will-change: transform, filter; image-rendering: auto; }
.evo-msg { font-size: 17px; font-weight: 600; margin: 0; min-height: 1.4em; max-width: 340px; }
#evo-actions { max-width: 320px; margin: 0 auto; }
/* Lights down while a Pokémon evolves — fades in with the evolution music. */
/* Evolution spin darkening. evo-dark only sets a background-COLOR, which a
   background-image (the carried-over arena scene) would hide — so darken with a veil
   that fades in OVER the scene, while the evolving sprite + message stay lit above it. */
body.evo-dark { background-color: #14141a; }
body.evo-dark::after {
  content: ''; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: #14141a; opacity: 0; animation: evo-darken 0.9s ease forwards;
}
@keyframes evo-darken { to { opacity: 1; } }
#screen-evolution .evo-stage, #screen-evolution #evo-actions { position: relative; z-index: 50; }
body.evo-dark .evo-msg { color: #f4f4f8; }

/* Result — post-match team XP / evolutions */
.result-xp { max-width: 320px; margin: 0 auto 1.75rem; text-align: left; }
.result-xp-title { font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
.result-xp-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 14px; padding: 4px 0; border-top: 1px solid rgba(0,0,0,0.08); }
.result-xp-row em { color: #1d9e75; font-style: normal; }
.result-xp-row.maxed { color: #c79200; font-weight: 700; }

/* PC — per-Pokémon level badge + evolution hint */
.pc-opt { position: relative; }
.pc-opt-lvl { position: absolute; bottom: -3px; right: -3px; font-size: 9px; font-weight: 700; line-height: 1; background: #1a1a18; color: #fff; border-radius: 6px; padding: 2px 3px; pointer-events: none; }
.pc-evo-hint { font-size: 11px; color: #1d9e75; margin-top: 8px; }
/* PC — item-evolution buttons */
.pc-evos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pc-evo-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.12); background: #f0efeb; color: #1a1a18; cursor: pointer; font: inherit; text-align: left; transition: background 0.1s; }
@media (hover: hover) { .pc-evo-btn:hover:not(:disabled) { background: #e5e4e0; } }
.pc-evo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pc-evo-into { font-size: 12px; font-weight: 600; }
.pc-evo-item { font-size: 10px; color: #1d9e75; }

/* Shop — category divider */
.shop-section-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #888; margin: 1.5rem 0 0.6rem; text-align: center; }
/* Shop — menu backdrops */
.backdrop-thumb { width: 84px; height: 52px; object-fit: cover; border-radius: 7px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.12); }
.backdrop-item.equipped { border-color: #1d9e75; }

/* Main Menu backdrop — equipped region scene behind the intro (image set inline by
   applyMenuBg so one class covers every region; veil colour is baked into the inline
   gradient). Detailed art, so no pixelation. */
body.menu-bg { background-position: center top; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
/* Maxed (Lv. 100) — gold flex */
.pc-opt.maxed { border-color: #e6b800; }
.pc-opt.maxed.sel { border-color: #e6b800; box-shadow: 0 0 0 1.5px #e6b800; }
.pc-opt-lvl.maxed { background: #e6b800; color: #1a1a18; }
.pc-empty { font-size: 12px; color: #888; }

/* Roster chip wearing a Pokémon icon — just the head, no circle (like the arena) */
.emblem.poke { border-color: transparent; background: none; box-shadow: none; }
.emblem.poke.special { box-shadow: none; }   /* no gold ring on Pokémon specials, matching the blade */
.emblem-img.poke { width: 30px; height: 30px; object-fit: contain; }

/* ── Special pick ─────────────────────────────────────────────────────────── */
#screen-special h2 { font-size: 20px; font-weight: 500; }
.special-timer { font-size: 15px; font-weight: 500; margin-bottom: 0.75rem; }
.special-timer.urgent { color: #e24b4a; }
.type-btn.chosen { opacity: 1 !important; outline: 3px solid #FFD700; outline-offset: -1px; }
.special-scout { font-size: 13px; font-weight: 500; background: rgba(29,158,117,0.1); border: 0.5px solid rgba(29,158,117,0.35); border-radius: 8px; padding: 8px 12px; margin-bottom: 1.25rem; }
.special-scout.muted { background: #f0efeb; border-color: rgba(0,0,0,0.1); }
.scout-locked { color: #888; font-style: italic; font-weight: 400; }
.scout-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #1d9e75; margin-right: 6px; }
.scout-avail { margin-right: 8px; }
.scout-use-btn { font-size: 12px; font-weight: 600; color: #1d9e75; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }
@media (hover: hover) { .scout-use-btn:hover { color: #157a59; } }

/* ── Wallet & betting ─────────────────────────────────────────────────────── */
.wallet-chip { margin-top: 12px; font-size: 12px; font-weight: 500; color: #555550; text-align: center; }
.wallet-chip span { font-weight: 600; color: #1a1a18; }
#screen-bet h2 { font-size: 20px; font-weight: 500; }
.bet-card { text-align: center; }
.bet-balance { font-size: 12px; font-weight: 500; color: #555550; margin-bottom: 12px; }
.bet-balance span { font-weight: 600; color: #1a1a18; }
.bet-matchup { font-size: 18px; font-weight: 500; margin-bottom: 4px; color: #555550; }
.bet-matchup.favorite strong { color: #1d9e75; }
.bet-matchup.underdog strong { color: #e2913b; }
.bet-matchup.even strong     { color: #555550; }
.bet-chance { font-size: 13px; color: #555550; margin-bottom: 1.25rem; }
.bet-stake-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bet-slider { flex: 1; accent-color: #1d9e75; cursor: pointer; }
.bet-max { flex-shrink: 0; width: auto; padding: 6px 14px; font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; border: 0.5px solid rgba(0,0,0,0.15); background: #f0efeb; color: #1a1a18; }
@media (hover: hover) { .bet-max:hover { background: #e5e4e0; } }
.bet-readout { font-size: 14px; font-weight: 500; margin-bottom: 1rem; }
.bet-readout .bet-payout { font-weight: 600; }
.bet-readout .bet-profit { font-weight: 600; color: #1d9e75; }
.bet-actions { display: flex; flex-direction: column; gap: 8px; }
.bet-broke { font-size: 15px; font-weight: 500; color: #e24b4a; margin-bottom: 6px; }
.bet-broke-sub { font-size: 12px; color: #555550; margin-bottom: 1rem; }
.bet-purse-note { font-size: 12px; color: #555550; margin-bottom: 1rem; }
.bet-purse-note strong { color: #1d9e75; font-weight: 600; }
.bet-result { font-size: 14px; font-weight: 500; margin: -1rem 0 2rem; }
.bet-result .bet-win  { color: #1d9e75; font-weight: 600; }
.bet-result .bet-lose { color: #e24b4a; font-weight: 600; }
.bet-result .bet-push { color: #555550; font-weight: 600; }

/* ── Arena ───────────────────────────────────────────────────────────────── */
#screen-arena.active { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; }
#arena-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 0.5rem; flex-shrink: 0; }
#arena-score-player { font-size: 14px; font-weight: 600; color: #1d9e75; }
#arena-score-cpu    { font-size: 14px; font-weight: 600; color: #378add; }
#arena-title        { font-size: 12px; font-weight: 500; color: #555550; text-transform: uppercase; letter-spacing: 1px; }
#arena-title.stalemate-warn { color: #e24b4a; font-weight: 700; animation: stalemate-pulse 0.7s ease-in-out infinite; }
@keyframes stalemate-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.arena-canvas-wrap { position: relative; width: 100%; display: flex; justify-content: center; }
/* image-rendering: auto so the canvas isn't nearest-neighbor upscaled to blocky on
   HiDPI/scaled displays — it would otherwise inherit `pixelated` from body.arena-bg-*. */
#arena-canvas { display: block; border-radius: 50%; box-shadow: 0 4px 32px rgba(0,0,0,0.18); image-rendering: auto; }
.arena-countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: 3px; pointer-events: none; text-shadow: 0 3px 20px rgba(0,0,0,0.75); }
.arena-countdown.ready { font-size: 56px; color: #fff; animation: cd-pop 0.3s ease; }
.arena-countdown.go    { font-size: 80px; color: #ffd23f; animation: cd-pop 0.35s ease; }
@keyframes cd-pop { from { transform: scale(0.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Duel watcher: the host's stream stalled (transient RTDB latency, not a disconnect).
   Shown by the watch loop when no frame has arrived for a beat; hidden the moment one does. */
.arena-stall { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; background: rgba(0,0,0,0.35); animation: cd-pop 0.25s ease; }
.arena-stall-text { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 0.5px; text-shadow: 0 2px 14px rgba(0,0,0,0.8); }
.arena-stall-spinner { width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: arena-stall-spin 0.8s linear infinite; }
@keyframes arena-stall-spin { to { transform: rotate(360deg); } }
#arena-bench  { margin-top: 14px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0; }
#arena-special-chip { display: flex; align-items: center; gap: 10px; }
.special-info { display: flex; flex-direction: column; line-height: 1.25; }
.special-label { font-size: 10px; font-weight: 500; color: #555550; text-transform: uppercase; letter-spacing: 0.5px; }
#arena-special-name { font-size: 14px; font-weight: 600; }
#arena-special-circle { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 2px 14px rgba(0,0,0,0.2); }
#arena-launch-btn { width: auto; padding: 10px 26px; font-size: 13px; font-weight: 600; color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: opacity 0.15s, transform 0.1s; }
@media (hover: hover) { #arena-launch-btn:hover:not(:disabled) { opacity: 0.88; transform: scale(1.03); } }
#arena-launch-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
#arena-speed-btn, #arena-potion-btn { width: auto; padding: 10px 18px; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 0.1s, color 0.1s, transform 0.1s; }
/* Hold-to-speed-up: selection/callout are already suppressed by the global `button`
   rule; this one overrides touch-action to `none` (not `manipulation`) so the whole
   press-and-hold is captured as a pointer gesture rather than a scroll/pan. */
#arena-speed-btn { touch-action: none; }
#arena-speed-btn.speeding { background: #ef9f27; border-color: #ef9f27; color: #1a1a18; transform: scale(1.05); }
#arena-potion-btn { display: inline-flex; align-items: center; gap: 6px; }
#arena-potion-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.potion-icon { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
#arena-rosters { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; gap: 12px; margin-bottom: 8px; flex-shrink: 0; }
.roster { display: flex; flex-wrap: wrap; gap: 4px 5px; flex: 1; align-content: flex-start; }
#roster-cpu { justify-content: flex-end; }
.emblem { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px solid #1d9e75; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: opacity 0.35s ease, filter 0.35s ease; }
#roster-cpu .emblem { border-color: #378add; }
.emblem-img { width: 18px; height: 18px; object-fit: contain; display: block; pointer-events: none; image-rendering: auto; }
.emblem.special { box-shadow: 0 0 0 2px #FFD700, 0 1px 4px rgba(0,0,0,0.25); }
.emblem.reserve { opacity: 0.5; }
.emblem.dead { opacity: 0.22; filter: grayscale(0.9); }

/* ── Game Corner — Cascade Slots (js/gamecorner.js) ──────────────────────────
   Light-touch tiles: dark cell + a soft tier-colour glow and thin tier ring, with
   the Pokémon sprite big on top as the focal point (tier is only a secondary cue).
   Colours arrive per tile as --gc-tint (slate·green·blue·purple·orange). */
.gc-hud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 12px; }
.gc-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.gc-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }
.gc-stat > span:last-child { font-size: 17px; font-weight: 700; }
.gc-stage { position: relative; width: min(92vw, 380px); margin: 0 auto; }
.gc-board {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  width: 100%; aspect-ratio: 1 / 1;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
/* Reshuffle callout — a deadlocked board (no legal swap) is rare, so make it a beat
   the player can't miss: a banner pinned over the board while it visibly shakes into
   a fresh layout. Timings live in js/gamecorner.js (T_STUCK / T_SHAKE / T_RESHUFFLED). */
.gc-banner {
  position: absolute; inset: 0; z-index: 6; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 14px; pointer-events: none; text-align: center;
  background: rgba(20, 18, 30, 0.5);
}
.gc-banner.show { display: flex; animation: gc-banner-in 0.28s cubic-bezier(.2, 1.4, .4, 1); }
.gc-banner.out  { animation: gc-banner-out 0.25s ease forwards; }
.gc-banner-big { font-size: clamp(26px, 8vw, 34px); font-weight: 800; color: #fff;
  letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.gc-banner-sub { font-size: 15px; font-weight: 700; color: #ffd88a; }
@keyframes gc-banner-in  { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes gc-banner-out { 0% { opacity: 1; } 100% { opacity: 0; } }
.gc-board.gc-shuffling { animation: gc-shake 0.55s ease; }
@keyframes gc-shake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-7px) rotate(-0.6deg); }
  28% { transform: translateX(6px)  rotate(0.6deg); }
  44% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  76% { transform: translateX(-2px); }
}
.gc-board.off { filter: grayscale(1) brightness(0.7); opacity: 0.6; }        /* machine idle until the first spin */
.gc-board.on  { animation: gc-poweron 0.55s ease; }
@keyframes gc-poweron { 0% { filter: grayscale(0.7) brightness(0.6); } 60% { filter: brightness(1.15); } 100% { filter: none; } }
.gc-cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px;
  touch-action: none;   /* the tile drag owns the gesture — never scroll/zoom */
}
.gc-tile {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  /* Light tile tinted by its tier colour: the sprites' black outlines pop (they were
     lost on the old near-black cell), and the tier stays readable. Fallback for
     browsers without color-mix keeps a soft neutral. */
  background: #e9e7f0;
  background: color-mix(in srgb, var(--gc-tint, #6b7a8f) 20%, #f2f0f7);
  border: 1.5px solid var(--gc-tint, #6b7a8f);
  box-shadow: 0 0 10px -2px var(--gc-tint, #6b7a8f), inset 0 0 10px -4px var(--gc-tint, #6b7a8f);
  transition: transform 0.11s ease;
}
.gc-cell.sel .gc-tile { box-shadow: 0 0 0 3px var(--gc-tint, #6b7a8f), 0 0 12px -1px var(--gc-tint, #6b7a8f); }
.gc-sym { width: 86%; height: 86%; object-fit: contain; image-rendering: auto; pointer-events: none; }
/* Durations kept in sync with T_FLASH / T_DROP in js/gamecorner.js (slowed so the
   cascade reads — the fun is watching the chain resolve). */
.gc-cell.flash .gc-tile { animation: gc-flash 0.4s ease; }
@keyframes gc-flash { 0% { filter: none; } 45% { filter: brightness(2.2); transform: scale(1.14); } 100% { filter: none; } }
.gc-cell.drop .gc-tile { animation: gc-drop 0.3s ease; }
@keyframes gc-drop { 0% { transform: translateY(-16px); opacity: 0.3; } 100% { transform: translateY(0); opacity: 1; } }
.gc-msg { text-align: center; min-height: 1.4em; margin: 12px 0; font-size: 15px; }
.gc-up   { color: #1d9e75; font-weight: 700; }
.gc-down { color: #c0603a; font-weight: 600; }
.gc-jack { color: #f2a03d; font-weight: 800; text-shadow: 0 0 8px rgba(242,160,61,0.6); }
#gc-spin { display: block; margin: 0 auto; min-width: 180px; }
#screen-gamecorner .gc-hud .gc-stat-label,
#screen-gamecorner .gc-hud .gc-stat > span:last-child { text-shadow: 0 0 3px #f5f5f0, 0 0 6px #f5f5f0; }

@media (prefers-color-scheme: dark) {
  body { background: #1a1a18; color: #f0efeb; }
  #start-overlay { background: #1a1a18; }
  #start-starter-overlay { background: #1a1a18; }
  .starter-inner p { color: #999; }
  .dev-credit { color: #6b6862; }
  .starter-card { background: #2a2a28; border-color: rgba(255,255,255,0.12); }
  .card, .fighter-card { background: #2a2a28; border-color: rgba(255,255,255,0.1); }
  p, .fighter-name, .rule-row, .hp-label, .whose-turn, .line-info { color: #aaa; }
  .rule-val, h1, h3 { color: #f0efeb; }
  .hp-bar-wrap { background: #3a3a38; }
  .battle-log { background: #222220; }
  .line-normal { color: #f0efeb; }
  .line-super { color: #f0997b; }
  .line-weak { color: #85b7eb; }
  .line-immune { color: #666; }
  .badge-super { background: #4a1b0c; color: #f0997b; }
  .badge-weak { background: #042c53; color: #85b7eb; }
  .badge-normal { background: #333; color: #aaa; border-color: rgba(255,255,255,0.1); }
  .badge-immune { background: #333; color: #666; }
  .draft-col-header { color: #aaa; }
  .draft-pool-label { color: #aaa; }
  .draft-pick-item { background: #2a2a28; border-color: rgba(255,255,255,0.1); color: #f0efeb; }
  .sil-subtitle { color: #aaa; }
  .sil-msg { color: #aaa; }
  .choice-btn { background: #2a2a28; border-color: rgba(255,255,255,0.12); color: #f0efeb; }
  @media (hover: hover) { .choice-btn:hover:not(:disabled) { background: #3a3a38; } }
  .room-code { color: #f0efeb; }
  .lobby-waiting { color: #aaa; }
  .code-input { background: #2a2a28; border-color: rgba(255,255,255,0.15); color: #f0efeb; }
  .code-input:focus { border-color: rgba(255,255,255,0.4); }
  .cloud-code { background: #2a2a28; border-color: rgba(255,255,255,0.15); color: #f0efeb; }
  .cloud-input { background: #2a2a28; border-color: rgba(255,255,255,0.15); color: #f0efeb; }
  .cloud-input:focus { border-color: rgba(255,255,255,0.4); }
  .cloud-hint { color: #999; }
  .cloud-synced, .cloud-msg { color: #888; }
  .result-mode-label { color: #aaa; }
  .result-banner { background: rgba(26,26,24,0.92); border-color: rgba(255,255,255,0.12); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
  .secondary-btn { background: transparent; border-color: rgba(255,255,255,0.08); color: #666; }
  @media (hover: hover) { .secondary-btn:hover { background: #444442; color: #f0efeb; } }
  .type-btn { background: #2a2a28; color: #f0efeb; border-color: rgba(255,255,255,0.12); }
  @media (hover: hover) { .type-btn:hover:not(:disabled) { border-color: rgba(255,255,255,0.4); } }
  .btn { background: #3a3a38; border-color: rgba(255,255,255,0.12); color: #f0efeb; }
  .menu-btn-row .btn .btn-emoji img.silhouette { filter: brightness(0) invert(1); }
  @media (hover: hover) { .btn:hover { background: #444442; } }
  .whose-turn { background: #2a2a28; }
  .restart-btn { background: #3a3a38; border-color: rgba(255,255,255,0.12); color: #f0efeb; }
  @media (hover: hover) { .restart-btn:hover { background: #444442; } }
  .log-divider { border-color: rgba(255,255,255,0.08); }
  .audio-mute { background: #3a3a38; border-color: rgba(255,255,255,0.12); }
  @media (hover: hover) { .audio-mute:hover { background: #444442; } }
  .wallet-chip, .bet-balance { color: #aaa; }
  .wallet-chip span, .bet-balance span { color: #f0efeb; }
  .bet-matchup, .bet-chance, .bet-broke-sub, .bet-purse-note { color: #aaa; }
  .topup-panel { background: rgba(29,158,117,0.16); }
  .topup-head { color: #45c79b; }
  .topup-sub  { color: #aaa; }
  .bet-max { background: #3a3a38; border-color: rgba(255,255,255,0.12); color: #f0efeb; }
  @media (hover: hover) { .bet-max:hover { background: #444442; } }
  .shop-balance { color: #aaa; }
  .shop-balance span { color: #f0efeb; }
  .special-scout { background: rgba(29,158,117,0.14); border-color: rgba(29,158,117,0.4); }
  .special-scout.muted { background: #2a2a28; border-color: rgba(255,255,255,0.1); }
  .scout-locked { color: #999; }
  .draft-back-btn { background: #3a3a38; border-color: rgba(255,255,255,0.12); color: #aaa; }
  @media (hover: hover) { .draft-back-btn:hover { background: #444442; color: #f0efeb; } }
  .modal-card { background: #2a2a28; }
  .modal-text { color: #f0efeb; }
  .top-back { background: rgba(26,26,24,0.85); border-color: rgba(255,255,255,0.12); color: #999; }
  @media (hover: hover) { .top-back:hover { background: #444442; color: #f0efeb; } }
  body.lab-bg  { background-image: linear-gradient(rgba(26,26,24,0.62), rgba(26,26,24,0.62)), url('../assets/backgrounds/lab.png'); }
  body.shop-bg { background-image: linear-gradient(rgba(26,26,24,0.62), rgba(26,26,24,0.62)), url('../assets/backgrounds/shop.png'); }
  body.pc-bg-1 { background-image: linear-gradient(rgba(26,26,24,0.62), rgba(26,26,24,0.62)), url('../assets/backgrounds/pc_1.png'); }
  body.pc-bg-2 { background-image: linear-gradient(rgba(26,26,24,0.62), rgba(26,26,24,0.62)), url('../assets/backgrounds/pc_2.png'); }
  body.safari-bg { background-image: linear-gradient(rgba(26,26,24,0.62), rgba(26,26,24,0.62)), url('../assets/backgrounds/safari.png'); }
  body.draft-bg  { background-image: linear-gradient(rgba(26,26,24,0.62), rgba(26,26,24,0.62)), url('../assets/backgrounds/draft.png'); }
  body.arena-bg-1 { background-image: linear-gradient(rgba(26,26,24,0.62), rgba(26,26,24,0.62)), url('../assets/backgrounds/arena_1.png'); }
  body.arena-bg-2 { background-image: linear-gradient(rgba(26,26,24,0.62), rgba(26,26,24,0.62)), url('../assets/backgrounds/arena_2.png'); }
  body.gamecorner-bg { background-image: linear-gradient(rgba(26,26,24,0.62), rgba(26,26,24,0.62)), url('../assets/backgrounds/game_corner.png'); }
  body.duel-bg   { background-image: linear-gradient(rgba(26,26,24,0.62), rgba(26,26,24,0.62)), url('../assets/backgrounds/duel.png'); }
  #screen-lab h1, #screen-lab > p, #screen-lab .shop-balance,
  #screen-shop h1, #screen-shop .shop-balance,
  #screen-safari h1, #screen-safari > p, #screen-safari .shop-balance, #screen-safari .safari-msg,
  #screen-gamecorner h1, #screen-gamecorner > p,
  #screen-pc h1, #screen-pc > p { text-shadow: 0 0 3px #1a1a18, 0 0 6px #1a1a18, 0 0 6px #1a1a18, 0 0 10px #1a1a18; }
  #screen-lab .top-back, #screen-pc .top-back, #screen-safari .top-back, #screen-gamecorner .top-back { background: #2a2a28; }
  #screen-gamecorner .gc-hud .gc-stat-label,
  #screen-gamecorner .gc-hud .gc-stat > span:last-child { text-shadow: 0 0 3px #1a1a18, 0 0 6px #1a1a18; }
  .safari-msg { color: #f0efeb; }
  .result-xp-row.maxed { color: #f0c83c; }
  .pc-opt { background: #3a3a38; border-color: rgba(255,255,255,0.12); }
  .pc-evo-btn { background: #3a3a38; border-color: rgba(255,255,255,0.12); color: #f0efeb; }
  @media (hover: hover) { .pc-evo-btn:hover:not(:disabled) { background: #444442; } }
  .pc-opt.sel { border-color: #1d9e75; }
  .pc-empty { color: #999; }
  .lab-arrow { color: #666; }
  .lab-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
  .lab-card.unowned .lab-card-img { filter: brightness(0) invert(0.18); }   /* dark silhouette on dark bg */
  .lab-card.unowned .lab-card-name { color: #999; }
  .lab-card.owned { background: rgba(29,158,117,0.16); border-color: rgba(29,158,117,0.45); }
}