/* Phone portrait layout (2026-10-29). Scoped to #rotWrap.native so desktop and landscape are untouched.
   Carnaval Roulette upright: the dealer scene is a cropped band at the top (wheel + dealer), the betting table is turned
   90deg so it reads 0 at the top, three numbers across and twelve rows down, dozens and even-money bets on the left,
   2:1 columns at the foot (roulette.js keeps the labels upright and resolves taps along the turned grid), and the
   credit / chips / undo-clear-rebet-x2 / SPIN controls sit at the bottom for thumbs. Recent results ride along the
   bottom of the scene as LED tiles. */
#rotWrap.native .stage.rou {
  --sc: clamp(176px, calc(var(--long) * .26), 250px);               /* visible scene band */
  --fh: calc(var(--sc) / .86);                                      /* full 16:9 scene, showing 6%..92% of its height */
  --fw: calc(var(--fh) * 1920 / 1072);
  --ox: calc(var(--fw) * -.01); --oy: calc(var(--fh) * -.06);
  --ctrl: 170px;                                                    /* bottom control block */
  --tw: calc(var(--short) - 10px);                                  /* table, as seen */
  --th: calc(var(--long) - var(--sc) - var(--ctrl) - 6px);
  width:100% !important; --stage-w:100% !important; height:100%; max-height:none !important; background:#06110c;
}
#rotWrap.native .rou-inner {
  aspect-ratio:auto; height:100%; overflow:hidden;
  background-size:var(--fw) var(--fh) !important; background-position:var(--ox) var(--oy) !important; background-repeat:no-repeat !important;
  background-color:#06110c;
}
#rotWrap.native .rou-inner::before { inset:auto; left:0; right:0; top:0; height:calc(var(--sc) + 1px); z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(6,17,12,.85) 90%, #06110c); }
#rotWrap.native .rou-inner::after { content:""; position:absolute; left:0; right:0; top:var(--sc); bottom:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 60% at 50% 35%, #0d3a24 0%, #08200f 55%, #06110c 100%); }

/* ---- scene band ---- */
#rotWrap.native .rou-dealer { inset:auto; left:var(--ox); top:var(--oy); width:var(--fw); height:var(--fh); clip-path:inset(0 0 calc(var(--fh) + var(--oy) - var(--sc)) 0); }
#rotWrap.native .rou3-cam { left:calc(var(--ox) + var(--fw) * .0298); top:calc(var(--oy) + var(--fh) * .1203); width:calc(var(--fw) * .5084);
  clip-path:inset(0 0 calc(var(--oy) + var(--fh) * .1203 + var(--fw) * .5084 - var(--sc)) 0); }
#rotWrap.native .rou-logo { left:8px; top:6px; width:min(27%, 108px); z-index:3; }
#rotWrap.native .rou-rtp { left:auto; right:8px; top:auto; bottom:calc(100% - var(--sc) + 6px); z-index:3; font-size:11px; }
#rotWrap.native .rou-result { left:auto; right:calc(var(--short) * .30); top:10px; width:64px; border-width:2px; box-shadow:none; z-index:6; }
#rotWrap.native .rou-result b { font-size:26px; } #rotWrap.native .rou-result span { font-size:11px; letter-spacing:.1em; }
#rotWrap.native .rou-msg { left:0; right:0; top:calc(var(--sc) - 22px); z-index:5; text-align:center; font-size:12px; }

/* results: one row of LED tiles along the foot of the scene (frame, head and stats hidden) */
#rotWrap.native .rou-board { --u:1px; left:8px; right:auto; top:calc(var(--sc) - 30px); width:calc(var(--short) - 92px); height:24px; aspect-ratio:auto; clip-path:none; filter:none; z-index:3; pointer-events:none; }
#rotWrap.native .rou-board-frame, #rotWrap.native .tote-head, #rotWrap.native .tote-stats { display:none; }
#rotWrap.native .rou-board-panel { inset:0; width:100%; height:100%; padding:0; }
#rotWrap.native .tote-col { height:100%; flex-direction:row; align-items:stretch; gap:4px; padding:0; overflow:hidden; }
#rotWrap.native .tote-col span { flex:0 0 24px; width:auto; min-width:0; font:800 11px/1 Inter, Arial, sans-serif; border-radius:5px; }
#rotWrap.native .tote-col span:first-child:not(.empty) { flex:0 0 30px; width:auto; font-size:13px; box-shadow:inset 0 0 0 2px #fff; }

