*{box-sizing:border-box}

[hidden]{display:none!important}

:root{
--bg:#0F172A;
--panel:#1E293B;
--card:#334155;
--accent:#2496ED;
--accent-hover:#1B7AC8;
--text:#F8FAFC;
--muted:#94A3B8;
--gold:#FBBF24;

--square-light:#CBD5E1;
--square-dark:#475569;
--piece-light:#e8edf3;
--piece-dark:#7a2323;
}

body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:var(--bg);
color:var(--text);
}

.topbar{
height:70px;
background:var(--panel);
display:flex;
align-items:center;
padding:0 30px;
gap:40px;
border-bottom:1px solid #334155;
position:sticky;
top:0;
z-index:20;
}

.logo{
font-size:22px;
font-weight:800;
display:flex;
align-items:center;
gap:12px;
color:inherit;
text-decoration:none;
}

.logo i{
color:var(--accent);
}

nav{
display:flex;
gap:25px;
flex:1;
}

nav a{
color:var(--muted);
cursor:pointer;
font-weight:500;
}

nav a:hover,
nav .active{
color:white;
}

.profile{
display:flex;
align-items:center;
gap:12px;
color:inherit;
text-decoration:none;
border-radius:10px;
padding:6px 10px;
margin:-6px -10px;
transition:.2s;
}

.profile:hover{
background:rgba(255,255,255,.06);
}

.avatar{
width:42px;
height:42px;
border-radius:50%;
background:var(--accent);
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
overflow:hidden;
}

.avatar img,
.profile-avatar-lg img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
}

.profile small{
display:block;
color:var(--muted);
}

.layout{
display:flex;
}

.sidebar{
width:260px;
height:calc(100vh - 70px);
background:#0B1220;
padding:25px;
position:sticky;
top:70px;
align-self:flex-start;
}

.play-dropdown{
position:relative;
}

.play-btn{
width:100%;
padding:15px;
border:0;
border-radius:10px;
background:var(--accent);
color:white;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.play-btn:hover{
background:var(--accent-hover);
box-shadow:0 0 20px rgba(36,150,237,.35);
}

.dropdown-arrow{
font-size:12px;
margin-left:auto;
transition:transform .2s;
}

.play-dropdown.open .dropdown-arrow{
transform:rotate(180deg);
}

.dropdown-menu{
position:absolute;
top:0;
left:calc(100% + 8px);
width:200px;
background:var(--panel);
border:1px solid #334155;
border-radius:10px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.4);
opacity:0;
visibility:hidden;
transform:translateX(-8px);
transition:.2s;
z-index:10;
}

.play-dropdown.open .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateX(0);
}

.dropdown-item{
padding:14px 16px;
display:flex;
align-items:center;
gap:12px;
cursor:pointer;
font-weight:500;
color:var(--text);
}

.dropdown-item:hover{
background:var(--accent);
color:white;
}

.dropdown-item:hover i{
color:white;
}

.dropdown-item i{
color:var(--accent);
width:18px;
text-align:center;
}

.menu{
margin-top:30px;
}

.menu div,
.menu a{
padding:14px;
display:flex;
gap:15px;
align-items:center;
color:var(--muted);
border-radius:8px;
cursor:pointer;
text-decoration:none;
}

.menu div:hover,
.menu a:hover{
background:rgba(36,150,237,.12);
color:white;
}

.menu i{
color:var(--accent);
}

main{
flex:1;
padding:40px;
}

.hero{
background:var(--panel);
border-radius:18px;
padding:40px;
display:flex;
justify-content:space-between;
align-items:center;
border:1px solid #334155;
}

.hero h1{
font-size:42px;
margin:0 0 15px;
}

.hero p{
color:var(--muted);
font-size:18px;
}

.hero button{
margin-top:20px;
padding:15px 35px;
border:0;
border-radius:10px;
background:var(--accent);
color:white;
font-size:18px;
font-weight:700;
cursor:pointer;
}

.hero button:hover{
background:var(--accent-hover);
}

