@charset "UTF-8";
:root{--paper:#f7f8f2;--ink:#26382c;--muted:#778076;--line:#dfe4d9;--green:#2c6345;--lime:#d9f29a;--coral:#de8678;--tile-color:hsl(153 29% 51%);--odd-color:hsl(153 29% 73%);font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--green);outline-offset:5px}button{touch-action:manipulation}button svg{pointer-events:none}a{color:inherit}button:disabled:hover{transform:none}svg{display:block;width:24px;height:24px;flex-shrink:0}[hidden]{display:none!important}
.site-header{height:109px;max-width:1312px;margin:auto;padding:0 56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;text-decoration:none;font-size:35px;font-weight:800;letter-spacing:-1.8px}.brand-period{color:#7daa55}.brand-mark{display:grid;grid-template-columns:repeat(2,10px);gap:3px;margin-right:13px;transform:rotate(-8deg)}.brand-mark i{width:10px;height:10px;border-radius:3px;background:var(--green)}.brand-mark i:last-child{background:#a7ca7c}.header-actions{display:flex;align-items:center;gap:26px}.how-button{border:0;background:none;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;padding:9px 0}.question-mark{height:17px;width:17px;border:1.4px solid currentColor;border-radius:50%;font-size:11px;line-height:15px}.icon-button{width:39px;height:39px;border:1px solid var(--line);border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#e9eedf}.icon-button svg{width:18px;height:18px}.sound-on{display:none}.sound-button[aria-pressed=true] .sound-on{display:block}.sound-button[aria-pressed=true] .sound-off{display:none}
.main-layout{max-width:1200px;margin:0 auto;padding:67px 38px 51px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,498px);gap:80px;align-items:center}.intro{padding:0 0 38px}.eyebrow{font-size:10px;letter-spacing:2.05px;font-weight:700;display:flex;align-items:center;gap:10px;white-space:nowrap}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#6d9250}h1{font-size:clamp(66px,6.9vw,87px);line-height:1.02;letter-spacing:-5.5px;margin:25px 0 23px;font-weight:700}h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--green);letter-spacing:-4.7px}.intro-copy{font-size:16px;line-height:1.8;margin:0;color:#717b70;letter-spacing:.1px}.how-it-works{margin-top:37px;max-width:343px}.how-it-works>div{display:flex;align-items:center;gap:15px;height:47px;border-bottom:1px solid var(--line)}.how-it-works>div:last-child{border:0}.step-number{font-size:10px;font-weight:500;color:#9ca395;letter-spacing:1px}.how-it-works p{font-size:12px;margin:0;flex:1}.step-icon{height:17px;width:17px;color:#779369;margin-right:2px}.mini-grid{display:grid;grid-template-columns:repeat(2,6px);gap:2px;margin-right:3px}.mini-grid i{height:6px;width:6px;background:#90a984;border-radius:1px}.mini-grid i:last-child{background:#c4d5b7}.relaxed-note{display:flex;align-items:center;gap:8px;margin-top:34px;color:#8a9483;font-size:11px}.relaxed-note svg{width:22px;height:22px}
.game-card{padding:24px 26px 0;border:1px solid #e2e7dc;border-radius:25px;background:#fff;box-shadow:0 12px 38px -20px #33492c1c;position:relative}.scoreboard{display:flex;align-items:center;justify-content:space-between;padding:0 2px 20px;border-bottom:1px solid #edf0e8}.stat-label{font-size:9px;letter-spacing:1.5px;color:#909889;font-weight:700;display:flex;align-items:center;gap:5px;white-space:nowrap}.stat-label svg{width:12px;height:12px}.scoreboard strong{font-size:31px;letter-spacing:-1.5px;display:block;margin-top:5px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.15}.best-stat{text-align:right}.best-stat .stat-label{justify-content:flex-end}.best-stat strong{color:#7b906f}.lives-stat{display:flex;flex-direction:column;align-items:center}.hearts{display:flex;gap:6px;margin-top:11px;margin-bottom:2px}.hearts svg{width:20px;height:20px;color:var(--coral);fill:var(--coral)}.hearts svg.lost{color:#e6e9e0;fill:#e6e9e0}.board-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 1px 15px}.board-heading h2{font-size:12px;font-weight:500;margin:0}.board-heading>span{font-size:10px;letter-spacing:1px;color:#909989;background:#f5f7f0;padding:5px 8px;border-radius:5px}.board-wrap{position:relative;border-radius:15px;overflow:hidden;background:#f0f4e9;aspect-ratio:1}.tile-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--size,2),minmax(0,1fr));grid-template-rows:repeat(var(--size,2),minmax(0,1fr));gap:var(--gap,10px);padding:14px;width:100%;height:100%;aspect-ratio:1;transition:opacity .2s}.tile{display:block;appearance:none;-webkit-appearance:none;aspect-ratio:1;border:0;background:var(--tile-color);border-radius:9px;position:relative;min-width:0;min-height:0;width:100%;height:100%;padding:0;transition:box-shadow .15s;overflow:visible}.tile.odd{background:var(--odd-color)}.tile:active:not(:disabled){box-shadow:inset 0 0 0 3px #ffffff66}.tile:focus-visible{z-index:2;outline:3px solid #25392d;outline-offset:3px;box-shadow:0 0 0 5px #fff}.tile.correct:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(24px,4vw,52px);font-weight:400;color:#fff;text-shadow:0 1px 10px #0002;animation:pop .25s both}.tile.missed:after{content:'×';position:absolute;inset:0;display:grid;place-items:center;font-size:28px;font-weight:400;color:#fff9}.tile-grid.board-enter .tile{animation:tile-in .24s ease-out both}.feedback{height:57px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;color:#929a8b;text-align:center;line-height:1.4}.feedback-dot{width:5px;height:5px;border-radius:50%;background:#c1cbb6;flex-shrink:0}.feedback.success{color:var(--green)}.feedback.success .feedback-dot{background:#74a357}.feedback.error{color:#b26b59}.feedback.error .feedback-dot{background:#cc8977}
.game-bottom{display:flex;justify-content:space-between;align-items:center;margin:21px 3px 0}.difficulty{display:flex;align-items:center;gap:12px}.difficulty>span{font-size:9px;font-weight:600;letter-spacing:1.25px;color:#8c9783}.difficulty-bars{display:flex;gap:3px}.difficulty-bars i{height:9px;width:4px;border-radius:2px;background:#dfe5d5}.difficulty-bars i.filled{background:#8ea877}.restart-button{display:flex;align-items:center;gap:6px;border:0;padding:5px 0;background:transparent;color:#8c9683;font-size:11px}.restart-button:hover{color:var(--green)}.restart-button svg{width:13px;height:13px}.keyboard-note{font-size:9px;letter-spacing:.15px;text-align:center;color:#a0a795;margin:21px 0 0}.keyboard-note span{padding:0 8px}.site-footer{max-width:1200px;margin:auto;padding:25px 0 29px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#97a08f;font-size:10px;letter-spacing:.1px}.footer-palette{display:flex;gap:5px;margin-left:-20px}.footer-palette i{width:10px;height:10px;border-radius:3px;background:#729e80}.footer-palette i:nth-child(2){background:#acbd87}.footer-palette i:nth-child(3){background:#d8c381}.footer-palette i:nth-child(4){background:#dc9f8b}.footer-palette i:nth-child(5){background:#a1a5c2}
.result-overlay{position:absolute;inset:0;background:#f0f4e9f5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center;animation:fade-in .3s}.result-flower{color:#7a9c52;font-size:41px;line-height:1;margin-bottom:12px}.result-eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:600;color:#859276}.result-overlay h2{font-family:Georgia,'Times New Roman',serif;font-size:36px;font-weight:400;line-height:1.02;letter-spacing:-1px;margin:13px 0}.result-overlay p{font-size:11px;line-height:1.6;max-width:220px;color:#7b8871;margin:0}.result-stats{display:flex;justify-content:center;gap:40px;margin:17px 0}.result-stats span{font-size:8px;letter-spacing:1px;color:#8d9982}.result-stats strong{display:block;font-size:28px;font-weight:500;margin-top:5px}.primary-button{background:var(--green);color:#fff;border:0;border-radius:9px;padding:14px 19px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:32px;min-width:176px;transition:background .15s,transform .15s}.primary-button:hover{background:#214d35;transform:translateY(-1px)}.primary-button span{font-size:21px;font-weight:400;line-height:16px}.result-overlay .primary-button{padding:12px 18px}
dialog{border:1px solid var(--line);border-radius:23px;padding:38px;max-width:440px;width:calc(100% - 40px);color:var(--ink);background:var(--paper);box-shadow:0 15px 70px #16231c26}dialog::backdrop{background:#1d342c55;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:15px;top:15px;font-size:24px}.dialog-tag{font-size:9px;letter-spacing:1.8px;color:#819176;margin-bottom:16px}dialog h2{font-family:Georgia,'Times New Roman',serif;font-size:33px;letter-spacing:-.8px;font-weight:400;line-height:1.1;margin:0 0 17px}dialog p,dialog li{font-size:13px;line-height:1.7;color:#727e6b}dialog ul{padding-left:17px;margin:22px 0 15px}dialog li{padding-left:3px;margin-bottom:6px}.demo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:22px 0}.demo-grid span{aspect-ratio:1;border-radius:7px;background:#6c9c80;display:grid;place-items:center;color:var(--green);font-size:25px}.demo-grid span:last-child{background:#b8d0a9}.dialog-small{font-size:11px;line-height:1.7;margin-bottom:24px}dialog .primary-button{width:100%}.secondary-button{border:0;background:none;font-size:13px;margin-top:15px;padding:8px;width:100%;color:#7d8974}.restart-dialog{max-width:360px}.restart-dialog p{margin-bottom:25px}
@keyframes tile-in{from{opacity:.3}to{opacity:1}}@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}
@media(min-width:1500px){.main-layout{padding-top:90px;padding-bottom:85px}}
@media(max-width:1100px){.main-layout{gap:45px;padding-right:45px;padding-left:45px;grid-template-columns:minmax(0,1fr) minmax(0,450px)}h1{font-size:73px}.eyebrow{font-size:8px;letter-spacing:1.6px}.site-footer{margin:0 45px}.game-card{padding:22px 22px 0}.how-it-works p{font-size:11px}}
@media(max-width:850px) and (min-width:701px){.main-layout{gap:30px;padding-left:30px;padding-right:30px;grid-template-columns:1fr 1.2fr}.site-header{padding:0 30px}h1{font-size:62px;letter-spacing:-4px}h1 em{letter-spacing:-3px}.intro-copy{font-size:13px}.how-it-works p{font-size:10px}.how-it-works>div{gap:10px}.eyebrow{font-size:7px;letter-spacing:1.1px}.game-card{padding:18px 18px 0}.result-flower{display:none}.result-overlay h2{font-size:30px}.result-stats{margin:12px 0}.relaxed-note{font-size:9px}.stat-label{font-size:8px;letter-spacing:1px}}
@media(max-width:700px){.site-header{height:78px;padding:0 24px}.wordmark{font-size:30px}.header-actions{gap:18px}.how-button{font-size:11px}.icon-button{height:34px;width:34px}.main-layout{display:flex;flex-direction:column;gap:27px;padding:36px 22px 35px;max-width:500px}.intro{text-align:center;padding:0;width:100%}.eyebrow{justify-content:center;font-size:8px;letter-spacing:1.5px}h1{font-size:51px;line-height:1.1;letter-spacing:-2.7px;margin:15px 0 12px}h1 br{display:none}h1 em{letter-spacing:-3px}.intro-copy{font-size:12px;line-height:1.7}.intro-copy br{display:none}.how-it-works,.relaxed-note{display:none}.play-area{width:100%}.game-card{padding:21px 20px 0;border-radius:22px}.scoreboard{padding-bottom:17px}.scoreboard strong{font-size:29px}.stat-label{font-size:8px;letter-spacing:1.2px}.board-heading{padding:15px 1px 12px}.board-heading h2{font-size:11px}.tile-grid{padding:11px;gap:var(--gap,8px)}.tile{border-radius:7px}.feedback{height:50px;font-size:9px}.game-bottom{margin-top:15px}.keyboard-note{display:none}.site-footer{margin:0 24px;padding:22px 0;font-size:9px}.site-footer>span:last-child{display:none}.footer-palette{margin:0}.result-overlay{padding:20px}.result-flower{font-size:32px;margin-bottom:10px}.result-overlay h2{font-size:31px;margin:10px 0}.result-stats{margin:13px 0}.result-stats strong{font-size:25px}.result-overlay .primary-button{font-size:12px}.tile.correct:after{font-size:36px}}
@media(max-width:360px){.site-header{padding:0 18px}.main-layout{padding:28px 14px}.header-actions{gap:12px}h1{font-size:45px}.game-card{padding:17px 15px 0}.result-flower{display:none}.result-overlay h2{font-size:28px}.result-stats{margin:10px 0}.difficulty{gap:7px}.difficulty>span{font-size:8px}.how-button{font-size:10px}}
/* Keep replay within even the smallest board; tall content can scroll. */
.result-overlay{overflow-y:auto}
@media(max-width:850px) and (min-width:701px){.result-overlay{padding:18px}.result-overlay h2{font-size:26px;margin:8px 0}.result-overlay h2 br{display:none}.result-stats{margin:10px 0}.result-overlay .primary-button{padding:10px 15px}}
@media(max-width:700px){.result-flower{display:none}.result-overlay{padding:16px}.result-overlay h2{font-size:30px;margin:10px 0}.result-overlay h2 br{display:none}.result-stats{margin:12px 0}.result-stats strong{font-size:24px}}
@media(max-width:360px){.result-overlay h2{font-size:26px;margin:8px 0}.result-overlay p{font-size:10px}.result-stats{margin:8px 0}.result-overlay .primary-button{padding:10px 15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}