/* ===========================================================
   Squelch — UI layer added on top of app.css:
   mode buttons, theme picker, store, chat drawer, modals.
   Everything reads theme tokens, nothing hardcodes colour.
   =========================================================== */

/* ───────── home mode buttons: three equally weighted ───────── */
.btn--mode {
  width: 100%;
  min-height: 76px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--felt-600), var(--felt-700));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--text);
  box-shadow: var(--shadow-lift);
  text-align: left;
}
.btn--mode span {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  color: var(--bone);
}
.btn--mode em { font-size: 13px; font-style: normal; color: var(--text-dim); }
.btn--mode:active { transform: translateY(1px); }
.btn--mode::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ember);
  border-top: 2px solid var(--ember);
  transform: translateY(-50%) rotate(45deg);
}
.btn--mode { position: relative; }

/* ───────── stepper / segmented / toggle ───────── */
.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0; }
.stepper b { font-size: 34px; min-width: 44px; text-align: center; color: var(--bone); }
.seg {
  display: flex;
  gap: 6px;
  background: var(--felt-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px;
}
.seg button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: calc(var(--r-md) - 3px);
  background: none;
  color: var(--text-dim);
  font: 700 14px var(--font-ui);
}
.seg button.is-on { background: var(--felt-500); color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-strong); }
.toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 4px;
  min-height: 48px;
}
.toggle input { width: 22px; height: 22px; accent-color: var(--ember); flex: none; margin-top: 2px; }
.toggle span { font-weight: 600; }
.toggle em { display: block; font-style: normal; font-size: 13px; color: var(--text-dim); font-weight: 400; }
.bot-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.bot-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-dim); }
.bot-list .tok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font-ui); color: var(--ink); }
.bot-list select {
  margin-left: auto;
  background: var(--felt-800);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  min-height: 40px;
  font: 600 13px var(--font-ui);
}

/* ───────── mini dice preview (used in tiles, reveal, store) ───────── */
.mini-table {
  position: relative;
  height: 92px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  background-color: var(--felt-900);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
}
.mini-table::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain-img);
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  pointer-events: none;
}
.mini-die {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--die-1) 0%, var(--die-2) 58%, var(--die-3) 100%);
  box-shadow: var(--die-shadow);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 3px;
  z-index: 1;
}
.mini-die i { width: 5px; height: 5px; border-radius: 50%; background: var(--pip); place-self: center; }
.mini-score {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 15px;
  color: var(--bone);
  letter-spacing: var(--display-track);
}
.mini-label {
  position: absolute;
  left: 8px;
  top: 6px;
  z-index: 1;
  font: 700 10px var(--font-ui);
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-table:has(.mini-label) { padding-top: 14px; }
/* a long room name ends in an ellipsis before the price badge, not under it */
.tile:has(.tile-badge) .mini-label { right: 66px; }

/* ───────── theme + dice grids ───────── */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.die-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--felt-700);
  overflow: hidden;
  text-align: left;
  color: var(--text);
  display: block;
  width: 100%;
}
.tile.is-on { border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember) inset; }
.tile-meta { padding: 8px 10px 10px; }
.tile-meta b { display: block; font-size: 14px; color: var(--bone); }
.tile-meta em { display: block; font-style: normal; font-size: 11px; color: var(--text-faint); line-height: 1.3; }
.tile-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font: 800 10px var(--font-ui);
  letter-spacing: 0.08em;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--felt-900);
  color: var(--amber);
  border: 1px solid var(--line-strong);
}
.tile-badge.is-owned { color: var(--mint); }
.tile-badge.is-trial { color: var(--ember-hot); }
.tile-actions { display: flex; gap: 6px; padding: 0 10px 10px; }
.tile-actions .chip-btn { flex: 1; }
.chip-btn {
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--felt-600);
  color: var(--text);
  font: 700 12px var(--font-ui);
}
.chip-btn--buy { background: var(--ember); color: var(--cta-ink); border-color: transparent; }
.preview-strip { margin-bottom: 14px; }
.preview-strip .mini-table { height: 128px; }
.preview-strip .mini-die { width: 38px; height: 38px; border-radius: 9px; }
.preview-strip .mini-die i { width: 7px; height: 7px; }