.mini-board{
width:240px;
height:240px;
border-radius:12px;
background:conic-gradient(#475569 0deg 90deg,#CBD5E1 90deg 180deg,#475569 180deg 270deg,#CBD5E1 270deg 360deg);
background-size:60px 60px;
box-shadow:0 25px 60px rgba(0,0,0,.5);
transform:rotate(-3deg);
}

.cards{
margin-top:30px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.card{
background:var(--card);
padding:30px;
border-radius:15px;
border:1px solid #475569;
transition:.25s;
cursor: pointer;
}

.card:hover{
transform:translateY(-6px);
border-color:var(--accent);
}

.card i{
font-size:35px;
color:var(--accent);
}

.card p{
color:var(--muted);
}

@media(max-width:900px){
.layout{flex-direction:column}

.sidebar{
width:100%;
height:auto;
position:static;
padding:12px 16px;
display:flex;
flex-direction:column;
gap:10px;
border-bottom:1px solid #334155;
}

.sidebar .play-btn{
width:100%;
padding:12px 18px;
}

.sidebar .menu{
margin-top:0;
display:flex;
gap:6px;
}

.sidebar .menu div,
.sidebar .menu a{
flex:1;
justify-content:center;
gap:8px;
padding:10px 6px;
white-space:nowrap;
font-size:13px;
}

.hero{flex-direction:column;gap:35px;text-align:center}
.cards{grid-template-columns:1fr}
main{padding:20px}
}

.game-page{
--board-size:560px;
display:flex;
align-items:center;
justify-content:center;
gap:30px;
min-height:calc(100vh - 70px);
padding:40px;
}

.board-wrapper{
position:relative;
display:inline-grid;
grid-template-columns:28px var(--board-size);
grid-template-rows:var(--board-size) 28px;
gap:8px;
}

.match-overlay{
position:absolute;
inset:0;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
gap:16px;
background:rgba(11,18,32,.88);
border-radius:12px;
color:var(--text);
font-weight:600;
z-index:15;
}

.spinner{
width:40px;
height:40px;
border:4px solid #334155;
border-top-color:var(--accent);
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
to{transform:rotate(360deg);}
}

.board-numbers{
grid-column:1;
grid-row:1;
display:flex;
flex-direction:column;
}

.board-letters{
grid-column:2;
grid-row:2;
display:flex;
}

.board-numbers span,
.board-letters span{
flex:1;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted);
font-weight:600;
font-size:14px;
}

.game-board{
position:relative;
grid-column:2;
grid-row:1;
display:grid;
grid-template-columns:repeat(8,1fr);
grid-template-rows:repeat(8,1fr);
width:var(--board-size);
height:var(--board-size);
border-radius:8px;
overflow:hidden;
box-shadow:0 25px 60px rgba(0,0,0,.5);
transition:box-shadow .25s ease;
}

.game-board.your-turn{
box-shadow:0 0 0 4px #22C55E, 0 0 26px rgba(34,197,94,.55), 0 25px 60px rgba(0,0,0,.5);
}

.piece-slot{
position:absolute;
top:0;
left:0;
width:12.5%;
height:12.5%;
display:flex;
align-items:center;
justify-content:center;
transition:transform .2s cubic-bezier(.22,.61,.36,1);
pointer-events:none;
z-index:2;
will-change:transform;
}

.piece-slot.captured{
transition:transform .18s ease, opacity .18s ease;
opacity:0;
}

.board-wrapper.flipped .board-numbers{
flex-direction:column-reverse;
}

.board-wrapper.flipped .board-letters{
flex-direction:row-reverse;
}

.theme-btn:hover{
color:var(--accent);
background:rgba(36,150,237,.08);
}

.theme-panel{
position:absolute;
bottom:calc(100% + 10px);
right:0;
width:220px;
background:var(--panel);
border:1px solid #334155;
border-radius:12px;
padding:16px;
box-shadow:0 20px 45px rgba(0,0,0,.45);
z-index:6;
display:flex;
flex-direction:column;
gap:12px;
}

.theme-panel label{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:13px;
color:var(--muted);
}

.theme-panel input[type="color"]{
width:36px;
height:26px;
padding:0;
border:1px solid #334155;
border-radius:6px;
background:none;
cursor:pointer;
}

.theme-reset-btn{
margin-top:4px;
padding:8px;
border:1px solid #334155;
border-radius:8px;
background:transparent;
color:var(--muted);
font-size:12px;
cursor:pointer;
transition:.2s;
}

.theme-reset-btn:hover{
border-color:var(--accent);
color:var(--accent);
}

.square{
display:flex;
align-items:center;
justify-content:center;
}

.square.light{
background:var(--square-light);
}

.square.dark{
background:var(--square-dark);
}

.piece{
position:relative;
width:78%;
height:78%;
border-radius:50%;
box-shadow:inset 0 -6px 8px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
transition:transform .15s ease, box-shadow .15s ease;
}

.piece::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:
radial-gradient(circle at 50% 50%,
transparent 0 70%,
rgba(0,0,0,.22) 70% 76%,
transparent 76% 82%,
rgba(255,255,255,.14) 82% 86%,
transparent 86% 100%);
pointer-events:none;
}

.piece::after{
content:"";
position:absolute;
inset:14%;
border-radius:50%;
border:1px solid rgba(255,255,255,.18);
box-shadow:inset 0 2px 3px rgba(255,255,255,.25), inset 0 -3px 5px rgba(0,0,0,.25);
pointer-events:none;
}

.piece.lifted{
transform:scale(1.12);
box-shadow:inset 0 -6px 8px rgba(0,0,0,.35),0 10px 18px rgba(0,0,0,.55);
}

@keyframes mustCapturePulse{
0%,100%{ box-shadow:inset 0 -6px 8px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.45), 0 0 0 0 rgba(239,68,68,.65); }
50%{ box-shadow:inset 0 -6px 8px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.45), 0 0 0 6px rgba(239,68,68,0); }
}

.piece.in-danger{
animation:mustCapturePulse 1.1s ease-in-out infinite;
}

.piece-dark{
background:
radial-gradient(circle at 35% 30%,
color-mix(in srgb, var(--piece-dark) 70%, white),
var(--piece-dark) 55%,
color-mix(in srgb, var(--piece-dark) 70%, black) 100%);
border:2px solid color-mix(in srgb, var(--piece-dark) 55%, black);
}

.piece-light{
background:
radial-gradient(circle at 35% 30%,
color-mix(in srgb, var(--piece-light) 60%, white),
var(--piece-light) 55%,
color-mix(in srgb, var(--piece-light) 75%, black) 100%);
border:2px solid color-mix(in srgb, var(--piece-light) 70%, black);
}

.piece i{
font-size:16px;
}

.piece-dark i{
color:var(--gold);
}

.piece-light i{
color:#B45309;
}

