/* Crowd Titan — интерфейс «Марш»: картонные плакаты на палках, которые несёт толпа. Плотная бумага, ручной печатный сдвиг
   краски, жёсткие тени без глянца, значки-пины, скотч. Движение — покачивание в ритме шага. */
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito.ttf') format('truetype'); font-weight: 200 1000; font-display: swap; }

:root {
    --card: #f8f1e1; --card2: #efe3c9; --ink: #1b2150; --coral: #ff5438; --coral2: #d93a20; --sun: #ffcf2e; --sun2: #e9ae0c; --mint: #16c7b7;
    --stick: #bb8449; --stick2: #8f6132; --tape: rgba(255, 214, 90, .78); --skin: #47a3ff;
    --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
    --unit: 1;
    --u: calc(1px * var(--unit));
    --tut-bg: #f8f1e1; --tut-fg: #1b2150; --tut-accent: #ff5438; --tut-border: #1b2150; --tut-font: Nunito, system-ui, sans-serif;
}
#ct-ui { position: fixed; inset: 0; pointer-events: none; font-family: Nunito, system-ui, sans-serif; font-weight: 900; color: var(--ink); z-index: 10; -webkit-tap-highlight-color: transparent; overflow: hidden; }
#ct-ui * { box-sizing: border-box; }
:where(#ct-ui) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#ct-ui img { user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ct-hide { display: none !important; }

/* Картон: общая фактура */
.ct-cardboard { background: repeating-linear-gradient(2deg, rgba(120, 90, 40, .055) 0 2px, transparent 2px 6px), var(--card); border-radius: calc(10 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(13 * var(--u)) / calc(13 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), calc(6 * var(--u)) calc(7 * var(--u)) 0 rgba(27, 33, 80, .32); }
.ct-print { color: var(--ink); text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 rgba(255, 84, 56, .9); text-transform: uppercase; letter-spacing: .01em; }

/* --- Таблички над толпой --- */
#ct-tags, #ct-pops { position: absolute; inset: 0; pointer-events: none; }
.ct-tag { position: absolute; left: 0; top: 0; will-change: transform; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; }
.ct-tag span { display: block; width: fit-content; min-width: clamp(30px, calc(40 * var(--u)), 56px); padding: calc(1 * var(--u)) clamp(6px, calc(9 * var(--u)), 13px); text-align: center; font-size: clamp(15px, calc(21 * var(--u)), 28px); line-height: 1.2; transform-origin: 50% 100%; will-change: transform; color: var(--ink); background: var(--card); border-radius: calc(5 * var(--u)); box-shadow: 0 0 0 calc(2.5 * var(--u)) var(--ink), calc(3 * var(--u)) calc(3 * var(--u)) 0 rgba(27, 33, 80, .3); transform: rotate(-3deg); }
.ct-tag::after { content: ''; display: block; width: calc(5 * var(--u)); height: calc(17 * var(--u)); background: var(--stick); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ink); margin-top: calc(1 * var(--u)); }
.ct-tag.bad span { background: var(--coral); color: #fff; }
.ct-tag-enemy span { background: var(--coral); color: #fff; transform: rotate(3deg); }

.ct-pop { position: absolute; left: 0; top: 0; font-size: calc(40 * var(--u)); white-space: nowrap; will-change: transform, opacity; color: var(--sun); -webkit-text-stroke: calc(6 * var(--u)) var(--ink); paint-order: stroke fill; text-transform: uppercase; }
.ct-pop.good { color: #fff; }
.ct-pop.bad { color: var(--coral); font-size: calc(46 * var(--u)); }
.ct-pop.mult { color: var(--sun); font-size: calc(52 * var(--u)); }
.ct-pop.energy { color: #8ff4ea; }

#ct-hud { position: absolute; inset: 0; }

/* --- Маршрут забега: вертикальная разметка на левом краю --- */
#ct-route { position: absolute; left: calc(14 * var(--u) + env(safe-area-inset-left, 0px)); top: calc(70 * var(--u) + var(--safe-t)); bottom: calc(46 * var(--u) + var(--safe-b)); width: calc(26 * var(--u)); }
.ct-rline { position: absolute; left: 50%; top: 0; bottom: 0; width: calc(12 * var(--u)); margin-left: calc(-6 * var(--u)); border-radius: 99px; background: var(--card); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink); overflow: hidden; }
.ct-rfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: repeating-linear-gradient(-45deg, var(--coral) 0 7px, var(--coral2) 7px 14px); }
.ct-rflag { position: absolute; left: 50%; top: calc(-20 * var(--u)); margin-left: calc(-12 * var(--u)); width: calc(24 * var(--u)); height: calc(20 * var(--u)); background: conic-gradient(var(--ink) 25%, #fff 0 50%, var(--ink) 0 75%, #fff 0) 0 0 / calc(12 * var(--u)) calc(10 * var(--u)); box-shadow: 0 0 0 calc(2.5 * var(--u)) var(--ink); border-radius: calc(3 * var(--u)); }
.ct-rhead { position: absolute; left: 50%; bottom: 0; width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin-left: calc(-13 * var(--u)); margin-bottom: calc(-13 * var(--u)); border-radius: 50%; background: var(--skin); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink); }
.ct-rhead::before, .ct-rhead::after { content: ''; position: absolute; top: 34%; width: 15%; height: 24%; border-radius: 50%; background: var(--ink); }
.ct-rhead::before { left: 30%; } .ct-rhead::after { right: 30%; }
.ct-rlvl { position: absolute; left: 50%; bottom: calc(-40 * var(--u)); transform: translateX(-50%) rotate(-4deg); min-width: calc(34 * var(--u)); padding: 0 calc(5 * var(--u)); background: var(--tape); color: var(--ink); font-size: calc(16 * var(--u)); text-align: center; white-space: nowrap; }

/* --- Монеты: билетик --- */
#ct-coins { position: absolute; top: calc(11 * var(--u) + var(--safe-t)); left: calc(12 * var(--u) + env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: calc(5 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(8 * var(--u)); background: var(--sun); color: var(--ink); font-size: calc(22 * var(--u)); transform: rotate(-2deg); -webkit-mask: radial-gradient(circle at 0 50%, transparent calc(6 * var(--u)), #000 calc(6.5 * var(--u))) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent calc(6 * var(--u)), #000 calc(6.5 * var(--u))) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent calc(6 * var(--u)), #000 calc(6.5 * var(--u))) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent calc(6 * var(--u)), #000 calc(6.5 * var(--u))) right / 51% 100% no-repeat; }
#ct-coins img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin-left: calc(4 * var(--u)); }
.ct-coinb { animation: ct-bump .24s ease-out; }
@keyframes ct-bump { 45% { scale: 1.16; } }

/* --- Значки-пины --- */
.ct-pin { position: relative; width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0 8%, transparent 26%), var(--card); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), inset 0 0 0 calc(4 * var(--u)) var(--pinc, var(--coral)), calc(4 * var(--u)) calc(5 * var(--u)) 0 rgba(27, 33, 80, .32); display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.ct-pin:active { transform: translate(calc(2 * var(--u)), calc(3 * var(--u))); }
.ct-pin img { width: 62%; height: 62%; object-fit: contain; }
.ct-pin b { position: absolute; left: 50%; bottom: calc(-13 * var(--u)); transform: translateX(-50%) rotate(-2deg); padding: 0 calc(5 * var(--u)); background: var(--tape); font-size: calc(12 * var(--u)); line-height: 1.25; white-space: nowrap; }
.ct-pin em { position: absolute; top: calc(-4 * var(--u)); right: calc(-4 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--coral); color: #fff; box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink); font-style: normal; font-size: calc(14 * var(--u)); display: flex; align-items: center; justify-content: center; animation: ct-wiggle .5s ease-in-out infinite alternate; }
@keyframes ct-wiggle { from { transform: rotate(-12deg) scale(1); } to { transform: rotate(12deg) scale(1.12); } }
#ct-gear, #ct-pausebtn { position: absolute; top: calc(11 * var(--u) + var(--safe-t)); right: calc(12 * var(--u) + env(safe-area-inset-right, 0px)); --pinc: var(--ink); }
#ct-pins { position: absolute; left: calc(14 * var(--u) + env(safe-area-inset-left, 0px)); top: calc(66 * var(--u) + var(--safe-t)); display: flex; flex-direction: column; gap: calc(22 * var(--u)); }
#ct-pins .ct-pin:nth-child(1) { --pinc: var(--mint); }
#ct-pins .ct-pin:nth-child(2) { --pinc: var(--sun); }
#ct-pins .ct-pin:nth-child(3) { --pinc: var(--coral); }

/* --- Маршрут мира в меню: остановки, последняя — корона --- */
#ct-march { position: absolute; top: calc(10 * var(--u) + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); }
#ct-lvltext { font-size: calc(34 * var(--u)); line-height: 1; }
#ct-stages { display: flex; align-items: center; }
.ct-stop { position: relative; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--card); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink); }
.ct-stop.done { background: var(--mint); }
.ct-stop.now { background: var(--coral); animation: ct-wiggle .6s ease-in-out infinite alternate; }
.ct-link { width: calc(26 * var(--u)); height: 0; border-top: calc(4 * var(--u)) dashed var(--ink); opacity: .85; }
.ct-link.done { border-top-style: solid; border-top-color: var(--mint); opacity: 1; }
.ct-stop.boss { width: calc(44 * var(--u)); height: calc(44 * var(--u)); background: var(--coral); display: flex; align-items: center; justify-content: center; overflow: visible; }
.ct-stop.boss img { width: 118%; height: 118%; object-fit: contain; transform: translateY(-10%); }

/* --- Плакаты меню: поднимаются снизу, качаются в такт --- */
#ct-signs { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; gap: calc(16 * var(--u)); width: max-content; max-width: 100%; }
.ct-sign { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; animation: ct-sway 1.5s ease-in-out infinite alternate; flex: none; }
.ct-sign:nth-child(2) { animation-delay: -.5s; } .ct-sign:nth-child(3) { animation-delay: -1s; } .ct-sign:nth-child(4) { animation-delay: -.25s; }
@keyframes ct-sway { from { transform: rotate(-2.2deg) translateY(0); } to { transform: rotate(2.2deg) translateY(calc(-4 * var(--u))); } }
.ct-board { position: relative; width: calc(142 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(9 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.ct-board::before { content: ''; position: absolute; top: calc(-7 * var(--u)); left: 50%; width: calc(46 * var(--u)); height: calc(14 * var(--u)); margin-left: calc(-23 * var(--u)); background: var(--tape); transform: rotate(-3deg); }
.ct-btitle { font-size: calc(21 * var(--u)); line-height: 1; }
.ct-bart { position: relative; width: 100%; height: calc(64 * var(--u)); margin: calc(3 * var(--u)) 0; display: flex; align-items: center; justify-content: center; }
.ct-bart img { height: 112%; object-fit: contain; }
.ct-bval { position: absolute; left: 0; top: 0; padding: 0 calc(5 * var(--u)); background: var(--ink); color: #fff; font-size: calc(14 * var(--u)); transform: rotate(-5deg); line-height: 1.25; }
.ct-blv { position: absolute; right: 0; top: 0; font-size: calc(12 * var(--u)); color: var(--ink); opacity: .75; }
.ct-bprice { display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u)); width: 100%; height: calc(30 * var(--u)); background: var(--ink); color: var(--sun); font-size: calc(19 * var(--u)); border-radius: calc(5 * var(--u)); }
.ct-bprice img { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ct-sign.poor .ct-bprice { color: #9aa0c0; }
.ct-sign.poor .ct-bprice img { filter: grayscale(.8); }
.ct-stick { position: relative; width: calc(14 * var(--u)); height: calc(50 * var(--u)); background: linear-gradient(90deg, var(--stick), var(--stick2)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink); z-index: -1; }
.ct-stick::before, .ct-stick::after { content: ''; position: absolute; top: calc(10 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: var(--skin); box-shadow: 0 0 0 calc(2.5 * var(--u)) var(--ink); }
.ct-stick::before { left: calc(-11 * var(--u)); } .ct-stick::after { right: calc(-11 * var(--u)); top: calc(24 * var(--u)); }
.ct-sign:active .ct-board { filter: brightness(.96); }
.ct-sign.play .ct-board { width: calc(190 * var(--u)); padding: calc(20 * var(--u)) calc(10 * var(--u)); background: repeating-linear-gradient(2deg, rgba(120, 30, 10, .08) 0 2px, transparent 2px 6px), var(--coral); }
.ct-sign.play .ct-board::after { content: ''; position: absolute; inset: calc(6 * var(--u)); border: calc(3 * var(--u)) dashed rgba(255, 255, 255, .7); border-radius: calc(8 * var(--u)); pointer-events: none; }
.ct-playt { font-size: calc(42 * var(--u)); line-height: 1; color: #fff; text-transform: uppercase; text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--ink); }
.ct-sign.play .ct-stick { height: calc(70 * var(--u)); }
.ct-shake { animation: ct-shake .3s ease-in-out !important; }
@keyframes ct-shake { 25% { transform: translateX(-6px) rotate(-3deg); } 50% { transform: translateX(6px) rotate(3deg); } 75% { transform: translateX(-3px); } }
.ct-pop-in { animation: ct-popin .34s cubic-bezier(.2, 1.7, .4, 1) !important; }
@keyframes ct-popin { from { transform: scale(.8) rotate(-3deg); } to { transform: scale(1); } }

/* --- Босс --- */
#ct-bosshp { position: absolute; top: calc(12 * var(--u) + var(--safe-t)); left: 50%; transform: translateX(-50%) rotate(-.6deg); width: min(60vw, calc(440 * var(--u))); padding: calc(5 * var(--u)) calc(10 * var(--u)) calc(5 * var(--u)) calc(44 * var(--u)); }
#ct-bosshp img { position: absolute; left: calc(-4 * var(--u)); top: 50%; transform: translateY(-50%); width: calc(50 * var(--u)); height: calc(50 * var(--u)); object-fit: contain; }
#ct-bosshp .ct-bar { height: calc(16 * var(--u)); background: var(--ink); border-radius: 99px; overflow: hidden; }
.ct-bfill { height: 100%; width: 100%; background: repeating-linear-gradient(-45deg, var(--coral) 0 8px, var(--coral2) 8px 16px); transition: width .1s linear; }
/* Множитель лестницы: красный штамп */
#ct-multchip { position: absolute; top: calc(14 * var(--u) + var(--safe-t)); left: 50%; transform: translateX(-50%) rotate(-7deg); padding: calc(1 * var(--u)) calc(14 * var(--u)); font-size: calc(38 * var(--u)); color: var(--coral2); border: calc(4 * var(--u)) solid var(--coral2); border-radius: calc(10 * var(--u)); background: rgba(248, 241, 225, .9); }

/* --- Титан: кнопка-значок, заполняется снизу, на полной шкале — комикс-взрыв --- */
#ct-titan { position: absolute; right: calc(18 * var(--u) + env(safe-area-inset-right, 0px)); bottom: calc(20 * var(--u) + var(--safe-b)); width: calc(90 * var(--u)); height: calc(90 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 calc(3.5 * var(--u)) var(--ink), calc(4 * var(--u)) calc(5 * var(--u)) 0 rgba(27, 33, 80, .32); background: var(--card); overflow: visible; }
#ct-titan .ct-ring { position: absolute; inset: 0; border-radius: 50%; }
#ct-titan img { position: relative; width: 82%; height: 82%; object-fit: contain; transition: filter .2s; }
#ct-titan.ct-low img { filter: grayscale(.85) brightness(.82); }
#ct-titan .ct-tlabel, #ct-titan .ct-tkey { display: none; }
#ct-titan.ct-full { animation: ct-titanpulse .46s ease-in-out infinite alternate; }
#ct-titan.ct-full::before { content: ''; position: absolute; inset: calc(-22 * var(--u)); z-index: -1; background: var(--sun); clip-path: polygon(50% 0, 60% 18%, 79% 6%, 79% 27%, 100% 26%, 88% 44%, 100% 58%, 82% 63%, 86% 85%, 66% 79%, 58% 100%, 45% 82%, 25% 95%, 25% 73%, 3% 73%, 14% 54%, 0 36%, 20% 32%, 18% 11%, 38% 18%); animation: ct-spin 4s linear infinite; }
#ct-titan.ct-full .ct-tlabel { display: block; position: absolute; top: calc(-29 * var(--u)); left: 50%; transform: translateX(-50%) rotate(-5deg); font-size: calc(24 * var(--u)); color: #fff; -webkit-text-stroke: calc(5 * var(--u)) var(--ink); paint-order: stroke fill; white-space: nowrap; text-transform: uppercase; }
#ct-titan.ct-gone { display: none; }
@keyframes ct-titanpulse { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* --- Экранные эффекты --- */
#ct-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
#ct-hurt { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 60, 30, 0) 44%, rgba(255, 60, 30, .58) 100%); }
#ct-speed { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s; background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 255, 255, 0) 0 2.6deg, rgba(255, 255, 255, .17) 3deg 3.3deg, rgba(255, 255, 255, 0) 3.7deg 7deg); -webkit-mask: radial-gradient(ellipse at 50% 46%, transparent 40%, #000 82%); mask: radial-gradient(ellipse at 50% 46%, transparent 40%, #000 82%); animation: ct-speedspin 5s linear infinite; }
#ct-speed.on { opacity: 1; }
@keyframes ct-speedspin { to { transform: rotate(7deg); } }

#ct-menu { position: absolute; inset: 0; }

/* --- Окна: плакат, приколотый скотчем --- */
.ct-modalbg { position: absolute; inset: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center; padding: 10px; animation: ct-fade .18s ease-out; background: rgba(27, 33, 80, .5); }
@keyframes ct-fade { from { opacity: 0; } }
.ct-sheet { position: relative; width: min(92vw, calc(430 * var(--u))); max-height: 94vh; overflow: auto; padding: calc(16 * var(--u)) calc(18 * var(--u)); transform: rotate(-.7deg); animation: ct-popin .28s cubic-bezier(.2, 1.7, .4, 1); }
.ct-sheet h2 { margin: 0 0 calc(10 * var(--u)); text-align: center; font-size: calc(32 * var(--u)); line-height: 1; }
.ct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: calc(9 * var(--u)); font-size: calc(20 * var(--u)); }
.ct-row.col { flex-direction: column; align-items: stretch; gap: 6px; }
.ct-qrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(5 * var(--u)); }
.ct-tog { min-width: calc(74 * var(--u)); height: calc(36 * var(--u)); padding: 0 .4em; border-radius: calc(6 * var(--u)); box-shadow: 0 0 0 calc(2.5 * var(--u)) var(--ink); background: var(--card2); font-size: calc(15 * var(--u)); color: var(--ink); }
.ct-tog.on { background: var(--mint); }
.ct-btns { display: flex; flex-direction: column; gap: calc(9 * var(--u)); margin-top: calc(12 * var(--u)); }
.ct-big { display: flex; align-items: center; justify-content: center; gap: .3em; width: 100%; min-height: calc(50 * var(--u)); padding: 0 .7em; border-radius: calc(8 * var(--u)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), calc(4 * var(--u)) calc(5 * var(--u)) 0 var(--ink); font-size: calc(23 * var(--u)); text-transform: uppercase; transition: transform .08s, box-shadow .08s; }
.ct-big:active { transform: translate(calc(3 * var(--u)), calc(4 * var(--u))); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), calc(1 * var(--u)) calc(1 * var(--u)) 0 var(--ink); }
.ct-big[disabled] { filter: grayscale(.7); opacity: .7; }
.ct-big img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; }
.ct-big.green { background: var(--coral); color: #fff; text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 var(--ink); }
.ct-big.blue { background: var(--sun); color: var(--ink); }

/* Итоги уровня: большой плакат */
.ct-win { position: relative; width: min(92vw, calc(420 * var(--u))); max-height: 96vh; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); transform: rotate(-1.2deg); animation: ct-drop .42s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes ct-drop { from { transform: translateY(-70vh) rotate(6deg); } }
.ct-win::before, .ct-win::after { content: ''; position: absolute; top: calc(-9 * var(--u)); width: calc(70 * var(--u)); height: calc(20 * var(--u)); background: var(--tape); }
.ct-win::before { left: calc(-10 * var(--u)); transform: rotate(-24deg); }
.ct-win::after { right: calc(-10 * var(--u)); transform: rotate(22deg); }
.ct-wintitle { font-size: calc(50 * var(--u)); line-height: 1; text-align: center; }
.ct-winrow { display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1; color: var(--ink); }
.ct-winrow img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.ct-stamp { position: absolute; right: calc(8 * var(--u)); top: calc(62 * var(--u)); padding: 0 calc(8 * var(--u)); border: calc(3 * var(--u)) solid var(--coral2); color: var(--coral2); border-radius: calc(7 * var(--u)); font-size: calc(24 * var(--u)); transform: rotate(13deg); animation: ct-stamp .3s .35s both cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ct-stamp { from { transform: rotate(13deg) scale(2.4); opacity: 0; } }
.ct-winsub { font-size: calc(17 * var(--u)); text-align: center; color: var(--ink); line-height: 1.15; }
.ct-winsub.bonus { color: var(--coral2); }
.ct-adbtn { margin-top: calc(6 * var(--u)); }
.ct-win.lose { transform: rotate(1.4deg); }
.ct-win.lose .ct-wintitle { color: var(--coral2); text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 var(--ink); }

/* Низкие экраны */
@media (max-height: 430px) {
    #ct-lvltext { font-size: calc(26 * var(--u)); }
    .ct-stop.boss { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
    .ct-bart { height: calc(46 * var(--u)); }
    .ct-stick { height: calc(16 * var(--u)); }
    .ct-sign.play .ct-stick { height: calc(24 * var(--u)); }
    .ct-sign.play .ct-board { padding: calc(14 * var(--u)) calc(8 * var(--u)); }
    #ct-pins { gap: calc(16 * var(--u)); top: calc(54 * var(--u) + var(--safe-t)); }
    #ct-pins .ct-pin { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
    #ct-signs { gap: calc(9 * var(--u)); }
    .ct-board { width: calc(128 * var(--u)); }
    .ct-sign.play .ct-board { width: calc(168 * var(--u)); }
    .ct-wintitle { font-size: calc(32 * var(--u)); }
    .ct-winrow { font-size: calc(26 * var(--u)); }
    .ct-winrow img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
    .ct-win { padding: calc(10 * var(--u)) calc(14 * var(--u)); gap: calc(5 * var(--u)); }
    .ct-big { min-height: calc(40 * var(--u)); font-size: calc(18 * var(--u)); }
    #ct-route { top: calc(58 * var(--u)); }
}
/* Узкие экраны: кнопка «Играть» рядом над карточками */
@media (max-aspect-ratio: 1/1) {
    #ct-signs { width: 100%; flex-wrap: wrap; gap: calc(6 * var(--u)) 1.5vw; padding: 0 1vw; }
    .ct-sign.play { order: -1; flex-basis: 100%; }
    .ct-sign.play .ct-board { width: min(60vw, calc(220 * var(--u))); padding: calc(13 * var(--u)) calc(10 * var(--u)); }
    .ct-sign.play .ct-stick { height: calc(14 * var(--u)); }
    .ct-board { width: min(31vw, calc(124 * var(--u))); padding: calc(7 * var(--u)) calc(5 * var(--u)) calc(7 * var(--u)); }
    .ct-btitle { font-size: calc(17 * var(--u)); }
    .ct-stick { height: calc(24 * var(--u)); }
    #ct-titan { right: 50%; margin-right: calc(-45 * var(--u)); bottom: calc(24 * var(--u) + var(--safe-b)); }
}

/* Рекорды */
.ct-recs { display: flex; flex-direction: column; gap: calc(4 * var(--u)); max-height: 56vh; overflow: auto; touch-action: pan-y; pointer-events: auto; }
.ct-rec { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)); font-size: calc(17 * var(--u)); background: var(--card2); border-radius: calc(5 * var(--u)); }
.ct-rec.me { background: var(--sun); }
.ct-rec i { width: calc(24 * var(--u)); font-style: normal; text-align: center; }
.ct-rec img, .ct-rec u { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: var(--skin); flex: none; object-fit: cover; }
.ct-rec span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }