/* «Кто лучше знает Лизу?» — styles ported from reference/design (html/ + Proto*.dc.html). */

/* ---------------------------------------------------------------- fonts */
/* Static instances of Playfair Display and Onest (only the weights the design uses). */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/playfair-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/playfair-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/playfair-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/playfair-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/playfair-italic-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/playfair-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(/static/fonts/playfair-italic-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(/static/fonts/playfair-italic-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/onest-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/onest-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/onest-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/onest-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/onest-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/onest-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/onest-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/onest-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --------------------------------------------------------------- tokens */
:root{
  --bg:#FFEAF1;--pink1:#FFD6E3;--pink2:#FFB4CB;--pink3:#FFE4EC;
  --ink:#5B1433;--ink2:#87455F;--rasp:#E1487E;--rasp-sm:#B82D5F;--rasp-deep:#C9346A;
  --gold:#F2B84B;--gold-deep:#E3A537;--ok-ink:#4A0F29;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease-out:cubic-bezier(.16,.84,.3,1);--spring:cubic-bezier(.3,1.4,.5,1);
  --W:390px;--H:844px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ----------------------------------------------------------------- base */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);overscroll-behavior:none}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{font:inherit;color:inherit}
#app{position:fixed;left:0;right:0;top:var(--app-top,0px);margin:0 auto;width:min(100%,430px);height:var(--app-h,100%);overflow:hidden;background:var(--bg);font-family:var(--sans);color:var(--ink)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.layer{position:absolute;inset:0;z-index:1}

/* ----------------------------------------------------------- keyframes */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rise-lg{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes scrin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes scrout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
@keyframes swapin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(25deg)}}
@keyframes orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.965)}55%{transform:scale(1.018)}100%{transform:scale(1)}}
@keyframes chipin{0%{opacity:0;transform:translateY(10px) scale(.6)}60%{opacity:1;transform:translateY(0) scale(1.08)}100%{opacity:1;transform:none}}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.09)}28%{transform:scale(1)}}
@keyframes halo{from{opacity:.9;transform:scale(.88)}to{opacity:0;transform:scale(1.32)}}
@keyframes blink{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes edge{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes draw{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
@keyframes shine{from{transform:translateX(-140%) skewX(-18deg)}to{transform:translateX(330%) skewX(-18deg)}}
@keyframes lockin{0%{transform:scale(1)}35%{transform:scale(.96)}70%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes badgeflip{0%{transform:rotateY(0deg)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0deg)}}
@keyframes reveal{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes fadeto{from{opacity:1}to{opacity:.5}}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0deg)}35%{opacity:1;transform:translate(var(--dx,0),var(--dy,0)) scale(1.15) rotate(45deg)}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.5) rotate(90deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.08);opacity:1}}
@keyframes spnum{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes ringout{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(1.7)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes medal{0%{opacity:0;transform:scale(.3) translateY(12px)}60%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes glow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes fall0{from{transform:translate3d(0,0,0) rotate(0deg) rotateY(0deg)}to{transform:translate3d(46px,var(--fall,900px),0) rotate(540deg) rotateY(720deg)}}
@keyframes fall1{from{transform:translate3d(0,0,0) rotate(0deg) rotateX(0deg)}to{transform:translate3d(-54px,var(--fall,900px),0) rotate(-420deg) rotateX(640deg)}}
@keyframes fall2{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(22px,var(--fall,900px),0) rotate(760deg)}}
@keyframes fall3{from{transform:translate3d(0,0,0) rotate(0deg) rotateY(0deg)}to{transform:translate3d(-24px,var(--fall,900px),0) rotate(300deg) rotateY(-540deg)}}
@keyframes pinpop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(3px)}}
@keyframes okglow{0%{box-shadow:0 0 0 0 rgba(242,184,75,.7)}100%{box-shadow:0 0 0 10px rgba(242,184,75,0)}}
@keyframes scan{0%,100%{transform:translateY(0);opacity:0}10%,90%{opacity:.9}50%{transform:translateY(176px)}}
@keyframes unlock{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes callme{0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 26px -12px rgba(185,43,95,.7),0 0 0 0 rgba(225,72,126,0)}50%{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 26px -12px rgba(185,43,95,.7),0 0 0 8px rgba(225,72,126,.18)}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes countup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes countin{0%{transform:translateY(60%);opacity:0}100%{transform:none;opacity:1}}
@keyframes goldshine{from{transform:translateX(-140%) skewX(-18deg)}to{transform:translateX(420%) skewX(-18deg)}}
@keyframes sheetin{from{transform:translateY(100%)}to{transform:none}}
@keyframes bannerin{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}

.rise{animation:rise .7s var(--ease-out) both}
.rise-lg{animation:rise-lg .9s var(--ease-out) both}
.fadein{animation:fadein 1.4s ease both}
.tw{animation:twinkle 3.6s ease-in-out infinite;transform-origin:center}
.scr-in{position:absolute;inset:0;animation:scrin .55s var(--ease-out) both}
.scr-cur,.scr-out{position:absolute;inset:0}
.scr-cur{z-index:1}
.scr-out{z-index:0;pointer-events:none;animation:scrout .28s cubic-bezier(.7,0,.84,0) both}
.scr-out .scr-in{animation:none}
.star{fill:currentColor}

/* -------------------------------------------------------------- backdrop */
.deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;left:0;top:0;border-radius:50%;transform-origin:0 0;transition:transform 1.2s cubic-bezier(.6,0,.2,1),opacity 1.2s ease;will-change:transform}
.orb1{width:520px;height:520px;background:radial-gradient(circle at 40% 60%,#FFE0EA 0%,#FFD3E1 55%,#FFC9DA 100%)}
.orb2{width:470px;height:470px;border:1px solid rgba(214,160,60,.55)}
.orb2 .orbit{position:absolute;inset:-1px;border-radius:50%;animation:orbit 60s linear infinite;opacity:0;transition:opacity 1.2s ease}
.orb2 .orbit i{position:absolute;left:31px;top:353px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FBE3A6,#E3A537)}
.orb3{width:420px;height:420px;background:#FFDCE7}
.hilite{position:absolute;left:0;right:0;top:0;height:360px;background:radial-gradient(70% 60% at 10% 0%,rgba(255,255,255,.75),rgba(255,255,255,0));opacity:0;transition:opacity 1.2s ease}
.grain{position:absolute;inset:0;width:100%;height:100%;opacity:.08;mix-blend-mode:multiply;transform:translateZ(0)}
.goldglow{position:absolute;left:calc(50% - 140px);top:170px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(247,213,138,.55) 0%,rgba(247,213,138,0) 65%);animation:glow 1.2s ease 2.7s both}
.spk{position:absolute;fill:#EDB247}

/* scenes: orb1 520, orb2 470, orb3 420 scaled to the design sizes per screen */
.s-entry .orb1{transform:translate(calc(var(--W) - 240px),-150px) scale(.904)}
.s-entry .orb2{transform:translate(calc(var(--W) - 232px),-70px) scale(.851)}
.s-entry .orb2 .orbit{opacity:1}
.s-entry .orb3{transform:translate(-170px,470px) scale(.667)}
.s-entry .hilite{opacity:1}
.s-kb .orb1{transform:translate(calc(var(--W) - 160px),-150px) scale(.635)}
.s-kb .orb2{transform:translate(calc(var(--W) - 160px),-100px) scale(.617)}
.s-kb .orb3{transform:translate(-300px,calc(var(--H) + 40px)) scale(.6)}
.s-lobby .orb1{transform:translate(calc(var(--W) - 210px),-170px) scale(.846)}
.s-lobby .orb2{transform:translate(calc(var(--W) - 210px),-100px) scale(.809)}
.s-lobby .orb3{transform:translate(-190px,calc(var(--H) - 360px)) scale(.714)}
.s-hlobby .orb1{transform:translate(calc(var(--W) - 210px),-190px) scale(.846)}
.s-hlobby .orb2{transform:translate(calc(var(--W) - 210px),-120px) scale(.809)}
.s-hlobby .orb3{transform:translate(-200px,430px) scale(.714)}
.s-q .orb1{transform:translate(-150px,-170px) scale(.654)}
.s-q .orb2{transform:translate(-96px,-150px) scale(.638)}
.s-q .orb3{transform:translate(calc(var(--W) - 160px),250px) scale(1);opacity:.62}
.s-res .orb1{transform:translate(calc(var(--W) / 2 - 260px),-330px) scale(1)}
.s-res .orb2{transform:translate(calc(var(--W) / 2 - 235px),-300px) scale(1)}
.s-res .orb3{transform:translate(calc(var(--W) + 60px),calc(var(--H) + 60px)) scale(.7)}
.s-pin .orb1{transform:translate(-220px,-200px) scale(.885)}
.s-pin .orb2{transform:translate(-150px,-150px) scale(.851)}
.s-pin .orb3{transform:translate(calc(var(--W) + 40px),calc(var(--H) - 300px)) scale(.7)}
.s-hub .orb1{transform:translate(calc(var(--W) - 190px),-230px) scale(.8)}
.s-hub .orb2{transform:translate(calc(var(--W) - 200px),-170px) scale(.78)}
.s-hub .orb3{transform:translate(-230px,calc(var(--H) - 300px)) scale(.75)}
.s-edit .orb1{transform:translate(calc(var(--W) - 150px),-250px) scale(.62)}
.s-edit .orb2{transform:translate(calc(var(--W) - 170px),-220px) scale(.62)}
.s-edit .orb3{transform:translate(-260px,calc(var(--H) - 220px)) scale(.75);opacity:.7}

/* ------------------------------------------------------------- buttons */
.cta{all:unset;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;border-radius:999px;font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:.01em;text-align:center;cursor:default;transition:transform .18s ease,box-shadow .3s ease,background .3s ease,color .3s ease;-webkit-user-select:none;user-select:none}
.cta:focus-visible{outline:2px solid var(--rasp);outline-offset:3px}
.cta-on{background:linear-gradient(180deg,#D13D74 0%,#B92B5F 100%);color:#FFFFFF;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 26px -12px rgba(185,43,95,.7),0 2px 4px rgba(91,20,51,.12);cursor:pointer}
.cta-on:active{transform:scale(.97)}
.cta-off{background:#F7D3DF;color:#A6708A}
.cta-call{animation:unlock .45s var(--spring) both,callme 1.6s ease-in-out .5s infinite}
.cta-gold{background:linear-gradient(180deg,#FBE09A 0%,#EDB040 100%);color:var(--ok-ink);font-weight:700;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 28px -12px rgba(201,138,30,.75);cursor:pointer}
.cta-gold:active{transform:scale(.97)}
.cta-gold::after{content:'';position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));animation:goldshine 2.6s ease-in-out 1.2s infinite}
.cta-soft{background:rgba(255,255,255,.85);color:var(--ink);box-shadow:0 1px 0 #FFFFFF inset,0 12px 26px -16px rgba(91,20,51,.35);cursor:pointer}
.cta-soft:active{transform:scale(.97)}
.cta svg{position:relative;flex:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cta svg.star{width:13px;height:13px;fill:var(--ok-ink);stroke:none}
.cta span{position:relative}
.linkbtn{all:unset;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:600;color:var(--rasp-sm);cursor:pointer}
.linkbtn:active{background:rgba(255,255,255,.6)}
.linkbtn:focus-visible{outline:2px solid var(--rasp);outline-offset:2px}
.linkbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.roundbtn{all:unset;box-sizing:border-box;flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFE4EC;cursor:pointer;transition:transform .15s ease,background .2s ease}
.roundbtn:active{transform:scale(.92)}
.roundbtn:focus-visible{outline:2px solid var(--rasp);outline-offset:2px}
.roundbtn.white{background:rgba(255,255,255,.88);box-shadow:0 1px 0 #FFFFFF inset,0 10px 22px -16px rgba(91,20,51,.45)}
.roundbtn svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.roundbtn[disabled]{opacity:.4;cursor:default}

/* ---------------------------------------------------------------- field */
.field{display:block;width:100%;height:56px;padding:0 18px;border-radius:16px;border:1.5px solid #F4C2D3;background:#FFF7FA;font-family:var(--sans);font-size:17px;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;-webkit-appearance:none;appearance:none}
.field::placeholder{color:#B98A9D}
.field:focus{outline:none;border-color:var(--rasp);background:#FFFFFF;box-shadow:0 0 0 4px rgba(225,72,126,.14)}
.field.bad{border-color:var(--rasp-deep);background:#FFFFFF}
textarea.field{height:auto;min-height:56px;padding:15px 18px;line-height:1.35;resize:none;overflow:hidden}

/* --------------------------------------------------------------- status */
.status{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 1px 0 #FFFFFF inset,0 12px 26px -16px rgba(91,20,51,.35);font-size:15px;font-weight:600;color:var(--ink);text-align:center;animation:rise .5s var(--ease-out) .15s both}
.status .mut{font-weight:500;color:var(--ink2)}
.status .okc{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--rasp-deep);color:#FFFFFF}
.status .okc .ico{width:15px;height:15px}
.status .okc.dice{background:#FFE4EC;color:var(--rasp-sm)}
.status .okc.dice svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pulse{position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:var(--rasp)}
.pulse::after{content:'';position:absolute;inset:-6px;border-radius:50%;background:rgba(225,72,126,.25);animation:breathe 1.6s ease-in-out infinite}
.dots{display:inline-flex;align-items:center;margin-left:-4px}
.dots i{display:inline-block;width:4px;height:4px;margin-left:3px;border-radius:50%;background:var(--ink2);animation:dot 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
.dots.lg i{width:5px;height:5px;margin-left:4px;background:currentColor}

/* ----------------------------------------------------------------- icons */
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.ico path{stroke-dasharray:26;animation:draw .45s ease .3s both}

/* ----------------------------------------------------------- host badge */
.hostbadge{all:unset;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:999px;background:linear-gradient(180deg,#F9DD97 0%,#F2B84B 100%);color:var(--ok-ink);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 14px -6px rgba(201,138,30,.6);white-space:nowrap}
.hostbadge svg{width:10px;height:10px;fill:var(--ok-ink)}
.hostbadge.sm{height:20px;padding:0 9px;font-size:10px;gap:5px;box-shadow:none}
.hostbadge.sm svg{width:9px;height:9px}
button.hostbadge{cursor:pointer;position:relative}
button.hostbadge::before{content:'';position:absolute;inset:-12px -6px}
button.hostbadge:focus-visible{outline:2px solid var(--rasp);outline-offset:2px}
.hostbadge .chev{width:8px;height:8px;fill:none;stroke:var(--ok-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-left:1px}
.hostbadge.sm .chev{width:7px;height:7px}

/* ---------------------------------------------------------------- column */
.col{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:24px 16px calc(18px + var(--safe-b))}
.spacer{flex:1 1 auto}

/* ---------------------------------------------------------------- entry */
.entry{display:flex;flex-direction:column}
.entry-top{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;padding:76px 26px 0}
.entry-hb{margin:0;display:flex;align-items:center;gap:10px;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.2;color:var(--rasp-sm)}
.entry-hb svg{width:14px;height:14px;fill:var(--gold-deep);flex:none}
.entry-h1{margin:20px 0 0;font-family:var(--serif);font-weight:600;font-size:56px;line-height:.98;letter-spacing:-.02em;color:var(--ink)}
.entry-h1 span{display:block}
.entry-h1 .liza{margin-top:2px;font-style:italic;font-weight:500;font-size:78px;line-height:1;letter-spacing:-.01em;color:var(--rasp)}
.entry-intro{margin:24px 0 0;max-width:300px;font-size:16px;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.entry-card{position:relative;z-index:1;margin:0 14px calc(14px + var(--safe-b));padding:22px 20px 20px;border-radius:30px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 #FFFFFF inset,0 26px 50px -26px rgba(91,20,51,.32),0 2px 6px rgba(91,20,51,.05);display:flex;flex-direction:column;gap:16px}
.entry-card.shake{animation:shake .45s ease}
.entry-fields{display:flex;flex-direction:column;gap:10px}
.entry-label{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.2;color:var(--ink)}
.entry-help{margin:0;font-size:13px;line-height:1.4;color:var(--ink2);transition:color .2s ease}
.entry-help.bad{color:var(--rasp-sm);font-weight:600}
.entry-note{margin:16px 0 0;max-width:300px;font-size:15px;line-height:1.45;font-weight:600;color:var(--rasp-sm)}
/* keyboard open: compact title, card pinned above the keyboard */
.entry-top-in{display:flex;flex-direction:column}
.entry-top-in.swap{animation:swapin .42s cubic-bezier(.22,1,.36,1) both}
.entry-top-in.swap .rise-lg{animation:none}
.entry.kb .entry-top{flex:none;padding:22px 26px 0}
.entry.kb .entry-hb{font-size:17px;gap:8px}
.entry.kb .entry-hb svg{width:12px;height:12px}
.entry.kb .entry-h1{margin-top:8px;font-size:32px;line-height:1.05;letter-spacing:-.015em}
.entry.kb .entry-h1 span{display:inline}
.entry.kb .entry-h1 .liza{font-size:inherit;line-height:inherit;margin:0;letter-spacing:-.015em}
.entry-spk{position:absolute;inset:0;pointer-events:none}
.entry-note[hidden]{display:none}
.entry.kb .entry-intro,.entry.kb .entry-note,.entry.kb .entry-spk{display:none}
.entry.kb .entry-gap{flex:1 1 auto;min-height:12px}
.entry.kb .entry-card{margin:0 14px 12px;padding:20px 20px 18px;border-radius:28px;background:rgba(255,255,255,.9);gap:14px}
.entry.kb .entry-label{font-size:21px}
.entry.kb.tiny .entry-top{display:none}

/* ---------------------------------------------------------------- lobby */
.lobby .col{padding-top:70px}
.lobby-head{padding:0 10px;display:flex;flex-direction:column;gap:14px}
.eyebrow-r{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rasp-sm)}
.eyebrow-r svg{width:11px;height:11px;fill:var(--gold-deep)}
.h-hello{margin:0;font-family:var(--serif);font-weight:600;font-size:48px;line-height:1.02;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.h-hello em{font-style:italic;font-weight:500;color:var(--rasp)}
.lead-p{margin:0;max-width:300px;font-size:16px;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.panel{margin-top:34px;padding:20px 18px 22px;border-radius:28px;background:rgba(255,255,255,.62);box-shadow:0 1px 0 #FFFFFF inset,0 24px 44px -28px rgba(91,20,51,.3);display:flex;flex-direction:column;gap:16px;min-height:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-h h2{margin:0;font-family:var(--serif);font-size:21px;font-weight:600}
.count-pill{min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:var(--ink);color:var(--pink3);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:-4px -6px -10px;padding:4px 6px 10px}
.chips-scroll.scrolls{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent)}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;max-width:100%;height:40px;padding:0 14px 0 5px;border-radius:999px;background:#FFFFFF;box-shadow:0 8px 18px -12px rgba(91,20,51,.4),0 1px 2px rgba(91,20,51,.06);font-size:15px;font-weight:600;color:var(--ink);animation:chipin .55s var(--spring) both}
.chip .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .ava{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:15px;font-weight:700}
.chip.me{box-shadow:0 0 0 1.5px var(--rasp-deep) inset,0 8px 18px -12px rgba(185,43,95,.5)}
.chip .you{flex:none;font-weight:500;color:var(--rasp-sm)}
.chip .spark{position:absolute;right:-6px;top:-8px;width:14px;height:14px;fill:var(--gold-deep);animation:spark 1.2s ease both}
.a0{background:#FFD6E3;color:var(--ink)}
.a1{background:#FBE2A2;color:var(--ink)}
.a2{background:var(--ink);color:var(--pink3)}
.a3{background:#FFB4CB;color:var(--ink)}
.a-me{background:var(--rasp-deep);color:#FFFFFF}
.lobby .status,.late .status{flex:none;margin-top:16px;gap:12px;background:rgba(255,255,255,.82)}
.late-card{margin-top:34px;padding:20px 22px;border-radius:28px;background:rgba(255,255,255,.62);box-shadow:0 1px 0 #FFFFFF inset,0 24px 44px -28px rgba(91,20,51,.3);display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ------------------------------------------------------------- question */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px;min-height:64px}
.hl{display:flex;flex-direction:column;gap:4px;min-width:0}
.eyerow{display:flex;align-items:center;gap:8px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.qn{display:flex;align-items:baseline;gap:7px;font-family:var(--serif);line-height:1;white-space:nowrap}
.qn b{font-size:38px;font-weight:600;color:var(--ink)}
.qn i{font-size:19px;font-style:italic;color:var(--ink2)}
.segs{margin-top:18px;padding:0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.segs.many{gap:2px}
.segs span{height:4px;border-radius:2px;background:rgba(91,20,51,.11);transition:background .4s ease}
.segs .d{background:var(--rasp)}
.segs .now{background:var(--rasp);animation:blink 1.6s ease-in-out infinite}
.timer{position:relative;flex:none;width:64px;height:64px;border-radius:50%;box-shadow:0 12px 24px -14px rgba(91,20,51,.45)}
.tsvg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.timer .face{fill:#FFFFFF;stroke:var(--pink1);stroke-width:4;transition:fill .35s ease,stroke .35s ease}
.timer .arc{fill:none;stroke:var(--rasp);stroke-width:4;stroke-linecap:round;stroke-dasharray:175.93;transition:stroke-dashoffset 1s linear,stroke .35s ease}
.timer .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;transition:color .35s ease}
.timer.urgent{animation:beat 1s ease-in-out infinite}
.timer.urgent .face{fill:var(--rasp-deep);stroke:#EE8DB0}
.timer.urgent .arc{stroke:#FFFFFF}
.timer.urgent .num{color:#FFFFFF}
.timer.urgent::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(225,72,126,.45);animation:halo 1s ease-out infinite}
.tdone{position:relative;flex:none;width:64px;height:64px;border-radius:50%;border:4px solid rgba(91,20,51,.1);background:rgba(255,255,255,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;animation:chipin .45s ease both}
.tdone b{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink2);font-variant-numeric:lining-nums tabular-nums}
.tdone small{margin-top:2px;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.edge{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 90px rgba(225,72,126,.4);animation:edge 1s ease-in-out infinite}
.verdict{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 7px;border-radius:999px;font-family:var(--serif);font-size:20px;font-weight:700;white-space:nowrap;animation:chipin .6s var(--spring) .15s both}
.verdict .vi{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.verdict small{font-family:var(--sans);font-size:13px;font-weight:700;opacity:.85}
.v-hit{background:linear-gradient(180deg,#FCE6AE,#F2B84B);color:var(--ok-ink);box-shadow:0 12px 24px -12px rgba(201,138,30,.8)}
.v-hit .vi{background:#FFFFFF;color:#9A5F08}
.v-miss{background:#FFFFFF;color:var(--ink);box-shadow:0 0 0 1.5px rgba(201,52,106,.45) inset,0 10px 20px -14px rgba(91,20,51,.4)}
.v-miss .vi{background:#FFE4EC;color:var(--rasp-sm)}
.verdict .sp{position:absolute;width:12px;height:12px;fill:var(--gold-deep);animation:spark 1.1s ease-out both}
.qa{flex:1 1 auto;min-height:0;display:flex;align-items:center;padding:20px 6px 24px}
.q{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(20px,min(calc(var(--W) * .074),calc(var(--H) * .034)),30px);line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty;overflow-wrap:break-word;animation:rise .6s var(--ease-out) .1s both}
.opts{flex:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.opt{all:unset;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;min-height:66px;padding:12px 16px 12px 12px;border-radius:20px;background:#FFFFFF;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.3;font-weight:500;text-align:left;overflow-wrap:break-word;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 24px -16px rgba(91,20,51,.32),0 1px 3px rgba(91,20,51,.06);transition:transform .25s cubic-bezier(.2,.8,.2,1),background .45s ease,color .45s ease,box-shadow .45s ease,opacity .45s ease,filter .45s ease;-webkit-user-select:none;user-select:none}
button.opt{cursor:pointer}
button.opt:active{transform:scale(.98)}
button.opt:disabled{cursor:default}
button.opt:disabled:active{transform:none}
.opt:focus-visible{outline:2px solid var(--rasp);outline-offset:2px}
.opt .badge{position:relative;flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFE4EC;color:var(--ink);font-family:var(--serif);font-size:18px;font-weight:600;transition:background .35s ease,color .35s ease}
.opt .otext{position:relative;flex:1 1 auto;min-width:0}
.opt .lead{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px}
.shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.shine::after{content:'';position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));animation:shine 1.1s ease .2s both}
.opt.on{background:linear-gradient(180deg,#D13D74 0%,#BA2C60 100%);color:#FFFFFF;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 30px -16px rgba(185,43,95,.75);animation:pop .4s var(--spring)}
.opt.on .badge{background:#FFFFFF;color:#B92B5F}
.opt.on.lock{animation:lockin .5s var(--spring) both}
.opt.on.lock .badge{animation:badgeflip .5s ease .05s both}
.lockmark{position:relative;flex:none;display:flex;align-items:center;gap:6px;opacity:.9}
.lockmark svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.opt.dim{opacity:.42;filter:saturate(.4)}
.opt.ok{background:linear-gradient(180deg,#FCE6AE 0%,#F2B84B 100%);color:var(--ok-ink);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 32px -16px rgba(201,138,30,.8);animation:reveal .6s var(--spring) .1s both}
.opt.ok .badge{background:#FFFFFF;color:#9A5F08}
.opt.ok .otext{font-weight:600}
.opt.miss{background:#FFFFFF;box-shadow:0 0 0 2px var(--rasp-deep) inset,0 12px 24px -16px rgba(185,43,95,.45)}
.opt.miss .badge{background:var(--rasp-deep);color:#FFFFFF}
.opt.mute{animation:fadeto .5s ease both}
.tag{position:absolute;top:-9px;right:14px;z-index:2;display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;animation:chipin .5s var(--spring) .4s both}
.tag-ok{background:var(--ink);color:#FCE6AE}
.tag-me{background:var(--rasp-deep);color:#FFFFFF}
.bottom{flex:none;margin-top:16px;min-height:58px}

/* host question / reveal */
.opts.host .opt{background:rgba(255,255,255,.88);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 22px -18px rgba(91,20,51,.3),0 1px 3px rgba(91,20,51,.05)}
.answered{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1;animation:chipin .5s var(--spring) both}
.answered b{font-family:var(--serif);font-size:30px;font-weight:700;font-variant-numeric:lining-nums tabular-nums}
.answered small{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.meter{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 14px;border-radius:14px;background:rgba(255,255,255,.72);box-shadow:0 1px 2px rgba(91,20,51,.05)}
.meter .txt{font-size:14px;color:var(--ink2);white-space:nowrap}
.meter .txt b{display:inline-block;font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);margin:0 2px;font-variant-numeric:lining-nums tabular-nums;animation:countin .35s ease both}
.pips{display:flex;gap:5px;min-width:0;justify-content:flex-end;flex-wrap:nowrap}
.pips span{flex:0 1 8px;width:8px;height:8px;min-width:3px;border-radius:50%;background:rgba(91,20,51,.14);transition:background .3s ease,transform .3s cubic-bezier(.3,1.6,.5,1)}
.pips.many{gap:2px}
.pips.many span{border-radius:2px}
.pips .y{background:var(--rasp)}
.pips .r{background:#F2A9C1}
.pips .g{background:var(--gold-deep)}
.pips .new{animation:chipin .5s cubic-bezier(.3,1.6,.5,1) both}
.fillwrap{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.fill{position:absolute;left:0;top:0;bottom:0;background:#FFDCE7;transform-origin:0 50%;animation:bar .9s cubic-bezier(.2,.8,.2,1) both}
.count{position:relative;flex:none;display:flex;align-items:center;gap:5px;font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;animation:countup .4s ease both}
.count svg{width:14px;height:14px;fill:none;stroke:var(--ink2);stroke-width:2;stroke-linecap:round}
.count.zero{color:#B98A9D}
.opt .lead .count{display:none}
.opt.okbar{background:#FFFFFF;box-shadow:0 0 0 2px var(--gold-deep) inset,0 16px 30px -16px rgba(201,138,30,.65);animation:reveal .6s var(--spring) .1s both}
.opts.host .opt.okbar{background:#FFFFFF;box-shadow:0 0 0 2px var(--gold-deep) inset,0 16px 30px -16px rgba(201,138,30,.65)}
.opt.okbar .fill{background:linear-gradient(90deg,#FCE6AE,#F6CB6B)}
.opt.okbar .badge{background:var(--ink);color:#FCE6AE}
.opt.okbar .otext{font-weight:600}
.opt.okbar .ico path{animation-delay:.35s}
.opt.okbar .tag{animation-delay:.45s}

/* ---------------------------------------------------------------- splash */
.spl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.spl .ring{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;border:1.5px solid rgba(214,160,60,.6);animation:ringout 1.6s ease-out both}
.spl .ring2{animation-delay:.35s}
.spl .disc{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFFFFF 0%,#FFE4EC 70%);box-shadow:0 30px 60px -30px rgba(91,20,51,.35);animation:spnum .6s var(--spring) both}
.spl .eyebrow{position:relative}
.spl .big{position:relative;font-family:var(--serif);font-size:110px;font-weight:600;line-height:.9;color:var(--ink);animation:spnum .7s var(--spring) .1s both}
.spl .of{position:relative;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink2)}

/* --------------------------------------------------------------- results */
.res .col{padding:44px 16px calc(14px + var(--safe-b));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.res-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;animation:rise .6s var(--ease-out) both}
.res-eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rasp-sm)}
.res-eyebrow svg{width:10px;height:10px;fill:var(--gold-deep)}
.res-h1{margin:0;font-family:var(--serif);font-weight:600;font-size:35px;line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.res-h1 em{font-style:italic;font-weight:500;color:var(--rasp)}
.podium{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;padding:0 2px;flex:none}
.pcol{display:flex;flex-direction:column;align-items:center;min-width:0}
.pname{display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:12px;text-align:center;max-width:100%;animation:drop .5s ease both}
.pname .n{display:flex;align-items:center;gap:6px;max-width:100%;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.15;color:var(--ink)}
.pname .n span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pname .n svg{flex:none;width:11px;height:11px;fill:var(--gold-deep)}
.pcol.p1 .pname .n{font-size:23px;font-weight:700}
.pname .s{font-size:13px;color:var(--ink2)}
.pname .s b{font-weight:700;color:var(--ink)}
.pname .metag{margin-top:3px}
.medal{position:relative;z-index:2;width:46px;height:46px;margin-bottom:-23px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:21px;font-weight:700;color:var(--ink);animation:medal .55s var(--spring) both}
.medal.m1{width:52px;height:52px;margin-bottom:-26px;font-size:24px;background:radial-gradient(circle at 32% 28%,#FFF3D1 0%,#F7D27E 36%,#E5A93E 74%,#C98A1E 100%);box-shadow:0 0 0 3px #FFFFFF,0 10px 20px -6px rgba(201,138,30,.65)}
.medal.m2{background:radial-gradient(circle at 32% 28%,#FFFFFF 0%,#F1E6EB 38%,#D3C0C9 78%,#BBA4B0 100%);box-shadow:0 0 0 3px #FFFFFF,0 8px 16px -6px rgba(91,20,51,.35)}
.medal.m3{background:radial-gradient(circle at 32% 28%,#FFEDE4 0%,#F3C4AD 38%,#DD9A7D 78%,#C47A5E 100%);box-shadow:0 0 0 3px #FFFFFF,0 8px 16px -6px rgba(196,122,94,.55)}
.pedestal{width:100%;border-radius:22px 22px 12px 12px;transform-origin:50% 100%;animation:grow .8s cubic-bezier(.2,.9,.25,1.1) both;background:linear-gradient(180deg,#FFFFFF 0%,#FFE5EE 100%);box-shadow:0 1px 0 #FFFFFF inset,0 18px 30px -20px rgba(91,20,51,.35)}
.p1 .pedestal{height:150px;background:linear-gradient(180deg,#D84A7F 0%,#B92B5F 100%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 22px 34px -18px rgba(185,43,95,.7)}
.p2 .pedestal{height:112px}
.p3 .pedestal{height:88px}
.pcol.empty .pedestal{opacity:.45}
.floor{flex:none;height:12px;margin:0 6px;background:radial-gradient(ellipse 50% 100% at 50% 0%,rgba(91,20,51,.16),rgba(91,20,51,0))}
.rows{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.row{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 16px 0 12px;border-radius:16px;background:rgba(255,255,255,.78);box-shadow:0 1px 2px rgba(91,20,51,.05);animation:rise .6s var(--ease-out) both}
.row .rk{flex:none;width:24px;text-align:center;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink2)}
.row .nm{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.row .nm span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .sc{flex:none;font-size:13px;color:var(--ink2)}
.row .sc b{font-size:15px;font-weight:700;color:var(--ink)}
.row.me{background:#FFFFFF;box-shadow:0 0 0 1.5px var(--rasp-deep) inset,0 12px 22px -14px rgba(185,43,95,.55)}
.row.me .rk{font-weight:700;color:var(--rasp-sm)}
.row.me .sc,.row.me .sc b{color:var(--rasp-sm)}
.metag{flex:none;padding:3px 8px;border-radius:999px;background:var(--rasp-deep);color:#FFFFFF;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.thanks{margin:14px 0 0;text-align:center;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--rasp-sm);animation:rise .6s var(--ease-out) 3.9s both}
.confetti{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;perspective:600px}
.cf{position:absolute;top:-24px;display:block;animation-timing-function:cubic-bezier(.3,.4,.55,1);animation-fill-mode:both;will-change:transform}
.cf0{animation-name:fall0}.cf1{animation-name:fall1}.cf2{animation-name:fall2}.cf3{animation-name:fall3}
.res-back{display:flex;justify-content:center;margin-top:6px;animation:rise .6s var(--ease-out) 4.2s both}

/* ------------------------------------------------------------------ PIN */
.pin-col{padding:66px 24px calc(30px + var(--safe-b))}
.pin-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pins{display:flex;justify-content:center;gap:16px}
.pins.err{animation:shake .45s ease}
.pin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(91,20,51,.22);transition:background .2s ease,border-color .2s ease}
.pin.f{border-color:transparent;background:linear-gradient(180deg,#D84A7F,#B92B5F);animation:pinpop .3s cubic-bezier(.3,1.6,.5,1)}
.pins.err .pin{border-color:var(--rasp-deep)}
.pins.err .pin.f{background:var(--rasp-deep)}
.pins.ok .pin{border-color:transparent;background:linear-gradient(180deg,#FBE09A,#E3A537);animation:okglow .8s ease-out both}
.pin-msg{margin:0;min-height:20px;font-size:14px;font-weight:600;color:var(--ink2);text-align:center}
.pin-msg.err{color:var(--rasp-sm)}
.pin-msg.ok{color:var(--ink)}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.key{all:unset;box-sizing:border-box;height:64px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:#FFFFFF;color:var(--ink);font-family:var(--serif);font-size:28px;font-weight:600;font-variant-numeric:lining-nums;box-shadow:0 1px 0 #FFFFFF inset,0 10px 22px -16px rgba(91,20,51,.45),0 1px 2px rgba(91,20,51,.06);cursor:pointer;transition:transform .12s ease,background .2s ease;-webkit-user-select:none;user-select:none}
.key:active{transform:scale(.93);background:#FFE4EC}
.key:focus-visible{outline:2px solid var(--rasp);outline-offset:2px}
.key.ghost{background:transparent;box-shadow:none}
.key.ghost:active{background:rgba(255,255,255,.6)}
.key svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gap{height:64px}

/* ------------------------------------------------------------ host lobby */
.hl-col{padding:30px 16px calc(18px + var(--safe-b))}
.hl-head{padding:0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hl-h1{margin:0;font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.02;letter-spacing:-.02em}
.hl-h1 em{font-style:italic;font-weight:500;color:var(--rasp)}
.hl-p{margin:0;font-size:15px;line-height:1.45;color:var(--ink2)}
.qrcard{flex:none;margin-top:18px;padding:20px 20px 16px;border-radius:30px;background:rgba(255,255,255,.9);box-shadow:0 1px 0 #FFFFFF inset,0 26px 50px -28px rgba(91,20,51,.35),0 2px 6px rgba(91,20,51,.05);display:flex;flex-direction:column;align-items:center;gap:14px}
.qrbox{position:relative;width:200px;height:200px;padding:6px;border-radius:18px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(91,20,51,.08)}
.qrbox svg{width:100%;height:100%;display:block}
.scanline{position:absolute;left:10px;right:10px;top:12px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(225,72,126,0),rgba(225,72,126,.8),rgba(225,72,126,0));animation:scan 3.2s ease-in-out infinite}
.urlrow{align-self:stretch;display:flex;align-items:center;gap:10px;padding:4px 4px 4px 14px;border-radius:999px;background:#FFF4F8}
.urlrow .u{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urlrow .copied{color:var(--rasp-sm)}
.hl-guests{flex:1 1 auto;margin-top:20px;padding:0 6px;display:flex;flex-direction:column;gap:12px;min-height:0}
.hl-guests .chips-scroll{flex:0 1 auto}
.col > .cta,.col > .status,.bottom .cta{flex:none}
.hl-guests h2{margin:0;font-family:var(--serif);font-size:20px;font-weight:600}
.hl-guests .count-pill{min-width:32px;height:32px;font-size:17px}
.hl-guests .chips{gap:7px}
.hl-guests .chip{height:36px;padding:0 12px 0 4px;gap:7px;font-size:14px}
.hl-guests .chip .ava{width:28px;height:28px;font-size:14px}
.hl-guests .empty{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}
.hint{margin:0 0 10px;text-align:center;font-size:13px;line-height:1.4;font-weight:600;color:var(--rasp-sm)}

/* -------------------------------------------------------------- host hub */
.hub-col{padding:30px 16px calc(18px + var(--safe-b));overflow-y:auto;overscroll-behavior:contain}
.hub-head{padding:0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cards{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px 18px 18px 20px;border-radius:28px;background:rgba(255,255,255,.86);box-shadow:0 1px 0 #FFFFFF inset,0 24px 44px -28px rgba(91,20,51,.32),0 2px 6px rgba(91,20,51,.04);animation:rise .7s var(--ease-out) both}
button.card{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:12px;padding:18px 18px 18px 20px;border-radius:28px;background:rgba(255,255,255,.86);box-shadow:0 1px 0 #FFFFFF inset,0 24px 44px -28px rgba(91,20,51,.32),0 2px 6px rgba(91,20,51,.04);cursor:pointer;transition:transform .18s ease;animation:rise .7s var(--ease-out) both}
button.card:active{transform:scale(.98)}
button.card:focus-visible{outline:2px solid var(--rasp);outline-offset:2px}
.card-row{display:flex;align-items:center;gap:14px}
.card-ico{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFE4EC;color:var(--rasp-sm)}
.card-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-ico.gold{background:linear-gradient(180deg,#FCE6AE,#F2B84B);color:var(--ok-ink)}
.card-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.card-txt h2{margin:0;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.15}
.card-txt p{margin:0;font-size:14px;line-height:1.4;color:var(--ink2)}
.card-txt p b{font-weight:700;color:var(--ink)}
.card-txt p .warn{color:var(--rasp-sm);font-weight:600}
.card .chev{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card.locked{opacity:.62}
.card .lockico{flex:none;width:18px;height:18px;fill:none;stroke:var(--ink2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card .cta{height:54px}
.card-actions{display:flex;flex-direction:column;align-items:center;gap:2px}

/* ----------------------------------------------------------- top bar */
.topbar{display:flex;align-items:center;gap:12px;padding:0 4px;min-height:48px}
.topbar h1{flex:1 1 auto;min-width:0;margin:0;font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar h1 i{font-weight:500;color:var(--rasp)}
.saved{flex:none;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap}
.saved svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.saved.warn{color:var(--rasp-sm)}
.subline{margin:6px 0 0;padding:0 6px;font-size:14px;line-height:1.45;color:var(--ink2)}
.subline b{color:var(--ink)}

/* ---------------------------------------------------------- question list */
.qlist{list-style:none;margin:16px -16px 0;padding:6px 16px 120px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.qitem{position:relative;display:flex;align-items:center;gap:12px;padding:12px 6px 12px 12px;border-radius:20px;background:#FFFFFF;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 24px -16px rgba(91,20,51,.32),0 1px 3px rgba(91,20,51,.06);touch-action:pan-y;transition:box-shadow .2s ease,transform .2s ease}
.qitem.drag{z-index:5;box-shadow:0 0 0 2px var(--rasp) inset,0 24px 40px -18px rgba(185,43,95,.55);transition:none}
.qitem.ghostpos{transition:transform .2s ease}
.qitem .badge{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFE4EC;font-family:var(--serif);font-size:17px;font-weight:600;font-variant-numeric:lining-nums}
.qitem.ready .badge{background:var(--ink);color:#FCE6AE}
.qitem .open{all:unset;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;cursor:pointer;padding:2px 0}
.qitem .open:focus-visible{outline:2px solid var(--rasp);outline-offset:4px;border-radius:8px}
.qitem .qt{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.qitem .qt.empty{color:#B98A9D;font-weight:500}
.qitem .qs{font-size:12.5px;line-height:1.3;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qitem .qs.warn{color:var(--rasp-sm);font-weight:600}
.handle{all:unset;flex:none;width:44px;height:48px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;border-radius:12px}
.handle:active{cursor:grabbing;background:#FFF4F8}
.handle:focus-visible{outline:2px solid var(--rasp)}
.handle svg{width:18px;height:18px;fill:#B98A9D}
.empty-state{margin:40px 10px 0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.empty-state h2{margin:0;font-family:var(--serif);font-size:26px;font-weight:600}
.empty-state p{margin:0;max-width:280px;font-size:15px;line-height:1.5;color:var(--ink2)}
.dock{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:28px 16px calc(18px + var(--safe-b));background:linear-gradient(180deg,rgba(255,234,241,0) 0%,rgba(255,234,241,.92) 40%,#FFEAF1 100%)}

/* -------------------------------------------------------- question editor */
.ed-col{padding:24px 16px 0;overflow-y:auto;overscroll-behavior:contain}
.ed-sec{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.ed-lab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 4px}
.ed-lab label,.ed-lab h2{margin:0;font-family:var(--serif);font-size:20px;font-weight:600}
.ed-lab .cnt{font-size:12.5px;font-weight:600;color:#B98A9D;font-variant-numeric:tabular-nums}
.ed-lab .cnt.near{color:var(--rasp-sm)}
.ed-hint{margin:-2px 4px 0;font-size:13px;line-height:1.4;color:var(--ink2)}
.ed-opt{position:relative;display:flex;align-items:flex-start;gap:10px}
.ed-opt .pick{all:unset;box-sizing:border-box;flex:none;margin-top:9px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFFFFF;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 20px -12px rgba(91,20,51,.4),0 0 0 1px rgba(91,20,51,.06);color:var(--ink);font-family:var(--serif);font-size:18px;font-weight:600;cursor:pointer;transition:background .3s ease,color .3s ease,transform .15s ease,box-shadow .3s ease}
.ed-opt .pick:active{transform:scale(.9)}
.ed-opt .pick:focus-visible{outline:2px solid var(--rasp);outline-offset:2px}
.ed-opt .pick.on{background:linear-gradient(180deg,#FCE6AE 0%,#F2B84B 100%);color:#9A5F08;box-shadow:0 10px 20px -10px rgba(201,138,30,.8)}
.ed-opt .pick .ico{width:17px;height:17px}
.ed-opt .fwrap{position:relative;flex:1 1 auto;min-width:0}
.ed-opt textarea.field{font-size:16px;padding:14px 16px;min-height:56px}
.ed-opt.correct textarea.field{border-color:var(--gold-deep);background:#FFFBEF}
.ed-opt .tag{top:-8px;right:12px;animation-delay:0s}
.ed-opt .tag[hidden]{display:none}
.ed-opt .cnt{position:absolute;right:12px;bottom:-17px;font-size:11.5px;font-weight:600;color:#B98A9D;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s ease}
.ed-opt .fwrap:focus-within .cnt{opacity:1}
.ed-opt .cnt.near{opacity:1;color:var(--rasp-sm)}
.ed-opts{display:flex;flex-direction:column;gap:26px;padding-bottom:6px}
.checklist{margin:22px 0 0;padding:14px 16px;border-radius:20px;background:rgba(255,255,255,.62);display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.4}
.checklist .ok{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.checklist .ok .ico{width:16px;height:16px;color:var(--gold-deep)}
.checklist .miss{display:flex;align-items:center;gap:8px;color:var(--rasp-sm);font-weight:600}
.checklist .miss::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--rasp)}
.ed-actions{margin-top:18px;padding-bottom:calc(28px + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:8px}

/* -------------------------------------------------------------- preview */
.pv{position:absolute;inset:0;z-index:20;background:rgba(91,20,51,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;animation:fadein .3s ease both}
.pv-bar{flex:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 8px}
.pv-bar span{font-family:var(--serif);font-style:italic;font-size:18px;color:#FFFFFF}
.pv-frame{position:relative;flex:none;overflow:hidden;border-radius:28px;box-shadow:0 30px 60px -20px rgba(91,20,51,.6);transform-origin:50% 0;animation:rise .45s var(--ease-out) both}
.pv-frame .stage{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--bg);overflow:hidden}

/* --------------------------------------------------------------- settings */
.set-card{margin-top:16px;padding:20px 18px;border-radius:28px;background:rgba(255,255,255,.86);box-shadow:0 1px 0 #FFFFFF inset,0 24px 44px -28px rgba(91,20,51,.32);display:flex;flex-direction:column;gap:16px;animation:rise .7s var(--ease-out) both}
.set-card h2{margin:0;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stepper .val{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);line-height:1}
.stepper .val b{font-size:56px;font-weight:600;font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.stepper .val i{font-size:20px;color:var(--ink2)}
.stepper .roundbtn{width:52px;height:52px}
.stepper .roundbtn svg{width:22px;height:22px;stroke-width:2.2}
.presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.preset{all:unset;box-sizing:border-box;min-width:0;height:42px;padding:0 4px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#FFF4F8;color:var(--ink);font-size:15px;font-weight:600;font-variant-numeric:lining-nums;cursor:pointer;box-shadow:0 0 0 1px rgba(91,20,51,.06) inset;transition:background .25s ease,color .25s ease,transform .15s ease}
.preset:active{transform:scale(.94)}
.preset:focus-visible{outline:2px solid var(--rasp);outline-offset:2px}
.preset.on{background:linear-gradient(180deg,#D13D74 0%,#B92B5F 100%);color:#FFFFFF;box-shadow:0 10px 20px -12px rgba(185,43,95,.7)}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{min-height:0;align-items:flex-start;padding:14px 16px 14px 12px}
.choice .badge svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.choice .ct{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.choice .ct b{font-size:16px;font-weight:700}
.choice .ct span{font-size:13.5px;line-height:1.4;opacity:.85}
.choice.on .ct span{opacity:.92}
.locknote{margin:16px 6px 0;display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.4;font-weight:600;color:var(--rasp-sm)}
.locknote svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------- sheet */
.sheet-wrap{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:flex-end}
.sheet-bg{position:absolute;inset:0;background:rgba(91,20,51,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadein .25s ease both}
.sheet:focus{outline:none}
.sheet{position:relative;margin:0 8px calc(8px + var(--safe-b));padding:10px 18px 18px;border-radius:30px;background:#FFFFFF;box-shadow:0 -10px 40px -16px rgba(91,20,51,.35);display:flex;flex-direction:column;gap:10px;animation:sheetin .38s var(--ease-out) both}
.sheet .grab{align-self:center;width:40px;height:4px;border-radius:2px;background:rgba(91,20,51,.14);margin-bottom:6px}
.sheet h2{margin:6px 4px 0;font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.15}
.sheet p{margin:0 4px 8px;font-size:15px;line-height:1.5;color:var(--ink2)}
.sheet-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 14px 8px 8px;border-radius:20px;background:#FFF7FA;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s ease,transform .15s ease}
.sheet-item:active{transform:scale(.98);background:#FFE4EC}
.sheet-item:focus-visible{outline:2px solid var(--rasp);outline-offset:2px}
.sheet-item .card-ico{width:40px;height:40px}
.sheet-item.danger{color:var(--rasp-sm)}
.sheet .cta{height:54px}

/* ------------------------------------------------------------- banner */
.banner{position:absolute;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100% - 24px);top:calc(10px + env(safe-area-inset-top,0px));z-index:40;display:flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 14px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 1px 0 #FFFFFF inset,0 14px 30px -14px rgba(91,20,51,.45);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;animation:bannerin .35s var(--ease-out) both}
.banner .pulse{width:10px;height:10px}
.banner .pulse::after{inset:-5px}
.toast{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(92px + var(--safe-b));z-index:40;max-width:calc(100% - 32px);padding:12px 18px;border-radius:18px;background:var(--ink);color:#FFE4EC;font-size:14px;font-weight:600;line-height:1.35;text-align:center;box-shadow:0 18px 34px -16px rgba(91,20,51,.7);animation:bannerin .3s var(--ease-out) both}

/* long text on a tall screen: same moves as the compact layout */
.tight .qa{padding-top:12px;padding-bottom:14px}
.tight .opts.host.revealed .opt > .count{display:none}
.tight .opts.host.revealed .opt .lead .count{display:flex;gap:2px;font-size:15px;line-height:1}
.tight .opts.host.revealed .opt .lead .count svg{width:11px;height:11px;stroke-width:2.2}

/* -------------------------------------------------- compact (README) */
@media (max-height:720px){
  .col{padding:14px 16px calc(12px + var(--safe-b))}
  .hdr{min-height:54px}
  .hl{gap:3px}
  .eyebrow{font-size:11px}
  .qn{gap:6px}
  .qn b{font-size:32px}
  .qn i{font-size:17px}
  .segs{margin-top:12px}
  .timer,.tdone{width:54px;height:54px}
  .timer .num{font-size:21px}
  .timer.urgent::after{inset:-6px}
  .tdone b{font-size:19px}
  .tdone small{font-size:7.5px}
  .verdict{height:38px;padding:0 14px 0 6px;gap:7px;font-size:18px}
  .verdict .vi{width:26px;height:26px}
  .qa{padding:10px 6px 12px}
  .opts{gap:8px}
  .opt{gap:12px;min-height:56px;padding:10px 14px 10px 10px;border-radius:18px;font-size:15px}
  .opt .badge{width:34px;height:34px;font-size:16px}
  .ico{width:16px;height:16px}
  .bottom{margin-top:12px;min-height:54px}
  .cta{height:54px}
  .status{min-height:54px}
  .meter{margin-top:8px;height:24px;padding:0 6px;background:none;box-shadow:none;border-radius:0}
  .meter .txt{font-size:13px}
  .meter .txt b{font-size:17px}
  .answered b{font-size:26px}
  .answered small{font-size:10px}
  .opts.host .opt{min-height:54px;padding:8px 14px 8px 10px}
  .lockmark{display:none}
  .opts.host.revealed .opt{padding:8px 12px 8px 10px}
  .opts.host.revealed .opt > .count{display:none}
  .opts.host.revealed .opt .lead .count{display:flex;gap:2px;font-size:15px;line-height:1}
  .opts.host.revealed .opt .lead .count svg{width:11px;height:11px;stroke-width:2.2}
  .lobby .col{padding-top:40px}
  .h-hello{font-size:42px}
  .panel,.late-card{margin-top:24px}
  .entry-top{padding-top:48px}
  .entry-h1{font-size:50px}
  .entry-h1 .liza{font-size:68px}
  .entry-intro{margin-top:18px;font-size:15px}
  .hl-col{padding-top:20px}
  .hl-h1{font-size:34px}
  .qrcard{margin-top:14px;padding:14px 16px 12px;gap:10px}
  .qrbox{width:168px;height:168px}
  .pin-col{padding-top:36px}
  .pin-col .h-hello{font-size:42px}
  .key{height:56px}
  .gap{height:56px}
  .res .col{padding-top:28px}
  .res-h1{font-size:31px}
  .podium{margin-top:16px}
  .p1 .pedestal{height:120px}
  .p2 .pedestal{height:90px}
  .p3 .pedestal{height:70px}
}
/* very short screens (e.g. 375x550 with browser bars) */
@media (max-height:600px){
  .col{padding:10px 14px calc(10px + var(--safe-b))}
  .hdr{min-height:48px}
  .qn b{font-size:28px}
  .qn i{font-size:15px}
  .segs{margin-top:10px}
  .timer,.tdone{width:48px;height:48px}
  .timer .num{font-size:19px}
  .tdone b{font-size:17px}
  .verdict{height:34px;font-size:16px}
  .verdict .vi{width:24px;height:24px}
  .qa{padding:8px 4px 10px}
  .q{font-size:19px;line-height:1.18}
  .opts{gap:6px}
  .opt{gap:10px;min-height:48px;padding:7px 12px 7px 8px;border-radius:16px;font-size:14px;line-height:1.25}
  .opt .badge{width:30px;height:30px;font-size:15px}
  .tag{top:-8px;height:16px;font-size:9px}
  .bottom{margin-top:10px;min-height:48px}
  .cta{height:48px;font-size:16px}
  .status{min-height:48px;font-size:14px}
  .meter{margin-top:6px;height:20px}
  .opts.host .opt{min-height:48px;padding:6px 12px 6px 8px}
  .lobby .col{padding-top:24px}
  .h-hello{font-size:36px}
  .entry-top{padding-top:28px}
  .entry-h1{font-size:42px}
  .entry-h1 .liza{font-size:56px}
  .entry-intro{display:none}
  .entry-card{padding:16px 16px 14px;gap:12px}
  .key{height:50px;border-radius:18px}
  .gap{height:50px}
  .pin-col{padding-top:22px}
  .pin-col .h-hello{font-size:34px}
  .hl-col{padding-top:12px}
  .hl-head{gap:8px}
  .hl-h1{font-size:30px}
  .hl-p{font-size:14px}
  .qrcard{margin-top:10px;padding:12px 14px 10px;gap:8px;border-radius:26px}
  .qrbox{width:132px;height:132px;padding:4px;border-radius:14px}
  .scanline{display:none}
  .hl-guests{margin-top:12px;gap:8px}
  .hint{margin-bottom:6px}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .timer .arc{transition:stroke-dashoffset 1s linear!important}
  .confetti,.edge,.scanline,.tw,.orbit,.goldshine{display:none}
}
/* screenshot mode: everything at its final frame */
.still *,.still *::before,.still *::after{animation-delay:-60s!important;animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}
.still .confetti,.still .scanline{display:none}