:root{
  --bg0:#040b1f;
  --bg2:#071e3f;

  --text:#ffffff;
  --muted:rgba(255,255,255,0.68);

  /* Neon Nova Wheel blue */
  --neon:#2fdcff;
  --neonSoft:#6be7ff;
  --neonGlowStrong: rgba(47,220,255,0.55);
  --neonGlowSoft: rgba(47,220,255,0.25);

  --panelA:linear-gradient(180deg, rgba(14,56,108,0.92), rgba(7,24,56,0.95));
  --panelB:linear-gradient(180deg, rgba(18,64,120,0.92), rgba(9,30,70,0.96));

  --line:rgba(47,220,255,0.45);
  --lineSoft:rgba(47,220,255,0.28);

  /* Buttons */
  --btnA:linear-gradient(180deg, rgba(47,220,255,0.95), rgba(47,180,255,0.65));
  --btnA2:linear-gradient(180deg, rgba(47,220,255,0.65), rgba(47,180,255,0.38));
  --btnB:rgba(255,255,255,0.10);

  --red:#c62828;
  --black:#0b0f18;
  --green:#00e6a8;

  --warn:#ffd166;
  --shadow:0 24px 70px rgba(0,0,0,0.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 18% 22%, rgba(47,220,255,0.45) 0%, rgba(47,220,255,0.0) 60%),
    radial-gradient(900px 600px at 75% 20%, rgba(47,180,255,0.35) 0%, rgba(47,180,255,0.0) 65%),
    radial-gradient(900px 600px at 60% 85%, rgba(107,231,255,0.22) 0%, rgba(107,231,255,0.0) 60%),
    linear-gradient(135deg,var(--bg2),var(--bg0));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}

/* Hard override: ALWAYS white button text (Chrome/Safari safe) */
button{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

.app{
  width:min(1280px, calc(100vh * 16 / 9), 100vw);
  height:min(720px, calc(100vw * 9 / 16), 100vh);
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:rgba(5,10,20,0.90);
  display:flex;
  flex-direction:column;
  position:relative;
}

header{
  flex:0 0 72px;
  height:72px;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  background:linear-gradient(180deg, rgba(18,64,120,0.85), rgba(9,30,70,0.85));
}
header h1{
  margin:0;
  font-size:20px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.stats{display:flex;gap:12px;align-items:center}
.stat{
  background:var(--panelB);
  border:1px solid var(--lineSoft);
  border-radius:16px;
  padding:8px 14px;
  min-width:140px;

  background:linear-gradient(180deg, rgba(20,72,135,0.88), rgba(10,36,85,0.92));
  box-shadow: 0 0 24px rgba(47,220,255,0.22);
}
.stat .k{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.stat .v{font-size:18px;font-weight:900}
.iconBtn{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid var(--lineSoft);
  background:var(--panelB);
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none;
}
.iconBtn.muted{opacity:.6}

.langSelect{
  height:44px;
  max-width:210px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--lineSoft);
  background:linear-gradient(180deg, rgba(20,72,135,0.88), rgba(10,36,85,0.92));
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  outline:none;
  box-shadow: 0 0 22px rgba(47,220,255,0.16);
  cursor:pointer;
}
.langSelect option{color:#000;}


/* --- QA FIX: ensure language <select> is always clickable on desktop --- */
header, header * { pointer-events: auto !important; }
.langSelect{
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}
@media (max-width: 820px){
  .langSelect{max-width:160px; font-size:12px;}
}


main{
  flex:1 1 auto;
  min-height:0;                 /* critical to keep inside frame */
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); /* prevent overflow */
  gap:16px;
  padding:14px 18px 18px;
}

/* Wheel */


/* ===== PREMIUM ROULETTE RIM (wood + bevel) ===== */
.rouletteRim{
  position:relative;
  box-sizing:border-box;
  width:min(596px, calc(100% - 36px), calc(100vh - 220px));
  aspect-ratio:1 / 1;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%,
      #6b3f1d 0%,
      #4a2a14 42%,
      #2a160b 72%,
      #140a05 100%);
  box-shadow:
    inset 0 0 14px rgba(255, 220, 160, 0.22),
    inset 0 0 46px rgba(0, 0, 0, 0.92),
    0 0 30px rgba(0, 0, 0, 0.70),
    0 0 60px rgba(255, 160, 80, 0.18);
}
.rouletteRim::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:2px solid rgba(255, 220, 160, 0.28);
  pointer-events:none;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.06);
}
/* ensure the wheel sits cleanly inside the rim */
.rouletteRim > canvas{
  display:block;
  width:100%;
  height:100%;
  border-radius:50% !important;
  overflow:hidden;
  background:#000;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.90);
}
.wheelWrap{
  min-height:0;
  border-radius:22px;
  background:var(--panelA);
  border:1px solid var(--lineSoft);
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden;

  box-shadow: 0 0 120px rgba(47,220,255,0.35), 0 0 220px rgba(47,220,255,0.18);
}
canvas{
  width:min(560px, calc(100vh - 220px), 100%);
  height:auto;
  aspect-ratio:1 / 1;
  border-radius:50%;
  filter:
    drop-shadow(0 0 40px rgba(47,220,255,0.55))
    drop-shadow(0 0 90px rgba(47,220,255,0.28))
    drop-shadow(0 0 160px rgba(47,220,255,0.18));
}
.pointer{
  position:absolute;
  top:60px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:26px solid var(--neon);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55));
  z-index:3;
}
.hint{
  position:absolute;
  left:18px; right:18px; bottom:16px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-size:13px;
  color:rgba(255,255,255,0.72);
  z-index:3;
}
.hint b{color:#fff}

.toast{
  position:absolute;
  display:none;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(3,8,20,0.62);
  color:rgba(255,255,255,0.92);
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  box-shadow: 0 0 26px rgba(47,220,255,0.16), 0 16px 38px rgba(0,0,0,0.35);
  max-width: min(560px, calc(100% - 36px));
  text-align:center;
  z-index:6;
}
.toast.good{border-color: rgba(47,220,255,0.28)}
.toast.bad{border-color: rgba(255,255,255,0.10); opacity:0.92}
.toast.show{display:block;}

.toast b{color:var(--neon2)}

/* Right panel: GRID so actions are always visible */
.panel{
  min-height:0;
  border-radius:22px;
  background:var(--panelA);
  border:1px solid var(--lineSoft);
  padding:14px;
  display:grid;
  grid-template-rows: auto auto auto 1fr auto; /* stake, quick, placed label, bets, actions */
  row-gap:10px;
  overflow:hidden;              /* keep within frame */
}
.panel h3{
  margin:0;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted);
  text-transform:uppercase;
}

