/* cosplay.quest -- inflated-3d glitchpunk */

:root{
  --foam-amber:#ff8a3d;
  --amber-light:#ffb578;
  --coral:#ff5a6e;
  --magenta-deep:#c2185b;
  --cream:#fff2dc;
  --glitch-magenta:#ff00ff;
  --glitch-cyan:#00ffff;
  --charcoal:#2a1a14;

  --inflate-bg:linear-gradient(145deg,#ffb578 0%,#ff8a3d 50%,#c2185b 100%);
  --inflate-shadow:
    0 2px 0 rgba(255,255,255,0.4) inset,
    0 -8px 16px rgba(194,24,91,0.5) inset,
    0 8px 0 #c2185b,
    0 16px 24px rgba(194,24,91,0.4),
    0 24px 48px rgba(0,0,0,0.25);
  --inflate-shadow-hover:
    0 3px 0 rgba(255,255,255,0.55) inset,
    0 -10px 22px rgba(194,24,91,0.55) inset,
    0 12px 0 #c2185b,
    0 24px 36px rgba(194,24,91,0.45),
    0 38px 70px rgba(0,0,0,0.3);
  --bounce:cubic-bezier(0.34,1.56,0.64,1);
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  background:var(--cream);
  color:var(--charcoal);
  font-family:"Commissioner",system-ui,sans-serif;
  font-size:1.05rem;
  line-height:1.55;
  overflow-x:hidden;
  cursor:crosshair;
}

body{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,181,120,0.55) 0%, rgba(255,138,61,0.18) 38%, transparent 70%),
    radial-gradient(90% 60% at 100% 100%, rgba(255,90,110,0.3) 0%, transparent 60%),
    var(--cream);
  padding-bottom:4rem;
}

a{color:inherit;text-decoration:none;}
em{font-style:normal;font-weight:600;color:var(--magenta-deep);}

/* ---- glitch overlays ---- */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}
.tear-band{
  position:fixed;left:0;right:0;height:4px;top:30%;
  pointer-events:none;z-index:9001;opacity:0;
  background:linear-gradient(90deg, rgba(255,0,255,0.35), rgba(0,255,255,0.35));
  transform:translateX(0);
}
.tear-band.fire{opacity:1;}

@keyframes glitch-rgb{
  0%,96%,100%{text-shadow:none;}
  97%{text-shadow:4px 0 0 var(--glitch-magenta), -4px 0 0 var(--glitch-cyan);}
  98%{text-shadow:-3px 0 0 var(--glitch-magenta), 3px 0 0 var(--glitch-cyan);}
  99%{text-shadow:5px 0 0 var(--glitch-magenta), -2px 0 0 var(--glitch-cyan);}
}
.glitch-rgb{animation:glitch-rgb 7s infinite steps(1,end);}

/* ---- topbar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding:1.6rem clamp(1rem,4vw,3.5rem) 0.6rem;
  position:relative;z-index:10;
}
.brand-mark{
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:1.3rem;
  letter-spacing:0.12em;color:var(--magenta-deep);
}
.topnav{display:flex;gap:1.2rem;flex-wrap:wrap;font-family:"JetBrains Mono",monospace;font-size:0.82rem;letter-spacing:0.06em;text-transform:uppercase;}
.topnav a{padding:0.35rem 0.55rem;border:1.5px solid rgba(42,26,20,0.25);border-radius:10px;transition:all .18s var(--bounce);}
.topnav a:hover{border-color:var(--magenta-deep);transform:translateY(-2px) scale(1.04);background:rgba(255,138,61,0.18);}
.nav-cta{background:var(--coral);color:#2a1a14;border-color:#c2185b !important;font-weight:700;}
.nav-cta:hover{background:#ff7382 !important;}

/* ---- bento grid ---- */
.bento{
  display:grid;
  gap:clamp(0.9rem,2vw,1.6rem);
  padding:clamp(1rem,3.5vw,2.5rem) clamp(1rem,4vw,3.5rem);
  grid-template-columns:1.6fr 1fr 0.6fr;
  grid-template-rows:340px 340px 300px;
  grid-template-areas:
    "hero hero quest"
    "hero hero mascot"
    "workshop workshop missing";
  max-width:1500px;margin:0 auto;
}
.cell-hero{grid-area:hero;}
.cell-quest{grid-area:quest;}
.cell-mascot{grid-area:mascot;}
.cell-workshop{grid-area:workshop;}
.cell-missing{grid-area:missing;}

