/* Phone portrait layout (2026-10-29). Scoped to #rotWrap.native so desktop and landscape are untouched. */

/* ======================= shared ======================= */
#rotWrap.native .stage.wh, #rotWrap.native .stage.bac { width:100% !important; height:100%; max-height:none !important; }
#rotWrap.native .wh-inner, #rotWrap.native .bac-inner { aspect-ratio:auto; width:100%; height:100%; display:grid; grid-template-columns:minmax(0, 1fr); column-gap:8px; row-gap:8px; padding:0 10px calc(8px + env(safe-area-inset-bottom)); box-sizing:border-box; }
#rotWrap.native .wh-inner > *, #rotWrap.native .bac-inner > * { min-width:0; }
#rotWrap.native .wh-inner .stage-btn.fs, #rotWrap.native .bac-inner .bac-fs { display:none; }
/* round icon buttons (undo, clear, rebet, double) and chips: thumb sized, flat */
#rotWrap.native .wh-bar .bac-acts, #rotWrap.native .bac-bar .bac-acts { gap:6px; }
#rotWrap.native .wh-bar .bac-acts button, #rotWrap.native .bac-bar .bac-acts button { width:44px; height:44px; font-size:17px; box-shadow:none; }
#rotWrap.native .wh-bar .bac-chips, #rotWrap.native .bac-bar .bac-chips { gap:6px; justify-content:center; padding-top:6px; }
#rotWrap.native .wh-bar .bchip, #rotWrap.native .bac-bar .bchip { width:44px; height:44px; box-shadow:inset 0 0 0 2px rgba(0,0,0,.25); }
#rotWrap.native .wh-bar .bchip::after, #rotWrap.native .bac-bar .bchip::after { border-width:1px; }
#rotWrap.native .wh-bar .bchip b, #rotWrap.native .bac-bar .bchip b { font-size:12px; }
#rotWrap.native .wh-bar .bac-chips button.on, #rotWrap.native .bac-bar .bac-chips button.on { transform:translateY(-5px); }
#rotWrap.native .wh-bar .bac-chips button.on .bchip, #rotWrap.native .bac-bar .bac-chips button.on .bchip { box-shadow:0 0 0 3px #ffcf4a; }
#rotWrap.native .bac-ib { height:34px; min-width:34px; padding:0 10px; font-size:13px; }
/* rules sheet (both games) */
#rotWrap.native .bac-rules-in { width:calc(100% - 28px); max-height:calc(var(--long, 100vh) - 120px); box-sizing:border-box; padding:18px 16px; border-radius:16px; font-size:13px; }
#rotWrap.native .bac-rules-in h3 { font-size:28px; margin-bottom:6px; }
#rotWrap.native .bac-rules-in .small { font-size:12px; }
#rotWrap.native .bac-rules-in td, #rotWrap.native .bac-rules-in th { padding:5px 6px; }
#rotWrap.native .bac-rules-in .bac-deal { height:46px; padding:0 34px; font-size:22px; margin-top:8px; }

/* ======================= MEGA WHEEL =======================
   The showroom video is drawn as a large 16:9 plate (--sw wide) centred on the wheel, so the wheel, flapper and
   win effects keep their exact positions on the art; the bet board and controls flow beneath it. */