.stakeRow{display:flex;align-items:center;gap:8px}
.pm{
  width:38px;height:38px;
  border-radius:12px;
  border:1px solid var(--lineSoft);
  background:var(--btnB);
  font-size:18px;
  cursor:pointer;
}
.stake{
  font-size:16px;
  font-weight:900;
  color:var(--warn);
  min-width:74px;
  text-align:center;
}

/* SMALL quick bet buttons (keep as earlier) */
.quick{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.q{
  padding:7px 6px;
  border-radius:12px;
  border:1px solid rgba(47,220,255,0.55);
  background:linear-gradient(180deg, rgba(47,220,255,0.55), rgba(47,180,255,0.25));
  box-shadow:
    0 0 22px rgba(47,220,255,0.35),
    0 0 48px rgba(47,220,255,0.18);
  font-weight:900;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
}
.q:active{transform:scale(0.99)}

/* Placed bets: fixed area via grid row 1fr, scroll inside only, 3 columns */
.betList{
  min-height:0;
  overflow:auto;
  border:1px solid var(--lineSoft);
  border-radius:14px;
  background:rgba(0,0,0,.25);
  padding:8px;

  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap:10px;
  row-gap:6px;

  font-size:10px;
  line-height:1.1;
}
.betEmpty{
  grid-column:1 / -1;
  color:rgba(255,255,255,0.65);
  font-weight:800;
}
.betItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:4px 6px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
}
.betLeft{display:flex;align-items:center;gap:6px;min-width:0}
.betL{
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:72px;
}
.betA{font-weight:950; opacity:0.95}
.betItem button{
  width:24px;height:24px;border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05);
  cursor:pointer;
  font-size:12px;
  line-height:1;
  flex:0 0 auto;
}

/* Actions: ALWAYS inside, never overflow horizontally */
.actions{
  display:flex;
  gap:8px;
  width:100%;
  align-items:stretch;
}
.spin,.clear,.rebet{
  min-height:56px;
  border-radius:16px;
  border:1px solid var(--lineSoft);
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  min-width:0;
}
.clear{
  flex:0 0 96px;
  background:var(--btnB);
  box-shadow:
    0 0 18px rgba(255,184,77,0.28),
    0 0 40px rgba(255,184,77,0.14);
}
.rebet{
  flex:0 0 124px;
  background:var(--btnA2);
  box-shadow:
    0 0 24px rgba(47,220,255,0.45),
    0 0 56px rgba(47,220,255,0.22);
}
.spin{
  flex:1 1 auto;
  background:var(--btnA);
  box-shadow:
    0 0 36px rgba(47,220,255,0.65),
    0 0 80px rgba(47,220,255,0.35),
    0 0 160px rgba(47,220,255,0.22);
}
.spin:disabled,.clear:disabled,.rebet:disabled{opacity:.55;cursor:not-allowed}

/* If panel ever becomes narrow, allow wrap but keep inside */
@media (max-width: 1100px){
  .actions{flex-wrap:wrap}
  .clear,.rebet{flex:1 1 120px}
  .spin{flex:1 1 220px}
}

/* Mobile */
@media(max-width:900px){
  body{padding:10px}
  .app{width:100%;height:auto;min-height:720px}
  main{grid-template-columns:1fr}
  .betList{grid-template-columns:1fr 1fr}
}

/* Nova Hit + Info Modal (layout-safe) */
#novaLabel{color:rgba(255,255,255,0.92); font-weight:950}

.modal{position:absolute; inset:0; display:none; z-index:50;}
.modal.show{display:block;}
.modalBackdrop{position:absolute; inset:0; background:rgba(0,0,0,0.18);}
.modalCard{
  filter:none;
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(860px, calc(100% - 40px));
  max-height:calc(100% - 120px);
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(47,220,255,0.35);
  background:linear-gradient(180deg, rgba(18,64,120,0.92), rgba(7,24,56,0.96));
  box-shadow: 0 0 70px rgba(47,220,255,0.18), 0 30px 90px rgba(0,0,0,0.55);
}
.modalHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.modalTitle{
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:13px;
  color:rgba(255,255,255,0.92);
}
.modalX{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.08);
  cursor:pointer;
}
.modalBody{
  flex:1 1 auto;
  min-height:0;
  padding:16px 18px 18px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  color:rgba(255,255,255,0.92);
  font-size:13px;
  line-height:1.45;
  letter-spacing:0.01em;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  filter:none;
}
.modalBody h4{
  margin:14px 0 8px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.80);
}
.modalBody ul, .modalBody ol{margin:8px 0 10px 18px; padding:0}
.modalBody li{margin:6px 0; color:rgba(255,255,255,0.88)}
.mutedSmall{color:rgba(255,255,255,0.70); font-size:12px; line-height:1.35}


/* Info Modal (clean bright + guaranteed scroll) */


.modalBody p{margin:8px 0; font-size:13px;}
.modalBody ul, .modalBody ol{margin:8px 0 10px 18px; padding:0; font-size:13px;}
.modalBody li{margin:6px 0; color:rgba(255,255,255,0.90); font-size:13px;}
.modalBody b{font-weight:900;}
.modalBody h4{
  margin:14px 0 8px;
  font-size:13px; /* same size as body */
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.88);
}
.mutedSmall{color:rgba(255,255,255,0.74); font-size:13px; line-height:1.45}
.rtpCallout{
  margin:12px 0 10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(47,220,255,0.32);
  background:rgba(7,18,44,0.22);
  box-shadow: 0 0 22px rgba(47,220,255,0.12);
}
.rtpKey{opacity:0.9; font-weight:900;}
.rtpVal{font-weight:950;}
.rtpSub{margin-top:4px; opacity:0.88;}

/* Modal scrollbar (visible) */
.modalBody::-webkit-scrollbar{width:10px;}
.modalBody::-webkit-scrollbar-track{background:rgba(255,255,255,0.06); border-radius:10px;}
.modalBody::-webkit-scrollbar-thumb{background:rgba(47,220,255,0.45); border-radius:10px; border:2px solid rgba(0,0,0,0.0);}
.modalBody{scrollbar-color: rgba(47,220,255,0.55) rgba(255,255,255,0.06); scrollbar-width: thin;}

