/* Phone portrait layout (2026-10-29). Scoped to #rotWrap.native so desktop and landscape are untouched.
   Carnaval Fortune (#slotStage) and Fortune Dragon (#dragonStage): one column, top to bottom:
   logo + jackpot ribbon / play area (reels as wide as the screen, sized from the container) / credit-bet-win strip / thumb controls.
   The reel window is positioned with container units, so every overlay that uses --rx/--ry/--rw/--rh (lines, lights, hold board,
   win banner) follows it; slot.js / dragon.js size the cells from the reel height (ResizeObserver). */

#rotWrap.native .stage.slot { --cH:160px; width:100% !important; --stage-w:100% !important; height:100%; max-height:none !important; display:flex !important; flex-direction:column; background:#06030a; overflow:hidden; }

/* ---------- top: logo row (clear of the portal's close button) + jackpot ribbon ---------- */
#rotWrap.native .stage.slot .topbox { position:relative; inset:auto; flex:none; height:auto; display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:6px 8px 8px; border-top:0; border-bottom:2px solid #d8b24a; box-shadow:inset 0 0 30px rgba(0,0,0,.8); z-index:3; }
#rotWrap.native .stage.slot .band-logo { position:relative; left:auto; top:auto; transform:none; width:auto; height:38px; max-width:calc(100% - 96px); align-self:center; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.8)); }
#rotWrap.native .stage.slot .jackpots { position:relative; inset:auto; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; padding:0; }
#rotWrap.native .stage.slot .jp { width:auto; height:38px; flex:none !important; min-width:0; border-radius:10px; border-width:1.5px; padding:0 6px 0 0; overflow:hidden; box-shadow:0 0 12px var(--glow), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 16px rgba(0,0,0,.35); }
#rotWrap.native .stage.slot .jp::before { border-radius:9px 9px 0 0; }
#rotWrap.native .stage.slot .jp-emblem { height:110%; margin:0 0 0 -3px; animation:none; }
#rotWrap.native .stage.slot .jp-text { gap:1px; }
#rotWrap.native .stage.slot .jp-name { font-size:11px; letter-spacing:.14em; line-height:1; }
#rotWrap.native .stage.slot .jp-val { font-size:15px; line-height:1.05; white-space:nowrap; }
/* Carnaval: GRAND across the full width, then MAJOR / MINOR / MINI */
#rotWrap.native #slotStage .jp-grand { grid-column:1 / -1; height:44px; }
#rotWrap.native #slotStage .jp-grand .jp-emblem { height:116%; margin-left:6px; }
#rotWrap.native #slotStage .jp-grand .jp-text { flex-direction:row; align-items:baseline; justify-content:center; gap:14px; padding-right:40px; }
#rotWrap.native #slotStage .jp-grand .jp-name { font-size:13px; letter-spacing:.3em; }
#rotWrap.native #slotStage .jp-grand .jp-val { font-size:24px; }
/* Fortune Dragon: six pots, 3 × 2 (EMPEROR / DRAGON / GRAND over MAJOR / MINOR / MINI) */
#rotWrap.native #dragonStage .jp-emblem { height:72%; margin:0 0 0 5px; }
#rotWrap.native #dragonStage .jp-val { font-size:15px; }
#rotWrap.native #dragonStage .jp-emperor .jp-val, #rotWrap.native #dragonStage .jp-grand .jp-val { font-size:16px; }
#rotWrap.native #dragonStage .jp-name { font-size:11px; letter-spacing:.1em; }

/* ---------- play area ---------- */
#rotWrap.native .stage.slot .stage-inner { position:relative; flex:1 1 0; min-height:0; width:100%; aspect-ratio:auto; container-type:size; background-size:cover; background-position:center; --rx:3%; --rw:94%; }
#rotWrap.native #slotStage .stage-inner { --rh:min(calc(94cqw * .6 * 1.16), calc(100cqh - 64px)); --ry:max(30px, calc((100cqh - var(--rh) - 34px) * .9)); }
#rotWrap.native #dragonStage .stage-inner { --rh:min(calc(94cqw * .8 * 1.14), calc(100cqh - 64px)); --ry:max(30px, calc((100cqh - var(--rh) - 34px) * .6)); }
#rotWrap.native .stage.slot .bg-video { object-fit:cover; }
/* during Hold & Spin the reels are hidden: lift the board so the hold total fits underneath */
#rotWrap.native #slotStage .stage-inner.hold, #rotWrap.native #dragonStage .stage-inner.hold { --ry:max(44px, calc((100cqh - var(--rh) - 64px) * .5)); }
/* Carnaval art: zoom past the painted header rail at the top of the 16:9 scene (the logo band above replaces it) */
#rotWrap.native #slotStage .stage-inner { background-size:auto 128%; background-position:50% 80%; }
#rotWrap.native #slotStage .bg-video { top:-22.4%; height:128%; }
#rotWrap.native .stage.slot .shelf, #rotWrap.native .stage.slot .meta-rail { display:none; }
#rotWrap.native .stage.slot .reels { border-radius:10px; gap:3px; padding:3px; }
#rotWrap.native .stage.slot .lines { padding:3px; }
/* the play window's ambient lift: a soft dark pool behind the reels so they read against any art */
#rotWrap.native .stage.slot .stage-inner::before { content:""; position:absolute; left:0; right:0; top:calc(var(--ry) - 30px); height:calc(var(--rh) + 70px); background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,0) 100%); pointer-events:none; z-index:1; }
#rotWrap.native .stage.slot .stage-inner::after { content:""; position:absolute; inset:auto 0 0 0; height:22%; background:linear-gradient(180deg, rgba(6,3,10,0), rgba(6,3,10,.85)); pointer-events:none; z-index:1; }
#rotWrap.native .stage.slot .stage-inner.hold::after { inset:0; height:auto; }

/* feature / pay rules line under the reels, wrapped to the screen */
#rotWrap.native .stage.slot .hint-bar { left:4%; right:4%; width:auto; top:calc(var(--ry) + var(--rh) + 8px); transform:none; white-space:normal; text-align:center; font-size:11px; line-height:1.5; letter-spacing:.08em; z-index:2; }
#rotWrap.native .stage.slot .hint-bar img { height:1.7em; }
#rotWrap.native .stage.slot .rtp-tag { left:8px; right:auto; top:8px; font-size:11px; letter-spacing:.1em; padding:3px 9px; }

/* Carnaval: the samba queen stands behind the reel frame, rising above it */
#rotWrap.native #slotStage .queen { left:auto; right:1%; top:auto; bottom:calc(100cqh - var(--ry) - 36px); height:min(calc(var(--ry) + 30px), 300px); width:auto; aspect-ratio:9 / 16; z-index:1; }
#rotWrap.native #slotStage .stage-inner.hold .queen { opacity:.25; }

