.wheel-room { position: relative; }
.table-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 1rem;
  align-items: start;
}
.table-stage {
  min-width: 0;
  padding: 0.85rem;
  border-radius: 1.2rem;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.38)),
    url("../../assets/felt-cloth.jpg?v=20261019-7") center/cover;
  border: 12px solid #3a2716;
  box-shadow:
    inset 0 0 0 3px rgba(228, 177, 90, 0.72),
    0 16px 36px rgba(0, 0, 0, 0.35);
}
.wheel-tilt {
  perspective: 1100px;
  width: min(520px, 100%);
  margin: 0 auto 0.8rem;
}
.wheel-tilt canvas {
  width: 100%;
  height: auto;
  transform: rotateX(18deg);
  transform-origin: center 62%;
  filter: drop-shadow(0 22px 16px rgba(0, 0, 0, 0.45));
}
.wheel-well.is-live .wheel-tilt canvas {
  filter: drop-shadow(0 22px 16px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 18px rgba(228, 177, 90, 0.35));
}
.cloth-scroll {
  max-width: 100%;
  overflow-x: auto;
  border-radius: 0.8rem;
  -webkit-overflow-scrolling: touch;
}
.felt {
  display: grid;
  grid-template-columns: 52px repeat(12, minmax(44px, 1fr)) 52px;
  gap: 4px;
  width: max(100%, 680px);
  padding: 0.5rem;
  border-radius: 0.8rem;
  background: rgba(6, 24, 16, 0.28);
}
.cell {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 0.35rem 0.1rem;
  border: 1px solid rgba(255, 244, 220, 0.14);
  border-radius: 0.3rem;
  color: #fff8ee;
  background: rgba(12, 28, 20, 0.55);
  cursor: pointer;
  font-family: var(--title);
  font-size: clamp(0.68rem, 1.4vw, 0.92rem);
  line-height: 1.1;
  touch-action: manipulation;
  transition: transform 0.12s ease, filter 0.15s ease;
}
.cell:hover { filter: brightness(1.15); }
.cell:active { transform: scale(0.96); }
.cell .num { display: block; overflow: hidden; }
.pocket-red { background: #9c2434; }
.pocket-black { background: #141018; }
.pocket-green { background: #1b6a45; }
.cell-zero { grid-column: 1; grid-row: 1 / span 3; min-height: 100%; font-size: 1.05rem; }
.col-3 { grid-column: 14; grid-row: 1; }
.col-2 { grid-column: 14; grid-row: 2; }
.col-1 { grid-column: 14; grid-row: 3; }
.doz-1 { grid-column: 2 / span 4; grid-row: 4; }
.doz-2 { grid-column: 6 / span 4; grid-row: 4; }
.doz-3 { grid-column: 10 / span 4; grid-row: 4; }
.out-low { grid-column: 2 / span 2; grid-row: 5; }
.out-even { grid-column: 4 / span 2; grid-row: 5; }
.out-red { grid-column: 6 / span 2; grid-row: 5; }
.out-black { grid-column: 8 / span 2; grid-row: 5; }
.out-odd { grid-column: 10 / span 2; grid-row: 5; }
.out-high { grid-column: 12 / span 2; grid-row: 5; }
.n-1 { grid-column: 2; grid-row: 3; }
.n-2 { grid-column: 2; grid-row: 2; }
.n-3 { grid-column: 2; grid-row: 1; }
.n-4 { grid-column: 3; grid-row: 3; }
.n-5 { grid-column: 3; grid-row: 2; }
.n-6 { grid-column: 3; grid-row: 1; }
.n-7 { grid-column: 4; grid-row: 3; }
.n-8 { grid-column: 4; grid-row: 2; }
.n-9 { grid-column: 4; grid-row: 1; }
.n-10 { grid-column: 5; grid-row: 3; }
.n-11 { grid-column: 5; grid-row: 2; }
.n-12 { grid-column: 5; grid-row: 1; }
.n-13 { grid-column: 6; grid-row: 3; }
.n-14 { grid-column: 6; grid-row: 2; }
.n-15 { grid-column: 6; grid-row: 1; }
.n-16 { grid-column: 7; grid-row: 3; }
.n-17 { grid-column: 7; grid-row: 2; }
.n-18 { grid-column: 7; grid-row: 1; }
.n-19 { grid-column: 8; grid-row: 3; }
.n-20 { grid-column: 8; grid-row: 2; }
.n-21 { grid-column: 8; grid-row: 1; }
.n-22 { grid-column: 9; grid-row: 3; }
.n-23 { grid-column: 9; grid-row: 2; }
.n-24 { grid-column: 9; grid-row: 1; }
.n-25 { grid-column: 10; grid-row: 3; }
.n-26 { grid-column: 10; grid-row: 2; }
.n-27 { grid-column: 10; grid-row: 1; }
.n-28 { grid-column: 11; grid-row: 3; }
.n-29 { grid-column: 11; grid-row: 2; }
.n-30 { grid-column: 11; grid-row: 1; }
.n-31 { grid-column: 12; grid-row: 3; }
.n-32 { grid-column: 12; grid-row: 2; }
.n-33 { grid-column: 12; grid-row: 1; }
.n-34 { grid-column: 13; grid-row: 3; }
.n-35 { grid-column: 13; grid-row: 2; }
.n-36 { grid-column: 13; grid-row: 1; }
.disc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.2rem;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.85);
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #1a1208;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}
.has-chip .disc { display: flex; }
.chip-a .disc { background: #f3ddb0; }
.chip-b .disc { background: #e4b15a; }
.chip-c .disc { background: #8d3142; color: #fff8ee; }
.chip-d .disc { background: #f7f4ee; }
.history { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.8rem; }
.history i {
  font-style: normal;
  min-width: 1.8rem;
  min-height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.12rem 0.35rem;
  font-size: 0.82rem;
  font-family: var(--title);
}
.log-red { background: #9c2434; }
.log-black { background: #1b1722; border: 1px solid #8d8794; }
.log-green { background: #1b6a45; }
.rules-inline { color: var(--muted); font-size: 0.98rem; }
.prop-chips { margin: 0.8rem 0 0; }
.prop-chips img {
  width: min(180px, 100%);
  margin-inline: auto;
  border-radius: 0.8rem;
  border: 1px solid rgba(228, 177, 90, 0.4);
}
#held, #result { text-align: center; }
@media (max-width: 900px) {
  .table-layout { grid-template-columns: 1fr; }
  .scroll-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-tilt canvas { transform: none; }
}