/* Sunlit Garden: an optional, complete casual-game material skin.
   All selectors are scoped so the three existing studies retain their finish. */
:root[data-theme='garden'] {
    color-scheme: light;
    --garden-cream: oklch(98% .03 91);
    --garden-green: oklch(29% .06 162);
    --garden-gold: oklch(82% .135 85);
    --garden-rim: oklch(57% .105 73);
    --garden-shadow: oklch(17% .04 163 / .6);
}
:root[data-theme='garden'] body { background: oklch(25% .048 164); }
:root[data-theme='garden'] :is(h2, h3, #win-message) { text-shadow: none; }
:root[data-theme='garden'] body::before {
    background: linear-gradient(oklch(22% .05 162 / .78), oklch(18% .04 162 / .88)), url('assets/themes/sunlit-garden-v1.webp') 64% center / cover;
    filter: none; opacity: 1;
}
:root[data-theme='garden'] :is(.bg-rays, .bg-dust) { display: none; }

/* Enamel faces, gilt rims, a visible lower edge, and a real pressed state. */
:root[data-theme='garden'] button:not(.level-card):not(.chrome-home):not(.theme-choice) {
    border: 2px solid var(--garden-gold);
    border-radius: var(--control-radius);
    box-shadow: inset 0 2px 0 oklch(98% .03 90 / .5), inset 0 -3px 0 oklch(19% .06 160 / .45), 0 3px 0 oklch(30% .06 151), 0 5px 10px var(--garden-shadow);
    font-weight: 600;
    text-shadow: 0 1px 1px oklch(15% .04 163 / .4);
    transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), filter 150ms;
}
:root[data-theme='garden'] button:not(.level-card):not(.chrome-home):not(.theme-choice):hover { filter: brightness(1.06); transform: translateY(-1px); }
:root[data-theme='garden'] button:not(.level-card):not(.chrome-home):not(.theme-choice):active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px oklch(20% .04 150 / .32), 0 1px 0 oklch(30% .06 151);
}
:root[data-theme='garden'] button:disabled { filter: saturate(.5); transform: none; }
:root[data-theme='garden'] :is(.menu-primary, .win-primary, .pack-buy, .ad-action, .gallery-filter.is-active, .leaderboard-tab.is-active) {
    text-shadow: 0 1px oklch(98% .03 90 / .8) !important;
}
:root[data-theme='garden'] button:focus-visible { outline: 3px solid oklch(94% .05 92); outline-offset: 4px; box-shadow: 0 0 0 6px oklch(35% .11 235); }
:root[data-theme='garden'] .ui-icon { stroke-width: 1.9; filter: drop-shadow(0 1px 0 oklch(10% .03 160 / .25)); }

/* Both words belong to one carved-ivory title, without a second emblem. */
:root[data-theme='garden'] #screen-menu .title-scene { padding-left: clamp(34px, 7vw, 140px); }
:root[data-theme='garden'] :is(.title-content, .boot-content) { width: min(400px, 100%); text-align: center; container-type: inline-size; }
:root[data-theme='garden'] :is(.title-content, .boot-content)::before {
    content: none;
}
:root[data-theme='garden'] #screen-menu .title-content h1.wordmark,
:root[data-theme='garden'] .boot-wordmark {
    font-family: 'Lora', Georgia, serif; font-size: clamp(3.8rem, 6.5vw, 6rem);
    font-weight: 700; letter-spacing: -.04em; line-height: 1; text-align: center;
    margin: 0 0 35px; color: var(--garden-cream);
    text-shadow: 0 2px 0 oklch(62% .1 75), 0 4px 0 oklch(28% .065 150), 0 6px 12px oklch(14% .045 160 / .65);
}
:root[data-theme='garden'] #screen-menu .wordmark > span:first-child,
:root[data-theme='garden'] .boot-wordmark > span:first-child { display: block; font-size: 1em; letter-spacing: -.04em; }
:root[data-theme='garden'] #screen-menu .wordmark > span:last-child,
:root[data-theme='garden'] .boot-wordmark > span:last-child {
    display: block; margin-top: 6px; font: inherit; font-size: .53em;
    line-height: 1.2; text-transform: none; letter-spacing: -.04em;
    padding: 0; color: inherit; background: none; text-shadow: inherit;
}
/* The painted sun is at x=1045 of the 1536px artwork. Keep that focal point
   centered, with enough image on either side to cover wide screens too. */
