:root{--bg-home: #f8f6f2;--bg-infinite: #f9f3e4;--bg-daily: #f4f8f5;--panel: #ffffff;--card-bg: var(--panel);--cell-base: #f1ece4;--primary-accent: #e15a34;--cell-current: #d99a28;--cell-path: #e8c67d;--cell-highlight: #388f77;--start: #388f77;--infinite: #c2861a;--end-frozen: #8fabc9;--end-overheated: #e15a34;--end-matched: #388f77;--text: #211e1a;--ink: #211e1a;--on-accent: #fdf1ea;--radius: 12px;--shadow-color: var(--ink);--shadow-10: color-mix(in srgb, var(--shadow-color) 10%, transparent);--shadow-12: color-mix(in srgb, var(--shadow-color) 12%, transparent);--shadow-14: color-mix(in srgb, var(--shadow-color) 14%, transparent);--shadow-16: color-mix(in srgb, var(--shadow-color) 16%, transparent);--shadow-18: color-mix(in srgb, var(--shadow-color) 18%, transparent);--shadow-20: color-mix(in srgb, var(--shadow-color) 20%, transparent);--shadow-22: color-mix(in srgb, var(--shadow-color) 22%, transparent);--shadow-25: color-mix(in srgb, var(--shadow-color) 25%, transparent);--shadow-32: color-mix(in srgb, var(--shadow-color) 32%, transparent);--shadow: 0 4px 0 var(--shadow-16);--scrim: var(--shadow-32);--op-20: .2;--op-30: .3;--op-40: .4;--op-50: .5;--op-60: .6;--op-70: .7;--op-80: .8;--fw-regular: 400;--fw-medium: 600;--fw-bold: 700;--cell-max: 72px;--cell-gap: 12px;--grid-padding: 18px}:root[data-theme=dark]{--bg-home: #16130f;--bg-infinite: #1c160d;--bg-daily: #0f1613;--panel: #29241d;--card-bg: #3a332a;--cell-base: #332c23;--primary-accent: #e8623c;--cell-current: #dba32e;--cell-path: #a3884d;--cell-highlight: #3ea287;--start: #3ea287;--infinite: #d6941f;--end-frozen: #a3c2df;--end-overheated: #e8623c;--end-matched: #3ea287;--text: #f3ede2;--shadow-color: #0a0806}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;overflow-x:hidden;overscroll-behavior-y:none}html{background:var(--bg-home)}body{--bg-current: var(--bg-home);background:var(--bg-current);color:var(--text);font-family:Space Grotesk,sans-serif;transition:background-color .3s ease,color .3s ease}body:has(.infinite){--bg-current: var(--bg-infinite)}body:has(.daily){--bg-current: var(--bg-daily)}.game-wrapper{width:100%;max-width:480px;margin:0 auto;padding-top:16px;text-align:center;padding-bottom:16px;height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:space-between;transition:background .4s ease}.game-header{position:relative}.icon-button.home-button{position:absolute;top:4px;left:4px}.icon-button.theme-toggle{position:absolute;top:4px;right:4px}.total-display{font-size:64px;font-weight:var(--fw-bold);margin-top:8px;transition:transform .15s ease,color .2s ease}.total-display.bump{animation:totalBump .3s ease}@keyframes totalBump{0%{transform:scale(1)}40%{transform:scale(1.25)}to{transform:scale(1)}}.total-display.bust{color:var(--end-overheated);animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.grid{position:relative;display:grid;grid-template-columns:repeat(var(--cols, 3),minmax(0,var(--cell-max)));gap:var(--cell-gap);width:fit-content;max-width:92vw;margin:0 auto;background:var(--panel);padding:var(--grid-padding);border-radius:16px;box-shadow:var(--shadow)}.grid.celebrate{animation:gridPop .4s cubic-bezier(.34,1.15,.64,1)}@keyframes gridPop{0%{transform:scale(1)}10%{transform:scale(.98)}50%{transform:scale(1.11)}to{transform:scale(1)}}.grid.celebrate:after{animation-delay:.15s}.grid-row{display:contents}.path-trace{position:absolute;z-index:0;pointer-events:none;overflow:visible}.path-trace-segment{stroke:color-mix(in srgb,var(--cell-path) 60%,var(--text));stroke-width:3;stroke-linecap:round;animation:traceFadeIn .3s ease-in both}@keyframes traceFadeIn{0%{opacity:0}to{opacity:.3}}.cell{aspect-ratio:1;min-width:0;z-index:1;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:clamp(14px,5vw,20px);font-weight:var(--fw-bold);background:var(--cell-base);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;box-shadow:0 3px 0 var(--shadow-12),0 2px 6px var(--shadow-10);border:3px solid transparent;transition:background .25s ease,border-color .25s ease,transform .12s cubic-bezier(.34,1.15,.64,1),box-shadow .15s ease}.cell:active{transform:scale(.92);box-shadow:0 1px 0 var(--shadow-20)}.cell.in-path{background:var(--cell-path);transform:scale(1.03)}.cell.highlighted{border-color:var(--cell-highlight)}.cell.current:not(.start){background:var(--cell-current);color:var(--ink);animation:landHop .3s cubic-bezier(.34,1.15,.64,1)}@keyframes landHop{0%{transform:scale(.92)}55%{transform:scale(1.08)}to{transform:scale(1.05)}}.cell.start{font-size:24px;background:var(--start);color:var(--on-accent)}.cell.end{position:relative;font-size:24px;transition:background .4s ease,box-shadow .4s ease;cursor:default}.cell.end.frozen{background:var(--end-frozen);color:var(--ink)}.cell.end.overheated{background:var(--end-overheated);color:var(--ink)}.cell.end.matched{background:var(--end-matched);color:var(--on-accent);cursor:pointer}.cell.end.matched:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border:3px solid var(--end-matched);border-radius:inherit;pointer-events:none;animation:pulseRing 1.4s ease-out infinite}@keyframes pulseRing{0%{transform:scale(1);opacity:.7}to{transform:scale(1.35);opacity:0}}button{font-family:inherit;font-weight:var(--fw-bold);font-size:15px;padding:10px 18px;margin:4px;border:none;border-radius:10px;background:var(--primary-accent);color:var(--on-accent);box-shadow:0 4px 0 var(--shadow-25);cursor:pointer;touch-action:manipulation;transition:transform .1s ease}button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow-25)}button:disabled{opacity:var(--op-40);cursor:not-allowed}.controls{margin-top:16px;display:flex;justify-content:center;gap:18px}.icon-button{background:none;box-shadow:none;color:var(--text);opacity:var(--op-50);z-index:3;width:fit-content;padding:8px;display:flex;align-items:center;justify-content:center}.icon-button svg{width:28px;height:28px;flex-shrink:0}.icon-button:hover{opacity:var(--op-60)}.icon-button:active{transform:scale(.9);opacity:var(--op-80);box-shadow:none}.hint-container{position:relative}.hint-cooldown{height:28px;width:28px;background-color:var(--bg-current);position:absolute;border:2px;top:12px;left:12px;z-index:5;opacity:.8;animation-name:cooldownDrain;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes cooldownDrain{0%{clip-path:inset(0 0 0% 0)}to{clip-path:inset(0 0 100% 0)}}.icon-stat-row{display:flex;gap:12px}.icon-stat{font-size:18px;color:var(--text);display:flex;gap:4px;align-items:center;flex:1;font-weight:var(--fw-bold);opacity:var(--op-50);font-variant-numeric:tabular-nums}.icon-stat.mini{font-weight:var(--fw-regular)!important;font-size:14px!important}.icon-stat.left{justify-content:flex-start}.icon-stat.right{justify-content:flex-end}.overlay-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:10;animation:fadeIn .3s ease}.top-margin-bump{margin-top:10vh}.no-anim{animation:none!important}.backdrop{display:flex;justify-content:center;position:relative;margin:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.card{position:relative;z-index:1;background:var(--card-bg);border-radius:16px;padding:20px;width:min(90vw,360px);max-height:90dvh;overflow-y:auto;text-align:center;box-shadow:0 12px 0 var(--shadow-12),0 20px 40px var(--shadow-18);animation:cardPop .4s cubic-bezier(.34,1.15,.64,1)}@keyframes cardPop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.card-title{font-size:24px;font-weight:var(--fw-bold);color:var(--start)}.card-tag{font-size:14px;opacity:var(--op-40);margin:0 0 4px}.card-epithet{font-size:15px;opacity:var(--op-50);margin:0}.card-subtitle{font-size:24px;font-weight:var(--fw-bold)}.stat-row{display:flex;justify-content:center;gap:36px}.stat{margin-top:12px;display:flex;flex-direction:column}.stat-value{font-size:24px;font-weight:var(--fw-bold)}.stat-label{font-size:16px;text-transform:uppercase;letter-spacing:.06em;font-weight:var(--fw-medium);opacity:var(--op-60);margin-top:2px}.cta-button{width:100%;padding:14px;border-radius:12px;background:var(--primary-accent);color:var(--on-accent);font-size:20px;font-weight:var(--fw-bold);box-shadow:0 4px 0 var(--shadow-22);margin-top:16px}.cta-button.fit-width{width:fit-content;padding:16px 32px;margin-top:0}.cta-button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow-22)}.cta-button:disabled{background:var(--cell-base);color:var(--text);opacity:var(--op-50)}.puzzle-title{font-size:14px;font-weight:var(--fw-medium);margin-bottom:8px;opacity:var(--op-50);letter-spacing:.04em}.feedback-footer{margin-top:32px;text-align:center;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center}.feedback-footer .copyright{width:100%;font-size:12px;color:var(--text);opacity:var(--op-30);display:flex;gap:8px;justify-content:center}.feedback-footer .copyright{width:100%;font-size:12px;color:var(--text);opacity:var(--op-30)}.feedback-footer a{font-size:13px;color:var(--text);opacity:var(--op-40);text-decoration:underline;text-underline-offset:3px}.feedback-footer a:hover{opacity:var(--op-70)}.list-steps{text-align:left;margin-bottom:12px}.list-steps p{font-size:16px;line-height:1.5;margin-bottom:12px;opacity:var(--op-80);text-align:left}.secondary-button{width:100%;padding:12px;border-radius:10px;background:var(--cell-base);color:var(--text);font-size:16px;font-weight:var(--fw-medium);margin-bottom:0;box-shadow:none}.secondary-button:active{transform:scale(.97)}.tip-nudge{background:none;color:var(--text);box-shadow:none;padding:0;font-size:12px;font-weight:var(--fw-regular);opacity:var(--op-40);text-decoration:underline}.tip-nudge:active{transform:none}.solved-ctas{margin-bottom:10px}.home-title{font-size:42px;font-weight:var(--fw-bold);line-height:42px;margin:0;color:var(--primary-accent)}.landing-title{font-size:30px;font-weight:var(--fw-medium);line-height:36px;margin:0;color:var(--primary-accent)}.landing-title.daily{color:var(--start)}.landing-title.infinite{color:var(--infinite)}.tagline{font-size:18px;font-weight:var(--fw-medium);opacity:var(--op-50);margin:0 0 40px;padding:0 24px}.mode-menu{display:flex;flex-direction:column;gap:16px;padding:0 20px;align-items:center}.mode-card{display:flex;align-items:center;gap:16px;width:100%;padding:18px;border-radius:16px;text-align:left;background:var(--panel);box-shadow:var(--shadow);margin:0}.mode-card:active{transform:scale(.97) translateY(2px);box-shadow:0 1px 0 var(--shadow-14)}.mode-icon-wrap{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:64px;height:64px;border-radius:10px;color:var(--on-accent)}.mode-icon-wrap svg{width:36px;height:36px}.size-glyph{display:grid;grid-template-columns:repeat(var(--glyph-size),1fr);gap:3px;width:36px;height:36px}.size-glyph-dot{background:currentColor;border-radius:2px}.mode-card--infinite .mode-icon-wrap{background:var(--infinite)}.mode-card--daily .mode-icon-wrap{background:var(--start)}.mode-text{display:flex;flex-direction:column;gap:2px}.mode-label{font-size:24px;font-weight:var(--fw-bold);color:var(--text)}.mode-subtitle{font-size:15px;font-weight:var(--fw-regular);opacity:var(--op-50);color:var(--text)}.loading-spinner{width:42px;height:42px;margin:96px auto;border-radius:50%;border:4px solid var(--cell-base);border-top-color:var(--primary-accent);opacity:var(--op-70);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