/* ───────── store ───────── */
.store-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.store-tabs::-webkit-scrollbar { display: none; }
.store-tabs button {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--felt-700);
  color: var(--text-dim);
  font: 700 13px var(--font-ui);
}
.store-tabs button.is-on { background: var(--felt-500); color: var(--bone); border-color: var(--line-strong); }
.hero-sku {
  border: 1px solid var(--ember);
  border-radius: var(--r-lg);
  padding: 14px;
  background: linear-gradient(180deg, var(--felt-600), var(--felt-800));
  box-shadow: var(--shadow-lift);
}
.hero-sku h3 { margin: 0; font-family: var(--font-display); font-size: 24px; color: var(--bone); }
.hero-sku .save { color: var(--mint); font-weight: 800; font-size: 13px; }
.hero-sku .was { color: var(--text-faint); text-decoration: line-through; }
.hero-strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.hero-strip::-webkit-scrollbar { display: none; }
.hero-strip .mini-table { width: 108px; flex: none; height: 66px; }
.price-row { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 10px; }
.price-row b { font-family: var(--font-display); font-size: 30px; color: var(--amber); }
.club-perks { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.club-perks li { display: flex; gap: 9px; font-size: 14px; color: var(--text); }
.club-perks li::before { content: '✓'; color: var(--mint); font-weight: 900; }
.club-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.owned-note { color: var(--mint); font-weight: 700; font-size: 13px; }

/* ───────── chat drawer (never covers dice or BANK/ROLL) ───────── */
.comms {
  position: absolute;
  /* clears the round “?” Rules button in the game topbar (44px + its 10px gutter),
     which the comms row used to sit on top of */
  right: 62px;
  top: calc(var(--safe-t) + 6px);
  z-index: 7;
  display: flex;
  gap: 6px;
}
/* the 3D table re-stacks every direct child of the game screen (app.css), which
   otherwise drops this row into the page flow at the bottom-left */
.screen--game.has-3d > .comms,
.screen--game.has-3d > .drawer { position: absolute; }
.comms-btn {
  position: relative;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--felt-800);
  color: var(--text);
  font: 700 12px var(--font-ui);
  display: flex;
  align-items: center;
  gap: 6px;
}
.comms-btn .unread {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--ember);
  color: var(--cta-ink);
  font: 800 11px var(--font-ui);
  display: grid;
  place-items: center;
  padding: 0 4px;
}
.drawer {
  position: absolute;
  left: 0;
  right: 0;
  /* the turn log is a strip at the floor of the game screen: the drawer stops
     just above it rather than burying it */
  bottom: calc(var(--logbar-h) + var(--safe-b));
  z-index: 20;
  max-height: 62vh;
  display: flex;
  flex-direction: column;
  background: var(--felt-800);
  border-top: 1px solid var(--line-strong);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.55);
  padding-bottom: 8px;
  animation: drawer-up 0.24s ease;
  /* nothing may spill past the rounded card onto the dice or the dock */
  overflow: hidden;
}
/* Only the message list gives up height when the drawer is short. The grab
   handle, head, quick phrases and composer keep their full size, so the chips
   can never end up squeezed underneath the input. */
