@font-face{
  font-family:"Bagel Fat One";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/bagel-fat-one.woff2") format("woff2");
}
@font-face{
  font-family:"Fredoka";
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("/fonts/fredoka.woff2") format("woff2");
}

:root{
  --bun:#f4a93c;
  --bun-dark:#d8862a;
  --ketchup:#e23b2e;
  --mustard:#f4b41a;
  --mustard-deep:#e09c0b;
  --pickle:#6fae3f;
  --cheese:#ffc532;
  --char:#2b1d12;
  --cream:#fff7e6;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:"Fredoka",system-ui,sans-serif;
  background:
    radial-gradient(circle at 50% 38%, #ffd24d 0%, var(--mustard) 35%, var(--mustard-deep) 72%, #c98708 100%);
  color:var(--char);
  -webkit-tap-highlight-color:transparent;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ctext y='34' font-size='34'%3E%F0%9F%8D%94%3C/text%3E%3C/svg%3E") 22 22, auto;
  user-select:none;
  touch-action:manipulation;
}

/* hidden svg sprite holder */
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* rotating sunburst rays */
.rays{
  position:fixed; inset:-60%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.16) 0deg 7deg, transparent 7deg 14deg);
  animation:spin 90s linear infinite;
  z-index:0; pointer-events:none;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* grain / texture overlay */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* vignette + greasy sheen */
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 200px 40px rgba(120,70,0,.35);
}

/* ===== Title ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:5;
  text-align:center; padding:14px 10px 0; pointer-events:none;
}
h1{
  font-family:"Bagel Fat One",cursive;
  font-size:clamp(2.1rem,9vw,6rem);
  line-height:.92;
  color:var(--ketchup);
  letter-spacing:.5px;
  text-shadow:
    0 3px 0 var(--char),
    0 6px 0 rgba(0,0,0,.25),
    4px 4px 0 #fff,
    -4px 4px 0 #fff;
  -webkit-text-stroke:3px var(--cream);
  paint-order:stroke fill;
  animation:wobble 3.4s ease-in-out infinite;
  transform-origin:center bottom;
}
.tag{
  margin-top:.35em;
  font-weight:700;
  font-size:clamp(.8rem,3.4vw,1.4rem);
  color:var(--char);
  background:var(--cheese);
  display:inline-block;
  padding:.25em .9em;
  border:3px solid var(--char);
  border-radius:999px;
  transform:rotate(-2deg);
  box-shadow:3px 3px 0 rgba(0,0,0,.3);
}
@keyframes wobble{
  0%,100%{transform:rotate(-2.5deg) scale(1);}
  50%{transform:rotate(2.5deg) scale(1.03);}
}

/* ===== HUD ===== */
.counter{
  position:fixed; top:14px; left:14px; z-index:6;
  background:var(--cream);
  border:4px solid var(--char);
  border-radius:16px;
  padding:.35em .7em;
  font-weight:700; font-size:clamp(.85rem,3.6vw,1.3rem);
  box-shadow:4px 4px 0 var(--char);
  transform:rotate(-3deg);
  white-space:nowrap;
}
.counter b{color:var(--ketchup);font-family:"Bagel Fat One",cursive;-webkit-text-stroke:.5px var(--char);}

/* ===== Controls ===== */
.dock{
  position:fixed; bottom:max(16px,env(safe-area-inset-bottom)); left:50%;
  transform:translateX(-50%);
  z-index:6; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:0 10px;
}
.btn{
  font-family:"Fredoka",sans-serif; font-weight:700;
  font-size:clamp(.85rem,3.6vw,1.15rem);
  color:var(--cream);
  background:var(--ketchup);
  border:4px solid var(--char);
  border-radius:14px;
  padding:.55em 1em;
  box-shadow:0 5px 0 var(--char);
  cursor:pointer;
  transition:transform .07s, box-shadow .07s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:#f2503f;}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--char);}
.btn.alt{background:var(--pickle);}
.btn.alt:hover{background:#7dbf48;}
.btn.cool{background:var(--char);}
.btn.cool:hover{background:#43301f;}

/* ===== floating catchphrases ===== */
.yell{
  position:fixed; z-index:7; pointer-events:none;
  font-family:"Bagel Fat One",cursive;
  color:#fff;
  -webkit-text-stroke:3px var(--char);
  paint-order:stroke fill;
  font-size:clamp(1.4rem,6vw,2.6rem);
  white-space:nowrap;
  animation:yell 1.1s ease-out forwards;
}
@keyframes yell{
  0%{transform:translate(-50%,-50%) scale(.3) rotate(var(--r));opacity:0;}
  25%{transform:translate(-50%,-50%) scale(1.2) rotate(var(--r));opacity:1;}
  100%{transform:translate(-50%,-160%) scale(1) rotate(var(--r));opacity:0;}
}

.stage{position:fixed; inset:0; z-index:4;}
.burger{
  position:absolute; top:0; left:0;
  will-change:transform;
  filter:drop-shadow(0 8px 6px rgba(90,50,0,.35));
}

.hint{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%);
  z-index:6; color:var(--char); font-weight:600; opacity:.75;
  font-size:clamp(.7rem,3vw,1rem); text-align:center; pointer-events:none;
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.4;}50%{opacity:.9;}}

@media (prefers-reduced-motion:reduce){
  .rays{animation:none;} h1{animation:none;}
}