/* Dedicated Android/iOS and tablet presentation layer. Loaded after app.css. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mobile-topbar-height: 58px;
  --mobile-nav-height: 68px;
  --viewport-height: 100dvh;
}

.mobile-topbar,
.mobile-bottom-nav,
.tablet-nav-rail,
.bottom-sheet-layer,
.pwa-update-banner,
.orientation-guard,
.mobile-game-toolbar { display: none; }

.touch-target { min-width: 44px; min-height: 44px; }

/* Tablet has a dedicated navigation rail instead of desktop dropdown navigation. */
body.device-tablet { padding-left: 84px; }
body.device-tablet .site-header {
  left: 84px;
  grid-template-columns: auto 1fr auto;
}
body.device-tablet .site-header .main-nav,
body.device-tablet .site-header .nav-toggle { display: none !important; }
body.device-tablet .tablet-nav-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 45;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: calc(14px + var(--safe-top)) 8px calc(14px + var(--safe-bottom));
  background: #fff;
  border-right: 1px solid var(--line);
}
.tablet-nav-rail .rail-brand {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
}
.tablet-nav-rail a,
.tablet-nav-rail button {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #475467;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}
.tablet-nav-rail a.active,
.tablet-nav-rail a:active,
.tablet-nav-rail button:active { background: #eef2f7; color: var(--primary); border-color: #dfe5ed; }
.tablet-nav-rail .rail-icon { font-size: 21px; line-height: 1; }
body.device-tablet .page-shell { width: min(1180px, calc(100% - 32px)); }
body.device-tablet .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.device-tablet .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.device-tablet .hero { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }
body.device-tablet.orientation-portrait .hero,
body.device-tablet.orientation-portrait .split-layout,
body.device-tablet.orientation-portrait .room-layout { grid-template-columns: 1fr; }
body.device-tablet.orientation-landscape .game-setup { grid-template-columns: minmax(0, 1fr) 300px; }
body.device-tablet.orientation-portrait .game-setup { grid-template-columns: 1fr; }

/* Shared bottom sheet behaviour for Android, iOS and tablet. */
.bottom-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.bottom-sheet-layer.open { display: block; pointer-events: auto; }
.bottom-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(17, 24, 39, .34);
}
.bottom-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(82vh, 720px);
  overflow: auto;
  padding: 8px max(16px, var(--safe-right)) calc(18px + var(--safe-bottom)) max(16px, var(--safe-left));
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .12);
  transform: translateY(105%);
  transition: transform .22s ease;
}
.bottom-sheet-layer.open .bottom-sheet.active { transform: translateY(0); }
.bottom-sheet-handle { width: 44px; height: 4px; margin: 2px auto 14px; border-radius: 99px; background: #cbd5e1; }
.bottom-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bottom-sheet-header h2 { margin: 0; font-size: 20px; }
.sheet-close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 22px; }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sheet-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 740;
}
.sheet-link:active { background: #f3f5f7; }
.sheet-link span:first-child { font-size: 22px; }
body.sheet-open { overflow: hidden; }

/* Dedicated phone UI. The desktop header/navigation are replaced, not merely scaled. */
body.device-mobile {
  min-height: var(--viewport-height);
  padding-top: calc(var(--mobile-topbar-height) + var(--safe-top));
  padding-bottom: calc(var(--mobile-nav-height) + var(--safe-bottom));
  background: #f3f5f7;
}
body.device-mobile .site-header { display: none; }
body.device-mobile .mobile-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--mobile-topbar-height) + var(--safe-top));
  padding: calc(8px + var(--safe-top)) max(12px, var(--safe-right)) 8px max(12px, var(--safe-left));
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.mobile-topbar .mobile-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.mobile-topbar .mobile-brand .brand-mark { width: 38px; height: 38px; font-size: 13px; border-radius: 8px; }
.mobile-topbar .mobile-brand strong { display: block; font-size: 15px; }
.mobile-topbar .mobile-brand small { display: block; color: var(--muted); font-size: 10px; }
.mobile-topbar-actions { display: flex; gap: 6px; }
.mobile-icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 19px;
}
body.device-mobile .mobile-bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 55;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: calc(var(--mobile-nav-height) + var(--safe-bottom));
  padding: 5px max(6px, var(--safe-right)) calc(5px + var(--safe-bottom)) max(6px, var(--safe-left));
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -3px 12px rgba(15, 23, 42, .06);
}
.mobile-bottom-nav a,
.mobile-bottom-nav button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  padding: 3px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667085;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
}
.mobile-bottom-nav .nav-icon { font-size: 21px; line-height: 1; }
.mobile-bottom-nav a.active,
.mobile-bottom-nav button.active,
.mobile-bottom-nav a:active,
.mobile-bottom-nav button:active { color: var(--primary); background: #eef2f7; }
body.device-mobile .page-shell {
  width: 100%;
  min-height: calc(var(--viewport-height) - var(--mobile-topbar-height) - var(--mobile-nav-height));
  padding: 14px 12px 22px;
}
body.device-mobile .site-footer { display: none; }
body.device-mobile h1 { font-size: clamp(27px, 8vw, 38px); }
body.device-mobile h2 { font-size: clamp(20px, 6vw, 27px); }
body.device-mobile .hero { display: block; margin-bottom: 16px; }
body.device-mobile .hero-main {
  min-height: 0;
  padding: 22px 18px;
  border-left-width: 4px;
  border-radius: 8px;
}
body.device-mobile .hero-main p { font-size: 14px; }
body.device-mobile .hero-characters { height: 74px; margin-top: 18px; overflow: hidden; }
body.device-mobile .character-bubble { width: 58px; height: 58px; }
body.device-mobile .character-bubble:nth-child(2) { width: 68px; height: 68px; }
body.device-mobile .character-bubble:nth-child(4) { width: 64px; height: 64px; }
body.device-mobile .hero-side { margin-top: 12px; grid-template-columns: 1fr 1fr; gap: 10px; }
body.device-mobile .quick-card { padding: 14px; }
body.device-mobile .quick-card p { display: none; }
body.device-mobile .quick-card .btn { width: 100%; min-height: 44px; padding-inline: 8px; font-size: 12px; }
body.device-mobile .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.device-mobile .stat-card { padding: 13px; }
body.device-mobile .stat-card strong { font-size: 21px; }
body.device-mobile .section-heading { margin-bottom: 10px; }
body.device-mobile .card-grid,
body.device-mobile .mode-grid,
body.device-mobile .character-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(78vw, 290px);
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  padding: 2px 1px 10px;
  scrollbar-width: none;
}
body.device-mobile .character-grid { grid-auto-columns: minmax(42vw, 160px); }
body.device-mobile .card-grid::-webkit-scrollbar,
body.device-mobile .mode-grid::-webkit-scrollbar,
body.device-mobile .character-grid::-webkit-scrollbar { display: none; }
body.device-mobile .card,
body.device-mobile .mode-card,
body.device-mobile .character-card { scroll-snap-align: start; }
body.device-mobile .game-card { min-height: 194px; }
body.device-mobile .panel { padding: 16px; border-radius: 8px; }
body.device-mobile .split-layout,
body.device-mobile .room-layout,
body.device-mobile .auth-layout { display: block; }
body.device-mobile .split-layout > aside,
body.device-mobile .room-layout > aside { margin-top: 12px; }
body.device-mobile .form-card { padding: 20px 16px; }
body.device-mobile input,
body.device-mobile select,
body.device-mobile textarea,
body.device-mobile .btn { min-height: 44px; }
body.device-mobile .btn:hover,
body.device-mobile .mode-card:hover { transform: none; }
body.device-mobile .table-wrap { margin-inline: -16px; border-inline: 0; border-radius: 0; }
body.device-mobile .player-slots { grid-template-columns: 1fr; }
body.device-mobile .room-code { font-size: 20px; }

