/* catch-caps.css — оформление мини-игры «Никита ловит кепки в корзинку».
   Игровая геометрия остаётся в catch-caps.js; поле использует готовые ассеты
   кепок и текущие спрайты Никиты. */

/* ══════════════════════ поле раунда ══════════════════════ */
.cc-field{position:relative;overflow:hidden;height: min(56vh,340px);height: min(56svh,340px);min-height:230px;margin:12px 0 0;border:1px solid #52654e;border-radius:14px;background:linear-gradient(180deg,#2b3830 0%,#1d2822 58%,#141d18 100%);box-shadow:inset 0 -22px 34px #0007;touch-action:none;user-select:none;-webkit-user-select:none}
.cc-floor{position:absolute;left:0;right:0;bottom:0;height:10%;background:repeating-linear-gradient(90deg,#2f3d34 0 18px,#26332c 18px 36px);border-top:2px solid #4a5d49}
/* Зона лова: её видно игроку как «коридор», где кепка ещё жива. Границы приходят из JS
   переменными --cc-zone-top / --cc-zone-height (см. fieldHtml в catch-caps.js), поэтому
   разметка физически не может разойтись с тем, что считает раунд. */
.cc-catchzone{position:absolute;left:0;right:0;top:var(--cc-zone-top,80.5%);height:var(--cc-zone-height,12%);background:linear-gradient(180deg,#c5f47700,#c5f4772e,#c5f47700);border-top:1px dashed #c5f47755;pointer-events:none}
.cc-shelf{position:absolute;left:4%;right:4%;top:calc(4% + var(--shelf)*11%);height:5px;border-radius:3px;background:linear-gradient(180deg,#6b5540,#3d2f24);opacity:calc(.5 - var(--shelf)*.07)}

/* ══════════════════════ падающие кепки ══════════════════════ */
.cc-drop{position:absolute;left:50%;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;display:grid;place-items:center;font-size:30px;line-height:1;filter:drop-shadow(0 3px 4px #000b);will-change:top,left;transition:opacity .18s,transform .18s}
.cc-drop i{font-style:normal;display:block}
.cc-common,.cc-straw,.cc-tophat,.cc-graduate,.cc-crown{animation:cc-spin 1.9s ease-in-out infinite alternate}
.cc-straw i{filter:sepia(1) saturate(1.8) hue-rotate(345deg)}
.cc-tophat i{filter:brightness(.55) saturate(.55)}
.cc-graduate i{filter:hue-rotate(35deg) saturate(1.5)}
.cc-crown i{filter:sepia(1) saturate(2.5) hue-rotate(320deg)}
@keyframes cc-spin{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.cc-junk{filter:drop-shadow(0 3px 4px #000b) saturate(.7)}
.cc-crown i,.cc-tophat i{font-size:32px}
/* Кепка, спрятанная за силуэтом Никиты (широкая спина загораживает полку): видна
   частично, проявляется на середине падения. */
.cc-hidden{opacity:.26;filter:drop-shadow(0 3px 4px #000b) blur(1.4px)}
.cc-caught{opacity:0;transform:scale(1.55) translateY(6px)}
.cc-ghost{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;display:grid;place-items:center;font-size:26px;pointer-events:none;animation:cc-pop .52s ease-out forwards}
.cc-ghost-good{color:#eaffd5;text-shadow:0 0 10px #c5f477}
.cc-ghost-bad{color:#ffd7cf;text-shadow:0 0 10px #ff6f5a}
@keyframes cc-pop{from{opacity:1;translate:0 0;scale:1}to{opacity:0;translate:0 -22px;scale:1.5}}

/* ══════════════════════ корзинка ══════════════════════
   Вертикаль задаёт JS (top в % поля), ширина — переменной --cc-basket-w: это тот же
   hitHalfWidth×2, по которому раунд решает, легла кепка в обод или нет. */
.cc-basket{position:absolute;left:44%;top:88%;width:var(--cc-basket-w,13%);height:15%;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}
.cc-basket-body{font-size:clamp(36.4px,9.8vw,61.6px);line-height:1;filter:drop-shadow(0 4px 6px #000c)}
/* Ручки корзинки: фигурами показываем ширину зоны лова — ровно то же число, что
   использует hitHalfWidth в JS. */
.cc-basket:before,.cc-basket:after{content:"";position:absolute;top:38%;height:24%;width:9px;border-radius:6px;background:linear-gradient(180deg,#d9b276,#8a6a3f);box-shadow:0 2px 4px #0009}
.cc-basket:before{left:-9px}
.cc-basket:after{right:-9px}

/* ══════════════════════ Никита ══════════════════════
   Точные спрайт и стадия приходят из avatarProfile; общий масштаб совпадает с
   game.js bodyVisual(). */
.cc-avatar{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:16%;height:34%;pointer-events:none;opacity:.9}
.cc-avatar span.cc-face{position:absolute;left:50%;top:0;transform:translateX(-50%);font-size:clamp(21px,4.8vw,30.8px);line-height:1}
.cc-avatar:before,.cc-avatar:after{content:"";position:absolute;left:50%;border-radius:12px 12px 8px 8px;transform:translateX(-50%)}
/* Плечи и корпус */
.cc-avatar:before{top:16%;width:100%;height:56%;background:linear-gradient(180deg,#4f6b57,#2c3d33);box-shadow:inset 0 3px 0 #7ea18455}
/* Ноги */
.cc-avatar:after{bottom:0;width:56%;height:34%;background:linear-gradient(180deg,#394a41,#212d27)}
/* Венозный слой — тот же приём, что в game.js: отдельный слой поверх, а не пересборка. */
.cc-veiny:before{background-image:linear-gradient(90deg,#a8566b00 0 22%,#a8566bcc 23% 25%,#a8566b00 26% 46%,#a8566bcc 47% 49%,#a8566b00 50%);background-size:100% 100%}

/* ══════════════════════ HUD, пороги, итог ══════════════════════ */
.cc-hud{display:flex;align-items:center;gap:10px;margin:10px 0 0;font:700 16.8px 'Space Mono',ui-monospace,monospace;color:#eaffd5}
.cc-hud span{flex:1 1 auto}
.cc-meter{position:relative;display:block;flex:0 0 120px;height:8px;border:1px solid #52654e;border-radius:6px;background:#0d1610;overflow:hidden}
.cc-meter i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#c5f477,#7fd46a);transition:width .2s linear}
.cc-level-row{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;font-size:16.8px;color:#b9cdb4}
.cc-level-row b{color:#eaffd5}
.cc-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 0;font-size:15.4px;color:#a9bda6}
.cc-legend .cc-junk{color:#ffb4a4}
.cc-legend .cc-crown,.cc-legend .cc-tophat{color:#ffe9a8}
.cc-result{margin:12px 0 0;padding:12px;border:1px solid #52654e;border-radius:12px;background:#101a14;text-align:center}
.cc-result b{display:block;font:800 25.2px/1.2 'Space Mono',ui-monospace,monospace;letter-spacing:.06em}
.cc-result small{display:block;margin-top:6px;color:#b9cdb4;font-size:16.8px}
.cc-win{border-color:#a6d56a;box-shadow:inset 0 0 22px #c5f47722}
.cc-win b{color:#eaffd5}
.cc-lose{border-color:#a4574d;box-shadow:inset 0 0 22px #ff6f5a18}
.cc-lose b{color:#ffd7cf}
.mini-status.cc-hold{color:#eaffd5}
.cc-leave{opacity:.86}

@media(max-width:520px){
 .cc-field{height: min(48vh,290px);height: min(48svh,290px);min-height:210px}
 .cc-drop{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:26px}
 .cc-avatar{width:22%}
 .cc-meter{flex-basis:84px}
}
@media(prefers-reduced-motion:reduce){
 .cc-common,.cc-straw,.cc-tophat,.cc-graduate,.cc-crown{animation:none}
 .cc-ghost{animation-duration:.01s}
}

/* Illustrated stockroom scene. Geometry and class names stay tied to catch-caps.js. */
.cc-field{
  isolation:isolate;
  border:2px solid #7f8e68;
  border-radius:16px;
  background:
    radial-gradient(ellipse at 50% 7%,#ffeac84d 0,#ffeac800 56%),
    repeating-linear-gradient(90deg,#ffffff08 0 2px,transparent 2px 34px),
    linear-gradient(165deg,#596653 0%,#35453a 47%,#17251d 100%);
  box-shadow:inset 0 0 0 4px #1b2b20,inset 0 -28px 45px #09170fbb,0 12px 24px #0006;
}
.cc-field::before{
  content:"";position:absolute;inset:7% 5% 13%;z-index:0;pointer-events:none;
  border:1px solid #d3cba53d;border-radius:8px;
  background:linear-gradient(90deg,#101d1724 0 2%,transparent 2% 98%,#101d1724 98%),
             repeating-linear-gradient(90deg,transparent 0 24%,#d3cba512 24.2% 24.5%,transparent 24.8% 50%);
  box-shadow:inset 0 0 42px #0a140d88;
}
.cc-field::after{
  content:"";position:absolute;top:0;left:27%;right:27%;height:20%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0,#fff0bd66 0,#fff0bd00 72%);
}
.cc-shelf{
  z-index:1;left:6%;right:6%;height:8px;border-radius:2px 2px 6px 6px;opacity:.56;
  background:linear-gradient(180deg,#b5a77e 0 14%,#72583c 14% 53%,#2f271e 54% 100%);
  border-bottom:1px solid #161a15;
  box-shadow:0 5px 9px #0710088a,0 -1px #ead9aa77;
}
.cc-shelf:nth-of-type(2){opacity:.52}
.cc-shelf:nth-of-type(3){opacity:.48}
.cc-shelf:nth-of-type(4){opacity:.44}
.cc-shelf:nth-of-type(5){opacity:.40}
.cc-shelf:nth-of-type(1){top:4%}
.cc-shelf:nth-of-type(2){top:15%}
.cc-shelf:nth-of-type(3){top:26%}
.cc-shelf:nth-of-type(4){top:37%}
.cc-shelf:nth-of-type(5){top:48%}
.cc-shelf::before,.cc-shelf::after{
  content:"";position:absolute;bottom:5px;width:44px;height:28px;
  background-size:contain;background-position:center bottom;background-repeat:no-repeat;
  filter:drop-shadow(0 3px 2px #071008aa);
}
.cc-shelf::before{left:8%}.cc-shelf::after{right:10%}
.cc-shelf:nth-of-type(1)::before{background-image:url('assets/cap-8-real.png')}
.cc-shelf:nth-of-type(1)::after{background-image:url('assets/cap-9-real.png')}
.cc-shelf:nth-of-type(2)::before{background-image:url('assets/cap-10-real.png')}
.cc-shelf:nth-of-type(2)::after{background-image:url('assets/cap-11-real.png')}
.cc-shelf:nth-of-type(3)::before{background-image:url('assets/cap-12-real.png')}
.cc-shelf:nth-of-type(3)::after{background-image:url('assets/cap-13-real.png')}
.cc-shelf:nth-of-type(4)::before{background-image:url('assets/cap-14-real.png')}
.cc-shelf:nth-of-type(4)::after{background-image:url('assets/cap-7-real.png')}
.cc-shelf:nth-of-type(5)::before{background-image:url('assets/cap-5.svg')}
.cc-shelf:nth-of-type(5)::after{background-image:url('assets/cap-6.svg')}
.cc-floor{
  z-index:2;height:13%;border-top:2px solid #9b8f684d;
  background:repeating-linear-gradient(90deg,#8e80611a 0 1px,transparent 1px 47px),
             linear-gradient(180deg,#26372b,#101c16);
  box-shadow:inset 0 8px 16px #08140b88;
}
.cc-catchzone{
  z-index:3;border-top:1px dashed #e9e5afaa;
  background:linear-gradient(180deg,#dcedaa00 0,#e1f5b832 26%,#c5f4771b 72%,#dcedaa00 100%);
  box-shadow:inset 0 8px 12px #e0efaa0d;
}
.cc-avatar{
  z-index:4;left:50%;bottom:4%;width:27%;height:72%;opacity:.94;
  background-image:var(--cc-avatar-sprite,url('assets/nikita-sprite-v2.png'));
  background-position:center bottom;background-repeat:no-repeat;background-size:100% 100%;
  transform:translateX(-50%) scale(var(--cc-avatar-scale-x,1),var(--cc-avatar-scale-y,1));
  transform-origin:center bottom;
  filter:drop-shadow(0 7px 8px #061009bb);
}
.cc-avatar .cc-face,.cc-avatar::before,.cc-avatar::after{display:none}
.cc-veiny{filter:saturate(.94) drop-shadow(0 7px 8px #061009bb)}
.cc-avatar.cc-heavier{filter:saturate(.98) drop-shadow(0 7px 8px #061009bb)}
.cc-drop{
  z-index:7;width:42px;height:42px;margin:-21px 0 0 -21px;
  border:1px solid #f7efcfaa;border-radius:11px;
  background:radial-gradient(circle at 27% 18%,#fff9e994,#fff9e912 45%,#17251c55 100%);
  box-shadow:inset 0 1px #fff9d1a8,0 4px 10px #061009a8;
  font-size:35px;
}
.cc-drop::after{content:"";position:absolute;inset:3px;border:1px solid #ffffff24;border-radius:8px;pointer-events:none}
.cc-drop.cc-isjunk{border-color:#f0a392a8;background:radial-gradient(circle at 27% 18%,#ffc8ac66,#6a302455 80%)}
.cc-drop i{filter:drop-shadow(0 2px 1px #16201788)}
.cc-hidden{opacity:.36}
.cc-ghost{z-index:8;text-shadow:0 1px 8px #101810}
.cc-basket{
  z-index:8;height:15%;filter:drop-shadow(0 5px 5px #061009b8);
}
.cc-basket-body{
  display:block;position:relative;width:100%;height:100%;font-size:0;
  border:2px solid #48331f;border-radius:9px 9px 13px 13px;
  background:repeating-linear-gradient(45deg,#3d2816a0 0 3px,#d1a66e66 3px 6px,transparent 6px 10px),
             repeating-linear-gradient(-45deg,#49311caa 0 3px,#e0b57c55 3px 6px,transparent 6px 10px),
             linear-gradient(180deg,#d8aa6d,#8f5c34 78%,#6a4028);
  box-shadow:inset 0 3px #f0cb8d88,inset 0 -5px #452c1c8a;
  clip-path:polygon(0 9%,100% 9%,89% 100%,11% 100%);
}
.cc-basket-body::before{
  content:"";position:absolute;top:0;left:0;right:0;height:12px;border-radius:50%;
  border:4px solid #e5b878;background:#52321c;box-shadow:inset 0 2px 4px #140c08;
}
.cc-basket::before,.cc-basket::after{z-index:-1;top:24%;height:24%;width:8px;background:#ae7746}
.cc-hud{padding:8px 10px;border:1px solid #576c52;border-radius:9px;background:#15231a;color:#e8f4d4}
.cc-meter{height:10px;border-color:#819472;background:#0b150d}
.cc-level-row,.cc-legend{line-height:1.45}
.cc-legend span{display:inline-flex;align-items:center;padding:3px 6px;border:1px solid #506348;border-radius:6px;background:#233127}
.cc-legend .cc-junk{border-color:#83564f;background:#3a2825}
@media(max-width:520px){
 .cc-avatar{width:34%;height:69%}
 .cc-drop{width:36px;height:36px;margin:-18px 0 0 -18px;font-size:30.8px}
 .cc-legend{gap:4px}
}
/* ═══════ бонусы владельца (п.): расширение/сужение корзинки, молния, сон ═══════
   Бокс бонуса 44×44 (≥44px и не меньше стандартной кепки 42): ловля считается
   математикой (currentBasketWidth/2), размер здесь — чистая видимость. */
.cc-basket{transition:width .18s ease}
.cc-drop.cc-bonus{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border-width:2px}
.cc-drop.cc-bonus::after{display:none}
/* 🟡 wide — светящийся жёлтый шарик */
.cc-drop.cc-wide{border-color:#fff0b8;background:radial-gradient(circle at 32% 28%,#fff3c2,#ffd76a 52%,#c9991d 100%);box-shadow:0 0 18px 5px #ffd76a8c,inset 0 2px #fff8dd;filter:drop-shadow(0 0 10px #ffd76a);animation:cc-ball-pulse 1.1s ease-in-out infinite alternate}
/* 🔴 narrow — красный шарик */
.cc-drop.cc-narrow{border-color:#ffc2b8;background:radial-gradient(circle at 32% 28%,#ffb3a6,#ff6f5a 55%,#a83226 100%);box-shadow:0 0 14px 4px #ff6f5a73,inset 0 2px #ffd9d2;filter:drop-shadow(0 0 8px #ff6f5a)}
/* ⚡ fast / 💤 slow — крупные глифы на привычной плитке с цветной подсветкой */
.cc-drop.cc-fast{border-color:#fff2b0;background:radial-gradient(circle at 27% 18%,#fff9e9d0,#ffeeb055 55%,#17251c55 100%)}
.cc-drop.cc-slow{border-color:#bcd8f7;background:radial-gradient(circle at 27% 18%,#eaf4ffd0,#bcd8f755 55%,#17251c55 100%)}
.cc-drop.cc-fast i,.cc-drop.cc-slow i{font-size:32px}
@keyframes cc-ball-pulse{from{transform:scale(1)}to{transform:scale(1.09)}}
/* Пульс — только включённой анимации: без лишнего движения по запросу владельца. */
@media(prefers-reduced-motion:reduce){.cc-drop.cc-wide{animation:none}}
.cc-ghost-bonus{color:#ffe9a0;text-shadow:0 0 10px #ffd76a}