/* Startseite (#modeScreen .startPage): ruhiger Hero mit der Katze auf dem
   Titel, darunter vier Spielwege und drei Fraktionen. Laedt als letzte Datei
   und ueberschreibt gezielt die aelteren Startseiten-Regeln aus main-02/04/05/06. */

/* ── Kopfleiste: nur, wenn sie etwas zu sagen hat ──
   Kein "Client / Start", keine Saison. Waehrung nur mit Konto, Status nur,
   wenn die Engine nicht erreichbar ist. Bleibt nichts uebrig, faellt sie weg. */
body.mode-select .startCrumb,
body.mode-select .startStats .seasonStat { display: none; }
body.mode-select:not(.mp-registered) .startStats .walletStat { display: none; }
body.mode-select .startStats .statusStat:not(:has([data-state="offline"])) { display: none; }
body.mode-select:not(.mp-registered) .startTopbar:not(:has(#serverStatus[data-state="offline"])) { display: none; }

.startPage { grid-template-columns: minmax(0, 1fr); }
.startPage .startSectionHead[hidden] { display: none; }
.startPage .startSectionHead .btn { flex: none; white-space: nowrap; }
/* Alle Abschnitte auf derselben Flucht (main-05 gab den Fraktionen mehr Breite). */
.startSectionHead--faction,
.factionShowcase.factionTrio {
  --home-gutter: max(64px, calc((100vw - var(--side-nav-width) - var(--home-content)) / 2));
}

/* ── Hero ── */
.startHero { position: relative; }
/* Etwas tiefer ansetzen: oben braucht die Katze samt Blase Luft. */
@media (min-width: 1101px) {
  .startHero { padding: 64px 0 36px; }
}
.startHero h2::after { content: attr(data-tagline); }
.startHero .modeChoices { margin-bottom: 22px; }
body.mode-select .startHero .heroLive { pointer-events: auto; }
.heroPerchProbe { display: inline-block; width: 0; height: 0; }

.heroLive {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--mp-ink-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.heroLive[hidden] { display: none; }
.heroLiveDot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mp-teal-1);
}
.heroLiveDot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--mp-teal-1);
  border-radius: 50%;
  opacity: 0;
  animation: heroLivePing 2.8s ease-out infinite;
}
@keyframes heroLivePing {
  0% { opacity: .55; transform: scale(.6); }
  70%, 100% { opacity: 0; transform: scale(1.6); }
}

/* ── Die Katze auf dem C (render/mascot.js + app/hero-cat.js) ──
   Pfoten und Schwanz gibt es nur hier. Der Anker (left/top aus hero-cat.js)
   ist die Oberkante des C; die Figur steht mit ihrer Pfotenlinie (viewBox
   y=94 von 120) darauf, der Schwanz ragt links hoch, rechts spricht sie. */
.coachCat-tail,
.coachCat-paws { display: none; }

.mascotCompanion.heroCat {
  --cat-w: 90px;
  position: absolute;
  left: 0;
  bottom: auto;
  z-index: 4;
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
  animation: none;
}
.mascotCompanion.heroCat.is-perched {
  visibility: visible;
  animation: heroCatArrive .7s cubic-bezier(.22, .8, .24, 1) .25s both;
}
.mascotCompanion.heroCat.is-settled { animation: none; }
@keyframes heroCatArrive {
  from { opacity: 0; translate: 0 10px; }
}
.heroCat .mascotCompanion-figure {
  position: absolute;
  left: calc(var(--cat-w) / -2);
  top: calc(var(--cat-w) * -94 / 120 + 2px);
  display: block;
  width: var(--cat-w);
  margin: 0;
}
.heroCat .mascotCompanion-cat .coachCat {
  width: var(--cat-w);
  color: #e9cf8a;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6));
}
/* Ruhiges Atmen statt Wippen: die Pfoten bleiben auf der Kante. Niedrige
   Spezifitaet, damit Sprechen, Streicheln, Jubeln usw. weiter gewinnen. */
