/* Телешоу «Поле сырных чудес» — сцена фургона «Рулетка» (assets/fair-wheel.js).
   Студия: занавес, два прожектора, глянцевый пол. Слева — ведущий (два слоя:
   тело и ладонь), в центре — барабан с диском секторов и стоячими табличками,
   справа — легенда секторов и счёт прокрутов, снизу — кнопки. */
.scene-wheel { --pc-gold: #e9c45c; --pc-gold-2: #c9a24a; --pc-cream: #fff3d9; --pc-ink: #14100c;
  background: radial-gradient(38% 60% at 28% -4%, rgba(255, 222, 150, .3), transparent 70%), radial-gradient(38% 60% at 74% -4%, rgba(255, 222, 150, .26), transparent 70%),
  repeating-linear-gradient(90deg, #4a0f14 0 34px, #5e141a 34px 62px), #3a0b10; }
.scene-wheel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none;
  background: linear-gradient(rgba(20, 6, 8, 0), rgba(20, 6, 8, .55) 40%, rgba(12, 4, 6, .85)); }
.pc-studio { position: relative; width: min(1240px, 96vw); height: min(92svh, 780px); }

/* Заголовок и подводка */
.pc-title { position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0; white-space: nowrap; font-family: var(--f-display); font-weight: 900;
  font-size: clamp(24px, 3.6vw, 50px); letter-spacing: -.02em; line-height: 1.1; text-transform: uppercase; color: #ffe39a;
  text-shadow: 0 0 10px #ffb43a, 0 0 30px rgba(255, 140, 40, .8), 0 4px 0 #6b1d0c; }
.pc-title em { font-style: normal; color: #fff4c8; }
.pc-lede { position: absolute; left: 50%; top: 8.6%; transform: translateX(-50%); width: min(640px, 52%); margin: 0; text-align: center;
  color: rgba(255, 243, 217, .82); font-size: 14.5px; line-height: 1.4; text-wrap: balance; }

/* Табло над барабаном */
.pc-board { position: absolute; left: 24%; top: 19%; width: 52%; padding: 10px 22px 12px; border-radius: 14px; text-align: center; box-sizing: border-box;
  background: linear-gradient(#141018, #0b0910); border: 3px solid var(--pc-gold-2); box-shadow: inset 0 0 28px rgba(255, 190, 70, .18), 0 12px 30px rgba(0, 0, 0, .6); }
.pc-board b { display: block; font-family: var(--f-display); font-weight: 900; font-size: clamp(17px, 1.9vw, 26px); line-height: 1.15; color: #ffd76a;
  text-shadow: 0 0 14px rgba(255, 190, 70, .7); letter-spacing: .01em; }
.pc-board small { display: block; margin-top: 4px; color: rgba(255, 236, 200, .72); font-size: 13px; }
.pc-board.pop b { animation: pc-board-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pc-board-pop { 0% { transform: scale(.85); opacity: .3; } 100% { transform: none; opacity: 1; } }
.pc-studio.prize .pc-board { animation: pc-board-blink .25s steps(2) 12; }
@keyframes pc-board-blink { 50% { border-color: #ffe39a; box-shadow: inset 0 0 40px rgba(255, 220, 90, .6), 0 0 40px rgba(255, 200, 60, .8); } }

/* Ведущий: контейнер держит позу (наклон, прыжок), фигура дышит, ладонь машет */
.pc-host { position: absolute; left: 1%; bottom: 3%; height: 64%; aspect-ratio: 607 / 900; z-index: 3; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3, 1.2, .4, 1); }
.pc-host-fig { position: absolute; inset: 0; transform-origin: 50% 100%; animation: pc-breath 3.6s ease-in-out infinite; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); }
.pc-host-fig img { position: absolute; display: block; }
.pc-host-body { left: 0; top: 0; width: 100%; height: 100%; }
.pc-host-hand { animation: pc-hand-sway 4.2s ease-in-out infinite; }
@keyframes pc-breath { 50% { transform: scaleY(1.012) scaleX(1.004); } }
@keyframes pc-hand-sway { 50% { transform: rotate(3deg); } }
.pc-host-hand.wave { animation: pc-hand-wave .46s ease-in-out 4; }
@keyframes pc-hand-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
.pc-studio.spinning .pc-host { transform: rotate(5deg) translateX(3%); }
.pc-studio.spinning .pc-host-hand { animation: none; transform: rotate(-9deg); transition: transform .5s; }
.pc-studio.prize .pc-host { animation: pc-host-jump .5s ease-in-out 4; }
@keyframes pc-host-jump { 50% { transform: translateY(-34px) scale(1.04); } }

/* Облачко реплик */
.pc-bubble { position: absolute; left: 2%; top: 14%; max-width: 250px; z-index: 4; padding: 10px 14px 11px; border-radius: 16px; background: var(--pc-cream); color: #3a1608;
  font-size: 14px; line-height: 1.3; font-weight: 500; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); transform-origin: 30% 100%; }
.pc-bubble::after { content: ""; position: absolute; left: 34%; bottom: -12px; border: 8px solid transparent; border-top: 10px solid var(--pc-cream); border-bottom: 0; }
.pc-bubble.pop { animation: pc-bubble-pop .42s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pc-bubble-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pc-bubble p { margin: 0; }

/* Барабан: арт, эллипс грани, диск секторов, таблички, стрелка, лучи */
.pc-drum { position: absolute; left: 24%; bottom: 13%; width: 52%; aspect-ratio: 1393 / 900; z-index: 2; }
/* лучи ПРИЗа обрезаны коробкой чуть больше барабана — иначе они раздували прокрутку сцены */
.pc-rays-box { position: absolute; inset: -12% 0 -4%; overflow: clip; pointer-events: none; }
.pc-rays { position: absolute; left: 50%; top: 46%; width: 160%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 90, .34) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%); }
.pc-studio.prize .pc-rays { opacity: 1; animation: pc-rays-turn 14s linear infinite; }
@keyframes pc-rays-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.pc-drum-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.pc-top { position: absolute; }
/* диск секторов: круг, сжатый в эллипс грани; вращение — внутри сжатия */
.pc-spin { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1; margin-top: -50%; transform-origin: 50% 50%; will-change: transform; }
.pc-face { width: 100%; height: 100%; display: block; overflow: visible; }
/* k = высота грани / ширина грани (эллипс перспективы на арте барабана) */
.pc-top > .pc-spin { scale: 1 .4295; }
.pc-face path { transition: filter .3s; }
.pc-face path.hit { filter: brightness(1.22) drop-shadow(0 0 6px rgba(255, 230, 140, .9)); }
.pc-hub { position: absolute; left: 50%; top: 50%; width: 13%; aspect-ratio: 1 / .66; transform: translate(-50%, -50%); border-radius: 50%; z-index: 90;
  background: radial-gradient(circle at 40% 35%, #fff2b8, #d8a93a 45%, #7a5415 90%); box-shadow: 0 6px 10px rgba(0, 0, 0, .5), inset 0 -3px 6px rgba(0, 0, 0, .35); }
.pc-plaques { position: absolute; inset: 0; pointer-events: none; }
.pc-plaque { position: absolute; left: 0; top: 0; padding: 4px 9px 5px; border-radius: 7px; border: 1.5px solid var(--pc-gold); background: var(--fill, #f4e7c9); color: var(--ink, #4a1a08);
  text-align: center; white-space: nowrap; transform-origin: 50% 100%; will-change: transform; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 8px 14px rgba(0, 0, 0, .45); transition: filter .3s; }
.pc-plaque::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(3px); z-index: -1; }
.pc-plaque b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 14px; line-height: 1.05; letter-spacing: -.01em; }
.pc-plaque small { display: block; margin-top: 2px; font-size: 9px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.pc-plaque.t4 { border-color: #ffd24d; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 16px rgba(255, 210, 77, .55); }
.pc-plaque.hit { filter: brightness(1.15) drop-shadow(0 0 10px rgba(255, 225, 120, .9)); }
.pc-pointer { position: absolute; left: 50.1%; top: calc((var(--cy, .3533) + var(--ry, .3044)) * 100% - 6%); width: 5%; aspect-ratio: 1 / 1.3; z-index: 160; transform: translateX(-50%); transform-origin: 50% 20%;
  background: linear-gradient(#fff2b8, #c9922a); clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }

/* Кнопки под барабаном */
.pc-btns { position: absolute; left: 24%; bottom: 0; width: 52%; display: flex; justify-content: center; gap: 12px; z-index: 3; }
.pc-btn { min-height: 58px; padding: 7px 26px 8px; border: 0; border-radius: 16px; cursor: pointer; display: grid; gap: 1px; text-align: center;
  background: linear-gradient(#ffe39a, #e2ad37); color: #4a1206; box-shadow: 0 6px 0 #8a5a14, 0 14px 30px rgba(0, 0, 0, .5); transition: transform .15s, box-shadow .15s, opacity .3s; }
.pc-btn b { font-family: var(--f-display); font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: .01em; }
.pc-btn small { font-size: 12px; font-weight: 600; opacity: .8; }
.pc-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #8a5a14, 0 8px 20px rgba(0, 0, 0, .5); }
.pc-btn.alt { background: linear-gradient(#f6e6c0, #c9a24a); color: #3a1608; box-shadow: 0 6px 0 #6b4a12, 0 14px 30px rgba(0, 0, 0, .5); }
.pc-studio.spinning .pc-btn { opacity: .5; pointer-events: none; }

/* Правая колонка: легенда и счёт */
.pc-side { position: absolute; right: 0; top: 15%; width: 23%; display: grid; gap: 10px; z-index: 3; }
.pc-panel { padding: 12px 14px 13px; border-radius: 14px; background: rgba(12, 8, 10, .78); border: 1px solid rgba(233, 196, 92, .35); color: var(--pc-cream); backdrop-filter: blur(6px); }
.pc-panel h3 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #ffd76a; }
.pc-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.pc-legend li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 9px; padding: 3px 0; font-size: 13px; line-height: 1.2; transition: background .3s; border-radius: 6px; }
.pc-legend i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(233, 196, 92, .7); background: var(--fill); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pc-legend em { font-style: normal; font-family: var(--f-display); font-weight: 700; font-size: 12px; color: #ffd76a; }
.pc-legend li.t4 i { border-color: #ffd24d; background: radial-gradient(circle, #ffd24d 0 28%, #17120e 34%); }
.pc-legend li.hit { background: rgba(255, 215, 106, .16); box-shadow: 0 0 0 1px rgba(255, 215, 106, .45); }
.pc-legend li.hit span { font-weight: 700; }
.pc-note { margin: 8px 0 0; font-size: 12px; line-height: 1.35; color: rgba(255, 243, 217, .62); }
.pc-stats { display: flex; gap: 14px; margin: 0 0 8px; }
.pc-stats div { display: grid; }
.pc-stats b { font-family: var(--f-display); font-weight: 900; font-size: 24px; line-height: 1; color: #ffd76a; }
.pc-stats span { font-size: 11.5px; color: rgba(255, 243, 217, .7); margin-top: 3px; }
.pc-tally { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.pc-tally li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px dashed rgba(233, 196, 92, .18); }
.pc-tally li.pc-empty { justify-content: flex-start; color: rgba(255, 243, 217, .62); border: 0; }
.pc-tally b { font-family: var(--f-display); font-weight: 700; color: #ffd76a; font-size: 12px; }
.pc-best { margin: 8px 0 0; font-size: 12.5px; color: rgba(255, 243, 217, .78); }
.pc-best b { color: #ffd76a; }
.pc-reset { margin-top: 8px; padding: 6px 12px; border-radius: 9px; border: 1px solid rgba(233, 196, 92, .5); background: transparent; color: #ffd76a; cursor: pointer; font-size: 12.5px; font-weight: 600; transition: background .2s; }
.pc-reset:hover { background: rgba(233, 196, 92, .14); }
.pc-reset[disabled] { opacity: .4; cursor: default; }

/* ПРИЗ: вспышка и конфетти */
.pc-flash { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255, 236, 170, .95), rgba(255, 200, 80, .35) 45%, transparent 75%); opacity: 0; }
.pc-studio.prize .pc-flash { animation: pc-flash .9s ease-out; }
@keyframes pc-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.pc-confetti { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.pc-confetti i { position: absolute; top: -4vh; left: var(--x); width: 10px; height: 16px; border-radius: 2px; background: var(--c); opacity: 0;
  animation: pc-fall var(--t) cubic-bezier(.3, .2, .6, 1) var(--d) both; }
@keyframes pc-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(var(--r)); opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .pc-host-fig, .pc-host-hand, .pc-host-hand.wave, .pc-studio.prize .pc-host, .pc-studio.prize .pc-rays, .pc-studio.prize .pc-board { animation: none; }
  .pc-studio.prize .pc-rays { opacity: .7; }
  .pc-host { transition: none; }
}

/* Телефон: сцена собирается в колонку и умещается в экран */
@media (max-width: 760px) {
  .scene-wheel .scene-body { place-items: start center; }
  .pc-studio { width: 100vw; height: auto; min-height: 100svh; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box;
    padding: calc(60px + env(safe-area-inset-top, 0px)) 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .pc-title, .pc-lede, .pc-board, .pc-side, .pc-btns { position: static; transform: none; width: auto; }
  .pc-title { font-size: 22px; text-align: center; white-space: normal; }
  .pc-lede { font-size: 12.5px; margin: 0 6px; }
  .pc-lede-more { display: none; }
  .pc-board { padding: 7px 12px 8px; }
  .pc-board b { font-size: 17px; }
  .pc-board small { font-size: 12px; }
  .pc-bubble { position: relative; align-self: flex-start; margin: 2px 0 2px 6px; max-width: 78%; font-size: 12px; padding: 6px 10px 7px; }
  .pc-bubble::after { left: 9%; }
  .pc-stage { position: relative; width: 100%; aspect-ratio: 1393 / 770; margin: 0; }
  .pc-drum { left: auto; right: -2%; bottom: 0; width: 88%; }
  .pc-host { left: -4%; bottom: 0; height: 68%; }
  .pc-plaque { padding: 3px 6px 4px; border-width: 1px; }
  .pc-plaque b { font-size: 10px; }
  .pc-plaque small { display: none; }
  .pc-side { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .pc-panel { padding: 8px 11px 9px; }
  .pc-panel h3 { margin-bottom: 4px; font-size: 11.5px; }
  .pc-legend { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .pc-legend li { font-size: 12px; padding: 1px 0; gap: 6px; }
  .pc-note { display: none; }
  .pc-score { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; }
  .pc-score h3, .pc-stats, .pc-tally { grid-column: 1 / -1; }
  .pc-stats { align-items: baseline; gap: 10px; margin-bottom: 5px; }
  .pc-stats div { display: flex; align-items: baseline; gap: 5px; }
  .pc-stats b { font-size: 18px; }
  .pc-stats span { margin: 0; }
  .pc-tally { font-size: 12px; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .pc-tally li.pc-empty { grid-column: 1 / -1; }
  .pc-best { margin: 5px 0 0; }
  .pc-reset { margin-top: 5px; padding: 5px 10px; }
  .pc-btns { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); margin-top: auto; padding-top: 6px; gap: 10px; }
  .pc-btn { flex: 1 1 0; min-height: 54px; padding: 5px 10px 6px; }
  .pc-btn b { font-size: 14px; }
  .pc-studio.spinning .pc-host { transform: rotate(4deg) translateX(3%); }
}