:root{
--bg:#0b0f0c;
--card:#121816;
--border:#1e2623;
--green:#7AC943;
--green2:#5fbf30;
--text:#f4f6f5;
--muted:#8c9b94;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
font-family:Inter;
background:var(--bg);
color:var(--text);
display:flex;
justify-content:center;
padding:20px;
}

.app{
width:100%;
max-width:900px;
display:flex;
flex-direction:column;
gap:25px;
padding-bottom: 150px;
}

.logo-wrap{
display:flex;
justify-content:center;
}

.logo-wrap img{
display:block;
max-width:180px;
width:100%;
height:auto;
}

.header{text-align:center;}
.header h1{font-size:28px;margin-bottom:8px;}
.header p{color:var(--muted);}

.search{
background:var(--card);
padding:20px;
border-radius:12px;
border:1px solid var(--border);
display:flex;
flex-direction:column;
gap:10px;
}

.search input{
padding:14px;
border-radius:8px;
border:1px solid var(--border);
background:#0f1412;
color:white;
}

.search button{
background:linear-gradient(135deg,var(--green),var(--green2));
border:none;
padding:14px;
border-radius:8px;
font-weight:600;
cursor:pointer;
}

.card{
background:var(--card);
border:1px solid var(--border);
border-radius:12px;
padding:20px;
}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-top:15px;
}

.stat{
background:#0f1412;
padding:14px;
border-radius:8px;
border:1px solid var(--border);
}

.stat h3{
font-size:14px;
color:var(--muted);
}

.stat p{
font-size:18px;
}

.opening{
display:flex;
justify-content:space-between;
align-items:flex-start;
padding:8px 0;
border-bottom:1px solid var(--border);
}

.opening strong{
display:block;
font-weight:600;
}

.opening small{
display:block;
color:var(--muted);
margin-top:4px;
}

.ai{
background:#0f1412;
border-radius:8px;
padding:15px;
line-height:1.6;
white-space:pre-wrap;
}

.chat textarea{
width:100%;
padding:12px;
border-radius:8px;
border:1px solid var(--border);
background:#0f1412;
color:white;
margin-top:10px;
resize:none;
}

.chat button{
margin-top:10px;
padding:12px;
background:linear-gradient(135deg,var(--green),var(--green2));
border:none;
border-radius:8px;
cursor:pointer;
}

.report-cta{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
width:90%;
max-width:500px;
z-index:999;
padding-bottom:env(safe-area-inset-bottom);
}

