/* FEAR FILES — 80s small-town-horror look: red neon serif, VHS grain, typewriter case files */
@font-face{font-family:'Display';src:url(fonts/playfair-display-900.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Typer';src:url(fonts/special-elite-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Mono';src:url(fonts/space-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Mono';src:url(fonts/space-mono-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#050507;--bg2:#0b0b0f;--card:#0f0f14;--card2:#15141a;
  --ink:#e9e4da;--ink2:#b9b3a8;--dim:#7d7883;--line:#26262e;--line2:#3a3944;
  --red:#ff1f2b;--red2:#c4121c;--red3:#5a0a10;--glow:rgba(255,31,43,.55);
  --ok:#ffd27a;
  --sans:'Mono',ui-monospace,Menlo,monospace;--typer:'Typer','Courier New',monospace;--display:'Display',Georgia,serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--bg);color-scheme:dark}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--red);color:#0a0203}
a{color:var(--red)}

/* ---- atmosphere ---- */
#scene{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;transition:opacity .8s}
.crt{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 4px);mix-blend-mode:multiply;animation:crt 6s steps(1) infinite}
.crt::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.35;animation:grain .4s steps(2) infinite}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-6px,4px)}100%{transform:translate(5px,-5px)}}
@keyframes crt{0%,96%{opacity:1}97%{opacity:.75}98%{opacity:1}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,transparent 45%,rgba(0,0,0,.65) 100%)}
.flash{position:fixed;inset:0;z-index:60;pointer-events:none;background:#fff;opacity:0}
.flash.go{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:.95;background:#fff}12%{opacity:.6;background:#ff1f2b}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.crt,.crt::after{animation:none}}

/* ---- header ---- */
.top{position:relative;z-index:2;padding:clamp(28px,6vh,60px) 20px 10px;text-align:center}
.title{font-family:var(--display);font-weight:900;font-size:clamp(46px,12vw,112px);line-height:.95;letter-spacing:.04em;text-transform:uppercase;color:#1a0407;
  -webkit-text-stroke:1.5px var(--red);display:inline-flex;gap:.02em;
  text-shadow:0 0 4px rgba(255,31,43,.9),0 0 14px rgba(255,31,43,.6),0 0 40px rgba(255,31,43,.35),0 0 90px rgba(255,31,43,.2)}
.title span{display:inline-block;animation:flick 7s infinite}
.title span.gap{width:.32em}
.title span:nth-child(2){animation-delay:-1.3s}.title span:nth-child(3){animation-delay:-3.1s}.title span:nth-child(5){animation-delay:-5.4s}
.title span:nth-child(7){animation-delay:-2.2s}.title span:nth-child(9){animation-delay:-4.6s}.title span:nth-child(10){animation-delay:-.7s}
@keyframes flick{0%,89%,100%{opacity:1}90%{opacity:.35}91%{opacity:1}94%{opacity:.6}95%{opacity:1}}
.tag{margin-top:12px;font-size:11px;letter-spacing:.34em;color:var(--ink2);text-transform:uppercase}
.tag::before,.tag::after{content:"— ";color:var(--red)}
.tag::after{content:" —"}

.courage{max-width:720px;margin:26px auto 0;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 18px;border:1px solid var(--line);background:linear-gradient(180deg,#141318,#0d0d11);text-align:left}
.courage__lvl{font-family:var(--display);font-size:34px;line-height:1;color:var(--red);text-shadow:0 0 12px var(--glow)}
.courage__lvl small{display:block;font:10px/1 var(--sans);letter-spacing:.3em;color:var(--dim);margin-bottom:6px}
.courage__rank{font-family:var(--typer);font-size:17px;text-transform:uppercase;letter-spacing:.06em}
.courage__bar{height:6px;background:#1a1a20;margin-top:8px;position:relative;overflow:hidden}
.courage__bar i{position:absolute;inset:0;width:var(--p,0%);background:linear-gradient(90deg,var(--red2),var(--red));box-shadow:0 0 12px var(--glow);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.courage__xp{font-size:11px;letter-spacing:.2em;color:var(--dim);margin-top:6px}
.courage__stats{display:grid;gap:4px;text-align:right;font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.courage__stats b{color:var(--ink);font-weight:700}

/* ---- tabs ---- */
.tabs{position:relative;z-index:3;display:flex;justify-content:center;gap:6px;padding:20px 12px 8px}
.tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:1px solid var(--line);color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.22em;position:relative;transition:.15s;background:rgba(5,5,7,.7)}
.tab__ico{font-size:15px;line-height:1}
.tab:hover{color:var(--ink);border-color:var(--line2)}
.tab.is-on{color:var(--red);border-color:var(--red);box-shadow:0 0 18px rgba(255,31,43,.25),inset 0 0 18px rgba(255,31,43,.08);text-shadow:0 0 8px var(--glow)}
.tab__n{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#0a0203;font-size:11px;font-weight:700;font-style:normal;display:grid;place-items:center;box-shadow:0 0 10px var(--glow)}
@media (max-width:760px){
  .tabs{position:fixed;left:0;right:0;bottom:0;padding:8px 8px calc(8px + var(--safe-b));background:linear-gradient(180deg,rgba(5,5,7,0),rgba(5,5,7,.96) 30%);z-index:20}
  .tab{flex:1;justify-content:center;padding:12px 6px;font-size:11px;letter-spacing:.16em}
  .tab__ico{display:none}
  .tab__n{top:-6px;right:6px}
  main{padding-bottom:calc(96px + var(--safe-b))}
}

/* ---- main ---- */
main{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:10px 16px 60px}
.view{display:none;animation:fade .35s ease-out}
.view.is-on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vhead{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:18px 0 14px}
.vhead h2{font-family:var(--typer);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.vhead h2::before{content:"// ";color:var(--red)}
.vhead p{font-size:11px;color:var(--dim);letter-spacing:.1em}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border:1px solid var(--red);color:var(--red);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:.15s;box-shadow:inset 0 0 14px rgba(255,31,43,.1);text-shadow:0 0 8px var(--glow);white-space:nowrap}
.btn:hover{background:var(--red);color:#0a0203;text-shadow:none;box-shadow:0 0 26px rgba(255,31,43,.55)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--red);color:#0a0203;text-shadow:none;box-shadow:0 0 20px rgba(255,31,43,.4)}
.btn.primary:hover{background:#ff4650;box-shadow:0 0 34px rgba(255,31,43,.7)}
.btn.ghost{border-color:var(--line2);color:var(--ink2);text-shadow:none;box-shadow:none}
.btn.ghost:hover{background:var(--card2);color:var(--ink)}
.btn.danger{border-color:var(--line2);color:var(--dim);text-shadow:none;box-shadow:none}
.btn.danger:hover{border-color:var(--red);color:var(--red);background:transparent}
.btn.sm{padding:9px 13px;font-size:11px;letter-spacing:.16em}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--line2)}
.link:hover{color:var(--red);border-color:var(--red)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between;align-items:center}

/* ---- case file cards ---- */
.grid{display:grid;gap:14px}
.file{position:relative;display:block;width:100%;text-align:left;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);padding:18px 18px 16px;transition:.2s;overflow:hidden}
.file::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2)}
.file.active::before{background:var(--red);box-shadow:0 0 12px var(--glow)}
.file.cleared::before{background:var(--ok)}
.file:hover{border-color:rgba(255,31,43,.6);box-shadow:0 0 0 1px rgba(255,31,43,.25),0 0 28px rgba(255,31,43,.18);transform:translateY(-1px)}
.file__no{font-size:10px;letter-spacing:.28em;color:var(--dim);display:flex;justify-content:space-between;gap:10px}
.file__no b{color:var(--ink2);font-weight:700}
.file__name{font-family:var(--typer);font-size:clamp(22px,5.4vw,28px);text-transform:uppercase;letter-spacing:.03em;margin:8px 0 6px;color:var(--ink);line-height:1.15}
.file.cleared .file__name{color:var(--ink2);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.file__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:11px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.file__note{margin-top:10px;font-size:13px;color:var(--ink2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stamp{position:absolute;right:14px;top:14px;transform:rotate(-12deg);font-family:var(--typer);font-size:18px;letter-spacing:.2em;color:var(--red);border:3px double var(--red);padding:4px 10px;text-shadow:0 0 10px var(--glow);opacity:.9;mix-blend-mode:screen}
.stamp.gold{color:var(--ok);border-color:var(--ok);text-shadow:0 0 10px rgba(255,210,122,.6)}

.meter{display:inline-flex;gap:3px;align-items:end;height:16px}
.meter i{width:6px;background:#1c1c23;height:100%;border-radius:1px}
.meter i.on{background:var(--red);box-shadow:0 0 6px var(--glow)}
.meter i.on.hi{background:#ff5a40}
.meter.sm{height:12px}.meter.sm i{width:5px}
.pill{display:inline-block;padding:3px 8px;border:1px solid var(--line2);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.pill.red{border-color:var(--red);color:var(--red);text-shadow:0 0 8px var(--glow)}
.pill.gold{border-color:var(--ok);color:var(--ok)}
.pill.dim{color:var(--dim)}

/* ---- missions ---- */
.mission{position:relative;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);padding:16px 18px}
.mission.today{border-color:rgba(255,31,43,.65);box-shadow:0 0 24px rgba(255,31,43,.18)}
.mission.done{opacity:.8}
.mission__top{display:flex;justify-content:space-between;gap:10px;align-items:start;font-size:10px;letter-spacing:.26em;color:var(--dim);text-transform:uppercase}
.mission__fear{font-family:var(--typer);font-size:20px;text-transform:uppercase;color:var(--red);text-shadow:0 0 10px var(--glow);margin:6px 0 4px}
.mission__step{font-size:15px;color:var(--ink);line-height:1.45}
.mission__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 16px;margin:12px 0 2px;font-size:12px;color:var(--ink2)}
.mission__facts b{display:block;font-size:10px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase;font-weight:400;margin-bottom:2px}
.mission__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mission__story{margin-top:10px;padding:10px 12px;border-left:2px solid var(--line2);color:var(--ink2);font-size:13px;white-space:pre-wrap}
.when{font-weight:700;color:var(--ink)}
.when.soon{color:var(--red);text-shadow:0 0 8px var(--glow)}
.when.late{color:var(--ok)}

/* ---- empty ---- */
.empty{border:1px dashed var(--line2);padding:34px 22px;text-align:center;color:var(--dim)}
.empty h3{font-family:var(--typer);font-size:22px;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.empty p{font-size:13px;max-width:380px;margin:0 auto 18px;line-height:1.6}

/* ---- broadcast ---- */
.signal{border:1px solid var(--line);padding:16px 18px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;background:linear-gradient(180deg,rgba(255,31,43,.06),transparent)}
.signal__dot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--glow);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.signal__n{font-family:var(--display);font-size:32px;line-height:1;color:var(--ink)}
.signal__n small{font:11px/1 var(--sans);letter-spacing:.2em;color:var(--dim);margin-left:10px;text-transform:uppercase}
.signal__top{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{padding:5px 10px;border:1px solid var(--line2);font-size:11px;letter-spacing:.1em;color:var(--ink2);text-transform:uppercase;transition:.15s}
.chip:hover,.chip.is-on{border-color:var(--red);color:var(--red)}
.search{display:flex;gap:8px;margin:14px 0}
.search input{flex:1}
.tx{position:relative;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);padding:16px 18px 14px}
.tx::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.012) 6px 7px)}
.tx__top{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
.tx__top b{color:var(--ink2);font-weight:700}
.tx__fear{font-family:var(--typer);font-size:22px;text-transform:uppercase;color:var(--red);text-shadow:0 0 10px var(--glow);margin:6px 0 8px;line-height:1.15}
.tx__story{color:var(--ink);font-size:14px;line-height:1.55;white-space:pre-wrap}
.tx__advice{margin-top:10px;padding:10px 12px;border-left:2px solid var(--red);color:var(--ink2);font-size:13px;white-space:pre-wrap}
.tx__advice b{display:block;font-size:10px;letter-spacing:.24em;color:var(--red);font-weight:400;margin-bottom:3px;text-transform:uppercase}
.tx__facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:11px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.tx__facts b{color:var(--ink2);font-weight:700}
.tx__acts{display:flex;gap:8px;margin-top:14px;align-items:center}
.react{padding:9px 14px;border:1px solid var(--line2);font-size:11px;letter-spacing:.14em;color:var(--ink2);text-transform:uppercase;transition:.15s}
.react:hover{border-color:var(--red);color:var(--red)}
.react.is-on{border-color:var(--red);color:var(--red);background:rgba(255,31,43,.08);text-shadow:0 0 8px var(--glow)}
.react b{margin-left:6px;font-weight:700}
.flag{margin-left:auto;font-size:10px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.flag:hover{color:var(--red)}
.more{text-align:center;margin:18px 0}

/* ---- forms ---- */
label.f{display:block;margin-bottom:16px}
label.f>span,.f__lab{display:block;font-family:var(--typer);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin-bottom:7px}
label.f>span em,.f__lab em{font-style:normal;color:var(--dim);letter-spacing:.08em;font-family:var(--sans);font-size:11px;text-transform:none;margin-left:8px}
input[type=text],input[type=datetime-local],input[type=date],input[type=search],textarea,select{width:100%;padding:12px 13px;background:#09090c;border:1px solid var(--line2);color:var(--ink);outline:0;transition:.15s;border-radius:0;-webkit-appearance:none;appearance:none}
input:focus,textarea:focus,select:focus{border-color:var(--red);box-shadow:0 0 0 1px rgba(255,31,43,.3),0 0 18px rgba(255,31,43,.18)}
textarea{min-height:92px;resize:vertical;line-height:1.5}
select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
input[type=datetime-local]{color-scheme:dark;min-height:46px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.range{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
input[type=range]{width:100%;accent-color:var(--red);height:28px}
.range output{font-family:var(--display);font-size:30px;color:var(--red);text-shadow:0 0 12px var(--glow);min-width:44px;text-align:right;line-height:1}
.range__words{font-size:11px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-top:4px}
.seg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.seg button{padding:10px 4px;border:1px solid var(--line2);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);line-height:1.25}
.seg button b{display:block;font-family:var(--display);font-size:18px;color:var(--ink2);margin-bottom:2px}
.seg button.is-on{border-color:var(--red);color:var(--red);box-shadow:inset 0 0 14px rgba(255,31,43,.12)}
.seg button.is-on b{color:var(--red);text-shadow:0 0 10px var(--glow)}
.hint{font-size:12px;color:var(--dim);line-height:1.5;margin:-8px 0 16px}
.err{color:var(--red);font-size:12px;letter-spacing:.06em;margin:-8px 0 14px;min-height:1em}

/* ---- sheet ---- */
.backdrop{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);animation:fade .2s}
.sheet{position:fixed;z-index:31;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 24px));max-height:min(88dvh,860px);overflow:auto;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 0 0 1px rgba(255,31,43,.2),0 30px 80px rgba(0,0,0,.8),0 0 60px rgba(255,31,43,.12);padding:22px 22px 24px;animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (max-width:760px){
  .sheet{top:auto;bottom:0;left:0;transform:none;width:100%;max-height:92dvh;border-left:0;border-right:0;border-bottom:0;padding-bottom:calc(24px + var(--safe-b));animation:up .25s cubic-bezier(.2,.9,.3,1)}
  @keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}
.sheet__head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:18px}
.sheet__kicker{font-size:10px;letter-spacing:.3em;color:var(--red);text-transform:uppercase;text-shadow:0 0 8px var(--glow)}
.sheet__title{font-family:var(--typer);font-size:24px;text-transform:uppercase;letter-spacing:.03em;line-height:1.15;margin-top:4px}
.sheet__x{width:36px;height:36px;border:1px solid var(--line2);color:var(--dim);font-size:16px;flex:none}
.sheet__x:hover{border-color:var(--red);color:var(--red)}
.sheet__acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}
.sheet .sub{margin:20px 0 10px;font-size:10px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}
.sheet .sub::before{content:"// ";color:var(--red)}
.detail{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-bottom:6px}
.detail__note{color:var(--ink2);font-size:14px;line-height:1.55;white-space:pre-wrap;margin:8px 0 14px}
.ladder{display:grid;gap:8px}
.ladder .mission{padding:12px 14px}
.history{font-size:12px;color:var(--dim);letter-spacing:.06em}
.history b{color:var(--ink)}
.callout{border:1px solid var(--line2);padding:12px 14px;color:var(--ink2);font-size:13px;line-height:1.55;margin-bottom:16px;background:rgba(255,255,255,.02)}
.callout b{color:var(--red)}
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;text-align:center;margin-bottom:16px}
.compare b{display:block;font-family:var(--display);font-size:38px;line-height:1;color:var(--ink)}
.compare b.red{color:var(--red);text-shadow:0 0 12px var(--glow)}
.compare small{font-size:10px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
.compare .arrow{color:var(--red);font-size:26px}

/* ---- reward overlay ---- */
.reward{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,rgba(80,6,12,.9),rgba(5,5,7,.98) 70%);padding:20px;overflow:auto;animation:fade .3s}
.reward__box{text-align:center;max-width:520px;width:100%}
.reward__k{font-size:11px;letter-spacing:.4em;color:var(--ink2);text-transform:uppercase}
.reward__stamp{display:inline-block;margin:16px 0 8px;font-family:var(--display);font-size:clamp(40px,11vw,76px);line-height:.95;text-transform:uppercase;color:#1a0407;-webkit-text-stroke:1.5px var(--red);text-shadow:0 0 6px rgba(255,31,43,.9),0 0 22px rgba(255,31,43,.6),0 0 60px rgba(255,31,43,.35);transform:rotate(-6deg) scale(2.4);opacity:0;animation:slam .55s cubic-bezier(.1,1.3,.3,1) .25s forwards}
@keyframes slam{to{transform:rotate(-6deg) scale(1);opacity:1}}
.reward__fear{font-family:var(--typer);font-size:22px;text-transform:uppercase;color:var(--ink);margin:10px 0 18px}
.reward__xp{font-family:var(--display);font-size:52px;line-height:1;color:var(--ok);text-shadow:0 0 18px rgba(255,210,122,.55)}
.reward__xp small{display:block;font:11px/1 var(--sans);letter-spacing:.3em;color:var(--dim);margin-top:8px}
.reward__badges{display:grid;gap:8px;margin:22px auto 0;max-width:420px;text-align:left}
.badge{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;border:1px solid var(--ok);padding:10px 12px;background:rgba(255,210,122,.05);animation:fade .4s both}
.badge i{font-style:normal;font-size:22px;filter:drop-shadow(0 0 8px rgba(255,210,122,.6))}
.badge b{display:block;font-family:var(--typer);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ok)}
.badge span{font-size:12px;color:var(--ink2)}
.badge.lvl{border-color:var(--red);background:rgba(255,31,43,.06)}.badge.lvl b{color:var(--red)}
.reward__acts{display:grid;gap:10px;margin-top:26px}
.reward__note{font-size:12px;color:var(--dim);margin-top:14px;line-height:1.5}

/* ---- badges shelf ---- */
.shelf{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.shelf .b{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);padding:6px 10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.shelf .b.got{border-color:var(--ok);color:var(--ok)}
.shelf .b i{font-style:normal;font-size:14px}
.shelf .b:not(.got) i{filter:grayscale(1);opacity:.4}

/* ---- alert ---- */
.alert{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:50;width:min(640px,calc(100% - 20px));background:#2a0509;border:1px solid var(--red);box-shadow:0 0 30px rgba(255,31,43,.35);padding:14px 16px;font-size:13px;line-height:1.5;color:var(--ink)}
.alert b{color:var(--red);letter-spacing:.2em;font-size:11px;display:block;margin-bottom:4px}
.alert ol{margin:6px 0 10px 18px}
.alert code{display:block;margin-top:8px;padding:8px;background:#000;color:var(--ink2);font-size:11px;word-break:break-all;user-select:all}
.alert .row{margin-top:10px}

/* ---- intro ---- */
.intro{position:fixed;inset:0;z-index:5;background:transparent;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:clamp(28px,8vh,90px) 20px calc(clamp(24px,6vh,64px) + var(--safe-b))}
.intro__bottom{background:radial-gradient(ellipse at 50% 60%,rgba(0,0,0,.55),transparent 70%);padding:20px 10px 0}
.intro__bottom .intro__text{margin-top:0}
.intro>div{position:relative;z-index:2}
.intro .title{font-size:clamp(50px,13vw,132px);transition:opacity .08s}
.intro__text{text-shadow:0 2px 12px #000,0 0 30px #000}
.intro .tag{color:var(--ink)}
body.introing .top,body.introing .tabs,body.introing main,body.introing .foot{visibility:hidden}
body.introing{overflow:hidden}
.intro .btn.primary{box-shadow:0 0 30px rgba(255,31,43,.6)}
.intro .title{opacity:0;animation:tin 1.6s ease-out .3s forwards}
@keyframes tin{0%{opacity:0;filter:blur(8px);letter-spacing:.3em}60%{opacity:1;filter:blur(0)}100%{opacity:1;letter-spacing:.04em}}
.intro .tag{opacity:0;animation:fade .6s 1.6s forwards}
.intro__text{max-width:460px;margin:26px auto 0;color:var(--ink2);font-size:14px;line-height:1.7;opacity:0;animation:fade .6s 2s forwards}
.intro .btn{margin-top:28px;opacity:0;animation:fade .6s 2.4s forwards}
.intro.out{animation:fadeout .5s forwards}
@keyframes fadeout{to{opacity:0;visibility:hidden}}
.crt{z-index:3}.vignette{z-index:3}

/* ---- footer ---- */
.foot{position:relative;z-index:2;text-align:center;padding:10px 16px 30px;font-size:10px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;align-items:center}
.foot__dot{color:var(--red)}
@media (max-width:760px){.foot{padding-bottom:calc(100px + var(--safe-b))}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* phone: courage card in two rows */
@media (max-width:560px){
  .courage{grid-template-columns:auto 1fr;gap:10px 14px;padding:12px 14px}
  .courage__stats{grid-column:1/-1;grid-template-columns:repeat(3,1fr);text-align:left;border-top:1px solid var(--line);padding-top:10px;font-size:10px}
  .courage__stats b{display:block;font-size:16px}
  .courage__rank{font-size:15px}
}