.daily { max-width: 36rem; padding-top: clamp(1.25rem, 4vw, 2.25rem); }
.daily-intro { text-align: center; }
.daily-intro h1 { font-size: clamp(2.5rem, 8vw, 3.6rem); }
.daily-intro .brand { text-decoration: none; }
[data-trail-landing] .daily-intro { margin-bottom: 1rem; }
[data-trail-landing] .daily-intro h1 { letter-spacing: -.012em; }
[data-trail-landing] .daily-content { margin-top: .85rem; container: trail-game / inline-size; }

.mode-nav, .daily-actions:not([hidden]), .tile-tray, .layer-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.mode-nav { justify-content: center; margin: 1.25rem 0 1rem; }
.mode-nav a {
  padding: .55rem .78rem;
  border: 1px solid var(--edge);
  border-radius: .65rem;
  background: var(--panel);
  color: var(--muted);
  font-size: .85rem;
  font-weight: 650;
  text-decoration: none;
}

.mode-nav a:hover, .mode-nav a[aria-current="page"] {
  border-color: #78669c;
  background: #3a3053;
  color: var(--text);
}

.mode-nav a:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }

.daily-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.daily-heading h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }

.edition {
  margin: 0 0 .2rem;
  color: var(--lavender);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.instructions, .board-note, .daily-feedback {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

.instructions { margin: .6rem 0 .9rem; }
.trail-rules {
  max-width: 26rem;
  margin: 1.25rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--edge);
}
.trail-rules h3 { margin: 0; color: var(--text); font-size: 1rem; }
.trail-rules ol { margin: .5rem 0; padding-inline-start: 1.3rem; }
.trail-rules li + li { margin-top: .3rem; }
.trail-rules p { margin: .55rem 0 0; }
.board-note { margin: .55rem 0; }
#today { color: var(--lavender); font-size: .88rem; }

.daily-content { max-width: 26rem; margin-inline: auto; }

.daily-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.2rem, 1vw, .45rem);
  padding: clamp(.25rem, 1.2vw, .65rem);
  border: 1px solid var(--edge);
  border-radius: .85rem;
  background: #161a27;
}

.tiles-board { grid-template-columns: repeat(4, minmax(0, 1fr)) 2.2rem; }
.daily-cell, .double-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #41465e;
  border-radius: .5rem;
  background: #262c3e;
  color: var(--text);
  font-size: clamp(1.12rem, 4vw, 2rem);
  font-variant-numeric: tabular-nums;
}

.daily-cell:not(:disabled):hover { background: #333b52; }
.daily-cell[data-fixed] { border-color: #675782; background: #3a3053; color: var(--lavender); }
.daily-cell:disabled { cursor: default; opacity: 1; }
[data-movable] { cursor: grab; touch-action: none; user-select: none; }
[data-movable]:active { cursor: grabbing; }
.daily-cell[data-drop-active] { border-color: var(--mint); background: #29443f; }

.drag-ghost {
  position: fixed;
  z-index: 10;
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid var(--lavender);
  border-radius: .6rem;
  background: #493c63;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 750;
  pointer-events: none;
}

.box-right { margin-right: .25rem; }
.box-bottom { margin-bottom: .25rem; }

.daily-total {
  align-self: center;
  padding: .3rem .15rem;
  border-radius: .35rem;
  background: #25293a;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.daily-total[data-status="met"], .pair-total[data-status="met"] { background: #29443f; color: var(--mint); }
.daily-total[data-status="wrong"], .pair-total[data-status="wrong"] { background: #4c293b; color: var(--pink); }

.tile-tray {
  justify-content: center;
  margin-top: .85rem;
  padding: .7rem .4rem;
  border: 1px solid var(--edge);
  border-radius: .75rem;
  background: #25293a;
}

.tray-tile {
  width: 2.8rem;
  min-height: 2.8rem;
  padding: .25rem;
  background: #493c63;
  color: var(--text);
  font-size: 1.15rem;
}

.tray-tile[aria-pressed="true"] { border-color: var(--mint); background: #29443f; color: var(--mint); }
.tray-tile:disabled { opacity: .4; cursor: default; }

.layer-legend, .trail-stats { margin: 0 0 .65rem; }
.layer {
  padding: .35rem .65rem;
  border-radius: .45rem;
  font-size: .84rem;
  font-weight: 700;
}

.layer-a { background: #372e50; color: #dccfff; }
.layer-b { background: #2a4042; color: #c1eddb; }

.double-cell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: .15rem;
  padding: .24rem .2rem;
}

.double-cell:has(.pair-total) { padding-bottom: 1.05rem; }

.double-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: .3rem;
  font: 750 clamp(.93rem, 3.4vw, 1.7rem) / 1 system-ui, sans-serif;
  text-align: center;
}

.double-input::placeholder { color: #a8a9bc; opacity: 1; }
.double-input[readonly] { border-color: #79728e; }
.double-input:focus-visible { outline: 2px solid var(--lavender); outline-offset: 1px; }
.double-input[aria-invalid="true"] { border-color: var(--pink); background: #4c293b; }
.daily-content [data-hinted] { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); }

.pair-total {
  position: absolute;
  right: .18rem;
  bottom: .1rem;
  left: .18rem;
  border-radius: .2rem;
  color: var(--lavender);
  font-size: .72rem;
  line-height: 1.2;
  text-align: center;
}

.trail-targets, .trail-board {
  --trail-color: #bdd7fc;
  --trail-surface: #2b3b53;
}

.trail-board { touch-action: none; user-select: none; }
.trail-tile:not(:disabled) { cursor: crosshair; }
.trail-start-panel { display: grid; justify-items: center; gap: .55rem; padding: 1.25rem .8rem; text-align: center; }
.trail-start-panel label { font-weight: 650; }
.trail-start-panel .board-note { margin: 0; }
.trail-clock { font-variant-numeric: tabular-nums; }
.trail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}
.trail-stats .count { padding-inline: .4rem; text-align: center; white-space: nowrap; }
@container trail-game (min-width: 24rem) {
  .trail-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.daily-actions .trail-check, .trail-start { background: var(--lavender); color: #242032; }
.daily-actions .trail-check:not(:disabled):hover, .trail-start:hover { background: #ddcffd; }
.daily-actions .trail-check:disabled { background: #282d3e; color: var(--muted); }

.trail-tile[data-hint-arrow] { box-shadow: inset 0 0 0 2px #f8d99a; }
.trail-tile[data-hint-arrow]::before {
  position: absolute;
  top: .2rem;
  right: .3rem;
  color: #f8d99a;
  content: attr(data-hint-arrow);
  font-size: 1.1rem;
}

[data-trail="1"] { --trail-color: var(--mint); --trail-surface: #29443f; }
[data-trail="2"] { --trail-color: #f8d99a; --trail-surface: #4a3c27; }
[data-trail="3"] { --trail-color: var(--lavender); --trail-surface: #3a3053; }

.trail-targets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin: 0 0 .7rem;
  padding: 0;
  list-style: none;
}

.trail-target {
  position: relative;
  display: grid;
  min-inline-size: 0;
  gap: .12rem;
  padding: .55rem .35rem;
  border: 1px solid var(--edge);
  border-radius: .65rem;
  background: #262c3e;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

.trail-target[data-guess] {
  border-color: var(--trail-color);
  border-style: dashed;
  background: var(--trail-surface);
  color: var(--trail-color);
}
.trail-target[data-complete] {
  border-color: var(--trail-color);
  background: var(--trail-color);
  color: #242032;
}
.trail-target-name { font-size: .75rem; line-height: 1.2; }
.trail-target-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.trail-target-value { font-size: 1.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }

.trail-tile[data-step] {
  border-color: var(--trail-color);
  background: var(--trail-surface);
  color: var(--trail-color);
}

.trail-tile[data-step]:not(:disabled):hover { background: var(--trail-surface); }
.trail-tile[data-guess] { border-style: dashed; }

.trail-tile[data-rejected], .trail-tile[data-rejected]:not(:disabled):hover {
  --trail-color: #ffd0d6;
  --trail-surface: #642d3d;
  border-color: var(--trail-color);
  background: var(--trail-surface);
  color: var(--trail-color);
  animation: trail-rejected 450ms ease-out;
}

@keyframes trail-rejected {
  from { box-shadow: inset 0 0 0 3px #ff8ea1; }
  to { box-shadow: inset 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .trail-tile[data-rejected] { animation: none; }
}

.trail-tile[data-step]::after {
  position: absolute;
  top: .2rem;
  left: .25rem;
  color: var(--trail-color);
  content: attr(data-step);
  font-size: .72rem;
}

.daily-content[data-solved] .daily-board { border-color: #65ad96; }
.trail-celebration {
  position: relative;
  margin-top: .85rem;
  padding: .75rem;
  border: 1px solid #65ad96;
  border-radius: .65rem;
  background: #29443f;
  color: var(--mint);
  font-weight: 750;
  text-align: center;
}

.trail-confetti { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .4rem;
  height: .6rem;
  border-radius: .1rem;
  animation: trail-burst 1s ease-out both;
}

@keyframes trail-burst {
  from { opacity: 1; transform: translate(0, 0); }
  to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--spin)); }
}

@media (prefers-reduced-motion: reduce) {
  .trail-confetti { display: none; }
}

.daily-actions { margin-top: .9rem; }
.daily-actions #more-today, .daily-actions .trail-share-copy { background: var(--lavender); color: #242032; }
.daily-actions #more-today:hover, .daily-actions .trail-share-copy:hover { background: #ddcffd; }
.daily-actions button { min-height: 2.75rem; }
.daily-actions button:disabled { opacity: .45; cursor: default; }
#daily-share { margin-left: auto; }
.daily-feedback { margin: .55rem 0 0; }
.daily-feedback:empty { margin: 0; }
.daily-feedback[data-status="met"] { color: var(--mint); font-weight: 700; }

.trail-stats-link.download-project { min-height: 2.75rem; margin: 0; }
.trail-results-dialog { width: min(29rem, 100% - 2rem); color: var(--text); }
.trail-results-dialog::backdrop { background: #10111bc9; }
.trail-share-card canvas {
  display: block;
  width: min(100%, 15rem);
  margin-inline: auto;
  height: auto;
  border-radius: .85rem;
}
.trail-share-actions { justify-content: center; margin-top: .7rem; }
.trail-share-actions .download-project { margin: 0; }
.trail-share-actions [hidden] { display: none; }
.trail-share-status { text-align: center; }
.trail-share-status:empty { display: none; }
.trail-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .5rem;
  margin: .75rem 0;
}
.trail-stat-cards > div { padding: .65rem; border: 1px solid var(--edge); border-radius: .65rem; background: #161a27; }
.trail-stat-cards dt { color: var(--muted); font-size: .8rem; }
.trail-stat-cards dd { margin: .2rem 0 0; font-size: 1.2rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.trail-stats-page .panel { margin-top: 1rem; }
.trail-chart-select { color: var(--muted); font-size: .85rem; }
.trail-chart-select select {
  margin-left: .25rem;
  padding: .4rem;
  border: 1px solid var(--edge);
  border-radius: .4rem;
  background: #25293a;
  color: var(--text);
  font: inherit;
}
.trail-time-plot { display: block; width: 100%; color: var(--muted); }
.trail-time-plot text { fill: currentColor; font-size: .9rem; font-variant-numeric: tabular-nums; }
.trail-plot-grid { stroke: var(--edge); }
.trail-plot-line { stroke: var(--mint); stroke-width: 2; fill: none; }
.trail-plot-dot { fill: var(--mint); stroke: var(--panel); stroke-width: 2; cursor: pointer; }
.trail-plot-dot[data-selected] { fill: var(--lavender); stroke: var(--text); }
.trail-chart-details { margin-top: .65rem; padding: .65rem; border-radius: .65rem; background: #161a27; }
.trail-chart-details .board-note { margin: .25rem 0 0; }
.trail-history { margin: .65rem 0 0; padding: 0; list-style: none; }
.trail-history-row { display: grid; gap: .2rem; padding: .65rem 0; border-top: 1px solid var(--edge); }
.trail-history-row span { color: var(--muted); font-size: .88rem; }

.trail-scores li { padding-block: .25rem; }
.trail-scores time { float: right; font-variant-numeric: tabular-nums; }
.trail-score-form { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .65rem 0; }
.trail-score-form[hidden] { display: none; }
.trail-name-input {
  max-width: 100%;
  min-width: 0;
  padding: .5rem;
  border: 1px solid var(--edge);
  border-radius: .5rem;
  background: #25293a;
  color: var(--text);
  font: inherit;
}

#daily-share-copy, .trail-share-grid-text {
  width: 100%;
  margin-top: .55rem;
  padding: .5rem;
  border: 1px solid var(--edge);
  border-radius: .5rem;
  background: #25293a;
  color: var(--text);
  font: inherit;
}

.trail-puzzles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem;
  margin-block: .75rem;
}

.trail-puzzles a {
  border: 1px solid var(--edge);
  border-radius: .5rem;
  color: inherit;
  font-size: .875rem;
  font-weight: 700;
  padding: .45rem .15rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.trail-puzzles a[aria-current] {
  background: var(--lavender);
  border-color: transparent;
  color: #242032;
}

.trail-puzzles a:not([aria-current]):hover {
  text-decoration: underline;
}

.trail-privacy {
  display: inline-block;
  margin-top: .75rem;
}