:root{--modern-primary-bg:#2c3e50;--modern-secondary-bg:#34495e;--modern-tertiary-bg:#7f8c8d;--modern-board-bg:#95a5a6;--modern-cell-bg:#ecf0f1;--modern-cell-alt-bg:#bdc3c7;--modern-ui-brown:#8b4513;--modern-ui-brown-dark:#654321;--modern-ui-brown-darker:#3e2723;--modern-ui-accent:#d2691e;--modern-player1-color:#3498db;--modern-player1-border:#2980b9;--modern-player1-shadow:#1f4e79;--modern-player2-color:#e74c3c;--modern-player2-border:#c0392b;--modern-player2-shadow:#922b21;--modern-text-primary:#ecf0f1;--modern-text-dark:#2c3e50;--modern-text-medium:#34495e;--modern-text-light:#7f8c8d;--modern-text-muted:#95a5a6;--modern-valid-move:#2ecc71;--modern-hover-danger:#e74c3c;--modern-preview-valid:#f39c12;--modern-preview-invalid:#e74c3cb3;--modern-modal-bg:#fff;--modern-modal-overlay:#00000080;--modern-modal-accent:#27ae60;--modern-modal-border:#bdc3c7;--modern-dev-bg:#2c3e50f2;--modern-dev-border:#34495e;--modern-dev-text:#ecf0f1;--modern-dev-label:#3498db;--modern-dev-btn:#7f8c8d;--primary-bg:var(--modern-primary-bg);--secondary-bg:var(--modern-secondary-bg);--tertiary-bg:var(--modern-tertiary-bg);--board-bg:var(--modern-board-bg);--cell-bg:var(--modern-cell-bg);--cell-alt-bg:var(--modern-cell-alt-bg);--ui-brown:var(--modern-ui-brown);--ui-brown-dark:var(--modern-ui-brown-dark);--ui-brown-darker:var(--modern-ui-brown-darker);--ui-accent:var(--modern-ui-accent);--player1-color:var(--modern-player1-color);--player1-border:var(--modern-player1-border);--player1-shadow:var(--modern-player1-shadow);--player2-color:var(--modern-player2-color);--player2-border:var(--modern-player2-border);--player2-shadow:var(--modern-player2-shadow);--text-primary:var(--modern-text-primary);--text-dark:var(--modern-text-dark);--text-medium:var(--modern-text-medium);--text-light:var(--modern-text-light);--text-muted:var(--modern-text-muted);--valid-move:var(--modern-valid-move);--hover-danger:var(--modern-hover-danger);--preview-valid:var(--modern-preview-valid);--preview-invalid:var(--modern-preview-invalid);--modal-bg:var(--modern-modal-bg);--modal-overlay:var(--modern-modal-overlay);--modal-accent:var(--modern-modal-accent);--modal-border:var(--modern-modal-border);--dev-bg:var(--modern-dev-bg);--dev-border:var(--modern-dev-border);--dev-text:var(--modern-dev-text);--dev-label:var(--modern-dev-label);--dev-btn:var(--modern-dev-btn);--cell-size:min(clamp(28px, 5.5vmin, 75px), calc((100vw - 560px) / 12));--gap-size:11px;--border-radius:8px;--border-radius-small:4px;--border-radius-large:12px}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff52}*{scrollbar-width:thin;scrollbar-color:#ffffff2e transparent}.flex{display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.flex-column{flex-direction:column;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-gap-sm{gap:8px}.flex-gap-md{gap:10px}.flex-gap-lg{gap:20px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--primary-bg);height:100vh;color:var(--text-primary);margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}#root{width:100%;max-width:none;min-height:unset;text-align:left;box-sizing:border-box;border:none;margin:0;display:block}.game-layout{height:100vh;display:flex;overflow:hidden}.main-content{flex:1;justify-content:center;align-items:center;min-width:0;padding:16px 16px 16px 8px;display:flex}.board-section{flex-direction:row;align-items:stretch;gap:12px;height:calc(100vh - 32px);max-height:calc(100vh - 32px);display:flex;overflow:hidden}.sidebar{flex-direction:column;flex-shrink:0;gap:16px;width:170px;padding:4px 0;display:flex}.nav-sidebar{background:var(--secondary-bg);box-sizing:border-box;z-index:200;border-right:1px solid #ffffff0d;flex-direction:column;flex-shrink:0;width:220px;height:100vh;padding:20px 0 14px;display:flex;position:relative}.nav-logo{align-items:center;gap:10px;padding:0 16px 24px;display:flex}.nav-pawn-icon{width:28px;height:28px;color:var(--text-primary);flex-shrink:0}.nav-logo-text{letter-spacing:-.02em;color:#fff;font-size:24px;font-weight:800}.nav-items{flex-direction:column;flex:1;gap:2px;padding:0 8px;display:flex}.nav-item{color:#fff;border-radius:var(--border-radius-small);cursor:pointer;text-align:left;opacity:.7;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:10px 14px;font-size:17px;font-weight:700;transition:background .12s,opacity .12s;display:flex}.nav-item-emoji{flex-shrink:0;font-size:16px;line-height:1}.nav-item:hover{opacity:1;background:#ffffff12}.nav-item-active{opacity:1;background:#ffffff1a}.nav-bottom{border-top:1px solid #ffffff12;flex-direction:column;gap:2px;margin-top:8px;padding:10px 8px 0;display:flex}.nav-profile{align-items:center;gap:10px}.nav-avatar{background:var(--tertiary-bg);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:700;display:flex}.nav-profile-info{flex-direction:column;gap:2px;min-width:0;display:flex}.nav-profile-name{color:#fff;font-size:17px;font-weight:700;line-height:1}.nav-profile-id{color:#ffffff73;white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:1;overflow:hidden}.nav-badge{color:#fff;background:#e74c3c;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;min-width:17px;height:17px;margin-left:auto;padding:0 4px;font-size:10px;font-weight:700;line-height:1;display:inline-flex}.nav-pending-dot{background:#e74c3c;border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-left:auto}.nav-item-logout:hover{color:var(--hover-danger);opacity:1;background:#e74c3c1f}.nav-logout-icon{flex-shrink:0;width:17px;height:17px}.nav-item-login{color:var(--player1-color);font-weight:600}.nav-item-login:hover{opacity:1;background:#3498db26}.nav-avatar-guest{opacity:.4}.nav-profile-wrap{flex-direction:column;gap:0;display:flex;position:relative}.nav-profile-btn{width:100%}.nav-chevron{opacity:.4;flex-shrink:0;margin-left:auto}.nav-profile-menu{background:var(--primary-bg);border-radius:var(--border-radius);border:1px solid #ffffff1a;flex-direction:column;gap:2px;margin-bottom:4px;padding:4px;display:flex}.nav-profile-menu-item{border-radius:var(--border-radius-small);color:var(--text-primary);cursor:pointer;text-align:left;opacity:.75;background:0 0;border:none;align-items:center;gap:8px;width:100%;padding:7px 10px;font-size:13px;transition:background .12s,opacity .12s;display:flex}.nav-profile-menu-item:hover{opacity:1;background:#ffffff12}.nav-username-edit{flex-direction:column;gap:6px;padding:6px 8px;display:flex}.nav-username-input{border-radius:var(--border-radius-small);color:var(--text-primary);box-sizing:border-box;background:#ffffff12;border:1px solid #ffffff26;width:100%;padding:6px 8px;font-size:13px}.nav-username-input:focus{border-color:var(--player1-color);outline:none}.nav-username-input-error{border-color:var(--hover-danger)!important}.nav-username-error{color:var(--hover-danger);margin:0;font-size:11px}.nav-username-actions{gap:6px;display:flex}.nav-username-save{background:var(--player1-color);border-radius:var(--border-radius-small);color:#fff;cursor:pointer;border:none;flex:1;padding:4px 0;font-size:12px}.nav-username-save:disabled{opacity:.5;cursor:default}.nav-username-cancel{border-radius:var(--border-radius-small);color:var(--text-primary);cursor:pointer;opacity:.7;background:#ffffff12;border:1px solid #ffffff1f;padding:4px 8px;font-size:12px}.setup-page{background:var(--primary-bg);min-height:100vh}.setup-card{background:var(--secondary-bg);border-radius:var(--border-radius-large);text-align:center;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:400px;padding:40px 36px;display:flex}.setup-avatar{background:var(--player1-color);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:28px;font-weight:700;display:flex}.setup-title{color:var(--text-primary);margin:4px 0 0;font-size:22px;font-weight:700}.setup-sub{color:#fff9;margin:0;font-size:13px;line-height:1.5}.setup-form{flex-direction:column;gap:8px;width:100%;margin-top:8px;display:flex}.setup-input{border-radius:var(--border-radius);color:var(--text-primary);box-sizing:border-box;text-align:center;background:#ffffff12;border:1px solid #ffffff26;width:100%;padding:10px 14px;font-size:15px}.setup-input:focus{border-color:var(--player1-color);outline:none}.setup-input-error{border-color:var(--hover-danger)!important}.setup-error{color:var(--hover-danger);margin:0;font-size:12px}.setup-hint{color:#ffffff4d;margin:0;font-size:11px}.setup-submit{margin-top:4px;padding:10px;font-size:14px}.profile-page-card{background:var(--secondary-bg);border-radius:var(--border-radius-large);flex-direction:column;gap:24px;width:100%;max-width:560px;padding:32px 28px;display:flex}.profile-loading{color:#fff6;text-align:center;margin:0;padding:40px 0}.profile-header{align-items:center;gap:16px;display:flex}.profile-avatar-lg{background:var(--player1-color);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;font-size:28px;font-weight:700;display:flex}.profile-header-info{flex-direction:column;flex:1;gap:2px;display:flex}.profile-username{color:var(--text-primary);margin:0;font-size:22px;font-weight:700}.profile-elo{margin:0;font-size:14px;font-weight:600}.profile-add-btn{white-space:nowrap;flex-shrink:0;min-width:140px;margin-left:auto;padding:10px 18px}.profile-friend-badge{color:#2ecc71;border-radius:var(--border-radius);white-space:nowrap;background:#2ecc711f;flex-shrink:0;margin-left:auto;padding:8px 14px;font-size:13px;font-weight:600}.profile-stats-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.profile-stat-card{border-radius:var(--border-radius);text-align:center;background:#ffffff0a;border:1px solid #ffffff12;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;display:flex}.profile-stat-value{color:var(--text-primary);font-size:20px;font-weight:700}.profile-stat-label{text-transform:uppercase;letter-spacing:.07em;color:#ffffff59;font-size:10px;font-weight:600}.profile-section{flex-direction:column;gap:8px;display:flex}.profile-section-label{text-transform:uppercase;letter-spacing:.08em;color:#ffffff4d;margin:0;font-size:10px;font-weight:700}.profile-tc-list{flex-direction:column;gap:4px;display:flex}.profile-tc-row{border-radius:var(--border-radius-small);color:#ffffffb3;background:#ffffff08;align-items:center;gap:12px;padding:8px 12px;font-size:13px;display:flex}.profile-tc-label{flex-shrink:0;width:32px;font-weight:700}.profile-tc-stat{flex:1}.board-wrapper{background:var(--board-bg);border-radius:var(--border-radius-small);align-items:stretch;padding:20px;display:flex}.fence-panel{width:calc((9 * var(--cell-size) + 8 * var(--gap-size)) * .28);flex-direction:column;min-width:52px;margin-left:18px;display:flex}.fence-section{flex-direction:column;gap:4px;display:flex}.fence-section-bottom{margin-top:auto}.fence-section-label{letter-spacing:.02em;font-size:13px;font-weight:700}.fence-label-computer{color:var(--player2-color);margin-bottom:5px}.fence-label-player{color:var(--player1-color);margin-top:5px}.fence-pieces{flex-direction:column;gap:5px;display:flex}.fence-piece{height:var(--gap-size);opacity:.9;background:var(--ui-brown);border-radius:2px;width:75%}.board-flipped{transform:rotate(180deg)}.board{grid-template-columns:repeat(8, var(--cell-size) var(--gap-size)) var(--cell-size);grid-template-rows:repeat(8, var(--cell-size) var(--gap-size)) var(--cell-size);grid-auto-flow:unset;flex-shrink:0;display:grid}.cell{background:var(--cell-bg);cursor:pointer;width:var(--cell-size);height:var(--cell-size);border-radius:2px;font-size:18px;font-weight:700;transition:all .2s;position:relative}.cell[data-row="0"][data-col="1"],.cell[data-row="0"][data-col="3"],.cell[data-row="0"][data-col="5"],.cell[data-row="0"][data-col="7"],.cell[data-row="1"][data-col="0"],.cell[data-row="1"][data-col="2"],.cell[data-row="1"][data-col="4"],.cell[data-row="1"][data-col="6"],.cell[data-row="1"][data-col="8"],.cell[data-row="2"][data-col="1"],.cell[data-row="2"][data-col="3"],.cell[data-row="2"][data-col="5"],.cell[data-row="2"][data-col="7"],.cell[data-row="3"][data-col="0"],.cell[data-row="3"][data-col="2"],.cell[data-row="3"][data-col="4"],.cell[data-row="3"][data-col="6"],.cell[data-row="3"][data-col="8"],.cell[data-row="4"][data-col="1"],.cell[data-row="4"][data-col="3"],.cell[data-row="4"][data-col="5"],.cell[data-row="4"][data-col="7"],.cell[data-row="5"][data-col="0"],.cell[data-row="5"][data-col="2"],.cell[data-row="5"][data-col="4"],.cell[data-row="5"][data-col="6"],.cell[data-row="5"][data-col="8"],.cell[data-row="6"][data-col="1"],.cell[data-row="6"][data-col="3"],.cell[data-row="6"][data-col="5"],.cell[data-row="6"][data-col="7"],.cell[data-row="7"][data-col="0"],.cell[data-row="7"][data-col="2"],.cell[data-row="7"][data-col="4"],.cell[data-row="7"][data-col="6"],.cell[data-row="7"][data-col="8"],.cell[data-row="8"][data-col="1"],.cell[data-row="8"][data-col="3"],.cell[data-row="8"][data-col="5"],.cell[data-row="8"][data-col="7"]{background:var(--cell-alt-bg)}.cell:hover:not(.player1):not(.player2){background:var(--hover-danger)}.valid-move{background:var(--valid-move)!important}.valid-move:hover{filter:brightness(1.1)}.player1{color:#fff;border-radius:50%;background:var(--player1-color)!important;border:2px solid var(--player1-border)!important}.player2{color:#fff;border-radius:50%;background:var(--player2-color)!important;border:2px solid var(--player2-border)!important}.player1-color{color:var(--player2-color);text-shadow:1px 1px 0 var(--player2-shadow), -1px 1px 0 var(--player2-shadow), 1px -1px 0 var(--player2-shadow), -1px -1px 0 var(--player2-shadow)}.player2-color{color:var(--player1-color);text-shadow:1px 1px 0 var(--player1-shadow), -1px 1px 0 var(--player1-shadow), 1px -1px 0 var(--player1-shadow), -1px -1px 0 var(--player1-shadow)}.wall-slot{cursor:pointer;background:0 0;border-radius:3px;transition:background .12s}.wall-slot:hover:not(.placed){background:#d2691e4d}.wall-slot.placed{background:var(--ui-brown);cursor:default}.wall-slot.preview-valid{background:var(--preview-valid)}.wall-slot.preview-invalid{background:var(--preview-invalid);cursor:not-allowed}.panel{background:var(--ui-brown);border:2px solid var(--ui-brown-dark);color:var(--text-primary);border-radius:6px;padding:15px}.fence-count-display{margin-bottom:8px;font-size:14px}.fence-count-display:last-child{margin-bottom:0}.player-label{font-weight:700}.score-label{font-size:14px;font-weight:500}.score-number{color:var(--text-primary);font-size:24px;font-weight:700}.score-separator{color:var(--text-primary);margin:0 4px;font-size:20px;font-weight:700}.controls-section h3{color:var(--text-primary);margin:0 0 10px;font-size:16px;font-weight:600}.direction-controls{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:8px;max-width:150px;margin:0 auto;display:grid}#move-up{grid-area:1/2}#move-left{grid-area:2/1}#move-right{grid-area:2/3}#move-down{grid-area:3/2}.btn{border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer;background:#ffffff12;border:1px solid #ffffff21;font-family:inherit;transition:background .15s,border-color .15s}.btn:hover:not(:disabled){background:#ffffff21;border-color:#ffffff38}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-primary{background:var(--player1-color);border-color:var(--player1-border);color:#fff;font-weight:700}.btn-primary:hover:not(:disabled){background:var(--player1-border);border-color:var(--player1-border);box-shadow:0 2px 10px #3498db66}.direction-btn{padding:10px;font-size:14px}.action-btn{justify-content:center;align-items:center;width:100%;padding:10px 16px;font-size:14px;font-weight:600;display:inline-flex}.half-width{flex:1}.button-row{flex-wrap:wrap}.dev-btn{background:var(--dev-btn);border:1px solid var(--dev-btn);color:#fff;padding:8px 16px;font-size:12px;transition:all .3s}.dev-btn:hover{color:var(--text-muted)!important;background:#6666661a!important}.message-display{border-radius:var(--border-radius-small);text-align:center;border:2px solid #0000;min-height:44px;padding:12px;font-weight:500}.message-success{color:#2ecc71;border-color:#2ecc71}.message-error{color:#e74c3c;border-color:#e74c3c}.message-info{color:var(--text-primary)}.modal{z-index:1000;background-color:var(--modal-overlay);width:100%;height:100%;position:fixed;top:0;left:0}.modal-content{background-color:var(--modal-bg);border-radius:10px;flex-direction:column;width:90%;max-width:600px;max-height:90vh;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000004d}.modal-header{border-bottom:2px solid var(--modal-border);background:var(--modal-bg);z-index:10;flex-shrink:0;justify-content:center;align-items:center;padding:20px 30px;display:flex;position:sticky;top:0}.modal-header h2{color:var(--text-dark);text-align:center;flex:1;margin:0;font-size:1.5em}.modal-header .close-btn{z-index:11;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.modal-body{flex:1;padding:30px;overflow-y:auto}.close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;margin:0;padding:0;font-size:28px;font-weight:700;line-height:1;transition:color .3s}.close-btn:hover{color:var(--text-dark)}.rules-section{margin-bottom:25px}.rules-section h3{color:var(--modal-accent);margin-bottom:10px;font-size:1.1em}.rules-section p{color:var(--text-medium);margin-bottom:10px;line-height:1.6}.rules-section ul{margin-bottom:15px;margin-left:20px}.rules-section li{color:var(--text-light);margin-bottom:8px;line-height:1.5}.rules-section strong{color:var(--text-dark)}.rules-page .rules-section strong{color:#fff;font-weight:700}.settings-section{border-top:2px solid var(--modal-border);margin-top:30px;padding-top:20px}.settings-section h3{color:var(--text-dark);margin-bottom:15px;font-size:1.1em}.setting-item{margin-bottom:15px}.setting-item label{color:var(--text-dark);cursor:pointer;font-weight:500}.setting-item input[type=checkbox]{cursor:pointer;accent-color:var(--player1-color);transform:scale(1.2)}.setting-item input[type=range]{accent-color:var(--player1-color);flex:1;margin:0 10px}#volume-display{text-align:center;min-width:40px;color:var(--text-dark);font-weight:500}.settings-controls{border-top:1px solid var(--modal-border);margin-top:20px;padding-top:15px}.bot-selector{border-radius:var(--border-radius-small);color:var(--text-dark);cursor:pointer;background:#fff;border:2px solid #ddd;flex:1;padding:8px 12px;font-size:14px;transition:border-color .3s}.bot-selector:hover{border-color:var(--modal-accent)}.bot-selector:focus{border-color:var(--modal-accent);outline:none;box-shadow:0 0 5px #4caf504d}.dev-stats{background:var(--dev-bg);border:1px solid var(--dev-border);color:var(--dev-text);z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:6px;min-width:200px;padding:10px;font-family:Courier New,monospace;font-size:11px;position:fixed;top:20px;right:20px}.stat-item{margin-bottom:4px;padding:2px 0}.stat-item:last-child{margin-bottom:0}.stat-label{color:var(--dev-label);font-weight:700}@media (width<=768px){:root{--mobile-scale:.8;--cell-size:calc(32px * var(--mobile-scale));--fence-width:calc(16px * var(--mobile-scale));--board-size:calc(550px * var(--mobile-scale))}body{padding:10px}.game-area{flex-direction:column;gap:15px;padding:15px}.board-container{order:1;padding:30px}.sidebar{order:2;width:100%}.btn{min-width:44px;min-height:44px}.board,.cell,.fence-slot,.btn{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.modal-content{width:95%}}@media (width<=480px){:root{--mobile-scale:.6}.game-area{gap:10px;padding:10px}.board-container{padding:25px}}@media (width<=360px){:root{--mobile-scale:.35}}.game-card{background:var(--secondary-bg);border-radius:var(--border-radius-large);flex-direction:column;padding:12px 12px 12px 0;display:flex}.game-card-header,.game-card-footer{color:var(--text-primary);opacity:.75;letter-spacing:.02em;justify-content:space-between;align-items:center;padding-left:20px;padding-right:12px;font-size:13px;font-weight:600;display:flex}.game-card-header{padding-bottom:8px}.game-card-footer{padding-top:8px}.game-card-header-right{opacity:1}.game-card-body{align-items:stretch;display:flex}.game-card-actions{flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:0 6px;display:flex}.game-card-action-btn{cursor:pointer;color:#ffffff80;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;padding:8px;font-size:20px;line-height:1;transition:color .2s,background .2s;display:flex}.game-card-action-btn:hover{color:var(--text-primary);background:#ffffff14}.game-card-resign-btn:hover{color:var(--hover-danger)}.win-lose-overlay{z-index:150;background-color:var(--modal-overlay);width:100%;height:100%;position:fixed;top:0;left:0}.win-lose-modal{background:var(--secondary-bg);border-radius:var(--border-radius-large);flex-direction:column;align-items:center;gap:32px;min-width:320px;padding:48px 56px;display:flex;box-shadow:0 8px 32px #00000080}.win-lose-title{text-align:center;margin:0;font-size:2.4em;font-weight:800}.win-lose-win{color:var(--modal-accent)}.win-lose-lose{color:var(--hover-danger)}.win-lose-buttons{gap:16px;display:flex}.win-lose-buttons .btn{white-space:nowrap}.rules-page{flex:1;justify-content:center;min-width:0;padding:32px;display:flex;overflow-y:auto}.rules-page-content{width:100%;max-width:640px}.rules-page-title{color:#fff;margin:0 0 20px;font-size:1.3em;font-weight:800}.rules-page .rules-section{margin-bottom:18px}.rules-page .rules-section h3{color:#fff;text-transform:uppercase;letter-spacing:.05em;opacity:.7;margin-bottom:8px;font-size:.95em;font-weight:700}.rules-page .rules-section p,.rules-page .rules-section li{color:#ffffffd9;margin-bottom:6px;font-size:.9em;line-height:1.5}.rules-page .rules-section ul{margin-bottom:0;margin-left:18px}.right-panel{background:var(--secondary-bg);border-radius:var(--border-radius-large);flex-direction:column;flex-shrink:0;width:253px;display:flex;overflow:hidden}.play-panel-body{flex-direction:column;flex:1;gap:10px;padding:18px 14px 10px;display:flex;overflow-y:auto}.play-panel-heading{text-transform:uppercase;letter-spacing:.08em;color:var(--text-primary);opacity:.45;margin:0 0 4px;font-size:11px;font-weight:700}.play-mode-list{flex-direction:column;gap:4px;display:flex}.play-mode-option{border-radius:var(--border-radius);color:var(--text-primary);text-align:left;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:10px 12px;font-size:13px;font-weight:600;transition:background .15s,border-color .15s;display:flex}.play-mode-option:hover:not(.play-mode-disabled){background:#ffffff1a;border-color:#ffffff2e}.play-mode-active{color:#fff;border-color:var(--player1-color)!important;background:#3498db38!important}.play-mode-disabled{opacity:.35;cursor:not-allowed}.play-mode-locked{opacity:.7;cursor:pointer;border-color:#ffffff14!important}.play-mode-locked:hover{opacity:1;background:#3498db1a!important;border-color:#3498db4d!important}.play-mode-lock-label{align-items:center;gap:6px;font-size:12px;display:flex}.play-mode-lock-icon{opacity:.8;font-size:11px}.play-mode-online-label{justify-content:space-between;align-items:center;width:100%;display:flex}.play-mode-elo{color:var(--modal-accent);background:#27ae6026;border-radius:4px;padding:1px 6px;font-size:11px;font-weight:700}.play-mode-soon{text-transform:uppercase;letter-spacing:.06em;opacity:.6;background:#ffffff1a;border-radius:4px;padding:2px 5px;font-size:10px;font-weight:700}.bot-difficulty{flex-direction:column;gap:6px;margin-top:6px;display:flex}.bot-option-list{flex-direction:column;gap:4px;display:flex}.bot-option{border-radius:var(--border-radius);color:var(--text-primary);text-align:left;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff12;flex-direction:column;gap:2px;padding:9px 12px;transition:background .15s,border-color .15s;display:flex}.bot-option:hover{background:#ffffff17;border-color:#ffffff26}.bot-option-active{color:#fff;background:#3498db38!important;border-color:#3498db80!important}.bot-option-active .bot-option-desc{opacity:.65;color:#fff}.bot-option-label{font-size:13px;font-weight:600}.bot-option-desc{opacity:.5;font-size:11px}.play-panel-footer{border-top:1px solid #ffffff0f;flex-direction:column;gap:8px;padding:10px 14px 14px;display:flex}.play-panel-play-btn{letter-spacing:.03em;width:100%;padding:11px;font-size:14px;font-weight:700}.puzzle-panel .puzzle-panel-body{flex-direction:column;flex:1;gap:10px;padding:18px 14px 10px;display:flex}.puzzle-title{color:var(--text-primary);margin:0;font-size:14px;font-weight:700}.puzzle-description{color:var(--text-primary);opacity:.7;margin:0;font-size:13px;line-height:1.5}.puzzle-hint{border-radius:var(--border-radius);color:var(--text-primary);opacity:.8;background:#ffffff0d;padding:10px 12px;font-size:12px}.puzzle-hint-label{margin-right:4px;font-weight:700}.puzzle-panel-footer{border-top:1px solid #ffffff0f;flex-direction:column;gap:8px;padding:10px 14px 14px;display:flex}.puzzle-waiting{color:var(--text-primary);opacity:.45;text-align:center;margin:0;font-size:12px}.puzzle-result{border-radius:var(--border-radius);align-items:center;gap:8px;padding:10px 12px;font-size:14px;font-weight:600;display:flex}.puzzle-result-icon{font-size:18px;font-weight:800}.puzzle-correct{color:#2ecc71;background:#2ecc7126;border:1px solid #2ecc714d}.puzzle-incorrect{color:var(--hover-danger);background:#e74c3c26;border:1px solid #e74c3c4d}.history-right-panel{flex-direction:column;min-height:0;display:flex;overflow:hidden}.history-panel-header{border-bottom:1px solid #ffffff0f;flex-shrink:0;align-items:center;gap:8px;padding:14px 14px 8px;display:flex}.history-panel-scroll{flex-direction:column;flex:1;height:0;min-height:0;display:flex;overflow-y:auto}.history-panel-item{cursor:pointer;text-align:left;background:0 0;border:none;border-bottom:1px solid #ffffff0d;flex-direction:column;flex-shrink:0;gap:3px;padding:10px 14px;transition:background .15s;display:flex}.history-panel-item:hover{background:#ffffff0f}.history-item-row{justify-content:space-between;align-items:center;display:flex}.history-item-who{color:var(--text-primary);font-size:13px;font-weight:600}.history-item-result{font-size:12px;font-weight:700}.result-win{color:#2ecc71}.result-lose{color:var(--hover-danger)}.history-item-meta{color:var(--text-primary);opacity:.45;font-size:11px}.ghp-back-btn{color:var(--text-primary);opacity:.5;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0;font-size:12px;transition:opacity .15s}.ghp-back-btn:hover{opacity:1}.ghp-search-wrap{border-bottom:1px solid #ffffff0f;flex-shrink:0;align-items:center;gap:6px;padding:6px 10px;display:flex}.ghp-search-icon{opacity:.5;flex-shrink:0;font-size:12px}.ghp-search-input{border-radius:var(--border-radius-small);color:var(--text-primary);background:#ffffff0f;border:1px solid #ffffff1a;outline:none;flex:1;padding:5px 8px;font-family:inherit;font-size:12px;transition:border-color .15s}.ghp-search-input::placeholder{color:#ffffff4d}.ghp-search-input:focus{border-color:#ffffff40}.ghp-search-clear{color:#ffffff59;cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:16px;line-height:1}.ghp-search-clear:hover{color:#ffffffb3}.ghp-filter-bar{flex-shrink:0;position:relative}.ghp-filter-btn{color:#fff6;cursor:pointer;background:0 0;border:none;border-left:1px solid #ffffff1a;border-radius:0;flex-shrink:0;justify-content:center;align-items:center;gap:3px;height:100%;padding:0 8px;transition:color .15s;display:flex}.ghp-filter-btn:hover{color:#ffffffbf}.ghp-filter-btn-active{color:var(--player1-color)}.ghp-filter-count{background:var(--player1-color);color:#fff;border-radius:8px;padding:1px 5px;font-size:9px;font-weight:700;line-height:1.4}.ghp-filter-dropdown{z-index:50;background:var(--primary-bg);border-radius:var(--border-radius);border:1px solid #ffffff1f;flex-direction:column;gap:10px;padding:10px;display:flex;position:absolute;top:calc(100% + 4px);left:0;right:0;box-shadow:0 8px 24px #0006}.ghp-filter-group{flex-direction:column;gap:5px;display:flex}.ghp-filter-label{text-transform:uppercase;letter-spacing:.08em;color:#ffffff59;font-size:10px;font-weight:700}.ghp-filter-options{flex-wrap:wrap;gap:4px;display:flex}.ghp-filter-option{border-radius:var(--border-radius-small);color:#ffffff8c;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;padding:3px 8px;font-size:11px;transition:background .12s,color .12s,border-color .12s}.ghp-filter-option:hover{color:#fffc;background:#ffffff1a}.ghp-filter-option.active{color:var(--player1-color);background:#3498db33;border-color:#3498db80}.leaderboard-page-card{background:var(--secondary-bg);border-radius:var(--border-radius-large);flex-direction:column;width:520px;max-height:calc(100vh - 32px);display:flex;overflow:hidden}.leaderboard-page-header{border-bottom:1px solid #ffffff12;flex-shrink:0;justify-content:space-between;align-items:center;padding:18px 20px 14px;display:flex}.leaderboard-page-title{color:#fff;font-size:15px;font-weight:700}.leaderboard-sort-tabs{gap:4px;display:flex}.leaderboard-sort-tab{color:#ffffff80;cursor:pointer;background:0 0;border:1px solid #ffffff1f;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600;transition:all .15s}.leaderboard-sort-tab:hover{color:#fffc}.leaderboard-sort-tab-active{color:var(--player1-color);background:#3498db33;border-color:#3498db80}.leaderboard-page-list{flex-direction:column;flex:1;height:0;min-height:0;display:flex;overflow-y:auto}.leaderboard-page-row{cursor:pointer;text-align:left;color:var(--text-primary);background:0 0;border:none;border-bottom:1px solid #ffffff0a;align-items:center;gap:12px;padding:12px 20px;transition:background .15s;display:flex}.leaderboard-page-row:hover{background:#ffffff0d}.leaderboard-page-rank{text-align:center;color:#ffffff73;min-width:28px;font-size:13px;font-weight:700}.leaderboard-page-name{color:#fff;flex:1;font-size:14px;font-weight:600}.leaderboard-page-games{color:#ffffff59;font-size:11px}.leaderboard-page-elo{text-align:right;min-width:70px;font-size:13px;font-weight:700}.leaderboard-page-empty{color:#ffffff59;margin:0;padding:24px 20px;font-size:13px}.coming-soon-page{opacity:.5;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.coming-soon-emoji{font-size:48px}.coming-soon-title{color:var(--text-primary);margin:0;font-size:1.4em;font-weight:700}.coming-soon-text{color:var(--text-primary);margin:0;font-size:.95em}.settings-modal-content{border:1px solid #ffffff1a;max-width:320px;background:var(--primary-bg)!important}.settings-modal-header{border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;padding:14px 18px 12px;display:flex}.settings-modal-title{color:#ffffffd9;letter-spacing:.03em;font-size:14px;font-weight:700}.settings-close-btn{color:#fff6;font-size:20px}.settings-close-btn:hover{color:#fffc}.settings-modal-body{flex-direction:column;gap:10px;padding:12px 18px 16px;display:flex}.settings-row{cursor:pointer;color:#ffffffb3;align-items:center;gap:10px;font-size:13px;display:flex}.settings-row input[type=checkbox]{accent-color:var(--player1-color);cursor:pointer;flex-shrink:0}.settings-row-volume{gap:8px}.settings-volume-label{color:#ffffffb3;white-space:nowrap;flex-shrink:0;font-size:13px}.settings-volume-val{color:#ffffff80;text-align:right;flex-shrink:0;min-width:30px;font-size:12px}.settings-row input[type=range]{accent-color:var(--player1-color);flex:1;min-width:0}.game-history-panel{flex-direction:column;min-height:0;max-height:calc(100vh - 32px);display:flex}.ghp-header{flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 14px 8px;display:flex}.ghp-live-btn{color:var(--player1-color);cursor:pointer;background:#3498db33;border:1px solid #3498db66;border-radius:4px;padding:3px 8px;font-size:11px;font-weight:700;transition:background .15s}.ghp-live-btn:hover{background:#3498db59}.ghp-list{flex-direction:column;flex:1;gap:2px;height:0;min-height:0;padding:0 6px 6px;display:flex;overflow-y:auto}.ghp-initial{color:#fff6;text-align:left;padding:5px 8px;font-size:11px;font-style:italic}.ghp-empty{color:#ffffff4d;margin:0;padding:8px;font-size:12px}.ghp-entry{cursor:pointer;text-align:left;color:#ffffffbf;background:0 0;border:1px solid #0000;border-radius:5px;align-items:center;gap:6px;width:100%;padding:5px 8px;font-size:12px;transition:background .12s;display:flex}.ghp-entry:hover{background:#ffffff0f}.ghp-entry-active{color:#fff;background:#3498db2e!important;border-color:#3498db59!important}.ghp-num{color:#ffffff59;text-align:right;flex-shrink:0;min-width:16px;font-size:10px}.ghp-icon{flex-shrink:0;font-size:13px;line-height:1}.ghp-notation{letter-spacing:.03em;flex:1;font-family:Courier New,monospace;font-size:13px;font-weight:600}.ghp-who{color:#fff6;flex-shrink:0;font-size:10px}.ghp-entry-active .ghp-num,.ghp-entry-active .ghp-who{color:#ffffffa6}.ghp-controls{border-top:1px solid #ffffff12;flex-shrink:0;align-items:center;gap:6px;padding:8px 10px 10px;display:flex}.ghp-nav-btn{flex:0 0 36px;justify-content:center;align-items:center;height:32px;padding:0;font-size:16px;font-weight:700;display:flex}.ghp-position{text-align:center;color:#ffffff80;flex:1;font-size:11px;font-weight:600}.ghp-action-btn{flex:0 0 32px;justify-content:center;align-items:center;height:32px;padding:0;font-size:15px;display:flex}.ghp-resign-btn{color:#ffffff80;flex:0 0 32px;justify-content:center;align-items:center;height:32px;padding:0;font-size:15px;display:flex}.ghp-resign-btn:hover:not(:disabled){color:var(--hover-danger);background:#e74c3c14;border-color:#e74c3c59}.puzzle-nav-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.puzzle-nav-btn{flex:0 0 32px;justify-content:center;align-items:center;height:28px;padding:0;font-size:14px;font-weight:700;display:flex}.puzzle-counter{color:#ffffff80;text-align:center;flex:1;font-size:12px;font-weight:600}.puzzle-difficulty-badge{letter-spacing:.08em;border:1px solid;border-radius:4px;width:fit-content;padding:2px 8px;font-size:10px;font-weight:800;display:inline-block}.friends-card{background:var(--secondary-bg);border-radius:var(--border-radius-large);flex-direction:column;align-self:stretch;width:420px;display:flex;overflow:hidden}.friends-tabs{border-bottom:1px solid #ffffff12;flex-shrink:0;display:flex}.friends-tab{color:#ffffff80;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;margin-bottom:-1px;padding:14px 12px;font-size:13px;font-weight:700;transition:color .15s,background .15s}.friends-tab:hover{color:#fffc}.friends-tab-active{color:#fff;border-bottom-color:var(--player1-color)}.friends-search-body{flex-direction:column;flex:1;display:flex;overflow:hidden}.friends-search-bar-wrap{flex-shrink:0;align-items:center;gap:8px;padding:14px 16px 10px;display:flex}.friends-search-icon{flex-shrink:0;font-size:14px}.friends-search-input{border-radius:var(--border-radius);color:var(--text-primary);background:#ffffff12;border:1px solid #ffffff1f;outline:none;flex:1;padding:8px 10px;font-family:inherit;font-size:13px;transition:border-color .15s}.friends-search-input::placeholder{color:#ffffff4d}.friends-search-input:focus{border-color:#ffffff4d}.friends-search-clear{color:#fff6;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:18px;line-height:1}.friends-search-clear:hover{color:#fffc}.friends-list-body{flex:1;overflow-y:auto}.friends-section{padding-bottom:4px}.friends-section-label{letter-spacing:.08em;color:#ffffff59;padding:12px 16px 6px;font-size:10px;font-weight:700}.friends-list{flex:1;overflow-y:auto}.friends-empty{color:#ffffff59;margin:0;padding:8px 16px;font-size:12px}.friends-empty-state{opacity:.5;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:48px 24px;display:flex}.friends-empty-emoji{font-size:40px}.friends-empty-title{color:var(--text-primary);margin:0;font-size:15px;font-weight:700}.friends-empty-sub{color:var(--text-primary);text-align:center;margin:0;font-size:12px}.friend-item{border-bottom:1px solid #ffffff0a;align-items:center;gap:12px;padding:10px 16px;transition:background .12s;display:flex}.friend-item:hover{background:#ffffff0a}.friend-avatar{background:var(--tertiary-bg);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:15px;font-weight:700;display:flex}.friend-item-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.friend-item-name{color:var(--text-primary);cursor:pointer;text-align:left;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;padding:0;font-size:13px;font-weight:600;transition:color .15s;overflow:hidden}.friend-item-name:hover{color:var(--player1-color);text-decoration:underline}.friend-item-elo{font-size:11px;font-weight:600}.friend-item-actions{flex-shrink:0;gap:6px;display:flex}.friend-add-btn{color:var(--player1-color);background:#3498db26;border-color:#3498db59;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:700}.friend-add-btn:hover:not(:disabled){background:#3498db47}.friend-accept-btn{color:#2ecc71;background:#2ecc7126;border-color:#2ecc7159;border-radius:6px;width:30px;height:30px;padding:0;font-size:13px;font-weight:700}.friend-decline-btn{width:30px;height:30px;color:var(--hover-danger);background:#e74c3c1a;border-color:#e74c3c40;border-radius:6px;padding:0;font-size:12px;font-weight:700}.friend-challenge-btn{border-radius:6px;width:32px;height:32px;padding:0;font-size:15px}.friend-added-badge,.friend-pending-badge{color:#fff6;background:#ffffff0d;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:700}.friends-leaderboard-panel .play-panel-body{padding:16px 14px}.leaderboard-list{flex-direction:column;gap:2px;margin-top:4px;display:flex}.leaderboard-item{cursor:pointer;text-align:left;width:100%;color:inherit;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:8px;padding:8px 10px;font-family:inherit;transition:background .12s;display:flex}.leaderboard-item:hover{background:#ffffff0f}.leaderboard-rank{color:#ffffff4d;text-align:right;flex-shrink:0;min-width:16px;font-size:11px;font-weight:700}.leaderboard-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;font-weight:600;overflow:hidden}.leaderboard-elo{flex-shrink:0;font-size:12px;font-weight:700}.profile-modal-overlay{justify-content:center;align-items:center;display:flex}.profile-modal-card{background:var(--secondary-bg);border-radius:var(--border-radius-large);border:1px solid #ffffff14;width:90%;min-width:320px;max-width:400px;padding:28px 28px 24px;position:relative;box-shadow:0 8px 32px #00000073}.profile-modal-close{color:#fff6;cursor:pointer;background:0 0;border:none;padding:0;font-size:22px;line-height:1;transition:color .15s;position:absolute;top:14px;right:16px}.profile-modal-close:hover{color:#ffffffe6}.profile-modal-loading,.profile-modal-error{color:#ffffff80;text-align:center;margin:0;padding:16px 0;font-size:13px}.profile-modal-error{color:var(--hover-danger)}.profile-modal-header{align-items:center;gap:16px;margin-bottom:20px;display:flex}.profile-modal-avatar{background:var(--tertiary-bg);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:22px;font-weight:700;display:flex}.profile-modal-info{flex-direction:column;gap:4px;display:flex}.profile-modal-name{color:#fff;margin:0;font-size:18px;font-weight:800}.profile-modal-elo{font-size:14px;font-weight:700}.profile-overall-row{gap:8px;margin-bottom:20px;display:flex}.profile-stat-box{border-radius:var(--border-radius);background:#ffffff0d;flex-direction:column;flex:1;align-items:center;gap:4px;padding:12px 8px;display:flex}.profile-stat-val{color:#fff;font-size:18px;font-weight:800}.profile-stat-lbl{color:#ffffff73;text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:600}.profile-tc-heading{letter-spacing:.08em;color:#ffffff59;margin:0 0 8px;font-size:10px;font-weight:700}.profile-tc-table{flex-direction:column;gap:2px;display:flex}.profile-tc-head,.profile-tc-row{grid-template-columns:1fr 1fr 1fr;gap:4px;padding:6px 8px;display:grid}.profile-tc-head{letter-spacing:.04em;color:#ffffff4d;text-transform:uppercase;font-size:10px;font-weight:700}.profile-tc-row{color:#fffc;background:#ffffff0a;border-radius:6px;font-size:13px}.profile-tc-format{font-weight:600}.profile-tc-elo{font-weight:700}.profile-no-stats{color:#ffffff59;text-align:center;margin:0;padding:16px 0 0;font-size:12px}.matchmaking-overlay{justify-content:center;align-items:center;display:flex}.matchmaking-card{background:var(--secondary-bg);border-radius:var(--border-radius-large);border:1px solid #ffffff14;flex-direction:column;align-items:center;gap:16px;width:90%;min-width:300px;max-width:380px;padding:40px 40px 32px;display:flex;box-shadow:0 8px 40px #00000080}.matchmaking-tc-badge{letter-spacing:.08em;text-transform:uppercase;color:var(--player1-color);background:#3498db26;border:1px solid #3498db4d;border-radius:4px;padding:3px 10px;font-size:11px;font-weight:800}.matchmaking-spinner{border:3px solid #ffffff1a;border-top-color:var(--player1-color);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite mm-spin}@keyframes mm-spin{to{transform:rotate(360deg)}}.matchmaking-title{color:#fff;text-align:center;margin:0;font-size:18px;font-weight:800}.matchmaking-sub{color:#ffffff80;text-align:center;margin:0;font-size:13px}.matchmaking-found-icon{font-size:36px}.matchmaking-vs-row{justify-content:center;align-items:center;gap:16px;width:100%;display:flex}.matchmaking-player{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.matchmaking-player-name{color:var(--player1-color);text-align:center;font-size:14px;font-weight:700}.matchmaking-opponent .matchmaking-player-name{color:var(--player2-color)}.matchmaking-player-elo{color:#ffffff80;font-size:12px;font-weight:600}.matchmaking-vs-sep{color:#ffffff4d;flex-shrink:0;font-size:13px;font-weight:800}.matchmaking-actions{flex-direction:column;gap:8px;width:100%;display:flex}.matchmaking-accept-btn{width:100%;padding:11px;font-size:14px;font-weight:700}.matchmaking-cancel-btn{width:100%;padding:10px;font-size:13px;font-weight:600}.matchmaking-error-icon{font-size:36px}.login-card{background:var(--secondary-bg);border-radius:var(--border-radius-large);flex-direction:column;align-items:center;gap:20px;min-width:340px;max-width:420px;padding:48px 56px;display:flex}.login-title{color:var(--text-primary);margin:0;font-size:2em;font-weight:800}.login-subtitle{color:var(--text-primary);opacity:.6;text-align:center;max-width:300px;margin:0;font-size:13px;line-height:1.5}.login-buttons{flex-direction:column;gap:10px;width:100%;display:flex}.btn-google{color:#3c4043;cursor:pointer;background:#fff;border:1px solid #dadce0;border-radius:6px;justify-content:center;align-items:center;gap:10px;width:100%;padding:11px 16px;font-size:14px;font-weight:500;transition:background .15s,box-shadow .15s;display:flex}.btn-google:hover{background:#f8f9fa;box-shadow:0 1px 6px #0003}.btn-dev{color:#f39c12;cursor:pointer;background:#f39c1226;border:1px solid #f39c1259;border-radius:6px;width:100%;padding:10px 16px;font-size:13px;font-weight:600;transition:background .15s}.btn-dev:hover{background:#f39c1240}.btn-dev:disabled{opacity:.5;cursor:not-allowed}.login-error{color:var(--hover-danger);text-align:center;margin:0;font-size:12px}.login-guest-note{color:var(--text-primary);opacity:.35;text-align:center;margin:0;font-size:11px}.board-with-axes{flex-direction:row;flex-shrink:0;gap:2px;display:flex}.board-axis-y{gap:var(--gap-size);flex-direction:column;justify-content:flex-start;align-self:flex-start;display:flex}.board-axis-main{flex-direction:column;gap:2px;display:flex}.board-axis-x{gap:var(--gap-size);flex-direction:row;display:flex}.board-axis-label{width:var(--cell-size);height:var(--cell-size);color:#ffffff59;flex-shrink:0;justify-content:center;align-items:center;font-family:Courier New,monospace;font-size:clamp(8px,1.1vmin,11px);font-weight:700;line-height:1;display:flex}.board-axis-y .board-axis-label{justify-content:flex-end;width:14px;padding-right:3px}.board-axis-x .board-axis-label{height:auto}.online-board-area{flex-direction:row;align-items:stretch;gap:0;display:flex}.online-board-col{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:5px;display:flex}.online-timer-card{background:var(--secondary-bg);color:#ffffff4d;letter-spacing:.04em;border:1px solid #ffffff14;border-radius:7px;align-self:flex-end;padding:4px 12px;font-family:Courier New,monospace;font-size:clamp(12px,1.5vmin,16px);font-weight:700;transition:color .2s,border-color .2s}.online-timer-card-active{color:#fff;border-color:#ffffff38}.online-timer-row{align-self:flex-end;align-items:center;gap:6px;display:flex}.online-away-countdown{color:var(--hover-danger);text-align:right;min-width:18px;font-family:Courier New,monospace;font-size:clamp(11px,1.3vmin,14px);font-weight:800}.online-elo-change{color:var(--modal-accent);margin:0;font-size:18px;font-weight:700}.nav-topbar{background:var(--secondary-bg);z-index:250;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;height:52px;padding:0 14px;display:none;position:sticky;top:0}.nav-topbar-logo{padding:0}.nav-topbar-toggle{color:#fff;cursor:pointer;border-radius:var(--border-radius-small);background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.nav-topbar-toggle:hover{background:#ffffff12}.nav-hamburger{flex-direction:column;justify-content:space-between;width:22px;height:16px;display:inline-flex}.nav-hamburger span{transform-origin:50%;background:#fff;border-radius:2px;width:100%;height:2px;transition:transform .2s,opacity .2s;display:block}.nav-hamburger-open span:first-child{transform:translateY(7px)rotate(45deg)}.nav-hamburger-open span:nth-child(2){opacity:0}.nav-hamburger-open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.nav-mobile-dropdown{background:var(--secondary-bg);z-index:240;border-bottom:1px solid #ffffff0d;flex-direction:column;gap:4px;max-height:calc(100vh - 52px);padding:12px 12px 16px;display:none;position:fixed;top:52px;left:0;right:0;overflow-y:auto}.nav-mobile-dropdown .nav-item{gap:14px;padding:14px 16px;font-size:18px}.nav-mobile-bottom{border-top:1px solid #ffffff12;flex-direction:column;gap:4px;margin-top:12px;padding-top:12px;display:flex}@media (width<=640px){.nav-sidebar{display:none}.nav-topbar,.nav-mobile-dropdown{display:flex}body{padding:0}.game-layout{flex-direction:column;height:100dvh}.main-content{justify-content:flex-start;align-items:stretch;height:calc(100dvh - 52px);min-height:0;padding:4px;overflow:hidden}.board-section{flex-direction:column;gap:6px;width:100%;height:100%;min-height:0;max-height:100%;overflow:hidden}:root{--cell-size:min(calc((100vw - 47px - 8 * 8px) / 9), calc((100dvh - 260px - 8 * 8px) / 9));--gap-size:8px}.board-wrapper{flex-shrink:0;padding:4px}.game-card-body{justify-content:center}.fence-panel{display:none}.right-panel{flex:1 1 0;min-height:0;width:100%!important;min-width:0!important;max-width:none!important}.game-card{flex-shrink:0;width:100%;padding:8px 8px 8px 0}.game-history-panel{height:100%;max-height:none}.wall-slot{-webkit-tap-highlight-color:transparent}.mobile-hide-board{display:none!important}.mobile-fence-chip{display:inline-flex!important}}.mobile-fence-chip{background:var(--secondary-bg);color:#ffffffd9;letter-spacing:.04em;white-space:nowrap;opacity:1;border:1px solid #ffffff14;border-radius:7px;align-items:center;margin-right:6px;padding:3px 10px;font-family:Courier New,monospace;font-size:13px;font-weight:700;display:none}