/* This host gets out of the reconstructed game's way. All game artwork stays private. */
#app[data-screen="nativeGate"] #nativeGate { display: flex; }
#nativeGate {
  align-items: center; justify-content: center;
  padding: calc(var(--space-5) + var(--safe-top)) calc(var(--space-5) + var(--safe-right))
    calc(var(--space-5) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left));
  overflow-y: auto;
  background: var(--launch-bg);
  color: var(--launch-phosphor);
  --signal: var(--launch-accent);
  --signal-ink: var(--launch-dark);
  --ink-muted: var(--launch-muted);
}
.native-gate { width: min(720px, 100%); display: grid; justify-items: center; gap: var(--space-4); margin: auto; }
.native-landing {
  width: min(1128px, 100%); margin: auto; display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 360px); gap: var(--space-7); align-items: center;
}
.native-leaderboard {
  min-width: 0; width: 100%; padding: var(--space-5); border: var(--border) solid var(--launch-glass-edge);
  border-radius: var(--radius-lg); background: linear-gradient(var(--launch-dark), var(--launch-glass));
  box-shadow: var(--launch-shadow); color: var(--launch-phosphor);
  --btn-bg: var(--launch-glass); --btn-ink: var(--launch-phosphor); --btn-border: var(--launch-glass-edge);
  --btn-hover-bg: var(--launch-dark); --focus: 0 0 0 2px var(--launch-glass), 0 0 0 4px var(--launch-accent);
}
.native-leaderboard-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.native-leaderboard-header .eyebrow { margin-bottom: var(--space-2); font-size: .65rem; color: var(--launch-accent); }
.native-leaderboard h2 { margin: 0; font: 600 2rem/1 var(--tv-font); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.native-leaderboard .btn { flex: none; padding-inline: var(--space-3); font-size: .8rem; background-image: none; box-shadow: none; }
.native-leaderboard .btn:focus-visible { box-shadow: var(--focus); }
.native-leaderboard .btn:active:not(:disabled) { transform: scale(.96); }
.native-leaderboard-status { margin: var(--space-4) 0; color: var(--launch-muted); font-size: .85rem; text-wrap: pretty; }
.native-leaderboard:has(#nativeLeaderboardExpand[aria-expanded="true"]) #nativeLeaderboardScores {
  max-height: min(26rem, 60svh); overflow-y: auto; overscroll-behavior: contain;
  padding-inline-end: var(--space-2);
}
#nativeLeaderboardScores:focus-visible { outline: none; box-shadow: var(--focus); }
.native-leaderboard:has(#nativeLeaderboardExpand[aria-expanded="true"]) th {
  position: sticky; top: 0; z-index: 1; background: var(--launch-dark);
}
.native-leaderboard table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.native-leaderboard :is(th, td) { padding: var(--space-3) var(--space-2); border-bottom: var(--border) solid var(--launch-glass-edge); text-align: left; }
.native-leaderboard th { color: var(--launch-muted); font: 500 .65rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.native-leaderboard :is(th, td):first-child { width: 2.75rem; padding-left: 0; color: var(--launch-accent); }
.native-leaderboard :is(th, td):last-child { width: 6.5rem; padding-right: 0; text-align: right; }
.native-leaderboard td { font-size: .875rem; overflow-wrap: anywhere; }
.native-leaderboard td:last-child { font-family: var(--font-mono); font-size: .825rem; white-space: nowrap; }
.native-leaderboard tr:first-child td { font-weight: 650; }
.native-leaderboard-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-3); min-height: var(--control-height-sm); }
.native-leaderboard-footer span { color: var(--launch-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
@media (max-width: 1159px) {
  .native-landing { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-6); }
  .native-leaderboard { width: min(600px, 100%); }
}
@media (max-width: 420px) {
  .native-leaderboard { padding: var(--space-4); }
}
.native-gate p { margin: 0; text-wrap: pretty; }
.native-television { position: relative; width: 100%; }
.native-television, #app[data-native="yes"] #loading {
  --tv-case: var(--launch-case);
  --tv-trim: var(--launch-trim);
  --tv-edge: var(--launch-edge);
  --tv-dark: var(--launch-dark);
  --tv-screen: var(--launch-glass);
  --tv-glass-edge: var(--launch-glass-edge);
  --tv-ink: var(--launch-phosphor);
  --btn-primary-bg: var(--launch-action);
  --btn-primary-ink: var(--launch-phosphor);
  --btn-primary-border: var(--launch-action-edge);
  --btn-primary-shadow: var(--launch-button-shadow);
  --btn-hover-bg: var(--launch-action-hover);
  --focus: 0 0 0 2px var(--launch-glass), 0 0 0 4px var(--launch-phosphor);
}
#app[data-native="yes"] :is(.native-television, #loading) .television { max-width: none; animation: none; }
/* The blank, original hardware plate leaves the logo, action and status live.
   Its opaque matte covers the SVG; a missed art download retains that cabinet. */
