/* Crowd Titan — магазин, подарок дня и колесо в стиле «Марш»: картонная доска с приколотыми бумажками, вкладки-ярлыки с дыркой,
   листки на скотче, колесо — раскрашенный картонный круг на палке. Плотные цвета, жёсткие смещённые тени, без глянца.
   Токены и общие классы (.ct-cardboard, .ct-print, .ct-big, .ct-pin, --u) — из game.css. Всё здесь с префиксом ct-shop-. */

#ct-ui.ct-shop-open #ct-menu { visibility: hidden; }
#ct-ui.ct-shop-dim #ct-coins { visibility: hidden; }   /* под затемнением монеты показывает билетик самого окна */

.ct-shop-root { position: absolute; inset: 0; display: none; pointer-events: auto; touch-action: none; --vh: 100vh;
    --fs-s: max(11px, calc(12.5 * var(--u))); --fs-m: max(13px, calc(16 * var(--u))); --fs-l: max(16px, calc(22 * var(--u)));
    --pin: max(38px, calc(48 * var(--u)));
    --hard: calc(3 * var(--u)) calc(4 * var(--u)) 0 rgba(27, 33, 80, .3); --ring: 0 0 0 calc(2.5 * var(--u)) var(--ink); }
@supports (height: 100dvh) { .ct-shop-root { --vh: 100dvh; } }
.ct-shop-root.on { display: block; }
.ct-shop-root.dim { background: rgba(27, 33, 80, .5); animation: ct-fade .18s ease-out; }
.ct-shop-root.out { animation: ct-shop-fadeout .2s ease-in forwards; }
.ct-shop-scene { position: absolute; inset: 0; display: flex; padding: 10px; }
.ct-shop-root button { font-family: inherit; }
.ct-shop-root img, .ct-shop-root svg { pointer-events: none; }
.ct-shop-root [hidden] { display: none !important; }

/* --- Скотч --- */
.ct-shop-tape { position: absolute; width: calc(62 * var(--u)); height: calc(18 * var(--u)); min-width: 34px; background: var(--tape); z-index: 4; pointer-events: none; }
.ct-shop-tape.a { top: calc(-8 * var(--u)); left: calc(-12 * var(--u)); transform: rotate(-26deg); }
.ct-shop-tape.b { top: calc(-8 * var(--u)); right: calc(-12 * var(--u)); transform: rotate(24deg); }
/* на плакатах верхние углы заняты билетиком монет и значком «закрыть»: скотч — внизу */
.ct-shop-poster > .ct-shop-tape { top: auto; bottom: calc(-8 * var(--u)); }
.ct-shop-poster > .ct-shop-tape.a { transform: rotate(24deg); }
.ct-shop-poster > .ct-shop-tape.b { transform: rotate(-26deg); }
/* на доске слева сидит значок «закрыть»: скотч — справа */
.ct-shop-panel > .ct-shop-tape.a { left: auto; right: calc(-12 * var(--u)); transform: rotate(24deg); }
.ct-shop-panel > .ct-shop-tape.b { top: auto; bottom: calc(-8 * var(--u)); right: calc(-12 * var(--u)); transform: rotate(-24deg); }

/* ============================ МАГАЗИН: доска ============================ */
.ct-shop-panel { position: absolute; top: calc(8px + var(--safe-t)); bottom: calc(10px + var(--safe-b)); right: calc(10px + env(safe-area-inset-right, 0px));
    width: clamp(330px, 46vw, calc(600 * var(--u))); container-type: inline-size; display: flex; flex-direction: column; gap: calc(7 * var(--u));
    padding: calc(13 * var(--u)); transform: rotate(.5deg); transform-origin: 100% 50%;
    background: repeating-linear-gradient(2deg, rgba(120, 90, 40, .06) 0 2px, transparent 2px 6px), var(--card2);
    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(7 * var(--u)) calc(8 * var(--u)) 0 rgba(27, 33, 80, .34);
    animation: ct-shop-in-r .45s cubic-bezier(.2, 1.2, .4, 1) both; }
.ct-shop-root.out .ct-shop-panel { animation: ct-shop-out-r .2s ease-in forwards; }
.ct-shop-head { display: flex; justify-content: center; align-items: center; flex: none; }
.ct-shop-title { margin: 0; font-size: max(18px, calc(30 * var(--u))); line-height: 1; }

/* Кнопка «закрыть»: значок, приколотый на угол доски */
.ct-shop-x { position: absolute; z-index: 6; width: var(--pin); height: var(--pin); --pinc: var(--coral); left: calc(var(--pin) / -1.35); top: calc(10 * var(--u)); }
.ct-shop-poster .ct-shop-x { left: auto; right: calc(var(--pin) / -2.6); top: calc(var(--pin) / -2.6); }

