/* Phone section pager + bottom dock (mobile-pager.js). Loaded after every
   other blocking sheet: the shell and tray rules below override app.css's
   page scroll and floating Pending tray on phones. */

.mpager-dock,
.mpager-rotate { display: none; }

/* Desktop retains the original event rails. Only pager-mounted panels get
   these wrappers; standalone demos and embeds keep their existing markup. */
.mobile-event-summary,
.mobile-event-sheet__header { display: none; }
.mobile-event-sheet,
.mobile-event-sheet__body { display: contents; }

/* Phones held sideways get one notice instead of a second layout. Touch-only
   screens this short are phones; tablets and desktops keep landscape. */
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  body.layout-basic .mpager-rotate {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.9rem;
    padding: 1.5rem;
    background: #0b0a12;
    color: #f5efe0;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
  }
  body.layout-basic .mpager-rotate svg {
    width: 3.2rem;
    height: 3.2rem;
    fill: none;
    stroke: #ffc04d;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: mpager-rotate-hint 2.4s ease-in-out infinite;
  }
  body.layout-basic .mpager-rotate strong {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
  }
  body.layout-basic .mpager-rotate span {
    color: #a9a3ba;
    font-size: 0.8rem;
  }
}

@keyframes mpager-rotate-hint {
  0%, 30% { transform: rotate(-90deg); }
  60%, 100% { transform: rotate(0deg); }
}

