/* ======================================================================
   Chessball — Ball Possession  ·  FM style  ·  v3.2
   ====================================================================== */

body.has-chessball #right-sidebar, body.has-chessball .sidebar,
body.has-chessball #secondary,
body:has(.cb-wrap) #right-sidebar, body:has(.cb-wrap) .sidebar,
body:has(.cb-wrap) #secondary { display: none !important; }
body.has-chessball .content-area, body.has-chessball .site-main,
body:has(.cb-wrap) .content-area,
body:has(.cb-wrap) .site-main { width: 100% !important; max-width: 100% !important; float: none !important; }
body.has-chessball .inside-article,
body:has(.cb-wrap) .inside-article { padding: 12px 8px !important; }

.cb-wrap {
	--cb-home: #d946ef; --cb-home-2: #a21caf;
	--cb-away: #0ea5e9; --cb-away-2: #0369a1;
	--cb-cell: 56px;
	--cb-grass1: #3d8f3d; --cb-grass2: #358035;
	max-width: calc(var(--cb-cell)*12 + 24px);
	margin: 16px auto; padding: 12px;
	background: var(--bg, #142030); color: var(--text, #F3E9DD);
	border-radius: var(--r-lg, 14px);
	border: 1px solid var(--border, rgba(133,163,178,.14));
	box-shadow: var(--shadow-lg, 0 14px 40px rgba(0,0,0,.45));
	font-family: var(--font-ui, 'Manrope', system-ui, sans-serif);
	font-size: 13px; line-height: 1.4;
	user-select: none; -webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
}

/* ── HUD ── */
.cb-hud {
	display: flex; align-items: center; justify-content: space-between;
	padding: 6px 14px;
	background: var(--surface, #1E3442);
	border: 1px solid var(--border, rgba(133,163,178,.14));
	border-radius: var(--r-sm, 6px); margin-bottom: 8px;
}
.cb-score {
	font-family: var(--font-display, 'Unbounded', sans-serif);
	font-size: 1.5em; font-weight: 800; font-variant-numeric: tabular-nums;
	display: flex; gap: 8px; align-items: center;
}
.cb-score-home { color: var(--cb-home); }
.cb-score-away { color: var(--cb-away); }
.cb-score-sep  { color: var(--text-dim, #6B8A9A); font-weight: 400; font-size: .8em; }
.cb-cards { display: inline-flex; gap: 2px; font-size: 0.55em; align-items: center; }
.cb-cards .cb-card-yellow { display: inline-block; width: 9px; height: 12px; background: #facc15; border-radius: 1px; box-shadow: 0 0 3px rgba(0,0,0,.5); }
.cb-cards .cb-card-red    { display: inline-block; width: 9px; height: 12px; background: #ef4444; border-radius: 1px; box-shadow: 0 0 3px rgba(0,0,0,.5); }
.cb-score-team.cb-pulse { animation: cb-pulse .5s ease-in-out 10; }
@keyframes cb-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3);text-shadow:0 0 16px currentColor} }

@keyframes cb-goal-flash {
	0%   { opacity: 0; transform: scale(.6); }
	15%  { opacity: 1; transform: scale(1.2); }
	100% { opacity: 0; transform: scale(1.8); }
}
@keyframes cb-field-shake {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-3px, 2px); }
	20% { transform: translate(3px, -2px); }
	30% { transform: translate(-2px, -2px); }
	40% { transform: translate(2px, 2px); }
	50% { transform: translate(-2px, 0); }
	60% { transform: translate(2px, 0); }
	70% { transform: translate(-1px, 1px); }
	80% { transform: translate(1px, -1px); }
}
.cb-field-shake { animation: cb-field-shake .55s cubic-bezier(.36,.07,.19,.97) both; }
.cb-turn { color: var(--text-muted, #A6BBC4); font-weight: 600; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.cb-timer { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-variant-numeric: tabular-nums; font-weight: 700; }
.cb-timer.cb-low { color: #ef4444; animation: cb-blink 1s infinite; }
@keyframes cb-blink { 50%{opacity:.3} }

/* ── Pitch ── */
.cb-field-outer { display: flex; justify-content: center; }
.cb-field {
	position: relative;
	width: calc(var(--cb-cell)*12); height: calc(var(--cb-cell)*12);
	display: grid;
	grid-template-columns: repeat(12, var(--cb-cell));
	grid-template-rows: repeat(12, var(--cb-cell));
	background: #2a7a2a;
	border: 2px solid rgba(255,255,255,.35);
	box-sizing: content-box; border-radius: 4px; overflow: hidden; contain: paint;
	clip-path: inset(0); -webkit-clip-path: inset(0);
}
.cb-cell { position: relative; box-sizing: border-box; cursor: default; }
.cb-cell[data-r="0"],.cb-cell[data-r="1"],.cb-cell[data-r="4"],.cb-cell[data-r="5"],.cb-cell[data-r="8"],.cb-cell[data-r="9"] { background: var(--cb-grass1); }
.cb-cell[data-r="2"],.cb-cell[data-r="3"],.cb-cell[data-r="6"],.cb-cell[data-r="7"],.cb-cell[data-r="10"],.cb-cell[data-r="11"] { background: var(--cb-grass2); }
.cb-cell.cb-goal-home,.cb-cell.cb-goal-away { background: rgba(255,255,255,.04) !important; }

.cb-cell.cb-hl-move { background: rgba(250,204,21,.35) !important; cursor: pointer; }
.cb-cell.cb-hl-pass { background: rgba(56,189,248,.3) !important; cursor: pointer; }
.cb-cell.cb-hl-shot { background: rgba(239,68,68,.3) !important; cursor: pointer; }
.cb-cell.cb-hl-gk   { outline: 2px dashed rgba(255,255,255,.5); outline-offset: -2px; cursor: pointer; }

.cb-aim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; }
.cb-aim line { stroke-width: 2.5; stroke-dasharray: 6 5; fill: none; visibility: hidden; stroke-linecap: round; }
.cb-aim.cb-aim-pass line,
.cb-aim.cb-aim-shot line,
.cb-aim.cb-aim-move line { stroke: rgba(255,255,255,.7); visibility: visible; }
.cb-pitch-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; opacity: .85; filter: drop-shadow(0 0 1px rgba(0,0,0,.4)); }

/* ── Players ── */
.cb-player {
	position: absolute; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: calc(var(--cb-cell)*.26);
	font-family: var(--font-display, 'Unbounded', sans-serif);
	color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5);
	overflow: hidden; line-height: 1;
	border: 2px solid rgba(255,255,255,.3);
	box-shadow: 0 2px 8px rgba(0,0,0,.45);
	transition: top .42s cubic-bezier(.45,0,.55,1), left .42s cubic-bezier(.45,0,.55,1),
	            transform .15s, box-shadow .15s, filter .15s;
	cursor: pointer; z-index: 10;
}
.cb-player.cb-player-home { background: linear-gradient(160deg, #e879f9, #c026d3 45%, #7e22ce); border-color: rgba(232,121,249,.3); }
.cb-player.cb-player-away { background: linear-gradient(160deg, #60a5fa, #2563eb 45%, #1e3a8a); border-color: rgba(96,165,250,.3); }
.cb-player.cb-player-home.cb-gk { background: linear-gradient(160deg, #fde047, #eab308 45%, #a16207); border-color: rgba(253,224,71,.4); color: #422006; text-shadow: none; }
.cb-player.cb-player-away.cb-gk { background: linear-gradient(160deg, #fda4af, #e11d48 45%, #9f1239); border-color: rgba(253,164,175,.4); }

.cb-player:hover { filter: brightness(1.12); transform: scale(1.08); }
.cb-player.cb-selected {
	transform: scale(1.2);
	box-shadow: 0 0 0 3px #facc15, 0 0 14px rgba(250,204,21,.4), 0 4px 12px rgba(0,0,0,.5);
	z-index: 12; filter: brightness(1.12);
}
.cb-player.cb-has-ball {
	box-shadow: 0 0 0 3px #f97316, 0 0 12px rgba(249,115,22,.45), 0 2px 8px rgba(0,0,0,.45) !important;
}
.cb-player.cb-has-ball::after {
	content: ""; position: absolute; right: -2px; bottom: -2px;
	width: calc(var(--cb-cell)*.18); height: calc(var(--cb-cell)*.18);
	border-radius: 50%; background: #f97316; border: 1.5px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Жёлтая карточка — outline, чтобы не конфликтовать с box-shadow мяча */
.cb-player.cb-yellow-1 {
	outline: 3px solid #facc15;
	outline-offset: 1px;
}
.cb-player.cb-yellow-2 {
	outline: 3px solid #ef4444;
	outline-offset: 1px;
}

.cb-player.cb-squash { transform: scale(1.06,.94) !important; transition: transform .1s ease-out !important; }
.cb-player.cb-flying { box-shadow: 0 12px 22px rgba(0,0,0,.55) !important; filter: brightness(1.06); transform: scale(1.04) !important; }
.cb-player.cb-bounce { animation: cb-bounce .15s ease-out !important; }
@keyframes cb-bounce { 0%{transform:scale(.94,1.06)} 100%{transform:scale(1)} }

/* ── Ball — emoji style ── */
.cb-ball {
	position: absolute;
	width: calc(var(--cb-cell)*.42); height: calc(var(--cb-cell)*.42);
	display: flex; align-items: center; justify-content: center;
	font-size: calc(var(--cb-cell)*.38);
	line-height: 1;
	background: none; border: none; border-radius: 0;
	box-shadow: none;
	transition: top .38s cubic-bezier(.34,1.56,.64,1), left .38s cubic-bezier(.34,1.56,.64,1);
	pointer-events: none; z-index: 15;
	text-shadow: 0 2px 3px rgba(0,0,0,.5);
}
.cb-ball::after { content: "⚽"; }
.cb-ball.cb-ball-free::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: calc(var(--cb-cell)*.85); height: calc(var(--cb-cell)*.85);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid #facc15;
	box-shadow: 0 0 14px rgba(250,204,21,.7), inset 0 0 8px rgba(250,204,21,.4);
	animation: cb-ball-free-pulse 1.2s ease-in-out infinite;
	pointer-events: none;
}
@keyframes cb-ball-free-pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(.85); opacity: .65; }
	50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* ── Stats panel ── */
.cb-stats {
	margin-top: 6px; padding: 8px 12px;
	background: var(--surface, #1E3442);
	border: 1px solid var(--border, rgba(133,163,178,.14));
	border-radius: var(--r-sm, 6px);
	display: flex; align-items: center; gap: 12px;
}
.cb-stats[hidden] { display: none; }
.cb-stat-role { font-family: var(--font-display, 'Unbounded', sans-serif); font-size: 1.1em; font-weight: 800; min-width: 32px; text-align: center; }
.cb-stat-role.cb-stat-home { color: var(--cb-home); }
.cb-stat-role.cb-stat-away { color: var(--cb-away); }
.cb-stat-bars { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.cb-stat-row { display: flex; align-items: center; gap: 4px; min-width: 72px; flex: 1; }
.cb-stat-label { font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--text-dim, #6B8A9A); min-width: 22px; }
.cb-stat-track { flex: 1; height: 5px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.cb-stat-fill { height: 100%; border-radius: 3px; }
.cb-stat-val { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; min-width: 10px; text-align: right; }

/* ── Action buttons — SVG icons, pill style ── */
.cb-actions { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.cb-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 42px;
	background: var(--surface, #1E3442); color: var(--text, #F3E9DD);
	border: 1.5px solid var(--border, rgba(133,163,178,.14));
	border-radius: var(--r-md, 10px);
	cursor: pointer; flex-shrink: 0;
	transition: background .15s, transform .08s, border-color .15s, box-shadow .15s;
}
.cb-btn svg { display: block; flex-shrink: 0; color: inherit; min-width: 14px; min-height: 14px; }
.cb-btn:hover:not(:disabled) { background: var(--surface-2, #264253); border-color: rgba(133,163,178,.28); transform: scale(1.06); }
.cb-btn:active:not(:disabled) { transform: scale(.93); }
.cb-btn:disabled { opacity: .2; cursor: not-allowed; }

.cb-btn-move.cb-btn-active { background: #a16207; border-color: #facc15; color: #fff; box-shadow: 0 0 10px rgba(250,204,21,.3); }
.cb-btn-pass.cb-btn-active { background: #0c4a6e; border-color: #38bdf8; color: #fff; box-shadow: 0 0 10px rgba(56,189,248,.3); }
.cb-btn-shot.cb-btn-active { background: #991b1b; border-color: #ef4444; color: #fff; box-shadow: 0 0 10px rgba(239,68,68,.3); }

/* Pill-shaped text buttons */
.cb-btn-ready, .cb-btn-ok, .cb-btn-restart, .cb-btn-slide {
	width: auto !important; padding: 0 18px; height: 42px;
	border-radius: var(--r-md, 10px) !important;
	font-family: var(--font-ui, 'Manrope', sans-serif);
	font-size: 13px; font-weight: 700; white-space: nowrap;
}
.cb-btn-ready { background: #16a34a; border-color: #22c55e; color: #fff; }
.cb-btn-ready:hover:not(:disabled) { background: #15803d; }
.cb-btn-ok, .cb-btn-restart { background: var(--accent, #FF5C8D); color: var(--accent-ink, #142030); border-color: var(--accent, #FF5C8D); }
.cb-btn-ok:hover, .cb-btn-restart:hover { background: var(--accent-hover, #FF7AA0); }
.cb-btn-slide { background: #d97706; border-color: #f59e0b; color: #fff; }
.cb-btn-slide:hover:not(:disabled) { background: #b45309; }
.cb-btn-slide.cb-btn-active { background: #92400e; border-color: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,.3); }
.cb-btn-special.cb-btn-active { background: #7e22ce; border-color: #a855f7; box-shadow: 0 0 10px rgba(168,85,247,.35); }

/* ── Hint + Log ── */
.cb-hint {
	margin-top: 6px; padding: 6px 12px;
	background: var(--surface, #1E3442);
	border: 1px solid var(--border, rgba(133,163,178,.14));
	border-radius: var(--r-sm, 6px);
	color: var(--text-muted, #A6BBC4);
	min-height: 1.2em; text-align: center; font-size: 12px;
}
.cb-log {
	margin-top: 6px; padding: 4px 8px;
	max-height: 56px; overflow-y: auto;
	background: rgba(0,0,0,.12); border-radius: 4px;
	font-size: .78em; color: var(--text-dim, #6B8A9A);
}
.cb-log p { margin: 1px 0; }
.cb-log p.cb-log-home { color: #d8b4fe; }
.cb-log p.cb-log-away { color: #93c5fd; }
.cb-log p.cb-log-goal { color: #facc15; font-weight: 700; }

/* ── Popup — FM style notification ── */
.cb-popups { position: relative; }
.cb-popup {
	position: absolute;
	font-size: calc(var(--cb-cell)*.38);
	font-weight: 800;
	font-family: var(--font-display, 'Unbounded', sans-serif);
	pointer-events: none;
	animation: cb-popup-anim 1.4s ease-out forwards;
	z-index: 30;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.5);
	background: rgba(0,0,0,.55);
	padding: 3px 10px;
	border-radius: 6px;
	white-space: nowrap;
}
@keyframes cb-popup-anim {
	0%   { opacity: 0; transform: translate(-50%, 4px) scale(.7) }
	12%  { opacity: 1; transform: translate(-50%, -6px) scale(1.1) }
	30%  { transform: translate(-50%, -10px) scale(1) }
	100% { opacity: 0; transform: translate(-50%, -44px) scale(.95) }
}

/* ── Modals ── */
.cb-modal {
	position: fixed; inset: 0; background: rgba(0,0,0,.7);
	display: flex; align-items: center; justify-content: center; z-index: 100;
	animation: cb-fadein .2s; backdrop-filter: blur(3px);
}
.cb-modal[hidden] { display: none; }
@keyframes cb-fadein { from{opacity:0} to{opacity:1} }

/* ── Rules wiki modal ── */
.cb-rules-box {
	position: relative;
	background: var(--bg, #142030); color: var(--text, #F3E9DD);
	border: 1px solid var(--border, rgba(133,163,178,.14));
	border-radius: var(--r-lg, 14px);
	width: 600px; max-width: 94vw; max-height: 85vh;
	display: flex; flex-direction: column;
	box-shadow: 0 20px 60px rgba(0,0,0,.7);
	overflow: hidden;
}
.cb-rules-close {
	position: absolute; top: 12px; right: 14px; z-index: 2;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--surface, #1E3442); border: 1px solid var(--border, rgba(133,163,178,.14));
	color: var(--text-muted, #A6BBC4); font-size: 16px;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cb-rules-close:hover { color: #fff; background: var(--surface-2, #264253); }
.cb-rules-title {
	font-family: var(--font-display, 'Unbounded', sans-serif);
	font-size: 1.3em; font-weight: 700;
	padding: 18px 20px 0; margin: 0;
}
.cb-rules-tabs {
	display: flex; gap: 0; padding: 12px 20px 0;
	border-bottom: 1px solid var(--border, rgba(133,163,178,.14));
	overflow-x: auto; flex-shrink: 0;
}
.cb-rules-tab {
	padding: 8px 14px; font-size: 12px; font-weight: 600;
	color: var(--text-muted, #A6BBC4); background: none; border: none;
	border-bottom: 2px solid transparent; cursor: pointer;
	white-space: nowrap; transition: color .15s, border-color .15s;
}
.cb-rules-tab:hover { color: var(--text, #F3E9DD); }
.cb-rules-tab.is-active { color: var(--accent, #FF5C8D); border-bottom-color: var(--accent, #FF5C8D); }
.cb-rules-content {
	padding: 16px 20px 20px; overflow-y: auto; flex: 1;
	font-size: 13px; line-height: 1.65;
}
.cb-rules-page[hidden] { display: none; }
.cb-rules-content h3 { font-size: 1.15em; margin: 0 0 8px; font-family: var(--font-display, 'Unbounded', sans-serif); }
.cb-rules-content h4 { font-size: .95em; margin: 14px 0 6px; color: var(--accent, #FF5C8D); font-weight: 700; }
.cb-rules-content p { margin: 0 0 8px; color: var(--text-muted, #A6BBC4); }
.cb-rules-content strong { color: var(--text, #F3E9DD); }
.cb-rules-content ul { margin: 0 0 10px; padding-left: 20px; color: var(--text-muted, #A6BBC4); }
.cb-rules-content li { margin: 3px 0; }
.cb-rules-content table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 12px; }
.cb-rules-content th {
	text-align: left; padding: 6px 10px;
	background: var(--surface, #1E3442) !important;
	color: var(--text, #F3E9DD) !important;
	font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
	border-bottom: 1px solid var(--border, rgba(133,163,178,.14)) !important;
}
.cb-rules-content td {
	padding: 5px 10px; border-bottom: 1px solid var(--border, rgba(133,163,178,.06)) !important;
	color: var(--text-muted, #A6BBC4) !important;
}
.cb-rules-content tr:hover td { background: rgba(255,255,255,.02); }
.cb-btn-rules-open {
	width: auto !important; padding: 0 18px; height: 42px;
	border-radius: var(--r-md, 10px) !important;
	background: var(--surface, #1E3442); border: 1px solid var(--border, rgba(133,163,178,.14));
	color: var(--text, #F3E9DD);
	font-family: var(--font-ui, 'Manrope', sans-serif);
	font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.cb-btn-rules-open:hover { background: var(--surface-2, #264253); }

/* Start screen */
.cb-start-box { padding: 32px 36px !important; }
.cb-start-icon { font-size: 3.5em; line-height: 1; margin-bottom: 8px; }
.cb-modal-box {
	background: var(--surface, #1E3442); color: var(--text, #F3E9DD);
	padding: 24px 28px; border: 1px solid var(--border, rgba(133,163,178,.14));
	border-radius: var(--r-md, 10px); max-width: 340px; text-align: center;
	box-shadow: 0 12px 36px rgba(0,0,0,.6);
}
.cb-modal-title { margin: 0 0 8px; font-size: 1.15em; font-family: var(--font-display, 'Unbounded', sans-serif); font-weight: 700; }
.cb-modal-text { color: var(--text-muted, #A6BBC4); margin-bottom: 16px; line-height: 1.45; font-size: .9em; }
.cb-modal-result-box { padding: 30px 36px; }
.cb-result-icon { font-size: 3.5em; line-height: 1; }
.cb-result-text { font-size: 1.5em; font-weight: 800; margin-top: 6px; font-family: var(--font-display, 'Unbounded', sans-serif); }

/* ══════════════════════════════════════
   MOBILE
   ══════════════════════════════════════ */
@media (max-width: 780px) {
	.cb-wrap { --cb-cell: 44px; margin: 8px auto; padding: 8px; }
}
@media (max-width: 560px) {
	.cb-wrap {
		--cb-cell: calc((100vw - 28px) / 12);
		margin: 0; padding: 4px 6px;
		max-width: 100vw; border-radius: 0;
		border-left: none; border-right: none;
		font-size: 12px;
	}
	.cb-field { border-width: 1.5px; border-radius: 2px; }
	.cb-hud { padding: 4px 8px; margin-bottom: 4px; gap: 4px; }
	.cb-score { font-size: 1.1em; gap: 5px; }
	.cb-turn { font-size: .7em; }
	.cb-timer { font-size: .85em; }
	.cb-player { font-size: calc(var(--cb-cell)*.3); border-width: 1.5px; overflow: hidden; line-height: 1; }

	.cb-stats { padding: 4px 8px; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
	.cb-stat-role { font-size: .85em; min-width: 26px; }
	.cb-stat-bars { gap: 3px; }
	.cb-stat-row { min-width: 55px; gap: 2px; }
	.cb-stat-label { font-size: 7px; min-width: 18px; }
	.cb-stat-track { height: 4px; }
	.cb-stat-val { font-size: 8px; }

	.cb-actions { flex-wrap: wrap; gap: 3px; margin-top: 4px; row-gap: 4px; }
	.cb-btn { width: 38px; height: 36px; border-radius: 8px; }
	.cb-btn svg { width: 18px; height: 18px; }
	.cb-btn-ready, .cb-btn-ok, .cb-btn-restart, .cb-btn-slide { height: 36px; font-size: 11px; padding: 0 10px; border-radius: 8px !important; }

	.cb-hint { padding: 3px 6px; font-size: 10px; margin-top: 3px; }
	.cb-log { max-height: 36px; font-size: .7em; margin-top: 3px; padding: 2px 4px; }
	.cb-popup { font-size: calc(var(--cb-cell)*.42); padding: 2px 6px; border-radius: 4px; }
	.cb-modal-box { padding: 16px 20px; max-width: 88vw; }
	.cb-result-icon { font-size: 2.5em; }
	.cb-result-text { font-size: 1.1em; }
	.cb-rules-box { max-height: 80vh; width: 100%; max-width: 100vw; border-radius: 10px; }
	.cb-rules-title { font-size: 1.1em; padding: 14px 14px 0; }
	.cb-rules-tabs { padding: 8px 14px 0; gap: 0; }
	.cb-rules-tab { padding: 6px 10px; font-size: 11px; }
	.cb-rules-content { padding: 12px 14px 16px; font-size: 12px; }
	.cb-rules-content h3 { font-size: 1em; }
	.cb-rules-content table { font-size: 11px; }
	.cb-rules-content th, .cb-rules-content td { padding: 4px 6px; }
	.cb-btn-rules-open { height: 34px; font-size: 11px; padding: 0 12px; }
}
@media (max-width: 380px) {
	.cb-wrap { --cb-cell: calc((100vw - 16px) / 12); padding: 3px 4px; }
	.cb-btn { width: 34px; height: 32px; }
	.cb-btn svg { width: 14px; height: 14px; }
	.cb-btn-ready, .cb-btn-ok, .cb-btn-restart, .cb-btn-slide { height: 32px; font-size: 10px; padding: 0 8px; }
	.cb-actions { gap: 2px; row-gap: 3px; }
}