/* Gemeinsame Bausteine der Finals (public/js/finale-ui.js): Schlusszeremonie, Leben, Schilder */
.fin-lives { display: inline-flex; gap: 0.05em; line-height: 1; }
.fin-lives i { font-style: normal; opacity: 0.35; filter: grayscale(1); }
.fin-badge { display: inline-block; padding: 0.05em 0.5em; border-radius: 99px; background: var(--ink); color: #fff; font-family: var(--font-head); font-size: 0.75em; letter-spacing: 0.04em; border: 2px solid #fff; box-shadow: var(--shadow-sm); white-space: nowrap; }
.fin-badge.out { background: var(--red); }
.fin-badge.gold { background: var(--gold); color: var(--ink); border-color: var(--ink); }

.fin-ceremony { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1rem; background: radial-gradient(ellipse at 50% 30%, rgba(255, 197, 61, 0.25), rgba(12, 3, 36, 0.82) 70%); animation: fadeIn 0.5s both; }
.fin-ceremony .fc-box { width: min(46rem, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 0.6rem; }
.fin-ceremony .fc-head { text-align: center; font-family: var(--font-head); font-size: clamp(1.6rem, 3.4vw, 2.8rem); color: var(--gold); -webkit-text-stroke: 0.04em var(--ink); paint-order: stroke fill; text-shadow: 0 0.07em 0 var(--ink); animation: slideDown 0.5s var(--ease-back) both; }
.fin-ceremony .fc-rows { display: flex; flex-direction: column; gap: 0.45rem; min-height: 0; overflow: hidden; }
.fin-ceremony .fc-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.9rem; border-radius: 18px; background: var(--paper); color: var(--ink); border: var(--outline); box-shadow: var(--shadow-sm); opacity: 0; transform: translateX(-2rem) scale(0.96); transition: opacity 0.35s, transform 0.5s var(--ease-back); }
.fin-ceremony .fc-row.in { opacity: 1; transform: none; }
.fin-ceremony .fc-row.top { background: linear-gradient(135deg, #fff3c4, var(--gold)); padding: 0.7rem 1rem; transform: scale(0.7); }
.fin-ceremony .fc-row.top.in { transform: scale(1.04); }
.fin-ceremony .fc-ic { font-size: 1.9rem; line-height: 1; }
.fin-ceremony .fc-row.top .fc-ic { font-size: 2.6rem; }
.fin-ceremony .fc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fin-ceremony .fc-txt b { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.fin-ceremony .fc-row.top .fc-txt b { font-size: 1.7rem; }
.fin-ceremony .fc-txt small { font-weight: 800; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-ceremony .fc-pts { font-family: var(--font-head); font-size: 1.6rem; color: #15803d; white-space: nowrap; }

/* Handy: eigene Ehrungen im Ergebnis */
.honors { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; max-width: 24rem; }
.honors .hn { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; border-radius: 14px; background: linear-gradient(135deg, #fff3c4, var(--gold)); color: var(--ink); border: var(--outline); font-weight: 800; animation: pop 0.5s var(--ease-back) both; }
.honors .hn .ic { font-size: 1.4rem; }
.honors .hn span:nth-child(2) { flex: 1; }
.honors .hn b { font-family: var(--font-head); }
.qbody:has(> .fin-ceremony) { position: relative; }
/* Während der Zeremonie tritt die Bühne darunter ganz zurück */
:has(> .fin-ceremony) > :not(.fin-ceremony) { opacity: 0; transition: opacity 0.6s; }

/* ------------------------------------------------------------ Die Wissenspyramide (fin-pyramid-host.js) */
.pyr-head { display: flex; justify-content: center; align-items: center; gap: 0.8rem; flex: none; font-family: var(--font-head); font-size: clamp(1.1rem, calc(var(--vq) * 2.6), 1.8rem); }
.pyr-head .pyr-stufe { padding: 0.15em 0.8em; border-radius: 99px; background: var(--rc); color: var(--ink); border: var(--outline); box-shadow: var(--shadow-sm); }
.pyr-head .pyr-val { color: var(--gold); -webkit-text-stroke: 0.04em var(--ink); paint-order: stroke fill; }
.pyr-q { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1rem; }
.pyr-q.readying { justify-content: center; }
.pyr-q.readying .qcard { font-size: clamp(2rem, 3.2vw, 4rem); padding: 2rem 2.4rem; }
.pyr-q .opts { max-height: none; }
.pyr-band { flex: none; height: clamp(7.5rem, calc(var(--vq) * 19), 13rem); display: flex; align-items: flex-end; gap: 0.6rem; }
.pyr-scree { flex: none; width: clamp(5rem, 11%, 10rem); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 14px; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 10px, transparent 10px 20px); }
.pyr-scree .pyr-lbl { font-size: 1.3rem; opacity: 0.7; }
.pyr-scree .pyr-who { display: flex; flex-wrap: wrap-reverse; justify-content: center; }
.pyr-steps { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 0.35rem; }
.pyr-col { flex: 1 1 0; min-width: 0; transition: flex-grow 0.6s var(--ease-out); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.pyr-col .pyr-block { width: 100%; height: calc(22% + var(--k) * 8%); display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 10px 10px 4px 4px; background: linear-gradient(#e8c58a, #b98a4a); color: var(--ink); border: var(--outline); box-shadow: var(--shadow-sm); line-height: 1; transition: box-shadow 0.4s, transform 0.4s; }
.pyr-col.base .pyr-block { background: linear-gradient(#a7c6a0, #6f9a66); }
.pyr-col:last-child .pyr-block { background: linear-gradient(#ffffff, #c8d8ef); }
.pyr-col .pyr-block b { font-family: var(--font-head); font-size: 1.2rem; }
.pyr-col .pyr-block small { font-weight: 900; font-size: 0.85rem; }
.pyr-col.cur .pyr-block { box-shadow: 0 0 0 4px var(--gold), 0 0 28px 6px rgba(255, 197, 61, 0.6); transform: translateY(-3px); }
.pyr-col .pyr-who { display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; max-width: 100%; padding-bottom: 0.2rem; }
.pyr-cl { display: flex; flex-direction: column; align-items: center; margin: 0 calc(var(--s, 40px) * -0.11); position: relative; }
.pyr-who[style*="--s"] .pyr-cl .avatar { --size: var(--s) !important; }
.pyr-cl .pyr-r { position: relative; z-index: 1; font-size: clamp(0.55rem, calc(var(--s, 40px) * 0.3), 0.8rem); line-height: 1; margin-top: -0.35rem; padding: 0.1rem 0.25rem; border-radius: 99px; background: var(--ink); white-space: nowrap; }
.pyr-cl .pyr-r:empty, .pyr-who.tiny .pyr-r { display: none; }
.pyr-ropes i { font-style: normal; opacity: 0.25; filter: grayscale(1); }
.pyr-cl.up { animation: pyrUp 0.7s var(--ease-back); }
.pyr-cl.out .avatar { filter: grayscale(0.85); opacity: 0.75; transform: rotate(-12deg); }
.pyr-cl.fall { animation: pyrFall 0.7s ease-in; }
@keyframes pyrUp { 0% { transform: translateY(0); } 40% { transform: translateY(-1.2rem); } 100% { transform: none; } }
@keyframes pyrFall { 0% { transform: rotate(0); } 50% { transform: rotate(-30deg) translateY(0.6rem); } 100% { transform: none; } }
/* Handy */
.pyrme { align-self: center; padding: 0.3rem 0.9rem; border-radius: 99px; background: var(--paper); color: var(--ink); border: var(--outline); font-weight: 800; text-align: center; }
.pyrme.out { background: #ffe1e1; }