@media (max-width: 768px) {
  /* One page at a time. A container listing several pages stays visible on
     each of them; its other children are hidden by their own tags. */
  body.layout-basic[data-mobile-page="draw"] [data-mpage]:not([data-mpage~="draw"]),
  body.layout-basic[data-mobile-page="buy"] [data-mpage]:not([data-mpage~="buy"]),
  body.layout-basic[data-mobile-page="flip"] [data-mpage]:not([data-mpage~="flip"]),
  body.layout-basic[data-mobile-page="quests"] [data-mpage]:not([data-mpage~="quests"]),
  body.layout-basic[data-mobile-page="craps"] [data-mpage]:not([data-mpage~="craps"]),
  body.layout-basic[data-mobile-page="degenerette"] [data-mpage]:not([data-mpage~="degenerette"]),
  body.layout-basic[data-mobile-page="more"] [data-mpage]:not([data-mpage~="more"]) {
    display: none !important;
  }

  /* App shell. The document never scrolls: the body is exactly the visible
     viewport, the banner and nav sit on top, the dock at the bottom, and only
     <main> scrolls, and only when the page is taller than the space between.
     With no document scroll the browser toolbars never collapse, so the
     dock and the safe-area inset stay put. */
  html:has(> body.layout-basic) {
    height: 100%;
    overflow: hidden;
  }
  body.layout-basic {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    /* nav.css and site-composition.css give the body min-height: 100vh. On
       Android Chrome 100vh is the toolbar-hidden height, which pushed the
       dock below the visible screen. */
    min-height: 0;
    overflow: hidden;
  }
  body.layout-basic > .testnet-beta-banner { flex: none; }
  body.layout-basic > .container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    padding-bottom: 0;
    box-sizing: border-box;
  }
  body.layout-basic > .container > * { flex: none; }
  body.layout-basic > .container > main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
    box-sizing: border-box;
  }
  /* Desktop spacing between the nav and the first panel is screen height a
     one-screen page cannot spare. */
  body.layout-basic > .container > .unified-nav { margin-bottom: 0.4rem; }
  body.layout-basic > .container > main > :first-child { margin-top: 0; }
  body.layout-basic > .container > footer { display: none !important; }

  /* Popups and dialogs cover the visible area (mobile-pager.js publishes it),
     not the layout viewport the keyboard slides over. While the keyboard is
     up, or a typed field has focus, the card moves to the top and the overlay
     scrolls, so the field and its actions stay above the keys. */
  html body.layout-basic :is(.panel-popup, .qst-action-dialog, .df-reverse-dialog, .pass-deity-dialog,
    .pass-afking__dialog, .deg-referral-dialog, .records-bounty-dialog,
    .app-decimator-panel .dec-builder-popover, .craps-dialog, .pfd-backdrop) {
    top: var(--mpager-vv-top, 0px);
    bottom: auto;
    height: var(--mpager-vv-h, 100dvh);
  }
  html[data-mpager-keyboard] body.layout-basic :is(.panel-popup, .qst-action-dialog, .df-reverse-dialog,
    .pass-deity-dialog, .pass-afking__dialog, .deg-referral-dialog, .records-bounty-dialog,
    .app-decimator-panel .dec-builder-popover, .craps-dialog, .pfd-backdrop),
  body.layout-basic :is(.panel-popup, .qst-action-dialog, .df-reverse-dialog, .pass-deity-dialog,
    .pass-afking__dialog, .deg-referral-dialog, .records-bounty-dialog,
    .app-decimator-panel .dec-builder-popover, .craps-dialog,
    .pfd-backdrop):has(:is(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea):focus) {
    place-items: start center;
    overflow-y: auto;
  }
  html[data-mpager-keyboard] body.layout-basic .panel-popup__window {
    max-height: calc(var(--mpager-vv-h, 100dvh) - 0.8rem);
  }

  /* Fill pages. Every page but More is one screen: <main> is a column, the
     page's container and its panel grow to the full height, and each panel's
     own section below spreads its content over that height. Growth never
     shrinks content below its natural size, so a page that cannot fit still
     scrolls instead of clipping. */
  body.layout-basic:not([data-mobile-page="more"]) > .container > main {
    display: flex;
    flex-direction: column;
  }
  body.layout-basic:not([data-mobile-page="more"]) > .container > main > :is(.jackpot-hero, .play-grid) {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    margin-bottom: 0;
  }
  body.layout-basic[data-mobile-page="draw"] .jackpot-hero__draw,
  body.layout-basic[data-mobile-page="buy"] app-decimator-panel,
  body.layout-basic[data-mobile-page="flip"] app-daily-flip,
  body.layout-basic[data-mobile-page="quests"] .quest-hub,
  body.layout-basic[data-mobile-page="craps"] app-craps-entry,
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 0;
  }

  /* The quest/craps/Degenerette frame and the ticket desk were one stacked
     card. Shown alone, each closes its own border. */
  body.layout-basic .play-grid {
    margin-bottom: 0;
    border-bottom: 1px solid var(--site-frame);
    border-radius: var(--site-radius);
  }
  body.layout-basic .player-desk {
    border-top: 1px solid var(--site-frame);
    border-radius: var(--site-radius);
    margin-bottom: var(--site-gap);
  }

  /* ---- Dock -------------------------------------------------------------- */
  body.layout-basic .mpager-dock {
    position: relative;
    z-index: 890;
    display: block;
    margin: 0 calc(-1 * var(--mpager-gutter, 8px));
    box-sizing: border-box;
    padding: 0.4rem 0.4rem max(0.2rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--site-frame, #c29b5c52);
    background: rgba(12, 11, 20, 0.96);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  body.layout-basic .mpager-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.6fr);
    align-items: center;
  }
  body.layout-basic .mpager-tab {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.18rem;
    min-width: 0;
    min-height: 2.9rem;
    padding: 0.3rem 0 0.25rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8f8a9e;
    font-family: inherit;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  body.layout-basic .mpager-tab svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body.layout-basic .mpager-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }
  body.layout-basic .mpager-tab[aria-current="true"] {
    background: rgba(245, 166, 35, 0.1);
    color: #ffc04d;
  }
  body.layout-basic .mpager-tab[aria-current="true"]::before {
    content: "";
    position: absolute;
    top: -0.4rem;
    left: 28%;
    right: 28%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: #ffc04d;
    box-shadow: 0 0 8px rgba(255, 192, 77, 0.7);
  }

  /* ---- Pending slot ------------------------------------------------------ */
  /* The tab row's last, wider slot. Head names what is waiting, foot says
     what a tap does (or shows RNG progress while nothing is runnable). */
  body.layout-basic .mpager-pend {
    display: grid;
    grid-template-rows: 1.3rem auto;
    justify-items: center;
    align-content: center;
    gap: 0.18rem;
    min-width: 0;
    min-height: 2.9rem;
    margin-left: 0.2rem;
    padding: 0.25rem 0.2rem;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(18, 17, 32, 0.98);
    color: #8f8a9e;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.layout-basic .mpager-pend[data-state="waiting"] {
    border-color: rgba(255, 205, 100, 0.35);
    color: #a9a3ba;
  }
  body.layout-basic .mpager-pend[data-state="ready"] {
    border-color: rgba(255, 205, 100, 0.85);
    background:
      radial-gradient(circle at 50% -40%, rgba(245, 166, 35, 0.28), transparent 70%),
      rgba(18, 17, 32, 0.98);
    color: #ffd27a;
    animation: mpager-ready-glow 1.8s ease-in-out infinite;
  }
  body.layout-basic .mpager-pend[data-state="busy"] {
    border-color: rgba(125, 160, 255, 0.55);
    color: #b8c9ff;
  }
  body.layout-basic .mpager-pend:disabled {
    cursor: default;
    opacity: 1;
  }
  body.layout-basic .mpager-pend__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    max-width: 100%;
    height: 1.3rem;
    overflow: hidden;
  }
  body.layout-basic .mpager-pend__head svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body.layout-basic .mpager-pend__text {
    color: #f5efe0;
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  body.layout-basic .mpager-pend__more {
    color: #c9b483;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1;
  }
  body.layout-basic .mpager-pend__flame {
    width: auto;
    height: 1.3rem;
  }
  body.layout-basic .mpager-pend__foot {
    display: flex;
    align-items: center;
    gap: 0.14rem;
    height: 0.6rem;
    font-size: 0.54rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  body.layout-basic .mpager-pend[data-state="busy"] .mpager-pend__foot {
    animation: mpager-busy-pulse 1.1s ease-in-out infinite;
  }
  body.layout-basic .mpager-pend__foot i {
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background: #2f3550;
  }
  body.layout-basic .mpager-pend__foot i.is-complete {
    background: #4ade80;
    box-shadow: 0 0 5px rgba(74, 222, 128, 0.7);
  }

  /* ---- Tray ----------------------------------------------------------------- */
  /* The slot replaces the floating Pending tray on phones. Only the tray's
     toasts (errors, mining reward) still float, just above the dock. */
  body.layout-basic app-reveal-tray {
    bottom: calc(var(--mpager-dock-h, 4rem) + 0.4rem);
    width: calc(100vw - 0.75rem);
  }
  body.layout-basic app-reveal-tray .rrt-tray {
    display: none !important;
  }
}

@keyframes mpager-ready-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(245, 166, 35, 0); }
  50% { box-shadow: 0 0 14px rgba(245, 166, 35, 0.45); }
}

@keyframes mpager-busy-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  body.layout-basic .mpager-rotate svg { animation: none; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.layout-basic .mpager-pend[data-state="ready"],
  body.layout-basic .mpager-pend[data-state="busy"] .mpager-pend__foot { animation: none; }
}

/* ==== Per-page fill (phones) =================================================
   Each page's panel spreads its own content over the height the shared fill
   rules above give it. Every rule is scoped to one body[data-mobile-page]. */

