/* Crowd Masters — интерфейс «Военный совет»: геральдика. Щиты с золотой каймой, ленты-вымпелы, пергамент в рамке из тёмного
   дерева, червлёные и лазурные эмали. Шрифт — Montserrat Black (SIL OFL) прописными с разрядкой, как надписи на знамёнах.
   Раскладка: планка «Вы — Соперник» и дорожка-флажки сверху, монеты и медальоны — по краям, совет внизу меню. */
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat.ttf') format('truetype'); font-weight: 600 900; font-display: swap; }

:root {
    --parch: #f0e0b8; --parch2: #e2c98f; --parch3: #cfae6c;
    --wood: #4a2c17; --wood2: #6b4426; --wood3: #2e1a0d;
    --gold: #f2c94a; --gold2: #b8861a; --gold3: #fff0a8;
    --gules: #b8232f; --gules2: #7c1220; --azure: #2b5fc4; --azure2: #1a3a86; --vert: #2f8f4a; --purple: #7a3fa8;
    --ink: #2a1608; --ink2: #5a3a1c;
    --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: #f0e0b8; --tut-fg: #2a1608; --tut-accent: #b8232f; --tut-border: #4a2c17; --tut-font: Montserrat, system-ui, sans-serif;
    --letter: .045em;
    /* имена токенов, на которые опираются окна магазина, колеса и подарка */
    --card: #f4e6bf; --card2: #e8d3a0; --coral: #b8232f; --coral2: #7c1220; --sun: #f2c94a; --sun2: #b8861a; --mint: #3f9a56;
    --stick: #7a5230; --stick2: #4a2c17; --tape: transparent; --skin: #2b5fc4;
}
#ct-ui { position: fixed; inset: 0; pointer-events: none; font-family: Montserrat, system-ui, sans-serif; font-weight: 900; color: var(--ink); z-index: 10; -webkit-tap-highlight-color: transparent; overflow: hidden; letter-spacing: var(--letter); }
#ct-ui * { box-sizing: border-box; }
:where(#ct-ui) button { font: inherit; letter-spacing: 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; }

/* Общие детали: пергамент и дерево */
.cm-wood { background: repeating-linear-gradient(92deg, rgba(0, 0, 0, .08) 0 3px, transparent 3px 11px), linear-gradient(var(--wood2), var(--wood)); border: calc(3 * var(--u)) solid var(--wood3); box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 220, 160, .25), 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .35); }
.cm-gilt { color: var(--gold3); text-shadow: 0 calc(2 * var(--u)) 0 var(--wood3), 0 0 calc(1 * var(--u)) var(--wood3), calc(1.5 * var(--u)) calc(2 * var(--u)) 0 var(--wood3); text-transform: uppercase; }

/* Общие классы окон (магазин, колесо, подарок): свиток, золотая надпись, круглый медальон */
.ct-cardboard { background: radial-gradient(ellipse at 50% 15%, rgba(255, 250, 220, .6), transparent 70%), linear-gradient(var(--parch), var(--parch2)); border: calc(7 * var(--u)) solid var(--wood); border-radius: calc(8 * var(--u)); box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--gold2), 0 calc(8 * var(--u)) 0 rgba(0, 0, 0, .35); }
.ct-print { color: var(--gold3); text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .6); text-transform: uppercase; }
.ct-pin { position: relative; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(var(--wood2), var(--wood)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--gold), 0 0 0 calc(6 * var(--u)) var(--wood3), 0 calc(6 * var(--u)) 0 calc(3 * var(--u)) rgba(0, 0, 0, .35); transition: transform .1s; }
.ct-pin:active { transform: translateY(calc(3 * var(--u))); }
.ct-pin img { width: 60%; height: 60%; object-fit: contain; }

/* --- Таблички над армиями: вымпел с ласточкиным хвостом на древке --- */
#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%; filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(30, 16, 6, .4)); }
.ct-tag span { display: block; min-width: clamp(34px, calc(46 * var(--u)), 62px); padding: calc(3 * var(--u)) clamp(8px, calc(11 * var(--u)), 15px) calc(10 * var(--u)); text-align: center; font-size: clamp(15px, calc(21 * var(--u)), 28px); line-height: 1.15; transform-origin: 50% 100%; will-change: transform; color: var(--gold3); text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .55);
    background: linear-gradient(var(--azure), var(--azure2)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6 * var(--u)), 0 100%); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--gold); }
