/* =====================================================================
   Мини-игры: морской бой, крестики-нолики, точки (тема cyberpunk). Акценты — из переменных темы,
   поле — свой «сонарный» цвет, чтобы корабли и попадания читались в любой цветовой теме.
   ===================================================================== */
.sb, .sbp, .sbh {
	--sb-sea: 0, 229, 255;          /* вода и свои корабли */
	--sb-hit: #ff3b4e;
	--sb-dead: #8a1020;
	--sb-win: var(--cp-green, #2bff88);
	--sb-mini: #2fd8ff;
	--sb-classic: #ffb020;
	--sb-xo: #c13cff;
	--sb-dots: #ff5fa2;
	--sb-pa: 0, 229, 255;           /* точки / крестики игрока A */
	--sb-pb: 255, 59, 107;          /* точки / нолики игрока B */
	--sb-line: var(--cp-line, rgba(255, 34, 69, .28));
	--sb-soft: var(--cp-line-soft, rgba(255, 34, 69, .14));
	--sb-acc: var(--cp-red, #ff2245);
	--sb-mute: var(--cp-text-mute, #948e93);
}
.sb-v--mini { --sb-v: var(--sb-mini); }
.sb-v--classic { --sb-v: var(--sb-classic); }
.sb-v--xo { --sb-v: var(--sb-xo); }
.sb-v--dots { --sb-v: var(--sb-dots); }
.sb-mute { color: var(--sb-mute); }
.sb-loading, .sb-empty {
	padding: 22px 16px; text-align: center; font: 600 .9rem var(--font-ui, sans-serif); color: var(--sb-mute);
	border: 1px dashed var(--sb-soft);
}
.sb-loading i, .sb-empty i { margin-right: 6px; }

/* ---------- шапка ---------- */
.sb-hero {
	position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 16px; padding: 22px 24px; overflow: hidden;
	background:
		radial-gradient(60% 140% at 100% 50%, rgba(var(--sb-sea), .14), transparent 60%),
		repeating-linear-gradient(0deg, rgba(var(--sb-sea), .05) 0 1px, transparent 1px 22px),
		repeating-linear-gradient(90deg, rgba(var(--sb-sea), .05) 0 1px, transparent 1px 22px),
		rgba(0, 0, 0, .35);
	border: 1px solid var(--sb-line);
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.sb-hero__cap { flex: 1; min-width: 0; }
.sb-hero__kicker { font: 600 .74rem var(--font-ui, sans-serif); letter-spacing: .14em; color: var(--sb-mute); }
.sb-hero h1 { margin: 2px 0 6px; font: 900 1.9rem var(--font-display, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px rgba(var(--sb-sea), .45); }
.sb-hero p { margin: 0; max-width: 520px; font: 500 .95rem/1.45 var(--font-ui, sans-serif); color: var(--cp-text-2, #c9c2c6); }
.sb-hero__radar { position: relative; flex: 0 0 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(var(--sb-sea), .4);
	background: repeating-radial-gradient(circle, transparent 0 15px, rgba(var(--sb-sea), .18) 15px 16px); }
.sb-hero__radar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(var(--sb-sea), .25); }
.sb-hero__radar i, .sb-radar i { position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(var(--sb-sea), .55), transparent 70deg); animation: sb-sweep 3s linear infinite; }
.sb-admin { position: absolute; right: 22px; bottom: 8px; font: 600 .72rem var(--font-ui, sans-serif); color: var(--sb-mute) !important; }
.sb-admin:hover { color: #fff !important; }
@keyframes sb-sweep { to { transform: rotate(360deg); } }

/* ---------- вкладки ---------- */
.sb-tabs, .sb-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sb-tab, .sb-subtab {
	position: relative; padding: 9px 16px; font: 800 .78rem var(--font-display, sans-serif); letter-spacing: .1em; text-transform: uppercase;
	color: var(--sb-mute); background: rgba(0, 0, 0, .35); border: 1px solid var(--sb-soft); cursor: pointer; transition: color .15s, border-color .15s;
}
.sb-tab:hover, .sb-subtab:hover { color: #fff; }
.sb-tab.is-on, .sb-subtab.is-on { color: #fff; border-color: var(--sb-acc); box-shadow: inset 0 -2px 0 var(--sb-acc); }
.sb-tab em { position: absolute; top: -7px; right: -7px; min-width: 18px; padding: 1px 5px; font: 800 .68rem/16px var(--font-ui, sans-serif); font-style: normal; color: #fff; background: var(--sb-acc); border-radius: 9px; }
.sb-subtab small { margin-left: 4px; font-weight: 600; opacity: .7; }

/* ---------- секции и карточки ---------- */
.sb-sec { margin-bottom: 20px; }
.sb-sec h2 { margin: 0 0 10px; font: 800 .85rem var(--font-display, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.sb-sec h2 i { margin-right: 6px; color: var(--sb-acc); }
.sb-sec.is-hot h2 i { animation: sb-ring 1.2s ease-in-out infinite; }
@keyframes sb-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-8deg); } }
.sb-list { display: grid; gap: 6px; }
.sb-card {
	display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-width: 0;
	background: rgba(0, 0, 0, .35); border: 1px solid var(--sb-soft); border-left: 2px solid var(--sb-v, var(--sb-acc));
}
.sb-card.is-alert { border-color: var(--sb-acc); box-shadow: 0 0 18px rgba(var(--cp-red-rgb, 255, 34, 69), .18); }
.sb-card.is-turn { border-left-color: var(--sb-win); background: linear-gradient(90deg, rgba(43, 255, 136, .07), rgba(0, 0, 0, .35) 40%); }
.sb-card__v { flex: 0 0 26px; height: 26px; display: flex; align-items: center; justify-content: center; font: 900 .72rem var(--font-display, sans-serif); color: var(--sb-v); border: 1px solid var(--sb-v); opacity: .85; }
.sb-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-card__main b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 .92rem var(--font-ui, sans-serif); color: #fff; }
.sb-card__main b a { color: #fff !important; }
.sb-card__main > span { font: 500 .78rem var(--font-ui, sans-serif); color: var(--sb-mute); }
.sb-card__act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sb-card__vs { display: flex; align-items: center; gap: 4px; }
.sb-card__vs i { font: 800 .62rem var(--font-display, sans-serif); color: var(--sb-mute); font-style: normal; }
.sb-ava { width: 34px; height: 34px; flex: 0 0 34px; object-fit: cover; border: 1px solid var(--sb-soft); background: rgba(0, 0, 0, .4); }
.sb-ava.is-bot, .sb-ava.is-empty { display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--sb-sea)); font-size: .95rem; }
.sb-ava.is-empty { color: var(--sb-mute); border-style: dashed; }

/* ---------- кнопки ---------- */
.sb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; white-space: nowrap;
	font: 800 .76rem var(--font-display, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #fff;
	background: rgba(var(--cp-red-rgb, 255, 34, 69), .14); border: 1px solid var(--sb-line); cursor: pointer; transition: background .15s, border-color .15s, opacity .15s;
}
.sb-btn:hover { background: rgba(var(--cp-red-rgb, 255, 34, 69), .28); border-color: var(--sb-acc); }
.sb-btn.is-go { color: var(--cp-accent-text, #170307); background: var(--sb-acc); border-color: var(--sb-acc); }
.sb-btn.is-go:hover { filter: brightness(1.15); }
.sb-btn.is-ghost { background: transparent; border-color: var(--sb-soft); color: var(--cp-text-2, #c9c2c6); }
.sb-btn.is-ghost:hover { color: #fff; border-color: var(--sb-line); }
.sb-btn.is-danger:hover { color: #ff6b7d; border-color: #ff6b7d; }
.sb-btn.is-big { width: 100%; padding: 12px; font-size: .86rem; }
.sb-btn.is-on { border-color: var(--sb-classic); color: var(--sb-classic); }
.sb-btn[disabled] { opacity: .35; cursor: not-allowed; filter: grayscale(.6); }

/* ---------- новая игра ---------- */
.sb-new { padding: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--sb-soft); }
.sb-vars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sb-var {
	display: flex; gap: 12px; align-items: center; padding: 12px; text-align: left; cursor: pointer;
	background: rgba(0, 0, 0, .35); border: 1px solid var(--sb-soft); color: inherit; transition: border-color .15s, box-shadow .15s;
}
.sb-var:hover { border-color: var(--sb-line); }
.sb-var.is-on { border-color: var(--sb-v, var(--sb-acc)); box-shadow: inset 0 0 0 1px var(--sb-v), 0 0 20px -6px var(--sb-v); }
.sb-var[data-variant="mini"] { --sb-v: var(--sb-mini); }
.sb-var[data-variant="classic"] { --sb-v: var(--sb-classic); }
.sb-var[data-variant="xo"] { --sb-v: var(--sb-xo); }
.sb-var[data-variant="dots"] { --sb-v: var(--sb-dots); }
.sb-var__txt em { font: 700 .66rem var(--font-ui, sans-serif); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-v); }
.sb-mini.is-xo { gap: 2px; background: rgba(255, 255, 255, .12); }
.sb-mini.is-xo i { position: relative; background: #0b0710; }
.sb-mini.is-xo i.mx::before, .sb-mini.is-xo i.mx::after { content: ""; position: absolute; left: 50%; top: 18%; bottom: 18%; width: 2px; margin-left: -1px; background: rgb(var(--sb-pa)); transform: rotate(45deg); }
.sb-mini.is-xo i.mx::after { transform: rotate(-45deg); }
.sb-mini.is-xo i.mo::before { content: ""; position: absolute; inset: 22%; border: 2px solid rgb(var(--sb-pb)); border-radius: 50%; }
.sb-mini.is-dots { gap: 0; background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255, 255, 255, .1) 10px 11px), repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, .1) 10px 11px); }
.sb-mini.is-dots i { display: flex; align-items: center; justify-content: center; background: none; }
.sb-mini.is-dots i.da::before, .sb-mini.is-dots i.db::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.sb-mini.is-dots i.da::before { background: rgb(var(--sb-pa)); }
.sb-mini.is-dots i.db::before { background: rgb(var(--sb-pb)); }
.sb-var__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sb-var__txt b { font: 900 1rem var(--font-display, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.sb-var__txt b small { color: var(--sb-v); font-size: .8rem; }
.sb-var__txt > span { font: 500 .78rem/1.3 var(--font-ui, sans-serif); color: var(--sb-mute); }
.sb-mini { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 1px; width: 58px; height: 58px; flex: 0 0 58px; padding: 2px; border: 1px solid var(--sb-v); }
.sb-mini i { background: rgba(var(--sb-sea), .08); }
.sb-mini i.s { background: var(--sb-v); }

.sb-modes { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; }
.sb-mode { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--sb-soft); min-width: 0; }
.sb-mode .sb-btn { margin-top: auto; }
.sb-mode__cap { font: 800 .76rem var(--font-display, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.sb-mode__cap i { margin-right: 4px; color: var(--sb-acc); }
.sb-mode__txt { font: 500 .8rem var(--font-ui, sans-serif); color: var(--sb-mute); }
.sb-search { position: relative; }
.sb-search > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sb-mute); font-size: .8rem; }
.sb-search input {
	width: 100%; padding: 8px 10px 8px 30px; font: 600 .88rem var(--font-ui, sans-serif); color: #fff;
	background: rgba(0, 0, 0, .45); border: 1px solid var(--sb-soft); outline: none;
}
.sb-search input:focus { border-color: var(--sb-acc); }
.sb-search__res { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: flex; flex-direction: column; background: var(--cp-panel, #0f0a0d); border: 1px solid var(--sb-line); border-top: 0; }
.sb-search__res:empty { display: none; }
.sb-search__res button { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font: 700 .86rem var(--font-ui, sans-serif); color: #fff; text-align: left; background: none; border: 0; cursor: pointer; }
.sb-search__res button:hover { background: rgba(var(--cp-red-rgb, 255, 34, 69), .15); }
.sb-search__res .sb-ava { width: 24px; height: 24px; flex-basis: 24px; }
.sb-search__res .sb-mute { padding: 8px 10px; font: 500 .82rem var(--font-ui, sans-serif); }
.sb-pick { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: rgba(0, 0, 0, .45); border: 1px solid var(--sb-line); }
.sb-pick .sb-ava { width: 28px; height: 28px; flex-basis: 28px; }
.sb-pick b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 .9rem var(--font-ui, sans-serif); color: #fff; }
.sb-x { padding: 4px 8px; color: var(--sb-mute); background: none; border: 0; cursor: pointer; }
.sb-x:hover { color: #fff; }

/* ---------- флот (иконки кораблей) ---------- */
.sb-fleet { display: flex; flex-wrap: wrap; gap: 5px; }
.sb-ship { display: inline-flex; gap: 1px; }
.sb-ship i { width: 8px; height: 8px; background: rgb(var(--sb-sea)); box-shadow: 0 0 4px rgba(var(--sb-sea), .6); }
.sb-ship.is-sunk i { background: var(--sb-dead); box-shadow: none; opacity: .7; }
.sb-var .sb-ship i { width: 6px; height: 6px; background: var(--sb-v); box-shadow: none; }

/* ---------- партия ---------- */
.sb-gbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sb-gbar__v { flex: 1; font: 800 .78rem var(--font-display, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-v); }
.sb-timer { padding: 5px 10px; font: 800 .9rem var(--font-display, sans-serif); color: #fff; background: rgba(0, 0, 0, .4); border: 1px solid var(--sb-soft); font-variant-numeric: tabular-nums; }
.sb-timer i { color: var(--sb-mute); }
.sb-timer .is-low { color: #ff6b7d; animation: sb-blink 1s steps(2) infinite; }
@keyframes sb-blink { 50% { opacity: .4; } }

.sb-players { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 10px; }
.sb-players__vs { font: 900 .9rem var(--font-display, sans-serif); color: var(--sb-acc); letter-spacing: .1em; }
.sb-p { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--sb-soft); transition: border-color .2s, box-shadow .2s; }
.sb-p:last-child { flex-direction: row-reverse; text-align: right; }
.sb-p.is-turn { border-color: rgb(var(--sb-sea)); box-shadow: 0 0 16px -4px rgba(var(--sb-sea), .6); }
.sb-p.is-win { border-color: var(--sb-win); box-shadow: 0 0 16px -4px var(--sb-win); }
.sb-p__ava { width: 40px; height: 40px; flex-basis: 40px; }
.sb-p__txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sb-p__txt b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 .95rem var(--font-ui, sans-serif); color: #fff; }
.sb-p__txt b a { color: #fff !important; }
.sb-p__txt b .fa-crown { color: var(--sb-win); }
.sb-p__tag { font: 600 .74rem var(--font-ui, sans-serif); color: var(--sb-mute); }
.sb-p__tag.is-ok { color: var(--sb-win); }
.sb-elo-d { font: 800 .78rem var(--font-display, sans-serif); }
.sb-elo-d.is-up { color: var(--sb-win); }
.sb-elo-d.is-down { color: #ff6b7d; }

.sb-status {
	position: relative; margin-bottom: 14px; padding: 10px 14px; text-align: center;
	font: 800 .9rem var(--font-display, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #fff;
	background: rgba(0, 0, 0, .35); border: 1px solid var(--sb-soft);
}
.sb-status--turn { border-color: rgb(var(--sb-sea)); color: rgb(var(--sb-sea)); background: rgba(var(--sb-sea), .07); }
.sb-status--win { border-color: var(--sb-win); color: var(--sb-win); background: rgba(43, 255, 136, .08); font-size: 1.05rem; }
.sb-status--lose { border-color: #ff6b7d; color: #ff6b7d; background: rgba(255, 59, 78, .08); font-size: 1.05rem; }
.sb-status::after {
	content: attr(data-flash); position: absolute; inset: -1px; display: flex; align-items: center; justify-content: center;
	color: #fff; background: var(--sb-acc); opacity: 0; pointer-events: none;
}
.sb-status.is-flash::after { animation: sb-flash 1.4s ease forwards; }
@keyframes sb-flash { 0% { opacity: 0; } 12%, 70% { opacity: 1; } 100% { opacity: 0; } }

.sb-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.sb-bwrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sb-bcap { font: 800 .78rem var(--font-display, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-mute); }
.sb-bcap small { display: block; margin-top: 2px; font: 500 .74rem var(--font-ui, sans-serif); letter-spacing: 0; text-transform: none; }
.sb-bwrap.is-active .sb-bcap { color: rgb(var(--sb-sea)); }

.sb-board {
	display: grid; grid-template-columns: 18px repeat(var(--n), minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 420px;
	padding: 6px; background: rgba(0, 10, 16, .55); border: 1px solid rgba(var(--sb-sea), .2);
	user-select: none; -webkit-user-select: none;
}
.sb-bwrap.is-active .sb-board { border-color: rgba(var(--sb-sea), .6); box-shadow: 0 0 24px -8px rgba(var(--sb-sea), .7); }
.sb-lbl { display: flex; align-items: center; justify-content: center; font: 700 .64rem var(--font-ui, sans-serif); color: rgba(var(--sb-sea), .55); }
.sb-c {
	position: relative; aspect-ratio: 1; padding: 0; min-width: 0; cursor: default;
	background: rgba(var(--sb-sea), .05); border: 1px solid rgba(var(--sb-sea), .1); transition: background .12s, border-color .12s;
}
.sb-c.is-ship { background: rgba(var(--sb-sea), .32); border-color: rgba(var(--sb-sea), .75); box-shadow: inset 0 0 6px rgba(var(--sb-sea), .4); }
.sb-c.is-miss::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(var(--sb-sea), .55); }
.sb-c.is-hit { background: rgba(255, 59, 78, .3); border-color: var(--sb-hit); }
.sb-c.is-hit::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, #ffd27a 0 20%, var(--sb-hit) 55%, transparent 72%); animation: sb-burn 1.2s ease-in-out infinite alternate; }
.sb-c.is-dead { background: var(--sb-dead); border-color: var(--sb-hit); }
.sb-c.is-dead::before, .sb-c.is-dead::after { content: ""; position: absolute; left: 50%; top: 18%; bottom: 18%; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .7); }
.sb-c.is-dead::before { transform: rotate(45deg); }
.sb-c.is-dead::after { transform: rotate(-45deg); }
@keyframes sb-burn { from { opacity: .75; transform: scale(.9); } to { opacity: 1; transform: scale(1.08); } }
.sb-c.is-last { outline: 2px solid #fff; outline-offset: -1px; z-index: 1; }
.sb-c.is-incoming { animation: sb-incoming .7s ease-out; }
@keyframes sb-incoming { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .9); } 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.sb-c.is-target { cursor: crosshair; }
.sb-c.is-target:hover { background: rgba(var(--sb-sea), .22); border-color: rgb(var(--sb-sea)); }
.sb-c.is-target:hover::after { content: ""; position: absolute; inset: 18%; border: 2px solid rgb(var(--sb-sea)); border-radius: 50%; }
.sb-c.is-pending { background: rgba(255, 255, 255, .25); }

/* расстановка */
.sb-setup { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sb-board.is-setup .sb-c { cursor: pointer; }
.sb-board.is-setup .sb-c:hover { border-color: rgba(var(--sb-sea), .5); }
.sb-c.is-prev { background: rgba(43, 255, 136, .35); border-color: var(--sb-win); }
.sb-c.is-bad { background: rgba(255, 59, 78, .35); border-color: var(--sb-hit); }
.sb-dock { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--sb-soft); }
.sb-dock__cap { font: 800 .78rem var(--font-display, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.sb-dock__cap small { margin-left: 6px; color: var(--sb-mute); letter-spacing: 0; text-transform: none; font: 500 .76rem var(--font-ui, sans-serif); }
.sb-dock__ships { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.sb-dock__ship { display: inline-flex; gap: 2px; padding: 5px; background: none; border: 1px dashed transparent; cursor: pointer; }
.sb-dock__ships.is-v .sb-dock__ship.is-sel { flex-direction: column; }
.sb-dock__ship i { width: 18px; height: 18px; background: rgba(var(--sb-sea), .32); border: 1px solid rgba(var(--sb-sea), .75); }
.sb-dock__ship:hover { border-color: var(--sb-soft); }
.sb-dock__ship.is-sel { border-color: var(--sb-win); background: rgba(43, 255, 136, .06); }
.sb-dock__ship.is-sel i { background: rgba(43, 255, 136, .35); border-color: var(--sb-win); }
.sb-dock__ship.is-placed { opacity: .28; }
.sb-dock__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-dock__tools .sb-btn { flex: 1 1 auto; }
.sb-dock__rule { margin: 0; font: 500 .78rem/1.4 var(--font-ui, sans-serif); color: var(--sb-mute); }

.sb-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 16px; text-align: center; border: 1px dashed var(--sb-soft); }
.sb-wait p { margin: 0; font: 600 .95rem var(--font-ui, sans-serif); color: var(--cp-text-2, #c9c2c6); }
.sb-radar { position: relative; width: 110px; height: 110px; border-radius: 50%; border: 1px solid rgba(var(--sb-sea), .5); background: repeating-radial-gradient(circle, transparent 0 17px, rgba(var(--sb-sea), .2) 17px 18px); }
.sb-gfoot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }

/* ---------- крестики-нолики ---------- */
.sb-xo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 340px; margin: 4px auto 0; padding: 6px; background: rgba(0, 0, 0, .35); border: 1px solid var(--sb-soft); }
.sb-xo.is-active { border-color: rgba(var(--sb-sea), .6); box-shadow: 0 0 24px -8px rgba(var(--sb-sea), .7); }
.sb-xo__c { position: relative; aspect-ratio: 1; padding: 0; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); cursor: default; transition: background .15s; }
.sb-xo__c.is-target { cursor: pointer; }
.sb-xo__c.is-target:hover { background: rgba(var(--sb-sea), .1); border-color: rgba(var(--sb-sea), .5); }
.sb-xo__c svg { position: absolute; inset: 14%; width: 72%; height: 72%; fill: none; stroke-width: 4.5; stroke-linecap: round; animation: sb-pop .25s ease-out; }
.sb-xo__c.is-x svg { stroke: rgb(var(--sb-pa)); filter: drop-shadow(0 0 6px rgba(var(--sb-pa), .7)); }
.sb-xo__c.is-o svg { stroke: rgb(var(--sb-pb)); filter: drop-shadow(0 0 6px rgba(var(--sb-pb), .7)); }
.sb-xo__c.is-line { background: rgba(43, 255, 136, .12); border-color: var(--sb-win); }
.sb-xo__c.is-last { border-color: rgba(255, 255, 255, .6); }
@keyframes sb-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sb-mark { font-weight: 900; }
.sb-mark--a { color: rgb(var(--sb-pa)); }
.sb-mark--b { color: rgb(var(--sb-pb)); }

/* ---------- точки ---------- */
.sb-dots { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sb-dots__svg { display: block; width: 100%; max-width: 540px; height: auto; background: rgba(0, 0, 0, .45); border: 1px solid var(--sb-soft); touch-action: manipulation; }
.sb-dots.is-active .sb-dots__svg { border-color: rgba(var(--sb-sea), .6); box-shadow: 0 0 24px -8px rgba(var(--sb-sea), .7); }
.sb-dots__grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.sb-dots__area--a { fill: rgba(var(--sb-pa), .16); }
.sb-dots__area--b { fill: rgba(var(--sb-pb), .16); }
.sb-dots__wall { stroke-width: 3; stroke-linecap: round; }
.sb-dots__wall--a { stroke: rgb(var(--sb-pa)); }
.sb-dots__wall--b { stroke: rgb(var(--sb-pb)); }
.sb-dots__node { cursor: pointer; }
.sb-dots__hit { fill: transparent; }
.sb-dots__aim { fill: transparent; }
.sb-dots__node:hover .sb-dots__aim { fill: rgba(var(--sb-sea), .35); stroke: rgb(var(--sb-sea)); stroke-width: 1.5; }
.sb-dots__pt { stroke: rgba(0, 0, 0, .6); stroke-width: 1.5; }
.sb-dots__pt--a { fill: rgb(var(--sb-pa)); }
.sb-dots__pt--b { fill: rgb(var(--sb-pb)); }
.sb-dots__pt.is-dead { opacity: .4; }
.sb-dots__pt.is-last { stroke: #fff; stroke-width: 2.5; animation: sb-dotpulse 1.4s ease-in-out infinite; }
@keyframes sb-dotpulse { 50% { stroke-opacity: .2; } }
.sb-dots__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font: 600 .86rem var(--font-ui, sans-serif); color: var(--cp-text-2, #c9c2c6); }
.sb-dots__legend b { color: #fff; font-size: 1rem; }
.sb-dots__rule { max-width: 540px; margin: 0; font: 500 .78rem/1.45 var(--font-ui, sans-serif); color: var(--sb-mute); }
.sb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0; }
.sb-dot--a { background: rgb(var(--sb-pa)); box-shadow: 0 0 6px rgba(var(--sb-pa), .7); }
.sb-dot--b { background: rgb(var(--sb-pb)); box-shadow: 0 0 6px rgba(var(--sb-pb), .7); }
.sb-p__score { color: #fff; font-size: .9rem; }

/* ---------- рейтинг ---------- */
.sb-me { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 12px; padding: 12px 14px; font: 600 .84rem var(--font-ui, sans-serif); color: var(--cp-text-2, #c9c2c6); background: rgba(var(--sb-sea), .06); border: 1px solid rgba(var(--sb-sea), .35); }
.sb-me__rank { font: 900 1.3rem var(--font-display, sans-serif); color: rgb(var(--sb-sea)); }
.sb-me__elo b { font: 900 1.1rem var(--font-display, sans-serif); color: #fff; }
.sb-table { border: 1px solid var(--sb-soft); }
.sb-tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) 70px 80px 64px 92px 56px; align-items: center; gap: 8px; padding: 7px 12px; font: 600 .86rem var(--font-ui, sans-serif); color: var(--cp-text-2, #c9c2c6); border-top: 1px solid var(--sb-soft); }
.sb-tr:first-child { border-top: 0; }
.sb-th { font: 800 .7rem var(--font-display, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-mute); background: rgba(0, 0, 0, .35); }
.sb-tr.is-me { background: rgba(var(--sb-sea), .08); box-shadow: inset 2px 0 0 rgb(var(--sb-sea)); }
.sb-td-rank { font: 900 .9rem var(--font-display, sans-serif); color: var(--sb-mute); text-align: center; }
.sb-medal-1 { color: #ffd34d; } .sb-medal-2 { color: #cfd6e4; } .sb-medal-3 { color: #e09a5a; }
.sb-td-rank .fa-medal { font-size: 1.1rem; }
.sb-td-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sb-td-user .sb-ava { width: 26px; height: 26px; flex-basis: 26px; }
.sb-td-user a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; color: #fff !important; }
.sb-td-elo { font: 900 .95rem var(--font-display, sans-serif); color: #fff; }
.sb-tr .is-w, .sb-res.is-w { color: var(--sb-win); }
.sb-tr .is-l, .sb-res.is-l { color: #ff6b7d; }
.sb-res.is-d { color: var(--sb-classic); }
.sb-res { font: 800 .76rem var(--font-display, sans-serif); letter-spacing: .06em; text-transform: uppercase; }

.sb-mystats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.sb-mystat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; font: 600 .82rem var(--font-ui, sans-serif); color: var(--cp-text-2, #c9c2c6); background: rgba(0, 0, 0, .35); border: 1px solid var(--sb-soft); border-top: 2px solid var(--sb-v); }
.sb-mystat__cap { font: 800 .74rem var(--font-display, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-v); }
.sb-mystat b { font: 900 1.5rem var(--font-display, sans-serif); color: #fff; }

/* =====================================================================
   блок в профиле
   ===================================================================== */
.sbp .block_head { display: flex; align-items: center; gap: 8px; }
.sbp .block_head > i { color: var(--sb-acc); }
.sbp-more { margin-left: auto; font: 600 .74rem var(--font-ui, sans-serif); text-transform: none; letter-spacing: 0; color: var(--sb-mute) !important; }
.sbp-more:hover { color: #fff !important; }
.sbp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sbp-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--sb-soft); border-top: 2px solid var(--sb-v); }
.sbp-card--mini { --sb-v: var(--sb-mini); }
.sbp-card--classic { --sb-v: var(--sb-classic); }
.sbp-card--xo { --sb-v: var(--sb-xo); }
.sbp-card--dots { --sb-v: var(--sb-dots); }
.sbp-card__cap { display: flex; align-items: baseline; justify-content: space-between; font: 800 .72rem var(--font-display, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-v); }
.sbp-card__cap small { font: 700 .7rem var(--font-ui, sans-serif); color: var(--sb-mute); }
.sbp-none { padding: 14px 0; text-align: center; font: 600 .8rem var(--font-ui, sans-serif); color: var(--sb-mute); }
.sbp-elo { display: flex; align-items: baseline; gap: 5px; }
.sbp-elo b { font: 900 1.55rem/1 var(--font-display, sans-serif); color: #fff; }
.sbp-elo span { font: 700 .66rem var(--font-ui, sans-serif); color: var(--sb-mute); letter-spacing: .08em; }
.sbp-rank { margin-left: auto; padding: 1px 7px; font: 800 .74rem var(--font-display, sans-serif); font-style: normal; color: var(--sb-v); border: 1px solid var(--sb-v); }
.sbp-rank.is-top { color: #170307; background: #ffd34d; border-color: #ffd34d; }
.sbp-wl { display: flex; align-items: center; gap: 6px; font: 800 .78rem var(--font-display, sans-serif); }
.sbp-wl .is-w { color: var(--sb-win); }
.sbp-wl .is-l { color: #ff6b7d; }
.sbp-wl__bar { flex: 1; display: flex; justify-content: space-between; height: 5px; background: rgba(255, 176, 32, .45); overflow: hidden; }
.sbp-wl__bar i:first-child { background: var(--sb-win); }
.sbp-wl__bar i:last-child { background: #ff6b7d; opacity: .75; }
.sbp-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; margin: 0; padding: 0; list-style: none; }
.sbp-kv li { display: flex; justify-content: space-between; gap: 4px; font: 500 .74rem var(--font-ui, sans-serif); color: var(--sb-mute); }
.sbp-kv b { font-weight: 800; color: #fff; }
.sbp-form { display: flex; gap: 3px; }
.sbp-form i { flex: 1; height: 4px; }
.sbp-form .is-w { background: var(--sb-win); }
.sbp-form .is-l { background: #ff6b7d; }
.sbp-form .is-d { background: var(--sb-classic); }
.sbp-grid > .sbp-none { grid-column: 1 / -1; }
.sbp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.sbp-bot { font: 600 .76rem var(--font-ui, sans-serif); color: var(--sb-mute); }
.sbp-bot i { margin-right: 4px; }
.sbp-btn {
	margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
	font: 800 .72rem var(--font-display, sans-serif); letter-spacing: .08em; text-transform: uppercase;
	color: var(--cp-accent-text, #170307) !important; background: var(--sb-acc); border: 1px solid var(--sb-acc);
}
.sbp-btn:hover { filter: brightness(1.15); }

/* =====================================================================
   блок «Открытые игры» на главной
   ===================================================================== */
.sbh { --sb-v: var(--sb-acc); }
.sbh .block_head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sbh .block_head > i { color: var(--sb-acc); }
.sbh-more { margin-left: auto; font: 800 .74rem var(--font-display, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #fff !important; }
.sbh-more i { color: var(--sb-acc); }
.sbh-live { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font: 600 .74rem var(--font-ui, sans-serif); letter-spacing: 0; text-transform: none; color: var(--sb-mute); }
.sbh-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--sb-win); box-shadow: 0 0 8px var(--sb-win); animation: sb-blink 1.6s steps(2) infinite; }
.sbh-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.sbh-item {
	display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; text-decoration: none !important;
	background: rgba(0, 0, 0, .35); border: 1px solid var(--sb-soft); border-left: 3px solid var(--sb-v); transition: border-color .15s, background .15s;
}
.sbh-item--mini { --sb-v: var(--sb-mini); }
.sbh-item--classic { --sb-v: var(--sb-classic); }
.sbh-item--xo { --sb-v: var(--sb-xo); }
.sbh-item--dots { --sb-v: var(--sb-dots); }
.sbh-item:hover { background: rgba(255, 255, 255, .04); border-color: var(--sb-v); }
.sbh-item__ico { flex: 0 0 22px; height: 22px; color: var(--sb-v); }
.sbh-item__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sbh-item--dots .sbh-item__ico svg circle { fill: currentColor; stroke: none; }
.sbh-item--dots .sbh-item__ico svg circle.b { fill: rgb(var(--sb-pa)); }
.sbh-item__ava { flex: 0 0 36px; width: 36px; height: 36px; object-fit: cover; border: 1px solid var(--sb-soft); }
.sbh-item__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sbh-item__txt b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 .95rem var(--font-ui, sans-serif); color: #fff; }
.sbh-item__txt span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 .74rem var(--font-ui, sans-serif); color: var(--sb-mute); }
.sbh-item__btn { flex: 0 0 auto; padding: 6px 10px; font: 800 .7rem var(--font-display, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--cp-accent-text, #170307); background: var(--sb-acc); }
.sbh-item.is-mine .sbh-item__btn { color: var(--sb-mute); background: transparent; border: 1px solid var(--sb-soft); }
.sbh-empty { grid-column: 1 / -1; padding: 14px; text-align: center; font: 600 .88rem var(--font-ui, sans-serif); color: var(--sb-mute); border: 1px dashed var(--sb-soft); }
.sbh-empty i { margin-right: 6px; }
.sbh-empty a { color: var(--sb-acc) !important; }
@media (max-width: 480px) { .sbh-live { display: none; } }

/* ---------- адаптив ---------- */
@media (max-width: 991px) {
	.sb-modes { grid-template-columns: 1fr 1fr; }
	.sb-mode--user { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.sb-hero { padding: 18px; }
	.sb-hero h1 { font-size: 1.5rem; }
	.sb-hero__radar { display: none; }
	.sb-vars, .sb-mystats { grid-template-columns: 1fr; }
	.sb-boards, .sb-setup { grid-template-columns: 1fr; }
	.sb-board { max-width: none; }
	.sb-players { grid-template-columns: 1fr; }
	.sb-players__vs { display: none; }
	.sb-p:last-child { flex-direction: row; text-align: left; }
	.sb-tr { grid-template-columns: 34px minmax(0, 1fr) 54px 70px; }
	.sb-hide-sm { display: none; }
	.sb-card { flex-wrap: wrap; }
	.sb-card__act { width: 100%; justify-content: flex-end; }
}
@media (max-width: 480px) {
	.sb-modes { grid-template-columns: 1fr; }
	.sbp-grid { grid-template-columns: 1fr; }
}