/* ==========================================================================
   HEXREACTOR — оформление интерфейса
   Палитра продублирована из js/theme.js. Меняете там — меняйте и здесь.
   ========================================================================== */

/* Шрифты урезаны до кириллицы, латиницы и цифр и пережаты в woff2:
   было 195 КБ в трёх .otf, стало 31 КБ. Пересобрать после смены языка:
   python -m fontTools.subset Exo2-Regular.otf --unicodes=U+0020-007E,U+00A0,U+00AB,U+00BB,U+0401,U+0451,U+0410-044F,U+2013,U+2014,U+2018-201A,U+201C-201E,U+2026,U+2116 --flavor=woff2 */

@font-face {
	font-family: Exo;
	font-weight: 200;
	font-display: block;
	src: url("./fonts/Exo2-ExtraLight.woff2") format("woff2");
}

@font-face {
	font-family: Exo;
	font-weight: 400;
	font-display: block;
	src: url("./fonts/Exo2-Regular.woff2") format("woff2");
}

@font-face {
	font-family: Exo;
	font-weight: 600;
	font-display: block;
	src: url("./fonts/Exo2-SemiBold.woff2") format("woff2");
}

:root {
	/* Держать в паре с js/theme.js */
	--page-bg: #05070C;
	--accent: #2DD4BF;
	--accent-strong: #4FE3D0;
	--accent-ink: #04231F;
	--accent-soft: rgba(45, 212, 191, 0.12);

	--panel: rgba(16, 22, 34, 0.94);
	--panel-line: rgba(126, 148, 184, 0.16);
	--panel-line-strong: rgba(126, 148, 184, 0.30);

	--text: #F0F4FA;
	--text-dim: #97A6BD;
	/* Было #5A6880 — контраст 3.58 на фоне страницы при норме 4.5.
	   Подписи и подсказки на телефоне при свете читались плохо. */
	--text-faint: #8090A8;

	--tap: 64px;
	--radius: 18px;
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

html,
body {
	height: 100%;
}

body {
	background-color: var(--page-bg);
	color: var(--text);
	font-family: Exo, "Segoe UI", system-ui, sans-serif;
	font-weight: 400;
	overflow: hidden;
	overscroll-behavior: none;
	/* Площадка требует, чтобы в игре не было прокрутки страницы,
	   pull-to-refresh и зума щипком: браузерные жесты обязаны быть отключены,
	   иначе поворот поля пальцем начинает тянуть страницу. */
	touch-action: none;
}

#canvas {
	touch-action: none;
}

#canvas {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	background-color: var(--page-bg);
	z-index: 0;
	transition: opacity 0.45s ease, filter 0.45s ease;
}

#canvas.blur {
	opacity: 0.22;
	filter: blur(2px);
}

/* --------------------------------------------------------------------------
   Рекорд поверх поля
   -------------------------------------------------------------------------- */

#highScoreInGameText {
	position: absolute;
	/* Под бейджем сложности: тот стоит на 16px и с z-index 110, и при равных
	   отступах накрывал собой подпись «Рекорд», оставляя на экране висящее
	   в воздухе число. 52px — низ бейджа (16 + 5 + 14 + 5 + рамка) плюс воздух. */
	top: calc(52px + var(--safe-top));
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	text-align: center;
	pointer-events: none;
	line-height: 1.1;
}

#highScoreInGameTextHeader {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-faint);
}

#currentHighScore {
	margin-top: 4px;
	font-size: 30px;
	font-weight: 200;
	color: var(--text-dim);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.iconBtn {
	position: fixed;
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	z-index: 3000;
	border: 1px solid var(--panel-line);
	border-radius: 18px;
	background:
		linear-gradient(145deg, rgba(26, 38, 58, 0.96), rgba(8, 13, 23, 0.96));
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: var(--text-dim);
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.42);
	clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
	transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.iconBtn svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.iconBtn:hover {
	color: #E9FDFF;
	border-color: rgba(0, 229, 255, 0.62);
	box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.08), 0 0 22px rgba(0, 229, 255, 0.32);
}

.iconBtn:active {
	transform: scale(0.94);
}

.iconBtn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

#soundBtn {
	display: flex;
	top: calc(16px + var(--safe-top));
	right: calc(16px + var(--safe-right));
	z-index: 3100;
}

#pauseBtn {
	right: calc(16px + var(--safe-right));
	bottom: calc(16px + var(--safe-bottom));
}

/* Тот же угол, что и у кнопки помощи. Одновременно они не показываются:
   помощь живёт в меню, выход в меню — на паузе. */
#homeBtn {
	top: calc(16px + var(--safe-top));
	left: calc(16px + var(--safe-left));
	z-index: 3100;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 34px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, filter 0.18s ease;
}

.btn--primary {
	background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
	color: var(--accent-ink);
	box-shadow: 0 10px 28px -8px rgba(45, 212, 191, 0.55);
}

.btn--primary:hover {
	filter: brightness(1.08);
	box-shadow: 0 12px 32px -6px rgba(45, 212, 191, 0.7);
}

.btn--primary:active {
	transform: scale(0.97);
}

/* Видимостью кнопок управляет этот класс, а не jQuery.toggle():
   toggle подставляет инлайновый display и затирает inline-flex из .btn,
   после чего подпись перестаёт центрироваться. */
.is-hidden {
	display: none !important;
}

.btn--ghost {
	border: 1px solid rgba(255, 176, 32, 0.4);
	background: linear-gradient(135deg, rgba(255, 176, 32, 0.18) 0%, rgba(255, 136, 0, 0.12) 100%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #FFB020;
	box-shadow: 0 8px 24px -8px rgba(255, 176, 32, 0.35);
}

.btn--ghost:hover {
	color: #FFD270;
	border-color: #FFB020;
	background: linear-gradient(135deg, rgba(255, 176, 32, 0.28) 0%, rgba(255, 136, 0, 0.2) 100%);
	box-shadow: 0 10px 28px -6px rgba(255, 176, 32, 0.5);
}

.btn--ghost:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Третьестепенное действие: уводит с экрана результата, но не должно
   спорить с «Играть снова». */
.btn--quiet {
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	background: none;
	color: var(--text-faint);
	font-size: 15px;
	font-weight: 400;
}

.btn--quiet:hover {
	color: var(--text-dim);
}

.btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.btn:disabled {
	opacity: 0.58;
	cursor: wait;
	filter: saturate(0.65);
}

/* Пауза: отдельный приборный слой поверх поля. */
.overlay {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 2900;
	pointer-events: none;
	color: var(--text);
	text-align: center;
	background: radial-gradient(circle at center, rgba(10, 18, 31, 0.56), rgba(3, 6, 12, 0.88));
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

body.is-paused .overlay {
	pointer-events: auto;
}

.pauseConsole {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(390px, calc(100% - 32px));
	transform: translate(-50%, -50%);
	padding: 28px 24px 22px;
	border: 1px solid rgba(0, 229, 255, 0.34);
	border-radius: 24px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 12px),
		linear-gradient(165deg, rgba(17, 28, 46, 0.98), rgba(6, 11, 20, 0.985));
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 80px rgba(0,0,0,0.68), 0 0 36px rgba(0,229,255,0.12);
	text-align: center;
	animation: modalPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pauseConsole::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #00E5FF, transparent);
	box-shadow: 0 0 14px rgba(0,229,255,0.8);
}

.pauseConsole__eyebrow {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: #00E5FF;
}

.pauseConsole__title {
	margin-top: 7px;
	font-size: clamp(34px, 8vw, 50px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #F4FEFF;
	text-shadow: 0 0 24px rgba(0,229,255,0.48);
}

.pauseConsole__hint {
	margin: 11px auto 20px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-faint);
}

.pauseConsole__actions {
	display: grid;
	gap: 9px;
}

.pauseConsole__btn {
	width: 100%;
	min-height: 52px;
}

.pauseConsole__btn--secondary {
	border-color: rgba(0,229,255,0.24);
	background: rgba(14,24,39,0.88);
	color: var(--text);
}

.pauseConsole__btn--secondary:hover {
	border-color: rgba(0,229,255,0.58);
	background: rgba(20,34,53,0.94);
}

.pauseConsole__btn--quiet {
	min-height: 42px;
}

.centeredHeader {
	position: absolute;
	top: 43%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: clamp(30px, 5vw, 58px);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #E9FDFF;
	text-shadow: 0 0 28px rgba(0, 229, 255, 0.58);
}

.centeredSubHeader {
	position: absolute;
	top: 52%;
	left: 50%;
	transform: translateX(-50%);
	width: min(520px, calc(100% - 48px));
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.08em;
	color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Выбор сложности — только на экране меню
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Главное меню и выбор режима
   -------------------------------------------------------------------------- */



/* Внутриигровой HUD */
#inGameHud {
	position: fixed;
	top: calc(16px + var(--safe-top));
	left: 50%;
	transform: translateX(-50%);
	z-index: 110;
	pointer-events: none;
}

.hudBadge {
	display: inline-block;
	padding: 5px 16px;
	border-radius: 999px;
	background: rgba(11, 15, 24, 0.85);
	border: 1px solid rgba(0, 229, 255, 0.35);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: #00E5FF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 229, 255, 0.2);
}

/* --------------------------------------------------------------------------
   Экран выбора сложности (чистые стильные кнопки)
   -------------------------------------------------------------------------- */

#modeSelectScreen {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: rgba(5, 7, 12, 0.88);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.diffMenuModal {
	position: relative;
	width: min(360px, calc(100% - 32px));
	background:
		linear-gradient(160deg, rgba(18, 28, 46, 0.98), rgba(7, 11, 20, 0.98));
	border: 1px solid rgba(0, 229, 255, 0.3);
	border-radius: 24px;
	padding: 32px 24px 20px;
	box-shadow: 0 35px 80px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 229, 255, 0.18);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
	animation: modalPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.diffMenuModal::before {
	content: "";
	position: absolute;
	top: 0;
	left: 32px;
	right: 32px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #00E5FF, transparent);
	box-shadow: 0 0 18px rgba(0, 229, 255, 0.9);
}

.screenEyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--text-faint);
}

@keyframes modalPop {
	from { transform: scale(0.92); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.diffMenu__title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #00E5FF;
	text-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
	margin-bottom: 6px;
}

.diffMenu__hint {
	margin: -4px 6px 8px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--text-faint);
}

.diffMenuList {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.diffMenuBtn {
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 16px;
	background: rgba(20, 28, 44, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #FFFFFF;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
	transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
}

.diffMenuBtn__icon {
	width: 36px;
	height: 36px;
	object-fit: contain;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
	flex-shrink: 0;
	transition: transform 0.2s ease;
	pointer-events: none;
}

.diffMenuBtn:hover .diffMenuBtn__icon {
	transform: scale(1.15) rotate(4deg);
}

.diffMenuBtn__text {
	flex: 1;
	pointer-events: none;
}

.diffMenuBtn:hover {
	transform: scale(1.04) translateY(-2px);
}

.diffMenuBtn:active {
	transform: scale(0.96);
}

.diffMenuBtn:focus-visible,
.records__tab:focus-visible,
.menuCyberBtn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.diffMenuBtn--calm { border-color: rgba(0, 230, 118, 0.3); }
.diffMenuBtn--calm:hover {
	background: rgba(0, 230, 118, 0.2);
	border-color: #00E676;
	color: #00E676;
	box-shadow: 0 10px 25px rgba(0, 230, 118, 0.35);
}

.diffMenuBtn--normal { border-color: rgba(0, 229, 255, 0.35); }
.diffMenuBtn--normal:hover {
	background: rgba(0, 229, 255, 0.2);
	border-color: #00E5FF;
	color: #00E5FF;
	box-shadow: 0 10px 25px rgba(0, 229, 255, 0.45);
}

.diffMenuBtn--fast { border-color: rgba(157, 78, 221, 0.3); }
.diffMenuBtn--fast:hover {
	background: rgba(157, 78, 221, 0.2);
	border-color: #9D4EDD;
	color: #C77DFF;
	box-shadow: 0 10px 25px rgba(157, 78, 221, 0.35);
}

.diffMenuBtn--hard { border-color: rgba(255, 0, 127, 0.3); }
.diffMenuBtn--hard:hover {
	background: rgba(255, 0, 127, 0.2);
	border-color: #FF007F;
	color: #FF007F;
	box-shadow: 0 10px 25px rgba(255, 0, 127, 0.35);
}

.diffMenuBack {
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Бортовой справочник
   -------------------------------------------------------------------------- */

#helpScreen {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 3050;
	background: rgba(5, 8, 14, 0.94);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	color: var(--text);
	overflow-y: auto;
	/* Сверху полоса под кнопку выхода — она стоит фиксированно, и без отступа
	   легла бы на угол первой карточки. Столько же у экрана рекордов. */
	padding: calc(82px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
}

#inst_main_body {
	width: min(440px, 100%);
	margin: 0 auto;
	text-align: left;
}

.helpCyberModal {
	position: relative;
	background: linear-gradient(180deg, rgba(16, 23, 38, 0.98) 0%, rgba(10, 14, 24, 0.99) 100%);
	border: 1px solid rgba(0, 229, 255, 0.35);
	border-radius: 24px;
	padding: 26px 20px 22px;
	box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 45px rgba(0, 229, 255, 0.18), inset 0 0 30px rgba(0, 229, 255, 0.03);
	display: flex;
	flex-direction: column;
	gap: 12px;
	animation: modalPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.helpCyberModal::before {
	content: "";
	position: absolute;
	top: 0; left: 24px; right: 24px; height: 3px;
	background: linear-gradient(90deg, transparent 0%, #00E5FF 50%, transparent 100%);
	box-shadow: 0 0 14px #00E5FF;
}

.helpHeader {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-align: center;
}

.helpHeader__status {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #00E5FF;
	opacity: 0.85;
}

.helpHeader__title {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}

.helpHeader__lead {
	margin: 4px auto 0;
	max-width: 370px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-dim);
}

.helpCard {
	padding: 13px 15px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(14, 20, 32, 0.7);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.helpCard__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #FFFFFF;
	margin-bottom: 5px;
}

.helpCard__badge {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(0, 229, 255, 0.15);
	border: 1px solid rgba(0, 229, 255, 0.4);
	color: #00E5FF;
}

.helpCard__desc {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-dim);
}

.helpCard__desc b {
	color: #00E5FF;
	font-weight: 700;
}

.helpFooter {
	margin-top: 8px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.helpFooter__primary {
	width: 100%;
	min-height: 50px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Экран рекордов
   -------------------------------------------------------------------------- */

#recordsScreen,
#ourGamesScreen {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 3003;
	background:
		radial-gradient(circle at 50% 12%, rgba(0, 229, 255, 0.1), transparent 34%),
		linear-gradient(180deg, rgba(5, 9, 17, 0.98), rgba(3, 6, 12, 0.99));
	color: var(--text);
	overflow-y: auto;
}

#recordsClose,
#ourGamesClose,
#helpCloseTopBtn {
	display: flex;
	top: calc(16px + var(--safe-top));
	left: calc(16px + var(--safe-left));
	/* Выше всех кнопок игрового слоя: этот экран перекрывает игру целиком,
	   и его выход не должен оказаться ничем накрыт. */
	z-index: 3200;
}

#records_body,
#ourGames_body {
	width: min(500px, calc(100% - 32px));
	margin: 0 auto;
	padding: calc(82px + var(--safe-top)) 0 48px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.records__kicker {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-align: center;
	color: var(--text-faint);
}

.records__head {
	font-size: clamp(25px, 6vw, 32px);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 0 0 22px rgba(0, 229, 255, 0.34);
	text-align: center;
}

.records__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.records__tab {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(20, 28, 44, 0.6);
	color: var(--text-dim);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.records__tab:hover {
	color: var(--text);
	border-color: rgba(0, 229, 255, 0.4);
	background: rgba(25, 36, 58, 0.85);
}

.records__tab.is-active {
	background: rgba(0, 229, 255, 0.15);
	border-color: #00E5FF;
	color: #00E5FF;
	font-weight: 600;
	box-shadow: 0 0 16px rgba(0, 229, 255, 0.3);
}

.records__panel {
	position: relative;
	margin-top: 8px;
	padding: 20px;
	border: 1px solid rgba(0, 229, 255, 0.18);
	border-radius: 22px;
	background: linear-gradient(160deg, rgba(17, 27, 44, 0.9), rgba(8, 13, 23, 0.92));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 48px rgba(0, 0, 0, 0.38);
}

.records__panelLabel {
	margin-bottom: 14px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-align: center;
	color: #00E5FF;
}

.records__subLabel {
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.records__subLabel--spaced {
	margin-top: 22px;
}

.records__boardStatus {
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: rgba(5, 10, 18, 0.42);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--text-faint);
}

/* Состояние с кнопкой входа: текст и действие в столбик. */
.records__boardStatus--action {
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	text-align: center;
}

.records__authBtn {
	min-width: 180px;
}

.records__board {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.records__list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	list-style: none;
}

.records__row {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 13px;
	background: rgba(7, 13, 23, 0.58);
	font-variant-numeric: tabular-nums;
}

.records__row.is-me {
	border-color: rgba(0, 229, 255, 0.42);
	background: rgba(0, 229, 255, 0.1);
	box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.05);
}

.records__place {
	font-size: 13px;
	font-weight: 800;
	color: #00E5FF;
}

.records__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dim);
}

.records__score {
	font-size: 15px;
	font-weight: 800;
	color: #FFFFFF;
}

.records__mine {
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: #00E5FF;
}

/* --------------------------------------------------------------------------
   Главное меню (3D Логотип и Кибер-кнопки)
   -------------------------------------------------------------------------- */

#menuTopLogo {
	position: absolute;
	top: calc(18px + var(--safe-top));
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	z-index: 100;
}

.gameLogoImg {
	max-width: min(340px, 80vw);
	height: auto;
	filter: drop-shadow(0 0 25px rgba(0, 229, 255, 0.65));
	animation: logoPulse 3s ease-in-out infinite alternate;
}

.gameLogoText {
	display: inline-block;
	font-size: clamp(25px, 4vw, 34px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.045em;
	color: #F7FDFF;
	text-shadow:
		0 2px 0 #087BA0,
		0 4px 0 #053C5A,
		0 0 10px rgba(0, 229, 255, 0.9),
		0 0 28px rgba(0, 176, 255, 0.72);
	animation: logoPulse 3s ease-in-out infinite alternate;
}

.gameLogoImg[hidden],
.gameLogoText[hidden] {
	display: none;
}

@keyframes logoPulse {
	from { transform: translateY(0) scale(0.99); filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.5)); }
	to { transform: translateY(-4px) scale(1.01); filter: drop-shadow(0 0 35px rgba(0, 229, 255, 0.85)); }
}

#menuBottom {
	position: absolute;
	bottom: calc(20px + var(--safe-bottom));
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: min(374px, calc(100% - 24px));
	margin: 0 auto;
	padding: 12px;
	border: 1px solid rgba(0, 229, 255, 0.2);
	border-radius: 22px;
	background: linear-gradient(160deg, rgba(16, 25, 41, 0.88), rgba(6, 10, 18, 0.9));
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 18px 42px rgba(0,0,0,0.52), 0 0 28px rgba(0,229,255,0.08);
	z-index: 100;
}

#playBtn.btn--play {
	width: 100%;
	min-height: 58px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 16px;
	background: linear-gradient(135deg, #00E5FF 0%, #00B0FF 100%);
	color: #05070C;
	border: 1px solid rgba(255, 255, 255, 0.45);
	box-shadow: 0 0 30px rgba(0, 229, 255, 0.5), 0 10px 25px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

#playBtn.btn--play:hover {
	background: linear-gradient(135deg, #38EFFF 0%, #00C2FF 100%);
	box-shadow: 0 0 45px rgba(0, 229, 255, 0.8), 0 12px 30px rgba(0, 0, 0, 0.6);
	transform: translateY(-2px) scale(1.02);
}

#playBtn.btn--play:active {
	transform: scale(0.97);
}

.menuButtonBar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	width: 100%;
}

/* С кнопкой «Наши игры» кнопок становится четыре. В одну строку на 375px
   они дают по 76px — подписи в две строки и мимо зоны нажатия. Два ряда
   по две сохраняют и ширину, и читаемость. */
.menuButtonBar--four {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 560px) {
	.menuButtonBar--four {
		grid-template-columns: repeat(4, 1fr);
	}
}

.menuCyberBtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 64px;
	padding: 8px 4px 6px;
	background: rgba(14, 20, 32, 0.85);
	border: 1px solid rgba(0, 229, 255, 0.25);
	border-radius: 14px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--text-dim);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menuCyberBtn:hover {
	border-color: #00E5FF;
	color: #FFFFFF;
	background: rgba(22, 34, 54, 0.95);
	box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
	transform: translateY(-2px) scale(1.03);
}

.menuCyberBtn:active {
	transform: scale(0.95);
}

