/* Uses the same tokens, control geometry and breakpoint as the main game UI. */
body { background:transparent; color:var(--game-text); font:14px/1.4 var(--game-font); }
main,#game { min-height:0; }
.game-panel { width:100%; min-height:0; background:transparent; border:0; border-radius:0; overflow:visible; }
.game-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:16px 20px; margin-bottom:16px; background:var(--game-panel); border:1px solid var(--game-line); border-radius:12px; }
.game-heading h1 { margin:0; color:var(--game-text); font:750 23px/1.25 var(--game-font); text-transform:none; letter-spacing:-.035em; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
.has-controls .game-layout { grid-template-columns:var(--game-rail) minmax(0,1fr); }
.controls { display:flex; flex-direction:column; gap:16px; align-self:start; min-width:0; padding:20px; background:var(--game-panel); border:1px solid var(--game-line); border-radius:12px; }
.control-row,.coin-create { display:flex; flex-direction:column; align-items:stretch; gap:16px; padding:0; }
.control-row > .field,.control-row > .wager-field,.field { width:100%; min-width:0; max-width:none; flex:none; }
.field { display:flex; flex-direction:column; gap:8px; }
.field > span { margin:0; color:var(--game-muted); font:600 13px/1.4 var(--game-font); text-transform:none; letter-spacing:0; }
.wager-input { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; border:0; background:none; height:auto; padding:0; overflow:visible; }
.wager-amount { display:flex; align-items:center; min-width:0; height:44px; padding:0 12px; background:var(--game-input); border:1px solid var(--game-line); border-radius:8px; }
.wager-amount img { width:18px; height:22px; object-fit:contain; }
.wager-input .wager-amount input { width:100%; min-width:0; border:0; background:none; padding:0 0 0 8px; font:650 16px/1 var(--game-font); }
.wager-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.wager-actions button { height:36px; padding:6px; border:1px solid var(--game-line); border-radius:6px; background:var(--game-raised); color:#d0c4df; font:650 13px/1 var(--game-font); }
input,select { height:44px; border:1px solid var(--game-line); background:var(--game-input); border-radius:8px; font-size:16px; }
.mode-controls { margin:0; padding:0; }
.mode-tabs { display:flex; width:100%; padding:4px; gap:4px; border:1px solid var(--game-line); border-radius:8px; background:var(--game-input); }
.mode-tabs button { flex:1; min-height:36px; padding:8px; border:0; border-radius:5px; background:transparent; color:var(--game-muted); font-weight:650; font-size:13px; }
.mode-tabs button[aria-pressed=true] { color:#f1e2ff; background:#49305f; box-shadow:none; }
.segmented { display:flex; gap:4px; background:var(--game-input); border:1px solid var(--game-line); padding:4px; border-radius:8px; }
.segmented button { flex:1; min-width:0; min-height:36px; padding:8px 4px; border:0; border-radius:5px; font-size:12px; }
.segmented button[aria-pressed=true] { background:#49305f; color:#f1e2ff; box-shadow:none; }
.auto-fields { margin:0; width:100%; padding:0; }
.auto-fields[hidden] { display:none; }
.auto-fields .field { width:100%; }
button.primary { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:12px 16px; margin:0; border:1px solid #b078e1; border-radius:8px; background:var(--game-accent); color:white; font:700 14px/1.4 var(--game-font); box-shadow:inset 0 1px 0 #ffffff15; text-transform:none; }
button.primary:hover:not(:disabled) { background:var(--game-accent-hover); }
.game-heading .primary { width:auto; min-height:40px; padding:8px 16px; }
button.secondary,.back-button { min-height:42px; padding:10px 14px; border:1px solid var(--game-line); border-radius:8px; background:var(--game-raised); color:#d8cde5; font:650 14px/1.4 var(--game-font); }
#arena { position:relative; min-width:0; width:100%; background:var(--game-bg); border:1px solid var(--game-line); border-radius:12px; overflow:hidden; }
.limbo-stage,.plinko-stage,.tower-stage,.coin-preview { min-height:500px; }
.plinko-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.plinko-stage #board { width:100%; max-width:600px; height:auto; max-height:425px; }
.plinko-stage #slots { position:relative; bottom:auto; transform:none; left:auto; max-width:570px; margin-top:-4.6%; }
.plinko-stage .result { position:absolute; bottom:12px; }
.tower-stage { display:flex; flex-direction:column; justify-content:center; max-width:700px; padding:24px; }
.chance { display:flex; justify-content:space-between; align-items:center; border:0; border-radius:8px; padding:12px; background:var(--game-input); }
.chance >span { font-size:13px; color:var(--game-muted); }
.chance strong { font-size:16px; }
.game-turbo { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:40px; margin:0; padding:4px 0; border:0; background:transparent; color:var(--game-muted); font:600 13px/1.4 var(--game-font); }
.game-turbo>span:first-child { display:flex; align-items:center; gap:8px; }
.game-turbo svg { width:17px; height:17px; }
.game-turbo-track { display:flex; align-items:center; width:34px; height:20px; padding:3px; border-radius:20px; background:#3a3046; }
.game-turbo-track>span { width:14px; height:14px; border-radius:50%; background:#c1b6cb; transition:transform .15s; }
.game-turbo[aria-checked=true] { color:#e7ceff; }
.game-turbo[aria-checked=true] .game-turbo-track { background:var(--game-accent); }
.game-turbo[aria-checked=true] .game-turbo-track>span { background:white; transform:translateX(14px); }
.history-strip { margin-top:16px; background:var(--game-panel); border:1px solid var(--game-line); border-radius:8px; }
.history-strip:empty { display:none; }
/* Baccarat uses adjacent Player and Banker hands. */
.baccarat-layout { display:flex; flex-direction:column; }
.baccarat-main { min-width:0; }
.baccarat-table { display:flex; flex-direction:column; justify-content:space-between; min-height:500px; padding:28px 24px; background:radial-gradient(ellipse at center,#291337,#100d18 80%); }
.baccarat-table:before { inset:16px; border:1px solid #4c2d5a; border-radius:45% 45% 18px 18px/18% 18% 18px 18px; }
.baccarat-table .hand { position:relative; width:100%; min-width:0; padding:0; background:none; }
.baccarat-table .hand header { display:flex; align-items:center; justify-content:center; gap:8px; font:650 12px/1.4 var(--game-font); color:var(--game-muted); }
.baccarat-table .hand header b { background:#271a32; border:1px solid #5a3d6e; border-radius:20px; padding:4px 7px; }
.baccarat-table .cards { justify-content:center; min-height:140px; }
.table-rule { text-align:center; padding:16px 0; font:600 11px/1.6 var(--game-font); color:#a78ab7; }
.betting-table { display:grid; grid-template-columns:1fr; gap:8px; margin:0; padding:0; border:0; background:none; }
.betting-table .bet-zone { display:grid; grid-template-columns:1fr auto; gap:4px; min-height:56px; border:1px solid #735091; border-radius:8px; padding:12px; background:#382448; color:#f0e1ff; }
.betting-table .bet-zone:hover:not(:disabled) { background:#513069; }
.bet-zone b { text-align:left; font:650 14px/1.4 var(--game-font); }
.bet-zone >span { text-align:right; font-size:13px; color:#c3a7d8; }
.bet-zone strong { grid-column:1/-1; font-size:12px; text-align:left; }
.bet-zone strong:empty { display:none; }
.control-hint { margin:0; color:var(--game-muted); font-size:12px; line-height:1.5; }
.round-sidebar { width:100%; border-left:0; border-top:1px solid var(--game-line); max-height:240px; overflow:auto; }
.roads { border-top:1px solid var(--game-line); padding:16px; }
#roundClock { min-width:0; font-size:13px; }
.rooms { min-height:280px; padding:20px; }
.rooms .empty { padding:34px 16px; font-size:13px; color:var(--game-muted); }
.coin-create { max-width:none; }
@media(max-width:760px) {
  .game-heading { min-height:56px; padding:14px 16px; margin-bottom:12px; }
  .game-heading h1 { font-size:20px; }
  .has-controls .game-layout { display:flex; flex-direction:column; gap:12px; }
  #arena { order:1; }
  .controls { order:2; width:100%; padding:16px; gap:14px; }
  .control-row>.field,.control-row>.wager-field { flex:none; }
  .control-row>.primary { flex:none; }
  .limbo-stage,.plinko-stage,.tower-stage,.coin-preview { min-height:330px; }
  .plinko-stage { padding:16px 10px; }
  .plinko-stage #board { max-height:360px; }
  .wager-input { grid-template-columns:minmax(0,1fr) 144px; gap:8px; }
  .wager-actions button { height:44px; }
  .baccarat-table { min-height:390px; padding:20px 12px; }
  .baccarat-table .cards { min-height:112px; }
  .baccarat-table .card { width:68px; height:100px; }
  .betting-table { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .betting-table .bet-zone { display:flex; flex-direction:column; align-items:center; padding:12px 6px; }
  .round-sidebar { max-height:200px; }
  .game-heading .primary { font-size:12px; padding:8px 10px; }
}
@media(prefers-reduced-motion:reduce) { .game-turbo-track>span { transition:none; } }

html { background:transparent; }
.game-heading h1 { display:flex; align-items:center; gap:12px; }
.game-title-icon { width:25px; height:25px; flex:none; color:#bb8feb; }
.game-panel { box-shadow:none; }
.game-heading { height:auto; }
/* Cards use the shared DonutRoyal suit artwork. */
.baccarat-table .card { width:96px; height:138px; border-radius:9px; background:linear-gradient(145deg,#f9f6fa,#d9d1dc); border:1px solid #fff; color:#17121b; box-shadow:0 13px 30px #0008,inset 0 0 0 3px #ffffff88; }
.baccarat-table .card.red { color:#9d2345; }
.baccarat-table .card.third { transform:none; margin:0; animation-name:dealCard; }
.baccarat-table .card > span { font:750 17px/1.1 var(--game-font); }
.baccarat-table .card > .card-suit-art { inset:auto; top:50%; left:50%; transform:translate(-50%,-50%); font-size:0; width:52px; height:52px; background-image:url('/images/donutroyal-card-suits.png'); background-size:200% 200%; background-repeat:no-repeat; }
.card-suit-art.suit-0 { background-position:0 0; }
.card-suit-art.suit-1 { background-position:100% 0; }
.card-suit-art.suit-2 { background-position:100% 100%; }
.card-suit-art.suit-3 { background-position:0 100%; }
.baccarat-table .hand header b:empty { display:none; }
@media(max-width:760px) { .baccarat-table .card { width:76px; height:108px; } .baccarat-table .card > .card-suit-art { width:40px; height:40px; } }
:root { color-scheme:normal; }
input,select { color-scheme:dark; }
.game-heading { height:64px; padding:12px 20px; }
.chance { width:100%; margin:0; flex-direction:row; align-items:center; text-align:left; }
@media(max-width:760px) { .game-heading { height:56px; min-height:56px; padding:8px 16px; } }
.baccarat-table { position:relative; gap:12px; }
.baccarat-table:before { content:""; position:absolute; pointer-events:none; }
.baccarat-table .cards { height:138px; min-height:0; }
.baccarat-table .hand header { letter-spacing:0; min-height:28px; }
.baccarat-table .result { position:relative; font:600 12px/1.5 var(--game-font); }
.baccarat-support { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:16px; margin-top:16px; }
.baccarat-support > * { min-width:0; border:1px solid var(--game-line); border-radius:12px; background:var(--game-panel); }
@media(max-width:760px) {
  .baccarat-table .cards { height:108px; }
  .baccarat-table .table-rule { padding:10px 0; font-size:10px; }
  .baccarat-support { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:12px; }
}
@media(max-width:320px) { .wager-input { grid-template-columns:minmax(0,1fr); } }

/* Baccarat keeps the two hands beside each other at every screen size. */
.game-baccarat .game-layout { grid-template-columns:clamp(180px,21%,240px) minmax(0,1fr) clamp(168px,19%,220px); }
.game-baccarat .controls { padding:16px; }
.game-baccarat #arena { container-type:inline-size; }
.baccarat-table {
  --card-width:clamp(44px,16cqw,88px); --card-height:calc(var(--card-width) * 1.44);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr auto;
  gap:16px; min-height:420px; padding:24px 18px 18px;
  background:radial-gradient(ellipse at 50% 15%,#2a1938,#100d18 75%);
}
.baccarat-table:before { display:none; }
.baccarat-table .hand {
  display:flex; flex-direction:column; justify-content:center; gap:22px; padding:20px 6px;
  border:1px solid #285184; border-radius:12px; background:linear-gradient(160deg,#132c4877,#11142155);
}
.baccarat-table .banker-hand { border-color:#823546; background:linear-gradient(160deg,#44182577,#1c101855); }
.baccarat-table .hand header { min-height:32px; color:#80b9ff; font:700 13px/1.4 var(--game-font); letter-spacing:.06em; }
.baccarat-table .banker-hand header { color:#ff8197; }
.baccarat-table .hand header b { min-width:30px; margin:0; padding:5px 8px; border:1px solid #3673b6; background:#16395c; color:#e5f2ff; font:700 17px/1 var(--game-font); }
.baccarat-table .banker-hand header b { background:#572130; border-color:#a84158; color:#ffe6eb; }
.baccarat-table .cards {
  display:grid; grid-template-columns:repeat(2,var(--card-width)); grid-template-rows:var(--card-height) var(--card-width);
  column-gap:6px; row-gap:16px; height:auto; min-height:0; align-items:center; justify-content:center;
}
.baccarat-table .card { width:var(--card-width); height:var(--card-height); border-radius:7px; margin:0; }
.baccarat-table .card.third { grid-column:1/-1; grid-row:2; justify-self:center; transform:rotate(90deg); margin:0; animation-name:dealThird; }
.baccarat-table .card > span { font-size:clamp(12px,calc(var(--card-width) * .23),17px); line-height:1; }
.baccarat-table .card small { font-size:clamp(9px,calc(var(--card-width) * .17),12px); }
.baccarat-table .card > .card-suit-art { width:calc(var(--card-width) * .52); height:calc(var(--card-width) * .52); }
.baccarat-table .result { height:auto; min-height:20px; padding:4px 0 0; color:#cbbbd8; text-align:center; font:600 12px/1.5 var(--game-font); }
.betting-table .bet-zone { height:auto; min-height:60px; color:#f7f4ff; }
.betting-table .player-zone { background:#143b6b!important; border-color:#347dd0!important; }
.betting-table .banker-zone { background:#651f32!important; border-color:#c54c68!important; }
.betting-table .tie-zone { background:#15533a!important; border-color:#359e71!important; }
.betting-table .bet-zone:hover:not(:disabled) { filter:brightness(1.18); }
.betting-table .bet-zone > span { color:inherit; opacity:.8; }
.betting-table .winning-zone { box-shadow:inset 0 0 0 1px #ffffff65,0 0 18px #ffffff12; }
.game-baccarat .round-sidebar { width:100%; min-height:0; max-height:500px; align-self:start; border:1px solid var(--game-line); border-radius:12px; background:var(--game-panel); overflow:auto; }
.round-sidebar > header { min-height:54px; padding:12px; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--game-line); color:var(--game-text); letter-spacing:0; }
.round-sidebar > header strong { display:flex; align-items:center; gap:7px; font:650 12px/1.4 var(--game-font); }
.round-sidebar > header i { width:5px; height:5px; background:#5be89b; border-radius:50%; box-shadow:0 0 8px #5be89b50; }
.round-sidebar > header span { color:var(--game-muted); font:500 10px/1.4 var(--game-font); }
.round-total { display:flex; justify-content:space-between; gap:8px; margin:0 12px; padding:10px 0; }
.round-total > span { font:500 10px/1.4 var(--game-font); color:var(--game-muted); }
.round-total > strong { font:650 13px/1.4 var(--game-font); }
.round-sidebar #roundBets { max-height:370px; padding:0 10px 10px; }
.round-sidebar .empty { margin:0; padding:22px 4px; color:var(--game-muted); font:500 12px/1.5 var(--game-font); }
.round-sidebar .round-player { margin-top:6px; padding:9px 8px; border:1px solid #ffffff09; border-radius:7px; background:#ffffff06; }
.round-sidebar .round-player > div { flex-wrap:wrap; gap:6px; }
.round-sidebar .round-player b { font:600 12px/1.4 var(--game-font); overflow:hidden; text-overflow:ellipsis; }
.round-sidebar .round-player strong { font-size:11px; }
.baccarat-support { display:block; margin-top:16px; }
.baccarat-support .roads { padding:16px; }
@media(max-width:760px) {
  .game-baccarat .game-layout { display:flex; flex-direction:column; }
  .baccarat-table { min-height:330px; padding:16px 10px 12px; gap:10px; }
  .baccarat-table .hand { padding:16px 3px; gap:16px; }
  .baccarat-table .hand header { font-size:11px; gap:6px; }
  .baccarat-table .cards { height:auto; row-gap:12px; }
  .game-baccarat .round-sidebar { order:3; max-height:260px; }
  .round-sidebar > header { min-height:44px; }
  .round-sidebar .empty { padding:10px 4px; }
  .baccarat-support { margin-top:12px; }
}
@media(prefers-reduced-motion:reduce) { .baccarat-table .card { animation:none; } }