/**
 * Mobile India Game UI — full-bleed + Indian ornaments
 * Scope: max-width 767px ONLY (link media + queries). Desktop untouched.
 *
 * Layout: Header → Stats → Players → Felt(fills) → Hand → Tip → Actions
 * Decorations are background-only (low opacity). Cards stay primary.
 */

@media (max-width: 767px) {
  /* —— Full-screen shell —— */
  html:has(body.is-playing.play),
  body.is-playing.play {
    height: 100% !important;
    max-height: 100dvh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, .06), transparent 45%),
      linear-gradient(180deg, #03160f 0%, #042018 40%, #03140e 100%) !important;
  }

  /* Faster taps on action chrome (INP); keep card drag touch-action from game.css */
  body.is-playing .game-actions .btn,
  body.is-playing .game-actions button,
  body.is-playing #player-rail button,
  body.is-playing .play-back,
  body.is-playing .nav-dl {
    touch-action: manipulation !important;
    min-height: 44px;
  }

  body.is-playing.play .site-header {
    flex: 0 0 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    background:
      linear-gradient(180deg, #061c14, #041810) !important;
    border-bottom: 1px solid rgba(251, 191, 36, .22) !important;
    box-shadow: 0 1px 0 rgba(251, 191, 36, .06) !important;
  }
  body.is-playing.play .site-header::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .45), transparent);
    pointer-events: none;
  }
  body.is-playing.play .site-header {
    position: relative !important;
  }

  body.is-playing.play main#main.game-shell,
  body.is-playing.play .game-shell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  /* Plan B (mobile): scroll SEO; protect table floor (wins over compact). */
  body.is-playing.play .game-shell > .wrap,
  body.is-playing .game-shell > .wrap {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Battle fills remaining viewport above rail */
  body.is-playing.play #battle-table,
  body.is-playing #battle-table,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) #battle-table {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 0 auto !important;
    min-height: min(48svh, 420px) !important;
    height: auto !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    gap: 0 !important;
  }

  body.is-playing .table-stage,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .table-stage {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 4px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  /* Stats — soft ivory/gold chrome, not a heavy card */
  body.is-playing .led-scoreboard {
    flex: 0 0 auto !important;
    margin: 4px 2px 0 !important;
  }
  body.is-playing .led-screen.battle-hud {
    min-height: 0 !important;
    height: auto !important;
    border: 1px solid rgba(251, 191, 36, .2) !important;
    background:
      linear-gradient(180deg, rgba(10, 42, 30, .85), rgba(4, 24, 16, .75)) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(251, 191, 36, .08) !important;
  }

  /* Arena: seats + felt that FILLS */
  body.is-playing .board-arena,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .board-arena {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: max-content minmax(0, 1fr) !important;
    grid-template-areas:
      "seat-l seat-r"
      "felt felt" !important;
    align-content: stretch !important;
    align-items: start !important;
    justify-items: stretch !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    /* Pad so circular avatar frames are never clipped */
    padding: 10px 10px 0 !important;
    /* Do NOT clip seat avatars — felt clips its own decor */
    overflow: visible !important;
  }

  body.is-playing .board-arena .side-rail {
    overflow: visible !important;
    align-self: start !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    min-height: 76px !important;
    z-index: 5 !important;
  }

  body.is-playing .side-rail .seat,
  body.is-playing .seat-float.side-left,
  body.is-playing .seat-float.side-right {
    transform: none !important;
    padding: 4px !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
  body.is-playing .battle .seat-float.side-left .avatar,
  body.is-playing .battle .seat-float.side-right .avatar,
  body.is-playing .seat-float.side-left .avatar,
  body.is-playing .seat-float.side-right .avatar {
    width: 46px !important;
    height: 46px !important;
    box-sizing: border-box !important;
    /* Padding-ring: gold frame is the outer circle; photo is inner — never looks cut */
    border: 0 !important;
    padding: 2px !important;
    border-radius: 50% !important;
    background:
      linear-gradient(145deg, #fbbf24, #d97706) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28) !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  body.is-playing .battle .seat-float.side-left .avatar img,
  body.is-playing .battle .seat-float.side-right .avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    background: #04110d !important;
  }
  body.is-playing .battle .seat-float.side-left.active .avatar,
  body.is-playing .battle .seat-float.side-right.active .avatar {
    padding: 3px !important;
    background:
      linear-gradient(145deg, #fcd34d, #fbbf24 40%, #d97706) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .32) !important;
  }
  /* Crown badge sits inside seat padding — avoid -12px clip */
  body.is-playing .battle .seat-float.side-left .avatar::before,
  body.is-playing .battle .seat-float.side-right .avatar::before,
  body.is-playing .battle .seat-float.side-left.active .avatar::before,
  body.is-playing .battle .seat-float.side-right.active .avatar::before {
    top: -8px !important;
    width: 16px !important;
    height: 10px !important;
  }
  body.is-playing .battle .seat-float.side-left .avatar::after,
  body.is-playing .battle .seat-float.side-right .avatar::after {
    right: 0 !important;
    bottom: 0 !important;
  }

  /* —— Felt: full area + Indian royal frame —— */
  body.is-playing .felt-table,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-table {
    grid-area: felt !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(251, 191, 36, .28) !important;
    box-shadow:
      inset 0 0 0 1px rgba(6, 78, 59, .5),
      0 8px 20px rgba(0, 0, 0, .28) !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body.is-playing .felt-inner,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 8px 6px 6px !important;
    overflow: hidden !important;
    position: relative !important;
    background:
      radial-gradient(ellipse at 50% 38%, rgba(251, 191, 36, .07), transparent 42%),
      linear-gradient(165deg, #0c5a38 0%, #08422a 55%, #063522 100%) !important;
  }

  /* Indian texture layers (never steal card focus) */
  body.is-playing .felt-decor {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }
  body.is-playing .felt-pattern,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-pattern {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: .06 !important; /* 0.04–0.08 */
    background: url("../images/felt-india-pattern.webp") center / 160px repeat !important;
  }
  body.is-playing .felt-mandala-img,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-mandala-img {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 36% !important;
    width: min(58%, 200px) !important;
    height: auto !important;
    transform: translate(-50%, -50%) !important;
    opacity: .07 !important; /* 0.05–0.08 */
    filter: none !important;
    animation: none !important;
  }
  body.is-playing .felt-corner-orn {
    display: block !important;
    position: absolute !important;
    width: 36px !important;
    height: auto !important;
    opacity: .12 !important;
    z-index: 0 !important;
  }
  body.is-playing .felt-corner-orn.tl { top: 6px !important; left: 6px !important; }
  body.is-playing .felt-corner-orn.tr { top: 6px !important; right: 6px !important; }
  body.is-playing .felt-corner-orn.bl { bottom: 6px !important; left: 6px !important; width: 30px !important; }
  body.is-playing .felt-corner-orn.br { bottom: 6px !important; right: 6px !important; width: 30px !important; }

  /* Paisley side accents via pseudo (no extra DOM / PC-safe) */
  body.is-playing .felt-inner::before,
  body.is-playing .felt-inner::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 42px;
    top: 22%;
    z-index: 0;
    pointer-events: none;
    opacity: .08;
    background: url("../rummy/ornaments/paisley.svg") center / contain no-repeat;
  }
  body.is-playing .felt-inner::before { left: 4px; }
  body.is-playing .felt-inner::after {
    right: 4px;
    transform: scaleX(-1);
  }

  body.is-playing .ai-row {
    display: none !important;
  }

  /*
    Pack Draw / Turn / Hand to the BOTTOM of the felt.
    Spare height sits ABOVE the piles → filled by mandala / paisley / pattern.
  */
  body.is-playing .felt-inner > .table-mid,
  body.is-playing .battle .table-mid,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .battle .table-mid {
    position: relative;
    z-index: 1;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto auto 0 !important; /* top:auto → push block down */
    padding: 4px 0 !important;
    gap: 28px !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }

  /* Center lotus/mandala gem between Draw & Discard */
  body.is-playing .pile-center-gem {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    opacity: .55 !important;
    flex: 0 0 auto !important;
  }
  body.is-playing .pile-center-gem img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    filter: sepia(.2) saturate(1.1);
  }
  body.is-playing .pile-ornament {
    display: none !important; /* avoid clutter / peacock spam */
  }

  body.is-playing .pile {
    position: relative;
    z-index: 1;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual {
    width: 52px !important;
    height: 74px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .32) !important;
  }
  body.is-playing #pile-stock .pile-label::after,
  body.is-playing #pile-discard .pile-label::after {
    color: rgba(252, 211, 77, .85) !important;
    letter-spacing: .1em !important;
  }

  /* Hand stays at bottom of felt (thumb zone); player seat is in #player-rail */

  body.is-playing .hand-stage.on-felt,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
    position: relative;
    z-index: 1;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 2px 2px !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  body.is-playing .hand-stage.on-felt::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .28), transparent);
    pointer-events: none;
  }
  body.is-playing .hand-stage.on-felt .hand,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-end !important;
    align-items: flex-end !important;
    gap: 6px 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 0 2px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 0 1 auto !important;
    align-items: flex-end !important;
    gap: 2px !important;
    margin: 0 !important;
    margin-inline: 0 !important;
    padding: 2px 1px 4px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: var(--pcard-w, 36px) !important;
    height: var(--pcard-h, 52px) !important;
    margin-left: calc(-1 * var(--pcard-overlap, 0px)) !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group .pcard:first-child,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group .pcard:first-child {
    margin-left: 0 !important;
  }
  body.is-playing .hand-stage.on-felt .pcard.selected,
  body.is-playing .hand-stage.on-felt .pcard.new-draw {
    transform: translateY(-8px) !important;
  }

  /* Action rail — full width, India accent top */
  body.is-playing .player-rail,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .player-rail {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 8px 10px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background:
      linear-gradient(180deg, rgba(6, 30, 22, .98), #03140e) !important;
    border-top: 1px solid rgba(251, 191, 36, .22) !important;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, .25) !important;
    position: relative !important;
    z-index: 40 !important;
  }
  body.is-playing .player-rail::before {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .4), transparent);
    pointer-events: none;
  }

  body.is-playing .tip-row {
    margin: 0 0 8px !important;
  }
  body.is-playing .tip-row .meld-hint {
    color: rgba(245, 250, 247, .7) !important;
  }
  body.is-playing .deadwood-badge {
    border-color: rgba(251, 191, 36, .22) !important;
    background: rgba(0, 0, 0, .28) !important;
  }

  body.is-playing .game-actions #btn-draw {
    background: linear-gradient(180deg, #0d8a64, #0a6b50) !important;
    border-color: rgba(245, 250, 247, .15) !important;
  }
  body.is-playing .game-actions #btn-take {
    border-color: rgba(251, 191, 36, .6) !important;
  }

  /* Hide noisy outer casino art on phones */
  body.is-playing .board-outer-art,
  body.is-playing .battle-art {
    display: none !important;
  }

  /*
   * You / player seat lives in #player-rail (directly above game-actions).
   */
  body.is-playing #player-rail > #player-seat,
  body.is-playing .player-rail > .seat-float.bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    margin: 0 0 8px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(251, 191, 36, .4) !important;
    background: rgba(4, 17, 13, .92) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3) !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
  }

  body.is-playing #player-rail > #player-seat .player-avatar-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  body.is-playing #player-rail > #player-seat .avatar,
  body.is-playing #player-rail > #player-seat .avatar.you {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid rgba(251, 191, 36, .7) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4) !important;
    background: #0a3d30 !important;
  }

  body.is-playing #player-rail > #player-seat .avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  body.is-playing #player-rail > #player-seat .seat-clock {
    display: none !important;
  }

  body.is-playing #player-rail > #player-seat .seat-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
  }

  body.is-playing #player-rail > #player-seat .seat-name {
    display: block !important;
    margin: 0 !important;
    font-size: .88rem !important;
    font-weight: 800 !important;
    color: #fff !important;
  }

  body.is-playing #player-rail > #player-seat .seat-status {
    display: block !important;
    margin: 0 !important;
    font-size: .66rem !important;
  }

  body.is-playing #player-rail > #player-seat .turn-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 48% !important;
    margin: 0 0 0 auto !important;
    flex: 0 0 auto !important;
    font-size: .72rem !important;
  }

  body.is-playing #player-rail > #player-seat .hud-stat {
    display: none !important;
  }

  body.is-playing .player-rail,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .player-rail {
    margin-top: 0 !important;
    overflow: visible !important;
  }

  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: var(--pcard-w, 36px) !important;
    height: var(--pcard-h, 52px) !important;
  }

  /*
   * Scoreboard / chip calculation strip (mobile ≤767 only).
   * game.css hides Priya / Arjun / Deadwood — restore all 6 stats in a
   * compact 2×3 grid. Desktop rules above 767px are unchanged.
   */
  body.is-playing .led-scoreboard {
    margin: 4px 4px 6px !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.is-playing .led-cables {
    display: none !important;
  }
  body.is-playing .led-panel {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.is-playing .led-screen.battle-hud {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(28px, auto) !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 4px 6px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body.is-playing .led-screen.battle-hud .hud-stat,
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(1),
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(2),
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(3),
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(4),
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(5),
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(6) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(1) .led-label {
    display: block !important;
  }
  body.is-playing .led-scoreboard .led-label {
    font-size: .52rem !important;
    line-height: 1.1 !important;
    letter-spacing: .04em !important;
    opacity: .8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  body.is-playing .led-scoreboard .led-value,
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(1) .led-value {
    font-size: .78rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.is-playing .tip-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 6px !important;
    padding: 0 2px !important;
  }
  body.is-playing .tip-row .meld-hint {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.is-playing .deadwood-badge {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    max-width: 42% !important;
    box-sizing: border-box !important;
  }

  /*
   * Settlement / result modal (mobile ≤767 only).
   * style.css forces .btn min-width:200px at ≥375px, which expands the
   * 2-col result grid past the card and clips Keep Training + settle rows.
   * Desktop (≥768) rules in game.css are untouched.
   */
  .result-modal {
    align-items: center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px)) !important;
  }
  .result-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    align-content: start !important;
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 20px) !important;
    height: auto !important;
    margin: auto !important;
    padding: 36px 12px 14px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .result-decor {
    grid-column: 1 / -1 !important;
    inset: 0 !important;
    overflow: hidden !important;
    border-radius: inherit !important;
  }
  .result-emblem {
    top: 8px !important;
    width: 30px !important;
    height: 30px !important;
    /* Trophy + winner badge already mark the win — emblem collides with title */
    display: none !important;
  }
  .result-trophy {
    top: 8px !important;
    left: 8px !important;
    width: 26px !important;
    height: 26px !important;
  }
  .result-winner-badge {
    top: 6px !important;
    right: 6px !important;
    width: 30px !important;
    height: 30px !important;
  }
  .result-mandala-img {
    width: min(64%, 150px) !important;
    opacity: .07 !important;
  }
  .result-art,
  .result-kicker,
  .result-card h3,
  .result-lead,
  .result-sub,
  .result-body,
  .result-dl-hint {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .result-art {
    display: none !important;
  }
  .result-kicker {
    margin: 0 0 2px !important;
    font-size: .62rem !important;
    letter-spacing: .06em !important;
  }
  .result-card h3 {
    margin: 0 0 2px !important;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
  }
  .result-lead {
    margin: 0 0 1px !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
  }
  .result-sub {
    margin: 0 0 6px !important;
    font-size: .66rem !important;
    line-height: 1.25 !important;
  }
  .result-body {
    margin: 2px 0 4px !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .result-settle-head {
    gap: 4px !important;
    margin: 0 0 4px !important;
    font-size: .58rem !important;
    line-height: 1.2 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .result-settle-head .cchip.mini {
    display: none !important;
  }
  .result-settle-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }
  .result-settle-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    gap: 4px !important;
    padding: 5px 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: .68rem !important;
  }
  .result-settle-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .result-settle-delta,
  .result-settle-total {
    gap: 2px !important;
  }
  .result-settle-delta strong,
  .result-settle-total strong {
    font-size: .78rem !important;
  }
  .result-coin {
    width: 12px !important;
    height: 12px !important;
  }
  .result-coin::after {
    font-size: .42rem !important;
  }
  .result-settle-reset {
    margin: 4px 0 0 !important;
    padding: 4px 6px !important;
    font-size: .62rem !important;
    line-height: 1.25 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .result-dl-hint {
    margin: 6px 0 4px !important;
    padding: 0 2px !important;
    font-size: .66rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
  .result-primary,
  .result-dl,
  #result-close {
    grid-column: 1 / -1 !important;
    position: relative !important;
    z-index: 3 !important;
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 6px 0 0 !important;
    padding: 10px 10px !important;
    font-size: .74rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
  .result-primary,
  .result-dl {
    margin-top: 8px !important;
  }
  #result-close {
    margin-top: 6px !important;
    margin-bottom: 2px !important;
  }
}

/* Slightly larger phones: a bit more ornament room */
@media (min-width: 390px) and (max-width: 767px) {
  body.is-playing .felt-corner-orn {
    width: 40px !important;
    opacity: .13 !important;
  }
  body.is-playing .felt-mandala-img {
    opacity: .08 !important;
    width: min(52%, 220px) !important;
  }
  body.is-playing .hand-stage.on-felt .pcard {
    width: var(--pcard-w, 40px) !important;
    height: var(--pcard-h, 58px) !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual {
    width: 54px !important;
    height: 76px !important;
  }
}