*{box-sizing:border-box}
:root{
  --bg:#070b16;--panel:#101827;--panel2:#172033;--line:#334155;--text:#f8fafc;
  --muted:#aab7cc;--gold:#f6b51d;--orange:#f97316;--red:#d62828;--green:#55d84c;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
.topbar{
  height:76px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;background:rgba(5,8,16,.94);backdrop-filter:blur(12px);border-bottom:1px solid #202b40
}
.brand{font-weight:1000;line-height:.74;font-size:21px;transform:rotate(-3deg)}
.brand span,.brand strong{display:block}.brand strong{font-size:30px;color:var(--gold)}
nav{display:flex;gap:28px}nav a{color:white;text-decoration:none;font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.icon-btn{background:#111827;color:white;border:1px solid #475569;border-radius:12px;padding:10px 13px;font-size:19px;cursor:pointer}
.hero{
  min-height:440px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;
  padding:58px clamp(24px,7vw,110px);
  background:
    radial-gradient(circle at 74% 25%,rgba(255,186,30,.16),transparent 22%),
    radial-gradient(circle at 80% 80%,rgba(214,40,40,.22),transparent 30%),
    linear-gradient(135deg,#180d37,#14234e 55%,#3b1637)
}
.hero:after{
  content:"";position:absolute;inset:auto 0 0;height:150px;opacity:.4;
  background:linear-gradient(90deg,#030712 0 6%,transparent 6% 8%,#030712 8% 16%,transparent 16% 19%,#030712 19% 29%,transparent 29% 32%,#030712 32% 43%,transparent 43% 46%,#030712 46% 58%,transparent 58% 62%,#030712 62% 74%,transparent 74% 78%,#030712 78% 91%,transparent 91% 94%,#030712 94%);
  clip-path:polygon(0 48%,6% 48%,6% 28%,8% 28%,8% 60%,16% 60%,16% 38%,19% 38%,19% 60%,29% 60%,29% 16%,32% 16%,32% 60%,43% 60%,43% 35%,46% 35%,46% 60%,58% 60%,58% 20%,62% 20%,62% 60%,74% 60%,74% 42%,78% 42%,78% 60%,91% 60%,91% 26%,94% 26%,94% 60%,100% 60%,100% 100%,0 100%)
}
.hero-copy{position:relative;z-index:2;max-width:690px}
.eyebrow{color:#ffd046;font-weight:950;font-size:12px;letter-spacing:.14em;margin-bottom:8px}
.hero h1{font-size:clamp(54px,7vw,104px);line-height:.83;margin:0 0 22px;letter-spacing:-.055em;text-transform:uppercase;text-shadow:0 8px 0 #0003}
.hero h1 span{color:var(--gold)}
.hero p{font-size:19px;color:#dbe4f3;max-width:560px;line-height:1.5}
.hero-pizza{font-size:clamp(140px,19vw,285px);z-index:2;filter:drop-shadow(0 22px 18px #0008);animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-16px) rotate(9deg)}}
.primary-btn,.secondary-btn{
  border:0;border-radius:12px;padding:14px 22px;font-weight:950;letter-spacing:.03em;cursor:pointer;font-size:14px
}
.primary-btn{color:white;background:linear-gradient(#ef4338,#b91c1c);box-shadow:0 6px 0 #7f1d1d}
.primary-btn:active{transform:translateY(3px);box-shadow:0 3px 0 #7f1d1d}
.secondary-btn{background:#f8fafc;color:#0f172a}
.game-section{max-width:1220px;margin:0 auto;padding:48px 20px 66px}
.game-title-row{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px}
.game-title-row h2,.section-heading h2{font-size:38px;margin:0}
#gameWrap{position:relative;border-radius:24px;overflow:hidden;background:#111827;border:1px solid #334155;box-shadow:0 28px 70px #0007;min-height:420px}
#game canvas{display:block;width:100%!important;height:auto!important}
.overlay{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:#050914bd;padding:18px}
.overlay.active{display:flex}
.overlay-card{text-align:center;width:min(470px,94%);padding:34px;border-radius:22px;background:#111827f2;border:1px solid #475569;box-shadow:0 25px 70px #0008}
.overlay-card h2{font-size:38px;margin:4px 0 10px}.overlay-card p{color:#cbd5e1;line-height:1.5}
.big-icon{font-size:72px}.final-score{font-size:78px;font-weight:1000;line-height:1;color:#ffd046;margin:10px 0}.stars{font-size:38px;letter-spacing:6px;color:#ffd046}.best-score{margin:10px 0 22px;color:#cbd5e1}.end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tipbar{margin-top:14px;padding:14px 18px;border-radius:14px;background:#101827;border:1px solid #334155;color:#dbe4f3}
.tipbar b{color:#7ee787}
.levels-section{padding:56px clamp(20px,5vw,70px) 74px;background:#101827}
.section-heading{text-align:center;margin-bottom:26px}
.level-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.level-card{border:1px solid #3a475e;background:#172033;border-radius:18px;padding:16px;cursor:pointer;position:relative;transition:.18s transform,.18s border-color}
.level-card:hover{transform:translateY(-3px);border-color:#f6b51d}
.level-card.locked{opacity:.52;cursor:not-allowed}.level-card.active{border:2px solid #f6b51d}
.level-card .num{font-weight:1000;font-size:12px;color:#ffd046}.level-card .icon{font-size:52px;margin:13px 0}.level-card h3{margin:0 0 6px}.level-card p{margin:0;color:#9fb0c8;font-size:13px;min-height:34px}.level-card .mini{margin-top:12px;font-size:12px;color:#cbd5e1}
.how-section{padding:58px 20px 76px}
.how-grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.how-grid article{background:#121b2b;border:1px solid #334155;border-radius:18px;padding:28px;text-align:center}
.how-icon{font-size:50px}.how-grid h3{font-size:22px;margin:10px 0 4px}.how-grid p{margin:0;color:#aebcd0}
footer{text-align:center;padding:26px;color:#8fa0b7;background:#050914}
@media(max-width:900px){.level-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  nav{display:none}.hero{min-height:390px}.hero-pizza{position:absolute;right:-48px;top:88px;opacity:.42}.hero-copy{z-index:3}
  .hero p{max-width:74%;font-size:16px}.game-title-row{align-items:start;flex-direction:column}.level-grid{grid-template-columns:1fr 1fr}.how-grid{grid-template-columns:1fr}
}
@media(max-width:430px){.hero{padding:42px 20px}.hero h1{font-size:52px}.level-grid{grid-template-columns:1fr}.end-actions{flex-direction:column}}