/* Responsive menu sizing. The wrapper owns the embedded frame and page scroll. */
body { padding: 20px; }
#menu-stage { width: 100%; max-width: 780px; margin-inline: auto; }
#menu-content { width: 100%; max-width: 780px; margin-inline: auto; }
.game-frame { position: relative; width: 100%; max-width: 780px; min-height: 0; }
.composition { grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "hero menu" "instructions menu"; gap: 16px 24px; padding: 20px; }
.brand-lockup { width: min(100%, 176px); margin-inline: auto; }
.rules li { font-size: 13px; line-height: 1.45; padding-bottom: 12px; }
.rules li::before { font-size: 11px; }
.instructions { padding-top: 14px; }
.instructions h2 { font-size: 20px; }
.daily-button, .secondary-button { min-height: 76px; padding: 12px 14px; grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 10px; }
.daily-choices, .secondary-choices { gap: 12px; }
.secondary-choices { margin-top: 12px; }
.choice-title { font-size: 19px; }
.choice-detail, .secondary-button .choice-detail { font-size: 12px; line-height: 1.4; }
.daily-heading h2 { font-size: 18px; }
.daily-heading p { font-size: 11px; margin-left: auto; text-align: right; }
.daily-heading { padding-right: 36px; }
.review-bar { max-width: 780px; }
.sign-in-button, .close, .score-tabs button { min-height: 44px; }
.close { width: 44px; }
.display-button { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; padding: 9px; border: 1px solid #4c624f; border-radius: 6px; color: #c5d7bb; background: #15261be8; }
.display-button:hover { color: var(--lime); background: #29402b; }
.display-glyph { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.daily-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.daily-heading h2, .daily-heading p { white-space: nowrap; }

/* Reports measure #menu-content, whose height is never forced to the iframe's. */
.andkon-connected body { padding: 0; }
.andkon-connected .game-frame { border: 0; border-radius: 0; box-shadow: none; }
.andkon-connected .review-bar { display: none; }
.andkon-connected, .andkon-connected body { overflow: hidden; }
html.host-immersive, .host-immersive body { height: 100%; overflow: hidden; padding: 0; background: var(--surface); }
.host-immersive #menu-scroll { height: 100dvh; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
/* The stage reserves the scaled footprint; the content keeps its compact layout.
   The transform scales visual geometry and pointer hit targets together. */
.host-immersive #menu-stage { flex: 0 0 auto; width: var(--immersive-stage-width, 100%); max-width: none; height: var(--immersive-stage-height, auto); margin-block: auto; }
.host-immersive #menu-content { width: var(--immersive-width, 100%); margin: 0; transform-origin: top left; }
.host-upscaled #menu-content { transform: scale(var(--immersive-scale)); }
.host-immersive .game-frame { border: 0; border-radius: 0; box-shadow: none; }
.host-immersive .review-bar { display: none; }
.host-immersive .display-button { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
dialog { position: fixed; top: var(--dialog-center, 50%); transform: translateY(-50%); margin: 0 auto; max-height: var(--dialog-height, calc(100dvh - 24px)); overscroll-behavior: contain; }
.dialog-top { position: sticky; top: -1px; z-index: 1; background: #16221a; padding-block: 4px; }
.toast { bottom: auto; top: var(--toast-top, calc(100dvh - 90px)); }

@media (max-width: 599px) {
  body { padding: 12px; }
  .composition { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "hero" "menu" "instructions"; gap: 24px; padding: 24px; }
  .brand-lockup { width: min(100%, 220px); margin-inline: auto; }
  .menu, .instructions { width: 100%; max-width: 560px; justify-self: center; }
  .daily-heading { padding-right: 0; }
  .daily-heading h2 { font-size: 22px; }
  .daily-heading p { font-size: 14px; }
  .choice-detail, .secondary-button .choice-detail { font-size: 14px; }
  .daily-button, .secondary-button { min-height: 104px; padding: 16px 18px; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 12px; }
  .mode-icon svg { width: 28px; height: 38px; }
  .choice-title { font-size: 20px; }
  .rules li { font-size: 16px; }
  .review-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 390px) {
  .composition { padding: 20px 16px; }
  .brand-lockup { width: min(100%, 204px); }
  .daily-button, .secondary-button { padding: 16px 12px; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 10px; }
  .mode-icon-three { --bulb-width: 16px; --bulb-overlap: -4px; }
  .rules li { padding-left: 27px; }
}

/* Driven by outer browser height when embedded, never by scroll-dependent frameTop. */
.short-landscape .composition { grid-template-columns: minmax(150px, .4fr) minmax(0, 1fr); grid-template-areas: "hero menu" "instructions instructions"; gap: 20px 24px; padding: 16px 20px; }
.short-landscape .hero { align-self: center; }
.short-landscape .brand-lockup { width: min(100%, 190px); margin-inline: auto; }
.short-landscape .menu, .short-landscape .instructions { max-width: none; }
.short-landscape .daily-heading { margin-bottom: 0; padding-right: 40px; }
.short-landscape .daily-heading h2 { font-size: 20px; }
.short-landscape .daily-heading p { font-size: 13px; }
.short-landscape .daily-choices { grid-template-columns: 1fr 1fr; gap: 14px; }
.short-landscape .daily-button, .short-landscape .secondary-button { min-height: 96px; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 12px; }
.short-landscape .daily-button > svg { display: none; }
.short-landscape .mode-icon svg { width: 21px; height: 28px; }
.short-landscape .mode-icon-three { --bulb-width: 18px; --bulb-overlap: -5px; }
.short-landscape .choice-title { font-size: 18px; }
.short-landscape .choice-detail { font-size: 13px; }
.short-landscape .secondary-choices { grid-template-columns: 1fr 1fr; gap: 14px; }
.short-landscape .secondary-button > svg:last-child { display: none; }
.short-landscape .instructions { padding-top: 14px; }
.short-landscape .instructions h2 { font-size: 19px; }
.short-landscape .rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.short-landscape .rules li { font-size: 14px; padding: 0 0 0 24px; }
.short-landscape .dialog-content { padding: 16px 24px; }
.short-landscape .dialog-top { margin-bottom: 12px; }
.short-landscape .dialog-content h2 { font-size: 30px; }
.short-landscape .run-facts, .short-landscape .mode-picker { margin-block: 14px; padding-block: 12px; }