@font-face{font-family:'Halu';src:url(assets/fonts/halu.woff2) format('woff2');font-display:block}
@font-face{font-family:'Same';src:url(assets/fonts/same.woff2) format('woff2');font-display:block}
:root{
  --ink:#060606;
  --paper:#ece8df;
  --dim:#8d8a84;
  --red:#d3191f;
  --display:'Halu', Impact, 'Arial Black', sans-serif;
  --sharp:'Same', 'Halu', Impact, sans-serif;
  --type:'Special Elite', 'Courier New', monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#000;color:var(--paper);overflow:hidden;overscroll-behavior:none}
body{font-family:var(--type);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button{touch-action:manipulation}
.hide{display:none !important}

#app{position:fixed;inset:0;margin:0 auto;max-width:480px;background:var(--ink);overflow:hidden;isolation:isolate}
.screen{position:absolute;inset:0;z-index:1;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:calc(24px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));text-align:center}
.screen.on{display:flex;animation:fadein .5s ease both}
.screen.full{padding:0;gap:0}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.4;pointer-events:none}
.bgvid.face{opacity:.22}

/* ---------- global effects ---------- */
.fx-scratch{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:40;pointer-events:none;mix-blend-mode:screen;opacity:.16}
.fx-glitch{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:45;pointer-events:none;mix-blend-mode:screen;opacity:0}
.fx-glitch.on{opacity:.9}
.fx-flash{position:absolute;inset:0;z-index:46;pointer-events:none;background:#fff;opacity:0}
.fx-flash.white{animation:flash .18s steps(2) both}
.fx-flash.red{background:var(--red);animation:flash .35s ease-out both}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:60;opacity:.12;mix-blend-mode:screen;background-size:180px;animation:grain .45s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-6%)}75%{transform:translate(-3%,5%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:59;background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.85) 100%)}

/* screen jolt (random micro glitch + transitions) */
#app.jolt .screen.on{animation:jolt .32s steps(1) both}
@keyframes jolt{
  0%{transform:translate(-6px,0) skewX(4deg);filter:drop-shadow(5px 0 rgba(211,25,31,.9)) drop-shadow(-4px 0 rgba(255,255,255,.5))}
  25%{transform:translate(8px,2px) skewX(-6deg);clip-path:inset(12% 0 30% 0)}
  50%{transform:translate(-3px,-3px);clip-path:inset(0 0 0 0);filter:invert(1)}
  75%{transform:translate(4px,0) scaleY(1.02);filter:drop-shadow(-6px 0 rgba(211,25,31,.9))}
  100%{transform:none;filter:none}
}

/* ---------- type ---------- */
.title{font-family:var(--display);font-weight:400;font-size:clamp(70px,24vw,112px);line-height:.86;color:var(--paper);transform:rotate(-2deg);letter-spacing:.01em}
.title.md{font-size:clamp(58px,18vw,88px)}
.title.sm{font-size:clamp(46px,14.5vw,70px)}
.title.xs{font-size:clamp(40px,12vw,54px);transform:none}
.red-t{color:var(--red)}
.lead{font-size:18px;line-height:1.4;max-width:300px}
.lead.big{font-size:28px}
.sharp{font-family:var(--sharp)}
.fine{font-size:13px;color:var(--dim);line-height:1.5}
.kicker{font-family:var(--sharp);font-size:26px;letter-spacing:.12em;color:var(--red)}
.stat{font-size:15px;line-height:1.5;color:var(--dim);max-width:290px;min-height:45px}
b.r,.r{color:var(--red)}