.drawer-grab,
.drawer-head,
.quick-row,
.chat-form { flex: 0 0 auto; }
.drawer-grab { order: 0; }
.drawer-head { order: 1; }
.chat-settings { order: 2; }
.chat-feed { order: 3; }
.quick-row { order: 4; }
.chat-form { order: 5; }
@keyframes drawer-up { from { transform: translateY(101%); } }
.drawer-grab { padding: 10px 0 4px; display: grid; place-items: center; }
.drawer-grab span { width: 44px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 14px 8px; }
.drawer-head b { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; color: var(--bone); }
.drawer-head-actions { display: flex; gap: 6px; }
.chat-feed {
  list-style: none;
  margin: 0;
  padding: 4px 14px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-feed li { font-size: 14px; line-height: 1.35; }
.chat-msg { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.chat-msg .tok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 11px var(--font-ui); color: var(--ink); }
.chat-msg .who { font-weight: 800; color: var(--bone); font-size: 12px; }
.chat-msg .when { color: var(--text-faint); font-size: 11px; margin-left: 6px; }
.chat-msg .body { color: var(--text); word-break: break-word; }
.chat-msg.is-me .body { color: var(--bone); }
.chat-sys {
  font: 700 11px var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-left: 2px solid var(--line-strong);
  padding-left: 8px;
}
.chat-sys.is-squelch { color: var(--ember-hot); border-color: var(--ember); }
.chat-sys.is-final { color: var(--amber); border-color: var(--amber); }
.quick-row { display: flex; gap: 6px; padding: 4px 14px 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.quick-row::-webkit-scrollbar { display: none; }
.quick-row button {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--felt-700);
  color: var(--text);
  font: 700 13px var(--font-ui);
}
.chat-form { display: flex; gap: 8px; padding: 0 14px 12px; }
.chat-form input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--felt-900);
  color: var(--text);
  font: 500 16px var(--font-ui);
}
.chat-form .btn { min-height: 48px; padding: 0 16px; }
.chat-settings { padding: 2px 14px 12px; border-bottom: 1px solid var(--line); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.drawer.is-settings .chat-settings {
  flex: 1 1 auto;
  /* fades the last row so a long roster reads as scrollable, not as clipped */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
}
.drawer.is-settings .chat-feed,
.drawer.is-settings .quick-row { display: none; }
.chat-roster { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.chat-roster li { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.chat-roster .tok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font-ui); color: var(--ink); position: relative; }
.chat-roster .tok.is-club::after {
  content: '★';
  position: absolute;
  right: -3px;
  bottom: -3px;
  font-size: 10px;
  color: var(--amber);
}
.chat-roster .st { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.chat-roster button { margin-left: auto; }

/* ───────── sheets, modals, offers ───────── */
.sheet, .modal, .reveal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 6, 5, 0.66);
  backdrop-filter: blur(3px);
  padding: 16px;
  padding-bottom: calc(16px + var(--safe-b));
}
.modal, .reveal { align-items: center; }
.sheet-card, .modal-card, .reveal-card {
  width: 100%;
  max-width: 420px;
  background: var(--felt-700);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: 18px;
  display: grid;
  gap: 10px;
  box-shadow: var(--shadow-lift);
  animation: sheet-in 0.22s ease;
}
@keyframes sheet-in { from { transform: translateY(14px); opacity: 0; } }
.sheet-card h3, .modal-card h3 { margin: 0; font-family: var(--font-display); font-size: 22px; color: var(--bone); }
.modal-sub { margin: 0; color: var(--text-dim); font-size: 14px; }
.demo-flag {
  margin: 0;
  font: 800 10px var(--font-ui);
  letter-spacing: 0.14em;
  color: var(--amber);
  border: 1px dashed var(--amber);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  text-align: center;
}
.pay-row { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 10px; }
.pay-row b { font-family: var(--font-display); font-size: 26px; color: var(--amber); }
.ad-face {
  height: 150px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background: var(--felt-900);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 54px;
  color: var(--text-dim);
}
.recover-btns { display: flex; gap: 8px; }
.recover-btns .btn { flex: 1; }
.recover-offer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(var(--safe-b) + 150px);
  z-index: 12;
  background: var(--felt-800);
  border: 1px solid var(--ember);
  border-radius: var(--r-lg);
  padding: 12px;
  display: grid;
  gap: 6px;
  box-shadow: var(--shadow-lift);
}
.recover-offer b { font-family: var(--font-display); color: var(--bone); }
.recover-offer p { margin: 0; font-size: 13px; color: var(--text-dim); }
.set-table, .unlock-nudge {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--felt-700);
  padding: 14px;
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.set-table b, .unlock-nudge b { font-family: var(--font-display); font-size: 18px; color: var(--bone); }
.set-table p, .unlock-nudge p { margin: 0; font-size: 13px; color: var(--text-dim); }
/* Two columns, not three: at 390px a third column leaves ~89px for the label,
   which ellipsises the longest names — "KITCHEN TABLE" became "KITCHEN T…" and
   the "RETRO PLASTIC" die the same. Two columns give ~145px, which fits every
   name in the catalogue with room to spare. */