.modal{position:absolute; inset:0; display:none; z-index:999;}
.modal.show{display:block;}
.modalBackdrop{position:absolute; inset:0; background:rgba(0,0,0,0.28);}
.modalCard{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(860px, calc(100% - 40px));
  height:calc(100% - 80px);
  max-height:640px;
  display:flex; flex-direction:column;
  border-radius:18px;
  border:1px solid rgba(47,220,255,0.35);
  background:linear-gradient(180deg, rgba(28,98,175,0.96), rgba(10,42,96,0.96));
  box-shadow: 0 0 70px rgba(47,220,255,0.18), 0 30px 90px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.modalHead{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.modalTitle{
  font-weight:950; letter-spacing:.18em; text-transform:uppercase;
  font-size:13px; color:rgba(255,255,255,0.92);
}
.modalX{
  width:40px; height:40px; border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.10);
  cursor:pointer; color:#fff;
}
.modalBody{
  flex:1 1 auto;
  min-height:0; /* critical for flex scrolling */
  padding:16px 18px 18px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  color:rgba(255,255,255,0.92);
}
.modalBody h4{
  margin:14px 0 8px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.82);
}
.modalBody ul, .modalBody ol{margin:8px 0 10px 18px; padding:0}
.modalBody li{margin:6px 0; color:rgba(255,255,255,0.90)}


/* Premium Step 2: Dynamic Rim Glow (safe CSS, no canvas risk) */
#wheelWrap{position:relative;}
#wheelWrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(596px, calc(100% - 36px), calc(100vh - 220px));
  aspect-ratio:1 / 1;
  border-radius:50%;
  pointer-events:none;
  opacity:0.52;
  filter:none;
  box-shadow:
    0 0 26px rgba(47,220,255,0.18),
    0 0 86px rgba(47,220,255,0.10);
  animation: rimPulseIdle 9s ease-in-out infinite;
}
@keyframes rimPulseIdle{
  0%,100%{opacity:0.40; box-shadow:0 0 22px rgba(47,220,255,0.16), 0 0 72px rgba(47,220,255,0.09);}
  50%{opacity:0.62; box-shadow:0 0 34px rgba(47,220,255,0.22), 0 0 96px rgba(47,220,255,0.12);}
}
/* Bets placed: faster + brighter */
#wheelWrap.glow-bets::before{
  animation: rimPulseBets 4.6s ease-in-out infinite;
  opacity:0.68;
  box-shadow:0 0 34px rgba(47,220,255,0.22), 0 0 108px rgba(47,220,255,0.14);
}
@keyframes rimPulseBets{
  0%,100%{opacity:0.56; box-shadow:0 0 30px rgba(47,220,255,0.20), 0 0 98px rgba(47,220,255,0.12);}
  50%{opacity:0.86; box-shadow:0 0 44px rgba(47,220,255,0.32), 0 0 132px rgba(47,220,255,0.18);}
}
/* Nova revealed + active: strongest pulse */
#wheelWrap.glow-nova::before{
  animation: rimPulseNova 2.2s ease-in-out infinite;
  opacity:0.86;
  box-shadow:0 0 44px rgba(47,220,255,0.30), 0 0 150px rgba(46,242,230,0.20);
}
@keyframes rimPulseNova{
  0%,100%{opacity:0.74; box-shadow:0 0 40px rgba(47,220,255,0.28), 0 0 140px rgba(46,242,230,0.18);}
  50%{opacity:1; box-shadow:0 0 58px rgba(47,220,255,0.44), 0 0 180px rgba(46,242,230,0.26);}
}


/* Premium Step 3: Pre-spin lock-in moment */
body.lockin-active .gameUI{
  filter: brightness(0.9);
}
body.lockin-active #wheelWrap::before{
  animation: rimLockIn 0.35s ease-out 1;
}
@keyframes rimLockIn{
  0%{opacity:0.6; box-shadow:0 0 30px rgba(47,220,255,0.25);}
  50%{opacity:1; box-shadow:0 0 70px rgba(47,220,255,0.55);}
  100%{opacity:0.75; box-shadow:0 0 40px rgba(47,220,255,0.35);}
}


/* =========================
   Mobile Portrait v5 (Desktop locked)
   Goal: top bar always visible + more space + 4-up quick bets
   ========================= */