.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);white-space:pre-line;position:absolute;inset:0;pointer-events:none}
.glitch::before{color:var(--red);animation:gl1 3.2s infinite steps(1)}
.glitch::after{color:#fff;opacity:.6;animation:gl2 2.4s infinite steps(1)}
.glitch.burst::before{animation:gl1 .3s infinite steps(1)}
.glitch.burst::after{animation:gl2 .25s infinite steps(1)}
@keyframes gl1{0%,88%,100%{transform:none;clip-path:inset(0 0 100% 0)}89%{transform:translate(-7px,2px);clip-path:inset(18% 0 58% 0)}92%{transform:translate(6px,-2px);clip-path:inset(62% 0 8% 0)}95%{transform:translate(-3px,0);clip-path:inset(40% 0 40% 0)}}
@keyframes gl2{0%,84%,100%{transform:none;clip-path:inset(0 0 100% 0)}85%{transform:translate(5px,0);clip-path:inset(42% 0 33% 0)}90%{transform:translate(-4px,1px);clip-path:inset(5% 0 80% 0)}}
.flicker{animation:flicker 5s infinite}
@keyframes flicker{0%,18%,21%,24%,61%,63%,100%{opacity:1}19%,23%,62%{opacity:.2}}

/* ---------- camcorder overlay ---------- */
.cam{position:absolute;inset:calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));pointer-events:none;font-family:var(--type);font-size:14px;letter-spacing:.08em;color:rgba(236,232,223,.85);text-shadow:0 0 6px rgba(255,255,255,.35)}
.cam::before,.cam::after{content:"";position:absolute;width:26px;height:26px;border:2px solid rgba(236,232,223,.5)}
.cam::before{left:0;bottom:0;border-right:0;border-top:0}
.cam::after{right:0;bottom:0;border-left:0;border-top:0}
.cam .rec{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px}
.cam .rec i{width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#tc,#tc2{position:absolute;left:0;top:22px;font-size:12px;opacity:.7}
.cam .cam-date{position:absolute;left:34px;bottom:4px;font-size:12px;opacity:.75}
.cam .batt{position:absolute;right:0;top:0;width:30px;height:14px;border:2px solid rgba(236,232,223,.8);padding:2px}
.cam .batt::after{content:"";position:absolute;right:-5px;top:3px;width:3px;height:5px;background:rgba(236,232,223,.8)}
.cam .batt i{display:block;width:22%;height:100%;background:var(--red);animation:blink 1.4s steps(1) infinite}
.cam.small{inset:calc(14px + env(safe-area-inset-top)) 16px auto;height:40px;z-index:3}
.cam.small::before,.cam.small::after{display:none}

/* ---------- buttons ---------- */
.btn{font-family:var(--display);font-size:26px;letter-spacing:.04em;color:var(--ink);background:var(--paper);border:0;padding:15px 26px 13px;min-width:250px;cursor:pointer;
  clip-path:polygon(1% 10%,99% 0,100% 90%,3% 100%);transition:transform .15s,opacity .4s}
.btn:active{transform:scale(.95);filter:drop-shadow(4px 0 var(--red))}
.btn.red{background:var(--red);color:var(--paper)}
.btn.ghost{background:none;color:var(--dim);font-family:var(--type);font-size:14px;min-width:0;padding:8px;text-decoration:underline;clip-path:none}
.btn.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* ---------- intro ---------- */
#introvid,#introc,#welcomevid,#scarevid,#scarec{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.intro-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:clamp(50px,15vw,74px);line-height:.9;color:var(--paper);
  text-shadow:4px 0 var(--red),-3px 0 rgba(255,255,255,.35);padding:0 20px;pointer-events:none;z-index:2}
.intro-text.hit{animation:texthit .4s steps(1) both}
@keyframes texthit{0%{transform:translateY(-50%) translateX(-14px) skewX(12deg);opacity:.4}20%{transform:translateY(-50%) translateX(10px);clip-path:inset(30% 0 20% 0)}40%{transform:translateY(-50%) translateX(-4px);clip-path:none;opacity:1}100%{transform:translateY(-50%)}}
.skip{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));background:none;border:0;color:var(--dim);font-family:var(--type);font-size:13px;text-decoration:underline;padding:8px;z-index:3}

/* ---------- the list (library record) ---------- */
.paper-wrap{position:relative;width:100%;max-width:350px;transform:rotate(1.4deg);filter:drop-shadow(0 18px 22px rgba(0,0,0,.75)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.paper{position:relative;background-color:#e4dccb;background-size:256px;color:#1b1814;padding:20px 18px 18px;text-align:left;overflow:hidden;
  clip-path:polygon(0 .6%,9% 0,21% .9%,34% .2%,47% .8%,61% 0,75% .7%,88% .1%,100% .6%,99.4% 24%,100% 49%,99.5% 75%,100% 99.4%,86% 100%,71% 99.2%,57% 100%,43% 99.3%,28% 100%,14% 99.4%,0 100%,.5% 72%,0 46%,.6% 21%);
  box-shadow:inset 0 0 50px rgba(90,62,25,.38),inset 0 0 8px rgba(70,50,20,.35)}
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,transparent calc(34% - 1px),rgba(0,0,0,.13) 34%,rgba(255,255,255,.35) calc(34% + 1px),transparent calc(34% + 3px)),
  linear-gradient(180deg,transparent calc(67% - 1px),rgba(0,0,0,.12) 67%,rgba(255,255,255,.3) calc(67% + 1px),transparent calc(67% + 3px)),
  linear-gradient(90deg,transparent calc(50% - 1px),rgba(0,0,0,.08) 50%,rgba(255,255,255,.25) calc(50% + 1px),transparent calc(50% + 3px)),
  linear-gradient(170deg,rgba(255,255,255,.12),transparent 40%,rgba(60,40,10,.12))}
