/* Шахматы VK Mini App. Light по умолчанию, dark — [data-scheme="dark"]. */
:root {
    --brand:#0f9b8a; --brand-2:#16b8a3; --accent:#5b6ef5;
    --bg:#eef1f4; --surface:#fff; --text:#0b1720; --text-dim:#5c6b78; --border:#e4e8ec;
    --radius:16px; --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --shadow:0 6px 24px rgba(16,32,48,.12);

    --sq-light:#ebe6d6; --sq-dark:#7d8a99;
    --pw:#fbfbf8; --pw-edge:#b9b6ab;
    --pb:#2a2f38; --pb-edge:#0c0f14;
    --sel:rgba(91,110,245,.55); --hint:rgba(15,155,138,.6); --last:rgba(22,184,163,.22); --chk:rgba(224,72,61,.5);
}
[data-scheme="dark"] {
    --bg:#0e151d; --surface:#182029; --text:#eaf0f3; --text-dim:#90a0ac; --border:#2a333d;
    --sq-light:#b3bac4; --sq-dark:#566373;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
.hidden { display:none !important; }
#app { min-height:100%; display:flex; flex-direction:column; }
.screen { flex:1; display:flex; flex-direction:column; padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }

#screen-menu { align-items:center; justify-content:center; gap:6px; }
.menu-logo { font-size:64px; line-height:1; }
.menu-logo-img { width:88px; height:88px; border-radius:22px; box-shadow:var(--shadow); }
.menu-title { font-size:34px; font-weight:800; margin:6px 0 22px; }
.menu-actions { width:100%; max-width:360px; display:flex; flex-direction:column; gap:12px; }
.rules-link { margin-top:22px; background:none; border:none; color:var(--text-dim); font-family:var(--font); font-size:14px; font-weight:600; text-decoration:underline; cursor:pointer; }

.btn { font-family:var(--font); font-size:16px; font-weight:700; border:none; border-radius:var(--radius); padding:15px 18px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .06s ease, opacity .15s ease; }
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.5; cursor:default; }
.btn-primary { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; }
.btn-secondary { background:var(--surface); color:var(--text); border:1.5px solid var(--border); }
.btn-ghost { background:transparent; color:var(--text-dim); }
.badge { font-size:11px; font-weight:700; background:var(--border); color:var(--text-dim); padding:2px 8px; border-radius:999px; }

.opts { margin-top:26px; display:flex; flex-direction:column; gap:16px; align-items:center; }
.opt { text-align:center; }
.opt-label { font-size:13px; color:var(--text-dim); margin-bottom:8px; }
.seg { display:inline-flex; background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:4px; gap:4px; }
.seg-btn { border:none; background:transparent; color:var(--text-dim); font-family:var(--font); font-weight:700; font-size:14px; padding:8px 16px; border-radius:9px; cursor:pointer; }
.seg-btn.active { background:var(--brand); color:#fff; }

.game-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.icon-btn { width:40px; height:40px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.status { font-weight:700; font-size:15px; text-align:center; flex:1; }
.status.check { color:var(--brand); }

.board-wrap { display:flex; justify-content:center; }
.board { width:min(92vw,460px); aspect-ratio:1; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); border-radius:12px; overflow:hidden; box-shadow:0 6px 24px rgba(16,32,48,.14); touch-action:manipulation; }
.sq { position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; }
.sq.light { background:var(--sq-light); }
.sq.dark { background:var(--sq-dark); }
.sq.last::before { content:''; position:absolute; inset:0; background:var(--last); }
.sq.check::before { content:''; position:absolute; inset:0; background:var(--chk); }

/* Размер фигуры — от клетки доски (доска = min(92vw,460px), клетка = /8). */
.pc { font-size:min(9.6vw, 48px); line-height:1; z-index:1; position:relative; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
/* Белые: светлая заливка + тёмная обводка (8 направлений), читаются на любой клетке. */
.pc.w { color:var(--pw);
    text-shadow:-1px -1px 0 var(--pb-edge), 1px -1px 0 var(--pb-edge), -1px 1px 0 var(--pb-edge), 1px 1px 0 var(--pb-edge), 0 -1px 0 var(--pb-edge), 0 1px 0 var(--pb-edge), -1px 0 0 var(--pb-edge), 1px 0 0 var(--pb-edge); }
/* Чёрные: тёмная заливка + светлая обводка для контраста на тёмных клетках. */
.pc.b { color:var(--pb);
    text-shadow:-1px -1px 0 rgba(255,255,255,.25), 1px -1px 0 rgba(255,255,255,.25), -1px 1px 0 rgba(255,255,255,.25), 1px 1px 0 rgba(255,255,255,.25); }

.sq.sel::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 4px var(--sel); z-index:2; }
.sq.hint::after { content:''; position:absolute; width:30%; height:30%; border-radius:50%; background:var(--hint); z-index:2; }
.sq.hint.cap::after { width:82%; height:82%; background:transparent; box-shadow:inset 0 0 0 4px var(--hint); border-radius:50%; }

.captured { margin-top:12px; min-height:28px; display:flex; align-items:center; justify-content:center; gap:1px; flex-wrap:wrap; font-size:22px; }
.cap-pc.w { color:var(--pw); text-shadow:0 0 2px rgba(0,0,0,.4); }
.cap-pc.b { color:var(--pb); }
.cap-adv { font-size:14px; font-weight:800; color:var(--brand); margin-left:6px; font-family:var(--font); }

/* --- Комната PvP --- */
.room-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.room-code-label { color:var(--text-dim); font-size:14px; }
.room-code { font-size:40px; font-weight:800; letter-spacing:8px; }
.room-status { color:var(--text-dim); font-size:14px; }

/* Кнопки шеринга на финальном оверлее */
.share-row { display:flex; gap:10px; }
.share-row .btn { flex:1; padding:12px 10px; font-size:15px; }

.overlay { position:fixed; inset:0; background:rgba(6,12,18,.55); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.overlay-card { background:var(--surface); border-radius:22px; padding:28px 24px; width:100%; max-width:320px; text-align:center; display:flex; flex-direction:column; gap:12px; }
.overlay-emoji { font-size:56px; }
.overlay-title { font-size:24px; font-weight:800; margin-bottom:6px; }

.promo-row { display:flex; justify-content:center; gap:10px; }
.promo-btn { width:60px; height:60px; border-radius:14px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-size:34px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.promo-btn:active { transform:scale(.96); }

.rules-card { text-align:left; max-width:360px; }
.rules-card .overlay-title { text-align:center; }
.rules-list { margin:4px 0; padding-left:20px; display:flex; flex-direction:column; gap:10px; color:var(--text-dim); font-size:14px; line-height:1.4; }

.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 18px; border-radius:999px; font-weight:600; font-size:14px; z-index:60; box-shadow:0 4px 16px rgba(0,0,0,.2); }