:root[data-theme='garden'] :is(.title-art img, .boot-art img) {
    position: absolute; top: 0; left: 50%;
    width: max(156.5vw, 150svh); height: auto; max-width: none;
    transform: translateX(-68.03385%); object-position: center;
}
:root[data-theme='garden'] :is(.title-actions, .title-links, #screen-menu .daily-status, .boot-progress) { margin-inline: auto; }
:root[data-theme='garden'] .title-actions { width: min(306px, 100%); gap: 18px; }
:root[data-theme='garden'] .title-actions button {
    position: relative; border-radius: 22px; min-height: 66px; font-size: 1.25rem;
    background: linear-gradient(180deg, oklch(57% .115 155), oklch(40% .09 162) 48%, oklch(34% .07 166) 50%, oklch(43% .09 159));
}
:root[data-theme='garden'] .title-actions #daily-button {
    min-height: 76px; font-size: 1.65rem; color: oklch(25% .075 158);
    border: 3px solid oklch(97% .075 92);
    background: linear-gradient(180deg, oklch(98% .09 96), oklch(88% .14 87) 48%, oklch(80% .145 79) 50%, oklch(87% .14 86));
    box-shadow: inset 0 2px 0 oklch(99% .015 90), inset 0 -4px 0 oklch(63% .12 72), 0 0 0 2px oklch(61% .12 75), 0 6px 0 oklch(35% .08 76), 0 10px 22px var(--garden-shadow);
}
:root[data-theme='garden'] .title-actions #daily-button:active { box-shadow: inset 0 2px 4px oklch(50% .07 75 / .4), 0 2px 0 oklch(35% .08 76); }
:root[data-theme='garden'] .title-actions [data-icon] {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: oklch(16% .05 160 / .18); box-shadow: inset 0 1px 3px oklch(13% .04 160 / .24), 0 1px 0 oklch(98% .03 90 / .3);
}
:root[data-theme='garden'] #daily-button .ui-icon { fill: oklch(35% .09 160); }
:root[data-theme='garden'] .title-links { gap: 14px; margin-top: 22px; width: min(306px, 100%); }
:root[data-theme='garden'] .title-links button {
    flex: 1; min-width: 0; flex-direction: row; gap: 8px; padding: 10px 14px; min-height: 48px;
    border: 1px solid var(--garden-gold); border-radius: 16px;
    background: linear-gradient(180deg, oklch(43% .085 160), oklch(30% .065 163));
    color: var(--menu-ink); font-size: .9rem;
}
:root[data-theme='garden'] .title-links button:hover { background: linear-gradient(180deg, oklch(48% .085 160), oklch(34% .065 163)); }
:root[data-theme='garden'] .title-links [data-icon] { display: none; }
:root[data-theme='garden'] .title-link-divider { display: none; }
:root[data-theme='garden'] body.screen-menu-active:not([data-slice]) .utility-dock button {
    border-radius: 50%; background: linear-gradient(160deg, oklch(51% .1 163), oklch(28% .06 166));
}

:root[data-theme='garden'] .boot-progress { width: 230px; height: 8px; border-radius: 10px; border: 1px solid var(--garden-gold); background: oklch(24% .06 161); }
:root[data-theme='garden'] .boot-status { color: var(--menu-ink); }