/* Game presentation takes over the viewport on phones. */
body.device-mobile.game-active {
  overflow: hidden;
  padding: 0;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body.device-mobile.game-active .mobile-topbar,
body.device-mobile.game-active .mobile-bottom-nav,
body.device-mobile.game-active .site-footer,
body.device-mobile.game-active .game-page > .section-heading,
body.device-mobile.game-active .game-setup > aside { display: none !important; }
body.device-mobile.game-active .page-shell { width: 100%; height: var(--viewport-height); min-height: 0; padding: 0; }
body.device-mobile.game-active .game-page,
body.device-mobile.game-active .game-setup,
body.device-mobile.game-active .game-stage-wrap { width: 100%; height: 100%; min-height: 0; margin: 0; }
body.device-mobile.game-active .game-setup { display: block; }
body.device-mobile.game-active .game-stage-wrap { padding: 0; border: 0; border-radius: 0; background: #eef2f6; }
body.device-mobile.game-active .game-stage {
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: #f8fbef;
}
body.device-mobile.game-active .game-hud {
  position: absolute;
  z-index: 12;
  inset: calc(8px + var(--safe-top)) max(8px, var(--safe-right)) auto max(8px, var(--safe-left));
  margin: 0;
  pointer-events: none;
}
body.device-mobile.game-active .score-strip { max-width: 68vw; flex-wrap: nowrap; overflow: hidden; }
body.device-mobile.game-active .score-chip { background: rgba(255, 255, 255, .9); }
body.device-mobile.game-active .hud-timer { min-width: 66px; padding: 5px 8px; background: rgba(255, 255, 255, .94); }
body.device-mobile.game-active .game-overlay { inset: 0; border-radius: 0; padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left)); }
body.device-mobile.game-active .overlay-card { max-height: 88vh; overflow: auto; padding: 22px 16px; }
body.device-mobile.game-active .touch-controls { display: block; }
body.device-mobile.game-active .mobile-game-toolbar {
  position: absolute;
  z-index: 15;
  right: max(8px, var(--safe-right));
  top: calc(56px + var(--safe-top));
  display: flex;
  gap: 7px;
}
.mobile-game-toolbar button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .88);
  font-size: 18px;
}

