:root{--pri: #2f7bff;--pri-d: #1b5fd9;--navy: #12327a;--pink: #ffd23f;--teal: #2ec4b6;--ink: #16306e;--muted: #6b7aa8;--line: #d6e3ff;--good: #16a34a;--danger: #e5484d;--card: #ffffff;--bg: #2f6bff;--soft: #eaf1ff;font-family:"Baloo 2",Segoe UI,system-ui,-apple-system,Roboto,sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}#root{min-height:100%}body{color:var(--ink);-webkit-font-smoothing:antialiased}.scLogo{display:block}.scApp{min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:20px 16px;background-color:#2f6bff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.11' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 30 q10 -12 20 0 t20 0'/%3E%3Ccircle cx='112' cy='26' r='10'/%3E%3Cpath d='M24 104 h18 M33 95 v18'/%3E%3Cpath d='M100 100 l14 24 h-28 z'/%3E%3Cpath d='M62 118 q9 11 18 0'/%3E%3Ccircle cx='128' cy='112' r='3.2' fill='white' stroke='none'/%3E%3Ccircle cx='66' cy='74' r='3.2' fill='white' stroke='none'/%3E%3Ccircle cx='20' cy='70' r='3.2' fill='white' stroke='none'/%3E%3C/g%3E%3C/svg%3E")}.scBoot{align-items:center}.scHome{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:var(--card);border:3px solid #cfe0ff;border-radius:24px;padding:26px 22px;box-shadow:0 14px #12327a2e,0 24px 50px #0a1e5a4d}.scTitle{margin:4px 0 0;font-size:clamp(30px,9vw,46px);font-weight:800;letter-spacing:.5px;color:var(--pri);text-shadow:0 3px 0 #cfe0ff,0 4px 6px rgba(18,50,122,.2)}.scTag{margin:2px 0 10px;color:var(--muted);font-size:14px;font-weight:700}.scUser{display:inline-flex;align-items:center;gap:10px;background:var(--soft);border:2px solid var(--line);border-radius:999px;padding:6px 16px 6px 6px;margin-bottom:4px}.scUserAv{width:34px;height:34px;border-radius:50%;object-fit:cover}.scFb{display:grid;place-items:center;background:var(--pri);color:#fff;font-weight:900}.scUserTxt{display:flex;flex-direction:column;line-height:1.2;text-align:left}.scUserTxt b{font-size:14px}.scUserTxt span{font-size:11px;color:var(--muted)}.scMenu{width:100%;display:flex;flex-direction:column;gap:11px}.scBtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border-radius:14px;padding:14px 18px;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.5px;transition:transform .05s,filter .12s;border:3px solid transparent}.scBtn:active{transform:translateY(3px);box-shadow:none!important}.scBtn:disabled{filter:grayscale(.4) opacity(.55);cursor:not-allowed}.scPrimary{background:linear-gradient(180deg,#3f88ff,var(--pri-d));color:#fff;border-color:var(--navy);box-shadow:0 5px 0 var(--navy)}.scPrimary:hover{filter:brightness(1.05)}.scLight{background:#fff;color:var(--pri-d);border-color:#bcd3ff;box-shadow:0 5px #bcd3ff}.scLight:hover{background:#f3f7ff}.scGhost{background:linear-gradient(180deg,#ffe072,var(--pink));color:#6a4e00;border-color:#c9962a;box-shadow:0 5px #c9962a}.scGhost:hover{filter:brightness(1.04)}.scRow2{display:flex;gap:10px;width:100%}.scRow2 .scBtn{flex:1}.scCode{border:3px solid var(--line);background:#f3f7ff;border-radius:14px;padding:14px;font-family:ui-monospace,monospace;font-size:24px;font-weight:900;letter-spacing:8px;text-align:center;color:var(--ink);text-transform:uppercase}.scCode:focus{outline:none;border-color:var(--pri)}.scHow{width:100%;text-align:left;background:var(--soft);border:2px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:8px}.scHowTitle{color:var(--pri-d);font-size:13px;letter-spacing:2px}.scHow p{margin:8px 0 0;font-size:13px;color:#3a4a7a;line-height:1.45}.scCodeBox{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--soft);border:2px solid var(--line);border-radius:16px;padding:10px 22px}.scCodeBox span{font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:800}.scCodeBox b{font-family:ui-monospace,monospace;font-size:30px;font-weight:900;letter-spacing:8px;color:var(--pri-d)}.scPlayers{width:100%;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.scChip{display:inline-flex;align-items:center;gap:8px;background:var(--soft);border:2px solid var(--line);border-radius:999px;padding:5px 14px 5px 5px;font-size:13px;font-weight:700}.scChipAv{width:26px;height:26px;border-radius:50%;object-fit:cover}.scChipAv.big{width:34px;height:34px}.scWait{color:var(--muted);font-size:14px}.scToast{position:fixed;z-index:30;bottom:20px;left:50%;transform:translate(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:700}.scPlayApp{align-items:flex-start;padding:12px}.scPlayApp,.scPlayApp .scMain{width:100%}.scPlayApp>*{max-width:1000px;margin:0 auto}.scBar{width:100%;max-width:1000px;margin:0 auto 10px;display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 12px;box-shadow:0 5px #12327a1f}.scPill{font-size:12px;font-weight:800;background:var(--soft);border:2px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--muted);white-space:nowrap}.scPillBtn{cursor:pointer;color:var(--ink);margin-left:auto}.scPillBtn:hover{background:#d9e6ff}.scTimer{font-size:16px;font-weight:900;color:var(--pri-d);min-width:52px;text-align:center}.scTimer.danger{color:var(--danger)}.scWordBar{font-size:16px;font-weight:700;color:var(--ink);flex:1;text-align:center;overflow:hidden}.scWordBar b{color:var(--pri-d)}.scSlots{display:inline-flex;gap:5px;flex-wrap:wrap;justify-content:center}.scSlot{display:inline-grid;place-items:center;min-width:16px;height:22px;border-bottom:3px solid var(--pri);font-weight:900;font-size:16px;color:var(--pri-d)}.scSlotGap{width:12px}.scMain{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.scStage{position:relative;flex:2 1 380px;min-width:300px}.scCanvasWrap{display:flex;flex-direction:column;gap:8px}.scCanvas{width:100%;aspect-ratio:640 / 430;background:#fff;border:3px solid var(--line);border-radius:16px;box-shadow:0 8px #12327a1f;touch-action:none}.scCanvas.drawable{cursor:crosshair}.scTools{display:flex;flex-direction:column;gap:8px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px}.scSwatches{display:flex;flex-wrap:wrap;gap:6px}.scSwatch{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}.scSwatch.on{outline:3px solid var(--pri);outline-offset:1px;transform:scale(1.12)}.scSizes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.scSize{width:34px;height:34px;border-radius:8px;background:var(--soft);border:2px solid var(--line);display:grid;place-items:center;cursor:pointer}.scSize span{display:block;background:var(--ink);border-radius:50%}.scSize.on{background:var(--pri)}.scSize.on span{background:#fff}.scTool{min-width:34px;height:34px;border-radius:8px;background:var(--soft);border:2px solid var(--line);cursor:pointer;font-size:15px}.scTool.on{background:var(--pri)}.scOverlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#12327a8c;border-radius:16px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.scChoose{background:var(--card);border:3px solid var(--line);border-radius:18px;padding:22px;text-align:center;max-width:90%;box-shadow:0 12px 40px #0000004d}.scChoose h3{margin:0 0 14px;color:var(--ink)}.scChoose p{margin:8px 0 0;color:var(--muted)}.scChoices{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.scChoices .scBtn{text-transform:capitalize}.scSpinner{width:42px;height:42px;margin:0 auto;border-radius:50%;border:5px solid var(--line);border-top-color:var(--pri);animation:scSpin .9s linear infinite}@keyframes scSpin{to{transform:rotate(360deg)}}.scReveal{background:var(--card);border:3px solid var(--line);border-radius:18px;padding:20px 24px;text-align:center;box-shadow:0 12px 40px #0000004d;min-width:240px}.scRevealWord{margin:0 0 12px;font-size:18px}.scRevealWord b{color:var(--pri-d);text-transform:capitalize}.scGains{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.scGainRow{display:flex;justify-content:space-between;gap:20px;font-size:14px}.scGainRow b.plus{color:var(--good)}.scDim{color:var(--muted);font-size:13px;margin:0}.scSide{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:12px}.scScores{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:4px;max-height:190px;overflow-y:auto}.scScoreRow{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;font-size:13px;font-weight:700}.scScoreRow.drawer{background:#e8f0ff}.scScoreRow.guessed{background:#e9f9ef}.scScoreRow.off{opacity:.45}.scScoreName{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scScoreVal{color:var(--pri-d)}.scChat{background:var(--card);border:2px solid var(--line);border-radius:14px;display:flex;flex-direction:column;height:300px;overflow:hidden}.scChatLines{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:5px}.scMsg{font-size:13px;line-height:1.35;word-break:break-word}.scMsg b{color:var(--pri-d)}.scMsg.sys{color:var(--muted);font-style:italic;text-align:center;font-size:12px}.scMsg.correct{color:var(--good);font-weight:800}.scChatInput{display:flex;gap:6px;padding:8px;border-top:2px solid var(--line)}.scChatInput input{flex:1;border:2px solid var(--line);border-radius:10px;padding:10px;font-family:inherit;font-size:14px;color:var(--ink)}.scChatInput input:focus{outline:none;border-color:var(--pri)}.scChatInput input:disabled{background:#f3f7ff;color:var(--muted)}.scSend{padding:12px 14px}.scTrophy{font-size:66px;line-height:1}.scBoard{width:100%;display:flex;flex-direction:column;gap:6px}.scBoardRow{display:flex;align-items:center;gap:10px;background:var(--soft);border:2px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:700}.scBoardRow.first{background:linear-gradient(90deg,#fff2c2,#ffe79a);border-color:#f0cf6a}.scRank{width:22px;font-weight:900;color:var(--pri-d)}.scBoardRow .scScoreName{text-align:left}.scBootInner{display:flex;flex-direction:column;align-items:center;gap:14px}.scBoot .scTitle{color:#fff;text-shadow:0 3px 0 var(--navy),0 6px 12px rgba(0,0,0,.25)}.scLoadBar{width:200px;height:7px;border-radius:7px;background:#ffffff4d;overflow:hidden}.scLoadBar span{display:block;height:100%;width:42%;border-radius:7px;background:var(--pink);animation:scSlide 1.1s ease-in-out infinite}@keyframes scSlide{0%{transform:translate(-120%)}to{transform:translate(320%)}}.scLoadTxt{color:#eaf1ff;font-size:13px;font-weight:600;margin:0}.scBootErr{color:#ffd23f;font-weight:700;margin:0}.scBootCode{font-family:ui-monospace,monospace;font-size:11px;color:#ffd9d9;max-width:300px;word-break:break-word;text-align:center}