:root{--board-cell-size: 36px;--board-padding: 18px;--piece-size: 34px;--board-line-width: 1.5px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 30px;--font-size-xs: 10px;--font-size-sm: 11px;--font-size-md: 12px;--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 20px;--font-size-2xl: 24px;--touch-target-min: 48px;--radius-sm: 4px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--board-width: calc(8 * var(--board-cell-size) + 2 * var(--board-padding));--board-height: calc(9 * var(--board-cell-size) + 2 * var(--board-padding));--color-primary: #5a6fd6;--color-primary-dark: #4a5dc2;--color-secondary: #764ba2;--color-secondary-dark: #6a4190;--color-success: #28a745;--color-danger: #dc3545;--color-warning: #ffc107;--color-text: #333;--color-text-muted: #555;--color-text-light: #666;--color-border: #e0e0e0;--color-bg-light: #f5f5f5;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);--gradient-primary-hover: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary-dark) 100%);--gradient-board: linear-gradient(180deg, #f5deb3 0%, #deb887 50%, #f5deb3 100%);--gradient-piece-bg: linear-gradient(145deg, #fff 0%, #f0f0f0 100%)}*{margin:0;padding:0;box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--gradient-primary);min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;padding:var(--spacing-sm);touch-action:manipulation;overflow-x:hidden}#app{width:100%;max-width:500px}.screen{background:#fff;border-radius:var(--radius-xl);padding:var(--spacing-lg);box-shadow:0 10px 40px #0003;width:100%}.screen:focus{outline:3px solid var(--color-primary);outline-offset:2px}.hidden{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-100px;left:50%;transform:translate(-50%);background:var(--color-primary);color:#fff;padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-md);z-index:100;transition:top .3s}.skip-link:focus{top:var(--spacing-md)}#lobby h1{text-align:center;color:var(--color-text);margin-bottom:var(--spacing-xl);font-size:1.5em}.lobby-container{display:flex;flex-direction:column;gap:var(--spacing-lg)}.room-section{display:flex;flex-direction:column;gap:var(--spacing-sm)}.room-section h2{color:var(--color-text-muted);font-size:1em}input,button{padding:14px var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-lg);width:100%;min-height:var(--touch-target-min);transition:all .2s ease}input{border:2px solid var(--color-border);background:#fff}input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #667eea33}input:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}button{background:var(--gradient-primary);color:#fff;border:none;font-weight:600;cursor:pointer}button:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}button:active:not(:disabled){transform:translateY(0);background:var(--gradient-primary-hover)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}.lobby-message,.game-message{padding:var(--spacing-md) 15px;background:#fff3cd;border:2px solid var(--color-warning);border-radius:var(--radius-md);text-align:center;font-weight:600;color:#856404;word-break:break-word;animation:slideIn .3s ease-out;font-size:var(--font-size-base)}.game-message{margin-top:var(--spacing-md)}.game-message.success{background:#d4edda;border-color:var(--color-success);color:#155724}.game-message.error{background:#f8d7da;border-color:var(--color-danger);color:#721c24}.game-message.info{background:#cce5ff;border-color:#007bff;color:#004085}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.game-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding:var(--spacing-md);background:var(--color-bg-light);border-radius:var(--radius-md);gap:var(--spacing-sm)}.player-info{display:flex;align-items:center;gap:6px;font-weight:600;font-size:var(--font-size-md);flex:1;min-width:0}.player-info span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-indicator{width:16px;height:16px;border-radius:50%;border:2px solid var(--color-text);flex-shrink:0}.color-indicator.red{background:#c41e3a}.color-indicator.red.high-contrast{background:red;border:3px solid #000}.color-indicator.black{background:#1a1a1a}.color-indicator.black.high-contrast{background:#000;border:3px solid #fff}.game-status{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);flex:1 0 100%;order:-1}#turnIndicator{font-weight:600;color:var(--color-primary);font-size:13px;text-align:center}#turnIndicator.your-turn{color:var(--color-success);animation:pulse-green 2s infinite}#turnIndicator.opponent-turn{color:#6c757d}#turnIndicator.check{color:var(--color-danger);animation:pulse-red 1s infinite}#turnIndicator.game-over{color:var(--color-danger);font-size:15px}@keyframes pulse-green{0%,to{opacity:1}50%{opacity:.7}}@keyframes pulse-red{0%,to{opacity:1;text-shadow:0 0 5px rgba(220,53,69,.5)}50%{opacity:.8;text-shadow:0 0 10px rgba(220,53,69,.8)}}.room-id-box{display:flex;flex-direction:column;align-items:center;gap:2px}.room-id-box small{color:#999;font-size:var(--font-size-xs)}.room-id-box code{font-size:var(--font-size-sm);background:#eee;padding:3px var(--spacing-sm);border-radius:var(--radius-sm);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;-webkit-user-select:all;user-select:all;transition:background .2s}.room-id-box code:hover{background:#ddd}.room-id-box code:active{background:#ccc}#leaveRoomBtn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-md);width:auto;min-height:36px;min-width:60px}.board-container{display:flex;justify-content:center;overflow-x:auto;overflow-y:hidden;padding:var(--spacing-sm) 0;-webkit-overflow-scrolling:touch;scrollbar-width:thin}#chessBoard{position:relative;width:var(--board-width);height:var(--board-height);background:var(--gradient-board);border:3px solid #8b4513;border-radius:6px;flex-shrink:0;box-shadow:inset 0 0 15px #8b45131a,0 4px 12px #0003}.board-line{position:absolute;background:#8b4513;height:var(--board-line-width);width:var(--board-line-width)}.board-line.horizontal{height:var(--board-line-width)}.palace-line{opacity:.7}.river{position:absolute;display:flex;justify-content:center;align-items:center;font-size:var(--font-size-base);color:#8b4513;font-weight:700;letter-spacing:4px;background:linear-gradient(90deg,#87ceeb0d,#87ceeb26,#87ceeb0d);-webkit-user-select:none;user-select:none}.chess-piece{position:absolute;width:var(--piece-size);height:var(--piece-size);border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:calc(var(--piece-size) * .5);font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s;-webkit-user-select:none;user-select:none;border:2px solid;z-index:10;touch-action:manipulation;min-width:36px;min-height:36px}.chess-piece.red{background:#fafafa;color:#c41e3a;border-color:#c41e3a;box-shadow:0 2px 4px #0000001a,inset 0 1px #fffc}.chess-piece.black{background:#fafafa;color:#1a1a1a;border-color:#1a1a1a;box-shadow:0 2px 4px #0000001a,inset 0 1px #fffc}.chess-piece:hover{transform:scale(1.08);box-shadow:0 4px 12px #0000004d}.chess-piece:focus-visible{outline:3px solid #4a5dc2;outline-offset:2px;transform:scale(1.08)}.chess-piece.selected{transform:scale(1.12);box-shadow:0 0 0 3px #667eea80,0 6px 20px #667eea66;border-color:var(--color-primary);z-index:15}.chess-piece.last-moved{box-shadow:0 0 0 2px #ffc10799,0 2px 8px #0003}@media (hover: none) and (pointer: coarse){.chess-piece{margin:-4px;padding:var(--spacing-xs)}.chess-piece:hover{transform:none}.chess-piece.selected{transform:scale(1.08)}}.valid-move{position:absolute;width:14px;height:14px;background:radial-gradient(circle,#667eeab3,#667eea66);border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;z-index:5;transition:transform .15s,background .15s;touch-action:manipulation;min-width:var(--spacing-2xl);min-height:var(--spacing-2xl);margin-left:-5px;margin-top:-5px}.valid-move:hover{background:radial-gradient(circle,#667eeae6,#667eea99);transform:translate(-50%,-50%) scale(1.2)}.valid-move:focus-visible{outline:3px solid #4a5dc2;outline-offset:2px;transform:translate(-50%,-50%) scale(1.3)}.valid-move.capture{width:var(--spacing-xl);height:var(--spacing-xl);background:radial-gradient(circle,#dc354580,#dc35454d);border:2px dashed var(--color-danger);min-width:28px;min-height:28px;margin-left:-4px;margin-top:-4px}.valid-move.capture:hover{background:radial-gradient(circle,#dc3545b3,#dc354580)}.check-indicator{z-index:8;pointer-events:none}@keyframes pulse{0%{box-shadow:0 0 #f006;transform:scale(1);opacity:1}70%{box-shadow:0 0 0 12px #f000;transform:scale(1.08);opacity:.7}to{box-shadow:0 0 #f000;transform:scale(1);opacity:1}}.opponent-status{display:flex;align-items:center;gap:5px;font-size:var(--font-size-sm);color:var(--color-text-light)}.opponent-status .status-dot{width:var(--spacing-sm);height:var(--spacing-sm);border-radius:50%;background:#6c757d}.opponent-status .status-dot.online{background:var(--color-success);box-shadow:0 0 4px #28a74580}.opponent-status .status-dot.offline{background:var(--color-danger)}.loading{position:relative;pointer-events:none}.loading:after{content:"";position:absolute;top:50%;left:50%;width:var(--spacing-xl);height:var(--spacing-xl);margin:-10px 0 0 -10px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width: 375px){:root{--board-cell-size: 40px;--board-padding: var(--spacing-xl);--piece-size: 36px}.screen{padding:18px}#lobby h1{font-size:1.6em;margin-bottom:22px}.chess-piece{font-size:17px}.river{font-size:var(--font-size-lg);letter-spacing:5px}#turnIndicator{font-size:var(--font-size-base)}}@media (min-width: 414px){:root{--board-cell-size: 44px;--board-padding: 22px;--piece-size: 40px}.screen{padding:var(--spacing-xl)}#lobby h1{font-size:1.7em;margin-bottom:var(--spacing-2xl)}.chess-piece{font-size:19px}.river{font-size:18px;letter-spacing:6px}.game-header{padding:var(--spacing-md) 14px}.player-info{font-size:13px}#turnIndicator{font-size:15px}}@media (min-width: 500px){:root{--board-cell-size: 48px;--board-padding: var(--spacing-2xl);--piece-size: 44px;--board-line-width: 2px}body{padding:15px}.screen{padding:25px;border-radius:var(--radius-2xl)}#lobby h1{font-size:1.75em;margin-bottom:25px}.lobby-container{gap:var(--spacing-xl)}.room-section h2{font-size:1.1em}.chess-piece{font-size:21px}.valid-move{width:16px;height:16px}.valid-move.capture{width:var(--spacing-2xl);height:var(--spacing-2xl)}.river{font-size:var(--spacing-xl);letter-spacing:var(--spacing-sm)}#turnIndicator{font-size:var(--font-size-lg)}.game-header{flex-wrap:nowrap;padding:14px var(--spacing-lg)}.game-status{order:0;flex:1}}@media (min-width: 768px){:root{--board-cell-size: 52px;--board-padding: 26px;--piece-size: 48px}#app{max-width:600px}.screen{padding:var(--spacing-3xl)}#lobby h1{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-3xl)}.chess-piece{font-size:23px}.river{font-size:22px;letter-spacing:10px}}@media (max-height: 500px) and (orientation: landscape){:root{--board-cell-size: 32px;--board-padding: 16px;--piece-size: 30px}body{padding:5px;align-items:flex-start}.screen{padding:var(--spacing-md);border-radius:var(--radius-md)}#lobby h1{font-size:1.2em;margin-bottom:var(--spacing-md)}.lobby-container{gap:var(--spacing-md)}.game-header{margin-bottom:6px;padding:6px var(--spacing-md);flex-wrap:nowrap}.game-status{order:0;flex:1 0 auto}.board-container{padding:0}.chess-piece{font-size:var(--font-size-base)}.valid-move{width:var(--spacing-md);height:var(--spacing-md)}.valid-move.capture{width:18px;height:18px}.river{font-size:var(--spacing-md);letter-spacing:3px}#turnIndicator{font-size:var(--spacing-md)}.game-message{margin-top:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--spacing-md)}button{min-height:40px}input{min-height:40px;padding:10px var(--spacing-md)}}@media (max-width: 374px){:root{--board-cell-size: 34px;--board-padding: 17px;--piece-size: 32px}body{padding:6px}.screen{padding:var(--spacing-md);border-radius:var(--radius-lg)}#lobby h1{font-size:1.3em;margin-bottom:var(--spacing-lg)}.lobby-container{gap:var(--spacing-md)}.room-section h2{font-size:.95em}.game-header{padding:var(--spacing-sm) var(--spacing-md);gap:6px}.player-info{font-size:var(--font-size-sm)}#turnIndicator{font-size:var(--spacing-md)}.chess-piece{font-size:15px}.river{font-size:13px;letter-spacing:3px}.valid-move{width:var(--spacing-md);height:var(--spacing-md)}.valid-move.capture{width:18px;height:18px}button{padding:var(--spacing-md) var(--spacing-lg);font-size:15px}.game-message{padding:10px;font-size:var(--spacing-md)}}@media (prefers-color-scheme: dark){:root{--color-text: #e0e0e0;--color-text-muted: #b0b0b0;--color-bg-light: #2a2a3d}body{background:linear-gradient(135deg,#1a1a2e,#16213e)}.screen{background:#1e1e2f;color:var(--color-text)}#lobby h1{color:var(--color-text)}.room-section h2{color:var(--color-text-muted)}input{background:#2a2a3d;border-color:#3a3a4d;color:var(--color-text)}input:focus{border-color:var(--color-primary)}.game-header{background:var(--color-bg-light)}.player-info{color:var(--color-text)}#turnIndicator{color:#a0a0ff}#turnIndicator.your-turn{color:#4ade80}#turnIndicator.opponent-turn{color:#9ca3af}.room-id-box code{background:#3a3a4d;color:var(--color-text)}.room-id-box code:hover{background:#4a4a5d}.lobby-message,.game-message{background:#3d3d00;border-color:#8b8b00;color:#ff9}.game-message.success{background:#1a3d1a;border-color:var(--color-success);color:#90ee90}.game-message.error{background:#3d1a1a;border-color:var(--color-danger);color:#f99}.game-message.info{background:#1a2a3d;border-color:#007bff;color:#9cf}}@media print{body{background:#fff;padding:0}.screen{box-shadow:none;border:1px solid #ccc}button,input{display:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}