/* comic-ui.css — Comic-Oberfläche (06.11.2026, Admin-Test, nur mit <html class="comic">).
 * Gemalte Rahmen aus Qwen 2512 (art_comic/ui/), als 9-Slice per border-image: Ecken bleiben fest,
 * Kanten und Mitte werden gestreckt. Richtung laut Jens: dicker glänzender Orange-Rand (Maras Anzug),
 * innen Türkis->Blau (Knöpfe) bzw. Dunkelblau (Fenster, wegen Lesbarkeit), frei stehende Knöpfe statt
 * Leistenblock, Spielschrift Lilita weiß mit dunkler Kontur. Plan: claude/exominer-comic-hud-plan-0611.md
 * Ohne die Klasse greift hier nichts — Pixel-Modus und alle anderen Spieler bleiben unverändert. */

html.comic {
    --cx-navy: #0a0e2d;
    --cx-stroke: 2px 0 var(--cx-navy), -2px 0 var(--cx-navy), 0 2px var(--cx-navy), 0 -2px var(--cx-navy),
                 2px 2px var(--cx-navy), -2px 2px var(--cx-navy), 2px -2px var(--cx-navy), -2px -2px var(--cx-navy),
                 0 3px 0 rgba(0, 0, 0, .45);
    /* Dünne Kontur für kleine Schrift (unter ~15 px): die 2-px-Kontur macht kleine Buchstaben matschig */
    --cx-stroke-s: 1px 0 var(--cx-navy), -1px 0 var(--cx-navy), 0 1px var(--cx-navy), 0 -1px var(--cx-navy),
                   0 2px 0 rgba(0, 0, 0, .5);
}

/* ── Leiste: kein Block mehr, nur noch die Teile darin ── */
html.comic #bar {
    border: 0; border-image: none; background: none; box-shadow: none;
    filter: none; padding: 0; gap: 12px; align-items: center;
}
html.comic #bar::before, html.comic #bar::after { display: none; }

/* ── Spielerfeld als orange Kapsel ── */
html.comic #bar-char {
    border: 16px solid transparent;
    border-width: 16px 34px;
    /* TEST 06.11. (Jens, Möglichkeit 2): dunkler Innenraum wie die Tafeln — Regel „hell = anklickbar“.
       Zurück zur hellen Kapsel: frame_capsule_dark.png → frame_capsule.png */
    border-image: url(../art_comic/ui/frame_capsule_dark.png) 69 125 fill / 16px 34px stretch;
    padding: 2px 4px 2px 0; gap: 12px;
    filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .4));
}
html.comic #bc-por {
    width: 84px; height: 84px; border-radius: 0; background: none; box-shadow: none;
    border: 9px solid transparent;
    border-image: url(../art_comic/ui/frame_button.png) 54 fill / 9px stretch;
    margin-left: clamp(6px, 0.6vw, 16px);   /* Abstand zum Kapselrand (Fund Jens 06.11.: klebte am Rand) */
}
html.comic #bc-por img { opacity: 0; }
html.comic #bc-por::before {
    content: ''; position: absolute; inset: 0; border-radius: 8px;
    background: url(../art_comic/ui/mara_portrait.png) 50% 0 / 112% auto no-repeat;
}
html.comic #bc-por b {
    left: -30%; right: auto; bottom: -26%; width: 40px; height: 45px;
    clip-path: none; background: url(../art_comic/ui/sym_badge.png) center / contain no-repeat;
    font: 400 17px var(--sk-disp); color: #fff; text-shadow: var(--cx-stroke);
    padding-top: 2px;
}
html.comic .bc-name { color: #fff; text-shadow: var(--cx-stroke); letter-spacing: 1px; }
html.comic .bc-stats { gap: 5px; }
html.comic .bc-sym {
    width: 22px; height: 22px; font-size: 0; color: transparent;
    background: center / contain no-repeat;
}
html.comic .bc-sym.hp { background-image: url(../art_comic/ui/sym_herz.png); }
html.comic .bc-sym.en { background-image: url(../art_comic/ui/sym_blitz.png); }
html.comic .bc-sym.xp { background-image: url(../art_comic/ui/sym_stern.png); }

/* Balken: rund, dicke dunkle Kontur, Glanzstreifen oben, keine Rillen */
html.comic #bar-char .pbar {
    height: 20px; border-radius: 12px; border: 3px solid var(--cx-navy);
    background: #141a46; box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
html.comic #bar-char .pbar.xp { height: 16px; }
html.comic #bar-char .pbar > i { border-radius: 9px; box-shadow: none; }
html.comic #bar-char .pbar > i::after { display: none; }
html.comic #bar-char .pbar > i::before { left: 6px; right: 6px; top: 2px; height: 30%; border-radius: 6px;
    background: rgba(255, 255, 255, .45); }
html.comic #bar-char .pbar.hp > i { background: linear-gradient(#ff6a5e, #e0262c); }
html.comic #bar-char .pbar.en > i { background: linear-gradient(#7ef4ff, #1696e0); }
html.comic #bar-char .pbar.xp > i { background: linear-gradient(#cf9bff, #7a36d6); box-shadow: none; }
html.comic #bar-char .pbar > span { text-shadow: var(--cx-stroke); }

/* ── Knöpfe: frei stehend im orangen Knopf-Rahmen ── */
html.comic #bar-icons { gap: 10px; }
html.comic #auto-pair { gap: 10px; }
@media (min-width: 761px) { html.comic #auto-pair { flex-basis: 200px; } }
html.comic #bar .ico {
    border: 10px solid transparent; border-radius: 0;
    border-image: url(../art_comic/ui/frame_button.png) 54 fill / 10px stretch;
    background: none; box-shadow: none; padding: 0 2px 2px; gap: 0;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4));
    transition: transform .06s, filter .12s;
}
html.comic #bar .ico:hover { background: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4)) brightness(1.1); transform: translateY(-1px); }
html.comic #bar .ico:active { transform: translateY(2px); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
html.comic #bar .ico.on { background: none; box-shadow: none; }
html.comic #bar .ico span { font: 400 14px var(--sk-disp); color: #fff; text-shadow: var(--cx-stroke); letter-spacing: .3px;
    /* Kontur ragt 2 px über den Buchstaben hinaus — ohne Innenabstand schneidet overflow:hidden sie ab (Fund Jens) */
    padding: 0 3px 3px; overflow: visible; }
html.comic #bar .ico i { color: #fff; text-shadow: var(--cx-stroke); }
html.comic .ico-img {
    width: 50px; height: 50px; image-rendering: auto;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
}

/* Zähler-Punkt statt gelbem Pfeil-Schild: runde rote Blase mit „!" */
html.comic .ico em.fusebadge, html.comic #bar .ico em.fusebadge {
    top: -12px; right: -12px; min-width: 26px; width: auto; height: 26px; padding: 0 4px; box-sizing: border-box;
    display: grid; place-items: center; font-size: 0; color: #fff;
    background: radial-gradient(circle at 35% 30%, #ff8a7a, #e0262c 60%, #a8121c);
    border: 3px solid #fff; border-radius: 50%;
    box-shadow: 0 0 0 2px var(--cx-navy), 0 3px 0 rgba(0, 0, 0, .45);
}
html.comic .ico em.fusebadge::before { content: '!'; font: 400 17px/1 var(--sk-disp); text-shadow: 1px 1px 0 var(--cx-navy); }
html.comic .ico em.fusebadge[data-n]::before { content: attr(data-n); }   /* Anzahl statt „!" (shell/badges.js) */
html.comic .ico em.fusebadge { border-radius: 999px; }
/* AN/AUS-Lampe an Kampf/Abbau: sitzt auf dem Rand */
html.comic #bar .ico.auto em { top: -6px; right: -6px; width: 14px; height: 14px; border: 2px solid var(--cx-navy); }

/* ── Fenster: dunkelblauer Innenraum im orangen Rahmen, Titel in der Kapsel ── */
/* EIN Rahmen für alle Fenster: .win-frame (großes Fenster, Laden, Willkommen, Nachfragen) */
html.comic :is(#welcome .win, .win-frame) {
    --cx-fb: 30px;   /* Rahmendicke — Titel und Schließen-Knopf richten sich danach */
    position: relative;
    border: var(--cx-fb) solid transparent;
    border-image: url(../art_comic/ui/frame_window.png) 84 fill / var(--cx-fb) stretch;
    image-rendering: auto; background: none; box-shadow: none;
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .45));
    padding: calc(var(--cx-fb) * .9) 10px 8px; overflow: visible;
}
/* EIN Titel für alle Fenster: .win-title sitzt als Kapsel oben auf dem Rahmen.
   :is(#winbox h2#win-title, …) hält die Gewichtung so hoch wie skin.css. */
