.tower-view-tools { display: flex; flex-wrap: wrap; gap: 8px; }
#towerOverview[aria-pressed="true"] { background: #dcebe9; color: #1f3743; }
.crystal-meter {
  display: flex; align-items: center; gap: .64rem; flex-wrap: wrap;
  margin: 0 0 .75rem; color: #dce7e8; font-size: .86rem;
}
.crystal-meter strong { color: #f5dcab; }
.crystal-meter progress {
  width: clamp(82px, 15vw, 165px); height: .56rem; accent-color: #90dccc;
}
.crystal-meter .quiet { margin-left: auto; padding: .38rem .65rem; font-size: .82rem; }

#awakeningDialog {
  padding: 0; border: 0; border-radius: 0; width: 100vw; max-width: none;
  height: 100dvh; max-height: none; margin: 0;
  background: radial-gradient(ellipse at 50% 44%, #20394e 0%, #121f33 44%, #080f1e 85%);
  color: #f5ead1; overflow: hidden;
}
#awakeningDialog::backdrop { background: #080f1e; }
.awakening-content {
  width: 100%; min-height: 100%; display: grid; place-items: center;
}
#awakeningDialog[open] .awakening-content { animation: crystal-arrival .8s ease-out both; }
#awakeningPortrait {
  width: min(94vw, 57rem, 135dvh); height: auto;
  mask-image: radial-gradient(ellipse at 50% 47%, #000 54%, transparent 79%);
}
#closeAwakening { position: absolute; top: 22px; right: 22px; }
@keyframes crystal-arrival { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  #awakeningDialog[open] .awakening-content { animation: none; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#towerScreen.shell { max-width: 1660px; padding: clamp(12px, 1.9vw, 30px); }

.series-header { margin: 0 0 12px; }
.stage { grid-template-columns: minmax(0, 2.08fr) minmax(350px, 1fr); }
.stage > * { min-height: clamp(560px, calc(100dvh - 126px), 970px); }
.teacher-cockpit {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: clamp(13px, 1.55vw, 23px);
  border: 1px solid #92b7d74d; border-radius: 17px;
  background: linear-gradient(145deg, #17283daa, #101b2aaf);
  backdrop-filter: blur(5px);
  box-shadow: 0 18px 40px #0a13246e;
}
.cockpit-tools {
  display: flex; justify-content: center; gap: 7px; padding-bottom: 10px;
  border-bottom: 1px solid #a7bfd52e;
}
.icon-control {
  display: inline-grid; position: relative; place-items: center;
  width: 42px; height: 40px; padding: 8px; border-radius: 10px;
  color: #e1edf3; border: 1px solid #a1bdd365;
  background: #24374b; text-decoration: none;
}
.icon-control svg { width: 21px; height: 21px; }
.icon-control:hover, .icon-control:focus-visible { background: #374f66; color: #fff3d1; z-index: 3; }
.icon-control[data-tooltip]::after {
  content: attr(data-tooltip); pointer-events: none; opacity: 0; visibility: hidden;
  position: absolute; inset-block-start: calc(100% + 7px); inset-inline-start: 50%;
  transform: translateX(-50%); padding: .45rem .64rem; border-radius: .45rem;
  background: #0d1826; border: 1px solid #9ebed468; color: #f3f1e9;
  font: 650 .78rem/1.2 system-ui, sans-serif; width: max-content; max-width: min(180px, 52vw);
  text-align: center; transition: opacity .13s, visibility .13s;
}
.icon-control[data-tooltip]:is(:hover,:focus-visible)::after { opacity: 1; visibility: visible; }
#seeCrystal[data-awakened] { color: #fff1bc; border-color: #e1c27e; box-shadow: 0 0 14px #e3c1784e; }
.floor-map { display: flex; flex-direction: column; flex: 1; padding-inline: 1px; min-height: 0; }
#mapSections { display: flex; flex: 1; flex-direction: column; gap: clamp(8px, 1.2vh, 14px); }
#mapSections section {
  flex-grow: var(--floor-count); display: grid; grid-template-rows: auto;
  grid-auto-rows: minmax(34px, 1fr); gap: 3px;
}
#mapSections section:first-child { margin-inline: 2.6%; }
#mapSections section:nth-child(2) { margin-inline: 1.25%; }
#mapSections h2 {
  margin: 0 0 2px; color: var(--chapter); font: 790 .82rem/1.3 system-ui, sans-serif;
  letter-spacing: .035em; padding-left: 7px;
}
.map-floor {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px;
  align-items: center; gap: 7px; min-height: 34px; width: 100%; padding: 4px 8px;
  border: 1px solid color-mix(in srgb,var(--chapter),transparent 63%);
  border-left: 3px solid var(--chapter); border-radius: 4px;
  background: linear-gradient(115deg,color-mix(in srgb,var(--chapter-wash) 75%,transparent),#13223485);
  color: #f4efdf; text-align: left; box-shadow: 0 2px 3px #080e1760;
}
.map-floor:is(:hover,:focus-visible) { color: #172533; background: var(--chapter-paper); border-color: var(--chapter); }
.map-floor[aria-current="step"] { box-shadow: inset 0 0 0 1px var(--chapter), 0 2px 6px #080e1770; }
.map-number { color: var(--chapter); font: 700 .85rem/1 Georgia,serif; letter-spacing: .045em; white-space: nowrap; }
.map-floor:is(:hover,:focus-visible) .map-number { color: var(--chapter-deep); }
.map-topic {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .86rem; font-weight: 660; line-height: 1.17;
}
.map-lamps { display: flex; gap: 4px; justify-content: end; }
.map-lamps i { width: 7px; height: 7px; border: 1px solid #9fb3bb7a; border-radius: 50%; background: #0c1727; }
[data-a] .map-lamps i:first-child { background: var(--chapter); box-shadow: 0 0 5px var(--chapter); border-color: transparent; }
[data-b] .map-lamps i:last-child { background: #f6e9b2; box-shadow: 0 0 5px #f6e9b2; border-color: transparent; }
.map-hint { color: #d5e4ee; margin: .65rem .1rem 0; min-height: 1.4em; font-size: .83rem; line-height: 1.3; }
.teacher-cockpit .floor-card {
  min-height: 0; flex: 1; padding: clamp(15px, 2vw, 27px); box-shadow: none;
}
.teacher-cockpit .floor-card h2 { margin-top: 18px; font-size: clamp(23px, 2.6vw, 37px); }
#backToFloors { margin-bottom: .85rem; }
.teacher-cockpit .floor-actions { margin-top: .9rem; padding-top: .65rem; }
.teacher-cockpit .variants { display: inline-grid; grid-template-columns: 48px 48px; margin-right: .55rem; vertical-align: middle; }
.teacher-cockpit .variants button { min-height: 36px; padding: 0 .4rem; }
.teacher-cockpit [data-play] { display: inline-flex; align-items: center; gap: .35rem; width: auto; margin: .3rem 0; padding: .55rem .7rem; font-size: .93rem; }
.teacher-cockpit [data-play] svg { width: 16px; height: 16px; }
.teacher-cockpit .materials { justify-content: start; gap: 8px; margin-top: .55rem; }
.teacher-cockpit .materials a { color: #e0edf4; padding: 6px; }
#planStamp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width:850px) {
  .stage { grid-template-columns: minmax(0,1fr); }
  .stage > * { min-height: 0; }
  .stage > #towerViewport { min-height: clamp(390px, 65dvh, 620px); }
}

@media (max-height: 770px) {
  #mapSections section { grid-auto-rows: minmax(30px, 1fr); }
  .map-floor { min-height: 30px; padding-block: 3px; }
  .map-topic { font-size: .82rem; }
}

/* Floor details stay inside the map, directly below the chosen floor. */
#towerZoomControls {
  position: absolute; z-index: 3; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 9px; padding: 3px 3px 3px 12px;
  background: #142337ed; border: 1px solid #b5cedb8a; border-radius: 12px;
  box-shadow: 0 4px 18px #0915246b;
}
#towerZoom { width: clamp(72px,10vw,127px); min-height: 32px; margin: 0; accent-color: #f0d5a1; cursor: pointer; }
#towerOverview { background: #132338d9; border-color: #b5cedb8a; }
#towerOverview[aria-pressed="true"] { background: #dcebe9; color: #1f3743; }
#towerOverview::after, #openMainMenu::after {
  inset-inline-start: auto; right: 0; transform: none;
}
#towerOverview::after { inset-block-start: auto; inset-block-end: calc(100% + 7px); }
#mapSections section { display: flex; flex-direction: column; }
.map-floor { flex: 1 0 34px; }
.map-floor[aria-expanded="true"] { background: var(--chapter-paper); color: #192a38; }
.map-floor[aria-expanded="true"] .map-number { color: var(--chapter-deep); }
.floor-map { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
.floor-map[data-expanded] #mapSections section { flex: 0 0 auto; }
.floor-map[data-expanded] .map-floor { flex-basis: 30px; min-height: 30px; }
#floorDetails.floor-card {
  flex: 0 0 auto; position: relative; margin: 0 0 3px;
  padding: 11px 13px; border-top-width: 1px; border-radius: 6px;
}
#floorDetails .floor-top { display: none; }
#floorDetails h2 { margin: 0 32px .3rem 0; font: 760 1rem/1.18 Georgia,serif; }
#floorDetails .focus { font-size: .84rem; line-height: 1.35; }
#floorDetails .floor-actions { margin: .32rem 0 0; padding: 0; }
#floorDetails .materials { display: inline-flex; margin: .2rem 0 0 .35rem; vertical-align: middle; }
#floorDetails .materials .icon-control { width: 32px; height: 32px; }
#floorDetails .materials svg { width: 18px; height: 18px; }
#backToFloors { position: absolute; top: 8px; right: 8px; width: 30px; height: 29px; padding: 5px; }
#backToFloors svg { width: 17px; height: 17px; }
@media (min-width:851px) {
  .teacher-cockpit { height: clamp(560px, calc(100dvh - 126px), 970px); }
}
@media (max-height: 770px) {
  .map-floor { flex-basis: 30px; }
}

@font-face {
  font-family: "CK Atkinson"; src: url("legacy/teil1/entdecken/assets/atkinson-hyperlegible-400-latin.woff2") format("woff2");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "CK Atkinson"; src: url("legacy/teil1/entdecken/assets/atkinson-hyperlegible-700-latin.woff2") format("woff2");
  font-style: normal; font-weight: 700; font-display: swap;
}
:root {
  --ck-display: Copperplate, Georgia, serif;
  --ck-reading: "CK Atkinson", system-ui, sans-serif;
}
.menu-header {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.series-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
/* The transparent Lesson Arcade artwork is lit by the same brass tone as the title. */
.lesson-mark {
  display: block; flex: none; width: clamp(39px, 4.7vw, 63px); aspect-ratio: 1;
  filter: brightness(0) saturate(100%) invert(86%) sepia(44%) saturate(455%) hue-rotate(335deg)
    brightness(106%) contrast(89%) drop-shadow(0 1px 8px #251a15a3);
  opacity: .89;
}
.series-title {
  display: grid; place-items: center; min-width: 0; min-height: 51px; margin: 0;
}
.series-title img { display: block; height: auto; }
.series-title .series-mark { width: clamp(100px, 14vw, 158px); }
.series-grade { justify-self: end; width: clamp(69px, 11vw, 136px); height: auto; }
#openMainMenu { color: #f8da9b; background: #382d24dc; border-color: #dbb372b0; flex: none; }
#openMainMenu:hover { color: #24222b; background: #eed19c; }

.main-menu {
  --sun: 6% 40%; --shield: 12% 53%; --magic: 89% 51%;
  position: relative; isolation: isolate; min-height: 100dvh;
  display: grid; place-items: center; padding: clamp(16px, 3vw, 44px);
  background: #102133;
}
.menu-scene { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.menu-painting {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, calc(100dvh * 1.78)); aspect-ratio: 1672 / 941;
}
.menu-painting img { display: block; width: 100%; height: 100%; object-fit: cover; }
.menu-painting span, .menu-scene::after { position: absolute; inset: 0; pointer-events: none; }
.menu-scene::after {
  content: "";
  background: linear-gradient(0deg,#091422c7,transparent 28%,transparent 86%,#10192240),
    radial-gradient(ellipse at 50% 54%,#101d2e76,transparent 60%);
}
.menu-rays {
  background: radial-gradient(ellipse at var(--sun),#ffe6b353,transparent 34%),
    repeating-conic-gradient(from -2deg at var(--sun),#ffe8ba00 0deg 7deg,#ffdc9e3c 10deg,#ffe8ba00 15deg 29deg);
  mask-image: radial-gradient(ellipse 34% 60% at var(--sun),#000,transparent);
  mix-blend-mode: screen; opacity: .35;
}
.menu-shield-glint {
  background: radial-gradient(ellipse 5% 8% at var(--shield),#fff2bda6,#f7bc523e 30%,transparent 73%);
  mix-blend-mode: screen; opacity: .32;
}
.menu-magic {
  background: radial-gradient(ellipse 11% 20% at var(--magic),#cba0ff88,#a170e634 38%,transparent 72%);
  mix-blend-mode: screen; opacity: .52;
}
.menu-header { position: absolute; inset: clamp(12px, 2.2vw, 35px) auto auto clamp(12px, 2.2vw, 35px); }
.menu-header .lesson-mark { width: clamp(55px,5.6vw,86px); opacity: .74; }
.menu-hero { width: min(100%, 700px); text-align: center; padding: 64px 0 32px; }
.menu-content { display: grid; justify-items: center; width: 100%; }
.menu-content h1 { width: min(100%,640px); margin: 0 0 .72rem; }
.menu-wordmark {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 3px 16px #070d19) drop-shadow(0 0 22px #e3b67530);
}
.menu-class {
  max-width: 95%; margin: .35rem 0 0; color: #f2d69f;
  font: 700 clamp(1.6rem, 4vw, 2.7rem)/1.12 Copperplate, Georgia, serif;
  text-transform: uppercase; letter-spacing: .10em; overflow-wrap: anywhere;
  text-shadow: 0 3px 14px #08131f;
}
.menu-actions { display: grid; justify-items: center; gap: .65rem; width: min(100%, 420px); }
.menu-actions button { min-height: 44px; }
.menu-actions svg { width: 1.15em; height: 1.15em; flex: none; }
.menu-enter {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  width: min(100%, 252px); padding: .75rem 1.1rem; border: 1px solid #e5c58b; border-radius: 5px;
  background: linear-gradient(105deg,#f8e2b3 0%,#e7be7e 100%); color: #202436;
  font-weight: 800; font-size: 1.12rem; box-shadow: 0 4px 20px #08131e8c, inset 0 0 0 3px #7351262b;
}
.menu-enter svg:last-child { justify-self: end; }
.menu-enter:hover { background: #fff0cc; }
.menu-actions { gap: clamp(24px,4.4vh,48px); margin-top: .75rem; }
.menu-class + .menu-actions { margin-top: clamp(16px, 2.7vh, 31px); }
.menu-utilities { display: flex; align-items: center; justify-content: center; gap: clamp(20px,5vw,66px); }
.menu-actions .icon-control {
  border-radius: 50%; color: #f0dba9; border-color: #edcd8d77;
  box-shadow: inset 0 0 0 3px #efca8620, 0 4px 18px #0b142d63;
  background: radial-gradient(ellipse at 50% 32%, #3e4852cc, #122037dd 74%);
  width: clamp(54px,5.9vw,74px); height: clamp(54px,5.9vw,74px);
}
.menu-actions .icon-control svg { width: 66%; height: 66%; }
.menu-actions .icon-control:is(:hover,:focus-visible) {
  color: #fff3ca; border-color: #f3d59a; background: #394755;
}
.menu-actions .menu-tower {
  width: clamp(72px,7.1vw,94px); height: clamp(72px,7.1vw,94px);
  color: #192438; background: radial-gradient(ellipse at 50% 32%,#fff1c9,#dab477);
  border-color: #f6dcaa; box-shadow: inset 0 0 0 4px #70512638, 0 4px 28px #070e22a8;
}
.menu-actions .menu-tower:is(:hover,:focus-visible) { color: #182234; background: #fff2cf; }
.menu-actions .menu-tower::after { inset-block-start: auto; inset-block-end: calc(100% + 7px); }
@media (max-width:650px) {
  .main-menu { align-items: end; }
  .menu-painting { width: 100%; top: 9vh; transform: translateX(-50%); mask-image: linear-gradient(#000 70%,transparent); }
  .menu-hero { padding: min(27dvh,210px) 0 max(8dvh,30px); }
}
@media (prefers-reduced-motion: no-preference) {
  .menu-rays { animation: menu-daylight 13s ease-in-out infinite alternate; }
  .menu-shield-glint { animation: menu-reflection 11s ease-in-out infinite; }
  .menu-magic { animation: menu-spell 6.3s ease-in-out infinite alternate; }
  @keyframes menu-daylight { from { opacity: .26; } to { opacity: .48; } }
  @keyframes menu-reflection {
    0%,30%,65%,100% { opacity: .25; transform: translateX(0); }
    46% { opacity: .72; transform: translateX(.8%); }
  }
  @keyframes menu-spell { from { opacity: .28; } to { opacity: .71; } }
}
@media (prefers-reduced-motion: no-preference) {
  .tower-dialog[open] { animation: tower-dialog-enter .18s ease-out both; }
  @keyframes tower-dialog-enter { from { opacity:0; transform:translateY(6px); } }
}

:root { --faction-scene: url("art/klasse5-menue.jpg"); }

/* Class setup and the two faction screens share the tower's brass frame. */
.tower-dialog {
  background: radial-gradient(ellipse at 50% 0%, #284159, #152539 45%, #101c2b);
  border-color: #c6a77580;
  box-shadow: 0 22px 90px #060b14aa, inset 0 0 0 3px #e6c8930e;
  max-height: calc(100dvh - 32px);
}
.tower-dialog h2 { margin-bottom: .55rem; color: #f3d9a4; font-family: Copperplate, Georgia, serif; }
.tower-dialog::backdrop { background: #081220bd; backdrop-filter: blur(4px); }
.faction-screen {
  width: 100%; height: 100dvh; max-width: none; max-height: none; min-width: 0; margin: 0;
  border: 0; border-radius: 0; padding: clamp(18px, 3vw, 50px);
  background: linear-gradient(0deg,#0a1426d9 0%,#10213844 55%,#0b152b7a),
    url("art/faction-hall.jpg") center / cover no-repeat, #131d31;
}
.battle-summary {
  background: radial-gradient(ellipse at 50% 31%, #1721369e, #17213600 64%),
    linear-gradient(0deg,#0a1426eb 0%,#12203b66 52%,#0b152b73),
    url("art/faction-hall.jpg") center / cover no-repeat, #131d31;
}
.faction-screen > *, .roster-dialog form { max-width: 1320px; margin-inline: auto; }
.faction-screen h2 { color: #f5dfb3; font: 700 clamp(1.65rem,4vw,3.4rem) Copperplate, Georgia, serif; }
#squadPickerTitle {
  text-align: center; color: #f1d6a2; margin: 0 0 .3rem; font: 700 1.05rem Copperplate, Georgia, serif;
  letter-spacing: .1em;
}
#squadPicker #rosterClassName {
  margin: 0 0 clamp(12px,2vh,24px); text-align: center; color: #fff0ca;
  font-size: clamp(2rem,5vw,4rem); line-height: 1.05; text-transform: uppercase;
  overflow-wrap: anywhere; text-shadow: 0 2px 18px #0a1426, 0 0 30px #d9a45949;
}
#summaryClass {
  color: #f6ddb0; font: 700 clamp(1.35rem,3vw,2.3rem) Copperplate, Georgia, serif;
  text-transform: uppercase; overflow-wrap: anywhere;
}
.roster-dialog .dialog-buttons { justify-content: center; }
.roster-dialog .roster-sides { gap: clamp(18px,5vw,80px); }
.roster-dialog .roster-sides h3 { text-align: center; margin-bottom: .8rem; }
.roster-dialog .roster-card { background: #0c162bbf; border-color: #dbc7aa5e; }
.roster-dialog .roster-card:has([aria-pressed="true"]) {
  border-color: var(--faction);
  background: radial-gradient(ellipse at 50% 30%,var(--faction-glow),#0c162bce 78%);
}
.roster-dialog .roster-emblem { width: min(140px, 94%); }
.roster-dialog .roster-toggle { padding-block: .55rem; }
.roster-dialog .roster-toggle[aria-pressed="true"] .roster-emblem {
  filter: drop-shadow(0 0 13px var(--faction-glow));
}
#rosterClassName, #summaryClass { margin: .4rem 0 1.1rem; color: #d4deea; }
.roster-sides, .battle-factions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 25px); }
[data-faction="A"] { --faction: #f0c982; --faction-glow: #e3a74f33; }
[data-faction="B"] { --faction: #dcc3ff; --faction-glow: #9c62ed40; }
.roster-sides h3, .battle-factions h3 {
  margin: 0 0 .55rem; padding-bottom: .3rem; border-bottom: 1px solid var(--faction-glow);
  color: var(--faction); font: 700 1.48rem Copperplate, Georgia, serif;
}
.roster-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.roster-card { display: flex; flex-direction: column; border: 1px solid #a6b7cf38; border-radius: 8px; background: #122034; }
.roster-card:has([aria-pressed="true"]) {
  border-color: var(--faction); background: radial-gradient(ellipse at 50% 36%,var(--faction-glow),#122034 77%);
}
.roster-toggle, .roster-names {
  width: 100%; border: 0; border-radius: 7px; background: transparent; color: #eff2f6;
}
.roster-toggle { flex: 0 0 auto; display: grid; justify-items: center; gap: .2rem; padding: .45rem .25rem .25rem; }
.roster-toggle strong { font-size: .9rem; overflow-wrap: anywhere; }
.roster-toggle[aria-pressed="false"] .roster-emblem { filter: grayscale(1); opacity: .5; }
.roster-toggle[aria-pressed="true"] { color: var(--faction); }
.roster-names.icon-control {
  align-self: center; width: 38px; height: 36px; padding: 7px; margin: auto 0 .23rem;
  color: var(--faction); border-color: transparent; background: transparent;
}
.roster-names.icon-control svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; }
.roster-names.icon-control[data-tooltip]::after { inset-block-start: auto; inset-block-end: calc(100% + 4px); }
.roster-names.icon-control:is(:hover,:focus-visible) { background: #a0b7df19; border-color: #afc5d94a; }
.roster-toggle:hover { background: #ffffff0d; }
.roster-emblem { display: block; position: relative; width: min(76px,100%); aspect-ratio: 1; overflow: hidden; }
.roster-emblem > span { position: absolute; background-size: 300% 200%; background-repeat: no-repeat; }
.roster-editor { margin: .85rem 0 0; color: var(--faction); }
.roster-members {
  list-style: none; margin: .1rem 0 .25rem; padding: 0 .45rem; text-align: center;
  color: #e7eef8; font-size: .86rem; line-height: 1.35; overflow-wrap: anywhere;
}
.roster-members li + li { margin-top: .13rem; }
.roster-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); gap: 7px; margin-top: .35rem; }
.roster-fields > div { display: flex; gap: 4px; min-width: 0; }
.roster-fields input {
  margin: 0; min-width: 0; background: #0d1b2b; color: #f3f0e7; border: 1px solid #8596ad83;
}
.roster-fields button, .roster-add {
  min-width: 34px; border: 1px solid #8596ad83; border-radius: 6px; background: #172842; color: #e1e9f4;
}
.roster-add { margin-top: .55rem; padding: .35rem .55rem; color: var(--faction); }
#summaryProgress { font-size: .9rem; color: #d2dcea; }

.matchup-dialog {
  width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0;
  border: 0; border-radius: 0; padding: clamp(18px,4vw,60px);
  background: radial-gradient(ellipse at 50% 60%,#151e34b0,#0a1221ee 80%), var(--faction-scene) center / cover no-repeat, #0c1727;
}
.matchup-dialog[open] { display: grid; align-content: safe center; gap: clamp(12px,2.6vh,31px); }
.matchup-teams {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: start; gap: clamp(6px, 3vw, 32px);
  width: min(1220px,100%); margin: 0 auto;
}
.matchup-team {
  min-width: 0; display: grid; justify-items: center; text-align: center;
  padding: clamp(6px,1.3vw,17px) .5rem;
  background: radial-gradient(ellipse at 50% 37%, var(--faction-glow),transparent 71%);
  color: var(--faction);
}
.matchup-team .roster-emblem {
  width: min(100%, 358px, 37dvh); filter: drop-shadow(0 0 24px var(--faction-glow));
}
.matchup-team strong {
  display: block; font: 700 clamp(1rem,3.6vw,3.2rem) Copperplate, Georgia, serif;
  overflow-wrap: anywhere; line-height: 1.12; margin-top: .25rem;
  text-shadow: 0 2px 4px #080f20, 0 0 24px var(--faction-glow);
}
.matchup-members {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .38rem .65rem;
  min-width: 0; list-style: none; padding: 0; margin: .78rem 0 0;
}
.matchup-members li {
  max-width: 100%; padding: .34rem .68rem; border: 1px solid var(--faction-glow); border-radius: 4px;
  background: linear-gradient(145deg,var(--faction-glow),#101b2a99 80%);
  color: #faf1dd; font-weight: 720; font-size: clamp(.88rem,1.56vw,1.3rem); overflow-wrap: anywhere;
}
.matchup-versus {
  align-self: start; margin-top: clamp(30px,14vh,155px);
  color: #fff0c9; font: 700 clamp(1.35rem,5vw,4.6rem) Copperplate, Georgia, serif;
  text-shadow: 0 0 12px #ffe1a16b, 0 0 35px #e3a44da8;
}
.matchup-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.matchup-actions .menu-enter { display: block; width: auto; }
.matchup-actions .menu-enter:disabled {
  background: #263347; color: #c6cfdb; border-color: #8391a36e; box-shadow: none;
}
#matchupEnergy { width: min(100%, 1040px); min-height: clamp(68px,13dvh,142px); margin: -12px auto 0; }
#matchupEnergy .sqd-energy { position: relative; height: clamp(68px, 13dvh, 142px); }
@media (prefers-reduced-motion: no-preference) {
  .is-revealing .matchup-team { background: none; }
  .is-revealing .matchup-team .roster-emblem {
    animation: matchup-emblem-reveal 1.12s var(--reveal-at) cubic-bezier(.22,.7,.28,1) both;
  }
  .is-revealing .matchup-team strong {
    animation: matchup-title-enter .53s calc(var(--reveal-at) + 1050ms) cubic-bezier(.17,.76,.28,1) both;
  }
  .is-revealing .matchup-members li {
    animation: matchup-caption-enter .39s var(--name-at) ease-out both;
  }
  .is-revealing .matchup-versus {
    animation: matchup-versus-enter .89s var(--versus-at) cubic-bezier(.17,.82,.35,1) both;
  }
  @keyframes matchup-emblem-reveal {
    0% { opacity: 0; visibility: hidden; filter: brightness(0) drop-shadow(0 0 12px var(--faction)); transform: scale(.94); }
    22% { opacity: 1; visibility: visible; filter: brightness(0) drop-shadow(0 0 12px var(--faction)); }
    71% { filter: brightness(1.22) drop-shadow(0 0 21px var(--faction-glow)); }
    100% { opacity: 1; visibility: visible; filter: brightness(1) drop-shadow(0 0 24px var(--faction-glow)); transform: scale(1); }
  }
  @keyframes matchup-title-enter {
    0% { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.88); }
    47% { opacity: 1; visibility: visible; transform: translateY(0) scale(1.045);
      text-shadow: 0 0 14px var(--faction), 0 0 28px var(--faction-glow); }
    100% { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  }
  @keyframes matchup-caption-enter {
    from { opacity: 0; visibility: hidden; transform: translateY(8px); }
    to { opacity: 1; visibility: visible; transform: translateY(0); }
  }
  @keyframes matchup-versus-enter {
    0% { opacity: 0; visibility: hidden; transform: scale(.58); }
    44% { opacity: 1; visibility: visible; transform: scale(1.13); }
    100% { opacity: 1; visibility: visible; transform: scale(1); }
  }
}
.battle-factions section { border-top: 1px solid var(--faction-glow); padding: .75rem 0; }
.battle-factions p { margin: .3rem 0; color: #dce7f4; }
.mvp-teams { display: flex; flex-wrap: wrap; gap: .75rem; margin: .7rem 0; padding: 0; list-style: none; }
.mvp-teams li {
  display: flex; gap: .5rem; align-items: center; font-weight: 750; color: var(--faction);
}
.mvp-teams .roster-emblem { width: 42px; flex: 0 0 42px; }
@media (max-width:640px) {
  .roster-sides { grid-template-columns: 1fr; }
  .matchup-dialog[open] { gap: 18px; }
}

.season-header {
  display: grid; grid-template-columns: minmax(44px,1fr) minmax(0,auto) minmax(44px,1fr);
  align-items: center; gap: 8px;
}
.season-header h2 { grid-column: 2; text-align: center; margin: .2rem 0; letter-spacing: .045em; }
.battle-factions { padding: .8rem clamp(10px,2.4vw,28px); background: #0b1729bb; border-radius: 8px; }
.season-matches {
  background: #0b172be6; border: 1px solid #d6b98055;
  border-radius: 8px; padding: clamp(12px,2vw,24px);
}
.season-matches h3 { margin: 0 0 .55rem; color: #f0d6a6; font: 700 1.44rem Copperplate, Georgia, serif; }
#seasonMatches { list-style: none; padding: 0; margin: 0; }
#seasonMatches li {
  display: grid; grid-template-columns: minmax(0,1fr) repeat(2,52px);
  gap: clamp(5px,1.2vw,14px); align-items: center; padding: 6px 0; border-top: 1px solid #ffffff25;
}
.season-topic { color: #ede9dd; overflow-wrap: anywhere; }
 .season-match {
  display: grid; place-items: center; min-height: 42px; width: 44px; justify-self: end;
  border: 1px solid #a8b8cc43; border-radius: 8px; background: #15243c93; color: #b6c7d9;
}
.season-match[data-finished] { color: var(--faction,#d2eadc); background: var(--faction-glow,#2f62574a); border-color: currentColor; }
.season-match:hover { box-shadow: inset 0 0 0 1px currentColor; color: #ffe8bf; }
.season-match .roster-emblem { width: 33px; }
.season-match[data-draw] {
  background: linear-gradient(90deg, #99733850 0% 50%, #7050a050 50%);
  border-color: #d7b8de9e;
}
.season-draw-emblem { position: relative; display: block; width: 33px; aspect-ratio: 1; }
.season-draw-emblem > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faction); }
.season-draw-emblem > [data-faction="A"] { clip-path: inset(0 50% 0 0); }
.season-draw-emblem > [data-faction="B"] { clip-path: inset(0 0 0 50%); }
.season-draw-emblem > [data-faction="A"] > svg { transform: translateX(-7px) scale(.75); }
.season-draw-emblem > [data-faction="B"] > svg { transform: translateX(7px) scale(.75); }
.season-match svg, .season-feats svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.season-runes { display: flex; flex-wrap: wrap; gap: 8px; padding: .35rem 0 .85rem; }
.season-runes i {
  display: block; width: 10px; aspect-ratio: 1; transform: rotate(45deg); border: 1px solid #8794aa8c;
}
.season-runes [data-level="1"] { border-color: #e8c085; background: #e8c08547; }
.season-runes [data-level="2"] { border-color: #fff0bc; background: #f2ce7d; box-shadow: 0 0 8px #f2ce7d91; }
.season-feats { display: flex; gap: 10px; color: var(--faction); }
.season-feats span { display: inline-flex; align-items: center; gap: .3rem; }
.battle-factions .season-mvp-label { color: var(--faction); margin-top: .55rem; font-weight: 800; }
@media (max-width:440px) {
  #seasonMatches li { grid-template-columns: minmax(0,1fr) repeat(2,40px); }
  .season-match { width: 38px; }
}

#summaryClash {
  padding: 0; background: none; margin: 0 auto;
}
#summaryClash .crystal-front { height: clamp(200px, 33dvh, 410px); }
#summaryClash[data-recorded="false"] .crystal-front { opacity: .83; }
.crystal-front { isolation: isolate; }
.crystal-front svg { width: 100%; height: 100%; overflow: visible; }
.clash-field { transform: scaleX(var(--clash-to)); }
.clash-center { transform: translate(var(--clash-center-to),150px); }
.crystal-front svg path { stroke-linejoin: round; stroke-linecap: round; }
.clash-gold-glow { filter: blur(19px); opacity: .61; }
.clash-gold-body { opacity: .66; }
.clash-gold-base, .clash-gold-pulse, .clash-gold-tail, .clash-gold-filaments,
.clash-violet-loop, .clash-violet-tail, .clash-violet-tracer, .clash-violet-weave { fill: none; }
.clash-gold-base { stroke-width: 7; filter: drop-shadow(0 0 8px #fcae4c); }
.clash-gold-pulse { stroke-width: 3; stroke-dasharray: 39 88 12 110; opacity: .82; }
.clash-gold-tail { stroke-width: 2.5; opacity: .8; }
.clash-gold-filaments { stroke-width: 1.7; stroke-dasharray: 38 54 8 28; opacity: .54; }
.clash-contact-arc {
  fill: none; stroke-width: 1.85; stroke-dasharray: 25 15 12 48; opacity: .76;
}
.clash-contact-gold { stroke: #ffe0a5; filter: drop-shadow(0 0 6px #f5a54f); }
.clash-contact-violet { stroke: #e9caff; filter: drop-shadow(0 0 6px #a75eff); }
.clash-contact-echo { opacity: .24; stroke: #ffc581; }
.clash-violet-weave { stroke-width: 2.2; opacity: .84; }
.clash-ember { fill: #ffda8a; filter: drop-shadow(0 0 4px #ee8b39); opacity: .78; }
.clash-violet-fog { filter: blur(17px); opacity: .78; }
.clash-violet-veil { filter: blur(3px); opacity: .63; }
.clash-violet-loop { stroke-width: 4.5; filter: drop-shadow(0 0 7px #ae76f8); }
.clash-violet-tail { stroke-width: 4; opacity: .7; }
.clash-violet-tracer { stroke-width: 2.1; stroke-dasharray: 5 25 41 70; opacity: .74; }
.clash-mote { fill: #e8d3ff; filter: drop-shadow(0 0 6px #bd87ff); opacity: .77; }
.clash-contact-ring {
  fill: none; stroke: #f0cffd; stroke-width: 1.5; opacity: .28; transform-box: fill-box; transform-origin: center;
}
.clash-contact-core { fill: #f1c7e6; filter: drop-shadow(0 0 11px #ffbaf0); }
.clash-contact-facet { fill: #fff4d8; opacity: .94; }
.clash-contact-sparks { fill: none; stroke: #ffdbba; stroke-width: 1.35; opacity: .48; }
@media (prefers-reduced-motion: no-preference) {
  .clash-reveal-gold, .clash-reveal-violet { transform-origin: 0 0; }
  .clash-gold-drift, .clash-violet-drift {
    transform-origin: 0 150px; animation: clash-drift 5.8s ease-in-out infinite alternate;
  }
  .clash-violet-drift { animation-duration: 7.1s; animation-delay: -2s; }
  .clash-contact-drift { animation: clash-eddies 5.8s ease-in-out infinite alternate; }
  .crystal-front[data-shifting] .clash-field {
    animation: clash-surge 1.35s .55s cubic-bezier(.3,.12,.24,1) both;
  }
  .crystal-front[data-shifting] .clash-center {
    animation: clash-center-surge 1.35s .55s cubic-bezier(.3,.12,.24,1) both;
  }
  @keyframes clash-drift {
    0% { transform: skewY(-.75deg) scaleX(.97); }
    46% { transform: skewY(.95deg) scaleX(1.045); }
    100% { transform: skewY(.17deg) scaleX(1.015); }
  }
  @keyframes clash-eddies {
    0% { transform: translate(-15px,-8px) rotate(-7deg); }
    47% { transform: translate(18px,10px) rotate(6deg); }
    100% { transform: translate(-4px,-6px) rotate(-2deg); }
  }
  @keyframes clash-surge {
    from { transform: scaleX(var(--clash-from)); }
    to { transform: scaleX(var(--clash-to)); }
  }
  @keyframes clash-center-surge {
    from { transform: translate(var(--clash-center-from),150px); }
    to { transform: translate(var(--clash-center-to),150px); }
  }
  .clash-reveal-gold { animation: clash-stream 610ms cubic-bezier(.6,.1,.21,1) both; }
  .clash-reveal-violet { animation: clash-stream 760ms 70ms cubic-bezier(.39,.13,.2,1) both; }
  .clash-contact-awaken { animation: clash-awaken 1.05s 610ms ease-out both; }
  .clash-contact-arc { animation: clash-arc 3.3s 740ms linear infinite; }
  .clash-contact-violet { animation-direction: reverse; animation-duration: 4.1s; }
  .clash-contact-sparks { animation: clash-sparks .88s 720ms ease-out both; }
  .clash-violet-weave { animation: clash-violet-rise 5.6s -1.1s ease-in-out infinite alternate; transform-origin: 1000px 150px; }
  .clash-gold-filaments { animation: clash-gold-drive 1.25s linear infinite; }
  .clash-gold-body { animation: clash-gold-breath 2.4s ease-in-out infinite alternate; transform-origin: 1000px 150px; }
  .clash-gold-pulse { animation: clash-gold-drive 1.75s linear infinite; }
  .clash-ember { animation: clash-ember-travel 2.8s var(--delay) ease-out infinite; }
  .clash-violet-veil { animation: clash-violet-rise 6.2s ease-in-out infinite alternate; transform-origin: 1000px 150px; }
  .clash-violet-loop, .clash-violet-tail { animation: clash-violet-rise 4.8s ease-in-out infinite alternate; transform-origin: 1000px 150px; }
  .clash-violet-tail { animation-delay: -1.8s; }
  .clash-violet-tracer { animation: clash-violet-drive 4.4s linear infinite; }
  .clash-mote { animation: clash-mote-float 5.2s var(--delay) ease-in-out infinite; }
  .clash-contact-ring { animation: clash-impact 3.2s 750ms ease-out infinite; }
  .clash-contact-echo { animation-delay: 1.2s; }
  @keyframes clash-stream { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  @keyframes clash-awaken { 0% { opacity:0; transform:scale(.35); } 36% { opacity:1; transform:scale(1.06); } 100% { opacity:1; transform:scale(1); } }
  @keyframes clash-arc { to { stroke-dashoffset:-100; } }
  @keyframes clash-sparks {
    from { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: .9; }
    to { stroke-dasharray: 37 63; stroke-dashoffset: -59; opacity: .15; }
  }
  .clash-contact-core { animation: clash-core 2.4s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
  @keyframes clash-gold-drive { to { stroke-dashoffset: -249; } }
  @keyframes clash-gold-breath { from { transform: scaleY(.85); } to { transform: scaleY(1.13); } }
  @keyframes clash-ember-travel { from { transform:translate(-62px,13px);opacity:.14; } 40% { opacity:.9; } to { transform:translate(58px,-13px);opacity:0; } }
  @keyframes clash-violet-drive { to { stroke-dashoffset: -282; } }
  @keyframes clash-violet-rise { from { transform: skewY(-3deg) scaleY(.89); } to { transform: skewY(3deg) scaleY(1.09); } }
  @keyframes clash-mote-float { from { transform:translate(-34px,16px);opacity:.1; } 50% { opacity:.88; } to { transform:translate(38px,-18px);opacity:.1; } }
  @keyframes clash-impact { from { transform:scale(.65);opacity:.3; } to { transform:scale(1.8);opacity:0; } }
  @keyframes clash-core { from { transform:scale(.83); } to { transform:scale(1.08); } }
}
.season-header .icon-control { grid-column: 3; justify-self: end; color: #f5dfb3; }
#summaryClass { text-align: center; }

#saveRoster:disabled {
  color: #c4ccd6; background: #263347; border-color: #8693a16b; box-shadow: none;
}

#seasonMatches li { position: relative; isolation: isolate; }
.season-ribbon { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.season-ribbon svg { display: block; width: 100%; height: 100%; }
.season-ribbon::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,#102039d9 0%,#10203977 25%,#10203900 55%,#10203940);
}
.season-ribbon .clash-gold-body, .season-ribbon .clash-violet-veil { opacity: .68; animation: none; }
.season-ribbon .clash-gold-pulse { stroke-width: 10; }
.season-ribbon .clash-violet-loop { stroke-width: 10; filter: none; }
.ribbon-contact { fill: #f5d4ef; filter: blur(3px); }
.season-topic { text-shadow: 0 1px 4px #080f20; }

.season-match.icon-control { padding: 3px; }
.season-match.icon-control[data-tooltip]::after {
  inset-inline-start: auto; inset-inline-end: 0; transform: none;
  inset-block-start: auto; inset-block-end: calc(100% + 6px);
}
.season-slot {
  position: absolute; inset: auto 2px 2px auto; min-width: 13px; line-height: 13px;
  border-radius: 50%; text-align: center; color: #e9eef4; background: #111e30;
  font-size: .65rem; font-weight: 750;
}

.ribbon-push { transform-origin: 0 0; transform: scaleX(var(--ribbon-to)); }
@media (prefers-reduced-motion: no-preference) {
  .ribbon-push { animation: ribbon-takeover .95s cubic-bezier(.33,.07,.2,1) both; }
  .season-ribbon[data-takeover] .ribbon-contact { animation: ribbon-impact .32s .76s ease-out both; }
  @keyframes ribbon-takeover { from { transform: scaleX(var(--ribbon-from)); } }
  @keyframes ribbon-impact { from { opacity:0; } to { opacity:1; } }
}

.menu-header { inset-inline-end: clamp(12px,2.2vw,35px); }
.menu-audio { color: #f4dbab; background: #0d1b2bbd; }
.menu-audio[aria-pressed="true"] .audio-muted,
.menu-audio[aria-pressed="false"] .audio-waves { display: none; }
.menu-audio[data-tooltip]::after { inset-inline-start: auto; inset-inline-end: 0; transform: none; }

#powersGuide {
  width: min(760px, calc(100vw - 24px)); max-width: none;
  padding: clamp(16px, 3vw, 30px); overflow: auto;
  background: radial-gradient(ellipse at 50% 0, #284358 0%, #132539 54%, #101e31 100%);
}
#powersGuide h3 { padding: 0; font-family: Copperplate, Georgia, serif; }
.guide-tabs { display: flex; gap: 8px; margin: .9rem 0 1.2rem; }
.guide-tabs button, .guide-route button, .guide-tiles button {
  border: 1px solid #ffffff2b; border-radius: 6px; background: #0c192a;
  color: #f3e9d9; cursor: pointer;
}
.guide-tabs button { display:flex; align-items:center; gap:7px; padding:8px 14px; font-weight:760; }
.guide-tabs svg { width:20px; height:20px; }
.guide-tabs button[aria-pressed="true"] { color:#172538; background:#eed4a3; }
.guide-goal h3 { margin:0; text-align:center; font-size:clamp(1.45rem,3vw,2rem); }
.guide-route { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding:0; margin:16px 0; list-style:none; }
.guide-route button { display:grid; justify-items:center; align-content:center; gap:7px; width:100%; min-height:94px; padding:6px 2px; }
.guide-route button[aria-pressed="true"] { border-color:#f2ce85; background:#40342d; color:#ffdf9f; }
.guide-route-symbol { display:grid; place-items:center; width:32px; height:32px; font:700 1.6rem Georgia,serif; color:#efc582; }
.guide-route-symbol svg { width:30px; height:30px; }
.guide-hint { padding:.65rem .85rem; border-left:2px solid #e4bf80; background:#101e31; color:#fff1d1; }
.guide-finish { color:#d2dfef; }
.guide-charge { color:#dfebf5; }
.guide-houses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.guide-house {
  --house:#f3cf89; --house-shade:#3c3027;
  min-width:0; padding:12px; border:1px solid color-mix(in srgb,var(--house),transparent 58%); border-radius:10px;
  background:linear-gradient(150deg,var(--house-shade),#101b2d 64%);
}
.guide-house[data-side="B"] { --house:#ddbcff; --house-shade:#392a56; }
#powersGuide .guide-house h3 { color:var(--house); margin:0 0 8px; text-align:center; }
.guide-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.guide-tiles button { display:grid; grid-template-columns:auto minmax(0,1fr); text-align:left; align-items:center; gap:2px 6px; padding:6px; line-height:1.1; }
.guide-tiles button[aria-pressed="true"] { border-color:var(--house); background:var(--house-shade); }
.guide-tiles img { width:34px; height:34px; grid-row:span 2; object-fit:contain; }
.guide-tiles span { overflow-wrap:anywhere; font-weight:740; }
.guide-tiles small { color:var(--house); }
.guide-power-detail { margin-top:10px; min-height:3.2rem; }
.guide-power-detail p { color:#e7eaf5; font-size:.92rem; }
.guide-unlock { display:flex; gap:5px; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.guide-unlock li { background:#122235; border:1px solid #ffffff36; color:var(--house); padding:4px 6px; border-radius:4px; font-size:.78rem; font-weight:760; }
.guide-unlock li + li::before { content:'→ '; }
#guideNetCases:not([hidden]) { margin-top:12px; }
@media(max-width:650px) {
  .guide-route { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .guide-route button { min-height:62px; }
  .guide-tiles { grid-template-columns:1fr; }
  .guide-houses { gap:6px; }
  .guide-house { padding:7px; }
}

.menu-content h1 { position: relative; isolation: isolate; }
.menu-content h1::before {
  content: ''; position: absolute; z-index: -1; inset: 9% -7%; pointer-events: none;
  background: radial-gradient(ellipse, #e7c78d39, #d5a95b12 43%, transparent 72%);
  opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  .menu-content h1::before { animation: wordmark-halo 7s ease-in-out infinite; }
  .menu-wordmark { animation: wordmark-breath 7s ease-in-out infinite; }
  @keyframes wordmark-halo { 0%,100% { opacity:.32; } 50% { opacity:.78; } }
  @keyframes wordmark-breath { 0%,100% { transform:scale(1); } 50% { transform:scale(1.012); } }
}