:root{font-family:system-ui,sans-serif;color:#f9fbff;background:#0b1025}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 30%,#24294f,transparent 65%),#0b1025}main{max-width:1200px;margin:auto;padding:25px 35px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}header>b{font-size:28px;font-weight:900;letter-spacing:-1px}header span{color:#bdff58;margin-left:5px}header small{display:block;font-size:10px;letter-spacing:2px;color:#a5adc8;margin-top:5px}button{font:inherit;cursor:pointer;background:#242b45;color:white;border:1px solid #414a69;border-radius:10px;padding:10px 16px;font-size:14px}button:hover{filter:brightness(1.2)}button:focus-visible{outline:3px solid #bdff58}.dashboard{display:grid;grid-template-columns:1fr 130px 1fr;gap:20px;margin-bottom:20px}.blue{--color:#52bdff}.orange{--color:#ffad57}article{background:#171f3b;border:1px solid #364567;border-radius:15px;padding:18px 22px}article>b{font-size:14px;color:var(--color);letter-spacing:1px}article strong{display:block;font-size:40px;font-weight:800}.meter{height:6px;border-radius:10px;background:#303955;margin:8px 0}.meter i{display:block;height:100%;width:0;background:var(--color);border-radius:10px;transition:width .2s}article small{font-size:11px;color:#abb5ce;display:inline-block;margin-right:12px}.round{text-align:center;display:flex;flex-direction:column;justify-content:center}.round span{color:#bdff58;font-size:11px;letter-spacing:1px}.round b{font-size:44px}.round small{font-size:12px;color:#acb6d0}.game{position:relative;overflow:hidden;border-radius:20px;border:1px solid #454968;box-shadow:0 24px 80px #0005;background:#111a32}canvas{display:block;width:100%;aspect-ratio:1000/560}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8%;background:linear-gradient(110deg,#101830ef,#19213dc9);padding:24px}.intro{text-align:center}.intro>small{font-size:11px;letter-spacing:3px;color:#b2bdd8}h1{font-size:clamp(45px,6vw,85px);font-weight:900;line-height:.88;letter-spacing:-4px;margin:24px 0 18px;transform:rotate(-4deg)}h1 em{color:#bdff58;font-style:normal}p{color:#c4cce0}.intro>p{font-size:19px}#start{background:#bdff58;color:#172421;font-size:18px;font-weight:800;border:0;padding:15px 35px;box-shadow:0 5px 0 #799e37}.intro .hint{font-size:13px;line-height:1.6;margin-top:22px}.host{width:200px;overflow:hidden;border-radius:120px 120px 25px 25px;background:#757575;position:relative;height:305px;border:3px solid #fff2}.host img{width:610px;max-width:none;position:absolute;top:0;left:0}.host span{position:absolute;bottom:0;left:0;right:0;background:#131b32ef;text-align:center;padding:13px;font-size:12px;letter-spacing:2px}#toast{position:absolute;top:20px;left:50%;transform:translateX(-50%);color:#bdff58;font-weight:900;font-size:22px;pointer-events:none;text-shadow:0 2px 5px #000}.bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 5px}.rules{text-align:center}.rules b{font-size:12px;letter-spacing:2px}.rules p{font-size:13px;margin:8px 0;color:#aab6d3}.pad{text-align:center}.pad small{display:block;color:var(--color);font-size:11px;letter-spacing:1px;margin-bottom:6px}.pad button{width:42px;height:36px;padding:0;margin:2px;color:var(--color);touch-action:none;user-select:none}.pad div{display:flex}footer{border-top:1px solid #2a314b;padding:18px 0;color:#7886a6;font-size:12px}dialog{max-width:540px;background:#19233f;color:white;border:1px solid #53617f;border-radius:18px;padding:30px}dialog::backdrop{background:#050a19ba}dialog p{line-height:1.65}@media(max-width:650px){main{padding:15px 12px}header>b{font-size:22px}header button{padding:8px;font-size:12px}.dashboard{grid-template-columns:1fr 60px 1fr;gap:6px}article{padding:11px}article>b{font-size:11px}article strong{font-size:30px}article small{font-size:9px}.round b{font-size:30px}.round span{font-size:8px}.round small{font-size:9px}.host{display:none}.intro>small{font-size:10px}h1{font-size:48px;margin:15px}.intro .hint{font-size:11px}.intro>p{font-size:15px}#overlay{padding:8px}.bottom{flex-wrap:wrap;gap:12px}.rules{order:3;width:100%}.game canvas{height:380px}}

.online{margin:0 0 20px;display:flex;gap:10px;flex-wrap:wrap}.online>button:first-child{background:#bdff58;color:#172421;font-weight:700}#roomInfo{width:100%;padding:14px;border:1px solid #455474;border-radius:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}#roomInfo[hidden]{display:none}#inviteLink{flex:1;min-width:180px;padding:10px;background:#111a32;color:#fff;border:1px solid #455474;border-radius:8px}#connection{color:#bdff58;font-size:14px}#roleLabel{width:100%;color:#aab6d3}