#rotWrap.native .wh-inner {
  --sw:min(300cqw, calc((var(--long, 100vh) - 520px) / .2573));
  --wd:calc(.2573 * var(--sw));
  --sx:calc(50cqw + 10px - .5031 * var(--sw));
  --sy:calc(env(safe-area-inset-top) + 66px - .1151 * var(--sw));
  --wtop:calc(env(safe-area-inset-top) + 66px + var(--wd) + 4px);
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-rows:var(--wtop) auto minmax(0, 1fr) auto auto;
  grid-template-areas:". ." "left right" "board board" "meters meters" "bar bar";
  background:#07030f url(../assets/wheel/studio.jpg) no-repeat var(--sx) var(--sy) / var(--sw) calc(var(--sw) * 1072 / 1920);
}
#rotWrap.native .wh-inner .wh-vid { inset:auto; left:var(--sx); top:var(--sy); width:var(--sw); height:calc(var(--sw) * 1072 / 1920); }
#rotWrap.native .wh-inner .wh-vig { inset:0; background:linear-gradient(180deg, rgba(7,3,15,.6) 0, transparent calc(env(safe-area-inset-top) + 60px), transparent calc(var(--wtop) - 70px), rgba(7,3,15,.88) calc(var(--wtop) + 10px), #07030f calc(var(--wtop) + 70px)); }
#rotWrap.native .wh-inner .wh-logo { left:10px; top:calc(env(safe-area-inset-top) + 6px); width:104px; }
#rotWrap.native .wh-inner .wh-wheel, #rotWrap.native .wh-inner .wh-hl { left:calc(var(--sx) + .3744 * var(--sw)); top:calc(var(--sy) + .1151 * var(--sw)); width:var(--wd); height:var(--wd); }
#rotWrap.native .wh-inner .wh-flapper { left:calc(var(--sx) + .4906 * var(--sw)); top:calc(var(--sy) + .096 * var(--sw)); width:calc(.025 * var(--sw)); height:calc(.033 * var(--sw)); }
#rotWrap.native .wh-inner .wh-land, #rotWrap.native .wh-inner .wh-banner { left:calc(var(--sx) + .5031 * var(--sw)); top:calc(var(--sy) + .2438 * var(--sw)); }
/* landing show, scaled to the wheel */
#rotWrap.native .whl-rays { width:calc(1.79 * var(--wd)); height:calc(1.79 * var(--wd)); }
#rotWrap.native .whl-ring { width:calc(.39 * var(--wd)); height:calc(.39 * var(--wd)); border-width:4px; }
#rotWrap.native .whl-med { width:calc(.49 * var(--wd)); }
#rotWrap.native .whl-med img, #rotWrap.native .whl-glint { border-radius:12px; }
#rotWrap.native .whl-cap { top:calc(.37 * var(--wd)); padding:4px 14px; font-size:calc(.11 * var(--wd)); border-width:1px; }
#rotWrap.native .whl-ts { right:calc(-.13 * var(--wd)); top:calc(-.07 * var(--wd)); padding:3px 10px; border-radius:8px; font-size:calc(.155 * var(--wd)); }
#rotWrap.native .wh-inner .wh-banner { padding:10px 22px; border-radius:16px; font-size:13px; border-width:2px; }
#rotWrap.native .wh-banner b { font-size:36px; } #rotWrap.native .wh-banner em { font-size:17px; }
#rotWrap.native .wh-confetti i { width:7px; height:11px; }
@keyframes whConfP { to { transform:translate(calc(var(--dx) * 3), var(--long, 100vh)) rotate(var(--r)); opacity:.9; } }
#rotWrap.native .wh-confetti i { animation-name:whConfP; }

/* history + Top Slot strip under the wheel */
#rotWrap.native .wh-inner .wh-left { grid-area:left; position:relative; inset:auto; width:auto; display:block; align-self:stretch; }
#rotWrap.native .wh-left .wh-bonus { display:none; }
#rotWrap.native .wh-left .wh-card { height:100%; box-sizing:border-box; padding:6px 9px; border-radius:12px; }
#rotWrap.native .wh-card > label { font-size:11px; letter-spacing:.14em; margin-bottom:5px; }
#rotWrap.native .wh-left .wh-hist { display:flex; flex-wrap:nowrap; gap:5px; overflow:hidden; }
#rotWrap.native .wh-left .wh-hist small { font-size:12px; }
#rotWrap.native .wh-left .hz { flex:0 0 auto; width:28px; height:28px; aspect-ratio:auto; border-radius:7px; font-size:18px; }
#rotWrap.native .hz i { right:-3px; top:-5px; padding:0 2px; border-radius:3px; font-size:8px; }
#rotWrap.native .wh-left .hz:nth-child(n+8) { display:none; }
#rotWrap.native .wh-inner .wh-right { grid-area:right; position:relative; inset:auto; width:auto; display:block; align-self:stretch; }
#rotWrap.native .wh-right .wh-card { display:none; }
#rotWrap.native .wh-right .wh-top { height:100%; min-height:54px; box-sizing:border-box; gap:4px; padding:5px 10px 9px; border-radius:12px; border-width:2px; box-shadow:0 0 12px rgba(255,47,180,.45), inset 0 0 8px rgba(0,0,0,.6); }
#rotWrap.native .wh-right .wt-reel { width:42px; height:36px; border-radius:6px; }
#rotWrap.native .wh-right .wt-strip i { font-size:26px; }
#rotWrap.native .wh-right .wt-x { font-size:20px; }
#rotWrap.native .wh-right .wt-lbl { bottom:-8px; padding:1px 8px; font-size:10px; letter-spacing:.16em; }

