@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root{
  --red:#e63946;
  --deep:#24120f;
  --yellow:#ffca3a;
  --cream:#fff4d6;
  --green:#70c45a;
  --blue:#79bee7;
  --ink:#16120f;
  --pink:#ff8cab;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:"Space Mono",ui-monospace,monospace;
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 10px 10px,rgba(230,57,70,.15) 2px,transparent 2.5px),
    linear-gradient(45deg,rgba(255,202,58,.16) 25%,transparent 25% 75%,rgba(255,202,58,.16) 75%);
  background-size:28px 28px,56px 56px;
  overflow-x:hidden;
  cursor:none;
}
body.apocalypse{animation:shakey .18s linear infinite alternate}
@keyframes shakey{from{transform:translateX(-1px)}to{transform:translateX(1px)}}
button,a,input,select,[role="button"]{cursor:none}
body::before,body::after{
  content:"";
  position:fixed;
  z-index:-3;
  pointer-events:none;
  opacity:.12;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:drop-shadow(8px 10px 0 rgba(0,0,0,.10));
}
body::before{
  width:430px;height:250px;top:12%;left:-120px;
  background-image:url("assets/hotdog-transparent.png");
  transform:rotate(-24deg);
}
body::after{
  width:440px;height:290px;bottom:5%;right:-130px;
  background-image:url("assets/hotdog-evan.jpg");
  border:5px solid rgba(22,18,15,.35);
  transform:rotate(18deg);
}

.bg-dogs{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.bg-dog{
  position:absolute;
  opacity:.14;
  filter:drop-shadow(10px 10px 0 rgba(0,0,0,.08));
  animation:drift linear infinite;
}
@keyframes drift{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-24px) rotate(6deg)}
  100%{transform:translateY(0) rotate(0deg)}
}

.hotdog-cursor{
  position:fixed;z-index:99999;width:82px;height:50px;pointer-events:none;
  transform:translate(-10px,-13px) rotate(-12deg);transition:transform .05s linear;
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,.28));
}
.hotdog-cursor img{width:100%;height:100%;display:block;object-fit:contain}
.hotdog-cursor.clicking{transform:translate(-10px,-13px) rotate(8deg) scale(.82)}

.top-chaos{
  width:min(1180px,calc(100% - 28px));
  margin:12px auto 0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.counter-box{
  background:var(--ink);
  color:white;
  border:4px solid var(--yellow);
  padding:10px 14px;
  box-shadow:6px 6px 0 rgba(0,0,0,.16);
  font-weight:700;
}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.65}}
.mini-button{
  border:4px solid var(--ink);background:var(--green);color:var(--ink);
  padding:12px 16px;font-family:"Archivo Black",Impact,sans-serif;font-size:15px;
  box-shadow:6px 6px 0 var(--ink);transition:.12s ease
}
.mini-button:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}

.ticker{
  position:sticky;top:0;z-index:30;overflow:hidden;background:var(--red);color:white;
  border-bottom:4px solid var(--ink);border-top:4px solid var(--ink);
  font-family:"Archivo Black",sans-serif;white-space:nowrap;margin-top:12px
}
.ticker-track{display:inline-block;padding:10px 0;min-width:200%;animation:ticker 18s linear infinite}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

main{width:min(1180px,calc(100% - 28px));margin:0 auto}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;min-height:720px;align-items:center;padding:60px 0 55px}
.eyebrow{display:inline-block;background:var(--ink);color:white;padding:8px 12px;font-weight:700;box-shadow:6px 6px 0 var(--yellow);transform:rotate(-1deg)}
h1,h2,h3,.section-title,.big-button{font-family:"Archivo Black",Impact,sans-serif}
h1{margin:18px 0 10px;font-size:clamp(68px,10vw,145px);line-height:.78;letter-spacing:-.07em;text-transform:uppercase;text-shadow:8px 8px 0 var(--yellow)}
h1 span{color:var(--red);-webkit-text-stroke:3px var(--ink)}
.hero-sub{max-width:680px;font-size:20px;font-weight:700}
.hero-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-buttons.slim{margin-top:20px}
.big-button{
  border:4px solid var(--ink);background:var(--yellow);color:var(--ink);padding:16px 20px;
  font-size:16px;box-shadow:7px 7px 0 var(--ink);transform:rotate(-1deg);transition:.12s ease
}
.big-button:hover{transform:translate(3px,3px) rotate(1deg);box-shadow:4px 4px 0 var(--ink)}
.big-button.alt{background:var(--red);color:white}
.hero-dog{position:relative;min-height:520px;display:grid;place-items:center}
.hero-dog>img,.feature-photo{width:min(100%,520px);aspect-ratio:4/3;object-fit:cover;background:white;border:5px solid var(--ink);padding:10px;box-shadow:14px 18px 0 rgba(0,0,0,.18);animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(2deg)}}
.burst{position:absolute;right:0;top:22px;display:grid;place-items:center;width:120px;height:120px;background:var(--yellow);border:4px solid var(--ink);clip-path:polygon(50% 0%,60% 25%,82% 8%,76% 34%,100% 31%,80% 50%,100% 67%,74% 65%,82% 92%,60% 75%,50% 100%,40% 75%,18% 92%,26% 65%,0 67%,20% 50%,0 31%,24% 34%,18% 8%,40% 25%);font-family:"Archivo Black";text-align:center;transform:rotate(9deg)}
.speech{position:absolute;bottom:18px;left:-18px;max-width:320px;background:white;border:4px solid var(--ink);padding:16px;font-weight:700;box-shadow:8px 8px 0 var(--ink);transform:rotate(-3deg)}