.set-table-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 260px; overflow-y: auto; }
.set-table-grid .mini-table { height: 58px; }
.reveal-card { text-align: center; }
.reveal-card em { font-style: normal; color: var(--text-dim); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.reveal-card h3 { font-size: 34px; }
.reveal-dice { display: flex; justify-content: center; gap: 8px; }

@media (min-width: 900px) {
  .theme-grid { grid-template-columns: repeat(3, 1fr); }
  .die-grid { grid-template-columns: repeat(4, 1fr); }
  .drawer { left: auto; right: 16px; bottom: 16px; width: 380px; border-radius: var(--r-xl); max-height: 70vh; }
}

/* ───────── house-rules editor extras ───────── */
.field--num input { max-width: 100%; }
.field-hint {
  font-style: normal;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.4;
}
.preset-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0 0;
  flex-wrap: wrap;
}
.preset-row .chip-btn:first-child { flex: 1; text-align: left; }

/* a house rule that is fixed by the game, not editable */
.fixed-rule {
  display: block;
  padding: 14px 14px 15px;
  margin: 6px 0 2px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
  border-radius: 12px;
  background: color-mix(in srgb, var(--felt-800) 70%, transparent);
}
.fixed-rule__label { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fixed-rule__tag {
  font: 800 10px/1 var(--font-ui);
  letter-spacing: 0.1em;
  color: var(--ember);
  border: 1px solid color-mix(in srgb, var(--ember) 55%, transparent);
  border-radius: 999px;
  padding: 4px 7px;
}
.fixed-rule__hint { display: block; font-style: normal; font-size: 13px; color: var(--text-dim); margin-top: 6px; }

/* ───────── shake to roll ───────── */
#btn-roll.can-shake:not(:disabled) { position: relative; }
#btn-roll.can-shake:not(:disabled)::after {
  content: 'or shake';
  position: absolute;
  left: 0; right: 0;
  bottom: 4px;
  font: 700 9px var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
  pointer-events: none;
}
#btn-roll.is-shaking {
  /* --shake 0..1: the button swells and glows with the strength of the shake */
  transform: scale(calc(1 + var(--shake, 0.2) * 0.06));
  box-shadow: 0 5px 0 -1px var(--cta-shadow), 0 0 calc(10px + var(--shake, 0.2) * 26px) rgba(255, 220, 160, calc(0.35 + var(--shake, 0.2) * 0.45));
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

