:root{color-scheme:dark;--bg:#090b10;--panel:#11151d;--panel2:#171c26;--line:#2a3240;--text:#f5f7fb;--muted:#8d98aa;--gold:#d7b56d;--red:#d44a50;--green:#2ca36b}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}.app{min-height:100vh}
.top{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#0c0f15;position:sticky;top:0;z-index:5}.brand{display:flex;gap:12px;align-items:center}.chip{width:36px;height:36px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;color:var(--gold);font-weight:800}.brand b{letter-spacing:.08em}.brand span{color:var(--muted);font-size:12px}.tabs{display:flex;gap:4px}.tabs button{border:0;background:transparent;color:var(--muted);padding:10px 14px;border-radius:8px}.tabs button.active{background:var(--panel2);color:var(--text)}
main{max-width:1320px;margin:auto;padding:28px}.grid,.adminGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}.cardhead{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.cardhead h2{font-size:15px;margin:0}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.hero{padding:28px;min-height:540px}.heroTop{display:flex;justify-content:space-between;align-items:start;margin-bottom:18px}.hero h1{margin:5px 0}.round{font-size:13px;color:var(--muted)}.status{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #394252;border-radius:999px;font-size:12px}.dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.wheelWrap{display:grid;place-items:center;padding:8px 0 22px;position:relative}.wheel{width:min(390px,72vw);aspect-ratio:1;border-radius:50%;background:conic-gradient(#c43e46 0 10deg,#151a22 10deg 20deg,#c43e46 20deg 30deg,#151a22 30deg 40deg,#c43e46 40deg 50deg,#151a22 50deg 60deg,#c43e46 60deg 70deg,#151a22 70deg 80deg,#c43e46 80deg 90deg,#151a22 90deg 100deg,#c43e46 100deg 110deg,#151a22 110deg 120deg,#c43e46 120deg 130deg,#151a22 130deg 140deg,#c43e46 140deg 150deg,#151a22 150deg 160deg,#c43e46 160deg 170deg,#151a22 170deg 180deg,#c43e46 180deg 190deg,#151a22 190deg 200deg,#c43e46 200deg 210deg,#151a22 210deg 220deg,#c43e46 220deg 230deg,#151a22 230deg 240deg,#c43e46 240deg 250deg,#151a22 250deg 260deg,#c43e46 260deg 270deg,#151a22 270deg 280deg,#c43e46 280deg 290deg,#151a22 290deg 300deg,#c43e46 300deg 310deg,#151a22 310deg 320deg,#c43e46 320deg 330deg,#151a22 330deg 340deg,#c43e46 340deg 350deg,#151a22 350deg 360deg);padding:16px;box-shadow:0 0 0 8px #0d1118,0 18px 50px #0008;transition:transform 3s cubic-bezier(.15,.72,.15,1)}.wheelInner{height:100%;border-radius:50%;border:8px solid #0d1118;background:radial-gradient(circle,#222a36 0 22%,#11161f 23% 100%);display:grid;place-items:center}.result{width:118px;height:118px;border-radius:50%;background:#0c1016;border:2px solid var(--gold);display:grid;place-items:center}.result strong{font-size:48px}.result small{display:block;text-align:center;color:var(--muted);margin-top:-26px}.pointer{position:absolute;z-index:2;left:50%;top:8px;margin:0;transform:translateX(-50%);border-left:9px solid transparent;border-right:9px solid transparent;border-top:18px solid var(--gold)}
.wheel.isSpinning{animation:roulette-wheel-spin 1.1s linear infinite;transition:none}
@keyframes roulette-wheel-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wheel.isSpinning{animation-duration:3s}}
.result.isRed{background:#8e2730}.result.isBlack{background:#151a22}
.chipTray{display:flex;justify-content:center;align-items:center;gap:clamp(4px,1.3vw,10px);flex-wrap:wrap;padding:3px 0 12px}
.chipOption{width:clamp(38px,6vw,48px);aspect-ratio:1;padding:0;border-radius:50%;border:3px dashed #f5e8c6;color:#fff;font-size:clamp(9px,1.5vw,12px);font-weight:800;text-shadow:0 1px 2px #000;background:#355b8c;box-shadow:inset 0 0 0 2px #ffffff55,0 2px 4px #0008;transition:transform .12s,box-shadow .12s}
.chipOption:hover{transform:translateY(-2px)}.chipOption[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--gold),0 3px 8px #0009;transform:translateY(-2px)}
.chipOption.chip1{background:#b93c43}.chipOption.chip5{background:#2864a0}.chipOption.chip25{background:#28704d}.chipOption.chip100{background:#222831}.chipOption.chip500{background:#714891}.chipOption.chip1000{background:#b28c36;color:#17130b;text-shadow:none}
.hitTarget.hasBetMarker{z-index:5;overflow:visible;opacity:1;background:transparent;outline:0}
.boardBetMarker{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:31px;height:15px;padding:0 3px;border:1px solid #fff4cf;border-radius:999px;background:var(--gold);color:#16130d;font-size:8px;font-weight:900;line-height:1;white-space:nowrap;box-shadow:0 1px 4px #000a;pointer-events:none}
.controls{display:flex;justify-content:center;gap:10px}.controls.left{justify-content:flex-start}.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:11px 16px;border-radius:9px;font-weight:700}.btn.primary{background:var(--gold);color:#17130b;border-color:var(--gold)}.btn.danger{background:#3a171a;border-color:#6b272c}
.betPanel{padding-bottom:18px}.balance{font-size:32px;font-weight:800}.balance span{font-size:13px;color:var(--muted);font-weight:500}.teamrow{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.teamName{display:flex;gap:10px;align-items:center}.swatch{width:11px;height:11px;border-radius:50%;background:#5b8def}.bets{padding:14px 20px}.betrow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 0}.betrow+.betrow{border-top:1px solid #202631}.step{display:flex;gap:5px}.mini{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:#0d1118;color:var(--text)}
.activity{margin-top:18px}.activityList{padding:8px 20px 14px}.event{display:flex;justify-content:space-between;padding:10px 0;color:#c5ccd8;font-size:13px}.event span{color:var(--muted)}
.admin{display:none}.admin.show{display:block}.player.hide{display:none}.form{padding:20px}.field{margin-bottom:14px}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}.field input{width:100%;background:#0c1016;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:10px}.teamManage{padding:0 20px 20px}.manageRow{display:grid;grid-template-columns:1fr 100px auto;gap:8px;margin-top:8px}.tag{display:inline-flex;padding:4px 8px;border-radius:999px;background:#202735;color:#bfc7d5;font-size:11px}.roundControl{margin-top:20px}
.display{display:none}.display.show{display:block}.display .stage{min-height:calc(100vh - 68px);display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:center;padding:40px}.displayWheel{display:grid;place-items:center}.bigNumber{font-size:150px;font-weight:900;line-height:.9}.bigLabel{font-size:28px;color:var(--gold);text-transform:uppercase;letter-spacing:.16em}.displayStatus{margin-top:24px;color:var(--muted)}.scoreboard{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}.score{padding:20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.score:last-child{border:0}.score strong{font-size:24px}
.toast{position:fixed;right:20px;bottom:20px;background:#eef2f8;color:#10141b;padding:12px 16px;border-radius:10px;box-shadow:0 10px 30px #0008;transform:translateY(80px);opacity:0;transition:.25s;z-index:20}.toast.on{transform:none;opacity:1}
.boardCard{margin-top:20px}.rouletteBoard{padding:14px;background:#0b1510}.betTimer{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin-bottom:10px;background:#111a16;border:1px solid #29382f;border-radius:10px}.timerValue{font-size:24px;font-weight:900;color:var(--gold)}.timerValue.locked{color:var(--red)}.tableGrid{display:grid;grid-template-columns:repeat(12,minmax(28px,1fr));gap:7px;cursor:crosshair}.num{min-height:38px;border:1px solid #344137;background:#15181d;color:#fff;font-weight:800;border-radius:4px;position:relative}.num.red{background:#8e2730}.outsideGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:3px}.outside{min-height:38px;border:1px solid #344137;background:#172019;color:#e9eee9;font-weight:750;border-radius:4px}.outside.red{background:#8e2730}.outside.black{background:#15181d}.chipMark{position:absolute;right:3px;top:3px;font-size:9px;color:var(--gold)}.betHint{margin-top:10px;color:var(--muted);font-size:11px}
@media(max-width:900px){.grid,.adminGrid,.display .stage{grid-template-columns:1fr}.display .stage{padding:24px}.scoreboard{order:2}.top{padding:0 15px}.brand span{display:none}.tableGrid{grid-template-columns:repeat(6,minmax(32px,1fr))}.outsideGrid{grid-template-columns:repeat(3,1fr)}}

/* Explicit targets keep inside bets tied to the printed table boundaries. */
.tableGrid{grid-template-columns:repeat(12,minmax(34px,1fr));grid-template-rows:repeat(3,52px);gap:0;padding:5px 18px 5px 34px;background:#164b36;border:2px solid #8a7244;position:relative}
.boardCell{position:relative;min-width:0;border:1px solid #98a789}
.num{width:100%;height:100%;min-height:0;border:0;border-radius:0;padding:0}
.num.red{background:#a82e37}.num.black{background:#111619}
.hitTarget{position:absolute;z-index:2;padding:0;border:0;background:transparent;opacity:.01}
.hitTarget:hover,.hitTarget:focus-visible{opacity:.7;background:var(--gold);outline:1px solid #fff}
.edge{width:34px;height:12px}.topEdge{top:-6px;left:calc(50% - 17px)}.bottomEdge{bottom:-6px;left:calc(50% - 17px)}.leftEdge{left:-6px;top:calc(50% - 17px);width:12px;height:34px}.rightEdge{right:-6px;top:calc(50% - 17px);width:12px;height:34px}
.cornerTarget{width:12px;height:12px;border-radius:50%;z-index:3}.cornerTarget.tl{top:-6px;left:-6px}.cornerTarget.tr{top:-6px;right:-6px}.cornerTarget.bl{bottom:-6px;left:-6px}.cornerTarget.br{bottom:-6px;right:-6px}
.streetTarget{left:-30px;top:calc(50% - 15px);width:30px;height:30px;background:transparent;border:1px solid transparent;opacity:0}
.sixTarget{right:-17px;top:calc(50% - 15px);width:15px;height:30px;background:transparent;border:1px solid transparent;opacity:0}
.chipMark{z-index:4;pointer-events:none}.emptyBets{padding:10px 0;color:var(--muted)}.betrow>div:first-child{font-size:13px}
@media(max-width:900px){.tableGrid{grid-template-columns:repeat(12,minmax(27px,1fr));grid-template-rows:repeat(3,45px);padding-left:29px;padding-right:15px;overflow-x:auto}.streetTarget{left:-27px;width:27px}}

@media(max-width:600px){
  .top{height:auto;min-height:68px;padding:10px 14px;gap:8px;flex-wrap:wrap}
  .brand{min-width:0;flex:1}.brand b{font-size:13px}.tabs{width:100%;justify-content:stretch}.tabs button{flex:1;padding:9px 7px}
  main{padding:16px 12px}.grid,.adminGrid{gap:14px}.hero{padding:20px 16px;min-height:0}.heroTop{gap:10px}.heroTop .status{white-space:nowrap}
  .wheel{width:min(330px,78vw)}.controls{gap:8px}.controls .btn{padding:10px 11px;font-size:12px}
  .cardhead{padding:15px}.cardhead .tag{font-size:9px}.balance{font-size:25px}.balance span{font-size:11px}.teamrow{padding:12px 15px;gap:8px;flex-wrap:wrap}.bets{padding:10px 15px}
  .tableGrid{width:100%;min-width:0;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(3,44px);padding:4px 8px 4px 18px;overflow:visible}
  .outsideGrid{width:100%;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr))}.rouletteBoard{width:100%;min-width:0;overflow-x:visible}
  .betHint{width:auto;max-width:100%;padding:4px 2px}
  .manageRow{grid-template-columns:minmax(0,1fr) 78px auto;gap:6px}.manageRow input{min-width:0;padding:8px;font-size:13px}.manageRow .btn{padding:8px;font-size:11px}
  .roundControl .controls{flex-wrap:wrap}.roundControl .controls .btn{flex:1 1 40%}
  .display .stage{min-height:calc(100dvh - 108px);padding:24px 12px;gap:22px}.bigNumber{font-size:clamp(96px,32vw,138px)}.bigLabel{font-size:23px}.score{padding:16px}.score strong{font-size:20px}
  .toast{right:12px;bottom:12px;left:12px;text-align:center}
}
@media(hover:none){
  .hitTarget.edge{height:18px;background:transparent;opacity:0}
  .hitTarget.leftEdge,.hitTarget.rightEdge{width:18px;height:34px}
  .cornerTarget{width:18px;height:18px;opacity:0;background:transparent;border-color:transparent}
  .streetTarget,.sixTarget{opacity:0;background:transparent;border-color:transparent;color:transparent}
  .hitTarget:hover,.hitTarget:focus-visible{opacity:0;background:transparent;outline:0}
  .hitTarget:active{opacity:.75;background:rgba(215,181,109,.65)}
}
@media(max-width:380px) and (orientation:portrait){
  .tableGrid{grid-template-rows:repeat(3,40px);padding-left:14px;padding-right:5px}
  .edge{width:24px;height:14px}
  .leftEdge,.rightEdge{width:12px;height:28px}
  .cornerTarget{width:12px;height:12px}
  .streetTarget{left:-22px;width:22px}
  .sixTarget{right:-12px;width:12px}
}

/* Numbered zero-less wheel with a counter-rotating ball. */
.wheel{position:relative;padding:0;background:none;box-shadow:none;overflow:visible;transition:none;isolation:isolate}
.wheelRotor{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px #0d1118,0 18px 50px #0008;will-change:transform;transition:transform 4.8s cubic-bezier(.33,.66,.66,1)}
.wheelNumbers{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.pocketNumber{font:800 4.3px system-ui,sans-serif;text-anchor:middle;dominant-baseline:central;fill:#fff;text-shadow:0 1px 2px #000}
.wheelInner{position:absolute;left:9%;top:9%;width:82%;height:82%;z-index:3;border:8px solid #0d1118;border-radius:50%;background:radial-gradient(circle,#222a36 0 22%,#11161f 23% 100%);display:grid;place-items:center}
.result{width:clamp(76px,30%,118px);height:auto;aspect-ratio:1}
.result.isPending{opacity:0;transform:scale(.88)}
.wheelBallTrack{position:absolute;inset:7.5%;z-index:4;border-radius:50%;pointer-events:none;will-change:transform;transition:transform 4.8s cubic-bezier(.33,.66,.66,1)}
.wheelBall{position:absolute;left:50%;top:0;width:clamp(8px,2.5vw,12px);aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid var(--gold);border-radius:50%;background:#fff8df;box-shadow:0 0 10px #fff,0 1px 4px #000b}
.pointer{top:50%;left:50%;margin:0;opacity:0;visibility:hidden;transition:opacity .2s ease;pointer-events:none}
.pointer.isVisible{opacity:1;visibility:visible}
.chipMark,.boardBetMarker{display:grid;place-items:center;min-width:27px;height:16px;padding:0 3px;border:1px solid #fff1c5;border-radius:999px;background:var(--gold);color:#17130c;font-size:8px;font-weight:900;line-height:1;white-space:nowrap;text-shadow:none;box-shadow:0 1px 4px #000b;pointer-events:none}
.chipMark{z-index:5;right:2px;top:2px}
.boardBetMarker{min-width:28px;height:16px;font-size:7px}
.hitTarget.hasBetMarker{opacity:1;background:transparent;outline:0}
@media(prefers-reduced-motion:reduce){.wheelRotor,.wheelBallTrack{transition-duration:1ms}}

.connectGate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;overflow-y:auto;padding:24px;background:radial-gradient(ellipse at top,#182131 0,#090b10 60%);}
.connectCard{width:min(100%,520px);padding:clamp(22px,5vw,42px);background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 80px #0008}
.connectBrand{margin-bottom:38px}.connectBrand span{display:block;margin-top:3px}
.connectCard h1{margin:8px 0 12px;font-size:clamp(27px,6vw,38px)}
.connectIntro,.connectNote{color:var(--muted);line-height:1.55}
.connectForm{display:grid;gap:10px;margin-top:22px}
.connectForm label{font-size:13px;color:#d8deea}
.connectForm input,.connectForm select{width:100%;min-height:46px;padding:11px 12px;color:var(--text);background:#0c1017;border:1px solid var(--line);border-radius:9px}
.connectForm .btn{min-height:46px;margin-top:8px}
.adminSignIn{margin-top:26px;border-top:1px solid var(--line);padding-top:18px;color:var(--muted)}
.adminSignIn summary{cursor:pointer;color:var(--text)}
.orDivider{margin:8px 0;text-align:center;color:var(--muted);font-size:12px}
.connectMessage{min-height:22px;margin:18px 0 0;color:#f2c879;font-size:13px;line-height:1.5}
.connectMessage:empty{display:none}
.connectNote{margin-top:24px;padding:13px;border:1px solid #51452d;border-radius:10px;background:#211d15;font-size:13px}
.connectEnter{width:100%;margin-top:18px}
.liveManageRow{align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.liveManageRow strong{font-size:14px}
.adminGrid .activity{margin-top:0}
.event{min-width:0;gap:10px}
.event b{max-width:75%;overflow-wrap:anywhere;text-align:right}
.memberRoster{padding:2px 0 10px 10px;border-bottom:1px solid var(--line)}
.rosterHeading{margin:3px 0 5px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.rosterMember{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px}
.rosterMember span{min-width:0;overflow-wrap:anywhere}
.rosterEmpty{padding:4px 0 7px;color:var(--muted);font-size:12px}
.kickMemberBtn{padding:5px 8px;border-color:#63373a;background:#281619;color:#f1c5c7;font-size:10px}
.connectForm button:disabled,.btn:disabled{opacity:.55;cursor:wait}
.connectGate[hidden],[hidden]{display:none!important}

/* Landscape phones have room for a side-by-side table; keep portrait and desktop unchanged. */
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
  .top{height:auto;min-width:0;padding:8px 12px;gap:10px}
  .brand{flex:1;min-width:0;gap:8px}
  .brand b{font-size:13px;white-space:nowrap}
  .brand span{display:none}
  .chip{flex:0 0 32px;width:32px;height:32px}
  .tabs{flex:0 1 auto;min-width:0;gap:2px}
  .tabs button{padding:7px 8px;font-size:13px;white-space:nowrap}
  main{width:100%;max-width:100%;padding:12px}
  .grid{width:100%;max-width:100%;grid-template-columns:minmax(190px,.42fr) minmax(0,1.58fr);gap:10px;align-items:start}
  .grid>.card.hero{grid-column:1;grid-row:1;padding:10px;min-height:0}
  .heroTop{margin-bottom:4px;gap:4px}
  .hero h1{font-size:24px}
  .heroTop .status{padding:4px 5px;font-size:9px}
  .wheelWrap{padding:0 0 8px}
  .wheel{width:clamp(118px,36vh,150px)}
  .result{width:clamp(76px,21vh,100px);height:clamp(76px,21vh,100px)}
  .result strong{font-size:clamp(34px,9vh,44px)}
  .result small{margin-top:-20px}
  .grid>div:nth-child(2){display:contents}
  .grid>div:nth-child(2)>.betPanel{grid-column:2;grid-row:1}
  .grid>div:nth-child(2)>.activity{display:none!important}
  .grid>div:nth-child(2)>.boardCard{grid-column:1/-1;grid-row:2;width:100%;margin-top:0}
  .hero .controls{flex-direction:column;align-items:stretch;gap:6px}
  .hero .controls .btn{padding:8px 6px;font-size:11px}
  .grid>div:nth-child(2)>.cardhead,.betPanel .cardhead{gap:8px;padding:12px}
  .balance{font-size:23px}
  .teamrow{padding:10px 12px}
  .bets{padding:8px 12px}
  .betrow{padding:6px 0}
  .activity{margin-top:10px}
  .activityList{padding:4px 12px 8px}
  .event{padding:6px 0}
  .boardCard{margin-top:10px}
  .boardCard .cardhead{padding:12px}
  .rouletteBoard{width:100%;padding:8px;overflow-x:visible}
  .tableGrid{width:100%;min-width:0;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(3,42px);padding:4px 8px 4px 18px}
  .outsideGrid{width:100%;min-width:0}
  .streetTarget{left:-24px;width:24px}
  .betHint{font-size:10px}
  .display .stage{grid-template-columns:minmax(0,1fr) 240px;gap:14px;padding:16px;min-height:calc(100dvh - 68px)}
  .bigNumber{font-size:clamp(76px,23vh,120px)}
  .bigLabel{font-size:22px}
  .displayStatus{margin-top:10px}
  .score{padding:12px}
  .score strong{font-size:19px}
  .adminGrid{grid-template-columns:1fr 1fr;gap:12px}
  .roundControl{margin-top:12px}
  .grid,.grid>div:nth-child(2),.grid>.card,.grid>div:nth-child(2)>.card{min-width:0;max-width:100%}
  .rouletteBoard{max-width:100%;overflow-x:visible}
  .tableGrid,.outsideGrid{min-width:0;max-width:100%}
  .boardCard .cardhead{flex-wrap:wrap;gap:8px}
  .betrow>div:first-child{min-width:0;overflow-wrap:anywhere}
}