/* Crystal Keep Klasse 5 · Runde 3 · Turm-Saison und großes Finale (10.11.2026) */

/* ---------- Stage moment banner (inside the tower view) ---------- */
.ck-season-banner {
  position: absolute; z-index: 5; left: 3%; top: 7%;
  display: grid; justify-items: center; gap: .35rem; width: min(430px, 37%);
  padding: .8rem 1.6rem 1rem; border-radius: 18px; pointer-events: none; text-align: center;
  color: #f7fffd; background: linear-gradient(180deg, #0d1b2fe8, #121c38d8);
  border: 1px solid #8ff0e37a; box-shadow: 0 0 0 1px #0a1220, 0 14px 40px #050b16b0, inset 0 0 26px #5fe8d626;
}
.ck-season-banner[hidden] { display: none; }
.ck-season-kicker { color: #9ff3e8; font: 800 clamp(.95rem, 1.25vw, 1.25rem)/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.ck-season-banner strong { font: 800 clamp(1.4rem, 2.2vw, 2.3rem)/1.12 Georgia, serif; letter-spacing: .01em; text-shadow: 0 2px 10px #000a; }
.ck-season-pips { display: flex; gap: .45rem; }
.ck-season-pips i { width: 15px; height: 15px; rotate: 45deg; border-radius: 3px; border: 1px solid #8ff0e380; background: #10202f; }
.ck-season-pips i[data-on] { background: linear-gradient(135deg, #f4fffd, #5fe8d6); border-color: #e9fffb; box-shadow: 0 0 10px #5fe8d6; }
.ck-season-banner[data-stage="7"] { border-color: #ffe08a; box-shadow: 0 0 0 1px #0a1220, 0 14px 40px #050b16b0, inset 0 0 30px #ffe08a33; }
@media (prefers-reduced-motion: no-preference) {
  .ck-season-banner.is-in { animation: ck-banner-in .55s cubic-bezier(.2,.9,.25,1.25) both; }
  .ck-season-banner.is-in .ck-season-pips i[data-new] { animation: ck-pip 1s .35s ease-out both; }
  .ck-season-banner.is-out { animation: ck-banner-out .4s ease-in both; }
  @keyframes ck-banner-in { from { opacity: 0; translate: -18px 0; scale: .92; } }
  @keyframes ck-banner-out { to { opacity: 0; translate: -10px 0; } }
  @keyframes ck-pip { 0% { scale: .3; background: #fff; box-shadow: 0 0 0 #fff; } 55% { scale: 1.6; box-shadow: 0 0 22px #fff; } }
}

/* ---------- Cockpit button ---------- */
#grandFinale[data-ready] { color: #fff1bc; border-color: #e1c27e; box-shadow: 0 0 16px #e3c17866; }
#grandFinale[data-celebrated] { color: #ffe9a6; border-color: #c9a85a; }
@media (prefers-reduced-motion: no-preference) {
  #grandFinale[data-ready] { animation: ck-finale-ready 2.4s ease-in-out infinite; }
  @keyframes ck-finale-ready { 50% { box-shadow: 0 0 26px #ffd98aa8; } }
}

/* ---------- Confirmation (teacher, German) ---------- */
.finale-confirm { width: min(560px, 92vw); }
.finale-confirm h2 { margin: 0 0 .6rem; }
.finale-confirm-lead { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.4; }
.finale-confirm-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: 10px; background: #0d1a2a99; border: 1px solid #a7bfd53a; }
.finale-confirm-facts dt { color: #b9cad8; font-size: .9rem; }
.finale-confirm-facts dd { margin: 0; font-weight: 750; color: #fff4dc; }
.finale-confirm-note { margin: 0 0 .55rem; color: #c6d5e2; font-size: .86rem; line-height: 1.35; }
.finale-confirm-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .9rem; }

/* ---------- Full-screen finale ---------- */
#towerScreen[data-finale] #towerViewport {
  position: fixed; inset: 0; z-index: 60; min-height: 0; border: 0; border-radius: 0; box-shadow: none;
}
#towerScreen[data-finale] #towerZoomControls,
#towerScreen[data-finale] .tower-skip-hint,
#towerScreen[data-finale] .area-reveal,
#towerScreen[data-finale] .ck-season-banner { display: none; }
.finale-stage { position: fixed; inset: 0; z-index: 61; pointer-events: none; color: #fffaf0; font-family: system-ui, sans-serif; }
.finale-stage[hidden] { display: none; }
.finale-skip {
  position: absolute; top: 18px; right: 20px; pointer-events: auto;
  padding: .5rem .95rem; border-radius: 999px; border: 1px solid #e8cf9a70;
  background: #0e1a2bcc; color: #f6e7c6; font: 700 .9rem/1.2 system-ui, sans-serif;
}
.finale-skip:hover, .finale-skip:focus-visible { background: #1b2c44; color: #fff; }
.finale-skip[hidden] { display: none; }
.finale-cards { position: absolute; inset: 0; display: grid; place-items: center; }
.finale-card {
  grid-area: 1 / 1; display: grid; justify-items: center; gap: .6rem; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s;
}
.finale-card[data-on] { opacity: 1; visibility: visible; transition: opacity .7s ease; pointer-events: auto; }
.finale-results, .finale-award {
  width: min(1180px, 88vw); padding: clamp(18px, 3vh, 36px) clamp(20px, 4vw, 56px);
  border-radius: 28px; background: linear-gradient(180deg, #0b1628e6, #141b3ae0);
  border: 1px solid #8ff0e366; box-shadow: 0 30px 80px #02060fcc, inset 0 0 50px #5fe8d61f;
}
.finale-kicker { margin: 0; color: #9ff3e8; font: 800 clamp(1.1rem, 1.8vw, 1.8rem)/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.finale-versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 3vw, 60px); width: 100%; }
.finale-team { display: grid; justify-items: center; gap: .1rem; padding: .6rem; border-radius: 20px; }
.finale-team[data-faction="A"] { --team: #efb94e; }
.finale-team[data-faction="B"] { --team: #b98bfa; }
.finale-team[data-leading] { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--team) 28%, transparent), transparent 70%); }
.finale-crest { width: clamp(80px, 11vh, 132px); height: auto; filter: drop-shadow(0 6px 16px #000a); }
.finale-team h3 { margin: 0; color: var(--team); font: 800 clamp(1.6rem, 2.8vw, 2.8rem)/1 Georgia, serif; }
.finale-wins { color: #fff; font: 900 clamp(3.6rem, 8vh, 6rem)/1 Georgia, serif; text-shadow: 0 0 24px var(--team); }
.finale-team small { color: #e9dfcd; font: 700 clamp(1rem, 1.5vw, 1.4rem)/1 system-ui, sans-serif; }
.finale-vs { color: #ffe9b0; font: 900 clamp(1.6rem, 3vw, 3rem)/1 Georgia, serif; }
.finale-winner { margin: .2rem 0 0; font: 800 clamp(1.8rem, 3.4vw, 3.4rem)/1.1 Georgia, serif; color: #fff4d6; text-shadow: 0 3px 16px #000c; }
.finale-best { display: flex; align-items: center; gap: .55rem; margin: 0; font: 700 clamp(1.1rem, 1.8vw, 1.7rem)/1.2 system-ui, sans-serif; color: #e8f4ff; }
.finale-best .roster-emblem { position: relative; display: inline-block; width: 2.2em; height: 2.2em; overflow: hidden; border-radius: 50%; }
.finale-best .roster-emblem span { position: absolute; background-size: 300% 200%; }
.finale-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2vw, 34px); margin: .4rem 0 0; padding: 0; list-style: none; }
.finale-facts li { display: grid; justify-items: center; min-width: 9em; padding: .5rem 1rem; border-radius: 14px; background: #ffffff10; border: 1px solid #ffffff1f; }
.finale-facts b { font: 900 clamp(2rem, 4vw, 3.6rem)/1 Georgia, serif; color: #9ff3e8; }
.finale-facts span { font: 700 clamp(.95rem, 1.4vw, 1.3rem)/1.2 system-ui, sans-serif; color: #dce8f2; }
.finale-award { width: min(760px, 86vw); }
.finale-medal { display: grid; place-items: center; width: clamp(180px, 32vh, 300px); aspect-ratio: 1; }
.finale-medal .finale-medal-art { width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 10px 30px #000b); }
.finale-medal-name { margin: 0; font: 900 clamp(2.4rem, 5vw, 4.6rem)/1 Georgia, serif; color: #fff1c4; text-shadow: 0 0 28px #ffd77a80; }
.finale-award[data-medal="spark"] .finale-medal-name { color: #ffd1a0; text-shadow: 0 0 26px #ff9f5a80; }
.finale-award[data-medal="storm"] .finale-medal-name { color: #eaf6ff; text-shadow: 0 0 26px #9ff3ff90; }
.finale-medal-line { margin: 0; font: 700 clamp(1.3rem, 2.4vw, 2.2rem)/1.2 system-ui, sans-serif; color: #f2ecdf; }
.finale-power { margin: .2rem 0 0; color: #9ff3e8; font: 800 clamp(1rem, 1.5vw, 1.4rem)/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.finale-class6 { position: absolute; inset: 0; align-content: start; justify-items: center; }
.finale-teaser-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finale-teaser-drawn svg { width: 100%; height: 100%; display: block; }
.finale-class6::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #050a1aa8 0%, #050a1a10 46%, #050a1a00 70%, #050a1a99 100%); }
.finale-class6-text { position: relative; z-index: 1; display: grid; justify-items: center; gap: .5rem; margin-top: 8vh; padding: 0 4vw; }
.finale-class6 .finale-kicker { color: #ffe9b0; font-size: clamp(1.6rem, 3vw, 3rem); letter-spacing: .08em; text-transform: none; font-family: Georgia, serif; }
.finale-question { margin: 0; font: 900 clamp(2.8rem, 6.4vw, 6.4rem)/1.04 Georgia, serif; color: #fff; text-shadow: 0 4px 30px #1a0f40, 0 0 40px #9ff3e860; }
.finale-strip { display: flex; align-items: center; gap: .7rem; margin: .5rem 0 0; padding: .45rem 1rem; border-radius: 999px; background: #0b1426b8; border: 1px solid #ffffff2a; font: 700 clamp(.95rem, 1.4vw, 1.3rem)/1.2 system-ui, sans-serif; color: #f2ecdf; }
.finale-strip-medal { width: 46px !important; height: 46px !important; }
.finale-controls { position: absolute; z-index: 2; right: 24px; bottom: 22px; display: flex; gap: .6rem; }
.finale-controls button { font-size: .95rem; }
@media (prefers-reduced-motion: no-preference) {
  .finale-card[data-on] .finale-kicker { animation: ck-rise .7s .1s ease-out both; }
  .finale-card[data-on] .finale-team { animation: ck-rise .8s .3s cubic-bezier(.2,.9,.25,1.2) both; }
  .finale-card[data-on] .finale-team + .finale-vs + .finale-team { animation-delay: .5s; }
  .finale-card[data-on] .finale-winner { animation: ck-pop .8s 1.1s cubic-bezier(.2,.9,.25,1.3) both; }
  .finale-card[data-on] .finale-facts li { animation: ck-rise .6s calc(1.6s + var(--i, 0) * .15s) ease-out both; }
  .finale-card[data-on] .finale-medal { animation: ck-medal 1.4s .2s cubic-bezier(.2,.9,.25,1.15) both; }
  .finale-card[data-on] .finale-medal-name { animation: ck-pop .8s .9s cubic-bezier(.2,.9,.25,1.3) both; }
  .finale-card[data-on] .finale-question { animation: ck-pop 1s .5s cubic-bezier(.2,.9,.25,1.2) both; }
  .finale-card[data-on] .finale-teaser-art { animation: ck-teaser 9s ease-out both; }
  @keyframes ck-rise { from { opacity: 0; translate: 0 26px; } }
  @keyframes ck-pop { from { opacity: 0; scale: .7; } }
  @keyframes ck-medal { 0% { opacity: 0; scale: .2; rotate: -30deg; } 60% { opacity: 1; scale: 1.12; rotate: 6deg; } 100% { scale: 1; rotate: 0deg; } }
  @keyframes ck-teaser { from { scale: 1.08; } }
}
.finale-facts li:nth-child(2) { --i: 1; }
.finale-facts li:nth-child(3) { --i: 2; }

/* ---------- Tower list: area marks, "New lands ahead!", larger type for the projector ---------- */
.map-floor { grid-template-columns: 44px minmax(0, 1fr) 22px 24px; }
.map-area-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mark, #d8e4f0); box-shadow: 0 0 0 1px #0b1524, 0 0 8px color-mix(in srgb, var(--mark, #d8e4f0) 55%, transparent); }
.map-area-mark svg { width: 15px; height: 15px; fill: none; stroke: #172231; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.map-floor:not([data-area-open]) .map-area-mark { background: #2a3a50; box-shadow: 0 0 0 1px #0b1524; }
.map-floor:not([data-area-open]) .map-area-mark svg { stroke: #8fa1b8; }
.map-new-lands {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0; padding: 0 8px 0 10px; min-height: 18px;
  border-radius: 6px; flex: 0 0 auto; color: #172231; font: 900 .74rem/1.1 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--mark), color-mix(in srgb, var(--mark) 30%, transparent) 70%, transparent);
}
.map-new-lands span::before { content: "↑ "; }
.map-new-lands .map-area-worlds { gap: 3px; }
.map-new-lands .map-area-worlds svg { width: 16px; height: 16px; padding: 2px; }
.map-new-lands .map-area-worlds::before { display: none; }
.map-new-lands:not([data-area-open]) { color: #fff1cf; background: linear-gradient(90deg, #6b4b1d, #6b4b1d40 70%, transparent); box-shadow: inset 0 0 0 1px #f3cf8a66; }
@media (prefers-reduced-motion: no-preference) {
  .map-new-lands:not([data-area-open]) span { animation: ck-new-lands 2.6s ease-in-out infinite; }
  @keyframes ck-new-lands { 50% { color: #ffe7a8; text-shadow: 0 0 8px #ffcf6a; } }
}
#mapSections .map-kid { font-size: 1.15rem; }
#mapSections .map-names .map-topic { font-size: .77rem; }
#mapSections .map-number { font-size: 1.04rem; }
#mapSections .map-floor { min-height: 36px; flex-basis: 36px; }
#mapSections { gap: clamp(6px, 1vh, 12px); }
@media (max-height: 770px) {
  #mapSections .map-kid { font-size: 1.04rem; }
  #mapSections .map-names .map-topic { font-size: .72rem; }
}