/* ============================================
   VICIN GameBoy Skin — handheld.css
   CSS-gameby shell está en gameboy-shell.css (1:1 port).
   Este archivo solo tiene overrides VICIN:
   - variables (colores)
   - body / gameboy-wrap (scaling + safe area)
   - front-plate (borders + radius del shell)
   - screen-container + screen (overrides)
   - LCD content (lcd, lcd__bar, lcd__program, detail__)
   - battery-light fix
   - headline override
   - B button fallback
   - toast
   - reduced-motion
   ============================================ */

:root {
  /* css-gameboy palette */
  --plate-1: #eae8e4;
  --plate-2: #c0bcb4;
  --plate-3: #b2afb0;
  --plate-4: #9d9b96;
  --plate-5: #656565;
  --plate-deep: #383735;
  --ridge: #8a8883;
  --ridge-hi: #fff;
  --bezel-bg: #73738a;
  --bezel-edge: #656565;
  --bezel-edge-top: rgba(0, 0, 0, 0.7);
  --bezel-hi: rgba(255, 255, 255, 0.4);
  --led-on: #e56e6e;
  --led-on-2: #d93031;
  --led-off-1: #61605d;
  --led-off-2: #43423f;
  --led-off-3: #2a2926;
  --lcd-bg: #9aa13c;
  --lcd-shadow: rgba(0, 0, 0, 0.7);
  --lcd-mid: #8b9444;
  --lcd-dark: #0f1a0a;
  --lcd-key: #9aa13c;
  --font-pixel: "Press Start 2P", monospace;
  --font-mono: "VT323", "Courier New", monospace;
  --sys-outer-1: #9c9893;
  --sys-outer-2: #cfcbc1;
  --sys-text: #6e6b66;
  --speaker-1: #cec9c2;
  --speaker-2: rgba(255, 255, 255, 0.4);
  --speaker-3: rgba(255, 255, 255, 0.6);
  --sys-elev: rgba(0, 0, 0, 0.4);
  --sys-elev-soft: rgba(0, 0, 0, 0.15);
}

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
  -webkit-tap-highlight-color: transparent;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