/* HUDs and the hold total sit just above the reels; banners centre on them */
#rotWrap.native .stage.slot .hud { top:calc(var(--ry) - 8px); transform:translate(-50%, -100%); font-size:11px; letter-spacing:.14em; padding:5px 12px; z-index:6; }
#rotWrap.native .stage.slot .hud b { font-size:14px; }
#rotWrap.native .stage.slot .hold-hud { display:flex; align-items:center; gap:6px; max-width:94%; padding:5px 14px !important; font-size:12px !important; letter-spacing:.1em !important; }
#rotWrap.native .stage.slot .hold-hud b { font-size:17px !important; }
#rotWrap.native .stage.slot .hold-hud .lvl { margin-left:6px; padding-left:8px; font-size:11px; letter-spacing:.06em; white-space:nowrap; }
#rotWrap.native .stage.slot .hold-hud .fill { margin-left:6px; font-size:11px; letter-spacing:0; white-space:nowrap; }
/* the hold total goes under the board, where the pay-rules line was (hidden during the feature) */
#rotWrap.native .stage.slot .total-panel { top:calc(var(--ry) + var(--rh) + 6px); transform:translateX(-50%); min-width:56%; padding:2px 18px 4px; border-width:2px; }
#rotWrap.native .stage.slot .stage-inner.hold .hint-bar, #rotWrap.native .stage.slot .stage-inner.free .hint-bar, #rotWrap.native .stage.slot .stage-inner.hold .rtp-tag { opacity:0; }
#rotWrap.native .stage.slot .total-panel .tp-label { font-size:11px; line-height:1.3; }
#rotWrap.native .stage.slot .total-panel .tp-val { font-size:28px; }
#rotWrap.native .stage.slot .win-banner { top:calc(var(--ry) + var(--rh) / 2); }
#rotWrap.native .stage.slot .win-img { width:74cqw; }
#rotWrap.native .stage.slot .win-img.big { width:94cqw; }
#rotWrap.native .stage.slot .win-banner .a { font-size:40px; }
#rotWrap.native .stage.slot .bigwin .a { font-size:44px; }
#rotWrap.native .stage.slot .fo-title { font-size:34px; padding:0 12px; }
#rotWrap.native .stage.slot .fo-sub { font-size:18px; padding:0 16px; text-align:center; }
#rotWrap.native .stage.slot .coinval { font-size:15px; }
#rotWrap.native .stage.slot .socket .coinval { font-size:14px; }
#rotWrap.native .stage.slot .mt-toast { top:calc(var(--ry) - 10px); transform:translate(-50%, -100%); font-size:12px; white-space:nowrap; max-width:94%; overflow:hidden; text-overflow:ellipsis; }

/* hold board: the 5 × 3 / 5 × 4 board sits on the reel window; the 7- and 5-socket bonus rows get a full-width panel
   (the painted Carnaval/Rio panels would shrink the sockets to thumbnails on a phone) */
#rotWrap.native .stage.slot .hold-grid.p7, #rotWrap.native .stage.slot .hold-grid.p5 { left:var(--rx); width:var(--rw); top:calc(var(--ry) + var(--rh) / 2 - 20cqw); height:40cqw; padding:0 3%; gap:1.4%; border-radius:14px; border:1.5px solid rgba(255,220,140,.6); background:radial-gradient(ellipse at center, rgba(70,20,110,.78), rgba(10,4,20,.92)); box-shadow:inset 0 0 50px rgba(228,107,255,.3); }
#rotWrap.native #slotStage .hold-grid.p5 { background:radial-gradient(ellipse at center, rgba(10,90,40,.78), rgba(2,18,8,.92)); box-shadow:inset 0 0 50px rgba(93,255,138,.3); }
#rotWrap.native #dragonStage .hold-grid.p7 { background:radial-gradient(ellipse at center, rgba(120,30,10,.75), rgba(20,4,2,.92)); box-shadow:inset 0 0 50px rgba(255,120,40,.35); }
#rotWrap.native #dragonStage .hold-grid.p5 { background:radial-gradient(ellipse at center, rgba(120,90,10,.75), rgba(20,12,2,.92)); box-shadow:inset 0 0 50px rgba(255,200,80,.45); }
#rotWrap.native .stage.slot .hold-grid.p7 .socket { width:calc((100% - 6 * 1.4%) / 7); }
#rotWrap.native .stage.slot .hold-grid.p5 .socket { width:calc((100% - 4 * 1.4%) / 5); }

#rotWrap.native .stage.slot .stage-btn.skip { bottom:10px; min-height:44px; padding:0 22px; font-size:12px; }
#rotWrap.native .stage.slot .stage-btn.fs { display:none; }
#rotWrap.native .stage.slot .ip-inner { width:92%; max-height:88%; padding:16px 18px; font-size:13px; }
#rotWrap.native .stage.slot .ip-inner .btn { min-height:44px; }