/* Вкладки: отрывные ярлыки с дыркой, внизу корешок с числом */
.ct-shop-tabs { display: flex; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)); flex: none; }
.ct-shop-tag { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); padding: max(10px, calc(13 * var(--u))) 2px 0;
    background: var(--card); border-radius: calc(5 * var(--u)) calc(5 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)); box-shadow: var(--ring), calc(2 * var(--u)) calc(3 * var(--u)) 0 rgba(27, 33, 80, .3);
    transform: rotate(var(--rot, 0deg)); transform-origin: 50% 0; transition: transform .14s, background .14s; }
.ct-shop-tag .hole { position: absolute; top: calc(3.5 * var(--u)); left: 50%; width: max(6px, calc(8 * var(--u))); height: max(6px, calc(8 * var(--u))); margin-left: calc(max(6px, calc(8 * var(--u))) / -2); border-radius: 50%; background: var(--card2); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ink); }
.ct-shop-tag img { width: max(22px, calc(32 * var(--u))); height: max(22px, calc(32 * var(--u))); object-fit: contain; }
.ct-shop-tag span { font-size: max(10.5px, calc(12 * var(--u))); line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; }
.ct-shop-tag small { align-self: stretch; margin-top: calc(2 * var(--u)); padding: calc(1.5 * var(--u)) 0 calc(2 * var(--u)); border-top: calc(2 * var(--u)) dashed rgba(27, 33, 80, .5); font-size: max(9.5px, calc(11 * var(--u))); line-height: 1; opacity: .75; }
.ct-shop-tag.on { background: var(--sun); transform: translateY(calc(-3 * var(--u))) rotate(0deg) scale(1.05); z-index: 1; }
.ct-shop-tag.on .hole { background: var(--sun); }
.ct-shop-tag:active { transform: translateY(calc(1 * var(--u))) rotate(var(--rot, 0deg)); }

/* Сетка листков */
.ct-shop-grid { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(max(84px, calc(104 * var(--u))), 1fr)); grid-auto-rows: max-content; align-content: start; gap: calc(14 * var(--u)) calc(11 * var(--u));
    padding: calc(12 * var(--u)) calc(13 * var(--u)) calc(10 * var(--u)); }
.ct-shop-slip { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); min-width: 0; padding: calc(10 * var(--u)) calc(5 * var(--u)) calc(6 * var(--u)); text-align: center; color: var(--ink);
    background: var(--card); border-radius: calc(3 * var(--u)); box-shadow: var(--ring), var(--hard); transform: rotate(var(--rot, 0deg)); transition: transform .12s, box-shadow .12s; }
.ct-shop-grid.fresh .ct-shop-slip { animation: ct-shop-slipin .34s cubic-bezier(.2, 1.5, .4, 1) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
.ct-shop-slip .tape { position: absolute; top: calc(-6.5 * var(--u)); left: 50%; width: 42%; height: calc(11 * var(--u)); margin-left: -21%; background: var(--tape); transform: rotate(-3deg); pointer-events: none; }
.ct-shop-slip:nth-child(even) .tape { transform: rotate(3deg); }
.ct-shop-slip .art { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: max(54px, calc(74 * var(--u))); }
.ct-shop-slip .nm { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(11px, calc(13.5 * var(--u))); line-height: 1.15; }
.ct-shop-slip.sel { transform: rotate(0deg) translateY(calc(-3 * var(--u))) scale(1.04); z-index: 2;
    box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), 0 0 0 calc(7 * var(--u)) var(--coral), 0 0 0 calc(10 * var(--u)) var(--ink), calc(5 * var(--u)) calc(8 * var(--u)) 0 rgba(27, 33, 80, .34); }
@media (hover: hover) { .ct-shop-slip:not(.sel):hover { transform: rotate(0deg) translateY(calc(-2 * var(--u))); } }
.ct-shop-slip:active { transform: translate(calc(1.5 * var(--u)), calc(2 * var(--u))); }

/* Чипы цены и состояния */
.ct-shop-slip .chip { display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u)); width: 100%; min-height: max(19px, calc(23 * var(--u))); padding: 0 calc(4 * var(--u)); border-radius: calc(4 * var(--u));
    background: var(--ink); color: var(--sun); font-size: max(11px, calc(14 * var(--u))); line-height: 1; white-space: nowrap; }
