:root {
    --void: #05060f;
    --panel: #0c0e1f;
    --line: #1e2242;
    --cyan: #4df3ff;
    --magenta: #ff3fa4;
    --amber: #ffb547;
    --hot: #fdf6e3;
    --text: #d9dcf5;
    --muted: #767ba8;
    --ion: #c98bff;
    --ionc: #4ee39b;
    /* Kristall und Artefakt-Wuerfel als Zeichen der beiden Waehrungen. Als Maske gesetzt,
       damit sie die Textfarbe erben und ueberall mitwachsen. */
    --wuerfel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M10 1 19 6v10l-9 5-9-5V6z'/%3E%3Cpath d='M1 6l9 5 9-5M10 11v10'/%3E%3C/g%3E%3C/svg%3E");
    --kristall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 0 13 6.2 7 18 1 6.2Z' fill='%23000'/%3E%3C/svg%3E");
    --display: "Orbitron", "Chakra Petch", system-ui, sans-serif;
    --body: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  }
  html, body { height: 100%; }
  body { margin: 0; background: var(--void); color: var(--text); font-family: var(--body); overflow: hidden; user-select: none; }
  #game { display: block; width: 100vw; height: 100vh; }
  #game canvas { display: block; }

  /* HUD */
  .hud { position: fixed; inset: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
  .hud .tl, .hud .tr, .hud .bl, .hud .br { position: absolute; display: grid; gap: 10px; }
  .hud .tl { top: 16px; left: 20px; }
  .hud .tr { top: 58px; right: 20px; text-align: right; justify-items: end; } /* Platz für den Stumm-Knopf darüber */
  .hud .bl { bottom: 16px; left: 20px; }
  .hud .br { bottom: 16px; right: 20px; text-align: right; justify-items: end; }
  .label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
  .value { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; }
  .value.small { font-size: 18px; }
  .pips { display: flex; gap: 5px; }
  .pips i { width: 12px; height: 12px; border: 2px solid var(--cyan); transform: rotate(45deg); box-shadow: 0 0 8px var(--cyan); }
  .pips i.off { border-color: var(--line); box-shadow: none; }
  .pips.amber i { border-color: var(--amber); box-shadow: 0 0 8px var(--amber); border-radius: 50%; transform: none; }
  .pips.amber i.off { border-color: var(--line); box-shadow: none; }
  /* Geleitschutz: kleine Pfeilspitzen, damit sie nicht mit den Leben verwechselt werden */
  .pips.esc i { width: 0; height: 0; border: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-bottom: 11px solid var(--cyan); transform: none; box-shadow: none; filter: drop-shadow(0 0 6px var(--cyan)); }
  .pips.esc i.off { border-bottom-color: var(--line); filter: none; }
  .bar { width: 180px; height: 6px; background: var(--line); position: relative; }
  .bar.wide { width: 220px; height: 8px; }
  .label span { color: var(--text); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; margin-left: 6px; }
  .bar b { position: absolute; inset: 0; width: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transition: width .15s; }
  #sp { color: var(--amber); font-size: 12px; letter-spacing: .12em; opacity: 0; transition: opacity .3s; }
  #sp.on { opacity: 1; animation: blink 1.2s infinite; }
  @keyframes blink { 50% { opacity: .35; } }
  #bossbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(420px, 60vw); display: none; text-align: center; }
  #bossbar .bar { width: 100%; height: 8px; }
  #bossbar .bar b { background: var(--magenta); box-shadow: 0 0 12px var(--magenta); }
  #weapon { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--cyan); }
  #weapon small { color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: .15em; }

  /* Overlays */
  .overlay { position: fixed; inset: 0; z-index: 6; overflow-x: hidden; display: grid; place-items: center; background: rgba(5,6,15,.82); text-align: center; padding: 20px; overflow: auto; }
  .overlay[hidden] { display: none; }
  h1 {
    font-family: var(--display); font-weight: 900; font-size: clamp(52px, 11vw, 128px); letter-spacing: .14em; margin: 0; line-height: 1;
    background: linear-gradient(90deg, var(--cyan), var(--hot) 55%, var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 22px rgba(77,243,255,.35)) drop-shadow(0 0 22px rgba(255,63,164,.3));
  }
  .sub { color: var(--muted); letter-spacing: .32em; text-transform: uppercase; font-size: 12px; margin-top: 10px; }
  .rules { margin: 30px auto 0; max-width: 540px; text-align: left; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
  /* 150px fasst auch das längste Ein-Wort-Label (VERSCHMELZUNG braucht 148px) in eine Zeile */
  .rules div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline; }
  kbd { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--hot); border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px; text-align: center; background: var(--panel); overflow-wrap: anywhere; }
  .btn { margin-top: 28px; font-family: var(--display); font-weight: 800; letter-spacing: .2em; font-size: 15px; padding: 13px 32px; color: var(--void); background: var(--cyan); border: 0; cursor: pointer; box-shadow: 0 0 26px rgba(77,243,255,.35); }
  .btn:hover, .btn:focus-visible { background: var(--hot); outline: 2px solid var(--magenta); outline-offset: 3px; }
  .final { font-family: var(--display); font-size: clamp(40px, 8vw, 88px); font-weight: 800; color: var(--amber); margin: 10px 0 0; }
  .stats { display: flex; gap: 28px; justify-content: center; margin-top: 18px; }
  .stats div { display: grid; gap: 4px; }
  .stats .value { font-size: 22px; }

  /* Skill tree */
  #tree { align-items: start; }
  .treebox { width: min(1040px, 100%); text-align: left; margin: 10px auto; }
  .treehead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .treehead h2 { font-family: var(--display); font-size: 22px; letter-spacing: .2em; margin: 0; }
  .treehead .points { font-family: var(--display); font-size: 22px; color: var(--amber); }
  .treehead .points small { color: var(--muted); font-size: 11px; letter-spacing: .2em; margin-left: 8px; }
  .weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 14px 0 18px; }
  .rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
  .branches { display: grid; gap: 16px; }
  .row {
    position: relative; border: 1px solid var(--line); background: var(--panel); padding: 9px 11px 10px;
    display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; gap: 3px 9px; align-items: center;
    cursor: pointer; transition: border-color .15s, background .15s;
  }
  .row .ico { grid-row: 1 / span 3; align-self: start; margin-top: 1px; color: var(--cat); filter: drop-shadow(0 0 5px var(--cat)); }
  .row .name { font-weight: 600; font-size: 13px; line-height: 1.2; }
  .row .name small { font-size: 9px; letter-spacing: .18em; color: var(--cat); margin-left: 6px; }
  .row .chip { font-family: var(--display); font-size: 10px; letter-spacing: .06em; color: var(--cat); white-space: nowrap; text-align: right; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .row .desc { grid-column: 2 / span 2; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
  .row .meter { grid-column: 2; }
  .row .cnt { grid-column: 3; font-family: var(--display); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
  .row .mini { grid-column: 2 / span 2; margin-top: 4px; padding: 5px 8px; font-size: 11px; }
  .row.can { border-color: color-mix(in srgb, var(--cat) 55%, var(--line)); }
  .row.can:hover { background: color-mix(in srgb, var(--cat) 10%, var(--panel)); border-color: var(--cat); }
  .row.locked { opacity: .42; cursor: default; }
  .row.locked .chip { color: var(--muted); font-family: var(--body); letter-spacing: 0; }
  .row.maxed { cursor: default; background: color-mix(in srgb, var(--cat) 7%, var(--panel)); }
  .row.maxed .chip { color: var(--muted); }
  .row.active { box-shadow: inset 0 0 0 1px var(--cat); }
  .meter { display: flex; gap: 2px; height: 7px; margin-top: 3px; }
  .meter i { flex: 1; background: var(--line); border-radius: 1px; }
  .meter i.on { background: var(--cat); box-shadow: 0 0 6px var(--cat); }
  .pcat { border-left: 3px solid var(--cat); padding-left: 12px; }
  .pcat header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--cat); }
  .pcat header h3 { font-family: var(--display); font-size: 13px; letter-spacing: .25em; text-transform: uppercase; margin: 0; }
  .pcat header span { font-size: 10px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
  .pcat header em { margin-left: auto; font-style: normal; font-family: var(--display); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .perks { display: grid; gap: 16px; }
  .sbtn { font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: .06em; padding: 7px 10px; background: transparent; color: var(--text); border: 1px solid var(--line); cursor: pointer; }
  .sbtn:hover:not(:disabled) { border-color: var(--cat, var(--cyan)); color: var(--cat, var(--cyan)); }
  .sbtn:disabled { opacity: .4; cursor: default; }
  .treefoot { display: flex; justify-content: flex-end; margin-top: 8px; }
  .treefoot .btn { margin-top: 0; }
  /* Ionen + Werft */
  .ionval { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ionc);
    display: flex; align-items: center; gap: 6px; }
  .ionval::before { content: ""; width: 11px; height: 14px; flex: 0 0 auto; background: currentColor;
    -webkit-mask: var(--kristall) center / contain no-repeat; mask: var(--kristall) center / contain no-repeat; }
  .btnrow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .btn.ghost { background: transparent; color: var(--ion); border: 1px solid var(--ion); box-shadow: none; }
  .btn.ghost:hover, .btn.ghost:focus-visible { background: rgba(201,139,255,.12); color: var(--hot); }
  .balance { margin-top: 26px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .balance b { color: var(--ionc); font-family: var(--display); font-size: 16px; letter-spacing: .05em; margin-left: 8px; }
  .balance b::before { content: ""; display: inline-block; width: 10px; height: 13px; margin-right: 7px;
    vertical-align: -1px; background: currentColor;
    -webkit-mask: var(--kristall) center / contain no-repeat; mask: var(--kristall) center / contain no-repeat; }
  #hangar { align-items: start; }
  .hbox { width: min(1040px, 100%); text-align: left; margin: 10px auto; }
  .hbox .treehead h2 { color: var(--ion); }
  .hbox .points { color: var(--ion); }
  .hintline { font-size: 13px; color: var(--muted); margin: 12px 0 16px; line-height: 1.5; max-width: 70ch; }
  /* Eigener Track */
  .trackrow { margin: 22px auto 0; max-width: 560px; border: 1px dashed var(--line); padding: 12px 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; font-size: 13px; line-height: 1.4; }
  .trackrow.hot { border-color: var(--ion); background: rgba(201,139,255,.06); }
  .trackrow .sbtn { flex: 0; padding: 8px 12px; white-space: nowrap; }
  .trackrow .sbtn.load { color: var(--ion); border-color: var(--ion); }
  .trackrow b { color: var(--ion); }
  .trackrow .muted { color: var(--muted); }
  #trackbar { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: min(360px, 50vw); display: none; text-align: center; }
  #trackbar .bar { width: 100%; }
  #trackbar .bar b { background: var(--ion); box-shadow: 0 0 10px var(--ion); transition: none; }
  body.dragging::after { content: "Track hier ablegen"; position: fixed; inset: 0; display: grid; place-items: center; background: rgba(201,139,255,.15); border: 3px dashed var(--ion); font-family: var(--display); font-size: 28px; letter-spacing: .2em; color: var(--ion); pointer-events: none; z-index: 9; }
  @media (max-width: 760px) { .trackrow { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Musik-Bibliothek */
.trackbtns { display: grid; gap: 6px; }
.hbox.narrow { width: min(720px, 100%); }
.hbox code { font-family: var(--display); font-size: 11px; color: var(--ion); }
#liblist { grid-template-columns: 1fr; }
#liblist .row { grid-template-rows: auto auto; }
#liblist .row .ico { grid-row: 1 / span 2; }
#liblist .row .desc { grid-column: 2; }
#liblist .row .chip { grid-row: 1 / span 2; font-size: 11px; }
#liblist .row.loading { opacity: .6; cursor: progress; }
#liblist .empty { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 10px 0; }
#liblist .row .name { grid-column: 2; grid-row: 1; }
#liblist .row .chip { grid-column: 3; }
#liblist .row .desc { grid-row: 2; }

/* Schwierigkeit */
.diffrow { margin: 22px auto 0; max-width: 560px; display: grid; gap: 8px; justify-items: center; }
.diffs { display: flex; gap: 0; border: 1px solid var(--line); }
.diff { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .14em; padding: 9px 16px; background: transparent; color: var(--muted); border: 0; border-right: 1px solid var(--line); cursor: pointer; }
.diff:last-child { border-right: 0; }
.diff:hover:not(:disabled) { color: var(--hot); }
.diff.on { color: var(--void); background: var(--amber); box-shadow: 0 0 18px rgba(255,181,71,.35); }
.diff.locked { opacity: .4; cursor: default; }
.diff.locked::before { content: "⌧ "; font-size: 10px; }
.diffdesc { font-size: 12px; color: var(--text); text-align: center; line-height: 1.5; max-width: 60ch; }
.diffdesc .lock { color: var(--muted); }
.unlock { margin-top: 16px; font-family: var(--display); font-size: 13px; letter-spacing: .12em; color: var(--amber); text-shadow: 0 0 14px rgba(255,181,71,.5); }

/* Gaben */
.boonbox { width: min(980px, 100%); text-align: center; }
.boontitle { font-family: var(--display); font-size: clamp(28px, 5vw, 44px); letter-spacing: .25em; margin: 6px 0 0; color: var(--hot); text-shadow: 0 0 24px rgba(253,246,227,.35); }
.hintline.center { text-align: center; margin: 8px auto 18px; }
.treefoot.center { justify-content: center; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { position: relative; border: 1px solid var(--rar); background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 12%, var(--panel)), var(--panel)); padding: 18px 16px 20px; cursor: pointer; display: grid; gap: 8px; justify-items: center; transition: transform .12s, box-shadow .12s; box-shadow: 0 0 0 rgba(0,0,0,0); }
.card:hover { transform: translateY(-3px); box-shadow: 0 0 28px color-mix(in srgb, var(--rar) 40%, transparent); }
.card .cathead { position: absolute; top: 8px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-family: var(--display); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--cat); }
.card .cathead em { font-style: normal; color: var(--muted); }
.card .ico { color: var(--cat); filter: drop-shadow(0 0 8px var(--cat)); margin-top: 14px; }
.card .bname { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-wrap: balance; }
.card .rar { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--rar); }
.card .bdesc { font-size: 13px; line-height: 1.45; color: var(--text); max-width: 26ch; text-wrap: balance; }
.card .have { font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }

/* Sieg */
.victories { margin-top: 8px; font-family: var(--display); font-size: 12px; letter-spacing: .2em; color: var(--amber); }
#over.victory .sub { color: var(--amber); text-shadow: 0 0 16px rgba(255,181,71,.6); }
#over.victory .final { color: var(--hot); text-shadow: 0 0 30px rgba(255,181,71,.6); }

/* Gaben-Karten: Tags, Verwandlung, Kern, Duo */
.card .tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.card .tags i { font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--line); color: var(--muted); }
.card .tags i.on { border-color: var(--cat); color: var(--cat); }
.card .evo { font-size: 11px; color: var(--muted); line-height: 1.4; max-width: 28ch; }
.card .evo.soon { color: var(--amber); }
.card .evo b { color: var(--text); }
.card.core { background: linear-gradient(180deg, rgba(255,181,71,.16), var(--panel)); border-width: 2px; }
.card.core .bname { color: var(--amber); }
.card.duo { background: linear-gradient(180deg, rgba(201,139,255,.16), var(--panel)); border-width: 2px; }
.card.duo .bname { color: var(--ion); }
.buildname { margin-top: 16px; font-size: 13px; color: var(--muted); max-width: 60ch; margin-left: auto; margin-right: auto; line-height: 1.5; }
.buildname b { font-family: var(--display); color: var(--hot); letter-spacing: .08em; }
.diffs { flex-wrap: wrap; }

#focusind { font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: .3em; color: var(--magenta); text-shadow: 0 0 14px var(--magenta); animation: blink 1s infinite; }

/* Hauptmenü mit zwei Modi */
.menu { width: min(980px, 100%); }
.modes { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; margin: 26px auto 0; text-align: left; }
.mode { position: relative; border: 1px solid var(--line); background: var(--panel); padding: 22px 20px 18px; display: grid; gap: 10px; align-content: start; }
.mode .cathead { font-family: var(--display); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }
.mode h3 { font-family: var(--display); font-size: 26px; letter-spacing: .18em; margin: 0; color: var(--cyan); }
.mode.track h3 { color: var(--ion); }
.mode p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.mode .btn { margin-top: 6px; justify-self: start; }
.mode.track .btn { background: var(--ion); box-shadow: 0 0 26px rgba(201,139,255,.35); }
.mode .trackrow { margin: 4px 0 0; max-width: none; grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; }
.btnrow.tight { justify-content: flex-start; gap: 6px; }
.btnrow.tight .sbtn { padding: 6px 10px; font-size: 11px; }
.stars { color: var(--amber); letter-spacing: .1em; }
.setup { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.setup .diffrow { margin-top: 14px; max-width: none; }
.setup .diffdesc { font-size: 11.5px; }
.combo { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--amber); min-height: 18px; }
.combo.hot { color: var(--hot); text-shadow: 0 0 14px var(--amber); }
.bar.center { margin: 18px auto 0; }
.trackbest { margin-top: 10px; font-family: var(--display); font-size: 12px; letter-spacing: .15em; color: var(--ion); }
@media (max-width: 760px) { .modes, .setup { grid-template-columns: 1fr; } }

#liblist .row.listen { border-color: var(--ion); background: color-mix(in srgb, var(--ion) 10%, var(--panel)); }
#liblist .row.listen .chip::before { content: "▶ Hörprobe · "; color: var(--ion); }

/* Menüfluss */
.mainnav { display: grid; gap: 10px; max-width: 420px; margin: 30px auto 0; }
.navbtn { display: grid; gap: 3px; text-align: left; padding: 16px 20px; background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: border-color .15s, transform .12s; }
.navbtn span { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .22em; }
.navbtn small { font-size: 12px; color: var(--muted); }
.navbtn:hover { border-color: var(--cyan); transform: translateX(4px); }
.navbtn.primary { border-color: var(--cyan); background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 14%, var(--panel)), var(--panel)); }
.navbtn.primary span { color: var(--cyan); }
.menu.narrow { width: min(640px, 100%); }
.menu .diffrow { max-width: none; margin-top: 18px; }
.menu .diffdesc { font-size: 13px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card.locked { opacity: .45; cursor: default; }
.card.locked:hover { transform: none; box-shadow: none; }
.card .wl { display: flex; gap: 3px; width: 100%; height: 5px; }
.card .wl i { flex: 1; background: var(--line); }
.card .wl i.on { background: var(--cat); box-shadow: 0 0 6px var(--cat); }
@media (max-width: 900px) { .cards.four { grid-template-columns: 1fr 1fr; } }

.row .desc .now { margin-top: 4px; font-size: 11px; color: var(--muted); }
.row .desc .now b { color: var(--cat); font-weight: 600; }

.card.pfad { background: linear-gradient(180deg, rgba(253,246,227,.14), var(--panel)); border-width: 2px; border-color: var(--hot); }
.card.pfad .bname { color: var(--hot); text-shadow: 0 0 14px rgba(253,246,227,.4); }

/* Mutatoren */
.muts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 10px 0 6px; }
.mutbtn { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; text-align: left; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.mutbtn .ico { grid-row: 1 / span 2; color: var(--muted); }
.mutbtn span { font-family: var(--display); font-size: 11px; letter-spacing: .12em; }
.mutbtn small { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.mutbtn.on { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--panel)); }
.mutbtn.on .ico, .mutbtn.on span { color: var(--amber); }
.mutbtn.locked { opacity: .45; cursor: default; }

