@font-face {font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/dm-sans-latin.woff2) format("woff2")}
:root {
  color-scheme: dark;
  --navy: #101c39;
  --blue: #285ef4;
  --violet: #6443e8;
  --lilac: #a2afff;
  --text: #f6f7fc;
  --muted: #b7c1dc;
  --border: #354469;
  --surface: #141e37;
  --ink: #080f20;
  --font: 'DM Sans', system-ui, sans-serif;
  --serif: 'DM Serif Text', Georgia, serif;
}

* {box-sizing:border-box}
[hidden] {display:none!important}
body {
  min-width:280px;
  min-height:100dvh;
  margin:0;
  color:var(--text);
  font:15px/1.45 var(--font);
  background:radial-gradient(ellipse at 52% 8%,#1c2b55 0%,#0e182f 47%,var(--ink) 88%);
}
button,input,a {font:inherit}
a,button,input {touch-action:manipulation}
button {cursor:pointer}
button:disabled {opacity:.51;cursor:default}
:where(button,input,a):focus-visible {outline:2px solid #c2ccff;outline-offset:3px}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.bar {background:#0b1326ef;border-bottom:1px solid #2d3b61}
.bar-inner {max-width:1240px;margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand {display:flex;align-items:center;gap:10px;font:700 21px/.98 var(--font);white-space:nowrap;letter-spacing:-.035em}
.brand-icon {width:40px;height:40px;display:grid;place-items:center;border:1px solid #6074d4;border-radius:12px;background:linear-gradient(140deg,#294b90,#49379b);font:28px/1 var(--serif)}
.brand div>span {display:block;color:#bac8ff;font-size:8px;letter-spacing:0;margin-top:6px}
.bar-actions,.buttons,.presets,.settings-actions {display:flex;align-items:center;gap:7px}
.quiet,.action {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:8px 13px;border:1px solid #3e4d78;border-radius:9px;
  color:var(--text);background:#202b48;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;
}
.quiet:hover:not(:disabled) {background:#303f69}
.action {min-height:46px;min-width:90px;padding-inline:15px;font-size:14px;font-weight:800}
.primary {background:linear-gradient(115deg,#244fd5,var(--violet));border-color:#8d8dea;box-shadow:0 4px 16px #3c4feb51}
.primary:hover:not(:disabled) {background:linear-gradient(115deg,#315fea,#7252ef)}
.danger {color:#ffd5e2}
main {max-width:1160px;margin:auto;padding:23px 24px 14px}
h1 {margin:0;font:750 clamp(37px,5vw,63px)/1.02 var(--font);letter-spacing:-.067em}
h2 {margin:0;font-size:22px;letter-spacing:-.035em}
.eyebrow {color:#c1c9ff;margin:0;font-size:10px;letter-spacing:.18em;font-weight:850}
.eyebrow span,footer i {display:inline-block;margin-right:6px;width:7px;height:7px;border-radius:50%;background:#91aeff;box-shadow:0 0 12px #557fffdb;vertical-align:1px}
.lobby-hero {
  position:relative;isolation:isolate;min-height:clamp(345px,46vw,475px);
  display:grid;align-items:center;overflow:hidden;border:1px solid #4c5b91;border-radius:23px;
  background:radial-gradient(ellipse at 77% 46%,#3d3897 0%,#202e61 43%,var(--navy) 74%);
  box-shadow:0 25px 65px #03071699;
}
.hero-content {padding:clamp(24px,5vw,64px);position:relative;z-index:2}
.hero-content h1 {font-size:clamp(57px,7.6vw,96px);margin:12px 0;color:#fff;line-height:.95}
.hero-content>p:not(.eyebrow) {max-width:310px;margin:0 0 24px;color:#d9e1f8;font-size:15px}
.enter>span {margin-left:20px}
.hero-art {position:absolute;right:1%;top:0;width:55%;height:100%;pointer-events:none}
.hero-orbit {position:absolute;inset:11% 1% 12%;border:1px solid #99a2ff50;border-radius:50%;box-shadow:0 0 0 15px #7789f51c,0 0 0 32px #7789f510;transform:rotate(-12deg)}
.hero-player {
  position:absolute;width:40%;aspect-ratio:.8;overflow:hidden;border-radius:20px;
  border:1px solid #939dff;transform:rotate(-11deg);box-shadow:0 15px 27px #080b319b;
  background:#0b1425;
}
.hero-player img {width:100%;height:100%;object-fit:cover;display:block}
.hero-left {left:9%;top:24%;opacity:.84}
.hero-right {left:52%;top:22%;transform:rotate(13deg);opacity:.85}
.hero-center {left:30%;top:15%;transform:rotate(-2deg);border-color:#c2c8ff}
.hero-chip,.chip-button,.small-chip,.flying-chip,.pot-chips i {
  border-radius:50%;border:2px dashed #dae1ff;background:#315de3;
  box-shadow:inset 0 0 0 2px #234899,inset 0 0 0 3px #b6c4ff,0 3px 4px #05091bc4;
}
.hero-chip {position:absolute;width:12%;aspect-ratio:1;bottom:15%;right:19%;border-width:5px;transform:rotate(-23deg);box-shadow:inset 0 0 0 5px #23489940,inset 0 0 0 7px #dae1ff,0 6px #172a75,0 12px 17px #060c2d}
.hero-chip-violet {right:11%;bottom:11%;background:var(--violet);box-shadow:inset 0 0 0 5px #4c35bd40,inset 0 0 0 7px #e0d4ff,0 6px #3b267d,0 12px 17px #060c2d}
.lobby-bottom {display:grid;grid-template-columns:1.1fr 1fr;gap:12px;margin-top:13px}
.lobby-panel {min-width:0;display:flex;align-items:center;gap:13px;padding:13px 16px;background:var(--navy);border:1px solid var(--border);border-radius:13px}
.lobby-panel p {margin:2px 0 0;color:var(--muted);font-size:12px}
.table-symbol {width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:10px;background:#283965;color:#c8d3ff;font-size:26px}
.lobby-stat {gap:0}
.lobby-stat div {flex:1;padding:0 13px}
.lobby-stat div+div {border-left:1px solid var(--border)}
.lobby-stat span,.facts span {color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em}
.lobby-stat span {display:block}
.lobby-stat strong,.facts strong {color:#e0e5ff;font-size:23px;font-variant-numeric:tabular-nums}
.intro {display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin:0 1px 12px}
.intro h1 {font-size:clamp(34px,4.8vw,51px)}
.table-nav {display:flex;align-items:center;gap:15px;margin-bottom:3px}
.back-link {padding:0 2px;min-height:32px;background:none;border:0;color:#c1cbef;font-size:12px;font-weight:750}
.back-link:hover {color:#fff}
.facts {display:flex;padding:8px 3px;background:#111b33e8;border:1px solid var(--border);border-radius:11px;white-space:nowrap}
.facts>div {display:grid;padding:1px 13px}
.facts>div+div {border-left:1px solid var(--border)}
.facts strong {font-size:18px}
.game {border:1px solid #3e4d78;border-radius:17px;overflow:hidden;background:#111b32;box-shadow:0 20px 55px #05091a9c}
.table-stage {display:flex;justify-content:center;padding:6px;background:#151f3a;border-bottom:1px solid #35436c}
.rounds {display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px;font-weight:650}
.rounds span {padding:3px 10px;border:1px solid #3c4b76;border-radius:20px}
.rounds .current {background:#a2afff;color:#141d45;border-color:#c2cdff;font-weight:850}
.table-wrap {position:relative;isolation:isolate;height:clamp(406px,46vw,500px);overflow:hidden;background:radial-gradient(ellipse at 50% 54%,#27386e,#101a31 66%,#0c1529)}
.rail {
  position:absolute;inset:11% 9% 12%;border-radius:45% / 50%;padding:12px;
  background:linear-gradient(149deg,#6c81d0,#303d75 22%,#17213e 43%,#47478a 73%,#7f70c0);
  border:1px solid #8498eb;box-shadow:0 16px 24px #030a1fbb,inset 0 0 0 4px #151b3b8c;
}
.felt {height:100%;position:relative;border-radius:inherit;overflow:hidden;border:1px solid #6379c8;background:radial-gradient(ellipse at 51% 33%,#334e9b,#23396f 58%,#17294f);box-shadow:inset 0 0 40px #080f34a0}
.felt:after {content:"";position:absolute;inset:0;opacity:.26;background:repeating-linear-gradient(125deg,#a9b8ee11 0 1px,transparent 1px 4px,#121f4c 4px 5px,transparent 5px 8px)}
.felt-line {position:absolute;inset:10% 7%;border:1px solid #92a5e77a;border-radius:inherit}
.felt-mark {position:absolute;inset:auto 0 13%;color:#b9cbff49;font-size:10px;text-align:center;letter-spacing:.28em;font-weight:800}
.community {position:absolute;top:51%;left:50%;z-index:2;transform:translate(-50%,-50%);text-align:center}
.board,.hole {display:flex;justify-content:center;gap:6px}
.card {
  width:clamp(42px,5vw,61px);height:clamp(54px,6.4vw,79px);border-radius:8px;
  background:linear-gradient(150deg,#fff,#e5eafe);color:#141f40;border:1px solid #fafbff;box-shadow:0 4px 10px #02071978;
  display:grid;place-content:center;justify-items:center;font:700 clamp(21px,3vw,31px)/.93 var(--serif);
}
.card span {font-size:.81em;margin-top:3px}
.card.red {color:#a92249}
.card.empty {background:#12234c65;border:1px dashed #bdcafa85;box-shadow:none}
.card.back {background:repeating-linear-gradient(48deg,#495d9d 0 2px,#233561 3px 6px);color:#d7e1ff;border:1px solid #a5b5fb}
.card-arrives {animation:card-arrives .27s ease-out both}
@keyframes card-arrives {from{transform:translateY(-8px) scale(.94);opacity:.2}to{transform:none;opacity:1}}
.pot {display:inline-flex;align-items:center;gap:8px;border:1px solid #92a3ed;background:#14234dea;padding:5px 11px;border-radius:25px;margin-top:11px;color:#f0f2ff;font-size:12px;font-weight:850;white-space:nowrap}
.pot.paid {background:#312865;border-color:#c1b5ff}
.pot-chips {display:inline-flex;align-items:center;margin-right:2px;padding-left:3px}
.pot-chips i,.small-chip {width:13px;height:13px;display:block;border-width:1px;flex:none}
.pot-chips i+i {margin-left:-6px;background:#6b4ce0}
.pot-chips i:last-child {background:#748ef9}
.seat {position:absolute;left:var(--x);top:var(--y);z-index:3;transform:translate(-50%,-50%);width:132px;text-align:center}
.seat-0 {--x:50%;--y:80%;width:149px}
.seat-1 {--x:17%;--y:72%}
.seat-2 {--x:18%;--y:30%}
.seat-3 {--x:50%;--y:19%}
.seat-4 {--x:82%;--y:30%}
.seat-5 {--x:83%;--y:72%}
.seat-portrait {width:96px;height:96px;margin:0 auto -10px;overflow:hidden;border-radius:20px 20px 9px 9px;border:1px solid #7687ba;background:#0b1425;box-shadow:0 5px 12px #060b2599}
.portrait {width:100%;height:100%;display:block;object-fit:cover;object-position:center 22%}
.seat-body {position:relative;min-height:49px;padding:5px 6px;background:linear-gradient(140deg,#1e2b4b,#131d38);border:1px solid #586b9e;border-radius:9px;box-shadow:0 6px 12px #02082080}
.player {color:#f8f9ff;font-size:13px;font-weight:800;line-height:1.15}
.stack {color:#d1dcff;font-weight:850;font-size:14px;line-height:1.26;font-variant-numeric:tabular-nums}
.last {display:block;min-height:11px;color:#d6def7;white-space:nowrap;font-size:10px;line-height:1.08}
.seat.active {z-index:4}
.active .seat-body,.active .seat-portrait {border-color:#aec3ff;box-shadow:0 0 0 2px #a3b4ff63,0 0 24px #688bff94}
.active .seat-body {background:linear-gradient(140deg,#344c92,#282758)}
.winner .seat-body,.winner .seat-portrait {border-color:#cdc3ff;box-shadow:0 0 0 2px #af9eff65,0 0 22px #9677ff9c}
.winner .seat-body {background:linear-gradient(140deg,#4f3e97,#2c3c76)}
.discarded .seat-portrait,.discarded .hole {opacity:.52}
.dealer {position:absolute;right:-6px;top:-8px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#e0e7ff;color:#192442;font-size:10px;font-weight:900;border:1px solid #666fa7}
.seat-0 .dealer,.seat-1 .dealer,.seat-2 .dealer,.seat-3 .dealer {left:-6px;right:auto}
.hole {position:absolute;top:56px;left:calc(50% + 32px);gap:2px;transform:rotate(4deg);z-index:1}
.hole:empty {display:none}
.hole .card {width:24px;height:33px;border-radius:4px;font-size:14px}
.hole .card span {margin-top:0}
.seat-4 .hole,.seat-5 .hole {left:auto;right:calc(50% + 32px);transform:rotate(-4deg)}
.seat-0 .hole {top:40px;left:calc(50% + 31px)}
.seat-0 .hole .card {width:34px;height:48px;font-size:19px}
.bet-tag {
  position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:4px;padding:2px 5px;border:1px solid #6375a0;border-radius:8px;
  color:#e0e8ff;background:#172746;font-size:9px;font-weight:850;line-height:1.1;white-space:nowrap;
}
.bet-tag .small-chip {width:9px;height:9px}
#chip-effects {position:absolute;inset:0;z-index:6;pointer-events:none}
.flying-chip {position:absolute;width:18px;height:18px}
.flying-chip.payout-chip {background:#7756ed}
.console {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,490px);align-items:center;gap:16px;
  min-height:83px;padding:11px 16px;background:#151f3b;border-top:1px solid #394871;
}
#status {font-weight:850;font-size:17px}
#status.your-turn {color:#d4ddff}
#hint {margin-top:3px;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.controls {display:grid;gap:8px;justify-items:end}
.controls .buttons {justify-content:flex-end}
.fold {background:#302b43;border-color:#685d80}
.fold:hover {background:#413858}
.call {background:#203b70;border-color:#667ebd}
.call:hover {background:#2d4d88}
#next {min-width:140px}
.raise-box {display:grid;gap:3px;width:100%;padding:8px 9px;background:#101a32;border:1px solid #42517a;border-radius:11px}
.bet-head,.bet-tools {display:flex;align-items:center;gap:8px}
.bet-head label {font-size:12px;color:#d0d9f5;font-weight:650}
#amount {width:70px;height:37px;padding:6px;background:#1d2a4b;color:#fff;border:1px solid #657ab7;border-radius:7px;font-weight:850}
#bet-cost {margin-left:auto;font-size:12px;color:#dee5ff;text-align:right}
#amount-slider {width:100%;height:25px;margin:0;accent-color:var(--lilac);cursor:pointer}
.bet-tools {justify-content:space-between}
.chip-tray {display:flex;align-items:center;gap:6px}
.chip-button {width:36px;height:36px;display:grid;place-items:center;padding:0;color:#fff;font-size:11px;font-weight:850}
.chip-button:hover:not(:disabled) {filter:brightness(1.22)}
.chip-25 {background:#6443e8;box-shadow:inset 0 0 0 2px #4a32b3,inset 0 0 0 3px #e1d5ff,0 3px 4px #05091bc4}
.chip-100 {background:#354268}
.presets .quiet {min-height:34px;padding:4px 8px;font-size:11px}
footer {display:flex;justify-content:space-between;gap:10px;margin:11px 1px 0;color:var(--muted);font-size:11px}
footer span:last-child {white-space:nowrap}
dialog {width:min(535px,calc(100% - 22px));padding:18px;color:var(--text);border:1px solid #6379b2;border-radius:16px;background:#172342}
dialog::backdrop {background:#060c1de0}
.dialog-head {display:flex;align-items:center;justify-content:space-between;gap:9px}
dialog p,dd {color:#d5def5}
dt {font-weight:800} dd {margin:1px 0 8px}
.settings-actions {flex-wrap:wrap}
.export-status:empty {display:none}
.action-list {padding:0;margin:12px 0 0;list-style:none;max-height:min(60vh,410px);overflow:auto}
.action-list li {display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #465786;padding:7px 3px;color:#d9e3fb}
.action-list li strong {color:#cbd1ff}

@media(max-width:720px) {
  .bar-inner {padding:8px 10px}
  .brand {font-size:18px;gap:6px}
  .brand-icon {width:34px;height:34px;font-size:23px}
  .bar-actions {gap:5px}
  .bar-actions .quiet {font-size:11px;padding-inline:7px}
  main {padding:12px 9px 10px}
  .hero-content {padding:24px 15px}
  .hero-content h1 {font-size:clamp(45px,12vw,69px)}
  .hero-content>p:not(.eyebrow) {max-width:260px;font-size:14px}
  .lobby-hero {min-height:400px;align-items:end;border-radius:15px}
  .hero-art {width:79%;height:64%;right:-9%;top:0;opacity:.84}
  .lobby-hero:after {content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(28deg,#142452fc 17%,#14245274 58%,transparent 78%)}
  .hero-chip {border-width:3px}
  .lobby-bottom {grid-template-columns:1fr;gap:7px;margin-top:7px}
  .lobby-panel {padding:8px 10px}
  .lobby-panel h2 {font-size:19px}
  .table-symbol {width:33px;height:33px;font-size:22px}
  .lobby-stat strong {font-size:19px}
  .intro {display:block;margin-bottom:7px}
  .intro h1 {font-size:35px}
  .table-nav {margin-bottom:1px}
  .facts {justify-content:space-around;padding:3px;margin-top:7px}
  .facts>div {display:flex;align-items:baseline;gap:5px;padding:1px 6px}
  .facts>div+div {border:0}
  .facts span {font-size:8px}
  .facts strong {font-size:13px}
  .game {border-radius:13px}
  .table-stage {padding:4px}
  .rounds {font-size:9px}
  .rounds span {padding:2px 8px}
  .table-wrap {height:clamp(336px,86vw,417px)}
  .rail {inset:9% 3% 10%;padding:7px}
  .felt-mark {font-size:8px;bottom:23%}
  .community {top:50%}
  .card {width:clamp(36px,9vw,52px);height:clamp(49px,12.2vw,67px);font-size:21px;border-radius:6px}
  .board {gap:4px}
  .pot {margin-top:6px;padding:4px 8px;font-size:10px}
  .seat {width:76px}
  .seat-0 {width:87px;--y:80%}
  .seat-1 {--x:16%;--y:73%}
  .seat-2 {--x:17%;--y:16%}
  .seat-3 {--y:17%}
  .seat-4 {--x:83%;--y:16%}
  .seat-5 {--x:84%;--y:73%}
  .seat-portrait {width:64px;height:64px;border-radius:12px 12px 6px 6px;margin-bottom:-6px}
  .seat-body {padding:4px 2px;min-height:43px}
  .player {font-size:11px}
  .stack {font-size:11px}
  .last {font-size:8px}
  .dealer {width:16px;height:16px;font-size:8px;right:-4px}
  .hole {top:42px;left:calc(50% + 17px)}
  .hole .card {width:14px;height:18px;font-size:9px;border-radius:3px}
  .seat-4 .hole,.seat-1 .hole {left:auto;right:calc(50% + 17px);transform:rotate(-4deg)}
  .seat-5 .hole {right:auto;left:calc(50% + 17px);transform:rotate(4deg)}
  .seat-1 .dealer {left:auto;right:-4px}
  .seat-5 .dealer {left:-4px;right:auto}
  .seat-0 .hole {top:22px;left:calc(50% + 15px)}
  .seat-0 .hole .card {width:24px;height:34px;font-size:14px}
  .seat-2 .bet-tag {left:4px;transform:none}
  .seat-4 .bet-tag {left:auto;right:4px;transform:none}
  .console {display:block;padding:8px 8px 9px}
  .message {margin-bottom:7px}
  #status {font-size:15px}
  .controls {grid-template-columns:minmax(0,1fr);justify-items:stretch}
  .controls .buttons {width:100%}
  .controls .action {min-width:0;flex:1;padding:7px;font-size:13px}
  .bet-head,.bet-tools {gap:5px}
  .raise-box {padding:6px}
  #amount {height:34px;width:62px;font-size:16px}
  .presets {gap:4px}
  .presets .quiet {min-height:38px;padding-inline:6px}
  .chip-button {width:42px;height:42px}
  footer {font-size:9px;margin-top:7px}
}
@media(max-width:350px) {
  .bar-inner {gap:6px;padding-inline:7px}
  .brand-icon {width:30px;height:30px}
  .seat-0 .hole {left:calc(50% + 15px)}
  .seat-0 .hole .card {width:20px;height:31px}
  .chip-tray {gap:3px}
  .chip-button {width:35px;height:35px}
  .presets .quiet {padding-inline:4px}
}
@media(prefers-reduced-motion:reduce) {
  .card-arrives {animation:none}
}

/* Keep the playing controls away from the host app's bottom toolbar. */
@media (max-height:1180px), (pointer:coarse) {
  .game {display:flex;flex-direction:column;overflow:clip}
  .console {order:-1;border-top:0;border-bottom:1px solid #394871}
}
@media (min-width:950px) and (max-height:1180px), (min-width:950px) and (pointer:coarse) {
  .console {grid-template-columns:minmax(140px,1fr) minmax(0,760px);gap:12px}
  .controls {grid-template-columns:minmax(280px,1fr) auto;align-items:center;justify-items:stretch}
  .controls .action {min-width:76px;padding-inline:11px}
  .controls .buttons {white-space:nowrap}
}
@media (min-width:721px) and (max-height:900px) {
  .table-wrap {height:clamp(290px,calc(100svh - 435px),415px)}
  .seat-portrait {width:72px;height:72px;margin-bottom:-8px}
  .seat-0 {--y:76%}
  .seat-3 {--y:20%}
  .hole {top:41px;left:calc(50% + 26px)}
  .seat-4 .hole,.seat-5 .hole {right:calc(50% + 26px)}
  .seat-0 .hole {top:24px;left:calc(50% + 26px)}
  .seat-0 .hole .card {width:28px;height:39px;font-size:16px}
  .board .card {width:46px;height:59px;font-size:24px}
  .pot {margin-top:6px}
  .console {padding-block:8px}
}
/* On short phones the cards can scroll while the actions stay in view. */
@media (max-width:720px) and (max-height:760px) {
  .console {position:sticky;top:env(safe-area-inset-top,0px);z-index:8}
}

.lobby-actions {display:flex;flex-wrap:wrap;gap:8px}
.roulette-tile {margin-top:12px}
.roulette-tile>span:nth-child(2)>span {display:block;color:var(--muted);font-size:12px}
.roulette-game {border:1px solid #405387;border-radius:17px;background:#111b36;box-shadow:0 19px 48px #060a1e9c}
.roulette-controls {position:relative;z-index:5;padding:12px 15px;background:#192545;border-radius:16px 16px 0 0;border-bottom:1px solid #43517d}
.roulette-control-row,.roulette-secondary {display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.roulette-tray {margin-right:6px}
.roulette-tray .chip-button {width:42px;height:42px}
.roulette-tray .chip-button[aria-pressed=true] {outline:2px solid #e7ecff;outline-offset:2px}
.roulette-spin {margin-left:auto}
#roulette-status {min-height:1.45em;margin:8px 0 0;color:#dbe3ff;font-size:13px;font-weight:650}
.roulette-floor {display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.8fr);align-items:center;gap:22px;padding:20px 18px 23px;background:radial-gradient(ellipse at 18% 49%,#29397580 0%,transparent 60%);border-radius:0 0 17px 17px}
.roulette-wheel-area {display:grid;justify-items:center;align-content:center;min-width:0;gap:8px}
.roulette-wheel {position:relative;width:min(100%,340px);aspect-ratio:1;container-type:inline-size;border-radius:50%;border:1px solid #94a7f6;background:linear-gradient(153deg,#6f81ce,#2b366d 30%,#0d1730 58%,#575b98);box-shadow:0 13px 30px #070a20b3,inset 0 0 0 5px #a5b4ff21}
.roulette-spinner {position:absolute;inset:7%;border:2px solid #98a6eb;border-radius:50%;background:var(--wheel-pockets,#29375f);box-shadow:0 0 0 3px #0e193b,inset 0 0 0 3px #10173236}
.roulette-wheel-slots {position:absolute;inset:0;border-radius:50%}
.roulette-wheel-slots span {position:absolute;inset:0;display:flex;justify-content:center;padding-top:3.2cqi;transform:rotate(var(--angle));color:#fff;font-size:clamp(6px,3.3cqi,11px);font-weight:850;text-shadow:0 1px 3px #000}
.roulette-wheel-hub {position:absolute;inset:23%;display:grid;place-items:center;border-radius:50%;border:2px solid #a6b5fc;background:radial-gradient(circle,#384e9c 5%,#242f65 28%,#0d1730 67%,#6578c1 69%,#1d2a5b 72%);box-shadow:0 0 0 7px #111b44,inset 0 0 0 6px #a2afff20;color:#c6d2ff;font-size:clamp(18px,11cqi,40px)}
.roulette-wheel-hub span {transform:translateY(-.045em)}
.roulette-pointer {position:absolute;width:14px;height:14px;left:50%;top:8%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 36% 25%,#fff,#e3eaff 50%,#9fafef);box-shadow:0 0 0 2px #17213f,0 2px 6px #000b}
.roulette-latest {min-height:29px;padding:4px 12px;border:1px solid #6473aa;border-radius:20px;color:#f8f9ff;background:#203058;font-size:13px;text-align:center}
.roulette-results {display:flex;justify-content:center;flex-wrap:wrap;gap:4px;max-width:270px}
.roulette-result {display:grid;place-items:center;width:24px;height:24px;border:1px solid #7180b4;border-radius:50%;color:#fff;font-size:11px;font-weight:850}
.roulette-layout {min-width:0}
.roulette-layout h2 {margin-bottom:10px}
.roulette-inside {display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px}
.roulette-zero .roulette-bet {width:100%;height:100%}
.roulette-numbers {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(3,1fr);grid-auto-flow:column;gap:4px}
.roulette-outside,.roulette-groups {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:5px}
.roulette-bet {position:relative;display:grid;place-items:center;min-width:0;min-height:43px;padding:3px 2px;border:1px solid #52608f;border-radius:6px;background:#273a66;color:#f6f8ff;font-weight:820;font-size:13px}
.roulette-bet:disabled {cursor:default;opacity:.72}
.roulette-bet:hover:not(:disabled) {filter:brightness(1.29)}
.roulette-bet.red,.roulette-result.red,.roulette-latest.red {background:#9f3156;border-color:#d27899}
.roulette-bet.black,.roulette-result.black,.roulette-latest.black {background:#0b1429}
.roulette-bet.green,.roulette-result.green,.roulette-latest.green {background:#146653;border-color:#58aa94}
.roulette-bet-chip {position:absolute;right:0;bottom:0;min-width:18px;padding:1px 3px;border:1px dashed #e3e8ff;border-radius:10px;background:#533ac8;color:#fff;font-size:9px;font-variant-numeric:tabular-nums;z-index:1}
.roulette-bet:has(.roulette-bet-chip:not([hidden])) {padding-bottom:13px;border-color:#b6c3ff}
#roulette-sound[aria-pressed=true],#poker-sound[aria-pressed=true] {color:#dbe1ff}
#roulette-sound[aria-pressed=false],#poker-sound[aria-pressed=false] {color:#b7c1dc;text-decoration:underline dotted;text-underline-offset:3px}

.seat-portrait {transform-origin:50% 78%;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,opacity .22s ease}
.seat.active .seat-portrait {transform:translateY(-3px) scale(1.035)}
.seat.discarded .seat-portrait {transform:translateY(2px) rotate(-2deg) scale(.97)}
.seat .portrait {animation:portrait-breathe 4.4s ease-in-out infinite alternate;animation-delay:calc(var(--seat-index,0) * -.47s)}
.seat.active .portrait {animation-duration:2.3s}
.seat.winner .seat-portrait {animation:portrait-win .6s ease-out both}
@keyframes portrait-breathe {from{transform:scale(1.015)}to{transform:translateY(-1px) scale(1.065)}}
@keyframes portrait-win {0%,100%{transform:none} 22%{transform:translateY(-5px) rotate(-2deg) scale(1.06)} 56%{transform:translateY(-2px) rotate(2deg) scale(1.035)}}
@media (max-width:900px) {
  .roulette-floor {gap:13px;padding-inline:12px}
  .roulette-inside {grid-template-columns:30px minmax(0,1fr)}
  .roulette-bet {min-height:40px;font-size:12px}
}
@media (max-width:720px) {
  .lobby-actions {gap:6px}
  .lobby-actions .action {font-size:12px;padding-inline:9px}
  .lobby-actions .enter>span {margin-left:6px}
  .roulette-tile {margin-top:7px}
  .roulette .intro h1 {font-size:clamp(26px,7.7vw,35px)}
  .roulette-controls {position:sticky;top:env(safe-area-inset-top,0px);padding:8px;border-radius:13px 13px 0 0}
  .roulette-control-row {gap:6px}
  .roulette-tray {margin:0}
  .roulette-tray .chip-button {width:34px;height:34px}
  .roulette-secondary {order:3;width:100%;gap:5px}
  .roulette-secondary .quiet {flex:1;min-height:38px;font-size:11px;padding-inline:5px}
  .roulette-spin {min-width:0;min-height:40px;font-size:12px;padding-inline:8px}
  .roulette-floor {grid-template-columns:1fr;gap:10px;padding:10px}
  .roulette-wheel {width:min(58%,210px)}
  .roulette-wheel-area {gap:4px}
  .roulette-pointer {width:10px;height:10px}
  .roulette-layout h2 {margin-bottom:6px;font-size:17px}
  .roulette-inside {grid-template-columns:1fr;gap:4px}
  .roulette-zero .roulette-bet {min-height:34px}
  .roulette-numbers {grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row}
  .roulette-outside,.roulette-groups {grid-template-columns:repeat(3,minmax(0,1fr))}
  .roulette-bet {min-height:39px}
  #roulette-status {font-size:12px;margin-top:4px}
}
@media (max-width:350px) {
  .roulette-tray {gap:3px}
  .roulette-tray .chip-button {width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce) {
  .seat .portrait,.seat.winner .seat-portrait {animation:none}
  .seat .seat-portrait {transition:none;transform:none}
}

.roulette-ball-track {position:absolute;inset:0}
.roulette-wheel.is-spinning .roulette-ball-track {animation:roulette-ball 2.5s cubic-bezier(.09,.69,.22,1) both}
@keyframes roulette-ball {from{transform:rotate(0)}to{transform:rotate(-1800deg)}}
@media (prefers-reduced-motion:reduce) {
  .roulette-wheel.is-spinning .roulette-ball-track {animation:none}
}