/* Prism Wheel: stained glass and cut crystal on the table shell. Tokens from skin.js themeMap (--gem*, --tile, --bar,
   --panel, --lattice, --grain …); layout stays the shell's. The wheel itself is SVG (js/art.js): one key light from the
   top left, a still light layer over the turning glass. Art bible: docs/design-system/reelhaven/pages/art-direction.md.
   Motion: transform / opacity only, nothing animates with reduced motion (body.still or the media query). */
:root{--display:"Monoton",system-ui,sans-serif;--ui:"Rubik",system-ui,sans-serif;--radius:12px;--radius-sm:9px;--prim-radius:0;
  --gem:#FFFFFF;--gem-ink:#140F2B;--gem-top:#FFFFFF;--gem-bot:#D6D0F4;--gem-hi:#FFFFFF;--gem-lo:#B3AADF;--gem-table:rgba(255,255,255,.9);--gem-table-lo:rgba(196,188,240,.3);
  --tile:#2C2448;--bar:#150F27;--strip-bg:var(--tile);--tact-bg:var(--tile);--sw-edge:rgba(255,255,255,.45);--spin-ring:transparent}

/* the room: the theme's ground, a large hexagonal leading that recedes into the corners (clear around the wheel, so no
   small pattern sits right behind the plate), and one still layer of grain. The lamp over the wheel and the vignette
   are the table shell's (--lamp, --room-vignette from themeMap). */
.pw-scene{background-color:var(--bg)}
.pw-scene::before,.pw-scene::after{content:"";position:absolute;inset:0;pointer-events:none}
.pw-scene::before{background-image:var(--lattice);background-size:73px 126px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 72% 64% at 50% 44%,transparent 38%,#000 92%);mask-image:radial-gradient(ellipse 72% 64% at 50% 44%,transparent 38%,#000 92%)}
.pw-scene::after{background-image:var(--grain);background-size:160px 160px;opacity:var(--grain-o,.05)}

/* title: Monoton has one weight; letters spaced like neon tubes (the shell centres the glyphs, tracking included) */
.logo h1{font-weight:400;letter-spacing:.05em;font-size:clamp(22px,3.4vw,40px)}

/* the board: wheel, then its pay key */
.pw{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.pw-stage{position:relative;width:min(78vmin,460px);height:min(78vmin,460px)}
.pw-svg{display:block;width:100%;height:100%;overflow:visible}
.pw-lbl{font-family:var(--ui);font-weight:700;letter-spacing:.01em}
.pw.nolbl .pw-lbl{display:none}
.pw-hubx{font-family:var(--ui);font-weight:700;fill:#FFFFFF;transform-box:fill-box;transform-origin:center}
.pw.top .pw-hubx{fill:#FFB8F4}
.pw-snap{transform-box:view-box;transform-origin:0 0}
.pw-ptr{transform-box:view-box;transform-origin:0 -127px}
.pw-ray{opacity:0}
/* the stop: the other panes sink into shadow, the landed pane is traced in light (both fade in, 280 / 220 ms) */
.pw-veil{fill:#0D0A1A;fill-opacity:.6;opacity:0;transition:opacity .28s var(--ease-out)}
.pw-hit{fill:none;stroke:#FFFFFF;stroke-width:2.4;stroke-linejoin:round;stroke-opacity:0;transition:stroke-opacity .22s var(--ease-out)}
.pw.landed .pw-veil{opacity:1}
.pw.landed .pw-hit{stroke-opacity:1}
body.still .pw-veil,body.still .pw-hit{transition:none}

/* the pay key: quiet plates, each with a chip of its glass (lit corner, shaded corner over the pane's colour) */
.pw-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none;max-width:560px}
.pw-key li{display:flex;align-items:center;gap:7px;min-height:28px;padding:2px 10px 2px 8px;border-radius:7px;background:var(--tile);border:1px solid var(--key-line,transparent);font-size:14px;line-height:1}
/* the swatch edge keeps the clear-crystal (white) swatch visible on light grounds (--sw-edge from skin.js themeMap) */
.pw-key i,.pw-sw{display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid var(--sw-edge);flex:none;
  background-image:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 48%,rgba(0,0,0,.28))!important}
.pw-key b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pw-key small{font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}

/* segments and risk: two strips of cut-glass options, named in sentence case */
.pw-ctl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.pw-grp{display:flex;align-items:center;gap:10px}
.pw-gl{font-size:13px;font-weight:600;color:var(--muted);min-width:4.6em;text-align:right}
.pw-opts{display:flex;gap:3px;padding:3px;border-radius:12px;background:var(--tile);border:1px solid var(--line)}
.pw-opt{position:relative;isolation:isolate;min-width:48px;min-height:44px;padding:0 13px;border:0;border-radius:9px;background:none;color:var(--ink);font-weight:700;font-size:16px;line-height:1;
  transition:color var(--t-fast) var(--ease-std),translate var(--t-press) var(--ease-out)}
.pw-opt:hover:not(:disabled):not([aria-pressed="true"]){box-shadow:inset 0 0 0 1.5px var(--line)}
.pw-opt:active:not(:disabled){translate:0 1px}
/* the chosen option is a cut gem drawn behind its label (as on the main button), so the focus ring stays a full
   outline; it lands with a short scale from the gem's centre */
.pw-opt[aria-pressed="true"]{color:var(--gem-ink)}
.pw-opt[aria-pressed="true"]::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%);
  background:linear-gradient(90deg,var(--gem-hi) 0 7px,transparent 7px calc(100% - 7px),var(--gem-lo) calc(100% - 7px)),linear-gradient(180deg,var(--gem-top),var(--gem) 50%,var(--gem-bot));
  animation:pw-gem var(--t-base) var(--ease-out)}
@keyframes pw-gem{from{opacity:.4;transform:scale(.86)}}
.pw-short{display:none}
.pw-opt:disabled{opacity:.55;cursor:default}

/* HUD: a thin glass bar under a hairline of the spectrum that fades out at both ends */
.hud.thud{position:relative;background:var(--bar);border:1px solid var(--line);border-radius:10px}
.hud.thud::before{content:"";position:absolute;left:8%;right:8%;top:-1px;height:2px;border-radius:2px;opacity:.9;
  background:linear-gradient(90deg,transparent,#FF3B5C 12%,#FF8A1F 26%,#FFD43B 40%,#3EE07A 54%,#25D0F0 68%,#4C6BFF 80%,#B347FF 90%,transparent)}
.meter b{font-weight:700}

/* the main button: a cut gem under the key light — lit left crown facet, shaded right one, the body brighter at the
   top, a table facet with a bright top edge and a soft contact shadow. The shapes sit behind the label, so the focus
   ring stays a full outline; it presses down 2 px (table.css). */
.spin.tprim{background:none;box-shadow:none;border-radius:0;color:var(--gem-ink);font-family:var(--ui);font-weight:700;font-size:clamp(18px,1.8vw,21px);letter-spacing:.04em;text-transform:none;isolation:isolate;
  filter:drop-shadow(0 6px 8px rgb(0 0 0 / .38))}
.spin.tprim:hover:not(:disabled){filter:drop-shadow(0 6px 8px rgb(0 0 0 / .38)) brightness(1.06)}
.spin.tprim::before,.spin.tprim::after{content:"";position:absolute;inset:0;z-index:-1}
.spin.tprim::before{clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);
  background:linear-gradient(90deg,var(--gem-hi) 0 16px,transparent 16px calc(100% - 16px),var(--gem-lo) calc(100% - 16px)),linear-gradient(180deg,var(--gem-top),var(--gem) 46%,var(--gem-bot))}
.spin.tprim::after{clip-path:polygon(16px 0,calc(100% - 16px) 0,calc(100% - 34px) 40%,34px 40%);background:linear-gradient(180deg,var(--gem-table),var(--gem-table-lo))}

/* rules: one table per wheel size */
.pw-pays{width:100%;border-collapse:collapse;margin:4px 0 10px;font-size:15px;font-variant-numeric:tabular-nums}
.pw-pays th,.pw-pays td{padding:6px 8px;text-align:center;border-bottom:1px solid var(--line)}
.pw-pays th[scope="row"]{text-align:left;font-weight:700;white-space:nowrap}
.pw-pays thead th{font-size:13px;color:var(--muted);font-weight:700}
.pw-sw{margin-right:8px;vertical-align:-1px}
.pw-none{color:var(--muted)}

/* Monoton has one weight and is never synthesised bold: panel titles in neon tubes, subheads in Rubik */
#sheet .panel h2{font-weight:400;letter-spacing:.04em;font-size:clamp(22px,3.4vw,36px);padding-right:52px;overflow-wrap:normal}
#sheet .panel h3{font-family:var(--ui);font-weight:700;font-size:20px;letter-spacing:.02em}

/* big win: the tier names in neon tubes */
.overlay.bigwin #ovTitle{font-weight:400;letter-spacing:.06em}

/* phones: the group names sit on the border of their strip (no width taken), both strips share one row where they fit,
   the pay key is compact, and the stake's sub-line (the same choice as the strips) gives its height to the wheel */
@media (max-width:400px){
  .pw{gap:6px}
  .pw-key{gap:4px}
  .pw-key li{min-height:24px;font-size:13px;gap:5px;padding:1px 7px 1px 5px}
  .pw-key i{width:11px;height:11px}
  .pw-key small{font-size:11px}
  .pw-ctl{gap:12px 6px;padding-top:7px}
  .pw-grp{position:relative}
  .pw-gl{position:absolute;z-index:1;top:-8px;left:10px;min-width:0;padding:0 4px;font-size:12px;line-height:14px;text-align:left;background:var(--bg)}
  .pw-opt{min-width:44px;padding:0 7px;font-size:15px}
  #mBetSub{display:none}
}
/* the narrowest phones: both strips on one row ("Med"), the pay key on one row (the counts stay in its spoken text and
   in the rules), so the wheel keeps about 200 px */
@media (max-width:359px){
  .pw-ctl{gap:12px 4px}
  .pw-opts{gap:2px;padding:2px}
  .pw-full{display:none}
  .pw-short{display:inline}
  .pw-key li{padding:1px 6px 1px 5px}
  .pw-key small{display:none}
}
body.still .pw-opt[aria-pressed="true"]::before{animation:none}
@media (prefers-reduced-motion:reduce){.pw-opt[aria-pressed="true"]::before{animation:none}}