/* game.html */
html.game-online,html.game-online *{box-sizing:border-box}
html.game-online,html.game-online body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:#02070d;color:#f7e8c1}
html.game-online body{overflow-x:hidden}
html.game-online body:before{
content:"";position:fixed;inset:0;z-index:-2;
background:
radial-gradient(circle at 50% 35%,#0d2940 0,#061624 35%,#02070d 72%);
}
html.game-online body:after{
content:"";position:fixed;inset:0;z-index:-1;opacity:.55;
background:
radial-gradient(ellipse at 5% 80%,transparent 0 25%,#9a671c22 25.2% 25.5%,transparent 25.7%),
radial-gradient(ellipse at 95% 80%,transparent 0 25%,#9a671c22 25.2% 25.5%,transparent 25.7%);
pointer-events:none
}
html.game-online .app{width:min(1320px,100%);margin:auto;padding:12px 14px 18px;display:flex;flex-direction:column;align-items:center}
html.game-online .top{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
html.game-online .player{
height:86px;border:1px solid #a87322;border-radius:17px;
background:linear-gradient(90deg,#07131e,#0b1925);
display:flex;align-items:center;gap:16px;padding:10px 18px;
box-shadow:0 8px 25px #0008
}
html.game-online .player.right{justify-content:flex-end}
html.game-online .avatar{width:66px;height:66px;border:1px solid #bd8129;border-radius:14px;background:#07111a;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:Georgia,serif;font-size:clamp(18px,2vw,28px);font-weight:900;color:#f4cd73}
html.game-online .avatar img{width:100%;height:100%;object-fit:cover;display:block}
html.game-online .pinfo{line-height:1.15}html.game-online .name{font-size:18px}html.game-online .rating{margin-top:7px;color:#e3b84f;font-size:17px}
html.game-online .star{color:#e3b84f;font-size:21px}
html.game-online .timer{min-width:162px;height:60px;border:1px solid #bd8129;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;background:#08131d;color:#f5f0e7}
html.game-online .right .timer{background:#f3eee4;color:#111}
html.game-online .logo{text-align:center;white-space:nowrap;position:relative}
html.game-online .language-mobile{position:fixed;top:10px;right:12px;z-index:50}
html.game-online .language-mobile select{background:#07131e;color:#f4cd73;border:1px solid #a87322;border-radius:8px;padding:7px 9px;font-size:12px;cursor:pointer;outline:none;box-shadow:0 4px 15px #0008}
html.game-online .language-mobile select option{background:#07131e;color:#f7e8c1}
html.game-online .logo h1{margin:0;font-family:Georgia,serif;font-size:clamp(34px,5vw,58px);letter-spacing:4px;color:#f4cd73;text-shadow:0 3px 10px #000}
html.game-online .logo .crown{display:block;height:26px;font-size:31px;color:#f4cd73;line-height:22px}
html.game-online .logo p{margin:4px 0 0;font-size:13px;letter-spacing:5px;color:#dcae4f}
html.game-online .logo p:before,html.game-online .logo p:after{content:"◆";font-size:7px;margin:0 12px;color:#dcae4f}
html.game-online .game{position:relative;width:min(880px,calc(100vh - 235px),96vw);margin-top:4px;padding:7px 7px 0;border:1px solid #b37a25;border-radius:20px;background:#06131e;box-shadow:0 18px 55px #0009}
html.game-online .board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:1px solid #c18a36;border-radius:4px;overflow:hidden}
html.game-online .waiting-overlay{position:absolute;z-index:8;left:50%;top:calc(50% - 24px);transform:translate(-50%,-50%);display:none;align-items:center;justify-content:center;width:max-content;max-width:94%;padding:10px 16px;border:1px solid #dcae4f;border-radius:11px;background:#06131ee8;box-shadow:0 6px 20px #0009;color:#f7e8c1;font-size:clamp(14px,2vw,18px);font-weight:750;text-align:center;letter-spacing:.2px;white-space:nowrap;pointer-events:none}
html.game-online .waiting-overlay.show{display:flex}
html.game-online .waiting-overlay.joined{display:flex;border-color:#55c878;color:#eaffef}
html.game-online .waiting-overlay.occupied{display:flex;border-color:#d65b5b;color:#fff1f1;background:#1a090be8}
html.game-online .waiting-overlay.disconnected{display:flex;border-color:#dcae4f;color:#fff4cf;background:#171106e8}
html.game-online .waiting-overlay .occupied-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:#c53b43;color:#fff;font-size:16px;font-weight:900;line-height:1}
html.game-online .waiting-overlay .joined-check{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:#2fa65a;color:#fff;font-size:17px;font-weight:900;line-height:1}
html.game-online .waiting-overlay.searching{pointer-events:auto;gap:10px;flex-wrap:wrap;white-space:normal}
html.game-online .waiting-cancel{appearance:none;border:1px solid #dcae4f;border-radius:8px;background:#0b2030;color:#f7e8c1;padding:7px 11px;font:inherit;font-size:.82em;font-weight:800;cursor:pointer;white-space:nowrap}
html.game-online .waiting-cancel:hover{background:#133047}
html.game-online .waiting-cancel:disabled{opacity:.55;cursor:default}
html.game-online .square{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
html.game-online .light{background:#efd18f}html.game-online .dark{background:#936036}
html.game-online .square.selected{box-shadow:inset 0 0 0 4px #48c86a}
html.game-online .square.last-move{background:#d9b85c !important;box-shadow:inset 0 0 0 2px #f2dc91}
html.game-online .square.legal:after{content:"";width:18%;height:18%;border-radius:50%;background:#43a65b99;position:absolute}
html.game-online .square.capture:after{content:"";position:absolute;inset:7%;border:3px solid #d5aa45aa;border-radius:50%}
html.game-online .piece{width:94%;height:94%;object-fit:contain;display:block;z-index:2;filter:drop-shadow(0 4px 3px #0008);pointer-events:none}
html.game-online .coord{position:absolute;z-index:3;font-size:13px;font-weight:700;line-height:1;pointer-events:none}
html.game-online .file{right:4px;bottom:3px}html.game-online .rank{left:4px;top:3px}
html.game-online .light .coord{color:#70481f}html.game-online .dark .coord{color:#f3dca5}
html.game-online .status{height:34px;display:flex;align-items:center;justify-content:center}
html.game-online .turn{border:1px solid #a87322;border-radius:18px;padding:7px 26px;font-size:16px;background:#06131d;box-shadow:0 5px 18px #0007}
html.game-online .green{display:inline-block;width:18px;height:18px;border-radius:50%;background:#18c844;vertical-align:-4px;margin-right:9px;box-shadow:0 0 10px #18c844}
html.game-online .time-control{display:flex;align-items:center;justify-content:center;gap:8px;margin:7px auto 0;color:#d8c69f;font-size:13px}
html.game-online .time-control select{background:#07131e;color:#f4cd73;border:1px solid #a87322;border-radius:8px;padding:7px 12px;font-size:14px;font-weight:700;cursor:pointer;outline:none}
html.game-online .time-control select option{background:#07131e;color:#f7e8c1}
html.game-online .status{height:auto;min-height:46px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:5px 0}
html.game-online .move-timer{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #d69a37;border-radius:12px;background:#091722;box-shadow:0 5px 18px #0007;color:#f7e8c1;font-size:14px;font-weight:700}
html.game-online .move-timer-label{white-space:nowrap}
html.game-online .move-timer-value{min-width:82px;padding:6px 10px;border:1px solid #e6b957;border-radius:8px;background:#02070d;color:#ffd86a;font-size:24px;font-weight:800;letter-spacing:1px;text-align:center;box-shadow:inset 0 0 12px #0008}
html.game-online .controls{display:flex;justify-content:center;gap:48px;margin:4px auto 0}
html.game-online .btn{width:285px;height:48px;border-radius:10px;border:1px solid;font-size:17px;font-weight:700;color:white;cursor:pointer}
html.game-online .new{background:linear-gradient(#1467d8,#0750b4);border-color:#2b86ff;box-shadow:0 5px 15px #003c9970}
html.game-online .resign{background:linear-gradient(#d93434,#a91414);border-color:#ff5555;box-shadow:0 5px 15px #8c000070}
html.game-online .message{min-height:18px;text-align:center;margin-top:4px;color:#d8c69f;font-size:13px}
html.game-online .move-history{width:min(620px,94vw);margin:10px auto 0;padding:10px 12px;border:1px solid #233b4d;border-radius:12px;background:#07131e;color:#dce7ef}
html.game-online .move-history-title{text-align:center;font-weight:800;color:#f4cd73;margin-bottom:6px}
html.game-online .move-history-list{max-height:110px;overflow-y:auto;font-family:Consolas,monospace;font-size:14px;line-height:1.65}
html.game-online .move-history-row{display:grid;grid-template-columns:34px 1fr 1fr;gap:8px;border-top:1px solid #132838;padding:3px 0}
html.game-online .move-history-row:first-child{border-top:0}
html.game-online .game-id{margin:7px auto 0;text-align:center;color:#8fa4b4;font-size:12px;letter-spacing:.5px}
html.game-online .game-id strong{color:#d8c69f;font-weight:700}
html.game-online .invite-link{display:flex;align-items:center;justify-content:center;gap:7px;margin:6px auto 0;flex-wrap:wrap}
html.game-online .invite-link button{background:#17425c;color:#f7e8c1;border:1px solid #5b86a2;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}
html.game-online .invite-link-status{min-width:135px;color:#9fb4c3;font-size:12px;text-align:center}
html.game-online .player-color{display:flex;align-items:center;justify-content:center;gap:8px;margin:7px auto 0;color:#d8c69f;font-size:12px}
html.game-online .player-color select{background:#07131e;color:#f4cd73;border:1px solid #a87322;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:700;outline:none}
@media(min-width:901px) and (max-height:850px){
html.game-online .top{gap:10px}
html.game-online .player{height:70px;padding:7px 14px;gap:10px}
html.game-online .avatar{width:52px;height:52px}
html.game-online .name{font-size:15px}html.game-online .rating{font-size:14px;margin-top:4px}html.game-online .star{font-size:17px}
html.game-online .timer{min-width:130px;height:48px;font-size:27px}
html.game-online .logo .crown{height:19px;font-size:25px;line-height:18px}
html.game-online .logo h1{font-size:42px}
html.game-online .logo p{font-size:10px;margin-top:1px}
html.game-online .game{width:min(760px,calc(100vh - 195px))}
html.game-online .controls{margin-top:2px}html.game-online .btn{height:44px}
}
html.game-online .king-in-check{
box-shadow:inset 0 0 0 4px rgba(220,40,40,.95),inset 0 0 22px rgba(220,40,40,.55);
}
html.game-online .promotion-overlay{
position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.55);z-index:1000;
}
html.game-online .promotion-box{
display:flex;gap:10px;padding:14px;border-radius:14px;background:#f2f2f2;
box-shadow:0 10px 40px rgba(0,0,0,.35);
}
html.game-online .promotion-btn{
width:72px;height:72px;border:0;border-radius:10px;background:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;
}
html.game-online .promotion-btn:hover{background:#ddd}
html.game-online .promotion-btn img{width:58px;height:58px;object-fit:contain}
html.game-online .game-end-overlay{
position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(1,10,18,.78);backdrop-filter:blur(7px);
z-index:1100;padding:18px
}
html.game-online .game-end-overlay[hidden]{display:none}
html.game-online .game-end-box{
position:relative;width:min(620px,94vw);overflow:hidden;text-align:center;
border:1px solid #b77a24;border-radius:22px;
background:linear-gradient(180deg,#0d2232 0%,#081723 100%);
box-shadow:0 28px 80px #000d,0 0 34px #b77a2424
}
html.game-online .game-end-close{
position:absolute;right:16px;top:14px;z-index:3;
width:38px;height:38px;border:0;border-radius:50%;
background:transparent;color:#dce8ef;font-size:30px;line-height:1;cursor:pointer
}
html.game-online .game-end-close:hover{background:#ffffff10;color:#f4cd73}
html.game-online .game-end-head{padding:28px 64px 22px}
html.game-online .game-end-icon{font-size:44px;line-height:1;color:#f4cd73;margin-bottom:10px}
html.game-online .game-end-title{
margin:0;color:#f4cd73;font-family:Georgia,serif;
font-size:31px;letter-spacing:1.5px;text-transform:uppercase
}
html.game-online .game-end-result{margin:8px 0 0;color:#f5f0e7;font-size:18px;font-weight:800}
html.game-online .game-end-reason{margin:5px 0 0;color:#8fb3cb;font-size:13px;font-weight:700}
html.game-online .game-end-body{
border-top:1px solid #294455;border-bottom:1px solid #294455;
padding:24px 26px 22px
}
html.game-online .game-end-matchup{
display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);
align-items:center;gap:14px
}
html.game-online .game-end-player{min-width:0}
html.game-online .game-end-avatar{
width:74px;height:74px;margin:0 auto 10px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
border:1px solid #b77a24;background:linear-gradient(145deg,#124d78,#0a2940);
color:#fff;font-family:Georgia,serif;font-size:34px;font-weight:800;
box-shadow:0 8px 22px #0007
}
html.game-online .game-end-player.black .game-end-avatar{
background:linear-gradient(145deg,#1c2a35,#050b10)
}
html.game-online .game-end-name{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
color:#f5f0e7;font-size:16px;font-weight:900
}
html.game-online .game-end-rating{margin-top:5px;color:#9fc2d7;font-size:13px;font-weight:800}
html.game-online .game-end-rating-change{
margin:5px auto 0;
width:max-content;
max-width:100%;
padding:3px 8px;
border-radius:999px;
border:1px solid #465966;
background:#13212b;
color:#a9bac5;
font-size:10px;
font-weight:900;
line-height:1.2;
white-space:nowrap;
}
html.game-online .game-end-rating-change[hidden]{display:none}
html.game-online .game-end-rating-change.positive{
border-color:#27664a;
background:#0b2b20;
color:#79e3aa;
}
html.game-online .game-end-rating-change.negative{
border-color:#733c3c;
background:#301616;
color:#ff9c9c;
}
html.game-online .game-end-rating-change.zero{
border-color:#465966;
background:#13212b;
color:#a9bac5;
}
html.game-online .game-end-side{margin-top:3px;color:#718d9e;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.8px}
html.game-online .game-end-center{display:flex;flex-direction:column;align-items:center;gap:5px}
html.game-online .game-end-vs{color:#607b8c;font-size:14px;font-weight:900}
html.game-online .game-end-control{color:#f4cd73;font-size:20px;font-weight:900}
html.game-online .game-end-control-label{color:#7895a8;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.7px}
html.game-online .game-end-score{
margin-top:20px;padding-top:16px;border-top:1px solid #203847;
display:flex;justify-content:center;gap:10px;align-items:center;
color:#d8e4eb;font-size:13px
}
html.game-online .game-end-score strong{color:#f4cd73;font-size:18px}
html.game-online .game-end-rematch-status{
margin:16px 20px 0;padding:12px 14px;border:1px solid #2f4c60;border-radius:11px;
background:#07141f;color:#dce8ef
}
html.game-online .game-end-rematch-status[hidden]{display:none}
html.game-online .game-end-rematch-message{font-size:13px;font-weight:800;line-height:1.35}
html.game-online .game-end-rematch-response{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
html.game-online .game-end-rematch-response[hidden]{display:none}
html.game-online .game-end-accept,html.game-online .game-end-decline{
min-height:42px;border-radius:9px;font-size:12px;font-weight:900;cursor:pointer
}
html.game-online .game-end-accept{border:1px solid #2b86ff;background:linear-gradient(#1467d8,#0750b4);color:#fff}
html.game-online .game-end-decline{border:1px solid #5c7180;background:#10202b;color:#cbd8e0}
html.game-online .game-end-actions{
display:grid;grid-template-columns:44px 1fr 1.25fr;gap:10px;
padding:16px 20px 18px
}
html.game-online .game-end-share,html.game-online .game-end-rematch,html.game-online .game-end-new{
min-height:48px;border-radius:11px;font-size:13px;font-weight:900;cursor:pointer
}
html.game-online .game-end-share{
border:1px solid #35556a;background:#0b1d2a;color:#9fd0ef;font-size:19px
}
html.game-online .game-end-rematch{
border:1px solid #426177;background:#102838;color:#c6dce9
}
html.game-online .game-end-new{
border:1px solid #2b86ff;background:linear-gradient(#1467d8,#0750b4);
color:#fff;box-shadow:0 5px 15px #003c9970
}
html.game-online .game-end-share:hover,html.game-online .game-end-rematch:hover,html.game-online .game-end-new:hover{filter:brightness(1.08)}
@media(max-width:600px){
html.game-online .game-end-box{width:min(94vw,460px)}
html.game-online .game-end-head{padding:24px 48px 18px}
html.game-online .game-end-title{font-size:25px}
html.game-online .game-end-result{font-size:16px}
html.game-online .game-end-body{padding:20px 14px}
html.game-online .game-end-matchup{grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);gap:8px}
html.game-online .game-end-avatar{width:62px;height:62px;font-size:28px}
html.game-online .game-end-name{font-size:13px}
html.game-online .game-end-rating{font-size:12px}
html.game-online .game-end-control{font-size:16px}
html.game-online .game-end-actions{grid-template-columns:42px 1fr 1.15fr;padding:13px 12px 14px;gap:7px}
html.game-online .game-end-share,html.game-online .game-end-rematch,html.game-online .game-end-new{min-height:44px;font-size:11px}
}
/* =========================================================
CHESSORA ONLINE — CLEAN LAYOUT FROM STABLE COMPUTER MODE
========================================================= */
html.game-online .home-button{
position:fixed;left:10px;top:12px;z-index:80;
display:inline-flex;align-items:center;justify-content:center;
min-height:38px;padding:8px 12px;
border:1px solid #a87322;border-radius:9px;
background:#07131e;color:#f4cd73;text-decoration:none;
font-size:12px;font-weight:800;box-shadow:0 4px 15px #0008;
}
html.game-online .mobile-history-bar{display:none}
html.game-online .captured-strip{
width:100%;height:36px;min-height:36px;
display:flex;align-items:center;gap:1px;padding:1px 5px;
overflow:hidden;background:transparent;
}
html.game-online .captured-piece{
width:32px;height:32px;flex:0 0 32px;object-fit:contain;
filter:drop-shadow(0 2px 2px #0008);
}
@media(min-width:901px){
html.game-online,html.game-online body{height:100%;overflow:hidden}
html.game-online body{min-height:100dvh}
html.game-online .app{
width:100%;max-width:none;height:100dvh;min-height:0;
margin:0;padding:10px 12px 8px;overflow:hidden;
}
html.game-online .top{
width:min(1500px,calc(100vw - 270px));height:88px;
margin:0 auto 8px;padding:0;
grid-template-columns:minmax(360px,1fr) auto minmax(360px,1fr);
gap:16px;
}
html.game-online .player{height:80px;padding:8px 16px;gap:12px}
html.game-online .avatar{width:58px;height:58px;flex:0 0 58px}
html.game-online .name{font-size:17px}html.game-online .rating{font-size:15px;margin-top:4px}
html.game-online .timer{min-width:145px;width:145px;height:56px;font-size:31px}
html.game-online .logo h1{font-size:48px}html.game-online .logo .crown{font-size:28px;height:22px}html.game-online .logo p{font-size:11px;margin-top:2px}
html.game-online .language-mobile{top:12px;right:10px}
html.game-online .language-mobile select{height:36px;padding:6px 9px;font-size:11px}
html.game-online .online-layout{
width:min(1360px,calc(100vw - 120px));
height:calc(100dvh - 116px);min-height:0;
margin:0 auto;padding:0;
display:grid;
grid-template-columns:285px minmax(0,1fr) 285px;
gap:14px;
align-items:start;
justify-content:center;
}
html.game-online .history-sidebar,html.game-online .control-sidebar{
width:285px;height:100%;min-height:0;margin:0;
border:1px solid #a87322;border-radius:17px;
background:linear-gradient(180deg,#07131e,#0b1925);
box-shadow:0 12px 34px #0007;overflow:hidden;
}
html.game-online .history-sidebar{grid-column:1;padding:12px}
html.game-online .history-sidebar .move-history{
width:100%;height:100%;margin:0;padding:0;
border:1px solid #233b4d;border-radius:13px;background:#07131e;
display:flex;flex-direction:column;overflow:hidden;
}
html.game-online .history-sidebar .move-history-title{
flex:0 0 auto;margin:0;padding:14px 8px 10px;
font-size:18px;font-weight:900;
}
html.game-online .history-sidebar .move-history-list{
flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;
padding:0 14px 12px;font-size:14px;line-height:1.65;
}
html.game-online .online-layout .game{
grid-column:2;justify-self:center;
width:min(620px,100%,calc(100dvh - 220px));
max-width:100%;height:auto;margin:0;padding:0;
border:0;border-radius:0;background:transparent;box-shadow:none;
display:grid;
grid-template-rows:36px minmax(0,1fr) 36px 50px;
align-items:stretch;overflow:visible;
}
html.game-online .online-layout .captured-top{grid-row:1}
html.game-online .online-layout .board{
grid-row:2;width:100%;max-width:100%;aspect-ratio:1;margin:0 auto;
border:1px solid #c18a36;border-radius:4px;
}
html.game-online .online-layout .captured-bottom{grid-row:3}
html.game-online .online-layout .status{
grid-row:4;width:max-content;min-height:50px;height:50px;
margin:0 auto;padding:2px 0;
display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap;
}
html.game-online .online-layout .turn{height:40px;padding:8px 20px;font-size:15px;white-space:nowrap}
html.game-online .online-layout .move-timer{height:46px;padding:5px 10px;white-space:nowrap}
html.game-online .online-layout .move-timer-value{font-size:22px;min-width:86px;padding:5px 9px}
html.game-online .control-sidebar{
grid-column:3;padding:12px;
display:flex;flex-direction:column;gap:9px;
}
html.game-online .control-sidebar .time-control{
width:100%;min-height:62px;margin:0;padding:10px;
border:1px solid #233b4d;border-radius:13px;background:#07131e;
display:flex;align-items:center;justify-content:center;gap:9px;
}
html.game-online .control-sidebar .time-control select{min-width:96px}
html.game-online .control-sidebar .game-id{
width:100%;margin:0;padding:8px 6px;
border:1px solid #233b4d;border-radius:10px;background:#07131e;
}
html.game-online .control-sidebar .invite-link{width:100%;margin:0;gap:5px}
html.game-online .control-sidebar .invite-link button{width:100%;min-height:36px}
html.game-online .control-sidebar .invite-link-status{width:100%;min-width:0;font-size:10px}
html.game-online .control-sidebar .player-color{
width:100%;margin:0;padding:6px;
border:1px solid #233b4d;border-radius:10px;background:#07131e;
}
html.game-online .control-sidebar .controls{
width:100%;margin:0;display:grid;grid-template-columns:1fr;gap:9px;
}
html.game-online .control-sidebar .controls .btn{width:100%;height:50px;font-size:17px;font-weight:900}
html.game-online .control-sidebar .message{
width:100%;min-height:52px;margin:0;padding:8px 10px;
border:1px solid #233b4d;border-radius:10px;background:#07131e;
display:flex;align-items:center;justify-content:center;
font-size:13px;line-height:1.25;
}
}
@media(min-width:901px) and (max-width:1250px){
html.game-online .top{width:calc(100vw - 210px);grid-template-columns:minmax(300px,1fr) auto minmax(300px,1fr)}
html.game-online .online-layout{width:calc(100vw - 28px);grid-template-columns:220px minmax(0,1fr) 220px;gap:10px}
html.game-online .history-sidebar,html.game-online .control-sidebar{width:220px}
html.game-online .online-layout .game{width:min(560px,100%,calc(100dvh - 210px))}
html.game-online .timer{min-width:125px;width:125px;font-size:27px}
html.game-online .logo h1{font-size:42px}
}
/* ============================================================
CHESSORA ONLINE — EXACT DESKTOP REFERENCE
Reference canvas: 1756×831 screenshot supplied by user.
Clean override on top of stable online game.
============================================================ */
@media(min-width:901px){
html.game-online,html.game-online body{width:100%;height:100%;overflow:hidden!important}
html.game-online body{min-height:100dvh}
html.game-online .app{
width:100%!important;max-width:none!important;height:100dvh!important;
margin:0!important;padding:10px 0 8px!important;overflow:hidden!important;
}
/* Reference: x=137..1618, y=19..99 */
html.game-online .top{
width:min(1482px,calc(100vw - 274px))!important;
max-width:none!important;height:80px!important;margin:9px auto 10px!important;
padding:0!important;display:grid!important;
grid-template-columns:minmax(0,566px) minmax(330px,1fr) minmax(0,566px)!important;
gap:0!important;align-items:center!important;
}
html.game-online .player{
width:100%!important;height:80px!important;margin:0!important;
padding:8px 16px!important;border-radius:17px!important;
}
html.game-online .player.right{justify-content:flex-end!important}
html.game-online .avatar{width:58px!important;height:58px!important;flex:0 0 58px!important;border-radius:13px!important}
html.game-online .name{font-size:18px!important}html.game-online .rating{font-size:16px!important;margin-top:4px!important}
html.game-online .timer{width:150px!important;min-width:150px!important;height:58px!important;font-size:32px!important;border-radius:12px!important}
html.game-online .logo{width:100%!important;min-width:0!important}
html.game-online .logo .crown{font-size:28px!important;height:22px!important;line-height:20px!important}
html.game-online .logo h1{font-size:48px!important;letter-spacing:4px!important;white-space:nowrap!important}
html.game-online .logo p{font-size:11px!important;letter-spacing:5px!important;margin-top:2px!important}
html.game-online .home-button{
position:fixed!important;left:10px!important;top:13px!important;z-index:100!important;
min-height:38px!important;padding:8px 12px!important;font-size:12px!important
}
html.game-online .language-mobile{position:fixed!important;right:10px!important;top:13px!important;z-index:100!important}
html.game-online .language-mobile select{height:36px!important;padding:6px 10px!important;font-size:11px!important}
/* Reference sidebars: x≈141 and x≈1316, board centered at viewport center. */
html.game-online .online-layout{
position:relative!important;display:block!important;width:1482px!important;
max-width:calc(100vw - 274px)!important;height:calc(100dvh - 109px)!important;
min-height:0!important;margin:0 auto!important;padding:0!important;overflow:visible!important;
}
html.game-online .history-sidebar{
position:absolute!important;left:4px!important;right:auto!important;top:0!important;
transform:none!important;width:300px!important;height:calc(100dvh - 119px)!important;
max-height:665px!important;margin:0!important;padding:13px!important;
border:1px solid #a87322!important;border-radius:17px!important;
background:linear-gradient(180deg,#07131e,#0b1925)!important;box-shadow:none!important;overflow:hidden!important;
}
html.game-online .history-sidebar .move-history{
width:100%!important;height:100%!important;margin:0!important;padding:0!important;
border:1px solid #233b4d!important;border-radius:13px!important;background:#07131e!important;
display:flex!important;flex-direction:column!important;overflow:hidden!important
}
html.game-online .history-sidebar .move-history-title{
flex:0 0 48px!important;margin:0!important;padding:15px 8px 10px!important;
border:0!important;text-align:center!important;font-size:18px!important;font-weight:900!important
}
html.game-online .history-sidebar .move-history-list{
flex:1 1 auto!important;min-height:0!important;max-height:none!important;
padding:0 14px 12px!important;overflow-y:auto!important
}
html.game-online .control-sidebar{
position:absolute!important;right:4px!important;left:auto!important;top:0!important;
transform:none!important;width:300px!important;height:calc(100dvh - 119px)!important;
max-height:665px!important;margin:0!important;padding:13px!important;
border:1px solid #a87322!important;border-radius:17px!important;
background:linear-gradient(180deg,#07131e,#0b1925)!important;box-shadow:none!important;
overflow:hidden!important;display:flex!important;flex-direction:column!important;gap:10px!important
}
/* Exact screenshot hides online setup metadata from the play panel. */
html.game-online .control-sidebar .game-id,html.game-online .control-sidebar .invite-link,html.game-online .control-sidebar .player-color{display:none!important}
html.game-online .control-sidebar .time-control{
width:100%!important;min-height:64px!important;margin:0!important;padding:10px!important;
display:flex!important;flex-direction:row!important;align-items:center!important;
justify-content:center!important;gap:10px!important;
border:1px solid #233b4d!important;border-radius:13px!important;background:#07131e!important
}
html.game-online .control-sidebar .time-control select{width:auto!important;min-width:98px!important;padding:7px 11px!important}
html.game-online .control-sidebar .controls{
width:100%!important;margin:0!important;display:grid!important;grid-template-columns:1fr!important;gap:9px!important
}
html.game-online .control-sidebar .controls .btn{
width:100%!important;height:51px!important;margin:0!important;border-radius:10px!important;
font-size:17px!important;font-weight:900!important
}
html.game-online .control-sidebar .message{
width:100%!important;min-height:54px!important;margin:0!important;padding:8px 10px!important;
border:1px solid #233b4d!important;border-radius:10px!important;background:#07131e!important;
display:flex!important;align-items:center!important;justify-content:center!important;
font-size:13px!important;line-height:1.25!important
}
/* Board reference: 575×575, centered at x=878, y≈149 */
html.game-online .online-layout .game{
position:absolute!important;left:50%!important;top:40px!important;transform:translateX(-50%)!important;
width:min(575px,calc(100dvh - 256px))!important;height:auto!important;
margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
background:transparent!important;box-shadow:none!important;overflow:visible!important;
display:grid!important;grid-template-rows:0 minmax(0,1fr) 0 58px!important
}
html.game-online .online-layout .captured-strip{
min-height:0!important;height:0!important;padding:0!important;overflow:visible!important;
position:relative!important;z-index:3!important
}
html.game-online .online-layout .captured-top{grid-row:1!important;transform:translateY(-34px)!important}
html.game-online .online-layout .captured-bottom{grid-row:3!important;transform:translateY(17px)!important}
html.game-online .online-layout .captured-piece{width:30px!important;height:30px!important;flex:0 0 30px!important}
html.game-online .online-layout .board{
grid-row:2!important;width:100%!important;height:auto!important;max-width:100%!important;
aspect-ratio:1!important;margin:0 auto!important;border-radius:4px!important
}
html.game-online .online-layout .status{
grid-row:4!important;width:max-content!important;height:58px!important;min-height:58px!important;
margin:42px auto 0!important;padding:0!important;background:transparent!important;border:0!important;
display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important
}
html.game-online .online-layout .turn{
min-width:170px!important;height:42px!important;padding:9px 20px!important;
font-size:16px!important;white-space:nowrap!important
}
html.game-online .online-layout .move-timer{
height:48px!important;padding:5px 10px!important;font-size:14px!important;white-space:nowrap!important
}
html.game-online .online-layout .move-timer-value{
min-width:90px!important;padding:5px 10px!important;font-size:23px!important
}
html.game-online .mobile-history-bar{display:none!important}
}
/* Scale the same composition proportionally on smaller desktop widths.
No overlap: side panels shrink first, board remains centered. */
@media(min-width:901px) and (max-width:1550px){
html.game-online .top,html.game-online .online-layout{width:calc(100vw - 180px)!important;max-width:none!important}
html.game-online .top{grid-template-columns:minmax(0,1fr) 310px minmax(0,1fr)!important}
html.game-online .history-sidebar,html.game-online .control-sidebar{width:250px!important}
html.game-online .online-layout .game{width:min(560px,calc(100dvh - 245px),calc(100vw - 540px))!important}
html.game-online .logo h1{font-size:40px!important}
html.game-online .timer{width:128px!important;min-width:128px!important;font-size:27px!important}
}
@media(min-width:901px) and (max-width:1180px){
html.game-online .top,html.game-online .online-layout{width:calc(100vw - 130px)!important}
html.game-online .history-sidebar,html.game-online .control-sidebar{width:210px!important}
html.game-online .online-layout .game{width:min(520px,calc(100dvh - 235px),calc(100vw - 450px))!important}
html.game-online .logo h1{font-size:34px!important}
}
/* MOBILE: copy the proven computer-mode composition rather than desktop columns. */
/* REFERENCE V3 — precise alignment only */
@media(min-width:901px){
/* Keep sidebars exactly aligned with the outer edges of the upper player panels. */
html.game-online .online-layout{
width:min(1482px,calc(100vw - 274px))!important;
max-width:none!important;
}
html.game-online .history-sidebar{
left:0!important;
}
html.game-online .control-sidebar{
right:0!important;
}
/* Move only the outer Home / Language controls away from the player panels.
Do NOT move or resize the upper player panels or sidebars. */
html.game-online .home-button{
left:8px!important;
top:13px!important;
padding-left:8px!important;
padding-right:8px!important;
font-size:11px!important;
}
html.game-online .language-mobile{
right:8px!important;
top:13px!important;
}
html.game-online .language-mobile select{
max-width:112px!important;
padding-left:6px!important;
padding-right:6px!important;
font-size:10px!important;
}
/* Raise the lower turn timer slightly, without moving board or sidebars. */
html.game-online .online-layout .status{
margin-top:32px!important;
}
}
/* Preserve edge alignment at narrower desktop sizes too. */
@media(min-width:901px) and (max-width:1550px){
html.game-online .online-layout{
width:calc(100vw - 180px)!important;
}
}
@media(min-width:901px) and (max-width:1180px){
html.game-online .online-layout{
width:calc(100vw - 130px)!important;
}
}
/* REFERENCE V4 — keep top panels and side panels on the same vertical edges */
@media(min-width:901px){
/* Move the whole left/right column system inward together.
This preserves exact alignment between upper player panels and side panels. */
html.game-online .top{
width:min(1442px,calc(100vw - 314px))!important;
}
html.game-online .online-layout{
width:min(1442px,calc(100vw - 314px))!important;
}
/* Side panels remain flush with the same outer edges as the top player panels. */
html.game-online .history-sidebar{
left:0!important;
}
html.game-online .control-sidebar{
right:0!important;
}
/* Keep Home and Language outside the top player panels. */
html.game-online .home-button{
left:8px!important;
top:13px!important;
z-index:110!important;
}
html.game-online .language-mobile{
right:8px!important;
top:13px!important;
z-index:110!important;
}
/* Board/logo stay centered. */
html.game-online .logo,html.game-online .online-layout .game{
z-index:2!important;
}
}
@media(min-width:901px) and (max-width:1550px){
html.game-online .top,html.game-online .online-layout{
width:calc(100vw - 220px)!important;
}
}
@media(min-width:901px) and (max-width:1180px){
html.game-online .top,html.game-online .online-layout{
width:calc(100vw - 170px)!important;
}
}
/* REFERENCE V5 — move only Home button slightly farther left / smaller */
@media(min-width:901px){
html.game-online .home-button{
left:4px!important;
top:13px!important;
min-height:36px!important;
padding:7px 8px!important;
font-size:10.5px!important;
}
}
/* REFERENCE V6 — only shrink the inner move-timer box */
@media(min-width:901px){
html.game-online .online-layout .move-timer-value{
min-width:82px!important;
padding:4px 8px!important;
font-size:22px!important;
border-radius:7px!important;
}
}
/* MOBILE CSS COPIED FROM STABLE computer.html */
@media(max-width:600px){
html.game-online .status{gap:7px}
html.game-online .move-timer{padding:5px 8px;font-size:12px}
html.game-online .move-timer-value{min-width:72px;font-size:20px;padding:5px 8px}
}
@media(max-width:900px){
html.game-online,html.game-online body{
width:100%;
height:100%;
overflow:hidden!important;
}
html.game-online body{
min-height:100dvh;
overflow:hidden!important;
}
html.game-online .app{
width:100%;
height:100dvh;
min-height:0;
padding:
max(6px,env(safe-area-inset-top))
6px
max(6px,env(safe-area-inset-bottom));
overflow:hidden!important;
display:flex;
flex-direction:column;
}
html.game-online .top{
flex:0 0 auto;
width:100%;
gap:6px;
margin:0;
}
html.game-online .player{
height:54px;
min-width:0;
gap:6px;
padding:5px 7px;
border-radius:11px;
}
html.game-online .avatar{
width:40px;
height:40px;
border-radius:9px;
}
html.game-online .pinfo{min-width:0}
html.game-online .name{font-size:12px;white-space:nowrap}
html.game-online .rating{font-size:11px;margin-top:2px}
html.game-online .timer{
min-width:68px;
height:38px;
border-radius:8px;
font-size:19px;
}
html.game-online .logo h1{
font-size:24px;
letter-spacing:2px;
}
html.game-online .logo .crown{
display:none;
}
html.game-online .logo p{
display:none;
}
html.game-online .language-mobile{
top:6px;
right:6px;
}
html.game-online .language-mobile select{
padding:5px 6px;
font-size:10px;
}
html.game-online .online-layout{
flex:1 1 auto;
min-height:0;
width:100%;
margin:4px 0 0;
display:grid;
grid-template-rows:minmax(0,1fr) auto auto;
gap:5px;
overflow:hidden;
}
html.game-online .online-layout .game{
order:1;
width:auto;
height:auto;
min-height:0;
margin:0 auto;
padding:4px 4px 0;
align-self:stretch;
justify-self:center;
max-width:100%;
max-height:100%;
display:flex;
flex-direction:column;
}
html.game-online .online-layout .board{
width:auto;
height:auto;
flex:1 1 auto;
min-height:0;
aspect-ratio:1;
max-width:100%;
max-height:100%;
margin:auto;
}
html.game-online .online-layout .status{
flex:0 0 auto;
min-height:34px;
padding:3px 0;
gap:5px;
}
html.game-online .turn{
padding:5px 10px;
font-size:11px;
}
html.game-online .green{
width:12px;
height:12px;
margin-right:5px;
}
html.game-online .move-timer{
padding:3px 6px;
font-size:10px;
gap:5px;
}
html.game-online .move-timer-value{
min-width:58px;
font-size:15px;
padding:3px 6px;
}
html.game-online .control-sidebar{
order:2;
width:100%;
height:auto;
min-height:0;
margin:0;
padding:0;
border:0;
background:transparent;
box-shadow:none;
overflow:hidden;
display:grid;
grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto;
gap:5px 6px;
align-items:center;
}
html.game-online .control-sidebar .time-control{
grid-column:1;
grid-row:1;
margin:0;
padding:4px 6px;
border-radius:8px;
gap:4px;
font-size:10px;
white-space:nowrap;
}
html.game-online .control-sidebar .time-control select{
padding:4px 6px;
font-size:11px;
}
html.game-online .control-sidebar .controls{
grid-column:2;
grid-row:1;
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:nowrap;
gap:4px;
margin:0;
min-width:0;
}
html.game-online .control-sidebar .controls .btn{
width:auto;
min-width:0;
flex:1 1 0;
height:36px;
padding:0 5px;
border-radius:8px;
font-size:10px;
white-space:nowrap;
}
html.game-online .control-sidebar .message{
grid-column:1 / -1;
grid-row:2;
min-height:22px;
margin:0;
padding:2px 4px;
border:0;
background:transparent;
font-size:9px;
line-height:1.15;
}
html.game-online .history-sidebar{
order:3;
width:100%;
height:34px;
min-height:34px;
margin:0;
padding:0 6px;
border:1px solid #233b4d;
border-radius:9px;
background:#07131e;
box-shadow:none;
overflow:hidden;
display:flex;
align-items:center;
}
html.game-online .history-sidebar .move-history{
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
background:transparent;
display:flex;
align-items:center;
gap:7px;
overflow:hidden;
min-width:0;
}
html.game-online .history-sidebar .move-history-title{
flex:0 0 auto;
margin:0;
padding:0 6px 0 0;
font-size:9px;
border-right:1px solid #233b4d;
white-space:nowrap;
}
html.game-online .history-sidebar .move-history-list{
flex:1 1 auto;
min-width:0;
height:100%;
min-height:26px;
overflow-x:auto;
overflow-y:hidden;
display:flex;
align-items:center;
gap:8px;
padding:0 6px;
white-space:nowrap;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
}
html.game-online .history-sidebar .move-history-list::-webkit-scrollbar{
display:none;
}
html.game-online .history-sidebar .move-history-row{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:5px;
width:auto;
min-width:max-content;
min-height:24px;
padding:3px 7px;
margin:0;
border:1px solid #233b4d;
border-radius:7px;
background:#0a1a27;
color:#dce7ef;
font-size:10px;
line-height:1;
white-space:nowrap;
}
html.game-online .history-sidebar .move-history-row span:first-child{
color:#f4cd73;
font-weight:800;
}
html.game-online .history-sidebar .move-history-row span:nth-child(2),html.game-online .history-sidebar .move-history-row span:nth-child(3){
color:#f7e8c1;
}
html.game-online .history-sidebar .move-number{
min-width:auto;
margin-right:1px;
}
html.game-online .home-button{
top:6px;
left:6px;
min-height:28px;
padding:4px 7px;
font-size:9px;
}
html.game-online .piece{
width:92%;
height:92%;
}
html.game-online .coord{
font-size:9px;
}
html.game-online .game-end-box{
width:min(92vw,420px);
}
html.game-online .game-id,html.game-online .invite-link,html.game-online .player-color{
display:none!important;
}
}
@media(max-width:900px) and (max-height:720px){
html.game-online .player{
height:46px;
}
html.game-online .avatar{
width:34px;
height:34px;
}
html.game-online .timer{
min-width:60px;
height:32px;
font-size:16px;
}
html.game-online .logo h1{
font-size:20px;
}
html.game-online .online-layout{
margin-top:2px;
gap:3px;
}
html.game-online .online-layout .status{
min-height:30px;
padding:2px 0;
}
html.game-online .turn{
font-size:10px;
padding:4px 8px;
}
html.game-online .move-timer{
padding:2px 5px;
}
html.game-online .move-timer-value{
font-size:13px;
min-width:52px;
}
html.game-online .control-sidebar{
gap:3px 4px;
}
html.game-online .control-sidebar .controls .btn{
height:32px;
font-size:9px;
}
html.game-online .control-sidebar .time-control{
padding:3px 5px;
font-size:9px;
}
html.game-online .control-sidebar .time-control select{
padding:3px 5px;
font-size:10px;
}
html.game-online .control-sidebar .message{
min-height:18px;
font-size:8px;
}
html.game-online .history-sidebar{
height:28px;
min-height:28px;
}
html.game-online .history-sidebar .move-history-title,html.game-online .history-sidebar .move-history-row{
font-size:8px;
}
}
@media(max-width:430px){
html.game-online .top{
grid-template-columns:1fr auto 1fr;
}
html.game-online .player{
padding:4px 5px;
}
html.game-online .logo h1{
font-size:18px;
letter-spacing:1.5px;
}
html.game-online .control-sidebar{
grid-template-columns:92px minmax(0,1fr);
}
html.game-online .control-sidebar .controls .btn{
font-size:8.5px;
padding:0 3px;
}
html.game-online .history-sidebar .move-history-title{
max-width:82px;
overflow:hidden;
text-overflow:ellipsis;
}
}
@media(max-width:900px){
html.game-online .top{grid-template-columns:1fr 1fr}html.game-online .logo{grid-column:1/-1;grid-row:1}html.game-online .player{grid-row:2}
html.game-online .player.right{justify-content:flex-start}html.game-online .timer{min-width:130px;font-size:27px}
}
@media(max-width:600px){
html.game-online body{overflow:auto}
html.game-online .app{height:auto;min-height:100vh;padding:8px}
html.game-online .top{gap:7px}html.game-online .player{height:68px;padding:6px;gap:7px}html.game-online .avatar{width:50px;height:50px}
html.game-online .name{font-size:13px}html.game-online .rating{font-size:12px;margin-top:3px}html.game-online .star{font-size:15px}
html.game-online .timer{min-width:80px;height:48px;font-size:21px}
html.game-online .logo h1{font-size:36px}html.game-online .logo .crown{font-size:24px;height:20px}html.game-online .logo p{font-size:9px}
html.game-online .language-mobile{top:6px;right:6px}html.game-online .language-mobile select{font-size:11px;padding:5px 6px}
html.game-online .game{width:100%;padding:5px 5px 0;border-radius:13px}html.game-online .coord{font-size:9px}
html.game-online .controls{gap:8px;width:100%}html.game-online .btn{width:calc(50% - 4px);height:48px;font-size:13px}
html.game-online .turn{font-size:13px;padding:6px 18px}
}
@media(max-width:600px){
html.game-online .home-button{left:8px;top:8px;min-height:29px;padding:4px 7px;font-size:10px}
}
@media(max-width:900px){
html.game-online body{overflow-x:hidden;overflow-y:auto}
html.game-online .online-layout{
display:flex;
flex-direction:column;
width:100%;
margin-top:4px;
}
html.game-online .online-layout .game{
order:1;
width:min(880px,calc(100vh - 235px),96vw);
margin:4px auto 0;
}
html.game-online .control-sidebar{
order:2;
width:100%;
height:auto;
margin:0 auto;
padding:0;
border:0;
background:transparent;
box-shadow:none;
overflow:visible;
}
html.game-online .history-sidebar{
order:3;
width:100%;
height:auto;
margin:0 auto;
padding:0;
border:0;
background:transparent;
box-shadow:none;
overflow:visible;
}
html.game-online .control-sidebar .time-control{
margin:7px auto 0;
}
html.game-online .control-sidebar .controls{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px;
margin:4px auto 0;
}
html.game-online .control-sidebar .controls .btn{
width:min(285px,46vw);
height:48px;
}
html.game-online .control-sidebar .message{
border:0;
background:transparent;
}
html.game-online .history-sidebar .move-history{
width:min(620px,94vw);
height:auto;
margin:10px auto 0;
display:block;
overflow:visible;
}
html.game-online .history-sidebar .move-history-list{
overflow:visible;
}
}
@media(max-width:900px){
html.game-online .history-sidebar{display:none!important}
html.game-online .online-layout{
grid-template-rows:minmax(0,1fr) auto!important;
}
html.game-online .mobile-history-bar{
display:flex;
flex:0 0 32px;
width:100%;
height:32px;
min-height:32px;
margin:3px 0 0;
padding:3px 6px;
align-items:center;
gap:7px;
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
border:1px solid #334b5d;
border-radius:8px;
background:#07131e;
color:#f7e8c1;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
}
html.game-online .mobile-history-bar::-webkit-scrollbar{display:none}
html.game-online .mobile-history-empty{
flex:0 0 auto;
color:#8fa4b2;
font-size:10px;
}
html.game-online .mobile-history-item{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:5px;
min-height:24px;
padding:3px 7px;
border:1px solid #31495b;
border-radius:6px;
background:#0b1d2a;
font-size:10px;
line-height:1;
}
html.game-online .mobile-history-item b{
color:#f4cd73;
}
html.game-online .control-sidebar .controls .btn{
font-size:11px!important;
font-weight:800;
}
}
@media(max-width:430px){
html.game-online .control-sidebar .controls .btn{
font-size:10px!important;
}
}
@media(max-width:900px) and (max-height:720px){
html.game-online .mobile-history-bar{
flex-basis:28px;
height:28px;
min-height:28px;
margin-top:2px;
}
html.game-online .mobile-history-item{
min-height:21px;
font-size:9px;
padding:2px 6px;
}
html.game-online .control-sidebar .controls .btn{
font-size:10px!important;
}
}
@media(max-width:900px){
html.game-online .top{gap:4px}
html.game-online .player{
height:50px;
padding:4px 6px;
gap:5px;
}
html.game-online .avatar{
width:38px;
height:38px;
flex:0 0 38px;
}
html.game-online .pinfo{
flex:1 1 auto;
min-width:0;
overflow:hidden;
}
html.game-online .name{
font-size:12px;
font-weight:800;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
html.game-online .rating{
margin-top:1px;
font-size:10px;
white-space:nowrap;
}
html.game-online .star{font-size:12px}
html.game-online .timer{
flex:0 0 auto;
min-width:56px;
width:56px;
height:32px;
padding:0 3px;
border-radius:7px;
font-size:15px;
letter-spacing:-0.4px;
}
html.game-online .control-sidebar .controls .btn{
min-height:38px;
height:38px;
font-size:12px!important;
font-weight:900!important;
letter-spacing:.15px;
text-shadow:0 1px 1px #0008;
padding:0 6px;
}
html.game-online .control-sidebar .controls .new,html.game-online .control-sidebar .controls .undo-btn,html.game-online .control-sidebar .controls .resign{
border-width:1.5px;
}
}
@media(max-width:430px){
html.game-online .player{
height:46px;
padding:3px 4px;
gap:4px;
}
html.game-online .avatar{
width:34px;
height:34px;
flex-basis:34px;
}
html.game-online .name{font-size:11px}
html.game-online .timer{
min-width:52px;
width:52px;
height:30px;
font-size:14px;
}
html.game-online .control-sidebar .controls .btn{
height:36px;
min-height:36px;
font-size:11px!important;
padding:0 4px;
}
}
@media(max-width:900px) and (max-height:720px){
html.game-online .player{height:44px}
html.game-online .avatar{
width:32px;
height:32px;
flex-basis:32px;
}
html.game-online .timer{
width:50px;
min-width:50px;
height:28px;
font-size:13px;
}
html.game-online .control-sidebar .controls .btn{
height:34px;
min-height:34px;
font-size:10.5px!important;
}
}
@media(max-width:900px){
html.game-online .captured-strip{
min-height:28px;
height:28px;
padding:1px 4px;
gap:0;
}
html.game-online .captured-piece{
width:26px;
height:26px;
flex-basis:26px;
}
}
@media(max-width:430px){
html.game-online .captured-strip{
min-height:26px;
height:26px;
}
html.game-online .captured-piece{
width:24px;
height:24px;
flex-basis:24px;
}
}
@media(max-width:900px) and (max-height:720px){
html.game-online .captured-strip{
min-height:19px;
height:19px;
}
html.game-online .captured-piece{
width:18px;
height:18px;
flex-basis:18px;
}
}
@media(max-width:900px){
html.game-online .online-mode .game-id,html.game-online .online-mode .invite-link,html.game-online .online-mode .player-color{
display:none!important;
}
}
/* MOBILE BOTTOM CONTROLS FIX — only time control + bottom buttons */
@media(max-width:900px){
html.game-online .control-sidebar{
width:100%!important;
height:auto!important;
min-height:0!important;
margin:4px 0 0!important;
padding:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:8px!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
overflow:visible!important;
}
html.game-online .control-sidebar .game-id,html.game-online .control-sidebar .invite-link,html.game-online .control-sidebar .player-color,html.game-online .control-sidebar .message{
display:none!important;
}
/* Separate centered time-control row */
html.game-online .control-sidebar .time-control{
width:auto!important;
min-width:210px!important;
max-width:90%!important;
height:54px!important;
margin:0 auto!important;
padding:7px 12px!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:center!important;
gap:10px!important;
border:1px solid #233b4d!important;
border-radius:12px!important;
background:#07131e!important;
font-size:11px!important;
line-height:1!important;
white-space:nowrap!important;
}
html.game-online .control-sidebar .time-control label{
font-size:11px!important;
white-space:nowrap!important;
}
html.game-online .control-sidebar .time-control select{
width:74px!important;
min-width:74px!important;
height:36px!important;
padding:0 7px!important;
border-radius:8px!important;
font-size:12px!important;
font-weight:800!important;
}
/* Buttons on their own row */
html.game-online .control-sidebar .controls{
width:100%!important;
height:auto!important;
margin:0!important;
padding:0!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:6px!important;
align-items:stretch!important;
}
html.game-online .control-sidebar .controls .btn{
width:100%!important;
min-width:0!important;
height:46px!important;
margin:0!important;
padding:0 5px!important;
border-radius:9px!important;
font-size:11px!important;
font-weight:900!important;
line-height:1.05!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
}
@media(max-width:430px){
html.game-online .control-sidebar .time-control{
min-width:190px!important;
height:50px!important;
padding:6px 10px!important;
gap:8px!important;
}
html.game-online .control-sidebar .time-control label{
font-size:10px!important;
}
html.game-online .control-sidebar .time-control select{
width:68px!important;
min-width:68px!important;
height:34px!important;
font-size:11px!important;
}
html.game-online .control-sidebar .controls{
gap:5px!important;
}
html.game-online .control-sidebar .controls .btn{
height:44px!important;
padding:0 4px!important;
font-size:10px!important;
}
}
/* MOBILE BUTTON ROW CENTERING FIX — only bottom buttons */
@media(max-width:900px){
html.game-online .control-sidebar .controls{
width:100%!important;
max-width:100%!important;
margin:0 auto!important;
padding:0!important;
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
justify-content:center!important;
align-items:stretch!important;
gap:6px!important;
box-sizing:border-box!important;
}
html.game-online .control-sidebar .controls .btn{
width:100%!important;
min-width:0!important;
max-width:none!important;
margin:0!important;
justify-self:stretch!important;
box-sizing:border-box!important;
}
/* Guard against old desktop/mobile width rules leaking in */
html.game-online .control-sidebar .controls .new,html.game-online .control-sidebar .controls .undo-btn,html.game-online .control-sidebar .controls .resign{
width:100%!important;
margin-left:0!important;
margin-right:0!important;
}
}
@media(max-width:430px){
html.game-online .control-sidebar .controls{
gap:5px!important;
}
}
/* ONLINE MOBILE: exactly two bottom buttons */
@media(max-width:900px){
html.game-online .control-sidebar .controls{
width:100%!important;
max-width:100%!important;
margin:0 auto!important;
padding:0!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
justify-content:center!important;
align-items:stretch!important;
gap:8px!important;
}
html.game-online .control-sidebar .controls .btn{
width:100%!important;
min-width:0!important;
max-width:none!important;
margin:0!important;
justify-self:stretch!important;
}
html.game-online .control-sidebar .controls .new,html.game-online .control-sidebar .controls .resign{
grid-column:auto!important;
margin-left:0!important;
margin-right:0!important;
}
}
@media(max-width:430px){
html.game-online .control-sidebar .controls{
gap:6px!important;
}
}
/* RESTORE ONLINE GAME ID + INVITE UI.
JavaScript/server logic is unchanged. */
/* Desktop: compactly restore ID and invite inside the right panel. */
@media(min-width:901px){
html.game-online .control-sidebar .game-id{
display:block!important;
width:100%!important;
margin:0!important;
padding:7px 8px!important;
border:1px solid #233b4d!important;
border-radius:9px!important;
background:#07131e!important;
text-align:center!important;
font-size:11px!important;
line-height:1.2!important;
}
html.game-online .control-sidebar .invite-link{
display:flex!important;
width:100%!important;
margin:0!important;
padding:0!important;
flex-direction:column!important;
align-items:stretch!important;
gap:4px!important;
}
html.game-online .control-sidebar .invite-link button{
width:100%!important;
min-height:36px!important;
margin:0!important;
padding:6px 8px!important;
border-radius:8px!important;
font-size:11px!important;
}
html.game-online .control-sidebar .invite-link-status{
width:100%!important;
min-width:0!important;
min-height:14px!important;
text-align:center!important;
font-size:10px!important;
}
}
/* Mobile: ID + invitation get their own clean block between time and buttons. */
@media(max-width:900px){
html.game-online .control-sidebar .game-id{
display:block!important;
width:min(300px,92%)!important;
margin:0 auto!important;
padding:6px 9px!important;
border:1px solid #233b4d!important;
border-radius:9px!important;
background:#07131e!important;
text-align:center!important;
color:#8fa4b4!important;
font-size:10px!important;
line-height:1.2!important;
}
html.game-online .control-sidebar .game-id strong{
color:#f4cd73!important;
font-weight:800!important;
}
html.game-online .control-sidebar .invite-link{
display:flex!important;
width:min(300px,92%)!important;
margin:0 auto!important;
padding:0!important;
flex-direction:column!important;
align-items:stretch!important;
gap:3px!important;
}
html.game-online .control-sidebar .invite-link button{
width:100%!important;
min-height:38px!important;
margin:0!important;
padding:6px 9px!important;
border-radius:9px!important;
font-size:10px!important;
font-weight:800!important;
}
html.game-online .control-sidebar .invite-link-status{
width:100%!important;
min-width:0!important;
min-height:13px!important;
text-align:center!important;
font-size:9px!important;
}
/* Keep the existing time and two-button layout. */
html.game-online .control-sidebar{
gap:7px!important;
}
html.game-online .control-sidebar .player-color,html.game-online .control-sidebar .message{
display:none!important;
}
}
/* MOBILE BOTTOM STACK:
Time control -> Game ID -> Invite -> Buttons */
@media(max-width:900px){
html.game-online .control-sidebar{
width:100%!important;
height:auto!important;
min-height:0!important;
margin:4px 0 0!important;
padding:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:6px!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
overflow:visible!important;
}
html.game-online .control-sidebar .time-control{
order:1!important;
}
html.game-online .control-sidebar .game-id{
order:2!important;
display:block!important;
width:min(300px,92%)!important;
margin:0 auto!important;
}
html.game-online .control-sidebar .invite-link{
order:3!important;
display:flex!important;
width:min(300px,92%)!important;
margin:0 auto!important;
}
html.game-online .control-sidebar .controls{
order:4!important;
display:grid!important;
width:100%!important;
max-width:100%!important;
margin:2px auto 0!important;
padding:0!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
align-items:stretch!important;
}
html.game-online .control-sidebar .controls .btn{
display:block!important;
visibility:visible!important;
opacity:1!important;
width:100%!important;
min-width:0!important;
height:46px!important;
margin:0!important;
padding:0 6px!important;
border-radius:9px!important;
font-size:11px!important;
font-weight:900!important;
white-space:nowrap!important;
}
html.game-online .control-sidebar .new,html.game-online .control-sidebar .resign{
grid-column:auto!important;
}
html.game-online .control-sidebar .player-color,html.game-online .control-sidebar .message{
display:none!important;
}
/* Do not clip the bottom controls on mobile. */
html.game-online .online-layout{
overflow:visible!important;
}
html.game-online .app{
overflow-y:auto!important;
}
html.game-online body{
overflow-y:auto!important;
}
}
@media(max-width:430px){
html.game-online .control-sidebar{
gap:5px!important;
}
html.game-online .control-sidebar .controls{
gap:6px!important;
}
html.game-online .control-sidebar .controls .btn{
height:44px!important;
font-size:10px!important;
}
}
/* CHESSORA — active game sidebar cleanup.
Keep elements in DOM for existing JS; hide only their UI. */
html.game-online .control-sidebar .time-control,html.game-online .control-sidebar .invite-link,html.game-online .control-sidebar #reset{
display:none!important;
}
html.game-online .board-disabled{
pointer-events:none!important;
opacity:.65;
}
/* =========================================================
CHESSORA — NO PAGE SCROLL
IMPORTANT: no board/panel geometry is changed here.
Desktop keeps the exact stable reference layout.
On mobile only online-layout may scroll internally
if the viewport is too short.
========================================================= */
html.game-online,html.game-online body{
width:100%;
height:100%;
min-height:0!important;
overflow:hidden!important;
overscroll-behavior:none;
}
html.game-online body{
position:fixed;
inset:0;
}
html.game-online .app{
height:100dvh!important;
min-height:0!important;
overflow:hidden!important;
}
@media(max-width:900px){
html.game-online .app{
height:100dvh!important;
min-height:0!important;
overflow:hidden!important;
}
html.game-online .online-layout{
flex:1 1 auto!important;
min-height:0!important;
max-height:100%!important;
overflow:hidden!important;
overscroll-behavior:none;
}
}
/* Keep modal content inside viewport without creating body scroll. */
html.game-online .game-end-overlay,html.game-online .promotion-overlay{
max-width:100vw;
max-height:100dvh;
overflow:auto;
overscroll-behavior:contain;
}
html.game-online .game-end-box{
max-height:calc(100dvh - 20px);
overflow-y:auto;
}
/* =========================================================
MOBILE ONLY — keep bottom buttons fully inside viewport.
No desktop geometry and no JavaScript changes.
========================================================= */
@media(max-width:900px){
html.game-online .control-sidebar{
margin-top:2px!important;
gap:3px!important;
flex:0 0 auto!important;
}
html.game-online .control-sidebar .time-control{
min-width:190px!important;
height:42px!important;
padding:4px 8px!important;
gap:7px!important;
}
html.game-online .control-sidebar .time-control label{
font-size:10px!important;
}
html.game-online .control-sidebar .time-control select{
width:68px!important;
min-width:68px!important;
height:30px!important;
padding:0 6px!important;
font-size:10px!important;
}
html.game-online .control-sidebar .game-id{
padding:4px 7px!important;
font-size:9px!important;
line-height:1!important;
}
html.game-online .control-sidebar .invite-link{
gap:1px!important;
}
html.game-online .control-sidebar .invite-link button{
min-height:31px!important;
padding:4px 7px!important;
font-size:9px!important;
}
html.game-online .control-sidebar .invite-link-status{
min-height:10px!important;
height:10px!important;
font-size:8px!important;
line-height:10px!important;
overflow:hidden!important;
}
html.game-online .control-sidebar .controls{
margin:0 auto!important;
gap:6px!important;
flex:0 0 auto!important;
}
html.game-online .control-sidebar .controls .btn{
height:40px!important;
min-height:40px!important;
font-size:10px!important;
}
}
/* Short phones need a little more vertical room.
Shrink only the game block enough to guarantee the buttons fit. */
@media(max-width:900px) and (max-height:720px){
html.game-online .online-layout{
gap:2px!important;
}
html.game-online .online-layout .game{
width:min(96vw,calc(100dvh - 320px))!important;
max-width:100%!important;
min-height:0!important;
}
html.game-online .control-sidebar{
margin-top:1px!important;
gap:2px!important;
}
html.game-online .control-sidebar .time-control{
min-width:180px!important;
height:34px!important;
padding:2px 7px!important;
gap:6px!important;
}
html.game-online .control-sidebar .time-control label{
font-size:9px!important;
}
html.game-online .control-sidebar .time-control select{
width:62px!important;
min-width:62px!important;
height:27px!important;
font-size:9px!important;
}
html.game-online .control-sidebar .game-id{
padding:3px 6px!important;
font-size:8px!important;
line-height:1!important;
}
html.game-online .control-sidebar .invite-link button{
min-height:28px!important;
padding:3px 6px!important;
font-size:8px!important;
}
html.game-online .control-sidebar .invite-link-status{
display:none!important;
}
html.game-online .control-sidebar .controls{
gap:5px!important;
}
html.game-online .control-sidebar .controls .btn{
height:34px!important;
min-height:34px!important;
padding:0 4px!important;
font-size:9px!important;
}
}
@media(max-width:430px) and (max-height:720px){
html.game-online .online-layout .game{
width:min(95vw,calc(100dvh - 320px))!important;
}
}
html.game-online .draw-btn{background:linear-gradient(#b78628,#755111);border-color:#e5b654;box-shadow:0 5px 15px #6d4a1170}
html.game-online .draw-btn:disabled{opacity:.55;cursor:default}
html.game-online .draw-offer-panel{
position:fixed;
z-index:1200;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:min(340px,88vw);
padding:14px;
border:1px solid #d7aa4d;
border-radius:12px;
background:#07131ef2;
box-shadow:0 14px 40px #000b;
color:#f7e8c1;
text-align:center;
}
html.game-online .draw-offer-panel[hidden]{display:none!important}
html.game-online .draw-offer-message{font-size:15px;font-weight:800;line-height:1.3}
html.game-online .draw-offer-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
html.game-online .draw-offer-actions button{height:40px;border-radius:8px;border:1px solid;font-size:12px;font-weight:900;color:#fff;cursor:pointer}
html.game-online .draw-offer-accept{background:linear-gradient(#2e9b55,#187338);border-color:#57c77d}
html.game-online .draw-offer-decline{background:linear-gradient(#d93434,#a91414);border-color:#ff5555}
html.game-online .draw-offer-actions button:disabled{opacity:.55;cursor:default}
/* Desktop keeps the same two-row button height as before:
New Game on row one, Draw + Resign on row two. */
@media(min-width:901px){
html.game-online .control-sidebar .controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html.game-online .control-sidebar .controls .new{grid-column:1 / -1!important}
}
/* Mobile keeps one compact row, now with three short buttons. */
@media(max-width:900px){
html.game-online .control-sidebar .controls{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
html.game-online .control-sidebar .controls .new,html.game-online .control-sidebar .controls .draw-btn,html.game-online .control-sidebar .controls .resign{grid-column:auto!important}
}
/* MOBILE ONLY: center the two remaining game buttons and keep language compact. */
@media(max-width:900px){
html.game-online .control-sidebar .controls{
grid-column:1 / -1!important;
grid-row:1!important;
width:100%!important;
max-width:340px!important;
margin:0 auto!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,160px))!important;
justify-content:center!important;
align-items:center!important;
gap:8px!important;
}
html.game-online .control-sidebar .controls .draw-btn,html.game-online .control-sidebar .controls .resign{
grid-column:auto!important;
width:100%!important;
min-width:0!important;
margin:0!important;
}
html.game-online .language-mobile select{
width:50px!important;
min-width:50px!important;
height:32px!important;
padding:0 4px!important;
font-size:11px!important;
font-weight:800!important;
text-align:center!important;
}
}
@media(max-width:430px){
html.game-online .control-sidebar .controls{
max-width:300px!important;
grid-template-columns:repeat(2,minmax(0,146px))!important;
gap:6px!important;
}
}
/* =========================================================
CHESSORA — GAME CHAT UI
Fixed overlay attached to . It never participates in
the chess layout, so board / timers / sidebars keep their geometry.
========================================================= */
html.game-online .chessora-chat-toggle{
position:fixed!important;
right:max(12px,env(safe-area-inset-right))!important;
bottom:max(12px,env(safe-area-inset-bottom))!important;
z-index:2147483646!important;
display:none!important;
visibility:visible!important;
opacity:1!important;
width:46px!important;
min-width:46px!important;
max-width:46px!important;
height:46px!important;
min-height:46px!important;
padding:0!important;
border:1px solid #35556d!important;
border-radius:50%!important;
background:#07131e!important;
color:#f4cd73!important;
align-items:center!important;
justify-content:center!important;
cursor:pointer!important;
box-shadow:0 8px 26px rgba(0,0,0,.42)!important;
font-size:20px!important;
line-height:1!important;
-webkit-tap-highlight-color:transparent;
}
html.game-online .chessora-chat-toggle.show{
display:flex!important;
}
html.game-online .chessora-chat-toggle:focus-visible,html.game-online .chessora-chat-close:focus-visible,html.game-online .chessora-chat-send:focus-visible,html.game-online .chessora-chat-input:focus-visible{
outline:2px solid #f4cd73!important;
outline-offset:2px!important;
}
html.game-online .chessora-chat-badge{
position:absolute;
top:-4px;
right:-4px;
min-width:19px;
height:19px;
padding:0 4px;
border-radius:999px;
background:#f4cd73;
color:#07131e;
border:2px solid #07131e;
font-size:10px;
font-weight:900;
line-height:15px;
text-align:center;
}
html.game-online .chessora-chat-badge[hidden]{
display:none!important;
}
html.game-online .chessora-chat-panel{
position:fixed!important;
left:50%!important;
top:50%!important;
right:auto!important;
bottom:auto!important;
transform:translate(-50%,-50%)!important;
z-index:2147483647!important;
width:min(360px,calc(100vw - 24px))!important;
height:min(470px,calc(100dvh - 32px))!important;
min-height:280px!important;
max-height:calc(100dvh - 32px)!important;
margin:0!important;
border:1px solid #35556d!important;
border-radius:16px!important;
background:rgba(7,19,30,.82);
color:#fff!important;
box-shadow:0 22px 70px rgba(0,0,0,.58)!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
contain:layout paint;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
html.game-online .chessora-chat-panel[hidden]{
display:none!important;
}
html.game-online .chessora-chat-head{
flex:0 0 50px;
min-height:50px;
padding:8px 9px 8px 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
border-bottom:1px solid #1d3446;
background:#081722;
}
html.game-online .chessora-chat-title{
min-width:0;
font-size:13px;
font-weight:900;
letter-spacing:.055em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
html.game-online .chessora-chat-close{
flex:0 0 34px;
width:34px;
height:34px;
padding:0;
border:0;
border-radius:9px;
background:transparent;
color:#fff;
cursor:pointer;
font-size:23px;
line-height:1;
}
html.game-online .chessora-chat-close:hover{
background:#102334;
}
html.game-online .chessora-chat-messages{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
padding:11px;
display:flex;
flex-direction:column;
gap:7px;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
html.game-online .chessora-chat-empty,html.game-online .chessora-chat-info{
margin:auto;
padding:12px;
color:#91a6b7;
text-align:center;
font-size:12px;
line-height:1.4;
}
html.game-online .chessora-chat-message{
max-width:84%;
padding:7px 9px;
border-radius:11px 11px 11px 4px;
background:#102334;
align-self:flex-start;
word-break:break-word;
overflow-wrap:anywhere;
}
html.game-online .chessora-chat-message.mine{
align-self:flex-end;
border-radius:11px 11px 4px 11px;
background:#173a53;
}
html.game-online .chessora-chat-meta{
margin-bottom:3px;
color:#95aabc;
font-size:9px;
line-height:1.2;
}
html.game-online .chessora-chat-text{
font-size:12px;
line-height:1.38;
white-space:pre-wrap;
}
html.game-online .chessora-chat-form{
flex:0 0 auto;
padding:9px;
padding-bottom:max(9px,env(safe-area-inset-bottom));
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:7px;
border-top:1px solid #1d3446;
background:#081722;
}
html.game-online .chessora-chat-input{
width:100%;
min-width:0;
height:40px;
padding:0 10px;
border:1px solid #29455b;
border-radius:9px;
outline:none;
background:#0d1d2a;
color:#fff;
font:inherit;
font-size:12px;
}
html.game-online .chessora-chat-input:focus{
border-color:#6389a4;
}
html.game-online .chessora-chat-send{
min-width:76px;
height:40px;
padding:0 11px;
border:0;
border-radius:9px;
background:#eef3f6;
color:#07131e;
cursor:pointer;
font-size:10px;
font-weight:900;
}
html.game-online .chessora-chat-input:disabled,html.game-online .chessora-chat-send:disabled{
opacity:.55;
cursor:not-allowed;
}
@media(max-width:600px){
html.game-online .chessora-chat-toggle{
right:max(10px,env(safe-area-inset-right))!important;
bottom:max(10px,env(safe-area-inset-bottom))!important;
width:42px!important;
min-width:42px!important;
max-width:42px!important;
height:42px!important;
min-height:42px!important;
font-size:18px!important;
}
html.game-online .chessora-chat-panel{
width:calc(100vw - 16px)!important;
height:min(430px,calc(100dvh - 20px))!important;
max-height:calc(100dvh - 20px)!important;
min-height:250px!important;
border-radius:14px!important;
}
html.game-online .chessora-chat-head{
flex-basis:46px;
min-height:46px;
}
html.game-online .chessora-chat-form{
padding:8px;
padding-bottom:max(8px,env(safe-area-inset-bottom));
}
html.game-online .chessora-chat-input,html.game-online .chessora-chat-send{
height:38px;
}
}
@media(max-height:520px){
html.game-online .chessora-chat-panel{
height:calc(100dvh - 16px)!important;
max-height:calc(100dvh - 16px)!important;
min-height:0!important;
}
}
/* CHESSORA LIGHT THEME — visual overrides only */
html.game-online[data-theme="light"]{color-scheme:light}
html.game-online[data-theme="light"],html.game-online[data-theme="light"] body{
background:#eadfcd;
color:#25384a;
}
html.game-online[data-theme="light"] body:before{
background:radial-gradient(circle at 50% 35%,#fffdf8 0,#f3eadc 42%,#dfcfb7 100%);
}
html.game-online[data-theme="light"] body:after{
opacity:.32;
background:
radial-gradient(ellipse at 5% 80%,transparent 0 25%,#9a671c33 25.2% 25.5%,transparent 25.7%),
radial-gradient(ellipse at 95% 80%,transparent 0 25%,#9a671c33 25.2% 25.5%,transparent 25.7%);
}
html.game-online[data-theme="light"] .player{
border-color:#b7812d;
background:linear-gradient(90deg,#fffaf2,#f3e7d5);
color:#26394b;
box-shadow:0 8px 24px #72522a24;
}
html.game-online[data-theme="light"] .avatar{
border-color:#c18a36;
background:#fffdf8;
color:#8a5b12;
}
html.game-online[data-theme="light"] .rating,html.game-online[data-theme="light"] .star{color:#95620f}
html.game-online[data-theme="light"] .timer{
border-color:#b7812d;
background:#f1e5d3;
color:#283a49;
}
html.game-online[data-theme="light"] .right .timer{
background:#fffdf8;
color:#172735;
}
html.game-online[data-theme="light"] .language-mobile select,html.game-online[data-theme="light"] .time-control select,html.game-online[data-theme="light"] .player-color select{
border-color:#b7812d;
background:#fffaf2;
color:#8a5b12;
box-shadow:0 4px 14px #72522a24;
}
html.game-online[data-theme="light"] .language-mobile select option,html.game-online[data-theme="light"] .time-control select option,html.game-online[data-theme="light"] .player-color select option{
background:#fffaf2;
color:#26394b;
}
html.game-online[data-theme="light"] .logo h1,html.game-online[data-theme="light"] .logo .crown{
color:#9b670f;
text-shadow:0 2px 8px #ffffffa8;
}
html.game-online[data-theme="light"] .logo p,html.game-online[data-theme="light"] .logo p:before,html.game-online[data-theme="light"] .logo p:after{color:#a36c12}
html.game-online[data-theme="light"] .game{
border-color:#b7812d;
background:#fff7e9;
box-shadow:0 18px 46px #6d4c2638;
}
html.game-online[data-theme="light"] .turn{
border-color:#b7812d;
background:#fffaf2;
color:#2f4354;
box-shadow:0 5px 16px #72522a24;
}
html.game-online[data-theme="light"] .time-control,html.game-online[data-theme="light"] .player-color{color:#625548}
html.game-online[data-theme="light"] .move-timer{
border-color:#c58a31;
background:#f3e7d5;
color:#2f4354;
box-shadow:0 5px 16px #72522a24;
}
html.game-online[data-theme="light"] .move-timer-value{
border-color:#c58a31;
background:#fffdf8;
color:#8f5e0d;
box-shadow:inset 0 0 10px #72522a14;
}
html.game-online[data-theme="light"] .waiting-overlay{
border-color:#b7812d;
background:#fffaf2f2;
color:#25384a;
box-shadow:0 6px 20px #72522a38;
}
html.game-online[data-theme="light"] .waiting-overlay.joined{color:#176b31}
html.game-online[data-theme="light"] .waiting-overlay.disconnected{
color:#7a5312;
background:#fff4d9f2;
}
html.game-online[data-theme="light"] .waiting-cancel{
border-color:#b7812d;
background:#fff7e9;
color:#704b10;
}
html.game-online[data-theme="light"] .waiting-cancel:hover{background:#f3e4cd}
html.game-online[data-theme="light"] .message{color:#625548}
html.game-online[data-theme="light"] .history-sidebar,html.game-online[data-theme="light"] .control-sidebar{
border-color:#b7812d;
background:linear-gradient(180deg,#fffdf8,#f1e5d3);
color:#26394b;
box-shadow:0 14px 38px #72522a24;
}
html.game-online[data-theme="light"] .move-history{
border-color:#c8b89f;
background:#fffaf2;
color:#26394b;
}
html.game-online[data-theme="light"] .move-history-title,html.game-online[data-theme="light"] .history-sidebar .move-history-row span:first-child,html.game-online[data-theme="light"] .mobile-history-item b{color:#8f5e0d}
html.game-online[data-theme="light"] .move-history-row{border-top-color:#d8c6ac}
html.game-online[data-theme="light"] .history-sidebar .move-history-row span:nth-child(2),html.game-online[data-theme="light"] .history-sidebar .move-history-row span:nth-child(3){
color:#26394b;
}
html.game-online[data-theme="light"] .control-sidebar .time-control,html.game-online[data-theme="light"] .control-sidebar .message{
border-color:#c8b89f;
background:#fffaf2;
color:#4f4439;
}
html.game-online[data-theme="light"] .mobile-history-bar,html.game-online[data-theme="light"] .history-sidebar{border-color:#c8b89f}
html.game-online[data-theme="light"] .mobile-history-empty{color:#6b7b87}
html.game-online[data-theme="light"] .game-id,html.game-online[data-theme="light"] .invite-link-status{color:#667886}
html.game-online[data-theme="light"] .game-id strong{color:#554a3f}
html.game-online[data-theme="light"] .invite-link button{
border-color:#5f8fae;
background:#eaf4fa;
color:#24516b;
}
html.game-online[data-theme="light"] .home-button{
border-color:#b7812d;
background:#fffaf2;
color:#8a5b12;
box-shadow:0 4px 14px #72522a24;
}
/* Draw offer */
html.game-online[data-theme="light"] .draw-offer-panel{
border-color:#b7812d!important;
background:#fffaf2!important;
color:#26394b!important;
box-shadow:0 16px 46px #5a402c45!important;
}
html.game-online[data-theme="light"] .draw-offer-message{color:#26394b!important}
html.game-online[data-theme="light"] .draw-offer-decline{
border-color:#aab5bd!important;
background:#eef1f3!important;
color:#34495a!important;
}
/* End-of-game dialog */
html.game-online[data-theme="light"] .game-end-overlay{background:#3e332a70}
html.game-online[data-theme="light"] .game-end-box{
border-color:#b7812d;
background:linear-gradient(180deg,#fffdf8,#f1e5d3);
color:#26394b;
box-shadow:0 24px 70px #5a402c55;
}
html.game-online[data-theme="light"] .game-end-head,html.game-online[data-theme="light"] .game-end-body,html.game-online[data-theme="light"] .game-end-actions{
border-color:#d8c6ac;
background:#fffaf2;
}
html.game-online[data-theme="light"] .game-end-close{color:#5e5145}
html.game-online[data-theme="light"] .game-end-close:hover{
background:#eadfcd;
color:#8f5e0d;
}
html.game-online[data-theme="light"] .game-end-icon,html.game-online[data-theme="light"] .game-end-title,html.game-online[data-theme="light"] .game-end-control,html.game-online[data-theme="light"] .game-end-score strong{color:#8f5e0d}
html.game-online[data-theme="light"] .game-end-result,html.game-online[data-theme="light"] .game-end-name{color:#26394b}
html.game-online[data-theme="light"] .game-end-reason,html.game-online[data-theme="light"] .game-end-rating,html.game-online[data-theme="light"] .game-end-side,html.game-online[data-theme="light"] .game-end-vs,html.game-online[data-theme="light"] .game-end-control-label{color:#667886}
html.game-online[data-theme="light"] .game-end-avatar{
border-color:#c8b89f;
background:#fffdf8;
color:#26394b;
}
html.game-online[data-theme="light"] .game-end-player.black .game-end-avatar{
background:#435566;
color:#fff;
}
html.game-online[data-theme="light"] .game-end-score,html.game-online[data-theme="light"] .game-end-rematch-status{
border-color:#d8c6ac;
background:#f3e7d5;
color:#26394b;
}
html.game-online[data-theme="light"] .game-end-decline,html.game-online[data-theme="light"] .game-end-share{
border-color:#aab5bd;
background:#eef1f3;
color:#34495a;
}
/* Chat — geometry remains unchanged */
html.game-online[data-theme="light"] .chessora-chat-toggle{
border-color:#b7812d!important;
background:#fffaf2!important;
color:#8f5e0d!important;
box-shadow:0 8px 24px #5a402c45!important;
}
html.game-online[data-theme="light"] .chessora-chat-badge{
border-color:#fffaf2;
background:#9b670f;
color:#fff;
}
html.game-online[data-theme="light"] .chessora-chat-panel{
border-color:#b7812d!important;
background:rgba(255,250,242,.94)!important;
color:#26394b!important;
box-shadow:0 22px 70px #5a402c55!important;
}
html.game-online[data-theme="light"] .chessora-chat-head,html.game-online[data-theme="light"] .chessora-chat-form{
border-color:#d8c6ac!important;
background:#f1e5d3!important;
}
html.game-online[data-theme="light"] .chessora-chat-close{color:#4f4439!important}
html.game-online[data-theme="light"] .chessora-chat-close:hover{background:#e5d6c0!important}
html.game-online[data-theme="light"] .chessora-chat-empty,html.game-online[data-theme="light"] .chessora-chat-info,html.game-online[data-theme="light"] .chessora-chat-meta{color:#687986!important}
html.game-online[data-theme="light"] .chessora-chat-message{
background:#eee2d0!important;
color:#26394b!important;
}
html.game-online[data-theme="light"] .chessora-chat-message.mine{
background:#d9eaf5!important;
color:#17384d!important;
}
html.game-online[data-theme="light"] .chessora-chat-input{
border-color:#b9aa95!important;
background:#fffdf8!important;
color:#26394b!important;
}
html.game-online[data-theme="light"] .chessora-chat-input:focus{border-color:#5f8fae!important}
html.game-online[data-theme="light"] .chessora-chat-send{
background:#1467d8!important;
color:#fff!important;
}
/* DESKTOP LIGHT THEME — side panels contrast fix */
@media(min-width:901px){
html.game-online[data-theme="light"] .history-sidebar,html.game-online[data-theme="light"] .control-sidebar{
border-color:#b7812d!important;
background:linear-gradient(180deg,#fffdf8,#f1e5d3)!important;
color:#26394b!important;
box-shadow:0 14px 38px #72522a24!important;
}
html.game-online[data-theme="light"] .history-sidebar .move-history,html.game-online[data-theme="light"] .control-sidebar .time-control,html.game-online[data-theme="light"] .control-sidebar .message{
border-color:#c8b89f!important;
background:#fffaf2!important;
color:#26394b!important;
}
html.game-online[data-theme="light"] .history-sidebar .move-history-title{
color:#8f5e0d!important;
}
html.game-online[data-theme="light"] .history-sidebar .move-history-row{
border-color:#d8c6ac!important;
background:#fffdf8!important;
color:#26394b!important;
}
html.game-online[data-theme="light"] .history-sidebar .move-history-row span:first-child{
color:#8f5e0d!important;
}
html.game-online[data-theme="light"] .history-sidebar .move-history-row span:nth-child(2),html.game-online[data-theme="light"] .history-sidebar .move-history-row span:nth-child(3),html.game-online[data-theme="light"] .control-sidebar .time-control label,html.game-online[data-theme="light"] .control-sidebar .message{
color:#26394b!important;
}
}
/* computer.html */
html.game-computer,html.game-computer *{box-sizing:border-box}
html.game-computer,html.game-computer body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:#02070d;color:#f7e8c1}
html.game-computer body{overflow-x:hidden}
html.game-computer body:before{
content:"";position:fixed;inset:0;z-index:-2;
background:
radial-gradient(circle at 50% 35%,#0d2940 0,#061624 35%,#02070d 72%);
}
html.game-computer body:after{
content:"";position:fixed;inset:0;z-index:-1;opacity:.55;
background:
radial-gradient(ellipse at 5% 80%,transparent 0 25%,#9a671c22 25.2% 25.5%,transparent 25.7%),
radial-gradient(ellipse at 95% 80%,transparent 0 25%,#9a671c22 25.2% 25.5%,transparent 25.7%);
pointer-events:none
}
html.game-computer .app{width:min(1320px,100%);margin:auto;padding:12px 14px 18px;display:flex;flex-direction:column;align-items:center}
html.game-computer .top{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
html.game-computer .player{
height:86px;border:1px solid #a87322;border-radius:17px;
background:linear-gradient(90deg,#07131e,#0b1925);
display:flex;align-items:center;gap:16px;padding:10px 18px;
box-shadow:0 8px 25px #0008
}
html.game-computer .player.right{justify-content:flex-end}
html.game-computer .avatar{width:66px;height:66px;border:1px solid #bd8129;border-radius:14px;background:#07111a;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:Georgia,serif;font-size:clamp(18px,2vw,28px);font-weight:900;color:#f4cd73}
html.game-computer .avatar img{width:100%;height:100%;object-fit:cover;display:block}
html.game-computer .pinfo{line-height:1.15}html.game-computer .name{font-size:18px}html.game-computer .rating{margin-top:7px;color:#e3b84f;font-size:17px}
html.game-computer .star{color:#e3b84f;font-size:21px}
html.game-computer .timer{min-width:162px;height:60px;border:1px solid #bd8129;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;background:#08131d;color:#f5f0e7}
html.game-computer .right .timer{background:#f3eee4;color:#111}
html.game-computer .logo{text-align:center;white-space:nowrap;position:relative}
html.game-computer .language-mobile{position:fixed;top:10px;right:12px;z-index:50}
html.game-computer .language-mobile select{background:#07131e;color:#f4cd73;border:1px solid #a87322;border-radius:8px;padding:7px 9px;font-size:12px;cursor:pointer;outline:none;box-shadow:0 4px 15px #0008}
html.game-computer .language-mobile select option{background:#07131e;color:#f7e8c1}
html.game-computer .logo h1{margin:0;font-family:Georgia,serif;font-size:clamp(34px,5vw,58px);letter-spacing:4px;color:#f4cd73;text-shadow:0 3px 10px #000}
html.game-computer .logo .crown{display:block;height:26px;font-size:31px;color:#f4cd73;line-height:22px}
html.game-computer .logo p{margin:4px 0 0;font-size:13px;letter-spacing:5px;color:#dcae4f}
html.game-computer .logo p:before,html.game-computer .logo p:after{content:"◆";font-size:7px;margin:0 12px;color:#dcae4f}
html.game-computer .game{position:relative;width:min(880px,calc(100vh - 235px),96vw);margin-top:4px;padding:7px 7px 0;border:1px solid #b37a25;border-radius:20px;background:#06131e;box-shadow:0 18px 55px #0009}
html.game-computer .board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:1px solid #c18a36;border-radius:4px;overflow:hidden}
html.game-computer .waiting-overlay{position:absolute;z-index:8;left:50%;top:calc(50% - 24px);transform:translate(-50%,-50%);display:none;align-items:center;justify-content:center;width:max-content;max-width:94%;padding:10px 16px;border:1px solid #dcae4f;border-radius:11px;background:#06131ee8;box-shadow:0 6px 20px #0009;color:#f7e8c1;font-size:clamp(14px,2vw,18px);font-weight:750;text-align:center;letter-spacing:.2px;white-space:nowrap;pointer-events:none}
html.game-computer .waiting-overlay.show{display:flex}
html.game-computer .waiting-overlay.joined{display:flex;border-color:#55c878;color:#eaffef}
html.game-computer .waiting-overlay.occupied{display:flex;border-color:#d65b5b;color:#fff1f1;background:#1a090be8}
html.game-computer .waiting-overlay .occupied-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:#c53b43;color:#fff;font-size:16px;font-weight:900;line-height:1}
html.game-computer .waiting-overlay .joined-check{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:#2fa65a;color:#fff;font-size:17px;font-weight:900;line-height:1}
html.game-computer .square{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
html.game-computer .light{background:#efd18f}html.game-computer .dark{background:#936036}
html.game-computer .square.selected{box-shadow:inset 0 0 0 4px #48c86a}
html.game-computer .square.last-move{background:#d9b85c !important;box-shadow:inset 0 0 0 2px #f2dc91}
html.game-computer .square.legal:after{content:"";width:18%;height:18%;border-radius:50%;background:#43a65b99;position:absolute}
html.game-computer .square.capture:after{content:"";position:absolute;inset:7%;border:3px solid #d5aa45aa;border-radius:50%}
html.game-computer .piece{width:94%;height:94%;object-fit:contain;display:block;z-index:2;filter:drop-shadow(0 4px 3px #0008);pointer-events:none}
html.game-computer .coord{position:absolute;z-index:3;font-size:13px;font-weight:700;line-height:1;pointer-events:none}
html.game-computer .file{right:4px;bottom:3px}html.game-computer .rank{left:4px;top:3px}
html.game-computer .light .coord{color:#70481f}html.game-computer .dark .coord{color:#f3dca5}
html.game-computer .status{height:34px;display:flex;align-items:center;justify-content:center}
html.game-computer .turn{border:1px solid #a87322;border-radius:18px;padding:7px 26px;font-size:16px;background:#06131d;box-shadow:0 5px 18px #0007}
html.game-computer .green{display:inline-block;width:18px;height:18px;border-radius:50%;background:#18c844;vertical-align:-4px;margin-right:9px;box-shadow:0 0 10px #18c844}
html.game-computer .time-control{display:flex;align-items:center;justify-content:center;gap:8px;margin:7px auto 0;color:#d8c69f;font-size:13px}
html.game-computer .time-control select{background:#07131e;color:#f4cd73;border:1px solid #a87322;border-radius:8px;padding:7px 12px;font-size:14px;font-weight:700;cursor:pointer;outline:none}
html.game-computer .time-control select option{background:#07131e;color:#f7e8c1}
html.game-computer .status{height:auto;min-height:46px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:5px 0}
html.game-computer .move-timer{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #d69a37;border-radius:12px;background:#091722;box-shadow:0 5px 18px #0007;color:#f7e8c1;font-size:14px;font-weight:700}
html.game-computer .move-timer-label{white-space:nowrap}
html.game-computer .move-timer-value{min-width:82px;padding:6px 10px;border:1px solid #e6b957;border-radius:8px;background:#02070d;color:#ffd86a;font-size:24px;font-weight:800;letter-spacing:1px;text-align:center;box-shadow:inset 0 0 12px #0008}
@media(max-width:600px){
html.game-computer .status{gap:7px}
html.game-computer .move-timer{padding:5px 8px;font-size:12px}
html.game-computer .move-timer-value{min-width:72px;font-size:20px;padding:5px 8px}
}
html.game-computer .controls{display:flex;justify-content:center;gap:48px;margin:4px auto 0}
html.game-computer .btn{width:285px;height:48px;border-radius:10px;border:1px solid;font-size:17px;font-weight:700;color:white;cursor:pointer}
html.game-computer .new{background:linear-gradient(#1467d8,#0750b4);border-color:#2b86ff;box-shadow:0 5px 15px #003c9970}
html.game-computer .resign{background:linear-gradient(#d93434,#a91414);border-color:#ff5555;box-shadow:0 5px 15px #8c000070}
html.game-computer .undo-btn{background:linear-gradient(#8b6b20,#62480f);border-color:#d3a43e;box-shadow:0 5px 15px #5b3f0a70}
html.game-computer .controls .undo-btn[hidden]{display:none}
@media(min-width:901px){
html.game-computer .computer-mode .controls{gap:16px}
html.game-computer .computer-mode .controls .btn{width:220px}
}
@media(max-width:900px){
html.game-computer,html.game-computer body{
width:100%;
height:100%;
overflow:hidden!important;
}
html.game-computer body{
min-height:100dvh;
overflow:hidden!important;
}
html.game-computer .app{
width:100%;
height:100dvh;
min-height:0;
padding:
max(6px,env(safe-area-inset-top))
6px
max(6px,env(safe-area-inset-bottom));
overflow:hidden!important;
display:flex;
flex-direction:column;
}
html.game-computer .top{
flex:0 0 auto;
width:100%;
gap:6px;
margin:0;
}
html.game-computer .player{
height:54px;
min-width:0;
gap:6px;
padding:5px 7px;
border-radius:11px;
}
html.game-computer .avatar{
width:40px;
height:40px;
border-radius:9px;
}
html.game-computer .pinfo{min-width:0}
html.game-computer .name{font-size:12px;white-space:nowrap}
html.game-computer .rating{font-size:11px;margin-top:2px}
html.game-computer .timer{
min-width:68px;
height:38px;
border-radius:8px;
font-size:19px;
}
html.game-computer .logo h1{
font-size:24px;
letter-spacing:2px;
}
html.game-computer .logo .crown{
display:none;
}
html.game-computer .logo p{
display:none;
}
html.game-computer .language-mobile{
top:6px;
right:6px;
}
html.game-computer .language-mobile select{
padding:5px 6px;
font-size:10px;
}
html.game-computer .computer-layout{
flex:1 1 auto;
min-height:0;
width:100%;
margin:4px 0 0;
display:grid;
grid-template-rows:minmax(0,1fr) auto auto;
gap:5px;
overflow:hidden;
}
html.game-computer .computer-layout .game{
order:1;
width:auto;
height:auto;
min-height:0;
margin:0 auto;
padding:4px 4px 0;
align-self:stretch;
justify-self:center;
max-width:100%;
max-height:100%;
display:flex;
flex-direction:column;
}
html.game-computer .computer-layout .board{
width:auto;
height:auto;
flex:1 1 auto;
min-height:0;
aspect-ratio:1;
max-width:100%;
max-height:100%;
margin:auto;
}
html.game-computer .computer-layout .status{
flex:0 0 auto;
min-height:34px;
padding:3px 0;
gap:5px;
}
html.game-computer .turn{
padding:5px 10px;
font-size:11px;
}
html.game-computer .green{
width:12px;
height:12px;
margin-right:5px;
}
html.game-computer .move-timer{
padding:3px 6px;
font-size:10px;
gap:5px;
}
html.game-computer .move-timer-value{
min-width:58px;
font-size:15px;
padding:3px 6px;
}
html.game-computer .control-sidebar{
order:2;
width:100%;
height:auto;
min-height:0;
margin:0;
padding:0;
border:0;
background:transparent;
box-shadow:none;
overflow:hidden;
display:grid;
grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto;
gap:5px 6px;
align-items:center;
}
html.game-computer .control-sidebar .time-control{
grid-column:1;
grid-row:1;
margin:0;
padding:4px 6px;
border-radius:8px;
gap:4px;
font-size:10px;
white-space:nowrap;
}
html.game-computer .control-sidebar .time-control select{
padding:4px 6px;
font-size:11px;
}
html.game-computer .control-sidebar .controls{
grid-column:2;
grid-row:1;
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:nowrap;
gap:4px;
margin:0;
min-width:0;
}
html.game-computer .control-sidebar .controls .btn{
width:auto;
min-width:0;
flex:1 1 0;
height:36px;
padding:0 5px;
border-radius:8px;
font-size:10px;
white-space:nowrap;
}
html.game-computer .control-sidebar .message{
grid-column:1 / -1;
grid-row:2;
min-height:22px;
margin:0;
padding:2px 4px;
border:0;
background:transparent;
font-size:9px;
line-height:1.15;
}
html.game-computer .history-sidebar{
order:3;
width:100%;
height:34px;
min-height:34px;
margin:0;
padding:0 6px;
border:1px solid #233b4d;
border-radius:9px;
background:#07131e;
box-shadow:none;
overflow:hidden;
display:flex;
align-items:center;
}
html.game-computer .history-sidebar .move-history{
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
background:transparent;
display:flex;
align-items:center;
gap:7px;
overflow:hidden;
min-width:0;
}
html.game-computer .history-sidebar .move-history-title{
flex:0 0 auto;
margin:0;
padding:0 6px 0 0;
font-size:9px;
border-right:1px solid #233b4d;
white-space:nowrap;
}
html.game-computer .history-sidebar .move-history-list{
flex:1 1 auto;
min-width:0;
height:100%;
min-height:26px;
overflow-x:auto;
overflow-y:hidden;
display:flex;
align-items:center;
gap:8px;
padding:0 6px;
white-space:nowrap;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
}
html.game-computer .history-sidebar .move-history-list::-webkit-scrollbar{
display:none;
}
html.game-computer .history-sidebar .move-history-row{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:5px;
width:auto;
min-width:max-content;
min-height:24px;
padding:3px 7px;
margin:0;
border:1px solid #233b4d;
border-radius:7px;
background:#0a1a27;
color:#dce7ef;
font-size:10px;
line-height:1;
white-space:nowrap;
}
html.game-computer .history-sidebar .move-history-row span:first-child{
color:#f4cd73;
font-weight:800;
}
html.game-computer .history-sidebar .move-history-row span:nth-child(2),html.game-computer .history-sidebar .move-history-row span:nth-child(3){
color:#f7e8c1;
}
html.game-computer .history-sidebar .move-number{
min-width:auto;
margin-right:1px;
}
html.game-computer .home-button{
top:6px;
left:6px;
min-height:28px;
padding:4px 7px;
font-size:9px;
}
html.game-computer .piece{
width:92%;
height:92%;
}
html.game-computer .coord{
font-size:9px;
}
html.game-computer .game-end-box{
width:min(92vw,420px);
}
html.game-computer .game-id,html.game-computer .invite-link,html.game-computer .player-color{
display:none!important;
}
}
/* Extra-tight mobile heights: keep everything inside one screen */
@media(max-width:900px) and (max-height:720px){
html.game-computer .player{
height:46px;
}
html.game-computer .avatar{
width:34px;
height:34px;
}
html.game-computer .timer{
min-width:60px;
height:32px;
font-size:16px;
}
html.game-computer .logo h1{
font-size:20px;
}
html.game-computer .computer-layout{
margin-top:2px;
gap:3px;
}
html.game-computer .computer-layout .status{
min-height:30px;
padding:2px 0;
}
html.game-computer .turn{
font-size:10px;
padding:4px 8px;
}
html.game-computer .move-timer{
padding:2px 5px;
}
html.game-computer .move-timer-value{
font-size:13px;
min-width:52px;
}
html.game-computer .control-sidebar{
gap:3px 4px;
}
html.game-computer .control-sidebar .controls .btn{
height:32px;
font-size:9px;
}
html.game-computer .control-sidebar .time-control{
padding:3px 5px;
font-size:9px;
}
html.game-computer .control-sidebar .time-control select{
padding:3px 5px;
font-size:10px;
}
html.game-computer .control-sidebar .message{
min-height:18px;
font-size:8px;
}
html.game-computer .history-sidebar{
height:28px;
min-height:28px;
}
html.game-computer .history-sidebar .move-history-title,html.game-computer .history-sidebar .move-history-row{
font-size:8px;
}
}
@media(max-width:430px){
html.game-computer .top{
grid-template-columns:1fr auto 1fr;
}
html.game-computer .player{
padding:4px 5px;
}
html.game-computer .rating{
display:none;
}
html.game-computer .logo h1{
font-size:18px;
letter-spacing:1.5px;
}
html.game-computer .control-sidebar{
grid-template-columns:92px minmax(0,1fr);
}
html.game-computer .control-sidebar .controls .btn{
font-size:8.5px;
padding:0 3px;
}
html.game-computer .history-sidebar .move-history-title{
max-width:82px;
overflow:hidden;
text-overflow:ellipsis;
}
}
html.game-computer .message{min-height:18px;text-align:center;margin-top:4px;color:#d8c69f;font-size:13px}
html.game-computer .move-history{width:min(620px,94vw);margin:10px auto 0;padding:10px 12px;border:1px solid #233b4d;border-radius:12px;background:#07131e;color:#dce7ef}
html.game-computer .move-history-title{text-align:center;font-weight:800;color:#f4cd73;margin-bottom:6px}
html.game-computer .move-history-list{max-height:110px;overflow-y:auto;font-family:Consolas,monospace;font-size:14px;line-height:1.65}
html.game-computer .move-history-row{display:grid;grid-template-columns:34px 1fr 1fr;gap:8px;border-top:1px solid #132838;padding:3px 0}
html.game-computer .move-history-row:first-child{border-top:0}
html.game-computer .game-id{margin:7px auto 0;text-align:center;color:#8fa4b4;font-size:12px;letter-spacing:.5px}
html.game-computer .game-id strong{color:#d8c69f;font-weight:700}
html.game-computer .invite-link{display:flex;align-items:center;justify-content:center;gap:7px;margin:6px auto 0;flex-wrap:wrap}
html.game-computer .invite-link button{background:#17425c;color:#f7e8c1;border:1px solid #5b86a2;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}
html.game-computer .invite-link-status{min-width:135px;color:#9fb4c3;font-size:12px;text-align:center}
html.game-computer .player-color{display:flex;align-items:center;justify-content:center;gap:8px;margin:7px auto 0;color:#d8c69f;font-size:12px}
html.game-computer .player-color select{background:#07131e;color:#f4cd73;border:1px solid #a87322;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:700;outline:none}
@media(min-width:901px) and (max-height:850px){
html.game-computer .top{gap:10px}
html.game-computer .player{height:70px;padding:7px 14px;gap:10px}
html.game-computer .avatar{width:52px;height:52px}
html.game-computer .name{font-size:15px}html.game-computer .rating{font-size:14px;margin-top:4px}html.game-computer .star{font-size:17px}
html.game-computer .timer{min-width:130px;height:48px;font-size:27px}
html.game-computer .logo .crown{height:19px;font-size:25px;line-height:18px}
html.game-computer .logo h1{font-size:42px}
html.game-computer .logo p{font-size:10px;margin-top:1px}
html.game-computer .game{width:min(760px,calc(100vh - 195px))}
html.game-computer .controls{margin-top:2px}html.game-computer .btn{height:44px}
}
@media(max-width:900px){
html.game-computer .top{grid-template-columns:1fr 1fr}html.game-computer .logo{grid-column:1/-1;grid-row:1}html.game-computer .player{grid-row:2}
html.game-computer .player.right{justify-content:flex-start}html.game-computer .timer{min-width:130px;font-size:27px}
}
@media(max-width:600px){
html.game-computer body{overflow:auto}
html.game-computer .app{height:auto;min-height:100vh;padding:8px}
html.game-computer .top{gap:7px}html.game-computer .player{height:68px;padding:6px;gap:7px}html.game-computer .avatar{width:50px;height:50px}
html.game-computer .name{font-size:13px}html.game-computer .rating{font-size:12px;margin-top:3px}html.game-computer .star{font-size:15px}
html.game-computer .timer{min-width:80px;height:48px;font-size:21px}
html.game-computer .logo h1{font-size:36px}html.game-computer .logo .crown{font-size:24px;height:20px}html.game-computer .logo p{font-size:9px}
html.game-computer .language-mobile{top:6px;right:6px}html.game-computer .language-mobile select{font-size:11px;padding:5px 6px}
html.game-computer .game{width:100%;padding:5px 5px 0;border-radius:13px}html.game-computer .coord{font-size:9px}
html.game-computer .controls{gap:8px;width:100%}html.game-computer .btn{width:calc(50% - 4px);height:48px;font-size:13px}
html.game-computer .turn{font-size:13px;padding:6px 18px}
}
html.game-computer .king-in-check{
box-shadow:inset 0 0 0 4px rgba(220,40,40,.95),inset 0 0 22px rgba(220,40,40,.55);
}
html.game-computer .promotion-overlay{
position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.55);z-index:1000;
}
html.game-computer .promotion-box{
display:flex;gap:10px;padding:14px;border-radius:14px;background:#f2f2f2;
box-shadow:0 10px 40px rgba(0,0,0,.35);
}
html.game-computer .promotion-btn{
width:72px;height:72px;border:0;border-radius:10px;background:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;
}
html.game-computer .promotion-btn:hover{background:#ddd}
html.game-computer .promotion-btn img{width:58px;height:58px;object-fit:contain}
html.game-computer .game-end-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.68);backdrop-filter:blur(4px);z-index:1100;padding:18px}
html.game-computer .game-end-overlay[hidden]{display:none}
html.game-computer .game-end-box{width:min(430px,92vw);padding:30px 24px 24px;text-align:center;border:1px solid #c58a31;border-radius:20px;background:linear-gradient(180deg,#0b1c2a,#06111b);box-shadow:0 24px 70px #000c,0 0 30px #b77a2426}
html.game-computer .game-end-icon{font-size:42px;line-height:1;color:#f4cd73;margin-bottom:12px}
html.game-computer .game-end-title{margin:0;color:#f4cd73;font-family:Georgia,serif;font-size:30px;letter-spacing:2px;text-transform:uppercase}
html.game-computer .game-end-result{margin:12px 0 24px;color:#f5f0e7;font-size:20px;font-weight:700}
html.game-computer .game-end-actions{display:flex;flex-direction:column;gap:10px;align-items:center}
html.game-computer .game-end-new,html.game-computer .game-end-view{display:block!important;visibility:visible!important;opacity:1!important;width:min(260px,100%);min-height:50px;margin:0 auto;border-radius:10px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;position:relative;z-index:2}
html.game-computer .game-end-new{border:1px solid #2b86ff;background:linear-gradient(#1467d8,#0750b4);box-shadow:0 5px 15px #003c9970}
html.game-computer .game-end-view{border:1px solid #c58a31;background:linear-gradient(#8b6b20,#62480f);box-shadow:0 5px 15px #5b3f0a70}
html.game-computer .game-end-new:hover,html.game-computer .game-end-view:hover{filter:brightness(1.08)}
html.game-computer .computer-mode .game-id,html.game-computer .computer-mode .invite-link,html.game-computer .computer-mode .player-color{display:none!important}
html.game-computer .home-button{
position:fixed;left:12px;top:10px;z-index:60;
display:inline-flex;align-items:center;justify-content:center;
min-height:34px;padding:7px 11px;
border:1px solid #a87322;border-radius:8px;
background:#07131e;color:#f4cd73;text-decoration:none;
font-size:12px;font-weight:700;box-shadow:0 4px 15px #0008;
}
html.game-computer .home-button:hover{filter:brightness(1.08)}
html.game-computer .home-button:active{transform:translateY(1px)}
@media(max-width:600px){
html.game-computer .home-button{left:8px;top:8px;min-height:29px;padding:4px 7px;font-size:10px}
}
/* COMPUTER DESKTOP THREE-COLUMN LAYOUT */
html.game-computer .computer-layout{
width:min(1500px,100%);
margin:4px auto 0;
display:grid;
grid-template-columns:260px minmax(0,1fr) 260px;
gap:14px;
align-items:start;
justify-content:center;
}
html.game-computer .computer-layout .game{
width:min(820px,calc(100vh - 150px),calc(100vw - 570px));
margin:0 auto;
}
html.game-computer .history-sidebar,html.game-computer .control-sidebar{
min-width:0;
height:min(760px,calc(100vh - 150px));
border:1px solid #b37a25;
border-radius:16px;
background:linear-gradient(180deg,#07131e,#0b1925);
box-shadow:0 14px 40px #0008;
overflow:hidden;
}
html.game-computer .history-sidebar{
padding:12px;
display:flex;
flex-direction:column;
}
html.game-computer .history-sidebar .move-history{
width:100%;
height:100%;
margin:0;
display:flex;
flex-direction:column;
overflow:hidden;
}
html.game-computer .history-sidebar .move-history-title{
flex:0 0 auto;
margin-bottom:8px;
}
html.game-computer .history-sidebar .move-history-list{
flex:1;
min-height:0;
overflow-y:auto;
padding-right:4px;
}
html.game-computer .control-sidebar{
padding:12px;
display:flex;
flex-direction:column;
gap:10px;
}
html.game-computer .control-sidebar .time-control{
margin:0;
padding:10px;
border:1px solid #233b4d;
border-radius:12px;
background:#06131e;
flex-wrap:wrap;
}
html.game-computer .control-sidebar .controls{
margin:0;
display:grid;
grid-template-columns:1fr;
gap:8px;
}
html.game-computer .control-sidebar .controls .btn{
width:100%;
height:44px;
}
html.game-computer .control-sidebar .message{
margin:0;
min-height:46px;
display:flex;
align-items:center;
justify-content:center;
padding:7px 8px;
border:1px solid #233b4d;
border-radius:10px;
background:#07131e;
}
html.game-computer .control-sidebar .game-id,html.game-computer .control-sidebar .invite-link,html.game-computer .control-sidebar .player-color{
display:none!important;
}
@media(min-width:901px){
html.game-computer body{overflow:hidden}
html.game-computer .app{
height:100dvh;
padding-bottom:10px;
overflow:hidden;
}
}
@media(max-width:1180px) and (min-width:901px){
html.game-computer .computer-layout{
grid-template-columns:210px minmax(0,1fr) 210px;
gap:10px;
}
html.game-computer .computer-layout .game{
width:min(760px,calc(100vh - 150px),calc(100vw - 450px));
}
html.game-computer .history-sidebar,html.game-computer .control-sidebar{
height:min(700px,calc(100vh - 150px));
}
html.game-computer .control-sidebar .controls .btn{
font-size:14px;
}
}
@media(max-width:900px){
html.game-computer body{overflow-x:hidden;overflow-y:auto}
html.game-computer .computer-layout{
display:flex;
flex-direction:column;
width:100%;
margin-top:4px;
}
html.game-computer .computer-layout .game{
order:1;
width:min(880px,calc(100vh - 235px),96vw);
margin:4px auto 0;
}
html.game-computer .control-sidebar{
order:2;
width:100%;
height:auto;
margin:0 auto;
padding:0;
border:0;
background:transparent;
box-shadow:none;
overflow:visible;
}
html.game-computer .history-sidebar{
order:3;
width:100%;
height:auto;
margin:0 auto;
padding:0;
border:0;
background:transparent;
box-shadow:none;
overflow:visible;
}
html.game-computer .control-sidebar .time-control{
margin:7px auto 0;
}
html.game-computer .control-sidebar .controls{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px;
margin:4px auto 0;
}
html.game-computer .control-sidebar .controls .btn{
width:min(285px,46vw);
height:48px;
}
html.game-computer .control-sidebar .message{
border:0;
background:transparent;
}
html.game-computer .history-sidebar .move-history{
width:min(620px,94vw);
height:auto;
margin:10px auto 0;
display:block;
overflow:visible;
}
html.game-computer .history-sidebar .move-history-list{
overflow:visible;
}
}
html.game-computer .mobile-history-bar{display:none}
@media(max-width:900px){
html.game-computer .history-sidebar{display:none!important}
html.game-computer .computer-layout{
grid-template-rows:minmax(0,1fr) auto!important;
}
html.game-computer .mobile-history-bar{
display:flex;
flex:0 0 32px;
width:100%;
height:32px;
min-height:32px;
margin:3px 0 0;
padding:3px 6px;
align-items:center;
gap:7px;
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
border:1px solid #334b5d;
border-radius:8px;
background:#07131e;
color:#f7e8c1;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
}
html.game-computer .mobile-history-bar::-webkit-scrollbar{display:none}
html.game-computer .mobile-history-empty{
flex:0 0 auto;
color:#8fa4b2;
font-size:10px;
}
html.game-computer .mobile-history-item{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:5px;
min-height:24px;
padding:3px 7px;
border:1px solid #31495b;
border-radius:6px;
background:#0b1d2a;
font-size:10px;
line-height:1;
}
html.game-computer .mobile-history-item b{
color:#f4cd73;
}
html.game-computer .control-sidebar .controls .btn{
font-size:11px!important;
font-weight:800;
}
}
@media(max-width:430px){
html.game-computer .control-sidebar .controls .btn{
font-size:10px!important;
}
}
@media(max-width:900px) and (max-height:720px){
html.game-computer .mobile-history-bar{
flex-basis:28px;
height:28px;
min-height:28px;
margin-top:2px;
}
html.game-computer .mobile-history-item{
min-height:21px;
font-size:9px;
padding:2px 6px;
}
html.game-computer .control-sidebar .controls .btn{
font-size:10px!important;
}
}
/* MOBILE PROFILE/TIMER REFINEMENT */
@media(max-width:900px){
html.game-computer .top{gap:4px}
html.game-computer .player{
height:50px;
padding:4px 6px;
gap:5px;
}
html.game-computer .avatar{
width:38px;
height:38px;
flex:0 0 38px;
}
html.game-computer .pinfo{
flex:1 1 auto;
min-width:0;
overflow:hidden;
}
html.game-computer .name{
font-size:12px;
font-weight:800;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
html.game-computer .rating{
margin-top:1px;
font-size:10px;
white-space:nowrap;
}
html.game-computer .star{font-size:12px}
html.game-computer .timer{
flex:0 0 auto;
min-width:56px;
width:56px;
height:32px;
padding:0 3px;
border-radius:7px;
font-size:15px;
letter-spacing:-0.4px;
}
html.game-computer .control-sidebar .controls .btn{
min-height:38px;
height:38px;
font-size:12px!important;
font-weight:900!important;
letter-spacing:.15px;
text-shadow:0 1px 1px #0008;
padding:0 6px;
}
html.game-computer .control-sidebar .controls .new,html.game-computer .control-sidebar .controls .undo-btn,html.game-computer .control-sidebar .controls .resign{
border-width:1.5px;
}
}
@media(max-width:430px){
html.game-computer .player{
height:46px;
padding:3px 4px;
gap:4px;
}
html.game-computer .avatar{
width:34px;
height:34px;
flex-basis:34px;
}
html.game-computer .name{font-size:11px}
html.game-computer .timer{
min-width:52px;
width:52px;
height:30px;
font-size:14px;
}
html.game-computer .control-sidebar .controls .btn{
height:36px;
min-height:36px;
font-size:11px!important;
padding:0 4px;
}
}
@media(max-width:900px) and (max-height:720px){
html.game-computer .player{height:44px}
html.game-computer .avatar{
width:32px;
height:32px;
flex-basis:32px;
}
html.game-computer .timer{
width:50px;
min-width:50px;
height:28px;
font-size:13px;
}
html.game-computer .control-sidebar .controls .btn{
height:34px;
min-height:34px;
font-size:10.5px!important;
}
}
/* CAPTURED PIECES */
html.game-computer .captured-strip{
width:100%;
min-height:40px;
display:flex;
align-items:center;
gap:2px;
padding:2px 6px;
overflow:hidden;
}
html.game-computer .captured-top{justify-content:flex-start}
html.game-computer .captured-bottom{justify-content:flex-start}
html.game-computer .captured-piece{
width:36px;
height:36px;
flex:0 0 36px;
object-fit:contain;
display:block;
filter:drop-shadow(0 2px 2px #0008);
}
@media(max-width:900px){
html.game-computer .captured-strip{
min-height:28px;
height:28px;
padding:1px 4px;
gap:0;
}
html.game-computer .captured-piece{
width:26px;
height:26px;
flex-basis:26px;
}
}
@media(max-width:430px){
html.game-computer .captured-strip{
min-height:26px;
height:26px;
}
html.game-computer .captured-piece{
width:24px;
height:24px;
flex-basis:24px;
}
}
@media(max-width:900px) and (max-height:720px){
html.game-computer .captured-strip{
min-height:19px;
height:19px;
}
html.game-computer .captured-piece{
width:18px;
height:18px;
flex-basis:18px;
}
}
/* DESKTOP MOVE TIMER VISIBILITY FIX */
@media(min-width:901px){
html.game-computer .computer-layout .game .status{
display:flex!important;
visibility:visible!important;
opacity:1!important;
min-height:46px;
height:auto;
flex:0 0 auto;
align-items:center;
justify-content:center;
gap:12px;
padding:5px 0;
overflow:visible;
}
html.game-computer .computer-layout .game .move-timer{
display:flex!important;
visibility:visible!important;
opacity:1!important;
align-items:center;
gap:8px;
padding:6px 12px;
border:1px solid #d69a37;
border-radius:12px;
background:#091722;
box-shadow:0 5px 18px #0007;
color:#f7e8c1;
font-size:14px;
font-weight:700;
}
html.game-computer .computer-layout .game .move-timer-value{
display:inline-block!important;
min-width:82px;
padding:6px 10px;
border:1px solid #e6b957;
border-radius:8px;
background:#02070d;
color:#ffd86a;
font-size:24px;
font-weight:800;
letter-spacing:1px;
text-align:center;
box-shadow:inset 0 0 12px #0008;
}
html.game-computer .computer-layout .game{
display:flex;
flex-direction:column;
}
}
/* DESKTOP BOARD STACK FIX */
@media(min-width:901px){
html.game-computer .computer-layout{
align-items:start;
}
html.game-computer .computer-layout .game{
width:min(820px,calc(100vw - 570px));
max-height:calc(100dvh - 135px);
height:auto;
display:grid!important;
grid-template-rows:40px minmax(0,1fr) 40px 52px;
align-items:stretch;
overflow:visible;
padding:6px 6px 0;
}
html.game-computer .computer-layout .game .captured-top{
grid-row:1;
position:relative;
z-index:2;
min-height:40px;
height:40px;
padding:2px 6px;
overflow:hidden;
background:#06131e;
border-radius:10px 10px 0 0;
}
html.game-computer .computer-layout .game .board{
grid-row:2;
width:auto;
height:100%;
max-width:100%;
max-height:100%;
aspect-ratio:1;
margin:auto;
align-self:center;
justify-self:center;
}
html.game-computer .computer-layout .game .captured-bottom{
grid-row:3;
position:relative;
z-index:2;
min-height:40px;
height:40px;
padding:2px 6px;
overflow:hidden;
background:#06131e;
}
html.game-computer .computer-layout .game .status{
grid-row:4;
position:relative;
z-index:3;
display:flex!important;
min-height:52px!important;
height:52px!important;
margin:0;
padding:4px 0 2px;
overflow:visible!important;
background:#06131e;
border-radius:0 0 12px 12px;
}
html.game-computer .computer-layout .game .move-timer{
display:flex!important;
visibility:visible!important;
opacity:1!important;
}
html.game-computer .computer-layout .game .move-timer-value{
display:inline-block!important;
}
html.game-computer .computer-layout .game .captured-piece{
width:34px;
height:34px;
flex:0 0 34px;
}
html.game-computer .computer-layout .waiting-overlay{
grid-row:2;
}
}
@media(min-width:901px) and (max-height:780px){
html.game-computer .computer-layout .game{
max-height:calc(100dvh - 115px);
grid-template-rows:34px minmax(0,1fr) 34px 46px;
}
html.game-computer .computer-layout .game .captured-top,html.game-computer .computer-layout .game .captured-bottom{
min-height:34px;
height:34px;
}
html.game-computer .computer-layout .game .captured-piece{
width:30px;
height:30px;
flex-basis:30px;
}
html.game-computer .computer-layout .game .status{
min-height:46px!important;
height:46px!important;
}
html.game-computer .computer-layout .game .move-timer-value{
font-size:20px;
padding:4px 8px;
}
}
/* DESKTOP: REMOVE LARGE BOX AROUND BOARD */
@media(min-width:901px){
html.game-computer .computer-layout .game{
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
padding:0!important;
overflow:visible!important;
}
html.game-computer .computer-layout .game .captured-top,html.game-computer .computer-layout .game .captured-bottom{
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
}
html.game-computer .computer-layout .game .status{
width:max-content;
min-width:0;
justify-self:center;
margin:0 auto;
padding:3px 8px!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
}
html.game-computer .computer-layout .game .turn,html.game-computer .computer-layout .game .move-timer{
flex:0 0 auto;
}
html.game-computer .computer-layout .game .move-timer{
margin:0!important;
}
}
/* DESKTOP: TRUE CENTERED BOARD COLUMN */
@media(min-width:901px){
html.game-computer .computer-layout{
width:100%!important;
max-width:none!important;
grid-template-columns:260px minmax(0,1fr) 260px!important;
column-gap:14px!important;
padding:0 4px;
box-sizing:border-box;
}
html.game-computer .history-sidebar{
grid-column:1;
}
html.game-computer .computer-layout .game{
grid-column:2;
justify-self:center!important;
margin-left:auto!important;
margin-right:auto!important;
}
html.game-computer .control-sidebar{
grid-column:3;
}
html.game-computer .computer-layout .game .board{
justify-self:center!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
@media(min-width:901px) and (max-width:1180px){
html.game-computer .computer-layout{
grid-template-columns:210px minmax(0,1fr) 210px!important;
column-gap:10px!important;
}
}
/* DESKTOP: CENTER BOARD TO THE VIEWPORT, NOT TO SIDEBARS */
@media(min-width:901px){
html.game-computer .computer-layout{
position:relative!important;
display:block!important;
width:100%!important;
max-width:none!important;
min-height:calc(100dvh - 135px);
margin:4px 0 0!important;
padding:0!important;
}
html.game-computer .history-sidebar{
position:absolute!important;
left:4px!important;
top:0!important;
width:260px!important;
height:min(760px,calc(100dvh - 150px))!important;
margin:0!important;
}
html.game-computer .control-sidebar{
position:absolute!important;
right:4px!important;
top:0!important;
width:260px!important;
height:min(760px,calc(100dvh - 150px))!important;
margin:0!important;
}
html.game-computer .computer-layout .game{
position:relative!important;
left:50%!important;
transform:translateX(-50%)!important;
width:min(820px,calc(100dvh - 150px),calc(100vw - 560px))!important;
margin:0!important;
justify-self:auto!important;
}
html.game-computer .computer-layout .game .board{
margin-left:auto!important;
margin-right:auto!important;
justify-self:center!important;
}
}
@media(min-width:901px) and (max-width:1180px){
html.game-computer .history-sidebar,html.game-computer .control-sidebar{
width:210px!important;
}
html.game-computer .computer-layout .game{
width:min(760px,calc(100dvh - 145px),calc(100vw - 450px))!important;
}
}
/* CHESSORA LIGHT THEME — visual overrides only */
html.game-computer[data-theme="light"]{color-scheme:light}
html.game-computer[data-theme="light"],html.game-computer[data-theme="light"] body{
background:#eadfcd;
color:#25384a;
}
html.game-computer[data-theme="light"] body:before{
background:radial-gradient(circle at 50% 35%,#fffdf8 0,#f3eadc 42%,#dfcfb7 100%);
}
html.game-computer[data-theme="light"] body:after{
opacity:.32;
background:
radial-gradient(ellipse at 5% 80%,transparent 0 25%,#9a671c33 25.2% 25.5%,transparent 25.7%),
radial-gradient(ellipse at 95% 80%,transparent 0 25%,#9a671c33 25.2% 25.5%,transparent 25.7%);
}
html.game-computer[data-theme="light"] .player{
border-color:#b7812d;
background:linear-gradient(90deg,#fffaf2,#f3e7d5);
color:#26394b;
box-shadow:0 8px 24px #72522a24;
}
html.game-computer[data-theme="light"] .avatar{
border-color:#c18a36;
background:#fffdf8;
color:#8a5b12;
}
html.game-computer[data-theme="light"] .rating,html.game-computer[data-theme="light"] .star{color:#95620f}
html.game-computer[data-theme="light"] .timer{
border-color:#b7812d;
background:#f1e5d3;
color:#283a49;
}
html.game-computer[data-theme="light"] .right .timer{
background:#fffdf8;
color:#172735;
}
html.game-computer[data-theme="light"] .language-mobile select,html.game-computer[data-theme="light"] .time-control select,html.game-computer[data-theme="light"] .player-color select{
border-color:#b7812d;
background:#fffaf2;
color:#8a5b12;
box-shadow:0 4px 14px #72522a24;
}
html.game-computer[data-theme="light"] .language-mobile select option,html.game-computer[data-theme="light"] .time-control select option,html.game-computer[data-theme="light"] .player-color select option{
background:#fffaf2;
color:#26394b;
}
html.game-computer[data-theme="light"] .logo h1,html.game-computer[data-theme="light"] .logo .crown{
color:#9b670f;
text-shadow:0 2px 8px #ffffffa8;
}
html.game-computer[data-theme="light"] .logo p,html.game-computer[data-theme="light"] .logo p:before,html.game-computer[data-theme="light"] .logo p:after{color:#a36c12}
html.game-computer[data-theme="light"] .game{
border-color:#b7812d;
background:#fff7e9;
box-shadow:0 18px 46px #6d4c2638;
}
html.game-computer[data-theme="light"] .turn{
border-color:#b7812d;
background:#fffaf2;
color:#2f4354;
box-shadow:0 5px 16px #72522a24;
}
html.game-computer[data-theme="light"] .time-control,html.game-computer[data-theme="light"] .player-color{color:#625548}
html.game-computer[data-theme="light"] .move-timer{
border-color:#c58a31;
background:#f3e7d5;
color:#2f4354;
box-shadow:0 5px 16px #72522a24;
}
html.game-computer[data-theme="light"] .move-timer-value{
border-color:#c58a31;
background:#fffdf8;
color:#8f5e0d;
box-shadow:inset 0 0 10px #72522a14;
}
html.game-computer[data-theme="light"] .waiting-overlay{
border-color:#b7812d;
background:#fffaf2f2;
color:#25384a;
box-shadow:0 6px 20px #72522a38;
}
html.game-computer[data-theme="light"] .waiting-overlay.joined{color:#176b31}
html.game-computer[data-theme="light"] .message{color:#625548}
html.game-computer[data-theme="light"] .history-sidebar,html.game-computer[data-theme="light"] .control-sidebar{
border-color:#b7812d;
background:linear-gradient(180deg,#fffdf8,#f1e5d3);
color:#26394b;
box-shadow:0 14px 38px #72522a24;
}
html.game-computer[data-theme="light"] .move-history{
border-color:#c8b89f;
background:#fffaf2;
color:#26394b;
}
html.game-computer[data-theme="light"] .move-history-title,html.game-computer[data-theme="light"] .history-sidebar .move-history-row span:first-child,html.game-computer[data-theme="light"] .mobile-history-item b{color:#8f5e0d}
html.game-computer[data-theme="light"] .move-history-row{
border-top-color:#d8c6ac;
}
html.game-computer[data-theme="light"] .history-sidebar .move-history-row span:nth-child(2),html.game-computer[data-theme="light"] .history-sidebar .move-history-row span:nth-child(3){
color:#26394b;
}
html.game-computer[data-theme="light"] .control-sidebar .time-control,html.game-computer[data-theme="light"] .control-sidebar .message{
border-color:#c8b89f;
background:#fffaf2;
color:#4f4439;
}
html.game-computer[data-theme="light"] .mobile-history-bar,html.game-computer[data-theme="light"] .history-sidebar{
border-color:#c8b89f;
}
html.game-computer[data-theme="light"] .mobile-history-empty{color:#6b7b87}
html.game-computer[data-theme="light"] .home-button{
border-color:#b7812d;
background:#fffaf2;
color:#8a5b12;
box-shadow:0 4px 14px #72522a24;
}
html.game-computer[data-theme="light"] .game-end-overlay{background:#3e332a70}
html.game-computer[data-theme="light"] .game-end-box{
border-color:#b7812d;
background:linear-gradient(180deg,#fffdf8,#f1e5d3);
box-shadow:0 24px 70px #5a402c55;
}
html.game-computer[data-theme="light"] .game-end-icon,html.game-computer[data-theme="light"] .game-end-title{color:#8f5e0d}
html.game-computer[data-theme="light"] .game-end-result{color:#26394b}
/*
COMPUTER DESKTOP — EXACT ONLINE GAME COMPOSITION
This is the proven game.html desktop geometry, adapted only by
replacing .online-layout with .computer-layout.
*/
@media(min-width:901px){
html.game-computer,html.game-computer body{
width:100%;
height:100%;
overflow:hidden!important;
}
html.game-computer body.computer-mode{
min-height:100dvh;
}
html.game-computer body.computer-mode .app{
width:100%!important;
max-width:none!important;
height:100dvh!important;
margin:0!important;
padding:10px 0 8px!important;
overflow:hidden!important;
}
html.game-computer body.computer-mode .top{
width:min(1442px,calc(100vw - 314px))!important;
max-width:none!important;
height:80px!important;
margin:9px auto 10px!important;
padding:0!important;
display:grid!important;
grid-template-columns:
minmax(0,566px)
minmax(330px,1fr)
minmax(0,566px)!important;
gap:0!important;
align-items:center!important;
}
html.game-computer body.computer-mode .player{
width:100%!important;
height:80px!important;
margin:0!important;
padding:8px 16px!important;
border-radius:17px!important;
}
html.game-computer body.computer-mode .player.right{
justify-content:flex-end!important;
}
html.game-computer body.computer-mode .avatar{
width:58px!important;
height:58px!important;
flex:0 0 58px!important;
border-radius:13px!important;
}
html.game-computer body.computer-mode .name{
font-size:18px!important;
}
html.game-computer body.computer-mode .rating{
margin-top:4px!important;
font-size:16px!important;
}
html.game-computer body.computer-mode .timer{
width:150px!important;
min-width:150px!important;
height:58px!important;
border-radius:12px!important;
font-size:32px!important;
}
html.game-computer body.computer-mode .logo{
width:100%!important;
min-width:0!important;
z-index:2!important;
}
html.game-computer body.computer-mode .logo .crown{
height:22px!important;
font-size:28px!important;
line-height:20px!important;
}
html.game-computer body.computer-mode .logo h1{
font-size:48px!important;
letter-spacing:4px!important;
white-space:nowrap!important;
}
html.game-computer body.computer-mode .logo p{
margin-top:2px!important;
font-size:11px!important;
letter-spacing:5px!important;
}
html.game-computer body.computer-mode .home-button{
position:fixed!important;
left:4px!important;
top:13px!important;
z-index:110!important;
min-height:36px!important;
padding:7px 8px!important;
font-size:10.5px!important;
transform:none!important;
}
html.game-computer body.computer-mode .language-mobile{
position:fixed!important;
right:8px!important;
top:13px!important;
left:auto!important;
z-index:110!important;
}
html.game-computer body.computer-mode .language-mobile select{
width:auto!important;
max-width:112px!important;
height:36px!important;
padding:6px!important;
font-size:10px!important;
}
html.game-computer body.computer-mode .computer-layout{
position:relative!important;
display:block!important;
width:min(1442px,calc(100vw - 314px))!important;
max-width:none!important;
height:calc(100dvh - 109px)!important;
min-height:0!important;
margin:0 auto!important;
padding:0!important;
overflow:visible!important;
}
html.game-computer body.computer-mode .history-sidebar{
position:absolute!important;
left:0!important;
right:auto!important;
top:0!important;
transform:none!important;
width:300px!important;
height:calc(100dvh - 119px)!important;
max-height:665px!important;
margin:0!important;
padding:13px!important;
border:1px solid #a87322!important;
border-radius:17px!important;
background:linear-gradient(180deg,#07131e,#0b1925)!important;
box-shadow:none!important;
overflow:hidden!important;
}
html.game-computer body.computer-mode .history-sidebar .move-history{
width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
border:1px solid #233b4d!important;
border-radius:13px!important;
background:#07131e!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
}
html.game-computer body.computer-mode .history-sidebar .move-history-title{
flex:0 0 48px!important;
margin:0!important;
padding:15px 8px 10px!important;
border:0!important;
text-align:center!important;
font-size:18px!important;
font-weight:900!important;
}
html.game-computer body.computer-mode .history-sidebar .move-history-list{
flex:1 1 auto!important;
min-height:0!important;
max-height:none!important;
padding:0 14px 12px!important;
overflow-y:auto!important;
}
html.game-computer body.computer-mode .control-sidebar{
position:absolute!important;
right:0!important;
left:auto!important;
top:0!important;
transform:none!important;
width:300px!important;
height:calc(100dvh - 119px)!important;
max-height:665px!important;
margin:0!important;
padding:13px!important;
border:1px solid #a87322!important;
border-radius:17px!important;
background:linear-gradient(180deg,#07131e,#0b1925)!important;
box-shadow:none!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
gap:10px!important;
}
html.game-computer body.computer-mode .control-sidebar .game-id,html.game-computer body.computer-mode .control-sidebar .invite-link,html.game-computer body.computer-mode .control-sidebar .player-color{
display:none!important;
}
html.game-computer body.computer-mode .control-sidebar .time-control{
width:100%!important;
min-height:64px!important;
margin:0!important;
padding:10px!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:center!important;
gap:10px!important;
border:1px solid #233b4d!important;
border-radius:13px!important;
background:#07131e!important;
}
html.game-computer body.computer-mode .control-sidebar .time-control select{
width:auto!important;
min-width:98px!important;
padding:7px 11px!important;
}
html.game-computer body.computer-mode .control-sidebar .controls{
width:100%!important;
margin:0!important;
display:grid!important;
grid-template-columns:1fr!important;
gap:9px!important;
}
html.game-computer body.computer-mode .control-sidebar .controls .btn{
width:100%!important;
height:51px!important;
margin:0!important;
border-radius:10px!important;
font-size:17px!important;
font-weight:900!important;
}
html.game-computer body.computer-mode .control-sidebar .message{
width:100%!important;
min-height:54px!important;
margin:0!important;
padding:8px 10px!important;
border:1px solid #233b4d!important;
border-radius:10px!important;
background:#07131e!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:13px!important;
line-height:1.25!important;
}
html.game-computer body.computer-mode .computer-layout .game{
position:absolute!important;
left:50%!important;
top:40px!important;
transform:translateX(-50%)!important;
width:min(575px,calc(100dvh - 256px))!important;
height:auto!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
overflow:visible!important;
display:grid!important;
grid-template-rows:
0
minmax(0,1fr)
0
58px!important;
align-items:stretch!important;
z-index:2!important;
}
html.game-computer body.computer-mode .computer-layout .captured-strip{
min-height:0!important;
height:0!important;
padding:0!important;
overflow:visible!important;
position:relative!important;
z-index:3!important;
}
html.game-computer body.computer-mode .computer-layout .captured-top{
grid-row:1!important;
transform:translateY(-34px)!important;
}
html.game-computer body.computer-mode .computer-layout .captured-bottom{
grid-row:3!important;
transform:translateY(17px)!important;
}
html.game-computer body.computer-mode .computer-layout .captured-piece{
width:30px!important;
height:30px!important;
flex:0 0 30px!important;
}
html.game-computer body.computer-mode .computer-layout .board{
grid-row:2!important;
width:100%!important;
height:auto!important;
max-width:100%!important;
aspect-ratio:1!important;
margin:0 auto!important;
border-radius:4px!important;
}
html.game-computer body.computer-mode .computer-layout .status{
grid-row:4!important;
width:max-content!important;
height:58px!important;
min-height:58px!important;
margin:32px auto 0!important;
padding:0!important;
background:transparent!important;
border:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:14px!important;
flex-wrap:nowrap!important;
}
html.game-computer body.computer-mode .computer-layout .turn{
min-width:170px!important;
height:42px!important;
padding:9px 20px!important;
font-size:16px!important;
white-space:nowrap!important;
}
html.game-computer body.computer-mode .computer-layout .move-timer{
height:48px!important;
padding:5px 10px!important;
font-size:14px!important;
white-space:nowrap!important;
}
html.game-computer body.computer-mode .computer-layout .move-timer-value{
min-width:82px!important;
padding:4px 8px!important;
font-size:22px!important;
border-radius:7px!important;
}
html.game-computer body.computer-mode .mobile-history-bar{
display:none!important;
}
}
@media(min-width:901px) and (max-width:1550px){
html.game-computer body.computer-mode .top,html.game-computer body.computer-mode .computer-layout{
width:calc(100vw - 220px)!important;
max-width:none!important;
}
html.game-computer body.computer-mode .top{
grid-template-columns:
minmax(0,1fr)
310px
minmax(0,1fr)!important;
}
html.game-computer body.computer-mode .history-sidebar,html.game-computer body.computer-mode .control-sidebar{
width:250px!important;
}
html.game-computer body.computer-mode .computer-layout .game{
width:min(
560px,
calc(100dvh - 245px),
calc(100vw - 540px)
)!important;
}
html.game-computer body.computer-mode .logo h1{
font-size:40px!important;
}
html.game-computer body.computer-mode .timer{
width:128px!important;
min-width:128px!important;
font-size:27px!important;
}
}
@media(min-width:901px) and (max-width:1180px){
html.game-computer body.computer-mode .top,html.game-computer body.computer-mode .computer-layout{
width:calc(100vw - 170px)!important;
}
html.game-computer body.computer-mode .history-sidebar,html.game-computer body.computer-mode .control-sidebar{
width:210px!important;
}
html.game-computer body.computer-mode .computer-layout .game{
width:min(
520px,
calc(100dvh - 235px),
calc(100vw - 450px)
)!important;
}
html.game-computer body.computer-mode .logo h1{
font-size:34px!important;
}
}
/* COMPUTER DESKTOP LIGHT THEME — side panel colors only */
@media(min-width:901px){
html.game-computer[data-theme="light"] body.computer-mode .history-sidebar,html.game-computer[data-theme="light"] body.computer-mode .control-sidebar{
border-color:#b7812d!important;
background:linear-gradient(180deg,#fffdf8,#f1e5d3)!important;
color:#26394b!important;
box-shadow:0 14px 38px #72522a24!important;
}
html.game-computer[data-theme="light"] body.computer-mode .history-sidebar .move-history,html.game-computer[data-theme="light"] body.computer-mode .control-sidebar .time-control,html.game-computer[data-theme="light"] body.computer-mode .control-sidebar .message{
border-color:#c8b89f!important;
background:#fffaf2!important;
color:#26394b!important;
}
html.game-computer[data-theme="light"] body.computer-mode .history-sidebar .move-history-title{
color:#8f5e0d!important;
}
html.game-computer[data-theme="light"] body.computer-mode .history-sidebar .move-history-row{
border-color:#d8c6ac!important;
background:#fffdf8!important;
color:#26394b!important;
}
html.game-computer[data-theme="light"] body.computer-mode .history-sidebar .move-history-row span:first-child{
color:#8f5e0d!important;
}
html.game-computer[data-theme="light"] body.computer-mode .history-sidebar .move-history-row span:nth-child(2),html.game-computer[data-theme="light"] body.computer-mode .history-sidebar .move-history-row span:nth-child(3),html.game-computer[data-theme="light"] body.computer-mode .control-sidebar .time-control label,html.game-computer[data-theme="light"] body.computer-mode .control-sidebar .message{
color:#26394b!important;
}
}
/* MOBILE: hide changing status field below controls */
@media(max-width:900px){
html.game-computer body.computer-mode .control-sidebar .message{
display:none!important;
}
}
/* MOBILE: compact lower controls inside viewport */
@media(max-width:900px){
html.game-computer body.computer-mode .control-sidebar{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-template-rows:auto auto!important;
gap:4px!important;
align-items:center!important;
flex:0 0 auto!important;
width:100%!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
html.game-computer body.computer-mode .control-sidebar .time-control{
grid-column:1!important;
grid-row:1!important;
justify-self:center!important;
margin:0!important;
padding:4px 6px!important;
gap:4px!important;
white-space:nowrap!important;
}
html.game-computer body.computer-mode .control-sidebar .controls{
grid-column:1!important;
grid-row:2!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex-wrap:nowrap!important;
gap:4px!important;
width:100%!important;
min-width:0!important;
margin:0!important;
}
html.game-computer body.computer-mode .control-sidebar .controls .btn{
width:auto!important;
min-width:0!important;
height:36px!important;
min-height:36px!important;
flex:1 1 0!important;
margin:0!important;
padding:0 4px!important;
font-size:10px!important;
white-space:nowrap!important;
}
}
@media(max-width:430px){
html.game-computer body.computer-mode .control-sidebar .time-control{
padding:3px 4px!important;
font-size:9px!important;
}
html.game-computer body.computer-mode .control-sidebar .time-control select{
padding:3px 4px!important;
font-size:10px!important;
}
}
@media(max-width:900px) and (max-height:720px){
html.game-computer body.computer-mode .control-sidebar .controls .btn{
height:34px!important;
min-height:34px!important;
font-size:9.5px!important;
}
}
/* MOBILE: pull the complete game container up to the player profiles */
@media(max-width:900px){
html.game-computer body.computer-mode .computer-layout{
margin-top:0!important;
}
html.game-computer body.computer-mode .computer-layout .game{
margin:clamp(-64px,-8dvh,-48px) auto 0!important;
}
}
/* friend-game.html */
html.game-friend,html.game-friend *{box-sizing:border-box}
html.game-friend,html.game-friend body{
margin:0;
min-height:100%;
font-family:Arial,Helvetica,sans-serif;
background:#02070d;
color:#f7e8c1;
}
html.game-friend body{
min-height:100dvh;
overflow-x:hidden;
background:radial-gradient(circle at 50% 28%,#0d2940 0,#061624 35%,#02070d 72%);
}
html.game-friend .page{
min-height:100dvh;
width:100%;
padding:16px;
display:flex;
flex-direction:column;
align-items:center;
}
html.game-friend .topbar{
width:min(1180px,100%);
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:14px;
}
html.game-friend .back-btn,html.game-friend .lang-select{
height:42px;
border:1px solid #a87322;
border-radius:10px;
background:#07131e;
color:#f4cd73;
box-shadow:0 5px 18px #0007;
font-weight:800;
}
html.game-friend .back-btn{
justify-self:start;
padding:0 14px;
cursor:pointer;
}
html.game-friend .lang-wrap{justify-self:end}
html.game-friend .lang-select{
padding:0 11px;
outline:none;
cursor:pointer;
}
html.game-friend .brand{text-align:center;white-space:nowrap}
html.game-friend .brand .crown{
display:block;
color:#f4cd73;
font-size:27px;
line-height:22px;
height:22px;
}
html.game-friend .brand h1{
margin:0;
font-family:Georgia,serif;
font-size:44px;
letter-spacing:4px;
color:#f4cd73;
text-shadow:0 3px 10px #000;
}
html.game-friend .brand p{
margin:3px 0 0;
font-size:11px;
letter-spacing:4px;
color:#dcae4f;
}
html.game-friend .brand p:before,html.game-friend .brand p:after{
content:"◆";
font-size:6px;
margin:0 10px;
}
html.game-friend .userbar{
width:min(880px,100%);
margin:24px auto 0;
padding:12px 14px;
border:1px solid #345164;
border-radius:14px;
background:#07131e;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
html.game-friend .user{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
html.game-friend .avatar{
width:44px;
height:44px;
flex:0 0 44px;
border-radius:50%;
border:1px solid #b57b25;
background:linear-gradient(180deg,#2c6ca3,#123d5f);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-weight:900;
font-size:18px;
}
html.game-friend .usertext{min-width:0}
html.game-friend .username{
color:#f4cd73;
font-weight:900;
font-size:15px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
html.game-friend .rating{
margin-top:3px;
color:#9eb0bd;
font-size:12px;
}
html.game-friend .profile-btn{
flex:0 0 auto;
min-height:36px;
padding:0 12px;
border:1px solid #8b6422;
border-radius:9px;
background:#0a1924;
color:#f4cd73;
font-weight:800;
cursor:pointer;
}
html.game-friend .hero{
width:min(760px,100%);
margin:30px auto 0;
text-align:center;
}
html.game-friend .hero-icon{
width:80px;
height:80px;
margin:0 auto 10px;
border:1px solid #b57b25;
border-radius:21px;
background:linear-gradient(180deg,#12314a,#081824);
display:flex;
align-items:center;
justify-content:center;
font-size:43px;
box-shadow:0 14px 30px #0008;
}
html.game-friend .hero h2{
margin:0;
color:#f4cd73;
font-family:Georgia,serif;
font-size:34px;
letter-spacing:1px;
}
html.game-friend .hero p{
margin:8px auto 0;
max-width:580px;
color:#9fb0bc;
font-size:14px;
line-height:1.45;
}
html.game-friend .friend-card{
width:min(760px,100%);
margin:24px auto 0;
padding:24px;
border:1px solid #a87322;
border-radius:20px;
background:linear-gradient(180deg,#0b1c2a,#06111b);
box-shadow:0 22px 60px #000b;
}
html.game-friend .options{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
html.game-friend .option{
padding:22px;
min-height:210px;
border:1px solid #2c485b;
border-radius:16px;
background:#07131e;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
html.game-friend .option-icon{
width:58px;
height:58px;
border:1px solid #916922;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
color:#f4cd73;
background:#0b1c29;
font-size:29px;
}
html.game-friend .option h3{
margin:14px 0 7px;
color:#f4cd73;
font-size:19px;
}
html.game-friend .option p{
margin:0;
color:#91a3af;
font-size:13px;
line-height:1.45;
}
html.game-friend .friend-time-control{
width:100%;
margin:14px 0 12px;
padding:10px;
border:1px solid #2c485b;
border-radius:10px;
background:#06111b;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
html.game-friend .friend-time-control label{
color:#d8c69f;
font-size:12px;
font-weight:800;
white-space:nowrap;
}
html.game-friend .friend-time-control select{
min-width:96px;
height:38px;
padding:0 10px;
border:1px solid #a87322;
border-radius:8px;
outline:none;
background:#07131e;
color:#f4cd73;
font-size:13px;
font-weight:900;
cursor:pointer;
}
html.game-friend .friend-time-control select option{
background:#07131e;
color:#f7e8c1;
}
html.game-friend .action{
width:100%;
min-height:48px;
margin-top:auto;
padding:0 12px;
border-radius:10px;
font-size:14px;
font-weight:900;
cursor:pointer;
}
html.game-friend .action.create{
border:1px solid #2b86ff;
background:linear-gradient(#1467d8,#0750b4);
color:#fff;
}
html.game-friend .join-wrap{
width:100%;
margin-top:auto;
display:grid;
grid-template-columns:1fr auto;
gap:7px;
}
html.game-friend .code-input{
width:100%;
min-width:0;
height:46px;
padding:0 11px;
border:1px solid #334c5e;
border-radius:9px;
outline:none;
background:#06111b;
color:#f7e8c1;
font-size:13px;
text-align:center;
text-transform:uppercase;
}
html.game-friend .action.join{
margin:0;
width:auto;
min-width:92px;
border:1px solid #a87322;
background:#10202d;
color:#f4cd73;
}
html.game-friend .status{
min-height:20px;
margin-top:14px;
text-align:center;
color:#8fa4b4;
font-size:12px;
}
html.game-friend .created-game{
margin-top:14px;
padding:14px;
border:1px solid #2f4a5d;
border-radius:12px;
background:#07131e;
}
html.game-friend .created-game[hidden]{display:none}
html.game-friend .created-label{
text-align:center;
color:#8ea2b0;
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.7px;
}
html.game-friend .created-id{
margin-top:5px;
text-align:center;
color:#f4cd73;
font-size:22px;
font-weight:900;
letter-spacing:1px;
}
html.game-friend .created-link-row{
margin-top:12px;
display:grid;
grid-template-columns:1fr auto;
gap:7px;
}
html.game-friend .created-link{
width:100%;
min-width:0;
height:42px;
padding:0 10px;
border:1px solid #334c5e;
border-radius:8px;
background:#06111b;
color:#dce7ee;
font-size:12px;
}
html.game-friend .copy-btn{
min-width:110px;
border:1px solid #8d641e;
border-radius:8px;
background:#10202d;
color:#f4cd73;
font-size:11px;
font-weight:900;
cursor:pointer;
}
html.game-friend .go-game-btn{
width:100%;
min-height:46px;
margin-top:10px;
border:1px solid #2b86ff;
border-radius:9px;
background:linear-gradient(#1467d8,#0750b4);
color:#fff;
font-size:13px;
font-weight:900;
cursor:pointer;
}
@media(max-width:700px){
html.game-friend .page{padding:10px}
html.game-friend .topbar{gap:5px}
html.game-friend .back-btn{height:38px;padding:0 8px;font-size:10px}
html.game-friend .lang-select{height:38px;max-width:110px;padding:0 6px;font-size:10px}
html.game-friend .brand .crown,html.game-friend .brand p{display:none}
html.game-friend .brand h1{font-size:24px;letter-spacing:2px}
html.game-friend .userbar{margin-top:18px;padding:9px 10px}
html.game-friend .avatar{width:38px;height:38px;flex-basis:38px}
html.game-friend .username{font-size:13px}html.game-friend .rating{font-size:11px}
html.game-friend .profile-btn{min-height:34px;padding:0 9px;font-size:10px}
html.game-friend .hero{margin-top:22px}
html.game-friend .hero-icon{width:64px;height:64px;font-size:34px;border-radius:17px}
html.game-friend .hero h2{font-size:27px}
html.game-friend .hero p{font-size:12px;padding:0 10px}
html.game-friend .friend-card{margin-top:18px;padding:14px;border-radius:17px}
html.game-friend .options{grid-template-columns:1fr;gap:10px}
html.game-friend .option{min-height:176px;padding:16px}
html.game-friend .option-icon{width:50px;height:50px;font-size:25px}
html.game-friend .option h3{margin-top:10px;font-size:17px}
html.game-friend .option p{font-size:12px}
html.game-friend .action{min-height:45px}
}
/* =========================================================
CHESSORA FRIEND GAME — FIXED VIEWPORT
The browser page itself never scrolls.
If space is limited, only the central friend-card scrolls.
========================================================= */
html.game-friend,html.game-friend body{
width:100%;
height:100%;
min-height:0;
overflow:hidden!important;
overscroll-behavior:none;
}
html.game-friend body{
position:fixed;
inset:0;
min-height:0!important;
}
html.game-friend .page{
box-sizing:border-box;
width:100%;
height:100dvh;
min-height:0!important;
padding:clamp(8px,1.6vh,16px);
display:grid;
grid-template-rows:auto auto auto minmax(0,1fr);
gap:clamp(7px,1.4vh,14px);
align-items:stretch;
overflow:hidden!important;
}
html.game-friend .topbar{
flex:0 0 auto;
width:min(1180px,100%);
margin:0 auto;
}
html.game-friend .brand .crown{
font-size:clamp(19px,2.7vh,27px);
line-height:1;
height:auto;
}
html.game-friend .brand h1{
font-size:clamp(28px,4.5vh,44px);
line-height:1;
}
html.game-friend .brand p{
margin-top:2px;
}
html.game-friend .userbar{
width:min(880px,100%);
margin:0 auto;
padding:clamp(8px,1.2vh,12px) 14px;
}
html.game-friend .avatar{
width:clamp(36px,5.4vh,44px);
height:clamp(36px,5.4vh,44px);
flex-basis:clamp(36px,5.4vh,44px);
}
html.game-friend .hero{
width:min(760px,100%);
margin:0 auto;
}
html.game-friend .hero-icon{
width:clamp(52px,8vh,72px);
height:clamp(52px,8vh,72px);
margin-bottom:clamp(5px,1vh,9px);
border-radius:18px;
font-size:clamp(28px,4.8vh,39px);
}
html.game-friend .hero h2{
font-size:clamp(25px,4vh,34px);
line-height:1.05;
}
html.game-friend .hero p{
margin-top:5px;
font-size:clamp(11px,1.7vh,14px);
line-height:1.3;
}
html.game-friend .friend-card{
box-sizing:border-box;
width:min(900px,100%);
height:100%;
min-height:0;
margin:0 auto;
padding:clamp(12px,1.8vh,20px);
border-radius:18px;
display:flex;
flex-direction:column;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:#496171 #07131e;
}
html.game-friend .friend-card::-webkit-scrollbar{
width:7px;
}
html.game-friend .friend-card::-webkit-scrollbar-track{
background:#07131e;
border-radius:99px;
}
html.game-friend .friend-card::-webkit-scrollbar-thumb{
background:#496171;
border-radius:99px;
}
html.game-friend .friend-card::-webkit-scrollbar-thumb:hover{
background:#a87322;
}
html.game-friend .options{
flex:0 0 auto;
gap:clamp(10px,1.4vw,16px);
}
html.game-friend .option{
min-height:0;
padding:clamp(13px,1.9vh,20px);
}
html.game-friend .option-icon{
width:clamp(46px,6.7vh,56px);
height:clamp(46px,6.7vh,56px);
font-size:clamp(23px,3.5vh,28px);
}
html.game-friend .option h3{
margin:clamp(8px,1.2vh,12px) 0 5px;
font-size:clamp(16px,2.5vh,19px);
}
html.game-friend .option p{
font-size:clamp(11px,1.7vh,13px);
line-height:1.32;
}
html.game-friend .friend-time-control{
margin:clamp(8px,1.2vh,12px) 0 clamp(7px,1vh,10px);
padding:8px 10px;
}
html.game-friend .friend-time-control select{
height:36px;
}
html.game-friend .action{
min-height:42px;
}
html.game-friend .code-input{
height:42px;
}
html.game-friend .created-game{
flex:0 0 auto;
margin-top:10px;
padding:10px 12px;
}
html.game-friend .created-id{
font-size:19px;
}
html.game-friend .created-link-row{
margin-top:8px;
}
html.game-friend .created-link{
height:38px;
}
html.game-friend .go-game-btn{
min-height:40px;
margin-top:8px;
}
html.game-friend .status{
flex:0 0 auto;
min-height:16px;
margin-top:8px;
}
/* Compact desktop / laptop screens */
@media(min-width:701px) and (max-height:820px){
html.game-friend .page{
padding:7px 12px;
gap:7px;
}
html.game-friend .back-btn,html.game-friend .lang-select{
height:34px;
}
html.game-friend .brand .crown{
display:none;
}
html.game-friend .brand h1{
font-size:27px;
}
html.game-friend .brand p{
display:none;
}
html.game-friend .userbar{
padding:7px 10px;
}
html.game-friend .avatar{
width:34px;
height:34px;
flex-basis:34px;
font-size:15px;
}
html.game-friend .profile-btn{
min-height:30px;
}
html.game-friend .hero-icon{
width:46px;
height:46px;
margin-bottom:4px;
font-size:25px;
}
html.game-friend .hero h2{
font-size:23px;
}
html.game-friend .hero p{
margin-top:3px;
font-size:11px;
line-height:1.2;
}
html.game-friend .friend-card{
padding:10px;
}
html.game-friend .option{
padding:10px 12px;
}
html.game-friend .option-icon{
width:42px;
height:42px;
font-size:22px;
}
html.game-friend .option h3{
margin:7px 0 4px;
font-size:15px;
}
html.game-friend .option p{
font-size:10.5px;
}
html.game-friend .friend-time-control{
margin:7px 0;
padding:6px 8px;
}
html.game-friend .friend-time-control select{
height:32px;
}
html.game-friend .action,html.game-friend .code-input{
min-height:36px;
height:36px;
}
html.game-friend .created-game{
margin-top:8px;
padding:8px 10px;
}
html.game-friend .created-id{
font-size:17px;
}
html.game-friend .created-link{
height:34px;
}
html.game-friend .go-game-btn{
min-height:36px;
}
html.game-friend .status{
margin-top:5px;
min-height:14px;
}
}
/* Tablet / mobile:
page stays fixed, friend-card is the only scrollable area */
@media(max-width:700px){
html.game-friend .page{
padding:7px;
gap:6px;
}
html.game-friend .topbar{
width:100%;
}
html.game-friend .back-btn{
height:34px;
padding:0 7px;
font-size:9px;
}
html.game-friend .lang-select{
height:34px;
max-width:104px;
padding:0 5px;
font-size:9px;
}
html.game-friend .brand .crown,html.game-friend .brand p{
display:none;
}
html.game-friend .brand h1{
font-size:22px;
letter-spacing:1.8px;
}
html.game-friend .userbar{
width:100%;
padding:7px 8px;
}
html.game-friend .avatar{
width:34px;
height:34px;
flex-basis:34px;
font-size:14px;
}
html.game-friend .username{
font-size:12px;
}
html.game-friend .rating{
margin-top:2px;
font-size:10px;
}
html.game-friend .profile-btn{
min-height:30px;
padding:0 8px;
font-size:9px;
}
html.game-friend .hero{
width:100%;
}
html.game-friend .hero-icon{
width:44px;
height:44px;
margin-bottom:3px;
border-radius:12px;
font-size:23px;
}
html.game-friend .hero h2{
font-size:21px;
}
html.game-friend .hero p{
max-width:460px;
margin-top:3px;
padding:0 6px;
font-size:10px;
line-height:1.2;
}
html.game-friend .friend-card{
width:100%;
padding:9px;
border-radius:14px;
}
html.game-friend .options{
grid-template-columns:1fr;
gap:8px;
}
html.game-friend .option{
padding:10px;
}
html.game-friend .option-icon{
width:40px;
height:40px;
border-radius:11px;
font-size:21px;
}
html.game-friend .option h3{
margin:6px 0 4px;
font-size:15px;
}
html.game-friend .option p{
font-size:10.5px;
line-height:1.25;
}
html.game-friend .friend-time-control{
margin:7px 0;
padding:6px 8px;
}
html.game-friend .friend-time-control label{
font-size:10px;
}
html.game-friend .friend-time-control select{
min-width:82px;
height:32px;
font-size:11px;
}
html.game-friend .action,html.game-friend .code-input{
min-height:36px;
height:36px;
font-size:11px;
}
html.game-friend .join-wrap{
gap:6px;
}
html.game-friend .action.join{
min-width:78px;
}
html.game-friend .created-game{
margin-top:8px;
padding:8px;
}
html.game-friend .created-label{
font-size:9px;
}
html.game-friend .created-id{
font-size:16px;
}
html.game-friend .created-link-row{
grid-template-columns:minmax(0,1fr) auto;
gap:5px;
}
html.game-friend .created-link{
height:34px;
font-size:9px;
}
html.game-friend .copy-btn{
min-width:86px;
font-size:9px;
}
html.game-friend .go-game-btn{
min-height:36px;
font-size:10px;
}
html.game-friend .status{
min-height:13px;
margin-top:5px;
font-size:9px;
}
}
@media(max-width:430px){
html.game-friend .page{
padding:5px;
gap:5px;
}
html.game-friend .topbar{
grid-template-columns:auto 1fr auto;
gap:4px;
}
html.game-friend .back-btn{
max-width:84px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
html.game-friend .lang-select{
max-width:88px;
}
html.game-friend .brand h1{
font-size:19px;
letter-spacing:1.3px;
}
html.game-friend .userbar{
padding:5px 7px;
}
html.game-friend .avatar{
width:30px;
height:30px;
flex-basis:30px;
}
html.game-friend .profile-btn{
min-height:28px;
}
html.game-friend .hero-icon{
display:none;
}
html.game-friend .hero h2{
font-size:18px;
}
html.game-friend .hero p{
font-size:9px;
}
html.game-friend .friend-card{
padding:7px;
}
html.game-friend .option{
padding:8px;
}
html.game-friend .option-icon{
width:34px;
height:34px;
font-size:18px;
}
html.game-friend .option h3{
font-size:14px;
}
html.game-friend .option p{
font-size:9.5px;
}
html.game-friend .friend-time-control{
padding:5px 7px;
}
html.game-friend .created-link-row{
grid-template-columns:1fr;
}
html.game-friend .copy-btn{
min-height:32px;
}
}
/* CHESSORA FRIEND GAME — LIGHT THEME (visual overrides only) */
html.game-friend[data-theme="light"]{color-scheme:light}
html.game-friend[data-theme="light"],html.game-friend[data-theme="light"] body{
background:#eadfcd;
color:#25384a;
}
html.game-friend[data-theme="light"] body{
background:radial-gradient(circle at 50% 28%,#fffdf8 0,#f3eadc 44%,#dfcfb7 100%);
}
html.game-friend[data-theme="light"] .back-btn,html.game-friend[data-theme="light"] .lang-select{
border-color:#b7812d;
background:#fffaf2;
color:#8a5b12;
box-shadow:0 5px 18px #72522a24;
}
html.game-friend[data-theme="light"] .lang-select option{
background:#fffaf2;
color:#26394b;
}
html.game-friend[data-theme="light"] .brand .crown,html.game-friend[data-theme="light"] .brand h1{
color:#9b670f;
text-shadow:0 2px 8px #ffffffa8;
}
html.game-friend[data-theme="light"] .brand p{color:#a36c12}
html.game-friend[data-theme="light"] .userbar{
border-color:#c8b89f;
background:#fffaf2;
box-shadow:0 7px 20px #72522a20;
}
html.game-friend[data-theme="light"] .avatar{
border-color:#b7812d;
box-shadow:0 5px 14px #355a7130;
}
html.game-friend[data-theme="light"] .username{color:#8f5e0d}
html.game-friend[data-theme="light"] .rating{color:#667886}
html.game-friend[data-theme="light"] .profile-btn{
border-color:#b7812d;
background:#fffdf8;
color:#8a5b12;
}
html.game-friend[data-theme="light"] .hero-icon{
border-color:#b7812d;
background:linear-gradient(180deg,#fffdf8,#f1e5d3);
color:#8f5e0d;
box-shadow:0 14px 30px #72522a2e;
}
html.game-friend[data-theme="light"] .hero h2{color:#8f5e0d}
html.game-friend[data-theme="light"] .hero p{color:#667886}
html.game-friend[data-theme="light"] .friend-card{
border-color:#b7812d;
background:linear-gradient(180deg,#fffdf8,#f1e5d3);
box-shadow:0 22px 60px #5a402c45;
scrollbar-color:#ad9271 #eee1cf;
}
html.game-friend[data-theme="light"] .friend-card::-webkit-scrollbar-track{background:#eee1cf}
html.game-friend[data-theme="light"] .friend-card::-webkit-scrollbar-thumb{background:#ad9271}
html.game-friend[data-theme="light"] .friend-card::-webkit-scrollbar-thumb:hover{background:#b7812d}
html.game-friend[data-theme="light"] .option{
border-color:#c8b89f;
background:#fffaf2;
}
html.game-friend[data-theme="light"] .option-icon{
border-color:#b7812d;
background:#f3e7d5;
color:#8f5e0d;
}
html.game-friend[data-theme="light"] .option h3{color:#8f5e0d}
html.game-friend[data-theme="light"] .option p{color:#667886}
html.game-friend[data-theme="light"] .friend-time-control{
border-color:#c8b89f;
background:#f7ecdc;
}
html.game-friend[data-theme="light"] .friend-time-control label{color:#625548}
html.game-friend[data-theme="light"] .friend-time-control select{
border-color:#b7812d;
background:#fffdf8;
color:#8a5b12;
}
html.game-friend[data-theme="light"] .friend-time-control select option{
background:#fffdf8;
color:#26394b;
}
html.game-friend[data-theme="light"] .code-input,html.game-friend[data-theme="light"] .created-link{
border-color:#bcae9b;
background:#fffdf8;
color:#26394b;
}
html.game-friend[data-theme="light"] .action.join,html.game-friend[data-theme="light"] .copy-btn{
border-color:#b7812d;
background:#f3e7d5;
color:#8a5b12;
}
html.game-friend[data-theme="light"] .status{color:#607685}
html.game-friend[data-theme="light"] .created-game{
border-color:#c8b89f;
background:#fffaf2;
}
html.game-friend[data-theme="light"] .created-label{color:#667886}
html.game-friend[data-theme="light"] .created-id{color:#8f5e0d}
/* replay.html */
html.game-replay,html.game-replay *{box-sizing:border-box}html.game-replay,html.game-replay body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#02070d;color:#f7e8c1}html.game-replay body{min-height:100dvh;background:radial-gradient(circle at 50% 30%,#0d2940 0,#061624 35%,#02070d 72%);overflow-x:hidden}html.game-replay button,html.game-replay select{font:inherit}html.game-replay .page{width:min(1280px,100%);min-height:100dvh;margin:auto;padding:14px 16px 22px}html.game-replay .topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}html.game-replay .back{justify-self:start;min-height:40px;padding:7px 12px;border:1px solid #a87322;border-radius:9px;background:#07131e;color:#f4cd73;font-size:12px;font-weight:900;cursor:pointer}html.game-replay .brand{text-align:center;white-space:nowrap}html.game-replay .brand .crown{display:block;color:#f4cd73;font-size:25px;line-height:20px}html.game-replay .brand h1{margin:0;font:700 38px/1 Georgia,serif;letter-spacing:4px;color:#f4cd73;text-shadow:0 3px 10px #000}html.game-replay .brand p{margin:4px 0 0;color:#dcae4f;font-size:10px;letter-spacing:4px}html.game-replay .lang-wrap{justify-self:end}html.game-replay .lang{min-height:40px;padding:6px 9px;border:1px solid #a87322;border-radius:9px;outline:none;background:#07131e;color:#f4cd73;cursor:pointer}html.game-replay .shell{margin-top:18px;display:grid;grid-template-columns:250px minmax(360px,620px) 250px;justify-content:center;gap:16px;align-items:start}html.game-replay .panel{border:1px solid #a87322;border-radius:16px;background:linear-gradient(180deg,#07131e,#0b1925);box-shadow:0 14px 40px #0008;overflow:hidden}html.game-replay .panel-title{padding:13px 12px 10px;color:#f4cd73;font-size:15px;font-weight:900;text-align:center;border-bottom:1px solid #203847}html.game-replay .moves{max-height:620px;padding:9px 10px 12px;overflow:auto}html.game-replay .move-row{display:grid;grid-template-columns:32px 1fr 1fr;gap:6px;align-items:center;padding:4px 3px;border-top:1px solid #132838;font-family:Consolas,monospace;font-size:13px}html.game-replay .move-row:first-child{border-top:0}html.game-replay .move-no{color:#7895a8}html.game-replay .move{min-height:29px;padding:6px 7px;border:1px solid transparent;border-radius:7px;color:#dce7ef;background:transparent;cursor:pointer;text-align:left}html.game-replay .move:hover{background:#102838}html.game-replay .move.active{border-color:#b77a24;background:#2a2112;color:#f4cd73}html.game-replay .game-column{min-width:0}html.game-replay .player-card{min-height:72px;padding:9px 13px;display:flex;align-items:center;gap:11px;border:1px solid #a87322;border-radius:14px;background:linear-gradient(90deg,#07131e,#0b1925);box-shadow:0 8px 24px #0007}html.game-replay .player-card.bottom{margin-top:8px}html.game-replay .avatar{width:50px;height:50px;flex:0 0 50px;border:1px solid #b77a24;border-radius:11px;background:#06111a;display:flex;align-items:center;justify-content:center;overflow:hidden}html.game-replay .avatar img{width:92%;height:92%;object-fit:contain}html.game-replay .player-info{min-width:0}html.game-replay .player-name{color:#f5f0e7;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.game-replay .player-rating{margin-top:5px;color:#e3b84f;font-size:12px;font-weight:800}html.game-replay .board-wrap{margin-top:8px;padding:6px;border:1px solid #b37a25;border-radius:12px;background:#06131e;box-shadow:0 18px 55px #0009}html.game-replay .board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:1px solid #c18a36;border-radius:4px;overflow:hidden}html.game-replay .square{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}html.game-replay .light{background:#efd18f}html.game-replay .dark{background:#936036}html.game-replay .square.last{background:#d9b85c!important;box-shadow:inset 0 0 0 2px #f2dc91}html.game-replay .piece{width:94%;height:94%;object-fit:contain;display:block;filter:drop-shadow(0 4px 3px #0008);pointer-events:none}html.game-replay .coord{position:absolute;z-index:2;font-size:11px;font-weight:800;line-height:1;pointer-events:none}html.game-replay .file{right:3px;bottom:3px}html.game-replay .rank{left:3px;top:3px}html.game-replay .light .coord{color:#70481f}html.game-replay .dark .coord{color:#f3dca5}html.game-replay .controls{margin-top:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}html.game-replay .control{min-height:44px;border:1px solid #426177;border-radius:9px;background:#102838;color:#dce8ef;font-size:19px;font-weight:900;cursor:pointer}html.game-replay .control:hover:not(:disabled){filter:brightness(1.12)}html.game-replay .control:disabled{opacity:.35;cursor:default}html.game-replay .ply{margin-top:8px;color:#9fb4c3;text-align:center;font-size:12px;font-weight:800}html.game-replay .summary{padding:12px}html.game-replay .result{padding:11px;border:1px solid #294455;border-radius:10px;background:#07131e;text-align:center}html.game-replay .result-main{color:#f4cd73;font-size:18px;font-weight:900}html.game-replay .result-reason{margin-top:5px;color:#8fb3cb;font-size:11px;font-weight:800}html.game-replay .meta-grid{margin-top:10px;display:grid;gap:7px}html.game-replay .meta{padding:9px 10px;border:1px solid #203847;border-radius:9px;background:#07131e}html.game-replay .meta-label{color:#718d9e;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.6px}html.game-replay .meta-value{margin-top:4px;color:#e5edf2;font-size:12px;font-weight:800;overflow-wrap:anywhere}html.game-replay .rating-change{margin-top:10px;padding:10px;border:1px solid #203847;border-radius:9px;background:#07131e}html.game-replay .rating-line{display:flex;justify-content:space-between;gap:8px;padding:4px 0;font-size:11px}html.game-replay .delta.positive{color:#79e3aa}html.game-replay .delta.negative{color:#ff9c9c}html.game-replay .delta.zero{color:#a9bac5}html.game-replay .loading,html.game-replay .error{width:min(620px,94vw);margin:70px auto 0;padding:18px;border:1px solid #294455;border-radius:12px;background:#07131e;text-align:center;color:#9fb4c3}html.game-replay .error{color:#ff9c9c;border-color:#733c3c}@media(max-width:980px){html.game-replay .shell{grid-template-columns:minmax(0,620px);gap:10px}html.game-replay .history-panel{order:2}html.game-replay .game-column{order:1}html.game-replay .info-panel{order:3}html.game-replay .moves{max-height:220px}}@media(max-width:600px){html.game-replay .page{padding:8px}html.game-replay .topbar{grid-template-columns:1fr auto 1fr;gap:5px}html.game-replay .brand .crown,html.game-replay .brand p{display:none}html.game-replay .brand h1{font-size:23px;letter-spacing:2px}html.game-replay .back{min-height:34px;padding:5px 7px;font-size:9px}html.game-replay .lang{min-height:34px;max-width:106px;padding:5px;font-size:10px}html.game-replay .shell{margin-top:10px}html.game-replay .player-card{min-height:56px;padding:6px 8px}html.game-replay .avatar{width:40px;height:40px;flex-basis:40px}html.game-replay .player-name{font-size:12px}html.game-replay .player-rating{font-size:10px}html.game-replay .board-wrap{padding:4px}html.game-replay .control{min-height:40px;font-size:17px}html.game-replay .coord{font-size:8px}}
/* =========================================================
CHESSORA REPLAY — FIXED VIEWPORT
The browser page never scrolls.
Move history and game information scroll only inside
their own panels when content is longer than available.
========================================================= */
html.game-replay,html.game-replay body{
width:100%;
height:100%;
min-height:0;
overflow:hidden!important;
overscroll-behavior:none;
}
html.game-replay body{
position:fixed;
inset:0;
min-height:0!important;
}
html.game-replay .page{
box-sizing:border-box;
width:min(1280px,100%);
height:100dvh;
min-height:0!important;
margin:0 auto;
padding:clamp(7px,1.4vh,14px) clamp(8px,1.3vw,16px);
display:grid;
grid-template-rows:auto minmax(0,1fr);
gap:clamp(7px,1.2vh,12px);
overflow:hidden!important;
}
html.game-replay .topbar{
min-height:0;
}
html.game-replay .brand .crown{
font-size:clamp(18px,2.5vh,25px);
line-height:1;
}
html.game-replay .brand h1{
font-size:clamp(26px,4.3vh,38px);
line-height:1;
}
html.game-replay .brand p{
margin-top:2px;
}
html.game-replay .shell{
height:100%;
min-height:0;
margin-top:0!important;
display:grid;
grid-template-columns:250px minmax(320px,620px) 250px;
justify-content:center;
gap:clamp(8px,1.2vw,16px);
align-items:stretch;
overflow:hidden;
}
html.game-replay .panel,html.game-replay .game-column{
min-height:0;
height:100%;
}
html.game-replay .panel{
display:flex;
flex-direction:column;
}
html.game-replay .panel-title{
flex:0 0 auto;
padding:10px 10px 8px;
}
html.game-replay .moves{
max-height:none!important;
min-height:0;
flex:1 1 auto;
padding:8px 9px 10px;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:#496171 #07131e;
}
html.game-replay .info-panel .summary{
min-height:0;
flex:1 1 auto;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:#496171 #07131e;
}
html.game-replay .moves::-webkit-scrollbar,html.game-replay .info-panel .summary::-webkit-scrollbar{
width:7px;
}
html.game-replay .moves::-webkit-scrollbar-track,html.game-replay .info-panel .summary::-webkit-scrollbar-track{
background:#07131e;
border-radius:99px;
}
html.game-replay .moves::-webkit-scrollbar-thumb,html.game-replay .info-panel .summary::-webkit-scrollbar-thumb{
background:#496171;
border-radius:99px;
}
html.game-replay .moves::-webkit-scrollbar-thumb:hover,html.game-replay .info-panel .summary::-webkit-scrollbar-thumb:hover{
background:#a87322;
}
html.game-replay .game-column{
display:grid;
grid-template-rows:auto minmax(0,1fr) auto auto auto;
gap:6px;
overflow:hidden;
}
html.game-replay .player-card{
min-height:0!important;
height:clamp(54px,8.5vh,72px);
padding:7px 11px;
}
html.game-replay .player-card.bottom{
margin-top:0!important;
}
html.game-replay .avatar{
width:clamp(40px,6.2vh,50px);
height:clamp(40px,6.2vh,50px);
flex-basis:clamp(40px,6.2vh,50px);
}
html.game-replay .player-name{
font-size:clamp(12px,2vh,15px);
}
html.game-replay .player-rating{
margin-top:3px;
font-size:clamp(10px,1.6vh,12px);
}
html.game-replay .board-wrap{
min-height:0;
height:100%;
margin-top:0!important;
padding:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
html.game-replay .board{
width:auto!important;
height:100%!important;
max-width:100%;
max-height:100%;
aspect-ratio:1;
flex:0 0 auto;
}
html.game-replay .controls{
margin-top:0!important;
gap:6px;
}
html.game-replay .control{
min-height:0!important;
height:clamp(34px,5.4vh,44px);
}
html.game-replay .ply{
margin-top:0!important;
min-height:15px;
font-size:11px;
}
html.game-replay .loading,html.game-replay .error{
align-self:center;
width:min(620px,94vw);
margin:0 auto!important;
}
/* Compact desktop / laptop screens */
@media(min-width:981px) and (max-height:760px){
html.game-replay .page{
padding:6px 10px;
gap:6px;
}
html.game-replay .back,html.game-replay .lang{
min-height:34px;
height:34px;
}
html.game-replay .brand .crown,html.game-replay .brand p{
display:none;
}
html.game-replay .brand h1{
font-size:27px;
}
html.game-replay .shell{
grid-template-columns:220px minmax(300px,560px) 220px;
gap:8px;
}
html.game-replay .panel-title{
padding:7px 8px 6px;
font-size:12px;
}
html.game-replay .moves{
padding:6px 7px;
}
html.game-replay .move-row{
grid-template-columns:27px 1fr 1fr;
gap:4px;
padding:2px;
font-size:11px;
}
html.game-replay .move{
min-height:24px;
padding:4px 5px;
}
html.game-replay .summary{
padding:8px!important;
}
html.game-replay .result{
padding:7px;
}
html.game-replay .result-main{
font-size:15px;
}
html.game-replay .meta-grid{
margin-top:7px;
gap:5px;
}
html.game-replay .meta{
padding:6px 7px;
}
html.game-replay .rating-change{
margin-top:7px;
padding:7px;
}
html.game-replay .player-card{
height:48px;
padding:5px 8px;
}
html.game-replay .avatar{
width:36px;
height:36px;
flex-basis:36px;
}
html.game-replay .controls{
gap:4px;
}
html.game-replay .control{
height:32px;
font-size:16px;
}
}
/* Tablet / mobile:
game remains fully visible at the top.
History and info become two internal panels below it. */
@media(max-width:980px){
html.game-replay .page{
padding:
max(6px,env(safe-area-inset-top))
7px
max(6px,env(safe-area-inset-bottom));
gap:6px;
}
html.game-replay .topbar{
gap:5px;
}
html.game-replay .back{
min-height:34px;
padding:5px 7px;
font-size:9px;
}
html.game-replay .lang{
min-height:34px;
max-width:106px;
padding:5px;
font-size:9px;
}
html.game-replay .brand .crown,html.game-replay .brand p{
display:none;
}
html.game-replay .brand h1{
font-size:22px;
letter-spacing:1.8px;
}
html.game-replay .shell{
width:100%;
height:100%;
min-height:0;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-rows:minmax(0,1fr) clamp(105px,17vh,140px);
gap:6px;
align-items:stretch;
}
html.game-replay .game-column{
grid-column:1 / -1;
grid-row:1;
min-height:0;
height:100%;
order:initial;
}
html.game-replay .history-panel{
grid-column:1;
grid-row:2;
min-height:0;
height:100%;
order:initial;
}
html.game-replay .info-panel{
grid-column:2;
grid-row:2;
min-height:0;
height:100%;
order:initial;
}
html.game-replay .panel-title{
padding:6px 5px 5px;
font-size:10px;
}
html.game-replay .moves{
max-height:none!important;
padding:4px 5px 6px;
}
html.game-replay .move-row{
grid-template-columns:23px 1fr 1fr;
gap:3px;
padding:1px;
font-size:9px;
}
html.game-replay .move{
min-height:22px;
padding:3px 4px;
font-size:9px;
}
html.game-replay .info-panel .summary{
padding:5px;
}
html.game-replay .result{
padding:5px;
}
html.game-replay .result-main{
font-size:12px;
}
html.game-replay .result-reason{
margin-top:2px;
font-size:8px;
}
html.game-replay .meta-grid{
margin-top:5px;
gap:4px;
}
html.game-replay .meta{
padding:4px 5px;
}
html.game-replay .meta-label{
font-size:7px;
}
html.game-replay .meta-value{
margin-top:2px;
font-size:9px;
}
html.game-replay .rating-change{
margin-top:5px;
padding:5px;
}
html.game-replay .rating-line{
padding:2px 0;
font-size:8px;
}
html.game-replay .player-card{
height:clamp(45px,7vh,56px);
padding:5px 7px;
}
html.game-replay .avatar{
width:36px;
height:36px;
flex-basis:36px;
}
html.game-replay .player-name{
font-size:11px;
}
html.game-replay .player-rating{
font-size:9px;
}
html.game-replay .board-wrap{
padding:3px;
}
html.game-replay .control{
height:34px;
font-size:15px;
}
html.game-replay .ply{
font-size:9px;
min-height:12px;
}
}
@media(max-width:600px){
html.game-replay .brand h1{
font-size:20px;
letter-spacing:1.4px;
}
html.game-replay .shell{
grid-template-rows:minmax(0,1fr) clamp(95px,15vh,125px);
}
html.game-replay .panel{
border-radius:10px;
}
html.game-replay .player-card{
border-radius:10px;
}
html.game-replay .board-wrap{
border-radius:9px;
}
html.game-replay .coord{
font-size:7px;
}
html.game-replay .file{
right:2px;
bottom:2px;
}
html.game-replay .rank{
left:2px;
top:2px;
}
}
/* Very short phones / landscape-like viewports */
@media(max-width:980px) and (max-height:680px){
html.game-replay .shell{
grid-template-rows:minmax(0,1fr) 86px;
gap:4px;
}
html.game-replay .player-card{
height:40px;
}
html.game-replay .avatar{
width:30px;
height:30px;
flex-basis:30px;
}
html.game-replay .player-name{
font-size:10px;
}
html.game-replay .player-rating{
display:none;
}
html.game-replay .controls{
gap:3px;
}
html.game-replay .control{
height:29px;
font-size:13px;
}
html.game-replay .ply{
display:none;
}
html.game-replay .panel-title{
padding:4px;
font-size:8px;
}
html.game-replay .moves{
padding:3px 4px;
}
html.game-replay .move-row{
font-size:8px;
}
html.game-replay .move{
min-height:19px;
padding:2px 3px;
}
html.game-replay .info-panel .summary{
padding:4px;
}
html.game-replay .result-main{
font-size:10px;
}
html.game-replay .meta{
padding:3px 4px;
}
html.game-replay .rating-change{
padding:4px;
}
}
/* CHESSORA REPLAY — LIGHT THEME (visual overrides only) */
html.game-replay[data-theme="light"]{color-scheme:light}
html.game-replay[data-theme="light"],html.game-replay[data-theme="light"] body{
background:#eadfcd;
color:#25384a;
}
html.game-replay[data-theme="light"] body{
background:radial-gradient(circle at 50% 30%,#fffdf8 0,#f3eadc 44%,#dfcfb7 100%);
}
html.game-replay[data-theme="light"] .back,html.game-replay[data-theme="light"] .lang{
border-color:#b7812d;
background:#fffaf2;
color:#8a5b12;
box-shadow:0 5px 18px #72522a24;
}
html.game-replay[data-theme="light"] .lang option{
background:#fffdf8;
color:#26394b;
}
html.game-replay[data-theme="light"] .brand .crown,html.game-replay[data-theme="light"] .brand h1{
color:#9b670f;
text-shadow:0 2px 8px #ffffffa8;
}
html.game-replay[data-theme="light"] .brand p{color:#a36c12}
html.game-replay[data-theme="light"] .panel{
border-color:#b7812d;
background:linear-gradient(180deg,#fffdf8,#f1e5d3);
box-shadow:0 14px 40px #72522a2e;
}
html.game-replay[data-theme="light"] .panel-title{
border-bottom-color:#d8c6ac;
color:#8f5e0d;
}
html.game-replay[data-theme="light"] .move-row{border-top-color:#e2d5c3}
html.game-replay[data-theme="light"] .move-no{color:#71828e}
html.game-replay[data-theme="light"] .move{color:#26394b}
html.game-replay[data-theme="light"] .move:hover{background:#f3e7d5}
html.game-replay[data-theme="light"] .move.active{
border-color:#b7812d;
background:#fff1ce;
color:#8f5e0d;
}
html.game-replay[data-theme="light"] .player-card{
border-color:#b7812d;
background:linear-gradient(90deg,#fffaf2,#f3e7d5);
box-shadow:0 8px 24px #72522a24;
}
html.game-replay[data-theme="light"] .avatar{
border-color:#b7812d;
background:#fffdf8;
}
html.game-replay[data-theme="light"] .player-name{color:#26394b}
html.game-replay[data-theme="light"] .player-rating{color:#8f5e0d}
html.game-replay[data-theme="light"] .board-wrap{
border-color:#b7812d;
background:#fff7e9;
box-shadow:0 18px 55px #72522a30;
}
html.game-replay[data-theme="light"] .control{
border-color:#bcae9b;
background:#fffaf2;
color:#425564;
}
html.game-replay[data-theme="light"] .control:hover{border-color:#b7812d}
html.game-replay[data-theme="light"] .control:disabled{
opacity:.48;
color:#82909a;
}
html.game-replay[data-theme="light"] .ply{color:#667886}
html.game-replay[data-theme="light"] .result,html.game-replay[data-theme="light"] .meta,html.game-replay[data-theme="light"] .rating-change{
border-color:#d8c6ac;
background:#fffaf2;
}
html.game-replay[data-theme="light"] .result-main{color:#8f5e0d}
html.game-replay[data-theme="light"] .result-reason,html.game-replay[data-theme="light"] .meta-label{color:#667886}
html.game-replay[data-theme="light"] .meta-value,html.game-replay[data-theme="light"] .rating-line{color:#26394b}
html.game-replay[data-theme="light"] .delta.positive{color:#176b31}
html.game-replay[data-theme="light"] .delta.negative{color:#a12c2c}
html.game-replay[data-theme="light"] .delta.zero{color:#4c5f6d}
html.game-replay[data-theme="light"] .loading,html.game-replay[data-theme="light"] .error{
border-color:#c8b89f;
background:#fffaf2;
color:#667886;
box-shadow:0 10px 30px #72522a20;
}
html.game-replay[data-theme="light"] .error{
border-color:#d59696;
background:#fff0f0;
color:#a12c2c;
}
html.game-replay[data-theme="light"] .moves,html.game-replay[data-theme="light"] .info-panel .summary{
scrollbar-color:#ad9271 #eee1cf;
}
html.game-replay[data-theme="light"] .moves::-webkit-scrollbar-track,html.game-replay[data-theme="light"] .info-panel .summary::-webkit-scrollbar-track{background:#eee1cf}
html.game-replay[data-theme="light"] .moves::-webkit-scrollbar-thumb,html.game-replay[data-theme="light"] .info-panel .summary::-webkit-scrollbar-thumb{background:#ad9271}
html.game-replay[data-theme="light"] .moves::-webkit-scrollbar-thumb:hover,html.game-replay[data-theme="light"] .info-panel .summary::-webkit-scrollbar-thumb:hover{background:#b7812d}
/* resume.html */
html.game-resume,html.game-resume *{box-sizing:border-box}
html.game-resume body{
margin:0;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#07131e;
color:#f7e8c1;
font-family:Arial,Helvetica,sans-serif;
}
html.game-resume .box{
width:min(560px,92vw);
padding:28px;
border:1px solid #b37a25;
border-radius:18px;
background:#0b1d2b;
text-align:center;
box-shadow:0 18px 50px #0008;
}
html.game-resume h1{margin:0 0 18px;font-size:24px}
html.game-resume .status{
margin:16px 0;
padding:14px;
border-radius:12px;
background:#081722;
font-size:18px;
font-weight:700;
}
html.game-resume .good{color:#79df97}
html.game-resume .bad{color:#ff8c8c}
html.game-resume .meta{
margin-top:18px;
color:#9fb4c3;
font-size:14px;
line-height:1.6;
word-break:break-word;
}
html.game-resume code{color:#f4cd73}
/* CHESSORA RESUME — LIGHT THEME (visual overrides only) */
html.game-resume[data-theme="light"]{color-scheme:light}
html.game-resume[data-theme="light"] body{
background:radial-gradient(circle at 50% 35%,#fffdf8 0,#f3eadc 44%,#dfcfb7 100%);
color:#25384a;
}
html.game-resume[data-theme="light"] .box{
border-color:#b7812d;
background:linear-gradient(180deg,#fffdf8,#f1e5d3);
box-shadow:0 18px 50px #5a402c45;
}
html.game-resume[data-theme="light"] h1{color:#8f5e0d}
html.game-resume[data-theme="light"] .status{
border:1px solid #d8c6ac;
background:#fffaf2;
color:#26394b;
}
html.game-resume[data-theme="light"] .good{color:#176b31}
html.game-resume[data-theme="light"] .bad{color:#a12c2c}
html.game-resume[data-theme="light"] .meta{color:#667886}
html.game-resume[data-theme="light"] code{color:#8f5e0d}