*{box-sizing:border-box}
:root{
  --bg:#0b0f19; --panel:#12192b; --panel2:#0e1526; --border:#1c2440; --text:#eaf0ff; --muted:#bcd0ff;
  --accent:#64d2ff; --accent-dark:#43b7e6;
}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text)}
a{text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.site-header{background:#0e1422;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.header-inner{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand img{height:36px}
.main-nav a{color:#cfe0ff;margin-left:14px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;margin:10px 0}
.form{display:grid;gap:10px;max-width:560px}
.form input,.form select,.form textarea{background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}
.board-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;max-width:560px;aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid var(--border)}
.square{display:flex;align-items:center;justify-content:center;font-size:34px}
.square.dark{background:#23325a}.square.light{background:#e6edf7;color:#0b0f19}
.moves{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}
.moves ol{margin:0;padding-left:20px}
.meta p{margin:6px 0}
.small{font-size:12px;color:var(--muted)}
.alert{padding:10px;border-radius:10px;margin:8px 0}.alert-danger{background:#4b1a1f;color:#ffd9de}.alert-success{background:#0f3d2e;color:#b8ffd9}

/* Buttons */
button, input[type="submit"], input[type="button"], input[type="reset"] { all: unset; display: inline-block; cursor: pointer; }
.button, .button-ghost,
a.button, button.button, input[type="submit"].button, input[type="button"].button {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:40px; padding:10px 18px; border-radius:10px; font-weight:600; line-height:1;
  text-decoration:none; border:1px solid transparent; user-select:none;
  transition: background .2s ease, border-color .2s ease, transform .08s ease; -webkit-tap-highlight-color:transparent;
}
.button, a.button, button.button, input[type="submit"].button, input[type="button"].button { background:var(--accent); color:#001018; }
.button:hover, a.button:hover, button.button:hover, input[type="submit"].button:hover, input[type="button"].button:hover { transform:translateY(-1px); background:var(--accent-dark); }
.button-ghost, a.button-ghost, button.button-ghost, input[type="submit"].button-ghost, input[type="button"].button-ghost, select.button-ghost {
  background:transparent; color:var(--accent); border-color:var(--accent);
}
.button-ghost:hover, a.button-ghost:hover, button.button-ghost:hover, input[type="submit"].button-ghost:hover, input[type="button"].button-ghost:hover, select.button-ghost:hover { background:rgba(100,210,255,.12); }
.button-danger, a.button-danger, button.button-danger, input[type="submit"].button-danger, input[type="button"].button-danger { background:#ff6b6b; color:#1a0003; }
.button-danger:hover, a.button-danger:hover, button.button-danger:hover, input[type="submit"].button-danger:hover, input[type="button"].button-danger:hover { background:#ff4e4e; }
a.button:link, a.button:visited, a.button-ghost:link, a.button-ghost:visited, a.button-danger:link, a.button-danger:visited { text-decoration:none!important; }

/* Hero */
.hero{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--border);background:linear-gradient(135deg,#122040, #0b0f19)}
.hero-inner{display:grid;gap:14px;padding:36px 24px;align-items:center}
.hero h1{font-size:32px;margin:0}
.hero p{color:var(--muted);margin:0 0 8px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-img{border-radius:12px;max-height:260px;object-fit:cover;width:100%}
@media(min-width:900px){
  .hero-inner{grid-template-columns:1.2fr .8fr}
}