.ct-shop-slip .chip img { width: max(14px, calc(19 * var(--u))); height: max(14px, calc(19 * var(--u))); object-fit: contain; flex: none; }
.ct-shop-slip .chip.poor { color: #9aa0c0; }
.ct-shop-slip .chip.poor img { filter: grayscale(.8); }
.ct-shop-slip .chip.ads { color: #fff; }
.ct-shop-slip .chip.own { background: var(--mint); color: var(--ink); }
.ct-shop-slip .chip.eq { background: var(--coral); color: #fff; }
.ct-shop-slip .chip.ex { background: var(--card2); color: var(--ink); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--ink); font-size: max(10px, calc(12 * var(--u))); }
.ct-shop-slip .chip.ex span { overflow: hidden; text-overflow: ellipsis; }
.chip .bar, .cond .bar { display: flex; gap: calc(1.5 * var(--u)); flex: 1; min-width: calc(22 * var(--u)); height: max(6px, calc(8 * var(--u))); }
.chip .bar i, .cond .bar i { flex: 1; background: #3b4286; border-radius: 1px; }
.cond .bar i { background: var(--card2); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--ink); }
.chip .bar i.on, .cond .bar i.on { background: var(--mint); }

/* Булавка редкости и «надето» */
.ct-shop-slip .rpin { position: absolute; top: calc(-8 * var(--u)); left: calc(-8 * var(--u)); z-index: 3; display: flex; align-items: center; gap: 1px; min-width: max(22px, calc(26 * var(--u))); height: max(20px, calc(24 * var(--u))); padding: 0 calc(5 * var(--u)) 0 calc(3 * var(--u));
    border-radius: 99px; background: var(--rc, var(--card2)); color: var(--rt, var(--ink)); box-shadow: var(--ring); font-size: max(11px, calc(13 * var(--u))); line-height: 1; }
.st { width: max(11px, calc(14 * var(--u))); height: max(11px, calc(14 * var(--u))); flex: none; }
.ct-shop-slip .okpin { position: absolute; top: calc(-8 * var(--u)); right: calc(-8 * var(--u)); z-index: 3; width: max(22px, calc(27 * var(--u))); height: max(22px, calc(27 * var(--u))); border-radius: 50%; background: var(--mint); box-shadow: var(--ring); display: flex; align-items: center; justify-content: center; }
.ct-shop-slip .okpin img { width: 64%; height: 64%; object-fit: contain; }
.ct-shop-slip.just .art { animation: ct-popin .55s cubic-bezier(.2, 1.7, .4, 1); }
.ct-shop-slip.just .okpin { animation: ct-wiggle .35s ease-in-out 4 alternate; }

/* Редкость: рамка, растровое гало и мерцающие искры */
.r-uncommon { --rc: var(--mint); --rt: var(--ink); }
.r-rare { --rc: var(--sun); --rt: var(--ink); }
.r-epic { --rc: var(--coral); --rt: #fff; }
.r-legendary { --rc: var(--ink); --rt: var(--sun); }
.ct-shop-slip.r-rare { outline: calc(2 * var(--u)) dashed var(--sun2); outline-offset: calc(-5 * var(--u)); }
.ct-shop-slip.r-epic { outline: calc(2.5 * var(--u)) dashed var(--coral); outline-offset: calc(-5 * var(--u)); }
.ct-shop-slip.r-legendary { background: repeating-linear-gradient(-45deg, var(--ink) 0 9px, #262e6b 9px 18px); outline: calc(2.5 * var(--u)) solid var(--sun); outline-offset: calc(-4.5 * var(--u)); color: var(--sun); }
.ct-shop-slip.r-legendary .tape { background: var(--sun); }
.ct-shop-slip.r-legendary .chip.coin, .ct-shop-slip.r-legendary .chip.ads { background: var(--sun); color: var(--ink); }
.ct-shop-slip.r-legendary .chip .bar i { background: #c99a1c; }
.ct-shop-slip.r-legendary .chip .bar i.on { background: var(--ink); }
.ct-shop-slip.r-legendary .chip.poor { color: #6d7094; background: #cfd2e8; }
.ct-shop-slip.r-epic .art::before, .ct-shop-slip.r-legendary .art::before { content: ''; position: absolute; inset: 4% 10%; border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, var(--coral) 0 26%, transparent 29%) 0 0 / calc(7 * var(--u)) calc(7 * var(--u)); opacity: .5; }
.ct-shop-slip.r-legendary .art::before { background-image: radial-gradient(circle, var(--sun) 0 26%, transparent 29%); opacity: .7; animation: ct-spin 16s linear infinite; }
.ct-shop-slip .art > * { position: relative; z-index: 1; }
.ct-shop-slip .sp { position: absolute; z-index: 3; width: max(14px, calc(19 * var(--u))); height: max(14px, calc(19 * var(--u))); pointer-events: none; animation: ct-shop-twinkle 1.5s ease-in-out infinite; }
.ct-shop-slip .sp.s1 { top: 14%; right: 4%; }
.ct-shop-slip .sp.s2 { top: 44%; left: 2%; animation-delay: -.5s; }
.ct-shop-slip .sp.s3 { top: 34%; right: 1%; animation-delay: -1s; }

/* Рисунки предметов */
.ct-shop-person { height: 100%; width: auto; filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) 0 rgba(27, 33, 80, .28)); }
.ct-shop-person.pulse { animation: ct-shop-pulse 1.7s ease-in-out infinite alternate; }
.ct-shop-person.hue { animation: ct-shop-rainbow 3.2s linear infinite; }
.ct-shop-trio { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.ct-shop-trio .ct-shop-person { height: 78%; margin: 0 -7%; }
.ct-shop-trio .ct-shop-person.b { height: 100%; z-index: 1; }
.ct-shop-ph { display: block; width: 56%; height: 82%; border-radius: calc(6 * var(--u)); box-shadow: var(--ring); }
.ct-shop-hat { max-width: 92%; max-height: 100%; object-fit: contain; filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) 0 rgba(27, 33, 80, .3)); }
.ct-shop-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(calc(1.5 * var(--u)) calc(2.5 * var(--u)) 0 rgba(27, 33, 80, .25)); }
.ct-shop-none { position: relative; display: block; height: 82%; aspect-ratio: 1; border: calc(3 * var(--u)) dashed rgba(27, 33, 80, .4); border-radius: 50%; }
.ct-shop-none i { position: absolute; left: 12%; right: 12%; top: calc(50% - 1.5 * var(--u)); height: calc(3 * var(--u)); background: rgba(27, 33, 80, .4); transform: rotate(-42deg); }
.ct-shop-titan { position: relative; display: block; height: 100%; aspect-ratio: 1; }
.ct-shop-titan img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) 0 rgba(27, 33, 80, .3)); }
.ct-shop-titan .dots { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, var(--burst) 0 28%, transparent 31%) 0 0 / calc(7 * var(--u)) calc(7 * var(--u)); opacity: .8;
    -webkit-mask: radial-gradient(circle, #000 60%, transparent 61%); mask: radial-gradient(circle, #000 60%, transparent 61%); }
.ct-shop-titan .ring { position: absolute; left: 6%; right: 6%; bottom: 0; height: 24%; border-radius: 50%; border: max(2px, calc(3.5 * var(--u))) solid var(--ring); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ink), inset 0 0 0 calc(1.5 * var(--u)) var(--ink); z-index: 0; }

/* Записка внизу доски: выбранный предмет, условие, кнопки */
.ct-shop-note { position: relative; flex: none; display: grid; grid-template-columns: 1fr; gap: calc(6 * var(--u)) calc(10 * var(--u)); align-items: center; margin-top: calc(4 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u));
    background: var(--card); border-radius: calc(3 * var(--u)); box-shadow: var(--ring), var(--hard); transform: rotate(-.4deg); }
.ct-shop-note .ct-shop-tape.c { top: calc(-9 * var(--u)); left: 18%; width: calc(54 * var(--u)); height: calc(15 * var(--u)); transform: rotate(-3deg); }
.ct-shop-note .meta { min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.ct-shop-note .nm { font-size: max(15px, calc(22 * var(--u))); line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-shop-note .rar, .ct-shop-note .cond { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: var(--fs-s); line-height: 1.15; }
.ct-shop-note .cond { opacity: .85; }
.ct-shop-note .cond img { width: max(16px, calc(20 * var(--u))); height: max(16px, calc(20 * var(--u))); object-fit: contain; }
.ct-shop-note .cond .bar { flex: none; width: calc(64 * var(--u)); min-width: 40px; }
.ct-shop-note .acts { display: flex; gap: calc(7 * var(--u)); }
.ct-shop-note .acts .ct-big { flex: 1 1 0; width: auto; min-width: 0; min-height: max(38px, calc(46 * var(--u))); gap: calc(4 * var(--u)); padding: 0 calc(8 * var(--u)); font-size: max(13px, calc(18 * var(--u))) !important; line-height: 1.05; text-align: center; }
.ct-shop-note .acts .ct-big img { width: max(18px, calc(26 * var(--u))); height: max(18px, calc(26 * var(--u))); }
.ct-shop-note .acts .ct-big.small { flex: 0 0 auto; }
.ct-shop-note .hint { grid-column: 1 / -1; margin: 0; font-size: var(--fs-s); line-height: 1.2; color: var(--coral2); }
.ct-shop-note .hint:empty { display: none; }
.ct-big.off { filter: grayscale(.75); opacity: .85; }
@container (min-width: 420px) {
    .ct-shop-note { grid-template-columns: minmax(0, 1fr) auto; }
    .ct-shop-note .acts .ct-big { min-width: max(104px, calc(128 * var(--u))); }
}

/* Тост: бумажная полоска сверху */
.ct-shop-toast { position: absolute; z-index: 7; left: 50%; top: calc(70 * var(--u)); max-width: 88%; padding: calc(5 * var(--u)) calc(14 * var(--u)); text-align: center; font-size: var(--fs-m); line-height: 1.2; color: #fff; background: var(--coral);
    box-shadow: var(--ring), var(--hard); border-radius: calc(4 * var(--u)); transform: translateX(-50%) rotate(-1.5deg); pointer-events: none; }
.ct-shop-toast[hidden] { display: none; }
.ct-shop-toast.in { animation: ct-shop-toast .32s cubic-bezier(.2, 1.6, .4, 1); }
.ct-shop-poster .ct-shop-toast { top: auto; bottom: calc(10 * var(--u)); }

/* Портрет: доска снизу, толпа сверху */
@media (max-aspect-ratio: 1/1) {
    .ct-shop-panel { top: auto; left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); width: auto; height: clamp(360px, 62 * var(--vh) / 100, 700px); transform: rotate(-.3deg); transform-origin: 50% 100%; animation-name: ct-shop-in-b; }
    .ct-shop-root.out .ct-shop-panel { animation-name: ct-shop-out-b; }
    .ct-shop-x { left: auto; right: calc(14 * var(--u)); top: calc(var(--pin) / -2.2); }
    .ct-shop-panel > .ct-shop-tape.a { right: auto; left: calc(-12 * var(--u)); transform: rotate(-26deg); }
    .ct-shop-panel > .ct-shop-tape.b { top: calc(-8 * var(--u)); bottom: auto; right: auto; left: 38%; transform: rotate(-4deg); }
    .ct-shop-toast { top: calc(68 * var(--u)); }
}
/* Низкий ландшафт: заголовка нет, карточки плотнее */
@media (max-height: 430px) and (min-aspect-ratio: 101/100) {
    .ct-shop-head { display: none; }
    .ct-shop-panel { gap: calc(5 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u)); }
    .ct-shop-x { top: calc(14 * var(--u)); }
    .ct-shop-tag small { display: none; }
    .ct-shop-tag { padding-top: max(10px, calc(13 * var(--u))); padding-bottom: calc(3 * var(--u)); }
    .ct-shop-grid { grid-template-columns: repeat(auto-fill, minmax(max(76px, calc(96 * var(--u))), 1fr)); gap: calc(13 * var(--u)) calc(9 * var(--u)); padding-top: calc(10 * var(--u)); }
    .ct-shop-slip .art { height: max(44px, calc(60 * var(--u))); }
    .ct-shop-slip { gap: calc(2 * var(--u)); padding-top: calc(8 * var(--u)); }
    .ct-shop-note { padding: calc(8 * var(--u)) calc(10 * var(--u)); gap: calc(4 * var(--u)); }
    .ct-shop-note .meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 calc(8 * var(--u)); }
    .ct-shop-note .nm { flex: 1 1 100%; }
}