.square.selected{
box-shadow:inset 0 0 0 4px var(--accent);
}

.square.hint{
box-shadow:inset 0 0 0 4px rgba(255,255,255,.35);
cursor:pointer;
}

.player-row.active-turn{
border-bottom-color:var(--gold);
}

.player-row.active-turn .timer{
color:var(--gold);
}

.panel-column{
width:360px;
align-self:center;
display:flex;
flex-direction:column;
gap:14px;
}

.mode-toggle{
display:none;
gap:10px;
}

.mode-toggle.visible{
display:flex;
}

.mode-btn{
flex:1;
padding:12px;
border:1px solid #334155;
border-radius:10px;
background:transparent;
color:var(--muted);
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
transition:.2s;
}

.mode-btn:hover{
border-color:var(--accent);
color:var(--text);
}

.mode-btn.active{
border-color:var(--accent);
background:rgba(36,150,237,.12);
color:var(--accent);
}

.search-dropdown{
display:none;
position:relative;
}

.search-dropdown.visible{
display:block;
}

.search-game-btn{
width:100%;
padding:14px;
border:0;
border-radius:12px;
background:var(--accent);
color:white;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
transition:.2s;
}

.search-game-btn:hover{
background:var(--accent-hover);
box-shadow:0 0 20px rgba(36,150,237,.35);
}

.search-dropdown.open .dropdown-arrow{
transform:rotate(180deg);
}

.search-dropdown-menu{
position:absolute;
top:calc(100% + 8px);
left:0;
right:0;
background:var(--panel);
border:1px solid #334155;
border-radius:10px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.4);
opacity:0;
visibility:hidden;
transform:translateY(-8px);
transition:.2s;
z-index:10;
}

.invite-game-btn{
background:transparent;
border:1px solid var(--accent);
color:var(--accent);
}

.invite-game-btn:hover{
background:rgba(36,150,237,.1);
box-shadow:none;
}

.invite-link-box{
margin-top:10px;
padding:14px;
background:#0B1220;
border:1px solid #334155;
border-radius:10px;
}

.invite-link-box small{
display:block;
color:var(--muted);
margin-bottom:8px;
}

.invite-link-row{
display:flex;
gap:8px;
}

.invite-link-row input{
flex:1;
min-width:0;
padding:10px 12px;
border:1px solid #334155;
border-radius:8px;
background:var(--panel);
color:var(--text);
font-size:13px;
}

#invite-copy-btn{
padding:10px 14px;
border:1px solid #334155;
border-radius:8px;
background:transparent;
color:var(--text);
cursor:pointer;
transition:.2s;
}

#invite-copy-btn:hover{
border-color:var(--accent);
color:var(--accent);
}

.search-dropdown.open .search-dropdown-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.search-dropdown-item{
padding:14px 16px;
display:flex;
align-items:center;
gap:12px;
cursor:pointer;
font-weight:500;
color:var(--text);
}

.search-dropdown-item:hover{
background:var(--accent);
color:white;
}

.search-dropdown-item:hover i{
color:white;
}

.search-dropdown-item i{
color:var(--accent);
width:18px;
text-align:center;
}

.bot-difficulty-name{
flex:1;
}

.bot-difficulty-rating{
color:var(--muted);
font-size:12px;
font-weight:700;
background:rgba(255,255,255,.06);
padding:3px 8px;
border-radius:999px;
}

.search-dropdown-item:hover .bot-difficulty-rating{
color:white;
background:rgba(255,255,255,.18);
}

.bot-difficulty-item.active-choice{
background:rgba(36,150,237,.12);
color:var(--accent);
}

.side-panel{
width:100%;
height:auto;
display:flex;
flex-direction:column;
background:linear-gradient(180deg,#1E293B,#161F2E);
border:1px solid #334155;
border-radius:16px;
padding:18px;
box-shadow:0 20px 45px rgba(0,0,0,.35);
}

.player-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:4px 2px;
border-bottom:1px solid rgba(255,255,255,.06);
}

.your-row{
border-bottom-color:rgba(36,150,237,.3);
}

.player-info{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}

.player-info .avatar{
width:30px;
height:30px;
font-size:13px;
}

.player-info b{
display:block;
font-size:14px;
}

.player-info small{
display:block;
color:var(--muted);
font-size:12px;
}

.mini-profile-trigger{
position:relative;
cursor:default;
}

.mini-profile{
position:absolute;
top:calc(100% + 10px);
left:0;
width:220px;
background:var(--panel);
border:1px solid #334155;
border-radius:12px;
padding:14px;
box-shadow:0 20px 45px rgba(0,0,0,.45);
z-index:30;
display:none;
flex-direction:column;
gap:12px;
overflow:hidden;
}

.mini-profile-trigger:hover .mini-profile{
display:flex;
}