@media (max-width: 820px) and (orientation: portrait){
  html,body{height:100%; margin:0; overflow:hidden;}
  /* Use dynamic viewport units to avoid browser chrome issues */
  .frame, .gameFrame{
    height:100svh !important;
    max-height:100svh !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  /* Compact top bar */
  .topBar{
    position:sticky !important;
    top:0 !important;
    z-index:50 !important;
    padding:10px 10px 8px !important;
    gap:8px !important;
    background:linear-gradient(180deg, rgba(10,40,80,0.98), rgba(10,40,80,0.88)) !important;
  }
  /* Reduce brand/logo size + allow 3-line */
  .brand{max-width:46% !important;}
  .brand .title{font-size:16px !important; letter-spacing:2.5px !important; line-height:1.05 !important;}
  .brand .subtitle, .brand .hint, .brand .help, .brand .desc, .topHint, .hint, .help, .desc, .howto, .subhelp,
  .instruction, .instructions, .mobileHideHint{display:none !important;}

  /* Compact stat pills in header */
  .statPill{padding:8px 10px !important; border-radius:14px !important;}
  .statPill .lbl{font-size:10px !important; letter-spacing:2px !important;}
  .statPill .val{font-size:16px !important;}

  /* Make main scrollable while keeping header visible */
  .main{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:10px 10px 12px !important;
    gap:10px !important;
    display:flex !important;
    flex-direction:column !important;
  }

  /* Wheel smaller to free space */
  #wheelWrap{ width:min(82vw, 260px) !important; margin:6px auto 6px !important; }
  /* Result toast centered over wheel, under pointer */
  #wheelWrap .toast{ left:50% !important; top:92px !important; transform:translateX(-50%) !important; }

  canvas#wheel{ width:100% !important; height:100% !important; display:block; }

  /* Side panel fills width, but tighter padding */
  .side{width:100% !important; min-height:0 !important; gap:10px !important;}
  .panel{padding:10px !important;}
  .panel h3{font-size:11px !important; letter-spacing:2px !important; margin-bottom:8px !important;}

  /* Quick bets: 4 per row (narrower pills) */
  .quickGrid{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:8px !important;
  }
  .qbtn{
    padding:9px 6px !important; /* keep height comfy, narrow width via grid */
    font-size:10px !important;
    border-radius:12px !important;
    letter-spacing:1px !important;
    white-space:nowrap;
  }

  /* Stake row tighter */
  .stakeRow{gap:10px !important;}
  .stakeRow .btnSmall{width:34px !important; height:34px !important;}
  .stakeVal{font-size:14px !important;}

  /*
    Placed bets: keep a fixed window that fits 4 bets (2 rows × 2 columns).
    Anything beyond that scrolls inside the list so the overall layout never
    expands / shrinks when bets are added.
  */
  .betList{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start;
    height: 104px;
    min-height: 104px;
    max-height: 104px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px; /* room for scrollbar without clipping */
  }

  /* Bottom actions: 3 equal buttons always visible */
  .actions{
    position:sticky !important;
    bottom:0 !important;
    z-index:40 !important;
    background:linear-gradient(180deg, rgba(8,24,44,0.0), rgba(8,24,44,0.92) 30%, rgba(8,24,44,0.98)) !important;
    padding:10px 10px 12px !important;
  }
  .btnRow{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:10px !important;
  }
  .btn{
    width:100% !important;
    min-height:44px !important;
    padding:12px 8px !important;
    font-size:13px !important;
    border-radius:14px !important;
  }
}

/* Mobile UX: remove tap highlight */
*{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
button, .btn, .qbtn, .iconBtn{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
  user-select:none;
  -webkit-user-select:none;
}
button:focus{outline:none;}
button:focus-visible{outline:2px solid rgba(47,220,255,0.55); outline-offset:2px;}


/* =========================
   Mobile Portrait v6 FIX (from stable v5)
   - Hide header instruction line
   - Quick bets: 4 per row (narrow pills)
   - Bottom actions: 3 equal buttons in one row
   ========================= */
@media (max-width: 820px) and (orientation: portrait){
  header .sub{display:none !important;}

  /* Quick bets 4-up */
  .quick{
    grid-template-columns:repeat(4, 1fr) !important;
    gap:8px !important;
  }
  .q{
    padding:8px 6px !important;
    font-size:10px !important;
  }

  /* Bottom actions equal widths */
  .actions{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .actions .clear,
  .actions .rebet,
  .actions .spin{
    flex:none !important;
    width:100% !important;
    min-height:48px !important;
  }
}


/* =========================
   Mobile Portrait v9 (safe header tweak)
   Revert to v6 stable, then:
   - Keep header as a simple 2-column row (logo left, stats right)
   - Stack stats vertically (no overlap)
   - Slightly taller header padding using existing top gap
   - Do NOT affect wheel/sections layout
   ========================= */
@media (max-width: 820px) and (orientation: portrait){
  /* hide instruction line under logo */
  header .sub{display:none !important;}

  /* Header: row layout, no reflow under wheel */
  header{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:24px 14px 10px !important; /* uses top gap but not huge */
  }

  /* Logo sizing: keep compact */
  header h1{
    font-size:26px !important;
    line-height:1.05 !important;
    letter-spacing:3.5px !important;
    margin:0 !important;
    max-width:52% !important; /* prevents giant word stretching */
  }

  /* Stats: right column stacked */
  header .stats{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:8px !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
  }
  header .stat{
    width:min(56vw, 260px) !important;
    padding:10px 12px !important;
  }
  header .stat .label{font-size:10px !important;}
  header .stat .value{font-size:18px !important;}

  /* Icons row under stats (no DOM changes required) */
  header .icons{
    display:flex !important;
    gap:10px !important;
    justify-content:flex-end !important;
    width:100% !important;
  }
  header .icons button{
    width:48px !important;
    height:48px !important;
    border-radius:16px !important;
  }
}

@media (max-width: 820px) and (orientation: portrait){
  /* If icons are not wrapped, keep them small and aligned right */
  #soundBtn, #infoBtn, .soundBtn, .infoBtn{
    width:48px !important;
    height:48px !important;
    border-radius:16px !important;
    align-self:flex-end !important;
  }
}


/* =========================
   Mobile Portrait v11 tweaks (desktop locked)
   - Smaller logo text
   - Move Total Bet display into Stake row (right side)
   ========================= */
@media (max-width: 820px) and (orientation: portrait){
  header h1{
    font-size:22px !important;
    letter-spacing:3px !important;
  }
  /* keep stats narrower to avoid clipping */
  header .stat{
    width:min(52vw, 250px) !important;
    min-width:0 !important;
  }

  /* Total bet mini pill inside stake row */
  .stakeRow .totalMini{
    margin-left:auto !important;
    padding:6px 10px !important;
    border-radius:14px !important;
    background: linear-gradient(180deg, rgba(32,190,220,0.20), rgba(10,70,110,0.28)) !important;
    border:1px solid rgba(100,220,255,0.22) !important;
    box-shadow: 0 0 18px rgba(40,220,255,0.14) inset, 0 10px 30px rgba(0,0,0,0.18) !important;
  }
  .stakeRow .totalMini .k{
    font-size:9px !important;
    letter-spacing:2px !important;
    opacity:0.85 !important;
    text-transform:uppercase;
  }
  .stakeRow .totalMini .v{
    font-size:14px !important;
    font-weight:800 !important;
    margin-top:2px !important;
  }
}


/* =========================
   Mobile Portrait v19
   Remove/hide sound + info buttons (PORTRAIT ONLY)
   Desktop/landscape untouched
   ========================= */
@media (max-width: 820px) and (orientation: portrait){
  #soundBtn, #infoBtn,
  .soundBtn, .infoBtn{
    display:none !important;
    pointer-events:none !important;
  }
}


/* ===== MOBILE PORTRAIT: logo smaller and BAL/WIN inline (no pills) =====
   Use the same 820px portrait breakpoint as the rest of the mobile layout.
   Otherwise many modern Android devices won't match a 520px breakpoint and
   WIN can be pushed off-screen. */
@media (max-width: 820px) and (orientation: portrait){
  header{
    padding: 8px 10px 6px !important;
    display: grid !important;
    /* Logo column (auto) + stats column (flex). Prevents WIN from being pushed off-screen. */
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto;
    column-gap: 8px;
    align-items: start;
  }
  header h1{
    /* Further ~20% smaller per request (keep 3-line wrap) */
    font-size: 18px !important;
    line-height: 1.02 !important;
    letter-spacing: .14em !important;
    margin: 0 !important;
    max-width: 150px !important;
    white-space: normal !important;
  }
  header .stats{
    grid-column: 2;
    grid-row: 1;
    display:flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    /* Keep BALANCE + WIN grouped near the left of the stats column (not pushed off-screen) */
    justify-content: flex-start !important;
    /* Slightly larger separation so WIN sits a touch further right (room for larger BALANCE values) */
    gap: 16px !important;
    /* Pull the cluster left so BALANCE sits above the wheel centre and WIN stays fully visible */
    margin: 0 0 0 -24px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* Mobile portrait header shows BALANCE + WIN only (TOTAL BET is shown in Stake panel) */
  header .stats .stat:nth-of-type(3){
    display: none !important;
  }
  header .stat{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
  header .stat .k{
    font-size: 9px !important;
    opacity: .72 !important;
    letter-spacing: .20em !important;
    text-transform: uppercase;
    margin-bottom: 2px !important;
  }
  header .stat .v{
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    line-height: 1.05 !important;
  }
}


/* ===== DESKTOP HEADER: Option A ===== */
@media (min-width: 1024px){
  header{
    display:flex;
    align-items:center;
    gap:18px;
  }
  header .stats{
    margin-left:12px;
    margin-right:12px;
    display:flex;
    gap:14px;
  }
  #soundBtn{
    display:flex !important;
  }
}


/* ===== DESKTOP FIX: center sound icon ===== */
@media (min-width: 1024px){
  #soundBtn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}


/* ===== GLOBAL MESSAGE MODAL ===== */
.msg-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.msg-modal.hidden{display:none;}
.msg-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,15,30,0.85);
}
.msg-box{
  position:relative;
  max-width:420px;
  width:90%;
  background:linear-gradient(180deg,#0b3d73,#071e38);
  border-radius:20px;
  padding:22px 20px 20px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}
.msg-title{
  font-size:18px;
  letter-spacing:0.15em;
  margin-bottom:12px;
  color:#6cf3ff;
}
.msg-body{
  font-size:15px;
  line-height:1.45;
  margin-bottom:18px;
  color:#e6faff;
}
.msg-btn{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:none;
  background:linear-gradient(90deg,#35e6ff,#00bcd4);
  color:#022028;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}


/* ===== MOBILE PORTRAIT: INFO + SOUND ICONS (STACKED TOP-RIGHT) ===== */
@media (max-width: 820px) and (orientation: portrait){
  /* Ensure icons are visible on mobile */
  #soundBtn, #infoBtn, #langToggle{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:12px;
    font-size:14px;
  }

  /* Stack icons vertically in top-right header area */
  header{
    position:relative;
  }
  header .iconStack{
    position:absolute;
    top:10px;
    right:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index: 5;
  }

  /* Language picker (overlay — reliable on all browsers, no layout expansion) */
  .langToggle{
    width:112px;
    height:32px;
    border-radius:999px !important;
    border:1px solid rgba(90,130,255,0.70) !important;
    background: radial-gradient(circle at 30% 30%, rgba(120,220,255,0.45), rgba(10,14,35,0.92)) !important;
    color:#ffffff !important;
    box-shadow: 0 0 10px rgba(0,180,255,0.45), 0 0 18px rgba(0,0,0,0.9) !important;
    font-size:11px !important;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding: 0 10px !important;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .langToggle::after{ content:"▾"; opacity:0.9; }

  .langOverlay{
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
  }
  .langOverlay.show{ display:flex; }
  .langBackdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
  }
  .langCard{
    position:relative;
    width:min(520px, 92vw);
    max-height: min(560px, calc(100vh - 60px));
    border-radius:18px;
    border:1px solid rgba(90,220,255,0.35);
    background: radial-gradient(120% 140% at 20% 0%, rgba(80, 210, 255, 0.16), rgba(15, 25, 55, 0.96));
    box-shadow: 0 22px 60px rgba(0,0,0,0.60), 0 0 40px rgba(64, 210, 255, 0.18);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .langHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-bottom:1px solid rgba(90,220,255,0.20);
  }
  .langTitle{
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:12px;
    color:#d9f2ff;
  }
  .langClose{
    width:36px;height:36px;
    border-radius:12px;
    border:1px solid rgba(90,220,255,0.22);
    background: rgba(0,0,0,0.18);
    color:#d9f2ff;
    font-size:22px;
    line-height:1;
    cursor:pointer;
  }
  .langList{
    padding:8px;
    overflow:auto;
    display:grid;
    grid-template-columns: 1fr;
    gap:6px;
  }
  .langItem{
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color:#e8f7ff;
    text-align:left;
    padding:10px 12px;
    cursor:pointer;
    font-weight:800;
    font-size:12px;
    letter-spacing:.04em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .langItem.active{
    border-color: rgba(0,255,255,0.55);
    box-shadow: 0 0 18px rgba(0,255,255,0.25);
    background: rgba(0,255,255,0.10);
  }

}


/* ===== MOBILE PORTRAIT: ICONS MUST RECEIVE TOUCH ===== */
@media (max-width: 820px) and (orientation: portrait){
  /* Make sure header and icon stack are above the wheel/canvas overlays */
  header{ position:relative !important; z-index: 5000 !important; }
  .iconStack, header .iconStack{
    position:absolute !important;
    top:10px !important;
    right:12px !important;
    z-index: 6000 !important;
    pointer-events:auto !important;
  }
  #soundBtn, #infoBtn, #langToggle{
    pointer-events:auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    z-index: 7000 !important;
  }
  /* If any element was disabling pointer events globally, re-enable for icons */
  .iconBtn{ pointer-events:auto !important; }
}


/* ===== DESKTOP: ICONS SIDE-BY-SIDE (NOT STACKED) ===== */
@media (min-width: 1024px){
  .iconStack, header .iconStack{
    position:static !important;
    display:flex !important;
    flex-direction:row !important;
    gap:10px !important;
    align-items:center !important;
    justify-content:flex-end !important;
    z-index:auto !important;
  }
  #soundBtn, #infoBtn, #langToggle{
    width:44px !important;
    height:44px !important;
    border-radius:16px !important;
  }
}


/* ===== MOBILE PORTRAIT: CLEAN ICON BEHAVIOUR ===== */
@media (max-width: 820px) and (orientation: portrait){
  .iconStack{
    top:8px !important;
    right:10px !important;
  }
  #soundBtn, #infoBtn, #langToggle{
    width:26px !important;
    height:26px !important;
    font-size:12px !important;
    border-radius:9px !important;
  }
  body.modal-open .iconStack{
    display:none !important;
  }
}


/* ===== GAME ROUND DISPLAY ===== */
.round-display{
  position:absolute;
  right:18px;
  bottom:14px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(235,250,255,0.78);
  text-shadow:0 1px 10px rgba(0,0,0,0.35);
  opacity:0.9;
  pointer-events:none;
  user-select:none;
}

@media (max-width: 900px){
  .round-display{
    left:50%;
    right:auto;
    bottom:10px;
    transform:translateX(-50%);
    font-size:10px;
  }
}


/* Desktop: neat top-right, under header */
@media (min-width: 1024px){
  .round-display{
  position:absolute;
  right:18px;
  bottom:14px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(235,250,255,0.78);
  text-shadow:0 1px 10px rgba(0,0,0,0.35);
  opacity:0.9;
  pointer-events:none;
  user-select:none;
}
}

/* Mobile portrait: bottom of game, very subtle */
@media (max-width: 820px) and (orientation: portrait){
  .round-display{
  position:absolute;
  right:18px;
  bottom:14px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(235,250,255,0.78);
  text-shadow:0 1px 10px rgba(0,0,0,0.35);
  opacity:0.9;
  pointer-events:none;
  user-select:none;
}
}


/* ===== ROUND DISPLAY CONTAINED IN GAME WRAPPER ===== */
.game, .gameWrap, .app, main {
  position: relative;
}

/* Desktop: inside header area, right-aligned but inside 1280x720 */
@media (min-width: 1024px){
  #roundDisplay{
    position:absolute;
    top:8px;
    right:12px;
    font-size:11px;
    opacity:0.7;
  }
}

/* Mobile portrait: bottom inside game frame */
@media (max-width: 820px) and (orientation: portrait){
  #roundDisplay{
    position:absolute;
    bottom:8px;
    left:50%;
    transform:translateX(-50%);
    font-size:10px;
    opacity:0.55;
  }
}