/* bet board: 3 x 2 tiles at their own proportions, as large as the space allows */
#rotWrap.native .wh-inner .wh-board { grid-area:board; position:relative; inset:auto; width:auto; height:auto; min-height:0; container-type:size; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr)); gap:14px 10px; padding-top:10px; box-sizing:border-box; }
#rotWrap.native .wh-spot { justify-self:center; align-self:center; width:min(100%, calc((100cqh - 24px) / 2 * .8)); height:auto; aspect-ratio:320 / 402; border-radius:12px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
#rotWrap.native .wh-spot:hover { transform:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
#rotWrap.native .wh-spot .ws-pay { padding:1px 7px; font-size:10px; letter-spacing:.08em; bottom:4%; }
#rotWrap.native .ws-amt { top:-9px; left:50%; right:auto; transform:translateX(-50%); white-space:nowrap; padding:2px 8px 2px 4px; gap:4px; font-size:11px; }
#rotWrap.native .ws-amt .bchip.sm { width:14px; height:14px; }
#rotWrap.native .ws-ts { right:4px; top:4px; padding:1px 6px; border-radius:5px; font-size:13px; box-shadow:0 0 8px #ffd43b; }
#rotWrap.native .ws-res { top:36%; font-size:22px; line-height:1; }
#rotWrap.native .wh-spot.won { filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px var(--c1)); transform:translateY(-4px) scale(1.04); }
@keyframes whHitP { 40% { transform:translateY(-6px) scale(1.08); filter:brightness(1.5) drop-shadow(0 0 12px var(--c1)); } }
#rotWrap.native .wh-spot.hitp { animation-name:whHitP; }

/* meters row */
#rotWrap.native .wh-inner .wh-meters { grid-area:meters; position:relative; inset:auto; display:flex; gap:6px; align-items:stretch; }
#rotWrap.native .wh-meters > div { flex:1 1 0; min-width:0; padding:4px 8px; border-radius:12px; }
#rotWrap.native .wh-meters label { font-size:10px; letter-spacing:.12em; }
#rotWrap.native .wh-meters > div:nth-child(2) { flex-grow:1.25; }
#rotWrap.native .wh-meters b { font-size:13px; overflow:hidden; text-overflow:ellipsis; }
#rotWrap.native .wh-meters .bac-ib { height:auto; min-height:40px; min-width:44px; font-size:16px; }

/* chips on top, then undo / clear / rebet / x2 and SPIN */
#rotWrap.native .wh-inner .wh-bar { grid-area:bar; position:relative; inset:auto; width:auto; height:auto; display:grid; grid-template-columns:auto auto minmax(0, 1fr); grid-template-areas:"chips chips chips" "a1 a2 spin"; gap:8px; }
#rotWrap.native .wh-bar .bac-chips { grid-area:chips; }
#rotWrap.native .wh-bar .bac-acts:first-child { grid-area:a1; } #rotWrap.native .wh-bar .bac-acts:nth-child(3) { grid-area:a2; }
#rotWrap.native .wh-spin { grid-area:spin; margin:0; height:48px; padding:0 12px; font-size:26px; box-shadow:none; }