/* Analog touch controls with independent movable clusters. */
.touch-controls { --control-scale: 1; --control-opacity: .92; }
.control-cluster {
  position: absolute;
  pointer-events: auto;
  opacity: var(--control-opacity);
  transform: translate(var(--control-x, 0px), var(--control-y, 0px)) scale(var(--control-scale));
  transform-origin: center;
}
.joystick-cluster { left: max(22px, calc(var(--safe-left) + 12px)); bottom: max(22px, calc(var(--safe-bottom) + 12px)); width: 150px; height: 150px; }
.action-cluster { right: max(24px, calc(var(--safe-right) + 14px)); bottom: max(28px, calc(var(--safe-bottom) + 18px)); width: 150px; height: 120px; }
.virtual-joystick {
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(30, 58, 138, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.22);
  touch-action: none;
}
.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(30, 58, 138, .88);
  box-shadow: 0 2px 7px rgba(15, 23, 42, .22);
  transform: translate(0, 0);
}
.control-drag-handle {
  position: absolute;
  z-index: 3;
  top: -5px;
  left: 50%;
  display: none;
  min-width: 44px;
  min-height: 28px;
  transform: translateX(-50%);
  border: 1px dashed #64748b;
  border-radius: 6px;
  background: #fff;
  color: #475467;
  font-size: 11px;
  font-weight: 800;
  touch-action: none;
}
.touch-controls.editing .control-drag-handle { display: block; }
.touch-controls.editing .control-cluster { outline: 2px dashed rgba(30,58,138,.55); outline-offset: 5px; }
.touch-action,
.touch-secondary {
  position: absolute;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  touch-action: none;
  box-shadow: 0 2px 7px rgba(15,23,42,.2);
}
.touch-action { right: 0; bottom: 0; width: 82px; height: 82px; background: rgba(234, 88, 12, .92); }
.touch-secondary { left: 3px; top: 0; width: 58px; height: 58px; background: rgba(30, 58, 138, .9); }
.touch-action.pressed,
.touch-secondary.pressed { transform: scale(.93); filter: brightness(.92); }

