:root{--bg: #0f1117;--panel: #181b25;--panel-2: #1f2230;--border: #2a2e3d;--text: #e7e9f0;--muted: #8b91a7;--accent: #ffd166;--accent-2: #5ec5ff;--good: #6bcf7f;--bad: #ff6b6b;--tile: #f1e9d2;--tile-text: #2b2517;--tile-pending: #ffd166;--tile-starting: #c2b8a0;--target: #2c3147;--cell-fill: #313a55;--cell-border: #454e6b;--cell-inset-shadow: none;--cell-legal-tint: #38436a;--cell-legal-outline: rgba(94, 197, 255, .32);--cell-legal-glyph: rgba(94, 197, 255, .5);--tile-border: #c7bf9f;--tile-pending-border: #b18d2a;--tile-shadow: none;--cell-value-ink: #6e6750;--key-bg: var(--tile);--key-ink: var(--tile-text);--key-border: #c7bf9f;--key-disabled-bg: #2b3042;--key-disabled-ink: #6a7188;--flash-good-bg: #1a2d22;--flash-good-border: #2c5a3a;--flash-bad-bg: #2a1d1f;--flash-bad-border: #5a2a2e;--share-card-bg: #0b0d14;--on-accent: #1a1a1a;--text-soft: #c4c9d8}:root[data-theme=light]{--bg: #f4f5f7;--panel: #eceef2;--panel-2: #e7eaf0;--border: #d9dce3;--text: #2b2b2b;--muted: #5b6170;--accent: #e0a92e;--accent-2: #2d7dd2;--good: #1b7a4b;--bad: #c0392b;--tile: #fbf7ec;--tile-text: #2b2b2b;--tile-pending: #ffd166;--tile-starting: #e2d8bf;--target: #dfe6f5;--cell-fill: #ffffff;--cell-border: #d9dce3;--cell-inset-shadow: inset 0 1px 2px rgba(20, 22, 40, .1);--cell-legal-tint: #eef4fc;--cell-legal-outline: rgba(45, 125, 210, .4);--cell-legal-glyph: rgba(45, 125, 210, .55);--tile-border: #e0d8c0;--tile-pending-border: #c79a26;--tile-shadow: 0 1px 2px rgba(20, 22, 40, .18);--cell-value-ink: #9a937c;--key-bg: #e8e9ed;--key-ink: #2b2b2b;--key-border: #cfd2da;--key-disabled-bg: #f0f1f4;--key-disabled-ink: #a6abb8;--flash-good-bg: #e3f3ea;--flash-good-border: #1b7a4b;--flash-bad-bg: #fbeae8;--flash-bad-border: #c0392b;--share-card-bg: #eceef2;--on-accent: #1a1a1a;--text-soft: #4a4f5c}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app{max-width:460px;margin:0 auto;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;height:100dvh}.app-ended{height:auto;min-height:100dvh}.app-ended .board-frame{flex:0 0 auto;container-type:normal;padding-top:4px}.app-ended .board{width:min(calc(100vw - 32px),428px)}.loading{display:grid;place-items:center;min-height:100vh;color:var(--muted);font-size:14px;padding:20px;text-align:center}@media (min-width: 700px){.app:not(.app-ended){justify-content:center}.app:not(.app-ended) .board-frame{flex:0 1 auto;container-type:normal}.app:not(.app-ended) .board{width:min(428px,calc((100dvh - 230px - var(--controls-h)) * var(--board-cols) / var(--board-rows)))}}.board-frame{--board-padding: 6px;--controls-h: 32px;flex:1 1 auto;min-height:0;display:grid;place-items:center;overflow:visible;padding:0 0 4px;container-type:size}.board-area{position:relative;min-height:0;max-height:100%;display:flex;flex-direction:column;align-items:center}.board-scroll{flex:0 1 auto;min-height:0;overflow:auto}.flash-overlay{position:absolute;bottom:12px;left:50%;transform:translate(-50%);padding:10px 18px;border-radius:10px;font-size:15px;font-weight:700;text-align:center;pointer-events:none;z-index:10;box-shadow:0 4px 14px #00000073;max-width:90%}.flash-overlay.flash-info{background:var(--flash-good-bg);color:var(--good);border:1px solid var(--flash-good-border)}.flash-overlay.flash-error{background:var(--flash-bad-bg);color:var(--bad);border:1px solid var(--flash-bad-border)}.board{position:relative;--cell-gap: 5px;--cell-min: 36px;padding:var(--board-padding);display:grid;grid-template-columns:repeat(var(--board-cols),1fr);grid-template-rows:repeat(var(--board-rows),1fr);gap:var(--cell-gap);width:min(100cqw,calc((100cqh - var(--controls-h)) * var(--board-cols) / var(--board-rows)));aspect-ratio:var(--board-cols) / var(--board-rows);min-width:calc(var(--cell-min) * var(--board-cols) + var(--cell-gap) * (var(--board-cols) - 1) + var(--board-padding) * 2);min-height:calc(var(--cell-min) * var(--board-rows) + var(--cell-gap) * (var(--board-rows) - 1) + var(--board-padding) * 2)}.board-controls{width:100%;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 var(--board-padding);margin-bottom:6px}.how-to-play-link{display:inline-flex;align-items:center;gap:5px;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.4;color:var(--text);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.how-to-play-link:before{content:"?";display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:800;line-height:1}.theme-toggle{margin-left:auto;display:inline-grid;place-items:center;width:28px;height:24px;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:0;color:var(--text);cursor:pointer;line-height:1;-webkit-tap-highlight-color:transparent}@media (hover: hover){.how-to-play-link:hover,.theme-toggle:hover{border-color:var(--muted)}}.theme-toggle svg{width:15px;height:15px;display:block}.cell-wrap{position:relative;min-width:0;min-height:0}.cell{width:100%;height:100%;border-radius:6px;border:1px solid var(--cell-border);background:var(--panel-2);color:var(--text);font-weight:700;font-size:clamp(14px,4.5vmin,22px);text-transform:uppercase;cursor:pointer;display:grid;place-items:center;transition:background 80ms ease,transform 80ms ease;padding:0;position:relative}.cell:disabled{cursor:default}.cell-empty{background:var(--cell-fill);box-shadow:var(--cell-inset-shadow)}.cell-target{background:var(--target);border-color:var(--cell-border)}.cell-filled{background:var(--tile);color:var(--tile-text);border-color:var(--tile-border);box-shadow:var(--tile-shadow)}.cell-starting{background:var(--tile-starting);color:var(--tile-text);border-color:var(--tile-border);box-shadow:var(--tile-shadow)}.cell-pending{background:var(--tile-pending);color:var(--tile-text);border-color:var(--tile-pending-border);box-shadow:var(--tile-shadow);transform:scale(.97)}.cell-legal{background:var(--cell-legal-tint);box-shadow:var(--cell-inset-shadow),inset 0 0 0 1px var(--cell-legal-outline)}.cell-legal:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);background:var(--cell-legal-glyph);pointer-events:none}.cell-anchor{outline:3px solid var(--accent-2);outline-offset:-3px}.cell-next{border-color:var(--accent-2);box-shadow:inset 0 0 0 2px #5ec5ff59}.cell-anchor-direction{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(22px,7vmin,32px);font-weight:700;color:var(--accent-2);pointer-events:none;line-height:1;opacity:.9}.cell-value{position:absolute;right:4px;bottom:3px;font-size:12px;font-weight:700;color:var(--cell-value-ink);pointer-events:none;line-height:1}.keyboard{display:flex;flex-direction:column;gap:6px;padding:0;flex:0 0 auto}.keyboard-row{display:flex;gap:4px;justify-content:center}.key{position:relative;flex:1 1 0;min-width:0;height:50px;border-radius:6px;border:1px solid var(--key-border);background:var(--key-bg);color:var(--key-ink);font-weight:800;cursor:pointer;display:grid;place-items:center;text-transform:uppercase;font-size:17px;-webkit-user-select:none;user-select:none;padding:0}.key:disabled{cursor:not-allowed;background:var(--key-disabled-bg);color:var(--key-disabled-ink);border-color:var(--key-disabled-bg)}.key:disabled .key-value{color:var(--key-disabled-ink)}.key-selected{outline:3px solid var(--accent-2);outline-offset:2px;transform:translateY(-2px)}.key-letter{line-height:1}.key-value{position:absolute;right:3px;bottom:2px;font-size:9px;font-weight:700;color:var(--cell-value-ink)}.key-action{flex:1.5 1 0;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.key-action-enter{background:var(--accent);color:var(--on-accent);border-color:var(--tile-pending-border)}.key-action-end{background:var(--flash-bad-bg);color:var(--bad);border-color:var(--flash-bad-border)}.key-action-back{background:var(--panel-2);color:var(--text);border-color:var(--border)}.btn{padding:10px 8px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-weight:600;font-size:14px;cursor:pointer}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--tile-pending-border)}.btn-danger{background:var(--flash-bad-bg);border-color:var(--flash-bad-border);color:var(--bad)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:50}.modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px;width:min(90vw,360px);display:flex;flex-direction:column;gap:12px}.modal h3{margin:0}.modal p{margin:0;color:var(--muted);font-size:14px}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.modal-howto{max-height:80vh;padding:0;gap:0;overflow:hidden}.how-to-play-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:18px}.modal-howto .modal-actions{flex:0 0 auto;padding:12px 18px;border-top:1px solid var(--border);background:var(--panel)}.how-to-play-title{margin:0;font-size:22px;color:var(--accent)}.how-to-play-subtitle{margin:0;font-size:16px;font-weight:500;color:var(--text-soft)}.how-to-play-concepts{display:flex;flex-direction:column;gap:16px}.htp-concept{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.htp-concept p{margin:0;color:var(--text-soft);font-size:15px;line-height:1.55}.htp-anim{display:grid;place-items:center;min-height:100px}.htp-row{display:flex;gap:4px}.htp-grid3{display:grid;grid-template-columns:repeat(3,28px);grid-auto-rows:28px;gap:4px}.htp-sq{position:relative;width:28px;height:28px;border-radius:5px;border:1px solid var(--border);display:grid;place-items:center;font-weight:700;font-size:13px;text-transform:uppercase}.htp-empty{background:var(--cell-fill);border-color:var(--cell-border)}.htp-tile{background:var(--tile);color:var(--tile-text);border-color:var(--tile-border);box-shadow:var(--tile-shadow)}.htp-existing{background:var(--tile-starting)}.htp-tile i{position:absolute;right:3px;bottom:1px;font-size:8px;font-style:normal;font-weight:700;line-height:1;color:var(--cell-value-ink)}.htp-build .htp-tile{animation:htp-pop 4s ease-out infinite}.htp-build .htp-tile:nth-child(1){animation-delay:0s}.htp-build .htp-tile:nth-child(2){animation-delay:.18s}.htp-build .htp-tile:nth-child(3){animation-delay:.36s}.htp-build .htp-tile:nth-child(4){animation-delay:.54s}.htp-cross-demo .htp-new{animation:htp-pop 3.6s ease-out infinite}.htp-cross-demo .htp-sq:nth-child(4){animation-delay:.15s}.htp-cross-demo .htp-sq:nth-child(6){animation-delay:.45s}.htp-cross-demo .htp-cross{animation:htp-connect 3.6s ease-in-out infinite}.htp-score-demo{position:relative;display:grid;place-items:center}.htp-score-demo .htp-tile{animation:htp-pop 3s ease-out infinite}.htp-score-demo .htp-tile:nth-child(2){animation-delay:.15s}.htp-score-demo .htp-tile:nth-child(3){animation-delay:.3s}.htp-score{position:absolute;bottom:100%;margin-bottom:2px;font-size:16px;font-weight:800;color:var(--good);opacity:0;animation:htp-score-float 3s ease-out infinite}@keyframes htp-pop{0%{opacity:0;transform:scale(.5) translateY(-4px)}10%{opacity:1;transform:scale(1) translateY(0)}82%{opacity:1;transform:scale(1) translateY(0)}92%,to{opacity:0;transform:scale(.9)}}@keyframes htp-connect{0%,20%{box-shadow:none}35%,80%{box-shadow:0 0 0 2px var(--good)}92%,to{box-shadow:none}}@keyframes htp-score-float{0%,25%{opacity:0;transform:translateY(4px)}40%{opacity:1;transform:translateY(-2px)}70%{opacity:1;transform:translateY(-10px)}82%,to{opacity:0;transform:translateY(-16px)}}.how-to-play-tips{display:flex;flex-direction:column;gap:14px;padding-top:12px;border-top:1px solid var(--border)}.how-to-play-tip{display:flex;align-items:center;gap:14px}.how-to-play-tip p{margin:0;color:var(--text-soft);font-size:15px;line-height:1.55}.htp-demo{flex:0 0 52px;display:grid;place-items:center}.htp-cell{position:relative;width:44px;height:44px;border-radius:6px;border:1px solid var(--cell-border);background:var(--cell-fill);overflow:hidden}.htp-cell-active{animation:htp-anchor 4s ease-in-out infinite}.htp-cell-active:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px;background:var(--accent-2);opacity:0;transform:scale(.4);animation:htp-tap 4s ease-out infinite}.htp-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;font-weight:700;line-height:1;color:var(--accent-2);opacity:0}.htp-arrow-right{animation:htp-arrow-right 4s ease-in-out infinite}.htp-arrow-down{animation:htp-arrow-down 4s ease-in-out infinite}.htp-end-key{display:inline-grid;place-items:center;padding:9px 16px;border-radius:6px;border:1px solid var(--flash-bad-border);background:var(--flash-bad-bg);color:var(--bad);font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;animation:htp-end-pulse 2.4s ease-in-out infinite}@keyframes htp-anchor{0%,8%{box-shadow:inset 0 0 0 0 transparent}12%,92%{box-shadow:inset 0 0 0 3px var(--accent-2)}to{box-shadow:inset 0 0 0 0 transparent}}@keyframes htp-tap{0%{opacity:0;transform:scale(.4)}6%{opacity:.35;transform:scale(.6)}16%{opacity:0;transform:scale(1.15)}46%{opacity:0;transform:scale(.4)}52%{opacity:.35;transform:scale(.6)}62%{opacity:0;transform:scale(1.15)}to{opacity:0;transform:scale(.4)}}@keyframes htp-arrow-right{0%,8%{opacity:0}14%,46%{opacity:.9}52%,to{opacity:0}}@keyframes htp-arrow-down{0%,54%{opacity:0}60%,92%{opacity:.9}96%,to{opacity:0}}@keyframes htp-end-pulse{0%,to{box-shadow:0 0 #ff6b6b00}50%{box-shadow:0 0 0 4px #ff6b6b2e}}@media (prefers-reduced-motion: reduce){.htp-cell-active,.htp-cell-active:after,.htp-arrow-right,.htp-arrow-down,.htp-end-key,.htp-build .htp-tile,.htp-cross-demo .htp-new,.htp-cross-demo .htp-cross,.htp-score-demo .htp-tile,.htp-score{animation:none}.htp-cell-active{box-shadow:inset 0 0 0 3px var(--accent-2)}.htp-arrow-right{opacity:.9}.htp-build .htp-tile,.htp-cross-demo .htp-new,.htp-score-demo .htp-tile,.htp-score{opacity:1}.htp-cross-demo .htp-cross{box-shadow:0 0 0 2px var(--good)}}.end-screen{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px}.end-screen h2{margin:0}.end-reason{color:var(--muted);font-size:13px;letter-spacing:1px;text-transform:uppercase}.end-final{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:94px;text-align:center;background:var(--panel-2);border-radius:10px;padding:14px}.end-final-label{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:1px}.end-final-value{font-size:42px;font-weight:800;color:var(--accent)}.end-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin:0}.end-stats>div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--border);padding:4px 0;font-size:14px}.end-stats dt{color:var(--muted)}.end-stats dd{margin:0;font-weight:600}.share-card-wrap{position:relative;cursor:pointer}.share-card-tip{position:absolute;top:6px;right:6px;z-index:1;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;pointer-events:none}.share-card{background:var(--share-card-bg);border:1px solid var(--border);border-radius:8px;padding:28px 12px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.4;white-space:pre-wrap;overflow-x:auto}.end-actions{display:flex;flex-wrap:wrap;gap:8px}.end-actions .btn{flex:1 1 120px;white-space:nowrap}.end-video-error{margin-top:8px;color:var(--bad);font-size:13px;text-align:center}.end-skip-btn{width:100%;padding:22px 8px;font-size:16px;font-weight:700}.end-ad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:260px;text-align:center;background:var(--panel-2);border:1px dashed var(--border);border-radius:10px;padding:14px}.end-ad-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}.end-ad-body{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.5px}.end-ad-sub{color:var(--muted);font-size:13px;opacity:.7}.end-ad-unit{width:100%;min-height:100px}.next-puzzle-note{margin:18px 0 0;text-align:center;color:var(--accent);font-size:18px;font-weight:700;letter-spacing:.2px}.site-footer{margin-top:auto;padding-top:10px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px}.site-footer a{color:var(--muted);text-decoration:none}.site-footer a:hover{color:var(--text);text-decoration:underline}