.report-cta a{
display:block;
text-align:center;
padding:18px;
border-radius:12px;
font-size:18px;
font-weight:600;
text-decoration:none;
color:rgb(0, 0, 0);
background:linear-gradient(135deg,#7AC943,#5fbf30);
box-shadow:0 6px 20px rgba(0,0,0,0.4);
transition:transform 0.15s ease, box-shadow 0.15s ease;
}

.report-cta{
animation:pop 0.4s ease;
}

@keyframes pop{
0%{transform:translateX(-50%) scale(0.9);opacity:0}
100%{transform:translateX(-50%) scale(1);opacity:1}
}

.report-cta a:hover{
transform:translateY(-2px);
box-shadow:0 10px 28px rgba(0,0,0,0.5);
}

/* Position page (position/index.html) */
.position-page .position-card{display:flex;flex-direction:column;gap:14px;}
.position-page .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.position-page .row label{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 10px;
border:1px solid var(--border);
border-radius:999px;
background:#0f1412;
cursor:pointer;
}
.position-page .row input[type="radio"]{
appearance:none;
-webkit-appearance:none;
width:16px;
height:16px;
border-radius:50%;
border:2px solid #6f7a75;
display:grid;
place-content:center;
margin:0;
background:#0b0f0c;
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.position-page .row input[type="radio"]::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
transform:scale(0);
transition:transform .12s ease-in-out;
background:#0b0f0c;
}
.position-page .row input[type="radio"]:checked{
border-color:var(--green);
background:var(--green);
box-shadow:0 0 0 3px rgba(122,201,67,.2);
}
.position-page .row input[type="radio"]:checked::before{
transform:scale(1);
}
.position-page .row input[type="radio"]:focus-visible{
outline:none;
box-shadow:0 0 0 3px rgba(122,201,67,.35);
}
.position-page .muted{color:var(--muted);}
.position-page .err{color:#ff6b6b;white-space:pre-wrap;}
.position-page .ok{color:#8bf06a;white-space:pre-wrap;font-weight:600;}

.position-page .paletteWrap{display:flex;flex-direction:column;gap:10px;}
.position-page .palRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.position-page .palLabel{min-width:80px;font-weight:600;}
.position-page .palette{display:flex;flex-wrap:wrap;gap:6px;}

.position-page .pbtn{
border:1px solid var(--border);
background:#0f1412;
color:var(--text);
padding:8px 10px;
border-radius:8px;
cursor:pointer;
font-size:16px;
line-height:1;
}
.position-page .pbtn[aria-pressed="true"]{
background:linear-gradient(135deg,var(--green),var(--green2));
color:#000;
border:none;
}

.position-page .boardWrap{
display:grid;
grid-template-columns:22px repeat(8,1fr) 22px;
grid-template-rows:22px repeat(8,1fr) 22px;
width:min(100%,560px);
aspect-ratio:1/1;
height:auto;
margin:4px auto;
user-select:none;
}
.position-page .coord{
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
line-height:1;
color:var(--muted);
}
.position-page .sq{
display:flex;
align-items:center;
justify-content:center;
font-size:clamp(22px,5.3vw,44px);
line-height:1;
cursor:pointer;
min-width:0;
min-height:0;
border:1px solid #202a26;
box-sizing:border-box;
font-weight:700;
}
.position-page .light{background:#c6d0cb;}
.position-page .dark{background:#8f9b95;}
.position-page .sq:focus{outline:2px solid var(--green);outline-offset:-2px;}
.position-page .sq.piece-white{
color:#ffffff;
text-shadow:
0 0 1px #000,
0 0 2px #000,
0 1px 2px #000;
}
.position-page .sq.piece-black{
color:#0a0a0a;
text-shadow:
0 0 1px #fff,
0 0 2px #fff,
0 1px 2px #fff;
}

.position-page .action-row{display:flex;flex-direction:column;gap:10px;align-items:center;}
.position-page #nextBtn,
.position-page #clearBtn{
border:none;
padding:12px 14px;
border-radius:8px;
cursor:pointer;
font-weight:600;
}
.position-page #nextBtn{
width:100%;
background:linear-gradient(135deg,var(--green),var(--green2));
color:#000;
}
.position-page #clearBtn{background:#0f1412;color:var(--text);border:1px solid var(--border);}
.position-page button:disabled{opacity:.5;cursor:not-allowed;}

.position-page code{
background:#0f1412;
border:1px solid var(--border);
border-radius:6px;
padding:2px 6px;
white-space:nowrap;
overflow-wrap:normal;
}

@media (max-width:600px){
.position-page .boardWrap{
width:100%;
max-width:100%;
}
}

/* Simple burger menu (shared) */
.burger-nav{
position:fixed;
top:12px;
left:12px;
z-index:1200;
}

.burger-nav summary{
list-style:none;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--border);
border-radius:10px;
background:var(--card);
color:var(--text);
cursor:pointer;
font-size:22px;
line-height:1;
}

.burger-nav summary::-webkit-details-marker{
display:none;
}

.burger-panel{
margin-top:8px;
min-width:150px;
padding:8px;
border:1px solid var(--border);
border-radius:10px;
background:linear-gradient(135deg,var(--green),var(--green2));
box-shadow:0 8px 20px rgba(0,0,0,0.35);
}

.burger-panel a{
display:block;
padding:10px 12px;
border-radius:8px;
text-decoration:none;
color:#000;
font-weight:600;
}

.burger-panel a:hover{
background:rgba(255,255,255,0.25);
}