:root{--ink:#1b1d24;--sky:#9fd9ff;--gas:#9bff2e;--gas2:#5fd400;--orange:#ff8a3d;--blue:#2f7ff0;--navy:#113b66;--font-display:"Lilita One","Archivo",system-ui,sans-serif;--font:"Archivo",system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--sky);height:100%;font-family:var(--font);color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none;margin:0;overflow:hidden}#game{width:100%;height:100%;display:block;position:fixed;inset:0}.hud{pointer-events:none;position:fixed;inset:0}.hud[hidden]{display:none}.progress{background:#ffffff59;height:6px;position:absolute;top:0;left:0;right:0}.progress-fill{background:var(--gas);width:0;height:100%;box-shadow:0 0 12px var(--gas);transition:width .15s linear}.progress-ticks{position:absolute;inset:0}.progress-ticks i{background:#fff;border-radius:2px;width:4px;height:12px;position:absolute;top:-3px;transform:translate(-2px)}.progress-ticks i.done{background:var(--gas2)}.progress-raft{filter:drop-shadow(0 2px 2px #0000004d);font-size:18px;transition:left .15s linear;position:absolute;top:-8px;left:0;transform:translate(-50%)}.gasbars{flex-direction:column;gap:6px;display:flex;position:absolute;bottom:18px;left:16px}.gasbar{opacity:.95;align-items:center;gap:8px;animation:.5s cubic-bezier(.2,1.4,.4,1) forwards slidein;display:flex;transform:translate(-34px)}.gasbar:nth-child(2){animation-delay:60ms}.gasbar:nth-child(3){animation-delay:.12s}.gasbar:nth-child(4){animation-delay:.18s}@keyframes slidein{to{transform:none}}.gasbar .av{background:var(--c);border:3px solid #fff;border-radius:50%;place-items:center;width:34px;height:34px;font-size:18px;display:grid;position:relative;box-shadow:0 2px 6px #00000040}.gasbar .bar{background:#00000059;border:2px solid #ffffffe6;border-radius:8px;width:150px;height:14px;position:relative;overflow:hidden}.gasbar .bar b{transform-origin:0;background:linear-gradient(90deg,var(--gas2),var(--gas));width:100%;transition:transform 80ms linear;position:absolute;inset:0}.gasbar .bar.empty b{background:#ff5a5a}.gasbar .nm{font-family:var(--font-display);color:#fff;text-shadow:0 2px #00000059;letter-spacing:.5px;min-width:70px;font-size:14px}.gasbar .nm small{font-family:var(--font);opacity:.9;font-size:10px;font-weight:600;display:block}.gasbar.farting .av{animation:.25s puff}@keyframes puff{50%{transform:scale(1.25)}}.gasbar.speaking .av:after{content:"";border:3px solid var(--gas);border-radius:50%;animation:.6s ease-in-out infinite alternate ring;position:absolute;inset:-7px}@keyframes ring{0%{opacity:.6;transform:scale(.92)}to{opacity:1;transform:scale(1.08)}}.topbar{justify-content:flex-end;align-items:flex-start;gap:12px;display:flex;position:absolute;top:14px;left:16px;right:16px}.timer,.pill{font-family:var(--font-display);color:#fff;text-shadow:0 2px #00000059;background:#00000047;border:2px solid #fffc;border-radius:999px;align-items:center;gap:8px;padding:4px 16px;font-size:22px;display:flex}.timer{position:absolute;left:50%;transform:translate(-50%)}.right{align-items:center;gap:10px;display:flex}.mic{cursor:pointer;pointer-events:auto;color:#fff;background:#00000047;border:2px solid #fffc;border-radius:999px;width:42px;height:42px;font-size:20px}.mic.off{background:#d62f4a}.mic[hidden]{display:none}.toast{font-family:var(--font-display);color:#fff;text-shadow:0 4px #0000004d,0 0 30px #0003;opacity:0;pointer-events:none;letter-spacing:1px;white-space:nowrap;font-size:clamp(34px,7vw,72px);position:absolute;top:22%;left:50%;transform:translate(-50%)scale(.7)}.toast.show{animation:1.4s cubic-bezier(.2,1.4,.4,1) forwards toast}@keyframes toast{0%{opacity:0;transform:translate(-50%,30px)scale(.6)}20%{opacity:1;transform:translate(-50%)scale(1.05)}75%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-30px)scale(.9)}}.countdown{font-family:var(--font-display);color:#fff;text-shadow:0 8px #00000040;pointer-events:none;place-items:center;font-size:clamp(90px,22vw,220px);display:grid;position:absolute;inset:0}.countdown span{animation:.9s cubic-bezier(.2,1.6,.4,1) forwards cd}@keyframes cd{0%{opacity:0;transform:scale(2.4)}30%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.race-hint{font-family:var(--font-display);letter-spacing:1px;color:#fff;opacity:0;white-space:nowrap;text-overflow:ellipsis;background:#00000059;border:2px solid #ffffffb3;border-radius:999px;max-width:92vw;padding:10px 22px;font-size:clamp(16px,2.6vw,26px);transition:opacity .4s,transform .4s cubic-bezier(.2,1.4,.4,1);position:absolute;bottom:14%;left:50%;overflow:hidden;transform:translate(-50%,20px)}.race-hint.show{opacity:1;transform:translate(-50%)}.touch{display:none;position:absolute;inset:0}@media (pointer:coarse){.touch{display:block}}.touch .zone{pointer-events:auto;font-family:var(--font-display);color:#ffffffbf;text-shadow:0 2px #0000004d;justify-content:center;align-items:flex-end;padding-bottom:22px;font-size:16px;display:flex;position:absolute}.touch .zone:active{background:#9bff2e26}.screen{text-align:center;background:radial-gradient(120% 90% at 50% 0,#ffffff59,#0000 60%),linear-gradient(#9fd9ff8c,#49b1ff99);flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px 16px;display:flex;position:fixed;inset:0;overflow:auto}.screen[hidden]{display:none}.logo{font-family:var(--font-display);flex-direction:column;align-items:center;line-height:.85;display:flex;transform:rotate(-3deg)}.logo .l1{color:#ffd23f;-webkit-text-stroke:3px #a14d00;text-shadow:0 8px #a14d00,0 14px 24px #00000040;font-size:clamp(76px,17vw,160px);animation:.7s cubic-bezier(.2,1.5,.4,1) both drop}.logo .l2{color:#fff;-webkit-text-stroke:3px #1b4fa8;text-shadow:0 7px #1b4fa8,0 14px 24px #00000040;font-size:clamp(56px,12vw,120px);animation:.7s cubic-bezier(.2,1.5,.4,1) .12s both drop}@keyframes drop{0%{opacity:0;transform:translateY(-60px)scale(1.2)}}.h{font-family:var(--font-display);color:#fff;-webkit-text-stroke:3px #1b4fa8;text-shadow:0 7px #1b4fa8;margin:0;font-size:clamp(56px,12vw,110px);animation:.7s cubic-bezier(.2,1.5,.4,1) both drop;transform:rotate(-3deg)}.tag{color:var(--navy);margin:0;font-size:clamp(16px,2.6vw,22px);font-weight:700;animation:.6s .3s both fade}@keyframes fade{0%{opacity:0;transform:translateY(16px)}}.hint{color:var(--navy);max-width:560px;margin:0;font-size:14px;font-weight:600;animation:.6s .5s both fade}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;animation:.6s .55s both fade;display:flex}.opt{color:var(--navy);align-items:center;gap:6px;font-size:14px;font-weight:600;display:flex}.opt select{font:600 14px var(--font);border:2px solid var(--navy);background:#fff;border-radius:8px;padding:4px 8px}.btn{font-family:var(--font-display);letter-spacing:1px;color:#fff;cursor:pointer;background:linear-gradient(#ff9a4d,#ff6a1f);border:0;border-radius:999px;padding:14px 38px;font-size:26px;transition:transform .15s cubic-bezier(.2,1.5,.4,1),box-shadow .15s;animation:.6s .6s both fade;box-shadow:0 7px #b84500,0 14px 24px #0003}.btn:hover{transform:translateY(-3px)scale(1.03)}.btn:active{transform:translateY(4px);box-shadow:0 2px #b84500}.btn.ghost{color:#c2410c;background:#fff;box-shadow:0 7px #e2c9b8}.btn.alt{background:linear-gradient(#5fd400,#3fae3a);box-shadow:0 7px #1f6e00,0 14px 24px #0003}.btn.alt:active{box-shadow:0 2px #1f6e00}.btn[hidden]{display:none}.row.big .btn{padding:18px 46px;font-size:30px}.seats{flex-wrap:wrap;justify-content:center;gap:12px;animation:.6s .4s both fade;display:flex}.seat{background:#fff;border:4px solid #0000;border-radius:18px;min-width:150px;padding:12px 14px;transition:transform .25s cubic-bezier(.2,1.5,.4,1),border-color .2s;box-shadow:0 8px #0000001f}.seat.human{border-color:var(--gas2);transform:translateY(-6px)}.seat.me{border-color:var(--orange)}.seat .face{font-size:44px;line-height:1}.seat .who{font-family:var(--font-display);color:var(--c);font-size:20px}.seat .role{opacity:.7;font-size:12px;font-weight:600}.seat .name{min-height:1.2em;margin-top:4px;font-size:14px;font-weight:700}.seat kbd{font:600 12px var(--font);background:#f1f1f1;border:1px solid #ddd;border-bottom-width:3px;border-radius:6px;margin-top:6px;padding:2px 7px;display:inline-block}.seat.speaking .face{animation:.3s ease-in-out infinite alternate talk}@keyframes talk{to{transform:scale(1.12)rotate(-4deg)}}.worlds{flex-direction:column;gap:14px;width:100%;max-width:980px;animation:.6s .3s both fade;display:flex}.world{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffb8;border-radius:22px;flex-wrap:wrap;align-items:center;gap:16px;padding:14px 16px;display:flex;box-shadow:0 10px #00000014}.world h2{font-family:var(--font-display);color:var(--w);text-align:left;letter-spacing:.5px;min-width:150px;margin:0;font-size:26px}.world h2 span{font:600 12px var(--font);color:var(--navy);opacity:.8;display:block}.level{text-align:left;cursor:pointer;background:#fff;border:3px solid #0000;border-radius:16px;flex-direction:column;flex:1;gap:4px;min-width:200px;padding:12px 14px;transition:transform .2s cubic-bezier(.2,1.5,.4,1),box-shadow .2s;display:flex;position:relative;box-shadow:0 6px #0000001a}.level:hover:not(.locked){border-color:var(--w);transform:translateY(-4px)}.level.locked{opacity:.55;cursor:not-allowed;filter:grayscale(.6)}.level .n{font-family:var(--font-display);color:var(--ink);font-size:19px}.level .n small{font:600 11px var(--font);color:var(--navy);opacity:.75;margin-left:6px}.level .s{letter-spacing:2px;color:#d9d9d9;font-size:18px}.level .s b{color:#ffb400;text-shadow:0 1px #a14d00}.level .t{font:600 12px var(--font);color:var(--navy);opacity:.8}.level .lock{font-size:20px;position:absolute;top:12px;right:12px}.panel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffb8;border-radius:24px;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:560px;padding:22px 24px;animation:.5s .15s both fade;display:flex;box-shadow:0 12px #00000014}.panel[hidden]{display:none}.field{font:600 18px var(--font);border:3px solid var(--navy);text-align:center;width:100%;max-width:320px;color:var(--ink);background:#fff;border-radius:14px;padding:12px 16px}.field.code{text-transform:uppercase;letter-spacing:6px;font-family:var(--font-display);max-width:180px;font-size:26px}.joinrow{width:100%}.err{color:#b91c1c;min-height:1.2em;margin:0;font-size:14px;font-weight:700}.codebox{color:var(--navy);font-size:16px;font-weight:700}.codebox b{font-family:var(--font-display);letter-spacing:6px;color:#c2410c;vertical-align:middle;margin-left:10px;font-size:38px}.invite{width:100%}.invite .field{text-align:left;max-width:360px;font-size:13px}.finish h1{font-family:var(--font-display);color:#fff;-webkit-text-stroke:3px #c2410c;text-shadow:0 8px #c2410c;margin:0;font-size:clamp(70px,16vw,150px);animation:.7s cubic-bezier(.2,1.5,.4,1) both drop;transform:rotate(-3deg)}.stars{gap:10px;font-size:clamp(44px,9vw,80px);line-height:1;display:flex}.stars i{color:#ffffff73;text-shadow:0 3px #00000026;opacity:.6;font-style:normal;transform:scale(.6)}.stars i.on{color:#ffb400;text-shadow:0 4px #a14d00,0 0 24px #ffb40099;animation:.6s cubic-bezier(.2,1.6,.4,1) both star}.stars i:nth-child(2){transition-delay:.2s}.stars i.on:nth-child(2){animation-delay:.25s}.stars i.on:nth-child(3){animation-delay:.5s}@keyframes star{0%{opacity:0;transform:scale(2.2)rotate(-20deg)}to{opacity:1;transform:scale(1)}}.result{font-family:var(--font-display);color:var(--navy);flex-direction:column;font-size:clamp(40px,8vw,80px);line-height:1;display:flex}.result small{font:600 16px var(--font);opacity:.8;margin-top:6px}.best{color:#2a6e00;background:#d9ffb0;border-radius:999px;padding:6px 14px;font-weight:700}.best:empty,#f-wait[hidden]{display:none}@media (width<=700px){.gasbar .bar{width:100px}.gasbar .nm{min-width:0}.gasbar .nm small{display:none}.world h2{text-align:center;min-width:100%}.world h2 span{margin-left:8px;display:inline}}@media (prefers-reduced-motion:reduce){*{transition-duration:10ms!important;animation-duration:10ms!important}}.players{background:#ffffffb8;border-radius:999px;align-items:center;gap:6px;padding:6px 8px 6px 16px;display:flex;box-shadow:0 6px #00000014}.players span{font:700 14px var(--font);color:var(--navy);margin-right:4px}.players button{font-family:var(--font-display);width:42px;height:42px;color:var(--navy);cursor:pointer;background:#fff;border:0;border-radius:50%;font-size:20px;transition:transform .15s cubic-bezier(.2,1.5,.4,1),background .15s,color .15s;box-shadow:0 3px #0000001f}.players button.on{background:var(--orange);color:#fff;transform:scale(1.12);box-shadow:0 3px #b84500}.row.setup{animation-delay:.2s}.seat.empty{opacity:.5;filter:grayscale(.7)}