@import "https://fonts.googleapis.com/css2?family=Schoolbell&display=swap";:root{--bg:#f7f7f4;--fg:#050505;--card-bg:#fff;--card-shadow:#0000000f;--muted:#888;--divider:#ccc;--input-shadow:#050505;--strike:#e03030}body.dark{--bg:#252525;--fg:#f0f0ee;--card-bg:#303030;--card-shadow:#00000080;--muted:#999;--divider:#555;--input-shadow:#f0f0ee;--strike:#ff0}body{background:var(--bg);color:var(--fg);box-sizing:border-box;margin:0;padding:0 16px;font-family:Schoolbell,cursive;transition:background .2s,color .2s}.themeToggle{background:var(--card-bg);border:2px solid var(--fg);color:var(--fg);cursor:pointer;z-index:100;width:40px;height:40px;box-shadow:2px 2px 0 var(--fg);border-radius:50%;justify-content:center;align-items:center;font-size:18px;line-height:1;transition:background .2s,border-color .2s,box-shadow .2s;display:flex;position:fixed;top:14px;right:16px}.themeToggle:hover{box-shadow:3px 3px 0 var(--fg);transform:translate(-1px,-1px)}.modeSelect{flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:100vh;display:flex}.gameTitle{letter-spacing:4px;color:var(--fg);margin:0 0 24px;font-size:clamp(42px,5vw,80px)}.modeBtn{letter-spacing:1px;color:var(--fg);background:var(--bg);border:3px solid var(--fg);cursor:pointer;box-shadow:5px 5px 0 var(--fg);border-radius:2px;padding:clamp(12px,1.2vw,20px) clamp(40px,4vw,72px);font-family:Schoolbell,cursive;font-size:clamp(18px,1.8vw,28px);transition:transform .1s,box-shadow .1s;transform:translate(-2px,-2px)}.modeBtn:hover{box-shadow:3px 3px 0 var(--fg);transform:translate(0)}.modeBtn:active{box-shadow:0px 0px 0 var(--fg);transform:translate(3px,3px)}.gameScreen{flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:100vh;display:flex}.turnIndicator{text-align:center;min-height:48px}.turnSub{color:var(--fg);letter-spacing:1px;font-size:clamp(22px,2.2vw,36px)}.gameArea{align-items:center;gap:32px;display:flex}.playerCard{background:var(--card-bg);width:clamp(100px,10vw,160px);box-shadow:2px 2px 0 var(--card-shadow);will-change:transform;border:2px solid #0000;border-radius:6px;flex-direction:column;flex-shrink:0;align-items:center;gap:8px;padding:16px 10px 18px;transition:transform .2s,border-color .2s,background .2s;display:flex}.playerCard.active{border:2.5px dashed var(--fg);transform:rotate(-1deg)scale(1.05)}.playerAvatar{object-fit:contain;width:clamp(80px,8vw,120px);height:clamp(80px,8vw,120px)}.playerSymbol{color:var(--fg);font-size:15px;font-weight:900}.playerName{color:var(--fg);text-align:center;letter-spacing:.3px;font-size:14px}.board{filter:drop-shadow(2px 4px #00000014);flex-shrink:0;width:clamp(340px,38vw,560px);height:clamp(340px,38vw,560px)}.gridLine{fill:none;stroke:var(--fg);stroke-width:9px;stroke-linecap:round;stroke-linejoin:round;filter:url(#roughen)}.cellSymbol{fill:var(--fg);font-family:Schoolbell,cursive;font-size:48px}.cellHitbox{cursor:pointer}.cardSlot{flex-shrink:0;justify-content:center;align-items:center;width:clamp(100px,10vw,160px);display:flex}.friendInput{color:var(--fg);background:var(--bg);border:3px solid var(--fg);box-shadow:3px 3px 0 var(--input-shadow);box-sizing:border-box;border-radius:2px;outline:none;width:220px;padding:clamp(10px,1vw,16px) clamp(14px,1.4vw,22px);font-family:Schoolbell,cursive;font-size:clamp(16px,1.4vw,22px);transition:background .2s,color .2s,border-color .2s}.joinRow{align-items:center;gap:10px;display:flex}.joinCode{text-align:center;letter-spacing:4px;width:100px}.roomCode{letter-spacing:8px;color:var(--fg);border:3px solid var(--fg);box-shadow:4px 4px 0 var(--fg);margin:0;padding:8px 24px;font-family:Schoolbell,cursive;font-size:clamp(32px,3.5vw,56px)}.onlineForm{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;display:flex}.onlineFormInner{flex-direction:column;align-items:stretch;gap:10px;width:clamp(260px,28vw,420px);display:flex}.onlineFormInner .modeBtn{box-sizing:border-box;width:100%;padding:12px 0}.onlineFormInner .friendInput,.onlineFormInner .formDivider{width:100%}.fieldLabel{color:var(--muted);letter-spacing:1px;align-self:flex-start;font-size:clamp(13px,1.1vw,18px)}.formDivider{width:220px;color:var(--muted);align-items:center;gap:8px;margin:2px 0;font-size:clamp(13px,1.1vw,18px);display:flex}.formDivider:before,.formDivider:after{content:"";background:var(--divider);flex:1;height:1px}.fieldError{color:#e03030;margin:0;font-size:14px}.copyBtn{border:2px solid var(--fg);color:var(--fg);cursor:pointer;background:0 0;border-radius:4px;align-items:center;padding:6px 8px;transition:background .1s;display:flex}.copyBtn:hover{background:var(--card-bg)}.shareRow{align-items:center;gap:10px;display:flex}.shareLinkBtn{color:var(--muted);border:2px dashed var(--divider);cursor:pointer;background:0 0;border-radius:4px;align-items:center;gap:8px;padding:8px 20px;font-family:Schoolbell,cursive;font-size:clamp(15px,1.3vw,20px);transition:border-color .15s,color .15s;display:flex}.shareLinkBtn:hover{border-color:var(--fg);color:var(--fg)}.waitCard{border:3px solid var(--fg);box-shadow:5px 5px 0 var(--fg);background:var(--card-bg);border-radius:6px;flex-direction:column;align-items:center;gap:14px;min-width:260px;padding:28px 36px;display:flex}.waitLabel{color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin:0;font-size:clamp(13px,1.1vw,18px)}.codeRow{align-items:center;gap:12px;display:flex}.codeDivider{background:var(--divider);width:100%;height:1px}.waitingText{color:var(--muted);margin:0;font-size:clamp(15px,1.3vw,20px)}.gameFooter{flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:80px;display:flex}.backBtn{color:var(--muted);cursor:pointer;letter-spacing:.5px;background:0 0;border:none;padding:4px 8px;font-family:Schoolbell,cursive;font-size:clamp(14px,1.2vw,20px)}.backBtn:hover{color:var(--fg)}.nextBtn{letter-spacing:1px;color:var(--fg);background:var(--bg);border:3px solid var(--fg);cursor:pointer;box-shadow:5px 5px 0 var(--fg);border-radius:2px;padding:10px 36px;font-family:Schoolbell,cursive;font-size:18px;transition:transform .1s,box-shadow .1s;transform:translate(-2px,-2px)}.nextBtn:hover{box-shadow:3px 3px 0 var(--fg);transform:translate(0)}.nextBtn:active{box-shadow:0 0 0 var(--fg);transform:translate(3px,3px)}.strikeLine{stroke:var(--strike);stroke-width:11px;stroke-linecap:round}.cardsRow{display:contents}@media (width<=560px){.gameScreen{box-sizing:border-box;gap:10px;padding:16px 12px}.gameTitle{letter-spacing:2px;font-size:28px}.turnSub{font-size:18px}.gameArea{grid-template-rows:auto auto;grid-template-columns:1fr 1fr;justify-items:center;gap:10px;display:grid}.gameArea>.cardSlot:first-child{grid-area:1/1}.gameArea>.board{grid-area:2/1/auto/-1}.gameArea>.cardSlot:last-child{grid-area:1/2}.cardSlot{width:90px}.board{width:min(320px,92vw);height:min(320px,92vw)}.playerCard{gap:3px;width:90px;padding:6px 6px 8px}.playerAvatar{width:52px;height:52px}.playerName,.playerSymbol{font-size:10px}.modeBtn{padding:10px 24px;font-size:15px}.nextBtn{padding:8px 20px;font-size:15px}.friendInput,.formDivider{width:min(220px,80vw)}.roomCode{letter-spacing:5px;padding:6px 14px;font-size:26px}}