/*
  Clean mobile responsive layer.
  Phase 1 only places the banner and clears space for it.
  The central board scene is intentionally left untouched.
*/

.landing-top-banner,
.ag-mobile-feature-explorer,
.ag-mobile-feature-dock {
  display: none;
}

@media (max-width: 48em) and (orientation: portrait) {
  :root {
    --ag-phone-safe-top: env(safe-area-inset-top);
    --ag-phone-banner-height: min(16svh, 26vw);
    --ag-phone-banner-side-gap: 3.2vw;
    --ag-phone-banner-top-gap: calc(var(--ag-phone-banner-height) * 0.11);
    --ag-phone-chip-top: calc(var(--ag-phone-banner-height) * 0.56);
    --ag-phone-banner-line-height: 1.6%;
    --ag-phone-brand-width: 58%;
    --ag-phone-chip-width: 34%;
    --ag-phone-scoreboard-top: var(--ag-phone-banner-height);
    --ag-phone-scoreboard-scale: 0.52;
    --ag-phone-exit-scoreboard-scale: 0.47;
    --ag-scene-background-size: 114% auto;
    --ag-scene-background-position-y: calc(var(--ag-phone-safe-top) + var(--ag-phone-banner-height));
    --ag-scene-board-top: 60.5%;
    --ag-scene-board-scale: 0.98;
    --ag-scene-board-width: 70vw;
    --ag-scene-beam-top: calc(var(--ag-phone-safe-top) + var(--ag-phone-banner-height) + 8svh);
    --ag-scene-beam-width: 44vw;
    --ag-scene-beam-height: 36svh;
    --ag-neon-shell-scale: 1;
    --ag-neon-top-ratio: 0.69;
  }

  html,
  body {
    min-height: 100svh;
    min-height: 100dvh;
  }

  .cards {
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    overflow: hidden;
  }

  body {
    background-image: url("./images/portrait.webp");
    background-repeat: no-repeat;
    background-size: var(--ag-scene-background-size);
    background-position: center var(--ag-scene-background-position-y);
  }

  .landing-top-banner {
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    height: calc(var(--ag-phone-safe-top) + var(--ag-phone-banner-height));
    z-index: 28;
    pointer-events: none;
    overflow: hidden;
  }

  .landing-top-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        180deg,
        rgba(6, 12, 21, 0.985) 0%,
        rgba(9, 15, 26, 0.975) 62%,
        rgba(10, 16, 27, 0.915) 100%
      );
    box-shadow:
      0 1.6svh 3.8svh rgba(0, 0, 0, 0.34),
      inset 0 -0.12svh 0 rgba(154, 181, 212, 0.2);
    backdrop-filter: blur(1.4svh) saturate(1.04);
    -webkit-backdrop-filter: blur(1.4svh) saturate(1.04);
  }

  .landing-top-banner::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: var(--ag-phone-banner-line-height);
    background:
      linear-gradient(
        90deg,
        rgba(255, 190, 98, 0) 0%,
        rgba(255, 190, 98, 0.94) 50%,
        rgba(255, 190, 98, 0) 100%
      );
    opacity: 0.96;
  }

  body.landing-boot .ag-mobile-feature-dock,
  body.landing-boot .ag-mobile-feature-explorer {
    transition:
      opacity 460ms cubic-bezier(0.22, 0.82, 0.2, 1),
      transform 560ms cubic-bezier(0.22, 0.82, 0.2, 1),
      filter 460ms ease;
    will-change: opacity, transform, filter;
  }

  body.landing-boot-prep .ag-mobile-feature-dock,
  body.landing-boot-ui .ag-mobile-feature-dock,
  body.landing-boot-prep .ag-mobile-feature-explorer,
  body.landing-boot-ui .ag-mobile-feature-explorer {
    opacity: 0;
    transform: translateY(2.4svh);
    filter: blur(0.9svh);
    pointer-events: none;
  }

  body.landing-boot-lock .ag-mobile-feature-dock,
  body.landing-boot-ignite .ag-mobile-feature-dock,
  body.landing-boot-dice .ag-mobile-feature-dock,
  body.landing-boot-dust .ag-mobile-feature-dock,
  body.landing-boot-lock .ag-mobile-feature-explorer,
  body.landing-boot-ignite .ag-mobile-feature-explorer,
  body.landing-boot-dice .ag-mobile-feature-explorer,
  body.landing-boot-dust .ag-mobile-feature-explorer {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .hud-brand,
  body[class*="landing-boot"] .hud-brand {
    position: fixed;
    left: var(--ag-phone-banner-side-gap);
    top: calc(var(--ag-phone-safe-top) + var(--ag-phone-banner-top-gap)) !important;
    z-index: 29;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4%;
    width: var(--ag-phone-brand-width);
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
    pointer-events: none;
    transform: none !important;
    opacity: 1;
    filter: none;
  }

  .hud-brand::after {
    content: none;
  }

  .hud-logo {
    flex: 0 0 auto;
    width: 19vw !important;
    max-width: none;
    height: auto;
    display: block;
    margin-top: 0;
    padding-top: 0;
    align-self: center;
    transform: none;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hud-text {
    font-size: min(6.6vw, 3.5vh) !important;
    line-height: 0.9;
    letter-spacing: 0.05em;
    white-space: nowrap;
    align-self: center;
    transform: none;
  }

  .ag-player-chip,
  body[class*="landing-boot"] .ag-player-chip {
    position: fixed;
    left: auto;
    right: var(--ag-phone-banner-side-gap);
    top: calc(var(--ag-phone-safe-top) + var(--ag-phone-chip-top)) !important;
    z-index: 29;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6%;
    min-width: 0;
    width: auto;
    max-width: var(--ag-phone-chip-width);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none !important;
    opacity: 1;
    filter: none;
  }

  .ag-player-chip::after {
    content: none;
  }

  .ag-player-chip-avatar,
  .ag-logout-btn {
    width: 8.6vw;
    height: 8.6vw;
    min-width: 8.6vw;
    min-height: 8.6vw;
  }

  .ag-player-chip-main,
  .ag-player-chip-name,
  .ag-player-chip-sub {
    display: none !important;
  }

  .ag-player-chip-btn {
    flex: 0 1 auto;
    margin: 0;
    padding: 0 0 0 10%;
    border: 0;
    background:
      linear-gradient(
        180deg,
        rgba(255, 210, 146, 0.3) 0%,
        rgba(255, 210, 146, 0.3) 100%
      ) left center / 0.28vw 62% no-repeat;
    font-size: min(3.1vw, 1.5vh);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .top-scoreboard,
  body.landing-boot-prep .top-scoreboard,
  body.landing-boot-ui .top-scoreboard,
  body.landing-boot-lock .top-scoreboard,
  body.landing-boot-ignite .top-scoreboard,
  body.landing-boot-dice .top-scoreboard,
  body.landing-boot-dust .top-scoreboard {
    top: calc(var(--ag-phone-safe-top) + var(--ag-phone-scoreboard-top)) !important;
    width: 94vw;
    min-width: 0;
    transform: translateX(-50%) scale(var(--ag-phone-scoreboard-scale));
    transform-origin: top center;
  }

  body.landing-cta-exit-start .top-scoreboard,
  body.landing-cta-exited .top-scoreboard {
    top: calc(var(--ag-phone-safe-top) + (var(--ag-phone-banner-height) * 0.84)) !important;
    transform: translateX(-50%) scale(var(--ag-phone-exit-scoreboard-scale));
  }

  .scoreboard-cta-copy {
    gap: 0.55vh;
  }

  .scoreboard-cta-main {
    line-height: 1.02;
  }

  .scoreboard-cta-main.top {
    transform: translateY(0.12vh);
  }

  .scoreboard-cta-main.bottom {
    transform: translateY(-0.12vh);
  }

  .arena-board-stage,
  body.landing-boot-prep .arena-board-stage,
  body.landing-boot-ui .arena-board-stage,
  body.landing-boot-lock .arena-board-stage,
  body.landing-boot-ignite .arena-board-stage,
  body.landing-boot-dice .arena-board-stage,
  body.landing-boot-dust .arena-board-stage {
    position: fixed !important;
    left: 50% !important;
    top: var(--ag-scene-board-top) !important;
    width: var(--ag-scene-board-width) !important;
    min-width: 0 !important;
    transform: translate(-50%, -50%) scale(var(--ag-scene-board-scale)) !important;
  }

  body:not(.ag-scene-ready) .arena-board-stage,
  body:not(.ag-scene-ready) .mystic-beam,
  body:not(.ag-scene-ready) .spot-rise-dust,
  body:not(.ag-scene-ready) .board-v-neon,
  body:not(.ag-scene-ready) .board-v-neon-glow,
  body:not(.ag-scene-ready) #boardDiceFxCanvas,
  body:not(.ag-scene-ready) #boardParticles {
    opacity: 0 !important;
  }

  .arena-board-stage .board-motion,
  .arena-board-stage .arena-board-inner,
  .arena-board-stage .arena-board-inner img,
  body.landing-boot-prep .arena-board-stage .board-motion,
  body.landing-boot-ui .arena-board-stage .board-motion,
  body.landing-boot-lock .arena-board-stage .board-motion,
  body.landing-boot-ignite .arena-board-stage .board-motion,
  body.landing-boot-dice .arena-board-stage .board-motion,
  body.landing-boot-dust .arena-board-stage .board-motion {
    transform: none !important;
  }

  .mystic-beam,
  .spot-rise-dust,
  body.landing-boot-prep .mystic-beam,
  body.landing-boot-ui .mystic-beam,
  body.landing-boot-lock .mystic-beam,
  body.landing-boot-ignite .mystic-beam,
  body.landing-boot-dice .mystic-beam,
  body.landing-boot-dust .mystic-beam,
  body.landing-boot-prep .spot-rise-dust,
  body.landing-boot-ui .spot-rise-dust,
  body.landing-boot-lock .spot-rise-dust,
  body.landing-boot-ignite .spot-rise-dust,
  body.landing-boot-dice .spot-rise-dust,
  body.landing-boot-dust .spot-rise-dust {
    top: var(--ag-scene-beam-top) !important;
    width: var(--ag-scene-beam-width) !important;
    height: var(--ag-scene-beam-height) !important;
    transform: translateX(-50%) !important;
  }

  .cards > .card {
    display: none !important;
  }

  .ag-mobile-feature-explorer {
    position: fixed;
    left: 3vw;
    right: 3vw;
    bottom: calc(env(safe-area-inset-bottom) + 20vw);
    z-index: 31;
    display: grid;
    gap: 2vw;
    pointer-events: none;
  }

  .ag-mobile-feature-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 24svh;
    border: 0.28vw solid rgba(255, 194, 105, 0.18);
    border-radius: 5vw;
    background:
      linear-gradient(180deg, rgba(11, 16, 28, 0.97) 0%, rgba(9, 14, 24, 0.95) 100%);
    box-shadow:
      0 3svh 5svh rgba(0, 0, 0, 0.28),
      inset 0 0.18svh 0 rgba(255, 255, 255, 0.05);
    pointer-events: auto;
  }

  .ag-mobile-feature-panel[hidden] {
    display: none !important;
  }

  .ag-mobile-feature-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 22%, rgba(255, 174, 64, 0.2), transparent 38%),
      linear-gradient(135deg, rgba(255, 196, 102, 0.14), transparent 44%);
    pointer-events: none;
  }

  .ag-mobile-feature-media {
    position: absolute;
    inset: 0 0 0 30%;
    background-position: center center;
    background-size: cover;
    opacity: 0.52;
    filter: saturate(1.04) brightness(0.92);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.44) 18%, rgba(0, 0, 0, 0.94) 52%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.44) 18%, rgba(0, 0, 0, 0.94) 52%, black 100%);
  }

  .ag-mobile-feature-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(8, 12, 20, 0.92) 0%, rgba(8, 12, 20, 0.68) 28%, rgba(8, 12, 20, 0.18) 62%, rgba(8, 12, 20, 0) 100%),
      linear-gradient(180deg, rgba(8, 12, 20, 0) 0%, rgba(8, 12, 20, 0.18) 56%, rgba(8, 12, 20, 0.54) 100%);
  }

  .ag-mobile-feature-panel-content {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: start;
    row-gap: 1.6vw;
    min-height: 24svh;
    max-width: 74%;
    padding: 4vw 4vw 4.4vw;
  }

  .ag-mobile-feature-title {
    margin: 0;
    color: #ffb54e;
    font-size: 7.2vw;
    line-height: 0.92;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    text-shadow: 0 1.4svh 3svh rgba(255, 171, 78, 0.18);
  }

  .ag-mobile-feature-copy {
    margin: 0;
    color: rgba(241, 244, 252, 0.92);
    font-size: 3.2vw;
    line-height: 1.34;
  }

  .ag-mobile-feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1vw;
  }

  .ag-mobile-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.4vw;
    color: rgba(238, 241, 248, 0.92);
    font-size: 2.9vw;
    line-height: 1.24;
  }

  .ag-mobile-feature-list li::before {
    content: "";
    width: 1.5vw;
    height: 1.5vw;
    margin-top: 1.1vw;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffd477 0%, #ffae43 100%);
    box-shadow: 0 0 2.2vw rgba(255, 182, 78, 0.42);
    flex: 0 0 1.5vw;
  }

  .ag-mobile-feature-dock {
    position: fixed;
    left: 3vw;
    right: 3vw;
    bottom: calc(env(safe-area-inset-bottom) + 2vw);
    z-index: 32;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.4vw;
    padding: 1.8vw;
    border-radius: 4.6vw;
    background:
      linear-gradient(180deg, rgba(27, 36, 51, 0.94) 0%, rgba(10, 16, 28, 0.96) 100%);
    border: 0.28vw solid rgba(255, 205, 134, 0.18);
    box-shadow:
      0 2.8svh 5svh rgba(0, 0, 0, 0.28),
      inset 0 0.16svh 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(1.4svh) saturate(1.05);
    -webkit-backdrop-filter: blur(1.4svh) saturate(1.05);
  }

  .ag-mobile-feature-dock-btn {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0.24vw solid rgba(176, 196, 222, 0.16);
    border-radius: 3.6vw;
    background:
      radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 54%),
      linear-gradient(180deg, rgba(20, 29, 42, 0.96) 0%, rgba(11, 17, 30, 0.98) 100%);
    box-shadow:
      inset 0 0.14svh 0 rgba(255, 255, 255, 0.06),
      0 1.8svh 3svh rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      border-color 180ms ease,
      background 180ms ease;
  }

  .ag-mobile-feature-dock-btn img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    filter: drop-shadow(0 0 2.2vw rgba(255, 186, 110, 0.2));
    pointer-events: none;
  }

  .ag-mobile-feature-dock-btn.is-active {
    border-color: rgba(255, 196, 118, 0.42);
    background:
      radial-gradient(circle at 30% 22%, rgba(255, 214, 150, 0.22) 0%, rgba(255, 255, 255, 0) 54%),
      linear-gradient(180deg, rgba(42, 30, 17, 0.98) 0%, rgba(19, 15, 20, 0.98) 100%);
    box-shadow:
      inset 0 0.16svh 0 rgba(255, 245, 224, 0.16),
      0 2.2svh 3.6svh rgba(0, 0, 0, 0.24),
      0 0 0 0.2vw rgba(255, 192, 104, 0.08);
    transform: translateY(-1%);
  }

  .ag-mobile-feature-dock-btn.is-active img {
    filter:
      drop-shadow(0 0 2.6vw rgba(255, 196, 118, 0.32))
      saturate(1.06);
  }

  .ag-mobile-feature-panel.is-entering {
    animation: agFeaturePanelReveal 260ms cubic-bezier(.22, .8, .3, 1);
  }

  @keyframes agFeaturePanelReveal {
    from {
      opacity: 0;
      transform: translateY(4%) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

@media (max-width: 48em) and (orientation: portrait) and (max-height: 46.5em) {
  :root {
    --ag-scene-background-size: 100% auto;
    --ag-scene-background-position-y: calc(var(--ag-phone-safe-top) + var(--ag-phone-banner-height) - 1svh);
    --ag-phone-scoreboard-scale: 0.48;
    --ag-phone-exit-scoreboard-scale: 0.43;
    --ag-scene-board-top: 72.2%;
    --ag-scene-board-scale: 1.15;
    --ag-scene-board-width: 83vw;
    --ag-scene-beam-top: calc(var(--ag-phone-safe-top) + var(--ag-phone-banner-height) + 12.8svh);
    --ag-scene-beam-width: 42vw;
    --ag-scene-beam-height: 47svh;
    --ag-neon-shell-scale: 0.84;
    --ag-neon-top-ratio: 0.775;
    --ag-neon-lift-px: 7;
    --ag-particle-emitter-x-ratio: 0.5;
    --ag-particle-emitter-y-ratio: 0.56;
    --ag-particle-emitter-offset-x: 0;
    --ag-particle-emitter-offset-y: 0;
    --ag-particle-spread-x-ratio: 0.028;
    --ag-particle-spread-y-ratio: 0.011;
  }

  .scoreboard-cta-static,
  body.landing-boot-prep .scoreboard-cta-static,
  body.landing-boot-ui .scoreboard-cta-static,
  body.landing-boot-lock .scoreboard-cta-static,
  body.landing-boot-ignite .scoreboard-cta-static,
  body.landing-boot-dice .scoreboard-cta-static,
  body.landing-boot-dust .scoreboard-cta-static {
    transform: translate(-50%, -50%) scale(0.93);
    transform-origin: center;
  }

  .ag-mobile-feature-explorer {
    display: none !important;
  }

  .ag-mobile-feature-explorer.is-open {
    display: grid !important;
  }

  .board-v-neon::before {
    opacity: 0;
    filter: blur(0.9svh);
  }

  .board-v-neon-glow::before {
    content: "";
    position: absolute;
    inset: -9% -11%;
    background: radial-gradient(
      ellipse at 50% 73%,
      rgba(255, 123, 34, 0.4) 0%,
      rgba(255, 103, 20, 0.22) 34%,
      rgba(214, 79, 16, 0.14) 52%,
      transparent 74%
    );
    filter: blur(0.9svh);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
  }

  .arena-board-stage .board-energy,
  .arena-board-stage .board-core-light,
  body.landing-boot-prep .arena-board-stage .board-energy,
  body.landing-boot-ui .arena-board-stage .board-energy,
  body.landing-boot-lock .arena-board-stage .board-energy,
  body.landing-boot-ignite .arena-board-stage .board-energy,
  body.landing-boot-dice .arena-board-stage .board-energy,
  body.landing-boot-dust .arena-board-stage .board-energy,
  body.landing-boot-prep .arena-board-stage .board-core-light,
  body.landing-boot-ui .arena-board-stage .board-core-light,
  body.landing-boot-lock .arena-board-stage .board-core-light,
  body.landing-boot-ignite .arena-board-stage .board-core-light,
  body.landing-boot-dice .arena-board-stage .board-core-light,
  body.landing-boot-dust .arena-board-stage .board-core-light {
    top: 51% !important;
  }

  .arena-board-stage::before,
  .arena-board-stage::after,
  body.landing-boot-prep .arena-board-stage::before,
  body.landing-boot-ui .arena-board-stage::before,
  body.landing-boot-lock .arena-board-stage::before,
  body.landing-boot-ignite .arena-board-stage::before,
  body.landing-boot-dice .arena-board-stage::before,
  body.landing-boot-dust .arena-board-stage::before,
  body.landing-boot-prep .arena-board-stage::after,
  body.landing-boot-ui .arena-board-stage::after,
  body.landing-boot-lock .arena-board-stage::after,
  body.landing-boot-ignite .arena-board-stage::after,
  body.landing-boot-dice .arena-board-stage::after,
  body.landing-boot-dust .arena-board-stage::after {
    opacity: 0 !important;
  }

  .arena-board-inner,
  body.landing-boot-prep .arena-board-stage .arena-board-inner,
  body.landing-boot-ui .arena-board-stage .arena-board-inner,
  body.landing-boot-lock .arena-board-stage .arena-board-inner,
  body.landing-boot-ignite .arena-board-stage .arena-board-inner,
  body.landing-boot-dice .arena-board-stage .arena-board-inner,
  body.landing-boot-dust .arena-board-stage .arena-board-inner {
    z-index: 12 !important;
    filter:
      drop-shadow(0 0 0.48svh rgba(255, 157, 74, 0.34))
      drop-shadow(0 0 1.08svh rgba(255, 114, 22, 0.26))
      drop-shadow(0 0 2.1svh rgba(205, 71, 13, 0.17));
  }

  .arena-board-inner::before,
  body.landing-boot-prep .arena-board-stage .arena-board-inner::before,
  body.landing-boot-ui .arena-board-stage .arena-board-inner::before,
  body.landing-boot-lock .arena-board-stage .arena-board-inner::before,
  body.landing-boot-ignite .arena-board-stage .arena-board-inner::before,
  body.landing-boot-dice .arena-board-stage .arena-board-inner::before,
  body.landing-boot-dust .arena-board-stage .arena-board-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
      radial-gradient(ellipse at 50% 82%, rgba(255, 138, 42, 0.34) 0%, rgba(255, 115, 24, 0.2) 34%, rgba(216, 83, 15, 0.1) 56%, rgba(216, 83, 15, 0) 74%),
      linear-gradient(180deg, rgba(255, 201, 124, 0.13) 0%, rgba(255, 143, 48, 0.08) 14%, rgba(255, 111, 23, 0) 34%);
    mix-blend-mode: screen;
    opacity: 0.92;
  }

  .board-v-neon,
  .board-v-neon-glow {
    transform: none !important;
    transform-origin: 50% 50%;
    opacity: 1;
  }

  .board-v-neon {
    z-index: 9 !important;
  }

  .board-v-neon-glow {
    z-index: 16 !important;
  }

  .board-v-neon .v-glow-wide {
    stroke-width: 23;
    filter: blur(1.15svh) drop-shadow(0 0.8svh 1.1svh rgba(194, 122, 62, 0.28));
    opacity: 0.28;
  }

  .board-v-neon .v-glow-soft {
    stroke-width: 14;
    filter: blur(0.72svh) drop-shadow(0 0.5svh 0.8svh rgba(220, 132, 56, 0.24));
    opacity: 0.34;
  }

  .board-v-neon .v-hot-line {
    stroke-width: 20;
    filter: blur(0.01svh);
    opacity: 0.62;
  }

  .board-v-neon .v-beam {
    stroke-width: 16;
    filter: blur(0.01svh);
    opacity: 0.66;
  }

  .board-v-neon .v-core-line {
    stroke-width: 10;
    filter: blur(0.05svh);
    opacity: 0.42;
  }

  .board-v-neon .v-core-spec {
    stroke-width: 5.5;
    filter: blur(0.04svh);
    opacity: 0.32;
  }

  .board-v-neon .v-ambient {
    stroke-width: 34;
    filter: blur(1.35svh) drop-shadow(0 1svh 1.4svh rgba(255, 157, 74, 0.2));
    opacity: 0.18;
  }

  .board-v-neon-glow .v-ambient {
    stroke-width: 29;
    filter: blur(1.1svh) drop-shadow(0 0.8svh 1.1svh rgba(255, 114, 22, 0.24));
    opacity: 0.22;
  }

  .board-v-neon-glow .v-glow-wide {
    stroke-width: 20;
    filter: blur(0.95svh) drop-shadow(0 0.6svh 0.9svh rgba(255, 108, 20, 0.26));
    opacity: 0.24;
  }

  .board-v-neon-glow .v-glow-soft {
    stroke-width: 13;
    filter: blur(0.55svh) drop-shadow(0 0.35svh 0.7svh rgba(255, 102, 16, 0.22));
    opacity: 0.28;
  }

  .mystic-beam,
  body.landing-boot-prep .mystic-beam,
  body.landing-boot-ui .mystic-beam,
  body.landing-boot-lock .mystic-beam,
  body.landing-boot-ignite .mystic-beam,
  body.landing-boot-dice .mystic-beam,
  body.landing-boot-dust .mystic-beam {
    z-index: 16 !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 74%,
      rgba(0, 0, 0, 0.82) 86%,
      rgba(0, 0, 0, 0.36) 94%,
      rgba(0, 0, 0, 0) 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 74%,
      rgba(0, 0, 0, 0.82) 86%,
      rgba(0, 0, 0, 0.36) 94%,
      rgba(0, 0, 0, 0) 100%
    ) !important;
  }

  .spot-rise-dust,
  body.landing-boot-prep .spot-rise-dust,
  body.landing-boot-ui .spot-rise-dust,
  body.landing-boot-lock .spot-rise-dust,
  body.landing-boot-ignite .spot-rise-dust,
  body.landing-boot-dice .spot-rise-dust,
  body.landing-boot-dust .spot-rise-dust {
    z-index: 9 !important;
  }

  .mystic-beam .beam-cone {
    top: 0 !important;
    width: 88% !important;
    height: 124% !important;
    filter: blur(1.1svh) !important;
  }

  .mystic-beam .beam-core {
    top: 3% !important;
    width: 38% !important;
    height: 118% !important;
    filter: blur(0.8svh) !important;
  }

  .mystic-beam .beam-fog {
    top: 8% !important;
    width: 80% !important;
    height: 112% !important;
    filter: blur(1.2svh) !important;
  }

  .arena-board-stage,
  body.landing-boot-prep .arena-board-stage,
  body.landing-boot-ui .arena-board-stage,
  body.landing-boot-lock .arena-board-stage,
  body.landing-boot-ignite .arena-board-stage,
  body.landing-boot-dice .arena-board-stage,
  body.landing-boot-dust .arena-board-stage {
    z-index: 14 !important;
  }

  #boardDiceFxCanvas,
  body.landing-boot-prep #boardDiceFxCanvas,
  body.landing-boot-ui #boardDiceFxCanvas,
  body.landing-boot-lock #boardDiceFxCanvas,
  body.landing-boot-ignite #boardDiceFxCanvas,
  body.landing-boot-dice #boardDiceFxCanvas,
  body.landing-boot-dust #boardDiceFxCanvas {
    z-index: 15 !important;
  }

  .ag-mobile-feature-dock {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 1.1vw;
    padding: 1.6vw 2vw 1.8vw;
    border-radius: 5vw 5vw 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

@media (max-width: 48em) and (orientation: portrait) and (min-height: 46.5625em) {
  :root {
    --ag-scene-background-size: 114% auto;
    --ag-scene-background-position-y: calc(var(--ag-phone-safe-top) + var(--ag-phone-banner-height));
    --ag-scene-board-top: 60.5%;
    --ag-scene-board-scale: 0.98;
    --ag-scene-board-width: 70vw;
    --ag-scene-beam-top: calc(var(--ag-phone-safe-top) + var(--ag-phone-banner-height) + 8svh);
    --ag-scene-beam-width: 44vw;
    --ag-scene-beam-height: 36svh;
  }

  .ag-mobile-feature-explorer {
    display: grid;
  }
}

/* ------------------------------------------------------------------ */
/*  Phase 1 — STEP 1: equal left/right edges on auth-stack children   */
/*  Scope: portrait phones only (max-width: 48em).                    */
/*                                                                    */
/*  Approach: force the auth stack container to an exact padding and  */
/*  force every direct child to the exact same pixel width using      */
/*  calc(). This bypasses any browser-specific quirks with            */
/*  justify-self: stretch + min() widths on iOS Safari.               */
/* ------------------------------------------------------------------ */
@media (max-width: 48em) and (orientation: portrait) {

  /* Lock the stack's horizontal padding so we know the exact content
     area width. We keep vertical padding from the existing rules. */
  body.ag-auth-stack-open .ag-auth-stack,
  .ag-auth-stack.is-visible {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Every direct child gets the EXACT same calculated width based on
     viewport minus the stack padding. No min(), no stretch, no grid
     quirks — just a single deterministic pixel width for all five
     elements (card, social row, email btn, guest btn, status msg). */
  .ag-auth-stack > .ag-inline-login,
  .ag-auth-stack > .ag-auth-social-row,
  .ag-auth-stack > .ag-auth-link-btn,
  .ag-auth-stack > .ag-auth-guest-btn,
  .ag-auth-stack > .ag-auth-stack-msg {
    width: calc(100vw - 32px) !important;
    min-width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: center !important;
    box-sizing: border-box !important;
  }
}

/* ------------------------------------------------------------------ */
/*  Phase 1 — STEP 3: keyboard-proof backdrop on iOS                  */
/*  Scope: portrait phones only (max-width: 48em).                    */
/*                                                                    */
/*  Problem: when the iOS on-screen keyboard opens, svh/dvh viewport  */
/*  units recalc and the auth stack (which uses min-height:100svh +   */
/*  height:100% on its ::before) can shrink, exposing the desktop     */
/*  layout behind it. Body scroll also lets the page below shift up   */
/*  into view.                                                        */
/*                                                                    */
/*  Fix: a single solid position:fixed pseudo-element on the body     */
/*  that covers the full viewport regardless of keyboard state, sat   */
/*  just below the auth stack (z-index 1210 vs. stack's 1211). Plus   */
/*  body scroll lock so the page underneath cannot move.              */
/* ------------------------------------------------------------------ */
@media (max-width: 48em) and (orientation: portrait) {

  /* Solid full-viewport backdrop, anchored to the visual viewport.
     position:fixed + inset:0 pins it to the visible area; it does not
     depend on svh/dvh/lvh, so the keyboard cannot make it shrink. */
  body.ag-auth-stack-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 50% 18%, rgba(255, 177, 78, 0.10) 0%, rgba(255, 177, 78, 0) 42%),
      rgba(3, 8, 15, 0.96);
    z-index: 1210;
    pointer-events: none;
  }

  /* Lock body scroll so the desktop layout below cannot scroll into
     view when the keyboard pushes things around. */
  body.ag-auth-stack-open {
    overflow: hidden !important;
    overscroll-behavior: contain;
  }
}