:root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#080f24;color:#fff}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 50% 32%,#24356e 0%,#101a3a 48%,#070d1f 90%)}.game{width:min(100%,600px);min-height:100dvh;margin:auto;display:flex;flex-direction:column;align-items:center;padding:16px 12px max(18px,env(safe-area-inset-bottom));overflow:hidden}header{text-align:center}.eyebrow{font-size:11px;letter-spacing:4px;color:#e9c77e;font-weight:700}h1{font-family:Georgia,serif;font-size:clamp(34px,9vw,54px);letter-spacing:4px;color:#ffe0a0;text-shadow:0 0 14px #d4882a,0 3px 0 #4e2912;margin:1px 0}.subtitle{font-size:9px;letter-spacing:2.3px;color:#91a6d5}.stage{width:100%;height:min(96vw,470px);min-height:270px;position:relative;margin-top:2px}.stage canvas{display:block;width:100%;height:100%;touch-action:none}.unsupported{position:absolute;inset:0;display:grid;place-items:center;background:#16213b;color:#fff}.unsupported[hidden]{display:none}.result-area{text-align:center;margin-top:0;z-index:2}.result-label{font-size:10px;letter-spacing:3px;color:#9db1d6}.result-number{font-size:36px;font-weight:800;line-height:1.3;color:#f4cf8c;min-height:48px}.status{color:#b8c6e0;font-size:13px;min-height:22px}button{width:min(92%,380px);border:2px solid #ffdb80;border-radius:16px;padding:16px 10px;margin-top:13px;background:linear-gradient(#9c6725,#54300f);box-shadow:inset 0 2px 0 #ffe4a0,0 7px 20px #0008;color:#fff4cf;font:800 19px Georgia,serif;letter-spacing:2px;text-shadow:0 2px 2px #321b08;cursor:pointer}button:disabled{opacity:.65;cursor:default}.recent{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;min-height:32px;margin-top:18px}.chip{display:grid;place-items:center;min-width:29px;height:29px;padding:0 4px;border-radius:50%;border:2px solid #d8c38c;font-size:11px;font-weight:700;box-shadow:0 2px 6px #0009}.red{background:#b51e25}.black{background:#191c23}.green{background:#087e4a}footer{font-size:10px;color:#667aab;letter-spacing:1px;margin-top:auto;padding-top:18px}@media(max-height:740px){.game{padding-top:8px}.stage{height:min(89vw,410px);min-height:240px}.recent{margin-top:10px}button{margin-top:7px;padding:12px}}

/* v12: tighter mobile composition; 3D wheel geometry and camera unchanged. */
.game{padding-top:9px;gap:0}
header{flex-shrink:0}
.recent{order:0;min-height:30px;margin:8px 0 0;gap:5px;flex-shrink:0}
.chip{min-width:27px;height:27px;font-size:10px}
.stage{height:clamp(235px,73vw,405px);min-height:0;margin-top:-3px;flex-shrink:0}
.result-area{margin-top:-3px}
.result-number{font-size:34px;min-height:42px}
button{margin-top:8px;padding:13px 10px}
footer{padding-top:10px}
@media(max-height:740px){.stage{height:clamp(215px,70vw,365px);min-height:0}.recent{margin-top:5px}button{margin-top:5px;padding:11px}}