/* ===== ROUND DISPLAY FINAL POSITION ===== */

/* Ensure header is positioning context */
header{
  position: relative !important;
}

/* Desktop: small round number under sound/info, inside 1280x720 */
@media (min-width: 1024px){
  #roundDisplay{
    position:absolute !important;
    top:52px !important;   /* under sound/info buttons */
    right:12px !important;
    font-size:10px !important;
    opacity:0.6 !important;
    pointer-events:none !important;
  }
}

/* Mobile portrait: bottom center inside game */
@media (max-width: 820px) and (orientation: portrait){
  #roundDisplay{
    position:absolute !important;
    bottom:8px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    font-size:10px !important;
    opacity:0.55 !important;
    pointer-events:none !important;
  }
}



/* Round number - desktop: under SPIN button (inside right panel) */
#roundDisplay.round-display, #roundDisplay{
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin-top: 10px;
  text-align: right;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  padding-right: 4px;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 700px) {
  #roundDisplay.round-display, #roundDisplay{
    font-size: 11px;
    margin-top: 8px;
    padding-right: 2px;
  }
}

}



  /* ---- Standard Loader (plain) ---- */
  :root{
    /* Symmetric safe-area inset for X axis (handles odd devices reporting larger right inset) */
    --safeX: max(env(safe-area-inset-left), env(safe-area-inset-right));
    --safeY: max(env(safe-area-inset-top), env(safe-area-inset-bottom));
  }
  .plain-loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: radial-gradient(circle at 30% 20%, rgba(0, 180, 255, 0.55), rgba(5, 8, 22, 0.98) 60%, rgba(0,0,0,1));
    overflow: hidden;
  }
  /* Robust centering: avoid flex + padding drift on some mobile browsers */
  .plain-loader-card{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(92vw - (var(--safeX) * 2)));
    border-radius: 22px;
    border: 1px solid rgba(0, 255, 255, 0.35);
    background: rgba(10, 4, 25, 0.55);
    box-shadow: 0 0 26px rgba(0,255,255,0.28), 0 0 52px rgba(151,71,255,0.18);
    padding: 18px 18px 16px 18px;
    text-align: center;
    /* keep off notches while staying centered */
    margin-top: calc(var(--safeY) * 0.25);
  }
  .plain-loader-title{
    font-family: 'Orbitron', system-ui, sans-serif;
    font-size: 20px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 10px;
  }
  .plain-loader-sub{
    font-size: 13px;
    color: rgba(255,255,255,0.82);
    margin-bottom: 12px;
  }
  .plain-loader-bar{
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(0,255,255,0.20);
    box-shadow: inset 0 0 14px rgba(0,0,0,0.55);
  }
  .plain-loader-bar-fill{
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(80,255,233,1), rgba(0,124,255,1), rgba(151,71,255,1));
    box-shadow: 0 0 16px rgba(0,255,255,0.45), 0 0 20px rgba(151,71,255,0.20);
    transition: width 160ms ease;
  }
  .plain-loader.fade-out{
    animation: plainLoaderFadeOut 380ms ease forwards;
  }
  @keyframes plainLoaderFadeOut{
    to{ opacity: 0; visibility: hidden; }
  }

  /* While loader is visible, keep the game non-interactive but in-layout to avoid flicker */
  body.is-boot-loading #game{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