html.comic :is(#winbox h2#win-title, .win-frame > .win-title) {
    /* Genau mittig auf der oberen Rahmenkante, egal wie dick der Rahmen gerade ist (Fund Jens 06.11.:
       auf großen Schirmen rutschte die Kapsel in den Innenraum) */
    position: absolute; z-index: 2; left: 50%; top: calc(var(--cx-fb) * -0.7); transform: translate(-50%, -50%);   /* Mitte des orangen Bands (im Bild 6–44 von 84 px) */
    width: max-content; max-width: calc(100% - 120px); margin: 0;
    border: 12px solid transparent; border-width: 12px 28px;
    border-image: url(../art_comic/ui/frame_capsule.png) 69 125 fill / 12px 28px stretch;
    padding: 0 18px 2px; font-size: 26px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #fff; text-shadow: var(--cx-stroke);
}
html.comic #winbox #win-close {
    top: calc(var(--cx-fb) * -1 - 4px); right: calc(var(--cx-fb) * -1 - 4px); width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff8a7a, #e0262c 60%, #a8121c);
    border: 4px solid var(--cx-navy); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 4px 0 rgba(0, 0, 0, .45);
    color: #fff; text-shadow: var(--cx-stroke); z-index: 2;
}



/* ── Kästen oben: Auftrag und Ort im Fensterrahmen, Geldbeutel in Kapseln ── */
/* Kästen oben + Hinweisleisten (Neue Version, Bosskiste erhalten) */
html.comic :is(#place, .hud-panel, #app-update, #chest-ready) {
    border: 16px solid transparent;
    border-image: url(../art_comic/ui/frame_window.png) 84 fill / 16px stretch;
    image-rendering: auto; background: none; box-shadow: none;
    filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .4));
}

