/* ── Arena (Webgame 02 „Cuby", v9.1) ───────────────────────────
   Modal + Spielfeld-HUD + Upgrade-Karten + Apps-Karten-Visual.
   Wird mit dem Apps-Bundle (theme-apps.css) nur auf /apps/ geladen —
   das Modal existiert ausschließlich auf der Apps-Übersicht.
   Brutalistisch wie der Rest: harte Kanten, kein border-radius,
   Versalien im Display-Font, Offset-Schatten in Brand-Orange. */

body.mmf-rpg-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* In-Game-Scrollbalken in Cuby-Design-Language: dunkle Rinne, kantiger
   Glut-Daumen (kein Radius), passend zum Voxel/Brutalist-Look — statt der
   grauen System-Scrollbalken in Werkstatt, Bestenliste, Kodex, Skilltree. */
.mmf-rpg-modal {
    scrollbar-width: thin;                                   /* Firefox (vererbt an Scroll-Kinder) */
    scrollbar-color: #c8743c rgba(10, 7, 4, 0.55);
}
.mmf-rpg-modal ::-webkit-scrollbar { width: 10px; height: 10px; }
.mmf-rpg-modal ::-webkit-scrollbar-track {
    background: rgba(10, 7, 4, 0.55);
    box-shadow: inset 1px 0 0 rgba(255, 150, 60, 0.14);
}
.mmf-rpg-modal ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c8743c, #8f4a1e);
    border: 1px solid rgba(8, 5, 3, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 222, 175, 0.32);
}
.mmf-rpg-modal ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e88a44, #a8551f);
}
.mmf-rpg-modal ::-webkit-scrollbar-corner { background: transparent; }

.mmf-rpg-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.35rem, 1.4vw, 1.2rem);
}
.mmf-rpg-modal[hidden] { display: none; }

.mmf-rpg-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 5, 4, 0.88);
    opacity: 0;
    transition: opacity 0.3s var(--curve);
}
.mmf-rpg-modal.is-open .mmf-rpg-backdrop { opacity: 1; }

.mmf-rpg-panel {
    position: relative;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
    width: min(100%, 72rem);
    height: min(100%, calc(100vh - 0.7rem));
    height: min(100%, calc(100dvh - 0.7rem));
    max-height: calc(100vh - 0.7rem);
    max-height: calc(100dvh - 0.7rem);
    overflow: hidden;
    padding: clamp(0.45rem, 1.2vw, 0.9rem);
    /* Mute/Close leben ÜBER der Stage, nicht darüber geschwebt: sonst
       deckt das × den HUD-Pause-Button und tote Touch-Zonen liegen
       mitten im Spielfeld (Tap auf Pause = Spiel zu, zweimal passiert). */
    padding-top: 3.75rem;
    text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mm-black) 90%, var(--mm-white) 10%), #0d0a06);
    border: 1px solid rgba(245, 240, 226, 0.14);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    color: var(--mm-cream, #f5f0e2);
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: transform 0.35s var(--curve), opacity 0.35s var(--curve);
}
.mmf-rpg-modal.is-open .mmf-rpg-panel {
    transform: none;
    opacity: 1;
}

.mmf-rpg-close,
.mmf-rpg-mute {
    position: absolute;
    top: 0.85rem;
    width: 2.6rem;
    height: 2.6rem;
    z-index: 5;
    display: grid;
    place-items: center;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid currentColor;
    background: transparent;
    color: var(--mm-cream, #f5f0e2);
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s var(--curve), color 0.18s var(--curve);
}
.mmf-rpg-close { right: 0.85rem; font-size: 1.5rem; }
.mmf-rpg-mute { left: 0.85rem; }
.mmf-rpg-close:hover,
.mmf-rpg-close:focus-visible,
.mmf-rpg-mute:hover,
.mmf-rpg-mute:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #000;
    outline: none;
}
.mmf-rpg-mute .mmf-rpg-mute-slash { opacity: 0; transition: opacity 0.15s var(--curve); }
.mmf-rpg-mute.is-muted .mmf-rpg-mute-slash { opacity: 1; }
.mmf-rpg-mute.is-muted .mmf-rpg-mute-wave { opacity: 0.25; }

.mmf-rpg-head {
    padding: 0 3.4rem;
}
.mmf-rpg-title {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    line-height: 0.95;
    margin: 0 0 0.35rem;
}
.mmf-rpg-intro {
    margin: 0 auto 0.9rem;
    max-width: 42rem;
    font-size: clamp(0.85rem, 1.6vw, 0.98rem);
    line-height: 1.5;
    color: rgba(245, 240, 226, 0.7);
}

/* ── Spielfeld ── */
.mmf-rpg-stage-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: clamp(22rem, 78vh, 46rem);
    border: 2px solid rgba(245, 240, 226, 0.18);
    background: #14110d;
    overflow: hidden;
    contain: layout paint size;
}

.mmf-rpg-modal.is-fullscreen-game-mode {
    display: block;
    padding: 0;
    background: #14110d;
}
.mmf-rpg-modal.is-fullscreen-game-mode .mmf-rpg-backdrop {
    display: none;
}
.mmf-rpg-modal.is-fullscreen-game-mode .mmf-rpg-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    max-height: none;
    padding: 0;
    border: 0;
    background: #14110d;
    box-shadow: none;
    transform: none;
    opacity: 1;
    transition: none;
}
.mmf-rpg-modal.is-fullscreen-game-mode .mmf-rpg-stage-wrap {
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #14110d;
}
.mmf-rpg-modal.is-fullscreen-game-mode .mmf-rpg-loader {
    background: #14110d;
}
.mmf-rpg-modal.is-fullscreen-game-mode .mmf-rpg-close,
.mmf-rpg-modal.is-fullscreen-game-mode .mmf-rpg-mute {
    display: none;
}
.mmfr-stage {
    position: absolute;
    inset: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
.mmfr-stage.is-keyboard,
.mmfr-stage.is-keyboard * {
    cursor: none;
}
.mmfr-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    contain: strict;
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* Treffer-Vignette: kurzer roter Rand-Puls bei Spielerschaden */
.mmfr-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 0 rgba(200, 50, 28, 0);
    transition: box-shadow 0.16s ease-out;
}
.mmfr-stage.is-hurt::after {
    box-shadow: inset 0 0 60px 12px rgba(200, 50, 28, 0.55);
    transition: none;
}

.mmfr-nogl {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.9rem;
    color: rgba(245, 240, 226, 0.75);
}

/* ── HUD ── */
.mmfr-hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.25s var(--curve);
}
.mmfr-stage.is-menu .mmfr-hud {
    opacity: 0;
    visibility: hidden;
}
.mmfr-xpbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9px;
    background: rgba(245, 240, 226, 0.1);
    transform-origin: top center;
}
.mmfr-xpfill {
    position: absolute;
    inset: 0;
    /* Glut-Verlauf: dunkles Bernstein hinten → heißes Gold an der Füllspitze.
       Der 100%-Stopp landet nach scaleX exakt an der Vorderkante → die Spitze
       „glüht heiß", wo gerade XP dazukommt. */
    background: linear-gradient(90deg, #b8480f 0%, #ef7a1e 55%, #ffce7a 88%, #fff1cf 100%);
    transform-origin: left center;
    transform: scaleX(0);
    /* sanftes Nachlaufen → jedes eingesammelte Gem „füllt" spürbar nach */
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Pickup-Puls: die Leiste „thumpt" kurz dicker und glüht heller bei jedem Gem */
.mmfr-xpbar.is-pulse {
    background: rgba(255, 196, 96, 0.42);
    animation: mmfr-xp-thump 0.22s ease-out;
}
.mmfr-xpbar.is-pulse .mmfr-xpfill {
    filter: brightness(1.75) saturate(1.15);
}
@keyframes mmfr-xp-thump {
    0%   { transform: scaleY(1); }
    45%  { transform: scaleY(1.6); }
    100% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
    .mmfr-xpfill { transition: none; }
    .mmfr-xpbar.is-pulse { animation: none; }
}
.mmfr-topline {
    position: absolute;
    top: 14px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.mmfr-chip {
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    background: rgba(10, 8, 5, 0.72);
    border: 1px solid rgba(245, 240, 226, 0.22);
    color: var(--mm-cream, #f5f0e2);
}
.mmfr-chip--level { color: var(--color-primary); border-color: rgba(200, 82, 28, 0.6); }
.mmfr-chip--kills::before { content: "\00D7\2009"; opacity: 0.6; }

.mmfr-scorebox {
    position: absolute;
    top: 47px;
    left: 10px;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(4.6rem, auto) minmax(4.8rem, auto);
    align-items: baseline;
    column-gap: 0.7rem;
    min-height: 2.25rem;
    padding: 0.36rem 0.62rem 0.42rem;
    min-width: 12.6rem;
    max-width: min(52vw, 16rem);
    font-family: var(--font-mono, monospace);
    text-align: left;
    color: var(--mm-cream, #f5f0e2);
    background: rgba(10, 8, 5, 0.68);
    border: 1px solid rgba(245, 240, 226, 0.18);
    pointer-events: none;
    transition: border-color 0.16s var(--curve), background 0.16s var(--curve), transform 0.16s var(--curve);
}
.mmfr-scoreline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.42rem;
    min-width: 0;
}
.mmfr-scorelabel,
.mmfr-scorebest {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.48);
}
.mmfr-scorevalue {
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #ffd9a8;
}
.mmfr-scoregain {
    position: absolute;
    left: 0.62rem;
    bottom: -1.1rem;
    min-height: 0;
    font-size: 0.68rem;
    font-weight: 900;
    color: #8bdc74;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.16s var(--curve), transform 0.16s var(--curve);
}
.mmfr-scorebox.is-gaining {
    transform: translateY(-1px);
    border-color: rgba(139, 220, 116, 0.52);
    background: rgba(14, 12, 7, 0.74);
}
.mmfr-scorebox.is-gaining .mmfr-scoregain {
    opacity: 1;
    transform: none;
}
.mmfr-scorebox.is-best .mmfr-scorebest {
    color: #ffb347;
}

@media (min-width: 760px) {
    .mmfr-scorebox {
        top: 14px;
        left: calc(10px + 5.4rem);
        min-height: 0;
        height: 1.7rem;
        min-width: 13.8rem;
        max-width: min(31vw, 18rem);
        align-items: center;
        padding: 0 0.62rem;
    }
    .mmfr-scoregain {
        bottom: -0.95rem;
    }
}

.mmfr-topright {
    display: inline-flex;
    align-items: stretch;
    gap: 0.45rem;
}
/* Pause/Fullscreen im HUD: Touch-Geräte haben kein Esc/P */
.mmfr-pausebtn,
.mmfr-fsbtn {
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 2.1rem;
    padding: 0.2rem 0.5rem;
    background: rgba(10, 8, 5, 0.72);
    border: 1px solid rgba(245, 240, 226, 0.22);
    cursor: pointer;
    transition: border-color 0.15s var(--curve);
}
.mmfr-fsbtn {
    position: relative;
    width: 2.1rem;
}
.mmfr-fsbtn::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background:
        linear-gradient(currentColor, currentColor) left top / 0.42rem 2px no-repeat,
        linear-gradient(currentColor, currentColor) left top / 2px 0.42rem no-repeat,
        linear-gradient(currentColor, currentColor) right top / 0.42rem 2px no-repeat,
        linear-gradient(currentColor, currentColor) right top / 2px 0.42rem no-repeat,
        linear-gradient(currentColor, currentColor) right bottom / 0.42rem 2px no-repeat,
        linear-gradient(currentColor, currentColor) right bottom / 2px 0.42rem no-repeat,
        linear-gradient(currentColor, currentColor) left bottom / 0.42rem 2px no-repeat,
        linear-gradient(currentColor, currentColor) left bottom / 2px 0.42rem no-repeat;
}
.mmfr-fsbtn[aria-pressed="true"]::before {
    transform: scale(0.86);
}
.mmfr-pausebtn i {
    display: block;
    width: 3px;
    height: 11px;
    background: var(--mm-cream, #f5f0e2);
}
.mmfr-pausebtn:hover,
.mmfr-pausebtn:focus-visible,
.mmfr-fsbtn:hover,
.mmfr-fsbtn:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.mmfr-bossbar {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    width: min(70%, 26rem);
    height: 10px;
    background: rgba(245, 240, 226, 0.12);
    border: 1px solid rgba(212, 67, 67, 0.7);
}
.mmfr-bossfill {
    position: absolute;
    inset: 0;
    background: #d44343;
    transform-origin: left center;
}
.mmfr-bossname {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    white-space: nowrap;
    color: #d44343;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.mmfr-boss-skills {
    position: absolute;
    top: calc(100% + 0.36rem);
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.24rem;
    transform: translateX(-50%);
    pointer-events: none;
}
.mmfr-boss-skills:empty { display: none; }
.mmfr-boss-skill-art {
    display: grid;
    place-items: center;
    width: 1.48rem;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(212, 67, 67, 0.76);
    background: rgba(10, 6, 5, 0.72);
    box-shadow: inset 0 0 12px rgba(212, 67, 67, 0.26), 0 0 9px rgba(212, 67, 67, 0.22);
    clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
.mmfr-boss-skill-art-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mmfr-hpbar {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: min(46%, 16rem);
    height: 12px;
    background: rgba(245, 240, 226, 0.12);
    border: 1px solid rgba(245, 240, 226, 0.25);
}
/* Schaden-Geist: blasser „verlorener" Chunk HINTER der Füllung. Schnappt
   beim Heilen mit, weicht bei Schaden träge zurück → der Treffer wird sichtbar. */
.mmfr-hphurt {
    position: absolute;
    inset: 0;
    background: rgba(255, 236, 212, 0.5);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.18s;
}
.mmfr-hpfill {
    position: absolute;
    inset: 0;
    background: #5fae57;
    transform-origin: left center;
    transition: transform 0.12s linear;
}
/* Unter 30 % HP: Leiste pocht (die Farbe setzt das JS graduiert grün→rot) */
.mmfr-hpbar.is-low .mmfr-hpfill {
    animation: mmfr-hp-pulse 0.8s ease-in-out infinite;
}
@keyframes mmfr-hp-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.7); }
}
@media (prefers-reduced-motion: reduce) {
    .mmfr-hpbar.is-low .mmfr-hpfill { animation: none; }
    .mmfr-hphurt { transition: none; }
}

.mmfr-banner {
    position: absolute;
    top: 26%;
    left: 0;
    right: 0;
    z-index: 3;
    margin: 0;
    padding: 0 1rem;
    pointer-events: none;
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.2rem, 4vw, 2.2rem);
    letter-spacing: 0.04em;
    color: #d44343;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.3s var(--curve), transform 0.3s var(--curve);
}
.mmfr-banner.is-on {
    opacity: 1;
    transform: none;
}

/* Floating-Joystick (nur sichtbar, solange ein Finger/Knopf unten ist) */
.mmfr-joy {
    position: absolute;
    z-index: 3;
    width: 112px;
    height: 112px;
    margin: -56px 0 0 -56px;
    pointer-events: none;
    border: 2px solid rgba(245, 240, 226, 0.3);
    border-radius: 50%;
    background: rgba(10, 8, 5, 0.25);
}
.mmfr-joy-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(200, 82, 28, 0.85);
    border: 2px solid rgba(245, 240, 226, 0.5);
    transform: translate(-50%, -50%);
}

/* Schwebende Schadenszahlen (DOM-Pool, projiziert) */
.mmfr-floats {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}
.mmfr-float {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Fredoka', var(--font-display), system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.06rem;
    letter-spacing: 0.01em;
    color: #ffd9a8;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.7);
    will-change: transform, opacity;
}

/* NPC-Ambient-Sprechblase (Cubetown): kleine gamey Blase mit Zipfel nach unten,
   Fredoka statt Systemschrift, warmes Panel wie die Dialogbox. */
