/* ============================================================
   Coldstreak Roulette — table styles
   ============================================================ */

.table{
  display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.2rem);
  align-items:start;
}
@media (max-width:900px){.table{grid-template-columns:1fr;}}

/* --- Wheel --- */
.wheel-bay{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
}
.wheel-stage{
  position:relative;
  width:min(370px,84vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.wheel-stage::before{ /* chrome rim */
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:conic-gradient(from 210deg,#3B4C63,#CBD6E2,#2A3950,#9DB8CE,#1B2740,#CBD6E2,#3B4C63);
  opacity:.55;
}
.wheel-stage::after{ /* frost bloom */
  content:"";
  position:absolute;
  inset:-38px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(127,216,240,.2),transparent 68%);
  pointer-events:none;
}
.wheel{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  box-shadow:inset 0 0 0 6px rgba(6,10,18,.9), 0 24px 60px -26px #000;
  transform:rotate(0deg);
  will-change:transform;
}
.wheel .pip{
  position:absolute;
  inset:0;
  display:grid;
  place-items:start center;
  padding-top:5%;
  font-family:var(--display);
  font-weight:700;
  font-size:.95rem;
  pointer-events:none;
}
.wheel .pip b{
  display:block;
  transform:translateY(2px);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.wheel-hub{
  position:absolute;
  width:30%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#243450,#0A1120 72%);
  border:1px solid rgba(203,214,226,.34);
  display:grid;
  place-items:center;
  text-align:center;
  font-family:var(--display);
  z-index:3;
}
.wheel-hub small{display:block;font-size:.56rem;letter-spacing:.24em;color:var(--frost-500);text-transform:uppercase;}
.wheel-hub strong{font-size:1.5rem;color:var(--frost-050);line-height:1.1;}
.wheel-marker{
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-top:20px solid var(--teal);
  filter:drop-shadow(0 3px 7px rgba(24,224,192,.7));
  z-index:4;
}

.readout{
  width:100%;
  text-align:center;
  min-height:3.4rem;
  font-family:var(--display);
  font-size:1.02rem;
  color:var(--frost-100);
  display:grid;
  place-items:center;
  padding:.6rem .8rem;
  border-radius:var(--r-md);
  border:1px dashed rgba(203,214,226,.22);
  background:rgba(10,17,32,.6);
  transition:border-color .3s ease, background .3s ease;
}
.readout.is-win{
  border-style:solid;
  border-color:var(--teal);
  background:rgba(24,224,192,.1);
  color:var(--frost-050);
  animation:frostpulse .9s ease;
}
.readout.is-loss{border-color:rgba(203,214,226,.34);}
@keyframes frostpulse{
  0%{box-shadow:0 0 0 0 rgba(24,224,192,.55);}
  70%{box-shadow:0 0 0 18px rgba(24,224,192,0);}
  100%{box-shadow:0 0 0 0 rgba(24,224,192,0);}
}

/* --- Controls --- */
.rail{display:flex;flex-direction:column;gap:1.05rem;}

.meters{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(203,214,226,.16);
  border:var(--edge);
  border-radius:var(--r-md);
  overflow:hidden;
}
.meters div{background:rgba(12,20,35,.9);padding:.85rem .9rem;text-align:center;}
.meters span{
  display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--frost-500);margin-bottom:.25rem;
}
.meters strong{font-family:var(--display);font-size:1.35rem;color:var(--frost-050);}
.meters strong.flash{animation:coinflash .6s ease;}
@keyframes coinflash{0%{color:var(--teal);transform:scale(1.16);}100%{color:var(--frost-050);transform:scale(1);}}

.panel-label{
  font-family:var(--display);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--frost-500);
  margin:0 0 .65rem;
}

.chips,.outsides{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip,.pick{
  font-family:var(--display);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.05em;
  color:var(--frost-100);
  background:rgba(203,214,226,.06);
  border:1px solid rgba(203,214,226,.22);
  border-radius:var(--r-sm);
  padding:.55rem 1rem;
  cursor:pointer;
  transition:all .16s ease;
}
.chip:hover,.pick:hover{border-color:var(--glacier);color:var(--frost-050);}
.chip[aria-pressed="true"],.pick[aria-pressed="true"]{
  background:linear-gradient(135deg,rgba(127,216,240,.24),rgba(24,224,192,.2));
  border-color:var(--teal);
  color:#F2F9FE;
  box-shadow:0 0 0 1px rgba(24,224,192,.4) inset;
}
.chip:focus-visible,.pick:focus-visible,.num:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.pick small{display:block;font-size:.66rem;letter-spacing:.14em;color:var(--frost-500);font-weight:500;}
.pick[aria-pressed="true"] small{color:rgba(242,249,254,.8);}

.numgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(54px,1fr));
  gap:.4rem;
}
.num{
  font-family:var(--display);
  font-weight:700;
  font-size:1rem;
  padding:.6rem .2rem;
  border-radius:var(--r-sm);
  cursor:pointer;
  border:1px solid rgba(203,214,226,.2);
  background:rgba(203,214,226,.05);
  color:var(--frost-100);
  transition:all .15s ease;
}
.num[data-hue="ice"]{color:var(--glacier);}
.num[data-hue="zero"]{color:var(--platinum);}
.num:hover{border-color:var(--glacier);transform:translateY(-1px);}
.num[aria-pressed="true"]{
  background:linear-gradient(135deg,rgba(127,216,240,.3),rgba(24,224,192,.22));
  border-color:var(--teal);
  color:#F2F9FE;
}

.spin-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;}
.spin-row .btn{flex:1 1 170px;}
.hint{font-size:.78rem;color:var(--frost-500);margin:0;}

.history{display:flex;flex-wrap:wrap;gap:.4rem;min-height:2rem;align-items:center;}
.history b{
  font-family:var(--display);
  font-size:.82rem;
  width:2.1rem;height:2.1rem;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(203,214,226,.24);
  background:rgba(10,17,32,.8);
}
.history b[data-hue="ice"]{color:var(--glacier);border-color:rgba(127,216,240,.5);}
.history b[data-hue="zero"]{color:#05121C;background:var(--platinum);border-color:var(--platinum);}
.history em{color:var(--frost-500);font-size:.82rem;font-style:normal;}

/* --- Paytable --- */
.paytable{width:100%;border-collapse:collapse;font-size:.9rem;}
.paytable th,.paytable td{
  text-align:left;
  padding:.62rem .6rem;
  border-bottom:1px solid rgba(203,214,226,.13);
}
.paytable th{
  font-family:var(--display);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--frost-500);
}
.paytable td:last-child{text-align:right;font-family:var(--display);color:var(--teal);font-weight:600;}
.paytable tr:last-child td{border-bottom:0;}

@media (prefers-reduced-motion:reduce){
  .wheel{transition:none !important;}
  .readout.is-win{animation:none;}
  *{scroll-behavior:auto;}
}