/* Daily Crowns - game-specific layout.
   Colors, type ramp, radii, shadows, button styles all come from /css/site.css.
   Anything that starts with --dc-* below is local to this game. */

:root {
  --dc-cell-border: rgba(0, 0, 0, 0.08);
  --dc-region-border: #14181f;
  --dc-conflict: #e23b46;
}

/* --- One-screen viewport (no page scroll) -------------------------------- */
html.dc-page {
  height: 100%;
  overflow: hidden;
}

body.dc-page {
  height: 100%;
  max-height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
}

@supports (height: 100dvh) {
  body.dc-page {
    min-height: 100dvh;
    max-height: 100dvh;
  }
}

@supports (height: 100svh) {
  body.dc-page {
    min-height: 100svh;
    max-height: 100svh;
  }
}

body.dc-page .blob-field {
  opacity: 0.4;
}

body.dc-page .layout {
  min-height: 0;
  height: 100%;
  max-height: inherit;
  overflow: hidden;
  min-height: 100dvh;
}

@supports not (min-height: 100dvh) {
  body.dc-page .layout {
    min-height: 100vh;
  }
}

/* Pre-run: hide game UI until Start. */
.dc-main--intro .dc-top-stats,
.dc-main--intro .dc-card__viewport,
.dc-main--intro .dc-complete {
  display: none !important;
}

.dc-main--intro .dc-card {
  position: relative;
  z-index: 5;
}

/* Intro is in normal flow so the card keeps height without viewport. */
.dc-card--intro .dc-intro {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  z-index: 1;
}