/* ---- Mobile landscape orientation lock (portrait-only) ---- */
  .orientation-lock{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 10%, rgba(0,255,255,0.18), rgba(10,5,25,0.96) 55%, rgba(0,0,0,0.98));
    z-index: 10001;
    padding: 18px;
    text-align: center;
  }
  .orientation-lock-card{
    width: min(520px, 92vw);
    border-radius: 18px;
    border: 1px solid rgba(0, 255, 255, 0.35);
    background: rgba(10, 4, 25, 0.72);
    box-shadow: 0 0 26px rgba(0,255,255,0.28), 0 0 46px rgba(151,71,255,0.22);
    padding: 18px 16px;
    backdrop-filter: blur(10px);
  }
  .orientation-lock-title{
    font-size: 18px;
    letter-spacing: .12em;
    color: #ffffff;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 800;
  }
  .orientation-lock-text{
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    margin-bottom: 6px;
  }
  .orientation-lock-sub{
    font-size: 12px;
    color: rgba(255,255,255,0.72);
  }
  body.orientation-locked{
    overflow: hidden !important;
    touch-action: none !important;
  }


/* ===== i18n: prevent layout growth on long translations ===== */
.fit{
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* allow long info body to wrap; it is inside a scrollable modal so layout won't grow */
.modalBody{
  overflow:auto;
}




/* === Android portrait pointer tidy patch v2 ===
   Preserve the accepted Android pointer position. */
@supports not (-webkit-touch-callout: none) {
  @media (max-width: 820px) and (orientation: portrait) {
    .pointer {
      top: 8px !important;
      border-left-width: 12px;
      border-right-width: 12px;
      border-top-width: 22px;
      z-index: 4;
    }
  }
}

/* === Mobile title centering accepted adjustments ===
   Preserve the accepted Android/iPhone centered title treatment. */
@media (max-width: 820px) and (orientation: portrait) {
  header > div:first-child {
    grid-area: brand !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 90px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  header > div:first-child h1.fit {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
    font-size: 18px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.05 !important;
    margin: 0 auto !important;
  }

  header > div:first-child .sub.fit,
  header > div:first-child .sub {
    display: none !important;
  }

  header .stats {
    margin-top: 10px !important;
  }
}

/* === iPhone portrait roulette layout fix v3 ===
   Scope: iPhone Safari only.
   Goals:
   - keep Balance and Win on the same row
   - move the wheel upward
   - stop action buttons overlapping quick bets / placed bets
   - shrink Safari bottom chrome perception by darkening page backdrop
   - preserve desktop and Android
*/
@supports (-webkit-touch-callout: none) {
  @media (max-width: 820px) and (orientation: portrait) {
    html,
    body {
      min-height: 100svh !important;
      background:
        radial-gradient(circle at top, rgba(21,56,102,0.98) 0%, rgba(7,22,38,0.98) 62%, rgba(3,8,20,1) 100%) !important;
    }

    body {
      padding: 8px !important;
      overflow-x: hidden !important;
    }

    .app {
      width: 100% !important;
      height: calc(100svh - 16px) !important;
      min-height: 0 !important;
      border-radius: 20px !important;
      overflow: hidden !important;
      background: rgba(5,10,20,0.94) !important;
    }

    header {
      display: grid !important;
      grid-template-columns: 1fr auto !important;
      grid-template-areas:
        "brand icons"
        "stats icons" !important;
      align-items: start !important;
      column-gap: 10px !important;
      row-gap: 6px !important;
      flex: 0 0 82px !important;
      height: 82px !important;
      min-height: 82px !important;
      padding: 8px 12px 6px !important;
      position: relative !important;
      overflow: hidden !important;
    }

    header > div:first-child {
      position: absolute !important;
      left: 50% !important;
      top: 8px !important;
      transform: translateX(-50%) !important;
      width: auto !important;
      max-width: calc(100% - 112px) !important;
      padding: 0 !important;
      z-index: 2 !important;
    }

    header > div:first-child h1.fit {
      font-size: 18px !important;
      letter-spacing: 0.08em !important;
      line-height: 1.05 !important;
      margin: 0 !important;
      max-width: calc(100vw - 132px) !important;
    }

    header .stats {
      grid-area: stats !important;
      position: absolute !important;
      left: 12px !important;
      right: 62px !important;
      top: 38px !important;
      margin: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
      gap: 8px !important;
      align-items: stretch !important;
      width: auto !important;
      min-width: 0 !important;
      z-index: 1 !important;
    }

    header .stats > .stat:nth-child(3) {
      display: none !important;
    }

    header .stats > .stat {
      min-width: 0 !important;
      padding: 6px 10px !important;
      border-radius: 14px !important;
    }

    header .stats > .stat .k,
    header .stats > .stat .v {
      white-space: nowrap !important;
    }

    header .stats > .stat .k {
      font-size: 10px !important;
    }

    header .stats > .stat .v {
      font-size: 16px !important;
    }

    header .stats .iconStack {
      grid-area: icons !important;
      grid-column: 2 !important;
      grid-row: 1 / span 2 !important;
      position: static !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      margin: 0 !important;
      align-self: start !important;
      justify-self: end !important;
      z-index: 3 !important;
    }

    header .iconBtn {
      width: 38px !important;
      height: 38px !important;
      border-radius: 14px !important;
      font-size: 18px !important;
    }

    main {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      padding: 6px 10px 8px !important;
      min-height: 0 !important;
    }

    .wheelWrap {
      min-height: 0 !important;
      padding: 6px 6px 24px !important;
      border-radius: 20px !important;
      align-items: center !important;
    }

    .rouletteRim {
      width: min(56vw, 258px) !important;
      height: min(56vw, 258px) !important;
      aspect-ratio: 1 / 1 !important;
      padding: 10px !important;
      flex: 0 0 auto !important;
      align-self: center !important;
      justify-self: center !important;
      border-radius: 50% !important;
    }

    .rouletteRim::after,
    .rouletteRim > canvas,
    canvas {
      border-radius: 50% !important;
      aspect-ratio: 1 / 1 !important;
    }

    .rouletteRim > canvas,
    canvas {
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      object-fit: contain !important;
    }

    .pointer {
      top: 10px !important;
    }

    .hint {
      left: 8px !important;
      right: 8px !important;
      bottom: 6px !important;
      font-size: 10px !important;
      gap: 4px !important;
    }

    .panel {
      padding: 10px !important;
      border-radius: 20px !important;
      row-gap: 8px !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-rows: auto auto auto minmax(88px, 1fr) auto !important;
      overflow: hidden !important;
    }

    .panel h3 {
      font-size: 10px !important;
      letter-spacing: .12em !important;
      margin: 0 !important;
    }

    .stakeRow {
      display: grid !important;
      grid-template-columns: 52px minmax(68px, 80px) 52px minmax(0,1fr) !important;
      gap: 6px !important;
      align-items: center !important;
      width: 100% !important;
    }

    .pm {
      width: 34px !important;
      height: 34px !important;
      justify-self: center !important;
    }

    .stake {
      min-width: 0 !important;
      font-size: 14px !important;
      justify-self: center !important;
      text-align: center !important;
    }

    .stakeRow .mobileTotalBet {
      display: flex !important;
      min-width: 0 !important;
      width: 100% !important;
      max-width: 112px !important;
      justify-self: end !important;
      padding: 8px 10px !important;
      border-radius: 14px !important;
    }

    .quick {
      gap: 5px !important;
      margin-top: 2px !important;
    }

    .q {
      min-height: 34px !important;
      padding: 5px 4px !important;
      font-size: 10px !important;
      letter-spacing: .10em !important;
      border-radius: 12px !important;
    }

    .betList {
      min-height: 88px !important;
      max-height: 88px !important;
      overflow: auto !important;
      padding: 6px !important;
      border-radius: 12px !important;
      font-size: 9px !important;
      line-height: 1.05 !important;
      margin-top: 2px !important;
    }

    .actions {
      gap: 6px !important;
      align-items: stretch !important;
      margin-top: 2px !important;
    }

    .spin,
    .clear,
    .rebet {
      min-height: 40px !important;
      height: 40px !important;
      border-radius: 14px !important;
      font-size: 11px !important;
      letter-spacing: .12em !important;
      padding: 0 8px !important;
    }

    .clear { flex: 0 0 82px !important; }
    .rebet { flex: 0 0 96px !important; }
    .spin { flex: 1 1 auto !important; }
  }
}


/* === iPhone Safari bottom-chrome + landscape lock polish v1 ===
   Scope: iPhone/iOS Safari only. Desktop and Android untouched. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 820px) {
    html,
    body {
      min-height: 100dvh !important;
      min-height: 100svh !important;
      background: #020814 !important;
      overscroll-behavior: none;
    }

    body {
      margin: 0 !important;
      padding: 6px 6px max(6px, env(safe-area-inset-bottom)) !important;
    }

    .app {
      width: 100% !important;
      height: calc(100dvh - 12px - env(safe-area-inset-bottom)) !important;
      max-height: calc(100dvh - 12px - env(safe-area-inset-bottom)) !important;
      box-shadow: 0 18px 44px rgba(0,0,0,0.42) !important;
    }
  }

  @media (max-width: 820px) and (orientation: landscape) {
    body {
      padding: 0 !important;
      background: #020814 !important;
    }

    .app {
      width: 100vw !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
      border-radius: 0 !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    .orientation-lock {
      display: flex !important;
      padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)) !important;
    }

    .orientation-lock-card {
      width: min(520px, calc(100vw - 36px)) !important;
      border-radius: 20px !important;
    }
  }
}


/* === iPhone only: slightly reduce bottom action buttons (5%) === */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 430px) and (orientation: portrait) {
    .actions button,
    .actions .btn,
    .actions .clear,
    .actions .rebet,
    .actions .spin {
      transform: scale(0.95);
      transform-origin: center;
    }
  }
}


