/* ================================================================ Finale „Filme & Serien“: Die Oscar-Nacht
   Show: public/js/fin-oscar-host.js (Regal, Kategorie, Verleihung), Handy: public/js/fin-oscar-play.js.
   Alles bemisst sich am freien Platz der Bühne (--vq aus --qbh), nie am Fenster. */

/* ------------------------------------------------------------ Bühne: Regal oben, darunter die Kategorie */
.qbody.osc-body { gap: min(0.6rem, calc(0.9 * var(--vq))); }
.osc-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.osc-stage > .osc-inner { flex: 1; min-height: 0; }
/* die Bühne der Art braucht keinen eigenen Abstand nach unten (auch nicht mit PC-Antwortleiste – den hat .qbody schon) */
.screen .qbody.osc-body > .osc-stage > .qbody.osc-inner { padding-bottom: 0; }

/* Kategorie im Kopf (statt „Frage x/y“) */
.qhead .osc-chip { display: flex; align-items: center; gap: 0.7rem; min-width: 0; max-width: 100%; height: var(--chip-h); padding: 0 1rem; border-radius: var(--chip-r); background: linear-gradient(180deg, #3a0f17, #1d0609); border: 2px solid var(--gold); color: var(--gold); font-family: var(--font-head); font-size: 1.2rem; white-space: nowrap; box-shadow: 0 0 14px rgba(245, 197, 66, 0.3); }
.qhead .osc-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.qhead .osc-dots { display: inline-flex; gap: 0.3rem; flex: none; }
.qhead .osc-dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(245, 197, 66, 0.25); }
.qhead .osc-dots i.done { background: rgba(245, 197, 66, 0.75); }
.qhead .osc-dots i.cur { background: var(--gold); box-shadow: 0 0 0 2px #fff; }

/* Oscar-Regal: dunkles Holzbrett mit Goldkante, Statuetten stehen darauf */
.osc-shelf { --sh: clamp(2.5rem, calc(6 * var(--vq)), 4rem); flex: none; height: var(--sh); display: flex; align-items: flex-end; gap: 0.3rem 1.1rem; padding: 0 0.9rem 0.25rem; overflow: hidden; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, rgba(58, 29, 16, 0.55), rgba(36, 18, 10, 0.92) 70%); border-bottom: 0.32rem solid #b8862b; box-shadow: inset 0 -0.45rem 0 rgba(255, 220, 140, 0.18), 0 4px 0 rgba(0, 0, 0, 0.5); }
.osc-shelf .osc-lbl { flex: none; align-self: center; display: flex; align-items: center; gap: 0.35rem; font-size: calc(var(--sh) * 0.45); line-height: 1; }
.osc-shelf .osc-lbl small { font-family: var(--font-head); font-size: max(0.62rem, 0.5em); color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }
.osc-shelf .osc-empty { align-self: center; font-weight: 800; font-style: italic; opacity: 0.6; white-space: nowrap; font-size: clamp(0.85rem, calc(1.8 * var(--vq)), 1.1rem); }
.osc-slot { flex: none; display: flex; align-items: flex-end; gap: 0.2rem; }
.osc-slot .avatar { --size: calc(var(--sh) * 0.62) !important; align-self: center; }
.osc-slot .osc-sts { display: flex; align-items: flex-end; }
.osc-shelf .osc-statue { height: calc(var(--sh) * 0.86); width: auto; aspect-ratio: 2 / 5; margin: 0 -0.12em; filter: drop-shadow(0 0 4px rgba(255, 210, 90, 0.55)); }
.osc-shelf .osc-statue.new { opacity: 0; }
.osc-shelf .osc-statue.land { animation: oscLand 0.55s var(--ease-back); }
.osc-slot .osc-nm { align-self: center; font-weight: 900; font-size: max(0.62rem, calc(var(--sh) * 0.28)); color: #ffe9a6; white-space: nowrap; }
@keyframes oscLand { 0% { transform: scale(1.6) translateY(-30%); filter: drop-shadow(0 0 14px #fff3c4); } 100% { transform: none; } }

/* ------------------------------------------------------------ Gemeinsam: Vorhang, Statuette im Flug */
.osc-curtain { position: absolute; top: 0; bottom: 0; width: 17%; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, var(--velvet, #9b1428) 0 1.6rem, var(--velvet-d, #4c0612) 2.6rem, var(--velvet, #9b1428) 3.4rem); box-shadow: inset 0 -2rem 2rem rgba(0, 0, 0, 0.45); }
.osc-curtain.l { left: 0; border-radius: 0 0 40% 0; animation: oscCurtL 0.7s cubic-bezier(.2, .8, .2, 1) both; }
.osc-curtain.r { right: 0; border-radius: 0 0 0 40%; animation: oscCurtR 0.7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes oscCurtL { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes oscCurtR { from { transform: translateX(100%); } to { transform: none; } }
.osc-fly { position: fixed; z-index: 80; pointer-events: none; transform-origin: center; }
.osc-fly .osc-statue { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 12px rgba(255, 220, 120, 0.9)); }

/* ------------------------------------------------------------ Ansage der Kategorie */
.osc-title { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(255, 214, 120, 0.2), rgba(8, 2, 4, 0.94) 72%); animation: fadeIn 0.3s both; }
.osc-title.go { animation: oscTitleOut 0.6s ease-in forwards; }
.osc-tt { position: relative; z-index: 2; max-width: 64%; display: flex; flex-direction: column; align-items: center; gap: min(0.4rem, calc(0.8 * var(--vq))); padding: min(1.4rem, calc(2.6 * var(--vq))) min(2.6rem, 5%); text-align: center; border-radius: 20px; background: linear-gradient(180deg, #2c0c13, #12050a); border: 3px solid var(--gold); color: #fff; box-shadow: 0 0 0 0.45rem rgba(245, 197, 66, 0.18), var(--shadow); outline: 0.3rem dotted #ffe9a6; outline-offset: 0.55rem; animation: popIn 0.55s var(--ease-back) both, oscBulbs 0.9s steps(2) infinite; }
.osc-tt small { font-family: var(--font-head); color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; font-size: clamp(0.9rem, calc(2.2 * var(--vq)), 1.4rem); }
.osc-tt .osc-tt-ic { font-size: clamp(2.4rem, calc(10 * var(--vq)), 6rem); line-height: 1.05; animation: pop 0.6s 0.2s var(--ease-back) both; }
.osc-tt b { font-family: var(--font-marquee, var(--font-head)); font-weight: 400; font-size: clamp(1.9rem, calc(7.5 * var(--vq)), 4.8rem); line-height: 1.05; color: var(--gold); -webkit-text-stroke: 0.03em var(--ink); paint-order: stroke fill; text-shadow: 0 0.06em 0 var(--ink), 0 0 0.5em rgba(245, 197, 66, 0.45); }
.osc-tt span { font-weight: 800; opacity: 0.85; font-size: clamp(0.95rem, calc(2.3 * var(--vq)), 1.45rem); }
@keyframes oscTitleOut { to { opacity: 0; transform: translateY(-35%) scale(0.55); } }
@keyframes oscBulbs { 0% { outline-color: #ffe9a6; } 100% { outline-color: rgba(255, 233, 166, 0.35); } }

/* ------------------------------------------------------------ Die Verleihung */
.osc-award { position: absolute; inset: 0; z-index: 26; overflow: hidden; border-radius: 16px; background: radial-gradient(ellipse 70% 90% at 50% 0%, #2a0a10, #0a0306 75%); animation: fadeIn 0.4s both; }
.osc-award.out { animation: oscOut 0.4s ease-in forwards; }
@keyframes oscOut { to { opacity: 0; } }
/* roter Teppich und Spotlight */
.osc-carpet { position: absolute; left: 50%; bottom: 0; width: 46%; height: 42%; transform: translateX(-50%); background: linear-gradient(180deg, #7f0f1e, #c8102e); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); opacity: 0.75; }
.osc-spot { position: absolute; z-index: 1; left: 50%; top: -6%; width: 58%; height: 112%; margin-left: -29%; transform-origin: 50% 0; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 244, 210, 0.42), rgba(255, 244, 210, 0.05) 80%, transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); animation: oscSweep 3.2s ease-in-out infinite alternate; pointer-events: none; }
@keyframes oscSweep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.osc-award.won .osc-spot { animation: oscSpotOn 0.5s ease-out forwards; }
@keyframes oscSpotOn { to { transform: none; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 248, 225, 0.7), rgba(255, 244, 210, 0.12) 80%, transparent); } }

.osc-show { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: min(1.1rem, calc(2.2 * var(--vq))); padding: min(1rem, calc(2 * var(--vq))) 18%; text-align: center; }
.osc-h { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; transition: opacity 0.4s, transform 0.4s; }
.osc-h small { font-family: var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: #f6e3c0; font-size: clamp(0.9rem, calc(2.3 * var(--vq)), 1.5rem); }
.osc-h b { font-family: var(--font-marquee, var(--font-head)); font-weight: 400; font-size: clamp(1.7rem, calc(6.4 * var(--vq)), 4.2rem); line-height: 1.1; color: var(--gold); -webkit-text-stroke: 0.03em var(--ink); paint-order: stroke fill; text-shadow: 0 0.06em 0 var(--ink), 0 0 0.6em rgba(245, 197, 66, 0.5); animation: popIn 0.5s 0.2s var(--ease-back) both; }
.osc-h .osc-sind { opacity: 0; animation: fadeIn 0.4s 0.5s both; }

/* Nominierte */
.osc-noms { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: min(0.8rem, calc(1.4 * var(--vq))) min(1.4rem, calc(2.4 * var(--vq))); max-width: 100%; min-height: 0; transition: opacity 0.4s, transform 0.4s; }
.osc-nom { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; max-width: 9rem; opacity: 0; }
.osc-award.noms-in .osc-nom { animation: oscNomIn 0.5s var(--ease-back) both; animation-delay: calc(var(--i) * 150ms); }
.osc-nom .avatar { --size: clamp(40px, calc(9 * var(--vq)), 78px) !important; box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(245, 197, 66, 0.5); }
.osc-noms.many .osc-nom .avatar { --size: clamp(30px, calc(6.2 * var(--vq)), 52px) !important; }
.osc-nom b { font-family: var(--font-head); font-weight: 600; font-size: clamp(0.85rem, calc(2.1 * var(--vq)), 1.3rem); line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osc-nom small { font-weight: 900; font-size: clamp(0.75rem, calc(1.7 * var(--vq)), 1rem); color: #ffe9a6; white-space: nowrap; }
.osc-noms.many .osc-nom small { display: none; }
@keyframes oscNomIn { 0% { opacity: 0; transform: translateY(1.2rem) scale(0.5); } 100% { opacity: 1; transform: none; } }

/* Umschlag (oben Platz für die Karte, die beim Öffnen herausfährt): Rückseite (Hintergrund), Karte, Vordertasche, Lasche, Siegel */
.osc-env { --ew: clamp(9rem, calc(28 * var(--vq)), 17rem); position: relative; flex: none; width: var(--ew); margin-top: calc(var(--ew) / 1.6 * 0.5); aspect-ratio: 1.6; perspective: 600px; border-radius: 6px; background: linear-gradient(180deg, #c9a868, #b08a45); border: 3px solid var(--ink); box-shadow: var(--shadow); opacity: 0; transition: opacity 0.4s, transform 0.4s; }
.osc-award.noms-in .osc-env { animation: popIn 0.5s 0.3s var(--ease-back) both; }
.osc-env-card { position: absolute; z-index: 1; left: 7%; right: 7%; top: 8%; height: 80%; display: grid; place-items: center; padding: 0 0.4rem; border-radius: 4px; background: var(--paper, #fff7e6); color: var(--ink); font-family: var(--font-head); font-size: clamp(0.8rem, calc(2.1 * var(--vq)), 1.3rem); line-height: 1.1; transition: transform 0.6s 0.25s var(--ease-back); }
.osc-env-body { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, #ecd6a2, #d6b672); clip-path: polygon(0 34%, 50% 66%, 100% 34%, 100% 100%, 0 100%); }
.osc-env-flap { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 64%; transform-origin: 50% 0; background: linear-gradient(180deg, #d9bc7c, #c2a05c); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform 0.5s ease-in, z-index 0s 0.25s; }
.osc-env-seal { position: absolute; z-index: 4; left: 50%; top: 52%; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff6b6b, #a1101f); color: var(--gold); font-size: 1.1rem; border: 2px solid var(--ink); transition: opacity 0.3s, transform 0.3s; }
.osc-award.drum .osc-env { animation: oscShake 0.14s linear infinite; opacity: 1; }
.osc-award.open .osc-env { animation: none; opacity: 1; }
.osc-award.open .osc-env-flap { transform: rotateX(180deg); z-index: 0; }
.osc-award.open .osc-env-seal { opacity: 0; transform: scale(1.8); }
.osc-award.open .osc-env-card { transform: translateY(-62%); }
@keyframes oscShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg) translateY(-1px); } 75% { transform: rotate(2.5deg) translateY(1px); } }

/* Niemand nominiert */
.osc-none { display: flex; flex-direction: column; align-items: center; font-family: var(--font-head); font-size: clamp(1.6rem, calc(6 * var(--vq)), 3.6rem); color: #fff; opacity: 0; }
.osc-none small { font-family: var(--font-body, inherit); font-weight: 800; font-size: 0.4em; opacity: 0.8; }
.osc-award.empty .osc-none { animation: popIn 0.5s var(--ease-back) both; }

/* And the Oscar goes to … */
.osc-award.won .osc-noms, .osc-award.won .osc-env, .osc-award.won .osc-h .osc-sind { opacity: 0; transform: scale(0.85); animation: none; }
.osc-award.won .osc-h { transform: translateY(-0.4rem) scale(0.8); }
.osc-win { position: absolute; z-index: 3; left: 18%; right: 18%; top: calc(16 * var(--vq)); bottom: 0; display: flex; align-items: center; justify-content: center; gap: min(2.4rem, 4%); opacity: 0; pointer-events: none; }
.osc-award.won .osc-win { opacity: 1; }
.osc-win .osc-trophy { flex: none; height: clamp(7rem, calc(34 * var(--vq)), 21rem); width: auto; aspect-ratio: 2 / 5; filter: drop-shadow(0 0 1.4rem rgba(255, 214, 110, 0.85)); animation: oscTrophy 0.9s var(--ease-back) both; }
.osc-wbox { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: min(0.35rem, calc(0.7 * var(--vq))); animation: popIn 0.6s 0.15s var(--ease-back) both; }
.osc-wbox .avatar { --size: clamp(64px, calc(17 * var(--vq)), 150px) !important; box-shadow: 0 0 0 0.3rem var(--gold), 0 0 2.2rem rgba(255, 214, 110, 0.8); }
.osc-wbox b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-marquee, var(--font-head)); font-weight: 400; font-size: clamp(1.8rem, calc(6.8 * var(--vq)), 4.6rem); line-height: 1.1; color: var(--gold); -webkit-text-stroke: 0.03em var(--ink); paint-order: stroke fill; text-shadow: 0 0.06em 0 var(--ink), 0 0 0.6em rgba(245, 197, 66, 0.55); }
.osc-wbox small { font-weight: 800; font-size: clamp(0.9rem, calc(2.2 * var(--vq)), 1.35rem); color: #f6e3c0; }
.osc-wbox .osc-wn { padding: 0.1em 0.8em; border-radius: 99px; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); font-family: var(--font-head); font-size: clamp(0.85rem, calc(2 * var(--vq)), 1.2rem); animation: pop 0.5s 0.6s var(--ease-back) both; }
@keyframes oscTrophy { 0% { opacity: 0; transform: translateY(40%) rotate(-12deg) scale(0.6); } 100% { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ Handy */
.oscv .osc-pcat { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-radius: 99px; background: linear-gradient(90deg, #2a0c12, #4c0612); border: 2px solid var(--gold); color: var(--gold); font-family: var(--font-head); font-size: 15px; line-height: 1.2; }
.oscv .osc-pcat span { opacity: 0.85; white-space: nowrap; }
.oscv .osc-pcat b { font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultv .osc-pr { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 24rem; padding: 10px 14px; border-radius: 16px; background: var(--paper); color: var(--ink); border: var(--outline); font-size: 30px; line-height: 1; text-align: left; animation: pop 0.5s 0.3s var(--ease-back) both; }
.resultv .osc-pr span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resultv .osc-pr b { font-family: var(--font-head); font-size: 18px; line-height: 1.15; }
.resultv .osc-pr small { font-weight: 800; font-size: 13px; opacity: 0.75; }
.resultv .osc-pr small:empty { display: none; }
.resultv .osc-pr.win { background: linear-gradient(135deg, #fff3c4, var(--gold)); box-shadow: 0 0 22px rgba(245, 197, 66, 0.6); }
.resultv .osc-pr.nom { background: linear-gradient(135deg, #fff, #f6e3c0); }
.resultv .osc-pshelf { font-weight: 800; font-size: 14px; opacity: 0.9; }