[hidden]{display:none!important}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  :root { --card-w:64px; --gap:8px; }
  body { font-family:system-ui,"Segoe UI",sans-serif; color:#fff; min-height:100vh;
    background:radial-gradient(ellipse at top,#1b7a46,#0c4a29 70%,#083a20); padding:10px; }
  header { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin:0 auto 12px; max-width:960px; }
  header h1 { font-size:1.2rem; letter-spacing:.03em; color:#ffe9a8; margin-right:auto; }
  select, .btn { cursor:pointer; border:none; border-radius:8px; font-weight:600; font-size:.85rem;
    padding:.5rem .9rem; background:#ffe27a; color:#0c4a29; }
  .btn.ghost { background:transparent; border:1px solid #ffe27a; color:#ffe27a; }
  .btn:disabled { opacity:.35; cursor:default; }
  .stat { font-size:.85rem; color:#d7f0df; padding:.4rem .6rem; background:rgba(0,0,0,.22); border-radius:8px; }
  .board { max-width:960px; margin:0 auto; }
  .row { display:grid; gap:var(--gap); margin-bottom:16px; justify-content:center; }
  .slot { border-radius:7px; border:2px dashed rgba(255,255,255,.2); aspect-ratio:5/7; }
  .slot.spacer { border:none; }
  .col { position:relative; min-height:calc(var(--card-w)*1.4); }
  .card { width:100%; aspect-ratio:5/7; border-radius:7px; position:relative; cursor:pointer;
    box-shadow:0 1px 3px rgba(0,0,0,.4); user-select:none; transition:outline .05s; }
  .card.up { background:#fdfdfd; border:1px solid #d8cccc; }
  .card.down { background:repeating-linear-gradient(45deg,#1e4d8a,#1e4d8a 6px,#163d70 6px,#163d70 12px);
    border:1px solid #0e2a52; }
  .card.red { color:#c0392b; } .card.black { color:#1a1a1a; }
  .card.sel { outline:3px solid #ffe27a; outline-offset:-1px; }
  .card.hint { outline:3px solid #4ad3ff; outline-offset:-1px; }
  .card .corner { position:absolute; font-weight:700; line-height:1; font-size:clamp(.65rem,2.2vw,.95rem); }
  .card .tl { top:3px; left:5px; } .card .br { bottom:3px; right:5px; transform:rotate(180deg); }
  .card .pip { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:clamp(1.2rem,4.5vw,1.8rem); }
  .overlay { position:fixed; inset:0; background:rgba(0,0,0,.78); display:none; align-items:center;
    justify-content:center; text-align:center; z-index:5; padding:1rem; }
  .overlay.show { display:flex; }
  .panel { background:#0c4a29; border:2px solid #ffe27a; border-radius:16px; padding:1.8rem 2rem; max-width:420px; }
  .panel h2 { color:#ffe9a8; font-size:1.8rem; margin-bottom:.8rem; }
  .panel p { margin-bottom:.5rem; color:#d7f0df; }
  .hintmsg { text-align:center; color:#bfe0cb; font-size:.8rem; margin-top:14px; }
  @media(max-width:680px){ :root{ --gap:5px; } header h1{ width:100%; text-align:center; margin:0 0 4px; } }

  /* ===== roulette ===== */
  #rouletteGame { display:none; max-width:960px; margin:0 auto; }
  .roulette-wrap { display:grid; grid-template-columns:minmax(230px,320px) 1fr; gap:18px; align-items:start; }
  .roulette-wheel-panel, .roulette-table-panel {
    min-width:0;
    background:rgba(0,0,0,.2); border:1px solid rgba(255,226,122,.35);
    border-radius:14px; padding:14px;
  }
  .wheel-shell { position:relative; width:min(100%,290px); aspect-ratio:1; margin:0 auto 12px; }
  .wheel {
    width:100%; height:100%; border-radius:50%; border:10px solid #7b4b18;
    background:#171717;
    box-shadow:inset 0 0 0 12px #d3a842, inset 0 0 0 15px #3b260d, 0 6px 18px rgba(0,0,0,.45);
    transition:transform 5.5s cubic-bezier(.08,.68,.12,1);
  }
  .wheel::after {
    content:""; position:absolute; inset:26%; border-radius:50%;
    background:radial-gradient(circle,#f1cd65 0 12%,#6b4115 13% 34%,#1d1d1d 35% 100%);
    border:4px solid #d5ac48;
  }
  .wheel-pointer {
    position:absolute; left:50%; top:-3px; transform:translateX(-50%);
    width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent;
    border-top:25px solid #ffe27a; z-index:3; filter:drop-shadow(0 2px 2px #000);
  }
  .roulette-result {
    min-height:52px; text-align:center; display:flex; align-items:center; justify-content:center;
    gap:10px; font-size:1rem; color:#ffe9a8;
  }
  .result-number {
    display:inline-flex; width:38px; height:38px; border-radius:50%; align-items:center;
    justify-content:center; font-weight:800; border:2px solid #fff;
  }
  .result-number.red { background:#c62828; color:#fff; }
  .result-number.black { background:#171717; color:#fff; }
  .result-number.green { background:#0b8f42; color:#fff; }
  .roulette-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:10px 0; }
  .roulette-metric { background:rgba(0,0,0,.23); border-radius:8px; padding:8px; text-align:center; }
  .roulette-metric small { display:block; color:#bfe0cb; }
  .roulette-metric strong { color:#ffe9a8; }
  .chip-row { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:10px 0; }
  .chip {
    width:48px; height:48px; border-radius:50%; border:4px dashed rgba(255,255,255,.7);
    background:#ffe27a; color:#123c25; font-weight:800; cursor:pointer;
    box-shadow:0 2px 5px rgba(0,0,0,.35);
  }
  .chip.active { outline:3px solid #4ad3ff; outline-offset:2px; }
  .roulette-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .number-grid {
    display:grid; grid-template-columns:42px repeat(12,minmax(34px,1fr)); gap:3px;
    align-items:stretch;
  }
  .bet {
    position:relative; min-height:40px; border:1px solid rgba(255,255,255,.55);
    color:#fff; font-weight:750; border-radius:4px; cursor:pointer; padding:3px;
    background:#176838;
  }
  .bet.red { background:#b32626; }
  .bet.black { background:#181818; }
  .bet.green { background:#078743; }
  .bet.outside { background:#176838; min-height:38px; }
  .bet:hover { filter:brightness(1.16); }
  .bet:disabled { cursor:default; filter:none; opacity:.75; }
  .bet-chip {
    position:absolute; right:2px; bottom:2px; min-width:22px; height:22px; padding:0 3px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#ffe27a; color:#0c4a29; border:1px solid #fff; font-size:.68rem;
  }
  .zero-cell { grid-row:1 / span 3; grid-column:1; }
  .outside-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin-top:5px; }
  .dozen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:5px; }
  .roulette-help { color:#bfe0cb; font-size:.8rem; margin-top:10px; text-align:center; }
  @media(max-width:760px){
    .roulette-wrap { grid-template-columns:1fr; }
    .number-grid { grid-template-columns:34px repeat(12,minmax(22px,1fr)); gap:2px; }
    .bet { min-height:36px; font-size:.72rem; padding:1px; }
    .outside-grid .bet, .dozen-grid .bet { font-size:.68rem; }
  }


  /* Tablet portrait: stack the wheel above the betting table. */
  @media (orientation:portrait) and (max-width:1200px){
    #rouletteGame { max-width:100%; }
    .roulette-wrap { grid-template-columns:minmax(0,1fr); }
    .roulette-wheel-panel,
    .roulette-table-panel { width:auto; min-width:0; }
    .roulette-table-panel { overflow-x:auto; }
    .wheel-shell { width:min(68vw,400px); }
    .wheel-shell.spinning-large { width:min(88vw,620px); }
  }


  /* ===== enhanced roulette wheel ===== */
  .roulette-wrap.spinning-layout { grid-template-columns:1fr; }
  .roulette-wrap.spinning-layout .roulette-table-panel { display:none; }
  .roulette-wheel-panel.spinning-focus { grid-column:1 / -1; }
  .wheel-shell {
    transition:width .35s ease;
  }
  .wheel-shell.spinning-large {
    width:min(100%,620px);
  }
  .wheel-number-layer {
    position:absolute;
    inset:0;
    border-radius:50%;
    z-index:2;
    pointer-events:none;
    transition:transform 5.5s cubic-bezier(.08,.68,.12,1);
  }
  .wheel-number {
    position:absolute;
    left:50%;
    top:50%;
    width:28px;
    height:28px;
    margin:-14px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.72rem;
    font-weight:800;
    color:#fff;
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 1px 3px rgba(0,0,0,.55);
    transform-origin:center;
    transition:outline .2s, transform .2s;
  }
  .wheel-number.red { background:#b32626; }
  .wheel-number.black { background:#181818; }
  .wheel-number.green { background:#078743; }
  .wheel-number.winner {
    outline:4px solid #ffe27a;
    outline-offset:2px;
    transform:scale(1.28);
    z-index:6;
  }
  .wheel-shell.spinning-large .wheel-number {
    width:36px;
    height:36px;
    margin:-18px;
    font-size:.9rem;
  }
  @media(max-width:760px){
    .wheel-number { width:22px; height:22px; margin:-11px; font-size:.58rem; }
    .wheel-shell.spinning-large .wheel-number { width:27px; height:27px; margin:-13.5px; font-size:.66rem; }
  }



/* ===== next-level application shell ===== */
:root{
  --gold:#ffe27a;
  --gold-soft:#fff0b0;
  --green-950:#062f1b;
  --green-900:#083a20;
  --green-800:#0c4a29;
  --green-700:#14683b;
  --panel:rgba(4,37,21,.86);
  --line:rgba(255,226,122,.28);
  --muted:#bfe0cb;
  --danger:#ffb4b4;
  --shadow:0 20px 55px rgba(0,0,0,.38);
}
html{color-scheme:dark;scroll-behavior:smooth}
body{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));}
header{
  position:sticky;top:8px;z-index:20;
  max-width:1180px;padding:10px 12px;margin-bottom:16px;
  border:1px solid rgba(255,255,255,.08);border-radius:14px;
  background:rgba(7,58,32,.88);backdrop-filter:blur(14px);
  box-shadow:0 12px 35px rgba(0,0,0,.2);
}
header h1{white-space:nowrap}.board,#rouletteGame{max-width:1180px}
.btn.compact{padding:.42rem .72rem;font-size:.8rem}
.account-bar{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.account-status{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 11px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(0,0,0,.24);font-size:.82rem;color:#e6f5eb}
.account-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(1,16,9,.78);backdrop-filter:blur(8px)}
.account-modal.show{display:flex!important}.account-modal:not(.show){display:none!important}
.account-card{position:relative;width:min(460px,100%);max-height:min(90vh,820px);overflow:auto;border:1px solid rgba(255,226,122,.42);border-radius:20px;padding:26px;background:linear-gradient(160deg,#174f34,#0a311f 74%);box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.05) inset}
.account-card h2{margin:0;color:var(--gold-soft)}.account-card h3{color:var(--gold-soft)}
.account-card label{display:block;margin:13px 0 6px;font-size:.88rem;font-weight:750;color:#e7f7ec}
.account-card input{width:100%;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:11px 12px;color:#fff;background:#07291a;font:inherit;outline:none}
.account-card input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,226,122,.12)}
.account-card small{display:block;margin-top:5px;color:var(--muted)}
.modal-close{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.24);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.modal-close:hover{background:rgba(255,255,255,.12)}
.brand-mark,.account-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,var(--gold),#c78f19);color:#103720;font-weight:900;font-size:1.45rem;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.auth-card>.brand-mark{margin-bottom:14px}.modal-intro{margin:8px 0 16px;color:var(--muted);line-height:1.45}
.auth-tabs,.account-tabs{display:flex;gap:7px;overflow:auto;padding:4px;border-radius:12px;background:rgba(0,0,0,.2)}
.auth-tabs{margin-bottom:15px}.auth-tabs button,.account-tabs button{border:0;border-radius:9px;padding:9px 12px;background:transparent;color:#d5ecdc;font-weight:750;cursor:pointer;white-space:nowrap}
.auth-tabs button.active,.account-tabs button.active{background:var(--gold);color:#113d25}
.account-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}.account-message{min-height:1.4em;margin-top:10px;color:var(--danger)}
.account-centre{width:min(860px,100%)}.account-centre-heading{display:flex;align-items:center;gap:13px;padding-right:42px;margin-bottom:17px}.account-centre-heading p{color:var(--muted);margin-top:3px}
.account-tabs{margin-bottom:18px}.account-pane{min-height:250px}.account-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.account-summary-grid article{padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(0,0,0,.18)}.account-summary-grid small{color:var(--muted)}.account-summary-grid strong{display:block;margin-top:7px;color:#fff;overflow-wrap:anywhere}
.privacy-note{margin-top:16px;padding:13px;border-left:3px solid var(--gold);background:rgba(255,226,122,.08);color:#d6eee0;line-height:1.45}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pane-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.table-scroll{overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:12px}.data-table{width:100%;border-collapse:collapse;min-width:560px}.data-table th,.data-table td{padding:11px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);font-size:.87rem}.data-table th{position:sticky;top:0;background:#0a3521;color:var(--gold-soft)}.data-table tbody tr:hover{background:rgba(255,255,255,.035)}
.data-state{padding:22px;text-align:center;color:var(--muted);border:1px dashed rgba(255,255,255,.14);border-radius:12px}.positive{color:#8ff0ae}.negative{color:#ffaaaa}
.toast-region{position:fixed;z-index:12000;right:18px;bottom:18px;display:grid;gap:9px;width:min(360px,calc(100vw - 36px))}.toast{padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#092e1d;box-shadow:var(--shadow);animation:toast-in .18s ease-out}.toast.error{border-color:rgba(255,120,120,.5)}.toast.success{border-color:rgba(120,255,160,.42)}
@keyframes toast-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.busy-overlay{position:fixed;z-index:13000;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:rgba(2,18,10,.62);backdrop-filter:blur(4px);font-weight:800}.spinner{width:32px;height:32px;border:4px solid rgba(255,255,255,.18);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.noscript{padding:16px;margin:16px auto;max-width:720px;border:1px solid #ffb4b4;border-radius:12px;background:#4b1616;text-align:center}
.roulette-login-notice{display:grid;gap:6px;justify-items:center;margin:0 0 10px;padding:12px;border:1px solid rgba(255,226,122,.3);border-radius:12px;background:rgba(255,226,122,.08);text-align:center}.roulette-login-notice span{color:var(--muted);font-size:.82rem}
.roulette-result{min-height:54px}.wheel-number.winner{box-shadow:0 0 0 3px #fff,0 0 24px 8px rgba(255,226,122,.8);transform:scale(1.15)}
@media(max-width:900px){header{position:static;align-items:flex-start}.account-bar{width:100%;justify-content:center;margin-left:0}.account-status{order:-1;width:100%;max-width:none;text-align:center}.account-centre{padding:20px}.form-grid{grid-template-columns:1fr}}
@media(max-width:560px){body{padding:6px}header{padding:8px}.account-card{padding:21px 16px}.account-summary-grid{grid-template-columns:1fr}.auth-tabs button,.account-tabs button{flex:1}.account-tabs{overflow-x:auto}.roulette-metrics{grid-template-columns:1fr 1fr}.roulette-metric:first-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Roulette must retain a visible spin even when reduced-motion is enabled. */
@media(prefers-reduced-motion:reduce){
  .wheel,
  .wheel-number-layer{
    transition-duration:5.5s!important;
    transition-timing-function:cubic-bezier(.08,.68,.12,1)!important;
  }
}