.panel{border:5px solid var(--ink);background:#fff;box-shadow:12px 12px 0 var(--ink);margin-bottom:90px}
.fact-blaster{background:var(--blue);border:5px solid var(--ink);box-shadow:12px 12px 0 var(--ink);margin:10px 0 90px}
.section-title{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:14px 18px;border-bottom:5px solid var(--ink);background:var(--yellow);font-size:28px}
.section-title small{font-family:"Space Mono";font-size:12px}
.section-title.chaos,.red-title{background:var(--red);color:white}
.green-title{background:var(--green)}
.blue-title{background:var(--blue)}
.photo-title{background:var(--pink)}
.yellow-title{background:#ffe06f}
.flappy-title{background:#7fd3ff}
.fact-display{min-height:150px;display:grid;place-items:center;text-align:center;padding:34px;font-size:clamp(24px,4vw,44px);font-weight:700;line-height:1.1}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.feature-grid,.builder-grid{padding:24px}
.feature-copy{display:flex;flex-direction:column;justify-content:center;gap:18px}
.photo-tag{display:inline-block;background:var(--ink);color:#fff;padding:8px 12px;border:4px solid var(--yellow);margin-top:14px;font-family:"Archivo Black";transform:rotate(-2deg)}
.rating-line{display:flex;justify-content:space-between;gap:16px;align-items:center;font-weight:700;background:#fff5b9;padding:14px;border:4px solid var(--ink)}
.stat-list{margin:0;padding-left:20px;display:grid;gap:10px;font-weight:700}

.builder-preview{background:#fff7d8;border:4px solid var(--ink);padding:18px;text-align:center;position:relative}
.builder-preview img{display:block;width:min(100%,420px);margin:0 auto;object-fit:contain;aspect-ratio:4/3;filter:drop-shadow(10px 12px 0 rgba(0,0,0,.18))}
.builder-name{display:inline-block;margin-top:10px;background:var(--red);color:#fff;border:4px solid var(--ink);padding:8px 12px;font-family:"Archivo Black";transform:rotate(-2deg)}
.builder-score{margin:16px auto 10px;font-family:"Archivo Black";font-size:28px}
.builder-toppings,.builder-description,.vote-status,.horoscope-result,.sound-status{font-weight:700;line-height:1.6}
.builder-controls{display:grid;gap:18px}
.topping-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.topping-chip{background:#fff;border:4px solid var(--ink);padding:14px 12px;font-weight:700;box-shadow:5px 5px 0 rgba(0,0,0,.1);transition:.12s ease}
.topping-chip.active{background:var(--yellow);transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(0,0,0,.14)}
.builder-actions{display:flex;flex-wrap:wrap;gap:12px}
.tiny-card{background:#f4f8ff;border:4px solid var(--ink);padding:18px}
.tiny-card h3{margin:0 0 8px}

.menu-grid,.fame-grid,.review-grid,.ad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px}
.menu-card,.fame-card,.review-card,.ad-card{
  border:4px solid var(--ink);background:#fff;padding:18px;box-shadow:7px 7px 0 rgba(0,0,0,.14)
}
.menu-card:nth-child(odd),.fame-card:nth-child(2n){background:#fff0a8}
.menu-card:nth-child(3n),.review-card:nth-child(2n){background:#ffd9dc}
.menu-card h3,.fame-card h3{margin:0 0 8px;font-size:24px}
.menu-card p,.fame-card p{font-weight:700;line-height:1.6}
.menu-card strong,.fame-card strong{display:block;margin-top:12px;font-family:"Archivo Black";font-size:24px}
.review-card{font-size:17px;font-weight:700;line-height:1.6;margin:0}
.review-card cite{display:block;margin-top:14px;font-style:normal;font-family:"Archivo Black"}
.ad-card{position:relative;background:#d9f0ff}
.ad-card .ad-badge{position:absolute;top:-12px;right:12px;background:var(--red);color:#fff;border:3px solid var(--ink);padding:4px 8px;font-size:12px;font-family:"Archivo Black"}
.ad-card h3{margin:0 0 8px;font-size:22px}
.ad-card p{font-weight:700;line-height:1.5}
.ad-card button{margin-top:8px}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:90px}
.photo-card{position:relative;background:white;padding:12px 12px 18px;border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(0,0,0,.15)}
.photo-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border:2px solid var(--ink);background:#f2dfb7;filter:saturate(1.08) contrast(1.03)}
.photo-card p{margin:14px 6px 0;font-weight:700;text-align:center}
.tilt-left{transform:rotate(-2deg)} .tilt-right{transform:rotate(2deg)}
.tape{position:absolute;top:-17px;left:50%;width:82px;height:28px;transform:translateX(-50%) rotate(-2deg);background:rgba(255,235,145,.75);border:1px solid rgba(0,0,0,.12)}

.photo-dump{background:white}
.photo-wall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:10px;padding:10px;background:var(--ink)}
.photo-tile{position:relative;margin:0;overflow:hidden;background:#fff;border:3px solid #fff}
.photo-tile img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .25s ease,filter .25s ease}
.photo-tile:hover img{transform:scale(1.07) rotate(.6deg);filter:saturate(1.25) contrast(1.08)}
.photo-tile figcaption{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);background:var(--yellow);color:var(--ink);border:3px solid var(--ink);padding:6px 9px;font-family:"Archivo Black",Impact,sans-serif;font-size:14px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-1deg)}
.photo-tile.huge{grid-column:span 2;grid-row:span 2}
.photo-tile.tall{grid-row:span 2}
.photo-tile.wide{grid-column:span 2}

.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:100px}
.fact-card{position:relative;min-height:235px;padding:54px 22px 24px;border:4px solid var(--ink);background:white;box-shadow:8px 8px 0 var(--ink)}
.fact-card:nth-child(2n){background:#fff0a8}.fact-card:nth-child(3n){background:#ffd9dc}
.fact-card h2{margin:0 0 10px;font-size:25px}.fact-card p{font-weight:700}
.stamp{position:absolute;top:14px;left:14px;background:var(--red);color:white;padding:6px 9px;font-size:12px;font-weight:700;transform:rotate(-2deg)}

.vote-box,.horoscope-box,.soundboard{padding-bottom:22px}
.info-columns{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:90px}
.vote-copy{padding:0 22px;font-weight:700}
.vote-buttons{display:flex;flex-wrap:wrap;gap:12px;padding:0 22px 18px}
.vote-bars{padding:0 22px 10px;display:grid;gap:14px}
.vote-row{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;font-weight:700}
.vote-track{height:24px;border:4px solid var(--ink);background:#fff;overflow:hidden}
.vote-fill{height:100%}
.vote-fill.yes{background:var(--green)}
.vote-fill.no{background:var(--red)}
.vote-status{padding:0 22px}
.label-line{display:block;padding:18px 22px 8px;font-weight:700}
.weird-select{display:block;width:calc(100% - 44px);margin:0 22px 16px;padding:14px;border:4px solid var(--ink);font:inherit;background:#fff}
.horoscope-box .big-button{margin:0 22px 16px}
.horoscope-result{margin:0 22px;background:#fff5b9;border:4px solid var(--ink);padding:18px}
.sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:22px}
.sound-button{border:4px solid var(--ink);background:#fff;padding:22px 14px;font-family:"Archivo Black";font-size:22px;box-shadow:7px 7px 0 rgba(0,0,0,.14);transition:.12s ease}
.sound-button:hover{transform:translate(3px,3px) rotate(.5deg);box-shadow:4px 4px 0 rgba(0,0,0,.14)}
.sound-status{margin:0 22px;border:4px solid var(--ink);background:#f4f8ff;padding:16px}

.meme-zone{background:#fff}
.meme-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.meme-card{min-height:390px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;overflow:hidden;border:3px solid var(--ink);text-align:center;transition:transform .14s ease}
.meme-card:hover{transform:scale(1.02) rotate(.4deg)}
.meme-card img{width:72%;max-height:255px;object-fit:contain}
.meme-top,.meme-bottom{width:100%;padding:13px 16px;background:var(--ink);color:white;font-family:"Archivo Black";font-size:clamp(18px,2.5vw,30px)}
.big-emoji{font-size:110px;filter:drop-shadow(8px 8px 0 rgba(0,0,0,.15))}
.red{background:#ff8e96}.yellow{background:#ffe06f}.blue{background:#95c8ff}.green{background:#9ee58c}.clickable{user-select:none}

.flappy-shell{padding:18px;background:#fff3ba}
#flappyCanvas{display:block;width:100%;height:auto;max-height:560px;border:5px solid var(--ink);background:#82d8ff;image-rendering:pixelated}
.flappy-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:16px;font-family:"Archivo Black";font-size:21px}
.flappy-controls .big-button{margin-left:auto}

.dog-meter{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:30px;padding:34px}
.dog-meter h2{font-size:clamp(32px,5vw,64px);line-height:.9;margin:15px 0 0}
.meter-ui{background:white;border:4px solid var(--ink);padding:26px}
#dogMeter{width:100%;accent-color:var(--red)}
#meterResult{margin-top:18px;font-family:"Archivo Black";font-size:clamp(19px,3vw,32px)}

.manifesto{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;text-align:center;padding:35px}
.manifesto h2{font-size:clamp(34px,5vw,68px);margin:0}
.manifesto p{font-size:18px;font-weight:700}
.manifesto-dog{font-size:76px;transform:rotate(-20deg)}
.manifesto-dog.flip{transform:rotate(20deg) scaleX(-1)}

footer{text-align:center;background:var(--ink);color:white;padding:35px 18px 45px;border-top:6px solid var(--red)}
.footer-dogs{font-size:28px;word-spacing:16px;line-height:1.8}.tiny{opacity:.75;font-size:12px}
.tiny-hotdog{margin-top:10px;border:4px solid var(--yellow);background:transparent;color:#fff;padding:10px 14px;font-size:24px}
.photo-credits{max-width:1000px;margin:22px auto 0;font-size:11px;line-height:1.7;opacity:.72}
.photo-credits a{color:#ffd45d;text-decoration:underline;text-underline-offset:2px}

.dog-rain{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden}
.raining-dog{position:absolute;top:-100px;font-size:clamp(28px,4vw,58px);animation:fall linear forwards;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.1))}
@keyframes fall{to{transform:translateY(calc(100vh + 180px)) rotate(720deg)}}
.fact-pop{animation:factPop .22s ease}
@keyframes factPop{50%{transform:scale(1.03) rotate(-.5deg)}}

.popup-layer{position:fixed;inset:0;pointer-events:none;z-index:9997}
.popup{
  position:absolute;background:#fff8cf;border:5px solid var(--ink);box-shadow:12px 12px 0 rgba(0,0,0,.2);width:min(340px,calc(100vw - 30px));
  pointer-events:auto;animation:popupIn .2s ease
}
@keyframes popupIn{from{transform:scale(.92) rotate(-2deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.popup-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-bottom:4px solid var(--ink);background:var(--red);color:#fff;font-family:"Archivo Black"}
.popup-close{border:3px solid var(--ink);background:#fff;color:var(--ink);font-family:"Archivo Black";padding:6px 10px}
.popup-body{padding:14px;font-weight:700;line-height:1.5}
.popup-body img{width:100%;border:3px solid var(--ink);display:block;margin-bottom:10px;height:150px;object-fit:cover}

@media (max-width:1050px){
  .menu-grid,.fame-grid,.review-grid,.ad-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-dog{min-height:430px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .facts-grid{grid-template-columns:repeat(2,1fr)}
  .photo-wall{grid-template-columns:repeat(2,1fr)}
  .two-col,.info-columns,.dog-meter{grid-template-columns:1fr}
  .sound-grid,.topping-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  body{cursor:auto}
  button,a,input,select,[role="button"]{cursor:auto}
  .hotdog-cursor{display:none}
  .top-chaos{justify-content:center}
  .hero{padding-top:38px}
  h1{font-size:clamp(58px,22vw,95px)}
  .hero-dog{min-height:340px}
  .burst{width:90px;height:90px;font-size:12px}
  .speech{left:5px}
  .gallery,.facts-grid,.meme-grid,.menu-grid,.fame-grid,.review-grid,.ad-grid,.sound-grid,.topping-grid{grid-template-columns:1fr}
  .photo-wall{grid-template-columns:1fr;grid-auto-rows:220px}
  .photo-tile.huge,.photo-tile.tall,.photo-tile.wide{grid-column:span 1;grid-row:span 1}
  .section-title{align-items:flex-start;flex-direction:column}
  .manifesto{grid-template-columns:1fr}
  .manifesto-dog{display:none}
  .flappy-controls .big-button{margin-left:0;width:100%}
  .vote-row{grid-template-columns:42px 1fr auto}
}