:root{--bg: #0d0722;--bg2: #1b0f3d;--panel: rgba(255, 255, 255, .07);--panel-line: rgba(255, 255, 255, .14);--text: #f5f3ff;--muted: #c4b5fd;--gold: #f5c451;--gold-dark: #b7791f;--danger: #f43f5e;--radius: 18px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:radial-gradient(120% 80% at 50% 0%,#2a1660 0%,var(--bg) 60%) fixed,var(--bg);color:var(--text);font-family:Cairo,system-ui,Segoe UI,Tahoma,sans-serif;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none}#app{position:relative;height:100vh;height:100dvh;width:100%;overflow:hidden}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));overflow-x:hidden;overflow-y:auto}.bar,.card,.tabs,.level-grid,.world-sub{max-width:560px}.screen.active{display:flex;animation:fade-in .25s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}#screen-menu{justify-content:center;text-align:center;gap:4px}.logo{position:relative;display:grid;grid-template-columns:repeat(3,34px);gap:5px;margin-bottom:18px;height:92px}.logo span{height:16px;border-radius:5px;background:linear-gradient(#fde68a,var(--gold));box-shadow:0 0 14px #f5c45173}.logo span:nth-child(2){background:linear-gradient(#5eead4,#14b8a6)}.logo span:nth-child(4){background:linear-gradient(#fda4af,#f43f5e)}.logo span:nth-child(6){background:linear-gradient(#c4b5fd,#8b5cf6)}.logo-ball{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 12px #7dd3fc;left:60%;top:52px;animation:bob 1.4s ease-in-out infinite alternate}.logo-paddle{position:absolute;left:20%;right:20%;bottom:0;height:9px;border-radius:9px;background:linear-gradient(#fde68a,#d97706)}@keyframes bob{0%{transform:translate(-22px,-6px)}to{transform:translate(6px,14px)}}h1{margin:0;font-size:clamp(2.4rem,11vw,3.4rem);font-weight:900;line-height:1.1;background:linear-gradient(180deg,#fff7d6,var(--gold) 60%,#d97706);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(245,196,81,.35))}.latin{margin:0 0 6px;letter-spacing:.45em;font-size:.8rem;color:var(--muted);direction:ltr}.greeting{margin:4px 0 0;color:#fde68a;font-weight:700}.net-status{margin:6px 0 0;font-size:.85rem;color:#fdba74}.signin{margin:14px 0 4px;width:min(320px,100%);padding:14px 16px;border-radius:var(--radius);background:#f5c4511f;border:1px solid rgba(245,196,81,.45)}.signin p{margin:0 0 10px;font-weight:700;color:#fde68a}.btn[hidden],.signin[hidden]{display:none}.lb-card{padding:10px 12px}.lb{list-style:none;margin:0;padding:0;display:grid;gap:6px}.lb li{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#ffffff0d}.lb li.mine{background:#f5c4512e;box-shadow:inset 0 0 0 1px #f5c45199}.lb b{text-align:center}.lb-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb small{color:var(--muted);font-size:.75rem}.lb strong{color:var(--gold);font-variant-numeric:tabular-nums}.lb-me{margin:0 0 10px;padding:8px 12px;border-radius:12px;background:#f5c4511f;font-weight:700}.lb-status{margin:10px 0;text-align:center;color:var(--muted)}.stats{display:flex;gap:10px;margin:18px 0 22px}.stats div{min-width:86px;padding:8px 10px;border-radius:14px;background:var(--panel);border:1px solid var(--panel-line);display:flex;flex-direction:column}.stats strong{font-size:1.25rem}.stats span{font-size:.75rem;color:var(--muted)}.menu{display:flex;flex-direction:column;gap:12px;width:min(300px,100%)}.btn{display:block;width:100%;padding:13px 18px;border:1px solid var(--panel-line);border-radius:16px;background:var(--panel);color:var(--text);font:700 1.05rem/1.2 inherit;font-family:inherit;text-align:center;text-decoration:none;cursor:pointer;transition:transform .12s,background .2s,box-shadow .2s}.btn:hover{background:#ffffff21}.btn:active{transform:scale(.97)}.btn:focus-visible,.icon-btn:focus-visible,.level:focus-visible,.tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.btn.primary{background:linear-gradient(180deg,#fcd34d,#f59e0b);color:#2a1606;border-color:transparent;box-shadow:0 8px 24px #f59e0b59}.btn.ghost{background:transparent}.btn.danger{margin-top:18px;color:#fecdd3;border-color:#f43f5e80}.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--panel-line);background:var(--panel);color:var(--text);font-size:1.05rem;font-family:inherit;cursor:pointer;flex:none}.bar{width:100%;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-bottom:12px}.bar h2{margin:0;text-align:center;font-size:1.35rem}.card{width:100%;padding:16px 18px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--panel-line)}.prose{line-height:1.75;font-size:.95rem}.prose h3{margin:16px 0 6px;color:var(--gold);font-size:1.05rem}.prose p{margin:0 0 6px}.prose ul{margin:0;padding:0 18px 0 0}.legend{list-style:none;padding:0!important;display:grid;gap:6px}.legend li{display:flex;align-items:center;gap:10px}.chip{flex:none;min-width:40px;padding:1px 8px;border-radius:10px;text-align:center;font-weight:800;color:#fff;border:1.5px solid rgba(255,255,255,.7)}.sw{flex:none;width:34px;height:16px;border-radius:4px;display:inline-block}.sw.strong{box-shadow:inset 0 0 0 2px #00000073}.sw.steel{background:linear-gradient(135deg,#e2e8f0,#64748b,#cbd5e1)}.sw.bomb{background:radial-gradient(circle,#fde047 18%,#1f0a0a 22% 40%,#ef4444 44%)}.toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--panel-line);font-weight:600;cursor:pointer}.toggle input{width:22px;height:22px;accent-color:var(--gold)}.tabs{display:flex;gap:8px;width:100%}.tab{flex:1;padding:10px 6px;border-radius:14px;border:1px solid var(--panel-line);background:var(--panel);color:var(--text);font:700 .95rem inherit;font-family:inherit;cursor:pointer}.tab[aria-selected=true]{background:linear-gradient(180deg,#fcd34d,#f59e0b);color:#2a1606}.tab .lock{font-size:.75rem;display:block;font-weight:600}.world-sub{color:var(--muted);margin:10px 0;font-size:.9rem}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%}.level{aspect-ratio:1;border-radius:14px;border:1px solid var(--panel-line);background:linear-gradient(180deg,#a78bfa38,#a78bfa0f);color:var(--text);font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0}.level strong{font-size:1.3rem;line-height:1}.level small{font-size:.62rem;color:#fde68a;letter-spacing:1px;margin-top:4px}.level.locked{opacity:.4;cursor:not-allowed}.level.current{box-shadow:0 0 0 2px var(--gold),0 0 18px #f5c45166}#screen-game{padding:calc(6px + var(--safe-top)) calc(8px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(8px + var(--safe-left));gap:6px;overflow:hidden}.hud{width:100%;max-width:max(var(--field-css-w, 100%),340px);flex:none;display:flex;align-items:center;gap:10px}.hud-level,.hud-score{display:flex;flex-direction:column;line-height:1.15}.hud-level{flex:1;min-width:0}.hud-level strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud small{color:var(--muted);font-size:.7rem}.hud-score strong{font-size:1.15rem;color:var(--gold);font-variant-numeric:tabular-nums}.hud-lives{display:flex;gap:2px;font-size:1.05rem;min-width:64px;justify-content:flex-end}.hud-lives .lost{filter:grayscale(1);opacity:.3}.powerbar{position:absolute;top:8px;left:0;right:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;pointer-events:none;z-index:1}.pw{position:relative;overflow:hidden;padding:1px 10px;border-radius:12px;font-size:.78rem;font-weight:700;background:#ffffff1a;border:1px solid var(--panel-line)}.pw i{position:absolute;inset:auto 0 0 auto;height:3px;background:currentColor}#stage{position:relative;flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:none}#canvas{display:block;border-radius:14px;box-shadow:0 0 0 1px #a78bfa40,0 20px 50px #00000080;cursor:none;touch-action:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#080414b3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:5;padding:16px}.overlay[hidden]{display:none}.dialog{width:min(320px,100%);display:flex;flex-direction:column;gap:10px;padding:22px 20px;border-radius:22px;text-align:center;background:linear-gradient(180deg,#2a1660,#170c38);border:1px solid rgba(245,196,81,.35);box-shadow:0 30px 80px #0009;animation:pop .3s cubic-bezier(.2,1.4,.4,1)}@keyframes pop{0%{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}.dialog h2{margin:0 0 4px;font-size:1.6rem}.result-stars{font-size:2.2rem;letter-spacing:6px}.result-stars .off{filter:grayscale(1);opacity:.25}.result-stars span{display:inline-block;animation:pop .4s both}.result-stars span:nth-child(2){animation-delay:.15s}.result-stars span:nth-child(3){animation-delay:.3s}.result-stats{display:flex;justify-content:space-around;margin:0 0 8px}.result-stats div{display:flex;flex-direction:column}.result-stats dt{font-size:.75rem;color:var(--muted)}.result-stats dd{margin:0;font-weight:800;font-size:1.1rem}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media (min-height: 760px){.menu{gap:14px}}@media (min-width: 1024px) and (min-height: 700px){.hud-score strong{font-size:1.4rem}.hud-level strong{font-size:1.15rem}.hud-lives{font-size:1.3rem}}@media (max-height: 500px){.screen{padding-top:calc(8px + var(--safe-top));padding-bottom:calc(8px + var(--safe-bottom))}#screen-menu{justify-content:flex-start}.logo{display:none}h1{font-size:2rem}.stats{margin:6px 0 10px}.stats div{padding:4px 10px}.menu{display:grid;grid-template-columns:1fr 1fr;width:min(560px,100%);gap:8px}.menu .btn{padding:10px 12px;font-size:.95rem}#btn-play{grid-column:1 / -1}#screen-game{padding-top:calc(4px + var(--safe-top));padding-bottom:calc(4px + var(--safe-bottom));gap:4px}.hud small{display:none}.hud-level strong,.hud-score strong{font-size:1rem}.level-grid{grid-template-columns:repeat(8,1fr);gap:8px}.dialog{padding:14px 16px;gap:8px;max-height:calc(100% - 8px);overflow-y:auto}.result-stars{font-size:1.6rem}}