*{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;
}

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;
}

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

.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:hover .dropdown-menu,
.play-dropdown.open .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateX(0);
}

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

.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{
padding:14px;
display:flex;
gap:15px;
align-items:center;
color:var(--muted);
border-radius:8px;
cursor:pointer;
}

.menu div: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(3,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){
.sidebar{display:none}
.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{
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);
}

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

.square.light{
background:#CBD5E1;
}

.square.dark{
background:#475569;
}

.piece{
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;
}

.piece-dark{
background:radial-gradient(circle at 35% 30%,#8a2c2c,#5c1a1a 65%,#3d0f0f);
border:2px solid #2a0a0a;
}

.piece-light{
background:radial-gradient(circle at 35% 30%,#ffffff,#e2e8f0 65%,#b9c2ce);
border:2px solid #94A3B8;
}

.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;
}

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

.search-game-btn.visible{
display:flex;
}

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

.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;
}

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

.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;
}

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

.game-actions{
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;
}
}

@media(max-width:640px){
.game-page{
--board-size:min(85vw,420px);
}

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

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

.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{
color:var(--muted);
}