/* ---------- bottom: CREDIT / BET / WIN strip, then  INFO · − · SPIN · + · AUTO  ---------- */
#rotWrap.native .stage.slot .ctrl-bar { position:relative; inset:auto; flex:none; height:var(--cH); min-height:0; display:grid !important; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows:46px 1fr; grid-template-areas:"cr bt wn" "l spin r"; align-items:center; gap:8px 6px !important; padding:8px 10px 10px !important; background:linear-gradient(180deg, #120a18, #06030a); border-top:1px solid rgba(255,220,140,.28); box-shadow:none; z-index:4; }
#rotWrap.native .stage.slot .ctrl-bar > * { min-width:0; }
#rotWrap.native .stage.slot .ctrl-bar .spacer, #rotWrap.native .stage.slot .ctrl-bar .meter.small, #rotWrap.native .stage.slot .ctrl-bar .denom, #rotWrap.native .stage.slot .denom-popup { display:none !important; }
#rotWrap.native .stage.slot .ctrl-bar .meter { height:46px; padding:0 6px; align-items:center; border-radius:10px; box-shadow:none; background:rgba(255,255,255,.05); border:1px solid rgba(255,220,140,.2); }
#rotWrap.native .stage.slot .ctrl-bar .meter:nth-child(2) { grid-area:cr; }
#rotWrap.native .stage.slot .ctrl-bar .meter:nth-child(3) { grid-area:bt; }
#rotWrap.native .stage.slot .ctrl-bar .meter.win { grid-area:wn; }
#rotWrap.native .stage.slot .meter label { font-size:11px; letter-spacing:.16em; line-height:1.2; }
#rotWrap.native .stage.slot .meter .val { font-size:clamp(13px, 3.9vw, 16px); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#rotWrap.native .stage.slot .meter.win .val { text-shadow:0 1px 2px #000; } /* the desktop glow would be boxed in by the ellipsis clip */

#rotWrap.native .stage.slot .spin-btn { grid-area:spin; justify-self:center; width:88px; height:88px; margin:0; filter:none; }
#rotWrap.native .stage.slot .spin-btn:disabled { filter:grayscale(.5) brightness(.6); }
#rotWrap.native .stage.slot .bet-step { display:grid !important; place-items:center; width:52px; height:52px; padding:0; border-radius:50%; border:1.5px solid rgba(255,220,140,.6); background:rgba(255,255,255,.06); color:#ffe6a8; font:700 26px/1 Inter, sans-serif; cursor:pointer; box-shadow:none; transition:transform .1s, background .2s; -webkit-tap-highlight-color:transparent; }
#rotWrap.native .stage.slot .bet-step:active { transform:scale(.94); background:rgba(255,220,140,.18); }
#rotWrap.native .stage.slot .bet-step:disabled { opacity:.35; cursor:default; }
#rotWrap.native .stage.slot .bet-step.down { grid-area:l; justify-self:end; }
#rotWrap.native .stage.slot .bet-step.up { grid-area:r; justify-self:start; }
#rotWrap.native .stage.slot .icon-btn { width:48px !important; height:48px !important; font-size:22px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); box-shadow:none; }
#rotWrap.native #autoBtn, #rotWrap.native #dgAutoBtn { grid-area:r; justify-self:end; }
#rotWrap.native .stage.slot .cab-btn { display:grid !important; grid-area:l; justify-self:start; place-items:center; width:48px; height:48px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; font-size:0; letter-spacing:0; color:#ffe6a8; }
#rotWrap.native .stage.slot .cab-btn::before { content:"i"; font:italic 800 22px/1 Georgia, serif; }

/* round result line ("line 14 · 3 × Q · 8× bet"): a pill just above the controls; the pay-rules line steps aside while it shows */
#rotWrap.native .stage.slot > .msg { position:absolute; left:50%; right:auto; top:auto; bottom:calc(var(--cH) + 12px); transform:translateX(-50%); max-width:92%; padding:5px 14px !important; border-radius:999px; background:rgba(6,3,10,.78); border:1px solid rgba(255,220,140,.3); color:#ffe6a8; font:700 12px/1.3 Inter, sans-serif; letter-spacing:.02em; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:5; pointer-events:none; }
#rotWrap.native .stage.slot > .msg:empty { display:none; }
#rotWrap.native .stage.slot:has(> .msg:not(:empty)) .hint-bar { opacity:0; }