:root {
  /* Cozy helles Design: warmes Creme/Sand statt kaltem Grau, Akzente in Teal, Holzbraun und Gold */
  --bg: #f6f1e3;          /* warmes Creme */
  --deep: #ecdfc3;        /* Sand */
  --panel: #fffdf6;       /* warmes Weiß */
  --panel-2: #faf3e4;     /* helles Creme */
  --ink: #332a21;         /* warmes Dunkelbraun, fast Schwarz */
  --mute: #7a6c57;        /* warmes Braungrau, kräftig genug zum Lesen */
  --line: #e4d6b4;        /* warme, sandige Linien */
  --wood: #8a5a34;        /* warmes Holzbraun */
  --sea: #2f8f82; --red: #d1604a; --gold: #c08a2e; --hp: #4a9a4e;
  --btn: #6b4226; --btnink: #fffdf6; --btnedge: #4a2d18;
  --epic: #9b6fd1; --rare: #3a8fb8; --legend: #d19a2e; --xp: #8f6fd1;
  --sky: #2a4a58; --sea-a: #163a3c; --sea-b: #0c2426; --ghost: #a3813e;
  --shadow: 0 1px 2px rgba(80, 55, 25, .07), 0 4px 16px rgba(80, 55, 25, .08);
  color-scheme: light;
}
:root[data-theme="dark"] {
  /* Nacht auf See: Schwarz, Weiß, Grau, Dunkelbraun, Dunkelblau */
  --bg: #0b0f14; --deep: #0f1a26; --panel: #1f1914; --panel-2: #141d28;
  --ink: #f1eee8; --mute: #b3b7bc; --line: #34393f; --wood: #5a4433;
  --sea: #6f9fcf; --red: #d0564a; --gold: #c9a95a; --hp: #5bb36c;
  --btn: #f1eee8; --btnink: #0b0f14; --btnedge: #a9a49a;
  --epic: #b388f0; --rare: #6fa8e8; --legend: #e2b44a; --xp: #8f86e8;
  --sky: #18293a; --sea-a: #10202f; --sea-b: #08121c; --ghost: #8a7240;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; color: var(--ink); min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--sea) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--deep) 0%, var(--bg) 55%);
  background-attachment: fixed;
  font: 18px/1.45 "Alegreya Sans", system-ui, sans-serif;
}
main { max-width: 760px; margin: 0 auto; padding: 16px; }
h1, h2 { font-family: "Pirata One", Georgia, serif; font-weight: 400; margin: 0; }
h1 { font-size: 2.2rem; line-height: 1.1; }
h2 { font-size: 1.6rem; margin-bottom: 10px; }

header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.track { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--mute); }
.track i { width: 18px; height: 8px; border-radius: 4px; background: var(--line); }
.track i.done { background: var(--gold); }
.track i.now { background: var(--red); }

.crew, .foes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 8px; }
.u > * { min-width: 0; }
.u {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 8px;
  display: grid; grid-template-columns: 44px 1fr; gap: 2px 8px; align-items: center;
  box-shadow: var(--shadow);
}
.u.dead { opacity: .4; }
.u span { font-weight: 700; overflow-wrap: anywhere; hyphens: auto; }
.u small { grid-column: 1 / -1; color: var(--mute); font-size: .82rem; }
.av { grid-row: span 2; width: 40px; height: 46px; display: grid; place-items: center; }
.av svg, .sprite-img { width: 36px; height: 42px; shape-rendering: crispEdges; image-rendering: pixelated; }
.bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; grid-column: 1 / -1; margin-top: 4px; }
.bar i { display: block; height: 100%; background: var(--hp); transition: width .25s; }

.stage { background: var(--panel-2); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-top: 14px; box-shadow: var(--shadow); }
.opts { display: grid; gap: 10px; }
.opt {
  all: unset; box-sizing: border-box; cursor: pointer; border: 2px solid var(--line);
  border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px;
  background: var(--panel); transition: border-color .15s ease, transform .1s ease;
}
.opt:hover { border-color: var(--gold); transform: translateY(-1px); }
.opt-body { display: grid; gap: 2px; }
.opt-body > b { font-size: 1.1rem; }
.opt-body > span { color: var(--mute); }
.opt.with-sprite { grid-template-columns: 44px 1fr; align-items: start; column-gap: 12px; }
.opt-sprite { display: grid; place-items: center; width: 44px; height: 50px; }
.opt-sprite svg { width: 36px; height: 42px; shape-rendering: crispEdges; }
.abil { display: block; margin-top: 4px; color: var(--ink); }
.abil b { font-weight: 700; }
.gain { display: block; margin-top: 4px; color: var(--hp); font-weight: 700; }
.relic-opt { border-style: dashed; }
.opt.boss { border-color: var(--red); }

.btn {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-block; margin-top: 12px;
  background: var(--btn); color: var(--btnink); padding: 10px 18px; border-radius: 10px; font-weight: 700;
  box-shadow: 0 2px 0 var(--btnedge); transition: transform .1s ease;
}
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--btnedge); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.link { all: unset; cursor: pointer; color: var(--mute); text-decoration: underline; font-size: .9rem; }
button:focus-visible, .opt:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }

.type {
  font-style: normal; font-weight: 700; font-size: .76rem; color: #fff;
  padding: 1px 6px; border-radius: 4px; margin-right: 4px; vertical-align: 1px; white-space: nowrap;
}
.t-kraft { background: #b3362d; }
.t-klinge { background: #3d6b46; }
.t-technik { background: #2f5f9e; }
.hint { color: var(--mute); margin: 12px 0 6px; }

.log { min-height: 3em; margin: 12px 0 4px; font-weight: 700; }
.lbl { margin: 12px 0 6px; color: var(--mute); }
.ord { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ord span { flex: 1; font-weight: 700; }
.ord button { all: unset; cursor: pointer; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; }
.ord button:disabled { opacity: .35; cursor: default; }

.head-right { display: grid; justify-items: end; gap: 6px; max-width: 100%; min-width: 0; }

.u .tags { color: var(--mute); font-size: .76rem; margin-top: -2px; }
.u.is-boss { border-color: var(--red); border-width: 2px; }

/* Synergien: wie ein Logbuch unter der Crew */
#syn { margin-top: 10px; }
.syn { display: grid; gap: 2px; }
.syn-row {
  display: grid; grid-template-columns: minmax(96px, auto) 22px auto 1fr; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 8px; color: var(--mute); font-size: .9rem;
}
.syn-row.on { background: var(--panel); color: var(--ink); box-shadow: inset 3px 0 0 var(--gold); }
.syn-name { font-weight: 700; white-space: nowrap; }
.syn-count { font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pips { display: flex; gap: 3px; }
.pips i {
  font-style: normal; font-size: .76rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
  display: grid; place-items: center; border: 1px solid var(--line); color: var(--mute);
}
.pips i.on { background: var(--gold); border-color: var(--gold); color: var(--btnink); }
.muted { color: var(--mute); }
.syn-pending { font-size: .85rem; color: var(--mute); margin: 6px 8px 0; }
.syn-pending span { white-space: nowrap; }
.relics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.relic {
  font-size: .82rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  border: 1px dashed var(--gold); color: var(--gold); background: var(--panel);
}
.info { margin-top: 8px; font-size: .9rem; color: var(--mute); }
.info summary { cursor: pointer; }
.info ul { margin: 6px 0 0; padding-left: 18px; }
.info li { margin: 3px 0; color: var(--ink); }
.info .abil { display: inline; margin: 0; }

.fan { margin: 24px 0 8px; font-size: .78rem; color: var(--mute); line-height: 1.4; }

@media (max-width: 520px) {
  .syn-row { grid-template-columns: auto 22px 1fr; }
  .syn-text { grid-column: 1 / -1; }
}



.head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; max-width: 100%; }
@media (max-width: 480px) { .head-actions { gap: 5px 10px; font-size: .92rem; } }

/* ---------- Kampf-Arena ---------- */
.battle-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.result { font-weight: 700; padding: 3px 12px; border-radius: 999px; font-size: .9rem; }
.result.win { background: var(--hp); color: #fff; }
.result.lose { background: var(--red); color: #fff; }

.arena {
  position: relative; overflow: hidden; border-radius: 14px; padding: 14px 12px 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  background:
    repeating-linear-gradient(170deg, transparent 0 18px, rgba(255,255,255,.07) 18px 20px),
    linear-gradient(180deg, var(--sky) 0%, var(--sea-a) 55%, var(--sea-b) 100%);
  border: 1px solid var(--line);
}
.arena.bossfight { box-shadow: inset 0 0 0 2px var(--red); }
.arena.raid { box-shadow: inset 0 0 0 2px var(--epic), inset 0 0 40px color-mix(in srgb, var(--epic) 35%, transparent); }
.side { display: grid; gap: 8px; align-content: start; }

.fighter {
  position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  --dir: 1;
}
.side-enemy .fighter { grid-template-columns: 1fr 50px; --dir: -1; }
.side-enemy .f-sprite { order: 2; }
.side-enemy .f-sprite svg { transform: scaleX(-1); }
.side-enemy .f-info { text-align: right; }
.fighter.front { box-shadow: 0 0 0 2px var(--gold); }
.fighter.big .f-sprite svg { width: 50px; height: 58px; }
.fighter.big { border-color: var(--red); }

.f-sprite { display: grid; place-items: center; height: 58px; }
.f-sprite svg { width: 42px; height: 49px; shape-rendering: crispEdges; animation: bob 1.4s steps(2) infinite; }
.side-enemy .f-sprite svg { animation-name: bob-mirror; }
.f-name { font-size: .88rem; line-height: 1.2; }
.f-name b { overflow-wrap: anywhere; }
.f-name .type { font-size: .76rem; }
.f-bar { position: relative; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 4px 0 2px; }
.f-bar i, .f-bar s { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.side-enemy .f-bar i, .side-enemy .f-bar s { left: auto; right: 0; }
.f-bar s { background: var(--ghost); transition: width .6s ease .25s; }
.f-bar i { background: var(--hp); z-index: 1; transition: width .2s ease; }
.f-hp { font-size: .75rem; color: var(--mute); font-variant-numeric: tabular-nums; }

.fighter.ko { opacity: .45; filter: grayscale(1); }
.fighter.ko .f-sprite svg { animation: none; transform: rotate(-90deg) translateX(-6px); }
.side-enemy .fighter.ko .f-sprite svg { transform: scaleX(-1) rotate(-90deg) translateX(-6px); }

.fighter.lunge { animation: lunge .26s ease-out; z-index: 2; }
.fighter.hit { animation: hit .32s ease-out; }
.fighter.hit .f-sprite { animation: sprite-flash .32s ease-out; }
.fighter.hit-crit { animation: hit-crit .45s ease-out; }
.fighter.hit-crit .f-sprite { animation: sprite-flash .45s ease-out; }
.fighter.healed { animation: healed .6s ease-out; }
.fighter.revived { animation: revived .9s ease-out; }
.arena.shake { animation: shake .3s ease-out; }
.arena.flash { animation: flash .5s ease-out; }

.fx { position: absolute; top: 0; bottom: 0; left: 0; width: 110px; pointer-events: none; z-index: 3; }
.side-enemy .fx { left: auto; right: 0; }
.float {
  position: absolute; left: 50%; top: 10px; transform: translate(-50%, 0);
  font-weight: 800; font-size: 1.2rem; white-space: nowrap; color: #fff;
  text-shadow: -2px 0 0 #1a1208, 2px 0 0 #1a1208, 0 -2px 0 #1a1208, 0 2px 0 #1a1208, 0 3px 6px rgba(0,0,0,.4);
  animation: float-up 1.1s ease-out forwards;
}
.float.crit { color: #ffd34d; font-size: 1.5rem; }
.float.strong { color: #ffb36b; }
.float.weak { color: #d6d6d6; font-size: 1rem; }
.float.burn { color: #ff8a4d; }
.float.heal { color: #7dff9d; }
.float.miss, .float.block { color: #cfe8ff; font-size: .95rem; }
.float.tag { top: 34px; font-size: .75rem; font-weight: 700; }

.log { min-height: 3em; margin: 12px 0 4px; font-weight: 700; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes bob-mirror { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-2px); } }
@keyframes lunge { 40% { transform: translateX(calc(var(--dir) * 12px)) scale(1.03); } }
@keyframes hit { 20% { transform: translateX(calc(var(--dir) * -6px)); } 50% { transform: translateX(calc(var(--dir) * 4px)); } }
@keyframes hit-crit { 15% { transform: translateX(calc(var(--dir) * -10px)) scale(1.04); box-shadow: 0 0 0 3px #ffd34d; } 45% { transform: translateX(calc(var(--dir) * 6px)); } }
@keyframes sprite-flash { 20% { filter: brightness(3) saturate(0); } 60% { filter: none; } }
@keyframes healed { 30% { box-shadow: 0 0 0 3px var(--hp), 0 0 18px var(--hp); } }
@keyframes revived { 30% { box-shadow: 0 0 0 3px var(--gold), 0 0 24px var(--gold); filter: brightness(1.4); } }
@keyframes shake { 25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px); } 75% { transform: translate(2px, 1px); } }
@keyframes flash { 30% { filter: brightness(1.25); } }
@keyframes float-up {
  0% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), 8px) scale(.8); }
  15% { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px)), -4px) scale(1.1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -34px) scale(1); }
}
.fast .float { animation-duration: .55s; }
.fast .fighter.lunge, .fast .fighter.hit, .fast .fighter.hit-crit { animation-duration: .14s; }

@media (max-width: 520px) {
  .arena { gap: 8px; padding: 10px 8px 16px; }
  .fighter { grid-template-columns: 38px 1fr; gap: 6px; padding: 5px 6px; }
  .side-enemy .fighter { grid-template-columns: 1fr 38px; }
  .f-sprite { height: 46px; }
  .f-sprite svg { width: 32px; height: 37px; }
  .fighter.big .f-sprite svg { width: 38px; height: 44px; }
  .f-name { font-size: .8rem; }
}

/* ---------- Raids, epische Früchte, Freischaltungen ---------- */
.opt.raid { border-color: var(--epic); border-style: dashed; background: color-mix(in srgb, var(--epic) 8%, transparent); }
.opt.epic { border-color: var(--epic); box-shadow: 0 0 0 1px var(--epic), 0 0 18px color-mix(in srgb, var(--epic) 35%, transparent); }
.epic-tag {
  font-style: normal; font-size: .76rem; font-weight: 700; color: #fff; background: var(--epic);
  padding: 1px 7px; border-radius: 999px; vertical-align: 2px;
}
.opt-sprite .icon { width: 34px; height: 34px; shape-rendering: crispEdges; }
.epic-icon { filter: drop-shadow(0 0 4px var(--epic)); }
.opt.unlocked-cap { border-color: var(--gold); }
.opts.captains { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px; }
.opt.cap { padding: 10px 12px; font-size: .88rem; }
.opt.cap .opt-body > b { font-size: 1rem; }
.opt.cap .abil { font-size: .85rem; }
.silhouette svg { filter: brightness(0); opacity: .35; }
.locked-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 6px; }
.locked-cap { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; border: 1px dashed var(--line); }
.locked-cap span { display: grid; }
.locked-cap small { color: var(--mute); }

.toasts { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(420px, calc(100% - 32px)); }
.toast {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center;
  background: var(--panel); color: var(--ink); border: 2px solid var(--gold); border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: toast-in .35s ease-out;
}
.toast i svg { width: 36px; height: 42px; shape-rendering: crispEdges; }
.toast i .icon { width: 34px; height: 34px; }
.toast span { display: grid; font-size: .9rem; }
.toast > span:only-child { grid-column: 1 / -1; }
.toast { border-width: 1px; border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.toast.out { opacity: 0; transform: translateY(8px); transition: all .5s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Sammelalbum ---------- */
.album {
  position: fixed; inset: 0; z-index: 50; overflow: auto;
  background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(6px);
}
.album-inner { max-width: 880px; margin: 0 auto; padding: 16px; }
.album-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.album-head h2 { font-size: 2rem; }
.album-head .btn { margin-top: 4px; }
.atabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.atab {
  all: unset; cursor: pointer; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  font-weight: 700; display: inline-flex; gap: 6px; align-items: baseline;
}
.atab small { color: var(--mute); font-weight: 400; font-variant-numeric: tabular-nums; }
.atab.on { background: var(--btn); color: var(--btnink); border-color: var(--btn); }
.atab.on small { color: inherit; opacity: .75; }
.atab:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.acard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px;
  display: grid; justify-items: center; text-align: center; gap: 4px;
}
.acard-art {
  width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%);
}
.acard-art svg { width: 48px; height: 56px; shape-rendering: crispEdges; }
.acard-art .icon { width: 40px; height: 40px; }
.acard b { font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: 1.2rem; line-height: 1.1; }
.acard small { color: var(--mute); font-size: .8rem; line-height: 1.3; }
.acard .no { font-size: .76rem; color: var(--mute); font-variant-numeric: tabular-nums; justify-self: start; margin-bottom: -18px; }
.acard.gold { border-color: var(--gold); }
.acard.epic { border-color: var(--epic); box-shadow: 0 0 14px color-mix(in srgb, var(--epic) 30%, transparent); }
.acard.unknown .acard-art svg { filter: brightness(0); opacity: .3; }
.acard.unknown .acard-art { background: none; }
.acard.unknown b { color: var(--mute); }

@media (prefers-reduced-motion: reduce) {
  .bar i, .f-bar i, .f-bar s { transition: none; }
  .f-sprite svg, .fighter.lunge, .fighter.hit, .fighter.hit-crit, .arena.shake { animation: none !important; }
  .float { animation-name: fade-only; }
  @keyframes fade-only { 0% { opacity: 1; } 100% { opacity: 0; } }
}


/* ---------- Crewkarten: Level, Sterne, Erfahrung, Punkte ---------- */
.u.member { position: relative; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.u.member:hover { border-color: var(--gold); }
.u.member:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.u-name { font-weight: 700; }
.lv {
  font-style: normal; font-size: .76rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--xp); color: #fff; vertical-align: 1px; white-space: nowrap;
}
.stars { color: var(--legend); letter-spacing: -1px; font-size: .8rem; white-space: nowrap; }
.stars i { font-style: normal; color: var(--line); }
.stars.s3 { text-shadow: 0 0 6px color-mix(in srgb, var(--legend) 60%, transparent); }
.trait {
  font-size: .76rem; font-weight: 700; padding: 0 6px; border-radius: 4px;
  border: 1px solid var(--line); color: var(--ink); white-space: nowrap;
}
.xpbar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--xp) 18%, var(--line)); overflow: hidden; margin-top: 3px; }
.xpbar i { display: block; height: 100%; background: var(--xp); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.xpbar.big { height: 8px; border-radius: 4px; }
.points-badge {
  position: absolute; top: -8px; right: -6px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: #fff; background: var(--xp);
  box-shadow: 0 0 0 2px var(--bg); animation: pulse-badge 1.4s ease-in-out infinite;
}
@keyframes pulse-badge { 50% { transform: scale(1.12); box-shadow: 0 0 0 2px var(--bg), 0 0 14px var(--xp); } }

/* Set-Boni (Banden) hervorheben */
.syn-row.set { box-shadow: inset 3px 0 0 var(--epic); background: color-mix(in srgb, var(--epic) 10%, var(--panel)); }
.syn-name small { display: block; font-size: .76rem; color: var(--epic); font-weight: 700; }
.relic { display: inline-flex; align-items: center; gap: 5px; }
.relic .icon { width: 16px; height: 16px; shape-rendering: crispEdges; }
.relic.rr-common { border-color: var(--mute); color: var(--ink); }
.relic.rr-rare { border-color: var(--rare); color: var(--rare); }
.relic.rr-epic { border-color: var(--epic); color: var(--epic); }
.relic.rr-legendary { border-color: var(--legend); color: var(--legend); box-shadow: 0 0 10px color-mix(in srgb, var(--legend) 40%, transparent); }

/* ---------- Seltenheit ---------- */
.rar {
  font-style: normal; font-size: .76rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  color: #fff; vertical-align: 2px; white-space: nowrap;
}
.rar-common { background: #7a7568; }
.rar-rare { background: var(--rare); }
.rar-epic { background: var(--epic); }
.rar-legendary { background: linear-gradient(90deg, #c98a12, #f0d070, #c98a12); color: #2a1f14; }
.rar-awakened { background: linear-gradient(90deg, #7b3fbf, #e870a0); }
.rar-unique { background: var(--sea); }

.loot-opt { position: relative; overflow: hidden; animation: deal .35s ease-out backwards; }
.opts.loot .loot-opt:nth-child(2) { animation-delay: .08s; }
.opts.loot .loot-opt:nth-child(3) { animation-delay: .16s; }
@keyframes deal { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.lr-rare { border-color: var(--rare); }
.lr-epic { border-color: var(--epic); box-shadow: 0 0 16px color-mix(in srgb, var(--epic) 30%, transparent); }
.lr-legendary, .lr-awakened { border-color: var(--legend); box-shadow: 0 0 22px color-mix(in srgb, var(--legend) 40%, transparent); }
.lr-awakened { border-color: var(--epic); }
.lr-epic::after, .lr-legendary::after, .lr-awakened::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  transform: translateX(-100%); animation: shine 2.6s ease-in-out infinite;
}
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.opt.star3 { border-color: var(--legend); }

/* ---------- Route: Symbole und Gefahr ---------- */
.opts.route .opt.with-sprite { grid-template-columns: 44px 1fr; }
.danger { display: inline-flex; align-items: center; gap: 2px; font-size: .76rem; font-weight: 700; margin-left: 4px; vertical-align: 2px; white-space: nowrap; }
.danger i { width: 6px; height: 10px; border-radius: 2px; background: currentColor; }
.danger i:last-of-type { margin-right: 4px; }
.d-low { color: var(--hp); }
.d-mid { color: var(--gold); }
.d-high { color: var(--red); }
.track i.boss { height: 12px; }

/* ---------- Spieler-Visitenkarte (aus der Rangliste) ---------- */
.pcard-wrap { position: fixed; inset: 0; z-index: 60; }
.pcard-bg {
  position: fixed; inset: 0; overflow: auto; padding: 16px;
  background: rgba(40, 28, 14, .55); backdrop-filter: blur(3px);
  display: grid; place-items: start center; cursor: pointer;
}
.pcard {
  width: min(420px, 100%); margin: 24px 0; background: var(--panel); color: var(--ink); cursor: default;
  border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 20px 50px rgba(40,25,10,.35);
  animation: sheet-in .25s ease-out; position: relative;
}
.pcard-close { position: absolute; top: 12px; right: 14px; font-size: 1.1rem; }
.pcard-top { display: grid; justify-items: center; gap: 4px; text-align: center; }
.pcard-cap svg, .pcard-cap { width: 64px; height: 74px; display: grid; place-items: center; }
.pcard-name { font-size: 1.2rem; }
.pcard-top small { color: var(--mute); }
.pcard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.pcard-stats div { text-align: center; background: var(--panel-2); border-radius: 10px; padding: 8px 4px; }
.pcard-stats b { display: block; font-size: 1.05rem; }
.pcard-stats span { font-size: .72rem; color: var(--mute); }
.pcard-sec { margin-top: 14px; }
.pcard-sec > b { display: block; font-size: .82rem; color: var(--mute); margin-bottom: 6px; }
.vc-row { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); font-size: .78rem; }
.vc-chip svg { width: 18px; height: 21px; shape-rendering: crispEdges; }
.vc-chip b { font-weight: 700; }
.vc-chip small { color: var(--mute); }
.lb-row { cursor: pointer; }
.lb-row:hover, .lb-row:focus-visible { background: color-mix(in srgb, var(--gold) 10%, transparent); }

/* ---------- Steckbrief ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 55; overflow: auto; padding: 16px;
  background: rgba(10, 8, 4, .55); backdrop-filter: blur(3px);
  display: grid; place-items: start center;
}
.sheet-card {
  width: min(520px, 100%); margin: 24px 0; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.35);
  animation: sheet-in .25s ease-out;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.sheet-top { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 8px; }
.sheet-nav { all: unset; cursor: pointer; font-size: 2rem; text-align: center; color: var(--mute); }
.sheet-nav:focus-visible { outline: 3px solid var(--sea); border-radius: 8px; }
.poster {
  display: grid; justify-items: center; gap: 4px; text-align: center; padding: 12px;
  background: color-mix(in srgb, var(--gold) 10%, var(--bg)); border: 2px solid color-mix(in srgb, var(--gold) 60%, var(--line));
  border-radius: 10px;
}
.poster-label { font-family: "Pirata One", Georgia, serif; font-size: 1.3rem; letter-spacing: .04em; color: var(--gold); }
.poster-art svg { width: 84px; height: 98px; shape-rendering: crispEdges; animation: bob 1.4s steps(2) infinite; }
.poster h3 { font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: 1.8rem; margin: 0; line-height: 1; }
.poster .xpbar { width: 100%; }
.poster small { color: var(--mute); }
.sheet-tags { margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--mute); }
.sheet-abil .abil { margin-top: 6px; }
.spend {
  margin: 12px 0; padding: 12px; border-radius: 10px; border: 2px solid var(--xp);
  background: color-mix(in srgb, var(--xp) 10%, var(--panel));
}
.spend-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.spend-btns .btn { margin-top: 8px; background: var(--xp); color: #fff; }
.spend-btns .btn:disabled { opacity: .4; cursor: default; }
/* Preise, die man sich noch nicht leisten kann: gut lesbar, aber klar inaktiv */
.btn.buy:disabled { opacity: 1; background: transparent; color: var(--mute); border: 1px solid var(--line); box-shadow: none; }
.btn.buy:disabled .coin { opacity: .6; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.st { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 3px 0; font-size: .92rem; }
.st span { color: var(--mute); }
.st .up { font-style: normal; color: var(--hp); font-size: .8rem; }
.sheet-sets { margin: 0 0 8px; padding-left: 18px; font-size: .9rem; }
.set-tag { font-style: normal; font-size: .76rem; font-weight: 700; color: #fff; background: var(--epic); padding: 0 5px; border-radius: 4px; margin-right: 4px; }

/* ---------- Kampf-Auswertung ---------- */
.summary { display: grid; gap: 6px; margin: 4px 0 6px; }
.sum-row {
  display: grid; grid-template-columns: 40px minmax(90px, 1fr) 1.4fr; gap: 10px; align-items: center;
  padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 60%, var(--panel)); position: relative;
  animation: deal .3s ease-out backwards;
}
.sum-row:nth-child(2) { animation-delay: .06s; } .sum-row:nth-child(3) { animation-delay: .12s; }
.sum-row:nth-child(4) { animation-delay: .18s; } .sum-row:nth-child(5) { animation-delay: .24s; }
.sum-row.mvp { box-shadow: inset 0 0 0 2px var(--legend); }
.sum-sprite svg { width: 32px; height: 37px; shape-rendering: crispEdges; }
.sum-name { display: grid; line-height: 1.2; }
.sum-name small { color: var(--mute); }
.mvp-tag { font-style: normal; font-size: .76rem; font-weight: 800; color: #2a1f14; background: var(--legend); padding: 0 5px; border-radius: 4px; justify-self: start; }
.sum-xp { display: grid; gap: 3px; }
.sum-xp-top { display: flex; justify-content: space-between; align-items: center; }
.sum-xp-top small { color: var(--xp); font-weight: 700; }
.lvup {
  grid-column: 2 / -1; font-weight: 800; color: var(--xp); font-size: .9rem;
  animation: lvup .6s cubic-bezier(.2,1.6,.4,1);
}
.sum-row.leveled { box-shadow: inset 0 0 0 2px var(--xp), 0 0 18px color-mix(in srgb, var(--xp) 40%, transparent); }
@keyframes lvup { from { opacity: 0; transform: scale(.6); } }

/* ---------- Arena: Fähigkeiten und K.o. ---------- */
.callout {
  position: absolute; left: 50%; top: -12px; transform: translateX(-50%); z-index: 4; white-space: nowrap;
  font-size: .76rem; font-weight: 800; color: #2a1f14; background: var(--legend);
  padding: 2px 8px; border-radius: 999px; box-shadow: 0 3px 8px rgba(0,0,0,.3);
  animation: callout 1.5s ease-out forwards;
}
@keyframes callout { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.ko-stamp {
  position: absolute; left: 50%; top: 50%; font-family: "Pirata One", Georgia, serif; font-size: 1.6rem; color: var(--red);
  border: 3px solid var(--red); border-radius: 6px; padding: 0 6px; background: color-mix(in srgb, var(--panel) 70%, transparent);
  transform: translate(-50%, -50%) rotate(-12deg); animation: stamp 1.4s ease-out forwards;
}
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.2); } 15% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 520px) {
  .sum-row { grid-template-columns: 34px 1fr; }
  .sum-xp { grid-column: 1 / -1; }
}
@media (max-width: 340px) {
  .stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .points-badge, .loot-opt, .lr-epic::after, .lr-legendary::after, .lr-awakened::after, .sum-row, .poster-art svg { animation: none !important; }
}


/* ---------- Kleine Buttons, Berry ---------- */
.btn.mini { margin-top: 0; padding: 6px 12px; font-size: .85rem; border-radius: 7px; display: inline-flex; gap: 6px; align-items: center; }
.btn:disabled { opacity: .4; cursor: default; }
/* Preise, die man sich noch nicht leisten kann: gut lesbar, aber klar inaktiv */
.btn.buy:disabled { opacity: 1; background: transparent; color: var(--mute); border: 1px solid var(--line); box-shadow: none; }
.btn.buy:disabled .coin { opacity: .6; }
.coin { width: 14px; height: 14px; shape-rendering: crispEdges; vertical-align: -2px; }
.berry { display: inline-flex; align-items: center; gap: 6px; font-size: 1.1rem; color: var(--gold); }
.berry .coin { width: 18px; height: 18px; }
.berry b { font-size: 1.4rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.berry-gain {
  display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--gold); color: var(--gold); animation: lvup .6s cubic-bezier(.2,1.6,.4,1);
}
.berry-gain b { color: var(--ink); font-size: 1.2rem; }

/* ---------- Statuspunkte-Hinweis ---------- */
.points-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -4px 0 14px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--xp) 22%, var(--panel-2)); border: 1px solid var(--xp);
  animation: banner-glow 2.2s ease-in-out infinite;
}
.points-banner span:nth-child(2) { flex: 1; min-width: 180px; }
.points-banner .btn { background: var(--xp); color: #fff; white-space: nowrap; }
.pb-star { color: var(--xp); font-size: 1.3rem; }
@keyframes banner-glow { 50% { box-shadow: 0 0 18px color-mix(in srgb, var(--xp) 45%, transparent); } }
.lvup .btn.mini { margin-left: 8px; background: var(--xp); color: #fff; }

/* ---------- Ereignisse auf See ---------- */
.event {
  padding: 4px 2px; text-align: left;
}
.event-kicker { display: block; color: var(--gold); font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.event h2 { font-size: 2rem; margin: 2px 0 6px; }
.event p { color: var(--mute); max-width: 60ch; }
.opt.event-opt { border-color: var(--wood); }
.opt.event-opt:hover { border-color: var(--gold); }
.notice {
  margin: -4px 0 14px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, var(--panel-2)); animation: deal .35s ease-out;
}
.notice span { color: var(--mute); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Hauptquartier ---------- */
.hq { display: grid; gap: 16px; }
.hq-hero { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; }
.hq-scene {
  position: relative; height: 120px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #1b2c3e 0%, #10202f 60%, #08121c 100%); border: 1px solid var(--line);
}
.hq-ship { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); animation: ship-bob 3s ease-in-out infinite; }
.hq-ship svg { width: 96px; height: 72px; shape-rendering: crispEdges; display: block; }
.hq-waves {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: repeating-linear-gradient(90deg, rgba(241,238,232,.10) 0 8px, transparent 8px 20px), linear-gradient(180deg, #13283b, #0a1622);
  animation: waves 6s linear infinite;
}
@keyframes ship-bob { 50% { transform: translateX(-50%) translateY(-4px) rotate(-1.5deg); } }
@keyframes waves { to { background-position: 40px 0, 0 0; } }
.hq-title h2 { font-size: 2.4rem; margin: 0 0 4px; }
.hq-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hq-stats div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; display: grid; }
.hq-stats b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.hq-stats span { color: var(--mute); font-size: .8rem; }
.hq-sail {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--wood);
}
.hq-sail div { display: grid; }
.hq-sail small { color: var(--mute); }
.btn.sail { margin-top: 0; font-size: 1.1rem; padding: 12px 22px; font-family: "Pirata One", Georgia, serif; font-weight: 400; letter-spacing: .02em; }
.hq-sec h3 { font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: 1.5rem; margin: 0; }
.hq-sec h3 small { font-family: "Alegreya Sans", system-ui, sans-serif; font-size: .85rem; color: var(--mute); margin-left: 8px; }
.hq-sec .hint { margin: 2px 0 10px; }
.hq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.hq-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  display: grid; gap: 4px; align-content: start;
}
.hq-card p { margin: 0; font-size: .9rem; }
.hq-card .buy { justify-self: start; margin-top: 6px; }
.hq-card.maxed { border-color: var(--gold); }
.hq-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lvpips { display: flex; gap: 3px; }
.lvpips i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--wood); }
.lvpips i.on { background: var(--gold); border-color: var(--gold); }
.hq-list { display: grid; gap: 8px; }
.hq-item {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.hq-item.on { border-color: var(--gold); }
.hq-item i .icon { width: 28px; height: 28px; shape-rendering: crispEdges; }
.hq-item span { display: grid; }
.hq-item small { color: var(--mute); font-size: .82rem; }

@media (max-width: 520px) {
  .hq-hero { grid-template-columns: 1fr; }
  .hq-stats { grid-template-columns: repeat(2, 1fr); }
  .hq-item { grid-template-columns: 30px 1fr; }
  .hq-item .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .hq-ship, .hq-waves, .points-banner { animation: none !important; }
}


/* ---------- Kompakte Crew-Leiste und Tastenkürzel ---------- */
.crew-label { display: flex; align-items: center; gap: 8px; }
.crew-label small { color: var(--mute); }
.crew-label .link { margin-left: auto; font-size: .85rem; }
.crew.compact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crewmini {
  position: relative; width: 58px; padding: 4px 4px 5px; border-radius: 9px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); display: grid; justify-items: center;
}
.crewmini:hover, .crewmini:focus-visible { border-color: var(--gold); outline: none; }
.crewmini > i svg { width: 30px; height: 35px; shape-rendering: crispEdges; }
.crewmini .lv { position: absolute; top: 2px; left: 2px; font-size: .76rem; padding: 0 4px; }
.crewmini .bar { width: 100%; height: 4px; margin-top: 2px; }
.crewmini.dead { opacity: .4; }
.crewmini .points-badge { min-width: 20px; height: 20px; font-size: .76rem; top: -7px; right: -7px; }
.crewmini.role-bg-brecher { border-bottom: 3px solid #4f86c6; }
.crewmini.role-bg-kaempfer { border-bottom: 3px solid #d0564a; }
.crewmini.role-bg-helfer { border-bottom: 3px solid #5bb36c; }
.crewmini .role-ico { position: absolute; bottom: 9px; right: 3px; font-size: .66rem; z-index: 1; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-left: 4px; }
.chip {
  font-size: .78rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--gold); color: var(--gold); white-space: nowrap;
}
.chip.set { border-color: var(--epic); color: var(--epic); }
.chip.relic-chip { border-style: dashed; color: var(--ink); border-color: var(--wood); }
.opt { position: relative; }
.key {
  position: absolute; top: 6px; right: 8px; font: 700 .78rem "Alegreya Sans", system-ui, sans-serif;
  color: var(--mute); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; background: var(--bg);
}
.key.inline { position: static; margin-left: 6px; vertical-align: 1px; font-size: .76rem; color: inherit; opacity: .7; background: transparent; border-color: currentColor; }
@media (hover: none) { .key { display: none; } }


/* ---------- Sammelkarten ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 46%), 1fr)); gap: 12px; }
.opt.card { padding: 0; border: 0; border-radius: 14px; display: block; transition: transform .15s ease; }
.opt.card:hover { transform: translateY(-3px) rotate(-.4deg); }
.opt.card:hover .card-face { box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 2px var(--gold); }
.opt.card .key { top: auto; bottom: 7px; right: 50%; transform: translateX(50%); z-index: 3; }

.card-face {
  position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: center;
  min-height: 268px; height: 100%; border-radius: 14px; padding: 8px 8px 30px;
  background: linear-gradient(180deg, #2a221b 0%, #1a1511 100%);
  border: 3px solid var(--wood); box-shadow: 0 6px 16px rgba(0,0,0,.35); color: var(--ink);
}
.frame-s1 { border-color: #5d5850; }
.frame-s2 { border-color: #8aa4bf; }
.frame-s3 { border-color: var(--legend); box-shadow: 0 0 18px color-mix(in srgb, var(--legend) 35%, transparent), 0 6px 16px rgba(0,0,0,.35); }
.frame-gold { outline: 2px solid var(--legend); outline-offset: 2px; }
.frame-common { border-color: #5d5850; }
.frame-rare { border-color: var(--rare); }
.frame-epic { border-color: var(--epic); box-shadow: 0 0 18px color-mix(in srgb, var(--epic) 35%, transparent); }
.frame-legendary { border-color: var(--legend); box-shadow: 0 0 22px color-mix(in srgb, var(--legend) 45%, transparent); }
.frame-awakened { border-color: #e870a0; box-shadow: 0 0 22px color-mix(in srgb, var(--epic) 45%, transparent); }
.frame-unique { border-color: var(--sea); }

.card-art {
  display: grid; place-items: center; height: 96px; border-radius: 50% 50% 10px 10px / 30% 30% 10px 10px;
  border: 2px solid rgba(0,0,0,.35); margin: 14px 4px 0;
}
.card-art svg { width: 58px; height: 68px; shape-rendering: crispEdges; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.card-art .icon { width: 52px; height: 52px; }
.art-kraft { background: radial-gradient(circle at 50% 40%, #6a2a24, #2a1210); }
.art-klinge { background: radial-gradient(circle at 50% 40%, #2c5434, #11201a); }
.art-technik { background: radial-gradient(circle at 50% 40%, #24466e, #0f1b2c); }
.art-loot { background: radial-gradient(circle at 50% 40%, #3a3026, #15110d); }

.card-name {
  font-family: "Pirata One", Georgia, serif; font-size: 1.25rem; line-height: 1.05;
  margin: -12px 6px 2px; padding: 3px 6px; border-radius: 6px; position: relative;
  background: linear-gradient(180deg, #4a3828, #33261b); border: 1px solid #6b5440;
}
.card-type { font-size: .76rem; color: var(--mute); margin: 2px 0 4px; }
.card-type .type { font-size: .76rem; }
.card-text {
  flex: 1; font-size: .76rem; line-height: 1.3; color: #d9d4ca; text-align: left;
  background: rgba(0,0,0,.25); border-radius: 8px; padding: 6px 7px; display: grid; gap: 4px; align-content: start;
}
.card-text .gain { font-size: .76rem; margin-top: 0; }
.card-trait { color: var(--mute); }
.card-stars { position: absolute; top: 5px; left: 0; right: 0; text-align: center; z-index: 2; }
.card-rarity { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 2; }

.gem {
  position: absolute; z-index: 2; display: grid; place-items: center; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6);
  border: 2px solid rgba(0,0,0,.45);
}
.gem-lv { top: -8px; left: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--xp); font-size: .85rem; }
.gem-spd { top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 6px; transform: rotate(45deg); background: #3f6f9c; font-size: .75rem; }
.gem-spd { line-height: 1; }
.gem-atk {
  bottom: -10px; left: -10px; width: 40px; height: 40px; border-radius: 50%; font-size: 1.15rem;
  background: radial-gradient(circle at 35% 30%, #f0d070, #b8860b);
}
.gem-hp {
  bottom: -10px; right: -10px; width: 40px; height: 40px; font-size: 1.15rem;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #e86a5c, #9b2a20);
}
/* Text im Tempo-Diamanten wieder gerade stellen */
.gem-spd b { display: block; transform: rotate(-45deg); }

.acard-card { position: relative; }
.acard-card .no { position: absolute; top: 8px; right: 14px; z-index: 3; font-size: .76rem; color: var(--mute); }
.acard-card .card-face { min-height: 250px; }

@media (max-width: 520px) {
  .card-face { min-height: 250px; padding: 6px 6px 28px; }
  .card-art { height: 80px; }
  .card-art svg { width: 48px; height: 56px; }
  .card-name { font-size: 1.1rem; }
}


/* ---------- Kopfgeld-Stufen ---------- */
.heat { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--wood); }
.heat-label { font-weight: 700; }
.heat-num { font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: 1.6rem; min-width: 1.4em; text-align: center; color: var(--red); }
.heat small { color: var(--mute); }
.heat .btn.mini { min-width: 34px; justify-content: center; }
.heat-list { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; font-size: .85rem; color: var(--mute); }
.heat-list b { color: var(--ink); }
.heat-chip { font-style: normal; font-size: .75rem; font-weight: 700; color: #fff; background: var(--red); padding: 1px 7px; border-radius: 999px; }
.heat-unlock {
  display: grid; gap: 2px; margin: 8px 0; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--red); background: color-mix(in srgb, var(--red) 12%, var(--panel-2));
  animation: lvup .6s cubic-bezier(.2,1.6,.4,1);
}
.heat-unlock small { color: var(--mute); }


/* ---------- Insel-Hintergründe in der Arena ---------- */
.arena { isolation: isolate; }
.arena > .side { position: relative; z-index: 1; }
.arena-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* East Blue: ruhiges Meer in der Dämmerung, ein paar Wolken */
.isl-east-blue .arena-sky {
  background:
    radial-gradient(ellipse 120px 26px at 18% 18%, rgba(241,238,232,.10), transparent 70%),
    radial-gradient(ellipse 160px 30px at 78% 12%, rgba(241,238,232,.08), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(111,159,207,.10) 56%, transparent 58%);
}
.arena.isl-east-blue { background: linear-gradient(180deg, #1a3046 0%, #12263a 55%, #0a1826 100%); }
/* Paradies: Wüste bei Sonnenuntergang, Dünen in Braun */
.arena.isl-paradies { background: linear-gradient(180deg, #3a2a20 0%, #2a1f18 45%, #17110d 100%); }
.isl-paradies .arena-sky {
  background:
    radial-gradient(circle 40px at 82% 22%, rgba(226,180,74,.35), transparent 70%),
    radial-gradient(ellipse 60% 22% at 25% 100%, #3d2d20 98%, transparent 100%),
    radial-gradient(ellipse 55% 18% at 80% 100%, #33261c 98%, transparent 100%);
}
/* Enies Lobby: Nacht, Türme mit Lichtern */
.arena.isl-enies-lobby { background: linear-gradient(180deg, #0c1420 0%, #0a101a 60%, #05080d 100%); }
.isl-enies-lobby .arena-sky {
  background:
    radial-gradient(circle 1.5px at 20% 15%, #f1eee8 99%, transparent), radial-gradient(circle 1px at 45% 8%, #f1eee8 99%, transparent),
    radial-gradient(circle 1.5px at 70% 20%, #f1eee8 99%, transparent), radial-gradient(circle 1px at 88% 9%, #f1eee8 99%, transparent),
    linear-gradient(90deg, transparent 8%, #141c28 8% 13%, transparent 13% 30%, #141c28 30% 36%, transparent 36% 62%, #141c28 62% 66%, transparent 66% 84%, #141c28 84% 90%, transparent 90%) bottom / 100% 34% no-repeat;
}
.arena.raid .arena-sky {
  background: repeating-linear-gradient(115deg, transparent 0 40px, rgba(179,136,240,.06) 40px 42px);
  animation: storm 1.2s linear infinite;
}
@keyframes storm { 50% { opacity: .5; } }
/* Kampfbeginn: Arena wischt herein */
.arena.entering { animation: arena-in .5s cubic-bezier(.2,.8,.2,1); }
@keyframes arena-in { from { clip-path: inset(0 50% 0 50% round 14px); opacity: .4; } to { clip-path: inset(0 0 0 0 round 14px); opacity: 1; } }

/* ---------- Insel-Einblendung ---------- */
.scene {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; cursor: pointer;
  background: rgba(5, 8, 12, .72); backdrop-filter: blur(2px); animation: scene-in .45s ease-out;
}
.scene.out { opacity: 0; transition: opacity .55s ease; }
.scene-card { text-align: center; padding: 24px; max-width: 520px; }
.scene-card h2 { font-size: clamp(2.6rem, 9vw, 4.2rem); margin: 4px 0 8px; animation: scene-title .8s cubic-bezier(.2,.8,.2,1); }
.scene-card p { color: var(--mute); margin: 0; }
.scene.isl-paradies h2 { color: #e2b44a; }
.scene.isl-enies-lobby h2 { color: #d0564a; }
@keyframes scene-in { from { opacity: 0; } }
@keyframes scene-title { from { letter-spacing: .4em; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .arena.entering, .scene, .scene-card h2, .arena.raid .arena-sky { animation: none !important; }
}


/* ---------- Willkommen / Anleitung ---------- */
.intro {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  background: rgba(5, 8, 12, .8); backdrop-filter: blur(4px);
}
.intro-card {
  width: min(480px, 100%); background: var(--panel-2); border: 1px solid var(--wood); border-radius: 18px;
  padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: sheet-in .3s ease-out;
}
.intro-ship { display: grid; place-items: center; margin: -6px 0 8px; }
.intro-ship svg { width: 88px; height: 66px; shape-rendering: crispEdges; animation: ship-bob 3s ease-in-out infinite; }
.intro-card h2 { font-size: 2.1rem; margin: 2px 0 10px; }
.intro-body { min-height: 150px; color: var(--ink); }
.intro-body p { margin: 0 0 12px; }
.intro-note { font-size: .88rem; color: var(--mute); border-left: 3px solid var(--gold); padding: 6px 10px; background: rgba(0,0,0,.2); border-radius: 0 8px 8px 0; }
.intro-steps, .intro-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.intro-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.intro-foot .btn { margin-top: 0; }
.intro-foot .btn:last-child { margin-left: auto; }
.intro-dots { display: flex; gap: 5px; }
.intro-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.intro-dots i.on { background: var(--gold); width: 20px; border-radius: 4px; }


/* Helles Design: Karten und Kacheln mit leichtem Schatten, Arena bleibt dunkles Meer */
:root:not([data-theme="dark"]) .u,
:root:not([data-theme="dark"]) .hq-card,
:root:not([data-theme="dark"]) .hq-item,
:root:not([data-theme="dark"]) .hq-stats div,
:root:not([data-theme="dark"]) .hq-sail,
:root:not([data-theme="dark"]) .acard,
:root:not([data-theme="dark"]) .crewmini,
:root:not([data-theme="dark"]) .sheet-card { box-shadow: var(--shadow); }
:root:not([data-theme="dark"]) .opt { background: var(--panel); }
:root:not([data-theme="dark"]) .opt.card { background: transparent; }
:root:not([data-theme="dark"]) .arena .fighter { --panel: #1f1914; --line: #34393f; --ink: #f1eee8; --mute: #b3b7bc; color: #f1eee8; }
:root:not([data-theme="dark"]) .key { background: #fff; }
.key.inline, :root:not([data-theme="dark"]) .key.inline { background: transparent; }
.theme-toggle { font-size: .85rem; }

/* ---------- 3D-Effekte ---------- */
/* Buttons mit Kante, die sich beim Drücken absenken */
.btn { box-shadow: 0 3px 0 var(--btnedge); transform: translateY(0); transition: transform .08s ease, box-shadow .08s ease; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--btnedge); }
.btn.ghost { box-shadow: 0 3px 0 var(--line); }
.opt:not(.card) { box-shadow: 0 3px 0 var(--line); transition: transform .1s ease, box-shadow .1s ease, border-color .1s; }
.opt:not(.card):hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--line), var(--shadow); }
.opt:not(.card):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }

/* Sammelkarten kippen mit der Maus (Werte kommen aus main.js) */
.cards { perspective: 900px; }
.opt.card { transform-style: preserve-3d; transition: transform .2s ease; }
.opt.card .card-face {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out, box-shadow .2s;
  transform-style: preserve-3d;
}
.opt.card:hover { transform: translateY(-4px); }
.opt.card .card-art, .opt.card .gem { transform: translateZ(18px); }
.opt.card .card-name { transform: translateZ(26px); }
.opt.card .gem-spd { transform: translateZ(18px) rotate(45deg); }
/* Lichtreflex, der der Maus folgt */
.card-face::after {
  content: ''; position: absolute; inset: 0; border-radius: 11px; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.22), transparent 55%);
}
.opt.card:hover .card-face::after { opacity: 1; }

/* Figuren in der Arena stehen mit Schatten auf dem Wasser */
.f-sprite { position: relative; }
.f-sprite::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 34px; height: 7px; transform: translateX(-50%);
  border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(1px); z-index: -1;
}
.arena .side { perspective: 600px; }
.fighter { transform: rotateX(4deg); transform-origin: bottom; }
.side-crew .fighter { box-shadow: -4px 6px 0 rgba(0,0,0,.25); }
.side-enemy .fighter { box-shadow: 4px 6px 0 rgba(0,0,0,.25); }
/* Schiff im HQ mit Tiefe */
.hq-ship svg, .intro-ship svg { filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
@media (prefers-reduced-motion: reduce) {
  .opt.card .card-face { transform: none !important; }
}


/* ---------- Piratenrang ---------- */
.rank {
  display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center;
  padding: 12px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.rank-badge {
  width: 54px; height: 54px; display: grid; place-items: center; font-family: "Pirata One", Georgia, serif; font-size: 1.7rem;
  color: #fff; background: radial-gradient(circle at 35% 30%, #3f6f9c, #1e2b3a); border-radius: 50%;
  border: 3px solid var(--gold); box-shadow: 0 4px 0 rgba(0,0,0,.2);
}
.rank-body { display: grid; gap: 2px; }
.rank-name { font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.rank-body small { color: var(--mute); }
.rank-bar { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--gold) 18%, var(--line)); }
.rank-bar i { background: linear-gradient(90deg, var(--gold), #e2b44a); }
.rank-gain { display: grid; gap: 4px; margin: 8px 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.rank-gain small { color: var(--gold); font-weight: 700; }
.rank-up {
  display: grid; gap: 2px; margin: 8px 0; padding: 10px 14px; border-radius: 10px;
  border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--panel));
  animation: lvup .7s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 0 20px color-mix(in srgb, var(--gold) 35%, transparent);
}
.rank-up b { font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: 1.5rem; }
.rank-up small { color: var(--mute); }


/* ---------- Aufstellung vor dem Kampf ---------- */
.formation {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; padding: 14px 12px 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; border: 1px solid #34393f;
  background: linear-gradient(180deg, #1a3046 0%, #12263a 55%, #0a1826 100%); color: #f1eee8;
}
.formation.isl-paradies { background: linear-gradient(180deg, #3a2a20 0%, #2a1f18 45%, #17110d 100%); }
.formation.isl-enies-lobby { background: linear-gradient(180deg, #0c1420 0%, #0a101a 60%, #05080d 100%); }
.formation.raid { box-shadow: inset 0 0 0 2px var(--epic); }
.formation > .form-side, .formation > .form-vs { position: relative; z-index: 1; }
.form-label { display: block; font-size: .8rem; font-weight: 700; color: #c9ccd1; margin: 0 0 6px 4px; }
.form-vs {
  align-self: center; font-family: "Pirata One", Georgia, serif; font-size: 1.6rem; color: #e2b44a;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.slots { display: grid; gap: 8px; }
.slot {
  position: relative; display: grid; grid-template-columns: 26px 44px 1fr 14px; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 10px; background: rgba(31, 25, 20, .92); border: 1px solid #4a3a2e;
  box-shadow: 0 4px 0 rgba(0,0,0,.3); cursor: grab; touch-action: none; user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .15s;
}
.slot:focus-visible { outline: 3px solid #6f9fcf; outline-offset: 2px; }
.slot:hover { border-color: #c9a95a; }
.slot.dragging { z-index: 5; cursor: grabbing; transition: none; box-shadow: 0 14px 28px rgba(0,0,0,.5); border-color: #e2b44a; }
.slot.picked { border-color: #e2b44a; box-shadow: 0 0 0 2px #e2b44a, 0 4px 0 rgba(0,0,0,.3); }
.slot.is-front { border-color: #c9a95a; background: rgba(48, 38, 28, .95); }
.slot.down { opacity: .5; filter: grayscale(.8); }
.slot.foe { grid-template-columns: 44px 1fr 26px; cursor: default; background: rgba(20, 29, 40, .92); border-color: #34393f; }
.slot.foe .slot-info { text-align: right; }
.slot.foe .slot-sprite svg { transform: scaleX(-1); }
.slot.foe .slot-sprite { order: 0; }
.slot.foe.boss { border-color: #d0564a; }
.slot-pos { font-weight: 800; color: #9a9ea3; text-align: center; font-size: .9rem; }
.slot.role-bg-brecher { border-left: 4px solid #4f86c6; }
.slot.role-bg-kaempfer { border-left: 4px solid #d0564a; }
.slot.role-bg-helfer { border-left: 4px solid #5bb36c; }
.role-ico { font-style: normal; font-size: .85rem; margin-right: 3px; }
.slot-stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; align-items: center; }
.slot-stats .ss { font-size: .72rem; font-weight: 700; color: #f1eee8; padding: 1px 6px; border-radius: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.role-chip { font-style: normal; font-size: .72rem; font-weight: 800; padding: 1px 7px; border-radius: 6px; color: #fff; white-space: nowrap; }
.role-chip small { font-weight: 700; color: #fff; opacity: 1; font-size: .66rem; padding-left: 4px; border-left: 1px solid rgba(255,255,255,.4); margin-left: 2px; }
.rc-brecher { background: #3f72ad; }
.rc-kaempfer { background: #b9473c; }
.rc-helfer { background: #3f8f50; }
/* Slots: Rollenfarbe als sanfter Verlauf statt einfarbiger Fläche */
.slot.role-bg-brecher { background: linear-gradient(90deg, rgba(79,134,198,.22), rgba(31,25,20,.92) 45%); }
.slot.role-bg-kaempfer { background: linear-gradient(90deg, rgba(208,86,74,.22), rgba(31,25,20,.92) 45%); }
.slot.role-bg-helfer { background: linear-gradient(90deg, rgba(91,179,108,.22), rgba(31,25,20,.92) 45%); }
.shield {
  display: inline-block; width: 18px; height: 20px; background: #e2b44a;
  clip-path: polygon(50% 0, 100% 18%, 92% 62%, 50% 100%, 8% 62%, 0 18%);
}
.slot-sprite svg { width: 36px; height: 42px; shape-rendering: crispEdges; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.slot-info { display: grid; gap: 3px; min-width: 0; }
.slot-info b { font-size: .9rem; overflow-wrap: anywhere; }
.slot-info .type { font-size: .76rem; }
.slot-info small { color: #9a9ea3; font-size: .76rem; }
.slot-bar { height: 5px; border-radius: 3px; background: #34393f; overflow: hidden; }
.slot-bar i { display: block; height: 100%; background: #5bb36c; }
.slot-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.mu { font-style: normal; font-size: .76rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; }
.mu.good { background: #2f7a45; color: #fff; }
.mu.bad { background: #a33a30; color: #fff; }
.grip {
  width: 10px; height: 18px; opacity: .5;
  background: radial-gradient(circle, #c9ccd1 1.2px, transparent 1.6px) 0 0 / 5px 6px;
}
.form-hint { font-size: .88rem; }
@media (max-width: 560px) {
  .formation { grid-template-columns: 1fr; }
  .form-vs { justify-self: center; margin: -4px 0; }
  .slot { grid-template-columns: 22px 38px 1fr 12px; }
  .slot.foe { grid-template-columns: 38px 1fr 22px; }
}
@media (prefers-reduced-motion: reduce) { .slot { transition: none; } }


/* ---------- Statuspunkte deutlich sichtbar ---------- */
.lvtag {
  position: absolute; top: 2px; left: 2px; font-style: normal; font-size: .76rem; font-weight: 800;
  padding: 0 4px; border-radius: 4px; background: rgba(27, 37, 51, .75); color: #fff;
}
.crewmini .lv { display: none; }
.crewmini.has-points {
  border: 2px solid var(--xp); padding-bottom: 22px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xp) 25%, transparent), 0 0 18px color-mix(in srgb, var(--xp) 45%, transparent);
  animation: pts-glow 1.6s ease-in-out infinite;
}
.skill-tab {
  position: absolute; left: -2px; right: -2px; bottom: -2px; padding: 3px 0; border-radius: 0 0 8px 8px;
  background: var(--xp); color: #fff; font-size: .76rem; font-weight: 800; text-align: center; white-space: nowrap;
}
@keyframes pts-glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--xp) 30%, transparent), 0 0 26px color-mix(in srgb, var(--xp) 60%, transparent); } }
.skill-btn {
  all: unset; cursor: pointer; margin-left: 6px; padding: 5px 12px; border-radius: 999px;
  background: var(--xp); color: #fff; font-size: .82rem; font-weight: 800; white-space: nowrap;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--xp) 55%, #000); animation: pts-pulse 1.6s ease-in-out infinite;
}
.skill-btn:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.skill-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--xp) 55%, #000); }
@keyframes pts-pulse { 50% { box-shadow: 0 3px 0 color-mix(in srgb, var(--xp) 55%, #000), 0 0 16px color-mix(in srgb, var(--xp) 70%, transparent); } }
/* Abzeichen auf den großen Karten größer */
.u.member .points-badge { min-width: 34px; height: 34px; font-size: 1rem; top: -12px; right: -10px; }
@media (prefers-reduced-motion: reduce) { .crewmini.has-points, .skill-btn { animation: none; } }

.nowrap { white-space: nowrap; }
.crew-label { flex-wrap: wrap; row-gap: 6px; }


/* ---------- Crew jederzeit umsortieren ---------- */
#crew .crewmini, #crew .member { touch-action: none; user-select: none; }
#crew .crewmini.dragging, #crew .member.dragging {
  z-index: 10; cursor: grabbing; box-shadow: 0 12px 26px rgba(0,0,0,.35); transition: none; position: relative;
}
#crew .crewmini.drop-target, #crew .member.drop-target { outline: 3px dashed var(--gold); outline-offset: 2px; }
.crewmini.is-front::before {
  content: ''; position: absolute; top: -7px; right: -5px; width: 15px; height: 17px; z-index: 2; background: #e2b44a;
  clip-path: polygon(50% 0, 100% 18%, 92% 62%, 50% 100%, 8% 62%, 0 18%); filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
}
.crewmini.has-points.is-front::before { right: auto; left: -5px; }


/* ---------- Ziehen: Kopie am Zeiger, Platzhalter in der Liste ---------- */
.drag-ghost {
  position: fixed !important; z-index: 1000; pointer-events: none; margin: 0;
  transform: rotate(-2deg) scale(1.06); box-shadow: 0 18px 36px rgba(0,0,0,.4) !important; opacity: .96;
}
.drag-placeholder { opacity: .35; outline: 2px dashed var(--gold); outline-offset: 2px; }
.drag-placeholder * { visibility: hidden; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }
.slot { cursor: grab; }
#crew .crewmini, #crew .member { cursor: grab; }


/* ---------- Tipps: dezente Empfehlungen ---------- */
.tip-badge {
  display: inline-block; font: 700 10px/1 var(--font-body, inherit); letter-spacing: .06em; text-transform: uppercase;
  color: #1c1408; background: linear-gradient(135deg, #f3d27a, #d9a63c); border-radius: 999px; padding: 3px 7px;
  box-shadow: 0 1px 4px rgba(217,166,60,.45);
}
.opt.is-tip { box-shadow: 0 0 0 2px #d9a63c, 0 6px 22px rgba(217,166,60,.28); }
.opt.is-tip > .tip-badge { position: absolute; top: -9px; right: 10px; z-index: 30; }
.opt.card.is-tip > .tip-badge { top: -11px; right: auto; left: 50%; transform: translateX(-50%) translateZ(30px); }
.opt { position: relative; }
.tip-line { display: flex; gap: 8px; align-items: baseline; margin: 10px 2px 0; font-size: 14px; color: var(--mute, #777); }
.tip-line .tip-badge { flex: none; }
.slot.is-tip { box-shadow: 0 0 0 2px #d9a63c; }
.spend .btn.rec { box-shadow: 0 0 0 2px #d9a63c; position: relative; }
.spend .btn.rec .tip-badge { position: absolute; top: -12px; right: -8px; font-size: 12px; padding: 2px 6px; }
.spend-why { margin: 8px 0 0; font-size: 13px; color: var(--mute, #777); }

/* ---------- Buff-Leiste links (wie TFT) ---------- */
.traits {
  position: fixed; top: 96px; z-index: 40; width: 220px;
  left: max(12px, calc(50% - 380px - 244px));
  max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 6px;
}
.traits[hidden] { display: none; }
.tr-head { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute, #888); margin: 2px 4px; }
.tr-head.sub { margin-top: 8px; }
.tr-empty { font-size: 13px; color: var(--mute, #888); margin: 0 4px; }
.tr {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line, #e3e3e3);
  box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform .15s;
}
.tr:hover { transform: translateX(3px); }
.tr-icon { display: grid; place-items: center; width: 34px; height: 34px; }
.tr-hex {
  display: grid; place-items: center; width: 32px; height: 34px; font: 700 12px/1 inherit; text-transform: uppercase;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #9a9a9a; color: #fff;
}
.tr-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-body > b { font-size: 13px; line-height: 1.2; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tr-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.tr-steps { font-size: 12px; color: var(--mute, #999); display: flex; gap: 3px; align-items: center; }
.tr-steps i { font-style: normal; }
.tr-steps i.on { color: var(--ink, #222); font-weight: 700; }
.tr-steps b { font-weight: 400; opacity: .5; }
.tr-count { font-weight: 700; font-size: 15px; }
.tr-count small { font-weight: 400; font-size: 12px; color: var(--mute, #999); }
.tr-off { opacity: .62; box-shadow: none; }
.tr-bronze .tr-hex { background: linear-gradient(135deg, #c98a52, #8a5428); }
.tr-silver .tr-hex { background: linear-gradient(135deg, #e3e7ec, #8e98a5); color: #222; }
.tr-gold .tr-hex   { background: linear-gradient(135deg, #f6dc8a, #c8902c); color: #2a1c05; }
.tr-bronze { border-left: 3px solid #b0743f; }
.tr-silver { border-left: 3px solid #a3adb9; }
.tr-gold   { border-left: 3px solid #d9a63c; box-shadow: 0 0 14px rgba(217,166,60,.3); }
.tr-set .tr-body > b::after { content: 'Set'; font-size: 12px; font-weight: 700; color: #b0743f; letter-spacing: .05em; }
/* Schmale Bildschirme: keine Seitenleiste, dort gibt es die Chips unter der Crew */
@media (max-width: 1279px) { .traits { display: none !important; } }


/* ---------- Seekarte (wie bei Pokelike) ---------- */
.sea-chart {
  position: relative; margin: 12px 0 4px; border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.08), transparent 60%),
    repeating-linear-gradient(170deg, rgba(255,255,255,.025) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #1d3a55, var(--sea-a) 55%, var(--sea-b));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(10,20,35,.18);
}
.sea-chart.isl-paradies { background-color: #12303a; }
.sc-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-lines line { stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sc-lines .off    { stroke: rgba(255,255,255,.08); stroke-dasharray: 2 6; }
.sc-lines .future { stroke: rgba(255,255,255,.22); stroke-dasharray: 3 6; }
.sc-lines .can    { stroke: #f3d27a; stroke-dasharray: 5 6; animation: sc-flow 1.2s linear infinite; }
.sc-lines .done   { stroke: #d9a63c; stroke-width: 4; }
@keyframes sc-flow { to { stroke-dashoffset: -22; } }
.sc-start {
  position: absolute; transform: translate(-50%, -50%); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}
.map-node {
  position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.25);
  background: #22384d; color: #fff; font: inherit;
}
.map-node .mn-icon { width: 26px; height: 26px; display: grid; place-items: center; }
.map-node .mn-icon svg { width: 100%; height: 100%; }
.map-node.boss { width: 66px; height: 66px; border-color: #c0453a; background: #3a1f22; }
.map-node.boss .mn-icon { width: 46px; height: 46px; }
.map-node.future { opacity: .85; background: #2a4258; border-color: rgba(255,255,255,.35); }
.map-node.future .mn-icon { opacity: .85; }
.map-node.gone { opacity: .2; filter: grayscale(1); }
.map-node.done { border-color: #d9a63c; background: #4a3a1c; opacity: .9; }
.map-node.can {
  cursor: pointer; border-color: #f3d27a; background: #2c4a66;
  box-shadow: 0 0 0 4px rgba(243,210,122,.18), 0 6px 18px rgba(0,0,0,.35);
  animation: mn-pulse 1.8s ease-in-out infinite; transition: transform .15s;
}
.map-node.can:hover, .map-node.can:focus-visible { transform: translate(-50%, -50%) scale(1.12); outline: none; animation: none;
  box-shadow: 0 0 0 5px rgba(243,210,122,.35), 0 8px 22px rgba(0,0,0,.4); }
.map-node.can.n-elite, .map-node.can.n-raid { border-color: #e0705f; }
.map-node.can.n-raid { background: #4a2350; }
@keyframes mn-pulse { 50% { box-shadow: 0 0 0 8px rgba(243,210,122,.06), 0 6px 18px rgba(0,0,0,.35); } }
.map-node .key, :root:not([data-theme="dark"]) .map-node .key {
  position: absolute; top: -7px; left: -7px; right: auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; line-height: 1;
  background: #f3d27a; color: #1c1408; border: none; box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.map-node .tip-badge { position: absolute; top: -12px; right: -18px; }
.map-node.is-tip { border-color: #f3d27a; box-shadow: 0 0 0 4px #d9a63c, 0 0 22px rgba(217,166,60,.5); }
.mn-label {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: max-content; max-width: 104px; text-align: center; pointer-events: none;
}
.mn-label b { font-size: 12px; line-height: 1.15; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.map-node.boss .mn-label { top: auto; bottom: calc(100% + 4px); }
.mn-label .danger { font-size: 12px; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 999px; }
.sc-ship {
  position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%) translate(26px, 10px);
  pointer-events: none; animation: sc-bob 2.4s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.sc-ship svg { width: 100%; height: 100%; }
@keyframes sc-bob { 50% { transform: translate(-50%, -50%) translate(26px, 6px) rotate(-4deg); } }
@media (max-width: 520px) {
  .map-node { width: 40px; height: 40px; }
  .map-node .mn-icon { width: 22px; height: 22px; }
  .mn-label { max-width: 80px; }
  .mn-label b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .map-node.can, .sc-ship, .sc-lines .can { animation: none; } }


/* ---------- Lesbarkeit ---------- */
.card-name { color: #f6ecd8; text-shadow: 0 1px 2px rgba(0,0,0,.6); letter-spacing: .01em; }
.card-face .card-type, .card-face .card-trait { color: #c9c2b5; }
.card-text { font-size: .8rem; line-height: 1.35; color: #ece6dc; }
.card-text .gain { font-size: .78rem; }
.hint { line-height: 1.5; }
h2 { letter-spacing: .015em; }
.danger { font-size: .76rem; }


/* ---------- Kopf-Chips (Gold, Kopfgeld, Stufe, Duell): klar lesbar statt kleiner grauer Text ---------- */
.track-loc { color: var(--mute); }
.head-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: 8px; vertical-align: 2px; }
.head-chips em { font-style: normal; }
.gold-chip, .bounty-chip, .heat-chip, .duel-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: .95rem; font-weight: 700; white-space: nowrap; border: 2px solid var(--line);
  background: var(--panel); transition: transform .2s;
}
.gold-chip svg, .bounty-chip svg { width: 16px; height: 16px; }
.gold-chip { color: #8a5a00; background: #fff6dc; border-color: #f2d27a; }
.gold-chip b, .bounty-chip b, .heat-chip b { font-weight: 800; }
.bounty-chip { color: #8a2c22; background: #ffe6e0; border-color: #e6a393; }
:root[data-theme="dark"] .gold-chip { color: #f2d27a; background: color-mix(in srgb, #f2d27a 14%, var(--panel)); border-color: color-mix(in srgb, #f2d27a 40%, var(--line)); }
:root[data-theme="dark"] .bounty-chip { color: #e6a393; background: color-mix(in srgb, #e6a393 14%, var(--panel)); border-color: color-mix(in srgb, #e6a393 40%, var(--line)); }
.bounty-chip.bump { animation: chip-bump .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes chip-bump { 40% { transform: scale(1.35); color: #d9a63c; } }
.bounty-pop {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  perspective: 900px; background: radial-gradient(circle at 50% 45%, rgba(10,12,18,.35), rgba(10,12,18,.65));
  animation: bp-fade .35s ease both; cursor: pointer;
}
.bounty-pop.fly { background: transparent; transition: background .4s; }
@keyframes bp-fade { from { opacity: 0; } }
.bp-poster {
  position: relative; width: 230px; padding: 16px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #3b2a17; text-align: center; overflow: hidden; border-radius: 4px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(120,80,30,.25), transparent 45%),
    linear-gradient(160deg, #f1dfb4, #dcc08a);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 6px rgba(110,75,35,.18), inset 0 0 40px rgba(110,75,35,.35);
  transform-style: preserve-3d;
  animation: bp-in 1s cubic-bezier(.18,.9,.25,1.15) both, bp-float 3s ease-in-out 1s infinite;
}
@keyframes bp-in {
  0%   { transform: translate3d(0, -60vh, -600px) rotateX(70deg) rotateY(-35deg) rotateZ(-20deg); opacity: 0; }
  60%  { transform: translate3d(0, 10px, 40px) rotateX(-12deg) rotateY(10deg) rotateZ(3deg); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(-2deg); }
}
@keyframes bp-float { 50% { transform: rotateX(6deg) rotateY(-8deg) rotateZ(1deg) translateY(-6px); } }
.bounty-pop.fly .bp-poster {
  animation: none; transition: transform .6s cubic-bezier(.5,0,.8,.4), opacity .6s;
  transform: translate(var(--fx, 0), var(--fy, -40vh)) scale(.08) rotateZ(-25deg) rotateY(180deg); opacity: .2;
}
.bp-wanted { font-family: "Pirata One", Georgia, serif; font-size: 2.15rem; line-height: .9; letter-spacing: .06em; transform: translateZ(30px); }
.bp-sub { font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; opacity: .75; }
.bp-art {
  width: 150px; height: 120px; margin: 8px 0 6px; display: grid; place-items: center;
  background: #e9d6a8; border: 3px solid #6b4f2a; box-shadow: inset 0 0 18px rgba(80,50,20,.35); transform: translateZ(20px);
}
.bp-art svg { width: 84px; height: 84px; image-rendering: pixelated; }
.bp-name { font-family: "Pirata One", Georgia, serif; font-size: 1.7rem; line-height: 1; transform: translateZ(25px); }
.bp-amount { font-size: 1.35rem; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; transform: translateZ(35px); }
.bp-amount b { font-size: 1.7rem; }
.bp-up {
  position: absolute; bottom: 58px; right: -4px; transform: rotate(-10deg) translateZ(50px);
  background: #c0453a; color: #fff; font-weight: 800; font-size: .85rem; padding: 4px 12px; border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35); animation: bp-stamp .45s cubic-bezier(.2,1.8,.4,1) 1.1s both;
}
@keyframes bp-stamp { from { transform: rotate(-10deg) scale(2.4); opacity: 0; } }
.bp-shine {
  position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  animation: bp-shine 1.4s ease .9s both;
}
@keyframes bp-shine { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) { .bp-poster, .bp-up, .bp-shine { animation: none !important; } }

/* ---------- Zustände im Kampf ---------- */
.f-status {
  position: absolute; top: -9px; left: 8px; right: 8px; display: flex; gap: 3px; flex-wrap: wrap; z-index: 4; pointer-events: auto;
}
.side-enemy .f-status { justify-content: flex-end; }
.st-chip {
  font-size: .72rem; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 999px; color: #fff;
  background: #7a3a8a; box-shadow: 0 1px 3px rgba(0,0,0,.35); animation: st-pop .3s cubic-bezier(.2,1.6,.4,1);
}
.st-chip small { font-size: .68rem; opacity: .85; }
.st-fear { background: #5a3a8a; }
.st-stun { background: #b08a1a; color: #1c1408; }
.st-bleed, .st-burning { background: #b3362d; }
.st-poison { background: #4a8a2a; }
.st-weak { background: #6a6a6a; }
.st-chip.good { background: #2f8a4a; }
@keyframes st-pop { from { transform: scale(1.8); opacity: 0; } }
.fighter.debuffed { animation: debuffed .5s ease-out; }
@keyframes debuffed { 30% { box-shadow: 0 0 0 3px #8a5ac8, 0 0 18px rgba(138,90,200,.6); } }
.float.tag.debuff { color: #d8b8ff; }
.float.tag.buff { color: #9dffb4; }
.fighter.mini-boss { border-color: #d9a63c; }
.fighter.mini-boss .f-sprite svg { width: 48px; height: 56px; }

/* Fähigkeits-Schilder: Fläche, Einzelziel, Zustand */
.ab-tag {
  display: inline-block; font-style: normal; font-size: .72rem; font-weight: 800; line-height: 1;
  padding: 3px 6px; border-radius: 4px; vertical-align: 1px; margin-right: 2px;
  background: #2f5f8f; color: #fff;
}
.ab-tag.single { background: #6b4f3a; }
.ab-tag.st { background: #6a3a8a; }
.ab-tag.st.good { background: #2f8a4a; }
.hint.counter b.ok { color: var(--hp); }
.hint.counter b.no { color: var(--red); }

/* ---------- Spezialangriff ---------- */
.charge-wrap { font-size: .85rem; color: var(--mute); display: inline-flex; align-items: center; gap: 6px; }
.charge { display: inline-flex; gap: 3px; vertical-align: middle; }
.charge i {
  width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; display: inline-block;
  background: color-mix(in srgb, var(--mute) 30%, transparent); border: 1px solid color-mix(in srgb, var(--mute) 50%, transparent);
}
.charge i.on { background: linear-gradient(135deg, #f6dc8a, #d9a63c); border-color: #b0801c; }
.charge.full i.on { box-shadow: 0 0 8px rgba(217,166,60,.8); animation: charge-glow 1.6s ease-in-out infinite; }
@keyframes charge-glow { 50% { box-shadow: 0 0 2px rgba(217,166,60,.4); } }
.special-box {
  margin: 12px 0; padding: 12px 14px; border-radius: 12px; display: grid; gap: 6px;
  border: 1px dashed var(--line); background: color-mix(in srgb, var(--panel) 80%, transparent);
}
.special-box .sp-name { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.special-box .sp-name svg { width: 30px; height: 34px; }
.special-box.ready { border: 2px solid #d9a63c; background: linear-gradient(135deg, rgba(246,220,138,.18), transparent 60%), var(--panel); }
.special-box.ready.on { box-shadow: 0 0 0 3px rgba(217,166,60,.35), 0 8px 26px rgba(217,166,60,.25); }
.special-box .muted { font-size: .9rem; color: var(--mute); }
.sp-btn { justify-self: start; }

.special-pop {
  position: fixed; inset: 0; z-index: 950; pointer-events: none; display: grid; place-items: center; perspective: 900px;
  animation: bp-fade .2s ease both;
}
.special-pop.out { opacity: 0; transition: opacity .45s; }
.sp-bars { position: absolute; inset: 0; background:
  linear-gradient(#000 0 0) top / 100% 12vh no-repeat, linear-gradient(#000 0 0) bottom / 100% 12vh no-repeat,
  radial-gradient(circle at 50% 50%, rgba(255,210,120,.35), rgba(0,0,0,.55) 70%);
  animation: sp-bars .35s ease-out both; }
@keyframes sp-bars { from { background-size: 100% 0, 100% 0, auto; } }
.sp-card {
  position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 28px 18px 18px;
  background: linear-gradient(100deg, #1b2533 0%, #2c3e55 60%, #d9a63c 160%); color: #fff;
  border-radius: 14px; border: 2px solid #f3d27a; box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 60px rgba(243,210,122,.35);
  transform-style: preserve-3d; animation: sp-in .55s cubic-bezier(.15,.9,.25,1.2) both;
}
@keyframes sp-in {
  0% { transform: translate3d(-70vw, 0, -300px) rotateY(55deg) skewX(-12deg); opacity: 0; }
  70% { transform: translate3d(12px, 0, 40px) rotateY(-8deg) skewX(-4deg); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) rotateY(0) skewX(-6deg); }
}
.sp-art { width: 86px; height: 96px; display: grid; place-items: center; transform: translateZ(40px); }
.sp-art svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.sp-text { display: grid; transform: translateZ(60px); }
.sp-text small { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #f3d27a; }
.sp-text b { font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.sp-text em { font-style: normal; color: #c9d3de; }
@media (prefers-reduced-motion: reduce) { .sp-card, .sp-bars { animation: none !important; } }

/* Kopfgeld-Ziele auf der Seekarte */
.map-node.hunted { border-color: #d9a63c; background: #3d2f17; }
.map-node.hunted .mn-icon { width: 30px; height: 34px; }
.mn-bounty { font-style: normal; font-size: .72rem; font-weight: 800; color: #f3d27a; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.bp-src { font-size: .85rem; font-weight: 700; opacity: .8; transform: translateZ(25px); }

/* ---------- Piratenrang 2.0: Medaille, Belohnungsstraße ---------- */
.medal {
  --m1: #e0a46a; --m2: #9a5a2a; --m3: #6a3a18;
  position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; flex: none;
  transform-style: preserve-3d; perspective: 400px;
}
.medal.m-silver { --m1: #f1f4f7; --m2: #9aa5b2; --m3: #5a6470; }
.medal.m-gold   { --m1: #fbe7a0; --m2: #d9a63c; --m3: #8a5a10; }
.medal.m-legend { --m1: #f0c8ff; --m2: #8a4fd0; --m3: #3a1a6a; }
.medal-face {
  width: 100%; height: 100%; display: grid; place-items: center;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: radial-gradient(circle at 35% 28%, var(--m1), var(--m2) 55%, var(--m3));
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.25);
  animation: medal-turn 6s ease-in-out infinite;
}
.medal-num { font-family: "Pirata One", Georgia, serif; font-size: 1.9rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.medal-shine {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.medal-shine::after {
  content: ''; position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.75) 50%, transparent 58%);
  animation: medal-shine 3.2s ease-in-out infinite;
}
@keyframes medal-turn { 0%, 100% { transform: rotateY(-14deg); } 50% { transform: rotateY(14deg); } }
@keyframes medal-shine { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
.medal.big { width: 84px; height: 84px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.25)); }
.medal.big .medal-num { font-size: 2.5rem; }
.medal.small { width: 34px; height: 34px; }
.medal.small .medal-num { font-size: 1.05rem; }
.medal.small .medal-face { animation: none; }
.medal.flip .medal-face { animation: medal-flip 1.1s cubic-bezier(.2,.9,.3,1.2) both, medal-turn 6s ease-in-out 1.1s infinite; }
@keyframes medal-flip { from { transform: rotateY(-540deg) scale(.3); } }

/* Pixel-Embleme pro Rangstufe (ersetzen die alte Medaille) */
.medal.emb { display: inline-grid; place-items: center; }
.medal.emb .emb-svg { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.18));
  animation: emb-bob 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes emb-bob { 0%, 100% { transform: rotateY(-12deg) translateY(0); } 50% { transform: rotateY(12deg) translateY(-1px); } }
.medal.emb .emb-pips { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); display: flex; gap: 2px; }
.medal.emb .emb-pips i { width: 6px; height: 6px; background: rgba(0,0,0,.15); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.medal.emb .emb-pips i.on { background: #f2b632; }
.medal.emb.m-silver .emb-pips i.on { background: #9aa5b2; }
.medal.emb.m-bronze .emb-pips i.on { background: #cf8446; }
.medal.emb.m-legend .emb-pips i.on { background: #8a4fd0; }
.medal.emb.m-mythic .emb-pips i.on { background: #d0303a; }
.medal.emb .emb-num { position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center;
  font-family: var(--px); font-weight: 700; font-size: .72rem; color: #fff; background: var(--btn); border: 2px solid var(--panel); }
.medal.emb.small .emb-num { min-width: 14px; height: 14px; font-size: .56rem; right: -5px; top: -5px; border-width: 1px; padding: 0 2px; }
.medal.emb.small .emb-pips { display: none; }
.medal.emb.small .emb-svg { animation: none; }
.medal.emb.big .emb-pips i { width: 8px; height: 8px; }
.medal.emb.tiny { width: 22px; height: 22px; }
.medal.emb.tiny .emb-pips, .medal.emb.tiny .emb-num { display: none; }
.medal.emb.tiny .emb-svg { animation: none; }
.medal.emb.m-mythic .emb-svg { filter: drop-shadow(0 0 4px rgba(242,201,76,.8)) drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.medal.emb.m-legend .emb-svg { filter: drop-shadow(0 0 3px rgba(138,79,208,.6)) drop-shadow(0 2px 0 rgba(0,0,0,.2)); }

.rank-v2 { display: grid; gap: 12px; grid-template-columns: 1fr; padding: 16px; position: relative; overflow: hidden; }
.rank-v2::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 45%);
}
.rank-v2.t-legend::before { background: radial-gradient(circle at 8% 20%, rgba(138,79,208,.28), transparent 50%); }
.rank-top { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; position: relative; }
.rank-v2 .rank-name { font-size: 1.9rem; }
.rank-v2 .rank-bar { position: relative; height: 18px; border-radius: 9px; overflow: hidden; }
.rank-v2 .rank-bar i { border-radius: 9px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.rank-bar-txt { position: absolute; inset: 0; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--ink); mix-blend-mode: normal; }

/* ---------- Stammcrew + Duell ---------- */
.squad-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.squad-head > div { display: grid; gap: 2px; }
.squad-power { font-family: var(--px); font-size: 1.5rem; }
.squad-head small { color: var(--mute); }
.sq-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.sq-u { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 6px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.sq-u.role-bg-brecher { border-bottom: 3px solid #4f86c6; }
.sq-u.role-bg-kaempfer { border-bottom: 3px solid #d0564a; }
.sq-u.role-bg-helfer { border-bottom: 3px solid #5bb36c; }
.sq-u > i svg { width: 34px; height: 40px; shape-rendering: crispEdges; }
.sq-u .lvtag { position: absolute; top: 3px; left: 4px; font-size: .62rem; }
.sq-u .role-ico { position: absolute; top: 2px; right: 4px; font-size: .7rem; margin: 0; }
.sq-u .sq-name { font-size: .72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-u .bar { width: 100%; height: 5px; margin: 0; }
.sq-u.ko { opacity: .45; filter: grayscale(.8); }
.sq-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 8px; }
.sq-pick { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px;
  border-radius: 12px; border: 2px solid var(--line); background: var(--panel); text-align: center; }
.sq-pick:hover { border-color: var(--gold); }
.sq-pick.on { border-color: var(--btn); background: color-mix(in srgb, var(--gold) 10%, var(--panel)); }
.sq-pick i svg { width: 30px; height: 35px; shape-rendering: crispEdges; }
.sq-pick small { font-size: .72rem; font-weight: 700; }
.sq-pick .type { font-size: .62rem; }
.sq-num { position: absolute; top: -8px; left: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--btn); color: var(--btnink); font-style: normal; font-weight: 800; font-size: .8rem; }
.pcard-sec .sq-row { margin-top: 4px; }
.pcard-duel { width: 100%; text-align: center; margin-top: 10px; }
.duel-res { display: grid; gap: 8px; text-align: center; }
.duel-verdict { font-family: var(--px); font-size: 2.2rem; line-height: 1; margin-top: 6px; }
.duel-res.won .duel-verdict { color: var(--hp); }
.duel-res.lost .duel-verdict { color: var(--red); }
.duel-res > small { color: var(--mute); }
.duel-teams { display: grid; gap: 10px; text-align: left; }
.duel-mvp { margin: 0; font-size: .9rem; }
.duel-log { text-align: left; margin: 0; padding: 8px 12px 8px 26px; border-radius: 10px; background: var(--panel-2); font-size: .82rem; display: grid; gap: 3px; }
.duel-log li.us { color: #2f7a45; }
.duel-log li.them { color: #a33a30; }
.duel-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.duel-actions .btn { margin-top: 0; }

/* ---------- Ulti: Energieleiste, Aufladung, Einblendung ---------- */
.f-en { position: relative; height: 4px; border-radius: 2px; background: rgba(0,0,0,.12); overflow: hidden; margin: 2px 0 1px; }
.f-en i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f2b632, #ffe27a); transition: width .3s ease; }
.fighter.charged .f-en i { background: linear-gradient(90deg, #ffcf3a, #fff2b0, #ffcf3a); background-size: 200% 100%; animation: en-shine 1s linear infinite; }
.fighter.charged { box-shadow: 0 0 0 2px #f2b632, 0 0 14px rgba(242,182,50,.55) !important; }
@keyframes en-shine { to { background-position: -200% 0; } }
.fu.charged .fu-body { filter: drop-shadow(0 0 6px #ffd24a) drop-shadow(0 0 2px #fff3b0); }
.ult-call { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); z-index: 30; pointer-events: none;
  display: grid; justify-items: center; padding: 6px 18px 8px; border-radius: 14px; white-space: nowrap;
  background: linear-gradient(180deg, #ffe27a, #f2b632); color: #3a2400; border: 2px solid #fff3c4;
  box-shadow: 0 6px 20px rgba(242,182,50,.55); animation: ult-in .35s cubic-bezier(.2,.9,.3,1.3); }
.ult-call.them { background: linear-gradient(180deg, #ff9a8a, #d0564a); color: #fff; border-color: #ffd0c8; box-shadow: 0 6px 20px rgba(208,86,74,.5); }
.ult-call small { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.ult-call b { font-family: var(--px); font-size: 1.25rem; line-height: 1.1; }
@keyframes ult-in { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
.ult-glow { animation: ult-glow .7s ease-out; }
@keyframes ult-glow { 0% { filter: brightness(1); } 30% { filter: brightness(1.8) saturate(1.4); transform: scale(1.06); } 100% { filter: brightness(1); } }
.card-ult { display: block; margin-top: 4px; font-size: .78rem; color: #8a5a00; }
.card-ult b { color: #6b4400; }
.ulti-line b { color: #a86a00; }

/* ---------- Kapitänswahl: Filter + eingeklappte gesperrte ---------- */
.cap-filter { margin: 4px 0 26px; }
.locked-wrap { margin-top: 16px; }
.locked-wrap > summary { cursor: pointer; font-weight: 800; color: var(--mute); padding: 8px 2px; list-style: none; }
.locked-wrap > summary::before { content: '▸ '; }
.locked-wrap[open] > summary::before { content: '▾ '; }
.locked-wrap > summary small { font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }

/* ---------- Gimmick: wer ist gerade (ungefähr) auf See ---------- */
.atsea { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: #2f7a45; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--hp) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--hp) 35%, var(--line)); }
.atsea-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hp); flex: none; animation: atsea-pulse 1.6s ease-in-out infinite; }
@keyframes atsea-pulse { 50% { opacity: .3; transform: scale(.8); } }

/* ---------- Kapitel-Fortschritt ---------- */
.chapter-panel { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 10px; }
.chapter-row { display: grid; gap: 4px; }
.chapter-name { font-weight: 700; font-size: .9rem; }
.chapter-row.done .chapter-name { color: var(--hp); }
.chapter-bar { position: relative; height: 16px; border-radius: 8px; overflow: hidden; }
.rank-perk {
  display: grid; place-items: center; text-align: center; padding: 8px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
}
.rank-perk b { font-size: 1.4rem; color: var(--gold); line-height: 1; }
.rank-perk small { font-size: .76rem; color: var(--mute); line-height: 1.25; }
.rank-road {
  display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; position: relative;
  scrollbar-width: thin;
}
.road-step {
  flex: 0 0 104px; scroll-snap-align: center; display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 10px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); position: relative;
}
.road-step b { font-size: .8rem; line-height: 1.15; }
.road-step small { font-size: .76rem; color: var(--mute); line-height: 1.3; }
.road-step small svg { width: 14px; height: 14px; vertical-align: -2px; }
.road-step.done { opacity: .6; }
.road-step.done::after { content: '✓'; position: absolute; top: 4px; right: 7px; font-weight: 800; color: var(--hp); }
.road-step.now { border: 2px solid var(--gold); box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 35%, transparent); opacity: 1; }
.road-step.next { border-style: dashed; border-color: var(--gold); }
.road-step.locked { opacity: .5; filter: grayscale(.7); }
.road-step.has-gear:not(.done) small { color: var(--ink); font-weight: 700; }
.rank-src { margin: 0; font-size: .85rem; color: var(--mute); }
@media (max-width: 520px) {
  .rank-top { grid-template-columns: auto 1fr; }
  .rank-perk { grid-column: 1 / -1; grid-auto-flow: column; gap: 10px; justify-content: start; }
  .rank-perk small br { display: none; }
  .medal.big { width: 66px; height: 66px; }
  .medal.big .medal-num { font-size: 2rem; }
}
.rank-gain { grid-template-columns: auto 1fr auto; align-items: center; }
.rank-gain .rank-bar { grid-column: 1 / -1; }
.rank-bar.fill-anim i { animation: rank-fill 1.6s cubic-bezier(.3,.8,.3,1) .4s both; }
@keyframes rank-fill { from { width: var(--from); } to { width: var(--to); } }
.rank-up { grid-template-columns: auto 1fr; column-gap: 14px; }
.rank-up .medal { grid-row: span 3; }
@media (prefers-reduced-motion: reduce) { .medal-face, .medal-shine::after, .rank-bar.fill-anim i { animation: none !important; } }

/* ---------- Schatzkammer (Artefakte) ---------- */
.vault-head { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.vault-head .hint { margin: 0; }
.vault-slots {
  display: grid; justify-items: center; padding: 8px 14px; border-radius: 12px; text-align: center;
  background: color-mix(in srgb, var(--epic) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--epic) 45%, var(--line));
}
.vault-slots b { font-size: 1.4rem; color: var(--epic); line-height: 1.1; }
.vault-slots small { font-size: .76rem; color: var(--mute); line-height: 1.25; }
.lbl small { color: var(--mute); font-size: .8rem; margin-left: 6px; }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.art-card {
  position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 12px 12px; border-radius: 14px;
  background: linear-gradient(160deg, #2a1d40, #17121f); color: #f1eaff;
  border: 2px solid #7a4fc4; box-shadow: 0 6px 18px rgba(60,30,110,.25);
  transition: transform .2s, box-shadow .2s; transform-style: preserve-3d;
}
.art-card:hover { transform: translateY(-3px) rotateX(4deg); box-shadow: 0 12px 26px rgba(60,30,110,.35); }
.art-card.on { border-color: #f3d27a; box-shadow: 0 0 0 3px rgba(243,210,122,.35), 0 8px 24px rgba(122,79,196,.45); }
.art-card.on::after { content: 'Ausgerüstet'; position: absolute; top: -10px; right: 10px; font-size: .72rem; font-weight: 800;
  padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #f6dc8a, #d9a63c); color: #1c1408; }
.art-card.lv5 { border-color: #e2b44a; background: linear-gradient(160deg, #3a2a10, #1a1408); }
.art-card b { font-size: 1.02rem; line-height: 1.2; }
.art-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 1.4rem; font-weight: 800;
  background: radial-gradient(circle at 40% 35%, rgba(179,136,240,.55), rgba(40,20,70,.6)); }
.art-icon svg { width: 34px; height: 34px; }
.art-lv { position: absolute; top: 14px; right: 12px; display: flex; gap: 3px; }
.art-lv i { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: rgba(255,255,255,.15); }
.art-lv i.on { background: linear-gradient(135deg, #e6c8ff, #a070f0); box-shadow: 0 0 6px rgba(179,136,240,.8); }
.art-card.lv5 .art-lv i.on { background: linear-gradient(135deg, #f6dc8a, #d9a63c); box-shadow: 0 0 6px rgba(217,166,60,.8); }
.art-eff { font-weight: 700; color: #fff; font-size: .92rem; }
.art-card .muted { color: #c8bde0; font-size: .8rem; }
.art-src { color: #a99cc4; font-size: .76rem; }
.art-card .btn { justify-self: start; margin-top: 4px; }
.art-card.locked { background: repeating-linear-gradient(135deg, #1e1a26 0 10px, #221d2b 10px 20px); border-style: dashed; border-color: #4a3d63; color: #9c92b0; }
.art-card.locked .art-icon { background: rgba(255,255,255,.06); color: #6d6385; }
.art-card.locked:hover { transform: none; }
.art-card.fruit.have { border-color: #b388f0; }
.art-card .btn.ghost { color: #f1eaff; border-color: rgba(241,234,255,.55); background: rgba(255,255,255,.06); box-shadow: none; }
.art-card .btn.ghost:hover:not([disabled]) { background: rgba(255,255,255,.14); }
.art-card .btn[disabled] { color: #a99cc4; opacity: .8; }
.art-icon svg, .tp-icon svg, .trophy-chip svg { shape-rendering: crispEdges; }
.art-icon svg { width: 32px; height: 38px; }
.tp-icon svg { width: 58px; height: 68px; }
@media (max-width: 520px) { .vault-head { grid-template-columns: 1fr; } .art-grid { grid-template-columns: 1fr 1fr; } }

/* Fund im Run */
.trophy-pop {
  position: fixed; inset: 0; z-index: 960; display: grid; place-items: center; perspective: 900px; cursor: pointer;
  background: radial-gradient(circle at 50% 45%, rgba(60,30,110,.45), rgba(8,6,14,.72)); animation: bp-fade .3s ease both;
}
.trophy-pop.out { opacity: 0; transition: opacity .55s; }
.tp-card {
  position: relative; width: min(300px, 86vw); padding: 22px 20px 18px; display: grid; justify-items: center; gap: 6px; text-align: center;
  border-radius: 18px; color: #f4ecff; overflow: hidden; transform-style: preserve-3d;
  background: linear-gradient(160deg, #3a2560, #150f22); border: 2px solid #b388f0;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 60px rgba(179,136,240,.45);
  animation: tp-in 1s cubic-bezier(.18,.9,.25,1.15) both;
}
@keyframes tp-in {
  0% { transform: rotateY(-200deg) rotateX(25deg) scale(.3); opacity: 0; }
  60% { transform: rotateY(15deg) rotateX(-6deg) scale(1.05); opacity: 1; }
  100% { transform: rotateY(0) scale(1); }
}
.tp-rays { position: absolute; inset: -60%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(179,136,240,.18) 0 10deg, transparent 10deg 20deg);
  animation: tp-spin 8s linear infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
.tp-kicker { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #e6c8ff; }
.tp-icon { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 20px; transform: translateZ(40px);
  background: radial-gradient(circle at 40% 35%, rgba(230,200,255,.6), rgba(60,30,110,.7)); box-shadow: 0 0 30px rgba(179,136,240,.6); }
.tp-icon svg { width: 62px; height: 62px; }
.tp-name { font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: 1.8rem; line-height: 1.05; transform: translateZ(30px); }
.tp-lv { font-weight: 800; color: #f3d27a; }
.tp-eff { font-weight: 700; }
.tp-card small { color: #b9aed2; font-size: .8rem; }
.trophy-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; padding: 10px 14px; border-radius: 10px;
  border: 2px solid #7a4fc4; background: color-mix(in srgb, var(--epic) 10%, var(--panel)); }
.trophy-sum .event-kicker { width: 100%; color: var(--epic); }
.trophy-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: #2a1d40; color: #f1eaff; }
.trophy-chip svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .tp-card, .tp-rays { animation: none !important; } }

/* ---------- Online-Rangliste ---------- */
.lb-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.lb-name label { font-weight: 700; width: 100%; }
.lb-name input {
  flex: 1; min-width: 180px; font: inherit; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.lb-own { margin: 0 0 10px; color: var(--mute); }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb-row {
  display: grid; grid-template-columns: 34px 40px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.lb-row.me { border: 2px solid var(--sea); }
.lb-row.top1 { border-color: #d9a63c; background: linear-gradient(90deg, rgba(246,220,138,.28), var(--panel) 55%); }
.lb-row.top2 { border-color: #a3adb9; background: linear-gradient(90deg, rgba(200,208,218,.3), var(--panel) 55%); }
.lb-row.top3 { border-color: #b0743f; background: linear-gradient(90deg, rgba(201,138,82,.22), var(--panel) 55%); }
.lb-pos { font-family: "Pirata One", Georgia, serif; font-size: 1.6rem; text-align: center; color: var(--mute); }
.lb-row.top1 .lb-pos { color: #b0801c; }
.lb-cap svg { width: 34px; height: 40px; shape-rendering: crispEdges; }
.lb-who { display: grid; min-width: 0; }
.lb-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-who em { font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; background: var(--sea); padding: 1px 6px; border-radius: 999px; vertical-align: 2px; }
.lb-who small, .lb-extra small, .lb-score small { color: var(--mute); font-size: .78rem; }
.lb-score { display: grid; text-align: right; }
.lb-score b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.lb-extra { display: grid; text-align: right; }
.lb-note { font-size: .82rem; margin-top: 10px; }
@media (max-width: 520px) {
  .lb-row { grid-template-columns: 28px 32px 1fr auto; }
  .lb-extra { display: none; }
}

/* ---------- 3D-Kampffeld (Pokémon-Stil) ---------- */
.battle3d { display: grid; gap: 8px; }
.field {
  position: relative; height: 300px; border-radius: 16px; overflow: hidden; isolation: isolate;
  perspective: 900px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #8ec5e8 0%, #cfe7f2 48%, #6aa7c9 49%, #2f6f99 100%);
}
.field.isl-paradies { background: linear-gradient(180deg, #f2b46a 0%, #f6d8a0 46%, #d9a66a 47%, #a8744a 100%); }
.field.isl-enies-lobby { background: linear-gradient(180deg, #0d1424 0%, #2a2440 46%, #1b2233 47%, #0c121c 100%); }
.field.raid { background: linear-gradient(180deg, #2a1440 0%, #4a2a6a 46%, #1c1030 47%, #0c0618 100%); }
.f-sky { position: absolute; inset: 0 0 52% 0; pointer-events: none;
  background: radial-gradient(ellipse 90px 20px at 20% 30%, rgba(255,255,255,.7), transparent 70%),
              radial-gradient(ellipse 130px 24px at 72% 18%, rgba(255,255,255,.6), transparent 70%); }
.field.isl-paradies .f-sky { background: radial-gradient(circle 46px at 80% 40%, rgba(255,240,190,.9), transparent 70%); }
.field.isl-enies-lobby .f-sky, .field.raid .f-sky {
  background: radial-gradient(circle 1.5px at 18% 20%, #fff 99%, transparent), radial-gradient(circle 1px at 40% 10%, #fff 99%, transparent),
    radial-gradient(circle 1.5px at 64% 26%, #fff 99%, transparent), radial-gradient(circle 1px at 86% 12%, #fff 99%, transparent),
    radial-gradient(circle 26px at 82% 30%, rgba(255,250,230,.85), transparent 70%); }
.f-floor {
  position: absolute; left: -30%; right: -30%; bottom: -40%; height: 110%;
  transform: rotateX(68deg); transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 2px, transparent 2px 60px),
    linear-gradient(180deg, #3f8fb8, #1f5a80);
  animation: floor-drift 14s linear infinite;
}
.field.isl-paradies .f-floor { background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 70px), linear-gradient(180deg, #d8a466, #9a6a3e); }
.field.isl-enies-lobby .f-floor { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 50px), repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 2px, transparent 2px 50px), linear-gradient(180deg, #3a3f4c, #1a1e26); animation: none; }
.field.raid .f-floor { background: repeating-linear-gradient(90deg, rgba(179,136,240,.15) 0 2px, transparent 2px 50px), linear-gradient(180deg, #3a2060, #140a24); }
@keyframes floor-drift { to { background-position: 60px 0, 0 60px, 0 0; } }
.plat { position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.45), rgba(255,255,255,.12) 60%, transparent 72%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset; }
.plat-crew { left: 4%; width: 48%; bottom: 2%; height: 26%; }
.plat-enemy { left: 56%; width: 40%; bottom: 44%; height: 18%; }
.field.isl-paradies .plat, .field.isl-enies-lobby .plat { background: radial-gradient(ellipse at 50% 40%, rgba(255,240,210,.35), rgba(0,0,0,.15) 65%, transparent 72%); }

.fu { position: absolute; transform: translateX(-50%) scale(var(--s, 1)); transform-origin: 50% 100%; width: 72px; display: grid; justify-items: center;
  transition: opacity .4s; }
.fu-body { position: relative; z-index: 2; }
.fu-body svg { width: 64px; height: 75px; shape-rendering: crispEdges; display: block; animation: fu-idle 1.6s ease-in-out infinite; }
.fu-enemy .fu-body svg { transform: scaleX(-1); animation-name: fu-idle-m; }
.fu.boss .fu-body svg { filter: drop-shadow(0 0 8px rgba(208,86,74,.7)); }
.fu.mini .fu-body svg { filter: drop-shadow(0 0 6px rgba(217,166,60,.7)); }
@keyframes fu-idle { 50% { transform: translateY(-3px); } }
@keyframes fu-idle-m { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-3px); } }
.fu-shadow { position: absolute; bottom: -6px; width: 60px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(2px); z-index: 1; }
.fu-bar { width: 52px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; margin-top: 4px; position: relative; z-index: 3;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.fu-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5bd16f, #2f8a4a); transition: width .3s ease; }
.fu-aura { position: absolute; bottom: -8px; width: 70px; height: 20px; border-radius: 50%; z-index: 1; opacity: 0; transition: opacity .3s; }
.fu[data-st="fear"] .fu-aura { opacity: 1; background: radial-gradient(ellipse, rgba(122,80,200,.8), transparent 70%); animation: aura 1s ease-in-out infinite; }
.fu[data-st="stun"] .fu-aura { opacity: 1; background: radial-gradient(ellipse, rgba(240,200,60,.8), transparent 70%); animation: aura 1s ease-in-out infinite; }
.fu[data-st="bleed"] .fu-aura, .fu[data-st="burning"] .fu-aura { opacity: 1; background: radial-gradient(ellipse, rgba(220,60,40,.8), transparent 70%); animation: aura 1s ease-in-out infinite; }
.fu[data-st="poison"] .fu-aura { opacity: 1; background: radial-gradient(ellipse, rgba(90,190,60,.8), transparent 70%); animation: aura 1s ease-in-out infinite; }
.fu[data-st="weak"] .fu-aura { opacity: 1; background: radial-gradient(ellipse, rgba(150,150,150,.8), transparent 70%); }
.fu[data-st="brave"] .fu-aura { opacity: 1; background: radial-gradient(ellipse, rgba(243,210,122,.9), transparent 70%); animation: aura 1.2s ease-in-out infinite; }
@keyframes aura { 50% { transform: scale(1.2); opacity: .6; } }
.fu.ko { opacity: .25; }
.fu.ko .fu-body svg { animation: none; transform: rotate(-80deg) translate(10px, 10px); filter: grayscale(1); transition: transform .4s; }
.fu-enemy.ko .fu-body svg { transform: scaleX(-1) rotate(-80deg) translate(10px, 10px); }
.fu.ko .fu-bar { opacity: 0; }

/* Bewegungen */
.fu.atk { animation: fu-atk .42s cubic-bezier(.3,.7,.3,1); z-index: 300 !important; }
@keyframes fu-atk {
  0% { transform: translateX(-50%) scale(var(--s)); }
  35% { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(calc(var(--s) * 1.12)); }
  100% { transform: translateX(-50%) scale(var(--s)); }
}
.fu.hurt { animation: fu-hurt .35s ease-out; }
.fu.hurt .fu-body svg, .fu.hurt-crit .fu-body svg { filter: brightness(3) saturate(0); transition: filter .15s; }
.fu.hurt-crit { animation: fu-hurt .5s ease-out; }
@keyframes fu-hurt { 25% { transform: translateX(calc(-50% + 8px)) scale(var(--s)) rotate(4deg); } 55% { transform: translateX(calc(-50% - 5px)) scale(var(--s)); } }
.fu.dodge { animation: fu-dodge .35s ease-out; }
@keyframes fu-dodge { 40% { transform: translateX(calc(-50% - 18px)) scale(var(--s)); opacity: .5; } }
.fu.rise { animation: fu-rise .8s ease-out; }
@keyframes fu-rise { from { transform: translate(-50%, 20px) scale(var(--s)); opacity: 0; } }
.field.zoom { animation: f-zoom .4s ease-out; }
@keyframes f-zoom { 30% { transform: scale(1.05) translate(2px, -2px); } 60% { transform: scale(1.03) translate(-3px, 2px); } }
.field.special { animation: f-special 1.4s ease-out; }
@keyframes f-special { 0% { filter: brightness(.4) saturate(1.6); } 40% { filter: brightness(1.8); } 100% { filter: none; } }

/* Effekte */
.f-fx { position: absolute; inset: 0; pointer-events: none; z-index: 400; }
.fx3 { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.fx-impact { width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #ffd34d 30%, rgba(255,140,40,.6) 52%, transparent 70%); animation: fx-pop .5s ease-out forwards; }
.fx-burst { width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 15%, #7ec8ff 35%, rgba(60,120,255,.5) 55%, transparent 70%); animation: fx-pop .55s ease-out forwards; }
@keyframes fx-pop { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.fx-slash { width: 90px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff, #b8f0ff, transparent);
  box-shadow: 0 0 12px #b8f0ff; animation: fx-slash .45s ease-out forwards; }
.fx-slash::after { content: ''; position: absolute; inset: 0; background: inherit; transform: rotate(90deg); box-shadow: inherit; animation: inherit; }
@keyframes fx-slash { 0% { transform: translate(-50%, -50%) rotate(-35deg) scaleX(0); opacity: 1; } 50% { transform: translate(-50%, -50%) rotate(-35deg) scaleX(1.2); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-35deg) scaleX(1.4); opacity: 0; } }
.fx-shot { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff, #7ec8ff 50%, rgba(60,120,255,0) 72%);
  box-shadow: 0 0 14px #7ec8ff; animation: fx-shot .2s linear forwards; }
@keyframes fx-shot { to { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))); } }
.fx-ring { width: 40px; height: 40px; border-radius: 50%; border: 4px solid #ffb36b; animation: fx-ring .6s ease-out forwards; }
.fx-ring.burn { border-color: #ff8a4d; }
@keyframes fx-ring { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }
.fx-dot { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(220,60,40,.9), transparent 70%); animation: fx-pop .6s ease-out forwards; }
.fx-beam { width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, #f3d27a 40%, rgba(217,166,60,.4) 60%, transparent 72%); animation: fx-pop .7s ease-out forwards; }
.fx-heal { width: 50px; height: 60px; background:
  radial-gradient(circle 3px at 20% 80%, #9dffb4 99%, transparent), radial-gradient(circle 3px at 60% 60%, #9dffb4 99%, transparent),
  radial-gradient(circle 2px at 80% 90%, #fff 99%, transparent), radial-gradient(circle 3px at 40% 40%, #9dffb4 99%, transparent);
  animation: fx-heal .9s ease-out forwards; }
@keyframes fx-heal { from { transform: translate(-50%, -30%); opacity: 1; } to { transform: translate(-50%, -110%); opacity: 0; } }
.fx-curse { width: 60px; height: 60px; border-radius: 50%; border: 3px dashed #b388f0; animation: fx-curse .8s ease-out forwards; }
@keyframes fx-curse { from { transform: translate(-50%, -50%) scale(1.6) rotate(0); opacity: 0; } 40% { opacity: 1; } to { transform: translate(-50%, -50%) scale(.6) rotate(180deg); opacity: 0; } }
.fx-stars { width: 50px; height: 20px; background: radial-gradient(circle 4px at 20% 50%, #ffd34d 99%, transparent), radial-gradient(circle 4px at 50% 30%, #fff 99%, transparent), radial-gradient(circle 4px at 80% 50%, #ffd34d 99%, transparent);
  animation: fx-stars .9s linear forwards; margin-top: -40px; }
@keyframes fx-stars { to { transform: translate(-50%, -50%) rotate(360deg); opacity: 0; } }
.fx-block { width: 60px; height: 60px; border-radius: 12px; border: 4px solid #cfe8ff; animation: fx-pop .5s ease-out forwards; }
.fx-ko { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(200,200,200,.3) 50%, transparent 70%); animation: fx-pop .8s ease-out forwards; }
.fx-flash { position: absolute; inset: 0; transform: none; width: 100%; height: 100%; left: 0 !important; top: 0 !important; background: rgba(255,255,255,.55); animation: fx-flash .3s ease-out forwards; }
@keyframes fx-flash { to { opacity: 0; } }
.fnum { font-weight: 900; font-size: 1.6rem; color: #fff; white-space: nowrap; z-index: 5;
  text-shadow: -2px 0 0 #1a1208, 2px 0 0 #1a1208, 0 -2px 0 #1a1208, 0 2px 0 #1a1208, 0 4px 8px rgba(0,0,0,.5);
  animation: fnum 1.1s cubic-bezier(.2,.8,.3,1) forwards; }
.fnum.crit { color: #ffd34d; font-size: 2.1rem; }
.fnum.strong { color: #ffb36b; }
.fnum.weak { color: #ddd; font-size: 1.2rem; }
.fnum.burn { color: #ff8a4d; font-size: 1.3rem; }
.fnum.heal, .fnum.buff { color: #9dffb4; font-size: 1.3rem; }
.fnum.debuff { color: #d8b8ff; font-size: 1.1rem; }
.fnum.miss { color: #cfe8ff; font-size: 1.1rem; }
@keyframes fnum {
  0% { transform: translate(-50%, -50%) scale(.4) rotateX(70deg); opacity: 0; }
  18% { transform: translate(-50%, -80%) scale(1.25) rotateX(0); opacity: 1; }
  100% { transform: translate(-50%, -190%) scale(1); opacity: 0; }
}
.f-round { position: absolute; top: 10px; left: 12px; z-index: 450; font-weight: 800; font-size: .85rem; color: #fff;
  background: rgba(0,0,0,.45); padding: 3px 10px; border-radius: 999px; }
.f-round:empty { display: none; }
.f-round.pop { animation: chip-bump .4s ease-out; }
.fast .fu.atk { animation-duration: .12s; }
.fast .fnum { animation-duration: .5s; }

/* Die Liste unter dem Feld wird zur kompakten Anzeige */
.battle3d .arena.hud { padding: 10px; gap: 8px; }
.battle3d .hud .f-sprite { display: none; }
.battle3d .hud .fighter, .battle3d .hud .side-enemy .fighter { grid-template-columns: 1fr; padding: 5px 9px; transform: none; }
.battle3d .hud .float:not(.tag) { display: none; }
.battle3d .hud .fighter.lunge { animation: none; }

@media (max-width: 520px) {
  .field { height: 230px; }
  .fu { width: 52px; }
  .fu-body svg { width: 44px; height: 52px; }
  .fu-bar { width: 38px; }
  .fu-shadow { width: 42px; }
  .fnum { font-size: 1.25rem; }
  .fnum.crit { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .f-floor, .fu-body svg, .fu.atk, .fu.hurt, .fu.hurt-crit, .field.zoom, .field.special, .fu-aura { animation: none !important; }
}

/* ---------- Rangliste: Kategorien, Duell ---------- */
.lb-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.lb-cat { font: inherit; font-size: .85rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.lb-cat.on { background: var(--btn); color: var(--btnink); border-color: var(--btn); }
.lb-cat small { opacity: .7; font-weight: 400; }
.duel-box { display: grid; gap: 10px; margin: 6px 0 16px; padding: 14px; border-radius: 14px;
  border: 2px solid var(--red); background: linear-gradient(135deg, color-mix(in srgb, var(--red) 10%, var(--panel)), var(--panel) 60%); }
.duel-head { display: grid; gap: 2px; }
.duel-head b { font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: 1.5rem; }
.duel-head small { color: var(--mute); }
.duel-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.duel-join { display: inline-flex; gap: 6px; flex: 1; min-width: 220px; }
.duel-join input { flex: 1; min-width: 0; font: inherit; text-transform: uppercase; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.duel-chip { font-style: normal; font-weight: 800; color: var(--red); white-space: nowrap; }
.duel-sum { display: grid; gap: 6px; margin: 8px 0; padding: 10px 14px; border-radius: 10px; border: 2px solid var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--panel)); }
.duel-sum .event-kicker { color: var(--red); }
.duel-sum .btn { justify-self: start; }
.hq-reset { margin-top: 18px; text-align: center; }
.danger-link { color: var(--red) !important; font-size: .85rem; }
.toasts, .toast { pointer-events: none; }
/* Kurze Einblendungen dürfen nie Klicks blockieren: alles darunter bleibt bedienbar */
.scene, .bounty-pop, .trophy-pop, .stop-banner { pointer-events: none !important; cursor: default; }
.scene { background: rgba(30, 20, 10, .38) !important; backdrop-filter: none !important; }
.bounty-pop { background: radial-gradient(circle at 50% 45%, rgba(10,12,18,.12), rgba(10,12,18,.3)) !important; }
.trophy-pop { background: radial-gradient(circle at 50% 45%, rgba(60,30,110,.18), rgba(8,6,14,.38)) !important; }
/* Handy: Hinweise oben als kompakte Pille statt großem Banner (wie iOS-Mitteilungen) */
@media (max-width: 560px) {
  .toasts { top: calc(8px + env(safe-area-inset-top)); bottom: auto; width: calc(100% - 20px); }
  .toast { padding: 8px 12px !important; border-radius: 14px !important; font-size: .85rem;
    box-shadow: 0 6px 20px rgba(40,25,10,.18) !important; backdrop-filter: blur(8px); }
  .toast.out { transform: translateY(-8px); }
  .stop-banner { top: calc(10px + env(safe-area-inset-top)); padding: 6px 16px; border-radius: 999px; }
  .stop-banner b { font-size: 1.2rem !important; }
  .stop-banner small { font-size: .62rem; }
  .scene-card h2 { font-size: 2.4rem !important; }
  .bp-poster, .tp-card { transform: scale(.82); }
}

/* Eigenes Profil in der Rangliste */
.my-card { display: grid; gap: 12px; margin: 4px 0 16px; padding: 14px; border-radius: 14px; border: 2px solid var(--sea);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sea) 12%, var(--panel)), var(--panel) 60%); box-shadow: var(--shadow); }
.my-top { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.my-top small { color: var(--mute); }
.my-top .ok { color: var(--hp); font-weight: 700; }
.my-name { display: block; font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: 1.8rem; line-height: 1.1; }
.my-cap svg { width: 56px; height: 66px; shape-rendering: crispEdges; animation: fu-idle 1.6s ease-in-out infinite; }
.my-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.my-stats div { display: grid; text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.my-stats b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.my-stats small { font-size: .74rem; color: var(--mute); line-height: 1.2; }
@media (max-width: 620px) { .my-stats { grid-template-columns: repeat(3, 1fr); } .my-top { grid-template-columns: auto 1fr; } .my-cap { display: none; } }

/* ---------- 3D-Kampffeld: mehr Tiefe ---------- */
.field { height: 330px; perspective: 1000px; background: #6aa7c9; }
.f-stage { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,.7,.3,1); }
.f-stage.cam-enemy { animation: cam-enemy .7s ease-out; }
.f-stage.cam-crew { animation: cam-crew .7s ease-out; }
@keyframes cam-enemy { 40% { transform: scale(1.05) translate(-2.5%, 1.5%) rotateY(-2deg); } }
@keyframes cam-crew { 40% { transform: scale(1.05) translate(2.5%, -1%) rotateY(2deg); } }
.f-sky { inset: 0 0 45% 0; background: linear-gradient(180deg, #5aa0d8 0%, #a6d2ef 70%, #d8eef7 100%); }
.field.isl-paradies .f-sky { background: linear-gradient(180deg, #e0884a 0%, #f2b46a 55%, #f8dca6 100%); }
.field.isl-enies-lobby .f-sky { background: linear-gradient(180deg, #070b16 0%, #1a1f3a 65%, #3a3050 100%); }
.field.raid .f-sky { background: linear-gradient(180deg, #12061f 0%, #3a1a5a 70%, #6a3a8a 100%); }
.f-sun { position: absolute; top: 12%; right: 14%; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0 40%, rgba(255,240,180,.6) 55%, transparent 72%); filter: blur(.5px); }
.field.isl-paradies .f-sun { top: 30%; width: 80px; height: 80px; background: radial-gradient(circle, #fff3c8 0 35%, rgba(255,190,90,.6) 55%, transparent 72%); }
.field.isl-enies-lobby .f-sun, .field.raid .f-sun { top: 10%; right: 20%; width: 40px; height: 40px; background: radial-gradient(circle, #f6f2e4 0 45%, rgba(240,235,210,.3) 60%, transparent 72%); }
.f-clouds { position: absolute; left: -20%; width: 140%; height: 20%; pointer-events: none; opacity: .8;
  background: radial-gradient(ellipse 70px 14px at 10% 50%, rgba(255,255,255,.85), transparent 70%),
              radial-gradient(ellipse 110px 18px at 38% 40%, rgba(255,255,255,.7), transparent 70%),
              radial-gradient(ellipse 80px 12px at 66% 60%, rgba(255,255,255,.8), transparent 70%),
              radial-gradient(ellipse 120px 16px at 92% 45%, rgba(255,255,255,.6), transparent 70%); }
.f-clouds.c1 { top: 8%; animation: clouds 60s linear infinite; }
.f-clouds.c2 { top: 22%; opacity: .5; transform: scale(.7); animation: clouds 95s linear infinite reverse; }
.field.isl-enies-lobby .f-clouds, .field.raid .f-clouds { opacity: .15; }
@keyframes clouds { to { translate: 14% 0; } }
.f-horizon { position: absolute; left: 0; right: 0; top: 37%; height: 16%; pointer-events: none; filter: saturate(.8); opacity: .9; }
.f-horizon svg { width: 100%; height: 100%; display: block; }
.f-floor { left: -40%; right: -40%; bottom: -55%; height: 120%; transform: rotateX(72deg); overflow: hidden;
  background: linear-gradient(180deg, #4a9ac4 0%, #2a6f9a 40%, #1a4f74 100%); animation: none; }
.f-waves { position: absolute; inset: 0; animation: waves 6s linear infinite;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 40px, rgba(255,255,255,.18) 40px 44px, rgba(255,255,255,0) 44px 90px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.0) 0 26px, rgba(255,255,255,.14) 26px 28px); }
@keyframes waves { to { background-position: 90px 0, 0 56px; } }
.field.isl-paradies .f-floor { background: linear-gradient(180deg, #e6b47a 0%, #c48a52 50%, #8a5a34 100%); }
.field.isl-paradies .f-waves { animation-duration: 20s; background: repeating-linear-gradient(170deg, rgba(255,240,210,.0) 0 50px, rgba(255,240,210,.18) 50px 54px); }
.field.isl-enies-lobby .f-floor { background: linear-gradient(180deg, #4a5060 0%, #2a2f3c 50%, #12151c 100%); }
.field.isl-enies-lobby .f-waves { animation: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 54px), repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, transparent 2px 54px); }
.field.raid .f-floor { background: linear-gradient(180deg, #5a2a8a 0%, #2a1050 60%, #12061f 100%); }
/* Plattformen als 3D-Scheiben mit Rand */
.plat { background: none; box-shadow: none; }
.plat::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 45% 35%, rgba(255,255,255,.6), rgba(220,240,250,.35) 45%, rgba(255,255,255,.12) 70%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 10px 0 rgba(0,0,0,.18), 0 18px 24px rgba(0,0,0,.25); }
.plat i { position: absolute; inset: 18% 12%; border-radius: 50%; border: 2px dashed rgba(255,255,255,.35); animation: plat-spin 30s linear infinite; }
@keyframes plat-spin { to { transform: rotate(360deg); } }
.field.isl-paradies .plat::before { background: radial-gradient(ellipse at 45% 35%, rgba(255,240,210,.7), rgba(200,150,90,.45) 55%, rgba(120,80,40,.2) 72%); }
.field.isl-enies-lobby .plat::before, .field.raid .plat::before { background: radial-gradient(ellipse at 45% 35%, rgba(200,210,240,.35), rgba(80,90,120,.3) 55%, rgba(20,20,40,.2) 72%); box-shadow: inset 0 0 0 2px rgba(243,210,122,.35), 0 10px 0 rgba(0,0,0,.3); }
.plat-crew { left: 3%; width: 50%; bottom: 3%; height: 24%; }
.plat-enemy { left: 55%; width: 42%; bottom: 42%; height: 17%; }
.f-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 420;
  background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(0,0,0,.35) 100%),
              linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%); }
/* Figuren: größer, mit Tiefe */
.fu { width: 90px; }
.fu-body svg { width: 80px; height: 94px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.fu-enemy .fu-body svg { filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)) saturate(.92) brightness(.96); }
.fu.boss .fu-body svg { filter: drop-shadow(0 0 10px rgba(208,86,74,.8)) drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.fu.mini .fu-body svg { filter: drop-shadow(0 0 8px rgba(217,166,60,.8)) drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.fu-shadow { width: 70px; height: 16px; bottom: -4px; background: radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%); filter: none; }
.fu-bar { width: 60px; height: 7px; }
/* Einlauf zu Kampfbeginn */
.field.enter .fu-crew { animation: in-left .8s cubic-bezier(.2,.8,.2,1) both; }
.field.enter .fu-enemy { animation: in-right .8s cubic-bezier(.2,.8,.2,1) both; }
.field.enter .f-stage { animation: cam-in 1s cubic-bezier(.2,.8,.2,1); }
@keyframes in-left { from { transform: translateX(-260%) scale(var(--s)); opacity: 0; } }
@keyframes in-right { from { transform: translateX(200%) scale(var(--s)); opacity: 0; } }
@keyframes cam-in { from { transform: scale(1.25) translateY(6%); filter: blur(2px); } }
@media (max-width: 520px) {
  .field { height: 250px; }
  .fu { width: 60px; }
  .fu-body svg { width: 54px; height: 63px; }
  .fu-bar { width: 42px; }
  .fu-shadow { width: 48px; }
  .f-sun { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .f-clouds, .f-waves, .plat i, .f-stage, .field.enter .fu-crew, .field.enter .fu-enemy { animation: none !important; }
}


/* ---------- Stationen auf der Seekarte ---------- */
.sc-stop { position: absolute; left: 10px; transform: translateY(-50%); z-index: 2; pointer-events: none;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em; color: rgba(255,255,255,.55);
  padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.25); max-width: 22%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-stop.now { color: #1c1408; background: #f3d27a; }
.sc-stop.done { color: rgba(243,210,122,.7); }
@media (max-width: 520px) { .sc-stop { font-size: .68rem; max-width: 26%; left: 4px; padding: 2px 6px; } }
.stop-name { color: var(--ink); }
.scene-stops { margin-top: 10px !important; font-size: .9rem; color: #6b5a44 !important; }
.stop-banner { position: fixed; top: 18%; left: 50%; z-index: 80; transform: translateX(-50%); pointer-events: none;
  display: grid; justify-items: center; padding: 10px 28px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, rgba(53,41,28,.94), rgba(107,66,38,.92)); box-shadow: 0 12px 30px rgba(40,25,10,.3);
  animation: stop-in .5s cubic-bezier(.2,.9,.3,1.2); }
.stop-banner small { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #f3d27a; }
.stop-banner b { font-family: "Pirata One", Georgia, serif; font-weight: 400; font-size: 2rem; line-height: 1.1; }
.stop-banner.out { opacity: 0; transition: opacity .5s; }
@keyframes stop-in { from { transform: translateX(-50%) translateY(-20px) rotateX(60deg); opacity: 0; } }

/* =====================================================================
   CLEAN-DESIGN (Pokelike-Stil): flache Flächen, klare Kanten, Pixel-Schrift
   für Überschriften, Knöpfe und Zahlen. Diese Schicht überschreibt den
   älteren, effektreicheren Look darüber.
   ===================================================================== */
:root:not([data-theme="dark"]) {
  --bg: #f6f0e1; --deep: #f6f0e1; --panel: #fffcf5; --panel-2: #fffcf5;
  --ink: #35291c; --mute: #7c6b52; --line: #e6d9bb;
  --red: #d1604a; --sea: #2f8f82; --gold: #c08a2e; --hp: #4a9a4e;
  --btn: #6b4226; --btnink: #fffdf6; --btnedge: #4a2d18;
  --shadow: 0 2px 0 #e6d9bb;
}
:root[data-theme="dark"] { --shadow: 0 2px 0 rgba(0,0,0,.35); }
:root { --px: "Pixelify Sans", "Nunito", system-ui, sans-serif; }
body { font-family: "Nunito", system-ui, sans-serif; font-size: 17px; background: var(--bg); background-attachment: initial; }
h1, h2, h3, .rank-name, .my-name, .duel-head b, .poster h3, .poster-label, .hq-sec h3, .card-name, .tp-name,
.bp-wanted, .bp-name, .sp-text b, .stop-banner b, .scene-card h2, .lb-pos, .heat-num, .medal-num, .btn.sail, .acard b, .rank-up b {
  font-family: var(--px) !important; font-weight: 700 !important; letter-spacing: 0 !important;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
.stage { border: 2px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 18px; }

/* Knöpfe: flach mit fester Kante */
.btn { font-family: var(--px); font-weight: 600; border-radius: 8px; border: 2px solid var(--btnedge); box-shadow: 0 3px 0 var(--btnedge); }
.btn.ghost { border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); background: var(--panel); }
.btn.mini { font-size: .85rem; }

/* Auswahl-Optionen (Listen) */
.opt { border: 2px solid var(--line) !important; border-radius: 10px; box-shadow: 0 2px 0 var(--line); background: var(--panel); }
.opt:hover:not(.card) { border-color: var(--btn) !important; }
.chip { border-radius: 6px; }

/* ---------- Karten: hell und klar ---------- */
.opt.card { border: 0 !important; box-shadow: none; background: transparent; }
.opt.card .card-face, .opt.card:hover .card-face { transform: none !important; }
.opt.card:hover { transform: translateY(-4px); }
.card-face {
  background: var(--panel); color: var(--ink); border: 3px solid #cfd3da; border-radius: 12px;
  box-shadow: 0 4px 0 #cfd3da; padding: 8px 8px 30px; min-height: 260px;
}
.opt.card:hover .card-face { box-shadow: 0 6px 0 var(--btn); border-color: var(--btn); }
.card-face::before, .card-face::after { display: none !important; }
.frame-s1 { border-color: #cfd3da; } .frame-s2 { border-color: #7ea6d4; box-shadow: 0 4px 0 #7ea6d4; }
.frame-s3, .frame-legendary { border-color: #e2a92a; box-shadow: 0 4px 0 #e2a92a; }
.frame-rare { border-color: #4a8be0; box-shadow: 0 4px 0 #4a8be0; }
.frame-epic, .frame-awakened { border-color: #9a63e0; box-shadow: 0 4px 0 #9a63e0; }
.frame-common { border-color: #cfd3da; }
.card-art { border: 0; border-radius: 8px; margin: 18px 2px 0; height: 104px; }
.card-art svg { filter: none; width: 64px; height: 75px; }
.art-kraft { background: #fde3df; } .art-klinge { background: #dff3e4; } .art-technik { background: #dde9fa; } .art-loot { background: #f4ecdc; }
.card-name { background: none; border: 0; margin: 6px 4px 0; padding: 0; color: var(--ink) !important; text-shadow: none !important; font-size: 1.15rem; transform: none !important; }
.card-face .card-type, .card-face .card-trait { color: var(--mute) !important; }
.card-text { background: #f6f6f3; color: var(--ink); border-radius: 8px; font-size: .82rem; }
.card-text .gain { color: var(--hp); }
.gem { border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.15); font-family: var(--px); }
.gem-atk { background: #e2a92a; } .gem-hp { background: #e0483b; border-radius: 50%; } .gem-spd { background: #2f6fb0; } .gem-lv { background: #6b5bd6; }
.card-rarity { font-family: var(--px); }

/* ---------- Kampf: ruhig wie Pokémon ---------- */
.field { height: 290px; border: 2px solid var(--line); border-radius: 12px; perspective: none; }
.f-stage, .f-stage.cam-enemy, .f-stage.cam-crew, .field.enter .f-stage { animation: none !important; transform: none !important; }
.f-clouds, .f-waves, .f-vignette, .plat i { display: none !important; }
.f-sky { inset: 0 0 50% 0; background: #bfe3f5 !important; }
.field.isl-paradies .f-sky { background: #f7d9a6 !important; }
.field.isl-enies-lobby .f-sky { background: #2a3150 !important; }
.field.raid .f-sky { background: #3a2a58 !important; }
.f-horizon { top: 38%; height: 12%; opacity: .55; filter: none; }
.f-floor { transform: none; left: 0; right: 0; bottom: 0; height: 50%; overflow: visible;
  background: #8fd18a !important; border-top: 3px solid #6fb86a; }
.field.isl-paradies .f-floor { background: #ead39f !important; border-top-color: #d6b97a; }
.field.isl-enies-lobby .f-floor { background: #4a5266 !important; border-top-color: #3a4152; }
.field.raid .f-floor { background: #5a4a7a !important; border-top-color: #4a3a68; }
.f-sun { box-shadow: none; filter: none; }
.plat::before { background: rgba(0,0,0,.10) !important; box-shadow: inset 0 0 0 3px rgba(255,255,255,.45) !important; }
.plat-crew { left: 6%; width: 46%; bottom: 6%; height: 20%; }
.plat-enemy { left: 56%; width: 38%; bottom: 46%; height: 14%; }
.fu-body svg, .fu-enemy .fu-body svg, .fu.boss .fu-body svg, .fu.mini .fu-body svg { filter: none; }
.fu-shadow { display: none; }
.fu-aura { display: none; }
.fu-bar { display: none; }
.fu.atk { animation: px-hop .3s steps(3) !important; }
@keyframes px-hop { 50% { transform: translate(calc(-50% + var(--dx) * .25), -10px) scale(var(--s)); } }
.fu.hurt, .fu.hurt-crit { animation: px-blink .45s steps(1) !important; }
.fu.hurt .fu-body svg, .fu.hurt-crit .fu-body svg { filter: none !important; }
@keyframes px-blink { 0%, 40%, 80% { opacity: .15; } 20%, 60%, 100% { opacity: 1; } }
.field.zoom, .field.special { animation: none !important; }
.fx3:not(.fnum):not(.fx-impact):not(.fx-heal) { display: none !important; }
.fx-impact { width: 36px; height: 36px; background: none; border-radius: 0; animation: px-pop .3s steps(3) forwards;
  clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%); background-color: #fff3a0; }
@keyframes px-pop { from { transform: translate(-50%, -50%) scale(.4); } to { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }
.fnum { font-family: var(--px); font-size: 1.35rem !important; animation: px-num .8s steps(8) forwards; }
.fnum.crit { font-size: 1.6rem !important; }
@keyframes px-num { 0% { transform: translate(-50%, -40%); opacity: 1; } 100% { transform: translate(-50%, -160%); opacity: 0; } }
.f-round { font-family: var(--px); background: rgba(31,36,48,.75); border-radius: 6px; }

/* Lebens-Kästen wie bei Pokémon */
.battle3d .arena.hud { background: transparent !important; border: 0; padding: 0; gap: 10px; box-shadow: none !important; }
.battle3d .hud .arena-sky { display: none; }
.battle3d .hud .fighter, .battle3d .hud .side-enemy .fighter {
  background: var(--panel); color: var(--ink); border: 2px solid var(--line); border-radius: 10px; box-shadow: 0 2px 0 var(--line) !important;
}
.battle3d .hud .fighter.front { border-color: var(--btn); box-shadow: 0 2px 0 var(--btn) !important; }
.battle3d .hud .fighter.big { border-color: var(--red); }
.battle3d .hud .f-name { font-family: var(--px); font-weight: 600; }
.battle3d .hud .f-hp { color: var(--mute); font-family: var(--px); }
.battle3d .hud .f-bar { height: 8px; border-radius: 4px; background: #e6e6e1; border: 1px solid #d6d6cf; }
.battle3d .hud .f-bar s { background: #f2c94c; }
.battle3d .hud .f-bar i { background: #2fa84f; }
.battle3d .hud .fighter[data-hp="mid"] .f-bar i { background: #f2b632; }
.battle3d .hud .fighter[data-hp="low"] .f-bar i { background: #e0483b; }
.battle3d .hud .callout { font-family: var(--px); }
.log { font-family: var(--px); font-weight: 400; background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: 10px 14px; min-height: 2.8em; }
@media (max-width: 520px) { .field { height: 220px; } }

/* Seekarte flacher */
.sea-chart { background: #2b4a6e !important; box-shadow: none; border: 2px solid #22405f; }
.map-node { border-width: 3px; box-shadow: none !important; animation: none !important; }
.map-node.can { background: #fff; border-color: #f2b632; }
.map-node.can .mn-icon svg { filter: none; }
.map-node.can:hover { transform: translate(-50%, -50%) scale(1.1); }
.mn-label b { font-family: var(--px); font-weight: 600; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.sc-lines .can { animation: none; }

/* Weniger Glanz überall */
.tip-badge, .tp-card, .sp-card, .special-box.ready, .rank-v2::before, .my-card, .duel-box, .rank-perk, .vault-slots { background-image: none !important; }
.tip-badge { background: #f2b632; box-shadow: none; font-family: var(--px); }
.special-box.ready { background: var(--panel); }
.my-card { background: var(--panel); }
.duel-box { background: var(--panel); border-width: 2px; }
.medal-shine { display: none; }
.medal-face { animation: none !important; }
.points-banner { border-radius: 10px; box-shadow: none; }
.battle3d .hud .fighter, .battle3d .hud .side-enemy .fighter { background: var(--panel) !important; color: var(--ink) !important; }
.battle3d .hud .f-name b { color: var(--ink); }
.battle3d .hud .fighter.ko { opacity: .5; }
:root:not([data-theme="dark"]) .battle3d .hud .fighter { --panel: #ffffff; --line: #e2e0d8; --ink: #1f2430; --mute: #646a75; color: #1f2430; }
:root[data-theme="dark"] .battle3d .hud .fighter { --panel: #1c2230; --line: #34393f; }


/* ---------- Taverne (Shop) ---------- */
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gold { font-family: var(--px); font-size: 1.2rem; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; background: #fff6dc; border: 2px solid #f2d27a; }
.gold svg, .gold-chip svg, .price svg { width: 16px; height: 16px; }
.gold-chip { font-style: normal; font-family: var(--px); color: #9a6a00; display: inline-flex; gap: 4px; align-items: center; }
.cards.shop { grid-template-columns: repeat(auto-fill, minmax(min(160px, 46%), 1fr)); }
.shop-slot { display: grid; gap: 6px; justify-items: center; }
.shop-slot .opt.card { width: 100%; }
.price { font-family: var(--px); font-size: 1.05rem; display: inline-flex; gap: 5px; align-items: center; padding: 3px 12px; border-radius: 8px; background: #fff6dc; border: 2px solid #f2d27a; }
.price.no { background: var(--panel); border-color: var(--line); color: var(--mute); }
.opt.card.sold { opacity: .35; }
.opt.card.cant .card-face { opacity: .6; }
.shop-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.sell-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sell-slot { display: grid; justify-items: center; gap: 4px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--panel); min-width: 92px; }
.sell-slot svg { width: 32px; height: 38px; shape-rendering: crispEdges; }
.sell-slot b { font-size: .85rem; }
.sell-slot small { color: var(--mute); font-size: .76rem; }

.sheet-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.danger-btn { color: var(--red) !important; }

/* ---------- Startbildschirm ---------- */
.title-screen { position: fixed; inset: 0; z-index: 90; overflow-y: auto; background: var(--bg); display: grid; place-items: center; padding: 16px; }
body.on-title { overflow: hidden; }
.ts-inner { width: min(560px, 100%); display: grid; gap: 18px; justify-items: center; text-align: center; }
.ts-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.ts-logo { display: grid; gap: 2px; margin-top: 4px; }
.ts-logo b { font-family: var(--px); font-weight: 700; font-size: clamp(2.6rem, 11vw, 4.2rem); line-height: 1; color: var(--ink);
  text-shadow: 0 4px 0 var(--line); animation: ts-in .7s steps(6) both; }
.ts-logo small { font-family: var(--px); color: var(--mute); font-size: 1rem; letter-spacing: .08em; }
@keyframes ts-in { from { transform: translateY(-30px); opacity: 0; } }
.ts-scene { position: relative; width: 100%; height: 190px; border-radius: 12px; overflow: hidden; border: 2px solid var(--line);
  background: linear-gradient(#bfe3f5 0 62%, #4f9ccc 62% 100%); }
:root[data-theme="dark"] .ts-scene { background: linear-gradient(#1a2440 0 62%, #20456a 62% 100%); }
.ts-sun { position: absolute; top: 18px; right: 40px; width: 42px; height: 42px; background: #fff3b0; box-shadow: 0 0 0 6px rgba(255,243,176,.35); }
.ts-sea { position: absolute; left: 0; right: 0; top: 62%; height: 6px; background: repeating-linear-gradient(90deg, #fff 0 12px, transparent 12px 36px); opacity: .6; animation: ts-sea 2s steps(6) infinite; }
@keyframes ts-sea { to { background-position: 36px 0; } }
.ts-ship { position: absolute; left: 50%; top: 30%; width: 120px; height: 90px; transform: translateX(-50%); animation: ts-bob 1.6s steps(4) infinite; }
.ts-ship svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
@keyframes ts-bob { 50% { transform: translate(-50%, -6px); } }
.ts-crew { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 30px; }
.ts-hop svg { width: 40px; height: 47px; shape-rendering: crispEdges; }
.ts-hop { animation: ts-hop 1.2s steps(3) infinite; }
.ts-hop:nth-child(2) { animation-delay: .2s; } .ts-hop:nth-child(3) { animation-delay: .4s; }
@keyframes ts-hop { 30% { transform: translateY(-10px); } 60% { transform: translateY(0); } }
.ts-menu { width: 100%; display: grid; gap: 10px; }
.ts-play { font-size: 1.4rem; padding: 16px; animation: ts-pulse 1.6s steps(2) infinite; }
@keyframes ts-pulse { 50% { box-shadow: 0 3px 0 var(--btnedge), 0 0 0 4px rgba(242,182,50,.45); } }
.ts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ts-row .btn { padding: 10px 6px; font-size: .95rem; }
.ts-foot { font-size: .75rem; color: var(--mute); margin: 0; max-width: 460px; }
.ts-login { margin-top: 2px; }
@media (max-width: 420px) { .ts-row { grid-template-columns: 1fr; } }

/* ---------- Login-Screen: clean, wie eine App-Anmeldeseite ---------- */
.login-card { position: relative; max-width: 380px; padding: 8px 4px 0; }
.login-back { position: absolute; left: 0; top: -2px; }
.login-icon { font-size: 2.4rem; margin-top: 18px; }
.login-card h2 { margin-top: 2px; }
.login-card .hint { color: var(--mute); text-align: center; margin: 0; }
.login-field { width: 100%; display: grid; gap: 6px; text-align: left; margin-top: 6px; }
.login-field label { font-size: .82rem; font-weight: 700; color: var(--mute); }
.login-field input { width: 100%; font: inherit; font-size: 1.05rem; padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--panel); color: var(--ink); }
.login-field input:focus { outline: none; border-color: var(--gold); }
.login-main { width: 100%; margin-top: 4px; text-align: center; }
.login-field .code-input { font-family: var(--px); font-size: 1.6rem; letter-spacing: .35em; text-align: center; }
.acc-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; color: var(--mute); margin: 8px 0 0; }
.acc-line b { color: var(--ink); }
.login-sent { width: 100%; margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--hp) 14%, var(--panel)); color: var(--ink); font-size: .9rem; }
.login-alt { font-size: .85rem; color: var(--mute); margin: 2px 0 0; }
.login-alt .link { font-size: inherit; }

/* Profil-Chip und Profil anlegen */
.pf-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); text-align: left; }
.pf-chip:hover { border-color: var(--btn); }
.pf-av { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #dde9fa; }
.pf-av svg { width: 30px; height: 35px; shape-rendering: crispEdges; }
.pf-txt { display: grid; gap: 1px; min-width: 110px; }
.pf-txt b { font-family: var(--px); font-weight: 600; font-size: 1rem; line-height: 1.1; }
.pf-txt small { color: var(--mute); font-size: .75rem; }
.pf-xp { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pf-xp i { display: block; height: 100%; background: #f2b632; }
.pf-card { width: 100%; display: grid; gap: 10px; text-align: left; padding: 20px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.pf-card label { font-family: var(--px); font-weight: 600; margin-top: 6px; }
.pf-card input { font: inherit; font-size: 1.1rem; padding: 10px 12px; border-radius: 8px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); }
.pf-card input:focus { outline: none; border-color: var(--btn); }
.pf-card input.shake { animation: shake .3s; border-color: var(--red); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.av-opt { height: 70px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; background: var(--bg); border: 2px solid var(--line); }
.av-opt svg { width: 40px; height: 47px; shape-rendering: crispEdges; }
.av-opt.on { border-color: #f2b632; background: #fff6dc; box-shadow: 0 3px 0 #f2b632; }
.pf-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

/* Hauptquartier aufgeräumt */
.hq-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.hq-bar .berry { font-family: var(--px); font-size: 1.3rem; display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border-radius: 10px; background: #fff6dc; border: 2px solid #f2d27a; }
.hq-bar .berry small { font-size: .8rem; color: var(--mute); }
.hq-sail { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); box-shadow: 0 3px 0 var(--line); }
.sail-scene { height: 96px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(#bfe3f5 0 60%, #4f9ccc 60%); }
.sail-scene .hq-ship svg { width: 90px; height: 68px; shape-rendering: crispEdges; animation: ts-bob 1.6s steps(4) infinite; }
.sail-body { display: grid; gap: 6px; justify-items: start; }
.sail-body small { color: var(--mute); }
.hq-sail .heat { grid-column: 1 / -1; }
.btn.sail { font-size: 1.25rem; padding: 12px 26px; }
@media (max-width: 520px) { .hq-sail { grid-template-columns: 1fr; } .sail-scene { height: 80px; } }

.sail-heat { grid-column: 1 / -1; }
.sail-heat > small { color: var(--mute); font-size: .85rem; }
.sail-scene .hq-ship { position: static !important; inset: auto !important; transform: none !important; animation: none !important; width: auto; height: auto; }
.sail-scene .hq-ship svg { display: block; }
.sail-scene .hq-ship svg { width: 74px !important; height: 56px !important; }
.hq-sec .hq-stats { margin-top: 10px; }

/* ---------- Porträt: Hintergrund, Rahmen, Animation ---------- */
.portrait { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: none;
  border: 3px solid #8a6a4a; background: #bfe3f5; }
.portrait svg { width: 62%; height: 72%; shape-rendering: crispEdges; position: relative; z-index: 1; }
.portrait.xs { width: 40px; height: 40px; border-width: 2px; }
.portrait.sm { width: 44px; height: 44px; }
.portrait.lg { width: 72px; height: 72px; }
.portrait.xl { width: 150px; height: 150px; border-width: 5px; border-radius: 16px; }
/* Hintergründe */
.bg-meer    { background: linear-gradient(#bfe3f5 0 60%, #4f9ccc 60%); }
.bg-morgen  { background: linear-gradient(#f7b27a 0 55%, #f6d8a0 55% 62%, #4f8cc0 62%); }
.bg-wueste  { background: linear-gradient(#f7d9a6 0 58%, #e0b06a 58%); }
.bg-nacht   { background: radial-gradient(circle 2px at 20% 20%, #fff 99%, transparent), radial-gradient(circle 2px at 70% 30%, #fff 99%, transparent), linear-gradient(#1a2440 0 62%, #20456a 62%); }
.bg-sturm   { background: repeating-linear-gradient(115deg, transparent 0 10px, rgba(255,255,255,.12) 10px 12px), linear-gradient(#3a3f5a 0 60%, #2a4058 60%); }
.bg-kirsch  { background: radial-gradient(circle 3px at 25% 30%, #fff 99%, transparent), radial-gradient(circle 3px at 75% 20%, #ffd6e6 99%, transparent), linear-gradient(#ffd6e6 0 60%, #f4a6c4 60%); }
.bg-gold    { background: repeating-linear-gradient(45deg, #f2c94c 0 6px, #e8b830 6px 12px); }
.bg-legende { background: conic-gradient(from 0deg, #f2c94c, #e0483b, #9a63e0, #2f6fb0, #2fa84f, #f2c94c); }
/* Rahmen */
.fr-holz       { border-color: #8a6a4a; }
.fr-tau        { border-color: #c8a46a; border-style: dashed; }
.fr-silber     { border-color: #b8c2cc; box-shadow: inset 0 0 0 2px #fff; }
.fr-steckbrief { border-color: #d6b97a; box-shadow: inset 0 0 0 2px #8a6a4a; }
.fr-gold       { border-color: #e2a92a; box-shadow: 0 0 0 2px #fff6dc, inset 0 0 0 2px #fff6dc; }
.fr-krone      { border-color: #9a63e0; box-shadow: 0 0 0 2px #f2b632; }
/* Animationen (sparsam, in Pixel-Schritten) */
.an-wippen svg  { animation: an-wip 1.4s steps(2) infinite; }
.an-huepfen svg { animation: an-hop 1s steps(3) infinite; }
.an-drehen svg  { animation: an-spin 2.4s steps(8) infinite; }
.an-funkeln::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle 2px at 20% 25%, #fff 99%, transparent), radial-gradient(circle 2px at 80% 35%, #fff 99%, transparent), radial-gradient(circle 2px at 60% 80%, #fff 99%, transparent);
  animation: an-twinkle 1.2s steps(2) infinite; }
.an-flammen::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 55%; z-index: 0;
  background: radial-gradient(ellipse at 50% 100%, #ffb36b, #e0483b 45%, transparent 70%); animation: an-flame .6s steps(2) infinite; }
@keyframes an-wip { 50% { transform: rotate(-6deg); } }
@keyframes an-hop { 40% { transform: translateY(-14%); } }
@keyframes an-spin { to { transform: rotateY(360deg); } }
@keyframes an-twinkle { 50% { opacity: .2; } }
@keyframes an-flame { 50% { transform: scaleY(1.15); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .portrait svg, .portrait::after, .portrait::before { animation: none !important; } }
.pf-chip .portrait { border-radius: 8px; }
/* Rangliste: Zeilenhintergrund passend zum Profil */
.lb-row[class*="rowbg-"] { background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, var(--panel) 30%); }
.lb-row.rowbg-nacht, .lb-row.rowbg-sturm { box-shadow: inset 4px 0 0 #2a3150; }
.lb-row.rowbg-gold, .lb-row.rowbg-legende { box-shadow: inset 4px 0 0 #f2b632; }
.lb-row.rowbg-kirsch { box-shadow: inset 4px 0 0 #f4a6c4; }
.lb-row.rowbg-wueste, .lb-row.rowbg-morgen { box-shadow: inset 4px 0 0 #e0b06a; }

/* ---------- Charakter-Editor ---------- */
.ts-inner.wide { width: min(860px, 100%); }
.pf-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.pf-preview { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 10px; border-radius: 12px; background: var(--bg); position: sticky; top: 0; }
.pf-prev-name { font-family: var(--px); font-size: 1.3rem; }
.pf-preview small { color: var(--mute); }
.pf-stats { display: flex; gap: 10px; font-family: var(--px); }
.pf-form { display: grid; gap: 6px; }
.segs { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { font: inherit; font-family: var(--px); font-size: .9rem; padding: 6px 12px; border-radius: 8px; cursor: pointer; background: var(--bg); color: var(--ink); border: 2px solid var(--line); }
.seg.on { background: var(--btn); color: #fff; border-color: var(--btnedge); }
.segs.small .seg { padding: 4px 9px; font-size: .8rem; }
.sw-row { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: center; }
.sw-row > span { font-size: .85rem; color: var(--mute); }
.sw { display: flex; flex-wrap: wrap; gap: 5px; }
.sw-c { width: 26px; height: 26px; border-radius: 6px; cursor: pointer; border: 2px solid rgba(0,0,0,.15); }
.sw-c.on { outline: 3px solid var(--btn); outline-offset: 1px; }
.cos-all { display: grid; gap: 8px; margin-top: 8px; }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.cos { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--panel); border: 2px solid var(--line); }
.cos small { font-size: .72rem; line-height: 1.2; color: var(--mute); text-align: center; }
.cos.on { border-color: #f2b632; background: #fff6dc; box-shadow: 0 3px 0 #f2b632; }
.cos.locked { opacity: .55; cursor: not-allowed; }
.cos.locked .portrait { filter: grayscale(1); }
.cos-title { font-family: var(--px); font-size: .82rem; min-height: 40px; display: grid; place-items: center; text-align: center; }
@media (max-width: 680px) { .pf-grid { grid-template-columns: 1fr; } .pf-preview { position: static; } }

.dev-box { display: grid; gap: 6px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 2px dashed var(--line); background: var(--panel); }
.dev-box.ok { border-style: solid; border-color: var(--hp); }
.dev-box small { color: var(--mute); }
.dev-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-row input { flex: 1; min-width: 200px; font: inherit; padding: 8px 12px; border-radius: 8px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); }

/* ---------- Ausrüstung ---------- */
.item-card { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px;
  background: var(--panel); border: 2px solid #cfd3da; box-shadow: 0 2px 0 #cfd3da; }
.item-card.ir-rare { border-color: #4a8be0; box-shadow: 0 2px 0 #4a8be0; }
.item-card.ir-epic { border-color: #9a63e0; box-shadow: 0 2px 0 #9a63e0; }
.item-card.ir-legendary { border-color: #e2a92a; box-shadow: 0 2px 0 #e2a92a; background: #fffaf0; }
.item-card.on { outline: 3px solid #f2b632; outline-offset: 1px; }
.item-card.worn { opacity: .75; }
.item-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--bg); }
.item-ico svg { width: 30px; height: 30px; }
.item-body { display: grid; gap: 2px; min-width: 0; }
.item-body b { font-family: var(--px); font-weight: 600; }
.item-body .rar { justify-self: start; }
.item-body small { color: var(--mute); font-size: .8rem; }
.item-grid, .equip-list { display: grid; gap: 8px; }
.equip { display: grid; gap: 8px; margin-bottom: 10px; }
.worn-by { color: var(--mute); font-size: .75rem; margin: -4px 0 0 52px; }
.forge-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.sum-gold { display: inline-flex; gap: 6px; align-items: center; margin: 8px 0 0; font-family: var(--px); font-size: 1.1rem; padding: 4px 12px; border-radius: 8px; background: #fff6dc; border: 2px solid #f2d27a; animation: px-pop-in .4s steps(3); }
.sum-gold svg { width: 16px; height: 16px; }
.sum-gold small { color: var(--mute); }
@keyframes px-pop-in { from { transform: scale(.6); opacity: 0; } }
.toast-item { display: grid; }
.trophy-chip.ir-rare { background: #2f5f9e; } .trophy-chip.ir-epic { background: #6a3aa8; } .trophy-chip.ir-legendary { background: #a8740e; } .trophy-chip.ir-common { background: #5a6270; }
.items-sum { border-color: var(--line); }
@media (max-width: 520px) { .item-card { grid-template-columns: 36px 1fr; } .item-card > .btn, .forge-btns { grid-column: 1 / -1; justify-content: flex-start; } }

.end-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ---------- Tooltips: Klick/Tipp statt nur Hover, damit es auch auf dem Handy geht ---------- */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px);
  background: #1b2230; color: #fff; padding: 8px 11px; border-radius: 9px; font-family: var(--ui, "Nunito", system-ui, sans-serif);
  font-size: 12.5px; font-weight: 600; line-height: 1.45; white-space: pre-line; width: max-content; max-width: 230px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 500;
}
[data-tip]::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1b2230; opacity: 0; transition: opacity .12s; pointer-events: none; z-index: 500;
}
[data-tip]:hover::after, [data-tip]:hover::before,
[data-tip]:focus-visible::after, [data-tip]:focus-visible::before,
[data-tip].tt-open::after, [data-tip].tt-open::before { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) { [data-tip]::after { max-width: 64vw; left: 0; transform: translateX(0) translateY(4px); }
  [data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip].tt-open::after { transform: translateX(0) translateY(0); }
  [data-tip]::before { left: 14px; transform: none; } }

/* ---------- Hauptquartier-Kurzblick während eines laufenden Runs ---------- */
.peek-wrap { position: fixed; inset: 0; z-index: 500; background: var(--bg); overflow-y: auto; }
.peek-bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 16px; background: var(--panel); border-bottom: 2px solid var(--line);
}
.peek-bar b { font-family: var(--px); }
.peek-body { padding: 4px 16px 28px; max-width: 980px; margin: 0 auto; }
.peek-back { font-family: var(--px); }
.end-actions .btn { margin-top: 0; }

/* =====================================================================
   SAMMELKARTEN v2: Karten sollen wie echte Karten wirken
   Farbiger Außenrahmen (nach Sternen/Seltenheit), helles Papier innen,
   Namensband über dem Bild, sichtbare Kartendicke, gut lesbarer Text.
   ===================================================================== */
.card-face {
  --fc: #8a93a3; --fc-d: #5f6776;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 40%),
    #fbf3de;
  border: 5px solid var(--fc) !important; border-radius: 16px;
  box-shadow: inset 0 0 0 3px #fffdf4, inset 0 0 0 5px rgba(0,0,0,.08), 0 5px 0 var(--fc-d) !important;
  padding: 8px 9px 32px; min-height: 272px; color: #2c2317;
}
.frame-s1, .frame-common { --fc: #8a93a3; --fc-d: #5f6776; }
.frame-s2 { --fc: #4f86c6; --fc-d: #2f5f96; }
.frame-s3, .frame-legendary { --fc: #d99a1e; --fc-d: #9c6a08; }
.frame-rare { --fc: #2f6fb8; --fc-d: #1d4b80; }
.frame-epic { --fc: #8a52d6; --fc-d: #5d2fa3; }
.frame-awakened { --fc: #d0508a; --fc-d: #8f2a5a; }
.frame-unique { --fc: #2f8a8f; --fc-d: #1c5e62; }
.frame-gold { outline: 3px solid #f2c94c; outline-offset: 2px; }
.frame-s3, .frame-legendary, .frame-awakened, .frame-epic { background:
    linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--fc) 10%, #fbf7ee), #fbf7ee 45%); }

.opt.card:hover .card-face { border-color: var(--fc) !important;
  box-shadow: inset 0 0 0 3px #fffdf8, inset 0 0 0 4px rgba(0,0,0,.07), 0 8px 0 var(--fc-d), 0 0 0 3px color-mix(in srgb, var(--fc) 35%, transparent) !important; }
.opt.card:hover { transform: translateY(-5px); }
.opt.card:active { transform: translateY(-1px); }

/* Bildfenster */
.card-art { margin: 20px 2px 0; height: 104px; border-radius: 10px;
  border: 2px solid color-mix(in srgb, var(--fc) 50%, #ddd2b4) !important;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.07); }
.art-kraft { background: linear-gradient(180deg, #ffe6da, #f6c7af) !important; }
.art-klinge { background: linear-gradient(180deg, #e9f3dd, #c9e3b0) !important; }
.art-technik { background: linear-gradient(180deg, #e7f0ee, #c3ddd8) !important; }
.art-loot { background: linear-gradient(180deg, #fbefd6, #edd79e) !important; }
.card-art svg { width: 66px; height: 77px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.12)); }
.card-art .icon { width: 56px; height: 56px; }

/* Namensband über der Bildkante */
.card-name {
  position: relative; z-index: 2; align-self: center; max-width: calc(100% - 12px);
  margin: -13px auto 0 !important; padding: 3px 10px !important; border-radius: 7px !important;
  background: var(--fc) !important; color: #fff !important; font-size: 1.02rem !important; line-height: 1.15;
  box-shadow: 0 2px 0 var(--fc-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
}
.card-type { margin: 6px 0 5px !important; font-size: .78rem; color: #59606c !important; }
.card-face .card-trait { color: #4a515d !important; }

/* Textfeld: gut lesbar */
.card-text {
  background: #fffdf8 !important; border: 1px solid #e6dfcc; border-radius: 8px;
  color: #232a36 !important; font-size: .86rem !important; line-height: 1.38 !important; font-weight: 600;
  padding: 7px 8px !important; text-align: left;
}
.card-text b { font-weight: 800; color: #151a23; }
.card-text .gain { color: #23803f !important; font-weight: 700; }

/* Werte-Steine: groß, Pixel-Zahlen mit Kontur */
.gem { border: 3px solid #fff !important; box-shadow: 0 2px 0 rgba(0,0,0,.22) !important; font-family: var(--px);
  text-shadow: -1px 0 0 rgba(0,0,0,.45), 1px 0 0 rgba(0,0,0,.45), 0 -1px 0 rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.45); }
.gem-atk, .gem-hp { width: 42px; height: 42px; font-size: 1.25rem; bottom: -11px; }
.gem-atk { left: -11px; border-radius: 10px 10px 50% 50%; background: #e2a92a !important; }
.gem-hp { right: -11px; border-radius: 50%; background: #e0483b !important; }
.gem-lv { width: 32px; height: 32px; font-size: .9rem; }
.gem-spd { width: 28px; height: 28px; font-size: .8rem; }
.card-stars { top: 4px; }
.card-stars .stars { font-size: .9rem; color: #fff; text-shadow: -1px 0 0 rgba(0,0,0,.6), 1px 0 0 rgba(0,0,0,.6), 0 -1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(0,0,0,.6); }
.opt.card .key { bottom: 9px; }

@media (max-width: 520px) {
  .card-face { min-height: 256px; padding: 7px 7px 30px; }
  .card-art { height: 86px; margin-top: 18px; }
  .card-art svg { width: 54px; height: 63px; }
  .card-name { font-size: .95rem !important; }
  .card-text { font-size: .82rem !important; }
  .gem-atk, .gem-hp { width: 38px; height: 38px; font-size: 1.12rem; }
}

/* ---------- Kurswahl: Insel-Kapitel ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 10px; }
.opt.course-opt { display: grid; gap: 10px; text-align: left; padding: 14px 14px 12px; position: relative; }
.course-opt .co-top { display: grid; gap: 2px; }
.course-opt .co-name { font-family: var(--px); font-size: 1.35rem; font-weight: 700; }
.course-opt .co-top small { color: var(--mute); font-size: .9rem; line-height: 1.35; }
.co-route { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .82rem; }
.co-route i { font-style: normal; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.co-route i.co-lair { background: #fde3df; border-color: #e6a393; color: #8a2c22; font-weight: 700; }
.co-route em { font-style: normal; color: var(--mute); }
.co-foe { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: #f6f3ea; border: 1px solid var(--line); }
.co-foe .co-sprite { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 8px; background: #fff; }
.co-foe .co-sprite svg { width: 40px; height: 47px; shape-rendering: crispEdges; }
.co-foe > span:last-child { display: grid; gap: 2px; }
.co-foe small { color: var(--mute); font-size: .8rem; }
.co-foe b { font-size: 1.02rem; }
.opt.course-opt:hover { transform: translateY(-3px); }
.opt.course-opt .key { top: 10px; right: 10px; left: auto; }
.map-node.gate { border-color: #e0705f !important; }
.track i.sea { height: 14px; }
.track i.boss:not(.sea) { height: 11px; }

/* ---------- Account zurücksetzen / löschen ---------- */
.danger-zone { margin-top: 18px; padding: 12px 14px; border: 2px dashed #e6a393; border-radius: 12px; display: grid; gap: 10px; background: #fff8f6; }
.danger-zone > b { font-family: var(--px); color: #8a2c22; }
.dz-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.dz-row > span { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.dz-row small { color: var(--mute); font-size: .82rem; }
.danger-btn { color: #b0372c !important; border-color: #e6a393 !important; box-shadow: 0 3px 0 #e6a393 !important; }

/* ---------- Neue Kosmetik ---------- */
.bg-kokos      { background: radial-gradient(circle 4px at 25% 30%, #f29a2e 99%, transparent), radial-gradient(circle 4px at 72% 22%, #f29a2e 99%, transparent), linear-gradient(#cfeec4 0 60%, #5f9e4a 60%); }
.bg-schnee     { background: radial-gradient(circle 2px at 15% 20%, #fff 99%, transparent), radial-gradient(circle 2px at 55% 35%, #fff 99%, transparent), radial-gradient(circle 2px at 85% 15%, #fff 99%, transparent), linear-gradient(#b8cfe0 0 60%, #eef4f8 60%); }
.bg-himmel     { background: radial-gradient(ellipse 30% 14% at 30% 70%, #fff 98%, transparent), radial-gradient(ellipse 26% 12% at 75% 62%, #fff 98%, transparent), linear-gradient(#8fd0f7, #d8f0ff); }
.bg-tiefsee    { background: radial-gradient(circle 3px at 30% 40%, rgba(255,255,255,.5) 99%, transparent), radial-gradient(circle 2px at 70% 60%, rgba(255,255,255,.4) 99%, transparent), linear-gradient(#0f4a6a, #071d33); }
.bg-marine     { background: linear-gradient(#e9eef4 0 58%, #2f5f8f 58% 64%, #f0f0f0 64%); }
.bg-lava       { background: radial-gradient(ellipse 50% 30% at 50% 100%, #ffb36b, #e0483b 50%, transparent 75%), linear-gradient(#3a2020, #1a0f0f); }
.bg-galaxie    { background: radial-gradient(circle 2px at 20% 30%, #fff 99%, transparent), radial-gradient(circle 1px at 60% 20%, #fff 99%, transparent), radial-gradient(circle 2px at 80% 70%, #ffd6e6 99%, transparent), radial-gradient(circle at 60% 40%, #7a4fc4, #1a1440 70%); }
.bg-regenbogen { background: linear-gradient(#e0483b, #f29a2e, #f2c94c, #2fa84f, #2f6fb0, #7a4fc4); }
.fr-rottau     { border-color: #c0453a; border-style: dashed; }
.fr-eisen      { border-color: #6a737e; box-shadow: inset 0 0 0 2px #a9b1ba; }
.fr-rubin      { border-color: #d0303a; box-shadow: 0 0 0 2px #ffd6da; }
.fr-saphir     { border-color: #2f6fd0; box-shadow: 0 0 0 2px #d6e6ff; }
.fr-smaragd    { border-color: #2fa86a; box-shadow: 0 0 0 2px #d6f5e4; }
.fr-feuer      { border-color: #f2762e; box-shadow: 0 0 0 2px #ffd36b, 0 0 10px #f2762e; }
.fr-regenbogen { border-color: transparent; background-origin: border-box; box-shadow: 0 0 0 3px #f2c94c, 0 0 0 5px #9a63e0; }
.an-schweben svg { animation: an-float 2s ease-in-out infinite; }
.an-puls svg     { animation: an-puls 1.1s steps(2) infinite; }
.an-zittern svg  { animation: an-shake .5s steps(2) infinite; }
.an-blitz::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,240,120,.9) 45%, transparent 50%); animation: an-bolt 1.6s steps(4) infinite; }
.an-konfetti::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle 2px at 15% 20%, #e0483b 99%, transparent), radial-gradient(circle 2px at 75% 15%, #2f6fb0 99%, transparent), radial-gradient(circle 2px at 45% 30%, #f2c94c 99%, transparent), radial-gradient(circle 2px at 85% 55%, #2fa84f 99%, transparent);
  animation: an-fall 1.4s steps(4) infinite; }
@keyframes an-float { 50% { transform: translateY(-10%); } }
@keyframes an-puls { 50% { transform: scale(1.08); } }
@keyframes an-shake { 50% { transform: translateX(4%); } }
@keyframes an-bolt { 0%, 60% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes an-fall { from { transform: translateY(-20%); } to { transform: translateY(20%); } }

/* Piratenflagge am Porträt */
.portrait { position: relative; }
.pflag { position: absolute; right: -4px; top: -4px; z-index: 3; width: 34%; min-width: 14px; aspect-ratio: 4 / 3; border-radius: 3px;
  background: #1b2230; border: 2px solid #fff; box-shadow: 0 1px 0 rgba(0,0,0,.3); display: grid; place-items: center;
  font-style: normal; color: #fff; font-size: clamp(8px, 30%, 16px); line-height: 1; }
.pflag::before { font-size: 1em; }
.portrait.xs .pflag { font-size: 8px; } .portrait.sm .pflag { font-size: 9px; } .portrait.lg .pflag, .portrait.xl .pflag { font-size: 15px; }
.fl-totenkopf::before { content: '☠'; }
.fl-anker::before     { content: '⚓'; } .fl-anker { background: #2f5f8f; }
.fl-stern::before     { content: '★'; color: #f2c94c; }
.fl-schwerter::before { content: '⚔'; } .fl-schwerter { background: #8a2c22; }
.fl-sonne::before     { content: '☀'; color: #f2c94c; } .fl-sonne { background: #e0702e; }
.fl-blume::before     { content: '❀'; } .fl-blume { background: #d0508a; }
.fl-blitz::before     { content: '⚡'; color: #f2e14c; } .fl-blitz { background: #3a2a58; }
.fl-krone::before     { content: '♛'; color: #f2c94c; } .fl-krone { background: #5d2fa3; }
.fl-drache::before    { content: '🐉'; } .fl-drache { background: #2f8a5f; }
.opt.card .card-art { transform: none !important; position: relative; z-index: 1; }
.card-name { z-index: 5 !important; margin-top: -11px !important; }
.lb-who b .medal.tiny, .pcard-name .medal.small { vertical-align: middle; margin-right: 2px; }
.lb-who b .medal.tiny { display: inline-grid; }
.pcard-name { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Schmiede: Verschmelzen, Schatzkammer: aktive Boni ---------- */
.fuse-box { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 12px; }
.fuse-box > small { color: var(--mute); }
.fuse-step { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.fuse-step.ready { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent); }
.fuse-step .btn { margin: 0 0 0 auto; }
.fuse-from small { color: var(--mute); font-weight: 700; }
.fuse-arrow { color: var(--mute); font-weight: 800; }
.vault-active { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--epic) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--epic) 30%, var(--line)); margin: 8px 0 12px; }
.vault-active ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.vault-active li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; font-size: .88rem; }
.va-ico svg { width: 30px; height: 35px; shape-rendering: crispEdges; }
.vault-active small { color: var(--mute); }

/* ---------- Ablegen: wie ein Spiel-Startbildschirm ---------- */
.hq-sail.game { display: grid !important; grid-template-columns: 1fr !important; gap: 10px; padding: 10px !important; }
.sail-stage { position: relative; height: 150px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(#ffe6b8 0%, #bfe3f5 38%, #bfe3f5 58%, #4f9ccc 58%, #2f7fb0 100%); }
.ss-sun { position: absolute; right: 26px; top: 14px; width: 34px; height: 34px; background: #fff3b0; box-shadow: 0 0 0 6px rgba(255,243,176,.4), 0 0 24px rgba(255,220,120,.8); }
.ss-cloud { position: absolute; height: 10px; width: 46px; background: #fff; opacity: .9; box-shadow: 10px -8px 0 -2px #fff, 24px -4px 0 0 #fff; animation: ss-cloud 22s linear infinite; }
.ss-cloud.c1 { top: 30px; left: -60px; }
.ss-cloud.c2 { top: 54px; left: -60px; animation-delay: -11s; animation-duration: 30s; transform: scale(.7); }
@keyframes ss-cloud { to { left: 110%; } }
.ss-sea { position: absolute; left: 0; right: 0; top: 58%; height: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 14px, transparent 14px 40px); animation: ts-sea 2s steps(6) infinite; }
.ss-ship { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); animation: ts-bob 1.6s steps(4) infinite; }
.ss-ship svg { width: 104px; height: 78px; shape-rendering: crispEdges; display: block; filter: drop-shadow(0 4px 0 rgba(0,0,0,.18)); }
.ss-title { position: absolute; left: 12px; top: 10px; font-family: var(--px); font-weight: 700; font-size: 1.15rem; color: #3a2400;
  text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.sail-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sail-row .btn.sail { margin: 0; flex: 1 1 200px; text-align: center; font-size: 1.3rem; padding: 14px 18px; }
.heat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 2px solid var(--line); background: var(--panel-2); font-size: .82rem; font-weight: 700; position: relative; }
.heat-pill .btn.mini { margin: 0; padding: 2px 8px; min-width: 0; }
.heat-pill .heat-num { font-family: var(--px); font-size: 1.1rem; min-width: 14px; text-align: center; }
.heat-pill.locked { color: var(--mute); }
.sail-board { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 34px; }
.sb-lbl { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin-right: 4px; }
.sb-chip { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); position: relative; }
.sb-chip svg { width: 24px; height: 24px; shape-rendering: crispEdges; }
.sb-chip.art { border-color: color-mix(in srgb, var(--epic) 45%, var(--line)); }
.sail-note { color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .ss-cloud, .ss-sea, .ss-ship { animation: none !important; } }

/* Kapitel-Fortschritt: Text im Balken nicht abschneiden */
.xpbar.chapter-bar { height: 18px; border-radius: 9px; overflow: hidden; position: relative; }
.xpbar.chapter-bar i { height: 100%; }
.xpbar.chapter-bar .rank-bar-txt { font-size: .74rem; line-height: 18px; }
.hq-sail.game .sail-row, .hq-sail.game .sail-board { display: flex !important; }
.hq-sail.game .heat-pill { display: inline-flex !important; }
.hq-sail.game .sail-stage { display: block !important; }
.hq-bar { flex-wrap: nowrap !important; }
.hq-bar .berry { flex: none; }
.hq-bar .pf-chip { min-width: 0; }

/* ---------- Easter Egg: Regenbogen-Stern des Entwicklers ---------- */
.portrait.star-power { animation: star-rainbow .6s linear infinite; box-shadow: 0 0 0 2px #fff, 0 0 12px 3px rgba(255,255,255,.6); position: relative; }
.portrait.star-power svg { animation: star-hue .6s linear infinite, star-bounce .45s ease-in-out infinite alternate; }
@keyframes star-rainbow {
  0% { background: #ff4d4d; } 16% { background: #ffa64d; } 33% { background: #ffe14d; }
  50% { background: #5ee06b; } 66% { background: #4dc3ff; } 83% { background: #a46bff; } 100% { background: #ff4d4d; } }
@keyframes star-hue { from { filter: hue-rotate(0deg) saturate(1.6) brightness(1.15); } to { filter: hue-rotate(360deg) saturate(1.6) brightness(1.15); } }
@keyframes star-bounce { to { transform: translateY(-2px); } }
.star-tag { position: absolute; right: -6px; top: -8px; font-style: normal; font-size: .9rem; color: #ffd400; text-shadow: 0 0 4px #fff, 0 1px 0 #a07000;
  animation: star-spin 1.2s linear infinite; z-index: 2; }
@keyframes star-spin { to { transform: rotate(360deg); } }
.admin-tag { font-style: normal; font-size: .66rem !important; font-weight: 900; color: #fff !important; padding: 1px 7px; border-radius: 999px; vertical-align: 2px;
  background: linear-gradient(90deg, #ff4d4d, #ffa64d, #ffe14d, #5ee06b, #4dc3ff, #a46bff) !important; background-size: 300% 100% !important;
  animation: tag-run 2s linear infinite; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.admin-tag.big { display: inline-block; font-size: .74rem !important; margin-top: 4px; }
@keyframes tag-run { to { background-position: -300% 0; } }
.admin-box { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  border: 2px dashed #a46bff; background: color-mix(in srgb, #a46bff 8%, var(--panel)); }
.admin-box > span:nth-child(2) { display: grid; }
.admin-box small { color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .portrait.star-power, .portrait.star-power svg, .star-tag, .admin-tag { animation: none !important; } }

/* ---------- Duell im Kampffeld ---------- */
.pcard.duel-play { width: min(560px, 100%); padding: 12px; }
.duel-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 8px; font-family: var(--px); }
.duel-vs b:first-child { text-align: right; color: #2f7a45; }
.duel-vs b:last-child { color: #a33a30; }
.duel-vs span { font-size: 1.4rem; color: var(--gold); }
.duel-play .battle3d .field { height: 230px; }
.duel-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: .88rem; }
.duel-bar .btn { margin: 0; }
.duel-xp { margin: 0; font-size: .85rem; color: var(--mute); }
.duel-xp b { color: var(--hp); }
.sq-xp { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 6px; }
.sq-xp span { display: grid; gap: 2px; }
.sq-xp small { font-size: .62rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-xp .xpbar { height: 5px; }

/* =====================================================================
   SAMMELKARTEN v3: Bande als Farbe, klare Werte-Leiste, gleich große Karten
   ===================================================================== */
.cards { align-items: stretch; }
.opt.card { height: 100%; }
.card-face.cf2 { --fc: #8a93a3; --fc-d: #5f6776;
  display: flex !important; flex-direction: column; gap: 5px; height: 100%; min-height: 0 !important;
  padding: 0 0 8px !important; overflow: hidden; border-width: 3px !important; border-radius: 14px;
  box-shadow: 0 4px 0 var(--fc-d) !important; background: #fffaf0 !important; }
.fac-strohhut  { --fc: #d98a72 !important; --fc-d: #b86c56 !important; }
.fac-marine    { --fc: #7fa3c9 !important; --fc-d: #5f84aa !important; }
.fac-cp9       { --fc: #8f8a9c !important; --fc-d: #6f6a7c !important; }
.fac-baroque   { --fc: #c9a35c !important; --fc-d: #a8863f !important; }
.fac-weissbart { --fc: #a7a0c8 !important; --fc-d: #86809f !important; }
.fac-samurai   { --fc: #7fb0b3 !important; --fc-d: #5f8f92 !important; }
.fac-none      { --fc: #c9b08a !important; --fc-d: #a88e68 !important; }
.cf2 .cf-band { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; background: var(--fc); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.cf2 .cf-band > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf2 .cf-band .stars { font-size: .72rem; color: #ffe27a; text-shadow: 0 1px 0 rgba(0,0,0,.35); white-space: nowrap; }
.cf2 .cf-band .stars i { color: rgba(255,255,255,.35); font-style: normal; }
.cf2 .card-art { position: relative; margin: 4px 8px 0 !important; height: 78px !important; border-color: color-mix(in srgb, var(--fc) 45%, #ddd2b4) !important; }
.cf2 .card-art svg { width: 52px !important; height: 61px !important; }
.cf2 .cf-lv { position: absolute; left: 4px; top: 4px; font-style: normal; font-size: .64rem; font-weight: 800; padding: 1px 5px; border-radius: 6px;
  background: rgba(0,0,0,.55); color: #fff; }
.cf2 .card-name { margin: -12px auto 0 !important; background: var(--fc) !important; box-shadow: 0 2px 0 var(--fc-d) !important; font-size: .95rem !important; }
.cf2 .cf-tags { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; padding: 0 6px; }
.cf2 .cf-tags .type, .cf2 .cf-tags .role-chip { font-size: .64rem; }
.cf2 .card-text { flex: 1; margin: 0 8px !important; padding: 6px 7px !important; font-size: .76rem !important; line-height: 1.3 !important; font-weight: 600;
  display: grid; align-content: start; gap: 4px; }
.cf2 .cf-ult { color: #8a5a00; }
.cf2 .cf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 8px; }
.cf2 .cf-stats span { display: grid; place-items: center; padding: 3px 0; border-radius: 8px; font-size: .7rem; color: #5a4a36; background: #f3e9d2; }
.cf2 .cf-stats span:nth-child(1) { background: #fbe1dc; color: #a33a30; }
.cf2 .cf-stats span:nth-child(2) { background: #fbefd2; color: #8a5a00; }
.cf2 .cf-stats span:nth-child(3) { background: #dff0f4; color: #1d5f80; }
.cf2 .cf-stats b { font-family: var(--px); font-size: 1rem; line-height: 1.1; }
.cf2 .gem, .cf2 .card-stars { display: none !important; }
.opt.card .key { bottom: auto !important; top: 30px; right: 6px !important; left: auto !important; transform: none !important; }
.opt.card:hover .card-face.cf2 { box-shadow: 0 6px 0 var(--fc-d), 0 0 0 3px color-mix(in srgb, var(--fc) 35%, transparent) !important; }
@media (max-width: 520px) {
  .cf2 .card-art { height: 66px !important; }
  .cf2 .card-text { font-size: .72rem !important; }
}
/* Auswahl in zwei Schritten (gegen Fehlklicks): erster Tipp markiert, zweiter nimmt */
.opt.card.armed .card-face, .opt.course-opt.armed { outline: 3px solid var(--hp); outline-offset: 2px; }
.opt.card.armed::after, .opt.course-opt.armed::after { content: '✓ Nochmal tippen'; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); z-index: 8;
  white-space: nowrap; font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--hp); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.opt.card, .opt.course-opt { position: relative; }
.slot-info .role-chip small { color: #fff !important; }

/* ---------- Training nach Level-up ---------- */
.train { margin-bottom: 14px; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, #fff6dc, #fdeec4); border: 2px solid #f2c94c;
  box-shadow: 0 3px 0 #e2b23a; animation: train-in .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes train-in { from { transform: translateY(-8px) scale(.98); opacity: 0; } }
.train-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.train-head > span:nth-child(2) { display: grid; }
.train-head small { color: var(--mute); }
.train-av svg { width: 36px; height: 42px; shape-rendering: crispEdges; animation: bob 1s steps(2) infinite; }
.train-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.train-opt { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px;
  border-radius: 12px; background: var(--panel); border: 2px solid var(--line); text-align: center; box-shadow: 0 2px 0 var(--line); }
.train-opt:hover { border-color: var(--gold); transform: translateY(-1px); }
.train-opt:active { transform: translateY(1px); box-shadow: none; }
.train-opt.rec { border-color: var(--hp); }
.train-opt i { font-style: normal; font-size: 1.3rem; }
.train-opt b { font-size: .78rem; }
.train-opt small { font-size: .7rem; color: var(--mute); }
.train-opt .tip-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); }
@media (max-width: 520px) { .train-opts { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Aufträge ---------- */
.quests { display: grid; gap: 8px; margin-top: 12px; }
.q-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.q-head b { font-family: var(--px); font-size: 1.1rem; }
.q-head small { color: var(--mute); font-size: .78rem; }
.quest { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.quest.done { border-color: var(--hp); background: color-mix(in srgb, var(--hp) 8%, var(--panel)); }
.q-ico { font-size: 1.4rem; text-align: center; }
.q-body { display: grid; gap: 4px; min-width: 0; }
.q-body > b { font-size: .86rem; }
.q-bar { position: relative; height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.q-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f2b632, #ffd76a); border-radius: 7px; transition: width .3s; }
.quest.done .q-bar i { background: linear-gradient(90deg, #4a9a4e, #7cc47a); }
.q-bar em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: .66rem; font-weight: 800; color: var(--ink); }
.q-rew { color: var(--mute); font-size: .72rem; display: flex; align-items: center; gap: 4px; }
.q-rew svg { width: 12px; height: 12px; }
.q-claim { margin: 0 !important; animation: ts-pulse 1.2s steps(2) infinite; }
.q-re { font-size: 1.2rem; text-decoration: none; padding: 4px; }
.btn.squad-match { width: 100%; text-align: center; margin: 12px 0 4px; font-size: 1.1rem; padding: 12px; }
.btn.squad-match small { font-size: .72rem; opacity: .8; margin-left: 6px; }

/* ---------- Abzeichen ---------- */
.badge-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; vertical-align: middle; position: relative; }
.badge-ico.big { width: 30px; height: 30px; }
.badge-svg { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.badge-prev { width: 44px; height: 44px; display: grid; place-items: center; }
.badge-prev .badge-svg { width: 40px; height: 40px; }
.cos.locked .badge-prev { filter: grayscale(1) opacity(.45); }
.lb-who b .badge-ico { margin-left: 2px; }
.float.lucky { color: #3a9a3a !important; font-size: 1.25rem !important; text-shadow: 0 0 6px #fff, 0 2px 0 rgba(0,0,0,.2) !important; }

/* =====================================================================
   UI-Durchgang: leichte Tiefe (Licht oben, Kante unten), ruhigere Farben
   ===================================================================== */
:root { --edge: #e2d3ae; --lift: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 var(--edge), 0 10px 22px rgba(80,55,25,.08); }
.stage { box-shadow: var(--lift) !important; border-color: var(--edge) !important; }
.quest, .hq-card, .art-card, .item-card, .my-card, .chapter-panel, .rank, .duel-box, .dev-box, .fuse-box, .vault-active, .sq-u, .sq-pick, .hq-item, .lb-row, .hq-stats div {
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 3px 0 var(--edge), 0 6px 14px rgba(80,55,25,.06) !important; }
.hq-sail.game { box-shadow: var(--lift) !important; border-color: var(--edge) !important; }
.sail-stage { box-shadow: 0 -18px 30px rgba(0,0,0,.08) inset, 0 2px 0 rgba(255,255,255,.6) inset; }

/* Knöpfe: Licht von oben, sichtbare Kante, beim Drücken sinken sie ein */
.btn { background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%) !important;
  box-shadow: 0 4px 0 var(--btnedge), 0 6px 12px rgba(60,35,10,.18) !important; transition: transform .08s ease, box-shadow .08s ease; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--btnedge), 0 2px 4px rgba(60,35,10,.15) !important; }
.btn.ghost { background-image: linear-gradient(180deg, #fff, var(--panel-2)) !important; box-shadow: 0 3px 0 var(--edge), 0 4px 10px rgba(80,55,25,.06) !important; }
.btn:disabled { opacity: .5; box-shadow: none !important; transform: none; }
.atab { box-shadow: 0 2px 0 var(--edge) !important; transition: transform .08s; }
.atab.on { box-shadow: 0 3px 0 var(--btnedge), 0 6px 12px rgba(60,35,10,.15) !important; transform: translateY(-1px); }
.atab:active { transform: translateY(2px); }

/* Karten: kippen beim Darüberfahren leicht in den Raum */
.cards { perspective: 900px; }
@media (hover: hover) {
  .opt.card:hover { transform: rotateX(6deg) translateY(-5px) !important; }
  .opt.course-opt:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(80,55,25,.12); }
}
.opt.card { transition: transform .18s ease; transform-origin: 50% 100%; }

/* Weniger Rot: Rollen neutral, nur das Symbol farbig; Vorteil/Nachteil dezent */
.role-chip { background: #efe4cc !important; color: #4a3a26 !important; border: 1px solid #dcc9a2; }
.role-chip small { color: #7c6b52 !important; border-left-color: #cdb88f !important; }
.rc-brecher { box-shadow: inset 3px 0 0 #4f86c6; }
.rc-kaempfer { box-shadow: inset 3px 0 0 #d0564a; }
.rc-helfer { box-shadow: inset 3px 0 0 #5bb36c; }
.slot-stats .role-chip { background: rgba(255,255,255,.1) !important; color: #f1eee8 !important; border-color: rgba(255,255,255,.18); }
.slot-stats .role-chip small, .slot-info .role-chip small { color: #c9ccd1 !important; border-left-color: rgba(255,255,255,.25) !important; }
.mu { font-size: .7rem !important; padding: 1px 6px !important; }
.mu.good { background: rgba(91,179,108,.2) !important; color: #9fe8a8 !important; }
.mu.bad { background: rgba(208,86,74,.2) !important; color: #ffb3a8 !important; }

/* Ruhigere Größen: Überschriften und Hinweise kompakter, besonders am Handy */
.stage h2 { font-size: 1.35rem; }
.stage .hint { font-size: .88rem; }
@media (max-width: 520px) {
  .stage { padding: 12px !important; }
  .stage h2 { font-size: 1.15rem; }
  .stage .hint { font-size: .82rem; line-height: 1.35; }
  .cards { gap: 10px; }
}
/* Tipp-Ziele groß genug am Handy, kein versehentliches Doppel-Zoomen */
button, .opt, .map-node, .lb-row { touch-action: manipulation; }
@media (max-width: 520px) { .btn.mini { min-height: 34px; } .link { padding: 4px 0; } }
/* Tooltips, die unter dem Element erscheinen (wenn darüber ein wichtiger Knopf liegt) */
.heat-pill[data-tip]::after, .sb-chip[data-tip]::after, .atsea[data-tip]::after { bottom: auto; top: calc(100% + 9px); }
.heat-pill[data-tip]::before, .sb-chip[data-tip]::before, .atsea[data-tip]::before { bottom: auto; top: calc(100% + 0px); border-top-color: transparent; border-bottom-color: #1b2230; }
/* Kopfgeld-Tooltip auf dem Handy nicht über den Rand hinaus */
@media (max-width: 640px) { .heat-pill[data-tip]::after { left: auto; right: 0; } }
@media (min-width: 760px) {
  .quests { grid-template-columns: repeat(3, 1fr); }
  .quests .q-head { grid-column: 1 / -1; }
  .quest { grid-template-columns: 28px 1fr auto; align-items: start; }
}
.cf2 .cf-stats small { display: block; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .75; line-height: 1; }
.cf2 .cf-stats span { padding: 3px 0 4px; }
.opt.card.armed::after, .opt.course-opt.armed::after { display: none; }
.login-code { width: 100%; margin-top: 4px; }
.login-code summary { cursor: pointer; font-size: .82rem; color: var(--mute); }

/* ---------- Crew-Liga ---------- */
.league-chip { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: .66rem; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  color: #fff; background: var(--lc, #8a7a66); box-shadow: 0 2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); white-space: nowrap; vertical-align: middle; }
.league-chip b { font-family: var(--px); font-size: .8rem; }
.lg-planke { --lc: #8a7a66; } .lg-bronze { --lc: #cf8446; } .lg-silber { --lc: #8f9aa8; } .lg-gold { --lc: #d99a1e; }
.lg-diamant { --lc: linear-gradient(90deg, #4fb6d8, #8ae0f0); background: linear-gradient(90deg, #3aa2c8, #6fd0e8); }
.lg-legende { background: linear-gradient(90deg, #8a4fd0, #d0508a, #e0a92a); background-size: 200% 100%; animation: tag-run 3s linear infinite; }
.sq-league { display: grid; justify-items: end; gap: 3px; }
.sq-league small { color: var(--mute); font-size: .7rem; }
.sq-mini { display: inline-flex; gap: 1px; vertical-align: middle; }
.sq-mini i svg { width: 18px; height: 21px; shape-rendering: crispEdges; display: block; }
.lb-crew { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.squad-locked { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 18px; }
.squad-locked .sl-art { filter: grayscale(1) opacity(.5); }
.squad-locked .sl-art .sq-mini i svg { width: 34px; height: 40px; }
.duel-rating { margin: 0; font-size: .9rem; font-weight: 700; }
/* Podest: stärkste Stammcrews */
.podium { margin: 10px 0 6px; }
.pod-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; }
.pod { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 6px 34px; border-radius: 14px 14px 8px 8px;
  background: var(--panel); border: 1px solid var(--edge, var(--line)); text-align: center; box-shadow: 0 1px 0 #fff inset, 0 4px 0 var(--edge, var(--line)); }
.pod b { font-size: .8rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .sq-mini i svg { width: 22px; height: 26px; }
.pod.p1 { padding-bottom: 54px; background: linear-gradient(180deg, #fff8e0, var(--panel)); border-color: #f2c94c; }
.pod.p1 .sq-mini i svg { width: 28px; height: 33px; }
.pod.p2 { padding-bottom: 40px; }
.pod-step { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-family: var(--px); font-weight: 700; font-size: 1.3rem; color: var(--mute); }
.pod.p1 .pod-step { color: #c08a2e; font-size: 1.7rem; }
.pod:hover { transform: translateY(-2px); }
.lb-who em.league-chip { background: var(--lc) !important; font-size: .62rem; padding: 2px 7px; vertical-align: 0; }
.lb-who em.league-chip.lg-diamant { background: linear-gradient(90deg, #3aa2c8, #6fd0e8) !important; }
.lb-who em.league-chip.lg-legende { background: linear-gradient(90deg, #8a4fd0, #d0508a, #e0a92a) !important; background-size: 200% 100% !important; }
.login-transfer { width: 100%; text-align: left; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--line); }
.login-transfer summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--mute); }
.login-transfer[open] { display: grid; gap: 8px; }
.login-transfer .btn { margin: 0; justify-self: start; }
.xfer-in, .xfer-out { width: 100%; min-height: 64px; font: .75rem/1.3 ui-monospace, monospace; padding: 8px; border-radius: 10px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); word-break: break-all; }
.login-err { width: 100%; margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--red) 12%, var(--panel)); color: #8a2a20; font-size: .88rem; text-align: left; }

/* ---------- Spielercode ---------- */
.code-box { margin-top: 12px; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #fff9ea, var(--panel)); border: 2px solid #f2c94c;
  box-shadow: 0 1px 0 #fff inset, 0 3px 0 #e2b23a; display: grid; gap: 8px; }
.cb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cb-warn { font-style: normal; font-size: .7rem; font-weight: 800; color: #a33a30; }
.cb-code { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: 12px;
  background: #2a2016; color: #ffe27a; font-family: ui-monospace, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; text-align: center; user-select: all; }
.cb-code small { font-family: var(--ui, "Nunito", sans-serif); font-size: .68rem; letter-spacing: 0; color: #c9b88f; font-weight: 600; }
.cb-code:not(.on) { letter-spacing: .2em; }
.cb-warn-txt { margin: 0; font-size: .78rem; color: #8a4a20; }
.cb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-actions .btn { margin: 0; }
.code-input.small { font-size: 1.05rem !important; letter-spacing: .12em !important; text-transform: uppercase; }
.login-or { width: 100%; display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: .78rem; margin: 6px 0 -4px; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.cb-code { white-space: nowrap; font-size: 1.1rem; }
.cb-code:not(.on) { letter-spacing: .02em !important; }
@media (max-width: 380px) { .cb-code { font-size: .95rem; letter-spacing: .06em; } }
.login-more { width: 100%; margin-top: 8px; text-align: left; }
.login-more > summary { cursor: pointer; text-align: center; font-size: .85rem; font-weight: 700; color: var(--mute); padding: 6px; list-style: none; }
.login-more > summary::after { content: ' ▾'; }
.login-more[open] > summary::after { content: ' ▴'; }
.login-more[open] { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.lm-lbl { font-size: .78rem; font-weight: 800; color: var(--mute); }
.login-more .login-transfer { margin-top: 2px; background: var(--panel); }
#code-in { text-align: center; }
/* Besondere Gegner */
.slot.foe.special { box-shadow: inset 3px 0 0 #c08a2a; }
.foe-tag { display: inline-block; align-self: flex-end; justify-self: end; width: max-content; margin-top: 3px; font-style: normal; font-size: .7rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #f3e3c3; color: #6b4a1a; }
.foe-tag.fk-sani { background: #fbe1e1; color: #9a2a2a; }
.foe-tag.fk-schild { background: #e2e8ef; color: #3a4a5a; }
.foe-tag.fk-schuetze { background: #e1eedf; color: #2d5a2d; }
.foe-tag.fk-gift { background: #ece1f5; color: #5a3a7a; }
.foe-tag.fk-kanonier { background: #e6e6e6; color: #222; }
.chip.duo { background: #fbe3ea; color: #8a2a4a; border-color: #f0c0d0; }
.tr-duo .tr-hex { background: #f7d3de; color: #a0305a; }
.tr-duo .tr-steps { color: #a0305a; font-weight: 700; }
/* Streamer-Modus */
.stream-tg { display: inline-flex; align-items: center; gap: 8px; margin: 6px auto 0; padding: 6px 10px 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--mute); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.stream-tg .st-sw { position: relative; width: 30px; height: 18px; border-radius: 999px; background: #d8cfbf; transition: background .2s; }
.stream-tg .st-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.stream-tg.on { color: #6a3fb0; border-color: #cbb6ec; background: #f3edfb; }
.stream-tg.on .st-sw { background: #8a5ad0; }
.stream-tg.on .st-sw::after { transform: translateX(12px); }
.redact { display: inline-block; padding: 0 6px; border-radius: 6px; background: #e8e1d4; color: #8a7d68; font-style: italic; font-weight: 600; }
.cb-code.locked { cursor: default; opacity: .85; }
body.streamer .acc-line b { filter: none; }
.ts-menu .stream-tg { display: flex; }
.cb-actions { align-items: center; } .cb-actions .stream-tg { margin: 0 0 0 auto; }
/* Insel-Einblendung: helle, gut lesbare Karte statt dunkler Schleier */
.scene { background: rgba(40, 30, 18, .28); backdrop-filter: blur(3px); }
.scene-card { background: #fffaf0; color: #3a2a18; border-radius: 22px; padding: 18px 26px 22px; margin: 16px;
  box-shadow: 0 2px 0 #e8d9bd, 0 18px 40px rgba(60, 40, 15, .28); border: 1px solid #eadcc2; animation: sheet-in .35s ease-out; }
.scene-card .event-kicker { color: #9a7a4a; }
.scene-card h2 { color: #2f5d7a; font-size: clamp(2.2rem, 8vw, 3.4rem); }
.scene-card p { color: #6b5a44; }
.scene-card .scene-stops { margin-top: 10px; font-size: .85rem; padding: 6px 12px; border-radius: 999px; background: #f3ead8; display: inline-block; }
.scene-card .scene-stops b { color: #a3402f; }
.scene.isl-paradies h2 { color: #b9862a; }
.scene.isl-enies-lobby h2 { color: #b23f33; }
.scene-wave { width: 72px; margin: -6px auto 2px; animation: ship-bob-s 2.4s ease-in-out infinite; }
.scene-wave svg { width: 100%; height: auto; }
@keyframes ship-bob-s { 50% { transform: translateY(-3px) rotate(-2deg); } }
/* Schrift: rund und ruhig statt Pixel-Fett */
:root { --px: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif; }
h1, h2, h3, .rank-name, .my-name, .duel-head b, .poster h3, .card-name, .tp-name,
.sp-text b, .stop-banner b, .scene-card h2, .lb-pos, .medal-num, .acard b, .rank-up b, .hq-sec h3 {
  font-family: var(--px) !important; font-weight: 600 !important; letter-spacing: -.005em !important;
}
.scene-card h2, .stop-banner b, .sp-text b { font-weight: 500 !important; }
.btn { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; letter-spacing: .005em; }
.log, .fnum, .f-round, .mn-label b, .battle3d .hud .f-name, .battle3d .hud .f-hp, .battle3d .hud .callout,
.gem, .card-rarity, .squad-power, .duel-verdict, .ult-call b { font-family: var(--px); font-weight: 500; }
.fnum { font-weight: 600; animation: px-num .8s ease-out forwards; }
.heat-num { font-family: var(--px); font-weight: 600; }
/* Buff-Leiste: Bonus-Text direkt in der Zeile statt abgeschnittenem Tooltip */
.traits { width: 250px; left: max(12px, calc(50% - 380px - 274px)); padding: 4px 6px 12px 2px; }
.traits [data-tip]::after, .traits [data-tip]::before { display: none !important; }
.tr { grid-template-columns: 34px 1fr auto; row-gap: 4px; }
.tr-text { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.35; color: var(--ink, #3a2a18); padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--panel-2, #f3ead8) 70%, transparent); }
.tr-text:empty { display: none; }
.tr-text em { display: block; font-style: normal; color: var(--mute, #8a7d68); margin-top: 2px; }
.tr-off .tr-text { background: transparent; padding: 0 2px; }
.tr-off .tr-text em { margin-top: 0; }
.tr:hover { transform: none; }
/* Haken: Auto-Training */
.auto-check { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: .82rem; font-weight: 700; color: var(--mute); }
.auto-check .ac-box { width: 18px; height: 18px; border-radius: 6px; border: 2px solid #c9b896; display: grid; place-items: center; font-style: normal; font-size: 12px; line-height: 1; color: #fff; background: #fff; transition: background .15s, border-color .15s; }
.auto-check.on { color: #2f6a3a; border-color: #b9dcbf; background: #eef8ef; }
.auto-check.on .ac-box { background: #3f9a52; border-color: #3f9a52; }
.auto-check.mini { padding: 3px 9px 3px 4px; font-size: .75rem; }
.auto-check.mini .ac-box { width: 15px; height: 15px; font-size: 10px; border-radius: 5px; }
.auto-check:focus-visible { outline: 2px solid var(--xp, #d9a63c); outline-offset: 2px; }
.train-auto-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.train-auto-row small { color: var(--mute); font-size: .78rem; }
.ult-call.spark small { color: #ffd34d; } .ult-call.spark b { text-shadow: 0 0 12px rgba(255,211,77,.8), 0 3px 0 rgba(0,0,0,.4); }
/* Freischaltungs-Pop-up: ruhig, hell, ein Bild, wenig Text */
.fpop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center; padding: 16px; background: rgba(60, 45, 25, 0); transition: background .25s ease; }
.fpop.in { background: rgba(60, 45, 25, .22); }
.fpop.out { background: rgba(60, 45, 25, 0); }
@media (min-width: 640px) { .fpop { place-items: center; } }
.fpop-card { width: min(380px, 100%); text-align: center; background: #fffaf0; color: #3a2a18; border: 1px solid #eadcc2; border-radius: 22px;
  padding: 18px 20px 16px; box-shadow: 0 2px 0 #e8d9bd, 0 18px 44px rgba(60, 40, 15, .22);
  transform: translateY(16px); opacity: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.fpop.in .fpop-card { transform: none; opacity: 1; }
.fpop.out .fpop-card { transform: translateY(10px); opacity: 0; }
.fpop-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b08a4a; }
.fpop-art { width: 84px; height: 84px; margin: 8px auto 6px; padding: 12px; border-radius: 20px; background: radial-gradient(circle at 50% 40%, #fdf3dc, #f3e6c8); box-shadow: inset 0 -3px 0 rgba(160, 120, 60, .12); }
.fpop-art svg { width: 100%; height: 100%; display: block; animation: fpop-bob 3s ease-in-out infinite; }
@keyframes fpop-bob { 50% { transform: translateY(-2px); } }
.fpop-card h3 { margin: 2px 0 6px; font-size: 1.35rem; color: #2f5d7a; }
.fpop-card > p { margin: 0 auto 10px; max-width: 30ch; font-size: .95rem; line-height: 1.4; color: #6b5a44; }
.fpop-steps { list-style: none; counter-reset: fs; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; text-align: left; }
.fpop-steps li { counter-increment: fs; display: flex; align-items: center; gap: 10px; font-size: .88rem; color: #4a3a28; padding: 7px 10px; border-radius: 12px; background: #f6eedd; }
.fpop-steps li::before { content: counter(fs); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; background: #c4904f; }
.fpop-btns { display: flex; gap: 8px; justify-content: center; }
.fpop-btns .btn { flex: 1; margin: 0; }
@media (prefers-reduced-motion: reduce) { .fpop-card, .fpop-art svg { transition: none; animation: none; } }
/* Nächste Freischaltung: dezente Zeile unter den Reitern */
.fnext { display: flex; align-items: center; gap: 10px; margin: 8px 2px 4px; padding: 6px 10px; border-radius: 12px; border: 1px dashed #dccaa6; color: var(--mute); }
.fnext-art { width: 26px; height: 26px; flex: none; opacity: .55; filter: grayscale(.6); }
.fnext-art svg { width: 100%; height: 100%; display: block; }
.fnext > span:nth-child(2) { display: grid; line-height: 1.15; }
.fnext small { font-size: .72rem; }
.fnext b { font-size: .88rem; color: var(--ink, #3a2a18); font-weight: 700; }
.fnext-bar { flex: 1; height: 6px; border-radius: 999px; background: #eee3cd; overflow: hidden; display: block; min-width: 50px; }
.fnext-bar > i { display: block; height: 100%; border-radius: inherit; background: #c4904f; }
.btn.locked { opacity: .6; }
.btn.locked small { font-weight: 600; }
.fpop-more { margin: -4px 0 12px; font-size: .82rem; color: #8a7a62; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.fpop-more span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: #f6eedd; color: #4a3a28; font-weight: 700; }
.fpop-more svg { width: 16px; height: 16px; }
/* Raid-Jagd und Vitrine */
.hunt-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.hunt-lbl { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-right: 2px; }
.hunt-chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: .8rem; font-weight: 700; color: var(--ink, #3a2a18); }
.hunt-chip svg, .hunt-chip img { width: 22px; height: 22px; }
.hunt-chip.on { border-color: #c4904f; background: #fbefd8; box-shadow: 0 0 0 2px rgba(196, 144, 79, .25); }
.hunt-chip.locked { cursor: default; opacity: .5; filter: grayscale(1); }
.vitrine { margin: 0 0 14px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #fbf3e2, #f4e8cf); border: 1px solid #e6d5b2; }
.vit-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vit-head b { font-size: 1rem; color: #4a3a28; }
.vit-head small { color: var(--mute); font-size: .78rem; }
.vit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.loot-card { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; text-align: center; gap: 2px; padding: 10px 8px; border-radius: 14px; background: #fffaf0; border: 1px solid #eadcc2; }
.loot-card .lc-art { width: 46px; height: 46px; }
.loot-card .lc-art svg { width: 100%; height: 100%; display: block; }
.loot-card b { font-size: .82rem; line-height: 1.2; color: #3a2a18; }
.loot-card small { font-size: .7rem; color: var(--mute); }
.loot-card em { font-style: normal; font-size: .72rem; font-weight: 800; color: #9a7a4a; margin-top: 2px; }
.loot-card.lr-2 { box-shadow: inset 0 -3px 0 #b48ad8; }
.loot-card.lr-3 { box-shadow: inset 0 -3px 0 #e2b44a; }
.loot-card.on { border-color: #c4904f; background: #fff3dc; }
.loot-card.on em { color: #3f8a52; }
.loot-card.empty { cursor: default; opacity: .55; }
.loot-card.empty .lc-art { filter: brightness(0) opacity(.25); }
.loot-chip { display: inline-grid; width: 18px; height: 18px; vertical-align: -3px; }
.loot-chip svg { width: 100%; height: 100%; }
.lb-show { display: inline-flex; gap: 2px; margin-left: 4px; }
.pcard-sec.showcase .vc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sc-item { display: grid; justify-items: center; gap: 2px; width: 74px; text-align: center; }
.sc-item svg { width: 40px; height: 40px; padding: 4px; border-radius: 12px; background: #fbf1dc; }
.sc-item.lr-3 svg { box-shadow: 0 0 0 2px #e2b44a; }
.sc-item.lr-2 svg { box-shadow: 0 0 0 2px #b48ad8; }
.sc-item small { font-size: .68rem; line-height: 1.2; }
.hunt-row { flex-direction: row !important; } .hunt-row .hunt-chip { width: auto !important; flex: none !important; margin: 0 !important; } .hunt-row .hunt-lbl { width: 100%; }
.hq-sail div.hunt-row { display: flex !important; flex-wrap: wrap; }
.fight-ctrl { display: flex; gap: 8px; margin-top: 10px; }
.fight-ctrl .btn { flex: 1; margin: 0; padding: 9px 10px; font-size: .92rem; }
.callout.on-field { top: -18px; z-index: 30; font-size: .72rem; }
#sandbox-bar { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 999px; background: #3a2f5a; color: #fff; font-size: .8rem; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.25); white-space: nowrap; }
#sandbox-bar .link { color: #ffe08a; background: rgba(255,255,255,.12); padding: 4px 10px; border-radius: 999px; text-decoration: none; }
.admin-ico { font-size: 1.6rem; width: 44px; text-align: center; }
.mail-reveal { font-weight: 700; }
.mail-reveal small { font-weight: 600; opacity: .7; margin-left: 4px; }
.slots-box { display: grid; gap: 6px; margin: 12px 0; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.slots-box > small { color: var(--mute); font-size: .78rem; margin-top: -4px; }
.slot-row { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: var(--panel-2, #f6eedd); }
.slot-row.on { box-shadow: inset 0 0 0 2px #c4904f; background: #fff3dc; }
.sr-av { width: 40px; height: 40px; display: grid; place-items: center; }
.sr-av svg, .sr-av img { width: 34px; height: 34px; }
.sr-empty { font-style: normal; font-size: 1.2rem; color: var(--mute); width: 32px; height: 32px; border-radius: 10px; border: 2px dashed #d8c7a6; display: grid; place-items: center; }
.sr-txt { display: grid; line-height: 1.2; min-width: 0; }
.sr-txt b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-txt small { color: var(--mute); font-size: .74rem; }
.sr-cur { font-style: normal; font-size: .74rem; font-weight: 800; color: #3f8a52; grid-column: span 2; justify-self: end; }
.slot-row .btn.mini { margin: 0; }
.hunt-info { margin: 6px 0 2px; padding: 8px 10px; border-radius: 12px; background: #fbf3e2; font-size: .8rem; line-height: 1.35; color: #5a4a36; display: grid; gap: 4px; }
.hunt-info.muted { background: transparent; padding: 2px 2px 0; color: var(--mute); }
.hq-sail div.hunt-info { display: grid !important; }
.hunt-info b { font-size: .85rem; color: #3a2a18; }
.hi-loot { display: flex; gap: 10px; flex-wrap: wrap; }
.hi-item { display: inline-flex; align-items: center; gap: 6px; }
.hi-item svg { width: 30px; height: 30px; padding: 3px; border-radius: 9px; background: #fffaf0; }
.hi-item:not(.got) svg { filter: brightness(0) opacity(.25); }
.hi-item.lr-3 svg { box-shadow: 0 0 0 2px #e2b44a; }
.hi-item.lr-2 svg { box-shadow: 0 0 0 2px #b48ad8; }
.hi-item small { font-size: .74rem; line-height: 1.2; font-weight: 700; }
.hi-item em { font-style: normal; font-weight: 600; color: var(--mute); }
/* Vollbild / App-Modus */
.ts-small { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.ts-small .stream-tg { margin: 0; }
.ts-fs { font-weight: 700; }
.ts-fs-tip { color: var(--mute); font-size: .75rem; }
.fs-btn { font-size: 1.05rem; line-height: 1; }
body.is-app { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
/* ---------- Handy: mehr Platz für das Spiel ---------- */
.opt.card.is-tip > .tip-badge { left: auto; right: 8px; transform: translateZ(30px); top: -10px; }
.tip-badge { font-family: "Nunito", system-ui, sans-serif !important; font-weight: 800; letter-spacing: .03em; }
@media (max-width: 520px) {
  main { padding-left: 12px; padding-right: 12px; }
  body.in-run header { margin-bottom: 8px; gap: 6px; }
  body.in-run header h1 { display: none; }
  body.in-run .head-right { width: 100%; }
  body.in-run .track { gap: 3px; row-gap: 6px; }
  body.in-run .track i { width: 9px; height: 5px; border-radius: 3px; }
  body.in-run .track i.boss { height: 7px; }
  body.in-run .track i.sea { height: 9px; }
  body.in-run .track-loc { width: 100%; font-size: .95rem; margin-top: 2px; }
  body.in-run .head-chips em { font-size: .9rem; padding: 2px 9px; }
  body.in-run .head-actions { justify-content: flex-start; gap: 4px 14px; font-size: .84rem; margin-top: 2px; }
  .mn-label { max-width: 66px; }
  .mn-label b { font-size: 11px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card-name { font-size: .98rem !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15; }
  .opt.card { min-height: 0; }
  .stage { padding: 14px; }
  .ts-row .btn, .ts-menu > .btn.ghost { padding-top: 10px; padding-bottom: 10px; }
}
.ac-short { display: none; }
@media (max-width: 520px) {
  body.in-run .head-actions [data-act="intro-open"], body.in-run .head-actions [data-act="album"], body.in-run .head-actions #notes-btn { display: none; }
  body.in-run .track-loc { width: auto; flex: 1 1 auto; }
  .crew-label { flex-wrap: nowrap !important; gap: 8px !important; }
  .crew-label .auto-check.mini .ac-long { display: none; }
  .crew-label .auto-check.mini .ac-short { display: inline; }
  .crew-label .charge-wrap { font-size: .85rem; }
}
.co-routechip { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6a4a8a; background: #efe6f8; padding: 2px 9px; border-radius: 999px; margin-bottom: 4px; }
.daily-card { display: grid !important; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 8px 10px; border-radius: 14px; border: 1px solid #e6d5b2; background: #fbf3e2; }
.daily-card.done { opacity: .8; }
.dc-ico svg { width: 30px; height: 30px; display: block; }
.dc-txt { display: grid !important; line-height: 1.25; }
.dc-txt b { font-size: .92rem; }
.dc-txt small { color: var(--mute); font-size: .76rem; }
.daily-card .btn.mini { margin: 0; }
.dc-done { font-style: normal; font-weight: 800; color: #3f8a52; padding: 0 6px; }
.dc-streak { font-style: normal; font-size: .7rem; font-weight: 800; color: #b0743f; background: #f6e3c4; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.dl-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; }
.dl-team { display: inline-flex; gap: 2px; }
.dl-team i { position: relative; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: rgba(0,0,0,.04); }
.dl-team i svg, .dl-team i img { width: 20px; height: 20px; }
.dl-team i b { position: absolute; right: -2px; bottom: -3px; font-size: .55rem; font-weight: 800; color: #fff; background: #8a7a66; border-radius: 4px; padding: 0 2px; line-height: 1.2; }
.dl-line small { color: var(--mute); font-size: .74rem; }
.day-tabs { align-items: center; }
.day-tabs small { flex-basis: 100%; font-size: .75rem; margin-top: 2px; }
/* Duell-Code-Feld darf die Seite nicht verbreitern */
.duel-actions { flex-wrap: wrap; min-width: 0; }
.duel-join { display: flex; gap: 6px; min-width: 0; flex: 1 1 220px; }
.duel-join input { min-width: 0; flex: 1 1 auto; width: 100%; }
.duel-join .btn { flex: none; margin: 0; }
.hq-sec, .leaderboard, .duel-box { min-width: 0; max-width: 100%; }
/* Feedback-Sterne */
.fb-card h3 { margin-bottom: 10px; }
.fb-stars { display: flex; justify-content: center; gap: 6px; margin: 4px 0 12px; }
.fb-star { all: unset; cursor: pointer; font-size: 2.1rem; line-height: 1; color: #e2d6bf; transition: transform .12s, color .12s; padding: 2px; }
.fb-star.on { color: #e2b44a; }
.fb-star:hover { transform: scale(1.12); }
.fb-star:focus-visible { outline: 2px solid #c4904f; border-radius: 8px; }
.fb-card textarea { width: 100%; box-sizing: border-box; resize: none; border-radius: 12px; border: 1px solid #e3d3b4; background: #fffdf8; padding: 8px 10px; font: inherit; font-size: .9rem; margin-bottom: 12px; }
.fb-note { display: block; margin-top: 8px; color: var(--mute); font-size: .74rem; }
.fb-link { text-align: center; font-size: .85rem; margin: 6px 0 12px; color: var(--mute); }
.on-dot { display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: #3fb45a; box-shadow: 0 0 0 2px rgba(63,180,90,.2); vertical-align: middle; }
.lb-more { display: inline-block; } .lb-more[open] { display: block; width: 100%; }
.lb-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--line); font-size: .85rem; font-weight: 700; color: var(--mute); }
.lb-more > summary::after { content: ' ▾'; }
.lb-more[open] > summary::after { content: ' ▴'; }
.lb-more > .lb-cats { flex-basis: 100%; margin-top: 2px; }
/* App-Hinweis */
.ip-phone { width: 64px; height: 104px; margin: 8px auto 8px; border-radius: 14px; border: 3px solid #4a3a2c; background: #f3e3c3; display: grid; place-items: center; animation: ip-nudge 2.6s ease-in-out infinite; box-shadow: 0 6px 14px rgba(60, 40, 15, .18); }
.ip-screen img { width: 40px; height: 40px; border-radius: 10px; display: block; image-rendering: pixelated; }
@keyframes ip-nudge { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 78% { transform: translateY(-6px) rotate(-4deg); } 86% { transform: translateY(0) rotate(3deg); } 92% { transform: rotate(-1deg); } }
.ip-share { width: 18px; height: 18px; vertical-align: -4px; color: #2f6a9a; animation: ip-bob 1.4s ease-in-out infinite; }
@keyframes ip-bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ip-phone, .ip-share { animation: none; } }

/* Handy: wie eine App nur hoch und runter, nichts seitlich verrutschen */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
button, .btn, a, [data-act] { touch-action: manipulation; }
body.is-app { overscroll-behavior-y: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body.is-app input, body.is-app textarea { -webkit-user-select: text; user-select: text; }
/* ---------- Kampffeld: Tiefe mit Liebe (klein, clean, cozy) ---------- */
.field { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 30px rgba(60,40,15,.18); }
.f-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.25)); }
.f-sun { box-shadow: 0 0 40px 10px rgba(255,236,170,.35); }
/* Figuren: atmen versetzt, leichter Squash, Rim-Light von der Sonne */
.fu-body svg { animation: fu-breathe 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.22)) drop-shadow(-1px -1px 0 rgba(255,245,210,.35)); }
.fu-enemy .fu-body svg { animation-name: fu-breathe-m; filter: drop-shadow(0 4px 0 rgba(0,0,0,.22)) drop-shadow(1px -1px 0 rgba(255,245,210,.25)) saturate(.95); }
@keyframes fu-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985) translateY(1px); } }
@keyframes fu-breathe-m { 0%, 100% { transform: scaleX(-1); } 50% { transform: scale(-1.015, .985) translateY(1px); } }
.fu-shadow { width: 64px; height: 12px; bottom: -3px; background: radial-gradient(ellipse, rgba(40,25,10,.45), rgba(40,25,10,.15) 55%, transparent 72%); animation: fu-shadow 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes fu-shadow { 50% { transform: scaleX(1.04); opacity: .9; } }
.fu.boss .fu-body svg { filter: drop-shadow(0 5px 0 rgba(0,0,0,.28)) drop-shadow(0 0 12px rgba(208,86,74,.55)); }
.fu.mini .fu-body svg { filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)) drop-shadow(0 0 10px rgba(217,166,60,.6)); }
/* Volle Crew: etwas kleiner, damit niemand verdeckt wird */
.field.busy .fu { --k: .9; } .field.crowd .fu { --k: .82; }
.field.busy .fu, .field.crowd .fu { transform: translateX(-50%) scale(calc(var(--s, 1) * var(--k, 1))); }
/* Plattformen als sanfte Lichtinseln */
.plat::before { background: radial-gradient(ellipse at 50% 40%, rgba(255,250,230,.55), rgba(255,240,200,.22) 50%, transparent 72%); box-shadow: none; }
.field.isl-paradies .plat::before { background: radial-gradient(ellipse at 50% 40%, rgba(255,245,215,.6), rgba(230,180,110,.25) 50%, transparent 72%); }
.field.isl-enies-lobby .plat::before, .field.raid .plat::before { background: radial-gradient(ellipse at 50% 40%, rgba(200,215,255,.3), rgba(120,130,180,.15) 50%, transparent 72%); box-shadow: none; }
.plat i { border-style: solid; border-color: rgba(255,255,255,.18); animation: none; inset: 24% 16%; }
.plat-crew { left: 1%; width: 56%; bottom: 1%; height: 30%; }
.plat-enemy { left: 56%; width: 42%; bottom: 40%; height: 20%; }
/* Staub/Glitzer in der Luft, ganz langsam */
.f-dust { position: absolute; inset: 0; pointer-events: none; z-index: 150; opacity: .7;
  background: radial-gradient(circle 1.5px at 12% 30%, rgba(255,255,255,.9) 99%, transparent), radial-gradient(circle 1px at 30% 60%, rgba(255,255,255,.8) 99%, transparent),
    radial-gradient(circle 1.5px at 55% 25%, rgba(255,255,255,.7) 99%, transparent), radial-gradient(circle 1px at 72% 70%, rgba(255,255,255,.8) 99%, transparent),
    radial-gradient(circle 1.5px at 88% 35%, rgba(255,255,255,.7) 99%, transparent), radial-gradient(circle 1px at 44% 82%, rgba(255,255,255,.6) 99%, transparent);
  animation: f-dust 14s ease-in-out infinite alternate; }
@keyframes f-dust { to { transform: translate(8px, -14px); opacity: .35; } }
.field.isl-enies-lobby .f-dust, .field.raid .f-dust { opacity: .5; }
/* Ulti: kurzer Spotlight-Moment */
.f-spot { position: absolute; inset: 0; pointer-events: none; z-index: 400; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle 90px at var(--x, 50%) var(--y, 50%), transparent 0 55%, rgba(20,12,30,.55) 100%); }
.field.ulting .f-spot { opacity: 1; animation: spot-in .9s ease-out; }
@keyframes spot-in { 0% { opacity: 0; } 20% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.fu.ult-star { z-index: 410 !important; }
.fu.ult-star .fu-body svg { filter: drop-shadow(0 0 14px rgba(255,220,120,.9)) drop-shadow(0 4px 0 rgba(0,0,0,.3)) brightness(1.15); }
/* Treffer: Einknicken + kleiner Ruck */
@keyframes fu-hurt { 20% { transform: translateX(calc(-50% + 7px)) scale(var(--s)) scaleY(.94) rotate(3deg); } 55% { transform: translateX(calc(-50% - 4px)) scale(var(--s)) scaleY(1.02); } }
.fnum { font-family: var(--px) !important; font-weight: 600 !important; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 6px rgba(255,255,255,.4); }
/* Boss-Schild beim Einlauf */
.field.bossfight.enter::after, .field.raid.enter::after { content: attr(data-boss); position: absolute; left: 50%; top: 10%; transform: translateX(-50%); z-index: 430;
  padding: 6px 16px; border-radius: 999px; background: rgba(30,18,10,.78); color: #f6dc8a; font: 600 .95rem/1.2 var(--px); letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); animation: boss-plate 2.4s ease-out forwards; }
@keyframes boss-plate { 0% { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } }
@media (max-width: 520px) { .f-spot { background: radial-gradient(circle 64px at var(--x, 50%) var(--y, 50%), transparent 0 55%, rgba(20,12,30,.55) 100%); } }
.plat { background: none !important; box-shadow: none !important; }
.plat::before { box-shadow: 0 6px 14px rgba(60,40,15,.12) !important; }
.field.isl-east-blue .plat::before, .field:not([class*=" isl-"]) .plat::before { background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.5), rgba(220,245,255,.2) 50%, transparent 72%); }
/* ---------- UI-Abrundung: dieselbe Tiefe wie im Kampf, ruhig und cozy ---------- */
:root { --shadow-soft: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(60,40,15,.06), 0 8px 20px -10px rgba(60,40,15,.25); --shadow-pop: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 26px -12px rgba(60,40,15,.35); }
.stage, .hq-sec, .my-card, .daily-card, .vitrine, .slots-box, .code-box, .danger-zone, .chapter-panel, .dev-box, .train, .duel-box, .quest, .syn, .hq-sail, .opt.card, .course-opt {
  box-shadow: var(--shadow-soft) !important; border-color: #eadcc2 !important; }
.stage { border-width: 1px !important; border-radius: 18px !important; background: linear-gradient(180deg, #fffdf8, #fff9ee) !important; }
.hq-sec { border-radius: 16px; }
/* Knöpfe: sanfte Wölbung, warmes Holz, Licht oben */
.btn { border-radius: 12px; border-width: 1px; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 3px 0 var(--btnedge), 0 8px 16px -8px rgba(60,40,15,.35); transition: transform .08s, box-shadow .08s; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 1px 0 var(--btnedge); }
.btn.ghost { background: linear-gradient(180deg, #fffdf8, #f7efe0); }
.btn.sail { border-radius: 16px; font-size: 1.2rem; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 0 var(--btnedge), 0 14px 24px -10px rgba(60,40,15,.45); }
/* Reiter: Pillen mit weicher Tiefe */
.atab { border-radius: 999px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 2px 6px -2px rgba(60,40,15,.15); }
.atab.on { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 3px 0 var(--btnedge); }
/* Rangliste: Zeilen wie kleine Karten, Podium mit warmem Schimmer */
.lb-row { border-radius: 14px; box-shadow: var(--shadow-soft); border: 1px solid #eadcc2; margin-bottom: 6px; transition: transform .12s, box-shadow .12s; }
.lb-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.lb-row.top1 { background: linear-gradient(135deg, #fff6d6, #fdebb8) !important; border-color: #ecd59a !important; }
.lb-row.top2 { background: linear-gradient(135deg, #f7f7f9, #e9ebf0) !important; border-color: #d5d9e0 !important; }
.lb-row.top3 { background: linear-gradient(135deg, #f8e9dc, #efd6c2) !important; border-color: #e2c3a6 !important; }
.lb-pos { font-weight: 600 !important; }
.lb-cap svg, .lb-cap img { filter: drop-shadow(0 2px 0 rgba(0,0,0,.18)); }
/* Visitenkarte: Portrait mit Tiefe, Werte als ruhige Kacheln */
.pcard { border-radius: 20px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 24px 50px -20px rgba(60,40,15,.5); }
.pcard-cap svg, .pcard-cap img, .my-cap svg, .my-cap img { filter: drop-shadow(0 4px 0 rgba(0,0,0,.2)); }
.pcard-stats > div, .my-stats > div { border-radius: 12px; background: linear-gradient(180deg, #fffdf8, #f6eedd); box-shadow: var(--shadow-soft); border: 1px solid #eadcc2; }
/* Figuren überall: leichter Bodenschatten */
.crewmini svg, .member svg, .slot-sprite svg, .sq-u svg, .portrait svg, .train-av svg, .co-sprite svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,.16)); }
/* Chips und Pillen: weniger Kontrast, mehr Ruhe */
.chip, .mu, .ss, .role-chip, .foe-tag { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }
/* Ablegen-Karte: Szene mit Rahmen wie ein Bild */
.sail-stage { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 8px 18px -8px rgba(40,60,90,.35); }
/* Freischaltungs-Pop-up und Toasts: gleiche Tiefe */
.fpop-card, .toast { box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 20px 44px -16px rgba(60,40,15,.45) !important; }
/* Fokus sichtbar, aber warm */
:focus-visible { outline: 2px solid #c4904f; outline-offset: 2px; border-radius: 8px; }
/* ---------- Figurenkarten: ruhig, warm, wenig Text ---------- */
.card-face.cf2 { --fc: #c9b08a; --fc-d: #a88e68; border-radius: 16px !important; border: 1px solid #eadcc2 !important; background: linear-gradient(180deg, #fffdf8, #fbf4e6) !important; box-shadow: var(--shadow-soft) !important; overflow: hidden; }
/* Banden-Farben: gedämpft statt knallig */
.cf2.fac-strohhut { --fc: #d98a72; --fc-d: #b86c56; } .cf2.fac-marine { --fc: #7fa3c9; --fc-d: #5f84aa; } .cf2.fac-cp9 { --fc: #8f8a9c; --fc-d: #6f6a7c; }
.cf2.fac-baroque { --fc: #c9a35c; --fc-d: #a8863f; } .cf2.fac-weissbart { --fc: #a7b3b8; --fc-d: #86949a; } .cf2.fac-samurai { --fc: #9f8fbf; --fc-d: #7f6f9f; } .cf2.fac-none { --fc: #c9b08a; --fc-d: #a88e68; }
.cf2 .cf-band { background: var(--fc) !important; color: #fff !important; font-size: .66rem !important; letter-spacing: .08em; padding: 4px 10px !important; text-shadow: 0 1px 0 rgba(0,0,0,.15); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset; }
.cf2 .card-art { background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--fc) 22%, #fff) , color-mix(in srgb, var(--fc) 8%, #fff) 70%) !important; border: 0 !important; border-radius: 12px !important; margin: 8px 8px 0 !important; box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--fc) 30%, transparent) !important; }
.cf2 .card-art svg { filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.cf2 .card-name { background: none !important; box-shadow: none !important; color: #3a2a18 !important; font-size: 1.05rem !important; margin: 6px 0 0 !important; }
.cf2 .cf-tags { gap: 4px; margin-top: 2px; }
.cf2 .cf-tags .badge, .cf2 .cf-tags .role-chip { font-size: .66rem; padding: 1px 7px; opacity: .92; }
.cf2 .card-text { background: none !important; border: 0 !important; box-shadow: none !important; padding: 6px 10px 2px !important; margin: 0 !important; display: grid; gap: 4px; text-align: left; }
.cf2 .cf-line { display: grid; line-height: 1.2; font-size: .78rem; color: #6b5a44; }
.cf2 .cf-line b { font-size: .8rem; color: #3a2a18; font-weight: 800; }
.cf2 .cf-line i { font-style: normal; }
.cf2 .cf-ult { display: inline-block; margin: 4px 10px 0; font-size: .74rem; font-weight: 800; color: #8a5a1a; background: #fbefd8; padding: 2px 8px; border-radius: 999px; }
/* Werte: eine ruhige Leiste statt drei bunter Kästen */
.cf2 .cf-stats { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 !important; margin: 8px 8px 8px !important; padding: 4px 0 !important; border-radius: 10px !important; background: #f6eedd !important; border: 0 !important; }
.cf2 .cf-stats > span { background: none !important; border: 0 !important; box-shadow: none !important; display: grid; justify-items: center; line-height: 1.1; }
.cf2 .cf-stats > span + span { border-left: 1px solid #eadcc2 !important; }
.cf2 .cf-stats small { font-size: .6rem !important; letter-spacing: .06em; color: #8a7a62 !important; font-weight: 800; text-transform: uppercase; }
.cf2 .cf-stats b { font-size: 1.05rem !important; color: #3a2a18 !important; font-weight: 700; }
/* Handy: Karten kompakter, kein Endlos-Scrollen in der Taverne */
@media (max-width: 520px) {
  .cards { gap: 8px; }
  .cf2 .card-art { margin: 6px 6px 0 !important; }
  .cf2 .card-art svg { width: 44px !important; height: 52px !important; }
  .cf2 .card-name { font-size: .95rem !important; }
  .cf2 .card-text { padding: 4px 8px 0 !important; gap: 2px; }
  .cf2 .cf-line { font-size: .72rem; }
  .cf2 .cf-line b { font-size: .74rem; }
  .cf2 .card-trait { display: none; }   /* Eigenschaft steht im Steckbrief */
  .cf2 .cf-stats { margin: 6px 6px 6px !important; }
  .cf2 .cf-stats b { font-size: .95rem !important; }
  .opt.card .gain { font-size: .7rem; }
  .stage > .hint { font-size: .85rem; }
}
.card-face.cf2[class*="fac-"] .cf-band { background: var(--fc) !important; border: 0 !important; }
.card-face.cf2 .cf-band .stars, .card-face.cf2 .cf-band i { opacity: .95; }
/* Kampfstil-Chips gedämpft (überall auf Karten) */
.cf2 .badge.t-kraft, .cf2 .badge.kraft, .cf2 .badge[class*="kraft"] { background: #d98a72 !important; color: #fff !important; }
.cf2 .badge.t-klinge, .cf2 .badge.klinge, .cf2 .badge[class*="klinge"] { background: #7fa98a !important; color: #fff !important; }
.cf2 .badge.t-technik, .cf2 .badge.technik, .cf2 .badge[class*="technik"] { background: #7fa3c9 !important; color: #fff !important; }
.cf2 .cf-ult { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 20px); justify-self: center; }
.card-face.cf2 { display: grid; }
/* Kampfstil-Chips überall gedämpft */
em.type.t-kraft { background: #d98a72 !important; color: #fff !important; }
em.type.t-klinge { background: #7fa98a !important; color: #fff !important; }
em.type.t-technik { background: #7fa3c9 !important; color: #fff !important; }
/* ---------- Einhand-Bedienung: Hauptknopf immer unten im Daumenbereich ---------- */
.dock { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; margin-top: 12px; padding: 8px; border-radius: 16px;
  background: rgba(255, 250, 240, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 24px -10px rgba(60,40,15,.35); display: flex; gap: 8px; }
.dock > .btn, .dock .fight-ctrl > .btn { flex: 1; margin: 0 !important; min-height: 48px; }
.dock .fight-ctrl { display: flex; gap: 8px; flex: 1; margin: 0; }
.dock.end-actions { flex-wrap: wrap; }
/* Touch: keine Tastatur-Hinweise */
@media (pointer: coarse) { kbd.key, kbd.key.inline { display: none !important; } }
/* ---------- Meldungen dezenter ---------- */
.toast { padding: 7px 12px; font-size: .84rem; grid-template-columns: 30px 1fr; gap: 8px; border-radius: 14px;
  background: rgba(255, 252, 245, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid #eadcc2 !important; box-shadow: 0 8px 22px -12px rgba(60,40,15,.4) !important; }
.toast span { font-size: .84rem; line-height: 1.3; }
.toast b { font-weight: 800; }
.toast i svg { width: 26px; height: 30px; } .toast i .icon { width: 24px; height: 24px; }
.toasts { width: min(360px, calc(100% - 24px)); gap: 6px; }
/* Große Funde: kompakt oben statt mittig über allem, kein Abdunkeln */
.bounty-pop, .trophy-pop { inset: auto !important; top: calc(10px + env(safe-area-inset-top)) !important; left: 50% !important; transform: translateX(-50%); background: none !important; display: block !important; }
.bp-poster, .tp-card { pointer-events: auto !important; cursor: pointer; }
.bp-poster { transform-origin: 50% 0; scale: .62; margin-bottom: -40%; box-shadow: 0 16px 34px -14px rgba(40,25,10,.55) !important; }
.tp-card { transform-origin: 50% 0; scale: .78; width: min(280px, 82vw) !important; padding: 14px 16px 12px !important; box-shadow: 0 18px 40px -16px rgba(30,15,60,.6) !important; }
.tp-card small { display: none; }
.dock .btn { justify-content: center; text-align: center; display: inline-flex; align-items: center; gap: 8px; }
/* Rangliste: Reise statt Zahlenwust */
.lb-journey { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.jdots { display: inline-flex; gap: 3px; flex: none; }
.jd { width: 14px; height: 6px; border-radius: 3px; background: #e8dcc4; display: block; }
.jd.seen { background: #c9a35c; opacity: .55; }
.jd.done { background: #c4904f; }
.lb-journey small { color: var(--mute); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-journey small.live { color: #2f7a46; font-weight: 700; }
.lb-who > b { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lb-who > small { display: none; }
/* Neuigkeiten */
.notes-card { max-height: min(78vh, 620px); display: grid; grid-template-rows: auto auto 1fr auto; }
.notes-list { overflow-y: auto; text-align: left; display: grid; gap: 10px; margin: 4px 0 12px; padding-right: 2px; }
.notes-list section { background: #f6eedd; border-radius: 12px; padding: 8px 12px; }
.notes-list b { font-size: .92rem; color: #3a2a18; }
.notes-list small { float: right; color: var(--mute); font-size: .74rem; }
.notes-list ul { margin: 6px 0 2px; padding-left: 18px; font-size: .84rem; color: #5a4a36; line-height: 1.35; }
.new-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d9774f; vertical-align: 2px; margin-left: 3px; }
.ts-notes { font-weight: 700; }
.lb-journey { flex-wrap: wrap; row-gap: 2px; align-items: center; }
.lb-journey small { white-space: normal; overflow: visible; line-height: 1.25; flex: 1 1 140px; min-width: 0; }
@media (max-width: 560px) {
  .lb-row { grid-template-columns: 26px 40px 1fr auto !important; column-gap: 8px; }
  .lb-cap .portrait.sm { width: 38px; height: 38px; }
}
.dp-code { display: grid; justify-items: center; gap: 0; margin: 4px auto 12px; padding: 8px 18px; border-radius: 14px; background: #f6eedd; width: max-content; }
.dp-code small { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9a7a4a; }
.dp-code b { font-size: 1.6rem; letter-spacing: .12em; color: #3a2a18; font-family: var(--px); }
button.duel-chip { all: unset; cursor: pointer; font-size: .8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #efe6f8; color: #6a4a8a; }
.endless-box { display: grid; gap: 4px; margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #fff6d6, #f6e3c4); border: 1px solid #ecd59a; }
.endless-box b { font-size: 1rem; color: #3a2a18; }
.endless-box span:last-child { font-size: .85rem; color: #6b5a44; }
.endless-chip { background: #fbe9c8 !important; color: #8a5a1a !important; }
/* ---------- Figurenkarten v4: echte Sammelkarten, warm und mit Liebe ---------- */
.card-face.cf3 { --fc: #c9b08a; --fc2: #e8d5b0; position: relative; display: flex !important; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0 !important; min-height: 0 !important; overflow: hidden; border-radius: 18px !important; text-align: center;
  background: linear-gradient(180deg, #fffdf8 0%, #fbf3e3 100%) !important; border: 1px solid color-mix(in srgb, var(--fc) 40%, #eadcc2) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 22px -12px rgba(60,40,15,.4) !important; }
.cf3.fac-strohhut { --fc: #e0977c; --fc2: #f7d9c8; } .cf3.fac-marine { --fc: #86aed3; --fc2: #d8e7f4; } .cf3.fac-cp9 { --fc: #9a93ab; --fc2: #e2deea; }
.cf3.fac-baroque { --fc: #d3ad66; --fc2: #f3e3bf; } .cf3.fac-weissbart { --fc: #a9a3cc; --fc2: #e4e1f2; } .cf3.fac-samurai { --fc: #84b8b8; --fc2: #d7ebea; } .cf3.fac-none { --fc: #c9b08a; --fc2: #efe2c6; }
/* Bildbereich: weicher Himmel in Bandenfarbe, feines Muster, Licht von oben */
.c3-top { position: relative; height: 128px; display: block;
  background: radial-gradient(ellipse 80% 60% at 50% 18%, rgba(255,255,255,.75), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 6px, transparent 6px 14px),
    linear-gradient(180deg, var(--fc2) 0%, color-mix(in srgb, var(--fc) 70%, var(--fc2)) 100%); }
.c3-head { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; z-index: 2; }
.c3-fac { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: color-mix(in srgb, var(--fc) 85%, #000 8%); padding: 2px 8px; border-radius: 999px; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset; }
.c3-head .stars { font-size: .78rem; color: #f6c94a; text-shadow: 0 1px 0 rgba(120,80,20,.35); }
.c3-head .stars i { color: rgba(255,255,255,.55); font-style: normal; }
.c3-ped { position: absolute; left: 50%; bottom: 10px; width: 92px; height: 22px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.75), rgba(255,255,255,.25) 55%, transparent 72%); box-shadow: 0 6px 10px -6px rgba(60,40,15,.45); }
.c3-sprite { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1; }
.c3-sprite svg { width: 66px; height: 77px; display: block; shape-rendering: crispEdges; filter: drop-shadow(0 4px 0 rgba(60,40,15,.22)); }
.opt.card:hover .c3-sprite svg { animation: fu-breathe 1.6s ease-in-out infinite; }
.c3-lv { position: absolute; left: 8px; bottom: 8px; z-index: 2; font-style: normal; font-size: .62rem; font-weight: 800; color: #fff; background: rgba(40,28,18,.55); padding: 1px 6px; border-radius: 999px; }
.c3-name { display: block; margin: 8px 8px 0; font-family: var(--px); font-weight: 600; font-size: 1.12rem; color: #3a2a18; line-height: 1.1; }
.c3-sub { display: inline-flex; justify-content: center; align-items: center; gap: 5px; margin-top: 2px; font-size: .72rem; font-weight: 700; color: #8a7a62; }
.c3-sub span { opacity: .5; }
.c3-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.c3-dot.t-kraft { background: #d98a72; } .c3-dot.t-klinge { background: #7fa98a; } .c3-dot.t-technik { background: #7fa3c9; }
.c3-ab { display: grid; gap: 4px; margin: 8px 10px 0; text-align: left; font-size: .76rem; line-height: 1.3; color: #6b5a44; }
.c3-ab b { color: #3a2a18; font-weight: 800; }
.c3-ab .gain { display: block; color: #3f8a52; font-weight: 700; font-size: .72rem; }
.c3-ult { align-self: center; margin: 8px 10px 0; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #8a5a1a; background: #fbefd8; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Werte als drei kleine Abzeichen */
.c3-stats { display: flex; justify-content: center; gap: 6px; margin: 10px 10px 10px; margin-top: auto; padding-top: 10px; }
.c3-stats > span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-weight: 800; font-size: .86rem; color: #3a2a18; background: #f6eedd; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; }
.c3-stats i { font-style: normal; font-size: .78rem; }
.c3-stats .hp i { color: #d0675a; } .c3-stats .atk i { color: #b98a3a; } .c3-stats .spd i { color: #5f94bf; }
/* Seltene Karten (3 Sterne): ganz sanfter Glanz */
.cf3.shiny::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 48%, transparent 60%); background-size: 250% 100%; animation: c3-shine 4.5s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes c3-shine { 0%, 60% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
.cf3.frame-gold { border-color: #e2c27a !important; box-shadow: 0 0 0 2px rgba(226,194,122,.35), 0 10px 22px -12px rgba(60,40,15,.4) !important; }
.opt.card:hover .card-face.cf3 { transform: translateY(-2px) !important; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 16px 30px -14px rgba(60,40,15,.5) !important; }
.opt.card .card-face.cf3 { height: 100%; }
@media (max-width: 520px) {
  .c3-top { height: 104px; }
  .c3-sprite svg { width: 52px; height: 61px; }
  .c3-ped { width: 74px; }
  .c3-name { font-size: 1rem; margin-top: 6px; }
  .c3-ab { font-size: .7rem; margin: 6px 8px 0; }
  .c3-ab .c3-trait { display: none; }
  .c3-ult { font-size: .68rem; margin-top: 6px; }
  .c3-stats { gap: 4px; margin: 8px 6px; padding-top: 8px; }
  .c3-stats > span { padding: 2px 7px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { .cf3.shiny::after { animation: none; } }
.awk-why { margin: 4px 0 2px; color: #5a4a36; }
.awk-up b { color: #3f8a52; }
.ult-call em { display: block; font-style: normal; font-size: .7rem; font-weight: 800; margin-top: 2px; opacity: .9; }
.ult-call.perfect { box-shadow: 0 0 0 2px rgba(246,201,74,.6), 0 8px 18px -8px rgba(60,40,15,.5); }
.ult-call.perfect em { color: #b8860b; }
.ult-call.bonus em { color: #3f8a52; }
/* Tipp-Abzeichen bei Beutekarten innen statt am Rand (wurde abgeschnitten) */
.opt.loot-opt.is-tip > .tip-badge { top: 6px !important; right: 6px !important; left: auto !important; transform: none !important; font-size: 11px; padding: 2px 7px; z-index: 5; }
/* Nach dem Sieg: Kampfbild schrumpft, Ergebnis ohne Scrollen sichtbar */
.battle3d.won .arena.hud { display: none; }
.battle3d.won + .log { display: none; }
@media (max-width: 520px) {
  .summary { gap: 4px; }
  .sum-row { grid-template-columns: 28px minmax(70px, .9fr) 1.3fr; gap: 8px; padding: 5px 8px; }
  .sum-xp { grid-column: auto; }
  .sum-sprite svg { width: 26px; height: 30px; }
  .sum-name b { font-size: .9rem; }
  .sum-name small { font-size: .72rem; }
  .sum-name .mvp-tag { font-size: .66rem; }
  .sum-xp-top { font-size: .8rem; }
  .lvup { font-size: .8rem; }
}
/* „Neu“: noch nie besiegter Gegner / noch nie besuchte Insel */
.new-chip { display: inline-block; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: #4f9a6a; padding: 1px 6px; border-radius: 999px; margin-left: 5px; vertical-align: middle; box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.map-node > .new-chip { position: absolute; top: -6px; right: -10px; margin: 0; z-index: 3; }
.course-opt { position: relative; }
.co-new { margin: 0 0 4px; justify-self: start; align-self: flex-start; }
.daily-card:not(.done) { box-shadow: 0 0 0 2px rgba(217,166,60,.55), var(--shadow-soft, 0 6px 16px -10px rgba(0,0,0,.3)); }
.dc-open { display: inline-block; font-style: normal; font-weight: 800; font-size: .66rem; color: #fff; background: #d9a63c; padding: 0 6px; border-radius: 999px; margin-right: 4px; animation: dc-pulse 2.4s ease-in-out infinite; }
@keyframes dc-pulse { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .dc-open { animation: none; } }
.rl-btn { font-size: 1.05rem; text-decoration: none !important; padding: 0 4px; }
.ts-reload { margin-left: 10px; }
body.reloading { opacity: .5; transition: opacity .12s; }
/* Perfekte Ulti: goldener Blitz, kurzes Beben, deutliches Abzeichen */
.ult-call.perfect em { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: #3a2a18; color: #ffd75e; font-size: .78rem; letter-spacing: .06em; animation: perf-pop .5s cubic-bezier(.2,1.8,.4,1) both .1s; }
.ult-call.bonus em { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: #2f6d45; color: #fff; font-size: .72rem; }
@keyframes perf-pop { from { transform: scale(.3); opacity: 0; } }
.perfect-flash { position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 45%, rgba(255,236,160,.85), rgba(255,215,94,.35) 45%, transparent 75%); animation: perf-flash .7s ease-out forwards; }
@keyframes perf-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.field.perfect-hit { animation: shake .35s ease-out 2; }
@media (prefers-reduced-motion: reduce) { .perfect-flash, .field.perfect-hit, .ult-call.perfect em { animation: none !important; } .perfect-flash { display: none; } }
/* Wendepunkte im Kampf */
.ult-call.rage { background: linear-gradient(180deg, #e06a5a, #a3352a); color: #fff; border-color: #ffc2b8; }
.ult-call.rage em { display: block; font-style: normal; font-size: .72rem; font-weight: 800; opacity: .9; }
.ult-call.will { background: linear-gradient(180deg, #fff3c4, #f2c94c); color: #3a2a18; border-color: #fff8de; box-shadow: 0 0 0 3px rgba(255,236,160,.5), 0 8px 22px rgba(217,166,60,.55); }
.ult-call.will em { display: block; font-style: normal; font-size: .72rem; font-weight: 800; color: #6b4a14; }
.fu.raged .f-sprite, .fu.raged svg { filter: drop-shadow(0 0 6px rgba(224,80,60,.9)) drop-shadow(0 0 2px rgba(224,80,60,.9)) saturate(1.2); }
.fu.raged::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 70%; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(224,80,60,.55), transparent 70%); animation: rage-pulse 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes rage-pulse { 50% { opacity: .4; transform: translateX(-50%) scale(1.15); } }
/* Große Treffer: größere Zahlen */
.fnum.big { font-size: 1.35em; }
.fnum.huge { font-size: 1.7em; letter-spacing: .02em; }
/* Finaler Schlag */
.field.finale { animation: finale 1s cubic-bezier(.2,.9,.3,1); }
@keyframes finale { 0% { transform: scale(1); filter: none; } 12% { transform: scale(1.08); filter: contrast(1.15) saturate(1.2); } 55% { transform: scale(1.06); } 100% { transform: scale(1); filter: none; } }
.ko-big { position: absolute; z-index: 12; transform: translate(-50%, -50%) rotate(-10deg); font-family: var(--px); font-weight: 800; font-size: 2.6rem; color: #fff; -webkit-text-stroke: 2px #a3352a; text-shadow: 0 4px 0 #a3352a, 0 8px 18px rgba(0,0,0,.35); pointer-events: none; animation: ko-big 1.4s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes ko-big { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(2.6); } 18% { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) rotate(-10deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .field.finale, .ko-big, .fu.raged::after { animation: none !important; } .ko-big { display: none; } }
#field .fx3.ko-big { display: block !important; }
/* Mehr Leben im Kampf: Treffer-Effekte im Pixel-Stil (statt weicher Glows) */
#field .fx3.fx-slash, #field .fx3.fx-burst, #field .fx3.fx-ring, #field .fx3.fx-stars, #field .fx3.fx-curse { display: block !important; }
.fx3.fx-slash { width: 54px; height: 54px; background: linear-gradient(135deg, transparent 40%, #fff 42%, #fffbe0 50%, #ffe08a 52%, transparent 55%);
  animation: px-slash .32s steps(4) forwards; }
@keyframes px-slash { from { transform: translate(-50%, -50%) rotate(-50deg) scale(.6); } 60% { opacity: 1; } to { transform: translate(-50%, -50%) rotate(25deg) scale(1.25); opacity: 0; } }
.fx3.fx-burst { width: 30px; height: 30px; border: 4px dotted #bfe4ff; border-radius: 50%; animation: px-ring .4s steps(4) forwards; }
.fx3.fx-ring { width: 34px; height: 34px; border: 4px dotted #ffd75e; border-radius: 50%; animation: px-ring .5s steps(5) forwards; }
.fx3.fx-curse { width: 46px; height: 46px; border: 4px dotted #b48ad8; border-radius: 50%; animation: px-shrink .5s steps(5) forwards; }
@keyframes px-ring { from { transform: translate(-50%, -50%) scale(.4); } to { transform: translate(-50%, -50%) scale(2); opacity: 0; } }
@keyframes px-shrink { from { transform: translate(-50%, -50%) scale(1.5); opacity: .2; } 40% { opacity: 1; } to { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.fx3.fx-stars { width: 40px; height: 12px; margin-top: -26px;
  background: radial-gradient(circle, #ffe26a 3px, transparent 3.5px) 0 50% / 13px 12px repeat-x; animation: px-stars .9s steps(6) forwards; }
@keyframes px-stars { from { transform: translate(-50%, -50%) rotate(0); } 80% { opacity: 1; } to { transform: translate(-50%, -50%) rotate(180deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #field .fx3.fx-slash, #field .fx3.fx-burst, #field .fx3.fx-ring, #field .fx3.fx-stars, #field .fx3.fx-curse { display: none !important; } }
.ult-call.rage, .ult-call.will { top: 44%; }
/* ---------- Bosskampf als Ereignis ---------- */
.field.bossfight.enter::after, .field.raid.enter::after { display: none !important; }
.boss-intro { position: absolute; inset: 0; z-index: 445; pointer-events: none; display: grid; place-items: center; animation: bi-fade 2.3s ease forwards; }
.boss-intro .bi-bar { position: absolute; left: 0; right: 0; height: 16%; background: #120b06; animation: bi-bar 2.3s cubic-bezier(.2,.8,.2,1) forwards; }
.boss-intro .bi-bar.top { top: 0; transform-origin: top; } .boss-intro .bi-bar.bot { bottom: 0; transform-origin: bottom; }
.bi-card { display: grid; justify-items: center; gap: 2px; padding: 10px 22px 12px; border-radius: 14px; background: rgba(20,12,6,.82); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: bi-card 2.3s cubic-bezier(.2,1.4,.4,1) forwards; }
.bi-card small { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #f6c94a; }
.bi-card b { font-family: var(--px); font-size: 1.9rem; line-height: 1; letter-spacing: .01em; text-shadow: 0 3px 0 rgba(0,0,0,.45); }
.bi-card em { font-style: normal; font-size: .75rem; font-weight: 700; color: #e8dcc4; }
.boss-intro.raid .bi-card small { color: #c9a8ff; }
@keyframes bi-bar { 0% { transform: scaleY(0); } 14% { transform: scaleY(1); } 80% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes bi-card { 0% { opacity: 0; transform: scale(1.6); } 16% { opacity: 1; transform: scale(1); } 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.94); } }
@keyframes bi-fade { 0%, 100% { background: transparent; } 15%, 70% { background: rgba(0,0,0,.18); } }
/* Boss-Leiste */
.boss-bar { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: min(72%, 360px); z-index: 440; display: grid; gap: 3px; pointer-events: none; }
.bb-name { justify-self: center; font: 600 .78rem/1.1 var(--px); color: #fff; background: rgba(30,18,10,.72); padding: 2px 10px; border-radius: 999px; }
.bb-track { position: relative; height: 10px; border-radius: 999px; background: rgba(30,18,10,.55); overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.bb-track i, .bb-track s { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.bb-track s { background: #ffe1a8; transition: width .9s ease .35s; }
.bb-track i { background: linear-gradient(180deg, #ef7b62, #c2412f); transition: width .25s ease; }
.boss-bar.raid .bb-track i { background: linear-gradient(180deg, #b48ad8, #7b4fb0); }
.bb-mark { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: rgba(255,255,255,.85); }
.boss-bar.hit .bb-track { animation: bb-hit .25s ease; }
@keyframes bb-hit { 50% { transform: translateX(2px); } }
.boss-bar.low .bb-track { box-shadow: 0 0 0 2px #ffd75e, 0 0 12px rgba(255,215,94,.8); }
.field.bossfight .f-round, .field.raid .f-round { top: 46px; }
/* Wird es knapp: roter Puls am Rand */
.field.tense .f-vignette { box-shadow: inset 0 0 60px 10px rgba(200,40,30,.55) !important; animation: tense 1.1s ease-in-out infinite; }
@keyframes tense { 50% { box-shadow: inset 0 0 30px 4px rgba(200,40,30,.3); } }
/* Boss schlägt zu */
.field.boss-slam { animation: boss-slam .4s cubic-bezier(.3,.8,.3,1); }
@keyframes boss-slam { 20% { transform: translateY(4px) scale(1.015); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .boss-intro, .boss-intro *, .field.tense .f-vignette, .field.boss-slam { animation: none !important; } .boss-intro { display: none; } }
/* Bosse: größer, mit warmem Schein am Boden */
.fu.boss .fu-shadow { box-shadow: 0 0 18px 6px rgba(240,120,80,.35); }
.field.raid .fu.boss .fu-shadow { box-shadow: 0 0 18px 6px rgba(160,110,230,.4); }
/* Kampfwetter: Banner und leichte Färbung des Feldes */
.ult-call.wx { top: 44%; background: linear-gradient(180deg, #ffffff, #e9f1f8); color: #2b3a4a; border-color: #fff; }
.ult-call.wx small { color: #5b7ea3; } .ult-call.wx em { display: block; font-style: normal; font-size: .72rem; font-weight: 700; color: #5a6a7a; }
.field.wx-nebel .f-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(240,244,248,.0), rgba(240,244,248,.45) 55%, rgba(240,244,248,.2)); z-index: 300; }
.field.wx-mond .f-sky { filter: brightness(.6) saturate(.8) hue-rotate(200deg); }
.field.wx-hitze .f-stage { filter: saturate(1.25) sepia(.15); }
.field.wx-wind .f-clouds, .field.wx-sturm .f-clouds { animation-duration: 6s !important; }
.field.wx-jubel .f-sun { filter: drop-shadow(0 0 18px #ffd75e); }
/* Endphase: der Himmel färbt sich */
.field.phase3 .f-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 70% 30%, rgba(200,50,40,.28), transparent 70%); animation: p3-pulse 1.6s ease-in-out infinite; }
@keyframes p3-pulse { 50% { opacity: .45; } }
.ult-call.rage.final { background: linear-gradient(180deg, #8a2a22, #4a120e); }
/* Tempo-Knopf: drei kleine Pfeile zeigen die Stufe */
.speed-btn { min-width: 180px; }
.spd-dots { display: inline-flex; gap: 1px; margin-right: 6px; font-size: .7rem; vertical-align: middle; }
.spd-dots i { font-style: normal; opacity: .25; } .spd-dots i.on { opacity: 1; color: var(--accent, #b8742a); }
@media (pointer: coarse) { .kbd-only { display: none !important; } }
.wb-note { font-size: .78rem; color: #8a7a62; margin-top: 6px; }
.wb-links { margin: 8px 0 0; font-size: .8rem; text-align: center; }
/* ---------- Crew-Ausrüstung ---------- */
.cg-panel { margin: 12px 0; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 70%, #f3e6cc); box-shadow: inset 0 0 0 1px rgba(120,90,50,.15); }
.cg-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cg-head small { color: var(--mute); }
.cg-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; }
.cg-row + .cg-row { border-top: 1px dashed rgba(120,90,50,.18); }
.cg-who svg { width: 28px; height: 33px; shape-rendering: crispEdges; }
.cg-row > b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-slots { display: flex; gap: 6px; }
.cg-chip { position: relative; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 2px solid #b9a78a; background: #fffaf0; cursor: pointer; }
.cg-chip .cg-art { width: 28px; height: 28px; shape-rendering: crispEdges; }
.cg-chip.empty { border-style: dashed; color: #b9a78a; font-weight: 800; font-size: 1rem; line-height: 1; align-content: center; gap: 0; }
.cg-chip.empty small { font-size: .5rem; font-weight: 700; }
.cg-chip.cr-rare { border-color: #4f86c6; } .cg-chip.cr-epic { border-color: #9a5bd0; background: #faf3ff; }
.cg-chip.cr-legendary { border-color: #e0a030; background: #fff6df; box-shadow: 0 0 10px rgba(224,160,48,.45); }
.cg-bag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(120,90,50,.15); }
.cg-bagit { position: relative; }
.cg-bagit.worn::after { content: '✓'; position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: #3f8a52; color: #fff; font-size: .62rem; font-weight: 800; display: grid; place-items: center; }
.cg-bagit.new::before { content: 'Neu'; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); z-index: 2; font-size: .55rem; font-weight: 800; color: #fff; background: #4f9a6a; padding: 0 4px; border-radius: 999px; }
/* Karte eines Teils */
.cg-pop { max-height: 82vh; overflow-y: auto; }
.cg-card { text-align: left; padding: 10px 12px; border-radius: 12px; background: #fffaf0; border: 2px solid #c9b896; margin: 8px 0; }
.cg-card.cr-rare { border-color: #4f86c6; } .cg-card.cr-epic { border-color: #9a5bd0; } .cg-card.cr-legendary { border-color: #e0a030; background: linear-gradient(180deg, #fff6df, #fffaf0); }
.cg-card-top { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; }
.cg-card-top .cg-art { width: 34px; height: 34px; shape-rendering: crispEdges; }
.cg-card-top b { display: block; line-height: 1.15; }
.cg-card.cr-rare .cg-card-top b { color: #2f68a8; } .cg-card.cr-epic .cg-card-top b { color: #7b3fb0; } .cg-card.cr-legendary .cg-card-top b { color: #b07810; }
.cg-card-top small { color: var(--mute); font-size: .72rem; }
.cg-pow { font-style: normal; font-weight: 800; font-size: .8rem; color: #6b5a44; }
.cg-lines { margin: 6px 0 4px; padding: 0 0 0 16px; font-size: .84rem; }
.cg-lines li.main { font-weight: 800; }
.cg-from { margin: 4px 0 6px; font-size: .74rem; color: #8a7a62; }
.cg-list { display: grid; gap: 2px; }
/* Visitenkarte eines Freundes */
.pc-gear { display: grid; gap: 4px; margin-top: 8px; }
.pc-gear-row { display: flex; align-items: center; gap: 6px; }
.pc-gear-row small { min-width: 64px; color: var(--mute); }
.pc-gear .cg-chip { width: 34px; height: 34px; } .pc-gear .cg-chip .cg-art { width: 22px; height: 22px; }
/* Ende eines Runs */
.cg-sum .trophy-chip { display: inline-flex; align-items: center; gap: 4px; }
.cg-sum .trophy-chip .cg-art { width: 18px; height: 18px; shape-rendering: crispEdges; }
.trophy-chip.cr-epic { color: #7b3fb0; } .trophy-chip.cr-legendary { color: #b07810; font-weight: 800; }
.harbor-box { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, #eaf3f8, #f6efe0); box-shadow: inset 0 0 0 1px rgba(80,120,150,.25); }
.harbor-box b { display: block; margin: 2px 0 4px; }
.harbor-box ul { margin: 0; padding-left: 18px; font-size: .84rem; color: #5a4a36; }
.harbor-box li + li { margin-top: 2px; }
/* Seltenes soll man sofort sehen: Epics leuchten lila, Legendäres golden mit Glanz */
.opt.loot-opt.lr-epic { box-shadow: 0 0 0 2px #9a5bd0, 0 0 18px rgba(154,91,208,.45) !important; animation: deal .35s ease-out backwards, glow-epic 2.4s ease-in-out .4s infinite; }
.opt.loot-opt.lr-legendary { box-shadow: 0 0 0 3px #e0a030, 0 0 24px rgba(224,160,48,.6) !important; animation: deal .35s ease-out backwards, glow-leg 2s ease-in-out .4s infinite; }
@keyframes glow-epic { 50% { box-shadow: 0 0 0 2px #9a5bd0, 0 0 28px rgba(154,91,208,.65); } }
@keyframes glow-leg { 50% { box-shadow: 0 0 0 3px #f2c050, 0 0 36px rgba(240,180,60,.8); } }
.opt.loot-opt.lr-legendary::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); background-size: 250% 100%; animation: c3-shine 3s ease-in-out infinite; mix-blend-mode: soft-light; }
/* 3-Sterne-Figuren in Taverne und Auswahl: goldener Rahmen und Glanz */
.opt.card .card-face.cf3.shiny { box-shadow: 0 0 0 2px #e2c27a, 0 0 18px rgba(226,194,122,.55), 0 10px 22px -12px rgba(60,40,15,.4) !important; }
@media (prefers-reduced-motion: reduce) { .opt.loot-opt.lr-epic, .opt.loot-opt.lr-legendary { animation: none !important; } }
.cg-slotw { display: grid; justify-items: center; gap: 1px; }
.cg-slotw > small { font-size: .55rem; font-weight: 700; color: #9a8a70; }
.cg-chip.empty { font-size: 1.1rem; }
.cg-bag { display: grid; gap: 8px; }
.cg-grp-t { display: block; font-weight: 800; color: #6b5a44; margin-bottom: 4px; }
.cg-grp-t em { font-style: normal; color: #9a8a70; font-weight: 700; }
.cg-grp-items { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-slots { gap: 4px; }
.cg-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
@media (max-width: 400px) { .cg-chip { width: 38px; height: 38px; } .cg-chip .cg-art { width: 24px; height: 24px; } }
.rival-box { margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(180deg, #fbeee6, #f6efe0); box-shadow: inset 0 0 0 1px rgba(170,90,60,.3); }
.rival-box b { display: block; margin: 2px 0; } .rival-box small { color: #8a7a62; }
/* Endlos-Fahrt im Hauptquartier */
.endless-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #e9f0f6, #f5efe2); box-shadow: inset 0 0 0 1px rgba(80,120,150,.22); }
.endless-row.locked { opacity: .6; filter: grayscale(.4); }
.er-ico { font: 700 1.5rem/1 var(--px); color: #4f7fa8; text-align: center; }
.endless-row b { display: block; } .endless-row small { color: #7a6a52; font-size: .76rem; }
.endless-seas { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-top: 6px; }
.es-sea { display: grid; gap: 1px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid #c9d8e6; background: #fbfdff; cursor: pointer; }
.es-sea b { font-size: .86rem; } .es-sea small { font-size: .68rem; color: #7a6a52; } .es-sea em { font-style: normal; font-size: .66rem; font-weight: 800; color: #4f7fa8; }
.es-sea.off { opacity: .45; cursor: default; background: #f3f0ea; border-style: dashed; }
/* Was jetzt geht, sieht man: Punkt am Reiter, leistbare Ausbauten leuchten */
.atab { position: relative; }
.tab-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #e0a030; box-shadow: 0 0 0 2px #fffaf0; animation: dot-pulse 1.8s ease-in-out infinite; }
@keyframes dot-pulse { 50% { transform: scale(1.3); } }
.hq-card.can-buy { box-shadow: 0 0 0 2px #e0a030, 0 0 14px rgba(224,160,48,.35); }
.can-tag { font-style: normal; font-size: .62rem; font-weight: 800; color: #fff; background: #e0a030; padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .tab-dot { animation: none; } }
/* Ausrüstung ziehen */
.cg-bagit .cg-chip { touch-action: none; cursor: grab; }
.cg-ghost { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -60%) scale(1.15) rotate(-6deg); box-shadow: 0 10px 22px rgba(60,40,15,.35); }
body.cg-dragging { user-select: none; }
.cg-chip.drop-ok { border-color: #3f8a52 !important; border-style: solid !important; background: #eef8ef !important; animation: dot-pulse 1.2s ease-in-out infinite; }
.cg-chip.drop-hover { transform: scale(1.15); box-shadow: 0 0 0 3px #3f8a52, 0 0 14px rgba(63,138,82,.5); }
.cg-hint { margin: -2px 0 6px; font-size: .74rem; color: #8a7a62; }
/* Schiff anpassen */
.ship-all { margin-top: 14px; }
.ship-big { display: grid; place-items: center; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #cfe3f2, #8ab6d6); margin: 6px 0; }
.ship-big svg { width: 160px; height: 120px; shape-rendering: crispEdges; }
.ship-prev svg { width: 56px; height: 42px; shape-rendering: crispEdges; }
.ship-opt .ship-prev { display: grid; place-items: center; background: linear-gradient(180deg, #e3eef7, #b7d3e8); border-radius: 8px; padding: 4px; }
.ship-grp + .ship-grp { margin-top: 8px; }
/* Gegner-Vorschau (Stammcrew-Duell) */
.match-pop .mp-crew { margin: 8px 0 4px; }
.mp-gear { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 6px; }
.mp-g { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 2px solid #c9b896; background: #fffaf0; }
.mp-g .cg-art { width: 16px; height: 16px; shape-rendering: crispEdges; }
.mp-g.cr-rare { border-color: #4f86c6; } .mp-g.cr-epic { border-color: #9a5bd0; } .mp-g.cr-legendary { border-color: #e0a030; }
.mp-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 8px 0; }
.mp-vs span { display: grid; text-align: center; } .mp-vs small { color: var(--mute); font-size: .72rem; } .mp-vs b { font-size: 1.1rem; }
.mp-vs em { font-style: normal; font-weight: 800; color: #b07810; }
.mp-chance { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 12px; background: #f3ead8; overflow: hidden; margin-bottom: 4px; }
.mp-chance > * { position: relative; z-index: 1; } .mp-chance i { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; opacity: .3; }
.mp-chance.ch-gut i { background: #3f8a52; } .mp-chance.ch-offen i { background: #e0a030; } .mp-chance.ch-schwer i { background: #c2412f; }
.match-pop .sq-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .match-pop .sq-u { min-width: 0; padding: 4px 2px; } .match-pop .sq-name { font-size: .7rem; }
.cg-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cg-shards { display: block; margin-top: 6px; font-size: .72rem; color: #5b7ea3; }
.boss-intro.rival .bi-card small { color: #8fd0ff; }
/* ---------- Hauptquartier als Hafen: Holzschilder zu den Räumen ---------- */
.hub { margin: 14px 0 6px; }
.hub-lbl { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a08560; margin: 0 2px 6px; }
.hub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-tile { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 10px 4px 8px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #f7ead0 0%, #efdcb8 100%); border: 2px solid #c9a87a;
  box-shadow: 0 3px 0 #b08a5a, 0 6px 12px -8px rgba(60,40,15,.5); color: #4a3520; transition: transform .1s ease; }
.hub-tile:hover { transform: translateY(-1px); }
.hub-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 #b08a5a; }
.hub-art { width: 40px; height: 34px; display: grid; place-items: center; }
.hub-art svg { width: 36px; height: 32px; shape-rendering: crispEdges; }
.hub-tile b { font-size: .8rem; line-height: 1.1; text-align: center; }
.hub-tile small { font-size: .62rem; color: #8a6d48; text-align: center; }
.hub-tile .tab-dot { top: 6px; right: 6px; }
/* Raum-Ansicht */
.room-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; margin: 6px -4px 6px; padding: 8px 6px; border-radius: 12px;
  background: color-mix(in srgb, var(--panel, #fffaf0) 92%, transparent); backdrop-filter: blur(4px); box-shadow: 0 6px 14px -12px rgba(60,40,15,.5); }
.room-back { flex: none; padding: 6px 12px; border-radius: 999px; border: 2px solid #c9a87a; background: #f7ead0; font-weight: 800; color: #4a3520; cursor: pointer; box-shadow: 0 2px 0 #b08a5a; }
.room-title { display: inline-flex; align-items: center; gap: 6px; font-family: var(--px); font-size: 1.2rem; font-weight: 600; color: #3a2a18; }
.hub-art.sm { width: 28px; height: 24px; } .hub-art.sm svg { width: 26px; height: 22px; }
.room-hop { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.room-hop::-webkit-scrollbar { display: none; }
.room-chip { position: relative; flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid #d8c4a0; background: #fffaf0; font-size: .74rem; font-weight: 700; color: #6b5a44; cursor: pointer; }
.room-chip .tab-dot { top: -2px; right: -2px; }
.room-foot { margin: 16px 0 6px; text-align: center; }
.hq-more { margin: 12px 0 4px; display: grid; gap: 8px; } .hq-more .endless-row { margin-top: 0; }

/* ===================== Gemütlicher Hafen-Look (Stardew-Richtung) ===================== */
:root:not([data-theme="dark"]) body {
  background-color: #78b2c8;
  background-image:
    repeating-linear-gradient(90deg, rgba(90,55,25,.32) 0 2px, transparent 2px 64px),        /* Plankenfugen */
    linear-gradient(180deg, #b5844f 0 3px, #c79763 3px 100%),                                  /* Holzsteg */
    repeating-linear-gradient(180deg, rgba(255,255,255,.16) 0 2px, transparent 2px 16px),   /* Wellenlinien */
    radial-gradient(ellipse 60px 14px at 30% 40%, rgba(255,255,255,.8), transparent 70%),     /* Wolke */
    radial-gradient(ellipse 80px 16px at 75% 60%, rgba(255,255,255,.7), transparent 70%),     /* Wolke */
    linear-gradient(180deg, #cfeaf2 0%, #e9f5f1 70%, #f4efdc 100%),                           /* Himmel */
    linear-gradient(180deg, #8fc4d6, #6aa6be);                                                 /* Meer */
  background-size: 64px 28vh, 100% 28vh, 100% 31vh, 100% 41vh, 100% 41vh, 100% 41vh, 100% 100%;
  background-position: 0 100%, 0 100%, 0 41vh, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}
/* Pergament mit Holzrahmen: die große Karte und wichtige Flächen */
:root:not([data-theme="dark"]) body:not(.in-run) .stage {
  background: linear-gradient(180deg, #fdf3dc 0%, #f8e9c8 100%) !important;
  border: 3px solid #8b5a2b !important; border-radius: 14px !important;
  box-shadow: inset 0 0 0 3px #e9b874, inset 0 0 0 5px #b8783a33, 0 10px 24px -10px rgba(40,25,10,.55) !important;
}
:root:not([data-theme="dark"]) body:not(.in-run) header h1 { color: #fffaf0; text-shadow: 0 2px 0 #3a5a6a, 0 0 12px rgba(30,60,80,.35); }
:root:not([data-theme="dark"]) body:not(.in-run) .head-actions .link { color: #24485a; }
:root:not([data-theme="dark"]) .hq-sail { background: linear-gradient(180deg, #fff6e2, #f6e4bf) !important; border: 2px solid #b8834a !important; box-shadow: inset 0 0 0 2px #f3d39a, 0 4px 0 #a8743c !important; }
:root:not([data-theme="dark"]) .hq-bar .portrait-chip, :root:not([data-theme="dark"]) .hq-bar .berry { box-shadow: 0 3px 0 #c9a060 !important; }
/* Aktions-Leiste unter „Leinen los“: alle Fahrten auf einen Blick */
.action-dock { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; margin-top: 10px; }
.ad-tile { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: 12px; cursor: pointer; color: #4a3520;
  background: linear-gradient(180deg, #f7ead0, #edd8b0); border: 2px solid #c9a87a; box-shadow: 0 3px 0 #b08a5a; }
.ad-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 #b08a5a; }
.ad-ico { height: 26px; display: grid; place-items: center; font: 700 1.3rem/1 var(--px); font-style: normal; color: #4f7fa8; }
.ad-ico svg { width: 24px; height: 24px; shape-rendering: crispEdges; }
.ad-tile b { font-size: .78rem; } .ad-tile small { font-size: .62rem; color: #8a6d48; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ad-tile.hot { border-color: #e0a030; box-shadow: 0 3px 0 #b07810, 0 0 12px rgba(224,160,48,.45); }
.ad-tile.hot small { color: #b07810; font-weight: 800; }
.ad-tile.done { opacity: .75; }
.ad-tile.locked { filter: grayscale(.5); opacity: .7; }
.sail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sail-meta .sail-board { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.endless-row.in-pop { margin: 6px 0; text-align: left; }
.fpop-card .endless-seas { text-align: left; }
.fpop-card .hunt-row { justify-content: center; }
/* Fenster wie Pergament mit Holzrahmen */
:root:not([data-theme="dark"]) .fpop-card { background: linear-gradient(180deg, #fdf3dc, #f8e9c8) !important; border: 3px solid #8b5a2b !important; box-shadow: inset 0 0 0 3px #e9b874, 0 16px 36px -12px rgba(40,25,10,.6) !important; }
:root:not([data-theme="dark"]) .fpop-card .fpop-art { background: #fff6e0; box-shadow: inset 0 0 0 2px #e2c08a; }
:root:not([data-theme="dark"]) body:not(.in-run) .hq-card, :root:not([data-theme="dark"]) body:not(.in-run) .hq-item, :root:not([data-theme="dark"]) body:not(.in-run) .quest,
:root:not([data-theme="dark"]) body:not(.in-run) .hq-sec > .cg-panel { background: #fffaf0 !important; border-color: #e2c896 !important; }

/* ===================== Pixel-Rahmen (Stardew-Richtung) ===================== */
:root { --pxf: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'><rect x='2' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='3' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='4' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='5' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='6' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='7' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='8' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='9' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='1' width='1' height='1' fill='%235b3a1e'/><rect x='2' y='1' width='1' height='1' fill='%23b8783a'/><rect x='3' y='1' width='1' height='1' fill='%23b8783a'/><rect x='4' y='1' width='1' height='1' fill='%23b8783a'/><rect x='5' y='1' width='1' height='1' fill='%23b8783a'/><rect x='6' y='1' width='1' height='1' fill='%23b8783a'/><rect x='7' y='1' width='1' height='1' fill='%23b8783a'/><rect x='8' y='1' width='1' height='1' fill='%23b8783a'/><rect x='9' y='1' width='1' height='1' fill='%23b8783a'/><rect x='10' y='1' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='2' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='2' width='1' height='1' fill='%23b8783a'/><rect x='2' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='4' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='5' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='6' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='7' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='8' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='9' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='10' y='2' width='1' height='1' fill='%23b8783a'/><rect x='11' y='2' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='3' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='3' width='1' height='1' fill='%23b8783a'/><rect x='2' y='3' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='3' width='1' height='1' fill='%23f3c98a'/><rect x='10' y='3' width='1' height='1' fill='%23b8783a'/><rect x='11' y='3' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='4' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='4' width='1' height='1' fill='%23b8783a'/><rect x='2' y='4' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='4' width='1' height='1' fill='%23f3c98a'/><rect x='10' y='4' width='1' height='1' fill='%23b8783a'/><rect x='11' y='4' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='5' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='5' width='1' height='1' fill='%23b8783a'/><rect x='2' y='5' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='5' width='1' height='1' fill='%23f3c98a'/><rect x='10' y='5' width='1' height='1' fill='%23b8783a'/><rect x='11' y='5' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='6' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='6' width='1' height='1' fill='%23b8783a'/><rect x='2' y='6' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='6' width='1' height='1' fill='%23f3c98a'/><rect x='10' y='6' width='1' height='1' fill='%23b8783a'/><rect x='11' y='6' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='7' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='7' width='1' height='1' fill='%23b8783a'/><rect x='2' y='7' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='7' width='1' height='1' fill='%23f3c98a'/><rect x='10' y='7' width='1' height='1' fill='%23b8783a'/><rect x='11' y='7' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='8' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='8' width='1' height='1' fill='%23b8783a'/><rect x='2' y='8' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='8' width='1' height='1' fill='%23f3c98a'/><rect x='10' y='8' width='1' height='1' fill='%23b8783a'/><rect x='11' y='8' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='9' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='9' width='1' height='1' fill='%23b8783a'/><rect x='2' y='9' width='1' height='1' fill='%23b8783a'/><rect x='3' y='9' width='1' height='1' fill='%23b8783a'/><rect x='4' y='9' width='1' height='1' fill='%23b8783a'/><rect x='5' y='9' width='1' height='1' fill='%23b8783a'/><rect x='6' y='9' width='1' height='1' fill='%23b8783a'/><rect x='7' y='9' width='1' height='1' fill='%23b8783a'/><rect x='8' y='9' width='1' height='1' fill='%23b8783a'/><rect x='9' y='9' width='1' height='1' fill='%23b8783a'/><rect x='10' y='9' width='1' height='1' fill='%23b8783a'/><rect x='11' y='9' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='10' width='1' height='1' fill='%235b3a1e'/><rect x='2' y='10' width='1' height='1' fill='%23b8783a'/><rect x='3' y='10' width='1' height='1' fill='%23b8783a'/><rect x='4' y='10' width='1' height='1' fill='%23b8783a'/><rect x='5' y='10' width='1' height='1' fill='%23b8783a'/><rect x='6' y='10' width='1' height='1' fill='%23b8783a'/><rect x='7' y='10' width='1' height='1' fill='%23b8783a'/><rect x='8' y='10' width='1' height='1' fill='%23b8783a'/><rect x='9' y='10' width='1' height='1' fill='%23b8783a'/><rect x='10' y='10' width='1' height='1' fill='%235b3a1e'/><rect x='2' y='11' width='1' height='1' fill='%235b3a1e'/><rect x='3' y='11' width='1' height='1' fill='%235b3a1e'/><rect x='4' y='11' width='1' height='1' fill='%235b3a1e'/><rect x='5' y='11' width='1' height='1' fill='%235b3a1e'/><rect x='6' y='11' width='1' height='1' fill='%235b3a1e'/><rect x='7' y='11' width='1' height='1' fill='%235b3a1e'/><rect x='8' y='11' width='1' height='1' fill='%235b3a1e'/><rect x='9' y='11' width='1' height='1' fill='%235b3a1e'/></svg>"); --pxf-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'><rect x='2' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='3' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='4' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='5' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='6' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='7' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='8' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='9' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='1' width='1' height='1' fill='%238a5a2e'/><rect x='2' y='1' width='1' height='1' fill='%23d9a466'/><rect x='3' y='1' width='1' height='1' fill='%23d9a466'/><rect x='4' y='1' width='1' height='1' fill='%23d9a466'/><rect x='5' y='1' width='1' height='1' fill='%23d9a466'/><rect x='6' y='1' width='1' height='1' fill='%23d9a466'/><rect x='7' y='1' width='1' height='1' fill='%23d9a466'/><rect x='8' y='1' width='1' height='1' fill='%23d9a466'/><rect x='9' y='1' width='1' height='1' fill='%23d9a466'/><rect x='10' y='1' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='2' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='2' width='1' height='1' fill='%23d9a466'/><rect x='2' y='2' width='1' height='1' fill='%23fbe4b8'/><rect x='3' y='2' width='1' height='1' fill='%23fbe4b8'/><rect x='4' y='2' width='1' height='1' fill='%23fbe4b8'/><rect x='5' y='2' width='1' height='1' fill='%23fbe4b8'/><rect x='6' y='2' width='1' height='1' fill='%23fbe4b8'/><rect x='7' y='2' width='1' height='1' fill='%23fbe4b8'/><rect x='8' y='2' width='1' height='1' fill='%23fbe4b8'/><rect x='9' y='2' width='1' height='1' fill='%23fbe4b8'/><rect x='10' y='2' width='1' height='1' fill='%23d9a466'/><rect x='11' y='2' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='3' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='3' width='1' height='1' fill='%23d9a466'/><rect x='2' y='3' width='1' height='1' fill='%23fbe4b8'/><rect x='3' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='3' width='1' height='1' fill='%23fbe4b8'/><rect x='10' y='3' width='1' height='1' fill='%23d9a466'/><rect x='11' y='3' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='4' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='4' width='1' height='1' fill='%23d9a466'/><rect x='2' y='4' width='1' height='1' fill='%23fbe4b8'/><rect x='3' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='4' width='1' height='1' fill='%23fbe4b8'/><rect x='10' y='4' width='1' height='1' fill='%23d9a466'/><rect x='11' y='4' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='5' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='5' width='1' height='1' fill='%23d9a466'/><rect x='2' y='5' width='1' height='1' fill='%23fbe4b8'/><rect x='3' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='5' width='1' height='1' fill='%23fbe4b8'/><rect x='10' y='5' width='1' height='1' fill='%23d9a466'/><rect x='11' y='5' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='6' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='6' width='1' height='1' fill='%23d9a466'/><rect x='2' y='6' width='1' height='1' fill='%23fbe4b8'/><rect x='3' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='6' width='1' height='1' fill='%23fbe4b8'/><rect x='10' y='6' width='1' height='1' fill='%23d9a466'/><rect x='11' y='6' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='7' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='7' width='1' height='1' fill='%23d9a466'/><rect x='2' y='7' width='1' height='1' fill='%23fbe4b8'/><rect x='3' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='7' width='1' height='1' fill='%23fbe4b8'/><rect x='10' y='7' width='1' height='1' fill='%23d9a466'/><rect x='11' y='7' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='8' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='8' width='1' height='1' fill='%23d9a466'/><rect x='2' y='8' width='1' height='1' fill='%23fbe4b8'/><rect x='3' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='8' width='1' height='1' fill='%23fbe4b8'/><rect x='10' y='8' width='1' height='1' fill='%23d9a466'/><rect x='11' y='8' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='9' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='9' width='1' height='1' fill='%23d9a466'/><rect x='2' y='9' width='1' height='1' fill='%23d9a466'/><rect x='3' y='9' width='1' height='1' fill='%23d9a466'/><rect x='4' y='9' width='1' height='1' fill='%23d9a466'/><rect x='5' y='9' width='1' height='1' fill='%23d9a466'/><rect x='6' y='9' width='1' height='1' fill='%23d9a466'/><rect x='7' y='9' width='1' height='1' fill='%23d9a466'/><rect x='8' y='9' width='1' height='1' fill='%23d9a466'/><rect x='9' y='9' width='1' height='1' fill='%23d9a466'/><rect x='10' y='9' width='1' height='1' fill='%23d9a466'/><rect x='11' y='9' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='10' width='1' height='1' fill='%238a5a2e'/><rect x='2' y='10' width='1' height='1' fill='%23d9a466'/><rect x='3' y='10' width='1' height='1' fill='%23d9a466'/><rect x='4' y='10' width='1' height='1' fill='%23d9a466'/><rect x='5' y='10' width='1' height='1' fill='%23d9a466'/><rect x='6' y='10' width='1' height='1' fill='%23d9a466'/><rect x='7' y='10' width='1' height='1' fill='%23d9a466'/><rect x='8' y='10' width='1' height='1' fill='%23d9a466'/><rect x='9' y='10' width='1' height='1' fill='%23d9a466'/><rect x='10' y='10' width='1' height='1' fill='%238a5a2e'/><rect x='2' y='11' width='1' height='1' fill='%238a5a2e'/><rect x='3' y='11' width='1' height='1' fill='%238a5a2e'/><rect x='4' y='11' width='1' height='1' fill='%238a5a2e'/><rect x='5' y='11' width='1' height='1' fill='%238a5a2e'/><rect x='6' y='11' width='1' height='1' fill='%238a5a2e'/><rect x='7' y='11' width='1' height='1' fill='%238a5a2e'/><rect x='8' y='11' width='1' height='1' fill='%238a5a2e'/><rect x='9' y='11' width='1' height='1' fill='%238a5a2e'/></svg>"); --pxf-gold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'><rect x='2' y='0' width='1' height='1' fill='%236b4210'/><rect x='3' y='0' width='1' height='1' fill='%236b4210'/><rect x='4' y='0' width='1' height='1' fill='%236b4210'/><rect x='5' y='0' width='1' height='1' fill='%236b4210'/><rect x='6' y='0' width='1' height='1' fill='%236b4210'/><rect x='7' y='0' width='1' height='1' fill='%236b4210'/><rect x='8' y='0' width='1' height='1' fill='%236b4210'/><rect x='9' y='0' width='1' height='1' fill='%236b4210'/><rect x='1' y='1' width='1' height='1' fill='%236b4210'/><rect x='2' y='1' width='1' height='1' fill='%23e0a030'/><rect x='3' y='1' width='1' height='1' fill='%23e0a030'/><rect x='4' y='1' width='1' height='1' fill='%23e0a030'/><rect x='5' y='1' width='1' height='1' fill='%23e0a030'/><rect x='6' y='1' width='1' height='1' fill='%23e0a030'/><rect x='7' y='1' width='1' height='1' fill='%23e0a030'/><rect x='8' y='1' width='1' height='1' fill='%23e0a030'/><rect x='9' y='1' width='1' height='1' fill='%23e0a030'/><rect x='10' y='1' width='1' height='1' fill='%236b4210'/><rect x='0' y='2' width='1' height='1' fill='%236b4210'/><rect x='1' y='2' width='1' height='1' fill='%23e0a030'/><rect x='2' y='2' width='1' height='1' fill='%23ffe9a8'/><rect x='3' y='2' width='1' height='1' fill='%23ffe9a8'/><rect x='4' y='2' width='1' height='1' fill='%23ffe9a8'/><rect x='5' y='2' width='1' height='1' fill='%23ffe9a8'/><rect x='6' y='2' width='1' height='1' fill='%23ffe9a8'/><rect x='7' y='2' width='1' height='1' fill='%23ffe9a8'/><rect x='8' y='2' width='1' height='1' fill='%23ffe9a8'/><rect x='9' y='2' width='1' height='1' fill='%23ffe9a8'/><rect x='10' y='2' width='1' height='1' fill='%23e0a030'/><rect x='11' y='2' width='1' height='1' fill='%236b4210'/><rect x='0' y='3' width='1' height='1' fill='%236b4210'/><rect x='1' y='3' width='1' height='1' fill='%23e0a030'/><rect x='2' y='3' width='1' height='1' fill='%23ffe9a8'/><rect x='3' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='3' width='1' height='1' fill='%23ffe9a8'/><rect x='10' y='3' width='1' height='1' fill='%23e0a030'/><rect x='11' y='3' width='1' height='1' fill='%236b4210'/><rect x='0' y='4' width='1' height='1' fill='%236b4210'/><rect x='1' y='4' width='1' height='1' fill='%23e0a030'/><rect x='2' y='4' width='1' height='1' fill='%23ffe9a8'/><rect x='3' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='4' width='1' height='1' fill='%23ffe9a8'/><rect x='10' y='4' width='1' height='1' fill='%23e0a030'/><rect x='11' y='4' width='1' height='1' fill='%236b4210'/><rect x='0' y='5' width='1' height='1' fill='%236b4210'/><rect x='1' y='5' width='1' height='1' fill='%23e0a030'/><rect x='2' y='5' width='1' height='1' fill='%23ffe9a8'/><rect x='3' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='5' width='1' height='1' fill='%23ffe9a8'/><rect x='10' y='5' width='1' height='1' fill='%23e0a030'/><rect x='11' y='5' width='1' height='1' fill='%236b4210'/><rect x='0' y='6' width='1' height='1' fill='%236b4210'/><rect x='1' y='6' width='1' height='1' fill='%23e0a030'/><rect x='2' y='6' width='1' height='1' fill='%23ffe9a8'/><rect x='3' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='6' width='1' height='1' fill='%23ffe9a8'/><rect x='10' y='6' width='1' height='1' fill='%23e0a030'/><rect x='11' y='6' width='1' height='1' fill='%236b4210'/><rect x='0' y='7' width='1' height='1' fill='%236b4210'/><rect x='1' y='7' width='1' height='1' fill='%23e0a030'/><rect x='2' y='7' width='1' height='1' fill='%23ffe9a8'/><rect x='3' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='7' width='1' height='1' fill='%23ffe9a8'/><rect x='10' y='7' width='1' height='1' fill='%23e0a030'/><rect x='11' y='7' width='1' height='1' fill='%236b4210'/><rect x='0' y='8' width='1' height='1' fill='%236b4210'/><rect x='1' y='8' width='1' height='1' fill='%23e0a030'/><rect x='2' y='8' width='1' height='1' fill='%23ffe9a8'/><rect x='3' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='8' width='1' height='1' fill='%23ffe9a8'/><rect x='10' y='8' width='1' height='1' fill='%23e0a030'/><rect x='11' y='8' width='1' height='1' fill='%236b4210'/><rect x='0' y='9' width='1' height='1' fill='%236b4210'/><rect x='1' y='9' width='1' height='1' fill='%23e0a030'/><rect x='2' y='9' width='1' height='1' fill='%23e0a030'/><rect x='3' y='9' width='1' height='1' fill='%23e0a030'/><rect x='4' y='9' width='1' height='1' fill='%23e0a030'/><rect x='5' y='9' width='1' height='1' fill='%23e0a030'/><rect x='6' y='9' width='1' height='1' fill='%23e0a030'/><rect x='7' y='9' width='1' height='1' fill='%23e0a030'/><rect x='8' y='9' width='1' height='1' fill='%23e0a030'/><rect x='9' y='9' width='1' height='1' fill='%23e0a030'/><rect x='10' y='9' width='1' height='1' fill='%23e0a030'/><rect x='11' y='9' width='1' height='1' fill='%236b4210'/><rect x='1' y='10' width='1' height='1' fill='%236b4210'/><rect x='2' y='10' width='1' height='1' fill='%23e0a030'/><rect x='3' y='10' width='1' height='1' fill='%23e0a030'/><rect x='4' y='10' width='1' height='1' fill='%23e0a030'/><rect x='5' y='10' width='1' height='1' fill='%23e0a030'/><rect x='6' y='10' width='1' height='1' fill='%23e0a030'/><rect x='7' y='10' width='1' height='1' fill='%23e0a030'/><rect x='8' y='10' width='1' height='1' fill='%23e0a030'/><rect x='9' y='10' width='1' height='1' fill='%23e0a030'/><rect x='10' y='10' width='1' height='1' fill='%236b4210'/><rect x='2' y='11' width='1' height='1' fill='%236b4210'/><rect x='3' y='11' width='1' height='1' fill='%236b4210'/><rect x='4' y='11' width='1' height='1' fill='%236b4210'/><rect x='5' y='11' width='1' height='1' fill='%236b4210'/><rect x='6' y='11' width='1' height='1' fill='%236b4210'/><rect x='7' y='11' width='1' height='1' fill='%236b4210'/><rect x='8' y='11' width='1' height='1' fill='%236b4210'/><rect x='9' y='11' width='1' height='1' fill='%236b4210'/></svg>"); }
.pxf { border-style: solid !important; border-width: 8px !important; border-radius: 0 !important; border-image: var(--pxf-light) 4 fill / 8px / 0 stretch; background: transparent !important; box-shadow: none !important; }
/* Taverne */
.tavern { padding: 0; }
.tv-head { display: flex; justify-content: space-between; align-items: center; }
.tv-head h2 { margin: 0; font-family: "Pixelify Sans", var(--px); font-weight: 600; letter-spacing: .02em; color: #4a2e14; }
.tv-head .gold { font-weight: 800; color: #6b4a14; display: inline-flex; align-items: center; gap: 4px; }
.tv-free { margin: 2px 0 0; font-size: .8rem; font-weight: 800; color: #3f8a52; }
.tv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.tv-off { position: relative; display: grid; justify-items: center; gap: 1px; padding: 4px 2px 6px; cursor: pointer; color: #3a2a18; min-width: 0; }
.tv-off.sel { border-image-source: var(--pxf-gold) !important; transform: translateY(-2px); }
.tv-off.s3 .tv-spr { filter: drop-shadow(0 0 4px rgba(240,190,60,.9)); }
.tv-off.cant { opacity: .6; } .tv-off.sold { opacity: .45; }
.tv-stars .stars { font-size: .7rem; color: #e0a030; } .tv-stars .stars i { color: rgba(120,90,50,.3); font-style: normal; }
.tv-spr svg { width: 44px; height: 51px; display: block; shape-rendering: crispEdges; }
.tv-name { font-size: .82rem; line-height: 1.05; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-sub { display: inline-flex; align-items: center; gap: 3px; font-size: .64rem; color: #7a6a52; }
.tv-sub .role-ico { font-size: .7rem; }
.tv-cmp { min-height: 12px; }
.tv-price { font-size: .74rem; font-weight: 800; color: #6b4a14; display: inline-flex; align-items: center; gap: 2px; }
.tv-price.no { color: #b0573a; }
.tv-rec { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: .55rem; font-weight: 800; color: #fff; background: #e0a030; padding: 0 5px; border: 1px solid #6b4210; }
.pa { display: inline-flex; gap: 1px; vertical-align: middle; margin-left: 3px; font-style: normal; font-weight: 800; font-size: .7rem; color: #8a7a62; }
.pa svg { width: 10px; height: 6px; shape-rendering: crispEdges; }
.pa.pa-up svg { fill: #3f8a52; } .pa.pa-dn svg { fill: #c2412f; }
.tv-detail { margin-top: 8px; padding: 6px 8px; text-align: left; }
.tv-d-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tv-d-head small { width: 100%; color: #8a7a62; font-size: .68rem; }
.tv-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0; font-size: .8rem; }
.tv-st i { font-style: normal; margin-right: 2px; }
.tv-ab { margin: 3px 0; font-size: .76rem; color: #5a4a36; line-height: 1.3; }
.tv-ab.ult { color: #8a5a1a; }
.tv-buy { width: 100%; margin-top: 6px; }
.tv-crew-head { display: flex; justify-content: space-between; align-items: center; margin: 10px 2px 4px; font-weight: 800; font-size: .8rem; color: #5a3a1e; }
.tv-crew-head small { font-weight: 600; color: #8a7a62; }
.tv-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; }
.tv-mem { display: grid; justify-items: center; padding: 2px 2px 4px; font-size: .66rem; min-width: 0; }
.tv-mem.weak { border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'><rect x='2' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='3' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='4' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='5' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='6' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='7' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='8' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='9' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='1' width='1' height='1' fill='%237a2a1e'/><rect x='2' y='1' width='1' height='1' fill='%23d0574a'/><rect x='3' y='1' width='1' height='1' fill='%23d0574a'/><rect x='4' y='1' width='1' height='1' fill='%23d0574a'/><rect x='5' y='1' width='1' height='1' fill='%23d0574a'/><rect x='6' y='1' width='1' height='1' fill='%23d0574a'/><rect x='7' y='1' width='1' height='1' fill='%23d0574a'/><rect x='8' y='1' width='1' height='1' fill='%23d0574a'/><rect x='9' y='1' width='1' height='1' fill='%23d0574a'/><rect x='10' y='1' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='2' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='2' width='1' height='1' fill='%23d0574a'/><rect x='2' y='2' width='1' height='1' fill='%23f6b4a8'/><rect x='3' y='2' width='1' height='1' fill='%23f6b4a8'/><rect x='4' y='2' width='1' height='1' fill='%23f6b4a8'/><rect x='5' y='2' width='1' height='1' fill='%23f6b4a8'/><rect x='6' y='2' width='1' height='1' fill='%23f6b4a8'/><rect x='7' y='2' width='1' height='1' fill='%23f6b4a8'/><rect x='8' y='2' width='1' height='1' fill='%23f6b4a8'/><rect x='9' y='2' width='1' height='1' fill='%23f6b4a8'/><rect x='10' y='2' width='1' height='1' fill='%23d0574a'/><rect x='11' y='2' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='3' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='3' width='1' height='1' fill='%23d0574a'/><rect x='2' y='3' width='1' height='1' fill='%23f6b4a8'/><rect x='3' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='3' width='1' height='1' fill='%23f6b4a8'/><rect x='10' y='3' width='1' height='1' fill='%23d0574a'/><rect x='11' y='3' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='4' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='4' width='1' height='1' fill='%23d0574a'/><rect x='2' y='4' width='1' height='1' fill='%23f6b4a8'/><rect x='3' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='4' width='1' height='1' fill='%23f6b4a8'/><rect x='10' y='4' width='1' height='1' fill='%23d0574a'/><rect x='11' y='4' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='5' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='5' width='1' height='1' fill='%23d0574a'/><rect x='2' y='5' width='1' height='1' fill='%23f6b4a8'/><rect x='3' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='5' width='1' height='1' fill='%23f6b4a8'/><rect x='10' y='5' width='1' height='1' fill='%23d0574a'/><rect x='11' y='5' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='6' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='6' width='1' height='1' fill='%23d0574a'/><rect x='2' y='6' width='1' height='1' fill='%23f6b4a8'/><rect x='3' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='6' width='1' height='1' fill='%23f6b4a8'/><rect x='10' y='6' width='1' height='1' fill='%23d0574a'/><rect x='11' y='6' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='7' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='7' width='1' height='1' fill='%23d0574a'/><rect x='2' y='7' width='1' height='1' fill='%23f6b4a8'/><rect x='3' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='7' width='1' height='1' fill='%23f6b4a8'/><rect x='10' y='7' width='1' height='1' fill='%23d0574a'/><rect x='11' y='7' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='8' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='8' width='1' height='1' fill='%23d0574a'/><rect x='2' y='8' width='1' height='1' fill='%23f6b4a8'/><rect x='3' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='8' width='1' height='1' fill='%23f6b4a8'/><rect x='10' y='8' width='1' height='1' fill='%23d0574a'/><rect x='11' y='8' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='9' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='9' width='1' height='1' fill='%23d0574a'/><rect x='2' y='9' width='1' height='1' fill='%23d0574a'/><rect x='3' y='9' width='1' height='1' fill='%23d0574a'/><rect x='4' y='9' width='1' height='1' fill='%23d0574a'/><rect x='5' y='9' width='1' height='1' fill='%23d0574a'/><rect x='6' y='9' width='1' height='1' fill='%23d0574a'/><rect x='7' y='9' width='1' height='1' fill='%23d0574a'/><rect x='8' y='9' width='1' height='1' fill='%23d0574a'/><rect x='9' y='9' width='1' height='1' fill='%23d0574a'/><rect x='10' y='9' width='1' height='1' fill='%23d0574a'/><rect x='11' y='9' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='10' width='1' height='1' fill='%237a2a1e'/><rect x='2' y='10' width='1' height='1' fill='%23d0574a'/><rect x='3' y='10' width='1' height='1' fill='%23d0574a'/><rect x='4' y='10' width='1' height='1' fill='%23d0574a'/><rect x='5' y='10' width='1' height='1' fill='%23d0574a'/><rect x='6' y='10' width='1' height='1' fill='%23d0574a'/><rect x='7' y='10' width='1' height='1' fill='%23d0574a'/><rect x='8' y='10' width='1' height='1' fill='%23d0574a'/><rect x='9' y='10' width='1' height='1' fill='%23d0574a'/><rect x='10' y='10' width='1' height='1' fill='%237a2a1e'/><rect x='2' y='11' width='1' height='1' fill='%237a2a1e'/><rect x='3' y='11' width='1' height='1' fill='%237a2a1e'/><rect x='4' y='11' width='1' height='1' fill='%237a2a1e'/><rect x='5' y='11' width='1' height='1' fill='%237a2a1e'/><rect x='6' y='11' width='1' height='1' fill='%237a2a1e'/><rect x='7' y='11' width='1' height='1' fill='%237a2a1e'/><rect x='8' y='11' width='1' height='1' fill='%237a2a1e'/><rect x='9' y='11' width='1' height='1' fill='%237a2a1e'/></svg>") !important; }
.tv-mem i svg { width: 28px; height: 33px; shape-rendering: crispEdges; }
.tv-mem small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tv-mem em { font-style: normal; color: #8a7a62; }
.tv-x { margin-top: 2px; font-size: .6rem; font-weight: 800; color: #9a3a2a; background: #fff3ee; border: 1px solid #d8a090; padding: 0 4px; cursor: pointer; }
.tv-cap { font-size: .58rem; color: #8a6d48; }
.tv-actions { display: grid; gap: 6px; margin-top: 10px; }
.harbor-box.pxf { padding: 6px 10px; margin-bottom: 8px; }
.harbor-box.pxf small { display: block; color: #6b5a44; font-size: .74rem; }
.weak-key { display: inline-block; width: 10px; height: 10px; background: #d0574a; border: 2px solid #7a2a1e; vertical-align: middle; }

/* Die große Spielfläche überall im Pixel-Holzrahmen (auch im Run) */
:root:not([data-theme="dark"]) .stage { border-style: solid !important; border-width: 10px !important; border-radius: 0 !important;
  border-image: var(--pxf) 4 fill / 10px / 0 stretch !important; background: transparent !important; box-shadow: 0 10px 24px -14px rgba(40,25,10,.6) !important; }
:root:not([data-theme="dark"]) body:not(.in-run) .stage { border-image: var(--pxf) 4 fill / 10px / 0 stretch !important; }
.tv-detail .gain { display: block; margin: 4px 0; font-size: .74rem !important; font-weight: 700; color: #3f8a52; line-height: 1.3; }
/* Hafen-Schilder, Aktions-Schilder und Fenster im Pixel-Rahmen */
.hub-tile, .ad-tile { border-style: solid !important; border-width: 8px !important; border-radius: 0 !important; border-image: var(--pxf-light) 4 fill / 8px / 0 stretch !important; background: transparent !important; box-shadow: none !important; padding: 2px 2px 4px !important; }
.ad-tile.hot { border-image-source: var(--pxf-gold) !important; }
.hub-tile:active, .ad-tile:active { transform: translateY(2px); }
:root:not([data-theme="dark"]) .fpop-card { border-style: solid !important; border-width: 12px !important; border-radius: 0 !important; border-image: var(--pxf) 4 fill / 12px / 0 stretch !important; background: transparent !important; box-shadow: 0 16px 36px -12px rgba(40,25,10,.6) !important; }
:root:not([data-theme="dark"]) .hq-sail { border-style: solid !important; border-width: 8px !important; border-radius: 0 !important; border-image: var(--pxf-light) 4 fill / 8px / 0 stretch !important; background: transparent !important; box-shadow: none !important; }
:root:not([data-theme="dark"]) .hq-sail .sail-stage { border-radius: 0 !important; }
.es-sea, :root:not([data-theme="dark"]) .hq-bar .portrait-chip, :root:not([data-theme="dark"]) .hq-bar .berry, .heat-pill, .tv-detail, .cg-card, .match-pop .mp-chance {
  border-style: solid !important; border-width: 6px !important; border-radius: 0 !important; border-image: var(--pxf-light) 4 fill / 6px / 0 stretch !important; background: transparent !important; box-shadow: none !important; }
.es-sea.off { opacity: .5; }
/* Knöpfe: eckiger, wie Holzbretter */
:root:not([data-theme="dark"]) .btn { border-radius: 4px !important; }
:root:not([data-theme="dark"]) .hq-bar .pf-chip { border-style: solid !important; border-width: 6px !important; border-radius: 0 !important; border-image: var(--pxf-light) 4 fill / 6px / 0 stretch !important; background: transparent !important; box-shadow: none !important; }
/* Run-Ansicht entschlacken: Wenn links die Boni-Leiste steht, nicht nochmal unter der Crew zeigen */
@media (min-width: 1280px) { #syn .syn-row, #syn .syn-pending { display: none !important; } }
/* Crew-Detailkarten im Pixel-Rahmen, kompakter */
:root:not([data-theme="dark"]) #crew:not(.compact) .member, :root:not([data-theme="dark"]) .crewmini { border-radius: 0 !important; }
:root:not([data-theme="dark"]) .traits .tr-row, :root:not([data-theme="dark"]) .traits > div:not(.tr-head) { border-radius: 0 !important; }
:root:not([data-theme="dark"]) #crew .u.member, :root:not([data-theme="dark"]) .traits .tr { border-style: solid !important; border-width: 6px !important; border-radius: 0 !important;
  border-image: var(--pxf-light) 4 fill / 6px / 0 stretch !important; background: transparent !important; box-shadow: none !important; }
:root:not([data-theme="dark"]) .traits .tr.tr-set { border-image-source: var(--pxf-gold) !important; }

/* ===== Runder gezeichnete Pixel-Rahmen (überschreibt die eckigen), Knöpfe mit Tiefe, sanfte Fenster ===== */
:root { --pxf: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='4' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='5' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='6' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='7' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='8' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='9' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='10' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='11' y='0' width='1' height='1' fill='%235b3a1e'/><rect x='2' y='1' width='1' height='1' fill='%235b3a1e'/><rect x='3' y='1' width='1' height='1' fill='%235b3a1e'/><rect x='4' y='1' width='1' height='1' fill='%23b8783a'/><rect x='5' y='1' width='1' height='1' fill='%23b8783a'/><rect x='6' y='1' width='1' height='1' fill='%23b8783a'/><rect x='7' y='1' width='1' height='1' fill='%23b8783a'/><rect x='8' y='1' width='1' height='1' fill='%23b8783a'/><rect x='9' y='1' width='1' height='1' fill='%23b8783a'/><rect x='10' y='1' width='1' height='1' fill='%23b8783a'/><rect x='11' y='1' width='1' height='1' fill='%23b8783a'/><rect x='12' y='1' width='1' height='1' fill='%235b3a1e'/><rect x='13' y='1' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='2' width='1' height='1' fill='%235b3a1e'/><rect x='2' y='2' width='1' height='1' fill='%23b8783a'/><rect x='3' y='2' width='1' height='1' fill='%23b8783a'/><rect x='4' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='5' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='6' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='7' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='8' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='9' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='10' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='11' y='2' width='1' height='1' fill='%23f3c98a'/><rect x='12' y='2' width='1' height='1' fill='%23b8783a'/><rect x='13' y='2' width='1' height='1' fill='%23b8783a'/><rect x='14' y='2' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='3' width='1' height='1' fill='%235b3a1e'/><rect x='2' y='3' width='1' height='1' fill='%23b8783a'/><rect x='3' y='3' width='1' height='1' fill='%23f3c98a'/><rect x='4' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='10' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='11' y='3' width='1' height='1' fill='%23fbecc8'/><rect x='12' y='3' width='1' height='1' fill='%23f3c98a'/><rect x='13' y='3' width='1' height='1' fill='%23b8783a'/><rect x='14' y='3' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='4' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='4' width='1' height='1' fill='%23b8783a'/><rect x='2' y='4' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='10' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='11' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='12' y='4' width='1' height='1' fill='%23fbecc8'/><rect x='13' y='4' width='1' height='1' fill='%23f3c98a'/><rect x='14' y='4' width='1' height='1' fill='%23b8783a'/><rect x='15' y='4' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='5' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='5' width='1' height='1' fill='%23b8783a'/><rect x='2' y='5' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='10' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='11' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='12' y='5' width='1' height='1' fill='%23fbecc8'/><rect x='13' y='5' width='1' height='1' fill='%23f3c98a'/><rect x='14' y='5' width='1' height='1' fill='%23b8783a'/><rect x='15' y='5' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='6' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='6' width='1' height='1' fill='%23b8783a'/><rect x='2' y='6' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='10' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='11' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='12' y='6' width='1' height='1' fill='%23fbecc8'/><rect x='13' y='6' width='1' height='1' fill='%23f3c98a'/><rect x='14' y='6' width='1' height='1' fill='%23b8783a'/><rect x='15' y='6' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='7' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='7' width='1' height='1' fill='%23b8783a'/><rect x='2' y='7' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='10' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='11' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='12' y='7' width='1' height='1' fill='%23fbecc8'/><rect x='13' y='7' width='1' height='1' fill='%23f3c98a'/><rect x='14' y='7' width='1' height='1' fill='%23b8783a'/><rect x='15' y='7' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='8' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='8' width='1' height='1' fill='%23b8783a'/><rect x='2' y='8' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='10' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='11' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='12' y='8' width='1' height='1' fill='%23fbecc8'/><rect x='13' y='8' width='1' height='1' fill='%23f3c98a'/><rect x='14' y='8' width='1' height='1' fill='%23b8783a'/><rect x='15' y='8' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='9' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='9' width='1' height='1' fill='%23b8783a'/><rect x='2' y='9' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='9' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='9' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='9' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='9' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='9' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='9' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='9' width='1' height='1' fill='%23fbecc8'/><rect x='10' y='9' width='1' height='1' fill='%23fbecc8'/><rect x='11' y='9' width='1' height='1' fill='%23fbecc8'/><rect x='12' y='9' width='1' height='1' fill='%23fbecc8'/><rect x='13' y='9' width='1' height='1' fill='%23f3c98a'/><rect x='14' y='9' width='1' height='1' fill='%23b8783a'/><rect x='15' y='9' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='10' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='10' width='1' height='1' fill='%23b8783a'/><rect x='2' y='10' width='1' height='1' fill='%23f3c98a'/><rect x='3' y='10' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='10' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='10' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='10' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='10' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='10' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='10' width='1' height='1' fill='%23fbecc8'/><rect x='10' y='10' width='1' height='1' fill='%23fbecc8'/><rect x='11' y='10' width='1' height='1' fill='%23fbecc8'/><rect x='12' y='10' width='1' height='1' fill='%23fbecc8'/><rect x='13' y='10' width='1' height='1' fill='%23f3c98a'/><rect x='14' y='10' width='1' height='1' fill='%23b8783a'/><rect x='15' y='10' width='1' height='1' fill='%235b3a1e'/><rect x='0' y='11' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='11' width='1' height='1' fill='%23b8783a'/><rect x='2' y='11' width='1' height='1' fill='%23ecd4a4'/><rect x='3' y='11' width='1' height='1' fill='%23fbecc8'/><rect x='4' y='11' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='11' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='11' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='11' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='11' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='11' width='1' height='1' fill='%23fbecc8'/><rect x='10' y='11' width='1' height='1' fill='%23fbecc8'/><rect x='11' y='11' width='1' height='1' fill='%23fbecc8'/><rect x='12' y='11' width='1' height='1' fill='%23fbecc8'/><rect x='13' y='11' width='1' height='1' fill='%23ecd4a4'/><rect x='14' y='11' width='1' height='1' fill='%23b8783a'/><rect x='15' y='11' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='12' width='1' height='1' fill='%235b3a1e'/><rect x='2' y='12' width='1' height='1' fill='%23b8783a'/><rect x='3' y='12' width='1' height='1' fill='%23ecd4a4'/><rect x='4' y='12' width='1' height='1' fill='%23fbecc8'/><rect x='5' y='12' width='1' height='1' fill='%23fbecc8'/><rect x='6' y='12' width='1' height='1' fill='%23fbecc8'/><rect x='7' y='12' width='1' height='1' fill='%23fbecc8'/><rect x='8' y='12' width='1' height='1' fill='%23fbecc8'/><rect x='9' y='12' width='1' height='1' fill='%23fbecc8'/><rect x='10' y='12' width='1' height='1' fill='%23fbecc8'/><rect x='11' y='12' width='1' height='1' fill='%23fbecc8'/><rect x='12' y='12' width='1' height='1' fill='%23ecd4a4'/><rect x='13' y='12' width='1' height='1' fill='%23b8783a'/><rect x='14' y='12' width='1' height='1' fill='%235b3a1e'/><rect x='1' y='13' width='1' height='1' fill='%235b3a1e'/><rect x='2' y='13' width='1' height='1' fill='%23b8783a'/><rect x='3' y='13' width='1' height='1' fill='%23b8783a'/><rect x='4' y='13' width='1' height='1' fill='%23b8783a'/><rect x='5' y='13' width='1' height='1' fill='%23b8783a'/><rect x='6' y='13' width='1' height='1' fill='%23b8783a'/><rect x='7' y='13' width='1' height='1' fill='%23b8783a'/><rect x='8' y='13' width='1' height='1' fill='%23b8783a'/><rect x='9' y='13' width='1' height='1' fill='%23b8783a'/><rect x='10' y='13' width='1' height='1' fill='%23b8783a'/><rect x='11' y='13' width='1' height='1' fill='%23b8783a'/><rect x='12' y='13' width='1' height='1' fill='%23b8783a'/><rect x='13' y='13' width='1' height='1' fill='%23b8783a'/><rect x='14' y='13' width='1' height='1' fill='%235b3a1e'/><rect x='2' y='14' width='1' height='1' fill='%235b3a1e'/><rect x='3' y='14' width='1' height='1' fill='%235b3a1e'/><rect x='4' y='14' width='1' height='1' fill='%23b8783a'/><rect x='5' y='14' width='1' height='1' fill='%23b8783a'/><rect x='6' y='14' width='1' height='1' fill='%23b8783a'/><rect x='7' y='14' width='1' height='1' fill='%23b8783a'/><rect x='8' y='14' width='1' height='1' fill='%23b8783a'/><rect x='9' y='14' width='1' height='1' fill='%23b8783a'/><rect x='10' y='14' width='1' height='1' fill='%23b8783a'/><rect x='11' y='14' width='1' height='1' fill='%23b8783a'/><rect x='12' y='14' width='1' height='1' fill='%235b3a1e'/><rect x='13' y='14' width='1' height='1' fill='%235b3a1e'/><rect x='4' y='15' width='1' height='1' fill='%235b3a1e'/><rect x='5' y='15' width='1' height='1' fill='%235b3a1e'/><rect x='6' y='15' width='1' height='1' fill='%235b3a1e'/><rect x='7' y='15' width='1' height='1' fill='%235b3a1e'/><rect x='8' y='15' width='1' height='1' fill='%235b3a1e'/><rect x='9' y='15' width='1' height='1' fill='%235b3a1e'/><rect x='10' y='15' width='1' height='1' fill='%235b3a1e'/><rect x='11' y='15' width='1' height='1' fill='%235b3a1e'/></svg>"); --pxf-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='4' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='5' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='6' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='7' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='8' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='9' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='10' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='11' y='0' width='1' height='1' fill='%238a5a2e'/><rect x='2' y='1' width='1' height='1' fill='%238a5a2e'/><rect x='3' y='1' width='1' height='1' fill='%238a5a2e'/><rect x='4' y='1' width='1' height='1' fill='%23d9a466'/><rect x='5' y='1' width='1' height='1' fill='%23d9a466'/><rect x='6' y='1' width='1' height='1' fill='%23d9a466'/><rect x='7' y='1' width='1' height='1' fill='%23d9a466'/><rect x='8' y='1' width='1' height='1' fill='%23d9a466'/><rect x='9' y='1' width='1' height='1' fill='%23d9a466'/><rect x='10' y='1' width='1' height='1' fill='%23d9a466'/><rect x='11' y='1' width='1' height='1' fill='%23d9a466'/><rect x='12' y='1' width='1' height='1' fill='%238a5a2e'/><rect x='13' y='1' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='2' width='1' height='1' fill='%238a5a2e'/><rect x='2' y='2' width='1' height='1' fill='%23d9a466'/><rect x='3' y='2' width='1' height='1' fill='%23d9a466'/><rect x='4' y='2' width='1' height='1' fill='%23fff1d0'/><rect x='5' y='2' width='1' height='1' fill='%23fff1d0'/><rect x='6' y='2' width='1' height='1' fill='%23fff1d0'/><rect x='7' y='2' width='1' height='1' fill='%23fff1d0'/><rect x='8' y='2' width='1' height='1' fill='%23fff1d0'/><rect x='9' y='2' width='1' height='1' fill='%23fff1d0'/><rect x='10' y='2' width='1' height='1' fill='%23fff1d0'/><rect x='11' y='2' width='1' height='1' fill='%23fff1d0'/><rect x='12' y='2' width='1' height='1' fill='%23d9a466'/><rect x='13' y='2' width='1' height='1' fill='%23d9a466'/><rect x='14' y='2' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='3' width='1' height='1' fill='%238a5a2e'/><rect x='2' y='3' width='1' height='1' fill='%23d9a466'/><rect x='3' y='3' width='1' height='1' fill='%23fff1d0'/><rect x='4' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='10' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='11' y='3' width='1' height='1' fill='%23fff6e2'/><rect x='12' y='3' width='1' height='1' fill='%23fff1d0'/><rect x='13' y='3' width='1' height='1' fill='%23d9a466'/><rect x='14' y='3' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='4' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='4' width='1' height='1' fill='%23d9a466'/><rect x='2' y='4' width='1' height='1' fill='%23fff1d0'/><rect x='3' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='10' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='11' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='12' y='4' width='1' height='1' fill='%23fff6e2'/><rect x='13' y='4' width='1' height='1' fill='%23fff1d0'/><rect x='14' y='4' width='1' height='1' fill='%23d9a466'/><rect x='15' y='4' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='5' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='5' width='1' height='1' fill='%23d9a466'/><rect x='2' y='5' width='1' height='1' fill='%23fff1d0'/><rect x='3' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='10' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='11' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='12' y='5' width='1' height='1' fill='%23fff6e2'/><rect x='13' y='5' width='1' height='1' fill='%23fff1d0'/><rect x='14' y='5' width='1' height='1' fill='%23d9a466'/><rect x='15' y='5' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='6' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='6' width='1' height='1' fill='%23d9a466'/><rect x='2' y='6' width='1' height='1' fill='%23fff1d0'/><rect x='3' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='10' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='11' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='12' y='6' width='1' height='1' fill='%23fff6e2'/><rect x='13' y='6' width='1' height='1' fill='%23fff1d0'/><rect x='14' y='6' width='1' height='1' fill='%23d9a466'/><rect x='15' y='6' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='7' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='7' width='1' height='1' fill='%23d9a466'/><rect x='2' y='7' width='1' height='1' fill='%23fff1d0'/><rect x='3' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='10' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='11' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='12' y='7' width='1' height='1' fill='%23fff6e2'/><rect x='13' y='7' width='1' height='1' fill='%23fff1d0'/><rect x='14' y='7' width='1' height='1' fill='%23d9a466'/><rect x='15' y='7' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='8' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='8' width='1' height='1' fill='%23d9a466'/><rect x='2' y='8' width='1' height='1' fill='%23fff1d0'/><rect x='3' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='10' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='11' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='12' y='8' width='1' height='1' fill='%23fff6e2'/><rect x='13' y='8' width='1' height='1' fill='%23fff1d0'/><rect x='14' y='8' width='1' height='1' fill='%23d9a466'/><rect x='15' y='8' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='9' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='9' width='1' height='1' fill='%23d9a466'/><rect x='2' y='9' width='1' height='1' fill='%23fff1d0'/><rect x='3' y='9' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='9' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='9' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='9' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='9' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='9' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='9' width='1' height='1' fill='%23fff6e2'/><rect x='10' y='9' width='1' height='1' fill='%23fff6e2'/><rect x='11' y='9' width='1' height='1' fill='%23fff6e2'/><rect x='12' y='9' width='1' height='1' fill='%23fff6e2'/><rect x='13' y='9' width='1' height='1' fill='%23fff1d0'/><rect x='14' y='9' width='1' height='1' fill='%23d9a466'/><rect x='15' y='9' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='10' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='10' width='1' height='1' fill='%23d9a466'/><rect x='2' y='10' width='1' height='1' fill='%23fff1d0'/><rect x='3' y='10' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='10' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='10' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='10' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='10' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='10' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='10' width='1' height='1' fill='%23fff6e2'/><rect x='10' y='10' width='1' height='1' fill='%23fff6e2'/><rect x='11' y='10' width='1' height='1' fill='%23fff6e2'/><rect x='12' y='10' width='1' height='1' fill='%23fff6e2'/><rect x='13' y='10' width='1' height='1' fill='%23fff1d0'/><rect x='14' y='10' width='1' height='1' fill='%23d9a466'/><rect x='15' y='10' width='1' height='1' fill='%238a5a2e'/><rect x='0' y='11' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='11' width='1' height='1' fill='%23d9a466'/><rect x='2' y='11' width='1' height='1' fill='%23f1e0bc'/><rect x='3' y='11' width='1' height='1' fill='%23fff6e2'/><rect x='4' y='11' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='11' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='11' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='11' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='11' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='11' width='1' height='1' fill='%23fff6e2'/><rect x='10' y='11' width='1' height='1' fill='%23fff6e2'/><rect x='11' y='11' width='1' height='1' fill='%23fff6e2'/><rect x='12' y='11' width='1' height='1' fill='%23fff6e2'/><rect x='13' y='11' width='1' height='1' fill='%23f1e0bc'/><rect x='14' y='11' width='1' height='1' fill='%23d9a466'/><rect x='15' y='11' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='12' width='1' height='1' fill='%238a5a2e'/><rect x='2' y='12' width='1' height='1' fill='%23d9a466'/><rect x='3' y='12' width='1' height='1' fill='%23f1e0bc'/><rect x='4' y='12' width='1' height='1' fill='%23fff6e2'/><rect x='5' y='12' width='1' height='1' fill='%23fff6e2'/><rect x='6' y='12' width='1' height='1' fill='%23fff6e2'/><rect x='7' y='12' width='1' height='1' fill='%23fff6e2'/><rect x='8' y='12' width='1' height='1' fill='%23fff6e2'/><rect x='9' y='12' width='1' height='1' fill='%23fff6e2'/><rect x='10' y='12' width='1' height='1' fill='%23fff6e2'/><rect x='11' y='12' width='1' height='1' fill='%23fff6e2'/><rect x='12' y='12' width='1' height='1' fill='%23f1e0bc'/><rect x='13' y='12' width='1' height='1' fill='%23d9a466'/><rect x='14' y='12' width='1' height='1' fill='%238a5a2e'/><rect x='1' y='13' width='1' height='1' fill='%238a5a2e'/><rect x='2' y='13' width='1' height='1' fill='%23d9a466'/><rect x='3' y='13' width='1' height='1' fill='%23d9a466'/><rect x='4' y='13' width='1' height='1' fill='%23d9a466'/><rect x='5' y='13' width='1' height='1' fill='%23d9a466'/><rect x='6' y='13' width='1' height='1' fill='%23d9a466'/><rect x='7' y='13' width='1' height='1' fill='%23d9a466'/><rect x='8' y='13' width='1' height='1' fill='%23d9a466'/><rect x='9' y='13' width='1' height='1' fill='%23d9a466'/><rect x='10' y='13' width='1' height='1' fill='%23d9a466'/><rect x='11' y='13' width='1' height='1' fill='%23d9a466'/><rect x='12' y='13' width='1' height='1' fill='%23d9a466'/><rect x='13' y='13' width='1' height='1' fill='%23d9a466'/><rect x='14' y='13' width='1' height='1' fill='%238a5a2e'/><rect x='2' y='14' width='1' height='1' fill='%238a5a2e'/><rect x='3' y='14' width='1' height='1' fill='%238a5a2e'/><rect x='4' y='14' width='1' height='1' fill='%23d9a466'/><rect x='5' y='14' width='1' height='1' fill='%23d9a466'/><rect x='6' y='14' width='1' height='1' fill='%23d9a466'/><rect x='7' y='14' width='1' height='1' fill='%23d9a466'/><rect x='8' y='14' width='1' height='1' fill='%23d9a466'/><rect x='9' y='14' width='1' height='1' fill='%23d9a466'/><rect x='10' y='14' width='1' height='1' fill='%23d9a466'/><rect x='11' y='14' width='1' height='1' fill='%23d9a466'/><rect x='12' y='14' width='1' height='1' fill='%238a5a2e'/><rect x='13' y='14' width='1' height='1' fill='%238a5a2e'/><rect x='4' y='15' width='1' height='1' fill='%238a5a2e'/><rect x='5' y='15' width='1' height='1' fill='%238a5a2e'/><rect x='6' y='15' width='1' height='1' fill='%238a5a2e'/><rect x='7' y='15' width='1' height='1' fill='%238a5a2e'/><rect x='8' y='15' width='1' height='1' fill='%238a5a2e'/><rect x='9' y='15' width='1' height='1' fill='%238a5a2e'/><rect x='10' y='15' width='1' height='1' fill='%238a5a2e'/><rect x='11' y='15' width='1' height='1' fill='%238a5a2e'/></svg>"); --pxf-gold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='4' y='0' width='1' height='1' fill='%236b4210'/><rect x='5' y='0' width='1' height='1' fill='%236b4210'/><rect x='6' y='0' width='1' height='1' fill='%236b4210'/><rect x='7' y='0' width='1' height='1' fill='%236b4210'/><rect x='8' y='0' width='1' height='1' fill='%236b4210'/><rect x='9' y='0' width='1' height='1' fill='%236b4210'/><rect x='10' y='0' width='1' height='1' fill='%236b4210'/><rect x='11' y='0' width='1' height='1' fill='%236b4210'/><rect x='2' y='1' width='1' height='1' fill='%236b4210'/><rect x='3' y='1' width='1' height='1' fill='%236b4210'/><rect x='4' y='1' width='1' height='1' fill='%23e0a030'/><rect x='5' y='1' width='1' height='1' fill='%23e0a030'/><rect x='6' y='1' width='1' height='1' fill='%23e0a030'/><rect x='7' y='1' width='1' height='1' fill='%23e0a030'/><rect x='8' y='1' width='1' height='1' fill='%23e0a030'/><rect x='9' y='1' width='1' height='1' fill='%23e0a030'/><rect x='10' y='1' width='1' height='1' fill='%23e0a030'/><rect x='11' y='1' width='1' height='1' fill='%23e0a030'/><rect x='12' y='1' width='1' height='1' fill='%236b4210'/><rect x='13' y='1' width='1' height='1' fill='%236b4210'/><rect x='1' y='2' width='1' height='1' fill='%236b4210'/><rect x='2' y='2' width='1' height='1' fill='%23e0a030'/><rect x='3' y='2' width='1' height='1' fill='%23e0a030'/><rect x='4' y='2' width='1' height='1' fill='%23fff0b8'/><rect x='5' y='2' width='1' height='1' fill='%23fff0b8'/><rect x='6' y='2' width='1' height='1' fill='%23fff0b8'/><rect x='7' y='2' width='1' height='1' fill='%23fff0b8'/><rect x='8' y='2' width='1' height='1' fill='%23fff0b8'/><rect x='9' y='2' width='1' height='1' fill='%23fff0b8'/><rect x='10' y='2' width='1' height='1' fill='%23fff0b8'/><rect x='11' y='2' width='1' height='1' fill='%23fff0b8'/><rect x='12' y='2' width='1' height='1' fill='%23e0a030'/><rect x='13' y='2' width='1' height='1' fill='%23e0a030'/><rect x='14' y='2' width='1' height='1' fill='%236b4210'/><rect x='1' y='3' width='1' height='1' fill='%236b4210'/><rect x='2' y='3' width='1' height='1' fill='%23e0a030'/><rect x='3' y='3' width='1' height='1' fill='%23fff0b8'/><rect x='4' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='10' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='11' y='3' width='1' height='1' fill='%23fff3d0'/><rect x='12' y='3' width='1' height='1' fill='%23fff0b8'/><rect x='13' y='3' width='1' height='1' fill='%23e0a030'/><rect x='14' y='3' width='1' height='1' fill='%236b4210'/><rect x='0' y='4' width='1' height='1' fill='%236b4210'/><rect x='1' y='4' width='1' height='1' fill='%23e0a030'/><rect x='2' y='4' width='1' height='1' fill='%23fff0b8'/><rect x='3' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='10' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='11' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='12' y='4' width='1' height='1' fill='%23fff3d0'/><rect x='13' y='4' width='1' height='1' fill='%23fff0b8'/><rect x='14' y='4' width='1' height='1' fill='%23e0a030'/><rect x='15' y='4' width='1' height='1' fill='%236b4210'/><rect x='0' y='5' width='1' height='1' fill='%236b4210'/><rect x='1' y='5' width='1' height='1' fill='%23e0a030'/><rect x='2' y='5' width='1' height='1' fill='%23fff0b8'/><rect x='3' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='10' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='11' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='12' y='5' width='1' height='1' fill='%23fff3d0'/><rect x='13' y='5' width='1' height='1' fill='%23fff0b8'/><rect x='14' y='5' width='1' height='1' fill='%23e0a030'/><rect x='15' y='5' width='1' height='1' fill='%236b4210'/><rect x='0' y='6' width='1' height='1' fill='%236b4210'/><rect x='1' y='6' width='1' height='1' fill='%23e0a030'/><rect x='2' y='6' width='1' height='1' fill='%23fff0b8'/><rect x='3' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='10' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='11' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='12' y='6' width='1' height='1' fill='%23fff3d0'/><rect x='13' y='6' width='1' height='1' fill='%23fff0b8'/><rect x='14' y='6' width='1' height='1' fill='%23e0a030'/><rect x='15' y='6' width='1' height='1' fill='%236b4210'/><rect x='0' y='7' width='1' height='1' fill='%236b4210'/><rect x='1' y='7' width='1' height='1' fill='%23e0a030'/><rect x='2' y='7' width='1' height='1' fill='%23fff0b8'/><rect x='3' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='10' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='11' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='12' y='7' width='1' height='1' fill='%23fff3d0'/><rect x='13' y='7' width='1' height='1' fill='%23fff0b8'/><rect x='14' y='7' width='1' height='1' fill='%23e0a030'/><rect x='15' y='7' width='1' height='1' fill='%236b4210'/><rect x='0' y='8' width='1' height='1' fill='%236b4210'/><rect x='1' y='8' width='1' height='1' fill='%23e0a030'/><rect x='2' y='8' width='1' height='1' fill='%23fff0b8'/><rect x='3' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='10' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='11' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='12' y='8' width='1' height='1' fill='%23fff3d0'/><rect x='13' y='8' width='1' height='1' fill='%23fff0b8'/><rect x='14' y='8' width='1' height='1' fill='%23e0a030'/><rect x='15' y='8' width='1' height='1' fill='%236b4210'/><rect x='0' y='9' width='1' height='1' fill='%236b4210'/><rect x='1' y='9' width='1' height='1' fill='%23e0a030'/><rect x='2' y='9' width='1' height='1' fill='%23fff0b8'/><rect x='3' y='9' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='9' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='9' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='9' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='9' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='9' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='9' width='1' height='1' fill='%23fff3d0'/><rect x='10' y='9' width='1' height='1' fill='%23fff3d0'/><rect x='11' y='9' width='1' height='1' fill='%23fff3d0'/><rect x='12' y='9' width='1' height='1' fill='%23fff3d0'/><rect x='13' y='9' width='1' height='1' fill='%23fff0b8'/><rect x='14' y='9' width='1' height='1' fill='%23e0a030'/><rect x='15' y='9' width='1' height='1' fill='%236b4210'/><rect x='0' y='10' width='1' height='1' fill='%236b4210'/><rect x='1' y='10' width='1' height='1' fill='%23e0a030'/><rect x='2' y='10' width='1' height='1' fill='%23fff0b8'/><rect x='3' y='10' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='10' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='10' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='10' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='10' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='10' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='10' width='1' height='1' fill='%23fff3d0'/><rect x='10' y='10' width='1' height='1' fill='%23fff3d0'/><rect x='11' y='10' width='1' height='1' fill='%23fff3d0'/><rect x='12' y='10' width='1' height='1' fill='%23fff3d0'/><rect x='13' y='10' width='1' height='1' fill='%23fff0b8'/><rect x='14' y='10' width='1' height='1' fill='%23e0a030'/><rect x='15' y='10' width='1' height='1' fill='%236b4210'/><rect x='0' y='11' width='1' height='1' fill='%236b4210'/><rect x='1' y='11' width='1' height='1' fill='%23e0a030'/><rect x='2' y='11' width='1' height='1' fill='%23f6e0a0'/><rect x='3' y='11' width='1' height='1' fill='%23fff3d0'/><rect x='4' y='11' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='11' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='11' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='11' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='11' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='11' width='1' height='1' fill='%23fff3d0'/><rect x='10' y='11' width='1' height='1' fill='%23fff3d0'/><rect x='11' y='11' width='1' height='1' fill='%23fff3d0'/><rect x='12' y='11' width='1' height='1' fill='%23fff3d0'/><rect x='13' y='11' width='1' height='1' fill='%23f6e0a0'/><rect x='14' y='11' width='1' height='1' fill='%23e0a030'/><rect x='15' y='11' width='1' height='1' fill='%236b4210'/><rect x='1' y='12' width='1' height='1' fill='%236b4210'/><rect x='2' y='12' width='1' height='1' fill='%23e0a030'/><rect x='3' y='12' width='1' height='1' fill='%23f6e0a0'/><rect x='4' y='12' width='1' height='1' fill='%23fff3d0'/><rect x='5' y='12' width='1' height='1' fill='%23fff3d0'/><rect x='6' y='12' width='1' height='1' fill='%23fff3d0'/><rect x='7' y='12' width='1' height='1' fill='%23fff3d0'/><rect x='8' y='12' width='1' height='1' fill='%23fff3d0'/><rect x='9' y='12' width='1' height='1' fill='%23fff3d0'/><rect x='10' y='12' width='1' height='1' fill='%23fff3d0'/><rect x='11' y='12' width='1' height='1' fill='%23fff3d0'/><rect x='12' y='12' width='1' height='1' fill='%23f6e0a0'/><rect x='13' y='12' width='1' height='1' fill='%23e0a030'/><rect x='14' y='12' width='1' height='1' fill='%236b4210'/><rect x='1' y='13' width='1' height='1' fill='%236b4210'/><rect x='2' y='13' width='1' height='1' fill='%23e0a030'/><rect x='3' y='13' width='1' height='1' fill='%23e0a030'/><rect x='4' y='13' width='1' height='1' fill='%23e0a030'/><rect x='5' y='13' width='1' height='1' fill='%23e0a030'/><rect x='6' y='13' width='1' height='1' fill='%23e0a030'/><rect x='7' y='13' width='1' height='1' fill='%23e0a030'/><rect x='8' y='13' width='1' height='1' fill='%23e0a030'/><rect x='9' y='13' width='1' height='1' fill='%23e0a030'/><rect x='10' y='13' width='1' height='1' fill='%23e0a030'/><rect x='11' y='13' width='1' height='1' fill='%23e0a030'/><rect x='12' y='13' width='1' height='1' fill='%23e0a030'/><rect x='13' y='13' width='1' height='1' fill='%23e0a030'/><rect x='14' y='13' width='1' height='1' fill='%236b4210'/><rect x='2' y='14' width='1' height='1' fill='%236b4210'/><rect x='3' y='14' width='1' height='1' fill='%236b4210'/><rect x='4' y='14' width='1' height='1' fill='%23e0a030'/><rect x='5' y='14' width='1' height='1' fill='%23e0a030'/><rect x='6' y='14' width='1' height='1' fill='%23e0a030'/><rect x='7' y='14' width='1' height='1' fill='%23e0a030'/><rect x='8' y='14' width='1' height='1' fill='%23e0a030'/><rect x='9' y='14' width='1' height='1' fill='%23e0a030'/><rect x='10' y='14' width='1' height='1' fill='%23e0a030'/><rect x='11' y='14' width='1' height='1' fill='%23e0a030'/><rect x='12' y='14' width='1' height='1' fill='%236b4210'/><rect x='13' y='14' width='1' height='1' fill='%236b4210'/><rect x='4' y='15' width='1' height='1' fill='%236b4210'/><rect x='5' y='15' width='1' height='1' fill='%236b4210'/><rect x='6' y='15' width='1' height='1' fill='%236b4210'/><rect x='7' y='15' width='1' height='1' fill='%236b4210'/><rect x='8' y='15' width='1' height='1' fill='%236b4210'/><rect x='9' y='15' width='1' height='1' fill='%236b4210'/><rect x='10' y='15' width='1' height='1' fill='%236b4210'/><rect x='11' y='15' width='1' height='1' fill='%236b4210'/></svg>"); --pxf-red: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='4' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='5' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='6' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='7' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='8' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='9' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='10' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='11' y='0' width='1' height='1' fill='%237a2a1e'/><rect x='2' y='1' width='1' height='1' fill='%237a2a1e'/><rect x='3' y='1' width='1' height='1' fill='%237a2a1e'/><rect x='4' y='1' width='1' height='1' fill='%23d0574a'/><rect x='5' y='1' width='1' height='1' fill='%23d0574a'/><rect x='6' y='1' width='1' height='1' fill='%23d0574a'/><rect x='7' y='1' width='1' height='1' fill='%23d0574a'/><rect x='8' y='1' width='1' height='1' fill='%23d0574a'/><rect x='9' y='1' width='1' height='1' fill='%23d0574a'/><rect x='10' y='1' width='1' height='1' fill='%23d0574a'/><rect x='11' y='1' width='1' height='1' fill='%23d0574a'/><rect x='12' y='1' width='1' height='1' fill='%237a2a1e'/><rect x='13' y='1' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='2' width='1' height='1' fill='%237a2a1e'/><rect x='2' y='2' width='1' height='1' fill='%23d0574a'/><rect x='3' y='2' width='1' height='1' fill='%23d0574a'/><rect x='4' y='2' width='1' height='1' fill='%23f6c4b8'/><rect x='5' y='2' width='1' height='1' fill='%23f6c4b8'/><rect x='6' y='2' width='1' height='1' fill='%23f6c4b8'/><rect x='7' y='2' width='1' height='1' fill='%23f6c4b8'/><rect x='8' y='2' width='1' height='1' fill='%23f6c4b8'/><rect x='9' y='2' width='1' height='1' fill='%23f6c4b8'/><rect x='10' y='2' width='1' height='1' fill='%23f6c4b8'/><rect x='11' y='2' width='1' height='1' fill='%23f6c4b8'/><rect x='12' y='2' width='1' height='1' fill='%23d0574a'/><rect x='13' y='2' width='1' height='1' fill='%23d0574a'/><rect x='14' y='2' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='3' width='1' height='1' fill='%237a2a1e'/><rect x='2' y='3' width='1' height='1' fill='%23d0574a'/><rect x='3' y='3' width='1' height='1' fill='%23f6c4b8'/><rect x='4' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='10' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='11' y='3' width='1' height='1' fill='%23fff0ea'/><rect x='12' y='3' width='1' height='1' fill='%23f6c4b8'/><rect x='13' y='3' width='1' height='1' fill='%23d0574a'/><rect x='14' y='3' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='4' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='4' width='1' height='1' fill='%23d0574a'/><rect x='2' y='4' width='1' height='1' fill='%23f6c4b8'/><rect x='3' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='10' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='11' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='12' y='4' width='1' height='1' fill='%23fff0ea'/><rect x='13' y='4' width='1' height='1' fill='%23f6c4b8'/><rect x='14' y='4' width='1' height='1' fill='%23d0574a'/><rect x='15' y='4' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='5' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='5' width='1' height='1' fill='%23d0574a'/><rect x='2' y='5' width='1' height='1' fill='%23f6c4b8'/><rect x='3' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='10' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='11' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='12' y='5' width='1' height='1' fill='%23fff0ea'/><rect x='13' y='5' width='1' height='1' fill='%23f6c4b8'/><rect x='14' y='5' width='1' height='1' fill='%23d0574a'/><rect x='15' y='5' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='6' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='6' width='1' height='1' fill='%23d0574a'/><rect x='2' y='6' width='1' height='1' fill='%23f6c4b8'/><rect x='3' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='10' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='11' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='12' y='6' width='1' height='1' fill='%23fff0ea'/><rect x='13' y='6' width='1' height='1' fill='%23f6c4b8'/><rect x='14' y='6' width='1' height='1' fill='%23d0574a'/><rect x='15' y='6' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='7' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='7' width='1' height='1' fill='%23d0574a'/><rect x='2' y='7' width='1' height='1' fill='%23f6c4b8'/><rect x='3' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='10' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='11' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='12' y='7' width='1' height='1' fill='%23fff0ea'/><rect x='13' y='7' width='1' height='1' fill='%23f6c4b8'/><rect x='14' y='7' width='1' height='1' fill='%23d0574a'/><rect x='15' y='7' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='8' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='8' width='1' height='1' fill='%23d0574a'/><rect x='2' y='8' width='1' height='1' fill='%23f6c4b8'/><rect x='3' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='10' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='11' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='12' y='8' width='1' height='1' fill='%23fff0ea'/><rect x='13' y='8' width='1' height='1' fill='%23f6c4b8'/><rect x='14' y='8' width='1' height='1' fill='%23d0574a'/><rect x='15' y='8' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='9' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='9' width='1' height='1' fill='%23d0574a'/><rect x='2' y='9' width='1' height='1' fill='%23f6c4b8'/><rect x='3' y='9' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='9' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='9' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='9' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='9' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='9' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='9' width='1' height='1' fill='%23fff0ea'/><rect x='10' y='9' width='1' height='1' fill='%23fff0ea'/><rect x='11' y='9' width='1' height='1' fill='%23fff0ea'/><rect x='12' y='9' width='1' height='1' fill='%23fff0ea'/><rect x='13' y='9' width='1' height='1' fill='%23f6c4b8'/><rect x='14' y='9' width='1' height='1' fill='%23d0574a'/><rect x='15' y='9' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='10' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='10' width='1' height='1' fill='%23d0574a'/><rect x='2' y='10' width='1' height='1' fill='%23f6c4b8'/><rect x='3' y='10' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='10' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='10' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='10' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='10' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='10' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='10' width='1' height='1' fill='%23fff0ea'/><rect x='10' y='10' width='1' height='1' fill='%23fff0ea'/><rect x='11' y='10' width='1' height='1' fill='%23fff0ea'/><rect x='12' y='10' width='1' height='1' fill='%23fff0ea'/><rect x='13' y='10' width='1' height='1' fill='%23f6c4b8'/><rect x='14' y='10' width='1' height='1' fill='%23d0574a'/><rect x='15' y='10' width='1' height='1' fill='%237a2a1e'/><rect x='0' y='11' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='11' width='1' height='1' fill='%23d0574a'/><rect x='2' y='11' width='1' height='1' fill='%23f4d4cc'/><rect x='3' y='11' width='1' height='1' fill='%23fff0ea'/><rect x='4' y='11' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='11' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='11' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='11' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='11' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='11' width='1' height='1' fill='%23fff0ea'/><rect x='10' y='11' width='1' height='1' fill='%23fff0ea'/><rect x='11' y='11' width='1' height='1' fill='%23fff0ea'/><rect x='12' y='11' width='1' height='1' fill='%23fff0ea'/><rect x='13' y='11' width='1' height='1' fill='%23f4d4cc'/><rect x='14' y='11' width='1' height='1' fill='%23d0574a'/><rect x='15' y='11' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='12' width='1' height='1' fill='%237a2a1e'/><rect x='2' y='12' width='1' height='1' fill='%23d0574a'/><rect x='3' y='12' width='1' height='1' fill='%23f4d4cc'/><rect x='4' y='12' width='1' height='1' fill='%23fff0ea'/><rect x='5' y='12' width='1' height='1' fill='%23fff0ea'/><rect x='6' y='12' width='1' height='1' fill='%23fff0ea'/><rect x='7' y='12' width='1' height='1' fill='%23fff0ea'/><rect x='8' y='12' width='1' height='1' fill='%23fff0ea'/><rect x='9' y='12' width='1' height='1' fill='%23fff0ea'/><rect x='10' y='12' width='1' height='1' fill='%23fff0ea'/><rect x='11' y='12' width='1' height='1' fill='%23fff0ea'/><rect x='12' y='12' width='1' height='1' fill='%23f4d4cc'/><rect x='13' y='12' width='1' height='1' fill='%23d0574a'/><rect x='14' y='12' width='1' height='1' fill='%237a2a1e'/><rect x='1' y='13' width='1' height='1' fill='%237a2a1e'/><rect x='2' y='13' width='1' height='1' fill='%23d0574a'/><rect x='3' y='13' width='1' height='1' fill='%23d0574a'/><rect x='4' y='13' width='1' height='1' fill='%23d0574a'/><rect x='5' y='13' width='1' height='1' fill='%23d0574a'/><rect x='6' y='13' width='1' height='1' fill='%23d0574a'/><rect x='7' y='13' width='1' height='1' fill='%23d0574a'/><rect x='8' y='13' width='1' height='1' fill='%23d0574a'/><rect x='9' y='13' width='1' height='1' fill='%23d0574a'/><rect x='10' y='13' width='1' height='1' fill='%23d0574a'/><rect x='11' y='13' width='1' height='1' fill='%23d0574a'/><rect x='12' y='13' width='1' height='1' fill='%23d0574a'/><rect x='13' y='13' width='1' height='1' fill='%23d0574a'/><rect x='14' y='13' width='1' height='1' fill='%237a2a1e'/><rect x='2' y='14' width='1' height='1' fill='%237a2a1e'/><rect x='3' y='14' width='1' height='1' fill='%237a2a1e'/><rect x='4' y='14' width='1' height='1' fill='%23d0574a'/><rect x='5' y='14' width='1' height='1' fill='%23d0574a'/><rect x='6' y='14' width='1' height='1' fill='%23d0574a'/><rect x='7' y='14' width='1' height='1' fill='%23d0574a'/><rect x='8' y='14' width='1' height='1' fill='%23d0574a'/><rect x='9' y='14' width='1' height='1' fill='%23d0574a'/><rect x='10' y='14' width='1' height='1' fill='%23d0574a'/><rect x='11' y='14' width='1' height='1' fill='%23d0574a'/><rect x='12' y='14' width='1' height='1' fill='%237a2a1e'/><rect x='13' y='14' width='1' height='1' fill='%237a2a1e'/><rect x='4' y='15' width='1' height='1' fill='%237a2a1e'/><rect x='5' y='15' width='1' height='1' fill='%237a2a1e'/><rect x='6' y='15' width='1' height='1' fill='%237a2a1e'/><rect x='7' y='15' width='1' height='1' fill='%237a2a1e'/><rect x='8' y='15' width='1' height='1' fill='%237a2a1e'/><rect x='9' y='15' width='1' height='1' fill='%237a2a1e'/><rect x='10' y='15' width='1' height='1' fill='%237a2a1e'/><rect x='11' y='15' width='1' height='1' fill='%237a2a1e'/></svg>"); }
.tv-mem.weak { border-image-source: var(--pxf-red) !important; }
/* Ecken-Schnitt der neuen Rahmen: 5 von 16 Pixeln */
.pxf, .hub-tile, .ad-tile, :root:not([data-theme="dark"]) .stage, :root:not([data-theme="dark"]) .fpop-card, :root:not([data-theme="dark"]) .hq-sail,
.es-sea, :root:not([data-theme="dark"]) .hq-bar .berry, :root:not([data-theme="dark"]) .hq-bar .pf-chip, .heat-pill, .tv-detail, .cg-card, .match-pop .mp-chance,
:root:not([data-theme="dark"]) #crew .u.member, :root:not([data-theme="dark"]) .traits .tr { border-image-slice: 5 fill !important; }
/* Knöpfe: wie kleine Holzbretter mit Licht oben und Schatten unten, drücken sich beim Antippen ein */
:root:not([data-theme="dark"]) .btn:not(.ghost):not(.link) { border-radius: 6px !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.22), 0 4px 0 #3a2410, 0 7px 10px -6px rgba(40,25,10,.6) !important;
  transition: transform .06s ease, box-shadow .06s ease; }
:root:not([data-theme="dark"]) .btn:not(.ghost):not(.link):active { transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.2), 0 1px 0 #3a2410 !important; }
:root:not([data-theme="dark"]) .btn.ghost { border-radius: 6px !important; box-shadow: inset 0 -2px 0 rgba(120,80,40,.15), 0 3px 0 #c9a87a !important; }
:root:not([data-theme="dark"]) .btn.ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9a87a !important; }
/* Fenster gleiten sanft herein */
.fpop.in .fpop-card { animation: pop-in .22s cubic-bezier(.2,.9,.3,1.1); }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .fpop.in .fpop-card { animation: none; } }
/* Tempo deutlich sichtbar: vier Pixel-Balken, Farbe je Stufe, Anzeige auch oben rechts im Kampfbild */
.speed-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
.spd-seg { display: inline-flex; gap: 2px; }
.spd-seg i { width: 8px; height: 14px; background: #e6d6b6; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.spd-seg i.on.s1 { background: #6fae7a; } .spd-seg i.on.s2 { background: #e0b040; } .spd-seg i.on.s3 { background: #e07a40; } .spd-seg i.on.s4 { background: #d04a3a; }
.spd-x { font-family: "Pixelify Sans", var(--px); font-size: 1.05rem; }
.field[data-speed]::after { content: '▶ ×' attr(data-speed); position: absolute; top: 8px; right: 10px; z-index: 450; padding: 2px 8px; font: 700 .78rem/1.3 "Pixelify Sans", var(--px);
  color: #fff; background: rgba(40,25,10,.6); border: 2px solid rgba(255,255,255,.5); pointer-events: none; }
.field[data-speed="3"]::after { background: rgba(200,100,40,.8); content: '▶▶ ×3'; }
.field[data-speed="4"]::after { background: rgba(200,60,40,.85); content: '▶▶▶ ×4'; }
.field.bossfight[data-speed]::after, .field.raid[data-speed]::after { top: 46px; }
/* Feste Leiste unten im Hauptquartier */
.tabbar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 900; width: min(760px, 100%); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px 6px calc(8px + env(safe-area-inset-bottom)); border-style: solid; border-width: 10px 10px 0; border-image: var(--pxf) 5 5 0 fill / 10px 10px 0 / 0 stretch; background: transparent; }
.tabbar[hidden] { display: none; }
.tb-btn { position: relative; display: grid; justify-items: center; gap: 1px; padding: 2px 0 0; background: none; border: 0; cursor: pointer; color: #6b5a44; font-size: .66rem; font-weight: 800; }
.tb-ico { width: 30px; height: 26px; display: grid; place-items: center; }
.tb-ico svg { width: 26px; height: 24px; shape-rendering: crispEdges; }
.tb-btn.on { color: #3a2410; }
.tb-btn.on .tb-ico { background: #f3d39a; box-shadow: 0 0 0 2px #b8783a; }
.tb-btn .tab-dot { top: 0; right: calc(50% - 20px); }
body.has-tabbar main { padding-bottom: 86px; }
/* Stammcrew: Werte und Vergleich */
.sq-pick { position: relative; }
.sq-st { display: block; font-size: .58rem; font-weight: 700; color: #6b5a44; white-space: nowrap; }
.sq-cmp { position: absolute; top: 2px; left: 4px; }
.sq-pick.weak { box-shadow: 0 0 0 2px #d0574a !important; }
.sq-legend { font-size: .7rem; color: #8a7a62; margin: 8px 0 4px; }
/* Duell-Vorschau: Platz gegen Platz */
.h2h { margin: 8px 0; display: grid; gap: 4px; }
.h2h-head { display: grid; grid-template-columns: 1fr 26px 1fr; font-size: .66rem; font-weight: 800; color: #8a6d48; text-align: center; }
.h2h-row { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; gap: 4px; }
.h2h-row > em { font-style: normal; font-weight: 800; color: #b07810; text-align: center; font-family: "Pixelify Sans", var(--px); }
.h2h-u { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 4px; align-items: center; padding: 3px 4px; text-align: left;
  border-style: solid; border-width: 5px; border-image: var(--pxf-light) 5 fill / 5px / 0 stretch; min-width: 0; }
.h2h-u i { grid-row: 1 / 3; } .h2h-u i svg { width: 22px; height: 26px; shape-rendering: crispEdges; }
.h2h-u b { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2h-u small { font-size: .6rem; color: #6b5a44; white-space: nowrap; }
.h2h-u .pa { margin-left: 1px; } .h2h-u .pa svg { width: 7px; height: 4px; }
.h2h-u.empty { display: block; text-align: center; color: #b9a78a; }
.fpop { z-index: 1000 !important; } .toasts { z-index: 1100 !important; }
/* Pixel-Symbole */
.px-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; font-style: normal; vertical-align: middle; }
.px-ico svg { width: 14px; height: 14px; }
.px-ico.sm { width: 13px; height: 13px; margin-right: 3px; } .px-ico.sm svg { width: 11px; height: 11px; }
.c3-fac { display: inline-flex; align-items: center; }
.tv-tags { display: inline-flex; gap: 2px; margin: 1px 0; padding: 1px 3px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(120,90,50,.2); }
.tv-fac { display: inline-flex; align-items: center; gap: 2px; font-size: .68rem; font-weight: 700; color: #6b5a44; padding: 0 5px 0 2px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(120,90,50,.2); }
.fit-tag { font-style: normal; font-size: .58rem; font-weight: 800; color: #fff; background: #3f8a52; padding: 0 4px; border: 1px solid #245a32; }
.tr-hex.px { background: #fff6e2 !important; clip-path: none !important; border-radius: 0 !important; box-shadow: inset 0 0 0 2px #c9a87a; }
.tr-hex.px .px-ico { width: 22px; height: 22px; } .tr-hex.px .px-ico svg { width: 20px; height: 20px; }
/* Kopfzeilen-Links als kleine Holzknöpfe */
:root:not([data-theme="dark"]) .head-actions .link { text-decoration: none !important; padding: 2px 9px; font-size: .78rem; font-weight: 800; color: #4a3520 !important;
  border-style: solid; border-width: 5px; border-image: var(--pxf-light) 5 fill / 5px / 0 stretch; }
:root:not([data-theme="dark"]) .head-actions .link:active { transform: translateY(1px); }
:root:not([data-theme="dark"]) .head-actions { gap: 6px !important; flex-wrap: wrap; }
.ts-pulse { display: inline-flex; align-items: center; gap: 5px; margin: 0 auto 8px; padding: 3px 10px; font-size: .74rem; font-weight: 700; color: #4a3520;
  border-style: solid; border-width: 5px; border-image: var(--pxf-light) 5 fill / 5px / 0 stretch; }
.ts-pulse span { opacity: .4; }
.tp-dot { width: 8px; height: 8px; background: #3f8a52; box-shadow: 0 0 0 2px #cfe8d4; animation: dot-pulse 1.8s ease-in-out infinite; }
/* ---------- Pixel-Effekte im Kampf ---------- */
#field .fx3.pxfx { display: block !important; width: 34px; height: 34px; z-index: 40; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
#field .fx3.pxfx svg { width: 100%; height: 100%; display: block; }
#field .fx3.pxfx.big { width: 44px; height: 44px; animation: pxfx-slam .55s steps(5) forwards; }
#field .fx3.pxfx.huge { width: 64px; height: 64px; animation: pxfx-slam .6s steps(6) forwards; }
#field .fx3.pxfx.echo { width: 90px; height: 90px; opacity: .35; animation: pxfx-echo .6s steps(5) forwards; }
@keyframes pxfx-slam { 0% { transform: translate(-50%, -50%) scale(2.2) rotate(-12deg); opacity: 0; } 20% { opacity: 1; transform: translate(-50%, -50%) scale(.9) rotate(0); } 40% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
@keyframes pxfx-echo { from { transform: translate(-50%, -50%) scale(.6); opacity: .5; } to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
#field .fx3.pxfx.st { width: 20px; height: 20px; margin-top: -30px; animation: pxfx-st 1s steps(6) forwards; }
@keyframes pxfx-st { 0% { transform: translate(-50%, -20%) scale(.6); opacity: 0; } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { transform: translate(-50%, -110%) scale(1); opacity: 0; } }
#field .fx3.pxfx.rise { width: 18px; height: 18px; animation: pxfx-rise 1s steps(6) forwards; }
@keyframes pxfx-rise { 0% { transform: translate(-50%, 0) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -160%) scale(1.1); opacity: 0; } }
/* Welle über die ganze Seite bei Flächen-Ultis */
.ult-wave { position: absolute; top: 30%; bottom: 8%; width: 55%; z-index: 35; pointer-events: none; opacity: .0;
  background: repeating-linear-gradient(90deg, transparent 0 6px, var(--wc) 6px 12px); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); animation: ult-wave .8s steps(8) forwards; }
.ult-wave.enemy { right: 0; } .ult-wave.crew { left: 0; }
.ult-wave.t-kraft { --wc: rgba(217,138,114,.55); } .ult-wave.t-klinge { --wc: rgba(232,242,234,.7); } .ult-wave.t-technik { --wc: rgba(255,242,122,.6); }
@keyframes ult-wave { 0% { opacity: 0; transform: translateX(-30%) skewX(-12deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(20%) skewX(-12deg); } }
@media (prefers-reduced-motion: reduce) { #field .fx3.pxfx, .ult-wave { animation-duration: .01s !important; } }
/* Auswahl als Fenster über dem Run (Taverne, Früchte, Schätze, Ereignisse) */
body.choice-open .stage { position: fixed !important; z-index: 800; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 16px)); max-height: calc(100vh - 24px);
  overflow-y: auto; margin: 0 !important; overscroll-behavior: contain; animation: choice-in .22s cubic-bezier(.2,.9,.3,1.1); }
@keyframes choice-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
body.choice-open::before { content: ''; position: fixed; inset: 0; z-index: 790; background: rgba(30,20,10,.45); }
body.choice-open .stage .dock { position: sticky; bottom: -2px; }
@supports (height: 100dvh) { body.choice-open .stage { max-height: calc(100dvh - 24px); } }
/* Symbole antippen = kurze Erklärung */
.px-ico[data-tip] { cursor: help; }
/* ---------- Attacken: kleines Pixel-Band beim Angreifer statt gelbem Fenster ---------- */
.ult-tag { position: absolute; z-index: 460; transform: translate(-50%, -50%); pointer-events: none; display: grid; justify-items: center; gap: 1px;
  padding: 1px 8px 2px; white-space: nowrap; border-style: solid; border-width: 6px; border-image: var(--pxf) 5 fill / 6px / 0 stretch;
  animation: tag-in 1.4s cubic-bezier(.2,1.4,.4,1) forwards; }
.ult-tag b { font: 600 .82rem/1.1 "Pixelify Sans", var(--px); color: #3a2410; }
.ult-tag em { font-style: normal; font-size: .62rem; font-weight: 800; color: #8a5a1a; }
.ult-tag.them { border-image-source: var(--pxf-red); } .ult-tag.them b { color: #5a1a10; }
.ult-tag.perfect { border-image-source: var(--pxf-gold); } .ult-tag.perfect em { color: #b07810; }
@keyframes tag-in { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%); } }
/* Geschosse */
.f-fx .proj { position: absolute; width: 22px; height: 22px; z-index: 45; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.f-fx .proj.big { width: 30px; height: 30px; }
.f-fx .proj svg { width: 100%; height: 100%; display: block; }
.f-fx .proj.p-technik::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; box-shadow: 0 0 10px 6px rgba(255,220,120,.55); z-index: -1; }
/* Wendepunkte (Wut, Letzter Wille, Wetter) ebenfalls als Pixel-Band oben statt bunter Kästen */
.ult-call { border-radius: 0 !important; border-style: solid !important; border-width: 8px !important; border-image: var(--pxf) 5 fill / 8px / 0 stretch !important;
  background: transparent !important; box-shadow: none !important; color: #3a2410 !important; padding: 2px 12px 4px !important; }
.ult-call b { font-family: "Pixelify Sans", var(--px) !important; font-size: 1rem !important; text-shadow: none !important; color: #3a2410 !important; }
.ult-call small, .ult-call em { color: #8a5a1a !important; text-shadow: none !important; }
.ult-call.rage { border-image-source: var(--pxf-red) !important; } .ult-call.rage b { color: #5a1a10 !important; }
.ult-call.will { border-image-source: var(--pxf-gold) !important; }
@media (prefers-reduced-motion: reduce) { .ult-tag { animation-duration: .01s; } }
/* ---------- Attacken: kleines Pixel-Band beim Angreifer statt gelbem Fenster ---------- */
.ult-tag { position: absolute; z-index: 460; transform: translate(-50%, -50%); pointer-events: none; display: grid; justify-items: center; gap: 1px;
  padding: 1px 8px 2px; white-space: nowrap; border-style: solid; border-width: 6px; border-image: var(--pxf) 5 fill / 6px / 0 stretch;
  animation: tag-in 1.4s cubic-bezier(.2,1.4,.4,1) forwards; }
.ult-tag b { font: 600 .82rem/1.1 "Pixelify Sans", var(--px); color: #3a2410; }
.ult-tag em { font-style: normal; font-size: .62rem; font-weight: 800; color: #8a5a1a; }
.ult-tag.them { border-image-source: var(--pxf-red); } .ult-tag.them b { color: #5a1a10; }
.ult-tag.perfect { border-image-source: var(--pxf-gold); } .ult-tag.perfect em { color: #b07810; }
@keyframes tag-in { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%); } }
.f-fx .proj { position: absolute; width: 22px; height: 22px; z-index: 45; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.f-fx .proj.big { width: 30px; height: 30px; }
.f-fx .proj svg { width: 100%; height: 100%; display: block; }
.ult-call { border-radius: 0 !important; border-style: solid !important; border-width: 8px !important; border-image: var(--pxf) 5 fill / 8px / 0 stretch !important;
  background: transparent !important; box-shadow: none !important; color: #3a2410 !important; padding: 2px 12px 4px !important; }
.ult-call b { font-family: "Pixelify Sans", var(--px) !important; font-size: 1rem !important; text-shadow: none !important; color: #3a2410 !important; }
.ult-call small, .ult-call em { color: #8a5a1a !important; text-shadow: none !important; }
.ult-call.rage { border-image-source: var(--pxf-red) !important; } .ult-call.rage b { color: #5a1a10 !important; }
.ult-call.will { border-image-source: var(--pxf-gold) !important; }
@media (prefers-reduced-motion: reduce) { .ult-tag { animation-duration: .01s; } }

/* ---------- Kampf-Vorschau (ersetzt die lange Aufstellungsliste) ---------- */
.pv { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; margin: 8px 0 6px; }
.pv-side { min-width: 0; }
.pv-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .75; margin: 0 0 4px; }
.pv-row { display: flex; flex-wrap: wrap; gap: 5px; }
.pv-side:last-child .pv-row { justify-content: flex-end; }
.pv-side:last-child .pv-label { text-align: right; }
.pv-vs { align-self: center; font-family: 'Pixelify Sans', monospace; font-weight: 700; font-size: 15px; color: #b5503a; padding-top: 14px; }
.pv-u { position: relative; width: 50px; padding: 4px 3px 3px; text-align: center; cursor: default;
  border-style: solid; border-width: 5px; border-image: var(--pxf-light) 5 fill / 5px / 0 stretch; }
.pv-u.foe { border-image-source: var(--pxf-red); }
.pv-u.boss { border-image-source: var(--pxf-gold); width: 58px; }
.pv-u.down { opacity: .4; filter: grayscale(1); }
.pv-u .pv-s { display: block; width: 30px; height: 35px; margin: 0 auto; }
.pv-u .pv-s svg { width: 100%; height: 100%; image-rendering: pixelated; }
.pv-u.boss .pv-s { width: 38px; height: 44px; }
.pv-u small { display: block; font-size: 9.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-hp { display: block; height: 4px; background: #3a2a20; margin: 2px 1px 1px; }
.pv-hp b { display: block; height: 100%; background: #6fbf5a; }
.pv-u.foe .pv-hp b { background: #d0574a; }
.pv-front { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%233a2a20' d='M0 0h6v4h-1v1h-1v1h-2v-1h-1v-1h-1z'/%3E%3Cpath fill='%23e8c25a' d='M1 1h4v3h-1v1h-2v-1h-1z'/%3E%3C/svg%3E") center/contain no-repeat; image-rendering: pixelated; }
.pv-m { position: absolute; top: 2px; right: 1px; font-style: normal; font-size: 9px; font-weight: 700; padding: 0 2px; line-height: 12px; background: #fff8e8; border: 1px solid #3a2a20; }
.pv-m.good { color: #2f7a3a; } .pv-m.bad { color: #b5302a; }
.pv-m.fk { left: 1px; right: auto; max-width: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .pv { grid-template-columns: 1fr; gap: 4px; }
  .pv-vs { padding: 0; text-align: center; font-size: 12px; }
  .pv-side:last-child .pv-row { justify-content: flex-start; }
  .pv-side:last-child .pv-label { text-align: left; }
}

/* ---------- Pixel-Abzeichen im Kampf (K.O., KRIT!, Ausgewichen, Konter …) ---------- */
#field .fx3.ptag { display: block !important; }
.ptag { position: absolute; z-index: 9; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font: 700 12px/1 "Pixelify Sans", var(--px, monospace); letter-spacing: .03em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45);
  padding: 4px 7px 5px; background: #6a7f96;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.25),
    0 -2px 0 #2a1a10, 0 2px 0 #2a1a10, -2px 0 0 #2a1a10, 2px 0 0 #2a1a10, 0 5px 0 rgba(20,10,5,.35);
  animation: ptag-rise 1s cubic-bezier(.2,.9,.3,1) forwards; }
.ptag.ko { background: #c0392b; font-size: 15px; padding: 5px 9px 6px; }
.ptag.crit { background: #e0a020; color: #3a2008; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.ptag.miss { background: #5a8fb8; }
.ptag.debuff { background: #7a5ab0; }
.ptag.buff, .ptag.heal { background: #4f9a5a; }
.ptag.lucky { background: #3aa060; }
@keyframes ptag-rise {
  0% { transform: translate(-50%, -30%) scale(.5); opacity: 0; }
  14% { transform: translate(-50%, -60%) scale(1.18); opacity: 1; }
  26% { transform: translate(-50%, -60%) scale(1); }
  78% { transform: translate(-50%, -95%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -115%) scale(.9); opacity: 0; }
}
.fast .ptag { animation-duration: .55s; }
.ko-stamp { font-family: "Pixelify Sans", var(--px, monospace) !important; background: #c0392b !important; color: #fff !important;
  border: 0 !important; border-radius: 0 !important; -webkit-text-stroke: 0 !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.25), 0 -2px 0 #2a1a10, 0 2px 0 #2a1a10, -2px 0 0 #2a1a10, 2px 0 0 #2a1a10, 0 5px 0 rgba(20,10,5,.35) !important; }
/* Großes K.O. am Ende als dickes Pixel-Schild */
.ko-big { font-family: "Pixelify Sans", var(--px, monospace) !important; -webkit-text-stroke: 0 !important; font-size: 2.1rem !important; color: #fff !important;
  text-shadow: 0 3px 0 rgba(0,0,0,.3) !important; background: #c0392b; padding: 8px 18px 10px;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.3), inset 0 -6px 0 rgba(0,0,0,.25), 0 -4px 0 #2a1a10, 0 4px 0 #2a1a10, -4px 0 0 #2a1a10, 4px 0 0 #2a1a10, 0 10px 0 rgba(20,10,5,.35); }

/* ---------- Tempo-Knopf im Pixel-Stil ---------- */
.speed-btn.px-btn { display: inline-flex !important; align-items: center; gap: 8px; min-width: 0; cursor: pointer;
  font: 700 14px/1 "Pixelify Sans", var(--px, monospace); color: #fff6e0; background: #8a5a32; padding: 8px 14px 10px;
  border: 0; border-radius: 0; text-shadow: 0 1px 0 rgba(0,0,0,.4);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.22), inset 0 -4px 0 rgba(0,0,0,.28),
    0 -3px 0 #2a1a10, 0 3px 0 #2a1a10, -3px 0 0 #2a1a10, 3px 0 0 #2a1a10, 0 7px 0 rgba(20,10,5,.35);
  transition: transform .06s; -webkit-tap-highlight-color: transparent; }
.speed-btn.px-btn:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(0,0,0,.2), 0 -3px 0 #2a1a10, 0 3px 0 #2a1a10, -3px 0 0 #2a1a10, 3px 0 0 #2a1a10, 0 3px 0 rgba(20,10,5,.35); }
.spd-arrows { display: inline-flex; gap: 1px; }
.spd-ch { width: 8px; height: 14px; fill: rgba(255,240,210,.25); }
.spd-arrows.s1 .spd-ch.on { fill: #9ad08a; } .spd-arrows.s2 .spd-ch.on { fill: #f2d24a; }
.spd-arrows.s3 .spd-ch.on { fill: #f29a4a; } .spd-arrows.s4 .spd-ch.on { fill: #ff6a4a; }
.speed-btn .spd-x { font-size: 16px; }
.speed-btn .spd-name { font-size: 11px; opacity: .8; font-weight: 400; }
.field[data-speed]::after { border-radius: 0 !important; border: 0 !important; background: #2a1a10cc !important;
  box-shadow: 0 -2px 0 #2a1a10, 0 2px 0 #2a1a10, -2px 0 0 #2a1a10, 2px 0 0 #2a1a10; }

/* ---------- Boni-Leiste fürs Handy (wie TFT): Abzeichen mit Stufe, Tippen = alle Details ---------- */
.synbar { margin: 4px 0 6px; }
.synbar[hidden] { display: none !important; }
@media (min-width: 1280px) { .synbar { display: none !important; } }
.sb { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 6px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  border-style: solid; border-width: 5px; border-image: var(--pxf-light) 5 fill / 5px / 0 stretch; background: none; -webkit-tap-highlight-color: transparent; }
.sb:active { transform: translateY(1px); }
.sb-row { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; align-items: center; }
.sb-c { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 5px 0 2px; font: 700 12px/1 "Pixelify Sans", var(--px, monospace); color: #fff;
  background: #8a8a8a; box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px #2a1a10; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.sb-c small { font-size: 9.5px; opacity: .85; font-weight: 400; }
.sb-ic { display: grid; place-items: center; width: 20px; height: 20px; font-style: normal; font-size: 11px; }
.sb-ic .px-ico { width: 16px; height: 16px; display: block; }
.sb-ic .px-ico svg { width: 100%; height: 100%; display: block; }
.sb-bronze { background: #a8693a; }
.sb-silver { background: #8e9aa8; }
.sb-gold { background: #d4a02e; color: #2a1c05; text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.2), 0 0 0 1px #2a1a10, 0 0 8px rgba(240,190,60,.55); }
.sb-off { background: #d8ccb4; color: #6a5a48; text-shadow: none; opacity: .85; }
.sb-off .sb-ic { opacity: .55; filter: grayscale(.6); }
.sb-duo { background: #c0507a; }
.sb-ally { background: #3a7a6a; }
.sb-sep { width: 2px; height: 18px; background: rgba(60,40,20,.25); margin: 0 2px; }
.sb-more { flex: none; font: 700 11px/1 "Pixelify Sans", var(--px, monospace); color: #8a5a32; white-space: nowrap; }
.sb-set { outline: 1px dashed rgba(255,230,160,.6); outline-offset: -4px; }
/* Pop-up mit allen Boni */
.syn-pop { max-width: 420px; }
.syn-pop-list { display: flex; flex-direction: column; gap: 6px; max-height: 58vh; overflow-y: auto; margin: 6px 0; }
.syn-pop-list .tr { grid-template-columns: 34px 1fr auto; }
.syn-pop-list .tr-text { display: block !important; grid-column: 2 / -1; font-size: 12px; line-height: 1.3; color: var(--mute, #6a5a48); position: static !important; opacity: 1 !important; transform: none !important; }
.syn-pop-list .tr-text em { display: block; font-style: normal; opacity: .8; }
.tr-ally .tr-hex { background: #3a7a6a; } .tr-duo .tr-hex { background: #c0507a; }

/* ---------- Besiegte Crew: Grabstein + K.O., sofort erkennbar ---------- */
.px-grave { display: block; image-rendering: pixelated; }
.crewmini, .tv-mem { position: relative; }
.crewmini.dead > i, .tv-mem.down > i { filter: grayscale(1) brightness(.75); opacity: .55; }
.crewmini.dead .bar, .tv-mem.down em { opacity: .5; }
.down-mark { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 3; }
.down-mark .px-grave { width: 22px; height: 24px; filter: drop-shadow(0 2px 0 rgba(30,20,10,.35)); }
.down-mark b { margin-top: -2px; font: 700 10px/1 "Pixelify Sans", var(--px, monospace); color: #fff; background: #c0392b; padding: 2px 4px 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px #2a1a10; }
.crewmini.dead { animation: down-pulse 2.4s ease-in-out infinite; }
@keyframes down-pulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px rgba(192,57,43,.45); } }
.down-chip { display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1.2 "Pixelify Sans", var(--px, monospace); color: #8a2a20; background: #f6e0d6; padding: 3px 7px 3px 4px;
  box-shadow: 0 0 0 1px #c0392b; margin-left: 6px; }
.down-chip .px-grave { width: 13px; height: 14px; }
.down-chip.sm { font-size: 11px; padding: 2px 6px 2px 3px; }
.tv-mem.down { box-shadow: 0 0 0 2px #c0392b; }
.tv-x.hot { background: #c0392b !important; color: #fff !important; }
/* Ein-Tipp-Tausch in der Taverne */
.tv-swap { display: flex !important; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tv-swap > span:last-child { flex-basis: 100%; text-align: center; }
.tv-swap-out, .tv-swap-in { position: relative; width: 26px; height: 30px; display: inline-block; }
.tv-swap-out svg, .tv-swap-in svg { width: 100%; height: 100%; }
.tv-swap-out > svg:first-child { filter: grayscale(1); opacity: .6; }
.tv-swap-out .px-grave { position: absolute; right: -6px; bottom: -2px; width: 14px !important; height: 15px !important; }
.tv-swap-arrow { font-size: 16px; }
.tv-swap.down { background: #4f9a5a !important; }
@media (min-width: 561px) { .tv-swap > span:last-child { flex-basis: auto; } }
.crewmini.dead { opacity: 1 !important; }

/* ---------- Boss-Auftritt: Figur fährt ins Bild ---------- */
.boss-show { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: rgba(20,12,6,0); transition: background .25s; -webkit-tap-highlight-color: transparent; }
.boss-show.in { background: rgba(20,12,6,.62); }
.boss-show.out { opacity: 0; transition: opacity .25s; }
.bs-rays { position: absolute; width: 160vmax; height: 160vmax; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0;
  background: repeating-conic-gradient(rgba(255,210,120,.16) 0 8deg, transparent 8deg 22deg); animation: bs-spin 12s linear infinite; transition: opacity .4s .1s; }
.boss-show.in .bs-rays { opacity: 1; }
.boss-show.raid .bs-rays { background: repeating-conic-gradient(rgba(190,140,255,.18) 0 8deg, transparent 8deg 22deg); }
.boss-show.mini .bs-rays { background: repeating-conic-gradient(rgba(255,170,120,.12) 0 8deg, transparent 8deg 22deg); }
@keyframes bs-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.bs-stripe { position: absolute; left: 0; right: 0; top: 50%; height: 150px; transform: translateY(-50%) scaleY(0); background: #2a1a10;
  box-shadow: 0 -6px 0 #c0392b, 0 6px 0 #c0392b; transition: transform .28s cubic-bezier(.2,1.4,.4,1); }
.boss-show.raid .bs-stripe { box-shadow: 0 -6px 0 #7a4fc4, 0 6px 0 #7a4fc4; }
.boss-show.mini .bs-stripe { box-shadow: 0 -6px 0 #e0a020, 0 6px 0 #e0a020; }
.boss-show.in .bs-stripe { transform: translateY(-50%) scaleY(1); }
.bs-fig { position: absolute; left: 50%; top: 50%; width: 150px; height: 175px; transform: translate(80vw, -58%); filter: drop-shadow(0 8px 0 rgba(0,0,0,.35));
  transition: transform .5s cubic-bezier(.2,1.25,.4,1) .12s; }
.bs-fig svg, .bs-fig img { width: 100%; height: 100%; image-rendering: pixelated; }
.boss-show.in .bs-fig { transform: translate(-112%, -58%); animation: bs-bob 1.2s ease-in-out .7s infinite; }
@keyframes bs-bob { 50% { margin-top: -6px; } }
.bs-card { position: absolute; left: 50%; top: 50%; transform: translate(-100vw, -50%); display: flex; flex-direction: column; gap: 4px; max-width: 46vw;
  color: #fff6e0; font-family: "Pixelify Sans", var(--px, monospace); transition: transform .45s cubic-bezier(.2,1.25,.4,1) .2s; }
.boss-show.in .bs-card { transform: translate(-2%, -50%); }
.bs-card small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #ffb36b; }
.boss-show.raid .bs-card small { color: #d8b8ff; }
.bs-card b { font-size: clamp(22px, 6vw, 38px); line-height: 1; text-shadow: 0 3px 0 #c0392b; }
.boss-show.raid .bs-card b { text-shadow: 0 3px 0 #7a4fc4; }
.bs-card em { font-style: normal; font-size: 13px; color: #f2d24a; }
.bs-card i { font-style: normal; font-size: 12px; opacity: .8; }
.bs-tap { position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%); font: 12px "Pixelify Sans", var(--px, monospace); color: rgba(255,246,224,.7); opacity: 0; transition: opacity .3s .9s; }
.boss-show.in .bs-tap { opacity: 1; }
@media (max-width: 560px) { .bs-fig { width: 110px; height: 128px; } .bs-stripe { height: 120px; } }
@media (prefers-reduced-motion: reduce) { .bs-rays { animation: none; } .bs-fig, .bs-card { transition: none; } }

/* ---------- Kosmetik: Inhalts-Update ---------- */
.bg-zirkus     { background: repeating-linear-gradient(90deg, #e0483b 0 12%, #f6e8d0 12% 24%), #e0483b; background-size: 100% 62%, auto; background-repeat: no-repeat; background-color: #3a6a9a; }
.bg-fischinsel { background: radial-gradient(circle 3px at 22% 30%, rgba(255,255,255,.55) 99%, transparent), radial-gradient(circle 2px at 68% 50%, rgba(255,255,255,.5) 99%, transparent), radial-gradient(ellipse 60% 45% at 50% 105%, #f29ab0, transparent 70%), linear-gradient(#2fa8b8, #135a7a); }
.bg-nebel      { background: radial-gradient(ellipse 70% 30% at 50% 80%, rgba(220,210,240,.7), transparent 70%), radial-gradient(ellipse 50% 20% at 30% 40%, rgba(200,190,230,.5), transparent 70%), linear-gradient(#3a2a58, #1a1428); }
.bg-kaiserflagge { background: radial-gradient(circle 18% at 50% 45%, #f6f0e0 60%, transparent 62%), linear-gradient(#b0262a, #6a1418); }
.fr-seetang    { border-color: #3a8a5a; box-shadow: 0 0 0 2px #9ad08a, inset 0 0 0 2px #2a6a4a; }
.fr-knochen    { border-color: #e8e0cc; box-shadow: 0 0 0 2px #3a2a20, inset 0 0 0 2px #b8ac94; }
.fr-kaiser     { border-color: #b0262a; box-shadow: 0 0 0 2px #f2c94c, 0 0 0 4px #b0262a, 0 0 12px rgba(242,201,76,.6); }
.an-schnee::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle 1.5px at 20% 10%, #fff 99%, transparent), radial-gradient(circle 1.5px at 60% 30%, #fff 99%, transparent), radial-gradient(circle 1.5px at 85% 5%, #fff 99%, transparent), radial-gradient(circle 1.5px at 40% 50%, #fff 99%, transparent);
  animation: an-fall 2s steps(5) infinite; }
.an-herzen::after { content: '♥'; position: absolute; right: 8%; top: 4%; z-index: 2; color: #e0507a; font-size: 34%; animation: an-heart 1.6s steps(4) infinite; pointer-events: none; }
@keyframes an-heart { from { transform: translateY(30%); opacity: 1; } to { transform: translateY(-60%); opacity: 0; } }
.an-haki { animation: an-haki 1.8s steps(3) infinite; }
@keyframes an-haki { 0%, 100% { box-shadow: 0 0 0 0 rgba(122,79,196,0); } 50% { box-shadow: 0 0 0 4px rgba(122,79,196,.55), 0 0 14px rgba(40,10,60,.6); } }
.fl-clownnase::before { content: '●'; color: #e0302a; } .fl-clownnase { background: #2f5aa8; }
.fl-narbe::before { content: '≡'; color: #f6e0d0; transform: rotate(60deg); display: inline-block; } .fl-narbe { background: #b0262a; }
.fl-faust::before { content: '✊'; } .fl-faust { background: #6a4a30; }
.cos .cos-req { display: block; font-style: normal; font-size: 9.5px; color: #8a6a40; opacity: .85; margin-top: 1px; }
.seg.locked { opacity: .55; }

/* ---------- Musik-Schalter ---------- */
.mu-btn { display: inline-grid; place-items: center; position: relative; width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: #8a5a32; border: 0; border-radius: 0; color: #fff6e0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.28), 0 -2px 0 #2a1a10, 0 2px 0 #2a1a10, -2px 0 0 #2a1a10, 2px 0 0 #2a1a10, 0 5px 0 rgba(20,10,5,.3); }
.mu-btn:active { transform: translateY(2px); }
.mu-btn svg { width: 16px; height: 18px; fill: currentColor; }
.mu-btn:not(.on) { background: #a89880; color: #f0e8d8; }
.mu-off { position: absolute; width: 26px; height: 3px; background: #c0392b; transform: rotate(-40deg); box-shadow: 0 0 0 1px #2a1a10; }
.mu-btn.head { width: 30px; height: 28px; margin: 0 4px; }
.mu-btn.head svg { width: 13px; height: 15px; }
.ts-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- Finger-Zeiger-Blase ---------- */
.scrub-tip { position: fixed; z-index: 3000; max-width: min(280px, 86vw); pointer-events: none; display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px 8px; font: 12px/1.35 Nunito, sans-serif; color: #fff6e0; background: #2a1a10;
  box-shadow: 0 -2px 0 #e8c25a, 0 2px 0 #e8c25a, -2px 0 0 #e8c25a, 2px 0 0 #e8c25a, 0 6px 0 rgba(0,0,0,.3); }
.scrub-tip[hidden] { display: none; }
.scrub-tip b { font: 700 13px/1.2 "Pixelify Sans", var(--px, monospace); color: #f2d24a; }
.scrubbing { -webkit-user-select: none; user-select: none; }
.scrubbing [data-tip]::after, .scrubbing [data-tip]::before { display: none !important; }
.scrub-on { outline: 2px solid #e8c25a !important; outline-offset: 1px; }
[data-tip] { -webkit-touch-callout: none; }

/* ---------- Nächste Freischaltungen ---------- */
.goal-box { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 8px 10px;
  border-style: solid; border-width: 6px; border-image: var(--pxf-light) 5 fill / 6px / 0 stretch; }
.goal-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; }
.goal-spr { width: 30px; height: 35px; display: block; filter: brightness(0) opacity(.55); }
.goal-spr svg { width: 100%; height: 100%; }
.goal-b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goal-b b { font: 600 14px/1.15 "Pixelify Sans", var(--px, monospace); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.goal-b b small { display: inline-flex; align-items: center; gap: 3px; font: 11px Nunito, sans-serif; color: var(--mute, #8a7d68); }
.goal-b b small .px-ico { width: 12px; height: 12px; display: inline-block; }
.goal-b b small .px-ico svg { width: 100%; height: 100%; display: block; }
.goal-b > small { font-size: 12px; color: var(--mute, #7a6a58); line-height: 1.25; }
.goal-bar { display: block; height: 6px; background: #e6d6b6; box-shadow: inset 0 1px 0 rgba(0,0,0,.15); }
.goal-bar i { display: block; height: 100%; background: linear-gradient(#f2c94c, #d49a2a); }
.goal-left { font: 700 13px "Pixelify Sans", var(--px, monospace); font-style: normal; color: #8a5a32; }
.hq-goals { margin-top: 8px; }

/* ---------- App-Gefühl: nichts verzieht sich, kein Gummiband, kein Markieren ---------- */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
  body { -webkit-user-select: none; user-select: none; }
  input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
  img, svg { -webkit-user-drag: none; }
}
/* Kopfzeile im Run am Handy: eine ruhige Reihe */
@media (max-width: 560px) {
  body.in-run .head-actions { flex-wrap: nowrap !important; gap: 4px !important; overflow: hidden; }
  body.in-run .head-actions .link { padding: 2px 7px !important; font-size: .72rem !important; white-space: nowrap; }
}
.mu-btn.head { background: #fff6e0; color: #4a3520; width: 28px; height: 24px; margin: 0 2px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 -2px 0 #c9a46a, 0 2px 0 #c9a46a, -2px 0 0 #c9a46a, 2px 0 0 #c9a46a; }
.mu-btn.head:not(.on) { background: #efe6d4; color: #a89880; }
.mu-btn.head .mu-off { width: 20px; height: 2px; box-shadow: none; }
.down-chip { white-space: nowrap; }
.crewmini.dead .lvtag { display: none; }
.ts-pulse.wait { opacity: .8; }
.tp-dots { display: inline-flex; gap: 2px; margin-left: 4px; }
.tp-dots i { width: 3px; height: 3px; background: currentColor; animation: tp-blink 1s steps(2) infinite; }
.tp-dots i:nth-child(2) { animation-delay: .2s; } .tp-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes tp-blink { 50% { opacity: .2; } }
.fight-ctrl { display: flex; justify-content: center; }

/* ---------- Crew als Puzzle-Raster (Details) ---------- */
#crew:not(.compact) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 6px; }
#crew .u.member.pz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 4px 6px !important; min-width: 0; text-align: center; cursor: pointer; }
.pz-top { display: flex; align-items: center; gap: 2px; width: 100%; justify-content: flex-start; }
.pz-top .px-ico { width: 14px; height: 14px; display: block; }
.pz-top .px-ico svg { width: 100%; height: 100%; display: block; }
.pz-lv { margin-left: auto; font: 700 11px/1 "Pixelify Sans", var(--px, monospace); font-style: normal; color: #fff; background: #6a4a30; padding: 2px 4px; }
.pz-lv::before { content: 'Lv '; font-weight: 400; opacity: .8; }
#crew .u.member.pz .av { display: block; width: 40px; height: 47px; margin: 0; }
#crew .u.member.pz .av svg { width: 100%; height: 100%; }
#crew .u.member.pz .u-name { font: 600 12.5px/1.1 "Pixelify Sans", var(--px, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pz-stars { font-size: 9px; line-height: 1; }
#crew .u.member.pz .bar { width: 100%; height: 5px; margin: 1px 0; }
.pz-stats { display: flex; gap: 3px; justify-content: center; width: 100%; }
.pz-st { display: inline-flex; align-items: center; gap: 1px; padding: 1px 3px; background: rgba(120,90,50,.08); font-size: 10px; }
.pz-st > i { font-style: normal; opacity: .7; font-size: 10px; }
.pz-st .pa { transform: scale(.85); }
#crew .u.member.pz.dead .av { filter: grayscale(1) brightness(.75); opacity: .5; }
#crew .u.member.pz.dead .down-mark { top: 42%; }
#crew .u.member.pz.role-bg-brecher { box-shadow: inset 0 -3px 0 #4f86c6; }
#crew .u.member.pz.role-bg-kaempfer { box-shadow: inset 0 -3px 0 #d0564a; }
#crew .u.member.pz.role-bg-helfer { box-shadow: inset 0 -3px 0 #5bb36c; }
.tv-x.ask, .danger-btn.ask { background: #c0392b !important; color: #fff !important; animation: ask-pulse .6s steps(2) infinite; }
@keyframes ask-pulse { 50% { filter: brightness(1.15); } }
/* Boni-Vorschau in der Taverne */
.tv-syn { margin: 2px 0 8px; }
.tv-syn .sb { padding: 3px 5px; }
.sb-c { position: relative; }
.sb-up { outline: 2px solid #4f9a5a; outline-offset: 1px; }
.sb-new { animation: sb-glow .9s steps(2) infinite; }
@keyframes sb-glow { 50% { box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.2), 0 0 0 1px #2a1a10, 0 0 10px rgba(110,200,110,.9); } }
.sb-plus { position: absolute; top: -9px; right: -5px; font: 700 9px/1 "Pixelify Sans", var(--px, monospace); font-style: normal; color: #fff; background: #4f9a5a; padding: 1px 3px; box-shadow: 0 0 0 1px #2a1a10; }
.sb-preview .sb-more { color: #3a7a4a; }
.sb-preview .sb-row { padding-top: 6px; }
.fit-tag.duo { background: #c0507a !important; }
.fit-tag.near { background: #d4a02e !important; color: #2a1c05 !important; display: inline-flex; align-items: center; gap: 2px; }
.fit-tag.near .px-ico { width: 11px; height: 11px; display: inline-block; }
.fit-tag.near .px-ico svg { width: 100%; height: 100%; display: block; }
.tv-cmp { display: inline-flex; gap: 3px; align-items: center; justify-content: center; flex-wrap: wrap; }
@media (min-width: 1280px) { .tv-syn .sb { display: flex; } .tv-syn { display: block !important; } }
.tv-crew-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tv-crew-head .down-chip { white-space: normal; margin-left: 0; font-size: 11px; }
.tv-mem .down-mark { top: 30%; }
.tv-mem .down-mark .px-grave { width: 18px; height: 20px; }
.tv-mem .down-mark b { font-size: 9px; }
/* Zwei-Tipp-Auswahl bei Schätzen/Früchten */
.opt.card.picked { transform: translateY(-6px) scale(1.03); z-index: 3; outline: 3px solid #4f9a5a; outline-offset: 2px; }
.opt.card.unpicked { opacity: .6; filter: saturate(.7); }
.pick-ok { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); z-index: 6; white-space: nowrap;
  font: 700 11px/1 "Pixelify Sans", var(--px, monospace); color: #fff; background: #4f9a5a; padding: 5px 8px 6px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 2px #2a1a10, 0 4px 0 rgba(0,0,0,.25); animation: ask-pulse .7s steps(2) infinite; }
.opt.card { position: relative; }

/* ---------- Wiki ---------- */
.wiki-pop { max-width: 520px; width: min(520px, 94vw); }
.wk-head { display: flex; align-items: baseline; gap: 8px; }
.wk-head b { font: 600 20px "Pixelify Sans", var(--px, monospace); }
.wk-tabs { display: flex; gap: 4px; margin: 8px 0; overflow-x: auto; scrollbar-width: none; }
.wk-tab { flex: 1 0 auto; padding: 6px 10px 8px; font: 600 13px "Pixelify Sans", var(--px, monospace); color: #4a3520; background: #efe2c6; border: 0; cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 -2px 0 #c9a46a, 0 2px 0 #c9a46a, -2px 0 0 #c9a46a, 2px 0 0 #c9a46a; }
.wk-tab.on { background: #8a5a32; color: #fff6e0; box-shadow: inset 0 2px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.25), 0 -2px 0 #2a1a10, 0 2px 0 #2a1a10, -2px 0 0 #2a1a10, 2px 0 0 #2a1a10; }
.wk-new { font-style: normal; font-size: 9px; background: #4f9a5a; color: #fff; padding: 1px 3px; vertical-align: top; }
.wk-body { max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.wk-sec { margin: 4px 0 14px; }
.wk-sec h3 { font: 600 16px "Pixelify Sans", var(--px, monospace); margin: 0 0 4px; color: #6a4020; }
.wk-sec h4 { font: 600 13px "Pixelify Sans", var(--px, monospace); margin: 10px 0 4px; }
.wk-sec p { font-size: 13px; line-height: 1.4; margin: 0 0 6px; }
.wk-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wk-card { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 8px 4px;
  border-style: solid; border-width: 5px; border-image: var(--pxf-light) 5 fill / 5px / 0 stretch; }
.wk-card b { font: 600 13px "Pixelify Sans", var(--px, monospace); }
.wk-card small { font-size: 11px; line-height: 1.25; display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
.wiki-pop .px-ico { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }
.wiki-pop .px-ico.lg { width: 26px; height: 26px; }
.wiki-pop .px-ico svg { width: 100%; height: 100%; display: block; }
.wk-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.45; }
.wk-list { display: flex; flex-direction: column; gap: 5px; }
.wk-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; background: rgba(120,90,50,.07); }
.wk-row > span:not(.wk-pair):not(.wk-bar):not(.wk-rank) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wk-row b { font-size: 13px; } .wk-row small { font-size: 11.5px; color: var(--mute, #7a6a58); line-height: 1.3; }
.wk-st { width: 22px; height: 22px; display: grid; place-items: center; font: 700 12px "Pixelify Sans", monospace; font-style: normal; color: #fff; flex: none; }
.wk-st.bad { background: #b5503a; } .wk-st.good { background: #4f9a5a; }
.wk-pair { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.wk-pair em { font-style: normal; font-weight: 700; color: #8a5a32; }
.wk-fac { padding: 6px 6px 7px; margin-bottom: 6px; background: rgba(120,90,50,.06); }
.wk-fac-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wk-fac-h b { font: 600 14px "Pixelify Sans", var(--px, monospace); }
.wk-mem { display: inline-flex; flex-wrap: wrap; gap: 1px; margin-left: auto; }
.wk-spr { display: inline-block; width: 20px; height: 23px; }
.wk-spr svg { width: 100%; height: 100%; }
.wk-spr.dim { filter: brightness(0) opacity(.35); }
.wk-tiers { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 12px; }
.wk-tiers span b { display: inline-grid; place-items: center; min-width: 18px; height: 16px; margin-right: 4px; font: 700 11px "Pixelify Sans", monospace; color: #fff; background: #a8693a; }
.wk-boss { display: flex; gap: 8px; align-items: flex-start; padding: 6px; background: rgba(120,90,50,.07); }
.wk-boss.raid { background: rgba(122,79,196,.1); }
.wk-bspr { width: 34px; height: 40px; flex: none; } .wk-bspr svg { width: 100%; height: 100%; }
.wk-bb { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.wk-bb small { font-size: 11.5px; color: var(--mute, #7a6a58); line-height: 1.3; }
.wk-raid { font-style: normal; font-size: 10px; background: #7a4fc4; color: #fff; padding: 1px 4px; }
.wk-meta-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.wk-mc { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5px 2px; background: rgba(120,90,50,.07); }
.wk-mc .wk-spr { width: 30px; height: 35px; }
.wk-mc b { font-size: 11.5px; line-height: 1.1; } .wk-mc small { font-size: 10.5px; color: #3a7a4a; font-weight: 700; }
.wk-bar { flex: 0 0 70px; height: 8px; background: #e6d6b6; }
.wk-bar i { display: block; height: 100%; background: linear-gradient(#f2c94c, #d49a2a); }
.wk-rank { width: 20px; height: 20px; display: grid; place-items: center; font: 700 12px "Pixelify Sans", monospace; background: #8a5a32; color: #fff; flex: none; }
.wk-pct { font: 700 12px "Pixelify Sans", monospace; font-style: normal; flex: none; width: 36px; text-align: right; }
.wk-btn svg { width: 17px !important; height: 15px !important; }
.wk-btn.fresh { animation: wk-pulse 1.4s steps(2) infinite; }
@keyframes wk-pulse { 50% { box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 0 0 2px #4f9a5a, 0 0 10px rgba(80,160,90,.7); } }
.ts-tbtn { display: inline-flex; gap: 8px; }
.wiki-pop, .wiki-pop .wk-body { text-align: left; }
.wk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 2px; overflow: visible; }
.wk-tab { padding: 6px 2px 8px; font-size: 12px; white-space: nowrap; }
.wk-sec h3, .wk-sec h4 { text-align: left; }
.wk-row b { text-align: left; }
.wk-pct { font-family: "Pixelify Sans", var(--px, monospace); }
.wk-bb .type { align-self: flex-start; }
.wiki-pop .btn { text-align: center; justify-content: center; }
.mu-btn.wk-btn:not(.head) { background: #8a5a32; color: #fff6e0; }
.mu-btn.wk-btn.head { background: #fff6e0; color: #4a3520; }

/* ---------- Crew-Duell kompakt ---------- */
.match-pop { width: min(440px, 94vw); max-height: none !important; overflow: visible !important; text-align: left; padding-bottom: 12px !important; }
.mp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-head .fpop-kicker { flex-basis: 100%; margin: 0; }
.mp-head h3 { margin: 0; font: 600 20px "Pixelify Sans", var(--px, monospace); }
.mp-teams { display: grid; gap: 4px; margin: 10px 0 8px; }
.mp-lbl { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #6a4a30; }
.mp-lbl b { font-family: "Pixelify Sans", var(--px, monospace); }
.mp-lbl.foe { color: #a8402a; margin-top: 4px; }
.mp-row { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); grid-auto-flow: column; gap: 4px; }
.mp-u { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 2px 3px; min-width: 0;
  border-style: solid; border-width: 4px; border-image: var(--pxf-light) 5 fill / 4px / 0 stretch; }
.mp-u.foe { border-image-source: var(--pxf-red); }
.mp-u.empty { border: 0; }
.mp-u > i { display: block; width: 30px; height: 35px; }
.mp-u > i svg { width: 100%; height: 100%; }
.mp-u small { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-cmp { position: absolute; top: 1px; right: 1px; }
.mp-cmp .pa { transform: scale(.8); }
.mp-gn { position: absolute; top: 1px; left: 1px; font: 700 9px/1 "Pixelify Sans", monospace; font-style: normal; color: #fff; padding: 1px 3px; background: #8a7a68; }
.mp-gn.cr-rare { background: #2f6fd0; } .mp-gn.cr-epic { background: #7a4fc4; } .mp-gn.cr-legendary { background: #d49a2a; }
.match-pop .mp-chance { margin: 4px 0 10px; }
.mp-btns { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; }
.mp-btns .btn { margin: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.mp-x { min-width: 44px; }
.mp-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.mp-cmp .pa { display: inline-flex; flex-direction: column; gap: 1px; transform: none; }
.mp-cmp .pa svg { width: 8px; height: 5px; display: block; }
.mp-cmp .pa-up svg { fill: #3a8a4a; } .mp-cmp .pa-dn svg { fill: #c0392b; }
.mp-cmp .pa-eq { font-size: 10px; font-style: normal; color: #8a7a68; }
.streak-chip { display: inline-flex; align-items: center; gap: 3px; font-style: normal; padding: 3px 8px 3px 5px; background: #fff3dc; color: #a8402a; font-weight: 800;
  box-shadow: 0 0 0 2px #e8b060; }
.streak-chip .px-flame { width: 15px; height: 15px; }
.streak-chip.warm { background: #ffe2b8; }
.streak-chip.hot { background: #ffcf9a; box-shadow: 0 0 0 2px #e0483b, 0 0 10px rgba(240,120,60,.6); }
.streak-chip.hot .px-flame { animation: ask-pulse .5s steps(2) infinite; }
.streak-note { display: flex; align-items: center; gap: 4px; flex-basis: 100%; font-size: 12px; color: #a8402a; font-weight: 700; margin-top: 2px; }
.streak-note .px-flame { width: 13px; height: 13px; }
.berry-gain { flex-wrap: wrap; }
.wk-mc .wk-sub { color: var(--mute, #8a7a68) !important; font-weight: 400 !important; font-size: 9.5px !important; }
/* Exklusiv fürs Einladen von Freunden */
.bg-sunny { background: radial-gradient(circle 16% at 50% 42%, #f2d24a 60%, #e8a030 62%, transparent 64%), linear-gradient(#8ad0f0 0 62%, #3a8ac0 62%); }
.fr-freund { border-color: #e8b040; box-shadow: 0 0 0 2px #c0507a, 0 0 0 4px #e8b040, 0 0 12px rgba(232,120,160,.55); }
.an-freundesaura::after { content: '♥'; position: absolute; left: 8%; top: 6%; z-index: 2; color: #f2d24a; font-size: 30%; text-shadow: 14px 6px 0 #e0507a, 28px -2px 0 #f2d24a; animation: an-heart 1.8s steps(4) infinite; pointer-events: none; }
.fl-freunde::before { content: '♥'; color: #f2d24a; } .fl-freunde { background: #c0507a; }

/* ---------- Freunde ---------- */
.friends-pop, .invite-pop { width: min(440px, 94vw); text-align: left; }
.fr-me { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: center; margin: 8px 0; }
.fr-qr { width: 116px; height: 116px; display: grid; place-items: center; background: #fff; padding: 4px;
  box-shadow: 0 -3px 0 #2a1a10, 0 3px 0 #2a1a10, -3px 0 0 #2a1a10, 3px 0 0 #2a1a10; }
.fr-qr svg { width: 100%; height: 100%; display: block; }
.fr-qr-wait { font-size: 11px; color: #8a7a68; }
.fr-me-r { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fr-code { font: 700 24px/1 "Pixelify Sans", var(--px, monospace); letter-spacing: .08em; color: #4a3520; background: #fff6e0; border: 0; padding: 6px 8px; cursor: pointer; text-align: left;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.1), 0 -2px 0 #c9a46a, 0 2px 0 #c9a46a, -2px 0 0 #c9a46a, 2px 0 0 #c9a46a; }
.fr-share { margin: 0 !important; }
.fr-gift { padding: 8px; margin: 6px 0; border-style: solid; border-width: 5px; border-image: var(--pxf-gold) 5 fill / 5px / 0 stretch; }
.fr-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 5px 0; }
.fr-goal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 4px 2px; background: rgba(120,90,50,.08); }
.fr-goal b { width: 24px; height: 24px; display: grid; place-items: center; font: 700 13px "Pixelify Sans", monospace; color: #fff; background: #a89880; }
.fr-goal.done b { background: #4f9a5a; }
.fr-goal small { font-size: 9.5px; line-height: 1.2; }
.fr-add { display: flex; gap: 6px; margin: 8px 0; }
.fr-add input { flex: 1; min-width: 0; font: 600 15px "Pixelify Sans", var(--px, monospace); padding: 8px; border: 2px solid #c9a46a; background: #fffaf0; text-transform: uppercase; }
.fr-add .btn { margin: 0; white-space: nowrap; }
.fr-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.fr-row { display: flex; align-items: center; gap: 6px; padding: 4px; background: rgba(120,90,50,.07); }
.fr-row.off { opacity: .65; }
.fr-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.fr-who > span { display: flex; flex-direction: column; min-width: 0; }
.fr-who b { font-size: 13px; } .fr-who small { font-size: 11px; color: var(--mute, #8a7a68); }
.fr-av { width: 34px; height: 34px; display: grid; place-items: center; font-style: normal; flex: none; }
.fr-del.ask { color: #c0392b !important; font-weight: 700; }
.fr-empty { font-size: 12px; margin: 4px; }
.ad-tile.friends .ad-ico { color: #c0507a; font-style: normal; font-size: 18px; }
.inv-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
@media (max-width: 380px) { .fr-me { grid-template-columns: 96px 1fr; } .fr-qr { width: 96px; height: 96px; } .fr-code { font-size: 20px; } }
.friends-pop .btn { text-align: center; justify-content: center; } .fr-gift small { font-size: 11px; line-height: 1.3; display: block; }
.sticker-pop { width: min(360px, 92vw); text-align: center; }
.st-prev { width: 220px; height: 220px; image-rendering: pixelated; display: block; margin: 8px auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.st-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-btns .btn { margin: 0; padding-left: 4px; padding-right: 4px; justify-content: center; text-align: center; }
.fr-btns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.fr-btns .btn { margin: 0 !important; padding-left: 6px; padding-right: 6px; }
/* ---------- Statistik ---------- */
.stv { display: flex; flex-direction: column; gap: 6px; }
.stv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stv-n { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; text-align: center;
  border-style: solid; border-width: 5px; border-image: var(--pxf-light) 5 fill / 5px / 0 stretch; }
.stv-n i { font-style: normal; color: #a8693a; font-size: 14px; }
.stv-n b { font: 600 18px "Pixelify Sans", var(--px, monospace); }
.stv-n small { font-size: 10.5px; color: var(--mute, #8a7a68); line-height: 1.2; }
.stv-h { font: 600 16px "Pixelify Sans", var(--px, monospace); margin: 10px 0 2px; color: #6a4020; }
.stv-bar { display: grid; grid-template-columns: 120px 1fr 54px; gap: 8px; align-items: center; font-size: 12.5px; }
.stv-bar i { height: 8px; background: #e6d6b6; display: block; }
.stv-bar i b { display: block; height: 100%; background: linear-gradient(#f2c94c, #d49a2a); }
.stv-bar em { font: 600 12px "Pixelify Sans", monospace; font-style: normal; text-align: right; }
.stv-tbl { display: flex; flex-direction: column; gap: 3px; }
.stv-tr { display: grid; grid-template-columns: 26px 1fr 36px 42px 62px 40px; gap: 4px; align-items: center; font-size: 12px; padding: 3px 4px; background: rgba(120,90,50,.06); }
.stv-tr.head { background: none; font-size: 10.5px; color: var(--mute, #8a7a68); font-weight: 700; }
.stv-tr i { width: 22px; height: 26px; display: block; } .stv-tr i svg { width: 100%; height: 100%; }
.stv-tr b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stv-tr span { text-align: right; }
.pf-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.pf-quick .btn { margin: 0; padding-left: 4px; padding-right: 4px; font-size: 14px; justify-content: center; text-align: center; }
@media (max-width: 420px) { .stv-bar { grid-template-columns: 96px 1fr 48px; } }
.opt.card.picked { transform: none !important; }
.pick-ok { left: auto !important; right: 6px; top: 6px; bottom: auto !important; transform: none !important; padding: 4px 7px !important; font-size: 14px !important; animation: none !important; }
.pick-dock .btn { width: 100%; justify-content: center; text-align: center; background: #4f9a5a !important; }
.pick-hint { text-align: center; font-size: 12px; margin-top: 6px; }
/* Schätze und Früchte am Handy: drei Karten nebeneinander, alles auf einen Blick */
@media (max-width: 560px) {
  body.choice-open .cards.loot { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  body.choice-open .cards.loot .opt.card { min-width: 0; padding: 0 !important; }
  body.choice-open .cards.loot .card-face { font-size: 11px; }
}
@media (max-width: 560px) {
  body.choice-open .cards.loot .card-name { font-size: 12px !important; line-height: 1.1 !important; padding: 3px 4px !important; overflow-wrap: anywhere; }
  body.choice-open .cards.loot .card-face [class*="rarity"], body.choice-open .cards.loot .lc-rar { font-size: 10px !important; }
  /* Taverne kompakter: alles ohne Scrollen */
  .tavern .tv-head h2 { font-size: 20px; margin: 0; }
  .tavern .tv-grid { gap: 6px; }
  .tavern .tv-off { padding: 4px 3px 6px !important; }
  .tavern .tv-off .tv-spr svg { width: 34px; height: 40px; }
  .tavern .tv-detail { padding: 8px 10px !important; margin-top: 6px; }
  .tavern .tv-detail .tv-ab { font-size: 12px; margin: 2px 0; line-height: 1.3; }
  .tavern .tv-d-head small { font-size: 11px; }
  .tavern .tv-stats { margin: 4px 0; }
  .tavern .tv-buy { margin-top: 6px !important; padding-top: 10px !important; padding-bottom: 12px !important; font-size: 16px !important; }
  .tavern .tv-mem { padding: 4px 2px !important; }
  .tavern .tv-mem > i svg { width: 26px; height: 30px; }
  .tavern .tv-actions { margin-top: 6px; }
  .tavern .tv-actions .btn { padding-top: 10px; padding-bottom: 12px; }
}
@media (max-width: 560px) {
  .tavern .tv-d-head small { display: none; }
  .tavern .tv-detail .unlock-gain, .tavern .tv-detail .gain { font-size: 11.5px; line-height: 1.25; }
  .tavern .tv-crew { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .tavern .tv-mem { min-width: 0; }
  .tavern .tv-mem small { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tavern .tv-mem em { display: none; }
  .tavern .tv-mem .tv-cap { font-size: 8.5px; }
  .tavern .tv-mem .tv-x { font-size: 10px; padding: 1px 3px; }
  .tavern .tv-mem .down-mark { top: 26%; }
  .tavern .tv-mem .down-mark .px-grave { width: 14px; height: 16px; }
  .tavern .tv-crew-head { font-size: 13px; margin-top: 6px; }
  .tavern .tv-actions { display: grid !important; grid-template-columns: auto 1fr; gap: 8px; align-items: stretch; }
  .tavern .tv-actions > .btn { margin: 0; font-size: 14px; white-space: nowrap; }
  .tavern .tv-actions .dock { position: static !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
  .tavern .tv-actions .dock .btn { width: 100%; margin: 0; }
}
.guest-tag { font-style: normal; font: 700 10px/1 "Pixelify Sans", monospace; color: #fff; background: #d4a02e; padding: 2px 4px; vertical-align: middle; margin-left: 4px; }
.guest-warn { font-size: 12px; line-height: 1.35; background: #fff3d6; padding: 6px 8px; margin: 0 0 6px; box-shadow: 0 0 0 2px #e8b040; }

/* ---------- Kampf-Karten unter dem Feld: Pixel-Holz statt weißer Kästen ---------- */
.battle3d .hud .fighter, .battle3d .hud .side-enemy .fighter {
  background: none !important; border-radius: 0 !important; box-shadow: none !important;
  border-style: solid !important; border-width: 5px !important; border-image: var(--pxf-light) 5 fill / 5px / 0 stretch !important;
  padding: 3px 6px 4px !important; }
.battle3d .hud .side-enemy .fighter { border-image-source: var(--pxf-red) !important; }
.battle3d .hud .fighter.big, .battle3d .hud .fighter.mini-boss { border-image-source: var(--pxf-gold) !important; }
.battle3d .hud .fighter.front { outline: 2px solid #e8b040; outline-offset: 1px; }
.battle3d .hud .fighter .f-name { font-size: 12.5px; display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; overflow: hidden; }
.battle3d .hud .fighter .f-name b { font-family: "Pixelify Sans", var(--px, monospace); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle3d .hud .fighter .f-name .type { font-size: 10px; padding: 1px 5px; border-radius: 3px; flex: none; }
.battle3d .hud .side-enemy .fighter .f-name { justify-content: flex-end; }
.battle3d .hud .fighter .f-bar { height: 7px; border-radius: 0; background: #3a2a20; box-shadow: inset 0 0 0 1px #2a1a10; }
.battle3d .hud .fighter .f-bar i, .battle3d .hud .fighter .f-bar s { border-radius: 0; }
.battle3d .hud .fighter .f-en { height: 3px; border-radius: 0; }
.battle3d .hud .fighter .f-hp { font: 600 11px "Pixelify Sans", var(--px, monospace); }
.battle3d .hud .fighter.ko { filter: grayscale(.8); }

/* ---------- Boni-Abzeichen: runder, wie kleine Spielsteine ---------- */
.sb-c { border-radius: 7px; height: 26px; padding: 0 7px 0 3px; box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.22), 0 0 0 2px #3a2516; }
.sb-ic { width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.18); }
.sb-off .sb-ic { background: rgba(0,0,0,.06); }
.sb-c b { font-size: 13px; }
.sb-up { outline: none; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.2), 0 0 0 2px #2f6a3a, 0 0 0 4px #9ad08a; }
.sb-plus { border-radius: 4px; top: -10px; right: -6px; box-shadow: 0 0 0 2px #2a1a10; }
.sb { border-image-source: var(--pxf-light); }

/* ---------- Auswahl-Häkchen: sauberes Pixel-Abzeichen ---------- */
.pick-ok { font-size: 0 !important; width: 24px; height: 24px; padding: 0 !important; border-radius: 50%; background: #4f9a5a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M6%200h1v1h-1zM5%201h1v1h-1zM6%201h1v1h-1zM0%202h1v1h-1zM4%202h1v1h-1zM5%202h1v1h-1zM0%203h1v1h-1zM1%203h1v1h-1zM3%203h1v1h-1zM4%203h1v1h-1zM1%204h1v1h-1zM2%204h1v1h-1zM3%204h1v1h-1zM2%205h1v1h-1z'/%3E%3C/svg%3E") center / 13px no-repeat !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.2), 0 0 0 2px #fff, 0 0 0 4px #2f6a3a !important; }
.opt.card.picked { outline: 3px solid #4f9a5a; outline-offset: 3px; border-radius: 10px; }
.pick-dock .btn { background: #4f9a5a !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.22), inset 0 -4px 0 rgba(0,0,0,.25), 0 4px 0 #2f6a3a !important; }
.px-chk { width: 16px; height: 14px; display: inline-block; vertical-align: -1px; margin-right: 4px; }
.boss-show.out { transition: opacity .15s !important; pointer-events: none; }
.lang-btn { font: 700 12px/1 'Pixelify Sans', monospace; } .mu-btn.lang-btn:not(.head) { background: #8a5a32; color: #fff6e0; }
.room-head { display: flex; align-items: center; gap: 8px; }
.room-x { margin-left: auto; width: 34px; height: 32px; display: grid; place-items: center; font: 700 16px/1 "Pixelify Sans", monospace; color: #4a3520; background: #fff6e0; border: 0; cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 -2px 0 #c9a46a, 0 2px 0 #c9a46a, -2px 0 0 #c9a46a, 2px 0 0 #c9a46a; }
.room-x:active { transform: translateY(2px); }

/* ---------- Hafen nach Tageszeit, eigene Crew am Steg ---------- */
.sail-stage.tod-morning { background: linear-gradient(#ffd9b0 0%, #ffeccc 30%, #cfe8f2 58%, #5aa6cf 58%, #3a86b8 100%) !important; }
.sail-stage.tod-day { background: linear-gradient(#a8d8f0 0%, #cfeaf7 58%, #4f9ccc 58%, #2f7fb0 100%) !important; }
.sail-stage.tod-dusk { background: linear-gradient(#f2a06a 0%, #f6c88a 35%, #f0d8b0 58%, #5a7aa8 58%, #3a5a88 100%) !important; }
.sail-stage.tod-dusk .ss-sun { background: #ffb36b; top: 52px; box-shadow: 0 0 0 6px rgba(255,170,110,.4), 0 0 26px rgba(255,140,80,.8); }
.sail-stage.tod-night { background: linear-gradient(#1c2240 0%, #2c3460 58%, #1c2a4a 58%, #121c34 100%) !important; }
.sail-stage.tod-night .ss-sun { background: #f4f0d8; width: 26px; height: 26px; box-shadow: 0 0 0 5px rgba(244,240,216,.15), 0 0 20px rgba(244,240,216,.5); }
.sail-stage.tod-night .ss-cloud { opacity: .25; }
.sail-stage.tod-night .ss-title { color: #f4ead0 !important; text-shadow: 0 2px 0 rgba(0,0,0,.4) !important; }
.ss-stars { position: absolute; inset: 0 0 45% 0; background:
  radial-gradient(circle 1px at 12% 20%, #fff 99%, transparent), radial-gradient(circle 1px at 30% 40%, #fff 99%, transparent), radial-gradient(circle 1.5px at 52% 14%, #fff 99%, transparent),
  radial-gradient(circle 1px at 68% 36%, #fff 99%, transparent), radial-gradient(circle 1px at 84% 50%, #fff 99%, transparent), radial-gradient(circle 1px at 44% 52%, #fff 99%, transparent);
  animation: tp-blink 3s steps(2) infinite; }
.ss-dock { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: flex-end; gap: 2px; padding-left: 12px;
  background: linear-gradient(#a8784a 0 5px, #8a5a32 5px 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.2); }
.ss-dock::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: repeating-linear-gradient(90deg, #6a4424 0 24px, transparent 24px 26px); }
.ss-mate { position: relative; bottom: 16px; width: 24px; height: 28px; display: block; animation: ts-bob 2.4s steps(2) infinite; }
.ss-mate:nth-child(odd) { animation-delay: -1.2s; }
.ss-mate svg { width: 100%; height: 100%; display: block; }
.ss-lamp { position: absolute; right: 14px; bottom: 22px; width: 6px; height: 22px; background: linear-gradient(#f2d24a 0 7px, #4a3520 7px 100%); }
.tod-dusk .ss-lamp, .tod-night .ss-lamp { box-shadow: 0 0 12px 4px rgba(242,210,74,.55); }
.sail-stage { height: 168px !important; }
.ss-dock { flex-direction: row !important; flex-wrap: nowrap; }
.ss-dock .ss-mate { position: relative !important; display: inline-block !important; flex: none; left: auto !important; top: auto !important; bottom: 16px !important; margin: 0 !important; }
.sail-stage .ss-title { font-size: 14px !important; max-width: 62%; line-height: 1.25; }
.sail-stage .ss-dock { display: flex !important; }
.fr-btn { position: relative; color: #c0507a !important; }
.fr-btn svg { width: 17px !important; height: 13px !important; }
.fr-on { position: absolute; top: -7px; right: -7px; min-width: 15px; height: 15px; padding: 0 3px; font: 700 10px/15px "Pixelify Sans", monospace; font-style: normal; color: #fff; background: #4f9a5a; border-radius: 8px; box-shadow: 0 0 0 2px #fff6e0; }
@media (max-width: 560px) { body.in-run .head-actions .lang-btn, body.in-run .head-actions .fr-btn { display: none !important; } }
/* Animierte Profilteile ab bestimmten Rängen */
.an-glanz::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255,240,170,.85) 45%, transparent 55%); background-size: 250% 100%; animation: an-shine 2.4s steps(8) infinite; }
@keyframes an-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.an-wellen::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 6px, transparent 6px 14px); animation: ts-sea 1.6s steps(4) infinite; opacity: .8; }
.an-kaiseraura { animation: an-kaiser 1.6s steps(3) infinite; }
@keyframes an-kaiser { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,72,59,0); } 50% { box-shadow: 0 0 0 3px rgba(242,201,76,.8), 0 0 16px rgba(224,72,59,.7); } }
.mood-chip { display: inline-flex; align-items: center; gap: 4px; font-style: normal; padding: 3px 8px; background: #e8f2f8; color: #2a5a7a; font-weight: 800; font-size: 12px; box-shadow: 0 0 0 2px #9ac0d8; border-radius: 6px; }
.mood-chip b { font-weight: 800; }
@media (max-width: 420px) { .mood-chip b { display: none; } }
/* Training kompakt: vier kleine Knöpfe in einer Reihe */
.train { padding: 8px 10px !important; margin-bottom: 8px !important; }
.train-head b { font-size: 15px; }
.train-head small { font-size: 11.5px; }
.train-av svg { width: 28px; height: 32px; }
.train-opts { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; margin: 6px 0 4px; }
.train-opt { padding: 6px 2px 5px !important; min-height: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.train-opt i { font-style: normal; font-size: 15px; }
.train-opt b { font-size: 11px !important; line-height: 1.1; }
.train-opt small { font-size: 10px !important; line-height: 1.15; }
.train-opt .tip-badge { top: -9px !important; font-size: 9px !important; padding: 1px 4px !important; }
.train-opt .tip-badge::after { display: none !important; }
.train-auto-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.train-auto-row small { color: var(--mute, #8a7a68); }
.train-opt { min-width: 0 !important; overflow: hidden; } .train-opt b { font-size: 10.5px !important; overflow-wrap: anywhere; }
/* Tageskiste und Wochen-Herausforderung */
.ad-tile .ad-ico svg { width: 22px; height: 22px; display: block; margin: 0 auto; }
.ad-tile.opening .ad-ico { animation: chest-pop .6s steps(4); }
@keyframes chest-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-6deg); } 70% { transform: scale(.95) rotate(4deg); } 100% { transform: scale(1); } }
.week-pop { width: min(400px, 94vw); text-align: left; }
.wk-tasks { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.wk-task { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 6px; background: rgba(120,90,50,.07); }
.wk-task > i { width: 22px; height: 22px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; background: #d8ccb4; border-radius: 4px; }
.wk-task.done > i { background: #4f9a5a; }
.wk-task b { font-size: 13px; }
.wk-task em { font: 700 12px "Pixelify Sans", monospace; font-style: normal; color: #8a5a32; }
.week-pop .btn { text-align: center; justify-content: center; }
/* Hinweis-Sprechblase für die ersten Runs */
.coach { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 8px 8px 8px 10px; font-size: 13px; line-height: 1.35; color: #3a2a18;
  background: #fff3c8; border-radius: 8px; box-shadow: 0 0 0 2px #e8b040, 0 3px 0 #c9902a; animation: pop-in .25s ease-out; }
.coach-ico svg { width: 18px; height: 18px; display: block; margin-top: 1px; }
.coach span { flex: 1; }
.coach-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: #4f9a5a; color: #fff; font-weight: 800; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
/* Frucht/Schatz überspringen: dezent, unter der Auswahl */
.pick-skip-row { text-align: center; margin: 6px 0 0; }
.pick-skip { background: none; border: 0; padding: 6px 10px; font: inherit; font-size: 12px; color: #8a6a44; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.pick-skip svg { width: 12px; height: 12px; }
.pick-skip:hover { color: #5a3a1e; }
/* Wiki Meta: starke Power-ups als kleine Chips */
.wk-pu .pu-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pu-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 5px; background: #fff8e8; border: 2px solid #d9bf8f; border-radius: 6px; box-shadow: 0 2px 0 #d9bf8f; font-size: 12px; line-height: 1.1; max-width: 100%; }
.pu-chip b { font-weight: 700; color: #4a2f17; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 128px; }
.pu-ico { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.pu-ico svg { width: 20px; height: 20px; image-rendering: pixelated; }
.pu-lift { font-style: normal; font-weight: 800; font-size: 11px; padding: 1px 5px; border-radius: 4px; background: #efe3c8; color: #7a5a34; }
.pu-lift.up { background: #dcefd6; color: #2f6a3a; }
.pu-lift.down { background: #f4dcd6; color: #a2402e; }
.pu-chip.weak { opacity: .62; filter: grayscale(.5); }

/* ---------- Begleiter ---------- */
@keyframes pet-hop { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-3px); } 80% { transform: translateY(0); } 88% { transform: translateY(-1px); } }
@keyframes pet-dance { 0%, 100% { transform: translateY(0) scaleX(1); } 25% { transform: translateY(-3px) scaleX(1); } 50% { transform: translateY(0) scaleX(-1); } 75% { transform: translateY(-2px) scaleX(-1); } }
.portrait .ppet { position: absolute; right: 1px; bottom: 1px; width: 40%; height: 40%; z-index: 2; display: block; animation: pet-hop 2.6s steps(1) infinite; }
.portrait .ppet svg { width: 100% !important; height: 100% !important; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.portrait.lg .ppet { width: 36%; height: 36%; }
.ss-deck { position: absolute; left: 14px; right: 18px; top: 33px; height: 14px; display: flex; justify-content: center; gap: 3px; z-index: 2; pointer-events: none; }
.ss-pet { display: block; width: 13px; height: 13px; animation: pet-dance 1.6s steps(4) infinite; }
.ss-pet.d1 { animation-delay: -.4s; } .ss-pet.d2 { animation-delay: -.8s; } .ss-pet.d3 { animation-delay: -1.2s; }
.ss-pet svg, .ss-buddy svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.sail-stage .ss-dock .ss-buddy { width: 16px !important; height: 16px !important; margin-left: 2px !important; animation: pet-hop 2s steps(1) infinite !important; }
.pet-hop { display: inline-block; animation: pet-hop 2.4s steps(1) infinite; }
.pet-hop svg { display: block; }
.pet-sil svg { filter: brightness(0) opacity(.28); }
/* Album: Begleiter-Karten */
.pet-card .acard-art { display: grid; place-items: center; }
.pet-card .acard-art svg { width: 44px; height: 44px; shape-rendering: crispEdges; }
.pet-card small { font-style: normal; }
.pet-card.on { box-shadow: 0 0 0 3px #4f9a5a inset; }
.pet-card .btn.mini { margin-top: 6px; }
/* Fenster: neuer Begleiter */
.pet-pop { text-align: center; }
.pet-pop .pet-hop.big svg { width: 84px; height: 84px; shape-rendering: crispEdges; margin: 6px auto 2px; }
.pet-pop h3 { margin: 4px 0 2px; }
.pet-say { font-style: italic; color: #6b4a2a; margin: 4px 0 10px; }
.pet-note { display: block; margin-top: 8px; color: #8a6a44; font-size: 11px; }
/* Hafen: Gerücht + Sammelbuch */
.hook-box { display: grid; gap: 6px; margin: 8px 0; padding: 8px; }
.hook-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: rgba(255,255,255,.45); border: 0; border-radius: 6px; padding: 6px 8px; font: inherit; color: inherit; cursor: pointer; }
.hook-row:hover { background: rgba(255,255,255,.7); }
.hook-row > span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.hook-row small { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #a0724a; font-weight: 700; }
.hook-row b { font-size: 13px; line-height: 1.25; }
.hook-ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
.hook-ico svg { width: 26px; height: 26px; shape-rendering: crispEdges; }
.hook-ico .pet-sil, .hook-ico span { display: block; }
.hook-bar { display: block; height: 5px; border-radius: 3px; background: rgba(0,0,0,.1); overflow: hidden; margin-top: 3px; }
.hook-bar i { display: block; height: 100%; background: #e0a83a; }
/* Album: Sammelbuch-Pfad */
.album-steps { padding: 10px 12px; margin: 0 0 10px; }
.as-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.as-head small { color: #8a6a44; }
.as-path { display: flex; align-items: center; }
.as-line { flex: 1; height: 3px; background: rgba(0,0,0,.12); min-width: 6px; }
.as-node { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #efe2c6; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); font-style: normal; }
.as-node svg { width: 22px; height: 22px; shape-rendering: crispEdges; }
.as-node em { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-size: 9px; font-style: normal; color: #8a6a44; }
.as-node.done { background: #f6d77a; box-shadow: inset 0 -3px 0 rgba(160,110,20,.35), 0 0 0 2px #e0a83a; }
.as-node.next { box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 0 0 2px #4f9a5a; animation: pet-hop 2.2s steps(1) infinite; }
.album-steps { padding-bottom: 20px; }
@media (prefers-reduced-motion: reduce) { .ppet, .ss-pet, .pet-hop, .as-node.next, .ss-buddy { animation: none !important; } }

/* ---------- Piraten-Kosmetik: Pixel-Szenen, Pixel-Flaggen, animierte Rahmen ---------- */
.portrait .pbg { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; font-style: normal; }
.portrait .pbg svg, .portrait .pflag svg { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; z-index: 0;
  animation: none !important; transform: none !important; filter: none !important; }
.portrait.has-art { background: #1a1a22; }
/* Flaggen als Pixel-Bild, wehen leicht */
.pflag.art { width: 42%; min-width: 15px; aspect-ratio: 13 / 11; background: none; overflow: hidden; border-width: 2px; border-radius: 2px;
  transform-origin: 0 50%; animation: fl-wave 2.2s steps(2) infinite; }
.pflag.art::before { content: none !important; }
.portrait.xs .pflag.art, .portrait.sm .pflag.art { border-width: 1px; right: -2px; top: -2px; }
@keyframes fl-wave { 50% { transform: skewY(-5deg) scaleX(.94); } }
/* Bewegte Teile in den Szenen */
.portrait .ca { transform-box: fill-box; }
.ca-spin { transform-box: view-box !important; transform-origin: 2.5px 7.5px; animation: ca-spin 3.2s steps(8) infinite; }
.ca-drift { animation: ca-drift 3s steps(3) infinite alternate; }
.ca-fog { animation: ca-drift 5s steps(4) infinite alternate; }
.ca-snow { animation: ca-snow 2.4s steps(6) infinite; }
.ca-snow2 { animation: ca-snow 3s steps(6) infinite -1.2s; }
.ca-tw1, .ca-tw2, .ca-tw3 { animation: ca-tw 1.8s steps(2) infinite; }
.ca-tw2 { animation-delay: -.6s; } .ca-tw3 { animation-delay: -1.2s; }
.ca-flick { animation: ca-flick .9s steps(2) infinite; } .ca-flick2 { animation: ca-flick 1.1s steps(2) infinite -.4s; }
.ca-flash { animation: ca-flash 2.4s steps(1) infinite; }
.ca-puff { transform-origin: 50% 50%; animation: ca-puff 2.4s steps(4) infinite; }
.ca-puff2 { transform-origin: 50% 50%; animation: ca-puff 2.4s steps(4) infinite -1.2s; }
.ca-splash { transform-origin: 50% 100%; animation: ca-splash 2.4s steps(3) infinite -1.2s; }
.ca-flashall, .ca-bolt { animation: ca-storm 3.6s steps(1) infinite; }
.ca-rain { animation: ca-rain .6s steps(3) infinite; }
.ca-wave { animation: ca-wave 2.4s steps(6) infinite; } .ca-wave2 { animation: ca-wave 3s steps(6) infinite reverse; }
.ca-sway { transform-origin: 30% 100%; animation: ca-sway 2.6s steps(3) infinite alternate; }
.ca-sway2 { transform-origin: 70% 100%; animation: ca-sway 2.6s steps(3) infinite alternate-reverse; }
.ca-blink { animation: ca-blink 3.4s steps(1) infinite; }
.ca-rise { animation: ca-rise 2.8s steps(7) infinite; } .ca-rise2 { animation: ca-rise 3.4s steps(7) infinite -1.5s; }
.ca-flag { transform-origin: 100% 0; animation: ca-flag 1.3s steps(2) infinite alternate; }
@keyframes ca-spin { to { transform: rotate(360deg); } }
@keyframes ca-drift { to { transform: translateX(2px); } }
@keyframes ca-snow { from { transform: translateY(-3px); } to { transform: translateY(5px); } }
@keyframes ca-tw { 50% { opacity: .15; } }
@keyframes ca-flick { 50% { opacity: .55; } }
@keyframes ca-flash { 0% { opacity: 1; } 12% { opacity: 0; } }
@keyframes ca-puff { 0% { transform: scale(.3); opacity: 0; } 10% { opacity: 1; } 70% { transform: scale(1.25); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ca-splash { 0% { transform: scaleY(0); } 40% { transform: scaleY(1); } 80%, 100% { transform: scaleY(0); } }
@keyframes ca-storm { 0%, 62% { opacity: 0; } 64% { opacity: 1; } 67% { opacity: 0; } 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes ca-rain { to { transform: translate(-2px, 6px); } }
@keyframes ca-wave { to { transform: translateX(6px); } }
@keyframes ca-sway { from { transform: rotate(-5deg); } to { transform: rotate(4deg); } }
@keyframes ca-blink { 0%, 90% { opacity: 1; } 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes ca-rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-9px); opacity: 0; } }
@keyframes ca-flag { to { transform: skewY(6deg) scaleX(.9); } }
/* Animierte Rahmen: Leuchten innen über dem Hintergrund */
.portrait .pbg::after { content: none; position: absolute; inset: 0; pointer-events: none; }
.fr-schatzglanz { border-color: #e2a92a; box-shadow: 0 0 0 2px #fff6dc, 0 0 10px rgba(242,201,76,.6); }
.fr-schatzglanz .pbg::after { content: ''; inset: -30%; background: linear-gradient(115deg, transparent 42%, rgba(255,248,200,.7) 48%, transparent 54%);
  animation: fr-glint 3.2s steps(8) infinite; }
.fr-glutkette { border-color: #5a2e1a; border-style: dashed; box-shadow: 0 0 0 1px #2a1a10, 0 0 9px rgba(242,118,46,.65); }
.fr-glutkette .pbg::after { content: ''; box-shadow: inset 0 0 6px 2px rgba(242,118,46,.8); animation: fr-glow 1.2s steps(3) infinite alternate; }
.fr-sturmband { border-color: #2a3f6a; box-shadow: 0 0 0 2px #9ab8e0, 0 0 8px rgba(120,160,230,.5); }
.fr-sturmband .pbg::after { content: ''; box-shadow: inset 0 0 0 2px #fff27a, inset 0 0 8px rgba(255,242,122,.6); animation: ca-storm 3.6s steps(1) infinite; }
.fr-regenbogen { border-color: #1f8a8a; border-style: solid; background-origin: padding-box; box-shadow: 0 0 0 2px #7fd8c8, 0 0 0 4px #1d5a6a; }
.fr-regenbogen .pbg::after { content: ''; box-shadow: inset 0 0 0 2px #3fbfae, inset 0 0 7px rgba(80,220,200,.55); animation: fr-scale 2.4s steps(4) infinite alternate; }
@keyframes fr-glint { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
@keyframes fr-glow { from { opacity: .45; } to { opacity: 1; } }
@keyframes fr-scale { to { filter: hue-rotate(50deg) brightness(1.15); } }
/* Seltene Teile im Editor hervorheben */
.cos.rare-item { box-shadow: inset 0 0 0 2px #e8b830; }
@media (prefers-reduced-motion: reduce) { .portrait .ca, .pflag.art, .portrait .pbg::after { animation: none !important; } }
.ss-deck { top: 35px !important; height: 16px !important; gap: 4px !important; }
.ss-pet { width: 16px !important; height: 16px !important; }
.fpop-card.pet-pop { display: block; }
.pet-pop .fpop-kicker { display: block; }
.pet-pop .pet-hop.big { display: block; margin: 0 auto; width: max-content; }
.pet-pop .fpop-btns { justify-content: center; }
/* Seltene Teile: auch gesperrt in Farbe als Vorschau, damit man weiß, wofür man spielt */
.cos.locked.rare-item { opacity: .85; }
.cos.locked.rare-item .portrait { filter: saturate(.75) brightness(.9); }

/* ---------- Tiefe der Figuren: Spielweise, Fähigkeit, Ulti, „Darum lohnt er sich“ ---------- */
.tv-style { margin: 4px 0 6px; font-size: .76rem; font-style: italic; color: #7a5a3a; line-height: 1.3; }
.tv-why { margin: 6px 0; padding: 6px 8px; background: #eaf3df; border: 2px solid #7fb07a; border-radius: 6px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06); display: grid; gap: 4px; }
.tv-why .why-k { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #3f7a4a; }
.tv-why .why-row { display: flex; align-items: flex-start; gap: 6px; font-size: .74rem; line-height: 1.3; color: #2f4a2a; font-weight: 600; }
.tv-why .why-row > svg, .tv-why .why-row > i, .tv-why .why-row > .pxi { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; font-style: normal; }
.why-heart { color: #d0506a; font-size: .8rem; line-height: 1; }
.why-sword { color: #8a5a2a; font-size: .8rem; line-height: 1; }
.tv-abx { position: relative; margin: 5px 0; padding: 5px 8px 6px 10px; border-radius: 6px; background: #fbf3e2;
  border: 2px solid #d9c49a; border-left-width: 5px; display: grid; grid-template-columns: auto 1fr auto; column-gap: 6px; align-items: baseline; }
.tv-abx.ty-kraft { border-left-color: #d98a72; } .tv-abx.ty-klinge { border-left-color: #7fa98a; } .tv-abx.ty-technik { border-left-color: #7fa3c9; }
.tv-abx.ult { border-color: #e2b85a; border-left-color: #d89a2a; background: linear-gradient(90deg, #fff3cf, #fbf3e2 70%); }
.tv-abx .abx-k { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: #8a6a44;
  padding: 1px 5px; border-radius: 3px; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.tv-abx.ult .abx-k { background: #c8861a; }
.tv-abx b { font-size: .8rem; color: #3a2a1a; }
.tv-abx .abx-when { font-style: normal; font-size: .62rem; font-weight: 700; color: #8a6a44; background: #efe2c4; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.tv-abx small { grid-column: 1 / -1; margin-top: 2px; font-size: .74rem; line-height: 1.3; color: #5a4a36; }
.tv-mates { display: flex; align-items: center; gap: 4px; margin: 4px 0 2px; font-size: .7rem; color: #7a6a52; }
.tv-mates > span { font-weight: 800; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: #c0506a; }
.tv-mates > i { width: 20px; height: 22px; display: inline-block; }
.tv-mates > i svg { width: 100%; height: 100%; }
.tv-mates small { margin-left: 2px; font-size: .7rem; }
.c3-style { display: block; margin: 4px 10px 0; font-size: .68rem; font-style: italic; line-height: 1.25; color: #7a5a3a; text-align: center; }

/* ---------- Kampf: Fähigkeiten sichtbar, Zusammenspiel zum Start ---------- */
.callout.ty-kraft { background: #f2b49e; } .callout.ty-klinge { background: #b6dcb9; } .callout.ty-technik { background: #b4d0ee; }
.callout { border: 2px solid #3a2a1a; border-radius: 5px; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.ptag.ab { background: #6a8a3a; font-size: .64rem; }
.sy-intro { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 40; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 4px; max-width: 92%; pointer-events: none; animation: syIn .45s cubic-bezier(.2,1.4,.4,1) both; }
.sy-intro small { width: 100%; text-align: center; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 0 #3a2a1a, 0 -1px 0 #3a2a1a, 1px 0 0 #3a2a1a, -1px 0 0 #3a2a1a; }
.sy-chip { font-size: .68rem; font-weight: 800; color: #3a2a1a; background: #fbf3e2; border: 2px solid #3a2a1a; border-radius: 4px; padding: 1px 6px;
  box-shadow: 0 3px 0 rgba(0,0,0,.25); white-space: nowrap; }
.sy-chip.duo { background: #f6c6d0; } .sy-chip.fac { background: #f2deb0; } .sy-chip.ally { background: #d8c6f2; }
.sy-intro.out { animation: syOut .45s ease-in forwards; }
@keyframes syIn { from { opacity: 0; transform: translate(-50%, -14px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes syOut { to { opacity: 0; transform: translate(-50%, -10px); } }
@media (prefers-reduced-motion: reduce) { .sy-intro, .sy-intro.out { animation: none; } }
.pflag.art { right: 3px; top: 3px; }
.portrait.xs .pflag.art, .portrait.sm .pflag.art { right: 1px; top: 1px; }
.co-petchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #6b4a2a; background: #f3e6c8; border-radius: 6px; padding: 2px 6px 2px 3px; margin: 0 4px 4px 0; }
.co-petchip i { width: 16px; height: 16px; display: block; }
.co-petchip svg { width: 16px; height: 16px; display: block; shape-rendering: crispEdges; }
.portrait .ppet svg { animation: none !important; transform: none !important; }
.tv-trait { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tv-trait .abx-k { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: #6a8a5a; padding: 1px 5px; border-radius: 3px; }
.sy-intro { top: 40px; }
/* Vivre Card / Letzte Hoffnung: deutlicher Moment im Kampf */
.ult-call.vivre { animation: vivre-in 2.4s ease-out both; }
.ult-call.vivre b { font-size: 1.15em; }
@keyframes vivre-in { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 12% { opacity: 1; transform: translateX(-50%) scale(1.08); } 20% { transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.ult-call.last { background: linear-gradient(180deg, #ffe0d6, #f08a6a); color: #3a1a10; }
/* Spielerkarte und Stammcrew-Kampf: über der unteren Leiste, mit Platz für Notch und Home-Balken */
.pcard-wrap { z-index: 950; }
.pcard-bg { padding: calc(12px + env(safe-area-inset-top)) 12px calc(28px + env(safe-area-inset-bottom)); }
.pcard { margin: 8px 0 24px; }

/* ---------- Landgang (kleine Abenteuer) ---------- */
.dg-card { max-width: 400px; text-align: left; padding-top: 12px; }
.dg-card h3 { margin: 2px 0 6px; }
.dg-scene { position: relative; height: 96px; margin: -2px -2px 10px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(var(--sky) 0 72%, var(--ground) 72% 100%); box-shadow: inset 0 0 0 3px rgba(58,44,32,.55), inset 0 -4px 0 rgba(0,0,0,.12); image-rendering: pixelated; }
.dg-scene::after { content: ''; position: absolute; left: 0; right: 0; top: 72%; height: 3px; background: rgba(0,0,0,.12); }
.dg-deco { position: absolute; right: 10px; bottom: 22px; width: 84px; height: 48px; }
.dg-deco svg, .dg-mini svg { width: 100%; height: 100%; display: block; }
.dg-crew { position: absolute; left: 10px; bottom: 6px; display: flex; gap: 2px; }
.dg-mate { width: 26px; height: 30px; display: block; animation: dg-walk 1.2s steps(2) infinite; }
.dg-mate.m1 { animation-delay: -.3s; } .dg-mate.m2 { animation-delay: -.6s; } .dg-mate.m3 { animation-delay: -.9s; }
.dg-mate svg, .dg-boss svg, .dg-spr svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.dg-boss { position: absolute; right: 40px; bottom: 6px; width: 40px; height: 46px; transform: scaleX(-1); animation: dg-boss-in .5s steps(5) both; filter: drop-shadow(0 0 6px rgba(200,40,40,.45)); }
.dg-scene.boss .dg-deco { opacity: .55; }
.dg-hearts { position: absolute; left: 8px; top: 7px; display: flex; gap: 3px; }
.dg-heart { width: 12px; height: 11px; display: block; background: #e0485a; clip-path: polygon(0 20%, 20% 0, 40% 0, 50% 15%, 60% 0, 80% 0, 100% 20%, 100% 45%, 50% 100%, 0 45%); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.dg-heart.off { background: rgba(255,255,255,.45); }
@keyframes dg-walk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes dg-boss-in { from { transform: scaleX(-1) translateX(-60px); opacity: 0; } to { transform: scaleX(-1) translateX(0); opacity: 1; } }
@keyframes dg-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.dg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dg-dots { display: flex; gap: 4px; }
.dg-dots i { width: 9px; height: 9px; border-radius: 2px; background: #e6d6b4; display: block; }
.dg-dots i.done { background: #4f9a5a; } .dg-dots i.now { background: #e0a83a; box-shadow: 0 0 0 2px rgba(224,168,58,.35); }
.dg-dots i.boss { border-radius: 50%; } .dg-dots i.boss.now { background: #c0392b; }
.dg-text { margin: 6px 0 10px; line-height: 1.45; animation: dg-pop .35s ease-out both; }
.dg-text.small { font-size: 12px; color: #8a6a44; }
.dg-sub { margin: 0 0 8px; font-size: 13px; color: #6b4a2a; } .dg-sub.small { font-size: 11px; color: #8a6a44; margin-top: 8px; }
.dg-res { display: flex; gap: 8px; align-items: flex-start; }
.dg-badge { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; font-style: normal; font-weight: 800; color: #fff; }
.dg-res.ok .dg-badge { background: #4f9a5a; } .dg-res.no .dg-badge { background: #c0533f; }
.dg-gain { margin: -4px 0 10px; font-weight: 800; color: #a06a1a; font-size: 13px; animation: dg-pop .4s .15s ease-out both; }
.dg-say { display: flex; gap: 8px; align-items: flex-end; margin: 4px 0 12px; animation: dg-pop .35s .1s ease-out both; }
.dg-say .dg-spr { width: 30px; height: 34px; flex: none; }
.dg-say > span { position: relative; background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 13px; line-height: 1.35; box-shadow: 0 2px 0 rgba(58,44,32,.18); display: grid; }
.dg-say > span::before { content: ''; position: absolute; left: -6px; bottom: 8px; border: 6px solid transparent; border-right-color: #fff; border-left: 0; }
.dg-say b { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #a0724a; }
.dg-choices { display: grid; gap: 8px; margin-top: 4px; }
.dg-choice { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 8px 10px; border: 0; border-radius: 8px;
  background: #fffaf0; box-shadow: inset 0 0 0 2px #c4904f, 0 3px 0 #9a6a3a; animation: dg-pop .3s ease-out both; }
.dg-choice:nth-child(2) { animation-delay: .06s; } .dg-choice:nth-child(3) { animation-delay: .12s; }
.dg-choice:hover { background: #fff3d8; } .dg-choice:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #c4904f, 0 1px 0 #9a6a3a; }
.dg-choice .dg-spr { width: 26px; height: 30px; flex: none; }
.dg-choice > span { flex: 1; display: grid; min-width: 0; } .dg-choice b { font-size: 14px; } .dg-choice small { font-size: 11px; color: #8a6a44; }
.dg-odds { font-style: normal; font-size: 10px; font-weight: 800; padding: 3px 6px; border-radius: 5px; white-space: nowrap; }
.dg-odds.good { background: #dcefd8; color: #2f6a3a; } .dg-odds.mid { background: #f6ebc8; color: #8a6a1a; } .dg-odds.risk { background: #f6d8d0; color: #a0402e; }
.is-boss .dg-choice { box-shadow: inset 0 0 0 2px #c0533f, 0 3px 0 #8a3020; }
.dg-with { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .dg-with small { font-size: 11px; color: #8a6a44; margin-right: 4px; }
.dg-with .dg-spr { width: 22px; height: 26px; }
.dg-list { display: grid; gap: 6px; max-height: 52vh; overflow: auto; padding: 2px; }
.dg-row { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 6px 8px; border: 0; border-radius: 8px; background: #fffaf0; box-shadow: inset 0 0 0 2px #e0c89a; }
.dg-row:hover { background: #fff3d8; }
.dg-row.locked { cursor: default; opacity: .7; filter: grayscale(.6); }
.dg-mini { width: 54px; height: 34px; flex: none; border-radius: 5px; background: linear-gradient(var(--sky) 0 70%, var(--ground) 70%); padding: 3px 6px 6px; box-sizing: border-box; box-shadow: inset 0 0 0 2px rgba(58,44,32,.4); }
.dg-rt { flex: 1; display: grid; min-width: 0; } .dg-rt b { font-size: 14px; } .dg-rt small { font-size: 11px; color: #8a6a44; }
.dg-fresh { font-style: normal; color: #2f6a3a; font-weight: 700; }
.dg-find { width: 24px; height: 24px; flex: none; display: block; } .dg-find svg { width: 100%; height: 100%; display: block; }
.dg-find.sil svg { filter: brightness(0) opacity(.22); }
.dg-find.big { width: 40px; height: 40px; }
.dg-clears { position: absolute; right: 6px; top: 3px; font-size: 9px; color: #a0724a; font-weight: 700; }
.dg-loot { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 6px; }
.dg-loot li { display: flex; align-items: center; gap: 8px; background: #fffaf0; border-radius: 7px; padding: 6px 8px; box-shadow: inset 0 0 0 2px #e0c89a; animation: dg-pop .35s ease-out both; }
.dg-loot li:nth-child(2) { animation-delay: .1s; } .dg-loot li:nth-child(3) { animation-delay: .2s; } .dg-loot li:nth-child(4) { animation-delay: .3s; }
.dg-loot li svg { width: 18px; height: 18px; }
.dg-loot .dg-findrow { box-shadow: inset 0 0 0 2px #e0a83a, 0 0 12px rgba(224,168,58,.4); }
.dg-loot .dg-findrow > span:last-child { display: grid; } .dg-loot small { font-size: 11px; color: #8a6a44; }
.dg-gear { font-style: normal; width: 18px; text-align: center; } .dg-gear.r2 { color: #8a4fc0; } .dg-gear.r1 { color: #3a7ab0; }
.dg-shard { font-style: normal; }
@media (prefers-reduced-motion: reduce) { .dg-mate, .dg-boss, .dg-text, .dg-say, .dg-choice, .dg-gain, .dg-loot li { animation: none !important; } }
.dg-card p.dg-text, .dg-card p.dg-sub, .dg-card p.dg-gain { padding-left: 0; padding-right: 0; text-align: left; }
.dg-card .fpop-kicker { text-align: left; }
.fpop-card.dg-card > p { max-width: none; margin-left: 0; margin-right: 0; }
.fpop-card.dg-card > p.dg-text { margin: 6px 0 10px; color: #4a3a2c; font-size: 15px; }
.fpop-card.dg-card > p.dg-gain { margin: -4px 0 10px; color: #a06a1a; }
/* Geräusche-Knopf: wie der Musik-Knopf; im Kampf klein neben dem Tempo */
.sfx-btn svg { width: 16px; height: 16px; fill: currentColor; }
.fight-ctrl { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fight-ctrl .fc-sfx { width: 38px; height: 38px; }
/* Landgang: Bosskampf im Fenster */
.fpop-card.dg-fightcard { width: min(560px, 100%); max-width: 560px; padding: 12px; }
.dg-arena .battle3d .field { height: 230px; }
.dg-arena { margin: 6px 0 4px; }
.dg-live { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-height: 40px; }
.dg-live .btn { margin: 0; flex: none; } .dg-live .btn.on { background: #f6dc8a; }
#dg-log { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; color: #4a3a2c; }
#dg-log .dg-spr { width: 22px; height: 26px; flex: none; }
#dg-log.pop { animation: dg-pop .35s ease-out both; }
.dg-fx { position: absolute; right: 8px; top: 6px; display: flex; gap: 3px; }
.dg-head .dg-fx { position: static; }
.dg-fx i { font-style: normal; font-size: 10px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.dg-fx i.up { background: #4f9a5a; } .dg-fx i.down { background: #c0533f; }
.dg-gain .up { color: #2f6a3a; } .dg-gain .down { color: #a0402e; }
/* Taverne am Handy: Details als Blatt von unten, Kauf-Knopf immer sichtbar */
.tv-sheet-bg { position: fixed; inset: 0; z-index: 940; background: rgba(40, 28, 14, .35); animation: sheetbg-in .2s ease-out both; }
.tv-detail.tv-sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 950; width: min(560px, 100%); max-height: 74vh; overflow: auto;
  margin: 0; padding: 22px 14px calc(12px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; animation: tvsheet-in .24s cubic-bezier(.2,.9,.3,1.1) both; overscroll-behavior: contain; }
.tv-sheet .tv-buy { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 14px -6px rgba(250, 240, 220, .95), inset 0 3px 0 rgba(255,255,255,.18), inset 0 -4px 0 rgba(0,0,0,.25); }
.tv-sheet-x { position: absolute; top: 6px; right: 8px; z-index: 3; width: 32px; height: 32px; border: 0; background: none; font-size: 18px; color: #8a6a44; cursor: pointer; }
.tv-sheet::before { content: ''; position: absolute; top: 7px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 3px; background: rgba(0,0,0,.15); }
@keyframes tvsheet-in { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes sheetbg-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 699px) {
  .harbor-box small { display: none; }
  .harbor-box { padding: 10px 12px; margin-bottom: 8px; }
  .harbor-box b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .tv-detail.tv-sheet, .tv-sheet-bg { animation: none; } }
/* Flagge klein unten links (wie der Begleiter unten rechts), damit sie die Figur nicht verdeckt */
.portrait .pflag.art, .portrait.xs .pflag.art, .portrait.sm .pflag.art { top: auto !important; right: auto !important; left: 2px !important; bottom: 2px !important; width: 34% !important; min-width: 12px; z-index: 2; }
.portrait.lg .pflag.art, .portrait.xl .pflag.art { width: 30% !important; left: 4px !important; bottom: 4px !important; }
/* Wiki: Routen */
.wk-route { border-radius: 8px; background: rgba(255,255,255,.5); padding: 10px 12px; margin: 8px 0; box-shadow: inset 0 -3px 0 rgba(0,0,0,.06); }
.wk-route.been { background: #fff8e4; box-shadow: inset 0 -3px 0 rgba(160,110,20,.18), 0 0 0 2px #f2d27a; }
.wk-route.locked { opacity: .78; }
.wr-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wr-head b { font-size: 15px; }
.wr-head em { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 5px; background: #efe2c6; color: #7a5a34; }
.wr-head .wr-alt { background: #efe6f8; color: #6a4a8a; }
.wr-head .wr-been { background: #dff0d8; color: #2f6a3a; }
.wr-tag { display: block; color: #8a6a44; margin: 2px 0 6px; }
.wr-isl, .wr-line { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.wr-chip { font-size: 11px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.06); color: #7a6a58; }
.wr-chip.on { background: #f3e2b4; color: #5a3a1e; font-weight: 700; }
.wr-foes { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0; }
.wr-foes .wk-spr svg { width: 24px; height: 28px; }
.wr-k { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #a0724a; margin-right: 4px; }
.wr-pet { width: 22px; height: 22px; display: inline-block; }
.wr-pet svg { width: 22px; height: 22px; shape-rendering: crispEdges; }
.wr-fr { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; background: #e8f4e0; border-radius: 6px; padding: 2px 6px 2px 2px; }
.wr-fr .portrait { width: 20px; height: 20px; border-radius: 4px; }
.wr-who small { color: #8a6a44; }
/* Neue Route: großer Moment */
.fpop-wow { position: relative; overflow: hidden; text-align: center; }
.fpop-wow .fpop-kicker { color: #c0392b; font-size: 13px; letter-spacing: .12em; animation: wow-kick .9s steps(3) 3; }
.wow-burst { position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(242,201,76,.22) 0 10deg, transparent 10deg 20deg); animation: wow-spin 14s linear infinite; }
.fpop-wow > *:not(.wow-burst) { position: relative; z-index: 1; }
.wow-bosses { display: flex; justify-content: center; gap: 18px; margin: 8px 0 4px; }
.wow-bosses span { display: grid; justify-items: center; gap: 2px; animation: wow-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.wow-bosses span:nth-child(2) { animation-delay: .15s; }
.wow-bosses i svg { width: 46px; height: 54px; shape-rendering: crispEdges; }
.wow-bosses small { font-weight: 800; font-size: 11px; }
.wow-line { margin: 4px 0; font-size: 13px; }
.wow-pets i { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }
.wow-pets svg { width: 16px; height: 16px; }
@keyframes wow-spin { to { transform: rotate(360deg); } }
@keyframes wow-pop { from { transform: scale(0) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wow-kick { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .wow-burst, .wow-bosses span, .fpop-wow .fpop-kicker { animation: none !important; } }
/* Neues Meer entdeckt */
.new-sea { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center; margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
  background: linear-gradient(180deg, #fff3c4, #f6d77a); box-shadow: inset 0 -4px 0 rgba(160,110,20,.25), 0 0 0 2px #e0a83a; animation: wow-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.new-sea span { display: grid; gap: 1px; }
.new-sea small { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #a0601a; }
.new-sea b { font-size: 18px; color: #4a2a10; }
.new-sea em { font-style: normal; font-size: 12px; color: #7a5a34; }
.ns-star { font-style: normal; color: #e0a83a; font-size: 20px; animation: wow-kick 1.2s steps(2) infinite; }
/* Run-Ende: Vertrautheit */
.bond-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0; }
.bond-u { position: relative; display: grid; justify-items: center; gap: 1px; padding: 4px 6px 3px; border-radius: 6px; background: rgba(255,255,255,.55); min-width: 40px; }
.bond-u i svg { width: 26px; height: 30px; display: block; }
.bond-u small { font-size: 10px; font-weight: 800; color: #4f9a5a; }
.bond-u em { position: absolute; top: -7px; right: -6px; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; background: #d0476a; border-radius: 6px; padding: 0 4px; animation: wow-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.bond-u.up { box-shadow: 0 0 0 2px #e88aa8; }
.bond-note { display: block; font-size: 11px; color: #8a6a44; text-align: center; }
.tv-bond { font-style: normal; color: #d0476a; font-weight: 800; }
/* Hafen-Kacheln am Handy: vier passen sauber nebeneinander */
@media (max-width: 560px) {
  .action-dock { gap: 6px; }
  .ad-tile { min-width: 0; overflow: hidden; }
  .ad-tile b { font-size: 12.5px; white-space: nowrap; letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .ad-tile small { font-size: 10.5px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .ad-tile .ad-ico svg { width: 26px; height: 26px; }
}
@media (max-width: 560px) {
  .action-dock { grid-auto-flow: row !important; grid-template-columns: 1fr 1fr !important; gap: 6px; }
  .ad-tile { grid-template-columns: auto 1fr; grid-template-rows: auto auto; justify-items: start; align-items: center; text-align: left; column-gap: 8px; row-gap: 0; padding: 4px 8px 6px !important; }
  .ad-tile .ad-ico { grid-row: 1 / span 2; font-size: 22px; }
  .ad-tile .ad-ico svg { width: 26px; height: 26px; }
  .ad-tile b { font-size: 14px; white-space: nowrap; overflow: visible; text-overflow: clip; }
  .ad-tile small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* ---------- Hafen wie eine App: Räume als eigene Seiten ---------- */
.room-head.app-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
  background: #fbf1dc; box-shadow: 0 4px 0 rgba(120, 84, 40, .18), 0 10px 14px -10px rgba(60, 40, 15, .35); border-radius: 0 0 10px 10px; }
.app-bar .room-back { padding: 6px 10px; font-size: 14px; }
.app-bar .room-title { flex: 1; min-width: 0; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar .room-berry { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #f3e2b4; font-size: 13px; color: #5a3a1e; flex: none; }
.app-bar .room-berry svg { width: 14px; height: 14px; }
/* Umschalter innerhalb einer Gruppe (Crew · Schmiede · Lager · Kammer) */
.room-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 10px; background: rgba(120, 84, 40, .12); box-shadow: inset 0 2px 0 rgba(0,0,0,.06); }
.seg-btn { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px 5px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 12px; font-weight: 800; color: #6b4a2a; cursor: pointer; transition: background .15s, transform .1s; }
.seg-btn .seg-ico { display: block; width: 22px; height: 22px; }
.seg-btn .seg-ico svg { width: 22px; height: 22px; display: block; }
.seg-btn.on { background: #fff8e6; color: #3a2a18; box-shadow: 0 2px 0 rgba(120,84,40,.3), 0 0 0 2px #e0a83a; }
.seg-btn:active { transform: translateY(1px); }
.seg-btn .tab-dot { position: absolute; top: 4px; right: 10px; }
/* Raum gleitet herein */
@keyframes room-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes room-side { from { opacity: .3; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes room-out { from { opacity: .4; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
#stage.room-in { animation: room-in .22s ease-out both; }
#stage.room-side { animation: room-side .18s ease-out both; }
#stage.room-out { animation: room-out .2s ease-out both; }
@media (prefers-reduced-motion: reduce) { #stage.room-in, #stage.room-side, #stage.room-out { animation: none !important; } }
/* Handy: im Raum keine große Kopfzeile, Inhalt beginnt direkt oben */
@media (max-width: 700px) {
  body.in-room > header, body.in-room header:first-of-type { display: none !important; }
  body.in-room .hq-bar { display: none !important; }
  body.in-room .room-x { display: none !important; }
  body.in-room .room-head.app-bar { margin-left: -12px; margin-right: -12px; }
  body.in-room .room-foot { display: none; }
}
@media (min-width: 701px) { .app-bar .room-berry { display: none; } }
/* Kopfgeld-Stufe oben im Run: war weiße Schrift auf Creme */
.heat-chip { color: #b8432f !important; background: #ffe6e0 !important; border-color: #e6a393 !important; }
/* Kurs setzen am Handy: kompakte Karten, beide Inseln ohne Scrollen sichtbar */
@media (max-width: 560px) {
  .course-grid { gap: 8px; margin-top: 6px; }
  .opt.course-opt { gap: 6px; padding: 10px 12px 10px; }
  .course-opt .co-name { font-size: 1.15rem; }
  .course-opt .co-top small { font-size: .8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .co-route { font-size: .72rem; gap: 3px; }
  .co-route i { padding: 1px 6px !important; }
  .co-foe { grid-template-columns: 40px 1fr; gap: 8px; padding: 5px 8px; }
  .co-foe .co-sprite svg { width: 32px; height: 36px; }
  .co-foe small { font-size: .72rem; }
  .co-foe b { font-size: 1rem; }
  .co-petchip, .co-routechip, .co-new { margin-bottom: 0 !important; }
  .opt.course-opt > .co-petchip, .opt.course-opt > .co-new { position: absolute; top: 8px; right: 10px; }
  .opt.course-opt > .co-new + .co-petchip { top: 34px; }
}
@media (max-width: 560px) { .course-hint { display: none; } }
/* Kopfzeile: Symbol-Knöpfe immer in einer Reihe */
#mu-slot { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
#mu-slot .mu-btn.head { flex: none; }
@media (max-width: 560px) {
  .opt.course-opt > .co-petchip { position: absolute; top: 8px; right: 10px; padding: 2px; font-size: 0; gap: 0; }
  .opt.course-opt > .co-petchip i { width: 20px; height: 20px; }
  .opt.course-opt > .co-petchip svg { width: 20px; height: 20px; }
  .opt.course-opt > .co-new { right: 40px; }
  .opt.course-opt > .co-new + .co-petchip { top: 8px; }
  .course-opt .co-top { padding-right: 96px; }
}
@media (max-width: 560px) { .fs-btn { display: none !important; } }
/* Crew-Leben: Figuren am Steg antippbar, eine sagt etwas */
.sail-stage .ss-dock, .sail-stage .ss-mate { pointer-events: auto; }
button.ss-mate { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.ss-mate .ss-say { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-30%); z-index: 5; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  font-size: 10.5px; font-weight: 700; line-height: 1.2; color: #3a2a18; background: #fffaf0; border-radius: 6px; padding: 4px 7px; box-shadow: 0 2px 0 rgba(0,0,0,.18); animation: say-in .35s ease-out both, say-bob 3s ease-in-out .4s infinite; }
.ss-mate .ss-say::after { content: ''; position: absolute; left: 30%; top: 100%; border: 5px solid transparent; border-top-color: #fffaf0; }
@keyframes say-in { from { opacity: 0; transform: translate(-30%, 6px); } to { opacity: 1; transform: translate(-30%, 0); } }
@keyframes say-bob { 50% { transform: translate(-30%, -2px); } }
/* Steckbrief */
.crew-card { text-align: left; }
.cc-top { display: flex; gap: 12px; align-items: center; }
.cc-spr svg { width: 64px; height: 74px; shape-rendering: crispEdges; display: block; }
.cc-top h3 { margin: 0 0 2px; }
.cc-bond { display: block; color: #d0476a; font-size: 15px; letter-spacing: 1px; }
.cc-bond small { color: #8a6a44; font-size: 11px; letter-spacing: 0; }
.cc-tag { display: inline-block; margin-top: 3px; font-style: normal; font-size: 10px; font-weight: 800; color: #2f6a3a; background: #dff0d8; border-radius: 5px; padding: 1px 6px; }
.cc-say { margin: 10px 0 6px; padding: 7px 10px; background: #fffaf0; border-radius: 8px; font-style: italic; color: #5a3a1e; box-shadow: inset 0 -2px 0 rgba(0,0,0,.06); }
.cc-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0; font-size: 13px; }
.cc-facts dt { font-weight: 800; color: #a0724a; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.cc-facts dd { margin: 0; }
.cc-k { display: block; font-size: 11px; font-weight: 800; color: #a0724a; text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 3px; }
.cc-mem ul { margin: 0; padding-left: 18px; font-size: 13px; }
.cc-none { margin: 0; font-size: 13px; color: #8a6a44; }
.cc-gear { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cc-gear .cc-k { width: 100%; }
.cc-note { display: block; margin-top: 10px; font-size: 11px; color: #8a6a44; }
/* Stammcrew: Namen antippbar */
.sq-xpb { display: grid; gap: 2px; background: none; border: 0; padding: 2px 0; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.sq-xpb em { font-style: normal; color: #d0476a; font-weight: 800; }
/* Run-Ende: Crew-Kommentar */
.bond-say { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 8px 0 0; }
.bond-say i svg { width: 28px; height: 32px; display: block; }
.bond-say span { background: #fffaf0; border-radius: 8px; padding: 5px 9px; font-size: 13px; text-align: left; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.bond-say b { display: block; font-size: 11px; color: #a0724a; }
@media (prefers-reduced-motion: reduce) { .ss-say { animation: none !important; } }
/* Kümmern, Spitzname, Momente */
.cc-care .cc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-snack { font-size: 14px; }
.cc-hint { display: block; font-size: 11px; color: #8a6a44; margin: 3px 0 6px; }
.cc-nickrow { margin-top: 4px; }
.cc-nick { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 8px; border: 2px solid #e2cfa6; border-radius: 6px; background: #fffaf0; color: #3a2a18; }
.cc-nickshow { font-size: 13px; color: #a0724a; font-weight: 700; }
.cc-mom { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-mom .cc-k { width: 100%; }
.cc-mbtn { font: inherit; font-size: 12px; font-weight: 700; border: 0; border-radius: 6px; padding: 5px 9px; background: #fde4ec; color: #a0304e; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.cc-mbtn.fresh { box-shadow: 0 0 0 2px #e88aa8; animation: pet-hop 2s steps(1) infinite; }
.cc-mbtn.locked { background: #efe6d4; color: #a89880; cursor: default; }
.cc-spr.gifted { animation: gift-pop .7s cubic-bezier(.2,1.6,.4,1); position: relative; }
.cc-spr.gifted::after { content: '♥'; position: absolute; left: 50%; top: -6px; color: #e04a7a; font-size: 20px; font-style: normal; animation: gift-heart 1.1s ease-out forwards; }
@keyframes gift-pop { 40% { transform: scale(1.18) rotate(-4deg); } }
@keyframes gift-heart { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -30px); } }
.moment-card h3 { margin: 2px 0 10px; }
.mo-lines { display: grid; gap: 8px; }
.mo-line { display: flex; align-items: flex-end; gap: 8px; opacity: 0; animation: mo-in .45s ease-out forwards; }
.mo-line.right { flex-direction: row-reverse; }
.mo-line .mo-spr svg { width: 34px; height: 40px; display: block; }
.mo-line span { background: #fffaf0; border-radius: 10px; padding: 6px 10px; font-size: 14px; max-width: 75%; box-shadow: 0 2px 0 rgba(0,0,0,.12); text-align: left; }
.mo-line.right span { background: #e8f4e0; }
.mo-line b { display: block; font-size: 11px; color: #a0724a; }
@keyframes mo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mo-line { animation: none; opacity: 1; } .cc-mbtn.fresh, .cc-spr.gifted { animation: none; } }
.cc-friends { display: grid; gap: 4px; }
.cc-fr { display: grid; grid-template-columns: 28px auto 1fr; align-items: center; gap: 6px; font-size: 13px; }
.cc-fr i svg { width: 24px; height: 28px; display: block; }
.cc-fr em { font-style: normal; color: #d0476a; }
.cc-fr small { grid-column: 2 / -1; font-size: 11px; color: #6a4a8a; margin-top: -4px; }
.cc-title { margin: 8px 0 0; font-size: 12px; color: #7a5a34; }
.crew-card .cc-title { font-size: 12px !important; margin: 8px 0 0 !important; text-align: left; }
/* Vertrauter */
.buddy-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; background: #fde4ec; border: 0; border-radius: 8px; padding: 4px 10px 4px 8px; cursor: pointer; color: #6a2a3e; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.buddy-chip .sb-lbl { color: #a0304e; }
.buddy-chip i svg { width: 20px; height: 24px; display: block; }
.buddy-chip em { font-style: normal; font-size: 10px; opacity: .7; }
.buddy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 8px 0; }
.buddy-opt { display: grid; justify-items: center; gap: 2px; font: inherit; background: #fffaf0; border: 2px solid #ecdcbc; border-radius: 8px; padding: 6px 4px; cursor: pointer; color: #3a2a18; }
.buddy-opt.on { border-color: #e88aa8; background: #fde4ec; }
.buddy-opt i svg { width: 30px; height: 34px; display: block; }
.buddy-opt small { color: #d0476a; font-weight: 800; }
.buddy-none { font-style: normal; font-size: 22px; color: #a89880; height: 34px; line-height: 34px; }
.tv-rec.tv-buddy { background: #e88aa8 !important; color: #fff !important; }
.opt.buddy-cap { box-shadow: 0 0 0 3px #e88aa8; }
.buddy-hint { color: #a0304e; }
/* ---------- Design-Politur: Tooltips im Pixel-Stil ---------- */
[data-tip]::after { background: #fffaf0 !important; color: #3a2a18 !important; border: 2px solid #6b4a2a; border-radius: 6px !important;
  box-shadow: 3px 3px 0 rgba(60,40,20,.28), 0 10px 22px rgba(60,40,20,.18) !important; font-weight: 600; padding: 7px 10px !important; }
[data-tip]::before { border-top-color: #6b4a2a !important; }
/* Kopfleiste im Run: Hinweise klappen nach unten auf, damit nichts oben abgeschnitten wird */
.head-chips [data-tip]::after { bottom: auto !important; top: calc(100% + 9px); }
.head-chips [data-tip]::before { bottom: auto !important; top: calc(100% + 1px); border-top-color: transparent !important; border-bottom-color: #6b4a2a !important; }
/* Kopfleiste: Chips als kleine 3D-Plaketten */
.head-chips em, .head-chips .duel-chip { box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 2px 0 rgba(60,40,20,.22); border-radius: 8px !important; }
.streak-chip { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 800; padding: 3px 10px; border: 2px solid #e8a43a; background: #fff1d6; color: #a0501a; white-space: nowrap; }
.streak-chip.warm { background: #ffe2b8; border-color: #e07a2c; }
.streak-chip.hot { background: #ffd0a8; border-color: #d0452a; color: #8a2a10; animation: streak-glow 1.4s ease-in-out infinite; }
.streak-chip svg { width: 14px; height: 16px; }
@keyframes streak-glow { 50% { box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 0 10px rgba(240,120,40,.6); } }
.mood-chip { white-space: nowrap; }
/* Frucht/Schatz: Hinweis und Überspringen als saubere Leiste */
.pick-hint { display: flex !important; align-items: center; justify-content: center; gap: 6px; width: max-content; margin: 10px auto 0 !important; padding: 5px 12px; border-radius: 8px;
  background: #fff6e0; border: 2px solid #ecd6a6; color: #7a5a34 !important; font-size: 12px !important; font-weight: 700; box-shadow: 0 2px 0 rgba(60,40,20,.15); }
.pick-hint::before { content: '👆'; font-size: 13px; }
.pick-skip-row { margin: 10px 0 0 !important; }
.pick-skip { text-decoration: none !important; font-weight: 800 !important; font-size: 12.5px !important; color: #6b4a2a !important; background: #f3e6c8 !important; border: 2px solid #d9bf8c !important;
  border-radius: 8px !important; padding: 5px 12px !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.1), 0 2px 0 rgba(60,40,20,.2); transition: transform .08s; }
.pick-skip:hover { background: #f8eccf !important; }
.pick-skip:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.1); }
.pick-skip svg { width: 13px !important; height: 13px !important; }
@media (prefers-reduced-motion: reduce) { .streak-chip.hot { animation: none; } }
/* Frucht/Schatz: Crew-Leben und konkreter Nutzen */
.hp-strip { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.5); box-shadow: inset 0 -2px 0 rgba(0,0,0,.06); }
.hs-u { display: grid; justify-items: center; gap: 2px; width: 40px; }
.hs-u i svg { width: 24px; height: 28px; display: block; }
.hs-u.ko { opacity: .45; filter: grayscale(1); }
.hs-bar { display: block; width: 34px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.14); overflow: hidden; }
.hs-bar s { display: block; height: 100%; text-decoration: none; }
.hs-bar s.hi { background: #4f9a5a; } .hs-bar s.mid { background: #e0a83a; } .hs-bar s.lo { background: #d0452a; }
.card-ben { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 800; line-height: 1.25; padding: 4px 6px; border-radius: 6px; background: #eef6e8; color: #2f6a3a; }
.card-ben.meh { background: #f1ebe0; color: #8a7a64; }
/* Seekarte */
.sea-map { position: relative; padding: 14px 12px 10px; border-radius: 10px; background: linear-gradient(180deg, #f6e8c6, #efdcae); box-shadow: inset 0 0 0 3px #d9bf8c, inset 0 -4px 0 rgba(0,0,0,.08), 0 3px 0 rgba(60,40,20,.2);
  background-image: radial-gradient(circle at 20% 30%, rgba(90,140,180,.12) 0 30%, transparent 31%), radial-gradient(circle at 80% 70%, rgba(90,140,180,.12) 0 25%, transparent 26%); }
.sm-compass { position: absolute; right: 10px; top: 6px; font-size: 22px; color: #b0763a; opacity: .7; }
.sm-row { display: flex; align-items: center; gap: 0; }
.sm-node { position: relative; flex: 1; min-width: 0; padding: 7px 9px; border-radius: 8px; background: #fffaf0; border: 2px solid #c9a46a; box-shadow: 0 3px 0 rgba(60,40,20,.2); }
.sm-node b { display: block; font-size: 14px; }
.sm-node small { display: block; font-size: 10.5px; color: #8a6a44; line-height: 1.25; }
.sm-node.alt { border-style: dashed; border-color: #8a6ab0; background: #f6f0fb; }
.sm-node.been { border-color: #4f9a5a; }
.sm-node.locked { opacity: .65; filter: grayscale(.4); }
.sm-been { position: absolute; top: -8px; right: -6px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #4f9a5a; border-radius: 6px; padding: 0 5px; }
.sm-ship { position: absolute; left: -12px; top: -12px; font-style: normal; font-size: 20px; animation: pet-hop 2s steps(1) infinite; }
.sm-bosses { display: flex; gap: 2px; margin-top: 3px; }
.sm-bosses svg { width: 20px; height: 24px; display: block; }
.sm-fork { width: 18px; height: 0; border-top: 3px dashed #8a6ab0; flex: none; }
.sm-path { display: block; width: 0; height: 16px; margin-left: 24px; border-left: 3px dashed #b0763a; }
.sm-note { margin: 10px 0 0; font-size: 11.5px; color: #7a5a34; }
.sea-map.compact .sm-node { padding: 5px 8px; }
.wow-how { font-size: 12.5px; background: #fffaf0; border-radius: 8px; padding: 6px 9px; margin: 8px 0 0; text-align: left; }
.wk-sec .sea-map .sm-note { font-size: 12px !important; line-height: 1.35; }
.sm-node b { overflow-wrap: anywhere; }

/* =====================================================================
   Design-Politur (18.10.): einheitliche Pixel-Plaketten, 3D-Knöpfe, Schriftzüge, sanfte Bewegung
   Nur helles Thema, dunkle Sonderkarten (Schatzkammer) bleiben unberührt.
   ===================================================================== */
:root:not([data-theme="dark"]) {
  --dz-cream: #fff8e8; --dz-cream2: #f6e8c8; --dz-edge: #c9a06a; --dz-ink: #4a3218; --dz-shadow: rgba(90, 58, 30, .32);
}
/* 1) Zweitknöpfe: Pixel-Rahmen mit Kante und Schatten, drücken sich beim Tippen ein */
:root:not([data-theme="dark"]) .btn.ghost:not(.art-card .btn):not(.pick-skip) {
  background: linear-gradient(180deg, var(--dz-cream), var(--dz-cream2)) !important; color: var(--dz-ink) !important;
  border: 2px solid var(--dz-edge) !important; border-radius: 7px !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -3px 0 rgba(160,110,50,.18), 0 3px 0 #b8895a, 0 5px 10px var(--dz-shadow) !important;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
:root:not([data-theme="dark"]) .btn.ghost:not(.art-card .btn):not(.pick-skip):hover:not(:disabled) { filter: brightness(1.03); transform: translateY(-1px); }
:root:not([data-theme="dark"]) .btn.ghost:not(.art-card .btn):not(.pick-skip):active:not(:disabled) {
  transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(160,110,50,.18), 0 0 0 #b8895a !important;
}
/* Hauptknöpfe: leichter Glanz oben, deutlicher Druck */
:root:not([data-theme="dark"]) .btn:not(.ghost):not(.mini):not(.pick-skip) { text-shadow: 0 1px 0 rgba(0,0,0,.25); }
:root:not([data-theme="dark"]) .btn:not(.ghost):hover:not(:disabled) { filter: brightness(1.06); }

/* 2) Text-Links als kleine Plaketten statt unterstrichenem Text */
.ts-small .link, .ts-login, .crew-label .link, .fb-link .link {
  text-decoration: none !important; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px;
  background: rgba(255, 248, 232, .85); border: 2px solid #e2c99a; color: #6b4a2a !important; font-weight: 700; font-size: .8rem;
  box-shadow: 0 2px 0 #cfae7c; transition: transform .08s ease, box-shadow .08s ease;
}
.ts-small .link:active, .ts-login:active, .crew-label .link:active, .fb-link .link:active { transform: translateY(2px); box-shadow: 0 0 0 #cfae7c; }
.ts-small { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }

/* 3) Kicker-Zeilen als kleine Plakette */
:root:not([data-theme="dark"]) .event-kicker:not(.wow-route *):not(.fpop-wow *) {
  display: inline-block; width: max-content; max-width: 100%; padding: 2px 8px; margin-bottom: 4px; border-radius: 5px;
  background: linear-gradient(180deg, #fbe7b8, #f2d28c); border: 2px solid #d9a64a; color: #7a4a10; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 0 #b9862e;
}
.fpop-kicker { letter-spacing: .1em; }

/* 4) Schriftzüge: Überschriften mit Pixel-Schrift und kleinem Prägeschatten */
#stage h2, .album-head h2, .hq-sec > h3, .wk-sec > h3, .fpop-card h3 {
  font-family: var(--px); font-weight: 600; letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(255,255,255,.75), 2px 2px 0 rgba(150, 100, 50, .16);
}
#stage > h2::after, .album-head h2::after {
  content: ''; display: block; width: 44px; height: 4px; margin-top: 6px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #d9a64a 0 8px, transparent 8px 12px);
}

/* 5) Eingabefelder: eingelassen wie ein Holzschild */
:root:not([data-theme="dark"]) input[type="text"], :root:not([data-theme="dark"]) input:not([type]), :root:not([data-theme="dark"]) .cc-nick, :root:not([data-theme="dark"]) #pf-name, :root:not([data-theme="dark"]) #nick {
  border: 2px solid #d9bf8c !important; border-radius: 7px !important; background: #fffdf6 !important;
  box-shadow: inset 0 2px 0 rgba(160,110,50,.14), 0 1px 0 rgba(255,255,255,.8) !important;
}
:root:not([data-theme="dark"]) input:focus { outline: none; border-color: #c9873a !important; box-shadow: inset 0 2px 0 rgba(160,110,50,.14), 0 0 0 3px rgba(242,201,76,.45) !important; }

/* 6) Abschnitts-Etiketten (IM HAFEN, Deine Crew): mit kleinem Pixel-Anker davor */
.crew-label { font-family: var(--px); font-weight: 600; }
.hub-title, .im-hafen, .hq-kicker { letter-spacing: .1em; }

/* 7) Sanfte Bewegung: neue Bildschirme gleiten kurz herein */
@keyframes dz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#stage > * { animation: dz-in .26s ease-out both; }
#stage > *:nth-child(2) { animation-delay: .03s; } #stage > *:nth-child(3) { animation-delay: .06s; } #stage > *:nth-child(4) { animation-delay: .09s; }
#stage .opt, #stage .tv-off, #stage .card { animation: dz-in .3s ease-out both; }
#stage .cards > :nth-child(2), #stage .tv-grid > :nth-child(2), #stage .course-grid > :nth-child(2) { animation-delay: .05s; }
#stage .cards > :nth-child(3), #stage .tv-grid > :nth-child(3) { animation-delay: .1s; }
#stage .cards > :nth-child(4), #stage .tv-grid > :nth-child(4) { animation-delay: .15s; }
/* Karten/Kacheln: Anheben beim Zeigen, Eindrücken beim Tippen */
.ad-tile, .hub-tile, .opt.course-opt, .tv-off { transition: transform .1s ease, filter .12s ease; }
.ad-tile:hover, .hub-tile:hover { transform: translateY(-2px); filter: brightness(1.03); }
.ad-tile:active, .hub-tile:active, .tv-off:active { transform: translateY(2px) scale(.99); }
@media (prefers-reduced-motion: reduce) {
  #stage > *, #stage .opt, #stage .tv-off, #stage .card { animation: none !important; }
  .ad-tile:hover, .hub-tile:hover { transform: none; }
}
.ts-login { width: max-content !important; align-self: center; margin: 4px auto 0 !important; }

/* Pixel-Icons in Knöpfen (pxIco): Würfel, Schiff, Schwerter, Münze, Anker, Schleife, Truhe */
.btn .pxi { display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px; line-height: 0;
  filter: drop-shadow(1px 1px 0 rgba(40, 20, 8, .35)); }
.btn .pxi svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.btn.ghost .pxi-anchor, .btn.ghost .pxi-loop { color: #6b4a2a; }
.btn:not(.ghost) .pxi-anchor, .btn:not(.ghost) .pxi-loop { color: #fff3d6; }
@keyframes pxi-roll { 0% { transform: rotate(0) } 25% { transform: rotate(90deg) translateY(-2px) } 50% { transform: rotate(180deg) translateY(-3px) } 75% { transform: rotate(270deg) translateY(-1px) } 100% { transform: rotate(360deg) } }
@keyframes pxi-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2px) rotate(-6deg) } }
@keyframes pxi-spin { to { transform: rotate(360deg) } }
.btn .pxi-dice { animation: pxi-roll .45s steps(4) both; }
.btn:not(:disabled):active .pxi-dice { animation: pxi-roll .3s steps(4) infinite; }
.btn:not(:disabled):hover .pxi-ship { animation: pxi-bob .8s steps(4) infinite; }
.btn:not(:disabled):hover .pxi-swords, .btn:not(:disabled):hover .pxi-coin, .btn:not(:disabled):hover .pxi-chest { transform: translateY(-2px); }
.btn:not(:disabled):hover .pxi-loop { animation: pxi-spin .8s steps(8) infinite; }
.btn:disabled .pxi { filter: grayscale(.8); opacity: .6; }
@media (prefers-reduced-motion: reduce) { .btn .pxi, .btn:hover .pxi, .btn:active .pxi { animation: none !important; transform: none !important; } }
.btn .pxi { width: 16px; height: 16px; }
.tavern .tv-actions { grid-template-columns: auto minmax(0, 1fr); }
.tavern .tv-actions > .btn, .tavern .tv-actions .dock .btn { padding-left: 12px; padding-right: 12px; }
.tavern .tv-actions .btn .pxi { margin-right: 5px; }
.btn .pxi { width: max(16px, 1.15em); height: max(16px, 1.15em); vertical-align: -.2em; }
.btn .pxi-ship { width: max(18px, 1.3em); height: max(18px, 1.3em); vertical-align: -.28em; }

/* Run-Ende: Beute als 3D-Kacheln (loot-tile) + gleiche Kartensprache für die Vertrautheits-Reihe */
.trophy-sum.loot-sum, .trophy-sum.bond-sum { display: grid; justify-items: center; gap: 8px; border: 2px solid #e2c99a; border-radius: 10px;
  background: linear-gradient(#fffaf0, #fbefd6); box-shadow: inset 0 2px 0 #fff, 0 3px 0 #e2c99a; }
.trophy-sum.loot-sum .event-kicker, .trophy-sum.bond-sum .event-kicker { width: auto; justify-self: center; color: #6b4310; }
.loot-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; width: 100%; }
.loot-tile { --rc: #9aa3ad; --rd: #6b737c; --rg: transparent; position: relative; display: grid; justify-items: center; align-content: start; gap: 4px;
  width: 68px; padding: 0; animation: lt-drop .5s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(.12s + var(--d, 0) * .09s); }
.loot-tile .lt-art { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 9px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #fffdf6 0 30%, color-mix(in srgb, var(--rc) 22%, #fbf3e2) 75%);
  border: 2px solid var(--rd); box-shadow: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -3px 0 color-mix(in srgb, var(--rc) 35%, transparent), 0 3px 0 var(--rd), 0 0 0 0 var(--rg); }
.loot-tile .lt-art svg { width: 34px; height: 34px; display: block; shape-rendering: crispEdges; image-rendering: pixelated; filter: drop-shadow(1px 2px 0 rgba(60, 35, 15, .25)); }
.loot-tile small { font-size: 10.5px; line-height: 1.15; font-weight: 700; text-align: center; color: var(--ink); max-width: 68px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.loot-tile.lt-common { --rc: #9aa3ad; --rd: #8a929b; }
.loot-tile.lt-rare { --rc: #4f86c9; --rd: #3a6aa8; }
.loot-tile.lt-epic { --rc: #9a5ad8; --rd: #6a3aa8; --rg: rgba(154, 90, 216, .45); }
.loot-tile.lt-legendary { --rc: #f2b632; --rd: #b07810; --rg: rgba(242, 182, 50, .6); }
.loot-tile.lt-trophy { --rc: #d9a64a; --rd: #8a5a20; --rg: rgba(217, 166, 74, .45); }
.loot-tile.lt-epic .lt-art, .loot-tile.lt-legendary .lt-art, .loot-tile.lt-trophy .lt-art { box-shadow: inset 0 2px 0 rgba(255,255,255,.85), 0 3px 0 var(--rd), 0 0 10px 1px var(--rg); }
.loot-tile.lt-legendary small { color: #8a5a08; }
.loot-tile.lt-legendary .lt-art::after { content: ''; position: absolute; inset: -20% auto -20% -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: lt-shine 2.6s ease-in-out 1s infinite; }
.loot-tile:hover .lt-art { transform: translateY(-2px); }
.loot-tile .lt-art { transition: transform .12s ease; }
@keyframes lt-drop { 0% { opacity: 0; transform: translateY(-14px) scale(.6); } 60% { opacity: 1; transform: translateY(2px) scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes lt-shine { 0% { left: -60%; } 45%, 100% { left: 130%; } }
/* Vertrautheit: gleiche Kacheln */
.bond-row { gap: 10px 8px; }
.bond-u { background: radial-gradient(circle at 50% 35%, #fffdf6 0 35%, #f6e8cc 80%); border: 2px solid #d9b98a; border-radius: 9px; padding: 5px 7px 3px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 3px 0 #c9a06a; animation: lt-drop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.bond-u:nth-child(2) { animation-delay: .09s; } .bond-u:nth-child(3) { animation-delay: .18s; } .bond-u:nth-child(4) { animation-delay: .27s; }
.bond-u:nth-child(5) { animation-delay: .36s; } .bond-u:nth-child(n+6) { animation-delay: .45s; }
.bond-u.up { border-color: #e88aa8; box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 3px 0 #c9607e, 0 0 10px 1px rgba(232, 138, 168, .45); }
@media (max-width: 420px) { .loot-tile { width: 62px; } .loot-tile .lt-art { width: 48px; height: 48px; } .loot-tile .lt-art svg { width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { .loot-tile, .bond-u, .loot-tile .lt-art::after { animation: none !important; } }
:root[data-theme="dark"] .trophy-sum.loot-sum, :root[data-theme="dark"] .trophy-sum.bond-sum { background: var(--panel); border-color: var(--line); box-shadow: 0 3px 0 var(--line); }
:root[data-theme="dark"] .loot-tile .lt-art, :root[data-theme="dark"] .bond-u { background: radial-gradient(circle at 50% 38%, #3a3040 0 30%, color-mix(in srgb, var(--rc, #888) 25%, #241c2a) 80%); }

/* Vergleichspfeile sanfter: gedämpftes Rostrot/Moosgrün statt Signalfarben */
.pa.pa-dn svg, .mp-cmp .pa-dn svg { fill: #b98a7a !important; }
.pa.pa-up svg, .mp-cmp .pa-up svg { fill: #6f9f72 !important; }
.pa.pa-dn { opacity: .85; }

/* Sterne zusammenlegen (TFT-Stil) */
.tv-off.dup { box-shadow: 0 0 0 2px #ffd34a, 0 3px 0 #b8860b; animation: dupGlow 2.4s ease-in-out infinite; }
@keyframes dupGlow { 50% { box-shadow: 0 0 0 2px #ffe58a, 0 0 10px 2px rgba(255,211,74,.55), 0 3px 0 #b8860b; } }
.tv-rec.tv-dup { background: linear-gradient(#ffd75a, #f0b52a) !important; color: #5a3a08 !important; border-color: #8a5a10; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.px-starup { vertical-align: -2px; margin-right: 3px; image-rendering: pixelated; }
.tv-merge { margin: 6px 0; padding: 6px 8px; background: #fff6d8; border: 2px solid #e2b546; box-shadow: inset 0 -2px 0 #f2d88a; }
.tv-merge p { margin: 4px 0 0; font-size: .74rem; color: #5a4320; line-height: 1.35; }
.mg-pair { display: flex; align-items: flex-end; justify-content: center; gap: 4px; flex-wrap: wrap; }
.mg-pair i { display: inline-block; width: 30px; height: 30px; font-style: normal; }
.mg-pair i svg { width: 100%; height: 100%; }
.mg-pair .mg-out { width: 40px; height: 40px; filter: drop-shadow(0 0 4px #ffd34a); }
.mg-st { font-size: .62rem; margin-right: 2px; }
.mg-st.gold .stars { color: #d8a010; }
.mg-plus, .mg-arrow { font-weight: 900; color: #8a6a20; align-self: center; }
.tv-buy.tv-mergebtn { background: linear-gradient(#ffd75a, #eeae26); color: #4a3006; border-color: #8a5a10; box-shadow: 0 3px 0 #8a5a10; }
.tv-mstars { position: absolute; top: -4px; right: 2px; font-size: .55rem; z-index: 2; }
.tv-mem { position: relative; }
.tv-mem.merged { animation: mergePop .9s ease-out; }
@keyframes mergePop { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.18); filter: brightness(1.6) drop-shadow(0 0 6px #ffd34a); } 100% { transform: scale(1); filter: none; } }
.toast-merge { display: flex; align-items: center; gap: 8px; }
.toast-merge > i { width: 34px; height: 34px; display: inline-block; }
.toast-merge > i svg { width: 100%; height: 100%; }
.toast-merge b { display: block; color: #b8860b; }

/* Ausrüstung: wer trägt was */
.cg-bagit.worn::after { display: none; }
.cg-face { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; background: #fff8e8; border: 2px solid #3f8a52; border-radius: 50%; overflow: hidden; display: grid; place-items: center; pointer-events: none; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.cg-face svg { width: 18px; height: 18px; margin-top: 3px; }
.cg-worn { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: #4d5a3a; background: #eef5e2; border: 1px solid #b9d0a0; padding: 2px 8px 2px 3px; margin: 2px 0 4px; }
.cg-worn > i { width: 22px; height: 22px; display: inline-block; overflow: hidden; }
.cg-worn > i svg { width: 100%; height: 100%; }
.cg-worn.here { background: #fff3d6; border-color: #e2c27a; color: #6b4a14; }
.cg-worn.free { color: #8a7a62; background: #f6efe0; border-color: #e0d2b4; padding-left: 8px; }
.cg-optfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cg-delta { font-size: .7rem; font-weight: 800; padding: 1px 6px; }
.cg-delta.up { color: #3f7a4a; background: #e6f2df; } .cg-delta.dn { color: #9a6a5a; background: #f6e9e2; } .cg-delta.eq { color: #8a7a62; background: #f2ebdc; }
.cg-opt.taken .cg-card { opacity: .92; background-image: repeating-linear-gradient(135deg, rgba(120,150,90,.06) 0 6px, transparent 6px 12px); }
.cg-warn { display: block; font-size: .66rem; color: #9a7a5a; margin-top: 3px; }
.mg-tip { display: block; margin-top: 4px; font-size: .68rem; color: #7a6a4a; font-style: italic; }
.mg-pair { flex-wrap: nowrap; align-items: center; }
.mg-st { color: #d8a010; font-size: .7rem; letter-spacing: -1px; align-self: flex-end; }
.mg-st.mg-to { font-size: .85rem; text-shadow: 0 0 4px #ffe58a; }
.tv-mstars { left: 50%; right: auto; top: -7px; transform: translateX(-50%); color: #e0a818; text-shadow: 0 1px 0 #7a5208; font-size: .7rem; letter-spacing: -1px; white-space: nowrap; }
.toast .toast-merge { display: flex !important; flex-direction: row; align-items: center; gap: 10px; }
.toast .toast-merge > i { flex: 0 0 34px; }

/* Tauschen: klarer Vergleich und Netto-Preis */
.tv-swapbox { margin: 6px 0 4px; padding: 6px 8px; background: #fbf4e4; border: 2px solid #d8c8a4; }
.tv-swapbox.good { border-color: #9cc59a; background: #f1f7ea; }
.tv-swapbox.bad { border-color: #dcc0b4; background: #faf1ec; }
.sw-head { display: flex; align-items: center; gap: 6px; }
.sw-verdict { font-weight: 800; font-size: .8rem; color: #4d4030; margin-left: 4px; }
.tv-swapbox.good .sw-verdict { color: #3f7a4a; } .tv-swapbox.bad .sw-verdict { color: #9a6a5a; }
.sw-rows { display: grid; gap: 2px; margin: 5px 0; }
.sw-row { display: grid; grid-template-columns: 16px 64px 36px 18px 36px auto; align-items: center; font-size: .78rem; }
.sw-row > i { font-style: normal; color: #8a7a62; }
.sw-a { color: #9a8a72; text-align: right; } .sw-ar { color: #b0a088; text-align: center; font-size: .7rem; }
.sw-b { text-align: right; color: #3a2a14; }
.sw-d { font-style: normal; font-weight: 800; font-size: .7rem; padding: 0 5px; margin-left: 6px; justify-self: start; }
.sw-d.up { color: #3f7a4a; background: #e3f0dc; } .sw-d.dn { color: #9a6a5a; background: #f4e6df; } .sw-d.eq { color: #8a7a62; background: #efe7d6; }
.sw-cost { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: .74rem; color: #7a6a52; border-top: 1px dashed #d8c8a4; padding-top: 4px; }
.sw-cost b { color: #6b4a14; font-size: .85rem; margin-left: auto; }
.sw-hint { display: block; font-size: .66rem; color: #8a7a62; font-style: italic; }
.tv-pickt { all: unset; cursor: pointer; display: block; width: 100%; }
.tv-pickt svg { display: block; margin: 0 auto; }
.tv-mem.weak { outline: 2px dashed #c9a47a; outline-offset: 1px; }
.tv-out-tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: .55rem; font-weight: 800; background: #c9a47a; color: #fff; padding: 0 4px; white-space: nowrap; z-index: 2; }
.tv-pickt svg { width: 28px; height: 33px; shape-rendering: crispEdges; }
@media (max-width: 560px) { .tavern .tv-pickt svg { width: 26px; height: 30px; } }
.tv-mstars + .tv-out-tag, .tv-out-tag { top: -9px; }

/* === Schmiede neu (fork) === */
.forge2 { display: grid; gap: 12px; }
.forge2 .fg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.forge2 .fg-head b { font-size: 1rem; color: #5a3a18; }
.forge2 .fg-head small { color: #8a7a62; font-size: .72rem; }
.fg-count { font-weight: 800; font-size: .75rem; color: #6b4a14; background: #fff3d6; border: 2px solid #d9b46a; padding: 0 7px; }
.fg-berry { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: #6b4a14; font-size: .85rem; }
.fg-berry i svg, .fg-tool i svg { width: 12px; height: 12px; vertical-align: -1px; }
/* Regal */
.fg-shelf { padding: 10px; background: linear-gradient(#f6e3c0, #efd6a8); border: 3px solid #8a5a2c; box-shadow: inset 0 -10px 0 #c9955a, 0 3px 0 #5a3a18; }
.fg-shelf-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.fg-slot { position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-height: 58px; padding: 6px 8px; text-align: left; font: inherit; }
.fg-slot .fg-ico { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; }
.fg-slot .fg-ico svg { width: 34px; height: 34px; image-rendering: pixelated; }
.fg-slot b { font-size: .8rem; color: #3a2a14; line-height: 1.15; }
.fg-slot b em { font-style: normal; color: #b8860b; }
.fg-slot small { font-size: .66rem; color: #7a6a52; line-height: 1.2; }
.fg-slot.full { cursor: pointer; background: #fffaf0; border: 2px solid var(--rc, #9a8f80); box-shadow: 0 3px 0 var(--rc, #9a8f80); }
.fg-slot.full:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rc, #9a8f80); }
.fg-slot .fg-x { position: absolute; top: 2px; right: 5px; font-size: .62rem; color: #b0a088; }
.fg-slot.empty, .fg-slot.locked { border: 2px dashed #b88e5a; background: rgba(255, 248, 232, .55); color: #9a7a52; }
.fg-slot.empty .fg-ico { font-size: 1.3rem; font-weight: 900; color: #c9a06a; }
.fg-slot.locked { opacity: .7; }
.fg-note { display: block; margin-top: 8px; font-size: .68rem; color: #7a5a34; }
.ir-common { --rc: #9a8f80; } .ir-rare { --rc: #4a8be0; } .ir-epic { --rc: #9a63e0; } .ir-legendary { --rc: #e2a92a; }
/* Truhe */
.fg-group { margin-bottom: 10px; }
.fg-gh { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; padding-bottom: 3px; border-bottom: 2px dotted var(--rc); }
.fg-gh small { font-weight: 800; color: #8a7a62; font-size: .72rem; }
.fg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .fg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .forge2 { grid-template-columns: 1fr 340px; align-items: start; } .forge2 .fg-shelf { grid-column: 1 / -1; } .forge2 .fg-anvil { position: sticky; top: 10px; grid-column: 2; grid-row: 2; } .forge2 .fg-bag, .forge2 .fg-empty { grid-column: 1; grid-row: 2; } .fu-grid { grid-template-columns: 1fr !important; } }
.fg-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 7px 7px; text-align: center; background: #fffaf0; border: 2px solid var(--rc); box-shadow: 0 3px 0 var(--rc); min-width: 0; }
.fg-card.ir-legendary { background: linear-gradient(#fff6dc, #fffaf0 60%); }
.fg-card.ir-epic { background: linear-gradient(#f6eefe, #fffaf0 60%); }
.fg-card.on { outline: 3px solid #f2b632; outline-offset: 1px; }
.fg-on { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: .58rem; font-weight: 800; color: #5a3a08; background: #ffd75a; border: 1px solid #8a5a10; padding: 0 6px; }
.fg-card .fg-ico { width: 46px; height: 46px; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,255,255,.9) 40%, transparent 70%); }
.fg-card .fg-ico svg { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(90,58,24,.25)); }
.fg-name { font-size: .8rem; color: #3a2a14; line-height: 1.15; overflow-wrap: anywhere; }
.fg-name em { font-style: normal; color: #b8860b; }
.fg-pips { display: inline-flex; gap: 2px; }
.fg-pips i { width: 6px; height: 6px; background: #e6dcc6; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.fg-pips i.on { background: #f0b52a; box-shadow: inset 0 -1px 0 #9a6a10; }
.fg-stat { font-size: .66rem; color: #6b5a40; line-height: 1.25; min-height: 2.5em; }
.fg-take { width: 100%; font: inherit; font-size: .74rem; font-weight: 800; padding: 5px 4px; cursor: pointer; color: #5a3a18; background: #fff3d6; border: 2px solid #b88e5a; box-shadow: 0 3px 0 #8a5a2c; margin-top: 2px; }
.fg-take.on { background: linear-gradient(#ffd75a, #eeae26); border-color: #8a5a10; color: #4a3006; box-shadow: 0 3px 0 #8a5a10; }
.fg-take:active:not(:disabled), .fg-tool:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #8a5a2c; }
.fg-take:disabled { opacity: .55; cursor: default; }
.fg-tools { display: flex; gap: 4px; width: 100%; }
.fg-tool { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 2px; font: inherit; font-size: .68rem; font-weight: 800; padding: 4px 3px; cursor: pointer; color: #5a4320; background: #f6ecd8; border: 2px solid #c9b088; box-shadow: 0 2px 0 #a8875a; white-space: nowrap; }
.fg-tool.melt { flex: 0 0 auto; color: #9a5a3a; }
.fg-tool.max { color: #8a7a62; cursor: default; box-shadow: none; border-style: dashed; }
.fg-tool:disabled { opacity: .5; cursor: default; }
.fg-empty { padding: 14px; text-align: center; color: #8a7a62; background: #fbf4e4; }
/* Amboss */
.fg-anvil { padding: 10px; background: linear-gradient(#e9e3da, #d9d0c2); border: 3px solid #5f5a52; box-shadow: inset 0 -6px 0 #b9b0a2, 0 3px 0 #3a3630; }
.fg-anvil .fg-head b { color: #3a3630; }
.fg-anvil .fg-head small { color: #5f5a52; }
.fu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; }
.fu-step { display: grid; grid-template-columns: auto auto auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 4px 8px; padding: 6px 8px; background: #f7f3ec; border: 2px solid #a8a092; }
.fu-step.none { opacity: .6; }
.fu-step.ready { border-color: #e2a92a; background: #fff8e2; box-shadow: 0 0 0 2px rgba(242,182,50,.35); animation: fuGlow 2.4s ease-in-out infinite; }
@keyframes fuGlow { 50% { box-shadow: 0 0 10px 2px rgba(242,182,50,.55); } }
.fu-in { display: inline-flex; gap: 3px; }
.fu-pip { width: 14px; height: 14px; border: 2px solid var(--c); background: transparent; }
.fu-pip.have { background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.fu-arrow { color: #7a7266; font-weight: 900; }
.fu-out { width: 22px; height: 22px; display: grid; place-items: center; font-weight: 900; font-size: .8rem; color: #fff; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 6px var(--c); }
.fu-txt { display: inline-flex; align-items: center; gap: 5px; justify-self: end; }
.fu-txt small { font-size: .68rem; color: #5f5a52; font-weight: 700; }
.fu-go { grid-column: 1 / -1; }
.fu-go.hot { background: linear-gradient(#ffd75a, #eeae26); color: #4a3006; border-color: #8a5a10; box-shadow: 0 3px 0 #8a5a10; }
/* Schmiede kompakt am Handy: 3 Kacheln nebeneinander */
@media (max-width: 699px) {
  .fg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fg-card { padding: 9px 4px 5px; gap: 2px; }
  .fg-card .fg-ico { width: 36px; height: 36px; }
  .fg-card .fg-ico svg { width: 32px; height: 32px; }
  .fg-name { font-size: .7rem; }
  .fg-stat { font-size: .58rem; min-height: 2.3em; }
  .fg-take { font-size: .64rem; padding: 4px 2px; }
  .fg-tools { gap: 3px; }
  .fg-tool { font-size: .6rem; padding: 3px 2px; }
  .fg-tool.melt { flex: 1; }
  .fg-shelf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .fg-slot { min-height: 48px; padding: 5px 6px; grid-template-columns: 30px 1fr; }
  .fg-slot .fg-ico { width: 30px; height: 30px; } .fg-slot .fg-ico svg { width: 28px; height: 28px; }
  .fg-slot.empty, .fg-slot.locked { min-height: 40px; }
  .fg-slot b { font-size: .72rem; }
}
.fg-anvil .fg-head { flex-wrap: wrap; } .fg-anvil .fg-head small { flex-basis: 100%; }

/* === Stammcrew neu: Deck, Karten, Ankleiden === */
.sq2 .squad-head { margin-bottom: 8px; }
.sqd-deck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 8px 10px; background:
  repeating-linear-gradient(90deg, #a8743f 0 46px, #9a6836 46px 48px), #a8743f; border: 3px solid #6b4422; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 4px 0 #4a2e16; border-radius: 6px; position: relative; }
.sqd-deck::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(#c58b4e, transparent); opacity: .5; }
.sqd-card { position: relative; min-width: 0; -webkit-touch-callout: none; user-select: none; }
.sqd-main { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; justify-items: center; gap: 2px; padding: 16px 4px 6px; background: linear-gradient(#fff8e8, #f6e6c4); border: 2px solid #6b4422; border-radius: 6px; box-shadow: 0 4px 0 #6b4422, inset 0 -3px 0 rgba(160,110,50,.18); transition: transform .12s; }
.sqd-main:hover { transform: translateY(-2px); }
.sqd-main:active { transform: translateY(2px); box-shadow: 0 2px 0 #6b4422; }
.sqd-card.front .sqd-main { background: linear-gradient(#fff3d0, #f3d99c); }
.sqd-pos { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: .56rem; font-weight: 900; color: #fff; background: #8a5a2a; padding: 1px 6px; border: 1px solid #4a2e16; white-space: nowrap; z-index: 2; }
.sqd-card.front .sqd-pos { background: #c2412f; }
.sqd-lv { position: absolute; top: 4px; left: 4px; font-size: .55rem; font-weight: 800; color: #8a6a3a; }
.sqd-spr svg { width: 46px; height: 54px; shape-rendering: crispEdges; display: block; filter: drop-shadow(0 3px 0 rgba(90,60,30,.25)); }
.sqd-name { font-size: .74rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3a2a14; }
.sqd-st { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; font-size: .6rem; color: #6b5a42; }
.sqd-st em { font-style: normal; font-weight: 700; }
.sqd-gear { display: flex; gap: 2px; margin-top: 2px; }
.sqd-g { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #c9b48c; background: #fffaf0; font-size: 9px; border-radius: 3px; overflow: hidden; }
.sqd-g svg { width: 14px; height: 14px; }
.sqd-g.none { opacity: .45; filter: grayscale(1); }
.sqd-g.cr-rare { border-color: #4f86c6; } .sqd-g.cr-epic { border-color: #9a5bd0; } .sqd-g.cr-legendary { border-color: #e0a030; background: #fff4d6; }
.sqd-dress, .sqd-swap { margin-top: 3px; font-size: .58rem; font-weight: 800; color: #8a5a2a; display: inline-flex; align-items: center; gap: 2px; }
.sqd-swap { color: #c2412f; }
.sqd-dress .pxi svg { width: 10px; height: 10px; }
.sqd-x { all: unset; cursor: pointer; position: absolute; top: -7px; right: -5px; width: 20px; height: 20px; display: grid; place-items: center; font-size: .62rem; font-weight: 900; color: #8a6a5a; background: #fff8ec; border: 1.5px solid #c9b48c; border-radius: 50%; z-index: 3; }
.sqd-x:hover { color: #c2412f; border-color: #c2412f; }
.sqd-bond { all: unset; cursor: pointer; position: absolute; top: 3px; right: 4px; font-size: .58rem; font-weight: 800; color: #d0507a; z-index: 2; }
.sqd-card.empty { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 140px; border: 2px dashed rgba(255,240,210,.7); border-radius: 6px; color: #fff3dc; cursor: pointer; text-align: center; padding: 6px; }
.sqd-plus { font-size: 1.6rem; font-weight: 900; }
.sqd-card.empty small { font-size: .6rem; }
.sqd-deck.picking .sqd-card .sqd-main, .sqd-deck.picking .sqd-card.empty { animation: sqWiggle 1.1s ease-in-out infinite; }
.sqd-deck.picking .sqd-main { box-shadow: 0 0 0 3px #ffd34a, 0 4px 0 #6b4422; }
@keyframes sqWiggle { 50% { transform: translateY(-3px) rotate(-1deg); } }
.sq-drop-ok .sqd-main, .sqd-card.empty.sq-drop-ok { outline: 2px dashed #ffd34a; outline-offset: 2px; }
.sq-drop-hover .sqd-main, .sqd-card.empty.sq-drop-hover { outline: 3px solid #ffd34a; transform: scale(1.05); }
.sq-ghost { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -60%) scale(1.25) rotate(-4deg); filter: drop-shadow(0 6px 4px rgba(0,0,0,.35)); }
.sq-ghost svg { width: 46px; height: 54px; shape-rendering: crispEdges; }
body.sq-dragging { user-select: none; cursor: grabbing; }
.sq-pickbar { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 6px 10px; background: #fff3d0; border: 2px solid #e2b546; }
.sq-pickbar > i svg { width: 28px; height: 33px; }
.sq-pickbar span { flex: 1; font-size: .8rem; }
.sq-tip { margin: 8px 2px; font-size: .72rem; color: #7a6a52; }
.sq-chest { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 8px 12px; background: linear-gradient(#fff4dc, #f2deb4); border: 2px solid #8a5a2a; box-shadow: 0 4px 0 #8a5a2a; border-radius: 6px; }
.sq-chest:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a5a2a; }
.sq-chest-ico .pxi svg, .sq-chest-ico svg { width: 30px; height: 30px; }
.sq-chest span { flex: 1; display: grid; }
.sq-chest small { color: #7a6a52; font-size: .72rem; }
.sq-chest-go { flex: 0 0 auto !important; font-size: 1.4rem; font-weight: 900; color: #8a5a2a; }
.sq-new { font-style: normal; color: #3f8a52; font-weight: 800; }
.sqc-head { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 2px 6px; }
.sqc-head small { color: #8a7a62; font-size: .72rem; }
.sqc-filter, .dr-filter { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.sqc-f { all: unset; cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; font-size: .72rem; font-weight: 800; color: #6b4a22; background: #fff8ea; border: 2px solid #d8c29a; border-radius: 999px; box-shadow: 0 2px 0 #d8c29a; }
.sqc-f.on { background: #8a5a2a; color: #fff6e0; border-color: #6b4422; box-shadow: 0 2px 0 #4a2e16; }
.sqc-f em { font-style: normal; opacity: .7; font-size: .65rem; }
.sqc-f .px-ico, .sqc-f svg { width: 12px; height: 12px; }
.sqc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; margin-top: 6px; }
.sqc { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; justify-items: center; gap: 1px; padding: 8px 3px 5px; background: #fffaf0; border: 2px solid #e2d2b0; border-radius: 6px; box-shadow: 0 3px 0 #e2d2b0; -webkit-touch-callout: none; user-select: none; touch-action: manipulation; }
.sqc:hover { border-color: #c9a46a; }
.sqc:active { transform: translateY(2px); box-shadow: 0 1px 0 #e2d2b0; }
.sqc.on { background: #f3ead2; border-color: #c9a46a; opacity: .78; }
.sqc.picked { border-color: #e0a818; box-shadow: 0 0 0 3px #ffd34a, 0 3px 0 #b8860b; transform: translateY(-3px); }
.sqc-spr svg { width: 32px; height: 38px; shape-rendering: crispEdges; }
.sqc b { font-size: .66rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqc-ty { display: inline-flex; align-items: center; gap: 2px; font-size: .56rem; color: #8a7a62; }
.sqc-ty .px-ico, .sqc-ty svg { width: 10px; height: 10px; }
.sqc-d { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: .55rem; font-weight: 800; letter-spacing: -.2px; }
.sqc-d.up { color: #5d9a66; } .sqc-d.dn { color: #b39488; }
.sqc-on { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: .52rem; font-weight: 900; color: #fff; background: #6f9f72; padding: 0 5px; white-space: nowrap; }
@media (min-width: 900px) {
  .sqd-deck { gap: 14px; padding: 16px 14px 12px; }
  .sqd-spr svg { width: 60px; height: 70px; }
  .sqd-name { font-size: .86rem; }
  .sqd-st { font-size: .68rem; }
  .sqd-g { width: 22px; height: 22px; } .sqd-g svg { width: 18px; height: 18px; }
  .sqc-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}
/* Ankleidemenü */
.dress-pop { position: relative; width: min(560px, 96vw); max-height: 92vh; overflow-y: auto; padding: 14px 14px 16px !important; }
.dr-x { all: unset; cursor: pointer; position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; font-weight: 900; color: #8a6a4a; z-index: 3; }
.dr-tabs { display: flex; justify-content: center; gap: 6px; margin: 6px 0 8px; }
.dr-tab { all: unset; cursor: pointer; display: grid; justify-items: center; padding: 4px 6px 2px; border: 2px solid transparent; border-radius: 6px; opacity: .65; }
.dr-tab.on { opacity: 1; border-color: #c9a46a; background: #fff6e0; box-shadow: 0 3px 0 #c9a46a; }
.dr-tab i svg { width: 26px; height: 30px; shape-rendering: crispEdges; }
.dr-tab small { font-size: .6rem; font-weight: 700; }
.dr-stage { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; gap: 8px; padding: 12px 6px; background: radial-gradient(ellipse at 50% 60%, #fff6dc 0 35%, #f1dfb8 70%); border: 2px solid #d8c29a; border-radius: 8px; box-shadow: inset 0 -4px 0 rgba(160,110,50,.12); }
.dr-col { display: grid; gap: 10px; }
.dr-slot { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; justify-items: center; gap: 1px; padding: 8px 4px 5px; background: #fffaf0; border: 2px solid #c9b48c; border-radius: 6px; box-shadow: 0 3px 0 #c9b48c; }
.dr-slot.empty { border-style: dashed; background: rgba(255,250,240,.6); box-shadow: none; }
.dr-slot.on { border-color: #e0a818; box-shadow: 0 0 0 3px #ffd34a, 0 3px 0 #b8860b; }
.dr-slot.cr-rare { border-color: #4f86c6; } .dr-slot.cr-epic { border-color: #9a5bd0; } .dr-slot.cr-legendary { border-color: #e0a030; background: #fff4d6; }
.dr-art svg { width: 34px; height: 34px; }
.dr-ph { font-size: 22px; opacity: .45; filter: grayscale(.6); display: block; height: 34px; line-height: 34px; }
.dr-slot small { font-size: .6rem; font-weight: 700; color: #7a6a52; }
.dr-pow { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: .52rem; font-weight: 800; color: #8a6a3a; }
.dr-slot.drop-ok { outline: 2px dashed #3f8a52; outline-offset: 2px; }
.dr-slot.drop-hover { outline: 3px solid #3f8a52; transform: scale(1.06); }
.dr-hero { position: relative; display: grid; justify-items: center; text-align: center; }
.dr-glow { position: absolute; top: 4px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(#fff9e6, transparent 70%); }
.dr-spr { position: relative; }
.dr-spr svg { width: 84px; height: 98px; shape-rendering: crispEdges; display: block; filter: drop-shadow(0 4px 0 rgba(90,60,30,.25)); }
.dr-ped { width: 80px; height: 10px; margin-top: -4px; background: #c9a46a; border-radius: 50%; box-shadow: 0 3px 0 #8a5a2a; }
.dr-hero b { margin-top: 6px; font-size: .95rem; }
.dr-stats { display: flex; gap: 6px; font-size: .72rem; font-weight: 700; color: #5a4a32; }
.dr-stats em { font-style: normal; }
.dr-extra { font-size: .6rem; color: #7a6a52; }
.dr-detail { margin-top: 10px; }
.dr-detail .cg-card { margin: 0; }
.dr-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dr-empty { margin: 10px 2px; font-size: .74rem; color: #8a7a62; text-align: center; }
.dr-chest { margin-top: 12px; padding: 8px; background: linear-gradient(#a8743f, #8f6034); border: 3px solid #5a3a1c; border-radius: 6px; box-shadow: inset 0 3px 0 rgba(255,220,160,.25); }
.dr-chest-h { display: flex; justify-content: space-between; align-items: center; color: #fff1d4; margin-bottom: 6px; }
.dr-chest-h b { display: inline-flex; align-items: center; gap: 5px; }
.dr-chest-h small { color: #f2dcb4; font-size: .7rem; }
.dr-chest .sqc-f { background: #fff4dc; }
.dr-chest .sqc-f.on { background: #5a3a1c; color: #fff1d4; border-color: #3a2410; }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 8px; margin-top: 6px; padding: 8px; background: rgba(60,36,16,.35); border-radius: 4px; min-height: 60px; }
.dr-grid .hint { color: #f2dcb4; grid-column: 1 / -1; }
.dr-it { justify-self: center; }
.dr-it.on .cg-chip { box-shadow: 0 0 0 3px #ffd34a; transform: translateY(-2px); }
.dr-up { position: absolute; right: -4px; top: -6px; font-style: normal; font-size: .6rem; font-weight: 900; color: #fff; background: #6f9f72; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; }
.toast-say { display: flex; align-items: center; gap: 10px; }
.toast-say > i { flex: 0 0 34px; width: 34px; height: 40px; }
.toast-say > i svg { width: 100%; height: 100%; }
.toast-say b { display: block; }
.ts-bond { font-style: normal; color: #d0507a; font-weight: 800; }
@media (max-width: 420px) {
  .sqd-deck { gap: 5px; padding: 12px 5px 8px; }
  .sqd-spr svg { width: 38px; height: 45px; }
  .sqd-st { font-size: .55rem; }
  .sqd-g { width: 15px; height: 15px; } .sqd-g svg { width: 12px; height: 12px; }
  .dr-stage { grid-template-columns: 1fr 1.1fr 1fr; gap: 6px; padding: 10px 4px; }
  .dr-spr svg { width: 70px; height: 82px; }
}
.fg-slot.empty, .fg-slot.locked { display: flex; align-items: center; justify-content: center; gap: 6px; }
.fg-slot.empty .fg-ico, .fg-slot.locked .fg-ico { width: auto; height: auto; }
/* PC: Spielfeld ist schmal (~700px), deshalb nach Platz statt nach Bildschirmbreite */
@media (min-width: 700px) {
  .fg-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)) !important; }
  .forge2 { grid-template-columns: 1fr !important; }
  .forge2 .fg-anvil { position: static !important; grid-column: auto !important; grid-row: auto !important; }
  .forge2 .fg-bag, .forge2 .fg-empty { grid-column: auto !important; grid-row: auto !important; }
  .fu-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }
  .fg-shelf-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.fu-step { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.fu-txt { margin-left: auto; white-space: nowrap; }
.fu-go { flex: 1 1 100%; width: 100%; min-width: 0; box-sizing: border-box; }
.fg-slot.full { padding-right: 16px; }
.sqc { min-width: 0; width: 100%; overflow: hidden; }
.sqc b { display: block; width: 100%; text-align: center; }
.sqd-lv { top: 3px; left: 4px; } .sqd-card .sqd-bond { top: 16px; right: 5px; }
.sqc-more { all: unset; cursor: pointer; grid-column: 1 / -1; text-align: center; padding: 8px; font-size: .78rem; font-weight: 800; color: #8a5a2a; border: 2px dashed #d8c29a; border-radius: 6px; }
.sqc-on { top: 3px; left: 4px; transform: none; border-radius: 2px; }
@media (max-width: 420px) { .sqd-lv { display: none; } }
.dr-lv { font-size: .62rem; color: #8a6a3a; font-weight: 800; }
.toast .toast-say { display: flex !important; flex-direction: row; align-items: center; gap: 10px; }
/* Pfeile kleiner und ruhiger (Taverne, Vergleiche) */
.pa { gap: 0; margin-left: 2px; vertical-align: 1px; }
.pa svg { width: 7px !important; height: 4px !important; }
.tv-cmp .pa { opacity: .8; }
.tv-st .pa svg { width: 6px !important; height: 4px !important; }
.tv-out-tag, .tv-mstars + .tv-out-tag { top: auto !important; bottom: -8px; }
.weak-key { background: #d9a48e !important; border-color: #b07a62 !important; }
.tv-mem.weak { border-color: #d9a48e !important; background: #fbefe8 !important; }
.tv-mem.weak { border-image-source: var(--pxf) !important; outline: 2px dashed #d9a48e; outline-offset: 1px; }

/* Team-Balken (volle Bande) */
.team-bar { display: flex; align-items: center; gap: 8px; margin: 6px auto 0; width: fit-content; max-width: 96%; padding: 4px 10px 4px 6px; background: linear-gradient(#fff6dc, #f3dfae); border: 2px solid #8a5a2a; border-radius: 6px; box-shadow: 0 3px 0 #6b4422; }
.tb-ico .px-ico, .tb-ico svg { width: 20px; height: 20px; display: block; }
.tb-txt { display: grid; line-height: 1.05; }
.tb-txt small { font-size: .56rem; font-weight: 800; color: #8a6a3a; text-transform: uppercase; letter-spacing: .05em; }
.tb-txt b { font-size: .78rem; color: #4a2e16; white-space: nowrap; }
.tb-segs { display: flex; gap: 3px; }
.tb-seg { width: 18px; height: 10px; background: #e6d4ac; border: 2px solid #8a5a2a; border-radius: 2px; box-shadow: inset 0 2px 0 rgba(0,0,0,.12); transition: background .25s; }
.tb-seg.on { background: linear-gradient(#ffe58a, #f0b52a); box-shadow: 0 0 6px rgba(255,200,60,.7); }
.team-bar.tick { animation: tbTick .45s ease-out; }
.team-bar.full { animation: tbFull 1.4s ease-out; }
.team-bar.full .tb-seg { background: linear-gradient(#fff6b0, #ffcf3a); }
@keyframes tbTick { 40% { transform: scale(1.08); } }
@keyframes tbFull { 0%, 100% { box-shadow: 0 3px 0 #6b4422; } 30% { transform: scale(1.12); box-shadow: 0 0 0 4px #ffd34a, 0 0 22px 6px rgba(255,210,70,.8); } }
.ult-call.team { background: linear-gradient(180deg, #ffe58a, #e8a524); color: #3a2208; border-color: #fff4c8; box-shadow: 0 0 0 4px rgba(255,220,120,.6), 0 10px 26px rgba(200,140,30,.6); }
.ult-call.team em { display: block; font-style: normal; font-size: .72rem; font-weight: 700; opacity: .9; }
.ult-call.team.them { background: linear-gradient(180deg, #ff9a8a, #d0564a); color: #fff; }
.syn-team { display: block; margin-top: 2px; font-size: .68rem; color: #8a6a3a; }
.syn-team.on { color: #b07a10; font-weight: 700; }
.wk-team { margin: 4px 0 0; font-size: .74rem; color: #6b4a14; background: #fff3d0; padding: 4px 8px; border-left: 3px solid #e0a818; }
.skip-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-weight: 800; font-size: .82rem; color: #fff6e0; background: linear-gradient(#8a5a2a, #6b4422); border: 2px solid #4a2e16; border-radius: 6px; box-shadow: 0 3px 0 #3a2410; cursor: pointer; }
.skip-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a2410; }
/* Steckbrief: getragene Ausrüstung als Kacheln */
.cc-gear2 { margin-top: 8px; }
.ccg-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.ccg { all: unset; box-sizing: border-box; cursor: pointer; min-width: 0; display: grid; justify-items: center; gap: 1px; padding: 6px 3px 5px; background: #fffaf0; border: 2px solid #c9b48c; border-radius: 6px; box-shadow: 0 3px 0 #c9b48c; text-align: center; }
.ccg:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9b48c; }
.ccg i { font-style: normal; height: 30px; display: grid; place-items: center; }
.ccg i svg { width: 28px; height: 28px; }
.ccg b { font-size: .6rem; line-height: 1.15; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #3a2a14; }
.ccg small { font-size: .55rem; color: #7a6a52; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccg.empty { border-style: dashed; box-shadow: none; opacity: .7; }
.ccg.empty i { font-size: 18px; filter: grayscale(.6); }
.ccg.cr-rare { border-color: #4f86c6; box-shadow: 0 3px 0 #3d6ea8; } .ccg.cr-epic { border-color: #9a5bd0; box-shadow: 0 3px 0 #7a40b0; } .ccg.cr-legendary { border-color: #e0a030; background: #fff4d6; box-shadow: 0 3px 0 #b8801a; }
.ccg-go { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
/* Ausrüstung vergleichen */
.gc { display: grid; gap: 2px; margin: 6px 0 2px; }
.gc-row { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; color: #4a3a22; padding: 1px 6px; border-radius: 3px; }
.gc-row s { color: #a8987e; }
.gc-row em { font-style: normal; font-weight: 800; font-size: .68rem; }
.gc-row.up em { color: #3f7a4a; } .gc-row.dn em { color: #a8705e; } .gc-row.eq em { color: #a8987e; }
.gc-row.up { background: rgba(111,159,114,.1); } .gc-row.dn { background: rgba(185,138,122,.1); }
.gc-sum { display: block; margin-top: 3px; font-size: .72rem; font-weight: 700; padding: 3px 6px; border-radius: 3px; }
.gc-sum.up { color: #3f7a4a; background: #e6f2df; } .gc-sum.dn { color: #9a6a5a; background: #f6e9e2; } .gc-sum.eq { color: #7a6a52; background: #f2ebdc; }
.gtip-float { position: fixed; z-index: 10000; pointer-events: none; animation: gtipIn .12s ease-out; }
@keyframes gtipIn { from { opacity: 0; transform: translateY(4px); } }
.gtip { width: 230px; padding: 8px 10px; background: #fffaf0; border: 2px solid #8a5a2a; border-radius: 6px; box-shadow: 0 4px 0 #6b4422, 0 10px 24px rgba(40,20,10,.3); }
.gtip > b { display: block; font-size: .86rem; }
.gtip.cr-rare > b { color: #3d6ea8; } .gtip.cr-epic > b { color: #7a40b0; } .gtip.cr-legendary > b { color: #b8801a; }
.gtip > small { color: #8a7a62; font-size: .66rem; }
.gtip-who { display: block; margin-top: 3px; font-style: italic; }

/* === Räume kompakt (fork 2) === */
/* Lesbarkeit der Zierschrift: echtes Fett laden (index.html), keine Kunst-Fettung, etwas Luft, sanfter Kontrast */
h1, h2, h3, .hq-sec h3, .rank-name, .my-name, .duel-head b, .poster h3, .card-name, .tp-name, .bp-name, .stop-banner b, .acard b, .rank-up b, .btn, .squad-power, .duel-verdict, .ult-call b, .ts-logo b, .co-name {
  font-synthesis: none; -webkit-font-smoothing: antialiased; letter-spacing: .015em !important; }
.ult-call b, .duel-verdict, .squad-power { text-shadow: 0 2px 0 rgba(60,30,10,.25); }
.ult-call b { font-size: 1.35rem; }
.acard b { font-size: 1.05rem !important; line-height: 1.15 !important; }
.btn { letter-spacing: .02em !important; }
.f-round, .tip-badge, .seg, .cos-title, .lvtag, .fk-name, .lg-tile b, .vk-tile b { font-synthesis: none; }

/* Schmiede kompakt */
.forge3 { display: grid; gap: 10px; }
.fk-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
.fk-head b { display: inline-flex; align-items: center; gap: 5px; font-size: .95rem; color: #4a2e16; }
.fk-head .pxi svg { width: 16px; height: 16px; }
.fk-count { font-size: .72rem; font-weight: 800; color: #6b4422; background: #fff6e0; border: 2px solid #c9a46a; padding: 0 6px; border-radius: 4px; }
.fk-note { width: 100%; font-size: .66rem; color: #8a7a62; margin-top: -2px; }
.fk-berry { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: .8rem; color: #6b4a14; }
.fk-berry i svg { width: 14px; height: 14px; }
.fk-shelf { padding: 8px 10px; background: linear-gradient(#b07a44, #956335); border: 3px solid #5a3a1c; border-radius: 6px; box-shadow: inset 0 3px 0 rgba(255,220,160,.25), 0 3px 0 #4a2e16; }
.fk-shelf .fk-head b, .fk-shelf .fk-note { color: #fff1d4; }
.fk-shelf .fk-head .fk-note { color: #f2dcb4; }
.fk-shelf-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.fk-slot { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 6px; min-height: 40px; background: #fffaf0; border: 2px solid var(--rc, #c9b48c); border-radius: 5px; box-shadow: 0 2px 0 rgba(0,0,0,.25); cursor: pointer; }
.fk-slot b { font-size: .66rem; line-height: 1.1; color: #3a2a14; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fk-slot b em { font-style: normal; color: #b07a10; }
.fk-slot.empty, .fk-slot.locked { cursor: default; background: rgba(255,248,232,.25); border: 2px dashed rgba(255,240,210,.65); box-shadow: none; color: #fff1d4; justify-content: center; }
.fk-slot.empty small, .fk-slot.locked small { font-size: .62rem; }
.fk-slot .fk-ico { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; font-weight: 900; }
.fk-ico svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.fk-filter { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 4px; }
.fk-chip { all: unset; cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: .72rem; font-weight: 800; color: #6b4a22; background: #fff8ea; border: 2px solid #d8c29a; border-radius: 999px; box-shadow: 0 2px 0 #d8c29a; }
.fk-chip em { font-style: normal; opacity: .65; font-size: .64rem; }
.fk-chip .fk-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--rc); }
.fk-chip.on { background: #8a5a2a; color: #fff6e0; border-color: #6b4422; box-shadow: 0 2px 0 #4a2e16; }
.fk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 700px) { .fk-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
.fk-tile { all: unset; box-sizing: border-box; cursor: pointer; position: relative; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 1px; padding: 7px 3px 5px; background: #fffaf0; border: 2px solid var(--rc, #d8c29a); border-radius: 6px; box-shadow: 0 3px 0 color-mix(in srgb, var(--rc, #d8c29a) 70%, #4a2e16); text-align: center; transition: transform .1s; }
.fk-tile.ir-legendary { background: linear-gradient(#fff4d6, #fffaf0 70%); }
.fk-tile.ir-epic { background: linear-gradient(#f6eefe, #fffaf0 70%); }
.fk-tile:hover { transform: translateY(-2px); }
.fk-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--rc, #d8c29a) 70%, #4a2e16); }
.fk-tile.sel { box-shadow: 0 0 0 3px #ffd34a, 0 3px 0 #b8860b; transform: translateY(-2px); }
.fk-tile .fk-ico { width: 30px; height: 30px; }
.fk-name { font-size: .64rem; line-height: 1.15; color: #3a2a14; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-name em { font-style: normal; color: #b07a10; }
.fk-stat { font-size: .56rem; line-height: 1.15; color: #7a6a52; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-on { position: absolute; top: 2px; left: 2px; font-size: .5rem; font-weight: 900; color: #fff; background: #6f9f72; padding: 0 4px; border-radius: 2px; z-index: 2; }
.fk-tile.on { outline: 2px solid #6f9f72; outline-offset: -5px; }
.fk-hint { display: block; margin-top: 6px; font-size: .66rem; color: #8a7a62; text-align: center; }
.fk-empty { padding: 12px; text-align: center; font-size: .8rem; color: #7a6a52; }
/* Detail: PC als Feld über der Truhe, Handy als Blatt von unten */
.fk-detail { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 10px 12px; background: #fffaf0; border-color: var(--rc) !important; }
.fk-detail.ir-legendary { background: linear-gradient(90deg, #fff1cc, #fffaf0 50%); }
.fk-detail.ir-epic { background: linear-gradient(90deg, #f1e6fd, #fffaf0 50%); }
.fk-big { width: 58px; height: 58px; display: grid; place-items: center; background: radial-gradient(#fff, transparent 70%); grid-row: span 2; }
.fk-big svg { width: 52px; height: 52px; shape-rendering: crispEdges; }
.fk-info { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.fk-info b { font-size: .95rem; color: #3a2a14; } .fk-info b em { font-style: normal; color: #b07a10; }
.fk-info small { font-size: .74rem; color: #5a4a32; }
.fk-acts { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; }
.fk-acts .btn { margin: 0; padding: 6px 12px; font-size: .78rem; }
.fk-acts .btn i svg { width: 12px; height: 12px; vertical-align: -1px; }
.fk-take.on { background: #6f9f72 !important; border-color: #4f7f52 !important; color: #fff !important; }
.fk-melt.armed { background: #c2412f !important; color: #fff !important; border-color: #8a2a1e !important; }
.fk-max { font-size: .72rem; font-weight: 800; color: #b07a10; align-self: center; }
.fk-x { all: unset; cursor: pointer; position: absolute; top: 4px; right: 8px; font-weight: 900; color: #8a6a4a; padding: 4px; }
.fk-sheet-bg { display: none; }
@media (max-width: 699px) {
  .fk-sheet-bg { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(40,24,10,.35); }
  .fk-detail { position: fixed; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); z-index: 81; box-shadow: 0 -4px 24px rgba(0,0,0,.3); animation: fkUp .2s ease-out; }
  .fk-acts { grid-column: 1 / -1; }
  .fk-acts .btn { flex: 1 1 auto; }
}
@keyframes fkUp { from { transform: translateY(30px); opacity: 0; } }
/* Amboss zum Aufklappen */
.fk-anvil { background: linear-gradient(#e8e2d6, #d6cfc2); border: 3px solid #6d6a63; border-radius: 6px; box-shadow: 0 3px 0 #4d4a45; }
.fk-anvil summary { cursor: pointer; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 8px 10px; }
.fk-anvil summary::-webkit-details-marker { display: none; }
.fk-anvil summary::after { content: '▾'; margin-left: auto; color: #4d4a45; font-weight: 900; }
.fk-anvil[open] summary::after { content: '▴'; }
.fk-anvil summary b { color: #2f2d2a; font-size: .92rem; }
.fk-anvil summary small { font-size: .68rem; color: #5d5a54; }
.fk-ready { font-style: normal; font-size: .64rem; font-weight: 900; color: #fff; background: #e0a818; padding: 1px 6px; border-radius: 3px; animation: dupGlow 2s ease-in-out infinite; }
.fk-fu-grid { display: grid; gap: 6px; padding: 0 10px 10px; }
@media (min-width: 700px) { .fk-fu-grid { grid-template-columns: repeat(3, 1fr); } }
.fk-fu { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f6f2ea; border: 2px solid #b8b2a6; border-radius: 5px; }
.fk-fu.ready { border-color: #e0a818; background: #fff6dc; }
.fk-fu.none { opacity: .55; }
.fk-fu-t { display: grid; gap: 1px; flex: 1; min-width: 0; } .fk-fu-t small { font-size: .62rem; color: #6d6a63; }
.fk-fu-go { margin: 0 !important; padding: 4px 8px !important; font-size: .72rem !important; white-space: nowrap; }
.fk-fu-go i svg { width: 11px; height: 11px; vertical-align: -1px; }
.fk-fu .fu-in { display: inline-flex; gap: 2px; } .fk-fu .fu-arrow { font-size: .8rem; color: #6d6a63; }

/* Lager kompakt */
.lager2, .vault2 { display: grid; gap: 10px; }
.lg-head, .vk-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; background: linear-gradient(#fff6dc, #f2e0b6); }
.lg-title { display: grid; gap: 1px; flex: 1; min-width: 0; }
.lg-title b { display: inline-flex; align-items: center; gap: 5px; font-size: .95rem; color: #4a2e16; }
.lg-title b .pxi svg { width: 16px; height: 16px; }
.lg-title small { font-size: .66rem; color: #8a7a62; }
.lg-slots { display: inline-flex; align-items: center; gap: 3px; }
.lg-slots b { margin-left: 4px; font-size: .8rem; color: #6b4422; }
.lg-pip { width: 12px; height: 12px; border: 2px solid #8a5a2a; background: #f3e6c8; border-radius: 2px; }
.lg-pip.on { background: linear-gradient(#ffe58a, #f0b52a); }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
@media (max-width: 420px) { .lg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lg-tile { all: unset; box-sizing: border-box; cursor: pointer; position: relative; min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 10px 6px 8px; text-align: center; background: #fffaf0; border: 2px solid #d8c29a; border-radius: 6px; box-shadow: 0 3px 0 #c9b48c; }
.lg-tile:hover { transform: translateY(-2px); }
.lg-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9b48c; }
.lg-tile.on { border-color: #6f9f72; background: #f1f7ea; box-shadow: 0 3px 0 #6f9f72; }
.lg-tile.full { opacity: .6; cursor: default; }
.lg-ico { width: 34px; height: 34px; display: grid; place-items: center; } .lg-ico svg { width: 100%; height: 100%; }
.lg-tile b { font-size: .78rem; color: #3a2a14; }
.lg-tile small { font-size: .64rem; line-height: 1.2; color: #7a6a52; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lg-n { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: .62rem; font-weight: 900; color: #8a5a2a; }
.lg-btn { margin-top: 3px; font-size: .66rem; font-weight: 800; padding: 2px 10px; border-radius: 4px; background: #8a5a2a; color: #fff6e0; box-shadow: 0 2px 0 #4a2e16; }
.lg-tile.on .lg-btn { background: #6f9f72; box-shadow: 0 2px 0 #4f7f52; }
.lager2 .vitrine { margin: 0; }

/* Schatzkammer kompakt */
.vk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; width: 100%; }
.vk-slot { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 8px; min-height: 42px; position: relative; background: #fffaf0; border: 2px solid #c9a46a; border-radius: 5px; box-shadow: 0 2px 0 #a8834a; cursor: pointer; }
.vk-slot.empty, .vk-slot.locked { cursor: default; border-style: dashed; background: rgba(255,250,240,.55); box-shadow: none; color: #8a7a62; justify-content: center; }
.vk-slot small { font-size: .62rem; }
.vk-ico { flex: 0 0 26px; width: 26px; height: 30px; display: grid; place-items: center; font-weight: 900; color: #a89a82; }
.vk-ico svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.vk-t { display: grid; min-width: 0; } .vk-t b { font-size: .72rem; color: #3a2a14; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-t small { color: #6b5a42; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-lv { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: .58rem; font-weight: 900; color: #fff; background: #b07a10; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; }
.vk-sub { display: flex; align-items: baseline; gap: 8px; margin: 2px 2px -4px; } .vk-sub b { font-size: .9rem; color: #4a2e16; } .vk-sub small { font-size: .66rem; color: #8a7a62; }
.vk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 7px; }
@media (max-width: 420px) { .vk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vk-tile { all: unset; box-sizing: border-box; cursor: pointer; position: relative; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 8px 4px 6px; text-align: center; background: #fffaf0; border: 2px solid #d8c29a; border-radius: 6px; box-shadow: 0 3px 0 #c9b48c; }
.vk-tile:not(.locked):not(.fruit):hover { transform: translateY(-2px); }
.vk-tile.on { border-color: #e0a818; background: linear-gradient(#fff4d6, #fffaf0 70%); box-shadow: 0 3px 0 #b8860b; }
.vk-tile.full { opacity: .65; }
.vk-tile.locked { cursor: default; background: #f3ecdc; border-style: dashed; box-shadow: none; }
.vk-tile.fruit { cursor: default; } .vk-tile.fruit.have { border-color: #9a63e0; }
.vk-tile .vk-ico { width: 34px; height: 38px; flex: none; }
.vk-tile b { font-size: .68rem; line-height: 1.15; color: #3a2a14; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-tile small { font-size: .58rem; line-height: 1.2; color: #7a6a52; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vk-tile .art-lv { transform: scale(.85); }
/* Flaschenpost */
.bp-box { margin: 8px 0 2px; padding: 8px; background: #eaf4f6; border: 2px solid #8ab4be; border-radius: 6px; display: grid; gap: 6px; }
.bp-box > b { font-size: .8rem; color: #2e5a64; }
.bp-box small { font-size: .68rem; color: #4a6a70; }
.bp-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-f { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: #fff; border: 2px solid #8ab4be; border-radius: 999px; box-shadow: 0 2px 0 #6a949e; font-size: .78rem; font-weight: 700; }
.bp-f:active { transform: translateY(2px); box-shadow: none; }
.bp-f[disabled] { opacity: .5; pointer-events: none; }
.bp-f i svg { width: 22px; height: 26px; display: block; }
.bottle-pop { text-align: center; }
.bottle-art { font-size: 42px; animation: bottleBob 2s ease-in-out infinite; }
@keyframes bottleBob { 50% { transform: translateY(-6px) rotate(-8deg); } }
.bottle-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0; }
.bottle-it { display: grid; justify-items: center; gap: 2px; padding: 8px 10px; background: #fffaf0; border: 2px solid #c9b48c; border-radius: 6px; box-shadow: 0 3px 0 #c9b48c; min-width: 110px; }
.bottle-it svg { width: 36px; height: 36px; }
.bottle-it b { font-size: .78rem; } .bottle-it small { font-size: .64rem; color: #7a6a52; }
.bottle-it.cr-rare { border-color: #4f86c6; } .bottle-it.cr-epic { border-color: #9a5bd0; } .bottle-it.cr-legendary { border-color: #e0a030; background: #fff4d6; }
.acard.gold-book { border-color: var(--gold); background: linear-gradient(#fffaf0, #fff1cc); box-shadow: 0 0 0 2px rgba(242,201,76,.35) inset; }
.forge3 > *, .lager2 > *, .vault2 > * { min-width: 0; }
.forge3, .lager2, .vault2 { min-width: 0; max-width: 100%; }
@media (max-width: 699px) {
  .fk-sheet-bg { display: none !important; }
  .fk-detail { position: sticky !important; left: auto; right: auto; top: 6px; bottom: auto !important; z-index: 6; box-shadow: 0 6px 18px rgba(60,30,10,.25) !important; }
  .fk-shelf-row { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
.vk-slots { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
@media (max-width: 699px) { .vk-slot.full .vk-t small { display: none; } .vk-slot { min-height: 38px; padding: 4px 6px; } }
/* Schließen-Knopf für alle Fenster */
.fpop-card { position: relative; }
.pop-x { position: absolute; top: 8px; right: 8px; z-index: 5; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: linear-gradient(#fff6e0, #f0dcb0); border: 2px solid #8a5a2a; border-radius: 8px; box-shadow: 0 3px 0 #6b4422, inset 0 -2px 0 rgba(160,110,50,.2); color: #6b4422; font-weight: 900; font-size: 15px; line-height: 1; }
.pop-x:hover { background: linear-gradient(#fffaf0, #f6e4c0); }
.pop-x:active { transform: translateY(2px); box-shadow: 0 1px 0 #6b4422; }
.fpop-card .fpop-kicker:first-of-type { padding-right: 40px; }
.dress-pop .dr-x { display: none; }
.pop-x { position: sticky; top: 8px; float: right; margin: -4px -4px -36px 8px; right: auto; }
.fpop-card { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.pop-x { float: none; margin: -6px -6px -30px auto; }

/* === Profil-Editor neu (fork 3) === */
.pf2 .pf-card { padding: 12px 14px 14px; }
.pe-head { display: flex; gap: 14px; align-items: center; padding: 10px; background: linear-gradient(#fff6e0, #f3e2bc); border: 2px solid #8a5a2a; border-radius: 8px; box-shadow: 0 4px 0 #6b4422, inset 0 -3px 0 rgba(160,110,50,.15); position: sticky; top: 0; z-index: 6; }
.pe-port { flex: 0 0 auto; }
.pe-port .portrait.xl { width: 104px; height: 104px; }
.pe-id { flex: 1; min-width: 0; display: grid; gap: 4px; text-align: left; }
.pe-name { width: 100%; box-sizing: border-box; font: inherit; font-weight: 800; font-size: 1.05rem; padding: 7px 10px; border: 2px solid #c9a46a; border-radius: 6px; background: #fffdf6; box-shadow: inset 0 2px 0 rgba(0,0,0,.06); color: #3a2a14; }
.pe-name:focus { outline: none; border-color: #e0a818; box-shadow: 0 0 0 3px rgba(255,211,74,.4); }
.pe-ttl { color: #8a6a3a; font-weight: 700; font-size: .78rem; }
.pe-stats { display: flex; flex-wrap: wrap; gap: 4px; }
.pe-stats > span { font-size: .72rem; font-weight: 800; color: #5a4320; background: #fffaf0; border: 1.5px solid #d8c29a; border-radius: 999px; padding: 1px 8px; display: inline-flex; align-items: center; gap: 3px; }
.pe-stats .pe-ty svg, .pe-stats .pe-ty .px-ico { width: 14px; height: 14px; }
.pe-tabs { display: flex; gap: 6px; margin: 12px 0 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
.pe-tab { all: unset; cursor: pointer; flex: 1 0 auto; display: grid; justify-items: center; gap: 2px; padding: 6px 10px 5px; min-width: 64px; background: #fffaf0; border: 2px solid #d8c29a; border-radius: 8px; box-shadow: 0 3px 0 #d8c29a; font-size: .7rem; font-weight: 800; color: #6b4a22; }
.pe-tab .pxi svg, .pe-tab svg { width: 18px; height: 18px; }
.pe-tab.on { background: linear-gradient(#8a5a2a, #6b4422); color: #fff4dc; border-color: #4a2e16; box-shadow: 0 3px 0 #3a2410; }
.pe-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 #d8c29a; }
.pe-body { min-height: 220px; padding: 10px; background: #fffaf2; border: 2px solid #e6d6b4; border-radius: 8px; }
.pe-subs { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.pe-row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; margin: 6px 0; }
.pe-lbl { font-size: .74rem; font-weight: 800; color: #6b4a22; text-align: left; }
.pe-lock { font-size: .7rem; color: #8a7a62; text-align: left; }
.pe-sw { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-c { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55) 0 18%, transparent 19%), var(--c); border: 2px solid rgba(60,36,16,.45); box-shadow: 0 3px 0 rgba(60,36,16,.35), inset 0 -3px 0 rgba(0,0,0,.18); display: grid; place-items: center; font-size: .7rem; color: #8a6a4a; }
.pe-c.none { background: #fffaf0; border-style: dashed; box-shadow: none; }
.pe-c.on { outline: 3px solid #ffd34a; outline-offset: 2px; transform: translateY(-2px); }
.pe-c:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(60,36,16,.35); }
.pe-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-bottom: 8px; }
.pe-tile { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 2px; padding: 6px 3px 4px; background: #fffdf6; border: 2px solid #d8c29a; border-radius: 6px; box-shadow: 0 3px 0 #d8c29a; min-width: 0; }
.pe-tile small { font-size: .62rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5a4320; }
.pe-mini svg { width: 32px; height: 38px; shape-rendering: crispEdges; display: block; }
.pe-tile.on, .pe-ct.on, .pe-bt.on { border-color: #e0a818; box-shadow: 0 0 0 3px #ffd34a, 0 3px 0 #b8860b; background: #fff4d0; }
.pe-tile.locked, .pe-ct.locked { opacity: .55; filter: grayscale(.7); cursor: not-allowed; }
.pe-tile:not(.locked):active, .pe-ct:not(.locked):active, .pe-bt:active { transform: translateY(2px); }
.pe-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pe-ct { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 6px 4px; background: #fffdf6; border: 2px solid #d8c29a; border-radius: 6px; box-shadow: 0 3px 0 #d8c29a; min-width: 0; text-align: center; }
.pe-ct small { font-size: .62rem; font-weight: 700; color: #5a4320; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-ct.ttl { min-height: 46px; align-content: center; }
.pe-ct .cos-title { font-size: .72rem; }
.pe-req { font-style: normal; font-size: .56rem; color: #8a6a5a; line-height: 1.2; }
.pe-ct.rare-item { border-color: #c9a0e0; }
.pe-h { display: block; text-align: left; font-size: .72rem; font-weight: 900; color: #8a6a3a; text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 6px; }
.pe-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pe-bt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 3px; padding: 10px 6px 8px; background: #fffdf6; border: 2px solid #d8c29a; border-radius: 8px; box-shadow: 0 4px 0 #d8c29a; text-align: center; min-width: 0; }
.pe-bt i svg, .pe-bt i .px-ico { width: 28px; height: 28px; }
.pe-bt b { font-size: .82rem; color: #3a2a14; }
.pe-bt small { font-size: .62rem; color: #7a6a52; line-height: 1.25; }
.pe-note { margin: 8px 2px 0; font-size: .7rem; color: #8a7a62; }
.pe-actions { position: sticky; bottom: 0; z-index: 5; margin: 10px -14px -14px !important; padding: 10px 14px; background: linear-gradient(rgba(255,250,240,0), #fffaf0 30%); display: flex; gap: 8px; justify-content: flex-end; }
.pe-actions .btn { flex: 1; max-width: 260px; }
.pf2 .cos-all.ship-all { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
@media (max-width: 560px) {
  .pe-head { gap: 10px; padding: 8px; }
  .pe-port .portrait.xl { width: 84px; height: 84px; }
  .pe-tab { min-width: 58px; padding: 5px 6px 4px; font-size: .62rem; }
  .pe-cos { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
  .pe-row { grid-template-columns: 62px 1fr; }
  .pe-c { width: 28px; height: 28px; }
}
@media (min-width: 900px) {
  .pf2 .pf-card { max-width: 860px; margin: 0 auto; }
  .pe-cos { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}
.pe-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); overflow: visible; }
.pe-tab { min-width: 0; padding: 5px 2px 4px; }
.pe-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* === Story-Szenen === */
.story { position: fixed; inset: 0; z-index: 1200; overflow: hidden; user-select: none; cursor: pointer; opacity: 0; transition: opacity .45s; background: #8ec8e8; }
.story.in { opacity: 1; } .story.out { opacity: 0; }
.st-sky { position: absolute; inset: 0 0 38% 0; background: linear-gradient(#7ec0ea, #bfe3f5 70%, #f6e8c8); }
.st-sun { position: absolute; top: 12%; right: 14%; width: 56px; height: 56px; background: #fff3b0; box-shadow: 0 0 0 6px rgba(255,243,176,.35), 0 0 40px 10px rgba(255,236,150,.5); }
.st-cloud { position: absolute; width: 90px; height: 18px; background: #fffaf0; box-shadow: 18px -12px 0 #fffaf0, 40px -6px 0 #fffaf0; opacity: .9; animation: stCloud 40s linear infinite; }
.st-cloud.a { top: 16%; left: -120px; } .st-cloud.b { top: 30%; left: -120px; animation-delay: -18s; animation-duration: 55s; transform: scale(.7); }
@keyframes stCloud { to { left: 110%; } }
.st-stars { display: none; }
.st-sea { position: absolute; left: 0; right: 0; bottom: 22%; height: 18%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 24px, transparent 24px 60px), linear-gradient(#4f9cc8, #3a7cae); }
.st-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: repeating-linear-gradient(90deg, #a8743f 0 46px, #9a6836 46px 48px); border-top: 4px solid #6b4422; }
.bg-insel .st-ground { background: linear-gradient(#e9d39a, #d9bd7c); border-top-color: #c2a060; }
.bg-insel .st-sea { bottom: 22%; }
.bg-kueche .st-sky { background: linear-gradient(#f3dcae, #e8c48a); } .bg-kueche .st-sun { display: none; } .bg-kueche .st-cloud { display: none; }
.bg-kueche .st-sea { background: repeating-linear-gradient(90deg, #c98d55 0 40px, #b97d48 40px 42px); }
.bg-kueche .st-ground { background: repeating-linear-gradient(90deg, #e9dcc0 0 30px, #d8c8a6 30px 32px); border-top-color: #a88a5a; }
.bg-nacht .st-sky { background: linear-gradient(#1c2a4e, #36487a 70%, #5a5f8a); }
.bg-nacht .st-sun { background: #fff8de; width: 42px; height: 42px; box-shadow: 0 0 30px 6px rgba(255,248,222,.35); }
.bg-nacht .st-cloud { opacity: .25; }
.bg-nacht .st-stars { display: block; position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 20%, #fff, transparent), radial-gradient(2px 2px at 60% 12%, #fff, transparent), radial-gradient(2px 2px at 80% 30%, #fff, transparent), radial-gradient(2px 2px at 35% 40%, #fff, transparent), radial-gradient(2px 2px at 10% 55%, #fff, transparent); animation: stTw 3s ease-in-out infinite; }
@keyframes stTw { 50% { opacity: .5; } }
.bg-nacht .st-sea { background: linear-gradient(#2a3f6a, #1e2e52); } .bg-nacht .st-ground { filter: brightness(.7); }
.bg-schiff .st-ground { background: repeating-linear-gradient(90deg, #b58049 0 36px, #a26f3d 36px 38px); }
.st-bar { position: absolute; left: 0; right: 0; height: 0; background: #1a120a; z-index: 3; transition: height .6s ease; }
.st-bar.top { top: 0; } .st-bar.bot { bottom: 0; }
.story.in .st-bar { height: 7vh; }
.st-title { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.9); z-index: 4; text-align: center; padding: 14px 26px; background: linear-gradient(#fff6dc, #f2dcac); border: 3px solid #6b4422; border-radius: 8px; box-shadow: 0 5px 0 #4a2e16, 0 18px 40px rgba(0,0,0,.35); opacity: 0; transition: opacity .5s, transform .5s; min-width: 220px; }
.story.in .st-title { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.story.go .st-title { opacity: 0; transform: translate(-50%, -120%) scale(.9); pointer-events: none; }
.st-title small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8a6a3a; }
.st-title b { font-family: var(--px); font-size: 1.5rem; color: #3a2208; }
.st-skip { position: absolute; top: calc(7vh + 10px); right: 12px; z-index: 5; padding: 6px 12px; font-weight: 800; font-size: .78rem; color: #4a2e16; background: linear-gradient(#fff6e0, #f0dcb0); border: 2px solid #8a5a2a; border-radius: 8px; box-shadow: 0 3px 0 #6b4422; cursor: pointer; }
.st-skip:active { transform: translateY(2px); box-shadow: 0 1px 0 #6b4422; }
.st-cast { position: absolute; left: 0; right: 0; bottom: 21%; height: 30%; z-index: 2; }
.st-who { position: absolute; bottom: 0; left: calc((var(--i) + .5) * 100% / var(--n)); transform: translateX(-50%); display: grid; justify-items: center; transition: filter .3s, transform .3s; filter: saturate(.85) brightness(.92); opacity: 0; }
.story.go .st-who { opacity: 1; animation: stIn .5s ease-out both; animation-delay: calc(var(--i) * .08s); }
@keyframes stIn { from { opacity: 0; transform: translate(-50%, 16px); } }
.st-who.talk { filter: none; transform: translateX(-50%) scale(1.08); z-index: 2; }
.st-spr svg { width: min(16vw, 84px); height: auto; aspect-ratio: 14 / 16; shape-rendering: crispEdges; display: block; }
.st-who.hop .st-spr { animation: stHop .45s ease-out; }
@keyframes stHop { 30% { transform: translateY(-14px); } 60% { transform: translateY(0); } 75% { transform: translateY(-4px); } }
.st-who:not(.talk) .st-spr { animation: stIdle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes stIdle { 50% { transform: translateY(-2px); } }
.st-shadow { width: 70%; height: 6px; margin-top: -2px; background: rgba(0,0,0,.22); border-radius: 50%; }
.st-emote { position: absolute; top: -26px; font-style: normal; font-size: 20px; font-weight: 900; color: #c2412f; opacity: 0; text-shadow: 0 2px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; }
.st-emote.pop { animation: stEmo 1.6s ease-out forwards; }
@keyframes stEmo { 0% { opacity: 0; transform: translateY(6px) scale(.5); } 15% { opacity: 1; transform: translateY(-4px) scale(1.2); } 30% { transform: translateY(0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.st-box { position: absolute; left: 50%; bottom: calc(7vh + 10px); transform: translate(-50%, 20px); width: min(680px, calc(100% - 20px)); min-height: 110px; z-index: 4; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px 14px; background: linear-gradient(#fffaf0, #f7e8c8); border: 3px solid #6b4422; border-radius: 10px; box-shadow: 0 5px 0 #4a2e16, inset 0 0 0 3px #f2d9a8, 0 14px 30px rgba(0,0,0,.3); opacity: 0; transition: opacity .3s, transform .3s; }
.story.go .st-box { opacity: 1; transform: translate(-50%, 0); }
.st-box.right { flex-direction: row-reverse; text-align: right; }
.st-face { flex: 0 0 64px; height: 72px; background: linear-gradient(#bfe3f5, #e8f4fb); border: 2px solid #8a5a2a; border-radius: 6px; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.st-face svg { width: 52px; height: 60px; shape-rendering: crispEdges; }
.st-txt { flex: 1; min-width: 0; }
.st-name { display: inline-block; font-size: .78rem; font-weight: 900; color: #fff6e0; background: #8a5a2a; padding: 2px 10px; border-radius: 4px; margin-bottom: 6px; letter-spacing: .02em; }
.st-line { margin: 0; font-size: 1rem; line-height: 1.4; color: #3a2a14; min-height: 2.8em; }
.st-more { position: absolute; right: 14px; bottom: 6px; font-style: normal; font-size: 12px; color: #8a5a2a; opacity: 0; }
.st-box.done .st-more { opacity: 1; animation: stMore 1s ease-in-out infinite; }
.st-box.right .st-more { right: auto; left: 14px; }
@keyframes stMore { 50% { transform: translateY(3px); } }
@media (max-width: 560px) { .st-line { font-size: .92rem; } .st-face { flex-basis: 54px; height: 62px; } .st-face svg { width: 44px; height: 52px; } .st-title b { font-size: 1.25rem; } .st-cast { bottom: 22%; } }
@media (max-width: 560px) { .pe-tabs.n6 { grid-template-columns: repeat(3, 1fr); } }
.pf2 .ship-big { max-width: 220px; margin: 0 auto; }
.pf2 .ship-big svg { max-height: 110px; }
.pf2 .ship-all > .hint { font-size: .72rem; margin: 6px 0; }
.st-ship { position: absolute; left: 62%; bottom: 30%; width: min(34vw, 260px); animation: stBob 4s ease-in-out infinite; }
.st-ship svg { width: 100%; height: auto; display: block; shape-rendering: crispEdges; }
@keyframes stBob { 50% { transform: translateY(-4px) rotate(-1deg); } }
.st-post { position: absolute; top: -34px; width: 12px; height: 46px; background: #5a3a1c; border: 2px solid #3a2410; }
.st-post.a { left: 6%; } .st-post.b { right: 6%; }
.st-lamp { position: absolute; top: -60px; right: 6%; width: 16px; height: 20px; margin-right: -4px; background: #ffd34a; border: 2px solid #3a2410; box-shadow: 0 0 18px 6px rgba(255,210,80,.45); }
.st-pot { position: absolute; top: -40px; left: 8%; width: 60px; height: 40px; background: #4a4a52; border: 3px solid #2a2a30; border-radius: 0 0 14px 14px; box-shadow: 0 -10px 0 -4px rgba(255,255,255,.5); }
.st-spr svg { width: min(18vw, 110px); }
@media (max-width: 560px) { .st-cast { bottom: 30%; } .st-ship { bottom: 45%; } }
.st-who.talk::after { content: ''; position: absolute; bottom: -10px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #ffd34a; }
@media (max-width: 560px) {
  .st-ground { height: 36%; } .st-sea { bottom: 36%; height: 14%; } .st-sky { bottom: 50%; }
  .st-cast { bottom: 27%; height: 20%; } .st-ship { bottom: 20%; width: 46vw; left: 50%; }
  .st-spr svg { width: 19vw; }
}
/* Story-Logbuch */
.stb-list { display: grid; gap: 6px; margin: 8px 0; text-align: left; }
.stb-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fffaf0; border: 2px solid #d8c29a; border-radius: 8px; box-shadow: 0 3px 0 #d8c29a; }
button.stb-row { cursor: pointer; } button.stb-row:active { transform: translateY(2px); box-shadow: 0 1px 0 #d8c29a; }
.stb-row span { flex: 1; display: grid; } .stb-row b { font-size: .86rem; } .stb-row small { font-size: .7rem; color: #8a7a62; }
.stb-no { font-style: normal; flex: 0 0 30px; height: 30px; display: grid; place-items: center; font-family: var(--px); font-weight: 700; color: #fff6e0; background: #8a5a2a; border-radius: 6px; box-shadow: 0 2px 0 #5a3a1c; }
.stb-row.next { border-color: #e2b546; background: #fff6dc; } .stb-row.next.ready { box-shadow: 0 0 0 3px rgba(255,211,74,.5), 0 3px 0 #e2b546; }
.stb-row.locked { opacity: .55; }
.stb-go { font-style: normal; color: #8a5a2a; }
/* Kampf-Leiste: fest, klein, immer gleich hoch */
.fbar { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; }
.fbar-seg { display: flex; flex: 1; min-width: 0; padding: 3px; gap: 3px; background: #6b4422; border-radius: 10px; box-shadow: inset 0 2px 0 rgba(0,0,0,.25), 0 2px 0 #3a2410; }
.fbar-sp { flex: 1; min-width: 0; height: 38px; border: 0; border-radius: 7px; cursor: pointer; font-weight: 900; font-size: .8rem; letter-spacing: -2px; color: #f2dcb4; background: transparent; transition: background .15s, color .15s, transform .1s; display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.fbar-sp i { font-style: normal; letter-spacing: 0; font-size: .7rem; }
.fbar-sp.on { color: #4a2e16; background: linear-gradient(#ffe58a, #f0b52a); box-shadow: 0 2px 0 #b8801a; }
.fbar-sp:active { transform: translateY(1px); }
.fbar-skip { flex: 0 0 auto; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border: 2px solid #4a2e16; border-radius: 10px; cursor: pointer; font-weight: 800; font-size: .8rem; color: #fff6e0; background: linear-gradient(#8a5a2a, #6b4422); box-shadow: 0 3px 0 #3a2410; transition: opacity .2s; }
.fbar-skip:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a2410; }
.fbar-skip.off { opacity: .35; cursor: default; filter: grayscale(.6); }
.fbar .fc-sfx { flex: 0 0 44px; width: 44px; height: 44px; }
.fbar-done .fbar-go { flex: 1; min-height: 48px; }
@media (max-width: 420px) { .fbar-skip span { display: none; } .fbar-skip { padding: 0 14px; font-size: 1rem; } }
.dock:has(.fbar) { transition: none; }

/* === Seekarte v2: Schatzkarte auf Pergament, kompakt === */
.sea-chart.v2 { background:
    radial-gradient(circle at 15% 20%, rgba(120,170,200,.25) 0 18%, transparent 19%),
    radial-gradient(circle at 85% 70%, rgba(120,170,200,.22) 0 22%, transparent 23%),
    repeating-linear-gradient(0deg, rgba(110,80,40,.05) 0 2px, transparent 2px 6px),
    linear-gradient(#f6e6c0, #ecd6a4) !important;
  border: 3px solid #8a5a2a !important; border-radius: 10px; box-shadow: inset 0 0 0 3px #f9eccd, inset 0 0 30px rgba(140,100,40,.25), 0 4px 0 #6b4422 !important; }
.sea-chart.v2::after { content: '✦'; position: absolute; right: 10px; bottom: 6px; font-size: 22px; color: rgba(138,90,42,.35); pointer-events: none; }
.sea-chart.v2 .sc-lines .off { stroke: rgba(110,80,40,.12); stroke-dasharray: 2 6; }
.sea-chart.v2 .sc-lines .future { stroke: rgba(110,80,40,.38); stroke-dasharray: 3 6; }
.sea-chart.v2 .sc-lines .can { stroke: #c2412f; stroke-width: 3; stroke-dasharray: 6 6; animation: sc-flow 1.2s linear infinite; }
.sea-chart.v2 .sc-lines .done { stroke: #8a5a2a; stroke-width: 4; stroke-dasharray: none; }
.sea-chart.v2 .sc-start { color: #8a5a2a; font-weight: 800; }
.sea-chart.v2 .sc-stop { background: #fff6dc; color: #6b4a22; border: 1.5px solid #c9a46a; box-shadow: 0 2px 0 #c9a46a; }
.sea-chart.v2 .sc-stop.now { background: #c2412f; color: #fff6e0; border-color: #7a2a1e; box-shadow: 0 2px 0 #7a2a1e; }
.sea-chart.v2 .sc-stop.done { opacity: .6; }
.sea-chart.v2 .map-node { background: #fffaf0 !important; border: 3px solid #8a5a2a !important; box-shadow: 0 3px 0 #6b4422 !important; color: #3a2a14; }
.sea-chart.v2 .map-node.future { background: #f8efdc !important; border-color: #b89a6a !important; box-shadow: 0 2px 0 #b89a6a !important; opacity: .9; }
.sea-chart.v2 .map-node.done { background: #e9d6aa !important; border-color: #8a5a2a !important; opacity: .7; }
.sea-chart.v2 .map-node.can { background: #fff !important; border-color: #c2412f !important; box-shadow: 0 0 0 4px rgba(194,65,47,.18), 0 4px 0 #7a2a1e !important; animation: v2pulse 1.6s ease-in-out infinite !important; }
@keyframes v2pulse { 50% { box-shadow: 0 0 0 7px rgba(194,65,47,.06), 0 4px 0 #7a2a1e; } }
.sea-chart.v2 .map-node.boss { background: #fff1ea !important; border-color: #c2412f !important; }
.sea-chart.v2 .map-node.hunted { background: #fff6dc !important; border-color: #d9a63c !important; }
.sea-chart.v2 .mn-label b { color: #3a2a14; text-shadow: 0 1px 0 #fff6e0, 0 -1px 0 #fff6e0, 1px 0 0 #fff6e0, -1px 0 0 #fff6e0; }
.sea-chart.v2 .mn-label .danger { background: #fff6dc; color: #a8402a; border: 1px solid #e0b8a0; }
.sea-chart.v2 .sc-ship { filter: drop-shadow(0 2px 0 rgba(90,60,30,.35)); }
.sc-past { position: absolute; right: 10px; top: 6px; font-size: .62rem; font-weight: 800; color: rgba(110,80,40,.6); white-space: nowrap; }
@media (max-width: 560px) {
  .sea-chart.v2 .map-node { width: 40px; height: 40px; }
  .sea-chart.v2 .map-node.boss { width: 54px; height: 54px; }
  .sea-chart.v2 .map-node.boss .mn-icon { width: 38px; height: 38px; }
}
/* === Reiseleiste oben im Run === */
.voy { position: relative; display: block; width: 100%; height: 30px; margin: 2px 0 4px; flex: 1 1 100%; }
.vy-rope { position: absolute; left: 0; right: 0; top: 19px; height: 4px; background: repeating-linear-gradient(90deg, #c9a46a 0 6px, #b8905a 6px 8px); border-radius: 2px; box-shadow: 0 1px 0 rgba(90,60,30,.25); }
.vy-fill { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #8a5a2a 0 6px, #6b4422 6px 8px); border-radius: 2px; transition: width .6s ease; }
.vy-m { position: absolute; top: 21px; transform: translate(-50%, -50%); display: block; }
.vy-m.dot { width: 5px; height: 5px; background: #e9d6aa; border: 1px solid #a88050; border-radius: 1px; }
.vy-m.dot.done { background: #8a5a2a; border-color: #5a3a1c; }
.vy-m.isl { width: 12px; height: 9px; background: linear-gradient(#7cba5a 0 45%, #e2c98a 45%); border: 1.5px solid #5a3a1c; border-radius: 6px 6px 3px 3px; }
.vy-m.isl.done { filter: saturate(.6) brightness(.9); }
.vy-m.sea { width: 4px; height: 18px; top: 14px; background: #5a3a1c; border: 0; }
.vy-m.sea::after { content: ''; position: absolute; left: 4px; top: 0; width: 10px; height: 7px; background: #c2412f; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vy-m.sea.done::after { background: #8a5a2a; }
.vy-m.now { box-shadow: 0 0 0 3px rgba(255,211,74,.6); }
.vy-ship { position: absolute; top: -4px; width: 26px; height: 22px; transform: translateX(-50%); transition: left .6s ease; animation: vyBob 2.4s ease-in-out infinite; z-index: 2; filter: drop-shadow(0 2px 0 rgba(90,60,30,.3)); }
.vy-ship svg { width: 100%; height: 100%; display: block; }
@keyframes vyBob { 50% { transform: translateX(-50%) translateY(-2px) rotate(-3deg); } }
.track:has(.voy) { row-gap: 2px; }
@media (min-width: 700px) { .voy { min-width: 420px; } }
/* Story: Effekte */
.st-ctl { position: absolute; top: calc(7vh + 10px); right: 12px; z-index: 5; display: flex; gap: 6px; }
.st-ctl .st-skip { position: static; }
.st-auto { padding: 6px 10px; font-weight: 800; font-size: .74rem; color: #4a2e16; background: linear-gradient(#fff6e0, #f0dcb0); border: 2px solid #8a5a2a; border-radius: 8px; box-shadow: 0 3px 0 #6b4422; cursor: pointer; opacity: .8; }
.st-auto.on { background: linear-gradient(#ffe58a, #f0b52a); opacity: 1; }
.story.go .st-who { animation: stRunIn .55s cubic-bezier(.2,.8,.2,1.2) both; animation-delay: calc(var(--i) * .07s); }
@keyframes stRunIn { from { opacity: 0; transform: translate(calc(-50% + var(--from) * 60vw), 0); } 70% { transform: translate(calc(-50% - var(--from) * 6px), -6px); } }
.st-who.jumpall .st-spr { animation: stJumpAll .5s ease-out; animation-delay: var(--jd, 0s); }
@keyframes stJumpAll { 35% { transform: translateY(-22px); } 70% { transform: translateY(0); } 85% { transform: translateY(-5px); } }
.story.fx-shake .st-cast, .story.fx-shake .st-ground, .story.fx-shake .st-sea { animation: stShake .4s ease-out; }
@keyframes stShake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.story.fx-flash::after { content: ''; position: absolute; inset: 0; background: #fff; z-index: 3; pointer-events: none; animation: stFlash .6s ease-out forwards; }
@keyframes stFlash { from { opacity: .9; } to { opacity: 0; } }
.story.fx-dramatic .st-sky, .story.fx-dramatic .st-sea, .story.fx-dramatic .st-ground { filter: brightness(.55) saturate(.7); transition: filter .25s; }
.story.fx-dramatic .st-who.talk { filter: drop-shadow(0 0 10px #ffd34a); }
.story .st-sky, .story .st-sea, .story .st-ground { transition: filter .4s; }
.story.fx-zoom .st-cast, .story.fx-zoom .st-ground, .story.fx-zoom .st-sea { transform: scale(1.18); transform-origin: var(--zx, 50%) 85%; transition: transform .35s ease-out; }
.story .st-cast, .story .st-ground, .story .st-sea { transition: transform .5s ease-in-out; }
.st-spark { position: absolute; top: 10%; font-style: normal; color: #ffd34a; font-size: 14px; text-shadow: 0 0 4px #fff; pointer-events: none; animation: stSpark 1.1s ease-out forwards; }
@keyframes stSpark { from { opacity: 0; transform: translateY(10px) scale(.4); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(-36px) scale(1.2) rotate(40deg); } }
.story.go .st-who { animation-fill-mode: backwards; }

/* === Neuling & Platzhalter (fork 4) === */
.in-lead { font-size: 1rem; line-height: 1.45; margin: 0 0 10px; }
.in-rows { display: grid; gap: 7px; }
.in-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #fffaf0; border: 2px solid #e2d2b0; border-radius: 8px; box-shadow: 0 2px 0 #e2d2b0; text-align: left; }
.in-ico { flex: 0 0 34px; height: 34px; display: grid; place-items: center; font-style: normal; background: #f6ead0; border: 2px solid #c9a46a; border-radius: 8px; box-shadow: 0 2px 0 #c9a46a; }
.in-ico svg { width: 22px; height: 22px; shape-rendering: crispEdges; }
.in-ico .type { font-size: .55rem; padding: 1px 3px; }
.in-row span { display: grid; min-width: 0; }
.in-row b { font-size: .88rem; color: #3a2a14; }
.in-row small { font-size: .74rem; color: #7a6a52; line-height: 1.3; }
.in-row small .type { font-size: .62rem; }
.in-kbd { margin: 8px 0 0; font-size: .72rem; color: #8a7a62; }
/* Hafen: Sprechblase bleibt im Bild (Crew steht links) */
.ss-mate .ss-say { left: -6px; transform: none; white-space: normal; width: max-content; max-width: min(190px, 52vw); line-height: 1.25; text-align: left; }
.ss-mate .ss-say::after { left: 14px; }
.sea-chart.v2 .mn-label b { white-space: nowrap; font-size: 11px; }
.sea-chart.v2 .mn-label { max-width: none; }
@media (max-width: 560px) { .sea-chart.v2 .sc-stop { max-width: 30%; font-size: .64rem; } }
#crew-label { flex-wrap: wrap !important; row-gap: 6px; }
@media (max-width: 420px) { #crew-label .down-chip.sm { order: 5; } }
.empty-st { display: grid; justify-items: center; gap: 4px; padding: 14px 12px; margin: 6px 0; text-align: center; background: repeating-linear-gradient(135deg, #fffaf0 0 10px, #fbf2de 10px 20px); border: 2px dashed #d8c29a; border-radius: 10px; }
.es-ico { font-style: normal; width: 52px; height: 44px; display: grid; place-items: center; animation: esBob 3s ease-in-out infinite; }
.es-ico svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.es-ico .pxi svg { width: 30px; height: 30px; }
@keyframes esBob { 50% { transform: translateY(-3px) rotate(-2deg); } }
.empty-st b { font-size: .9rem; color: #4a2e16; }
.empty-st small { font-size: .74rem; color: #7a6a52; line-height: 1.35; max-width: 32ch; }
/* Schließen-Knopf überdeckt keine Überschrift */
.fpop-card:has(> .pop-x) > h3, .fpop-card:has(> .pop-x) > .fpop-kicker { padding-left: 34px; padding-right: 34px; }
.fpop-card:has(> .pop-x) > .wk-head { padding-right: 40px; }
/* Werft & Händler als kompakte Kacheln */
.wf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .wf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wf-tile { display: flex; flex-direction: column; gap: 4px; padding: 8px; min-width: 0; background: #fffaf0; border: 2px solid #e2d2b0; border-radius: 10px; box-shadow: 0 3px 0 #e2d2b0; }
.wf-tile.can-buy { border-color: #e2b546; box-shadow: 0 3px 0 #c9982a; }
.wf-tile.maxed { background: #f3ead2; }
.wf-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wf-ico { flex: 0 0 34px; height: 34px; display: grid; place-items: center; font-style: normal; background: #f6ead0; border: 2px solid #c9a46a; border-radius: 8px; box-shadow: 0 2px 0 #c9a46a; }
.wf-ico svg { width: 22px; height: 22px; shape-rendering: crispEdges; }
.wf-name { display: grid; min-width: 0; }
.wf-name b { font-size: .8rem; line-height: 1.15; color: #3a2a14; }
.wf-name .lvpips { margin-top: 2px; }
.wf-own { font-style: normal; font-size: .62rem; font-weight: 800; color: #3f7a4a; }
.wf-now { font-size: .66rem; color: #3f7a4a; line-height: 1.25; }
.wf-next { font-size: .68rem; color: #7a6a52; line-height: 1.3; flex: 1; }
.wf-buy { align-self: stretch; justify-content: center; margin-top: 2px; }
.wf-now em, .wf-next em { font-style: normal; font-weight: 800; margin-right: 2px; }
.wf-now em::after, .wf-next em::after { content: ':'; }
.ss-mate .ss-say { left: 0; }
.sea-chart.v2 .mn-label { max-width: 86px; }
.sea-chart.v2 .mn-label b { white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: manual; font-size: 10.5px; line-height: 1.1; }
.sea-chart.v2 .mn-label .danger { font-size: 9.5px; padding: 0 5px; white-space: nowrap; }
/* Zahlen gut lesbar: klare Schrift mit gleich breiten Ziffern statt Pixel-Schrift (die bleibt für große Titel) */
.num, .sb-c, .sb-more, .sb-plus, .pz-lv, .down-mark b, .down-chip, .goal-left, .spd-x, .h2h-row > em, .pv-vs,
.stv-n b, .stv-bar em, .lvtag, .tv-price, .gold-chip b, .bounty-chip b, .heat-chip, .streak-chip b, .sqd-st, .sqc-ty small, .sqc-d,
.fig-pills, .wf-buy, .buy, .price, .sum-gold, .heat-num, .cg-pow, .dr-pow, .squad-power, .berry, .hq-bar .berry {
  font-family: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif !important; font-variant-numeric: tabular-nums lining-nums;
}
.field[data-speed]::after { font-family: "Fredoka", "Nunito", sans-serif !important; font-variant-numeric: tabular-nums; }
/* Album: deckender Hintergrund auf allen Breiten */
.album { background: linear-gradient(#f7ecd4, #f1e2c2) !important; backdrop-filter: none !important; }
.album-inner { background: #fbf3e2; min-height: 100%; box-shadow: 0 0 0 1px rgba(120,90,50,.12), 0 0 40px rgba(60,40,15,.15); }
/* Statistik: 3D-Kacheln mit Pixel-Bildern */
.stv-grid { gap: 8px !important; }
.stv-n { background: #fffaf0 !important; border: 2px solid #e2d2b0 !important; border-radius: 10px !important; box-shadow: 0 3px 0 #e2d2b0 !important; padding: 10px 6px 8px !important; gap: 2px; }
.stv-ico { width: 30px; height: 30px; display: grid; place-items: center; background: #f6ead0; border: 2px solid #c9a46a; border-radius: 8px; box-shadow: 0 2px 0 #c9a46a; margin-bottom: 2px; }
.stv-ico svg { width: 18px !important; height: 18px !important; shape-rendering: crispEdges; }
.stv-n b { font-size: 1.35rem !important; font-weight: 700 !important; color: #3a2a14; line-height: 1.1; }
.stv-n small { font-size: .68rem !important; }
.stv-h { font-family: var(--px) !important; font-weight: 700 !important; font-size: 1rem !important; margin: 14px 0 6px !important; }
.stv-bar { grid-template-columns: 130px 1fr 64px !important; padding: 5px 8px; background: #fffaf0; border: 1.5px solid #eadcbc; border-radius: 8px; margin-bottom: 4px; }
.stv-bar i { height: 10px !important; border-radius: 5px; overflow: hidden; background: #ead9b6 !important; box-shadow: inset 0 1px 0 rgba(0,0,0,.1); }
.stv-bar i b { border-radius: 5px; }
.stv-bar em { font-size: .9rem !important; font-weight: 700 !important; color: #4a2e16; }
.stv-bar em small { font-size: .72rem; color: #8a7a62; font-weight: 600; }
@media (max-width: 420px) { .stv-bar { grid-template-columns: 100px 1fr 56px !important; font-size: 11.5px; } }
/* Deine Figuren: Karten statt Tabelle */
.fig-sort { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 8px; }
.fig-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .fig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fig-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fffaf0; border: 2px solid #e2d2b0; border-radius: 10px; box-shadow: 0 3px 0 #e2d2b0; min-width: 0; }
.fig-card.t1 { border-color: #e0a818; box-shadow: 0 3px 0 #b8801a; background: linear-gradient(#fffaf0, #fff1cc); }
.fig-card.t2 { border-color: #a8b0b8; box-shadow: 0 3px 0 #7e868e; }
.fig-card.t3 { border-color: #c98a5a; box-shadow: 0 3px 0 #9a6234; }
.fig-medal { position: absolute; top: -8px; left: -6px; width: 22px; height: 22px; display: grid; place-items: center; font: 800 .75rem/1 "Fredoka", sans-serif; color: #fff; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.2); z-index: 2; }
.t1 .fig-medal { background: #e0a818; } .t2 .fig-medal { background: #9aa2aa; } .t3 .fig-medal { background: #c07a48; }
.fig-por { flex: 0 0 46px; height: 52px; display: grid; place-items: center; background: linear-gradient(#bfe3f5, #e8f4fb); border: 2px solid #8a5a2a; border-radius: 8px; overflow: hidden; }
.fig-por svg { width: 38px; height: 44px; shape-rendering: crispEdges; }
.fig-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.fig-body > b { font-size: .86rem; color: #3a2a14; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fig-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.fig-pills em { font-style: normal; display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 3px; font-size: .72rem; font-weight: 700; color: #4a3a22; background: #f6ead0; border: 1px solid #e2cfa6; border-radius: 999px; }
.fig-pills svg { width: 12px; height: 12px; shape-rendering: crispEdges; }
.fig-pills .pxi svg { width: 12px; height: 12px; }
.fig-wr { display: flex; align-items: center; gap: 6px; }
.fig-wr i { flex: 1; height: 6px; background: #ead9b6; border-radius: 3px; overflow: hidden; }
.fig-wr i b { display: block; height: 100%; background: linear-gradient(90deg, #8ac27a, #4f9a5a); }
.fig-wr small { font-size: .66rem; color: #6a7a52; font-weight: 700; white-space: nowrap; }
/* Story-Kulissen */
.st-ground > i { position: absolute; display: block; }
.st-crate { width: 34px; height: 30px; top: -28px; background: repeating-linear-gradient(90deg, #b8864e 0 10px, #a5763f 10px 12px); border: 3px solid #5a3a1c; box-shadow: inset 0 0 0 2px rgba(255,230,180,.2); }
.st-crate.a { left: 14%; } .st-crate.b { left: 14%; top: -54px; width: 26px; height: 24px; margin-left: 4px; }
.st-barrel { width: 26px; height: 32px; top: -30px; right: 18%; background: linear-gradient(90deg, #8a5a2a, #b8864e 50%, #8a5a2a); border: 3px solid #4a2e16; border-radius: 6px; box-shadow: inset 0 8px 0 -5px #4a2e16, inset 0 -8px 0 -5px #4a2e16; }
.st-rope { width: 30px; height: 10px; top: -8px; left: 26%; border: 3px solid #c9a46a; border-radius: 50%; }
.st-mast { width: 14px; height: 140px; top: -138px; left: 8%; background: #6b4422; border: 2px solid #3a2410; }
.st-mast::after { content: ''; position: absolute; left: 12px; top: 10px; width: 60px; height: 70px; background: #fffaf0; border: 2px solid #c9b48c; }
.st-cannon { width: 40px; height: 16px; top: -18px; right: 10%; background: #3a3a42; border: 2px solid #1a1a20; border-radius: 3px 8px 8px 3px; }
.st-palm { top: -150px; width: 10px; height: 150px; background: repeating-linear-gradient(0deg, #9a6a3a 0 10px, #7a5028 10px 12px); border: 2px solid #4a2e16; transform-origin: bottom center; animation: stSway 4s ease-in-out infinite; }
.st-palm.a { left: 6%; } .st-palm.b { right: 8%; height: 120px; top: -118px; animation-delay: -2s; }
.st-palm > i { position: absolute; top: -18px; left: -32px; width: 74px; height: 26px; background: #4f9a4a; border: 2px solid #2e5a2a; border-radius: 50% 50% 20% 20%; box-shadow: -14px 12px 0 -4px #4f9a4a, 14px 12px 0 -4px #4f9a4a; }
@keyframes stSway { 50% { transform: rotate(3deg); } }
.st-shell { width: 12px; height: 9px; top: 30px; background: #f6c6c0; border: 2px solid #c08a80; border-radius: 50% 50% 20% 20%; }
.st-shell.a { left: 30%; } .st-shell.b { left: 72%; top: 46px; background: #fff0c8; border-color: #c8a860; }
.st-crab { width: 22px; height: 12px; top: 20px; left: 50%; background: #e0583c; border: 2px solid #8a2a1a; border-radius: 8px 8px 4px 4px; animation: stCrab 6s ease-in-out infinite; }
.st-crab::before, .st-crab::after { content: ''; position: absolute; top: -6px; width: 6px; height: 6px; background: #e0583c; border: 2px solid #8a2a1a; border-radius: 50%; }
.st-crab::before { left: -6px; } .st-crab::after { right: -6px; }
@keyframes stCrab { 0%, 100% { transform: translateX(-60px); } 50% { transform: translateX(60px); } }
.st-pot.b { left: auto; right: 10%; width: 48px; height: 34px; top: -34px; }
.st-steam { position: absolute; left: 30%; top: -26px; width: 14px; height: 22px; background: radial-gradient(#fff, transparent 70%); opacity: .7; animation: stSteam 2s ease-out infinite; }
@keyframes stSteam { from { transform: translateY(0) scale(.6); opacity: .8; } to { transform: translateY(-24px) scale(1.4); opacity: 0; } }
.st-meat { width: 38px; height: 20px; top: -18px; left: 40%; background: #b0482c; border: 3px solid #5a1e10; border-radius: 50%; }
.st-meat::after { content: ''; position: absolute; right: -14px; top: 3px; width: 14px; height: 6px; background: #fffaf0; border: 2px solid #8a7a62; border-radius: 3px; }
.st-fly { width: 5px; height: 5px; background: #ffe58a; border-radius: 50%; box-shadow: 0 0 8px 3px rgba(255,229,138,.7); top: -60px; animation: stFly 5s ease-in-out infinite; }
.st-fly.a { left: 20%; } .st-fly.b { left: 45%; animation-delay: -1.5s; top: -90px; } .st-fly.c { left: 70%; animation-delay: -3s; } .st-fly.d { left: 85%; animation-delay: -4s; top: -110px; }
@keyframes stFly { 0%, 100% { transform: translate(0, 0); opacity: .3; } 25% { transform: translate(14px, -10px); opacity: 1; } 50% { transform: translate(-6px, -22px); opacity: .5; } 75% { transform: translate(-16px, -6px); opacity: 1; } }
.st-bird { position: absolute; top: 20%; z-index: 1; width: 14px; height: 6px; border-top: 3px solid #4a4a52; border-radius: 50% 50% 0 0; animation: stBird 14s linear infinite; }
.st-bird::after { content: ''; position: absolute; left: 12px; top: -3px; width: 14px; height: 6px; border-top: 3px solid #4a4a52; border-radius: 50% 50% 0 0; }
.st-bird.a { left: -40px; } .st-bird.b { left: -40px; top: 28%; animation-delay: -7s; animation-duration: 18s; transform: scale(.7); }
@keyframes stBird { to { left: 110%; } }
.bg-kueche .st-bird, .bg-nacht .st-bird { display: none; }
.st-who.flip .st-spr { animation: stFlip 1.2s ease-in-out; }
@keyframes stFlip { 0%, 100% { transform: scaleX(1); } 30%, 70% { transform: scaleX(-1); } }
.st-who.hop2 .st-spr { animation: stHop2 .6s ease-out; }
@keyframes stHop2 { 40% { transform: translateY(-10px); } 70% { transform: translateY(0); } 85% { transform: translateY(-3px); } }
@media (max-width: 560px) { .st-palm { height: 110px; top: -108px; } .st-palm.b { height: 90px; top: -88px; } .st-mast { height: 100px; top: -98px; } .st-mast::after { width: 44px; height: 50px; } }

/* === Neuigkeiten-Karussell === */
.news-pop { width: min(440px, 100%); padding: 14px 0 12px !important; overflow: hidden !important; max-height: none !important; }
.nw-top { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 6px; }
.nw-skip { border: 0; background: none; font-weight: 800; font-size: .76rem; color: #8a6a3a; cursor: pointer; }
.nw-track { display: flex; width: 100%; transform: translateX(calc(var(--i) * -100%)); transition: transform .45s cubic-bezier(.2,.8,.2,1); touch-action: pan-y; }
.nw-slide { flex: 0 0 100%; box-sizing: border-box; padding: 4px 22px 6px; display: grid; justify-items: center; text-align: center; gap: 4px; opacity: .35; transition: opacity .35s; user-select: none; }
.nw-slide.on { opacity: 1; }
.nw-art { position: relative; width: 100%; height: 150px; display: grid; place-items: center; border-radius: 12px; border: 3px solid #8a5a2a; box-shadow: inset 0 -6px 0 rgba(0,0,0,.12), 0 4px 0 #6b4422; overflow: hidden; margin-bottom: 8px; }
.nw-art svg { width: 84px; height: 98px; shape-rendering: crispEdges; filter: drop-shadow(0 4px 0 rgba(0,0,0,.2)); }
.nw-slide.on .nw-art > svg, .nw-slide.on .nw-art > .nw-emoji, .nw-slide.on .nw-art > *:not(.nw-sparkle) { animation: nwPop .6s cubic-bezier(.2,.8,.2,1.4) both, nwBob 2.6s ease-in-out .6s infinite; }
@keyframes nwPop { from { transform: scale(.5) translateY(20px); opacity: 0; } }
@keyframes nwBob { 50% { transform: translateY(-5px); } }
.nw-emoji { font-size: 64px; line-height: 1; filter: drop-shadow(0 4px 0 rgba(0,0,0,.18)); }
.nw-art.tone-gold { background: radial-gradient(circle at 50% 60%, #fff6c8, #f2cf6a 70%, #d9a63c); }
.nw-art.tone-sea { background: linear-gradient(#9fd2ee 0 55%, #4f9cc8 55% 80%, #e9d39a 80%); }
.nw-art.tone-warm { background: radial-gradient(circle at 50% 70%, #ffe8c8, #f2b98a 75%); }
.nw-art.tone-wood { background: repeating-linear-gradient(90deg, #b8864e 0 40px, #a5763f 40px 42px); }
.nw-art.tone-night { background: radial-gradient(circle at 70% 25%, #fff8de 0 6%, transparent 7%), linear-gradient(#1c2a4e, #4a5a8a); }
.nw-art.tone-map { background: radial-gradient(circle at 20% 30%, rgba(120,170,200,.35) 0 20%, transparent 21%), linear-gradient(#f6e6c0, #e6cc94); }
.nw-sparkle { position: absolute; color: #fff6c8; font-size: 16px; text-shadow: 0 0 6px #fff; animation: nwTw 2.2s ease-in-out infinite; }
.nw-sparkle.a { top: 14%; left: 18%; } .nw-sparkle.b { bottom: 20%; right: 16%; animation-delay: -1.1s; }
@keyframes nwTw { 50% { opacity: .2; transform: scale(.6) rotate(30deg); } }
.nw-kick { font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #fff6e0; background: #c2412f; padding: 2px 10px; border-radius: 999px; }
.nw-slide h3 { margin: 4px 0 0; font-size: 1.2rem; color: #3a2208; }
.nw-slide p { margin: 2px 0 0; font-size: .9rem; line-height: 1.45; color: #5a4320; max-width: 34ch; }
.nw-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 0; }
.nw-arrow { width: 42px; height: 42px; border: 2px solid #8a5a2a; border-radius: 10px; background: linear-gradient(#fff6e0, #f0dcb0); box-shadow: 0 3px 0 #6b4422; font-size: 22px; font-weight: 900; color: #6b4422; cursor: pointer; line-height: 1; }
.nw-arrow.next { background: linear-gradient(#ffe58a, #f0b52a); }
.nw-arrow:disabled { opacity: .3; cursor: default; }
.nw-arrow:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #6b4422; }
.nw-dots { display: flex; gap: 6px; }
.nw-dot { width: 9px; height: 9px; padding: 0; border: 2px solid #8a5a2a; border-radius: 3px; background: #f2dcb4; cursor: pointer; transition: width .25s, background .25s; }
.nw-dot.on { width: 22px; background: #c2412f; border-color: #7a2a1e; }
.nw-opts { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.nw-opt { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 2px solid #c9a46a; border-radius: 10px; background: #fffaf0; box-shadow: 0 3px 0 #c9a46a; cursor: pointer; }
.nw-opt b { font-size: .92rem; color: #3a2208; } .nw-opt small { font-size: .72rem; color: #7a6a52; line-height: 1.3; }
.nw-opt.main { background: linear-gradient(#ffe58a, #f0c040); border-color: #8a5a10; box-shadow: 0 3px 0 #8a5a10; }
.nw-opt.danger { border-style: dashed; }
.nw-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9a46a; }
.nw-choice .nw-art { height: 96px; }
.nw-slide { min-width: 0; max-width: 100%; }
.nw-opt { min-width: 0; box-sizing: border-box; width: 100%; }
.nw-opt small { white-space: normal; }
.nw-kick { display: inline-block; line-height: 1.6; }

/* === Kampfszene neu (fork 5) === */
.field.v3 { background: #9fd2ee !important; overflow: hidden; cursor: pointer; border: 3px solid #6b4422 !important; border-radius: 10px !important; box-shadow: 0 4px 0 #4a2e16, inset 0 0 0 2px rgba(255,240,210,.35) !important; image-rendering: pixelated; }
.field.v3 .f-sky, .field.v3 .f-sun, .field.v3 .f-clouds, .field.v3 .f-horizon, .field.v3 .f-floor, .field.v3 .plat, .field.v3 .f-dust { display: none !important; }
.field.v3 .b3 { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.field.v3 .b3 > i, .field.v3 .b3-props { position: absolute; display: block; }
.field.v3 .b3-sky { inset: 0; background: linear-gradient(#7ec0ea, #bfe3f5 62%, #f6e8c8); }
.field.v3 .b3-sun { top: 9%; right: 12%; width: 30px; height: 30px; background: #fff3b0; box-shadow: 0 0 0 5px rgba(255,243,176,.35), 0 0 26px 6px rgba(255,236,150,.45); }
.field.v3 .b3-cloud { height: 10px; width: 54px; background: #fffaf0; box-shadow: 12px -7px 0 #fffaf0, 26px -3px 0 #fffaf0; opacity: .92; animation: b3Cloud 46s linear infinite; }
.field.v3 .b3-cloud.c1 { top: 14%; left: -80px; } .field.v3 .b3-cloud.c2 { top: 26%; left: -80px; animation-delay: -18s; animation-duration: 60s; transform: scale(.7); } .field.v3 .b3-cloud.c3 { top: 8%; left: -80px; animation-delay: -34s; transform: scale(.55); }
@keyframes b3Cloud { to { left: 110%; } }
.field.v3 .b3-sea { left: 0; right: 0; bottom: 42%; height: 16%; background: linear-gradient(#5aa8d6, #3a7cae); overflow: hidden; }
.field.v3 .b3-sea > i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 14px, transparent 14px 46px) 0 30% / 120px 3px repeat-x, repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 10px, transparent 10px 38px) 20px 72% / 96px 3px repeat-x; animation: b3Wave 6s linear infinite; }
@keyframes b3Wave { to { background-position: 120px 30%, 116px 72%; } }
.field.v3 .b3-ground { left: 0; right: 0; bottom: 0; height: 44%; border-top: 4px solid rgba(0,0,0,.18); }
.field.v3 .b3-props { inset: 0; }
.field.v3 .b3-props > i, .field.v3 .b3-props > i > i { position: absolute; display: block; }
/* Requisiten-Grundformen */
.field.v3 .p3 { z-index: 1; }
.field.v3 .p3.l { left: 3%; bottom: 40%; } .field.v3 .p3.r { right: 3%; bottom: 40%; } .field.v3 .p3.r2 { right: 12%; bottom: 40%; } .field.v3 .p3.l2 { left: 12%; bottom: 40%; } .field.v3 .p3.m { left: 48%; bottom: 41%; } .field.v3 .p3.bg { left: 40%; bottom: 52%; z-index: 0; }
.field.v3 .p3.palm { width: 8px; height: 76px; background: repeating-linear-gradient(0deg, #9a6a3a 0 8px, #7a5028 8px 10px); border: 2px solid #4a2e16; transform-origin: bottom center; animation: b3Sway 4s ease-in-out infinite; }
.field.v3 .p3.palm > i { top: -14px; left: -26px; width: 60px; height: 20px; background: #4f9a4a; border: 2px solid #2e5a2a; border-radius: 50% 50% 20% 20%; box-shadow: -10px 9px 0 -4px #4f9a4a, 10px 9px 0 -4px #4f9a4a; }
.field.v3 .p3.palm.r { animation-delay: -2s; height: 62px; }
@keyframes b3Sway { 50% { transform: rotate(3deg); } }
.field.v3 .p3.shell { width: 10px; height: 7px; background: #f6c6c0; border: 2px solid #c08a80; border-radius: 50% 50% 20% 20%; bottom: 14%; }
.field.v3 .p3.shell.s1 { left: 49%; } .field.v3 .p3.shell.s2 { left: 30%; bottom: 30%; background: #fff0c8; border-color: #c8a860; }
.field.v3 .p3.rock { width: 28px; height: 16px; background: #8a8a92; border: 2px solid #4a4a52; border-radius: 40% 50% 10% 10%; box-shadow: inset -4px -3px 0 rgba(0,0,0,.2); }
.field.v3 .p3.house { bottom: 44%; width: 42px; height: 30px; background: #e9d8b4; border: 2px solid #6b4422; z-index: 0; }
.field.v3 .p3.house::before { content: ''; position: absolute; left: -6px; right: -6px; top: -16px; height: 16px; background: #c2412f; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.field.v3 .p3.house::after { content: ''; position: absolute; left: 14px; bottom: 0; width: 10px; height: 14px; background: #6b4422; }
.field.v3 .p3.house.a { left: 6%; } .field.v3 .p3.house.b { left: 72%; width: 52px; height: 36px; background: #d8e2ea; }
.field.v3 .p3.lamp { width: 6px; height: 54px; background: #3a3a42; } .field.v3 .p3.lamp::after { content: ''; position: absolute; left: -5px; top: -12px; width: 14px; height: 14px; background: #ffd34a; border: 2px solid #3a3a42; box-shadow: 0 0 12px 4px rgba(255,210,80,.4); }
.field.v3 .p3.barrel { width: 22px; height: 28px; background: linear-gradient(90deg, #8a5a2a, #b8864e 50%, #8a5a2a); border: 2px solid #4a2e16; border-radius: 5px; box-shadow: inset 0 7px 0 -5px #4a2e16, inset 0 -7px 0 -5px #4a2e16; }
.field.v3 .p3.crate { width: 26px; height: 24px; background: repeating-linear-gradient(90deg, #b8864e 0 8px, #a5763f 8px 10px); border: 2px solid #5a3a1c; }
.field.v3 .p3.mast { left: 46%; bottom: 40%; width: 10px; height: 120px; background: #6b4422; border: 2px solid #3a2410; z-index: 0; }
.field.v3 .p3.mast > i { left: 10px; top: 8px; width: 46px; height: 52px; background: #fffaf0; border: 2px solid #c9b48c; }
.field.v3 .p3.cannon { width: 34px; height: 13px; background: #3a3a42; border: 2px solid #1a1a20; border-radius: 3px 7px 7px 3px; }
.field.v3 .p3.ring { width: 22px; height: 22px; border: 5px solid #f2f2f2; border-radius: 50%; box-shadow: inset 0 0 0 2px #c2412f, 0 0 0 1px #8a2a1e; }
.field.v3 .p3.post { width: 10px; height: 38px; background: #5a3a1c; border: 2px solid #3a2410; }
.field.v3 .p3.rope { width: 24px; height: 9px; border: 3px solid #c9a46a; border-radius: 50%; }
.field.v3 .p3.fern { width: 44px; height: 30px; background: #3f7a3a; border: 2px solid #234a20; border-radius: 50% 50% 10% 10%; box-shadow: 14px -10px 0 -6px #4f9a4a; }
.field.v3 .p3.tree { width: 14px; height: 70px; background: #6b4422; border: 2px solid #3a2410; }
.field.v3 .p3.tree::after { content: ''; position: absolute; left: -24px; top: -30px; width: 58px; height: 42px; background: #4f9a4a; border: 2px solid #2e5a2a; border-radius: 50%; }
.field.v3 .p3.bone { width: 34px; height: 8px; background: #f0ead8; border: 2px solid #a89a7e; border-radius: 4px; bottom: 26%; }
.field.v3 .p3.pine { width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 46px solid #3a6a4a; filter: drop-shadow(0 -10px 0 #e8f2f8); }
.field.v3 .p3.pine.bg { left: 60%; transform: scale(1.4); }
.field.v3 .p3.pyramid { width: 0; height: 0; border-left: 46px solid transparent; border-right: 46px solid transparent; border-bottom: 46px solid #d9b46a; filter: drop-shadow(-6px 0 0 #c49a50); }
.field.v3 .p3.cactus { width: 10px; height: 36px; background: #5a9a4a; border: 2px solid #2e5a2a; border-radius: 5px 5px 0 0; }
.field.v3 .p3.cactus::before { content: ''; position: absolute; left: -10px; top: 10px; width: 8px; height: 14px; background: #5a9a4a; border: 2px solid #2e5a2a; border-radius: 4px 4px 0 0; }
.field.v3 .p3.puff { width: 58px; height: 22px; background: #fffaf0; border: 2px solid #d8dee8; border-radius: 12px; box-shadow: 14px -10px 0 -2px #fffaf0; }
.field.v3 .p3.bell { width: 26px; height: 26px; background: #f2c94c; border: 3px solid #a8801a; border-radius: 12px 12px 4px 4px; box-shadow: 0 0 14px rgba(255,220,100,.6); animation: b3Sway 3s ease-in-out infinite; }
.field.v3 .p3.fence { width: 60px; height: 18px; background: repeating-linear-gradient(90deg, #c9a46a 0 5px, transparent 5px 14px), linear-gradient(transparent 5px, #c9a46a 5px 8px, transparent 8px); }
.field.v3 .p3.flower { width: 6px; height: 6px; background: #f6c6e0; border: 2px solid #c06090; border-radius: 50%; bottom: 20%; }
.field.v3 .p3.flower.f1 { left: 22%; } .field.v3 .p3.flower.f2 { left: 52%; bottom: 30%; background: #fff3a0; border-color: #c8a020; } .field.v3 .p3.flower.f3 { left: 80%; bottom: 16%; }
.field.v3 .p3.tower { width: 40px; height: 76px; background: #4a5266; border: 2px solid #2a2f3c; z-index: 0; }
.field.v3 .p3.tower::before { content: ''; position: absolute; left: -4px; right: -4px; top: -10px; height: 10px; background: repeating-linear-gradient(90deg, #4a5266 0 8px, transparent 8px 12px); }
.field.v3 .p3.torch { width: 6px; height: 34px; background: #5a3a1c; }
.field.v3 .p3.torch::after { content: ''; position: absolute; left: -5px; top: -14px; width: 14px; height: 16px; background: #ff8a3a; border-radius: 50% 50% 30% 30%; box-shadow: 0 0 14px 5px rgba(255,140,60,.55); animation: b3Flame .5s steps(2) infinite; }
@keyframes b3Flame { 50% { transform: scaleY(.8) translateY(2px); } }
.field.v3 .p3.banner { width: 4px; height: 52px; background: #3a2410; }
.field.v3 .p3.banner::after { content: ''; position: absolute; left: 4px; top: 2px; width: 22px; height: 26px; background: #c2412f; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.field.v3 .p3.coral { width: 30px; height: 34px; background: #e0705f; border: 2px solid #8a2a1e; border-radius: 10px 10px 2px 2px; box-shadow: -12px 8px 0 -6px #e0705f, 12px 4px 0 -6px #f0a080; }
.field.v3 .p3.kelp { width: 6px; height: 64px; background: #3f8a5a; border-radius: 3px; animation: b3Sway 3s ease-in-out infinite; }
.field.v3 .p3.tomb { width: 22px; height: 28px; background: #8a8a96; border: 2px solid #4a4a56; border-radius: 10px 10px 2px 2px; }
.field.v3 .p3.tomb::after { content: '+'; position: absolute; left: 6px; top: 1px; font: 900 12px/1 monospace; color: #4a4a56; }
.field.v3 .p3.deadtree { width: 10px; height: 70px; background: #3a2a2a; box-shadow: 10px -26px 0 -2px #3a2a2a, -10px -36px 0 -3px #3a2a2a; }
.field.v3 .snowfall, .field.v3 .bubbles, .field.v3 .fog { position: absolute; inset: 0; z-index: 2; }
.field.v3 .snowfall { background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(2px 2px at 40% 10%, #fff, transparent), radial-gradient(2px 2px at 70% 30%, #fff, transparent), radial-gradient(2px 2px at 85% 5%, #fff, transparent), radial-gradient(2px 2px at 25% 50%, #fff, transparent), radial-gradient(2px 2px at 60% 60%, #fff, transparent); background-size: 100% 100%; animation: b3Snow 5s linear infinite; }
@keyframes b3Snow { from { background-position: 0 -100px; } to { background-position: 30px 300px; } }
.field.v3 .bubbles { background-image: radial-gradient(circle 3px at 15% 80%, rgba(255,255,255,.7) 60%, transparent 70%), radial-gradient(circle 4px at 55% 70%, rgba(255,255,255,.6) 60%, transparent 70%), radial-gradient(circle 2px at 82% 85%, rgba(255,255,255,.7) 60%, transparent 70%); animation: b3Bub 4s linear infinite; }
@keyframes b3Bub { to { background-position: 0 -260px; } }
.field.v3 .fog { background: linear-gradient(transparent 50%, rgba(200,190,230,.25) 70%, transparent 90%); animation: b3Fog 8s ease-in-out infinite; }
@keyframes b3Fog { 50% { transform: translateX(-20px); opacity: .6; } }
/* Kulissen: Himmel, Meer, Boden */
.field.v3.th-beach .b3-ground { background: repeating-linear-gradient(170deg, rgba(255,255,255,.12) 0 3px, transparent 3px 26px), linear-gradient(#ecd59c, #d9bd7c); border-top-color: #c2a060; }
.field.v3.th-town .b3-ground { background: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 24px), repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 2px, transparent 2px 14px), linear-gradient(#cfc3aa, #b8a888); border-top-color: #8a7a5a; }
.field.v3.th-town .b3-sea { display: none; }
.field.v3.th-deck .b3-ground, .field.v3.th-pier .b3-ground { background: repeating-linear-gradient(90deg, #b58049 0 36px, #a26f3d 36px 38px); border-top-color: #6b4422; }
.field.v3.th-pier .b3-ground { height: 36%; } .field.v3.th-pier .b3-sea { bottom: 30%; height: 26%; }
.field.v3.th-jungle .b3-sky { background: linear-gradient(#8ec8a8, #cfe8c0 70%, #e8f0c8); }
.field.v3.th-jungle .b3-sea { background: #3f7a4a; } .field.v3.th-jungle .b3-sea > i { display: none; }
.field.v3.th-jungle .b3-ground { background: repeating-linear-gradient(80deg, rgba(40,90,40,.25) 0 3px, transparent 3px 18px), linear-gradient(#6aa85a, #4f8a42); border-top-color: #2e5a2a; }
.field.v3.th-snow .b3-sky { background: linear-gradient(#a8c8e0, #dfeaf2 70%, #f4f8fb); } .field.v3.th-snow .b3-sun { background: #fff; opacity: .7; }
.field.v3.th-snow .b3-sea { background: linear-gradient(#c8d8e6, #9fb6cc); clip-path: polygon(0 100%, 0 40%, 14% 10%, 26% 50%, 40% 0, 58% 55%, 72% 20%, 86% 60%, 100% 30%, 100% 100%); } .field.v3.th-snow .b3-sea > i { display: none; }
.field.v3.th-snow .b3-ground { background: repeating-linear-gradient(175deg, rgba(160,190,220,.25) 0 3px, transparent 3px 30px), linear-gradient(#f4f8fb, #dbe6ef); border-top-color: #b8c8d8; }
.field.v3.th-desert .b3-sky { background: linear-gradient(#f2b46a, #f8d49a 60%, #fae8c0); } .field.v3.th-desert .b3-sun { background: #fff0a0; width: 40px; height: 40px; box-shadow: 0 0 40px 14px rgba(255,200,80,.55); }
.field.v3.th-desert .b3-sea { background: #e2bf7a; clip-path: polygon(0 100%, 0 60%, 20% 30%, 40% 55%, 62% 25%, 82% 50%, 100% 35%, 100% 100%); } .field.v3.th-desert .b3-sea > i { display: none; }
.field.v3.th-desert .b3-ground { background: repeating-linear-gradient(172deg, rgba(180,120,60,.18) 0 4px, transparent 4px 28px), linear-gradient(#ebc884, #d6a85c); border-top-color: #b88a40; }
.field.v3.th-desert .b3-cloud { display: none; }
.field.v3.th-sky .b3-sky { background: linear-gradient(#bfe0ff, #eaf4ff 70%, #fff); }
.field.v3.th-sky .b3-sea { background: #fffaf0; border-radius: 40px 40px 0 0; } .field.v3.th-sky .b3-sea > i { display: none; }
.field.v3.th-sky .b3-ground { background: radial-gradient(circle 22px at 10% 0, #fff 98%, transparent), radial-gradient(circle 26px at 35% 4%, #fff 98%, transparent), radial-gradient(circle 20px at 62% 0, #fff 98%, transparent), radial-gradient(circle 28px at 88% 6%, #fff 98%, transparent), linear-gradient(#fbfdff, #e4eef8); border-top: 0; }
.field.v3.th-meadow .b3-ground { background: repeating-linear-gradient(80deg, rgba(40,110,40,.18) 0 3px, transparent 3px 16px), linear-gradient(#9ad07e, #78b860); border-top-color: #4f8a42; }
.field.v3.th-fort .b3-sky { background: linear-gradient(#3a4a6a, #7a8aa8 70%, #b8b0c0); } .field.v3.th-fort .b3-sun { background: #f6f2e4; width: 22px; height: 22px; box-shadow: 0 0 16px 4px rgba(240,235,210,.3); }
.field.v3.th-fort .b3-sea { background: linear-gradient(#3a5070, #24344c); }
.field.v3.th-fort .b3-ground { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 30px), repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 2px, transparent 2px 16px), linear-gradient(#6a7286, #4a5266); border-top-color: #2a2f3c; }
.field.v3.th-fort .b3-cloud { opacity: .35; }
.field.v3.th-deep .b3-sky { background: linear-gradient(#2a6a8a, #3a8aa8 60%, #5aa8b8); } .field.v3.th-deep .b3-sun { background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%); box-shadow: none; width: 80px; height: 80px; }
.field.v3.th-deep .b3-cloud { display: none; } .field.v3.th-deep .b3-sea { background: rgba(255,255,255,.08); }
.field.v3.th-deep .b3-ground { background: repeating-linear-gradient(170deg, rgba(255,255,255,.1) 0 3px, transparent 3px 22px), linear-gradient(#d8c89a, #b8a878); border-top-color: #8a7a5a; }
.field.v3.th-grave .b3-sky { background: linear-gradient(#1c1430, #3a2a5a 70%, #5a4a7a); } .field.v3.th-grave .b3-sun { background: #e8e0f8; width: 26px; height: 26px; box-shadow: 0 0 22px 6px rgba(220,210,250,.35); }
.field.v3.th-grave .b3-cloud { opacity: .25; } .field.v3.th-grave .b3-sea { background: linear-gradient(#2a2440, #1a1630); }
.field.v3.th-grave .b3-ground { background: repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0 2px, transparent 2px 20px), linear-gradient(#4a4a5a, #34343f); border-top-color: #22222a; }
/* Boss und Raid: dramatischer */
.field.v3.bossfight .b3-sky { filter: saturate(1.2) hue-rotate(-14deg) brightness(.92); }
.field.v3.bossfight::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 75% 40%, transparent 40%, rgba(160,30,20,.22) 100%); }
.field.v3.raid .b3-sky { background: linear-gradient(#12061f, #3a1a5a 70%, #6a3a8a) !important; } .field.v3.raid .b3-sun { background: #f6f2e4; width: 22px; height: 22px; }
.field.v3.raid .b3-ground { filter: brightness(.6) saturate(.7) hue-rotate(240deg); }
.field.v3 .b3-flag { right: 4%; bottom: 44%; width: 4px; height: 70px; background: #2a1a10; z-index: 1; }
.field.v3 .b3-flag::after { content: ''; position: absolute; left: 4px; top: 2px; width: 34px; height: 22px; background: #c2412f; border: 2px solid #7a2a1e; animation: b3Flag 1.2s steps(2) infinite; }
@keyframes b3Flag { 50% { transform: skewY(-6deg); } }
/* Figuren: gemeinsame Bodenlinie, klare Pixel-Schatten statt Ellipsen */
.field.v3 .fu-shadow { display: block !important; width: 44px !important; height: 7px !important; bottom: -3px !important; background: rgba(40,25,10,.38) !important; border-radius: 50% !important; filter: none !important; box-shadow: none !important; animation: none !important; }
.field.v3 .fu.boss .fu-shadow { width: 66px !important; height: 9px !important; background: rgba(120,20,10,.45) !important; }
.field.v3 .fu-body svg { image-rendering: pixelated; }
.field.v3 .fu.ko { opacity: 1 !important; }
.field.v3 .fu.ko .fu-body { transform: translate(14px, 30px) rotate(90deg); filter: grayscale(.85) brightness(.85); transition: transform .35s steps(3); }
.field.v3 .fu-enemy.ko .fu-body { transform: translate(-14px, 30px) rotate(-90deg); }
.field.v3 .fu.ko .fu-body svg { animation: none !important; transform: none !important; }
.field.v3 .fu-enemy.ko .fu-body svg { transform: scaleX(-1) !important; }
.field.v3 .fu.ko .fu-shadow { width: 70px !important; }
.field.v3 .fu-ko { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 4; padding: 0 5px; font: 800 10px/1.5 system-ui, sans-serif; color: #fff6e0; background: #5a4a4a; border: 2px solid #2a1a1a; letter-spacing: .04em; }
@media (max-width: 560px) {
  .field.v3 .p3.palm { height: 54px; } .field.v3 .p3.palm > i { width: 46px; left: -20px; }
  .field.v3 .p3.house { transform: scale(.75); transform-origin: bottom left; } .field.v3 .p3.mast { height: 84px; }
  .field.v3 .p3.tower { transform: scale(.75); transform-origin: bottom center; } .field.v3 .p3.r2, .field.v3 .p3.l2 { display: none; }
  .field.v3 .fu-shadow { width: 34px !important; }
  .field.v3 .fu.ko .fu-body { transform: translate(10px, 22px) rotate(90deg); } .field.v3 .fu-enemy.ko .fu-body { transform: translate(-10px, 22px) rotate(-90deg); }
}
/* Daumen-Leiste: links Tempo, rechts großer Knopf, immer gleich groß */
.fbar.fbar3 { display: flex; align-items: center; gap: 8px; min-height: 56px; }
.fbar3 .fbar-seg { flex: 1 1 auto; max-width: 230px; }
.fbar3 .fbar-sp { height: 36px; }
.fbar3 .fbar-sp:disabled { opacity: .35; cursor: default; }
.fbar3 .fc-sfx { flex: 0 0 40px; width: 40px; height: 40px; }
.fbar-ff { margin-left: auto; flex: 0 0 132px; height: 54px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 0 12px; text-align: left; border: 2px solid #4a2e16; border-radius: 12px; cursor: pointer; color: #fff6e0; background: linear-gradient(#8a5a2a, #6b4422); box-shadow: 0 4px 0 #3a2410; transition: background .2s, transform .1s; }
.fbar-ff b { grid-column: 1; font-size: .98rem; line-height: 1.05; }
.fbar-ff small { grid-column: 1; font-size: .62rem; opacity: .8; font-weight: 700; }
.fbar-ff small .key { display: none; }
.fbar-ff .ff-ico { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 1.5rem; line-height: 1; }
.fbar-ff.end { background: linear-gradient(#e0705f, #c2412f); border-color: #7a2a1e; box-shadow: 0 4px 0 #5a1e14; }
.fbar-ff.end.wait { opacity: .6; }
.fbar-ff.go { background: linear-gradient(#ffe58a, #f0b52a); color: #3a2208; border-color: #8a5a10; box-shadow: 0 4px 0 #6b4210; }
.fbar-ff:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a2410; }
.fbar-ff.nudge { animation: ffNudge .3s; }
@keyframes ffNudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.fbar3.is-done .fbar-seg { opacity: .45; }
@media (max-width: 420px) { .fbar3 .fbar-seg { max-width: none; } .fbar-ff { flex-basis: 118px; } .fbar3 .fc-sfx { display: none; } }
/* Amboss-Karten passen immer in die Breite */
.fk-fu-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }
.fk-fu { flex-wrap: wrap; min-width: 0; }
.fk-fu-go { margin-left: auto !important; }

/* Neuigkeiten als Zeitleiste */
.nt2 { width: min(520px, 100%); text-align: left; }
.nt2 h3, .nt2 .fpop-kicker { text-align: center; display: block; }
.nt-replay { display: block; margin: 4px auto 10px; padding: 7px 14px; font-weight: 800; font-size: .8rem; color: #4a2e16; background: linear-gradient(#ffe58a, #f0b52a); border: 2px solid #8a5a10; border-radius: 999px; box-shadow: 0 3px 0 #8a5a10; cursor: pointer; }
.nt-replay:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a5a10; }
.nt-time { position: relative; display: grid; gap: 8px; padding-left: 16px; }
.nt-time::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px; background: repeating-linear-gradient(#c9a46a 0 6px, transparent 6px 10px); }
.nt-up { position: relative; background: #fffaf0; border: 2px solid #d8c29a; border-radius: 8px; box-shadow: 0 3px 0 #d8c29a; }
.nt-up.latest { border-color: #e0a818; box-shadow: 0 3px 0 #b8801a, 0 0 0 3px rgba(255,211,74,.25); }
.nt-up summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
.nt-up summary::-webkit-details-marker { display: none; }
.nt-pin { position: absolute; left: -15px; top: 13px; width: 11px; height: 11px; background: #c9a46a; border: 2px solid #8a5a2a; border-radius: 3px; }
.nt-up.latest .nt-pin { background: #c2412f; border-color: #7a2a1e; }
.nt-h { flex: 1; display: grid; min-width: 0; }
.nt-h b { font-size: .9rem; color: #3a2208; }
.nt-h small { font-size: .68rem; color: #8a7a62; }
.nt-h em { font-style: normal; color: #c2412f; font-weight: 800; }
.nt-chev { font-style: normal; color: #8a5a2a; transition: transform .2s; }
.nt-up[open] .nt-chev { transform: rotate(180deg); }
.nt-up ul { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 6px; }
.nt-up li { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; line-height: 1.4; color: #4a3a22; }
.nt-ico { flex: 0 0 24px; height: 24px; display: grid; place-items: center; font-style: normal; font-size: 13px; background: #f6ead0; border: 1.5px solid #d8c29a; border-radius: 6px; }
.nt2 .notes-list { display: none; }
/* Neuigkeiten: kleine Bühnen */
.news-pop { background: linear-gradient(#fffaf0, #f6e8c8) !important; border: 3px solid #8a5a2a !important; box-shadow: 0 6px 0 #5a3a1c, 0 20px 50px rgba(40,20,10,.35) !important; }
.nw-art { height: 170px; align-items: end; padding-bottom: 14px; box-sizing: border-box; }
.nw-ship { position: absolute; left: 50%; top: 18%; width: 46%; transform: translateX(-50%); opacity: .9; animation: nwShip 4s ease-in-out infinite; }
.nw-ship svg { width: 100% !important; height: auto !important; filter: none !important; }
@keyframes nwShip { 50% { transform: translateX(-50%) translateY(-4px) rotate(-1.5deg); } }
.nw-cast { position: relative; z-index: 2; display: flex; gap: 10px; align-items: flex-end; }
.nw-c { position: relative; display: block; animation: nwHop 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * .3s); }
.nw-c svg { width: 64px !important; height: 74px !important; }
.nw-c.big svg { width: 92px !important; height: 106px !important; }
.nw-c::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: -4px; height: 5px; background: rgba(0,0,0,.2); border-radius: 50%; }
@keyframes nwHop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-8px); } 90% { transform: translateY(0); } }
.nw-st { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .7rem; color: #ffd34a; text-shadow: 0 1px 0 #6b4422, 0 -1px 0 #6b4422, 1px 0 0 #6b4422, -1px 0 0 #6b4422; white-space: nowrap; }
.nw-bar { position: absolute; z-index: 3; bottom: 8px; right: 10px; display: flex; gap: 3px; padding: 3px; background: #fff6dc; border: 2px solid #8a5a2a; border-radius: 4px; }
.nw-bar i { width: 16px; height: 8px; background: linear-gradient(#ffe58a, #f0b52a); border: 1.5px solid #8a5a2a; }
.nw-bar i.half { background: linear-gradient(90deg, #f0b52a 50%, #e6d4ac 50%); }
.nw-art .nw-emoji, .nw-art > svg { position: relative; z-index: 2; align-self: center; }
.nw-slide.on .nw-art > *:not(.nw-sparkle) { animation: none; }
.nw-slide.on .nw-cast, .nw-slide.on .nw-emoji, .nw-slide.on .nw-art > svg { animation: nwPop .6s cubic-bezier(.2,.8,.2,1.4) both; }
.nw-kick { display: inline-flex !important; align-items: center; height: auto !important; min-height: 0 !important; padding: 3px 12px !important; line-height: 1.2 !important; margin: 0 auto; width: auto !important; }

/* === Visitenkarte & Segelkumpan (fork 6) === */
.pcard.pc2 { position: relative; width: min(520px, 100%); padding: 14px 14px 16px; background: linear-gradient(#fffaf0, #f6e8c8); border: 3px solid #8a5a2a; border-radius: 12px; box-shadow: 0 6px 0 #5a3a1c, 0 22px 50px rgba(40,20,10,.35); }
.pc2-x { position: absolute !important; top: 10px !important; right: 10px !important; margin: 0 !important; float: none !important; }
.pc2-head { display: flex; gap: 12px; align-items: center; padding: 10px 44px 12px 10px; margin: -4px -4px 0; border-radius: 9px; background: radial-gradient(circle at 18% 50%, #fff6dc 0 30%, transparent 31%), linear-gradient(135deg, #f3d98e, #e9b862); border: 2px solid #c9953a; box-shadow: inset 0 -4px 0 rgba(140,90,20,.18); }
.pc2-por { flex: 0 0 auto; display: grid; place-items: center; }
.pc2-por .portrait { transform: scale(1.05); }
.pc2-id { display: grid; gap: 3px; min-width: 0; }
.pc2-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 1.15rem; color: #3a2208; line-height: 1.15; }
.pc2-you { font-style: normal; font-size: .62rem; font-weight: 900; color: #fff; background: #6f9f72; padding: 1px 6px; border-radius: 4px; }
.pc2-sub { font-size: .76rem; color: #6b4a22; }
.pc2-title { font-style: normal; font-weight: 800; margin-right: 6px; padding: 0 6px; background: rgba(255,255,255,.55); border-radius: 4px; }
.pc2-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pc2-chip { font-style: normal; font-size: .7rem; font-weight: 800; color: #4a2e16; background: #fff6dc; border: 1.5px solid #c9953a; padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pc2-chip.land { background: #e6f2df; border-color: #8ab48a; color: #2e5a32; }
.pc2-kumpan-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; background: linear-gradient(#e6f4f6, #c9e4ea); border: 2px solid #4f8a96; border-radius: 10px; box-shadow: 0 4px 0 #36707c; }
.pc2-kumpan-btn:hover { background: linear-gradient(#f0fafb, #d6ecf0); }
.pc2-kumpan-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #36707c; }
.pc2-kumpan-btn > span:last-child { display: grid; gap: 1px; }
.pc2-kumpan-btn b { font-size: .92rem; color: #1f4a54; }
.pc2-kumpan-btn small { font-size: .7rem; color: #3f6a74; }
.pc2-kico { flex: 0 0 38px; height: 38px; display: grid; place-items: center; font-size: 20px; background: #fff; border: 2px solid #4f8a96; border-radius: 8px; animation: kpSwing 2.6s ease-in-out infinite; }
@keyframes kpSwing { 50% { transform: rotate(-12deg); } }
.pc2-kumpan.is { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px; background: #fdeef2; border: 2px dashed #e0a0b4; border-radius: 10px; }
.pc2-kumpan.is small { font-size: .68rem; color: #8a5a6a; }
.pc2-kb { font-style: normal; font-weight: 900; font-size: .78rem; color: #fff; background: linear-gradient(#e88aa8, #d0507a); padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 0 #a0385a; white-space: nowrap; }
.pc2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pc2-t { display: grid; justify-items: center; gap: 1px; padding: 8px 4px 7px; text-align: center; background: #fffdf8; border: 2px solid #e2d2b0; border-radius: 8px; box-shadow: 0 3px 0 #e2d2b0; min-width: 0; }
.pc2-t.gold { background: linear-gradient(#fff8dc, #fdeab0); border-color: #e0b44a; box-shadow: 0 3px 0 #c9953a; }
.pc2-t.land { background: linear-gradient(#f4faef, #e3f1da); border-color: #a9cc9a; box-shadow: 0 3px 0 #8ab48a; }
.pc2-i { font-style: normal; font-size: 15px; width: 28px; height: 26px; display: grid; place-items: center; background: #f6ead0; border: 1.5px solid #d8c29a; border-radius: 6px; margin-bottom: 2px; }
.pc2-t b { font-family: 'Fredoka', system-ui, sans-serif !important; font-size: 1.12rem; font-weight: 700; color: #3a2208; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.1; }
.pc2-t span { font-size: .64rem; color: #8a7a62; line-height: 1.2; }
.pc2-t small { font-size: .6rem; font-weight: 800; color: #4f7a52; }
.pc2-sec { margin-top: 12px; padding: 8px 10px; background: #fffdf8; border: 2px solid #eadcc2; border-radius: 8px; }
.pc2-sec > b { color: #8a5a2a !important; font-size: .78rem !important; letter-spacing: .04em; }
.pc2-squad .pcard-duel { border-radius: 10px; }
@media (max-width: 420px) { .pc2-head { flex-direction: column; text-align: center; padding: 12px 10px; } .pc2-id { justify-items: center; } .pc2-chips { justify-content: center; } .pc2-name { justify-content: center; } .pc2-grid { gap: 6px; } .pc2-t b { font-size: 1rem; } }
.kumpan-pop { text-align: center; }
.kp-duo { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 6px 0 8px; }
.kp-p { animation: kpIn .5s cubic-bezier(.2,.8,.2,1.3) both; }
.kp-p:last-child { animation-delay: .15s; }
@keyframes kpIn { from { transform: scale(.4); opacity: 0; } }
.kp-rope { position: relative; width: 64px; height: 6px; background: repeating-linear-gradient(90deg, #c9a46a 0 6px, #a88050 6px 8px); border-radius: 3px; }
.kp-rope i { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-style: normal; font-size: 20px; animation: kpSwing 1.8s ease-in-out infinite; }
.kp-bell { font-size: 40px; animation: kpRing 1.2s ease-in-out 2; }
@keyframes kpRing { 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(0); } }
.kp-list { display: grid; gap: 6px; margin: 8px 0; text-align: left; }
.kp-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fffaf0; border: 2px solid #d8c29a; border-radius: 8px; box-shadow: 0 2px 0 #d8c29a; }
.kp-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-row small { font-size: .68rem; color: #8a7a62; font-variant-numeric: tabular-nums; }
.kp-row { flex-wrap: wrap; }
.kp-row b { flex: 1 1 50%; }
.kp-row .btn, .kp-row .pc2-kb { margin-left: auto; }
.kumpan-pop .fpop-btns .btn { white-space: nowrap; }
/* Pinnwand */
.fb-pin { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 2px; font-size: .78rem; color: #5a4320; text-align: left; cursor: pointer; }
.fb-pin input { margin-top: 2px; width: 18px; height: 18px; accent-color: #c2412f; }
.pb-head { text-align: center; } .pb-head .btn { margin-top: 4px; }
.pb-wait { text-align: center; color: #8a7a62; font-size: .82rem; }
.pb-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; padding: 14px 8px 10px; background: radial-gradient(circle at 20% 30%, rgba(0,0,0,.04) 0 2px, transparent 3px) 0 0 / 18px 18px, linear-gradient(#c99a62, #b8864e); border: 4px solid #6b4422; border-radius: 8px; box-shadow: inset 0 0 20px rgba(60,30,10,.35), 0 4px 0 #4a2e16; }
.pb-note { position: relative; padding: 14px 10px 8px; background: var(--c); transform: rotate(var(--r)); box-shadow: 0 6px 8px rgba(40,20,0,.25), inset 0 -10px 12px -10px rgba(0,0,0,.15); font-family: inherit; transition: transform .2s; }
.pb-note:hover { transform: rotate(0deg) scale(1.04); z-index: 2; }
.pb-pin { position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: radial-gradient(circle at 35% 35%, #ff8a7a, #c2412f 60%, #7a2a1e); border-radius: 50%; box-shadow: 0 2px 2px rgba(0,0,0,.35); }
.pb-stars { display: block; font-size: .78rem; color: #e0a818; letter-spacing: 1px; } .pb-stars i { font-style: normal; color: rgba(0,0,0,.15); }
.pb-note p { margin: 4px 0 6px; font-size: .82rem; line-height: 1.35; color: #3a2a14; word-break: break-word; }
.pb-note small { font-size: .68rem; color: #6b5a42; font-weight: 700; }

/* === Charakterkarten lebendig (fork 7) === */
/* Rahmen: warmes Pergament, Pixelkante, 3D-Schatten */
.card-face.cf3 { border: 3px solid #8a5a2a !important; border-radius: 10px !important; background: linear-gradient(#fffaf0, #f6e8c8) !important;
  box-shadow: 0 4px 0 #6b4422, inset 0 0 0 2px #fff6e0 !important; }
.cf3.frame-gold { border-color: #c99a2e !important; box-shadow: 0 4px 0 #8a6510, inset 0 0 0 2px #fff1c2, 0 0 14px rgba(240,190,70,.45) !important; }
.opt.card .card-face.cf3.shiny { box-shadow: 0 4px 0 #8a6510, inset 0 0 0 2px #fff1c2, 0 0 18px rgba(240,190,70,.55) !important; }
.opt.card:hover .card-face.cf3 { transform: translateY(-3px) !important; box-shadow: 0 7px 0 #6b4422, inset 0 0 0 2px #fff6e0 !important; }
.opt.card.picked .card-face.cf3, .opt.card.is-tip .card-face.cf3 { border-color: #e0a818 !important; }
/* Bildbereich als kleine Bühne */
.c3-top { height: 138px; overflow: hidden; border-bottom: 3px solid #8a5a2a; background: none !important; }
.c3-head { z-index: 4; }
.c3-fac { border: 1.5px solid rgba(0,0,0,.25); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.c3-head .stars { font-size: .9rem; letter-spacing: -1px; color: #ffd34a; text-shadow: 0 1px 0 #6b4422, 0 -1px 0 #6b4422, 1px 0 0 #6b4422, -1px 0 0 #6b4422; }
.c3-head .stars i { color: rgba(255,255,255,.6); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.c3-stage { position: absolute; inset: 0; display: block; background: linear-gradient(#9fd2ee, #d9eef7 62%); }
.c3-stage > i { position: absolute; display: block; }
.cs-sea { left: 0; right: 0; bottom: 22%; height: 22%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 10px, transparent 10px 26px), linear-gradient(#5aa6d2, #3f86b8); animation: csWave 3s linear infinite; }
@keyframes csWave { to { background-position: 26px 0, 0 0; } }
.cs-ground { left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(#ecd59a, #d9bd7c); border-top: 2px solid #c2a060; }
.cs-cloud { top: 16%; left: -30%; width: 34px; height: 9px; background: #fffaf0; box-shadow: 9px -6px 0 #fffaf0, 18px -2px 0 #fffaf0; opacity: .9; animation: csCloud 22s linear infinite; }
.cs-cloud.b { top: 30%; animation-duration: 30s; animation-delay: -14s; transform: scale(.7); }
@keyframes csCloud { to { left: 120%; } }
.cs-spark { top: 18%; right: 14%; width: 6px; height: 6px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; }
.frame-gold .cs-spark, .shiny .cs-spark { animation: csTw 2.4s ease-in-out infinite; background: #ffe58a; }
@keyframes csTw { 50% { opacity: 1; transform: scale(1.6) rotate(45deg); } }
/* Requisiten */
.cs-ship { bottom: 36%; right: 8%; width: 30px; height: 9px; background: #6b4422; border-radius: 0 0 8px 8px; animation: csBob 3.4s ease-in-out infinite; }
.cs-ship::before { content: ''; position: absolute; left: 12px; bottom: 9px; width: 3px; height: 20px; background: #4a2e16; }
.cs-ship::after { content: ''; position: absolute; left: 15px; bottom: 13px; width: 13px; height: 14px; background: #fffaf0; border: 1px solid #c9b48c; }
.cs-ship.big { width: 52px; right: 6%; } .cs-ship.big::after { width: 20px; height: 18px; }
@keyframes csBob { 50% { transform: translateY(-2px) rotate(-2deg); } }
.cs-palm { bottom: 22%; left: 8%; width: 5px; height: 46px; background: #8a5a2a; border: 1px solid #4a2e16; transform-origin: bottom; animation: csSway 4s ease-in-out infinite; }
.cs-palm::after { content: ''; position: absolute; top: -8px; left: -14px; width: 34px; height: 12px; background: #4f9a4a; border: 1px solid #2e5a2a; border-radius: 50%; }
@keyframes csSway { 50% { transform: rotate(4deg); } }
.cs-navy .c3-stage, .c3-stage.cs-navy { background: linear-gradient(#a9cdec, #e6f1fa 62%); }
.cs-flag { bottom: 24%; right: 12%; width: 3px; height: 50px; background: #5a5a62; }
.cs-flag::after { content: ''; position: absolute; left: 3px; top: 2px; width: 22px; height: 14px; background: #f0f4fa; border: 1px solid #4a6a9a; box-shadow: inset 0 -4px 0 #4a7ab8; animation: csFlag 1.6s ease-in-out infinite; transform-origin: left; }
@keyframes csFlag { 50% { transform: skewY(6deg) scaleX(.92); } }
.cs-post { bottom: 22%; left: 10%; width: 8px; height: 22px; background: #5a3a1c; border: 1px solid #3a2410; }
.c3-stage.cs-navy .cs-ground { background: repeating-linear-gradient(90deg, #b58049 0 16px, #a26f3d 16px 18px); border-top-color: #6b4422; }
.c3-stage.cs-city, .c3-stage.cs-grave { background: linear-gradient(#24305a, #4a5a8a 70%); }
.cs-moon { top: 14%; right: 14%; width: 14px; height: 14px; background: #fff6d0; border-radius: 50%; box-shadow: 0 0 10px 3px rgba(255,246,208,.45); }
.cs-house { bottom: 24%; width: 26px; height: 24px; background: #8a7a8a; border: 1px solid #3a3040; box-shadow: inset 6px 6px 0 -3px #ffd34a; }
.cs-house::before { content: ''; position: absolute; left: -3px; top: -10px; border: 16px solid transparent; border-bottom: 10px solid #6a4a5a; border-top: 0; }
.cs-house.a { left: 6%; } .cs-house.b { right: 8%; height: 32px; }
.c3-stage.cs-city .cs-sea, .c3-stage.cs-grave .cs-sea { display: none; }
.c3-stage.cs-city .cs-ground { background: repeating-linear-gradient(90deg, #6a6470 0 12px, #5a5460 12px 14px); border-top-color: #3a3440; }
.c3-stage.cs-city .cs-cloud, .c3-stage.cs-grave .cs-cloud { opacity: .25; }
.c3-stage.cs-desert { background: linear-gradient(#f3c98a, #fbe8c4 62%); }
.c3-stage.cs-desert .cs-sea { display: none; }
.cs-dune { left: -10%; right: -10%; bottom: 20%; height: 22%; background: #e9c47a; border-radius: 50% 50% 0 0; }
.cs-cactus { bottom: 22%; right: 12%; width: 6px; height: 24px; background: #5a9a4a; border: 1px solid #2e5a2a; border-radius: 3px; }
.cs-cactus::before { content: ''; position: absolute; left: -7px; top: 6px; width: 6px; height: 8px; border: 1px solid #2e5a2a; border-right: 0; background: #5a9a4a; border-radius: 3px 0 0 3px; }
.c3-stage.cs-desert .cs-ground { background: linear-gradient(#f0d090, #e2bc70); }
.c3-stage.cs-dusk, .c3-stage.cs-sunset { background: linear-gradient(#f2a07a, #fbd8a8 62%); }
.c3-stage.cs-sunset .cs-sea, .c3-stage.cs-dusk .cs-sea { background: repeating-linear-gradient(90deg, rgba(255,220,180,.3) 0 10px, transparent 10px 26px), linear-gradient(#b06a7a, #7a4a6a); }
.cs-cliff { bottom: 22%; left: -4%; width: 40%; height: 40%; background: #7a6a5a; border: 2px solid #4a3a2a; border-radius: 0 60% 0 0; }
.cs-bird { top: 26%; left: 40%; width: 12px; height: 5px; border-top: 2px solid #4a3a3a; border-radius: 50% 50% 0 0; animation: csBird 9s linear infinite; }
@keyframes csBird { from { left: -10%; } to { left: 110%; } }
.cs-tent { bottom: 22%; right: 6%; width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 34px solid #d04a3a; }
.cs-tent::after { content: ''; position: absolute; left: -10px; top: 12px; width: 20px; height: 22px; background: repeating-linear-gradient(90deg, #fffaf0 0 5px, #d04a3a 5px 10px); }
.c3-stage.cs-reef, .c3-stage.cs-bubble { background: linear-gradient(#4a9ac8, #9ad4ea 70%); }
.c3-stage.cs-reef .cs-sea, .c3-stage.cs-bubble .cs-sea { display: none; }
.c3-stage.cs-reef .cs-cloud, .c3-stage.cs-bubble .cs-cloud { display: none; }
.cs-coral { bottom: 22%; width: 8px; height: 22px; background: #e07a8a; border: 1px solid #a04a5a; border-radius: 4px; }
.cs-coral::after { content: ''; position: absolute; left: 7px; top: 6px; width: 7px; height: 10px; background: #e07a8a; border: 1px solid #a04a5a; border-radius: 4px; }
.cs-coral.a { left: 8%; } .cs-coral.b { right: 12%; height: 30px; background: #f0a050; border-color: #a06a20; }
.cs-bub { bottom: 20%; width: 8px; height: 8px; border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%; animation: csBub 4s ease-in infinite; }
.cs-bub.a { left: 22%; } .cs-bub.b { left: 72%; animation-delay: -1.6s; width: 6px; height: 6px; } .cs-bub.c { left: 48%; animation-delay: -2.8s; width: 10px; height: 10px; }
@keyframes csBub { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-90px); opacity: 0; } }
.c3-stage.cs-bubble .cs-ground { background: linear-gradient(#8ac48a, #6aa46a); border-top-color: #4a844a; }
.c3-stage.cs-reef .cs-ground { background: linear-gradient(#e9d39a, #cfb878); }
.c3-stage.cs-wind { background: linear-gradient(#b8dcef, #eaf5f0 62%); }
.c3-stage.cs-wind .cs-sea { display: none; }
.cs-hill { left: -10%; right: 30%; bottom: 20%; height: 28%; background: #7ab86a; border-radius: 50% 50% 0 0; }
.cs-leaf { top: 30%; left: -10%; width: 7px; height: 4px; background: #5a9a4a; border-radius: 50%; animation: csLeaf 5s linear infinite; }
.cs-leaf.b { top: 46%; animation-delay: -2.5s; }
@keyframes csLeaf { to { left: 110%; transform: rotate(360deg) translateY(-12px); } }
.c3-stage.cs-wind .cs-ground, .c3-stage.cs-bamboo .cs-ground { background: linear-gradient(#8ac47a, #6aa45a); border-top-color: #4a844a; }
.cs-stone { bottom: 22%; right: 14%; width: 14px; height: 18px; background: #8a8a92; border: 1px solid #4a4a52; border-radius: 6px 6px 1px 1px; }
.cs-tree { bottom: 22%; left: 10%; width: 4px; height: 34px; background: #4a3a3a; }
.cs-tree::after { content: ''; position: absolute; top: 4px; left: 3px; width: 12px; height: 3px; background: #4a3a3a; transform: rotate(-30deg); }
.c3-stage.cs-grave .cs-ground { background: linear-gradient(#5a6a5a, #4a5a4a); border-top-color: #3a4a3a; }
.c3-stage.cs-bamboo { background: linear-gradient(#c8e6c0, #eaf6e4 62%); }
.c3-stage.cs-bamboo .cs-sea { display: none; }
.cs-bam { bottom: 22%; width: 6px; height: 70%; background: repeating-linear-gradient(#6aa45a 0 12px, #4a844a 12px 14px); border: 1px solid #2e5a2a; animation: csSway 5s ease-in-out infinite; transform-origin: bottom; }
.cs-bam.a { left: 6%; } .cs-bam.b { left: 16%; height: 56%; animation-delay: -1s; } .cs-bam.c { right: 9%; height: 64%; animation-delay: -2s; }
.c3-stage.cs-town .cs-ground { background: repeating-linear-gradient(90deg, #c8b89a 0 12px, #b8a88a 12px 14px); border-top-color: #8a7a5a; }
.cs-lamp { bottom: 22%; right: 6%; width: 3px; height: 34px; background: #3a3a42; }
.cs-lamp::after { content: ''; position: absolute; left: -3px; top: -6px; width: 9px; height: 8px; background: #ffd34a; border: 1px solid #3a3a42; box-shadow: 0 0 8px 2px rgba(255,211,74,.5); }
.c3-stage.cs-town .cs-house { background: #d8b890; border-color: #6a4a2a; }
.c3-stage.cs-town .cs-house::before { border-bottom-color: #c2412f; }
/* Figur: größer, steht auf dem Boden, atmet und blinzelt leicht */
.c3-sprite { bottom: 14px !important; z-index: 3; animation: c3Idle 3.2s ease-in-out infinite; animation-delay: var(--cd, 0s); }
.c3-sprite svg { width: 74px !important; height: 86px !important; filter: drop-shadow(0 3px 0 rgba(40,25,10,.25)) !important; }
.c3-shadow { position: absolute; left: 50%; bottom: -3px; width: 52px; height: 7px; transform: translateX(-50%); background: rgba(40,25,10,.28); border-radius: 50%; z-index: -1; animation: c3Shadow 3.2s ease-in-out infinite; animation-delay: var(--cd, 0s); }
@keyframes c3Idle { 0%, 100% { transform: translateX(-50%) translateY(0); } 45% { transform: translateX(-50%) translateY(-3px); } 55% { transform: translateX(-50%) translateY(-3px) scaleY(1.01); } }
@keyframes c3Shadow { 45%, 55% { transform: translateX(-50%) scaleX(.86); opacity: .8; } }
.opt.card:hover .c3-sprite { animation: c3Hop .55s ease-out; }
@keyframes c3Hop { 40% { transform: translateX(-50%) translateY(-10px); } 70% { transform: translateX(-50%) translateY(0); } 85% { transform: translateX(-50%) translateY(-3px); } }
.opt.card:hover .c3-sprite svg { animation: none !important; }
.c3-lv { z-index: 4; background: #4a2e16 !important; border: 1.5px solid #fff6e0; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
/* Text und Werte */
.c3-name { font-family: inherit !important; font-weight: 800 !important; letter-spacing: .01em; margin-top: 7px !important; }
.c3-ab > span { display: block; padding: 4px 7px; background: #fff6e0; border: 1.5px solid #e2cf9e; border-radius: 6px; }
.c3-ab .c3-trait { background: #eef6e8; border-color: #c4dcb4; }
.c3-ult { background: linear-gradient(#ffe9a8, #f6d27a) !important; border: 1.5px solid #c99a2e; color: #6b4410 !important; box-shadow: 0 2px 0 #c99a2e; }
.c3-stats > span { font-variant-numeric: tabular-nums; font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; border: 1.5px solid #e2cf9e; background: #fffaf0 !important; box-shadow: 0 2px 0 #e2cf9e !important; }
@media (max-width: 520px) {
  .c3-top { height: 112px; }
  .c3-sprite svg { width: 60px !important; height: 70px !important; }
  .c3-shadow { width: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .c3-stage *, .c3-sprite, .c3-shadow { animation: none !important; }
}

/* === Kampf-Leiste & Ergebnis im Spielstil (Holz, Pixel, 3D) === */
.fbar3 .fbar-seg { background: linear-gradient(#6b4422, #5a3a1c) !important; border: 3px solid #3a2410; border-radius: 9px; box-shadow: inset 0 2px 0 rgba(255,220,160,.18), 0 4px 0 #2a1a0c !important; padding: 4px !important; }
.fbar3 .fbar-sp { color: #f2dcb4 !important; border-radius: 5px !important; font-size: .78rem; }
.fbar3 .fbar-sp.on { background: linear-gradient(#fff3c4, #f2c94c 60%, #d9a63c) !important; color: #4a2e16 !important; box-shadow: inset 0 -3px 0 #b8801a, 0 2px 0 #2a1a0c !important; border: 2px solid #4a2e16; }
.fbar3.is-done .fbar-seg { opacity: 1 !important; filter: saturate(.4) brightness(.85); }
.fbar-ff { border: 3px solid #3a2410 !important; border-radius: 9px !important; background: linear-gradient(#b8864e 0, #9a6a3a 45%, #7a5028 100%) !important; box-shadow: inset 0 2px 0 rgba(255,230,180,.45), inset 0 -3px 0 rgba(0,0,0,.18), 0 5px 0 #2a1a0c !important; color: #fff6e0 !important; text-shadow: 0 2px 0 #4a2e16; }
.fbar-ff b { font-family: var(--px); font-weight: 600; letter-spacing: .02em; font-size: 1.02rem !important; }
.fbar-ff small { text-shadow: none; color: #f6e2bc; opacity: 1 !important; }
.fbar-ff .ff-ico { display: grid; place-items: center; width: 30px; height: 30px; background: rgba(0,0,0,.18); border-radius: 6px; box-shadow: inset 0 2px 0 rgba(0,0,0,.2); }
.ff-px { width: 18px; height: 14px; fill: #fff3c4; filter: drop-shadow(0 1px 0 #4a2e16); }
.fbar-ff.end { background: linear-gradient(#c97a52 0, #b0583a 45%, #8a3e28 100%) !important; border-color: #4a1e10 !important; box-shadow: inset 0 2px 0 rgba(255,210,180,.4), inset 0 -3px 0 rgba(0,0,0,.2), 0 5px 0 #3a140a !important; }
.fbar-ff.go { background: linear-gradient(#7aa860 0, #5e8f48 45%, #46703a 100%) !important; border-color: #24401a !important; box-shadow: inset 0 2px 0 rgba(220,255,200,.4), inset 0 -3px 0 rgba(0,0,0,.18), 0 5px 0 #1a3010 !important; color: #f4ffe8 !important; text-shadow: 0 2px 0 #24401a; }
.fbar-ff.go small { color: #dff2d0; }
.fbar-ff:active { transform: translateY(4px) !important; box-shadow: inset 0 2px 0 rgba(255,230,180,.3), 0 1px 0 #2a1a0c !important; }
/* Ergebnis-Schild statt roter Pille */
.battle-head .result { font-family: var(--px); font-weight: 600; padding: 5px 16px 6px; border-radius: 6px; border: 3px solid; letter-spacing: .03em; position: relative; }
.battle-head .result.win { background: linear-gradient(#8cc06e, #5e8f48) !important; color: #f4ffe8 !important; border-color: #24401a; box-shadow: 0 4px 0 #1a3010; text-shadow: 0 2px 0 #24401a; }
.battle-head .result.lose { background: linear-gradient(#cfa58a, #a8786a) !important; color: #fff6ee !important; border-color: #5a3a30; box-shadow: 0 4px 0 #3a2420; text-shadow: 0 2px 0 #5a3a30; }
.battle-head .result::before, .battle-head .result::after { content: ''; position: absolute; top: 50%; width: 8px; height: 14px; margin-top: -7px; background: inherit; border: 3px solid; border-color: inherit; z-index: -1; }
.battle-head .result::before { left: -10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.battle-head .result::after { right: -10px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
/* K.O. sauber und scharf */
.field.v3 .fu.ko .fu-body::before, .field.v3 .fu.ko .fu-body::after, .field.v3 .fu.ko .fu-trail { display: none !important; }
.field.v3 .fu.ko .fu-body, .field.v3 .fu.ko svg { image-rendering: pixelated; filter: grayscale(.85) brightness(.9) !important; }
.field.v3 .fu.ko .fu-body { transition: none !important; }
.field.v3 { border-radius: 10px !important; }
.c3-fac { white-space: nowrap; max-width: 64%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .c3-fac { font-size: .54rem; padding: 1px 6px; letter-spacing: .05em; } .c3-head { padding: 5px 6px; } }
.opt.card > .key { z-index: 5; }
.pc2-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 10px; }
.pc2-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.pc2-ic { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: #fffaf0; border: 2px solid #d8c29a; border-radius: 8px; box-shadow: 0 3px 0 #d8c29a; cursor: help; }
.pc2-ic:hover, .pc2-ic:focus { border-color: #c9953a; transform: translateY(-1px); outline: none; }
.pc2-ic svg { width: 30px; height: 30px; shape-rendering: crispEdges; }
.pc2-ic.ir-rare { border-color: #4f86c6; box-shadow: 0 3px 0 #3d6ea8; } .pc2-ic.ir-epic { border-color: #9a5bd0; box-shadow: 0 3px 0 #7a40b0; } .pc2-ic.ir-legendary { border-color: #e0a030; background: #fff4d6; box-shadow: 0 3px 0 #b8801a; }
.pc2-lv { position: absolute; right: -5px; bottom: -6px; font-style: normal; font-size: .6rem; font-weight: 900; color: #fff6e0; background: #8a5a2a; padding: 0 4px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.pc2-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 6px; }
.pc2-m { display: grid; justify-items: center; gap: 1px; padding: 8px 4px 6px; background: linear-gradient(#fffdf8, #f6ecd6); border: 2px solid #c9a46a; border-radius: 8px; box-shadow: 0 3px 0 #a88050; min-width: 0; }
.pc2-m-spr svg { width: 38px; height: 44px; shape-rendering: crispEdges; display: block; }
.pc2-m b { font-size: .74rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc2-m small { font-size: .6rem; color: #8a7a62; }
.pc2-m-st { display: flex; gap: 6px; font-size: .62rem; color: #6b5a42; font-variant-numeric: tabular-nums; }
.pc2-m-st em { font-style: normal; font-weight: 700; }
.pc2-gear { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 4px; min-height: 26px; }
.pc2-gear .cg-chip { width: 26px !important; height: 26px !important; padding: 2px !important; }
.pc2-gear .cg-chip svg { width: 18px !important; height: 18px !important; }
.pc2-nog { font-size: .58rem !important; color: #a8987e !important; font-style: italic; align-self: center; }

/* ===== Fork A: Daumen-Karten ===== */
/* Routen-Dock: große Karten pro erreichbarem Ort unter der Seekarte */
.route-dock { margin: 12px 0 6px; position: relative; z-index: 6; }
.route-dock .rd-kick { display: inline-block; font: 700 .72rem/1 'Fredoka', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fffaf0;
  background: var(--wood); padding: 5px 10px 4px; border-radius: 6px 6px 0 0; margin-left: 12px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 10px; border-radius: 14px;
  background: repeating-linear-gradient(90deg, #c98d54 0 46px, #bd8249 46px 48px), #c98d54; box-shadow: inset 0 0 0 3px #8a5a34, inset 0 -5px 0 #8a5a34, 0 4px 0 rgba(74,45,24,.25); }
.rd-card { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px;
  min-height: 78px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(#fffdf6, #faf1dd); color: var(--ink);
  box-shadow: inset 0 0 0 2px #e4d0a6, 0 5px 0 #a8794a, 0 7px 10px rgba(74,45,24,.25);
  transition: transform .12s, box-shadow .12s; animation: rdIn .32s ease-out backwards; animation-delay: var(--d, 0s); -webkit-tap-highlight-color: transparent; }
@keyframes rdIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.rd-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--gold), 0 7px 0 #a8794a, 0 10px 14px rgba(74,45,24,.28); }
.rd-card:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px var(--gold), 0 1px 0 #a8794a; }
.rd-card:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.rd-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff6dc, #f0dfb8);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #d9bd86, 0 3px 0 #c9a46a; image-rendering: pixelated; }
.rd-ico svg, .rd-ico img { width: 40px; height: 40px; }
.rd-foe .rd-ico svg, .rd-foe .rd-ico img { width: 46px; height: 46px; }
.n-battle .rd-ico, .n-elite .rd-ico, .n-boss .rd-ico, .n-raid .rd-ico { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #d1604a, 0 3px 0 #a84432; }
.n-rest .rd-ico, .n-recruit .rd-ico { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #6fae74, 0 3px 0 #4a8a4e; }
.n-treasure .rd-ico, .n-fruit .rd-ico { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #e0b24a, 0 3px 0 #b8862a; }
.rd-txt { display: grid; gap: 3px; min-width: 0; }
.rd-txt b { font: 700 1.02rem/1.15 'Fredoka', sans-serif; overflow-wrap: anywhere; hyphens: auto; }
.rd-txt small { font-size: .8rem; line-height: 1.25; color: var(--mute); }
.rd-txt .mn-bounty { font-style: normal; font-weight: 800; font-size: .76rem; color: #a8632a; }
.rd-txt .danger { justify-self: start; margin-top: 1px; }
.rd-card .tip-badge { position: absolute; top: -8px; right: 10px; left: auto; transform: none; z-index: 2; }
.rd-card.is-tip { box-shadow: inset 0 0 0 3px var(--hp), 0 5px 0 #a8794a, 0 7px 10px rgba(74,45,24,.25); }
.rd-card { padding-right: 30px; }
.rd-card kbd.key { position: absolute; top: 7px; right: 7px; bottom: auto; left: auto; width: auto; height: auto; min-width: 0; padding: 1px 6px; line-height: 1.3; font-size: .72rem; margin: 0; }
.rd-big { background: linear-gradient(#fff6e0, #f6e2b8); }
@media (pointer: coarse) { .rd-card .key { display: none; } }
/* Gleiche Stelle auf der Karte aufleuchten lassen, wenn man über eine Karte fährt */
#stage:has(.rd-card[data-i="0"]:hover) .map-node.can[data-i="0"],
#stage:has(.rd-card[data-i="1"]:hover) .map-node.can[data-i="1"],
#stage:has(.rd-card[data-i="2"]:hover) .map-node.can[data-i="2"],
#stage:has(.rd-card[data-i="3"]:hover) .map-node.can[data-i="3"],
#stage:has(.rd-card[data-i="4"]:hover) .map-node.can[data-i="4"] { transform: translate(-50%, -50%) scale(1.18); z-index: 5; filter: drop-shadow(0 0 6px #f2c94c); }
@media (max-width: 560px) {
  /* Handy: Karten 2-spaltig im Daumenbereich, ungerade letzte über die ganze Breite */
  .rd-grid { grid-template-columns: 1fr 1fr; gap: 9px; padding: 9px; }
  .rd-grid.rd-n1 { grid-template-columns: 1fr; }
  .rd-grid > .rd-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rd-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px 8px 9px; min-height: 108px; gap: 5px; }
  .rd-grid > .rd-card:last-child:nth-child(odd) { grid-template-columns: 56px 1fr; justify-items: start; text-align: left; min-height: 84px; }
  .rd-grid > .rd-card:last-child:nth-child(odd) .rd-txt { justify-items: start; }
  .rd-txt { justify-items: center; }
  .rd-txt .danger { justify-self: auto; }
  .rd-card { padding-right: 8px; }
  .rd-ico { width: 50px; height: 50px; }
  .rd-ico svg, .rd-ico img { width: 36px; height: 36px; }
  .rd-grid > .rd-card:last-child:nth-child(odd) { grid-template-columns: 50px 1fr; }
  /* Karte darüber nur noch Übersicht: Beschriftung der klickbaren Punkte kleiner */
  .sea-chart.v2 .map-node.can .mn-label { font-size: .68rem; }
}

/* Training: große Kacheln, kein Umbruch mitten im Wort (überschreibt die alte kompakte Reihe) */
#stage .train .train-opts { gap: 9px !important; margin: 8px 0 6px; }
#stage .train .train-opt { min-height: 76px !important; padding: 12px 6px 10px !important; border-radius: 12px; box-shadow: 0 4px 0 #d9c49a; gap: 3px; }
#stage .train .train-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9c49a; }
#stage .train .train-opt .to-ico { width: 30px; height: 30px; display: grid; place-items: center; font-size: 1.4rem; }
#stage .train .train-opt .to-ico .pxi, #stage .train .train-opt .to-ico svg { width: 28px; height: 28px; display: block; }
#stage .train .train-opt b { font-size: .9rem !important; line-height: 1.15; overflow-wrap: normal !important; word-break: normal; white-space: nowrap; }
#stage .train .train-opt small { font-size: .76rem !important; line-height: 1.25; text-align: center; }
#stage .train .train-opt .tip-badge { font-size: 10px !important; padding: 1px 6px !important; top: -8px !important; }
#stage .train .train-opt { overflow: visible !important; }
@media (max-width: 560px) {
  #stage .train .train-opts { grid-template-columns: 1fr 1fr !important; }
  #stage .train .train-opt { min-height: 84px !important; padding: 10px 4px 9px !important; }
  #stage .train .train-head .link { min-height: 40px; display: inline-flex; align-items: center; padding: 0 6px; }
  #stage .train .auto-check { min-height: 40px; }
}

/* Schätze und Früchte am Handy: breite Karten untereinander, Bild links, Text rechts */
@media (max-width: 560px) {
  body #stage .cards.loot { grid-template-columns: 1fr !important; gap: 10px !important; }
  body #stage .cards.loot .opt.card { padding: 0 !important; min-height: 96px; }
  body #stage .cards.loot .loot-face { display: grid !important; grid-template-columns: 70px 1fr; grid-template-areas: 'art rar' 'art name' 'art type' 'art text' 'art ben';
    align-content: center; align-items: start; column-gap: 12px; row-gap: 2px; text-align: left; padding: 10px 12px !important; height: auto !important; min-height: 96px; font-size: 14px !important; }
  body #stage .cards.loot .loot-face .card-art { grid-area: art; width: 70px !important; height: 70px !important; margin: 0 !important; align-self: center; position: static !important; }
  body #stage .cards.loot .loot-face .card-art svg { width: 100%; height: 100%; }
  body #stage .cards.loot .loot-face .card-rarity { grid-area: rar; position: static !important; justify-self: start; margin: 0 !important; transform: none !important; font-size: 10.5px !important; }
  body #stage .cards.loot .loot-face .card-name { grid-area: name; position: static !important; transform: none !important; margin: 0 !important; padding: 0 !important; background: none !important; color: var(--ink) !important; text-shadow: none !important;
    font: 700 1.02rem/1.15 'Fredoka', sans-serif !important; text-align: left; white-space: normal; }
  body #stage .cards.loot .loot-face .card-type { grid-area: type; margin: 0 !important; text-align: left; font-size: .74rem !important; }
  body #stage .cards.loot .loot-face .card-text { grid-area: text; margin: 3px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
    text-align: left; font-size: .86rem !important; font-weight: 500 !important; line-height: 1.3 !important; display: block !important; color: var(--ink) !important; }
  body #stage .cards.loot .loot-face .card-name { border: 0 !important; box-shadow: none !important; }
  body #stage .cards.loot .loot-face .card-name::after, body #stage .cards.loot .loot-face .card-name::before { display: none !important; }
  body #stage .cards.loot .loot-face .card-ben { grid-area: ben; margin: 4px 0 0 !important; justify-self: start; }
  body #stage .pick-dock .btn { min-height: 56px; font-size: 1.05rem; }
  body #stage .pick-skip { min-height: 44px; padding: 0 16px; }
}
@media (max-width: 560px) {
  /* Namen und Gefahr stehen schon groß im Dock: auf der Karte nur noch Symbole (Bosse behalten ihren Namen) */
  .sea-chart.v2 .map-node.can:not(.boss):not(.hunted) .mn-label { display: none; }
  .sea-chart.v2 .map-node.can .danger { display: none; }
}

/* ===== Großer Neustart: Countdown-Banner, Live-Fenster, Einladung ===== */
.sz-banner { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; margin: 0 auto 10px;
  padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #2c5c8a, #1d3f66); color: #fffdf6;
  border: 2px solid #12304f; box-shadow: 0 4px 0 #12304f, 0 8px 18px rgba(20,40,70,.25); position: relative; overflow: hidden; }
.sz-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%); transform: translateX(-100%); animation: sz-shine 4.5s ease-in-out infinite; }
@keyframes sz-shine { 60%, 100% { transform: translateX(100%); } }
.sz-banner:active { transform: translateY(3px); box-shadow: 0 1px 0 #12304f; }
.hub + .sz-banner, .sz-banner + .hub { margin-top: 4px; }
.sz-live { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 700 .72rem/1 'Pixelify Sans', 'Fredoka', sans-serif; letter-spacing: .06em;
  background: #e0453a; color: #fff; padding: 5px 7px; border-radius: 6px; box-shadow: 0 2px 0 #9a2a22; }
.sz-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: sz-blink 1.2s steps(2) infinite; }
@keyframes sz-blink { 50% { opacity: .25; } }
.sz-bt { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.sz-bt b { font: 600 1rem/1.15 'Fredoka', sans-serif; }
.sz-bt small { font-size: .78rem; opacity: .85; }
.sz-timer { flex: none; font: 600 1.05rem/1 'Pixelify Sans', monospace; background: #fff3c4; color: #5a3a12; padding: 7px 9px; border-radius: 8px;
  box-shadow: inset 0 -3px 0 #e2c27a, 0 2px 0 #12304f; font-variant-numeric: tabular-nums; }
.sz-timer.big { font-size: 2.3rem; padding: 10px 16px; border-radius: 12px; box-shadow: inset 0 -5px 0 #e2c27a, 0 4px 0 #b88a3a; letter-spacing: .04em; }

.fpop-card.sz-pop { max-width: 420px; text-align: center; padding: 16px 16px 18px; background: linear-gradient(180deg, #fffaf0, #f8eed8); }
.sz-kicker { display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 .95rem/1.2 'Fredoka', sans-serif; color: var(--wood); margin: 2px 30px 10px; flex-wrap: wrap; }
.sz-live.on { background: #2f9a5a; box-shadow: 0 2px 0 #1d6a3c; }
.sz-stage { position: relative; height: 128px; border-radius: 12px; overflow: hidden; border: 2px solid #c9a46a;
  background: linear-gradient(180deg, #ffb98a 0%, #ffd9a0 38%, #9fd2e6 39%, #5ea9c9 70%, #3e86ab 100%); image-rendering: pixelated; }
.sz-sun { position: absolute; left: 50%; top: 26px; width: 40px; height: 40px; margin-left: -20px; background: #fff0a8; box-shadow: 0 0 0 5px rgba(255,240,168,.45), 0 0 26px #ffd27a; animation: sz-sun 6s ease-in-out infinite; }
@keyframes sz-sun { 50% { transform: translateY(4px); } }
.sz-ship { position: absolute; left: 16%; top: 38px; width: 74px; animation: sz-bob 2.4s ease-in-out infinite; }
.sz-ship svg { width: 100%; height: auto; display: block; }
.sz-crew { position: absolute; right: 12%; bottom: 14px; display: flex; gap: 2px; }
.sz-who { width: 34px; display: block; animation: sz-hop 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * .22s); }
.sz-who svg { width: 100%; height: auto; display: block; }
@keyframes sz-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-9px); } }
@keyframes sz-bob { 50% { transform: translateY(4px) rotate(-2deg); } }
.sz-wave { position: absolute; left: -20%; width: 140%; height: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 14px, transparent 14px 30px); animation: sz-wave 3s linear infinite; }
.sz-wave.a { top: 92px; } .sz-wave.b { top: 108px; opacity: .6; animation-duration: 4.5s; animation-direction: reverse; }
@keyframes sz-wave { to { transform: translateX(30px); } }
.sz-gull { position: absolute; width: 12px; height: 4px; border-top: 3px solid #fff; border-radius: 50% 50% 0 0; animation: sz-gull 9s linear infinite; }
.sz-gull.a { top: 18px; left: -20px; } .sz-gull.b { top: 34px; left: -20px; animation-delay: -4s; animation-duration: 12s; }
@keyframes sz-gull { to { left: 110%; } }
.sz-title { font: 600 1.35rem/1.2 'Fredoka', sans-serif; margin: 12px 0 6px; color: var(--ink); }
.sz-count { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 8px; }
.sz-count small { color: var(--mute); font-size: .82rem; }
.sz-text { margin: 4px 2px 6px; font-size: .95rem; line-height: 1.45; color: var(--ink); }
.sz-keep { margin: 0 4px 6px; font-size: .8rem; color: var(--mute); }
.sz-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.sz-btns .btn { margin-top: 4px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex: 1 1 140px; }
.sz-btns .sz-inv { background: #c0507a; box-shadow: 0 3px 0 #8a2f55; }
.sz-qr { width: 196px; height: 196px; margin: 10px auto 8px; display: grid; place-items: center; background: #fff; border-radius: 12px; border: 2px solid #c9a46a; box-shadow: 0 4px 0 #c9a46a; padding: 8px; }
.sz-qr svg, .sz-qr img { width: 100%; height: 100%; }
.sz-link { width: 100%; box-sizing: border-box; font: .8rem/1.2 monospace; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: center; }
@media (max-width: 420px) { .sz-bt b { font-size: .9rem; } .sz-timer { font-size: .95rem; padding: 6px 7px; } .sz-timer.big { font-size: 2rem; } }

/* ===== Fork D: Eigene Frucht & Bande ===== */
/* kleiner Pixel-Totenkopf für die eigene Bande */
.c3-jolly { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; flex: none;
  background:
    linear-gradient(#2a2018, #2a2018) 3px 3px / 2px 2px no-repeat,
    linear-gradient(#2a2018, #2a2018) 7px 3px / 2px 2px no-repeat,
    linear-gradient(#2a2018, #2a2018) 4px 8px / 4px 1px no-repeat,
    radial-gradient(circle at 50% 42%, #fffaf0 0 4.6px, transparent 5px);
  border-radius: 3px; }
.c3-jolly.big { width: 34px; height: 34px; border-radius: 6px; background:
    linear-gradient(#2a2018, #2a2018) 9px 10px / 6px 6px no-repeat,
    linear-gradient(#2a2018, #2a2018) 19px 10px / 6px 6px no-repeat,
    linear-gradient(#2a2018, #2a2018) 11px 23px / 12px 3px no-repeat,
    radial-gradient(circle at 50% 42%, #fffaf0 0 13px, transparent 13.6px), #2a2018; }
.c3-fac.own { background: #3a2a1c; color: #ffe9b8; }
.c3-ab .c3-fruit { background: #fdeee8; border-color: #ecc3b4; display: block; }
.c3-fruit i { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.c3-fruit i svg, .c3-fruit i img, .sf-abil i svg { width: 100%; height: 100%; }
.sf-abil i { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
@media (max-width: 560px) { .c3-ab .c3-fruit { font-size: .66rem; } }

/* Teufelsfrucht-Platz im Profil-Editor */
.sf-wrap { display: grid; gap: 10px; }
.sf-stage { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; padding: 12px 14px;
  background: linear-gradient(#cfe9f2 0 55%, #f2deb0 55%); border: 2px solid #c9ab76; border-radius: 10px; box-shadow: 0 4px 0 #c9ab76, inset 0 0 0 2px rgba(255,255,255,.5); }
.sf-pirate { position: relative; width: 64px; height: 72px; display: grid; place-items: end center; }
.sf-pirate svg, .sf-pirate canvas, .sf-pirate img { width: 56px; height: auto; image-rendering: pixelated; animation: sfBob 2.4s ease-in-out infinite; }
.sf-shadow { position: absolute; bottom: -2px; left: 50%; width: 40px; height: 7px; margin-left: -20px; border-radius: 50%; background: rgba(60,40,10,.25); }
@keyframes sfBob { 50% { transform: translateY(-3px); } }
.sf-slot { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffdf6, #f3e3c0); border: 3px dashed #c9a66a; box-shadow: 0 4px 0 #b8935a; transition: transform .15s; }
.sf-slot.full { border-style: solid; border-color: #e0a458; background: radial-gradient(circle at 40% 35%, #fff8e6, #ffd9a8); }
.sf-slot .sf-ico { width: 42px; height: 42px; animation: sfGlow 2s ease-in-out infinite; }
.sf-slot .sf-q { font-style: normal; font: 700 1.5rem 'Pixelify Sans', 'Fredoka', sans-serif; color: #c9a66a; }
.sf-x { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; font-size: .7rem; color: #fff; background: #c0563e; border-radius: 50%; box-shadow: 0 2px 0 #8a3626; }
.sf-slot.drop-ok { transform: scale(1.06); border-color: #4c9a5a; }
.sf-slot.drop-hover { transform: scale(1.14); background: radial-gradient(circle at 40% 35%, #f2fff0, #c9ecc2); }
@keyframes sfGlow { 50% { filter: drop-shadow(0 0 6px rgba(255,190,80,.9)); transform: translateY(-2px); } }
.sf-info { display: grid; gap: 2px; min-width: 0; }
.sf-info b { font: 600 1rem 'Fredoka', sans-serif; color: #3a2a14; }
.sf-info small { font-size: .74rem; color: #6b5a44; line-height: 1.3; }
.sf-r { justify-self: start; font-style: normal; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: #e8dcc4; color: #6b5a44; }
.sf-r.r1 { background: #d7ecff; color: #2d5f95; }
.sf-ico { display: inline-grid; width: 36px; height: 36px; }
.sf-ico svg, .sf-ico img { width: 100%; height: 100%; image-rendering: pixelated; }
.sf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.sf-fruit { all: unset; box-sizing: border-box; cursor: grab; touch-action: none; display: grid; justify-items: center; gap: 3px; padding: 9px 4px 7px; min-height: 76px;
  background: #fffdf6; border: 2px solid #d8c29a; border-radius: 9px; box-shadow: 0 4px 0 #d8c29a; text-align: center; transition: transform .12s; }
.sf-fruit:hover { transform: translateY(-2px); }
.sf-fruit:active { transform: translateY(2px); box-shadow: 0 2px 0 #d8c29a; }
.sf-fruit.on { border-color: #e0a458; box-shadow: 0 4px 0 #c98a3c; background: #fff4de; }
.sf-fruit small { font-size: .66rem; font-weight: 700; color: #4a3a24; line-height: 1.2; }
.sf-ghost { position: fixed; z-index: 9999; width: 52px; height: 52px; margin: -26px 0 0 -26px; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.sf-empty { padding: 12px; background: #fff8ea; border: 2px dashed #e2cf9e; border-radius: 9px; text-align: center; }
@media (max-width: 560px) {
  .sf-stage { grid-template-columns: auto auto; }
  .sf-info { grid-column: 1 / -1; }
  .sf-list { grid-template-columns: repeat(3, 1fr); }
}

/* Bandenname */
.cn-wrap { display: grid; gap: 10px; }
.cn-flag { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(135deg, #3a2a1c, #5a4028); border-radius: 10px; box-shadow: 0 4px 0 #2a1c10; color: #ffe9b8; }
.cn-jolly { flex: none; width: 46px; height: 46px; display: grid; place-items: center; animation: cnWave 3s ease-in-out infinite; transform-origin: left center; }
.cn-jolly svg { width: 46px; height: 46px; }
@keyframes cnWave { 50% { transform: skewY(-4deg) scaleX(.96); } }
.cn-banner { display: grid; min-width: 0; }
.cn-banner small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.cn-banner b { font: 400 1.5rem 'Pirata One', 'Fredoka', serif; line-height: 1.1; overflow-wrap: anywhere; }
.cn-row { display: flex; gap: 8px; align-items: stretch; }
.cn-inp { flex: 1; min-width: 0; font-size: 1rem !important; }
.cn-go { flex: none; min-height: 44px; }

/* Anzeige an Spielerkarte, Rangliste, Steckbrief */
.pc2-crew { display: inline-flex; align-items: center; justify-self: start; margin-top: 3px; padding: 2px 9px; font: 400 .95rem 'Pirata One', 'Fredoka', serif; color: #ffe9b8; background: #3a2a1c; border-radius: 999px; box-shadow: 0 2px 0 #2a1c10; }
.lb-crewname { display: inline-block; margin-left: 5px; padding: 0 6px; font: 400 .74rem 'Pirata One', 'Fredoka', serif; color: #6b4a24; background: #f3e3c0; border-radius: 999px; vertical-align: 1px; }
.poster-crew { display: inline-flex; align-items: center; font: 400 .9rem 'Pirata One', 'Fredoka', serif; color: #5a3a1c; }
.sail-stage + .sz-banner, .sz-banner { margin-top: 10px; }
.sz-banner .sz-bt small { color: #dce8f6; opacity: 1; }
@media (min-width: 561px) { #stage .cards.loot { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.c3-fac.own { text-transform: none; letter-spacing: .02em; font: 400 .84rem 'Pirata One', 'Fredoka', serif; max-width: 72%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; }
.cn-jolly { background: #f6ecd4; border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.35); overflow: hidden; }
.cn-jolly svg { width: 46px; height: 46px; display: block; }
.c3-fac.own { display: inline-block; font-size: .76rem; line-height: 1.35; max-width: 66%; vertical-align: middle; }
@media (min-width: 561px) { #stage .cards.loot .loot-face .card-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15; } }

/* ===== Fork E: Remix ===== */
.twist-chip { background: #eef6f2; color: #2f6f5a; box-shadow: 0 0 0 2px #9cc9b4; }
.twist-chip b { color: #2f6f5a; }

/* ===== Fork B: Skilltree ===== */
.sk-room { display: grid; gap: 10px; }
.sk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sk-pts { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: #fffaf0; border: 2px solid #e2d2b0; border-radius: 12px; box-shadow: 0 3px 0 #e2d2b0; }
.sk-pts b { font-family: Fredoka, sans-serif; font-size: 1.6rem; line-height: 1; min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #efe4cc; color: #8a7a5a; }
.sk-pts span { font: 600 .82rem Fredoka, sans-serif; color: #5a4a30; }
.sk-pts.has { border-color: #e2b546; box-shadow: 0 3px 0 #c9982a; }
.sk-pts.has b { background: radial-gradient(circle at 35% 30%, #fff1a8, #f2c94c 55%, #d99a20); color: #5a3a0a; animation: skGlow 2.2s ease-in-out infinite; }
@keyframes skGlow { 50% { box-shadow: 0 0 0 5px rgba(242, 201, 76, .25); } }
.sk-srcs { display: flex; gap: 5px; flex-wrap: wrap; }
.sk-src { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 99px; background: #f6ead0; border: 1.5px solid #e2d2b0; font-size: .72rem; color: #6a5a40; }
.sk-src i { font-style: normal; font-size: .8rem; }
.sk-src b { color: #3a2a14; }
.sk-info { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px; background: #fffaf0; border: 2px solid #c9a46a; border-radius: 12px; box-shadow: 0 3px 0 #c9a46a; }
.sk-info.empty { justify-content: center; border-style: dashed; box-shadow: none; color: var(--mute); font-size: .82rem; text-align: center; }
.sk-big { flex: 0 0 44px; height: 44px; display: grid; place-items: center; font-style: normal; border-radius: 50%; background: #f6ead0; border: 2px solid #c9a46a; }
.sk-big svg { width: 30px; height: 30px; }
.sk-big .sprite, .sk-big canvas, .sk-big img { max-width: 36px; max-height: 36px; }
.sk-it { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sk-it small { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.sk-it b { font: 600 .98rem Fredoka, sans-serif; color: #3a2a14; }
.sk-it span { font-size: .8rem; color: #5a4a30; line-height: 1.3; }
.sk-learn { flex: 0 0 auto; min-height: 44px; }
.sk-done { color: var(--hp); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.sk-why { font-size: .74rem; color: #8a6a3a; max-width: 120px; text-align: right; line-height: 1.25; }
.sk-tree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sk-path { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 8px 4px 10px; border-radius: 14px; background: linear-gradient(#fbf3e2, #f3e6c8); border: 2px solid #e2d2b0; box-shadow: 0 3px 0 #e2d2b0; position: relative; }
.sk-schiff { background: linear-gradient(#e9f4f4, #f3e6c8 70%); }
.sk-herz { background: linear-gradient(#fbeaea, #f3e6c8 70%); }
.sk-ph { width: 100%; display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 4px; gap: 4px; }
.sk-ph b { font: 600 .82rem Fredoka, sans-serif; color: #3a2a14; display: inline-flex; gap: 3px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-ph b i { font-style: normal; }
.sk-ph small { font-size: .7rem; color: var(--mute); }
.sk-ship { position: relative; display: block; width: 64px; height: 40px; margin: 0 auto 2px; }
.sk-ship > svg, .sk-ship > .ship, .sk-ship > span { width: 64px; height: 40px; }
.sk-ship svg { max-width: 64px; max-height: 40px; }
.sk-part { position: absolute; width: 14px; height: 14px; font-style: normal; animation: skBob 2.4s ease-in-out infinite; }
.sk-part svg { width: 14px; height: 14px; }
.sk-part.p0 { left: -6px; bottom: 2px; } .sk-part.p1 { right: -6px; bottom: 4px; animation-delay: .4s; } .sk-part.p2 { left: 26px; top: -8px; animation-delay: .8s; }
.sk-part.p3 { right: 2px; top: 6px; animation-delay: 1.2s; } .sk-part.p4 { left: 4px; top: 4px; animation-delay: 1.6s; }
@keyframes skBob { 50% { transform: translateY(-2px); } }
.sk-trail { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.sk-trail::before { content: ''; position: absolute; top: 20px; bottom: 30px; left: 50%; width: 0; border-left: 3px dashed #c9a46a; transform: translateX(-50%); z-index: 0; }
.sk-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; min-width: 0; max-width: 100%; }
.sk-node .sk-ico { width: 46px; height: 46px; display: grid; place-items: center; font-style: normal; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffaf0, #efe2c4); border: 3px solid #b8a27a; box-shadow: 0 4px 0 #8a7450, inset 0 -3px 0 rgba(0, 0, 0, .06); transition: transform .12s; }
.sk-node .sk-ico svg, .sk-node .sk-ico .pxi { width: 26px; height: 26px; }
.sk-node .sk-ico .pxi svg { width: 26px; height: 26px; }
.sk-node small { font-size: .66rem; line-height: 1.1; color: #5a4a30; text-align: center; max-width: 92px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sk-node.lock .sk-ico { filter: grayscale(.9) opacity(.6); box-shadow: 0 3px 0 #b8a27a; }
.sk-node.lock small { color: #a09070; }
.sk-node.can .sk-ico { border-color: #e2b546; box-shadow: 0 4px 0 #c9982a, 0 0 0 4px rgba(242, 201, 76, .3); animation: skGlow 2.2s ease-in-out infinite; }
.sk-node.got .sk-ico { border-color: #4a9a4e; background: radial-gradient(circle at 35% 30%, #f4fff0, #cfe8c4); box-shadow: 0 4px 0 #2f6e33; }
.sk-node.sel .sk-ico, .sk-tal.sel .sk-face { transform: translateY(-2px) scale(1.06); outline: 3px solid #2f8f82; outline-offset: 2px; }
.sk-node:active .sk-ico, .sk-tal:active .sk-face { transform: translateY(2px); box-shadow: 0 1px 0 #8a7450; }
.sk-ok { position: absolute; top: -3px; right: 50%; margin-right: -30px; width: 18px; height: 18px; display: grid; place-items: center; font: 700 .7rem sans-serif; font-style: normal; color: #fff; background: #4a9a4e; border: 2px solid #fffaf0; border-radius: 50%; z-index: 2; }
.sk-cost { position: absolute; top: -3px; left: 50%; margin-left: -30px; min-width: 18px; height: 18px; display: grid; place-items: center; font: 700 .68rem Fredoka, sans-serif; font-style: normal; color: #5a3a0a; background: #f2c94c; border: 2px solid #fffaf0; border-radius: 99px; z-index: 2; }
.sk-node.pop .sk-ico, .sk-tal.pop .sk-face { animation: skPop .5s ease-out; }
@keyframes skPop { 40% { transform: scale(1.25) rotate(-6deg); } }
.sk-tal-h { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }
.sk-tal-h b { font: 600 .92rem Fredoka, sans-serif; color: #3a2a14; }
.sk-tal-h small { font-size: .72rem; color: var(--mute); }
.sk-tals { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.sk-tal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; min-width: 0; }
.sk-face { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 70%, #fff4d8, #f0dcb0); border: 3px solid #b8a27a; box-shadow: 0 4px 0 #8a7450; transition: transform .12s; }
.sk-face > * { max-width: 40px; max-height: 44px; }
.sk-tal small { font-size: .66rem; color: #5a4a30; }
.sk-tal.lock .sk-face { filter: grayscale(1) opacity(.55); }
.sk-tal.can .sk-face { border-color: #e2b546; box-shadow: 0 4px 0 #c9982a, 0 0 0 4px rgba(242, 201, 76, .3); }
.sk-tal.got .sk-face { border-color: #4a9a4e; box-shadow: 0 4px 0 #2f6e33; }
.sk-lk { position: absolute; top: -2px; right: 50%; margin-right: -32px; font-size: .7rem; font-style: normal; }
.sk-tal .sk-ok { margin-right: -32px; }
.sk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sk-foot small { color: var(--mute); font-size: .74rem; }
@media (min-width: 720px) {
  .sk-tree { gap: 14px; }
  .sk-node .sk-ico { width: 54px; height: 54px; }
  .sk-node .sk-ico svg, .sk-node .sk-ico .pxi, .sk-node .sk-ico .pxi svg { width: 30px; height: 30px; }
  .sk-node small { font-size: .74rem; }
  .sk-tals { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
.sk-node small { background: rgba(251, 243, 226, .94); padding: 1px 5px; border-radius: 7px; position: relative; z-index: 1; }
.sk-schiff .sk-node small { background: rgba(240, 240, 228, .94); }
.sk-trail { gap: 5px; }
.sk-ph { flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.sk-ph b { font-size: .78rem; white-space: normal; overflow: visible; justify-content: center; line-height: 1.1; word-break: break-word; }
.sk-ph small { padding: 0 6px; border-radius: 99px; background: rgba(255, 255, 255, .7); }
.sk-top { flex-direction: column; align-items: stretch; gap: 6px; }
.sk-pts { align-self: flex-start; }
@media (min-width: 720px) { .sk-top { flex-direction: row; align-items: center; } }

/* ===== Fork F: Ankleiden-Upgrades ===== */
.px-up { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; flex: none; image-rendering: pixelated; }
/* Grünes Abzeichen: so viele Plätze lassen sich verbessern */
.up-badge { position: absolute; top: 20px; left: 4px; z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px 2px 3px;
  background: #eaf8e6; border: 2px solid #3f9a52; border-radius: 999px; box-shadow: 0 2px 0 #2c7a3d; font: 800 .62rem/1 'Nunito', sans-serif; color: #1f6b33;
  animation: upPulse 2.4s ease-in-out infinite; }
.up-badge.sm { top: 4px; left: auto; right: 4px; }
.up-badge .px-up { width: 10px; height: 10px; }
@keyframes upPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .up-badge { animation: none; } }
.sqc { position: relative; }
.sqd-g.can-up { box-shadow: 0 0 0 2px #3fb85c; border-radius: 4px; }
.sq-best-all { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin: 10px 0 0; padding: 10px 14px; text-align: center;
  background: #3f9a52; color: #fffdf6; box-shadow: 0 3px 0 #22693a; font-weight: 800; }
.sq-best-all .px-up { width: 14px; height: 14px; margin-right: 4px; filter: brightness(1.6); }
.sq-best-all small { font-size: .72rem; font-weight: 600; opacity: .9; }

/* Ankleiden: Reiter mit Zahl, Plätze mit grünem Pfeil */
.dr-tab { position: relative; }
.dr-tabup { position: absolute; top: -4px; right: -4px; font: 800 .58rem/1 'Nunito', sans-serif; font-style: normal; color: #fff; background: #3f9a52;
  border-radius: 999px; padding: 2px 4px; box-shadow: 0 1px 0 #22693a; }
.dr-slot.can-up { border-color: #3f9a52; border-style: solid; background: #f1faee; box-shadow: 0 3px 0 #2c7a3d; }
.dr-slot.can-up.on { box-shadow: 0 0 0 3px #ffd34a, 0 3px 0 #2c7a3d; }
.dr-slot .dr-upchip { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); white-space: nowrap; font: 800 .6rem/1 'Nunito', sans-serif; font-style: normal;
  color: #fff; background: #3f9a52; padding: 3px 6px; border-radius: 999px; box-shadow: 0 2px 0 #22693a; }
.dress-pop .dr-col { gap: 14px; }
/* Hinweisleiste unter der Bühne: was lässt sich verbessern, ein Knopf */
.dr-hintbar { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 9px 10px 9px 12px; border-radius: 10px;
  background: #fffaf0; border: 2px solid #c9b48c; box-shadow: 0 3px 0 #c9b48c; text-align: left; }
.dr-hintbar.up { background: #eef9ea; border-color: #3f9a52; box-shadow: 0 3px 0 #2c7a3d; }
.dr-hintbar > span { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.35; color: #2f4a2f; }
.dr-hintbar > span .px-up { margin-right: 4px; }
.dr-hintbar em { font-style: normal; font-weight: 800; color: #1f6b33; white-space: nowrap; }
.dr-hintbar .btn { flex: none; margin: 0; background: #3f9a52; box-shadow: 0 3px 0 #22693a; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dr-hintbar .btn .px-up { filter: brightness(1.6); }
.dress-pop .dr-empty { margin: 12px 4px 0; font-size: .82rem; color: var(--mute); }
/* Truhe: das beste Teil für den gewählten Platz hervorheben */
.dr-it.best { position: relative; }
.dr-it.best > :first-child { box-shadow: 0 0 0 3px #3fb85c, 0 3px 0 #2c7a3d; border-radius: 6px; }
.dr-it.best::after { content: 'Bestes'; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font: 800 .55rem/1 'Nunito', sans-serif;
  color: #fff; background: #3f9a52; padding: 2px 5px; border-radius: 999px; pointer-events: none; }
.dr-filter .sqc-f { position: relative; }
.dr-filter .sqc-f.can-up { border-color: #3f9a52; }
.dr-filter .f-up { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: .55rem; color: #fff; background: #3f9a52; border-radius: 999px; padding: 1px 3px; line-height: 1.1; }
.dress-pop .dr-chest { margin-top: 12px; }
.dress-pop .dr-grid { row-gap: 12px; }
@media (max-width: 420px) {
  .dr-hintbar { flex-wrap: wrap; }
  .dr-hintbar .btn { width: 100%; justify-content: center; min-height: 42px; }
}
.sq-best-all { display: block; }
.sq-best-all small { display: block; margin-top: 2px; }
.dr-hintbar + .dr-detail { margin-top: 10px; }

/* ===== Fork G: Feinschliff ===== */
/* Eigene Kulissen auf den Crew-Karten: Heimat oder Lieblingsort der Figur */
.c3-stage.cs-foosha { background: linear-gradient(#ffd9a8, #fff0d0 62%); }
.c3-stage.cs-foosha .cs-hill { right: 40%; }
.cs-mill { bottom: 30%; left: 12%; width: 12px; height: 26px; background: #f2e6cf; border: 1px solid #8a6a4a; }
.cs-mill::before { content: ''; position: absolute; left: -3px; top: -6px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 6px solid #a5502f; }
.cs-blades { position: absolute; left: 5px; top: 2px; width: 2px; height: 2px; animation: csSpin 4s linear infinite; }
.cs-blades::before, .cs-blades::after { content: ''; position: absolute; left: -11px; top: 0; width: 24px; height: 3px; background: #6b4a2a; }
.cs-blades::after { transform: rotate(90deg); }
@keyframes csSpin { to { transform: rotate(360deg); } }
.cs-hatsign { bottom: 23%; right: 10%; width: 18px; height: 6px; background: #f2c94c; border: 1px solid #8a6a20; border-radius: 50%; box-shadow: inset 0 -2px 0 #d23a2a; }
.c3-stage.cs-dojo { background: linear-gradient(#e9d7b2, #f6ead0); }
.c3-stage.cs-dojo .cs-sea, .c3-stage.cs-dojo .cs-cloud { display: none; }
.cs-wall { left: 0; right: 0; top: 0; bottom: 22%; background: repeating-linear-gradient(90deg, #f3e6c8 0 22px, #8a6a44 22px 24px), #f3e6c8; opacity: .85; }
.cs-rack { bottom: 30%; left: 7%; width: 22px; height: 18px; border-left: 2px solid #5a3a1c; border-right: 2px solid #5a3a1c; background: linear-gradient(#2e2e36, #2e2e36) 0 3px / 100% 2px no-repeat, linear-gradient(#cfd6e0, #cfd6e0) 0 9px / 100% 2px no-repeat, linear-gradient(#a03a2a, #a03a2a) 0 15px / 100% 2px no-repeat; }
.cs-dummy { bottom: 22%; right: 9%; width: 8px; height: 26px; background: #b88a54; border: 1px solid #5a3a1c; border-radius: 4px 4px 1px 1px; }
.cs-dummy::after { content: ''; position: absolute; top: 8px; left: -6px; width: 18px; height: 3px; background: #8a6a3a; }
.c3-stage.cs-dojo .cs-ground { background: repeating-linear-gradient(90deg, #c9a36a 0 18px, #b48d55 18px 20px); border-top-color: #7a5a30; }
.c3-stage.cs-orchard { background: linear-gradient(#bfe3f2, #effaf2 62%); }
.c3-stage.cs-orchard .cs-sea { display: none; }
.cs-mtree { bottom: 22%; width: 4px; height: 20px; background: #7a4e28; }
.cs-mtree::after { content: ''; position: absolute; left: -10px; top: -14px; width: 24px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 40%, #f39a2a 0 2px, transparent 3px), radial-gradient(circle at 70% 55%, #f39a2a 0 2px, transparent 3px), radial-gradient(circle at 50% 25%, #f39a2a 0 2px, transparent 3px), #4f9a4a; border: 1px solid #2e5a2a; }
.cs-mtree.a { left: 12%; } .cs-mtree.b { right: 12%; height: 26px; } .cs-mtree.c { left: 32%; height: 14px; opacity: .8; transform: scale(.8); }
.c3-stage.cs-orchard .cs-ground { background: linear-gradient(#9ccc7a, #7ab05a); border-top-color: #4a844a; }
.c3-stage.cs-syrup { background: linear-gradient(#cfe8f4, #f4f8ea 62%); }
.c3-stage.cs-syrup .cs-sea { display: none; }
.cs-fence { bottom: 22%; left: 4%; width: 34px; height: 10px; background: repeating-linear-gradient(90deg, #b88a54 0 3px, transparent 3px 8px); border-top: 2px solid #8a6a3a; }
.cs-target { bottom: 34%; right: 10%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(#d23a2a 0 2px, #fff 2px 4px, #d23a2a 4px 6px, #fff 6px 8px); border: 1px solid #6b2a1a; }
.c3-stage.cs-syrup .cs-ground { background: linear-gradient(#a8d08a, #86b46a); border-top-color: #5a8a4a; }
.c3-stage.cs-baratie { background: linear-gradient(#a8d8f0, #e4f4fb 62%); }
.cs-fishboat { bottom: 34%; right: 4%; width: 44px; height: 14px; background: #e8a24a; border: 1px solid #8a5a20; border-radius: 0 50% 50% 0 / 0 60% 60% 0; animation: csBob 3.4s ease-in-out infinite; }
.cs-fishboat::before { content: ''; position: absolute; left: -8px; top: 1px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 9px solid #e8a24a; }
.cs-fishboat::after { content: ''; position: absolute; left: 10px; top: -12px; width: 22px; height: 12px; background: #fff7e6; border: 1px solid #8a5a20; box-shadow: inset 4px 3px 0 -1px #7ab8e0; }
.cs-pot { bottom: 22%; left: 8%; width: 16px; height: 11px; background: #3a3a44; border-radius: 0 0 6px 6px; }
.cs-steam { position: absolute; left: 4px; top: -10px; width: 4px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.85); animation: csSteam 2s ease-in infinite; }
@keyframes csSteam { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-12px); opacity: 0; } }
.c3-stage.cs-baratie .cs-ground { background: repeating-linear-gradient(90deg, #b58049 0 16px, #a26f3d 16px 18px); border-top-color: #6b4422; }
.c3-stage.cs-snow { background: linear-gradient(#9fb8d8, #e4eef8 70%); }
.c3-stage.cs-snow .cs-sea { display: none; }
.cs-peak { bottom: 22%; right: 6%; width: 26px; height: 52%; background: #f2f6fa; border: 1px solid #a8b8c8; border-radius: 2px 2px 0 0; box-shadow: inset -6px 0 0 #d4dee8; }
.cs-peak::after { content: ''; position: absolute; left: 6px; top: -7px; width: 12px; height: 7px; background: #c86a8a; border-radius: 6px 6px 0 0; }
.cs-flake { top: -8%; width: 3px; height: 3px; background: #fff; animation: csSnow 5s linear infinite; }
.cs-flake.a { left: 18%; } .cs-flake.b { left: 52%; animation-delay: -2s; } .cs-flake.c { left: 78%; animation-delay: -3.6s; }
@keyframes csSnow { to { transform: translate(6px, 110px); } }
.c3-stage.cs-snow .cs-ground { background: linear-gradient(#fbfdff, #e2ecf4); border-top-color: #b8c8d8; }
.c3-stage.cs-ruins { background: linear-gradient(#5a4a7a, #b89ac8 75%); }
.c3-stage.cs-ruins .cs-sea { display: none; } .c3-stage.cs-ruins .cs-cloud { opacity: .3; }
.cs-pillar { bottom: 22%; width: 9px; height: 44%; background: repeating-linear-gradient(#c8bca8 0 8px, #b4a890 8px 9px); border: 1px solid #6a5a48; }
.cs-pillar.a { left: 8%; } .cs-pillar.b { right: 10%; height: 30%; }
.cs-glyph { bottom: 22%; left: 24%; width: 18px; height: 14px; background: #3a4a5a; border: 1px solid #1a2a3a; box-shadow: inset 3px 3px 0 -2px #7ad0c8, inset -4px -4px 0 -3px #7ad0c8; }
.c3-stage.cs-ruins .cs-ground { background: linear-gradient(#a89a80, #8a7c64); border-top-color: #6a5a48; }
.c3-stage.cs-dock { background: linear-gradient(#a8d0ea, #e6f2f8 62%); }
.cs-crane { bottom: 22%; left: 8%; width: 4px; height: 58%; background: #c2412f; }
.cs-crane::after { content: ''; position: absolute; top: 0; left: 0; width: 34px; height: 3px; background: #c2412f; }
.cs-crane::before { content: ''; position: absolute; top: 3px; left: 28px; width: 1px; height: 18px; background: #3a3a44; }
.cs-cola { bottom: 22%; right: 10%; width: 14px; height: 16px; background: #8a4a22; border: 1px solid #4a2410; border-radius: 4px; box-shadow: inset 0 4px 0 -2px #d8a24a, inset 0 -4px 0 -2px #d8a24a; }
.c3-stage.cs-dock .cs-ground { background: repeating-linear-gradient(90deg, #9a9aa4 0 14px, #86868f 14px 16px); border-top-color: #5a5a64; }
.c3-stage.cs-mist { background: linear-gradient(#2a3048, #5a6480 75%); }
.c3-stage.cs-mist .cs-cloud { display: none; }
.c3-stage.cs-mist .cs-sea { background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 10px, transparent 10px 26px), linear-gradient(#3a4a6a, #2a3450); }
.cs-ghostship { bottom: 38%; right: 8%; width: 34px; height: 10px; background: #4a4458; border-radius: 0 0 8px 8px; opacity: .8; animation: csBob 4s ease-in-out infinite; }
.cs-ghostship::after { content: ''; position: absolute; left: 10px; bottom: 10px; width: 14px; height: 16px; background: repeating-linear-gradient(#6a6478 0 3px, transparent 3px 5px); }
.cs-fog { bottom: 26%; left: -20%; width: 70%; height: 10px; border-radius: 10px; background: rgba(220,228,240,.35); animation: csFog 9s ease-in-out infinite alternate; }
.cs-fog.b { bottom: 34%; left: 40%; animation-delay: -4s; }
@keyframes csFog { to { transform: translateX(30px); } }
.c3-stage.cs-mist .cs-ground { background: linear-gradient(#4a4a58, #3a3a46); border-top-color: #2a2a34; }
.c3-stage.cs-sky { background: linear-gradient(#6ab8ee, #d4ecfb 70%); }
.c3-stage.cs-sky .cs-sea { display: none; }
.cs-bell { top: 18%; right: 12%; width: 16px; height: 16px; background: #f2c94c; border: 1px solid #a07a20; border-radius: 8px 8px 2px 2px; box-shadow: 0 0 10px 2px rgba(255,220,120,.6); animation: csBob 3s ease-in-out infinite; }
.cs-puff { bottom: 20%; width: 30px; height: 12px; background: #fff; border-radius: 10px; box-shadow: 10px -6px 0 #fff; }
.cs-puff.a { left: 4%; } .cs-puff.b { right: 2%; }
.c3-stage.cs-sky .cs-ground { background: linear-gradient(#ffffff, #e8f2fa); border-top-color: #c8dcea; }
:root[lang="en"] .dr-it.best::after { content: 'Best'; }
/* Album am Handy: Karten kompakter, Texte auf zwei Zeilen begrenzt (voller Text per Tipp im Steckbrief) */
@media (max-width: 560px) {
  .acard-card .c3-style, .acard-card .c3-ab > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .acard-card .c3-ab > span.c3-trait { display: none; }
  .acard-card .c3-ult { margin-top: 5px; }
}
@media (max-width: 560px) {
  .acard-card.open .c3-style, .acard-card.open .c3-ab > span { -webkit-line-clamp: unset; display: block; }
  .acard-card.open .c3-ab > span.c3-trait { display: block; }
  .acard-card { cursor: pointer; }
}
/* Album: Unentdecktes klein und hübsch statt großer grauer Kästen */
.acard.unknown { position: relative; background: repeating-linear-gradient(135deg, #fbf3e0 0 8px, #f6ead0 8px 16px); border: 2px dashed #e0cc9e; }
.acard.unknown.k-relic .acard-art svg { filter: grayscale(.6) brightness(.95); opacity: .7; }
.acard.unknown.k-relic .acard-art::after, .acard.unknown.k-fruit .acard-art::after { content: '?'; position: absolute; margin: 18px 0 0 26px; font: 700 1rem/1 'Pixelify Sans', monospace; color: #fff; background: #c08a2e; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; box-shadow: 0 2px 0 #8a5a1a; }
.acard.unknown .acard-art { position: relative; }
.acard.unknown.k-boss .acard-art { border-radius: 4px; background: linear-gradient(#f3e2b4, #e8cf92); border: 2px solid #b08a4a; box-shadow: 0 3px 0 #8a6a34; width: 64px; height: 76px; padding-top: 10px; }
.acard.unknown.k-boss .acard-art::before { content: 'WANTED'; position: absolute; top: 3px; left: 0; right: 0; text-align: center; font: 700 .55rem/1 'Pixelify Sans', monospace; letter-spacing: .08em; color: #6b4422; }
.acard.unknown.k-boss .acard-art svg { opacity: .55; width: 40px; height: 48px; }
@media (max-width: 560px) {
  .agrid { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .agrid > * { grid-column: span 3; min-width: 0; }
  .agrid > .acard.unknown { grid-column: span 2; padding: 8px 4px; gap: 2px; }
  .agrid > .acard.unknown .acard-art { width: 48px; height: 48px; }
  .agrid > .acard.unknown.k-boss .acard-art { width: 50px; height: 60px; }
  .agrid > .acard.unknown .acard-art svg { width: 34px; height: 40px; }
  .agrid > .acard.unknown .acard-art .icon { width: 30px; height: 30px; }
  .agrid > .acard.unknown b { font-size: .95rem; }
  .agrid > .acard.unknown small { font-size: .66rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .agrid > .acard.unknown .no { margin-bottom: -10px; font-size: .62rem; }
  .agrid > .acard.unknown.k-relic .acard-art::after, .agrid > .acard.unknown.k-fruit .acard-art::after { margin: 12px 0 0 18px; width: 16px; height: 16px; font-size: .8rem; }
  .agrid { grid-auto-flow: dense; }
}
@media (max-width: 560px) {
  .album-head { align-items: center; }
  .album-head h2 { font-size: 1.45rem !important; white-space: nowrap; }
  .album-head .hint { margin: 2px 0 0; font-size: .8rem; }
  .album-head .btn { padding: 8px 12px; font-size: .85rem; flex: none; }
}
/* Kapitänsbuch: Rang-Karte am Handy ohne Überlauf */
.rank-top > *, .rank-body { min-width: 0; }
.rank-body .event-kicker { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .rank-v2 { padding: 12px; }
  .rank-v2 .rank-name { font-size: 1.3rem; line-height: 1.15; overflow-wrap: anywhere; }
  .rank-top { gap: 10px; }
  .rank-body small { font-size: .78rem; }
  .duel-head b { font-size: 1.15rem !important; }
  .duel-head small { font-size: .78rem; line-height: 1.35; }
}
/* Kapitänsbuch: Schnellknöpfe als vier App-Kacheln mit Pixel-Icons */
.pf-quick { grid-template-columns: repeat(4, 1fr) !important; }
.pf-quick .btn { display: flex !important; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px 8px !important; font-size: .78rem !important; line-height: 1.1; min-width: 0; }
.pf-quick .btn .pxi, .pf-quick .btn .pxi svg { width: 24px; height: 24px; display: block; }
.pf-quick .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rank-body .event-kicker { display: inline-block; max-width: 100%; font-size: .62rem; }
/* Zweitkonto-Kasten */
.acct-box .acct-btns { display: flex; flex-direction: column; gap: 6px; flex: none; }
.acct-box .acct-btns .btn { margin-top: 0; }
.rank-body .event-kicker { box-sizing: border-box; white-space: normal; line-height: 1.25; }
.rank-body .rank-bar { max-width: 100%; box-sizing: border-box; }
:root:not([data-theme="dark"]) .rank-body .event-kicker { width: auto; max-width: 100%; box-sizing: border-box; white-space: normal; font-size: .62rem; }
.rank-body { grid-template-columns: minmax(0, 1fr); }
/* Schatzkammer: noch nicht gefundene Artefakte als kleine Rätseltruhe statt Fragezeichen-Kasten */
.vk-tile.locked { background: repeating-linear-gradient(135deg, #fbf3e0 0 8px, #f6ead0 8px 16px) !important; }
.vk-ico.vk-myst { position: relative; display: grid; place-items: center; }
.vk-ico.vk-myst .pxi, .vk-ico.vk-myst svg { width: 30px; height: 30px; filter: grayscale(.5); opacity: .75; }
.vk-tile.fruit.locked .vk-ico.vk-myst svg { filter: brightness(0); opacity: .25; }
.vk-q { position: absolute; right: -6px; bottom: -4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; background: #c08a2e; color: #fff; font: 700 .72rem/1 'Pixelify Sans', monospace; font-style: normal; box-shadow: 0 2px 0 #8a5a1a; }
/* Aufträge: Pixel-Icon in einer kleinen Holzplakette */
.quest .q-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(#fbecc8, #f0d9a4); border: 2px solid #d9b46a; box-shadow: 0 2px 0 #b98a3e; }
.quest .q-ico svg, .quest .q-ico .pxi, .quest .q-ico .px { width: 26px; height: 26px; display: block; }
.quest.done .q-ico { background: linear-gradient(#e2f4d4, #c6e6b0); border-color: #7ab05a; box-shadow: 0 2px 0 #5a8a3a; }
.quests .q-head b { display: none; }
/* Wiki-Reiter: 3 × 2 statt 4 + 2, kleine 3D-Plaketten */
.wk-tabs { grid-template-columns: repeat(3, 1fr) !important; }
.wk-tab { min-height: 36px; border-radius: 8px !important; box-shadow: 0 2px 0 #c9a46a; }
.wk-tab.on { box-shadow: 0 2px 0 #3a2410; }
@media (min-width: 700px) { .wk-tabs { grid-template-columns: repeat(6, 1fr) !important; } }
/* Hafen: Raum-Kacheln dürfen nicht über den Rand laufen (lange Namen wie „Schatzkammer“) */
.hq > *, .hub { min-width: 0; }
.hub-tile { min-width: 0; }
.hub-tile b { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.hub-tile small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) { .hub-tile b { font-size: .74rem; } }
/* Hafen-Bühne: Sprechblase der vordersten Figur nicht links abschneiden, hintere nach links öffnen */
.ss-dock > .ss-mate:nth-child(-n+3) .ss-say { left: 0; }
.ss-dock > .ss-mate:nth-child(n+5) .ss-say { left: auto; right: -6px; text-align: left; }
.ss-dock > .ss-mate:nth-child(n+5) .ss-say::after { left: auto; right: 14px; }
.ss-mate .ss-say { animation: say-in2 .35s ease-out both, say-bob2 3s ease-in-out .4s infinite; }
@keyframes say-in2 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes say-bob2 { 50% { transform: translateY(-2px); } }

/* ===== Kampf: nichts springt mehr (feste Textzeile, feste Daumen-Leiste unten am Handy) ===== */
.stage:has(#field) .battle-head { min-height: 46px; }
.stage:has(#field) #log { height: 3.4em; min-height: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; padding-top: 8px; padding-bottom: 8px; box-sizing: content-box; }
@media (max-width: 560px) {
  .stage:has(#field) { padding-bottom: 104px; }
  .stage:has(#field) .dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; margin: 0;
    background: rgba(255, 250, 238, .94); border-radius: 18px; padding: 8px; box-shadow: 0 6px 20px rgba(60, 35, 15, .25); backdrop-filter: blur(4px); }
  .stage:has(#field) .dock .fbar { margin: 0; }
}
.pause-pop { text-align: center; max-width: 360px; }
.pause-pop .pz-ico { font-size: 2.4rem; width: 70px; height: 70px; margin: 4px auto 6px; display: grid; place-items: center; border-radius: 50%; background: #fff3c4; box-shadow: inset 0 -4px 0 #e2c27a, 0 3px 0 #b88a3a; }
.pause-pop p { line-height: 1.45; }
.pause-btn { font-weight: 700; }
/* Hinweis statt Alles-auf-einen-Klick (Felix: selbst ausrüsten soll Spaß machen) */
.sq-best-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 4px; padding: 9px 12px; border-radius: 12px; background: #e9f6e2; border: 2px solid #9fd08a; color: #2f5a22; }
.sq-best-hint svg { width: 18px; height: 18px; }
.sq-best-hint b { font: 600 .92rem Fredoka, sans-serif; }
.sq-best-hint small { flex-basis: 100%; font-size: .78rem; color: #4d6e40; }
.dr-hint-tip { font-size: .78rem; color: #3f6a2e; font-weight: 600; white-space: nowrap; }

/* ===== Fork I: Schatz-Karten ===== */
#stage .cards.loot .opt.card.tc-opt { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; border-radius: 16px; min-height: 0; animation: tc-pop .45s cubic-bezier(.2, 1.4, .4, 1) backwards; }
#stage .cards.loot .opt.card.tc-opt:nth-child(2) { animation-delay: .09s; }
#stage .cards.loot .opt.card.tc-opt:nth-child(3) { animation-delay: .18s; }
#stage .cards.loot .opt.card.tc-opt:nth-child(4) { animation-delay: .27s; }
@keyframes tc-pop { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.tc-face { --c: #a8753c; --cd: #6b4424; --ch: #d9b36a; display: flex; flex-direction: column; align-items: stretch; height: 100%; text-align: center;
  background: linear-gradient(180deg, #fff9ea, #f6e8c8); border: 3px solid var(--cd); border-radius: 16px; box-shadow: 0 4px 0 var(--cd), 0 8px 16px rgba(70, 40, 15, .16); overflow: hidden; position: relative; }
.tc-rare { --c: #3f86b8; --cd: #24557a; --ch: #9fd3f0; }
.tc-epic { --c: #8a55c8; --cd: #55307f; --ch: #d4b4f5; }
.tc-legendary { --c: #e0a030; --cd: #9a6a14; --ch: #ffe08a; }
.tc-awakened { --c: #d9483a; --cd: #8a2a20; --ch: #ffb39a; }
.tc-unique { --c: #2f9a8a; --cd: #1d6158; --ch: #a8ece0; }
/* Bühne: Lichtstrahlen, Truhe, schwebendes Item, Funkeln */
.tc-stage { position: relative; display: block; height: 128px; overflow: hidden; background: radial-gradient(circle at 50% 62%, var(--ch) 0, transparent 62%), linear-gradient(180deg, #3b2a4a 0%, #5a3d52 55%, #7a5238 100%); border-bottom: 3px solid var(--cd); }
.tc-rays { position: absolute; left: 50%; top: 62%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; opacity: .55;
  background: repeating-conic-gradient(from 0deg, var(--ch) 0 9deg, transparent 9deg 24deg); animation: tc-spin 14s linear infinite; -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); }
@keyframes tc-spin { to { transform: rotate(360deg); } }
.tc-glow { position: absolute; left: 50%; top: 58%; width: 90px; height: 50px; margin: -25px 0 0 -45px; border-radius: 50%; background: var(--ch); filter: blur(14px); opacity: .8; }
.tc-chest { position: absolute; left: 50%; bottom: 8px; width: 92px; height: auto; margin-left: -46px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.tc-item { position: absolute; left: 50%; bottom: 46px; width: 58px; height: 58px; margin-left: -29px; display: grid; place-items: center; animation: tc-bob 2.4s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--ch)) drop-shadow(0 3px 0 rgba(0,0,0,.3)); z-index: 2; }
.tc-item svg { width: 100%; height: 100%; }
.tc-ped ~ .tc-item { bottom: 38px; }
@keyframes tc-bob { 50% { transform: translateY(-6px); } }
.tc-sp { position: absolute; color: #fff6c8; font-style: normal; font-size: 13px; text-shadow: 0 0 6px var(--ch); animation: tc-tw 2.2s ease-in-out infinite; z-index: 3; }
.tc-sp.a { left: 24%; top: 22%; } .tc-sp.b { right: 22%; top: 34%; animation-delay: .7s; font-size: 10px; } .tc-sp.c { left: 34%; top: 58%; animation-delay: 1.4s; font-size: 11px; }
@keyframes tc-tw { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.1); } }
/* Info: Schleife, Holzschild, Pergament, Nehmen-Schild */
.tc-info { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px 10px; flex: 1; }
.tc-rib { font: 600 .7rem/1 'Pixelify Sans', 'Fredoka', sans-serif; letter-spacing: .03em; color: #fff; background: var(--c); padding: 4px 9px; border-radius: 6px; box-shadow: 0 2px 0 var(--cd); margin-top: -20px; position: relative; z-index: 4; white-space: nowrap; }
.tc-sign { font: 600 1.02rem/1.15 'Fredoka', sans-serif; color: #fff7e4; padding: 6px 12px; border-radius: 8px; max-width: 100%; overflow-wrap: anywhere;
  background: repeating-linear-gradient(180deg, #9a6838 0 6px, #8c5d31 6px 12px); border: 2px solid #5e3b1d; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 #5e3b1d; text-shadow: 0 1px 0 #4a2d16; }
.tc-text { font-size: .84rem; line-height: 1.35; color: #4a3826; padding: 6px 8px; background: #fbf1d6; border-radius: 6px; border: 1px dashed #d6bd8a; width: 100%; box-sizing: border-box; }
.tc-ben { margin: 0 !important; }
.tc-take { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 120px; padding: 0 16px; border-radius: 10px;
  font: 600 .9rem 'Fredoka', sans-serif; color: #fffdf6; background: var(--c); box-shadow: 0 4px 0 var(--cd); transition: transform .1s; }
.tc-take-b { display: none; }
.opt.card.tc-opt.picked .tc-take { background: #4f9a5a; box-shadow: 0 4px 0 #2f6a38; }
.opt.card.tc-opt.picked .tc-take-a { display: none; } .opt.card.tc-opt.picked .tc-take-b { display: inline; }
.opt.card.tc-opt:active .tc-take { transform: translateY(3px); box-shadow: 0 1px 0 var(--cd); }
.opt.card.tc-opt.picked { outline: none !important; transform: translateY(-4px) !important; }
.opt.card.tc-opt.picked .tc-face { border-color: #4f9a5a; box-shadow: 0 4px 0 #2f6a38, 0 0 0 3px rgba(79,154,90,.35), 0 10px 20px rgba(40,90,40,.25); }
.opt.card.tc-opt.unpicked { opacity: .7; }
.tc-legendary .tc-face, .tc-face.tc-legendary { box-shadow: 0 4px 0 var(--cd), 0 0 18px rgba(224,160,48,.55); }
.tc-face.tc-epic { box-shadow: 0 4px 0 var(--cd), 0 0 14px rgba(138,85,200,.4); }
.opt.card.tc-opt > .key { z-index: 5; }
.opt.card.tc-opt.is-tip > .tip-badge { z-index: 6; }
.opt.loot-opt.tc-opt.lr-epic, .opt.loot-opt.tc-opt.lr-legendary { box-shadow: none !important; }
.opt.loot-opt.tc-opt.lr-legendary::after { display: none; }
/* Handy: Truhe links, Infos rechts — kompakt und mit dem Daumen gut zu treffen */
@media (max-width: 560px) {
  #stage .cards.loot { grid-template-columns: 1fr !important; gap: 12px !important; }
  .tc-face { flex-direction: row; text-align: left; }
  .tc-stage { width: 112px; height: auto; min-height: 120px; flex: none; border-bottom: 0; border-right: 3px solid var(--cd); }
  .tc-chest { width: 80px; margin-left: -40px; }
  .tc-item { width: 50px; height: 50px; margin-left: -25px; bottom: 42px; }
  .tc-info { align-items: flex-start; padding: 8px 10px 10px; gap: 5px; }
  .tc-rib { margin-top: 0; }
  .tc-sign { font-size: .98rem; padding: 4px 10px; }
  .tc-text { font-size: .82rem; padding: 4px 7px; }
  .tc-take { align-self: stretch; min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .tc-rays, .tc-item, .tc-sp, #stage .cards.loot .opt.card.tc-opt { animation: none !important; } }
/* Fork I: Beute größer über dem Podest */
.tc-item { width: 72px; height: 72px; margin-left: -36px; bottom: 40px; }
.tc-ped ~ .tc-item { bottom: 40px; }
@media (max-width: 560px) { .tc-item, .tc-ped ~ .tc-item { width: 62px; height: 62px; margin-left: -31px; bottom: 36px; } .tc-chest { width: 76px; margin-left: -38px; } }

/* ===== Fork J: Builds ===== */
.build-chip { background: #fff4d8; border-color: #e6c27a; }
.build-chip small { color: #c08a2e; font-size: .7rem; margin-left: 2px; letter-spacing: -1px; }
.build-chip.b-kraft { background: #fde4dc; border-color: #e8a08a; }
.build-chip.b-klinge { background: #e3f1e6; border-color: #93c4a0; }
.build-chip.b-technik { background: #e2eefa; border-color: #93b6dc; }
.build-chip.b-helfer { background: #e6f6e3; border-color: #9fd08a; }
.build-chip.b-brecher { background: #ece6f6; border-color: #b4a2d8; }
.crack { display: block; margin: 4px 0 2px; padding: 6px 10px; border-radius: 10px; background: #fff8e6; border: 1px dashed #e0c48a; font-size: .82rem; line-height: 1.35; color: var(--ink); }
.crack b { color: var(--wood); font-weight: 700; }
.crack i { font-style: normal; font-weight: 700; white-space: nowrap; }
.co-foe .crack { font-size: .74rem; padding: 4px 8px; margin-top: 4px; }
.sum-build { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 8px 12px; border-radius: 12px; background: #fff4d8; border: 2px solid #e6c27a; box-shadow: 0 2px 0 #e6c27a; }
.sum-build > i { font-style: normal; font-size: 1.5rem; flex: none; width: 36px; text-align: center; }
.sum-build b { display: block; font: 600 .98rem Fredoka, sans-serif; }
.sum-build small { display: block; font-size: .78rem; color: var(--mute); line-height: 1.3; }
.sum-build.none { background: #f6f1e3; border-color: #e4d6b4; box-shadow: 0 2px 0 #e4d6b4; }
.sum-build.b-kraft { background: #fde4dc; border-color: #e8a08a; box-shadow: 0 2px 0 #e8a08a; }
.sum-build.b-technik { background: #e2eefa; border-color: #93b6dc; box-shadow: 0 2px 0 #93b6dc; }
.sum-build.b-klinge { background: #e3f1e6; border-color: #93c4a0; box-shadow: 0 2px 0 #93c4a0; }
.sum-build.b-helfer { background: #e6f6e3; border-color: #9fd08a; box-shadow: 0 2px 0 #9fd08a; }

/* ===== Schatz-Karten ruhiger (Felix: Leuchten zu viel, Felder zu groß, Schilder wie aus Word) ===== */
.tc-rays, .tc-sp, .tc-glow { display: none !important; }
.tc-face { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 3px 0 var(--line); }
.tc-face.tc-rare { border-color: #9fc6e2; box-shadow: 0 3px 0 #9fc6e2; }
.tc-face.tc-epic { border-color: #c9b0ea; box-shadow: 0 3px 0 #c9b0ea; }
.tc-face.tc-legendary { border-color: #e8c472; box-shadow: 0 3px 0 #e8c472; }
.tc-face.tc-awakened { border-color: #e9a092; box-shadow: 0 3px 0 #e9a092; }
.tc-face.tc-unique { border-color: #93d2c6; box-shadow: 0 3px 0 #93d2c6; }
.tc-stage { height: 96px; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--ch) 45%, #fff) 0, var(--panel-2) 70%); border-bottom: 2px solid var(--line); }
.tc-item { width: 52px !important; height: 52px !important; margin-left: -26px !important; bottom: 30px !important; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); animation-duration: 3s; }
.tc-chest { width: 64px !important; margin-left: -32px !important; bottom: 4px; }
.tc-info { gap: 4px; padding: 8px 10px 10px; }
.tc-rib { margin-top: 0; font: 600 .68rem/1 'Fredoka', sans-serif; letter-spacing: 0; background: transparent; color: var(--cd); box-shadow: none; padding: 0; }
.tc-sign { background: none; border: 0; box-shadow: none; padding: 0; color: var(--ink); text-shadow: none; font: 600 1rem/1.2 'Fredoka', sans-serif; }
.tc-text { background: none; border: 0; padding: 0; font-size: .82rem; color: var(--mute); }
.tc-take { min-height: 36px; min-width: 0; padding: 0 14px; border-radius: 10px; font: 700 .85rem 'Nunito', sans-serif; background: var(--btn); color: var(--btnink); box-shadow: 0 3px 0 var(--btnedge); }
.opt.card.tc-opt:active .tc-take { box-shadow: 0 0 0 var(--btnedge); }
@media (max-width: 560px) {
  .tc-stage { width: 80px; min-height: 0; height: auto; border-right: 2px solid var(--line); border-bottom: 0; }
  .tc-item { width: 46px !important; height: 46px !important; margin-left: -23px !important; bottom: 26px !important; }
  .tc-chest { width: 56px !important; margin-left: -28px !important; }
  .tc-info { padding: 8px 10px; }
  .tc-take { align-self: flex-end; min-height: 38px; padding: 0 18px; }
  #stage .cards.loot { gap: 10px !important; }
}
/* Seltenheit nur als leiser Schimmer, gestaffelt: gewöhnlich nichts, selten ein Hauch, episch etwas mehr, legendär warm */
.tc-stage { background: var(--panel-2); }
.tc-rare .tc-stage, .tc-face.tc-rare .tc-stage { background: radial-gradient(circle at 50% 75%, rgba(120, 175, 215, .18) 0, transparent 65%), var(--panel-2); }
.tc-epic .tc-stage, .tc-face.tc-epic .tc-stage { background: radial-gradient(circle at 50% 75%, rgba(160, 120, 210, .26) 0, transparent 68%), var(--panel-2); }
.tc-legendary .tc-stage, .tc-face.tc-legendary .tc-stage { background: radial-gradient(circle at 50% 75%, rgba(232, 180, 80, .34) 0, transparent 72%), var(--panel-2); }
.tc-awakened .tc-stage, .tc-face.tc-awakened .tc-stage { background: radial-gradient(circle at 50% 75%, rgba(220, 110, 90, .3) 0, transparent 70%), var(--panel-2); }
.tc-unique .tc-stage, .tc-face.tc-unique .tc-stage { background: radial-gradient(circle at 50% 75%, rgba(90, 180, 165, .26) 0, transparent 68%), var(--panel-2); }
.tc-face:not(.tc-rare):not(.tc-epic):not(.tc-legendary):not(.tc-awakened):not(.tc-unique) .tc-item { animation: none; }

/* ===== Fork K: Kampf-Herz ===== */
/* Boss holt aus: lehnt sich zurück, ein leises rotes Atmen am Boden */
#field .fu.windup .fu-body { animation: k-wind 0.9s steps(3) infinite; transform-origin: 50% 100%; }
#field .fu.windup::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 70%; height: 6px; transform: translateX(-50%); border-radius: 50%; background: rgba(209, 70, 50, .45); animation: k-breath 0.9s steps(3) infinite; }
@keyframes k-wind { 50% { transform: translateX(4px) rotate(4deg); } }
@keyframes k-breath { 50% { opacity: .25; transform: translateX(-50%) scaleX(1.25); } }
/* Ausweichen: kurzes Nachbild */
#field .fu.kghost .fu-body svg { animation: k-ghost .35s steps(3); }
@keyframes k-ghost { 0% { filter: drop-shadow(-10px 0 0 rgba(255,255,255,.55)) drop-shadow(-20px 0 0 rgba(255,255,255,.25)); } 100% { filter: none; } }
/* Wucht: Bild ruckelt zwei Pixel, nicht mehr */
#field.knudge { animation: k-nudge .18s steps(2); }
@keyframes k-nudge { 0% { transform: translate(2px, 1px); } 50% { transform: translate(-2px, 0); } 100% { transform: none; } }
/* Staubwölkchen aus Pixelkästchen */
#field .fx3.kfx-dust { display: block !important; width: 42px; height: 10px; background:
  linear-gradient(#d9c6a2, #d9c6a2) 0 6px / 6px 4px no-repeat, linear-gradient(#e8d9bc, #e8d9bc) 9px 2px / 8px 6px no-repeat,
  linear-gradient(#d9c6a2, #d9c6a2) 21px 0 / 8px 8px no-repeat, linear-gradient(#e8d9bc, #e8d9bc) 33px 5px / 7px 5px no-repeat;
  animation: k-dust .5s steps(4) forwards; image-rendering: pixelated; }
@keyframes k-dust { from { transform: translate(-50%, -50%) scaleX(.6); opacity: .9; } to { transform: translate(-50%, -70%) scaleX(1.5); opacity: 0; } }
/* Heilung: drei kleine Pixel-Plus steigen auf */
#field .fx3.kfx-plus { display: block !important; width: 34px; height: 30px; animation: k-plus .9s steps(6) forwards; background:
  linear-gradient(#5bbf5f, #5bbf5f) 3px 9px / 6px 2px no-repeat, linear-gradient(#5bbf5f, #5bbf5f) 5px 7px / 2px 6px no-repeat,
  linear-gradient(#7fd77f, #7fd77f) 14px 2px / 6px 2px no-repeat, linear-gradient(#7fd77f, #7fd77f) 16px 0 / 2px 6px no-repeat,
  linear-gradient(#5bbf5f, #5bbf5f) 25px 14px / 6px 2px no-repeat, linear-gradient(#5bbf5f, #5bbf5f) 27px 12px / 2px 6px no-repeat; }
@keyframes k-plus { from { transform: translate(-50%, -30%); opacity: 1; } to { transform: translate(-50%, -110%); opacity: 0; } }
/* Schwerer Schlag: ein einzelner dicker Ring */
#field .fx3.kfx-heavy { display: block !important; width: 40px; height: 40px; border: 5px solid #e2583e; border-radius: 50%; animation: px-ring .5s steps(5) forwards; }
@media (prefers-reduced-motion: reduce) { #field .fu.windup .fu-body, #field .fu.windup::after, #field.knudge, #field .fx3.kfx-dust, #field .fx3.kfx-plus { animation: none !important; } }
/* Wiki: jetzt 7 Reiter (Kampf neu) */
.wk-tabs { grid-template-columns: repeat(4, 1fr) !important; }
@media (min-width: 700px) { .wk-tabs { grid-template-columns: repeat(7, 1fr) !important; } }
.wk-styles { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 620px) { .wk-styles { grid-template-columns: 1fr 1fr; } }
.wk-style { padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.wk-style.b-kraft { border-color: #e8b4a4; } .wk-style.b-klinge { border-color: #a9cfb2; } .wk-style.b-technik { border-color: #a7c3e2; }
.wk-style.b-helfer { border-color: #add9a0; } .wk-style.b-brecher { border-color: #c2b4dc; } .wk-style.b-kaempfer { border-color: #ebc08f; }
.wk-style-h { display: flex; align-items: center; gap: 10px; }
.wk-style-h > i { font-style: normal; font-size: 1.5rem; width: 34px; text-align: center; }
.wk-style-h b { display: block; font: 600 1rem Fredoka, sans-serif; }
.wk-style-h small { display: block; font-size: .78rem; color: var(--mute); }
.wk-style-q { margin: 6px 0 4px; font-size: .82rem; font-style: italic; color: var(--wood); }
.wk-combo-ico { font-size: 1.1rem; width: 52px; flex: none; text-align: center; letter-spacing: -2px; }
.wk-joke { display: block; font-size: .78rem; color: var(--wood); margin-top: 2px; }
/* Stil im Kampfkopf */
.bh-style { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .82rem; background: #fff4d8; border: 1.5px solid #e6c27a; margin-left: auto; margin-right: 8px; white-space: nowrap; }
.bh-style b { font: 600 .82rem Fredoka, sans-serif; } .bh-style small { color: #c08a2e; font-size: .66rem; letter-spacing: -1px; }
.bh-style.b-kraft { background: #fde4dc; border-color: #e8a08a; } .bh-style.b-klinge { background: #e3f1e6; border-color: #93c4a0; }
.bh-style.b-technik { background: #e2eefa; border-color: #93b6dc; } .bh-style.b-helfer { background: #e6f6e3; border-color: #9fd08a; }
.bh-style.b-brecher { background: #ece6f6; border-color: #b4a2d8; }
@media (max-width: 420px) { .bh-style b { display: none; } }
.combo-dot { font-style: normal; color: #c08a2e; margin-left: 3px; font-size: .7rem; }
/* Kampfbilanz */
.sum-tally { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; align-items: center; }
.tally { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .8rem; background: var(--panel-2); border: 1px solid var(--line); color: var(--mute); }
.tally i { font-style: normal; }
.tally.on { color: var(--ink); font-weight: 700; background: #fff4d8; border-color: #e6c27a; }
.tally-q { flex-basis: 100%; font-size: .78rem; color: var(--wood); font-style: italic; }
.sum-combo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sum-combo span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 10px; background: #f3ecfa; border: 1px solid #cdbbe6; font-size: .8rem; }
.sum-combo i { font-style: normal; letter-spacing: -2px; }
.tr.tr-combo .tr-hex { font-size: .7rem; letter-spacing: -2px; background: #efe6fa; }

/* ===== Fork N: Zwischen-Events ===== */
.ce-event { display: flex; flex-direction: column; gap: 10px; }
.ce-head { display: flex; align-items: center; gap: 10px; }
.ce-head h2 { margin: 0; font: 600 1.25rem/1.15 'Fredoka', sans-serif; }
.ce-head small { display: block; font: 600 .72rem 'Fredoka', sans-serif; color: var(--wood); text-transform: uppercase; letter-spacing: .06em; }
.ce-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--panel-2); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.ce-ico svg { width: 28px; height: 28px; }
.ce-stage { position: relative; height: 96px; border-radius: 12px; overflow: hidden; border: 2px solid #c9a46a; box-shadow: 0 3px 0 #c9a46a;
  background: linear-gradient(180deg, #bfe3f2 0 52%, #5ea9c9 52% 72%, #e8d29a 72%); image-rendering: pixelated; }
.ce-stage.bg-nacht { background: linear-gradient(180deg, #24304f 0 52%, #1d4766 52% 72%, #6b5a40 72%); }
.ce-stage.bg-hafen { background: linear-gradient(180deg, #f6d7a8 0 52%, #4f97ba 52% 70%, #8a6a44 70%); }
.ce-stage.bg-schiff { background: linear-gradient(180deg, #cfe9f6 0 46%, #4f97ba 46% 62%, #9a6a3c 62%); }
.ce-stage.bg-kueche { background: linear-gradient(180deg, #f3e2c2 0 60%, #b98a58 60%); }
.ce-stage.bg-nacht::before { content: ''; position: absolute; left: 12%; top: 14px; width: 3px; height: 3px; background: #fff; box-shadow: 40px 10px #fff, 120px -4px #fff, 210px 14px #fff, 260px 2px #fff; }
.ce-cast { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 26px; }
.ce-who { width: 44px; display: block; animation: ce-hop 2.6s ease-in-out infinite; }
.ce-who:nth-child(2) { animation-delay: .6s; transform: scaleX(-1); }
.ce-who svg { width: 100%; height: auto; display: block; }
@keyframes ce-hop { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -5px; } }
.ce-lines { display: flex; flex-direction: column; gap: 6px; }
.ce-line { display: flex; align-items: flex-end; gap: 6px; opacity: 0; animation: ce-in .35s ease-out forwards; animation-delay: calc(var(--k) * .45s); }
.ce-line.r { flex-direction: row-reverse; }
@keyframes ce-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ce-face { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--panel-2); border: 2px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.ce-face svg { width: 26px; height: auto; }
.ce-bub { max-width: 82%; padding: 7px 11px; border-radius: 12px 12px 12px 4px; background: var(--panel); border: 2px solid var(--line); font-size: .9rem; line-height: 1.35; color: var(--ink); }
.ce-line.r .ce-bub { border-radius: 12px 12px 4px 12px; background: #fff8e8; }
.ce-bub b { display: block; font: 600 .72rem 'Fredoka', sans-serif; color: var(--wood); margin-bottom: 1px; }
.ce-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 2px; }
.opt.ce-opt { display: flex; align-items: center; gap: 8px; text-align: left; min-height: 58px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); position: relative; }
.opt.ce-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.ce-opt-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ce-opt-b b { font: 600 1rem/1.2 'Fredoka', sans-serif; color: var(--ink); }
.ce-opt-b small { font-size: .78rem; color: var(--mute); line-height: 1.3; }
.ce-go { flex: none; font-style: normal; font: 700 1.3rem 'Fredoka', sans-serif; color: var(--wood); }
.opt.ce-opt .key { position: absolute; top: 6px; right: 8px; }
@media (max-width: 560px) { .ce-opts { grid-template-columns: 1fr; } .ce-stage { height: 84px; } }
@media (prefers-reduced-motion: reduce) { .ce-who, .ce-line { animation: none; opacity: 1; } }

/* ===== Fork P: Gemeinschaft ===== */
.cp-wrap { display: flex; flex-direction: column; gap: 10px; }
.cp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: stretch; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: 0 3px 0 var(--line); }
.cp-stage { position: relative; display: block; min-height: 150px; border-radius: 10px; overflow: hidden; border: 2px solid #6b4424; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); image-rendering: pixelated; }
.cp-stage .cp-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #9fd2e6 0%, #cfe9f0 55%, #4f9ccf 56%, #2f6f9f 100%); }
.cp-stage.bg-deep .cp-sky { background: linear-gradient(180deg, #2a3f66 0%, #3d5a8a 55%, #1f4a72 56%, #12304f 100%); }
.cp-stage.bg-snow .cp-sky { background: linear-gradient(180deg, #b8d4ea 0%, #e6f1f8 55%, #8fb7d4 56%, #5f8fb4 100%); }
.cp-wave { position: absolute; left: -20%; width: 140%; height: 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 12px, transparent 12px 26px); animation: sz-wave 3.4s linear infinite; }
.cp-wave.a { top: 62%; } .cp-wave.b { top: 78%; opacity: .5; animation-direction: reverse; }
.cp-boss { position: absolute; left: 50%; bottom: 8%; width: 62%; max-width: 150px; transform: translateX(-50%); animation: cp-breathe 2.6s ease-in-out infinite; z-index: 2; }
.cp-boss svg { width: 100%; height: auto; display: block; }
.cp-boss.hit { animation: cp-hit .22s steps(2) 1; }
.cp-shadow { position: absolute; left: 50%; bottom: 6%; width: 50%; height: 8px; transform: translateX(-50%); background: rgba(0,0,0,.18); border-radius: 50%; }
@keyframes cp-breathe { 50% { transform: translateX(-50%) translateY(-3px) scale(1.02); } }
@keyframes cp-hit { 50% { transform: translateX(-48%) translateY(1px); filter: brightness(1.6); } }
.cp-binfo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cp-kick { font: 600 .72rem 'Fredoka', sans-serif; color: var(--wood); text-transform: uppercase; letter-spacing: .06em; }
.cp-binfo h3 { margin: 0; font: 600 1.15rem/1.15 'Fredoka', sans-serif; }
.cp-hp { position: relative; height: 18px; border-radius: 9px; background: #4a2d18; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,.3); }
.cp-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #e46a5a, #c0392b); transition: width .12s linear; }
.cp-hp span { position: relative; display: block; text-align: center; font: 600 .74rem/18px 'Pixelify Sans', monospace; color: #fff; text-shadow: 0 1px 0 #000; }
.cp-hp.big { height: 22px; margin: 8px 0 4px; } .cp-hp.big span { line-height: 22px; font-size: .85rem; }
.cp-ab { margin: 0; font-size: .82rem; line-height: 1.35; color: var(--ink); } .cp-ab b { color: var(--wood); }
.cp-tip { margin: 0; font-size: .8rem; color: var(--mute); }
.cp-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 2px; }
.cp-lbl span { font: 600 .92rem 'Fredoka', sans-serif; } .cp-lbl small { color: var(--mute); font-size: .76rem; }
.cp-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cp-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; min-height: 104px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); text-align: center; min-width: 0; }
.cp-slot.me { border-color: #e2c27a; box-shadow: 0 3px 0 #e2c27a; background: #fff8e6; }
.cp-slot b { font: 600 .82rem 'Fredoka', sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-slot small { font-size: .68rem; color: var(--mute); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-slot.empty { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 104px; border-radius: 12px; border: 2px dashed #d6bd8a; background: #fbf3e2; color: var(--wood); }
.cp-slot.empty b { font: 600 1.6rem/1 'Fredoka', sans-serif; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 #e2c27a; }
.cp-slot.empty small { font: 600 .74rem 'Fredoka', sans-serif; }
.cp-slot.empty:active { transform: translateY(2px); }
.cp-x { all: unset; cursor: pointer; position: absolute; top: 3px; right: 5px; font-size: .7rem; color: var(--mute); padding: 2px; }
.cp-faces { display: flex; justify-content: center; gap: 0; } .cp-faces .cp-face { width: 30px; display: block; } .cp-faces svg { width: 100%; height: auto; display: block; }
.cp-faces.sm .cp-face { width: 22px; }
.cp-pick { background: #fff8e6; border: 2px solid #ecd9a8; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cp-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cp-cand { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 7px 9px; border-radius: 10px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); min-width: 0; }
.cp-cand .cp-faces { grid-row: span 2; } .cp-cand b { font: 600 .84rem 'Fredoka', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-cand small { font-size: .72rem; color: var(--mute); }
.cp-cand.on { border-color: #6fae5a; box-shadow: 0 2px 0 #6fae5a; background: #eef8e8; }
.cp-row { display: flex; justify-content: flex-end; gap: 8px; } .cp-row .btn { margin-top: 0; }
.cp-go-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.cp-go { margin-top: 2px; min-height: 52px; font-size: 1.05rem; text-align: center; display: flex; align-items: center; justify-content: center; }
.cp-go[disabled] { opacity: .5; cursor: default; }
.cp-tries { text-align: center; font-size: .8rem; color: var(--mute); }
.cp-note { margin: 0; font-size: .84rem; color: var(--mute); text-align: center; }
.cp-fine { margin: 0; font-size: .74rem; color: var(--mute); text-align: center; font-style: italic; }
.fpop-card.cp-pop { max-width: 440px; text-align: center; }
.cp-pop h3 { margin: 2px 0 8px; font: 600 1.2rem 'Fredoka', sans-serif; }
.cp-stage.big { min-height: 170px; }
.cp-ticker { min-height: 1.4em; margin: 4px 0 8px; font: 600 .9rem 'Fredoka', sans-serif; color: var(--wood); }
.cp-res { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.cp-tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--panel); border: 2px solid var(--line); }
.cp-tr.me { border-color: #e2c27a; background: #fff8e6; }
.cp-tn { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cp-tn b { font: 600 .82rem 'Fredoka', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tb { height: 8px; border-radius: 4px; background: #efe3c8; overflow: hidden; } .cp-tb i { display: block; height: 100%; background: linear-gradient(90deg, #e0a030, #f2c94c); transition: width .12s linear; }
.cp-tr em { font: 600 .85rem 'Pixelify Sans', monospace; font-style: normal; color: var(--ink); min-width: 44px; text-align: right; }
.cp-end { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.cp-end p { margin: 0; font-size: .88rem; line-height: 1.4; } .cp-end .btn { align-self: center; margin-top: 8px; }
.cp-loot.muted { color: var(--mute); }
@media (max-width: 560px) {
  .cp-head { grid-template-columns: 1fr; }
  .cp-stage { min-height: 140px; }
  .cp-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-slot, .cp-slot.empty { min-height: 92px; }
  .cp-cands { grid-template-columns: 1fr; }
}

/* ===== Fork O: Dungeons ===== */
.dg-ico { width: 16px; height: 16px; flex: none; image-rendering: pixelated; }
.dg-depth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 10px; }
.dg-dep { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 10px; text-align: center;
  background: var(--panel); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); transition: transform .08s; }
.dg-dep b { font: 600 .92rem Fredoka, sans-serif; color: var(--ink); }
.dg-dep small { font-size: .72rem; color: var(--mute); line-height: 1.25; }
.dg-dep.on { background: #fff4d8; border-color: #c9a46a; box-shadow: 0 3px 0 #a87d43; }
.dg-dep.deep.on { background: #f2e6f6; border-color: #a98cc8; box-shadow: 0 3px 0 #7d5ea0; }
.dg-dep:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.dg-dep:disabled { opacity: .55; cursor: default; }
.dg-vs { display: grid; gap: 8px; margin: 4px 0 10px; }
.dg-side { position: relative; padding: 8px 10px 10px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.dg-side.foe { background: linear-gradient(180deg, #fbefe6, var(--panel)); border-color: #e3c0a8; box-shadow: 0 3px 0 #d2a88c; }
.dg-side.mine { background: linear-gradient(180deg, #eef5e6, var(--panel)); border-color: #c4d8ae; box-shadow: 0 3px 0 #a9c48e; }
.dg-side-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dg-side-h b { font: 600 .95rem Fredoka, sans-serif; color: var(--ink); }
.dg-side-h em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--wood); background: #f3e6c8; border-radius: 6px; padding: 1px 6px; }
.dg-side-spr { width: 26px; height: 26px; display: inline-block; }
.dg-side-spr svg { width: 100%; height: 100%; }
.dg-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-st { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 6px; border-radius: 8px; background: #fffaf0; border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line); min-width: 0; }
.dg-st b { font: 600 .9rem Fredoka, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.dg-st small { font-size: .68rem; color: var(--mute); }
.dg-spec { display: flex; gap: 7px; align-items: flex-start; margin-top: 7px; padding: 6px 8px; border-radius: 8px; background: #fff4e6; border: 1px dashed #e0b48a; }
.dg-spec .dg-ico { width: 18px; height: 18px; margin-top: 1px; }
.dg-spec b { display: block; font: 600 .86rem Fredoka, sans-serif; color: #8a3f1a; }
.dg-spec small { display: block; font-size: .74rem; color: var(--mute); line-height: 1.3; }
.dg-meter { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #f6f1e3; border: 2px solid var(--line); text-align: center; }
.dg-meter span { display: flex; flex-direction: column; }
.dg-meter b { font: 600 1.25rem/1 'Pixelify Sans', Fredoka, sans-serif; }
.dg-meter small { font-size: .66rem; color: var(--mute); line-height: 1.2; }
.dg-meter i { font-style: normal; font: 600 .75rem Fredoka, sans-serif; color: var(--mute); }
.dg-meter.good { background: #eaf5e2; border-color: #a9cf94; } .dg-meter.good b { color: #3c7a2e; }
.dg-meter.mid { background: #fff4d8; border-color: #e3c27a; } .dg-meter.mid b { color: #9a6a14; }
.dg-meter.bad { background: #fbe8e2; border-color: #e3a898; } .dg-meter.bad b { color: #a83a2a; }
.dg-say { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dg-say li { display: flex; gap: 7px; align-items: flex-start; font-size: .8rem; line-height: 1.35; color: var(--ink); }
.dg-say li i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 2px; background: #c9a46a; box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.dg-say li.good i { background: #5aa848; } .dg-say li.bad i { background: #d0604a; } .dg-say li.mid i { background: #e0a830; }
.dg-coop-slot:empty { display: none; }
/* kompakter: Kacheln enger, Spezialtext höchstens zwei Zeilen */
.dg-st { padding: 3px 7px 3px 5px; gap: 4px; }
.dg-st .dg-ico { width: 14px; height: 14px; }
.dg-tiles { gap: 5px; }
.dg-side { padding: 7px 9px 9px; }
.dg-spec small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dg-vs { gap: 7px; }
/* Postfach in der Freundesliste */
.post-box { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 2px solid var(--line); }
.post-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.post-head b { font: 600 .95rem Fredoka, sans-serif; }
.post-head .btn { margin: 0; }
.post-list { display: grid; gap: 6px; }
.post-it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.post-it i { font-style: normal; font-size: 1.1rem; }
.post-it b { display: block; font-size: .86rem; }
.post-it small { font-size: .74rem; color: var(--mute); }
.post-it.out { opacity: .85; }

/* ===== Fork M: Früchte ===== */
.fr-fam { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 2px; padding: 5px 8px; border-radius: 8px; background: #f7f0de; border-left: 3px solid #c9a46a; text-align: left; }
.fr-fam b { font: 600 .8rem Fredoka, sans-serif; color: #5a3a12; }
.fr-fam small { font-size: .76rem; color: var(--mute); line-height: 1.3; }
.fr-fam em { font-style: normal; font-size: .74rem; font-weight: 700; color: #3f6a2e; }
.fr-fam.fam-logia { border-left-color: #d9733a; }
.fr-fam.fam-paramecia { border-left-color: #8a6fc0; }
.fr-fam.fam-zoan { border-left-color: #6a9a4a; }
.tr-fruit .tr-hex { font-size: .95rem; }

/* ===== Fork Q: Kapitänswahl & Karten ===== */
/* Karten: Pixel-Ecken (abgestufte Kanten) und kleine Messing-Nieten statt glatter Rundung */
.card-face.cf3 { border-radius: 6px !important; }
.card-face.cf3::before { content: ''; position: absolute; left: 7px; right: 7px; bottom: 7px; height: 4px; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, #e8c472 0 1.6px, #8a6510 1.7px 2.2px, transparent 2.3px) left center / 6px 4px no-repeat, radial-gradient(circle, #e8c472 0 1.6px, #8a6510 1.7px 2.2px, transparent 2.3px) right center / 6px 4px no-repeat; }
.c3-top { border-bottom: 3px solid #7a4f26 !important; box-shadow: inset 0 -2px 0 rgba(255, 240, 200, .35); }
/* Banden-Abzeichen: kleiner Wimpel mit Schwalbenschwanz statt Pille */
.c3-fac { position: relative; border-radius: 0 !important; border: 0 !important; padding: 3px 14px 3px 7px !important; letter-spacing: .02em !important; text-transform: none !important;
  font: 600 .66rem/1 'Pixelify Sans', 'Fredoka', sans-serif !important; color: #fffaf0 !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18) !important; gap: 4px; }
.c3-fac::before { content: ''; position: absolute; left: -3px; top: -3px; bottom: -3px; width: 2px; background: #5e3b1d; }
.c3-fac svg { width: 12px; height: 12px; }
/* Nummer als Messingplakette */
.acard-card .no { top: 10px !important; right: 12px !important; color: #4a3008 !important; font: 600 .66rem/1 'Pixelify Sans', monospace !important; padding: 3px 6px; background: linear-gradient(#f3d98a, #d9b04a); border: 1px solid #8a6510; border-radius: 2px; box-shadow: 0 2px 0 #8a6510, inset 0 1px 0 rgba(255, 255, 255, .5); }
/* Typ und Rolle als kleine Pixel-Schildchen */
.c3-sub { display: flex !important; justify-content: center; gap: 5px; flex-wrap: wrap; }
.c3-sub > span:not(.c3-tag) { display: none; }
.c3-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; color: #5a4024; padding: 2px 6px; background: #f3e3c0; border: 1px solid #d8bd88; border-radius: 3px; box-shadow: 0 1px 0 #d8bd88; }
.c3-tag:empty { display: none; }
.c3-tag .c3-dot { width: 7px; height: 7px; border-radius: 1px; margin: 0; }

/* Kapitänswahl: freigeschaltete Reserve und wirklich Gesperrte getrennt */
.capq-rest { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 2px solid var(--line); }
.capq-h { display: flex; align-items: center; gap: 6px; font: 600 .9rem Fredoka, sans-serif; color: var(--wood); }
.capq-h small, .capq-lock > summary small { font: 700 .72rem Nunito, sans-serif; padding: 1px 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--mute); }
.capq-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.capq-mini { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.capq-mini i { width: 26px; height: 26px; display: grid; place-items: center; background: #e8f2f6; border-radius: 50%; overflow: hidden; }
.capq-mini i svg { width: 22px; height: 22px; }
.capq-mini b { font-size: .78rem; }
.capq-note { color: var(--mute); font-size: .76rem; }
.capq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; }
.capq-tile { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: var(--panel); border: 2px dashed var(--line); }
.capq-sil { position: relative; flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: #ece2cc; border-radius: 8px; }
.capq-sil svg { width: 34px; height: 34px; filter: brightness(0) opacity(.35); }
.capq-sil em { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: .72rem; background: var(--panel); border: 1px solid var(--line); border-radius: 50%; width: 18px; height: 18px; display: grid; place-items: center; }
.capq-tile > span { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.capq-tile b { font-size: .86rem; }
.capq-tile small { font-size: .74rem; color: var(--mute); line-height: 1.3; }
.capq-bar { display: block; height: 5px; border-radius: 3px; background: #e8dcc2; overflow: hidden; margin-top: 2px; }
.capq-bar > i { display: block; height: 100%; background: var(--gold); }
.capq-n { font-weight: 700; }
@media (max-width: 560px) { .capq-grid { grid-template-columns: 1fr 1fr; } .capq-tile { flex-direction: column; text-align: center; } .capq-tile > span { align-items: center; } }

/* ===== Fork S: Grüße & Inselwahl ===== */
/* Inselwahl: kleine Postkarten mit Pixel-Kulisse */
.opt.course-opt.co2 { padding: 0; gap: 0; overflow: hidden; border-radius: 14px; border: 2px solid #c9a46a; background: var(--panel); box-shadow: 0 4px 0 #b38a4f, 0 8px 16px rgba(70, 40, 15, .12); }
.opt.course-opt.co2:active { transform: translateY(3px); box-shadow: 0 1px 0 #b38a4f; }
.co2 .co-scene { position: relative; display: block; height: 104px; overflow: hidden; border-bottom: 2px solid #c9a46a; }
.co2 .co-scene .c3-stage { position: absolute; inset: 0; }
.co2 .co-boss { position: absolute; right: 16px; bottom: 6px; width: 54px; z-index: 3; animation: co-bob 2.6s ease-in-out infinite; }
.co2 .co-boss svg { width: 100%; height: auto; display: block; }
.co2 .co-boss-sh { position: absolute; left: 6px; right: 6px; bottom: -2px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .25); }
@keyframes co-bob { 50% { transform: translateY(-3px); } }
.co2 .co-name { position: absolute; left: 10px; bottom: 8px; z-index: 4; font: 600 1.18rem/1.1 'Fredoka', sans-serif; color: #fffdf6; padding: 4px 10px 5px; border-radius: 8px;
  background: rgba(58, 36, 18, .78); box-shadow: 0 2px 0 rgba(30, 18, 8, .5); max-width: calc(100% - 96px); }
.co2 .co-chips { position: absolute; left: 10px; top: 8px; z-index: 4; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 50px); }
.co2 .co-chips > * { position: static !important; margin: 0 !important; }
.co2 .co-routechip { font: 600 .7rem/1 'Fredoka', sans-serif; background: #fff4d8; color: #6b4424; padding: 4px 7px; border-radius: 6px; box-shadow: 0 2px 0 #c9a46a; }
.co2 .co-body { display: grid; gap: 7px; padding: 9px 12px 12px; }
.co2 .co-text { color: var(--mute); font-size: .84rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co2 .co-route { font-size: .76rem; }
.co2 .co-foe2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.co2 .co-foe2 > span:first-child { display: grid; gap: 1px; min-width: 0; }
.co2 .co-foe2 small { color: var(--mute); font-size: .74rem; }
.co2 .co-foe2 b { font: 600 .98rem 'Fredoka', sans-serif; }
.co-danger { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.co-danger i { display: inline-block; width: 10px; height: 10px; margin: 0 1px; background: #e4d6b4; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.co-danger.d0 i.on { background: #6fb06a; } .co-danger.d1 i.on { background: #e0a83a; } .co-danger.d2 i.on { background: #d1604a; }
.co-danger small { font-size: .66rem; color: var(--mute); }
.co2 .crack { margin: 0; font-size: .78rem; }
.co2 .key { z-index: 5; }
.co-twist { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 2px 0 8px; padding: 7px 11px; border-radius: 10px; background: #fff4d8; border: 2px solid #e6c27a; font-size: .86rem; }
.co-twist b { font: 600 .92rem 'Fredoka', sans-serif; }
.co-twist small { color: var(--mute); font-size: .78rem; flex-basis: 100%; }
@media (max-width: 560px) { .co2 .co-scene { height: 92px; } .co2 .co-boss { width: 48px; } .co2 .co-name { font-size: 1.08rem; } }
@media (prefers-reduced-motion: reduce) { .co2 .co-boss { animation: none; } }
.co-danger { display: grid; grid-template-columns: repeat(3, auto); justify-items: center; align-items: center; column-gap: 2px; row-gap: 3px; }
.co-danger small { grid-column: 1 / -1; }
/* Willkommens-Gruß: Figur mit Sprechblase unten im Daumenbereich */
.greet { position: fixed; left: 0; right: 0; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 900; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.greet .gr-card { pointer-events: auto; position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "face body" "face go"; column-gap: 12px; row-gap: 6px; align-items: start;
  width: 100%; max-width: 460px; padding: 12px 14px 12px 12px; border-radius: 16px; background: #fffaf0; border: 2px solid #c9a46a;
  box-shadow: 0 4px 0 #b38a4f, 0 12px 28px rgba(60, 35, 15, .25); transform: translateY(30px) scale(.96); opacity: 0; transition: transform .32s cubic-bezier(.2, 1.4, .4, 1), opacity .2s; cursor: pointer; }
.greet.in .gr-card { transform: none; opacity: 1; }
.greet.out .gr-card { transform: translateY(20px); opacity: 0; transition-duration: .25s; }
.greet .gr-card::after { content: ''; position: absolute; left: 30px; bottom: -11px; width: 18px; height: 18px; background: #fffaf0; border-right: 2px solid #c9a46a; border-bottom: 2px solid #c9a46a; transform: rotate(45deg); box-shadow: 4px 4px 0 -1px #b38a4f; }
.gr-face { grid-area: face; width: 64px; height: 64px; border-radius: 12px; background: linear-gradient(#cfe8f4, #f2e7cf 70%); border: 2px solid #e2d2b0; display: grid; place-items: end center; overflow: hidden; }
.gr-face .gr-hop { display: block; width: 48px; animation: gr-hop .5s ease-out .35s both; }
.gr-face svg { width: 100%; height: auto; display: block; }
@keyframes gr-hop { 0% { transform: translateY(14px); } 60% { transform: translateY(-5px); } 100% { transform: none; } }
.gr-body { grid-area: body; min-width: 0; padding-right: 22px; }
.gr-name { display: inline-block; font: 600 .78rem/1 'Fredoka', sans-serif; color: #fff; background: var(--wood); padding: 4px 8px; border-radius: 6px; margin-bottom: 5px; }
.gr-line { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--ink); min-height: 2.8em; }
.gr-go { grid-area: go; justify-self: end; margin: 0; min-height: 38px; padding: 0 16px; opacity: 0; transition: opacity .25s; }
.greet.done .gr-go { opacity: 1; }
.gr-x { all: unset; position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--mute); cursor: pointer; font-size: .9rem; }
.gr-x:hover { background: var(--panel-2); }
@media (min-width: 900px) { .greet { bottom: 100px; } }
@media (prefers-reduced-motion: reduce) { .greet .gr-card, .gr-face .gr-hop { transition: none; animation: none; } }

/* ===== Fork U: Reise-Erzählung ===== */
.journey { margin: 6px 0 4px; }
.jr-stage { position: relative; height: 118px; border-radius: 14px; overflow: hidden; border: 2px solid #c9a46a; box-shadow: 0 3px 0 #c9a46a;
  background: linear-gradient(180deg, #a9d8ee 0%, #cfeaf3 52%, #6fb3d2 53%, #4a93b8 100%); image-rendering: pixelated; }
.jr-sea-paradies .jr-stage { background: linear-gradient(180deg, #f6c69a 0%, #fbe0b8 52%, #5aa7c4 53%, #3d86ab 100%); }
.jr-sea-enies-lobby .jr-stage { background: linear-gradient(180deg, #8c9fc8 0%, #c3cde3 52%, #4d7ea6 53%, #345f86 100%); }
.jr-sun { position: absolute; right: 18%; top: 14px; width: 26px; height: 26px; background: #fff3b0; box-shadow: 0 0 0 4px rgba(255,243,176,.35); }
.jr-cloud { position: absolute; height: 8px; width: 38px; background: #fff; opacity: .85; box-shadow: 8px -6px 0 -1px #fff, 20px -3px 0 0 #fff; animation: jr-cloud 40s linear infinite; }
.jr-cloud.a { top: 22px; left: -50px; } .jr-cloud.b { top: 40px; left: -50px; animation-delay: -20s; transform: scale(.7); }
@keyframes jr-cloud { to { left: 110%; } }
.jr-isle { position: absolute; right: 6%; top: 46px; width: 92px; height: 18px; }
.jr-isle i { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: #e9cf8f; border-radius: 40% 40% 0 0 / 100% 100% 0 0; box-shadow: inset 0 -3px 0 #c9a86a; }
.jr-isle::before { content: ''; position: absolute; left: 30px; bottom: 10px; width: 4px; height: 18px; background: #7a5232; }
.jr-isle::after { content: ''; position: absolute; left: 20px; bottom: 26px; width: 24px; height: 8px; background: #4f9a4a; border-radius: 50%; box-shadow: 6px -3px 0 -1px #5fae58; }
.jr-ship { position: absolute; left: 8%; top: 34px; width: 92px; animation: jr-bob 3s ease-in-out infinite; }
.jr-ship svg { width: 100%; height: auto; display: block; }
.jr-deck { position: absolute; left: calc(8% + 18px); top: 44px; display: flex; gap: 0; animation: jr-bob 3s ease-in-out infinite; }
.jr-mate { width: 18px; display: block; margin-left: -3px; animation: jr-hop 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); }
.jr-mate svg { width: 100%; height: auto; display: block; }
@keyframes jr-bob { 50% { transform: translateY(3px) rotate(-1deg); } }
@keyframes jr-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-4px); } }
.jr-wave { position: absolute; left: -10%; width: 120%; height: 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 12px, transparent 12px 28px); animation: jr-wave 4s linear infinite; }
.jr-wave.a { top: 82px; } .jr-wave.b { top: 98px; opacity: .5; animation-duration: 6s; animation-direction: reverse; }
@keyframes jr-wave { to { transform: translateX(28px); } }
.jr-say { display: flex; align-items: flex-end; gap: 8px; margin: 10px 0 10px; }
.jr-face { flex: none; width: 46px; height: 46px; border-radius: 10px; background: var(--panel-2); border: 2px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.jr-face svg { width: 38px; height: auto; }
.jr-bubble { position: relative; flex: 1; min-width: 0; background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 7px 11px 8px; box-shadow: 0 2px 0 var(--line); }
.jr-bubble::before { content: ''; position: absolute; left: -7px; bottom: 12px; width: 10px; height: 10px; background: var(--panel); border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: rotate(45deg); }
.jr-bubble b { display: block; font: 600 .74rem/1.2 'Fredoka', sans-serif; color: var(--wood); }
.jr-line { display: block; font-size: .92rem; line-height: 1.4; color: var(--ink); animation: jr-type .9s steps(24) both; }
@keyframes jr-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.jr-opts { display: grid; gap: 8px; }
.jr-card { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 64px;
  background: var(--panel); border: 2px solid var(--line); border-radius: 12px; box-shadow: 0 3px 0 #dcc9a0; animation: jr-in .35s ease-out backwards; animation-delay: var(--d, 0s); transition: transform .08s; }
.jr-card:hover { border-color: #d8b56e; }
.jr-card:active { transform: translateY(3px); box-shadow: 0 0 0 #dcc9a0; }
.jr-card:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
@keyframes jr-in { from { opacity: 0; transform: translateY(8px); } }
.jr-ico { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--panel-2); display: grid; place-items: center; }
.jr-ico svg { width: 34px; height: 34px; }
.jr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jr-lbl { font: 600 .7rem/1 'Fredoka', sans-serif; color: var(--mute); letter-spacing: .02em; }
.jr-lbl em { font-style: normal; color: var(--gold); }
.jr-txt b { font-weight: 600; font-size: .9rem; line-height: 1.35; color: var(--ink); }
.jr-txt .danger, .jr-txt [class*=danger] { align-self: flex-start; }
.jr-card.n-elite .jr-ico, .jr-card.jr-foe .jr-ico { background: #fbe7dc; }
.jr-card.n-rest .jr-ico { background: #e6f4e2; }
.jr-card.n-treasure .jr-ico, .jr-card.n-fruit .jr-ico { background: #fff1cf; }
.jr-card.jr-big { border-color: #e2b07a; box-shadow: 0 3px 0 #d39a5c; }
.jr-card.is-tip { border-color: #9fd08a; }
.jr-card > .key { position: absolute; right: 8px; top: 6px; }
.jr-card > .tip-badge { position: absolute; right: 30px; top: -9px; }
.jr-map { margin: 10px 0 2px; }
.jr-map > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; list-style: none; padding: 6px 12px; border-radius: 10px; background: var(--panel-2); border: 2px solid var(--line);
  font: 600 .82rem 'Fredoka', sans-serif; color: var(--wood); box-shadow: 0 2px 0 var(--line); }
.jr-map > summary::-webkit-details-marker { display: none; }
.jr-map[open] > summary { margin-bottom: 8px; }
@media (min-width: 700px) { .jr-opts.jr-n2, .jr-opts.jr-n3, .jr-opts.jr-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jr-opts.jr-n3 .jr-card:last-child { grid-column: 1 / -1; } .jr-stage { height: 136px; } }
@media (prefers-reduced-motion: reduce) { .jr-ship, .jr-deck, .jr-mate, .jr-wave, .jr-cloud, .jr-line, .jr-card { animation: none !important; } }
.jr-art { position: absolute; inset: 0; z-index: 0; }
.jr-art > svg, .jr-art > img, .jr-art > div { width: 100%; height: 100%; display: block; object-fit: cover; }
.jr-art ~ .jr-sun, .jr-art ~ .jr-cloud, .jr-art ~ .jr-isle, .jr-art ~ .jr-wave { display: none; }
.jr-ship, .jr-deck { z-index: 1; }
.jr-deck { top: 60px; left: calc(8% + 26px); }
.jr-mate { width: 15px; margin-left: -2px; }

/* ===== Fork R: Wiederbeleben & Wellen ===== */
/* Welle 2 wartet unsichtbar, läuft dann von rechts ein */
.fu.w2-wait, .fighter.w2-wait { opacity: 0 !important; pointer-events: none; transform: translateX(40px) scale(var(--s, 1)); }
.fighter.w2-wait { display: none; }
.fu.w2-in { animation: w2Run .55s cubic-bezier(.2, .9, .3, 1.15) backwards; animation-delay: var(--wd, 0s); }
.fighter.w2-in { animation: w2Pop .4s ease-out backwards; }
@keyframes w2Run { from { opacity: 0; translate: 46px 0; } 70% { opacity: 1; } }
@keyframes w2Pop { from { opacity: 0; transform: translateY(6px); } }
.fu.elite2 .fu-body { filter: drop-shadow(0 0 0 #c08a2e) drop-shadow(0 -1px 0 #e8c472); }
.fu.elite2::after { content: '★'; position: absolute; left: 50%; top: -14px; translate: -50% 0; font: 700 11px/1 'Pixelify Sans', sans-serif; color: #c08a2e; text-shadow: 0 1px 0 #fff6d8; }
.f-round[data-wave]::after { content: ' · ' attr(data-wave); }
/* Vorschau: zweite Welle abgesetzt */
.pv-wsep { align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 .62rem/1 'Pixelify Sans', 'Fredoka', sans-serif; color: var(--wood); padding: 4px 2px; border-left: 2px dashed var(--line); margin: 0 2px; }
.pv-u.foe.w2 { opacity: .78; }
.pv-u.foe.elite2 .pv-s::after { content: '★'; position: absolute; right: -2px; top: -4px; font-size: .7rem; color: #c08a2e; }
.pv-u.foe.elite2 .pv-s { position: relative; }
.pv-waves { font-style: normal; font: 600 .66rem/1 'Fredoka', sans-serif; color: #fff; background: var(--wood); padding: 2px 6px; border-radius: 6px; margin-left: 4px; vertical-align: 1px; }
/* Nach dem Sieg aufgerappelt */
.sum-revive { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 7px 10px; border-radius: 10px; background: #eef7ea; border: 1px solid #b8dcaa; font-size: .84rem; color: #2f5a22; }
.sum-revive i { font-style: normal; }

/* ===== Fork T: Folgen & Events ===== */
.ep-chip { background: #f6ecd6; border-color: #d9bf86; }
.ep-chip b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
@media (max-width: 420px) { .ep-chip b { max-width: 110px; } }

/* ===== Fork W: Grafik ===== */
.ga-scene, .ga-prop, .ga-icon { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ga-scene .ga-wave { animation: ga-wave 3.2s ease-in-out infinite; }
.ga-scene .ga-cloud { animation: ga-cloud 14s ease-in-out infinite alternate; }
.ga-scene .ga-gull { animation: ga-gull 6s ease-in-out infinite; }
.ga-scene .ga-ship { animation: ga-bob 2.6s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
.ga-scene .ga-rain { animation: ga-rain .7s linear infinite; }
.ga-scene .ga-snow { animation: ga-snow 6s linear infinite; }
.ga-scene .ga-fog { animation: ga-fog 9s ease-in-out infinite alternate; }
.ga-scene .ga-flash { opacity: 0; animation: ga-flash 5s steps(1) infinite; }
@keyframes ga-wave { 50% { transform: translateX(2px); } }
@keyframes ga-cloud { to { transform: translateX(6px); } }
@keyframes ga-gull { 50% { transform: translate(3px, -1px); } }
@keyframes ga-bob { 50% { transform: translateY(1px) rotate(-1.5deg); } }
@keyframes ga-rain { from { transform: translate(0, -6px); } to { transform: translate(-2px, 6px); } }
@keyframes ga-snow { from { transform: translateY(-4px); } to { transform: translateY(6px); } }
@keyframes ga-fog { to { transform: translateX(8px); } }
@keyframes ga-flash { 0%, 91%, 95%, 100% { opacity: 0; } 92% { opacity: 1; } 94% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .ga-scene * { animation: none !important; } }

/* ===== Fork X: Kampf-Grafik ===== */
/* Effekte im Feld: kleine Pixel-Teile, kurz und knackig */
.xfx { position: absolute; pointer-events: none; z-index: 470; image-rendering: pixelated; }
.xfx-spark { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--c); box-shadow: 0 0 0 1px rgba(0,0,0,.18); animation: xSpark .46s cubic-bezier(.2,.8,.4,1) var(--dl, 0ms) both; }
@keyframes xSpark { 0% { transform: translate(0, 0) scale(1.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--sx), calc(var(--sy) + 10px)) scale(.6); opacity: 0; } }
.xfx-arc { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--c); border-right-color: var(--c);
  filter: drop-shadow(0 0 2px #fff); animation: xArc .36s ease-out both; }
.xfx-arc.x2 { animation-name: xArc2; }
@keyframes xArc { 0% { transform: rotate(-120deg) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(40deg) scale(1.1); opacity: 0; } }
@keyframes xArc2 { 0% { transform: rotate(60deg) scale(.6) scaleX(-1); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(220deg) scale(1.1) scaleX(-1); opacity: 0; } }
.xfx-trail { height: 3px; width: var(--len); margin-top: -1px; transform-origin: 0 50%; transform: rotate(var(--ang)); background: linear-gradient(90deg, transparent, var(--c) 60%, #fff);
  animation: xTrail .3s ease-out both; }
@keyframes xTrail { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 60% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 85%); opacity: 0; } }
.xfx-pop { width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid var(--c); animation: xPop .34s ease-out both; }
.xfx-pop.big { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-width: 4px; }
@keyframes xPop { 0% { transform: scale(.3) rotate(45deg); opacity: 1; } 100% { transform: scale(1.9) rotate(45deg); opacity: 0; } }
.xfx-shock { width: 70px; height: 4px; margin: -2px 0 0 -35px; background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 9px); animation: xShock .4s ease-out both; }
@keyframes xShock { 0% { transform: scaleX(.2); opacity: 1; } 100% { transform: scaleX(1.5); opacity: 0; } }
.xfx-wave { width: var(--w); height: 26px; margin-top: -13px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, transparent 52%, var(--c) 54%, transparent 64%);
  animation: xWave .6s ease-out both; }
@keyframes xWave { 0% { clip-path: inset(0 100% 0 0); opacity: .95; transform: scaleY(.6); } 55% { clip-path: inset(0 0 0 0); opacity: .9; } 100% { clip-path: inset(0 0 0 0); opacity: 0; transform: scaleY(1.3); } }
.xfx-puff { width: 30px; height: 10px; margin: -5px 0 0 -15px; border-radius: 50%; background: rgba(240,230,210,.9); box-shadow: -12px 2px 0 -2px rgba(240,230,210,.8), 12px 2px 0 -2px rgba(240,230,210,.8); animation: xPuff .6s ease-out both; }
@keyframes xPuff { 0% { transform: scale(.4); opacity: .95; } 100% { transform: scale(1.5) translateY(-6px); opacity: 0; } }
/* Spezialangriff: kurzer Farb-Wisch schräg übers Bild */
.xfx-wipe { position: absolute; inset: 0; z-index: 455; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--c) 55%, transparent) 45%, color-mix(in srgb, var(--c2) 35%, transparent) 55%, transparent 70%);
  animation: xWipe .62s ease-out both; }
.xfx-wipe.them { transform: scaleX(-1); }
@keyframes xWipe { 0% { background-position: -300px 0; opacity: 0; } 20% { opacity: 1; } 100% { background-position: 300px 0; opacity: 0; } }
.xfx-wipe { background-size: 200% 100%; }

/* Figuren: liegende Figur sanft ausgegraut mit kreisenden Sternchen statt „K.O.“-Schild */
.fu.ko { opacity: .62 !important; }
.fu.ko .fu-body svg { filter: grayscale(.85) brightness(1.05) !important; }
.fu-ko.kx { position: absolute; left: 50%; bottom: 36%; width: 34px; height: 12px; margin-left: -17px; z-index: 6; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; font-size: 0 !important; transform: none !important; }
.fu-ko.kx i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #ffd75e;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: koOrbit 1.6s linear infinite; }
.fu-ko.kx i:nth-child(2) { animation-delay: -.53s; background: #fff2b0; }
.fu-ko.kx i:nth-child(3) { animation-delay: -1.06s; }
@keyframes koOrbit { 0% { transform: translate(-14px, 0) scale(.8); z-index: 1; } 25% { transform: translate(0, -5px) scale(1); } 50% { transform: translate(14px, 0) scale(.8); } 75% { transform: translate(0, 4px) scale(.6); opacity: .6; } 100% { transform: translate(-14px, 0) scale(.8); } }
.fu.boss .fu-ko.kx { bottom: 30%; transform: scale(1.4) !important; }
/* Kleine Liebe: Treffer blinkt kurz weiß, Ausweichen ist ein Hüpfer statt Verblassen */
.fu.dodge { animation: xDodge .38s cubic-bezier(.3,1.5,.5,1) !important; }
@keyframes xDodge { 40% { transform: translateX(calc(-50% - 12px)) translateY(-10px) scale(var(--s)); } }

/* Weniger Text: Zusammenspiel als kleine Pixel-Abzeichen, Team-Leiste schlanker, Log eine Zeile */
.sy-intro small { display: none; }
.sy-chip { font: 600 .62rem/1 "Pixelify Sans", var(--px); color: #fff7e4; background: #3a2a1a; border: 0; border-radius: 0; padding: 4px 7px 3px;
  box-shadow: 0 0 0 2px #2a1d10, inset 0 -2px 0 rgba(0,0,0,.35), 0 3px 0 rgba(0,0,0,.25); }
.sy-chip.duo { background: #a8455e; } .sy-chip.fac { background: #8a5a2a; } .sy-chip.ally { background: #5a4a8a; }
.team-bar { padding: 3px 8px 3px 4px; gap: 6px; border-radius: 0; border: 0; background: #3a2a1a; box-shadow: 0 0 0 2px #2a1d10, inset 0 -3px 0 rgba(0,0,0,.3), 0 3px 0 rgba(0,0,0,.2); }
.team-bar .tb-txt small { display: none; }
.team-bar .tb-txt b { font: 600 .72rem/1 "Pixelify Sans", var(--px); color: #ffe6a8; }
.stage:has(#field) #log { -webkit-line-clamp: 1; height: 1.4em; font-size: .92rem; }
@media (max-width: 560px) { .stage:has(#field) #log { font-size: .84rem; } }
/* Turbo/Überspringen und reduzierte Bewegung: Effekte weitgehend aus */
body.fast .xfx-arc, body.fast .xfx-trail, body.fast .xfx-wave, body.fast .xfx-wipe, body.fast .xfx-shock { display: none; }
@media (prefers-reduced-motion: reduce) { .xfx, .xfx-wipe, .fu-ko.kx i { animation: none !important; } .xfx-wipe { display: none; } }
/* Fork X: Finale-Schriftzug als Pixel-Lettering statt rotem Kasten, Sternchen gut sichtbar */
#field .fx3.ko-big { background: none !important; box-shadow: none !important; padding: 0 !important; font-size: 1.9rem !important; color: #ffe08a !important; letter-spacing: .04em;
  text-shadow: 2px 0 0 #3a2210, -2px 0 0 #3a2210, 0 2px 0 #3a2210, 0 -2px 0 #3a2210, 2px 2px 0 #3a2210, -2px 2px 0 #3a2210, 2px -2px 0 #3a2210, -2px -2px 0 #3a2210, 0 5px 0 rgba(30,15,5,.45) !important; }
.fu-ko.kx { bottom: 30%; width: 40px; margin-left: -20px; }
.fu-ko.kx i { width: 9px; height: 9px; margin: -4px 0 0 -4px; filter: drop-shadow(0 1px 0 #6b4a14); }

/* ===== Fork V: Du bist Kapitän ===== */
.capv-me { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 6px; border-radius: 14px; background: linear-gradient(180deg, #fffaf0, #f6ead0); border: 2px solid #c9a46a; box-shadow: 0 3px 0 #c9a46a; }
.capv-spr { position: relative; flex: none; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 12px; background: var(--panel-2); border: 2px solid var(--line); }
.capv-spr svg { width: 46px; height: auto; }
.capv-hat { position: absolute; right: -6px; top: -6px; font-style: normal; font-size: .8rem; background: #fff3c4; border: 1px solid #c9a46a; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; }
.capv-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.capv-k { font: 600 .7rem/1 'Pixelify Sans', 'Fredoka', sans-serif; color: var(--wood); letter-spacing: .04em; text-transform: uppercase; }
.capv-txt b { font: 600 1.1rem/1.15 'Fredoka', sans-serif; }
.capv-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.capv-tag { font-style: normal; font-size: .74rem; padding: 2px 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); white-space: nowrap; }
.capv-tag.fr { background: #f3ecff; border-color: #c9b0ea; }
.capv-grow { font-size: .74rem; color: var(--mute); }
.capv-h { margin-top: 10px; }
.capv-growbox { margin: 4px 0 10px; padding: 8px 10px; border-radius: 10px; background: #fff7e2; border: 1px dashed #e0c48a; }
.capv-growbox b { display: block; font: 600 .9rem Fredoka, sans-serif; }
.capv-growbox small { font-size: .78rem; color: var(--mute); }

/* ===== Fork Z: Lage & Wetter ===== */
.lage-chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px 0 7px; border-radius: 9px;
  background: #fbf3e2; border: 2px solid #d9c49a; box-shadow: 0 2px 0 #c7ad7c; font: 600 .82rem/1 'Fredoka', sans-serif; color: var(--ink); }
.lage-chip i { font-style: normal; font-size: 1rem; line-height: 1; }
.lage-chip b { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--wood); color: #fffdf6; font-size: .7rem; display: inline-grid; place-items: center; }
.lage-chip b.lg-one { background: none; color: var(--ink); font-size: .8rem; padding: 0; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.lage-chip:active { transform: translateY(2px); box-shadow: 0 0 0 #c7ad7c; }
.fpop-card.lage-pop { max-width: 380px; padding: 0 0 14px; overflow: hidden; }
.lage-pop .lg-sky { height: 92px; overflow: hidden; border-bottom: 2px solid var(--line); }
.lage-pop .lg-sky svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.lage-pop .event-kicker { display: block; margin: 12px 16px 6px; }
.lg-list { display: grid; gap: 8px; padding: 0 14px; }
.lg-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.lg-row.bad { background: #fbeee9; border-color: #ecc7bb; }
.lg-ico { font-style: normal; font-size: 1.3rem; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #fff8e8; box-shadow: inset 0 -2px 0 #e6d4ad; }
.lg-row small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.lg-row b { display: block; font: 600 .95rem/1.2 'Fredoka', sans-serif; }
.lg-row em { display: block; font-style: normal; font-size: .8rem; line-height: 1.35; color: var(--mute); margin-top: 1px; }
.lage-pop .fpop-btns { padding: 0 14px; }
/* Wetter in der Reise-Szene und dezent im Kampf */
.journey.wx-rain .jr-stage, .journey.wx-storm .jr-stage { filter: saturate(.85) brightness(.95); }
.journey.wx-fog .jr-stage { filter: saturate(.75) brightness(1.04); }
.journey.tm-night .jr-sun, .journey.tm-dusk .jr-sun { opacity: .35; }
.field.lw-rain .f-stage::before, .field.lw-storm .f-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .28;
  background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(200, 220, 240, .9) 14px 15px); background-size: 40px 40px; animation: wx-rain .6s linear infinite; }
.field.lw-storm .f-stage::before { opacity: .36; }
.field.lw-snow .f-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .5;
  background-image: radial-gradient(#fff 1px, transparent 1.5px), radial-gradient(#fff 1px, transparent 1.5px); background-size: 34px 34px, 52px 52px; background-position: 0 0, 17px 20px; animation: wx-snow 6s linear infinite; }
.field.lw-fog .f-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(180deg, rgba(240, 244, 246, .0) 30%, rgba(240, 244, 246, .35) 70%); }
@keyframes wx-rain { to { background-position: -10px 40px; } }
@keyframes wx-snow { to { background-position: 0 102px, 17px 156px; } }
@media (prefers-reduced-motion: reduce) { .field.lw-rain .f-stage::before, .field.lw-storm .f-stage::before, .field.lw-snow .f-stage::before { animation: none; } }

/* ===== Fork Y: Kampf-Vorbereitung ===== */
.pz-head { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.pz-kick { font: 600 .68rem/1 'Fredoka', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--wood); opacity: .8; }
.pz-head h2 { margin: 0; line-height: 1.15; }
.pz-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.pz-chips .danger { margin: 0; padding: 4px 8px; border-radius: 8px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); vertical-align: 0; }
.pz-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 8px; cursor: pointer; position: relative;
  background: #fff8e6; border: 2px solid #e2cfa4; box-shadow: 0 2px 0 #d6bd88; font: 600 .78rem/1.1 'Fredoka', sans-serif; color: var(--ink); white-space: nowrap; }
.pz-chip b { font-weight: 600; }
.pz-chip.gold { background: #fff1c9; border-color: #e3c06a; box-shadow: 0 2px 0 #c9a04a; }
.pz-chip.epic { background: #f2e9fb; border-color: #c9b0ea; box-shadow: 0 2px 0 #b096d6; }
.pz-chip.wave { background: #e8f2fa; border-color: #a9c9e2; box-shadow: 0 2px 0 #8fb2cf; }
.pz-chip.info { color: var(--mute); }
.pz-ic { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; font-size: .85rem; line-height: 1; }
.pz-ic svg { width: 16px; height: 16px; image-rendering: pixelated; }
.pz-chip:active, .pz-mech:active, .pz-c:active { transform: translateY(1px); box-shadow: 0 1px 0 #d6bd88; }
/* Gegenüberstellung: auch am Handy nebeneinander, kompakt */
.pz-pv { margin: 4px 0 8px; padding: 10px 8px 8px; border-radius: 12px; background: var(--panel-2); border: 2px solid var(--line); }
@media (max-width: 560px) {
  .pz-pv.pv { grid-template-columns: 1fr auto 1fr; gap: 4px; }
  .pz-pv .pv-vs { padding-top: 16px; font-size: 13px; }
  .pz-pv .pv-side:last-child .pv-row { justify-content: flex-end; }
  .pz-pv .pv-side:last-child .pv-label { text-align: right; }
  .pz-pv .pv-row { gap: 4px; }
  .pz-pv .pv-u { width: 44px; }
  .pz-pv .pv-u .pv-s { width: 26px; height: 30px; }
  .pz-pv .pv-u.boss { width: 52px; }
  .pz-pv .pv-u.boss .pv-s { width: 34px; height: 40px; }
}
/* Boss-Fähigkeit und Konter: eine Zeile, Rest beim Antippen */
.pz-info { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.pz-mech, .pz-counter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 10px; border-radius: 10px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.pz-mech { cursor: pointer; position: relative; }
.pz-mech b { font: 600 .9rem/1.2 'Fredoka', sans-serif; }
.pz-mech-k { font: 600 .64rem/1 'Fredoka', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.pz-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pz-more { font-style: normal; margin-left: auto; color: var(--mute); font-size: .8rem; }
.pz-c { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 7px; font: 600 .76rem/1.1 'Fredoka', sans-serif; cursor: pointer; position: relative; border: 1.5px solid; }
.pz-c i { font-style: normal; }
.pz-c em { font-style: normal; font-size: .72rem; }
.pz-c.ok { background: #e9f6e2; border-color: #9fd08a; color: #2f5a22; }
.pz-c.no { background: #fbeceb; border-color: #e3aaa2; color: #8a3a2e; }
.pz-c.tip { background: #fff8e6; border-color: #e2cfa4; color: var(--ink); }
.pz-rival { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 0 8px; border-radius: 12px; background: #fde9e3; border: 2px solid #e8a08a; box-shadow: 0 2px 0 #e8a08a; cursor: pointer; position: relative; }
.pz-rival small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #9a4a36; }
.pz-rival b { font: 600 .95rem 'Fredoka', sans-serif; }
/* Spezialangriff: Pixel-Abzeichen mit Ladebalken */
.pz-sp { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 8px; border-radius: 12px; position: relative;
  background: linear-gradient(180deg, #3a2a4a, #2c2038); border: 2px solid #1d1426; box-shadow: 0 3px 0 #1d1426; color: #fdf6e8; }
.pz-sp.off { background: var(--panel-2); border-color: var(--line); box-shadow: 0 2px 0 var(--line); color: var(--ink); cursor: pointer; }
.pz-sp-art { flex: none; width: 34px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.12); }
.pz-sp.off .pz-sp-art { background: var(--panel); filter: grayscale(.6); opacity: .8; }
.pz-sp-art svg { width: 28px; height: 32px; image-rendering: pixelated; }
.pz-sp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; position: relative; }
.pz-sp-t small { font: 600 .62rem/1 'Fredoka', sans-serif; letter-spacing: .07em; text-transform: uppercase; opacity: .75; }
.pz-sp-t small .pz-more { color: inherit; margin-left: 2px; }
.pz-sp-t b { font: 600 .92rem/1.15 'Fredoka', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-bar { display: flex; gap: 3px; }
.pz-bar i { flex: 1; max-width: 26px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.18); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); }
.pz-sp.off .pz-bar i { background: #e4d6b4; }
.pz-bar i.on { background: #f2c94c; box-shadow: inset 0 -2px 0 #c08a2e; }
.pz-sp.ready .pz-bar i.on { animation: pz-glow 1.6s ease-in-out infinite; }
@keyframes pz-glow { 50% { background: #ffe48a; } }
.pz-sp-st { font: 600 .72rem 'Fredoka', sans-serif; color: var(--mute); }
.pz-sp-btn { all: unset; box-sizing: border-box; flex: none; cursor: pointer; padding: 9px 12px; border-radius: 10px; font: 700 .82rem 'Nunito', sans-serif;
  background: #f2c94c; color: #4a2d0a; box-shadow: 0 3px 0 #b8862a; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; gap: 4px; }
.pz-sp-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #b8862a; }
.pz-sp.on { border-color: #4f9a5a; box-shadow: 0 3px 0 #2f6a38, 0 0 0 2px rgba(79,154,90,.35); }
.pz-sp.on .pz-sp-btn { background: #6fbf5a; color: #10300c; box-shadow: 0 3px 0 #3a7a30; }
@media (prefers-reduced-motion: reduce) { .pz-sp.ready .pz-bar i.on { animation: none; } }
/* „Kampf starten“: am Handy fest im Daumenbereich */
.pz-dock .btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; font-size: 1.05rem; }
@media (max-width: 560px) {
  .stage:has(.pz-dock) { padding-bottom: 86px; }
  .stage .pz-dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; margin: 0;
    background: rgba(255, 250, 238, .94); border-radius: 18px; padding: 8px; box-shadow: 0 6px 20px rgba(60, 35, 15, .25); backdrop-filter: blur(4px); }
  .stage .pz-dock .btn { margin: 0; }
}
.pz-mech { flex-wrap: nowrap; }
.pz-mech b { white-space: nowrap; }
.pz-mech .pz-tags { flex-wrap: nowrap; overflow: hidden; }
.pz-sp-t small { display: flex; align-items: center; gap: 4px; }
.pz-sp-t small .pz-more { margin: 0; font-size: .7rem; }
.pz-sp-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) {
  .pz-sp-btn .key { display: none; }
  .pz-sp-btn { padding: 9px 11px; }
  .pz-mech-k { display: none; }
}
@media (max-width: 560px) { .pz-counter .pz-mech-k { display: inline; } }
/* Skillbaum: Franky erklärt beim ersten Besuch */
.sk-intro { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.sk-intro-face { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #e9f4f4; display: grid; place-items: center; border: 2px solid #b9d6d6; }
.sk-intro-face svg { width: 36px; height: auto; }
.sk-intro b { display: block; font: 600 .8rem Fredoka, sans-serif; color: var(--wood); }
.sk-intro span { font-size: .84rem; line-height: 1.4; }

/* ===== Fork AA: Buttons, Ziele, Weltkarte ===== */
/* Knöpfe: Holz-Glanz und Druckkante für alle Haupt-Knöpfe (nur Bild-Schicht, Farben bleiben) */
.btn:not(.ghost):not(.mini) { background-image: linear-gradient(180deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.04) 42%, rgba(0,0,0,.06) 100%); text-shadow: 0 1px 0 rgba(0,0,0,.22); }
.btn.ghost { background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
/* Leinen los: Holzplanken, Seil-Kante, kräftiger Druck */
.sail-row .btn.sail { position: relative; border-radius: 14px; overflow: hidden;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 11px, rgba(0,0,0,.07) 11px 12px), linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.08));
  box-shadow: inset 0 0 0 2px rgba(255,235,200,.12), 0 5px 0 var(--btnedge), 0 12px 20px -10px rgba(60,40,15,.5); }
.sail-row .btn.sail:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px rgba(255,235,200,.12), 0 1px 0 var(--btnedge); }
.sail-row .btn.sail::after { content: ''; position: absolute; left: 10px; right: 10px; top: 5px; height: 2px; border-radius: 2px; background: rgba(255,240,210,.22); }
/* Spiel-Einstiege im Hafen: größere Pixel-Symbole, klarer gesperrt-Zustand */
.action-dock .ad-tile { min-height: 64px; align-content: center; transition: transform .08s ease; }
.action-dock .ad-tile .ad-ico { width: 26px; height: 26px; display: grid; place-items: center; font-size: 20px; font-style: normal; line-height: 1; }
.action-dock .ad-tile .ad-ico svg { width: 24px; height: 24px; }
.action-dock .ad-tile b { font: 600 .82rem Fredoka, sans-serif; color: #3a2a14; }
.action-dock .ad-tile.locked { filter: saturate(.35); opacity: .78; }
.action-dock .ad-tile:not(.locked):hover { transform: translateY(-1px); }

/* Nächstes Ziel */
.wg-card { margin: 10px 0 2px; padding: 10px 10px 8px; border-radius: 14px; background: linear-gradient(180deg, #fffaf0, #f7ecd4); border: 2px solid #e2cfa4; box-shadow: 0 3px 0 #e2cfa4; }
.wg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 6px; }
.wg-k { font: 600 .72rem/1 'Pixelify Sans', Fredoka, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--wood); }
.wg-map { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 5px; border-radius: 9px; font: 600 .78rem Fredoka, sans-serif; color: #4a3520;
  background: #fff6e2; border: 2px solid #d9bd86; box-shadow: 0 2px 0 #c49a5a; }
.wg-map:active { transform: translateY(2px); box-shadow: none; }
.wg-map svg { width: 20px; height: 20px; image-rendering: pixelated; }
.wg-goal { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin-top: 6px; border-radius: 12px;
  background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
div.wg-goal { cursor: default; }
button.wg-goal:active { transform: translateY(2px); box-shadow: none; }
.wg-ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #f3e6c8; font-style: normal; font: 700 1.1rem Fredoka, sans-serif; color: var(--wood); }
.wg-ico svg { width: 30px; height: 30px; image-rendering: pixelated; }
.wg-skill .wg-ico { background: #fff1c4; color: #b07810; } .wg-gear .wg-ico { background: #e3f3dc; color: #3f7a2e; } .wg-endless .wg-ico { background: #e4ecf7; color: #2c5c8a; }
.wg-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wg-t b { font: 600 .92rem/1.2 Fredoka, sans-serif; color: var(--ink); }
.wg-t small { font-size: .76rem; line-height: 1.3; color: var(--mute); }
.wg-go { flex: none; font-style: normal; font: 700 1.3rem Fredoka, sans-serif; color: #c49a5a; }

/* Reiseleiste: kleiner Karten-Knopf */
.vy-map { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 6px; vertical-align: middle; border-radius: 8px; background: #fff6e2; border: 2px solid #d9bd86; box-shadow: 0 2px 0 #c49a5a; }
.vy-map:active { transform: translateY(2px); box-shadow: none; }
.vy-map svg { width: 22px; height: 22px; image-rendering: pixelated; }

/* Weltkarte */
.fpop-card.wm-pop { max-width: 560px; background: linear-gradient(180deg, #fbf3df, #f1e2bf); }
.wm-pop h3 { font: 600 1.3rem Fredoka, sans-serif; margin: 2px 0 10px; }
.wm-chart { position: relative; padding: 10px; border-radius: 14px; border: 3px solid #8a5a30; box-shadow: inset 0 0 0 2px #c49a5a, 0 4px 0 #6b4424;
  background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.5), transparent 40%), repeating-linear-gradient(0deg, rgba(160,120,60,.06) 0 2px, transparent 2px 6px), #f4e6c6; }
.wm-sea { display: flex; gap: 10px; align-items: stretch; padding: 8px; border-radius: 12px; background: rgba(255,250,236,.75); border: 2px solid #d9bd86; }
.wm-sea.lock { background: rgba(230,220,200,.55); border-style: dashed; }
.wm-scene { position: relative; flex: none; width: 112px; border-radius: 9px; overflow: hidden; border: 2px solid #8a5a30; align-self: flex-start; }
.wm-scene > svg { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.wm-sea.lock .wm-scene > svg { filter: grayscale(.8) brightness(.9); }
.wm-here { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 3px; padding: 2px 4px; background: rgba(43,29,20,.72); color: #ffe28a; font: 600 .62rem Fredoka, sans-serif; }
.wm-here svg { width: 22px; height: auto; }
.wm-fog { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.3rem; background: rgba(240,230,210,.35); }
.wm-body { flex: 1; min-width: 0; }
.wm-title { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.wm-title b { font: 600 1rem Fredoka, sans-serif; color: #3a2a14; }
.wm-st { font: 600 .68rem Fredoka, sans-serif; padding: 2px 7px; border-radius: 6px; background: #f0e0bc; color: #7a5a30; white-space: nowrap; }
.wm-sea.done .wm-st { background: #dff0d4; color: #3f7a2e; } .wm-sea.now .wm-st { background: #fff1c4; color: #a06a10; }
.wm-bar { position: relative; height: 12px; margin: 5px 0 6px; border-radius: 6px; background: #e8d7b0; border: 1px solid #c9a46a; overflow: hidden; }
.wm-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #f2c94c, #c99a2a); }
.wm-bar small { position: relative; display: block; text-align: center; font: 600 .6rem/12px Fredoka, sans-serif; color: #4a3520; }
.wm-isles { display: flex; flex-wrap: wrap; gap: 4px; }
.wm-isle { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 3px; border-radius: 7px; background: #fffaf0; border: 1px solid #e0cda2; font-size: .66rem; color: #5a4226; }
.wm-isle.big { border-color: #c49a5a; background: #fff3d6; font-weight: 700; }
.wm-isle.lock { opacity: .55; } .wm-isle.open { opacity: .85; }
.wm-isle.beat { background: #eef7e6; border-color: #a7cf8e; }
.wm-isle em { font-style: normal; color: #3f7a2e; font-weight: 800; }
.wm-dot { width: 7px; height: 7px; border-radius: 2px; background: #c49a5a; display: inline-block; }
.wm-isle.seen .wm-dot, .wm-isle.beat .wm-dot { background: #5aa24a; }
.wm-foe { display: inline-block; width: 16px; height: 16px; } .wm-foe svg { width: 16px; height: 16px; }
.wm-alt { margin-top: 5px; font-size: .7rem; color: #6b4a26; } .wm-alt.lock { opacity: .6; }
.wm-rope { height: 14px; margin: 0 auto; width: 4px; background: repeating-linear-gradient(180deg, #a07040 0 4px, #6b4424 4px 7px); border-radius: 2px; }
.wm-modes-h { margin: 12px 2px 6px; font: 600 .72rem/1 'Pixelify Sans', Fredoka, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--wood); }
.wm-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.wm-mode { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 10px; background: #efe3c6; border: 2px solid #d9c49a; opacity: .7; text-align: center; }
.wm-mode.ok { background: #fffaf0; border-color: #c49a5a; box-shadow: 0 2px 0 #c49a5a; opacity: 1; }
.wm-mode i { font-style: normal; font-size: 18px; height: 22px; display: grid; place-items: center; } .wm-mode i svg { width: 20px; height: 20px; }
.wm-mode b { font: 600 .74rem Fredoka, sans-serif; } .wm-mode small { font-size: .62rem; color: var(--mute); }
@media (max-width: 560px) {
  .wm-sea { flex-direction: column; } .wm-scene { width: 100%; max-height: 96px; } .wm-scene > svg { width: 100%; height: auto; margin-top: -8%; }
}

/* ===== Fork AC: Event-Ergebnisse ===== */
/* Abzeichen: Icon + kurze Zahl. grün = Buff, rötlich = Debuff, gelb = Gold/Beute, Holz = Info */
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ev-chips.sm { gap: 4px; margin-top: 5px; }
.ev-chip { --bg: #f6ead0; --bd: #c9a46a; --sh: #a8834c; --ink: #5a3a1e;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 5px; border-radius: 8px;
  background: var(--bg); border: 2px solid var(--bd); box-shadow: 0 2px 0 var(--sh); color: var(--ink);
  font: 700 .85rem/1 'Nunito', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap;
  animation: ev-pop .38s cubic-bezier(.2, 1.5, .4, 1) backwards; animation-delay: calc(.12s + var(--k, 0) * .09s); }
.ev-chip.t-buff  { --bg: #e7f5e1; --bd: #8fc77e; --sh: #6aa35a; --ink: #24561f; }
.ev-chip.t-debuff { --bg: #fbe6e1; --bd: #e2a092; --sh: #c27a6a; --ink: #7a2a1e; }
.ev-chip.t-gold  { --bg: #fff3cf; --bd: #e2be62; --sh: #b8913a; --ink: #6a4a10; }
.ev-chip.big b { max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.ev-chip .ev-ic { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
.ev-chip .ev-ic svg, .ev-chip .ev-ic .pxi, .ev-chip .ev-ic .pxi svg { width: 16px; height: 16px; display: block; }
.ev-chip.t-debuff .ev-ic { filter: saturate(.7); }
.ev-chip .ev-until, .ev-chip .ev-arr { width: 12px; height: 12px; display: grid; place-items: center; margin-left: -1px; }
.ev-chip .ev-until svg, .ev-chip .ev-arr svg { width: 12px; height: 12px; display: block; }
.ev-chips.sm .ev-chip { padding: 2px 6px 2px 3px; font-size: .74rem; border-width: 1.5px; box-shadow: 0 1px 0 var(--sh); animation: none; }
.ev-chips.sm .ev-chip .ev-ic { width: 14px; height: 14px; }
.ev-chips.sm .ev-chip .ev-ic svg, .ev-chips.sm .ev-chip .ev-ic .pxi, .ev-chips.sm .ev-chip .ev-ic .pxi svg { width: 12px; height: 12px; }
@keyframes ev-pop { from { opacity: 0; transform: translateY(6px) scale(.7); } }

/* Ergebnis-Fenster: Holzrahmen mit kleinen Kanten, Kicker, Titel, eine Zeile Text, Abzeichen */
.notice.ev-res { position: relative; display: block; margin: 0 0 12px; padding: 10px 12px 12px; border-radius: 12px;
  background: linear-gradient(180deg, #fffaf0, #f8eed8); border: 2px solid #c9a46a; box-shadow: 0 3px 0 #a8834c, 0 6px 14px rgba(70, 40, 15, .1);
  animation: ev-in .3s ease-out backwards; }
.notice.ev-res::before, .notice.ev-res::after { content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; background: #a8834c; box-shadow: 0 1px 0 #fff3d6; }
.notice.ev-res::before { left: 6px; } .notice.ev-res::after { right: 6px; }
@keyframes ev-in { from { opacity: 0; transform: translateY(-6px); } }
.ev-res-k { display: block; font: 600 .66rem/1 'Pixelify Sans', 'Fredoka', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #a8834c; margin: 0 0 3px; }
.ev-res-t { display: block; font: 600 1rem/1.2 'Fredoka', sans-serif; color: var(--ink); }
.ev-res-x { margin: 3px 0 0; font-size: .86rem; line-height: 1.35; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-rest { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ev-rest small { font-size: .78rem; color: var(--mute); }
.notice.ev-res ul { display: none; }

/* Folgen-Kopfzeile: 3 Pixel-Punkte als Fortschritt */
.ev-ep { display: inline-flex; align-items: center; gap: 5px; }
.ev-ep-dots { display: inline-flex; gap: 2px; font-style: normal; }
.ev-ep-dots i { width: 6px; height: 6px; background: #e4d6b4; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.ev-ep-dots i.on { background: #c08a2e; box-shadow: inset 0 -1px 0 #8a5a1a; }

/* Wahlkarten: Vorschau-Zeile unter dem Hinweis */
.ce-opt .ce-opt-b, .event-opt .opt-body > span { display: flex; flex-direction: column; }
.event-opt .opt-body > span .ev-chips { margin-top: 5px; }
@media (max-width: 560px) {
  .notice.ev-res { padding: 9px 10px 10px; }
  .ev-chip { font-size: .8rem; padding: 3px 8px 3px 4px; }
}
@media (prefers-reduced-motion: reduce) { .ev-chip, .notice.ev-res { animation: none; } }

/* ===== Fork AB: Meta-Statistik ===== */
.sm-sec .sm-fazit { margin: 4px 0 8px; padding: 8px 12px; border-radius: 12px; background: #fff4d8; border: 2px solid #e6c27a; box-shadow: 0 2px 0 #e6c27a; font-size: .88rem; line-height: 1.4; }
.sm-legend { display: flex; gap: 14px; font-size: .74rem; color: var(--mute); margin: 0 2px 6px; }
.sm-legend i { display: inline-block; width: 14px; height: 6px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.sm-legend i.win, .sm-bar.win i { background: linear-gradient(90deg, #5aa858, #7cc46e); }
.sm-legend i.dmg, .sm-bar.dmg i { background: linear-gradient(90deg, #d1604a, #e88a62); }
.sm-list { display: grid; gap: 7px; }
.sm-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.sm-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-size: 1.15rem; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); }
.sm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sm-main b { font: 600 .92rem/1.1 Fredoka, sans-serif; }
.sm-main small { font-size: .72rem; color: var(--mute); }
.sm-bar { display: block; height: 6px; border-radius: 3px; background: #efe5cf; overflow: hidden; }
.sm-bar i { display: block; height: 100%; border-radius: 3px; }
.sm-bar.dmg { height: 4px; }
.sm-num { flex: none; text-align: right; display: flex; flex-direction: column; min-width: 54px; }
.sm-num b { font: 600 1rem/1 'Pixelify Sans', Fredoka, sans-serif; color: #3f7a32; }
.sm-num small { font-size: .72rem; color: #a5523e; font-variant-numeric: tabular-nums; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 10px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); font-size: .8rem; }
.sm-chip i { font-style: normal; }
.sm-chip em { font-style: normal; font-weight: 700; color: #3f7a32; }
.sm-chip small { font-size: .68rem; color: var(--mute); }
.sm-note { font-size: .74rem !important; margin: 6px 2px 0; }

/* ===== Fork AD: Passt das zu mir? ===== */
.fit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; width: 100%; box-sizing: border-box; margin-top: 2px; padding: 5px 7px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: .76rem; line-height: 1.3; color: var(--ink); text-align: left; }
.fit-g { font-style: normal; font: 700 .7rem/1 'Nunito', sans-serif; padding: 3px 6px; border-radius: 6px; white-space: nowrap; }
.fit-up { background: #eef7e8; border-color: #b9dca6; }
.fit-up .fit-g { background: #4f9a5a; color: #fff; box-shadow: 0 2px 0 #2f6a38; }
.fit-ok .fit-g { background: #efe4cc; color: #6b4c26; box-shadow: 0 2px 0 #d8c39a; }
.fit-down { opacity: .78; }
.fit-down .fit-g { background: #e6e0d6; color: #7a6c57; box-shadow: 0 2px 0 #cfc6b6; }
.fit-t { flex: 1 1 140px; min-width: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.fit-t b { font-weight: 700; }
.fit-faces { display: inline-flex; align-items: center; }
.fit-faces i { width: 18px; height: 18px; display: inline-grid; place-items: center; margin-right: -3px; border-radius: 50%; background: #fffaf0; border: 1px solid var(--line); overflow: hidden; }
.fit-faces i svg { width: 16px; height: auto; }
.fit-q { font-style: normal; flex: none; width: 20px; height: 20px; display: inline-grid; place-items: center; margin-left: auto; border-radius: 50%; font: 700 .72rem/1 'Nunito', sans-serif; color: var(--wood); background: #fff7e2; border: 1px solid #d9b36a; box-shadow: 0 2px 0 #d9b36a; cursor: help; }
.tc-face .fr-fam { font-size: .74rem; }
.tc-ben { display: none !important; }   /* steckt jetzt in der Fit-Zeile */
@media (max-width: 560px) { .fit { font-size: .74rem; } .fit-q { width: 24px; height: 24px; } }

/* ===== Fork AF: Spezial-Knopf ===== */
.pz-dock { display: flex; gap: 8px; align-items: stretch; }
.pz-dock .btn { flex: 1; width: auto; }
.sp-btn { all: unset; box-sizing: border-box; flex: none; width: 60px; min-height: 52px; margin-top: 12px; border-radius: 12px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; position: relative;
  background: #3a2a4a; color: #f2d24a; border: 2px solid #22162e; box-shadow: 0 3px 0 #22162e; }
.stage .pz-dock .sp-btn { margin: 0; }
.sp-btn .sb-star { font-style: normal; font: 700 1.25rem/1 'Pixelify Sans', 'Fredoka', sans-serif; }
.sp-btn .sb-pips { display: flex; gap: 2px; }
.sp-btn .sb-pips i { width: 6px; height: 4px; background: rgba(255,255,255,.18); }
.sp-btn .sb-pips i.on { background: #f2c94c; }
.sp-btn .sb-k { font: 600 .62rem/1 'Fredoka', sans-serif; color: #f6e7b0; }
.sp-btn.off { opacity: .55; cursor: help; }
.sp-btn.off .sb-star { color: #b9a9c8; }
.sp-btn.ready:not(.on) { animation: sb-pulse 2.4s ease-in-out infinite; }
@keyframes sb-pulse { 0%, 100% { box-shadow: 0 3px 0 #22162e, 0 0 0 0 rgba(242, 201, 76, 0); } 50% { box-shadow: 0 3px 0 #22162e, 0 0 0 4px rgba(242, 201, 76, .28); } }
.sp-btn.ready:active { transform: translateY(3px); box-shadow: 0 0 0 #22162e; }
.sp-btn.on { background: #2f7a45; border-color: #1d5230; box-shadow: 0 3px 0 #1d5230; color: #fff; }
.sp-btn.on .sb-k { color: #e3f6e3; }
@media (prefers-reduced-motion: reduce) { .sp-btn.ready { animation: none; } }

/* ===== Fork AE: Team auf einen Blick ===== */
.tm-wrap { display: flex; flex-direction: column; gap: 8px; }
.tm-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-grid.near { padding-top: 6px; border-top: 1px dashed var(--line); }
.tm-em { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start;
  width: 50px; min-height: 58px; padding: 5px 3px 5px; border-radius: 9px; background: linear-gradient(180deg, #fffaf0, #f3e6c8);
  border: 2px solid #d9c290; box-shadow: 0 3px 0 #c9ad74; transition: transform .08s; }
.tm-em:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9ad74; }
.tm-ico { width: 26px; height: 26px; display: grid; place-items: center; font-style: normal; }
.tm-ico svg { width: 22px; height: 22px; display: block; }
.tm-hex { font: 700 .95rem/1 'Fredoka', sans-serif; color: #5a3a12; }
.tm-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center;
  font: 700 .7rem/1 'Fredoka', sans-serif; color: #fff; background: #6b4226; box-shadow: 0 2px 0 #3e2510; }
.tm-pips { display: flex; gap: 2px; margin-top: 4px; }
.tm-pips i { width: 6px; height: 6px; background: #e2d2b0; box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); }
.tm-pips i.on { background: #c98a2e; }
.tm-miss { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font: 700 .62rem/1 'Fredoka', sans-serif; font-style: normal; color: #7a6c57; background: #fffdf6; border: 1px solid #e4d6b4; border-radius: 6px; padding: 1px 4px; white-space: nowrap; }
/* Stufen: Bronze, Silber, Gold leuchten nur ganz leicht */
.tm-bronze { border-color: #d2a06a; box-shadow: 0 3px 0 #b07a44; }
.tm-silver { border-color: #b9c4cf; box-shadow: 0 3px 0 #8f9aa6, 0 0 0 2px rgba(185,196,207,.25); }
.tm-silver .tm-pips i.on { background: #8f9aa6; }
.tm-gold { border-color: #e8c25a; box-shadow: 0 3px 0 #b8902e, 0 0 8px rgba(232,194,90,.45); background: linear-gradient(180deg, #fff6d6, #f6e3a8); }
.tm-gold .tm-pips i.on { background: #d4a020; }
.tm-duo { border-color: #e7a6bf; box-shadow: 0 3px 0 #c97898; } .tm-duo .tm-hex { color: #c0507a; }
.tm-ally { border-color: #b4a2d8; box-shadow: 0 3px 0 #8a76b8; }
.tm-combo { border-color: #93c4a0; box-shadow: 0 3px 0 #6a9a76; }
.tm-fruit { border-color: #e8a08a; box-shadow: 0 3px 0 #c0705a; }
.tm-off { opacity: .55; filter: saturate(.4); background: #f6f1e3; border-style: dashed; box-shadow: none; }
.tm-em.sel { outline: 2px solid var(--sea); outline-offset: 2px; opacity: 1; filter: none; }
.tm-detail { min-height: 38px; padding: 7px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: .8rem; line-height: 1.35; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.tm-detail > small { color: var(--mute); }
.tm-detail b { font: 600 .9rem 'Fredoka', sans-serif; }
.tm-detail em { font-style: normal; font-size: .68rem; color: var(--wood); background: #f6ead0; border-radius: 6px; padding: 1px 6px; }
.tm-detail .tm-a, .tm-detail .tm-b { flex-basis: 100%; }
.tm-detail .tm-b { color: var(--mute); }
.tm-none { color: var(--mute); font-size: .8rem; }
.tm-legend { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: .72rem; color: var(--mute); margin: 8px 0 0; }
.tm-legend .tm-l { width: 10px; height: 10px; border-radius: 3px; border: 1px dashed #c9ad74; display: inline-block; }
.tm-legend .tm-l.on { background: #e8c25a; border-style: solid; }
.tm-legend em { font-style: normal; font-weight: 700; color: #7a6c57; border: 1px solid #e4d6b4; border-radius: 6px; padding: 0 4px; }
/* PC-Leiste links: Raster statt langer Textkarten */
#traits .tm-wrap { padding: 2px 0; }
#traits .tm-em { width: 48px; }
.syn-pop .syn-pop-list { max-height: none; }
.syn-pop .tm-em { width: 54px; min-height: 60px; }
/* Mini-Karten: Typ als Farbpunkt, vorne als kleiner Pfeil */
.crewmini { position: relative; }
.tm-tdot { position: absolute; left: 3px; bottom: 9px; width: 7px; height: 7px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); z-index: 2; background: #c9ced8; }
.tm-tdot.t-kraft { background: #d1604a; } .tm-tdot.t-klinge { background: #5a9a6a; } .tm-tdot.t-technik { background: #4f8fe0; }
.crewmini.is-front::after { content: '◀'; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); font-size: 9px; color: #6b4226; text-shadow: 0 1px 0 #fff; }
#crew.compact .chips:empty { display: none; }
@media (max-width: 560px) { .tm-em { width: 46px; min-height: 54px; } .syn-pop .tm-em { width: 52px; } }

/* ===== Hotfix-Runde 1 ===== */
/* Boni-Fenster: Plaketten nicht unter dem ✕ und nicht oben abgeschnitten */
.syn-pop .event-kicker { display: block; margin-right: 44px; }
.syn-pop-list { padding: 10px 6px 4px; }
/* Lesbarkeit: kleine Schrift auf mindestens ~11 px, Zahlen kräftig */
.hub-tile small { font-size: .7rem; color: #7a5a30; }
.tabbar span, .tabbar b { font-size: 11px; }
.c3-tag, .c3-fac, .c3-style, .c3-ult { font-size: 11px; }
.c3-card .no, span.no { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.emb-num { font-size: 10.5px; }
.sqd-g.none { font-size: 10px; }
em.sqc-d.up { font-size: 10px; }
.ss-say { font-size: 11px; }
.wr-k { font-size: 10.5px; }
i.wk-new { font-size: 10px; }
/* Kontrast */
.wg-go { color: #8a6430; }
.sk-node.lock small { color: #85744f; }
.rank-bar-txt { color: #2b1d10; text-shadow: 0 1px 0 rgba(255,255,255,.65); }
.mu-btn.head { color: #3a2814; }
em.type.t-kraft { background: #c76a50 !important; }
em.type.t-klinge { background: #5f8f6b !important; }
em.type.t-technik { background: #5b86b3 !important; }
/* Run-Kopf am Handy: Knöpfe dürfen in eine zweite Zeile statt rechts abgeschnitten zu werden */
@media (max-width: 560px) {
  body.in-run .head-actions { flex-wrap: wrap !important; overflow: visible !important; row-gap: 4px !important; }
}
/* Lage-Abzeichen: Symbol und Name nicht übereinander */
.lage-chip i { flex: none; min-width: 18px; text-align: center; }
.lage-chip b.lg-one { height: auto; line-height: 1.2; }
.c3-fac { font-size: 10.5px !important; }
.acard .no, .acard-card .no { font-size: 10.5px !important; }
.medal.emb .emb-num { font-size: 10.5px !important; }
.medal.emb.small .emb-num { font-size: 9.5px !important; }
.new-chip { font-size: 10.5px !important; }

/* ===== Hotfix: Wappen bei Rekruten ===== */
.ge-row { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 100%; }
.ge { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 4px 0 2px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); font: 700 .7rem/1 'Nunito', sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.ge > i { width: 15px; height: 15px; display: grid; place-items: center; font-style: normal; }
.ge > i svg { width: 15px; height: 15px; }
.ge-hex { font-size: .7rem; line-height: 1; }
.ge b { font-weight: 800; }
.ge em { font-style: normal; font-size: .58rem; margin-left: 1px; }
.ge-up { background: #e9f6e2; border-color: #8fca7a; box-shadow: 0 1px 0 #8fca7a, 0 0 0 1px rgba(143, 202, 122, .25); }
.ge-up em { color: #3f8a2e; }
.ge-plus em { color: #6b8a5e; }
.ge-down { background: #fbe9e4; border-color: #e3a595; box-shadow: 0 1px 0 #e3a595; }
.ge-down em, .ge-minus em { color: #b9533e; }
.ge-minus { opacity: .75; }
.ge-eq { opacity: .8; }
.ge-duo > i, .ge-combo > i { color: #c0507a; }
.ge-row.big { justify-content: flex-start; gap: 5px; }
.ge-row.big .ge { height: 24px; padding: 0 7px 0 3px; font-size: .78rem; }
.ge-row.big .ge small { font: 600 .74rem 'Fredoka', sans-serif; color: var(--mute); margin-left: 2px; white-space: nowrap; }
.ge-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.ge-k { font: 600 .72rem 'Fredoka', sans-serif; color: var(--wood); text-transform: uppercase; letter-spacing: .04em; }
.tv-off .tv-tags { display: flex; justify-content: center; min-height: 20px; }
.tv-off .ge-row { flex-wrap: nowrap; overflow: hidden; }
.mate .ge-row, .cap .ge-row { margin-top: 4px; }
@media (max-width: 420px) { .tv-off .ge { padding: 0 3px 0 1px; } .tv-off .ge > i, .tv-off .ge > i svg { width: 13px; height: 13px; } .tv-off .ge-row .ge:nth-child(n+4) { display: none; } }

/* ===== Hotfix: Schätze kompakt ===== */
/* Handy: Schätze/Früchte als kompakte Zeilen, alle Angebote ohne Scrollen im Blick (Felix 18:41). PC bleibt wie er ist. */
@media (max-width: 560px) {
  #stage .cards.loot { gap: 8px !important; margin-top: 6px; }
  #stage .cards.loot .opt.card.tc-opt { min-height: 0 !important; animation-duration: .3s; }
  #stage .cards.loot .tc-face { flex-direction: row; align-items: stretch; min-height: 0; border-radius: 12px; }
  #stage .cards.loot .tc-stage { width: 54px !important; min-height: 0 !important; height: auto !important; flex: none; border-right: 2px solid var(--line); border-bottom: 0; }
  #stage .cards.loot .tc-chest { display: none !important; }
  #stage .cards.loot .tc-item, #stage .cards.loot .tc-ped ~ .tc-item { width: 38px !important; height: 38px !important; left: 50% !important; top: 50% !important; bottom: auto !important;
    margin: -19px 0 0 -19px !important; animation: none !important; }
  #stage .cards.loot .tc-info { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name fam' 'text text' 'fit fit';
    align-items: center; gap: 2px 6px; padding: 6px 10px 7px !important; text-align: left; min-width: 0; }
  #stage .cards.loot .tc-rib, #stage .cards.loot .tc-take { display: none !important; }
  #stage .cards.loot .tc-sign { grid-area: name; font-size: .95rem !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #stage .cards.loot .tc-sign::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 2px 0; vertical-align: middle; background: var(--c); box-shadow: 0 1px 0 var(--cd); }
  #stage .cards.loot .tc-face:not(.tc-rare):not(.tc-epic):not(.tc-legendary):not(.tc-awakened):not(.tc-unique) .tc-sign::before { background: #b89060; }
  #stage .cards.loot .fr-fam { grid-area: fam; margin: 0 !important; font-size: .68rem; white-space: nowrap; }
  #stage .cards.loot .fr-fam b { font-size: .68rem; }
  #stage .cards.loot .tc-text { grid-area: text; font-size: .78rem !important; line-height: 1.3; color: var(--mute);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #stage .cards.loot .fit { grid-area: fit; flex-wrap: nowrap !important; margin: 1px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; min-width: 0; overflow: hidden; font-size: .72rem; }
  #stage .cards.loot .fit-g { flex: none; font-size: .64rem !important; padding: 2px 5px; }
  #stage .cards.loot .fit-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #stage .cards.loot .fit-t svg { width: 14px !important; height: 16px !important; }
  #stage .cards.loot .fit-q { flex: none; margin-left: auto; }
  #stage .cards.loot .opt.card.tc-opt.picked { transform: none !important; }
  #stage .cards.loot .opt.card.tc-opt > .key { display: none; }
  /* Kopf über den Karten knapper */
  #stage:has(.cards.loot) > h2 { font-size: 1.1rem !important; margin: 4px 0 0 !important; }
  #stage:has(.cards.loot) > h2::after { margin-top: 4px !important; }
  #stage:has(.cards.loot) > h2 + .hint { display: none; }
  #stage:has(.cards.loot) .hp-strip { margin: 0 0 4px; padding: 3px 6px; }
  #stage:has(.cards.loot) .tip-line { margin: 6px 2px 0; font-size: 12.5px; }
  #stage:has(.cards.loot) .pick-hint { margin: 6px auto 0 !important; padding: 3px 10px; font-size: 11.5px; }
  #stage:has(.cards.loot) .pick-skip-row { margin: 6px 0 0 !important; }
  /* Training darüber: eine kompakte Reihe statt 2×2 */
  #stage:has(.cards.loot) .train { padding: 8px 10px !important; margin-bottom: 8px !important; }
  #stage:has(.cards.loot) .train-head { grid-template-columns: 28px 1fr auto !important; gap: 8px !important; margin-bottom: 6px !important; }
  #stage:has(.cards.loot) .train-av svg { width: 24px !important; height: 28px !important; }
  #stage:has(.cards.loot) .train-head b { font-size: .9rem; }
  #stage:has(.cards.loot) .train-head small { font-size: .7rem; }
  #stage:has(.cards.loot) .train-opts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  #stage:has(.cards.loot) .train-opt { min-height: 58px !important; padding: 7px 2px 5px !important; gap: 1px !important; }
  #stage:has(.cards.loot) .train-opt .to-ico, #stage:has(.cards.loot) .train-opt .to-ico svg { width: 20px !important; height: 20px !important; font-size: 18px; }
  #stage:has(.cards.loot) .train-opt b { font-size: .66rem !important; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #stage:has(.cards.loot) .train-opt small { font-size: .6rem !important; line-height: 1.15; text-align: center; }
  #stage:has(.cards.loot) .train-opt .tip-badge { transform: scale(.8); top: -9px !important; }
  #stage:has(.cards.loot) .train-auto-row { margin-top: 6px !important; font-size: .74rem; }
  #stage:has(.cards.loot) .train-auto-row label, #stage:has(.cards.loot) .train-auto-row .auto-chk { padding-top: 3px !important; padding-bottom: 3px !important; min-height: 0 !important; }
}
/* Kacheln: kompakter, höchstens 3 Wappen, nur ▲/▼ als Zeichen (Fortschritt über Farbe) */
.tv-off .ge-row { gap: 2px; }
.tv-off .ge { height: 18px; padding: 0 3px 0 1px; gap: 1px; font-size: .66rem; }
.tv-off .ge > i, .tv-off .ge > i svg { width: 13px; height: 13px; }
.tv-off .ge-plus em, .tv-off .ge-minus em { display: none; }
.tv-off .ge-row .ge:nth-child(n+4) { display: none; }
.tv-off .ge-combo, .tv-off .ge-duo { display: none; }
@media (max-width: 420px) { .tv-off .ge { padding: 0 2px 0 1px; } .tv-off .ge em { font-size: .5rem; } }
@media (max-width: 560px) {
  /* ab 4 Angeboten: Effekt einzeilig, Schritt-Hinweis weg (Karten selbst sind antippbar) */
  #stage .cards.loot:has(> .opt:nth-child(4)) .tc-text { -webkit-line-clamp: 1; }
  #stage:has(.cards.loot > .opt:nth-child(4)) .pick-hint { display: none !important; }
  #stage .cards.loot .tc-info { padding: 5px 10px 6px !important; }
  #stage:has(.cards.loot) .tip-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  #stage:has(.cards.loot) .tip-line .tip-badge { display: inline-block; margin-right: 6px; transform: scale(.85); }
  #stage:has(.cards.loot) .hp-strip { gap: 4px; }
  #stage:has(.cards.loot) .hp-strip .hs-u { width: 32px; }
  #stage:has(.cards.loot) .hp-strip .hs-u i svg { width: 18px !important; height: 21px !important; }
  #stage:has(.cards.loot) .train-opt b { font-size: .62rem !important; letter-spacing: -.01em; }
  #stage:has(.cards.loot) .train-opt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #stage:has(.cards.loot) .train-auto-row .auto-check { padding: 3px 10px 3px 6px !important; min-height: 28px !important; font-size: .78rem !important; }
  #stage:has(.cards.loot) .train-auto-row .auto-check .ac-box { width: 16px !important; height: 16px !important; }
  #stage:has(.cards.loot) .pick-skip-row .pick-skip { padding-top: 7px !important; padding-bottom: 7px !important; }
}
@media (max-width: 560px) and (max-height: 760px) {
  #stage .cards.loot .tc-text { -webkit-line-clamp: 1; }
  #stage:has(.cards.loot) .train-head small { display: none; }
  #stage:has(.cards.loot) .train-opt { min-height: 52px !important; padding: 5px 2px 4px !important; }
}
@media (max-width: 560px) {
  #stage .cards.loot .fit-q { width: 20px !important; height: 20px !important; min-width: 0 !important; min-height: 0 !important; font-size: .7rem !important; line-height: 20px !important; padding: 0 !important; box-shadow: 0 1px 0 var(--line) !important; }
  #stage .cards.loot .fit-g { padding: 1px 5px !important; box-shadow: 0 1px 0 rgba(0,0,0,.15) !important; }
  #stage .cards.loot .fr-fam { padding: 1px 6px !important; border-radius: 6px; }
  #stage .cards.loot .fr-fam b { font-size: .62rem !important; letter-spacing: -.01em; }
  #stage .cards.loot .tc-info { gap: 1px 6px; }
}

/* ===== Fork AI1: Formation & Gegner-KI ===== */
.pv-u.foe { position: relative; }
.pv-guard { position: absolute; top: -6px; left: -4px; width: 14px; height: 16px; z-index: 2; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.pv-guard svg, .px-guard { width: 100%; height: 100%; display: block; }
.pv-lead { position: absolute; top: -7px; right: -3px; font-style: normal; font-size: .7rem; color: #c08a2e; text-shadow: 0 1px 0 #fff; z-index: 2; }
.pz-chip.guard .pz-ic svg { width: 12px; height: 14px; }
/* Arena: Gefolge mit kleinem Schild über dem Kopf, solange es den Anführer deckt */
.fu.guard:not(.ko)::before { content: ''; position: absolute; left: 50%; bottom: calc(100% * var(--s, 1) + 4px); width: 10px; height: 12px; margin-left: -5px; z-index: 3; opacity: .85;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' shape-rendering='crispEdges'><rect x='0' y='1' width='8' height='4' fill='%233a2a14'/><rect x='1' y='0' width='6' height='1' fill='%233a2a14'/><rect x='1' y='5' width='6' height='2' fill='%233a2a14'/><rect x='2' y='7' width='4' height='1' fill='%233a2a14'/><rect x='3' y='8' width='2' height='1' fill='%233a2a14'/><rect x='1' y='1' width='6' height='4' fill='%239fb8d6'/><rect x='2' y='5' width='4' height='1' fill='%239fb8d6'/><rect x='4' y='2' width='1' height='3' fill='%23f2c94c'/><rect x='3' y='3' width='3' height='1' fill='%23f2c94c'/></svg>"); }
.fu.lead-back .fu-body { filter: drop-shadow(0 0 0 transparent); }

/* ===== Taverne auf einen Blick ===== */
.tv-off .tv-fitb { position: absolute; top: 4px; right: 4px; z-index: 2; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px;
  font: 800 .72rem/1 'Nunito', sans-serif; font-style: normal; }
.tv-off .tv-fitb.fit-up { background: #4f9a5a; color: #fff; box-shadow: 0 2px 0 #2f6a38; }
.tv-off .tv-fitb.fit-ok { background: #efe4cc; color: #6b4c26; box-shadow: 0 2px 0 #d8c39a; }
.tv-off .tv-fitb.fit-down { background: #e6e0d6; color: #8a7c66; box-shadow: 0 2px 0 #cfc6b6; }
.tv-off .tv-why1 { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; min-height: 15px; padding: 1px 5px; border-radius: 6px;
  font-size: .64rem; line-height: 1.1; white-space: nowrap; overflow: hidden; }
.tv-off .tv-why1 b { overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.tv-off .tv-why1 svg { width: 11px; height: 11px; flex: none; }
.tv-off .tv-why1 .ge-hex { flex: none; font-size: .62rem; }
.tv-off .tv-why1.fit-up { background: #e3f3df; color: #2f6a38; }
.tv-off .tv-why1.fit-ok { background: #f5ecd8; color: #6b4c26; }
.tv-off .tv-why1.fit-down { background: #eeeae3; color: #8a7c66; }
.tv-off .tv-why1.fit-up svg rect { fill: #3f8a4a; }
.tv-off .tv-why1.fit-down svg rect { fill: #b0574a; }
.tv-off.tvr-down:not(.sel) .tv-spr { opacity: .72; filter: saturate(.7); }
.tv-off.tvr-up:not(.sold) { box-shadow: 0 0 0 2px rgba(79,154,90,.45); }
.tv-repl { display: inline-flex; align-items: center; gap: 1px; padding: 0 3px 0 2px; height: 16px; border-radius: 5px; background: #f2e9d6; border: 1px solid #dcc9a2;
  font-size: .62rem; color: #7a5a30; }
.tv-repl i { width: 13px; height: 15px; display: block; }
.tv-repl i svg { width: 100%; height: 100%; display: block; }
@media (max-width: 560px) {
  .tv-off .tv-sub { display: none; }
  .tv-off .tv-fitb { width: 16px; height: 16px; font-size: .66rem; top: 3px; right: 3px; }
}
.tv-off .tv-fitb.fit-ok { font-size: 1rem; line-height: .8; }

/* ===== ART2: neue Grafiken ===== */
/* Pixel-Ziffern für Schadenszahlen: gleiche Bewegung wie .fnum, Größe über die SVG-Höhe (Krit/groß/klein gestaffelt) */
.fnum.fpx { text-shadow: none; font-size: 0; line-height: 0; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.fnum.fpx .ga-digits { display: block; height: 28px !important; width: auto !important; image-rendering: pixelated; }
.fnum.fpx.crit .ga-digits { height: 36px !important; }
.fnum.fpx.big .ga-digits { height: 34px !important; }
.fnum.fpx.huge .ga-digits { height: 42px !important; }
.fnum.fpx.weak .ga-digits, .fnum.fpx.burn .ga-digits, .fnum.fpx.heal .ga-digits { height: 22px !important; }
.ga-monster, .ga-npc { display: block; width: 100%; height: auto; image-rendering: pixelated; }
@media (max-width: 560px) { .fnum.fpx .ga-digits { height: 24px !important; } .fnum.fpx.crit .ga-digits { height: 30px !important; } .fnum.fpx.huge .ga-digits { height: 36px !important; } .fnum.fpx.weak .ga-digits, .fnum.fpx.burn .ga-digits, .fnum.fpx.heal .ga-digits { height: 20px !important; } }

/* ===== Kampfende kompakt ===== */
/* Eine schmale Zeile mit Stil, Kombos, Gold und Bilanz, darunter ein Raster kleiner Crew-Kacheln */
.bs-wrap { margin-top: 8px; }
.bs-line { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 6px; }
.bs-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--panel); border: 2px solid var(--line);
  box-shadow: 0 2px 0 var(--line); font-size: .78rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bs-chip i { font-style: normal; font-size: .9rem; display: inline-grid; place-items: center; }
.bs-chip i svg, .bs-chip > svg { width: 14px; height: 14px; }
.bs-chip b { font-weight: 800; }
.bs-chip small { color: var(--mute); font-size: .7rem; }
.bs-chip.gold { background: #fff4d0; border-color: #e6c27a; box-shadow: 0 2px 0 #e6c27a; color: #6a4a12; }
.bs-chip.tally.on { background: #fff8e6; border-color: #e0b45c; box-shadow: 0 2px 0 #e0b45c; }
.bs-chip.build { background: #fff4d8; border-color: #e6c27a; box-shadow: 0 2px 0 #e6c27a; max-width: 100%; }
.bs-chip.build b { font: 600 .8rem Fredoka, sans-serif; overflow: hidden; text-overflow: ellipsis; }
.bs-chip.build small { color: #c08a2e; letter-spacing: -1px; }
.bs-chip.build.none { background: var(--panel-2); border-color: var(--line); box-shadow: 0 2px 0 var(--line); }
.bs-chip.build.none b { color: var(--mute); }
.bs-chip.b-kraft { background: #fde4dc; border-color: #e8a08a; box-shadow: 0 2px 0 #e8a08a; }
.bs-chip.b-klinge { background: #e3f1e6; border-color: #93c4a0; box-shadow: 0 2px 0 #93c4a0; }
.bs-chip.b-technik { background: #e2eefa; border-color: #93b6dc; box-shadow: 0 2px 0 #93b6dc; }
.bs-chip.b-helfer { background: #e6f6e3; border-color: #9fd08a; box-shadow: 0 2px 0 #9fd08a; }
.bs-next { font-style: normal; font-size: .66rem; font-weight: 800; color: #fff; background: #c08a2e; border-radius: 5px; padding: 2px 4px; }
.bs-chip.combo { padding: 0 6px; background: #f3ecfb; border-color: #c9b0ea; box-shadow: 0 2px 0 #c9b0ea; }
.bs-wrap .sum-revive { margin: 0 0 6px; padding: 5px 9px; font-size: .78rem; }
/* Raster: am Handy 4 Kacheln pro Reihe */
.summary.bs-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.bs-train { display: none; grid-column: 1 / -1; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: #efe9fb; border: 2px solid #c6b4ee; color: #5b3fa8; font: 600 .78rem Fredoka, sans-serif; }
.bs-train i { font-style: normal; font-size: .8rem; }
.summary.bs-grid:has(.sum-row.leveled) .bs-train { display: flex; }
.sum-row.bs-tile { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 2px; min-width: 0; margin: 0 !important;
  padding: 6px 4px 5px !important; border-radius: 10px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); grid-template-columns: none !important; }
.bs-tile .sum-sprite { width: 28px; height: 28px; display: grid; place-items: center; margin: 0 !important; }
.bs-tile .sum-sprite svg { width: 24px !important; height: auto !important; max-height: 28px; }
.bs-name { max-width: 100%; font: 600 .7rem/1.1 Fredoka, sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-lvrow { display: flex; align-items: center; gap: 3px; }
.bs-tile .lv { font-size: .64rem !important; padding: 1px 5px !important; border-radius: 6px; font-variant-numeric: tabular-nums; }
.bs-tile .lvup { font-size: .66rem; font-weight: 800; color: #6a46c8; }
.bs-tile .xpbar { width: 100%; height: 4px !important; margin: 1px 0 0; border-radius: 3px; }
.bs-tile .xpbar .xpfill { height: 100%; }
.bs-dmg { font-size: .66rem; color: var(--mute); font-variant-numeric: tabular-nums; line-height: 1; }
.bs-dmg::before { content: '⚔ '; font-size: .6rem; }
.bs-tile.mvp { border-color: #e0b04a; box-shadow: 0 2px 0 #e0b04a, 0 0 0 2px rgba(224, 176, 74, .18); background: #fffaea; }
.bs-crown { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .82rem; color: #d49a20; text-shadow: 0 1px 0 #7a5212; line-height: 1; }
.bs-tile.leveled { border-color: #b9a2ec; box-shadow: 0 2px 0 #b9a2ec; background: linear-gradient(180deg, #f6f1ff, var(--panel) 70%); }
.bs-tile.leveled .lv { background: #7a55d8 !important; color: #fff !important; }
@media (min-width: 561px) {
  .summary.bs-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 88px)) !important; justify-content: start; }
  .bs-tile .sum-sprite svg { width: 34px !important; }
  .bs-name { font-size: .76rem; }
}
@media (prefers-reduced-motion: no-preference) { .bs-tile.leveled { animation: bs-glow 1.2s ease-out 1; } }
@keyframes bs-glow { 0% { box-shadow: 0 2px 0 #b9a2ec, 0 0 0 0 rgba(122, 85, 216, .45); } 100% { box-shadow: 0 2px 0 #b9a2ec, 0 0 0 8px rgba(122, 85, 216, 0); } }
/* Kampfende: „Sieg!“ steht schon im Schild oben, die Textzeile darunter entfällt, damit alles ohne Scrollen passt */
.stage:has(.bs-wrap) #log { display: none !important; }
@media (max-width: 560px) { .stage:has(.bs-wrap) .bs-wrap { margin-top: 6px; } }

/* ===== Kampf: Szene im Fokus ===== */
/* 1) Lebensbalken direkt im Bild: klein, pixelig, Crew grün, Gegner rot */
#field .fu-bar { display: block !important; width: 40px; height: 5px; margin: 2px auto 0; border-radius: 0; background: rgba(20,14,8,.55);
  box-shadow: 0 0 0 1px rgba(20,14,8,.7); overflow: hidden; opacity: .95; }
#field .fu-bar i { background: #5bd16f !important; border-radius: 0; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
#field .fu-enemy .fu-bar i { background: #e0574a !important; }
#field .fu.boss .fu-bar, #field .fu.mini .fu-bar { width: 58px; height: 6px; }
#field .fu.ko .fu-bar, #field .fu.w2-wait .fu-bar { opacity: 0; }
@media (max-width: 520px) { #field .fu-bar { width: 32px; height: 4px; } #field .fu.boss .fu-bar { width: 46px; height: 5px; } }

/* 2) Schmale Leiste unter dem Bild: Team-Balken und Zusammenspiel, nichts mehr über der Szene */
.f-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin: 6px 0 0; min-height: 0; }
.f-strip:empty { display: none; }
.f-strip .team-bar { margin: 0; padding: 2px 6px 2px 3px; gap: 5px; transform: scale(.92); transform-origin: center; }
.f-strip .team-bar .tb-txt small { display: none; }
.f-strip .team-bar .tb-txt b { font-size: .7rem; }
.fs-syn { display: inline-flex; flex-wrap: wrap; gap: 3px; animation: fs-in .4s ease-out; }
.fs-syn .sy-chip { font-size: .58rem; padding: 3px 5px 2px; opacity: .92; }
@keyframes fs-in { from { opacity: 0; transform: translateY(-3px); } }
#field .sy-intro { display: none !important; }
/* Kurze Ansagen im Bild kleiner und oben am Rand, damit die Figuren frei bleiben */
#field .ult-call { transform: translateX(-50%) scale(.82) !important; top: 6px !important; }
#field .callout.on-field { font-size: .62rem !important; padding: 2px 5px !important; }

/* 3) Die großen Kästen unter dem Bild: kompakte Zwei-Spalten-Liste, eine schmale Zeile pro Figur */
.battle3d .arena.hud { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; margin-top: 6px; }
.battle3d .hud .side { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.battle3d .hud .fighter, .battle3d .hud .side-enemy .fighter {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name hp' 'bar bar';
  align-items: center; gap: 1px 6px; padding: 3px 7px 4px !important; min-height: 0 !important; border-width: 1px !important; border-radius: 6px !important;
  box-shadow: 0 1px 0 var(--line) !important; position: relative; }
.battle3d .hud .f-info { display: contents; }
.battle3d .hud .f-name { grid-area: name; font-size: .72rem !important; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0 !important; }
.battle3d .hud .f-name b { font-weight: 600; }
.battle3d .hud .f-name .badge, .battle3d .hud .f-name .type, .battle3d .hud .f-name > span:not(b) { display: none !important; }
.battle3d .hud .fighter::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 0 2px 2px 0; background: var(--line); }
.battle3d .hud .side-enemy .fighter::before { left: auto; right: 0; border-radius: 2px 0 0 2px; }
.battle3d .hud .f-hp { grid-area: hp; font-size: .64rem !important; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0 !important; }
.battle3d .hud .f-bar { grid-area: bar; height: 4px !important; margin: 0 !important; border: 0 !important; border-radius: 2px !important; }
.battle3d .hud .f-en { grid-area: bar; align-self: end; height: 1px !important; margin: 0 !important; opacity: .7; }
.battle3d .hud .side-enemy .fighter { grid-template-areas: 'hp name' 'bar bar'; grid-template-columns: auto minmax(0, 1fr); text-align: right; }
.battle3d .hud .side-enemy .f-name { justify-self: end; }
.battle3d .hud .f-status { position: absolute !important; top: -7px; right: 4px; left: auto; display: flex; gap: 2px; transform: scale(.78); transform-origin: top right; pointer-events: none; }
.battle3d .hud .side-enemy .f-status { right: auto; left: 4px; transform-origin: top left; }
.battle3d .hud .fighter.front { border-color: var(--btn) !important; }
.battle3d .hud .fighter.ko { opacity: .45; }
.battle3d .hud .fighter.ko .f-bar { opacity: .3; }
.battle3d .hud .fighter.w2-wait { display: none !important; }
.battle3d .hud .fighter .fx, .battle3d .hud .fighter .float { display: none !important; }
@media (min-width: 761px) {
  .battle3d .hud .fighter, .battle3d .hud .side-enemy .fighter { padding: 4px 9px 5px !important; }
  .battle3d .hud .f-name { font-size: .8rem !important; }
  .battle3d .hud .f-hp { font-size: .7rem !important; }
  .battle3d .hud .f-bar { height: 5px !important; }
}

/* ===== EVT2: Crew-Momente ===== */
.story .st-home { position: absolute; inset: 0 0 24% 0; z-index: 0; overflow: hidden; }
.story .st-home .c3-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.story .st-home::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.18)); }
.st-homebg .st-sky, .st-homebg .st-sea, .st-homebg .st-sun, .st-homebg .st-cloud { display: none; }
.stb-sec { margin: 12px 0 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.stb-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.stb-clip { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; border: 2px solid rgba(0,0,0,.25); background: #fff8e8; color: inherit; font: inherit; text-align: left; min-height: 64px; }
.stb-clip .stb-thumb { position: relative; height: 38px; overflow: hidden; }
.stb-clip .stb-thumb .c3-stage { position: absolute; inset: 0; }
.stb-clip b { display: block; padding: 3px 6px 4px; font-size: 12px; line-height: 1.2; }
.stb-clip.locked { opacity: .55; cursor: default; }
.stb-clip.locked .stb-thumb { filter: grayscale(1) brightness(.8); }
@media (min-width: 761px) {
  /* PC: jede Seite zweispaltig, damit 7 gegen 5 über die feste Leiste passt */
  .battle3d .hud .side { display: grid !important; grid-template-columns: 1fr 1fr; gap: 3px 4px; align-content: start; }
  .battle3d .hud .fighter, .battle3d .hud .side-enemy .fighter { padding: 3px 8px 4px !important; }
}
@media (max-width: 560px) {
  .battle3d .hud .fighter, .battle3d .hud .side-enemy .fighter { padding: 2px 6px 3px !important; }
  .battle3d .hud .side { gap: 2px; }
}

/* ===== UX1: Aufgeräumt ===== */
/* ☰-Menü: auf dem Handy liegen Hauptquartier, Pause, Run aufgeben, Anleitung, Musik usw. in einem Holz-Popover */
.menu-btn { display: none; }
@media (max-width: 560px) {
  header { position: relative; }
  header .head-actions { position: absolute; top: 4px; right: 4px; z-index: 40; display: block; }
  header .head-actions > .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; padding: 0; font-size: 20px; line-height: 1;
    border-radius: 9px; background: var(--panel, #fbf3e2); border: 2px solid #c9a46a; color: #4a3218; box-shadow: 0 2px 0 rgba(90, 60, 25, .25); }
  header:not(.menu-open) .head-actions > :not(.menu-btn) { display: none !important; }
  header.menu-open .head-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 190px; padding: 8px;
    background: var(--panel, #fbf3e2); border: 2px solid #c9a46a; border-radius: 12px; box-shadow: 0 10px 28px rgba(60, 35, 10, .28); }
  header.menu-open .head-actions > .menu-btn { align-self: flex-end; box-shadow: none; }
  header.menu-open .head-actions > :not(.menu-btn):not([hidden]) { display: flex !important; justify-content: flex-start; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
  header.menu-open .head-actions > .link:not(.menu-btn):hover { background: rgba(201, 164, 106, .18); }
  header.menu-open .head-actions > #mu-slot { gap: 6px; }
  /* Kopfzeile im Run: Gold, Kopfgeld, Lage, Stil in EINER schmalen Zeile */
  header .track { padding-right: 42px; }
  header .track .head-chips { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  header .track .head-chips::-webkit-scrollbar { display: none; }
  header .track .head-chips > * { flex: 0 0 auto; white-space: nowrap; }
  header .track .track-loc { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body:has(#stage .journey, #stage .jr-map, #stage .tavern) header h1 { display: none; }

  /* Crew-Reihe und Boni-Leiste eingeklappt (außer Vorbereitung/Taverne/Schatz) */
  body.ux-crewfold #crew, body.ux-crewfold #synbar, body.ux-crewfold #syn { display: none !important; }
  body.ux-crewfold #crew-label [data-act="crew-toggle"] { display: none; }
  .ux-fold-btn { display: none; }
  body.ux-crewfold .ux-fold-btn, body:not(.ux-crewfold) #crew-label .ux-fold-btn { display: inline; }

  /* Hafen: höchstens ein „Nächstes Ziel“, keine doppelte Zielliste, Kopfgeld-Sperre nur im Wiki */
  .wg-card .wg-goal ~ .wg-goal { display: none; }
  .hq-goals { display: none; }
  .heat-pill.locked { display: none; }
  /* Gerüchte/Sammelalbum und „Ab Rang X“ stehen im Kapitänsbuch, im Hafen am Handy nur der erste Hinweis */
  .hook-box .hook-row ~ .hook-row { display: none; }
  .fnext { display: none; }
}
.ux-fold-btn { margin-left: auto; font-weight: 700; }

/* Bösewicht ab der 2. Etappe nur als kleiner Chip */
.ux-foechip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  background: rgba(140, 40, 30, .08); border: 1px solid rgba(140, 40, 30, .25); color: #5a2418; }
.ux-foechip small { opacity: .75; }

/* Ereignis-Ergebnis als Toast statt Kasten über der Route */
.notice.ux-ntoast { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 59; width: min(420px, calc(100% - 20px));
  margin: 0; box-shadow: 0 10px 26px rgba(50, 30, 10, .25); animation: uxNt 5.2s ease forwards; pointer-events: none; }
@keyframes uxNt { 0% { opacity: 0; transform: translate(-50%, -8px); } 6%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); visibility: hidden; } }

/* Coach-Tipp als kleine Sprechblase, schiebt nichts weg */
#stage { position: relative; }
.coach.coach-bubble { position: absolute; z-index: 30; right: 8px; top: 4px; max-width: min(300px, 82%); margin: 0; padding: 7px 8px 7px 10px; font-size: 12.5px;
  border-radius: 12px; box-shadow: 0 8px 20px rgba(50, 30, 10, .22); animation: uxCb .35s ease both; }
.coach.coach-bubble::after { content: ''; position: absolute; left: 22px; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: currentColor; color: #f6e3b4; }
@keyframes uxCb { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

/* Kampf gewonnen: „Weiter“ läuft von selbst voll */
.fbar-ff.ux-auto { position: relative; overflow: hidden; }
.fbar-ff.ux-auto::before { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: rgba(255, 255, 255, .85); transform-origin: left; animation: uxGo 1.4s linear forwards; }
@keyframes uxGo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Run-Ende: „Nochmal!“ groß oben, dann Grund und nächster Schritt, Rest kompakt */
.ux-end { display: grid; gap: 8px; margin-bottom: 10px; }
.ux-end h2 { margin-bottom: 0; }
.ux-end > p { margin: 0; }
.ux-end .end-actions.ux-end-top { position: static; display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; padding: 0; background: none; box-shadow: none; border: 0; }
.ux-end .end-actions.ux-end-top .btn[data-act="again"] { flex: 2 1 200px; font-size: 19px; padding: 14px 16px; }
.ux-end .end-actions.ux-end-top .btn[data-act="hq"] { flex: 1 1 120px; }
.ux-why, .ux-next { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; font-size: 14px; }
.ux-why { background: rgba(150, 40, 30, .08); border-left: 4px solid #b4442e; }
.ux-next { background: rgba(40, 120, 70, .08); border-left: 4px solid #3f8a52; }
.ux-why span, .ux-next span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.ux-end-rest { display: grid; gap: 6px; font-size: 13px; }
.ux-end-rest > p { margin: 0; }
.ux-end-rest .trophy-sum, .ux-end-rest .sum-build, .ux-end-rest .rank-gain, .ux-end-rest .berry-gain { margin: 0; }
.ux-rew summary { cursor: pointer; font-weight: 700; padding: 6px 2px; }
.ux-rew-list { display: grid; gap: 6px; }
.ux-rew-it.toast { position: static; animation: none; opacity: 1; transform: none; pointer-events: auto; }

/* ---------- SOC: Mitsegler im Hafen ---------- */
.soc-fleet { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.soc-ship { position: absolute; top: 74px; width: 46px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; display: grid; justify-items: center; color: inherit; font: inherit; }
.soc-ship.s0 { right: 3%; }
.soc-ship.s1 { right: calc(3% + 54px); top: 66px; transform: scale(.82); transform-origin: 50% 100%; }
.soc-ship.s2 { left: 21%; top: 50px; transform: scale(.72); transform-origin: 50% 100%; }
.soc-ship.s3 { left: 32%; top: 50px; transform: scale(.62); transform-origin: 50% 100%; }
.soc-hull { display: block; width: 40px; height: 30px; opacity: .88; filter: saturate(.85); }
.soc-ship.on .soc-hull { opacity: 1; filter: none; animation: ts-bob 1.9s steps(4) infinite; }
.soc-ship:nth-child(2).on .soc-hull { animation-delay: -.9s; }
.soc-hull svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; filter: drop-shadow(0 2px 0 rgba(0,0,0,.15)); }
.soc-tag { display: grid; justify-items: center; margin-top: 1px; padding: 1px 5px 2px; border-radius: 4px; background: rgba(255,250,236,.86); box-shadow: 0 1px 0 rgba(90,60,30,.25); line-height: 1.05; max-width: 74px; white-space: nowrap; }
.soc-tag b { font-size: 9.5px; font-weight: 800; color: #4a2f16; display: inline-flex; align-items: center; gap: 3px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.soc-tag small { font-size: 8.5px; color: #7a6248; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.soc-tag .on-dot { width: 5px; height: 5px; margin: 0; }
.soc-ship.s0 .soc-tag { justify-self: end; }
.soc-ship:focus-visible { outline: 2px solid #f2d24a; outline-offset: 2px; border-radius: 4px; }
.tod-night .soc-tag { background: rgba(40,44,70,.82); }
.tod-night .soc-tag b { color: #f4ead0; } .tod-night .soc-tag small { color: #c9c0a8; }
@media (max-width: 620px) { .soc-ship.s2, .soc-ship.s3 { display: none; } }
@media (prefers-reduced-motion: reduce) { .soc-ship .soc-hull { animation: none !important; } }

.soc-log { display: grid; gap: 5px; margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 92%, #fff); }
.soc-log-h { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #8a7356); }
.soc-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px; font-size: .8rem; line-height: 1.3; }
.soc-ico { font-style: normal; text-align: center; }
.soc-cheer { border: 0; background: none; font-size: 1rem; padding: 2px 4px; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px; filter: grayscale(.4); opacity: .8; }
.soc-cheer:hover { filter: none; opacity: 1; }
.soc-cheer.done { filter: none; opacity: 1; cursor: default; animation: soc-prost .5s steps(4) 1; }
.soc-cheer em { font-style: normal; font-size: .68rem; font-weight: 800; color: #b07a1c; }
@keyframes soc-prost { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(-14deg) scale(1.25); } 70% { transform: rotate(8deg) scale(1.1); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .soc-cheer.done { animation: none; } }

/* ===== Kapitänskajüte (☰ im Run) ===== */
.rm-pop { max-width: 340px; padding-top: 14px; }
.rm-pop h3 { text-align: center; margin: 0 0 10px; }
.rm-list { display: flex; flex-direction: column; gap: 7px; }
.rm-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 12px; text-align: left; cursor: pointer;
  background: #fff8e6; border: 2px solid #c9a46a; border-radius: 10px; box-shadow: 0 3px 0 #b88a3a; color: #3a2a18; font: inherit; }
.rm-row:active { transform: translateY(2px); box-shadow: 0 1px 0 #b88a3a; }
.rm-row > i { font-style: normal; font-size: 1.35rem; width: 30px; text-align: center; flex: none; }
.rm-row > span { display: flex; flex-direction: column; line-height: 1.2; }
.rm-row b { font-size: .98rem; }
.rm-row small { font-size: .76rem; color: #7a6248; margin-top: 2px; }
.rm-row.quit { background: #fbeee6; border-color: #c99a7a; box-shadow: 0 3px 0 #a8765a; margin-top: 4px; }
.rm-row.quit.armed { background: #f6d9cc; border-color: #b4553a; box-shadow: 0 3px 0 #8e3f2a; animation: rmNudge .25s ease; }
.rm-row.quit.armed b { color: #8e2f1c; }
@keyframes rmNudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
.rm-small { display: flex; justify-content: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d8bf8e; }

/* ===== Kurswahl: Risiko mit Folgen ===== */
.co-riskfx { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.co-riskfx i { font-style: normal; font-size: .72rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: #f3ead6; border: 1px solid #d8c39a; color: #5a4328; line-height: 1.5; }
.co-riskfx .rf-foe { background: #f8e2da; border-color: #d9a58f; color: #8a3a22; }
.co-riskfx .rf-gold { background: #fbf0c8; border-color: #dcc27a; color: #7a5a12; }
.co-riskfx .rf-loot { background: #e9f1dc; border-color: #a9c48a; }
.co-riskfx.calm i { background: transparent; border-color: transparent; color: #8a7458; font-weight: 600; padding-left: 0; }

/* Handy: Hinweise lassen oben rechts Platz für ☰ */
@media (max-width: 560px) {
  body.in-run .toasts { left: 8px !important; right: auto !important; transform: none !important; width: calc(100% - 62px) !important; }
}

/* ===== UX2: Hafen kompakt (Handy) ===== */
@media (max-width: 560px) {
  body:not(.in-run) .hq .hq-bar { margin-bottom: 8px !important; }
  body:not(.in-run) .hq .hq-bar .berry { padding: 4px 10px !important; font-size: 1.1rem !important; }
  body:not(.in-run) .hq .hq-sail.game { gap: 8px !important; padding: 8px !important; }
  body:not(.in-run) .hq .sail-stage { height: 132px !important; }
  body:not(.in-run) .hq .sail-row .btn.sail { min-height: 52px; padding-top: 8px !important; padding-bottom: 8px !important; }
  body:not(.in-run) .hq .sail-row .btn.sail .key { display: none; }
  /* Nächstes Ziel: Kopfzeile und Weltkarte in einer Zeile, Ziel als schlanke Leiste */
  body:not(.in-run) .hq .wg-card { padding: 7px 8px !important; gap: 5px !important; }
  body:not(.in-run) .hq .wg-head { display: flex !important; align-items: center; justify-content: space-between; margin: 0 !important; }
  body:not(.in-run) .hq .wg-map { padding: 2px 8px !important; min-height: 0 !important; font-size: .74rem !important; }
  body:not(.in-run) .hq .wg-map svg, body:not(.in-run) .hq .wg-map img { width: 18px !important; height: 18px !important; }
  body:not(.in-run) .hq .wg-goal { padding: 6px 8px !important; gap: 8px !important; min-height: 0 !important; }
  body:not(.in-run) .hq .wg-goal .wg-ico { width: 30px !important; height: 30px !important; font-size: 1.1rem; }
  body:not(.in-run) .hq .wg-goal .wg-ico svg, body:not(.in-run) .hq .wg-goal .wg-ico canvas { max-width: 30px; max-height: 30px; }
  body:not(.in-run) .hq .wg-goal b { font-size: .86rem !important; }
  body:not(.in-run) .hq .wg-goal small { font-size: .7rem !important; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  /* Modi: eine Reihe Symbol-Kacheln */
  body:not(.in-run) .hq .action-dock { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-flow: row !important; gap: 6px !important; margin-top: 0 !important; }
  body:not(.in-run) .hq .ad-tile { display: grid !important; grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 1px !important; padding: 6px 2px 5px !important; min-height: 0 !important; }
  body:not(.in-run) .hq .ad-tile .ad-ico { width: 24px !important; height: 24px !important; font-size: 1.05rem !important; display: grid; place-items: center; margin: 0 !important; }
  body:not(.in-run) .hq .ad-tile .ad-ico svg, body:not(.in-run) .hq .ad-tile .ad-ico canvas { max-width: 24px; max-height: 24px; }
  body:not(.in-run) .hq .ad-tile b { font-size: .72rem !important; line-height: 1.1; }
  body:not(.in-run) .hq .ad-tile small { font-size: .58rem !important; line-height: 1.1; }
  /* Kopfgeld-Stufe, An Bord, Vertrauter: eine Zeile */
  body:not(.in-run) .hq .sail-meta { flex-wrap: nowrap !important; gap: 6px !important; margin-top: 0 !important; overflow-x: auto; scrollbar-width: none; }
  body:not(.in-run) .hq .sail-meta::-webkit-scrollbar { display: none; }
  body:not(.in-run) .hq .sail-meta > * { flex: none; min-height: 0 !important; padding-top: 3px !important; padding-bottom: 3px !important; font-size: .74rem !important; }
  body:not(.in-run) .hq .sail-meta .sb-lbl { font-size: .62rem !important; }
  /* Räume: 4 kleine Kacheln pro Reihe */
  body:not(.in-run) .hq .hub { margin-top: 10px !important; }
  body:not(.in-run) .hq .hub-lbl { margin-bottom: 4px !important; }
  body:not(.in-run) .hq .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  body:not(.in-run) .hq .hub-tile { padding: 6px 2px 5px !important; gap: 1px !important; min-height: 0 !important; border-radius: 11px !important; }
  body:not(.in-run) .hq .hub-tile .hub-art { width: 26px !important; height: 26px !important; margin: 0 !important; }
  body:not(.in-run) .hq .hub-tile .hub-art svg, body:not(.in-run) .hq .hub-tile .hub-art canvas, body:not(.in-run) .hq .hub-tile .hub-art img { width: 26px !important; height: 26px !important; }
  body:not(.in-run) .hq .hub-tile b { font-size: .66rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body:not(.in-run) .hq .hub-tile small { font-size: .56rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Gerücht und Logbuch schlanker */
  body:not(.in-run) .hq .hook-box { margin-top: 8px !important; padding: 2px 4px !important; gap: 2px !important; }
  body:not(.in-run) .hq .hook-row { padding: 5px 6px !important; gap: 8px !important; min-height: 0 !important; }
  body:not(.in-run) .hq .hook-row .hook-ico { width: 30px !important; height: 30px !important; }
  body:not(.in-run) .hq .hook-row b { font-size: .8rem !important; line-height: 1.2; }
  body:not(.in-run) .hq .hook-row small { font-size: .6rem !important; }
  body:not(.in-run) .hq .hq-sail .sail-meta { display: flex !important; }
  body:not(.in-run) .hq .ad-tile b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body:not(.in-run) .hq .hq-bar .pf-chip { padding-top: 2px !important; padding-bottom: 2px !important; }
  body:not(.in-run) .hq .hq-bar .pf-chip .pf-ava, body:not(.in-run) .hq .hq-bar .pf-chip > i:first-child { transform: scale(.88); }
}

/* ===== INT: Absichten ===== */
.int-row { display: inline-flex; gap: 2px; pointer-events: auto; }
.int-i { display: inline-grid; place-items: center; width: 15px; height: 15px; padding: 1px; font-style: normal; cursor: help;
  background: #fff8e6; border: 1px solid #8a6a3a; border-radius: 3px; box-shadow: 0 1px 0 rgba(58,42,20,.45); }
.int-i svg { width: 11px; height: 11px; display: block; }
.int-i:focus-visible { outline: 2px solid #f2c94c; outline-offset: 1px; }
.pv-int { position: absolute; top: 12px; left: -6px; flex-direction: column; z-index: 3; }
.pv-u .pv-int .int-i { width: 14px; height: 14px; }
.pv-u .pv-int .int-i svg { width: 10px; height: 10px; }
.fu-int { position: absolute; top: 100%; left: 50%; margin-top: 2px; transform: translateX(-50%) scale(calc(1 / var(--s, 1))); transform-origin: 50% 0; z-index: 4; opacity: .95; }
.fu.ko .fu-int, .fu.w2-wait .fu-int { display: none; }
/* Holt aus: das Symbol leuchtet, solange der schwere Schlag in der Luft hängt */
.fu.windup .int-wind { background: #ffe1b8; border-color: #b4553a; animation: intWind .7s ease-in-out infinite alternate; }
@keyframes intWind { from { transform: translateY(0); box-shadow: 0 1px 0 rgba(58,42,20,.45), 0 0 0 0 rgba(242,163,58,0); } to { transform: translateY(-2px); box-shadow: 0 3px 0 rgba(58,42,20,.35), 0 0 0 3px rgba(242,163,58,.35); } }
@media (prefers-reduced-motion: reduce) { .fu.windup .int-wind { animation: none; } }
@media (max-width: 520px) { .fu-int .int-i { width: 13px; height: 13px; } .fu-int .int-i svg { width: 9px; height: 9px; } }

/* UX2: Logbuch + Gerücht in einem Rahmen (alle Breiten) */
.soc-more { display: grid; gap: 5px; }
.soc-log { position: relative; }
.soc-more > summary { position: absolute; top: 3px; right: 8px; list-style: none; cursor: pointer; font-size: .68rem; font-weight: 800; color: #8a6d48;
  padding: 1px 8px; border-radius: 999px; background: #f3ead6; border: 1px solid #d8c39a; }
.soc-more > summary::-webkit-details-marker { display: none; }
.soc-more[open] > summary { display: none; }
.soc-hook { border-top: 1px dashed #d8bf8e; padding-top: 5px; margin-top: 2px; }
.soc-hook .hook-row { width: 100%; }
@media (max-width: 560px) {
  body:not(.in-run) .hq .soc-log { margin-top: 8px !important; padding: 6px 8px !important; gap: 4px !important; }
  body:not(.in-run) .hq .soc-row { font-size: .74rem !important; line-height: 1.25 !important; }
  body:not(.in-run) .hq .soc-log-h { font-size: .6rem !important; }
  body:not(.in-run) .hq .soc-hook .hook-row { padding: 3px 0 !important; }
  body:not(.in-run) .hq .sail-meta .atsea { font-size: .7rem !important; padding: 3px 8px !important; }
  body:not(.in-run) .hq .hub-lbl { display: none !important; }
  body:not(.in-run) .hq .hub { margin-top: 8px !important; }
}
.ux-why .int-lesson { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; line-height: 1.35; opacity: .9; }
.ux-why .int-lesson .int-i { flex: none; cursor: default; }
.hub-tile .ht-s { display: none; }
@media (max-width: 560px) {
  body:not(.in-run) .hq .hub-tile .ht-l { display: none !important; }
  body:not(.in-run) .hq .hub-tile .ht-s { display: block !important; font-size: .7rem !important; }
  body:not(.in-run) .hq .ad-tile b { font-size: .62rem !important; letter-spacing: -.02em; }
  body:not(.in-run) .hq .ad-tile { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ===== SQD: Duell-Taktik & Zusammenhalt-Eigenschaften ===== */
.sq-tac { margin: 8px 0 6px; padding: 8px; border-radius: 10px; background: #f6ecd6; border: 1px solid #dcc59a; }
.sq-th { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #7a6248; }
.sq-foe { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 800; color: #6a3a22; background: #fbe7dc; border: 1px solid #ddb39a; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.sq-foe.unk { color: #8a7458; background: transparent; border-color: transparent; font-weight: 600; }
.sq-tcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sq-tc { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px 5px; cursor: pointer; font: inherit; color: #3a2a18;
  background: #fff8e6; border: 2px solid #c9a46a; border-radius: 9px; box-shadow: 0 3px 0 #b88a3a; }
.sq-tc:active { transform: translateY(2px); box-shadow: 0 1px 0 #b88a3a; }
.sq-tc > i { font-style: normal; font-size: 1.15rem; line-height: 1.2; }
.sq-tc b { font-size: .84rem; }
.sq-tc small { font-size: .66rem; color: #8a7458; font-weight: 700; }
.sq-tc.on { background: #fff1c2; border-color: #a8751f; box-shadow: 0 3px 0 #8a5a12, 0 0 0 2px rgba(224,169,42,.35); }
.sq-tc.good small { color: #3f7a2e; }
.sq-tc.bad small { color: #a4442a; }
.sq-hint { display: block; margin-top: 6px; font-size: .74rem; line-height: 1.35; color: #6a5238; text-align: center; }
.sq-trait { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 6px; font-size: .7rem; font-style: normal;
  background: #fff3c4; border: 1px solid #d8b56a; box-shadow: 0 1px 0 #b88a3a; line-height: 1; }
.sq-trait sup { font-size: .55rem; font-weight: 900; margin-left: 1px; color: #7a5a12; }
.cc-trait { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; padding: 6px 8px; border-radius: 9px; background: #fbf3dc; border: 1px dashed #d8bf8e; font-size: .8rem; line-height: 1.35; }
.cc-trait .sq-trait { flex: none; margin-top: 1px; }
.cc-trait small { display: block; color: #8a7458; }
.cc-trait.locked { opacity: .75; }
.sqd-bond .sq-trait { margin-left: 2px; height: 15px; min-width: 15px; font-size: .62rem; }

/* ===== ART3: Kulissen und Nebenfiguren in Szenen ===== */
.ce-stage .ce-art { position: absolute; inset: 0; display: block; pointer-events: none; }
.ce-stage .ce-art svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.ce-stage:has(.ce-art)::before, .ce-stage:has(.ce-art)::after { display: none; }
.ce-stage .ce-cast { position: relative; z-index: 1; }
.npc-face { display: inline-block; width: 100%; height: 100%; }
.npc-face svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.ce-who .npc-face { filter: drop-shadow(0 2px 0 rgba(40, 25, 10, .25)); }
.npc-por { display: inline-block; width: 44px; height: 50px; flex: none; padding: 3px; background: #f3e4c4; border: 2px solid #c9a46a; border-radius: 8px; box-shadow: 0 2px 0 #b88a3a; }
.npc-por svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.npc-por.sm { width: 30px; height: 34px; padding: 2px; border-width: 1px; border-radius: 6px; box-shadow: 0 1px 0 #b88a3a; margin-right: 8px; vertical-align: middle; cursor: help; }
.tv-head:has(.npc-por) { display: flex; align-items: center; }
.tv-head:has(.npc-por) h2 { margin-right: auto; }
.npc-say { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.npc-say p { margin: 0; padding: 7px 11px; background: #fffaf0; border: 1px solid #d8c39a; border-radius: 10px; font-size: .86rem; line-height: 1.35; position: relative; }
.npc-say p::before { content: ''; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; background: #fffaf0; border-left: 1px solid #d8c39a; border-bottom: 1px solid #d8c39a; transform: translateY(-50%) rotate(45deg); }
.npc-say p b { display: block; font-size: .74rem; color: #8a6a44; margin-bottom: 1px; }

/* ===== JUICE: Crew-Sprüche und Erster-Boss-Feier ===== */
.cq-bubble { position: absolute; transform: translate(-50%, -100%) scale(.85); opacity: 0; z-index: 30; pointer-events: none;
  max-width: 150px; width: max-content; padding: 4px 8px; font-size: .7rem; line-height: 1.25; font-weight: 700; color: #3a2a18; text-align: center;
  background: #fffaf0; border: 2px solid #6b4a2a; border-radius: 8px; box-shadow: 0 2px 0 rgba(60,40,15,.35); transition: opacity .2s ease, transform .2s ease; }
.cq-bubble::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -7px; width: 8px; height: 8px; margin-left: -5px;
  background: #fffaf0; border-right: 2px solid #6b4a2a; border-bottom: 2px solid #6b4a2a; transform: rotate(45deg); }
.cq-bubble.in { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.cq-bubble.out { opacity: 0; transform: translate(-50%, -110%) scale(.95); }
@media (max-width: 560px) { .cq-bubble { max-width: 128px; font-size: .66rem; padding: 3px 7px; } }

.bparty { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: rgba(30, 20, 10, .55); opacity: 0; transition: opacity .3s ease; }
.bparty.in { opacity: 1; }
.bparty.out { opacity: 0; }
.bpt-card { position: relative; width: min(540px, 92vw); display: flex; flex-direction: column; align-items: stretch; gap: 10px; transform: translateY(8px) scale(.97); transition: transform .35s cubic-bezier(.3,.7,.4,1.2); }
.bparty.in .bpt-card { transform: none; }
.bpt-head { text-align: center; color: #fff6dc; text-shadow: 0 2px 0 #3a2410, 0 0 6px rgba(0,0,0,.4); }
.bpt-head small { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #ffd98a; }
.bpt-head b { font-size: 1.25rem; }
.bpt-stage { position: relative; aspect-ratio: 16 / 9; border: 4px solid #6b4a2a; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 3px #e8cf9a, 0 18px 40px -12px rgba(0,0,0,.6); }
.bpt-sky, .bpt-sky svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.bpt-plank { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: repeating-linear-gradient(90deg, #a8743e 0 46px, #8e5f30 46px 48px); border-top: 3px solid #6b4a2a; box-shadow: inset 0 4px 0 rgba(255,255,255,.12); }
.bpt-deck { position: absolute; left: 0; right: 0; bottom: 12%; display: flex; justify-content: center; gap: 2px; }
.bpt-who { width: 52px; height: 60px; display: grid; place-items: end center; animation: bptJump .62s cubic-bezier(.3,.7,.4,1) calc(var(--k) * .09s) 5 alternate; }
.bpt-who svg { width: 100%; height: 100%; image-rendering: pixelated; }
@keyframes bptJump { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.bpt-conf i { position: absolute; top: -12px; width: 6px; height: 6px; background: var(--c); transform: rotate(var(--r));
  animation: bptFall 2.6s linear var(--d) 1 forwards; opacity: .9; }
@keyframes bptFall { to { transform: translate(var(--x), 105vh) rotate(calc(var(--r) + 300deg)); } }
.bpt-say { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: #fffaf0; border: 3px solid #6b4a2a; border-radius: 10px; box-shadow: 0 3px 0 #b88a3a; color: #3a2a18; }
.bpt-face { flex: 0 0 38px; height: 44px; display: grid; place-items: end center; }
.bpt-face svg { width: 100%; height: 100%; }
.bpt-say b { display: block; font-size: .8rem; color: #8a5a2a; }
.bpt-say p { margin: 2px 0 0; font-size: .9rem; line-height: 1.3; }
.bpt-tap { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: #f2e6c8; font-size: .75rem; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .bpt-who, .bpt-conf i { animation: none; } .bpt-conf { display: none; } }

/* ===== MAP: Live-Seekarte ===== */
.lm-hint { position: absolute; right: 6px; bottom: 6px; z-index: 6; pointer-events: auto; cursor: pointer;
  padding: 2px 7px 3px; font: 800 .66rem/1.3 inherit; font-family: inherit; color: #4a3520; letter-spacing: .01em;
  background: rgba(255, 248, 230, .88); border: 1.5px solid #8a6a42; border-radius: 6px; box-shadow: 0 2px 0 rgba(107, 74, 42, .55); }
.lm-hint:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(107, 74, 42, .55); }
.sail-stage.tod-night .lm-hint { background: rgba(40, 34, 52, .78); color: #f4ead0; border-color: #a99a7a; }
.lm-pop { max-width: 420px; width: calc(100vw - 24px); padding: 14px 12px 12px; }
.lm-pop h3 { margin: 2px 0 8px; }
.lm-map { position: relative; width: 100%; aspect-ratio: 360 / 250; border-radius: 6px; overflow: hidden; box-shadow: 0 3px 0 #b88a3a; }
.lm-svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.lm-svg text { font-family: var(--px, inherit); }
.lm-svg .lm-sea { font-size: 10px; font-weight: 800; fill: #5a4328; letter-spacing: .04em; }
.lm-svg .lm-n { font-size: 7px; font-weight: 800; fill: #6b4a2a; }
.lm-svg .lm-reg.on { stroke: #d08a3a; stroke-width: 1.5; stroke-dasharray: 3 2; fill: rgba(255, 240, 200, .18); }
.lm-ship { position: absolute; transform: translate(-50%, -60%); width: 34px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; justify-items: center; color: inherit; font: inherit; z-index: 2; }
.lm-ship.me { cursor: default; z-index: 3; }
.lm-hull { width: 26px; height: 22px; display: block; }
.lm-hull svg { width: 100%; height: 100%; display: block; }
.lm-ship.anchor .lm-hull { opacity: .78; filter: saturate(.75); }
.lm-ship.on .lm-hull { animation: lmRock 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.lm-ship.d1.on .lm-hull { animation-delay: -.9s; } .lm-ship.d2.on .lm-hull { animation-delay: -1.7s; }
@keyframes lmRock { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-1px); } }
.lm-tag { margin-top: -1px; max-width: 64px; padding: 0 4px; font-size: .58rem; font-weight: 800; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255, 250, 238, .92); border: 1px solid #a7825a; border-radius: 4px; color: #3a2a18; display: flex; align-items: center; gap: 2px; }
.lm-tag .on-dot { width: 5px; height: 5px; margin: 0; }
.lm-tag .lm-anc { font-style: normal; font-size: .55rem; }
.lm-ship.me .lm-tag { background: #fff1c4; border-color: #b4553a; color: #8e2f1c; }
.lm-count, .lm-empty { margin: 8px 2px 2px; font-size: .82rem; text-align: center; color: #5a4328; }
.lm-empty { font-style: italic; color: #7a6248; }
.lm-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 2px; font-size: .72rem; color: #7a6248; }
.lm-legend span { display: inline-flex; align-items: center; gap: 4px; }
.lm-legend .on-dot { width: 6px; height: 6px; margin: 0; }
.lm-me-key::before { content: ''; width: 10px; height: 7px; border: 1px solid #b4553a; background: #fff1c4; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .lm-ship.on .lm-hull { animation: none; } }

/* Touch-Geräte: keine CSS-Tooltips (iOS behält :hover nach dem Tippen, der Tooltip ragte aus der Seite).
   Stattdessen eine feste Blase im Bildschirm. Und nie seitlich verrutschen. */
@media (hover: none) {
  [data-tip]::after, [data-tip]::before { display: none !important; }
}
.tap-tip { position: fixed; z-index: 1200; pointer-events: none; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.lm-hint { right: 6px; top: 6px; bottom: auto; }
.lm-ship.anchor .lm-tag { max-width: 48px; }
.lm-svg .lm-port { font-size: 7px; fill: #6b4a2a; }
.lm-docks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 6px 0 0; }
.lm-dl { font-size: .72rem; font-weight: 800; color: #6b4a2a; margin-right: 2px; }
.lm-dock { padding: 1px 7px; font: inherit; font-size: .72rem; font-weight: 700; color: #3a2a18; cursor: pointer;
  background: #fff8e6; border: 1px solid #c9a46a; border-radius: 6px; box-shadow: 0 2px 0 #c9a46a; }
.lm-dock:active { transform: translateY(1px); box-shadow: 0 1px 0 #c9a46a; }
.lm-docks em { font-style: normal; font-size: .72rem; color: #7a6248; }

/* ===== DUELX: Kommando-Knöpfe im Stammcrew-Duell ===== */
.dx-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.dx-btn { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px; padding: 6px 4px 9px;
  background: #f3e3c2; border: 2px solid #8a6238; border-radius: 9px; box-shadow: 0 3px 0 #6b4a2a; color: #4a3520; font: inherit; cursor: pointer; transition: transform .1s, filter .2s; }
.dx-btn .dx-ico { font-style: normal; font-size: 1.25rem; line-height: 1; filter: grayscale(.7); opacity: .7; transition: filter .3s, opacity .3s; }
.dx-btn b { font-size: .74rem; font-weight: 800; }
.dx-btn .dx-fill { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 4px; border-radius: 3px; background: rgba(107,74,42,.18); }
.dx-btn .dx-fill::after { content: ''; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); border-radius: 3px; background: #c99a3a; transition: width .25s linear; }
.dx-btn:disabled { cursor: default; color: #8a7458; }
.dx-btn.full { background: #fff4d4; border-color: #b4822a; box-shadow: 0 3px 0 #8a5a1a, 0 0 0 2px rgba(240,190,80,.35); animation: dxGlow 1.6s ease-in-out infinite alternate; }
.dx-btn.full .dx-ico { filter: none; opacity: 1; }
.dx-btn.full .dx-fill::after { background: #e0a92a; }
.dx-btn.full:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a5a1a; }
.dx-btn.used { animation: dxUsed .45s ease; }
@keyframes dxGlow { from { box-shadow: 0 3px 0 #8a5a1a, 0 0 0 2px rgba(240,190,80,.25); } to { box-shadow: 0 3px 0 #8a5a1a, 0 0 0 3px rgba(240,190,80,.55); } }
@keyframes dxUsed { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dx-btn.full, .dx-btn.used { animation: none; } }

/* ===== BUFF: Stil-Signaturen im Kampf ===== */
/* Tempo: zur Seite wischen */
.fu.sig-swipe .fu-body { animation: sigSwipe .42s steps(6) both; }
@keyframes sigSwipe { 0% { transform: translateX(0); } 35% { transform: translateX(-14px) skewX(-6deg); opacity: .55; } 70% { transform: translateX(-6px); opacity: .85; } 100% { transform: translateX(0); opacity: 1; } }
.fx3.sig-wind { width: 34px; height: 14px; margin: -7px 0 0 -40px; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(150,210,235,.0) 0 3px, rgba(150,210,235,.85) 3px 5px); animation: sigWind .52s ease-out forwards; }
@keyframes sigWind { from { opacity: .9; transform: translateX(10px) scaleX(.6); } to { opacity: 0; transform: translateX(-16px) scaleX(1.2); } }
/* Bollwerk: Schild blitzt */
.fx3.sig-shield { width: 30px; height: 34px; margin: -17px 0 0 -15px; pointer-events: none;
  background: linear-gradient(#fff6d8, #e9c46a); border: 3px solid #6b4a2a; border-radius: 4px 4px 14px 14px; box-shadow: 0 0 0 2px rgba(255,248,220,.6);
  animation: sigShield .65s ease-out forwards; image-rendering: pixelated; }
@keyframes sigShield { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: .95; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.25); } }
/* Lazarett: grüne Pixel steigen auf */
.fx3.sig-sparkle { width: 4px; height: 4px; margin: 0; pointer-events: none; background: transparent;
  box-shadow: -12px 0 0 #6fcf72, 10px -6px 0 #9be39a, -4px -10px 0 #4fb35a, 14px 6px 0 #6fcf72, 2px 8px 0 #9be39a;
  animation: sigSpark .95s steps(8) forwards; }
@keyframes sigSpark { from { opacity: 1; transform: translateY(6px); } to { opacity: 0; transform: translateY(-26px); } }
/* Schwertkunst: goldene Schnittlinie */
.fx3.sig-cut { width: 54px; height: 3px; margin: -2px 0 0 -27px; pointer-events: none; background: linear-gradient(90deg, transparent, #ffe28a 20%, #fff 50%, #ffe28a 80%, transparent);
  transform: rotate(-28deg); animation: sigCut .52s ease-out forwards; box-shadow: 0 0 0 1px rgba(120,80,20,.35); }
@keyframes sigCut { from { opacity: 0; clip-path: inset(0 100% 0 0); } 30% { opacity: 1; clip-path: inset(0 0 0 0); } to { opacity: 0; } }
/* Sturmtrupp: kleine Glut */
.fx3.sig-ember { width: 4px; height: 4px; margin: 0; pointer-events: none; background: transparent;
  box-shadow: -6px 2px 0 #f2a33a, 5px -3px 0 #e8623a, 0 -8px 0 #ffd36a; animation: sigSpark .62s steps(5) forwards; }
/* Stil-Abzeichen im Feld */
.ptag.sig { font-weight: 800; }
.ptag.sig-tempo { background: #e3f3f8 !important; color: #23607a !important; border-color: #5aa0bd !important; }
.ptag.sig-wall { background: #fbf0c8 !important; color: #6b4a12 !important; border-color: #b48a3a !important; }
.ptag.sig-smash { background: #f8e2da !important; color: #8a3a22 !important; border-color: #c97a5a !important; padding: 0 4px !important; }
.ptag.sig-blade { background: #fff3c2 !important; color: #7a5a12 !important; border-color: #d1a83a !important; }
@media (prefers-reduced-motion: reduce) { .fu.sig-swipe .fu-body, .fx3.sig-wind, .fx3.sig-shield, .fx3.sig-sparkle, .fx3.sig-cut, .fx3.sig-ember { animation-duration: .01s; } }
/* Kampfende: was der Stil geleistet hat */
.bs-style { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 2px; padding: 5px 9px; border-radius: 9px;
  background: #fbf3df; border: 1px solid #dcc59a; font-size: .78rem; color: #5a4328; line-height: 1.3; }
.bs-style > i { font-style: normal; font-size: .95rem; }
.bs-style > span { font-weight: 600; opacity: .8; }
.bs-style b { font-weight: 800; color: #3a2a18; white-space: nowrap; }
.bs-style em { font-style: normal; opacity: .45; }
.bs-style.b-technik { background: #eaf5f8; border-color: #a9d0de; }
.bs-style.b-brecher { background: #fbf0d0; border-color: #dcc27a; }
.bs-style.b-helfer { background: #ecf6e6; border-color: #a9cf96; }
.bs-style.b-klinge { background: #fdf5d8; border-color: #e0c56a; }
.bs-style.b-kraft, .bs-style.b-kaempfer { background: #fbe9e2; border-color: #deb09a; }

/* ===== FIN: Freunde gerade an Bord + Nami-Tipps ===== */
.fo-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 5px; margin: 2px 0 0; }
.fo-row small { font-size: .74rem; color: #5b7a3a; font-weight: 700; }
.fo-chip { display: inline-flex !important; flex: none !important; width: auto !important; min-height: 0 !important; margin: 0 !important; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 800; color: #3a2a18;
  background: #eef6df; border: 1.5px solid #9cbf6e; box-shadow: 0 2px 0 #7f9f55; }
.fo-chip:active { transform: translateY(1px); box-shadow: 0 1px 0 #7f9f55; }
.fo-dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf50; box-shadow: 0 0 0 2px rgba(76,175,80,.25); animation: foPulse 2.4s ease-in-out infinite; }
@keyframes foPulse { 50% { box-shadow: 0 0 0 4px rgba(76,175,80,.08); } }
@media (prefers-reduced-motion: reduce) { .fo-dot { animation: none; } }
.fo-more { font-style: normal; font-size: .72rem; font-weight: 800; color: #5b7a3a; }
.coach-who { width: 30px !important; height: 34px !important; background: none !important; box-shadow: none !important; }
.coach-who svg, .coach-who canvas { width: 100%; height: 100%; }
.coach-name { color: #b5532b; font-weight: 800; margin-right: 2px; }

/* ===== EPIC: Beute-Atlas, Wunsch-Chips, Fundstück-Schimmer, Feinschliff ===== */
.sq-atlas .sq-chest-ico { font-size: 1.2rem; display: grid; place-items: center; }
.atlas-pop { max-width: 520px; }
.atlas-pop h3 { margin: 2px 0 4px; font-size: 1.05rem; }
.atl-lead { margin: 0 0 8px; font-size: .8rem; color: #6b5338; line-height: 1.35; }
.atl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: min(56vh, 460px); overflow-y: auto; padding: 2px; }
.atl-it { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 6px; padding: 6px 7px; text-align: left; cursor: pointer;
  background: #fbf3df; border: 2px solid #c9a46a; border-radius: 9px; box-shadow: 0 2px 0 #b88a3a; font: inherit; color: #3a2a18; }
.atl-it:active { transform: translateY(1px); box-shadow: 0 1px 0 #b88a3a; }
.atl-it.unk .atl-art { filter: grayscale(1) brightness(.75); opacity: .55; }
.atl-it.got.cr-epic { border-color: #9a6ad0; }
.atl-it.got.cr-legendary { border-color: #d9a43a; background: #fff6dc; }
.atl-it.wish { border-color: #b4553a; background: #fbe8dc; box-shadow: 0 2px 0 #8e3f2a; }
.atl-art svg { width: 30px; height: 30px; display: block; }
.atl-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.atl-txt b { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atl-txt small { font-size: .62rem; color: #7a6248; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atl-st { font-style: normal; font-weight: 800; font-size: .9rem; color: #7a6248; }
.atl-it.got .atl-st { color: #3f7a3a; }
.atl-leg { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; margin: 8px 0 0; font-size: .68rem; color: #7a6248; }
.co-wish, .co-sig { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 7px; font-size: .68rem; font-weight: 800; line-height: 1.5; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-wish { background: #fbe1d6; border: 1px solid #b4553a; color: #8e2f1c; box-shadow: 0 1px 0 rgba(142,63,42,.35); }
.co-sig { background: rgba(255,248,230,.92); border: 1px solid #c9a46a; color: #6b4a24; }
.wg-goal.wg-wish { border-color: #b4553a !important; }
.loot-tile.lt-shine { position: relative; overflow: hidden; }
.loot-tile.lt-shine::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,236,170,.55) 50%, transparent 65%); transform: translateX(-120%); animation: ltShine 2.6s ease-in-out .6s 2; }
.loot-tile.lt-legendary.lt-shine::after { background: linear-gradient(110deg, transparent 35%, rgba(255,214,110,.7) 50%, transparent 65%); }
.loot-tile.lt-epic.lt-shine::after { background: linear-gradient(110deg, transparent 35%, rgba(214,180,255,.6) 50%, transparent 65%); }
@keyframes ltShine { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .loot-tile.lt-shine::after { animation: none; } }
.lt-sigtag, .lt-from { display: block; font-style: normal; font-size: .6rem; font-weight: 800; margin-top: 1px; }
.lt-sigtag { color: #8e2f1c; }
.lt-from { color: #7a6248; font-weight: 700; }
.sk-polish { margin: 10px 0 4px; }
.skp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.skp-it { display: grid; justify-items: center; gap: 1px; padding: 7px 4px; cursor: pointer; background: #fbf3df; border: 2px solid #c9a46a; border-radius: 9px; box-shadow: 0 2px 0 #b88a3a; font: inherit; color: #3a2a18; }
.skp-it i { font-style: normal; font-size: 1.1rem; }
.skp-it b { font-size: .86rem; }
.skp-it small { font-size: .6rem; color: #7a6248; text-align: center; line-height: 1.2; }
.skp-it:disabled { opacity: .6; cursor: default; }
.skp-it.max { border-color: #d9a43a; background: #fff6dc; }
@media (max-width: 520px) { .atl-grid { grid-template-columns: 1fr; gap: 4px; } .atl-it { padding: 4px 8px; grid-template-columns: 28px 1fr auto; } .atl-art svg { width: 26px; height: 26px; } .atl-txt b { font-size: .8rem; } .atl-lead { font-size: .74rem; } }

/* ===== FIX2: Stammcrew-Karten zeigen, was eine Figur kann ===== */
.sqc .sqc-ab { display: flex; align-items: center; gap: 3px; max-width: 100%; margin-top: 2px; padding: 1px 5px; border-radius: 6px;
  background: #f3ead6; border: 1px solid #d8c39a; font-size: .6rem; font-weight: 800; color: #5a4328; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.sqc .sqc-ab > i { font-style: normal; flex: none; font-size: .7rem; }
.sqc .sqc-fit { position: absolute; left: 3px; top: 3px; font-style: normal; font-size: .56rem; font-weight: 900; color: #2f6b2a;
  background: #e2f1d4; border: 1px solid #9cc47f; border-radius: 5px; padding: 0 4px; line-height: 1.4; pointer-events: none; }
.sqc { position: relative; }
.sqc.locked { cursor: help; opacity: .92; background: repeating-linear-gradient(135deg, #f4ead4 0 6px, #efe3c8 6px 12px); }
.sqc.locked .sqc-spr { filter: brightness(0) opacity(.35); }
.sqc.locked .sqc-how { display: block; font-size: .56rem; line-height: 1.25; color: #7a6248; text-align: center; margin-top: 2px; }
.sqc.locked .sqc-how em { font-style: normal; font-weight: 800; color: #8a5a2a; }
.sqc-lock-h { margin-top: 12px; }
/* FIX2: Profil-Chip im Hafen sprengt auf schmalen Handys nicht mehr seinen Rahmen */
.hq-bar .pf-chip { overflow: hidden; }
.hq-bar .pf-txt { min-width: 0; overflow: hidden; }
.hq-bar .pf-txt b, .hq-bar .pf-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq-bar .pf-txt .pf-xp { max-width: 100%; }

/* ===== FIX2: Tablet (iPad) ===== */
/* Touch-Tooltips: auch Geräte mit grobem Zeiger (iPad) bekommen die feste Blase statt CSS-Tooltip */
@media (pointer: coarse) { [data-tip]::after, [data-tip]::before { display: none !important; } }
@media (pointer: coarse) and (min-width: 561px) {
  /* Im Run: Knöpfe in die Kapitänskajüte (☰), Kopf schlank, Titel weg */
  body.in-run header { position: relative; }
  body.in-run header h1 { display: none; }
  body.in-run header .head-actions { position: absolute; top: 6px; right: 0; z-index: 40; display: block; }
  body.in-run header .head-actions > :not(.menu-btn) { display: none !important; }
  body.in-run header .head-actions > .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 40px; padding: 0; font-size: 24px; line-height: 1;
    border-radius: 10px; background: var(--panel, #fbf3e2); border: 2px solid #c9a46a; color: #4a3218; box-shadow: 0 2px 0 rgba(90, 60, 25, .25); }
  body.in-run header .track { padding-right: 56px; }
  /* Größere Daumen-Ziele und etwas größere Schrift auf dem Tablet */
  .btn { min-height: 44px; }
  .tb-btn { font-size: .78rem; }
  .tb-ico { width: 38px; height: 32px; } .tb-ico svg { width: 32px; height: 30px; }
  .rm-pop { max-width: 420px; }
}
/* iPad quer: Kampf ohne Scrollen – Arena etwas flacher */
@media (pointer: coarse) and (min-width: 900px) and (max-height: 900px) and (orientation: landscape) {
  body.in-run main { padding-top: 4px; }
  body.in-run .field { max-height: 46vh; }
}
/* ===== SPR: Kampffiguren im Stil der Kulissen ===== */
/* Bildfolgen im Figuren-SVG: Ruhe (atmend) und Ausfallschritt beim Angriff */
.spr .sp-a { display: none; }
.fu.spr-atk .spr .sp-a { display: inline; }
.fu.spr-atk .spr .sp-i:has(+ .sp-a) { display: none; }
/* Atmen: Oberkörper sinkt im Takt um genau einen Pixel (wie bei Stardew), Beine bleiben stehen */
.field.v3 .fu-body .spr .sp-u { animation: sprBreath 1.8s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes sprBreath { 0%, 55% { transform: translateY(0); } 56%, 100% { transform: translateY(1px); } }
/* Die alte weiche Skalierung passt nicht zu Pixeln: aus, Spiegelung der Gegner bleibt */
.field.v3 .fu-body svg.spr { animation: none !important; transform: none; }
.field.v3 .fu-enemy .fu-body svg.spr { transform: scaleX(-1); }
/* Licht der Kulisse: Figuren leicht in die Farbwelt der Szene tönen */
.field.v3 { --spr-tint: saturate(.9) brightness(1.01); --spr-rim: rgba(255,244,214,.35); }
.field.v3.th-desert, .field.v3.th-beach { --spr-tint: sepia(.12) saturate(.92) brightness(1.03); --spr-rim: rgba(255,230,170,.45); }
.field.v3.th-snow, .field.v3.th-sky { --spr-tint: saturate(.84) brightness(1.04) hue-rotate(-4deg); --spr-rim: rgba(220,236,255,.5); }
.field.v3.th-grave { --spr-tint: saturate(.72) brightness(.9) hue-rotate(-8deg); --spr-rim: rgba(190,200,230,.3); }
.field.v3.th-deep { --spr-tint: saturate(.8) brightness(.94) hue-rotate(-10deg); --spr-rim: rgba(150,220,240,.35); }
.field.v3.th-fort { --spr-tint: saturate(.85) brightness(.96) sepia(.06); --spr-rim: rgba(255,200,140,.35); }
.field.v3.th-town, .field.v3.th-pier, .field.v3.th-deck, .field.v3.th-meadow, .field.v3.th-jungle { --spr-tint: saturate(.9) brightness(1.02) sepia(.05); }
/* Grundfilter + feine Lichtkante oben links (passend zur Sonne der Kulissen), Bosse behalten ihren Schein */
.field.v3 .fu:not(.hurt):not(.hurt-crit):not(.ko):not(.ult-star):not(.raged) .fu-body svg.spr { filter: var(--spr-tint) drop-shadow(-1px -1px 0 var(--spr-rim)); }
.field.v3 .fu.boss:not(.hurt):not(.hurt-crit):not(.ko):not(.ult-star):not(.raged) .fu-body svg.spr { filter: var(--spr-tint) drop-shadow(-1px -1px 0 var(--spr-rim)) drop-shadow(0 0 9px rgba(208,86,74,.45)); }
.field.v3 .fu.mini:not(.hurt):not(.hurt-crit):not(.ko):not(.ult-star):not(.raged) .fu-body svg.spr { filter: var(--spr-tint) drop-shadow(-1px -1px 0 var(--spr-rim)) drop-shadow(0 0 7px rgba(217,166,60,.5)); }
/* Bodenschatten: weich, oval, mit dunklem Kern direkt unter den Füßen – die Figur steht im Bild statt darauf */
.field.v3 .fu-shadow { width: 50px !important; height: 10px !important; bottom: -4px !important; border-radius: 50% !important;
  background: radial-gradient(ellipse at 50% 45%, rgba(40,24,10,.5) 0, rgba(40,24,10,.28) 38%, rgba(40,24,10,0) 72%) !important; box-shadow: none !important; filter: none !important; animation: sprShadow 1.8s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes sprShadow { 0%, 55% { transform: scaleX(1); } 56%, 100% { transform: scaleX(1.06); } }
.field.v3 .fu.boss .fu-shadow { width: 64px !important; height: 12px !important; }
.field.v3.th-grave .fu-shadow, .field.v3.th-deep .fu-shadow { background: radial-gradient(ellipse at 50% 45%, rgba(10,12,24,.55) 0, rgba(10,12,24,.3) 38%, rgba(10,12,24,0) 72%) !important; }
/* Angriff: zusätzlich leicht nach vorn gelehnt (Pixel bleiben scharf, nur ein Hauch) */
.field.v3 .fu-crew.spr-atk:not(.ko) .fu-body { transform: rotate(4deg); transform-origin: 50% 100%; }
.field.v3 .fu-enemy.spr-atk:not(.ko) .fu-body { transform: rotate(-4deg); transform-origin: 50% 100%; }
/* Treffer: kurz zurückgelehnt */
.field.v3 .fu-crew.spr-hurt:not(.ko) .fu-body { transform: rotate(-5deg) translateX(-2px); transform-origin: 50% 100%; }
.field.v3 .fu-enemy.spr-hurt:not(.ko) .fu-body { transform: rotate(5deg) translateX(2px); transform-origin: 50% 100%; }
/* K.O.: liegt im Bild statt grauer Klotz – Farben bleiben erkennbar, nur müde */
.field.v3 .fu.ko { opacity: 1 !important; }
.field.v3 .fu.ko .fu-body { filter: none !important; }
.field.v3 .fu.ko .fu-body svg.spr { filter: saturate(.55) brightness(.9) var(--spr-tint, none) !important; }
.field.v3 .fu.ko .fu-body svg .sp-u { animation: none; }
.field.v3 .fu.ko .fu-shadow { width: 64px !important; animation: none; }
@media (prefers-reduced-motion: reduce) { .field.v3 .fu-body .spr .sp-u, .field.v3 .fu-shadow { animation: none !important; } }

/* ===== DLIGA: Dungeon-Liga, Marken-Laden ===== */
.dl-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; font-style: normal; font-size: .72rem; font-weight: 800; line-height: 1.5;
  background: #f3ead6; border: 1px solid #c9a46a; color: #5a4328; white-space: nowrap; vertical-align: middle; }
.dl-chip i { font-style: normal; font-size: .85em; }
.dl-chip b { font-weight: 900; }
.dl-chip.dl-bronze { background: #f6e1cf; border-color: #cf8446; color: #7a4320; }
.dl-chip.dl-silber { background: #eef1f4; border-color: #9aa5b2; color: #4a5560; }
.dl-chip.dl-gold { background: #fbf0c8; border-color: #e0a92a; color: #7a5a12; }
.dl-chip.dl-diamant { background: #e2f3f9; border-color: #4fb6d8; color: #1d5a70; }
.dl-chip.dl-legende { background: #efe4fa; border-color: #8a4fd0; color: #4a2380; box-shadow: 0 0 0 1px rgba(138,79,208,.15); }
.dl-panel { margin: 4px 0 10px; padding: 8px 10px; border-radius: 10px; background: #f6ecd6; border: 1px solid #dcc59a; display: grid; gap: 5px; }
.dl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dl-shopbtn { margin-left: auto; padding: 3px 10px; border-radius: 8px; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; color: #3a2410;
  background: #fbe6b4; border: 2px solid #b8783a; box-shadow: 0 2px 0 #8a5a2a; white-space: nowrap; }
.dl-shopbtn:active { transform: translateY(1px); box-shadow: 0 1px 0 #8a5a2a; }
.dl-marks { font-size: .82rem; color: #5a4328; white-space: nowrap; }
.dl-bar { height: 7px; border-radius: 4px; background: #e6d6b4; overflow: hidden; box-shadow: inset 0 1px 0 rgba(0,0,0,.08); }
.dl-bar i { display: block; height: 100%; background: linear-gradient(#e8b84a, #c9902a); }
.dl-next { font-size: .7rem; color: #7a6248; line-height: 1.35; }
.dl-res { margin: 8px 0; padding: 7px 10px; border-radius: 10px; background: #f3ead6; border: 1px solid #d8c39a; display: grid; gap: 4px; font-size: .8rem; color: #4a3820; }
.dl-res.best { background: #fbf2d2; border-color: #e0b44a; }
.dl-res-p { display: flex; gap: 6px; flex-wrap: wrap; }
.dl-res-p i { font-style: normal; font-size: .72rem; padding: 1px 6px; border-radius: 6px; background: #fff8e6; border: 1px solid #e0cfa6; }
.dl-res-g { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dl-up { font-weight: 900; color: #7a4a10; animation: dlUp .6s ease-out; }
@keyframes dlUp { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.dl-shop { max-width: 440px; }
.dl-shop .dl-sub { font-size: .8rem; color: #6b5a44; margin: 0 0 6px; }
.dl-shop .dl-msg { margin: 0 0 6px; padding: 5px 8px; border-radius: 8px; background: #e9f1dc; border: 1px solid #a9c48a; font-size: .8rem; }
.dl-list { display: grid; gap: 6px; max-height: min(56vh, 520px); overflow-y: auto; padding-right: 2px; }
.dl-it { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; cursor: pointer; font: inherit; color: #3a2a18;
  background: #fff8e6; border: 2px solid #d8c39a; border-radius: 10px; box-shadow: 0 2px 0 #c9a46a; }
.dl-it:disabled { cursor: default; opacity: .7; }
.dl-it.can { border-color: #c9a46a; }
.dl-it.can:active { transform: translateY(1px); box-shadow: 0 1px 0 #c9a46a; }
.dl-it.own { opacity: 1; background: #eef3e2; border-color: #a9c48a; box-shadow: 0 2px 0 #8aa86a; }
.dl-it-t { display: grid; min-width: 0; }
.dl-it-t b { font-size: .86rem; }
.dl-it-t small { font-size: .68rem; color: #7a6248; line-height: 1.25; }
.dl-pr { font-style: normal; font-weight: 900; font-size: .8rem; white-space: nowrap; }
.dl-sw { width: 44px; height: 40px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #e8dcc0; position: relative; }
.dl-sw.pbg svg, .dl-sw .pbg svg { width: 100%; height: 100%; display: block; }
.dl-sw.pet svg, .dl-sw.ship svg { width: 34px; height: 34px; }
.dl-sw.sk { font-size: 1.3rem; color: #c9902a; background: #fbf0c8; }
.dl-sw.fr { border: 4px solid #8a6a3a; }
.dl-orte { margin-left: 4px; font-size: .68rem; color: #7a6248; }
.league-chip.lg-friend { background: #eef3e2; border-color: #a9c48a; color: #3f5a2a; }
/* Neue Rahmen aus dem Marken-Laden */
.fr-kompass { border-color: #2f5a7a !important; box-shadow: 0 0 0 2px #c9a46a, inset 0 0 0 2px #f4ead0; }
.fr-gewoelbe { border-color: #4a4a52 !important; border-style: double !important; box-shadow: 0 0 0 2px #2a2a30, inset 0 0 6px rgba(90,140,60,.45); }
.bg-kartentisch { background: #e8d6a8; } .bg-laternengrotte { background: #22222e; } .bg-wrackbucht { background: #8ab8d8; } .bg-goldkajuete { background: #5a3220; }
@media (max-width: 400px) { .dl-it { grid-template-columns: 38px 1fr auto; gap: 6px; } .dl-sw { width: 38px; height: 34px; } }

/* K.O. am Handy: liegende Figur kleiner, damit sie Nachbarn nicht überdeckt */
@media (max-width: 520px) {
  .field.v3 .fu.ko .fu-body { transform: translate(8px, 24px) rotate(90deg) scale(.78) !important; }
  .field.v3 .fu-enemy.ko .fu-body { transform: translate(-8px, 24px) rotate(-90deg) scale(.78) !important; }
  .field.v3 .fu.ko .fu-shadow { width: 46px !important; }
}
/* ===== FIGHT: Pläne, Signaturen, Kampf-Launen ===== */
/* Spruchband eines Gegner-Plans: kleiner und kürzer als Boss-Wut, sitzt oben */
.ult-call.plan { top: 12%; padding: 4px 14px 6px; background: linear-gradient(180deg, #f3e2c4, #d9b98a); color: #3a2410; border-color: #fff1d6; box-shadow: 0 6px 16px -6px rgba(60,40,15,.5); }
.ult-call.plan small { color: #7a4a22; }
.ult-call.plan b { font-size: 1.05rem; color: #5a2a14; }
.ult-call.plan em { display: block; font-style: normal; font-size: .68rem; font-weight: 700; color: #6b4a2a; max-width: 260px; margin: 2px auto 0; }
/* Boss-Signatur: Holzrahmen wie Boss-Wut, Name in Violett, damit man den Angriff wiedererkennt */
.ult-call.rage.sig b { color: #4e1f72 !important; }
.ult-call.rage.sig small { color: #6a3a8a; }
.ult-call.rage.sig em { max-width: 260px; margin: 2px auto 0; }
/* Angekündigte Signatur: Stern-Absicht leuchtet sanft, Boss schimmert violett */
.fu.sigwarn .int-sig { background: #f3e2ff; border-color: #6a3a8a; animation: intWind .7s ease-in-out infinite alternate; }
.fu.sigwarn .f-sprite, .fu.sigwarn svg.spr { filter: drop-shadow(0 0 5px rgba(170, 110, 230, .85)); }
.int-sig { background: #f6ecff; border-color: #6a3a8a; }
/* Zweikampf: die beiden Duellanten tragen einen kleinen goldenen Ring */
.fu.duelist::before { content: ''; position: absolute; left: 50%; bottom: -3px; width: 78%; height: 8px; transform: translateX(-50%); border-radius: 50%;
  border: 2px solid rgba(232, 184, 74, .9); box-shadow: 0 0 6px rgba(232, 184, 74, .5); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fu.sigwarn .int-sig { animation: none; } }

/* ===== BATTLE2: Team-Statistik am Kampfende ===== */
.bs-tile .bs-dbar { display: block; width: 100%; height: 6px; margin-top: 2px; border-radius: 3px; background: #ead9b6; box-shadow: inset 0 1px 0 rgba(90,60,25,.25); overflow: hidden; }
.bs-tile .bs-dbar i { display: block; height: 100%; background: linear-gradient(#e8a24a, #c46a2a); border-radius: 3px; }
.bs-tile.mvp .bs-dbar i { background: linear-gradient(#f6d266, #d49a2a); }
.bs-tile .bs-dmg { font-size: .72rem; font-weight: 800; color: #5a3d1c; }
.bs-tile .bs-ic { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; min-height: 12px; }
.bs-tile .bs-ic em { font-style: normal; font-size: .58rem; font-weight: 800; color: #6b5233; line-height: 1.2; white-space: nowrap; }
.bs-tile .bs-crown { color: #d49a2a; text-shadow: 0 1px 0 #7a4f12; }
/* Weiter-Knopf ohne Auto-Balken */
.ux-auto::after { display: none !important; }
/* BATTLE2: Parallax – Kulisse schwenkt leicht mit, je weiter weg, desto weniger */
.f-stage.px-enemy .b3-cloud, .f-stage.px-enemy .f-clouds { animation: px-l-far .6s ease-out; }
.f-stage.px-crew .b3-cloud, .f-stage.px-crew .f-clouds { animation: px-r-far .6s ease-out; }
.f-stage.px-enemy .b3-props, .f-stage.px-enemy .f-horizon { animation: px-l-mid .6s ease-out; }
.f-stage.px-crew .b3-props, .f-stage.px-crew .f-horizon { animation: px-r-mid .6s ease-out; }
@keyframes px-l-far { 40% { translate: -2px 0; } } @keyframes px-r-far { 40% { translate: 2px 0; } }
@keyframes px-l-mid { 40% { translate: -4px 0; } } @keyframes px-r-mid { 40% { translate: 4px 0; } }
.fu .flank, .ftag.flank { background: #f6d9cc; color: #8e2f1c; }
@media (prefers-reduced-motion: reduce) { .f-stage[class*="px-"] * { animation: none !important; } }
.sea-lost { display: flex; align-items: center; gap: 6px; margin: 6px 2px 2px; font-size: .74rem; color: #4a6a78; font-style: italic; }
.sea-lost i { font-style: normal; }

/* ===== FUN: Kapitänsbefehle und Fokusziel im Run-Kampf ===== */
.rc-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 6px; }
.rc-bar.is-done { visibility: hidden; }
.rc-hint { grid-column: 1 / -1; text-align: center; font-size: .66rem; color: #8a7458; margin-top: -1px; }
.rc-btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 4px 4px 8px;
  background: #f3e3c2; border: 2px solid #8a6238; border-radius: 9px; box-shadow: 0 3px 0 #6b4a2a; color: #4a3520; font: inherit; cursor: pointer; transition: transform .1s; }
.rc-btn .rc-ico { font-style: normal; font-size: 1.15rem; line-height: 1; filter: grayscale(.7); opacity: .7; transition: filter .3s, opacity .3s; }
.rc-btn b { font-size: .72rem; font-weight: 800; line-height: 1.05; text-align: left; }
.rc-btn .rc-fill { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 4px; border-radius: 3px; background: rgba(107,74,42,.18); }
.rc-btn .rc-fill::after { content: ''; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); border-radius: 3px; background: #c99a3a; transition: width .2s linear; }
.rc-btn:disabled { cursor: default; color: #8a7458; }
.rc-btn.full { background: #fff4d4; border-color: #b4822a; box-shadow: 0 3px 0 #8a5a1a, 0 0 0 2px rgba(240,190,80,.35); animation: dxGlow 1.6s ease-in-out infinite alternate; }
.rc-btn.full .rc-ico { filter: none; opacity: 1; }
.rc-btn.full .rc-fill::after { background: #e0a92a; }
.rc-btn.full:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a5a1a; }
.rc-btn.used { animation: dxUsed .45s ease; }
@media (max-width: 380px) { .rc-btn b { font-size: .64rem; } .rc-btn { gap: 3px; } }
@media (prefers-reduced-motion: reduce) { .rc-btn.full, .rc-btn.used { animation: none; } }
/* Fokusziel: kleines Zielkreuz über dem Gegner, Gegner im Kampf antippbar */
#field .fu-enemy { cursor: crosshair; }
#field .fu-enemy.focus .fu-body::after { content: '🎯'; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); pointer-events: none; }
.pv-u.foe[data-act="foe-focus"] { cursor: pointer; }
.pv-u.foe.focus { box-shadow: 0 0 0 2px #d9603a, 0 3px 0 rgba(107,74,42,.4) !important; }
.pv-focus { position: absolute; top: -8px; right: -6px; z-index: 4; font-style: normal; font-size: 14px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0,0,0,.3)); }
/* Landgang: Raum-Bedingung, Türen, Relikte */
.dg-mod { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 6px 9px; border-radius: 9px; background: #efe2c6; border: 1px dashed #b89458; }
.dg-mod > i { font-style: normal; font-size: 1.3rem; }
.dg-mod b { display: block; font-size: .82rem; color: #4a3520; }
.dg-mod small { display: block; font-size: .72rem; color: #7a6248; line-height: 1.25; }
.dg-fx i.mod, .dg-fx i.rel { font-style: normal; background: #fff6df; border-color: #c9a46a; }
.dg-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.dg-door { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 118px; padding: 16px 8px 10px; cursor: pointer; font: inherit; color: #3a2a18;
  background: linear-gradient(#a8743e, #8a5a2c); border: 2px solid #5a3a1a; border-radius: 46px 46px 8px 8px; box-shadow: inset 0 0 0 4px rgba(255,230,180,.18), 0 4px 0 #4a2e14; }
.dg-door::after { content: ''; position: absolute; right: 14px; top: 58%; width: 6px; height: 6px; border-radius: 50%; background: #f2d27a; box-shadow: 0 1px 0 #6b4a1a; }
.dg-door .dg-door-ico { font-style: normal; font-size: 1.5rem; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff3d8; box-shadow: inset 0 -3px 0 #e0c48c; }
.dg-door b { font-size: .84rem; color: #fff6e2; text-shadow: 0 1px 0 #3a220c; }
.dg-door small { font-size: .7rem; color: #f6e2bc; text-align: center; line-height: 1.25; }
.dg-door:active { transform: translateY(2px); box-shadow: inset 0 0 0 4px rgba(255,230,180,.18), 0 2px 0 #4a2e14; }
.dg-door.d-elite, .dg-door.d-trap { background: linear-gradient(#8e4f3a, #6e3626); }
.dg-kick2 { margin: 8px 0 4px; font-size: .74rem; font-weight: 800; color: #8a6d48; text-align: center; }
.dg-relics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.dg-relic { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; cursor: pointer; font: inherit; color: #3a2a18;
  background: #fff8e6; border: 2px solid #c9a46a; border-radius: 10px; box-shadow: 0 3px 0 #b88a3a; }
.dg-relic > i { font-style: normal; font-size: 1.4rem; }
.dg-relic b { font-size: .74rem; }
.dg-relic small { font-size: .64rem; color: #7a6248; text-align: center; line-height: 1.2; }
.dg-relic:active { transform: translateY(2px); box-shadow: 0 1px 0 #b88a3a; }
.pv-fhint { font-style: normal; font-weight: 700; font-size: .62rem; color: #a0583a; margin-left: 6px; letter-spacing: 0; text-transform: none; }
/* ===== END: Kopfgeld-Leiter & Meisterschaft ===== */
.fr-kupfer      { border-color: #b26a3a; box-shadow: 0 0 0 2px #f2d3b8, inset 0 0 0 1px #7a3f1c; }
.fr-kopfgeldglut { border-color: #c0392b; box-shadow: 0 0 0 2px #f6d9cc, 0 0 8px rgba(242,118,46,.55); }
.fr-klinge      { border-color: #8a96a6; border-style: double; border-width: 4px; box-shadow: 0 0 0 1px #3a4250; }
.fr-sturmglas   { border-color: #4f8fe0; box-shadow: 0 0 0 2px #d8e8fb, 0 0 10px rgba(79,143,224,.5); }
.fr-weltende    { border-color: #1a1a22; box-shadow: 0 0 0 2px #f2c94c, 0 0 0 4px #1a1a22, 0 0 12px rgba(242,201,76,.45); }

/* Meisterschaft: Abzeichen auf Karten, Kapitänsbuch, Run-Ende */
.ms-b { display: inline-block; width: 12px; height: 14px; vertical-align: -2px; }
.ms-b svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.ms-chip { display: inline-flex; margin-left: 3px; cursor: help; }
.card-face .ms-corner { position: absolute; top: 3px; left: 3px; z-index: 3; }
.card-face.ms-t1 { box-shadow: inset 0 0 0 2px rgba(192,122,58,.55); }
.card-face.ms-t2 { box-shadow: inset 0 0 0 2px rgba(170,180,194,.8); }
.card-face.ms-t3 { box-shadow: inset 0 0 0 2px rgba(232,194,90,.9); }
.card-face.ms-t4 { box-shadow: inset 0 0 0 2px #9a5ad8, 0 0 6px rgba(154,90,216,.45); }
.ms-ups { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ms-up { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; background: #fff8e6; border: 2px solid #d8bf8e; font-size: .78rem; }
.ms-up small { color: #7a6248; font-size: .7rem; }
.ms-up.t4 { border-color: #9a5ad8; background: #f4ecfb; }
.ms-book { margin: 4px 0 10px; }
.ms-sum { display: flex; gap: 6px; }
.ms-s { flex: 1; display: grid; justify-items: center; padding: 5px 2px; border-radius: 8px; background: #fff8e6; border: 1px solid #e0cba0; }
.ms-s b { font-size: 1rem; }
.ms-s small { font-size: .62rem; color: #7a6248; }
.ms-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ms-it { position: relative; width: 36px; height: 40px; display: grid; place-items: center; background: #f6ecd6; border-radius: 6px; }
.ms-it > i:first-child svg { width: 28px; height: 32px; }
.ms-it .ms-b { position: absolute; right: -2px; bottom: -2px; }
.ms-how { display: block; margin-top: 4px; color: #7a6248; font-size: .7rem; }
/* Kopfgeld-Leiter: Mast mit Sprossen */
.hl-pop { max-width: 380px; }
.hl-sub { font-size: .8rem; color: #6b5a44; margin: 2px 0 8px; }
.hl-mast { position: relative; display: flex; flex-direction: column; gap: 3px; max-height: min(58vh, 520px); overflow-y: auto; padding: 4px 4px 4px 22px; background: linear-gradient(90deg, transparent 8px, #8a5a32 8px, #8a5a32 13px, transparent 13px); }
.hl-rung { position: relative; display: grid; grid-template-columns: 24px 22px 1fr auto; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: #fff8e6; border: 2px solid #d8bf8e; box-shadow: 0 2px 0 #b88a3a; font-size: .8rem; cursor: help; }
.hl-rung::before { content: ''; position: absolute; left: -14px; top: 50%; width: 14px; height: 4px; background: #6b4422; }
.hl-rung.big { border-color: #c9a46a; background: #fff2cf; }
.hl-rung.ok { opacity: .82; }
.hl-rung.cur { border-color: #b4553a; background: #fbe9dd; box-shadow: 0 2px 0 #8e3f2a, 0 0 0 2px rgba(180,85,58,.25); }
.hl-rung.next { border-style: dashed; }
.hl-rung.lock { filter: grayscale(.6); opacity: .6; }
.hl-n { font: 700 .95rem/1 "Pixelify Sans", var(--px, monospace); color: #5a3c26; text-align: center; }
.hl-ico { font-style: normal; text-align: center; }
.hl-name { font-weight: 700; color: #3a2a18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.hl-rw { display: inline-flex; gap: 2px; align-items: center; font-size: .78rem; }
.hl-rw i { font-style: normal; }
.hl-rw em { font-style: normal; margin-left: 3px; font-weight: 800; color: #3d6b46; }
.hl-rung.lock .hl-rw em, .hl-rung.next .hl-rw em { color: #8a6d48; }
.heat-pill .hl-open { padding: 0 6px !important; }
.heat-unlock .hl-rw { color: #7a5a12; }

/* ===== NEXT: Landgang-Endgegner und Kampfplan ===== */
.dg-mech { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: #f6ecd6; border: 2px solid #c9a46a; box-shadow: 0 2px 0 #b88a3a; }
.dg-mech > i { font-style: normal; font-size: 1.5rem; line-height: 1; flex: none; width: 30px; text-align: center; }
.dg-mech > span { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.dg-mech b { font-size: .92rem; color: #5a2e14; }
.dg-mech small { font-size: .78rem; color: #6b5640; }
.dg-mech em { font-style: normal; font-size: .76rem; color: #3d6a3a; font-weight: 700; }
.dg-mech.big { background: #fbe9dc; border-color: #c98a6a; }
.dg-plans { display: grid; gap: 7px; margin-top: 8px; }
.dg-plan { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 12px; text-align: left; cursor: pointer; font: inherit; color: #3a2a18;
  background: #fff8e6; border: 2px solid #c9a46a; border-radius: 10px; box-shadow: 0 3px 0 #b88a3a; }
.dg-plan:active { transform: translateY(2px); box-shadow: 0 1px 0 #b88a3a; }
.dg-plan > i { font-style: normal; font-size: 1.35rem; width: 30px; text-align: center; flex: none; }
.dg-plan > span { display: flex; flex-direction: column; line-height: 1.2; }
.dg-plan b { font-size: .95rem; } .dg-plan small { font-size: .76rem; color: #7a6248; margin-top: 2px; }

/* ===== C3: Duo-Momente, Kamera-Ruck, Treffer-Stopp ===== */
#field.jz-zoom { animation: jzZoom .42s cubic-bezier(.2,.8,.3,1); }
#field.jz-ko { animation: jzKo .42s ease-out; }
#field.jz-stop { animation: jzStop .14s steps(2); }
@keyframes jzZoom { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes jzKo { 0% { transform: scale(1) translateX(0); } 20% { transform: scale(1.045) translateX(-3px); } 40% { transform: scale(1.045) translateX(3px); } 100% { transform: scale(1) translateX(0); } }
@keyframes jzStop { 0% { transform: scale(1.012); } 100% { transform: scale(1); } }
.fu.duo-jump .fu-body { animation: duoJump .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes duoJump { 0% { transform: translateY(0); } 35% { transform: translateY(-14px); } 60% { transform: translateY(0); } 75% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
.ult-call.duo { background: linear-gradient(#fff3d0, #f3dca4) !important; border-color: #b8783a !important; color: #4a3014 !important; }
@media (prefers-reduced-motion: reduce) { #field.jz-zoom, #field.jz-ko, #field.jz-stop, .fu.duo-jump .fu-body { animation: none !important; } }

/* ===== KAMPFTIEFE (feature/kampftiefe): Schwung-Leiste, Blöße-Marke, Moralbruch, Ketten-Schilder ===== */
.mo-bar { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 4px; background: #2a2236; box-shadow: 0 0 0 2px #1a1424, inset 0 -3px 0 rgba(0,0,0,.3); }
.mo-ico { font-style: normal; font-size: .7rem; line-height: 1; filter: grayscale(.5); }
.mo-segs { display: flex; gap: 2px; }
.mo-seg { width: 8px; height: 8px; background: #4a3e5a; box-shadow: inset 0 2px 0 rgba(0,0,0,.25); transition: background .2s; }
.mo-seg.on { background: #ffd84a; box-shadow: inset 0 -2px 0 #c89a1a; }
.mo-bar.tick { animation: moTick .3s steps(3); }
.mo-bar.drop .mo-segs { animation: moDrop .35s steps(2); }
.mo-bar.full { animation: moFull .9s steps(6); }
.mo-bar.full .mo-ico { filter: none; }
@keyframes moTick { 0% { transform: translateY(-2px); } 100% { transform: none; } }
@keyframes moDrop { 0%, 100% { transform: none; } 50% { transform: translateX(-2px); filter: saturate(0); } }
@keyframes moFull { 0%, 100% { box-shadow: 0 0 0 2px #1a1424; } 30%, 70% { box-shadow: 0 0 0 2px #ffd84a, 0 0 8px rgba(255,216,74,.6); } }
/* Blöße: kleine Raute über markierten Gegnern (Technik deckt sie auf, Klinge nutzt sie) */
.fu-mark { display: none; position: absolute; left: 50%; bottom: -1px; width: 7px; height: 7px; margin-left: -38px; background: #ffe27a; box-shadow: 0 0 0 1px #6a4a10; transform: rotate(45deg); z-index: 5; pointer-events: none; }
.fu.marked:not(.ko) .fu-mark { display: block; animation: mkBlink 1s steps(2) infinite; }
@keyframes mkBlink { 50% { opacity: .45; } }
/* Moralbruch: Gefolge duckt sich und wird blass, solange die Furcht hält */
.fu.routed .fu-body { filter: saturate(.55) brightness(.92); transform: translateY(2px); transition: filter .3s, transform .3s; }
.ptag.chain { font-size: .62rem; }
.int-lead { background: #f3e2c0; border-color: #8a5a2a; }
@media (prefers-reduced-motion: reduce) { .mo-bar.tick, .mo-bar.drop .mo-segs, .mo-bar.full, .fu.marked .fu-mark { animation: none !important; } .fu.routed .fu-body { transition: none; } }
/* ===== /KAMPFTIEFE ===== */

/* ===== Konten-Sync (js/ui/online.js): Cloud-Symbol, Konto-Fenster, Konflikt-Wahl ===== */
.sync-badge { font-size: 15px; line-height: 1; font-family: inherit; }
.sync-badge.s-ok { background: #3f7a52; }
.sync-badge.s-wait { background: #8a5a32; }
.sync-badge.s-warn { background: #b4572c; animation: syncPulse 2.4s ease-in-out infinite; }
@keyframes syncPulse { 50% { filter: brightness(1.18); } }
.ts-acc { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
.ts-acc .ts-login { margin: 0 !important; }
.ts-acc .sync-badge { width: 32px; height: 30px; flex: 0 0 auto; }
#sync-slot { display: inline-flex; align-items: center; }
#sync-slot[hidden] { display: none !important; }
#sync-slot .sync-badge.head { width: 30px; height: 28px; margin: 0 4px; font-size: 15px; background: #fff6e0; }
#sync-slot .sync-badge.head.s-ok { color: #2f7a45; }
#sync-slot .sync-badge.head.s-wait { color: #8a5a32; }
#sync-slot .sync-badge.head.s-warn { color: #fff6e0; background: #b4572c; }
@media (max-width: 560px) {
  header:not(.menu-open) .head-actions > #sync-slot:not([hidden]) { display: inline-flex !important; vertical-align: top; margin-right: 6px; }
  header .head-actions > #sync-slot .sync-badge.head { width: 32px; height: 30px; }
}
.sync-acc, .sync-pop { text-align: left; }
.sync-acc > .fpop-kicker, .sync-acc > h3, .sync-acc > .hint, .sync-pop > .fpop-kicker, .sync-pop > h3, .sync-pop > .hint { display: block; text-align: center; }
.sync-acc > .btn.mini { display: flex; margin: 4px auto 8px; }
.sync-acc { overflow-x: hidden; }
.sync-sec { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; box-sizing: border-box; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 2px dashed #e0cba2; background: #fffdf6; }
.sync-sec.ok { border-style: solid; border-color: #7fb08a; background: #f3fbf2; }
.sync-sec small { color: #7a6448; line-height: 1.4; }
.sync-other summary { cursor: pointer; list-style: none; }
.sync-other summary::-webkit-details-marker { display: none; }
.sync-other summary::after { content: ' ›'; color: #b08a4a; }
.sync-other[open] summary::after { content: ' ⌄'; }
.sync-row { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.sync-row input { flex: 1 1 0; width: 0; min-width: 0; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 9px 11px; border-radius: 9px; border: 2px solid #e0cba2; background: #fff; color: #3a2a18; }
.sync-row input:focus { outline: none; border-color: #c9a46a; }
.sync-row .code-input { font-family: var(--px, monospace); letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.sync-row .btn.mini { flex: 0 0 auto; margin-top: 0; }
.sync-sec small { overflow-wrap: anywhere; }
.sync-msg { min-height: 1.2em; margin: 8px 0 0; font-size: .85rem; color: #9a4a22; text-align: center; }
.sync-msg:empty { display: none; }
.sync-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sync-opt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 3px; align-content: start; padding: 10px; border-radius: 12px; text-align: center;
  background: linear-gradient(#fff6e0, #f0dcb0); border: 2px solid #8a5a2a; box-shadow: 0 3px 0 #6b4422; color: #4a3218; }
.sync-opt:hover { background: linear-gradient(#fffaf0, #f6e4c0); }
.sync-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 #6b4422; }
.sync-opt:focus-visible { outline: 3px solid #2f6fb0; outline-offset: 2px; }
.sync-opt-h { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a7038; }
.sync-opt b { font-size: .95rem; }
.sync-opt small { font-size: .78rem; color: #7a6448; }
.sync-fine { margin: 10px 0 0; font-size: .78rem; color: #8a7458; text-align: center; }
@media (prefers-reduced-motion: reduce) { .sync-badge.s-warn { animation: none; } }
/* ===== Ende Konten-Sync ===== */
/* ---------- OFFENE SEE (js/ui/opensea.js): Seekarte als Pixel-Karte im Holzrahmen ---------- */
.os { --os-wood: #8a5a34; --os-wood-d: #5e3b1d; --os-cream: #fffaf0; display: flex; flex-direction: column; gap: 8px; }
.os-head { position: relative; display: flex; flex-direction: column; gap: 2px; padding-right: 44px; }
.os-head h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.os-kick { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.os-ki { width: 18px; height: 18px; }
.os-help { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; right: 0; top: 2px; width: 36px; height: 36px; display: grid; place-items: center;
  font: 800 1rem 'Nunito', sans-serif; color: #fffaf0; background: var(--os-wood); border: 2px solid var(--os-wood-d); border-radius: 9px; box-shadow: 0 3px 0 var(--os-wood-d); }
.os-help:active { transform: translateY(3px); box-shadow: none; }
/* Holzrahmen mit kleinen Kanten (gestufte Pixel-Ecken über Schatten) */
.os-frame { position: relative; padding: 7px; background: linear-gradient(180deg, #a06c3e, #8a5a34 40%, #7a4e2c); border-radius: 10px;
  box-shadow: inset 0 0 0 2px #5e3b1d, inset 0 2px 0 3px rgba(255,220,170,.25), 0 4px 0 #4a2d18, 0 6px 14px rgba(80,55,25,.2); }
.os-frame::before, .os-frame::after { content: ''; position: absolute; width: 6px; height: 6px; background: #e8c25a; box-shadow: 0 0 0 2px #5e3b1d; top: 3px; left: 3px; }
.os-frame::after { left: auto; right: 3px; }
.os-map { position: relative; width: 100%; aspect-ratio: 3 / 2; max-height: min(52vh, 430px); margin: 0 auto; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 0 2px #2b1d14; background: #4ea597; touch-action: manipulation; }
@media (max-width: 560px) { .os-map { aspect-ratio: 5 / 6; max-height: 46vh; } .os-head h2 { font-size: 1.05rem; } .os-frame { padding: 5px; } }
.os-map.hit { animation: os-shake .45s ease-out; }
@keyframes os-shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.os-sea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.os-wv { animation: os-shimmer 3.2s steps(2) infinite; }
@keyframes os-shimmer { 50% { opacity: .55; transform: translateX(1px); } }
.os-wake { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.os-wake polyline { fill: none; stroke: #e9fbf4; stroke-width: 1.4; stroke-dasharray: 1.6 1.8; vector-effect: non-scaling-stroke; stroke-width: 3px; stroke-dasharray: 5 6; opacity: .85; stroke-linecap: square; }
.os-map > button, .os-map > span { position: absolute; transform: translate(-50%, -50%); }
.os-map svg { image-rendering: pixelated; }
/* erreichbares Wasser: Ring zum Antippen */
.os-cell { all: unset; box-sizing: border-box; cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; z-index: 2; position: absolute; transform: translate(-50%, -50%); }
.os-cell i { width: 22px; height: 22px; border-radius: 6px; border: 3px dashed #fffaf0; opacity: .85; animation: os-pulse 1.6s ease-in-out infinite; box-shadow: 0 0 0 2px rgba(43,29,20,.25); }
.os-cell.on i { background: rgba(255,250,240,.35); border-style: solid; }
.os-cell.warn i { border-color: #ffe28a; }
.os-cell:focus-visible i { outline: 3px solid #ffe28a; }
@keyframes os-pulse { 50% { transform: scale(1.15); opacity: 1; } }
/* Funde: Creme-Plakette mit dunklem Rand, wie die Knoten der Routenkarte */
.os-find { all: unset; box-sizing: border-box; cursor: pointer; z-index: 3; position: absolute; transform: translate(-50%, -50%); width: 56px; height: 56px; display: grid; place-items: center; }
.os-plate { position: relative; width: 46px; height: 46px; display: grid; place-items: center; background: var(--os-cream); border: 2px solid #2b1d14; border-radius: 9px;
  box-shadow: 0 3px 0 #2b1d14, inset 0 -3px 0 #ecdfc3; animation: os-bob 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.os-plate svg { width: 36px; height: 36px; }
.os-find.k-pirates .os-plate { background: #fbe7dc; } .os-find.k-monster .os-plate { background: #f6d7cf; box-shadow: 0 3px 0 #2b1d14, inset 0 -3px 0 #e8b0a0; }
.os-find.k-wreck .os-plate { background: #fff1cf; } .os-find.k-merchant .os-plate { background: #e6f4e2; } .os-find.k-isle .os-plate { background: #eaf3f8; }
.os-find.can .os-plate { border-color: #2b1d14; box-shadow: 0 3px 0 #2b1d14, 0 0 0 3px #ffe28a, inset 0 -3px 0 #ecdfc3; }
.os-find.gone { opacity: .45; filter: saturate(.4); }
.os-find.warn .os-plate::after { content: '⚡'; position: absolute; right: -8px; top: -10px; font-size: .9rem; }
.os-find.on .os-plate { transform: translateY(-3px); box-shadow: 0 6px 0 #2b1d14, 0 0 0 3px #fffaf0; animation: none; }
.os-find.done { width: 26px; height: 26px; pointer-events: none; }
.os-chk { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,250,240,.7); color: #2f6a2e; font: 800 .8rem 'Nunito', sans-serif; font-style: normal; border: 2px solid rgba(43,29,20,.4); }
.os-flip svg { transform: scaleX(-1); display: block; width: 36px; }
.os-coin { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; } .os-coin svg { width: 14px; height: 14px; }
.os-q { position: absolute; right: 3px; top: 1px; font: 800 .8rem 'Nunito', sans-serif; font-style: normal; color: #8a5a34; }
@keyframes os-bob { 50% { transform: translateY(-3px); } }
/* Stürme und Vorschau, wo sie als Nächstes hinziehen */
.os-storm { all: unset; cursor: pointer; z-index: 4; position: absolute; transform: translate(-50%, -50%); width: 60px; height: 48px; display: grid; place-items: center; transition: left .7s ease-in-out, top .7s ease-in-out; }
.os-storm svg { width: 58px; height: 40px; filter: drop-shadow(0 4px 0 rgba(20,30,40,.25)); animation: os-storm 2.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes os-storm { 50% { transform: translateX(3px) translateY(-1px); } 52% { filter: brightness(1.35) drop-shadow(0 4px 0 rgba(20,30,40,.25)); } 56% { filter: drop-shadow(0 4px 0 rgba(20,30,40,.25)); } }
.os-ghost { z-index: 2; position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; display: grid; place-items: center; pointer-events: none;
  border-radius: 8px; border: 2px dashed #ffe28a; background: rgba(43,29,20,.28); animation: os-blink 1.2s steps(2) infinite; }
.os-ghost svg { width: 12px; height: 17px; display: block; }
@keyframes os-blink { 50% { opacity: .35; } }
/* Zielinsel */
.os-dest { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; right: 0; top: 0; bottom: 0; width: 17%; min-width: 64px; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transform: none !important; left: auto !important; }
.os-dest-art { width: 100%; max-width: 76px; height: auto; filter: drop-shadow(0 3px 0 rgba(43,29,20,.35)); }
.os-dest-name { position: relative; right: 4px; font: 700 .66rem/1.1 'Nunito', sans-serif; text-align: center; color: #3a2a18; background: var(--os-cream); border: 2px solid #2b1d14; border-radius: 6px; padding: 2px 5px; width: max-content; max-width: 78px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; box-shadow: 0 2px 0 #2b1d14; }
.os-dest.can .os-dest-art { animation: os-bob 1.6s ease-in-out infinite; }
.os-dest.can .os-dest-name { box-shadow: 0 0 0 3px #ffe28a; }
/* Schiff + Schaum */
.os-ship { z-index: 5; width: 48px; pointer-events: none; transition: left .6s ease-in-out, top .6s ease-in-out; }
.os-ship svg { width: 48px; height: auto; display: block; animation: os-sail 2.4s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(20,40,40,.3)); }
.os-foam { position: absolute; left: 4px; right: 4px; bottom: -2px; height: 4px; background: repeating-linear-gradient(90deg, #e9fbf4 0 5px, transparent 5px 9px); animation: os-foam .8s steps(2) infinite; }
@keyframes os-sail { 50% { transform: translateY(2px) rotate(-2deg); } }
@keyframes os-foam { 50% { transform: translateX(3px); } }
.os-buoy { z-index: 1; width: 16px; pointer-events: none; } .os-buoy svg { width: 16px; height: 16px; display: block; animation: os-bob 2s ease-in-out infinite; }
/* lebendige See: Deko ohne Spielwirkung */
.os-life { pointer-events: none; z-index: 1; }
.os-gull { width: 12px; } .os-gull svg { width: 12px; height: 8px; display: block; animation: os-flap .5s steps(2) infinite; }
.os-gull.a { left: 0; top: 14%; animation: os-fly 16s linear infinite; } .os-gull.b { left: 0; top: 30%; animation: os-fly 22s linear infinite -9s; }
@keyframes os-fly { from { left: -6%; } to { left: 106%; } }
@keyframes os-flap { 50% { transform: scaleY(-.6); } }
.os-trader { width: 30px; top: 6%; opacity: .75; animation: os-trade 38s linear infinite; } .os-trader svg { width: 30px; display: block; }
@keyframes os-trade { from { left: 106%; } to { left: -8%; } }
.os-hump { width: 22px; top: 88%; animation: os-swim 26s linear infinite; } .os-hump svg { width: 22px; height: 11px; display: block; animation: os-dive 4s ease-in-out infinite; }
@keyframes os-swim { from { left: 18%; } to { left: 70%; } }
@keyframes os-dive { 0%, 100% { transform: translateY(0); opacity: 1; } 45%, 60% { transform: translateY(6px); opacity: 0; } }
.os-fish { width: 12px; top: 64%; left: 40%; animation: os-jump 7s ease-in-out infinite; } .os-fish svg { width: 12px; height: 7px; display: block; }
@keyframes os-jump { 0%, 80%, 100% { opacity: 0; transform: translate(-50%, 0); } 86% { opacity: 1; transform: translate(-30%, -12px) rotate(-20deg); } 92% { opacity: 1; transform: translate(0, 0) rotate(30deg); } }
/* Info-Leiste unten: Holzplakette, Daumen-Knöpfe */
.os-panel { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 64px; padding: 8px 12px; background: var(--panel); border: 2px solid var(--line); border-radius: 12px; box-shadow: 0 3px 0 #dcc9a0; }
.os-panel.sel { border-color: #d8b56e; padding-right: 44px; flex-wrap: wrap; }
.os .os-panel .pop-x.os-x { position: absolute; top: 6px; right: 6px; float: none; margin: 0; }
.os-pi .os-coin, .os-pi .os-coin svg { width: 14px !important; height: 14px !important; }
.os-pi { flex: none; width: 52px; height: 52px; border-radius: 10px; background: var(--panel-2); border: 2px solid var(--line); display: grid; place-items: center; position: relative; }
.os-pi svg { width: 40px; height: 40px; } .os-pi .os-dest-art { width: 34px; height: auto; }
.os-pi.k-pirates, .os-pi.k-monster { background: #fbe7dc; } .os-pi.k-wreck { background: #fff1cf; } .os-pi.k-merchant { background: #e6f4e2; }
.os-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.os-pt > b { font: 700 .98rem/1.2 'Fredoka', 'Nunito', sans-serif; color: var(--ink); }
.os-pt > small { font-size: .84rem; line-height: 1.35; color: var(--mute); }
.os-hint { font-size: .84rem !important; color: var(--ink) !important; }
.os-panel:not(.sel) .os-pt { flex: 1 1 150px; }
.os-pchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.os-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: .78rem; }
.os-chip.bad { background: #f6dcd4; border-color: #e2a090; } .os-chip small { color: var(--mute); }
.os-ci { width: 18px; height: 16px; }
.os-gain { font: 700 .76rem 'Nunito', sans-serif; color: #6b4310; background: #fff1cf; border: 1px solid #e8cf94; border-radius: 6px; padding: 1px 6px; }
.os-warn { display: inline-flex; align-items: center; gap: 3px; font: 700 .76rem 'Nunito', sans-serif; color: #9a2a22; }
.os-bi { width: 8px; height: 11px; }
.os-away { font-size: .76rem; color: var(--mute); }
.os-go { flex: 1 0 100%; width: 100%; max-width: none; min-height: 48px; margin: 2px 0 0; font-size: 1rem; justify-content: center; text-align: center; }
.os-direct { flex: 1 1 auto; justify-content: center; min-height: 48px; padding: 0 12px; margin: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.os-dw { display: inline-flex; align-items: center; gap: 1px; font-style: normal; font-size: .8rem; color: #9a2a22; }
.os-help-pop { text-align: left; } .os-help-pop h3 { margin: 2px 0 10px; text-align: center; } .os-help-pop .event-kicker { text-align: center; }
.os-hl { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.os-hl li { display: flex; gap: 10px; align-items: center; font-size: .9rem; line-height: 1.35; }
.os-hl li > i { flex: none; width: 40px; height: 40px; border-radius: 9px; background: #4ea597; border: 2px solid #2b1d14; display: grid; place-items: center; }
.os-hl li > i svg { width: 30px; height: 30px; }
.os-ico { width: 100%; height: 100%; }
:root[data-theme="dark"] .os-panel { box-shadow: 0 3px 0 #000; }
:root[data-theme="dark"] .os-dest-name, :root[data-theme="dark"] .os-plate { color: #3a2a18; }
@media (prefers-reduced-motion: reduce) {
  .os *, .os-map.hit { animation: none !important; transition: none !important; }
  .os-life { display: none; }
}
.os-help-pop .fpop-btns .btn { justify-content: center; text-align: center; }
/* ---------- END OFFENE SEE ---------- */

/* ---------- STATS: Werte im Steckbrief antippen → Aufschlüsselung (js/ui/stats.js) ---------- */
.sx-hint { font-weight: 400; font-size: .72rem; color: var(--mute); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.st.sx-st { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; cursor: pointer;
  border-bottom: 1px dashed var(--line); padding: 3px 4px; font-size: .92rem; border-radius: 4px; min-width: 0; }
.st.sx-st span { color: var(--mute); min-width: 0; hyphens: manual; }
.st.sx-st b { white-space: nowrap; flex: none; text-align: right; }
.st.sx-st b .sx-cap-tag { margin-left: 2px; font-size: .56rem; padding: 0 3px; }
.st.sx-st b::after { content: ' ›'; color: var(--mute); font-weight: 400; font-size: .8em; }
.st.sx-st:hover, .st.sx-st:focus-visible { background: color-mix(in srgb, var(--gold) 12%, transparent); outline: none; }
.st.sx-st.on { background: color-mix(in srgb, var(--gold) 20%, transparent); border-bottom-color: var(--gold); }
.sx-cap-tag { font-style: normal; font-size: .62rem; font-weight: 800; text-transform: uppercase; color: #fff; background: var(--red); padding: 0 4px; border-radius: 3px; vertical-align: 1px; }
.sx-box { position: relative; margin: 8px 0 4px; padding: 8px 10px; background: #fffaf0; color: #3a2a14; border: 2px solid #c9a46a; border-radius: 8px;
  box-shadow: 0 3px 0 #a07a4a, inset 0 0 0 2px #f6ead0; animation: sx-in .18s steps(3) both; }
@keyframes sx-in { from { opacity: 0; transform: translateY(-4px); } }
.sx-head { display: flex; align-items: center; gap: 6px; padding-right: 30px; margin-bottom: 4px; font-family: "Pixelify Sans", "Nunito", sans-serif; }
.sx-head > i { font-style: normal; }
.sx-head b { font-size: .98rem; }
.sx-q { font-size: .74rem; color: #7a6a52; }
.sx-x { all: unset; box-sizing: border-box; position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer;
  font-size: .8rem; color: #5a3a1e; background: linear-gradient(#fffaf0, #f0dcb4); border: 2px solid #8a5a2e; border-radius: 6px; box-shadow: 0 2px 0 #6b4422; }
.sx-x:active { transform: translateY(2px); box-shadow: none; }
.sx-x:focus-visible { outline: 2px solid var(--sea); }
.sx-list { display: grid; gap: 1px; }
.sx-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 6px; font-size: .84rem; padding: 2px 0; }
.sx-ico { font-style: normal; text-align: center; font-size: .9rem; line-height: 1; }
.sx-name { min-width: 0; overflow-wrap: anywhere; }
.sx-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-row.hot { color: #8a4a0e; }
.sx-row.muted { color: #7a6a52; grid-template-columns: 1fr; }
.sx-total { border-top: 2px solid #c9a46a; margin-top: 3px; padding-top: 4px; font-weight: 800; }
.sx-cap { grid-template-columns: 22px 1fr; color: #9a3a2a; font-size: .8rem; }
.sx-over { grid-template-columns: 22px 1fr; font-size: .8rem; font-weight: 700; }
.sx-what { margin: 5px 0 0; font-size: .76rem; line-height: 1.35; color: #7a6a52; }
:root[data-theme="dark"] .sx-box { background: #2a2018; color: #f1e6d0; border-color: #8a6a3a; box-shadow: 0 3px 0 #4a3420, inset 0 0 0 2px #3a2c1e; }
:root[data-theme="dark"] .sx-q, :root[data-theme="dark"] .sx-what, :root[data-theme="dark"] .sx-row.muted { color: #c0ae90; }
:root[data-theme="dark"] .sx-row.hot { color: #f0b060; }
:root[data-theme="dark"] .sx-cap { color: #f08a70; }
/* ---------- END STATS ---------- */

/* ---------- DUNGEON-SUCHE (js/ui/seekarte.js): Seekarte der Gerüchte, eigene Welt im Holzrahmen ---------- */
/* Ebenen auf der Karte: Wasser (Hintergrund) < Nebel < Deko-Inseln < erreichbare Felder < Treibgut < Verstecke < Namensschild < Schiff.
   Jedes Element sitzt in seiner eigenen Kachel (.sk-t: 1/8 breit, 1/9 hoch) und ragt nicht in Nachbarfelder. */
.sk-card { box-sizing: border-box; width: min(440px, calc(100vw - 16px)); max-width: 440px; min-width: 0; text-align: left; padding: 10px 12px 12px !important; display: flex; flex-direction: column; gap: 6px; max-height: calc(100dvh - 16px); position: relative; overflow-y: auto; overscroll-behavior: contain; }
.sk-card > * { flex-shrink: 0; min-width: 0; }
.fpop:has(.sk-card) { padding: 8px; }
.sk-head { position: relative; padding-right: 84px; min-height: 36px; }
.sk-kick { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b08a4a; display: block; }
.sk-card h3 { margin: 0 !important; font-size: 1.12rem !important; line-height: 1.15; text-align: left; color: #2f5d7a; }
.sk-help { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; right: 44px; top: 0; width: 36px; height: 36px; display: grid; place-items: center;
  font: 800 1rem 'Nunito', sans-serif; color: #5e3b1d; background: #fff6e0; border: 2px solid #8a5a34; border-radius: 8px; box-shadow: 0 2px 0 #5e3b1d; }
.sk-card > .pop-x { position: absolute !important; top: 8px !important; right: 8px !important; float: none !important; margin: 0 !important; }
.sk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .78rem; color: #5e4a32; }
.sk-prov { display: inline-flex; align-items: center; gap: 6px; } .sk-prov small { font-weight: 700; }
.sk-pips { display: inline-flex; gap: 3px; } .sk-pips i { width: 10px; height: 10px; border: 2px solid #5e3b1d; background: #f3e2bd; border-radius: 2px; }
.sk-pips i.on { background: #e8a33a; box-shadow: inset 0 -2px 0 #b8742a; }
.sk-comp { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 4px; border-radius: 8px; background: #fff6e0; border: 1px solid #e2c08a; font-weight: 700; }
.sk-comp i { font-style: normal; display: inline-block; }
.sk-comp.c-hot { background: #ffd9b8; border-color: #e07a3a; color: #9a3a12; } .sk-comp.c-hot i { animation: sk-wobble .4s ease-in-out infinite; }
.sk-comp.c-warm { background: #ffe9c8; color: #9a5a12; } .sk-comp.c-cold { background: #dcecf6; color: #2f5d7a; }
.sk-count { margin-left: auto; font-weight: 800; color: #5e3b1d; }
/* Rahmen und Karte: festes Seitenverhältnis 8:9, Breite richtet sich nach der freien Höhe (Kacheln bleiben quadratisch) */
.sk-frame { align-self: center; box-sizing: border-box; width: min(100%, calc((100dvh - 300px) * 8 / 9 + 12px), 482px); min-width: min(100%, 232px); padding: 6px; background: linear-gradient(180deg, #a06c3e, #8a5a34 40%, #7a4e2c); border-radius: 10px; box-shadow: 0 3px 0 #5e3b1d, inset 0 0 0 2px #5e3b1d; }
@supports not (height: 1dvh) { .sk-frame { width: min(100%, calc((100vh - 300px) * 8 / 9 + 12px), 482px); } }
.sk-map { position: relative; width: 100%; aspect-ratio: 8 / 9; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 0 2px #2b1d14; background: #4fab9b; touch-action: manipulation; container-type: inline-size; }
.sk-map svg { image-rendering: pixelated; }
.sk-bg, .sk-fog, .sk-wake { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.sk-bg { z-index: 0; } .sk-fog { z-index: 1; } .sk-wake { z-index: 6; }
.sk-wv { animation: os-shimmer 3.2s steps(2) infinite; }
.sk-wake line { stroke: #e9fbf4; stroke-width: 3px; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; opacity: .9; }
/* Kachel-Box */
.sk-map > .sk-t { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; box-sizing: border-box; position: absolute; width: 12.5%; height: 11.112%; display: grid; place-items: center; transform: none; }
.sk-map > button.sk-t { cursor: pointer; }
.sk-isle { z-index: 2; pointer-events: none; } .sk-isle svg { width: 78%; height: auto; display: block; } .sk-isle.fogged { visibility: hidden; }
.sk-cell { z-index: 3; }
.sk-cell i { width: 52%; height: 52%; box-sizing: border-box; border-radius: 6px; border: 3px dashed #fffaf0; opacity: .9; box-shadow: 0 0 0 2px rgba(43,29,20,.25); animation: os-pulse 1.6s ease-in-out infinite; }
.sk-cell.on i { background: rgba(255,250,240,.45); border-style: solid; }
.sk-cell:focus-visible i { outline: 3px solid #ffe28a; }
.sk-find { z-index: 4; }
.sk-find > span { width: 72%; aspect-ratio: 1; box-sizing: border-box; display: grid; place-items: center; background: #fffaf0; border: 2px solid #2b1d14; border-radius: 7px; box-shadow: 0 2px 0 #2b1d14; }
.sk-find svg { width: 76%; height: auto; display: block; }
.sk-find.k-storm > span { background: #dfe4ec; } .sk-find.k-wreck > span { background: #fff1cf; } .sk-find.k-bottle > span { background: #e6f4f8; }
.sk-find.can > span { box-shadow: 0 2px 0 #2b1d14, 0 0 0 3px #ffe28a; }
.sk-find.on > span { box-shadow: 0 2px 0 #2b1d14, 0 0 0 3px #fffaf0; }
.sk-harbour { z-index: 5; } .sk-harbour svg { width: 92%; height: auto; display: block; filter: drop-shadow(0 2px 0 rgba(43,29,20,.4)); }
.sk-ship.here ~ .sk-harbour, .sk-harbour.here { z-index: 5; }
/* Versteck: Insel unten, Boss oben links, Flagge oben rechts, alles in der Kachel */
.sk-lair { z-index: 5; }
.sk-lair-isle { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 52%; display: block; border-radius: 45% 45% 30% 30%; background: linear-gradient(var(--sky, #b0c4c8) 0 55%, var(--ground, #8a7a5a) 55%); border: 2px solid #2b1d14; box-shadow: 0 2px 0 rgba(43,29,20,.55); overflow: hidden; box-sizing: border-box; }
.sk-lair-isle svg { position: absolute; left: 8%; right: 8%; bottom: 6%; width: 84%; height: 72%; }
.sk-lair-isle.sil, .sk-pi-isle.sil { background: #2a2a34; } .sk-lair-isle.sil svg, .sk-pi-isle.sil svg { filter: brightness(0) opacity(.75); }
.sk-flag { position: absolute; right: 6%; top: 4%; width: 24%; } .sk-flag svg { width: 100%; height: auto; display: block; transform-origin: left; animation: sk-flap 1.4s steps(2) infinite; }
.sk-boss { position: absolute; left: 4%; top: 0; width: 46%; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); } .sk-boss svg { width: 100%; height: auto; display: block; }
.sk-boss.sil svg { filter: brightness(0) opacity(.8); }
.sk-lair.looming .sk-lair-isle, .sk-lair.looming .sk-boss.sil { animation: sk-loom 3s ease-in-out infinite; }
.sk-lair.locked { filter: grayscale(.6); opacity: .85; }
.sk-q, .sk-lock { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); font: 800 .9rem/1 'Nunito', sans-serif; font-style: normal; color: #ffe28a; text-shadow: 0 2px 0 #000; }
.sk-lock { font-size: .7rem; }
.sk-lair.found .sk-lair-isle { box-shadow: 0 2px 0 rgba(43,29,20,.55), 0 0 0 2px #ffe28a; }
.sk-lair.on { background: rgba(255,250,240,.28); border-radius: 6px; box-shadow: inset 0 0 0 2px #fffaf0; }
/* Namensschild: nur beim angetippten Versteck, unter der Kachel, max. 3 Kacheln breit, höchstens 2 Zeilen */
.sk-name { position: absolute; z-index: 7; transform: translateX(-50%); max-width: 37.5%; width: max-content; box-sizing: border-box; pointer-events: none;
  font: 800 .62rem/1.15 'Nunito', sans-serif; color: #3a2a18; background: #fffaf0; border: 2px solid #2b1d14; border-radius: 5px; padding: 1px 5px; text-align: center; box-shadow: 0 2px 0 #2b1d14;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-ship { z-index: 8; pointer-events: none; transition: left .55s ease-in-out, top .55s ease-in-out; }
.sk-ship svg { width: 86%; height: auto; display: block; margin: 0 auto; animation: os-sail 2.4s ease-in-out infinite; filter: drop-shadow(0 2px 0 rgba(20,40,40,.3)); }
.sk-ship > span { position: relative; display: block; width: 100%; }
.sk-foam { position: absolute; left: 12%; right: 12%; bottom: -1px; height: 3px; background: repeating-linear-gradient(90deg, #e9fbf4 0 5px, transparent 5px 9px); animation: os-foam .8s steps(2) infinite; }
.sk-life { pointer-events: none; z-index: 7; position: absolute; } .sk-gull { width: 12px; } .sk-gull svg { width: 12px; height: 8px; display: block; animation: os-flap .5s steps(2) infinite; }
.sk-gull.a { left: 0; top: 20%; animation: os-fly 18s linear infinite; } .sk-gull.b { left: 0; top: 62%; animation: os-fly 25s linear infinite -11s; }
/* Gebiete als Legende unter der Karte (Schrift des Spiels, nie über Kartenteilen) */
.sk-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 6px; font: 700 .7rem/1.2 var(--px, 'Nunito'), sans-serif; color: #6b5a44; }
.sk-legend span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 3px; border-radius: 6px; }
.sk-legend span.on { background: #fff1cf; color: #3a2a18; box-shadow: inset 0 0 0 1px #e2c08a; }
.sk-legend i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(43,29,20,.5); }
/* Info-Leiste */
.sk-panel { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 60px; padding: 8px 10px; background: #fffaf0; border: 2px solid #e2c08a; border-radius: 10px; box-sizing: border-box; }
.sk-panel.sel, .sk-panel.lair { padding-right: 40px; } .sk-panel.good { border-color: #6aa84a; background: #f0f8e6; } .sk-panel.bad { border-color: #e2a090; background: #fbeee8; } .sk-panel.msg { background: #fff6e0; }
.sk-panel.lair { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px 10px; align-items: start; }
.sk-panel.lair .sk-pt { grid-column: 2; } .sk-panel.lair .sk-go { grid-column: 1 / -1; margin-right: -30px !important; }
.sk-x { all: unset; cursor: pointer; position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; display: grid; place-items: center; font-weight: 800; color: #5e3b1d; border-radius: 8px; background: #f3e2bd; border: 2px solid #8a5a34; box-sizing: border-box; }
.sk-pi { flex: none; width: 46px; height: 46px; border-radius: 9px; background: #f6eedd; border: 2px solid #e2c08a; display: grid; place-items: center; overflow: hidden; box-sizing: border-box; }
.sk-pi > svg { width: 80%; height: auto; } .sk-pi.boss { background: #3a2c4a; border-color: #2b1d14; } .sk-pi.boss svg { width: 90%; height: auto; }
.sk-pi-isle { display: block; width: 40px; height: 28px; border-radius: 40% 40% 25% 25%; background: linear-gradient(var(--sky) 0 55%, var(--ground) 55%); position: relative; } .sk-pi-isle svg { position: absolute; inset: 3px; width: auto; height: auto; }
.sk-pi-sil { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(#6a6a7a, #3a3a4a); } .sk-pi-sil svg { width: 80%; height: auto; filter: brightness(0) opacity(.85); }
.sk-ev { font-style: normal; font-size: 1.5rem; }
.sk-pt { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sk-card .sk-pt > small { position: static !important; }
.sk-pt > b { font: 700 .98rem/1.2 'Fredoka', 'Nunito', sans-serif; color: #332a21; }
.sk-pt > small { font-size: .84rem; line-height: 1.35; color: #6b5a44; }
.sk-hint { color: #332a21 !important; } .sk-sub { font-size: .76rem !important; }
.sk-lk { font-size: .72rem !important; font-weight: 800; color: #9a2a22 !important; letter-spacing: .02em; white-space: normal; line-height: 1.2 !important; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 3px 4px; margin-top: 3px; } .sk-chips em { white-space: nowrap; font: 700 .72rem 'Nunito', sans-serif; font-style: normal; color: #6b4310; background: #fff1cf; border: 1px solid #e8cf94; border-radius: 6px; padding: 1px 6px; }
.sk-away { font-size: .78rem; color: #7a6c57; }
.sk-go { flex: 1 0 100%; margin: 2px 0 0 !important; min-height: 46px; justify-content: center; text-align: center; }
.sk-btns { display: flex; gap: 8px; } .sk-btns .btn { flex: 1 1 auto; min-width: 0; margin: 0; min-height: 46px; justify-content: center; text-align: center; padding: 0 8px; font-size: .92rem; line-height: 1.15; }
.sk-btns .sk-list { flex: 0 0 auto; }
.sk-help-pop { text-align: left; } .sk-help-pop h3 { text-align: center; } .sk-help-pop .fpop-kicker { display: block; text-align: center; } .sk-help-pop .fpop-btns .btn { justify-content: center; text-align: center; }
.sk-hl { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.sk-hl li { display: flex; gap: 10px; align-items: center; font-size: .9rem; line-height: 1.35; }
.sk-hl li > i { flex: none; width: 40px; height: 40px; border-radius: 9px; background: #4fab9b; border: 2px solid #2b1d14; display: grid; place-items: center; }
.sk-hl li > i svg { width: 30px; height: 30px; }
@keyframes sk-flap { 50% { transform: scaleX(.85); } }
@keyframes sk-loom { 50% { filter: brightness(1.3); } }
@keyframes sk-wobble { 50% { transform: rotate(18deg); } }
/* Dunkles Design: Karte bleibt Pergament, Leisten und Texte dunkel */
:root[data-theme="dark"] .sk-card h3 { color: #9cc8e6; }
:root[data-theme="dark"] .sk-bar, :root[data-theme="dark"] .sk-legend { color: #cbbda4; } :root[data-theme="dark"] .sk-count { color: #f3e2bd; }
:root[data-theme="dark"] .sk-legend span.on { background: #3a3226; color: #f3e8d4; box-shadow: inset 0 0 0 1px #5a4a32; }
:root[data-theme="dark"] .sk-panel { background: #2a2620; border-color: #5a4a32; } :root[data-theme="dark"] .sk-panel.good { background: #24301e; border-color: #4f7a3a; } :root[data-theme="dark"] .sk-panel.bad { background: #3a2622; border-color: #8a4a3a; } :root[data-theme="dark"] .sk-panel.msg { background: #302a20; }
:root[data-theme="dark"] .sk-pt > b, :root[data-theme="dark"] .sk-hint { color: #f3e8d4 !important; } :root[data-theme="dark"] .sk-pt > small { color: #cbbda4; }
:root[data-theme="dark"] .sk-pi { background: #3a3226; border-color: #5a4a32; } :root[data-theme="dark"] .sk-lk { color: #f08a7a !important; }
:root[data-theme="dark"] .sk-comp { background: #3a3226; border-color: #5a4a32; color: #f3e8d4; }
@media (prefers-reduced-motion: reduce) {
  .sk-card *, .sk-ship { animation: none !important; transition: none !important; }
  .sk-life { display: none; }
}
@media (max-height: 700px) { .sk-panel { min-height: 50px; padding: 6px 8px; } .sk-card { gap: 5px; } .sk-btns .btn { min-height: 42px; } }
/* ---------- END DUNGEON-SUCHE ---------- */

/* ===== Kampf-Look 21l: Pixel-Sprechblasen und Tempo-Leiste =====
   Sprechblase wie aus dem Sprite-Kasten: harte 2-px-Kontur mit abgestuften Ecken (box-shadow statt Rundung),
   Pixel-Schrift, gestufter Zipfel, kurzer Hüpfer beim Erscheinen und Text, der Buchstabe für Buchstabe kommt. */
.cq-bubble {
  --cq-fill: #fffaf0; --cq-ink: #3a2410;
  border: 0 !important; border-radius: 0 !important;
  padding: 5px 9px 6px; max-width: 168px;
  background: var(--cq-fill);
  font: 600 .74rem/1.3 "Pixelify Sans", "Nunito", system-ui, sans-serif; letter-spacing: .01em; color: var(--cq-ink);
  box-shadow: 0 -2px 0 0 var(--cq-ink), 0 2px 0 0 var(--cq-ink), -2px 0 0 0 var(--cq-ink), 2px 0 0 0 var(--cq-ink),
              0 6px 0 -2px rgba(58,36,16,.22) !important;
  transition: none; transform-origin: var(--tail, 50%) 100%; margin-top: -8px;
}
.cq-bubble::after {
  content: ''; position: absolute; left: var(--tail, 50%); bottom: -8px; width: 14px; height: 8px; margin-left: -7px;
  border: 0 !important; transform: none !important; background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%233a2410' d='M0 0h1v1H0zM6 0h1v1H6zM1 1h1v1H1zM5 1h1v1H5zM2 2h1v1H2zM4 2h1v1H4zM3 3h1v1H3z'/%3E%3Cpath fill='%23fffaf0' d='M1 0h5v1H1zM2 1h3v1H2zM3 2h1v1H3z'/%3E%3C/svg%3E");
  background-size: 100% 100%; image-rendering: pixelated;
}
.cq-bubble.them { --cq-fill: #fdebe0; --cq-ink: #5a1e14; }
.cq-bubble.them::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%235a1e14' d='M0 0h1v1H0zM6 0h1v1H6zM1 1h1v1H1zM5 1h1v1H5zM2 2h1v1H2zM4 2h1v1H4zM3 3h1v1H3z'/%3E%3Cpath fill='%23fdebe0' d='M1 0h5v1H1zM2 1h3v1H2zM3 2h1v1H3z'/%3E%3C/svg%3E");
}
.cq-bubble .cq-rest { visibility: hidden; }
.cq-bubble.in { opacity: 1; transform: translate(-50%, -100%); animation: cqPop .32s cubic-bezier(.3, 1.6, .5, 1) both; }
.cq-bubble.out { opacity: 0; transform: translate(-50%, -100%) translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
@keyframes cqPop {
  0% { opacity: 0; transform: translate(-50%, -100%) translateY(6px) scale(.55); }
  60% { opacity: 1; transform: translate(-50%, -100%) translateY(-2px) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
@media (max-width: 560px) { .cq-bubble { max-width: 136px; font-size: .68rem; padding: 4px 7px 5px; } }
@media (prefers-reduced-motion: reduce) { .cq-bubble.in { animation: none; } }

/* Tempo-Leiste: Pixel-Pfeile statt Textzeichen, darunter die Stufe. Mehr Pfeile = schneller, auf einen Blick */
.fbar3 .fbar-sp { letter-spacing: 0 !important; flex-direction: column; gap: 3px; padding: 0 2px; }
.fbar-sp .sp-ch { display: inline-flex; gap: 1px; height: 9px; }
.fbar-sp .sp-ch svg { width: 5px; height: 9px; fill: currentColor; }
.fbar-sp .sp-x { font: 600 .62rem/1 "Pixelify Sans", "Nunito", system-ui, sans-serif; opacity: .75; }
.fbar-sp.on .sp-x { opacity: 1; }
.fbar3 .fbar-sp:not(.on):not(:disabled):hover { background: rgba(255, 220, 160, .12); color: #fff3d6 !important; }
.fbar3 .fbar-sp:focus-visible { outline: 2px solid #ffe58a; outline-offset: 1px; }
@media (max-width: 380px) { .fbar-sp .sp-x { display: none; } }