*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:#101A33;color:#FFF4E0;font-family:'Fredoka',system-ui,sans-serif}
h1{margin:0;font-size:56px;line-height:1;font-weight:700;color:#FFB25E;text-align:center}
main{padding:24px 16px 40px}
main#host{display:flex;flex-direction:column;align-items:center;gap:16px}
.center{min-height:100dvh;max-width:420px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:12px}
label,.h{font-size:20px;font-weight:600}
.or{text-align:center;margin:12px 0 0;color:#C7D0E6;font-size:18px}
.msg{min-height:24px;margin:0;font-size:18px;color:#FFD29C}
.small{font-size:16px;color:#C7D0E6}
.btn{font:inherit;font-weight:600;font-size:18px;border:0;cursor:pointer;min-height:44px;border-radius:12px;padding:0 16px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:3px solid #FFF4E0;outline-offset:2px}
.go{background:#FF8A1F;color:#1A1226;font-size:28px;font-weight:700;min-height:76px;width:100%;border-radius:18px;box-shadow:0 6px 0 #B4530B}
.go:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #B4530B}
.add{background:#FFB25E;color:#1A1226}.orange{background:#FF8A1F;color:#1A1226}.tan{background:#E9DAC0;color:#2A1A12}.navy{background:#2A3963;color:#FFF4E0}
.field{font:inherit;font-size:18px;width:100%;min-height:44px;padding:0 12px;border-radius:12px;border:2px solid #4A5A85;background:#16224A;color:#FFF4E0}
.field::placeholder{color:#AEB9D6}.field:focus{outline:3px solid #FFB25E;outline-offset:1px}
.field.light{background:#fff;color:#2A1A12;border-color:#B8A383}.field.light::placeholder{color:#6B5B48}
.code{text-transform:uppercase;letter-spacing:.2em;font-size:26px;text-align:center;font-weight:600}
.row{display:flex;gap:8px}.grow{flex:1}.center-row{justify-content:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:8px}.tight{gap:6px}.full{width:100%}
.between{display:flex;justify-content:space-between;font-size:17px;font-weight:500;margin-bottom:6px}
.layout{width:100%;max-width:1120px;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;align-items:flex-start}
.stageWrap{flex:999 1 420px;min-width:0;max-width:720px}
.panel{flex:1 1 300px;max-width:720px;min-width:0;display:flex;flex-direction:column;gap:20px;padding-top:16px}
#stage{position:relative;width:100%;aspect-ratio:1/1}
.ground{position:absolute;inset:7%;border-radius:50%;background:#1D2A52}
#glow{position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#FF8A1F 0%,rgba(255,138,31,0) 68%)}
#fire{position:absolute;left:50%;top:50%;width:24%;transform-origin:50% 90%;z-index:1}
svg{display:block;width:100%;overflow:visible}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick .42s ease-in-out infinite alternate}
.flame.b{animation-duration:.33s;animation-delay:-.1s}.flame.c{animation-duration:.27s;animation-delay:-.2s}
@keyframes flick{from{transform:scale(.92,1.05) skewX(-3deg)}to{transform:scale(1.06,.93) skewX(4deg)}}
.puff{animation:puff .8s ease-out infinite}.puff.b{animation-delay:-.27s}.puff.c{animation-delay:-.53s}
@keyframes puff{from{transform:translateY(0);opacity:.75}to{transform:translateY(-34px);opacity:0}}
.seat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:2}
.bubble{position:absolute;bottom:92%;left:50%;transform:translateX(-50%);background:#FFF4E0;color:#2A1A12;font-size:16px;font-weight:700;line-height:1;padding:7px 11px;border-radius:12px;white-space:nowrap;z-index:5}
.seatName{font-size:17px;font-weight:600;line-height:1.1;white-space:nowrap}
.ln{stroke:#2B1B17;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.mouth{stroke:#2B1B17;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
#potato{position:absolute;width:10%;z-index:3}
.card{background:#FFF4E0;color:#2A1A12;border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:12px;text-align:center}
#card{position:absolute;left:50%;top:50%;width:min(82%,400px);z-index:6;box-shadow:0 16px 40px rgba(0,0,0,.5);animation:pop .36s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.3) rotate(-8deg);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.card.static{width:100%}
.cardHead{font-size:18px;font-weight:700;letter-spacing:.04em;color:#B23A00}
.cardHead.reward{color:#0B6B5B}
.cardText{font-size:27px;font-weight:600;line-height:1.2}
.joinBox{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#1D2A52;border-radius:16px;padding:16px}
.roomCode{font-size:44px;font-weight:700;letter-spacing:.1em;color:#FFB25E;line-height:1.1}
#qr{width:112px;flex:none;background:#fff;border-radius:8px;padding:4px}
.meter{height:14px;border-radius:7px;background:#2A3963;overflow:hidden}#heatBar{height:100%;width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .btn{background:#2A3963;color:#FFF4E0;font-size:17px;font-weight:500;padding:0 12px}
.dare{background:#2A3963;color:#FFF4E0;font-size:16px;font-weight:500;text-align:left;padding:8px 12px}
.invite{background:#FFF4E0;color:#2A1A12;border-radius:16px;padding:16px}
.pFace{width:150px;align-self:center}.pName{text-align:center;font-size:32px;font-weight:700}
.pStatus{text-align:center;font-size:24px;font-weight:500;min-height:30px}
.tap{font:inherit;font-size:44px;font-weight:700;line-height:1.05;color:#1A1226;background:#FF8A1F;border:0;border-radius:28px;min-height:44vh;width:100%;padding:20px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;justify-content:center;gap:24px;align-items:center;animation:pulse .3s ease-in-out infinite alternate;cursor:pointer}
@keyframes pulse{from{background:#FF8A1F}to{background:#FFD84D}}
.fuse{display:block;width:80%;height:14px;background:rgba(26,18,38,.25);border-radius:7px;overflow:hidden}
#fuse{display:block;height:100%;width:100%;background:#1A1226}
@media (prefers-reduced-motion:reduce){.flame,.puff{animation:none}.tap{animation:none;background:#FFB25E}}