/* PADRE tokens (locked from assets/avatar.png + banner.png, engine: ui-ux-pro-max "immersive" base, art wins)
   palette: oak #0b0402 #160804 #24100a #5a2a12 / gold #ffe08a #f7c04a #e0a020 #9a6412 / blood #c4160e #e5301f
            glass violet #4b3d9c cobalt #3556b0 ruby #8c1c2c / parchment #f0dfb4 #dcc58c ink #2a140a / brass #e6bd63 #8a5f1c
   type:    UnifrakturCook (blackletter display), IM Fell English (body, roman + italic), Courier Prime (CA, mono)
   space:   4 8 12 16 24 32 48 px. radius: 2px (cheap painted wood is square) and 999px medallions
   motion:  candle flicker (irregular keyframes) + pop with overshoot cubic-bezier(.2,1.7,.4,1). dials: variance 8, motion 7, density 5 */
@font-face{font-family:'UnifrakturCook';src:url(assets/fonts/unifrakturcook-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IM Fell English';src:url(assets/fonts/im-fell-english-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IM Fell English';src:url(assets/fonts/im-fell-english-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(assets/fonts/courier-prime-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(assets/fonts/courier-prime-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --oak-950:#0b0402;--oak-900:#160804;--oak-800:#24100a;--oak-600:#5a2a12;
  --gold-300:#ffe08a;--gold-400:#f7c04a;--gold-500:#e0a020;--gold-700:#9a6412;
  --blood-500:#c4160e;--blood-400:#e5301f;
  --parch-100:#f0dfb4;--parch-300:#dcc58c;--parch-600:#a98a52;--ink:#2a140a;
  --brass-hi:#e6bd63;--brass-lo:#8a5f1c;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
  --f-black:'UnifrakturCook','IM Fell English',serif;
  --f-body:'IM Fell English','Iowan Old Style',Georgia,serif;
  --f-mono:'Courier Prime','Courier New',monospace;
  --pop:cubic-bezier(.2,1.7,.4,1);
  --S:min(100vw,40vh);
  --pewH:min(30vh,280px);
  --lit:0;
}
@supports (height:100dvh){:root{--S:min(100vw,40dvh);--pewH:min(30dvh,280px)}}

*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--oak-950);color:var(--parch-100);overflow:hidden;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);font-size:17px;line-height:1.35;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none}

#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:var(--oak-950)}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.trim{position:fixed;top:0;left:0;right:0;height:9px;z-index:7;pointer-events:none;
  background:radial-gradient(circle at 50% 0,var(--gold-300) 0 2px,transparent 3px) 0 100%/14px 9px repeat-x,
             linear-gradient(var(--gold-400),var(--gold-700) 65%,#3a1e08);
  border-bottom:1px solid #000;box-shadow:0 2px 10px rgba(255,170,40,.25)}

/* ---------- scene, mobile first: one column that fits the viewport ---------- */
.scene{position:relative;z-index:2;height:100vh;height:100dvh;display:flex;flex-direction:column;padding-top:9px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
.scene::-webkit-scrollbar{display:none}
.ui,.foot{display:contents}
.bar{order:1;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);min-height:44px}
.stage{order:2;position:relative;flex:none;width:var(--S);height:var(--S);margin:0 auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent),linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 90%,transparent),linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.head{order:3;padding:0 var(--sp-4);text-align:center}
.slip{order:4}
.verdict{order:5}
.pews{order:6}
.plaque{order:7}
.plate{order:8}

.status{display:flex;align-items:center;gap:var(--sp-2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400);text-shadow:0 1px 0 #000}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--blood-400);box-shadow:0 0 8px var(--blood-400);animation:vigil 2.4s ease-in-out infinite}
.st-txt{display:flex;flex-direction:column;line-height:1.25}
.st-b{color:var(--parch-600)}
.st-b time{font-family:var(--f-mono);letter-spacing:0}
@keyframes vigil{0%,100%{opacity:.55}50%{opacity:1}}

.cluster{display:flex;align-items:center;gap:var(--sp-2)}
.ico{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#3a1a0a,#160804 75%);box-shadow:inset 0 0 0 1px var(--gold-700),0 0 0 1px #000,0 3px 10px rgba(0,0,0,.6)}
.ico img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.ico:hover{box-shadow:inset 0 0 0 1px var(--gold-400),0 0 14px rgba(255,190,60,.45)}
.xlink:hover img{animation:flamewobble .5s ease-in-out infinite alternate}
.bell.off img{filter:grayscale(1) brightness(.6)}
.bell.off::after{content:"";position:absolute;width:30px;height:3px;background:var(--blood-400);border-radius:2px;transform:rotate(-45deg);box-shadow:0 0 0 1px #000}
.bell.ring img{animation:ring .8s ease-out}
@keyframes flamewobble{from{transform:rotate(-2deg) scale(1)}to{transform:rotate(2deg) scale(1.06)}}
@keyframes ring{0%{transform:rotate(0)}15%{transform:rotate(-24deg)}35%{transform:rotate(20deg)}55%{transform:rotate(-12deg)}75%{transform:rotate(7deg)}100%{transform:rotate(0)}}

.mark{font-family:var(--f-black);font-weight:700;font-size:clamp(46px,14vw,64px);line-height:.95;letter-spacing:.01em;
  background:linear-gradient(#fff2b8,var(--gold-400) 48%,#b8741a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #3a1a06) drop-shadow(0 0 16px rgba(255,190,60,.4))}
.sub{font-style:italic;font-size:20px;color:var(--gold-300);text-shadow:0 1px 0 #000}
.l2{display:none}
.lede{margin-top:var(--sp-1);font-size:15px;color:var(--parch-100);max-width:34ch;margin-inline:auto;text-shadow:0 1px 0 #000}

.slip{margin:var(--sp-2) var(--sp-4) 0;padding:var(--sp-2) var(--sp-4) var(--sp-2);color:var(--ink);position:relative;
  background:radial-gradient(120% 140% at 30% 20%,var(--parch-100),var(--parch-300) 70%,var(--parch-600));
  border:1px solid #5a3a12;box-shadow:inset 0 0 26px rgba(120,70,20,.55),0 4px 14px rgba(0,0,0,.6);border-radius:var(--r-sm,2px)}
.slip label{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6a4520}
.slip input{width:100%;margin-top:2px;background:transparent;border:0;border-bottom:2px solid #7a4a1a;padding:2px 0 3px;font-family:var(--f-body);font-style:italic;font-size:20px;color:var(--ink);border-radius:0}
.slip input::placeholder{color:#8f6c3c;opacity:.85}
.slip input:focus{outline:none;border-bottom-color:var(--blood-500);box-shadow:0 2px 0 rgba(196,22,14,.25)}
.hint{display:none;margin-top:var(--sp-2);font-size:14px;color:#5a3a18}

.verdict{margin:var(--sp-2) var(--sp-4) 0;text-align:center;min-height:52px}
.v-word{font-family:var(--f-black);font-size:24px;line-height:1;color:var(--gold-300);text-shadow:0 0 12px rgba(255,190,60,.5),0 2px 0 #000}
.v-sin{font-style:italic;font-size:15px;color:var(--parch-100);overflow-wrap:anywhere;margin-top:2px}
.v-pen{font-size:14px;color:var(--parch-300);margin-top:2px}
.verdict.pop .v-word{animation:pop .55s var(--pop)}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---------- the booth ---------- */
.booth{width:100%;height:100%;object-fit:cover}
.glow{position:absolute;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:screen}
.g-window{left:21.3%;top:20%;width:24%;height:24%;background:radial-gradient(circle,rgba(150,120,255,.5),rgba(190,40,70,.28) 45%,transparent 70%);animation:glass 7s ease-in-out infinite}
.g-flame{width:22%;height:22%;background:radial-gradient(circle,rgba(255,210,110,.85) 0,rgba(255,130,30,.4) 32%,transparent 68%);
  filter:brightness(calc(1 + var(--lit)*.6));animation:flicker 2.9s linear infinite}
.fl-l{left:9.8%;top:79.4%}
.fl-r{left:88.4%;top:76.5%;animation-duration:3.7s;animation-delay:-1.1s}
.g-aura{left:32%;top:60.5%;width:70%;height:70%;background:radial-gradient(circle,rgba(255,225,130,.8),rgba(255,170,40,.35) 32%,transparent 66%);opacity:0}
.g-flare{left:63%;top:40.5%;width:41%;height:56%;border-radius:0;transform:translate(-50%,-50%);background:radial-gradient(ellipse at 50% 60%,rgba(255,240,170,.95),rgba(255,180,50,.55) 45%,transparent 75%);opacity:0}
.stage.flash .g-aura{animation:aura 1.3s ease-out}
.stage.flash .g-flare{animation:flare 1.1s ease-out}
.stage.static-flash .g-aura{opacity:.5}
.stage.static-flash .g-flare{opacity:.6}
@keyframes glass{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes flicker{0%{opacity:.8;transform:translate(-50%,-50%) scale(1)}7%{opacity:.62;transform:translate(-50%,-50%) scale(.95)}13%{opacity:.95;transform:translate(-51%,-50%) scale(1.04)}22%{opacity:.7;transform:translate(-50%,-51%) scale(.97)}31%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}44%{opacity:.66;transform:translate(-49%,-50%) scale(.94)}52%{opacity:.9;transform:translate(-50%,-50%) scale(1.02)}63%{opacity:.72;transform:translate(-50%,-49%) scale(.98)}78%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}88%{opacity:.68;transform:translate(-50%,-50%) scale(.96)}100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}}
@keyframes aura{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes flare{0%{opacity:0}15%{opacity:1}100%{opacity:0}}

.hit{position:absolute;border-radius:var(--r-sm,2px)}
.hit::after{content:attr(data-tip);position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);white-space:nowrap;font-family:var(--f-black);font-size:16px;color:var(--gold-300);
  background:rgba(11,4,2,.88);border:1px solid var(--gold-700);padding:0 8px;opacity:0;pointer-events:none;transition:opacity .15s}
.hit:hover::after,.hit:focus-visible::after{opacity:1}
.hit:hover{box-shadow:inset 0 0 0 2px rgba(255,210,100,.5),0 0 22px rgba(255,190,60,.35)}
.h-lattice{left:42%;top:12.7%;width:41%;height:55.7%}
.h-candle.c-l{left:4.4%;top:74.2%;width:11.7%;height:23%}
.h-candle.c-r{left:83%;top:72.3%;width:10.7%;height:24.4%}

.redbtn{position:absolute;left:18.55%;top:53.2%;width:45.9%;height:41.5%;transform-origin:50% 86%;touch-action:manipulation;
  -webkit-mask-image:none;filter:drop-shadow(0 0 0 rgba(255,200,80,0));transition:filter .15s}
.redbtn img{width:100%;height:100%;pointer-events:none}
.redbtn:hover{filter:brightness(1.1) drop-shadow(0 0 18px rgba(255,190,60,.55))}
.redbtn.down{transform:translateY(2.2%) scale(1.012,.94);transition:transform .07s ease-out}
.redbtn.up{animation:release .45s var(--pop)}
@keyframes release{0%{transform:translateY(2.2%) scale(1.012,.94)}100%{transform:none}}

/* ---------- pews (the queue strip) ---------- */
.pews{position:relative;flex:1 1 0;min-height:96px;width:100%;margin-top:var(--sp-2);text-align:left}
.count{position:absolute;left:var(--sp-4);top:var(--sp-2);display:flex;flex-direction:column;align-items:flex-start;gap:0;
  padding:3px 10px 4px;background:rgba(11,4,2,.72);border:1px solid var(--gold-700);pointer-events:none}
.pl-rest{display:none}
.c-x{display:none}
.c-l{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--parch-600)}
.c-n{font-family:var(--f-black);font-size:24px;line-height:1;color:var(--gold-300);text-shadow:0 0 10px rgba(255,190,60,.5)}
.pews:hover .count{border-color:var(--gold-400)}

/* ---------- foot: plaque + offering plate ---------- */
.plaque{position:relative;margin:var(--sp-2) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom,0px)) var(--sp-3);flex:none;align-self:flex-start;
  width:calc(100% - 108px);min-width:0;padding:6px 12px 7px 20px;text-align:left;color:#2a1706;
  background:linear-gradient(170deg,var(--brass-hi),#c99a44 40%,var(--brass-lo) 100%);
  border:1px solid #4a2c08;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,240,190,.7),inset 0 -2px 4px rgba(60,30,0,.45),0 3px 8px rgba(0,0,0,.7)}
.pl-label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#4d2f0a;text-shadow:0 1px 0 rgba(255,235,170,.6)}
.pl-ca{display:block;font-family:var(--f-mono);font-weight:700;font-size:clamp(11px,3.3vw,14px);letter-spacing:0;color:#1d0f03;text-shadow:0 1px 0 rgba(255,235,170,.7);overflow-wrap:anywhere;user-select:all}
.pl-state{position:absolute;left:20px;top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blood-500);font-weight:700;text-shadow:0 1px 0 rgba(255,235,170,.7)}
.screw{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f7e2a4,#6a4510 70%);box-shadow:0 1px 1px rgba(0,0,0,.6)}
.s1{left:5px;top:5px}.s2{left:5px;bottom:5px}.s3{right:5px;top:5px}.s4{right:5px;bottom:5px}
.seal{position:absolute;right:-16px;top:50%;width:54px;height:54px;object-fit:contain;transform:translateY(-50%) rotate(-10deg) scale(0);opacity:0;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.6))}
.plaque.stamped .seal{opacity:1;transform:translateY(-50%) rotate(-10deg) scale(1);animation:stamp .34s cubic-bezier(.5,0,.9,.4) backwards}
.plaque.stamped{animation:thud .28s ease-out}
.plaque.stamped .pl-label{visibility:hidden}
.plaque:hover{filter:brightness(1.08)}
@keyframes stamp{0%{transform:translateY(-50%) rotate(-30deg) scale(3);opacity:0}70%{opacity:1}100%{transform:translateY(-50%) rotate(-10deg) scale(1);opacity:1}}
@keyframes thud{0%{transform:translateY(0)}30%{transform:translateY(3px)}60%{transform:translateY(-1px)}100%{transform:translateY(0)}}

.plate{position:absolute;right:var(--sp-2);bottom:calc(var(--sp-1) + env(safe-area-inset-bottom,0px));width:88px;text-align:center;display:block}
.plate img{width:64px;height:64px;margin:0 auto;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.7))}
.plate:hover img{filter:drop-shadow(0 0 14px rgba(255,190,60,.6)) brightness(1.08)}
.plate-cap{display:block;font-style:italic;font-size:12px;color:var(--gold-300);line-height:1.1;text-shadow:0 1px 0 #000}
.coin{position:absolute;left:50%;top:-30px;width:18px;height:18px;margin-left:-9px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff2b8,var(--gold-500) 55%,var(--gold-700));box-shadow:0 0 0 1px #4a2c08}
.plate.drop .coin{animation:coin .6s cubic-bezier(.4,0,.9,.6)}
@keyframes coin{0%{opacity:1;transform:translateY(0) rotate(0)}70%{opacity:1;transform:translateY(46px) rotate(540deg) scaleX(.6)}100%{opacity:0;transform:translateY(50px) scaleX(.2)}}

/* ---------- drawers (parchment) ---------- */
.drawer{position:fixed;z-index:6;left:var(--sp-2);right:var(--sp-2);bottom:var(--sp-2);max-height:64vh;max-height:64dvh;overflow:auto;padding:var(--sp-5) var(--sp-5) var(--sp-5);color:var(--ink);
  background:radial-gradient(130% 120% at 25% 10%,var(--parch-100),var(--parch-300) 68%,var(--parch-600));border:1px solid #5a3a12;box-shadow:inset 0 0 40px rgba(120,70,20,.6),0 10px 40px rgba(0,0,0,.8);border-radius:var(--r-sm,2px);
  transform:translateY(0);animation:drawer .38s var(--pop)}
.drawer[hidden]{display:none}
@keyframes drawer{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.drawer h2{font-family:var(--f-black);font-size:36px;line-height:1;color:#5a1408;margin-bottom:var(--sp-3);text-shadow:0 1px 0 rgba(255,240,200,.6)}
.drawer h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6a4520;margin:var(--sp-3) 0 var(--sp-1)}
.drawer p,.drawer li{font-size:17px;line-height:1.35}
.drawer p+p{margin-top:var(--sp-2)}
.drawer ol{padding-left:22px;margin-bottom:var(--sp-3)}
.drawer li+li{margin-top:var(--sp-1)}
.drawer ul{list-style:none;padding:0}
.drawer ul li{padding:3px 0;border-bottom:1px dotted #8f6c3c;font-style:italic;overflow-wrap:anywhere}
.drawer ul li.empty{border:0;color:#6a4520}
.d-stat b{font-family:var(--f-mono);font-weight:700}
.d-close{position:absolute;right:8px;top:8px;width:48px;height:48px}
.d-close img{width:100%;height:100%;object-fit:contain;transition:transform .2s var(--pop)}
.d-close:hover img{transform:rotate(12deg) scale(1.1)}
.plain{margin-top:var(--sp-3);padding:8px 18px;font-family:var(--f-black);font-size:22px;color:var(--gold-300);background:linear-gradient(#5a1408,#2a0a04);border:1px solid var(--gold-700);box-shadow:inset 0 1px 0 rgba(255,220,140,.4),0 2px 6px rgba(0,0,0,.5);border-radius:var(--r-sm,2px)}
.plain:hover{filter:brightness(1.2)}
.plain:active{transform:translateY(1px)}

/* short phones: keep the whole booth on screen, drop the long lede */
@media (max-height:720px) and (max-width:919px){.lede{display:none}.mark{font-size:44px}.verdict{min-height:42px}.pews{min-height:72px}.slip label{font-size:11px}.bar{min-height:40px}.ico{width:40px;height:40px}.ico img{width:28px;height:28px}}
@media (max-width:919px) and (max-height:690px){.stage{--S:min(100vw,37vh);--S:min(100vw,37dvh)}.v-word{font-size:20px}.v-sin{font-size:13px;margin-top:0}.v-pen{font-size:13px;margin-top:0}.verdict{min-height:0;margin-top:var(--sp-1)}.slip{margin-top:var(--sp-1)}.c-n{font-size:20px}.count{top:var(--sp-1)}}

/* ---------- desktop: fixed full-viewport scene, no page scroll ---------- */
@media (min-width:920px) and (min-aspect-ratio:5/4){
  :root{--S:min(100vh,60vw);--pewH:min(30vh,280px)}
  @supports (height:100dvh){:root{--S:min(100dvh,60vw);--pewH:min(30dvh,280px)}}
  .scene{display:block;padding:0;overflow:hidden}
  .ui{display:flex;flex-direction:column;position:fixed;z-index:3;top:9px;left:calc(var(--S) * .93);right:0;bottom:var(--pewH);padding:var(--sp-4) var(--sp-7) 0 var(--sp-6);gap:var(--sp-3);overflow:hidden}
  .foot{display:contents}
  .stage{position:fixed;left:0;bottom:0;margin:0;z-index:2;-webkit-mask-image:linear-gradient(to right,#000 93%,transparent);mask-image:linear-gradient(to right,#000 93%,transparent);-webkit-mask-composite:source-over;mask-composite:add}
  .bar{padding:0;justify-content:space-between;min-height:0}
  .status{font-size:14px}
  .ico{width:52px;height:52px}
  .ico{width:52px;height:52px}.ico img{width:36px;height:36px}
  .bell.off::after{width:36px}
  .head{text-align:left;padding:0}
  .mark{font-size:min(132px,15.5vh);line-height:.92}
  .sub{font-size:min(30px,3.7vh);margin-top:2px}
  .lede{max-width:36ch;margin:var(--sp-2) 0 0;font-size:min(19px,2.4vh)}
  .slip{margin:var(--sp-2) 0 0;max-width:420px;padding:var(--sp-3) var(--sp-5) var(--sp-3)}
  .slip input{font-size:24px}
  .hint{display:block;font-size:14px}
  .verdict{margin:0;text-align:left;max-width:400px}
  .v-word{font-size:34px}
  .v-sin{font-size:17px}.v-pen{font-size:16px}
  .pews{position:fixed;z-index:1;bottom:0;left:calc(var(--S) * .6);right:0;height:var(--pewH);flex:none;margin:0;min-height:0;width:auto}
  .count{left:calc(var(--S) * .4 + var(--sp-4));right:auto;top:var(--sp-3);align-items:flex-start;padding:4px 12px 6px}
  .c-x{display:inline}.c-l{font-size:11px}
  .c-n{font-size:36px}
  .l2{display:inline}
  .pl-rest{display:inline}
  .plaque{position:fixed;z-index:3;margin:0;left:calc(var(--S) * .16);bottom:calc(var(--S) * .012);width:calc(var(--S) * .4);align-self:auto;padding:calc(var(--S) * .0055) calc(var(--S) * .012) calc(var(--S) * .0065) calc(var(--S) * .02)}
  .pl-label{font-size:clamp(9px,calc(var(--S) * .0108),12px)}
  .pl-state{left:calc(var(--S) * .02);top:calc(var(--S) * .0055);font-size:clamp(9px,calc(var(--S) * .0108),12px)}
  .pl-ca{font-size:clamp(12px,calc(var(--S) * .0185),17px)}
  .plate{position:fixed;z-index:3;right:var(--sp-6);bottom:calc(var(--pewH) + var(--sp-2));width:130px}
  .plate img{width:96px;height:96px}
  .plate-cap{font-size:15px}
  .seal{width:64px;height:64px;right:-24px}
  .drawer{left:auto;right:var(--sp-6);top:88px;bottom:auto;width:min(430px,calc(100vw - var(--S) - 48px));min-width:340px;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px)}
}
@media (min-width:920px) and (min-aspect-ratio:5/4) and (max-height:700px){
  .hint{display:none}.lede{display:none}.mark{font-size:min(96px,15vh)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .g-flame{opacity:.8}.g-window{opacity:.8}
}