.mini-profile-banner{
height:50px;
margin:-14px -14px 0;
background:
conic-gradient(rgba(255,255,255,.05) 0deg 90deg,transparent 90deg 180deg,rgba(255,255,255,.05) 180deg 270deg,transparent 270deg 360deg),
linear-gradient(120deg,var(--accent),#0B1220 70%);
background-size:40px 40px, cover;
}

.mini-profile-banner.has-banner-image{
background-image:var(--banner-image);
background-size:cover;
background-position:center;
}

.mini-profile .profile{
padding:0;
margin:0;
pointer-events:none;
}

.mini-profile .profile .avatar{
width:42px;
height:42px;
font-size:16px;
}

.mini-profile .profile b{
font-size:15px;
}

.mini-profile-stats{
display:flex;
border-top:1px solid #334155;
padding-top:10px;
}

.mini-profile-win,
.mini-profile-loss{
flex:1 1 50%;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:13px;
font-weight:700;
}

.mini-profile-win{ color:#22C55E; }
.mini-profile-win i{ color:#22C55E; }
.mini-profile-loss{ color:#EF4444; }
.mini-profile-loss i{ color:#EF4444; }

.timer{
font-size:16px;
font-weight:700;
font-variant-numeric:tabular-nums;
color:var(--text);
display:inline-block;
}

@keyframes timerPulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.18);}
}

.timer-pulse{
color:#EF4444;
animation:timerPulse 1s ease-in-out infinite;
}

.move-log{
flex:1;
min-height:0;
margin:14px 0;
background:#0B1220;
border:1px solid #334155;
border-radius:12px;
padding:14px;
display:flex;
flex-direction:column;
}

.move-log-title{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
font-weight:700;
margin-bottom:10px;
}

.move-log-body{
flex:1;
min-height:220px;
max-height:340px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:6px;
}

.move-log-empty{
color:var(--muted);
font-size:13px;
font-style:italic;
}

.move-entry{
display:flex;
gap:8px;
font-size:14px;
}

.system-message{
color:var(--muted);
font-size:12px;
font-style:italic;
}

.move-number{
color:var(--muted);
min-width:20px;
}

.game-actions{
position:relative;
display:flex;
gap:10px;
}

.action-btn{
flex:1;
border:none;
border-radius:8px;
background:transparent;
color:var(--muted);
font-size:16px;
padding:10px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
}

.cancel-btn:hover{
color:var(--gold);
background:rgba(251,191,36,.08);
}

.draw-btn:hover{
color:var(--accent);
background:rgba(36,150,237,.08);
}

.resign-btn:hover{
color:#EF4444;
background:rgba(239,68,68,.08);
}

.action-btn:disabled{
opacity:.35;
cursor:not-allowed;
pointer-events:none;
}

@media(max-width:1000px){
.game-page{
flex-direction:column;
padding:24px 16px;
}
}

@media(max-width:640px){
.game-page{
padding:16px;
gap:16px;
--board-size:min(calc(100vw - 64px),420px);
}

.board-wrapper{
grid-template-columns:20px var(--board-size);
grid-template-rows:var(--board-size) 20px;
}

.panel-column{
width:min(calc(100vw - 32px),420px);
}

.move-log{
margin:10px 0;
padding:10px;
}

.move-log-body{
min-height:90px;
max-height:150px;
}
}

.auth-box{
display:flex;
align-items:center;
gap:12px;
}

.login-btn{
display:flex;
align-items:center;
gap:8px;
padding:10px 16px;
border:1px solid #334155;
border-radius:8px;
background:var(--panel);
color:var(--text);
font-weight:600;
cursor:pointer;
}

.login-btn:hover{
border-color:var(--accent);
}

.magic-link-form{
display:flex;
gap:6px;
}

.magic-link-form input{
padding:10px 12px;
border:1px solid #334155;
border-radius:8px;
background:var(--panel);
color:var(--text);
width:180px;
}

.magic-link-form button{
padding:10px 12px;
border:0;
border-radius:8px;
background:var(--accent);
color:white;
cursor:pointer;
}

#magic-link-status,
#gate-magic-link-status{
color:var(--muted);
}

@media(max-width:640px){
.topbar{
padding:0 14px;
gap:10px;
}

.logo-text{
display:none;
}

.profile-text{
display:none;
}

.login-btn-text{
display:none;
}

.login-btn{
padding:10px 12px;
}

#profile-guest .magic-link-form{
display:none;
}
}

.auth-gate{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:60px;
min-height:calc(100vh - 70px);
padding:40px;
}

.auth-gate-board{
--board-size:400px;
}

.auth-gate-panel{
max-width:420px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}

.auth-gate-panel h1{
font-size:38px;
margin:0;
}

.auth-gate-panel p{
color:var(--muted);
font-size:17px;
margin:0;
}

.auth-gate-divider{
display:flex;
align-items:center;
gap:14px;
width:100%;
color:var(--muted);
font-size:13px;
text-transform:uppercase;
letter-spacing:.05em;
}

.auth-gate-divider::before,
.auth-gate-divider::after{
content:"";
flex:1;
height:1px;
background:#334155;
}

.guest-play-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
padding:14px 16px;
border:1px solid #334155;
border-radius:8px;
background:transparent;
color:var(--text);
font-weight:600;
text-decoration:none;
transition:.2s;
}

.guest-play-btn:hover{
border-color:var(--accent);
color:var(--accent);
}

.guest-play-btn i{
color:var(--accent);
}

@media(max-width:900px){
.auth-gate{
padding:20px;
text-align:center;
}

.auth-gate-board{
--board-size:min(85vw,340px);
}

.auth-gate-panel{
align-items:center;
}
}

.profile-page{
display:flex;
justify-content:center;
padding:50px 30px;
}

.profile-card{
width:100%;
max-width:720px;
background:var(--panel);
border:1px solid #334155;
border-radius:20px;
overflow:hidden;
box-shadow:0 25px 60px rgba(0,0,0,.4);
}

