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

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

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

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

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

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

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

body.ds-page .layout {
  /* Prefer dvh over height:100% — after SPA swaps from the hub, percentage
     height can fail to resolve and the flex chain collapses (board → 0×0). */
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

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

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

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

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

/* Wider game shell + one-screen sizing. */
body.ds-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.ds-page .game-shell--wide .back-link {
  margin-bottom: 0.35rem;
}

body.ds-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.ds-page .game-shell--wide .lede {
  margin: 0 0 0.45rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

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

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

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

.ds-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;
}

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

.ds-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;
}

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

.ds-top-stats__item .ds-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 ds-num-bump {
  0%   { transform: scale(1);    color: var(--text); }
  35%  { transform: scale(1.32); color: var(--ds-conflict, #e23b46); }
  100% { transform: scale(1);    color: var(--text); }
}

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

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

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

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

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

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

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

/* Stage + card */
.ds-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.ds-page .game-stage.ds-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.ds-page .game-stage.ds-stage {
    max-height: min(82vh, 720px);
  }
}

.ds-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;
}

.ds-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 ------------------------------------------------------------- */
.ds-board-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Floor height so SPA/flex collapse can't clip the board to 0.
     Subtract space for the fixed bottom banner plus chrome so the wrap
     cannot outgrow the card and clip the top of the board. */
  min-height: min(48dvh, calc(100dvh - 26rem), 520px);
  max-height: 100%;
  container-type: size;
  container-name: ds-board-wrap;
}

@supports not (height: 48dvh) {
  .ds-board-wrap {
    min-height: min(48vh, calc(100vh - 26rem), 520px);
  }
}

.ds-board {
  --ds-w: 7;
  --ds-h: 7;
  /* Viewport-first sizing so the board stays visible even if the wrap's
     container-query box collapses (common after hub → game SPA). */
  width: min(100%, calc(100dvw - 2.5rem), calc(100dvh - 14rem), 640px);
  height: auto;
  max-width: 100%;
  max-height: min(70dvh, 720px);
  aspect-ratio: var(--ds-w) / var(--ds-h);
  display: grid;
  grid-template-columns: repeat(var(--ds-w), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ds-h), minmax(0, 1fr));
  gap: 2px;
  background: #1a2230;
  border: 2px solid #14181f;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(20, 24, 30, 0.28);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform 120ms ease;
}

@supports (width: 100cqh) {
  .ds-board {
    width: min(100%, 100cqw, calc(100cqh * var(--ds-w) / var(--ds-h)), calc(100dvw - 2.5rem), calc(100dvh - 14rem), 640px);
    max-height: min(100cqh, 70dvh, 720px);
  }
}

@supports not (height: 100dvh) {
  .ds-board {
    width: min(100%, calc(100vw - 2.5rem), calc(100vh - 14rem), 640px);
    max-height: min(70vh, 720px);
  }
}

.ds-board--reject {
  animation: ds-board-shake 320ms ease;
}

@keyframes ds-board-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.ds-selection {
  position: absolute;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(90, 169, 255, 0.22);
  border-radius: 6px;
  box-sizing: border-box;
  z-index: 4;
}

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

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

.ds-cell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: #2a3344;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: crosshair;
  transition: background-color 120ms ease;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}

.ds-cell--filled {
  background: var(--ds-fill, #b8d4e6);
}

.ds-cell--clue .ds-cell__num {
  font-size: clamp(0.65rem, 2.8vmin, 1.05rem);
  font-weight: 700;
  color: #f0f4fa;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 2;
}

.ds-cell--filled.ds-cell--clue .ds-cell__num {
  color: #14181f;
}

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

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

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

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

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

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

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

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

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

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

@keyframes ds-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) {
  .ds-cell__mark svg { animation: none; }
}

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

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

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

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

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

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

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

.ds-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;
}

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

/* --- Complete overlay -------------------------------------------------- */
.ds-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;
}

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

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

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

.ds-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;
}

.ds-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;
}

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

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

.ds-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);
}

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

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

/* Distribution panel (synthetic ranking) */
.ds-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);
}

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

.ds-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);
}

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

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

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

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

.ds-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(--ds-rank-x, 50%);
}

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

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

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

.ds-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;
}

.ds-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);
}

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

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

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

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

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

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

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

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

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

/* --- Share modal ------------------------------------------------------- */
.ds-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));
}

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

.ds-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;
}

.ds-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: ds-share-pop 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.ds-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;
}

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

.ds-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;
}

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

.ds-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;
}

.ds-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;
}

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

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

.ds-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) {
  .ds-share-modal__inner {
    width: 100%;
    border-radius: 18px;
  }
}

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

/* --- Intro card -------------------------------------------------------- */
.ds-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);
}

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

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

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

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

.ds-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);
}

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

.ds-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);
}

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

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

.ds-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);
}

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

.ds-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;
}

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

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

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

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

.ds-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;
}

.ds-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;
}

.ds-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;
}

.ds-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;
}

.ds-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);
}

.ds-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;
}

.ds-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) */
.ds-intro__preview {
  position: relative;
  width: 100%;
  max-width: min(100%, 220px);
  margin: 0.95rem 0 0;
  padding: 0;
}

.ds-intro__preview-grid {
  --ds-pn: 5;
  display: grid;
  grid-template-columns: repeat(var(--ds-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);
}

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

.ds-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: ds-preview-pop 480ms cubic-bezier(0.2, 0.9, 0.3, 1.4) forwards;
  animation-delay: calc(180ms + var(--ds-pi, 0) * 90ms);
}

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

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

.ds-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);
}

.ds-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;
}

.ds-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;
}

.ds-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);
}

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

@media (max-height: 560px) {
  .ds-intro__title { font-size: clamp(1.55rem, 7vmin, 2rem); }
  .ds-intro__stats { margin-top: 0.6rem; }
  .ds-intro__steps { margin-top: 0.65rem; gap: 0.4rem; }
  .ds-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.ds-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.ds-page .game-shell--wide h1 {
    font-size: var(--fs-xl);
    margin-bottom: 0.1rem;
  }

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

  .ds-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);
  }

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

  .ds-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.ds-page .game-stage.ds-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 .ds-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. */
  .ds-card.ds-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. */
  .ds-card:not(.ds-card--intro) {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    flex: 1 1 auto;
  }

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

  /* Mobile board: keep viewport floor; prefer container box when it has size. */
  .ds-board {
    width: min(100%, calc(100dvw - 1.1rem), calc(100dvh - 12rem), 640px);
    height: auto;
    max-height: min(72dvh, 640px);
  }

  @supports (width: 100cqh) {
    .ds-board {
      width: min(100%, 100cqw, 100cqh, calc(100dvw - 1.1rem), calc(100dvh - 12rem), 640px);
      max-height: min(100cqh, 72dvh, 640px);
    }
  }

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

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

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