/* ============================ Плакаты: колесо и подарок ============================ */
.ct-shop-poster { position: relative; margin: auto; display: flex; flex-direction: column; align-items: center; max-height: 100%; padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)); transform: rotate(-.7deg);
    animation: ct-drop .46s cubic-bezier(.2, 1.5, .4, 1) both; }
.ct-shop-root.out .ct-shop-poster { animation: ct-shop-out-t .2s ease-in forwards; }
.ct-shop-poster .ct-shop-coins { position: absolute; z-index: 6; left: max(-10px, calc(-14 * var(--u))); top: max(-14px, calc(-18 * var(--u))); }
.ct-shop-coins { display: flex; align-items: center; gap: calc(5 * var(--u)); height: max(30px, calc(38 * var(--u))); padding: 0 calc(16 * var(--u)) 0 calc(8 * var(--u)); background: var(--sun); color: var(--ink); font-size: max(15px, calc(22 * var(--u))); transform: rotate(-2.5deg);
    -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-shop-coins img { width: max(20px, calc(28 * var(--u))); height: max(20px, calc(28 * var(--u))); margin-left: calc(4 * var(--u)); }
.ct-shop-sub { margin: 0 0 calc(6 * var(--u)); text-align: center; font-size: var(--fs-s); line-height: 1.2; opacity: .8; }
.ct-shop-hint { margin: 0; min-height: 1.2em; text-align: center; font-size: var(--fs-s); line-height: 1.2; color: var(--coral2); }
.ct-shop-hint:empty { min-height: 0; }
.ct-shop-poster .ct-big { font-size: max(14px, calc(20 * var(--u))) !important; min-height: max(40px, calc(48 * var(--u))); line-height: 1.05; text-align: center; }
.ct-shop-poster .ct-big img { width: max(20px, calc(28 * var(--u))); height: max(20px, calc(28 * var(--u))); }

/* --- Колесо --- */
.ct-shop-poster.wheel { --stickh: calc(46 * var(--u)); --wd: clamp(190px, calc(var(--vh) - 70px - var(--stickh)), 470px); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(16 * var(--u)) calc(22 * var(--u)); width: min(96vw, calc(var(--wd) + 330px + 70 * var(--u))); }
.ct-shop-wheelbox { position: relative; width: var(--wd); margin-top: calc(var(--wd) * .07); }
.ct-shop-sway { position: relative; display: flex; flex-direction: column; align-items: center; animation: ct-shop-sway 2.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.ct-shop-pointer { position: absolute; z-index: 5; left: 50%; top: calc(var(--wd) * -.085); width: calc(var(--wd) * .13); margin-left: calc(var(--wd) * -.065); transform-origin: 50% 12%; filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) 0 rgba(27, 33, 80, .35)); transition: transform .08s linear; }
.ct-shop-pointer svg { display: block; width: 100%; height: auto; }
.ct-shop-discwrap { position: relative; z-index: 1; width: var(--wd); height: var(--wd); }
.ct-shop-discwrap::before { content: ''; position: absolute; inset: 1.5%; border-radius: 50%; background: rgba(27, 33, 80, .32); transform: translate(calc(5 * var(--u)), calc(6 * var(--u))); }
.ct-shop-disc { position: relative; width: 100%; height: 100%; border-radius: 50%; will-change: transform; }
.ct-shop-discsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-shop-wstick { position: relative; z-index: 0; width: max(12px, calc(16 * var(--u))); height: var(--stickh); margin-top: calc(-6 * var(--u)); background: linear-gradient(90deg, var(--stick), var(--stick2)); box-shadow: var(--ring); }
.ct-shop-sec { position: absolute; left: 50%; top: 50%; width: calc(var(--wd) * .2); height: calc(var(--wd) * .26); margin: calc(var(--wd) * -.13) 0 0 calc(var(--wd) * -.1);
    transform: rotate(var(--a)) translateY(calc(var(--wd) * -.285)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--wd) * .008); }