/* === iPhone only: nudge action buttons DOWN slightly (safe) === */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 430px) and (orientation: portrait) {

    .panel {
      padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .actions {
      margin-top: 4px !important;
    }

  }
}


/* === iPhone only: restore clipped sound/info icons ===
   Root cause:
   - portrait rule hides #soundBtn/#infoBtn
   - header .stats later gets overflow:hidden, which clips .iconStack
   This only cancels those two effects on iPhone Safari. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 820px) and (orientation: portrait) {
    header .stats {
      overflow: visible !important;
    }

    .iconStack,
    header .iconStack,
    header .stats .iconStack {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    #soundBtn,
    #infoBtn {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
  }
}

/* === iPhone only: improve info modal coverage + obvious close button ===
   - cover the whole game including Balance/Win
   - make backdrop tap area reliable
   - keep a visible close X at the top-right of the guide
   Desktop and Android untouched. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 820px) and (orientation: portrait) {
    #infoModal.modal,
    .modal {
      position: fixed !important;
      inset: 0 !important;
      z-index: 12000 !important;
    }

    #infoModal .modalBackdrop,
    .modalBackdrop {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(2, 8, 20, 0.72) !important;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    #infoModal .modalCard,
    .modalCard {
      position: fixed !important;
      left: 12px !important;
      right: 12px !important;
      top: calc(12px + env(safe-area-inset-top, 0px)) !important;
      bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
      width: auto !important;
      height: auto !important;
      max-height: none !important;
      transform: none !important;
      border-radius: 20px !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      z-index: 12001 !important;
    }

    #infoModal .modalHead,
    .modalHead {
      position: sticky !important;
      top: 0 !important;
      z-index: 2 !important;
      padding: 12px 14px !important;
      background: linear-gradient(180deg, rgba(18,64,120,0.98), rgba(9,30,70,0.96)) !important;
    }

    #infoModal .modalTitle,
    .modalTitle {
      font-size: 12px !important;
      letter-spacing: 0.14em !important;
      padding-right: 8px !important;
    }

    #infoModal .modalX,
    .modalX {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      border-radius: 14px !important;
      font-size: 24px !important;
      line-height: 1 !important;
      color: #fff !important;
      background: rgba(255,255,255,0.12) !important;
      border: 1px solid rgba(255,255,255,0.18) !important;
      box-shadow: 0 0 18px rgba(47,220,255,0.18) !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    }

    #infoModal .modalBody,
    .modalBody {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding: 14px 16px 18px !important;
    }
  }
}


/* === DESKTOP ONLY FIXED 1280x720 ASPECT ===
   Real Android/iPhone layouts are intentionally untouched.
   Small desktop windows keep the desktop layout and scale the whole game. */
