/* Shared play-page styles. Loaded after each game's styles.css.
   Dark tokens apply only on html.is-play — never leak onto the washi site. */
@import url("./product.css?v=5ba10a6bf2d654655f2c972a254d9669690195ad");
@import url("./breadcrumbs.css?v=5ba10a6bf2d654655f2c972a254d9669690195ad");

html.is-play {
  color-scheme: dark;
  --paper: #1A1A1A;
  --paper-bright: #22221F;
  --paper-wash: #1F1F1C;
  --paper-shade: #141412;
  --ink: #F7F5F0;
  --ink-strong: #F7F5F0;
  --ink-button: #F7F5F0;
  --muted: #A39B90;
  --note: #8A847C;
  --line: #2E2C28;
  --line-strong: #C8C0B4;
  --grid-thin: #3A3632;
  --mark-stroke: #3A3632;
  --accent: #8A9BB0;
  --accent-soft: #2A3140;
  --accent-hover: #A3B2C4;
  --gold: #8A9BB0;
  --gold-fill: #384B6B;
  --gold-border: #5A6B88;
  --gold-hover: #4A5C7A;
  --gold-soft: #2A3140;
  --gold-wash: #242830;
  --gold-active: #2E3644;
  --gold-hint: #2E3644;
  --gold-hint-ring: #8A9BB0;
  --entry: #C5CDE0;
  --same: #1E2A22;
  --ok: #8A9E6E;
  --matcha: #8A9E6E;
  --hint-witness: #1E2A22;
  --bad: #C54831;
  --vermillion: #C54831;
  --cell: #1C1C1A;
  --btn: #2A2824;
  --btn-hover: #32302C;
  --btn-hover-line: #8A9BB0;
  --debug-bg: #22221F;
  --debug-ink: #CFC6BA;
  --debug-label: #9A9288;
  --shadow: none;
  --shadow-indigo: none;
  --bg: #1A1A1A;
  --bg-2: #22221F;
  --given: #F7F5F0;
  --grid-strong: #C8C0B4;
  --box: #C8C0B4;
  --sel: #8A9BB0;
  --sel-bg: #2A3140;
  --hi: #242830;
  --hint-place: #2E3644;
  --hint-unit: #161614;
}

.play-context {
  display: grid;
  gap: 2px;
  margin: 0 0 8px;
}

.play-context-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.play-context-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.play-context-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

.play-day-band {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.play-day-band select {
  min-height: 36px;
  min-width: 7.5rem;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.88rem;
}

.play-day-band-static {
  margin: 0;
  pointer-events: none;
}

.play-community-creator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 100%;
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.8rem;
}

.play-community-identity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.play-community-created-by {
  white-space: nowrap;
}

.play-community-user {
  color: var(--ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.play-community-identity:hover .play-community-user {
  text-decoration: underline;
}

.play-community-avatar {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--indigo));
  border-radius: 50%;
  background: color-mix(in srgb, var(--indigo) 10%, var(--paper-bright));
  object-fit: cover;
}

.play-community-avatar img,
img.play-community-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.play-community-avatar.is-initials {
  display: inline-grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
}

@media (max-width: 430px) {
  .play-context-row {
    flex-wrap: nowrap;
    gap: 6px 8px;
    min-width: 0;
  }
  .play-context-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
  }
  .play-day-band,
  .play-day-band-static {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.play-context-nav {
  margin: 0;
}

.play-back {
  color: var(--muted);
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
}

.play-back:hover {
  color: var(--ink);
}

.play-more {
  display: grid;
  gap: 8px;
  padding: 8px 0 4px;
}

.play-more[hidden] { display: none; }

.play-more button,
.play-tool-link {
  min-height: 44px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.side .actions.is-parked,
.side .toggles.is-parked {
  display: none !important;
}

.side .toggles,
#playControls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#playControls #confirmDrafts {
  grid-column: 1 / -1;
}

html.is-play #restart {
  display: none !important;
}

.meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  background: var(--paper-bright);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 20px;
}

.board {
  border-radius: 0;
  box-shadow: none;
}

.cell {
  transition: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .cell:hover:not(.sel) {
    background: var(--gold-wash);
  }
}

.clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.clock #timer {
  flex: 1 1 auto;
  min-width: 0;
}

.clock[hidden],
.clock.is-clock-hidden {
  display: none;
}

.flag-error-why {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.35;
}

.flag-error-why:not([hidden]) {
  display: block;
}

@media (max-width: 760px) {
  .flag-error-why {
    font-size: 0.98rem;
    line-height: 1.4;
    margin: 10px 0 4px;
  }
  #flagErrorWhy,
  .hint-why.flag-error-why {
    order: 5 !important;
  }
}

.cell,
.keypad button,
.cb-key,
.cb-slot,
.cb-key-back {
  touch-action: manipulation;
}

.keypad button {
  background: var(--paper-bright);
  transition: none;
}

.keypad button:focus:not(:focus-visible),
.cb-key:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .keypad button:hover {
    transform: none;
    border-color: var(--accent);
  }
}

.keypad button:active {
  transform: none;
}

.win,
.pause-overlay {
  z-index: 9;
}

.win {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
}

/* Francis 2026-0918 item 14: the pause backdrop must fully mask the board —
   no translucent peek-through, unlike the win celebration overlay above
   (kept as-is). Board/history content is also `data-pause-mask`ed to
   `display:none` by shared/pause-mask.js, so this is defense in depth. */
.pause-overlay {
  background: var(--paper-bright);
}

.win.hidden,
.pause-overlay.hidden,
.win[hidden],
.pause-overlay[hidden] {
  display: none !important;
}

/* Shared pause/board-mask utility class (see shared/pause-mask.js). Some
   per-game stylesheets already define an equivalent .hidden rule; this
   keeps it available everywhere shared/play.css loads. */
.hidden {
  display: none !important;
}

.achv-toast-stack {
  position: fixed;
  z-index: 40;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  max-height: min(78vh, 520px);
  overflow: hidden;
  pointer-events: none;
}

.achv-toast-stack .achv-toast,
.achv-toast-stack .achv-card {
  pointer-events: auto;
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  max-width: none;
  transform: translateY(10px) scale(0.98);
}

