/* profile.html */
html.profile-page,html.profile-page *{box-sizing:border-box}
html.profile-page,html.profile-page body{
 margin:0;
 min-height:100%;
 font-family:Arial,Helvetica,sans-serif;
 background:#02070d;
 color:#f7e8c1;
}
html.profile-page body{
 min-height:100dvh;
 overflow-x:hidden;
 background:
  radial-gradient(circle at 50% 28%,#0d2940 0,#061624 35%,#02070d 72%);
}
html.profile-page .page{
 min-height:100dvh;
 width:100%;
 padding:18px;
 display:flex;
 flex-direction:column;
 align-items:center;
}
html.profile-page .topbar{
 width:min(1180px,100%);
 display:grid;
 grid-template-columns:1fr auto 1fr;
 align-items:center;
 gap:16px;
}
html.profile-page .back-btn,html.profile-page .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.profile-page .back-btn{
 justify-self:start;
 padding:0 14px;
 cursor:pointer;
}
html.profile-page .lang-wrap{justify-self:end}
html.profile-page .lang-select{
 padding:0 11px;
 outline:none;
 cursor:pointer;
}
html.profile-page .brand{
 text-align:center;
 white-space:nowrap;
}
html.profile-page .brand .crown{
 display:block;
 color:#f4cd73;
 font-size:27px;
 line-height:22px;
 height:22px;
}
html.profile-page .brand h1{
 margin:0;
 font-family:Georgia,serif;
 font-size:44px;
 letter-spacing:4px;
 color:#f4cd73;
 text-shadow:0 3px 10px #000;
}
html.profile-page .brand p{
 margin:3px 0 0;
 font-size:11px;
 letter-spacing:4px;
 color:#dcae4f;
}
html.profile-page .brand p:before,html.profile-page .brand p:after{
 content:"◆";
 font-size:6px;
 margin:0 10px;
}

html.profile-page .profile-card{
 width:min(760px,100%);
 margin:32px auto 0;
 padding:28px;
 border:1px solid #a87322;
 border-radius:22px;
 background:linear-gradient(180deg,#0b1c2a,#06111b);
 box-shadow:0 24px 70px #000b,0 0 30px #b77a2426;
}

html.profile-page .profile-head{
 display:grid;
 grid-template-columns:auto 1fr auto;
 gap:20px;
 align-items:center;
}
html.profile-page .avatar{
 width:104px;
 height:104px;
 border-radius:50%;
 border:2px solid #b57b25;
 background:linear-gradient(180deg,#2c6ca3,#123d5f);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:42px;
 font-weight:900;
 color:#fff;
 box-shadow:0 12px 28px #0008;
 overflow:hidden;
}
html.profile-page .avatar img{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}
html.profile-page .identity{
 min-width:0;
}
html.profile-page .username{
 margin:0;
 font-family:Georgia,serif;
 color:#f4cd73;
 font-size:32px;
 line-height:1.1;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
html.profile-page .meta{
 margin-top:8px;
 color:#9fb0bc;
 font-size:13px;
}

html.profile-page .username-edit-button{
 margin-top:10px;
 min-height:34px;
 padding:0 12px;
 border:1px solid #3b586b;
 border-radius:9px;
 background:#07131e;
 color:#c9d6de;
 font-size:11px;
 font-weight:900;
 cursor:pointer;
}
html.profile-page .username-edit-button:hover{
 border-color:#a87322;
 color:#f4cd73;
}
html.profile-page .username-actions{
 display:flex;
 flex-wrap:wrap;
 gap:7px;
 margin-top:8px;
}
html.profile-page .username-actions .username-edit-button,html.profile-page .username-actions .delete-account-button{
 min-height:30px;
 margin-top:0;
 padding:0 10px;
 border-radius:8px;
 font-size:10px;
 font-weight:900;
 cursor:pointer;
}
html.profile-page .username-actions .delete-account-button{
 border:1px solid #713737;
 background:#241515;
 color:#d99a9a;
}
html.profile-page .username-actions .delete-account-button:hover,html.profile-page .username-actions .delete-account-button:focus-visible{
 border-color:#b34e4e;
 background:#4a2323;
 color:#fff;
 outline:none;
}
html.profile-page .username-editor{
 margin-top:10px;
 padding:11px;
 border:1px solid #2d4a5d;
 border-radius:11px;
 background:#07131e;
}
html.profile-page .username-editor[hidden]{display:none}
html.profile-page .username-input{
 width:100%;
 height:40px;
 padding:0 11px;
 border:1px solid #35546a;
 border-radius:9px;
 outline:none;
 background:#0b1d2a;
 color:#edf3f7;
 font:700 13px/1 Arial,sans-serif;
}
html.profile-page .username-input:focus{
 border-color:#a87322;
 box-shadow:0 0 0 2px rgba(168,115,34,.14);
}
html.profile-page .username-rule{
 margin-top:7px;
 color:#7f95a4;
 font-size:10px;
 line-height:1.35;
}
html.profile-page .username-status{
 min-height:16px;
 margin-top:7px;
 font-size:11px;
 font-weight:800;
 line-height:1.35;
}
html.profile-page .username-status.error{
 color:#ff8d8d;
}
html.profile-page .username-status.success{
 color:#79e3aa;
}
html.profile-page .username-status:empty{
 min-height:0;
 margin-top:0;
}
html.profile-page .username-editor-actions{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:7px;
 margin-top:9px;
}
html.profile-page .username-save,html.profile-page .username-cancel{
 min-height:36px;
 border-radius:9px;
 font-size:11px;
 font-weight:900;
 cursor:pointer;
}
html.profile-page .username-save{
 border:1px solid #a87322;
 background:linear-gradient(#a87322,#76501d);
 color:#fff;
}
html.profile-page .username-cancel{
 border:1px solid #3b586b;
 background:#0b1d2a;
 color:#c5d2da;
}
html.profile-page .username-save:disabled,html.profile-page .username-cancel:disabled,html.profile-page .username-edit-button:disabled{
 opacity:.55;
 cursor:default;
}
html.profile-page .rating-box{
 min-width:140px;
 padding:14px 18px;
 border:1px solid #3b586b;
 border-radius:14px;
 background:#07131e;
 text-align:center;
}
html.profile-page .rating-label{
 color:#8ea2b0;
 font-size:11px;
 font-weight:800;
 letter-spacing:.8px;
 text-transform:uppercase;
}
html.profile-page .rating-value{
 margin-top:4px;
 color:#f4cd73;
 font-size:30px;
 font-weight:900;
}

html.profile-page .divider{
 height:1px;
 background:#213847;
 margin:24px 0;
}

html.profile-page .info-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:12px;
}
html.profile-page .info-card{
 min-height:84px;
 padding:14px;
 border:1px solid #243d4e;
 border-radius:12px;
 background:#07131e;
}
html.profile-page .info-label{
 color:#8297a6;
 font-size:11px;
 font-weight:800;
 text-transform:uppercase;
 letter-spacing:.7px;
}
html.profile-page .info-value{
 margin-top:7px;
 color:#e8eef2;
 font-size:14px;
 line-height:1.4;
 overflow-wrap:anywhere;
}

html.profile-page .stats-title{
 margin:0 0 12px;
 color:#f4cd73;
 font-size:18px;
 font-weight:900;
 text-align:center;
}
html.profile-page .stats{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:10px;
}
html.profile-page .stat{
 min-height:86px;
 padding:13px 8px;
 border:1px solid #243d4e;
 border-radius:12px;
 background:#07131e;
 text-align:center;
}
html.profile-page .stat strong{
 display:block;
 color:#f4cd73;
 font-size:26px;
 line-height:1;
}
html.profile-page .stat span{
 display:block;
 margin-top:8px;
 color:#8da0ad;
 font-size:11px;
}






html.profile-page .game-invites-section{margin-top:24px}
html.profile-page .game-invites-title{
 margin:0 0 12px;
 color:#f4cd73;
 font-size:18px;
 font-weight:900;
 text-align:center
}
html.profile-page .game-invites-list{
 display:flex;
 flex-direction:column;
 gap:9px
}
html.profile-page .game-invite-empty{
 padding:18px 14px;
 border:1px solid #243d4e;
 border-radius:12px;
 background:#07131e;
 color:#8da0ad;
 text-align:center;
 font-size:13px
}
html.profile-page .game-invite-item{
 display:grid;
 grid-template-columns:42px minmax(0,1fr) auto;
 gap:12px;
 align-items:center;
 padding:11px 14px;
 border:1px solid #a87322;
 border-radius:12px;
 background:#07131e
}
html.profile-page .game-invite-avatar{
 width:42px;
 height:42px;
 display:flex;
 align-items:center;
 justify-content:center;
 border:1px solid #a87322;
 border-radius:10px;
 background:#0b1d2a;
 color:#f4cd73;
 font-family:Georgia,serif;
 font-size:20px;
 font-weight:900
}
html.profile-page .game-invite-main{min-width:0}
html.profile-page .game-invite-name{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 color:#edf3f7;
 font-size:14px;
 font-weight:900
}
html.profile-page .game-invite-meta{
 display:flex;
 flex-wrap:wrap;
 gap:7px 12px;
 margin-top:5px;
 color:#9db1bd;
 font-size:10px
}
html.profile-page .game-invite-rating{
 color:#e3b84f;
 font-weight:900
}
html.profile-page .game-invite-time{
 color:#f4cd73;
 font-weight:900
}
html.profile-page .game-invite-actions{
 display:flex;
 gap:7px;
 align-items:center
}
html.profile-page .game-invite-actions button{
 min-height:36px;
 padding:7px 11px;
 border-radius:8px;
 font-size:11px;
 font-weight:900;
 cursor:pointer;
 white-space:nowrap
}
html.profile-page .game-invite-accept{
 border:1px solid #2b86ff;
 background:linear-gradient(#1467d8,#0750b4);
 color:#fff
}
html.profile-page .game-invite-decline{
 border:1px solid #5c7180;
 background:#10202b;
 color:#cbd8e0
}
html.profile-page .game-invite-actions button:disabled{
 opacity:.55;
 cursor:default
}

html.profile-page .friend-search-section{margin-top:24px}
html.profile-page .friend-search-title{
 margin:0 0 12px;
 color:#f4cd73;
 font-size:18px;
 font-weight:900;
 text-align:center
}
html.profile-page .friend-search-bar{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 gap:8px
}
html.profile-page .friend-search-input{
 width:100%;
 min-height:42px;
 padding:9px 12px;
 border:1px solid #426177;
 border-radius:9px;
 outline:none;
 background:#02070d;
 color:#edf3f7;
 font-size:13px
}
html.profile-page .friend-search-input:focus{
 border-color:#a87322;
 box-shadow:0 0 0 2px #a8732226
}
html.profile-page .friend-search-button{
 min-height:42px;
 padding:8px 15px;
 border:1px solid #2b86ff;
 border-radius:9px;
 background:linear-gradient(#1467d8,#0750b4);
 color:#fff;
 font-size:12px;
 font-weight:900;
 cursor:pointer
}
html.profile-page .friend-search-button:disabled{opacity:.55;cursor:default}
html.profile-page .friend-search-results{
 display:flex;
 flex-direction:column;
 gap:9px;
 margin-top:10px
}
html.profile-page .friend-search-empty{
 padding:15px 13px;
 border:1px solid #243d4e;
 border-radius:11px;
 background:#07131e;
 color:#8da0ad;
 text-align:center;
 font-size:12px
}
html.profile-page .friend-search-item{
 display:grid;
 grid-template-columns:42px minmax(0,1fr) auto;
 gap:12px;
 align-items:center;
 padding:10px 12px;
 border:1px solid #243d4e;
 border-radius:11px;
 background:#07131e
}
html.profile-page .friend-search-avatar{
 width:42px;height:42px;
 display:flex;align-items:center;justify-content:center;
 border:1px solid #a87322;
 border-radius:10px;
 background:#0b1d2a;
 color:#f4cd73;
 font-family:Georgia,serif;
 font-size:20px;
 font-weight:900
}
html.profile-page .friend-search-main{min-width:0}
html.profile-page .friend-search-name{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 color:#edf3f7;
 font-size:14px;
 font-weight:900
}
html.profile-page .friend-search-rating{
 margin-top:4px;
 color:#e3b84f;
 font-size:11px;
 font-weight:800
}
html.profile-page .friend-search-action{
 min-height:36px;
 min-width:116px;
 padding:7px 10px;
 border-radius:8px;
 font-size:11px;
 font-weight:900;
 white-space:nowrap
}
html.profile-page .friend-search-action.add{
 border:1px solid #2b86ff;
 background:linear-gradient(#1467d8,#0750b4);
 color:#fff;
 cursor:pointer
}
html.profile-page .friend-search-action.status{
 border:1px solid #426177;
 background:#10202b;
 color:#a9bdca;
 cursor:default
}
html.profile-page .friend-search-action.received{
 border-color:#a87322;
 color:#f4cd73
}
html.profile-page .friend-search-action.friends{
 border-color:#27664a;
 background:#0b2b20;
 color:#79e3aa
}

html.profile-page .friend-requests-section{margin-top:24px}
html.profile-page .friend-requests-title{
 margin:0 0 12px;
 color:#f4cd73;
 font-size:18px;
 font-weight:900;
 text-align:center
}
html.profile-page .friend-requests-list{
 display:flex;
 flex-direction:column;
 gap:9px
}
html.profile-page .friend-request-empty{
 padding:18px 14px;
 border:1px solid #243d4e;
 border-radius:12px;
 background:#07131e;
 color:#8da0ad;
 text-align:center;
 font-size:13px
}
html.profile-page .friend-request-item{
 display:grid;
 grid-template-columns:42px minmax(0,1fr) auto;
 gap:12px;
 align-items:center;
 padding:11px 14px;
 border:1px solid #243d4e;
 border-radius:12px;
 background:#07131e
}
html.profile-page .friend-request-avatar{
 width:42px;height:42px;
 display:flex;align-items:center;justify-content:center;
 border:1px solid #a87322;
 border-radius:10px;
 background:#0b1d2a;
 color:#f4cd73;
 font-family:Georgia,serif;
 font-size:20px;
 font-weight:900
}
html.profile-page .friend-request-main{min-width:0}
html.profile-page .friend-request-name{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 color:#edf3f7;
 font-size:14px;
 font-weight:900
}
html.profile-page .friend-request-rating{
 margin-top:4px;
 color:#e3b84f;
 font-size:11px;
 font-weight:800
}
html.profile-page .friend-request-actions{
 display:flex;
 gap:7px;
 align-items:center
}
html.profile-page .friend-request-actions button{
 min-height:36px;
 padding:7px 10px;
 border-radius:8px;
 font-size:11px;
 font-weight:900;
 cursor:pointer
}
html.profile-page .friend-request-accept{
 border:1px solid #2b86ff;
 background:linear-gradient(#1467d8,#0750b4);
 color:#fff
}
html.profile-page .friend-request-decline{
 border:1px solid #5c7180;
 background:#10202b;
 color:#cbd8e0
}
html.profile-page .friend-request-actions button:disabled{
 opacity:.55;
 cursor:default
}


html.profile-page .friends-game-tools{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 margin:0 0 12px
}
html.profile-page .friends-game-label{
 color:#8fa5b3;
 font-size:11px;
 font-weight:800
}
html.profile-page .friends-game-time{
 min-height:36px;
 padding:6px 9px;
 border:1px solid #426177;
 border-radius:8px;
 outline:none;
 background:#02070d;
 color:#edf3f7;
 font-size:12px;
 font-weight:800;
 cursor:pointer
}
html.profile-page .friends-game-time:focus{
 border-color:#a87322
}
html.profile-page .friend-invite-button{
 flex:0 0 auto;
 min-height:36px;
 min-width:136px;
 padding:7px 10px;
 border:1px solid #a87322;
 border-radius:8px;
 background:linear-gradient(#8f5d19,#65400e);
 color:#fff0c5;
 font-size:11px;
 font-weight:900;
 white-space:nowrap;
 cursor:pointer
}
html.profile-page .friend-invite-button:hover{
 border-color:#e0ad52
}
html.profile-page .friend-invite-button:disabled{
 opacity:.58;
 cursor:default
}
html.profile-page .friend-invite-button.goto{
 border-color:#2b86ff;
 background:linear-gradient(#1467d8,#0750b4);
 color:#fff
}
html.profile-page .friend-invite-error{
 margin-top:7px;
 color:#ff9c9c;
 font-size:10px;
 text-align:center
}

html.profile-page .friends-section{margin-top:24px}
html.profile-page .friends-title{
 margin:0 0 12px;
 color:#f4cd73;
 font-size:18px;
 font-weight:900;
 text-align:center
}
html.profile-page .friends-list{
 display:flex;
 flex-direction:column;
 gap:9px
}
html.profile-page .friends-empty{
 padding:18px 14px;
 border:1px solid #243d4e;
 border-radius:12px;
 background:#07131e;
 color:#8da0ad;
 text-align:center;
 font-size:13px
}
html.profile-page .friend-item{
 display:flex;
 align-items:center;
 gap:12px;
 padding:11px 14px;
 border:1px solid #243d4e;
 border-radius:12px;
 background:#07131e
}
html.profile-page .friend-avatar{
 width:42px;
 height:42px;
 flex:0 0 42px;
 display:flex;
 align-items:center;
 justify-content:center;
 border:1px solid #a87322;
 border-radius:10px;
 background:#0b1d2a;
 color:#f4cd73;
 font-family:Georgia,serif;
 font-size:20px;
 font-weight:900
}
html.profile-page .friend-main{
 min-width:0;
 flex:1 1 auto
}
html.profile-page .friend-name{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 color:#edf3f7;
 font-size:14px;
 font-weight:900
}
html.profile-page .friend-since{
 margin-top:4px;
 color:#78909f;
 font-size:10px
}
html.profile-page .friend-rating{
 flex:0 0 auto;
 color:#e3b84f;
 font-size:14px;
 font-weight:900;
 white-space:nowrap
}


html.profile-page .public-profile-actions{
 margin-top:18px;
 padding:14px;
 border:1px solid #243d4e;
 border-radius:12px;
 background:#07131e;
}
html.profile-page .public-profile-actions[hidden]{display:none}
html.profile-page .public-profile-actions-grid{
 display:grid;
 grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);
 gap:12px;
 align-items:end;
}
html.profile-page .public-friend-button,html.profile-page .public-invite-button{
 min-height:40px;
 border-radius:9px;
 font-size:11px;
 font-weight:900;
 cursor:pointer;
}
html.profile-page .public-friend-button{
 width:100%;
 max-width:220px;
 justify-self:start;
 border:1px solid #2b86ff;
 background:linear-gradient(#1467d8,#0750b4);
 color:#fff;
}
html.profile-page .public-friend-button.status{
 border-color:#496271;
 background:#10202b;
 color:#cbd8e0;
}
html.profile-page .public-friend-button.remove{
 border-color:#8a3f45;
 background:linear-gradient(#7d3037,#5c2026);
 color:#ffd7d9;
}
html.profile-page .public-friend-button.remove:hover{
 border-color:#b85a63;
}
html.profile-page .public-friend-button.cancel-request{
 border-color:#8a6a2f;
 background:linear-gradient(#71531f,#513912);
 color:#ffe6a8;
}
html.profile-page .public-friend-button.cancel-request:hover{
 border-color:#c29036;
}
html.profile-page .public-game-time-control{
 grid-column:2;
 width:180px;
 justify-self:center;
}
html.profile-page .public-game-time-label{
 display:block;
 margin:0 0 6px;
 color:#8fa5b3;
 font-size:11px;
 font-weight:800;
 text-align:center;
}
html.profile-page .public-invite-wrap{
 display:contents;
}
html.profile-page .public-invite-wrap[hidden]{
 display:none!important;
}
html.profile-page .public-game-time{
 width:100%;
 min-height:40px;
 padding:6px 9px;
 border:1px solid #426177;
 border-radius:9px;
 outline:none;
 background:#02070d;
 color:#edf3f7;
 font-size:11px;
 font-weight:800;
}
html.profile-page .public-invite-button{
 grid-column:3;
 width:100%;
 max-width:180px;
 justify-self:end;
 padding:7px 12px;
 border:1px solid #a87322;
 background:linear-gradient(#8f5d19,#65400e);
 color:#fff0c5;
}
html.profile-page .public-invite-button.goto{
 border-color:#2b86ff;
 background:linear-gradient(#1467d8,#0750b4);
 color:#fff;
}
html.profile-page .public-friend-button:disabled,html.profile-page .public-invite-button:disabled{
 opacity:.62;
 cursor:default;
}
html.profile-page .public-profile-message{
 min-height:14px;
 margin-top:8px;
 color:#ff9c9c;
 font-size:10px;
 text-align:center;
}
html.profile-page .profile-card.public-view .self-only{
 display:none!important;
}
html.profile-page .profile-card.public-view #editUsernameBtn,html.profile-page .profile-card.public-view #usernameEditor{
 display:none!important;
}
html.profile-page .clickable-profile{
 cursor:pointer;
}
html.profile-page .clickable-profile:hover{
 color:#f4cd73!important;
}
@media(max-width:700px){
 html.profile-page .public-profile-actions-grid{
  grid-template-columns:1fr;
  gap:10px;
  align-items:stretch;
 }
 html.profile-page .public-friend-button,html.profile-page .public-invite-button{
  grid-column:1;
  width:100%;
  max-width:none;
  justify-self:stretch;
 }
 html.profile-page .public-game-time-control{
  grid-column:1;
  width:100%;
  justify-self:stretch;
 }
}

html.profile-page .history-section{margin-top:24px}
html.profile-page .history-title{
 margin:0 0 12px;color:#f4cd73;font-size:18px;font-weight:900;text-align:center
}
html.profile-page .history-list{display:flex;flex-direction:column;gap:9px}
html.profile-page .history-empty{
 padding:18px 14px;border:1px solid #243d4e;border-radius:12px;
 background:#07131e;color:#8da0ad;text-align:center;font-size:13px
}
html.profile-page .history-item{
 display:grid;grid-template-columns:108px minmax(0,1fr) auto;
 align-items:center;gap:12px;padding:12px 14px;
 border:1px solid #243d4e;border-radius:12px;background:#07131e;
 cursor:pointer;
 transition:border-color .15s ease,background .15s ease,transform .15s ease
}
html.profile-page .history-item:hover{
 border-color:#a87322;
 background:#0a1925;
 transform:translateY(-1px)
}
html.profile-page .history-item:focus-visible{
 outline:2px solid #f4cd73;
 outline-offset:2px;
 border-color:#a87322
}
html.profile-page .history-outcome{
 min-height:34px;display:flex;align-items:center;justify-content:center;
 border-radius:9px;font-size:11px;font-weight:900;letter-spacing:.4px;text-transform:uppercase
}
html.profile-page .history-outcome.win{border:1px solid #27664a;background:#0b2b20;color:#79e3aa}
html.profile-page .history-outcome.loss{border:1px solid #733c3c;background:#301616;color:#ff9c9c}
html.profile-page .history-outcome.draw{border:1px solid #596674;background:#17222c;color:#c1d0da}
html.profile-page .history-main{min-width:0}
html.profile-page .history-opponent{
 color:#edf3f7;font-size:14px;font-weight:900;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
html.profile-page .history-details{margin-top:4px;color:#879dab;font-size:11px;line-height:1.35}
html.profile-page .history-meta{text-align:right;white-space:nowrap}
html.profile-page .history-control{color:#f4cd73;font-size:13px;font-weight:900}
html.profile-page .history-date{margin-top:4px;color:#78909f;font-size:10px}
html.profile-page .history-rating{color:#a9c0ce;font-weight:800}
html.profile-page .history-rating-result{
 margin-top:6px;
 display:flex;
 align-items:center;
 justify-content:flex-end;
 gap:6px;
}
html.profile-page .history-rating-route{
 color:#8da0ad;
 font-size:10px;
 font-weight:800;
}
html.profile-page .history-delta{
 min-width:36px;
 padding:3px 7px;
 border-radius:999px;
 font-size:10px;
 font-weight:900;
 text-align:center;
}
html.profile-page .history-delta.positive{
 border:1px solid #27664a;
 background:#0b2b20;
 color:#79e3aa;
}
html.profile-page .history-delta.negative{
 border:1px solid #733c3c;
 background:#301616;
 color:#ff9c9c;
}
html.profile-page .history-delta.zero{
 border:1px solid #465966;
 background:#14212a;
 color:#a9bac5;
}





@media(max-width:700px){
 html.profile-page .game-invite-item{
  grid-template-columns:36px minmax(0,1fr);
  gap:9px;
  padding:9px 10px
 }
 html.profile-page .game-invite-avatar{
  width:36px;
  height:36px;
  font-size:17px
 }
 html.profile-page .game-invite-actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr
 }
 html.profile-page .game-invite-actions button{
  width:100%;
  min-height:36px
 }
}

@media(max-width:700px){
 html.profile-page .friends-game-tools{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  width:100%
 }
 html.profile-page .friends-game-time{width:100%}
 html.profile-page .friend-item{flex-wrap:wrap}
 html.profile-page .friend-main{min-width:calc(100% - 51px)}
 html.profile-page .friend-rating{margin-left:51px}
 html.profile-page .friend-invite-button{
  flex:1 1 100%;
  width:100%;
  min-width:0
 }
}

@media(max-width:700px){
 html.profile-page .friend-search-bar{
  grid-template-columns:minmax(0,1fr) 92px;
  gap:6px
 }
 html.profile-page .friend-search-button{padding:7px 8px;font-size:10px}
 html.profile-page .friend-search-item{
  grid-template-columns:36px minmax(0,1fr);
  gap:9px;
  padding:9px 10px
 }
 html.profile-page .friend-search-avatar{
  width:36px;height:36px;
  font-size:17px
 }
 html.profile-page .friend-search-action{
  grid-column:1/-1;
  width:100%;
  min-height:35px
 }
}

@media(max-width:700px){
 html.profile-page .friend-request-item{
  grid-template-columns:36px minmax(0,1fr);
  gap:9px;
  padding:9px 10px
 }
 html.profile-page .friend-request-avatar{
  width:36px;height:36px;
  font-size:17px
 }
 html.profile-page .friend-request-actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr
 }
 html.profile-page .friend-request-actions button{
  width:100%;
  min-height:36px
 }
}

@media(max-width:700px){
 html.profile-page .friend-item{padding:9px 10px;gap:9px}
 html.profile-page .friend-avatar{width:36px;height:36px;flex-basis:36px;font-size:17px}
 html.profile-page .friend-name{font-size:12px}
 html.profile-page .friend-rating{font-size:12px}
}

@media(max-width:700px){
 html.profile-page .history-item{grid-template-columns:82px minmax(0,1fr);gap:9px;padding:11px}
 html.profile-page .history-meta{
  grid-column:2;
  text-align:left;
  display:flex;
  flex-wrap:wrap;
  gap:7px 9px;
  align-items:center
 }
 html.profile-page .history-rating-result{
  margin-top:0;
  justify-content:flex-start;
 }
 html.profile-page .history-outcome{font-size:9px}
}

html.profile-page .actions{
 margin-top:24px;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:12px;
}
html.profile-page .btn{
 min-height:50px;
 border-radius:11px;
 font-size:14px;
 font-weight:900;
 cursor:pointer;
}
html.profile-page .btn.home{
 border:1px solid #a87322;
 background:#07131e;
 color:#f4cd73;
}
html.profile-page .btn.logout{
 border:1px solid #8f3f3f;
 background:linear-gradient(#6f2929,#4c1d1d);
 color:#fff;
}

html.profile-page .delete-account-modal[hidden]{display:none}
html.profile-page .delete-account-modal{
 position:fixed;
 inset:0;
 z-index:1200;
 display:grid;
 place-items:center;
 padding:16px;
 background:#02080ecc;
 backdrop-filter:blur(6px);
}
html.profile-page .delete-account-dialog{
 width:min(470px,100%);
 max-height:calc(100vh - 32px);
 overflow:auto;
 padding:22px;
 border:1px solid #9b4747;
 border-radius:16px;
 background:linear-gradient(180deg,#17222b,#0d151c);
 box-shadow:0 24px 80px #000a;
}
html.profile-page .delete-account-title{
 margin:0 0 10px;
 color:#ffb1b1;
 font-size:21px;
}
html.profile-page .delete-account-warning,html.profile-page .delete-account-instruction{
 margin:0 0 14px;
 color:#c4d0d8;
 font-size:13px;
 line-height:1.55;
}
html.profile-page .delete-account-instruction strong{color:#fff}
html.profile-page .delete-account-label{
 display:block;
 margin:12px 0 6px;
 color:#dce5eb;
 font-size:12px;
 font-weight:800;
}
html.profile-page .delete-account-input{
 width:100%;
 min-height:44px;
 padding:0 12px;
 border:1px solid #596a76;
 border-radius:9px;
 background:#07131e;
 color:#fff;
 font:inherit;
}
html.profile-page .delete-account-input:focus{
 border-color:#d65f5f;
 box-shadow:0 0 0 2px #d65f5f33;
 outline:none;
}
html.profile-page .delete-account-actions{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 margin-top:18px;
}
html.profile-page .delete-account-actions button{
 min-height:44px;
 border-radius:10px;
 font-size:13px;
 font-weight:900;
 cursor:pointer;
}
html.profile-page .delete-account-cancel{
 border:1px solid #667783;
 background:#17242d;
 color:#dce5eb;
}
html.profile-page .delete-account-confirm{
 border:1px solid #d15a5a;
 background:linear-gradient(#a83e3e,#762828);
 color:#fff;
}
html.profile-page .delete-account-actions button:disabled{
 cursor:wait;
 opacity:.6;
}
html.profile-page .delete-account-status{
 min-height:20px;
 margin-top:12px;
 color:#ff9b9b;
 font-size:12px;
 text-align:center;
}

html.profile-page .status{
 min-height:22px;
 margin-top:14px;
 text-align:center;
 color:#8fa4b4;
 font-size:13px;
 line-height:1.4;
}
html.profile-page .status.error{color:#ff8d8d}
html.profile-page .status.success{color:#79e3aa}

html.profile-page .loading{
 width:min(760px,100%);
 margin:70px auto 0;
 text-align:center;
 color:#9fb0bc;
 font-size:14px;
}

@media(max-width:700px){
 html.profile-page .page{padding:10px 10px 18px}
 html.profile-page .topbar{
  grid-template-columns:1fr auto 1fr;
  gap:6px;
 }
 html.profile-page .back-btn{
  height:38px;
  padding:0 9px;
  font-size:11px;
 }
 html.profile-page .lang-select{
  height:38px;
  max-width:118px;
  padding:0 7px;
  font-size:11px;
 }
 html.profile-page .brand .crown{display:none}
 html.profile-page .brand h1{
  font-size:25px;
  letter-spacing:2px;
 }
 html.profile-page .brand p{display:none}

 html.profile-page .profile-card{
  margin-top:22px;
  padding:20px 14px;
  border-radius:18px;
 }
 html.profile-page .profile-head{
  grid-template-columns:72px 1fr;
  gap:12px;
 }
 html.profile-page .avatar{
  width:72px;
  height:72px;
  font-size:30px;
 }
 html.profile-page .username{
  font-size:24px;
 }
 html.profile-page .meta{
  font-size:11px;
 }
 html.profile-page .rating-box{
  grid-column:1/-1;
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
 }
 html.profile-page .rating-value{
  margin:0;
  font-size:24px;
 }
 html.profile-page .info-grid{
  grid-template-columns:1fr;
 }
 html.profile-page .stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
 }
 html.profile-page .actions{
  gap:8px;
 }
 html.profile-page .btn{
  min-height:48px;
  font-size:13px;
 }
}


/* =========================================================
   CHESSORA PROFILE — FIXED VIEWPORT / INTERNAL SCROLL AREAS
   The browser page itself never scrolls.
   Long profile data scrolls only inside profile panels.
   ========================================================= */

html.profile-page,html.profile-page body{
 width:100%;
 height:100%;
 min-height:0;
 overflow:hidden!important;
 overscroll-behavior:none;
}

html.profile-page body{
 position:fixed;
 inset:0;
}

html.profile-page .page{
 box-sizing:border-box;
 width:100%;
 height:100dvh;
 min-height:0!important;
 padding:clamp(8px,1.5vh,16px);
 display:grid;
 grid-template-rows:auto minmax(0,1fr);
 gap:clamp(8px,1.4vh,14px);
 align-items:stretch;
 overflow:hidden!important;
}

html.profile-page .topbar{
 flex:0 0 auto;
 width:min(1180px,100%);
 margin:0 auto;
}

html.profile-page .brand .crown{
 font-size:clamp(20px,2.8vh,27px);
 line-height:1;
 height:auto;
}
html.profile-page .brand h1{
 font-size:clamp(28px,4.4vh,44px);
 line-height:1;
}
html.profile-page .brand p{
 margin-top:2px;
}

html.profile-page .profile-card{
 box-sizing:border-box;
 width:min(1180px,100%);
 height:100%;
 min-height:0;
 margin:0 auto!important;
 padding:clamp(12px,1.7vh,20px);
 border-radius:18px;
 display:grid;
 grid-template-rows:auto auto minmax(0,1fr) auto auto;
 gap:clamp(8px,1.25vh,12px);
 overflow:hidden!important;
}

html.profile-page .profile-head{
 min-height:0;
 gap:clamp(12px,1.7vw,20px);
}

html.profile-page .avatar{
 width:clamp(72px,10vh,92px);
 height:clamp(72px,10vh,92px);
 font-size:clamp(30px,4.6vh,40px);
}

html.profile-page .username{
 font-size:clamp(23px,3.5vh,31px);
}

html.profile-page .meta{
 margin-top:5px;
 font-size:12px;
}

html.profile-page .username-edit-button{
 margin-top:7px;
 min-height:30px;
}

html.profile-page .rating-box{
 padding:clamp(10px,1.4vh,16px);
}
html.profile-page .rating-value{
 margin-top:4px;
 font-size:clamp(24px,3.5vh,32px);
}

html.profile-page .public-profile-actions{
 margin-top:0!important;
 padding:10px 12px;
}

html.profile-page .profile-summary-row{
 display:grid;
 grid-template-columns:minmax(0,1.35fr) minmax(330px,.9fr);
 gap:12px;
 min-height:0;
}

html.profile-page .profile-summary-row .info-grid{
 margin:0;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:10px;
}

html.profile-page .profile-summary-row .info-card{
 min-height:0;
 padding:10px 12px;
}

html.profile-page .profile-summary-row .info-value{
 margin-top:5px;
 font-size:12px;
}

html.profile-page .stats-panel{
 min-width:0;
 padding:9px 10px 10px;
 border:1px solid #243d4e;
 border-radius:12px;
 background:#07131e;
}

html.profile-page .stats-panel .stats-title{
 margin:0 0 7px;
 font-size:14px;
}

html.profile-page .stats-panel .stats{
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:7px;
}

html.profile-page .stats-panel .stat{
 min-height:0;
 padding:8px 5px;
 border-radius:9px;
 background:#0b1d2a;
}

html.profile-page .stats-panel .stat strong{
 font-size:20px;
}

html.profile-page .stats-panel .stat span{
 margin-top:5px;
 font-size:9px;
}

html.profile-page .puzzle-profile-section{
 margin-top:8px;
 padding-top:7px;
 border-top:1px solid #243d4e;
}

html.profile-page .puzzle-profile-title{
 margin:0 0 6px;
 color:#d4a447;
 font-size:11px;
 font-weight:900;
 letter-spacing:.7px;
 text-transform:uppercase;
}

html.profile-page .puzzle-profile-stats{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:5px;
}

html.profile-page .puzzle-profile-stat{
 min-width:0;
 padding:6px 3px;
 border:1px solid #243d4e;
 border-radius:8px;
 background:#0b1d2a;
 text-align:center;
}

html.profile-page .puzzle-profile-stat strong{
 display:block;
 color:#f4cd73;
 font-size:16px;
}

html.profile-page .puzzle-profile-stat span{
 display:block;
 overflow:hidden;
 margin-top:3px;
 color:#9fb0bc;
 font-size:8px;
 font-weight:800;
 text-overflow:ellipsis;
 white-space:nowrap;
}

html.profile-page .profile-dashboard{
 min-height:0;
 overflow:hidden;
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.14fr);
 gap:12px;
}

html.profile-page .profile-column{
 min-width:0;
 min-height:0;
 display:grid;
 grid-template-rows:minmax(0,1fr) minmax(0,1fr);
 gap:12px;
 overflow:hidden;
}

html.profile-page .game-invites-section,html.profile-page .friend-search-section,html.profile-page .friend-requests-section,html.profile-page .friends-section,html.profile-page .history-section{
 box-sizing:border-box;
 min-width:0;
 min-height:0;
 margin:0!important;
 padding:10px;
 border:1px solid #243d4e;
 border-radius:12px;
 background:#06121c;
 display:flex;
 flex-direction:column;
 overflow:hidden;
}

html.profile-page .game-invites-title,html.profile-page .friend-search-title,html.profile-page .friend-requests-title,html.profile-page .friends-title,html.profile-page .history-title{
 flex:0 0 auto;
 margin:0 0 8px!important;
 font-size:14px!important;
 line-height:1.2;
}

html.profile-page .friend-search-bar,html.profile-page .friends-game-tools{
 flex:0 0 auto;
 margin-bottom:7px;
}

html.profile-page .friend-search-results,html.profile-page .game-invites-list,html.profile-page .friend-requests-list,html.profile-page .friends-list,html.profile-page .history-list{
 min-height:0;
 flex:1 1 auto;
 overflow-y:auto;
 overflow-x:hidden;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:#496171 #07131e;
 padding-right:4px;
}

html.profile-page .friend-search-results{
 margin-top:0!important;
}

html.profile-page .friend-search-results::-webkit-scrollbar,html.profile-page .game-invites-list::-webkit-scrollbar,html.profile-page .friend-requests-list::-webkit-scrollbar,html.profile-page .friends-list::-webkit-scrollbar,html.profile-page .history-list::-webkit-scrollbar,html.profile-page .profile-dashboard::-webkit-scrollbar{
 width:7px;
}

html.profile-page .friend-search-results::-webkit-scrollbar-track,html.profile-page .game-invites-list::-webkit-scrollbar-track,html.profile-page .friend-requests-list::-webkit-scrollbar-track,html.profile-page .friends-list::-webkit-scrollbar-track,html.profile-page .history-list::-webkit-scrollbar-track,html.profile-page .profile-dashboard::-webkit-scrollbar-track{
 background:#07131e;
 border-radius:99px;
}

html.profile-page .friend-search-results::-webkit-scrollbar-thumb,html.profile-page .game-invites-list::-webkit-scrollbar-thumb,html.profile-page .friend-requests-list::-webkit-scrollbar-thumb,html.profile-page .friends-list::-webkit-scrollbar-thumb,html.profile-page .history-list::-webkit-scrollbar-thumb,html.profile-page .profile-dashboard::-webkit-scrollbar-thumb{
 background:#496171;
 border-radius:99px;
}

html.profile-page .friend-search-results::-webkit-scrollbar-thumb:hover,html.profile-page .game-invites-list::-webkit-scrollbar-thumb:hover,html.profile-page .friend-requests-list::-webkit-scrollbar-thumb:hover,html.profile-page .friends-list::-webkit-scrollbar-thumb:hover,html.profile-page .history-list::-webkit-scrollbar-thumb:hover,html.profile-page .profile-dashboard::-webkit-scrollbar-thumb:hover{
 background:#a87322;
}

html.profile-page .history-section{
 grid-column:3;
}

html.profile-page .history-item{
 grid-template-columns:86px minmax(0,1fr);
 gap:8px;
 padding:8px 9px;
}

html.profile-page .history-meta{
 grid-column:2;
 text-align:left;
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:5px 8px;
}

html.profile-page .history-rating-result{
 margin-top:0;
 justify-content:flex-start;
}

html.profile-page .history-outcome{
 min-height:30px;
 font-size:9px;
}

html.profile-page .history-opponent{
 font-size:12px;
}
html.profile-page .history-details,html.profile-page .history-control{
 font-size:10px;
}
html.profile-page .history-date{
 font-size:9px;
}

html.profile-page .game-invite-item,html.profile-page .friend-request-item,html.profile-page .friend-search-item{
 padding:8px 9px;
 gap:8px;
}

html.profile-page .friend-item{
 padding:8px 9px;
 gap:8px;
}

html.profile-page .game-invite-avatar,html.profile-page .friend-request-avatar,html.profile-page .friend-search-avatar,html.profile-page .friend-avatar{
 width:34px;
 height:34px;
 flex-basis:34px;
 font-size:16px;
}

html.profile-page .game-invite-name,html.profile-page .friend-request-name,html.profile-page .friend-search-name,html.profile-page .friend-name{
 font-size:12px;
}

html.profile-page .game-invite-actions button,html.profile-page .friend-request-actions button,html.profile-page .friend-search-action,html.profile-page .friend-invite-button{
 min-height:32px;
 font-size:9.5px;
}

html.profile-page .friend-search-input,html.profile-page .friend-search-button,html.profile-page .friends-game-time{
 min-height:34px;
}

html.profile-page .actions{
 margin-top:0!important;
 gap:10px;
}

html.profile-page .btn{
 min-height:38px;
 font-size:12px;
}

html.profile-page .status{
 min-height:14px;
 margin-top:0!important;
 font-size:11px;
 line-height:1.25;
}

html.profile-page .profile-card.public-view{
 grid-template-rows:auto auto auto minmax(0,1fr);
}

html.profile-page .profile-card.public-view .profile-summary-row{
 grid-template-columns:1fr;
}

html.profile-page .profile-card.public-view .stats-panel{
 width:100%;
}

html.profile-page .profile-card.public-view .profile-dashboard{
 grid-template-columns:1fr;
}

html.profile-page .profile-card.public-view .history-section{
 grid-column:1;
}

html.profile-page .loading{
 align-self:center;
 margin:0 auto;
}

/* Short desktop / laptop screens */
@media(max-height:820px) and (min-width:701px){
 html.profile-page .page{
  padding:7px 12px;
  gap:7px;
 }

 html.profile-page .back-btn,html.profile-page .lang-select{
  height:34px;
 }

 html.profile-page .brand .crown{
  display:none;
 }

 html.profile-page .brand h1{
  font-size:27px;
 }

 html.profile-page .brand p{
  display:none;
 }

 html.profile-page .profile-card{
  padding:10px 12px;
  gap:8px;
 }

 html.profile-page .avatar{
  width:66px;
  height:66px;
 }

 html.profile-page .username{
  font-size:23px;
 }

 html.profile-page .username-edit-button{
  min-height:28px;
 }

 html.profile-page .profile-summary-row{
  gap:8px;
 }

 html.profile-page .profile-summary-row .info-card{
  padding:7px 9px;
 }

 html.profile-page .stats-panel{
  padding:6px 8px 7px;
 }

 html.profile-page .stats-panel .stats-title{
  margin-bottom:5px;
  font-size:12px;
 }

 html.profile-page .stats-panel .stat{
  padding:6px 4px;
 }

 html.profile-page .stats-panel .stat strong{
  font-size:17px;
 }

 html.profile-page .profile-dashboard,html.profile-page .profile-column{
  gap:8px;
 }

 html.profile-page .game-invites-section,html.profile-page .friend-search-section,html.profile-page .friend-requests-section,html.profile-page .friends-section,html.profile-page .history-section{
  padding:8px;
 }

 html.profile-page .game-invites-title,html.profile-page .friend-search-title,html.profile-page .friend-requests-title,html.profile-page .friends-title,html.profile-page .history-title{
  margin-bottom:6px!important;
  font-size:12px!important;
 }

 html.profile-page .actions .btn{
  min-height:34px;
 }
}

/* Tablet and mobile:
   the page is still fixed; only the dashboard becomes scrollable. */
@media(max-width:900px){
 html.profile-page .page{
  padding:8px;
  gap:7px;
 }

 html.profile-page .topbar{
  width:100%;
 }

 html.profile-page .profile-card{
  width:100%;
  padding:10px;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
 }

 html.profile-page .profile-summary-row{
  grid-template-columns:1fr;
 }

 html.profile-page .profile-summary-row .info-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
 }

 html.profile-page .profile-dashboard{
  display:block;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#496171 #07131e;
  padding-right:3px;
 }

 html.profile-page .profile-column{
  display:block;
  overflow:visible;
 }

 html.profile-page .game-invites-section,html.profile-page .friend-search-section,html.profile-page .friend-requests-section,html.profile-page .friends-section,html.profile-page .history-section{
  min-height:170px;
  max-height:220px;
  margin:0 0 10px!important;
 }

 html.profile-page .history-section{
  grid-column:auto;
  min-height:210px;
  max-height:280px;
 }

 html.profile-page .actions{
  grid-template-columns:1fr 1fr;
 }

 html.profile-page .profile-card.public-view .profile-dashboard{
  display:block;
 }

 html.profile-page .profile-card.public-view .history-section{
  max-height:none;
  height:100%;
  margin-bottom:0!important;
 }
}

@media(max-width:700px){
 html.profile-page .page{
  padding:6px;
 }

 html.profile-page .back-btn,html.profile-page .lang-select{
  height:34px;
 }

 html.profile-page .brand h1{
  font-size:22px;
 }

 html.profile-page .profile-card{
  border-radius:14px;
  padding:8px;
  gap:7px;
 }

 html.profile-page .profile-head{
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:8px;
 }

 html.profile-page .avatar{
  width:58px;
  height:58px;
  font-size:25px;
 }

 html.profile-page .username{
  font-size:19px;
 }

 html.profile-page .meta{
  margin-top:3px;
  font-size:9.5px;
 }

 html.profile-page .username-edit-button{
  margin-top:4px;
  min-height:26px;
  padding:0 8px;
  font-size:9px;
 }

 html.profile-page .rating-box{
  grid-column:auto;
  width:auto;
  min-width:72px;
  padding:7px 8px;
  display:block;
  text-align:center;
 }

 html.profile-page .rating-label{
  font-size:8px;
 }

 html.profile-page .rating-value{
  margin-top:3px;
  font-size:19px;
 }

 html.profile-page .profile-summary-row .info-grid{
  grid-template-columns:1fr 1fr;
  gap:6px;
 }

 html.profile-page .profile-summary-row .info-card{
  padding:7px 8px;
 }

 html.profile-page .info-label{
  font-size:8px;
 }

 html.profile-page .profile-summary-row .info-value{
  font-size:10px;
 }

 html.profile-page .stats-panel{
  padding:6px;
 }

 html.profile-page .stats-panel .stats-title{
  display:none;
 }

 html.profile-page .stats-panel .stats{
  gap:5px;
 }

 html.profile-page .stats-panel .stat{
  padding:5px 2px;
 }

 html.profile-page .stats-panel .stat strong{
  font-size:15px;
 }

 html.profile-page .stats-panel .stat span{
  margin-top:3px;
  font-size:7.5px;
 }

 html.profile-page .game-invites-section,html.profile-page .friend-search-section,html.profile-page .friend-requests-section,html.profile-page .friends-section{
  min-height:155px;
  max-height:195px;
 }

 html.profile-page .history-section{
  min-height:190px;
  max-height:245px;
 }

 html.profile-page .actions .btn{
  min-height:34px;
  font-size:10px;
 }

 html.profile-page .status{
  font-size:9px;
 }
}

@media(max-width:430px){
 html.profile-page .topbar{
  grid-template-columns:auto 1fr auto;
 }

 html.profile-page .back-btn{
  padding:0 7px;
  font-size:9px;
 }

 html.profile-page .lang-select{
  max-width:92px;
  padding:0 5px;
  font-size:9px;
 }

 html.profile-page .brand h1{
  font-size:19px;
  letter-spacing:1.5px;
 }

 html.profile-page .profile-head{
  grid-template-columns:52px minmax(0,1fr) 64px;
 }

 html.profile-page .avatar{
  width:52px;
  height:52px;
 }

 html.profile-page .username{
  font-size:17px;
 }

 html.profile-page .rating-box{
  min-width:64px;
 }

 html.profile-page .profile-summary-row .info-grid{
  grid-template-columns:1fr;
 }

 html.profile-page .profile-summary-row .info-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:6px;
 }

 html.profile-page .profile-summary-row .info-value{
  margin-top:0;
  text-align:right;
 }

 html.profile-page .public-profile-actions{
  padding:8px;
 }

 html.profile-page .public-profile-actions-grid{
  gap:7px;
 }
}



/* CHESSORA PROFILE — LIGHT THEME (visual overrides only) */
html.profile-page[data-theme="light"]{color-scheme:light}
html.profile-page[data-theme="light"],html.profile-page[data-theme="light"] body{
 background:#eadfcd;
 color:#25384a;
}
html.profile-page[data-theme="light"] body{
 background:radial-gradient(circle at 50% 28%,#fffdf8 0,#f3eadc 44%,#dfcfb7 100%);
}
html.profile-page[data-theme="light"] .back-btn,html.profile-page[data-theme="light"] .lang-select{
 border-color:#b7812d;
 background:#fffaf2;
 color:#8a5b12;
 box-shadow:0 5px 18px #72522a24;
}
html.profile-page[data-theme="light"] .lang-select option,html.profile-page[data-theme="light"] select option{
 background:#fffdf8;
 color:#26394b;
}
html.profile-page[data-theme="light"] .brand .crown,html.profile-page[data-theme="light"] .brand h1{
 color:#9b670f;
 text-shadow:0 2px 8px #ffffffa8;
}
html.profile-page[data-theme="light"] .brand p{color:#a36c12}
html.profile-page[data-theme="light"] .profile-card{
 border-color:#b7812d;
 background:linear-gradient(180deg,#fffdf8,#f1e5d3);
 box-shadow:0 24px 70px #5a402c45,0 0 30px #b77a2418;
}
html.profile-page[data-theme="light"] .avatar{
 border-color:#b7812d;
 box-shadow:0 12px 28px #355a7130;
}
html.profile-page[data-theme="light"] .username,html.profile-page[data-theme="light"] .rating-value,html.profile-page[data-theme="light"] .stats-title,html.profile-page[data-theme="light"] .stat strong,html.profile-page[data-theme="light"] .game-invites-title,html.profile-page[data-theme="light"] .friend-search-title,html.profile-page[data-theme="light"] .friend-requests-title,html.profile-page[data-theme="light"] .friends-title,html.profile-page[data-theme="light"] .history-title{
 color:#8f5e0d;
}
html.profile-page[data-theme="light"] .meta,html.profile-page[data-theme="light"] .rating-label,html.profile-page[data-theme="light"] .info-label,html.profile-page[data-theme="light"] .stat span,html.profile-page[data-theme="light"] .loading,html.profile-page[data-theme="light"] .status{
 color:#667886;
}
html.profile-page[data-theme="light"] .username-edit-button,html.profile-page[data-theme="light"] .username-cancel{
 border-color:#bcae9b;
 background:#fffaf2;
 color:#425564;
}
html.profile-page[data-theme="light"] .username-edit-button:hover{
 border-color:#b7812d;
 color:#8f5e0d;
}
html.profile-page[data-theme="light"] .username-editor{
 border-color:#c8b89f;
 background:#fffaf2;
}
html.profile-page[data-theme="light"] .username-input,html.profile-page[data-theme="light"] .friend-search-input,html.profile-page[data-theme="light"] .friends-game-time,html.profile-page[data-theme="light"] .public-game-time{
 border-color:#bcae9b;
 background:#fffdf8;
 color:#26394b;
}
html.profile-page[data-theme="light"] .username-input:focus,html.profile-page[data-theme="light"] .friend-search-input:focus,html.profile-page[data-theme="light"] .friends-game-time:focus,html.profile-page[data-theme="light"] .public-game-time:focus{
 border-color:#2b86ff;
 box-shadow:0 0 0 2px #2b86ff20;
}
html.profile-page[data-theme="light"] .username-rule{color:#667886}
html.profile-page[data-theme="light"] .username-status.error,html.profile-page[data-theme="light"] .status.error,html.profile-page[data-theme="light"] .friend-invite-error,html.profile-page[data-theme="light"] .public-profile-message{color:#b3261e}
html.profile-page[data-theme="light"] .username-status.success,html.profile-page[data-theme="light"] .status.success{color:#17743a}
html.profile-page[data-theme="light"] .rating-box,html.profile-page[data-theme="light"] .info-card,html.profile-page[data-theme="light"] .stats-panel,html.profile-page[data-theme="light"] .public-profile-actions{
 border-color:#c8b89f;
 background:#fffaf2;
}
html.profile-page[data-theme="light"] .divider{background:#d8c6ac}
html.profile-page[data-theme="light"] .info-value{color:#26394b}
html.profile-page[data-theme="light"] .stats-panel .stat,html.profile-page[data-theme="light"] .stat{
 border-color:#d8c6ac;
 background:#fffdf8;
}
html.profile-page[data-theme="light"] .puzzle-profile-section{
 border-top-color:#d8c6ac;
}
html.profile-page[data-theme="light"] .puzzle-profile-title,html.profile-page[data-theme="light"] .puzzle-profile-stat strong{
 color:#8f5e0d;
}
html.profile-page[data-theme="light"] .puzzle-profile-stat{
 border-color:#d8c6ac;
 background:#fffdf8;
}
html.profile-page[data-theme="light"] .puzzle-profile-stat span{
 color:#667886;
}
html.profile-page[data-theme="light"] .game-invites-section,html.profile-page[data-theme="light"] .friend-search-section,html.profile-page[data-theme="light"] .friend-requests-section,html.profile-page[data-theme="light"] .friends-section,html.profile-page[data-theme="light"] .history-section{
 border-color:#c8b89f;
 background:#f7ecdc;
}
html.profile-page[data-theme="light"] .game-invite-empty,html.profile-page[data-theme="light"] .friend-search-empty,html.profile-page[data-theme="light"] .friend-request-empty,html.profile-page[data-theme="light"] .friends-empty,html.profile-page[data-theme="light"] .history-empty{
 border-color:#d8c6ac;
 background:#fffaf2;
 color:#667886;
}
html.profile-page[data-theme="light"] .game-invite-item,html.profile-page[data-theme="light"] .friend-search-item,html.profile-page[data-theme="light"] .friend-request-item,html.profile-page[data-theme="light"] .friend-item,html.profile-page[data-theme="light"] .history-item{
 border-color:#d8c6ac;
 background:#fffdf8;
}
html.profile-page[data-theme="light"] .history-item:hover{
 border-color:#b7812d;
 background:#fff7e9;
}
html.profile-page[data-theme="light"] .history-item:focus-visible{
 outline-color:#b7812d;
 border-color:#b7812d;
}
html.profile-page[data-theme="light"] .game-invite-avatar,html.profile-page[data-theme="light"] .friend-search-avatar,html.profile-page[data-theme="light"] .friend-request-avatar,html.profile-page[data-theme="light"] .friend-avatar{
 border-color:#b7812d;
 background:#f3e7d5;
 color:#8f5e0d;
}
html.profile-page[data-theme="light"] .game-invite-name,html.profile-page[data-theme="light"] .friend-search-name,html.profile-page[data-theme="light"] .friend-request-name,html.profile-page[data-theme="light"] .friend-name,html.profile-page[data-theme="light"] .history-opponent{
 color:#26394b;
}
html.profile-page[data-theme="light"] .game-invite-meta,html.profile-page[data-theme="light"] .friend-since,html.profile-page[data-theme="light"] .history-details,html.profile-page[data-theme="light"] .history-date,html.profile-page[data-theme="light"] .history-rating-route,html.profile-page[data-theme="light"] .friends-game-label,html.profile-page[data-theme="light"] .public-game-time-label{
 color:#667886;
}
html.profile-page[data-theme="light"] .game-invite-rating,html.profile-page[data-theme="light"] .game-invite-time,html.profile-page[data-theme="light"] .friend-search-rating,html.profile-page[data-theme="light"] .friend-request-rating,html.profile-page[data-theme="light"] .friend-rating,html.profile-page[data-theme="light"] .history-control{
 color:#8f5e0d;
}
html.profile-page[data-theme="light"] .history-rating{color:#4d6575}
html.profile-page[data-theme="light"] .game-invite-decline,html.profile-page[data-theme="light"] .friend-request-decline,html.profile-page[data-theme="light"] .friend-search-action.status,html.profile-page[data-theme="light"] .public-friend-button.status{
 border-color:#bcae9b;
 background:#f3e7d5;
 color:#425564;
}
html.profile-page[data-theme="light"] .friend-search-action.received{
 border-color:#b7812d;
 color:#8f5e0d;
}
html.profile-page[data-theme="light"] .friend-search-action.friends,html.profile-page[data-theme="light"] .history-outcome.win,html.profile-page[data-theme="light"] .history-delta.positive{
 border-color:#74ad86;
 background:#e9f7ed;
 color:#176b31;
}
html.profile-page[data-theme="light"] .history-outcome.loss,html.profile-page[data-theme="light"] .history-delta.negative{
 border-color:#d59696;
 background:#fff0f0;
 color:#a12c2c;
}
html.profile-page[data-theme="light"] .history-outcome.draw,html.profile-page[data-theme="light"] .history-delta.zero{
 border-color:#aab5bd;
 background:#eef2f4;
 color:#4c5f6d;
}
html.profile-page[data-theme="light"] .btn.home{
 border-color:#b7812d;
 background:#fffaf2;
 color:#8a5b12;
}
html.profile-page[data-theme="light"] .username-actions .delete-account-button{
 border-color:#c85d5d;
 background:#fff5f5;
 color:#a52f2f;
}
html.profile-page[data-theme="light"] .username-actions .delete-account-button:hover,html.profile-page[data-theme="light"] .username-actions .delete-account-button:focus-visible{
 background:#f8dddd;
 color:#842424;
}
html.profile-page[data-theme="light"] .delete-account-dialog{
 border-color:#c85d5d;
 background:linear-gradient(180deg,#fffdf8,#f4e9dc);
 box-shadow:0 24px 70px #5a402c55;
}
html.profile-page[data-theme="light"] .delete-account-title{color:#a52f2f}
html.profile-page[data-theme="light"] .delete-account-warning,html.profile-page[data-theme="light"] .delete-account-instruction{color:#4d5e69}
html.profile-page[data-theme="light"] .delete-account-instruction strong,html.profile-page[data-theme="light"] .delete-account-label{color:#26394b}
html.profile-page[data-theme="light"] .delete-account-input{
 border-color:#bcae9b;
 background:#fffdf8;
 color:#26394b;
}
html.profile-page[data-theme="light"] .delete-account-cancel{
 border-color:#bcae9b;
 background:#fffaf2;
 color:#425564;
}
html.profile-page[data-theme="light"] .friend-search-results,html.profile-page[data-theme="light"] .game-invites-list,html.profile-page[data-theme="light"] .friend-requests-list,html.profile-page[data-theme="light"] .friends-list,html.profile-page[data-theme="light"] .history-list,html.profile-page[data-theme="light"] .profile-dashboard{
 scrollbar-color:#ad9271 #eee1cf;
}
html.profile-page[data-theme="light"] .friend-search-results::-webkit-scrollbar-track,html.profile-page[data-theme="light"] .game-invites-list::-webkit-scrollbar-track,html.profile-page[data-theme="light"] .friend-requests-list::-webkit-scrollbar-track,html.profile-page[data-theme="light"] .friends-list::-webkit-scrollbar-track,html.profile-page[data-theme="light"] .history-list::-webkit-scrollbar-track,html.profile-page[data-theme="light"] .profile-dashboard::-webkit-scrollbar-track{background:#eee1cf}
html.profile-page[data-theme="light"] .friend-search-results::-webkit-scrollbar-thumb,html.profile-page[data-theme="light"] .game-invites-list::-webkit-scrollbar-thumb,html.profile-page[data-theme="light"] .friend-requests-list::-webkit-scrollbar-thumb,html.profile-page[data-theme="light"] .friends-list::-webkit-scrollbar-thumb,html.profile-page[data-theme="light"] .history-list::-webkit-scrollbar-thumb,html.profile-page[data-theme="light"] .profile-dashboard::-webkit-scrollbar-thumb{background:#ad9271}
html.profile-page[data-theme="light"] #chessoraProfileCountryBadge{
 border-color:#b7812d!important;
 background:linear-gradient(180deg,#fffdf8,#f1e5d3)!important;
 box-shadow:0 5px 14px #72522a24!important;
 color:#425564!important;
}
html.profile-page[data-theme="light"] #chessoraProfileCountryBadge .chessora-country-flag-wrap{
 background:#fff!important;
 box-shadow:0 1px 5px #72522a30!important;
}