.glitch{color:#fff;font-size:clamp(2rem,10vw,8rem);white-space:nowrap;font-weight:900;position:relative;margin:0 auto;-webkit-user-select:none;user-select:none;cursor:pointer}.glitch:after,.glitch:before{content:attr(data-text);position:absolute;top:0;color:#fff;background-color:var(--glitch-bg, #120f17);overflow:hidden;clip-path:inset(0 0 0 0)}.glitch:not(.enable-on-hover):after{left:10px;text-shadow:var(--after-shadow, -10px 0 red);animation:animate-glitch var(--after-duration, 3s) infinite linear alternate-reverse}.glitch:not(.enable-on-hover):before{left:-10px;text-shadow:var(--before-shadow, 10px 0 cyan);animation:animate-glitch var(--before-duration, 2s) infinite linear alternate-reverse}.glitch.enable-on-hover:after,.glitch.enable-on-hover:before{content:"";opacity:0;animation:none}.glitch.enable-on-hover:hover:after{content:attr(data-text);opacity:1;left:10px;text-shadow:var(--after-shadow, -10px 0 red);animation:animate-glitch var(--after-duration, 3s) infinite linear alternate-reverse}.glitch.enable-on-hover:hover:before{content:attr(data-text);opacity:1;left:-10px;text-shadow:var(--before-shadow, 10px 0 cyan);animation:animate-glitch var(--before-duration, 2s) infinite linear alternate-reverse}@keyframes animate-glitch{0%{clip-path:inset(20% 0 50% 0)}5%{clip-path:inset(10% 0 60% 0)}10%{clip-path:inset(15% 0 55% 0)}15%{clip-path:inset(25% 0 35% 0)}20%{clip-path:inset(30% 0 40% 0)}25%{clip-path:inset(40% 0 20% 0)}30%{clip-path:inset(10% 0 60% 0)}35%{clip-path:inset(15% 0 55% 0)}40%{clip-path:inset(25% 0 35% 0)}45%{clip-path:inset(30% 0 40% 0)}50%{clip-path:inset(20% 0 50% 0)}55%{clip-path:inset(10% 0 60% 0)}60%{clip-path:inset(15% 0 55% 0)}65%{clip-path:inset(25% 0 35% 0)}70%{clip-path:inset(30% 0 40% 0)}75%{clip-path:inset(40% 0 20% 0)}80%{clip-path:inset(20% 0 50% 0)}85%{clip-path:inset(10% 0 60% 0)}90%{clip-path:inset(15% 0 55% 0)}95%{clip-path:inset(25% 0 35% 0)}to{clip-path:inset(30% 0 40% 0)}}#lights{width:100%;height:100%;overflow:hidden;position:absolute}canvas{width:100%;height:100%}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #07070f;--neon: #00ffaa;--neon2: #ff00aa;--text: #e8e8f0;--muted: #8888aa;--panel: #12121f;--border: rgba(0, 255, 170, .2)}html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:JetBrains Mono,monospace}.app-root,.screen-layer{width:100%;height:100%}.btn-primary{font-family:Syne,sans-serif;font-weight:700;background:var(--neon);color:#001a12;border:none;padding:.75rem 1.5rem;border-radius:6px;cursor:pointer;font-size:.85rem;letter-spacing:.04em}.btn-primary.btn-lg{padding:.9rem 2rem;font-size:.95rem}.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--muted);padding:.4rem .75rem;border-radius:4px;cursor:pointer;font-size:.7rem;font-family:inherit}.btn-ghost:hover{border-color:var(--neon);color:var(--neon)}.title-screen{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.title-bg{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.55;pointer-events:none}.title-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:1.5rem}.title-logo.glitch{font-family:Syne,sans-serif;font-size:clamp(2rem,7vw,3rem);color:var(--neon);--glitch-bg: var(--bg);cursor:default;white-space:nowrap}.title-logo.glitch:before,.title-logo.glitch:after{color:var(--neon)}.title-tagline{color:var(--muted);font-size:.85rem;max-width:320px;line-height:1.5}.title-hint{font-size:.65rem;color:var(--muted)}.hub-screen{width:100%;height:100%;position:relative}.hub-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(0,255,170,.14),transparent 55%),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(255,0,170,.06),transparent 50%),linear-gradient(180deg,#0c0c16 0%,var(--bg) 45%)}.hub-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.04;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,170,.5) 2px,rgba(0,255,170,.5) 3px);animation:hub-scan 8s linear infinite}@keyframes hub-scan{0%{transform:translateY(0)}to{transform:translateY(12px)}}.hub-inner{position:relative;z-index:2;height:100%;max-width:720px;margin:0 auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}.hub-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.hub-header h2{font-family:Syne,sans-serif;font-size:1.1rem;color:var(--neon)}.hub-progress{font-size:.65rem;color:var(--muted)}.game-list{display:flex;flex-direction:column;gap:.45rem;flex:1;overflow-y:auto;padding-right:.25rem}.game-card{display:grid;grid-template-columns:2.5rem 1fr auto;grid-template-rows:auto auto;gap:.15rem .75rem;align-items:center;text-align:left;padding:.75rem 1rem;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:8px;cursor:pointer;color:var(--text);font-family:inherit;transition:border-color .15s,background .15s}.game-card:hover{border-color:#00ffaa4d}.game-card.active{border-color:var(--neon);background:#00ffaa0f}.game-card.done{border-color:#00ffaa59}.game-card-num{grid-row:1 / 3;font-family:Syne,sans-serif;font-size:1.1rem;color:var(--neon)}.game-card-name{font-family:Syne,sans-serif;font-size:.85rem}.game-card-glitch{font-size:.62rem;color:var(--muted)}.game-card-check{grid-row:1 / 3;color:var(--neon);font-size:1.1rem}.hub-detail{border-top:1px solid rgba(255,255,255,.08);padding-top:1rem;display:flex;flex-direction:column;gap:.65rem}.hub-detail p{font-size:.75rem;color:var(--muted);line-height:1.45}.hub-hint{color:var(--text)!important}.hub-hint strong{color:var(--neon2)}.game-screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:.75rem;gap:.5rem}.game-bar{width:min(640px,100%);display:flex;align-items:center;justify-content:space-between;gap:.5rem}.game-bar-center{text-align:center}.game-bar-center h1{font-family:Syne,sans-serif;font-size:.95rem;color:var(--text)}.game-num{font-size:.6rem;color:var(--neon);display:block}.canvas-wrap{width:min(640px,100%);border:1px solid var(--border);border-radius:8px;overflow:hidden;outline:none}.canvas-wrap:focus-visible{box-shadow:0 0 0 2px #00ffaa59}.game-canvas{width:100%;height:auto;display:block;image-rendering:pixelated;background:var(--bg)}.game-tip{font-size:.65rem;color:var(--muted);text-align:center;max-width:640px;line-height:1.4;padding:0 .5rem}.touch-bar{width:min(640px,100%);display:flex;justify-content:space-between;gap:.5rem;margin-top:.25rem}.touch-left{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:.35rem;max-width:9rem}.touch-left #t-up{grid-column:2}.touch-left #t-left{grid-column:1;grid-row:2}.touch-left #t-right{grid-column:3;grid-row:2}.touch-left #t-down{grid-column:2;grid-row:2}.touch-right{display:flex;gap:.35rem;align-items:flex-end}.touch-bar button{background:var(--panel);border:1px solid var(--border);color:var(--neon);font-family:inherit;font-size:.75rem;padding:.55rem .85rem;border-radius:6px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.touch-bar button:active{background:#00ffaa26}.touch-bar{display:none}@media(hover:none)and (pointer:coarse){.touch-bar{display:flex}.touch-bar button{font-size:.95rem;padding:.85rem 1.1rem;min-width:3rem}.touch-left{max-width:11rem}}.win-screen{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.win-bg{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;pointer-events:none}.win-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;gap:1.25rem;align-items:center;padding:1.5rem}.win-logo.glitch{font-family:Syne,sans-serif;font-size:clamp(1.8rem,6vw,2.8rem);color:var(--neon);--glitch-bg: var(--bg)}.win-inner p{color:var(--muted);font-size:.85rem}