.panel.controls {
  max-width: 480px;
  margin: 0 auto;
}

    :root{ --symH: clamp(72px, 9.5vh, 110px);
      --bg:#0a0f2b; --panel:#0e1950; --panel2:#0a1340;
      --accent:#ffd54a; --accent2:#ffe27a; 
      --chip:#1b2a6b; --chipOn:#2dd4bf;
      --good:#2dd4bf; --bad:#ff6b6b; --text:#ffffff; --muted:#b8c2ff; --shadow:0 14px 40px rgba(0,0,0,.45);
      --bg:#0b1020;--panel:#121936;--accent:#6ee7ff;--accent2:#ffc857;--good:#5bff95;--bad:#ff6b6b;--text:#e8eeff;--muted:#9aa5d1;--shadow:0 10px 30px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;background: radial-gradient(1200px 600px at 70% 0%, var(--bg1, #1b2552) 0%, var(--bg2, #0b1020) 70%) fixed;
      font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
      color:var(--text);
      display:flex;align-items:center;justify-content:center;padding:20px;
    }
    .app{width:min(1150px,100%);} /* widened for new controls */
    .top{display:grid;grid-template-columns:1.2fr .8fr; gap:16px;}
    .panel{background:linear-gradient(180deg,#151c3f,#0d1330);border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:var(--shadow);}    
    .header{display:flex;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
    .header h1{font-family:'Luckiest Guy', system-ui;font-size:26px;margin:0;letter-spacing:.4px;font-weight:700}
    .header .tag{margin-left:auto;background:rgba(110,231,255,.15);color:var(--accent);padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(110,231,255,.35)}
    .jackpots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 16px}
    .jack{background:linear-gradient(180deg,#0d1433,#08102b);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:10px 12px}
    .jack h3{margin:0;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.6px}
    .jack .amt{margin-top:4px;font-weight:800;font-size:20px;color:var(--accent2);text-shadow:0 1px 0 rgba(0,0,0,.3)}

    .reels-wrap{padding:16px}
    .reels{position:relative;background:linear-gradient(180deg,#0b1450 0%, #09123b 60%);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;height:calc(var(--symH) * 3 + 20px);display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:10px}
    .col{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#0d1545,#0b1138);border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 6px 10px rgba(255,255,255,.06), inset 0 -8px 20px rgba(0,0,0,.5)}
    .strip{position:absolute;left:0;top:0;right:0;will-change:transform}
    .symbol{display:flex;align-items:center;justify-content:center;height:var(--symH);font-weight:900;font-size:28px;letter-spacing:.5px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}
    .s-WILD{background:linear-gradient(180deg,#2ad0ff,#007fff)}
    .s-7{background:linear-gradient(180deg,#ff4d6d,#b21e35)}
    .s-BAR{background:linear-gradient(180deg,#6a6a6a,#2a2a2a)}
    .s-BELL{background:linear-gradient(180deg,#ffd166,#f48c06)}
    .s-CHERRY{background:linear-gradient(180deg,#ff3e3e,#9b1c1c)}
    .s-A,.s-K,.s-Q,.s-J,.s-10{background:linear-gradient(180deg,#253056,#1a2244)}
    .s-SCAT{background:linear-gradient(180deg,#00c2a8,#008b76)}
    .s-FEAT{background:linear-gradient(180deg,#a78bfa,#6d28d9)}

    .controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
    .hud{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:12px 16px}
    .stat{background:linear-gradient(180deg,#0d1433,#08102b);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px}
    .label{font-size:11px;color:var(--muted);letter-spacing:.5px}
    .value{margin-top:4px;font-weight:800;font-size:18px}

    .ctl{padding:12px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .btn{appearance:none;border:2px solid rgba(255,255,255,.18);background:linear-gradient(180deg,#0f2a8a,#0b1d66);color:#fff;font-weight:900;padding:12px 18px;border-radius:999px;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.45), inset 0 8px 10px rgba(255,255,255,.06)}
    .btn.primary{background:linear-gradient(180deg,#ffd34a,#ff9800);color:#1a1030;border-color:#ffce3a;text-shadow:0 1px 0 rgba(255,255,255,.6)}
    .btn.warn{background:linear-gradient(180deg,#ff8b7a,#dd3d3d);border-color:#b61f1f}
    .btn:disabled{opacity:.6;cursor:not-allowed}
    input[type=range]{width:180px}

    .paytable{padding:12px 16px}
    details{background:linear-gradient(180deg,#0d1433,#08102b);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px}
    summary{cursor:pointer;font-weight:700}
    .paygrid{margin-top:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;font-size:12px}
    .paygrid div{background:rgba(255,255,255,.04);padding:6px;border-radius:8px;text-align:center}

    /* Modal */
    .modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:20}
    .modal.show{display:flex}
    .card{background:linear-gradient(180deg,#141a3f,#0d1330);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:var(--shadow);padding:16px;max-width:700px;width:100%}
    .card h2{margin:0 0 8px 0}

    .tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
    .tile{position:relative;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#222b56,#1a2246);height:80px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;cursor:pointer;overflow:hidden}
    .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
    .tile span{position:relative;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.6)}
    .tile.revealed{background:linear-gradient(180deg,#253a7a,#1c2a5d)}
    .note{color:var(--muted);font-size:12px;margin-top:8px}

    .toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);display:none}
    .toast.show{display:block}

    /* Giant center banner */
    .center-banner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:35}
    .center-banner .msg{font-weight:900;font-size:45px;letter-spacing:1px;padding:8px 18px;border-radius:16px;
      background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.75));color:#16143a;
      border:2px solid rgba(255,255,255,.8);box-shadow:0 20px 60px rgba(0,0,0,.5);opacity:0;transform:scale(.9);
      transition:opacity .25s ease, transform .25s ease;}
    .center-banner.show .msg{opacity:1;transform:scale(1)}

    /* Jackpot celebration */
    .vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);opacity:0;transition:opacity .3s ease;z-index:30}
    .vignette.show{opacity:1}
    .jackpot{position:fixed;top:30%;left:50%;transform:translate(-50%,-50%) scale(.9);background:linear-gradient(180deg,#ffd54a,#ff7a00);color:#1a1030;font-weight:900;font-size:56px;padding:16px 28px;border-radius:14px;border:2px solid rgba(255,255,255,.7);text-shadow:0 2px 0 rgba(255,255,255,.45);box-shadow:0 12px 40px rgba(0,0,0,.55);opacity:0;transition:opacity .25s ease, transform .25s ease;z-index:40}
    .jackpot.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

    @media (max-width: 860px){
      .top{grid-template-columns:1fr}
      .hud{grid-template-columns:repeat(2,1fr)}
      
  
    /* Side line markers */
    .markers{position:absolute;top:10px;bottom:10px;width:48px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
    .markers.left{left:-58px}
    .markers.right{right:-58px}
    .chip{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #31408c, #0b1340);border:3px solid #e5e9ff;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));opacity:.55}
    .chip.on{background:radial-gradient(circle at 30% 30%, #18b9a5, #0b5b55);border-color:#c7fff7;opacity:1}
    .chip span{pointer-events:none}
    @media (max-width: 980px){ .markers{display:none} }
  
    /* --- Mobile/layout fixes --- */
    html, body { max-width: 120%; overflow-x: hidden; }
    .app { width: 120%; max-width: 1100px; margin: 0 auto; }
    /* prevent inner wrappers from overflowing */
    .reels-wrap > div[style*="position:relative"] { overflow: hidden; }

    /* Make controls stack on mobile and buttons fill width */
    @media (max-width: 780px){
      .top{ grid-template-columns: 1fr; }
      .controls{ grid-template-columns: 1fr; }
      .hud{ grid-template-columns: repeat(2,1fr); }
      .ctl{ flex-direction: column; align-items: stretch; }
      .btn{ width: 100%; }
       /* dynamic viewport unit to avoid URL bar issues */
    }
    /* Hide side markers earlier to avoid horizontal overflow on tablets */
    @media (max-width: 1200px){ .markers{ display: none; } }
  
    /* --- Extra padding and reel height fix --- */
    .app { padding: 12px; box-sizing: border-box; }
    @media (max-width: 780px){
      .app { padding: 8px; }
      .reels { margin-top: 8px; margin-bottom: 8px; }
    }
    @media (orientation: landscape) and (max-height: 500px){
      
    }
  
    
      .top > .panel:nth-child(2){ order: 1; } /* jackpots/paytable */
      .top > .panel:nth-child(1){ order: 2; } /* reels panel */
    }

  
    /* --- Safe-area + top padding to prevent cut-off --- */
    :root{ --safe-top: env(safe-area-inset-top, 0px); }
    body{ padding-top: calc(var(--safe-top) + 10px); }
    .app{ padding-top: 8px; }
    @media (max-width: 780px){
      body{ padding-top: calc(var(--safe-top) + 14px); }
      .app{ padding-top: 10px; }
    }
    /* Remove borders that can appear as a thin line on mobile */
    @media (max-width: 980px){
      .reels{ border: 0 !important; }
      .panel{ border-color: rgba(255,255,255,.06); }
      .reels-wrap{ padding-top: 6px; }
    }
    /* Ensure markers are fully hidden on mobile to avoid stray lines */
    @media (max-width: 1200px){ .markers{ display: none !important; } }
    /* Slightly shorter reels in landscape to avoid cropping with browser UI */
    @media (orientation: landscape) and (max-height: 500px){
      
    }
  
    /* Ensure visible top area on all mobile browsers */
    :root{ --safe-top: env(safe-area-inset-top, 0px); }
    body{ margin-top: calc(var(--safe-top) + 12px); }
    .app{ padding-top: 8px; }
  
    /* --- Force default panel order on mobile (reels first, jackpots below) --- */
    @media (max-width: 780px){
      .top{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
      .top > .panel{ order: initial !important; }
    }
    /* Always hide markers if any CSS remains */
    .markers{ display:none !important; }
  
/* === Force full-page 80% scale on mobile === */
@media (max-width: 2000px){
  html, body { overflow-x: hidden; }
  .scale-viewport{
    transform: scale(0.80);
    transform-origin: center bottom;
    /* expand layout width to compensate for transform shrink */
    width: calc(100% / 1);
  }
}


/* --- Reel alignment hotfix (CSS-only, non-breaking) --- */
/* Force whole-pixel symbol heights to stop sub-pixel drift across columns */
:root { --symH: 96px; }                         /* desktop default */
@media (max-width: 1400px){ :root{ --symH: 92px; } }
@media (max-width: 1200px){ :root{ --symH: 88px; } }
@media (max-width: 992px) { :root{ --symH: 84px; } }
@media (max-width: 820px) { :root{ --symH: 80px; } }
@media (max-width: 700px) { :root{ --symH: 76px; } }
@media (max-width: 600px) { :root{ --symH: 72px; } }
@media (max-width: 520px) { :root{ --symH: 68px; } }

/* Keep your existing selectors; these only reinforce sizing/snapping */
.symbol { height: var(--symH); }
.reels  { height: calc(var(--symH) * 3 + 20px); }  /* same padding as your file */
.strip  { will-change: transform; transform: translate3d(0,0,0); }



/* === Win line canvas overlay === */
.win-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}


/* Background chooser */
.bg-swatches{display:flex;gap:8px;align-items:left;flex-wrap:wrap}
.swatch{width:28px;height:28px;border-radius:999px;border:2px solid rgba(255,255,255,.35);
        cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);padding:0;appearance:none}
.swatch.active{outline:2px solid #fff;outline-offset:2px}

/* Preview fills for the 5 themes */
.swatch[data-theme="blue"]    {background:linear-gradient(180deg,#1b2552,#0b1020)}
.swatch[data-theme="teal"]    {background:linear-gradient(180deg,#0b3b3b,#062626)}
.swatch[data-theme="purple"]  {background:linear-gradient(180deg,#3b1b52,#0f0b20)}
.swatch[data-theme="sunset"]  {background:linear-gradient(180deg,#52301b,#20100b)}
.swatch[data-theme="charcoal"]{background:linear-gradient(180deg,#2a2f3a,#0c0f14)}



/* Mobile dropdown for background picker */
#bgChooser { display: flex; }
#bgChooserMobile { display: none; align-items:left; gap:8px; }
#bgSelect { padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.2); color:inherit; }
@media (max-width: 780px){
  #bgChooser { display: none; }
  #bgChooserMobile { display: flex; }
}


    .app-shell{max-width:430px;width:100%;margin:0 auto;}



/* === FULL-WIDTH REELS (Option A) === */
.reels-wrap,
.reels {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* === ALIGN REEL WIDTH WITH HUD/STATS === */
.reels-wrap {
    padding: 12px 16px !important; /* match .hud horizontal padding */
}
.reels {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* === Reel width expansion closer to panel edges === */
.reels-wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.reels {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* === FORCE PERMANENT MOBILE-SIZE LAYOUT (DESKTOP & MOBILE) === */
body {
    justify-content: center;
    align-items: flex-start;
}

.app-shell {
    max-width: 430px;
    width: 100%;
    margin: 20px auto;
}

.app {
    max-width: 430px;
    width: 100%;
}

/* Always treat layout as single-column/mobile */
.top {
    display: block !important;
}

/* Disable global scale transform so size doesn't change with viewport */
.scale-viewport {
    transform: none !important;
    width: auto !important;
}
@media (max-width: 2000px) {
  .scale-viewport {
      transform: none !important;
      width: auto !important;
  }
}