html { height: 100%; }
body {
  height: 100vh;
  height: 100dvh;
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.offscreen-input {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   GameBoy wrap — fullscreen, no padding.
   Gameboy fills the viewport with independent X/Y scale.
   The original .power-button pokes out at the top — this
   matches the original css-gameby aesthetic on the DMG-01.
   ============================================ */
.gameboy-wrap {
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide my old custom power button — we use the original css-gameby
   .power-button which is part of the shell. */
.gb-power-btn { display: none !important; }

/* Override the original .power-button position (top:-30px) so it
   stays inside the gameboy when stretched to fill the viewport. */
.gameby .power-button,
.power-button {
  top: 10px !important;
  left: 70px !important;
  width: 60px !important;
  height: 30px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  z-index: 10;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.gameby .power-button div,
.power-button div {
  margin: 4px auto 0 !important;
  width: 24px !important;
  height: 10px !important;
  background: linear-gradient(to bottom, #c6c2be 0%, #656565 100%) !important;
  border-radius: 4px 4px 0 0 !important;
  pointer-events: none;
}
body[data-power="on"] .power-button { left: 90px !important; } /* toggle animation */
body[data-power="on"] .power-button div {
  background: linear-gradient(to bottom, #9fff9f 0%, #2c7a2c 100%) !important;
}

/* ============================================
   D-PAD — scale the cross ~1.15x larger and move it 30px
   below the LCD so it never overlaps the screen.
   Original gameby: top:616 left:30.
   With scale(1.15) on a 200x200 box, visual size is 230x230.
   top:646 keeps a clean 24px gap below the LCD bottom.
   ============================================ */
.cross-container {
  transform: scale(1.15) !important;
  transform-origin: center center !important;
  top: 646px !important;
}

/* A/B buttons — scale 1.15x to match the larger d-pad.
   Original gameby: top:658 right:26. */
.buttons-a-b {
  transform: rotate(-25deg) scale(1.15) !important;
  transform-origin: center center !important;
}

/* Hide PHONES (not needed for the skin) */
.phones { display: none !important; }

/* Gameboy (660x1080) — stretch to viewport (independent X/Y scale).
   transform-origin: 0 0 anchors the scale to the top-left so the
   gameboy fills the viewport exactly. */
.gameboy {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  margin: 0 !important;
  width: 660px !important;
  height: 1080px !important;
  transform: scale(var(--scale-x, 1), var(--scale-y, 1)) !important;
  transform-origin: 0 0 !important;
  flex-shrink: 0 !important;
}

/* ============================================
   Front plate — bordes y radius del shell
   ============================================ */
.front-plate {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 120px;
  background-color: var(--plate-1);
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.08) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.6) 0%, transparent 60%);
  box-shadow:
    inset 0 2px 0 0 var(--ridge-hi),
    inset 0 -2px 0 0 var(--plate-4),
    inset 2px 0 0 0 var(--ridge),
    inset -2px 0 0 0 var(--plate-4);
}

/* ============================================
   Brand "VICIN" en la cara del shell
   ============================================ */
.front-plate-head .logo {
  position: absolute;
  top: 504px;
  left: 96px;
  width: 470px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--plate-deep);
  z-index: 2;
  pointer-events: none;
  text-shadow:
    0 1px 0 var(--ridge-hi),
    0 -1px 0 var(--plate-3);
}

/* ============================================
   Screen container + screen — overrides VICIN
   ============================================ */
.screen-container {
  position: absolute;
  box-sizing: border-box;
  top: 60px;
  left: 50%;
  margin-left: -284px;
  width: 568px;
  height: 540px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 76px;
  background-color: var(--bezel-bg);
  border: 2px solid var(--bezel-edge);
  border-top: 2px solid var(--bezel-edge-top);
  box-shadow:
    inset 0 2px 0 0 var(--bezel-hi),
    inset 0 -3px 8px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* "VICIN · COMMUNITY EDITION" headline */
.screen-headline {
  position: absolute;
  width: 512px;
  height: 20px;
  left: 50%;
  margin-left: -256px;
  top: 14px;
}
.screen-headline span {
  display: block;
  text-align: center;
  color: #b8b6af;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 20px;
}
.screen-headline:before, .screen-headline:after { content: none; }

/* Hide the css-gameby label bars (before/after) */
.screen-container .screen-headline:before,
.screen-container .screen-headline:after { display: none !important; }

/* The LCD inside the bezel */
.screen {
  width: calc(100% - 106px);
  height: calc(100% - 60px);
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  box-sizing: border-box;
  position: absolute;
  background-color: var(--lcd-bg);
  overflow: hidden;
  border-radius: 2px;
  z-index: 1;
}
.screen:after {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  box-shadow: inset 4px 6px 12px 2px var(--lcd-shadow);
  pointer-events: none;
}

/* ============================================
   LED — battery indicator light (VICIN ON/OFF status)
   Green when power ON, dark when OFF. Pulses softly.
   ============================================ */
.screen-container .battery-light {
  display: block !important;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lcd-dark);
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.4);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.screen-container .battery-light::before { display: none; }
.screen-container .battery-light::after { display: none; }
.screen-container .battery-light span { display: none; }
body[data-power="on"] .screen-container .battery-light {
  background: #5fff5f;
  box-shadow:
    0 0 8px rgba(95, 255, 95, 0.7),
    0 0 16px rgba(95, 255, 95, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
  animation: led-breathe 2.4s ease-in-out infinite;
}
body[data-power="off"] .screen-container .battery-light {
  background: #1a2a1a;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
}
@keyframes led-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* ============================================
   LCD content — contenido renderizado por handheld.js
   (doubled fonts para accesibilidad)
   ============================================ */
.lcd {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--lcd-bg);
  color: var(--lcd-dark);
  font-family: var(--font-pixel);
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0.1px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lcd[data-state="boot"] {
  animation: lcd-poweron 0.4s steps(2) both;
}
@keyframes lcd-poweron {
  0% { filter: brightness(0.05); }
  50% { filter: brightness(0.4); }
  100% { filter: brightness(1); }
}
.lcd__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.05) 2px,
    rgba(0, 0, 0, 0.05) 3px
  );
  pointer-events: none;
  z-index: 2;
}
.lcd__ghost {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 3;
}
.lcd__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  font-family: var(--font-pixel);
  font-size: 27px;
  color: var(--lcd-dark);
  background: var(--lcd-bg);
  min-height: 28px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--lcd-mid);
}
.lcd__bar--top { border-top: 0; }
.lcd__title {
  flex: 1;
  text-align: center;
  font-weight: bold;
}
.lcd__signal, .lcd__battery { font-size: 24px; }
.gb-loading-dots {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  font-size: 40px;
  color: #0f380f;
  justify-content: center;
}
.gb-loading-dots span {
  animation: gb-dot 1.2s steps(3) infinite;
}
.gb-loading-dots span:nth-child(2) { animation-delay: 0.4s; }
.gb-loading-dots span:nth-child(3) { animation-delay: 0.8s; }
@keyframes gb-dot {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}
.gb-error-detail {
  font-size: 21px;
  color: #b30f42;
  margin-top: 6px;
  text-align: center;
}
.gb-from-mock {
  font-size: 21px;
  color: #306230;
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}
.lcd__program {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  font-family: var(--font-pixel);
  color: var(--lcd-dark);
  font-size: 36px;
  line-height: 1.3;
  overflow: hidden;
  min-height: 0;
}
.lcd__key {
  display: inline-block;
  padding: 2px 6px;
  background: var(--lcd-dark);
  color: var(--lcd-key);
  border-radius: 2px;
  font-size: 21px;
  margin-right: 4px;
}