/* ---- betting table: turned 90deg about its centre so it fills the middle of the screen ---- */
#rotWrap.native .rou-table3d { perspective:none; z-index:3;
  width:var(--th); height:var(--tw);
  left:calc(5px + (var(--tw) - var(--th)) / 2); top:calc(var(--sc) + 2px + (var(--th) - var(--tw)) / 2);
  transform:rotate(90deg); }
#rotWrap.native .rou-layout-box { transform:none; border-radius:10px; border:1.5px solid rgba(245,217,138,.7); background:rgba(3,40,22,.55); box-shadow:none; backdrop-filter:none; }
#rotWrap.native .rou-layout-box .lt { font:800 15px Inter, sans-serif; }
#rotWrap.native .rou-layout-box .lc.out .lt { font-size:11px; letter-spacing:.02em; }
#rotWrap.native .rou-layout-box .lc[data-num="0"] .lt { font-size:20px; }
#rotWrap.native .rou-layout-box .lc.win rect { stroke-width:4; }
#rotWrap.native .rchip { width:7.4%; transform:translate(-50%,-50%) rotate(-90deg); }
#rotWrap.native .rchip.lost { transform:translate(-50%,-50%) rotate(-90deg) translateY(30px); }
#rotWrap.native .rchip .rv { font-size:11px; }

/* ---- controls: credit / bet / win, then chips and SPIN, then undo / clear / rebet / x2 ---- */
#rotWrap.native .stage.rou .ctrl-bar { position:absolute; left:0; right:0; bottom:0; top:auto; height:var(--ctrl); min-height:0; z-index:4;
  display:grid !important; grid-template-columns:repeat(12, minmax(0, 1fr)) 88px; grid-template-rows:40px 56px 44px; row-gap:6px !important; column-gap:0 !important;
  align-content:center; align-items:stretch !important; padding:6px 5px 4px !important; background:linear-gradient(180deg, rgba(6,17,12,0), #06110c 14%); border:0; }
#rotWrap.native .stage.rou .ctrl-bar > * { margin:0 3px; min-width:0; }
#rotWrap.native .stage.rou .ctrl-bar .spacer { display:none; }
#rotWrap.native .stage.rou .meter { grid-row:1; height:auto; padding:0 clamp(6px, 2.3vw, 9px); border-radius:10px; box-shadow:none; justify-content:center; overflow:hidden; }
#rotWrap.native .stage.rou .meter:nth-child(1) { grid-column:1 / 6; } #rotWrap.native .stage.rou .meter:nth-child(2) { grid-column:6 / 11; } #rotWrap.native .stage.rou .meter:nth-child(3) { grid-column:11 / 14; }
#rotWrap.native .stage.rou .meter label { font-size:11px; letter-spacing:.14em; line-height:1.1; }
#rotWrap.native .stage.rou .meter .val { font-size:clamp(11px, 3.3vw, 14px) !important; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; text-shadow:none; }
#rotWrap.native .rou-chipbar { grid-row:2; grid-column:1 / 13; height:auto; display:flex; justify-content:space-between; align-items:center; gap:2px; }
#rotWrap.native .rou-chipbar .chipbtn { height:auto; width:min(52px, 19%); flex:0 0 auto; filter:brightness(.82); border-radius:50%; }
#rotWrap.native .rou-chipbar .chipbtn.on { transform:scale(1.08); filter:none; outline:2px solid #ffe08a; outline-offset:2px; }
#rotWrap.native .stage.rou .cab-btn { display:block; grid-row:3; height:auto; padding:0 2px; border-radius:10px; font-size:11px; letter-spacing:.1em; backdrop-filter:none; -webkit-backdrop-filter:none; }
#rotWrap.native .stage.rou #rouUndo { grid-column:1 / 4; } #rotWrap.native .stage.rou #rouClear { grid-column:4 / 7; } #rotWrap.native .stage.rou #rouRebet { grid-column:7 / 10; } #rotWrap.native .stage.rou #rouDouble { grid-column:10 / 13; font-size:13px; }
#rotWrap.native .stage.rou .spin-btn { grid-row:2 / 4; grid-column:13; align-self:center; justify-self:center; width:84px; height:84px; margin:0; filter:none; }
#rotWrap.native .stage.rou .spin-btn:disabled { filter:grayscale(.5) brightness(.6); }