:root{--bg-1: #f8fbff;--bg-2: #dff2ff;--panel: #ffffff;--ink: #0f2237;--muted: #51657a;--line: #d4deea;--accent: #0e7490;--accent-2: #0284c7;--ok: #16a34a;--warn: #ca8a04;--bad: #dc2626;--shadow: 0 16px 42px rgba(3, 27, 63, .12)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:Avenir Next,Manrope,Segoe UI,sans-serif;color:var(--ink);background:radial-gradient(circle at 15% 0%,#ffffff 0%,var(--bg-1) 40%,var(--bg-2) 100%)}.app-shell{min-height:100vh;width:100%;padding:18px 12px 24px;max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;position:relative}.topbar{width:min(95vw,560px);display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.brand{display:flex;align-items:center;gap:12px}.brand h1{margin:0;font-size:clamp(1.18rem,3.6vw,1.7rem);line-height:1.1;font-weight:900;letter-spacing:.01em}.brand p{margin:2px 0 0;font-size:.81rem;color:var(--muted);font-weight:600}.brand-logo{width:56px;height:56px;border-radius:14px;padding:7px;background:linear-gradient(150deg,#083b4c,#0ea5e9);box-shadow:0 10px 24px #0e749059;display:grid;place-items:center}.brand-logo svg{width:100%;height:100%}.brand-logo rect,.brand-logo path,.brand-logo circle{fill:none;stroke:#eef9ff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.help-trigger,.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:1.3rem;font-weight:900;cursor:pointer;color:var(--ink);transition:transform .12s ease,border-color .12s ease,background .12s ease}.help-trigger:hover,.icon-btn:hover{transform:translateY(-1px);border-color:#9fbbd6;background:#f4faff}.theme-pill{background:#fff;border:2px solid #ccdfed;border-radius:999px;padding:8px 14px;font-size:.92rem;font-weight:600;margin-bottom:10px;box-shadow:0 3px 10px #04143514;text-align:center;display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:center}.theme-pill-label{color:#486176;font-weight:700}.theme-pill-value{color:#0f2237;font-weight:600}.banner{width:min(92vw,480px);border-radius:12px;padding:9px 12px;color:#fff;font-weight:800;font-size:.9rem;text-align:center;margin-bottom:10px}.banner.success{background:linear-gradient(135deg,#0f766e,#0284c7)}.banner.danger{background:var(--bad)}.banner.warn{background:var(--warn)}.board{width:min(92vw,420px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}.board-win-focus{overflow:visible}.square{border:2px solid #d7e0ec;border-radius:14px;background:#fff;aspect-ratio:1 / 1;padding:0;display:flex;align-items:center;justify-content:center;opacity:1;filter:none;transition:border-color .14s ease,box-shadow .14s ease,transform .36s cubic-bezier(.22,1,.36,1),background .14s ease,opacity .72s cubic-bezier(.22,1,.36,1),filter .72s cubic-bezier(.22,1,.36,1)}.square:disabled{cursor:default}.square:not(:disabled){cursor:pointer}.square:not(:disabled):hover{transform:translateY(-1px);border-color:#95c7eb}.square-active{border-color:#0284c7;box-shadow:0 8px 22px #0e749033}.square-claimed{background:linear-gradient(180deg,#fdfefe,#f3f8fc);border-color:#d7e4ef}.square-failed{background:#fff0f0;border-color:#f2bbbb}.square-line{box-shadow:0 0 0 2px #0ea5e938 inset}.square-win-keep{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 2px #0ea5e947 inset,0 14px 24px #0a25401f}.square-win-fade{opacity:.18;filter:saturate(.65) blur(.2px);transform:scale(.965);transition-delay:var(--fade-delay, 0ms)}.unknown{font-size:2rem;color:#b6c2d0;font-weight:700}.mini-board{width:100%;height:100%;padding:6px;display:flex;flex-direction:column;justify-content:center;gap:2px}.mini-row{display:flex;justify-content:center;gap:2px}.mini-tile{width:clamp(14px,3.8vw,22px);height:clamp(14px,3.8vw,22px);border-radius:4px;border:1px solid #d9e2ec;display:flex;align-items:center;justify-content:center;font-size:clamp(8px,2vw,12px);line-height:1;font-family:inherit;font-weight:700}.tile-green{background:#16a34a;border-color:#16a34a;color:#fff}.tile-yellow{background:#eab308;border-color:#eab308;color:#fff}.tile-gray{background:#7b8795;border-color:#7b8795;color:#fff}.tile-current{background:#fff;border-color:#c8d3df;color:transparent}.tile-current-filled{background:#fff;border-color:#94a9bf;color:#0f2237}.tile-empty{background:#f4f7fa;border-color:#e5ecf2;color:transparent}.status-row{height:20px;margin-bottom:8px;color:var(--muted);font-size:.82rem;font-weight:700;transition:color .18s ease,transform .18s ease}.status-row-alert{color:#b91c1c;transform:translateY(-1px)}.controls-shell{width:min(92vw,480px);display:flex;flex-direction:column;align-items:center;overflow:hidden;max-height:360px;opacity:1;transform:translateY(0);transition:max-height .7s cubic-bezier(.22,1,.36,1),opacity .42s ease,transform .7s cubic-bezier(.22,1,.36,1),margin .7s cubic-bezier(.22,1,.36,1)}.controls-shell-hide{max-height:0;opacity:0;transform:translateY(16px);margin:0;pointer-events:none}.controls-shell .status-row,.controls-shell .current-input,.controls-shell .keyboard{transition:opacity .42s ease,transform .52s cubic-bezier(.22,1,.36,1)}.controls-shell-hide .status-row{opacity:0;transform:translateY(8px)}.controls-shell-hide .current-input{opacity:0;transform:translateY(12px);transition-delay:70ms}.controls-shell-hide .keyboard{opacity:0;transform:translateY(18px);transition-delay:.15s}.current-input{display:flex;gap:7px;margin-bottom:14px}.current-tile{width:40px;height:40px;border-radius:10px;border:2px solid #d1dae4;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.08rem;font-family:inherit;font-weight:700;color:transparent}.current-tile-filled{color:#1a2d43;border-color:#8ca3bc}.shake{animation:pop .22s ease}.keyboard{display:flex;flex-direction:column;gap:6px;align-items:center}.next-puzzle-card{width:min(92vw,440px);margin-top:10px;padding:16px 18px;border-radius:18px;background:radial-gradient(circle at top left,rgba(125,211,252,.42),transparent 34%),linear-gradient(145deg,#082f49,#0f172a);color:#eff8ff;box-shadow:0 18px 34px #0819323d;text-align:center;animation:riseIn .52s cubic-bezier(.22,1,.36,1)}.next-puzzle-label{margin:0 0 8px;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9ddcf6}.share-preview{width:84px;margin:0 auto 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.share-preview-cell{width:100%;aspect-ratio:1 / 1;border-radius:5px;box-shadow:inset 0 0 0 1px #ffffff14}.share-preview-win{background:#22c55e}.share-preview-loss{background:#ef4444}.share-preview-neutral{background:#f0f9ff2e}.next-puzzle-time{display:flex;justify-content:center;gap:14px;font-size:clamp(1.8rem,7vw,2.5rem);font-weight:900;line-height:1;letter-spacing:-.04em}.share-button{margin-top:14px;border:none;border-radius:999px;padding:10px 16px;background:linear-gradient(135deg,#e0f2fe,#7dd3fc);color:#082f49;font-size:.92rem;font-weight:900;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease;box-shadow:0 8px 18px #0ea5e938}.share-button:hover{transform:translateY(-1px);box-shadow:0 10px 22px #0ea5e947}.share-feedback{margin:10px 0 0;font-size:.84rem;font-weight:700;color:#bae6fd}.next-puzzle-note{margin:10px 0 0;font-size:.88rem;color:#c7ddf0}.kb-row{display:flex;gap:4px;justify-content:center}.kb-key{width:clamp(24px,8vw,36px);height:40px;border-radius:9px;border:none;background:#dbe4ec;color:#1c334c;font-size:.86rem;font-weight:800;cursor:pointer;padding:0}.kb-action{width:auto;min-width:40px;padding:0 9px;background:#4b6179;color:#fff}.kb-green{background:#15803d;color:#fff}.kb-yellow{background:#dcae00;color:#fff}.kb-gray{background:#6f7a87;color:#fff}.foot{margin-top:12px;color:#6f8294;font-size:.75rem;font-weight:700}.mark-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}.mark-icon{width:44px;height:44px}.mark-word{font-size:.68rem;font-weight:900;letter-spacing:.09em}.mark-word-ok{color:#0d63ac}.mark-word-bad{color:#dc2626}.circ{fill:none;stroke:#0284c7;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170;animation:drawCircle .55s cubic-bezier(.4,0,.2,1) .05s forwards}.chk{fill:none;stroke:#0284c7;stroke-width:3.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;opacity:0;animation:drawCheck .35s cubic-bezier(.4,0,.2,1) .6s forwards}.xl1,.xl2{fill:none;stroke:#ef4444;stroke-width:3.8;stroke-linecap:round;stroke-dasharray:40;stroke-dashoffset:40;opacity:0}.xl1{animation:drawX1 .3s cubic-bezier(.4,0,.2,1) .05s forwards}.xl2{animation:drawX2 .3s cubic-bezier(.4,0,.2,1) .35s forwards}.confetti-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:30}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0310218c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:200;padding:12px}.modal{width:min(95vw,560px);max-height:min(86vh,700px);overflow:auto;background:linear-gradient(180deg,#fff,#f9fcff);border-radius:16px;border:1px solid #d8e1ea;box-shadow:var(--shadow);padding:18px 16px 16px}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.modal h2{margin:0;font-size:1.25rem;font-weight:900}.modal p{margin:8px 0 0;line-height:1.45;font-size:.94rem;color:#19324a}.help-intro{border:1px solid #c8dff3;background:linear-gradient(145deg,#e9f7ff,#f4fbff);border-radius:12px;padding:10px 11px}.help-section{margin-top:12px}.help-grid{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.help-card{border:1px solid #d9e5f0;background:#fff;border-radius:12px;padding:9px 10px}.help-tip{margin-top:12px;border-radius:12px;padding:10px 11px;background:#0f172a;color:#e6f1ff;font-size:.9rem;line-height:1.45}.help-tip strong{color:#a5f3fc}.modal h3{margin:0;font-size:.82rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#0c5f87}.legend{margin-top:10px;border:1px solid #d8e4ee;border-radius:12px;background:#fff;overflow:hidden}.legend-row{display:flex;align-items:center;gap:9px;padding:8px 10px;color:#19324a;font-size:.89rem;font-weight:600}.legend-row+.legend-row{border-top:1px solid #edf2f7}.legend-tile{width:22px;height:22px;border-radius:6px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:900;flex:0 0 auto}.legend-green{background:#16a34a}.legend-yellow{background:#dcae00}.legend-gray{background:#7b8795}@keyframes drawCircle{0%{stroke-dashoffset:170}to{stroke-dashoffset:0}}@keyframes drawCheck{0%{stroke-dashoffset:50;opacity:0}to{stroke-dashoffset:0;opacity:1}}@keyframes drawX1{0%{stroke-dashoffset:40;opacity:0}to{stroke-dashoffset:0;opacity:1}}@keyframes drawX2{0%{stroke-dashoffset:40;opacity:0}to{stroke-dashoffset:0;opacity:1}}@keyframes pop{0%,to{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-3px)}}@keyframes riseIn{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 460px){.brand p{display:none}.brand-logo{width:48px;height:48px}.modal{padding:16px 12px 12px}.help-grid{grid-template-columns:1fr}}