.ct-tag::after { content: ''; display: block; width: calc(4 * var(--u)); height: calc(15 * var(--u)); background: linear-gradient(90deg, var(--wood2), var(--wood3)); margin-top: calc(-3 * var(--u)); }
.ct-tag.bad span { background: linear-gradient(var(--gules), var(--gules2)); }
.ct-tag-rival span { background: linear-gradient(#d8323c, var(--gules2)); }
.ct-tag-enemy span { background: linear-gradient(#5a5868, #34323f); color: #fff; box-shadow: inset 0 0 0 calc(2 * var(--u)) #9a98a8; }

.ct-pop { position: absolute; left: 0; top: 0; font-size: calc(38 * var(--u)); white-space: nowrap; will-change: transform, opacity; color: var(--gold3); -webkit-text-stroke: calc(6 * var(--u)) var(--wood3); paint-order: stroke fill; text-transform: uppercase; }
.ct-pop.good { color: #e8ffd0; }
.ct-pop.bad { color: #ff8c7a; font-size: calc(44 * var(--u)); }
.ct-pop.mult { color: var(--gold); font-size: calc(50 * var(--u)); }
.ct-pop.rival { color: #ff9a9a; }

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

/* --- Верх забега: щиты счёта и дорожка с флажками --- */
#cm-top { position: absolute; left: 50%; top: calc(8 * var(--u) + var(--safe-t)); transform: translateX(-50%); width: min(94vw, calc(520 * var(--u))); display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
#cm-vs { display: flex; align-items: flex-start; justify-content: center; gap: calc(10 * var(--u)); transition: opacity .3s, transform .3s; }
#cm-vs.gone { opacity: 0; transform: translateY(-20px); }
.cm-crest { position: relative; width: calc(92 * var(--u)); height: calc(70 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(var(--gold), var(--gold2)); clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .4)); }
.cm-crest::before { content: ''; position: absolute; inset: calc(4 * var(--u)); clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); background: linear-gradient(var(--azure), var(--azure2)); }
.cm-crest.foe::before { background: linear-gradient(#d8323c, var(--gules2)); }
.cm-crest b { position: relative; margin-top: calc(-6 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1; color: #fff; text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .55); }
.cm-crest i { position: relative; margin-top: calc(1 * var(--u)); font-style: normal; font-size: calc(9 * var(--u)); line-height: 1; color: var(--gold3); }
.cm-crest.down { filter: grayscale(1) brightness(.7) drop-shadow(0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .4)); }
.cm-vsmark { align-self: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-top: calc(-6 * var(--u)); }
.cm-vsmark span { font-size: calc(20 * var(--u)); color: var(--gold3); text-shadow: 0 calc(2 * var(--u)) 0 var(--wood3), 0 0 calc(3 * var(--u)) var(--wood3); -webkit-text-stroke: calc(3 * var(--u)) var(--wood3); paint-order: stroke fill; }
#cm-road { position: relative; width: 100%; height: calc(26 * var(--u)); margin-top: calc(-2 * var(--u)); transition: opacity .3s; }
#cm-road .cm-track { position: absolute; left: calc(10 * var(--u)); right: calc(14 * var(--u)); top: calc(9 * var(--u)); height: calc(10 * var(--u)); border-radius: 99px; background: var(--parch2); box-shadow: 0 0 0 calc(3 * var(--u)) var(--wood3), 0 calc(3 * var(--u)) 0 calc(3 * var(--u)) rgba(0, 0, 0, .3); overflow: hidden; }
.cm-fill { height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--azure) 0 7px, var(--azure2) 7px 14px); }
.cm-pin { position: absolute; top: calc(-2 * var(--u)); width: calc(20 * var(--u)); height: calc(24 * var(--u)); margin-left: calc(-10 * var(--u) + 10 * var(--u)); transform: translateX(-50%); background: var(--gold); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); transition: left .12s linear; }
.cm-pin::before { content: ''; position: absolute; inset: calc(2.5 * var(--u)); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); background: var(--azure); }
.cm-pin.foe::before { background: #d8323c; }
.cm-pin.you { z-index: 2; }
.cm-goal { position: absolute; right: calc(-8 * var(--u)); top: calc(-8 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.cm-goal img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .4)); }
#ct-hud.boss #cm-top { display: none; }

/* --- Медальоны: круглые деревянные кнопки в золотом ободе --- */
.cm-medal { position: relative; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 34% 28%, rgba(255, 230, 170, .55) 0 10%, transparent 30%), linear-gradient(var(--wood2), var(--wood)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--gold), 0 0 0 calc(6 * var(--u)) var(--wood3), 0 calc(7 * var(--u)) 0 calc(3 * var(--u)) rgba(0, 0, 0, .35); transition: transform .1s; }
.cm-medal:active { transform: translateY(calc(3 * var(--u))); }
.cm-medal img { width: 62%; height: 62%; object-fit: contain; }
.cm-medal b { position: absolute; left: 50%; bottom: calc(-17 * var(--u)); transform: translateX(-50%); padding: 0 calc(7 * var(--u)); background: var(--parch); color: var(--ink); font-size: calc(10 * var(--u)); line-height: 1.5; white-space: nowrap; text-transform: uppercase; box-shadow: 0 0 0 calc(2 * var(--u)) var(--wood3); border-radius: calc(2 * var(--u)); }
.cm-medal em { position: absolute; top: calc(-6 * var(--u)); right: calc(-6 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--gules); color: #fff; box-shadow: 0 0 0 calc(2 * var(--u)) var(--gold); 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(14 * var(--u) + var(--safe-t)); right: calc(16 * var(--u) + env(safe-area-inset-right, 0px)); }

/* --- Монеты: деревянная доска с золотой монетой. В меню — слева сверху, в забеге — слева внизу --- */
#ct-coins { position: absolute; top: calc(14 * var(--u) + var(--safe-t)); left: calc(14 * var(--u) + env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(10 * var(--u)); color: var(--gold3); font-size: calc(22 * var(--u)); background: linear-gradient(var(--wood2), var(--wood)); border-radius: calc(8 * var(--u)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--gold2), 0 0 0 calc(6 * var(--u)) var(--wood3), 0 calc(7 * var(--u)) 0 calc(3 * var(--u)) rgba(0, 0, 0, .3); text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .6); }
#ct-coins.run { top: auto; bottom: calc(18 * var(--u) + var(--safe-b)); }
#ct-coins img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-left: calc(2 * var(--u)); }
.ct-coinb { animation: ct-bump .24s ease-out; }
@keyframes ct-bump { 45% { scale: 1.16; } }

/* --- Ворота замка и лорд: свиток с полоской прочности --- */
#cm-bosshp { position: absolute; top: calc(10 * var(--u) + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(70vw, calc(470 * var(--u))); display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); }
.cm-bossname { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(3 * var(--u)) calc(26 * var(--u)); font-size: calc(17 * var(--u)); color: var(--gold3); text-transform: uppercase; background: linear-gradient(var(--gules), var(--gules2)); clip-path: polygon(0 0, 100% 0, calc(100% - 14 * var(--u)) 50%, 100% 100%, 0 100%, calc(14 * var(--u)) 50%); text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .55); filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .3)); }
.cm-bossname img { width: calc(26 * var(--u)); height: calc(26 * var(--u)); object-fit: contain; margin: calc(-4 * var(--u)) 0; }
#cm-bosshp .cm-bar { position: relative; width: 100%; height: calc(24 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--wood3); box-shadow: 0 0 0 calc(3 * var(--u)) var(--gold2), 0 0 0 calc(6 * var(--u)) var(--wood3); overflow: hidden; }
.cm-bfill { height: 100%; width: 100%; background: repeating-linear-gradient(-45deg, #d8323c 0 9px, var(--gules) 9px 18px); transition: width .1s linear; }
#cm-bosshp.lord .cm-bfill { background: repeating-linear-gradient(-45deg, #e8a020 0 9px, #b8741a 9px 18px); }
#cm-bosshp .cm-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: calc(14 * var(--u)); color: #fff; text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .7); }

/* Множитель лестницы: восковая печать */
#cm-seal { position: absolute; top: calc(12 * var(--u) + var(--safe-t)); left: 50%; transform: translateX(-50%); width: calc(100 * var(--u)); height: calc(100 * var(--u)); display: flex; align-items: center; justify-content: center; font-size: calc(30 * var(--u)); color: var(--gold3); text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .6);
    background: radial-gradient(circle at 36% 30%, #e24a52, var(--gules) 45%, var(--gules2)); border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; box-shadow: inset 0 0 0 calc(5 * var(--u)) rgba(255, 220, 160, .25), 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, .35); }
/* Лента посреди экрана: «Битва мастеров» */
#cm-banner { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); padding: calc(8 * var(--u)) calc(52 * var(--u)); font-size: calc(32 * var(--u)); text-transform: uppercase; white-space: nowrap; color: var(--gold3); text-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .6); background: linear-gradient(var(--gules), var(--gules2)); clip-path: polygon(0 0, 100% 0, calc(100% - 22 * var(--u)) 50%, 100% 100%, 0 100%, calc(22 * var(--u)) 50%); animation: cm-banner 2.4s ease-out both; filter: drop-shadow(0 calc(5 * var(--u)) 0 rgba(0, 0, 0, .35)); }
@keyframes cm-banner { 0% { transform: translateX(-50%) scale(.3); opacity: 0; } 12% { transform: translateX(-50%) scale(1.12); opacity: 1; } 22% { transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* --- Экранные эффекты --- */
#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(200, 30, 30, 0) 44%, rgba(200, 30, 30, .58) 100%); }
#ct-speed { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

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

/* --- Меню: вымпелы пути мира сверху по центру --- */
#cm-level { position: absolute; top: calc(8 * var(--u) + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
.cm-ribbon { padding: calc(5 * var(--u)) calc(40 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.1; text-transform: uppercase; white-space: nowrap; color: var(--gold3); text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .6); background: linear-gradient(var(--gules), var(--gules2)); clip-path: polygon(0 0, 100% 0, calc(100% - 18 * var(--u)) 50%, 100% 100%, 0 100%, calc(18 * var(--u)) 50%); filter: drop-shadow(0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .35)); }
#ct-stages { display: flex; align-items: flex-start; gap: calc(7 * var(--u)); }
.cm-flag { position: relative; width: calc(22 * var(--u)); height: calc(32 * var(--u)); background: var(--parch3); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8 * var(--u)), 0 100%); box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--wood3); }
.cm-flag.done { background: var(--vert); }
.cm-flag.now { background: var(--gold); animation: ct-wiggle .6s ease-in-out infinite alternate; transform-origin: 50% 0; }
.cm-flag.castle { width: calc(40 * var(--u)); height: calc(40 * var(--u)); background: var(--gules); display: flex; align-items: center; justify-content: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9 * var(--u)), 0 100%); }
.cm-flag.castle img { width: 82%; height: 82%; object-fit: contain; margin-top: calc(-4 * var(--u)); }
.cm-flag.castle.now { background: #e8b020; }

/* Медальоны справа по центру высоты */
#ct-pins { position: absolute; right: calc(16 * var(--u) + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-62%); display: flex; flex-direction: column; gap: calc(30 * var(--u)); }
#ct-pins .cm-medal { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }

/* --- Совет внизу меню: пергамент в раме из дерева, три щита-прокачки и «В бой» --- */
#ct-signs { position: absolute; left: 0; right: 0; bottom: calc(10 * var(--u) + var(--safe-b)); display: flex; justify-content: center; padding: 0 calc(8 * var(--u)); }
.cm-council { position: relative; display: flex; align-items: stretch; gap: calc(14 * var(--u)); padding: calc(22 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); max-width: 100%;
    background: radial-gradient(ellipse at 50% 20%, rgba(255, 250, 220, .6), transparent 70%), repeating-linear-gradient(0deg, rgba(120, 80, 30, .06) 0 2px, transparent 2px 7px), linear-gradient(var(--parch), var(--parch2));
    border-radius: calc(6 * var(--u)); border: calc(7 * var(--u)) solid var(--wood); box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--gold2), inset 0 0 calc(24 * var(--u)) rgba(120, 70, 20, .35), 0 calc(8 * var(--u)) 0 calc(0 * var(--u)) rgba(0, 0, 0, .4); pointer-events: auto; }