#polind { font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: .22em; }

/* Setlist + Touch */
.setbtn { padding: 2px 8px !important; margin-left: 8px; font-size: 12px !important; }
.setpos { color: var(--ion) !important; }
.touchbar { position: fixed; right: 12px; bottom: 90px; display: none; flex-direction: column; gap: 8px; z-index: 5; }
body.touch .touchbar { display: flex; }
.touchbar button { width: 64px; height: 44px; border: 1px solid var(--line); background: rgba(12,14,31,.75); color: var(--text); font-family: var(--display); font-size: 9px; letter-spacing: .12em; touch-action: none; }
.touchbar button:active { border-color: var(--cyan); color: var(--cyan); }

#wsel .diffrow { margin-top: 16px; max-width: none; }

.modes { grid-template-columns: 1fr 1.25fr 1fr; }
.mode.arena h3 { color: var(--amber); }
.mode.arena .btn { background: var(--amber); box-shadow: 0 0 26px rgba(255,181,71,.35); }
@media (max-width: 900px) { .modes { grid-template-columns: 1fr; } }
/* Koop liegt als breite Zeile unter den drei Modi — er ist Arcade zu zweit, kein vierter Modus */
.mode.koop { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 24px; }
.mode.koop .cathead { grid-column: 1 / -1; }
.mode.koop h3 { background: linear-gradient(90deg, var(--p1), var(--p2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mode.koop .btn { margin-top: 0; background: linear-gradient(90deg, var(--p1), var(--p2)); box-shadow: 0 0 26px color-mix(in srgb, var(--p2) 30%, transparent); }
@media (max-width: 900px) { .mode.koop { grid-template-columns: 1fr; } }

.runstats { margin-top: 14px; flex-wrap: wrap; gap: 14px 22px; }
.runstats .value { font-size: 18px; }
.achstats { justify-content: flex-start; flex-wrap: wrap; gap: 12px 26px; margin: 14px 0 18px; }
.achstats .value { font-size: 20px; }
#achlist .row .desc b { color: var(--amber); font-weight: 600; }

/* Hüllen-Karten mit Werte-Balken */
/* Vor dem Abflug: ein Schiff, groß und scharf, daneben die Wahl der Waffengattung */
.shiprow { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 28px; align-items: center; width: 100%; text-align: left; }
.shipbox { text-align: center; }
.shipbox canvas { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 26px rgba(77,243,255,.32)); }
.shipname { margin-top: 10px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .18em; color: var(--text); }
.shipname small { display: block; margin-top: 4px; font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.wpicks { display: grid; gap: 12px; min-width: 0; }
@media (max-width: 820px) { .shiprow { grid-template-columns: 1fr; gap: 14px; } .shipbox { max-width: 210px; margin: 0 auto; } }
.hullcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; text-align: left; }
.hullcard { border: 1px solid var(--line); background: var(--panel); padding: 12px 12px 14px; display: grid; gap: 6px; cursor: pointer; transition: border-color .15s, transform .12s; }
.hullcard:hover:not(.locked) { transform: translateY(-3px); border-color: var(--hot); }
.hullcard.on { border-color: var(--amber); box-shadow: 0 0 22px rgba(255,181,71,.25); }
.hullcard.locked { opacity: .5; cursor: default; }
.hullcard .hullpic { width: 100%; height: auto; justify-self: center; filter: drop-shadow(0 0 10px rgba(77,243,255,.35)); }
.hullcard .hname { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .06em; }
.hullcard .hname small { font-size: 9px; letter-spacing: .18em; color: var(--amber); margin-left: 6px; }
.hullcard .hdesc { font-size: 11.5px; color: var(--muted); line-height: 1.4; min-height: 46px; }
.hstats { display: grid; gap: 4px; }
.hstat { display: grid; grid-template-columns: 62px 1fr auto; gap: 6px; align-items: center; font-size: 10px; color: var(--muted); }
.hstat i { position: relative; display: block; height: 7px; background: var(--line); }
.hstat i b { position: absolute; inset: 0; width: 0; background: var(--muted); }
.hstat i em { position: absolute; top: -3px; width: 2px; height: 13px; background: var(--hot); opacity: .8; }
.hstat.plus i b { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.hstat.minus i b { background: var(--magenta); box-shadow: 0 0 6px var(--magenta); }
.hstat .hv { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.hstat .hv u { text-decoration: none; font-size: 9px; }
.hstat.plus .hv u { color: var(--cyan); } .hstat.minus .hv u { color: var(--magenta); }
.hspecial { font-size: 10.5px; color: var(--amber); letter-spacing: .06em; }
@media (max-width: 900px) { .hullcards { grid-template-columns: 1fr 1fr; } }

#mapcanvas { width: 100%; height: auto; border: 1px solid var(--line); background: #070917; display: block; }
#mapbonus b, #mapinfo b { color: var(--ion); }
#mapinfo .sbtn { margin-left: 10px; }

/* Footer, Impressum */
.footer { margin-top: 18px; font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.linkbtn { background: none; border: 0; color: var(--muted); font: inherit; letter-spacing: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.linkbtn:hover { color: var(--cyan); }
.legal { text-align: left; font-size: 13.5px; line-height: 1.55; }
.legal p { margin: 10px 0; }
.legal h3 { font-family: var(--display); font-size: 13px; letter-spacing: .2em; margin: 22px 0 6px; color: var(--cyan); }
.legal .placeholder { color: var(--amber); }

/* Kaufbare Einträge pulsieren, Gaben-Karten tragen die Seltenheit auch im Hintergrund */
@keyframes canpulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cat) 0%, transparent); background: color-mix(in srgb, var(--cat) 6%, var(--panel)); }
  50% { box-shadow: 0 0 14px 2px color-mix(in srgb, var(--cat) 45%, transparent); background: color-mix(in srgb, var(--cat) 16%, var(--panel)); }
}
.row.can { animation: canpulse 1.6s ease-in-out infinite; border-color: var(--cat); }
.row.can .chip { color: var(--hot); text-shadow: 0 0 8px var(--cat); }
.card { background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 26%, var(--panel)), color-mix(in srgb, var(--rar) 8%, var(--panel))); box-shadow: inset 0 0 40px color-mix(in srgb, var(--rar) 18%, transparent); }
.card:hover { box-shadow: inset 0 0 40px color-mix(in srgb, var(--rar) 26%, transparent), 0 0 28px color-mix(in srgb, var(--rar) 45%, transparent); }
.card.core { background: linear-gradient(180deg, rgba(255,181,71,.3), rgba(255,181,71,.08)); }
.card.duo { background: linear-gradient(180deg, rgba(201,139,255,.3), rgba(201,139,255,.08)); }
.card.pfad { background: linear-gradient(180deg, rgba(253,246,227,.24), rgba(253,246,227,.06)); }
@media (prefers-reduced-motion: reduce) { .row.can { animation: none; } }