/* bonus rounds */
#rotWrap.native .wh-inner .wh-scene { gap:14px; padding:calc(env(safe-area-inset-top) + 50px) 12px calc(env(safe-area-inset-bottom) + 16px); box-sizing:border-box; }
#rotWrap.native .whv-t, #rotWrap.native .whm-t { font-size:30px; text-align:center; line-height:1.05; padding:0 30px; }
#rotWrap.native .whv-grid { grid-template-columns:repeat(4, 21cqw); gap:3cqw; perspective:200cqw; }
#rotWrap.native .safe { width:21cqw; height:22.6cqw; }
#rotWrap.native .safe-in, #rotWrap.native .safe-door { border-radius:6px; }
#rotWrap.native .safe-in b { font-size:26px; } #rotWrap.native .safe em { left:5px; top:3px; font-size:12px; }
#rotWrap.native .whv-s { min-height:40px; font-size:15px; text-align:center; } #rotWrap.native .whv-s b { font-size:34px; }
#rotWrap.native .wh-scene.mega { align-content:start; gap:0; padding-top:calc(env(safe-area-inset-top) + 18vh); }
#rotWrap.native .whm-t { height:46px; }
#rotWrap.native .whm-wheel { width:88cqw; height:88cqw; margin-top:10px; }
#rotWrap.native .wh-inner .whm-flap { left:calc(50% - 3.4cqw); top:calc(env(safe-area-inset-top) + 18vh + 56px - 6.3cqw); width:6.8cqw; height:8.8cqw; }
#rotWrap.native .whm-res { min-height:60px; margin-top:12px; font-size:14px; text-align:center; } #rotWrap.native .whm-res > b { font-size:44px; }

/* ======================= BACCARAT =======================
   Dealer video across the top (--bs tall, cropped round the dealer), the hands over its lower edge, then the roads
   strip, the betting felt (pairs and tie above, Player and Banker below) and the chip rail with DEAL. */
#rotWrap.native .bac-inner {
  --bs:max(250px, calc(var(--long, 100vh) - 470px));
  grid-template-rows:var(--bs) auto minmax(0, 1fr) auto;
  background:#120507 url(../assets/baccarat/salon.jpg) no-repeat 50% 0 / auto var(--bs);
}
#rotWrap.native .bac-inner .bac-vid { inset:auto; left:0; top:0; width:100%; height:var(--bs); object-fit:cover; object-position:50% 30%; }
#rotWrap.native .bac-inner .bac-vig { inset:0; background:linear-gradient(180deg, rgba(10,3,5,.6) 0, transparent calc(env(safe-area-inset-top) + 64px), transparent calc(var(--bs) - 150px), rgba(10,3,5,.7) calc(var(--bs) - 30px), #120507 calc(var(--bs) + 6px)); }
#rotWrap.native .bac-inner .bac-logo { left:10px; top:calc(env(safe-area-inset-top) + 7px); width:98px; }
#rotWrap.native .bac-inner .bac-top { left:118px; right:50px; top:calc(env(safe-area-inset-top) + 7px); justify-content:flex-end; gap:6px; }
#rotWrap.native .bac-ib span { display:inline; }
#rotWrap.native .bac-info { position:absolute; right:-40px; top:42px; max-width:calc(100vw - 20px); width:max-content; gap:5px; }
#rotWrap.native .bac-info span { padding:3px 8px; font-size:10px; letter-spacing:.06em; }
#rotWrap.native .bac-info span:nth-child(2), #rotWrap.native .bac-info span:nth-child(4) { display:none; }
#rotWrap.native .bac-info span.last { display:inline; }

