@font-face {
    font-family: 'Jardin Words';
    src: url('./barlow-condensed-bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Jardin Hand';
    src: url('./patrick-hand.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { background: #f9f3de; color: #2c442b; overscroll-behavior: none; }
button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.jardin-page {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #f9f3de;
}

.jardin-board {
    position: relative;
    container-type: size;
    width: 100%;
    height: 100%;
    max-width: 560px;
    isolation: isolate;
}

.jardin-artwork {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    user-select: none;
    pointer-events: none;
    z-index: -1;
}

.jardin-progress {
    position: absolute;
    left: 42.72%;
    top: 6.95%;
    width: 14.89%;
    height: 3.3%;
    display: grid;
    place-items: center;
    font: 400 3.67cqw / 1 'Jardin Hand', sans-serif;
    color: #566444;
    border-radius: 999px;
}

.jardin-breeze {
    position: absolute;
    left: -1.94175%;
    top: 18.6211%;
    width: 33.65696%;
    height: 15.61579%;
    contain: layout paint;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.jardin-breeze > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.jardin-breeze[hidden] { display: none; }

#jardin-progress-value { position: relative; }

.jardin-reset {
    position: absolute;
    top: 2%;
    left: 87.38%;
    width: 9.39%;
    height: 5.25%;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.jardin-word, .jardin-label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #304532;
}

.jardin-word {
    z-index: 2;
    border-radius: 19% / 43%;
    cursor: pointer;
    user-select: none;
    transition: filter .18s ease;
}

.jardin-word:active:not(.jardin-word--root) { filter: brightness(.96); }
.jardin-word--root { color: #fffaf1; cursor: default; }
.jardin-word--revealed { color: #184b31; }

.jardin-word__skin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.jardin-word__text, .jardin-label__text {
    position: relative;
    flex: 0 0 auto;
    width: max-content;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
    pointer-events: none;
}

.jardin-word__text {
    font-family: 'Jardin Words', sans-serif;
    font-weight: 700;
    letter-spacing: .02em;
}

.jardin-word--root .jardin-word__text {
    font-family: 'Jardin Hand', sans-serif;
    font-weight: 400;
    letter-spacing: .015em;
    -webkit-text-stroke: .25px currentColor;
}

.jardin-label { z-index: 3; pointer-events: none; border-radius: 999px; }
.jardin-label__text { font-family: 'Jardin Hand', sans-serif; font-weight: 400; }

.jardin-reset:focus-visible, .jardin-word:focus-visible {
    outline: 2px solid #466730;
    outline-offset: 3px;
}

.jardin-validation-counts {
    position: absolute;
    z-index: 4;
    top: 93.05%;
    left: 31%;
    width: 38%;
    height: 4.65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25cqh;
    padding: 0 1.5cqw;
    border: 1px solid #ead7a7;
    border-radius: 999px;
    background: linear-gradient(130deg, #fff8e6, #fff1d2);
    color: #4d633e;
    box-shadow: inset 0 1px 2px #fffdf2, 0 3px 8px #65573226;
    font-family: 'Jardin Hand', sans-serif;
    text-align: center;
    pointer-events: none;
}

.jardin-validation-counts__value {
    font-size: clamp(12px, 4.6cqw, 25px);
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.jardin-validation-counts__label {
    font-size: clamp(8px, 2.7cqw, 15px);
    line-height: 1;
    white-space: nowrap;
}

.jardin-validation {
    position: absolute;
    z-index: 4;
    top: 86%;
    left: 23%;
    width: 54%;
    height: 5.5%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #8fa34e;
    border-radius: 999px;
    background: linear-gradient(125deg, #e1eda6, #bdd47d 70%, #abc269);
    color: #294e2d;
    box-shadow: inset 0 2px 2px #fff9da, inset 0 -2px 3px #91ad59, 0 3px 0 #93a552, 0 7px 12px #65573230;
    font: 400 clamp(12px, 4cqw, 21px) / 1 'Jardin Hand', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .18s ease, box-shadow .18s ease;
}

.jardin-validation:not(:disabled):hover { filter: brightness(1.035); }
.jardin-validation:not(:disabled):active { box-shadow: inset 0 2px 3px #91ad59, 0 1px 0 #93a552; }
.jardin-validation:focus-visible { outline: 2px solid #466730; outline-offset: 4px; }
.jardin-validation:disabled { cursor: default; }
.jardin-validation__icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; }
.jardin-validation[data-state="pending"] { filter: saturate(.6); cursor: wait; }
.jardin-validation[data-state="success"] { background: linear-gradient(125deg, #d8eaa0, #aeca70); }
.jardin-validation[data-state="error"] { border-color: #bb8259; background: linear-gradient(125deg, #fff0c9, #edc99b); color: #804624; }
.jardin-validation:disabled:not([data-state]) { filter: saturate(.3); opacity: .8; }

.jardin-error { position: absolute; top: 40%; margin: 0 10%; padding: 16px; background: #fff7e0; border-radius: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Mobile keeps the full portrait. Desktop separates the landscape and the game.
   Both layouts retain the original 927 × 1697 coordinate system. */
.jardin-page--panorama {
    --jardin-board-width: min(100vw, 560px);
}
.jardin-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.jardin-scene { position: relative; width: 100%; height: 100%; }
.jardin-landscape { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.jardin-fixed-frame { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; isolation: isolate; overflow: clip; }
.jardin-page--panorama .jardin-board { z-index: 2; width: var(--jardin-board-width); flex: 0 0 auto; }
.jardin-board-artwork { position: absolute; z-index: 0; top: 0; left: 50%; transform: translateX(-50%); width: var(--jardin-board-width); height: 100%; pointer-events: none; }
.jardin-board-artwork > .jardin-artwork { z-index: auto; }
.jardin-edge-frame { position: absolute; z-index: 1; top: 0; width: var(--jardin-board-width); height: 100%; pointer-events: none; }
.jardin-edge-frame--left { left: calc((100% - var(--jardin-board-width)) / 2); }
.jardin-edge-frame--right { right: calc((100% - var(--jardin-board-width)) / 2); }
.jardin-static-edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; mask-position: 0 0; mask-size: 100% 100%; mask-repeat: no-repeat; }
.jardin-static-edge--top-left { mask-image: url('./jardin-mask-top-left.svg'); }
.jardin-static-edge--top-right { mask-image: url('./jardin-mask-top-right.svg'); }
.jardin-static-edge--right-edge { mask-image: url('./jardin-mask-right-edge.svg'); }
.jardin-falling-leaves[data-paused="true"] .jardin-falling-leaf { animation-play-state: paused; }
.jardin-breeze:is([data-breeze-state="running"], [data-breeze-state="paused"], [data-breeze-state="reduced"]) + .jardin-static-edge { display: none; }
.jardin-brand { position: absolute; left: 33.44%; top: 1.06%; width: 34.2%; height: 6.3%; margin: 0; pointer-events: none; }
.jardin-brand svg { display: none; width: 100%; height: 100%; }
.jardin-reset svg { display: none; width: 64%; height: 64%; vertical-align: middle; }
.jardin-guidance { position: absolute; left: 15%; width: 70%; bottom: 2.3%; display: none; justify-items: center; pointer-events: none; color: #4d633e; font-family: 'Jardin Hand', sans-serif; }
.jardin-touch-hint { margin: 0; border: 1px solid #ead7a7; border-radius: 999px; padding: 1.2cqh 5cqw; background: #fff4d9; box-shadow: 0 3px 8px #65573226; font-size: clamp(14px, 3.6cqw, 20px); }
@media (min-width: 700px) {
    .jardin-page--panorama { --jardin-board-width: min(560px, 64vh); --jardin-board-width: min(560px, 64dvh); }
    .jardin-landscape { display: block; }
    .jardin-edge-frame--left { left: 0; }
    .jardin-edge-frame--right { right: 0; }
    .jardin-artwork--tree { mask: url('./jardin-mask-tree.svg?v=2') 0 0 / 100% 100% no-repeat; }
    .jardin-brand svg { display: block; }
    .jardin-page--panorama .jardin-reset { color: #3e573c; background: #fff6df; box-shadow: 0 3px 8px #66563730, inset 0 1px 0 #fffef0; }
    .jardin-reset svg { display: inline-block; }
    .jardin-page--panorama .jardin-word, .jardin-page--panorama .jardin-label { box-shadow: 0 3px 7px #65573228; }
    .jardin-page--panorama .jardin-word > .jardin-word__skin { border-radius: 0; mask: url('./jardin-mask-card.svg') 0 0 / 100% 100% no-repeat; }
    .jardin-page--panorama .jardin-label > .jardin-word__skin { border-radius: 0; mask: url('./jardin-mask-label.svg') 0 0 / 100% 100% no-repeat; }
    .jardin-guidance { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
    .jardin-word, .jardin-validation { transition: none; }
}