:root{--ink:#fff4dc;--plum:#4a2f5c;--night:#1d1536;--card:#1e1232db;--lav:#c9b6f0;--pumpkin:#ff9f4a;--pink:#ff8fb1;--mint:#8fe3c8;--gold:#ffd36e;font-family:Jua,Apple SD Gothic Neo,Malgun Gothic,sans-serif}*{box-sizing:border-box}html,body{background:var(--night);height:100%;color:var(--ink);margin:0;overflow:hidden}body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}canvas#view{display:block;position:fixed;inset:0}[hidden]{display:none!important}button,input{font:inherit}button{cursor:pointer;border:3px solid var(--plum);background:var(--lav);color:var(--plum);box-shadow:0 4px 0 var(--plum);border-radius:999px;padding:10px 20px;font-size:18px;transition:transform 80ms,box-shadow 80ms}button:active{box-shadow:0 1px 0 var(--plum);transform:translateY(3px)}button:disabled{opacity:.45;cursor:default}button.big{background:var(--pumpkin);padding:12px 26px;font-size:22px}button.big.alt{background:var(--lav)}button.link{box-shadow:none;color:var(--lav);background:0 0;border:none;font-size:16px;text-decoration:underline}input{border:3px solid var(--plum);background:var(--ink);color:var(--plum);text-align:center;text-transform:uppercase;-webkit-user-select:text;user-select:text;border-radius:999px;width:9em;padding:10px 16px;font-size:20px}.screen{padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:fixed;inset:0;overflow-y:auto}.card{background:var(--card);border:3px solid var(--lav);border-radius:28px;flex-direction:column;align-items:center;gap:12px;max-width:min(440px,100%);padding:20px 22px;display:flex;box-shadow:0 10px 40px #00000073}.logo{text-align:center;color:var(--gold);-webkit-text-stroke:3px var(--plum);paint-order:stroke fill;text-shadow:0 0 30px #ff9f4a8c;flex-direction:column;align-items:center;margin:0;font-weight:400;line-height:1;animation:3s ease-in-out infinite bob;display:flex}.logo span{color:var(--lav);font-size:clamp(30px,6vw,48px)}.logo b{font-size:clamp(54px,11vw,96px);font-weight:400}@keyframes bob{50%{transform:translateY(-6px)rotate(-1deg)}}.tag{text-align:center;text-shadow:0 2px 0 var(--plum);margin:0;font-size:18px}.join{gap:8px;display:flex}.msg{min-height:1.2em;color:var(--pink);text-align:center;margin:0;font-size:16px}.how{opacity:.9;text-shadow:0 2px 0 var(--plum);flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0;padding:0;font-size:15px;list-style:none;display:flex}.how b{color:var(--pink);font-weight:400}.small{opacity:.8;margin:0;font-size:15px}.code{letter-spacing:.12em;color:var(--gold);-webkit-text-stroke:2px var(--plum);paint-order:stroke fill;margin:0;font-size:56px}.seats{flex-direction:column;gap:8px;width:100%;display:flex}.seat{background:#c9b6f01f;border:2px solid #0000;border-radius:16px;justify-content:space-between;gap:16px;padding:10px 14px;display:flex}.seat.me{border-color:var(--pumpkin)}.seat .st{color:var(--lav)}.seat .st.on{color:var(--mint)}.row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}#topbar{top:max(10px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));gap:8px;display:flex;position:fixed}#topbar button{background:#c9b6f0d9;width:44px;height:44px;padding:0;font-size:18px}.overlay{background:#120c2073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay.bottom{padding-bottom:max(28px, env(safe-area-inset-bottom));pointer-events:none;background:0 0;align-items:flex-end}.overlay.bottom .row{pointer-events:auto}#pauseMsg{margin:0;font-size:22px}#touch{pointer-events:none;position:fixed;inset:0}.cluster{bottom:max(14px, env(safe-area-inset-bottom));pointer-events:auto;align-items:flex-end;gap:12px;display:flex;position:absolute}.cluster.left{left:max(14px, env(safe-area-inset-left))}.cluster.right{right:max(14px, env(safe-area-inset-right))}.cluster.grid{grid-template-columns:repeat(2,58px);gap:8px;display:grid}.cluster .who{text-align:center;text-shadow:0 2px 0 var(--plum);grid-column:1/-1;font-size:14px}.tb{width:72px;height:72px;color:var(--plum);touch-action:none;background:#c9b6f08c;border-radius:50%;padding:0;font-size:30px}.cluster.grid .tb{width:58px;height:58px;font-size:24px}.tb-s{background:#ff8fb1bf}.tb-j{background:#ff9f4ab3}.tb.on{box-shadow:0 1px 0 var(--plum);filter:brightness(1.15);transform:translateY(3px)scale(.95)}#rotate{background:var(--night);text-align:center;justify-content:center;align-items:center;padding:24px;font-size:24px;display:flex;position:fixed;inset:0}@media (orientation:landscape){#rotate{display:none!important}}