.mmfr-npc-say {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    max-width: 15rem;
    padding: 6px 12px 7px;
    border: 2px solid #0b0805;
    border-radius: 13px;
    background: linear-gradient(#33261a, #1b1209);
    color: #f6eeda;
    font: 600 14px/1.3 'Fredoka', var(--font-display), system-ui, sans-serif;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 4px 0 #0b0805, 0 8px 18px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 236, 200, 0.14);
    transition: opacity 0.2s;
    will-change: transform, opacity;
    pointer-events: none;
}
.mmfr-npc-say::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: #1b1209;
    border-right: 2px solid #0b0805;
    border-bottom: 2px solid #0b0805;
}

.mmfr-npc-prompt {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.32rem 0.48rem 0.34rem;
    border: 2px solid #0f0c07;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(47, 37, 24, 0.96), rgba(23, 17, 10, 0.96));
    color: #f3e7cc;
    font: 800 0.72rem/1 var(--font-mono, monospace);
    letter-spacing: 0.02em;
    box-shadow: 0 4px 0 #0f0c07, 0 10px 22px rgba(0, 0, 0, 0.32);
    opacity: 0;
    filter: blur(2px);
    will-change: transform, opacity, filter;
    transition: opacity 220ms ease, filter 220ms ease;
    pointer-events: none;
    white-space: nowrap;
}
.mmfr-npc-prompt.is-on {
    opacity: 1;
    filter: blur(0);
}
.mmfr-npc-prompt__icon {
    position: relative;
    width: 1.08rem;
    height: 0.86rem;
    border: 2px solid #f0b35a;
    border-radius: 0.44rem;
    background: rgba(240, 179, 90, 0.14);
}
.mmfr-npc-prompt__icon::after {
    content: "";
    position: absolute;
    right: 0.05rem;
    bottom: -0.25rem;
    width: 0.34rem;
    height: 0.34rem;
    background: #f0b35a;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.mmfr-npc-prompt__key {
    min-width: 1.62rem;
    padding: 0.17rem 0.34rem 0.16rem;
    border-radius: 0.42rem;
    background: #f0b35a;
    color: #1a130a;
    text-align: center;
    box-shadow: inset 0 -2px 0 rgba(20, 16, 10, 0.22);
}

/* ── Overlays (Start / Level-Up / Pause / Ende) ── */
.mmfr-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(0.8rem, 3vw, 2rem);
    background: rgba(8, 6, 4, 0.78);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.mmfr-overlay[hidden] { display: none; }
/* Menü-Screens (Start/Werkstatt/Bestenliste/Optionen): kein durch-
   scheinendes Spielfeld, sondern eigener Boden — warmes Espresso-
   Schwarz mit Arena-Raster und Glut-Spot, passend zum Voxel-Look.
   Pause/Level-Up bleiben transluzent (da will man das Feld sehen). */
.mmf-rpg-modal .mmfr-stage.is-menu .mmfr-overlay {
    background:
        radial-gradient(ellipse 70% 48% at 50% 30%, rgba(200, 82, 28, 0.18), transparent 70%),
        repeating-linear-gradient(0deg, rgba(255, 145, 60, 0.055) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(255, 145, 60, 0.055) 0 1px, transparent 1px 28px),
        linear-gradient(180deg, #181208 0%, #100c07 55%, #0c0905 100%);
}
/* Startbildschirm (Attract-Modus): das Spielfeld lebt dahinter, der
   Scrim hält Logo (oben) und Buttons (unten) lesbar und lässt die Welt
   im Mittelband durchscheinen. Höhere Spezifität als .is-menu, daher
   greift sie genau hier statt der opaken Werkstatt-/Optionen-Fläche. */
.mmf-rpg-modal .mmfr-stage.is-menu.is-attract .mmfr-overlay {
    background:
        radial-gradient(ellipse 60% 42% at 50% 22%, rgba(200, 90, 30, 0.16), transparent 70%),
        radial-gradient(ellipse 80% 62% at 50% 46%, transparent 0%, rgba(8, 6, 4, 0.22) 56%, rgba(6, 4, 3, 0.52) 100%),
        linear-gradient(180deg, rgba(10, 7, 4, 0.7) 0%, rgba(10, 7, 4, 0.32) 25%, rgba(9, 6, 4, 0.24) 56%, rgba(7, 5, 3, 0.74) 100%);
}

.mmfr-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    max-width: 38rem;
    margin: auto;
}
.mmfr-screen-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    color: rgba(245, 240, 226, 0.7);
    background: rgba(16, 12, 8, 0.62);
    border: 1px solid rgba(245, 240, 226, 0.16);
    border-radius: 0.5rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.mmfr-screen-close:hover,
.mmfr-screen-close:focus-visible {
    color: #16240c;
    background: var(--color-primary);
    border-color: var(--color-primary);
    outline: none;
}
.mmfr-screen-close-x {
    font-size: 1.05rem;
    font-weight: 700;
}
@media (max-width: 480px) {
    .mmfr-screen-close {
        width: 2.5rem;
        height: 2.5rem;
    }
}
.mmfr-screen-kicker {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
}
/* mmfr-hero-bob: Wipp-Animation, weiterverwendet von der Kosmetik-
   Vorschau (.mmfr-cos-cube). Das frühere flache CSS-Maskottchen über
   dem Titel ist entfallen — im Hauptmenü rollt jetzt der echte 3D-Cuby
   durch die lebende Arena (Attract-Modus, _23a-arena-game.js). */
@keyframes mmfr-hero-bob {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(-4deg) translateY(-6px); }
}

/* ── Kosmetik-Live-Vorschau: CSS-Cuby spiegelt Farbe/Material/Hut ── */
.mmfr-cos-preview {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 4.6rem;
    margin: 0.2rem 0 0.9rem;
}
.mmfr-cos-cube {
    --cuby-col: rgb(232, 99, 28);
    position: relative;
    width: 2.9rem;
    aspect-ratio: 1;
    transform: rotate(-6deg);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.34) 100%),
        var(--cuby-col);
    box-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.28), 4px 4px 0 rgba(0, 0, 0, 0.24), 6px 6px 0 rgba(0, 0, 0, 0.2),
        8px 8px 0 rgba(0, 0, 0, 0.16), 11px 13px 14px rgba(0, 0, 0, 0.5);
    animation: mmfr-hero-bob 2.6s ease-in-out infinite;
}
.mmfr-cos-eye {
    position: absolute;
    top: 32%;
    width: 18%;
    height: 22%;
    background: #f7f1e4;
}
.mmfr-cos-eye:nth-of-type(2) { left: 24%; }
.mmfr-cos-eye:nth-of-type(3) { right: 24%; }
.mmfr-cos-eye::after {
    content: "";
    position: absolute;
    left: 50%; top: 54%;
    width: 56%; height: 56%;
    transform: translate(-50%, -50%);
    background: #1a0f08;
}
/* Material-Finish */
.mmfr-mat-metall { background: linear-gradient(150deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.05) 44%, rgba(0, 0, 0, 0.4) 100%), var(--cuby-col); }
.mmfr-mat-plastik::before {
    content: ""; position: absolute; left: 16%; top: 12%;
    width: 34%; height: 26%; border-radius: 50%;
    background: rgba(255, 255, 255, 0.6); filter: blur(1px);
}
.mmfr-mat-gummi { border-radius: 22%; }
.mmfr-mat-neon { box-shadow: 0 0 12px 2px var(--cuby-col), 2px 2px 0 rgba(0, 0, 0, 0.28), 4px 4px 0 rgba(0, 0, 0, 0.22), 11px 13px 14px rgba(0, 0, 0, 0.5); }
/* Farb-Chip im Swatch-Button */
.mmfr-cos-chip {
    display: inline-block;
    width: 0.72em; height: 0.72em;
    margin-right: 0.45em;
    vertical-align: -0.08em;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
/* Hüte (vereinfachte CSS-Silhouetten über dem Cuby) */
.mmfr-cos-hat { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: -0.2rem; width: 1.7rem; height: 1.2rem; pointer-events: none; }
.mmfr-hat-none { display: none; }
.mmfr-hat-kegel { background: linear-gradient(#e08aa0, #c25f7a); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mmfr-hat-kegel::after { content: ""; position: absolute; left: 50%; top: -0.16rem; transform: translateX(-50%); width: 0.3rem; height: 0.3rem; background: #ffe08a; border-radius: 50%; }
.mmfr-hat-helm { width: 1.7rem; height: 0.85rem; border-radius: 0.85rem 0.85rem 0 0; background: #8f9aa8; align-self: end; }
.mmfr-hat-antenne { width: 0.16rem; background: #6b6f78; }
.mmfr-hat-antenne::after { content: ""; position: absolute; left: 50%; top: -0.18rem; transform: translateX(-50%); width: 0.34rem; height: 0.34rem; background: #ff8c3c; border-radius: 50%; box-shadow: 0 0 6px #ff8c3c; }
.mmfr-hat-zylinder { width: 0.95rem; height: 1.05rem; background: #1d1b1f; border-bottom: 0.16rem solid #1d1b1f; }
.mmfr-hat-zylinder::before { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 1.7rem; height: 0.16rem; background: #1d1b1f; }
.mmfr-hat-krone { background: #f0b53c; clip-path: polygon(0 100%, 0 38%, 20% 70%, 40% 22%, 60% 70%, 80% 22%, 100% 70%, 100% 100%); }
.mmfr-hat-propeller::before { content: ""; position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); width: 1.7rem; height: 0.16rem; background: #7a818c; }
.mmfr-hat-propeller::after { content: ""; position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); width: 0.28rem; height: 0.28rem; background: #ff8c3c; border-radius: 50%; }
.mmfr-hat-blume::before { content: ""; position: absolute; left: 50%; bottom: 0.1rem; transform: translateX(-50%); width: 0.12rem; height: 0.9rem; background: #4f9a4a; }
.mmfr-hat-blume::after {
    content: ""; position: absolute; left: 50%; top: 0.1rem; transform: translateX(-50%);
    width: 0.3rem; height: 0.3rem; background: #ffd24a; border-radius: 50%;
    box-shadow: 0 -0.3rem 0 #ff7aa8, 0 0.3rem 0 #ff7aa8, -0.3rem 0 0 #ff7aa8, 0.3rem 0 0 #ff7aa8;
}
.mmfr-hat-kopfhoerer { width: 1.5rem; height: 0.8rem; border: 0.16rem solid #2a2c30; border-bottom: none; border-radius: 0.75rem 0.75rem 0 0; background: transparent; align-self: end; }
.mmfr-hat-kopfhoerer::before, .mmfr-hat-kopfhoerer::after { content: ""; position: absolute; bottom: -0.18rem; width: 0.3rem; height: 0.4rem; background: #c2492c; border-radius: 2px; }
.mmfr-hat-kopfhoerer::before { left: -0.18rem; }
.mmfr-hat-kopfhoerer::after { right: -0.18rem; }
.mmfr-hat-zauberhut { background: linear-gradient(#5a4f8f, #3a3168); clip-path: polygon(50% 0, 72% 100%, 28% 100%); height: 1.2rem; }
.mmfr-hat-zauberhut::before { content: ""; position: absolute; left: 50%; bottom: -0.02rem; transform: translateX(-50%); width: 1.7rem; height: 0.16rem; background: #3a3168; border-radius: 2px; }
.mmfr-hat-zauberhut::after { content: "✦"; position: absolute; left: 50%; top: 0.16rem; transform: translateX(-50%); color: #ffe08a; font-size: 0.5rem; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .mmfr-cos-cube { animation: none; } }

.mmfr-screen-title {
    margin: 0;
    max-width: 100%;
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.92;
    /* „DURCHGESTANDEN." (15 Zeichen × ~0.665em) muss bei JEDER Breite
       reinpassen: der vw-Teil deckt schmale Viewports (Text ≈ 52 % der
       Breite), der rem-Deckel hängt am rem-basierten 38rem-Screen
       (15 × 0.665 × 3.6rem ≈ 36rem < 38rem) — skaliert mit Root-Schrift */
    font-size: clamp(1.7rem, 5.2vw, 3.6rem);
    color: var(--mm-cream, #f5f0e2);
}
.mmfr-screen-title--small {
    font-size: clamp(1.5rem, 5vw, 2.4rem);
}
.mmfr-screen-tag {
    margin: 0;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: rgba(245, 240, 226, 0.85);
}
.mmfr-screen-copy {
    margin: 0;
    max-width: min(30rem, 100%);
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(245, 240, 226, 0.66);
}
/* Modus-Erklärung dicht unter dem jeweiligen Modus-Button */
.mmfr-mode-desc {
    margin: -0.45rem 0 0.8rem;
    max-width: 24rem;
    font-size: 0.74rem;
    line-height: 1.32;
    text-align: center;
    color: rgba(245, 240, 226, 0.62);
}
.mmfr-mode-desc--endless { color: rgba(232, 132, 110, 0.72); }
.mmfr-screen-best {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}
/* Bestwerte/Guthaben als drei kompakte Voxel-Chips nebeneinander: je ein
   Kurz-Label + die Zahl (Zeit/Level/Währung), kein Fließtext. Auf schmalen
   Schirmen brechen sie um. */
.mmfr-stat-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: min(100%, 27rem);
    margin: 0.2rem auto 0.3rem;
}
.mmfr-stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 4.6rem;
    padding: 0.1rem 0.7rem;
}
/* Dünner Trenner zwischen den Werten statt vier einzelner Kästchen → ein Block */
.mmfr-stat-chip + .mmfr-stat-chip { border-left: 1px solid rgba(255, 150, 60, 0.16); }
.mmfr-stat-chip-k {
    font-family: var(--font-mono, monospace);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 150, 60, 0.7);
}
.mmfr-stat-chip-v {
    display: flex;
    align-items: baseline;
    gap: 0.34rem;
    font-family: var(--font-mono, monospace);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffd9a8;
}
.mmfr-stat-chip-sub {
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: rgba(255, 200, 150, 0.6);
}
.mmfr-copy {
    margin: 0.6rem 0 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.35);
}
.mmfr-copy-link {
    color: rgba(255, 150, 60, 0.7);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 150, 60, 0.35);
    transition: color 0.15s var(--curve), border-color 0.15s var(--curve);
}
.mmfr-copy-link:hover,
.mmfr-copy-link:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
    outline: none;
}
/* Crash-Meldung: Fehlertext zum Abschicken (statt stiller Freeze) */
.mmfr-crash-msg {
    margin: 0;
    max-width: 100%;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    line-height: 1.45;
    color: rgba(255, 150, 100, 0.85);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 120, 60, 0.3);
    padding: 0.6rem 0.7rem;
    word-break: break-word;
    white-space: pre-wrap;
    user-select: all;
    -webkit-user-select: all;
}

.mmfr-btn {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 0.4rem;
    padding: 0.85rem 2.6rem;
    border: 3px solid var(--mm-cream, #f5f0e2);
    background: var(--color-primary);
    color: #0d0a06;
    cursor: pointer;
    box-shadow: 6px 6px 0 rgba(245, 240, 226, 0.25);
    transition: transform 0.15s var(--curve), box-shadow 0.15s var(--curve);
}
.mmfr-btn:hover,
.mmfr-btn:focus-visible {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 rgba(245, 240, 226, 0.35);
    outline: none;
}
.mmfr-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(245, 240, 226, 0.25);
}
.mmfr-btn-label {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
}

.mmfr-btn--ghost {
    background: transparent;
    color: var(--mm-cream, #f5f0e2);
    border-color: rgba(245, 240, 226, 0.5);
    box-shadow: 4px 4px 0 rgba(245, 240, 226, 0.15);
    padding: 0.7rem 1.6rem;
}
.mmfr-btn--ghost .mmfr-btn-label {
    font-size: 0.85rem;
}
.mmfr-btnrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem 1rem;
    margin-top: 0.3rem;
}
/* ── Hauptmenü: zwei Modi als Paar + kompakte Sekundär-Navigation ──
   Statt zweier großer gestapelter Buttons mit Fließtext stehen die Modi
   nebeneinander (auf Mobil gestapelt); die fünf Untermenüs liegen in einer
   gleichmäßigen Reihe statt im umbrechenden „4 + 1". */
.mmfr-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.9rem;
    width: 100%;
    align-items: start;
    margin: 0.2rem 0;
}
.mmfr-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.mmfr-mode .mmfr-btn {
    width: 100%;
    margin: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}
.mmfr-mode .mmfr-mode-desc {
    margin: 0.5rem 0 0;
    max-width: 100%;
}
@media (max-width: 30rem) {
    .mmfr-modes { grid-template-columns: 1fr; gap: 0.3rem 0; }
    .mmfr-mode .mmfr-mode-desc { margin-bottom: 0.4rem; }
}
.mmfr-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));   /* Desktop: eine saubere Reihe */
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.55rem;
}
.mmfr-nav .mmfr-btn {
    width: 100%;
    margin: 0;
    padding: 0.62rem 0.35rem;
}
.mmfr-nav .mmfr-btn-label {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}
/* Schmal: 2×2 + OPTIONEN als voller Abschluss-Riegel statt einsamem „+1" */
@media (max-width: 34rem) {
    .mmfr-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mmfr-nav .mmfr-btn:last-child { grid-column: 1 / -1; }
    .mmfr-nav .mmfr-btn-label { font-size: 0.78rem; }
}

.mmfr-screen--options {
    max-width: 44rem;
    gap: 0.72rem;
}
.mmfr-options-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 0.65rem;
    width: min(100%, 42rem);
}
.mmfr-options-section {
    display: flex;
    flex-direction: column;
    gap: 0.52rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid rgba(255, 150, 60, 0.24);
    background: rgba(10, 7, 4, 0.58);
    clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}
.mmfr-options-section--wide {
    grid-column: 1 / -1;
}
.mmfr-options-section--controls {
    justify-content: center;
}
.mmfr-options-section--controls .mmfr-btn {
    width: 100%;
    margin: 0;
}
.mmfr-options-heading {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.68);
}
.mmfr-options-help {
    display: block;
    width: min(100%, 42rem);
    padding: 0;
    overflow: hidden;
}
.mmfr-options-summary {
    cursor: pointer;
    padding: 0.72rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.78);
    list-style: none;
}
.mmfr-options-summary::-webkit-details-marker { display: none; }
.mmfr-options-summary::after {
    content: "+";
    float: right;
    color: var(--color-primary);
}
.mmfr-options-help[open] .mmfr-options-summary::after { content: "−"; }
.mmfr-options-help .mmfr-help-list {
    padding: 0 0.72rem 0.72rem;
}
@media (max-width: 40rem) {
    .mmfr-options-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Credits + Kunden-Hinweis (Ende der Optionen) ─────────────────────── */
.mmfr-credits {
    width: 100%;
    margin-top: 0.4rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(245, 240, 226, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;          /* alle Blöcke mittig — Steckbrief sitzt sonst verrutscht links */
    gap: 0.7rem;
}
.mmfr-credits-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    max-width: 100%;
}
.mmfr-credits-face {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 150, 60, 0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.mmfr-credits-who { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.mmfr-credits-kicker {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.mmfr-credits-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--mm-cream, #f5f0e2);
}
.mmfr-credits-by { margin: 0; font-size: 0.8rem; color: rgba(245, 240, 226, 0.7); }
.mmfr-credits-roles {
    margin: 0.1rem 0 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: rgba(245, 240, 226, 0.5);
}
.mmfr-credits-site {
    margin-top: 0.15rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    color: rgba(255, 150, 60, 0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 150, 60, 0.35);
    align-self: flex-start;
    transition: color 0.15s var(--curve), border-color 0.15s var(--curve);
}
.mmfr-credits-site:hover,
.mmfr-credits-site:focus-visible { color: var(--color-primary); border-color: var(--color-primary); outline: none; }
.mmfr-credits-pitch {
    margin: 0;
    max-width: 32rem;
    text-align: center;
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(245, 240, 226, 0.82);
}
.mmfr-credits-cta {
    align-self: center;
    text-decoration: none;
    margin: 0;
}
/* Kontakt-Button + dezenter „Kaffeekasse"-Link nebeneinander — eine
   Option von vielen, kein Druck. */
.mmfr-credits-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.1rem;
}
.mmfr-credits-tip {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(255, 150, 60, 0.68);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 150, 60, 0.28);
    transition: color 0.15s var(--curve), border-color 0.15s var(--curve);
}
.mmfr-credits-tip:hover,
.mmfr-credits-tip:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
    outline: none;
}
/* Container für Quality-/Diff-/Stil-Wahl — der Selektor war beim Credits-
   Einbau verloren gegangen (verwaiste Deklarationen), dadurch saßen die
   Wähler unzentriert. Wiederhergestellt. */
.mmfr-quality {
    display: grid;
    gap: 0.55rem;
    width: min(100%, 28rem);
    margin: 0.55rem auto 0.15rem;
}
.mmfr-quality-label {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.58);
}
.mmfr-quality-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.42rem;
}
.mmfr-trophy-tabs {
    flex: 0 0 auto;
    width: min(100%, 28rem);
    margin: -0.1rem auto 0.1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* AUTO ist die Empfehlung → breiter Solo-Button über die volle Breite, die
   vier festen Stufen darunter im 2×2 (überschreibt die Default-Spaltenzahl). */
.mmfr-quality-auto {
    width: 100%;
    margin: 0 0 0.42rem;
}
.mmfr-quality-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Sprache: kompaktes Aufklapp-Menü (details/summary) statt Flaggen-Raster.
   Die Liste fließt unter dem Schalter auf (nicht absolut → vom clip-path
   der Sektion nicht beschnitten). */
.mmfr-lang-select {
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
}
.mmfr-lang-current {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.55rem 0.7rem;
    border: 2px solid rgba(245, 240, 226, 0.38);
    background: rgba(245, 240, 226, 0.06);
    color: rgba(245, 240, 226, 0.92);
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    transition: border-color 0.15s var(--curve), background 0.15s var(--curve);
}
.mmfr-lang-current::-webkit-details-marker { display: none; }
.mmfr-lang-current:hover,
.mmfr-lang-select[open] .mmfr-lang-current {
    border-color: var(--color-primary);
    background: rgba(245, 240, 226, 0.09);
}
.mmfr-lang-caret {
    margin-left: auto;
    width: 0.46rem;
    height: 0.46rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.7;
    transition: transform 0.15s var(--curve);
}
.mmfr-lang-select[open] .mmfr-lang-caret { transform: rotate(225deg) translateY(1px); }
.mmfr-lang-list {
    display: flex;
    flex-direction: column;
    margin-top: 0.3rem;
    max-height: 15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    border: 2px solid rgba(255, 150, 60, 0.42);
    background: rgba(14, 10, 6, 0.7);
}
.mmfr-lang-opt {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-bottom: 1px solid rgba(245, 240, 226, 0.08);
    background: transparent;
    color: rgba(245, 240, 226, 0.85);
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s var(--curve), color 0.12s var(--curve);
}
.mmfr-lang-opt:last-child { border-bottom: 0; }
.mmfr-lang-opt:hover,
.mmfr-lang-opt:focus-visible {
    background: rgba(255, 150, 60, 0.16);
    color: #fff;
    outline: none;
}
.mmfr-lang-opt.is-current {
    color: var(--color-primary);
    background: rgba(255, 150, 60, 0.1);
}
.mmfr-quality-btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: 2.45rem;
    padding: 0.45rem 0.5rem;
    border: 2px solid rgba(245, 240, 226, 0.38);
    background: rgba(245, 240, 226, 0.06);
    color: rgba(245, 240, 226, 0.9);
    cursor: pointer;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-transform: uppercase;
    transition: transform 0.15s var(--curve), background 0.15s var(--curve), border-color 0.15s var(--curve);
}
.mmfr-quality-btn:hover,
.mmfr-quality-btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(245, 240, 226, 0.7);
    outline: none;
}
.mmfr-quality-btn[aria-pressed="true"] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #0d0a06;
}
.mmfr-quality-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
}
.mmfr-lang-flag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1rem;
    line-height: 1;
}
.mmfr-lang-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.62rem;
}