#app[data-native="yes"] :is(.native-television, #loading) .television::before {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: var(--launch-cabinet-art) center / contain no-repeat;
  /* Fade only the empty canvas rim; the photographed cabinet stays intact. */
  mask-image: linear-gradient(to right, transparent, var(--launch-phosphor) 1%, var(--launch-phosphor) 99%, transparent),
    linear-gradient(to bottom, transparent, var(--launch-phosphor) 1%, var(--launch-phosphor) 99%, transparent);
  mask-composite: intersect;
}
#app[data-native="yes"] :is(.native-television, #loading) .television::after {
  inset: auto; left: 86.7%; top: 88.7%; width: 1.35%; height: auto; aspect-ratio: 1;
  border-radius: var(--radius-chip); z-index: 2; opacity: 1; mix-blend-mode: normal;
  background: var(--launch-phosphor); box-shadow: var(--launch-power-shadow);
}
#app[data-native="yes"] :is(.native-television, #loading) .tv-case { fill: var(--tv-case-material); }
#app[data-native="yes"] :is(.native-television, #loading) .tv-trim { fill: var(--tv-trim-material); }
#app[data-native="yes"] :is(.native-television, #loading) .tv-bezel { fill: var(--tv-bezel-material); }
#app[data-native="yes"] :is(.native-television, #loading) .tv-glass { fill: var(--tv-glass-material); }
#app[data-native="yes"] :is(.native-television, #loading) .tv-material-reflection { fill: var(--tv-reflection-material); pointer-events: none; }
#app[data-native="yes"] :is(.native-television, #loading) .tv-reflection { stroke-width: 2; stroke-opacity: .24; }
#app[data-native="yes"] :is(.native-television, #loading) .tv-caption { display: none; }
#app[data-native="yes"] :is(.native-television, #loading) .tv-program { inset: 17% 15% 43%; z-index: 2; animation: none; }
#app[data-native="yes"] :is(.native-television, #loading) .tv-wordmark { font-size: 13cqw; }
#app[data-native="yes"] :is(.native-television, #loading) .tv-name { background: var(--launch-accent); color: var(--launch-dark); }
#app[data-native="yes"] :is(.native-television, #loading) .tv-screen-surface { display: none; }
.native-television .native-start {
  position: absolute; z-index: 1; top: 63%; left: 27%; width: 46%;
  min-height: var(--control-height-lg); padding-inline: var(--space-4);
  border-radius: var(--radius-sm); font-size: clamp(1.15rem, 3vw, 1.65rem);
  text-transform: uppercase; letter-spacing: .06em;
  background-image: none;
}
.native-start svg { width: 18px; height: 18px; flex: none; }
#nativePower { background: linear-gradient(var(--launch-action-lit), var(--launch-action) 28%, var(--launch-action-shade)); color: var(--launch-phosphor); border-color: var(--launch-action-edge); box-shadow: var(--launch-button-shadow); }
#nativePower:hover:not(:disabled) { background: linear-gradient(var(--launch-action-lit), var(--launch-action-hover) 28%, var(--launch-action)); }
#nativePower:focus-visible { box-shadow: var(--focus), var(--launch-button-shadow); }
#nativePower:disabled { background: var(--launch-glass); color: var(--launch-muted); border-color: var(--launch-glass-edge); box-shadow: none; }
.native-gate-message { max-width: 48ch; text-align: center; font-size: 1rem; }
.native-gate-message:empty { display: none; }
.native-local-game:not([hidden]) { width: min(440px, 100%); display: grid; gap: var(--space-3); }
.native-credit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--space-5); }
.native-credit a {
  min-height: var(--control-height-sm); display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--launch-muted); text-decoration: none; font-size: .95rem;
  transition: color .15s var(--ease);
}
.native-credit strong { font-weight: 600; color: var(--launch-phosphor); }
.native-credit svg { width: 13px; height: 13px; }
.native-credit a:hover { color: var(--launch-phosphor); text-decoration: underline; text-decoration-color: currentColor; }
.native-credit a:focus-visible { box-shadow: 0 0 0 2px var(--launch-bg), 0 0 0 4px var(--launch-phosphor); }
@media (max-width: 420px) {
  #nativeGate { padding-inline: calc(var(--space-4) + var(--safe-left)) calc(var(--space-4) + var(--safe-right)); }
  .native-television .native-start { top: 61%; left: 24%; width: 52%; min-height: var(--control-height); }
  .native-credit { column-gap: var(--space-4); }
  .native-credit a { font-size: .875rem; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .native-gate { width: min(440px, calc((100svh - 108px - var(--safe-top) - var(--safe-bottom)) * 1.28), 100%); gap: var(--space-1); }
  .native-television .native-start { top: 61%; left: 21%; width: 58%; min-height: var(--control-height); font-size: 1.15rem; }
}
@media (max-height: 360px) and (orientation: landscape) {
  #app[data-native="yes"] :is(.native-television, #loading) .tv-program { inset: 14% 15% 48%; }
  #app[data-native="yes"] :is(.native-television, #loading) .tv-wordmark { font-size: 12cqw; }
  .native-television .native-start { top: 56%; }
}
#app[data-native="yes"] :is(.hud-meta, .hud-hint, #muteButton) { display: none; }
#app[data-native="yes"] #play:not(.touch-enabled) .hud { display: none; }
#app[data-native="yes"] #play:has(#loading:not([hidden])) :is(.hud, .touch-controls) { visibility: hidden; }
#app[data-native="yes"] #loading {
  z-index: 6; gap: 0; padding: var(--safe-top) var(--safe-right) calc(var(--safe-bottom) + 60px) var(--safe-left);
  background: var(--launch-bg);
  --signal: var(--launch-accent);
}
#app[data-native="yes"] #loading [data-television] { display: block; grid-area: 1 / 1; width: min(720px, calc(100vw - 48px - var(--safe-left) - var(--safe-right))); }
#app[data-native="yes"] #loading .television--compact { width: 100%; }
#app[data-native="yes"] #loadingText {
  position: relative; z-index: 1;
  grid-area: 1 / 1; align-self: start; justify-self: center; margin-top: 49.2%; width: 68%;
  color: var(--launch-phosphor); text-align: center;
  font: 600 clamp(.875rem, 2.4vw, 1.2rem)/1.4 var(--font-text); letter-spacing: 0; text-transform: none;
}
#app[data-native="yes"] #loading .television::after { animation: native-power-warm .4s var(--ease) both; }
@keyframes native-power-warm { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 420px) {
  #app[data-native="yes"] #loading [data-television] { width: calc(100vw - 32px - var(--safe-left) - var(--safe-right)); }
  #app[data-native="yes"] #loadingText { margin-top: 47.6%; }
}
@media (max-height: 540px) and (orientation: landscape) {
  #app[data-native="yes"] #loading { padding-bottom: calc(var(--safe-bottom) + 48px); }
  #app[data-native="yes"] #loading [data-television] { width: min(440px, calc((100svh - 108px - var(--safe-top) - var(--safe-bottom)) * 1.28), calc(100vw - 48px - var(--safe-left) - var(--safe-right))); }
  #app[data-native="yes"] #loadingText { margin-top: 47.6%; }
}
#app[data-native="yes"] .picture { box-shadow: none; }
#app[data-native="yes"] .native-audio-hint {
  position: absolute; z-index: 3; bottom: var(--space-4); left: var(--space-4); right: var(--space-4);
  max-width: 32rem; margin-inline: auto; padding: var(--space-3) var(--space-4); gap: var(--space-3);
  border: var(--border) solid var(--launch-glass-edge); border-radius: var(--radius-md);
  background: var(--launch-dark); color: var(--launch-phosphor); text-align: center;
  pointer-events: none;
}
#app[data-native="yes"][data-screen="play"][data-playing="no"] #play:has(#loading[hidden]) .native-audio-hint { display: grid; }
.native-audio-hint p { margin: 0; font: 500 clamp(.875rem, 2.4vw, 1.125rem)/1.4 var(--font-text); text-wrap: balance; }
.native-audio-hint .btn { justify-self: center; pointer-events: auto; }
#app[data-native="yes"] .native-gate .btn:active:not(:disabled) { transform: scale(.96); }