/* BkL: аркада (общая основа и экраны игр). Цвета берутся из style.css, обе темы работают сами. */
#gamesView.arcade { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.arc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 720px; margin: 0 auto; }
.arc-bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px; }
.arc-back { display: inline-flex; align-items: center; gap: 0; min-height: 34px; padding: 0 12px 0 4px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.arc-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.arc-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.arc-title img { flex: none; display: block; }
.arc-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-today { margin-left: auto; flex: none; font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.arc-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; background: var(--bg2); }

/* общий экран старта */
.arc-splash { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 20px; text-align: center; background: var(--bg); overflow: auto; animation: arcIn .3s var(--ease); }
.arc-splash.out { opacity: 0; transition: opacity .2s; pointer-events: none; }
.arc-splash::before { content: ""; position: absolute; left: 50%; top: 30%; width: 320px; height: 320px; margin: -160px 0 0 -160px; background: radial-gradient(closest-side, rgba(229, 37, 45, .28), transparent); pointer-events: none; }
:root[data-theme="light"] .arc-splash::before { background: radial-gradient(closest-side, rgba(229, 37, 45, .16), transparent); }
.arc-splash > * { position: relative; }
.arc-logo { width: min(46vw, 170px); height: auto; filter: drop-shadow(0 6px 22px rgba(229, 37, 45, .45)); }
.arc-splash h2 { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; word-spacing: .16em; }
/* эмблема игры (assets/games/emblem-*.png, круглая, 320 px): старт, пауза, «Уровень пройден» */
.arc-emb { aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 18px rgba(255, 190, 0, .32)); }
.arc-splash .arc-emb { width: min(44vw, 160px); height: auto; animation: arcEmb .5s var(--ease) both; }
.arc-ov .arc-emb { width: min(26vw, 96px); height: auto; max-height: none; }
@keyframes arcEmb { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .arc-splash .arc-emb { animation: none; } }
.arc-lvl { font-size: 38px; font-weight: 800; line-height: 1.1; color: var(--gold); font-variant-numeric: tabular-nums; }
:root[data-theme="light"] .arc-lvl { color: var(--red); }
.arc-sub { margin: 0; max-width: 300px; color: var(--muted); font-size: 14.5px; }
.arc-day { font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.arc-btns { display: flex; flex-direction: column; gap: 10px; width: min(100%, 260px); margin-top: 12px; }
.arc-btns .btn { width: 100%; min-height: 52px; font-size: 17px; }
@keyframes arcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* общий слой поверх игры (пауза, уровень пройден, конец) */
.arc-ov { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 22px; text-align: center; background: var(--glass); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: arcIn .25s var(--ease); overflow: auto; }
.arc-ov .arc-logo { width: min(34vw, 112px); }
.arc-ov h2 { word-spacing: .16em; margin: 2px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.arc-ov p { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 300px; }
.arc-ov .arc-btns { margin-top: 8px; }
.arc-ov .btn { min-height: 48px; }

/* карточка игры в «Играх» */
.gcard .glogo { position: absolute; right: 18px; top: 16px; width: 44px; height: auto; opacity: .95; pointer-events: none; }
.gcard.garc .gico svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* игра «BkL Кирпичи» */
.bk-canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; touch-action: none; }
.bk-hint { position: absolute; left: 0; right: 0; bottom: 14%; z-index: 3; text-align: center; font-weight: 800; font-size: 16px; color: var(--text); pointer-events: none; text-shadow: 0 1px 8px var(--bg); animation: bkPulse 1.4s ease-in-out infinite; }
@keyframes bkPulse { 50% { opacity: .45; } }
.bk-toast { position: absolute; left: 0; right: 0; top: 46px; z-index: 3; text-align: center; font-weight: 800; font-size: 14px; color: var(--gold); pointer-events: none; text-shadow: 0 1px 8px var(--bg); }
:root[data-theme="light"] .bk-toast { color: var(--red); }
.bk-gain { display: inline-flex; align-items: center; gap: 8px; font-size: 40px; font-weight: 800; color: var(--gold); line-height: 1.1; font-variant-numeric: tabular-nums; }
:root[data-theme="light"] .bk-gain { color: var(--red); }
.bk-gain .coin { width: 36px; height: 36px; background-size: 36px 36px; vertical-align: 0; }
.bk-gain.none { font-size: 18px; color: var(--muted); font-weight: 700; }
.bk-opts { display: flex; gap: 10px; width: min(100%, 260px); }
.bk-opts .btn { flex: 1 1 0; min-height: 44px; padding: 0 10px; font-size: 14px; }
.bk-opts .btn.off { opacity: .6; }
.bk-lives { font-size: 14px; font-weight: 700; color: var(--muted); }
/* во время игры нижнее меню скрыто: выйти можно только «К играм» сверху или из паузы (просьба владельца 07.11) */
body.arc-on .mnav, body.arc-on .navhint { display: none !important; }
.arc-again { width: min(100%, 260px); min-height: 44px; margin-top: 2px; font-size: 14.5px; }
.arc-confirm { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: var(--bg); animation: arcIn .25s var(--ease); }
.arc-confirm h3 { margin: 0; font-size: 24px; font-weight: 800; }
.arc-confirm p { margin: 0; max-width: 300px; font-size: 15.5px; }
/* компактная шапка в игре (07.11): шапки приложения нет, кошелёк в строке «К играм», «сегодня» мелко под названием */
body.arc-on #top { display: none !important; }
.arc-tt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.arc-tt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-tt .arc-today { margin-left: 0; font-size: 11px; font-weight: 600; }
.arc-bar .whdr.in-arc { margin-left: auto; margin-right: 0; min-height: 34px; padding: 0 10px; flex: none; }
.arc-bar .whdr.in-arc .wn { display: none; }
/* режим «игра идёт» (api.playing): строка ядра уходит, сцена растёт вверх (просьба владельца 07.11) */
.arc-bar { max-height: 64px; overflow: hidden; transition: max-height .22s var(--ease), padding .22s var(--ease), min-height .22s var(--ease), opacity .18s; }
.arc.playing .arc-bar { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; }