/* GENERATED by scripts/build-guide.mjs crosswise — do not edit; re-run the script.
   The page look (the "charcoal" board scheme, the default a player starts with), the tokens the
   table's rules read (resolved on the table in that look), and the app's own Crosswise rules from
   style.css (+ the dice renderer's sheet) — only those the lifted screens use, with the @media rules a
   430 px phone matches flattened in (#id → .gid-id). */
.cg-page {
  --pgr-bg: radial-gradient(125% 120% at 50% -10%,#1c1e24 0%,#141519 58%,#0d0e11 100%);
  --pgr-seat: rgba(255,255,255,.025);
  --pgr-panel: rgba(255,255,255,.04);
  --pgr-line: rgba(255,255,255,.075);
  --pgr-txt: #e9e8e4;
  --pgr-dim: #83858b;
  --pgr-track: rgba(255,255,255,.07);
  --pgr-sel: oklch(.74 .14 152);
  --pgr-btn: linear-gradient(180deg,#333841,#22252b);
  --pgr-btnTxt: #e9e8e4;
  --pgr-bubbleBg: #2b2d33;
  --pgr-bubbleTxt: #f1f0ec;
  --pgr-selBg: oklch(.74 .14 152 / .16);
  --pgr-gold: oklch(.80 .15 85);
  --pgr-solid: #15161b;
  --pgr-goldBg: color-mix(in oklch, oklch(.80 .15 85) 16%, transparent);
  --cg-base: #141519;
}
.cw-gfig {
  --pgr-btn: linear-gradient(180deg,#333841,#22252b);
  --pgr-btnTxt: #e9e8e4;
  --pgr-dim: #83858b;
  --pgr-font: 'Outfit',system-ui,sans-serif;
  --pgr-line: rgba(255,255,255,.075);
  --pgr-panel: rgba(255,255,255,.04);
  --pgr-panelBd: 1px solid rgba(255,255,255,.075);
  --pgr-seat: rgba(255,255,255,.025);
  --pgr-sel: oklch(.74 .14 152);
  --pgr-shellBg: transparent;
  --pgr-shellGap: clamp(7px,1.2vh,13px);
  --pgr-shellMaxW: 430px;
  --pgr-shellPad: clamp(10px,1.7vw,20px);
  --pgr-shellRadius: 0px;
  --pgr-shellShadow: none;
  --pgr-shutBg: #15161a;
  --pgr-shutBorder: rgba(255,255,255,.04);
  --pgr-shutNum: #4c4e54;
  --pgr-solid: #15161b;
  --pgr-tileBg: linear-gradient(180deg,#272a30,#1f2126);
  --pgr-tileNum: #ededed;
  --pgr-tileShadow: 0 5px 14px -7px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05);
  --pgr-txt: #e9e8e4;
}
.cwt-shell { display: flex; flex-direction: column; gap: var(--pgr-shellGap, 8px); max-width: var(--pgr-shellMaxW, 430px); margin: 0px auto; background: var(--pgr-shellBg, transparent); border-radius: var(--pgr-shellRadius, 0); box-shadow: var(--pgr-shellShadow, none); padding: var(--pgr-shellPad, 10px); color: var(--pgr-txt, #eee); }
.cwt-headgap { flex: 1 1 0%; min-width: 0px; }
.cwt-shell.cwt-roller-me { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pgr-sel, #e8c33a) 55%, transparent),
                                       var(--pgr-shellShadow, none); }
.cwt-c-red { --cw-c: #c8443c; --cw-on: #fff; }
.cwt-c-yellow { --cw-c: #d3a017; --cw-on: #241a02; }
.cwt-c-green { --cw-c: #349a63; --cw-on: #fff; }
.cwt-c-blue { --cw-c: #2f6ea8; --cw-on: #fff; }
.cwt-head { display: flex; align-items: center; gap: 8px; height: 32px; flex: 0 0 auto; }
.cwt-badge { flex: 0 0 auto; font: 800 9px/1 var(--pgr-font, system-ui, sans-serif); letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 7px; border-radius: 5px; border: 1px solid var(--pgr-line, #555); color: var(--pgr-dim, #aaa); }
.cwt-roller { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--pgr-panel, rgba(255,255,255,.06)); border: 1px solid var(--pgr-line, #555); font: 600 11.5px/1 var(--pgr-font, system-ui, sans-serif); min-width: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cwt-roller > .gid-cwt-roller-text { min-width: 0px; overflow: hidden; text-overflow: ellipsis; }
.cwt-roller-nm { display: inline-block; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cwt-shell.cwt-roller-me .cwt-roller { border-color: color-mix(in srgb, var(--pgr-sel, #e8c33a) 60%, transparent); }
.cwt-roller-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--pgr-dim, #aaa); }
.cwt-roller-dot.cwt-dot-live { background: var(--pgr-sel, #e8c33a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pgr-sel, #e8c33a) 25%, transparent); }
.cwt-timer { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cwt-timer-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pgr-solid, #1b1b22); font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; font-variant-numeric: tabular-nums; color: var(--pgr-txt, #eee); }
.cwt-icon-btn { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: var(--pgr-panel, transparent); border: 1px solid var(--pgr-line, #555); color: var(--pgr-dim, #aaa); cursor: pointer; font: italic 700 14px/1 var(--pgr-font, system-ui, sans-serif); }
.cwt-menu { display: none; font-style: normal; }
.cwt-main { flex: 1 1 0%; min-height: 0px; min-width: 0px; display: flex; flex-direction: column; gap: 8px; }
.cwt-sidecol { display: none; }
.cwt-side { display: none; }
.cwt-oppwrap { flex: 0 0 auto; min-width: 0px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.cwt-opphead { font: 600 10px/1 var(--pgr-font, system-ui, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pgr-dim, #aaa); }
.cwt-oppgrid { display: grid; grid-template-columns: repeat(var(--cw-oppcols, 1), minmax(0, 1fr)); gap: 6px; }
.cwt-opp { display: flex; flex-direction: column; gap: 5px; min-width: 0px; padding: 7px 9px; border-radius: 10px; background: var(--pgr-panel, rgba(255,255,255,.05)); border: 1px solid var(--pid-bd, color-mix(in srgb, var(--pgr-sel, #e8c33a) 55%, transparent)); cursor: pointer; }
.cwt-opp.acted { border-color: var(--pgr-line, #555); }
.cwt-opptop { display: flex; align-items: center; gap: 6px; min-width: 0px; }
.cwt-avatar { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pgr-seat, rgba(255,255,255,.06)); border: 1px solid var(--pgr-line, #555); font: 700 10px/1 var(--pgr-font, system-ui, sans-serif); }
.cwt-oppname { font: 600 11.5px/1 var(--pgr-font, system-ui, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0px; }
.cwt-acted { flex: 0 0 auto; font: 700 9.5px/1 var(--pgr-font, system-ui, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--pgr-sel, #e8c33a) 22%, transparent); color: var(--pgr-sel, #e8c33a); border: 1px solid color-mix(in srgb, var(--pgr-sel, #e8c33a) 50%, transparent); }
.cwt-opp.acted .cwt-acted { background: rgba(46, 230, 168, 0.18); color: rgb(46, 230, 168); border-color: rgba(46, 230, 168, 0.45); }
.cwt-avatar { flex: 0 0 auto; }
.cwt-bars { display: flex; flex-direction: column; gap: 3px; }
.cwt-bar { display: flex; align-items: center; gap: 5px; }
.cwt-bar-l { width: 9px; flex: 0 0 auto; font: 800 9px/1 var(--pgr-font, system-ui, sans-serif); color: var(--cw-c); }
.cwt-bar-t { position: relative; flex: 1 1 0%; height: 5px; border-radius: 3px; overflow: hidden; background: var(--pgr-shutBg, rgba(0,0,0,.3)); border: 1px solid var(--pgr-shutBorder, rgba(255,255,255,.06)); }
.cwt-bar-f { position: absolute; left: 0px; top: 0px; bottom: 0px; border-radius: 3px; background: var(--cw-c); display: block; }
.cwt-bar-c { width: 20px; flex: 0 0 auto; text-align: right; font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; color: var(--pgr-dim, #aaa); font-variant-numeric: tabular-nums; }
.cwt-oppfoot { display: flex; align-items: center; gap: 6px; }
.cwt-oppens { display: flex; gap: 3px; }
.cwt-oppen { width: 8px; height: 8px; border-radius: 2px; display: block; border: 1px solid var(--pgr-line, #555); }
.cwt-oppen.on { background: rgb(201, 80, 60); border-color: rgb(201, 80, 60); }
.cwt-opplocks { font: 600 9.5px/1 var(--pgr-font, system-ui, sans-serif); color: var(--pgr-dim, #aaa); }
.cwt-oppscore { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; font-variant-numeric: tabular-nums; }
.cwt-dicewrap { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--pgr-panel, rgba(255,255,255,.06)); border: var(--pgr-panelBd, 1px solid rgba(255,255,255,.14)); }
.cwt-dicetag { font: 700 9.5px/1 var(--pgr-font, system-ui, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pgr-dim, #aaa); min-height: 10px; }
.cwt-whitegroup, .cwt-colourgroup { display: flex; flex-direction: column; gap: 5px; }
.cwt-colourgroup { border-top: 1px solid var(--pgr-line, #555); padding-top: 8px; }
.cwt-colourgroup.cwt-dimmed { opacity: 0.42; }
.cwt-shell.cwt-roller-me .cwt-colourgroup:not(.cwt-dimmed) .cwt-dicetag { color: var(--pgr-sel, #e8c33a); }
.cwt-whiterow { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.cwt-dicegroup { display: flex; align-items: center; gap: 8px; min-width: 0px; }
.cwt-rollerslot, .cwt-timerslot { display: flex; align-items: center; min-width: 0px; }
.cwt-whitedice { display: flex; gap: 6px; flex: 0 0 auto; }
.cwt-eq { font: 700 16px/1 var(--pgr-font, system-ui, sans-serif); color: var(--pgr-dim, #aaa); }
.cwt-sum { min-width: 40px; height: 34px; padding: 0px 10px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--pgr-seat, rgba(255,255,255,.05)); border: 1px solid var(--pgr-line, #555); font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; font-variant-numeric: tabular-nums; }
.cwt-colourstrip { display: flex; gap: 6px; min-height: 67px; }
.cwt-colourcol { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cwt-pills { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.cwt-pill { display: flex; align-items: center; justify-content: center; padding: 2.5px 0px; border-radius: 5px; font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--pgr-shutBg, rgba(0,0,0,.28)); border: 1px solid var(--pgr-shutBorder, rgba(255,255,255,.07)); color: var(--pgr-shutNum, rgba(255,255,255,.28)); text-decoration: line-through; }
.cwt-pill-live { background: color-mix(in srgb, var(--cw-c) 20%, var(--pgr-tileBg, rgba(255,255,255,.1))); border-color: var(--cw-c); color: var(--pgr-txt, #eee); text-decoration: none; }
.cwt-pipdie { width: var(--cw-die, 26px); height: var(--cw-die, 26px); flex: 0 0 auto; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; padding: calc(var(--cw-die, 26px) * .14); border-radius: calc(var(--cw-die, 26px) * .22); background: var(--pgr-tileBg, #fff); border: 1px solid var(--pgr-line, #555); }
.cwt-pipdie.cwt-tinted { background: var(--cw-c); border-color: var(--cw-c); }
.cwt-pip { width: calc(var(--cw-die, 26px) * .15); height: calc(var(--cw-die, 26px) * .15); border-radius: 50%; background: transparent; }
.cwt-pip.on { background: var(--pgr-tileNum, #222); }
.cwt-pipdie.cwt-tinted .cwt-pip.on { background: var(--cw-on); }
.cwt-card { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: var(--pgr-panel, rgba(255,255,255,.06)); border: var(--pgr-panelBd, 1px solid rgba(255,255,255,.14)); --cw-cw: 23px; --cw-ch: 29px; --cw-cg: 2.5px; --cw-cr: 5px; --cw-rail: 22px; --cw-sc: 30px; --cw-fs: 12px; --cw-rowgap: 6px; }
.cwt-shell.cwt-roller-me .cwt-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pgr-sel, #e8c33a) 30%, transparent); }
.cwt-cardhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.cwt-cardtitle { font: 700 10px/1 var(--pgr-font, system-ui, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pgr-dim, #aaa); }
.cwt-cardhint { font: 600 10.5px/1 var(--pgr-font, system-ui, sans-serif); color: var(--pgr-dim, #aaa); }
.cwt-cardhint.cwt-hint-live { color: var(--pgr-sel, #e8c33a); }
.cwt-rows { display: flex; flex-direction: column; gap: 3px; }
.cwt-row { display: flex; align-items: center; gap: var(--cw-rowgap); }
.cwt-row.cwt-rowclosed { opacity: 0.72; }
.cwt-row.cwt-rowclosed .cwt-rail { opacity: 1; }
.cwt-rail { width: var(--cw-rail); height: var(--cw-ch); flex: 0 0 auto; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--cw-c); color: var(--cw-on); font: 800 calc(var(--cw-fs) * .86)/1 var(--pgr-font, system-ui, sans-serif); letter-spacing: 0.02em; }
.cwt-arrow { font: 600 calc(var(--cw-fs) * .62)/1 var(--pgr-font, system-ui, sans-serif); opacity: 0.8; }
.cwt-cells { display: flex; gap: var(--cw-cg); flex: 0 0 auto; }
.cwt-rowscore { width: var(--cw-sc); flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1.05; }
.cwt-rowmarks { font: 600 calc(var(--cw-fs) * .72)/1 var(--pgr-font, system-ui, sans-serif); color: var(--pgr-dim, #aaa); }
.cwt-rowpts { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; font-variant-numeric: tabular-nums; }
.cwt-cell { position: relative; width: var(--cw-cw); height: var(--cw-ch); flex: 0 0 auto; box-sizing: border-box; border-radius: var(--cw-cr); display: flex; align-items: center; justify-content: center; font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; font-variant-numeric: tabular-nums; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.cwt-num { position: relative; z-index: 1; }
.cwt-x { display: none; }
.cwt-hit { position: absolute; left: 50%; top: 50%; width: 100%; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 3; }
.cwt-hit.wide { width: 44px; }
.cwt-avail { background: var(--pgr-tileBg, rgba(255,255,255,.08)); color: var(--pgr-tileNum, #eee); border: 1px solid color-mix(in srgb, var(--cw-c) 40%, transparent); box-shadow: var(--pgr-tileShadow, inset 0 1px 0 rgba(255,255,255,.14)); }
.cwt-legal { background: color-mix(in srgb, var(--cw-c) 15%, var(--pgr-tileBg, rgba(255,255,255,.08))); color: var(--pgr-tileNum, #eee); border: 2px solid var(--cw-c); cursor: pointer; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cw-c) 24%, transparent); transform: translateY(-1px); }
.cwt-sel { background: color-mix(in srgb, var(--cw-c) 78%, transparent); color: var(--cw-on); cursor: pointer; border: 2px solid var(--pgr-txt, #eee); outline: 2px dashed var(--cw-c); outline-offset: 2px; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--cw-c) 70%, transparent); transform: translateY(-2px); }
.cwt-sel .cwt-num { opacity: 0.45; }
.cwt-sel .cwt-x { display: flex; position: absolute; inset: 0px; align-items: center; justify-content: center; font-size: calc(var(--cw-fs) * 1.5); color: var(--cw-on); opacity: 0.75; z-index: 2; }
.cwt-crossed { background: var(--cw-c); color: var(--cw-on); border: 1px solid var(--cw-c); box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 0px inset; }
.cwt-crossed .cwt-num { opacity: 0.42; }
.cwt-crossed .cwt-x { display: flex; position: absolute; inset: 0px; align-items: center; justify-content: center; font-size: calc(var(--cw-fs) * 1.55); color: var(--cw-on); z-index: 2; }
.cwt-burned { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pgr-txt, #fff) 12%, transparent) 0 1.5px,
                                                    transparent 1.5px 4.5px), var(--pgr-shutBg, #2a2a30); color: var(--pgr-shutNum, rgba(255,255,255,.3)); border: 1px solid var(--pgr-shutBorder, rgba(255,255,255,.07)); box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px inset; transform: translateY(1px) scaleY(0.94); }
.cwt-burned .cwt-num { text-decoration: line-through 1px; }
.cwt-shackle { position: absolute; box-sizing: border-box; }
.cwt-shackle { left: 50%; top: 22%; margin-left: calc(var(--cw-cw) * -.17); width: calc(var(--cw-cw) * .34); height: calc(var(--cw-ch) * .2); border-width: 2px 2px medium; border-style: solid solid none; border-color: currentcolor; border-image: none; border-radius: calc(var(--cw-cw) * .2) calc(var(--cw-cw) * .2) 0 0; }
.cwt-locked { background: var(--cw-c); color: var(--cw-on); border: 1px solid var(--cw-c); box-shadow: rgba(0, 0, 0, 0.22) 0px -2px 0px inset; }
.cwt-lockIdle { background: var(--pgr-seat, rgba(255,255,255,.04)); color: var(--pgr-dim, #888); opacity: 0.9; border: 1px dashed color-mix(in srgb, var(--cw-c) 45%, transparent); }
.cwt-lockIdle .cwt-shackle { opacity: 0.7; }
.cwt-cardfoot { display: flex; align-items: center; gap: 7px; margin-top: 5px; padding-top: 7px; border-top: 1px solid var(--pgr-line, #555); }
.cwt-footlabel { font: 700 9.5px/1 var(--pgr-font, system-ui, sans-serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pgr-dim, #aaa); }
.cwt-pens { display: flex; gap: 5px; }
.cwt-pen { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: var(--pgr-tileBg, rgba(255,255,255,.08)); border: 1px solid var(--pgr-line, #555); font: 700 13px/1 var(--pgr-font, system-ui, sans-serif); }
.cwt-pen.on { background: color-mix(in srgb, rgb(201, 80, 60) 82%, transparent); border-color: rgb(201, 80, 60); color: rgb(255, 255, 255); }
.cwt-total { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; font-variant-numeric: tabular-nums; }
.cwt-ctrl { flex: 0 0 auto; margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.cwt-feed { height: 16px; display: flex; align-items: center; font: 600 11.5px/16px var(--pgr-font, system-ui, sans-serif); color: var(--pgr-dim, #aaa); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cwt-readout { height: 26px; flex: 0 0 auto; border-radius: 8px; display: flex; align-items: center; padding: 0px 10px; font: 600 12px/1 var(--pgr-font, system-ui, sans-serif); color: var(--pgr-dim, #aaa); background: var(--pgr-seat, rgba(255,255,255,.04)); border: 1px solid var(--pgr-line, #555); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cwt-readout.cwt-readout-live { color: var(--pgr-txt, #eee); background: color-mix(in srgb, var(--pgr-sel, #e8c33a) 14%, var(--pgr-panel, transparent)); border-color: color-mix(in srgb, var(--pgr-sel, #e8c33a) 50%, transparent); }
.cwt-btnrow { display: flex; gap: 8px; }
.cwt-confirm, .cwt-pass { height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 0px 10px; text-align: center; line-height: 1.15; cursor: pointer; font-family: var(--pgr-font, system-ui, sans-serif); font-weight: 700; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cwt-confirm { flex: 1.35 1 0%; font-size: 15px; background: var(--pgr-btn, #2a2723); color: var(--pgr-btnTxt, #faf7f0); border: 1px solid var(--pgr-line, #555); }
.cwt-pass { flex: 1 1 0%; font-size: 13px; background: var(--pgr-panel, transparent); color: var(--pgr-txt, #eee); border: 1px solid var(--pgr-line, #555); }
.cwt-pass.cwt-pass-warn { color: rgb(255, 155, 133); border-color: rgba(201, 80, 60, 0.6); }
.cwt-confirm:disabled, .cwt-pass:disabled { opacity: 0.38; cursor: default; }
.cwt-breakdown { display: flex; flex-direction: column; gap: 4px; }
.cwt-bd-head, .cwt-bd-line { display: grid; grid-template-columns: 18px minmax(0px, 1fr) auto 34px 42px; gap: 6px; align-items: center; }
.cwt-bd-head { font: 800 8.5px / 1 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
.cwt-bd-head > span:nth-child(4), .cwt-bd-head > span:nth-child(5) { text-align: right; }
.cwt-bd-line { padding: 5px 6px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); font: 600 12px / 1 system-ui, sans-serif; }
.cwt-bd-line.me { background: rgba(255, 255, 255, 0.09); }
.cwt-bd-line.win { box-shadow: rgb(232, 195, 58) 2px 0px 0px inset; }
.cwt-bd-place { font-weight: 800; opacity: 0.65; text-align: center; }
.cwt-bd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cwt-bd-rows { display: flex; gap: 4px; }
.cwt-bd-row { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 20px; padding: 2px 3px; border-radius: 4px; background: color-mix(in srgb, var(--cw-c) 26%, transparent); border: 1px solid color-mix(in srgb, var(--cw-c) 55%, transparent); }
.cwt-bd-row b { font: 800 10px / 1 system-ui, sans-serif; }
.cwt-bd-row i { font: 600 8.5px / 1 system-ui, sans-serif; opacity: 0.75; }
.cwt-bd-head .cwt-bd-row { padding: 2px 3px; }
.cwt-bd-pen, .cwt-bd-total { text-align: right; font-variant-numeric: tabular-nums; }
.cwt-bd-total { font-weight: 800; font-size: 14px; }
.cwt-bd-note { font: 600 9px / 1 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.45; text-align: right; }
.cwt-rollerslot:empty, .cwt-timerslot:empty { display: none; }
.dr-die { will-change: transform; transition: box-shadow 0.2s, border-color 0.2s, background 0.2s; }