.ct-shop-sec .num { font-size: max(12px, calc(var(--wd) * .08)); line-height: 1; color: var(--ink); -webkit-text-stroke: calc(var(--wd) * .017) #fff; paint-order: stroke fill; }
.ct-shop-sec .cn { width: calc(var(--wd) * .09); height: calc(var(--wd) * .09); object-fit: contain; }
.ct-shop-sec .art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ct-shop-sec .ct-shop-trio .ct-shop-person { height: 70%; }
.ct-shop-wside { display: flex; flex-direction: column; align-items: stretch; gap: calc(9 * var(--u)); min-width: 0; }
.ct-shop-wtitle { margin: 0 0 calc(2 * var(--u)); text-align: center; font-size: max(22px, calc(36 * var(--u))); line-height: 1; }
.ct-shop-wside .ct-shop-sub { margin: 0; }
@media (max-aspect-ratio: 1/1) {
    .ct-shop-poster.wheel { --wd: clamp(190px, min(calc(100vw - 64px), calc(var(--vh) - 330px)), 460px); display: flex; width: min(96vw, 520px); gap: calc(10 * var(--u)); }
    .ct-shop-wside { display: contents; }
    .ct-shop-wtitle { order: -2; }
    .ct-shop-wside .ct-shop-sub { order: -1; }
    .ct-shop-wheelbox { order: 0; }
    .ct-shop-wside .ct-big { order: 1; width: min(100%, 340px); }
    .ct-shop-wside .ct-shop-hint { order: 2; }
}
@media (max-height: 430px) and (min-aspect-ratio: 101/100) {
    .ct-shop-poster.wheel { --stickh: calc(24 * var(--u)); --wd: clamp(190px, calc(var(--vh) - 62px - var(--stickh)), 470px); padding: calc(12 * var(--u)) calc(16 * var(--u)); }
    .ct-shop-wtitle { font-size: max(20px, calc(30 * var(--u))); }
}

/* Приз колеса и подарка: записка, шлёпнутая поверх */
.ct-shop-prize { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(27, 33, 80, .4); animation: ct-fade .15s ease-out; }
.ct-shop-prizecard { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(9 * var(--u)); min-width: min(84%, 320px); max-width: 94%; padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u)); text-align: center; transform: rotate(-2deg);
    animation: ct-shop-slam .42s cubic-bezier(.2, 1.5, .4, 1) both; }
.ct-shop-prizecard .ptitle { font-size: max(24px, calc(40 * var(--u))); line-height: 1; }
.ct-shop-prizecard .pa { display: flex; align-items: center; justify-content: center; min-height: max(60px, calc(90 * var(--u))); }
.ct-shop-prizecard .pcoin { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: max(30px, calc(52 * var(--u))); line-height: 1; }
.ct-shop-prizecard .pcoin img { width: max(40px, calc(64 * var(--u))); height: max(40px, calc(64 * var(--u))); }
.ct-shop-prizecard .pitem { display: flex; height: max(70px, calc(110 * var(--u))); width: max(90px, calc(150 * var(--u))); align-items: center; justify-content: center; }
.ct-shop-prizecard .pl { font-size: var(--fs-m); line-height: 1.2; }
.ct-shop-prizecard .pb { display: flex; gap: calc(8 * var(--u)); width: 100%; }
.ct-shop-prizecard .pb .ct-big { flex: 1 1 0; min-width: 0; }
.ct-shop-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; z-index: 9; pointer-events: none; }
.ct-shop-burst i { position: absolute; left: 0; top: 0; width: var(--w); height: calc(var(--w) * 1.6); background: var(--c); box-shadow: 0 0 0 1.5px var(--ink); animation: ct-shop-fly 1.1s cubic-bezier(.2, .8, .3, 1) forwards; }

