/* v20260827_1505 · all-games mobile viewport pass
   Keep every playable screen at 1:1 CSS pixels on phones/tablets.
   Reflow dense layouts instead of scaling the entire app smaller. */

@media (max-width: 1024px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  body.mobile-game-fit { width:100%; height:100dvh; min-height:100svh; }

  body.mobile-game-fit .app-shell {
    width:100vw !important;
    height:100dvh !important;
    min-height:100svh !important;
    max-height:100dvh !important;
    position:relative !important;
    inset:auto !important;
    margin:0 auto !important;
    transform:none !important;
    transform-origin:center !important;
    overflow:hidden !important;
  }

  /* Universal touch sizing. Do not shrink real controls with the viewport. */
  body.mobile-game-fit button,
  body.mobile-game-fit [role="button"],
  body.mobile-game-fit input[type="button"],
  body.mobile-game-fit input[type="submit"] {
    min-height:44px;
    touch-action:manipulation;
  }
  body.mobile-game-fit input,
  body.mobile-game-fit select,
  body.mobile-game-fit textarea { font-size:16px; }

  body.mobile-game-fit .fish-game-titlebar,
  body.mobile-game-fit .luck-topbar,
  body.mobile-game-fit .online-topbar,
  body.mobile-game-fit .game-titlebar {
    min-height:54px !important;
    max-height:none !important;
    height:auto !important;
    padding-top:max(6px, env(safe-area-inset-top)) !important;
    padding-bottom:6px !important;
  }

  body.mobile-game-fit .fish-title-actions .title-btn,
  body.mobile-game-fit .luck-back-btn,
  body.mobile-game-fit .online-leave-btn,
  body.mobile-game-fit .title-btn {
    min-height:42px !important;
    padding:8px 10px !important;
    font-size:13px !important;
  }

  /* Offline luck games: use real phone width and scroll only the content area when needed. */
  body.mobile-game-fit .luck-stage {
    grid-template-columns:minmax(0,1fr) !important;
    min-height:0 !important;
    padding:8px !important;
    overflow:hidden !important;
  }
  body.mobile-game-fit .luck-side { display:none !important; }
  body.mobile-game-fit .luck-main { min-width:0; min-height:0; width:100%; }
  body.mobile-game-fit .luck-game-content {
    min-width:0;
    min-height:0;
    width:100%;
    padding:12px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.mobile-game-fit .luck-game-content > .choice-row {
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px !important;
  }
  body.mobile-game-fit .luck-game-content > .choice-row .luck-choice,
  body.mobile-game-fit .luck-game-content > .luck-action,
  body.mobile-game-fit .enhance-actions .luck-action {
    width:100%;
    min-width:0 !important;
    min-height:50px !important;
    font-size:17px !important;
    padding:10px 12px !important;
  }
  body.mobile-game-fit .coin-arena,
  body.mobile-game-fit .number-reactor,
  body.mobile-game-fit .energy-core,
  body.mobile-game-fit .card-table,
  body.mobile-game-fit .playing-card { max-width:100% !important; }

  /* Draw / custom draw / battle draw */
  body.mobile-game-fit .draw-shell,
  body.mobile-game-fit .draw-mode-home,
  body.mobile-game-fit .draw-mode-menu,
  body.mobile-game-fit .draw-board {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  body.mobile-game-fit .draw-mode-grid {
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  body.mobile-game-fit .draw-controls,
  body.mobile-game-fit .draw-head-actions {
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  body.mobile-game-fit .draw-controls button,
  body.mobile-game-fit .draw-head-actions button,
  body.mobile-game-fit .draw-btn { min-height:46px !important; font-size:14px !important; }

  /* Roulette: wheel remains large; settings editor becomes a full-width overlay. */
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-play {
    width:100% !important;
    min-width:0 !important;
    overflow-y:auto !important;
  }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-wheel-box {
    width:min(82vw, 360px) !important;
    max-width:100% !important;
  }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-spin {
    min-width:min(82vw, 260px) !important;
    min-height:50px !important;
    font-size:18px !important;
  }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-editor {
    inset:6px !important;
    width:auto !important;
    max-width:none !important;
    padding:52px 12px 12px !important;
  }
  body.mobile-game-fit .roulette-item-input { min-height:44px; font-size:16px !important; }
  body.mobile-game-fit .roulette-weight button,
  body.mobile-game-fit .roulette-agent-control button { min-width:42px; min-height:42px; }

  /* Scratch */
  body.mobile-game-fit .scratch-pick-stage,
  body.mobile-game-fit .scratch-pick-layout,
  body.mobile-game-fit .scratch-broadcast-shell {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  body.mobile-game-fit .scratch-pick-stage { overflow-y:auto !important; }
  body.mobile-game-fit .scratch-choice-ticket,
  body.mobile-game-fit .scratch-nine-ticket,
  body.mobile-game-fit #scratchTicket {
    width:min(94vw, 470px) !important;
    max-width:100% !important;
  }
  body.mobile-game-fit .scratch-top-shuffle,
  body.mobile-game-fit .scratch-result-actions button,
  body.mobile-game-fit .scratch-actions button { min-height:46px !important; font-size:14px !important; }

  /* Fishing: keep the scene game-like while making HUD/controls readable. */
  body.mobile-game-fit .fish-game-screen { width:100%; min-width:0; }
  body.mobile-game-fit .fish-game-titlebar { padding-left:10px !important; padding-right:10px !important; gap:6px; }
  body.mobile-game-fit .fish-page-title h2 { font-size:clamp(19px,5.3vw,24px) !important; }
  body.mobile-game-fit .fishing-scene { width:100%; min-width:0; overflow:hidden; }
  body.mobile-game-fit .fishing-start-btn {
    min-width:min(78vw, 280px) !important;
    min-height:58px !important;
    height:auto !important;
    padding:12px 20px !important;
  }
  body.mobile-game-fit .fishing-start-btn strong { font-size:21px !important; }
  body.mobile-game-fit .fish-toast { max-width:86vw !important; font-size:14px !important; }
  body.mobile-game-fit .fish-result-card { width:min(58vw,260px) !important; max-width:58vw !important; }
  body.mobile-game-fit .fish-ranking-panel,
  body.mobile-game-fit .fish-odds-panel,
  body.mobile-game-fit .fish-reset-confirm-card {
    width:min(94vw, 560px) !important;
    max-width:94vw !important;
    max-height:86dvh !important;
    overflow:auto !important;
  }
  body.mobile-game-fit .fish-reset-confirm-actions button { min-height:48px !important; font-size:15px !important; }

  /* Ladder: board may scroll sideways; control buttons stay finger-sized. */
  body.mobile-game-fit[data-view="game"] .playfield { min-width:0; }
  body.mobile-game-fit[data-view="game"] .ladder-paper { width:100% !important; min-width:0; }
  body.mobile-game-fit[data-view="game"] .board-wrap {
    width:100%;
    min-width:0;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
  }
  body.mobile-game-fit[data-view="game"] .paper-footer {
    grid-template-columns:1fr !important;
    gap:7px !important;
  }
  body.mobile-game-fit[data-view="game"] .paper-actions {
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px !important;
  }
  body.mobile-game-fit[data-view="game"] .paper-btn,
  body.mobile-game-fit[data-view="game"] .ladder-toggle-btn {
    min-height:44px !important;
    font-size:13px !important;
    padding:8px 10px !important;
  }
  body.mobile-game-fit[data-view="game"] .player-name-input { min-height:36px !important; font-size:14px !important; }

  /* Online lobby + every real-time online game */
  body.mobile-game-fit .online-layout { width:100%; min-width:0; padding:7px !important; }
  body.mobile-game-fit .online-lobby,
  body.mobile-game-fit .online-match-lobby,
  body.mobile-game-fit .online-game-content,
  body.mobile-game-fit .online-arena {
    width:100%; min-width:0; min-height:0;
  }
  body.mobile-game-fit .online-lobby,
  body.mobile-game-fit .online-match-lobby,
  body.mobile-game-fit .online-game-content { overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
  body.mobile-game-fit .online-lobby-copy { display:block !important; }
  body.mobile-game-fit .online-lobby-copy h3 { font-size:clamp(28px,8vw,42px) !important; }
  body.mobile-game-fit .online-lobby-copy p { display:block !important; font-size:13px; }
  body.mobile-game-fit .online-room-grid { grid-template-columns:1fr !important; gap:10px !important; }
  body.mobile-game-fit .online-room-card,
  body.mobile-game-fit .online-ai-practice { min-height:86px !important; padding:14px !important; }
  body.mobile-game-fit .online-room-card strong { font-size:18px !important; }
  body.mobile-game-fit .online-room-card small { font-size:12px !important; }
  body.mobile-game-fit .online-ready-btn,
  body.mobile-game-fit .online-create-btn,
  body.mobile-game-fit .online-join-btn { min-height:50px !important; font-size:16px !important; }

  /* RPS */
  body.mobile-game-fit .rps-arena { overflow-y:auto !important; padding:10px !important; }
  body.mobile-game-fit .rps-stage { grid-template-columns:1fr 54px 1fr !important; gap:7px !important; }
  body.mobile-game-fit .rps-choice { min-width:0 !important; min-height:68px !important; padding:8px 4px !important; }
  body.mobile-game-fit .rps-choice span { font-size:32px !important; }
  body.mobile-game-fit .rps-choice b { font-size:12px !important; }

  /* Yut */
  body.mobile-game-fit .yut-arena {
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    gap:10px !important;
    padding:8px !important;
    overflow-y:auto !important;
  }
  body.mobile-game-fit .yut-board-wrap { min-height:0; }
  body.mobile-game-fit .yut-board { width:min(94vw, 470px) !important; height:auto !important; }
  body.mobile-game-fit .yut-side-panel {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    overflow:visible !important;
    padding:10px !important;
  }
  body.mobile-game-fit .yut-sticks { height:100px !important; }
  body.mobile-game-fit .yut-stick { height:82px !important; width:18px !important; }
  body.mobile-game-fit .yut-throw-btn { min-height:50px !important; font-size:15px !important; }
  body.mobile-game-fit .yut-move-chip { min-height:40px !important; font-size:12px !important; }
  body.mobile-game-fit .yut-bench .yut-piece { width:30px !important; height:30px !important; }

  /* Gomoku: maximize board but preserve a tappable minimum target area. */
  body.mobile-game-fit .gomoku-stage { overflow-y:auto !important; padding:7px !important; gap:7px !important; }
  body.mobile-game-fit .gomoku-board {
    --board-pad:10px;
    width:min(96vw, 520px) !important;
    height:min(96vw, 520px) !important;
    max-width:100% !important;
    flex:0 0 auto;
  }
  body.mobile-game-fit .gomoku-info { font-size:13px !important; padding:8px 10px !important; }
  body.mobile-game-fit .gomoku-help { display:none !important; }

  /* Word chain / kungkungtta */
  body.mobile-game-fit .word-arena {
    grid-template-rows:auto auto auto !important;
    gap:8px !important;
    padding:8px !important;
    overflow-y:auto !important;
  }
  body.mobile-game-fit .word-playfield {
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(180px,auto) !important;
    gap:8px !important;
  }
  body.mobile-game-fit .word-required-card { min-height:88px; }
  body.mobile-game-fit .word-required-letter { width:64px !important; font-size:42px !important; }
  body.mobile-game-fit .word-controls {
    grid-template-columns:minmax(0,1fr) 78px 92px !important;
    gap:7px !important;
  }
  body.mobile-game-fit .word-input { height:50px !important; font-size:16px !important; grid-column:auto !important; }
  body.mobile-game-fit .word-submit-btn,
  body.mobile-game-fit .word-giveup-btn {
    grid-column:auto !important;
    width:auto !important;
    min-width:0 !important;
    min-height:50px !important;
    height:50px !important;
    max-height:50px !important;
    font-size:13px !important;
    padding:0 8px !important;
  }

  /* Generic dialogs/rankings/settings: never exceed phone viewport. */
  body.mobile-game-fit .modal-card,
  body.mobile-game-fit .profile-card,
  body.mobile-game-fit .attendance-card,
  body.mobile-game-fit .enhance-rank-table,
  body.mobile-game-fit [class*="ranking-panel"],
  body.mobile-game-fit [class*="settings-dialog"] {
    width:min(94vw, 620px) !important;
    max-width:94vw !important;
    max-height:88dvh !important;
    overflow:auto !important;
  }
}

@media (max-width: 560px) {
  body.mobile-game-fit .fish-page-title small,
  body.mobile-game-fit .luck-title small,
  body.mobile-game-fit .online-title-wrap small { display:none !important; }

  body.mobile-game-fit .fish-title-actions,
  body.mobile-game-fit .luck-top-actions { gap:4px !important; }

  body.mobile-game-fit .luck-game-content > .choice-row { grid-template-columns:1fr !important; }
  body.mobile-game-fit .luck-game-content > .choice-row .luck-choice { min-height:52px !important; }

  body.mobile-game-fit .draw-controls,
  body.mobile-game-fit .draw-head-actions { display:grid !important; grid-template-columns:1fr 1fr; width:100%; }

  body.mobile-game-fit .online-title-wrap h2 { font-size:18px !important; }
  body.mobile-game-fit .online-player-strip { min-height:48px !important; height:auto !important; flex-basis:auto !important; }
  body.mobile-game-fit .rps-stage { grid-template-columns:1fr 44px 1fr !important; }
  body.mobile-game-fit .rps-choices { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  body.mobile-game-fit .rps-choice { width:100% !important; }

  body.mobile-game-fit .gomoku-board { width:min(97vw, 440px) !important; height:min(97vw, 440px) !important; }

  body.mobile-game-fit .fish-result-card { width:min(64vw,240px) !important; max-width:64vw !important; }
  body.mobile-game-fit .fish-history { display:none !important; }
}

/* Landscape phones: preserve 1:1 sizing, then use horizontal game layouts when useful. */
@media (max-width: 1024px) and (orientation: landscape) {
  body.mobile-game-fit .fish-game-titlebar,
  body.mobile-game-fit .luck-topbar,
  body.mobile-game-fit .online-topbar,
  body.mobile-game-fit .game-titlebar {
    min-height:46px !important;
    padding-top:max(3px, env(safe-area-inset-top)) !important;
    padding-bottom:3px !important;
  }
  body.mobile-game-fit .luck-game-content { padding:7px 10px !important; }
  body.mobile-game-fit .luck-game-content > .choice-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.mobile-game-fit .online-room-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.mobile-game-fit .yut-arena {
    grid-template-columns:minmax(300px,1fr) minmax(260px,.9fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
  }
  body.mobile-game-fit .yut-board { width:min(86dvh, 44vw, 450px) !important; }
  body.mobile-game-fit .word-playfield {
    grid-template-columns:minmax(150px,.55fr) minmax(260px,1.45fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
  }
}

/* v20260830_0400 · additional phone ergonomics / safe-area pass */
@media (max-width: 1024px) {
  body.mobile-game-fit {
    box-sizing: border-box;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
  }
  body.mobile-game-fit *,
  body.mobile-game-fit *::before,
  body.mobile-game-fit *::after { box-sizing: border-box; }

  body.mobile-game-fit .fish-game-titlebar,
  body.mobile-game-fit .luck-topbar,
  body.mobile-game-fit .online-topbar,
  body.mobile-game-fit .game-titlebar {
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }
  body.mobile-game-fit .fish-page-title,
  body.mobile-game-fit .luck-title,
  body.mobile-game-fit .online-title-wrap,
  body.mobile-game-fit .game-titlebar > :first-child {
    min-width: 0 !important;
  }
  body.mobile-game-fit .fish-page-title h2,
  body.mobile-game-fit .luck-title h2,
  body.mobile-game-fit .online-title-wrap h2,
  body.mobile-game-fit .game-titlebar h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.mobile-game-fit .fish-title-actions,
  body.mobile-game-fit .luck-top-actions,
  body.mobile-game-fit .online-top-actions,
  body.mobile-game-fit .title-actions {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 58%;
  }
  body.mobile-game-fit .fish-title-actions button,
  body.mobile-game-fit .luck-top-actions button,
  body.mobile-game-fit .online-top-actions button,
  body.mobile-game-fit .title-actions button {
    min-width: 44px !important;
  }

  body.mobile-game-fit .luck-game-content,
  body.mobile-game-fit .online-lobby,
  body.mobile-game-fit .online-match-lobby,
  body.mobile-game-fit .online-game-content,
  body.mobile-game-fit .rps-arena,
  body.mobile-game-fit .yut-arena,
  body.mobile-game-fit .gomoku-stage,
  body.mobile-game-fit .word-arena {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  body.mobile-game-fit #appExitModal {
    padding:
      max(14px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left)) !important;
    box-sizing: border-box;
  }
  body.mobile-game-fit #appExitModal .app-exit-card {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    box-sizing: border-box;
  }
  body.mobile-game-fit #appExitModal button {
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 430px) {
  body.mobile-game-fit .fish-title-actions,
  body.mobile-game-fit .luck-top-actions,
  body.mobile-game-fit .online-top-actions,
  body.mobile-game-fit .title-actions { max-width: 62%; gap: 4px !important; }

  body.mobile-game-fit .fish-title-actions .title-btn,
  body.mobile-game-fit .luck-back-btn,
  body.mobile-game-fit .online-leave-btn,
  body.mobile-game-fit .title-btn {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
  }

  body.mobile-game-fit .paper-actions { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  body.mobile-game-fit .paper-actions button { width:100% !important; min-width:0 !important; }

  body.mobile-game-fit .word-controls {
    grid-template-columns: minmax(0,1fr) 72px !important;
    grid-template-areas: "input submit" "giveup giveup";
  }
  body.mobile-game-fit .word-input { grid-area: input !important; width:100% !important; min-width:0 !important; }
  body.mobile-game-fit .word-submit-btn { grid-area: submit !important; }
  body.mobile-game-fit .word-giveup-btn { grid-area: giveup !important; width:100% !important; }

  body.mobile-game-fit .rps-stage { grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr) !important; }
  body.mobile-game-fit .rps-choice { min-height:72px !important; }

  body.mobile-game-fit .luck-game-content { padding-left:9px !important; padding-right:9px !important; }
}

/* Ladder setup is a scrollable form, not a fixed game canvas. */
@media (max-width: 1024px) {
  body[data-page-kind="game"][data-view="setup"] {
    width:100%;
    min-width:0;
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body[data-page-kind="game"][data-view="setup"] .app-shell {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;
    overflow:visible !important;
    border-radius:0 !important;
    transform:none !important;
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }
  body[data-page-kind="game"][data-view="setup"] .hero.setup-only,
  body[data-page-kind="game"][data-view="setup"] .stepper,
  body[data-page-kind="game"][data-view="setup"] .wizard-card {
    width:calc(100% - 20px) !important;
    max-width:760px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box;
  }
  body[data-page-kind="game"][data-view="setup"] .hero.setup-only {
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body[data-page-kind="game"][data-view="setup"] .wizard-card {
    padding-left:14px !important;
    padding-right:14px !important;
  }
  body[data-page-kind="game"][data-view="setup"] button,
  body[data-page-kind="game"][data-view="setup"] [role="button"] { min-height:44px; }
  body[data-page-kind="game"][data-view="setup"] input,
  body[data-page-kind="game"][data-view="setup"] select,
  body[data-page-kind="game"][data-view="setup"] textarea { font-size:16px !important; max-width:100%; }
}

/* v20260830_0400 · mobile luck-game full-height repair
   Fixes the collapsed mobile game canvas caused by later viewport overrides.
   The shell owns the real viewport; safe-area padding belongs to the header/stage. */
@media (max-width: 1024px) {
  body[data-page-kind="game"][data-view="luck-game"] {
    width: 100% !important;
    height: var(--game-vh, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body[data-page-kind="game"][data-view="luck-game"] .app-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--game-vh, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--game-vh, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
  }

  body[data-page-kind="game"][data-view="luck-game"] #luckGameScreen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body[data-page-kind="game"][data-view="luck-game"] #luckGameScreen:not(.hidden) {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body[data-page-kind="game"][data-view="luck-game"] .luck-topbar {
    position: relative !important;
    height: auto !important;
    min-height: 62px !important;
    max-height: none !important;
    padding:
      max(6px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      6px
      max(8px, env(safe-area-inset-left, 0px)) !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  body[data-page-kind="game"][data-view="luck-game"] .luck-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-title-icon {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    overflow: hidden;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-title-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-title h2 {
    max-width: 100% !important;
    margin-top: 0 !important;
    font-size: clamp(18px, 4.8vw, 22px) !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-page-kind="game"][data-view="luck-game"] .luck-top-actions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-expand-btn,
  body[data-page-kind="game"][data-view="luck-game"] .luck-back-btn {
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 11px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    touch-action: manipulation;
  }

  body[data-page-kind="game"][data-view="luck-game"] .luck-stage {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding:
      7px
      max(7px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(7px, env(safe-area-inset-left, 0px)) !important;
    overflow: hidden !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-side {
    display: none !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-main {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-game-content {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 390px) {
  body[data-page-kind="game"][data-view="luck-game"] .luck-topbar {
    min-height: 58px !important;
    padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-title { gap: 6px !important; }
  body[data-page-kind="game"][data-view="luck-game"] .luck-title-icon {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-title h2 { font-size: 17px !important; }
  body[data-page-kind="game"][data-view="luck-game"] .luck-expand-btn {
    width: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-expand-btn::before {
    content: "⛶";
    font-size: 18px;
    line-height: 1;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-back-btn {
    padding: 0 8px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  body[data-page-kind="game"][data-view="luck-game"] .luck-topbar {
    min-height: 50px !important;
    padding-top: max(3px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 3px !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-title-icon {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-expand-btn,
  body[data-page-kind="game"][data-view="luck-game"] .luck-back-btn {
    min-height: 40px !important;
    height: 40px !important;
  }
  body[data-page-kind="game"][data-view="luck-game"] .luck-stage { padding-top: 5px !important; }
}