/* An ivory puzzle tray with a brass edge and a deep-green backing. */
:root[data-theme='garden'] .restoration-frame {
    padding: 30px 28px 23px; border: 3px solid var(--garden-gold); border-radius: 27px;
    background: linear-gradient(110deg, oklch(91% .055 85), oklch(98% .025 90) 30% 65%, oklch(90% .06 83));
    box-shadow: inset 0 0 0 2px oklch(99% .018 92), inset 0 -6px 0 oklch(65% .085 77 / .45), 0 0 0 2px oklch(41% .065 80), 0 8px 0 oklch(29% .06 155), 0 20px 40px var(--garden-shadow);
}
:root[data-theme='garden'] .restoration-frame::before { inset: 7px; border: 1px solid oklch(64% .085 78 / .48); border-radius: 19px; }
:root[data-theme='garden'] .frame-ornament {
    top: -25px; width: 52px; height: 52px; padding: 0; font-size: 0;
    background: url('assets/themes/garden-sun.svg') center / contain no-repeat;
}
:root[data-theme='garden'] #puzzle-title { color: var(--text-primary); font-size: 1.7rem; }
:root[data-theme='garden'] .puzzle-byline { color: var(--text-muted); font-style: normal; font-size: .83rem; }
:root[data-theme='garden'] .progress-copy { color: var(--text-primary); font-size: .83rem; margin-bottom: 8px; }
:root[data-theme='garden'] #combo-label { color: oklch(38% .1 156); font-weight: 700; }
:root[data-theme='garden'] .progress-track {
    overflow: hidden; height: 13px; border: 2px solid oklch(63% .09 79); border-radius: 20px;
    background: oklch(82% .035 108); box-shadow: inset 0 2px 4px oklch(34% .06 150 / .25), 0 1px 0 var(--garden-cream);
}
:root[data-theme='garden'] #progress-bar {
    position: relative; border-radius: inherit;
    background: linear-gradient(180deg, oklch(78% .145 148), oklch(49% .12 159));
    box-shadow: inset 0 1px 0 oklch(94% .08 110), 0 0 6px oklch(67% .11 151 / .3);
}
:root[data-theme='garden'] #game-container {
    padding: 6px; border: 3px solid oklch(76% .115 82); border-radius: 10px;
    box-shadow: inset 0 0 0 1px oklch(24% .055 155), 0 0 0 2px oklch(51% .08 75), 0 4px 8px oklch(31% .05 153 / .22);
}
:root[data-theme='garden'] :is(.clue-row, .clue-col) {
    color: oklch(22% .035 158); background: oklch(90% .032 131); font-weight: 700;
    text-shadow: none; border-radius: 2px;
}
:root[data-theme='garden'] :is(.clue-row, .clue-col).is-solved {
    color: oklch(32% .08 155); background: oklch(81% .085 143); text-shadow: none;
    box-shadow: inset 0 -2px 0 oklch(47% .08 148 / .25);
}
:root[data-theme='garden'] .cell:not(.filled):not(.marked):not(.mistake) {
    background: linear-gradient(145deg, var(--empty-pane-top), var(--empty-pane-bottom));
    border-color: oklch(76% .04 122); border-radius: 3px;
    box-shadow: inset 0 1px 0 var(--garden-cream), inset 0 -2px 0 oklch(77% .04 104 / .48);
}
:root[data-theme='garden'] body:not(.solved-phase-1) .cell.filled {
    background: linear-gradient(145deg, oklch(69% .10 175), oklch(46% .09 171));
    border: 1px solid oklch(32% .065 167); border-radius: 3px;
    box-shadow: inset 0 1px 0 oklch(89% .055 170), inset 0 -2px 0 oklch(29% .07 163 / .55);
}
:root[data-theme='garden'] .cell.marked { background: var(--marked-pane); box-shadow: inset 0 1px 3px oklch(36% .05 153 / .17); }
:root[data-theme='garden'] .cell.mistake { background: oklch(87% .065 30); }
:root[data-theme='garden'] .cell.mistake::after { color: oklch(42% .15 25); }
:root[data-theme='garden'] .cell.kb-focus { outline: 3px solid oklch(42% .16 248); outline-offset: -3px; }
:root[data-theme='garden'] .cell.filled.kb-focus { outline-color: var(--garden-cream); }
:root[data-theme='garden'] :is(.clue-row, .clue-col).line-pop { animation-name: garden-clue-complete; }
@keyframes garden-clue-complete {
    0% { background: oklch(96% .10 92); }
    40% { background: oklch(90% .12 105); }
    100% { background: oklch(81% .085 143); }
}
:root[data-theme='garden'] .game-controls { padding-top: 16px; gap: 10px; }
:root[data-theme='garden'] .game-controls > button,
:root[data-theme='garden'] .game-controls .help-btn { min-height: 48px; height: 48px; font-size: .84rem; }
:root[data-theme='garden'] .game-controls .help-wrapper { height: 48px; }
:root[data-theme='garden'] #hint-button { background: linear-gradient(180deg, oklch(59% .12 238), oklch(37% .1 247)); }
:root[data-theme='garden'] .game-info { color: var(--text-muted); font-size: .8rem; }
:root[data-theme='garden'] .info-action { color: var(--text-primary); font-weight: 600; }
:root[data-theme='garden'] .tooltip-content { background: var(--garden-cream); color: var(--text-primary); border: 2px solid var(--garden-rim); border-radius: 14px; }
:root[data-theme='garden'] .tooltip-content strong { color: var(--text-primary); }

