@font-face{font-family:Alegreya;font-weight:500;font-display:swap;src:url(fonts/alegreya-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Alegreya;font-weight:500;font-display:swap;src:url(fonts/alegreya-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:Alegreya;font-weight:800;font-display:swap;src:url(fonts/alegreya-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Alegreya;font-weight:800;font-display:swap;src:url(fonts/alegreya-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:Alegreya;font-weight:900;font-display:swap;src:url(fonts/alegreya-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Alegreya;font-weight:900;font-display:swap;src:url(fonts/alegreya-latin-ext-900-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}

:root{
  --paper:#efdcae; --paper2:#e6cd93; --card:#fbf0d2; --rim:#fdf6e0;
  --ink:#2a1a12; --ink2:#5a4232;
  --red:#b8161c; --red2:#8e0f14; --gold:#e6a90c; --gold2:#b98207;
  --teal:#1c5c60; --teal2:#134549; --night:#16273f;
  --ok:#2c7a3f; --bad:#b8161c;
  --cut:0 0 0 3px var(--rim),3px 5px 0 3px rgba(42,26,18,.28);
  --cut-sm:0 0 0 2px var(--rim),2px 3px 0 2px rgba(42,26,18,.25);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%,rgba(255,250,225,.65),transparent 46%),
    radial-gradient(circle at 86% 88%,rgba(180,130,60,.20),transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
  color:var(--ink);font-family:Alegreya,Georgia,"Times New Roman",serif;font-weight:500;font-size:19px;line-height:1.3;
  overscroll-behavior-y:none;
}
#app{min-height:100vh;min-height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 12px)}
h1,h2,p{margin:0}
button,a.btn{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-decoration:none}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* folk border */
.folk{height:30px;flex:none;width:calc(100% + 32px);margin:0 -16px;background-repeat:repeat-x;background-position:center;background-size:60px 30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23b8161c' d='M30 3c3 4 7 6 7 11 0 4-3 7-7 11-4-4-7-7-7-11 0-5 4-7 7-11z'/%3E%3Cpath fill='%23e6a90c' d='M30 9c1.600 2 3 3 3 5.500S31.500 18.500 30 20c-1.500-1.500-3-3-3-5.500S28.400 11 30 9z'/%3E%3Cpath fill='%231c5c60' d='M8 15c4-5 9-5 12-1-4 3-8 5-12 1zM52 15c-4-5-9-5-12-1 4 3 8 5 12 1z'/%3E%3Ccircle cx='3' cy='15' r='2.400' fill='%23b8161c'/%3E%3Ccircle cx='57' cy='15' r='2.400' fill='%23b8161c'/%3E%3C/g%3E%3C/svg%3E")}

/* the hussar */
.hussar{position:relative;aspect-ratio:1;flex:none}
.hussar img,.hussar svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hussar.wobble{animation:wobble .5s steps(5)}
.hussar.grow{animation:pop .45s steps(4)}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.07) rotate(-1.5deg)}100%{transform:scale(1)}}

/* home */
.home{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.logo{font-weight:900;font-size:clamp(46px,14.6vw,70px);line-height:.95;color:var(--red);letter-spacing:-.5px;margin-top:4px;
  text-shadow:2px 0 var(--rim),-2px 0 var(--rim),0 2px var(--rim),0 -2px var(--rim),3px 4px 0 rgba(42,26,18,.28)}
.tag{font-size:21px;font-weight:800;color:var(--ink)}
.home .hussar{width:min(66vw,300px,31vh);margin-top:-2px;filter:drop-shadow(3px 5px 0 rgba(42,26,18,.22))}
.actions{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:auto;padding-top:8px}
.btn{display:block;width:100%;min-height:58px;padding:13px 16px;font-weight:800;font-size:21px;text-align:center;line-height:1.15;
  background:var(--card);color:var(--ink);box-shadow:var(--cut);border-radius:14px 10px 16px 9px/10px 14px 9px 16px;transition:transform .08s steps(2)}
.btn:active{transform:translate(2px,3px) rotate(-.4deg)}
.btn.primary{background:var(--red);color:#fff6dd}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.teal{background:var(--teal);color:#fff6dd}
.btn small{display:block;font-weight:500;font-size:16px;margin-top:2px;opacity:.92}
.tiny{font-size:15px;color:var(--ink2);text-align:center}
.tiny a{color:inherit}

/* trail of seven */
.top{display:flex;align-items:center;gap:10px;flex:none}
.back{width:44px;height:44px;flex:none;border-radius:50%;background:var(--card);box-shadow:var(--cut-sm);font-size:24px;font-weight:800;line-height:1}
.trail{flex:1;display:flex;justify-content:space-between;align-items:center;position:relative}
.trail::before{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:3px dotted var(--ink2);opacity:.5}
.step{position:relative;width:30px;height:30px;border-radius:50%;background:var(--paper2);display:grid;place-items:center;font-weight:900;font-size:15px;
  box-shadow:0 0 0 2px var(--rim);color:var(--ink2)}
.step.now{background:var(--gold);color:var(--ink);transform:scale(1.2);animation:bob 1.1s steps(2) infinite}
.step.yes{background:var(--ok);color:#fff}
.step.no{background:var(--ink2);color:#f4e6c6}
@keyframes bob{50%{transform:scale(1.2) translateY(-2px)}}

/* question */
.play{flex:1;display:flex;flex-direction:column;gap:10px;padding-top:10px}
.head{display:flex;align-items:center;gap:8px;min-height:0}
.portrait{position:relative;flex:none;width:var(--pw);height:var(--pw);--pw:clamp(92px,15.5vh,116px);border-radius:50%;overflow:hidden;
  background:repeating-conic-gradient(var(--gold) 0 15deg,#f0c23c 15deg 30deg);box-shadow:var(--cut-sm)}
.portrait .hussar{position:absolute;width:calc(var(--pw)*1.95);left:calc(var(--pw)*-.47);top:calc(var(--pw)*-.5)}
.say{flex:1;background:var(--card);box-shadow:var(--cut-sm);border-radius:12px;padding:8px 12px;position:relative;font-size:16px;line-height:1.2}
.say b{display:block;font-weight:900;color:var(--red);font-size:18px}
.say::before{content:"";position:absolute;left:-9px;top:50%;margin-top:-8px;border:8px solid transparent;border-left:0;border-right-color:var(--card)}
.qcard{background:var(--night);color:#fff6dd;border-radius:12px 16px 10px 14px/14px 10px 16px 12px;padding:14px 16px;box-shadow:var(--cut);
  font-size:clamp(20px,5.6vw,24px);font-weight:800;line-height:1.2;transform:rotate(-.35deg)}
.qcard.legend{background:var(--teal)}
.qcard small{display:block;font-size:15px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.opts{display:flex;flex-direction:column;gap:11px;padding:2px 0 6px}
.opt{display:block;width:100%;text-align:left;min-height:54px;padding:11px 14px;background:var(--card);font-size:19px;font-weight:800;line-height:1.18;
  box-shadow:var(--cut-sm);border-radius:13px 9px 15px 9px/9px 13px 9px 15px}
.opt:nth-child(even){transform:rotate(.3deg);border-radius:9px 14px 9px 13px/14px 9px 13px 9px}
.opt:nth-child(odd){transform:rotate(-.25deg)}
.opt.long{font-weight:500;font-size:18px}
.opt:active:not(:disabled){transform:translate(1px,2px)}
.opt:disabled{cursor:default;opacity:1}
.opt.right{background:var(--ok);color:#fff}
.opt.wrong{background:var(--bad);color:#fff}
.opt.dim{opacity:.55}
.opt .chip{display:inline-block;font-size:13px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;padding:1px 7px;border-radius:6px;margin-bottom:4px;background:var(--gold);color:var(--ink)}
.opt .chip.fact{background:var(--teal);color:#fff}

/* the sheet that comes up after an answer */
.veil{position:fixed;inset:0;background:rgba(42,26,18,.35);z-index:5;animation:fade .16s steps(2)}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;z-index:6;left:50%;bottom:0;width:min(520px,100%);transform:translateX(-50%);max-height:88vh;max-height:88dvh;overflow:auto;
  background:var(--card);border-radius:18px 18px 0 0;box-shadow:0 -3px 0 3px var(--rim),0 -8px 0 3px rgba(42,26,18,.2);
  padding:0 16px calc(env(safe-area-inset-bottom) + 14px);animation:rise .22s steps(4)}
@keyframes rise{from{transform:translate(-50%,100%)}}
.sheet .art{width:calc(100% + 32px);margin:0 -16px 10px;display:block;aspect-ratio:16/8.6;object-fit:cover;border-radius:18px 18px 0 0;background:var(--night)}
.verdict{font-weight:900;font-size:25px;line-height:1.1;color:var(--ok)}
.verdict.no{color:var(--bad)}
.verdict.calm{color:var(--night)}
.correct{font-weight:800;font-size:18px;margin-top:2px}
.why{font-size:18px;margin:6px 0 10px}
.src{font-size:15px;color:var(--ink2);margin-bottom:12px;overflow-wrap:anywhere}
.src a{color:inherit}
.row{display:flex;gap:10px}
.row .btn{flex:1;font-size:18px;min-height:56px;padding:10px}

/* result */
.result{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:6px}
.result .hussar{width:min(60vw,250px,32vh);filter:drop-shadow(3px 5px 0 rgba(42,26,18,.22))}
.score{font-weight:900;font-size:52px;line-height:1;color:var(--red)}
.rank{font-weight:900;font-size:clamp(25px,7vw,30px);line-height:1.1}
.note{font-size:18px;color:var(--ink2);max-width:30em}
.coins{font-weight:800;font-size:17px}
.films{width:100%;display:flex;flex-direction:column;gap:9px;margin:10px 0 2px;text-align:left}
.films h2{font-size:20px;font-weight:900}
.film{display:flex;align-items:center;gap:11px;padding:7px;background:var(--card);box-shadow:var(--cut-sm);border-radius:11px;color:inherit;text-decoration:none;font-size:17px;font-weight:800;line-height:1.15}
.film img{width:58px;height:58px;object-fit:cover;border-radius:7px;flex:none;background:var(--night)}
.film .mark{margin-left:auto;font-size:20px;flex:none;padding-right:4px}
.share{width:100%;display:flex;flex-direction:column;gap:11px;margin-top:8px}
.copied{font-weight:800;color:var(--teal);min-height:22px;font-size:17px}

/* picture book */
.book{flex:1;display:flex;flex-direction:column;gap:10px;padding-top:10px}
.book h1{font-weight:900;font-size:30px;line-height:1.05}
.book p{font-size:18px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding-bottom:10px}
.tile{display:block;position:relative;aspect-ratio:9/16;border-radius:9px;overflow:hidden;box-shadow:var(--cut-sm);background:var(--night)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile.locked img{filter:grayscale(1) sepia(.35) brightness(.72)}
.tile .lock{position:absolute;left:0;right:0;bottom:0;padding:6px 4px;font-size:14px;font-weight:800;color:#fff6dd;background:rgba(22,39,63,.82);text-align:center;line-height:1.1}

/* how to play */
.how{background:var(--card);box-shadow:var(--cut-sm);border-radius:12px;padding:12px 14px;font-size:18px}
.how p+p{margin-top:8px}

@media (max-height:640px){
  .portrait{--pw:80px}
  .say{font-size:15px}
  .opt{min-height:48px;padding:8px 12px;font-size:18px}
  .qcard{padding:10px 13px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}