/* Visuelle Veredelung ohne externe Schriftdateien. */
:root{
  --font-body:"Aptos","Segoe UI",system-ui,sans-serif;
  --font-display:"Bahnschrift","Aptos Display","Arial Narrow",sans-serif;
}

html,body{
  font-family:var(--font-body);
  font-size:15px;
  letter-spacing:.012em;
}

button,.kicker,h1,h2,h3,.score,.hud-top strong,.menu-overview small,.menu-section-label{
  font-family:var(--font-display);
}

h1{
  font-weight:800;
  letter-spacing:.075em;
  text-shadow:0 0 30px #17c7ed,0 3px 0 #0b3157;
}

h2,h3{font-weight:750}

button{font-weight:650}
button:disabled{cursor:not-allowed;filter:saturate(.35);opacity:.58}

.pause-button{
  pointer-events:auto;
  display:inline-grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:6px;
  min-width:78px;
  padding:6px 10px;
  border-radius:999px;
  border-color:#4f85ad;
  background:linear-gradient(145deg,#172f54,#0d1d38);
  color:#d7f6ff;
  box-shadow:inset 0 0 15px #50dfff12;
}

.pause-button span{font-size:13px;letter-spacing:-.15em}
.pause-button small{font-size:9px;letter-spacing:.14em}
.status-strip:empty{display:none}

.menu-screen{
  width:min(860px,94vw);
  padding:clamp(23px,3.6vw,38px);
  border-color:#356b9c;
  background:
    linear-gradient(150deg,rgba(12,31,63,.98),rgba(5,13,32,.97)),
    radial-gradient(circle at top right,#2b8fc430,transparent 42%);
}

.menu-hero{
  min-height:104px;
  padding:5px 0 9px 80px;
}

.fleet-seal{
  width:61px;
  height:61px;
  border-radius:15px;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:800;
  letter-spacing:.12em;
  background:linear-gradient(145deg,#113a63,#0b1e3c);
}

.menu-hero .lead{max-width:590px;color:#c7dced}

.menu-overview{margin:20px 0 14px;gap:10px}
.menu-overview article{
  min-height:82px;
  padding:12px;
  border-radius:8px;
  border-color:#2d6492;
  background:linear-gradient(145deg,#132b51,#0b1935);
}
.menu-overview b{font-family:var(--font-display);font-size:15px}

.menu-launch{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:17px}
.menu-launch button{
  min-height:78px;
  padding:15px 16px;
  border-radius:8px;
}
.menu-launch .menu-story{grid-column:1/-1}
.menu-launch span{font-family:var(--font-display);font-size:14px}
.menu-launch small{font-size:11px;line-height:1.35}
.menu-launch .menu-story{box-shadow:inset 0 0 24px #8ff4ff21,0 7px 20px #0ba8d51c}
.menu-launch .menu-endless{background:linear-gradient(125deg,#153c72,#384eac);border-color:#70d9ff}
.menu-launch .menu-endless.locked{border-style:dashed;box-shadow:none}
.menu-launch .menu-risk{background:linear-gradient(125deg,#3f265f,#713b79);border-color:#b987dc}
.menu-launch .menu-risk.locked{border-style:dashed;box-shadow:none}

.menu-section-label{
  margin:0 0 8px;
  color:#6fa8cc;
  font-size:10px;
  letter-spacing:.2em;
  text-align:left;
}

.menu-navigation{grid-template-columns:repeat(3,1fr);gap:9px}
.menu-navigation button{
  min-height:70px;
  padding:11px 12px;
  border-radius:7px;
  text-align:left;
  background:linear-gradient(145deg,#112545,#0d1933);
}
.menu-navigation button b{display:block;color:#d7f7ff;font-size:12px;letter-spacing:.09em}
.menu-navigation button small{display:block;margin-top:4px;color:#84a8c6;font-family:var(--font-body);font-size:10px;letter-spacing:0}

.menu-bottom{margin-top:16px;padding-top:13px}
.menu-bottom .resume-info{max-width:50%;line-height:1.4}
.menu-utility{display:flex;gap:14px;align-items:center}
.text-utility,.text-danger{
  width:auto!important;
  margin:0!important;
  padding:4px 0;
  border:0;
  background:transparent;
  font-size:9px;
  text-decoration:underline;
}
.text-utility{color:#8db6d6}
.text-utility:hover{background:transparent;box-shadow:none;color:#e4f8ff}

/* Klarere Lesbarkeit im Hauptmenü und eindeutige Upgrade-Hierarchie. */
.menu-screen .kicker{color:#c0e4fb;text-shadow:0 1px 5px #020814}
.menu-hero h2{color:#ecfaff;text-shadow:0 2px 13px #020914}
.menu-hero .lead{color:#e0effa;text-shadow:0 1px 5px #020814}
.menu-overview small{color:#b9dcef;text-shadow:0 1px 4px #020814}
.menu-overview span{color:#d3e8f7;text-shadow:0 1px 4px #020814}
.menu-overview b{color:#f0fbff;text-shadow:0 1px 6px #020814}
.menu-launch button{color:#f3fbff;text-shadow:0 1px 4px #06101e}
.menu-launch small{color:#d7e9f6;text-shadow:0 1px 4px #06101e}
.menu-launch button:disabled{color:#d5e5f2;opacity:.82}
.menu-launch button:disabled small{color:#c4d9ec}
.menu-section-label{color:#bee3fb}
.menu-navigation button b{color:#f2fbff;text-shadow:0 1px 4px #020814}
.menu-navigation button small{color:#c4dcec}
.menu-bottom .resume-info{color:#d0e3f1}

.rarity{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:3px 6px;
  border:1px solid currentColor;
  border-radius:999px;
  background:#0a152acc;
  box-shadow:inset 0 0 12px #ffffff0a;
  font-family:var(--font-display);
  font-size:9px!important;
  font-weight:800;
  letter-spacing:.11em;
  line-height:1;
  text-shadow:none;
}
.rarity.common{color:#d6e6ef;background:#20354acc}
.rarity.rare{color:#78ddff;background:#123d58cc}
.rarity.epic{color:#d6a1ff;background:#382059cc}
.rarity.legendary{color:#ffd788;background:#5a3d12cc}
.rarity.experimental{color:#ff9bc5;background:#5c1d43cc}
.choice .rarity{margin-bottom:12px}
.choice .upgrade-tier,.permanent-card .upgrade-tier{
  display:block;
  margin:9px 0 4px;
  color:#c3dcef;
  font-family:var(--font-display);
  font-size:10px;
  font-weight:750;
  letter-spacing:.1em;
}
.choice .upgrade-tier{margin-top:auto;padding-top:8px}
.permanent-card{padding-top:36px}
.permanent-card .tag.rarity{right:9px;top:9px}
.permanent-card .requirement{
  min-height:18px;
  margin:7px 0 4px;
  color:#93c7e8;
  font-family:var(--font-display);
  font-size:9px;
  font-weight:700;
  letter-spacing:.075em;
}
.permanent-card.selected .requirement{color:#83f0c3}
.workshop-note{
  margin:-8px auto 20px;
  max-width:650px;
  color:#bddcf0;
  font-family:var(--font-display);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.55;
}

.intel-screen{width:min(660px,94vw);text-align:left}
.intel-heading{display:flex;align-items:center;gap:14px;margin:12px 0 8px}
.intel-heading h2{margin:2px 0 0;color:#e4f9ff;font-size:clamp(26px,5vw,42px)}
.intel-glyph{
  --intel-color:#73e8ff;
  display:grid;
  place-items:center;
  flex:0 0 72px;
  width:72px;
  height:72px;
  border:1px solid var(--intel-color);
  border-radius:13px;
  color:var(--intel-color);
  background:#0b1b35;
  box-shadow:inset 0 0 22px color-mix(in srgb,var(--intel-color) 20%,transparent),0 0 18px color-mix(in srgb,var(--intel-color) 22%,transparent);
  font-family:var(--font-display);
  font-size:24px;
  font-weight:800;
  letter-spacing:.05em;
}
.intel-threat{display:block;color:#79b9e1;font-family:var(--font-display);font-size:10px;letter-spacing:.18em}
.intel-counter{margin:18px 0 10px;padding:12px 14px;border-left:3px solid #72ddff;background:#10254a;color:#cce0f0}
.intel-counter b{display:block;margin-bottom:4px;color:#7ae6ff;font-family:var(--font-display);font-size:10px;letter-spacing:.14em}
.intel-progress{margin:0 0 18px;color:#82a7c7;font-size:12px}

/* Hauptmenü: zentrierte Markenfläche statt einer durchgehend linken Textachse. */
.menu-screen .menu-hero{min-height:0;padding:7px 0 15px;text-align:center}
.menu-screen .fleet-seal{position:relative;left:auto;top:auto;margin:0 auto 10px;border-radius:18px;box-shadow:inset 0 0 26px #3ad6ff55,0 0 28px #4ddfff4a}
.menu-screen .menu-hero .lead{margin-left:auto;margin-right:auto;text-align:center}
.menu-screen .menu-overview article,.menu-screen .menu-navigation button{text-align:center}
.menu-screen .menu-bottom{justify-content:center;flex-wrap:wrap}
.menu-screen .menu-bottom .resume-info{text-align:center;max-width:100%}
.starfall-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:5px 0 -3px;
  color:#f4fdff;
  font-size:clamp(44px,8vw,76px);
  letter-spacing:.13em;
  text-shadow:0 0 8px #b3f7ff,0 0 24px #17c7ed,0 4px 0 #0b3157;
}
.logo-sigil{
  position:relative;
  display:inline-block;
  width:33px;
  height:33px;
  border:2px solid #9bf5ff;
  border-radius:50% 50% 50% 8px;
  transform:rotate(45deg);
  box-shadow:0 0 14px #3fe6ff,inset 0 0 12px #76eaff;
  animation:starfall-sigil 2.9s ease-in-out infinite;
}
.logo-sigil::before,.logo-sigil::after{content:"";position:absolute;background:#efffff;box-shadow:0 0 12px #8ef5ff}
.logo-sigil::before{left:50%;top:5px;width:2px;height:19px;transform:translateX(-50%)}
.logo-sigil::after{top:50%;left:5px;width:19px;height:2px;transform:translateY(-50%)}
@keyframes starfall-sigil{50%{filter:brightness(1.45);box-shadow:0 0 23px #3fe6ff,inset 0 0 17px #76eaff}}

/* Deutlich sichtbare Bossanzeige und cineastische Ankunft. */
.boss-panel{
  top:54px;
  left:50%;
  width:min(640px,64vw);
  padding:8px 14px 10px;
  transform:translateX(-50%);
  border:1px solid #b94770;
  border-radius:7px;
  background:linear-gradient(90deg,#240f26e8,#4a1834ed,#240f26e8);
  box-shadow:0 0 26px #ff4f7e70,inset 0 0 18px #ff9ab62b;
}
.boss-panel:not(.hidden){animation:boss-hud-in .36s ease-out}
.boss-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.boss-heading b{color:#fff0f4;font-size:13px;letter-spacing:.16em;text-shadow:0 0 12px #ff7ba1}
.boss-heading span{font-family:var(--font-display);font-size:9px;font-weight:800;letter-spacing:.12em}
.boss-signal{color:#ffadc1;text-align:left}
#bossHealth{color:#ffe2a8;text-align:right}
.boss-meter{height:12px;margin:7px 0 5px;border-color:#d6678e;background:#160b1d;box-shadow:inset 0 0 10px #000b}
.boss-meter i{background:linear-gradient(90deg,#ff2f6e,#ff7d6b 58%,#ffd473);box-shadow:0 0 12px #ff557e}
.boss-panel span:last-child{color:#ffd3de;font-family:var(--font-display);font-weight:800;letter-spacing:.12em}
.boss-entry{
  position:fixed;
  z-index:2;
  top:22%;
  left:50%;
  width:min(720px,86vw);
  padding:16px 22px;
  transform:translate(-50%,-50%);
  border-top:1px solid #ff9eb9;
  border-bottom:1px solid #ff9eb9;
  background:linear-gradient(90deg,transparent,#300f24e6 18%,#4c1935f2 50%,#300f24e6 82%,transparent);
  color:#ffe6ec;
  pointer-events:none;
  text-align:center;
  text-shadow:0 0 16px #ff5a86;
}
.boss-entry p,.boss-entry b,.boss-entry small{display:block;margin:0}
.boss-entry p{color:#ffadbf;font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.28em}
.boss-entry b{margin:4px 0;color:#fff2f5;font-family:var(--font-display);font-size:clamp(22px,4vw,42px);letter-spacing:.12em}
.boss-entry small{color:#ffe4a7;font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.18em}
.boss-entry-line{position:absolute;top:50%;width:12%;height:1px;background:#ffb1c7;box-shadow:0 0 12px #ff547e}
.boss-entry-line:first-child{left:0}.boss-entry-line:last-child{right:0}
.boss-entry.active{animation:boss-entry 2.55s cubic-bezier(.18,.72,.2,1) both}
@keyframes boss-hud-in{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes boss-entry{0%{opacity:0;transform:translate(-50%,-65%) scale(1.16);filter:blur(4px)}14%{opacity:1}76%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-42%) scale(.98)}}

/* Gegneranalyse zeigt bei der ersten Sichtung Schiff und Angriffsmuster. */
.intel-preview-wrap{margin:16px 0 18px;text-align:center}
.intel-preview{display:block;width:100%;height:auto;border:1px solid #3976a0;border-radius:10px;background:#07152d;box-shadow:inset 0 0 32px #70ddff17,0 8px 22px #0005}
.intel-preview-wrap small{display:block;margin-top:7px;color:#9bc5df;font-family:var(--font-display);font-size:9px;font-weight:800;letter-spacing:.16em}

/* Kompakte, detailreiche Top-3-Karten. */
.records-note{max-width:630px;margin:-7px auto 17px;color:#c2dbed;font-size:12px;line-height:1.5}
.leaderboards{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.board{padding:0;overflow:hidden;border-color:#315c86;background:linear-gradient(145deg,#112344,#0c1832)}
.board header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #2e5c86;background:#152e54}
.board header b{color:#e9f9ff;font-family:var(--font-display);font-size:10px;letter-spacing:.11em}
.board header span{padding:2px 5px;border:1px solid #4f82ab;border-radius:999px;color:#9edcf8;font-family:var(--font-display);font-size:8px;font-weight:800;letter-spacing:.1em}
.record-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.record-row{display:grid;grid-template-columns:29px 1fr;gap:8px;align-items:center;min-height:53px;padding:8px 10px;border-bottom:1px solid #24486e}
.record-row:last-child{border-bottom:0}
.record-row strong{display:grid;place-items:center;width:25px;height:25px;border:1px solid #567fa4;border-radius:50%;color:#ccefff;font-family:var(--font-display);font-size:11px}
.record-row:first-child strong{border-color:#ffd36d;color:#ffe2a0;box-shadow:0 0 12px #ffc86b30}
.record-row:nth-child(2) strong{border-color:#b4cadc;color:#ddecf7}
.record-row:nth-child(3) strong{border-color:#ce936d;color:#ffd0ad}
.record-row div{min-width:0}
.record-row b{overflow:hidden;color:#f3fbff;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:12px;letter-spacing:.035em}
.record-row small{display:block;overflow:hidden;margin-top:2px;color:#a9c7dc;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.record-row.empty{opacity:.55}

@media (pointer:coarse){.boss-panel{top:52px;width:min(680px,78vw)}.boss-entry{top:19%}}
@media (max-width:680px){.boss-panel{top:50px;width:82vw;padding:7px 9px}.boss-heading{gap:5px}.boss-signal{display:none}.boss-heading{grid-template-columns:1fr auto}.leaderboards{grid-template-columns:1fr}.board header b{font-size:9px}.starfall-logo{font-size:clamp(37px,11vw,58px)}.logo-sigil{width:27px;height:27px}.intel-preview{border-radius:7px}}
@media (prefers-reduced-motion:reduce){.logo-sigil,.boss-entry.active,.boss-panel:not(.hidden){animation:none!important}}

@media (pointer:coarse){
  .pause-button{display:none}
  .round.pause{font-size:10px;letter-spacing:-.1em}
}

@media (max-width:680px){
  .menu-hero{min-height:0;padding-left:0}
  .fleet-seal{position:static;margin-bottom:10px}
  .menu-overview{grid-template-columns:1fr}
  .menu-overview article{min-height:60px}
  .menu-launch,.menu-navigation{grid-template-columns:1fr}
  .menu-navigation button{min-height:61px}
  .menu-bottom{align-items:flex-start;flex-direction:column}
  .menu-bottom .resume-info{max-width:none}
  .intel-heading{align-items:flex-start}
}

/* Klarer Upgrade-Look: jede Seltenheit färbt die gesamte Karte, nicht nur das Label. */
.choice-grid{align-items:stretch}
.choice.rarity-card{
  display:flex;
  min-height:246px;
  flex-direction:column;
  align-items:flex-start;
  padding:16px;
  border-width:1px;
  border-left-width:5px;
  color:#eaf7ff;
  text-align:left;
}
.choice.rarity-card .rarity{align-self:flex-start;margin:0 0 12px}
.choice.rarity-card .choice-title{
  display:block;
  width:100%;
  margin:0 0 8px;
  color:#f4fbff;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:900;
  letter-spacing:.07em;
  line-height:1.18;
}
.choice.rarity-card p{display:block;margin:0;color:#d7e9f4;font-size:12px;line-height:1.55}
.choice.rarity-card .upgrade-tier{width:100%;margin-top:auto;padding-top:11px;border-top:1px solid #ffffff24;color:#d6ecfa}
.choice.rarity-card.rarity-common,.permanent-card.rarity-common{border-color:#93c5de;background:linear-gradient(145deg,#2a4a5fe8,#14283cf2 72%);box-shadow:inset 0 0 26px #8bd8ff18}
.choice.rarity-card.rarity-rare,.permanent-card.rarity-rare{border-color:#61d8ff;background:linear-gradient(145deg,#0f5777ed,#102b47f4 72%);box-shadow:inset 0 0 28px #44dfff24}
.choice.rarity-card.rarity-epic,.permanent-card.rarity-epic{border-color:#cb92ff;background:linear-gradient(145deg,#562b7fe8,#281844f5 72%);box-shadow:inset 0 0 29px #c783ff2b}
.choice.rarity-card.rarity-legendary,.permanent-card.rarity-legendary{border-color:#ffd16b;background:linear-gradient(145deg,#735014ec,#39270cf5 72%);box-shadow:inset 0 0 30px #ffc75b32}
.choice.rarity-card.rarity-experimental,.permanent-card.rarity-experimental{border-color:#ff82bb;background:linear-gradient(145deg,#76264fec,#351126f5 72%);box-shadow:inset 0 0 30px #ff72b33b}
.choice.rarity-card:hover{filter:brightness(1.12);box-shadow:0 10px 28px #0008,inset 0 0 30px #ffffff1c}
.permanent-card{border-left-width:5px}
.permanent-card.rarity-common b{color:#e9f7ff}.permanent-card.rarity-rare b{color:#a8ebff}.permanent-card.rarity-epic b{color:#e1b8ff}.permanent-card.rarity-legendary b{color:#ffe3a2}.permanent-card.rarity-experimental b{color:#ffc0db}
.permanent-card .upgrade-tier{color:#e7f5ff}

/* Das Hauptmenü ist in zwei kurze, eindeutig benannte Bereiche geteilt. */
.menu-group{margin-top:15px}
.menu-group .menu-section-label{margin:0 0 7px;text-align:left}
.menu-navigation{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.menu-navigation button{min-height:64px}
.menu-fleet button{min-height:70px}

/* E bleibt jederzeit lesbar: Desktop-HUD plus beschriftete Touch-Tasten. */
.ability-strip{
  position:absolute;
  bottom:calc(16px + var(--safe-b));
  left:50%;
  display:flex;
  gap:8px;
  transform:translateX(-50%);
  pointer-events:none;
}
.ability-chip{
  display:grid;
  grid-template-columns:auto 1fr;
  min-width:142px;
  padding:6px 9px;
  border:1px solid #5b79a1;
  border-radius:7px;
  background:linear-gradient(145deg,#122641e8,#091727ed);
  box-shadow:0 7px 18px #0008,inset 0 0 15px #7acfff12;
  color:#b9cee1;
  column-gap:7px;
  text-align:left;
}
.ability-chip b{grid-row:span 2;align-self:center;color:#89cfff;font-family:var(--font-display);font-size:20px;line-height:1;text-shadow:0 0 11px #48bfff}
.ability-chip span{align-self:end;color:#d9ecf9;font-family:var(--font-display);font-size:9px;font-weight:900;letter-spacing:.13em}
.ability-chip small{align-self:start;color:#91b5cf;font-family:var(--font-display);font-size:8px;font-weight:800;letter-spacing:.08em}
.ability-chip.ready{border-color:#77e5d1;background:linear-gradient(145deg,#123f46ed,#0c2432f4);box-shadow:0 0 20px #58ebca36,inset 0 0 18px #75e9d11d}
.ability-chip.ready b{color:#9affdf;text-shadow:0 0 12px #56f2c6}.ability-chip.ready small{color:#a5ffdf}
.ability-chip.ultimate{border-color:#b78b44;background:linear-gradient(145deg,#3c2a12ed,#20180df4)}
.ability-chip.ultimate b{color:#ffd879;text-shadow:0 0 12px #ffc857}.ability-chip.ultimate.ready{border-color:#ffe17c;background:linear-gradient(145deg,#6c4a13ef,#362409f6);box-shadow:0 0 24px #ffc85747,inset 0 0 20px #ffdf7724}.ability-chip.ultimate.ready small{color:#fff0ad}
.round.special,.round.ultimate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1}
.round.special b,.round.ultimate b{font-family:var(--font-display);font-size:17px}.round.special small,.round.ultimate small{font-size:7px;font-weight:900;letter-spacing:.02em}.round.ultimate.ready{border-color:#ffe28d;box-shadow:0 0 18px #ffc857aa}.round.special.ready{border-color:#9effed;box-shadow:0 0 17px #72ffe0a0}

@media (pointer:coarse){.ability-strip{display:none}}
@media (max-width:680px){.menu-navigation{grid-template-columns:1fr}.menu-group .menu-section-label{text-align:center}.choice.rarity-card{min-height:154px}.choice.rarity-card .upgrade-tier{margin-top:12px}}

/* Abschluss-Pass: größere, besser lesbare Einsatzanzeigen und klare Kartentypografie. */
.hud-top strong{font-size:clamp(14px,1.28vw,18px);line-height:1.22}
.hud-top span{max-width:min(42vw,510px);font-size:clamp(11px,1.02vw,14px);line-height:1.35}
.score span{font-size:clamp(23px,2.1vw,31px)}
.score small{font-size:11px}
.pause-button{min-width:68px;padding:8px 11px}
.pause-button span{font-size:16px}.pause-button small{font-size:10px}
.hud-bottom{gap:22px}
.vitals{gap:7px}
.vitals .vital{grid-template-columns:72px minmax(178px,25vw) 44px;gap:8px;color:#d5edff;font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.07em}
.vitals .vital .meter{height:10px}
.vitals .vital b{color:#f0fbff;text-align:right;font-size:12px}
.hud-stats{min-width:164px}
.hud-stats b,.hud-stats span{font-size:13px}
.hud-stats .meter{height:10px;margin:5px 0}
.status-strip{max-width:390px;font-size:12px}
.status-chip{margin:3px;padding:4px 7px;border-radius:4px;font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.07em}

/* Seltenheit steht immer oberhalb des Modulnamens; die Karte selbst trägt die Farbe. */
.permanent-card{
  display:flex;
  min-height:204px;
  flex-direction:column;
  align-items:flex-start;
  padding:16px;
}
.permanent-card .tag.rarity{
  position:static;
  align-self:flex-start;
  order:0;
  margin:0 0 10px;
  padding:4px 7px;
  border-radius:4px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
}
.permanent-card>b{order:1;width:100%;margin:0 0 6px;font-family:var(--font-display);font-size:16px;line-height:1.18;letter-spacing:.065em}
.permanent-card .upgrade-tier{order:2;margin:0 0 9px;font-size:10px;font-weight:800;letter-spacing:.1em}
.permanent-card p{order:3;margin:0;color:#eff8ff;font-size:13px;line-height:1.45}
.permanent-card .requirement{order:4;margin-top:auto;padding-top:10px;font-size:10px;font-weight:800;letter-spacing:.08em}
.permanent-card button{order:5;margin-top:8px}
.permanent-card .permanent-buy{display:flex;min-height:42px;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1.1}
.permanent-card .permanent-buy>span{font-family:var(--font-display);font-size:10px;font-weight:900;letter-spacing:.08em}
.permanent-card .permanent-buy>small{margin:0;color:#d6efff;font-family:var(--font-display);font-size:9px;font-weight:800;letter-spacing:.08em}
.permanent-card .permanent-buy:disabled>small{color:#b3c9da}
.vitals .vital #shieldText{font-size:11px;letter-spacing:0}
@media (pointer:coarse){.vitals .vital #shieldText{font-size:9px}}
.choice.rarity-card .rarity{font-size:11px;font-weight:900;letter-spacing:.14em}
.choice.rarity-card .choice-title{font-size:clamp(16px,1.45vw,19px)}
.choice.rarity-card p{font-size:13px;line-height:1.55}

/* Der Endlosmodus zeigt ab Welle 12 vier stapelbare Arsenal-Optionen, ohne die Standard-Upgrades zu verdichten. */
#screen-upgrade.infinite-upgrade{width:min(920px,95vw)}
#screen-upgrade.infinite-upgrade .choice-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#screen-upgrade.infinite-upgrade .choice.rarity-card{min-height:220px}
#screen-upgrade.infinite-upgrade .choice.rarity-card .upgrade-tier{font-size:10px;letter-spacing:.075em}
@media (max-width:850px){#screen-upgrade.infinite-upgrade .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#screen-upgrade.infinite-upgrade .choice-grid{grid-template-columns:1fr}}

.result-reason{
  min-height:22px;
  margin:-7px auto 14px;
  color:#d2e7f6;
  font-size:13px;
  line-height:1.45;
}
#screen-result .result-reason:not(:empty){padding:8px 10px;border-left:3px solid #75dfff;background:#102746}
#screen-result:has(#resultKicker:not(:empty)) .result-reason{max-width:560px}

.ship-ability-detail{
  width:100%;
  margin:10px 0 2px;
  padding:9px 10px;
  border:1px solid #3a658a;
  border-radius:6px;
  background:#08172bd9;
}
.ship-ability-detail p{margin:0 0 7px!important;color:#cfe8f7!important;font-size:11px;line-height:1.42}
.ship-ability-detail p:last-child{margin-bottom:0!important}
.ship-ability-detail b{display:inline!important;margin-right:5px;color:#ffd982!important;font-size:9px;letter-spacing:.12em}

.tactical-map{
  position:absolute;
  z-index:3;
  top:118px;
  right:calc(18px + var(--safe-r));
  width:296px;
  padding:8px;
  border:1px solid #4c88b4;
  border-radius:8px;
  background:linear-gradient(145deg,#091a31f2,#07111fe9);
  box-shadow:0 12px 34px #000b,inset 0 0 20px #67dcff18;
  color:#bce8ff;
  pointer-events:none;
}
.tactical-map header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-family:var(--font-display);font-size:10px;font-weight:900;letter-spacing:.14em}
.tactical-map header b{padding:1px 5px;border:1px solid #6c9fc0;border-radius:3px;color:#f2fbff;font-size:10px}
.tactical-map canvas{display:block;width:100%;height:auto;border:1px solid #315f83;background:#061124}
.tactical-map small{display:block;margin-top:5px;color:#82bcd8;font-family:var(--font-display);font-size:8px;font-weight:800;letter-spacing:.1em;text-align:center}

@media (pointer:coarse){
  .hud-top strong{font-size:13px}
  .hud-top span{max-width:52vw;font-size:10px}
  .vitals .vital{grid-template-columns:48px minmax(108px,28vw) 31px;gap:5px;font-size:9px}
  .vitals .vital .meter{height:8px}
  .vitals .vital b{font-size:10px}
  .status-strip{max-width:190px;font-size:9px}
  .tactical-map{top:76px;right:10px;width:min(280px,72vw)}
}
@media (max-width:680px){
  .permanent-card{min-height:0}
  .permanent-card>b{font-size:15px}
  .result-details{grid-template-columns:repeat(2,1fr)}
  .result-reason{font-size:12px}
}

/* Ruhige, schmale Scrollleisten: keine Pfeile und kein schwerer Rahmen. */
.screen{
  scrollbar-width:thin;
  scrollbar-color:#4f9ac3 transparent;
}
.screen::-webkit-scrollbar{width:6px;height:6px}
.screen::-webkit-scrollbar-track{background:transparent}
.screen::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(#65c8e9,#397fa9)}
.screen::-webkit-scrollbar-button{display:none;width:0;height:0}

/* Die Markenfläche bleibt exakt mittig: das Zeichen sitzt über STARFALL. */
.menu-screen{
  width:min(980px,96vw);
  max-height:calc(100dvh - 18px);
  padding:clamp(18px,2.8vw,34px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
.menu-screen::-webkit-scrollbar{display:none}
.menu-screen .menu-hero{padding:2px 0 10px}
.menu-screen .fleet-seal{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin:0 auto 8px;
  border-radius:18px;
  background:radial-gradient(circle at 35% 28%,#277fb3,#0a1e3d 70%);
}
.menu-screen .fleet-seal .logo-sigil{width:28px;height:28px}
.menu-screen .starfall-logo{gap:0;margin:2px 0 -3px;letter-spacing:.16em}
.menu-screen .menu-hero h2{margin:4px 0 8px}
.menu-screen .menu-hero .lead{max-width:680px;font-size:clamp(12px,1.35vw,15px);line-height:1.45}
.menu-screen .menu-overview{margin:14px 0 11px;gap:11px}
.menu-screen .menu-overview article{min-height:78px;padding:11px 12px}
.menu-screen .menu-launch{margin-bottom:12px}
.menu-screen .menu-launch button{min-height:70px}
.menu-screen .menu-group{margin-top:10px}
.menu-screen .menu-navigation button{min-height:62px}
.menu-screen .menu-bottom{margin-top:11px;padding-top:9px}

/* Größere, präzisere Mehrfinger-Steuerung mit sichtbarem Druck-Feedback. */
.touch-controls{--touchScale:1;--touchOpacity:.92}
.touch-controls .joystick{
  width:clamp(124px,16vw,166px);
  height:clamp(124px,16vw,166px);
  border-color:#8eeaffaa;
  background:radial-gradient(circle at 42% 38%,#2f82b55c,#0a264a42 68%,transparent 70%);
  box-shadow:inset 0 0 22px #64e9ff2b,0 0 18px #0b9bd033;
  transform:scale(var(--touchScale));
}
.touch-controls .joystick.left{transform-origin:bottom left}
.touch-controls .joystick.right{bottom:calc(176px + var(--safe-b));transform-origin:bottom right}
.touch-controls .joystick i{
  left:30%;
  top:30%;
  width:40%;
  height:40%;
  border:1px solid #c4f9ff;
  background:radial-gradient(circle at 35% 30%,#d9ffff,#5dcae7 58%,#1d699a);
  box-shadow:0 0 18px #7cedffcc;
}
.touch-controls .joystick.active{border-color:#e1fcff;box-shadow:inset 0 0 27px #80f3ff68,0 0 26px #45deff78}
.touch-controls .round{
  width:68px;
  height:68px;
  border-color:#82dbf2a8;
  background:linear-gradient(145deg,#214f80e8,#112c55e8);
  box-shadow:inset 0 0 18px #7ceaff24,0 6px 16px #03101a66;
  transform:scale(var(--touchScale));
}
.touch-controls .round.fire{background:linear-gradient(145deg,#cd386b,#7e1749)}
.touch-controls .round.boost{background:linear-gradient(145deg,#327db5,#173c76)}
.touch-controls .round.special{background:linear-gradient(145deg,#6951c9,#352579)}
.touch-controls .round.ultimate{background:linear-gradient(145deg,#b28236,#624313)}
.touch-controls .round.pressed{filter:brightness(1.3);box-shadow:inset 0 0 24px #ffffff65,0 0 22px #83eaffb3}
.touch-controls .round.pause{width:46px;height:46px;transform-origin:top right}
.touch-controls .round.fire,.touch-controls .round.ultimate{transform-origin:bottom right}
.touch-controls .round.alt,.touch-controls .round.special{transform-origin:bottom right}
.touch-controls .round.boost,.touch-controls .round.dash{transform-origin:bottom right}

@media (min-height:720px){.menu-screen{overflow:hidden}}
@media (max-height:720px) and (min-width:681px){
  .menu-screen{width:min(1040px,97vw);padding:13px 22px}
  .menu-screen .fleet-seal{width:42px;height:42px;margin-bottom:3px;border-radius:13px}
  .menu-screen .fleet-seal .logo-sigil{width:22px;height:22px}
  .menu-screen .starfall-logo{font-size:clamp(35px,5.4vw,54px);margin:0}
  .menu-screen .menu-hero h2{margin:2px 0 4px;font-size:18px}
  .menu-screen .menu-hero .lead{font-size:11px;line-height:1.25}
  .menu-screen .menu-overview{margin:7px 0;gap:8px}
  .menu-screen .menu-overview article{min-height:53px;padding:7px 9px}
  .menu-screen .menu-overview small{font-size:8px}
  .menu-screen .menu-overview b{margin:1px 0;font-size:12px}
  .menu-screen .menu-overview span{font-size:9px}
  .menu-screen .menu-launch{gap:8px;margin-bottom:7px}
  .menu-screen .menu-launch button{min-height:51px;padding:8px 12px}
  .menu-screen .menu-launch span{font-size:12px}
  .menu-screen .menu-launch small{font-size:9px}
  .menu-screen .menu-group{margin-top:5px}
  .menu-screen .menu-section-label{margin-bottom:4px;font-size:8px}
  .menu-screen .menu-navigation{gap:7px}
  .menu-screen .menu-navigation button{min-height:43px;padding:7px 9px}
  .menu-screen .menu-navigation button b{font-size:10px}
  .menu-screen .menu-navigation button small{margin-top:1px;font-size:8px}
  .menu-screen .menu-bottom{margin-top:6px;padding-top:6px}
  .menu-screen .menu-bottom .resume-info,.menu-screen .text-utility,.menu-screen .text-danger{font-size:8px}
}
@media (orientation:portrait) and (pointer:coarse){
  .touch-controls .joystick{width:clamp(116px,34vw,154px);height:clamp(116px,34vw,154px)}
  .touch-controls .joystick.right{bottom:calc(186px + var(--safe-b))}
  .touch-controls .round{width:62px;height:62px}
  .touch-controls .round.fire{right:calc(25px + var(--safe-r));bottom:calc(48px + var(--safe-b))}
  .touch-controls .round.alt{right:calc(96px + var(--safe-r));bottom:calc(40px + var(--safe-b))}
  .touch-controls .round.boost{right:calc(166px + var(--safe-r));bottom:calc(51px + var(--safe-b))}
  .touch-controls .round.dash{right:calc(164px + var(--safe-r));bottom:calc(120px + var(--safe-b))}
  .touch-controls .round.special{right:calc(94px + var(--safe-r));bottom:calc(118px + var(--safe-b))}
  .touch-controls .round.ultimate{right:calc(25px + var(--safe-r));bottom:calc(120px + var(--safe-b))}
}

/* Lokale Fortsetzungen stehen auf großen Bildschirmen links neben dem Hauptmenü. */
.menu-screen.has-run-saves{
  display:grid;
  grid-template-columns:minmax(210px,250px) minmax(0,1fr);
  align-items:center;
  column-gap:18px;
  width:min(1280px,96vw);
}
.menu-main-content{min-width:0}
.run-save-panel{
  min-width:0;
  padding:13px 16px 13px 0;
  border-right:1px solid #4a86ae80;
  text-align:left;
}
.run-save-panel .kicker{margin:0 0 5px;color:#81daf3;font-size:9px;font-weight:900}
.run-save-panel h2{margin:0 0 8px;color:#effbff;font-family:var(--font-display);font-size:17px;letter-spacing:.09em;line-height:1.15}
.run-save-intro{margin:0 0 13px;color:#9bc4dc;font-size:11px;line-height:1.42}
.run-save-list{display:grid;gap:9px}
.run-save-card{
  padding:10px;
  border:1px solid #3d7398;
  border-left:3px solid #54cce8;
  border-radius:7px;
  background:linear-gradient(145deg,#102a47eb,#091827ee);
  box-shadow:inset 0 0 18px #5cdcff0c;
}
.run-save-card.infinite{border-left-color:#c184ff;background:linear-gradient(145deg,#2a1e4deb,#100f2aee)}
.run-save-card small,.run-save-card b,.run-save-card span{display:block}
.run-save-card small{margin-bottom:3px;color:#83dff5;font-family:var(--font-display);font-size:8px;font-weight:900;letter-spacing:.11em}
.run-save-card.infinite small{color:#d3aaff}
.run-save-card b{color:#f1fbff;font-family:var(--font-display);font-size:12px;letter-spacing:.055em}
.run-save-card span{min-height:30px;margin:4px 0 8px;color:#9fc4d9;font-size:10px;line-height:1.35}
.run-save-card>div{display:grid;grid-template-columns:1fr 30px;gap:6px}
.run-save-card button{min-height:33px;padding:6px 7px;font-family:var(--font-display);font-size:9px;font-weight:900;letter-spacing:.08em}
.run-save-card .run-save-delete{padding:0;border-color:#71455e;background:#241727;color:#ffc0d3;font-size:19px;line-height:1}
.run-save-card .run-save-delete:hover,.run-save-card .run-save-delete:focus-visible{background:#512238}
@media (min-height:720px){.menu-screen.has-run-saves{overflow:visible}}
@media (max-width:780px){
  .menu-screen.has-run-saves{display:flex;flex-direction:column;width:min(860px,94vw);max-height:calc(100dvh - 18px);overflow-y:auto;gap:0}
  .menu-screen.has-run-saves .menu-main-content{width:100%}
  .run-save-panel{order:2;width:100%;margin-top:14px;padding:14px 0 0;border-top:1px solid #4a86ae80;border-right:0;text-align:center}
  .run-save-list{grid-template-columns:repeat(2,minmax(0,1fr));text-align:left}
}
@media (max-width:500px){.run-save-list{grid-template-columns:1fr}}

/* Benutzerdefinierte, lokal gespeicherte GUI-Größe. Auf kleinen Desktop-Displays
   begrenzt main.js den Wert automatisch, damit der Zugang zu Einstellungen erhalten bleibt. */
:root{--gui-scale:1}
.settings-note{margin:-8px auto 16px;max-width:620px;color:#a9cde2;font-size:12px;line-height:1.45}
.setting-range{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;align-items:center}
.setting-range output{min-width:48px;color:#bfeeff;font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.05em;text-align:right}
@supports (zoom:1){
  #overlay .screen{zoom:var(--gui-scale)}
  @media (pointer:fine){#hud{zoom:var(--gui-scale)}}
}