/* Kompakter Skillbaum: drei Spalten, einzeilige Skills, Detail-Feld rechts */
/* Werteleiste im Skillbaum: was das Schiff gerade leistet, in zwei Spalten
   (im Flug / im Fokus). Schmale Zahlenspalten, damit die Zeilen ruhig untereinander stehen. */
.wstats { border: 1px solid var(--line); background: rgba(10,14,30,.6); padding: 8px 12px 9px; margin: 0 0 12px; }
.wshead, .wsrow { display: grid; grid-template-columns: 1fr 92px 92px; gap: 8px; align-items: baseline; }
.wshead { font-family: var(--display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--line); }
.wshead span { color: var(--cyan); letter-spacing: .16em; }
.wshead i { font-style: normal; text-align: right; }
.wsrow { font-size: 12px; color: var(--muted); line-height: 1.75; }
.wsrow i { font-style: normal; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.wsrow b { font-family: var(--display); font-size: 14px; color: var(--hot); font-weight: 800; }
.wsrow em { font-style: normal; color: var(--amber); font-family: var(--display); font-size: 12px; }
.wsfuss { margin-top: 6px; font-size: 10.5px; line-height: 1.45; color: var(--muted); }
@media (max-width: 560px) { .wshead, .wsrow { grid-template-columns: 1fr 74px 74px; } .wsfuss { display: none; } }
.tstrip { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 12px; align-items: stretch; margin: 12px 0 14px; }
.wmini { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; border: 1px solid var(--line); background: color-mix(in srgb, var(--cat) 9%, var(--panel)); padding: 8px 11px; cursor: pointer; --cat: var(--cyan); }
.wmini .ico { grid-row: 1 / span 2; color: var(--cat); filter: drop-shadow(0 0 5px var(--cat)); }
.wmini .name { grid-column: 2; grid-row: 1; font-weight: 600; font-size: 13px; }
.wmini .name small { font-size: 9px; letter-spacing: .18em; color: var(--cat); margin-left: 6px; }
.wmini .chip { grid-column: 3; grid-row: 1 / span 2; font-family: var(--display); font-size: 10px; color: var(--cat); }
.wmini .meter { grid-column: 2; margin-top: 2px; }
.wmini.can { animation: canpulse 1.6s ease-in-out infinite; border-color: var(--cat); }
.wmini.can .chip { color: var(--hot); text-shadow: 0 0 8px var(--cat); }
.gstrip { border: 1px solid var(--line); background: var(--panel); padding: 7px 11px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; min-height: 44px; }
.gstrip .glabel { font-family: var(--display); font-size: 10px; letter-spacing: .25em; color: var(--ion); grid-row: 1; }
.gstrip .gbuild { grid-column: 1; grid-row: 2; font-size: 10px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.gstrip .gicons { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 6px; }
.gstrip .gi { position: relative; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--cat) 60%, var(--line)); background: color-mix(in srgb, var(--cat) 14%, var(--panel)); display: grid; place-items: center; color: var(--cat); cursor: default; }
.gstrip .gi .ico { filter: drop-shadow(0 0 4px var(--cat)); }
.gstrip .gi b { position: absolute; right: -4px; bottom: -5px; font-size: 9px; font-family: var(--display); background: var(--bg, #05060f); color: var(--cat); padding: 0 3px; border: 1px solid color-mix(in srgb, var(--cat) 60%, var(--line)); }
.gstrip .gi.big { border-width: 2px; }
.gstrip .gempty { grid-column: 2; grid-row: 1 / span 2; font-size: 11px; color: var(--muted); }
.tmain { display: grid; grid-template-columns: 1fr 1fr 1fr 250px; gap: 14px; align-items: start; }
.tcols { display: contents; }
.tcol { border-left: 3px solid var(--cat); padding-left: 10px; }
.tcol header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--cat); }
.tcol header h3 { font-family: var(--display); font-size: 12px; letter-spacing: .25em; text-transform: uppercase; margin: 0; }
.tcol header em { margin-left: auto; font-style: normal; font-family: var(--display); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tcol .list { display: grid; gap: 5px; }
.sk { display: grid; grid-template-columns: 18px 1fr auto; grid-template-rows: auto auto; gap: 1px 8px; align-items: center; border: 1px solid var(--line); background: var(--panel); padding: 6px 9px 6px 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.sk .ico { grid-row: 1 / span 2; color: var(--cat); filter: drop-shadow(0 0 4px var(--cat)); }
.sk .name { grid-column: 2; grid-row: 1; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk .chip { grid-column: 3; grid-row: 1; font-family: var(--display); font-size: 10px; color: var(--cat); white-space: nowrap; }
.sk .meter { grid-column: 2; height: 5px; margin-top: 2px; }
.sk .cnt { grid-column: 3; grid-row: 2; font-family: var(--display); font-size: 9px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.sk.can { animation: canpulse 1.6s ease-in-out infinite; border-color: var(--cat); }
.sk.can .chip { color: var(--hot); text-shadow: 0 0 8px var(--cat); }
.sk.can:hover, .sk.sel { background: color-mix(in srgb, var(--cat) 20%, var(--panel)); border-color: var(--cat); }
.sk.locked { opacity: .45; cursor: default; }
.sk.locked .chip { color: var(--muted); }
.sk.maxed { opacity: .55; cursor: default; background: color-mix(in srgb, var(--cat) 8%, var(--panel)); }
.sk.maxed .chip { color: var(--muted); }
.tdetail { position: sticky; top: 8px; border: 1px solid color-mix(in srgb, var(--cat, var(--line)) 55%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--cat, var(--line)) 14%, var(--panel)), var(--panel)); padding: 14px 15px; min-height: 220px; font-size: 12.5px; line-height: 1.45; --cat: var(--muted); }
.tdetail .dhead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tdetail .dhead .ico { color: var(--cat); filter: drop-shadow(0 0 6px var(--cat)); }
.tdetail .dhead h4 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.15; }
.tdetail .dhead small { display: block; font-size: 9px; letter-spacing: .22em; color: var(--cat); text-transform: uppercase; margin-top: 2px; }
.tdetail .ddesc { color: var(--text, #dfe6ff); }
.tdetail .dnow { margin-top: 10px; display: grid; gap: 4px; }
.tdetail .dnow div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
.tdetail .dnow span { font-size: 9px; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; align-self: center; }
.tdetail .dnow b { color: var(--cat); font-weight: 600; }
.tdetail .dnow i { font-style: normal; }
.tdetail .dcost { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--display); font-size: 11px; letter-spacing: .08em; color: var(--cat); }
.tdetail .dcost.no { color: var(--muted); font-family: var(--body); letter-spacing: 0; font-size: 11.5px; }
.tdetail .meter { margin-top: 8px; }
.tdetail.empty { display: grid; place-items: center; text-align: center; color: var(--muted); }
.thint { color: var(--muted); font-size: 11px; margin-right: auto; align-self: center; letter-spacing: .04em; }
@media (max-width: 900px) { .tmain { grid-template-columns: 1fr 1fr; } .tdetail { grid-column: 1 / -1; position: static; order: -1; min-height: 0; } .tstrip { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tmain { grid-template-columns: 1fr; } .thint { display: none; } }

/* Touch: Kaufen-Button im Detail-Feld, größere Tippflächen, keine Hover-Hinweise */
.tdetail .dbuy { margin-top: 12px; width: 100%; padding: 12px; font-family: var(--display); font-size: 12px; letter-spacing: .12em; background: var(--cat); color: #05060f; border: 0; cursor: pointer; }
.tdetail .dbuy:active { filter: brightness(1.2); }
@media (hover: none) {
  .sk { padding: 9px 10px; }
  .sk .name { font-size: 13.5px; }
  .gstrip .gi { width: 36px; height: 36px; }
  .tdetail { position: sticky; top: 0; z-index: 2; }
}
@media (max-width: 560px) {
  .treehead h2 { font-size: 18px; }
  .treehead .points { font-size: 18px; }
  .treehead .points small { font-size: 9px; }
  .treefoot .btn { width: 100%; }
}
.thint.touch { display: none; }
@media (hover: none) { .thint { display: none; } .thint.touch { display: block; } }
@media (max-width: 560px) { .thint.touch { display: block; margin: 0 0 8px; } .treefoot { flex-direction: column; } }
/* Am Handy ist eine feste 150px-Spalte zu teuer: Label über den Text statt daneben */
@media (max-width: 560px) { .rules div { grid-template-columns: 1fr; gap: 5px; } .rules kbd { justify-self: start; } }
.touchbar button.skill { display: none; border-color: var(--amber); color: var(--amber); }
.touchbar button.skill.on { display: block; animation: blink 1.2s ease-in-out infinite; }
/* Auswertung: Fortschritt, Todesursache, nächste Barriere, Werft-Tipp */
.progress { margin: 18px auto 0; max-width: 520px; text-align: left; border: 1px solid var(--line); background: var(--panel); display: grid; }
.progress div { display: grid; grid-template-columns: 118px 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.4; align-items: baseline; }
.progress div:last-child { border-bottom: 0; }
.progress span { font-family: var(--display); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.progress em { font-style: normal; }
.progress em b { color: var(--amber); font-weight: 600; }
.progress div:first-child em { color: var(--cyan); }
.progress div:first-child em b { color: var(--amber); }
@media (max-width: 560px) { .progress div { grid-template-columns: 1fr; gap: 2px; } }
/* Werft: Kopf (Titel, Ionen) und Zurück-Knopf bleiben stehen, nur die Perks scrollen */
/* ---------- Werft ----------
   Konsolen-Optik: ein Rahmen mit gekappten Ecken um den ganzen Schirm, links die Karten
   nach Kategorien, rechts eine Leiste mit dem Ionen-Kristall. Der Rahmen entsteht wie die
   Menueleisten aus zwei Ebenen, weil clip-path und border sich nicht vertragen. */
#hangar { padding: 0; overflow: hidden; display: block; }
#hangar[hidden] { display: none; }
#hangar .hbox {
  --ecke: 26px;
  position: relative; width: 100%; height: 100%; margin: 0; box-sizing: border-box;
  padding: 26px 30px calc(26px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: minmax(0, 1fr); gap: 26px;
}
#hangar .hframe { position: absolute; inset: 10px; z-index: 0; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 55%, var(--line)), var(--line) 45%, color-mix(in srgb, var(--ion) 40%, var(--line)));
  clip-path: polygon(var(--ecke) 0, calc(100% - var(--ecke)) 0, 100% var(--ecke), 100% calc(100% - var(--ecke)), calc(100% - var(--ecke)) 100%, var(--ecke) 100%, 0 calc(100% - var(--ecke)), 0 var(--ecke)); }
#hangar .hframe::before { content: ''; position: absolute; inset: 1px; background: #070a18;
  clip-path: polygon(var(--ecke) 0, calc(100% - var(--ecke)) 0, 100% var(--ecke), 100% calc(100% - var(--ecke)), calc(100% - var(--ecke)) 100%, var(--ecke) 100%, 0 calc(100% - var(--ecke)), 0 var(--ecke)); }
#hangar .hmain, #hangar .hrail { position: relative; z-index: 1; min-width: 0; min-height: 0; }
#hangar .hmain { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; }

#hangar .treehead { margin: 0; padding-bottom: 12px; align-items: start; }
#hangar .points { padding-right: 46px; }
#hangar .treehead h2 { font-size: 28px; letter-spacing: .3em; color: var(--hot); margin-bottom: 8px; }
#hangar .hintline { margin: 0; font-size: 11.5px; line-height: 1.5; }
#hangar .points { display: flex; align-items: center; gap: 9px; color: var(--ionc); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
#hangar .points small { color: var(--muted); }

/* Der Kristall als Zeichen der Waehrung — als Maske, damit er die Textfarbe erbt. */
.kri, .wrk { display: inline-block; width: .8em; height: .95em; flex: 0 0 auto; background: currentColor;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; vertical-align: -.08em; }
.kri { width: .72em; -webkit-mask-image: var(--kristall); mask-image: var(--kristall); }
.wrk { -webkit-mask-image: var(--wuerfel); mask-image: var(--wuerfel); }

#hangar .perks { overflow-y: auto; min-height: 0; padding-right: 8px; display: grid; gap: 14px; align-content: start;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Eine Kategorie: Kachel links, Karten rechts. */
#hangar .pcat { border: 0; padding: 0; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 12px; }
#hangar .ptile { position: relative; overflow: hidden; padding: 16px 14px;
  border: 1px solid color-mix(in srgb, var(--cat) 45%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--cat) 12%, transparent), rgba(9,13,28,.5));
  display: grid; align-content: start; gap: 3px; }
#hangar .ptile .pwm { position: absolute; right: -26px; bottom: -30px; color: var(--cat); opacity: .1; line-height: 0; }
#hangar .ptile .pico { position: relative; color: var(--cat); line-height: 0; margin-bottom: 6px;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cat) 60%, transparent)); }
#hangar .ptile h3 { position: relative; font-family: var(--display); font-size: 17px; letter-spacing: .22em;
  text-transform: uppercase; margin: 0; color: var(--hot); }
#hangar .ptile span { position: relative; font-size: 9.5px; color: var(--muted); letter-spacing: .16em;
  text-transform: uppercase; line-height: 1.4; }
#hangar .pbody { position: relative; min-width: 0; }
#hangar .pcount { position: absolute; top: -1px; right: 0; font-style: normal; font-family: var(--display);
  font-size: 10px; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); padding: 2px 9px; background: #070a18; }
#hangar .rows { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; padding-top: 20px; }

/* Karten: gekappte Ecke oben rechts, Symbol und Preis in der Kategoriefarbe. */
#hangar .row { --ecke: 13px; padding: 11px 13px 12px;
  border: 1px solid color-mix(in srgb, var(--cat) 38%, var(--line));
  background: linear-gradient(155deg, color-mix(in srgb, var(--cat) 7%, rgba(10,14,30,.85)), rgba(7,10,22,.9));
  grid-template-rows: auto auto 1fr auto; gap: 5px 9px; align-items: start;
  clip-path: polygon(0 0, calc(100% - var(--ecke)) 0, 100% var(--ecke), 100% 100%, 0 100%); }