/* ---- Draw --------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* A phone summary gives the drawing the screen: one jackpot amount, a slim
     pool instrument, and a single-row wallet notice above the cabinet. */
  body.layout-basic[data-mobile-page="draw"] > .container > main > :not(.jackpot-hero) { flex: none; }
  body.layout-basic[data-mobile-page="draw"] > .container > main { padding-bottom: .4rem; }
  body.layout-basic[data-mobile-page="draw"] .gr {
    height: auto; min-height: 3.5rem; aspect-ratio: auto; border: 1px solid #9d803a80; border-radius: 8px;
    clip-path: none; background: linear-gradient(110deg, #29200c, #0b0b0b 62%);
  }
  body.layout-basic[data-mobile-page="draw"] .gr__inner {
    position: static; display: flex; align-items: center; justify-content: space-between;
    box-sizing: border-box; min-height: 3.5rem; padding: .45rem .7rem; gap: .6rem;
  }
  body.layout-basic[data-mobile-page="draw"] .gr__brand { display: none; }
  body.layout-basic[data-mobile-page="draw"] .gr__label { position: static; width: auto; text-align: left; }
  body.layout-basic[data-mobile-page="draw"] .gr__label-text {
    display: block; max-width: 15ch; font-size: .63rem; line-height: 1.25;
    letter-spacing: .07em; white-space: normal;
  }
  body.layout-basic[data-mobile-page="draw"] .gr__chip {
    position: static; display: block; max-width: none; transform: none; margin-top: 3px; font-size: .5rem;
  }
  body.layout-basic[data-mobile-page="draw"] .gr__amount-row {
    position: relative; top: auto; left: auto; transform: none; margin: 0; gap: .3rem;
  }
  body.layout-basic[data-mobile-page="draw"] .gr__amount { font-size: min(7.6cqw, calc(58cqw / var(--gr-chars, 9))); line-height: 1; }
  body.layout-basic[data-mobile-page="draw"] .gr__unit-code { width: auto; font-size: .6rem; margin-bottom: .15rem; }
  body.layout-basic[data-mobile-page="draw"] .gr__float { bottom: 0; font-size: .6rem; }
  body.layout-basic[data-mobile-page="draw"] .pool-progress { padding: .4rem .55rem; }
  body.layout-basic[data-mobile-page="draw"] .pool-progress__head { margin-bottom: .3rem; gap: .25rem; }
  body.layout-basic[data-mobile-page="draw"] .pool-progress__body { padding-bottom: 1.25rem; }
  body.layout-basic[data-mobile-page="draw"] app-protocol-wallet-banner {
    grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; padding: .25rem .45rem;
  }
  body.layout-basic[data-mobile-page="draw"] .protocol-wallet-banner__mark { display: none; }
  body.layout-basic[data-mobile-page="draw"] .protocol-wallet-banner__copy strong {
    font-size: .58rem; letter-spacing: 0; white-space: normal;
  }
  body.layout-basic[data-mobile-page="draw"] .protocol-wallet-banner__copy small { font-size: .5rem; }
  body.layout-basic[data-mobile-page="draw"] .protocol-wallet-banner__connect {
    grid-column: auto; width: auto; max-width: 7rem; min-height: 2.5rem;
    padding: .25rem .45rem; white-space: normal; font-size: .52rem;
  }

  /* Foils sit in one row below the full-width draw. Empty bays need no space
     on a phone; owned/claimable tickets keep their existing controls. */
  body.layout-basic[data-mobile-page="draw"] > .container > main > .jackpot-hero {
    /* Event panels below the cabinet can scroll; they must not squeeze the
       main drawing back to a thumbnail when a special level opens. */
    flex: 1 1 0;
    min-height: max(17.75rem, min(calc(100vw + 7.75rem), calc(100dvh - 20rem)));
  }
  body.layout-basic[data-mobile-page="draw"] > .container > main > .jackpot-hero:has(.ldj-foil-machine-slot.is-loaded) {
    min-height: max(21.25rem, min(calc(100vw + 11.25rem), calc(100dvh - 20rem)));
  }
  body.layout-basic[data-mobile-page="draw"] > .container > main > .jackpot-hero > .jackpot-hero__draw {
    flex: 1 1 0; min-height: 0;
  }
  body.layout-basic[data-mobile-page="draw"] .jackpot-hero__draw > .jackpot-hero__machine {
    container-type: size; flex: 1 1 0; min-height: 0;
    --jp-foil-row: 0px; --draw-chrome: calc(9rem + var(--jp-foil-row));
    --jp-foil-size: 2.75rem;
    --jp-board-size: max(8rem, min(calc(100cqi - 1rem), 28rem, calc(100cqh - var(--draw-chrome))));
    --draw-spare: max(0px, calc(100cqh - var(--draw-chrome) - var(--jp-board-size)));
    --jp-stage-top: calc(2.46rem + min(.5rem, var(--draw-spare) * .2));
    --jp-action-width: min(18rem, calc(100cqi - 7rem));
    --jp-chainlink-size: 2.5rem; --jp-chainlink-gap: .5rem;
    background:
      radial-gradient(80% 50% at 50% 30%, #13322570, transparent),
      repeating-linear-gradient(45deg, #d8e8dc03 0 1px, transparent 1px 5px),
      url('/app/assets/jackpot/daily-drawing-backplate-v9.webp') center / 100% 100% no-repeat, #03100b;
  }
  body.layout-basic[data-mobile-page="draw"] .jackpot-hero__machine:has(.ldj-foil-machine-slot.is-loaded) {
    --jp-foil-row: 3.5rem;
  }
  body.layout-basic[data-mobile-page="draw"] .jackpot-hero__machine > .jackpot-hero__draw-title {
    height: 2rem; flex-basis: 2rem; padding: .15rem .4rem;
    margin-bottom: calc(-.02rem + min(.5rem, var(--draw-spare) * .2));
  }
  body.layout-basic[data-mobile-page="draw"] .jackpot-hero__machine replay-panel .replay-ticket {
    margin-bottom: calc(.24rem + var(--jp-foil-row) + max(0px, var(--draw-spare) - min(.5rem, var(--draw-spare) * .2)));
  }
  body.layout-basic[data-mobile-page="draw"] .jackpot-hero__machine .ldj-foil-machine-bank {
    top: calc(var(--jp-stage-top) + var(--jp-board-size) + .5rem);
    width: max-content; height: var(--jp-foil-size);
    grid-template-columns: repeat(4, var(--jp-foil-size)); grid-template-rows: 1fr; gap: .65rem;
  }
  body.layout-basic[data-mobile-page="draw"] .jackpot-hero__machine .ldj-foil-machine-slot:nth-child(n) {
    grid-column: auto; grid-row: 1;
  }
  body.layout-basic[data-mobile-page="draw"] .ldj-foil-machine-bank:not(:has(.is-loaded)),
  body.layout-basic[data-mobile-page="draw"] .ldj-foil-machine-bank::before,
  body.layout-basic[data-mobile-page="draw"] .ldj-foil-machine-bank::after,
  body.layout-basic[data-mobile-page="draw"] .ldj-foil-machine-current,
  body.layout-basic[data-mobile-page="draw"] .jackpot-board-current { display: none; }
}

/* ---- Buy ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Pack labels need to read at phone distance. Let narrower four-product
     shelves wrap the level/count instead of shrinking them to tiny stamps. */
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel .dec-pack-face {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel .dec-ticket-pieces .dec-pack-face :is(.dec-pack-level, .dec-pack-count) {
    font-size: .75rem;
    line-height: 1.05;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
  }
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel .dec-ticket-pieces:has(.dec-ticket-piece--foil:not([hidden])) .dec-pack-face :is(.dec-pack-level, .dec-pack-count) {
    font-size: clamp(.625rem, 2.7vw, .75rem);
  }
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel .dec-pack-face .dec-pack-level {
    font-weight: 800;
  }
  /* Builders take all the height the panel has left; each builder card
     stretches to its half and centres its art. */
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel .dec-purchase-builders {
    flex: 1 1 auto;
    grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr);
    align-items: stretch;
  }
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel .dec-purchase-builders > .dec-purchase-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    min-height: 0;
    height: auto;
  }
  /* Footer sat on an auto margin; the builders now absorb that space. */
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel .dec-purchase-footer {
    margin-top: 0;
  }
}
/* Short phones: shrink the pass mark and tighten the card padding so the
   whole page fits when it can. */
@media (max-width: 768px) and (max-height: 700px) {
  body.layout-basic[data-mobile-page="buy"] > .container > main {
    padding-bottom: 0.25rem;
  }
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel {
    gap: 0.15rem;
  }
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel .dec-purchase-footer {
    grid-template-columns: min(34%, 4rem) minmax(0, 1fr);
  }
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel .dec-purchase-builders {
    gap: 0.15rem;
  }
  body.layout-basic[data-mobile-page="buy"] .app-decimator-panel .dec-purchase-builders > .dec-input-group--tickets {
    padding-block: 0;
  }
}

/* ---- Flip --------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.layout-basic[data-mobile-page="flip"] > .container > main > :is(app-baf-eve, app-decimator-burn) {
    flex: none; margin: .3rem 0 0;
  }
  body.layout-basic .mobile-event-summary {
    --event-accent: #7abfff;
    display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto;
    align-items: center; gap: .5rem; box-sizing: border-box;
    width: 100%; min-height: 3.5rem; padding: .4rem .55rem;
    border: 1px solid #426689; border-radius: 8px;
    background: linear-gradient(110deg, #122b47, #0d1320 65%); color: #eef7ff;
    font-family: "Inter", system-ui, sans-serif; text-align: left; cursor: pointer;
  }
  body.layout-basic .mobile-event-summary[data-event="decimator"] {
    --event-accent: #ffa5a9; border-color: #82414b;
    background: linear-gradient(110deg, #421a22, #180f15 65%);
  }
  body.layout-basic .mobile-event-summary:focus-visible { outline: 2px solid var(--event-accent); outline-offset: -3px; }
  body.layout-basic .mobile-event-summary__mark { width: 2rem; height: 2rem; object-fit: contain; }
  body.layout-basic .mobile-event-summary__copy,
  body.layout-basic .mobile-event-summary__pool { display: grid; min-width: 0; gap: .2rem; }
  body.layout-basic .mobile-event-summary__copy strong { font-size: .7rem; letter-spacing: .04em; }
  body.layout-basic .mobile-event-summary__copy small { color: var(--event-accent); font-size: .55rem; line-height: 1.2; }
  body.layout-basic .mobile-event-summary__pool { text-align: right; }
  body.layout-basic .mobile-event-summary__pool strong { font-size: .85rem; font-variant-numeric: tabular-nums; }
  body.layout-basic .mobile-event-summary__pool small { color: #aaaab9; font-size: .48rem; }
  body.layout-basic .mobile-event-summary__action { display: grid; justify-items: center; color: var(--event-accent); font-size: .48rem; }
  body.layout-basic .mobile-event-summary__action b { font-size: 1.2rem; line-height: .9; }
  body.layout-basic .mobile-event-sheet:not([open]) { display: none; }
  body.layout-basic .mobile-event-sheet[open] {
    position: fixed; display: flex; flex-direction: column; box-sizing: border-box;
    top: calc(var(--mpager-vv-top, 0px) + var(--mpager-vv-h, 100dvh) / 2);
    bottom: auto; width: min(36rem, calc(100vw - 1rem)); max-width: none;
    max-height: calc(var(--mpager-vv-h, 100dvh) - 1rem); margin: 0 auto;
    padding: .45rem; border: 1px solid #6e647b; border-radius: 12px;
    background: #100e18; color: #f5efe0; transform: translateY(-50%);
    box-shadow: 0 15px 60px #000a; overflow: hidden;
  }
  body.layout-basic .mobile-event-sheet::backdrop { background: #05040bd9; }
  body.layout-basic .mobile-event-sheet__header {
    display: flex; flex: none; align-items: center; justify-content: space-between; gap: .6rem;
    padding-left: .5rem; font: 800 .75rem/1.2 "Inter", system-ui, sans-serif;
  }
  body.layout-basic .mobile-event-sheet__close {
    flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
    border: 0; border-radius: 8px; background: #25202f; color: #fff; font-size: 1.5rem; cursor: pointer;
  }
  body.layout-basic .mobile-event-sheet__body { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body.layout-basic .mobile-event-sheet__body > :is(.dbb, .baf-eve) { margin-top: .4rem; }

  /* Only active events reserve space. Size the table's coin and empty felt
     from its remaining height instead of the whole phone screen. */
  body.layout-basic[data-mobile-page="flip"] > .container > main:has(> :is(app-baf-eve, app-decimator-burn):not([hidden])) > .jackpot-hero {
    flex: 1 1 0; min-height: 23rem;
  }
  body.layout-basic[data-mobile-page="flip"] > .container > main:has(> :is(app-baf-eve, app-decimator-burn):not([hidden])) app-daily-flip {
    container-type: size; flex: 1 1 0; min-height: 0;
  }
  body.layout-basic[data-mobile-page="flip"] > .container > main:has(> :is(app-baf-eve, app-decimator-burn):not([hidden])) .app-daily-flip {
    flex: 1 1 0; min-height: 0;
    --df-flip-coin: clamp(105px, calc(100cqh * .27), 180px);
    --df-flip-oval-h: clamp(3.25rem, calc(100cqh * .13), 5rem);
  }
  /* Table geometry. The felt seam sits at 50% of the panel. The lower
     fixtures (Tomorrow + funds) are ~6.75rem tall and pinned to the bottom.
     Today's bet sits in the upper part of the red band, nearly felt-wide,
     and the watermark takes the lane between it and Tomorrow. */
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip {
    --df-flip-oval-h: calc(4.35rem + (100dvh - 667px) * 0.11);
    --df-flip-today-mid: calc(75% - 3.9rem);
    --df-flip-today-w: calc(100% - 2 * var(--df-table-content-inset, 0.76rem) - 1.4rem);
  }

  /* Green: the coin stage takes the rest of the felt above the BAF cap, so
     the coin sits centred in the green instead of hugging the title bar. */
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip .df-coin-stage {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: calc(50% - 4.6rem);
    min-height: clamp(130px, 16vw, 170px);
  }
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip .df-coin-zone {
    height: 100%;
    box-sizing: border-box;
  }
  /* The coin, its rings and the DAILY AT 6 PM arc grow with the screen
     (desktop caps the coin at 110px on phones). */
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip {
    --df-flip-coin: clamp(120px, calc(135px + (100dvh - 667px) * 0.32), 205px);
  }
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip .df-coin {
    width: var(--df-flip-coin);
    height: var(--df-flip-coin);
  }
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip .df-coin-stage::after {
    width: calc(var(--df-flip-coin) * 1.16);
    outline-offset: calc(var(--df-flip-coin) * 0.075);
  }
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip .df-once-daily {
    width: calc(var(--df-flip-coin) * 1.3);
  }
  /* The Reverse card rests on the bigger coin's rim, clear of the Last 25
     rail; its tap animation still travels onto the coin face. */
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip :is(.df-reversi-card, .df-reversi-card--live-tap) {
    left: calc(50% + var(--df-flip-coin) / 2 - 0.35rem);
  }

  /* Red: Today's bet oval grows with the screen; the quest bubble docks to
     its corner. Auto-rebuy moves beside Tomorrow's bet so Today can span the
     felt. */
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip .df-bet-table {
    top: var(--df-flip-today-mid);
    width: var(--df-flip-today-w);
    translate: 0 -50%;
  }
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip .df-bet-oval {
    height: var(--df-flip-oval-h);
  }
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip .df-auto-rebuy-cta {
    top: calc(100% - 5.8rem);
    translate: 0 -50%;
  }
  body.layout-basic[data-mobile-page="flip"] .app-daily-flip .df-table-quest {
    top: calc(var(--df-flip-today-mid) - (var(--df-flip-oval-h) + 0.56rem) / 2 + 0.1rem);
    left: calc(50% - var(--df-flip-today-w) / 2 - 0.3rem);
  }
  /* The stacked hero hides the watermark (coinflip-chipset.css); the phone
     table has a clear lane for it between Today and Tomorrow. */
  body.layout-basic[data-mobile-page="flip"] .jackpot-hero .df-table-watermark {
    display: flex;
    top: calc((var(--df-flip-today-mid) + var(--df-flip-oval-h) / 2 + 100% - 6.75rem) / 2);
    /* The nudge centres the lettering, not the flame tip, in the lane. */
    transform: translate(-50%, calc(-50% + 0.22rem)) scale(1.3);
  }
}
@media (max-width: 768px) and (max-height: 720px) {
  body.layout-basic[data-mobile-page="flip"] .jackpot-hero .df-table-watermark {
    transform: translate(-50%, calc(-50% + 0.22rem)) scale(0.9);
  }
}

