@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{--bg: #f4f7fb;--panel: #ffffff;--card: #ecf2fb;--border: rgba(15, 23, 42, .14);--accent: #ff6f2c;--text: #142033;--muted: #4f617e;--hover: rgba(20, 32, 51, .08);--charcoal: #9aabca;--on-accent: #0a0a0a;--panel-elevated: rgba(255, 255, 255, .92);--overlay-bg: rgba(244, 247, 251, .97);--surface-soft: rgba(255, 255, 255, .82);--shadow: 0 18px 42px rgba(15, 23, 42, .14);--blank: #c9d3e4;--tile-label-bg: rgba(255, 255, 255, .65);--tile-label-border: rgba(20, 32, 51, .35);--tile-label-text-shadow: none;--scrim: rgba(10, 16, 28, .5);--gallery-touch-target: 40px;--gallery-grid-gap: .35rem;--gallery-inner-padding: 1.5rem;--gallery-thumb-min: 37.33px;--gallery-fresh-accent: #ff6f2c;--gallery-fresh-bg: rgba(255, 111, 44, .14);--gallery-fresh-glow: rgba(255, 111, 44, .35);--gallery-solved-accent: #00b894;--gallery-solved-bg: rgba(0, 184, 148, .15);--gallery-solved-glow: rgba(0, 184, 148, .45);--board-max-size: min(92vw, 68vh)}[data-theme=dark]{--bg: #030511;--panel: #0c1224;--card: #111b36;--border: rgba(255, 255, 255, .08);--accent: #ff6f2c;--text: #f4f6ff;--muted: #8a94b2;--hover: rgba(255, 255, 255, .12);--charcoal: #1d1d28;--on-accent: #0a0a0a;--panel-elevated: rgba(11, 17, 36, .85);--overlay-bg: rgba(3, 5, 17, .98);--surface-soft: rgba(255, 255, 255, .03);--shadow: 0 30px 60px rgba(0, 0, 0, .35);--blank: #c9d3e4;--tile-label-bg: rgba(0, 0, 0, .35);--tile-label-border: rgba(20, 20, 20, .9);--tile-label-text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;--scrim: rgba(0, 0, 0, .7)}*{box-sizing:border-box}html,body{min-height:100%;overflow:auto}body{margin:0;background:var(--bg);font-family:Space Grotesk,Inter,system-ui,sans-serif;color:var(--text)}#app{min-height:100dvh}button{font-family:inherit;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.app-shell{background:radial-gradient(circle at top,rgba(255,111,44,.12),transparent 45%),var(--bg);min-height:100dvh;display:flex;flex-direction:column;overflow:clip;padding-bottom:0}.ad-slot{border:1px dashed var(--border);border-radius:1rem;margin:0 0 .7rem;padding:0;width:100%;height:63px;max-width:none;color:var(--muted);display:flex;align-items:center;justify-content:center;background:var(--surface-soft);font-size:.85rem;overflow:hidden}.ad-slot iframe{width:100%;height:63px}.top-controls{display:inline-flex;align-items:center;gap:.45rem}.theme-toggle{border-radius:999px;border:1px solid var(--border);padding:.2rem;background:var(--surface-soft);color:var(--text);line-height:0;transition:border-color .2s ease,background .2s ease,opacity .2s ease}[data-theme=dark] .theme-toggle{border-color:#dbe7ff57}.theme-toggle:hover,.theme-toggle:focus-visible{border-color:var(--accent);outline:none}.theme-switch{position:relative;width:58px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;padding:0 7px;background:linear-gradient(180deg,#fffc,#d6e1f0d9)}[data-theme=dark] .theme-switch{background:linear-gradient(180deg,#141e38f2,#090f21e6)}.theme-glyph{width:13px;height:13px;display:inline-flex;color:var(--muted)}.theme-glyph svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.theme-glyph.sun svg circle{fill:currentColor;stroke:none}.theme-glyph.moon svg{fill:currentColor;stroke:none}.theme-toggle.light .theme-glyph.sun{color:#f59e0b}.theme-toggle.dark .theme-glyph.moon{color:#dbe7ff}.theme-thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 3px 7px #0f172a38;transition:transform .24s ease}.theme-toggle.dark .theme-thumb{transform:translate(28px);background:#dbe7ff}.sound-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:999px;border:1px solid var(--border);padding:.35rem .75rem;min-width:132px;background:var(--surface-soft);color:var(--text);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s ease,background .2s ease,opacity .2s ease}.sound-toggle svg{width:18px;height:18px}.sound-toggle.off{opacity:.6}.sound-toggle.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}.sound-toggle:hover,.sound-toggle:focus-visible{border-color:var(--accent);outline:none}.content-area{width:100%;margin:0;padding:0 1.5rem 2rem;display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;gap:.5rem}.hero-panel{padding:.2rem 0}.hero-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.eyebrow{text-transform:uppercase;letter-spacing:.25em;font-size:.75rem;color:var(--muted)}.puzzle-title{font-weight:700}.playground{display:flex;flex:1;min-height:0;width:100%;justify-content:center}.board-panel{width:min(100%,860px);background:var(--panel-elevated);border:1px solid var(--border);border-radius:1.5rem;padding:1.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column;flex:1;min-height:0}.board-surface{position:relative;display:flex;flex-direction:column;gap:1rem;flex:1;min-height:0}.board-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.board-header .eyebrow{margin:0 0 .2rem}.board-status-label{margin:0;font-weight:700;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.2}.board-status-label.solved{color:var(--gallery-solved-accent)}.board-status-label.new{color:var(--gallery-fresh-accent)}.board-grid-area{position:relative;padding-top:.4rem;display:flex;flex-direction:column;flex:1;min-height:0;align-items:center}.gallery-toggle-wrapper{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.4rem;width:min(100%,var(--board-max-size))}.restart-toggle{border:none;border-radius:999px;padding:.45rem 1.1rem;background:var(--accent);color:#0a0a0a;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease}.restart-toggle:hover,.restart-toggle:focus-visible{transform:translateY(-1px);box-shadow:0 8px 18px #ff7f324d;outline:none}.gallery-toggle{display:inline-flex;border:none;border-radius:999px;padding:.35rem .9rem;background:transparent;color:var(--text);align-items:center;justify-content:center;gap:.5rem;margin-left:auto;transition:background .2s ease}.gallery-toggle:hover,.gallery-toggle:focus-visible{background:var(--hover);outline:none}.toggle-icon{display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem;width:18px}.toggle-icon span{display:block;width:100%;aspect-ratio:1 / 1;border-radius:3px;background:currentColor;transition:background .2s ease}.board-grid-wrapper{position:relative;display:grid;place-items:center;flex:1;min-height:0;width:100%}.board{position:relative;display:grid;gap:.35rem;background:var(--surface-soft);border-radius:1.25rem;padding:.35rem;overflow:hidden;width:min(100%,var(--board-max-size));max-width:var(--board-max-size);max-height:var(--board-max-size);aspect-ratio:1 / 1}.tile{border:none;border-radius:1rem;background:#ffffff73;color:var(--text);font-size:1.1rem;font-weight:600;aspect-ratio:1 / 1;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.tile span{position:relative;z-index:1}.tile:not(.blank):hover{transform:translateY(-2px);box-shadow:0 10px 20px #00000073}.tile.blank{background:var(--blank);cursor:default}.tile-value{font-size:1rem;font-weight:600;border-radius:.35rem;padding:.15rem .4rem;display:inline-flex;align-items:center;justify-content:center;background:var(--tile-label-bg);border:1px solid var(--tile-label-border);text-shadow:var(--tile-label-text-shadow)}.completion-preview{position:absolute;inset:0;border-radius:1.25rem;background-repeat:no-repeat;background-size:100% 100%;background-position:center;box-shadow:inset 0 0 0 1px #ffffff14,0 25px 45px #0009;animation:completionGlow 1.2s ease forwards;pointer-events:none}.tile-hint-toggle{background:var(--surface-soft);color:var(--text);border:1px solid var(--charcoal);border-radius:999px;padding:.4rem 1rem;min-width:156px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,border .2s ease,color .2s ease}.tile-hint-toggle.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.board-buttons{margin-top:1rem;display:flex;gap:.8rem}.primary,.completion-actions .primary{background:var(--accent);border:none;padding:.65rem 1.5rem;border-radius:999px;color:#fff;font-weight:600}.ghost,.board-buttons .ghost,.completion-actions .ghost{border:1px solid var(--border);background:transparent;color:inherit;padding:.65rem 1.25rem;border-radius:999px}.gallery-overlay{position:absolute;inset:0;width:100%;height:100%;border-radius:1.5rem;background:var(--overlay-bg);border:1px solid var(--border);box-shadow:var(--shadow);padding:var(--gallery-inner-padding);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:30;transform:scale(.98)}.gallery-overlay.open{opacity:1;pointer-events:auto;transform:scale(1)}.gallery-overlay-inner{height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative}.gallery-overlay-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,var(--gallery-thumb-min));grid-auto-rows:var(--gallery-thumb-min);gap:var(--gallery-grid-gap);padding:calc(var(--gallery-touch-target) + .5rem) .5rem .5rem .5rem;overflow-y:auto;overflow-x:hidden;align-content:start;justify-content:center}.gallery-list-item{width:var(--gallery-thumb-min);height:var(--gallery-thumb-min);display:block;background:transparent;border:none;padding:0;position:relative;overflow:hidden;transition:transform .2s ease;cursor:pointer;margin:0;border-radius:.75rem}.gallery-list-item:hover{transform:translateY(-2px)}.gallery-list-item.active .gallery-thumb{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}.gallery-thumb{position:absolute;inset:0;background-size:300% 300%!important;background-position:50% 0%;background-repeat:no-repeat;border:1.5px solid var(--border);border-radius:inherit;transition:border-color .2s ease,box-shadow .2s ease}.gallery-list-item.solved .gallery-thumb{border-color:var(--gallery-solved-accent)}.gallery-list-item.fresh .gallery-thumb{border-color:var(--gallery-fresh-accent)}.gallery-overlay-close{position:absolute;top:0;right:0;background:var(--surface-soft);border:1px solid var(--border);color:var(--text);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;z-index:10;transition:background .2s ease}.gallery-overlay-close:hover{background:var(--hover)}.hint{color:var(--muted);font-size:.85rem;margin:0}.modal-backdrop{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:20}.intro-modal{background:var(--panel);border-radius:1.5rem;padding:2rem;max-width:480px;border:1px solid var(--border);text-align:center}.intro-modal h2{margin:0;min-height:2.3rem}.intro-lang-row{display:flex;justify-content:center;margin-bottom:.75rem}.intro-lang-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:.4rem;min-width:132px;border-radius:999px;border:1px solid var(--border);padding:.28rem .58rem;background:var(--surface-soft);color:var(--text);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s ease,background .2s ease}.intro-lang-toggle:hover,.intro-lang-toggle:focus-visible{border-color:var(--accent);outline:none}.intro-lang-label{color:var(--muted);font-weight:500}.intro-lang-value{min-width:2rem;border-radius:999px;padding:.14rem .38rem;background:var(--accent);color:var(--on-accent);font-weight:700;text-align:center;letter-spacing:.1em}.intro-summary{margin:0 0 .75rem;color:var(--text)}.intro-warnings{margin:0;padding-left:1.1rem;text-align:left;color:var(--muted);font-size:.92rem;line-height:1.45}.intro-warnings li+li{margin-top:.4rem}.completion-actions{margin-top:1rem;display:flex;justify-content:center;gap:.7rem}@keyframes completionGlow{0%{transform:scale(.95);filter:blur(2px);opacity:.6}to{transform:scale(1);filter:blur(0);opacity:1}}@media(max-width:640px){html,body{height:100%;overflow:hidden}#app,.app-shell{height:100svh;min-height:100svh;overflow:hidden}:root{--board-max-size: min(94vw, 70svh);--gallery-thumb-min: 68px;--gallery-grid-gap: .45rem}.ad-slot{height:50px;padding:0;margin-bottom:.45rem}.ad-slot iframe{height:50px}.content-area{padding:0 .8rem 1rem;overflow:hidden}.hero-row{flex-wrap:wrap;row-gap:.45rem}.top-controls{margin-left:auto}.board-panel{padding:1rem;border-radius:1.1rem}.board-grid-area{padding-top:.1rem}.gallery-toggle-wrapper{width:100%}.gallery-overlay{border-radius:1.25rem}.gallery-overlay-grid{grid-template-columns:repeat(auto-fill,var(--gallery-thumb-min));grid-auto-rows:var(--gallery-thumb-min);gap:var(--gallery-grid-gap);padding:calc(var(--gallery-touch-target) + .35rem) .25rem .25rem .25rem;justify-content:center}}
