/* Decorative cabinet frame. Hardware safe areas contain no text or controls. */
: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);
  --screen-height: 100vh;
  --usable-height: max(0px, calc(var(--screen-height) - var(--safe-top) - var(--safe-bottom)));
  --usable-width: max(0px, calc(100vw - var(--safe-left) - var(--safe-right)));
  --marquee-height: 0px;
  --storefront-height: 0px;
  --play-height: max(0px, calc(var(--usable-height) - var(--marquee-height) - var(--storefront-height)));
  --game-width: min(var(--usable-width), calc(var(--play-height) * .5625));
  --game-height: min(var(--play-height), calc(var(--usable-width) * 1.7777777778));
}
@supports (height: 100dvh) {
  :root { --screen-height: 100dvh; }
}
html { background: #1a100b; }
.arcade-sponsor { position: fixed; z-index: 20; top: 50%; transform: translateY(-50%); width: min(14vw, 220px); max-height: 42vh; padding: 8px; box-sizing: border-box; }
.arcade-sponsor-left { left: var(--safe-left); }
.arcade-sponsor-right { right: var(--safe-right); }
.sponsor-link { display: grid; gap: 8px; justify-items: center; padding: 10px; color: #fff4dc; text-align: center; text-decoration: none; border: 3px solid #e99016; border-radius: 14px; background: #271207e8; box-shadow: 0 4px #160a05; }
.sponsor-link img { display: block; max-width: 100%; max-height: 120px; object-fit: contain; }
.sponsor-link span { font: bold 12px/1.2 Arial, sans-serif; }
@media (max-width: 900px) { .arcade-sponsor { width: min(24vw, 150px); } }
@media (max-width: 600px) { .arcade-sponsor { position: static; transform: none; width: 100%; max-height: none; padding: 8px 16px; } .arcade-sponsor-left { order: 1; } .arcade-sponsor-right { order: 3; } body { display: flex; flex-direction: column; } #game { order: 2; } }
#control-pin { width:min(85vw,350px); padding:24px; border:4px solid #ffbd26; border-radius:22px; background:#271207; color:#fff4dc; font:16px Arial; }
#control-pin::backdrop { background:#080403d9; }
#control-pin input { box-sizing:border-box; display:block; width:100%; padding:12px; margin:12px 0; font-size:22px; }
#control-pin button { min-height:44px; padding:8px 16px; background:#ffcc35; color:#271207; border:0; border-radius:9px; cursor:pointer; }
#credits-dialog {
  box-sizing: border-box; width: min(88vw, 440px); max-height: min(78dvh, 660px);
  padding: 0; overflow: hidden; color: #fff4dc; background: #241109;
  border: 5px solid #ed9c18; border-radius: 22px;
  box-shadow: 0 0 0 3px #241109, inset 0 0 0 2px #ffd457, 0 16px 60px #000b;
  font: 16px/1.6 Arial, sans-serif; text-align: center;
}
#credits-dialog::backdrop { background: #080403c9; }
.credits-close-row { display: flex; justify-content: flex-end; margin: 0; padding: 8px 10px 0; }
.credits-close-row button { border: 2px solid #f0ac24; border-radius: 50%; width: 38px; height: 38px; background: #44230f; color: #fff4dc; font-size: 25px; cursor: pointer; }
.credits-scroll { box-sizing: border-box; overflow-y: auto; max-height: min(calc(78dvh - 64px), 596px); padding: 0 28px 26px; overscroll-behavior: contain; touch-action: pan-y; scrollbar-color: #f0ac24 #321809; }
.credits-logo { width: 190px; max-width: 75%; height: auto; }
.credits-eyebrow, .credits-version { font-size: 12px; letter-spacing: .12em; color: #f4c557; }
#credits-heading { font-size: 26px; margin: 8px 0; }
.credits-scroll section { margin: 30px 0; }
.credits-scroll h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: #f4c557; }
.credits-scroll a { color: #ffe38a; }
.credits-copyright { font-size: 11px; opacity: .8; margin-top: 28px; }
#credits-dialog :focus-visible { outline: 3px solid #fff4dc; outline-offset: 3px; }
body {
  box-sizing: border-box;
  height: var(--screen-height);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--marquee-height) minmax(var(--game-height), 1fr) var(--storefront-height);
  /* Dark, quiet behind the clock/camera and home indicator. */
  background: radial-gradient(ellipse at 0 0, #673512, transparent 45%),
    radial-gradient(ellipse at 100% 100%, #5c2910, transparent 45%), #1a100b;
}
#game {
  width: var(--game-width);
  height: var(--game-height);
  grid-row: 2;
  min-width: 0;
  min-height: 0;
}
.arcade-band {
  align-self: stretch;
  justify-self: center;
  width: var(--game-width);
  min-height: 0;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
  background: radial-gradient(ellipse at center, #804311, #28170d 75%);
}
.arcade-marquee {
  grid-row: 1;
  box-shadow: inset 0 -3px #f7ad22, inset 0 -6px #7d320b;
}
.arcade-storefront {
  grid-row: 3;
  background: #100c08;
  box-shadow: inset 0 3px #f7ad22, inset 0 6px #7d320b;
}
.arcade-sign {
  display: none;
  position: absolute;
  inset: 8px 14px;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.arcade-sign img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 65%;
  max-height: 112px;
  object-fit: contain;
}
.arcade-marquee { background: #071c20; }
.arcade-marquee .arcade-sign { inset: 0; }
.arcade-marquee img { width: 100%; max-width: none; max-height: none; object-fit: contain; }
.arcade-storefront img { max-width: 28%; }
.arcade-sign span {
  color: #fff0c6;
  font: 900 clamp(10px, 3vw, 18px) / 1.1 'Arial Black', sans-serif;
  letter-spacing: .04em;
  text-shadow: 0 2px 2px #241008, 0 0 8px #241008;
}
@container (min-height: 44px) {
  .arcade-sign { display: flex; }
}
@container (max-height: 63px) {
  .arcade-sign { inset-block: 6px; }
}
/* Reserve real sign space on portrait screens, after hardware safe areas.
   Leftover-space-only sizing hid both signs on installed iPhone PWAs. */
@media (orientation: portrait) {
  :root { --marquee-height: 0px; --storefront-height: 64px; }
  .arcade-band { width: var(--usable-width); }
  .arcade-marquee .arcade-sign { display: flex; }
  .arcade-storefront .store-banner { display: block; }
}
/* Mobile cabinet uses every vertical pixel: world first, full-bleed store art
   in the remainder, including behind the home indicator. No spare grid row. */
@media (orientation: portrait) {
  html {
    background: #100c08 url('assets/branding/retailer-bottles-v1.png') right bottom / 100% auto no-repeat;
  }
  body {
    padding: 0;
    grid-template-rows: 0px var(--mobile-game-height, min(177.7778vw, calc(100dvh - 144px))) var(--mobile-store-height, minmax(0, 1fr));
    align-content: start;
    background: transparent;
  }
  body::before, body::after { display: block; }
  #game {
    width: 100%; height: var(--mobile-game-height, min(177.7778vw, calc(100dvh - 144px)));
    align-self: start; box-shadow: none;
    background: #009ff0 url('assets/backgrounds/01-strawberry-market.png') center / cover no-repeat;
  }
  /* A short mobile-browser viewport cannot contain both the complete 9:16
     canvas and the store panel. Fill the device width and crop only the
     canvas overflow at the bottom instead of exposing side gutters. */
  #game canvas {
    flex: none;
    align-self: flex-start;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .arcade-storefront {
    position: fixed; inset: auto 0 0;
    width: 100%; height: var(--mobile-store-height, 144px);
    box-shadow: none; border: 0; border-radius: 0;
    background: #100c08 url('assets/branding/retailer-bottles-v1.png') right top / cover no-repeat;
  }
}
/* The surrounding artwork comes directly from Strawberry Market. */
@media (min-aspect-ratio: 9 / 16) {
  body { background-color: transparent; }
}

/* Keep the desktop cabinet artwork visible behind the game on phones too. */
@media (hover: none), (pointer: coarse) {
  body { background: transparent; }
  body::before, body::after { display: block; }
}

.store-banner {
  display: none; position: absolute; inset: 5px 0 0; width: 100%;
  border: 0; padding: 6px 5%; cursor: pointer; pointer-events: auto;
  text-align: left; color: #fff2d0;
  background: #100c08 url('assets/branding/retailer-bottles-v1.png') right center / auto 100% no-repeat;
  font: 800 clamp(10px, 2.8vw, 15px)/1.4 Arial, sans-serif;
}
.store-banner > span { display: block; max-width: 49%; }
.store-banner strong { display: block; color: #ffc62c; font-size: .8em; }
.store-banner span span { display: block; }
.store-banner:focus-visible, .store-close:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
@container (min-height: 44px) { .store-banner { display: block; } }
/* On wide screens the same sign occupies the unused cabinet side, never the game. */
@media (min-aspect-ratio: 6 / 5) {
  .arcade-storefront {
    position: fixed; right: calc(var(--safe-right) + 12px); bottom: calc(var(--safe-bottom) + 8px);
    box-sizing: border-box;
    width: min(220px, max(0px, calc((var(--usable-width) - var(--game-width)) / 2 - 24px))); height: 76px;
    border: 2px solid #d78c19; border-radius: 12px;
  }
}
#store-dialog {
  box-sizing: border-box; padding: 0; width: min(92vw, 480px);
  max-height: calc(var(--usable-height) - 24px);
  margin: auto; overflow: auto; overscroll-behavior: contain; touch-action: pan-y;
  color: #fff0d2; background: #211309; border: 3px solid #f5b023;
  border-radius: 20px; box-shadow: 0 16px 80px #000c;
  font: 16px/1.45 Arial, sans-serif;
}
#store-dialog * { touch-action: pan-y; }
#store-dialog::backdrop { background: #070809d9; }
.store-close {
  position: absolute; right: 10px; top: 10px; width: 44px; height: 44px;
  border: 2px solid #f5b023; border-radius: 50%; background: #17100b;
  color: #fff2d0; font: 30px/1 Arial, sans-serif; cursor: pointer;
}
.store-hero { display: block; width: 100%; height: auto; }
.store-content { padding: 0 22px 22px; }
.store-eyebrow { color: #f5b023; font-size: 11px; font-weight: 900; letter-spacing: .16em; margin: 8px 0; }
#store-heading { margin: 0 0 16px; font-size: clamp(23px, 6vw, 32px); color: #ffcb39; }
.store-list { list-style: none; padding: 0; margin: 0; }
.store-list li { border-top: 1px solid #ab6b2a80; }
.store-hint { color: #ead7b5; font-size: 14px; margin: -4px 0 16px; }
.store-map-link { display: block; padding: 16px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.store-map-link:hover { background: #402710; }
.store-map-link:focus-visible { outline: 3px solid #ffd15a; outline-offset: -3px; background: #402710; }
.store-map-link > span { display: inline-block; margin-top: 9px; color: #ffe6a6; font-size: 13px; font-weight: 700; }
.store-list h2 { margin: 0 0 4px; color: #ffd15a; font-size: 18px; }
.store-list p { margin: 0; font-size: 15px; user-select: text; }
.game-notice, .save-notice {
  position: fixed; z-index: 1000; box-sizing: border-box;
  left: 50%; transform: translateX(-50%); width: min(90vw, 420px);
  padding: 16px; border: 2px solid #f5b023; border-radius: 12px;
  background: #211309; color: #fff2d0; font: 15px/1.4 Arial, sans-serif;
}
.game-notice { top: max(25%, var(--safe-top)); text-align: center; }
.game-notice button { min-height: 48px; padding: 10px 20px; border: 0; border-radius: 8px; background: #ffc62c; color: #211309; font-weight: bold; cursor: pointer; }
.save-notice { bottom: calc(var(--safe-bottom) + 72px); pointer-events: none; }
#push-dialog, #motion-dialog {
  box-sizing: border-box; width: min(90vw, 440px); max-height: 85dvh; overflow-y: auto;
  padding: 24px; border: 4px solid #f6aa19; border-radius: 24px;
  background: #271207; color: #fff4dc; text-align: center; font-family: Arial, sans-serif;
  box-shadow: 0 8px 0 #100803, inset 0 0 28px #84410b;
}
#push-dialog::backdrop, #motion-dialog::backdrop { background: rgba(8, 4, 3, .88); }
#push-dialog h1, #motion-dialog h1 { color: #ffcc35; font-size: 26px; }
#push-dialog p, #motion-dialog p { line-height: 1.5; font-size: 15px; }
.push-actions { display: grid; gap: 10px; }
.push-actions button { min-height: 46px; padding: 10px; border-radius: 12px; border: 2px solid #ffcb43; background: #ffcc35; color: #241006; font-weight: bold; cursor: pointer; }
.push-actions button:disabled { opacity: .45; cursor: default; }
.push-actions button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
#leaderboard-dialog { box-sizing:border-box; width:min(94vw,540px); max-height:90dvh; overflow:auto; padding:20px; border:4px solid #ffbd26; border-radius:22px; background:#271207; color:#fff4dc; font:15px/1.45 Arial,sans-serif; }
#leaderboard-dialog::backdrop { background:rgba(8,4,3,.85); }
#leaderboard-dialog h1 { font-size:24px; text-align:center; color:#ffcc35; }
#leaderboard-dialog .credits-logo { display:block; margin:0 auto; max-height:95px; object-fit:contain; }
.leaderboard-tabs { display:flex; gap:6px; flex-wrap:wrap; }
#leaderboard-dialog button { cursor:pointer; min-height:44px; padding:9px 12px; border:2px solid #eaa125; border-radius:10px; background:#44210d; color:#fff4dc; font-weight:bold; }
#leaderboard-dialog button[aria-pressed="true"], #leaderboard-submit { background:#ffcc35; color:#271207; }
#leaderboard-dialog button:disabled { opacity:.5; cursor:default; }
#leaderboard-dialog :focus-visible { outline:3px solid white; outline-offset:2px; }
#leaderboard-list { padding:0; list-style:none; }
#leaderboard-list li { padding:12px; margin:8px 0; border:1px solid #b87919; border-radius:10px; background:#391b09; overflow-wrap:anywhere; }
#leaderboard-list span { display:block; margin-top:4px; }
#leaderboard-form { border-top:2px solid #b87919; margin-top:18px; padding-top:10px; }
#leaderboard-form label { display:block; margin-top:10px; }
#leaderboard-form input { box-sizing:border-box; width:100%; min-height:44px; border:2px solid #d99824; border-radius:8px; padding:8px; background:#fff4dc; color:#271207; font-size:16px; }
#leaderboard-form select { box-sizing:border-box; width:100%; min-height:46px; border:2px solid #d99824; border-radius:8px; padding:8px; background:#fff4dc; color:#271207; font:bold 16px Arial,sans-serif; }
#leaderboard-form p { font-size:13px; }

/* One illustrated dialog family, using the same world, frame and glyphs as Menu. */
#credits-dialog, #push-dialog, #motion-dialog, #leaderboard-dialog, #store-dialog {
  color: #fff4dc;
  background: linear-gradient(#241109df, #241109f5 260px),
    url('assets/backgrounds/01-strawberry-market.png') center top / auto 320px no-repeat, #241109;
  border: 5px solid #efa120;
  border-radius: 26px;
  box-shadow: 0 0 0 3px #241109, inset 0 0 0 2px #ffd457, 0 16px 60px #000b;
  font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
  line-height: 1.6;
  scrollbar-color: #f0ac24 #321809;
}
#credits-dialog::backdrop, #push-dialog::backdrop, #motion-dialog::backdrop, #leaderboard-dialog::backdrop, #store-dialog::backdrop {
  background: #080403c9;
  backdrop-filter: blur(5px);
}
#credits-heading, #push-heading, #motion-heading, #leaderboard-heading, #leaderboard-form h2, #store-heading {
  text-align: center; margin: 14px 0 22px; font-size: clamp(18px, 4.6vw, 26px);
}
.brand-wordmark { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .35em; vertical-align: middle; max-width: 100%; }
.brand-word { display: inline-flex; white-space: nowrap; }
.brand-sprite { display: inline-block; flex: none; height: 1em; background-repeat: no-repeat; vertical-align: middle; }
.brand-dialog-icon { display: block; margin: 0 auto 12px; font-size: 42px; }
.brand-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#credits-dialog h2 { font-size: 15px; letter-spacing: 0; }
#credits-dialog p, #push-dialog p, #motion-dialog p, #leaderboard-dialog p, #leaderboard-list {
  font-family: Arial, sans-serif;
}
#push-dialog .credits-logo, #motion-dialog .credits-logo, #leaderboard-dialog .credits-logo { display: block; margin: 0 auto; width: 180px; max-height: none; }
#push-dialog .push-actions button, #motion-dialog .push-actions button, #leaderboard-dialog button:not(.credits-close-row button) {
  min-height: 58px; padding: 15px 25px; border: 0; border-radius: 16px;
  background: url('assets/hud/hud-panel.png') center / 100% 100% no-repeat;
  color: #ffdd56; font-family: 'Arial Black', Arial, sans-serif;
  font-size: 16px; font-weight: 900; text-shadow: 0 2px 2px #160803;
  box-shadow: 0 5px 0 #160803;
}
#leaderboard-dialog .leaderboard-tabs { display: grid; grid-template-columns: 1fr; gap: 12px; }
#leaderboard-dialog .leaderboard-tabs button { font-size: 15px; opacity: .7; }
#leaderboard-dialog button[aria-pressed='true'] { opacity: 1; filter: brightness(1.15); }
#leaderboard-dialog button:disabled, #push-dialog button:disabled, #motion-dialog button:disabled { opacity: .5; cursor: default; }
#leaderboard-refresh, #leaderboard-submit { width: 100%; margin: 10px 0; }
#leaderboard-dialog .credits-close-row button {
  width: 44px; height: 44px; padding: 0; border: 3px solid #ffcb43; border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #95521c, #321608); color: #fff4dc; font-size: 26px;
}
#leaderboard-list li { padding: 16px; border: 2px solid #b87919; border-radius: 14px; background: linear-gradient(135deg, #603012, #291307); box-shadow: inset 0 1px #ffc75166; }
#leaderboard-list strong { color: #ffcf48; font-size: 17px; }
#leaderboard-form { padding-top: 20px; border-top: 2px solid #eaa125; }
#leaderboard-form label { color: #ffd15a; font-size: 14px; font-weight: 900; }
#leaderboard-form input { background: #fff4dc; border: 3px solid #d99824; border-radius: 12px; padding: 12px; }
#leaderboard-form input[readonly] { background: #e1cea4; }
.push-actions { gap: 16px; margin-top: 22px; }
.store-banner {
  background-color: #321608;
  box-shadow: inset 0 0 0 2px #bd721b, inset 0 0 0 4px #ffcc4566;
  border-radius: 10px;
}
.store-banner-label { font-size: clamp(10px, 2.4vw, 13px); line-height: 1.2; }
.store-banner-label .brand-wordmark { display: inline-flex; justify-content: flex-start; gap: .22em; }
.store-banner-label .brand-word { display: inline-flex; }
.store-banner-label .brand-sprite { display: inline-block; }
@media (orientation: portrait) {
  .arcade-storefront .store-banner {
    display: block; inset: 0; width: 100%; height: 100%;
    box-sizing: border-box; border: 0; border-radius: 0; box-shadow: none;
    padding: 12px max(16px, var(--safe-right)) max(12px, var(--safe-bottom)) max(16px, var(--safe-left));
    background-color: #100c08;
    background-size: cover;
    background-position: right center;
  }
  .store-banner > span { max-width: 45%; }
  .store-banner-label { font-size: clamp(11px, 3vw, 15px); }
}
#store-dialog { position: relative; }
#store-dialog .store-close {
  z-index: 1; background: radial-gradient(circle at 35% 25%, #95521c, #321608);
  border: 3px solid #ffcb43; box-shadow: 0 3px 0 #160803;
}
.store-hero { border-radius: 20px 20px 0 0; border-bottom: 3px solid #d99824; }
.store-content { padding: 16px 22px 24px; }
.store-eyebrow { text-align: center; letter-spacing: 0; font-size: 12px; }
#store-heading { font-size: clamp(18px, 4.8vw, 26px); }
.store-hint { text-align: center; font: 15px/1.6 Arial, sans-serif; }
.store-list { display: grid; gap: 14px; }
.store-list li { border: 0; }
.store-map-link {
  padding: 18px; border: 2px solid #b87919; border-radius: 14px;
  background: linear-gradient(135deg, #603012, #291307);
  box-shadow: inset 0 1px #ffc75166, 0 4px 0 #160803;
}
.store-list h2 { font-family: 'Arial Black', Arial, sans-serif; color: #ffcf48; }
.store-list p { font: 15px/1.6 Arial, sans-serif; }
.store-map-link > span {
  display: inline-block; padding: 10px 22px; color: #ffdc55;
  background: url('assets/hud/hud-panel.png') center / 100% 100% no-repeat;
  text-shadow: 0 2px 2px #160803; font-weight: 900;
}
@media (max-width: 360px) {
  #leaderboard-dialog { padding: 14px; }
  #leaderboard-heading { font-size: 17px; }
  #leaderboard-dialog .leaderboard-tabs button { font-size: 13px; }
}

/* Artwork is decorative; only the text-sized button receives touches. */
.arcade-storefront { background: #100c08 url('assets/branding/retailer-bottles-v1.png') right top / cover no-repeat; }
.arcade-storefront .store-banner {
  inset: auto auto auto max(8px, var(--safe-left)); top: 50%; transform: translateY(-50%);
  width: max-content; max-width: calc(100% - 24px); height: auto; min-height: 44px;
  padding: 8px; border: 0; border-radius: 8px; box-shadow: none;
  background: #100c08b3; pointer-events: auto;
}
.arcade-storefront .store-banner > span { max-width: none; }
@media (orientation: portrait) {
  /* Overscan the artwork inside its existing box. The box never grows upward,
     so the game remains fully visible while the asset's black tail is cropped. */
  .arcade-storefront { background-size: auto calc(100% + 40px); }
  .arcade-storefront .store-banner { top: calc((100% - var(--safe-bottom)) / 2); }
}
#leaderboard-dialog { width: min(96vw, 700px); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px); }
.leaderboard-board { overflow-x: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.leaderboard-columns, #leaderboard-list li.stat-row { display:grid; grid-template-columns: 34px minmax(110px,1fr) 82px 66px 60px; gap:8px; min-width:384px; box-sizing:border-box; align-items:center; }
.leaderboard-columns { padding:10px 12px; color:#ffd15a; font:bold 11px Arial; letter-spacing:.04em; border-bottom:2px solid #ca861f; }
#leaderboard-list li.stat-row { padding:14px 12px; }
#leaderboard-list .stat-row span { margin:0; }
#leaderboard-list .rank { font:bold 23px 'Arial Black',sans-serif; color:#ffd350; text-align:center; }
#leaderboard-list .player-name { min-width:0; font-size:15px; overflow-wrap:anywhere; }
#leaderboard-list .player-name small { display:block; font:12px/1.5 Arial; color:#ead6b7; }
#leaderboard-list .stat { font:bold 14px Arial; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#leaderboard-list .podium-1 { border-color:#ffdf6d; background:linear-gradient(120deg,#795114,#301707); }
#leaderboard-list .podium-2 { border-color:#d5dbdf; }
#leaderboard-list .podium-3 { border-color:#c38c58; }
#leaderboard-list .current-player { outline:3px solid #fff1a8; outline-offset:-5px; }
.leaderboard-note { color:#dac9ae; font-size:12px; }
#leaderboard-dialog .credits-logo { width:100px; max-height:70px; object-fit:contain; }
#leaderboard-dialog #leaderboard-heading { font-size:clamp(12px,3.4vw,20px); margin:10px 0 16px; }
#leaderboard-heading .brand-dialog-icon { display:none; }
#leaderboard-dialog .leaderboard-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#leaderboard-dialog .leaderboard-tabs button[aria-pressed] { min-width:0; min-height:48px; padding:10px 5px; font-size:clamp(8px,2.4vw,13px); }
#leaderboard-dialog .credits-close-row { padding:0; }
.leaderboard-columns, #leaderboard-list li.stat-row { grid-template-columns:34px minmax(90px,1fr) 76px 44px 50px; gap:6px; min-width:334px; padding-left:8px; padding-right:8px; }
#leaderboard-dialog #leaderboard-status { font-size:12px; line-height:1.5; }

/* Player log: every statistic stays inside its entry at phone widths. */
#leaderboard-dialog .leaderboard-board { overflow:visible; min-width:0; }
#leaderboard-dialog #leaderboard-list { min-width:0; margin:12px 0; }
#leaderboard-dialog #leaderboard-list li { min-width:0; max-width:100%; box-sizing:border-box; }
#leaderboard-dialog #leaderboard-list li.stat-row { display:block; padding:12px; }
.entry-heading { padding:8px; border-radius:10px; background:linear-gradient(90deg,#df831f44,transparent); }
.entry-heading { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:center; }
.entry-stats { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid #d59a3866; }
#leaderboard-list .entry-stats .stat { min-width:0; font-size:13px; }
#leaderboard-list .entry-stats small { display:block; color:#dccaad; font:10px/1.6 Arial,sans-serif; text-transform:uppercase; }
#leaderboard-list .entry-stats b { display:block; overflow-wrap:anywhere; }
#leaderboard-dialog .leaderboard-tabs { grid-template-columns:1fr; gap:8px; }
#leaderboard-dialog .leaderboard-tabs button[aria-pressed] { width:100%; min-height:48px; padding:12px 18px; font-size:12px; box-sizing:border-box; }
#leaderboard-dialog .leaderboard-tabs .brand-wordmark { flex-wrap:nowrap; }
#leaderboard-dialog #leaderboard-heading { font-size:12px; }
#leaderboard-list li.stat-row { border:3px solid #e99220; box-shadow:inset 0 0 0 2px #ffce5655,0 5px 0 #120703; background:radial-gradient(circle at top right,#844417,#391b09 62%); }
#leaderboard-list .podium-1 { border-color:#ffe073; box-shadow:inset 0 0 0 2px #fff2a477,0 5px 0 #120703,0 0 18px #f5a62355; }

/* Compact landscape-phone sign stays wholly in the safe right-side gutter. */
@media (orientation: landscape) and (max-height: 600px) {
  .arcade-storefront {
    width: min(170px, max(0px, calc((var(--usable-width) - var(--game-width)) / 2 - 24px)));
    height: 64px;
  }
  .arcade-storefront .store-banner {
    left: 4px; max-width: calc(100% - 8px); padding: 4px;
    font-size: 9px; line-height: 1.3;
  }
  .arcade-storefront .store-banner-label { font-size: 9px; }
}

/* Store directory density: clear 44px targets without oversized cards. */
#store-dialog .store-content { padding:10px 14px 16px; }
#store-dialog .store-list { gap:6px; }
#store-dialog .store-map-link { min-height:44px; box-sizing:border-box; padding:9px 11px; border-radius:10px; }
#store-dialog .store-list h2 { margin:0 0 2px; font-size:15px; line-height:1.25; }
#store-dialog .store-list p { font-size:13px; line-height:1.3; }
#store-dialog .store-map-link > span { margin-top:4px; padding:0; font-size:11px; background:none; text-shadow:none; box-shadow:none; }

/* Native dialog dismiss controls stay a simple, undistorted X. */
dialog button[aria-label^='Close'] {
  box-sizing:border-box; width:40px; height:40px; min-width:40px; min-height:40px;
  padding:0 !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
  color:#fff4dc; font:900 27px/40px Arial,sans-serif; text-align:center;
}