/* ============================================================
   DESIGN TOKENS — change colours, fonts, timing here
   ============================================================ */
:root {
  --text: #999999;          /* ALL text that used to be white */
  --text-hero: #ffffff;     /* hero headline (set to #fff to restore the white from the mockup) */
  --panel: #141414;
  --panel-2: #171717;
  --green: #22b573;
  --crimson: #af033e;
  --hot: #c8104b;
  --pale: #c9d5e6;          /* result-card paper */

  --f-pixel: "Handjet", "Courier New", monospace;                       /* names, numbers, buttons, card text */
  --f-title: "KyivType Titling", Georgia, serif;                         /* headlines, questions, small caps labels */
  --f-body: Arial, "Liberation Sans", Helvetica, sans-serif;             /* body */

  --gutter: clamp(16px, 2.1vw, 40px);
  --ease: cubic-bezier(.2,.8,.2,1);
  --vh: 100dvh;
}

/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:"Handjet";font-weight:800;font-display:swap;src:url(../fonts/handjet-800.woff2) format("woff2")}
@font-face{font-family:"Handjet";font-weight:500;font-display:swap;src:url(../fonts/handjet-500.woff2) format("woff2")}
@font-face{font-family:"KyivType Titling";font-weight:400;font-display:swap;src:url(../fonts/kyivtype-titling.woff2) format("woff2")}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;color:var(--text);-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);font-size:18px;line-height:1.3;min-height:var(--vh);overflow:hidden;-webkit-font-smoothing:antialiased;color:var(--text)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:8px;top:-60px;z-index:100;background:#fff;color:#000;padding:8px 12px}
.skip:focus{top:8px}