html.comic :is(#app-update, #chest-ready) { border-radius: 0; padding: 4px 8px; }
html.comic #app-update .app-update-text { text-shadow: var(--cx-stroke); }
html.comic #place-name { color: #fff; text-shadow: var(--cx-stroke); }
html.comic :is(#place, .hud-panel) .pbar {
    border-radius: 10px; border: 3px solid var(--cx-navy); background: #141a46; box-shadow: none;
}
html.comic :is(#place, .hud-panel) .pbar > i { border-radius: 7px; box-shadow: none; }
html.comic :is(#place, .hud-panel) .pbar > i::after { display: none; }
html.comic #wallet .wal {
    border: 8px solid transparent; border-width: 8px 18px; border-radius: 0;
    border-image: url(../art_comic/ui/frame_capsule.png) 69 125 fill / 8px 18px stretch;
    background: none; box-shadow: none; padding: 0 2px;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
}
html.comic #wallet .wal b { text-shadow: var(--cx-stroke); }
@media (max-width: 760px) and (orientation: portrait), (orientation: landscape) and (max-height: 540px) {
    html.comic :is(#place, .hud-panel) { border-width: 10px; border-image-width: 10px; }
    html.comic #wallet .wal { border-width: 6px 12px; border-image-width: 6px 12px; }
}



/* ── Kleine Fenster: Laden, Willkommen zurück, Nachfragen (.ask-card) ── */
html.comic #welcome .sub, html.comic #loading .sub { color: #cfe6ff; }
html.comic .ask-card .card-head { border-bottom: 0; }
html.comic .ask-card .card-title { text-shadow: var(--cx-stroke); }
html.comic #loading .pbar, html.comic #welcome .pbar {
    height: 22px; border-radius: 12px; border: 3px solid var(--cx-navy); background: #141a46; box-shadow: none;
}
html.comic #loading .pbar > i { border-radius: 9px; background: linear-gradient(#7ef4ff, #1696e0); box-shadow: none; }
html.comic #loading .pbar > i::after { display: none; }
/* Beute-Kacheln: dunkelblau mit runder Ecke und heller Kante, Ausrüstung mit orangem Rand */
html.comic #welcome .wc-chip {
    background: linear-gradient(#1d3a8a, #0e1d55); border: 3px solid var(--cx-navy); border-radius: 12px;
    box-shadow: inset 0 2px 0 rgba(140, 210, 255, .35), 0 3px 0 rgba(0, 0, 0, .45);
}
html.comic #welcome .wc-chip.gear { box-shadow: 0 0 0 3px #ff8a1e, inset 0 2px 0 rgba(140, 210, 255, .35), 0 3px 0 rgba(0, 0, 0, .45); }
html.comic #welcome .wc-chip b { text-shadow: var(--cx-stroke); }
/* Großer Bestätigen-Knopf (WEITER) wie die Kapsel: orange-glänzend mit dunkler Kontur */
html.comic .pbtn.ok,
html.comic :is(.ask-card, #welcome) :is(.btn.gold, .pbtn.ok, .btn:not(.ghost):not(.mini):not(.buy):not(.danger)) {
    font: 400 20px var(--sk-disp); letter-spacing: 1px; color: #fff; padding: 10px 18px;
    background: linear-gradient(#ffc04a, #ff8a1e 55%, #e8600e);
    border: 3px solid var(--cx-navy); border-radius: 16px; text-shadow: var(--cx-stroke);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(150, 50, 0, .45), 0 4px 0 rgba(0, 0, 0, .45);
}
html.comic .pbtn.ok:hover:not(:disabled),
html.comic :is(.ask-card, #welcome) :is(.btn.gold, .pbtn.ok):hover:not(:disabled) {
    background: linear-gradient(#ffd06a, #ff9a2e 55%, #f0701e); color: #fff;
}



/* ── Fenster-INHALTE (06.11.2026): Karten, Kacheln, Knöpfe, Reiter. Gilt in jedem Fenster mit Rahmen
   (.win-frame) und in den Kästen oben (.hud-panel) — eine Stelle, kein Fenster einzeln.
   #winbox/#quest stehen mit drin, damit die Gewichtung über den alten id-Regeln (skin.css, windows.css) liegt. ── */
html.comic :is(#winbox, #quest, .win-frame, .hud-panel, #app-update, #chest-ready) {
    --cx-card: linear-gradient(#1d3a8a, #0e1d55);
    --cx-card-hi: inset 0 2px 0 rgba(140, 210, 255, .35), 0 3px 0 rgba(0, 0, 0, .45);
}
html.comic :is(#winbox, .win-frame) :is(.card, .pet-stats, .tal-info, .slot) {
    background: var(--cx-card); border: 3px solid var(--cx-navy); border-radius: 14px; box-shadow: var(--cx-card-hi);
}
/* Auswahl-Kacheln (Waffen, Bohrer, Berger, Anzüge, Schweife, Werkstoffe, Ausrüstung): wie die Slot-Karten */
html.comic :is(#winbox, .win-frame) :is(.skin, .pet, .mat-tile, .gear-tile, .slot-tile) {
    background: var(--cx-card); border: 3px solid var(--cx-navy); border-radius: 14px; box-shadow: var(--cx-card-hi);
}
html.comic :is(#winbox, .win-frame) :is(.skin, .pet, .mat-tile, .gear-tile):hover { background: linear-gradient(#2453b0, #12266a); }
/* Inventar: Seltenheitsfarbe bleibt der Rand (ui-inventory.css, !important), dazu ein leichter
   Schein in derselben Farbe innen, damit seltene Stücke leuchten */
html.comic :is(#winbox, .win-frame) .gear-tile.r0 { box-shadow: var(--cx-card-hi), inset 0 0 16px -5px #c9d2dc; }
html.comic :is(#winbox, .win-frame) .gear-tile.r1 { box-shadow: var(--cx-card-hi), inset 0 0 16px -5px #7ce87c; }
html.comic :is(#winbox, .win-frame) .gear-tile.r2 { box-shadow: var(--cx-card-hi), inset 0 0 16px -5px #4de2ff; }
html.comic :is(#winbox, .win-frame) .gear-tile.r3 { box-shadow: var(--cx-card-hi), inset 0 0 16px -5px #c77dff; }
html.comic :is(#winbox, .win-frame) .gear-tile.r4 { box-shadow: var(--cx-card-hi), inset 0 0 16px -5px #ffcc55; }
html.comic :is(#winbox, .win-frame) .gear-tile.r5 { box-shadow: var(--cx-card-hi), inset 0 0 16px -5px #ff5b5b; }
html.comic :is(#winbox, .win-frame) :is(.gear-tile, .mat-tile, .slot-tile) { border-radius: 14px; }
/* Freie Plätze in der Kiste (bag.js freeTile, ohne Seltenheits-Klasse): gestrichelt statt halb durchsichtig */
html.comic :is(#winbox, .win-frame) .gear-tile:not([class*=" r"]) {
    opacity: 1 !important; background: rgba(10, 18, 60, .45); border: 3px dashed #2f4a96; box-shadow: none;
}
html.comic :is(#winbox, .win-frame) .slot-tile .slot-label { text-shadow: var(--cx-stroke); }
/* Mengen auf den Werkstoff-Kacheln mit Kontur wie im HUD */
html.comic :is(#winbox, .win-frame) :is(.mat-count, .slot-lvl) { text-shadow: var(--cx-stroke); }
/* Bosskisten-Zeile als Karte */
html.comic :is(#winbox, .win-frame) .chest-stack {
    border: 3px solid var(--cx-navy); border-radius: 14px;
    background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--cc) 30%, transparent), transparent 60%), linear-gradient(#1d3a8a, #0e1d55);
    box-shadow: var(--cx-card-hi);
}
html.comic :is(#winbox, .win-frame) .chest-stack-name { text-shadow: var(--cx-stroke); }
html.comic :is(#winbox, .win-frame) :is(.skin.on, .pet.on) {
    background: linear-gradient(#2453b0, #12266a);
    box-shadow: 0 0 0 3px #ff8a1e, inset 0 2px 0 rgba(140, 210, 255, .45), 0 3px 0 rgba(0, 0, 0, .45);
}
html.comic :is(#winbox, .win-frame) :is(.skin b, .pet b) { text-shadow: var(--cx-stroke); }
html.comic :is(#winbox, .win-frame) :is(.skin span, .pet span) { color: #cfe6ff; }
html.comic :is(#winbox, .win-frame) .slot.on {
    background: linear-gradient(#2453b0, #12266a);
    box-shadow: 0 0 0 3px #ff8a1e, inset 0 2px 0 rgba(140, 210, 255, .45), 0 3px 0 rgba(0, 0, 0, .45);
}
html.comic :is(#winbox, .win-frame) .slot.on:hover { background: linear-gradient(#2b5fc4, #152c78); }
html.comic :is(#winbox, .win-frame) :is(.slot.empty, .slot.locked) { background: rgba(10, 18, 60, .55); border: 3px dashed #3a5aa8; box-shadow: none; }
html.comic :is(#winbox, .win-frame) :is(.card-title, .sec, .slot-name, .slot-badge) { text-shadow: var(--cx-stroke); }
html.comic :is(#winbox, .win-frame) .sec { color: #7fe9ff; }
html.comic :is(#winbox, .win-frame) :is(.slot .bar, .slot-bar) { border-radius: 10px; border: 3px solid var(--cx-navy); background: #141a46; }
html.comic :is(#winbox, .win-frame) :is(.slot .bar > i, .smelt-fill) { border-radius: 7px; }

/* Hauptknopf: orange-glänzend wie WEITER */
html.comic :is(#winbox, #quest, .win-frame, .hud-panel, #app-update, #chest-ready) .btn {
    font-family: var(--sk-disp); font-weight: 400; letter-spacing: .5px; color: #fff; text-shadow: var(--cx-stroke);
    background: linear-gradient(#ffc04a, #ff8a1e 55%, #e8600e);
    border: 3px solid var(--cx-navy); border-radius: 14px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(150, 50, 0, .45), 0 3px 0 rgba(0, 0, 0, .45);
}
html.comic :is(#winbox, #quest, .win-frame, .hud-panel, #app-update, #chest-ready) .btn:hover:not(:disabled) { background: linear-gradient(#ffd06a, #ff9a2e 55%, #f0701e); }
html.comic :is(#winbox, #quest, .win-frame, .hud-panel, #app-update, #chest-ready) .btn:active:not(:disabled) { transform: translateY(2px);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(150, 50, 0, .45), 0 1px 0 rgba(0, 0, 0, .45); }
/* Gesperrt / Maximum (Fund Jens: auch fertige Knöpfe sollen nach Spiel aussehen): gleicher
   glänzender Knopf, nur in gedämpftem Stahlblau statt Orange — Text bleibt weiß mit Kontur. */
html.comic :is(#winbox, #quest, .win-frame, .hud-panel, #app-update, #chest-ready) :is(.btn, .ti-buy, .pbtn):disabled,
html.comic :is(#winbox, .win-frame) .ti-buy:disabled {
    color: #dfe8ff; text-shadow: var(--cx-stroke); cursor: default; opacity: 1; filter: none;
    background: linear-gradient(#7d8fc4, #4f62a0 55%, #3d4e88);
    border: 3px solid var(--cx-navy); border-radius: 14px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(20, 30, 80, .45), 0 3px 0 rgba(0, 0, 0, .45);
}
/* Kaufen-Knopf im Talentfenster (.ti-buy) wie der Hauptknopf */
html.comic :is(#winbox, .win-frame) .ti-buy {
    font-family: var(--sk-disp); font-weight: 400; letter-spacing: 1px; color: #fff; text-shadow: var(--cx-stroke);
    background: linear-gradient(#ffc04a, #ff8a1e 55%, #e8600e);
    border: 3px solid var(--cx-navy); border-radius: 14px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(150, 50, 0, .45), 0 3px 0 rgba(0, 0, 0, .45);
}
html.comic :is(#winbox, .win-frame) .ti-buy:hover:not(:disabled) { background: linear-gradient(#ffd06a, #ff9a2e 55%, #f0701e); }
/* Nebenknöpfe und Auswahl: blau-glänzend; gewählt = Türkis mit orangem Rand */
html.comic :is(#winbox, .win-frame, #app-update, #chest-ready) :is(.btn.ghost, .btn.mini, .pbtn, .btn.buy) {
    color: #fff; text-shadow: var(--cx-stroke);
    background: linear-gradient(#2c8ef2, #1a5fd0 55%, #1244a6);   /* dunkler als vorher: weiße Schrift hob sich oben im hellen Glanz kaum ab (Fund Jens 06.11.) */
    border: 3px solid var(--cx-navy); border-radius: 14px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(10, 30, 110, .45), 0 3px 0 rgba(0, 0, 0, .45);
}
html.comic :is(#winbox, .win-frame, #app-update, #chest-ready) :is(.btn.ghost, .btn.mini, .pbtn, .btn.buy):hover:not(:disabled) { background: linear-gradient(#3c9cff, #226de0 55%, #1650b8); }
html.comic :is(#winbox, .win-frame) .pbtn.sel { background: linear-gradient(#7ef4ff, #1fb4e8 55%, #1590c8); box-shadow: 0 0 0 3px #ff8a1e, inset 0 3px 0 rgba(255, 255, 255, .5), 0 3px 0 rgba(0, 0, 0, .45); }
html.comic :is(#winbox, .win-frame) :is(.btn.buy:disabled, .btn.buy.short) { color: #ffb0a0; background: linear-gradient(#3a2440, #241630); box-shadow: none; }
html.comic :is(#winbox, .win-frame) .btn.danger { background: linear-gradient(#ff8a7a, #e0262c 55%, #a8121c); }
/* Reiter / Umschalter als Kapsel */
html.comic :is(#winbox, .win-frame) .seg { border: 3px solid var(--cx-navy); border-radius: 16px; box-shadow: 0 3px 0 rgba(0, 0, 0, .45); overflow: hidden; }
html.comic :is(#winbox, .win-frame) .seg > .btn {
    border: 0; border-radius: 0; color: #cfe6ff; text-shadow: var(--cx-stroke);
    background: linear-gradient(#24408e, #142a66); box-shadow: inset 0 2px 0 rgba(140, 210, 255, .3);
}
html.comic :is(#winbox, .win-frame) .seg > .btn + .btn { border-left: 3px solid var(--cx-navy); }
html.comic :is(#winbox, .win-frame) .seg > .btn.gold,
html.comic :is(#winbox, .win-frame) :is(.ord-switch, .ord-tabs) .btn.gold {
    color: #fff; background: linear-gradient(#ffc04a, #ff8a1e 55%, #e8600e); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5);
}

/* ── Fähigkeitsleiste über dem HUD (widgets/buffBar.js): Comic-Kacheln mit Farbring ── */
html.comic #buffbar { gap: 12px; }
html.comic #buffbar .sk {
    width: clamp(56px, 3.6vw, 84px); height: clamp(56px, 3.6vw, 84px);
    border: 3px solid var(--cx-navy); border-radius: 14px;
    background: radial-gradient(circle at 50% 38%, rgba(var(--c), .35), transparent 62%), linear-gradient(#2453b0, #0e1d55);
    box-shadow: 0 0 0 3px rgba(var(--c), .55), inset 0 3px 0 rgba(255, 255, 255, .3), 0 4px 0 rgba(0, 0, 0, .45);
}
html.comic #buffbar .sk:not(.ready):not(.on):not(.gold) {
    border-color: var(--cx-navy); box-shadow: 0 0 0 3px #3a4f8e, inset 0 3px 0 rgba(255, 255, 255, .2), 0 4px 0 rgba(0, 0, 0, .45);
}
html.comic #buffbar .sk.ready { border-color: var(--cx-navy);
    box-shadow: 0 0 0 3px rgb(var(--c)), 0 0 14px rgba(var(--c), .7), inset 0 3px 0 rgba(255, 255, 255, .35), 0 4px 0 rgba(0, 0, 0, .45); }
html.comic #buffbar .sk.on { border-color: var(--cx-navy);
    box-shadow: 0 0 0 3px #5fe08a, 0 0 14px rgba(95, 224, 138, .7), 0 4px 0 rgba(0, 0, 0, .45); }
html.comic #buffbar .sk.gold { border: 3px solid var(--cx-navy);
    background: radial-gradient(circle at 50% 38%, rgba(255, 196, 64, .45), transparent 62%), linear-gradient(#2453b0, #0e1d55);
    box-shadow: 0 0 0 3px #ffcf4a, 0 0 16px rgba(255, 205, 80, .75), inset 0 3px 0 rgba(255, 255, 255, .35), 0 4px 0 rgba(0, 0, 0, .45); }
html.comic #buffbar .sk-n { font: 400 clamp(20px, 1.4vw, 32px)/1 var(--sk-disp); color: #fff; text-shadow: var(--cx-stroke); }
@media (min-width: 1201px) {
    /* Leiste sitzt über dem (größeren) Comic-HUD */
    html.comic #buffbar { bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(104px, 9.2vw, 210px)); }
}

/* Festes Fenster, innen scrollen (Jens 06.11.2026, wie in Spielen üblich): Das Fenster passt immer auf
   den Schirm, Titel-Kapsel und Schließen-Knopf bleiben stehen, nur #win-body scrollt. Vorher scrollte
   die ganze Ebene (#overlay) mitsamt Rahmen — bei langen Fenstern lag der Rahmen halb außerhalb. */
html.comic #overlay { overflow: hidden; align-items: center; padding-bottom: 16px; }
html.comic #winbox {
    display: flex; flex-direction: column;
    max-height: calc(100dvh - 90px);
}
html.comic #win-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 8px 6px 2px; margin-right: -6px;
    scrollbar-width: thin; scrollbar-color: #ff8a1e #0e1d55;
}
html.comic #win-body::-webkit-scrollbar { width: 12px; }
html.comic #win-body::-webkit-scrollbar-track { background: #0e1d55; border-radius: 8px; border: 2px solid var(--cx-navy); }
html.comic #win-body::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #ffc04a, #ff8a1e 60%, #e8600e); border-radius: 8px; border: 2px solid var(--cx-navy);
}
/* Willkommen zurück: gleiche Regel, die Beute-Liste scrollt */
html.comic #welcome { overflow: hidden; align-items: center; }
html.comic #welcome .win.win-frame { display: flex; flex-direction: column; max-height: calc(100dvh - 90px); }
html.comic #wc-body { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ff8a1e #0e1d55; }

/* Platz über dem Fenster für die Titel-Kapsel und den runden Schließen-Knopf */
html.comic #overlay, html.comic .modal { padding-top: 50px; }


/* Rand wächst mit (06.11.2026, Fund Jens): Auf großen Schirmen sind die Knöpfe gut doppelt so breit
   wie im Test, ein fester 10-px-Rand wirkte dort dünn. Ab 1201 px Breite skaliert er mit vw. */
/* Großer Schirm: Comic-Leiste breiter als die alte (1360 px) — Kapsel und Knöpfe sind größer,
   sonst werden die Knöpfe schmal und die Namen abgeschnitten (Fund Jens 06.11.). */
@media (min-width: 1440px) {
    html.comic #bar { width: max-content; max-width: calc(100vw - 48px); }
}
/* Knöpfe gleich breit und fast quadratisch, auch Kampf/Abbau (Fund Jens 06.11.: lange flache Knöpfe). */
@media (min-width: 761px) {
    html.comic #bar-icons { flex: none; grid-auto-columns: var(--cx-btn); }
    html.comic #auto-pair { flex: none; flex-basis: auto; }
    html.comic #auto-pair .ico.auto { flex: none; width: var(--cx-btn); }
    html.comic #bar { --cx-btn: clamp(84px, 6.4vw, 160px); }
    html.comic #bar .ico { aspect-ratio: 1 / 0.92; }
    /* Symbol und Name wachsen mit dem Knopf mit (große Schirme) */
    html.comic .ico-img { width: calc(var(--cx-btn) * 0.48); height: calc(var(--cx-btn) * 0.48); }
    html.comic #bar .ico span { font-size: clamp(14px, calc(var(--cx-btn) * 0.15), 22px); }
    /* Hinweis-Blase und AN/AUS-Lampe wachsen mit (Fund Jens 06.11.: auf 4K winzig) */
    html.comic #bar .ico em.fusebadge {
        min-width: clamp(26px, calc(var(--cx-btn) * 0.28), 44px); height: clamp(26px, calc(var(--cx-btn) * 0.28), 44px);
        top: calc(clamp(26px, calc(var(--cx-btn) * 0.28), 44px) * -0.45); right: calc(clamp(26px, calc(var(--cx-btn) * 0.28), 44px) * -0.45);
    }
    html.comic #bar .ico em.fusebadge::before { font-size: clamp(17px, calc(var(--cx-btn) * 0.18), 28px); }
    html.comic #bar .ico.auto em {
        width: clamp(14px, calc(var(--cx-btn) * 0.14), 24px); height: clamp(14px, calc(var(--cx-btn) * 0.14), 24px);
        top: calc(clamp(14px, calc(var(--cx-btn) * 0.14), 24px) * -0.45); right: calc(clamp(14px, calc(var(--cx-btn) * 0.14), 24px) * -0.45);
    }
}
@media (min-width: 1201px) {
    html.comic #bar .ico { border-width: clamp(10px, 0.8vw, 22px); border-image-width: clamp(10px, 0.8vw, 22px); }
    html.comic #bar-char { border-width: clamp(14px, 0.9vw, 24px) clamp(28px, 1.5vw, 40px);
        border-image-width: clamp(14px, 0.9vw, 24px) clamp(28px, 1.5vw, 40px); }
    html.comic #bar-char { flex-basis: clamp(330px, 21vw, 540px); }
    html.comic #bar-char .pbar > span { font-size: clamp(13px, 0.8vw, 19px); }
    html.comic #bc-por { width: clamp(84px, 5.6vw, 140px); height: clamp(84px, 5.6vw, 140px); }
    html.comic #bc-por b { width: clamp(40px, 2.4vw, 60px); height: clamp(45px, 2.7vw, 67px); font-size: clamp(17px, 1vw, 24px); }
    html.comic #bar-char .pbar { height: clamp(20px, 1.25vw, 30px); }
    html.comic #bar-char .pbar.xp { height: clamp(16px, 1vw, 24px); }
    html.comic .bc-sym { width: clamp(22px, 1.3vw, 32px); height: clamp(22px, 1.3vw, 32px); }
    html.comic .bc-name { font-size: clamp(20px, 1.25vw, 30px); }
    html.comic #bc-por { border-width: clamp(7px, 0.45vw, 12px); border-image-width: clamp(7px, 0.45vw, 12px); }
    html.comic :is(#welcome .win, .win-frame) { --cx-fb: clamp(30px, 2vw, 46px); }
    html.comic :is(#winbox h2#win-title, .win-frame > .win-title) { border-width: clamp(12px, 0.8vw, 18px) clamp(28px, 1.8vw, 40px);
        border-image-width: clamp(12px, 0.8vw, 18px) clamp(28px, 1.8vw, 40px); }
}

/* ── Größen (gleiche Stufen wie skin.css) ── */
@media (min-width: 761px) and (max-width: 1200px) {
    html.comic #bc-por { width: 70px; height: 70px; }
    html.comic #bar .ico span { font-size: 12px; }
    html.comic .ico-img { width: 42px; height: 42px; }
}
@media (min-width: 761px) and (max-width: 900px) {
    html.comic #bc-por { width: 58px; height: 58px; }
    html.comic #bc-por b { width: 32px; height: 36px; font-size: 14px; left: -30%; right: auto; bottom: -26%; }
}
@media (max-width: 760px) and (orientation: portrait) {
    html.comic #bar-char { border-width: 12px 26px; border-image-width: 12px 26px; align-self: stretch; }
    html.comic #auto-pair { flex: none; }
    html.comic #bc-por { width: 74px; height: 74px; border-width: 6px; border-image-width: 6px; }
    html.comic #bc-por b { width: 30px; height: 34px; font-size: 13px; left: -30%; right: auto; bottom: -26%; }
    html.comic #bar .ico { border-width: 8px; border-image-width: 8px; }
    html.comic #bar .ico span { font-size: 11px; }
    html.comic .ico-img { width: 34px; height: 34px; }
    html.comic :is(#welcome .win, .win-frame) { --cx-fb: 20px; }
    html.comic :is(#winbox h2#win-title, .win-frame > .win-title) { font-size: 20px; border-width: 10px 22px; border-image-width: 10px 22px; }
    html.comic #winbox #win-close { width: 38px; height: 38px; }
}
@media (orientation: landscape) and (max-height: 540px) {
    html.comic #bar-char { border-width: 10px 22px; border-image-width: 10px 22px; gap: 8px; }
    html.comic #auto-pair { flex-basis: 150px; }
    html.comic #bc-por { width: 40px; height: 40px; border-width: 5px; border-image-width: 5px; box-shadow: none; margin-left: 2px; }
    html.comic #bc-por b { width: 24px; height: 27px; font-size: 11px; left: -30%; right: auto; bottom: -26%; }
    html.comic .bc-sym { width: 13px; height: 13px; }
    html.comic #bar-char .pbar, html.comic #bar-char .pbar.xp { height: 13px; border-width: 2px; }
    html.comic #bar .ico { border-width: 6px; border-image-width: 6px; }
    html.comic #bar .ico span { font-size: 9px; }
    html.comic .ico-img { width: 24px; height: 24px; }
    html.comic .ico em.fusebadge, html.comic #bar .ico em.fusebadge { min-width: 18px; width: auto; height: 18px; padding: 0 3px; top: -8px; right: -8px; border-width: 2px; }
    html.comic .ico em.fusebadge::before { font-size: 12px; }
    html.comic :is(#welcome .win, .win-frame) { --cx-fb: 16px; }
    html.comic :is(#winbox h2#win-title, .win-frame > .win-title) { font-size: 17px; border-width: 8px 18px; border-image-width: 8px 18px; }
    html.comic #winbox #win-close { width: 32px; height: 32px; font-size: 16px; }
}

/* ── Handy-Funde 06.11. (Screenshot Jens) ── */
/* Willkommen: Beute-Raster scrollt nicht mehr selbst — das ganze Fenster-Innere scrollt schon,
   ein Rollbereich im Rollbereich schnitt die letzte Kachelreihe ab. */
html.comic #welcome .wc-grid { max-height: none; overflow: visible; margin-bottom: 14px; }
/* Zeilen in Spielschrift wie der Rest */
html.comic #welcome .sub { font: 400 19px var(--sk-disp); letter-spacing: .5px; color: #cfe6ff; text-shadow: var(--cx-stroke); }
html.comic #welcome .wc-sec { font: 400 15px var(--sk-disp); letter-spacing: 1.5px; opacity: 1; color: #ffcc55; text-shadow: var(--cx-stroke); }
html.comic #welcome .wc-line { text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
@media (max-width: 760px) {
    /* Titelkapsel: am Handy kleiner und breiter erlaubt, sonst „WILLKOM…" */
    html.comic :is(#winbox h2#win-title, .win-frame > .win-title) {
        font-size: clamp(16px, 4.6vw, 22px); max-width: calc(100% - 24px);
        border-width: 10px 20px; border-image-width: 10px 20px; padding: 0 8px 2px;
    }
    html.comic #winbox h2#win-title { max-width: calc(100% - 64px); }  /* Platz für den roten Schließen-Knopf */
}
@media (max-width: 760px) and (orientation: portrait) {
    /* Ortsschild unter die Geldbeutel-Kapseln, die sind im Comic breiter und deckten den Ortsnamen ab */
    html.comic #place { top: calc(54px + env(safe-area-inset-top, 0px)); }
}

/* Kleine Unterzeile in Knöpfen (z. B. Portal „nächste Ebene"): volle Deckkraft, helles Blau,
   dünne Kontur statt der dicken — vorher halb durchsichtig mit 2-px-Kontur = matschig (Fund Jens 06.11.) */
html.comic :is(#winbox, .win-frame) .pbtn span {
    opacity: 1 !important; font-size: 15px !important; color: #d6ebff; text-shadow: var(--cx-stroke-s);
    font-family: var(--sk-disp); letter-spacing: .4px;
}
html.comic .portal-intro { color: #dfeeff; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); margin-bottom: 4px; }

/* Hinweis wie in modernen Spielen (06.11., Jens: Dauer-Ring sah fremd aus):
   - Blase hüpft EINMAL, wenn ein Hinweis neu dazukommt (.pop setzt shell/badges.js).
   - Im Ruhezustand zieht alle paar Sekunden ein heller Glanz über den Knopf — ruhig, aber sichtbar. */
html.comic .ico em.fusebadge::after { content: none; }
html.comic .ico em.fusebadge.pop { animation: cxBadgePop .7s ease-out; }
@keyframes cxBadgePop {
    0% { transform: scale(.3); }
    45% { transform: scale(1.35); }
    70% { transform: scale(.9); }
    100% { transform: scale(1); }
}
html.comic #bar .ico:has(em.fusebadge)::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 8px;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%; background-position: 160% 0;
    animation: cxSheen 4s ease-in-out infinite;
}
@keyframes cxSheen {
    0%, 72% { background-position: 160% 0; }
    100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
    html.comic .ico em.fusebadge.pop, html.comic #bar .ico:has(em.fusebadge)::after { animation: none; }
}

/* ══ Handy-Layout aufgeräumt (06.11., Jens) ══
   Kosmetik und Menü sind selten gebraucht → runde Knöpfe rechts am Spielfeldrand.
   Unten bleiben 5 Hauptknöpfe. Hochkant: Kampf/Abbau als Schalter IN der Spielerkapsel. */
@media (max-width: 760px) and (orientation: portrait), (orientation: landscape) and (max-height: 540px) {
    html.comic #bar-icons { position: static; }
    html.comic #bar-icons .ico:is([data-win="shop"], [data-win="menu"]) {
        position: absolute; right: 0; width: 56px; height: 56px; aspect-ratio: auto;
        border-width: 7px; border-image-width: 7px; padding: 0;
    }
    html.comic #bar-icons .ico[data-win="shop"] { bottom: calc(100% + 120px); }
    html.comic #bar-icons .ico[data-win="menu"] { bottom: calc(100% + 186px); }
    html.comic #bar-icons .ico:is([data-win="shop"], [data-win="menu"]) .ico-img { width: 30px; height: 30px; }
    html.comic #bar-icons .ico:is([data-win="shop"], [data-win="menu"]) span { font-size: 9px; }
}
@media (max-width: 760px) and (orientation: portrait) {
    html.comic #bar {
        display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
        grid-template-areas: "char" "icons";
    }
    html.comic #bar-char { grid-area: char; padding-right: 84px; }
    /* Kampf/Abbau rechts in der Kapsel, übereinander */
    html.comic #auto-pair {
        grid-area: char; justify-self: end; align-self: center; z-index: 2;
        display: flex; flex-direction: column; gap: 6px; margin-right: 26px;
    }
    html.comic #auto-pair .ico.auto {
        flex: none; width: 80px; height: auto; aspect-ratio: auto; flex-direction: row; gap: 2px; justify-content: flex-start;
        border-width: 6px; border-image-width: 6px; padding: 1px 2px;
    }
    html.comic #auto-pair .ico.auto .ico-img { width: 20px; height: 20px; }
    html.comic #auto-pair .ico.auto span { font-size: 11px; overflow: visible; }
    html.comic #bar-icons { grid-area: icons; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; gap: 6px; }
    html.comic #bar-icons .ico:not([data-win="shop"]):not([data-win="menu"]) { aspect-ratio: 1 / 0.95; }
}
/* Handy quer: Knöpfe liefen rechts aus dem Bild (Screenshot Jens 06.11.) → kleiner und schrumpfbar */
@media (orientation: landscape) and (max-height: 540px) {
    html.comic #bar { --cx-btn: clamp(52px, 15vh, 74px); width: auto; max-width: none; }
    html.comic #bar-icons { flex: 1 1 auto; min-width: 0; grid-auto-flow: column; grid-auto-columns: minmax(0, var(--cx-btn)); gap: 6px; }
    html.comic #auto-pair { flex: none; display: flex; gap: 6px; }
    html.comic #auto-pair .ico.auto { width: var(--cx-btn); flex: none; }
    html.comic #bar .ico { aspect-ratio: 1 / 0.92; }
    html.comic .ico-img { width: calc(var(--cx-btn) * 0.46); height: calc(var(--cx-btn) * 0.46); }
    html.comic #bar .ico span { font-size: 10px; }
    html.comic #bar-icons .ico:is([data-win="shop"], [data-win="menu"]) { width: 48px; height: 48px; }
    /* Wie hochkant (Jens 06.11. abends): Menü und Kosmetik unten rechts in der Reihe der
       Fähigkeiten statt oben am Rand; Beschriftung klein genug für den runden Knopf. */
    html.comic #bar-icons .ico[data-win="shop"] { bottom: calc(100% + 8px); right: 0; }
    html.comic #bar-icons .ico[data-win="menu"] { bottom: calc(100% + 8px); right: 54px; }
    html.comic #bar-icons .ico:is([data-win="shop"], [data-win="menu"]) span { font-size: 8px; letter-spacing: 0; }
}

/* ── Story-Fenster im Comic-Stil (06.11.): Porträt im Knopfrahmen, Textfeld im Fensterrahmen,
   Name als Kapsel. Grundregeln baut ui/story.js selbst ein; html.comic gewinnt per Gewichtung. */
html.comic #story-por { box-shadow: none !important;
    border: .32em solid transparent; border-radius: 0; overflow: visible;
    border-image: url(../art_comic/ui/frame_button.png) 54 fill / .32em stretch;
    background: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .45));
}
html.comic #story-por img { border-radius: .45em; background: radial-gradient(circle at 50% 35%, #2c5fc8, #0e1d55 75%); object-fit: cover; }
html.comic #story-box {
    border: 1.1em solid transparent; border-radius: 0; box-shadow: none; background: none;
    border-image: url(../art_comic/ui/frame_window.png) 84 fill / 1.1em stretch;
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .45)); padding: 1.2em .8em .5em;
}
html.comic #story-box.narr { background: none; }
html.comic #story-txt { color: #eef5ff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
html.comic #story-name { left: 1em; transform: translate(0, 50%);   /* lange Namen liefen am Handy links raus */
   
    font-family: var(--sk-disp); font-weight: 400; letter-spacing: .06em; color: #fff; text-shadow: var(--cx-stroke-s);
    background: none !important; box-shadow: none; border-radius: 0;
    border: .55em solid transparent; border-width: .55em 1.3em; padding: 0 .3em .1em;
    border-image: url(../art_comic/ui/frame_capsule.png) 69 125 fill / .55em 1.3em stretch;
}
html.comic #story-next { color: #bcd2f0; font-family: var(--sk-disp); letter-spacing: .04em; }

/* Hochkant (06.11., Screenshot Jens): Menü/Kosmetik oben rechts unter den Geld-Kapseln statt
   mitten im Kampf; Fähigkeiten-Kacheln kleiner. Der Boden sitzt jetzt über den Kacheln (stage/index.js). */
@media (max-width: 760px) and (orientation: portrait) {
    html.comic #bar-icons .ico:is([data-win="shop"], [data-win="menu"]) {
        position: fixed; bottom: auto; right: calc(10px + env(safe-area-inset-right, 0px)); width: 50px; height: 50px;
    }
    html.comic #bar-icons .ico[data-win="menu"] { top: calc(58px + env(safe-area-inset-top, 0px)); }
    html.comic #bar-icons .ico[data-win="shop"] { top: calc(116px + env(safe-area-inset-top, 0px)); }
    html.comic #bar-icons .ico:is([data-win="shop"], [data-win="menu"]) .ico-img { width: 26px; height: 26px; }
    html.comic #bar-icons .ico:is([data-win="shop"], [data-win="menu"]) span { font-size: 8px; }
    html.comic #buffbar .sk { width: 48px; height: 48px; border-radius: 12px; }
    html.comic #buffbar .sk-n { font-size: 20px; }
    html.comic #buffbar { gap: 6px; }
}
@media (orientation: landscape) and (max-height: 540px) {
    /* Quer ist die Höhe knapp: Fähigkeiten-Kacheln kleiner, damit sie weniger vom Kampf verdecken */
    html.comic #buffbar .sk { width: 44px; height: 44px; border-radius: 11px; border-width: 2px; }
    html.comic #buffbar .sk-n { font-size: 18px; }
    html.comic #buffbar { gap: 6px; }
}

/* Hochkant (06.11., Jens): In der Bildmitte oben sitzt bei vielen Handys die Kamera — sie lag
   genau auf „Mio". Geldanzeige nach rechts in zwei Reihen (Credits oben, Exos + Schlüssel darunter),
   die Mitte oben bleibt frei. Ortsschild, Auftrag und Menü/Kosmetik rücken darunter. */
@media (max-width: 760px) and (orientation: portrait) {
    html.comic #wallet {
        left: auto; right: calc(10px + env(safe-area-inset-right, 0px));
        max-width: 46vw; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; column-gap: 6px;
    }
    html.comic #place { top: calc(100px + env(safe-area-inset-top, 0px)); }
    html.comic #quest { top: calc(212px + env(safe-area-inset-top, 0px)); }
    html.comic #bar-icons .ico[data-win="menu"] { top: calc(100px + env(safe-area-inset-top, 0px)); }
    html.comic #bar-icons .ico[data-win="shop"] { top: calc(158px + env(safe-area-inset-top, 0px)); }
}

/* ══ Hochkant-Kopf neu (06.11., Jens): Ort und Dauerauftrag als zwei schmale Leisten oben links,
   Geld oben rechts, die Mitte (Kamera) frei. Menü/Kosmetik unten in der Reihe der Fähigkeiten
   rechts — dort war Platz. Ersetzt die Plätze aus den Blöcken oben. ══ */
@media (max-width: 760px) and (orientation: portrait) {
    html.comic #place {
        top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px));
        transform: none; width: 42vw; min-width: 0; max-width: 42vw; padding: 0 6px 3px;
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 6px; text-align: left;
    }
    html.comic #place-name { font-size: 12px; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.comic #place-prog { font-size: 10px; margin: 0; color: #cfe6ff; }
    html.comic #place .pbar, html.comic #place #boss-climb { grid-column: 1 / -1; }
    html.comic #place .pbar { height: 7px; border-width: 2px; margin-top: 2px; }
    html.comic #quest {
        top: calc(62px + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px));
        width: 42vw; min-width: 0; max-width: 42vw; padding: 0 6px 3px;
    }
    html.comic #quest:not(.open) .q-title { display: block; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.comic #quest .q-prog { font-size: 11px; }
    html.comic #quest .q-bar { height: 6px; margin-top: 2px; }
    html.comic #quest.open .q-title { white-space: normal; }

    html.comic #bar-icons .ico:is([data-win="shop"], [data-win="menu"]) {
        position: absolute; top: auto; bottom: calc(100% + 8px); width: 48px; height: 48px;
    }
    html.comic #bar-icons .ico[data-win="shop"] { top: auto; right: 0; }
    html.comic #bar-icons .ico[data-win="menu"] { top: auto; right: 54px; }
}

/* Zahlen in den Spieler-Balken (06.11., Jens: „sehen doof aus"): Am Handy brach „2.193 / 2.193"
   in zwei Zeilen um — die zweite verschwand im Balken. Jetzt: nie umbrechen, Schrift passend zur
   Balkenhöhe, dünne Kontur (die dicke verschmierte die kleinen Ziffern), Glanz zurückhaltender. */
html.comic #bar-char .pbar > span {
    white-space: nowrap; overflow: hidden; z-index: 2;
    font-size: 13px; letter-spacing: .4px; text-shadow: var(--cx-stroke-s);
}
html.comic #bar-char .pbar.xp > span { font-size: 11px; }
html.comic #bar-char .pbar > i::before { left: 9px; right: 9px; background: rgba(255, 255, 255, .3); }
@media (min-width: 761px) {
    html.comic #bar-char .pbar > span { font-size: clamp(13px, 0.75vw, 18px); }
    html.comic #bar-char .pbar.xp > span { font-size: clamp(11px, 0.65vw, 15px); }
}
@media (max-width: 760px) and (orientation: portrait) {
    html.comic #bar-char .pbar { height: 20px; }
    html.comic #bar-char .pbar.xp { height: 16px; }
    html.comic #bar-char .pbar > span { font-size: 12px; }
    html.comic #bar-char .pbar.xp > span { font-size: 10px; }
}
@media (orientation: landscape) and (max-height: 540px) {
    html.comic #bar-char .pbar > span { font-size: 10px; letter-spacing: .2px; }
    html.comic #bar-char .pbar.xp > span { font-size: 9px; }
}

/* Handy-Leistung (06.11., Jens: FPS-Einbrüche): filter: drop-shadow muss bei JEDER Änderung im
   Inneren neu gerechnet werden — die Lebens-/Energiezahlen ändern sich ständig, der Glanz über den
   Knöpfen läuft dauernd. Am Handy deshalb einfacher Kastenschatten statt Filter (gleiche Optik). */
@media (max-width: 760px) and (orientation: portrait), (orientation: landscape) and (max-height: 540px) {
    html.comic :is(#bar-char, #bar .ico, #bar .ico:hover, #bar .ico:active, #place, .hud-panel, #wallet .wal, #buffbar .sk) { filter: none; }
    html.comic #bar-char { border-radius: 999px; box-shadow: 0 4px 0 rgba(0, 0, 0, .38); }
    html.comic #bar .ico { border-radius: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, .38); }
    html.comic :is(#place, .hud-panel) { border-radius: 10px; box-shadow: 0 4px 0 rgba(0, 0, 0, .38); }
    html.comic #wallet .wal { border-radius: 999px; box-shadow: 0 3px 0 rgba(0, 0, 0, .38); }
}

/* Comic-Symbole in der Geldanzeige (06.11.): Bild per content:url() tauschen — kein JS nötig.
   Codeschlüssel fertig; Exo und Credit folgen, sobald Jens die Bilder gewählt hat. */
html.comic #wallet .wal:first-child .wal-ico { content: url(../art_comic/ui/ico_credit.png); image-rendering: auto; }   /* Credit-Chip */
html.comic #wal-keys .wal-ico { content: url(../art_comic/ui/ico_key.png); width: 30px; height: 30px; image-rendering: auto; }

/* Geldanzeige wirkte reingepresst (06.11., Jens, großer Monitor): mehr Luft in der Kapsel und
   auf großen Schirmen wächst alles mit (Rahmen, Schrift, Symbol). */
html.comic #wallet .wal { padding: 1px 8px 2px; gap: 8px; }
@media (min-width: 1201px) {
    html.comic #wallet { gap: clamp(10px, .8vw, 20px); }
    html.comic #wallet .wal {
        border-width: clamp(9px, .65vw, 16px) clamp(20px, 1.45vw, 34px);
        border-image-width: clamp(9px, .65vw, 16px) clamp(20px, 1.45vw, 34px);
        padding: clamp(2px, .2vw, 6px) clamp(8px, .6vw, 16px); gap: clamp(8px, .5vw, 14px);
    }
    html.comic #wallet .wal b { font-size: clamp(18px, 1.15vw, 30px); }
    html.comic #wallet .wal :is(.wal-ico, .wal-gem) { width: clamp(24px, 1.6vw, 40px); height: clamp(24px, 1.6vw, 40px); }
}
/* Exo-Symbol (06.11.): das Schriftzeichen ◆ wird im Comic-Modus zum gemalten Kristall —
   überall, wo .wal-gem steht (Geldanzeige, Exo-Laden). */
html.comic .wal-gem {
    display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.25em;
    font-size: inherit; color: transparent; text-shadow: none; overflow: hidden;
    background: url(../art_comic/ui/ico_exo.png) center / contain no-repeat;
}
html.comic #wallet .wal .wal-gem { width: 28px; height: 28px; font-size: 0; }
@media (min-width: 1201px) {
    html.comic #wallet .wal .wal-gem { width: clamp(26px, 1.7vw, 42px); height: clamp(26px, 1.7vw, 42px); }
}

/* Willkommen am Handy (06.11., Screenshot Jens):
   - Die schmale orange Scrollleiste sah am Touch-Schirm wie ein Fehler im Rahmen aus → dort ausgeblendet
     (gewischt wird sowieso), am PC mit Maus bleibt sie.
   - Lange Namen („Behelfshandschuhe") liefen aus der Kachel → umbrechen statt abschneiden. */
@media (pointer: coarse) {
    html.comic :is(#win-body, #wc-body) { scrollbar-width: none; }
    html.comic :is(#win-body, #wc-body)::-webkit-scrollbar { display: none; }
}
html.comic #welcome .wc-chip { max-width: 112px; }
html.comic #welcome .wc-chip span { overflow-wrap: anywhere; hyphens: auto; }
/* Hochkant: mit der neuen Luft passten Exos + Schlüssel nicht mehr zusammen in Reihe 2
   (drei Reihen, Screenshot Jens 06.11.) → dort etwas knapper und breiter erlaubt. */
@media (max-width: 760px) and (orientation: portrait) {
    html.comic #wallet { max-width: 50vw; }
    /* Am Handy so klein wie vorher (Jens 06.11.): nur am großen Monitor wächst die Geldanzeige */
    html.comic #wallet .wal { padding: 0 2px; gap: 4px; }
    html.comic #wallet .wal :is(.wal-ico, .wal-gem), html.comic #wal-keys .wal-ico, html.comic #wallet .wal .wal-gem { width: 22px; height: 22px; }
}

/* ══ Begleiter-Fenster am Handy (06.11., Screenshots Jens) ══
   - Hinweis „Neues nur aus Bosskisten" ohne gelben Linksstreifen (Regel Jens: keine farbigen
     Streifen links) → als ruhige Karte.
   - Fließtext ohne die weite Sperrung der alten Schrift — passt zur Spielschrift.
   - Kacheln (Drohnen, Waffen, Bohrer) am Handy zu zweit nebeneinander statt halb breit untereinander. */
html.comic :is(#winbox, .win-frame) :is(.gear-rule, .chest-rule) {
    border: 2px solid rgba(140, 190, 255, .25); border-radius: 12px; background: rgba(10, 20, 70, .55);
}
html.comic :is(#winbox, .win-frame) :is(.sub, .line) { letter-spacing: .2px; }
@media (max-width: 760px) {
    html.comic :is(#winbox, .win-frame) .pets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    html.comic :is(#winbox, .win-frame) .pets > :is(.pet, .skin) { width: auto; min-width: 0; max-width: none; }
}

/* Willkommen im Querformat am Handy (06.11., Jens: „ohne scrollen"): Die Höhe ist knapp —
   Zeilen kompakter, Beute als flache Kacheln (Symbol links, Zahl + Name rechts) in mehreren
   Spalten, WEITER flacher. Alles passt auf einen Schirm; wird es doch zu viel, scrollt nur der Innenraum. */
@media (orientation: landscape) and (max-height: 540px) {
    html.comic #welcome { padding-top: 22px; padding-bottom: 6px; }
    html.comic #welcome .win.win-frame { max-height: calc(100dvh - 30px); width: min(92vw, 860px); padding-top: 14px; }
    html.comic #welcome .sub { font-size: 15px; margin: 0 0 2px; }
    html.comic #welcome .wc-line { font-size: 13px; line-height: 1.3; margin: 0; padding: 2px 0 2px 20px; }
    html.comic #welcome .wc-sec { font-size: 12px; margin: 2px 0 0 !important; }
    html.comic #welcome .wc-line.warn { font-size: 12px; }
    html.comic #welcome .wc-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px;
        margin: 4px 0 6px; max-height: none;
    }
    html.comic #welcome .wc-chip {
        display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto;
        column-gap: 6px; align-items: center; text-align: left;
        min-width: 0; max-width: none; padding: 4px 6px;
    }
    html.comic #welcome .wc-chip img, html.comic #welcome .wc-chip .g { grid-row: 1 / span 2; width: 26px; height: 26px; }
    html.comic #welcome .wc-chip b { margin: 0; font-size: 14px; line-height: 1.1; }
    html.comic #welcome .wc-chip span { margin: 0; font-size: 10px; line-height: 1.15; text-align: left;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.comic #welcome #wc-ok { margin-top: 4px; padding: 6px 18px; font-size: 17px; }
}

/* ── Auftragsleiste rechts (widgets/orderTrack.js) im Comic-Stil (07.11.2026, Fund Jens am Tablet:
   „das Design von den Aufträgen rechts am Rand“). Kopf als Kapsel wie der Geldbeutel, Zeilen als
   Comic-Karten wie in den Fenstern. Offen = roter Schein, fertig = grüner Schein mit Haken. ── */
html.comic #ordertrack { gap: 7px; padding: 2px 4px 6px; width: min(270px, 46vw); }
html.comic #ordertrack .ot-head {
    border: 8px solid transparent; border-width: 8px 18px; border-radius: 0;
    border-image: url(../art_comic/ui/frame_capsule.png) 69 125 fill / 8px 18px stretch;
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
    padding: 1px 2px; font: 400 15px var(--sk-disp); color: #fff; text-shadow: var(--cx-stroke); white-space: nowrap;
}
html.comic #ordertrack .ot-head .ot-cnt { color: #ffd447; text-shadow: var(--cx-stroke); }
html.comic #ordertrack .ot-head .ot-rdy { color: #7ff0a4; text-shadow: var(--cx-stroke); }
html.comic #ordertrack .ot-head .ot-chev { text-shadow: var(--cx-stroke); opacity: 1; }
html.comic #ordertrack :is(.ot-row, .ot-warn) {
    background: linear-gradient(#1d3a8a, #0e1d55); border: 3px solid var(--cx-navy); border-radius: 14px;
    box-shadow: inset 0 2px 0 rgba(140, 210, 255, .35), inset 0 0 0 2px #ff6e50, 0 3px 0 rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.comic #ordertrack .ot-row { padding: 6px 10px 7px 6px; }
html.comic #ordertrack .ot-row.rdy {
    border: 3px solid var(--cx-navy); padding: 6px 10px 7px 6px;
    box-shadow: inset 0 2px 0 rgba(140, 210, 255, .35), inset 0 0 0 2px #4fd283, 0 3px 0 rgba(0, 0, 0, .45), 0 0 12px rgba(79, 210, 131, .45);
}
html.comic #ordertrack .ot-row[data-item]:hover { border-color: var(--cx-navy); filter: brightness(1.12); }
html.comic #ordertrack .ot-ico {
    width: 36px; height: 36px; border-radius: 10px; background: #0a1238;
    box-shadow: inset 0 0 0 2px var(--cx-navy), inset 0 2px 0 rgba(140, 210, 255, .25);
}
html.comic #ordertrack .ot-ico img, html.comic #ordertrack .ot-ico .mat-ico { width: 28px; height: 28px; image-rendering: auto; }
html.comic #ordertrack .ot-name { font: 400 15px var(--sk-disp); color: #fff; text-shadow: var(--cx-stroke-s); }
html.comic #ordertrack .ot-n { color: #c8d6ff; text-shadow: var(--cx-stroke-s); }
html.comic #ordertrack .ot-cnt { font: 400 15px var(--sk-disp); color: #ffb08f; text-shadow: var(--cx-stroke-s); }
html.comic #ordertrack .ot-cnt small { color: #c8d6ff; }
html.comic #ordertrack .ot-row.rdy .ot-cnt { color: #8ff5b4; }
html.comic #ordertrack .ot-bar { height: 9px; margin-top: 5px; border-radius: 6px; border: 2px solid var(--cx-navy); background: #141a46; }
html.comic #ordertrack .ot-bar > i { border-radius: 4px; }
html.comic #ordertrack .ot-src { color: #b9c8f5; }
html.comic #ordertrack .ot-ok { border: 2px solid var(--cx-navy); }
html.comic #ordertrack .ot-warn { color: #fff; text-shadow: var(--cx-stroke-s); box-shadow: inset 0 0 0 2px #ffcc55, 0 3px 0 rgba(0, 0, 0, .45); }
html.comic #ordertrack .ot-give {
    font: 400 15px var(--sk-disp); color: #fff; text-shadow: var(--cx-stroke-s);
    background: linear-gradient(#7af0a8, #2fbf6a 55%, #1f9a52); border: 3px solid var(--cx-navy); border-radius: 14px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 3px 0 rgba(0, 0, 0, .45);
}
html.comic #ordertrack .ot-give:disabled { background: linear-gradient(#3b5a8f, #24386b); color: #c8d6ff; }
@media (max-width: 760px) and (orientation: portrait), (orientation: landscape) and (max-height: 540px) {
    html.comic #ordertrack .ot-head { border-width: 6px 12px; border-image-width: 6px 12px; font-size: 12.5px; }
    html.comic #ordertrack .ot-name, html.comic #ordertrack .ot-cnt { font-size: 13.5px; }
}

/* ── Login-Kalender (windows/login.js) im Comic-Stil: Kacheln wie die Karten in den Fenstern ── */
html.comic .lg-tile { background: linear-gradient(#1d3a8a, #0e1d55); border: 3px solid var(--cx-navy); border-radius: 14px;
    box-shadow: inset 0 2px 0 rgba(140, 210, 255, .35), 0 3px 0 rgba(0, 0, 0, .45); }
html.comic .lg-tile.bonus { background: linear-gradient(#7a3fd0, #3a1880); }
html.comic .lg-tile.today { box-shadow: inset 0 2px 0 rgba(255, 240, 180, .5), inset 0 0 0 3px #ffd447, 0 3px 0 rgba(0, 0, 0, .45), 0 0 16px rgba(255, 212, 71, .7); }
html.comic .lg-tile.next { border-style: solid; box-shadow: inset 0 2px 0 rgba(140, 210, 255, .35), inset 0 0 0 2px rgba(255, 212, 71, .6), 0 3px 0 rgba(0, 0, 0, .45); }
html.comic .lg-amt { font-size: 18px; text-shadow: var(--cx-stroke); }
html.comic .lg-day, html.comic .lg-name { color: #d2dcff; text-shadow: var(--cx-stroke-s); }
html.comic .lg-tick { border: 2px solid var(--cx-navy); text-shadow: var(--cx-stroke-s); }
html.comic .lg-bar { border: 3px solid var(--cx-navy); box-shadow: none; background: #141a46; height: 24px; }
html.comic .lg-bar > span { font-size: 14px; text-shadow: var(--cx-stroke); }
html.comic .lg-range { color: #d2dcff; text-shadow: var(--cx-stroke-s); }

/* ── Karte (windows/map.js) im Comic-Stil: Punkte als glänzende Knöpfe mit dunkler Kontur,
   Namen auf Comic-Schildern. Die Wege zeichnet map.js (travelPath). ── */
html.comic .node i {
    width: 28px; height: 28px; border: 3px solid var(--cx-navy); border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0 18%, #9ff2ff 30%, #22b8ee 65%, #0f6fc4 100%);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 12px 2px rgba(57, 215, 255, .55);
}
html.comic .node.base i, html.comic .node.here i {
    background: radial-gradient(circle at 35% 30%, #ffffff 0 18%, #ffe98a 30%, #ffb52e 65%, #e0701a 100%);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 14px 3px rgba(255, 196, 70, .7);
}
html.comic .node.locked i {
    width: 22px; height: 22px; background: radial-gradient(circle at 35% 30%, #c9d2e6 0 15%, #6f7d99 45%, #3d4766 100%);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
html.comic .node.unknown i { width: 16px; height: 16px; border-width: 2px; opacity: .9; }
html.comic .node.side i { width: 22px; height: 22px; }
html.comic .node b {
    font: 400 15px var(--sk-disp); letter-spacing: .4px; color: #fff; text-shadow: var(--cx-stroke-s);
    background: linear-gradient(#1d3a8a, #0e1d55); border: 3px solid var(--cx-navy); border-radius: 10px;
    padding: 1px 9px 2px; box-shadow: inset 0 2px 0 rgba(140, 210, 255, .35), 0 3px 0 rgba(0, 0, 0, .45);
}
html.comic .node:hover b { filter: brightness(1.15); }
html.comic .node.here b { color: #fff; background: linear-gradient(#ffd06a, #ff9a2e 55%, #f0701e); border-color: var(--cx-navy);
    box-shadow: inset 0 2px 0 rgba(255, 240, 200, .6), 0 3px 0 rgba(0, 0, 0, .45); }
html.comic .node.locked b { color: #c8d2e8; background: linear-gradient(#3b4566, #262d48); }
html.comic .node.side b { font-size: 13px; }
html.comic .node em.need { font: 600 11px var(--sk-body); color: #d2dcff; background: #141a46; border: 2px solid var(--cx-navy); border-radius: 8px; }
html.comic .map-legend { font: 400 15px var(--sk-disp); color: #fff; text-shadow: var(--cx-stroke-s); }
html.comic .map-legend .lg { width: 16px; height: 16px; border: 2px solid var(--cx-navy); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
html.comic .map-legend .lg.here { background: radial-gradient(circle at 35% 30%, #fff 0 18%, #ffe98a 30%, #ffb52e 65%, #e0701a 100%); }
html.comic .map-legend .lg.open { background: radial-gradient(circle at 35% 30%, #fff 0 18%, #9ff2ff 30%, #22b8ee 65%, #0f6fc4 100%); }
html.comic .map-legend .lg.locked { background: radial-gradient(circle at 35% 30%, #c9d2e6 0 15%, #6f7d99 45%, #3d4766 100%); }
/* Boss-Zeichen der Karte im Comic-Stil (art_comic/ui/boss_marker.png): glatt skaliert, Comic-Schatten. */
html.comic .node em.skull img, html.comic .map-legend .lg-skull img { image-rendering: auto; }
html.comic .node em.skull.img { width: 40px; height: 40px; top: -24px; }
html.comic .node em.skull.img img { width: 40px; height: 40px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45)); }
html.comic .map-legend .lg-skull.img, html.comic .map-legend .lg-skull.img img { width: 24px; height: 24px; }