/* --- Подарок дня --- */
.ct-shop-poster.daily { width: min(96vw, max(440px, calc(580 * var(--u)))); gap: calc(8 * var(--u)); }
.ct-shop-dtitle { margin: 0; text-align: center; font-size: max(24px, calc(38 * var(--u))); line-height: 1; }
.ct-shop-days { width: 100%; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(13 * var(--u)) calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)); overflow-y: auto; overflow-x: hidden; touch-action: pan-y; }
.ct-shop-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--u)); min-width: 0; padding: calc(9 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)); text-align: center; background: var(--card); border-radius: calc(3 * var(--u));
    box-shadow: var(--ring), var(--hard); transform: rotate(var(--rot, 0deg)); }
.ct-shop-day .tape { position: absolute; top: calc(-6.5 * var(--u)); left: 50%; width: 40%; height: calc(11 * var(--u)); margin-left: -20%; background: var(--tape); transform: rotate(-3deg); }
.ct-shop-day .dn { font-size: max(11px, calc(14 * var(--u))); text-transform: uppercase; opacity: .8; }
.ct-shop-day .da { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(3 * var(--u)) calc(7 * var(--u)); min-height: max(36px, calc(46 * var(--u))); }
.ct-shop-day .rc, .ct-shop-day .rg { display: flex; align-items: center; gap: calc(3 * var(--u)); font-size: max(15px, calc(22 * var(--u))); line-height: 1; }
.ct-shop-day .rc img, .ct-shop-day .rg img { width: max(22px, calc(30 * var(--u))); height: max(22px, calc(30 * var(--u))); object-fit: contain; }
.ct-shop-day .rc.big { font-size: max(20px, calc(32 * var(--u))); }
.ct-shop-day .dskin { display: flex; height: max(40px, calc(54 * var(--u))); align-items: center; justify-content: center; }
.ct-shop-day .ds { font-size: max(10.5px, calc(12.5 * var(--u))); min-height: 1.15em; line-height: 1.15; opacity: .85; }
.ct-shop-day.st-claimed { background: var(--card2); }
.ct-shop-day.st-claimed .da, .ct-shop-day.st-claimed .dn { opacity: .45; }
.ct-shop-day.st-locked { opacity: .82; }
.ct-shop-day.st-today { box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), 0 0 0 calc(7 * var(--u)) var(--coral), 0 0 0 calc(10 * var(--u)) var(--ink), calc(5 * var(--u)) calc(8 * var(--u)) 0 rgba(27, 33, 80, .34); animation: ct-shop-bob 1.1s ease-in-out infinite alternate; z-index: 2; }
.ct-shop-day.st-today .ds { color: var(--coral2); opacity: 1; }
.ct-shop-day .chk, .ct-shop-day .lk { position: absolute; top: calc(-8 * var(--u)); right: calc(-8 * var(--u)); width: max(24px, calc(30 * var(--u))); height: max(24px, calc(30 * var(--u))); border-radius: 50%; background: var(--mint); box-shadow: var(--ring); display: flex; align-items: center; justify-content: center; }
.ct-shop-day .lk { background: var(--card2); }
.ct-shop-day .chk img, .ct-shop-day .lk img { width: 62%; height: 62%; object-fit: contain; }
.ct-shop-day .chk { animation: ct-stamp .35s both cubic-bezier(.3, 1.6, .5, 1); }
.ct-shop-day.d7 { grid-column: 1 / -1; background: repeating-linear-gradient(-45deg, var(--ink) 0 9px, #262e6b 9px 18px); color: #fff; padding-top: calc(12 * var(--u)); outline: calc(2.5 * var(--u)) solid var(--sun); outline-offset: calc(-5 * var(--u)); }
.ct-shop-day.d7 .tape { background: var(--sun); }
.ct-shop-day.d7 .dn { color: var(--sun); opacity: 1; }
.ct-shop-day.d7 .dskin { height: max(64px, calc(92 * var(--u))); }
.ct-shop-day.d7 .dname { font-size: max(14px, calc(19 * var(--u))); line-height: 1.1; color: var(--sun); }
.ct-shop-day.d7 .dnote { font-size: max(10.5px, calc(12 * var(--u))); opacity: .8; line-height: 1.15; }
.ct-shop-day.d7 .rc { color: #fff; }
.ct-shop-day.d7.st-claimed { background: repeating-linear-gradient(-45deg, #4a5078 0 9px, #555b82 9px 18px); }
.ct-shop-stamp { display: inline-block; padding: 0 calc(8 * var(--u)); border: calc(3 * var(--u)) solid var(--coral); color: var(--coral); background: rgba(27, 33, 80, .6); border-radius: calc(6 * var(--u)); font-size: max(11px, calc(15 * var(--u))); line-height: 1.25; text-transform: uppercase; transform: rotate(-6deg); animation: ct-stamp .35s .2s both cubic-bezier(.3, 1.6, .5, 1); }
.ct-shop-result { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); background: var(--card2); border-radius: calc(3 * var(--u)); box-shadow: var(--ring); animation: ct-shop-slam .4s both cubic-bezier(.2, 1.5, .4, 1); }
.ct-shop-result .rt { font-size: max(20px, calc(30 * var(--u))); line-height: 1; }
.ct-shop-result .rt em { font-style: normal; color: var(--coral2); }
.ct-shop-result .gl { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--u)) calc(16 * var(--u)); }
.ct-shop-result .g { display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: max(18px, calc(28 * var(--u))); line-height: 1; }
.ct-shop-result .g img { width: max(26px, calc(38 * var(--u))); height: max(26px, calc(38 * var(--u))); object-fit: contain; }
.ct-shop-result .g.item { font-size: var(--fs-m); }
.ct-shop-result .gi { display: flex; height: max(44px, calc(60 * var(--u))); width: max(50px, calc(70 * var(--u))); align-items: center; justify-content: center; }
.ct-shop-dacts { width: 100%; display: flex; gap: calc(10 * var(--u)); margin-top: calc(4 * var(--u)); }
.ct-shop-dacts .ct-big { flex: 1 1 0; min-width: 0; }
.ct-shop-next { margin: 0; text-align: center; font-size: var(--fs-s); opacity: .8; }
.ct-shop-next:empty { display: none; }
@media (min-aspect-ratio: 12/10) {
    .ct-shop-days { grid-template-columns: repeat(3, 1fr) 1.3fr; }
    .ct-shop-day.d7 { grid-column: 4; grid-row: 1 / span 2; }
}
@media (max-height: 430px) and (min-aspect-ratio: 101/100) {
    .ct-shop-poster.daily { padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); gap: calc(5 * var(--u)); }
    .ct-shop-dtitle { font-size: max(20px, calc(30 * var(--u))); }
    .ct-shop-days { gap: calc(11 * var(--u)) calc(9 * var(--u)); padding-top: calc(6 * var(--u)); }
    .ct-shop-day .da { min-height: max(30px, calc(40 * var(--u))); }
    .ct-shop-day .dskin { height: max(34px, calc(46 * var(--u))); }
    .ct-shop-day.d7 .dskin { height: max(48px, calc(70 * var(--u))); }
}
@media (max-aspect-ratio: 1/1) {
    .ct-shop-poster.daily { width: min(96vw, 520px); }
}

/* --- Анимации --- */
@keyframes ct-shop-in-r { from { transform: translateX(110%) rotate(5deg); } }
@keyframes ct-shop-in-b { from { transform: translateY(110%) rotate(-3deg); } }
@keyframes ct-shop-out-r { to { transform: translateX(110%) rotate(5deg); } }
@keyframes ct-shop-out-b { to { transform: translateY(110%) rotate(-3deg); } }
@keyframes ct-shop-out-t { to { transform: translateY(-60vh) rotate(6deg); opacity: 0; } }
@keyframes ct-shop-fadeout { to { opacity: 0; } }
@keyframes ct-shop-slipin { from { transform: translateY(18px) rotate(calc(var(--rot, 0deg) + 7deg)) scale(.88); opacity: 0; } }
@keyframes ct-shop-twinkle { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .6; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes ct-shop-bob { from { transform: rotate(var(--rot, 0deg)) translateY(0); } to { transform: rotate(calc(var(--rot, 0deg) * -1)) translateY(calc(-3 * var(--u))); } }
@keyframes ct-shop-sway { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
@keyframes ct-shop-slam { from { transform: rotate(-2deg) scale(2.1); opacity: 0; } }
@keyframes ct-shop-toast { from { transform: translateX(-50%) rotate(-1.5deg) translateY(-14px) scale(.8); opacity: 0; } }
@keyframes ct-shop-fly { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--r)); opacity: 0; } }
@keyframes ct-shop-pulse { from { filter: hue-rotate(-18deg) drop-shadow(2px 3px 0 rgba(27, 33, 80, .28)); } to { filter: hue-rotate(34deg) drop-shadow(2px 3px 0 rgba(27, 33, 80, .28)); } }
@keyframes ct-shop-rainbow { from { filter: hue-rotate(0deg) drop-shadow(2px 3px 0 rgba(27, 33, 80, .28)); } to { filter: hue-rotate(360deg) drop-shadow(2px 3px 0 rgba(27, 33, 80, .28)); } }

@media (prefers-reduced-motion: reduce) {
    .ct-shop-root *, .ct-shop-root *::before { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}