/* ───────── SCORECARD (real dice) ───────── */
#screen-scorecard .tok { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font-ui); color: var(--ink); }
.sc-name-row .sc-move { width: 36px; height: 36px; flex: 0 0 36px; font-size: 17px; }
.sc-name-row .sc-move:disabled { opacity: 0.25; cursor: default; }
.sc-rules { margin: 14px 2px 0; font: 600 12px var(--font-ui); color: var(--text-dim); line-height: 1.45; }
#sc-play .sc-rules { margin: 0 2px 10px; }
.sc-banner {
  margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(229, 163, 60, 0.14); border: 1px solid rgba(229, 163, 60, 0.45);
  color: var(--bone); font: 700 14px/1.35 var(--font-ui);
}
.sc-banner.is-final { background: rgba(224, 83, 61, 0.16); border-color: rgba(224, 83, 61, 0.55); }
.sc-list, .sc-final { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-row {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px 12px;
}
.sc-head { display: flex; align-items: center; gap: 10px; }
.sc-rank {
  flex: 0 0 auto; min-width: 40px; padding: 3px 6px; border-radius: 999px; text-align: center;
  font: 800 12px var(--font-ui); letter-spacing: 0.02em; color: var(--text-dim);
  border: 1px solid var(--line-strong); font-variant-numeric: tabular-nums;
}
.sc-rank.is-first { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.sc-name { flex: 1; min-width: 0; font: 700 17px var(--font-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-total { font: var(--display-weight) 24px var(--font-display); letter-spacing: var(--display-track); color: var(--bone); font-variant-numeric: tabular-nums; }
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0 50px; font: 600 13px var(--font-ui); color: var(--text-dim); }
.sc-tag { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--line-strong); }
.sc-tag.is-need { color: var(--ink); background: var(--ember-hot); border-color: var(--ember-hot); }
.sc-tag.is-mark { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.sc-tag.is-jump { color: var(--amber); border-color: rgba(229, 163, 60, 0.6); }
.sc-tag.is-done, .sc-tag.is-open { color: var(--text-dim); }
.sc-entry { display: flex; gap: 8px; margin-top: 10px; }
.sc-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: rgba(0, 0, 0, 0.25); color: var(--text);
  font: 700 18px var(--font-ui); font-variant-numeric: tabular-nums;
}
.sc-input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.sc-entry .btn { min-height: 44px; padding: 0 14px; flex: 0 0 auto; font-size: 14px; }
.sc-err { margin: 6px 0 0; font: 600 13px var(--font-ui); color: var(--ember-hot); }
.sc-hist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sc-chip {
  padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim); font: 600 12px var(--font-ui); font-variant-numeric: tabular-nums; cursor: pointer;
}
.sc-chip.is-sq { color: var(--ember-hot); }
.sc-help { margin-top: 14px; }
.sc-final-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.sc-final-row.is-winner { border-color: var(--amber); background: rgba(229, 163, 60, 0.12); }
#sc-dock .btn:disabled { opacity: 0.4; }
/* scorecard v62: sharing, following, straights */
#screen-scorecard .topbar .icon-btn#sc-standings { margin-left: 8px; }
.sc-share-opt { display: flex; gap: 10px; align-items: flex-start; margin: 14px 2px 0; font: 500 13px/1.45 var(--font-ui); color: var(--text-dim); cursor: pointer; }
.sc-share-opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--amber); flex: 0 0 20px; }
.sc-share-opt b { color: var(--text); }
.sc-follow { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.sc-follow .sect { margin: 0 0 8px; }
.sc-follow-row { display: flex; gap: 8px; }
.sc-follow-row .btn { min-height: 44px; padding: 0 18px; }
.sc-code { text-transform: uppercase; letter-spacing: 0.3em; text-align: center; max-width: 160px; }
.sc-sharebar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 10px 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); }
.sc-code-chip { font: 600 13px var(--font-ui); color: var(--text-dim); }
.sc-code-chip b { font: 900 20px var(--font-ui); letter-spacing: 0.18em; color: var(--bone); margin-left: 4px; }
.sc-sync { flex: 1; font: 600 12px var(--font-ui); color: var(--text-faint); }
.sc-sync.is-ok { color: var(--mint); }
.sc-sync.is-offline { color: var(--amber); }
.sc-share-btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
.sc-link { margin: -4px 2px 10px; font: 600 12px/1.4 var(--font-ui); color: var(--text-dim); word-break: break-all; user-select: all; }
.sc-me { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid rgba(229, 163, 60, 0.45); background: rgba(229, 163, 60, 0.1); display: grid; gap: 4px; }
.sc-me.is-picked { border-color: var(--line); background: rgba(255, 255, 255, 0.03); }
.sc-me b { font: 800 14px var(--font-ui); color: var(--bone); }
.sc-me > span { font: 500 12px var(--font-ui); color: var(--text-dim); }
.sc-me-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sc-me-btn { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, 0.2); color: var(--text); font: 700 13px var(--font-ui); cursor: pointer; }
.sc-me-btn.is-on { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.sc-row.is-me, .sc-final-row.is-me { border-color: rgba(229, 163, 60, 0.6); }
.sc-final-row.is-pick { cursor: pointer; }
.sc-st-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sc-straight { min-height: 36px; padding: 0 12px; font-size: 13px; }
.sc-st-clear { background: none; border: none; color: var(--text-dim); font: 600 12px var(--font-ui); text-decoration: underline; cursor: pointer; padding: 6px; }
.sc-st-count { font: 700 12px var(--font-ui); color: var(--amber); }
.sc-chip.is-st { color: var(--amber); border-color: rgba(229, 163, 60, 0.45); }
span.sc-chip { cursor: default; }
.sc-corner { min-height: 36px; padding: 0 12px; font-size: 13px; }
.sc-pl-name { flex: 1; min-width: 0; font: 700 16px var(--font-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 4px; }
#sc-players-sheet .sheet-card { max-height: calc(100vh - 40px); overflow-y: auto; }
#sc-dock .btn { padding-left: 12px; padding-right: 12px; }
/* Delete my data */
#data-sheet .sheet-card { max-height: calc(100vh - 40px); overflow-y: auto; }
.data-opt { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.4; color: var(--text-dim); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; }
.data-opt b { color: var(--bone); }
.data-opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ember); }
.data-id { margin: 0; font-size: 13px; color: var(--text-dim); }
.data-id code { font-family: ui-monospace, Menlo, monospace; color: var(--bone); user-select: all; }
.data-warn { margin: 0; font-size: 13px; color: var(--ember); }
.data-msg { margin: 0; font-size: 14px; color: var(--bone); }
.data-msg.is-bad { color: var(--ember); }
#data-sheet .btn--danger { font-weight: 800; }
/* Glow Dice Pack: all eight colours visible at once, four to a row */
.glow-strip { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
.glow-strip .mini-table { width: auto; height: 62px; }
.glow-strip .mini-label { left: 0; right: 0; text-align: center; letter-spacing: 0.08em; }
/* dice categories: standard dice and Special Dice */
.dice-cat { margin: 18px 0 6px; font-family: var(--font-display); font-size: 18px; color: var(--bone); }
.grid-head { grid-column: 1 / -1; margin: 8px 0 0; font: 800 11px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.grid-head:first-child { margin-top: 0; }
/* "NEW" tag on the newest die, top-left of its tile */
.tile-new {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  padding: 4px 7px; border-radius: 999px;
  background: var(--accent, #ff5a36); color: #14100c;
  font: 800 10px var(--font-ui); letter-spacing: 0.12em;
}
/* publisher + contact line at the foot of Delete my data */
.data-contact { margin: 14px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.data-contact a { color: inherit; text-decoration: underline; }

/* ───────── tutorial ───────── */
.btn--mode.btn--tutorial {
  background: linear-gradient(180deg, rgba(224, 83, 61, 0.20), rgba(224, 83, 61, 0.06)), linear-gradient(180deg, var(--felt-600), var(--felt-700));
  border-color: var(--ember);
}
.tut-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tut-kicker { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); font-weight: 700; }
.tut-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  color: var(--bone);
  line-height: 1.1;
}
.tut-p, .tut-foot { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.tut-foot { color: var(--text-dim); font-size: 14px; }
.tut-dice .mini-table { height: 96px; }
.tut-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.tut-steps li::marker { color: var(--ember); font-weight: 700; }
.tut-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tut-row { padding: 10px 12px; border-radius: var(--r-md, 10px); background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); }
.tut-row dt { font-weight: 700; color: var(--bone); font-size: 15px; }
.tut-row dd { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-dim); }
.tut-action { margin-top: 2px; }
.tut-dock { align-items: center; }
.tut-dock .btn { flex: 0 0 auto; min-width: 76px; padding-left: 14px; padding-right: 14px; }
.tut-dock .btn:disabled { opacity: 0.35; }
.tut-dots { flex: 1; display: flex; justify-content: center; gap: 0; min-width: 0; }
.tut-dot {
  width: 16px; height: 32px; padding: 0; border: 0; flex: 0 0 auto; background: none; cursor: pointer; position: relative;
}
.tut-dot::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--line-strong);
}
.tut-dot.is-on::before { background: var(--ember); width: 10px; height: 10px; margin: -5px 0 0 -5px; }