.cell{
  position:relative;overflow:hidden;
  border-radius:28px;
  background:var(--inflate-bg);
  box-shadow:var(--inflate-shadow);
  padding:clamp(1.1rem,2.4vw,2rem);
  transition:transform 220ms var(--bounce), box-shadow 220ms var(--bounce);
  color:#2a1208;
}
.cell:hover{transform:scale(1.03);box-shadow:var(--inflate-shadow-hover);}
.cell::before{
  /* circuit-trace tech motif in shadow recess */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0.08;
  background-image:
    linear-gradient(90deg, transparent 0 6px, #2a1a14 6px 7px, transparent 7px 40px),
    linear-gradient(0deg, transparent 0 6px, #2a1a14 6px 7px, transparent 7px 40px);
  background-size:40px 40px;
}

.cell-label{
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:0.78rem;
  letter-spacing:0.1em;text-transform:uppercase;color:#3a1409;
  margin-bottom:0.8rem;
}

/* deliberate dropped-frame clip on workshop */
.cell-workshop{margin-bottom:-14px;}

/* ---- hero ---- */
.cell-hero{display:flex;flex-direction:column;justify-content:center;gap:1rem;}
.hero-eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:0.75rem;letter-spacing:0.08em;
  text-transform:uppercase;color:#4a1a0c;
}
.hero-title{
  font-family:"Commissioner",sans-serif;
  font-weight:800;
  font-variation-settings:"wght" 800;
  font-stretch:125%;
  font-size:clamp(2.5rem,7vw,6rem);
  line-height:0.95;
  letter-spacing:-0.02em;
  color:#fff2dc;
  text-shadow:
    1px 1px 0 #ffb578, 2px 2px 0 #ff9f55, 3px 3px 0 #ff8a3d,
    4px 4px 0 #f5743a, 5px 5px 0 #e85f3a, 6px 6px 0 #d94a3c,
    7px 7px 0 #cf3a45, 8px 8px 0 #c2185b, 9px 9px 0 #b01655,
    10px 10px 0 #9c1450, 11px 11px 0 #861248,
    14px 14px 30px rgba(0,0,0,0.35);
  transition:font-variation-settings 320ms var(--bounce), font-stretch 320ms var(--bounce);
  cursor:crosshair;
}
.hero-title:hover,.hero-title:focus{
  font-variation-settings:"wght" 900;
  font-stretch:145%;
  outline:none;
}
.hero-sub{max-width:46ch;font-size:1.08rem;color:#3a1409;}
.hero-actions{display:flex;gap:0.9rem;flex-wrap:wrap;margin-top:0.4rem;}

.puff-btn{
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:0.85rem;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:0.85rem 1.5rem;border-radius:18px;
  background:linear-gradient(145deg,#ff7d92 0%,#ff5a6e 50%,#c2185b 100%);
  color:#fff2dc;border:none;cursor:crosshair;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.4) inset,
    0 -6px 12px rgba(194,24,91,0.5) inset,
    0 6px 0 #9c1450,
    0 12px 18px rgba(194,24,91,0.4),
    0 18px 32px rgba(0,0,0,0.22);
  transition:transform 220ms var(--bounce), box-shadow 220ms var(--bounce);
}
.puff-btn:hover{
  transform:scale(1.06) translateY(-2px);
  box-shadow:
    0 3px 0 rgba(255,255,255,0.55) inset,
    0 -8px 16px rgba(194,24,91,0.55) inset,
    0 9px 0 #9c1450,
    0 18px 26px rgba(194,24,91,0.45),
    0 28px 50px rgba(0,0,0,0.28);
}
.puff-btn.ghost{
  background:linear-gradient(145deg,#ffd9b3,#ffb578 60%,#ff8a3d);
  color:#3a1409;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.5) inset,
    0 -6px 12px rgba(194,24,91,0.3) inset,
    0 6px 0 #c2185b,
    0 12px 18px rgba(194,24,91,0.3),
    0 18px 32px rgba(0,0,0,0.18);
}

/* ---- inflatable katana ---- */
.inflatable-katana{
  position:absolute;right:-30px;bottom:-40px;width:340px;height:340px;
  transform:rotate(-32deg);pointer-events:none;opacity:0.92;
  animation:katana-float 6s ease-in-out infinite;
}
@keyframes katana-float{0%,100%{transform:rotate(-32deg) translateY(0);}50%{transform:rotate(-32deg) translateY(-14px);}}
.katana-blade{
  position:absolute;left:60px;top:0;width:34px;height:230px;
  border-radius:18px 18px 8px 8px;
  background:
    radial-gradient(60% 40% at 30% 25%, rgba(255,255,255,0.85), transparent 60%),
    linear-gradient(95deg,#ffe7cf,#ffd9b3 30%,#ffb578 70%,#ff8a3d);
  -webkit-mask-image:repeating-linear-gradient(to bottom, #000 0 4px, rgba(0,0,0,0.78) 4px 6px);
  mask-image:repeating-linear-gradient(to bottom, #000 0 4px, rgba(0,0,0,0.78) 4px 6px);
  box-shadow:0 0 24px rgba(255,138,61,0.6), 6px 8px 18px rgba(194,24,91,0.4);
}
.katana-guard{
  position:absolute;left:34px;top:222px;width:86px;height:22px;border-radius:14px;
  background:
    radial-gradient(50% 40% at 30% 25%, rgba(255,255,255,0.8), transparent 60%),
    linear-gradient(145deg,#ff7d92,#ff5a6e 50%,#c2185b);
  box-shadow:0 6px 0 #9c1450, 0 12px 18px rgba(0,0,0,0.25);
}
.katana-handle{
  position:absolute;left:62px;top:236px;width:30px;height:120px;border-radius:16px;
  background:
    radial-gradient(55% 35% at 30% 22%, rgba(255,255,255,0.8), transparent 60%),
    linear-gradient(145deg,#ffb578,#ff8a3d 55%,#c2185b);
  box-shadow:0 8px 0 #9c1450, 0 16px 24px rgba(0,0,0,0.28);
}

/* ---- quest log ---- */
.cell-quest{display:flex;flex-direction:column;}
.quest-window{
  flex:1;overflow:hidden;position:relative;border-radius:16px;
  background:rgba(42,18,8,0.82);
  box-shadow:0 0 0 1.5px rgba(255,242,220,0.18) inset, 0 -4px 14px rgba(0,0,0,0.4) inset;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  padding:0 0.8rem;
}
.quest-track{
  list-style:none;font-family:"JetBrains Mono",monospace;font-size:0.78rem;
  letter-spacing:0.04em;color:#ffd9b3;
  animation:scroll-up 30s linear infinite;
  padding-top:1rem;
}
.quest-track li{padding:0.5rem 0;border-bottom:1px dashed rgba(255,217,179,0.18);text-transform:uppercase;}
.q-date{display:inline-block;min-width:3.6em;color:var(--glitch-cyan);font-weight:700;}
.char-glitch{color:var(--coral);font-weight:700;}
@keyframes scroll-up{from{transform:translateY(0);}to{transform:translateY(-50%);}}

/* ---- mascot / prop forge ---- */
.cell-mascot{display:flex;flex-direction:column;}
.prop-stage{flex:1;position:relative;}
.prop{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.8rem;
  opacity:0;transform:scale(0.9);transition:opacity .5s ease, transform .5s var(--bounce);
}
.prop.prop-active{opacity:1;transform:scale(1);}
.prop.prop-glitch{transform:translateX(10px) scale(1);}
.prop figcaption{
  font-family:"JetBrains Mono",monospace;font-size:0.72rem;letter-spacing:0.06em;
  text-transform:uppercase;color:#3a1409;text-align:center;
}
.prop-art{width:130px;height:130px;animation:prop-bob 4s ease-in-out infinite;filter:drop-shadow(8px 14px 18px rgba(194,24,91,0.4));}
@keyframes prop-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

.prop-sword{
  clip-path:polygon(45% 0,55% 0,58% 60%,72% 62%,72% 72%,55% 72%,55% 100%,45% 100%,45% 72%,28% 72%,28% 62%,42% 60%);
  background:
    radial-gradient(40% 30% at 30% 22%, rgba(255,255,255,0.9), transparent 60%),
    linear-gradient(145deg,#ffe7cf,#ffb578 45%,#ff8a3d 70%,#c2185b);
}
.prop-helmet{
  clip-path:circle(50% at 50% 42%);
  border-radius:50%;
  background:
    radial-gradient(38% 30% at 30% 22%, rgba(255,255,255,0.92), transparent 60%),
    radial-gradient(circle at 50% 60%, #c2185b 0 30%, transparent 31%),
    linear-gradient(145deg,#ff9f6a,#ff7d92 50%,#c2185b);
}
.prop-fist{
  clip-path:polygon(20% 35%,80% 35%,86% 55%,80% 100%,20% 100%,14% 55%);
  border-radius:24px;
  background:
    radial-gradient(40% 28% at 28% 22%, rgba(255,255,255,0.9), transparent 60%),
    repeating-linear-gradient(95deg, rgba(194,24,91,0.25) 0 14px, transparent 14px 28px),
    linear-gradient(145deg,#ffb07d,#ff8a3d 50%,#c2185b);
}
.prop-bow{
  clip-path:polygon(0 28%,42% 50%,42% 28%,58% 28%,58% 50%,100% 28%,100% 72%,58% 50%,58% 72%,42% 72%,42% 50%,0 72%);
  background:
    radial-gradient(40% 30% at 30% 22%, rgba(255,255,255,0.9), transparent 60%),
    linear-gradient(145deg,#ff8fa1,#ff5a6e 50%,#c2185b);
}
.prop-dots{display:flex;gap:0.4rem;justify-content:center;margin-top:0.6rem;}
.prop-dots button{
  width:9px;height:9px;border-radius:50%;border:none;cursor:crosshair;
  background:rgba(42,18,8,0.4);transition:all .2s var(--bounce);
}
.prop-dots button.on{background:#fff2dc;transform:scale(1.5);box-shadow:0 0 0 2px var(--magenta-deep);}

/* ---- workshop polaroids ---- */
.cell-workshop{display:flex;flex-direction:column;}
.polaroid-strip{
  flex:1;display:flex;gap:1.1rem;overflow-x:auto;padding:0.6rem 0.2rem 1rem;
  scroll-snap-type:x mandatory;
}
.polaroid{
  scroll-snap-align:start;flex:0 0 220px;
  background:#fff2dc;border-radius:14px;padding:0.7rem 0.7rem 0.4rem;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.6) inset,
    0 8px 0 #d99a7a,
    0 14px 22px rgba(194,24,91,0.3),
    0 22px 40px rgba(0,0,0,0.2);
  transform:rotate(1.4deg);
  transition:transform .25s var(--bounce);
  position:relative;
}
.polaroid:nth-child(even){transform:rotate(-1.5deg);}
.polaroid:hover{transform:rotate(0deg) scale(1.05) translateY(-6px);z-index:5;}
.polaroid::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:2px 0 0 rgba(255,0,255,0.18) inset, -2px 0 0 rgba(0,255,255,0.18) inset;
}
.poly-photo{
  height:140px;border-radius:8px;margin-bottom:0.5rem;position:relative;overflow:hidden;
}
.poly-photo::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px);
}
.poly-1{background:linear-gradient(135deg,#ffb578,#ff8a3d 50%,#c2185b);}
.poly-2{background:linear-gradient(135deg,#ff9f6a,#ff5a6e 55%,#c2185b);}
.poly-3{background:linear-gradient(135deg,#ffd9b3,#ff8a3d 60%,#9c1450);}
.poly-4{background:linear-gradient(135deg,#ff8fa1,#ff5a6e 50%,#861248);}
.poly-5{background:linear-gradient(135deg,#ffb07d,#ff7d92 55%,#c2185b);}
.poly-6{background:linear-gradient(135deg,#ffc999,#ff8a3d 45%,#c2185b);}
.poly-cap{font-size:0.78rem;line-height:1.35;color:#3a1409;font-family:"Commissioner",sans-serif;}

/* ---- missing texture cell ---- */
.cell-missing{
  display:flex;align-items:center;justify-content:center;
  background:#000;
  box-shadow:var(--inflate-shadow);
}
.cell-missing::before{display:none;}
.missing-checker{
  position:absolute;inset:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%, #ff00ff 0deg 90deg, #000000 90deg 180deg);
  background-size:64px 64px;
}
.missing-label{
  position:relative;z-index:2;
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:0.95rem;
  letter-spacing:0.12em;text-transform:uppercase;color:#fff;
  background:#000;padding:0.4rem 0.8rem;border-radius:6px;
  box-shadow:2px 0 0 #ff00ff, -2px 0 0 #00ffff;
}

/* missing-cell can be swapped onto any area at runtime */
.cell-missing.at-quest{grid-area:quest;}
.cell-missing.at-mascot{grid-area:mascot;}
.cell-missing.at-missing{grid-area:missing;}
.cell.is-missingified{
  background:#000;
}
.cell.is-missingified > *{display:none;}
.cell.is-missingified::before{display:none;}
.cell.is-missingified::after{
  content:"[texture missing]";
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-conic-gradient(from 0deg at 50% 50%, #ff00ff 0deg 90deg, #000000 90deg 180deg);
  background-size:64px 64px;
  font-family:"JetBrains Mono",monospace;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:#fff;text-shadow:0 0 8px #000, 2px 0 0 #00ffff, -2px 0 0 #ff00ff;
}

/* ---- enlist strip ---- */
.enlist-strip{
  margin:clamp(2rem,5vw,4rem) auto 2rem;
  padding:clamp(1.6rem,4vw,3rem) clamp(1.2rem,5vw,4rem);
  max-width:1100px;
  border-radius:32px;
  background:var(--inflate-bg);
  box-shadow:var(--inflate-shadow);
  position:relative;overflow:hidden;
}
.enlist-strip::before{
  content:"";position:absolute;inset:0;opacity:0.08;pointer-events:none;
  background-image:
    linear-gradient(90deg, transparent 0 6px, #2a1a14 6px 7px, transparent 7px 44px),
    linear-gradient(0deg, transparent 0 6px, #2a1a14 6px 7px, transparent 7px 44px);
  background-size:44px 44px;
}
.enlist-inner{position:relative;z-index:2;max-width:60ch;}
.enlist-title{
  font-weight:800;font-stretch:125%;font-variation-settings:"wght" 800;
  font-size:clamp(1.8rem,4.5vw,3.4rem);line-height:1;letter-spacing:-0.02em;
  color:#fff2dc;margin-bottom:0.6rem;
  text-shadow:1px 1px 0 #ffb578,2px 2px 0 #ff8a3d,4px 4px 0 #c2185b,6px 6px 0 #9c1450,10px 10px 22px rgba(0,0,0,0.3);
}
.enlist-strip p{color:#3a1409;margin-bottom:1rem;}
.enlist-form{display:flex;gap:0.8rem;flex-wrap:wrap;}
.enlist-form input{
  flex:1;min-width:200px;padding:0.85rem 1.1rem;border-radius:16px;border:none;
  font-family:"JetBrains Mono",monospace;font-size:0.9rem;letter-spacing:0.04em;
  background:rgba(42,18,8,0.85);color:#ffd9b3;
  box-shadow:0 0 0 1.5px rgba(255,242,220,0.2) inset, 0 -4px 12px rgba(0,0,0,0.4) inset;
  cursor:crosshair;
}
.enlist-form input::placeholder{color:rgba(255,217,179,0.5);}
.enlist-note{
  margin-top:0.9rem;font-family:"JetBrains Mono",monospace;font-size:0.78rem;
  letter-spacing:0.06em;text-transform:uppercase;color:#3a1409;
}

/* ---- footer ---- */
.site-foot{
  max-width:1500px;margin:0 auto;padding:1.5rem clamp(1rem,4vw,3.5rem);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.6rem;
  font-family:"JetBrains Mono",monospace;font-size:0.74rem;letter-spacing:0.06em;
  text-transform:uppercase;color:rgba(42,26,20,0.7);
}
.foot-glyphs{color:var(--magenta-deep);}

/* ---- responsive: keep bento, never single column ---- */
@media (max-width:900px){
  .bento{
    grid-template-columns:1.3fr 1fr;
    grid-template-rows:300px 220px 280px 220px;
    grid-template-areas:
      "hero hero"
      "quest mascot"
      "workshop workshop"
      "missing mascot";
  }
  .cell-missing.at-mascot,.cell-missing.at-quest,.cell-missing.at-missing{grid-area:missing;}
  .inflatable-katana{width:220px;height:220px;right:-50px;bottom:-50px;}
}
@media (max-width:560px){
  .bento{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "hero hero"
      "quest mascot"
      "workshop workshop"
      "missing missing";
  }
  .cell-hero{grid-column:1 / -1;min-height:340px;}
  .cell-workshop{grid-column:1 / -1;}
  .cell-missing{grid-column:1 / -1;min-height:120px;}
  .topnav{font-size:0.72rem;gap:0.6rem;}
  .inflatable-katana{opacity:0.4;}
}