/* Meta-Ebene Klasse 5 (10.11.2026): transitions, tower light, loader, tutorial,
   Kristallfront labels and the awakening. All motion sits behind
   prefers-reduced-motion: no-preference; the quiet version is complete without it. */

/* ---------- Screens during a transition ---------- */
.meta-leaving {
  position: fixed !important; inset: 0 0 auto; z-index: 30; pointer-events: none;
  min-height: 100dvh;
}
#towerScreen.meta-leaving { margin-inline: auto; width: 100%; }
#roundScreen { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* Menu → tower: the camera flies along the path into the mist, the tower forms. */
  [data-meta-leave="into"] { animation: meta-menu-leave 760ms cubic-bezier(.45,0,.7,.4) both; }
  [data-meta-leave="into"] .menu-painting { transform-origin: 52% 64%; animation: meta-menu-dolly 760ms cubic-bezier(.5,.02,.72,.42) both; }
  [data-meta-leave="into"] .menu-hero { animation: meta-hero-leave 300ms ease-in both; }
  [data-meta-leave="into"] .menu-header { animation: meta-hero-leave 240ms ease-in both; }
  [data-meta-leave="into"]::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 52% 62%, #d9ecee 0%, #9dbec7d0 24%, #36526500 70%);
    animation: meta-mist 760ms ease-in both;
  }
  @keyframes meta-menu-leave { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes meta-menu-dolly { to { scale: 1.42; } }
  @keyframes meta-hero-leave { to { opacity: 0; scale: .94; } }
  @keyframes meta-mist { 0% { opacity: 0; } 70% { opacity: .9; } 100% { opacity: 1; } }

  [data-meta-arrive="into"] { animation: meta-tower-arrive 760ms cubic-bezier(.2,.7,.2,1) both; }
  [data-meta-arrive="into"] .ck-tower-camera-canvas { animation: meta-canvas-arrive 900ms cubic-bezier(.16,.7,.22,1) both; }
  [data-meta-arrive="into"] .teacher-cockpit { animation: meta-cockpit-in 620ms 260ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes meta-tower-arrive { 0%, 35% { opacity: 0; scale: 1.04; } 100% { opacity: 1; scale: 1; } }
  @keyframes meta-canvas-arrive { from { scale: 1.16; } }
  @keyframes meta-cockpit-in { from { opacity: 0; translate: 28px 0; } }

  /* Tower → menu: the camera backs out of the tower into the painting. */
  [data-meta-leave="out"] { animation: meta-tower-leave 640ms cubic-bezier(.5,0,.8,.5) both; }
  [data-meta-leave="out"] .ck-tower-camera-canvas { animation: meta-canvas-recede 640ms ease-in both; }
  @keyframes meta-tower-leave { 0%, 30% { opacity: 1; } 100% { opacity: 0; scale: .965; } }
  @keyframes meta-canvas-recede { to { scale: .9; } }
  [data-meta-arrive="out"] .menu-painting { transform-origin: 52% 64%; animation: meta-menu-return 900ms cubic-bezier(.18,.7,.24,1) both; }
  [data-meta-arrive="out"] .menu-hero { animation: meta-hero-arrive 560ms 300ms ease-out both; }
  @keyframes meta-menu-return { from { scale: 1.3; } }
  @keyframes meta-hero-arrive { from { opacity: 0; translate: 0 10px; } }

  /* Tower → race: the camera dives into the chosen floor's door. */
  [data-meta-leave="dive"] { animation: meta-dive-leave 820ms linear both; }
  [data-meta-leave="dive"] #towerViewport {
    transform-origin: var(--meta-x) var(--meta-y);
    animation: meta-dive-frame 820ms cubic-bezier(.58,0,.78,.3) both;
  }
  [data-meta-leave="dive"] .ck-tower-camera-canvas {
    transform-origin: var(--meta-x) var(--meta-y);
    animation: meta-dive-canvas 820ms cubic-bezier(.6,0,.75,.32) both;
  }
  [data-meta-leave="dive"] #towerViewport::after {
    background: radial-gradient(circle at var(--meta-x) var(--meta-y), #fff2cf 0%, #ffcf86c0 9%, #ffb46a00 34%);
    mix-blend-mode: screen; animation: meta-door-light 820ms ease-in both;
  }
  [data-meta-leave="dive"] .teacher-cockpit, [data-meta-leave="dive"] .series-header,
  [data-meta-leave="dive"] #towerZoomControls { animation: meta-cockpit-out 300ms ease-in both; }
  @keyframes meta-dive-leave { 0%, 64% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes meta-dive-frame { to { scale: 1.75; border-radius: 0; } }
  @keyframes meta-dive-canvas { to { scale: 2.1; } }
  @keyframes meta-door-light { 0% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes meta-cockpit-out { to { opacity: 0; translate: 30px 0; } }
  [data-meta-arrive="dive"] { animation: meta-round-arrive 820ms linear both; }
  @keyframes meta-round-arrive { 0%, 50% { opacity: 0; } 100% { opacity: 1; } }

  /* Race → tower: flight back out of the door, the tower opens around it. */
  [data-meta-arrive="back"] #towerViewport {
    transform-origin: var(--meta-x) var(--meta-y);
    animation: meta-back-frame 900ms cubic-bezier(.16,.66,.24,1) both;
  }
  [data-meta-arrive="back"] .ck-tower-camera-canvas {
    transform-origin: var(--meta-x) var(--meta-y);
    animation: meta-back-canvas 900ms cubic-bezier(.16,.66,.24,1) both;
  }
  [data-meta-arrive="back"] .teacher-cockpit, [data-meta-arrive="back"] .series-header {
    animation: meta-cockpit-in 560ms 320ms cubic-bezier(.2,.7,.2,1) both;
  }
  [data-meta-arrive="back"]::before {
    content: ""; position: fixed; inset: 0; z-index: 25; pointer-events: none;
    background: radial-gradient(circle at var(--meta-cx) var(--meta-cy), #fff0c9 0%, #f3c47a80 7%, #101926 34%);
    animation: meta-veil-out 620ms cubic-bezier(.3,.1,.3,1) both;
  }
  @keyframes meta-back-frame { from { scale: 1.75; border-radius: 0; } }
  @keyframes meta-back-canvas { from { scale: 2.1; } }
  @keyframes meta-veil-out { from { opacity: 1; } to { opacity: 0; } }
}

/* ---------- Tower and menu share the painting's light ---------- */
#towerScreen { position: relative; isolation: isolate; }
#towerScreen::after {
  content: ""; position: fixed; inset: -24px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 8% 18%, #f2b46a26, transparent 62%),
    linear-gradient(180deg, #0c1828d9, #0b1524ee 70%), url("art/klasse5-menue.jpg") center / cover no-repeat;
  filter: blur(14px) saturate(1.05);
}
#towerViewport::before, #towerViewport::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
}
#towerViewport::before {
  z-index: 1;
  /* Same sun as the menu painting: warm from the upper left, cool mist at the lower right. */
  background: radial-gradient(ellipse 75% 60% at 4% 12%, #ffc77a40, #ffb76a14 45%, transparent 70%),
    linear-gradient(200deg, transparent 52%, #1d3c5233 100%);
  mix-blend-mode: soft-light;
}
#towerViewport::after {
  z-index: 2;
  box-shadow: inset 0 0 90px 18px #08111ea8, inset 0 -40px 60px -30px #0a1424b3;
}
#towerZoomControls { z-index: 4; }

.tower-skip-hint {
  position: absolute; z-index: 4; left: 50%; bottom: 18px; translate: -50% 0; margin: 0;
  padding: .5rem .95rem; border: 1px solid #e8cf9a70; border-radius: 999px;
  background: #0e1a2bd9; color: #f6e7c6; font: 700 clamp(.85rem, 1.05vw, 1.05rem)/1.2 system-ui, sans-serif;
  letter-spacing: .02em; pointer-events: none; box-shadow: 0 6px 18px #050b1680;
}
@media (prefers-reduced-motion: no-preference) {
  .tower-skip-hint:not([hidden]) { animation: meta-hint-in .4s .6s ease-out both; }
  @keyframes meta-hint-in { from { opacity: 0; translate: -50% 8px; } }
}

/* ---------- Race: borderless, with a quiet teacher status ---------- */
.round-screen { grid-template-rows: minmax(0, 1fr); }
#roundScreen > iframe { grid-row: 1; grid-column: 1; }
.round-status {
  grid-row: 1; grid-column: 1; align-self: end; justify-self: start; z-index: 3;
  margin: 0 0 16px 18px; padding: .4rem .75rem .4rem .6rem; border: 1px solid #e3c58b70; border-radius: 999px;
  background: #0d1828d9; color: #f3dca8; font: 700 .86rem/1.2 system-ui, sans-serif; pointer-events: none;
  box-shadow: 0 4px 14px #050b1680; opacity: 0; visibility: hidden;
}
.round-status::before { content: "✓ "; color: #9fe8b4; }
.round-status[data-show] { visibility: visible; opacity: .92; }
@media (prefers-reduced-motion: no-preference) {
  .round-status[data-show] { animation: meta-status 5.2s ease both; }
  @keyframes meta-status { 0% { opacity: 0; translate: 0 8px; } 8%, 78% { opacity: .92; translate: 0 0; } 100% { opacity: 0; visibility: hidden; } }
}

/* ---------- Race loader: bright versus card ---------- */
.round-loader {
  grid-row: 1; grid-column: 1; position: relative; z-index: 2; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; align-items: center;
  padding: clamp(18px, 4.5dvh, 54px) 24px clamp(16px, 3.5dvh, 40px); pointer-events: none;
  background: #3a4c63; color: #fff8e8; text-align: center;
}
.round-loader canvas, .round-loader-door {
  position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; z-index: 0;
}
.round-loader canvas { filter: brightness(1.28) saturate(1.12) blur(3px); }
/* The door opens into warm light; the edges stay soft so the text reads on the beamer. */
.round-loader-light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 46% at 50% 50%, #fff4d6f2 0%, #ffe2a3b8 34%, #ffcf8a00 72%),
    radial-gradient(ellipse 80% 70% at 50% 52%, #ffd59a40, #1a2a4000 70%),
    linear-gradient(180deg, #1a2639c0 0%, #1a263900 26%, #1a263900 70%, #172234d0 100%);
}
.round-loader-light::after {
  content: ""; position: absolute; inset: -40%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #fff6dc00 0deg 8deg, #fff6dc2e 11deg, #fff6dc00 14deg 24deg);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 14%, transparent 52%);
}
.round-loader > :not(canvas, img, .round-loader-light) { position: relative; z-index: 1; }
.round-loader:has(.round-loader-door:not([hidden])) .round-loader-light {
  background:
    radial-gradient(ellipse 30% 40% at 50% 52%, #fff4d6a6 0%, #ffe2a350 40%, #ffcf8a00 72%),
    linear-gradient(180deg, #14203290 0%, #14203200 28%, #14203200 66%, #142032b8 100%);
}
.round-loader-head { display: grid; justify-items: center; gap: .3rem; text-shadow: 0 2px 12px #0b1422cc, 0 0 2px #0b1422; }
.round-loader [data-loader-floor] {
  margin: 0; color: #ffd98f; font: 700 clamp(1rem, 1.6vw, 1.6rem) Copperplate, Georgia, serif;
  letter-spacing: .16em; text-transform: uppercase;
}
.round-loader [data-loader-title] {
  margin: 0; max-width: 22ch; color: #fffaf0; font: 700 clamp(2.4rem, 5vw, 5.4rem)/1.02 Georgia, serif; text-wrap: balance;
}
.round-loader [data-loader-grammar] { margin: .1rem 0 0; color: #f1e7d2; font: 650 clamp(.95rem, 1.35vw, 1.35rem) system-ui, sans-serif; }
.round-loader-versus {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 5vw, 110px);
  width: min(100%, 1280px);
}
.loader-side { margin: 0; display: grid; justify-items: center; gap: .2rem; position: relative; }
.loader-crest { display: block; width: clamp(150px, 31dvh, 340px); aspect-ratio: 1; filter: drop-shadow(0 14px 26px #10182a99); }
.loader-crest img { width: 100%; height: 100%; object-fit: contain; }
.loader-side[data-faction="A"] .loader-crest { filter: drop-shadow(0 0 34px #ffcf6e80) drop-shadow(0 14px 22px #10182a99); }
.loader-side[data-faction="B"] .loader-crest { filter: drop-shadow(0 0 34px #b98bfa90) drop-shadow(0 14px 22px #10182a99); }
.loader-medal {
  position: absolute; top: calc(clamp(150px, 31dvh, 340px) * .62); width: clamp(72px, 11.5dvh, 128px); aspect-ratio: 1;
  border-radius: 50%; padding: 5px; background: radial-gradient(circle, #fff7e4, #e9d6b0 70%); box-shadow: 0 0 0 3px var(--faction), 0 8px 20px #0b142299;
}
.loader-side[data-faction="A"] .loader-medal { left: 8%; }
.loader-side[data-faction="B"] .loader-medal { right: 8%; }
.loader-medal .roster-emblem { width: 100%; }
.loader-side figcaption { display: grid; gap: .1rem; text-shadow: 0 2px 10px #0b1422d0; }
.loader-side b { color: var(--faction); font: 700 clamp(1.6rem, 3vw, 3.1rem) Copperplate, Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.loader-side[data-faction="A"] b { color: #ffd88c; }
.loader-side[data-faction="B"] b { color: #e3ccff; }
.loader-side small { color: #fff3dc; font: 750 clamp(1rem, 1.5vw, 1.5rem) system-ui, sans-serif; }
.loader-vs {
  position: relative; isolation: isolate; display: grid; place-items: center; width: clamp(96px, 13dvh, 150px); aspect-ratio: 1;
  color: #fffdf6; font: 900 clamp(2rem, 4.4dvh, 3.4rem)/1 Georgia, serif; text-shadow: 0 2px 6px #3a2560, 0 0 2px #3a2560;
}
.loader-vs::before {
  content: ""; position: absolute; inset: 14%; z-index: -1; rotate: 45deg;
  border: 3px solid #fff4d2; border-radius: 16%;
  background: linear-gradient(135deg, #ffcf6e 0 49%, #a77bf0 51% 100%);
  box-shadow: 0 0 30px #fff1c4, 0 0 70px #f3c47a90, 0 10px 20px #0b142280;
}
.round-loader-worlds { display: flex; justify-content: center; align-items: flex-start; gap: clamp(28px, 4vw, 70px); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.round-loader-worlds li { position: relative; display: grid; justify-items: center; gap: .35rem; width: 9.5em; }
.round-loader-worlds li + li::before {
  content: ""; position: absolute; top: clamp(24px, 3.3dvh, 36px); right: calc(50% + clamp(32px, 4.2dvh, 44px));
  width: calc(100% + clamp(28px, 4vw, 70px) - 2 * clamp(32px, 4.2dvh, 44px)); border-top: 3px dotted #fff3d6c0;
}
.loader-world-coin {
  display: grid; place-items: center; width: clamp(50px, 6.8dvh, 74px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, color-mix(in srgb, var(--world) 60%, #fff) 60%, var(--world));
  box-shadow: 0 0 0 3px #fff8e8, 0 0 22px color-mix(in srgb, var(--world) 70%, transparent), 0 6px 14px #0b142280;
  color: #2b3348;
}
.loader-world-coin svg, .area-world-coin svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.loader-world-name { color: #fffaf0; font: 750 clamp(.9rem, 1.25vw, 1.25rem)/1.15 system-ui, sans-serif; text-shadow: 0 2px 8px #0b1422e0; }
.round-loader-status { margin: clamp(8px, 1.6dvh, 18px) 0 0; color: #fffaf0; font: 750 clamp(.95rem, 1.2vw, 1.2rem) system-ui, sans-serif; letter-spacing: .06em; text-shadow: 0 2px 8px #0b1422e0; }
.round-loader.is-leaving { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .round-loader.is-showing canvas { animation: meta-loader-drift 3.2s ease-out both; }
  .round-loader.is-showing .round-loader-light { animation: meta-loader-open .7s ease-out both; }
  .round-loader.is-showing .round-loader-light::after { animation: meta-loader-rays 22s linear infinite; }
  .round-loader.is-showing .round-loader-head { animation: meta-loader-drop .55s .12s cubic-bezier(.2,.8,.25,1.1) both; }
  .round-loader.is-showing .loader-side[data-faction="A"] { animation: meta-loader-left .62s .26s cubic-bezier(.2,.85,.3,1.12) both; }
  .round-loader.is-showing .loader-side[data-faction="B"] { animation: meta-loader-right .62s .26s cubic-bezier(.2,.85,.3,1.12) both; }
  .round-loader.is-showing .loader-vs { animation: meta-loader-vs .5s .78s cubic-bezier(.2,.9,.3,1.35) both; }
  .round-loader.is-showing .loader-vs::before { animation: meta-loader-vs-glow 1.6s 1.3s ease-in-out infinite alternate; }
  .round-loader.is-showing .round-loader-worlds li { animation: meta-loader-world .42s calc(.95s + var(--i) * .14s) cubic-bezier(.2,.9,.3,1.3) both; }
  .round-loader.is-showing .round-loader-status { animation: meta-loader-drop .4s 1.25s ease-out both; }
  .round-loader.is-leaving { animation: meta-loader-leave 420ms ease-in both; }
  @keyframes meta-loader-drift { from { scale: 1.14; } to { scale: 1; } }
  @keyframes meta-loader-open { from { opacity: 0; scale: .6; } }
  @keyframes meta-loader-rays { to { rotate: 360deg; } }
  @keyframes meta-loader-drop { from { opacity: 0; translate: 0 -18px; } }
  @keyframes meta-loader-left { from { opacity: 0; translate: -42vw 0; rotate: -8deg; } }
  @keyframes meta-loader-right { from { opacity: 0; translate: 42vw 0; rotate: 8deg; } }
  @keyframes meta-loader-vs { from { opacity: 0; scale: 2.2; } }
  @keyframes meta-loader-vs-glow { to { box-shadow: 0 0 44px #fff6d8, 0 0 100px #f3c47ab0, 0 10px 20px #0b142280; } }
  @keyframes meta-loader-world { from { opacity: 0; scale: .4; translate: 0 14px; } }
  @keyframes meta-loader-leave { to { opacity: 0; scale: 1.04; } }
}
.round-loader-gem {
  width: clamp(38px, 3.4vw, 56px); aspect-ratio: 1; rotate: 45deg; margin-bottom: .6rem;
  border: 2px solid #fff2c8; border-radius: 6px;
  background: linear-gradient(135deg, #fff6dd, #9fe8dc 45%, #6c8ff0);
  box-shadow: 0 0 22px #9fe8dccc, 0 0 60px #f3c47a80;
}
@media (max-height: 640px) { .round-loader-worlds { display: none; } }

/* ---------- Dialog entrance for the full-screen faction screens ---------- */
@media (prefers-reduced-motion: no-preference) {
  .faction-screen[open] { animation: tower-dialog-enter .24s ease-out both; }
  .faction-screen[open]::backdrop, .tutorial-dialog[open]::backdrop { animation: meta-backdrop-in .24s ease-out both; }
  .tutorial-dialog[open] { animation: tower-dialog-enter .24s ease-out both; }
  @keyframes meta-backdrop-in { from { opacity: 0; } }
}

/* ---------- Kristallfront labels ---------- */
.season-feats > span { flex-direction: column; align-items: flex-start; gap: 0; }
.season-feats .feat-value { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; font-size: 1.1rem; }
.season-feats .feat-label { color: #d6deea; font-size: .78rem; font-weight: 650; letter-spacing: .01em; }
.season-feats { gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; }
.front-legend {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  max-width: 1320px; margin: -.4rem auto .7rem; padding: 0 clamp(10px, 2.4vw, 28px);
  color: #e8edf4; font-weight: 700; font-size: clamp(.9rem, 1.15vw, 1.1rem);
}
.front-legend [data-faction] { color: var(--faction); }
.front-legend b { font-size: 1.35em; margin-inline: .2em; }
.front-legend small { color: #c9d3e0; font-weight: 600; text-align: center; font-size: .82em; }
.season-columns {
  display: grid; grid-template-columns: minmax(0,1fr) repeat(2,52px); gap: clamp(5px,1.2vw,14px);
  padding: 0 0 4px; color: #c9d3e0; font-size: .78rem; font-weight: 750; text-align: center;
}
.season-columns span:first-child { text-align: left; }
.season-runes-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: -.35rem 0 .7rem; color: #c9d3e0; font-size: .8rem; }
.season-runes-legend i {
  display: inline-block; width: 9px; aspect-ratio: 1; rotate: 45deg; margin-right: .45rem; vertical-align: .05em;
  border: 1px solid #8794aa8c;
}
.season-runes-legend [data-level="1"] { border-color: #e8c085; background: #e8c08547; }
.season-runes-legend [data-level="2"] { border-color: #fff0bc; background: #f2ce7d; }
.season-floor { color: #f0d6a6; font-weight: 750; margin-right: .5rem; white-space: nowrap; }
@media (max-width:440px) { .season-columns { grid-template-columns: minmax(0,1fr) repeat(2,40px); } }

/* ---------- Tutorial ---------- */
.tutorial-dialog {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; min-width: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: #0c1727; color: #f6eedc; overflow: hidden;
}
.tutorial-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr); }
.tutorial-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px clamp(10px, 2vw, 26px); border-bottom: 1px solid var(--line);
  background: #101926;
}
.tutorial-bar h2 { margin: 0; font: 700 1.05rem Copperplate, Georgia, serif; letter-spacing: .08em; color: #f3d9a4; }
.tutorial-bar div { display: flex; gap: 8px; }
.tutorial-bar .quiet { padding: .4rem .7rem; }
.tutorial-stage { position: relative; min-height: 0; }
.tutorial-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tutorial-loading {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  color: #f3cf8a; font: 700 1.3rem Copperplate, Georgia, serif; letter-spacing: .1em;
  background: radial-gradient(ellipse at 50% 50%, #1b2c42, #0c1727 70%);
}

.tutorial-offer {
  display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px 10px;
  margin: 0; padding: 10px 10px 10px 12px; border: 1px solid #e3c58b8c; border-radius: 10px;
  background: linear-gradient(120deg, #3a2e22e6, #182a3fe6); color: #fbefd5; box-shadow: 0 6px 18px #050b1660;
}
.tutorial-offer .round-loader-gem { width: 18px; margin: 0 4px; }
.tutorial-offer p { margin: 0; font-size: .9rem; line-height: 1.3; }
.tutorial-offer strong { display: block; color: #f6d79b; font-size: .98rem; }
.tutorial-offer div { grid-column: 2; display: flex; gap: 6px; }
.tutorial-offer button { padding: .45rem .7rem; border-radius: 8px; font-weight: 800; }
.tutorial-offer .primary { padding: .45rem .75rem; }
@media (prefers-reduced-motion: no-preference) {
  .tutorial-offer:not([hidden]) { animation: tower-dialog-enter .3s .4s ease-out both; }
}

/* ---------- Awakening after all 34 rounds ---------- */
#awakeningDialog .awakening-content { position: relative; isolation: isolate; align-content: center; gap: clamp(4px, 1.5dvh, 18px); }
#awakeningDialog #awakeningPortrait { width: min(94vw, 57rem, 92dvh); }
.awakening-text {
  position: relative; width: min(92vw, 1200px);
  display: grid; justify-items: center; gap: .3rem; text-align: center; margin: 0; z-index: 2;
}
.awakening-kicker { margin: 0; color: #9fe8dc; font: 700 clamp(.95rem, 1.5vw, 1.35rem) system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.awakening-title { margin: 0; color: #fff1cf; font: 700 clamp(1.9rem, 3.7vw, 3.8rem)/1.05 Copperplate, Georgia, serif; text-shadow: 0 0 28px #9fe8dc80, 0 3px 12px #050b16; }
.awakening-class { margin: 0; color: #f3cf8a; font: 700 clamp(1.05rem, 1.8vw, 1.6rem) Copperplate, Georgia, serif; letter-spacing: .08em; }
.awakening-rays, .awakening-flash { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.awakening-rays {
  background: repeating-conic-gradient(from 0deg at 50% 42%, #9fe8dc00 0deg 9deg, #9fe8dc1f 12deg, #9fe8dc00 15deg 30deg);
  mask-image: radial-gradient(circle at 50% 42%, #000 0, #000 18%, transparent 58%);
  opacity: .7; transform-origin: 50% 42%;
}
.awakening-flash { z-index: 3; background: radial-gradient(circle at 50% 42%, #f4fffd 0%, #bff6ee 18%, #9fe8dc00 62%); opacity: 0; }
.awakening-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.awakening-sparks i {
  position: absolute; left: 50%; top: 42%; width: 6px; height: 6px; border-radius: 50%;
  background: #fff4cf; box-shadow: 0 0 10px #ffd98a; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .is-awakening .awakening-flash { animation: meta-awake-flash 1.25s ease-out both; }
  .is-awakening #awakeningPortrait { animation: meta-awake-crystal 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .is-awakening .awakening-rays { animation: meta-awake-rays 24s linear infinite, meta-awake-rays-in 1.4s .3s ease-out both; }
  .is-awakening .awakening-text > * { animation: meta-awake-text .7s ease-out both; }
  .is-awakening .awakening-kicker { animation-delay: .8s; }
  .is-awakening .awakening-title { animation-delay: 1s; }
  .is-awakening .awakening-class { animation-delay: 1.25s; }
  .is-awakening .awakening-sparks i { animation: meta-awake-spark 1.9s var(--d) cubic-bezier(.15,.6,.3,1) both; }
  @keyframes meta-awake-flash { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }
  @keyframes meta-awake-crystal { from { scale: .9; filter: brightness(1.8) saturate(1.2); } to { scale: 1; filter: none; } }
  @keyframes meta-awake-rays { to { rotate: 360deg; } }
  @keyframes meta-awake-rays-in { from { opacity: 0; } }
  @keyframes meta-awake-text { from { opacity: 0; translate: 0 12px; } }
  @keyframes meta-awake-spark {
    0% { opacity: 0; translate: 0 0; scale: .4; }
    15% { opacity: 1; }
    100% { opacity: 0; translate: var(--x) var(--y); scale: 1; }
  }
}

/* ---------- K5 Runde 2 · Tower list: child title big, grammar small, areas visible ---------- */
#mapSections section { --area: var(--chapter); }
#mapSections h2.map-area {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 3px; padding: 3px 8px 3px 5px;
  border-radius: 8px; color: #fff6e6; font: 800 .98rem/1.1 system-ui, sans-serif; letter-spacing: .02em;
  background: linear-gradient(90deg, color-mix(in srgb, var(--area) 34%, #0f1b2b) 0%, #0f1b2b00 92%);
  border-left: 3px solid var(--area);
}
.map-area-number {
  position: relative; isolation: isolate; display: grid; place-items: center; flex: 0 0 auto; width: 26px; aspect-ratio: 1;
  color: #172231; font: 900 .82rem/1 Georgia, serif;
}
.map-area-number::before { content: ""; position: absolute; inset: 4px; z-index: -1; rotate: 45deg; border-radius: 4px; background: var(--area); }
.map-area-name { flex: 1; min-width: 0; color: color-mix(in srgb, var(--area) 45%, #fff); }
.map-area-worlds { display: flex; gap: 4px; }
.map-area-worlds svg {
  width: 22px; height: 22px; padding: 3px; border-radius: 50%; fill: none; stroke: #172231; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; background: var(--world); opacity: .95;
}
#mapSections section:not([data-area-open]) .map-area-worlds svg { background: #2a3a50; stroke: #8fa1b8; opacity: .8; }
#mapSections section:not([data-area-open]) .map-area-worlds::before {
  content: "New"; align-self: center; margin-right: 3px; color: #f6d79b; font: 800 .68rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.map-floor { grid-template-columns: 40px minmax(0, 1fr) 24px; min-height: 39px; padding-block: 2px; border-left-color: var(--area); }
.map-number { color: var(--area); font-size: .95rem; }
.map-names { display: grid; min-width: 0; gap: 0; }
.map-kid {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 800 1.08rem/1.15 system-ui, sans-serif; letter-spacing: .005em; color: #fff7e8;
}
.map-names .map-topic { font-size: .72rem; font-weight: 600; line-height: 1.15; color: #c5d2e0; opacity: .95; }
.map-floor:is(:hover, :focus-visible, [aria-expanded="true"]) .map-kid { color: #172533; }
.map-floor:is(:hover, :focus-visible, [aria-expanded="true"]) .map-topic { color: #3f4f63; }
.map-floor { flex-basis: 39px; }
.floor-map[data-expanded] .map-floor { flex-basis: 38px; min-height: 38px; }
@media (max-height: 770px) {
  .map-floor { flex-basis: 36px; min-height: 36px; }
  .map-kid { font-size: .96rem; }
  .map-names .map-topic { font-size: .68rem; }
}
#floorDetails h2 { color: var(--chapter-deep); font: 800 1.4rem/1.12 system-ui, sans-serif; letter-spacing: -.005em; }
.floor-grammar { margin: 0 32px .25rem 0; color: var(--chapter-deep); font: 700 .86rem/1.25 Georgia, serif; }
#floorDetails .focus { font-size: .8rem; }

/* ---------- New lands ahead (area II and III, once per class) ---------- */
.area-reveal {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; overflow: hidden;
  border-radius: inherit; cursor: pointer; color: #fffaf0; background: #182a40;
}
.area-reveal-art, .area-reveal-art img, .area-reveal-land { position: absolute; inset: 0; width: 100%; height: 100%; }
.area-reveal-art img { object-fit: cover; }
.area-reveal-art { background: linear-gradient(180deg, #24476e 0%, #5f9cc8 46%, #e7f2f1 70%, #9cc0d0 100%); }
.area-reveal[data-area="3"] .area-reveal-art { background: linear-gradient(180deg, #3b2347 0%, #b8506a 44%, #ffb36b 66%, #6b3a3a 100%); }
.area-reveal-art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 42% at 50% 46%, #0f1b2b00, #0f1b2b8c 100%), linear-gradient(0deg, #0f1b2bb0, transparent 40%);
}
.land-far { fill: #9fc3dd; opacity: .75; }
.land-mid { fill: #5c86a8; }
.land-near { fill: #26445f; }
.area-reveal[data-area="3"] .land-far { fill: #d77c78; }
.area-reveal[data-area="3"] .land-mid { fill: #8d3f4f; }
.area-reveal[data-area="3"] .land-near { fill: #3c1f2c; }
.area-reveal-card { position: relative; z-index: 1; display: grid; justify-items: center; gap: .55rem; padding: 0 24px; text-align: center; }
.area-reveal-kicker {
  margin: 0; color: #fff1c8; font: 800 clamp(1.1rem, 1.9vw, 1.9rem) system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 0 18px var(--area), 0 2px 10px #0b1422;
}
.area-reveal-name {
  margin: 0; color: #fffaf0; font: 700 clamp(2.2rem, 4.6vw, 4.6rem)/1.02 Georgia, serif; text-wrap: balance;
  text-shadow: 0 3px 18px #0b1422e0, 0 0 40px color-mix(in srgb, var(--area) 60%, transparent);
}
.area-reveal-worlds { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2vw, 34px); margin: .8rem 0 0; padding: 0; list-style: none; }
.area-reveal-worlds li { display: grid; justify-items: center; gap: .35rem; width: 8.2em; font: 750 clamp(.9rem, 1.2vw, 1.2rem)/1.15 system-ui, sans-serif; text-shadow: 0 2px 8px #0b1422; }
.area-world-coin {
  display: grid; place-items: center; width: clamp(54px, 6.5vw, 86px); aspect-ratio: 1; border-radius: 50%; color: #24304a;
  background: radial-gradient(circle at 40% 35%, #fff, color-mix(in srgb, var(--world) 60%, #fff) 60%, var(--world));
  box-shadow: 0 0 0 3px #fff8e8, 0 0 26px var(--world), 0 8px 16px #0b142299;
}
.area-reveal-close {
  position: absolute; z-index: 2; right: 16px; bottom: 16px; padding: .45rem .9rem; border: 1px solid #fff3d690; border-radius: 999px;
  background: #0e1a2bd0; color: #fff3d6; font: 700 .9rem system-ui, sans-serif;
}
@media (prefers-reduced-motion: no-preference) {
  .area-reveal.is-playing { animation: meta-reveal-in .5s ease-out both; }
  .area-reveal.is-playing .area-reveal-art { animation: meta-reveal-pan 6.5s cubic-bezier(.2,.6,.3,1) both; }
  .area-reveal.is-playing .land-near { animation: meta-reveal-rise 1.1s .1s cubic-bezier(.2,.8,.3,1) both; }
  .area-reveal.is-playing .land-mid { animation: meta-reveal-rise 1.3s .05s cubic-bezier(.2,.8,.3,1) both; }
  .area-reveal.is-playing .area-reveal-kicker { animation: meta-reveal-kicker .7s .35s cubic-bezier(.2,.8,.3,1.2) both; }
  .area-reveal.is-playing .area-reveal-name { animation: meta-reveal-name .7s .6s cubic-bezier(.2,.8,.3,1.1) both; }
  .area-reveal.is-playing .area-reveal-worlds li { animation: meta-loader-world .45s calc(1.05s + var(--i) * .16s) cubic-bezier(.2,.9,.3,1.3) both; }
  .area-reveal.is-leaving { animation: meta-reveal-out .45s ease-in both; }
  @keyframes meta-reveal-in { from { opacity: 0; } }
  @keyframes meta-reveal-out { to { opacity: 0; scale: 1.03; } }
  @keyframes meta-reveal-pan { from { scale: 1.12; translate: 0 2%; } }
  @keyframes meta-reveal-rise { from { translate: 0 18%; } }
  @keyframes meta-reveal-kicker { from { opacity: 0; letter-spacing: .5em; } }
  @keyframes meta-reveal-name { from { opacity: 0; translate: 0 22px; scale: .94; } }
}

/* ---------- Crystal Front: tug of war, two numbers, best team; details behind a toggle ---------- */
.battle-summary { overflow-y: auto; }
#summaryClash .crystal-front { height: clamp(180px, 30dvh, 360px); }
.front-score {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); align-items: start;
  gap: clamp(10px, 2vw, 30px); max-width: 1320px; margin: -3.4rem auto clamp(14px, 3dvh, 34px);
}
.front-side { display: grid; justify-items: center; text-align: center; gap: .1rem; }
.front-crest { width: clamp(90px, 13dvh, 150px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0 18px var(--faction-glow)); }
.front-side h3 { margin: 0; color: var(--faction); font: 700 clamp(1.4rem, 2.4vw, 2.3rem) Copperplate, Georgia, serif; letter-spacing: .08em; }
.front-number { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: start; column-gap: .45rem; margin: 0; line-height: 1; }
.front-number b { grid-row: 1; }
.front-number small { grid-column: 1 / -1; justify-self: center; }
.front-number b {
  color: #fffaf0; font: 800 clamp(4.2rem, 10dvh, 8rem)/.95 Georgia, serif; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px var(--faction-glow), 0 0 2px var(--faction), 0 4px 18px #050b16;
}
.front-side[data-leading] .front-number b { color: color-mix(in srgb, var(--faction) 45%, #fff); }
.front-number small { margin-top: .25rem; color: #e9eef5; font: 750 clamp(1rem, 1.5vw, 1.4rem) system-ui, sans-serif; }
.front-plus {
  grid-row: 1; margin-top: .9rem; padding: .1rem .55rem; border-radius: 999px; background: var(--faction); color: #172231;
  font: 800 clamp(.95rem, 1.3vw, 1.25rem) system-ui, sans-serif;
}
.front-middle {
  align-self: center; margin: 0; color: #fff1d0; font: 750 clamp(1.1rem, 1.9vw, 1.8rem)/1.2 Georgia, serif; text-align: center;
  text-shadow: 0 2px 12px #050b16; text-wrap: balance;
}
.front-best-label { margin: .7rem 0 .1rem; color: var(--faction); font: 800 clamp(.95rem, 1.3vw, 1.2rem) system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.front-best { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; margin: 0; padding: 0; list-style: none; }
.front-best li { display: flex; align-items: center; gap: .5rem; color: #fff6e6; font: 800 clamp(1.05rem, 1.6vw, 1.5rem) system-ui, sans-serif; }
.front-best .roster-emblem { width: clamp(46px, 6dvh, 64px); flex: 0 0 auto; }
.season-details { max-width: 1320px; margin: 0 auto; }
.season-details > summary {
  display: flex; align-items: baseline; gap: .6rem; width: max-content; margin: 0 auto 10px; padding: .4rem .9rem;
  border: 1px solid #d6b98066; border-radius: 999px; background: #0b172bcc; color: #e9dcbf; font: 750 .9rem system-ui, sans-serif; cursor: pointer;
  list-style: none;
}
.season-details > summary::-webkit-details-marker { display: none; }
.season-details > summary::before { content: "▸"; color: #f0d6a6; transition: rotate .15s; }
.season-details[open] > summary::before { rotate: 90deg; }
.season-details > summary small { color: #aebbcc; font-weight: 600; }
.season-details .front-legend { display: block; margin: 0 0 .7rem; color: #c9d3e0; font: 600 .85rem/1.35 system-ui, sans-serif; text-align: center; }
.season-details .battle-factions { margin-bottom: 14px; }
.season-kid { color: #fff3dc; font-weight: 750; margin-right: .5rem; }
.season-grammar { color: #aebbcc; font-size: .8rem; }
@media (max-width: 760px) { .front-score { grid-template-columns: 1fr 1fr; } .front-middle { grid-column: 1 / -1; grid-row: 2; } }