/* Portrait composition follows the supplied polished SLAM 7 reference.
   A viewport budget keeps the complete table and live footer on screen. */
@media (max-width:600px) and (orientation:portrait) {
  body { --mobile-footer:clamp(128px,21dvh,235px); --safe-bottom:env(safe-area-inset-bottom,0px); }
  .game-stage { height:calc(100dvh - var(--mobile-footer) - var(--safe-bottom)); min-height:0; }
  .casino-table { height:100%; background-image:url('/demo/slam-7/assets/table/mobile-polished-table.png'); background-size:100% 100%; background-position:center; }
  .casino-table:before { display:none; }
  #card-shoe-origin { left:96%; top:7%; }

  .topbar { height:clamp(36px,4.8dvh,60px); padding:0 2%; background:radial-gradient(ellipse at 40% 0,#75501b40,transparent 70%),linear-gradient(100deg,#070706,#14120c 48%,#050504); border-bottom:1.5px solid #efca70; border-radius:0 0 15px 15px; box-shadow:0 2px 2px #4f2c0b,0 3px 5px #0009; }
  .topbar .wordmark { top:6%; left:4%; height:86%; width:27%; }
  .topbar .wordmark img { opacity:0; }
  .topbar .wordmark:after { content:''; position:absolute; inset:0; background:linear-gradient(#fff9ce,#f4d778 65%,#b98129); -webkit-mask:url('/demo/slam-7/assets/table/gaslit-gaming.png') center/contain no-repeat; mask:url('/demo/slam-7/assets/table/gaslit-gaming.png') center/contain no-repeat; }
  .topbar nav { width:53%; height:84%; justify-content:space-evenly; align-items:center; gap:0; padding:2px 4px; border:1.5px solid #ebc565; border-radius:30px; background:linear-gradient(#181913,#050604); box-shadow:inset 0 -1px #fff0a8,0 2px 3px #0009; }
  .menu-button { height:80%; flex:1; padding:0 4px; font-size:clamp(8px,2vw,12px); font-weight:600; color:#fff0bb; }
  .menu-button + .menu-button { border-left:1px solid #e6bd4f33; }
  .menu-button span { font-size:clamp(10px,2.8vw,17px); margin-right:3px; color:#f0cd72; }
  .table-brand { top:7.8%; left:19%; width:62%; height:22.5%; }
  .bonus-spot { top:26.2%; width:39%; height:19.2%; }
  .sevens-spot { left:4%; } .poker-spot { right:4%; }
  .bonus-spot .spot-stake { top:78%; }
  .bonus-spot .empty-wager-label { font-size:clamp(9px,2.2vw,13px); font-weight:600; color:#fff8d5; padding:3px 10px; border:1px solid #e8c565; border-radius:15px; background:#080907ed; box-shadow:0 2px 3px #0007; }
  .bonus-result { top:calc(100% + 1px); width:max-content; max-width:98%; font-size:clamp(8px,2vw,11px); padding:3px 6px; line-height:1.2; }
  .bonus-result.no-payout { max-width:100%; white-space:nowrap; font-size:clamp(7px,1.9vw,10px); }

  /* Every tray measurement shares a 360 × 230 plane. Cap its width by the
     available felt height, rather than stretching the cards and frame apart. */
  .playing-field { left:50%; top:49.2%; width:min(96cqw,64.5cqh); height:auto; aspect-ratio:360/230; transform:translateX(-50%); }
  .desktop-field { display:none; } .mobile-field { display:block; }
  .field-art path { stroke-width:1.8; }
  .playing-field .deal-zone { left:0; top:0; width:100%; height:100%; display:block; }
  .playing-field .hand { position:absolute; top:3.478261%; width:35.833333%; transform:none; }
  .playing-field .red-hand { left:3.611111%; right:auto; }
  .playing-field .black-hand { left:59.444444%; right:auto; }
  .playing-field .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:.833333cqw; padding:0; }
  .playing-field .hand .card-slot { width:100%; aspect-ratio:2/3; border-width:1.5px; border-radius:4px; transform:none; }
  .playing-field .playing-card,.playing-field .card-peel-overlay { border-radius:3px!important; }
  .playing-field .hand-heading { position:absolute; top:18.333333cqw; left:0; margin:0; height:3.055556cqw; font-size:3.055556cqw; line-height:1; width:29.166667cqw; letter-spacing:0; }
  .playing-field .hand-caption { position:absolute; top:22.5cqw; left:0; display:block; margin:0; font-size:1.944444cqw; letter-spacing:.1px; line-height:1; width:29.166667cqw; color:#fff8df; }
  .playing-field .red-hand .hand-heading,.playing-field .red-hand .hand-caption { left:11.388889cqw; width:24.722222cqw; margin:0; }
  #table .playing-field .hand-score { top:18.055556cqw; left:-.277778cqw; right:auto; width:6.388889cqw; height:6.388889cqw; transform:none; border:1px solid #fff8e5; border-radius:4px; background:linear-gradient(#171817,#050605); box-shadow:0 2px 4px #0009,inset 0 0 0 1px #000; }
  #table .playing-field .black-hand .hand-score { left:auto; right:-.277778cqw; }
  .hand-score>small { display:none; }
  .hand-score .score { font-size:4.722222cqw; line-height:1; margin:0; }
  .playing-field .slam-area { position:absolute; left:50%; top:3.478261%; width:13.888889%; margin:0; transform:translateX(-50%); display:block; }
  .playing-field .slam-slot { width:100%; aspect-ratio:2/3; border-radius:4px; }
  .playing-field .slam-area>strong { margin-top:1.666667cqw; font-size:2.5cqw; line-height:1; }
  .playing-field .slam-area>small { margin-top:.833333cqw; font-size:1.666667cqw; line-height:1.1; }
  .playing-field .main-betting { left:0; top:45.217391%; width:100%; height:50.434783%; display:grid; grid-template-columns:48.888889% 2.222222% 48.888889%; }
  .playing-field .red-spot .side-name { top:54%; left:50%; width:25.64cqw; transform:translate(-50.427%,-54.787%); }
  .playing-field .black-spot .side-name { top:54%; left:50%; right:auto; width:30.39cqw; transform:translate(-51.011%,-53.690%); }
  .playing-field .main-amount { top:54%; right:9%; transform:translateY(-10%); }
  .playing-field .black-spot .main-amount { left:9%; right:auto; }
  .table-chip-stack { width:30px; height:22px; margin-top:7px; }
  .table-chip-image { width:30px; height:30px; }
  .table-chip-amount { font-size:9px; padding:3px 5px; min-width:30px; }
  .bonus-spot .table-chip-stack { width:30px; height:23px; }
  .bonus-spot .table-chip-image { width:30px; height:30px; }
  .bonus-spot .table-chip-amount { font-size:8px; }
  .wager-profit { font-size:8px; margin-top:2px; }
  .casino-table .status-bar { top:auto; bottom:1%; left:5%; width:90%; height:8%; transform:none; justify-content:center; gap:5px; }
  .casino-table .status-bar #status { height:auto; min-height:0; }
  .status-bar .has-result #status-message { position:relative; display:inline-block; left:auto; top:auto; transform:none; font-size:clamp(9px,2.3vw,13px); font-weight:600; padding:5px 14px; line-height:1.15; color:#fff2b3; border:1.2px solid #f0c45d; border-radius:20px; background:linear-gradient(#15160f,#050605); box-shadow:inset 0 -1px #72501b,0 2px 3px #0009; }
  .casino-table .status-bar .text-button { font-size:8px; }

  .control-panel { position:relative; bottom:auto; height:calc(var(--mobile-footer) + var(--safe-bottom)); padding-bottom:var(--safe-bottom); }
  .chip-shelf { height:36%; justify-content:center; padding:0 9%; }
  .chips { gap:clamp(7px,2.8vw,17px); }
  .chip { --portrait-chip-size:min(clamp(33px,10.7vw,60px),calc(var(--mobile-footer) * .36 - 8px)); width:var(--portrait-chip-size); height:var(--portrait-chip-size); }
  .chip.active { transform:translateY(-3px); }
  .leather-console { height:64%; padding:0 3%; }
  .wallet-group { width:26%; gap:3px; flex-direction:column; }
  .wallet,.total-bet { min-width:0; width:100%; height:clamp(27px,4.2dvh,42px); border-color:#e6c15d; background:linear-gradient(#090a08,#15150f); border-radius:30px; box-shadow:inset 0 1px 2px #000a; }
  .wallet>span,.total-bet>span { font-size:clamp(7px,1.8vw,10px); line-height:1.1; color:#fff2ba; letter-spacing:0; }
  .wallet strong,.total-bet b { font-size:clamp(13px,3.5vw,20px); line-height:1.2; color:#ffed91; }
  .win-box.wallet { width:24%; }
  .round-actions { left:50%; top:50%; }
  .toast { bottom:calc(var(--mobile-footer) + var(--safe-bottom) + 12px); }
}

@media (max-width:600px) and (orientation:portrait) and (max-height:760px) {
  .table-brand { top:8%; height:21%; }
  .bonus-spot { top:24%; height:18%; }
  .playing-field { top:48.5%; }
  .playing-field .main-amount { top:34%; right:5%; }
  .playing-field .black-spot .main-amount { left:5%; }
  .table-chip-stack { width:27px; height:20px; margin-top:5px; }
  .table-chip-image { width:27px; height:27px; }
  .table-chip-amount { font-size:8px; padding:2px 4px; min-width:27px; }
  .bonus-result { font-size:7.5px; padding:3px 5px; }
  .bonus-result.no-payout { font-size:7px; }
  .status-bar .has-result #status-message { font-size:8px; padding:4px 10px; }
  .casino-table .status-bar { gap:3px; }
  .casino-table .status-bar .text-button { font-size:7px; }
}