/* ---- Quests ------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Quest board: the quest cards and the Timed card share the spare height;
     the referral strip keeps its own size. */
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub > app-quest-panel {
    display: flex;
    flex: 3 1 auto;
    flex-direction: column;
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .app-quest-panel {
    flex: 1 1 auto;
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .qst-slots {
    flex: 1 1 auto;
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .qst-slot {
    align-content: space-evenly;
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub__rewards {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .side-bets-rail {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .side-bets-rail:not(:has(.has-live-book, .pari-error:not([hidden]))) {
    display: none;
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .side-bets-rail > app-parimutuel-panel,
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .app-parimutuel.has-live-book,
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .app-parimutuel.has-live-book > .pari-bet-container,
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .app-parimutuel.has-live-book .pari-books {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .pari-bet-container[hidden],
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .pari-books[hidden] {
    display: none;
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .pari-books > .pari-book:not([hidden]) {
    flex: 1 1 auto;
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .pari-books > .pari-book {
    align-content: space-evenly;
  }
}

/* ---- Craps -------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* The schedule takes whatever height the header and felt leave, and its
     rows share it. The felt stays at its natural size at the bottom. */
  body.layout-basic[data-mobile-page="craps"] .craps-entry__lobby {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  body.layout-basic[data-mobile-page="craps"] .craps-entry__listing {
    flex: 1 0 auto;
  }
  /* Compact natural row (~30px); extra height is split across the rows. */
  body.layout-basic[data-mobile-page="craps"] .craps-entry__listing tbody tr:not(.craps-entry__results-head) {
    height: 1.9rem;
  }
  body.layout-basic[data-mobile-page="craps"] .craps-entry__action > button,
  body.layout-basic[data-mobile-page="craps"] .craps-entry__entered {
    height: 1.7rem;
    min-height: 1.7rem;
  }
}
/* Short phones: tighten the header, column heads and rows so the schedule
   and the felt both fit without scrolling. */
@media (max-width: 768px) and (max-height: 720px) {
  body.layout-basic[data-mobile-page="craps"] > .container > main {
    padding-bottom: 0.3rem;
  }
  body.layout-basic[data-mobile-page="craps"] .craps-entry__head {
    grid-template-rows: minmax(0, 1fr) 1.3rem;
  }
  body.layout-basic[data-mobile-page="craps"] .craps-entry__flip-mark {
    width: 1rem;
    height: 1rem;
    flex-basis: 1rem;
  }
  body.layout-basic[data-mobile-page="craps"] .craps-entry__listing thead th {
    height: 0.9rem;
    padding-block: 0.02rem;
  }
  body.layout-basic[data-mobile-page="craps"] .craps-entry__listing tbody tr:not(.craps-entry__results-head) {
    height: 1.65rem;
  }
  body.layout-basic[data-mobile-page="craps"] .craps-entry__listing tbody :is(th, td) {
    padding-block: 0.04rem;
  }
  body.layout-basic[data-mobile-page="craps"] .craps-entry__action > button,
  body.layout-basic[data-mobile-page="craps"] .craps-entry__entered {
    height: 1.45rem;
    min-height: 1.45rem;
  }
}

/* ---- Degenerette -------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Panel chain: frame -> setup -> symbol block -> brand -> carousel stage
     all grow; the wager deck keeps its natural size. */
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel > .app-degenerette-panel {
    flex: 1 0 auto;
  }
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel .deg-setup {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 0;
  }
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel .deg-block--symbol {
    flex: 1 0 auto;
    align-self: stretch;
    height: auto;
  }
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel .deg-wager-column {
    flex: 0 0 auto;
  }
}

/* Short phones: tighten spacing and let the carousel shrink before scrolling. */
@media (max-width: 768px) and (max-height: 720px) {
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel .deg-quickplay-controls {
    min-height: 6rem;
  }
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel .deg-setup,
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel .deg-quickplay-brand {
    gap: 5px;
  }
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel .deg-currency-picker {
    margin-bottom: 4px;
  }
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel .deg-amount-presets {
    margin-top: 0.3rem;
  }
  body.layout-basic[data-mobile-page="degenerette"] app-degenerette-panel .deg-block--wager .deg-place-cta {
    margin-top: 0.25rem;
    min-height: 2.4rem;
    padding-block: 0.3rem;
  }
}
/* Short phones: quest cards may drop below their 5.25rem floor so the whole
   board fits without scrolling. */
@media (max-width: 768px) and (max-height: 720px) {
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .qst-slots {
    grid-auto-rows: minmax(4.5rem, 1fr);
  }
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .qst-slot {
    min-height: 4.5rem;
  }
  /* A card carrying a note (the level quest's unlock line) needs its row. */
  body.layout-basic[data-mobile-page="quests"] .play-grid .quest-hub .qst-slot:has(.qst-slot-note) {
    min-height: 5.75rem;
  }
}

/* ---- afKing passes popup + deity picker (phones) ------------------------- */
/* One screen each: the popup stacks Lazy, Whale, Deity and the afKing card
   without scrolling, and the picker shows all 32 symbols, eight per family. */
@media (max-width: 768px) {
  /* Popup chrome */
  body.layout-basic #panel-passes .panel-popup__header { padding: 0.3rem 0.35rem 0.3rem 0.75rem; }
  body.layout-basic #panel-passes .panel-popup__close { width: 2.25rem; min-width: 0; height: 2.25rem; min-height: 0; font-size: 1.25rem; }
  body.layout-basic #panel-passes .panel-popup__body { padding: 0.4rem; }
  body.layout-basic #panel-passes app-pass-section { gap: 0.4rem; }
  body.layout-basic #panel-passes .app-pass-section { gap: 0.4rem; margin: 0; padding: 0.4rem; }
  body.layout-basic #panel-passes .pass-afking { margin: 0; }

  /* Lazy + whale: title and line, a one-line perk strip, then the checkout row. */
  body.layout-basic #panel-passes .pass-product-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.38rem;
    padding: 0.5rem 0.55rem;
    border-radius: 11px;
  }
  body.layout-basic #panel-passes .pass-product-heading { gap: 0.45rem; }
  body.layout-basic #panel-passes .pass-product-sigil { width: 2.1rem; height: 2.1rem; border-radius: 8px; font-size: 0.66rem; }
  body.layout-basic #panel-passes .pass-product-description { font-size: 0.68rem; line-height: 1.25; }
  body.layout-basic #panel-passes .pass-product-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  body.layout-basic #panel-passes .pass-product-perks > span { padding: 0.2rem 0.38rem; font-size: 0.56rem; }
  body.layout-basic #panel-passes .pass-product-perks > .pass-lootbox-perk { padding: 0.22rem 0.42rem; font-size: 0.58rem; }
  body.layout-basic #panel-passes .pass-product-checkout {
    width: auto;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 0.35rem;
  }
  body.layout-basic #panel-passes .pass-product-checkout--whale { grid-template-columns: 8.5rem minmax(0, 1fr); }
  body.layout-basic #panel-passes .pass-product-checkout--whale .pass-product-quantity {
    grid-column: 1;
    grid-template-columns: auto minmax(1.6rem, 1fr) 3.6rem;
  }
  body.layout-basic #panel-passes .pass-product-checkout--whale .pass-whale-buy { grid-column: 2; }
  body.layout-basic #panel-passes .pass-product-checkout--whale :is(.pass-product-quantity, .pass-whale-buy, .pass-whale-input),
  body.layout-basic #panel-passes .pass-product-row :is(.pass-whale-buy, .pass-lazy-buy) {
    width: 100%;
    height: 2.3rem;
    min-height: 2.3rem;
    max-height: 2.3rem;
    padding-block: 0.15rem;
  }

  /* Deity shelf: the luckbox chip shares the buy row. */
  body.layout-basic #panel-passes .pass-deity-summary { grid-template-columns: auto minmax(0, 1fr); }
  body.layout-basic #panel-passes .pass-deity-summary > .pass-product-heading { grid-column: 1 / -1; }
  body.layout-basic #panel-passes .pass-deity-summary .pass-product-perks--deity { grid-column: 1; grid-row: 2; width: auto; align-self: center; }
  body.layout-basic #panel-passes .pass-deity-summary .pass-deity-open-wrap { grid-column: 2; grid-row: 2; }
  body.layout-basic #panel-passes .pass-deity-summary { gap: 0.4rem; padding: 0.5rem 0.55rem; }
  body.layout-basic #panel-passes .pass-deity-wordmark { --deity-badge-size: 2.4rem; width: 9.5rem; flex-basis: 9.5rem; }
  body.layout-basic #panel-passes .pass-deity-summary .pass-product-description { font-size: 0.66rem; line-height: 1.25; }
  body.layout-basic #panel-passes .pass-product-perks--deity { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  body.layout-basic #panel-passes .pass-product-perks--deity > span { display: block; width: auto; min-height: 0; padding: 0.2rem 0.38rem; white-space: nowrap; }
  /* The description already names these; the luckbox chip carries the price. */
  body.layout-basic #panel-passes .pass-product-perks--deity > :is([data-bind="pass-deity-symbol-entries"], [data-bind="pass-deity-perpetual"], [data-bind="pass-deity-mining"]) { display: none; }
  body.layout-basic #panel-passes .pass-deity-open { min-height: 2.15rem; padding-block: 0.2rem; white-space: normal; }

  /* afKing subscription */
  body.layout-basic #panel-passes .pass-afking { gap: 0.4rem; padding: 0.5rem 0.55rem; border-radius: 11px; }
  body.layout-basic #panel-passes .pass-afking .pass-product-sigil--afking { width: 2.4rem; }
  body.layout-basic #panel-passes .pass-afking__head .pass-section-title { font-size: 0.9rem; }
  body.layout-basic #panel-passes .pass-afking__quick { padding-top: 0.35rem; }
  body.layout-basic #panel-passes .pass-afking__quick {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.35rem;
  }
  body.layout-basic #panel-passes .pass-afking__quick > .pass-afking__balance { grid-column: 1; grid-row: 1; width: auto; }
  body.layout-basic #panel-passes .pass-afking__quick > :is(.pass-afking__claim-button, .pass-afking__edit) {
    grid-row: 1;
    width: auto;
    height: 1.9rem;
    min-height: 1.9rem;
    max-height: 1.9rem;
    padding: 0 0.9rem;
  }
  body.layout-basic #panel-passes .pass-afking__topup { grid-column: 1 / -1; grid-row: 2; }
  body.layout-basic #panel-passes :is(.pass-afking__topup-field, .pass-afking__topup-field input, .pass-afking__topup > .pass-afking__fund-button) {
    height: 2.3rem;
    min-height: 2.3rem;
    max-height: 2.3rem;
  }

  /* Deity picker: every symbol on one screen, one row of eight per family. */
  body.layout-basic #panel-passes .pass-deity-dialog { place-items: center; padding: 0.4rem; }
  body.layout-basic #panel-passes .pass-deity-dialog__card { gap: 0.5rem; padding: 0.6rem; max-height: calc(100dvh - 0.8rem); }
  body.layout-basic #panel-passes .pass-deity-dialog__head { padding-bottom: 0.45rem; }
  body.layout-basic #panel-passes .pass-deity-dialog__head > span { grid-auto-flow: column; align-items: center; justify-content: start; gap: 0.6rem; }
  body.layout-basic #panel-passes .pass-deity-dialog__wordmark { --deity-badge-size: 2.4rem; width: 8.5rem; margin: 0; }
  body.layout-basic #panel-passes .pass-deity-dialog__head strong { font-size: 0.8rem; }
  body.layout-basic #panel-passes .pass-deity-dialog__close { width: 2rem; height: 2rem; }
  body.layout-basic #panel-passes .pass-deity-dialog__selection { grid-template-columns: 2.4rem minmax(0, 1fr); min-height: 0; padding: 0.35rem 0.55rem; }
  body.layout-basic #panel-passes .pass-deity-preview { width: 2.4rem; height: 2.4rem; }
  body.layout-basic #panel-passes .pass-deity-symbol-groups { gap: 0.4rem; }
  body.layout-basic #panel-passes .pass-deity-symbol-group { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  body.layout-basic #panel-passes .pass-deity-symbol-group__title { font-size: 0.58rem; }
  body.layout-basic #panel-passes .pass-deity-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.22rem; }
  body.layout-basic #panel-passes .pass-deity-symbol {
    min-height: 0;
    aspect-ratio: 1;
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
    border-radius: 7px;
  }
  body.layout-basic #panel-passes .pass-deity-symbol img { width: 100%; height: 100%; }
  body.layout-basic #panel-passes .pass-deity-symbol--genesis { aspect-ratio: 1; }
  body.layout-basic #panel-passes .pass-deity-symbol--genesis::after {
    position: absolute;
    right: 0;
    bottom: 0.08rem;
    left: 0;
    font-size: 0.4rem;
    letter-spacing: 0.02em;
  }
  body.layout-basic #panel-passes .pass-deity-buy { min-height: 2.6rem; }
}