/* ============================================
   LCD bars — solo el bottom (A/B hints), mas grande
   ============================================ */
.lcd__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  font-family: var(--font-pixel);
  color: var(--lcd-dark);
  background: var(--lcd-bg);
  flex-shrink: 0;
  border-top: 1px solid var(--lcd-mid);
}
.lcd__bar--bottom {
  font-size: 14px;
  padding: 4px 12px;
  min-height: 22px;
  border-top: 1px solid var(--lcd-mid);
  gap: 16px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.05em;
  line-height: 1;
}
.lcd__key {
  display: inline-block;
  padding: 1px 5px;
  background: var(--lcd-dark);
  color: var(--lcd-key);
  border-radius: 2px;
  font-size: 12px;
  margin-right: 4px;
  font-weight: bold;
  line-height: 1.2;
  vertical-align: 1px;
}

/* LCD title — one line at the top of each screen (gameboy-style) */
.lcd__title {
  font-family: var(--font-pixel);
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--lcd-dark);
  border-bottom: 2px solid var(--lcd-mid);
  padding-bottom: 4px;
  margin: 0 0 6px 0;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ============================================
   SELECT/START — repurposed as PUERTA and TIMBRE.
   The 3 child divs of .select/.start are: [icon, label, spacer] in
   gameboy-shell.css absolute coords. We restyle them inline.
   ============================================ */
.select__icon, .start__icon {
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--plate-deep, #383735);
}
.select__icon svg, .start__icon svg { width: 18px; height: 18px; }
.select__label, .start__label {
  font-family: var(--font-pixel);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--plate-deep, #383735);
  text-align: center;
  width: 100%;
  padding: 0 2px;
}

/* Hide the original SELECT/START rotated text labels (gameby-shell
   renders "SELECT" / "START" as :before pseudo elements with a transform).
   We replace with our own icon+label. */
.start:before, .select:before { display: none !important; }

/* ============================================
   Login — numeric keypad (no mobile keyboard)
   Estilo LCD: dark green text on yellow-green bg
   ============================================ */
.gb-code {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 8px 0;
}
.gb-code__slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 44px;
  background: var(--lcd-bg);
  border: 3px solid var(--lcd-dark);
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 40px;
  font-weight: bold;
  color: var(--lcd-dark);
}
.gb-code__slot--active {
  background: var(--lcd-dark);
  color: var(--lcd-bg);
}
.gb-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex: 1;
  margin-top: 8px;
  max-height: 50%;
}
.gb-key {
  padding: 0;
  background: var(--lcd-bg);
  color: var(--lcd-dark);
  border: 3px solid var(--lcd-dark);
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  line-height: 1;
}
.gb-key:active,
.gb-key--active {
  background: var(--lcd-dark);
  color: var(--lcd-bg);
}
.gb-key--clear,
.gb-key--ok {
  font-size: 36px;
}

