:root{--board-size: min(90vw, 90vh, 480px);--cell-size: calc(var(--board-size) / 8);--dark-square: #769656;--light-square: #eeeed2;--red-piece: #cc3333;--red-piece-border: #991111;--black-piece: #333333;--black-piece-border: #111111;--selected-highlight: rgba(255, 255, 0, .5);--valid-move-dot: rgba(0, 0, 0, .3);--last-move-highlight: rgba(255, 255, 100, .3);--bg: #1a1a2e;--text: #eee;--text-muted: #999;--panel-bg: #16213e}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden}#app{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px;width:100%;max-width:520px}.status-bar{font-size:16px;font-weight:600;text-align:center;padding:8px 16px;border-radius:8px;background:var(--panel-bg);min-height:36px;display:flex;align-items:center;justify-content:center}.status-bar.your-turn{background:#2d5a27}.status-bar.opponent-turn{background:#5a3a27}.status-bar.game-over{background:#4a2079}.players-bar{display:flex;justify-content:space-between;width:100%;max-width:var(--board-size);gap:8px}.player-info{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;background:var(--panel-bg);flex:1;min-width:0}.player-info.active-turn{outline:2px solid #ffd700}.player-color-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}.player-color-dot.red{background:var(--red-piece)}.player-color-dot.black{background:var(--black-piece);border:1px solid #666}.player-avatar-wrapper{position:relative;flex-shrink:0}.player-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}.status-dot{width:8px;height:8px;border-radius:50%;position:absolute;bottom:-1px;right:-1px;border:2px solid var(--panel-bg)}.status-dot.online{background:#3ba55d}.status-dot.offline{background:#747f8d}.player-info.disconnected{opacity:.5}.player-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.captured-count{margin-left:auto;font-size:12px;color:var(--text-muted);flex-shrink:0}.board{display:grid;grid-template-columns:repeat(8,var(--cell-size));grid-template-rows:repeat(8,var(--cell-size));border:3px solid #333;border-radius:4px}.cell{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;position:relative;cursor:default}.cell.light{background:var(--light-square)}.cell.dark{background:var(--dark-square)}.cell.selected{background:var(--selected-highlight)}.cell.last-move{background:var(--last-move-highlight)}.cell.valid-target{cursor:pointer}.cell.valid-target:after{content:"";width:30%;height:30%;border-radius:50%;background:var(--valid-move-dot);position:absolute}.cell.valid-capture:after{content:"";width:85%;height:85%;border-radius:50%;background:transparent;border:4px solid var(--valid-move-dot);position:absolute}.cell.has-piece{cursor:pointer}.piece{width:75%;height:75%;border-radius:50%;position:relative;box-shadow:0 2px 4px #0006;will-change:transform}.piece.red{background:radial-gradient(circle at 35% 35%,#ee5555,var(--red-piece) 60%,var(--red-piece-border));border:2px solid var(--red-piece-border)}.piece.black{background:radial-gradient(circle at 35% 35%,#666,var(--black-piece) 60%,var(--black-piece-border));border:2px solid var(--black-piece-border)}.piece.selected-piece{transform:scale(1.1);box-shadow:0 0 12px #ffff00b3}.piece.forced{box-shadow:0 0 6px 2px #ff4444b3;animation:forced-pulse 1s ease-in-out infinite}@keyframes forced-pulse{0%,to{box-shadow:0 0 6px 2px #ff4444b3}50%{box-shadow:0 0 10px 3px #f446}}.piece.king:after{content:"♛";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:calc(var(--cell-size) * .35);color:gold;text-shadow:0 1px 2px rgba(0,0,0,.6)}.game-actions{display:flex;gap:8px}.btn{padding:8px 20px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;background:#5865f2;color:#fff;transition:background .15s}.btn:hover{background:#4752c4}.loading{display:flex;flex-direction:column;align-items:center;gap:16px;font-size:18px}.spinner{width:40px;height:40px;border:4px solid var(--text-muted);border-top-color:#5865f2;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.emotion-bar{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.emotion-btn{width:40px;height:40px;border:none;border-radius:8px;background:var(--panel-bg);font-size:20px;cursor:pointer;transition:transform .15s,opacity .15s;display:flex;align-items:center;justify-content:center}.emotion-btn:hover:not(.cooldown){transform:scale(1.2)}.floating-emotion{position:fixed;font-size:48px;pointer-events:none;z-index:1000;animation:float-up 2s ease-out forwards}@keyframes float-up{0%{transform:scale(.5) translateY(0);opacity:1}20%{transform:scale(1.2) translateY(-20px);opacity:1}to{transform:scale(1) translateY(-200px);opacity:0}}