/* ---------- background ---------- */
#bg{position:fixed;inset:0;z-index:0;background:#000;overflow:hidden}
#bg img,#bg canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#bg img{transition:opacity .9s var(--ease),object-position 1s var(--ease),transform-origin 1s var(--ease)}
.bg-home{object-position:50% 60%}
.bg-lens{opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
body.gl-home .bg-home{visibility:hidden}
body[data-screen="home"].gl-home .bg-lens{opacity:1}
.bg-forest{opacity:0;object-position:50% 0;transform:scale(1.24);transform-origin:50% 0}
.bg-void{position:absolute;inset:0;opacity:0;transition:opacity .8s;background:linear-gradient(#0c0c0c 0%,#1a1a1a 42%,#272727 100%)}
.bg-floor{position:absolute;inset:0;opacity:0;transition:opacity .8s;background:url(../img/ui/pattern.webp) center bottom/cover no-repeat;mix-blend-mode:multiply}
.bg-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#000 0,rgba(0,0,0,.55) 14%,transparent 34%,transparent 70%,rgba(0,0,0,.35));transition:opacity .8s}
.grain{position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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")}
body[data-screen="home"] .bg-home{opacity:1}
body[data-screen="quiz"] .bg-forest,body[data-screen="result"] .bg-forest{opacity:1}
body[data-screen="result"] .bg-forest{object-position:50% 100%;transform-origin:50% 100%;transform:scale(1.12)}
body[data-screen="quiz"] .bg-home,body[data-screen="result"] .bg-home,body[data-screen="bestiary"] .bg-home{opacity:0}
body[data-screen="bestiary"] .bg-void,body[data-screen="bestiary"] .bg-floor{opacity:1}
body[data-screen="bestiary"] .bg-shade{opacity:.25}

/* ---------- HUD ---------- */
.hud{position:fixed;z-index:20;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:flex-start;padding:max(var(--gutter),env(safe-area-inset-top)) var(--gutter) 0;pointer-events:none}
.hud>*{pointer-events:auto}
/* on the scrolling result page the card slides under the logo — a soft dark veil keeps the logo readable */
.hud::before{content:"";position:fixed;inset:0 0 auto 0;height:190px;background:linear-gradient(#000 0,rgba(0,0,0,.72) 50%,transparent);pointer-events:none;opacity:0;transition:opacity .4s}
body[data-screen="result"] .hud::before{opacity:1}
.skullbtn{width:70px;height:70px;border-radius:50%;display:block;transition:transform .3s var(--ease),filter .3s}
.skullbtn:hover{transform:rotate(-8deg) scale(1.06);filter:brightness(1.5)}
.skullbtn img{width:100%;height:100%}
.menu{position:relative}
.mininav{position:absolute;left:0;top:0;width:min(360px,calc(100vw - 2*var(--gutter)));padding:92px 22px 24px;border-radius:36px;background:rgba(23,23,23,.96);backdrop-filter:blur(8px);z-index:-1;transform-origin:35px 35px}
.mininav ul{display:grid;gap:0;margin-bottom:26px}
.mininav li a{font-size:20px}
.mininav__desc{color:var(--text);font-size:17px;line-height:1.35;margin-bottom:18px}
.mininav__work{color:var(--text);font-size:17px;line-height:1.5}
.mininav__work a{font-size:17px}

/* link hover: letters roll over to crimson, arrow head slides in, dotted underline draws itself */
.roll{position:relative;display:inline-flex;align-items:center;color:var(--green);line-height:1.3;padding-bottom:3px}
.roll__arrow{flex:none;width:0;height:15px;margin-right:0;opacity:0;background:var(--green);-webkit-mask:url(../img/ui/arrow-head.svg) center/contain no-repeat;mask:url(../img/ui/arrow-head.svg) center/contain no-repeat;transition:width .35s var(--ease),margin .35s var(--ease),opacity .2s}
.roll__t{display:inline-flex}
.roll .ch{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em;vertical-align:top}
.roll .ch.sp{width:.28em}
.roll .ch i{display:block;font-style:normal;transition:transform .5s var(--ease);transition-delay:calc(var(--i)*18ms)}
.roll .ch i+i{color:var(--hot)}
.roll::after{display:none;content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:repeating-linear-gradient(90deg,var(--hot) 0 5px,transparent 5px 9px);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.roll:hover .roll__arrow,.roll:focus-visible .roll__arrow{width:11px;margin-right:9px;opacity:1}
.roll:hover .ch i,.roll:focus-visible .ch i{transform:translateY(-100%)}
.roll:hover::after,.roll:focus-visible::after{transform:scaleX(1)}
.mininav__work .sep{display:inline-block;margin:0 .45em;color:var(--text)}

.brand{position:absolute;left:50%;transform:translateX(-50%);top:max(var(--gutter),env(safe-area-inset-top));display:block}
.brand__img{width:clamp(92px,6.8vw,130px);height:auto}
.brand__img--uk{display:none}
html[lang="uk"] .brand__img--uk{display:block}
html[lang="uk"] .brand__img--en{display:none}
.lang{font-family:var(--f-title);font-size:18px;letter-spacing:.05em;padding:14px 8px;position:relative;margin-top:14px;text-transform:uppercase;color:var(--text)}
.lang::before,.lang::after{content:"";position:absolute;left:50%;width:1px;height:12px;background:center/100% 100% no-repeat}
.lang::before{top:-6px;background-image:url(../img/ui/line-up.svg)}
.lang::after{bottom:-6px;background-image:url(../img/ui/line-down.svg)}
.lang:hover{color:var(--green)}

/* ---------- screens ---------- */
main{position:relative;z-index:5}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden;padding:0 var(--gutter)}
.screen[hidden]{display:none}

/* buttons — arrows are her SVGs (img/ui/arrow-left|right.svg) */
.btn{--al:url("../img/ui/arrow-left.svg");--ar:url("../img/ui/arrow-right.svg");
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:104px;padding:0 18px;font-family:var(--f-pixel);font-weight:800;font-size:clamp(32px,2.1vw,40px);text-transform:uppercase;letter-spacing:.01em;line-height:1;transition:transform .35s var(--ease),background .3s,color .3s}
.btn span{display:inline-block;transform-origin:center;white-space:nowrap;padding-top:.08em}
.btn--dark{background:var(--panel);color:var(--green)}
.btn--dark::before,.btn--dark::after,.btn--white::before,.btn--white::after{content:"";flex:none;width:50px;height:64px;background:center/contain no-repeat;transition:transform .4s var(--ease)}
.btn--dark::before{background-image:var(--ar)}.btn--dark::after{background-image:var(--al)}
.btn--white::before{background-image:var(--al)}.btn--white::after{background-image:var(--ar)}
.btn--dark:hover,.btn--white:hover{transform:translateY(-3px)}
.btn--dark:hover::before{transform:translateX(8px)}.btn--dark:hover::after{transform:translateX(-8px)}
.btn--white:hover::before{transform:translateX(-8px)}.btn--white:hover::after{transform:translateX(8px)}
.btn--white{background:#fff;color:var(--green)}
.btn--glass{color:var(--text);border:1.5px solid rgba(255,255,255,.75);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(7px) saturate(1.4);backdrop-filter:blur(7px) saturate(1.4);min-height:104px}
#screen-home .btn--glass,#againBtn,#moreBtn{color:#fff}
.btn--glass:hover{background:rgba(255,255,255,.22);transform:translateY(-3px)}

/* ---------- HOME ---------- */
#screen-home{justify-content:flex-start;padding-top:clamp(170px,20vh,250px);text-align:center}
.hero__title{font-family:var(--f-title);font-weight:400;color:var(--text-hero);text-transform:uppercase;font-size:clamp(36px,4.65vw,89px);line-height:1.04;letter-spacing:.005em;}
.hero__title .line{display:block;overflow:hidden;padding:.06em .04em 0}
.hero__title .line>span{display:inline-block}
.hero__cta{display:grid;gap:30px;width:min(338px,100%);margin-top:clamp(24px,6vh,56px)}
.credit{position:fixed;left:20px;bottom:14px;display:block;line-height:0;transition:transform .35s var(--ease),filter .3s}
.credit img{width:243px;height:29px}
.credit:hover{transform:translateY(-3px);filter:brightness(1.35)}

/* ---------- QUIZ ---------- */
#screen-quiz{justify-content:center;padding-top:110px;padding-bottom:110px}
.qcard{width:min(680px,100%);background:#060606;padding:36px 20px 20px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.qcard__top{display:flex;justify-content:center;align-items:baseline;position:relative}
.qnum{font-family:var(--f-pixel);font-weight:800;display:flex;align-items:baseline;gap:10px;color:var(--text)}
.qnum b{font-size:88px;line-height:1;display:inline-block}
.qnum i{font-style:italic;font-size:22px;color:var(--text);font-family:var(--f-body);font-weight:400}
.textbtn{position:absolute;left:0;top:0;color:var(--text);font-size:22px;padding:6px 10px}
.textbtn:hover{color:var(--green)}
#qBack{font-size:0;width:44px;height:52px;padding:0;top:-6px;left:-4px;background:currentColor;-webkit-mask:url(../img/ui/arrow-left.svg) center/contain no-repeat;mask:url(../img/ui/arrow-left.svg) center/contain no-repeat}
.qtext{font-family:var(--f-title);font-weight:400;color:var(--text);text-transform:uppercase;font-size:clamp(25px,2.1vw,40px);line-height:1.15;text-align:center;margin:20px 10px 34px;min-height:1.2em;display:grid;place-items:center;outline:0}
.answers{display:grid;gap:3px}
.ans{position:relative;text-align:left;background:var(--panel);padding:16px 18px 16px 62px;font-size:19px;line-height:1.25;color:var(--text);transition:background .25s,color .25s,transform .3s var(--ease);width:100%}
/* radio: grey dot -> blood drop (img/ui/blood-drop.svg) */
.ans::before,.ans::after{content:"";position:absolute;left:20px;top:50%;width:22px;height:22px;margin-top:-11px;transition:opacity .25s,transform .4s var(--ease)}
.ans::before{border-radius:50%;background:#8e8e8e}
.ans::after{background:url(../img/ui/blood-drop.svg) center/contain no-repeat;opacity:0;transform:translateY(-8px) scale(.4)}
.ans:focus-visible,.ans[aria-pressed="true"]{color:var(--hot);background:#1a1010}
.ans:focus-visible::before,.ans[aria-pressed="true"]::before{opacity:0;transform:scale(.3)}
.ans:focus-visible::after,.ans[aria-pressed="true"]::after{opacity:1;transform:none}
/* hover only for real mice, and not on a freshly rendered question until the mouse moves (otherwise the answer under a resting pointer/finger looks pre-selected) */
@media (hover:hover){
  .answers:not(.nohover) .ans:hover{color:var(--hot);background:#1a1010}
  .answers:not(.nohover) .ans:hover::before{opacity:0;transform:scale(.3)}
  .answers:not(.nohover) .ans:hover::after{opacity:1;transform:none}
}
/* stepper = the crimson line on top of the card; it fills as you go */
.qprog{position:absolute;left:0;right:0;top:0;height:4px;background:transparent;overflow:hidden}
.qprog__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--crimson)}

/* ---------- RESULT ---------- */
/* the result screen is NOT fitted to the viewport height: full-size card, the page scrolls */
#screen-result{justify-content:flex-start;padding-top:208px;padding-bottom:56px}
.result{--cw:min(510px,calc(100vw - 2*var(--gutter)));position:relative;width:var(--cw);flex:none;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.result__card{position:relative;min-width:0;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.result__card canvas{display:block;width:100%;height:auto}
#cardLens{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .2s}
.result__card.lensing #cardLens{opacity:1}
.result__side{position:absolute;left:calc(100% + 26px);top:0;width:min(370px,calc((100vw - var(--cw))/2 - 26px - var(--gutter)));display:grid;gap:20px}
.btn--wide{width:100%}
.btn--wide,.result__side .btn{min-height:104px}
.sharewrap{position:relative}
.sharewrap .btn{width:100%}
.sharemenu{position:absolute;z-index:8;left:0;right:0;top:calc(100% + 8px);background:#0d0d0d;border:1px solid rgba(255,255,255,.18);display:grid;box-shadow:0 24px 60px rgba(0,0,0,.6);transform-origin:top}
.sharemenu[hidden]{display:none}
.sharemenu>*{padding:14px 20px 12px;text-align:left;font-family:var(--f-pixel);font-weight:800;font-size:28px;text-transform:uppercase;line-height:1;color:var(--text);cursor:pointer;display:block;border-top:1px solid rgba(255,255,255,.08);transition:background .2s,color .2s,padding .3s var(--ease)}
.sharemenu>*:first-child{border-top:0}
.sharemenu>*:hover,.sharemenu>*:focus-visible{background:#1a1a1a;color:var(--green);padding-left:28px}

/* ---------- BESTIARY ---------- */
#screen-bestiary{justify-content:flex-start;padding:0;overflow:hidden}
/* text block: left edge on the page centre, right edge on the right margin, 160px paragraph indent */
.best__intro{align-self:stretch;margin:clamp(132px,15vh,170px) var(--gutter) 0 50%;text-indent:160px;text-align:left;font-family:var(--f-title);font-weight:400;text-transform:uppercase;color:var(--text);font-size:clamp(20px,1.9vw,36px);line-height:1.4}
.strip{--img:clamp(180px,min(14.6vw,27vh),280px);--pad:calc(var(--img)*.0714);--lab:calc(var(--img)*.3214);
  position:relative;width:100%;margin-top:clamp(10px,3vh,40px);perspective:1500px;perspective-origin:50% 40%;overflow:hidden;padding:60px 0 90px}
.strip__track{display:flex;gap:4px;width:max-content;will-change:transform}
/* card = #141414 plate (304×383 at full size): 12px padding + 12px gap, square blurred picture (blur bleeds past the square), name */
.strip{--pad:calc(var(--img)*.0429)}
.pcard{position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:var(--pad);flex:none;width:calc(var(--img) + 2*var(--pad));padding:var(--pad);background:#141414;overflow:visible;box-shadow:0 22px 46px rgba(0,0,0,.6);will-change:transform;cursor:pointer;text-align:left}
.pcard__img{position:relative;flex:none;width:var(--img);height:var(--img);overflow:visible}
.pcard__img img{display:block;width:100%;height:100%;object-fit:cover;filter:blur(12px);transition:filter .6s var(--ease)}
/* hover: only part of the blur lifts — the intrigue stays */
.pcard:hover .pcard__img img,.pcard:focus-visible .pcard__img img{filter:blur(7px)}
.pcard.is-open .pcard__img img,.pcard.is-open:hover .pcard__img img{filter:none}
.pcard__name{display:block;margin:0;height:calc(var(--img)*.2393);font-family:var(--f-pixel);font-weight:800;font-variation-settings:"ELSH" 2,"ELGR" 1;font-size:calc(var(--img)*.2143);line-height:calc(var(--img)*.2393);letter-spacing:0;text-transform:uppercase;color:var(--text);white-space:nowrap;transition:color .25s}
.pcard:hover .pcard__name,.pcard:focus-visible .pcard__name{color:var(--green)}
.pcard__q{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-pixel);font-weight:800;font-size:calc(var(--img)*.52);color:#fff;text-shadow:5px 5px 0 rgba(0,0,0,.22);padding-bottom:.06em}
.best__ctrl{display:flex;justify-content:center;gap:70px;position:relative;z-index:2}
.arrowbtn{width:50px;height:64px;position:relative;color:#bdbdbd;transition:color .2s,transform .3s var(--ease)}
.arrowbtn::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--arr) center/contain no-repeat;mask:var(--arr) center/contain no-repeat}
.arrowbtn--l{--arr:url("../img/ui/arrow-left.svg")}
.arrowbtn--r{--arr:url("../img/ui/arrow-right.svg")}
.arrowbtn:hover{color:var(--green)}
.arrowbtn--l:hover{transform:translateX(-6px)}.arrowbtn--r:hover{transform:translateX(6px)}
#eye{position:fixed;left:0;top:0;width:92px;height:92px;margin:-46px 0 0 -46px;z-index:60;pointer-events:none;opacity:0;transform:scale(.4)}
#eye img{width:100%;height:100%}
.strip.eye-on,.strip.eye-on *{cursor:none!important}

/* ---------- POPUP ---------- */
.spirit{position:fixed;inset:0;width:100vw;max-width:none;height:var(--vh);max-height:none;margin:0;border:0;padding:0;background:var(--c,#32893f);color:var(--text);overflow:hidden}
.spirit:not([open]){display:none}
.spirit::backdrop{background:#000}
.spirit__bar{position:absolute;z-index:5;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:max(22px,env(safe-area-inset-top)) var(--gutter) 0;font-family:var(--f-title);font-size:20px;text-transform:uppercase;color:#111}
.navtxt{display:flex;align-items:center;gap:14px;font-family:inherit;text-transform:inherit;padding:8px 4px;transition:opacity .2s;color:#111}
.navtxt:hover{opacity:.55}
.navtxt--l::before,.navtxt--r::after{content:"";width:42px;height:54px;margin:-14px 0;background:#000;-webkit-mask:var(--a) center/contain no-repeat;mask:var(--a) center/contain no-repeat}
.navtxt--l{--a:url("../img/ui/arrow-left.svg")}
.navtxt--r{--a:url("../img/ui/arrow-right.svg")}
/* picture spans the full screen width, pinned to the top edge; the bottom may be cropped. No mask. */
.spirit__img{position:absolute;left:0;top:0;width:100vw;height:auto;max-width:none;transform-origin:50% 0;user-select:none;pointer-events:none}
.spirit__info{position:absolute;left:var(--gutter);bottom:40px;width:min(445px,34vw);display:grid;gap:10px;z-index:3}
.box{background:var(--panel);color:var(--text);padding:12px 14px;font-size:19px;line-height:1.22}
.box .lbl{display:block;font-family:var(--f-title);text-transform:uppercase;font-size:19px;color:var(--text);margin-bottom:2px}
.box .lbl::after{content:":"}
.box--name{padding:10px 14px 12px}
.box--name h2{font-family:var(--f-pixel);font-weight:800;font-size:clamp(48px,5vw,72px);line-height:1;text-transform:uppercase;color:var(--text);transform-origin:left;white-space:nowrap}
.box--name .ipa{display:block;font-size:19px;color:var(--text);margin-top:6px}
.spirit__cta{position:absolute;right:0;bottom:0;z-index:3;width:min(400px,34vw);transform:rotate(-4deg) translate(26px,24px);transform-origin:bottom right;display:grid;gap:14px;justify-items:center;padding:40px 0 0;text-align:center}
.spirit__cta .q{font-family:var(--f-title);text-transform:uppercase;font-size:20px;color:#143d22}
.spirit__cta .q::before,.spirit__cta .q::after{content:"✛";display:block;font-size:13px}
.spirit__cta .btn{width:100%;min-height:160px;padding-top:20px;pointer-events:none;transition:background .3s}
.spirit__cta:hover .btn{background:#000}

/* ---------- veil (watercolour wash) / loader / toast ---------- */
#veil{position:fixed;inset:0;z-index:50;pointer-events:none;visibility:hidden}
#veil.flat{background:#000}
#veil canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#veil.flat canvas{display:none}
.veil__txt{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;font-family:var(--f-pixel);font-weight:800;font-size:40px;color:var(--green);text-transform:uppercase;opacity:0;text-align:center}
.veil__txt b{font-size:72px;color:var(--text);letter-spacing:.04em;font-weight:800}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);background:#fff;color:#111;padding:10px 18px;opacity:0;z-index:70;pointer-events:none;transition:.35s var(--ease);font-size:17px}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:1100px){
  .result__side{position:static;width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);order:2}
  .result__side .btn{min-width:0;padding-inline:8px;text-align:center}
  .btn--wide{order:3}
}
@media (max-width:760px){
  body{font-size:17px}
  .skullbtn{width:56px;height:56px}
  .brand__img{width:84px}
  .lang{margin-top:8px}
  .mininav{padding-top:76px;border-radius:28px;transform-origin:28px 28px}
  .btn{min-height:84px;font-size:34px}
  .btn--glass{min-height:84px}
  .btn--dark::before,.btn--dark::after,.btn--white::before,.btn--white::after{width:34px;height:44px}
  #screen-home{justify-content:flex-start;padding-top:150px;padding-bottom:30px}
  .hero__title{font-size:clamp(38px,11.4vw,60px)}
  .hero__cta{margin-top:auto;margin-bottom:62px;width:100%;gap:14px}
  .credit{left:12px;bottom:12px}
  .credit img{width:200px;height:auto}
  #screen-quiz{padding-top:104px;justify-content:flex-start}
  .qcard{padding:28px 12px 14px}
  .qnum b{font-size:60px}
  .qtext{font-size:27px;margin:14px 4px 20px}
  .ans{padding:14px 14px 14px 52px;font-size:18px}
  .ans::before,.ans::after{left:16px}
  #screen-result{padding-top:100px}
  .result{--cw:100%;width:min(680px,100%);gap:12px}
  .result__side{gap:12px}
  .btn--wide,.result__side .btn{min-height:76px;font-size:clamp(20px,6.4vw,28px);line-height:1}
  .result__side .btn::before,.result__side .btn::after{display:none}
  .sharemenu>*{font-size:26px}
  /* bestiary becomes a vertical scroll of tilted polaroids */
  #screen-bestiary{overflow-y:auto;overflow-x:hidden;padding:0 var(--gutter) 40px}
  .best__intro{margin:104px 0 0;font-size:19px;text-indent:48px}
  .strip{overflow:visible;perspective:none;padding:26px 4px 20px}
  .strip{--img:min(280px,calc(100vw - 2*var(--gutter) - 28px))}
  .strip__track{width:100%;display:grid;grid-template-columns:1fr;justify-items:center;gap:52px;transform:none!important}
  .pcard{transform:rotate(var(--tilt,-5deg))!important}
  .pcard.dup{display:none}
  .pcard__q{font-size:clamp(70px,22vw,110px)}
  .best__ctrl{display:none}
  .spirit{overflow-y:auto}
  .navtxt--l>span,.navtxt--r>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .spirit__bar{position:fixed;background:linear-gradient(var(--c),transparent);padding-bottom:16px}
  .spirit__img{position:relative;left:auto;top:auto;width:100%;height:auto;margin:0 0 14px}
  .spirit__info{position:relative;left:auto;bottom:auto;width:auto;margin:0 14px 16px}
  .box--name h2{font-size:52px}
  .spirit__cta{position:relative;width:100%;transform:none;padding:6px 14px 28px}
  .spirit__cta .btn{min-height:84px;padding-top:0}
  #eye{display:none}
}
@media (max-height:620px) and (min-width:761px){
  #screen-home{padding-top:130px}.hero__title{font-size:clamp(36px,10vh,70px)}.btn{min-height:76px}.hero__cta{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  #bg img,.btn,.ans,.pcard__img img,.roll .ch i{transition-duration:.01s!important}
}
.sharemenu [hidden]{display:none!important}