:root{
  --felt:#0f4a3d;
  --felt-deep:#0a352c;
  --felt-vignette: radial-gradient(ellipse at 50% 30%, #135941 0%, var(--felt) 45%, var(--felt-deep) 100%);
  --ivory:#ecdfc2;
  --ivory-dim:#c9bb98;
  --rail:#241712;
  --rail-2:#150d09;
  --brass:#c19a5b;
  --brass-hi:#e6c988;
  --ruby:#9c2b34;
  --ruby-hi:#c1444e;
  --ink:#0c0805;
  --chip1:#e9e4d8;
  --chip5:#b5322f;
  --chip25:#1f7a4d;
  --chip100:#1a1a1a;
  --good:#5fbf7a;
  --bad:#d9534f;
  --push:#c19a5b;
  --font-display: Arial Black, Arial Narrow, "Segoe UI Black", sans-serif;
  --font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: Consolas, "SF Mono", "Courier New", monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--rail-2);
  color: var(--ivory);
  font-family: var(--font-ui);
  min-height:100vh;
}
.floor{
  max-width:1180px;
  margin:0 auto;
  padding:18px 14px 60px;
}
.rail-top{
  background: linear-gradient(180deg, var(--rail) 0%, var(--rail-2) 100%);
  border:2px solid var(--brass);
  border-radius:14px;
  padding:7px 16px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(198,163,92,.25);
  position:relative;
}
.rail-top::before, .rail-top::after{
  content:"";
  position:absolute; top:6px; bottom:6px; width:10px;
  background-image: radial-gradient(circle, var(--brass-hi) 0 2px, transparent 3px);
  background-size: 10px 22px;
  opacity:.55;
}
.rail-top::before{ left:6px; }
.rail-top::after{ right:6px; }
.brand{
  font-family: var(--font-display);
  letter-spacing:1.5px;
  font-size:15px;
  color: var(--brass-hi);
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
  white-space:nowrap;
}
.ledger{ display:flex; gap:16px; }
.ledger-item{ display:flex; flex-direction:column; align-items:flex-start; min-width:78px; }
.ledger-label{ font-size:8px; letter-spacing:1px; text-transform:uppercase; color: var(--ivory-dim); }
.ledger-value{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size:14px; font-weight:700; color: var(--ivory); }
.ledger-value.win{ color: var(--good); }
.ledger-value.loss{ color: var(--bad); }
.chip-tray{ display:flex; gap:10px; align-items:center; margin-left:auto; }
.chip{
  width:52px; height:52px; border-radius:50%;
  border:none; cursor:pointer; position:relative;
  font-family: var(--font-mono); font-weight:700; font-size:13px;
  color: var(--ivory);
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-conic-gradient(var(--c) 0 22.5deg, var(--c2) 22.5deg 45deg);
  box-shadow: 0 3px 0 rgba(0,0,0,.5), 0 5px 8px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.15);
  transition: transform .12s ease;
}
.chip::after{
  content:""; position:absolute; inset:8px; border-radius:50%;
  background: var(--c); border:1px dashed rgba(255,255,255,.5);
  display:flex;
}
.chip span{ position:relative; z-index:2; }
.chip:hover{ transform: translateY(-3px); }
.chip.active{ outline:3px solid var(--ivory); outline-offset:2px; }
.chip[data-val="1"]{ --c:#e9e4d8; --c2:#cfc9ba; color:#241712; }
.chip[data-val="1"]::after{ color:#241712; }
.chip[data-val="5"]{ --c:#b5322f; --c2:#7c211f; }
.chip[data-val="25"]{ --c:#1f7a4d; --c2:#134f31; }
.chip[data-val="100"]{ --c:#1a1a1a; --c2:#000; }
.rail-actions{ display:flex; gap:7px; flex-wrap:wrap; }
.btn{
  font-family: var(--font-ui); font-weight:600; font-size:11px; letter-spacing:.3px;
  padding:6px 11px; border-radius:7px; border:1px solid var(--brass);
  background: linear-gradient(180deg,#2c1c14,#1a110c);
  color: var(--ivory); cursor:pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.btn:hover{ border-color: var(--brass-hi); color:#fff; }
.btn:active{ transform: translateY(1px); }
.btn.primary{ background: linear-gradient(180deg, var(--ruby-hi), var(--ruby)); border-color: var(--ruby-hi); color:#fff; }
.btn.ghost{ opacity:.8; }
.btn:disabled{ opacity:.35; cursor:not-allowed; }
.btn:focus-visible, .spot:focus-visible, .chip:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

.dice-tray{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 0 8px; flex-wrap:wrap;
}
.dice-center{ display:flex; align-items:center; gap:14px; }
.win-display{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-display); letter-spacing:1px; font-size:14px; font-weight:700;
  padding:8px 16px; border-radius:20px; border:2px solid var(--ivory-dim);
  color: var(--ivory);
}
.win-label{ font-family: var(--font-display); letter-spacing:1px; font-size:14px; text-transform:uppercase; color: var(--ivory-dim); font-weight:600; }
.win-value{ font-variant-numeric: tabular-nums; }
.win-value.win{ color: var(--good); }
.win-value.loss{ color: var(--bad); }
.die{
  width:56px; height:56px; border-radius:10px;
  background: linear-gradient(160deg,#fdfcf8,#e8e3d6);
  box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.15);
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  padding:8px;
  transition: transform .5s ease;
}
.die.rolling{ animation: tumble .5s ease; }
@keyframes tumble{ 0%{transform:rotate(0)} 50%{transform:rotate(200deg)} 100%{transform:rotate(360deg)} }
@media (prefers-reduced-motion: reduce){ .die.rolling{ animation:none; } }
.pip{ width:9px; height:9px; border-radius:50%; background:#1a1a1a; margin:auto; }
.phase-indicator{
  font-family: var(--font-display); letter-spacing:1px; font-size:14px;
  padding:8px 16px; border-radius:20px; border:2px solid var(--ivory-dim);
  color: var(--ivory);
  min-width:220px; text-align:center;
}
.phase-indicator.on-point{ border-color: var(--ruby-hi); background: rgba(156,43,52,.18); }
.roll-pill{
  font-family: var(--font-display); letter-spacing:1px; font-size:14px; font-weight:700;
  padding:8px 16px; border-radius:20px; border:2px solid var(--ruby-hi);
  background: linear-gradient(180deg, var(--ruby-hi), var(--ruby));
  color:#fff; cursor:pointer;
  min-width:140px; text-align:center;
  box-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.roll-pill:hover{ filter:brightness(1.08); }
.roll-pill:active{ transform: translateY(1px); }
.roll-pill:disabled{ opacity:.45; cursor:not-allowed; }
.roll-pill:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

.felt{
  background: var(--felt-vignette);
  border: 10px solid var(--rail);
  outline: 3px solid var(--brass);
  outline-offset:-6px;
  border-radius:18px;
  padding:18px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.5);
}
.felt-label{
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:1.5px;
  color: var(--ivory); font-size:12px; text-align:center; opacity:.85;
}
.pay-sub{ font-family: var(--font-ui); font-size:9px; letter-spacing:.3px; color: var(--ivory-dim); text-transform:none; font-weight:400; }

.spot{
  border:1.5px solid var(--ivory-dim);
  border-radius:8px;
  padding:6px 8px;
  cursor:pointer;
  background: rgba(0,0,0,.12);
  color: var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  min-height:44px;
  position:relative;
  transition: background .15s ease, border-color .15s ease;
}
.spot:hover:not(.disabled){ background: rgba(255,255,255,.08); border-color: var(--brass-hi); }
.spot.disabled{ opacity:.4; cursor:not-allowed; }
.spot .name{ font-weight:700; font-size:12px; letter-spacing:.4px; }
.spot .odds{ font-size:9px; color: var(--ivory-dim); }
.chip-token{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; font-size:10.5px;
  color: var(--tctext, #fff);
  background: repeating-conic-gradient(var(--tc) 0 22.5deg, var(--tc2) 22.5deg 45deg);
  box-shadow: 0 3px 0 rgba(0,0,0,.5), 0 5px 8px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.15);
}
.chip-token::after{
  content:""; position:absolute; inset:8px; border-radius:50%;
  background: var(--tc); border:1px dashed rgba(255,255,255,.5);
}
.chip-token span{ position:relative; z-index:2; }
.clear-x{
  position:absolute; top:-10px; left:-8px; z-index:4;
  width:18px; height:18px; border-radius:50%; background:#000; color:#fff;
  font-size:11px; line-height:18px; text-align:center; border:1px solid var(--ivory-dim);
  cursor:pointer;
}

.felt-box{
  border:1.5px solid var(--ivory-dim); border-radius:10px; padding:10px;
}
.prop-box{
  display:flex; flex-direction:column; gap:6px;
}
.prop-row{ display:flex; flex-wrap:wrap; gap:6px; }
.prop-row .spot{ flex:0 1 90px; }
.prop-groups{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; justify-content:center; }
.prop-pair{
  display:flex; flex-direction:column; gap:6px;
  border:1.5px solid var(--ivory-dim); border-radius:8px; padding:6px;
}
.prop-pair .spot, .prop-singles .spot{ width:90px; }
.prop-singles{ display:flex; flex-direction:column; gap:6px; margin-left:4px; }
.numbers-row{ display:grid; grid-template-columns: repeat(8,1fr); gap:8px; }
.number-box{
  border:2px solid var(--ivory-dim); border-radius:10px; padding:8px;
  display:flex; flex-direction:column; gap:6px;
  position:relative; background: rgba(0,0,0,.1);
}
.number-box.is-point{ border-color: var(--ruby-hi); box-shadow: 0 0 0 2px rgba(156,43,52,.4); }
.number-box .num-head{
  font-family: var(--font-display); font-size:22px; text-align:center; color: var(--ivory);
  letter-spacing:1px;
}
.come-box, .dcome-box{ align-items:center; justify-content:center; text-align:center; cursor:pointer; }
.come-box .num-head, .dcome-box .num-head{ font-size:14px; letter-spacing:.5px; }
.come-box .odds, .dcome-box .odds{ font-size:11px; color: var(--ivory-dim); }
.puck{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, #d8d8d8 60%, #aaa);
  color:#111; font-family:var(--font-display); font-size:10px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #333; box-shadow:0 3px 6px rgba(0,0,0,.5);
}
.bucket-row{ display:flex; flex-direction:column; gap:4px; }
.come-marker{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family: var(--font-mono); font-weight:700; font-size:11.5px; letter-spacing:.2px;
  padding:5px 8px; border-radius:20px; cursor:pointer;
  border:1.5px solid var(--brass-hi);
  background: rgba(193,154,91,.22);
  color: var(--ivory);
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.come-marker .chip-dot{ width:13px; height:13px; border-radius:50%; background: var(--chip5); border:2px solid rgba(255,255,255,.7); flex:none; box-shadow:0 1px 2px rgba(0,0,0,.5); }
.come-marker.dont{ border-color: var(--ivory-dim); background: rgba(156,43,52,.22); }
.come-marker:hover{ filter:brightness(1.15); }

.field-strip{ display:grid; grid-template-columns: repeat(9,1fr); gap:8px; }
.field-strip .spot .name{ font-size:16px; }

.pass-row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.dpass-bar, .pass-line{
  border:2px solid var(--ivory-dim); border-radius:10px; padding:16px; text-align:center;
  cursor:pointer; position:relative;
}
.pass-line{ background: rgba(156,43,52,.08); }
.pass-line .name, .dpass-bar .name{ font-family: var(--font-display); letter-spacing:3px; font-size:20px; }
.dpass-bar.locked, .pass-line.locked{ box-shadow: inset 0 0 0 2px var(--brass); }

.log-panel{
  margin-top:14px; background: var(--rail); border:1px solid var(--brass); border-radius:10px;
  padding:10px 14px; max-height:150px; overflow-y:auto; font-family: var(--font-mono); font-size:12px;
  line-height:1.6; color: var(--ivory-dim);
}
.log-panel .entry.win{ color: var(--good); }
.log-panel .entry.lose{ color: var(--bad); }
.log-panel .entry.info{ color: var(--brass-hi); }

.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.7); display:none;
  align-items:center; justify-content:center; z-index:50; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background: var(--felt-deep); border:2px solid var(--brass); border-radius:14px;
  padding:24px; max-width:640px; max-height:82vh; overflow-y:auto; color: var(--ivory);
}
.modal h2{ font-family: var(--font-display); letter-spacing:1px; color: var(--brass-hi); margin-top:0; }
.modal h3{ color: var(--ivory); font-size:14px; letter-spacing:.5px; text-transform:uppercase; border-bottom:1px solid var(--ivory-dim); padding-bottom:4px; margin-top:20px; }
.modal table{ width:100%; border-collapse:collapse; font-size:13px; }
.modal td{ padding:4px 6px; border-bottom:1px solid rgba(236,223,194,.15); }
.modal td:last-child{ text-align:right; font-family:var(--font-mono); color: var(--brass-hi); }
.modal p{ font-size:13px; line-height:1.6; color: var(--ivory-dim); }

.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background: var(--ruby); color:#fff; padding:10px 20px; border-radius:8px;
  font-size:13px; font-weight:600; box-shadow:0 6px 16px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition: opacity .25s ease;
  z-index:60;
}
.toast.show{ opacity:1; }

@media (max-width: 900px){
  .numbers-row{ grid-template-columns: repeat(3,1fr); }
  .field-strip{ grid-template-columns: repeat(3,1fr); }
  .pass-row{ grid-template-columns: 1fr; }
}