#hangar .row .ico { grid-row: 1; align-self: center; margin-top: 0; }
#hangar .row .name { font-family: var(--display); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hot); align-self: center; }
#hangar .row .chip { display: flex; align-items: center; gap: 5px; justify-content: flex-end;
  font-size: 11px; letter-spacing: .04em; align-self: center; }
#hangar .row .desc { grid-row: 3; align-self: start; }
#hangar .row .meter { grid-row: 4; align-self: end; margin-top: 6px; }
#hangar .row .cnt { grid-row: 4; align-self: end; margin-top: 6px; }
#hangar .row.can { border-color: color-mix(in srgb, var(--cat) 70%, transparent); }
#hangar .row.can:hover { background: linear-gradient(155deg, color-mix(in srgb, var(--cat) 16%, rgba(10,14,30,.85)), rgba(7,10,22,.9)); }

/* Rechte Leiste: Kristall, Stand, Erklaerung, Rueckweg. */
#hangar .hrail { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px;
  border-left: 1px solid var(--line); padding-left: 22px; }
#hangar .hgem { width: min(100%, 172px); margin: 0 auto; color: var(--ionc); line-height: 0; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ionc) 45%, transparent)); }
#hangar .hgem svg { width: 100%; height: auto; display: block; }
#hangar .hgem .r1 { transform-origin: 50% 50%; animation: gemdreh 42s linear infinite; }
#hangar .hgem .r2 { transform-origin: 50% 50%; animation: gemdreh 26s linear infinite reverse; }
@keyframes gemdreh { to { transform: rotate(360deg); } }
#hangar .hgemval { display: grid; justify-items: center; gap: 2px; }
#hangar .hgemval small { font-size: 10px; letter-spacing: .3em; color: var(--muted); }
#hangar .hgemval b { font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--ionc); line-height: 1; }
#hangar .hrail p { margin: 0; min-height: 0; overflow: hidden; font-size: 11px; line-height: 1.6; color: var(--muted); text-align: center; }
#hangar .hrail .btn { align-self: end; width: 100%; }

@media (max-width: 1100px) {
  #hangar .hbox { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
  #hangar .hgem { width: 54px; margin: 0; }
  #hangar .hrail { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0;
    grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; gap: 14px; }
  #hangar .hgem { width: 54px; }
  #hangar .hgemval { justify-items: start; }
  #hangar .hgemval b { font-size: 24px; }
  #hangar .hrail p { display: none; }
  #hangar .hrail .btn { width: auto; align-self: center; }
}
@media (max-width: 760px) {
  #hangar .pcat { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #hangar .ptile { padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
  #hangar .ptile .pico { margin: 0; }
  #hangar .ptile h3 { font-size: 14px; }
  #hangar .ptile span { margin-left: auto; text-align: right; }
  #hangar .ptile .pwm { display: none; }
  #hangar .rows { padding-top: 0; }
  #hangar .pcount { position: static; display: inline-block; margin-bottom: 8px; }
}
@media (max-width: 560px) {
  #hangar .hbox { --ecke: 16px; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
  #hangar .hframe { inset: 5px; }
  #hangar .treehead h2 { font-size: 20px; }
  #hangar .hintline { display: none; }
  #hangar .rows { grid-template-columns: 1fr 1fr; }
}

