/* шашки.катуны.рф — тёмная игровая тема */
:root {
  --bg: #14161d;
  --bg2: #1b1e28;
  --panel: #212635;
  --line: #2e3448;
  --text: #e8eaf2;
  --dim: #8b93ab;
  --accent: #f0b429;
  --accent2: #4da3ff;
  --good: #3ecf8e;
  --bad: #ff6b6b;
  --light-sq: #f0d9b5;
  --dark-sq: #a97d55;
  --hl: rgba(240, 180, 41, .55);
  --tgt: rgba(61, 163, 255, .45);
  font-size: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, #232a3d 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "Segoe UI", Roboto, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.dim { color: var(--dim); }
.hidden { display: none !important; }

/* шапка */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--line);
  background: rgba(20, 22, 29, .7); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 5;
}
.brand {
  display: flex; align-items: center; gap: .5rem;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.15rem;
}
.brand-ico { font-size: 1.3rem; }
.top-right { display: flex; align-items: center; gap: .6rem; }
.nick {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: .5rem; padding: .35rem .6rem; width: 9.5rem; font-size: .9rem;
}
.conn { color: var(--good); font-size: .8rem; }
.conn.off { color: var(--bad); }

main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.2rem 1rem 2rem; }
.foot {
  border-top: 1px solid var(--line); color: var(--dim); font-size: .8rem;
  padding: .7rem 1.1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* лобби */
.hero { text-align: center; margin: 1.2rem 0 1.8rem; }
.hero h1 { font-size: 2rem; margin: 0 0 .4rem; }
.hero p { color: var(--dim); margin: 0; }
.cards {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 1rem;
  padding: 1.1rem; cursor: pointer; transition: .15s transform, .15s border-color;
  display: flex; flex-direction: column; gap: .5rem;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card .ico { font-size: 2.2rem; }
.card h3 { margin: 0; font-size: 1.1rem; }
.card p { margin: 0; color: var(--dim); font-size: .85rem; flex: 1; }
.quick-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.quick-row input {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: .5rem; padding: .55rem .7rem; font-size: .95rem;
}

/* кнопки */
.btn {
  background: var(--accent); color: #201a05; border: none; border-radius: .5rem;
  padding: .55rem .95rem; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: .15s filter;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.alt { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.btn.good { background: var(--good); color: #06281a; }
.btn.bad { background: var(--bad); color: #2a0808; }
.btn.small { padding: .3rem .6rem; font-size: .82rem; }

/* игровой экран */
.game-wrap { display: grid; grid-template-columns: minmax(280px, 1fr) 320px; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .game-wrap { grid-template-columns: 1fr; } }
.board-col { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.player-row {
  width: 100%; max-width: 560px; display: flex; align-items: center; gap: .6rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; padding: .45rem .7rem;
}
.player-row.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pcolor { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid #fff2; }
.pcolor.w { background: #f4f1ea; }
.pcolor.b { background: #1c1c22; border-color: #ffffff55; }
.pname { font-weight: 600; }
.ptimer { margin-left: auto; color: var(--dim); font-variant-numeric: tabular-nums; }

.side-col { display: flex; flex-direction: column; gap: .8rem; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; padding: .8rem;
}
.panel h4 { margin: 0 0 .55rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.status { font-size: 1rem; font-weight: 600; min-height: 1.4em; }
.status .win { color: var(--good); }
.status .lose { color: var(--bad); }
.movelog {
  height: 150px; overflow-y: auto; font-family: ui-monospace, Consolas, monospace; font-size: .85rem;
  display: grid; grid-template-columns: 2.2rem 1fr 1fr; gap: .1rem .4rem; align-content: start;
}
.movelog .no { color: var(--dim); }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.chat { display: flex; flex-direction: column; gap: .5rem; }
.chat-log { height: 170px; overflow-y: auto; font-size: .88rem; display: flex; flex-direction: column; gap: .25rem; }
.chat-log .sys { color: var(--dim); font-style: italic; }
.chat-log b { color: var(--accent2); }
.chat-row { display: flex; gap: .4rem; }
.chat-row input {
  flex: 1; background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  border-radius: .5rem; padding: .45rem .6rem; font-size: .9rem;
}
.room-code {
  font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; letter-spacing: .2em;
  color: var(--accent); user-select: all;
}

/* доска */
.board {
  display: grid; gap: 0; border-radius: .5rem; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); touch-action: manipulation;
  width: min(88vw, 560px); aspect-ratio: 1;
}
.board.g8 { grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.board.g15 { grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr); }
.sq { position: relative; display: flex; align-items: center; justify-content: center; }
.g8 .sq.light { background: var(--light-sq); }
.g8 .sq.dark { background: var(--dark-sq); }
.g8 .sq.hl { box-shadow: inset 0 0 0 3px var(--hl); }
.g8 .sq.last { background: rgba(240, 180, 41, .35); }
.g8 .sq.check { background: radial-gradient(circle, rgba(255, 60, 60, .8), rgba(255, 60, 60, .15)); }
.g8 .sq.sel { box-shadow: inset 0 0 0 4px var(--accent2); }
.g8 .sq .dot {
  position: absolute; width: 28%; height: 28%; border-radius: 50%;
  background: var(--tgt); pointer-events: none;
}
.g8 .sq .dot.ring { width: 76%; height: 76%; background: none; border: 4px solid var(--tgt); }
.coord {
  position: absolute; font-size: .62rem; font-weight: 700; opacity: .65; pointer-events: none;
}
.coord.f { right: 3px; bottom: 1px; }
.coord.r { left: 2px; top: 1px; }

/* фигуры и шашки */
.piece {
  font-size: calc(min(88vw, 560px) / 8 * .74);
  line-height: 1; z-index: 1; user-select: none; cursor: pointer;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
.piece.wt { color: #fdfdf8; text-shadow: 0 0 2px #000, 0 1px 1px #000; }
.piece.bt { color: #191a20; text-shadow: 0 0 2px #fff6, 0 1px 1px #fff3; }
.checker {
  width: 72%; height: 72%; border-radius: 50%; z-index: 1; cursor: pointer;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .35), inset 0 3px 6px rgba(255, 255, 255, .35), 0 3px 5px rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center; font-size: 1.5em;
}
.checker.wt { background: radial-gradient(circle at 35% 30%, #fffdf6, #d9d2bf); color: #8a6d3b; }
.checker.bt { background: radial-gradient(circle at 35% 30%, #4a4c58, #14151b); color: #f0b429; }
.checker.king::after { content: '♛'; }

/* реверси / гомоку */
.board.rev { background: #1e7a4c; border: 6px solid #0d4a2c; }
.rev .sq { border: 1px solid rgba(0, 0, 0, .35); cursor: pointer; }
.rev .sq .hint { width: 18%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.disc {
  width: 84%; height: 84%; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5); animation: pop .18s ease-out;
}
.disc.w { background: radial-gradient(circle at 35% 30%, #ffffff, #cfcfcf); }
.disc.b { background: radial-gradient(circle at 35% 30%, #3a3a42, #0a0a0e); }
@keyframes pop { from { transform: scale(.3); opacity: .3; } }

.board.gm { background: #dcb567; border: 6px solid #a4803a; }
.gm .sq {
  border-right: 1px solid rgba(90, 60, 20, .55); border-bottom: 1px solid rgba(90, 60, 20, .55);
  cursor: pointer;
}
.gm .sq .stone {
  width: 82%; height: 82%; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.gm .sq .stone.w { background: radial-gradient(circle at 35% 30%, #fff, #ccc); }
.gm .sq .stone.b { background: radial-gradient(circle at 35% 30%, #444, #000); }
.gm .sq.win { background: rgba(240, 60, 60, .4); }

/* модалка */
.modal {
  position: fixed; inset: 0; background: rgba(5, 6, 10, .7); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 20; padding: 1rem;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 1rem;
  padding: 1.4rem; max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .8rem;
}
.modal-box h2 { margin: 0; font-size: 1.25rem; }
.modal-box .row { display: flex; gap: .5rem; flex-wrap: wrap; }
.modal-box .row > .btn { flex: 1; min-width: 7rem; }
.promo-row { display: flex; gap: .5rem; justify-content: center; }
.promo-row button {
  font-size: 2.4rem; background: var(--bg2); border: 1px solid var(--line); border-radius: .6rem;
  color: var(--text); padding: .3rem .6rem; cursor: pointer;
}
.promo-row button:hover { border-color: var(--accent); }

.wait-note { color: var(--dim); font-size: .9rem; }
.score-pill {
  display: inline-flex; gap: .3rem; align-items: center; color: var(--dim); font-size: .85rem;
}

/* ---- переключатель темы ---- */
.theme-btn {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: .5rem; padding: .3rem .55rem; font-size: 1rem; line-height: 1;
  cursor: pointer; transition: .15s border-color;
}
.theme-btn:hover { border-color: var(--accent); }

/* ==================== СВЕТЛАЯ ТЕМА ==================== */
:root[data-theme="light"] {
  --bg: #f2efe8;
  --bg2: #e9e4d9;
  --panel: #ffffff;
  --line: #ddd5c5;
  --text: #24262c;
  --dim: #6d7078;
  --accent: #e09b00;
  --accent2: #1867c0;
  --good: #0f9e66;
  --bad: #d94343;
  --hl: rgba(224, 155, 0, .55);
  --tgt: rgba(24, 103, 192, .40);
}
:root[data-theme="light"] body {
  background: radial-gradient(1200px 600px at 70% -10%, #fffdf6 0%, var(--bg) 60%);
}
:root[data-theme="light"] .top {
  background: rgba(255, 255, 255, .85);
}
:root[data-theme="light"] .modal {
  background: rgba(45, 42, 32, .45);
}
:root[data-theme="light"] .card:hover {
  box-shadow: 0 8px 24px rgba(60, 50, 20, .12);
}
:root[data-theme="light"] .btn.alt:hover {
  border-color: var(--accent);
}