:root{font-family:IBM Plex Sans,Noto Sans SC,Microsoft YaHei,sans-serif;line-height:1.5;font-weight:400;color:#f6f2ea;background-color:#0f1115;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top,rgba(217,115,58,.15),transparent 55%),linear-gradient(160deg,#0f1115 10%,#121722 60%,#0b0d12)}h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;margin:0 0 12px}p{margin:0 0 8px}button{font-family:inherit}#root{min-height:100%}.app{max-width:1200px;margin:0 auto;padding:32px 24px 56px;display:flex;flex-direction:column;gap:32px;color:#f6f2ea;--card-width: 260px}.app-header{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}.header-side{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;justify-content:flex-end}.eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:.7rem;color:#fff9;margin-bottom:8px}.subtitle{color:#ffffffb3;max-width:560px}.status-card{background:#0f1319cc;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:20px 24px;width:var(--card-width);box-shadow:0 20px 40px #00000059}.status-label{font-size:.85rem;color:#fff9;margin-bottom:6px}.status-player,.status-win{font-size:1.1rem;font-weight:600;margin:4px 0}.reset-btn{margin-top:12px;padding:8px 16px;border-radius:999px;border:none;background:#f2b24c;color:#1a1208;font-weight:600;cursor:pointer}.ghost-btn{margin-top:12px;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#f6f2ea;font-weight:600;cursor:pointer}.ghost-btn:disabled{opacity:.5;cursor:not-allowed}.mode-toggle{margin-top:16px;display:inline-flex;gap:8px;padding:6px;border-radius:999px;background:#0000004d;border:1px solid rgba(255,255,255,.08)}.mode-btn{padding:6px 14px;border-radius:999px;border:none;background:transparent;color:#ffffffb3;cursor:pointer;font-weight:600}.mode-btn.active{background:#f2b24c33;color:#f6f2ea}.app-main{display:flex;flex-direction:column;align-items:center;gap:24px}.board{position:relative;border-radius:28px;background:radial-gradient(circle at top,rgba(255,210,150,.15),transparent 60%),linear-gradient(135deg,#171d24d9,#0a0c0ff2);border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 80px #00000073;transform-origin:center}.board.flipped{transform:rotate(180deg)}.home-outline{position:absolute;width:28px;height:28px;border-radius:50%;border:2px solid rgba(242,178,76,.6);transform:translate(-50%,-50%);pointer-events:none;opacity:.3}.home-outline.pulse{animation:pulseGlow 1.4s ease-in-out infinite}@keyframes pulseGlow{0%{opacity:.2;box-shadow:0 0 #f2b24c33}50%{opacity:.6;box-shadow:0 0 0 8px #f2b24c26}to{opacity:.2;box-shadow:0 0 #f2b24c33}}.cell{position:absolute;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;transform:translate(-50%,-50%);cursor:pointer;padding:0}.cell:hover{border-color:#ffffff4d}.cell-dot{display:block;width:18px;height:18px;margin:3px auto 0;border-radius:50%;background:transparent}.cell.occupied .cell-dot{background:#d94d4d;box-shadow:0 8px 16px #d94d4d66}.cell.player-b.occupied .cell-dot{background:#4b87f1;box-shadow:0 8px 16px #4b87f166}.cell.move{border-color:#fff9;box-shadow:0 0 0 2px #ffffff14}.cell.selected{border-color:#f2b24c;box-shadow:0 0 0 3px #f2b24c40}.legend{display:flex;gap:20px;flex-wrap:wrap;color:#ffffffb3;font-size:.9rem}.legend-row{display:flex;align-items:center;gap:8px}.legend-dot{width:14px;height:14px;border-radius:50%;background:#d94d4d;display:inline-block}.legend-dot.player-b{background:#4b87f1}.player-a{color:#f06a6a}.player-b{color:#7db0ff}.emoji-panel{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}.emoji-list{display:flex;gap:8px}.emoji-btn{border:1px solid rgba(255,255,255,.2);background:#ffffff14;border-radius:12px;padding:6px 10px;cursor:pointer;font-size:1rem}.emoji-feed{display:flex;flex-direction:column;gap:6px;min-width:120px}.emoji-item{display:flex;gap:8px;align-items:center}.emoji-icon{font-size:1.1rem}.emoji-empty{color:#ffffff80}.room-status{width:var(--card-width);background:#0f1319d9;border-radius:22px;padding:20px 24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 40px #00000059;display:flex;flex-direction:column;gap:16px}.room-status-main{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.room-id{margin-top:6px;color:#fff9;font-size:.9rem}.turn-pill{padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:#0000004d;font-weight:600}.ready-list{display:flex;gap:16px;flex-wrap:wrap}.winner-toast{position:fixed;top:90px;left:50%;transform:translate(-50%);z-index:25;background:linear-gradient(135deg,#f2b24ceb,#ff7d5aeb);border:1px solid rgba(255,255,255,.35);color:#221308;padding:14px 18px;border-radius:14px;display:flex;flex-direction:column;gap:4px;box-shadow:0 20px 40px #00000059}.winner-badge{font-weight:700}.winner-detail{font-size:.85rem}.chat-panel{width:min(860px,100%);background:#0f1319d9;border-radius:20px;padding:16px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:12px}.chat-header{font-weight:700;color:#fffc}.chat-body{background:#0000004d;border-radius:14px;padding:12px;height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.chat-row{display:flex;gap:8px;align-items:baseline}.chat-name{font-weight:600;min-width:44px}.chat-text{color:#fffc}.chat-empty{color:#ffffff80}.chat-input{display:flex;gap:10px}.chat-input input{flex:1;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#00000059;color:#f6f2ea}.board-wrap{position:relative;display:inline-block}.barrage-layer{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}.barrage-fly{position:absolute;left:100%;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#0f1319d9;border:1px solid rgba(255,255,255,.25);font-size:1.15rem;animation:barrageFly 2.4s linear forwards}.barrage-name{font-size:.95rem;font-weight:600}.barrage-emoji{font-size:1.2rem}@keyframes barrageFly{0%{opacity:0;transform:translate(0)}10%{opacity:1}to{opacity:1;transform:translate(-160%)}}.toast-mask{position:fixed;inset:0;background:#06080a8c;display:flex;align-items:center;justify-content:center;z-index:20;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.toast-card{background:#0f1319f2;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:16px 20px;min-width:220px;text-align:center;box-shadow:0 24px 48px #0006;animation:toastFloat 1.6s ease-in-out infinite}.toast-card--small{min-width:180px;padding:12px 18px;background:linear-gradient(140deg,#f2b24cf2,#f57f4af2);border-color:#ffffff59;color:#201308}.toast-float{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:30}.toast-title{margin:0 0 6px;font-weight:700}.toast-body{margin:0;color:#ffffffb3}@keyframes toastFloat{0%{transform:translateY(0)}50%{transform:translateY(-4px)}to{transform:translateY(0)}}.ready-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:#00000040}.ready-name{font-weight:600}.tag{padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:.75rem;color:#ffffffb3}.tag.ok{border-color:#7edca099;color:#7edca0}.tag.warn{border-color:#f28b8b99;color:#f28b8b}.lobby{display:flex;justify-content:center}.lobby-card{width:min(520px,100%);background:#0f1319d9;border-radius:24px;padding:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 48px #00000059}.lobby-card h2{margin:0 0 8px}.lobby-row{display:flex;gap:12px;margin-top:16px}.lobby-row input{flex:1;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#0000004d;color:#f6f2ea}.error{margin-top:12px;color:#f48f8f}@media(max-width:720px){.app{padding:24px 16px 40px}.status-card{width:100%}.lobby-row{flex-direction:column}.header-side{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}.room-status{width:100%}}