/* Wider game shell + one-screen sizing. */
body.dc-page main.game-shell.game-shell--wide {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  row-gap: clamp(0.35rem, 1.4vmin, 0.65rem);
  width: 100%;
  max-width: min(800px, 100%);
  margin-inline: auto;
  margin-block: 0;
  padding: clamp(0.75rem, 3.5vmin, 1.75rem) clamp(1rem, 7vw, 3.25rem);
  padding-left: max(clamp(1rem, 7vw, 3.25rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(1rem, 7vw, 3.25rem), env(safe-area-inset-right, 0px));
  padding-bottom: max(clamp(0.75rem, 3.5vmin, 1.75rem), env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.game-shell--wide {
  max-width: min(800px, 100%);
}

body.dc-page .game-shell--wide .back-link {
  margin-bottom: 0.35rem;
}

body.dc-page .game-shell--wide h1 {
  margin: 0 0 0.2rem;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.1;
}

body.dc-page .game-shell--wide .lede {
  margin: 0 0 0.45rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.dc-shell-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.dc-shell-head__chrome {
  min-width: 0;
  flex: 1 1 auto;
}

.dc-top-stats {
  flex: 0 0 auto;
  text-align: right;
  margin-bottom: 0.55rem;
}

.dc-top-stats__date {
  margin: 0 0 0.2rem;
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.dc-top-stats__date:empty {
  display: none;
}

.dc-top-stats__line {
  margin: 0;
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}

.dc-top-stats__item {
  white-space: nowrap;
}

.dc-top-stats__item .dc-num {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transform-origin: 50% 60%;
}

@keyframes dc-num-bump {
  0%   { transform: scale(1);    color: var(--text); }
  35%  { transform: scale(1.32); color: var(--dc-conflict, #e23b46); }
  100% { transform: scale(1);    color: var(--text); }
}

.dc-num--bump {
  animation: dc-num-bump 380ms ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .dc-num--bump { animation: none; }
}

.dc-top-stats__dot {
  margin: 0 0.2rem;
  opacity: 0.45;
}

.dc-top-stats__streak {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.dc-top-stats__streak[hidden] {
  display: none;
}

.dc-top-stats__dot--streak[hidden] {
  display: none;
}

.dc-top-stats__streak-icon {
  font-size: 0.95em;
  line-height: 1;
}

/* Stage + card */
.dc-stage {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  min-height: auto;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  overflow: hidden;
}

body.dc-page .game-stage.dc-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: min(82dvh, 720px);
  padding: 0;
  align-items: stretch;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

@supports not (height: 82dvh) {
  body.dc-page .game-stage.dc-stage {
    max-height: min(82vh, 720px);
  }
}

.dc-card {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  overflow: hidden;
}

.dc-card__viewport {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(0.75rem, 2.4vmin, 1.25rem);
  gap: clamp(0.75rem, 2.4vmin, 1.1rem);
}

/* --- Board ------------------------------------------------------------- */
.dc-board-wrap {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  /* Container queries let the board size against the wrap's real box
     instead of viewport units, so the toolbar can never be pushed
     out of the card by board overflow. */
  container-type: size;
  container-name: dc-board-wrap;
}

.dc-board {
  --dc-n: 7;
  /* Square board sized to the smaller of the wrap's width / height,
     hard-capped so cells stay readable on huge monitors. Cells inside
     use 1fr so they tile perfectly with no rounding gaps. */
  width: min(100cqw, 100cqh, 560px);
  height: min(100cqw, 100cqh, 560px);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--dc-n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--dc-n), minmax(0, 1fr));
  background: var(--dc-region-border);
  border: 2px solid var(--dc-region-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(20, 24, 30, 0.12);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Fallback for browsers without container query units: use a tighter
   viewport-based reservation so the toolbar still has room. */
@supports not (width: 100cqh) {
  .dc-board {
    width: min(100%, calc(72dvh - 6rem), 560px);
    height: auto;
  }
}

@supports not (height: 72dvh) {
  .dc-board {
    width: min(100%, calc(72vh - 6rem), 560px);
    height: auto;
  }
}

.dc-cell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: var(--dc-fill, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 120ms ease, transform 80ms ease;
  /* Cell border (thin, light). Region borders are drawn on top. */
  box-shadow:
    inset 0 -1px 0 var(--dc-cell-border),
    inset -1px 0 0 var(--dc-cell-border);
  -webkit-tap-highlight-color: transparent;
}

.dc-cell:hover {
  filter: brightness(1.04);
}

.dc-cell:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -3px;
  z-index: 2;
}

.dc-cell.is-active-press {
  transform: scale(0.94);
}

/* Region borders (thick): drawn via inset shadows on the boundary side. */
.dc-cell.is-bt { box-shadow: inset 0 2px 0 var(--dc-region-border), inset 0 -1px 0 var(--dc-cell-border), inset -1px 0 0 var(--dc-cell-border); }
.dc-cell.is-bb { box-shadow: inset 0 -2px 0 var(--dc-region-border), inset -1px 0 0 var(--dc-cell-border); }
.dc-cell.is-bl { box-shadow: inset 2px 0 0 var(--dc-region-border), inset 0 -1px 0 var(--dc-cell-border), inset -1px 0 0 var(--dc-cell-border); }
.dc-cell.is-br { box-shadow: inset -2px 0 0 var(--dc-region-border), inset 0 -1px 0 var(--dc-cell-border); }

.dc-cell.is-bt.is-bb { box-shadow: inset 0 2px 0 var(--dc-region-border), inset 0 -2px 0 var(--dc-region-border), inset -1px 0 0 var(--dc-cell-border); }
.dc-cell.is-bl.is-br { box-shadow: inset 2px 0 0 var(--dc-region-border), inset -2px 0 0 var(--dc-region-border), inset 0 -1px 0 var(--dc-cell-border); }

.dc-cell.is-bt.is-bl { box-shadow: inset 0 2px 0 var(--dc-region-border), inset 2px 0 0 var(--dc-region-border), inset 0 -1px 0 var(--dc-cell-border), inset -1px 0 0 var(--dc-cell-border); }
.dc-cell.is-bt.is-br { box-shadow: inset 0 2px 0 var(--dc-region-border), inset -2px 0 0 var(--dc-region-border), inset 0 -1px 0 var(--dc-cell-border); }
.dc-cell.is-bb.is-bl { box-shadow: inset 0 -2px 0 var(--dc-region-border), inset 2px 0 0 var(--dc-region-border), inset -1px 0 0 var(--dc-cell-border); }
.dc-cell.is-bb.is-br { box-shadow: inset 0 -2px 0 var(--dc-region-border), inset -2px 0 0 var(--dc-region-border); }

.dc-cell.is-bt.is-bl.is-br { box-shadow: inset 0 2px 0 var(--dc-region-border), inset 2px 0 0 var(--dc-region-border), inset -2px 0 0 var(--dc-region-border), inset 0 -1px 0 var(--dc-cell-border); }
.dc-cell.is-bb.is-bl.is-br { box-shadow: inset 0 -2px 0 var(--dc-region-border), inset 2px 0 0 var(--dc-region-border), inset -2px 0 0 var(--dc-region-border); }
.dc-cell.is-bt.is-bb.is-bl { box-shadow: inset 0 2px 0 var(--dc-region-border), inset 0 -2px 0 var(--dc-region-border), inset 2px 0 0 var(--dc-region-border), inset -1px 0 0 var(--dc-cell-border); }
.dc-cell.is-bt.is-bb.is-br { box-shadow: inset 0 2px 0 var(--dc-region-border), inset 0 -2px 0 var(--dc-region-border), inset -2px 0 0 var(--dc-region-border); }

.dc-cell.is-bt.is-bb.is-bl.is-br { box-shadow: inset 0 2px 0 var(--dc-region-border), inset 0 -2px 0 var(--dc-region-border), inset 2px 0 0 var(--dc-region-border), inset -2px 0 0 var(--dc-region-border); }

/* Glyphs (X and crown) */
.dc-cell__mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dc-cell__mark svg {
  width: 60%;
  height: 60%;
  display: block;
}

.dc-cell--x .dc-cell__mark svg {
  width: 36%;
  height: 36%;
  color: rgba(20, 24, 30, 0.4);
}

.dc-cell--soft-x .dc-cell__mark svg {
  width: 28%;
  height: 28%;
  color: rgba(20, 24, 30, 0.22);
}

.dc-cell--crown .dc-cell__mark svg {
  width: 64%;
  height: 64%;
  color: var(--text);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
  animation: dc-crown-pop 200ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

@keyframes dc-crown-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .dc-cell__mark svg { animation: none; }
}

.dc-cell--conflict {
  animation: dc-conflict-pulse 1.4s ease-in-out infinite;
}

@keyframes dc-conflict-pulse {
  0%, 100% { background-color: var(--dc-fill); }
  50%      { background-color: color-mix(in srgb, var(--dc-conflict) 28%, var(--dc-fill)); }
}

@media (prefers-reduced-motion: reduce) {
  .dc-cell--conflict { animation: none; background-color: color-mix(in srgb, var(--dc-conflict) 22%, var(--dc-fill)); }
}

.dc-cell--conflict .dc-cell__mark svg {
  color: var(--dc-conflict);
}

.dc-board.is-locked .dc-cell {
  cursor: default;
  pointer-events: none;
}

/* Toolbar (undo / clear / hint) */
.dc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.dc-tool {
  padding: 0.5rem 0.85rem;
  font-size: var(--fs-xs);
}

.dc-tool__cost {
  margin-left: 0.25rem;
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dc-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* --- Complete overlay -------------------------------------------------- */
.dc-complete {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: clamp(1rem, 3vmin, 1.5rem) max(0.9rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(0.9rem, env(safe-area-inset-left));
  text-align: center;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dc-complete > * {
  flex: 0 0 auto;
}

.dc-complete[hidden] {
  display: none !important;
}

.dc-complete__title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--text);
}

.dc-complete__score {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  justify-content: center;
}

.dc-complete__score strong {
  font-size: clamp(2rem, 7vmin, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dc-complete__score-max {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.dc-complete__meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.dc-complete__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
}

.dc-complete__chip-label {
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dc-complete__chip-value {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Distribution panel (synthetic ranking) */
.dc-rank {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: min(100%, 480px);
  margin: 0.35rem 0 0.2rem;
  padding: 0.85rem 1rem 0.9rem;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: 16px;
  text-align: left;
  box-shadow: 0 6px 20px rgba(20, 24, 30, 0.05);
}

.dc-rank[hidden] {
  display: none !important;
}

.dc-rank__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dc-rank__title {
  color: var(--text);
}

.dc-rank__date {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text-muted);
}

.dc-rank__chart-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 210;
}

.dc-rank__chart {
  display: block;
  width: 100%;
  height: 100%;
}

.dc-rank__you {
  position: absolute;
  top: 2px;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  font-size: var(--fs-3xs);
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  left: var(--dc-rank-x, 50%);
}

.dc-rank__you[hidden] {
  display: none;
}

.dc-rank__you-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dc-rank__you-pct {
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--fs-3xs);
}

.dc-rank__axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text-muted) 80%, transparent);
  font-variant-numeric: tabular-nums;
  padding: 0 1px;
}

.dc-rank__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  font-size: var(--fs-2xs);
}

.dc-rank__foot-label {
  font-weight: 600;
  color: var(--text);
}

.dc-rank__foot-score {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: var(--fs-sm);
}

.dc-rank__note {
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--text-muted) 90%, transparent);
}

.dc-complete__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.dc-complete__cta-row .btn {
  min-width: 8.5rem;
}

.dc-complete__cta-row .btn--primary {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.dc-complete__cta-row .btn--primary:hover:not(:disabled) {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

#dc-btn-share {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.dc-btn-share__icon {
  display: inline-flex;
  line-height: 0;
}

/* --- Share modal ------------------------------------------------------- */
.dc-share-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.dc-share-modal[hidden] {
  display: none !important;
}

.dc-share-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 30, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.dc-share-modal__inner {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.4rem 1.1rem 1.1rem;
  background: var(--surface, #fff);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(20, 24, 30, 0.35), 0 6px 18px rgba(20, 24, 30, 0.18);
  overflow: hidden;
  animation: dc-share-pop 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes dc-share-pop {
  from { transform: translateY(14px) scale(0.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.dc-share-modal__x {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted, #6c7480);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.dc-share-modal__x:hover,
.dc-share-modal__x:focus-visible {
  background: rgba(20, 24, 30, 0.06);
  color: var(--text, #111418);
  outline: none;
}

.dc-share-modal__title {
  margin: 0.1rem 1.5rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #111418);
  text-align: center;
}

.dc-share-modal__sub {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, #6c7480);
  text-align: center;
}

.dc-share-modal__preview {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
  padding: 0.45rem;
  background:
    repeating-conic-gradient(
      rgba(20, 24, 30, 0.04) 0% 25%, transparent 0% 50%
    ) 0 0 / 18px 18px;
  border-radius: 16px;
  max-height: min(60vh, 520px);
  overflow: hidden;
}

.dc-share-modal__img {
  display: block;
  max-width: 100%;
  max-height: min(56vh, 500px);
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(20, 24, 30, 0.18);
  background: #f5efe6;
}

.dc-share-modal__actions {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.25rem;
}

.dc-share-modal__actions .btn {
  flex: 1 1 8rem;
  min-width: 8rem;
}

.dc-share-modal__note {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.72rem;
  color: var(--text-muted, #6c7480);
  text-align: center;
}

@media (max-width: 480px) {
  .dc-share-modal__inner {
    width: 100%;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-share-modal__inner {
    animation: none;
  }
}

/* --- Intro card -------------------------------------------------------- */
.dc-intro {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transform-origin: 50% 48%;
  padding: clamp(0.85rem, 2.8vmin, 1.35rem) clamp(1rem, 4vw, 1.85rem)
    max(0.9rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(clamp(1rem, 4vw, 1.85rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(1rem, 4vw, 1.85rem), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  text-align: center;
  color: rgba(255, 255, 255, 0.94);
  background: var(--inverse-bg);
  border-radius: var(--radius-lg);
}

.dc-intro[hidden] {
  display: none !important;
}

.dc-intro__top {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
}

.dc-intro__meta {
  min-width: 0;
}

.dc-intro__top-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.dc-intro__date {
  margin: 0 0 0.2rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.96);
}

.dc-intro__next {
  margin: 0;
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
}

.dc-intro__last {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.32rem;
  font-size: var(--fs-3xs);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

.dc-intro__last[hidden] {
  display: none;
}

.dc-intro__last-label {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.42);
}

.dc-intro__last-value {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.96);
}

.dc-intro__last-max {
  font-size: var(--fs-3xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

.dc-intro__streak {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.32rem 0.65rem 0.32rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.dc-intro__streak[hidden] {
  display: none;
}

.dc-intro__streak-icon {
  font-size: 0.95rem;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}

.dc-intro__streak-count {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.dc-intro__streak-label {
  opacity: 0.7;
}

.dc-intro__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0 0.75rem;
}

.dc-intro__title {
  margin: 0;
  font-size: clamp(1.85rem, 8.2vmin, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  /* 1.02 was tight enough to clip descenders (the "g" in "region")
     when the gradient text-fill clipped to the ink box. 1.12 keeps the
     two lines visually close while reserving space for descenders. */
  line-height: 1.12;
  text-align: center;
  /* Extra safety margin for the descender on the last line so the
     gradient clip doesn't shave the bottom of glyphs like g/p/y. */
  padding-bottom: 0.05em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.78) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dc-intro__stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.85rem, 4vmin, 1.5rem);
  margin: 0.95rem 0 0;
  padding: 0;
  list-style: none;
}

.dc-intro__stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0 clamp(0.45rem, 2.4vmin, 0.85rem);
  position: relative;
}

.dc-intro__stats li + li::before {
  content: "";
  position: absolute;
  left: calc(clamp(0.85rem, 4vmin, 1.5rem) / -2);
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.dc-intro__stats strong {
  font-size: clamp(1.35rem, 6vmin, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.dc-intro__stats span {
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Mini preview grid (decorative) */
.dc-intro__preview {
  position: relative;
  width: 100%;
  max-width: min(100%, 220px);
  margin: 0.95rem 0 0;
  padding: 0;
}

.dc-intro__preview-grid {
  --dc-pn: 5;
  display: grid;
  grid-template-columns: repeat(var(--dc-pn), 1fr);
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dc-intro__preview-cell {
  aspect-ratio: 1;
  position: relative;
  background: var(--dc-pcell, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-intro__preview-cell svg {
  width: 60%;
  height: 60%;
  color: #14181f;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
  opacity: 0;
  transform: scale(0.6);
  animation: dc-preview-pop 480ms cubic-bezier(0.2, 0.9, 0.3, 1.4) forwards;
  animation-delay: calc(180ms + var(--dc-pi, 0) * 90ms);
}

@keyframes dc-preview-pop {
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .dc-intro__preview-cell svg { animation: none; opacity: 1; transform: none; }
}

.dc-intro__steps {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  max-width: min(100%, 320px);
}

.dc-intro__steps li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
  text-align: left;
}

.dc-intro__step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}

.dc-intro__cta {
  flex-shrink: 0;
  margin-top: auto;
  width: 100%;
  align-self: stretch;
  padding: 0.72rem 1.35rem;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  background: var(--bg);
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.dc-intro__cta:hover:not(:disabled) {
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.3);
  background: #fff;
}

@media (max-height: 560px) {
  .dc-intro__title { font-size: clamp(1.55rem, 7vmin, 2rem); }
  .dc-intro__stats { margin-top: 0.6rem; }
  .dc-intro__steps { margin-top: 0.65rem; gap: 0.4rem; }
  .dc-intro__preview { margin-top: 0.6rem; max-width: 160px; }
}

/* --- Mobile (≤600px) ---------------------------------------------------
   Trims chrome aggressively so the board itself dominates the screen.
   Card frame is dropped on the gameplay surface (not on the intro card),
   shell padding shrinks, the lede is folded into the top stats line, and
   the stage is allowed to size to its content rather than a fixed dvh box.
*/
@media (max-width: 600px) {
  body.dc-page main.game-shell.game-shell--wide {
    padding: 0.55rem 0.55rem;
    padding-left: max(0.55rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.55rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(0.55rem, env(safe-area-inset-bottom, 0px));
    row-gap: 0.4rem;
  }

  body.dc-page .game-shell--wide h1 {
    font-size: var(--fs-xl);
    margin-bottom: 0.1rem;
  }

  body.dc-page .game-shell--wide .lede {
    display: none;
  }

  .dc-shell-head {
    align-items: center;
    gap: 0.4rem;
    /* Keep the stats clear of the floating sound toggle (mounted by
       /js/sounds.js) which sits fixed in the top-right. */
    padding-right: var(--play-sounds-toggle-reserve, 3rem);
  }

  .dc-top-stats {
    margin-bottom: 0;
    text-align: left;
  }

  .dc-top-stats__date {
    margin-bottom: 0.1rem;
  }

  /* Stage fills the remaining viewport so the gameplay surface can use
     the full vertical run, and any non-stretching child (like the intro
     card) is centered inside the spare height. */
  body.dc-page .game-stage.dc-stage {
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
  }

  /* Intro card stretches to fill the stage on mobile (mirroring Daily
     Swatch) so the dark surface dominates the viewport instead of
     floating in cream. The intro itself uses .dc-intro__main { flex: 1 }
     to absorb the spare run with the title block, and the CTA stays
     pinned to the bottom via margin-top: auto. */
  .dc-card.dc-card--intro {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
  }

  /* Gameplay surface drops the card chrome and centers the board +
     toolbar vertically so the spare height is split as breathing room
     above and below - no more big bottom void. */
  .dc-card:not(.dc-card--intro) {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    flex: 1 1 auto;
  }

  .dc-card:not(.dc-card--intro) .dc-card__viewport {
    padding: 0.5rem 0;
    gap: 0.7rem;
    justify-content: center;
  }

  /* Mobile board sizes against the wrap's real box via container
     queries; the cap raises slightly so the puzzle dominates phones. */
  .dc-board {
    width: min(100cqw, 100cqh, 640px);
    height: min(100cqw, 100cqh, 640px);
  }

  @supports not (width: 100cqh) {
    .dc-board {
      width: min(calc(100dvw - 1.1rem), calc(82dvh - 8rem), 640px);
      height: auto;
    }
  }

  .dc-toolbar {
    margin-top: 0.15rem;
  }
}

/* Mood blobs · subtle accent */
body:has(.dc-stage) .blob__inner--tan {
  background: color-mix(in srgb, #f3d9a4 35%, var(--blob-tan));
}

body:has(.dc-stage) .blob__inner--grey {
  background: color-mix(in srgb, #b8d4e6 32%, var(--blob-grey));
}