*{box-sizing:border-box;margin:0;padding:0}@keyframes gridMove{0%{background-position:0 0,0 0}to{background-position:40px 40px,0 0}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{box-shadow:0 0 #4caf5099}50%{box-shadow:0 0 8px 2px #4caf5059}}@keyframes pulseRed{0%,to{box-shadow:0 0 #f4433699}50%{box-shadow:0 0 8px 2px #f4433659}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes modalIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}body{font-family:Segoe UI,Inter,system-ui,sans-serif;background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.015) 39px,rgba(255,255,255,.015) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.015) 39px,rgba(255,255,255,.015) 40px),linear-gradient(135deg,#0d1117,#161b22 40%,#0f1a2e);background-size:40px 40px,40px 40px,100% 100%;animation:gridMove 20s linear infinite;display:flex;justify-content:center;align-items:center;min-height:100vh;color:#e6edf3}#app{width:100%;max-width:520px;padding:28px 24px;background:#161b22eb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 0 40px #4a90e20f,0 8px 32px #0006;text-align:center;animation:fadeIn .4s ease-out}#lobby h1{margin-bottom:32px;font-size:28px;font-weight:800;letter-spacing:2px;background:linear-gradient(135deg,#58a6ff,#bc8cff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#create-room-btn,#join-room-btn,#solo-btn{display:inline-block;padding:12px 32px;font-size:15px;font-weight:600;border:none;border-radius:10px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#4a90e2,#357bd8);box-shadow:0 2px 8px #4a90e24d;margin:8px 4px;transition:transform .15s,box-shadow .15s,background .2s;position:relative;overflow:hidden}#create-room-btn:after,#join-room-btn:after,#solo-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);background-size:200% 100%;animation:shimmer 2.5s infinite;pointer-events:none}#create-room-btn:hover,#join-room-btn:hover,#solo-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #4a90e273}#create-room-btn:active,#join-room-btn:active,#solo-btn:active{transform:translateY(0) scale(.97);box-shadow:0 1px 4px #4a90e233}#join-section{margin-top:18px;display:flex;justify-content:center;align-items:center;gap:10px}#room-id-input{padding:11px 16px;font-size:15px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#e6edf3;width:160px;text-transform:uppercase;letter-spacing:2px;transition:border-color .2s,box-shadow .2s;outline:none}#room-id-input::placeholder{color:#ffffff40;letter-spacing:0;text-transform:none}#room-id-input:focus{border-color:#58a6ff;box-shadow:0 0 0 3px #58a6ff26}#waiting-room{margin-top:20px;font-size:17px;color:#8b949e}#waiting-room p{margin:6px 0}#room-code-waiting{font-weight:700;color:#58a6ff;letter-spacing:2px}#info-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:15px;font-weight:600;color:#8b949e}#info-bar span{padding:4px 8px;background:#ffffff0a;border-radius:6px}#progress-bars{margin-bottom:15px}.progress{display:flex;align-items:center;margin:6px 0;font-size:13px;color:#8b949e}.progress span{width:44px;text-align:right;margin-right:10px;font-weight:600}.bar-bg{background:#ffffff0f;height:14px;border-radius:7px;flex:1;overflow:hidden;position:relative}.bar-fill{height:100%;border-radius:7px;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative}#my-progress{background:linear-gradient(90deg,#2ea043,#3fb950,#56d364);background-size:200% 100%;animation:shimmer 3s infinite}#my-progress.pulse-high{animation:pulse 1.2s ease-in-out infinite;box-shadow:inset 0 0 12px #3fb95066}#opponent-progress{background:linear-gradient(90deg,#da3633,#f85149,#ff7b72);background-size:200% 100%;animation:shimmer 3s infinite}#opponent-progress.pulse-high{animation:pulseRed 1.2s ease-in-out infinite;box-shadow:inset 0 0 12px #f8514966}#game-canvas{border:1px solid rgba(255,255,255,.1);border-radius:4px;margin-top:10px;max-width:100%;height:auto;box-shadow:0 0 20px #0000004d}#game-area{position:relative;display:inline-block}.turn-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:700;letter-spacing:1px;transition:all .3s}.turn-badge.turn-mine{background:#2ea0432e;color:#3fb950;border:1px solid rgba(63,185,80,.3);box-shadow:0 0 12px #3fb95026}.turn-badge.turn-opponent{background:#f851492e;color:#f85149;border:1px solid rgba(248,81,73,.3);box-shadow:0 0 12px #f8514926}.turn-badge.turn-neutral{background:#8b949e1a;color:#8b949e;border:1px solid rgba(139,148,158,.2)}#solo-difficulty-bar,#create-diff-bar{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin:8px 0}.diff-btn{padding:6px 16px;font-size:13px;font-weight:600;border:1.5px solid rgba(255,255,255,.15);border-radius:8px;background:#ffffff0a;color:#8b949e;cursor:pointer;transition:all .2s}.diff-btn:hover{border-color:#58a6ff;color:#58a6ff;background:#58a6ff14;transform:translateY(-1px)}.diff-btn:active{transform:translateY(0) scale(.96)}.diff-btn.active{border-color:#58a6ff;background:#58a6ff26;color:#58a6ff;box-shadow:0 0 8px #58a6ff33}#custom-difficulty-panel,#create-custom-panel{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:8px 0;font-size:13px;color:#8b949e}#custom-difficulty-panel label,#create-custom-panel label{display:flex;align-items:center;gap:4px;font-weight:600}#custom-difficulty-panel input,#create-custom-panel input{width:54px;padding:4px 6px;font-size:13px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#ffffff0d;color:#e6edf3;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s}#custom-difficulty-panel input:focus,#create-custom-panel input:focus{border-color:#58a6ff;box-shadow:0 0 0 2px #58a6ff1f}#custom-start-btn{background:linear-gradient(135deg,#2ea043,#3fb950);color:#fff}#custom-start-btn:hover{background:linear-gradient(135deg,#3fb950,#56d364)}#custom-cancel-btn{background:#ffffff0f;color:#8b949e}#custom-cancel-btn:hover{background:#ffffff1a}#custom-difficulty-panel button,#create-custom-panel button{padding:5px 14px;font-size:12px;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:transform .15s,box-shadow .15s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:1000}.modal[style*=flex] .modal-content{animation:modalIn .25s ease-out}.modal-content{background:linear-gradient(160deg,#1c2128,#161b22);border:1px solid rgba(255,255,255,.08);color:#e6edf3;padding:32px 28px;border-radius:16px;text-align:center;min-width:300px;box-shadow:0 0 60px #00000080}.modal-content h2{margin-bottom:16px;font-size:23px;font-weight:700;color:#e6edf3}.modal-content p{margin-bottom:20px;line-height:1.7;white-space:pre-line;color:#8b949e;font-size:15px}#rematch-status{color:#8b949e;font-size:13px;margin-top:12px}.error-msg{color:#f85149;font-size:13px;font-weight:600;margin:8px 0}.modal-buttons{margin-top:24px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.modal-buttons button{padding:10px 26px;border:none;border-radius:10px;cursor:pointer;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#4a90e2,#357bd8);box-shadow:0 2px 8px #4a90e240;transition:transform .15s,box-shadow .15s,background .2s}.modal-buttons button:hover{transform:translateY(-2px);box-shadow:0 4px 16px #4a90e266}.modal-buttons button:active{transform:translateY(0) scale(.97)}#back-lobby-btn,#solo-lobby-btn,#create-cancel-btn,#modal-rematch-btn[style*=none]+#back-lobby-btn{background:#ffffff14;color:#8b949e}#modal-cancel-rematch-btn{background:linear-gradient(135deg,#f0ad4e,#d9860b);box-shadow:0 2px 8px #f0ad4e40}#modal-cancel-rematch-btn:hover{box-shadow:0 4px 16px #f0ad4e73}#rematch-status{background:#4a90e214;border:1px solid rgba(74,144,226,.2);border-radius:8px;padding:8px 14px;font-size:14px;color:#8bb4f8}#back-lobby-btn:hover,#solo-lobby-btn:hover,#create-cancel-btn:hover{background:#ffffff24}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:#000000e0;border:1px solid rgba(255,255,255,.1);color:#e6edf3;padding:10px 28px;border-radius:10px;font-size:14px;font-weight:500;z-index:2000;pointer-events:none;transition:opacity .3s;box-shadow:0 4px 16px #0006}#create-room-modal .modal-content{min-width:340px}#create-diff-bar{margin-bottom:12px}#flag-mode-bar{margin:8px 0}#flag-mode-btn{padding:6px 16px;font-size:13px;font-weight:600;border:1.5px solid rgba(255,255,255,.15);border-radius:20px;cursor:pointer;transition:all .2s;background:#ffffff0a;color:#8b949e}#flag-mode-btn.flag-mode-off{border-color:#ffffff1f;background:#ffffff08}#flag-mode-btn.flag-mode-on{border-color:#f85149;background:#f8514926;color:#f85149;box-shadow:0 0 8px #f8514933}.flag-on-indicator{color:#f85149;margin-left:4px;font-size:10px;animation:pulseRed 1.2s ease-in-out infinite}#back-to-lobby-bar{display:flex;justify-content:flex-end;margin:10px 0 4px}#back-to-lobby-btn.diff-btn{border-color:#ffffff1f;background:#ffffff08;color:#8b949e}#back-to-lobby-btn.diff-btn:hover{border-color:#d2991d;color:#d2991d;background:#d2991d14}#back-to-lobby-btn.diff-btn:active{transform:translateY(0) scale(.96)}@media (max-width: 600px){#app{max-width:100%;padding:16px 10px;border-radius:0;border:none}#lobby h1{font-size:22px;margin-bottom:20px}#create-room-btn,#join-room-btn,#solo-btn{display:block;width:100%;margin:6px 0}#join-section{flex-direction:column;gap:8px}#room-id-input{width:100%;margin-right:0}#info-bar{flex-wrap:wrap;gap:4px;justify-content:center;font-size:13px}#info-bar span{font-size:12px;padding:3px 6px}.progress{font-size:12px}.progress span{width:36px;font-size:11px}#game-canvas{max-width:95vw}.diff-btn{padding:4px 10px;font-size:12px}.modal-content{min-width:auto;width:92vw;padding:20px 16px}#create-room-modal .modal-content{min-width:auto;width:92vw}#custom-difficulty-panel,#create-custom-panel{flex-direction:column;gap:6px}}