.ring{position:absolute;right:-28px;bottom:70px;width:120px;height:120px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,transparent 52%,rgba(110,70,25,.22) 56%,rgba(110,70,25,.1) 60%,transparent 64%)}
.staple{position:absolute;left:22px;top:10px;width:30px;height:5px;background:linear-gradient(#cfcfcf,#7d7d7d);border-radius:2px;transform:rotate(-24deg);box-shadow:0 1px 1px rgba(0,0,0,.6);z-index:3}
.staple::before,.staple::after{content:"";position:absolute;top:3px;width:3px;height:4px;background:#555}
.staple::before{left:1px}.staple::after{right:1px}
.letterhead{display:flex;align-items:center;gap:10px;padding:0 0 9px 26px;border-bottom:1.5px solid rgba(27,24,20,.75)}
.letterhead img{width:40px;height:40px;opacity:.82;mix-blend-mode:multiply}
.lh-text{display:flex;flex-direction:column;font-size:9.5px;line-height:1.35;letter-spacing:.06em;opacity:.85}
.lh-text b{font-size:11px;letter-spacing:.1em}
.conf{position:absolute;right:10px;bottom:12px;z-index:2;font-family:var(--type);font-size:12px;letter-spacing:.14em;color:rgba(185,22,28,.78);border:2px solid rgba(185,22,28,.7);padding:2px 6px;transform:rotate(-9deg);mix-blend-mode:multiply}
.list-h{font-family:var(--display);font-weight:400;font-size:52px;line-height:1;text-align:center;letter-spacing:.02em;margin-top:8px;transform:rotate(-2deg);color:#16130f}
.list-sub{font-size:12px;text-align:center;margin:2px 0 10px;opacity:.7}
.cols,.row{display:grid;grid-template-columns:34px 1fr 66px 22px;gap:6px;align-items:center}
.cols{font-size:9.5px;letter-spacing:.12em;opacity:.6;border-bottom:1px solid rgba(27,24,20,.5);padding-bottom:3px;margin-bottom:2px}
.rows{list-style:none}
.row{height:29px;position:relative;opacity:0;transition:opacity .2s;font-size:13px;border-bottom:1px dotted rgba(27,24,20,.25)}
.row.in{opacity:1}
.row .num{opacity:.8}
.row .name{position:relative;white-space:nowrap;overflow:visible;letter-spacing:.03em}
.row .date{font-size:11px;opacity:.7;letter-spacing:.02em}
.row .bar{position:absolute;left:-4px;top:50%;height:17px;width:calc(100% + 4px);margin-top:-9px;background:#0d0c0b;border-radius:3px 7px 2px 6px;transform-origin:left center;transform:scaleX(0) rotate(-.8deg);transition:transform .26s cubic-bezier(.5,0,.3,1);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%,rgba(0,0,0,.4))}
.row.redact .bar{transform:scaleX(1) rotate(-.8deg)}
.row .x{font-family:var(--display);color:#b9161c;font-size:30px;line-height:1;opacity:0;transform:scale(2.4) rotate(-14deg);transition:all .18s cubic-bezier(.3,1.6,.6,1);text-shadow:0 0 1px rgba(185,22,28,.6)}
.row.taken .x{opacity:1;transform:scale(1) rotate(-8deg)}
.strike{position:absolute;left:30px;right:24px;top:6px;height:18px;width:calc(100% - 54px);overflow:visible;pointer-events:none}
.strike path{fill:none;stroke:#b9161c;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .3s ease-out;vector-effect:non-scaling-stroke;opacity:.85}
.row.taken .strike path{stroke-dashoffset:0}
.row.me{height:58px;margin-top:4px;border-bottom:0;border-top:2px dashed rgba(27,24,20,.45)}
.row.me .num{color:#b9161c;font-size:15px;opacity:1}
.row.me .you{font-family:var(--display);color:#b9161c;font-size:50px;line-height:1;letter-spacing:.04em;text-shadow:0 0 2px rgba(185,22,28,.55),1px 1px 0 rgba(120,10,15,.35)}
.row.me .date{color:#b9161c;opacity:1;font-size:12px}
.list-after{text-align:left;font-size:15px;margin-top:6px;color:#b9161c;min-height:22px}
.paper{padding-bottom:30px}
.shake{animation:shake .5s}
@keyframes shake{10%,90%{transform:rotate(1.4deg) translateX(-2px)}20%,80%{transform:rotate(1.4deg) translateX(4px)}30%,50%,70%{transform:rotate(1.4deg) translateX(-7px)}40%,60%{transform:rotate(1.4deg) translateX(7px)}}

/* your own list design */
.custom-list{position:relative;width:100%;max-width:380px}
.custom-list img{display:block;width:100%;max-height:68vh;object-fit:contain}
.custom-list img.printing{animation:print 2.6s steps(26) both}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.stamp{position:absolute;left:50%;top:86%;transform:translate(-50%,-50%) rotate(-7deg);display:flex;align-items:baseline;gap:10px;color:var(--red);opacity:0;pointer-events:none;white-space:nowrap}
.stamp .stamp-n{font-family:var(--type);font-size:22px}
.stamp .stamp-you{font-family:var(--display);font-size:58px;line-height:1}
.stamp.in{opacity:1;animation:stampin .35s cubic-bezier(.3,1.7,.6,1) both}
@keyframes stampin{from{transform:translate(-50%,-50%) rotate(-20deg) scale(2.6);opacity:0}}

/* ---------- how to ---------- */
#rules-text{display:flex;flex-direction:column;align-items:center;gap:22px}
.rules{list-style:none;counter-reset:r;text-align:left;max-width:320px;display:flex;flex-direction:column;gap:14px}
.rules li{counter-increment:r;position:relative;padding-left:40px;font-size:16px;line-height:1.45}
.rules li::before{content:counter(r);position:absolute;left:0;top:-8px;font-family:var(--display);font-size:36px;color:var(--red)}
.rules-img{display:block;width:100%;max-width:380px;max-height:66vh;object-fit:contain}

/* ---------- game ---------- */
#gamec{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;background:#000}
.creature{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;mix-blend-mode:screen;opacity:0;z-index:1;transition:opacity .25s}
.creature.show{opacity:.6;transition:none}
.popface{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;mix-blend-mode:screen;opacity:0;z-index:1;transform:scale(1.35)}
.hud{position:absolute;left:0;right:0;top:0;padding:calc(12px + env(safe-area-inset-top)) 16px 0;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;z-index:2}
.slots{display:flex;gap:8px}
.slot{width:26px;height:32px;border:2px dashed rgba(236,232,223,.35);transform:rotate(-4deg)}
.slot:nth-child(even){transform:rotate(5deg)}
.slot.got{border:0;background:var(--paper);position:relative;animation:pop .35s cubic-bezier(.3,1.7,.6,1)}
.slot.got::after{content:"X";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);color:var(--red);font-size:24px}
@keyframes pop{from{transform:scale(2.4) rotate(20deg);opacity:0}}
.timer{width:min(260px,70%);height:4px;background:rgba(236,232,223,.15)}
#timebar{height:100%;width:100%;background:var(--paper);transition:background .3s}
#timebar.low{background:var(--red)}
#danger{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(211,25,31,.55) 100%)}
#danger.hit{animation:hit .6s ease-out}
@keyframes hit{0%{opacity:1;background:rgba(211,25,31,.45)}100%{opacity:0}}
#game.quake #gamec{animation:quake .12s steps(2) infinite}
@keyframes quake{0%{transform:translate(2px,-1px)}50%{transform:translate(-2px,2px)}100%{transform:translate(1px,1px)}}
.hint{position:absolute;left:0;right:0;bottom:calc(40px + env(safe-area-inset-bottom));font-family:var(--sharp);font-size:22px;letter-spacing:.12em;color:var(--paper);opacity:.85;pointer-events:none;animation:flicker 3s infinite;z-index:2}

/* ---------- credits ---------- */
.card{max-width:340px;border:1px solid rgba(236,232,223,.2);padding:26px 22px;display:flex;flex-direction:column;gap:14px;text-align:left;background:rgba(255,255,255,.02)}
.card p{font-size:15px;line-height:1.55}
.card .title{text-align:left}
.credit-logo{width:64px;height:64px;opacity:.9}

@media (max-height:700px){
  .paper{padding-top:14px}.list-h{font-size:42px}.row{height:25px;font-size:12px}.row.me{height:50px}.letterhead img{width:32px;height:32px}
}
@media (max-height:640px){
  .screen{gap:14px}
  .row{height:26px}.row.me{height:48px}
  .list-sub{margin-bottom:8px}
  .rules{gap:9px}.rules li{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .flicker,.grain,.hint{animation:none}
  #app.jolt .screen.on{animation:none}
}

/* ---------- win video ---------- */
.winvid{display:block;width:calc(100% + 44px);max-width:480px;aspect-ratio:1;object-fit:cover;margin:0 -22px;transition:opacity .8s,filter .8s;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 84%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 84%,transparent)}
.winvid.done{opacity:1}
.win-after{display:flex;flex-direction:column;align-items:center;gap:20px;opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s;pointer-events:none}
.win-after.show{opacity:1;transform:none;pointer-events:auto}
#win-fallback{display:flex;flex-direction:column;align-items:center;gap:18px}
#win-fallback.hide{display:none}