*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0b1020;--card:#111827;--card2:#172033;--line:#253047;--text:#f8fafc;--muted:#94a3b8;
  --light:#f0d9b5;--dark:#769656;--accent:#84cc16;--yellow:#fde047;--blue:#38bdf8;--red:#fb7185;
}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 20% 0%,#1e2a44 0,#0b1020 42%,#070b14 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif}
body{padding:env(safe-area-inset-top) 14px env(safe-area-inset-bottom)}
.app{max-width:720px;margin:0 auto;padding:18px 0 24px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
h1{font-size:42px;line-height:1;margin:0 0 8px;font-weight:900;letter-spacing:-1.5px}
p{margin:0;color:var(--muted);font-size:20px;line-height:1.35}
button{border:0;border-radius:18px;background:#263247;color:var(--text);font-weight:800;font-size:18px;padding:14px 20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
button:active{transform:scale(.98)}
.pill{border-radius:24px;min-width:86px;background:#20293c}
.pill.small{font-size:16px;min-width:78px;padding:12px 16px}
.board-shell{padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:34px;background:rgba(15,23,42,.68);box-shadow:0 24px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);margin-bottom:18px}
.board{width:100%;aspect-ratio:1/1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:22px;overflow:hidden;border:3px solid rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.28);touch-action:manipulation;background:#111827}
.square{position:relative;display:flex;align-items:center;justify-content:center;font-size:min(10vw,64px);user-select:none;cursor:pointer}
.light{background:var(--light)}.dark{background:var(--dark)}
.square.selected{outline:5px solid var(--yellow);outline-offset:-5px}
.square.last{box-shadow:inset 0 0 0 5px rgba(56,189,248,.85)}
.square.legal:after{content:"";position:absolute;width:25%;height:25%;border-radius:999px;background:rgba(0,0,0,.28)}
.square.capture:after{content:"";position:absolute;inset:10%;border-radius:999px;border:5px solid rgba(0,0,0,.25)}
.piece{filter:drop-shadow(0 3px 2px rgba(0,0,0,.25));line-height:1}
.coord{position:absolute;left:5px;bottom:3px;font-size:11px;font-weight:900;color:rgba(0,0,0,.48)}
.panel{border-radius:30px;background:rgba(15,23,42,.76);border:1px solid rgba(255,255,255,.08);padding:20px;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.status-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.label{text-transform:uppercase;letter-spacing:4px;color:#9aa8bd;font-weight:900;font-size:13px;margin-bottom:8px}
.status{font-size:30px;font-weight:900;letter-spacing:-.6px}
.coach-card,.moves-card{background:rgba(30,41,59,.78);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:18px;margin-bottom:16px;font-size:20px;line-height:1.35}
.moves-card summary{cursor:pointer;list-style:none}
.moves-card summary::-webkit-details-marker{display:none}
.moves{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#e2e8f0;font-size:16px;white-space:pre-wrap;margin-top:8px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#hintBtn{background:linear-gradient(180deg,#84cc16,#65a30d);color:#102008}
#flipBtn{background:#263247}
@media(max-width:430px){
  body{padding-left:10px;padding-right:10px}
  .app{padding-top:14px}
  h1{font-size:39px}
  p{font-size:19px}
  .board-shell{padding:14px;border-radius:30px}
  .panel{padding:18px}
  .coach-card{font-size:20px}
}