/* hands over the bottom of the video */
#rotWrap.native .bac-inner .bac-hands { left:10px; right:10px; top:auto; bottom:calc(100% - var(--bs) + 6px); gap:8px; transform:translateY(-6px); }
#rotWrap.native .bac-inner .bac-hands.show { transform:none; }
#rotWrap.native .bac-hand { padding:6px 8px 8px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.5); }
#rotWrap.native .bac-hand header { margin-bottom:5px; gap:8px; }
#rotWrap.native .bac-hand header b { font-size:20px; text-shadow:0 0 8px var(--hc); }
#rotWrap.native .bac-tot { width:28px; height:28px; font-size:20px; box-shadow:0 0 8px var(--hc); }
#rotWrap.native .bac-hand.win { display:block; padding:6px 8px 8px; border-bottom:2px solid var(--hc); font-size:inherit; box-shadow:0 0 0 2px #ffcf4a, 0 0 18px rgba(255,207,74,.7); transform:scale(1.02); }
#rotWrap.native .bac-cards { gap:4px; min-height:66px; }
#rotWrap.native .bac-card { --cw:min(9.4cqw, 42px); perspective:400px; }
#rotWrap.native .bac-card.third { margin:0 calc(var(--cw) * .2 + 2px); }
#rotWrap.native .bc-back, #rotWrap.native .bc-front { box-shadow:0 2px 5px rgba(0,0,0,.55); }
#rotWrap.native .bac-inner .bac-banner { top:max(calc(env(safe-area-inset-top) + 76px), calc(var(--bs) - 180px)); gap:10px; padding:8px 18px; border-width:1px; box-shadow:0 0 18px rgba(255,190,60,.35); }
#rotWrap.native .bac-banner b { font-size:26px; } #rotWrap.native .bac-banner span { font-size:24px; } #rotWrap.native .bac-banner em { font-size:12px; }
#rotWrap.native .bac-inner .bac-toast { top:calc(env(safe-area-inset-top) + 82px); max-width:calc(100% - 24px); padding:7px 16px; font-size:12px; white-space:normal; text-align:center; box-sizing:border-box; }

/* roads strip: bead plate and big road side by side; derived roads, stats and Ask stay on desktop */
#rotWrap.native .bac-inner { --cell:calc((var(--short, 100vw) - 60px) / 24); }
#rotWrap.native .bac-inner .bac-roads { position:relative; inset:auto; width:auto; grid-row:2; grid-column:1; padding:4px 6px 6px; border-radius:10px; border-width:1px; box-shadow:none; }
#rotWrap.native .bac-inner .bac-roads.l { width:calc(10 * var(--cell) + 16px); justify-self:start; }
#rotWrap.native .bac-inner .bac-roads.r { width:calc(14 * var(--cell) + 16px); justify-self:end; }
#rotWrap.native .bac-rt { font-size:9px; letter-spacing:.14em; margin-bottom:3px; }
#rotWrap.native .bac-roads .road { grid-template-columns:repeat(var(--cols), var(--cell)); grid-template-rows:repeat(6, var(--cell)); }
#rotWrap.native .bac-roads .road i { aspect-ratio:auto; }
#rotWrap.native .bac-roads .road b { width:90%; height:90%; font-size:10px; }
#rotWrap.native .bac-roads .br { border-width:2px; }
#rotWrap.native .bac-roads .br em { font-size:8px; } #rotWrap.native .bac-roads .br em::before { height:1px; }
#rotWrap.native .bac-roads .bac-stats, #rotWrap.native .bac-roads .bac-drv, #rotWrap.native .bac-roads .bac-ask { display:none; }