/* ── Schwierigkeitsstufen: HART glüht rostig, GNADENLOS violett ── */
.mmfr-diff-btn--2[aria-pressed="true"] {
    border-color: #ff8a3c;
    background: #ff8a3c;
}
.mmfr-diff-btn--3[aria-pressed="true"] {
    border-color: #b48cff;
    background: #b48cff;
}
.mmfr-diff-btn--2:not(:disabled):not([aria-pressed="true"]) { border-color: rgba(255, 138, 60, 0.55); }
.mmfr-diff-btn--3:not(:disabled):not([aria-pressed="true"]) { border-color: rgba(180, 140, 255, 0.55); }

@media (max-width: 28rem) {
    .mmfr-quality-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Name-Eintrag (Bestenliste) ── */
.mmfr-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 0.3rem;
}
.mmfr-input {
    appearance: none;
    -webkit-appearance: none;
    width: min(14rem, 60vw);
    padding: 0.7rem 0.9rem;
    border: 3px solid rgba(245, 240, 226, 0.5);
    background: #14110d;
    color: var(--mm-cream, #f5f0e2);
    font-family: var(--font-mono, monospace);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}
.mmfr-input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
}
.mmfr-form .mmfr-btn {
    margin-top: 0;
    padding: 0.7rem 1.4rem;
}
.mmfr-form .mmfr-btn[disabled] {
    opacity: 0.5;
    cursor: wait;
}
.mmfr-form-err {
    margin: 0;
    min-height: 1.1em;
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    color: #d44343;
}