:where(.heroCat) .coachCat {
  transform-origin: 50% 78%;
  animation: heroCatBreathe 4.6s ease-in-out infinite;
}
@keyframes heroCatBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012, 1.03); }
}
.heroCat .coachCat-paws { display: inline; fill: #0b0d12; }
.heroCat .coachCat-tail {
  display: inline;
  transform-box: fill-box;
  transform-origin: 100% 100%;
  animation: heroCatTail 5.4s ease-in-out infinite;
}
.heroCat .is-sleeping .coachCat-tail,
body.cat-muted .heroCat .coachCat-tail { animation-play-state: paused; }
@keyframes heroCatTail {
  0%, 100% { transform: rotate(5deg); }
  50% { transform: rotate(-8deg); }
}
/* Zeigt der Mauszeiger auf "Jetzt spielen", freut sie sich mit. */
.heroCat.is-eager .coachCat-mouthClosed { opacity: 0; }
.heroCat.is-eager .coachCat-mouthHappy { opacity: 1; }

/* Sprechblase rechts neben dem Gesicht, das Schwaenzchen zeigt auf den Mund
   (viewBox y~72, also .18 der Bildbreite ueber der Kante). Feste Breite: beim
   Eintippen waechst sie nicht mit, nur nach oben, wenn eine Zeile dazukommt.
   Sie ist nur offen, solange die Katze nach einem Klick spricht (.is-speaking,
   mascot-speech.js): sie waechst aus dem Mund heraus und zieht sich danach
   wieder dorthin zurueck. */
.heroCat .mascotCompanion-bubble {
  position: absolute;
  left: calc(var(--cat-w) * .25 + 16px);
  bottom: calc(var(--cat-w) * .18 - 22px);
  display: flex;
  align-items: center;
  width: 252px;
  max-width: none;
  min-height: 48px;
  margin: 0;
  padding: 10px 15px 11px;
  border-color: rgba(216, 177, 90, .3);
  border-radius: 12px;
  background: #080a0e;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  font-size: 15.5px;
  line-height: 1.45;
  text-wrap: pretty;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px) scale(.9);
  transform-origin: -9px calc(100% - 22px);
  transition: opacity .3s ease, transform .35s ease-in, visibility 0s linear .35s;
}
.heroCat.is-speaking .mascotCompanion-bubble {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
/* Schwaenzchen: gedrehtes Quadrat in Blasenfarbe; seine zwei Kanten fuehren
   den Rahmen ohne Naht weiter. Mitte 22px ueber der Blasen-Unterkante. */
.heroCat .mascotCompanion-bubble::before {
  left: -7px;
  bottom: 15.5px;
  width: 13px;
  height: 13px;
  border: 0;
  border-left: 1px solid rgba(216, 177, 90, .3);
  border-bottom: 1px solid rgba(216, 177, 90, .3);
  border-bottom-left-radius: 2px;
  background: #080a0e;
  transform: rotate(45deg);
}
.heroCat .mascotCompanion-bubble::after { display: none; }
.heroCat .mascotCompanion-tip { min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .heroCat .mascotCompanion-bubble,
  .heroCat.is-speaking .mascotCompanion-bubble { transform: none; transition: opacity .2s ease, visibility 0s; }
}

@media (max-width: 1100px), (max-height: 700px) {
  .heroCat .mascotCompanion-bubble { display: none; }
}

/* ── Spielwege: vier ruhige Kacheln ── */
.homeModes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 -64px;
  padding: 0 var(--home-gutter, 64px) 64px;
  background: rgba(7, 8, 11, .9);
}
.homeModes .homeMode {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: start;
  min-height: 196px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(216, 177, 90, .16);
  background: linear-gradient(180deg, rgba(20, 23, 31, .72), rgba(11, 13, 18, .9));
  color: var(--mp-bone);
  text-align: left;
  transition: border-color .25s ease, background-color .25s ease;
}
.homeModes .homeMode::before,
.homeModes .homeMode::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--mp-gold-3);
  transition: border-color .25s ease;
  pointer-events: none;
}
.homeModes .homeMode::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.homeModes .homeMode::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.homeModes .homeMode:hover,
.homeModes .homeMode:focus-visible {
  border-color: rgba(216, 177, 90, .42);
  background-color: rgba(28, 24, 16, .5);
  outline: none;
}
.homeModes .homeMode:hover::before,
.homeModes .homeMode:hover::after,
.homeModes .homeMode:focus-visible::before,
.homeModes .homeMode:focus-visible::after { border-color: var(--mp-gold-1); }
.homeModeArt {
  position: absolute;
  top: 14px;
  right: 14px;
  width: min(46%, 112px);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 10px 9px rgba(0, 0, 0, .65));
  transition: transform .4s cubic-bezier(.22, .8, .24, 1), filter .4s ease;
}
.homeMode:hover .homeModeArt,
.homeMode:focus-visible .homeModeArt {
  transform: translateY(-6px);
  filter: drop-shadow(0 18px 12px rgba(0, 0, 0, .6));
}
.homeModeTitle {
  font-family: var(--mp-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.1;
}
.homeModeSub {
  margin-top: 6px;
  color: var(--mp-ink);
  font-family: var(--mp-serif-body);
  font-size: 15.5px;
  line-height: 1.35;
}

/* ── Fraktionen: drei gleich gebaute Karten ── */
.factionShowcase.factionTrio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-bottom: 56px;
}
.factionTrio::after { content: none; }
.factionTrio .factionPanel {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  padding: 0;
}
.factionTrio .factionPanel:hover { transform: none; }
.factionPanel.classic {
  background: linear-gradient(135deg, #15130f, #0d0c0a 60%);
}
.factionPanel.classic:hover {
  border-color: rgba(216, 177, 90, .45);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .7);
}
.factionTrio .factionPanel.pirates:hover,
.factionTrio .factionPanel.undead:hover { box-shadow: 0 16px 50px rgba(0, 0, 0, .7); }
.factionTrio .factionPortrait {
  flex: none;
  min-height: 0;
  aspect-ratio: 6 / 5;
  border: 0;
  border-bottom: 1px solid rgba(216, 177, 90, .22);
  box-shadow: none;
}
.factionTrio .factionPortraitImage { transition: background-image .25s ease, transform .6s cubic-bezier(.22, .8, .24, 1); }
.factionTrio .factionPanel:hover .factionPortraitImage { transform: scale(1.03); }
.factionTrio .factionPortraitThumb { width: 32px; height: 32px; }
.factionTrio .factionInner {
  flex: 1;
  padding: 20px 24px 22px;
}
.factionTrio .factionPanel h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 32px;
}
.factionGo {
  color: var(--mp-gold-1);
  font-family: var(--mp-sans);
  font-size: 20px;
  opacity: 0;
  translate: -8px 0;
  transition: opacity .25s ease, translate .3s cubic-bezier(.22, .8, .24, 1);
}
.factionPanel:hover .factionGo,
.factionPanel:focus-visible .factionGo { opacity: 1; translate: 0 0; }
.factionTrio .factionEpithet { margin-bottom: 18px; font-size: 16px; }
.factionTrio .factionStats {
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 0 0 18px;
  padding: 14px 0;
}
.factionTrio .factionStat {
  display: grid;
  grid-template-columns: minmax(84px, 38%) 1fr;
  align-items: center;
  gap: 12px;
}
.factionTrio .factionStat .label { margin: 0; }
.factionPanel.classic .factionStat .bar .fill {
  background: linear-gradient(90deg, #b08530, #f0d27a);
}
/* Werte laufen einmal voll, wenn die Karten ins Bild kommen (controls-home.js). */
.factionTrio.js-reveal .factionStat .bar .fill { transform: scaleX(0); }
.factionTrio.js-reveal.is-seen .factionStat .bar .fill {
  transform: scaleX(var(--stat, .5));
  transition: transform 1s cubic-bezier(.22, .8, .24, 1);
}
.factionTrio.is-seen .factionStat:nth-child(2) .fill { transition-delay: .12s; }
.factionTrio.is-seen .factionStat:nth-child(3) .fill { transition-delay: .24s; }
/* Figuren nur als Bild, der Name bleibt fuer Screenreader. */
.factionTrio .factionPieces { gap: 8px; margin: 0; }
.factionTrio .factionPieceChip {
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
}
.factionTrio .factionPieceChip .pieceThumb {
  width: 36px;
  height: 36px;
  transition: transform .25s cubic-bezier(.22, .8, .24, 1);
}
.factionTrio .factionPieceChip:hover .pieceThumb,
.factionTrio .factionPieceChip:focus-visible .pieceThumb { transform: translateY(-3px); }
.factionTrio .factionPieceChip[data-piece-dossier]:hover { transform: none; }
.factionPanel.classic .factionPieceChip[data-piece-dossier]:hover,
.factionPanel.classic .factionPieceChip[data-piece-dossier]:focus-visible { border-color: rgba(216, 177, 90, .55); }
.pieceChipName {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Abschluss: die Welt-Inschrift als ruhige letzte Zeile ── */
.startPage > .worldInscription {
  grid-column: 1 / -1;
  justify-content: center;
  margin: 0 -64px;
  padding: 6px 32px 8px;
  background: rgba(7, 8, 11, .9);
}

/* ── Schmalere Fenster ── */
.factionTrio .factionPanel > * { max-width: none; }
@media (max-width: 1100px) {
  .homeModes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Fuer drei Karten zu schmal: untereinander, Bild links, Text rechts. */
@media (min-width: 701px) and (max-width: 1179px) {
  .factionShowcase.factionTrio { grid-template-columns: minmax(0, 1fr); }
  .factionTrio .factionPanel { flex-direction: row; }
  .factionTrio .factionPortrait {
    width: 40%;
    aspect-ratio: auto;
    min-height: 300px;
    border-bottom: 0;
    border-right: 1px solid rgba(216, 177, 90, .22);
  }
}

/* ── Handy (body.mp-phone, <=700px) ── */
body.mp-phone .startSectionHead--faction,
body.mp-phone .factionShowcase.factionTrio { --home-gutter: 16px; }
body.mp-phone .modeChoices #startTraining { grid-column: 1 / -1; }
body.mp-phone .homeModes {
  margin-inline: -16px;
  width: calc(100% + 32px);
  max-width: none;
  gap: 10px;
  padding-bottom: 44px;
}
body.mp-phone .homeModes .homeMode { min-height: 148px; padding: 14px 14px 13px; }
body.mp-phone .homeModeArt { top: 10px; right: 10px; width: 52%; }
body.mp-phone .homeModeTitle { font-size: 19px; }
body.mp-phone .homeModeSub { font-size: 13.5px; }
/* Handy: Karten nebeneinander zum Wischen, die naechste schaut an. */
body.mp-phone .factionShowcase.factionTrio {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  padding-bottom: 44px;
}
body.mp-phone .factionTrio::-webkit-scrollbar { display: none; }
body.mp-phone .factionTrio .factionPanel { scroll-snap-align: start; }
body.mp-phone .factionTrio .factionPanel h3 { font-size: 28px; }
body.mp-phone .factionGo { opacity: 1; translate: 0 0; }
body.mp-phone .startPage > .worldInscription {
  width: calc(100% + 32px);
  max-width: none;
  margin: 0 -16px;
  padding-inline: 16px;
}