/* Onboarding: ein Schritt je Entscheidung */
.steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px; }
.steps i { width: 22px; height: 3px; background: var(--line); }
.steps i.on { background: var(--muted); }
.steps i.cur { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.steps span { margin-left: 8px; font-family: var(--display); font-size: 9px; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }
.mutrow { margin: 22px auto 0; width: 100%; max-width: 560px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer; text-align: left; }
.mutrow span { font-family: var(--display); font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.mutrow em { font-style: normal; font-size: 12.5px; }
.mutrow em.on { color: var(--amber); }
.mutrow b { font-family: var(--display); font-size: 10px; letter-spacing: .14em; color: var(--cyan); font-weight: 600; }
.mutrow:hover { border-color: var(--cyan); }
.mutbox { max-width: 560px; margin: 0 auto; }
.cards.compact .card .bdesc, .cards.compact .card .tags { display: none; }
.cards.compact .card { padding-bottom: 14px; gap: 8px; }
.cards.compact .card.on { border-color: var(--hot); box-shadow: 0 0 0 1px var(--hot), 0 0 28px color-mix(in srgb, var(--cat) 45%, transparent); }
.cards.compact .card .rar { min-height: 0; }
.wdetail { margin: 14px auto 0; max-width: 560px; text-align: left; border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; font-size: 13px; line-height: 1.45; display: grid; gap: 6px; }
.wdetail h4 { margin: 0; font-family: var(--display); font-size: 13px; letter-spacing: .12em; color: var(--cyan); }
.wdetail .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.wdetail .tags i { font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--cyan); color: var(--cyan); }
.wdetail small { color: var(--muted); font-size: 11px; }
.wstep .btnrow { margin-top: 16px; }
@media (max-width: 560px) { .cards.four { grid-template-columns: 1fr 1fr; gap: 8px; } .cards.compact .card { padding: 26px 8px 12px; } .cards.compact .card .bname { font-size: 13px; } .hullcards { grid-template-columns: 1fr 1fr; gap: 8px; } .hullcard .hdesc { display: none; } .steps { margin-top: 4px; } }
/* Überschild: heller Streifen über dem Schildbalken */
.bar b.over { background: var(--hot); box-shadow: 0 0 8px var(--hot); height: 40%; top: 0; bottom: auto; opacity: .95; }
#shieldv b { color: var(--hot); font-weight: 600; }
/* Arena-Zeitleiste oben in der Mitte */
#timeline { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(460px, 60vw); text-align: center; pointer-events: none; }
#timeline .tl { position: relative; height: 6px; background: var(--line); border-radius: 2px; }
#timeline .tl i { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1px; background: var(--muted); }
#timeline .tl i.boss { background: var(--magenta); box-shadow: 0 0 6px var(--magenta); width: 4px; }
#timeline .tl i.final { background: var(--amber); box-shadow: 0 0 8px var(--amber); width: 5px; }
#timeline .tl b { position: absolute; top: -5px; width: 2px; height: 16px; margin-left: -1px; background: var(--hot); box-shadow: 0 0 8px var(--hot); }
#timeline .label { margin-top: 6px; font-size: 10px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
@media (max-width: 560px) { #timeline { width: 52vw; top: 8px; } }
/* Power-up-Chips im HUD */
#buffs { display: grid; gap: 4px; margin-top: 6px; }
#buffs .buff { display: grid; grid-template-columns: auto auto; gap: 2px 10px; align-items: baseline; width: 190px; font-family: var(--display); font-size: 10px; letter-spacing: .16em; color: var(--c); }
#buffs .buff em { font-style: normal; text-align: right; color: var(--text); }
#buffs .buff i { grid-column: 1 / span 2; display: block; height: 3px; background: var(--line); }
#buffs .buff i b { display: block; height: 100%; background: var(--c); box-shadow: 0 0 8px var(--c); transition: width .2s linear; }
/* Wrackteile als Laufwährung */
/* Stumm-Knopf: liegt über allem, also auch über Menüs und dem Prolog, und ist überall erreichbar.
   Die rechte HUD-Spalte (.hud .tr) beginnt darum erst bei 58px statt bei 16px. */
.mutebtn { position: fixed; z-index: 40; top: calc(12px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right));
  width: 38px; height: 38px; display: grid; place-items: center;
  padding: 0; cursor: pointer; background: rgba(12,14,31,.72); border: 1px solid var(--line); color: var(--muted); }
.mutebtn:hover, .mutebtn:focus-visible { color: var(--cyan); border-color: var(--cyan); outline: none; }
.mutebtn.off { color: var(--magenta); border-color: rgba(255,63,164,.55); }
.mutebtn .ico { width: 20px; height: 20px; display: block; }
/* Fingerkuppe braucht mehr Fläche — dann rutscht auch die HUD-Spalte ein Stück weiter nach unten */
@media (hover: none) { .mutebtn { width: 44px; height: 44px; } .hud .tr { top: 66px; } }
.value.scrap { color: var(--hot); display: flex; align-items: center; gap: 7px; }
.value.scrap::before { content: ""; width: .62em; height: .74em; flex: 0 0 auto; background: currentColor;
  -webkit-mask: var(--wuerfel) center / contain no-repeat; mask: var(--wuerfel) center / contain no-repeat; }
.value.ore { color: var(--amber); }
/* Auftragsbrett an der Station: der Stand aller drei Zonen auf einen Blick */
.zoneboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px auto 4px; max-width: 900px; text-align: left; }
.zoneboard .zone { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; }
.zoneboard .zone.here { border-color: var(--cyan); }
.zoneboard .zone.done { border-color: var(--amber); background: rgba(255,181,71,.07); }
.zoneboard h4 { margin: 0 0 2px; font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--text); }
.zoneboard .zsub { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.zoneboard .task { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.zoneboard .task.ok { color: var(--cyan); }
.zoneboard .task b { font-family: var(--display); color: var(--text); }
.zoneboard .zdone { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--amber); }
.zoneboard .zcore { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--magenta); }
.zoneboard .deliver { margin-top: 9px; width: 100%; padding: 7px; font-family: var(--display); font-size: 10px; letter-spacing: .14em;
  background: var(--amber); color: var(--void); border: 0; cursor: pointer; }
.zoneboard .deliver:disabled { background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: default; }
/* Schlüsselhälften: zwei Bögen, die zusammen einen Ring ergeben — gefunden leuchten sie, sonst bleiben sie dunkel */
.keyhalves { display: flex; align-items: center; gap: 1px; height: 30px; }
.keyhalves img { height: 30px; width: auto; opacity: .22; filter: grayscale(1) brightness(.6); transition: opacity .3s, filter .3s; }
.keyhalves img.on { opacity: 1; filter: none; }
.keyhalves img#keyb { transform: scaleX(-1); }
/* Prolog: Schriftrolle in die Tiefe, wie eine Sternenkarte, die vom Horizont hochläuft.
   Die Laufzeit setzt sim.js — bei vorhandener Sprachaufnahme nach deren Länge. */
/* Hauptmenü: der Kern im Hintergrund. Das Bild liegt hinter allem und wandert sehr langsam, darüber
   legt ein Verlauf so viel Dunkelheit, dass Titel und Menüknöpfe ihren Kontrast behalten. */
#start { background: #05060f; overflow: hidden; }
#start::before, #start::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
#start::before { background: url('../assets/backgrounds/core_menu.jpg') center / cover no-repeat;
  opacity: .9; animation: menudrift 70s ease-in-out infinite alternate; }
#start::after { background:
  radial-gradient(115% 85% at 50% 42%, rgba(5,6,15,.05), rgba(5,6,15,.72) 68%, rgba(5,6,15,.92)),
  linear-gradient(rgba(5,6,15,.45), rgba(5,6,15,.2) 35%, rgba(5,6,15,.85)); }
#start .menu { position: relative; z-index: 1; }
/* Titel als Grafik statt Schrift. Der schwarze Hintergrund der Vorlage ist über die Helligkeit
   ausgestanzt, damit der blaue Schein weich in den Nebel ausläuft statt auf einer Kante zu enden. */
h1.logo { background: none; filter: none; line-height: 0; margin: 0 auto 2px; }
h1.logo img { display: block; width: min(620px, 82vw); height: auto; margin: 0 auto;
  filter: drop-shadow(0 0 28px rgba(77,243,255,.3)) drop-shadow(0 0 60px rgba(5,6,15,.9)); }
@media (max-width: 700px) { h1.logo img { content: url('../assets/backgrounds/title_small.png'); } }
@keyframes menudrift { from { transform: scale(1.06) translate3d(-1.2%, .6%, 0); } to { transform: scale(1.13) translate3d(1.2%, -1%, 0); } }
@media (max-width: 900px) { #start::before { background-image: url('../assets/backgrounds/core_menu_small.jpg'); } }
@media (prefers-reduced-motion: reduce) { #start::before { animation: none; transform: scale(1.06); } }

/* Hauptmenü-Leisten: abgeschrägte Sechsecke statt schlichter Rechtecke.
   clip-path und border vertragen sich nicht — und clip-path würde auch den Fokusring
   wegschneiden. Deshalb bleibt der <button> selbst unbeschnitten und trägt nur das Raster;
   die Schräge tragen zwei Ebenen darunter: .edge färbt den Rahmen, .edge::before stanzt
   die Füllung ein Haar kleiner wieder heraus. Die zweite, feinere Linie im Inneren
   entsteht auf demselben Weg noch einmal (.inner). */
#start .mainnav { max-width: 470px; gap: 11px; margin-top: 26px; }
#start .navbtn {
  --cut: 20px;
  --frame: #2b3a5e;
  --frame-inner: rgba(43,58,94,.75);
  --fill: linear-gradient(100deg, rgba(9,15,30,.94), rgba(6,11,23,.8) 55%, rgba(11,18,36,.9));
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: 15px;
  padding: 10px 24px 10px 18px; min-height: 68px;
  background: none; border: 0;
  transition: transform .12s, filter .15s;
}
#start .navbtn .edge { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--frame); transition: background .15s, filter .15s;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%); }
#start .navbtn .edge::before { content: ''; position: absolute; inset: 1.5px; background: var(--fill);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%); }
/* Die Innenlinie liegt parallel zur Außenkante: seitlich rund ein Sechstel mehr Abstand
   als oben und unten, sonst laufen die Schrägen auseinander. */
#start .navbtn .edge .inner { position: absolute; inset: 6px 7px; --cut: 16px;
  background: var(--frame-inner);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%); }