/* Collection windows are keepsakes; sealed panes still conceal unsolved art. */
:root[data-theme='garden'] .chrome-home { color: var(--garden-cream); text-shadow: 0 2px 5px var(--garden-shadow); font-family: 'Lora', Georgia, serif; }
:root[data-theme='garden'] :is(.gallery-heading h2, .leaderboard-heading h2, #screen-store > h2) {
    color: var(--garden-cream); font-size: 2.65rem; letter-spacing: -.035em; text-shadow: 0 3px 5px var(--garden-shadow);
}
:root[data-theme='garden'] :is(.screen-kicker, .leaderboard-kicker) { color: var(--garden-gold); font-size: .8rem; letter-spacing: .17em; }
:root[data-theme='garden'] .gallery-toolbar {
    border: 2px solid var(--garden-rim); border-radius: 20px;
    background: var(--surface); box-shadow: inset 0 2px 0 var(--garden-cream), 0 4px 14px var(--garden-shadow);
}
:root[data-theme='garden'] .daily-play-note { color: var(--text-muted); }
:root[data-theme='garden'] .daily-play-note strong { color: var(--text-primary); }
:root[data-theme='garden'] .level-grid { gap: 22px; padding: 23px 8px; }
:root[data-theme='garden'] .level-card {
    border: 3px solid var(--garden-gold); box-shadow: 0 3px 0 oklch(47% .08 76), 0 8px 15px var(--garden-shadow);
    background: var(--surface); transition: transform 180ms var(--ease), box-shadow 180ms;
}
:root[data-theme='garden'] .level-card:hover { transform: translateY(-4px); box-shadow: 0 3px 0 oklch(47% .08 76), 0 12px 22px var(--garden-shadow); }
:root[data-theme='garden'] .level-thumb { background: radial-gradient(ellipse at 50% 70%, oklch(54% .09 161), oklch(29% .07 163)); }
:root[data-theme='garden'] :is(.level-thumb-art.is-preview, .level-thumb-art.is-locked) {
    border: 3px solid oklch(79% .1 85);
    background-image: repeating-conic-gradient(from 45deg, oklch(48% .09 169) 0 25%, oklch(57% .085 163) 0 50%);
    box-shadow: inset 0 0 15px oklch(23% .05 163 / .5), 0 0 0 2px oklch(33% .06 159);
}
:root[data-theme='garden'] .level-thumb-art.is-preview .ui-icon { background: oklch(29% .065 164); color: oklch(93% .09 88); border: 1px solid var(--garden-gold); }
:root[data-theme='garden'] .level-lock { color: var(--garden-cream); background: oklch(28% .045 165); }
:root[data-theme='garden'] .level-card-info { background: linear-gradient(var(--garden-cream), var(--surface-deep)); padding: 14px 12px; }
:root[data-theme='garden'] .level-card-title { font-family: 'Lora', Georgia, serif; font-size: 1.03rem; font-weight: 700; }
:root[data-theme='garden'] :is(.level-card-status, .level-card-pack) { color: var(--text-primary); }
:root[data-theme='garden'] .level-card-status.is-complete { color: var(--success); }
:root[data-theme='garden'] .gallery-scroll-hint { color: var(--garden-cream); background: oklch(24% .05 160); border-radius: 0 0 12px 12px; }
:root[data-theme='garden'] :is(.premium-card, .premium-card.is-bundle, .leaderboard-shell, .admire-card, .ad-card, .fatal-card) {
    border: 3px solid var(--garden-gold); background: linear-gradient(125deg, var(--surface), var(--surface-deep));
    box-shadow: inset 0 2px 0 var(--garden-cream), 0 5px 0 oklch(39% .06 82), 0 12px 25px var(--garden-shadow);
}
:root[data-theme='garden'] :is(.premium-card h3, .pack-theme, .admire-title, .ad-card-title, .fatal-card h2, .leaderboard-summary strong) { color: var(--text-primary); }
:root[data-theme='garden'] :is(.pack-blurb, .pack-count, .premium-price .was, .premium-card.is-owned .pack-blurb, .premium-card.is-owned .pack-count) { color: var(--text-muted); }
:root[data-theme='garden'] :is(.premium-price, .premium-card.is-owned h3, .premium-card.is-owned .premium-price, .premium-card.is-owned .pack-theme) { color: var(--text-primary); text-shadow: none; }
:root[data-theme='garden'] :is(.pack-save, .owned-check) { color: var(--success); }
:root[data-theme='garden'] .leaderboard-shell :is(.leaderboard-status, .leaderboard-name, .leaderboard-rank, .leaderboard-score) { color: var(--text-primary); }
:root[data-theme='garden'] .leaderboard-summary { color: var(--text-muted); }
:root[data-theme='garden'] .gallery-progress { color: var(--garden-cream); }