/* A phone's benefit chips need the full card width. Keep the Deity action on
   its own row so the chips cannot squeeze it beyond the card or viewport. */
@media (max-width: 640px) {
  body.layout-basic #panel-passes .pass-deity-summary { grid-template-columns: minmax(0, 1fr); }
  body.layout-basic #panel-passes .pass-deity-summary .pass-deity-open-wrap { grid-column: 1; grid-row: 3; }
  body.layout-basic #panel-passes .pass-deity-open { white-space: pre-line; }
}

/* ---- Phone wallet route sheet (wallet-route-sheet.js) ---------------------- */
.wallet-route-sheet {
  position: fixed;
  z-index: 13100;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 0.6rem 0.6rem max(0.6rem, env(safe-area-inset-bottom));
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.wallet-route-sheet__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(5, 6, 12, 0.78);
  backdrop-filter: blur(6px);
}
.wallet-route-sheet__card {
  position: relative;
  display: grid;
  width: min(100%, 26rem);
  gap: 0.55rem;
  padding: 1rem;
  box-sizing: border-box;
  border: 1px solid rgba(245, 166, 35, 0.5);
  border-radius: 14px;
  background: linear-gradient(160deg, #221a10, #0e0d14 70%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  color: #f5efe0;
}
.wallet-route-sheet__card strong {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.wallet-route-sheet__card p {
  margin: 0 0 0.2rem;
  color: #b9b2c6;
  font-size: 0.8rem;
  line-height: 1.4;
}
.wallet-route-sheet__card button {
  min-height: 2.9rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.07em;
  cursor: pointer;
}
.wallet-route-sheet__primary {
  border: 1px solid #f6c25a;
  background: linear-gradient(180deg, #f5a623, #b8701a);
  color: #1d1205;
}
.wallet-route-sheet__secondary {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #e8e2f2;
}
.wallet-route-sheet__card .wallet-route-sheet__link {
  min-height: 2.2rem;
  border: 0;
  background: transparent;
  color: #f6c25a;
  font-size: 0.68rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wallet-route-sheet__card .wallet-route-sheet__close {
  min-height: 2.2rem;
  border: 0;
  background: transparent;
  color: #8f8a9e;
}
/* Passkey wallet fallback for players with no wallet (Coinbase Smart Wallet). */
.wallet-route-sheet__create {
  border: 1px solid rgba(45, 212, 191, 0.55);
  background: rgba(45, 212, 191, 0.08);
  color: #99f6e4;
}
/* A computer with no wallet extension sees the same sheet as a centred card. */
@media (min-width: 769px) {
  .wallet-route-sheet { place-items: center; }
}

/* ---- Phone readability floor ------------------------------------------------
   Real-phone audit (Pixel 9, 411 px wide, 2026-10-18): labels sized off desktop
   widths computed as small as 4.5 px (Craps), 6.4 px (Flip) and 5.8 px (More),
   and several controls were 16-27 px. Labels get a ~9 px floor (8 px for the
   smallest kickers); small controls get a larger touch box without moving the
   art. The selector outranks each panel's own rule on purpose. */
@media (max-width: 768px) {
  html body.layout-basic[data-mobile-page] :is(
    .craps-entry__wager, .craps-entry__battle-key, .craps-entry__buy-in-heading,
    .craps-full-day-range-note, app-craps-entry th,
    .df-coinflip-record__label, .df-bet-chip-rack,
    .df-baf-score__unit, .df-reveal-cue__copy, .df-funds__box-label, .df-funds__title,
    .records-rail__leader-bounty-amount, .records-rail__leader-holder,
    .dec-ticket-clear, .dec-funds__summary-label, .qst-score-label, .qst-streak-label
  ) { font-size: 9px; }
  html body.layout-basic[data-mobile-page] :is(
    .craps-entry__runup-kicker, .craps-entry__runup-submark, .craps-added-label,
    .craps-added-period
  ) { font-size: 8px; }
  /* Touch boxes: an invisible hit area around the small controls. */
  html body.layout-basic[data-mobile-page] :is(
    .craps-entry__result-replay, .dec-purchase-help, .deg-referral-info, .sdr-info,
    .dec-ticket-single-quest, .dec-ticket-stepper .dec-step
  ) { position: relative; }
  html body.layout-basic[data-mobile-page] :is(
    .craps-entry__result-replay, .dec-purchase-help, .deg-referral-info, .sdr-info,
    .dec-ticket-single-quest, .dec-ticket-stepper .dec-step
  )::after {
    position: absolute;
    inset: -10px;
    content: "";
  }
}