/* ── Bestenliste ── */
.mmfr-screen--board {
    width: min(34rem, 100%);
}
.mmfr-board {
    width: 100%;
    max-height: min(46vh, 19rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    border: 2px solid rgba(245, 240, 226, 0.2);
    background: rgba(10, 8, 5, 0.6);
    padding: 0.4rem 0;
}
.mmfr-row {
    display: grid;
    grid-template-columns: 2.4rem 1fr auto auto;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.34rem 0.8rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    color: rgba(245, 240, 226, 0.85);
}
.mmfr-row:nth-child(odd) {
    background: rgba(245, 240, 226, 0.04);
}
.mmfr-row.is-me {
    background: rgba(200, 82, 28, 0.22);
    color: var(--mm-cream, #f5f0e2);
}
.mmfr-row-rank {
    color: var(--color-primary);
    font-weight: 700;
}
.mmfr-row-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.mmfr-row-win {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.05rem 0.3rem;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    background: var(--color-primary);
    color: #0d0a06;
    vertical-align: 0.1em;
}
.mmfr-row-time {
    font-weight: 700;
    text-align: right;
}
.mmfr-row-meta {
    color: rgba(245, 240, 226, 0.5);
    font-size: 0.72rem;
    text-align: right;
}

/* ── Werkstatt (Meta-Shop) ── */
.mmfr-screen--shop {
    width: min(34rem, 100%);
    max-height: 100%;
    min-height: 0;
    margin: 0 auto;
    justify-content: flex-start;
}
.mmfr-shop {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.5rem;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 0.35rem;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.mmfr-shop:focus-visible {
    outline: 2px solid rgba(255, 150, 60, 0.75);
    outline-offset: 3px;
}
.mmfr-shop-item {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "head cost" "desc cost";
    align-items: center;
    gap: 0.15rem 0.9rem;
    padding: 0.6rem 0.85rem;
    text-align: left;
    border: 2px solid rgba(245, 240, 226, 0.45);
    background: #1d1912;
    color: var(--mm-cream, #f5f0e2);
    cursor: pointer;
    transition: transform 0.12s var(--curve), border-color 0.12s var(--curve);
}
.mmfr-shop-item:hover:not(.is-maxed):not(.is-locked),
.mmfr-shop-item:focus-visible:not(.is-maxed):not(.is-locked) {
    transform: translate(-1px, -1px);
    border-color: var(--color-primary);
    outline: none;
}
.mmfr-shop-item.is-locked {
    opacity: 0.55;
    cursor: not-allowed;
}
.mmfr-shop-item.is-maxed {
    cursor: default;
    border-color: rgba(200, 82, 28, 0.7);
}

/* ── Kodex / Steckbriefe ──────────────────────────────────────────────
   Karten-Liste (nutzt .mmfr-shop fürs Scrollen): Portrait links, Bio
   rechts, dezente ICD-11-Fußzeile. Cuby-Eintrag als warme Finale-Karte. */
.mmfr-codex-card {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.7rem 0.8rem;
    border: 2px solid rgba(245, 240, 226, 0.32);
    background: #1d1912;
    color: var(--mm-cream, #f5f0e2);
    text-align: left;
}
.mmfr-codex-card.is-locked { opacity: 0.5; }
.mmfr-codex-pic {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 38%, rgba(255, 150, 60, 0.12), transparent 70%), #15110b;
    border: 1px solid rgba(245, 240, 226, 0.14);
    overflow: hidden;
}
.mmfr-codex-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.mmfr-codex-lockq {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2rem;
    color: rgba(245, 240, 226, 0.4);
}
/* Emblem für Boss + Cuby (kein Atlas-Sprite) */
.mmfr-codex-emblem {
    position: relative;
    width: 54%;
    aspect-ratio: 1;
    transform: rotate(-6deg);
}
.mmfr-codex-emblem--cuby {
    background: linear-gradient(150deg, #ff8f44 0%, var(--color-primary) 46%, #bf4d18 100%);
    box-shadow: 2px 2px 0 #9c3e17, 4px 4px 0 #74300f, 6px 7px 8px rgba(0, 0, 0, 0.5);
}
.mmfr-codex-emblem--cuby .mmfr-codex-eye {
    position: absolute;
    top: 30%;
    width: 17%;
    height: 21%;
    background: #f7f1e4;
}
.mmfr-codex-emblem--cuby .mmfr-codex-eye:nth-child(1) { left: 25%; }
.mmfr-codex-emblem--cuby .mmfr-codex-eye:nth-child(2) { right: 25%; }
.mmfr-codex-emblem--boss {
    background: linear-gradient(150deg, #4a4450 0%, #2a2630 55%, #16131a 100%);
    box-shadow: 2px 2px 0 #1a1720, 4px 4px 0 #100e15, 6px 7px 10px rgba(0, 0, 0, 0.6),
        inset 0 0 0 2px rgba(200, 60, 40, 0.4);
}
.mmfr-codex-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.mmfr-codex-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mm-cream, #f5f0e2);
}
.mmfr-codex-name--cuby {
    font-family: 'Bungee', var(--font-display);
    font-weight: 400;
    font-size: 1.5rem;
    color: #ffd49a;
    text-shadow: 0 2px 0 #a9491a, 0 4px 10px rgba(0, 0, 0, 0.5);
}
.mmfr-codex-bio {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(245, 240, 226, 0.82);
}
.mmfr-codex-card.is-locked .mmfr-codex-bio {
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.55);
}
.mmfr-codex-foot {
    margin: 0.1rem 0 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(245, 240, 226, 0.55);
}
.mmfr-codex-icd {
    color: var(--color-primary);
    font-weight: 700;
}
/* Cuby-Finale: warme, abgesetzte Karte */
.mmfr-codex-card--cuby {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    border-color: rgba(255, 150, 60, 0.6);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200, 82, 28, 0.22), transparent 70%),
        linear-gradient(180deg, #241a10, #1a130c);
    box-shadow: inset 0 0 0 1px rgba(255, 150, 60, 0.25);
}
.mmfr-codex-card--cuby .mmfr-codex-pic {
    width: 96px;
    height: 96px;
    background: none;
    border: 0;
}
.mmfr-codex-card--cuby .mmfr-codex-bio { font-size: 0.88rem; }
.mmfr-codex-card--boss .mmfr-codex-name { color: #d98a72; }
@media (max-width: 420px) {
    .mmfr-codex-pic { width: 60px; height: 60px; }
    .mmfr-codex-name { font-size: 0.92rem; }
    .mmfr-codex-bio { font-size: 0.8rem; }
}
.mmfr-shop-head {
    grid-area: head;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.mmfr-shop-name {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.98rem;
}
.mmfr-shop-pips {
    display: inline-flex;
    gap: 0.22rem;
}
.mmfr-shop-pips i {
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(245, 240, 226, 0.18);
}
.mmfr-shop-pips i.is-on {
    background: var(--color-primary);
}
.mmfr-shop-desc {
    grid-area: desc;
    font-size: 0.78rem;
    color: rgba(245, 240, 226, 0.6);
}
.mmfr-trophy-item {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "art body";
    align-items: center;
    gap: 0.58rem;
}
.mmfr-trophy-art {
    grid-area: art;
    display: grid;
    place-items: center;
    width: clamp(2.45rem, 8vw, 3.15rem);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--ach-tier, rgba(255, 150, 60, 0.42));
    background: rgba(8, 6, 4, 0.55);
    box-shadow: inset 0 0 14px rgba(255, 120, 30, 0.14);
    clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}
.mmfr-trophy-art-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mmfr-trophy-body {
    grid-area: body;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
    min-width: 0;
}
.mmfr-trophy-body .mmfr-shop-head {
    grid-area: auto;
    min-width: 0;
}
.mmfr-trophy-body .mmfr-shop-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mmfr-trophy-body .mmfr-shop-desc {
    grid-area: auto;
    min-width: 0;
}
.mmfr-achpop-art {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--ach-tier, #ffba40);
    background: rgba(8, 6, 4, 0.72);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.46), inset 0 0 14px color-mix(in srgb, var(--ach-tier, #ffba40) 38%, transparent);
    clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
.mmfr-achpop-art-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mmfr-shop-cost {
    grid-area: cost;
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    white-space: nowrap;
}

/* ── Werkstatt-Skilltree: drei Äste als Spalten, Knoten mit Verbindungslinien ── */
.mmfr-tree {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.2rem 0.35rem 0.5rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
}
.mmfr-tree:focus-visible { outline: 2px solid rgba(255, 150, 60, 0.75); outline-offset: 3px; }
.mmfr-tree-col {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;            /* Raum für die Verbindungslinie zwischen Knoten */
    flex: 1 1 0;
    min-width: 8.5rem;
    max-width: 13rem;
}
.mmfr-tree-branch {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    text-align: center;
    color: var(--branch);
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--branch);
    margin-bottom: 0.15rem;
}
.mmfr-tree-node {
    position: relative;
    appearance: none; -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    text-align: left;
    border: 2px solid rgba(245, 240, 226, 0.4);
    background: #1d1912;
    color: var(--mm-cream, #f5f0e2);
    cursor: pointer;
    isolation: isolate;
    transition: transform 0.12s var(--curve), border-color 0.12s var(--curve);
}
.mmfr-tree-node::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(29, 25, 18, 0.98) 0%, rgba(29, 25, 18, 0.88) 44%, rgba(29, 25, 18, 0.52) 100%),
        var(--tree-art);
    background-repeat: no-repeat;
    background-position: center, right -0.38rem center;
    background-size: 100% 100%, min(5.2rem, 58%) auto;
    opacity: 0.46;
    filter: saturate(0.82) contrast(0.95);
}
.mmfr-tree-node > * {
    position: relative;
    z-index: 1;
}
.mmfr-tree-node.is-ult::after {
    opacity: 0.58;
    background-size: 100% 100%, min(5.8rem, 62%) auto;
}
.mmfr-tree-node.is-req::after,
.mmfr-tree-node.is-poor::after {
    opacity: 0.3;
    filter: grayscale(0.25) saturate(0.58) contrast(0.9);
}
/* Verbindungslinie zum Knoten darüber (Vorgänger) — leuchtet, sobald frei */
.mmfr-tree-node.has-link::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 3px;
    height: 1.15rem;
    z-index: 2;
    transform: translateX(-50%);
    background: rgba(245, 240, 226, 0.16);
}
.mmfr-tree-node.has-link:not(.is-req)::before { background: var(--branch); }
.mmfr-tree-node.is-afford {
    border-color: var(--branch);
    box-shadow: inset 0 0 0 1px var(--branch), 0 0 10px -2px var(--branch);
}
.mmfr-tree-node.is-afford:hover,
.mmfr-tree-node.is-afford:focus-visible { transform: translate(-1px, -1px); outline: none; }
.mmfr-tree-node.is-maxed { cursor: default; border-color: var(--branch); background: color-mix(in srgb, var(--branch) 22%, #1d1912); }
.mmfr-tree-node.is-poor { opacity: 0.72; cursor: not-allowed; }
.mmfr-tree-node.is-req { opacity: 0.46; cursor: not-allowed; border-style: dashed; }
.mmfr-tree-head { display: flex; flex-direction: column; gap: 0.25rem; }
.mmfr-tree-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.mmfr-tree-art {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.15rem;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 186, 64, 0.64);
    background: rgba(8, 6, 4, 0.55);
    clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
.mmfr-tree-art-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mmfr-tree-name {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.84rem;
    line-height: 1.05;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.mmfr-tree-pips { display: inline-flex; gap: 0.2rem; }
.mmfr-tree-pips i { width: 0.42rem; height: 0.42rem; background: rgba(245, 240, 226, 0.18); }
.mmfr-tree-pips i.is-on { background: var(--branch); }
.mmfr-tree-desc { font-size: 0.68rem; line-height: 1.25; color: rgba(245, 240, 226, 0.74); overflow-wrap: anywhere; hyphens: auto; }
.mmfr-tree-cost { font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--branch); }
.mmfr-tree-node.is-req .mmfr-tree-cost { color: rgba(245, 240, 226, 0.5); }
/* Ultimate-Capstone: die Grind-Belohnung sticht in Gold heraus, egal welcher Ast */
.mmfr-tree-node.is-ult { border-color: #ffba40; }
.mmfr-tree-node.is-ult .mmfr-tree-name { color: #ffd27a; }
.mmfr-tree-node.is-ult .mmfr-tree-cost { color: #ffd27a; }
.mmfr-tree-node.is-ult.is-afford { box-shadow: inset 0 0 0 1px #ffba40, 0 0 15px -1px #ffba40; }
.mmfr-tree-node.is-ult.is-maxed { border-color: #ffba40; background: color-mix(in srgb, #ffba40 20%, #1d1912); }
@media (max-width: 34rem) {
    .mmfr-tree {
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.85rem;
        overflow-x: hidden;
        padding: 0.15rem 0.15rem 0.6rem;
        scrollbar-gutter: stable;
    }
    .mmfr-tree-col {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        gap: 0.72rem;
    }
    .mmfr-tree-branch {
        position: sticky;
        top: -0.15rem;
        z-index: 1;
        margin: 0;
        padding: 0.35rem 0.25rem 0.4rem;
        background: linear-gradient(180deg, rgba(24, 18, 8, 0.98), rgba(24, 18, 8, 0.9));
        font-size: 0.72rem;
        text-align: left;
    }
    .mmfr-tree-node {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head cost"
            "desc cost";
        align-items: center;
        gap: 0.18rem 0.55rem;
        min-height: 3.4rem;
        padding: 0.62rem 0.7rem;
    }
    .mmfr-tree-node.has-link::before {
        left: 1.1rem;
        height: 0.72rem;
    }
    .mmfr-tree-head { grid-area: head; min-width: 0; }
    .mmfr-tree-desc { grid-area: desc; font-size: 0.66rem; line-height: 1.22; }
    .mmfr-tree-cost { grid-area: cost; align-self: center; white-space: nowrap; }
}
@media (max-width: 23rem) {
    .mmfr-tree {
        padding-inline: 0;
    }
    .mmfr-tree-node {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "desc"
            "cost";
        min-height: 3.75rem;
        padding: 0.62rem 0.65rem;
    }
    .mmfr-tree-cost { justify-self: start; }
    .mmfr-tree-pips i { width: 0.36rem; height: 0.36rem; }
}
@media (prefers-reduced-motion: reduce) { .mmfr-tree-node { transition: none; } }

/* Upgrade-Karten: fixes 2×2-Raster — jede Karte belegt auf jeder
   Displaygröße denselben Platz, egal wie lang Name/Beschreibung sind */
.mmfr-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 1.6vw, 0.9rem);
    width: 100%;
}
.mmfr-card {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    width: 100%;
    min-height: clamp(7.5rem, 17vw, 9rem);
    padding: 0.9rem 0.9rem 1.1rem;
    text-align: left;
    border: 3px solid var(--mm-cream, #f5f0e2);
    background: #1d1912;
    color: var(--mm-cream, #f5f0e2);
    cursor: pointer;
    box-shadow: 6px 6px 0 rgba(200, 82, 28, 0.85);
    transition: transform 0.15s var(--curve), box-shadow 0.15s var(--curve), background 0.15s var(--curve);
}
/* Kisten-Karte (einzeln, außerhalb des Rasters) bleibt kompakt */
.mmfr-card--static {
    width: auto;
    min-width: 14rem;
    min-height: 0;
}
/* Kopfzeile der Karte: Badge links, Skill-Art rechts — beides im
   Fluss, damit auf schmalen Karten nichts über Name/Text liegt */
.mmfr-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}
.mmfr-card-art {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: clamp(2.55rem, 7vw, 3.15rem);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 150, 60, 0.42);
    background: rgba(8, 6, 4, 0.55);
    box-shadow: inset 0 0 18px rgba(255, 120, 30, 0.16), 0 0 10px rgba(255, 120, 30, 0.12);
    clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}
.mmfr-card-art-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Fallback-Symbol: nur sichtbar, wenn ein Bild nicht geladen werden kann */
.mmfr-card-ico {
    flex: 0 0 auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: pre;
    color: rgba(255, 165, 80, 0.85);
    text-shadow: 0 0 8px rgba(255, 120, 30, 0.4);
}
.mmfr-card--tier-0 {
    border-color: rgba(139, 220, 116, 0.62);
    background: linear-gradient(180deg, #1c2116, #12170d);
}
.mmfr-card--tier-1 {
    border-color: rgba(245, 240, 226, 0.46);
    background: linear-gradient(180deg, #201c16, #17130e);
}
.mmfr-card--tier-2 {
    border-color: rgba(68, 128, 235, 0.72);
    background: linear-gradient(180deg, #151d2b, #0f1420);
}
.mmfr-card--tier-3 {
    border-color: rgba(234, 190, 76, 0.76);
    background: linear-gradient(180deg, #261f11, #17140b);
}
.mmfr-card--tier-4 {
    border-color: rgba(80, 178, 92, 0.74);
    background: linear-gradient(180deg, #142316, #0d170e);
}
.mmfr-card--tier-5 {
    border-color: rgba(208, 112, 38, 0.86);
    background: linear-gradient(180deg, #2b160d, #1a0e08);
}
.mmfr-card:hover,
.mmfr-card:focus-visible {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--color-primary);
    background: #262017;
    outline: none;
}
.mmfr-card--static {
    cursor: default;
    box-shadow: 6px 6px 0 rgba(245, 240, 226, 0.3);
}
.mmfr-card-badge {
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    background: var(--color-primary);
    color: #0d0a06;
}
.mmfr-card-name {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.15rem;
    line-height: 1.05;
    max-width: 100%;
    /* Lange Einzelwörter (SOLLBRUCHSTELLE, TRABANTENSCHWARM) liefen auf
       schmalen Karten aus dem clip-path und wirkten abgeschnitten */
    overflow-wrap: anywhere;
    hyphens: auto;
}
.mmfr-card-desc {
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(245, 240, 226, 0.72);
}
/* Einflug der Upgrade-Karten (Stagger via inline animation-delay) */
.mmfr-card--in {
    animation: mmfr-card-in 0.34s var(--curve) backwards;
}
@keyframes mmfr-card-in {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
/* Fixierung: gewählte Karte rastet sichtbar ein, der Rest tritt zurück */
.mmfr-card.is-picked {
    transform: translate(-2px, -4px) scale(1.05);
    border-color: var(--color-primary);
    background: #2e2113;
    box-shadow: 10px 10px 0 var(--color-primary);
    animation: mmfr-card-pick 0.34s var(--curve);
}
@keyframes mmfr-card-pick {
    0%   { filter: brightness(1); }
    35%  { filter: brightness(1.8); }
    100% { filter: brightness(1.15); }
}
.mmfr-card.is-dimmed {
    opacity: 0.25;
    transform: scale(0.96);
    transition: opacity 0.25s var(--curve), transform 0.25s var(--curve);
}
@media (prefers-reduced-motion: reduce) {
    .mmfr-card--in { animation: none; }
    .mmfr-card.is-picked { animation: none; }
}

.mmfr-card-key {
    position: absolute;
    right: 0.55rem;
    bottom: 0.45rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    color: rgba(245, 240, 226, 0.35);
}
@media (pointer: coarse) {
    .mmfr-card-key { display: none; }
}
@media (max-width: 23rem) {
    .mmfr-cards {
        grid-template-columns: 1fr;
        gap: 0.48rem;
    }
    .mmfr-card {
        min-height: 0;
        padding: 0.62rem 0.65rem 0.78rem;
    }
    .mmfr-card-art {
        width: 2.4rem;
    }
    .mmfr-trophy-item {
        gap: 0.48rem;
        padding: 0.55rem 0.62rem;
    }
    .mmfr-trophy-art {
        width: 2.35rem;
    }
    .mmfr-achpop-art {
        width: 2.25rem;
    }
}

/* ── Loader (vor dem ersten Chunk-Load) ── */
.mmf-rpg-loader {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: #14110d;
}
.mmf-rpg-loader[hidden] { display: none; }
.mmf-rpg-loader-track {
    width: min(60%, 16rem);
    height: 6px;
    overflow: hidden;
    background: rgba(245, 240, 226, 0.12);
}
.mmf-rpg-loader-bar {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--color-primary);
    animation: mmfr-loader-slide 1.1s var(--curve) infinite;
}
@keyframes mmfr-loader-slide {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(280%); }
}
.mmf-rpg-loader-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.6);
}
.mmf-rpg-loader-label:empty { display: none; }

.mmf-rpg-hint {
    margin: 0.8rem 0 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.mmf-rpg-credit {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: rgba(245, 240, 226, 0.4);
}

@media (max-width: 640px) {
    .mmf-rpg-panel {
        padding: 0.35rem;
        padding-top: 3.6rem;
        height: calc(100dvh - 0.5rem);
        max-height: calc(100vh - 0.5rem);
        max-height: calc(100dvh - 0.5rem);
    }
    .mmf-rpg-head { padding: 0 2.9rem; }
    .mmf-rpg-intro { display: none; }
    .mmf-rpg-stage-wrap { min-height: 0; }
    .mmf-rpg-credit { display: none; }
    /* Mobil die volle Breite nutzen, sonst quetscht max-width Score + Multi +
       Best ineinander. Box spannt von links nach rechts, die zwei Zeilen
       ziehen per space-between auseinander → jede Zahl hat Platz. */
    .mmfr-scorebox {
        top: 40px;
        left: 8px;
        right: 8px;
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        column-gap: 0.5rem;
        min-width: 0;
        max-width: none;
        min-height: 1.85rem;
        padding: 0.22rem 0.46rem 0.26rem;
    }
    .mmfr-scorevalue { font-size: 0.78rem; }
    .mmfr-scorelabel { display: none; }
    .mmfr-scorebest {
        display: inline;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.54rem;
    }
    .mmfr-scoregain {
        left: 0.46rem;
        bottom: -0.9rem;
        min-height: 0;
        font-size: 0.56rem;
        line-height: 1;
    }
    .mmfr-card {
        gap: 0.3rem;
        padding: 0.65rem 0.65rem 0.85rem;
        min-height: 7rem;
    }
    .mmfr-card-name { font-size: 0.98rem; }
    .mmfr-card-desc { font-size: 0.76rem; line-height: 1.35; }
    .mmfr-card-art { width: 2.45rem; }
    .mmfr-card-ico { font-size: 0.68rem; }
    .mmfr-screen--board {
        width: min(100%, 21rem);
    }
    .mmfr-board {
        max-height: min(54vh, 23rem);
        padding: 0.25rem;
    }
    .mmfr-screen--shop {
        width: min(100%, 21rem);
    }
    .mmfr-shop {
        max-height: min(60dvh, 23rem);
        padding-right: 0.35rem;
    }
    .mmfr-row {
        grid-template-columns: 2.15rem minmax(0, 1fr) auto;
        grid-template-areas:
            "rank name score"
            "rank meta meta";
        gap: 0.16rem 0.55rem;
        align-items: center;
        padding: 0.56rem 0.65rem;
        font-size: 0.74rem;
        border-bottom: 1px solid rgba(245, 240, 226, 0.08);
    }
    .mmfr-row:last-child {
        border-bottom: 0;
    }
    .mmfr-row-rank {
        grid-area: rank;
        align-self: stretch;
        display: grid;
        place-items: center;
        min-width: 1.9rem;
        border-right: 1px solid rgba(255, 150, 60, 0.18);
        font-size: 0.86rem;
    }
    .mmfr-row-name {
        grid-area: name;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.18;
        font-size: 0.78rem;
    }
    .mmfr-row-time {
        grid-area: score;
        align-self: start;
        font-size: 0.78rem;
        color: #fff1d5;
    }
    .mmfr-row-meta {
        grid-area: meta;
        justify-self: end;
        max-width: 100%;
        text-align: right;
        font-size: 0.62rem;
        line-height: 1.2;
        white-space: normal;
    }
    .mmfr-row-win {
        margin-left: 0.25rem;
        padding: 0.02rem 0.22rem;
        font-size: 0.52rem;
        vertical-align: 0.08em;
    }
}

/* Querformat-Handys: Buttons kompakter, weniger Kopf-Raum verschenken */
@media (max-height: 480px) {
    .mmf-rpg-panel { padding-top: 2.9rem; }
    .mmf-rpg-close,
    .mmf-rpg-mute { top: 0.45rem; width: 2.1rem; height: 2.1rem; }
    .mmf-rpg-close { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mmf-rpg-loader-bar { animation-duration: 2.2s; }
    .mmfr-banner { transition: opacity 0.3s ease; transform: none; }
}

/* ── Touch-Geräte: Spiel randlos, Modal-Chrome weg ──────────────────
   Das Modal ist ab jetzt Desktop-Sache. Auf Touch öffnet das Spiel
   bildschirmfüllend (plus echtes Fullscreen via Launcher, wo der
   Browser mitspielt); ×/Mute-Chrome entfällt — Schließen sitzt als
   Knopf in Start/Pause/Endscreen, Ton in den Optionen. Steht NACH dem
   640px-Block, damit es dessen padding-top (Chrome-Zeile) überstimmt. */
@media (pointer: coarse) {
    .mmf-rpg-modal { padding: 0; }
    .mmf-rpg-modal.is-mobile-game-mode {
        display: block;
        background: #14110d;
    }
    .mmf-rpg-modal.is-mobile-game-mode .mmf-rpg-backdrop {
        display: none;
    }
    .mmf-rpg-modal.is-mobile-game-mode .mmf-rpg-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        max-height: none;
        padding: 0;
        border: 0;
        background: #14110d;
        box-shadow: none;
        transform: none;
        opacity: 1;
        transition: none;
    }
    .mmf-rpg-modal.is-mobile-game-mode .mmf-rpg-stage-wrap {
        position: absolute;
        inset: 0;
        flex: none;
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        background: #14110d;
    }
    .mmf-rpg-modal.is-mobile-game-mode .mmf-rpg-loader {
        background: #14110d;
    }
    .mmf-rpg-close,
    .mmf-rpg-mute { display: none; }
}

/* ── Inventar (Pause + Level-Up): was hab ich, auf welcher Stufe ── */
.mmfr-inv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 0.45rem;
    max-width: 32rem;
    margin: 0;
    padding: 0;
}
/* Inventar-Chip: Icon + Name + Stufen-Pips, mit element-gefärbter Kante.
   Die Kantenfarben zeigen auf einen Blick, wohin der Build kippt. */
.mmfr-inv-item {
    --elem: rgba(255, 165, 80, 0.62);     /* neutral/physisch = warmes Orange */
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.16rem 0.42rem 0.16rem 0.3rem;
    border-left: 3px solid var(--elem);
    background: rgba(245, 240, 226, 0.04);
    font-family: var(--font-mono, monospace);
    font-size: 0.64rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.82);
}
.mmfr-inv-item--passive {
    --elem: rgba(245, 240, 226, 0.34);
    color: rgba(245, 240, 226, 0.6);
}
.mmfr-inv-art {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    overflow: hidden;
    background: rgba(8, 6, 4, 0.5);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 0 8px -2px var(--elem);
}
.mmfr-inv-art-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mmfr-inv-art .mmfr-card-ico { font-size: 0.52rem; white-space: pre; color: rgba(255, 165, 80, 0.85); }
.mmfr-inv-pips {
    display: inline-flex;
    gap: 0.14rem;
}
.mmfr-inv-pips i {
    width: 0.32rem;
    height: 0.32rem;
    background: rgba(245, 240, 226, 0.16);
}
.mmfr-inv-pips i.is-on {
    background: var(--elem);
}
.mmfr-inv-item--passive .mmfr-inv-pips i.is-on {
    background: rgba(245, 240, 226, 0.5);
}
.mmfr-inv-over {
    margin-left: 0.05rem;
    font-weight: 700;
    font-size: 0.92em;
    color: #ffba40;
    text-shadow: 0 0 6px rgba(255, 186, 64, 0.5);
}
/* Premium hebt sich klar ab: Evo gold, Überladung glühend-orange */
.mmfr-inv-item--over {
    background: rgba(255, 170, 50, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 186, 64, 0.45);
}
/* Inventar mobil: bei vollen 5+6 Slots lief die freie Umbruch-Liste
   über den Screen — zweispaltiges Raster, Namen mit Ellipsis.
   (Media-Block MUSS nach den Basisregeln stehen, gleiche Spezifität.) */
@media (max-width: 640px) {
    .mmfr-inv {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.26rem 0.7rem;
        width: 100%;
        max-width: 100%;
    }
    .mmfr-inv-item {
        font-size: 0.6rem;
        gap: 0.3rem;
        min-width: 0;
    }
    .mmfr-inv-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mmfr-inv-pips { flex: 0 0 auto; }
}

/* ── Buff-Chips: Restlaufzeit der Powerups über der HP-Leiste ── */
.mmfr-buffs {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    pointer-events: none;
}
.mmfr-buff {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.14rem 0.42rem;
    background: rgba(10, 7, 4, 0.78);
    border: 1px solid rgba(245, 240, 226, 0.3);
    color: var(--mm-cream, #f5f0e2);
}
.mmfr-buff[hidden] { display: none; }
.mmfr-buff--haste  { border-color: rgba(255, 200, 70, 0.65); color: #ffd98a; }
.mmfr-buff--power  { border-color: rgba(235, 125, 255, 0.6); color: #efb9ff; }
.mmfr-buff--shield { border-color: rgba(160, 205, 255, 0.6); color: #cfe4ff; }
.mmfr-buff--magnet { border-color: rgba(110, 175, 255, 0.6); color: #b7d6ff; }

/* ── Apps-Karte: Cuby-Titelbild ────────────────────────────────────
   Echtes WebP statt CSS-Diorama: gibt dem neuen Webgame auf /apps/
   sofort ein inspectierbares, wiederverwendbares Titelmotiv. */
.apps-arena-visual {
    position: relative;
    margin: 0;
    min-height: clamp(15rem, 34vw, 21rem);
    border: 3px solid rgba(245, 240, 226, 0.25);
    background:
        repeating-linear-gradient(0deg, transparent 0 38px, rgba(245, 240, 226, 0.07) 38px 39px),
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(245, 240, 226, 0.07) 38px 39px),
        #14110d;
    overflow: hidden;
    isolation: isolate;
}

.apps-arena-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(15rem, 34vw, 21rem);
    object-fit: cover;
    object-position: center;
    filter: saturate(1.04) contrast(1.03);
}

@media (hover: hover) {
    .apps-arena-visual img {
        transition: transform 0.55s var(--curve), filter 0.55s var(--curve);
    }

    .apps-webgame-card:hover .apps-arena-visual img,
    .apps-webgame-card:focus-within .apps-arena-visual img {
        transform: scale(1.025);
        filter: saturate(1.1) contrast(1.06) brightness(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .apps-arena-visual img { transition: none; }
}

/* ── Echtes Spiel-Vollbild (nur Stage, kein Website-Modal-Chrome) ── */
.mmf-rpg-stage-wrap:fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    border: 0;
    background: #14110d;
}
.mmf-rpg-stage-wrap:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    border: 0;
    background: #14110d;
}

/* ── Game-UI „Voxel-Look" ───────────────────────────────────────────
   Das In-Game-Interface (.mmfr-*) gehört zur Spielwelt, nicht zur
   Website: Buttons sind extrudierte Toon-Blöcke wie der Würfel selbst
   (helles Lichtband oben, dunkle Kante unten), Panels haben gekappte
   Pixel-Ecken, Leisten sind in Voxel-Segmente gehackt, und Licht kommt
   als Glut aus dem Spiel statt als Brutalist-Offset-Schatten von der
   Seite. Bewusst als Override-Block: oben bleibt das Layout-Gerüst,
   hier liegt nur der Look. Der Modal-Rahmen (.mmf-rpg-*) bleibt
   absichtlich Website-Stil — er ist die Schwelle, das hier ist drinnen. */

.mmfr-overlay {
    background: radial-gradient(ellipse at 50% 42%, rgba(22, 15, 8, 0.55) 0%, rgba(8, 6, 4, 0.92) 78%);
}
.mmfr-screen-title {
    text-shadow: 0 0 28px rgba(255, 120, 30, 0.35), 0 3px 0 rgba(0, 0, 0, 0.55);
}
/* ── CUBY-Wortmark: Bungee (Display-Font, gemacht für 2.5D-Logos) ──────
   Wuchtige warme Extrusion nach unten + Glut-Aura. Entrance-Animation
   (Drop + Overshoot + Helligkeits-Flash) feuert per .is-live — getriggert
   beim Start der Titelmusik (cubyLogoBeat), mit Fallback-Timer. */
.mmfr-screen-title--cuby {
    position: relative;
    display: inline-block;
    font-family: 'Bungee', var(--font-display);
    font-weight: 400;
    font-size: clamp(2.3rem, 8.4vw, 4.7rem);
    letter-spacing: 0.005em;
    line-height: 1;
    padding: 0.1em 0.12em 0.14em;
    color: #ffe9c8;
    transform: perspective(640px) rotateX(9deg) rotateY(-8deg);
    transform-style: preserve-3d;
    text-shadow:
        0 1px 0 #ffd49a,
        0 2px 0 #f0913a,
        0 4px 0 #d2611f,
        0 6px 0 #a9491a,
        0 8px 0 #803614,
        0 11px 0 #5c260d,
        0 16px 24px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(255, 140, 45, 0.45);
    will-change: transform, opacity, filter;
}
@media (max-width: 520px) {
    .mmfr-screen-title--cuby {
        font-size: clamp(2rem, 13vw, 3.2rem);
        transform: perspective(520px) rotateX(8deg) rotateY(-6deg);
        text-shadow:
            0 1px 0 #ffd49a, 0 2px 0 #f0913a, 0 3px 0 #d2611f,
            0 5px 0 #a9491a, 0 7px 0 #803614,
            0 11px 16px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 140, 45, 0.45);
    }
}
/* Animation nur wenn Bewegung erwünscht; sonst steht das Logo einfach da */
@media (prefers-reduced-motion: no-preference) {
    .mmfr-screen-title--cuby { opacity: 0; }
    .mmfr-screen-title--cuby.is-live {
        animation: mmfr-cuby-in 0.74s cubic-bezier(0.2, 1.32, 0.32, 1) both,
                   mmfr-cuby-glow 0.74s ease-out both;
    }
}
@keyframes mmfr-cuby-in {
    0%   { opacity: 0; transform: perspective(640px) rotateX(36deg) rotateY(-8deg) translateY(-0.45em) scale(0.68); }
    55%  { opacity: 1; transform: perspective(640px) rotateX(3deg)  rotateY(-8deg) translateY(0.05em)  scale(1.07); }
    73%  { opacity: 1; transform: perspective(640px) rotateX(12deg) rotateY(-8deg) translateY(0)       scale(0.982); }
    100% { opacity: 1; transform: perspective(640px) rotateX(9deg)  rotateY(-8deg) translateY(0)       scale(1); }
}
@keyframes mmfr-cuby-glow {
    0%   { filter: brightness(1.9) saturate(1.45); }
    55%  { filter: brightness(1.15) saturate(1.1); }
    100% { filter: brightness(1) saturate(1); }
}

/* ── Vorspann: Marke → Autor → CUBY → würfeliger Abgang ────────────────
   Liegt über allem im Stage, opaker warmer Grund. Cross-Fade der drei
   Screens; der Abgang kippt die Fläche wie eine Würfelkante weg und gibt
   das lebende Menü dahinter frei. Überall überspringbar. */
.mmfr-intro {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    background:
        radial-gradient(ellipse 64% 56% at 50% 42%, rgba(40, 24, 12, 0.92), transparent 72%),
        radial-gradient(ellipse 70% 48% at 50% 28%, rgba(200, 82, 28, 0.16), transparent 70%),
        linear-gradient(180deg, #17110a 0%, #0e0a06 60%, #0a0705 100%);
    cursor: pointer;
}
.mmfr-intro.is-out {
    animation: mmfr-intro-out 0.66s cubic-bezier(0.72, 0, 0.84, 0) forwards;
}
.mmfr-intro.is-out-fade { animation: mmfr-intro-fade 0.22s ease forwards; }
@keyframes mmfr-intro-out {
    0%   { transform: perspective(1100px) rotateX(0deg) scale(1); opacity: 1; }
    100% { transform: perspective(1100px) rotateX(86deg) scale(0.8); opacity: 0; }
}
@keyframes mmfr-intro-fade { to { opacity: 0; } }
.mmfr-intro-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 2rem;
    text-align: center;
    opacity: 0;
    transform: scale(0.965);
    transition: opacity 0.5s ease, transform 0.6s var(--curve, ease);
    pointer-events: none;
}
.mmfr-intro-screen.is-on { opacity: 1; transform: scale(1); }
.mmfr-intro-logo {
    width: clamp(74px, 22vw, 124px);
    height: auto;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
}
.mmfr-intro-brandtext {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 5vw, 2.3rem);
    color: #f5f0e2;
}
.mmfr-intro-sub {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: clamp(0.68rem, 2.4vw, 0.82rem);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.6);
}
.mmfr-intro-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    letter-spacing: 0.01em;
    color: #ffe9c8;
    text-shadow: 0 2px 0 #a9491a, 0 4px 14px rgba(0, 0, 0, 0.55);
}
.mmfr-intro-cuby {
    font-size: clamp(3rem, 17vw, 6.4rem) !important;
}
.mmfr-intro-skip {
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    z-index: 2;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.45);
    padding: 0.7rem 0.9rem;
    transition: color 0.15s var(--curve, ease);
}
.mmfr-intro-skip::after { content: " ›"; }
.mmfr-intro-skip:hover,
.mmfr-intro-skip:focus-visible { color: var(--color-primary); outline: none; }
@media (prefers-reduced-motion: reduce) {
    .mmfr-intro-screen { transition: opacity 0.2s ease; transform: none; }
    .mmfr-intro-screen.is-on { transform: none; }
}

.mmfr-screen-kicker {
    text-shadow: 0 0 12px rgba(255, 120, 30, 0.5);
}
.mmfr-screen-best {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 140, 50, 0.35);
}
/* Über der lebenden Arena müssen Tagline und Modus-Hinweise lesbar
   bleiben (sie sitzen im helleren Mittelband des Scrims). */
.mmfr-screen-tag,
.mmfr-mode-desc {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 16px rgba(0, 0, 0, 0.5);
}

/* Buttons: extrudierter Toon-Block, Press drückt ihn in die Kante */
.mmfr-btn {
    border: 0;
    border-bottom: 6px solid #6e2a0c;
    background: linear-gradient(180deg, #ef7c33 0%, #ef7c33 46%, #c8521c 46%, #c8521c 100%);
    color: #1a0d04;
    box-shadow: none;
    clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
    transition: transform 0.12s var(--curve), filter 0.12s var(--curve);
}
.mmfr-btn .mmfr-btn-label {
    color: #1a0d04;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
}
.mmfr-btn:hover,
.mmfr-btn:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow: none;
    outline: none;
}
.mmfr-btn:active {
    transform: translateY(3px);
    filter: brightness(0.95);
    box-shadow: none;
}
.mmfr-btn--ghost {
    background: linear-gradient(180deg, #2c2417 0%, #2c2417 46%, #1e1810 46%, #1e1810 100%);
    border-bottom: 5px solid #0b0805;
    color: var(--mm-cream, #f5f0e2);
}
.mmfr-btn--ghost .mmfr-btn-label {
    color: var(--mm-cream, #f5f0e2);
    text-shadow: none;
}
.mmfr-install {
    color: #fff4da;
}
.mmfr-install-options {
    display: grid;
    gap: 0.72rem;
    width: 100%;
    margin: 1rem 0 0.9rem;
}
.mmfr-install-option {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, rgba(42, 48, 36, 0.98) 0%, rgba(31, 35, 27, 0.98) 46%, rgba(22, 24, 18, 0.98) 46%, rgba(22, 24, 18, 0.98) 100%);
    border: 1px solid rgba(255, 218, 144, 0.42);
    border-bottom: 6px solid rgba(130, 102, 56, 0.88);
}
.mmfr-install-option .mmfr-btn-label {
    color: #f6ffe7;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.62), 0 0 12px rgba(139, 220, 116, 0.26);
}
.mmfr-install-option small,
.mmfr-install .mmfr-btn--ghost small {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 244, 218, 0.8);
    font-size: 0.75rem;
    line-height: 1.35;
}
/* Überleben-Taste: gleicher Toon-Block, aber Gefahr-Rot — der Modus
   verspricht keinen Sieg, das darf man dem Knopf ansehen */
.mmfr-btn--endless {
    background: linear-gradient(180deg, #d8442a 0%, #d8442a 46%, #a32d16 46%, #a32d16 100%);
    border-bottom-color: #5c180a;
}
.mmfr-btn--endless .mmfr-btn-label {
    color: #1a0704;
}

/* Upgrade-Karten als 2.5D-Tiles: obere Lichtkante + untere Tiefe + Tier-
   Glühen geben jeder Karte Plastik. Tier-Klassen setzen nur noch die
   Variablen (Rand/Hintergrund/Glühen), der Bevel kommt zentral. */
.mmfr-card {
    --tg: rgba(200, 82, 28, 0.1);
    --tb1: #221a10;
    --tb2: #171108;
    border: 1px solid rgba(255, 145, 60, 0.38);
    background: linear-gradient(176deg, var(--tb1), var(--tb2));
    box-shadow:
        inset 0 2px 0 rgba(255, 228, 185, 0.16),
        inset 0 -15px 24px rgba(0, 0, 0, 0.5),
        inset 0 0 28px var(--tg);
    clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
    transition: transform 0.14s var(--curve), box-shadow 0.14s var(--curve), border-color 0.14s var(--curve);
}
.mmfr-card--tier-0 { border-color: rgba(139, 220, 116, 0.52); --tg: rgba(139, 220, 116, 0.13); --tb1: #1d2517; --tb2: #12180e; }
.mmfr-card--tier-1 { border-color: rgba(245, 240, 226, 0.38); --tg: rgba(245, 240, 226, 0.05); --tb1: #221d15; --tb2: #17120d; }
.mmfr-card--tier-2 { border-color: rgba(68, 128, 235, 0.68); --tg: rgba(68, 128, 235, 0.18); --tb1: #152033; --tb2: #0d1422; }
.mmfr-card--tier-3 { border-color: rgba(234, 190, 76, 0.72); --tg: rgba(234, 190, 76, 0.17); --tb1: #2a2110; --tb2: #181309; }
.mmfr-card--tier-4 { border-color: rgba(80, 178, 92, 0.7); --tg: rgba(80, 178, 92, 0.18); --tb1: #142716; --tb2: #0c170e; }
.mmfr-card--tier-5 { border-color: rgba(208, 112, 38, 0.86); --tg: rgba(208, 112, 38, 0.26); --tb1: #30170b; --tb2: #1a0e07; }
/* Auswahl-/Fokus: heller Innenrahmen + die Karte hebt sich aus der Fläche. */
.mmfr-card:hover,
.mmfr-card:focus-visible {
    transform: translateY(-4px) scale(1.035);
    border-color: #ffd9a0;
    box-shadow:
        inset 0 2px 0 rgba(255, 235, 195, 0.2),
        inset 0 -15px 24px rgba(0, 0, 0, 0.42),
        inset 0 0 0 3px rgba(255, 215, 150, 0.92),
        inset 0 0 34px rgba(255, 140, 40, 0.26);
    outline: none;
    z-index: 2;
}
/* Tap/Press: die Karte senkt sich kurz ein — haptisches Mikrofeedback. */
.mmfr-card:active {
    transform: translateY(-1px) scale(1.012);
    box-shadow:
        inset 0 1px 0 rgba(255, 228, 185, 0.12),
        inset 0 -7px 16px rgba(0, 0, 0, 0.58),
        inset 0 0 0 3px rgba(255, 215, 150, 0.8),
        inset 0 0 30px rgba(255, 140, 40, 0.32);
}
.mmfr-stage.is-keyboard .mmfr-card:hover:not(:focus-visible) {
    transform: none;
    box-shadow:
        inset 0 2px 0 rgba(255, 228, 185, 0.16),
        inset 0 -15px 24px rgba(0, 0, 0, 0.5),
        inset 0 0 28px var(--tg);
}
/* Fixierung: gewählte Karte rastet mit kräftigem Vollrahmen ein */
.mmfr-card.is-picked {
    transform: translateY(-4px) scale(1.07);
    border-color: #fff;
    box-shadow:
        inset 0 2px 0 rgba(255, 240, 210, 0.24),
        inset 0 -15px 26px rgba(0, 0, 0, 0.4),
        inset 0 0 0 4px #ffd9a0,
        inset 0 0 48px rgba(255, 150, 50, 0.45);
    z-index: 3;
}
.mmfr-card--static {
    box-shadow:
        inset 0 2px 0 rgba(255, 228, 185, 0.14),
        inset 0 -15px 24px rgba(0, 0, 0, 0.5),
        inset 0 0 26px rgba(200, 82, 28, 0.1);
}
.mmfr-card-badge {
    box-shadow: 0 0 14px rgba(255, 120, 30, 0.45);
}
/* ── Element-Akzent: elementare Karten tragen ihre Farbe am Icon-Rahmen
   (innen, weil clip-path äußere Schatten beschneidet). Neutral = orange. ── */
.mmfr-card[data-elem] .mmfr-card-art {
    border-color: var(--elem);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 15px -2px var(--elem);
}
.mmfr-card[data-elem] .mmfr-card-name {
    text-shadow: 0 0 14px color-mix(in srgb, var(--elem) 32%, transparent);
}

/* ── Seltenheit: Karten lesen sich als Beute (Selten/Episch/Evo) ── */
/* Eckband sitzt absolut unten links — JEDE Karte mit Band braucht
   Bodenfreiheit, sonst liegt es über der letzten Beschreibungszeile.
   Überladung/Pakt fehlten hier — ihr langes Band („ÜBERLADUNG") deckte
   auf schmalen Mobil-Karten die Info-Texte zu. */
.mmfr-card--rare,
.mmfr-card--epic,
.mmfr-card--evo,
.mmfr-card--over,
.mmfr-card--pact {
    padding-bottom: 1.95rem;
}
.mmfr-card-rib {
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.5rem;
    width: max-content;
    max-width: calc(100% - 1.2rem);
    white-space: nowrap;
    font-family: var(--font-mono, monospace);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.08rem 0.32rem;
    color: #0d0a06;
    z-index: 2;
}
.mmfr-card--rare {
    border-color: #4fd0ff;
    box-shadow: inset 0 0 0 1px rgba(79, 208, 255, 0.5), inset 0 0 30px rgba(40, 150, 235, 0.22);
}
.mmfr-card--rare .mmfr-card-rib { background: #4fd0ff; box-shadow: 0 0 12px rgba(79, 208, 255, 0.7); }
.mmfr-card--epic {
    border-color: #c98bff;
    box-shadow: inset 0 0 0 1px rgba(201, 139, 255, 0.6), inset 0 0 34px rgba(150, 70, 235, 0.3);
}
.mmfr-card--epic .mmfr-card-rib { background: #d7a3ff; box-shadow: 0 0 14px rgba(190, 110, 255, 0.8); }
.mmfr-card--evo {
    border-color: #ffd23a;
    box-shadow: inset 0 0 0 2px rgba(255, 210, 60, 0.7), inset 0 0 40px rgba(255, 150, 30, 0.34);
}
.mmfr-card--evo .mmfr-card-rib { background: #ffd23a; box-shadow: 0 0 16px rgba(255, 200, 40, 0.9); }
.mmfr-card--evo .mmfr-card-name { color: #ffe9a8; }
/* Glanz-Sweep für die wertigen Karten (vom clip-path sauber beschnitten) —
   auch Überladung/Pakt bekommen ihn jetzt, damit Endgame-Karten als
   „woah, Upgrade" gelesen werden. */
.mmfr-card--rare::after,
.mmfr-card--epic::after,
.mmfr-card--evo::after,
.mmfr-card--over::after,
.mmfr-card--pact::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%);
    transform: translateX(-130%);
    animation: mmfr-card-shine 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
/* Selten: gleicher Folien-Glint, aber seltener und kühler */
.mmfr-card--rare::after {
    background: linear-gradient(115deg, transparent 40%, rgba(190, 235, 255, 0.16) 50%, transparent 60%);
    animation-duration: 4.6s;
}
@keyframes mmfr-card-shine {
    0%, 55% { transform: translateX(-130%); }
    100% { transform: translateX(130%); }
}
/* Evo: zusätzlich ein atmendes Innenlicht — die Karte glüht von innen */
.mmfr-card--evo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 78%, rgba(255, 178, 40, 0.30), transparent 64%);
    animation: mmfr-card-breathe 2.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes mmfr-card-breathe {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
/* Überladung (Gold) + Pakt (Rot): gepulster Lichtrahmen statt statischem
   Inset — die Endgame-Karten flackern wie unter Strom */
.mmfr-card--over {
    background: linear-gradient(160deg, rgba(52, 35, 14, 0.97), rgba(28, 20, 11, 0.97));
    animation: mmfr-card-over-pulse 1.6s ease-in-out infinite;
}
.mmfr-card--over .mmfr-card-rib {
    background: linear-gradient(180deg, #ffe08c, #d98518);
    color: #fff7dc;
    text-shadow: 0 2px 0 rgba(32, 14, 3, 0.82), 0 0 8px rgba(255, 218, 130, 0.44);
    box-shadow: 0 0 14px rgba(255, 186, 64, 0.78);
}
.mmfr-card--over .mmfr-card-name {
    color: #ffe2a0;
}
/* Bevel (oben Licht, unten Tiefe) bleibt im Puls erhalten → auch Endgame-
   Karten behalten ihre 2.5D-Plastik, nur der Glut-Rahmen pulst dazu. */
@keyframes mmfr-card-over-pulse {
    0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 236, 196, 0.2), inset 0 -14px 22px rgba(0, 0, 0, 0.46), inset 0 0 0 2px rgba(255, 186, 64, 0.92), inset 0 0 14px rgba(255, 150, 40, 0.26); }
    50% { box-shadow: inset 0 2px 0 rgba(255, 240, 205, 0.26), inset 0 -14px 22px rgba(0, 0, 0, 0.42), inset 0 0 0 2px rgba(255, 206, 96, 1), inset 0 0 26px rgba(255, 165, 45, 0.55); }
}
.mmfr-card--pact {
    background: linear-gradient(160deg, rgba(64, 18, 12, 0.96), rgba(38, 12, 9, 0.96));
    animation: mmfr-card-pact-pulse 2s ease-in-out infinite;
}
/* Pakt-Band hatte keinen eigenen Rib-Style → erbte schwarzen Default-Text
   (#0d0a06) ohne hellen Hintergrund = unlesbar auf Dunkelrot. Analog zum
   Über­ladungs-Band: helles Band auf rotem Verlauf. */
.mmfr-card--pact .mmfr-card-rib {
    background: linear-gradient(180deg, #ff8a6a, #c2331f);
    color: #fff1ec;
    text-shadow: 0 2px 0 rgba(40, 8, 4, 0.82), 0 0 8px rgba(255, 110, 80, 0.42);
    box-shadow: 0 0 14px rgba(255, 86, 56, 0.7);
}
.mmfr-card--pact .mmfr-card-name {
    color: #ffc2b2;
}
@keyframes mmfr-card-pact-pulse {
    0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 220, 200, 0.18), inset 0 -14px 22px rgba(0, 0, 0, 0.46), inset 0 0 0 2px rgba(255, 96, 72, 0.92), inset 0 0 14px rgba(255, 64, 40, 0.24); }
    50% { box-shadow: inset 0 2px 0 rgba(255, 226, 210, 0.24), inset 0 -14px 22px rgba(0, 0, 0, 0.42), inset 0 0 0 2px rgba(255, 120, 92, 1), inset 0 0 26px rgba(255, 70, 42, 0.46); }
}

/* ── Karten-Werkzeuge: Neu würfeln + Bannen ── */
.mmfr-cardtools {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.mmfr-cardtool {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.42rem 0.85rem;
    border: 2px solid rgba(245, 240, 226, 0.38);
    background: #1a1610;
    color: var(--mm-cream, #f5f0e2);
    cursor: pointer;
    transition: transform 0.12s var(--curve), border-color 0.12s var(--curve), box-shadow 0.12s var(--curve);
}
.mmfr-cardtool:hover:not(:disabled),
.mmfr-cardtool:focus-visible:not(:disabled) {
    transform: translateY(-2px);
    border-color: #ffd9a0;
    box-shadow: inset 0 0 0 1px rgba(255, 210, 150, 0.6);
    outline: none;
}
.mmfr-cardtool:disabled { opacity: 0.38; cursor: not-allowed; }
.mmfr-cardtool--banish.is-active {
    border-color: #ff6a4a;
    color: #ffb8a6;
    box-shadow: inset 0 0 0 2px rgba(255, 90, 50, 0.45);
}
.mmfr-cards.is-banishing .mmfr-card:hover,
.mmfr-cards.is-banishing .mmfr-card:focus-visible {
    border-color: #ff6a4a;
    box-shadow: inset 0 0 0 3px rgba(255, 95, 55, 0.92), inset 0 0 30px rgba(255, 70, 30, 0.25);
}
@media (prefers-reduced-motion: reduce) {
    .mmfr-card--rare::after,
    .mmfr-card--epic::after,
    .mmfr-card--evo::after,
    .mmfr-card--evo::before { animation: none; }
    .mmfr-card--over {
        animation: none;
        box-shadow: inset 0 0 0 2px rgba(255, 186, 64, 0.92), inset 0 0 16px rgba(255, 150, 40, 0.34);
    }
    .mmfr-card--pact {
        animation: none;
        box-shadow: inset 0 0 0 2px rgba(255, 96, 72, 0.92), inset 0 0 16px rgba(255, 64, 40, 0.3);
    }
}

/* ── Optionen: Anleitung + Fortschritt-Sicherung ── */
.mmfr-help,
.mmfr-data {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.mmfr-help-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}
.mmfr-help-list li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    line-height: 1.42;
    color: rgba(245, 240, 226, 0.82);
}
.mmfr-help-list li::before {
    content: "\25B8";
    position: absolute;
    left: 0;
    color: var(--color-primary);
}
/* Spielstand sichern: erklärender Hinweis, ein primärer Backup-Knopf, darunter
   das eingeklappte Einspielen (Datei wählen oder Code einfügen). */
.mmfr-data-hint {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(245, 240, 226, 0.74);
    text-align: left;
}
.mmfr-data-primary {
    width: 100%;
    margin: 0;
}
.mmfr-data-msg {
    margin: 0;
    min-height: 1.1em;
    font-family: var(--font-mono, monospace);
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    color: rgba(245, 240, 226, 0.6);
}
.mmfr-data-msg.is-ok { color: #6fcf7d; }
.mmfr-data-msg.is-err { color: #ff7a5a; }
.mmfr-data-restore {
    width: 100%;
    border-top: 1px solid rgba(245, 240, 226, 0.12);
    padding-top: 0.5rem;
}
.mmfr-data-restore-sum {
    cursor: pointer;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 240, 226, 0.7);
    list-style: none;
    padding: 0.15rem 0;
}
.mmfr-data-restore-sum::-webkit-details-marker { display: none; }
.mmfr-data-restore-sum::after { content: "+"; float: right; color: var(--color-primary); }
.mmfr-data-restore[open] .mmfr-data-restore-sum::after { content: "−"; }
.mmfr-data-file { display: none; }
.mmfr-data .mmfr-input {
    width: 100%;
    margin-top: 0.5rem;
}
.mmfr-data-restore-row {
    margin-top: 0.5rem;
}
.mmfr-inv-item--evo {
    box-shadow: inset 0 0 0 1px rgba(255, 210, 60, 0.55);
}
.mmfr-inv-item--evo .mmfr-inv-name { color: #ffe9a8; }

/* Leisten: Voxel-Segmente + Glut auf der Füllung */
.mmfr-xpbar,
.mmfr-hpbar,
.mmfr-bossbar {
    border: 1px solid rgba(0, 0, 0, 0.65);
    box-shadow: 0 0 0 1px rgba(255, 150, 60, 0.16);
}
.mmfr-xpbar::after,
.mmfr-hpbar::after,
.mmfr-bossbar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(10, 7, 4, 0.55) 7px 9px);
}
.mmfr-xpfill { box-shadow: 0 0 14px rgba(255, 150, 45, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.32); }
.mmfr-hpfill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 3px rgba(0, 0, 0, 0.28); }
.mmfr-bossfill { box-shadow: 0 0 12px rgba(212, 67, 67, 0.7); }

/* HUD-Chips + Pause: dunkle Mini-Blöcke mit Glut-Kante */
.mmfr-chip,
.mmfr-pausebtn,
.mmfr-fsbtn {
    border: 1px solid rgba(255, 150, 60, 0.3);
    background: rgba(10, 7, 4, 0.8);
    clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
.mmfr-chip--timer { text-shadow: 0 0 10px rgba(255, 170, 80, 0.4); }
.mmfr-chip--level { text-shadow: 0 0 10px rgba(255, 140, 50, 0.55); }
.mmfr-scorebox {
    border: 1px solid rgba(255, 150, 60, 0.24);
    background: rgba(10, 7, 4, 0.78);
    clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
.mmfr-scorebox.is-gaining {
    border-color: rgba(139, 220, 116, 0.55);
    box-shadow: inset 0 0 18px rgba(139, 220, 116, 0.12);
}
.mmfr-scorevalue {
    text-shadow: 0 0 10px rgba(255, 179, 71, 0.35);
}

/* Schadenszahlen glühen kurz nach */
.mmfr-float {
    text-shadow: 0 0 6px rgba(255, 170, 90, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Kritische Treffer „poppen": größer, goldgelb, mit Kontur */
.mmfr-float.is-crit {
    font-size: 1.72rem;
    font-weight: 900;
    color: #ffe23a;
    letter-spacing: 0.02em;
    text-shadow: 0 0 12px rgba(255, 200, 40, 0.95), 0 0 4px rgba(255, 120, 20, 0.9), 0 2px 4px rgba(0, 0, 0, 0.95);
    -webkit-text-stroke: 1px rgba(150, 55, 0, 0.65);
}

/* ── Sieg-Konfetti (2,5D-Polygon-Regen über dem Ergebnis-Screen) ── */
.mmfr-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
}
.mmfr-confetti-bit {
    position: absolute;
    top: 0;
    display: block;
    will-change: transform, opacity;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    animation: mmfr-confetti-fall var(--d, 2.6s) linear var(--delay, 0s) forwards;
}
.mmfr-confetti-bit.is-di { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mmfr-confetti-bit.is-tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@keyframes mmfr-confetti-fall {
    0%   { transform: translateY(-12vh) translateX(0) rotateZ(0deg) rotateX(0deg); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(104vh) translateX(var(--rx, 0px)) rotateZ(var(--spin, 540deg)) rotateX(900deg); opacity: 0.85; }
}
.mmfr-screen-title--win {
    color: #ffe23a;
    text-shadow: 0 0 18px rgba(255, 200, 40, 0.6), 0 3px 0 rgba(120, 50, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) {
    .mmfr-confetti { display: none; }
}

/* Werkstatt, Bestenliste, Eingabe: gleiche Panel-Sprache */
.mmfr-shop-item {
    border: 1px solid rgba(255, 150, 60, 0.25);
    background: linear-gradient(180deg, #1f1810, #15100a);
    clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}
.mmfr-shop-item:hover:not(.is-maxed):not(.is-locked),
.mmfr-shop-item:focus-visible:not(.is-maxed):not(.is-locked) {
    border-color: rgba(255, 165, 80, 0.8);
    box-shadow: inset 0 0 22px rgba(255, 120, 30, 0.14);
    outline: none;
}
.mmfr-board {
    border: 1px solid rgba(255, 150, 60, 0.25);
    background: rgba(10, 8, 5, 0.72);
    clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}
.mmfr-row.is-me {
    background: rgba(200, 82, 28, 0.25);
    box-shadow: inset 0 0 18px rgba(255, 120, 30, 0.15);
}
.mmfr-input {
    border: 1px solid rgba(255, 150, 60, 0.4);
    background: #120d07;
    caret-color: var(--color-primary);
    clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
.mmfr-input:focus-visible {
    border-color: rgba(255, 165, 80, 0.9);
    box-shadow: inset 0 0 14px rgba(255, 120, 30, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .mmfr-btn,
    .mmfr-card,
    .mmfr-shop-item { transition: none; }
}

/* ── RPG-Panel-Skin für Arena-Daten im Dorf ────────────────────────────
   Dieselben Datenflächen wie Arena (Trophäen, Bestenliste, Kodex, Deko)
   bleiben funktional gleich, bekommen im RPG aber die grüne Wildwuchs-
   Sprache aus dem Startmenü: Moos, Holz, Laternenlicht, weniger Glut. */
.mmf-rpg-modal {
    --color-primary: #7ed957;
    --mmrpg-ui-green: #7ed957;
    --mmrpg-ui-green-deep: #3f8f2f;
    --mmrpg-ui-green-dark: #16240c;
    --mmrpg-ui-panel: #172015;
    --mmrpg-ui-panel-2: #10160e;
    --mmrpg-ui-line: rgba(126, 217, 87, 0.38);
    scrollbar-color: #68c94b rgba(8, 15, 7, 0.62);
}
.mmf-rpg-modal ::-webkit-scrollbar-track {
    background: rgba(8, 15, 7, 0.62);
    box-shadow: inset 1px 0 0 rgba(126, 217, 87, 0.14);
}
.mmf-rpg-modal ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8be861, #3f8f2f);
    border-color: rgba(5, 12, 5, 0.9);
    box-shadow: inset 0 1px 0 rgba(240, 255, 220, 0.36);
}
.mmf-rpg-modal ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a6f27a, #55b33d);
}
.mmf-rpg-modal .mmfr-stage.is-menu .mmfr-overlay {
    background:
        radial-gradient(ellipse 74% 54% at 50% 28%, rgba(126, 217, 87, 0.2), transparent 68%),
        radial-gradient(ellipse 54% 42% at 22% 74%, rgba(235, 186, 93, 0.1), transparent 70%),
        repeating-linear-gradient(0deg, rgba(126, 217, 87, 0.052) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(90deg, rgba(126, 217, 87, 0.045) 0 1px, transparent 1px 30px),
        linear-gradient(180deg, #151d11 0%, #0f160d 58%, #080d07 100%);
}
.mmf-rpg-modal .mmfr-stage.is-menu.is-attract .mmfr-overlay {
    background:
        radial-gradient(ellipse 62% 42% at 50% 24%, rgba(126, 217, 87, 0.15), transparent 70%),
        radial-gradient(ellipse 82% 62% at 50% 46%, transparent 0%, rgba(7, 14, 7, 0.2) 54%, rgba(5, 10, 4, 0.58) 100%),
        linear-gradient(180deg, rgba(8, 13, 6, 0.72) 0%, rgba(8, 13, 6, 0.3) 29%, rgba(7, 12, 6, 0.23) 56%, rgba(6, 10, 4, 0.78) 100%);
}
.mmf-rpg-modal .mmfr-screen-title {
    color: #f3f7df;
    text-shadow: 0 0 26px rgba(126, 217, 87, 0.36), 0 3px 0 rgba(5, 12, 4, 0.74);
}
.mmf-rpg-modal .mmfr-screen-kicker,
.mmf-rpg-modal .mmfr-screen-best,
.mmf-rpg-modal .mmfr-shop-cost,
.mmf-rpg-modal .mmfr-row-rank,
.mmf-rpg-modal .mmfr-codex-icd {
    color: var(--mmrpg-ui-green);
    text-shadow: 0 0 12px rgba(126, 217, 87, 0.28), 0 1px 3px rgba(0, 0, 0, 0.72);
}
.mmf-rpg-modal .mmfr-quality-label,
.mmf-rpg-modal .mmfr-screen-copy,
.mmf-rpg-modal .mmfr-shop-desc,
.mmf-rpg-modal .mmfr-row-meta,
.mmf-rpg-modal .mmfr-codex-bio {
    color: rgba(235, 245, 218, 0.72);
}
.mmf-rpg-modal .mmfr-btn {
    border-bottom-color: #2f6e22;
    background: linear-gradient(180deg, #8be861 0%, #8be861 46%, #57b93d 46%, #57b93d 100%);
    color: var(--mmrpg-ui-green-dark);
}
.mmf-rpg-modal .mmfr-btn .mmfr-btn-label {
    color: var(--mmrpg-ui-green-dark);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
}
.mmf-rpg-modal .mmfr-btn--ghost {
    border-bottom-color: #050904;
    background: linear-gradient(180deg, #22301b 0%, #22301b 46%, #162011 46%, #162011 100%);
}
.mmf-rpg-modal .mmfr-btn--ghost .mmfr-btn-label {
    color: #eef7d8;
    text-shadow: none;
}
.mmf-rpg-modal .mmfr-quality-btn,
.mmf-rpg-modal .mmfr-lang-current {
    border-color: rgba(126, 217, 87, 0.34);
    background: rgba(126, 217, 87, 0.07);
    color: rgba(241, 248, 224, 0.9);
}
.mmf-rpg-modal .mmfr-quality-btn:hover,
.mmf-rpg-modal .mmfr-quality-btn:focus-visible,
.mmf-rpg-modal .mmfr-lang-current:hover,
.mmf-rpg-modal .mmfr-lang-select[open] .mmfr-lang-current {
    border-color: rgba(166, 242, 122, 0.72);
    background: rgba(126, 217, 87, 0.12);
}
.mmf-rpg-modal .mmfr-quality-btn[aria-pressed="true"] {
    border-color: var(--mmrpg-ui-green);
    background: linear-gradient(180deg, #8be861, #57b93d);
    color: var(--mmrpg-ui-green-dark);
}
.mmf-rpg-modal .mmfr-board,
.mmf-rpg-modal .mmfr-shop-item,
.mmf-rpg-modal .mmfr-codex-card,
.mmf-rpg-modal .mmfr-input,
.mmf-rpg-modal .mmfr-lang-list {
    border-color: var(--mmrpg-ui-line);
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(126, 217, 87, 0.08), transparent 66%),
        linear-gradient(180deg, var(--mmrpg-ui-panel), var(--mmrpg-ui-panel-2));
}
.mmf-rpg-modal .mmfr-shop-item:hover:not(.is-maxed):not(.is-locked),
.mmf-rpg-modal .mmfr-shop-item:focus-visible:not(.is-maxed):not(.is-locked) {
    border-color: rgba(166, 242, 122, 0.86);
    box-shadow: inset 0 0 24px rgba(126, 217, 87, 0.14), 0 0 18px rgba(126, 217, 87, 0.08);
}
.mmf-rpg-modal .mmfr-shop-item.is-maxed {
    border-color: rgba(126, 217, 87, 0.68);
}
.mmf-rpg-modal .mmfr-row:nth-child(odd) {
    background: rgba(126, 217, 87, 0.045);
}
.mmf-rpg-modal .mmfr-row.is-me {
    background: rgba(126, 217, 87, 0.2);
    box-shadow: inset 0 0 18px rgba(126, 217, 87, 0.15);
}
.mmf-rpg-modal .mmfr-row-win {
    background: var(--mmrpg-ui-green);
    color: var(--mmrpg-ui-green-dark);
}
.mmf-rpg-modal .mmfr-trophy-art,
.mmf-rpg-modal .mmfr-achpop-art {
    background: radial-gradient(ellipse at 50% 38%, rgba(126, 217, 87, 0.18), transparent 70%), rgba(6, 12, 5, 0.76);
    box-shadow: inset 0 0 16px rgba(126, 217, 87, 0.16);
}
.mmf-rpg-modal .mmfr-codex-pic {
    background: radial-gradient(ellipse at 50% 38%, rgba(126, 217, 87, 0.18), transparent 70%), #0d140b;
    border-color: rgba(126, 217, 87, 0.2);
}
.mmf-rpg-modal .mmfr-codex-card--cuby {
    border-color: rgba(126, 217, 87, 0.62);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(126, 217, 87, 0.16), transparent 70%),
        linear-gradient(180deg, #1b2915, #10180d);
    box-shadow: inset 0 0 0 1px rgba(126, 217, 87, 0.22);
}
.mmf-rpg-modal .mmfr-codex-card--boss .mmfr-codex-name {
    color: #d6bd82;
}
.mmf-rpg-modal .mmfr-input {
    color: #f3f7df;
    caret-color: var(--mmrpg-ui-green);
}
.mmf-rpg-modal .mmfr-input:focus-visible {
    border-color: rgba(166, 242, 122, 0.9);
    box-shadow: inset 0 0 14px rgba(126, 217, 87, 0.16);
}

/* ── WP-A: In-Game-Screens auf den mmrpg-Menü-Stil (menu.js/options.js) ──
   Farbe/Panels sind oben schon grün. Hier die Geometrie + Typografie:
   runde Ecken statt der gekerbten clip-path-Blöcke der Arena, Fredoka statt
   Satoshi-Display auf Buttons/Titeln. text-transform:uppercase bleibt
   (mehrsprachig sicher). Das CUBY-Wortmark (--cuby, Bungee) und die
   Tier-Farben der Karten bleiben unangetastet. Gilt für alle 13 Overlays
   (Pause, Run-Ende, Start, Optionen, Shop, Board, Trophäen, Kodex,
   LevelUp, Truhe, Anomalie, HubInfo, Unlocks). */
.mmf-rpg-modal .mmfr-btn {
    clip-path: none;
    border-radius: 13px;
}
.mmf-rpg-modal .mmfr-btn-label {
    font-family: 'Fredoka', var(--font-display), sans-serif;
    font-weight: 700;
    letter-spacing: 0.012em;
}
.mmf-rpg-modal .mmfr-screen-title:not(.mmfr-screen-title--cuby) {
    font-family: 'Fredoka', var(--font-display), sans-serif;
    font-weight: 700;
    letter-spacing: 0;
}
.mmf-rpg-modal .mmfr-card,
.mmf-rpg-modal .mmfr-install-option {
    clip-path: none;
    border-radius: 14px;
}
.mmf-rpg-modal .mmfr-quality-btn,
.mmf-rpg-modal .mmfr-lang-current,
.mmf-rpg-modal .mmfr-input,
.mmf-rpg-modal .mmfr-board,
.mmf-rpg-modal .mmfr-shop-item,
.mmf-rpg-modal .mmfr-codex-card {
    border-radius: 12px;
}
/* Gameplay-Overlays (Pause, LevelUp, Truhe, Anomalie, Run-Ende) hatten
   keinen Scrim → Text schwamm über der Welt und wirkte alt. Menü-Screens
   (is-menu) bringen ihren eigenen Hintergrund mit, hier nur die anderen. */
.mmf-rpg-modal .mmfr-stage:not(.is-menu) .mmfr-overlay:not([hidden]) {
    background:
        radial-gradient(ellipse 72% 58% at 50% 44%, rgba(8, 14, 6, 0.58), transparent 72%),
        linear-gradient(180deg, rgba(6, 11, 5, 0.74) 0%, rgba(6, 10, 4, 0.5) 42%, rgba(5, 9, 4, 0.8) 100%);
}

/* ── Cubeworld Questjournal / Kopfgeld-Rewards ─────────────────────── */
.mmfr-questjournal {
    position: absolute;
    inset: 0;
    z-index: 34;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    background:
        radial-gradient(circle at 50% 18%, rgba(240, 179, 90, 0.16), transparent 36%),
        rgba(7, 5, 3, 0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--curve, ease);
}
.mmfr-questjournal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.mmfr-questjournal__shell {
    position: relative;
    width: min(92vw, 46rem);
    max-height: min(78vh, 42rem);
    overflow: auto;
    padding: clamp(1.1rem, 2.5vw, 1.8rem);
    color: #f8ecd2;
    text-align: left;
    background:
        linear-gradient(135deg, rgba(58, 37, 20, 0.96), rgba(17, 12, 8, 0.98)),
        repeating-linear-gradient(90deg, rgba(255, 224, 160, 0.04) 0 1px, transparent 1px 18px);
    border: 2px solid rgba(240, 179, 90, 0.54);
    box-shadow: 0 18px 0 #0b0704, 0 30px 70px rgba(0, 0, 0, 0.62), inset 0 0 48px rgba(240, 179, 90, 0.08);
    transform: translateY(18px) scale(0.97);
    transition: transform 0.24s cubic-bezier(0.18, 0.88, 0.22, 1);
}
.mmfr-questjournal.is-open .mmfr-questjournal__shell {
    transform: none;
}
.mmfr-questjournal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.35rem;
    height: 2.35rem;
    border: 2px solid rgba(248, 236, 210, 0.72);
    background: rgba(12, 8, 4, 0.72);
    color: #f8ecd2;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.mmfr-questjournal__close:hover,
.mmfr-questjournal__close:focus-visible,
.mmfr-questaccept:hover,
.mmfr-questaccept:focus-visible {
    border-color: #f0b35a;
    outline: 3px solid rgba(240, 179, 90, 0.3);
    outline-offset: 2px;
}
.mmfr-questjournal__eyebrow {
    margin: 0 0 0.35rem;
    color: #f0b35a;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.mmfr-questjournal h2 {
    margin: 0 3rem 1rem 0;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(2rem, 6vw, 4.2rem);
    line-height: 0.9;
    text-transform: uppercase;
}
.mmfr-questjournal__body {
    display: grid;
    gap: 0.85rem;
}
.mmfr-questmark {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    will-change: transform, opacity;
    pointer-events: none;
}
.mmfr-questmark__glyph {
    display: inline-block;
    font-family: var(--font-display, sans-serif);
    font-weight: 900;
    font-size: 1.7rem;
    line-height: 1;
    text-shadow: 0 2px 0 #0f0c07, 0 0 9px rgba(0, 0, 0, 0.55);
    animation: mmfr-qmark-bob 1.5s ease-in-out infinite;
}
.mmfr-questmark.is-offer .mmfr-questmark__glyph {
    color: #ffcf3a;
}
.mmfr-questmark.is-turnin .mmfr-questmark__glyph {
    color: #8be861;
}
@keyframes mmfr-qmark-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.mmfr-questtabs {
    display: flex;
    gap: 0.4rem;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.15rem 0;
    background: linear-gradient(rgba(10, 7, 4, 0.96), rgba(10, 7, 4, 0.9) 72%, rgba(10, 7, 4, 0));
}
.mmfr-questtab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.8rem;
    color: rgba(245, 235, 214, 0.66);
    background: rgba(26, 18, 10, 0.7);
    border: 1px solid rgba(255, 207, 58, 0.18);
    border-radius: 0.5rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.mmfr-questtab:hover {
    color: #ffe9a6;
    border-color: rgba(255, 207, 58, 0.4);
}
.mmfr-questtab.is-active {
    color: #1c1206;
    background: #ffcf3a;
    border-color: #ffcf3a;
}
.mmfr-questtab__count {
    min-width: 1.1rem;
    padding: 0 0.28rem;
    text-align: center;
    color: inherit;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 0.7rem;
    font-size: 0.66rem;
}
.mmfr-questtab.is-active .mmfr-questtab__count {
    background: rgba(28, 18, 6, 0.24);
}
.mmfr-questlist {
    display: grid;
    gap: 0.85rem;
}
.mmfr-questempty {
    margin: 0;
    padding: 1.4rem 0.4rem;
    color: rgba(245, 235, 214, 0.5);
    font-style: italic;
    text-align: center;
}
.mmfr-legend-panel {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(52, 32, 18, 0.86), rgba(10, 7, 4, 0.9));
    border: 1px solid rgba(255, 207, 58, 0.34);
    box-shadow: inset 4px 0 0 rgba(255, 207, 58, 0.86), 0 0 26px rgba(255, 207, 58, 0.08);
}
.mmfr-legend-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.mmfr-legend-eyebrow {
    margin: 0 0 0.25rem;
    color: #ffcf3a;
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.mmfr-legend-panel h3 {
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(1.35rem, 3.4vw, 2.1rem);
    line-height: 0.95;
    text-transform: uppercase;
}
.mmfr-legend-meter {
    margin: 0;
    flex: 0 0 auto;
    color: #120c06;
    background: #ffcf3a;
    padding: 0.32rem 0.5rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.mmfr-legend-copy {
    margin: 0.7rem 0 0;
    color: rgba(248, 236, 210, 0.78);
    font-size: 0.88rem;
    line-height: 1.45;
}
.mmfr-legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.55rem;
    margin-top: 0.85rem;
}
.mmfr-legend-card {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr);
    gap: 0.65rem;
    min-height: 4.5rem;
    padding: 0.62rem;
    background: rgba(7, 5, 3, 0.62);
    border: 1px solid rgba(248, 236, 210, 0.15);
}
.mmfr-legend-card.is-unlocked {
    border-color: rgba(255, 207, 58, 0.62);
    background: rgba(255, 207, 58, 0.08);
}
.mmfr-legend-card.is-locked {
    opacity: 0.62;
}
.mmfr-legend-art {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    overflow: hidden;
    background: rgba(248, 236, 210, 0.08);
    border: 1px solid rgba(248, 236, 210, 0.18);
}
.mmfr-legend-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mmfr-legend-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.mmfr-legend-card strong {
    min-width: 0;
    color: #f8ecd2;
    font-family: var(--font-display, sans-serif);
    font-size: 1rem;
    line-height: 1;
    text-transform: uppercase;
}
.mmfr-legend-card__top span {
    flex: 0 0 auto;
    padding: 0.2rem 0.34rem;
    color: #120c06;
    background: #f0b35a;
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mmfr-legend-card p {
    margin: 0.34rem 0 0;
    color: rgba(248, 236, 210, 0.74);
    font-size: 0.76rem;
    line-height: 1.32;
}
.mmfr-legend-card small {
    display: block;
    margin-top: 0.34rem;
    color: rgba(255, 207, 58, 0.8);
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mmfr-questcard {
    position: relative;
    padding: 1rem;
    background: rgba(14, 10, 6, 0.74);
    border: 1px solid rgba(248, 236, 210, 0.18);
    box-shadow: inset 4px 0 0 rgba(240, 179, 90, 0.72);
}
.mmfr-questcard--active {
    box-shadow: inset 4px 0 0 #7ed957, 0 0 24px rgba(126, 217, 87, 0.08);
}
.mmfr-questcard--claimed {
    box-shadow: inset 4px 0 0 #5cd2e6;
    opacity: 0.86;
}
.mmfr-questcard.is-tracked {
    box-shadow: inset 4px 0 0 #ffcf3a, 0 0 0 1px rgba(255, 207, 58, 0.5), 0 0 26px rgba(255, 207, 58, 0.14);
    border-color: rgba(255, 207, 58, 0.5);
}
.mmfr-questtrack {
    display: block;
    margin: 0.7rem 0 0;
    padding: 0.42rem 0.7rem;
    width: 100%;
    color: #f8ecd2;
    background: rgba(240, 179, 90, 0.12);
    border: 1px solid rgba(240, 179, 90, 0.42);
    border-radius: 2px;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mmfr-questtrack:hover,
.mmfr-questtrack:focus-visible {
    background: rgba(240, 179, 90, 0.22);
    border-color: rgba(240, 179, 90, 0.7);
    outline: none;
}
.mmfr-questtrack.is-on {
    color: #120c06;
    background: #ffcf3a;
    border-color: #ffcf3a;
}
.mmfr-questcard__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.mmfr-questcard h3 {
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(1.15rem, 3vw, 1.6rem);
    line-height: 0.98;
    text-transform: uppercase;
}
.mmfr-questcard__top span {
    flex: 0 0 auto;
    padding: 0.25rem 0.45rem;
    color: #120c06;
    background: #f0b35a;
    font-family: var(--font-mono, monospace);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mmfr-questcard p {
    margin: 0.6rem 0 0;
    color: rgba(248, 236, 210, 0.78);
    font-size: 0.92rem;
    line-height: 1.45;
}
.mmfr-questcard .mmfr-questreward {
    color: #f0b35a;
    font-weight: 800;
}
.mmfr-queststages {
    display: grid;
    gap: 0.38rem;
    margin: 0.8rem 0 0;
    padding-left: 1.2rem;
    color: rgba(248, 236, 210, 0.76);
    font-size: 0.82rem;
    line-height: 1.35;
}
.mmfr-questaccept {
    margin-top: 0.9rem;
    padding: 0.55rem 0.8rem;
    border: 2px solid rgba(248, 236, 210, 0.62);
    background: #f0b35a;
    color: #120c06;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.mmfr-questaccept:disabled {
    cursor: default;
    opacity: 0.62;
}
.mmfr-questtoast {
    position: absolute;
    top: clamp(4.5rem, 9vh, 6.5rem);
    right: clamp(0.85rem, 3vw, 1.6rem);
    z-index: 35;
    width: min(88vw, 24rem);
    padding: 0.8rem 0.9rem;
    color: #f8ecd2;
    text-align: left;
    background: linear-gradient(135deg, rgba(42, 28, 16, 0.96), rgba(12, 8, 4, 0.96));
    border: 2px solid rgba(240, 179, 90, 0.72);
    box-shadow: 0 8px 0 #0b0704, 0 18px 38px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px) scale(0.98);
}
.mmfr-questtoast.is-on {
    animation: mmfrQuestToast 3.6s cubic-bezier(0.18, 0.88, 0.22, 1) both;
}
.mmfr-questtoast strong,
.mmfr-questtoast span {
    display: block;
}
.mmfr-questtoast strong {
    color: #f0b35a;
    font-family: var(--font-display, sans-serif);
    font-size: 1.05rem;
    line-height: 1;
    text-transform: uppercase;
}
.mmfr-questtoast span {
    margin-top: 0.25rem;
    color: rgba(248, 236, 210, 0.78);
    font-size: 0.82rem;
    line-height: 1.35;
}
@keyframes mmfrQuestToast {
    0% { opacity: 0; transform: translateY(-12px) scale(0.96); }
    10% { opacity: 1; transform: translateY(0) scale(1); }
    82% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
@media (max-width: 560px) {
    .mmfr-questjournal { align-items: end; padding: 0.75rem; }
    .mmfr-questjournal__shell { width: 100%; max-height: 82vh; }
    .mmfr-legend-head { flex-direction: column; gap: 0.55rem; }
    .mmfr-legend-meter { flex: 0 1 auto; }
    .mmfr-legend-grid { grid-template-columns: 1fr; }
    .mmfr-questcard__top { flex-direction: column; gap: 0.45rem; }
    .mmfr-questtoast { left: 0.75rem; right: 0.75rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .mmfr-questjournal,
    .mmfr-questjournal__shell { transition: none; }
    .mmfr-questtoast.is-on { animation-duration: 0.01s; }
}

/* ── Klassenwahl-Overlay (Erststart + Kampfmeisterin im Dorf) ── */
.mmrpg-classsel { position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:16px;
  background:rgba(8,6,4,.82); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); pointer-events:auto;
  font-family:'Fredoka',var(--font-display),system-ui,sans-serif; }
.mmrpg-classsel__in { width:min(920px,96vw); max-height:92vh; overflow-y:auto; display:flex; flex-direction:column; gap:6px; align-items:center; }
.mmrpg-classsel__title { margin:0; font:800 clamp(20px,3.4vw,30px)/1.1 'Fredoka',sans-serif; color:#f6eeda; text-shadow:0 3px 0 rgba(0,0,0,.5); }
.mmrpg-classsel__sub { margin:0 0 8px; font:500 13px/1.4 'Fredoka',sans-serif; color:#d9c9ac; text-align:center; max-width:44rem; }
.mmrpg-classsel__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%; }
.mmrpg-classcard { display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:16px; border:2px solid #0b0805;
  background:linear-gradient(#33261a,#1b1209); box-shadow:0 6px 0 #0b0805, 0 14px 26px rgba(0,0,0,.45); }
.mmrpg-classcard__art { position:relative; height:132px; border-radius:12px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 22%, color-mix(in srgb, var(--cls) 42%, transparent), #12100b 62%);
  border:1px solid color-mix(in srgb, var(--cls) 55%, transparent); }
.mmrpg-classcard__art::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.13), transparent 40%, rgba(0,0,0,.2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -18px 24px rgba(0,0,0,.28); }
.mmrpg-classcard__icon { width:60px; height:60px; object-fit:contain; filter:drop-shadow(0 2px 4px #0009); }
.mmrpg-classcard__icon--art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:none; transform:scale(1.01); }
.mmrpg-classcard__ph { position:absolute; bottom:5px; font:800 8px/1 'Fredoka',sans-serif; letter-spacing:.14em;
  color:color-mix(in srgb, var(--cls) 78%, #ffffff 22%); opacity:.72; }
.mmrpg-classcard__name { margin:0; font:800 18px/1 'Fredoka',sans-serif; color:var(--cls); }
.mmrpg-classcard__tag { margin:0; font:500 11.5px/1.35 'Fredoka',sans-serif; color:#e7d9bf; min-height:30px; }
.mmrpg-classcard__skills { display:flex; gap:5px; }
.mmrpg-classcard__skills img { width:30px; height:30px; border-radius:7px; padding:3px; background:#241a11; border:1px solid #0f0b07; object-fit:contain; }
.mmrpg-classcard__pick { margin-top:2px; width:100%; }
.mmrpg-classsel__back { margin-top:10px; }
@media (max-width:720px) {
  .mmrpg-classsel__grid { grid-template-columns:repeat(2,1fr); }
  .mmrpg-classcard__art { height:116px; }
}
@media (max-width:420px) {
  .mmrpg-classcard { padding:10px; gap:7px; }
  .mmrpg-classcard__art { height:104px; }
  .mmrpg-classcard__tag { font-size:11px; min-height:34px; }
}