:root{
  --bg:#0b0611;--bg2:#180927;--panel:#1a1025;--panel2:#241331;--text:#fff8ef;--muted:#bfaecb;
  --orange:#ff7a18;--orange2:#ffb32d;--purple:#7e39c5;--green:#65d64c;--danger:#ff4d63;
  --tile-size:clamp(34px,10.6vw,68px);--gap:clamp(3px,1vw,7px);--radius:20px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,#2b1040 0,#100719 40%,#08050d 100%);color:var(--text);font-family:Inter,ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;overscroll-behavior:none}body{min-height:100dvh;background-attachment:fixed}button,select{font:inherit}.app-shell{width:min(100%,980px);margin:0 auto;min-height:100dvh;padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px,env(safe-area-inset-left))}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;text-align:left}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,var(--orange2),var(--orange));color:#28110a;box-shadow:0 8px 24px #ff7a1840;font-size:23px}.brand strong{display:block;letter-spacing:.2px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:1px}.icon-btn,.back-btn{border:0;color:var(--text);background:#ffffff0d;border:1px solid #ffffff18;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;cursor:pointer;transition:.2s transform,.2s background}.icon-btn:hover,.back-btn:hover{background:#ffffff18}.icon-btn:active,.back-btn:active{transform:scale(.94)}.icon-btn.mini{width:40px;height:40px}.screen{display:none;padding:18px 0 36px}.screen.active{display:block;animation:screenIn .25s ease}@keyframes screenIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.hero-card{position:relative;overflow:hidden;border:1px solid #ffffff16;background:linear-gradient(145deg,#28143b,#160c22 62%);border-radius:30px;padding:clamp(28px,6vw,58px);box-shadow:0 30px 80px #0008}.hero-card:after{content:"";position:absolute;inset:auto -10% -40% 22%;height:70%;background:radial-gradient(circle,#ff7a1830,transparent 65%);pointer-events:none}.moon-glow{position:absolute;right:5%;top:8%;width:150px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6bd 0,#f9b23d 48%,#ce5c19 100%);box-shadow:0 0 60px #ff9a3d50;opacity:.9}.moon-glow:after{content:"";position:absolute;width:120%;height:120%;left:-58%;top:-22%;border-radius:50%;background:#211130}.hero-ghost{position:absolute;right:9%;bottom:5%;font-size:clamp(74px,18vw,145px);filter:drop-shadow(0 20px 25px #0006);transform:rotate(5deg);opacity:.92}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:var(--orange2);margin:0 0 10px;text-transform:uppercase}.hero-card h1{position:relative;z-index:1;margin:0;max-width:650px;font-size:clamp(32px,7vw,64px);line-height:.98;letter-spacing:-.04em}.hero-card p:not(.eyebrow){position:relative;z-index:1;color:#dccde7;max-width:560px;font-size:clamp(15px,2vw,18px);line-height:1.6;margin:18px 0 26px}.primary-btn,.secondary-btn,.text-btn{position:relative;z-index:2;width:100%;min-height:52px;border-radius:16px;border:0;cursor:pointer;font-weight:800;transition:.18s transform,.18s filter}.primary-btn{display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,var(--orange2),var(--orange));color:#281107;box-shadow:0 10px 28px #ff7a1838}.secondary-btn{margin-top:10px;background:#ffffff10;color:var(--text);border:1px solid #ffffff1a}.text-btn{background:transparent;color:var(--muted);min-height:44px}.primary-btn:hover,.secondary-btn:hover{filter:brightness(1.07)}.primary-btn:active,.secondary-btn:active,.text-btn:active{transform:scale(.985)}.hero-card .primary-btn,.hero-card .secondary-btn{max-width:260px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.feature-grid article{padding:18px;border-radius:20px;background:#ffffff08;border:1px solid #ffffff10}.feature-grid article>span{font-size:25px;display:block;margin-bottom:8px}.feature-grid strong,.feature-grid small{display:block}.feature-grid small{color:var(--muted);font-size:12px;margin-top:4px}.section-head,.game-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}.section-head h2{margin:1px 0 0;font-size:clamp(25px,5vw,36px)}.section-head .eyebrow{margin:0}.level-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#ffffff08;border:1px solid #ffffff10;border-radius:16px;margin-bottom:14px;color:var(--muted);font-size:13px}.level-filter select{appearance:none;background:#21122d;color:var(--text);border:1px solid #ffffff16;padding:9px 34px 9px 12px;border-radius:11px;outline:none}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:10px}.level-btn{min-height:88px;border:1px solid #ffffff12;border-radius:18px;background:linear-gradient(150deg,#241330,#180d22);color:var(--text);cursor:pointer;padding:12px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;position:relative;overflow:hidden}.level-btn.unlocked:hover{border-color:#ff8b3555;transform:translateY(-1px)}.level-btn.current{box-shadow:inset 0 0 0 2px var(--orange)}.level-btn.locked{opacity:.42;cursor:not-allowed}.level-number{font-weight:900;font-size:18px}.level-stars{font-size:11px;letter-spacing:1px;color:var(--orange2);min-height:14px}.lock{font-size:14px}.game-screen{max-width:780px;margin:0 auto}.game-head{justify-content:space-between}.level-title-wrap{display:flex;gap:6px;align-items:baseline;color:var(--muted)}.level-title-wrap strong{font-size:24px;color:var(--text)}.hud{display:grid;grid-template-columns:1fr 1fr 1.65fr;gap:8px}.hud-card{padding:11px 12px;background:#ffffff08;border:1px solid #ffffff11;border-radius:16px;min-width:0}.hud-card span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.hud-card strong{display:block;margin-top:3px;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-card.objective strong{font-size:13px}.progress-track{height:7px;background:#ffffff0b;border-radius:50px;overflow:hidden;margin:10px 2px 14px}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--orange),var(--orange2));border-radius:inherit;transition:width .35s ease}.board-frame{position:relative;display:grid;place-items:center}.board{--cols:8;display:grid;grid-template-columns:repeat(var(--cols),var(--tile-size));grid-auto-rows:var(--tile-size);gap:var(--gap);padding:clamp(6px,1.6vw,12px);background:linear-gradient(145deg,#1b0e27,#110918);border:1px solid #ffffff13;border-radius:22px;box-shadow:inset 0 0 40px #0008,0 25px 50px #0006;touch-action:none;user-select:none}.cell{position:relative;border-radius:clamp(8px,2vw,13px);background:#ffffff05;overflow:visible}.cell.web:before{content:"";position:absolute;inset:2px;border-radius:inherit;z-index:2;pointer-events:none;background:repeating-conic-gradient(from 0deg,#d9d9e000 0 7deg,#d9d9e055 8deg 9deg,#d9d9e000 10deg 22deg);box-shadow:inset 0 0 0 1px #ffffff35}.piece{position:absolute;inset:4%;display:grid;place-items:center;border:0;padding:0;border-radius:27%;cursor:pointer;transform:scale(1);transition:transform .12s ease,filter .15s ease,opacity .15s ease;box-shadow:inset 0 -5px 6px #0003,inset 0 4px 5px #fff4,0 5px 9px #0005}.piece:after{content:"";position:absolute;left:17%;top:10%;width:32%;height:14%;border-radius:50%;background:#fff5;transform:rotate(-22deg)}.piece.selected{outline:3px solid #fff;outline-offset:-1px;transform:scale(.9);filter:brightness(1.15)}.piece.matched{animation:pop .22s ease forwards}@keyframes pop{50%{transform:scale(1.2)}to{transform:scale(.1);opacity:0}}.piece.hint{animation:hint 1s ease 2}@keyframes hint{0%,100%{transform:scale(1)}50%{transform:scale(.84);filter:brightness(1.3)}}.piece.type-0{background:linear-gradient(145deg,#ff9c28,#d94c0a)}.piece.type-1{background:linear-gradient(145deg,#a65cf4,#5d1a95)}.piece.type-2{background:linear-gradient(145deg,#76e267,#278e38)}.piece.type-3{background:linear-gradient(145deg,#f5f5f8,#8ea0b0)}.piece.type-4{background:linear-gradient(145deg,#ff5e7c,#a50e3a)}.piece.type-5{background:linear-gradient(145deg,#4ccfff,#1667be)}.glyph{font-size:calc(var(--tile-size)*.52);line-height:1;filter:drop-shadow(0 2px 1px #0006);position:relative;z-index:1}.special-row:before,.special-col:before{content:"";position:absolute;z-index:3;inset:9%;border-radius:20%;border:4px solid #fff9;pointer-events:none}.special-row:before{border-left:0;border-right:0}.special-col:before{border-top:0;border-bottom:0}.special-bomb{background:radial-gradient(circle at 34% 30%,#fff 0 4%,#f8cf3e 5% 9%,#8021b9 10% 28%,#201025 29% 44%,#ff7a18 45% 53%,#151018 54% 100%)!important;border-radius:50%}.special-bomb:after{background:#fff9;width:22%;height:12%}.combo-badge{pointer-events:none;position:absolute;z-index:9;top:44%;left:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;font-weight:1000;font-size:clamp(22px,7vw,42px);text-shadow:0 3px 12px #000;color:#ffd04a;white-space:nowrap}.combo-badge.show{animation:combo .65s ease}@keyframes combo{15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-65%) scale(.98)}}.game-help{text-align:center;color:var(--muted);font-size:12px;line-height:1.5;margin:14px auto 0;max-width:560px}.modal{position:fixed;z-index:100;inset:0;background:#07040bbd;backdrop-filter:blur(9px);display:none;place-items:center;padding:20px}.modal.open{display:grid;animation:fadeIn .2s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.modal-card{width:min(100%,410px);border-radius:26px;background:linear-gradient(160deg,#2a1538,#150c1e);border:1px solid #ffffff1d;padding:28px;box-shadow:0 25px 80px #000a;text-align:center}.modal-card.compact{padding:24px}.modal-icon{font-size:64px}.modal-card h2{font-size:30px;margin:8px 0}.modal-card p{color:var(--muted);line-height:1.55}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.result-stats>div{background:#ffffff09;border-radius:15px;padding:12px}.result-stats span,.result-stats strong{display:block}.result-stats span{color:var(--muted);font-size:11px}.result-stats strong{margin-top:3px;font-size:19px}.modal-card.compact h2{margin-top:0}.modal-card.compact .secondary-btn:first-of-type{margin-top:18px}
@media(max-width:700px){.app-shell{padding-left:10px;padding-right:10px}.topbar{height:62px}.brand small{display:none}.hero-card{min-height:430px;padding:30px 24px}.hero-card h1{max-width:92%}.moon-glow{width:115px;right:-10px}.hero-ghost{right:2%;bottom:8%}.hero-card p:not(.eyebrow){max-width:80%;font-size:14px}.hero-card .primary-btn,.hero-card .secondary-btn{max-width:210px}.feature-grid{grid-template-columns:1fr}.feature-grid article{display:grid;grid-template-columns:35px 1fr;column-gap:9px;padding:12px 15px}.feature-grid article>span{grid-row:1/3;margin:0}.feature-grid small{margin:0}.screen{padding-top:10px}.hud{grid-template-columns:1fr 1fr}.hud-card.objective{grid-column:1/-1}.board{border-radius:16px}.level-grid{grid-template-columns:repeat(4,1fr)}.level-btn{min-height:72px}.game-help{font-size:11px}}
@media(max-width:390px){:root{--tile-size:10.35vw;--gap:.85vw}.level-grid{grid-template-columns:repeat(3,1fr)}.hero-card{min-height:410px}.hero-card h1{font-size:36px}.hero-ghost{font-size:90px}.hud-card{padding:9px 10px}.hud-card strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}