.achv-toast,
.achv-card {
  position: fixed;
  z-index: 40;
  left: auto;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(360px, calc(100vw - 24px));
  min-width: 0;
  max-width: min(380px, calc(100vw - 24px));
  padding: 16px 40px 16px 16px;
  background: color-mix(in srgb, var(--premium, #62417A) 92%, #1a1022);
  border: 1px solid color-mix(in srgb, var(--premium-ink, #F4D675) 45%, var(--premium, #62417A));
  border-radius: 16px;
  box-shadow: 0 14px 36px color-mix(in srgb, #2B2419 28%, transparent);
  color: #F7F0E2;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.achv-card.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.achv-card.is-out {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}

.achv-card.is-reduced,
.achv-card.is-reduced.is-in,
.achv-toast-stack.is-reduced .achv-card {
  transition: none;
  transform: none;
  opacity: 1;
}

.achv-card .achv-seal {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cta, #C88708) 16%, var(--paper-bright, #FFF9E8));
  font-weight: 750;
}

.achv-card .achv-seal-svg {
  width: 26px;
  height: 26px;
}

html.is-official-daily #playDayBand,
html.is-official-daily .play-day-band select,
html.is-official-daily #bandField,
html.is-official-daily #band {
  display: none !important;
}

.assist-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--ink, #2B2419) 38%, transparent);
}

.assist-dialog-card {
  width: min(28rem, 100%);
  padding: 28px 24px 22px;
  background: var(--paper-bright, #FFF9E8);
  border: 1px solid var(--line, #DDBB72);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-card, 0 10px 28px rgba(45, 36, 27, 0.12));
  color: var(--ink, #2B2419);
}

.assist-dialog-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-display, inherit);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
}

.assist-dialog-card p {
  margin: 0 0 22px;
  color: var(--muted, #6A5638);
  font-size: 0.95rem;
  line-height: 1.5;
}

.assist-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.assist-dialog-actions .assist-cancel,
.assist-dialog-card button.assist-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 88px;
  padding: 8px 14px;
  border: 1px solid var(--line, #DDBB72);
  border-radius: var(--play-key-radius, 11px);
  background: transparent;
  color: var(--muted, #6A5638);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.assist-dialog-actions .assist-ok,
.assist-dialog-actions a.assist-ok,
.assist-dialog-actions a.primary.assist-ok,
.assist-member-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 132px;
  padding: 10px 18px;
  border: 1px solid var(--play-premium, #62417A);
  border-radius: var(--play-key-radius, 11px);
  background: var(--play-premium, #62417A);
  color: var(--play-premium-ink, #F4D675);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--play-premium, #62417A) 35%, transparent),
    0 2px 6px color-mix(in srgb, var(--play-premium, #62417A) 18%, transparent);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .assist-dialog-actions .assist-cancel:hover {
    color: var(--ink, #2B2419);
    border-color: var(--ink, #2B2419);
    background: var(--paper-bright, #FFF9E8);
  }
  .assist-dialog-actions .assist-ok:hover,
  .assist-dialog-actions a.assist-ok:hover,
  .assist-member-cta:hover {
    background: var(--play-premium-deep, #4E3363);
    border-color: var(--play-premium-deep, #4E3363);
    color: var(--play-premium-ink, #F4D675);
    text-decoration: none;
  }
}

.play-assisted-note {
  margin: 0 0 8px;
  color: var(--ink-soft, #6B6154);
}

.home-row-actions,
.archive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.achv-toast[hidden],
.achv-toast.is-hidden {
  display: none !important;
}

.achv-toast-stack .achv-toast,
.achv-toast-stack .achv-card,
body .achv-toast-stack .achv-toast {
  background: color-mix(in srgb, var(--premium, #62417A) 92%, #1a1022);
  border: 1px solid color-mix(in srgb, var(--premium-ink, #F4D675) 45%, var(--premium, #62417A));
  color: #F7F0E2;
}

.achv-toast-stack .achv-card-copy,
.achv-toast-stack .achv-card-copy *,
.achv-toast-stack .achv-toast strong,
.achv-toast-stack .achv-toast p,
.achv-toast-stack .achv-toast span,
.achv-toast-stack .achv-toast a,
.achv-toast-stack .achv-toast-kicker,
.achv-toast-stack .achv-toast-desc,
.achv-toast-stack .achv-toast-xp,
.achv-toast-stack .achv-toast-dig,
.achv-toast-stack .achv-toast-dismiss {
  color: #F7F0E2;
}

/* Explicit contrast inside the framed DIG badge on the purple toast.
   This overrides the toast's blanket light text in light and dark themes. */
.achv-toast-stack .dig-compact {
  background: #FFF4CF;
  border-color: #D4A72C;
  color: #241A14 !important;
}

.achv-toast-stack .dig-compact .dig-compact-value {
  color: #241A14 !important;
}

.achv-toast-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F4D675 !important;
}

.achv-toast strong {
  display: block;
  color: #FFFDF8 !important;
}

.achv-toast-xp {
  margin: 6px 0 0;
  color: #F4D675 !important;
}

.achv-toast-dig {
  margin: 6px 0 0;
  color: #F4D675 !important;
}

.achv-toast-reward {
  margin: 6px 0 0;
  color: #F3E6D4 !important;
  line-height: 1.35;
}

.achv-toast-dig-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px;
  font-weight: 700;
  color: #F4D675 !important;
  white-space: nowrap;
}

.achv-toast-dig-compact img {
  width: 18px;
  height: 18px;
  display: inline-block;
}

.achv-toast-desc {
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #F3E6D4 !important;
}

@media (max-width: 760px) {
  .achv-toast-stack {
    left: 50%;
    right: auto;
    bottom: max(72px, env(safe-area-inset-bottom));
    width: var(--mobile-content-width, 95%);
    transform: translateX(-50%);
  }
}

.achv-toast-dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.win-card,
.pause-card {
  padding: 30px 26px;
  background: var(--paper-bright);
  border-color: var(--line);
  color: var(--ink);
}

.win-card {
  max-height: min(88vh, 640px);
  overflow: auto;
}

.win-achv {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
}

.win-achv-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #DDBB72);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cta, #C88708) 10%, var(--paper-bright, #FFF9E8));
  color: var(--ink, #2B2419);
}

.win-achv-card .achv-seal {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cta, #C88708) 16%, var(--paper-bright, #FFF9E8));
  font-weight: 750;
}

.win-achv-card strong {
  display: block;
  font-size: 0.95rem;
}

.win-achv-card .achv-toast-desc,
.win-achv-card .achv-toast-xp,
.win-achv-card .achv-toast-dig {
  margin: 4px 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--muted, #6A5638);
}

.win-card h2,
.pause-card h2,
.start-card h2 {
  letter-spacing: 0.04em;
}

/* Francis 2026-0918 item 10: the celebratory headline ("Bravo !"/"Well
   done!") stays visually stronger than the secondary result-details line
   shown below it — bigger, bolder, and in the site's established success
   green — while the existing fireworks/celebration effect is untouched. */
.win-card h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--matcha);
}

.field {
  letter-spacing: 0.1em;
}

html.is-play-gated .toolbar,
html.is-play-gated .meta,
html.is-play-gated .clock,
html.is-play-gated .keypad,
html.is-play-gated .toggles,
html.is-play-gated .actions,
html.is-play-gated .play-secondary,
html.is-play-gated .play-more,
html.is-play-gated .hint-why,
html.is-play-gated .status,
html.is-play-gated .board-legend {
  pointer-events: none;
  opacity: 0.42;
}


@media (min-width: 761px) {
  .play {
    display: grid;
    grid-template-columns: minmax(0, 540px) minmax(22rem, 26rem);
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    width: 100%;
    align-items: start;
  }

  .board-wrap {
    width: 100%;
    max-width: 540px;
  }

  .side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 22rem;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .play-context-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .app {
    width: var(--mobile-content-width, 95%);
    max-width: none;
    margin: 0 auto;
    padding: 8px 0 28px;
  }

  .play {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .side { display: contents !important; }

  .clock {
    order: 0 !important;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 1.35rem;
    padding: 4px 2px 2px;
  }

  .board-wrap {
    order: 1 !important;
    width: 100% !important;
    max-width: none;
  }

  .board { width: 100%; }

  .keypad {
    order: 2 !important;
    width: 100% !important;
    max-width: none;
    gap: 8px;
  }

  .keypad button {
    min-height: 52px;
    font-size: 1.35rem;
    font-weight: 600;
    background: var(--paper-bright);
    box-shadow: 0 1px 0 rgba(60, 44, 24, 0.06);
  }

  .keypad:has(> :nth-child(-n+3):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .keypad:has(> :nth-child(-n+3):last-child) button {
    min-height: 56px;
  }

  .play-secondary {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    align-items: stretch;
  }

  .play-secondary > button {
    flex: none;
    min-width: 0;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .play-secondary .more-btn {
    grid-column: 1 / -1;
    background: transparent;
    font-weight: 500;
    color: var(--muted);
  }

  .play-secondary #newGame.primary {
    box-shadow: 0 1px 0 rgba(60, 44, 24, 0.08);
  }

  .play-more { order: 4 !important; }
  .hint-why, .status { order: 5 !important; }
  .check-wrap { order: 3 !important; }
}

html.is-play-completed #hintBtn,
html.is-play-completed #reveal,
html.is-play-completed #hintBtnMore,
html.is-play-completed #revealMore,
html.is-play-completed #hintWhy {
  display: none !important;
}

.play-status {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line, #d6d0c6);
  border-radius: 8px;
  background: var(--panel, #fffaf2);
  color: var(--ink, #1f1b16);
}

.play-status[hidden] {
  display: none !important;
}

.play-status-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
}

.play-status-retry {
  justify-self: start;
}

.check-wrap {
  display: grid;
  gap: 8px;
}

.check-wrap #checkSolution[hidden],
.check-wrap .check-error[hidden] {
  display: none !important;
}

.check-error {
  margin: 0;
  color: var(--bad, #C54831);
  font-size: 0.9rem;
}

.board .cell {
  font-family: var(--font-digits);
}

.cell.is-ok-pulse {
  animation: digigma-ok 300ms ease-out;
}

.cell.is-bad-shake {
  animation: digigma-bad 200ms ease-out;
}

.board-wrap.is-solved-ink::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, var(--matcha) 42%, transparent 70%);
  opacity: 0.28;
  pointer-events: none;
  animation: digigma-ink 600ms ease-out;
}

.play-celebrate {
  position: absolute;
  inset: 0;
  /* The win sheet is z-index 9 and opens before the burst. Keep the
     pointer-free celebration above it so every genuine solve remains
     visible, including a creator completing their own community grid. */
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}

.play-celebrate i {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 8px;
  height: 12px;
  margin: -5px 0 0 -3px;
  border-radius: 2px;
  background: var(--cta);
  opacity: 0;
  animation: play-celebrate-burst 1.9s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 18ms);
}

.play-celebrate i:nth-child(3n) { background: var(--matcha); width: 6px; height: 9px; }
.play-celebrate i:nth-child(3n + 1) { background: var(--indigo); }
.play-celebrate i:nth-child(3n + 2) { background: var(--cta); }
.play-celebrate i:nth-child(4n) { background: var(--vermillon); width: 8px; height: 8px; border-radius: 50%; }

@keyframes play-celebrate-burst {
  0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0.95; }
  70% { opacity: 0.85; }
  100% {
    transform: translate(var(--dx, 0), var(--dy, -80px)) scale(0.85) rotate(220deg);
    opacity: 0;
  }
}

.play-onboard {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 20;
  display: flex;
  justify-content: center;
}

.play-onboard-card {
  width: min(420px, 100%);
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-bright);
  box-shadow: var(--shadow);
}

.play-onboard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.cell.rule-triple {
  box-shadow: inset 0 0 0 2px var(--vermillion);
}

.cell.rule-unbalance {
  background: color-mix(in srgb, var(--vermillion) 14%, var(--cell));
}

@keyframes digigma-ok {
  0% { box-shadow: 0 0 0 0 var(--accent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

@keyframes digigma-bad {
  0%, 100% { transform: translateX(0); background: var(--cell); }
  30% { transform: translateX(-3px); background: color-mix(in srgb, var(--vermillion) 22%, var(--cell)); }
  60% { transform: translateX(3px); }
}

@keyframes digigma-ink {
  0% { transform: scale(0.2); opacity: 0.45; }
  100% { transform: scale(1.15); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cell.is-ok-pulse,
  .cell.is-bad-shake,
  .board-wrap.is-solved-ink::after,
  .play-celebrate i {
    animation: none !important;
  }
  .play-celebrate { display: none; }
}

html.is-play.ds-root,
html.is-play.ds-root[data-ds-theme="dark"],
html.is-play body {
  background-color: var(--paper);
  background-image: none;
}

html.is-play body {
  isolation: isolate;
}

html.is-play body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image: url("/brand/digits.svg?v=5ba10a6bf2d654655f2c972a254d9669690195ad"), url("/brand/seigaiha.svg?v=5ba10a6bf2d654655f2c972a254d9669690195ad");
  background-repeat: repeat, repeat;
  background-size: var(--motif-digits-size, 900px 640px), 168px 84px;
}

html.is-play[data-ds-theme="dark"] body::before {
  background-image: url("/brand/digits-dark.svg?v=5ba10a6bf2d654655f2c972a254d9669690195ad"), url("/brand/seigaiha.svg?v=5ba10a6bf2d654655f2c972a254d9669690195ad");
}

.app {
  max-width: 1040px;
}

.clock #timer,
.clock {
  font-family: var(--font-digits);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.clock #timer {
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink-strong);
}

.board {
  border-radius: 0;
  border-color: var(--grid-strong);
  box-shadow: none;
}

.cell {
  font-family: var(--font-digits);
  font-weight: 500;
}

.cell.given {
  color: var(--ink-strong);
  font-weight: var(--weight-given);
}
.cell.entry {
  color: var(--entry);
  font-weight: 500;
}

.side {
  padding: 4px 0 0;
}

.keypad button {
  background: var(--paper-bright);
  border-color: var(--line);
  font-family: var(--font-digits);
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  .keypad button:hover {
    border-color: var(--accent);
    background: var(--gold-wash);
  }
}

.pill,
.play-mode-badge {
  background: var(--paper-bright);
  border-color: var(--line);
  color: var(--ink);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

html.is-play-classic .play-mode-badge {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--gold-soft);
}

html.is-play-libre .play-mode-badge {
  border-style: dashed;
  color: var(--muted);
}

.toolbar select,
.toolbar button,
.toggles button,
.actions button,
.play-secondary button {
  background: var(--paper-bright);
  color: var(--ink);
  border-color: var(--line);
}

button.primary {
  background: var(--gold-fill);
  color: var(--ink-button);
  border-color: var(--gold-border);
}

html.is-play .play-secondary {
  display: block;
}

html.is-play .play-secondary .more-btn {
  width: 100%;
  font-weight: 500;
}

html.is-play .play-more:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  padding: 10px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.clear-all-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.clear-all-dialog[hidden] { display: none !important; }

.clear-all-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--sumi, #2B2419) 42%, transparent);
}

.clear-all-card {
  position: relative;
  z-index: 1;
  width: min(400px, calc(100% - 32px));
  margin: 18vh auto 0;
  padding: 22px 20px 18px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

.clear-all-card h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.clear-all-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.clear-all-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.clear-all-actions button {
  min-height: 44px;
  min-width: 88px;
  padding: 8px 16px;
}

.clear-all-actions .danger {
  background: color-mix(in srgb, var(--vermillon, #D45E3D) 16%, var(--paper-bright));
  border: 1px solid var(--vermillon, #D45E3D);
  color: var(--ink);
  font-weight: 600;
}

.notes {
  color: var(--note);
  font-family: var(--font-digits);
}

/* Shared 3×3 candidate grid for Sudoku-family drafts. Binary keeps its own notes. */
html.is-play body.ds-sudoku .cell .notes,
html.is-play body.ds-killer .cell .notes,
html.is-play body.ds-futoshiki .cell .notes,
html.is-play body.ds-kakuro .cell .notes {
  position: absolute;
  inset: 3px;
  width: auto;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  place-items: center;
  line-height: 1;
  pointer-events: none;
  box-sizing: border-box;
}

html.is-play body.ds-killer .cell.has-cage-sum .notes {
  inset: 4px;
  width: auto;
  padding: 9px 0 0;
}

html.is-play body.ds-sudoku .cell .notes span,
html.is-play body.ds-killer .cell .notes span,
html.is-play body.ds-futoshiki .cell .notes span,
html.is-play body.ds-kakuro .cell .notes span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}

@media (max-width: 760px) {
  html.is-play .cell .notes {
    font-size: 0.64em;
  }
  html.is-play body.ds-killer .cell.has-cage-sum .notes {
    inset: 4px;
    padding: 8px 0 0;
  }
}

.cage-sum {
  color: var(--accent);
  font-family: var(--font-digits);
}

.cw { background: var(--ink-strong); }

.play-xp {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.play-sound-btn {
  min-height: 44px;
  min-width: 44px;
  width: 100%;
}

@media (min-width: 761px) {
  .side {
    padding: 8px 0 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
}

/* —— Play controls polish (shared keypad + tools + Premium) ——
   html.is-play body beats per-game play-shell keypad rules.
   Digit pad: one warm sand/cream family with a copper-honey tint and tile relief.
   Draft/Undo/Clear stay in that family (Draft active is the extra honey mark).
   Mauve is reserved for the Premium button. Gold label + star on mauve fill.
   Scoped to play pages; chrono / replay / home / leaderboard untouched. */

html.is-play {
  --play-key-radius: 11px;
  --play-premium: #62417A;
  --play-premium-deep: #4E3363;
  --play-premium-ink: #F4D675;
  --play-premium-fill: var(--play-premium);
  --play-premium-line: color-mix(in srgb, #3F2A54 42%, var(--play-premium));
  --play-premium-soft: color-mix(in srgb, var(--play-premium) 16%, var(--paper-bright, #FFF9E8));
  --play-key-honey: #C49A4A;
  --play-key-paper: color-mix(in srgb, var(--paper-wash, #F9E6B8) 62%, var(--paper-bright, #FFF9E8));
  --play-key-cream: color-mix(in srgb, var(--play-key-honey) 10%, var(--play-key-paper));
  --play-key-fill: var(--play-key-cream);
  --play-key-line: color-mix(in srgb, var(--ink, #2B2419) 22%, var(--line, #DDBB72));
  --play-key-ink: var(--ink-strong, #201A12);
  --play-key-highlight: inset 0 1px 0 color-mix(in srgb, #ffffff 62%, transparent);
  --play-key-face: linear-gradient(180deg, color-mix(in srgb, #ffffff 34%, transparent) 0%, transparent 42%);
  --play-key-face-pressed: linear-gradient(180deg, color-mix(in srgb, var(--ink, #2B2419) 14%, transparent) 0%, transparent 48%);
  --play-key-shadow:
    var(--play-key-highlight),
    0 1px 0 color-mix(in srgb, var(--ink, #2B2419) 16%, transparent),
    0 3px 7px color-mix(in srgb, var(--ink, #2B2419) 14%, transparent);
  --play-key-shadow-pressed:
    inset 0 2px 4px color-mix(in srgb, var(--ink, #2B2419) 20%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #ffffff 28%, transparent);
  --play-digit-fill: var(--play-key-cream);
  --play-digit-accent: color-mix(in srgb, var(--ink, #2B2419) 22%, var(--line, #DDBB72));
}

html.is-play body .keypad,
html.is-play body .cb-pad {
  gap: 10px;
}

html.is-play body #playControls,
html.is-play body .toggles {
  gap: clamp(6px, 1vw, 10px);
}

html.is-play body .keypad button,
html.is-play body .cb-key,
html.is-play body .cb-pad button,
html.is-play body .cb-key-back,
html.is-play body #backspaceBtn,
html.is-play body #playControls button,
html.is-play body .toggles button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 10px;
  border: 1px solid var(--play-key-line);
  border-radius: var(--play-key-radius);
  background-color: var(--play-digit-fill, var(--play-key-fill));
  background-image: var(--play-key-face);
  color: var(--play-key-ink);
  box-shadow: var(--play-key-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--motion, 160ms) ease,
    border-color var(--motion, 160ms) ease,
    box-shadow var(--motion, 160ms) ease,
    transform var(--motion, 160ms) ease,
    color var(--motion, 160ms) ease;
}

html.is-play body .keypad button,
html.is-play body .cb-key,
html.is-play body .cb-pad button {
  min-height: 48px;
  font-family: var(--font-digits);
  font-size: 1.22rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

html.is-play body .cb-key,
html.is-play body .cb-pad button {
  min-height: 56px;
}

html.is-play body #playControls button,
html.is-play body .toggles button,
html.is-play body .cb-key-back,
html.is-play body #backspaceBtn {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* —— Play action labels (2×2 Draft / Undo / Clear) ——
   Layout + typography only. Sand tiles, mauve Premium, and gold star/label stay.
   Same components at every size; the desktop/tablet panel may grow so long copy fits. */
html.is-play body #playControls,
html.is-play body .side .toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

html.is-play body #playControls button,
html.is-play body .side .toggles button {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: clamp(8px, 1vw, 11px) clamp(8px, 1.4vw, 14px);
  font-size: clamp(0.92rem, 0.18vw + 0.88rem, 1rem);
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  hyphens: manual;
  flex-wrap: nowrap;
  justify-content: center;
}

html.is-play body #playControls .play-action-label,
html.is-play body #playControls button > span {
  min-width: 0;
  text-wrap: wrap;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

html.is-play body #playControls kbd,
html.is-play body .toggles kbd,
html.is-play body .play-action-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 1.15em;
  margin: 0;
  padding: 0.08em 0.38em 0.04em;
  border: 1px solid color-mix(in srgb, var(--ink, #2B2419) 18%, transparent);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink, #2B2419) 6%, transparent);
  color: var(--muted, #6A5638);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin-left: 6px;
}

/* Digit keys 0–9: one warm sand/cream family with a copper-honey tint — not a per-key rainbow, not mauve. */
html.is-play body .keypad button,
html.is-play body .cb-key,
html.is-play body .cb-pad button,
html.is-play body #zeroBtn,
html.is-play body [data-digit="0"] {
  --play-digit-fill: var(--play-key-cream);
  --play-digit-accent: color-mix(in srgb, var(--ink, #2B2419) 22%, var(--line, #DDBB72));
  background-color: var(--play-digit-fill);
}

html.is-play body #notesBtn,
html.is-play body #confirmDrafts {
  --play-digit-fill: var(--play-key-cream);
  --play-digit-accent: color-mix(in srgb, var(--ink, #2B2419) 28%, var(--line, #DDBB72));
  background-color: var(--play-digit-fill);
  border-color: var(--play-key-line);
  color: var(--ink-strong, #201A12);
}

html.is-play body #notesBtn {
  position: relative;
}

html.is-play body #confirmDrafts {
  font-weight: 650;
}

html.is-play body #undoBtn {
  --play-digit-fill: var(--play-key-cream);
  --play-digit-accent: color-mix(in srgb, var(--ink, #2B2419) 18%, var(--line, #DDBB72));
  background-color: var(--play-digit-fill);
  border-color: var(--play-key-line);
  color: var(--ink-strong, #201A12);
  font-weight: 550;
}

html.is-play body #eraseBtn,
html.is-play body #backspaceBtn,
html.is-play body .cb-key-back {
  --play-digit-fill: color-mix(in srgb, var(--vermillon, #D45E3D) 6%, var(--play-key-cream));
  --play-digit-accent: color-mix(in srgb, var(--ink, #2B2419) 55%, var(--vermillon, #D45E3D));
  background-color: var(--play-digit-fill);
  border-color: color-mix(in srgb, var(--vermillon, #D45E3D) 12%, var(--play-key-line));
  color: var(--ink, #2B2419);
}

html.is-play body #clearSession {
  --play-digit-fill: color-mix(in srgb, var(--vermillon, #D45E3D) 10%, var(--play-key-cream));
  --play-digit-accent: color-mix(in srgb, var(--ink, #2B2419) 48%, var(--vermillon, #D45E3D));
  background-color: var(--play-digit-fill);
  border-color: color-mix(in srgb, var(--vermillon, #D45E3D) 18%, var(--play-key-line));
  color: var(--ink-strong, #201A12);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  html.is-play body .keypad button:hover,
  html.is-play body .cb-key:hover,
  html.is-play body .cb-pad button:hover,
  html.is-play body .cb-key-back:hover,
  html.is-play body #backspaceBtn:hover,
  html.is-play body #playControls button:hover,
  html.is-play body .toggles button:hover {
    background-color: color-mix(in srgb, var(--play-digit-accent, var(--ink, #2B2419)) 12%, var(--play-digit-fill, var(--play-key-fill)));
    background-image: var(--play-key-face);
    border-color: color-mix(in srgb, var(--play-digit-accent, var(--ink, #2B2419)) 32%, var(--play-key-line));
    box-shadow: var(--play-key-shadow);
    transform: none;
  }
  html.is-play body #clearSession:hover {
    background-color: color-mix(in srgb, var(--vermillon, #D45E3D) 14%, var(--play-key-cream));
    background-image: var(--play-key-face);
    border-color: color-mix(in srgb, var(--vermillon, #D45E3D) 26%, var(--play-key-line));
  }
  html.is-play body #notesBtn.active:hover,
  html.is-play body #notesBtn[aria-pressed="true"]:hover {
    background-color: color-mix(in srgb, var(--play-key-honey) 60%, var(--play-key-cream));
    background-image: var(--play-key-face-pressed);
    border-color: color-mix(in srgb, var(--indigo, #3547B3) 52%, var(--play-key-honey));
    box-shadow: var(--play-key-shadow-pressed);
    transform: none;
  }
}

html.is-play body .keypad button:focus-visible,
html.is-play body .cb-key:focus-visible,
html.is-play body .cb-pad button:focus-visible,
html.is-play body .cb-key-back:focus-visible,
html.is-play body #backspaceBtn:focus-visible,
html.is-play body #playControls button:focus-visible,
html.is-play body .toggles button:focus-visible,
html.is-play body #moreBtn:focus-visible,
html.is-play body .play-premium:focus-visible,
html.is-play body .assist-ok:focus-visible,
html.is-play body .assist-cancel:focus-visible {
  outline: none;
  box-shadow: var(--play-key-shadow), var(--focus-ring, 0 0 0 2px var(--paper, #FCE9B8), 0 0 0 4px var(--indigo, #3547B3));
}

html.is-play body .keypad button:active,
html.is-play body .cb-key:active,
html.is-play body .cb-pad button:active,
html.is-play body .cb-key-back:active,
html.is-play body .cb-key.is-press,
html.is-play body .cb-pad button.is-press,
html.is-play body .cb-key-back.is-press,
html.is-play body #backspaceBtn:active,
html.is-play body #playControls button:active,
html.is-play body .toggles button:active {
  transform: translateY(1px);
  background-color: color-mix(in srgb, var(--play-digit-accent, var(--ink, #2B2419)) 18%, var(--play-digit-fill, var(--play-key-fill)));
  background-image: var(--play-key-face-pressed);
  border-color: color-mix(in srgb, var(--play-digit-accent, var(--ink, #2B2419)) 40%, var(--play-key-line));
  box-shadow: var(--play-key-shadow-pressed);
}

html.is-play body .keypad button:disabled,
html.is-play body .cb-key:disabled,
html.is-play body .cb-pad button:disabled,
html.is-play body .cb-key-back:disabled,
html.is-play body #backspaceBtn:disabled,
html.is-play body #playControls button:disabled,
html.is-play body .toggles button:disabled,
html.is-play body .play-more button:disabled,
html.is-play body .play-more .play-tool-link[aria-disabled="true"] {
  color: var(--muted, #6A5638);
  background: color-mix(in srgb, var(--paper, #FCE9B8) 62%, var(--paper-bright, #FFF9E8));
  border-color: var(--line, #DDBB72);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

html.is-play body #playControls button.active,
html.is-play body .toggles button.active {
  background-color: color-mix(in srgb, var(--play-key-honey) 16%, var(--play-key-cream));
  background-image: var(--play-key-face);
  border-color: color-mix(in srgb, var(--play-key-honey) 32%, var(--play-key-line));
  color: var(--ink-strong, #201A12);
  box-shadow: var(--play-key-shadow);
}

html.is-play body #notesBtn.active,
html.is-play body #notesBtn[aria-pressed="true"] {
  --play-digit-fill: color-mix(in srgb, var(--play-key-honey) 52%, var(--play-key-cream));
  --play-digit-accent: var(--indigo, #3547B3);
  background-color: var(--play-digit-fill);
  background-image: var(--play-key-face-pressed);
  border-color: color-mix(in srgb, var(--indigo, #3547B3) 46%, var(--play-key-honey));
  color: var(--ink-strong, #201A12);
  font-weight: 750;
  box-shadow: var(--play-key-shadow-pressed);
}

html.is-play body #notesBtn.active::before,
html.is-play body #notesBtn[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: var(--indigo, #3547B3);
}

html.is-play body #notesBtn.active kbd,
html.is-play body #notesBtn[aria-pressed="true"] kbd {
  opacity: 0.38;
}

html.is-play body #autoNotesBtn[aria-pressed="true"] {
  background-color: color-mix(in srgb, var(--play-key-honey) 22%, var(--play-key-cream));
  background-image: var(--play-key-face);
  border-color: color-mix(in srgb, var(--play-key-honey) 40%, var(--play-key-line));
  color: var(--ink-strong, #201A12);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--play-key-honey) 24%, transparent), var(--play-key-shadow);
}

html.is-play body #moreBtn.more-btn,
html.is-play body .play-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--play-premium-line);
  border-radius: var(--play-key-radius);
  background: linear-gradient(180deg, color-mix(in srgb, #fff 12%, var(--play-premium)) 0%, var(--play-premium-deep) 100%);
  color: var(--play-premium-ink);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 2px 0 color-mix(in srgb, #fff 30%, var(--play-premium)),
    0 1px 0 color-mix(in srgb, var(--play-premium) 32%, transparent),
    0 2px 6px color-mix(in srgb, var(--play-premium) 20%, transparent);
}

html.is-play body #moreBtn.more-btn::before,
html.is-play body .play-premium::before,
.assist-member-cta::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 1.2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3.2l2.18 6.08 6.42.28-5.08 3.92 1.78 6.18L12 16.7 6.7 19.66l1.78-6.18L3.4 9.56l6.42-.28z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3.2l2.18 6.08 6.42.28-5.08 3.92 1.78 6.18L12 16.7 6.7 19.66l1.78-6.18L3.4 9.56l6.42-.28z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  html.is-play body #moreBtn.more-btn:hover,
  html.is-play body .play-premium:hover {
    background: linear-gradient(180deg, var(--play-premium) 0%, color-mix(in srgb, #1a0f24 22%, var(--play-premium-deep)) 100%);
    border-color: var(--play-premium-deep);
    color: var(--play-premium-ink);
    box-shadow:
      inset 0 2px 0 color-mix(in srgb, #fff 22%, var(--play-premium)),
      0 1px 0 color-mix(in srgb, var(--play-premium) 32%, transparent),
      0 2px 6px color-mix(in srgb, var(--play-premium) 20%, transparent);
  }
}

html.is-play body #moreBtn.more-btn:active,
html.is-play body .play-premium:active,
html.is-play body #moreBtn.more-btn[aria-expanded="true"] {
  background: var(--play-premium-deep);
  color: var(--play-premium-ink);
  box-shadow:
    inset 0 2px 0 color-mix(in srgb, #fff 16%, var(--play-premium-deep)),
    var(--play-key-shadow-pressed);
}

html.is-play body .play-more:not([hidden]),
html.is-play body .play-premium-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  padding: 12px;
  background: var(--play-key-cream);
  border: 1px solid var(--play-key-line);
  border-radius: var(--play-key-radius);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--play-key-honey) 18%, transparent);
}

html.is-play body .play-more button,
html.is-play body .play-more .play-tool-link,
html.is-play body .play-premium-panel button,
html.is-play body .play-premium-panel .play-tool-link {
  min-height: 44px;
  border-radius: var(--play-key-radius);
  background-color: var(--play-key-cream);
  background-image: var(--play-key-face);
  border: 1px solid var(--play-key-line);
  color: var(--ink, #2B2419);
  box-shadow: var(--play-key-shadow);
}

html.is-play body .play-more #hintBtn,
html.is-play body .play-premium-panel #hintBtn {
  background-color: var(--play-key-cream);
  background-image: var(--play-key-face);
  border-color: var(--play-key-line);
}

html.is-play body .play-more #reveal,
html.is-play body .play-premium-panel #reveal {
  background-color: var(--play-key-cream);
  background-image: var(--play-key-face);
  border-color: var(--play-key-line);
}

html.is-play body .play-more #autoNotesBtn,
html.is-play body .play-premium-panel #autoNotesBtn,
html.is-play body .play-more #showErrors,
html.is-play body .play-premium-panel #showErrors {
  background-color: var(--play-key-cream);
  background-image: var(--play-key-face);
  border-color: var(--play-key-line);
}

.flag-errors-toggle,
html.is-play body .play-more .flag-errors-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--play-key-line, var(--line));
  border-radius: var(--play-key-radius, var(--radius-sm));
  background-color: var(--play-key-cream, var(--paper-bright));
  color: var(--ink, #2B2419);
  cursor: pointer;
}

.flag-errors-toggle input {
  margin: 0;
}

.assist-dialog-card {
  background: var(--paper-bright, #FFF9E8);
  border-color: var(--line, #DDBB72);
  box-shadow: var(--shadow-card, 0 10px 28px rgba(45, 36, 27, 0.12));
}

.assist-dialog-card h2 {
  color: var(--ink-strong, #201A12);
}

@media (max-width: 760px) {
  html.is-play body .keypad button {
    min-height: 52px;
    font-size: 1.32rem;
  }
  html.is-play body .cb-key,
  html.is-play body .cb-pad button {
    min-height: 56px;
    font-size: 1.32rem;
  }
  html.is-play body #playControls button,
  html.is-play body .toggles button,
  html.is-play body .cb-key-back,
  html.is-play body #backspaceBtn {
    min-height: 48px;
    font-size: 0.95rem;
    padding: 10px 12px;
  }
  html.is-play body .play-secondary .more-btn,
  html.is-play body #moreBtn.more-btn,
  html.is-play body .play-premium {
    grid-column: 1 / -1;
    min-height: 48px;
    background: linear-gradient(180deg, color-mix(in srgb, #fff 12%, var(--play-premium)) 0%, var(--play-premium-deep) 100%);
    color: var(--play-premium-ink);
    font-size: 1.12rem;
    font-weight: 700;
    box-shadow:
      inset 0 2px 0 color-mix(in srgb, #fff 30%, var(--play-premium)),
      0 1px 0 color-mix(in srgb, var(--play-premium) 32%, transparent),
      0 2px 6px color-mix(in srgb, var(--play-premium) 20%, transparent);
  }
  .assist-dialog-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .assist-dialog-actions .assist-cancel,
  .assist-dialog-actions .assist-ok,
  .assist-dialog-actions a.assist-ok {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-play body .keypad button,
  html.is-play body .cb-key,
  html.is-play body .cb-pad button,
  html.is-play body .cb-key-back,
  html.is-play body #backspaceBtn,
  html.is-play body #playControls button,
  html.is-play body .toggles button,
  html.is-play body #moreBtn.more-btn {
    transition: none;
  }
  html.is-play body .keypad button:active,
  html.is-play body .cb-key:active,
  html.is-play body .cb-key.is-press,
  html.is-play body #playControls button:active {
    transform: none;
  }
}

html.is-play body .cell.bad,
html.is-play body .cell.conflict,
html.is-play body .cell.mismatch,
html.is-play body .cell.hi.bad,
html.is-play body .cell.hi.conflict,
html.is-play body .cell.hi.mismatch,
html.is-play body .cell.same.bad,
html.is-play body .cell.same.conflict,
html.is-play body .cell.same.mismatch,
html.is-play body .cell.sel.bad,
html.is-play body .cell.sel.conflict,
html.is-play body .cell.sel.mismatch,
html.is-play body .cell.bad[data-cage],
html.is-play body .cell.conflict[data-cage],
html.is-play body .cell.mismatch[data-cage],
html.is-play body .cell.hi.conflict[data-cage],
html.is-play body .cell.same.conflict[data-cage],
html.is-play body .cell.sel.conflict[data-cage],
html.is-play body .cell.given.conflict,
html.is-play body .cell.given.mismatch,
html.is-play body .cell.given.bad,
html.is-play body .cell.given.hi.conflict,
html.is-play body .cell.given.same.conflict,
html.is-play body .cell.given.sel.conflict,
html.is-play body .cell.given.sel.same.conflict,
html.is-play body .cell.given.conflict[data-cage],
html.is-play body .cell.given.hi.conflict[data-cage],
html.is-play body .cell.given.sel.conflict[data-cage],
html.is-play body .cell.given.sel.same.conflict[data-cage] {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 2px,
    color-mix(in srgb, var(--board-digit-bad, var(--bad)) 28%, transparent) 2px,
    color-mix(in srgb, var(--board-digit-bad, var(--bad)) 28%, transparent) 5px
  );
  box-shadow: inset 0 -3px 0 0 var(--board-digit-bad, var(--bad));
}

html.is-play body .cell.entry.bad,
html.is-play body .cell.entry.conflict,
html.is-play body .cell.entry.mismatch,
html.is-play body .cell.entry.hi.conflict,
html.is-play body .cell.entry.sel.conflict,
html.is-play body .cell.entry.same.conflict {
  background-color: var(--board-cell-bad, color-mix(in srgb, var(--bad) 16%, var(--cell, #fff)));
  color: var(--board-digit-bad, var(--bad));
}

html.is-play body .cell.given.conflict,
html.is-play body .cell.given.mismatch,
html.is-play body .cell.given.bad,
html.is-play body .cell.given.hi.conflict,
html.is-play body .cell.given.same.conflict,
html.is-play body .cell.given.sel.conflict,
html.is-play body .cell.given.sel.same.conflict,
html.is-play body .cell.given.conflict[data-cage],
html.is-play body .cell.given.hi.conflict[data-cage],
html.is-play body .cell.given.same.conflict[data-cage],
html.is-play body .cell.given.sel.conflict[data-cage],
html.is-play body .cell.given.sel.same.conflict[data-cage] {
  background-color: var(--board-cell-bad, color-mix(in srgb, var(--bad) 16%, var(--cell, #fff)));
  color: var(--board-given, var(--ink-strong));
  font-weight: var(--weight-given);
}

html.is-play body .cell.sel.bad,
html.is-play body .cell.sel.conflict,
html.is-play body .cell.sel.mismatch,
html.is-play body .cell.sel.same.conflict,
html.is-play body .cell.given.sel.conflict,
html.is-play body .cell.sel.bad[data-cage],
html.is-play body .cell.sel.conflict[data-cage],
html.is-play body .cell.given.sel.conflict[data-cage],
html.is-play body .cell.given.sel.same.conflict[data-cage] {
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A), inset 0 -3px 0 0 var(--board-digit-bad, var(--bad));
}

html.is-play body .cell.same.bad:not(.sel),
html.is-play body .cell.same.conflict:not(.sel),
html.is-play body .cell.same.mismatch:not(.sel),
html.is-play body .cell.given.same.conflict:not(.sel),
html.is-play body .cell.same.conflict[data-cage]:not(.sel) {
  box-shadow: inset 0 0 0 2px var(--play-ring-same, #5F8F3E), inset 0 -3px 0 0 var(--board-digit-bad, var(--bad));
}

@media (hover: hover) and (pointer: fine) {
  html.is-play body .cell.bad:hover,
  html.is-play body .cell.conflict:hover,
  html.is-play body .cell.mismatch:hover,
  html.is-play body .cell.given.conflict:hover,
  html.is-play body .cell.given.hi.conflict:hover,
  html.is-play body .cell.given.conflict[data-cage]:hover,
  html.is-play body .cell.given[data-cage]:hover:not(.sel).conflict {
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      color-mix(in srgb, var(--board-digit-bad, var(--bad)) 28%, transparent) 2px,
      color-mix(in srgb, var(--board-digit-bad, var(--bad)) 28%, transparent) 5px
    );
  }
  html.is-play body .cell.given.conflict:hover,
  html.is-play body .cell.given.mismatch:hover,
  html.is-play body .cell.given.bad:hover,
  html.is-play body .cell.given.hi.conflict:hover,
  html.is-play body .cell.given.conflict[data-cage]:hover {
    background-color: var(--board-cell-bad, color-mix(in srgb, var(--bad) 16%, var(--cell, #fff)));
  }
}

/* Shared action geometry for all shipped players; colors retain action semantics. */
html.is-play body :is(button.play-action, #playControls button,
  .play-more > button, .win-actions > button, #pause, #checkSolution,
  #moreBtn, #backspaceBtn):not([hidden]):not(.hidden) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  height: auto;
  border-radius: var(--play-key-radius, 12px);
  padding: 10px 14px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
html.is-play body #playControls { gap: 8px; grid-auto-rows: 1fr; }
html.is-play body .play-more:not([hidden]),
html.is-play body .win-actions { gap: 8px; }
html.is-play body .cell.reveal-comparison { color: var(--ink); }
html.is-play body .reveal-solution { color: var(--ink); font-weight: 700; }
html.is-play body .reveal-wrong {
  position: relative;
  display: inline-block;
  color: var(--bad, #b42318);
  font-size: .72em;
  line-height: 1;
  margin-inline-end: .3em;
}
html.is-play body .reveal-wrong::after {
  content: "";
  position: absolute;
  left: -.08em;
  top: 50%;
  width: calc(100% + .16em);
  height: 1.25px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(42deg);
  transform-origin: center;
  pointer-events: none;
}
html.is-play body .reveal-original { margin-block: 16px; }
html.is-play body .reveal-original .cell.reveal-region-wrong {
  background: color-mix(in srgb, var(--bad, #b42318) 20%, var(--paper));
  outline: 2px dashed var(--bad, #b42318); outline-offset: -3px;
}

html.is-play body .reveal-values { display: inline-flex; align-items: baseline; justify-content: center; }
html.is-play body .cb-digits:has(.reveal-values) { display: inline-flex; gap: .4em; }
html.is-play body .reveal-original { width: 100%; max-width: 100%; }
html.is-play body .reveal-original .board,
html.is-play body .reveal-original .cell {
  touch-action: pan-y;
  pointer-events: none;
  user-select: none;
}

/* Reveal adds comparison content to the normal document flow. Never turn the
   board column into a nested scroller: on mobile that can trap page panning. */
html.is-play body .board-wrap:has(.reveal-original) { display: block; overflow: visible; }
html.is-play body .board-wrap:has(.reveal-original) .board { width: 100%; height: auto; }

/* Compact challenge creation stays inside the scrollable completion card. */
.completion-challenge { min-width: 0; max-width: 100%; text-align: start; overflow-wrap: anywhere; }
.completion-challenge .challenge-create { display: grid; gap: 8px; min-width: 0; }
.completion-challenge h3, .completion-challenge p { margin: 4px 0; }
.completion-challenge .challenge-field { display: grid; gap: 4px; min-width: 0; }
.completion-challenge select, .completion-challenge input[type="search"] { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 40px; }
.completion-challenge .challenge-stake-choices { display: flex; flex-wrap: wrap; gap: 4px; }
.completion-challenge .challenge-stake-choice { display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.completion-challenge .challenge-stake-choice input { margin: 0; }
.completion-challenge .challenge-stake-choice:has(input:checked) { border-color: var(--cta); box-shadow: inset 0 0 0 1px var(--cta); }
/* Override game-shell primary-button nowrap rules inside both composers. */
.completion-challenge button, #startGate .completion-challenge button, #completionChallenge button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* The restored-completion gate shares the result composer and scrolls as it grows. */
#startGate .start-card {
  box-sizing: border-box;
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overflow-wrap: anywhere;
}
#startGate .start-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#startGate .start-actions button { min-width: 0; max-width: 100%; white-space: normal; }

/* QA B: five equal stake choices fit the mobile composer. */
.challenge-stake-choices, .completion-challenge .challenge-stake-choices { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
.challenge-stake-choice, .completion-challenge .challenge-stake-choice { min-width:0; padding:2px; gap:2px; justify-content:center; font-size:12px; }
.challenge-card { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px; }
.challenge-card p { margin:0; }
.challenge-result-line { flex-basis:100%; }
.is-challenge-mode [hidden] { display:none !important; }

.challenge-stake-choice, .completion-challenge .challenge-stake-choice { position:relative; }
.challenge-stake-choice input, .completion-challenge .challenge-stake-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.challenge-stake-choice:focus-within { outline:2px solid var(--ink); outline-offset:2px; }

#startGate { position: fixed; inset: 0; z-index: 100; justify-content: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); box-sizing: border-box; }

/* Keep framed DIG stakes inside five columns in the viewport-sized gate. */
.challenge-stake-choice .dig-compact { padding-inline: 3px; gap: 3px; }