.profile-banner{
position:relative;
height:130px;
background:
conic-gradient(rgba(255,255,255,.05) 0deg 90deg,transparent 90deg 180deg,rgba(255,255,255,.05) 180deg 270deg,transparent 270deg 360deg),
linear-gradient(120deg,var(--accent),#0B1220 70%);
background-size:40px 40px, cover;
}

.profile-banner.has-banner-image{
background-image:var(--banner-image);
background-size:cover;
background-position:center;
}

.banner-edit-btn{
position:absolute;
bottom:10px;
right:14px;
width:34px;
height:34px;
border-radius:50%;
background:rgba(11,18,32,.7);
color:white;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border:1px solid rgba(255,255,255,.25);
font-size:13px;
}

.banner-edit-btn:hover{
background:rgba(11,18,32,.9);
}

.profile-identity{
position:relative;
display:flex;
align-items:flex-end;
gap:20px;
padding:0 32px;
margin-top:-48px;
}

.profile-avatar-lg{
width:112px;
height:112px;
border-radius:50%;
background:radial-gradient(circle at 35% 30%,var(--accent),#123a5c 70%);
border:5px solid var(--panel);
display:flex;
align-items:center;
justify-content:center;
font-size:44px;
font-weight:800;
flex-shrink:0;
overflow:hidden;
}

.profile-avatar-wrap{
position:relative;
flex-shrink:0;
}

.avatar-edit-btn{
position:absolute;
bottom:2px;
right:2px;
width:34px;
height:34px;
border-radius:50%;
background:var(--accent);
color:white;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border:3px solid var(--panel);
font-size:13px;
}

.avatar-edit-btn:hover{
background:var(--accent-hover);
}

.profile-identity-text{
flex:1;
padding-bottom:6px;
}

.profile-identity-text h1{
margin:0;
font-size:26px;
}

.profile-name-input{
font-size:26px;
font-weight:800;
font-family:inherit;
background:#0B1220;
color:var(--text);
border:1px solid #334155;
border-radius:8px;
padding:6px 10px;
width:100%;
max-width:280px;
}

.profile-identity-text p{
margin:4px 0 0;
color:var(--muted);
}

.profile-edit-error{
display:block;
color:#EF4444;
margin-top:4px;
}

.rating-badge{
display:flex;
align-items:center;
gap:8px;
padding:10px 16px;
margin-bottom:10px;
background:rgba(251,191,36,.12);
border:1px solid rgba(251,191,36,.4);
border-radius:999px;
color:var(--gold);
font-weight:800;
font-size:18px;
}

.like-btn{
display:flex;
align-items:center;
gap:8px;
padding:10px 16px;
margin-bottom:10px;
background:rgba(148,163,184,.1);
border:1px solid #334155;
border-radius:999px;
color:var(--muted);
font-weight:800;
font-size:16px;
cursor:pointer;
transition:.2s;
}

.like-btn:hover{
border-color:#EF4444;
color:#EF4444;
}

.like-btn.liked{
background:rgba(239,68,68,.14);
border-color:#EF4444;
color:#EF4444;
}

.friend-btn{
display:flex;
align-items:center;
gap:8px;
padding:10px 16px;
margin-bottom:10px;
background:rgba(148,163,184,.1);
border:1px solid #334155;
border-radius:999px;
color:var(--muted);
font-weight:800;
font-size:16px;
cursor:pointer;
transition:.2s;
}

.friend-btn:hover{
border-color:var(--accent);
color:var(--accent);
}

.friend-btn.pending{
background:rgba(251,191,36,.1);
border-color:var(--gold);
color:var(--gold);
}

.friend-btn.incoming{
background:rgba(36,150,237,.14);
border-color:var(--accent);
color:var(--accent);
}

.friend-btn.accepted{
background:rgba(34,197,94,.14);
border-color:#22C55E;
color:#22C55E;
}

.friend-decline-btn{
padding:10px 16px;
margin-bottom:10px;
background:transparent;
border:1px solid #334155;
border-radius:999px;
color:var(--muted);
font-weight:700;
font-size:14px;
cursor:pointer;
transition:.2s;
}

.friend-decline-btn:hover{
border-color:#EF4444;
color:#EF4444;
}

.leaderboard-player-link{
color:inherit;
text-decoration:none;
}

.leaderboard-player-link:hover{
color:var(--accent);
text-decoration:underline;
}

.profile-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
gap:14px;
padding:32px;
}

.stat-tile{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
padding:18px 8px;
background:#0B1220;
border:1px solid #334155;
border-radius:14px;
text-align:center;
}

.stat-value{
font-size:24px;
font-weight:800;
white-space:nowrap;
}

.stat-label{
color:var(--muted);
font-size:10px;
text-transform:uppercase;
letter-spacing:.03em;
white-space:nowrap;
}

.profile-stats-note{
text-align:center;
color:var(--muted);
font-size:13px;
margin:-16px 0 0;
padding-bottom:20px;
}

.match-history{
padding:0 32px 32px;
}

.match-history h2{
font-size:16px;
margin:0 0 14px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.05em;
}

.history-empty{
color:var(--muted);
font-size:14px;
text-align:center;
padding:20px 0;
}

.history-list{
display:flex;
flex-direction:column;
gap:10px;
}

.history-row{
padding:14px 16px;
background:#0B1220;
border:1px solid #334155;
border-left:4px solid #334155;
border-radius:10px;
}

.history-row.history-win{ border-left-color:#22C55E; }
.history-row.history-loss{ border-left-color:#EF4444; }
.history-row.history-draw{ border-left-color:#FBBF24; }

.history-main{
display:flex;
align-items:baseline;
gap:10px;
flex-wrap:wrap;
}

.history-result{
font-weight:800;
font-size:14px;
}

.history-win .history-result{ color:#22C55E; }
.history-loss .history-result{ color:#EF4444; }
.history-draw .history-result{ color:#FBBF24; }

.history-opponent{
color:var(--text);
font-size:14px;
}

.history-rating-change{
font-size:12px;
font-weight:700;
padding:2px 8px;
border-radius:999px;
}

.history-rating-up{ color:#22C55E; background:rgba(34,197,94,.12); }
.history-rating-down{ color:#EF4444; background:rgba(239,68,68,.12); }
.history-rating-flat{ color:var(--muted); background:rgba(148,163,184,.12); }

.history-date{
margin-left:auto;
color:var(--muted);
font-size:12px;
}

.history-detail{
display:flex;
gap:16px;
flex-wrap:wrap;
margin-top:8px;
color:var(--muted);
font-size:12px;
}

.history-detail i{
margin-right:4px;
}

.history-untracked{
font-style:italic;
opacity:.7;
}

.profile-actions{
padding:0 32px 32px;
display:flex;
justify-content:flex-end;
gap:10px;
flex-wrap:wrap;
}

.logout-btn,
.edit-profile-btn,
.save-profile-btn,
.cancel-edit-btn{
display:flex;
align-items:center;
gap:10px;
padding:12px 20px;
border:1px solid #334155;
border-radius:10px;
background:transparent;
color:var(--text);
font-weight:600;
cursor:pointer;
transition:.2s;
}

.logout-btn:hover{
border-color:#EF4444;
color:#EF4444;
background:rgba(239,68,68,.08);
}

.edit-profile-btn:hover{
border-color:var(--accent);
color:var(--accent);
background:rgba(36,150,237,.08);
}

.save-profile-btn{
border-color:var(--accent);
background:var(--accent);
color:white;
}

.save-profile-btn:hover{
background:var(--accent-hover);
}

.cancel-edit-btn:hover{
border-color:var(--muted);
}

@media(max-width:640px){
.profile-identity{
flex-direction:column;
align-items:center;
text-align:center;
margin-top:-56px;
}

.rating-badge{
margin-bottom:0;
}

.profile-stats{
grid-template-columns:repeat(2,1fr);
}
}

.leaderboard-table-scroll{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

.leaderboard-table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

.leaderboard-table th,
.leaderboard-table td{
padding:12px 14px;
text-align:left;
border-bottom:1px solid #334155;
}

.leaderboard-table th{
color:var(--muted);
font-size:12px;
text-transform:uppercase;
letter-spacing:.05em;
}

.leaderboard-table tbody tr:hover{
background:rgba(36,150,237,.08);
}

.leaderboard-you{
background:rgba(36,150,237,.14);
}

.leaderboard-you td{
font-weight:700;
color:var(--accent);
}

.leaderboard-gap td{
text-align:center;
color:var(--muted);
padding:6px;
}

@media(max-width:640px){
.leaderboard-table th,
.leaderboard-table td{
padding:10px 8px;
font-size:13px;
}
}

.learn-page{
display:flex;
flex-direction:column;
align-items:center;
gap:60px;
max-width:960px;
margin:0 auto;
padding:50px 30px 90px;
}

.learn-intro{
text-align:center;
max-width:600px;
}

.learn-intro h1{
font-size:34px;
margin:0 0 14px;
}

.learn-intro p{
color:var(--muted);
font-size:16px;
line-height:1.6;
}

.rule-row{
display:flex;
align-items:center;
gap:50px;
width:100%;
}

.rule-row.reverse{
flex-direction:row-reverse;
}

.rule-text{
flex:1;
min-width:240px;
}

.rule-text h2{
margin:0 0 12px;
font-size:22px;
}

.rule-text p{
color:var(--muted);
line-height:1.65;
margin:0 0 12px;
}

.rule-text strong{
color:var(--text);
}

.rule-demo{
--board-size:220px;
flex-shrink:0;
}

.learn-cta{
display:flex;
gap:16px;
flex-wrap:wrap;
justify-content:center;
}

.learn-cta button{
padding:15px 30px;
border:0;
border-radius:10px;
background:var(--accent);
color:white;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:.2s;
}

.learn-cta button:hover{
background:var(--accent-hover);
}

.learn-cta button:last-child{
background:transparent;
border:1px solid #334155;
color:var(--text);
}

.learn-cta button:last-child:hover{
border-color:var(--accent);
color:var(--accent);
}

@media(max-width:760px){
.rule-row,
.rule-row.reverse{
flex-direction:column;
gap:24px;
text-align:center;
padding-top:24px;
border-top:1px solid #334155;
}

.learn-intro + .rule-row{
padding-top:0;
border-top:0;
}

.rule-row.reverse .rule-text{
order:1;
}

.rule-row.reverse .rule-demo{
order:2;
}

.rule-demo{
--board-size:min(80vw,260px);
margin:0 auto;
}
}

.puzzle-page{
display:flex;
flex-direction:column;
align-items:center;
gap:36px;
max-width:900px;
margin:0 auto;
padding:50px 30px 90px;
}

.puzzle-intro{
text-align:center;
max-width:560px;
}

.puzzle-intro h1{
font-size:32px;
margin:0 0 12px;
}

.puzzle-intro p{
color:var(--muted);
font-size:16px;
line-height:1.6;
}

.puzzle-intro em{
color:var(--text);
font-style:normal;
font-weight:600;
}

.puzzle-layout{
display:flex;
align-items:flex-start;
gap:40px;
flex-wrap:wrap;
justify-content:center;
}

.puzzle-board-wrap{
--board-size:420px;
}

#puzzle-board{
cursor:pointer;
}

.puzzle-panel{
width:280px;
display:flex;
flex-direction:column;
gap:16px;
}

.difficulty-picker{
display:flex;
gap:8px;
}

.difficulty-btn{
flex:1;
padding:10px 8px;
border:1px solid #334155;
border-radius:8px;
background:transparent;
color:var(--muted);
font-weight:600;
font-size:13px;
cursor:pointer;
transition:.2s;
}

.difficulty-btn:hover{
border-color:var(--accent);
color:var(--text);
}

.difficulty-btn.active{
background:var(--accent);
border-color:var(--accent);
color:white;
}

.puzzle-target{
color:var(--muted);
font-size:13px;
font-weight:600;
}

.puzzle-status{
padding:14px;
background:#0B1220;
border:1px solid #334155;
border-radius:10px;
font-size:14px;
line-height:1.5;
min-height:48px;
}

.puzzle-status.good{
border-color:#22C55E;
color:#22C55E;
}

.puzzle-status.bad{
border-color:#EF4444;
color:#EF4444;
}

.puzzle-actions{
display:flex;
gap:10px;
}

.puzzle-btn{
flex:1;
padding:12px;
border:1px solid #334155;
border-radius:8px;
background:transparent;
color:var(--text);
font-weight:700;
cursor:pointer;
transition:.2s;
}

.puzzle-btn:hover{
border-color:var(--accent);
color:var(--accent);
}

.puzzle-btn-primary{
background:var(--accent);
border-color:var(--accent);
color:white;
}

.puzzle-btn-primary:hover{
background:var(--accent-hover);
color:white;
}

@media(max-width:760px){
.puzzle-layout{
flex-direction:column;
align-items:center;
}

.puzzle-board-wrap{
--board-size:min(88vw,380px);
}

.puzzle-panel{
width:100%;
max-width:380px;
}
}

.result-modal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(11,18,32,.75);
backdrop-filter:blur(3px);
z-index:100;
padding:20px;
animation:resultFadeIn .2s ease;
}

@keyframes resultFadeIn{
from{ opacity:0; }
to{ opacity:1; }
}

.result-modal-card{
width:100%;
max-width:360px;
background:var(--panel);
border:1px solid #334155;
border-radius:18px;
padding:36px 30px;
text-align:center;
box-shadow:0 30px 70px rgba(0,0,0,.5);
animation:resultPopIn .25s cubic-bezier(.22,.61,.36,1);
}

@keyframes resultPopIn{
from{ opacity:0; transform:translateY(12px) scale(.96); }
to{ opacity:1; transform:translateY(0) scale(1); }
}

.result-modal-icon{
width:64px;
height:64px;
margin:0 auto 18px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
background:rgba(148,163,184,.12);
color:var(--muted);
}

.result-modal-card h2{
margin:0 0 10px;
font-size:24px;
}

.result-modal-card p{
color:var(--muted);
line-height:1.5;
margin:0 0 26px;
}

.result-modal-btn{
width:100%;
padding:14px;
border:0;
border-radius:10px;
background:var(--accent);
color:white;
font-weight:700;
font-size:15px;
cursor:pointer;
transition:.2s;
}

.result-modal-btn:hover{
background:var(--accent-hover);
}

.confirm-modal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(11,18,32,.75);
backdrop-filter:blur(3px);
z-index:100;
padding:20px;
animation:resultFadeIn .2s ease;
}

.confirm-modal-card{
width:100%;
max-width:340px;
background:var(--panel);
border:1px solid #334155;
border-radius:18px;
padding:30px;
text-align:center;
box-shadow:0 30px 70px rgba(0,0,0,.5);
animation:resultPopIn .25s cubic-bezier(.22,.61,.36,1);
}

.confirm-modal-card p{
margin:0 0 24px;
font-size:16px;
line-height:1.5;
}

.confirm-modal-actions{
display:flex;
gap:10px;
}

.confirm-modal-cancel-btn,
.confirm-modal-confirm-btn{
flex:1;
padding:13px;
border-radius:10px;
font-weight:700;
font-size:14px;
cursor:pointer;
transition:.2s;
}

.confirm-modal-cancel-btn{
border:1px solid #334155;
background:transparent;
color:var(--text);
}

.confirm-modal-cancel-btn:hover{
border-color:var(--muted);
}

.confirm-modal-confirm-btn{
border:0;
background:var(--accent);
color:white;
}

.confirm-modal-confirm-btn:hover{
background:var(--accent-hover);
}

.result-modal.result-win .result-modal-icon{
background:rgba(34,197,94,.14);
color:#22C55E;
}

.result-modal.result-win .result-modal-card h2{
color:#22C55E;
}

.result-modal.result-loss .result-modal-icon{
background:rgba(239,68,68,.14);
color:#EF4444;
}

.result-modal.result-loss .result-modal-card h2{
color:#EF4444;
}

.result-modal.result-draw .result-modal-icon{
background:rgba(251,191,36,.14);
color:var(--gold);
}

.result-modal.result-draw .result-modal-card h2{
color:var(--gold);
}

.result-modal.result-warn .result-modal-icon{
background:rgba(148,163,184,.14);
color:var(--muted);
}

.friends-list{
display:flex;
flex-direction:column;
gap:10px;
margin-top:16px;
}

.friend-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:12px 16px;
background:#0B1220;
border:1px solid #334155;
border-radius:10px;
flex-wrap:wrap;
}

.friend-row-info{
display:flex;
align-items:center;
gap:12px;
color:inherit;
text-decoration:none;
min-width:0;
}

.friend-row-info .avatar{
width:42px;
height:42px;
font-weight:800;
}

.friend-row-info b{
display:block;
}

.friend-row-info small{
display:block;
color:var(--muted);
font-size:12px;
}

.friend-row-info:hover b{
color:var(--accent);
}

.friend-row-actions{
display:flex;
gap:8px;
flex-shrink:0;
}

.friend-row-btn{
padding:8px 14px;
border-radius:8px;
font-weight:700;
font-size:13px;
cursor:pointer;
transition:.2s;
border:1px solid #334155;
background:transparent;
color:var(--text);
}

.friend-row-accept{
border-color:#22C55E;
color:#22C55E;
}

.friend-row-accept:hover{
background:rgba(34,197,94,.12);
}

.friend-row-decline:hover{
border-color:#EF4444;
color:#EF4444;
background:rgba(239,68,68,.08);
}

.friend-row-invite{
border-color:var(--accent);
color:var(--accent);
}

.friend-row-invite:hover{
background:rgba(36,150,237,.12);
}

.invite-toast{
position:fixed;
bottom:24px;
right:24px;
width:300px;
background:var(--panel);
border:1px solid #334155;
border-radius:14px;
padding:18px;
box-shadow:0 25px 60px rgba(0,0,0,.5);
z-index:200;
animation:resultPopIn .25s cubic-bezier(.22,.61,.36,1);
}

.invite-toast-text{
display:flex;
align-items:center;
gap:12px;
color:var(--text);
font-size:14px;
line-height:1.4;
margin-bottom:14px;
}

.invite-toast-text i{
color:var(--accent);
font-size:22px;
flex-shrink:0;
}

.invite-toast-actions{
display:flex;
gap:8px;
}

.invite-toast-join,
.invite-toast-dismiss{
flex:1;
padding:10px;
border-radius:8px;
font-weight:700;
font-size:13px;
cursor:pointer;
transition:.2s;
}

.invite-toast-join{
border:0;
background:var(--accent);
color:white;
}

.invite-toast-join:hover{
background:var(--accent-hover);
}

.invite-toast-dismiss{
border:1px solid #334155;
background:transparent;
color:var(--muted);
}

.invite-toast-dismiss:hover{
border-color:var(--muted);
color:var(--text);
}

@media(max-width:640px){
.invite-toast{
left:16px;
right:16px;
bottom:16px;
width:auto;
}
}

.boss-modal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(11,18,32,.8);
backdrop-filter:blur(3px);
z-index:100;
padding:20px;
animation:resultFadeIn .2s ease;
}

.boss-modal-card{
width:100%;
max-width:360px;
background:var(--panel);
border:1px solid #334155;
border-radius:18px;
overflow:hidden;
text-align:center;
box-shadow:0 30px 80px rgba(0,0,0,.6);
animation:resultPopIn .25s cubic-bezier(.22,.61,.36,1);
}

.boss-modal-banner{
height:90px;
background:linear-gradient(120deg,#7f1d1d,#0F172A 70%);
background-size:cover;
background-position:center;
}

.boss-modal-avatar{
width:88px;
height:88px;
border-radius:50%;
margin:-52px auto 0;
border:5px solid var(--panel);
background:radial-gradient(circle at 35% 30%,#8a2c2c,#3a0f0f 70%);
background-size:cover;
background-position:center;
box-shadow:0 10px 25px rgba(0,0,0,.5);
}

.boss-modal-tag{
margin-top:12px;
color:var(--muted);
font-size:12px;
text-transform:uppercase;
letter-spacing:.05em;
}

.boss-modal-card h2{
margin:6px 0 0;
font-size:24px;
color:#EF4444;
}

.boss-modal-rating{
display:inline-flex;
align-items:center;
gap:6px;
margin-top:8px;
padding:6px 14px;
background:rgba(251,191,36,.12);
border:1px solid rgba(251,191,36,.4);
border-radius:999px;
color:var(--gold);
font-weight:800;
}

.boss-modal-stats{
display:flex;
justify-content:center;
gap:20px;
margin-top:14px;
font-size:14px;
font-weight:700;
}

.boss-modal-wins{ color:#22C55E; }
.boss-modal-losses{ color:#EF4444; }

.boss-modal-desc{
margin:14px 24px 0;
color:var(--muted);
font-size:13px;
line-height:1.5;
}

.boss-modal-actions{
display:flex;
gap:10px;
padding:20px 24px 24px;
}

.boss-modal-decline-btn,
.boss-modal-fight-btn{
flex:1;
padding:13px;
border-radius:10px;
font-weight:700;
font-size:14px;
cursor:pointer;
transition:.2s;
}

.boss-modal-decline-btn{
border:1px solid #334155;
background:transparent;
color:var(--text);
}

.boss-modal-decline-btn:hover{
border-color:var(--muted);
}

.boss-modal-fight-btn{
border:0;
background:#EF4444;
color:white;
}

.boss-modal-fight-btn:hover{
background:#dc2626;
}