/* ============================================
   Home screen — solo 3×2 grid (sin PUERTA bar)
   ============================================ */
.gb-home {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

/* 3×2 grid of menu cells — icon above, label below.
   Symmetric: all rows same height, all columns same width,
   cell content centered both ways. */
.gb-home__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  flex: 1;
  align-content: stretch;
  justify-content: stretch;
}
.gb-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 4px;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  position: relative;
  min-height: 0;
  container-type: inline-size;
}
.gb-cell--active {
  background: #0f380f;
  color: #9bbc0f;
}
.gb-cell--active .gb-icon rect { fill: #9bbc0f; }
.gb-icon { width: clamp(36px, 11cqw, 56px); height: clamp(36px, 11cqw, 56px); }
.gb-icon rect { fill: #0f380f; }
.gb-cell__label {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.gb-cell__badge {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 21px;
  padding: 2px 7px;
  background: #0f380f;
  color: #9bbc0f;
  border-radius: 8px;
  font-weight: bold;
  line-height: 1;
  border: 1px solid #306230;
}
.gb-cell--active .gb-cell__badge {
  background: #fffdf8;
  color: #0f380f;
  border-color: #0f380f;
}

/* Keep old menu-item styles for fallback */
.prog--menu { font-size: 36px; gap: 0; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px;
  border-radius: 2px;
  color: var(--lcd-dark);
  position: relative;
  min-height: 44px;
}
.menu-item--active {
  background: var(--lcd-dark);
  color: var(--lcd-bg);
}
.menu-item--active .menu-item__icon rect { fill: var(--lcd-bg); }
.menu-item__cursor {
  width: 18px;
  font-size: 30px;
  flex-shrink: 0;
  animation: cursor-blink 0.8s steps(2) infinite;
  text-align: center;
}
@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.menu-item__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  image-rendering: pixelated;
}
.menu-item__icon rect { fill: var(--lcd-dark); }
.menu-item__label { flex: 1; text-transform: uppercase; }
.menu-item__badge {
  font-size: 24px;
  padding: 2px 6px;
  background: var(--lcd-dark);
  color: var(--lcd-bg);
  border-radius: 2px;
  margin-left: auto;
}
.menu-item--active .menu-item__badge {
  background: var(--lcd-bg);
  color: var(--lcd-dark);
}

/* ============================================
   Detail screen (TIMBRE, ANUNCIOS, etc.)
   ============================================ */
.prog--detail { gap: 6px; }
.detail__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--lcd-mid);
  margin-bottom: 4px;
  font-size: 27px;
}
.detail__head .menu-item__icon rect { fill: var(--lcd-dark); }
.detail__title { font-size: 27px; }
.detail__body {
  font-family: var(--font-mono);
  font-size: 33px;
  line-height: 1.3;
  color: var(--lcd-dark);
  flex: 1;
  overflow: hidden;
  word-break: break-word;
}
.detail__row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed var(--lcd-mid);
  font-size: 30px;
  gap: 8px;
}
.detail__row span:last-child {
  flex-shrink: 0;
  color: var(--lcd-mid);
}
.detail__row--last { border-bottom: 0; }
.detail__row--alert {
  background: var(--lcd-mid);
  padding: 5px 8px;
  margin: 4px -6px;
  border-bottom: 0;
}
.progress {
  height: 12px;
  background: var(--lcd-bg);
  border: 1px solid var(--lcd-dark);
  margin: 6px 0 2px;
  position: relative;
}
.progress__fill {
  position: absolute;
  inset: 0;
  background: var(--lcd-dark);
  transform-origin: left;
  animation: progress-in 600ms steps(20) both;
}
@keyframes progress-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.urgent-banner {
  background: var(--lcd-dark);
  color: var(--lcd-bg);
  padding: 6px 8px;
  margin: 4px -6px;
  font-size: 24px;
  animation: urgent-blink 0.6s steps(2) infinite;
}
@keyframes urgent-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.75; }
}
.urgent-banner .menu-item__icon rect { fill: var(--lcd-bg); }