.menuCyberBtn__icon {
	width: 28px;
	height: 28px;
	object-fit: contain;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.menuCyberBtn__text {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Экран «Наши игры»
   -------------------------------------------------------------------------- */

.ourGames__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
	gap: 12px;
	margin-top: 8px;
}

.gameCard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border: 1px solid rgba(0, 229, 255, 0.2);
	border-radius: 16px;
	background: rgba(14, 20, 32, 0.85);
	text-decoration: none;
	color: var(--text-dim);
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.gameCard:hover {
	border-color: #00E5FF;
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 0 20px rgba(0, 229, 255, 0.28);
}

.gameCard__art {
	display: block;
	width: 100%;
	/* Обложки в каталоге площадки — 16:9. Пропорция задана здесь, чтобы
	   сетка не прыгала, пока картинки грузятся. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
	background: rgba(5, 10, 18, 0.6);
}

.gameCard__art--blank {
	border: 1px dashed rgba(0, 229, 255, 0.22);
}

.gameCard__title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.ourGames__all {
	margin-top: 16px;
	text-align: center;
	text-decoration: none;
	line-height: 44px;
}

/* --------------------------------------------------------------------------
   Экран окончания игры (AAA Cyber Console)
   -------------------------------------------------------------------------- */

#gameoverscreen {
	position: fixed;
	inset: 0;
	z-index: 3005;
	background: rgba(5, 8, 14, 0.92);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
	overflow-y: auto;
}

.gameOverModal {
	position: relative;
	width: min(360px, 100%);
	background: linear-gradient(180deg, rgba(16, 23, 38, 0.98) 0%, rgba(10, 14, 24, 0.99) 100%);
	border: 1px solid rgba(0, 229, 255, 0.35);
	border-radius: 24px;
	padding: 28px 22px 24px;
	box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 45px rgba(0, 229, 255, 0.2), inset 0 0 35px rgba(0, 229, 255, 0.03);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	animation: modalPop 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Кибернетический верхний срез */
.gameOverModal::before {
	content: "";
	position: absolute;
	top: 0; left: 24px; right: 24px; height: 3px;
	background: linear-gradient(90deg, transparent 0%, #00E5FF 50%, transparent 100%);
	box-shadow: 0 0 14px #00E5FF;
}

.gameOverModal__header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gameOverModal__status {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #00E5FF;
	opacity: 0.8;
}

.gameOverModal__title {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
}

/* Счёт и ранг */
.gameOverModal__scoreBox {
	background: rgba(6, 9, 16, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 18px;
	padding: 18px 16px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

.gameOverModal__scoreLabel {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.gameOverModal__scoreNum {
	margin: 4px 0 2px;
	font-size: 70px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 28px rgba(0, 229, 255, 0.6);
}

.gameOverModal__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.rankBadge {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	border: 1px solid #00E5FF;
	background: rgba(0, 229, 255, 0.14);
	color: #00E5FF;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
}

.gameOverDiff {
	font-size: 12.5px;
	letter-spacing: 0.1em;
	color: var(--text-dim);
	font-weight: 700;
	text-transform: uppercase;
}

.newHighScoreBadge {
	margin-bottom: 8px;
	padding: 4px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 176, 32, 0.3) 100%);
	border: 1px solid #FFD700;
	color: #FFD700;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
	animation: pulseGlow 1.4s infinite alternate ease-in-out;
}

/* Таблица личных рекордов с 3D трофеями */
.gameOverModal__records {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

.gameOverModal__recordsTitle {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-faint);
	text-align: center;
}

.gameOverRecordsList {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gameOverRecordRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	border-radius: 12px;
	background: rgba(18, 25, 42, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dim);
	font-variant-numeric: tabular-nums;
	transition: background 0.18s ease;
}

.gameOverRecordRow__left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.recordRowMedal {
	width: 22px;
	height: 22px;
	object-fit: contain;
	filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.recordRowScore {
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
}

.gameOverRecordRow--1 {
	border-color: rgba(255, 215, 0, 0.4);
	background: rgba(35, 30, 18, 0.8);
}
.gameOverRecordRow--1 .recordRowScore {
	color: #FFD700;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.gameOverRecordRow--2 {
	border-color: rgba(192, 192, 192, 0.25);
}

.gameOverRecordRow--3 {
	border-color: rgba(205, 127, 50, 0.25);
}

/* Кнопки действий */
.gameOverModal__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

.gameOverBtn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn--continue {
	min-height: 52px;
	background: linear-gradient(135deg, rgba(255, 179, 0, 0.25) 0%, rgba(255, 143, 0, 0.35) 100%);
	border: 1px solid #FFB300;
	color: #FFD54F;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 16px;
	box-shadow: 0 0 20px rgba(255, 179, 0, 0.35);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Требование 4.5.1: кнопка вызова рекламы за вознаграждение обязана сама
   показывать, что за ней ролик. Текст это уже говорит — «Продолжить за
   рекламу», — но единственным отличием от двух соседних кнопок был цвет
   заливки, и на отказе модерация назвала такой маркер недостаточно
   очевидным. Добавляем значок ролика рядом с надписью.

   Псевдоэлементом, а не картинкой: значок нужен ровно один и в одном месте,
   заводить ради него файл в архиве и ещё один запрос незачем. */
.btn--continue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn--continue::before {
	content: '\25B6';
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 19px;
	border-radius: 5px;
	background-color: rgba(5, 8, 14, 0.8);
	border: 1px solid rgba(255, 179, 0, 0.85);
	color: #FFD54F;
	font-size: 9px;
	line-height: 1;
	/* Треугольник оптически тяжелее слева, по центру плашки смотрится сдвинутым. */
	text-indent: 1px;
}

.btn--continue:hover {
	background: linear-gradient(135deg, rgba(255, 179, 0, 0.45) 0%, rgba(255, 143, 0, 0.55) 100%);
	box-shadow: 0 0 30px rgba(255, 179, 0, 0.7);
	transform: scale(1.03);
}

.btn--menu {
	min-height: 56px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 16px;
	background: linear-gradient(135deg, #00E5FF 0%, #00B0FF 100%);
	color: #05070C;
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 25px rgba(0, 229, 255, 0.45);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn--menu:hover {
	background: linear-gradient(135deg, #38EFFF 0%, #00C2FF 100%);
	box-shadow: 0 0 35px rgba(0, 229, 255, 0.7);
	transform: scale(1.03) translateY(-1px);
}

.btn--menu:active {
	transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   Единый материал интерфейса: панели одной бортовой системы
   -------------------------------------------------------------------------- */

#menuBottom,
.diffMenuModal,
.helpCyberModal,
.records__panel,
.gameOverModal,
.pauseConsole {
	border-color: rgba(0, 229, 255, 0.26);
	background-image:
		linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px),
		radial-gradient(circle at 50% 0, rgba(0, 229, 255, 0.07), transparent 42%),
		linear-gradient(165deg, rgba(16, 26, 43, 0.97), rgba(6, 10, 18, 0.985));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 24px 64px rgba(0, 0, 0, 0.58),
		0 0 30px rgba(0, 229, 255, 0.1);
}

.menuCyberBtn,
.diffMenuBtn,
.records__tab,
.pauseConsole__btn--secondary {
	background-color: rgba(12, 21, 35, 0.88);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.unselectable {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* --------------------------------------------------------------------------
   Мелкие экраны
   -------------------------------------------------------------------------- */

@media (max-width: 420px), (max-height: 620px) {
	:root {
		--tap: 56px;
	}

	#currentHighScore {
		font-size: 26px;
	}

	#container {
		padding: 28px 24px 24px;
	}

	#cScore {
		font-size: 56px;
	}

	.pauseConsole {
		padding: 22px 18px 18px;
		border-radius: 20px;
	}

	.pauseConsole__title {
		font-size: 34px;
	}

	.pauseConsole__hint {
		margin-bottom: 14px;
	}

	.pauseConsole__btn {
		min-height: 48px;
	}
}

/* Ландшафт на телефоне: карточка результата ниже, кнопка ближе к краю */
@media (orientation: landscape) and (max-height: 520px) {
	.pauseConsole {
		width: min(560px, calc(100% - 32px));
		padding: 16px 18px;
	}

	.pauseConsole__eyebrow,
	.pauseConsole__hint {
		display: none;
	}

	.pauseConsole__title {
		margin: 0 0 12px;
		font-size: 30px;
	}

	.pauseConsole__actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pauseConsole__btn,
	.pauseConsole__btn--quiet {
		min-height: 46px;
		padding-inline: 10px;
		font-size: 12px;
	}

	#container {
		top: 46%;
		padding: 22px 26px 20px;
	}

	#cScore {
		margin: 6px 0 2px;
		font-size: 46px;
	}

	#highScoresTitle {
		margin: 16px 0 10px;
		padding-top: 14px;
	}

	#bottomContainer {
		bottom: calc(16px + var(--safe-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	#canvas,
	.iconBtn,
	.btn {
		transition: none;
	}
}