/* fonts, served from the site and trimmed to the characters it uses */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/bodoni-moda.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/bodoni-moda-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter.woff2) format("woff2")}
@font-face{font-family:"Noto Nastaliq Urdu";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/nastaliq.woff2) format("woff2")}

:root{
  --ink:#1D1D1F; --pearl:#F1F0EC; --paper:#EFEBE2; --cognac:#A35F44; --green:#C7E721; --indigo:#1E2A4A; --gold:#C9A227;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
  --nast:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  --g:clamp(18px,3vw,52px); --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark; box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{background:#07080a;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;color:var(--pearl);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.space{height:1040vh}

/* the room: a colour that changes with each chapter, a giant word, and the board under one lamp */
.room{position:fixed;inset:0;overflow:hidden;background:#07080a}
.giant{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.giant span{position:absolute;left:62%;top:50%;font-family:var(--serif);font-weight:600;font-size:min(26vw,48vh);letter-spacing:-.045em;line-height:.8;white-space:nowrap;color:var(--gc,rgba(241,240,236,.075));opacity:0;will-change:transform,opacity;font-optical-sizing:none;font-variation-settings:'opsz' 9}
.giant span.ur{left:54%;top:38%;font-family:var(--nast);font-weight:500;font-size:min(28vw,54vh);line-height:1.6;letter-spacing:0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 58% 48%,transparent 50%,rgba(0,0,0,.6))}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.06;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the words */
.words{position:fixed;inset:0;pointer-events:none}
.words::before{content:"";position:absolute;inset:0 auto 0 0;width:52%;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.38) 55%,transparent);pointer-events:none}
.chap{position:absolute;left:var(--g);top:0;bottom:0;width:min(32rem,38vw);display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden}
.chap.on{pointer-events:auto}
.chap.near{visibility:visible}
.kicker{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.3vw,20px);color:#b9a89a;margin:0 0 .6em}
.kicker .pc{font-style:normal;color:var(--cognac);margin-right:.35em;font-family:"Apple Symbols","Segoe UI Symbol","DejaVu Sans",serif;font-variant-emoji:text}
.chap h1,.chap h2{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:.92;color:var(--pearl);font-optical-sizing:none;font-variation-settings:'opsz' 9}
.chap h1{font-size:clamp(64px,8.4vw,146px);font-weight:600;letter-spacing:-.035em}
.chap h1 em{display:block;font-weight:400;color:#e2c6b3}
.chap h2{font-size:clamp(52px,6.2vw,108px)}
.aside{margin:clamp(18px,3vh,30px) 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.85vw,30px);line-height:1.28;color:#f3e5d8;text-wrap:balance;font-optical-sizing:none;font-variation-settings:'opsz' 18}
.aside::before{content:"“";color:var(--cognac)}.aside::after{content:"”";color:var(--cognac)}
.plain{margin:clamp(14px,2.2vh,22px) 0 0;max-width:30em;font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:rgba(241,240,236,.72);text-wrap:pretty}
.plain b{color:var(--pearl);font-weight:600}
.facts{display:flex;flex-wrap:wrap;gap:10px 30px;margin:20px 0 0;padding:0;list-style:none}
.facts li{font-size:12px;letter-spacing:.06em;color:rgba(241,240,236,.55)}
.facts b{display:block;font-family:var(--serif);font-size:clamp(22px,2vw,30px);color:var(--pearl);font-weight:500;font-variant-numeric:lining-nums tabular-nums}
.cta{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin:22px 0 0}
.btn{display:inline-block;padding:12px 20px;border-radius:980px;background:var(--pearl);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.btn:hover{background:#fff}
.more{font-size:15px;font-weight:600;text-decoration:none;color:var(--pearl)}.more::after{content:" ›"}
.move{display:inline-flex;align-items:center;gap:12px;margin:26px 0 0;padding:14px 22px;border-radius:980px;border:1px solid rgba(241,240,236,.35);font-family:var(--serif);font-style:italic;font-size:20px;color:var(--pearl);transition:border-color .3s,background .3s}
.move:hover{border-color:var(--pearl);background:rgba(241,240,236,.06)}
.move b{font-style:normal;font-weight:600}
.door{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.door>div{overflow:hidden}
.opened .door{grid-template-rows:1fr}
.opened .move,.opened .movehelp{display:none}
.picker{display:flex;align-items:center;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.picker label{font-size:13px;color:rgba(241,240,236,.6)}
.picker select{font:inherit;font-family:var(--serif);font-size:18px;padding:9px 34px 9px 14px;border-radius:12px;background:rgba(241,240,236,.08) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F1F0EC' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") right 12px center no-repeat;color:var(--pearl);border:1px solid rgba(241,240,236,.25);appearance:none}
.picker select option{color:#111}
.picker .move{margin:0;padding:10px 20px;font-size:18px}
.verdict{margin:22px 0 0;font-family:var(--serif)}
.verdict b{display:block;font-size:clamp(40px,4.4vw,72px);font-weight:500;line-height:1;color:#f3d2bd;letter-spacing:-.02em}
.verdict span{display:block;margin-top:8px;font-style:italic;font-size:clamp(18px,1.5vw,24px);color:#f3e5d8}
.sent{margin:8px 0 0;font-size:13px;color:rgba(241,240,236,.55)}
.again{margin:18px 0 0;font-size:13px;color:rgba(241,240,236,.6);border-bottom:1px solid rgba(241,240,236,.3)}
.again:hover{color:var(--pearl)}
.skip{margin:16px 0 0;font-size:13px;color:rgba(241,240,236,.5)}.skip a{color:rgba(241,240,236,.8)}
.opened .skip{display:none}
.mail{display:block;margin:24px 0 0;font-family:var(--serif);font-size:clamp(22px,2vw,36px);line-height:1.1;text-decoration:none;color:var(--pearl);border-bottom:1px solid rgba(241,240,236,.3);padding-bottom:8px;width:max-content;max-width:100%;white-space:nowrap}
.mail:hover{border-color:var(--cognac)}
.mail:focus{outline:none}.mail:focus-visible{outline:none;border-color:var(--cognac);color:#fff}
.links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;font-size:15px}
.links a{text-decoration:none;color:rgba(241,240,236,.75)}.links a:hover{color:var(--pearl)}
.foot{margin:22px 0 0;font-size:12px;color:rgba(241,240,236,.45)}

/* plates: the things a chapter shows beside the board */
.plates{position:fixed;inset:0;pointer-events:none}
.plate{position:absolute;opacity:0;visibility:hidden;will-change:transform,opacity}
.plate.near{visibility:visible}
.plate.on{pointer-events:auto}
/* the player plate, as a broadcast shows it */
.player{right:var(--g);bottom:calc(76px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:16px;padding:12px 22px 12px 12px;border-radius:16px;background:rgba(18,18,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(241,240,236,.12)}
.player .ph{width:76px;height:76px;border-radius:12px;overflow:hidden;background:#e9e3d6}
.player .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:sepia(.3) contrast(1.05)}
.player .side{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,240,236,.6)}
.player .side i{width:12px;height:12px;border-radius:3px;background:var(--pearl);display:inline-block}
.player.black .side i{background:#111;border:1px solid rgba(241,240,236,.5)}
.player b{display:block;font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.1;margin-top:3px}
.player.big{gap:22px;padding:14px 28px 14px 14px;border-radius:20px;pointer-events:auto}
.player.big .ph{width:136px;height:170px;border-radius:12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.player.big .ph img{object-position:50% 20%;filter:contrast(1.06) brightness(1.02)}
.player.big b{font-size:34px;margin:6px 0 8px}
.player.big small{font-size:13px;margin-top:3px;color:rgba(241,240,236,.72)}
.player.big .soc{display:inline-block;margin-top:12px;font-size:13px;color:#e6c3ae;text-decoration:none;border-bottom:1px solid rgba(230,195,174,.4)}
.player.big .soc:hover{border-color:#e6c3ae}
.player small{display:block;font-size:12px;color:rgba(241,240,236,.6);margin-top:2px}
/* Khasa, in its own colours */
.khasa{right:calc(var(--g) + 2vw);bottom:calc(84px + env(safe-area-inset-bottom,0px));width:min(300px,24vw);padding:22px 22px 20px;border-radius:14px;background:var(--indigo);color:#FAF5EC;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(201,162,39,.35) inset}
.khasa svg{width:56px;height:auto}
.khasa b{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:34px;line-height:1;margin-top:8px}
.khasa .ur{display:block;font-family:var(--nast);font-size:22px;line-height:2;color:var(--gold)}
.khasa small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,245,236,.7)}
.khasa .two{display:flex;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(201,162,39,.35);font-family:var(--serif);font-size:14px;text-align:left}
.khasa .kl{display:flex;justify-content:center;gap:16px;margin-top:12px;font-size:12.5px}.khasa .kl a{color:#C9A227;text-decoration:none;border-bottom:1px solid rgba(201,162,39,.4)}
.khasa .two span{flex:1}.khasa .two em{display:block;font-style:normal;font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#C9A227;margin-top:2px}
/* the reel of photographs */
.reel{left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));height:min(30vh,250px)}
.reel .fr{position:absolute;top:0;height:100%;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#d9d4c9;border:5px solid var(--paper);box-shadow:0 24px 50px -20px rgba(0,0,0,.7);cursor:zoom-in;will-change:transform,opacity}
.reel .fr img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06);transition:filter .6s var(--ease)}
.reel .fr:hover img,.reel .fr:focus-visible img{filter:none}
.reel .fr img{transition:filter .6s var(--ease),transform .4s cubic-bezier(.55,0,.45,1)}
.reel .fr.turn img{transform:rotateY(90deg) scale(.96);filter:grayscale(1) brightness(.6)}
.reel .fr:focus-visible{outline:2px solid var(--cognac);outline-offset:3px}
/* the opening book */
.book{right:var(--g);bottom:calc(84px + env(safe-area-inset-bottom,0px));display:flex;gap:14px}
.book .vol{width:min(190px,15vw);min-height:230px;padding:18px 16px 16px 22px;border-radius:6px 12px 12px 6px;background:var(--paper);color:var(--ink);position:relative;box-shadow:0 24px 50px -20px rgba(0,0,0,.7);display:flex;flex-direction:column}
.book .vol::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;border-radius:6px 0 0 6px;background:var(--cognac)}
.book .vol b{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.1}
.book .vol span{margin-top:6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#5b5a60}
.book .vol p{margin:auto 0 0;padding-top:12px;font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.3;color:#3a393e}
.book .vol.f b{font-style:italic;color:var(--cognac)}
/* his front page */
.paper{right:var(--g);bottom:calc(76px + env(safe-area-inset-bottom,0px));width:min(380px,30vw);padding:18px 20px 16px;border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.paper a{color:inherit;text-decoration:none}
.paper .mast{display:flex;align-items:center;gap:10px}
.paper .mast b{font-family:var(--serif);font-weight:700;font-size:24px;white-space:nowrap}
.paper .mast i{flex:1;height:2px;background:var(--ink)}
.paper .dl{display:flex;justify-content:space-between;margin-top:6px;padding:4px 0;border-top:1px solid rgba(29,29,31,.5);border-bottom:1px solid rgba(29,29,31,.5);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#4a494f}
.paper .lead{display:block;margin-top:12px;padding-bottom:10px;border-bottom:1px solid rgba(29,29,31,.25)}
.paper .lead b{display:block;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.1}
.paper span.d{display:block;margin-top:5px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cognac)}
.paper .cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px}
.paper .cols a{border-top:1px solid rgba(29,29,31,.2);padding-top:6px}
.paper .cols b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--serif);font-weight:500;font-size:13px;line-height:1.2}
.paper a:hover b{color:var(--cognac)}
.paper .all{display:inline-block;margin-top:12px;font-family:var(--serif);font-style:italic;font-size:14px;border-bottom:1px solid var(--cognac)}

/* the HUD: monogram, chapter, the score sheet as the game is played, the time at home */
.hud{position:fixed;z-index:20;color:rgba(241,240,236,.7);font-size:12px;letter-spacing:.04em}
.hud.tl{top:calc(20px + env(safe-area-inset-top,0px));left:var(--g);font-family:var(--serif);font-style:italic;font-size:19px;color:var(--pearl);text-decoration:none}
.hud.tl b{font-style:normal;font-weight:600}
.hud.tr{top:calc(24px + env(safe-area-inset-top,0px));right:var(--g);font-family:var(--serif);font-style:italic;font-size:15px}
.hud.bl{bottom:calc(22px + env(safe-area-inset-bottom,0px));left:var(--g);font-family:var(--serif);font-size:15px;color:rgba(241,240,236,.5);white-space:nowrap}
.hud.bl b{color:var(--pearl);font-weight:500}
.hud.bl .n{color:rgba(241,240,236,.4);margin-right:4px}
.hud.br{bottom:calc(22px + env(safe-area-inset-bottom,0px));right:var(--g);text-align:right;font-variant-numeric:tabular-nums}
.hint{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-family:var(--serif);font-style:italic;font-size:14px;color:rgba(241,240,236,.6);transition:opacity .5s}

/* a photograph opens */
.lb{position:fixed;inset:0;z-index:60;background:rgba(6,6,8,.94);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.lb.on{opacity:1;visibility:visible;transition:opacity .4s}
.lb img{max-width:min(90vw,1300px);max-height:80vh;border-radius:10px;box-shadow:0 40px 120px rgba(0,0,0,.7)}
.lb p{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font-family:var(--serif);font-style:italic;font-size:18px;color:#fff;padding:0 var(--g)}
.lb p small{display:block;margin-top:4px;font-family:var(--sans);font-style:normal;font-size:13px;opacity:.6}
.lb .x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:var(--g);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1}

@media (max-width:860px),(max-aspect-ratio:9/10){
  .chap{left:var(--g);right:var(--g);width:auto;top:auto;bottom:calc(58px + env(safe-area-inset-bottom,0px));justify-content:flex-end}
  .chap h1{font-size:clamp(50px,15vw,76px)}
  .chap h2{font-size:clamp(42px,12vw,60px)}
  .aside{font-size:19px;margin-top:12px}
  .plain{font-size:14.5px;margin-top:10px}
  .opt{display:none}
  .hint{display:none}
  .words::before{content:"";position:absolute;top:auto;left:0;right:0;bottom:0;width:auto;height:56%;background:linear-gradient(to top,rgba(7,8,10,.94) 40%,rgba(7,8,10,0))}
  .giant span{left:50%;top:24%;font-size:min(44vw,24vh)}.giant span.ur{left:50%;top:18%;font-size:min(54vw,28vh)}
  .plate{transform-origin:50% 0}
  .player{left:var(--g);right:auto;top:calc(64px + env(safe-area-inset-top,0px));bottom:auto;padding:8px 16px 8px 8px}
  .player .ph{width:52px;height:52px}.player b{font-size:19px}
  .player.big{gap:14px;padding:10px 18px 10px 10px}.player.big .ph{width:76px;height:95px}.player.big b{font-size:22px;margin:3px 0 4px}.player.big small{font-size:11.5px}.player.big .soc{margin-top:6px;font-size:12px}
  .khasa,.book,.paper{left:50%;right:auto;top:calc(64px + env(safe-area-inset-top,0px));bottom:auto;transform-origin:50% 0}
  .khasa{width:240px;padding:16px}
  .book .vol{width:110px;min-height:150px;padding:12px 10px 12px 16px}.book .vol b{font-size:14px}.book .vol p{display:none}
  .paper{width:min(340px,86vw)}
  .reel{top:calc(70px + env(safe-area-inset-top,0px));bottom:auto;height:22vh}
  .hud.bl{font-size:13px}
  .mail{font-size:clamp(20px,6.4vw,26px)}
}
@media (max-width:860px) and (max-height:720px){.plain{display:none}}
@media (prefers-reduced-motion:reduce){.door{grid-template-rows:1fr}.move,.movehelp{display:none}}

/* production additions */
.reel .fr{margin:0}
.player .ph.q{background:#16161a;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:30px;color:#e6c3ae}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.moveform{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 0;max-width:30rem}
.moveform input,.moveform textarea{font:inherit;font-size:15px;color:var(--pearl);background:rgba(241,240,236,.07);border:1px solid rgba(241,240,236,.22);border-radius:12px;padding:11px 13px;min-width:0}
.moveform input:focus,.moveform textarea:focus{outline:none;border-color:#e6c3ae}
.moveform textarea{grid-column:1/-1;min-height:84px;resize:vertical}
.moveform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.moveform .row{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.moveform button{padding:12px 22px;border-radius:980px;background:var(--pearl);color:var(--ink);font-weight:600;font-size:15px}
.moveform button:disabled{opacity:.5}
.moveform .say{font-size:13px;color:rgba(241,240,236,.7)}
.moveform.done input,.moveform.done textarea,.moveform.done button{display:none}
.moveform.done .say{font-family:var(--serif);font-style:italic;font-size:20px;color:#f3d2bd}
@media (max-width:860px),(max-aspect-ratio:9/10){.moveform{grid-template-columns:1fr}.moveform textarea{min-height:64px}}
/* without the script: the chapters as a plain, readable page */
html:not(.js) .room,html:not(.js) .plates,html:not(.js) .hud.bl,html:not(.js) .hint,html:not(.js) .picker,html:not(.js) .movehelp{display:none}
html:not(.js) .words{position:static}html:not(.js) .words::before{display:none}
html:not(.js) .chap{position:static;opacity:1;visibility:visible;width:auto;max-width:40rem;margin:0 auto;padding:18vh var(--g)}
html:not(.js) .space{display:none}html:not(.js) .door{grid-template-rows:1fr}

/* large portrait screens (tablets, tall windows): stacked, but with room for bigger type */
@media (min-width:700px) and (max-aspect-ratio:9/10){
  .chap h1{font-size:clamp(76px,11vw,150px)} .chap h2{font-size:clamp(60px,8.5vw,120px)}
  .aside{font-size:clamp(22px,2.6vw,34px)} .plain{font-size:clamp(16px,1.9vw,22px)}
  .chap{left:6vw;right:6vw;bottom:calc(9vh + env(safe-area-inset-bottom,0px))}
  .player.big .ph{width:112px;height:140px}.player.big b{font-size:30px}.player.big small{font-size:13px}
}

/* before the board has loaded: the prologue's words and card are already on the page; the board fades in when its first frame is drawn */
html:not(.booted) .chap[data-c="0"],html:not(.booted) .plate[data-c="0"]{opacity:1;visibility:visible}
#gl{opacity:0;transition:opacity 1.2s cubic-bezier(.22,.61,.36,1)}
html.drawn #gl{opacity:1}
html:not(.js) #gl{opacity:1}

/* after the visitor has moved: the instructions step aside so the verdict, the form and the address fit on a phone */
#hello.opened .aside{display:none}
@media (max-width:860px),(max-aspect-ratio:9/10){
  #hello.opened .kicker{display:none}
  #hello.opened h2{font-size:clamp(34px,9vw,46px)}
  #hello.opened .verdict{margin-top:10px}#hello.opened .verdict b{font-size:clamp(32px,9vw,44px)}#hello.opened .verdict span{font-size:16px}
  #hello.opened .moveform{margin-top:12px;gap:8px}#hello.opened .moveform textarea{min-height:52px}
  #hello.opened .mail{margin-top:14px}#hello.opened .links{margin-top:10px;font-size:14px}#hello.opened .foot{margin-top:10px}
}
@media (max-width:860px),(max-aspect-ratio:9/10){
  .hud.br{display:none}   /* the score sheet needs the bottom line; Layyah's time is in Chapter 1 */
  html.moved .words::before{height:100%;background:linear-gradient(to top,rgba(7,8,10,.95) 55%,rgba(7,8,10,.82))}
  html.moved .plate.player.black{opacity:0!important;visibility:hidden!important}
  html.moved #hello .foot{display:none}
}