/* ============================================
   Settings, paused, boot screens
   ============================================ */
.prog--boot {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.prog--boot .prog__title { font-size: 36px; margin-bottom: 4px; }
.prog--boot .prog__sub { font-size: 18px; color: var(--lcd-mid); }
.prog--boot .prog__bar {
  width: 70%;
  height: 12px;
  margin-top: 8px;
  background: var(--lcd-bg);
  border: 1px solid var(--lcd-dark);
  position: relative;
  overflow: hidden;
}
.prog--boot .prog__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lcd-dark);
  transform-origin: left center;
  animation: boot-bar 1.4s steps(20) forwards;
}
@keyframes boot-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.prog--overlay {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(154, 161, 60, 0.85);
}
.prog--overlay .prog__title { font-size: 36px; margin-bottom: 8px; }
.prog--overlay .prog__sub {
  font-size: 18px;
  color: var(--lcd-dark);
  margin-bottom: 4px;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 27px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--lcd-mid);
  font-family: var(--font-pixel);
  width: 100%;
  max-width: 100%;
  color: var(--lcd-dark);
}
.toggle-row:last-child { border-bottom: 0; }
.toggle-row__state {
  font-family: var(--font-mono);
  font-size: 30px;
  padding: 0 4px;
  margin-left: auto;
}
.toggle-row--active {
  background: var(--lcd-dark);
  color: var(--lcd-bg);
}
.toggle-row--active .toggle-row__state { color: var(--lcd-bg); }

/* ============================================
   INSTALL SCREEN — PWA-only gate
   ============================================ */
.prog--install {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 6px;
  text-align: center;
  min-height: 100%;
}
.lcd-install__icon {
  width: 60px;
  height: 60px;
  color: var(--lcd-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lcd-install__icon svg { width: 100%; height: 100%; }
.lcd-install__lead {
  font-family: var(--font-mono);
  font-size: 33px;
  line-height: 1.3;
  color: var(--lcd-dark);
  margin: 0;
}
.lcd-install__hint {
  font-family: var(--font-mono);
  font-size: 27px;
  line-height: 1.3;
  color: var(--lcd-dark);
  margin: 0;
  padding: 6px 4px;
  background: rgba(15, 56, 15, 0.08);
  border: 1px dashed var(--lcd-dark);
}
.lcd-install__small {
  font-family: var(--font-mono);
  font-size: 21px;
  line-height: 1.2;
  color: var(--lcd-dark);
  opacity: 0.7;
  margin: 0;
}
.lcd-install__share {
  display: inline-block;
  font-size: 27px;
  vertical-align: middle;
  border: 1px solid var(--lcd-dark);
  padding: 0 4px;
  margin: 0 2px;
}
.lcd__btn {
  font-family: var(--font-pixel);
  font-size: 21px;
  letter-spacing: 0.1em;
  padding: 12px 16px;
  border: 2px solid var(--lcd-dark);
  background: var(--lcd-dark);
  color: var(--lcd-bg);
  cursor: pointer;
  margin-top: 4px;
  width: 100%;
  max-width: 240px;
  text-align: center;
  transition: transform 80ms ease;
}
.lcd__btn:active { transform: translate(1px, 1px); }
.lcd__btn--primary {
  background: var(--lcd-dark);
  color: var(--lcd-bg);
}

/* ============================================
   Toast + reduced motion
   ============================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(120%);
  background: var(--plate-1);
  color: var(--plate-deep);
  border: 1px solid var(--plate-3);
  padding: 8px 14px;
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 0.1em;
  pointer-events: none;
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   B button — let the original css-gameby PNG show.
   The PNG has the letter "B" rendered in dark blue/green
   matching the A button's style.
   ============================================ */
/* (no override — original gameboy-shell.css .button-b:before applies) */