/* v13: compact portrait layout and animated roulette result strip */
.recent{margin-top:21px;position:relative;z-index:3}
.stage{margin-top:-51px;position:relative;z-index:1}
.result-area{margin-top:-32px;width:min(100%,420px);position:relative;z-index:4}
.result-label{margin-bottom:5px}
.reel-frame{height:66px;position:relative;overflow:hidden;border:2px solid #cba25a;border-radius:11px;background:#080d1b;box-shadow:inset 0 3px 14px #000a,0 4px 12px #0006;padding:5px 0}
.reel-track{display:flex;align-items:stretch;justify-content:center;height:100%;gap:5px;overflow:hidden}
.reel-cell{flex:0 0 18%;max-width:72px;display:grid;place-items:center;color:#fff;font:800 clamp(16px,4.6vw,23px) Georgia,serif;border:1px solid #c7a05c;border-radius:5px;text-shadow:0 1px 2px #000;transition:filter .1s}
.reel-cell.red{background:#b51f27}.reel-cell.black{background:#101318}.reel-cell.green{background:#087d43}
.reel-cell.center{outline:2px solid #ffe7a0;outline-offset:-3px;box-shadow:0 0 12px #ffd78088;transform:scale(1.05);z-index:1}
.reel-marker{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ffe39a;pointer-events:none}
.result-number{display:none}.status{min-height:17px;font-size:11px;margin-top:5px}
button{margin-top:7px}
@media(max-height:740px){.recent{margin-top:15px}.stage{margin-top:-43px}.result-area{margin-top:-27px}.reel-frame{height:58px}}

/* v14: one shared play area. The betting-table preview remains mounted under the 3D wheel. */
.stage{height:clamp(310px,78vw,435px);margin-top:5px;isolation:isolate;overflow:hidden;border-radius:15px}
.table-placeholder,.wheel-overlay{position:absolute;inset:0}
.table-placeholder{padding:12px 12px 8px;display:flex;flex-direction:column;justify-content:center;gap:12px;background:linear-gradient(150deg,#0d3e32,#07503b 55%,#052c27);border:2px solid #bb9049;border-radius:15px;box-shadow:inset 0 0 35px #001b15}
.table-heading{display:flex;align-items:center;justify-content:space-between;color:#f6d797;font:700 12px Georgia,serif;letter-spacing:2px}
.table-heading span{font:600 9px system-ui,sans-serif;letter-spacing:1px;color:#a5d8c5}
.table-board{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px}
.zero-pair{display:grid;grid-template-rows:1fr 1fr;gap:3px}
.zero-pair div{display:grid;place-items:center;background:#078153;color:#fff;font-weight:800;border:1px solid #c6e6d6;border-radius:3px}
.number-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(3,42px);gap:2px}
.bet-number{display:grid;place-items:center;min-width:0;color:white;font-weight:800;font-size:clamp(9px,2.3vw,14px);border:1px solid #b6a47e;border-radius:2px}
.bet-number.red{background:#b51f27}.bet-number.black{background:#101318}
.dozen-row,.outside-row{grid-column:2;display:grid;gap:2px}
.dozen-row{grid-template-columns:repeat(3,1fr)}.outside-row{grid-template-columns:repeat(6,1fr)}
.dozen-row span,.outside-row span{display:grid;place-items:center;min-height:29px;background:#07513d;border:1px solid #c1c5a6;color:#f5f5eb;font-size:clamp(9px,2.2vw,12px);font-weight:700}
.outside-row .bet-red{background:#b51f27}.outside-row .bet-black{background:#101318}
.table-note{text-align:center;color:#c6ddcf;font-size:11px}
.wheel-overlay{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s;background:radial-gradient(ellipse at center,#26376a 0%,#101a3a 74%);z-index:2}
.stage.show-wheel .wheel-overlay{opacity:1;visibility:visible}
.wheel-overlay canvas{width:100%;height:100%;display:block}
.wheel-caption{position:absolute;bottom:5px;left:0;right:0;text-align:center;color:#e8c581;font-size:10px;letter-spacing:3px;opacity:0}
.stage.spinning .wheel-caption{opacity:1}
.stage.spinning .table-placeholder{pointer-events:none}
.result-area{margin-top:8px}
@media(max-height:740px){.stage{height:clamp(285px,73vw,370px);margin-top:4px}.number-board{grid-template-rows:repeat(3,36px)}.table-placeholder{gap:8px}}

/* v15: move visible wheel higher without changing the 3D camera or geometry. */
.recent{margin-top:21px}
.stage{height:clamp(275px,69vw,390px);margin-top:0}
.wheel-overlay canvas{transform:translateY(-38px)}
.wheel-caption{display:none}
.status{display:none}
.result-area{margin-top:5px}
button:disabled{opacity:.7}
@media(max-height:740px){.stage{height:clamp(255px,66vw,340px);margin-top:0}.wheel-overlay canvas{transform:translateY(-32px)}}

/* v16: real betting controls, preserving the v15 wheel and layout. */
.table-placeholder{gap:7px;padding:10px 9px 8px;justify-content:center}
.table-board{grid-template-columns:32px minmax(0,1fr);gap:3px}
.number-board{grid-template-rows:repeat(3,34px);gap:2px}
.zero-pair{gap:2px}
.bet-spot{position:relative;display:grid;place-items:center;min-width:0;min-height:0;width:100%;margin:0;padding:0 1px;border:1px solid #b7a57d;border-radius:3px;background:#07513d;color:#fff;font:800 clamp(9px,2.2vw,13px) system-ui,sans-serif;letter-spacing:0;text-shadow:none;box-shadow:none;touch-action:manipulation}
.bet-spot.red,.bet-spot.bet-red{background:#b51f27}.bet-spot.black,.bet-spot.bet-black{background:#101318}.bet-spot.zero{background:#087d43}
.bet-spot.has-bet{outline:2px solid #ffe29a;outline-offset:-2px}
.bet-stack{position:absolute;right:-2px;bottom:-4px;z-index:1;min-width:18px;height:18px;padding:0 2px;display:grid;place-items:center;border-radius:50%;border:2px dashed #a6a6a6;background:#f4f0df;color:#152034;font:800 9px system-ui,sans-serif;box-shadow:0 2px 4px #000a;letter-spacing:-.5px}
.dozen-row,.outside-row{gap:2px}.dozen-row .bet-spot,.outside-row .bet-spot{height:28px;font-size:clamp(8px,2vw,11px)}
.bank-row{display:flex;justify-content:space-between;gap:8px;color:#ffe2a4;font-size:11px;font-weight:700}.bank-row strong{font-size:15px}
.chip-picker{display:flex;justify-content:center;gap:clamp(5px,2vw,12px)}
.chip-picker .denom{width:clamp(35px,9vw,46px);height:clamp(35px,9vw,46px);padding:0;margin:0;border:4px dashed #f2f2f2;border-radius:50%;background:#244779;box-shadow:0 2px 6px #0008;color:white;font:800 12px system-ui,sans-serif;letter-spacing:0;text-shadow:0 1px 2px #000}
.chip-picker .denom:nth-child(2){background:#b51f27}.chip-picker .denom:nth-child(3){background:#087d43}.chip-picker .denom:nth-child(4){background:#171923}.chip-picker .denom:nth-child(5){background:#6b35a4}.chip-picker .denom.active{outline:3px solid #ffda7c;outline-offset:2px}
.bet-actions{display:flex;justify-content:center;gap:8px}.bet-actions button{flex:1;width:auto;margin:0;padding:7px 4px;border:1px solid #c6a05c;border-radius:7px;background:#263b43;color:#f5dba7;font:700 11px system-ui,sans-serif;letter-spacing:.4px;box-shadow:none;text-shadow:none}
.table-note{font-size:10px;min-height:12px}
@media(max-width:390px){.table-placeholder{gap:5px}.number-board{grid-template-rows:repeat(3,30px)}.chip-picker .denom{width:34px;height:34px}.bet-actions button{padding:5px 3px}.table-heading{font-size:11px}}

/* v17: 3 standard 2-to-1 column bets, at the right end of each numbered row. */
.number-board{grid-template-columns:repeat(12,minmax(0,1fr)) minmax(27px,1.35fr)}
.number-board .bet-column{background:#11664b;border:1px solid #d5b56f;color:#ffe5a5;font-size:clamp(9px,2.3vw,12px);font-weight:900}
.number-board .bet-column.has-bet{outline:2px solid #ffe29a;outline-offset:-2px}
@media(max-width:390px){.number-board{grid-template-columns:repeat(12,minmax(0,1fr)) minmax(25px,1.4fr)}}

/* v19: clean casino felt; chip placement communicates the inside wager. */
.number-board{position:relative}
.inside-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
.inside-chip{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:19px;height:19px;padding:0 3px;border-radius:50%;border:3px dashed #f7ead1;background:#234c86;color:white;font:800 9px system-ui,sans-serif;box-shadow:0 1px 5px #000a;white-space:nowrap;pointer-events:none;z-index:8}
.bet-number.bet-preview{filter:brightness(1.3);outline:2px solid #ffe7a1;outline-offset:-2px}
/* A straight-up wager also uses a centered chip, covering its number. */
.bet-number .bet-stack{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);z-index:7}

.bet-stack{pointer-events:none}

/* v20: board-wide pointer hit detection and press-and-hold clearing. */
.number-board{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.number-board .bet-number{touch-action:pan-y}

/* v21: contain ALL table chips beneath the wheel overlay during a spin.
   A high-z-index inside chip layer must never escape into the wheel view. */
.stage .table-placeholder{z-index:1;isolation:isolate}
.stage .wheel-overlay{z-index:10}
.stage.show-wheel .table-placeholder{visibility:hidden;pointer-events:none}
.stage:not(.show-wheel) .table-placeholder{visibility:visible}
.number-board .inside-layer{pointer-events:none}

/* v22: two gentle gold pulses after the wheel hands control back to the table. */
@keyframes tgrWinningPulse{
  0%,100%{filter:brightness(1);box-shadow:none}
  22%,72%{filter:brightness(1.5);box-shadow:inset 0 0 0 2px #ffe7a1,0 0 11px 3px #f8cb68bb}
  47%{filter:brightness(1.08);box-shadow:inset 0 0 0 1px #ffe7a166,0 0 4px 1px #f8cb6855}
}
.table-placeholder .bet-spot.win-flash{animation:tgrWinningPulse 1.2s ease-in-out both;z-index:2}
.win-inside-marker{position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;border:2px solid #ffe6a0;border-radius:50%;background:#f7cb6d88;pointer-events:none;z-index:9;animation:tgrWinningPulse 1.2s ease-in-out both}
@media(prefers-reduced-motion:reduce){.table-placeholder .bet-spot.win-flash,.win-inside-marker{animation:none;outline:2px solid #ffe7a1;box-shadow:0 0 7px #ffe7a1}}

/* v24: align outside bets to the 12-number grid; reserve the 2:1 column width. */
.dozen-row,.outside-row{
  grid-template-columns:repeat(12,minmax(0,1fr)) minmax(27px,1.35fr);
  gap:2px;
}
.dozen-row > .bet-spot{grid-column:span 4}
.outside-row > .bet-spot{grid-column:span 2}
@media(max-width:390px){
  .dozen-row,.outside-row{grid-template-columns:repeat(12,minmax(0,1fr)) minmax(25px,1.4fr)}
}
/* Every wager marker is one consistent white casino chip, centered on its spot. */
.bet-spot .bet-stack,.number-board .inside-chip{
  position:absolute;
  left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  min-width:19px;height:19px;padding:0 3px;
  border:3px dashed #a6a6a6;border-radius:50%;
  background:#f4f0df;color:#152034;
  font:800 9px system-ui,sans-serif;
  letter-spacing:-.5px;text-shadow:none;
  box-shadow:0 2px 4px #000a;
  white-space:nowrap;pointer-events:none;z-index:8;
}
/* Inside chips are positioned by JavaScript at their actual grid intersections. */
.number-board .inside-chip{left:auto;top:auto}

/* v25: all wager markers are truly circular, including outside bets. */
.bet-spot .bet-stack,
.number-board .inside-chip{
  width:22px;
  min-width:22px;
  max-width:22px;
  height:22px;
  min-height:22px;
  max-height:22px;
  padding:0;
  aspect-ratio:1 / 1;
  flex:none;
  border-radius:50%;
  font-size:9px;
  line-height:1;
  letter-spacing:-.5px;
  overflow:hidden;
}