.cm-council::before { content: ''; position: absolute; left: calc(-14 * var(--u)); right: calc(-14 * var(--u)); top: calc(-12 * var(--u)); height: calc(14 * var(--u)); border-radius: 99px; background: linear-gradient(var(--wood2), var(--wood3)); box-shadow: 0 0 0 calc(2 * var(--u)) var(--gold2); }
.cm-ups { display: flex; gap: calc(12 * var(--u)); }
.cm-up { position: relative; width: calc(118 * var(--u)); display: flex; flex-direction: column; align-items: center; padding-top: calc(4 * var(--u)); animation: cm-sway 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); transform-origin: 50% 0; }
@keyframes cm-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.cm-shield { position: relative; width: calc(84 * var(--u)); height: calc(98 * var(--u)); filter: drop-shadow(0 calc(4 * var(--u)) 0 rgba(30, 16, 6, .45)); }
.cm-shield::before, .cm-shield-in { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 56%, 50% 100%, 0 56%); background: linear-gradient(var(--gold), var(--gold2)); }
.cm-shield-in { inset: calc(4 * var(--u)); background: linear-gradient(var(--azure), var(--azure2)); display: flex; justify-content: center; padding-top: calc(12 * var(--u)); }
.cm-up[data-up="treasury"] .cm-shield-in { background: linear-gradient(#3aa95c, #1e6a36); }
.cm-up[data-up="banner"] .cm-shield-in { background: linear-gradient(#9a55c8, #5a2a82); }
.cm-shield-in img { width: calc(52 * var(--u)); height: calc(52 * var(--u)); object-fit: contain; }
.cm-lv { position: absolute; left: 50%; top: calc(-9 * var(--u)); transform: translateX(-50%); padding: 0 calc(8 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.6; color: var(--ink); background: var(--gold3); border-radius: calc(3 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) var(--wood3); white-space: nowrap; z-index: 2; }
.cm-uptitle { margin-top: calc(6 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.1; text-transform: uppercase; color: var(--ink); text-align: center; }
.cm-upval { margin-top: calc(2 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.1; color: var(--gules2); text-align: center; }
.cm-upval small { display: block; font-size: calc(10 * var(--u)); color: var(--ink2); opacity: .9; letter-spacing: 0; }
.cm-upnote { font-size: calc(8.5 * var(--u)); line-height: 1.15; color: var(--ink2); text-transform: uppercase; text-align: center; opacity: .85; margin-top: calc(1 * var(--u)); letter-spacing: .02em; }
.cm-price { display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u)); width: 100%; height: calc(30 * var(--u)); margin-top: calc(5 * var(--u)); color: var(--gold3); font-size: calc(18 * var(--u)); background: linear-gradient(var(--wood2), var(--wood)); border-radius: calc(6 * var(--u)); box-shadow: 0 0 0 calc(2.5 * var(--u)) var(--wood3), inset 0 calc(2 * var(--u)) 0 rgba(255, 220, 160, .2); }
.cm-price img { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.cm-up.poor .cm-price { color: #b9a07a; }
.cm-up.poor .cm-price img { filter: grayscale(.8); }
.cm-up.max .cm-price { color: var(--gold3); background: linear-gradient(#5a8a3a, #35601f); }
.cm-up.hint .cm-shield { animation: cm-pulse .7s ease-in-out infinite alternate; }
@keyframes cm-pulse { from { transform: scale(1); } to { transform: scale(1.1); } }
.cm-up:active .cm-shield { transform: translateY(calc(3 * var(--u))); }

/* «В бой»: червлёная лента с золотым кантом */
.cm-play { position: relative; align-self: center; width: calc(190 * var(--u)); height: calc(112 * var(--u)); filter: drop-shadow(0 calc(6 * var(--u)) 0 rgba(30, 16, 6, .5)); transition: transform .1s; animation: cm-breathe 1.3s ease-in-out infinite alternate; }
.cm-play:active { transform: translateY(calc(4 * var(--u))); }
.cm-play::before { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--gold3), var(--gold2)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, calc(14 * var(--u)) 50%); }
.cm-play-in { position: absolute; inset: calc(5 * var(--u)); display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #e8434c, var(--gules) 60%, var(--gules2)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, calc(12 * var(--u)) 50%); }
.cm-play-in b { font-size: calc(36 * var(--u)); line-height: 1; text-transform: uppercase; color: var(--gold3); text-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .55); }
@keyframes cm-breathe { from { scale: 1; } to { scale: 1.045; } }

.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-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(30, 16, 6, .62); }
@keyframes ct-fade { from { opacity: 0; } }
.cm-scroll { position: relative; background: radial-gradient(ellipse at 50% 15%, rgba(255, 250, 220, .6), transparent 70%), repeating-linear-gradient(0deg, rgba(120, 80, 30, .06) 0 2px, transparent 2px 7px), linear-gradient(var(--parch), var(--parch2)); border: calc(7 * var(--u)) solid var(--wood); border-radius: calc(8 * var(--u)); box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--gold2), inset 0 0 calc(30 * var(--u)) rgba(120, 70, 20, .35), 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, .35); }
.cm-scroll::before, .cm-scroll::after { content: ''; position: absolute; left: calc(-16 * var(--u)); right: calc(-16 * var(--u)); height: calc(15 * var(--u)); border-radius: 99px; background: linear-gradient(var(--wood2), var(--wood3)); box-shadow: 0 0 0 calc(2 * var(--u)) var(--gold2); }
.cm-scroll::before { top: calc(-13 * var(--u)); } .cm-scroll::after { bottom: calc(-13 * var(--u)); }
.cm-title { margin: 0 0 calc(10 * var(--u)); display: flex; justify-content: center; }
.cm-title span { padding: calc(5 * var(--u)) calc(34 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.1; text-transform: uppercase; color: var(--gold3); text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .6); background: linear-gradient(var(--gules), var(--gules2)); clip-path: polygon(0 0, 100% 0, calc(100% - 16 * var(--u)) 50%, 100% 100%, 0 100%, calc(16 * var(--u)) 50%); }
.cm-title.big span { font-size: calc(34 * var(--u)); padding: calc(7 * var(--u)) calc(44 * var(--u)); text-align: center; }
.cm-title.bad span { background: linear-gradient(#4a4858, #2a2833); }
.ct-sheet { position: relative; width: min(92vw, calc(430 * var(--u))); max-height: 92vh; overflow: auto; padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); animation: ct-popin .28s cubic-bezier(.2, 1.7, .4, 1); }
.ct-sheet h2 { margin: 0 0 calc(10 * var(--u)); }
.ct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: calc(9 * var(--u)); font-size: calc(18 * var(--u)); text-transform: uppercase; }
.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(--wood3); background: var(--parch3); font-size: calc(13 * var(--u)); color: var(--ink); text-transform: uppercase; }
.ct-tog.on { background: linear-gradient(#e8b020, var(--gold2)); }
.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(--wood3), inset 0 0 0 calc(2 * var(--u)) rgba(255, 240, 170, .65), 0 calc(6 * var(--u)) 0 calc(3 * var(--u)) var(--wood3); font-size: calc(20 * var(--u)); text-transform: uppercase; transition: transform .08s, box-shadow .08s; }
.ct-big:active { transform: translateY(calc(5 * var(--u))); box-shadow: 0 0 0 calc(3 * var(--u)) var(--wood3), inset 0 0 0 calc(2 * var(--u)) rgba(255, 240, 170, .65), 0 calc(1 * var(--u)) 0 calc(3 * var(--u)) var(--wood3); }
.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: linear-gradient(#d8323c, var(--gules2)); color: var(--gold3); text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .55); }
.ct-big.blue { background: linear-gradient(#f4d060, #d29a20); 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)); animation: ct-drop .42s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes ct-drop { from { transform: translateY(-70vh) rotate(4deg); } }
.ct-win .cm-title { margin-bottom: 0; }
.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(64 * var(--u)); padding: 0 calc(8 * var(--u)); border: calc(3 * var(--u)) solid var(--gules); color: var(--gules); 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); background: rgba(240, 224, 184, .8); }
@keyframes ct-stamp { from { transform: rotate(13deg) scale(2.4); opacity: 0; } }
.ct-winsub { font-size: calc(14 * var(--u)); text-align: center; color: var(--ink); line-height: 1.25; text-transform: uppercase; }
.ct-winsub.bonus { color: var(--gules2); }
.ct-adbtn { margin-top: calc(6 * var(--u)); }

/* Низкие экраны */
@media (max-height: 430px) {
    #cm-top { gap: calc(2 * var(--u)); }
    .cm-crest { width: calc(76 * var(--u)); height: calc(56 * var(--u)); }
    .cm-crest b { font-size: calc(20 * var(--u)); }
    .cm-ribbon { font-size: calc(18 * var(--u)); padding: calc(3 * var(--u)) calc(30 * var(--u)); }
    .cm-flag { height: calc(24 * var(--u)); }
    .cm-flag.castle { height: calc(30 * var(--u)); width: calc(30 * var(--u)); }
    .cm-council { padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)); gap: calc(8 * var(--u)); }
    .cm-ups { gap: calc(6 * var(--u)); }
    .cm-up { width: calc(98 * var(--u)); }
    .cm-shield { width: calc(60 * var(--u)); height: calc(70 * var(--u)); }
    .cm-shield-in img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
    .cm-upnote { display: none; }
    .cm-play { width: calc(150 * var(--u)); height: calc(84 * var(--u)); }
    .cm-play-in b { font-size: calc(28 * var(--u)); }
    #ct-pins { gap: calc(22 * var(--u)); }
    #ct-pins .cm-medal { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
    .ct-big { min-height: calc(40 * var(--u)); font-size: calc(16 * var(--u)); }
    .ct-win { padding: calc(10 * var(--u)) calc(14 * var(--u)); gap: calc(5 * var(--u)); }
    .ct-winrow { font-size: calc(26 * var(--u)); }
    .cm-title.big span { font-size: calc(24 * var(--u)); }
}
/* Узкие экраны (портрет): «В бой» над щитами, щиты в ряд */
@media (max-aspect-ratio: 1/1) {
    #ct-signs { bottom: calc(8 * var(--u) + var(--safe-b)); padding: 0 calc(6 * var(--u)); }
    .cm-council { flex-direction: column-reverse; align-items: center; gap: calc(10 * var(--u)); padding: calc(20 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); width: 100%; }
    .cm-ups { gap: calc(6 * var(--u)); width: 100%; justify-content: space-between; }
    .cm-up { width: 32%; }
    .cm-shield { width: calc(70 * var(--u)); height: calc(82 * var(--u)); }
    .cm-shield-in img { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
    .cm-uptitle { font-size: calc(14 * var(--u)); }
    .cm-upnote { display: none; }
    .cm-play { width: min(62vw, calc(230 * var(--u))); height: calc(84 * var(--u)); }
    .cm-play-in b { font-size: calc(30 * var(--u)); }
    #ct-pins { top: calc(86 * var(--u) + var(--safe-t)); right: calc(12 * var(--u)); transform: none; gap: calc(26 * var(--u)); }
    #ct-pins .cm-medal { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
    #cm-top { width: 98vw; }
    .cm-crest { width: calc(78 * var(--u)); height: calc(60 * var(--u)); }
    #ct-coins.run { bottom: calc(14 * 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(15 * var(--u)); background: rgba(120, 80, 30, .16); border-radius: calc(5 * var(--u)); }
.ct-rec.me { background: var(--gold); }
.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(--azure); flex: none; object-fit: cover; }
.ct-rec span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }