.daily-toolbar { display: flex; }
.daily-switch { overflow-x: auto; gap: 26px; scrollbar-width: thin; }
.daily-switch button { flex: 0 0 auto; white-space: nowrap; min-height: 46px; }
.daily-switch button:focus-visible, .daily-secondary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.puzzle-topline { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 24px; color: var(--muted); font-size: 13px; }
#boardReward { color: var(--cyan); }
#boardProgress { font-variant-numeric: tabular-nums; }
.memory-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; width: min(100%,540px); margin: 0 auto; }
.memory-tile { position: relative; padding: 0; aspect-ratio: 1 / 1.08; perspective: 700px; background: transparent; border: 0; color: var(--paper); }
.memory-inner { display: block; position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 240ms ease; }
.memory-tile.is-revealed .memory-inner { transform: rotateY(180deg); }
.memory-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; border: 1px solid var(--line); overflow: hidden; }
.memory-back { background: var(--ink) url('/assets/daily-contours.svg') center / 360px; }
.memory-back::before { content: ''; position: absolute; inset: 0; background: #181b14e8; }
.memory-back span { position: relative; font: 600 24px var(--heading-type); color: #8a957c; }
.memory-front { transform: rotateY(180deg); background: #181b14; }
.memory-front img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.memory-tile.is-matched .memory-front { border-color: var(--cyan); }
.memory-check { display: none; position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; background: var(--cyan); color: var(--ink); font-size: 14px; line-height: 20px; }
.memory-tile.is-matched .memory-check { display: block; }
.memory-tile:not(:disabled):hover .memory-back { border-color: var(--cyan); }
.memory-tile:disabled { cursor: default; opacity: 1; filter: none; }
.memory-tile:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.puzzle-footer { display: flex; justify-content: space-between; width: min(100%,540px); margin: 18px auto 0; color: var(--muted); font-size: 12px; min-height: 20px; }
.sliding-layout { display: grid; grid-template-columns: minmax(0,384px) minmax(120px,168px); align-items: start; justify-content: center; gap: 28px; }
.sliding-grid { width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; background: var(--ink); border: 1px solid var(--line); }
.sliding-tile { position: absolute; width: calc(100% / 3); height: calc(100% / 3); background-color: var(--ink); background-size: 300% 300%; border: 2px solid var(--panel); padding: 0; transition: left 160ms ease, top 160ms ease; }
.sliding-tile:disabled { opacity: 1; cursor: default; filter: none; }
.sliding-tile.is-legal { cursor: pointer; }
.sliding-tile.is-legal:hover, .sliding-tile:focus-visible { z-index: 1; outline: 2px solid var(--cyan); outline-offset: -3px; }
.tile-number { position: absolute; top: 5px; left: 5px; display: grid; place-items: center; min-width: 23px; min-height: 23px; padding: 2px 4px; color: var(--paper); background: #181b14e8; font: 600 13px Barlow,sans-serif; }
.sliding-grid.is-complete .sliding-tile { border-width: 0; }
.sliding-reference { display: grid; gap: 10px; }
.sliding-reference > span { color: var(--muted); font-size: 12px; }
.sliding-reference img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; background: var(--ink); border: 1px solid var(--line); }
.sliding-reference label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }
.sliding-reference input { accent-color: var(--cyan); width: 16px; height: 16px; margin: 0; }
.sliding-caption { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
.puzzle-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #ffffff18; }
.puzzle-result strong { display: block; color: #d2dfac; font: 600 32px/1.1 var(--heading-type); }
.puzzle-result p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.daily-board.is-lost .puzzle-result strong { color: #e0b3a9; }
@media(max-width:600px) {
 .daily-toolbar { max-width:100%; }
 .daily-switch { gap:20px; }
 .daily-switch button { font-size:12px; }
 .puzzle-topline { font-size:12px; margin-bottom:20px; }
 .memory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .sliding-layout { display:flex; flex-direction:column-reverse; gap:18px; }
 .sliding-grid { width:min(100%,384px); align-self:center; }
 .sliding-reference { grid-template-columns:60px 1fr; gap:6px 12px; width:100%; }
 .sliding-reference img { grid-column:1; grid-row:1 / 3; }
 .sliding-reference > span, .sliding-reference label { grid-column:2; }
 .sliding-reference > span { align-self:end; }
 .sliding-reference label { align-self:start; }
 .puzzle-result { align-items:start; gap:12px; }
 .puzzle-result strong { font-size:28px; }
 .puzzle-result button { font-size:10px; padding:8px; flex-shrink:0; }
}
@media(prefers-reduced-motion:reduce) {
 .memory-inner, .sliding-tile, .daily-board, .daily-board::before { transition:none; }
 .daily-board.celebrating::after { animation:none; }
}