#start .navbtn .edge .inner::before { content: ''; position: absolute; inset: 1px; background: rgba(8,13,27,.55);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%); }

/* Symbolkästchen: gleichseitiges Sechseck. Alle sechs Seiten sind gleich lang, wenn die
   Breite das 2/√3-Fache der Höhe misst und die Schräge ein Viertel der Breite. Dann sind
   die waagerechte Kante oben und die vier Schrägen alle 0,577 × Höhe lang. */
#start .navbtn .navico { --ico: 50px; --cut: calc(var(--ico) * .2887);
  position: relative; flex: 0 0 auto; width: calc(var(--ico) * 1.1547); height: var(--ico);
  display: grid; place-items: center; color: var(--text);
  transition: color .15s, filter .15s; }
#start .navbtn .navico::before, #start .navbtn .navico::after { content: ''; position: absolute; inset: 0;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%); }
#start .navbtn .navico::before { background: var(--frame); transition: background .15s; }
#start .navbtn .navico::after { inset: 1.2px; background: rgba(14,21,40,.9); }
#start .navbtn .navico > svg { position: relative; z-index: 1; }

/* Die Hüllen sind <i>, also kursiv per Vorgabe — das muss zurückgesetzt werden. */
#start .navbtn i { font-style: normal; }
#start .navbtn .navtext { flex: 1 1 auto; min-width: 0; display: grid; row-gap: 1px; text-align: left; }
#start .navbtn span { font-size: 20px; letter-spacing: .2em; line-height: 1.15; color: var(--text); }
#start .navbtn small { font-size: 12px; line-height: 1.25; color: var(--muted); }
#start .navbtn .chev { flex: 0 0 auto; display: grid; place-items: center;
  color: var(--cyan); opacity: .75; transition: opacity .15s, transform .15s; }

/* Beim Überfahren leuchten nur die Außenlinie und das Symbol samt seinem Sechseck.
   Die Innenlinie haengt an --frame-inner und bleibt deshalb ruhig. Der Schein sitzt als
   drop-shadow auf .edge bzw. .navico und zeichnet daher nur die aeussere Silhouette nach —
   die Innenlinie liegt im Inneren der Figur und traegt nichts zum Schatten bei. */
#start .navbtn:hover, #start .navbtn:focus-visible { --frame: color-mix(in srgb, var(--cyan) 45%, #33456e); }
#start .navbtn:hover .edge, #start .navbtn:focus-visible .edge { filter: drop-shadow(0 0 9px rgba(77,243,255,.3)); }
#start .navbtn:hover .navico, #start .navbtn:focus-visible .navico {
  color: var(--cyan); filter: drop-shadow(0 0 8px rgba(77,243,255,.45)); }
#start .navbtn:hover .chev, #start .navbtn:focus-visible .chev { opacity: 1; transform: translateX(3px); }
/* Der Knopf ist unbeschnitten, der Fokusring läuft deshalb vollständig außen herum. */
#start .navbtn:focus-visible { outline: 2px solid var(--magenta); outline-offset: 4px; }

#start .navbtn.primary { --frame: var(--cyan); --frame-inner: rgba(77,243,255,.42);
  --fill: linear-gradient(100deg, rgba(8,26,44,.95), rgba(6,16,32,.82) 55%, rgba(10,30,50,.92)); }
#start .navbtn.primary .edge::before { inset: 2px; }
#start .navbtn.primary span { color: var(--cyan); }
#start .navbtn.primary .navico { color: var(--cyan); }
#start .navbtn.primary .chev { opacity: 1; }
#start .navbtn.primary:hover .edge, #start .navbtn.primary:focus-visible .edge { filter: drop-shadow(0 0 11px rgba(77,243,255,.45)); }

/* Am Handy werden die Leisten schmaler: bei gleicher Schräge würde die Spitze sonst kippen,
   sobald der Untertitel umbricht und die Leiste höher wird. */
@media (max-width: 700px) {
  #start .mainnav { max-width: min(400px, 92vw); gap: 9px; margin-top: 20px; }
  #start .navbtn { --cut: 14px; gap: 11px; padding: 8px 16px 8px 12px; min-height: 54px; }
  #start .navbtn .edge .inner { inset: 5px 6px; --cut: 11px; }
  #start .navbtn .navico { --ico: 40px; }
  #start .navbtn .navico > svg { width: 19px; height: 19px; }
  #start .navbtn span { font-size: 16px; letter-spacing: .16em; }
  #start .navbtn small { font-size: 11px; }
  #start .navbtn .chev > svg { width: 15px; height: 15px; }
}
.overlay.intro { background: #05060f; padding: 0; overflow: hidden; align-items: stretch; justify-content: stretch; }
.introsky { position: absolute; inset: 0; background:
  radial-gradient(2px 2px at 18% 22%, rgba(217,220,245,.8), transparent 60%),
  radial-gradient(1.5px 1.5px at 74% 12%, rgba(217,220,245,.65), transparent 60%),
  radial-gradient(1.5px 1.5px at 42% 68%, rgba(217,220,245,.6), transparent 60%),
  radial-gradient(2px 2px at 86% 54%, rgba(217,220,245,.7), transparent 60%),
  radial-gradient(1.5px 1.5px at 30% 88%, rgba(217,220,245,.5), transparent 60%),
  radial-gradient(1200px 700px at 50% 120%, rgba(77,243,255,.10), transparent 70%),
  radial-gradient(900px 600px at 50% -10%, rgba(255,63,164,.08), transparent 70%);
  animation: introsky 90s linear infinite; }
@keyframes introsky { to { transform: translateY(-40px); } }
/* Die Perspektive muss auf dem direkten Elternteil der Rolle sitzen, sonst bleibt sie flach */
.introstage { position: absolute; inset: 0; overflow: hidden; perspective: 400px; perspective-origin: 50% 0; }
.crawl { position: absolute; left: 0; right: 0; top: 100%; width: min(720px, 84vw); margin: 0 auto;
  transform-origin: 50% 0; transform: rotateX(26deg); color: var(--amber); text-align: justify;
  font-family: var(--display); font-weight: 600; font-size: clamp(15px, 2.1vw, 22px); line-height: 1.6;
  text-shadow: 0 0 18px rgba(255,181,71,.35); animation: crawl linear forwards; }
@keyframes crawl { to { top: -220%; } }
.crawl .ep { text-align: center; letter-spacing: .5em; font-size: .72em; color: var(--cyan); margin: 0 0 6px; }
.crawl h2 { text-align: center; font-size: 1.9em; letter-spacing: .14em; margin: 0 0 1.4em; color: var(--hot); text-shadow: 0 0 26px rgba(253,246,227,.4); }
.crawl p { margin: 0 0 1.25em; }
.crawl p.last { text-align: center; letter-spacing: .1em; }
.crawl p.last b { color: var(--hot); font-size: 1.25em; letter-spacing: .18em; }
/* Der obere Rand blendet den Text in die Ferne aus, damit die Rolle nicht abrupt endet */
.overlay.intro::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 42%; pointer-events: none;
  background: linear-gradient(#05060f 12%, rgba(5,6,15,.85) 45%, transparent); }
.introskip { position: absolute; right: 18px; bottom: 16px; z-index: 3; background: rgba(12,14,31,.7);
  border: 1px solid var(--line); color: var(--muted); font-family: var(--display); font-size: 10px;
  letter-spacing: .16em; padding: 8px 14px; cursor: pointer; }
.introskip:hover, .introskip:focus-visible { color: var(--cyan); border-color: var(--cyan); outline: none; }
@media (prefers-reduced-motion: reduce) { .crawl { animation: none; top: 6%; transform: none; height: 88%; overflow: auto; } }
/* Orbit: Systemkarte unten links, Kern in der Mitte */
#maprow { margin-top: 10px; }
#minimap { display: block; width: 132px; height: 132px; border-radius: 50%; }
#maprow .label { margin-top: 4px; }
.scrapline { font-size: 12px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.scrapline b { color: var(--hot); font-family: var(--display); font-size: 14px; }
.scrapline b::before { content: ""; display: inline-block; width: .8em; height: .95em; margin-right: 6px;
  vertical-align: -.08em; background: currentColor;
  -webkit-mask: var(--wuerfel) center / contain no-repeat; mask: var(--wuerfel) center / contain no-repeat; }
.card .cost { position: absolute; top: 30px; right: 12px; font-family: var(--display); font-size: 11px; letter-spacing: .1em; color: var(--hot); background: rgba(5,6,15,.6); padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--hot) 50%, transparent); }
.card .cost.no { color: var(--magenta); border-color: var(--magenta); }
.card.nocost { opacity: .55; filter: saturate(.5); }
.card.nocost:hover { transform: none; }

/* Abflug-Ausruestung: drei Leisten untereinander (Waffe, Sprung, Verteidigung).
   Die kleinen Karten tragen nur Symbol und Name — die Erklaerung steht darunter im
   Detailfeld, sonst wird der Bildschirm zur Bleiwueste. */
.loadhead { font-family: var(--display); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 5px; }
.loadhead:first-child { margin-top: 0; }
.cards.tiny .card { padding: 7px 8px 8px; }
.cards.tiny .card svg { width: 22px; height: 22px; }
.cards.tiny .bname { font-size: 12px; margin-top: 2px; }
.cards.tiny .cathead, .cards.tiny .rar, .cards.tiny .wl { display: none; }

/* Elementsteine: eigene Waehrung neben den Ionen. Der Rautenstein hebt sich bewusst von
   der Ionen-Raute ab, damit man die beiden Zahlen im Kopf nicht verwechselt. */
.points.stein { --cat: var(--violet); }
.points.stein span { color: var(--violet); }
.stn { display: inline-block; width: 13px; height: 13px; background: var(--violet);
  clip-path: polygon(50% 0, 100% 38%, 78% 100%, 22% 100%, 0 38%); }
.wsect { font-family: var(--display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--violet); margin: 26px 0 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.wsecthint { margin-bottom: 12px; }
#pfadwerk .row .chip .stn { margin-right: 5px; vertical-align: -1px; }
#pfadwerk .pcat { --cat: var(--violet); }

/* Koop: Beitrittszeile im Ausruestungsfenster und die zweite Leiste im HUD. Bernstein wie
   Lampen und Flammen von Spieler 2, damit Schiff und Anzeige zusammengehoeren. */
.koopzeile { margin: 14px auto 0; text-align: center; font-size: 12.5px; color: var(--muted); letter-spacing: .03em; }
.koopzeile b { color: var(--p2); font-family: var(--display); letter-spacing: .16em; font-size: 11px; }
.koopzeile.an { color: var(--text); }
.koopzeile.aus b { color: var(--muted); }
.koopzeile b.p1 { color: var(--p1); }
.koopzeile .geraet { color: var(--text); }
.koopzeile .koopknopf { font-family: var(--display); font-size: 10px; letter-spacing: .14em; color: var(--p2); background: transparent; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--p2) 45%, var(--line)); padding: 3px 9px; margin: 0 6px; }
.koopzeile .koopknopf:hover { background: color-mix(in srgb, var(--p2) 14%, transparent); }
.koopzeile .kooptipp { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.koopzeile kbd { font-family: var(--display); font-size: 10px; color: var(--p2); border: 1px solid color-mix(in srgb, var(--p2) 45%, var(--line)); padding: 1px 5px; margin: 0 1px; }
/* Fokus per Controller. Eigene Klasse statt :focus-visible, weil der Browser Gamepad-Eingabe
   nicht als Tastatur erkennt und den Fokusring dann gar nicht zeigt. */
.padfokus { outline: 2px solid var(--amber) !important; outline-offset: 3px; box-shadow: 0 0 22px color-mix(in srgb, var(--amber) 45%, transparent) !important; }

/* Waffenkarte von Spieler 2 im Skillbaum, in seiner Farbe */
.wmini.p2 { border-color: color-mix(in srgb, var(--p2) 45%, var(--line)); margin-top: 6px; }
.wmini.p2 small { color: var(--p2); }

/* Controller-Meldung: kurz unten eingeblendet, sobald der Browser ein Pad meldet oder verliert */
#padtoast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 400;
  background: rgba(8,10,24,.94); border: 1px solid var(--line); color: var(--text); font-size: 12.5px; letter-spacing: .04em; padding: 8px 14px;
  transition: opacity .25s, transform .25s; }
