:root{color-scheme:light;--bg:#faf8ef;--ink:#776e65;--muted:#a89a8e;--label:#c4b8ac;--panel:#efe6db;--cell-empty:#eadfd3;--cell:#fbf8f1;--board:#fff;--btn:#8f7a66;--good:#8fbf6a;--stuck:#e09a5a;--shadow:0 12px 36px #776e6524;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--font:"Nunito Sans", "Segoe UI", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;margin:0}html{background:var(--bg)}body{min-height:100dvh;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}button,dialog{font:inherit}button{touch-action:manipulation}img,svg{display:block}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.page{flex-direction:column;min-height:100dvh;display:flex}.site-header{padding:calc(.75rem + var(--safe-top)) 1rem .75rem}.site-header-inner{justify-content:space-between;align-items:center;gap:.8rem;width:min(960px,100%);margin:0 auto;display:flex}.header-left,.header-right{align-items:center;gap:.55rem;min-width:0;display:flex}.menu-btn{display:none}.menu-btn:hover,.menu-btn:focus-visible{background:var(--panel);outline:none}.brand-link{color:var(--ink);letter-spacing:-.03em;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(1.05rem,2.6vw,1.45rem);font-weight:800;text-decoration:none;overflow:hidden}.brand-link span{color:#c56a3c}.brand-link:hover,.brand-link:focus-visible{outline:none;text-decoration:underline}.text-link{color:var(--ink);cursor:pointer;white-space:nowrap;background:0 0;border:0;padding:0;font-size:.95rem;font-weight:700;text-decoration:none}.text-link:hover,.text-link:focus-visible{outline:none;text-decoration:underline}.new-btn{background:var(--btn);color:#fff;cursor:pointer;white-space:nowrap;border:0;border-radius:.95rem;padding:.62rem 1rem;font-size:.92rem;font-weight:800}.new-btn:hover,.new-btn:focus-visible{filter:brightness(1.06);outline:none}.nav-drawer{width:min(960px,100% - 2rem);box-shadow:var(--shadow);background:#fff;border-radius:1rem;flex-wrap:wrap;gap:.55rem 1rem;margin:0 auto .4rem;padding:.7rem .85rem;display:flex}.nav-drawer[hidden]{display:none}.nav-drawer a,.nav-drawer button{color:var(--ink);cursor:pointer;background:0 0;border:0;padding:0;font-weight:700;text-decoration:none}.game-col{flex-direction:column;gap:.75rem;width:min(560px,100% - 1.6rem);margin:.35rem auto 0;display:flex}.hud{justify-content:center;align-items:stretch;gap:.45rem;display:flex}.stat{text-align:center;color:#776e65;border-radius:6px;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;min-width:0;padding:.55rem 1.15rem .6rem;display:flex;position:relative;overflow:hidden}.stat-score{background:#ede9e1}.stat-quiet{background:#f9f6f2;box-shadow:inset 0 0 0 1px #ede9e1}.stat span{color:#8f867c;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;font-weight:800;line-height:1;display:block}.stat strong{font-variant-numeric:tabular-nums;color:#776e65;margin-top:.2rem;font-size:clamp(1.35rem,4.2vw,1.7rem);font-weight:800;line-height:1.1;display:block}.gain{color:#8f7a66;opacity:0;pointer-events:none;margin:0;font-style:normal;font-weight:800;position:absolute;top:.35rem;left:50%;transform:translate(-50%)}.gain.is-on{animation:.9s score-pop}.board-wrap{background:var(--board);box-shadow:var(--shadow);border-radius:1.65rem;position:relative;overflow:hidden}.board-scroll{padding:.85rem}.board{-webkit-user-select:none;user-select:none;grid-template-columns:repeat(9,minmax(0,1fr));gap:.45rem;display:grid}.cell{aspect-ratio:1;color:var(--ink);cursor:pointer;background:#fbf6ee;border:0;border-radius:.72rem;padding:0;font-size:clamp(.95rem,4.4vw,1.35rem);font-weight:800;transition:transform .12s,box-shadow .12s;box-shadow:0 1px 2px #776e6529}.cell.is-empty{background:var(--cell-empty);box-shadow:none;cursor:default;pointer-events:none}.cell.is-selected{z-index:1;transform:translateY(-1px)scale(1.05);box-shadow:0 0 0 3px #c4b8ac}.cell.is-hint{box-shadow:0 0 0 3px var(--good);z-index:1;animation:1.1s infinite hint-pulse}.cell.is-matching{pointer-events:none;animation:.28s forwards match-out}.cell:not(.is-empty):active{transform:scale(.96)}.status{text-align:center;color:var(--muted);margin:0;font-size:.9rem;font-weight:700}.status.is-stuck{color:var(--stuck)}.dock{background:#f6f1ea;border-radius:999px;justify-content:center;align-items:flex-end;gap:.7rem;width:fit-content;margin-inline:auto;padding:.55rem .85rem .45rem;display:flex;box-shadow:0 10px 24px #776e651f}.dock-item{position:relative}.dock-tip{color:#fff;text-align:center;opacity:0;pointer-events:none;z-index:4;background:#2b2622;border-radius:.7rem;width:max-content;max-width:12.5rem;padding:.55rem .7rem .6rem;transition:opacity .15s;position:absolute;bottom:calc(100% + .7rem);left:50%;transform:translate(-50%)}.dock-tip:after{content:"";border:6px solid #0000;border-top-color:#2b2622;position:absolute;top:100%;left:50%;transform:translate(-50%)}.dock-tip strong{letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;font-weight:800;display:block}.dock-tip span{color:#d8d0c8;text-transform:none;margin-top:.2rem;font-size:.75rem;font-weight:600;line-height:1.3;display:block}.dock-item:hover:not(.tip-off) .dock-tip,.dock-item:focus-within:not(.tip-off) .dock-tip{opacity:1}.dock-btn{cursor:pointer;color:#fff;background:0 0;border:0;flex-direction:column;align-items:center;gap:.32rem;width:2.7rem;padding:0;display:flex;position:relative}.dock-icon{background:#c4b8ac;border-radius:.85rem;place-items:center;width:2.55rem;height:2.55rem;display:grid}.dock-icon svg{width:1.2rem;height:1.2rem}.dock-btn.is-primary .dock-icon{background:#8f7a66;box-shadow:0 6px 14px #8f7a6659}.dock-btn.is-urgent .dock-icon{animation:1.4s infinite add-pulse}.dock-marks{gap:.18rem;display:flex}.dock-marks i{background:#d7cdc3;border-radius:99px;width:.55rem;height:2px}.dock-btn.is-primary .dock-marks i:first-child{background:#8f7a66}.dock-badge{color:#fff;text-align:center;background:#8f7a66;border-radius:999px;min-width:1rem;height:1rem;padding:0 .22rem;font-size:.62rem;font-weight:800;line-height:1rem;position:absolute;top:-.2rem;right:-.15rem}.dock-btn:hover:not(:disabled) .dock-icon,.dock-btn:focus-visible .dock-icon{filter:brightness(1.05)}.dock-btn:focus-visible{outline:none}.dock-btn:disabled{opacity:.38;cursor:not-allowed}.overlay{backdrop-filter:blur(6px);background:#faf8efb8;place-items:center;padding:1rem;display:grid;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay-card{text-align:center;width:min(100%,20rem);box-shadow:var(--shadow);background:#fff;border-radius:1.3rem;padding:1.3rem 1.2rem 1.15rem}.overlay-card h2{margin:0;font-size:1.45rem}.overlay-card p{color:var(--muted);margin:.4rem 0 1rem}.overlay-card button{background:var(--btn);color:#fff;cursor:pointer;border:0;border-radius:.9rem;width:100%;min-height:2.7rem;font-weight:800}.toast{color:var(--ink);box-shadow:var(--shadow);white-space:nowrap;pointer-events:none;opacity:0;background:#fff;border-radius:999px;padding:.55rem .85rem;font-size:.82rem;font-weight:700;transition:opacity .2s;position:absolute;bottom:.85rem;left:50%;transform:translate(-50%)}.toast.is-on{opacity:1}.content{flex-direction:column;gap:1.15rem;width:min(960px,100% - 1.6rem);margin:1.6rem auto 0;display:flex}.panel{box-shadow:var(--shadow);background:#fff;border-radius:1.3rem;padding:1.15rem 1.15rem 1.2rem}.panel h2{margin:0 0 .55rem;font-size:1.25rem}.panel p,.panel li{color:var(--muted);line-height:1.5}.panel-head{justify-content:space-between;align-items:baseline;gap:.75rem;margin-bottom:.7rem;display:flex}.panel-head h2{margin:0}.clear-link{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0;font-size:.85rem;font-weight:700;text-decoration:underline}.best-line{color:var(--ink);margin:0 0 .85rem;font-weight:800}.records{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.records li{background:var(--panel);color:var(--ink);border-radius:.8rem;grid-template-columns:1.4rem 1fr auto;align-items:center;gap:.6rem;padding:.55rem .7rem;display:grid}.records .empty-row{color:var(--muted);background:0 0;padding-left:0;display:block}.records .is-top{box-shadow:inset 0 0 0 2px #d7c4ae}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.95rem;display:grid}.stat-card{background:var(--bg);text-align:center;border-radius:.9rem;padding:.7rem .55rem .75rem}.stat-card span{color:var(--label);letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;font-weight:800;display:block}.stat-card strong{font-variant-numeric:tabular-nums;margin-top:.2rem;font-size:1.15rem;display:block}.howto ol{margin:.55rem 0 .8rem;padding-left:1.15rem}.pairs{flex-wrap:wrap;gap:.35rem;display:flex}.pairs b{background:var(--panel);font-variant-numeric:tabular-nums;min-width:2.6rem;color:var(--ink);border-radius:.55rem;justify-content:center;align-items:center;padding:.22rem .4rem;font-size:.82rem;display:inline-flex}.site-footer{padding:1.6rem 1rem calc(1.2rem + var(--safe-bottom));margin-top:auto}.site-footer-inner{text-align:center;width:min(960px,100%);color:var(--label);margin:0 auto;font-size:.86rem}.site-footer-inner a{color:var(--ink);font-weight:700;text-decoration:none}.site-footer-inner a:hover{text-decoration:underline}@keyframes hint-pulse{50%{transform:scale(1.05)}}@keyframes match-out{to{opacity:0;transform:scale(.2)}}@keyframes score-pop{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-18px)}}@keyframes add-pulse{50%{transform:translateY(-2px);box-shadow:0 10px 22px #8f7a6647}}@media (width<=720px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.site-header-inner{flex-wrap:wrap}.header-right{margin-left:auto}.brand-link{font-size:1.05rem}.hud{gap:.35rem}.stat{padding:.48rem .55rem .52rem}.board{gap:.32rem}.cell{border-radius:.55rem}.dock{gap:.55rem;padding:.45rem .7rem .38rem}.records li{grid-template-rows:auto auto;grid-template-columns:1.2rem 1fr auto}.records li time{grid-column:2}}
