*{box-sizing:border-box}
body{margin:0;background:#091c18;color:#f0e4c0;
font-family:Arial,Helvetica,sans-serif}
button{font:inherit;cursor:pointer}
button:disabled{opacity:.4;cursor:not-allowed}
.topbar{display:flex;justify-content:space-between;align-items:center;
padding:15px 25px;background:#102f25;border-bottom:2px solid #b89442}
h1{margin:0;font-size:25px;letter-spacing:2px}
h1 span{color:#e2b95c}
h2{font-size:13px;letter-spacing:1px;color:#e9c776;margin:6px 0 15px}
small,.muted{color:#bdc8bd;font-size:12px}
.status{color:#d4be86;font-size:12px}
main{max-width:1700px;margin:auto;padding:15px}
.views{display:flex;gap:8px;margin-bottom:12px}
.views button,.control-buttons button{border:1px solid #aa8745;
background:#233a31;color:#f3dc9c;border-radius:7px;padding:12px}
.views button.selected{background:#b89442;color:#141e19;font-weight:bold}
.play-area{display:grid;grid-template-columns:minmax(265px,38%) minmax(0,62%);gap:14px}
.wheel-panel,.betting-panel,.toolbar,.footer{
background:linear-gradient(145deg,#14513a,#0b3023);
border:1px solid #8a753d;border-radius:12px;padding:14px}
.wheel-panel{text-align:center}
.wheel{position:relative;width:min(100%,410px);aspect-ratio:1;
border-radius:50%;margin:28px auto 20px;
background:radial-gradient(circle,#a36831 0 31%,#bb8745 32% 38%,
transparent 39%),#684426;border:13px solid #bc9557;
box-shadow:0 0 0 6px #382514,inset 0 0 0 9px #573517}
.wheel-numbers{position:absolute;inset:8%;border-radius:50%}
.wheel-slot{position:absolute;left:50%;top:50%;width:10.5%;height:11%;
transform:translate(-50%,-50%) rotate(var(--angle))
translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle)));
display:grid;place-items:center;border:1px solid #e4cb89;
color:white;font-size:clamp(9px,1.1vw,13px);font-weight:bold}
.wheel-slot.red{background:#ae2330}.wheel-slot.black{background:#111}
.wheel-slot.green{background:#008c51}
.wheel-core{position:absolute;inset:34%;border-radius:50%;
background:radial-gradient(circle,#d7ab6c,#7d4b26);
border:4px solid #e3c07f;display:grid;place-items:center}
.spindle{width:35%;height:35%;border-radius:50%;
background:radial-gradient(circle,#fae3a7,#8c6528)}
.wheel-ball{position:absolute;top:3%;left:49%;width:12px;height:12px;
border-radius:50%;background:#fff;box-shadow:0 0 4px #fff}
.result-strip{padding:10px;background:#092a20;border-radius:7px}
.layout-panel{min-height:385px;display:flex;align-items:center;justify-content:center}
.layout-panel[hidden]{display:none}
.standard-board,.center-board{display:grid;
grid-template-columns:45px repeat(12,minmax(0,1fr)) 52px;
grid-template-rows:repeat(3,54px) 42px 42px;
width:100%;max-width:800px;gap:2px}
.number,.zero,.outside,.oval-number{position:relative;min-width:0;
border:1px solid #ead59f;color:white;font-weight:bold;
background:#151615}
.number.red,.oval-number.red{background:#b6222d}
.number.black,.oval-number.black{background:#101313}
.zero{background:#007d4a}
.outside{background:#18402f;font-size:12px}
.number,.zero{font-size:16px}
.bet-badge{position:absolute;right:0;bottom:0;
min-width:18px;padding:1px 3px;border-radius:9px;
background:#ffe28d;color:#15140c;font-size:10px;z-index:5}
.selected-number{outline:3px solid #f9db63;outline-offset:-3px}
.oval-stage{width:100%;padding:16px 0;overflow-x:auto}
.oval-track{position:relative;min-width:660px;width:100%;
height:370px;border:4px solid #d6b26b;border-radius:190px;
background:#103b2c}
.oval-center{position:absolute;left:11%;right:11%;top:27%;bottom:27%;
display:flex;align-items:center;justify-content:center}
.center-board{grid-template-columns:35px repeat(12,minmax(0,1fr)) 38px;
grid-template-rows:repeat(3,32px) 25px 25px;gap:1px}
.center-board .number,.center-board .zero{font-size:11px}
.center-board .outside{font-size:9px}
.oval-number{position:absolute;transform:translate(-50%,-50%);
width:6.1%;height:10%;font-size:clamp(10px,1vw,14px);
display:grid;place-items:center;border-radius:4px}
.oval-number.green{background:#008c51}
.oval-number .bet-badge{font-size:9px}
.toolbar{display:grid;grid-template-columns:40% 60%;gap:12px;margin-top:14px}
.chip-list{display:flex;gap:9px;flex-wrap:wrap}
.chip{width:52px;height:52px;border-radius:50%;font-size:11px;
border:5px dashed #e9e1cd;box-shadow:0 3px 6px #0007;font-weight:bold}
.chip.active{outline:3px solid #ffda70;outline-offset:3px}
.control-buttons{display:flex;gap:8px;flex-wrap:wrap}
.control-buttons button{min-width:64px}
.control-buttons .spin{background:#947530;color:#fff}
.footer{margin-top:13px;display:flex;justify-content:space-between;
gap:14px;flex-wrap:wrap;font-size:13px}
.footer strong{color:#ffda77}
#message{width:100%;font-size:12px;color:#d3dbd2}
@media(max-width:900px){
.play-area,.toolbar{grid-template-columns:1fr}
.layout-panel{min-height:290px}
.standard-board{grid-template-rows:repeat(3,38px) 32px 32px}
.number,.zero{font-size:11px}
.outside{font-size:9px}
}


/* RouletteSphere Phase1-1C visual corrections */

.wheel-numbers {
  inset: 7%;
  border: 3px solid #dfbd81;
  box-shadow:
    inset 0 0 0 3px #5a3d24,
    0 0 0 5px #54351d;
  overflow: hidden;
}

.wheel-pocket-label {
  position: absolute;
  z-index: 2;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: clamp(9px,1.05vw,13px);
  font-weight: bold;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

.wheel-core {
  z-index: 3;
}

.wheel-ball {
  z-index: 5;
}

.oval-track {
  border-radius: 185px;
  background: #103b2c;
  overflow: hidden;
}

.oval-center {
  left: 18%;
  right: 18%;
  top: 30%;
  bottom: 30%;
  z-index: 2;
}

.oval-number {
  z-index: 3;
  width: 5.9%;
  height: 10%;
  border: 1px solid #e5cf96;
  border-radius: 2px;
  font-weight: bold;
}

.center-board {
  position: relative;
  z-index: 2;
}

.zero {
  background: #00864d;
}

.chip-list {
  flex-wrap: wrap;
}

@media (min-width: 1200px) {
  .chip {
    width: 48px;
    height: 48px;
  }
  .chip-list {
    gap: 7px;
  }
}

@media (max-width: 900px) {
  .wheel-pocket-label {
    font-size: 10px;
  }
}


/* RouletteSphere Phase1-1D — chip markers on betting spots */

.number,
.zero,
.oval-number {
  overflow: visible;
}

.bet-chip-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--chip-bg, #f0d78d);
  color: var(--chip-fg, #111);
  border: 4px dashed rgba(255,255,255,.82);
  box-shadow: 0 2px 7px rgba(0,0,0,.55);
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  z-index: 8;
  pointer-events: none;
}

.bet-chip-marker.exact-chip {
  border-color: rgba(255,255,255,.88);
}

.bet-chip-marker.composite-chip {
  border-style: solid;
  border-width: 3px;
  border-color: #7e6820;
}

.center-board .bet-chip-marker,
.oval-number .bet-chip-marker {
  width: 22px;
  height: 22px;
  font-size: 8px;
  border-width: 3px;
}

.standard-board .bet-chip-marker {
  width: 28px;
  height: 28px;
  font-size: 10px;
}


/* Phase 1E: continuous racetrack pocket geometry */

.oval-track {
  position: relative;
  height: 400px;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.oval-pocket-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.oval-track .oval-number {
  position: absolute;
  z-index: 4;
  width: 4.5%;
  height: 9%;
  background: transparent !important;
  border: none !important;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  padding: 0;
}

.oval-track .oval-number.selected-number {
  outline: 2px solid #ffe27b;
  outline-offset: -2px;
}

.oval-center {
  left: 18%;
  right: 18%;
  top: 31%;
  bottom: 31%;
  z-index: 3;
}

.oval-track .bet-chip-marker {
  color: var(--chip-fg,#111);
  font-size: 9px;
}


/* ROULETTESPHERE-PHASE1-1G-LAYOUT
   Fit the complete oval into the betting panel. */

.betting-panel {
  min-width: 0;
}

.oval-stage {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  padding: 12px 0;
}

.oval-stage .oval-track {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 5 / 2;
  overflow: visible;
  margin: 0 auto;
  border: none;
  border-radius: 0;
}

.oval-pocket-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.oval-center {
  left: 18%;
  right: 18%;
  top: 31%;
  bottom: 31%;
  min-width: 0;
}

.center-board {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* Keep the wheel and racetrack side by side when
   sufficient horizontal space is available. */
@media (max-width: 1350px) {
  .play-area {
    grid-template-columns: minmax(0,1fr);
  }

  .wheel {
    width: min(100%, 370px);
  }

  .betting-panel {
    width: 100%;
  }

  .oval-stage {
    max-width: 1050px;
    margin: 0 auto;
  }

  .toolbar {
    grid-template-columns: 1fr;
  }
}

/* Narrow screens: preserve complete oval geometry. */
@media (max-width: 680px) {
  .oval-stage {
    padding: 8px 0;
  }

  .oval-stage .oval-track {
    min-width: 0;
    aspect-ratio: 5 / 2;
  }

  .center-board .number,
  .center-board .zero {
    font-size: 8px;
  }

  .center-board .outside {
    font-size: 7px;
  }

  .oval-track .bet-chip-marker {
    width: 17px;
    height: 17px;
    font-size: 7px;
    border-width: 2px;
  }
}