*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body,#root{height:100%;overflow:hidden}body{font-family:ui-rounded,Arial Rounded MT Bold,"Baloo 2",Comic Sans MS,system-ui,sans-serif;background:linear-gradient(180deg,#7cc4ff,#bfe6ff 60%,#d8f3ff);color:#23315e}button{font-family:inherit;border:none;cursor:pointer;color:inherit}.app,.screen,.game-screen{width:100%;height:100%}.screen{position:relative;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:24px 16px 40px}.home{justify-content:center;gap:8px}.logo{display:flex;gap:10px}.logo-brick{position:relative;display:flex;align-items:flex-end;justify-content:center;width:clamp(52px,12vw,92px);height:clamp(64px,14vw,108px);border-radius:10px;color:#fff;font-size:clamp(34px,8vw,62px);font-weight:900;padding-bottom:6px;box-shadow:0 8px #0000002e,0 12px 24px #00000026;animation:bob 3.2s ease-in-out infinite}.logo-brick:nth-child(2n){animation-delay:.4s}.logo-brick:nth-child(3n){animation-delay:.8s}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.logo-studs{position:absolute;top:6px;left:0;right:0;display:flex;justify-content:center;gap:10px}.logo-studs i{width:clamp(14px,3vw,22px);height:clamp(7px,1.5vw,11px);border-radius:50% 50% 40% 40%;background:#ffffff73}.logo-sub{font-size:clamp(22px,5vw,38px);font-weight:900;letter-spacing:14px;margin-top:14px;color:#23315e;text-shadow:0 2px 0 #fff}.home-tagline{margin-top:6px;font-size:18px;opacity:.85}.home-stars{margin-top:4px;font-size:20px;font-weight:800;color:#a06a00}.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:30px}.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:clamp(150px,26vw,210px);height:clamp(150px,26vw,210px);border-radius:26px;background:#fff;box-shadow:0 10px #0000001f,0 16px 30px #0000001f;transition:transform .15s}.tile:active{transform:scale(.95)}.tile-go{background:linear-gradient(160deg,#ffd117,#ff8c1a)}.tile-checkers{background:linear-gradient(160deg,#ff9dc6,#8d5bd4);color:#fff}.tile-emoji{font-size:56px}.tile-name{font-size:24px;font-weight:900}.tile-desc{font-size:15px;opacity:.75}.tile-locked{filter:saturate(.4);opacity:.75}.login-screen{justify-content:center;gap:26px}.login-title{font-size:clamp(30px,6vw,46px);font-weight:900;text-shadow:0 2px 0 #fff}.login-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.login-card{display:flex;flex-direction:column;align-items:center;gap:10px;width:clamp(150px,26vw,200px);padding:28px 12px;border-radius:26px;background:#fff;box-shadow:0 10px #0000001f,0 16px 30px #0000001f;font-weight:900;transition:transform .15s}.login-card:active{transform:scale(.93)}.login-emoji{font-size:64px}.login-name{font-size:20px}.profile-chip{position:absolute;top:14px;right:14px;background:#ffffffe6;border-radius:22px;padding:10px 16px;font-size:16px;font-weight:900;box-shadow:0 4px #0000001f}.profile-switch{opacity:.5;margin-left:4px}.lobby-me{text-align:center;font-size:17px;opacity:.85}.modes-head{width:100%;max-width:900px;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modes-head h1{font-size:clamp(28px,6vw,44px);font-weight:900;text-shadow:0 2px 0 #fff}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;width:100%;max-width:900px}.mode-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 12px;border-radius:24px;color:#fff;box-shadow:0 8px #0000002e,0 14px 26px #00000024;transition:transform .15s}.mode-card:active{transform:scale(.95)}.mode-emoji{font-size:52px}.mode-name{font-size:22px;font-weight:900;text-shadow:0 2px 3px rgba(0,0,0,.25)}.mode-desc{font-size:14px;opacity:.9}.game-screen{position:relative}.game-screen canvas{display:block}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column}.hud button{pointer-events:auto}.hud-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px}.hud-top-right{display:flex;align-items:center;gap:8px}.round-btn{width:54px;height:54px;border-radius:50%;background:#fff;font-size:24px;box-shadow:0 5px #00000026;transition:transform .12s;flex-shrink:0}.round-btn:active{transform:scale(.9)}.stars{background:#fff;border-radius:27px;padding:12px 18px;font-size:20px;font-weight:900;color:#a06a00;box-shadow:0 5px #00000026}.banner{display:flex;align-items:center;gap:10px;background:#fff;border-radius:24px;padding:10px 18px;max-width:60vw;box-shadow:0 5px #00000026;transition:transform .12s}.banner:active{transform:scale(.96)}.banner-icon{font-size:30px}.banner-text{font-size:19px;font-weight:800;text-align:left}.banner-speak{font-size:20px;opacity:.7}.progress-wrap{position:relative;align-self:center;width:min(320px,70vw);height:26px;background:#ffffffbf;border-radius:13px;overflow:hidden;box-shadow:inset 0 2px 5px #0000001f}.progress-fill{height:100%;background:linear-gradient(90deg,#ffd117,#ff8c1a);border-radius:13px;transition:width .35s ease}.progress-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#23315e}.room-chip{align-self:center;margin-top:8px;display:flex;align-items:center;gap:14px;background:#ffffffe6;border-radius:20px;padding:8px 16px;box-shadow:0 4px #0000001f;pointer-events:auto}.room-code{font-size:26px;letter-spacing:4px}.room-peers{font-size:24px}.hud-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px}.palette{display:flex;gap:8px;background:#ffffffe6;padding:8px 12px;border-radius:30px;box-shadow:0 5px #0000001f;pointer-events:auto}.swatch{width:42px;height:42px;border-radius:50%;border:4px solid rgba(0,0,0,.1);transition:transform .12s}.swatch.active{border-color:#23315e;transform:scale(1.18)}.tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;background:#ffffffe6;padding:8px 12px;border-radius:24px;box-shadow:0 5px #0000001f;pointer-events:auto}.tool-btn{min-width:52px;height:52px;border-radius:16px;background:#eef1f8;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;transition:transform .12s}.tool-btn:active{transform:scale(.9)}.tool-btn.active{background:#ffd117;box-shadow:inset 0 0 0 3px #23315e}.tool-btn.eraser-on{background:#ff9db8}.tool-btn.wide{font-size:18px}.shape-icon{display:grid;gap:2px}.shape-dot{width:7px;height:7px;border-radius:50%;background:#23315e}.modal-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:#141e3c73;display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:20}.modal{background:#fff;border-radius:26px;padding:26px;width:min(420px,90vw);display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px #0000004d}.modal h2{font-size:26px;text-align:center}.modal-sub{text-align:center;font-size:17px;opacity:.8}.modal-row{display:flex;gap:10px}.big-btn{flex:1;padding:16px 20px;border-radius:18px;background:#eef1f8;font-size:19px;font-weight:900;box-shadow:0 5px #0000001f;transition:transform .12s}.big-btn:active{transform:scale(.95)}.big-btn.go{background:linear-gradient(160deg,#ffd117,#ff8c1a)}.big-btn.danger{background:#ff9db8}.setting-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#eef1f8;font-size:19px;font-weight:800}.setting-row.off{opacity:.55}.setting-emoji{font-size:26px}.setting-label{flex:1;text-align:left}.setting-state{font-weight:900;color:#39b54a}.setting-row.off .setting-state{color:#999}.lobby-panel{display:flex;flex-direction:column;align-items:stretch;gap:16px;width:min(440px,92vw);background:#ffffffeb;border-radius:26px;padding:26px;box-shadow:0 12px #0000001a}.lobby-panel h2{text-align:center;font-size:24px}.lobby-or{text-align:center;font-weight:800;opacity:.6}.lobby-error{background:#ffe1e9;color:#b02a4c;border-radius:14px;padding:12px;text-align:center;font-weight:800}.avatar-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.avatar-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;border-radius:18px;background:#eef1f8;font-size:16px;font-weight:800;transition:transform .12s}.avatar-btn.active{background:#ffd117;box-shadow:inset 0 0 0 3px #23315e}.avatar-emoji{font-size:38px}.code-slots{display:flex;align-items:center;justify-content:center;gap:10px}.code-slot{width:62px;height:62px;border-radius:16px;background:#eef1f8;display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:inset 0 2px 6px #0000001f}.code-slot.filled{background:#fff6cf}.symbol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.symbol-btn{font-size:40px;padding:14px 0;border-radius:18px;background:#eef1f8;box-shadow:0 5px #0000001a;transition:transform .12s}.symbol-btn:active{transform:scale(.9)}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:30}.confetti span{position:absolute;top:-30px;border-radius:3px;animation-name:confetti-fall;animation-timing-function:ease-in;animation-fill-mode:forwards}@keyframes confetti-fall{0%{transform:translateY(-30px) rotate(0);opacity:1}85%{opacity:1}to{transform:translateY(110vh) rotate(var(--spin, 540deg));opacity:0}}