/* betting felt */
#rotWrap.native .bac-inner .bac-grid { position:relative; inset:auto; height:auto; grid-row:3; min-height:0; grid-template-columns:repeat(6, minmax(0, 1fr)); grid-template-rows:minmax(48px, 2fr) minmax(64px, 3fr); max-height:260px; align-self:stretch; width:100%; box-sizing:border-box; gap:6px; padding:6px; border-radius:16px 16px 10px 10px; border-width:2px; box-shadow:inset 0 0 18px rgba(0,0,0,.5); }
#rotWrap.native .bac-spot { padding:6px 4px 0; gap:2px; border-radius:10px; border-width:1.5px; align-content:center; padding:0 4px; }
#rotWrap.native .bac-spot.playerPair { grid-area:1 / 1 / 2 / 3; } #rotWrap.native .bac-spot.tie { grid-area:1 / 3 / 2 / 5; } #rotWrap.native .bac-spot.bankerPair { grid-area:1 / 5 / 2 / 7; }
#rotWrap.native .bac-spot.player { grid-area:2 / 1 / 3 / 4; } #rotWrap.native .bac-spot.banker { grid-area:2 / 4 / 3 / 7; }
#rotWrap.native .bac-spot .bs-name { font-size:19px; }
#rotWrap.native .bac-spot.player .bs-name, #rotWrap.native .bac-spot.banker .bs-name { font-size:30px; }
#rotWrap.native .bac-spot .bs-pay { font-size:11px; letter-spacing:.08em; }
#rotWrap.native .bac-spot .bs-stack { left:auto; right:6px; top:50%; bottom:auto; width:26px; height:32px; transform:translateY(-50%); }
#rotWrap.native .bac-spot.player .bs-stack, #rotWrap.native .bac-spot.banker .bs-stack { right:10px; }
#rotWrap.native .bac-spot .bchip.sm { width:26px; height:26px; }
#rotWrap.native .bac-spot .bchip.sm b { font-size:9px; }
#rotWrap.native .bac-spot .bs-amt { bottom:3px; font-size:11px; }
#rotWrap.native .bac-spot:has(.bs-res:not(:empty)) .bs-pay { visibility:hidden; }
#rotWrap.native .bac-spot .bs-res { top:auto; bottom:6px; font-size:22px; text-shadow:0 0 8px rgba(255,190,60,.8); }
#rotWrap.native .bac-spot.push .bs-res { font-size:14px; }
#rotWrap.native .bac-spot.won { box-shadow:inset 0 0 14px rgba(255,207,74,.5), 0 0 10px rgba(255,207,74,.6); }
@keyframes bacTakeP { to { transform:translate(0, -90px) scale(.4); opacity:0; } }
#rotWrap.native .bac-spot.lost .bs-stack { animation-name:bacTakeP; }

/* control bar: meters, chips, then undo / clear / rebet / x2 and DEAL */
#rotWrap.native .bac-inner .bac-bar { position:relative; inset:auto; width:auto; height:auto; grid-row:4; display:grid; grid-template-columns:auto auto minmax(0, 1fr); grid-template-areas:"meter meter meter" "chips chips chips" "a1 a2 deal"; gap:8px; }
#rotWrap.native .bac-bar .bac-chips { grid-area:chips; }
#rotWrap.native .bac-bar .bac-acts:first-child { grid-area:a1; } #rotWrap.native .bac-bar .bac-acts:nth-child(3) { grid-area:a2; }
#rotWrap.native .bac-meter { grid-area:meter; display:flex; gap:6px; min-width:0; }
#rotWrap.native .bac-meter div { flex:1 1 0; display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:7px 10px; min-width:0; border-radius:12px; background:rgba(12,4,6,.7); border:1px solid rgba(214,170,90,.3); }
#rotWrap.native .bac-meter label { flex:none; white-space:nowrap; font-size:10px; letter-spacing:.12em; }
#rotWrap.native .bac-meter div:nth-child(2) { flex-grow:1.3; }
#rotWrap.native .bac-meter b { font-size:13px; overflow:hidden; text-overflow:ellipsis; }
#rotWrap.native .bac-deal { grid-area:deal; height:48px; padding:0 12px; font-size:24px; box-shadow:none; }

/* squeeze */
#rotWrap.native .bac-inner .bac-sq { gap:18px; padding:0 12px; }
#rotWrap.native .bac-sq-t { font-size:30px; }
#rotWrap.native .bac-sq-cards { gap:6cqw; }
#rotWrap.native .sq-card { --cw:min(38cqw, 170px); box-shadow:0 10px 24px rgba(0,0,0,.6); }
#rotWrap.native .sq-back::after { height:8px; }
#rotWrap.native .bac-sq-h { font-size:13px; text-align:center; }
#rotWrap.native .bac-sq-open { min-height:44px; padding:0 28px; font-size:14px; }
/* label above value, so "Total bet 100 coins" never gets cut */
#rotWrap.native .bac-meter div { flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:6px 10px; }
#rotWrap.native .bac-meter div:nth-child(2) { flex-grow:1; }
#rotWrap.native .bac-meter b { white-space:nowrap; }