:root{
  --bg:#13110e; --panel:#1b1814; --rule:#2f2a22; --bone:#ece4d2; --dim:#948a78; --faint:#4b4439;
  --bronze:#d6a55c; --blood:#c2543f; --verd:#74ad90;
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono: ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--bone);font-family:var(--serif)}
/* border-box and dvh: the page is exactly as tall as the visible screen when its content is short, so nothing scrolls for no reason */
body{box-sizing:border-box;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:20px 16px 40px}
main{width:100%;max-width:1040px}
header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:10px}
h1{font-size:22px;font-weight:500;letter-spacing:.04em;margin:0}
h1 small{font-size:13px;color:var(--dim);letter-spacing:0;margin-left:10px;font-style:italic}
.hud{font-family:var(--mono);font-size:12px;color:var(--dim);display:flex;gap:18px}
.hud b{color:var(--bone);font-weight:500}
.pips{letter-spacing:3px}
.pips .on{color:var(--bronze)} .pips .off{color:var(--faint)}

#impression{margin:22px 0 6px;padding:18px 20px;border:1px solid var(--rule);border-left:3px solid var(--blood);background:var(--panel);min-height:92px}
#impression .label{font-family:var(--mono);font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.12em;display:flex;justify-content:space-between}
#impression .text{font-size:23px;line-height:1.35;margin-top:8px}
#impression.hit{animation:hit .35s}
#impression.beaten{border-left-color:var(--verd)}
#impression.beaten .text{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--faint)}
@keyframes hit{0%{transform:translateX(0)}25%{transform:translateX(10px)}60%{transform:translateX(-4px)}100%{transform:translateX(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}70%{transform:translateX(5px)}}

#stage{padding-top:14px}
#form:empty,#typed:empty,#prompt:empty{display:none}
#stg{display:block;width:100%;max-width:640px;margin:0 auto 10px;image-rendering:pixelated;image-rendering:crisp-edges;border-bottom:2px solid var(--rule)}
#togSwing{display:none}
.hud .sep{flex-basis:100%;height:0;padding:0}
.path{max-width:640px;margin:14px auto 0;border:1px solid var(--rule);background:var(--panel);padding:10px 14px;text-align:left;font-size:14.5px;line-height:1.5}
.path a{color:var(--dim)} .path a:hover{color:var(--bone)}
.path b{font-weight:500} .path .ct{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.beyond{opacity:.45}
.words{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:640px;margin:8px auto}
.words button{padding:6px 10px;font-size:18px}
.words button.cut{text-decoration:line-through;color:var(--faint);border-color:var(--faint)}
.pinned{border-left:3px solid var(--bronze)}
.pinned .row2{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.pinned button{font-size:13.5px;padding:5px 10px}
.case{font-size:24px;line-height:1.35;margin:10px auto 4px;max-width:30ch}
.objection{max-width:60ch;margin:0 auto 6px;padding:12px 16px;border-left:3px solid var(--blood);background:var(--panel);font-size:19px;line-height:1.45;text-align:left;font-style:italic}
.tally{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:10px}
.scene{max-width:60ch;margin:6px auto 0;text-align:left;font-size:19px;line-height:1.6}
.scene p{margin:0 0 16px}
.scene blockquote{margin:0 0 18px;padding:4px 0 4px 18px;border-left:3px solid var(--bronze);font-style:italic;color:var(--bone)}
.scene .new{animation:fadeUp .5s}
.scene.hall{text-align:center;max-width:46ch}
.scene.hall .does{font-size:15px;font-style:italic;color:var(--dim);margin-bottom:8px}
.scene.hall .says{font-size:21px;line-height:1.45;margin-bottom:6px}
.bubs{max-width:640px;margin:2px auto 8px;display:flex;flex-direction:column;gap:8px;font-family:var(--serif)}
.bub{position:relative;max-width:84%;background:var(--panel);border:1px solid var(--bronze);border-radius:10px;padding:10px 14px;font-size:18px;line-height:1.4;color:var(--bone);text-align:left;animation:fadeUp .35s}
.bub::before{content:"";position:absolute;top:-7px;left:calc(var(--tail,24px) - 6px);width:12px;height:12px;background:var(--panel);border-left:1px solid var(--bronze);border-top:1px solid var(--bronze);transform:rotate(45deg)}
.bub{min-width:58%;box-sizing:border-box}
.bub.t{align-self:flex-start;margin-left:2%}
.bub.down::before{top:auto;bottom:-7px;transform:rotate(225deg)}
.bub.down.offR::before{bottom:auto;top:calc(50% - 6px);left:auto;right:-7px;transform:rotate(135deg)}   /* said from off the right edge of the stage */
#say .bub.offR{align-self:flex-end}
.untyped{visibility:hidden}
.bub.queued{visibility:hidden}
#gore svg{position:absolute;overflow:visible;transform-origin:0 0;transform:scale(0);animation:splat .22s cubic-bezier(.2,1.5,.4,1) forwards}
#gore i.d{border-radius:2px 2px 50% 50%}
#typed.won{animation:won 1.7s ease-out}
@keyframes won{0%{transform:scale(1)}22%{transform:scale(1.13);color:#fff3d6;text-shadow:0 0 16px #ffd98a,0 0 38px #d6a55c}100%{transform:scale(1);text-shadow:0 0 5px rgba(214,165,92,.45)}}
@media (prefers-reduced-motion:reduce){#typed.won{animation:none}}
.titlecard{text-align:center;margin:26px 0 0} .titlecard h2{font:500 46px/1.05 var(--serif);letter-spacing:.05em;margin:0 0 8px;color:var(--bone)} .titlecard p{font:italic 17px var(--serif);color:var(--dim);margin:0}
#held{position:fixed;z-index:57;transform:translateY(-50%);font:14px var(--serif);padding:9px 11px;min-height:0;white-space:nowrap;color:var(--bone);background:#1d1a16;border:1px solid var(--rule);border-left:3px solid var(--verd,#74ad90);border-radius:2px;box-shadow:0 0 14px rgba(116,173,144,.5);animation:heldin .25s cubic-bezier(.2,1.5,.4,1), heldbob .9s ease-in-out .25s infinite alternate}
@keyframes heldin{from{transform:translateY(-50%) scale(.1)}} @keyframes heldbob{to{margin-top:-5px}}
#quip{position:fixed;left:16px;right:16px;top:52%;text-align:center;font:italic 17px/1.35 var(--serif);color:var(--bone);pointer-events:none;z-index:54;opacity:0}
#quip.on{animation:quip 3s ease-out forwards} @keyframes quip{0%{opacity:0;transform:translateY(6px)}10%,78%{opacity:1;transform:none}100%{opacity:0}}
.aside{font:11.5px var(--mono);letter-spacing:.04em;color:var(--bronze);text-align:center;margin:6px 0 0}
.gone{visibility:hidden!important;pointer-events:none}
.stolen{animation:stolen .8s ease-in forwards;pointer-events:none} @keyframes stolen{30%{transform:translate(-6px,-4px) rotate(-3deg)}100%{transform:translate(16%,-26px) scale(.2) rotate(12deg);opacity:0}}   /* it shrinks away toward him; it must never leave the screen sideways, or a phone widens the page */
.jam{animation:jam .35s} @keyframes jam{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
#consent{position:fixed;left:0;right:0;bottom:0;z-index:58;background:#1d1a16;border-top:1px solid var(--bronze);padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));font:14px/1.4 var(--serif);color:var(--bone);animation:slideup .35s ease-out;box-shadow:0 -12px 30px rgba(0,0,0,.6)}
#consent p{margin:0 0 10px} #consent label{display:flex;gap:10px;align-items:center;padding:7px 0;font-size:15px} #consent input{width:20px;height:20px;accent-color:#d6a55c}
#consent .row{display:flex;gap:8px} #consent button{flex:1;min-height:44px;font-size:15px;text-align:center} #consent button.primary{border-color:var(--bronze);background:#2b2419}
#consent .tiny{display:block;margin:10px auto 0;border:0;background:none;color:var(--faint);font:11px var(--mono);text-decoration:underline;min-height:0;flex:none;width:auto}
@keyframes slideup{from{transform:translateY(100%)}}
#ping{position:fixed;left:10px;right:10px;top:8px;z-index:58;background:#24211d;border:1px solid var(--rule);border-radius:14px;padding:10px 14px;font:13px/1.35 system-ui,sans-serif;color:var(--bone);box-shadow:0 10px 30px rgba(0,0,0,.6);animation:dropdown .4s cubic-bezier(.2,1.3,.4,1);cursor:pointer}
#ping b{font-weight:600} #ping span{float:right;color:var(--dim);font-size:11px} #ping p{margin:2px 0 0}
@keyframes dropdown{from{transform:translateY(-140%)}}
#crash{position:fixed;inset:0;z-index:70;background:rgba(8,8,9,.86);display:flex;align-items:center;justify-content:center;font:14px/1.4 system-ui,sans-serif;color:var(--bone)}
#crash .box{width:min(320px,84vw);background:#24211d;border:1px solid var(--rule);border-radius:10px;padding:18px} #crash h4{margin:0 0 6px;font:600 16px system-ui,sans-serif} #crash p{margin:0 0 14px;color:var(--dim)}
#crash .row{display:flex;gap:8px;justify-content:flex-end} #crash button{min-height:40px;padding:6px 16px;font:14px system-ui,sans-serif}
#crash.black{background:#0c0c0e} #crash .big{text-align:center} #crash .big h2{font:500 40px var(--serif);margin:0 0 6px} #crash .big p{font:italic 16px var(--serif)} #crash .mono{font:12px var(--mono);color:var(--dim);letter-spacing:.1em}
body.raining::after{content:"";position:fixed;inset:-40px;pointer-events:none;z-index:40;background:repeating-linear-gradient(102deg,transparent 0 21px,rgba(111,143,176,.16) 21px 22px);animation:rainfall .45s linear infinite}
@keyframes rainfall{to{transform:translate(-9px,40px)}}
body.raining .sortBtns button:first-child{transform:rotate(-1.8deg) translateY(4px)} body.raining .sortBtns button:last-child{transform:rotate(2.4deg) translateY(8px)}
body.raining #prompt .bub{transform:rotate(.7deg);text-shadow:0 3px 2px rgba(111,143,176,.6),0 8px 5px rgba(111,143,176,.28)} body.raining #say .bub{transform:rotate(-.8deg) translateY(2px);text-shadow:0 3px 2px rgba(111,143,176,.5)}
.bub.t[data-who="d"]{font-family:var(--mono);font-size:13.5px;border-style:dashed}
@media (prefers-reduced-motion:reduce){body.raining::after{animation:none} .stolen{animation:none;visibility:hidden}}
#banner{position:fixed;left:0;right:0;top:46%;text-align:center;pointer-events:none;z-index:55;display:none}
#banner.on{display:block}
#banner b{display:block;font:500 34px/1.1 var(--serif);letter-spacing:.12em;text-transform:uppercase;color:var(--bone);text-shadow:0 0 22px var(--k,#b3141a),0 0 4px var(--k,#b3141a),0 2px 0 #000;padding:0 10px;animation:slam 3.5s cubic-bezier(.2,1.4,.3,1) forwards}
#banner i{display:block;font:italic 16px/1.35 var(--serif);color:var(--bone);margin:10px auto 0;max-width:300px;padding:0 16px;animation:fadeio 3.5s forwards}
#banner small{display:block;font:11px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--k,#b3141a);margin-bottom:8px;animation:fadeio 3.5s forwards}
@keyframes slam{0%{transform:scale(3.4);opacity:0}10%{transform:scale(1);opacity:1}88%{transform:scale(1);opacity:1}100%{transform:scale(1.05);opacity:0}}
#banner.stay b{animation:slamin .42s cubic-bezier(.2,1.4,.3,1) both} #banner.stay small,#banner.stay i{animation:fadein .5s .3s both}
@keyframes slamin{0%{transform:scale(3.4);opacity:0}100%{transform:scale(1);opacity:1}} @keyframes fadein{0%{opacity:0}100%{opacity:1}}
@keyframes fadeio{0%,9%{opacity:0}18%,88%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#banner b,#banner small,#banner i{animation:fadeio 3.5s forwards}}
@media (prefers-reduced-motion:reduce){#gore svg{animation:none;transform:none}}   /* nobody has a speech bubble before they start speaking */
#say .bub.typing .half.now{background:none} #say .bub.typing .half.now>span:not(.untyped){background:rgba(214,165,92,.16)}   /* the gold grows with the words */
.bub.typing .half:not(.typed), .bub.typing .seg:not(.typed){border-bottom-color:transparent}
.half,.seg{transition:border-color .25s}
.bub.note{align-self:flex-end;margin-right:2%;background:#e6dcc6;color:#1b1814;border-color:#e6dcc6;border-radius:2px;font-size:19px} .bub.note::before{background:#e6dcc6;border-color:#e6dcc6}
#stg.jolt{animation:jolt .22s} @keyframes jolt{20%{transform:translate(-3px,1px)}45%{transform:translate(3px,-1px)}70%{transform:translate(-2px,0)}}
@media (prefers-reduced-motion:reduce){#stg.jolt{animation:none}}
/* a wrong answer against a bandit kills you, and it gets on the screen */
#gore{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden;opacity:1;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--m0,-400px) - 18px),rgba(0,0,0,.1) var(--m0,-400px),rgba(0,0,0,.1) var(--m1,-300px),#000 calc(var(--m1,-300px) + 18px));
          mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--m0,-400px) - 18px),rgba(0,0,0,.1) var(--m0,-400px),rgba(0,0,0,.1) var(--m1,-300px),#000 calc(var(--m1,-300px) + 18px))}
#gore.hit::after{content:"";position:absolute;inset:0;background:rgba(170,8,8,.5);animation:hitflash .18s forwards}
@keyframes hitflash{to{opacity:0}}
#gore.flash{background:rgba(255,248,225,.92)}   /* lightning: the whole screen goes white first */
#gore.out{opacity:0;transition:opacity .7s}
#gore.dim{opacity:.28;transition:opacity .6s}   /* once he starts talking you can read him through it */
#gore.on{background:radial-gradient(ellipse at center,rgba(90,0,0,0) 35%,rgba(90,0,0,.55) 100%)}
#gore i{position:absolute;display:block;background:#7a0d0d;border-radius:52% 48% 57% 43% / 45% 55% 45% 55%;transform:scale(0);animation:splat .22s cubic-bezier(.2,1.5,.4,1) forwards;box-shadow:inset -6px -8px 0 rgba(0,0,0,.18)}
#gore i.d{border-radius:3px 3px 8px 8px;transform:scaleY(0);transform-origin:top;animation:drip var(--t,1.8s) ease-in forwards;box-shadow:none}
@keyframes splat{to{transform:scale(1)}} @keyframes drip{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){#gore i,#gore i.d{animation:none;transform:none}}
#say{margin:6px auto 10px} #say:empty{display:none}
body.voiced #say, body.voiced #say:empty{display:flex;min-height:74px;justify-content:flex-end}
.bub[data-still]{animation:none}
/* score, composure and worries belong to the older game; against a bandit or at the dummy they mean nothing */
body.voiced .hud>span:not(.tog){display:none!important}
.half{transition:color .3s, background .3s} .half.wait{color:var(--faint)} .half.mine{border-bottom:1px solid var(--verd)} .half.not{border-bottom:1px solid var(--blood)}
/* In what the bandit is saying: the part you are being asked about is gold and lit; parts already sorted are dimmed
   and keep only their thin underline; parts not yet reached are faint. */
#say .half.now{color:var(--bronze);background:rgba(214,165,92,.16);border-radius:3px;padding:1px 3px;margin:0 -3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#say .half.mine,#say .half.not{color:var(--dim)}
.opts.quick{flex-direction:column;align-items:stretch;max-width:520px;margin:0 auto;gap:8px} .opts.quick button{max-width:none;text-align:center;font-size:18px;padding:13px 12px}
.opts.quick button:disabled{opacity:.35;text-decoration:line-through}
.tally{font:11px var(--mono);letter-spacing:.06em;color:var(--dim);text-align:center;margin-top:8px}
.brag{max-width:46ch;margin:16px auto 6px;text-align:center;font-style:italic;font-size:15.5px;line-height:1.4;color:var(--dim)}
button.share{font-size:14px;padding:8px 14px;border-color:var(--blood);color:var(--bone);text-align:center;max-width:none}
.epitaph{text-align:center;margin:8px auto 0;max-width:52ch} .epitaph h3{font-size:24px;font-weight:400;margin:0 0 8px}
.epitaph .where{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font:11.5px var(--mono);color:var(--dim)}
.bub b{font-weight:400;color:var(--bronze)}
.sortBtns{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;margin:0 auto}
.sortBtns button{text-align:center;font-size:18px;padding:16px 10px;max-width:none}
.sortBtns .mine{border-left:3px solid var(--verd)} .sortBtns .notmine{border-left:3px solid var(--blood)}
.sortBtns button:disabled{opacity:.35;text-decoration:line-through}
/* during the opening there is no score, no hall to go back to */
body.opening .hud>span:not(#togReset){display:none!important} body.opening #impression{display:none}
.bub.b{align-self:flex-end;margin-right:2%;border-color:var(--blood)} .bub.b::before{border-color:var(--blood)}
.bub.far{align-self:flex-end;margin-right:2%;border-color:var(--verd);min-width:0} .bub.far::before{border-color:var(--verd)}   /* a voice from off the road */
.bub .line{display:block;color:var(--bronze);font-size:20px;margin-top:6px}
.hallDoes{font-size:15px;font-style:italic;color:var(--dim);margin:2px 0 8px;text-align:center}
@media (prefers-reduced-motion:reduce){.bub{animation:none}}
.coach{font-family:var(--serif);margin:10px auto 4px} .coach .does{margin-bottom:4px} .scene.hall.coach .says{font-size:18px;margin-bottom:0;color:var(--bone)}
.trialGrid.single{grid-template-columns:1fr;max-width:680px}
/* the worry's sentence, exploded: its two parts, and everything packed inside each */
.seg sup,.gh sup{font:9.5px var(--mono);margin:0 2px;vertical-align:super}
.seg.f{border-bottom:1px solid var(--verd)} .seg.v{border-bottom:1px solid var(--blood)} .seg.f sup{color:var(--verd)} .seg.v sup{color:var(--blood)}
.tree .grp,.tree .sub{display:grid;gap:6px}
.tree .gh{font:10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:left;color:var(--dim);margin:2px 0 -2px}
.tree .grp.fact>.gh{color:var(--verd)} .tree .grp.fact button{border-left-color:var(--verd)}
.tree .grp.said>.gh{color:var(--blood)}
.tree .sub{margin-left:12px;padding-left:10px;border-left:1px dashed var(--faint)}
.tree .sub .gh{text-transform:none;letter-spacing:.03em;font-style:italic;font-size:11px}
.tree .sub.under button{border-left-style:dashed}
.tree .sub.next button{border-left-color:var(--bronze)}
/* your line is not one of the things the worry says: no card, centred, in bronze */
.handOne{border:0;background:none;padding:12px 8px 0;font-size:17px;line-height:1.4;text-align:center;color:var(--bronze);font-style:italic}
.handOne .answers{font-style:normal;font-size:13px}
.handOne .ct{display:block;font:11px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.else{border:0;background:none;padding:0;margin-top:20px;text-align:center}
.else>summary{display:inline-block;cursor:pointer;font:12px var(--mono);letter-spacing:.08em;color:var(--dim);text-decoration:underline;text-underline-offset:3px;padding:8px 12px;list-style:none}
.else>summary::-webkit-details-marker{display:none}
.elseList{margin-top:10px;gap:8px}
.elseList button,.elseList .btnlink{font-size:15px;padding:10px 14px;min-width:200px;border:1px solid var(--rule);background:var(--panel);color:var(--bone);border-radius:3px;text-decoration:none;font-family:inherit;cursor:pointer}
.elseList small{display:block;font:11.5px var(--mono);color:var(--dim);margin-top:3px}
/* the three long panels stay out of the way until they are asked for from the hall */
main>details:not([open]){display:none}
.scene cite{display:block;font:11.5px var(--mono);color:var(--dim);font-style:normal;margin-top:6px}
@keyframes fadeUp{from{transform:translateY(8px)}to{transform:none}}   /* movement only: text must never depend on an animation to be visible */
@media (prefers-reduced-motion:reduce){.scene .new{animation:none}}
.yours{font-family:var(--mono);font-size:12px;color:var(--verd);margin-top:8px;text-align:center}
#blade{width:100%;display:block}
#form{font-size:14px;color:var(--dim);font-style:italic;text-align:center;min-height:20px}
#typed{font-family:var(--mono);font-size:19px;text-align:center;margin:10px 0 4px;min-height:30px;letter-spacing:.02em;white-space:pre-wrap}
#typed.miss{animation:shake .18s}
#typed .done{color:var(--bronze)} #typed .ghost{color:var(--faint)} #typed .caret{border-left:2px solid var(--bone);margin-left:-1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{border-color:transparent}}
#prompt{font-family:var(--mono);font-size:12px;color:var(--dim);text-align:center;min-height:18px}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--faint);border-bottom-width:2px;border-radius:4px;padding:1px 6px;color:var(--bone);background:#221e19}

#strike{margin:14px auto 0;max-width:780px;text-align:center}
.opts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px;transition:opacity .16s}
body.talking #strike .opts:not(:has(.cont)){opacity:0;pointer-events:none}
button{font:inherit;color:var(--bone);background:var(--panel);border:1px solid var(--rule);padding:10px 16px;cursor:pointer;border-radius:3px}
/* hover only where there is a pointer: on a touch screen it sticks to the last thing tapped and looks like a choice already made */
@media (hover:hover){button:hover:not(:disabled){border-color:var(--bronze)}}
button:disabled{opacity:.35;cursor:default}
.opts button{font-size:17px;max-width:360px;text-align:left;line-height:1.3}
.opts button kbd{margin-right:8px}
.opts button.sel{border-color:var(--bronze);background:#2b2419}
.frag{font-size:22px;margin:6px 0 2px}
.track{position:relative;height:46px;border:1px solid var(--rule);background:var(--panel);margin:14px 0 6px;overflow:hidden}
.track .zone{position:absolute;top:0;bottom:0;left:10%;width:17%;background:rgba(214,165,92,.16);border-left:1px solid var(--bronze);border-right:1px solid var(--bronze)}
.track .you{position:absolute;left:6px;top:13px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.track .inc{position:absolute;top:8px;height:28px;padding:0 10px;background:var(--blood);color:#fff;font-family:var(--mono);font-size:12px;line-height:28px;white-space:nowrap}
.verdict{font-size:18px;line-height:1.45;margin-top:6px}
.verdict .tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:6px}
.verdict.ok .tag{color:var(--verd)} .verdict.bad .tag{color:var(--blood)}
.verdict p{margin:6px 0;color:var(--bone)} .verdict p.sub{color:var(--dim);font-size:15px}

.cards{display:grid;gap:10px}
#rack{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:20px;border-top:1px solid var(--rule);padding-top:16px}
#armoryGrid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px}
.slot{background:var(--panel);border:1px solid var(--rule);padding:8px 10px 10px;text-align:left;cursor:pointer;border-radius:3px}
.slot.active,.slot.pinned{border-color:var(--bronze)}
.slot.spent{opacity:.32;cursor:default}
.slot canvas{width:100%;display:block}
.slot .nm{font-size:15px;display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.slot .ct{font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap}
.slot .use{font-size:12.5px;color:var(--dim);font-style:italic;margin-top:3px;min-height:32px}
.slot .txt{font-size:13px;margin-top:4px;line-height:1.35;min-height:54px}
#armoryGrid .slot{background:var(--bg)}
.slot a{color:var(--dim)} .slot a:hover{color:var(--bone)}
#reader{margin-top:12px} #reader:empty{display:none}
#reader p{font-size:16px;line-height:1.55;color:var(--bone);max-width:70ch}

details{margin-top:18px;border:1px solid var(--rule);background:var(--panel);padding:10px 14px}
summary{cursor:pointer;font-size:15px}
details p{font-size:13.5px;color:var(--dim);margin:8px 0}
textarea,input{width:100%;font:15px var(--serif);color:var(--bone);background:var(--bg);border:1px solid var(--rule);padding:8px 10px;border-radius:3px}
textarea{min-height:64px;resize:vertical}
.row{display:grid;grid-template-columns:2fr 1fr auto;gap:8px;margin-top:8px}
.row input{font:12px var(--mono)}
.msg{font-family:var(--mono);font-size:12px;margin-top:8px;min-height:16px;color:var(--dim)}
.chk{display:block;font-size:15px;margin:10px 0 2px;cursor:pointer}
.chk input{width:auto;margin-right:8px}
.rebut{margin:14px auto 12px;padding:12px 16px;border-left:3px solid var(--blood);background:var(--panel);font-size:20px;font-style:italic;text-align:left;line-height:1.4}
.rebut .who{display:block;font:11px var(--mono);color:var(--blood);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
#reply{min-height:76px;font-size:17px}
.note{font-size:14.5px;color:var(--dim);margin:8px 0;text-align:left}
footer{margin-top:18px;font-size:12px;color:var(--faint);text-align:center}
#impression{position:relative;overflow:hidden}
.tags{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:8px;min-height:15px}
#pressBar{position:absolute;left:0;right:0;bottom:0;height:4px;background:#241f19}
#pressFill{display:block;height:100%;width:0;background:var(--blood)}
#pressBar.hot #pressFill{animation:throb .5s infinite alternate}
@keyframes throb{to{filter:brightness(1.7)}}
.dmg{position:absolute;right:22px;top:30px;font:700 20px var(--mono);color:var(--bronze);pointer-events:none;animation:rise 1.1s forwards;text-shadow:0 0 8px #000}
.dmg.bad{color:var(--blood)}
@keyframes rise{from{transform:translateY(8px);opacity:0}15%{opacity:1}to{transform:translateY(-26px);opacity:0}}
#blade.lunge{animation:lunge .34s cubic-bezier(.2,.9,.3,1)}
@keyframes lunge{35%{transform:translateY(-54px) scale(1.05);filter:brightness(1.6)}}
main.shake{animation:quake .32s}
@keyframes quake{20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
#vfx{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 140px 30px rgba(194,84,63,.55);opacity:0}
#vfx.on{animation:vfx .5s}
@keyframes vfx{20%{opacity:1}to{opacity:0}}
.shard{display:inline-block;white-space:pre;animation:shard .8s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes shard{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:.16}}
.menu button{font-size:19px;min-width:300px;max-width:380px;padding:16px 18px}
.menu small,.draftCards small{display:block;font-size:13.5px;color:var(--dim);margin-top:6px;line-height:1.4}
.draftCards{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px;text-align:left}
#impKind{color:var(--blood);font-weight:400;margin-left:8px;text-transform:none;letter-spacing:0}
#chapMap{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:4px;margin:10px 0 4px}
#chapMap b{font:11px var(--mono);font-weight:400;text-align:center;padding:6px 0;border:1px solid var(--rule);color:var(--faint);cursor:pointer;position:relative;border-radius:2px}
#chapMap b.locked{color:var(--dim);border-color:var(--faint)}
#chapMap b.open{color:var(--bronze);border-color:var(--bronze)}
#chapMap b.known{color:var(--bg);background:var(--bronze);border-color:var(--bronze)}
#chapMap b.used::after{content:'';position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--verd)}
select{font:14px var(--serif);color:var(--bone);background:var(--bg);border:1px solid var(--rule);padding:8px 10px;border-radius:3px;width:100%}
#jList p{font-size:14.5px;color:var(--bone);margin:6px 0} #jList .ct{font-family:var(--mono);font-size:11px;color:var(--dim)}
.slot.lockedLine{opacity:.4}
.hand{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.hand input{font:14px var(--serif)}
.menu button:disabled{opacity:.7}
.ending{font-size:19px;line-height:1.6;font-style:italic;margin:14px auto;max-width:56ch}
.menu button.primary{border-color:var(--bronze)}
.fields{display:grid;gap:8px;max-width:640px;margin:0 auto;text-align:left}
.fields label{font-size:13.5px;color:var(--dim)}
#ft{min-height:84px;font-size:18px}
#soft{display:none;max-width:420px;margin:6px auto 0;text-align:center;font:16px var(--mono)}
/* On a phone the typing box is invisible and lies over the line itself. The line is the only thing you see fill in;
   what the keyboard actually produced (no spaces, no capitals) is never shown beside it. Tapping the line brings the keyboard back. */
@media (pointer:coarse){
  #stage{position:relative}
  #soft.on{display:block;position:absolute;left:0;right:0;margin:0;max-width:none;width:100%;opacity:0;border:0;padding:0;background:transparent;color:transparent;caret-color:transparent}
  #typed{min-height:44px}
  #soft.on:not(:focus) ~ #voice::after{content:"tap the line to keep typing";display:block;text-align:center;font:11px var(--mono);letter-spacing:.06em;color:var(--dim);margin-top:4px}
}
.hud{flex-wrap:wrap;row-gap:6px}
.cont{min-width:180px;text-align:center!important}
/* phones and other touch screens: nothing may depend on a physical key, and nothing should trigger zoom-on-focus */
@media (pointer:coarse){
  input,textarea,select{font-size:16px!important}
  kbd,.keys{display:none}
  .tog,.hud span{padding:6px 0}
  #chapMap{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))} #chapMap b{padding:11px 0}
  .opts button{min-height:48px}
}
@media (max-width:560px){
  body{padding:14px 12px 32px}
  /* on a phone the switches and scores are not shown until they mean something */
  .hud .tog:not(#togHall):not(#togReset), .hud>span:not(.tog){display:none}
  body.showset .hud .tog:not(#togHall), body:not(.inhall) .hud>span:not(.tog){display:inline}
  body.inhall #togHall{display:none}
  body.inhall h1 small{display:none}
  /* in a fight: only what is at stake stays in the header, and line cards lose their drawings */
  h1 small{display:none!important}
  .hud>span:has(#hudRank), .hud>span:has(#hudModel){display:none!important}
  .handGrid{grid-template-columns:1fr} .handGrid canvas{display:none}
  #impression{min-height:0;margin-top:12px} #stg{margin-bottom:4px}
  .scene.hall .says{font-size:19px}
  h1 small{display:block;margin:4px 0 0}
  .hud{gap:6px 14px;font-size:11.5px}
  .opts{flex-direction:column;align-items:stretch}
  .opts button,.menu button{max-width:none;min-width:0;width:100%}
  #impression{padding:14px 14px 16px} #impression .label{flex-wrap:wrap;gap:4px}
  #armoryGrid,.draftCards{grid-template-columns:1fr!important}
  .hand,.row{grid-template-columns:1fr!important}
  #reply,#ft{font-size:16px}
}
.testimony{display:grid;gap:8px;max-width:760px;margin:10px auto 0}
.testimony button{text-align:left;font-size:18px;line-height:1.35;padding:12px 16px;border-left:3px solid var(--blood)}
.testimony button kbd{margin-right:10px}
.testimony button.sel{border-color:var(--bronze);background:#2b2419}
.testimony button.broken{border-left-color:var(--verd);color:var(--dim);text-decoration:line-through;text-decoration-color:var(--faint);opacity:.75}
.steps{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--dim);margin:2px 0 12px}
.steps span{border:1px solid var(--rule);border-radius:3px;padding:5px 10px}
.steps span.now{color:var(--bone);border-color:var(--bronze)}
.steps span.done{color:var(--verd)}
.trialGrid{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;text-align:left;max-width:1000px;margin:0 auto}
.trialGrid h3{font-size:16px;font-weight:500;margin:0 0 2px}
.trialGrid .sub{font-size:13px;color:var(--dim);margin:0 0 8px;line-height:1.4}
.trialGrid .testimony{margin:0;max-width:none}
.handGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.handGrid .slot.active{background:#2b2419}
.answers{font-size:13px;line-height:1.35;margin-top:4px;color:var(--bone)}
.answers b{font-weight:400;color:var(--dim)}
.handGrid .txt{font-size:12.5px;color:var(--dim);font-style:italic;min-height:0;margin-top:5px}
.swap{font-size:13.5px!important;color:var(--dim);margin-top:8px;width:100%;text-align:center!important}
.warn{font-family:var(--mono);font-size:12px;color:var(--bronze);margin:10px auto 0;text-align:center}
@media (max-width:860px){.trialGrid{grid-template-columns:1fr}}
.intent{display:inline-block;margin-bottom:6px;color:var(--bone)}
.tog{cursor:pointer;user-select:none} .tog:hover b{color:var(--bronze)}
.bw{color:var(--verd);font:10.5px var(--mono)} .br{color:var(--blood);font:10.5px var(--mono)}
@media (prefers-reduced-motion:reduce){#blade.lunge,main.shake,.shard,#vfx.on{animation:none}}
#booklet{display:none}
@media print{
  @page{size:landscape;margin:0}
  html,body{background:#fff!important;color:#000!important;padding:0!important;margin:0!important;display:block!important;min-height:0!important}
  body>*:not(#booklet){display:none!important}
  #booklet{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;width:100vw;height:100vh}
  #booklet .pg{border:.5px dashed #aaa;padding:6mm 5mm;font:9.5pt/1.4 Georgia,serif;color:#000;overflow:hidden}
  #booklet .pg.flip{transform:rotate(180deg)}
  #booklet h4{font:600 11pt Georgia,serif;margin:0 0 2mm} #booklet .sm{font-size:8pt;color:#444}
  #booklet .q{font-style:italic;margin:2mm 0} #booklet .box{display:inline-block;width:4mm;height:4mm;border:.5px solid #000;margin:0 1mm 1mm 0}
}
@media (max-width:860px){#rack{grid-template-columns:repeat(2,1fr)} #armoryGrid{grid-template-columns:repeat(2,1fr)} #impression .text{font-size:19px} #typed{font-size:15px} .row{grid-template-columns:1fr}}
@media (max-width:560px){
  /* the school has to stay on one phone screen with the line to send under its buttons */
  .brag{font-size:13.5px;margin:10px auto 2px} .menu small{display:none} .else{margin-top:6px}
  .inhall button.share{border:0;background:none;padding:6px 10px;font:12px var(--mono);letter-spacing:.06em;color:var(--bronze);text-decoration:underline;text-underline-offset:3px;min-height:0;width:auto!important;align-self:center;text-align:center}
  .bub{font-size:16px;max-width:94%;padding:8px 12px}
  /* a fight has to fit one phone screen: no title, no footer, a small worry card, tight statements, a one-line strip for your line */
  body:not(.inhall) h1, footer{display:none}   /* on a phone the credit line lives under Somewhere else */
  body:not(.inhall) header{margin-bottom:0;padding-bottom:4px}
  #impression{padding:8px 12px 10px;margin:8px 0 4px} #impression .text{font-size:15.5px!important;line-height:1.3} #impression .label{font-size:10.5px}
  #strike{margin-top:6px} .trialGrid{gap:8px} .warn{margin-top:4px;font-size:11px}
  .testimony{gap:5px;margin-top:2px} .testimony button{font-size:15px;line-height:1.28;padding:7px 10px}
  .handOne{padding:2px 6px 0;font-size:15.5px;line-height:1.3} .handOne .answers,.handOne .st{display:none}
  .opts{gap:6px} .opts button{font-size:15.5px;line-height:1.3;padding:9px 12px}
  #impression{min-height:0!important} #impTags:empty{display:none}
  #stg{height:58px;object-fit:cover;object-position:bottom;margin-bottom:2px}
  body:not(.inhall){padding-top:8px;padding-bottom:10px} body:not(.inhall) .hud span{padding:2px 0}
  .tree .gh{font-size:9.5px;margin:0 0 -3px} .tree .sub .gh{font-size:10.5px} .tree .grp,.tree .sub{gap:5px} .tree .sub{margin-left:8px;padding-left:8px}
  .handOne .ct{display:none}
  body.applying #impression{display:none}
}
@media (max-width:560px){
  body.voiced:not(.inhall) #strike>.opts:not(.quick):last-child{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));margin:0;z-index:5}
  body.voiced:not(.inhall){padding-bottom:132px!important}
  body.voiced #stg{height:auto;object-fit:fill;margin-top:calc(58px - var(--stgh,101px))}
  body.voiced #say{position:relative;z-index:1;box-sizing:border-box;padding:0 25px;max-width:none;width:100%}   /* the bandit's words hang between the two columns, never over them */
  body.voiced #say .bub{max-width:100%}
  body.inhall:not(.voiced) #stg{height:auto;object-fit:fill}
  body.inhall #rack{display:none} body.inhall{padding-bottom:12px}
}
/* the handbook, opened after the last bandit: one chapter at a time, scrolling inside its own box */
.book{max-width:60ch;margin:6px auto 0;max-height:calc(100dvh - 385px);overflow:auto;padding:2px 12px 12px 6px;text-align:left}
.book small{display:block;font:11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.book p{font-size:16.5px;line-height:1.55;color:var(--bone);margin:0 0 10px}
.opts.bookNav{flex-direction:row!important;gap:8px} .opts.bookNav button{flex:1}
/* a phone turned on its side: the stage and the bandit's words on the left, the old man and your answers on the right, nothing scrolling */
@media (orientation:landscape) and (max-height:520px){
  body{padding:6px max(14px,env(safe-area-inset-left,0px)) 8px max(14px,env(safe-area-inset-right,0px))}
  h1,footer,#rack,#impression,.hud .tog:not(#togHall):not(#togReset),.hud>span:not(.tog){display:none!important}
  body.inhall #togHall{display:none!important}
  header{margin:0;padding:0 0 2px;border:0} .hud{font-size:11px;gap:2px 14px} .hud .tog{padding:2px 0}
  #stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:18px;align-items:start;min-height:calc(100dvh - 44px);margin:0;padding:0}
  #say{grid-column:1;grid-row:1;min-height:58px;display:flex;flex-direction:column;justify-content:flex-end;margin:0;padding:0 8px;box-sizing:border-box;width:100%;max-width:none}
  #stg{grid-column:1;grid-row:2;width:100%;height:auto!important;object-fit:fill;margin:0!important}
  #prompt{grid-column:2;grid-row:1 / span 3;align-self:start;margin:0}
  #strike{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0}
  #prompt:empty ~ #strike{align-self:start}
  #blade,#form,#typed,#soft,#voice{grid-column:1 / -1}
  .bub{font-size:15.5px;line-height:1.32;padding:7px 11px;max-width:100%}
  .opts{margin-top:6px;gap:6px} .opts button,.menu button{font-size:15.5px;line-height:1.25;padding:8px 12px;min-height:42px;max-width:none}
  .opts.quick button{font-size:15.5px;padding:8px 10px}
  .menu small,.hallDoes{display:none} .brag{font-size:12.5px;margin:6px auto 2px}
  .epitaph h3{font-size:19px;margin:0 0 4px} .epitaph{margin-top:0}
  .book{max-height:calc(100dvh - 120px)}
  #banner{top:34%;left:52%;right:8px} #banner b{font-size:24px} #banner i{font-size:14px;margin-top:6px}
  #quip{top:auto;bottom:8px}
  /* typing the line with the keyboard up: only a thin strip is left, and the browser lays its own buttons over both ends of it. The line is pinned to the top of what can be seen, small enough for one row, clear of those buttons. */
  #stage:has(#soft.on) #typed{position:fixed;left:0;right:0;top:var(--vvtop,0px);z-index:60;margin:0;padding:9px 116px 9px 206px;background:var(--bg);font-size:14px;line-height:1.3;min-height:0;text-align:left;border-bottom:1px solid var(--rule);letter-spacing:0}
  #stage:has(#soft.on) #soft.on{position:fixed;left:0;right:0;top:var(--vvtop,0px)!important;height:56px!important}
  #prompt .bub::before,#strike .bub::before{top:13px;left:-7px;transform:rotate(-45deg)}   /* the old man is to the left now, so his bubble points that way */
  #prompt .bubs,#strike .bubs{padding-left:8px}
  .menu{gap:6px;margin-top:6px} .menu button{min-width:0;width:100%} .else{margin-top:4px}
  .inhall button.share{border:0;background:none;padding:2px 8px;font:12px var(--mono);color:var(--bronze);text-decoration:underline;min-height:0;width:auto}
}
/* the old man's bubble in a fight has two parts: what he makes of your last answer, then, under a rule, the next question */
.bub .said{display:block}
.bub .later.asks{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--rule);color:var(--bronze)}
#consent{transition:opacity .16s ease-out,transform .16s ease-out} #consent.going{opacity:0;transform:translateY(12px);pointer-events:none}