html.nnr-desktop-fixed-aspect,
html.nnr-desktop-fixed-aspect body{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#000 !important;
}

html.nnr-desktop-fixed-aspect body{
  display:block !important;
}

html.nnr-desktop-fixed-aspect #game.app{
  width:1280px !important;
  height:720px !important;
  min-width:1280px !important;
  min-height:720px !important;
  max-width:none !important;
  max-height:none !important;
  position:fixed !important;
  left:0;
  top:0;
  transform-origin:top left;
  overflow:hidden !important;
}

html.nnr-desktop-fixed-aspect #game main{
  display:grid !important;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
  gap:16px !important;
  padding:14px 18px 18px !important;
  overflow:hidden !important;
}

html.nnr-desktop-fixed-aspect #game .betList{
  grid-template-columns:1fr 1fr 1fr !important;
}

html.nnr-desktop-fixed-aspect #game .quick{
  grid-template-columns:1fr 1fr !important;
}

html.nnr-desktop-fixed-aspect #game .actions{
  display:flex !important;
  flex-wrap:nowrap !important;
  position:static !important;
  padding:0 !important;
  background:none !important;
  gap:8px !important;
}

html.nnr-desktop-fixed-aspect #game .clear{
  flex:0 0 96px !important;
}

html.nnr-desktop-fixed-aspect #game .rebet{
  flex:0 0 112px !important;
}

html.nnr-desktop-fixed-aspect #game .spin{
  flex:1 1 auto !important;
}

html.nnr-desktop-fixed-aspect #game .clear,
html.nnr-desktop-fixed-aspect #game .rebet,
html.nnr-desktop-fixed-aspect #game .spin{
  width:auto !important;
  min-height:56px !important;
  height:auto !important;
}

/* === DESKTOP FIXED-ASPECT WHEEL SIZE LOCK ===
   Desktop only. Stops viewport-width/height media rules from shrinking the wheel
   after the 1280x720 game frame has already been scaled. */
html.nnr-desktop-fixed-aspect #game #wheelWrap{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

html.nnr-desktop-fixed-aspect #game .rouletteRim{
  width:560px !important;
  height:560px !important;
  min-width:560px !important;
  min-height:560px !important;
  max-width:560px !important;
  max-height:560px !important;
  aspect-ratio:auto !important;
  flex:0 0 560px !important;
  margin:0 !important;
  padding:18px !important;
}

html.nnr-desktop-fixed-aspect #game .rouletteRim > canvas,
html.nnr-desktop-fixed-aspect #game canvas#wheel{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  display:block !important;
}