/* The completion flourish celebrates the restored object, without a fake score. */
:root[data-theme='garden'] #win-message { color: var(--text-primary); font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 1.65rem; letter-spacing: -.02em; }
:root[data-theme='garden'] #win-message::before {
    content: ''; display: inline-block; width: 34px; height: 34px; margin: 0 6px 0 0; vertical-align: middle;
    background: url('assets/themes/garden-sun.svg') center / contain no-repeat;
}
:root[data-theme='garden'] .win-note { color: var(--text-muted); font-size: .85rem; }
:root[data-theme='garden'] .solved-phase-1 :is(.clue-row, .clue-col) { background: transparent; box-shadow: none; }
:root[data-theme='garden'] .solved-phase-1 .cell:not(.filled) { background: transparent; border-color: transparent; box-shadow: none; }
:root[data-theme='garden'] .solved-phase-2 #game-container { box-shadow: 0 0 0 2px var(--garden-rim), 0 0 28px oklch(82% .13 85 / .3); }
:root[data-theme='garden'] body.solved-phase-2 #game-container.has-depth-reward {
    --reward-size: min(420px, calc(100vw - 64px), max(190px, calc(100svh - 490px)));
    background: none; border-color: transparent; box-shadow: none;
}

@media (max-width: 700px), (max-width: 900px) and (orientation: portrait) {
    :root[data-theme='garden'] #screen-menu .title-scene { padding: 60px 24px 24px; }
    :root[data-theme='garden'] :is(.title-content, .boot-content) { margin-top: 16svh; }
    :root[data-theme='garden'] :is(.title-content, .boot-content)::before { width: 70px; height: 70px; margin-bottom: 4px; }
    :root[data-theme='garden'] .title-art::after,
    :root[data-theme='garden'] .boot-art::after {
        background: linear-gradient(180deg, transparent 8%, oklch(20% .05 164 / .15) 27%, oklch(20% .05 164 / .93) 68%, oklch(18% .05 164) 100%);
    }
    :root[data-theme='garden'] :is(.title-art img, .boot-art img) { object-position: 66% top; }
    :root[data-theme='garden'] #screen-menu .title-content h1.wordmark,
    :root[data-theme='garden'] .boot-wordmark { font-size: 4.4rem; margin-bottom: 25px; }
    :root[data-theme='garden'] .title-actions { gap: 14px; width: min(286px, 100%); }
    :root[data-theme='garden'] .title-actions button { min-height: 56px; font-size: 1.12rem; }
    :root[data-theme='garden'] .title-actions #daily-button { min-height: 65px; font-size: 1.4rem; }
    :root[data-theme='garden'] .title-links { margin-top: 14px; width: min(286px, 100%); }
    :root[data-theme='garden'] .title-links button { min-height: 48px; font-size: .85rem; }
    :root[data-theme='garden'] .restoration-frame { padding: 28px 12px 19px; border-radius: 23px; }
    :root[data-theme='garden'] #puzzle-title { font-size: 1.35rem; }
    :root[data-theme='garden'] .progress-copy { font-size: .77rem; }
    :root[data-theme='garden'] #game-container { padding: 3px; border-width: 2px; }
    :root[data-theme='garden'] .game-controls { gap: 7px; }
    :root[data-theme='garden'] .game-controls > button,
    :root[data-theme='garden'] .game-controls .help-btn { padding-inline: 9px; font-size: .77rem; }
    :root[data-theme='garden'] .gallery-toolbar { padding: 13px; }
    :root[data-theme='garden'] .level-grid { gap: 14px; }
    :root[data-theme='garden'] .level-card-title { font-size: .95rem; }
    :root[data-theme='garden'] .game-info { font-size: .75rem; }
    :root[data-theme='garden'] #win-message { font-size: 1.35rem; }
    :root[data-theme='garden'] #win-message::before { display: none; }
}
@media (max-width: 700px) and (max-height: 700px) {
    :root[data-theme='garden'] :is(.title-content, .boot-content)::before { width: 60px; height: 60px; }
    :root[data-theme='garden'] #screen-menu .title-content h1.wordmark { font-size: 3.8rem; margin-bottom: 23px; }
}
@media (max-width: 700px) and (max-height: 600px) {
    :root[data-theme='garden'] :is(.title-content, .boot-content) { margin-top: 8svh; }
}
@media (max-height: 740px) and (min-width: 901px) {
    :root[data-theme='garden'] :is(.title-content, .boot-content)::before { width: 80px; height: 80px; }
    :root[data-theme='garden'] #screen-menu .title-content h1.wordmark { font-size: 4.7rem; margin-bottom: 28px; }
}
@media (max-height: 540px) {
    :root[data-theme='garden'] :is(.title-content, .boot-content)::before { display: none; }
    :root[data-theme='garden'] #screen-menu .title-content h1.wordmark { font-size: 3rem; margin-bottom: 18px; }
    :root[data-theme='garden'] .title-content { margin-top: 0; }
    :root[data-theme='garden'] .title-actions { gap: 12px; }
    :root[data-theme='garden'] .title-actions #daily-button { min-height: 56px; }
    :root[data-theme='garden'] .title-links { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    :root[data-theme='garden'] button, :root[data-theme='garden'] .level-card { transition: none; }
    :root[data-theme='garden'] :is(.clue-row, .clue-col).line-pop { animation: none; }
}
/* At high zoom the content can be narrower than the viewport media query.
   Keep the complete wordmark inside its actual available width. */
@container (max-width: 260px) {
    :root[data-theme='garden'] #screen-menu .title-content h1.wordmark,
    :root[data-theme='garden'] .boot-wordmark { font-size: min(4.4rem, 26cqw); }
}