/* Optional fictional-credit table. Fixed local artwork, compositor-only motion. */
.ref-underdog-roulette.roulette-table { --roulette-gold:#e9cf91; margin:18px 0; padding:0; overflow:hidden; border:1px solid #847047; border-radius:14px; color:#f0f5ea; background:radial-gradient(ellipse at 30% 35%,#20523f 0,#103c30 45%,#082b25 100%); box-shadow:0 4px 18px #0003,inset 0 0 0 5px #041c1645; }
.roulette-table > summary { display:flex; align-items:center; gap:12px; padding:16px 20px; color:#f2e8cc; background:#071f1bb3; font-size:14px; list-style:none; }
.roulette-table > summary::-webkit-details-marker { display:none; }
.roulette-table > summary::after { content:'+'; margin-left:auto; font-size:24px; font-weight:400; }
.roulette-table[open] > summary::after { content:'−'; }
.roulette-table > summary small { display:block; margin-top:3px; color:#c7d7cb; font-size:11px; font-weight:400; }
.roulette-summary-chip { display:grid; place-items:center; flex:0 0 42px; height:42px; border:3px dashed #e9cf91; border-radius:50%; background:#633227; box-shadow:inset 0 0 0 3px #241c16; font-size:11px; color:#fff5db; }
.roulette-table-heading { padding:22px 24px 0; }
.roulette-eyebrow { color:var(--roulette-gold); font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:800; }
.roulette-table .roulette-table-heading h3 { margin:7px 0 8px; color:#fff5dc; font-size:clamp(20px,3vw,26px); letter-spacing:-.5px; }
.roulette-table .roulette-table-heading p { margin:0; color:#c7d7cb; font-size:12px; }
.roulette-table-layout { display:grid; grid-template-columns:minmax(190px,.95fr) minmax(210px,1fr); align-items:center; gap:20px; padding:24px; }
.roulette-wheel-area,.roulette-console { min-width:0; }
.roulette-wheel { position:relative; isolation:isolate; width:100%; max-width:360px; aspect-ratio:1; margin:0 auto; border:2px solid #432719; border-radius:50%; background:repeating-conic-gradient(from 10deg,#0000 0deg 20deg,#11080015 23deg 25deg),radial-gradient(circle,#432719 0 42%,#b18741 42.4% 44%,#e6c579 44.6% 49%,#946227 49.7% 51%,#582c1c 52%,#8b4f28 59%,#4d281b 66%,#2d1c16 70%); box-shadow:0 16px 22px #0005,inset 0 0 0 2px #b48b54,inset 0 0 0 8px #311c1455; }
.roulette-wheel::before { content:''; position:absolute; inset:4%; border:2px solid #dfba69; border-radius:50%; box-shadow:inset 0 0 6px #190c07,0 0 3px #20140e; }
.roulette-track { position:absolute; inset:8%; border:1px solid #eedda5; border-radius:50%; box-shadow:0 0 0 2px #5f4223; }
.roulette-rotor { position:absolute; inset:11%; width:78%; height:78%; transform:rotate(var(--roulette-angle)); }
.roulette-pocket { stroke:#e9cf91; stroke-width:1.4; }
.roulette-pocket-red { fill:#b52e35; }
.roulette-pocket-black { fill:#171e22; }
.roulette-pocket-green { fill:#2c8060; }
.roulette-pocket-symbol { fill:#fff5dc; font:700 11px system-ui,sans-serif; text-anchor:middle; dominant-baseline:central; }
.roulette-ball-orbit { position:absolute; inset:0; border-radius:50%; transform:rotate(var(--roulette-ball-angle,0deg)); }
.roulette-ball-radius { position:absolute; inset:0; transform:translateY(var(--roulette-ball-radius,0%)); }
.roulette-ball { position:absolute; width:4.1%; height:4.1%; top:17.5%; left:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#fffdf2 30%,#cecdbb 72%,#82877b); box-shadow:1px 2px 3px #0009; }
.roulette-wheel-ready .roulette-ball { visibility:hidden; }
.roulette-hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:31%; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #ebd499; border-radius:50%; background:radial-gradient(circle,#18342d,#0c201c); color:#fff0c4; box-shadow:0 3px 8px #0008,0 0 0 3px #956b35; }
.roulette-hub > span { font-size:clamp(20px,3vw,36px); font-weight:750; }
.roulette-hub > small { margin-top:4px; color:#d6c59b; font-size:8px; font-weight:700; letter-spacing:1.6px; }
.roulette-pointer { position:absolute; top:3%; left:50%; transform:translateX(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:17px solid #fff0ba; filter:drop-shadow(0 2px 1px #0005); }
.roulette-table .roulette-wheel-caption { margin:16px 0 0; text-align:center; color:#c7d7cb; font-size:11px; }
.roulette-selection { padding:14px; border:1px solid #a0b59588; border-radius:6px; background:#00171055; }
.roulette-selection span { display:block; margin-top:4px; color:#c7d7cb; font-size:11px; line-height:1.5; }
.roulette-selection span:first-child { margin:0; color:#e9cf91; letter-spacing:1px; text-transform:uppercase; font-size:10px; }
.roulette-selection strong { display:block; color:#fff5dc; margin-top:6px; font-size:20px; }
.roulette-table .roulette-result { padding:12px; border:1px solid #d4c49a88; border-radius:6px; background:#051c16aa; color:#fff0c4; font-weight:650; }
.roulette-result > span { display:block; margin-bottom:4px; color:#c7d7cb; font-size:10px; font-weight:500; letter-spacing:1px; text-transform:uppercase; }
.roulette-table #roulette-form { display:block; margin-top:16px; }
.roulette-stake-picker { min-width:0; padding:0; border:0; margin:0; }
.roulette-stake-picker legend,.roulette-betting-table legend { margin:0 0 9px; padding:0; color:#e9cf91; font-size:12px; font-weight:700; }
.roulette-chips { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
.roulette-chips > span { color:#c7d7cb; font-size:10px; line-height:1.4; }
.roulette-table .roulette-chip { display:grid; place-items:center; width:46px; height:46px; padding:3px; border:4px dashed #e7e8d6; border-radius:50%; color:#fff7db; background:#234e72; box-shadow:0 2px 0 #062039,inset 0 0 0 2px #163853; cursor:pointer; }
.roulette-table .roulette-chip:nth-child(2) { background:#76454b; box-shadow:0 2px 0 #3c2025,inset 0 0 0 2px #4f3035; }
.roulette-table .roulette-chip:nth-child(3) { background:#242d33; box-shadow:0 2px 0 #11171a,inset 0 0 0 2px #0a1117; }
.roulette-table .roulette-chip:nth-child(4) { background:#34776b; box-shadow:0 2px 0 #174036,inset 0 0 0 2px #174036; }
.roulette-chip > span { font-size:16px; line-height:1; font-weight:800; }
.roulette-table .roulette-chip[aria-pressed="true"] { outline:2px solid #ffe4a6; outline-offset:3px; }
.roulette-table .roulette-chip:hover:not(:disabled) { border-color:#fff6d7; filter:brightness(1.15); }
.roulette-entry { display:flex; align-items:center; gap:12px; }
.roulette-entry label { flex:1; color:#e0e9df; font-size:12px; }
.roulette-table .roulette-entry input { width:88px; min-height:42px; border:1px solid #9baf94; border-radius:5px; color:#fff5dc; background:#06251e; text-align:center; font-size:16px; }
.roulette-table .roulette-play { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; margin-top:12px; padding:11px 15px; border:1px solid #ffe2a2; border-radius:6px; background:linear-gradient(115deg,#e9cf91,#c6a364); color:#18281e; font-size:13px; font-weight:800; }
.roulette-table .roulette-play:hover:not(:disabled) { background:#f0dba9; }
.roulette-play > span { font-size:21px; line-height:.9; }
.roulette-table #roulette-limit,.roulette-table .roulette-small { margin:10px 0 0; color:#c7d7cb; font-size:11px; }
.roulette-betting-table { min-width:0; margin:0 24px 18px; padding:0; border:0; }
.roulette-numbers { display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); grid-template-rows:repeat(3,40px); gap:2px; }
.roulette-table .roulette-bet { position:relative; min-width:0; min-height:40px; padding:6px 2px; border:1px solid #c3d0ad99; border-radius:3px; color:#fff5dc; background:#092f24; font:700 12px system-ui,sans-serif; cursor:pointer; }
.roulette-table .roulette-number { grid-column:var(--bet-column); grid-row:var(--bet-row); font-size:14px; }
.roulette-table .roulette-number-red { background:#99232d; }
.roulette-table .roulette-number-black { background:#161d21; }
.roulette-table .roulette-zero { grid-column:1; grid-row:1/4; background:#226344; }
.roulette-table .roulette-bet[aria-pressed="true"] { border:2px solid #ffe4a6; box-shadow:inset 0 0 0 2px #ffe4a6; color:#fff6dd; }
.roulette-table .roulette-bet[aria-pressed="true"]::after { content:'•'; position:absolute; right:3px; bottom:0; color:#ffe4a6; font-size:14px; }
.roulette-table .roulette-bet:hover:not(:disabled) { border-color:#fff5dc; filter:brightness(1.3); }
.roulette-dozens,.roulette-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; margin-top:3px; }
.roulette-outside { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px; margin-top:3px; }
.roulette-columns .roulette-bet { font-size:11px; font-weight:600; }
.roulette-columns small { display:block; margin-top:2px; color:#c7d7cb; font-size:10px; font-weight:400; }
.roulette-red-diamond { color:#ff6e78; }
.roulette-black-diamond { color:#b0c2c7; }
.roulette-table .roulette-betting-table p { color:#c7d7cb; font-size:11px; margin:9px 0 0; }
.roulette-rules { margin:0 24px; padding:14px 0; border-top:1px solid #a5b99644; color:#c7d7cb; font-size:11px; }
.roulette-table .roulette-rules p { margin:0 0 8px; }
.roulette-table .roulette-rules p:last-child { margin-bottom:0; }
.roulette-rules strong { color:#e0e9df; font-weight:550; }
.roulette-history { margin:0 24px 18px; border-top:1px solid #a5b99644; padding-top:12px; }
.roulette-table .roulette-history > summary { color:#e9cf91; font-size:12px; }
.roulette-history li { margin-top:6px; color:#e0e9df; font-size:12px; }
.roulette-table [disabled] { opacity:.45; cursor:not-allowed; }
.roulette-table :is(button,input,summary):focus-visible { outline:3px solid #aff6f5; outline-offset:3px; z-index:1; }
/* Pending motion never shows a fabricated result. Receipt arrival continues from
   the exact angle and angular speed, then eases to its authoritative pocket.
   Only transforms animate; no JS frame loop or delayed balance/result updates. */
.roulette-wheel-moving :is(.roulette-rotor,.roulette-ball-orbit,.roulette-ball-radius) { will-change:transform; }
.roulette-wheel-pending.roulette-wheel-moving .roulette-rotor { animation:roulette-pending var(--roulette-wheel-duration) linear infinite; animation-delay:var(--roulette-delay); }
.roulette-wheel-pending.roulette-wheel-moving .roulette-ball-orbit { animation:roulette-ball-pending var(--roulette-ball-duration) linear infinite; animation-delay:var(--roulette-delay); }
.roulette-wheel-settled.roulette-wheel-moving .roulette-rotor { animation:roulette-settle var(--roulette-duration) cubic-bezier(.3333333333,1,.6666666667,1) both; animation-delay:var(--roulette-delay); }
.roulette-wheel-settled.roulette-wheel-moving .roulette-ball-orbit { animation:roulette-ball-settle var(--roulette-duration) cubic-bezier(.3333333333,var(--roulette-ball-ease),.6666666667,1) both; animation-delay:var(--roulette-delay); }
.roulette-wheel-settled.roulette-wheel-moving .roulette-ball-radius { animation:roulette-ball-drop var(--roulette-duration) cubic-bezier(.3333333333,1,.6666666667,1) both; animation-delay:var(--roulette-delay); }
@keyframes roulette-pending { from { transform:rotate(var(--roulette-start-angle)); } to { transform:rotate(calc(var(--roulette-start-angle) + 360deg)); } }
@keyframes roulette-ball-pending { from { transform:rotate(var(--roulette-start-ball)); } to { transform:rotate(calc(var(--roulette-start-ball) - 360deg)); } }
@keyframes roulette-settle { from { transform:rotate(var(--roulette-start-angle)); } to { transform:rotate(var(--roulette-angle)); } }
@keyframes roulette-ball-settle { from { transform:rotate(var(--roulette-start-ball)); } to { transform:rotate(var(--roulette-ball-angle)); } }
@keyframes roulette-ball-drop { from { transform:translateY(var(--roulette-start-radius)); } to { transform:translateY(0%); } }
.roulette-table :is(.roulette-chip,.roulette-bet,.roulette-play) { touch-action:manipulation; transition:background-color 120ms ease,border-color 120ms ease,box-shadow 120ms ease,transform 120ms ease; }
.roulette-table .roulette-chip:active:not(:disabled),.roulette-table .roulette-play:active:not(:disabled) { transform:translateY(1px); }
.roulette-table .roulette-bet[aria-pressed="true"] { border-width:1px; box-shadow:inset 0 0 0 2px #ffe4a6; }
@media(max-width:820px) { .roulette-table-layout { grid-template-columns:1fr; gap:24px; } .roulette-wheel { max-width:300px; } .roulette-hub > span { font-size:32px; } .roulette-console { width:100%; max-width:410px; margin:0 auto; } .roulette-numbers { grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:auto; } .roulette-table .roulette-number { grid-column:auto; grid-row:auto; min-height:44px; } .roulette-table .roulette-zero { grid-column:1/-1; } }
@media(max-width:420px) { .roulette-table > summary { padding:14px; gap:10px; font-size:12px; } .roulette-table-heading { padding:18px 16px 0; } .roulette-table-layout { padding:20px 16px; } .roulette-rules { margin:0 16px; } .roulette-history { margin:0 16px 16px; } .roulette-betting-table { margin:0 16px 18px; } .roulette-chips { gap:8px; } .roulette-outside { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .roulette-table :is(.roulette-rotor,.roulette-ball-orbit,.roulette-ball-radius) { animation:none; will-change:auto; } .roulette-table :is(.roulette-chip,.roulette-bet,.roulette-play) { transition:none; } .roulette-table .roulette-wheel-pending :is(.roulette-rotor,.roulette-ball-orbit,.roulette-ball-radius) { transform:none; } }
@media(forced-colors:active) { .roulette-wheel { border:2px solid CanvasText; } .roulette-pocket,.roulette-pocket-symbol { forced-color-adjust:none; } .roulette-table .roulette-chip[aria-pressed="true"],.roulette-table .roulette-bet[aria-pressed="true"] { outline:2px solid Highlight; } }