/* «Заказ из замка» — сезонная игра. Подключать после app.css.
   Палитра замка (сливовая плашка задания с белым текстом) + хэллоуинские акценты:
   сливовый шкаф, картонная посылка, тыквенный скотч и печать, летучие мыши.
   Все классы с префиксом cz-, чтобы не пересекаться с остальными играми. */
.cz-game { --cz-accent: #4B3577; --cz-panel: linear-gradient(160deg,#5A3F8C,#2E1F4D); --cz-ink: var(--ink, #10141C); --cz-surface: var(--surface, #FCFDFF); --cz-muted: var(--muted, #575D6B);
  --cz-ok: #1F7A45; --cz-ok-led: #2FA564; --cz-bad: #C62F2F; --cz-pumpkin: #FF8A3D; --cz-plum: #4B3577; --cz-plum-d: #2B1D4A;
  --cz-glide: cubic-bezier(.2,.8,.2,1); --cz-spring: cubic-bezier(.34,1.56,.64,1);
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .7rem; width: 100%; max-width: 36rem; height: 100%; min-height: 0; margin: 0 auto; padding-top: .75rem;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.cz-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
:where(.cz-game) button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* ——— Фон: переливающиеся сумерки, луна, летучие мыши; вспышка верного/неверного ——— */
.cz-decor { position: absolute; inset: 0 -1rem -1rem; z-index: -1; overflow: hidden; pointer-events: none; border-radius: 1.4rem;
  background: linear-gradient(160deg,#EEE7FF 0%,#FFEBDD 30%,#E9E1FF 58%,#FFE0CA 82%,#EDE6FF 100%); background-size: 260% 260%; animation: cz-shimmer 18s ease-in-out infinite alternate; }
@keyframes cz-shimmer { to { background-position: 100% 100%; } }
.cz-moon { position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle,rgba(255,241,201,.95) 0 34%,rgba(255,241,201,.35) 35%,rgba(255,241,201,0) 68%); animation: cz-glow 6s ease-in-out infinite; }
@keyframes cz-glow { 50% { transform: scale(1.06); opacity: .85; } }
.cz-bat-track { position: absolute; inset: 0; }
.cz-bat-track .cz-bat { position: absolute; left: 0; top: 18%; width: 24px; color: var(--cz-plum-d); opacity: .4; }
.cz-bat-track.t1 { animation: cz-bat-a 22s linear infinite 3s; }
.cz-bat-track.t2 { animation: cz-bat-b 27s linear infinite 11s; }
.cz-bat-track.t2 .cz-bat { top: 9%; width: 17px; }
.cz-bat svg, .cz-lift-bat svg { display: block; width: 100%; transform-origin: 50% 40%; animation: cz-flap .2s ease-in-out infinite alternate; }
@keyframes cz-flap { to { transform: scaleY(.4); } }
@keyframes cz-bat-a { 0% { transform: translate(-15%,0); } 50% { transform: translate(55%,3%); } 100% { transform: translate(120%,2%); } }
@keyframes cz-bat-b { 0% { transform: translate(120%,6%) scaleX(-1); } 60% { transform: translate(40%,8%) scaleX(-1); } 100% { transform: translate(-20%,2%) scaleX(-1); } }
.cz-flash { position: absolute; inset: 0; opacity: 0; }
.cz-flash.ok { background: radial-gradient(120% 70% at 50% 75%,rgba(47,165,100,.42),rgba(47,165,100,0) 70%); }
.cz-flash.bad { background: radial-gradient(120% 70% at 50% 75%,rgba(198,47,47,.36),rgba(198,47,47,0) 70%); }

/* ——— Плашка задания: цвет шкафа, белый текст, полупрозрачная внутренняя плашка ——— */
.cz-task { position: relative; flex-shrink: 0; display: flex; flex-direction: column; gap: .55rem; padding: .78rem .9rem .9rem; border-radius: 1.1rem; background: var(--cz-panel); color: #FCFDFF; overflow: hidden; }
.cz-task::after { content: ''; position: absolute; right: -2px; top: -2px; width: 56px; height: 56px; opacity: .22; pointer-events: none; transform: scaleX(-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='white' stroke-width='1.3'%3E%3Cpath d='M0 0L60 60M0 0L60 24M0 0L24 60M0 0L60 0M0 0L0 60'/%3E%3Cpath d='M0 14Q9 9 14 0M0 28Q19 21 28 0M0 43Q30 33 43 0M0 57Q40 45 57 0'/%3E%3C/svg%3E") no-repeat; }
.cz-task-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cz-task-name { font-size: .83rem; font-weight: 700; }
.cz-task-meta { display: flex; align-items: center; gap: .6rem; margin-right: 1.3rem; }
.cz-num { font-size: .66rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .92; }
.cz-pips { display: flex; gap: .28rem; }
.cz-pips i { width: .56rem; height: .56rem; box-sizing: border-box; border: 2px solid rgba(252,253,255,.7); border-radius: 50%; transition: background-color .25s, border-color .25s; }
.cz-pips i.is-on { background: #FCFDFF; border-color: #FCFDFF; }
.cz-call { display: flex; flex-direction: column; gap: .45rem; padding: .6rem .78rem .7rem; border: 1.5px solid rgba(252,253,255,.85); border-radius: .78rem; background: rgba(252,253,255,.16); transition: background-color .35s; }
.cz-call:is([data-state="done"],[data-state="bad"]) { background: rgba(252,253,255,.24); }
.cz-call-head { display: flex; align-items: center; gap: .6rem; min-height: 2.6rem; }
.cz-label { min-width: 0; font-size: .74rem; font-weight: 600; line-height: 1.3; }
.cz-label b { font-weight: 800; }
/* Звонящий: портрет в тыквенном кольце и бейдж телефона. */
.cz-who { position: relative; flex: none; width: 2.6rem; height: 2.6rem; }
.cz-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 2.5px solid #FFC58A; background: rgba(252,253,255,.25); }
.cz-face > span { position: absolute; inset: 0; }
.cz-face svg { display: block; width: 100%; height: 100%; }
.cz-face .is-in { animation: cz-face-in .6s var(--cz-spring) both; }
.cz-face .is-out { animation: cz-face-out .3s var(--cz-glide) forwards; }
@keyframes cz-face-in { from { opacity: 0; transform: scale(.3) rotate(-25deg) translateY(14px); } }
@keyframes cz-face-out { to { opacity: 0; transform: scale(.6) translateY(-10px); } }
.cz-face .k-ghost svg { animation: cz-float 2.4s ease-in-out infinite; }
.cz-face :is(.k-vampire,.k-witch) svg { animation: cz-bob 3s ease-in-out infinite; }
@keyframes cz-float { 50% { transform: translateY(-4px); } }
@keyframes cz-bob { 50% { transform: translateY(2px) rotate(-3deg); } }
.cz-wave { position: absolute; inset: 0; border: 2px solid rgba(252,253,255,.9); border-radius: 50%; opacity: 0; pointer-events: none; }
.cz-call[data-state="ring"] .cz-wave { animation: cz-wave 1.15s ease-out infinite; }
.cz-call[data-state="ring"] .cz-wave + .cz-wave { animation-delay: .4s; }
@keyframes cz-wave { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
.cz-call[data-state="ring"] .cz-face > span:last-child { animation: cz-ring-face 1.15s ease-in-out infinite; }
@keyframes cz-ring-face { 0%,52%,100% { rotate: 0deg; } 6%,18%,30% { rotate: -6deg; } 12%,24%,36% { rotate: 6deg; } }
.cz-phone { position: absolute; right: -.3rem; bottom: -.25rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #FCFDFF; color: var(--cz-accent); box-shadow: 0 2px 4px rgba(16,20,28,.18); }
.cz-phone svg { width: .72rem; height: .72rem; fill: currentColor; transition: opacity .2s, scale .25s var(--cz-spring); }
.cz-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1.5px; opacity: 0; transition: opacity .2s; }
.cz-bars i { width: 2px; height: .55rem; border-radius: 2px; background: currentColor; transform: scaleY(.35); }
.cz-call[data-state="ring"] .cz-phone svg { animation: cz-ring 1.15s ease-in-out infinite; }
.cz-call:is([data-state="talk"],.is-speaking) .cz-phone svg { opacity: 0; scale: .6; }
.cz-call:is([data-state="talk"],.is-speaking) .cz-bars { opacity: 1; }
.cz-call:is([data-state="talk"],.is-speaking) .cz-bars i { animation: cz-bar .62s ease-in-out infinite alternate; }
.cz-bars i:nth-child(2) { animation-delay: -.42s !important; } .cz-bars i:nth-child(3) { animation-delay: -.18s !important; }
@keyframes cz-ring { 0%,52%,100% { rotate: 0deg; } 6%,18%,30% { rotate: -16deg; } 12%,24%,36% { rotate: 16deg; } 42% { rotate: -6deg; } }
@keyframes cz-bar { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.cz-who.happy .cz-face > span:last-child { animation: cz-hop .55s var(--cz-spring) 2; }
.cz-who.angry .cz-face > span:last-child { animation: cz-shake .45s ease-in-out 2; }
@keyframes cz-hop { 40% { transform: translateY(-6px) scale(1.1); } }
@keyframes cz-shake { 20% { transform: translateX(-4px) rotate(-8deg); } 40% { transform: translateX(4px) rotate(8deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
/* Тело звонка: точки → голосовая волна → «Послушать ещё раз» → текст в разборе. */
.cz-body { position: relative; min-height: 2.6rem; }
.cz-body > * { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; translate: 0 6px; pointer-events: none; transition: opacity .28s ease, translate .34s var(--cz-glide), visibility 0s linear .34s; }
.cz-call[data-state="ring"] .cz-dots, .cz-call[data-state="talk"] .cz-voice, .cz-call[data-state="open"]:not(.no-voice) .cz-replay,
.cz-call:is([data-state="done"],[data-state="bad"]) .cz-text, .cz-call.no-voice[data-state="open"] .cz-text {
  position: relative; opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; transition-delay: 0s; }
.cz-dots { display: inline-flex; align-items: center; gap: .3rem; height: 2.6rem; }
.cz-dots i { width: .4rem; height: .4rem; border-radius: 50%; background: rgba(252,253,255,.85); animation: cz-dot 1s ease-in-out infinite; }
.cz-dots i:nth-child(2) { animation-delay: .15s; } .cz-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cz-dot { 0%,100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-.2rem); } }
.cz-voice { display: flex; align-items: center; justify-content: space-between; gap: 3px; width: 100%; height: 2.6rem; }
.cz-voice i { flex: 1 1 0; max-width: 4px; height: calc(var(--h) * 100%); border-radius: 2px; background: rgba(252,253,255,.92); transform: scaleY(.18); transition: transform .3s; }
.cz-call.is-speaking .cz-voice i { animation: cz-vbar .62s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes cz-vbar { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
.cz-replay { display: inline-flex; align-items: center; gap: .55rem; height: 2.6rem; margin: 0; padding: 0 1.05rem 0 .4rem; border: 0; border-radius: 1.3rem; background: #FCFDFF; color: var(--cz-accent);
  box-shadow: 0 .3rem .7rem rgba(16,20,28,.13); font-size: .76rem; font-weight: 700; cursor: pointer; transition: opacity .28s, translate .34s var(--cz-glide), visibility 0s linear .34s, box-shadow .25s; }
.cz-replay:focus-visible { outline: 2px solid #FCFDFF; outline-offset: 3px; }
@media (hover: hover) { .cz-replay:hover { box-shadow: 0 .45rem 1rem rgba(16,20,28,.18); } }
.cz-replay-icon { position: relative; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--cz-accent); color: #FCFDFF; }
.cz-replay-icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s, scale .25s var(--cz-spring); }
.cz-replay-icon .cz-cone { fill: currentColor; }
.cz-replay-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; opacity: 0; transition: opacity .2s; }
.cz-replay-bars i { width: 2.5px; height: .8rem; border-radius: 2px; background: currentColor; transform: scaleY(.35); }
.cz-call.is-speaking .cz-replay-icon svg { opacity: 0; scale: .6; }
.cz-call.is-speaking .cz-replay-bars { opacity: 1; }
.cz-call.is-speaking .cz-replay-bars i { animation: cz-bar .5s ease-in-out infinite alternate; }
.cz-call.is-speaking .cz-replay-bars i:nth-child(2) { animation-delay: -.3s; } .cz-call.is-speaking .cz-replay-bars i:nth-child(3) { animation-delay: -.15s; }
.cz-replay-text { display: grid; }
.cz-replay-text > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .22s, translate .28s var(--cz-glide); }
.cz-busy { opacity: 0; translate: 0 4px; }
.cz-call.is-speaking .cz-idle { opacity: 0; translate: 0 -4px; }
.cz-call.is-speaking .cz-busy { opacity: 1; translate: 0 0; }
.cz-text { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.32; overflow-wrap: anywhere; }
.cz-w { display: inline-block; }
.cz-seg { border-radius: .3rem; transition: background-color .3s, padding .3s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cz-seg.is-ok { box-shadow: inset 0 -2px 0 rgba(252,253,255,.95); }
.cz-seg.is-bad { padding: 0 .14em; background: var(--cz-bad); }

/* ——— Шкаф: сетка 3×3, номера 1–9 ——— */
.cz-shelf-wrap { position: relative; flex: 1 1 auto; min-height: 9.5rem; container-type: size; display: grid; place-items: center; }
.cz-cabinet { position: relative; box-sizing: border-box; width: min(100cqw, 100cqh * 1.45); height: 100cqh; max-height: 26rem; padding: 9px; border-radius: 24px;
  background: var(--cz-panel); box-shadow: 0 16px 30px rgba(43,29,74,.28), inset 0 2px 0 rgba(255,255,255,.14); transition: filter .4s; }
.cz-cabinet::before { content: ''; position: absolute; left: -1px; top: -1px; z-index: 3; width: 62px; height: 62px; opacity: .45; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='white' stroke-width='1.2'%3E%3Cpath d='M0 0L60 60M0 0L60 24M0 0L24 60M0 0L60 0M0 0L0 60'/%3E%3Cpath d='M0 14Q9 9 14 0M0 28Q19 21 28 0M0 43Q30 33 43 0M0 57Q40 45 57 0'/%3E%3C/svg%3E") no-repeat; }
.cz-spider { position: absolute; right: 16%; top: -4px; z-index: 4; pointer-events: none; transform-origin: 50% 0; animation: cz-dangle 4s ease-in-out infinite; }
.cz-spider i { display: block; width: 1.5px; height: 30px; margin: 0 auto -10px; background: rgba(43,29,74,.65); }
.cz-spider svg { display: block; width: 20px; height: 20px; margin-top: 0; }
@keyframes cz-dangle { 0%,100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
.cz-rack { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap: 8px; width: 100%; height: 100%; }
.cz-rack.is-locked .cz-item { pointer-events: none; }
.cz-item { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 16px; background: var(--cz-surface);
  box-shadow: inset 0 -4px 0 rgba(43,29,74,.07); color: var(--cz-ink); cursor: grab; touch-action: none; outline: none;
  transition: opacity .45s var(--cz-glide) calc(var(--i) * 45ms), filter .45s var(--cz-glide) calc(var(--i) * 45ms), transform .25s var(--cz-spring), background-color .3s, box-shadow .3s; }
.cz-rack.is-waiting .cz-item { opacity: .58; filter: saturate(.35); cursor: default; }
.cz-item:focus-visible { box-shadow: inset 0 0 0 3px var(--cz-accent); }
.cz-item:active { transform: scale(.95); }
.cz-slot { position: absolute; top: 6px; left: 8px; font-size: 11px; font-weight: 800; color: var(--cz-muted); }
/* Explicit insets keep tall SVGs inside short cells without intrinsic grid sizing. */
.cz-art { position: absolute; inset: 13%; max-width: 96px; margin: auto; pointer-events: none; transition: transform .4s var(--cz-spring), opacity .3s; }
.cz-art svg { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: visible; transition: transform .35s var(--cz-spring), opacity .2s; }
@media (hover: hover) { .cz-rack:not(.is-locked) .cz-item:hover .cz-art svg { transform: translateY(-3%) rotate(-3deg) scale(1.04); } }
.cz-item.is-lifted .cz-art svg { opacity: .22; transform: scale(.88); }
.cz-item.k-candle .cz-art::before { content: ''; position: absolute; left: 50%; top: -6%; width: 70%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side,rgba(255,181,71,.5),transparent); animation: cz-candle 1.6s ease-in-out infinite alternate; }
@keyframes cz-candle { to { opacity: .45; scale: .85; } }
/* Разбор: на карточке английское название — нужное зелёным, ошибочное красным. */
.cz-ptag { position: absolute; left: 50%; bottom: 6px; padding: 2px 7px; border-radius: 6px; background: var(--cz-ink); color: #FCFDFF; font-size: max(10px,.62rem); font-weight: 800;
  white-space: nowrap; opacity: 0; translate: -50% 5px; pointer-events: none; transition: opacity .3s, translate .4s var(--cz-spring), background-color .3s, color .3s; }
.cz-rack.has-names .cz-ptag { opacity: 1; translate: -50% 0; }
.cz-rack.has-names .cz-art { transform: translateY(-9%) scale(.86); }
.cz-item.is-want { background: #EAF7EF; box-shadow: inset 0 0 0 3px var(--cz-ok-led); }
.cz-item.is-want .cz-ptag { background: var(--cz-ok); }
.cz-item.is-wrong { background: #FDECEC; box-shadow: inset 0 0 0 3px var(--cz-bad); }
.cz-item.is-wrong .cz-ptag { background: var(--cz-bad); }
.cz-item.is-dim .cz-art { opacity: .42; }
.cz-item.is-dim .cz-ptag { background: #E6E8EE; color: var(--cz-muted); }
.cz-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: cz-flame 1.1s ease-in-out infinite alternate; }
@keyframes cz-flame { 0% { transform: scaleY(1) rotate(-3deg); } 50% { transform: scaleY(1.12) rotate(3deg); } 100% { transform: scaleY(.92) rotate(-1deg); } }
.cz-sheen { animation: cz-sheen 3.2s ease-in-out infinite; }
@keyframes cz-sheen { 0%,60%,100% { opacity: .25; } 75% { opacity: 1; } }
.cz-bubble { animation: cz-bubble 2.4s ease-in infinite; }
.cz-bubble:nth-of-type(2) { animation-delay: -.8s; } .cz-bubble:nth-of-type(3) { animation-delay: -1.6s; }
@keyframes cz-bubble { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-12px); opacity: 0; } }

/* ——— Посылка: картонная коробка со створками, скотчем и печатью; рядом — кнопка отправки ——— */
.cz-dock { flex-shrink: 0; display: flex; align-items: stretch; gap: .7rem; height: 116px; }
.cz-box-wrap { position: relative; z-index: 5; flex: 1 1 0; min-width: 0; }
.cz-box { position: relative; box-sizing: border-box; height: 100%; border-radius: 18px; background: linear-gradient(180deg,#F2D6AE,#E0B27A); border: 2.5px solid #A97A46;
  box-shadow: inset 0 -10px 0 rgba(169,122,70,.18), 0 10px 22px rgba(80,40,10,.16); transition: transform .35s var(--cz-spring), box-shadow .3s; }
.cz-box::before { content: ''; position: absolute; left: 12px; right: 12px; top: 7px; height: 6px; border-radius: 4px; background: rgba(120,70,30,.22); }
.cz-box.is-target { transform: scale(1.035); box-shadow: 0 0 0 5px rgba(255,138,61,.45), 0 0 34px rgba(255,138,61,.45), inset 0 -10px 0 rgba(169,122,70,.18); }
.cz-hint { position: absolute; inset: 18px 12px 12px; display: grid; place-items: center; padding: 0 10px; border: 2px dashed rgba(120,70,30,.38); border-radius: 12px;
  color: #8A5C2E; font-size: .78rem; font-weight: 700; line-height: 1.3; text-align: center; transition: opacity .3s; }
.cz-hint.is-gone { opacity: 0; }
.cz-items { position: absolute; inset: 18px 10px 10px; display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; gap: 8px 10px; padding-left: 2px; }
.cz-packed { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 14px; background: var(--cz-surface);
  box-shadow: 0 4px 10px rgba(80,40,10,.15); cursor: grab; touch-action: none; transition: box-shadow .3s, background-color .3s; }
.cz-items.dense .cz-packed { width: 40px; height: 40px; border-radius: 11px; }
.cz-packed svg { display: block; width: 78%; height: 78%; overflow: visible; }
.cz-packed.is-pending { opacity: 0; }
.cz-packed:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cz-accent); }
.cz-qty { position: absolute; right: -7px; top: -7px; min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 6px; border-radius: 11px; background: var(--cz-ink); color: #FCFDFF;
  box-shadow: 0 0 0 2px #FCFDFF; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; transition: background-color .3s; }
.cz-packed.is-ok { box-shadow: 0 0 0 3px var(--cz-ok-led), 0 4px 10px rgba(80,40,10,.15); }
.cz-packed.is-ok .cz-qty { background: var(--cz-ok); }
.cz-packed.is-bad { box-shadow: 0 0 0 3px var(--cz-bad), 0 4px 10px rgba(80,40,10,.15); }
.cz-packed.is-bad .cz-qty { background: var(--cz-bad); }
.cz-packed.is-bad::after { content: ''; position: absolute; left: 8%; right: 8%; top: 48%; height: 3px; border-radius: 2px; background: var(--cz-bad); rotate: -32deg; }
.cz-packed.is-lifting[data-qty="1"] svg { opacity: .28; }
.cz-packed.is-missing { cursor: default; background: rgba(252,253,255,.55); box-shadow: none; outline: 2px dashed var(--cz-ok); outline-offset: -2px; }
.cz-packed.is-missing svg { opacity: .45; }
.cz-packed.is-missing .cz-qty { background: var(--cz-ok); }
.cz-post { position: absolute; right: 14px; bottom: -11px; z-index: 2; padding: 4px 10px; border-radius: 8px; background: var(--cz-pumpkin); color: #fff; font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; transform: rotate(-3deg); box-shadow: 0 4px 10px rgba(224,102,26,.3); }
.cz-flap { position: absolute; top: -2.5px; bottom: -2.5px; z-index: 3; box-sizing: border-box; width: calc(50% + 2.5px); border: 2.5px solid #A97A46; background: linear-gradient(180deg,#EDC896,#D9A86C);
  opacity: 0; pointer-events: none; transition: transform .5s var(--cz-glide), opacity .12s; }
.cz-flap.l { left: -2.5px; border-radius: 18px 0 0 18px; transform-origin: left center; transform: perspective(700px) rotateY(-100deg); }
.cz-flap.r { right: -2.5px; border-radius: 0 18px 18px 0; transform-origin: right center; transform: perspective(700px) rotateY(100deg); }
.cz-box.closing .cz-flap { opacity: 1; transform: perspective(700px) rotateY(0); }
.cz-box.closing .cz-flap.r { transition-delay: .08s; }
.cz-tape { position: absolute; left: 50%; top: -6px; bottom: -6px; z-index: 4; width: 28px; margin-left: -14px; border-radius: 3px; transform: scaleY(0); transform-origin: top;
  background: repeating-linear-gradient(45deg,rgba(255,181,71,.95) 0 8px,rgba(255,154,77,.95) 8px 16px); box-shadow: 0 2px 6px rgba(80,40,10,.2); transition: transform .4s var(--cz-glide); }
.cz-box.taped .cz-tape { transform: scaleY(1); }
.cz-seal { position: absolute; left: 14px; top: 50%; z-index: 5; width: 54px; height: 54px; margin-top: -27px; opacity: 0; transform: scale(2.4) rotate(-30deg); transition: transform .35s var(--cz-spring), opacity .15s; }
.cz-seal svg { display: block; width: 100%; height: 100%; }
.cz-box.sealed .cz-seal { opacity: 1; transform: scale(1) rotate(-12deg); }
.cz-stamp { position: absolute; left: 74%; top: 4px; z-index: 6; padding: .22rem .5rem; border: 3px solid currentColor; border-radius: .4rem; background: rgba(252,253,255,.88);
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; line-height: 1; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%,-50%) rotate(-7deg); pointer-events: none; }
.cz-stamp.is-ok, .cz-stamp.is-bad { opacity: 1; }
.cz-stamp.is-ok { color: var(--cz-ok); } .cz-stamp.is-bad { color: var(--cz-bad); }
.cz-lift-bat { position: absolute; top: -34px; z-index: 7; width: 58px; color: var(--cz-plum-d); opacity: 0; pointer-events: none; }
.cz-lift-bat.a { left: 12%; } .cz-lift-bat.b { right: 12%; }
.cz-plus { position: absolute; left: 50%; top: -6px; z-index: 8; translate: -50% 0; color: var(--cz-ok); font-size: 1.05rem; font-weight: 800; pointer-events: none; text-shadow: 0 1px 0 #fff; }
.cz-send { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; width: 5.4rem; height: 100%; margin: 0; padding: 0 .3rem; border: 0; border-radius: 1.1rem;
  background: var(--cz-ink); color: var(--cz-surface); box-shadow: 0 .3125rem .5rem rgba(16,20,28,.1); cursor: pointer; transition: opacity .25s, background-color .25s, translate .2s var(--cz-glide); }
.cz-send:disabled { opacity: .32; cursor: default; }
.cz-send:not(:disabled):active { translate: 0 1px; }
.cz-send-icon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(252,253,255,.14); transition: rotate .3s var(--cz-glide), background-color .25s; }
.cz-send-icon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cz-send-text { display: block; font-size: .68rem; font-weight: 700; line-height: 1.2; text-align: center; }
.cz-send.is-next { background: var(--cz-accent); }
.cz-send.is-next .cz-send-icon { background: rgba(252,253,255,.24); }
@media (hover: hover) { .cz-send:not(:disabled):hover .cz-send-icon { rotate: -12deg; } }

/* ——— Перелёт, перетаскивание, конец игры, вступление, конфетти ——— */
.cz-ghost { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; will-change: transform; }
.cz-ghost svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cz-ghost.is-dragging { z-index: 21; filter: drop-shadow(0 .8rem .7rem rgba(17,23,34,.24)); }
.cz-game.is-dragging, .cz-game.is-dragging * { cursor: grabbing !important; }
.cz-game.is-over .cz-cabinet { filter: saturate(.6) brightness(.95); }
.cz-game.is-over .cz-send { opacity: .32; }
.cz-announce { position: absolute; left: 0; right: 0; top: 42%; z-index: 30; display: grid; place-items: center; gap: 8px; text-align: center; pointer-events: none; }
.cz-announce > span { opacity: 0; }
.cz-a1 { padding: 14px 24px; border-radius: 20px; background: var(--cz-panel); color: #FCFDFF; font-size: 1.35rem; font-weight: 800; box-shadow: 0 18px 40px rgba(43,29,74,.35); }
.cz-a2 { padding: 6px 12px; border-radius: 999px; background: var(--cz-ink); color: #FCFDFF; font-size: .78rem; font-weight: 700; }
.cz-announce.is-on .cz-a1 { animation: cz-ann 1.6s var(--cz-glide) forwards; }
.cz-announce.is-on .cz-a2 { animation: cz-ann 1.6s var(--cz-glide) .08s forwards; }
@keyframes cz-ann { 0% { opacity: 0; transform: translateX(-50px) skewX(10deg) scale(.9); } 18%,78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(50px) skewX(-10deg) scale(.95); } }
.cz-confetti { position: absolute; inset: -1rem; z-index: 25; overflow: hidden; pointer-events: none; }
.cz-confetti > span { position: absolute; left: 0; top: 0; color: var(--cz-plum-d); will-change: transform; }
.cz-confetti svg { display: block; width: 100%; height: 100%; }

/* Низкие экраны (Telegram с панелями): плотнее, без вертикальной прокрутки. */
@media (max-height: 720px) {
  .cz-game { gap: .5rem; }
  .cz-task { gap: .4rem; padding: .6rem .78rem .7rem; }
  .cz-call { padding: .45rem .7rem .55rem; gap: .3rem; }
  .cz-text { font-size: .94rem; }
  .cz-dock { height: 104px; }
}
@media (max-height: 650px) {
  .cz-call-head { min-height: 2.2rem; } .cz-who { width: 2.2rem; height: 2.2rem; }
  .cz-text { font-size: .86rem; }
  .cz-body { min-height: 2.3rem; } .cz-dots, .cz-voice, .cz-replay { height: 2.3rem; }
  .cz-dock { height: 96px; } .cz-packed { width: 44px; height: 44px; }
  .cz-shelf-wrap { min-height: 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cz-game *, .cz-game *::before, .cz-game *::after { animation: none !important; transition: none !important; }
}

/* Seasonal entry stays outside the rank-locked workshop grid. */
.cz-event-card { width: 100%; min-height: 82px; margin: 1rem 0 0; padding: 1rem 1.2rem; display: flex; align-items: center; gap: .9rem; text-align: left; border: 1px solid #e4c5f2; border-radius: 1.2rem; background: linear-gradient(110deg,#f1e8ff,#fff0df); color: #34234d; }
.cz-event-card .game-card-copy { display: flex; flex: 1; flex-direction: column; gap: .25rem; }
.cz-event-card .game-card-copy strong { font-size: 1rem; }
.cz-event-card .game-card-copy span { font-size: .78rem; color: #695575; }
.cz-event-icon { font-size: 2rem; }
.cz-event-card.hidden { display: none; }

/* Original illustrated castle hall; scenery never intercepts gameplay. */
.cz-decor { background: #c2afce url('/static/assets/castle-scenery/hall-v2.svg') center / 100% 100% no-repeat; animation:none; }
.cz-decor::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 2px 14px #49365730; background:radial-gradient(ellipse at 0 57%,#ffd39b28,transparent 26%),radial-gradient(ellipse at 100% 57%,#ffd39b28,transparent 26%); }
.cz-window { display:none; }
.cz-moon { opacity:.14; }

/* The castle is a standalone destination above the existing factory road. */
.cz-event-card { position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:.8rem; min-height:0; padding:.5rem .5rem 1.2rem; margin:1.2rem 0 .8rem; border:1px solid #d4c3e3; border-radius:1.4rem; background:radial-gradient(ellipse at 25% 58%,#e9dcf7,#f6f0fa 85%); box-shadow:none; }
.cz-event-card .cz-event-castle { display:block; width:100%; height:auto; max-height:16rem; object-fit:contain; transition:transform .25s; }
.cz-event-card .game-card-copy { min-width:0; gap:.5rem; }
.cz-event-card .game-card-copy strong { font-size:1.18rem; line-height:1.2; color:#382449; }
.cz-event-card .game-card-copy .cz-event-badge { align-self:flex-start; padding:.35rem .5rem; border-radius:999px; background:#5e3a83; color:#fff8e9; font-size:.55rem; font-weight:700; letter-spacing:.04em; }
.cz-event-card #castleCardCopy { font-size:.7rem; color:#4b355e; font-weight:600; }
.cz-event-card #castleCardDate { font-size:.58rem; line-height:1.6; color:#766581; }
.cz-event-card .game-arrow { display:none; }
.cz-event-card.is-closed .cz-event-castle { filter:saturate(.65); }
.cz-event-card { -webkit-tap-highlight-color:transparent; }
.cz-event-card::before, .cz-event-card::after { content:none; }
.cz-event-card.is-launching { background:radial-gradient(ellipse at 25% 58%,#e9dcf7,#f6f0fa 85%); color:#382449; border-color:#d4c3e3; box-shadow:none; }
.cz-event-card:active:not(:disabled) { opacity:1; }
.cz-event-card:focus-visible { outline:3px solid #6a90ff; outline-offset:4px; }
@media(hover:hover){.cz-event-card:hover .cz-event-castle{transform:translateY(-3px);}}
@media(max-width:380px){.cz-event-card{grid-template-columns:.9fr 1.1fr;gap:.4rem}.cz-event-card .game-card-copy strong{font-size:1.05rem}.cz-event-card .game-card-copy .cz-event-badge{font-size:.5rem}}

.cz-complete { padding:1.2rem var(--gutter) 2rem; text-align:center; background:radial-gradient(ellipse at 50% 25%,#eee3fc,transparent 55%),var(--paper); }
.cz-complete>.back-button { display:block; margin:0; }
.cz-complete>.kicker { margin:.7rem 0 0; color:#785294; }
.cz-complete>img { display:block; width:min(70%,17rem); height:auto; margin:.9rem auto .7rem; }
.cz-complete h1 { margin:.5rem 0 .9rem; font-size:2rem; line-height:1.1; letter-spacing:-.05em; color:#382449; outline:none; }
.cz-complete>p:not(.kicker) { max-width:24rem; margin:.8rem auto; color:#695875; font-size:.72rem; line-height:1.7; }
.cz-reopens { display:grid; gap:.55rem; margin:1.4rem 0 1rem; padding:1rem; border:1px solid #d7c7e6; border-radius:1rem; background:#faf7fd; }
.cz-reopens>span { color:#8b719e; font-size:.53rem; font-weight:700; letter-spacing:.06em; }
.cz-reopens>strong { color:#4b2d64; font-size:.9rem; line-height:1.5; }
.cz-complete>button:not(.back-button) { width:100%; margin-top:.65rem; }
.cz-result-progress { color:#775393; font-size:.7rem; line-height:1.5; }

/* Keep the seasonal destination close to the first workshop. */
#castleCard:not(.hidden) + #gameCards { margin-top:0; padding-top:0; }

/* Same stable shelf layers as order.css: drag copies must not re-rasterize neighbours. */
.cz-item { will-change: transform; }