.control-settings { display: grid; gap: 14px; }
.control-settings label { margin: 0; }
.control-settings .range-row { display: grid; grid-template-columns: 100px 1fr 48px; align-items: center; gap: 9px; }
.control-settings input[type="range"] { min-height: 44px; padding: 0; }

.orientation-guard {
  position: fixed;
  inset: 0;
  z-index: 140;
  place-items: center;
  padding: calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));
  background: #fff;
  text-align: center;
}
.orientation-guard .rotate-icon { display: block; font-size: 58px; margin-bottom: 14px; animation: rotate-device 1.6s ease-in-out infinite; }
@keyframes rotate-device { 50% { transform: rotate(90deg); } }
body.device-mobile.game-active.orientation-portrait .orientation-guard { display: grid; }

.pwa-update-banner {
  position: fixed;
  z-index: 160;
  right: max(12px, var(--safe-right));
  bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + 12px);
  left: max(12px, var(--safe-left));
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,.16);
}
.pwa-update-banner.show { display: flex; }
.pwa-update-banner button { min-height: 44px; }

/* iOS adjustments: more room around the Home indicator and native-looking sheets. */
body.platform-ios.device-mobile .mobile-bottom-nav { padding-bottom: max(7px, var(--safe-bottom)); }
body.platform-ios .bottom-sheet { padding-bottom: calc(20px + var(--safe-bottom)); }
body.platform-ios.game-active .action-cluster { bottom: calc(24px + var(--safe-bottom)); }

/* Compact phones in landscape. */
@media (max-height: 430px) and (orientation: landscape) {
  body.device-mobile.game-active .score-chip { padding: 3px 6px; font-size: 10px; }
  body.device-mobile.game-active .hud-timer { font-size: 12px; }
  .joystick-cluster { width: 132px; height: 132px; }
  .action-cluster { width: 136px; height: 105px; }
  .touch-action { width: 72px; height: 72px; }
  .touch-secondary { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-sheet, .character-bubble, .orientation-guard .rotate-icon { transition: none; animation: none; }
}

/* Keep controls hidden until the match has actually started. */
body.device-mobile:not(.game-active) .touch-controls,
body.device-tablet:not(.game-active) .touch-controls { display: none !important; }
body.device-tablet.game-active .touch-controls { display: block; }
body.game-active { overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
.game-stage-wrap:fullscreen,
.game-stage-wrap:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #eef2f6;
}
.game-stage-wrap:fullscreen .game-stage,
.game-stage-wrap:-webkit-full-screen .game-stage {
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}
.game-stage-wrap:fullscreen .game-hud,
.game-stage-wrap:-webkit-full-screen .game-hud {
  position: absolute;
  z-index: 12;
  inset: calc(8px + var(--safe-top)) max(8px, var(--safe-right)) auto max(8px, var(--safe-left));
  margin: 0;
  pointer-events: none;
}
.game-stage-wrap:fullscreen .touch-controls,
.game-stage-wrap:-webkit-full-screen .touch-controls,
.game-stage-wrap:fullscreen .mobile-game-toolbar,
.game-stage-wrap:-webkit-full-screen .mobile-game-toolbar { display: block; }
.game-stage-wrap:fullscreen .game-overlay,
.game-stage-wrap:-webkit-full-screen .game-overlay { inset: 0; border-radius: 0; }
.game-stage-wrap:fullscreen .mobile-game-toolbar,
.game-stage-wrap:-webkit-full-screen .mobile-game-toolbar { display: flex; }
body.device-mobile .game-overlay { place-items: end center; }
body.device-mobile .overlay-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px max(16px, var(--safe-right)) calc(22px + var(--safe-bottom)) max(16px, var(--safe-left));
  border-radius: 14px 14px 0 0;
  border-bottom: 0;
}
.install-instructions {
  display: grid;
  gap: 10px;
  padding: 4px 2px 8px;
  color: var(--ink);
  line-height: 1.55;
}
.install-instructions p { margin: 0; }

/* Fullscreen mobile: native Fullscreen API plus an iOS-safe viewport fallback. */
body.fullscreen-active.game-active,
body.pseudo-fullscreen.game-active {
  width: 100%;
  height: var(--viewport-height);
  overflow: hidden;
  padding: 0 !important;
  background: #eef2f6;
}

body.fullscreen-active.game-active .site-header,
body.fullscreen-active.game-active .mobile-topbar,
body.fullscreen-active.game-active .mobile-bottom-nav,
body.fullscreen-active.game-active .tablet-nav-rail,
body.fullscreen-active.game-active .site-footer,
body.pseudo-fullscreen.game-active .site-header,
body.pseudo-fullscreen.game-active .mobile-topbar,
body.pseudo-fullscreen.game-active .mobile-bottom-nav,
body.pseudo-fullscreen.game-active .tablet-nav-rail,
body.pseudo-fullscreen.game-active .site-footer { display: none !important; }

body.fullscreen-active.game-active .page-shell,
body.pseudo-fullscreen.game-active .page-shell {
  width: 100%;
  height: var(--viewport-height);
  min-height: 0;
  padding: 0;
  margin: 0;
}

body.fullscreen-active.game-active .game-page,
body.fullscreen-active.game-active .game-setup,
body.fullscreen-active.game-active .game-stage-wrap,
body.pseudo-fullscreen.game-active .game-page,
body.pseudo-fullscreen.game-active .game-setup,
body.pseudo-fullscreen.game-active .game-stage-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}

.game-stage-wrap.is-pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 300;
  width: var(--viewport-width, 100vw) !important;
  height: var(--viewport-height, 100dvh) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #eef2f6;
}

body.fullscreen-active.game-active .game-stage-wrap,
.game-stage-wrap.is-pseudo-fullscreen {
  display: block;
}

body.fullscreen-active.game-active .game-stage,
.game-stage-wrap.is-pseudo-fullscreen .game-stage {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.fullscreen-active.game-active .game-hud,
.game-stage-wrap.is-pseudo-fullscreen .game-hud {
  position: absolute;
  z-index: 312;
  inset: calc(8px + var(--safe-top)) max(8px, var(--safe-right)) auto max(8px, var(--safe-left));
  margin: 0;
  pointer-events: none;
}

body.fullscreen-active.game-active .touch-controls,
body.fullscreen-active.game-active .mobile-game-toolbar,
.game-stage-wrap.is-pseudo-fullscreen .touch-controls,
.game-stage-wrap.is-pseudo-fullscreen .mobile-game-toolbar { display: block; }

body.fullscreen-active.game-active .mobile-game-toolbar,
.game-stage-wrap.is-pseudo-fullscreen .mobile-game-toolbar { display: flex; }

body.fullscreen-active.game-active .game-overlay,
.game-stage-wrap.is-pseudo-fullscreen .game-overlay {
  inset: 0;
  border-radius: 0;
}

body.fullscreen-active .bottom-sheet-layer,
body.pseudo-fullscreen .bottom-sheet-layer { z-index: 390; }
body.fullscreen-active .orientation-guard,
body.pseudo-fullscreen .orientation-guard { z-index: 380; }
body.fullscreen-active .pwa-update-banner,
body.pseudo-fullscreen .pwa-update-banner { z-index: 400; }

.mobile-game-toolbar button[aria-pressed="true"] {
  border-color: var(--primary);
  background: #eef2f7;
  color: var(--primary);
}

/* Install app presentation shared by Android, iOS and desktop PWA browsers. */
.install-app-button { white-space: nowrap; }
.install-sheet { max-width: 560px; margin-inline: auto; }
.install-app-summary {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.install-app-summary img { display: block; width: 72px; height: 72px; border-radius: 14px; }
.install-app-summary strong { display: block; margin-bottom: 4px; font-size: 16px; }
.install-app-summary p { margin: 0; color: var(--muted); line-height: 1.45; }
.install-steps { display: grid; gap: 8px; margin: 16px 0; padding-left: 24px; line-height: 1.5; }
.install-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.install-benefits span {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}
.install-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
body.display-standalone [data-pwa-install],
body.display-standalone [data-install-only] { display: none !important; }

@media (max-width: 560px) {
  .install-benefits { grid-template-columns: 1fr; }
  .install-benefits span { place-items: center start; text-align: left; }
}

/* =====================================================
   v1.4 Mobile/Tablet game-style skin overrides
   ===================================================== */
body.theme-game-ui.device-mobile,
body.theme-game-ui.device-tablet {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.78), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #9fd3ff 0%, #d8efff 24%, #eef7ff 54%, #fcfdff 100%);
}
body.theme-game-ui.device-tablet .tablet-nav-rail {
  background: linear-gradient(180deg, #2141a2, #183083);
  border-right: 3px solid #ffcf58;
  box-shadow: 10px 0 24px rgba(19,31,74,.18);
}
.theme-game-ui .tablet-nav-rail .rail-brand {
  border-radius: 16px;
  background: linear-gradient(180deg, #ffd86f, #ff9d19);
  color: #693600;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 rgba(101,65,0,.18);
}
.theme-game-ui .tablet-nav-rail a,
.theme-game-ui .tablet-nav-rail button {
  color: rgba(255,255,255,.88);
  border-radius: 16px;
}
.theme-game-ui .tablet-nav-rail a.active,
.theme-game-ui .tablet-nav-rail a:active,
.theme-game-ui .tablet-nav-rail button:active {
  color: #183a9b;
  background: linear-gradient(180deg, #fff6ce, #ffd26d);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.52), 0 4px 0 rgba(123,81,0,.18);
}
.theme-game-ui .bottom-sheet-backdrop { background: rgba(13, 26, 70, .48); }
.theme-game-ui .bottom-sheet {
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  border: 2px solid #d5e1f7;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -14px 32px rgba(18,35,93,.22);
}
.theme-game-ui .bottom-sheet-handle { background: linear-gradient(90deg, #63d3f0, #ffc94d); }
.theme-game-ui .sheet-close {
  border: 2px solid #d1def7;
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  color: #2040a2;
}
.theme-game-ui .sheet-link {
  min-height: 60px;
  border: 2px solid #d9e5fa;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  color: #203d9d;
  box-shadow: 0 10px 18px rgba(30,58,138,.08);
}
.theme-game-ui .sheet-link:active { background: #eef4ff; }

body.theme-game-ui.device-mobile .mobile-topbar {
  background: linear-gradient(180deg, rgba(35,66,166,.98), rgba(24,48,131,.98));
  border-bottom: 3px solid #ffcf58;
  box-shadow: 0 10px 24px rgba(25,46,95,.18);
}
.theme-game-ui .mobile-topbar .mobile-brand,
.theme-game-ui .mobile-topbar .mobile-brand small { color: #fff; }
.theme-game-ui .mobile-topbar .mobile-brand .brand-mark {
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd86f, #ff9d19);
  color: #693600;
}
.theme-game-ui .mobile-icon-button {
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  color: #fff;
}
body.theme-game-ui.device-mobile .mobile-bottom-nav {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,246,255,.98));
  border-top: 2px solid #d8e4f9;
  box-shadow: 0 -10px 24px rgba(25,46,95,.12);
}
.theme-game-ui .mobile-bottom-nav a,
.theme-game-ui .mobile-bottom-nav button {
  border-radius: 16px;
  color: #667596;
  font-weight: 800;
}
.theme-game-ui .mobile-bottom-nav a.active,
.theme-game-ui .mobile-bottom-nav button.active,
.theme-game-ui .mobile-bottom-nav a:active,
.theme-game-ui .mobile-bottom-nav button:active {
  color: #183b9b;
  background: linear-gradient(180deg, #fff6ce, #ffd26d);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.52), 0 4px 0 rgba(123,81,0,.14);
}
body.theme-game-ui.device-mobile .hero-main,
body.theme-game-ui.device-mobile .quick-card,
body.theme-game-ui.device-mobile .panel,
body.theme-game-ui.device-mobile .card,
body.theme-game-ui.device-mobile .mode-card,
body.theme-game-ui.device-mobile .character-card,
body.theme-game-ui.device-mobile .stat-card { border-radius: 20px; }
body.theme-game-ui.device-mobile .card-grid,
body.theme-game-ui.device-mobile .mode-grid,
body.theme-game-ui.device-mobile .character-grid { padding-bottom: 14px; }
body.theme-game-ui.device-mobile .page-shell { padding: 16px 12px 24px; }
body.theme-game-ui.device-mobile .panel,
body.theme-game-ui.device-mobile .quick-card,
body.theme-game-ui.device-mobile .card,
body.theme-game-ui.device-mobile .mode-card { box-shadow: 0 14px 28px rgba(25,46,95,.12); }

body.theme-game-ui.device-mobile.game-active .game-stage-wrap,
body.theme-game-ui.device-tablet.game-active .game-stage-wrap,
body.theme-game-ui.fullscreen-active.game-active .game-stage-wrap,
body.theme-game-ui.pseudo-fullscreen.game-active .game-stage-wrap,
.theme-game-ui .game-stage-wrap.is-pseudo-fullscreen {
  background: linear-gradient(180deg, #1c317c, #12235d);
}
body.theme-game-ui.device-mobile.game-active .score-chip,
body.theme-game-ui.device-mobile.game-active .hud-timer,
.theme-game-ui .game-stage-wrap.is-pseudo-fullscreen .score-chip,
.theme-game-ui .game-stage-wrap.is-pseudo-fullscreen .hud-timer {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.theme-game-ui .mobile-game-toolbar button {
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  color: #fff;
}
.theme-game-ui .mobile-game-toolbar button[aria-pressed="true"] {
  border-color: #ffd36f;
  background: rgba(255,211,111,.2);
  color: #fff7d4;
}
.theme-game-ui .virtual-joystick {
  border: 3px solid rgba(255,255,255,.42);
  background: rgba(20,40,108,.18);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.08), 0 10px 18px rgba(15,23,42,.24);
}
.theme-game-ui .joystick-knob {
  border: 3px solid rgba(255,255,255,.92);
  background: linear-gradient(180deg, #4d7aff, #1c41b5);
}
.theme-game-ui .touch-action {
  background: linear-gradient(180deg, #ffd966, #f26b23);
  color: #fff9e5;
}
.theme-game-ui .touch-secondary {
  background: linear-gradient(180deg, #63d3f0, #2a65d3);
}
.theme-game-ui .control-drag-handle {
  border: 2px dashed #fff4cc;
  border-radius: 10px;
  background: rgba(20,40,108,.8);
  color: #fff;
}
.theme-game-ui .pwa-update-banner {
  border: 2px solid #d7e2f8;
  border-left: 6px solid #ffbf42;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 16px 26px rgba(25,46,95,.18);
}
.theme-game-ui .install-app-summary {
  border: 2px solid #d8e4f8;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.theme-game-ui .install-benefits span {
  border: 2px solid #d8e4f8;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f6f9ff);
  color: #203d9d;
}
.theme-game-ui .orientation-guard {
  background: linear-gradient(180deg, rgba(20,40,108,.98), rgba(16,31,82,.98));
  color: #fff;
}
.theme-game-ui .orientation-guard p { color: rgba(255,255,255,.84); }