#padtoast.an { opacity: 1; transform: translate(-50%, 0); }

/* Spielerfarben. Spieler 1 Blau, Spieler 2 Orange. Frueher Zitrus, weil Bernstein den Gegnern gehoert;
   das Orange ist deshalb deutlich roeter und satter als das Bernstein der Gegnerschuesse.
   Bernstein, Magenta, Violett und Lavendel tragen die Gegner und ihre Geschosse, Mint und
   Gruen die Beute — ein Spielerschuss darf mit keinem davon zu verwechseln sein. */
:root { --p1: #4a9eff; --p2: #ff8a2a; }

/* Koop-Auswahl: 1P blau, 2P orange. Rahmen um die gewaehlte Karte, Marke oben in der Ecke;
   waehlen beide dieselbe, liegt 1P innen und 2P aussen. Die aktive Reihe eines Controllers pulsiert. */
.card.w1 { border-color: var(--p1); box-shadow: 0 0 0 2px var(--p1), 0 0 22px color-mix(in srgb, var(--p1) 40%, transparent); }
.card.w2 { border-color: var(--p2); box-shadow: 0 0 0 2px var(--p2), 0 0 22px color-mix(in srgb, var(--p2) 40%, transparent); }
.card.w1.w2 { border-color: var(--p1); box-shadow: 0 0 0 2px var(--p1), 0 0 0 5px var(--p2), 0 0 24px color-mix(in srgb, var(--p2) 35%, transparent); }
.card.zeiger1, .card.zeiger2 { animation: koopzeiger 1.1s ease-in-out infinite; }
@keyframes koopzeiger { 50% { filter: brightness(1.4); } }
.pmark { position: absolute; top: -9px; z-index: 2; font-family: var(--display); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 5px; color: #05060f; line-height: 1.2; }
.pmark.p1 { left: 6px; background: var(--p1); }
.pmark.p2 { right: 6px; background: var(--p2); }
.koopwahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.kw { border: 1px solid var(--line); padding: 8px 10px; display: grid; gap: 2px; font-size: 12px; text-align: left; }
.kw b { font-family: var(--display); font-size: 12px; letter-spacing: .1em; }
.kw em { font-style: normal; font-family: var(--display); font-size: 10px; letter-spacing: .16em; margin-top: 4px; opacity: .55; }
.kw.bereit em { opacity: 1; }
.kw.p1 { border-color: color-mix(in srgb, var(--p1) 55%, var(--line)); } .kw.p1 b, .kw.p1 em { color: var(--p1); }
.kw.p2 { border-color: color-mix(in srgb, var(--p2) 55%, var(--line)); } .kw.p2 b, .kw.p2 em { color: var(--p2); }
.kw.p1.bereit { background: color-mix(in srgb, var(--p1) 14%, transparent); }
.kw.p2.bereit { background: color-mix(in srgb, var(--p2) 14%, transparent); }

/* Koop-HUD: Jeder Spieler hat seine eigene Ecke — 1P unten links, 2P unten rechts, gespiegelt.
   Die Huelle leuchtet in der Spielerfarbe und blinkt magenta, wenn sie knapp wird. */
.pp { display: grid; gap: 4px; padding: 8px 12px 10px; background: rgba(5,6,15,.6); border: 1px solid var(--line); }
.pp.p1 { border-left: 3px solid var(--p1); justify-items: start; text-align: left; }
.pp.p2 { border-right: 3px solid var(--p2); justify-items: end; text-align: right; }
.pphead { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); }
.pp.p2 .pphead { flex-direction: row-reverse; }
.pphead b { font-family: var(--display); font-size: 12px; font-weight: 900; letter-spacing: .08em; padding: 1px 6px; color: #05060f; }
.pp.p1 .pphead b { background: var(--p1); }
.pp.p2 .pphead b { background: var(--p2); }
.pp .label { margin-top: 2px; }
.pp .label span b { color: var(--hot); font-weight: 600; }
#pp1hb { background: var(--p1); box-shadow: 0 0 10px var(--p1); }
#pp2hb { background: var(--p2); box-shadow: 0 0 10px var(--p2); }
#pp1sb, #pp2sb { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.pp .bar b.knapp { background: var(--magenta); box-shadow: 0 0 12px var(--magenta); animation: ppknapp .7s steps(2) infinite; }
@keyframes ppknapp { 50% { opacity: .35; } }
.pp.unten { opacity: .8; }
.pp.unten .pphead span { color: var(--magenta); font-family: var(--display); font-size: 11px; letter-spacing: .1em; }
@media (max-width: 560px) { .pp .bar.wide { width: 140px; } .pp { padding: 6px 8px 8px; } }

/* Das hidden-Attribut muss immer gewinnen. Ohne diese Regel ueberschrieb jede Klasse mit
   display (z. B. .pp { display: grid }) das Attribut — die leeren 1P/2P-Felder standen
   so auch im Einzelspiel im Bild. */
[hidden] { display: none !important; }