:root {
    --bg: #0f0e0d;
    --bg-2: #151311;
    --panel: #1b1815;
    --panel-2: #211d19;
    --border: #3b3128;
    --border-soft: #2b2520;
    --text: #f1e7d4;
    --muted: #9e917f;
    --accent: #d89a4b;
    --accent-2: #f1c36f;
    --danger: #d9685d;
    --good: #77b477;
    --bar: #c6853f;
    --nav-h: 72px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 50% -20%, #3a2517 0, transparent 35%),
        linear-gradient(180deg, #12100e 0%, var(--bg) 55%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}
button { font: inherit; }

.app-shell { max-width: 760px; min-height: 100vh; margin: 0 auto; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    min-height: 72px;
    background: rgba(15, 14, 13, .92);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
}
.topbar h1 { margin: 2px 0 0; font-size: 1.1rem; letter-spacing: .02em; }
.eyebrow { color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
.topbar-stats { display: flex; gap: 12px; color: var(--muted); font-size: .78rem; }
.topbar-stats b { color: var(--text); }

.content { padding: 14px 12px calc(var(--nav-h) + 28px); }
.panel {
    background: linear-gradient(180deg, rgba(34, 30, 26, .98), rgba(26, 23, 20, .98));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.2);
    margin-bottom: 12px;
}
.panel-title-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.panel h2, .panel h3 { margin: 0; }
.panel h2 { font-size: 1.05rem; }
.panel h3 { font-size: .92rem; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-card { padding: 10px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-2); }
.stat-card span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stat-card b { display: block; margin-top: 4px; font-size: .95rem; }

.activity-card { overflow: hidden; }
.activity-head { display: flex; align-items: center; gap: 12px; }
.activity-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #120f0d; border: 1px solid var(--border); font-size: 1.45rem; }
.activity-copy { flex: 1; min-width: 0; }
.activity-copy h3 { margin: 0 0 3px; font-size: 1rem; }
.progress-track { width: 100%; height: 10px; border-radius: 999px; background: #0c0b0a; overflow: hidden; border: 1px solid #31271f; margin-top: 12px; }
.progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #8d5327, var(--accent-2)); transition: width .1s linear; }
.progress-label { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: .75rem; }

.primary-btn, .secondary-btn, .danger-btn {
    border: 0;
    border-radius: 11px;
    min-height: 44px;
    padding: 10px 14px;
    font-weight: 800;
    cursor: pointer;
}
.primary-btn { color: #17110a; background: linear-gradient(180deg, #f1c36f, #c98b3f); }
.secondary-btn { color: var(--text); background: #28221d; border: 1px solid #4a3b2f; }
.danger-btn { color: #fff4ef; background: #783b36; border: 1px solid #a9584f; }
.full { width: 100%; }
button:disabled { opacity: .42; cursor: not-allowed; }

.skill-list, .action-list, .event-list { display: grid; gap: 8px; }
.skill-row, .action-row, .event-row {
    border: 1px solid var(--border-soft);
    background: #171411;
    border-radius: 13px;
    padding: 11px;
}
.skill-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.skill-row .mini-track { grid-column: 1 / -1; }
.mini-track { height: 5px; border-radius: 999px; overflow: hidden; background: #090807; }
.mini-fill { height: 100%; background: var(--bar); }
.action-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; }
.action-row.locked { opacity: .58; }
.action-icon { width: 44px; height: 44px; display: grid; place-items: center; background: #0f0d0b; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 1.3rem; }
.action-meta { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: .72rem; margin-top: 4px; }
.action-btn { min-width: 68px; }

.inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.item-card { min-height: 106px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-soft); background: #171411; text-align: center; }
.item-icon { font-size: 1.8rem; margin-bottom: 6px; }
.item-name { font-size: .78rem; font-weight: 700; line-height: 1.15; }
.item-qty { margin-top: 5px; color: var(--accent-2); font-size: .82rem; font-weight: 800; }

.bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 30;
    width: min(760px, 100%);
    min-height: var(--nav-h);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 7px max(5px, env(safe-area-inset-left)) max(7px, env(safe-area-inset-bottom));
    background: rgba(18, 16, 14, .96);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
}
.nav-btn { color: var(--muted); border: 0; background: transparent; border-radius: 10px; padding: 5px 2px; }
.nav-btn span { display: block; font-size: 1.22rem; line-height: 1.3; }
.nav-btn small { font-size: .66rem; }
.nav-btn.active { color: var(--accent-2); background: #231b15; }

.toast-stack { position: fixed; z-index: 60; top: 82px; left: 50%; transform: translateX(-50%); width: min(92vw, 460px); display: grid; gap: 8px; pointer-events: none; }
.toast { background: #211b17; color: var(--text); border: 1px solid #5b4634; border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.36); animation: toastIn .2s ease-out; }
.toast.good { border-color: #557358; }
.toast.bad { border-color: #8f4a43; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } }

.modal-backdrop { position: fixed; z-index: 80; inset: 0; background: rgba(0,0,0,.68); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.modal-backdrop.hidden { display: none; }
.modal-card { width: min(520px, 100%); background: #211c18; border: 1px solid #5b493a; border-radius: 18px; padding: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.48); }
.modal-card h2 { margin: 5px 0 14px; }
.offline-line { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border-soft); padding: 9px 0; }
.offline-line:last-child { border: 0; }

.empty-state { text-align: center; padding: 22px 10px; color: var(--muted); }
.placeholder-badge { display: inline-block; padding: 5px 8px; border-radius: 999px; background: #28221d; border: 1px solid var(--border); color: var(--accent-2); font-size: .72rem; font-weight: 800; }
.loading-panel { text-align: center; padding: 32px; color: var(--muted); }

@media (min-width: 600px) {
    .content { padding-left: 18px; padding-right: 18px; }
    .inventory-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Stage 2: data-driven skill/recipe controls */
.stage-two-stats { grid-template-columns: repeat(2, 1fr); }
.skill-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 0 10px;
    margin-bottom: 2px;
    scrollbar-width: none;
}
.skill-tabs::-webkit-scrollbar { display: none; }
.skill-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #15120f;
    color: var(--muted);
    font-weight: 750;
}
.skill-tab.active {
    color: #17110a;
    background: var(--accent-2);
    border-color: var(--accent-2);
}
.action-row-rich { align-items: start; }
.action-main { min-width: 0; }
.recipe-lines { display: grid; gap: 6px; margin-top: 8px; }
.recipe-label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.pill-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.reward-line { margin-top: 7px; }
.item-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    background: #221c17;
    border: 1px solid #3a3028;
    color: #d8cbb8;
    font-size: .67rem;
}
.item-pill.shortage { border-color: #79433e; color: #e3a29b; }
.warning-text { margin-top: 7px; color: #d89a83; font-size: .7rem; }
.tiny { font-size: .64rem; }
.item-type { margin-top: 4px; }

@media (min-width: 600px) {
    .stage-two-stats { grid-template-columns: repeat(4, 1fr); }
}

/* Stage 3: equipment, item details and character stats */
.stage-three-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.item-card {
    color: var(--text);
    width: 100%;
    cursor: pointer;
    font: inherit;
}
.item-card:active { transform: translateY(1px); }
.equipped-badge {
    display: inline-flex;
    margin-top: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #3a2a1a;
    border: 1px solid #805d31;
    color: var(--accent-2);
    font-size: .62rem;
    font-weight: 800;
}
.hp-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-soft);
    background: #15120f;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.hp-summary span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        ". helmet ."
        "weapon body amulet"
        "gloves legs ring"
        "ammo boots spell";
    gap: 8px;
}
.slot-weapon { grid-area: weapon; }
.slot-helmet { grid-area: helmet; }
.slot-body { grid-area: body; }
.slot-legs { grid-area: legs; }
.slot-gloves { grid-area: gloves; }
.slot-boots { grid-area: boots; }
.slot-amulet { grid-area: amulet; }
.slot-ring { grid-area: ring; }
.slot-ammo { grid-area: ammo; }
.slot-spell { grid-area: spell; }
.equipment-slot {
    min-height: 76px;
    border-radius: 12px;
    border: 1px dashed #4a3c31;
    background: #15120f;
    color: var(--text);
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    text-align: center;
    overflow: hidden;
}
button.equipment-slot { cursor: pointer; font: inherit; border-style: solid; }
.equipment-slot span { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.equipment-slot b { font-size: .7rem; line-height: 1.15; overflow-wrap: anywhere; }
.slot-empty { color: #75695b; font-size: .7rem; }
.character-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #17130f;
    color: var(--text);
    font-size: 1.35rem;
    cursor: pointer;
}
.item-modal-card { max-height: min(82vh, 660px); overflow-y: auto; }
.item-detail-head { display: flex; align-items: center; gap: 13px; margin: 10px 0 12px; }
.item-detail-head h2 { margin: 3px 0 4px; }
.item-detail-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #120f0d;
    font-size: 2rem;
}
.item-description { color: #c8baa7; font-size: .83rem; line-height: 1.45; }
.detail-section { margin: 12px 0; }
.stat-chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-chip {
    display: inline-flex;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px solid #49392c;
    background: #17130f;
    color: #e6d5bd;
    font-size: .72rem;
    font-weight: 750;
}

@media (min-width: 600px) {
    .stage-three-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .character-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Stage 3 UX pass: stable activity pages, Philosopher and smoother live progress */
body,
button,
input,
select,
textarea {
    font-family: "Philosopher", Georgia, "Times New Roman", serif;
}

body {
    font-size: 17px;
}

.topbar h1 { font-size: 1.35rem; }
.panel h2 { font-size: 1.25rem; }
.panel h3 { font-size: 1.08rem; }
.eyebrow { font-size: .72rem; }
.small { font-size: .82rem; }

/* Do not animate a freshly recreated bar from zero. The animation loop updates
   its exact server-synchronised width every frame. */
.progress-fill {
    transition: none;
    will-change: width;
}

/* Skills are now a navigation list. Opening one skill replaces the list with
   its own stable detail page; there is no horizontally scrolling tab row to
   snap back during server ticks. */
.skill-list { gap: 10px; }
.skill-row.skill-entry {
    width: 100%;
    min-height: 104px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    color: var(--text);
    text-align: left;
    font: inherit;
}

button.skill-entry {
    cursor: pointer;
    appearance: none;
}

button.skill-entry:active {
    transform: translateY(1px);
    border-color: #6b4c31;
}

.skill-entry.has-active {
    border-color: #805d31;
    box-shadow: inset 3px 0 0 var(--accent);
}

.skill-entry.disabled-skill {
    opacity: .55;
}

.skill-entry-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    border: 1px solid var(--border-soft);
    background: #100e0c;
    font-size: 1.55rem;
}

.skill-entry-main { min-width: 0; }
.skill-entry-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
    font-size: 1.08rem;
}
.skill-entry-title b:last-child { white-space: nowrap; }
.skill-entry-main .mini-track { margin-top: 10px; }
.skill-entry-tail {
    min-width: 42px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.skill-chevron {
    color: var(--accent-2);
    font-size: 2rem;
    line-height: 1;
}
.skill-state {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #28221d;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
}
.skill-state.active {
    color: var(--accent-2);
    border-color: #805d31;
    background: #302318;
}

.skill-back {
    border: 0;
    background: transparent;
    color: var(--accent-2);
    padding: 2px 0 12px;
    font-size: 1rem;
    cursor: pointer;
}
.skill-detail-title-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.skill-detail-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: #100e0c;
    font-size: 1.8rem;
}
.skill-detail-copy h2 {
    margin: 2px 0 3px;
    font-size: 1.45rem;
}
.skill-detail-level {
    color: var(--accent-2);
    font-size: 1.28rem;
    font-weight: 700;
    white-space: nowrap;
}
.skill-detail-track {
    height: 7px;
    margin-top: 14px;
}
.activity-chooser-title { margin-top: 6px; }

.compact-active-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.compact-active-card > div { min-width: 0; }
.compact-active-card b { display: block; margin: 4px 0 2px; }

.action-row.active-action {
    border-color: #805d31;
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Philosopher has wider letter shapes than the previous system font. Give the
   bottom navigation and compact metadata a little more breathing room. */
.nav-btn small { font-size: .72rem; }
.topbar-stats { font-size: .84rem; }
.action-meta { font-size: .76rem; }
.item-name { font-size: .84rem; }

@media (max-width: 380px) {
    .skill-row.skill-entry {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 9px;
        padding: 12px 10px;
    }
    .skill-entry-icon { width: 44px; height: 44px; }
    .skill-entry-title { font-size: 1rem; }
    .action-row { grid-template-columns: 40px minmax(0, 1fr); }
    .action-icon { width: 40px; height: 40px; }
    .action-btn { grid-column: 1 / -1; width: 100%; }
}

/* Stage 4: server-authoritative combat */
.hp-track {
    height: 11px;
    border-radius: 999px;
    overflow: hidden;
    background: #090807;
    border: 1px solid #302820;
}
.hp-fill { height: 100%; transition: width .18s ease-out; }
.hp-fill.hero-hp { background: linear-gradient(90deg, #587b55, #8fb978); }
.hp-fill.monster-hp { background: linear-gradient(90deg, #7d3e38, #c66858); }
.combat-home-health,
.combat-home-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.combat-home-health {
    margin-top: 12px;
    color: var(--muted);
    font-size: .72rem;
}
.combat-home-health span:last-child { text-align: right; }

.combat-settings { display: grid; gap: 10px; }
.toggle-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: #15120f;
    padding: 10px 11px;
}
.toggle-row input { width: 20px; height: 20px; accent-color: var(--accent); }
.toggle-row b, .toggle-row small { display: block; }
.toggle-row small { color: var(--muted); margin-top: 2px; font-size: .72rem; line-height: 1.25; }
.combat-setting-grid { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.combat-setting-grid select {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #15120f;
    color: var(--text);
    padding: 8px 9px;
    font-size: .8rem;
}

.monster-list { display: grid; gap: 10px; }
.monster-card {
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: #171411;
    padding: 12px;
}
.monster-card.locked { opacity: .58; }
.monster-card.boss-card { border-color: #765b35; box-shadow: inset 3px 0 0 #a77d3f; }
.monster-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.monster-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #0f0d0b;
    border: 1px solid var(--border-soft);
    font-size: 1.5rem;
}
.monster-copy { min-width: 0; }
.monster-copy h3 { margin: 2px 0 3px; }
.monster-stat-grid,
.combat-estimate {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 9px;
}
.combat-estimate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.monster-stat-grid span,
.combat-estimate span {
    padding: 6px 5px;
    border-radius: 8px;
    background: #100e0c;
    color: var(--muted);
    font-size: .65rem;
    text-align: center;
}
.monster-stat-grid b,
.combat-estimate b { display: block; color: var(--text); margin-top: 2px; }
.loot-wrap { margin-top: 10px; }
.loot-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 9px;
    background: #13110f;
    border: 1px solid var(--border-soft);
    color: #dccdb8;
    font-size: .68rem;
}
.loot-pill small { color: var(--muted); }

.combat-arena { overflow: hidden; }
.fighters {
    display: grid;
    grid-template-columns: 1fr 34px 1fr;
    gap: 7px;
    align-items: center;
}
.fighter-card {
    min-width: 0;
    padding: 11px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: #15120f;
    text-align: center;
}
.fighter-card h3 { margin: 5px 0 3px; overflow-wrap: anywhere; }
.fighter-icon { font-size: 2.15rem; min-height: 48px; display: grid; place-items: center; }
.fighter-hp { color: var(--muted); font-size: .72rem; margin-bottom: 7px; }
.versus { color: var(--accent-2); font-weight: 800; text-align: center; font-size: .8rem; }
.attack-track {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: #090807;
    border: 1px solid #2e271f;
    margin-top: 9px;
}
.attack-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #8d5327, var(--accent-2)); }
.monster-attack .attack-fill { background: linear-gradient(90deg, #733d38, #d16d5e); }
.attack-label,
.fighter-stats { display: flex; justify-content: space-between; gap: 5px; margin-top: 5px; color: var(--muted); font-size: .64rem; }
.combat-run-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}
.combat-run-stats > div { border: 1px solid var(--border-soft); background: #15120f; border-radius: 10px; padding: 8px; }
.combat-run-stats span, .combat-run-stats b { display: block; }
.combat-run-stats span { color: var(--muted); font-size: .62rem; }
.combat-run-stats b { margin-top: 3px; font-size: .76rem; }

@media (max-width: 430px) {
    .combat-setting-grid { grid-template-columns: 1fr; }
    .monster-head { grid-template-columns: 44px minmax(0, 1fr); }
    .monster-head .primary-btn { grid-column: 1 / -1; width: 100%; }
    .monster-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .combat-estimate { grid-template-columns: 1fr; }
    .fighters { grid-template-columns: 1fr; }
    .versus { padding: 1px 0; }
    .combat-run-stats { grid-template-columns: 1fr 1fr; }
    .combat-run-stats > div:last-child { grid-column: 1 / -1; }
}

/* Stage 5 — locations, abilities and temporary effects */
.effect-list { display: grid; gap: 10px; }
.effect-row { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 14px; background: rgba(255,255,255,.025); }
.effect-icon { width: 42px; height: 42px; display: grid; place-items: center; font-size: 24px; border-radius: 12px; background: rgba(214,145,69,.08); }
.effect-copy { display: grid; gap: 3px; min-width: 0; }
.effect-copy span { color: var(--muted, #a79b8e); font-size: .86rem; }
.location-list { display: grid; gap: 16px; }
.location-block { border: 1px solid rgba(214,145,69,.18); border-radius: 18px; padding: 14px; background: rgba(255,255,255,.018); }
.location-block.locked-location { opacity: .72; }
.location-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.location-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(214,145,69,.09); font-size: 26px; }
.location-copy { min-width: 0; flex: 1; }
.location-copy h3 { margin: 2px 0 4px; }
.location-copy p { margin: 0 0 4px; color: var(--muted, #a79b8e); font-size: .9rem; line-height: 1.35; }
.ability-wrap { margin-top: 10px; }
.ability-list { display: grid; gap: 6px; margin-top: 6px; }
.ability-pill { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid rgba(197,139,255,.18); background: rgba(116,73,153,.08); border-radius: 10px; }
.ability-pill small { color: var(--muted, #a79b8e); line-height: 1.25; }
@media (min-width: 700px) { .effect-list { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Stage 5.1 — Melee / Ranged / Magic combat styles */
.combat-loadout {
    display: grid;
    gap: 12px;
    margin: 16px 0 18px;
    padding: 14px;
    border: 1px solid var(--border, rgba(255,255,255,.10));
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.combat-loadout > label,
.combat-setting-grid > label {
    display: grid;
    gap: 6px;
}

.combat-loadout select,
.combat-settings select {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: #15120f;
    color: var(--text, #f2e9dc);
    font: inherit;
}

.combat-loadout-weapon {
    display: grid;
    gap: 4px;
}

.style-readiness {
    padding: 9px 11px;
    border-radius: 12px;
    font-size: .92rem;
}

.style-readiness.ready {
    background: rgba(103, 176, 112, .12);
    border: 1px solid rgba(103, 176, 112, .25);
}

.style-readiness.not-ready {
    background: rgba(210, 125, 79, .10);
    border: 1px solid rgba(210, 125, 79, .25);
}

.style-defence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
}

.style-defence-grid span {
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    font-size: .78rem;
    text-align: center;
}

.style-defence-grid b {
    display: block;
    margin-top: 2px;
}

.active-loadout-line {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0 14px;
}

.active-loadout-line span {
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.035);
    font-size: .82rem;
}

.combat-skill-entry {
    cursor: default;
}

@media (max-width: 430px) {
    .style-defence-grid {
        grid-template-columns: 1fr;
    }
}

/* Stage 5.2 — compact mobile UI + location drill-down combat navigation */
:root { --nav-h: 62px; }

body {
    font-family: "Philosopher", Georgia, "Times New Roman", serif;
    font-size: 14px;
}

.topbar {
    min-height: 58px;
    padding: 9px 13px;
}
.topbar h1 { font-size: 1.08rem; }
.topbar-stats { gap: 9px; font-size: .76rem; }
.eyebrow { font-size: .61rem; letter-spacing: .13em; }
.small { font-size: .72rem; }

.content { padding: 9px 8px calc(var(--nav-h) + 18px); }
.panel {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.panel-title-row { gap: 8px; margin-bottom: 8px; }
.panel h2 { font-size: 1rem; }
.panel h3 { font-size: .9rem; }

.primary-btn, .secondary-btn, .danger-btn {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: .82rem;
}

.stat-grid { gap: 5px; }
.stat-card { padding: 7px; border-radius: 9px; }
.stat-card span { font-size: .58rem; }
.stat-card b { margin-top: 2px; font-size: .82rem; }

.activity-head { gap: 8px; }
.activity-icon { width: 38px; height: 38px; border-radius: 9px; font-size: 1.15rem; }
.activity-copy h3 { font-size: .9rem; }
.progress-track { height: 7px; margin-top: 8px; }
.progress-label { margin-top: 4px; font-size: .66rem; }

.skill-list, .action-list, .event-list { gap: 6px; }
.skill-row, .action-row, .event-row { padding: 8px; border-radius: 10px; }
.skill-row.skill-entry {
    min-height: 72px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 9px;
}
.skill-entry-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    font-size: 1.15rem;
}
.skill-entry-title { margin-bottom: 2px; font-size: .91rem; }
.skill-entry-main .mini-track { margin-top: 6px; }
.skill-entry-tail { min-width: 28px; }
.skill-chevron { font-size: 1.45rem; }
.skill-state { min-height: 21px; padding: 2px 6px; font-size: .61rem; }
.mini-track { height: 4px; }

.skill-back, .combat-location-back {
    padding: 0 0 7px;
    font-size: .82rem;
}
.skill-detail-title-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
}
.skill-detail-icon { width: 42px; height: 42px; border-radius: 10px; font-size: 1.25rem; }
.skill-detail-copy h2 { font-size: 1.08rem; }
.skill-detail-level { font-size: 1rem; }
.skill-detail-track { height: 5px; margin-top: 8px; }

.action-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 7px; }
.action-icon { width: 36px; height: 36px; border-radius: 8px; font-size: 1.05rem; }
.action-meta { gap: 5px; margin-top: 2px; font-size: .64rem; }
.action-btn { min-width: 54px; }
.recipe-lines { gap: 4px; margin-top: 5px; }
.item-pill { padding: 3px 5px; font-size: .62rem; border-radius: 7px; }
.recipe-label { font-size: .59rem; }

.inventory-grid { gap: 5px; }
.item-card { min-height: 82px; padding: 7px 5px; border-radius: 9px; }
.item-icon { font-size: 1.35rem; margin-bottom: 4px; }
.item-name { font-size: .7rem; }
.item-qty { margin-top: 3px; font-size: .72rem; }
.item-type, .tiny { font-size: .58rem; }

.bottom-nav {
    min-height: var(--nav-h);
    padding-top: 4px;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
}
.nav-btn { padding: 3px 1px; border-radius: 8px; }
.nav-btn span { font-size: 1.04rem; }
.nav-btn small { font-size: .58rem; }

.toast-stack { top: 64px; gap: 5px; }
.toast { padding: 7px 9px; border-radius: 9px; font-size: .76rem; }
.modal-card { padding: 12px; border-radius: 14px; }
.empty-state { padding: 14px 8px; }

/* Compact combat setup: hidden until the player needs to change loadout. */
.combat-config-details {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(34,30,26,.96), rgba(26,23,20,.96));
    overflow: hidden;
}
.combat-config-details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    color: var(--muted);
    font-size: .72rem;
}
.combat-config-details > summary::-webkit-details-marker { display: none; }
.combat-config-details > summary::after { content: "▾"; color: var(--accent-2); }
.combat-config-details[open] > summary::after { content: "▴"; }
.combat-config-details > summary b { color: var(--text); font-size: .76rem; margin-left: auto; }
.combat-config-body { padding: 0 9px 9px; }
.combat-loadout { gap: 7px; margin: 0 0 8px; padding: 8px; border-radius: 10px; }
.combat-settings { gap: 6px; }
.combat-setting-grid { gap: 5px; }
.combat-loadout > label, .combat-setting-grid > label { gap: 3px; }
.combat-loadout select, .combat-settings select {
    min-height: 34px;
    padding: 5px 7px;
    border-radius: 8px;
    font-size: .76rem;
}
.style-readiness { padding: 6px 8px; border-radius: 8px; font-size: .72rem; }
.toggle-row { padding: 7px; gap: 7px; border-radius: 9px; }
.toggle-row small { font-size: .61rem; }

/* Combat now opens a compact location list first. */
.compact-page-head { padding-bottom: 9px; }
.compact-page-head .panel-title-row { margin-bottom: 3px; }
.compact-help { line-height: 1.25; }
.compact-location-panel { padding: 7px; }
.compact-location-list { gap: 5px; }
.location-card {
    width: 100%;
    border: 1px solid var(--border-soft);
    background: #171411;
    color: var(--text);
    border-radius: 10px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.location-card:active { border-color: #735233; transform: translateY(1px); }
.location-card.locked-location { opacity: .62; }
.location-card.completed-location { border-color: rgba(119,180,119,.32); box-shadow: inset 2px 0 0 rgba(119,180,119,.7); }
.compact-location-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 9px; font-size: 19px; }
.location-card-copy { min-width: 0; display: grid; gap: 1px; }
.location-title-line { display: flex; align-items: center; gap: 6px; }
.location-title-line b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-state { margin-left: auto; padding: 1px 5px; border-radius: 999px; border: 1px solid var(--border); font-size: .53rem; letter-spacing: .06em; color: var(--muted); }
.location-state.open { color: var(--accent-2); }
.location-state.cleared { color: var(--good); border-color: rgba(119,180,119,.35); }
.location-meta, .location-boss-line, .location-lock-reason { font-size: .62rem; line-height: 1.2; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-boss-line { color: #d6bea0; }
.location-lock-reason { color: #c88777; }
.location-chevron { color: var(--accent-2); font-size: 1.25rem; text-align: center; }

/* Location detail is its own stable sub-page and survives server refreshes. */
.combat-location-back {
    border: 0;
    background: transparent;
    color: var(--accent-2);
    cursor: pointer;
}
.location-detail-panel { padding: 9px 10px; }
.location-detail-head { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 8px; align-items: center; }
.location-detail-head .location-icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 21px; border-radius: 9px; }
.location-detail-copy h2 { margin: 0 0 1px; font-size: 1.02rem; }
.compact-location-description {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.compact-location-warning, .location-clear-note { margin-top: 6px; font-size: .66rem; }
.location-clear-note { color: var(--good); }
.compact-target-panel { padding: 8px; }
.compact-target-panel .panel-title-row { margin-bottom: 6px; }
.compact-monster-list { gap: 5px; }

/* Monster cards deliberately show only combat-critical data in the list. */
.monster-card.compact-monster {
    padding: 7px;
    border-radius: 10px;
}
.compact-monster-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
}
.compact-monster-icon { width: 36px; height: 36px; min-height: 0; border-radius: 8px; font-size: 1.2rem; }
.compact-monster-copy { display: grid; gap: 1px; }
.monster-title-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.monster-title-line b { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monster-role { padding: 1px 4px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .5rem; letter-spacing: .05em; }
.monster-role.boss-role { color: var(--accent-2); border-color: #765b35; }
.monster-summary, .monster-defence-inline { color: var(--muted); font-size: .6rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monster-defence-inline { color: #bcae9c; }
.compact-fight-btn { min-height: 30px; padding: 5px 8px; min-width: 48px; font-size: .7rem; }
.monster-one-line {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 5px;
    margin-top: 4px;
    color: var(--muted);
    font-size: .58rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.monster-one-line span { color: #cdb89d; }
.compact-warning { margin-top: 4px; font-size: .6rem; }
.monster-card.progression-boss { border-color: #765b35; box-shadow: inset 2px 0 0 #b88642; }

/* Active combat and effects are also denser. */
.combat-arena { padding: 9px; }
.fighters { gap: 5px; }
.fighter-card { padding: 7px; border-radius: 10px; }
.fighter-icon { font-size: 1.55rem; min-height: 34px; }
.fighter-card h3 { margin: 2px 0 1px; font-size: .82rem; }
.fighter-hp { font-size: .62rem; margin-bottom: 4px; }
.attack-track { height: 5px; margin-top: 6px; }
.attack-label, .fighter-stats { margin-top: 3px; font-size: .56rem; }
.combat-run-stats { gap: 4px; margin-top: 6px; }
.combat-run-stats > div { padding: 5px; border-radius: 7px; }
.combat-run-stats span { font-size: .54rem; }
.combat-run-stats b { margin-top: 1px; font-size: .66rem; }
.active-loadout-line { gap: 4px; margin: 6px 0 8px; }
.active-loadout-line span { padding: 3px 6px; font-size: .62rem; }
.effect-list { gap: 5px; }
.effect-row { gap: 7px; padding: 7px; border-radius: 9px; }
.effect-icon { width: 32px; height: 32px; font-size: 17px; border-radius: 8px; }
.effect-copy span { font-size: .67rem; }

@media (max-width: 430px) {
    .combat-setting-grid { grid-template-columns: 1fr 1fr; }
    .fighters { grid-template-columns: 1fr 24px 1fr; }
    .versus { padding: 0; font-size: .64rem; }
    .combat-run-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .combat-run-stats > div:last-child { grid-column: auto; }
    .style-defence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .skill-row.skill-entry { grid-template-columns: 36px minmax(0,1fr) auto; gap: 7px; padding: 7px; }
    .skill-entry-icon { width: 36px; height: 36px; }
    .action-row { grid-template-columns: 34px minmax(0,1fr) auto; }
    .action-icon { width: 34px; height: 34px; }
    .action-btn { grid-column: auto; width: auto; }
}

/* Stage 6 — permanent progression surfaces stay compact on phone. */
.progression-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 7px;
}
.progression-tab {
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: var(--muted);
    padding: 5px 3px;
    font-family: inherit;
    font-size: .62rem;
}
.progression-tab.active {
    color: var(--accent-2);
    border-color: #765b35;
    background: rgba(184,134,66,.12);
}
.compact-character-panel, .compact-stats-panel { padding: 8px; }
.progression-summary-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 7px;
}
.progression-summary-panel > div {
    min-width: 0;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.13);
    border-radius: 8px;
    padding: 6px;
    display: grid;
    gap: 1px;
}
.progression-summary-panel span { color: var(--muted); font-size: .56rem; }
.progression-summary-panel b { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.achievement-list { display: grid; gap: 5px; }
.achievement-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(0,0,0,.12);
}
.achievement-row.locked-achievement { opacity: .66; }
.achievement-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    font-size: 1rem;
}
.achievement-copy { min-width: 0; display: grid; gap: 2px; }
.achievement-title { display: flex; justify-content: space-between; gap: 7px; font-size: .72rem; }
.achievement-requirement, .achievement-done { font-size: .58rem; line-height: 1.2; }
.achievement-requirement { color: var(--muted); }
.achievement-done { color: var(--good); }
.collection-section { padding: 7px; }
.collection-chip-wrap { display: flex; flex-wrap: wrap; gap: 4px; }
.collection-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.14);
    font-size: .58rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.collection-chip.missing {
    opacity: .42;
    filter: grayscale(.45);
    border-style: dashed;
}
.ff-codex-own { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ff-codex-own.yes { color: #7dffb0; }
.ff-codex-own.no { color: #8aa3b3; }
.ff-codex-card.missing { opacity: .82; }
.ff-codex-browse { display: grid; gap: 8px; }
.ff-codex-tabs small { color: var(--muted); font-weight: 600; }
.loot-pill.missing { opacity: .48; filter: grayscale(.3); }

/* stage1550-codex-owned */

@media (max-width: 380px) {
    .progression-tab { font-size: .56rem; padding-left: 1px; padding-right: 1px; }
    .progression-summary-panel { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* Stage 6.1 recipe filters */
.recipe-filter-bar {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 2px 0 7px;
    scrollbar-width: none;
}
.recipe-filter-bar::-webkit-scrollbar { display: none; }
.recipe-filter {
    flex: 0 0 auto;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: #15120f;
    color: var(--muted);
    font: inherit;
    font-size: .62rem;
}
.recipe-filter small { opacity: .72; font-size: .55rem; }
.recipe-filter.active {
    color: #fff4df;
    border-color: #9f7041;
    background: #2b2118;
}
.autosave-note { margin-top: 5px; text-align: right; }
.equipment-rarity { display: block; margin-top: 2px; font-size: .52rem; opacity: .82; }
.rarity-detail { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rarity-detail b { font-size: .72rem; }
.rarity-detail span { font-size: .58rem; opacity: .82; text-align: right; }

/* 21-tier equipment rarity palette. Every tier has its own identity. */
.rarity-common { --rarity: #929292; border-color: #707070; }
.rarity-uncommon { --rarity: #63b86d; border-color: #4e9c59; }
.rarity-rare { --rarity: #5798e8; border-color: #447fc4; }
.rarity-epic { --rarity: #a36be0; border-color: #8752c2; }
.rarity-legendary { --rarity: #e5a942; border-color: #c58a27; }
.rarity-runebound { --rarity: #34c9c3; border-color: #2aa9a4; }
.rarity-arcane { --rarity: #dc59e8; border-color: #bd3eca; }
.rarity-sovereign { --rarity: #f0d98d; border-color: #cfb25a; }
.rarity-umbral { --rarity: #7051a8; border-color: #574087; }

.rarity-hexed {
    --rarity: #df4eb9;
    border-color: #c23f88;
    background-image: linear-gradient(135deg, rgba(104,38,151,.24), rgba(157,30,63,.22));
    box-shadow: 0 0 11px rgba(213,49,139,.38), inset 0 0 8px rgba(123,47,183,.18);
}
.rarity-occult {
    --rarity: #46ded2;
    border-color: #39b7b0;
    background-image: linear-gradient(135deg, rgba(13,126,126,.24), rgba(105,49,154,.23));
    box-shadow: 0 0 12px rgba(49,210,206,.34), 0 0 5px rgba(128,61,194,.30);
}
.rarity-lostborn {
    --rarity: #a9d9ff;
    border-color: #7ab9e8;
    background-image: linear-gradient(135deg, rgba(50,111,175,.24), rgba(215,236,255,.16));
    box-shadow: 0 0 12px rgba(118,190,255,.40), inset 0 0 7px rgba(226,244,255,.15);
}
.rarity-nightbound {
    --rarity: #7774e7;
    border-color: #5650b6;
    background-image: linear-gradient(135deg, rgba(29,32,91,.34), rgba(63,25,92,.30));
    box-shadow: 0 0 13px rgba(82,77,205,.42), 0 0 5px rgba(64,31,116,.38);
}
.rarity-infernal {
    --rarity: #ff6a35;
    border-color: #db4628;
    background-image: linear-gradient(135deg, rgba(197,72,14,.28), rgba(142,17,17,.30));
    box-shadow: 0 0 14px rgba(255,80,30,.46), 0 0 6px rgba(182,20,18,.36);
}
.rarity-ascendant {
    --rarity: #ffe18a;
    border-color: #e4bd4d;
    background-image: linear-gradient(135deg, rgba(190,139,31,.25), rgba(255,248,211,.18));
    box-shadow: 0 0 14px rgba(255,211,91,.48), 0 0 5px rgba(255,246,210,.34);
}
.rarity-riftborn {
    --rarity: #a477ff;
    border-color: #725af2;
    background-image: linear-gradient(135deg, rgba(116,52,205,.30), rgba(32,103,230,.27));
    box-shadow: 0 0 15px rgba(135,79,255,.48), 0 0 7px rgba(45,125,255,.37);
}
.rarity-timeless {
    --rarity: #d9f2f3;
    border-color: #a7d9de;
    background-image: linear-gradient(135deg, rgba(170,178,187,.19), rgba(121,215,221,.22));
    box-shadow: 0 0 15px rgba(194,245,247,.50), 0 0 6px rgba(100,210,222,.36);
}
.rarity-seraphic {
    --rarity: #fff2bc;
    border-color: #e5c970;
    background-image: linear-gradient(135deg, rgba(255,249,221,.20), rgba(218,166,50,.25));
    box-shadow: 0 0 16px rgba(255,225,133,.54), 0 0 7px rgba(255,247,219,.39);
}
.rarity-astral {
    --rarity: #d97aff;
    border-color: #875ef0;
    background-image: linear-gradient(135deg, rgba(37,95,220,.29), rgba(111,52,205,.30), rgba(214,65,174,.25));
    box-shadow: 0 0 17px rgba(82,116,255,.52), 0 0 9px rgba(204,72,236,.42);
}
.rarity-empyrean {
    --rarity: #ffd875;
    border-color: #ef9ecf;
    background-image: linear-gradient(135deg, rgba(222,166,43,.28), rgba(199,64,157,.26), rgba(247,238,255,.20));
    box-shadow: 0 0 18px rgba(255,197,79,.55), 0 0 10px rgba(232,90,190,.45), 0 0 5px rgba(244,238,255,.40);
}
.rarity-originborn {
    --rarity: #a8ffd3;
    border-color: #82eecb;
    background-image: linear-gradient(135deg, rgba(39,180,111,.30), rgba(32,181,206,.28), rgba(220,175,52,.28), rgba(250,248,224,.20));
    box-shadow: 0 0 21px rgba(64,235,172,.62), 0 0 12px rgba(49,203,230,.50), 0 0 7px rgba(255,211,83,.48);
}

.item-card[class*="rarity-"], .equipment-slot[class*="rarity-"], .item-detail-icon[class*="rarity-"], .rarity-detail[class*="rarity-"] {
    transition: box-shadow .18s ease, border-color .18s ease;
}
.item-card[class*="rarity-"] .item-name,
.equipment-slot[class*="rarity-"] .equipment-rarity,
.rarity-detail[class*="rarity-"] b { color: var(--rarity, var(--text)); }
.rarity-text-common { color: #929292; }
.rarity-text-uncommon { color: #63b86d; }
.rarity-text-rare { color: #5798e8; }
.rarity-text-epic { color: #a36be0; }
.rarity-text-legendary { color: #e5a942; }
.rarity-text-runebound { color: #34c9c3; }
.rarity-text-arcane { color: #dc59e8; }
.rarity-text-sovereign { color: #f0d98d; }
.rarity-text-umbral { color: #7051a8; }
.rarity-text-hexed { color: #df4eb9; text-shadow: 0 0 7px rgba(213,49,139,.55); }
.rarity-text-occult { color: #46ded2; text-shadow: 0 0 7px rgba(49,210,206,.55); }
.rarity-text-lostborn { color: #a9d9ff; text-shadow: 0 0 7px rgba(118,190,255,.58); }
.rarity-text-nightbound { color: #7774e7; text-shadow: 0 0 8px rgba(82,77,205,.62); }
.rarity-text-infernal { color: #ff6a35; text-shadow: 0 0 8px rgba(255,80,30,.62); }
.rarity-text-ascendant { color: #ffe18a; text-shadow: 0 0 8px rgba(255,211,91,.65); }
.rarity-text-riftborn { color: #a477ff; text-shadow: 0 0 9px rgba(135,79,255,.68); }
.rarity-text-timeless { color: #d9f2f3; text-shadow: 0 0 9px rgba(194,245,247,.68); }
.rarity-text-seraphic { color: #fff2bc; text-shadow: 0 0 10px rgba(255,225,133,.70); }
.rarity-text-astral { color: #d97aff; text-shadow: 0 0 10px rgba(105,111,255,.72); }
.rarity-text-empyrean { color: #ffd875; text-shadow: 0 0 11px rgba(255,197,79,.75), 0 0 5px rgba(232,90,190,.55); }
.rarity-text-originborn { color: #a8ffd3; text-shadow: 0 0 12px rgba(64,235,172,.82), 0 0 6px rgba(255,211,83,.60); }

/* Stage 6.2 — inventory filters, grouped rarity stacks, role loadouts and recipe roles. */
.recipe-filters { display: grid; gap: 5px; margin-bottom: 5px; }
.recipe-filter-block { display: grid; gap: 2px; }
.recipe-filter-caption { color: var(--muted); font-size: .54rem; letter-spacing: .04em; text-transform: uppercase; }
.role-filter-bar .recipe-filter { border-style: dashed; }
.role-filter-bar .recipe-filter.active { border-style: solid; }

.inventory-panel { padding: 7px; }
.inventory-filter-bar {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 1px 0 7px;
    scrollbar-width: none;
}
.inventory-filter-bar::-webkit-scrollbar { display: none; }
.inventory-filter {
    flex: 0 0 auto;
    min-width: 54px;
    min-height: 34px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #14120f;
    color: var(--muted);
    display: grid;
    place-items: center;
    gap: 0;
    padding: 4px 7px;
    font-family: inherit;
    font-size: .59rem;
}
.inventory-filter small { font-size: .50rem; opacity: .70; }
.inventory-filter.active { color: #ffe0a3; background: #2a2017; border-color: #9b713e; }
.inventory-instance-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; font-size: .54rem; }
.inventory-instance-footer b { color: var(--accent-2); }

.auto-equip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 6px 0 7px; }
.role-equip-btn {
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    background: #171411;
    color: var(--text);
    font-family: inherit;
    font-size: .56rem;
    line-height: 1.12;
    padding: 5px 3px;
}
.role-equip-btn.warrior { border-color: #8b5a42; }
.role-equip-btn.ranger { border-color: #4e7d56; }
.role-equip-btn.mage { border-color: #66569b; }

.item-catalog-section { display: grid; gap: 5px; }
.catalog-list { display: grid; gap: 4px; }
.catalog-row { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 6px; align-items: center; padding: 5px 6px; border: 1px solid var(--border); border-radius: 7px; background: rgba(0,0,0,.12); }
.catalog-row > span { text-align: center; font-size: .8rem; }
.catalog-row div { min-width: 0; display: grid; gap: 1px; }
.catalog-row b { font-size: .65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row small { color: var(--muted); font-size: .56rem; line-height: 1.2; }
.catalog-empty { color: var(--muted); font-size: .58rem; padding: 4px 0; }

@media (max-width: 360px) {
    .auto-equip-grid { grid-template-columns: 1fr; }
    .role-equip-btn { min-height: 30px; }
}
.recipe-role-pill { border: 1px solid var(--border-soft); border-radius: 999px; padding: 1px 5px; font-size: .52rem; }
.recipe-role-pill.role-warrior { color: #e0a17d; border-color: #7d4c39; }
.recipe-role-pill.role-ranger { color: #91d39a; border-color: #426c49; }
.recipe-role-pill.role-mage { color: #baa8ff; border-color: #625497; }

/* Stage 6.4 — compact ten-level progression tier marker */
.tier-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid rgba(224, 171, 92, .28);
    border-radius: 999px;
    color: #d9b27a;
    background: rgba(224, 171, 92, .06);
    font-size: .72em;
    white-space: nowrap;
}

/* Stage 6.4 — compact ten-level progression tier marker */
.tier-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid rgba(224, 171, 92, .28);
    border-radius: 999px;
    color: #d9b27a;
    background: rgba(224, 171, 92, .06);
    font-size: .72em;
    white-space: nowrap;
}


/* Stage 6.4.2 — tier-separated crafting and global ultra-compact mobile pass. */
:root { --nav-h: 60px; }

body { font-size: 14px; }

.topbar { min-height: 50px; padding: 6px 10px; }
.topbar h1 { font-size: .98rem; }
.topbar-stats { gap: 7px; font-size: .70rem; }
.eyebrow { font-size: .54rem; }
.small { font-size: .66rem; }

.content { padding: 6px 6px calc(var(--nav-h) + 12px); }
.panel,
.compact-character-panel,
.compact-stats-panel {
    padding: 7px;
    margin-bottom: 5px;
    border-radius: 9px;
}
.panel-title-row { margin-bottom: 5px; gap: 6px; }
.panel h2 { font-size: .90rem; }
.panel h3 { font-size: .80rem; }

.primary-btn, .secondary-btn, .danger-btn {
    min-height: 29px;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: .70rem;
}

.skill-list, .action-list, .event-list { gap: 4px; }
.skill-row, .action-row, .event-row { padding: 5px 6px; border-radius: 8px; }
.skill-row.skill-entry {
    min-height: 50px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 5px;
    padding: 5px 6px;
}
.skill-entry-icon { width: 30px; height: 30px; border-radius: 7px; font-size: .92rem; }
.skill-entry-title { font-size: .79rem; margin-bottom: 0; }
.skill-entry-main .mini-track { margin-top: 3px; }
.skill-state { min-height: 17px; padding: 1px 4px; font-size: .51rem; }
.skill-chevron { font-size: 1.15rem; }

.skill-detail-title-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 5px; }
.skill-detail-icon { width: 34px; height: 34px; border-radius: 8px; font-size: 1rem; }
.skill-detail-copy h2 { font-size: .92rem; }
.skill-detail-level { font-size: .86rem; }
.skill-detail-track { margin-top: 5px; height: 4px; }
.skill-back, .combat-location-back { padding-bottom: 4px; font-size: .72rem; }

.action-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 5px; }
.action-icon { width: 30px; height: 30px; border-radius: 7px; font-size: .92rem; }
.action-main > b { display: block; font-size: .78rem; line-height: 1.08; }
.action-meta { gap: 3px 5px; margin-top: 1px; font-size: .55rem; line-height: 1.1; }
.action-btn { min-width: 46px; min-height: 28px; padding-inline: 7px; }
.recipe-lines { display: grid; gap: 2px; margin-top: 3px; }
.recipe-lines > div {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 3px;
    align-items: start;
}
.recipe-label { font-size: .48rem; line-height: 1.35; }
.pill-wrap { gap: 2px; }
.item-pill { padding: 2px 4px; border-radius: 6px; font-size: .53rem; line-height: 1.2; }
.warning-text { margin-top: 2px; font-size: .55rem; line-height: 1.15; }
.recipe-role-pill { font-size: .46rem; padding: 1px 4px; }
.tier-chip { font-size: .62em; padding: 0 4px; }

.recipe-filters { gap: 3px; margin-bottom: 4px; }
.recipe-filter-bar { gap: 3px; }
.recipe-filter { min-height: 28px; padding: 3px 6px; font-size: .55rem; border-radius: 8px; }
.recipe-filter small { font-size: .47rem; }
.recipe-filter-caption { font-size: .46rem; }

.grouped-recipe-list { gap: 5px; }
.recipe-family-group {
    display: grid;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: rgba(10, 9, 8, .22);
}
.recipe-family-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 22px;
    padding: 1px 3px 3px;
    border-bottom: 1px solid rgba(120, 96, 74, .18);
}
.recipe-family-head b { color: var(--accent-2); font-size: .68rem; line-height: 1; }
.recipe-family-head span { color: var(--muted); font-size: .49rem; white-space: nowrap; }
.compact-action-list { gap: 3px; }
.compact-empty { padding: 8px 4px; font-size: .65rem; }

.activity-head { gap: 5px; }
.activity-icon { width: 32px; height: 32px; border-radius: 7px; font-size: 1rem; }
.activity-copy h3 { font-size: .82rem; }
.progress-track { height: 5px; margin-top: 5px; }
.progress-label { margin-top: 2px; font-size: .58rem; }

.stat-grid { gap: 3px; }
.stat-card { padding: 5px; border-radius: 7px; }
.stat-card span { font-size: .49rem; }
.stat-card b { margin-top: 1px; font-size: .70rem; }

.inventory-filter-bar { gap: 3px; padding-bottom: 4px; }
.inventory-filter { min-width: 44px; min-height: 28px; padding: 2px 5px; border-radius: 7px; font-size: .51rem; }
.inventory-filter small { font-size: .43rem; }
.inventory-grid { gap: 3px; }
.item-card { min-height: 64px; padding: 4px 3px; border-radius: 7px; }
.item-icon { font-size: 1.05rem; margin-bottom: 2px; }
.item-name { font-size: .60rem; line-height: 1.05; }
.item-type, .tiny { font-size: .47rem; }
.item-qty { margin-top: 1px; font-size: .61rem; }
.inventory-instance-footer { gap: 2px; font-size: .46rem; }

.equipment-grid { gap: 3px; }
.equipment-slot { min-height: 48px; padding: 4px; border-radius: 7px; }
.equipment-slot span { font-size: .46rem; }
.equipment-slot b { font-size: .58rem; }
.auto-equip-grid { gap: 3px; margin: 4px 0; }
.role-equip-btn { min-height: 29px; padding: 3px 2px; font-size: .50rem; }

.location-card { min-height: 48px; padding: 5px 6px; gap: 5px; border-radius: 8px; }
.compact-location-icon { width: 29px; height: 29px; font-size: .92rem; }
.location-title-line b { font-size: .70rem; }
.location-meta, .location-boss-line, .location-lock-reason { font-size: .49rem; }

.monster-card.compact-monster { padding: 5px 6px; border-radius: 8px; }
.compact-monster-head { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 5px; }
.compact-monster-icon { width: 28px; height: 28px; font-size: .92rem; }
.monster-title-line b { font-size: .70rem; }
.monster-summary, .monster-defence-inline, .monster-one-line { font-size: .49rem; }
.compact-fight-btn { min-width: 44px; min-height: 27px; }

.fighter-card { padding: 5px; border-radius: 8px; }
.fighter-icon { font-size: 1.15rem; }
.fighter-card h3 { font-size: .72rem; }
.fighter-hp, .fighter-stats, .attack-label { font-size: .50rem; }
.hp-track, .attack-track { height: 5px; }
.combat-run-stats { gap: 3px; }
.combat-run-stats > div { padding: 4px; border-radius: 6px; }
.combat-run-stats span { font-size: .44rem; }
.combat-run-stats b { font-size: .60rem; }

.catalog-row { grid-template-columns: 18px minmax(0,1fr); gap: 4px; padding: 3px 4px; border-radius: 6px; }
.catalog-row > span { font-size: .68rem; }
.catalog-row b { font-size: .56rem; }
.catalog-row small { font-size: .48rem; }

.toast-stack { top: 54px; gap: 3px; }
.toast { padding: 5px 7px; border-radius: 7px; font-size: .66rem; }

.bottom-nav { min-height: var(--nav-h); padding-top: 2px; padding-bottom: max(3px, env(safe-area-inset-bottom)); }
.nav-btn { padding: 2px 1px; border-radius: 7px; }
.nav-btn span { font-size: .90rem; }
.nav-btn small { font-size: .50rem; }

@media (min-width: 370px) {
    .inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 600px) {
    .inventory-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Stage 6.4.3 — scroll-free inventory category navigation. */
.inventory-index-panel,
.inventory-category-panel {
    padding: 6px;
}

.inventory-section-list {
    display: grid;
    gap: 4px;
}

.inventory-section-row {
    width: 100%;
    min-height: 42px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: #15130f;
    color: var(--text);
    font: inherit;
    text-align: left;
}

.inventory-section-row:active {
    background: #201a13;
    border-color: #765737;
}

.inventory-section-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: .78rem;
    color: var(--accent-2);
}

.inventory-section-title {
    min-width: 0;
    font-size: .78rem;
    line-height: 1;
    font-weight: 700;
}

.inventory-section-count {
    min-width: 24px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #211b14;
    color: var(--muted);
    font-size: .56rem;
    text-align: center;
}

.inventory-section-chevron {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1;
    text-align: right;
}

.inventory-back {
    border: 0;
    background: transparent;
    color: var(--accent-2);
    font-family: inherit;
    font-size: .66rem;
    padding: 0 0 5px;
}

.inventory-category-head {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.inventory-category-head h2 {
    margin: 0;
    font-size: .92rem;
}

.inventory-category-icon {
    display: grid;
    place-items: center;
    font-size: .82rem;
    color: var(--accent-2);
}

/* The old horizontal filter strip is intentionally disabled. */
.inventory-filter-bar,
.inventory-filter {
    display: none !important;
}

.inventory-category-panel .inventory-grid {
    gap: 3px;
}

.inventory-category-panel .item-card {
    min-height: 68px;
    padding: 4px 3px;
}

.inventory-category-panel .item-icon {
    font-size: 1.12rem;
}

.inventory-category-panel .item-name {
    font-size: .56rem;
    line-height: 1.02;
}

.inventory-category-panel .item-type,
.inventory-category-panel .item-qty,
.inventory-category-panel .inventory-instance-footer {
    font-size: .44rem;
}

/* Stage 6.5 — accounts/admin */
.topbar-right { display:flex; align-items:center; gap:10px; }
.topbar-account {
    max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    color:var(--accent, #e0b16a); text-decoration:none; font-size:.72rem;
    padding:5px 7px; border:1px solid rgba(224,177,106,.28); border-radius:9px;
    background:rgba(224,177,106,.06);
}
.auth-body, .admin-body { min-height:100vh; margin:0; background:#0f0e0d; color:#eee5d8; font-family:"Philosopher",serif; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:18px; box-sizing:border-box; }
.account-shell { align-items:start; padding-top:8vh; }
.auth-card { width:min(100%,420px); box-sizing:border-box; }
.auth-card h1 { margin:4px 0 5px; font-size:1.65rem; }
.auth-form { display:grid; gap:10px; margin-top:15px; }
.auth-form label, .admin-label { display:grid; gap:5px; color:#b9ad9c; font-size:.78rem; }
.auth-form input, .admin-search-row input, .admin-label input, .admin-label select {
    width:100%; box-sizing:border-box; background:#11100f; border:1px solid #3b342c; color:#f3eadf;
    border-radius:10px; padding:10px 11px; font:inherit; font-size:.9rem; outline:none;
}
.auth-form input:focus, .admin-search-row input:focus, .admin-label input:focus, .admin-label select:focus { border-color:#b98648; }
.auth-switch { margin-top:14px; color:#988c7d; font-size:.8rem; text-align:center; }
.auth-switch a, .admin-account-links a { color:#e0b16a; }
.auth-alert { border-radius:9px; padding:8px 10px; margin-top:10px; font-size:.8rem; }
.auth-alert.bad { background:rgba(180,55,55,.12); border:1px solid rgba(220,85,85,.35); color:#f0aaaa; }
.auth-alert.good { background:rgba(52,150,88,.12); border:1px solid rgba(76,185,113,.35); color:#a7e5bb; }
.auth-alert.warn { background:rgba(190,130,40,.13); border:1px solid rgba(223,164,72,.35); color:#edca91; }
.account-role { color:#c99b5d; font-size:.8rem; margin-bottom:8px; }
.account-actions { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:12px; }
.account-actions form { margin:0; }

.admin-shell { min-height:100vh; }
.admin-topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:rgba(15,14,13,.96); border-bottom:1px solid #302a24; backdrop-filter:blur(8px); }
.admin-topbar h1 { margin:1px 0 0; font-size:1.35rem; }
.admin-account-links { display:flex; align-items:flex-end; flex-direction:column; gap:2px; font-size:.72rem; }
.admin-main { width:min(100%,900px); margin:0 auto; padding:10px 10px 30px; box-sizing:border-box; }
.admin-search-row { display:grid; grid-template-columns:1fr auto; gap:6px; margin-bottom:9px; }
.admin-search-row input { padding:8px 10px; }
.admin-player-list { display:grid; gap:6px; }
.admin-player-row { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto 18px; gap:8px; align-items:center; text-align:left; padding:9px 10px; border:1px solid #332d27; border-radius:11px; background:#171512; color:#eee5d8; font:inherit; }
.admin-player-main { min-width:0; display:grid; gap:1px; }
.admin-player-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
.admin-player-main span, .admin-player-meta { color:#a99d8e; font-size:.68rem; }
.admin-player-meta { display:grid; justify-items:end; gap:3px; }
.admin-chevron { color:#c79a61; font-size:1.2rem; }
.admin-badge { display:inline-block; padding:2px 5px; border-radius:6px; font-size:.58rem; font-weight:700; letter-spacing:.05em; }
.admin-badge.ok { color:#8ed39e; background:rgba(60,150,85,.13); }
.admin-badge.banned { color:#ff9a91; background:rgba(190,50,45,.18); }
.admin-badge.muted { color:#e8c27e; background:rgba(190,130,35,.16); margin-left:3px; }
.admin-back { border:0; background:transparent; color:#d7ad73; font:inherit; padding:5px 2px 8px; }
.admin-player-header { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.admin-player-header h1 { margin:2px 0; font-size:1.4rem; }
.admin-header-numbers { display:grid; gap:2px; text-align:right; color:#9f9385; font-size:.68rem; }
.admin-header-numbers b { color:#eaddca; }
.admin-section { margin-top:8px; }
.admin-section h2 { font-size:1rem; }
.admin-info-lines { display:grid; gap:4px; }
.admin-info-lines > div { display:flex; justify-content:space-between; gap:12px; font-size:.72rem; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.admin-info-lines span { color:#958a7c; }
.admin-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.admin-action-grid.two { grid-template-columns:1fr 1fr; }
.admin-reset-btn { grid-column:1/-1; }
.admin-item-controls { display:grid; grid-template-columns:110px 1fr; gap:7px; margin-top:7px; }
.admin-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.admin-stat { border:1px solid #302a25; border-radius:8px; padding:6px; min-width:0; display:grid; gap:1px; }
.admin-stat span { color:#938777; font-size:.58rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-stat b { font-size:.78rem; }
.admin-skill-list, .admin-inventory-list { display:grid; gap:3px; }
.admin-skill-row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:5px 2px; border-bottom:1px solid rgba(255,255,255,.04); font-size:.7rem; }
.admin-skill-row small { color:#897e70; min-width:70px; text-align:right; }
.admin-inventory-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:6px; align-items:center; padding:5px 2px; border-bottom:1px solid rgba(255,255,255,.04); font-size:.7rem; }
.admin-inventory-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-inventory-row small { color:#8f8375; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden { display:none !important; }

@media (max-width:520px) {
    .topbar-account { max-width:72px; font-size:.64rem; }
    .admin-main { padding-inline:7px; }
    .admin-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .admin-item-controls { grid-template-columns:90px 1fr; }
    .admin-player-header { align-items:flex-start; }
}

/* Stage 6.5.1 — playable admin + password-gated admin panel */
.topbar-admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 2px 7px;
    border: 1px solid rgba(237, 185, 91, .42);
    border-radius: 7px;
    color: #f0c66f;
    background: rgba(127, 80, 28, .14);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
}
.admin-badge.admin-role {
    color: #f4c86d;
    border-color: rgba(244, 200, 109, .48);
    background: rgba(144, 91, 26, .18);
}
.admin-stat.overridden {
    border-color: rgba(241, 183, 82, .45);
    box-shadow: inset 0 0 0 1px rgba(241, 183, 82, .08);
}
.admin-stat.overridden small {
    color: #efbc67;
    font-size: 7px;
    letter-spacing: .08em;
}
.admin-stat-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(100px, .65fr);
    gap: 7px;
    margin: 6px 0;
}
@media (max-width: 380px) {
    .admin-stat-editor { grid-template-columns: 1fr; }
}

/* Stage 6.5.2 — combat power, social Home and anonymous market */
.topbar-name-line{display:flex;align-items:center;gap:6px;min-width:0}.topbar-name-line h1{margin:0;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.power-chip,.gold-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border:1px solid rgba(232,190,91,.2);border-radius:7px;background:rgba(232,190,91,.06);font-size:.72rem;white-space:nowrap}.power-chip{color:#e8c76b}.gold-chip{color:#f0cf73}.topbar-identity{min-width:0}.topbar-right{gap:5px}.topbar-stats{gap:4px}
.character-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:5px 0}.character-summary-grid>div{padding:5px 6px;border:1px solid var(--border);border-radius:7px;background:rgba(255,255,255,.02);min-width:0}.character-summary-grid span{display:block;color:var(--muted);font-size:.62rem}.character-summary-grid b{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.world-events-panel,.community-panel{padding:7px}.world-event-list{display:grid;gap:2px}.world-event-row{display:grid;grid-template-columns:18px 1fr;align-items:center;gap:3px;padding:4px 5px;border-bottom:1px solid rgba(255,255,255,.035);font-size:.72rem}.world-event-row:last-child{border-bottom:0}.compact-empty{padding:10px 6px!important;font-size:.72rem!important}
.home-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:5px}.home-tab{min-width:0;padding:6px 4px;border-radius:7px;border:1px solid var(--border);background:rgba(255,255,255,.025);color:var(--muted);font:inherit;font-size:.7rem;font-weight:700}.home-tab.active{color:var(--text);border-color:rgba(232,190,91,.45);background:rgba(232,190,91,.10)}.home-tab-content{min-height:120px}
.home-rating-list{display:grid;gap:2px}.rating-row{display:grid;grid-template-columns:35px minmax(0,1fr) auto;align-items:center;gap:5px;padding:5px;border-bottom:1px solid rgba(255,255,255,.035)}.rating-row.self{background:rgba(232,190,91,.06);border-radius:6px}.rating-rank{font-weight:700;color:var(--muted);font-size:.68rem}.rating-name{min-width:0}.rating-name b,.rating-name small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rating-name b{font-size:.75rem}.rating-name small{font-size:.6rem;color:var(--muted)}.rating-power{font-size:.69rem;color:#e8c76b;white-space:nowrap}
.chat-box{display:grid;gap:5px}.chat-messages{max-height:250px;overflow-y:auto;display:grid;gap:3px;padding-right:2px}.chat-row{padding:5px 6px;border:1px solid rgba(255,255,255,.04);border-radius:6px;background:rgba(255,255,255,.018)}.chat-row.admin-message{border-color:rgba(232,190,91,.22)}.chat-meta{display:flex;align-items:baseline;gap:5px}.chat-meta b{font-size:.68rem}.chat-meta span{font-size:.56rem;color:var(--muted)}.chat-message{font-size:.72rem;line-height:1.25;word-break:break-word}.chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px}.chat-compose input{min-width:0;padding:6px 7px;font-size:.72rem}.chat-compose button{padding:5px 8px;font-size:.67rem}
.market-box{display:grid;gap:5px}.market-toolbar{display:grid;grid-template-columns:minmax(110px,160px) 1fr;gap:5px;align-items:center}.market-toolbar select{padding:5px 6px;font-size:.69rem}.market-list{display:grid;gap:3px}.market-row{display:grid;grid-template-columns:27px minmax(0,1fr) auto 45px auto;gap:4px;align-items:center;padding:5px;border:1px solid rgba(255,255,255,.05);border-radius:7px;background:rgba(255,255,255,.015)}.market-icon{font-size:1rem;text-align:center}.market-main{min-width:0}.market-main b,.market-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.market-main b{font-size:.7rem}.market-main small{font-size:.57rem;color:var(--muted)}.market-price{text-align:right;white-space:nowrap}.market-price b,.market-price small{display:block}.market-price b{font-size:.67rem;color:#f0cf73}.market-price small{font-size:.52rem;color:var(--muted)}.market-qty{width:45px!important;min-width:0;padding:4px!important;font-size:.67rem!important}.compact-market-btn{padding:5px 6px!important;font-size:.62rem!important}
.item-market-sell{border-color:rgba(232,190,91,.18)!important}.item-market-controls{display:grid;grid-template-columns:70px minmax(0,1fr);gap:5px;margin:5px 0}.item-market-controls input{padding:6px;font-size:.72rem}.item-market-controls button{padding:6px;font-size:.68rem}
.admin-item-picker-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:6px}.admin-item-picker-grid select,.admin-item-controls select,.admin-item-controls input{width:100%}
@media(max-width:520px){.market-row{grid-template-columns:25px minmax(0,1fr) auto 42px}.market-row .compact-market-btn{grid-column:2/5;width:100%}.market-toolbar{grid-template-columns:1fr}.character-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-item-picker-grid{grid-template-columns:1fr}.topbar-name-line h1{max-width:39vw}}
.admin-item-wide{grid-column:1/-1}

/* Stage 7 — pixel-art asset pipeline */
.pixel-sprite {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    user-select: none;
    pointer-events: none;
}
.sprite-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.activity-icon,
.skill-entry-icon,
.action-icon,
.item-icon,
.monster-icon,
.location-icon,
.fighter-icon,
.market-icon,
.item-detail-icon,
.skill-detail-icon {
    overflow: hidden;
}
.activity-sprite { width: 30px; height: 30px; }
.skill-sprite { width: 27px; height: 27px; margin: auto; }
.skill-detail-sprite { width: 34px; height: 34px; margin: auto; }
.action-sprite { width: 31px; height: 31px; margin: auto; }
.item-sprite { width: 42px; height: 42px; margin: auto; }
.market-sprite { width: 30px; height: 30px; }
.equipment-item-line { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.equipment-item-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-sprite { width: 24px; height: 24px; flex: 0 0 24px; }
.monster-card-sprite { width: 42px; height: 42px; }
.combat-monster-sprite { width: 56px; height: 56px; margin: auto; }
.location-thumb { width: 44px; height: 32px; object-fit: cover; border-radius: 4px; }
.location-detail-sprite { width: 70px; height: 42px; object-fit: cover; border-radius: 5px; }
.item-detail-sprite { width: 58px; height: 58px; margin: auto; }

/* Final pixel sprites stay neutral. Rarity gradients/glow remain on UI frames. */
.item-card .pixel-sprite,
.equipment-slot .pixel-sprite,
.item-detail-icon .pixel-sprite {
    filter: none;
}

/* Stage 8 generated endgame markers */
.endgame-chip { border-color: rgba(104, 211, 255, .48); color: #aeeaff; box-shadow: inset 0 0 10px rgba(104, 211, 255, .08); }
.location-card:has(.location-meta) .location-state { flex: 0 0 auto; }

/* Stage 10 — production pixel art + final mobile polish */
html, body { overflow-x: hidden; overscroll-behavior-x: none; }
button, select, input, a { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
    outline: 2px solid rgba(240, 196, 96, .85);
    outline-offset: 2px;
}
.pixel-sprite {
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.28));
}
.item-card .pixel-sprite,
.equipment-slot .pixel-sprite,
.item-detail-icon .pixel-sprite {
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.28));
}
.location-thumb,
.location-detail-sprite {
    background: #111018;
    border: 1px solid rgba(255,255,255,.08);
}
.recipe-family-group,
.compact-monster,
.location-card,
.market-row,
.world-event-row {
    content-visibility: auto;
    contain-intrinsic-size: 80px;
}
.inventory-category-panel .item-card {
    content-visibility: auto;
    contain-intrinsic-size: 112px;
}
.content { contain: layout style; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Stage 10.1 · Admin Nano Banana 2 art generator */
.admin-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;padding:3px;border:1px solid #312b25;border-radius:11px;background:#151310;position:sticky;top:66px;z-index:15}
.admin-tab{flex:1;border:0;border-radius:8px;padding:7px 9px;background:transparent;color:#9f9384;font:inherit;font-size:.76rem;cursor:pointer}
.admin-tab.active{background:#2a231c;color:#f0d5af;box-shadow:inset 0 0 0 1px #4a3b2c}
.admin-art-settings{margin-bottom:8px}
.admin-art-settings h2{margin:2px 0 0;font-size:1.08rem}
.admin-art-settings-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(145px,1fr) 90px;gap:7px;margin-top:9px}
.admin-art-settings-grid input,.admin-art-settings-grid select,.admin-art-generate-row select,.admin-art-filters select,.admin-art-filters input{box-sizing:border-box;width:100%;padding:8px 9px;border:1px solid #3b332b;border-radius:8px;background:#11100e;color:#eee5d8;font:inherit;font-size:.74rem;outline:none}
.admin-art-settings-grid input:focus,.admin-art-settings-grid select:focus,.admin-art-generate-row select:focus,.admin-art-filters select:focus,.admin-art-filters input:focus{border-color:#b98648}
.admin-art-settings-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.admin-art-settings-actions .tiny{flex:1}
.admin-art-kind-stats{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}
.admin-art-kind-chip{display:flex;align-items:center;gap:6px;border:1px solid #332c25;border-radius:999px;padding:4px 7px;background:#151310;font-size:.64rem}
.admin-art-kind-chip b{color:#c9b79f;font-weight:400}.admin-art-kind-chip span{color:#e6b96f;font-weight:700}
.admin-art-generate-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(185px,1fr) minmax(205px,1fr);gap:6px;align-items:end}
.admin-art-filters{display:grid;grid-template-columns:150px 135px minmax(0,1fr);gap:6px;margin:7px 0}
.admin-art-asset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;max-height:620px;overflow-y:auto;padding-right:2px}
.admin-art-asset-card{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);gap:7px;align-items:center;min-width:0;padding:6px;border:1px solid #302a24;border-radius:9px;background:#151310;content-visibility:auto;contain-intrinsic-size:70px}
.admin-art-asset-image{width:54px;height:54px;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(45deg,#201d19 25%,#171512 25%,#171512 50%,#201d19 50%,#201d19 75%,#171512 75%);background-size:12px 12px}
.admin-art-asset-image img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;image-rendering:auto}
.admin-art-asset-copy{min-width:0;display:grid;gap:1px}.admin-art-asset-copy b{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-art-asset-copy small{font-size:.55rem;color:#8f8375;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-art-asset-copy span{font-size:.57rem;color:#a89b8b}
.admin-art-asset-card>.admin-badge{position:absolute;right:4px;bottom:4px;font-size:.47rem;opacity:.93}
.admin-art-history{display:grid;gap:7px}
.admin-art-batch{border:1px solid #302a24;border-radius:10px;padding:7px;background:#151310;content-visibility:auto;contain-intrinsic-size:180px}
.admin-art-batch.active{border-color:#6f5533;box-shadow:inset 0 0 0 1px rgba(203,153,83,.09)}
.admin-art-batch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.admin-art-batch-head>div{display:grid;gap:1px;min-width:0}.admin-art-batch-head b{font-size:.76rem}.admin-art-batch-head span:not(.admin-badge){font-size:.62rem;color:#ad9f8e}.admin-art-batch-head small{font-size:.55rem;color:#776d62}
.admin-art-error{margin:6px 0 0;padding:6px;font-size:.62rem}
.admin-art-batch-thumbs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin-top:7px}
.admin-art-batch-thumb{position:relative;aspect-ratio:1;border:1px solid #2d2822;border-radius:5px;overflow:hidden;background:#100f0d;display:grid;place-items:center;min-width:0}
.admin-art-batch-thumb img{width:100%;height:100%;object-fit:contain;display:block}.admin-art-batch-thumb>span{position:absolute;right:2px;bottom:1px;font-size:.46rem;padding:1px 2px;border-radius:3px;background:rgba(0,0,0,.68);color:#d8c8b3}
.admin-art-batch-thumb.filler{background:repeating-linear-gradient(135deg,#211b22,#211b22 6px,#171317 6px,#171317 12px);font-size:1.05rem}.admin-art-batch-thumb.filler>span{position:static;background:transparent;padding:0}.admin-art-batch-thumb.filler small{position:absolute;right:2px;bottom:1px;font-size:.45rem;color:#a995a2}
.admin-art-batch-actions{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:7px}.admin-art-batch-actions .compact{padding:5px 7px;font-size:.61rem}
.admin-art-grid-viewer{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.86);display:grid;place-items:center;padding:12px;box-sizing:border-box}
.admin-art-grid-viewer.hidden{display:none}.admin-art-grid-viewer-card{width:min(94vw,900px);max-height:92vh;overflow:auto;border:1px solid #4a3b2e;border-radius:12px;background:#141210;padding:10px;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.admin-art-grid-viewer-card h2{font-size:1rem}.admin-art-grid-viewer-card img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;margin-top:8px;background:#0a0908;image-rendering:auto}
.admin-art-grid-close{position:fixed;right:12px;top:10px;z-index:201;border:1px solid #5a4938;border-radius:999px;width:34px;height:34px;background:#1b1713;color:#eee5d8;font-size:1.4rem;line-height:1;cursor:pointer}
body.modal-open{overflow:hidden}

@media(max-width:760px){
  .admin-tabs{top:62px}
  .admin-art-settings-grid{grid-template-columns:1fr 1fr}.admin-art-key-field{grid-column:1/-1}
  .admin-art-generate-row{grid-template-columns:1fr 1fr}.admin-art-generate-row label{grid-column:1/-1}
  .admin-art-asset-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}
  .admin-art-batch-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:480px){
  .admin-art-settings-grid,.admin-art-generate-row,.admin-art-filters{grid-template-columns:1fr}.admin-art-key-field,.admin-art-generate-row label{grid-column:auto}
  .admin-art-settings-actions,.admin-art-batch-actions{align-items:stretch;flex-direction:column}
  .admin-art-asset-grid{grid-template-columns:1fr}
}

/* Stage 11 · Progression & Social Foundation */
.rating-row,.world-event-row,.friend-identity,.chat-player-link{
    appearance:none;-webkit-appearance:none;border:0;font:inherit;color:inherit;text-align:inherit;
}
.rating-row,.world-event-row{width:100%;cursor:pointer}
.rating-row:hover,.world-event-row:hover{border-color:rgba(214,167,94,.38);background:#1d1915}
.player-title-badge{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:1px 5px;border:1px solid rgba(220,178,102,.32);border-radius:999px;background:rgba(163,111,53,.10);color:#e8c47f;font-size:.54rem;line-height:1.35;vertical-align:middle;white-space:nowrap}
.chat-player-link{padding:0;background:transparent;cursor:pointer}.chat-player-link:hover b{color:#f0c777;text-decoration:underline}
.friends-box{display:grid;gap:9px}.friend-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.friend-search input,.profile-field select,.profile-field textarea{box-sizing:border-box;width:100%;border:1px solid #3a3129;border-radius:8px;background:#12100e;color:#eee5d8;font:inherit;padding:8px 9px;outline:none}.friend-search input:focus,.profile-field select:focus,.profile-field textarea:focus{border-color:#b98648}.friend-section{display:grid;gap:5px}.friend-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 7px;border:1px solid #302922;border-radius:9px;background:#151310}.friend-identity{display:flex;align-items:center;gap:7px;min-width:0;background:transparent;cursor:pointer;padding:1px}.friend-identity>div{display:flex;align-items:center;gap:3px;flex-wrap:wrap;min-width:0}.friend-identity b{font-size:.73rem}.friend-identity small{flex-basis:100%;font-size:.57rem;color:#8f8375}.friend-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.compact-social-btn{padding:5px 7px;font-size:.61rem}.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:#635b53;box-shadow:0 0 0 2px rgba(255,255,255,.025)}.online-dot.online{background:#72c97a;box-shadow:0 0 7px rgba(114,201,122,.5)}.online-dot.offline{background:#625b55}
.profile-editor-panel{display:grid;gap:10px}.profile-field{display:grid;gap:5px}.profile-field textarea{resize:vertical;min-height:74px;line-height:1.45}.profile-editor-panel>.primary-btn{justify-self:start}
.player-modal-card{width:min(94vw,720px);max-height:min(88vh,760px);overflow:auto}.inspect-player-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.inspect-player-head h2{margin:3px 0}.inspect-player-bio{padding:8px 9px;border-left:2px solid #75542e;background:#171410;border-radius:0 7px 7px 0;color:#d9cebf;font-size:.75rem;line-height:1.45}.inspect-social-actions{display:flex;gap:6px;flex-wrap:wrap;margin:7px 0}.inspect-skills-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.inspect-skill{display:grid;gap:1px;padding:5px;border:1px solid #2f2923;border-radius:7px;background:#141210;text-align:center}.inspect-skill small{font-size:.48rem;color:#84796d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspect-skill b{font-size:.72rem}.inspect-gear-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.inspect-gear-slot{min-width:0;display:grid;gap:3px;padding:5px;border:1px solid #302a24;border-radius:8px;background:#151310}.inspect-gear-slot>span{font-size:.49rem;color:#8a7d70;text-transform:uppercase;letter-spacing:.04em}.inspect-gear-slot b{display:flex;align-items:center;gap:4px;min-width:0;font-size:.61rem;overflow:hidden}.inspect-gear-slot b:not(:has(.pixel-sprite)){white-space:nowrap;text-overflow:ellipsis}.inspect-gear-slot small{font-size:.49rem;color:#9a8e80}.inspect-gear-slot.empty{opacity:.58}.inspect-gear-sprite{width:24px;height:24px;flex:0 0 24px}.inspect-achievements{margin:0}.server-first-list{display:flex;gap:5px;flex-wrap:wrap}.server-first-chip{padding:4px 6px;border:1px solid rgba(235,187,89,.35);border-radius:7px;background:rgba(157,104,29,.10);color:#efc973;font-size:.59rem}
.equipment-skill-requirement{border-color:rgba(103,160,223,.35)!important;color:#b9d8ff!important}.equipment-skill-requirement.locked{border-color:rgba(216,92,76,.48)!important;color:#ffb0a6!important;background:rgba(145,40,28,.12)}
@media(max-width:680px){.friend-row{grid-template-columns:1fr}.friend-actions{justify-content:flex-start}.inspect-skills-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.inspect-gear-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.friend-search{grid-template-columns:1fr}.inspect-skills-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.player-title-badge{font-size:.49rem}}

/* Stage 11.0.3 · Mobile Social UI hotfix */
button.rating-row,
button.world-event-row {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100%; margin: 0; color: var(--text) !important;
    background: #151310 !important; border: 1px solid #302922 !important;
    border-radius: 8px; box-shadow: none !important; font: inherit; text-align: left;
    -webkit-tap-highlight-color: transparent; background-clip: padding-box;
}
button.rating-row { min-height: 54px; padding: 7px 8px; }
button.world-event-row { min-height: 42px; padding: 7px 8px; }
.home-rating-list,.world-event-list { gap: 5px; }
.home-rating-list .rating-row.self { background: linear-gradient(180deg, rgba(71,55,35,.78), rgba(42,33,25,.92)) !important; border-color: rgba(216,160,76,.34) !important; }
button.rating-row:active,button.world-event-row:active { transform: translateY(1px); background:#201a15 !important; border-color:rgba(216,160,76,.48) !important; }
.rating-row .rating-rank,.rating-row .rating-name b,.world-event-row b { color: var(--text) !important; }
.rating-row .rating-name small { color: var(--muted) !important; }
.rating-row .rating-power { color:#e8c76b !important; }
.world-event-row > span:first-child { color:#d7a956; text-align:center; }
.world-events-panel .panel-title-row { align-items:flex-start; flex-wrap:wrap; gap:3px 10px; margin-bottom:8px; }
.world-events-panel .panel-title-row > .muted { margin-left:auto; max-width:58%; text-align:right; line-height:1.2; font-size:.58rem; }
.home-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); gap:5px; }
.home-tab { width:100%; min-height:42px; padding:7px 4px; }
@media (max-width:480px){
 .home-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .home-tab{min-height:44px;font-size:.69rem}
 .world-events-panel .panel-title-row{display:block}
 .world-events-panel .panel-title-row>.muted{display:none}
 button.rating-row{grid-template-columns:34px minmax(0,1fr) auto;gap:6px;padding:8px}
 button.world-event-row{grid-template-columns:18px minmax(0,1fr);gap:6px;padding:8px}
}


/* Stage 11.5 · Thieving, Prayer & spell-charge crafting */
.prayer-panel { overflow: hidden; }
.prayer-points { color: #e8c76b; font-size: 1.05rem; }
.prayer-track { margin: 8px 0 10px; }
.prayer-groups { display: grid; gap: 10px; }
.prayer-group { display: grid; gap: 5px; }
.prayer-card {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid #332b24;
    border-radius: 8px;
    background: #151310;
    color: var(--text);
    padding: 8px;
    font: inherit;
    text-align: left;
}
.prayer-card.active {
    border-color: rgba(216,160,76,.62);
    background: linear-gradient(180deg, rgba(72,51,25,.74), rgba(30,24,18,.95));
    box-shadow: inset 2px 0 0 #d8a04c;
}
.prayer-card.curse.active {
    border-color: rgba(156,91,183,.72);
    box-shadow: inset 2px 0 0 #a06ac0;
}
.prayer-card.locked { opacity: .46; }
.prayer-icon { font-size: 1.1rem; text-align: center; }
.prayer-copy { display: grid; gap: 2px; min-width: 0; }
.prayer-copy small { color: var(--muted); font-size: .66rem; line-height: 1.2; }
.prayer-state { color: #d9b96c; font-size: .64rem; font-weight: 700; }
.prayer-restore { margin-top: 10px; }
.compact-prayer-panel .prayer-copy small { display: none; }
.compact-prayer-panel .prayer-card { padding: 6px 7px; min-height: 38px; }
.equipment-skill-requirement.locked { border-color: rgba(190,74,66,.5); }
@media (min-width: 700px) {
    .prayer-groups { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; }
}
.compact-prayer-panel .prayer-card.locked { display: none; }

/* Stage 11.5.5 — active farm ETA to the next skill level. */
.farm-level-eta {
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid rgba(193,145,73,.24);
    border-radius: 9px;
    background: rgba(25,21,17,.72);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.25;
}
.farm-level-eta b {
    flex: 0 0 auto;
    color: #e7c98e;
    font-size: .78rem;
}
.farm-level-eta.maxed b { color: #a8c99d; }
@media (max-width: 420px) {
    .farm-level-eta { align-items: flex-start; }
    .farm-level-eta span { max-width: 72%; }
}

/* Stage 11.6 — ammunition/spell equipment + delta state sync. */
.combat-loadout .rarity-text-common,
.combat-loadout [class*="rarity-text-"] { font-size: .78rem; }
.inventory-instance-footer .equipped-badge { white-space: nowrap; }


/* Stage 11.6.3 — production resource runway + custom target-level ETA. */
.farm-resource-eta,
.farm-target-eta {
    margin-top: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(193,145,73,.24);
    border-radius: 9px;
    background: rgba(25,21,17,.72);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.25;
}
.farm-resource-eta b,
.farm-target-eta b {
    flex: 0 0 auto;
    color: #e7c98e;
    font-size: .78rem;
}
.farm-target-eta label {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}
.farm-target-eta input {
    width: 64px;
    min-width: 64px;
    height: 30px;
    padding: 3px 6px;
    border-radius: 7px;
    border: 1px solid rgba(193,145,73,.42);
    background: #100e0c;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: center;
}
.farm-target-eta input:focus {
    outline: 1px solid rgba(220,171,91,.68);
    border-color: rgba(220,171,91,.68);
}
.farm-target-xp {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}
.farm-target-eta.warning {
    border-color: rgba(190,74,66,.55);
}
.farm-target-eta.warning b,
.farm-target-eta.warning .farm-target-xp {
    color: #e2a09a;
}
@media (max-width: 520px) {
    .farm-resource-eta { align-items: flex-start; }
    .farm-target-eta { flex-wrap: wrap; align-items: center; }
    .farm-target-xp { order: 3; flex-basis: 100%; text-align: left; }
}


/* Stage 12 guilds */
.guild-box{display:grid;gap:14px}.guild-create,.guild-manage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.guild-create textarea,.guild-manage textarea{grid-column:1/-1;min-height:72px}.guild-header,.guild-stats,.guild-donate,.guild-row,.guild-member-row{display:flex;gap:10px;align-items:center;justify-content:space-between}.guild-header{align-items:flex-start}.guild-level{text-align:right;display:grid}.guild-stats{flex-wrap:wrap;padding:10px;border:1px solid var(--border);border-radius:10px}.guild-donate input{flex:1}.guild-section{display:grid;gap:8px}.guild-row,.guild-member-row{padding:10px;border:1px solid var(--border);border-radius:10px}.guild-row>div{display:grid}.guild-row small,.guild-member-row small{color:var(--muted)}
@media(max-width:640px){.guild-create,.guild-manage{grid-template-columns:1fr}.guild-create textarea,.guild-manage textarea{grid-column:auto}.guild-row,.guild-member-row{align-items:stretch;flex-direction:column}.guild-member-row .friend-actions{display:grid;grid-template-columns:1fr 1fr}.guild-donate{align-items:stretch;flex-direction:column}}

/* Stage 13 — asynchronous cooperative Guild / World Bosses */
.bosses-box,.boss-section,.guild-boss-options{display:grid;gap:12px}.boss-section{padding:2px 0 6px}.coop-boss-card{display:grid;gap:10px;padding:14px;border:1px solid rgba(214,145,69,.28);border-radius:16px;background:linear-gradient(180deg,rgba(214,145,69,.055),rgba(255,255,255,.018))}.coop-boss-card.defeated{border-color:rgba(105,183,116,.34)}.coop-boss-card.expired{opacity:.82}.boss-card-head{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:11px;align-items:start}.boss-card-head h3{margin:2px 0 4px}.boss-card-head p{margin:0;line-height:1.35}.boss-card-icon{width:58px;height:58px;border-radius:14px;border:1px solid var(--border);background:#0f0d0b;display:grid;place-items:center;font-size:1.65rem;overflow:hidden}.boss-sprite{width:52px;height:52px;object-fit:contain;image-rendering:pixelated}.boss-status{font-size:.72rem;color:var(--accent-2);white-space:nowrap}.boss-hp-line,.boss-phase-line,.boss-personal,.boss-reward-preview,.boss-actions{display:flex;gap:9px;justify-content:space-between;align-items:center;flex-wrap:wrap}.boss-hp-line{font-size:.72rem;color:var(--muted)}.boss-phase-line{padding:9px 10px;border-radius:10px;background:rgba(0,0,0,.16)}.boss-phase-line small{color:var(--muted)}.boss-wide-hp{height:10px}.boss-milestones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.boss-milestone{padding:6px 5px;text-align:center;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:.64rem}.boss-milestone.reached{border-color:rgba(232,190,91,.55);color:var(--text);background:rgba(232,190,91,.10)}.boss-personal span,.boss-reward-preview span,.boss-reward-preview b{font-size:.69rem}.boss-personal{padding:9px;border:1px solid var(--border-soft);border-radius:10px}.boss-reward-preview{color:var(--muted)}.boss-ranking{border-top:1px solid var(--border-soft);padding-top:8px}.boss-ranking summary{cursor:pointer;color:var(--muted);font-size:.72rem}.boss-rank-row{width:100%;margin-top:5px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;border:0;border-radius:8px;background:rgba(255,255,255,.025);color:var(--text);padding:7px 8px;text-align:left;font:inherit}.boss-rank-row span{color:var(--muted)}.guild-boss-option{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--border);border-radius:12px}.guild-boss-option>div:nth-child(2){display:grid;gap:3px}.guild-boss-option small{color:var(--muted);line-height:1.3}.boss-current-card{border-color:rgba(214,145,69,.40)}
@media(max-width:640px){.boss-card-head,.guild-boss-option{grid-template-columns:52px minmax(0,1fr)}.boss-card-icon{width:52px;height:52px}.boss-card-head .boss-status,.guild-boss-option .primary-btn{grid-column:1/-1;width:100%}.boss-milestones{grid-template-columns:repeat(2,minmax(0,1fr))}.boss-personal,.boss-reward-preview,.boss-actions{align-items:stretch;flex-direction:column}.boss-actions button{width:100%}}

/* Stage 13.1 — item management + bot administration */
.inventory-auto-sell-panel { margin-top: 12px; }
.auto-sell-master { display:flex; align-items:center; gap:8px; font-weight:700; }
.auto-sell-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.auto-sell-grid label { display:flex; flex-direction:column; gap:6px; font-size:.85rem; }
.auto-sell-grid input,.auto-sell-grid select { width:100%; }
.auto-sell-categories { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:12px; }
.auto-sell-check { display:flex; align-items:center; gap:7px; font-size:.86rem; }
.auto-sell-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.item-merge-block,.item-delete-block { border-top:1px solid rgba(255,255,255,.08); padding-top:12px; }
.bot-badge { display:inline-flex; align-items:center; justify-content:center; padding:1px 5px; border:1px solid currentColor; border-radius:999px; font-size:.62rem; line-height:1.25; font-weight:700; letter-spacing:.06em; vertical-align:middle; opacity:.9; }
.admin-bot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.admin-bot-stats { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.admin-bot-stats span { padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:8px; }
@media (max-width: 760px) {
  .auto-sell-grid,.admin-bot-grid { grid-template-columns:1fr; }
  .auto-sell-actions,.admin-art-settings-actions { align-items:stretch; }
  .auto-sell-actions > button { flex:1 1 100%; }
}

/* Stage 13.1.3 — public guild directory */
.guild-directory{margin-top:4px}
.guild-directory-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.018)}
.guild-directory-card.own{border-color:var(--good)}
.guild-directory-main{min-width:0;display:grid;gap:4px;flex:1}
.guild-directory-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.guild-directory-title span,.guild-directory-main small{color:var(--muted)}
.guild-directory-main p{margin:0;color:var(--muted);font-size:.9rem;white-space:normal;overflow-wrap:anywhere}
.guild-directory-state{font-size:.82rem;font-weight:700;white-space:nowrap}
@media(max-width:640px){.guild-directory-card{align-items:stretch;flex-direction:column}.guild-directory-card>button{width:100%}.guild-directory-title{align-items:flex-start}}


/* Stage 13.1.7 — Frostforge public SEO landing */
.frostforge-landing-body { background:radial-gradient(circle at 50% -10%,#3b281a 0,transparent 38%),linear-gradient(180deg,#11100e,#0f0e0d 60%); }
.frostforge-landing-shell { width:min(100% - 28px,900px); margin:0 auto; padding:clamp(28px,6vw,72px) 0 42px; }
.frostforge-hero { padding:clamp(22px,5vw,46px); text-align:center; }
.frostforge-hero h1 { margin:8px auto 12px; max-width:720px; font-family:"Philosopher",serif; font-size:clamp(2rem,6vw,3.8rem); line-height:1.02; }
.frostforge-lead { max-width:700px; margin:0 auto; color:var(--muted); font-size:clamp(.98rem,2.4vw,1.15rem); line-height:1.65; }
.frostforge-cta-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.frostforge-cta { display:inline-flex; align-items:center; justify-content:center; min-width:170px; text-decoration:none; }
.frostforge-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.frostforge-feature-grid article { margin:0; }
.frostforge-feature-grid h2 { margin:6px 0 8px; font-family:"Philosopher",serif; }
.frostforge-feature-grid p { margin:0; color:var(--muted); line-height:1.55; font-size:.9rem; }
.frostforge-domain-note { margin:20px 0 0; text-align:center; color:var(--muted); font-size:.75rem; letter-spacing:.08em; }
@media (max-width:720px) { .frostforge-feature-grid { grid-template-columns:1fr; } .frostforge-cta { flex:1 1 150px; } }

/* ========================================================================== */
/* Frostforge Stage 14.0 — premium frozen-forge visual overhaul              */
/* ========================================================================== */
:root {
    --bg: #061019;
    --bg-2: #0a1621;
    --panel: #0e1b27;
    --panel-2: #132434;
    --border: #2b455b;
    --border-soft: #1d3345;
    --text: #edf8ff;
    --muted: #8da3b6;
    --accent: #70d9ff;
    --accent-2: #b8efff;
    --danger: #e46e68;
    --good: #77d5b4;
    --bar: #72d9ff;
    --ice: #83ddff;
    --ice-bright: #d2f7ff;
    --ice-deep: #2b719d;
    --forge: #e59145;
    --forge-bright: #ffd19a;
    --steel: #90a9bb;
    --void: #040a10;
    --nav-h: 78px;
    --ff-shadow: 0 18px 52px rgba(0, 6, 12, .44);
    --ff-shadow-soft: 0 10px 30px rgba(0, 6, 12, .28);
}

html { background: #050b11; color-scheme: dark; }
body {
    color: var(--text);
    background:
        radial-gradient(ellipse at 12% 5%, rgba(61, 154, 199, .18) 0, transparent 31%),
        radial-gradient(ellipse at 88% 12%, rgba(80, 205, 255, .10) 0, transparent 28%),
        radial-gradient(ellipse at 50% 112%, rgba(222, 126, 55, .08) 0, transparent 34%),
        linear-gradient(180deg, #08131e 0%, #07111a 34%, #050b11 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -.01em;
}
body::before,
body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    inset: 0;
    z-index: -1;
}
body::before {
    opacity: .21;
    background-image:
        linear-gradient(115deg, transparent 0 46%, rgba(188, 235, 255, .055) 47%, transparent 48% 100%),
        linear-gradient(65deg, transparent 0 48%, rgba(77, 137, 170, .045) 49%, transparent 50% 100%);
    background-size: 86px 86px, 112px 112px;
    mask-image: linear-gradient(180deg, #000, transparent 78%);
}
body::after {
    background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 14% 86%, rgba(0,0,0,.18));
}
button, input, select, textarea { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }

.ff-game-body:not(.ff-loaded) { overflow: hidden; }
.ff-app-shell { max-width: 820px; position: relative; }
.ff-app-shell::before {
    content: "";
    position: fixed;
    top: 0;
    width: min(820px, 100vw);
    height: 360px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at 50% -22%, rgba(119, 218, 255, .22), transparent 66%);
}

/* Loading screen */
.ff-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #edfaff;
    background:
        radial-gradient(circle at 50% 38%, rgba(41, 128, 168, .28), transparent 28%),
        radial-gradient(ellipse at 50% 105%, rgba(215, 116, 45, .14), transparent 36%),
        linear-gradient(180deg, #08131d 0%, #050b11 58%, #020609 100%);
    opacity: 1;
    transition: opacity .5s ease, visibility .5s ease, filter .5s ease;
}
.ff-loader::before {
    content: "";
    position: absolute;
    inset: -20%;
    opacity: .32;
    background:
        repeating-linear-gradient(118deg, transparent 0 26px, rgba(132, 220, 255, .035) 27px, transparent 28px 64px),
        radial-gradient(circle at center, transparent 0 25%, rgba(77, 168, 207, .08) 45%, transparent 68%);
    animation: ffLoaderDrift 12s linear infinite;
}
.ff-loader.is-leaving { opacity: 0; visibility: hidden; filter: blur(8px); }
.ff-loader-center {
    width: min(420px, calc(100vw - 44px));
    text-align: center;
    position: relative;
    z-index: 3;
    transform: translateY(-2vh);
}
.ff-loader-emblem {
    width: 142px;
    height: 142px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    position: relative;
    filter: drop-shadow(0 0 32px rgba(87, 202, 255, .20));
}
.ff-loader-emblem::before,
.ff-loader-emblem::after {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 50%;
}
.ff-loader-emblem::before { box-shadow: inset 0 0 28px rgba(106, 216, 255, .14), 0 0 32px rgba(70, 180, 226, .10); }
.ff-loader-emblem::after { border: 1px solid rgba(188, 238, 255, .10); transform: rotate(45deg); border-radius: 24px; }
.ff-loader-emblem img { width: 106px; height: 106px; position: relative; z-index: 4; animation: ffMarkBreathe 2.6s ease-in-out infinite; }
.ff-loader-orbit { position: absolute; border-radius: 50%; inset: 1px; border: 1px solid transparent; }
.ff-loader-orbit-a { border-top-color: rgba(166, 235, 255, .75); border-right-color: rgba(87, 185, 227, .22); animation: ffSpin 5.6s linear infinite; }
.ff-loader-orbit-b { inset: 9px; border-bottom-color: rgba(225, 145, 70, .48); border-left-color: rgba(142, 228, 255, .18); animation: ffSpin 7.8s linear infinite reverse; }
.ff-loader-kicker {
    color: #7ecfe9;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .28em;
    margin-bottom: 8px;
}
.ff-loader-title {
    font-family: Cinzel, "Philosopher", serif;
    font-size: clamp(2.3rem, 10vw, 3.55rem);
    font-weight: 700;
    letter-spacing: .085em;
    text-indent: .085em;
    line-height: 1;
    background: linear-gradient(180deg, #f3fcff 0%, #b5ecff 45%, #579fc2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 12px 45px rgba(83, 197, 244, .10);
}
.ff-loader-subtitle { color: #849bac; margin: 11px 0 32px; font-size: .82rem; letter-spacing: .045em; }
.ff-loader-progress {
    height: 4px;
    position: relative;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(125, 176, 201, .10);
    border: 1px solid rgba(142, 220, 255, .12);
    box-shadow: inset 0 1px 6px rgba(0,0,0,.5);
}
.ff-loader-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 8%;
    border-radius: inherit;
    background: linear-gradient(90deg, #317ba2, #8de5ff 66%, #f9feff);
    box-shadow: 0 0 18px rgba(94, 217, 255, .52);
    transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.ff-loader-progress i { position: absolute; top: -5px; bottom: -5px; width: 80px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); animation: ffLoaderShine 1.8s ease-in-out infinite; }
.ff-loader-meta { display: flex; justify-content: space-between; gap: 12px; color: #8497a7; font-size: .7rem; margin-top: 9px; }
.ff-loader-meta b { color: #bfeeff; font-variant-numeric: tabular-nums; }
.ff-loader-version { color: rgba(141, 173, 193, .42); font-size: .54rem; font-weight: 800; letter-spacing: .22em; margin-top: 24px; }
.ff-loader-aurora { position: absolute; width: 70vw; height: 35vh; filter: blur(70px); opacity: .13; border-radius: 50%; }
.ff-loader-aurora-a { background: #3cb8f1; left: -30vw; top: 12%; animation: ffAuroraA 9s ease-in-out infinite alternate; }
.ff-loader-aurora-b { background: #8fe9ff; right: -35vw; top: 36%; animation: ffAuroraB 11s ease-in-out infinite alternate; }
.ff-loader-snow { position:absolute; inset:0; opacity:.36; background-image: radial-gradient(circle, rgba(218,247,255,.5) 0 1px, transparent 1.2px); background-size: 47px 47px; animation: ffSnow 15s linear infinite; }
@keyframes ffSpin { to { transform: rotate(360deg); } }
@keyframes ffMarkBreathe { 0%,100% { transform: scale(.98); filter: brightness(.95); } 50% { transform: scale(1.035); filter: brightness(1.15); } }
@keyframes ffLoaderDrift { to { transform: translate3d(5%,3%,0) rotate(.5deg); } }
@keyframes ffLoaderShine { from { left: -90px; } to { left: calc(100% + 90px); } }
@keyframes ffSnow { to { background-position: 0 94px; } }
@keyframes ffAuroraA { to { transform: translate(28vw, 8vh) scale(1.2); } }
@keyframes ffAuroraB { to { transform: translate(-23vw, -7vh) scale(.9); } }

/* Top hero HUD */
.ff-topbar {
    min-height: 82px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) auto;
    gap: 10px;
    background: linear-gradient(180deg, rgba(8, 18, 28, .96), rgba(7, 15, 23, .89));
    border-bottom: 1px solid rgba(122, 206, 242, .18);
    box-shadow: 0 14px 34px rgba(0, 5, 10, .22);
    backdrop-filter: blur(18px) saturate(130%);
}
.ff-topbar::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,rgba(126,219,255,.42),transparent); }
.topbar-brand-mark { width: 42px; height: 48px; display:grid; place-items:center; }
.topbar-brand-mark img { width: 39px; height: 39px; filter: drop-shadow(0 0 12px rgba(99, 205, 246, .15)); }
.ff-brand-word { font-family: Cinzel, "Philosopher", serif; color:#81d8f7; letter-spacing:.15em; font-size:.58rem; }
.topbar-identity { min-width:0; }
.topbar-name-line { display:flex; align-items:center; gap:8px; min-width:0; }
.ff-topbar h1 { font-family: Cinzel, "Philosopher", serif; font-size: 1.02rem; color:#f3fbff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.power-chip, .gold-chip {
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:28px;
    border-radius: 9px;
    padding: 4px 8px;
    font-size:.7rem;
    white-space:nowrap;
    border:1px solid rgba(120,209,246,.18);
    background:linear-gradient(180deg,rgba(25,49,65,.78),rgba(12,27,38,.88));
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.power-chip { color:#bcefff; }
.power-chip-bolt { color:#84e1ff; font-size:.92rem; line-height:1; text-shadow:0 0 10px rgba(106,223,255,.6); }
.gold-chip { color:#a5b7c4; }
.gold-gem { color:#f1ae64; font-size:.7rem; text-shadow:0 0 10px rgba(238,155,69,.32); }
.gold-chip b { color:#f4d3a8; }
.topbar-right { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.topbar-account, .topbar-admin-link { font-size:.61rem; letter-spacing:.02em; text-decoration:none; }
.topbar-account { color:#8ea5b6; display:flex; align-items:center; gap:5px; max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-dot { width:5px; height:5px; border-radius:50%; background:#62d6ad; box-shadow:0 0 7px rgba(98,214,173,.62); flex:none; }
.topbar-admin-link { color:#f4b36e; font-weight:800; }

/* Content / surfaces */
.content { padding: 16px 12px calc(var(--nav-h) + 30px); }
.panel {
    position: relative;
    background:
        linear-gradient(145deg, rgba(19, 36, 50, .94), rgba(10, 22, 32, .97)) padding-box,
        linear-gradient(135deg, rgba(143, 224, 255, .30), rgba(63, 104, 132, .14) 48%, rgba(226, 143, 65, .13)) border-box;
    border: 1px solid transparent;
    border-radius: 18px;
    box-shadow: var(--ff-shadow-soft), inset 0 1px rgba(255,255,255,.028);
    overflow: hidden;
}
.panel::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(110deg,rgba(184,235,255,.025),transparent 32% 74%,rgba(225,138,62,.018));
}
.panel > * { position:relative; z-index:1; }
.panel-title-row h2, .panel h2, .panel h3 { font-family: Cinzel, "Philosopher", serif; letter-spacing:.01em; }
.panel h2 { color:#effaff; }
.eyebrow { color:#71d3f4; font-size:.61rem; letter-spacing:.15em; }
.muted { color:var(--muted); }
.empty-state { color:#70899b; }
.placeholder-badge { background:rgba(58,112,143,.13); border-color:rgba(115,209,247,.19); color:#a4e6ff; }

/* Premium controls */
.primary-btn, .secondary-btn, .danger-btn, .role-equip-btn, .action-btn {
    position:relative;
    overflow:hidden;
    border-radius: 11px;
    min-height: 43px;
    transition: transform .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 16px rgba(0,5,10,.15);
}
.primary-btn {
    color:#031018;
    background:linear-gradient(180deg,#c8f4ff,#69cbe9 58%,#4698ba);
    border:1px solid #a8eaff;
    text-shadow:0 1px rgba(255,255,255,.18);
}
.primary-btn::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 48%,transparent 76%); transform:translateX(-130%); transition:transform .35s ease; }
.primary-btn:hover::after { transform:translateX(130%); }
.secondary-btn {
    color:#d9edf7;
    background:linear-gradient(180deg,#172b3a,#0e202d);
    border:1px solid #31546b;
}
.danger-btn { color:#ffe8e5; background:linear-gradient(180deg,#743e43,#4a242a); border:1px solid #9c5455; }
.primary-btn:active, .secondary-btn:active, .danger-btn:active, .nav-btn:active { transform:translateY(1px) scale(.985); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid rgba(117,218,255,.7); outline-offset:2px; }
input, select, textarea {
    color:#e8f5fb;
    background:#09151f;
    border:1px solid #29465b;
    border-radius:10px;
    box-shadow:inset 0 2px 9px rgba(0,0,0,.22);
}
input::placeholder, textarea::placeholder { color:#536b7c; }

/* Current action = hero focus card */
.activity-card, .combat-home-card, .boss-current-card {
    border-color: transparent;
    background:
        radial-gradient(circle at 9% 15%, rgba(89,189,229,.13), transparent 29%),
        linear-gradient(145deg,rgba(20,42,58,.98),rgba(8,20,30,.98)) padding-box,
        linear-gradient(120deg,rgba(142,227,255,.40),rgba(54,103,132,.14),rgba(226,142,66,.14)) border-box;
}
.activity-card::after { content:""; position:absolute; right:-32px; top:-42px; width:150px; height:150px; border:1px solid rgba(124,217,252,.055); transform:rotate(45deg); border-radius:28px; pointer-events:none; }
.activity-head { gap:13px; }
.activity-icon, .action-icon, .skill-entry-icon {
    background:linear-gradient(145deg,#102637,#09141e);
    border:1px solid rgba(102,194,231,.22);
    box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 22px rgba(0,6,12,.26);
}
.activity-icon { width:52px; height:52px; border-radius:14px; }
.pixel-sprite { image-rendering:pixelated; filter:drop-shadow(0 4px 8px rgba(0,0,0,.36)); }
.progress-track, .mini-track { background:#050d13; border-color:#1d3547; }
.progress-fill, .mini-fill { background:linear-gradient(90deg,#2a7eaa,#72dcff,#d3f8ff); box-shadow:0 0 14px rgba(102,218,255,.30); }
.farm-level-eta, .farm-resource-eta, .farm-target-eta { background:rgba(5,14,21,.48); border-color:rgba(89,157,190,.18); }

/* Home social / rating */
.home-tabs, .progression-tabs, .skill-tabs { gap:7px; }
.home-tab, .progression-tab, .skill-tab {
    color:#7f98aa;
    background:linear-gradient(180deg,#10202d,#0a1721);
    border:1px solid #20394b;
    box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.home-tab.active, .progression-tab.active, .skill-tab.active {
    color:#dff8ff;
    background:linear-gradient(180deg,rgba(44,111,143,.52),rgba(18,62,84,.62));
    border-color:#559cba;
    box-shadow:0 0 18px rgba(85,193,233,.09),inset 0 1px rgba(213,247,255,.10);
}
.rating-row, .world-event-row, .friend-row, .market-row, .guild-card {
    background:linear-gradient(180deg,rgba(14,29,41,.88),rgba(9,20,29,.92));
    border-color:#20394b;
    transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.rating-row:hover, .world-event-row:hover { border-color:#3b6a83; background:linear-gradient(180deg,rgba(20,41,56,.94),rgba(11,25,35,.94)); }
.rating-row.self { border-color:#4f9ab9; box-shadow:inset 3px 0 #6fd9ff; }
.rating-rank { color:#71d7f7; font-family:Cinzel,"Philosopher",serif; }
.rating-power { color:#c1efff; }
.world-events-panel .world-event-row > span { color:#78d8f6; }

/* Skills */
.skill-row, .action-row, .event-row {
    background:linear-gradient(180deg,rgba(14,29,41,.92),rgba(8,19,28,.95));
    border-color:#20384a;
    border-radius:14px;
}
.skill-row.clickable:hover, .action-row:not(.locked):hover { border-color:#38647e; }
.skill-entry.has-active { border-color:#4c94b5; box-shadow:inset 3px 0 #6ad7fb, 0 8px 24px rgba(0,7,13,.18); }
.skill-state.active { color:#a9edff; }
.item-pill, .ability-pill { background:#0d1d29; border-color:#274258; color:#bdd1dd; }

/* Inventory */
.inventory-panel { overflow:visible; }
.inventory-section-row {
    background:linear-gradient(180deg,#102332,#0b1924);
    border-color:#223e52;
    border-radius:13px;
}
.inventory-section-row:hover { border-color:#3f6f88; }
.inventory-section-icon { background:#091620; border:1px solid #213e52; box-shadow:inset 0 1px rgba(255,255,255,.03); }
.item-card {
    min-height:122px;
    padding:11px 8px 10px;
    background:
        radial-gradient(circle at 50% 26%,rgba(73,137,168,.14),transparent 40%),
        linear-gradient(180deg,#10202c,#09151e);
    border-color:#263e50;
    border-radius:14px;
    box-shadow:0 9px 21px rgba(0,6,12,.18),inset 0 1px rgba(255,255,255,.025);
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.item-card:hover { transform:translateY(-2px); border-color:#406d84; box-shadow:0 13px 28px rgba(0,6,12,.28),inset 0 1px rgba(255,255,255,.04); }
.item-card .item-icon { min-height:50px; display:grid; place-items:center; margin-bottom:7px; }
.item-card .item-sprite { width:48px; height:48px; object-fit:contain; }
.item-name { color:#e8f6fc; font-size:.76rem; }
.equipped-badge { background:rgba(61,139,173,.15); border-color:#397794; color:#b5edff; }
.inventory-merge-all-panel { background:linear-gradient(145deg,rgba(18,48,63,.92),rgba(9,24,34,.97)) padding-box,linear-gradient(120deg,rgba(101,214,251,.36),rgba(53,94,118,.12)) border-box; }
.inventory-auto-sell-panel { background:linear-gradient(145deg,rgba(22,34,45,.96),rgba(9,20,29,.98)) padding-box,linear-gradient(120deg,rgba(116,171,197,.25),rgba(57,87,104,.12)) border-box; }

/* Rarity presentation — preserve existing rarity colors but give them material depth */
.item-card[class*="rarity-"]::before, .equipment-slot[class*="rarity-"]::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 22px color-mix(in srgb, var(--rarity, #668ca2) 10%, transparent); }
.rarity-rare, .rarity-epic, .rarity-legendary, .rarity-mythic, .rarity-empyrrean, .rarity-originborn { box-shadow:0 12px 30px rgba(0,5,10,.3),0 0 18px color-mix(in srgb,var(--rarity,#64bde8) 12%,transparent); }

/* Character stage */
.compact-character-panel { overflow:hidden; }
.compact-character-panel::after {
    content:"";
    position:absolute;
    width:290px;
    height:290px;
    left:50%;
    top:142px;
    transform:translateX(-50%) rotate(45deg);
    border:1px solid rgba(122,216,252,.045);
    border-radius:44px;
    box-shadow:0 0 60px rgba(87,183,222,.025);
    pointer-events:none;
}
.character-summary-grid > div { background:#0a1924; border-color:#213c4e; }
.character-summary-grid span { color:#7e98aa; }
.character-summary-grid b { color:#def6ff; }
.auto-equip-grid { gap:7px; }
.role-equip-btn { color:#cceaf5; background:linear-gradient(180deg,#152b3a,#0b1c28); border:1px solid #2c4d62; }
.equipment-grid {
    position:relative;
    padding:16px 8px;
    border-radius:20px;
    background:
        radial-gradient(circle at 50% 48%,rgba(65,157,196,.13),transparent 33%),
        linear-gradient(180deg,rgba(6,17,25,.42),rgba(5,13,20,.72));
    border:1px solid rgba(79,133,161,.13);
}
.equipment-grid::before {
    content:"F";
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    font-family:Cinzel,serif;
    font-size:8rem;
    color:rgba(125,218,252,.025);
    text-shadow:0 0 60px rgba(72,185,229,.07);
    pointer-events:none;
}
.equipment-slot {
    position:relative;
    z-index:1;
    background:linear-gradient(180deg,rgba(18,38,52,.96),rgba(8,20,29,.98));
    border-color:#29465a;
    box-shadow:0 9px 18px rgba(0,5,10,.20),inset 0 1px rgba(255,255,255,.025);
}
.equipment-slot.filled { border-color:#3a647c; }
.slot-empty { color:#536f81; }
.stat-card { background:linear-gradient(180deg,#102231,#0a1822); border-color:#213d50; }
.stat-card span { color:#7891a3; }
.stat-card b { color:#e2f5fc; }

/* Combat */
.combat-location-card, .monster-card, .boss-card { background:linear-gradient(180deg,#102431,#091923); border-color:#244258; }
.hp-track { background:#050c12; border-color:#20394a; }
.hero-hp { background:linear-gradient(90deg,#287e77,#65d8b0); }
.monster-hp { background:linear-gradient(90deg,#823f45,#e47670); }
.attack-progress-fill { background:linear-gradient(90deg,#317ea2,#79dfff); }

/* Bottom navigation */
.ff-bottom-nav {
    min-height:var(--nav-h);
    padding:7px max(7px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(8,17,25,.93),rgba(5,12,18,.985));
    border-top:1px solid rgba(103,188,224,.20);
    box-shadow:0 -14px 38px rgba(0,4,8,.32);
    backdrop-filter:blur(20px) saturate(125%);
}
.ff-bottom-nav::before { content:""; position:absolute; top:-1px; left:12%; right:12%; height:1px; background:linear-gradient(90deg,transparent,rgba(116,212,248,.38),transparent); }
.nav-btn { position:relative; min-height:59px; color:#718899; border:1px solid transparent; border-radius:14px; padding:5px 2px 4px; transition:all .18s ease; }
.nav-icon { width:23px; height:23px; display:grid!important; place-items:center; margin:0 auto 3px; }
.nav-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.nav-btn small { font-size:.61rem; font-weight:600; }
.nav-btn.active {
    color:#c3f2ff;
    background:linear-gradient(180deg,rgba(42,104,133,.34),rgba(16,46,63,.38));
    border-color:rgba(91,181,218,.20);
    box-shadow:inset 0 1px rgba(211,248,255,.045),0 0 20px rgba(71,175,216,.05);
}
.nav-btn.active::before { content:""; position:absolute; top:-7px; left:30%; right:30%; height:2px; border-radius:5px; background:#72daf8; box-shadow:0 0 9px rgba(114,218,248,.55); }
.nav-btn.active .nav-icon { filter:drop-shadow(0 0 6px rgba(105,215,251,.35)); }

/* Modals / feedback */
.modal-backdrop { background:rgba(1,5,8,.79); backdrop-filter:blur(7px); }
.modal-card { background:linear-gradient(160deg,#142735,#091722); border-color:#365b71; box-shadow:0 24px 70px rgba(0,4,8,.64),inset 0 1px rgba(255,255,255,.035); }
.toast { background:linear-gradient(180deg,#142837,#0c1b26); border-color:#34586d; color:#e7f6fc; box-shadow:0 14px 40px rgba(0,4,8,.48); }
.toast.good { border-color:#3a806c; }
.toast.bad { border-color:#995657; }

/* Login / account / landing get the same premium identity */
.auth-body {
    background:
        radial-gradient(circle at 50% 0,rgba(65,166,205,.22),transparent 35%),
        radial-gradient(circle at 50% 100%,rgba(217,126,50,.07),transparent 29%),
        linear-gradient(180deg,#08141e,#050a10 72%);
}
.auth-body::before { opacity:.18; }
.auth-card { box-shadow:0 26px 80px rgba(0,4,8,.52),inset 0 1px rgba(255,255,255,.03); }
.auth-card h1, .frostforge-hero h1 { font-family:Cinzel,"Philosopher",serif; color:#effaff; }
.auth-form label { color:#93a9b9; }
.auth-switch a, .account-actions a { color:#8edfff; }
.frostforge-landing-shell { max-width:960px; }
.frostforge-hero {
    padding:clamp(24px,5vw,48px);
    background:
        radial-gradient(circle at 82% 15%,rgba(83,185,226,.16),transparent 28%),
        linear-gradient(145deg,rgba(19,42,57,.97),rgba(7,18,27,.98)) padding-box,
        linear-gradient(120deg,rgba(147,229,255,.42),rgba(59,103,129,.14),rgba(225,139,63,.15)) border-box;
}
.frostforge-hero h1 { font-size:clamp(2rem,6vw,3.45rem); line-height:1.02; max-width:760px; }
.frostforge-lead { color:#9bb0bf; max-width:700px; font-size:clamp(.92rem,2vw,1.08rem); line-height:1.65; }
.frostforge-feature-grid .panel { min-height:190px; }
.frostforge-domain-note { color:#52697a; }

/* Admin inherits frost/steel without changing layout contracts */
.admin-body { background:#061019; }
.admin-topbar { background:rgba(7,17,25,.94); border-color:#213b4c; backdrop-filter:blur(18px); }
.admin-tab { background:#0d1d28; color:#8098a9; border-color:#253f51; }
.admin-tab.active { color:#dff8ff; background:#16384a; border-color:#4b8aa7; }
.admin-player-row { background:linear-gradient(180deg,#102330,#0a1822); border-color:#243e50; }

/* Desktop composition */
@media (min-width: 600px) {
    .content { padding:20px 20px calc(var(--nav-h) + 34px); }
    .panel { padding:16px; border-radius:19px; }
    .inventory-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
    .ff-topbar { padding-left:20px; padding-right:20px; }
}
@media (min-width: 900px) {
    .ff-app-shell { margin-top:14px; margin-bottom:14px; min-height:calc(100vh - 28px); border:1px solid rgba(95,164,196,.11); border-radius:24px; background:rgba(4,11,17,.16); box-shadow:0 30px 100px rgba(0,4,8,.35); overflow:hidden; }
    .ff-topbar { border-radius:24px 24px 0 0; }
    .ff-bottom-nav { width:min(820px,100%); bottom:14px; border:1px solid rgba(92,164,197,.18); border-radius:0 0 22px 22px; }
}
@media (max-width: 420px) {
    .ff-topbar { grid-template-columns:38px minmax(0,1fr) auto; gap:8px; padding-left:10px; padding-right:10px; }
    .topbar-brand-mark { width:36px; }
    .topbar-brand-mark img { width:34px; height:34px; }
    .gold-label { display:none; }
    .power-chip, .gold-chip { padding:4px 6px; }
    .topbar-account { max-width:82px; }
    .item-card { min-height:116px; }
}
@media (prefers-reduced-motion: reduce) {
    .ff-loader *, .ff-loader::before, .ff-loader::after { animation:none!important; }
    *, *::before, *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; }
}

/* Stage 14 brand marks on public/auth/admin surfaces */
.ff-auth-mark { width:64px; height:64px; display:block; margin:0 auto 14px; filter:drop-shadow(0 0 22px rgba(91,201,243,.16)); }
.ff-landing-mark { width:82px; height:82px; display:block; margin-bottom:20px; filter:drop-shadow(0 0 26px rgba(91,201,243,.15)); }
.ff-admin-brand { display:flex; align-items:center; gap:10px; }
.ff-admin-brand > img { width:38px; height:38px; }

/* ========================================================================
   Frostforge Stage 14.1 — Art & Presentation Pass
   Cinematic scenes, boss staging, hero equipment theatre and reward bursts.
   ======================================================================== */

/* Ambient world depth */
.ff-game-body::after {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        radial-gradient(circle at 15% 18%,rgba(89,198,238,.055),transparent 24%),
        radial-gradient(circle at 84% 68%,rgba(233,144,66,.035),transparent 28%),
        linear-gradient(115deg,transparent 0 46%,rgba(142,225,255,.018) 46.2% 46.45%,transparent 46.7% 100%);
    mix-blend-mode:screen;
}

/* Unified illustrated Home sub-navigation */
.home-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.home-tab {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:48px;
    padding:7px 5px;
    font-size:.67rem;
    border-radius:12px;
}
.ff-home-tab-icon { width:18px; height:18px; display:grid; place-items:center; flex:none; }
.ff-home-tab-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.home-tab.active .ff-home-tab-icon { filter:drop-shadow(0 0 7px rgba(106,217,255,.42)); }

/* Location cards use the real production location art as a scene, not an icon tile. */
.ff-location-card {
    isolation:isolate;
    min-height:106px;
    padding:13px 13px 13px 12px;
    gap:10px;
    overflow:hidden;
    border-radius:16px;
    border:1px solid rgba(111,194,229,.22);
    background:#081721;
    box-shadow:0 14px 30px rgba(0,5,10,.28), inset 0 1px rgba(255,255,255,.035);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.ff-location-card:hover { transform:translateY(-2px); border-color:rgba(121,216,252,.45); box-shadow:0 18px 38px rgba(0,5,10,.36),0 0 22px rgba(68,170,215,.07); }
.ff-location-backdrop,
.ff-location-detail-backdrop,
.ff-combat-backdrop {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    image-rendering:pixelated;
    pointer-events:none;
}
.ff-location-backdrop { z-index:-3; opacity:.72; filter:saturate(.76) contrast(1.12) brightness(.68); transform:scale(1.025); }
.ff-location-shade {
    position:absolute;
    inset:0;
    z-index:-2;
    background:linear-gradient(90deg,rgba(5,13,20,.94) 0%,rgba(7,17,25,.82) 48%,rgba(7,17,25,.35) 78%,rgba(7,17,25,.56) 100%),linear-gradient(180deg,rgba(74,177,220,.06),rgba(0,0,0,.38));
}
.ff-location-card .compact-location-icon {
    width:48px;
    height:48px;
    padding:5px;
    border-radius:12px;
    background:rgba(4,15,23,.72);
    border:1px solid rgba(134,218,250,.25);
    box-shadow:0 9px 22px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05);
    backdrop-filter:blur(5px);
}
.ff-location-card .location-title-line b { font-family:Cinzel,"Philosopher",serif; font-size:.82rem; color:#effaff; text-shadow:0 2px 8px rgba(0,0,0,.65); }
.ff-location-card .location-meta,.ff-location-card .location-boss-line,.ff-location-card .location-lock-reason { color:#a5bdca; text-shadow:0 1px 5px rgba(0,0,0,.8); }
.ff-location-card .location-state { backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.09); }
.ff-location-card.locked-location .ff-location-backdrop { filter:grayscale(.8) saturate(.2) brightness(.37); }
.ff-location-card.completed-location .ff-location-backdrop { filter:saturate(.55) contrast(1.08) brightness(.58); }

/* Full location art on the detail page. */
.ff-location-detail {
    isolation:isolate;
    min-height:224px;
    padding:16px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
    background:#07131d!important;
    border-color:rgba(109,204,242,.26)!important;
}
.ff-location-detail-backdrop { z-index:-3; opacity:.86; filter:saturate(.82) contrast(1.11) brightness(.68); }
.ff-location-detail-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(3,10,15,.10),rgba(4,12,18,.36) 42%,rgba(5,14,21,.94) 100%),linear-gradient(90deg,rgba(5,13,20,.76),transparent 62%); }
.ff-location-detail .combat-location-back { position:absolute; top:12px; left:12px; z-index:3; background:rgba(5,15,23,.74); border:1px solid rgba(128,214,247,.23); backdrop-filter:blur(8px); }
.ff-location-detail .location-detail-head { margin-top:88px; }
.ff-location-detail .location-icon { background:rgba(4,15,23,.68); border:1px solid rgba(139,224,255,.23); backdrop-filter:blur(6px); }
.ff-location-detail h2 { text-shadow:0 2px 15px rgba(0,0,0,.7); }
.ff-location-detail .compact-location-description { max-width:720px; color:#b8cbd6; text-shadow:0 2px 8px rgba(0,0,0,.72); }

/* Active combat becomes an arena tied to the actual location art. */
.ff-combat-arena { isolation:isolate; background:#07141e!important; overflow:hidden; }
.ff-combat-backdrop { z-index:-4; opacity:.44; filter:saturate(.68) contrast(1.12) brightness(.48); transform:scale(1.08); }
.ff-combat-vignette { position:absolute; inset:0; z-index:-3; background:radial-gradient(circle at 50% 34%,rgba(31,99,126,.10),transparent 35%),linear-gradient(180deg,rgba(4,12,18,.48),rgba(4,11,17,.86)); pointer-events:none; }
.ff-combat-arena .fighter-card { background:rgba(8,23,33,.78); backdrop-filter:blur(6px); border-color:rgba(91,170,205,.22); }
.ff-combat-arena .monster-fighter { background:rgba(26,17,23,.74); border-color:rgba(183,97,102,.24); }
.ff-combat-arena .combat-monster-sprite { width:70px; height:70px; margin:auto; filter:drop-shadow(0 12px 14px rgba(0,0,0,.55)); }

/* World/Guild boss theatre. */
.ff-boss-showcase {
    position:relative;
    overflow:hidden;
    padding:0 13px 13px;
    border-radius:18px;
    background:linear-gradient(180deg,#07131d,#091923 42%,#08151e);
    border:1px solid rgba(117,204,239,.24);
    box-shadow:0 18px 46px rgba(0,4,8,.36),inset 0 1px rgba(255,255,255,.03);
}
.ff-boss-stage {
    height:208px;
    margin:0 -13px 10px;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 65%,rgba(70,179,222,.16),transparent 32%),
        linear-gradient(180deg,#07141e,#0b1d29 65%,#08151e);
    border-bottom:1px solid rgba(118,205,241,.16);
}
.ff-boss-stage::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(3,9,14,.85)),repeating-linear-gradient(90deg,transparent 0 28px,rgba(127,221,255,.013) 29px 30px); }
.ff-boss-sigil { position:absolute; width:300px; height:300px; opacity:.72; animation:ffBossSigil 18s linear infinite; }
.ff-boss-stage-art { position:relative; z-index:2; width:150px; height:150px; display:grid; place-items:center; transform:translateY(7px); }
.ff-boss-stage-sprite { width:150px!important; height:150px!important; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 20px 16px rgba(0,0,0,.7)) drop-shadow(0 0 20px rgba(92,204,244,.14)); }
.ff-boss-frost { position:absolute; bottom:-48px; width:170px; height:90px; background:radial-gradient(ellipse,rgba(133,225,255,.14),transparent 65%); filter:blur(8px); }
.ff-boss-frost-a { left:5%; transform:rotate(-9deg); } .ff-boss-frost-b { right:5%; transform:rotate(9deg); }
.ff-boss-showcase .boss-card-head { margin-top:2px; }
.ff-boss-showcase .boss-card-icon { display:none; }
.ff-boss-showcase h3 { font-size:1.06rem; }
.ff-boss-showcase .boss-wide-hp { height:9px; box-shadow:0 0 18px rgba(229,92,96,.12); }
.ff-boss-showcase .boss-phase-line,.ff-boss-showcase .boss-personal,.ff-boss-showcase .boss-reward-preview { background:rgba(5,15,23,.58); border:1px solid rgba(86,147,176,.12); border-radius:10px; padding:8px; }
@keyframes ffBossSigil { to { transform:rotate(360deg); } }

/* Character equipment theatre: hero in the centre, equipment around the body. */
.ff-equipment-stage {
    grid-template-columns:minmax(76px,1fr) minmax(104px,1.22fr) minmax(76px,1fr)!important;
    grid-template-areas:
        "helmet hero amulet"
        "weapon hero ring"
        "gloves hero ammo"
        "body hero spell"
        "legs hero boots"!important;
    gap:7px!important;
    align-items:stretch;
    padding:14px 8px!important;
    background:
        radial-gradient(circle at 50% 42%,rgba(90,204,245,.15),transparent 28%),
        radial-gradient(circle at 50% 80%,rgba(225,137,63,.045),transparent 25%),
        linear-gradient(180deg,rgba(6,18,27,.76),rgba(4,12,18,.92))!important;
}
.ff-equipment-stage::before { content:""!important; width:240px!important; height:240px!important; top:46%!important; border:1px solid rgba(120,218,254,.065)!important; border-radius:50%!important; font-size:0!important; background:conic-gradient(from 45deg,transparent,rgba(111,211,249,.04),transparent 22%,rgba(111,211,249,.025),transparent 48%,rgba(232,148,71,.025),transparent 70%); animation:ffHeroRune 24s linear infinite; }
.ff-hero-figure { grid-area:hero; min-height:296px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; overflow:hidden; border-radius:18px; border:1px solid rgba(91,173,208,.13); background:linear-gradient(180deg,rgba(11,31,43,.30),rgba(5,15,23,.60)); }
.ff-hero-figure img { position:absolute; inset:12px 6px 24px; width:calc(100% - 12px); height:calc(100% - 36px); object-fit:contain; filter:drop-shadow(0 18px 18px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(92,203,243,.10)); z-index:2; }
.ff-hero-figure small { position:relative; z-index:3; color:#628093; font-size:.48rem; font-weight:800; letter-spacing:.16em; margin-bottom:7px; }
.ff-hero-aura { position:absolute; width:150px; height:230px; left:50%; top:42%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(102,218,255,.17),rgba(55,142,179,.045) 46%,transparent 70%); filter:blur(7px); }
.ff-equipment-stage .equipment-slot { min-height:54px!important; padding:5px!important; border-radius:10px!important; background:linear-gradient(180deg,rgba(17,38,52,.94),rgba(7,20,29,.97)); }
.ff-equipment-stage .equipment-slot span { font-size:.45rem; }
.ff-equipment-stage .equipment-slot b { font-size:.56rem; }
.ff-equipment-stage .equipment-sprite { width:25px!important; height:25px!important; }
.ff-equipment-stage .equipment-item-line { gap:3px; }
@keyframes ffHeroRune { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }

/* Rarity material framing. */
.item-card[class*="rarity-"], .equipment-slot[class*="rarity-"] { isolation:isolate; }
.item-card[class*="rarity-"]::after,
.equipment-slot[class*="rarity-"]::after {
    content:"";
    position:absolute;
    inset:3px;
    pointer-events:none;
    border-radius:10px;
    background:
        linear-gradient(var(--rarity,#789) 0 0) left top/12px 1px no-repeat,
        linear-gradient(var(--rarity,#789) 0 0) left top/1px 12px no-repeat,
        linear-gradient(var(--rarity,#789) 0 0) right top/12px 1px no-repeat,
        linear-gradient(var(--rarity,#789) 0 0) right top/1px 12px no-repeat,
        linear-gradient(var(--rarity,#789) 0 0) left bottom/12px 1px no-repeat,
        linear-gradient(var(--rarity,#789) 0 0) left bottom/1px 12px no-repeat,
        linear-gradient(var(--rarity,#789) 0 0) right bottom/12px 1px no-repeat,
        linear-gradient(var(--rarity,#789) 0 0) right bottom/1px 12px no-repeat;
    opacity:.38;
    z-index:3;
}
.item-card.rarity-epic::after,.item-card.rarity-legendary::after,.item-card.rarity-runebound::after,.item-card.rarity-arcane::after,.item-card.rarity-sovereign::after,.item-card.rarity-umbral::after,.item-card.rarity-hexed::after,.item-card.rarity-occult::after,.item-card.rarity-lostborn::after,.item-card.rarity-nightbound::after,.item-card.rarity-infernal::after,.item-card.rarity-ascendant::after,.item-card.rarity-riftborn::after,.item-card.rarity-timeless::after,.item-card.rarity-seraphic::after,.item-card.rarity-astral::after,.item-card.rarity-empyrean::after,.item-card.rarity-originborn::after { opacity:.72; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--rarity,#7bdcff) 35%,transparent)); }

/* Guild identity presentation. */
.ff-guild-card { display:grid!important; grid-template-columns:48px minmax(0,1fr) auto; align-items:center!important; flex-direction:initial!important; background:linear-gradient(180deg,rgba(15,34,46,.94),rgba(8,22,31,.96)); }
.ff-guild-crest { position:relative; width:46px; height:54px; display:grid; place-items:center; flex:none; filter:drop-shadow(0 8px 10px rgba(0,0,0,.28)); }
.ff-guild-crest img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ff-guild-crest b { position:relative; z-index:2; font-family:Cinzel,"Philosopher",serif; color:#d9f7ff; font-size:.63rem; letter-spacing:.03em; text-shadow:0 1px 5px rgba(0,0,0,.9); transform:translateY(-2px); }
.ff-guild-header { display:grid!important; grid-template-columns:62px minmax(0,1fr) auto; align-items:center!important; gap:12px; padding:13px; border-radius:15px; background:radial-gradient(circle at 10% 30%,rgba(77,182,222,.12),transparent 30%),linear-gradient(180deg,#102837,#091923); border:1px solid rgba(93,180,217,.20); }
.ff-guild-header .ff-guild-crest { width:58px; height:68px; }
.ff-guild-header-copy { min-width:0; }
.ff-guild-header-copy h2 { margin:2px 0 4px; }
.ff-guild-header-copy p { margin:0; }

/* High-impact feedback layer for level ups, achievements and rare drops. */
.ff-presentation-layer { position:fixed; inset:0; z-index:620; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:max(110px,12vh); gap:9px; overflow:hidden; }
.ff-presentation-burst {
    --burst:#77daf7;
    width:min(92vw,440px);
    min-height:94px;
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    align-items:center;
    gap:8px;
    padding:10px 16px 10px 10px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--rarity,var(--burst)) 46%,transparent);
    background:
        radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--rarity,var(--burst)) 20%,transparent),transparent 35%),
        linear-gradient(155deg,rgba(15,36,49,.98),rgba(5,15,23,.98));
    box-shadow:0 24px 70px rgba(0,4,8,.66),0 0 34px color-mix(in srgb,var(--rarity,var(--burst)) 13%,transparent),inset 0 1px rgba(255,255,255,.05);
    opacity:0;
    transform:translateY(-22px) scale(.94);
    transition:opacity .32s ease,transform .42s cubic-bezier(.15,.9,.2,1);
}
.ff-presentation-burst.show { opacity:1; transform:translateY(0) scale(1); }
.ff-burst-rune { width:66px; height:66px; display:grid; place-items:center; position:relative; }
.ff-burst-rune::before { content:""; position:absolute; inset:6px; border-radius:50%; border:1px solid color-mix(in srgb,var(--rarity,var(--burst)) 32%,transparent); box-shadow:0 0 22px color-mix(in srgb,var(--rarity,var(--burst)) 16%,transparent); animation:ffBurstSpin 4s linear infinite; }
.ff-burst-rune img { width:48px; height:48px; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--rarity,var(--burst)) 30%,transparent)); }
.ff-burst-copy { min-width:0; display:flex; flex-direction:column; }
.ff-burst-copy>span { color:color-mix(in srgb,var(--rarity,var(--burst)) 72%,white); font-size:.53rem; font-weight:800; letter-spacing:.18em; }
.ff-burst-copy>b { font-family:Cinzel,"Philosopher",serif; color:#f2fbff; font-size:.98rem; line-height:1.2; margin-top:3px; overflow:hidden; text-overflow:ellipsis; }
.ff-burst-copy>small { color:#8fa7b7; margin-top:3px; font-size:.66rem; }
.ff-burst-achievement { --burst:#e5b866; }
@keyframes ffBurstSpin { to { transform:rotate(360deg); } }

/* Cleaner hierarchy after removing Latest Events from Home. */
.community-panel { margin-top:10px; }
.community-panel>.home-tabs { position:relative; z-index:2; }
.rating-row,.friend-row,.market-row,.guild-row { transition:background .14s ease,border-color .14s ease,transform .14s ease; }
.rating-row:hover,.friend-row:hover,.market-row:hover { background:rgba(91,175,213,.055); }

@media (max-width:640px) {
    .home-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
    .home-tab { min-height:52px; flex-direction:column; gap:2px; padding:5px 2px; font-size:.55rem; }
    .ff-home-tab-icon,.ff-home-tab-icon svg { width:17px; height:17px; }
    .ff-location-card { min-height:96px; padding:10px 9px; }
    .ff-location-card .compact-location-icon { width:40px; height:40px; }
    .ff-boss-stage { height:176px; }
    .ff-boss-stage-sprite { width:126px!important; height:126px!important; }
    .ff-boss-sigil { width:250px; height:250px; }
    .ff-guild-card { grid-template-columns:42px minmax(0,1fr)!important; gap:8px!important; }
    .ff-guild-card>.ff-guild-crest { width:40px; height:48px; }
    .ff-guild-card>button,.ff-guild-card>.guild-directory-state { grid-column:1/-1; width:100%; text-align:center; }
    .ff-guild-header { grid-template-columns:54px minmax(0,1fr); }
    .ff-guild-header>.guild-level { grid-column:1/-1; display:flex; justify-content:space-between; }
    .ff-equipment-stage { grid-template-columns:minmax(62px,.88fr) minmax(90px,1.05fr) minmax(62px,.88fr)!important; gap:5px!important; padding:9px 5px!important; }
    .ff-hero-figure { min-height:270px; }
    .ff-equipment-stage .equipment-slot { min-height:49px!important; padding:4px 3px!important; }
    .ff-equipment-stage .equipment-slot span { font-size:.4rem; }
    .ff-equipment-stage .equipment-slot b { font-size:.49rem; }
    .ff-equipment-stage .equipment-sprite { width:21px!important; height:21px!important; }
    .ff-presentation-layer { padding-top:96px; }
    .ff-presentation-burst { width:calc(100vw - 22px); min-height:82px; grid-template-columns:58px minmax(0,1fr); padding:8px 12px 8px 8px; }
    .ff-burst-rune { width:54px; height:54px; }
    .ff-burst-rune img { width:40px; height:40px; }
    .ff-burst-copy>b { font-size:.86rem; }
}

@media (max-width:380px) {
    .home-tab span { max-width:58px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ff-equipment-stage { grid-template-columns:58px minmax(82px,1fr) 58px!important; }
    .ff-hero-figure { min-height:250px; }
    .ff-equipment-stage .equipment-slot b span { display:none; }
}

@media (prefers-reduced-motion:reduce) {
    .ff-boss-sigil,.ff-equipment-stage::before,.ff-burst-rune::before { animation:none!important; }
    .ff-presentation-burst { transition:none!important; }
}


/* ==========================================================================\n   Frostforge Stage 14.2 — UX & Mobile Polish\n   Mobile-first interaction density, progressive disclosure and combat feedback.\n   ========================================================================== */
:root { --ff-tap:44px; --ff-view-ease:cubic-bezier(.2,.8,.2,1); }
html { scroll-behavior:smooth; }
button, select, input, textarea { touch-action:manipulation; }
button, .nav-btn, .home-tab, .recipe-filter, .inventory-section-row { -webkit-tap-highlight-color:transparent; }
.ff-topbar { position:sticky; top:0; z-index:80; backdrop-filter:blur(18px) saturate(1.18); }
.content.ff-view-enter { animation:ffViewEnter .18s var(--ff-view-ease) both; }
@keyframes ffViewEnter { from{opacity:.25;transform:translateY(7px) scale(.995)} to{opacity:1;transform:none} }

/* Real boot skeleton instead of a text-only placeholder. */
.ff-skeleton-panel { min-height:220px; overflow:hidden; position:relative; }
.ff-skeleton { border-radius:8px; background:linear-gradient(100deg,rgba(126,194,222,.055) 20%,rgba(174,231,252,.16) 38%,rgba(126,194,222,.055) 58%); background-size:220% 100%; animation:ffSkeleton 1.25s linear infinite; }
.ff-skeleton-title { width:48%; height:24px; margin:4px 0 14px; }
.ff-skeleton-line { height:12px; width:86%; margin:9px 0; }
.ff-skeleton-line.short { width:62%; }
.ff-skeleton-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0; }
.ff-skeleton-grid i { display:block; height:74px; border-radius:11px; background:rgba(125,194,222,.075); border:1px solid rgba(125,194,222,.06); }
@keyframes ffSkeleton { to{background-position:-220% 0} }

/* Crafting: search first, then collapsible recipe families. */
.ff-recipe-search { display:flex; gap:7px; align-items:center; margin:0 0 9px; position:relative; }
.ff-recipe-search input { width:100%; min-height:42px; padding-left:36px; }
.ff-recipe-search::before { content:"⌕"; position:absolute; left:12px; top:8px; color:#7fc7e3; font-size:1.15rem; pointer-events:none; }
details.recipe-family-group { padding:0; overflow:hidden; }
details.recipe-family-group>summary { list-style:none; cursor:pointer; min-height:46px; padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
details.recipe-family-group>summary::-webkit-details-marker { display:none; }
details.recipe-family-group>summary::after { content:"⌄"; color:#88bcd1; transition:transform .16s ease; }
details.recipe-family-group[open]>summary::after { transform:rotate(180deg); }
details.recipe-family-group .recipe-family-head { padding:0; flex:1; }
details.recipe-family-group .compact-action-list { padding:0 7px 8px; }

/* Inventory toolbar and progressive disclosure. */
.ff-inventory-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 128px; gap:7px; margin:8px 0 10px; }
.ff-inventory-toolbar input,.ff-inventory-toolbar select { min-height:42px; }
.ff-inventory-search-results { margin-top:8px; }
.ff-management-details { padding:0!important; overflow:hidden; }
.ff-management-details>summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; min-height:54px; padding:10px 12px; }
.ff-management-details>summary::-webkit-details-marker { display:none; }
.ff-management-details>summary::after { content:"⌄"; color:#84c8e3; font-size:1rem; }
.ff-management-details[open]>summary::after { transform:rotate(180deg); }
.ff-management-details .ff-management-body { border-top:1px solid rgba(115,183,212,.12); padding:10px 12px 12px; }
.ff-management-summary { min-width:0; }
.ff-management-summary b { display:block; font-size:.83rem; }
.ff-management-summary small { display:block; color:var(--muted); margin-top:2px; font-size:.61rem; }

/* Item modal: important information first. */
.ff-item-key-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:8px 0 10px; }
.ff-item-key-stat { min-width:0; padding:7px 6px; border:1px solid rgba(104,175,204,.14); border-radius:9px; background:rgba(8,24,34,.52); text-align:center; }
.ff-item-key-stat span { display:block; color:#93aebc; font-size:.54rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ff-item-key-stat b { display:block; margin-top:2px; color:#eefaff; font-size:.76rem; }
.ff-item-more { border-top:1px solid rgba(112,177,204,.12); margin-top:8px; padding-top:7px; }
.ff-item-more>summary { cursor:pointer; color:#a9c8d6; font-weight:700; font-size:.68rem; padding:5px 0; }

/* Combat feedback is based on server-authoritative HP deltas. */
.ff-combat-arena { position:relative; }
.ff-combat-fx { position:absolute; inset:72px 10px 110px; z-index:8; pointer-events:none; overflow:hidden; }
.ff-combat-float { position:absolute; top:40%; font-family:Inter,sans-serif; font-weight:900; font-size:1.05rem; letter-spacing:.02em; text-shadow:0 2px 8px #000,0 0 12px currentColor; animation:ffCombatFloat .9s ease-out forwards; }
.ff-combat-float.hero { left:20%; color:#ff8e8e; }
.ff-combat-float.monster { right:20%; color:#a5eaff; }
.ff-combat-float.crit { font-size:1.22rem; color:#ffe38a; }
.ff-combat-float.hero.crit { color:#ffd48a; }
.ff-combat-float.heal { color:#93efbd; }
.ff-hit-log { margin:8px 0 0; padding:7px 9px; min-height:72px; max-height:118px; overflow:hidden; border:1px solid rgba(120,186,214,.16); border-radius:10px; background:rgba(4,16,24,.55); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
.ff-hit-log-compact { min-height:54px; max-height:78px; margin-top:8px; }
.ff-hit-row { display:flex; align-items:center; gap:6px; min-height:16px; font-size:.68rem; font-weight:700; letter-spacing:.01em; color:#d7ecf5; line-height:1.25; }
.ff-hit-row.you { color:#9fe7ff; }
.ff-hit-row.them { color:#ffb3b3; }
.ff-hit-row.crit { color:#ffe38a; }
.ff-hit-row.miss { color:#8aa0ad; font-weight:650; }
.ff-hit-row.dodge { color:#9ef0c4; }
.ff-hit-row.muted { color:#7f98a6; font-weight:650; }
.ff-hit-row.heal { color:#93efbd; }
.ff-hit-row.eat { color:#b6f0c8; }
.ff-combat-eat { position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 10px; margin:7px 0 0; padding:7px 9px; border:1px solid rgba(120,186,214,.16); border-radius:10px; background:rgba(8,28,22,.55); font-size:.68rem; font-weight:700; }
.ff-combat-eat span { color:#d8f6e4; }
.ff-combat-eat small { color:#8fb9a8; font-weight:650; }
.ff-combat-eat.off { background:rgba(16,22,28,.45); border-color:rgba(120,186,214,.12); }
.ff-combat-eat.off span { color:#c5d5de; }
.ff-combat-eat.off small { color:#7f98a6; }
.ff-combat-eat.warn { border-color:rgba(214,176,80,.35); background:rgba(40,28,8,.5); }
.ff-combat-eat.warn span { color:#ffe38a; }
.ff-combat-eat.warn small { color:#d7c48a; }
.ff-combat-float.eat { color:#93efbd; }

.ff-hit-row i { font-style:normal; color:#93efbd; }
.combat-home-card { position:relative; }
.ff-combat-fx-home { inset:28px 8px 64px; }
@keyframes ffCombatFloat { 0%{opacity:0;transform:translateY(12px) scale(.8)} 18%{opacity:1;transform:translateY(0) scale(1.12)} 100%{opacity:0;transform:translateY(-32px) scale(.96)} }
.fighter-card.ff-hit { animation:ffHit .22s ease-out; }
@keyframes ffHit { 45%{transform:translateX(3px);filter:brightness(1.35)} }

/* Better modal ergonomics and sticky actions. */
.modal-top-row { position:sticky; top:-1px; z-index:6; padding:4px 0 8px; background:linear-gradient(180deg,rgba(16,38,52,.98) 70%,rgba(16,38,52,0)); }
.item-modal-card,.player-modal-card { overscroll-behavior:contain; scrollbar-gutter:stable; }
.primary-btn,.secondary-btn,.danger-btn { min-height:40px; }

@media (max-width:640px) {
    :root { --nav-h:64px; }
    html, body.ff-game-body { width:100%; max-width:100%; overflow-x:hidden; }
    body.ff-game-body { padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 9px); }
    .ff-app-shell { width:100%; }
    .ff-topbar { min-height:58px; padding:7px 10px; border-radius:0; }
    .topbar-brand-mark { width:34px; height:34px; }
    .topbar-name-line h1 { max-width:38vw; font-size:.9rem; }
    .topbar-account { max-width:27vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .content { padding:8px 8px calc(var(--nav-h) + 8px); }
    .panel { margin-bottom:8px; }
    /* stage1421-bottom-nav: reset the desktop centering transform on mobile. */
    .ff-bottom-nav {
        left:0;
        right:0;
        bottom:0;
        transform:none;
        width:auto;
        max-width:100vw;
        margin:0;
        box-sizing:border-box;
        border-radius:14px 14px 0 0;
        padding:4px max(6px,env(safe-area-inset-left)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right));
        box-shadow:0 -12px 36px rgba(0,5,10,.52);
    }
    .nav-btn { min-height:52px; padding:4px 2px; }
    .nav-btn small { font-size:.53rem; }
    .nav-icon { width:21px; height:21px; }
    .home-tabs { position:sticky; top:58px; z-index:25; margin:-1px -2px 7px; padding:5px 2px; background:linear-gradient(180deg,rgba(7,18,27,.97),rgba(7,18,27,.88)); backdrop-filter:blur(12px); }
    .home-tab { min-height:43px; }
    .ff-inventory-toolbar { grid-template-columns:minmax(0,1fr) 112px; }
    .inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
    .item-card { min-height:116px; padding:7px 5px; }
    .ff-item-key-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .recipe-filter-bar { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:2px; }
    .recipe-filter-bar::-webkit-scrollbar { display:none; }
    .recipe-filter { flex:0 0 auto; min-height:38px; }
    .action-row.action-row-rich { grid-template-columns:42px minmax(0,1fr); }
    .action-row.action-row-rich>.action-btn { grid-column:1/-1; width:100%; min-height:42px; }
    .fighters { grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); gap:5px; }
    .fighter-card { padding:8px 5px; }
    .fighter-card h3 { font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .fighter-stats { display:grid; gap:2px; font-size:.54rem; }
    .ff-combat-arena .combat-monster-sprite { width:58px; height:58px; }
    .combat-run-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
    .combat-run-stats>div { padding:6px 3px; }
    .modal-backdrop { align-items:flex-end; padding:0; }
    .modal-card,.item-modal-card,.player-modal-card { width:100%; max-width:none; max-height:88dvh; border-radius:18px 18px 0 0; border-bottom:0; padding:12px 12px max(14px,env(safe-area-inset-bottom)); animation:ffSheetIn .22s var(--ff-view-ease); }
    @keyframes ffSheetIn { from{transform:translateY(24px);opacity:.5} to{transform:none;opacity:1} }
    .ff-skeleton-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:380px) {
    .content { padding-left:6px; padding-right:6px; }
    .ff-inventory-toolbar { grid-template-columns:1fr; }
    .fighters { grid-template-columns:1fr; }
    .versus { height:18px; }
    .ff-combat-float.hero { left:12%; }.ff-combat-float.monster { right:12%; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    .content.ff-view-enter,.ff-skeleton,.ff-combat-float,.fighter-card.ff-hit,.modal-card { animation:none!important; }
}

/* === stage1422-force-layout-r2 START === */
/* FORCE repair: intentionally last in the cascade. */

/* Boss copy gets the full card width. No hidden icon/grid cell can squeeze it. */
.ff-boss-showcase .ff-boss-head,
.ff-boss-showcase .boss-card-head.ff-boss-head {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    gap:7px!important;
    margin:0!important;
}
.ff-boss-showcase .ff-boss-copy {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
}
.ff-boss-showcase .ff-boss-copy .eyebrow,
.ff-boss-showcase .ff-boss-copy h3,
.ff-boss-showcase .ff-boss-copy p {
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    white-space:normal!important;
}
.ff-boss-showcase .ff-boss-copy h3 { margin:3px 0 5px!important; line-height:1.12!important; }
.ff-boss-showcase .ff-boss-copy p {
    margin:0!important;
    display:block!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
    line-height:1.35!important;
}
.ff-boss-showcase .boss-status {
    position:static!important;
    grid-column:auto!important;
    grid-row:auto!important;
    align-self:flex-start!important;
    width:auto!important;
    max-width:100%!important;
    white-space:nowrap!important;
}

/* Character: no fake person assembled from schematic/gear icons. */
.ff-equipment-stage.ff-equipment-no-hero {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:none!important;
    gap:8px!important;
    padding:10px!important;
    background:linear-gradient(180deg,rgba(7,21,31,.82),rgba(4,13,20,.94))!important;
}
.ff-equipment-stage.ff-equipment-no-hero::before { display:none!important; content:none!important; }
.ff-equipment-stage.ff-equipment-no-hero .equipment-slot {
    grid-area:auto!important;
    min-height:72px!important;
    width:100%!important;
}
.ff-equipment-stage.ff-equipment-no-hero .equipment-slot b span { display:inline!important; }
.ff-equipment-stage.ff-equipment-no-hero + * { clear:both; }

/* Community tabs scroll with the page. They must never cover guild/boss/rating content. */
.home-tabs {
    position:relative!important;
    top:auto!important;
    z-index:2!important;
}

@media (max-width:640px) {
    :root { --ff-fixed-nav-clearance:156px; }

    /* Fixed nav stays visible, but content always has a real physical runway
       below its last control so nothing can sit underneath the panel. */
    #app-content.content,
    main#app-content.content {
        padding-bottom:calc(var(--ff-fixed-nav-clearance) + env(safe-area-inset-bottom))!important;
        scroll-padding-bottom:calc(var(--ff-fixed-nav-clearance) + env(safe-area-inset-bottom))!important;
    }
    #app-content.content::after {
        content:""!important;
        display:block!important;
        width:100%!important;
        height:52px!important;
        flex:0 0 52px!important;
        grid-column:1/-1!important;
    }
    .ff-bottom-nav {
        position:fixed!important;
        left:0!important;
        right:0!important;
        bottom:0!important;
        transform:none!important;
        width:100vw!important;
        max-width:100vw!important;
        margin:0!important;
        box-sizing:border-box!important;
        z-index:120!important;
    }

    .home-tabs {
        position:relative!important;
        top:auto!important;
        z-index:2!important;
        margin:0 0 9px!important;
        padding:5px 2px!important;
        backdrop-filter:none!important;
    }

    .ff-boss-showcase { padding:0 10px 12px!important; }
    .ff-boss-stage { height:132px!important; margin:0 -10px 9px!important; }
    .ff-boss-stage-art,.ff-boss-stage-sprite { width:104px!important; height:104px!important; }
    .ff-boss-sigil { width:188px!important; height:188px!important; }
    .ff-boss-showcase .ff-boss-copy h3 { font-size:1.08rem!important; }
    .ff-boss-showcase .ff-boss-copy p { font-size:.72rem!important; line-height:1.35!important; }
    .ff-boss-showcase .boss-hp-line { margin-top:3px!important; }
    .ff-boss-showcase .boss-phase-line,
    .ff-boss-showcase .boss-personal,
    .ff-boss-showcase .boss-reward-preview { width:100%!important; box-sizing:border-box!important; }
    .ff-boss-showcase .boss-phase-line { display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:3px!important; }
    .ff-boss-showcase .boss-personal { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:4px!important; }
    .ff-boss-showcase .boss-reward-preview { display:grid!important; grid-template-columns:1fr!important; gap:3px!important; }

    .ff-equipment-stage.ff-equipment-no-hero { grid-template-columns:repeat(2,minmax(0,1fr))!important; padding:8px!important; gap:7px!important; }
    .ff-equipment-stage.ff-equipment-no-hero .equipment-slot { min-height:66px!important; padding:6px!important; }
    .ff-equipment-stage.ff-equipment-no-hero .equipment-slot span { font-size:.50rem!important; }
    .ff-equipment-stage.ff-equipment-no-hero .equipment-slot b { font-size:.61rem!important; }
}

@media (max-width:380px) {
    :root { --ff-fixed-nav-clearance:164px; }
    .ff-boss-showcase .boss-personal { grid-template-columns:1fr!important; }
}
/* === stage1422-force-layout-r2 END === */


/* === stage143-referrals-guild-ux START === */
.ff-recipe-simple-filters {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(130px,.34fr) minmax(130px,.34fr);
    gap:8px;
    align-items:end;
    padding:10px;
    border:1px solid rgba(101,199,235,.16);
    border-radius:16px;
    background:rgba(5,17,26,.56);
    margin:8px 0 12px;
}
.ff-recipe-simple-filters label { display:grid; gap:5px; min-width:0; }
.ff-recipe-simple-filters label>span { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.04em; }
.ff-recipe-simple-filters input,
.ff-recipe-simple-filters select { width:100%; min-width:0; height:44px; }
.ff-flat-recipe-list { display:grid; gap:8px; }
.ff-flat-recipe-list .action-row { margin:0; }

.referral-panel { display:grid; gap:12px; overflow:hidden; }
.referral-cap { padding:6px 10px; border:1px solid rgba(103,211,247,.25); border-radius:999px; color:#9cdef5; font-size:.75rem; font-weight:800; }
.referral-pips { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.referral-pip { padding:8px 4px; text-align:center; border-radius:10px; border:1px solid rgba(118,153,174,.18); background:rgba(4,14,22,.7); color:#718a9a; font-size:.72rem; font-weight:800; }
.referral-pip.active { color:#d7f6ff; border-color:rgba(91,213,248,.48); background:linear-gradient(180deg,rgba(39,139,174,.35),rgba(9,52,72,.7)); box-shadow:inset 0 0 20px rgba(55,194,232,.12); }
.referral-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.referral-stats span { display:flex; justify-content:space-between; gap:10px; padding:9px 11px; border:1px solid rgba(94,150,181,.16); border-radius:12px; background:rgba(4,15,23,.52); color:var(--muted); }
.referral-stats b { color:var(--text); }
.referral-link-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.referral-link-row input { min-width:0; }
.referral-register-hint { margin:-2px 0 4px; padding:9px 11px; border-radius:12px; border:1px solid rgba(94,178,211,.18); background:rgba(6,24,34,.58); color:#88a7b8; font-size:.74rem; line-height:1.4; }
.guild-danger-zone { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; margin:12px 0; border-radius:14px; border:1px solid rgba(216,80,80,.35); background:linear-gradient(180deg,rgba(89,20,27,.18),rgba(36,10,14,.5)); }
.guild-danger-zone div { display:grid; gap:3px; }
.guild-danger-zone small { color:#bd9297; line-height:1.35; }

@media (max-width:640px) {
    .ff-recipe-simple-filters { grid-template-columns:1fr 1fr; padding:8px; }
    .ff-recipe-simple-filters .ff-recipe-search { grid-column:1/-1; }
    .ff-flat-recipe-list .action-row-rich { padding:9px; }
    .referral-link-row { grid-template-columns:1fr; }
    .referral-link-row .primary-btn { width:100%; }
    .guild-danger-zone { grid-template-columns:1fr; }
    .guild-danger-zone .danger-btn { width:100%; }
}
/* === stage143-referrals-guild-ux END === */

/* === stage15-city-property START === */
.city-box{display:grid;gap:12px}.city-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);gap:14px;padding:18px;border:1px solid rgba(124,204,235,.22);border-radius:16px;background:radial-gradient(circle at 85% 0,rgba(104,203,238,.17),transparent 38%),linear-gradient(145deg,rgba(8,25,36,.96),rgba(4,13,20,.98));box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 45px rgba(0,0,0,.24)}.city-hero:after{content:"";position:absolute;inset:auto -8% -65px 38%;height:155px;transform:skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(111,219,255,.09),transparent);pointer-events:none}.city-hero h2{margin:4px 0 7px;font-size:1.35rem}.city-hero p{margin:0;color:var(--muted);line-height:1.45;max-width:720px}.city-summary{display:grid;align-content:center;gap:7px}.city-summary span{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid rgba(138,204,227,.13);border-radius:10px;background:rgba(0,0,0,.18);font-size:.78rem}.city-toolbar{display:flex;gap:9px;align-items:center}.city-toolbar select{flex:1;min-width:0}.city-property-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.city-property-card{position:relative;display:grid;gap:9px;padding:13px;border:1px solid rgba(139,185,203,.16);border-radius:14px;background:linear-gradient(180deg,rgba(8,23,32,.96),rgba(5,15,22,.98));box-shadow:inset 0 1px rgba(255,255,255,.025)}.city-property-card.owned{border-color:rgba(110,210,242,.38);box-shadow:inset 0 0 30px rgba(60,180,220,.06)}.city-property-card.abandoned{filter:saturate(.6);opacity:.82}.city-property-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center}.city-property-head h3{margin:2px 0 0;font-size:1rem}.city-property-head small{color:var(--muted);font-size:.66rem}.city-property-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(129,215,244,.24);border-radius:10px;background:radial-gradient(circle,rgba(83,190,224,.14),rgba(2,12,18,.35));font-size:1.2rem}.city-property-level{align-self:start;padding:4px 7px;border-radius:999px;background:rgba(93,190,225,.12);border:1px solid rgba(104,201,235,.18);font-size:.67rem;font-weight:800}.city-property-card>p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.42}.city-income{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.city-income span{padding:7px 8px;border-radius:9px;background:rgba(0,0,0,.2);font-size:.72rem}.city-property-meta{display:flex;flex-wrap:wrap;gap:5px 10px;color:var(--muted);font-size:.66rem}.city-owner-actions,.city-sale-offer{display:grid;gap:7px}.city-compact-btn{width:100%}.city-sale-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}.city-sale-row input{min-width:0}.city-max-level,.city-not-sale,.city-my-offer{padding:7px 8px;border-radius:8px;background:rgba(0,0,0,.18);color:var(--muted);font-size:.68rem}.city-offers{display:grid;gap:5px;padding-top:4px;border-top:1px solid rgba(126,191,215,.12)}.city-offer-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px;align-items:center;padding:6px;border-radius:8px;background:rgba(0,0,0,.17);font-size:.68rem}.city-rules{padding:4px 3px 30px;line-height:1.5}.home-tabs{scrollbar-width:none}.home-tabs::-webkit-scrollbar{display:none}
@media(max-width:760px){.city-hero{grid-template-columns:1fr;padding:13px}.city-summary{grid-template-columns:1fr}.city-property-grid{grid-template-columns:1fr}.city-property-card{padding:11px}.city-toolbar{display:grid;grid-template-columns:1fr}.city-sale-row{grid-template-columns:minmax(0,1fr) auto}.city-sale-row .ghost-btn{grid-column:1/-1}.city-offer-row{grid-template-columns:1fr auto auto}.city-income{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.city-property-head{grid-template-columns:auto minmax(0,1fr)}.city-property-level{grid-column:2;justify-self:start}.city-income{grid-template-columns:1fr}.city-offer-row{grid-template-columns:1fr 1fr}.city-offer-row>span{grid-column:1/-1}.city-sale-row{grid-template-columns:1fr}.city-sale-row button{width:100%}}
/* === stage15-city-property END === */

/* Stage 15: six Home destinations stay usable without crushing labels. */
.home-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:640px){.home-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important}.home-tab{min-width:0!important;width:100%!important}}

/* === stage153-ux-final START === */
/* 15.0.1 → 15.3: compact city, placeholder-first character/combat, unified inventory/crafting. */
.ff-art-slot{display:grid;place-items:center;position:relative;overflow:hidden;background:rgba(4,14,21,.72);border:1px solid rgba(122,184,211,.18);border-radius:10px;min-width:0;min-height:0}.ff-art-slot.has-art img{width:100%;height:100%;object-fit:contain;display:block}.ff-art-slot.is-placeholder{background:linear-gradient(145deg,rgba(18,37,49,.92),rgba(5,16,24,.98));color:#91a8b4;text-align:center}.ff-art-slot.is-placeholder b{font-size:.58rem;letter-spacing:.12em}.ff-art-slot.is-placeholder small{font-size:.43rem;color:#607783;margin-top:2px}.ff-art-slot.is-placeholder:after{content:"";position:absolute;inset:5px;border:1px dashed rgba(137,194,216,.13);border-radius:6px;pointer-events:none}

/* City 15.0.1: four views + one type filter + one sort. */
.city-compact-v2{gap:8px}.city-compact-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid rgba(128,191,216,.17);border-radius:12px;background:rgba(5,18,27,.86)}.city-compact-head h2{margin:2px 0 1px;font-size:1.06rem}.city-compact-head small{color:var(--muted);font-size:.62rem}.city-head-counter{display:grid;justify-items:end}.city-head-counter b{font-size:1.28rem}.city-head-counter small{font-size:.54rem;color:var(--muted)}.city-view-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border:1px solid rgba(114,171,196,.12);border-radius:11px;background:rgba(2,10,16,.55)}.city-view-tab{min-height:35px;border:0;border-radius:8px;background:transparent;color:#90a7b2;font:inherit;font-size:.7rem;font-weight:700;position:relative}.city-view-tab.active{background:rgba(71,142,174,.18);color:#e2f3fa}.city-view-tab b{position:absolute;right:5px;top:4px;min-width:15px;height:15px;display:grid;place-items:center;border-radius:999px;background:#7c3e42;color:#fff;font-size:.48rem}.city-filter-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,.35fr);gap:6px}.city-filter-line select{min-height:39px}.city-overview-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.city-overview-stats>span{display:grid;gap:2px;padding:8px;border:1px solid rgba(119,180,203,.11);border-radius:9px;background:rgba(4,15,22,.72)}.city-overview-stats small{font-size:.53rem;color:var(--muted)}.city-overview-stats b{font-size:.74rem}.city-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 1px 2px}.city-section-head>div{display:grid;gap:1px}.city-section-head small{color:var(--muted);font-size:.54rem}.city-compact-list{display:grid;gap:5px}.city-property-row{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(90px,.35fr) 14px;align-items:center;gap:8px;width:100%;padding:7px;border:1px solid rgba(117,174,199,.12);border-radius:10px;background:rgba(5,17,25,.83);color:inherit;text-align:left}.city-property-row:hover,.city-property-row:active{border-color:rgba(111,205,239,.28);background:rgba(8,26,37,.93)}.city-property-row.owned{border-color:rgba(94,193,229,.3)}.city-property-row.abandoned{opacity:.68}.city-row-art{width:48px;height:48px;border-radius:8px}.city-row-main{min-width:0;display:grid;gap:2px}.city-row-main>small{font-size:.5rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.city-row-main>b{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.city-row-rates{display:flex;gap:7px;min-width:0;font-size:.54rem;color:#9db4be}.city-row-rates span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.city-row-tail{display:grid;gap:2px;text-align:right;min-width:0}.city-row-tail>b{font-size:.62rem}.city-row-tail>small{font-size:.5rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.city-row-chevron{color:#6f8995}.city-deals-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.city-deals-grid>section{display:grid;align-content:start;gap:5px;padding:7px;border:1px solid rgba(112,166,190,.1);border-radius:10px;background:rgba(4,14,21,.55)}.city-deal-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px;align-items:center;padding:6px;border:1px solid rgba(112,167,191,.1);border-radius:8px;background:rgba(5,17,25,.72);color:inherit;text-align:left}.city-deal-row.outgoing{grid-template-columns:minmax(0,1fr) auto;width:100%}.city-deal-row span:first-child{display:grid;gap:2px;min-width:0}.city-deal-row b{font-size:.62rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.city-deal-row small{font-size:.52rem;color:var(--muted)}.city-rules{padding:5px 2px 4px!important}
.city-property-modal-card{width:min(620px,100%);max-height:min(88dvh,760px);overflow:auto}.city-modal-head{display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;align-items:center}.city-modal-head h2{margin:3px 0 3px}.city-modal-art{width:74px;height:74px}.city-modal-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:10px 0}.city-modal-stats>span{display:grid;gap:2px;padding:7px;border:1px solid rgba(119,179,203,.12);border-radius:8px;background:rgba(3,13,20,.68)}.city-modal-stats small{font-size:.5rem;color:var(--muted)}.city-modal-stats b{font-size:.68rem}.city-modal-details{margin:8px 0;border-top:1px solid rgba(117,175,198,.1);border-bottom:1px solid rgba(117,175,198,.1);padding:6px 0}.city-modal-details summary{cursor:pointer;font-size:.64rem;font-weight:700}.city-modal-details p{font-size:.68rem;line-height:1.45;color:#c4d1d7}.city-modal-actions,.city-modal-offers{display:grid;gap:6px}.city-modal-sale{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px}.city-modal-note{padding:7px;border-radius:8px;background:rgba(4,14,21,.68);font-size:.63rem;color:var(--muted)}.city-modal-offer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px;align-items:center;padding:6px;border-radius:8px;background:rgba(3,12,18,.65)}.city-modal-offer>span{display:grid}.city-modal-offer small{font-size:.54rem;color:var(--muted)}

/* Character 15.1: deliberate image placeholder + compact loadout. */
.ff-character-v2{padding:11px}.ff-character-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.ff-character-top h2{margin:2px 0}.ff-character-top-stats{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.ff-character-top-stats>span{padding:5px 7px;border:1px solid rgba(112,173,198,.12);border-radius:8px;background:rgba(3,13,20,.55);font-size:.57rem}.ff-character-layout{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:9px;align-items:start}.ff-hero-column{display:grid;gap:7px}.ff-hero-art-placeholder{width:100%;aspect-ratio:4/5;max-height:330px}.ff-hero-art-placeholder.is-placeholder b{font-size:.86rem}.ff-hero-art-placeholder.is-placeholder small{font-size:.53rem}.ff-hero-hp{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;padding:7px;border-radius:9px;background:rgba(4,15,22,.72)}.ff-hero-hp>span{font-size:.54rem;color:var(--muted)}.ff-hero-hp>b{justify-self:end;font-size:.66rem}.ff-hero-hp .hp-track{grid-column:1/-1}.ff-role-preset{grid-template-columns:repeat(3,1fr);gap:4px}.ff-role-preset button{min-height:34px;padding:4px;font-size:.59rem}.ff-loadout-column{min-width:0}.ff-character-loadout-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;padding:0!important;background:none!important;border:0!important}.ff-character-loadout-grid .ff-loadout-slot{position:static!important;display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:7px!important;align-items:center!important;min-height:50px!important;padding:5px!important;border-radius:9px!important;text-align:left!important}.ff-loadout-slot>span:last-child{display:grid!important;min-width:0}.ff-loadout-slot>span:last-child b{font-size:.59rem!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ff-loadout-slot>span:last-child small{font-size:.48rem!important;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ff-slot-art{width:42px;height:42px}.ff-core-stats-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.ff-core-stat{display:grid;gap:2px;padding:7px;border:1px solid rgba(109,169,194,.11);border-radius:8px;background:rgba(4,14,21,.62)}.ff-core-stat span{font-size:.5rem;color:var(--muted)}.ff-core-stat b{font-size:.73rem}.ff-secondary-stats{margin-top:6px}.ff-secondary-stats summary{cursor:pointer;padding:7px 0;font-size:.61rem;font-weight:700;color:#9cb1bb}.ff-secondary-stats>div{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.ff-secondary-stats>div>span{display:grid;gap:2px;padding:6px;background:rgba(3,12,18,.54);border-radius:7px}.ff-secondary-stats small{font-size:.48rem;color:var(--muted)}.ff-secondary-stats b{font-size:.62rem}

/* Combat 15.2: arena first, settings/details second. */
.ff-combat-v2{padding:9px!important}.ff-combat-v2-head{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}.ff-duel-stage{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:6px;align-items:stretch}.ff-duelist{display:grid!important;grid-template-columns:minmax(92px,.8fr) minmax(0,1.2fr)!important;gap:8px!important;align-items:center!important;min-height:190px!important;padding:8px!important}.ff-duelist-art{height:100%;min-height:170px}.ff-duelist-art .ff-art-slot{width:100%;height:100%;min-height:170px}.ff-duelist-copy{display:grid;gap:4px;min-width:0}.ff-duelist-copy>small{font-size:.48rem;letter-spacing:.12em;color:var(--muted)}.ff-duelist-copy h3{margin:0;font-size:.9rem}.ff-duelist-copy .fighter-hp{font-size:.61rem}.ff-versus{display:grid;place-items:center;font-size:.62rem;letter-spacing:.13em;color:#849ba6}.ff-combat-quickstats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:6px}.ff-combat-quickstats>span{display:grid;gap:1px;padding:6px;border-radius:7px;background:rgba(3,12,18,.68);border:1px solid rgba(112,171,196,.1)}.ff-combat-quickstats small{font-size:.47rem;color:var(--muted)}.ff-combat-quickstats b{font-size:.65rem}.ff-combat-details{position:relative;z-index:2;margin-top:6px;border-top:1px solid rgba(116,175,198,.1)}.ff-combat-details summary{cursor:pointer;padding:8px 1px 5px;font-size:.6rem;font-weight:700;color:#a3b9c3}.ff-combat-details .loot-wrap{margin-top:5px}.ff-combat-automation .combat-settings{margin-top:4px}

/* Inventory & Crafting 15.3: one layer of filters, shorter rows. */
.ff-recipe-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(110px,.32fr) minmax(110px,.32fr)!important;gap:5px!important;margin:6px 0 7px!important}.ff-recipe-toolbar>*{min-height:38px!important}.ff-action-compact{padding:7px!important;display:block!important}.ff-action-mainline{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:7px;align-items:center}.ff-recipe-art{width:44px;height:44px}.ff-action-compact .action-main{min-width:0}.ff-action-compact .action-main>b{font-size:.68rem}.ff-action-compact .action-meta{gap:4px;margin-top:2px}.ff-action-compact .action-meta span{font-size:.48rem}.ff-action-compact .action-btn{min-height:34px;padding:4px 8px;font-size:.57rem}.ff-action-details{margin:5px 0 0 51px}.ff-action-details summary{cursor:pointer;font-size:.52rem;color:#8ea6b1}.ff-action-details[open] summary{margin-bottom:5px}.ff-action-compact .recipe-lines{gap:5px}.ff-action-yield{margin:4px 0 0 51px;font-size:.55rem}.ff-inventory-v3{padding:9px!important}.ff-inventory-quick-filters{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 0 7px}.ff-inventory-quick-filters::-webkit-scrollbar{display:none}.ff-inventory-filter-chip{display:flex!important;align-items:center!important;gap:5px!important;width:auto!important;min-width:max-content!important;min-height:32px!important;padding:4px 8px!important;border-radius:999px!important;font-size:.56rem!important}.ff-inventory-filter-chip small{font-size:.47rem!important;color:var(--muted)}.ff-inventory-filter-chip.active{border-color:rgba(105,205,241,.42)!important;background:rgba(64,154,191,.15)!important;color:#e2f4fb!important}.ff-inventory-unified-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}.ff-item-card-compact{display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;gap:6px!important;align-items:center!important;min-height:62px!important;padding:5px!important;text-align:left!important}.ff-item-art{width:52px;height:52px}.ff-item-card-copy{display:grid;gap:2px;min-width:0}.ff-item-card-copy>b{font-size:.57rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ff-item-card-copy>small{font-size:.47rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ff-item-card-copy .equipped-badge{justify-self:start;font-size:.42rem}.ff-management-details{margin-top:7px!important}

@media(max-width:760px){.city-overview-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.city-deals-grid{grid-template-columns:1fr}.city-property-row{grid-template-columns:44px minmax(0,1fr) 14px}.city-row-art{width:44px;height:44px}.city-row-tail{grid-column:2;grid-row:2;display:flex;justify-content:space-between;text-align:left}.city-row-chevron{grid-column:3;grid-row:1/3}.city-modal-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ff-character-layout{grid-template-columns:124px minmax(0,1fr)}.ff-hero-art-placeholder{max-height:220px}.ff-character-loadout-grid{grid-template-columns:1fr!important}.ff-character-loadout-grid .ff-loadout-slot{grid-template-columns:36px minmax(0,1fr)!important;min-height:43px!important}.ff-slot-art{width:36px;height:36px}.ff-core-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ff-secondary-stats>div{grid-template-columns:repeat(3,minmax(0,1fr))}.ff-duelist{grid-template-columns:1fr!important;align-content:start!important;min-height:230px!important}.ff-duelist-art{min-height:120px;height:120px}.ff-duelist-art .ff-art-slot{min-height:120px}.ff-recipe-toolbar{grid-template-columns:minmax(0,1fr) 96px 96px!important}.ff-inventory-unified-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:480px){.city-compact-head{padding:9px}.city-view-tab{font-size:.62rem}.city-filter-line{grid-template-columns:minmax(0,1fr) 104px}.city-property-row{padding:6px}.city-modal-head{grid-template-columns:60px minmax(0,1fr)}.city-modal-art{width:60px;height:60px}.city-modal-sale{grid-template-columns:1fr}.city-modal-sale button{width:100%}.ff-character-top{align-items:flex-start}.ff-character-top-stats{display:grid;grid-template-columns:repeat(3,auto)}.ff-character-layout{grid-template-columns:1fr}.ff-hero-column{grid-template-columns:105px minmax(0,1fr);align-items:start}.ff-hero-art-placeholder{grid-row:1/3;max-height:none;aspect-ratio:3/4}.ff-hero-hp{align-self:start}.ff-role-preset{align-self:end}.ff-character-loadout-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.ff-character-loadout-grid .ff-loadout-slot{grid-template-columns:30px minmax(0,1fr)!important;min-height:39px!important;padding:4px!important}.ff-slot-art{width:30px;height:30px}.ff-loadout-slot>span:last-child b{font-size:.51rem!important}.ff-loadout-slot>span:last-child small{font-size:.42rem!important}.ff-duel-stage{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:3px}.ff-duelist{min-height:205px!important;padding:5px!important}.ff-duelist-art,.ff-duelist-art .ff-art-slot{height:105px;min-height:105px}.ff-duelist-copy h3{font-size:.68rem}.ff-duelist-copy .fighter-hp{font-size:.52rem}.ff-combat-quickstats{grid-template-columns:repeat(2,minmax(0,1fr))}.ff-recipe-toolbar{grid-template-columns:1fr 1fr!important}.ff-recipe-toolbar input{grid-column:1/-1}.ff-action-mainline{grid-template-columns:38px minmax(0,1fr) auto}.ff-recipe-art{width:38px;height:38px}.ff-action-details,.ff-action-yield{margin-left:45px}.ff-inventory-unified-grid{grid-template-columns:1fr!important}.ff-item-card-compact{grid-template-columns:46px minmax(0,1fr)!important;min-height:54px!important}.ff-item-art{width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.city-property-row,.ff-item-card-compact,.ff-loadout-slot{transition:none!important}}
/* === stage153-ux-final END === */


/* === stage1531-visual-stability START ===
   Screenshot-driven stabilization. Keep these rules last in cascade. */

/* Neutral placeholders only. Final art comes from the admin image generator. */
.ff-art-slot.is-placeholder{
    background:#091923!important;
    border:1px dashed rgba(133,184,205,.22)!important;
    box-shadow:none!important;
    filter:none!important;
}
.ff-art-slot.is-placeholder::after{content:none!important;display:none!important;}
.ff-art-slot.is-placeholder b{
    font-size:.58rem!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    color:#6f8996!important;
    opacity:.82!important;
}

/* Inventory: kill the legacy rarity frame that escaped the compact card box. */
.ff-inventory-v3{overflow:hidden!important;}
.ff-inventory-unified-grid{
    align-items:start!important;
    align-content:start!important;
    grid-auto-rows:min-content!important;
    grid-auto-flow:row!important;
}
.ff-item-card-compact{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    width:100%!important;
    height:auto!important;
    min-height:56px!important;
    max-height:none!important;
    margin:0!important;
    padding:6px 8px!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:9px!important;
    align-self:start!important;
    border:1px solid rgba(79,119,138,.30)!important;
    border-left:2px solid color-mix(in srgb,var(--rarity,#6b8998) 60%,#35505e)!important;
    border-radius:10px!important;
    background:#0a1b26!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
}
.ff-item-card-compact:hover,.ff-item-card-compact:active{
    transform:none!important;
    box-shadow:none!important;
    background:#0c202c!important;
}
.ff-item-card-compact::before,
.ff-item-card-compact::after{
    content:none!important;
    display:none!important;
    opacity:0!important;
    filter:none!important;
    box-shadow:none!important;
}
.ff-item-card-compact .ff-item-art{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    margin:0!important;
}
.ff-item-card-copy{gap:2px!important;align-content:center!important;}
.ff-item-card-copy>b{
    font-size:.68rem!important;
    line-height:1.18!important;
    white-space:normal!important;
    overflow:hidden!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
}
.ff-item-card-copy>small{font-size:.54rem!important;line-height:1.15!important;}
.ff-item-card-copy .equipped-badge{font-size:.46rem!important;margin-top:1px!important;}
.ff-inventory-quick-filters{
    display:flex!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
    gap:5px!important;
    padding:0 0 8px!important;
}
.ff-inventory-filter-chip{
    flex:0 0 auto!important;
    min-width:0!important;
    min-height:30px!important;
    padding:4px 8px!important;
    border-radius:8px!important;
    font-size:.59rem!important;
}
.ff-inventory-filter-chip small{font-size:.46rem!important;}

/* Character: remove the oversized presentation layer and keep content compact. */
.ff-character-v2{
    overflow:hidden!important;
    padding:10px!important;
    background:linear-gradient(180deg,rgba(12,31,42,.96),rgba(6,19,28,.98))!important;
}
.ff-character-v2::before,.ff-character-v2::after{content:none!important;display:none!important;}
.ff-character-top{margin-bottom:9px!important;}
.ff-character-top-stats>span{font-size:.61rem!important;padding:5px 7px!important;}
.ff-character-layout{gap:10px!important;}
.ff-hero-column{gap:7px!important;}
.ff-hero-art-placeholder{
    width:100%!important;
    max-width:120px!important;
    height:136px!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    justify-self:center!important;
}
.ff-hero-hp{padding:7px 8px!important;}
.ff-role-preset{gap:5px!important;}
.ff-role-preset button{min-height:34px!important;font-size:.61rem!important;}
.ff-character-loadout-grid{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
}
.ff-character-loadout-grid::before,.ff-character-loadout-grid::after{content:none!important;display:none!important;}
.ff-character-loadout-grid .ff-loadout-slot{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    min-height:52px!important;
    height:auto!important;
    padding:6px!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:7px!important;
    border:1px solid rgba(76,119,139,.30)!important;
    border-left:2px solid color-mix(in srgb,var(--rarity,#6b8998) 55%,#35505e)!important;
    border-radius:9px!important;
    background:#0a1b26!important;
    box-shadow:none!important;
    filter:none!important;
}
.ff-character-loadout-grid .ff-loadout-slot::before,
.ff-character-loadout-grid .ff-loadout-slot::after{
    content:none!important;display:none!important;opacity:0!important;filter:none!important;box-shadow:none!important;
}
.ff-character-loadout-grid .ff-slot-art{
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
}
.ff-loadout-slot>span:last-child b{
    font-size:.61rem!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow:hidden!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
}
.ff-loadout-slot>span:last-child small{font-size:.49rem!important;line-height:1.1!important;}
.ff-core-stats-grid{gap:6px!important;}
.ff-core-stat{padding:7px!important;}

@media(max-width:760px){
    .ff-inventory-unified-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
    .ff-character-layout{grid-template-columns:104px minmax(0,1fr)!important;align-items:start!important;}
    .ff-hero-art-placeholder{width:88px!important;height:108px!important;}
    .ff-character-loadout-grid{grid-template-columns:1fr!important;gap:5px!important;}
}
@media(max-width:480px){
    .ff-inventory-v3{padding:8px!important;}
    .ff-inventory-toolbar{grid-template-columns:minmax(0,1fr) 116px!important;gap:6px!important;}
    .ff-inventory-toolbar input,.ff-inventory-toolbar select{min-height:40px!important;}
    .ff-inventory-unified-grid{grid-template-columns:1fr!important;gap:5px!important;}
    .ff-item-card-compact{min-height:54px!important;grid-template-columns:40px minmax(0,1fr)!important;padding:6px 7px!important;}
    .ff-item-card-compact .ff-item-art{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;}

    .ff-character-top{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important;}
    .ff-character-top-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;}
    .ff-character-top-stats>span{text-align:center!important;}
    .ff-character-layout{display:block!important;}
    .ff-hero-column{
        display:grid!important;
        grid-template-columns:76px minmax(0,1fr)!important;
        grid-template-rows:auto auto!important;
        gap:6px 8px!important;
        margin-bottom:10px!important;
    }
    .ff-hero-art-placeholder{
        grid-column:1!important;grid-row:1/3!important;
        width:76px!important;height:94px!important;max-width:none!important;margin:0!important;
    }
    .ff-hero-hp{grid-column:2!important;grid-row:1!important;align-self:start!important;}
    .ff-role-preset{grid-column:2!important;grid-row:2!important;align-self:end!important;}
    .ff-role-preset button{min-height:32px!important;padding:3px!important;font-size:.55rem!important;}
    .ff-character-loadout-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;}
    .ff-character-loadout-grid .ff-loadout-slot{
        min-height:50px!important;
        grid-template-columns:32px minmax(0,1fr)!important;
        padding:5px!important;
        gap:6px!important;
    }
    .ff-character-loadout-grid .ff-slot-art{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;}
    .ff-loadout-slot>span:last-child b{font-size:.55rem!important;-webkit-line-clamp:2!important;}
    .ff-loadout-slot>span:last-child small{font-size:.43rem!important;}
    .ff-core-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
/* === stage1531-visual-stability END === */


/* === stage1532-branding START === */
.ff-loader-emblem img,
.topbar-brand-mark img,
.ff-auth-mark,
.ff-admin-brand > img {
    object-fit: contain;
    object-position: center;
}
.ff-loader-emblem img {
    width: 126px;
    height: 126px;
    filter: drop-shadow(0 0 24px rgba(85,198,244,.24)) drop-shadow(0 12px 24px rgba(0,0,0,.55));
}
.topbar-brand-mark img {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 0 10px rgba(88,203,248,.20));
}
.ff-auth-mark {
    width: 92px;
    height: 92px;
    margin: 0 auto 12px;
    filter: drop-shadow(0 0 20px rgba(88,203,248,.18));
}
.ff-admin-brand > img { width: 46px; height: 46px; }
.ff-landing-lockup {
    width: min(680px, 96%);
    height: auto;
    display: block;
    margin: -14px auto 2px;
    object-fit: contain;
    filter: drop-shadow(0 24px 42px rgba(0,0,0,.48));
}
.frostforge-hero .ff-landing-lockup + h1 { margin-top: 0; }
@media (max-width: 760px) {
    .ff-loader-emblem img { width: 112px; height: 112px; }
    .topbar-brand-mark img { width: 40px; height: 40px; }
    .ff-auth-mark { width: 80px; height: 80px; }
    .ff-landing-lockup { width: min(560px, 100%); margin-top: -6px; }
}
/* === stage1532-branding END === */

/* stage1533-ux-state-bots-prayer START */
/* ==========================================================================
   Frostforge 15.3.3 — UX state, notifications, responsive device layouts
   ========================================================================== */
:root { --ff-topbar-h: 64px; }

.ff-topbar { overflow: visible; }
.ff-topbar > .toast-stack {
    position: absolute !important;
    z-index: 190 !important;
    top: calc(100% + 6px) !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    width: min(420px, calc(100vw - 20px)) !important;
    display: grid !important;
    gap: 5px !important;
    pointer-events: none;
}
.ff-topbar > .toast-stack .toast {
    margin: 0 !important;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: .78rem;
    line-height: 1.25;
    box-shadow: 0 8px 24px rgba(0,0,0,.32);
    backdrop-filter: blur(14px);
}
.ff-topbar > .toast-stack .toast:nth-last-child(n+3) { display:none !important; }

#offline-modal {
    z-index: 260 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
}
#offline-modal .offline-modal-card {
    width: min(560px, 100%) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) auto !important;
    overflow: hidden !important;
    margin: 0 !important;
}
.offline-modal-head { padding-bottom: 8px; }
.offline-modal-head h2 { margin: 3px 0 0; }
.offline-modal-content {
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-right: 3px;
}
.offline-modal-footer {
    position: relative;
    z-index: 2;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(7,16,24,0), rgba(7,16,24,.98) 30%);
}
.offline-modal-footer .primary-btn { min-height: 46px; }

.ff-sell-weaker-panel {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
}
.ff-sell-weaker-panel > div { min-width:0; display:grid; gap:3px; }
.ff-sell-weaker-panel small { color:var(--muted, #8ea5b5); line-height:1.35; }
.ff-sell-weaker-panel button { flex:0 0 auto; }

.blessing-panel { display:grid; gap:12px; }
.blessing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.blessing-card { min-width:0; text-align:left; }
.blessing-active-summary { display:grid; gap:4px; padding:10px 12px; border:1px solid rgba(115,205,245,.22); border-radius:10px; background:rgba(67,151,191,.07); }
.blessing-active-summary span { color:var(--muted, #8ea5b5); font-size:.8rem; }
.ff-switch-note { border-color:rgba(117,205,245,.24); }

/* PHONE: one-column, touch-first, bottom sheets. */
@media (max-width: 640px) {
    :root { --ff-topbar-h: 58px; }
    .content { width:100%; padding-left:8px !important; padding-right:8px !important; }
    .ff-topbar > .toast-stack { right:6px !important; width:calc(100vw - 12px) !important; top:calc(100% + 4px) !important; }
    .ff-topbar > .toast-stack .toast { font-size:.74rem; padding:6px 8px; }
    .blessing-grid { grid-template-columns:1fr; }
    .ff-sell-weaker-panel { align-items:stretch; flex-direction:column; }
    .ff-sell-weaker-panel button { width:100%; }
    .ff-inventory-toolbar { grid-template-columns:minmax(0,1fr) 106px !important; }
    .ff-inventory-quick-filters { overflow-x:auto; flex-wrap:nowrap !important; scrollbar-width:none; padding-bottom:2px; }
    .ff-inventory-quick-filters::-webkit-scrollbar { display:none; }
    .ff-inventory-filter-chip { flex:0 0 auto; }
    .ff-inventory-unified-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:7px !important; }
    .ff-character-stage, .ff-duel-stage, .city-property-grid, .guild-directory { grid-template-columns:1fr !important; }
    .modal-backdrop:not(#offline-modal) { align-items:flex-end !important; }
    .modal-backdrop:not(#offline-modal) .modal-card { width:100%; max-width:none; max-height:min(88dvh,760px); border-radius:16px 16px 0 0; overflow-y:auto; }
    #offline-modal .offline-modal-card { max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
}

/* TABLET: denser two-column surfaces, nav still touch-friendly. */
@media (min-width: 641px) and (max-width: 1099px) {
    .app-shell { width:min(100%, 980px); margin-inline:auto; }
    .content { padding-inline:14px !important; }
    .ff-inventory-unified-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    .city-property-grid, .guild-directory { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .ff-duel-stage { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important; }
    .stat-grid.character-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .modal-card { max-width:min(680px,92vw); }
    .bottom-nav.ff-bottom-nav { width:min(720px, calc(100% - 24px)); left:50%; transform:translateX(-50%); }
}

/* DESKTOP: wide layout; no mobile stretching and no forced bottom sheets. */
@media (min-width: 1100px) {
    body.ff-game-body { padding:18px 0 24px; }
    .app-shell.ff-app-shell { width:min(1420px, calc(100vw - 36px)); margin-inline:auto; border:1px solid rgba(97,165,196,.14); border-radius:18px; overflow:visible; }
    .ff-topbar { border-radius:18px 18px 0 0; padding-inline:20px; }
    .content { width:100%; max-width:none !important; padding:18px 20px 96px !important; }
    .ff-inventory-unified-grid { grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:10px !important; }
    .ff-inventory-toolbar { grid-template-columns:minmax(280px,1fr) 180px !important; max-width:720px; }
    .city-property-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    .guild-directory { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .ff-duel-stage { grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr) !important; max-width:1040px; margin-inline:auto; }
    .fighter-card.ff-duelist { min-height:320px; }
    .stat-grid.character-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .blessing-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .modal-backdrop { align-items:center !important; padding:24px !important; }
    .modal-card { width:min(720px,90vw); max-height:86vh; border-radius:16px; overflow-y:auto; }
    .bottom-nav.ff-bottom-nav { position:fixed !important; width:min(760px, calc(100vw - 60px)); left:50% !important; right:auto !important; transform:translateX(-50%) !important; bottom:16px !important; border-radius:16px !important; }
    .ff-topbar > .toast-stack { width:440px !important; }
}
/* stage1533-ux-state-bots-prayer END */

/* === stage1533-ui-paperdoll-hotfix START === */
/* Inventory chips: the strip itself owns the horizontal gesture on phones. */
.ff-inventory-v3 .ff-inventory-quick-filters{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:scroll!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    touch-action:pan-x!important;
    padding:0 0 8px!important;
}
.ff-inventory-v3 .ff-inventory-quick-filters::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;}
.ff-inventory-v3 .ff-inventory-quick-filters>.ff-inventory-filter-chip{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    scroll-snap-align:start;
    touch-action:pan-x!important;
}

/* Character equipment paper doll. No generated hero portrait is used here. */
.ff-character-paperdoll-layout{display:block!important;}
.ff-character-paperdoll .ff-character-status-row{
    display:grid!important;
    grid-template-columns:minmax(180px,1fr) minmax(260px,.9fr)!important;
    gap:8px!important;
    align-items:stretch!important;
    margin-bottom:10px!important;
}
.ff-character-paperdoll .ff-character-status-row .ff-hero-hp{margin:0!important;align-self:stretch!important;}
.ff-character-paperdoll .ff-character-status-row .ff-role-preset{margin:0!important;align-self:stretch!important;}
.ff-paperdoll-loadout{min-width:0!important;}
.ff-paperdoll-stage{
    position:relative!important;
    isolation:isolate!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(120px,22vw,190px) minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    min-height:390px!important;
    padding:13px 10px!important;
    overflow:hidden!important;
    border:1px solid rgba(82,151,181,.20)!important;
    border-radius:15px!important;
    background:
        radial-gradient(circle at 50% 43%,rgba(75,174,214,.10),transparent 35%),
        linear-gradient(180deg,rgba(5,20,29,.86),rgba(3,12,18,.96))!important;
    box-shadow:inset 0 1px rgba(154,224,248,.025)!important;
}
.ff-paperdoll-stage::before{
    content:"";
    position:absolute;
    inset:11% 25%;
    z-index:0;
    border:1px solid rgba(101,193,229,.07);
    border-radius:48% 48% 42% 42%;
    background:radial-gradient(circle,rgba(97,196,235,.035),transparent 68%);
    pointer-events:none;
}
.ff-paperdoll-side{
    position:relative!important;
    z-index:3!important;
    display:grid!important;
    grid-template-rows:repeat(5,minmax(58px,1fr))!important;
    gap:7px!important;
    min-width:0!important;
}
.ff-paperdoll-stage .ff-loadout-slot{
    position:relative!important;
    z-index:3!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:6px!important;
    align-items:center!important;
    min-width:0!important;
    min-height:58px!important;
    height:auto!important;
    padding:6px!important;
    overflow:hidden!important;
    border:1px solid rgba(77,126,148,.34)!important;
    border-left:2px solid color-mix(in srgb,var(--rarity,#6b8998) 58%,#35505e)!important;
    border-radius:10px!important;
    background:linear-gradient(180deg,rgba(11,31,43,.94),rgba(6,21,30,.96))!important;
    box-shadow:0 7px 18px rgba(0,0,0,.13)!important;
}
.ff-paperdoll-stage .ff-loadout-slot.empty{opacity:.76!important;}
.ff-paperdoll-stage .ff-slot-art{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;}
.ff-paperdoll-stage .ff-loadout-slot>span:last-child{display:grid!important;min-width:0!important;gap:2px!important;}
.ff-paperdoll-stage .ff-loadout-slot>span:last-child b{
    font-size:.59rem!important;
    line-height:1.1!important;
    white-space:normal!important;
    overflow:hidden!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
}
.ff-paperdoll-stage .ff-loadout-slot>span:last-child small{
    font-size:.45rem!important;
    line-height:1.08!important;
    color:var(--muted)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.ff-paperdoll-center{
    position:relative!important;
    z-index:1!important;
    min-width:0!important;
    min-height:350px!important;
    display:grid!important;
    place-items:center!important;
    pointer-events:none!important;
}
.ff-paperdoll-rune{
    position:absolute;
    width:min(170px,96%);
    aspect-ratio:1;
    border:1px solid rgba(106,207,244,.09);
    border-radius:50%;
    box-shadow:inset 0 0 34px rgba(62,167,206,.045),0 0 28px rgba(42,143,184,.035);
}
.ff-paperdoll-rune::before,.ff-paperdoll-rune::after{
    content:"";
    position:absolute;
    inset:13%;
    border:1px solid rgba(106,207,244,.045);
    border-radius:50%;
}
.ff-paperdoll-rune::after{inset:31%;}
.ff-paperdoll-silhouette{
    position:relative;
    width:min(132px,88%);
    height:315px;
    opacity:.78;
    filter:drop-shadow(0 13px 16px rgba(0,0,0,.52));
}
.ff-paperdoll-silhouette i{position:absolute;display:block;background:linear-gradient(180deg,#243744 0%,#152630 42%,#0a141b 100%);border:1px solid rgba(126,206,235,.09);box-shadow:inset 0 0 18px rgba(125,210,240,.025);}
.ff-paperdoll-head{width:35px;height:39px;left:50%;top:5px;transform:translateX(-50%);border-radius:48% 48% 44% 44%!important;}
.ff-paperdoll-torso{width:80px;height:132px;left:50%;top:47px;transform:translateX(-50%);clip-path:polygon(22% 0,78% 0,94% 23%,79% 100%,21% 100%,6% 23%);border-radius:17px 17px 22px 22px!important;}
.ff-paperdoll-arm{width:27px;height:139px;top:57px;border-radius:16px 16px 20px 20px!important;transform-origin:50% 10%;}
.ff-paperdoll-arm-left{left:13px;transform:rotate(8deg);}
.ff-paperdoll-arm-right{right:13px;transform:rotate(-8deg);}
.ff-paperdoll-leg{width:31px;height:139px;top:167px;border-radius:9px 9px 17px 17px!important;transform-origin:50% 0;}
.ff-paperdoll-leg-left{left:34px;transform:rotate(2.5deg);}
.ff-paperdoll-leg-right{right:34px;transform:rotate(-2.5deg);}

@media(max-width:760px){
    .ff-character-paperdoll .ff-character-status-row{grid-template-columns:1fr!important;gap:6px!important;}
    .ff-paperdoll-stage{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)!important;gap:6px!important;min-height:380px!important;padding:9px 6px!important;}
    .ff-paperdoll-side{gap:6px!important;grid-template-rows:repeat(5,minmax(56px,1fr))!important;}
    .ff-paperdoll-center{min-height:350px!important;}
    .ff-paperdoll-silhouette{width:82px;height:300px;}
    .ff-paperdoll-head{width:30px;height:34px;}
    .ff-paperdoll-torso{width:61px;height:124px;top:43px;}
    .ff-paperdoll-arm{width:21px;height:132px;top:52px;}
    .ff-paperdoll-arm-left{left:5px;}.ff-paperdoll-arm-right{right:5px;}
    .ff-paperdoll-leg{width:24px;height:130px;top:157px;}
    .ff-paperdoll-leg-left{left:18px;}.ff-paperdoll-leg-right{right:18px;}
}
@media(max-width:480px){
    .ff-character-paperdoll{padding:9px!important;}
    .ff-paperdoll-stage{grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr)!important;gap:5px!important;min-height:350px!important;padding:7px 5px!important;}
    .ff-paperdoll-side{grid-template-rows:repeat(5,minmax(50px,1fr))!important;gap:5px!important;}
    .ff-paperdoll-stage .ff-loadout-slot{grid-template-columns:30px minmax(0,1fr)!important;min-height:50px!important;padding:4px!important;gap:4px!important;border-radius:8px!important;}
    .ff-paperdoll-stage .ff-slot-art{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;}
    .ff-paperdoll-stage .ff-loadout-slot>span:last-child b{font-size:.51rem!important;line-height:1.07!important;}
    .ff-paperdoll-stage .ff-loadout-slot>span:last-child small{font-size:.39rem!important;}
    .ff-paperdoll-center{min-height:320px!important;}
    .ff-paperdoll-silhouette{width:68px;height:275px;opacity:.72;}
    .ff-paperdoll-head{width:26px;height:30px;top:4px;}
    .ff-paperdoll-torso{width:52px;height:112px;top:38px;}
    .ff-paperdoll-arm{width:18px;height:120px;top:46px;}
    .ff-paperdoll-arm-left{left:1px;}.ff-paperdoll-arm-right{right:1px;}
    .ff-paperdoll-leg{width:21px;height:116px;top:142px;}
    .ff-paperdoll-leg-left{left:13px;}.ff-paperdoll-leg-right{right:13px;}
}
/* === stage1533-ui-paperdoll-hotfix END === */

/* === stage1533-character-combat-visual-fix START === */
/* Character: real art stays inside its own centre lane; equipment never sits on top of it. */
.ff-slot-mobile-label{display:none;}
.ff-paperdoll-stage{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(150px,1fr) minmax(220px,.88fr) minmax(150px,1fr)!important;
    gap:10px!important;
    min-height:420px!important;
    align-items:stretch!important;
    overflow:hidden!important;
    padding:12px 10px!important;
}
.ff-paperdoll-side{
    position:relative!important;
    z-index:2!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:repeat(5,minmax(66px,1fr))!important;
    gap:7px!important;
    min-width:0!important;
    align-self:stretch!important;
}
.ff-paperdoll-side .ff-loadout-slot{
    grid-area:auto!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:66px!important;
    height:auto!important;
    margin:0!important;
    align-self:stretch!important;
}
.ff-paperdoll-center{
    position:relative!important;
    z-index:1!important;
    min-width:0!important;
    min-height:396px!important;
    overflow:hidden!important;
    display:grid!important;
    place-items:end center!important;
    align-self:stretch!important;
    pointer-events:none!important;
}
.ff-paperdoll-rune{
    position:absolute!important;
    left:50%!important;
    bottom:4px!important;
    transform:translateX(-50%) scaleY(.34)!important;
    width:min(230px,96%)!important;
    aspect-ratio:1!important;
    opacity:.78!important;
    border-color:rgba(102,211,248,.14)!important;
    box-shadow:0 0 28px rgba(55,174,221,.12),inset 0 0 32px rgba(68,181,225,.08)!important;
}
.ff-paperdoll-silhouette.ff-paperdoll-generated{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    opacity:1!important;
    filter:none!important;
}
.ff-paperdoll-generated>i{display:none!important;}
.ff-paperdoll-hero-art{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:220px!important;
    max-height:404px!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    opacity:1!important;
    filter:brightness(1.13) contrast(1.08) saturate(1.08) drop-shadow(0 12px 15px rgba(0,0,0,.62)) drop-shadow(0 0 9px rgba(63,176,222,.15))!important;
    user-select:none!important;
    -webkit-user-drag:none!important;
}

/* Combat: use the same Frostforge shadow hero and keep both fighters fully inside their art frames. */
.ff-combat-shadow-hero.has-art{
    background:radial-gradient(circle at 50% 74%,rgba(64,174,220,.14),rgba(4,14,21,.78) 58%,rgba(3,11,17,.96))!important;
}
.ff-duelist-art .ff-art-slot.has-art img{
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
}
.ff-combat-shadow-hero.has-art img{
    object-position:center bottom!important;
    filter:brightness(1.16) contrast(1.08) saturate(1.08) drop-shadow(0 8px 9px rgba(0,0,0,.52))!important;
}

@media(max-width:760px){
    .ff-paperdoll-stage{
        grid-template-columns:96px minmax(150px,1fr) 96px!important;
        gap:7px!important;
        min-height:372px!important;
        padding:9px 7px!important;
    }
    .ff-paperdoll-side{grid-template-rows:repeat(5,minmax(58px,1fr))!important;gap:6px!important;}
    .ff-paperdoll-side .ff-loadout-slot{min-height:58px!important;}
    .ff-paperdoll-center{min-height:352px!important;}
    .ff-paperdoll-hero-art{max-width:176px!important;max-height:352px!important;}
}

@media(max-width:640px){
    .ff-paperdoll-stage{
        grid-template-columns:64px minmax(0,1fr) 64px!important;
        gap:5px!important;
        min-height:350px!important;
        padding:8px 5px!important;
    }
    .ff-paperdoll-side{
        grid-template-rows:repeat(5,60px)!important;
        gap:5px!important;
        align-content:center!important;
    }
    .ff-paperdoll-side .ff-loadout-slot{
        display:grid!important;
        grid-template-columns:1fr!important;
        grid-template-rows:42px 12px!important;
        place-items:center!important;
        gap:1px!important;
        min-height:60px!important;
        max-height:60px!important;
        padding:3px!important;
        border-radius:9px!important;
        overflow:hidden!important;
    }
    .ff-paperdoll-side .ff-slot-art{
        width:42px!important;height:42px!important;
        min-width:42px!important;min-height:42px!important;
        margin:0!important;
    }
    .ff-paperdoll-side .ff-slot-copy{display:none!important;}
    .ff-paperdoll-side .ff-slot-mobile-label{
        display:block!important;
        width:100%!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;
        text-align:center!important;
        color:#9bb2bd!important;
        font-size:.41rem!important;
        line-height:1!important;
        font-weight:800!important;
        letter-spacing:.01em!important;
    }
    .ff-paperdoll-center{min-height:332px!important;overflow:hidden!important;}
    .ff-paperdoll-hero-art{max-width:176px!important;max-height:330px!important;}

    .ff-duel-stage{grid-template-columns:1fr!important;gap:6px!important;}
    .ff-versus{min-height:20px!important;padding:0!important;}
    .fighter-card.ff-duelist{
        display:grid!important;
        grid-template-columns:118px minmax(0,1fr)!important;
        gap:9px!important;
        align-items:center!important;
        align-content:center!important;
        min-height:158px!important;
        padding:7px!important;
    }
    .ff-duelist-art{height:142px!important;min-height:142px!important;overflow:hidden!important;}
    .ff-duelist-art .ff-art-slot{width:100%!important;height:142px!important;min-height:142px!important;padding:4px!important;}
    .ff-duelist-copy{align-content:center!important;gap:5px!important;}
    .ff-duelist-copy h3{font-size:.78rem!important;white-space:normal!important;line-height:1.15!important;}
    .ff-duelist-copy .fighter-hp{font-size:.58rem!important;}
    .ff-combat-shadow-hero.has-art img{transform:scale(.98)!important;transform-origin:center bottom!important;}
    .monster-fighter .ff-duelist-art .ff-art-slot.has-art img{object-position:center center!important;}
}

@media(max-width:380px){
    .ff-paperdoll-stage{grid-template-columns:58px minmax(0,1fr) 58px!important;gap:4px!important;min-height:332px!important;padding:6px 4px!important;}
    .ff-paperdoll-side{grid-template-rows:repeat(5,56px)!important;gap:4px!important;}
    .ff-paperdoll-side .ff-loadout-slot{grid-template-rows:39px 11px!important;min-height:56px!important;max-height:56px!important;padding:3px 2px!important;}
    .ff-paperdoll-side .ff-slot-art{width:39px!important;height:39px!important;min-width:39px!important;min-height:39px!important;}
    .ff-paperdoll-side .ff-slot-mobile-label{font-size:.38rem!important;}
    .ff-paperdoll-center{min-height:316px!important;}
    .ff-paperdoll-hero-art{max-width:164px!important;max-height:314px!important;}
    .fighter-card.ff-duelist{grid-template-columns:106px minmax(0,1fr)!important;min-height:148px!important;gap:7px!important;}
    .ff-duelist-art,.ff-duelist-art .ff-art-slot{height:132px!important;min-height:132px!important;}
}
/* === stage1533-character-combat-visual-fix END === */

/* === stage1533-gray-silhouette-hotfix START === */
.ff-paperdoll-hero-art{opacity:.82!important;filter:none!important;max-width:156px!important;object-fit:contain!important;object-position:center bottom!important;}
.ff-paperdoll-rune{opacity:.22!important;box-shadow:none!important;}
.ff-combat-shadow-hero.has-art{background:rgba(3,12,18,.42)!important;}
.ff-combat-shadow-hero.has-art img{opacity:.82!important;filter:none!important;transform:none!important;object-fit:contain!important;object-position:center bottom!important;}
@media(max-width:640px){.ff-paperdoll-hero-art{max-width:146px!important;max-height:322px!important;}}
@media(max-width:380px){.ff-paperdoll-hero-art{max-width:136px!important;max-height:306px!important;}}
/* === stage1533-gray-silhouette-hotfix END === */


/* stage1533-notification-rail-tapfix1 START */
/* A dedicated sticky notification row. It participates in layout, so messages
   never cover the active action/combat progress beneath the top bar. */
:root { --ff-notice-h: 30px; }
.ff-notification-rail {
    position: sticky;
    top: var(--ff-topbar-h, 58px);
    z-index: 79;
    width: 100%;
    height: var(--ff-notice-h);
    min-height: var(--ff-notice-h);
    display: block;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(7,18,27,.96), rgba(5,14,21,.96));
    border-bottom: 1px solid rgba(110,193,224,.16);
    box-shadow: 0 6px 18px rgba(0,4,8,.16);
    backdrop-filter: blur(14px) saturate(1.08);
}
.ff-notification-rail > .toast-stack {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    display: block !important;
    pointer-events: none !important;
}
.ff-notification-rail .toast {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 9px !important;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0 !important;
    border-left: 3px solid rgba(112,188,219,.48) !important;
    border-radius: 0 !important;
    background: rgba(10,27,38,.78) !important;
    color: #d8eaf2 !important;
    box-shadow: none !important;
    font-size: .69rem !important;
    line-height: 1 !important;
    letter-spacing: .005em;
    animation: ffNoticeRailIn .14s ease-out both !important;
    box-sizing: border-box;
}
.ff-notification-rail .toast.good { border-left-color: rgba(76,175,137,.76) !important; }
.ff-notification-rail .toast.bad { border-left-color: rgba(225,102,105,.86) !important; }
.ff-notification-rail .toast-message {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ff-notification-rail .toast-more {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 5px;
    border: 1px solid rgba(135,202,228,.18);
    border-radius: 999px;
    background: rgba(118,192,221,.08);
    color: #93b6c5;
    text-align: center;
    font-size: .58rem;
    font-weight: 800;
}
.ff-notification-rail .toast-more:empty { display: none; }
.ff-notification-rail .toast.ff-notice-leaving { animation: ffNoticeRailOut .12s ease-in both !important; }
@keyframes ffNoticeRailIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes ffNoticeRailOut { from { opacity: 1; } to { opacity: 0; } }

/* Mobile tap acknowledgement is immediate, while actions still fire on click so
   scrolling cannot accidentally trigger a game action. */
button,
[data-action], [data-page], [data-skill-open], [data-skill-back],
[data-combat-location-open], [data-combat-location-back], [data-character-view],
[data-recipe-filter], [data-recipe-role], [data-inventory-filter],
[data-home-view], [data-city-view] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.ff-tap-active:not(:disabled) {
    opacity: .76 !important;
    filter: brightness(1.08);
}
@media (max-width: 640px) {
    :root { --ff-notice-h: 28px; }
    .ff-notification-rail .toast { padding-inline: 7px !important; font-size: .66rem !important; gap: 5px; }
    .ff-notification-rail .toast-more { font-size: .55rem; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .ff-notification-rail .toast,
    .ff-notification-rail .toast.ff-notice-leaving { animation: none !important; }
}
/* stage1533-notification-rail-tapfix1 END */


/* stage1533-emergency-ui-recovery-prayer1 START */
/* Narrow Prayer repair. Other screens intentionally keep their pre-overhaul renderers. */
.prayer-panel .prayer-card {
    width:100% !important;
    min-width:0 !important;
    min-height:72px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) auto !important;
    grid-template-areas:"icon copy state" !important;
    align-items:center !important;
    gap:8px !important;
    padding:9px !important;
    overflow:hidden !important;
    text-align:left !important;
}
.prayer-panel .prayer-card .prayer-icon {
    grid-area:icon !important;
    position:static !important;
    display:grid !important;
    place-items:center !important;
    width:34px !important;
    height:34px !important;
    margin:0 !important;
    border:1px solid rgba(119,199,229,.18) !important;
    border-radius:9px !important;
    background:rgba(73,162,196,.08) !important;
    color:#9bdcf1 !important;
    font-size:1rem !important;
    line-height:1 !important;
}
.prayer-panel .prayer-card .prayer-copy {
    grid-area:copy !important;
    position:static !important;
    min-width:0 !important;
    width:auto !important;
    display:grid !important;
    gap:3px !important;
    margin:0 !important;
    transform:none !important;
}
.prayer-panel .prayer-card .prayer-copy > b {
    min-width:0 !important;
    margin:0 !important;
    color:var(--text) !important;
    font-size:.74rem !important;
    line-height:1.18 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
}
.prayer-panel .prayer-card .prayer-copy > small {
    display:block !important;
    min-width:0 !important;
    margin:0 !important;
    color:var(--muted) !important;
    font-size:.57rem !important;
    line-height:1.3 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
}
.prayer-panel .prayer-card .prayer-state {
    grid-area:state !important;
    position:static !important;
    inset:auto !important;
    align-self:center !important;
    justify-self:end !important;
    max-width:86px !important;
    margin:0 !important;
    padding:4px 6px !important;
    border:1px solid rgba(216,160,76,.24) !important;
    border-radius:999px !important;
    background:rgba(216,160,76,.08) !important;
    color:#e2c176 !important;
    font-size:.52rem !important;
    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap !important;
    transform:none !important;
}
.prayer-panel .prayer-card.locked { opacity:.68 !important; }
.prayer-panel .prayer-card.active { border-color:rgba(216,160,76,.55) !important; }
.prayer-panel .prayer-card.active .prayer-state { background:rgba(216,160,76,.15) !important; color:#ffe0a1 !important; }

@media (max-width:420px) {
    .prayer-panel .prayer-card {
        grid-template-columns:32px minmax(0,1fr) !important;
        grid-template-areas:"icon copy" "state state" !important;
        min-height:82px !important;
        gap:7px !important;
        padding:8px !important;
    }
    .prayer-panel .prayer-card .prayer-icon { width:32px !important; height:32px !important; }
    .prayer-panel .prayer-card .prayer-state { justify-self:end !important; max-width:none !important; }
}
/* stage1533-emergency-ui-recovery-prayer1 END */

/* === stage1533-inventory-category-dropdown2 START === */
.ff-inventory-quick-filters{display:none!important;}
.ff-inventory-filter-dropdown{display:block!important;position:relative!important;margin:0 0 8px!important;overflow:visible!important;}
.ff-inventory-filter-toggle{width:100%!important;min-height:38px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:7px 10px!important;text-align:left!important;}
.ff-inventory-filter-current,.ff-inventory-filter-meta,.ff-inventory-filter-option>span{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;}
.ff-inventory-filter-current>span:last-child{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.ff-inventory-filter-meta{margin-left:auto!important;flex:0 0 auto!important;}
.ff-inventory-filter-meta small,.ff-inventory-filter-option small{color:var(--muted)!important;}
.ff-inventory-filter-icon{display:inline-flex!important;width:16px!important;justify-content:center!important;flex:0 0 16px!important;}
.ff-inventory-filter-chevron{display:inline-block!important;transform:rotate(0deg)!important;transition:transform .18s ease!important;}
.ff-inventory-filter-dropdown.open .ff-inventory-filter-chevron{transform:rotate(180deg)!important;}
.ff-inventory-filter-menu{display:grid!important;grid-template-rows:0fr!important;opacity:0!important;transform:translateY(-5px)!important;pointer-events:none!important;transition:grid-template-rows .18s ease,opacity .15s ease,transform .18s ease!important;}
.ff-inventory-filter-dropdown.open .ff-inventory-filter-menu{grid-template-rows:1fr!important;opacity:1!important;transform:translateY(0)!important;pointer-events:auto!important;}
.ff-inventory-filter-menu-inner{min-height:0!important;overflow:hidden!important;display:grid!important;grid-template-columns:1fr!important;gap:4px!important;padding-top:0!important;transition:padding-top .18s ease!important;}
.ff-inventory-filter-dropdown.open .ff-inventory-filter-menu-inner{padding-top:5px!important;}
.ff-inventory-filter-option{width:100%!important;min-height:34px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:6px 10px!important;text-align:left!important;}
.ff-inventory-filter-option.active{border-color:rgba(105,205,241,.42)!important;background:rgba(64,154,191,.15)!important;color:#e2f4fb!important;}
/* === stage1533-inventory-category-dropdown2 END === */

/* === stage1534-tavern-admin-mobile START === */
:root {
    --browser-chrome-bottom: 0px;
    --vv-height: 100dvh;
}
html, body.ff-game-body {
    min-height: 100dvh;
    min-height: var(--vv-height, 100dvh);
}
.ff-bottom-nav {
    bottom: var(--browser-chrome-bottom, 0px) !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
}
body.ff-game-body {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--browser-chrome-bottom, 0px) + 12px) !important;
}
.content {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--browser-chrome-bottom, 0px) + 18px) !important;
}
@media (max-width:640px) {
    .ff-bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; }
    .nav-btn { min-height: 48px; }
}

.ff-item-wrap, .ff-slot-wrap { display:grid; gap:4px; min-width:0; }
.ff-item-wrap .item-card, .ff-slot-wrap .equipment-slot { width:100%; }
.ff-unequip-chip {
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(217,104,93,.45);
    background: rgba(40,16,16,.72);
    color: #f3c7c2;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ff-unequip-chip:disabled { opacity:.45; }

.ff-tavern { display:grid; gap:10px; }
.ff-tavern-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.ff-tavern-head h2 { margin:2px 0 0; }
.ff-tavern-bet { display:grid; gap:4px; font-size:.62rem; color:var(--muted); font-weight:700; }
.ff-tavern-bet input { min-height:40px; width:110px; padding:6px 8px; border-radius:8px; border:1px solid rgba(119,179,203,.22); background:rgba(4,14,22,.8); color:#eef7fb; }
.ff-tavern-game { display:grid; gap:10px; }
.ff-tavern-actions { display:flex; flex-wrap:wrap; gap:6px; }
.ff-tavern-actions .primary-btn, .ff-tavern-actions .secondary-btn { flex:1 1 110px; }
.ff-card-row { display:flex; gap:6px; flex-wrap:wrap; min-height:64px; }
.ff-card {
    width:46px; height:64px; border-radius:8px; border:1px solid rgba(232,236,240,.35);
    background: linear-gradient(180deg,#f7f3ea,#e4d8c2); color:#1b140d;
    display:grid; place-content:center; font-weight:800; line-height:1.05;
}
.ff-card b { font-size:.92rem; } .ff-card i { font-style:normal; font-size:.78rem; }
.ff-card.red { color:#b42318; }
.ff-card-back { background:linear-gradient(160deg,#143047,#0b1c29); color:#9fd7ef; border-color:rgba(120,190,220,.35); }
.ff-bj-hands { display:grid; gap:10px; }
.ff-bj-status { font-weight:800; font-size:.78rem; }
.ff-bj-status.win, .ff-bj-status.push { color:#93efbd; }
.ff-bj-status.lose, .ff-bj-status.bust { color:#ff8e8e; }
.ff-slots-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.ff-slots-reel { display:grid; gap:6px; }
.ff-slot-cell {
    min-height:52px; display:grid; place-items:center; border-radius:10px;
    border:1px solid rgba(119,179,203,.2); background:rgba(5,16,24,.78); font-size:1.25rem;
}
.ff-slot-wild { color:#f1c36f; box-shadow:inset 0 0 12px rgba(241,195,111,.25); }
.ff-slot-scatter { color:#9fd7ef; }
.ff-slot-chest { color:#d89a4b; }
.ff-slot-crown { color:#f1c36f; }
.ff-chest-board { display:grid; gap:8px; }
.ff-chest-head { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.ff-chest-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.ff-chest {
    min-height:52px; border-radius:10px; border:1px solid rgba(216,154,75,.35);
    background:rgba(32,18,8,.8); color:#f1c36f; font-weight:800;
}
.ff-chest.open { background:rgba(12,22,28,.7); color:#c4d1d7; border-color:rgba(119,179,203,.2); }

.admin-lang-toggle { min-height:38px; border-radius:8px; }
.admin-equip-stat { display:grid; gap:6px; padding:8px 0; border-bottom:1px solid rgba(119,179,203,.12); }
.admin-equip-stat-row { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.admin-equip-stat-row b { min-width:92px; font-size:.68rem; }
.admin-delta-btn { min-height:32px; min-width:42px; padding:4px 6px; }
.admin-player-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (max-width:640px) {
    .home-tabs { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
    .home-tabs::-webkit-scrollbar { display:none; }
    .home-tab { flex:0 0 auto; }
    .ff-chest-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .admin-player-fields { grid-template-columns:1fr; }
}
/* === stage1534-tavern-admin-mobile END === */

/* === stage1535-tavern-split-house START === */
.ff-tavern-tabs { display:flex; gap:6px; }
.ff-tavern-tab {
    flex:1 1 0;
    min-height:42px;
    border-radius:10px;
    border:1px solid rgba(119,179,203,.22);
    background:rgba(6,16,24,.72);
    color:#c5d7e0;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.ff-tavern-tab.active {
    border-color:rgba(105,205,241,.5);
    background:rgba(64,154,191,.22);
    color:#e7f6fb;
}
.ff-casino-sym { width:28px; height:28px; display:grid; place-items:center; font-size:.55rem; font-weight:800; }
.ff-slot-cell { position:relative; overflow:hidden; }
.ff-slot-cell .ff-art-slot, .ff-slot-cell .ff-casino-sym { width:32px; height:32px; }
.ff-slots-reel.spinning .ff-slot-cell {
    animation: ff-slot-spin 0.09s steps(2, end) infinite;
}
@keyframes ff-slot-spin {
    from { transform: translateY(-10px); filter: blur(1.2px); opacity:.7; }
    to { transform: translateY(10px); filter: blur(1.2px); opacity:1; }
}
.ff-slots-paytable { margin-top:8px; }
.ff-slots-paytable summary { font-weight:800; font-size:.78rem; }
.ff-slots-paytable table { width:100%; border-collapse:collapse; font-size:.72rem; }
.ff-slots-paytable th, .ff-slots-paytable td { padding:6px 4px; border-bottom:1px solid rgba(119,179,203,.12); text-align:center; }
.ff-slots-paytable tbody th { text-align:left; display:flex; gap:8px; align-items:center; font-weight:700; }
.ff-slots-paytable .ff-slot-cell { min-height:36px; width:36px; }
.ff-slots-rules { margin:8px 0 0; padding-left:16px; color:var(--muted); font-size:.68rem; }
.ff-slots-rules li { margin:3px 0; }
@media (max-width:640px) {
    .ff-tavern-tab { min-height:44px; }
}
/* === stage1535-tavern-split-house END === */

/* === stage1536-titles-pets START === */
.player-title-badge {
    border-color: color-mix(in srgb, var(--title-color, #e8c47f) 55%, transparent);
    background: color-mix(in srgb, var(--title-color, #e8c47f) 16%, rgba(7,16,24,.8));
    color: var(--title-color, #e8c47f);
    text-shadow: 0 0 8px var(--title-glow, #d4a017);
    box-shadow: 0 0 10px color-mix(in srgb, var(--title-glow, #d4a017) 35%, transparent);
}
.player-pet-badge {
    display:inline-flex; align-items:center; gap:3px; margin-left:4px; padding:1px 5px;
    border:1px solid color-mix(in srgb, var(--pet-color, #7ec8e3) 55%, transparent);
    border-radius:999px;
    background: color-mix(in srgb, var(--pet-color, #7ec8e3) 16%, rgba(7,16,24,.8));
    color: var(--pet-color, #7ec8e3);
    text-shadow: 0 0 8px var(--pet-glow, #3aa0c8);
    box-shadow: 0 0 10px color-mix(in srgb, var(--pet-glow, #3aa0c8) 35%, transparent);
    font-size:.54rem; line-height:1.35; vertical-align:middle; white-space:nowrap;
}
.ff-pets-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-end; margin-bottom:10px; flex-wrap:wrap; }
.ff-pet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.ff-pet-card {
    display:grid; grid-template-columns:64px 1fr; gap:8px; align-items:center;
    padding:10px; border-radius:12px;
    border:1px solid color-mix(in srgb, var(--pet-color, #7ec8e3) 28%, transparent);
    background: rgba(6,16,24,.7);
    box-shadow: 0 0 16px color-mix(in srgb, var(--pet-glow, #3aa0c8) 18%, transparent);
}
.ff-pet-card.equipped { outline:1px solid color-mix(in srgb, var(--pet-color, #7ec8e3) 70%, white); }
.ff-pet-card-art { width:64px; height:64px; display:grid; place-items:center; }
.ff-pet-art { width:56px; height:56px; }
.ff-pet-card-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ff-pet-card .primary-btn, .ff-pet-card .secondary-btn { grid-column:1 / -1; }
.admin-cosmetic-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; max-height:320px; overflow:auto; }
.admin-cosmetic-row { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.admin-cosmetic-row button[data-edit-title], .admin-cosmetic-row button[data-edit-pet] {
    flex:1; text-align:left; background:rgba(6,16,24,.6); border:1px solid rgba(119,179,203,.18);
    color:inherit; border-radius:8px; padding:8px;
}
.admin-cosmetic-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.admin-bonus-grid { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (max-width:640px) {
    .ff-pet-grid { grid-template-columns:1fr; }
    .admin-cosmetic-form { grid-template-columns:1fr; }
}
.admin-help { margin:0 0 10px; padding:10px 12px; border:1px solid rgba(232,196,127,.25); border-radius:10px; background:rgba(20,18,16,.7); color:#d7cbb8; font-size:.82rem; line-height:1.4; }
.admin-jump { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px; }
.admin-jump a { padding:7px 10px; border-radius:999px; border:1px solid rgba(185,134,72,.4); color:#e0b16a; text-decoration:none; font-size:.75rem; background:rgba(20,16,12,.8); }
.admin-item-stat-card { margin-top:10px; padding:10px; border:1px solid #332d27; border-radius:12px; background:#141210; display:grid; gap:8px; }
.admin-item-stat-head { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.admin-item-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.admin-cosmetic-list { display:grid; gap:8px; max-height:none; }
.admin-cosmetic-card { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:10px; border-radius:12px; border:1px solid color-mix(in srgb, var(--title-color,#e8c47f) 35%, #332d27); background:rgba(16,14,12,.9); box-shadow:0 0 12px color-mix(in srgb, var(--title-glow,#d4a017) 18%, transparent); }
.admin-cosmetic-card b { display:block; }
.admin-cosmetic-card small { display:block; color:#b9ad9c; font-size:.72rem; }
.admin-cosmetic-actions { display:flex; gap:6px; flex-shrink:0; }
.admin-editor-card { border-color:rgba(224,177,106,.35); }
@media (max-width:640px) {
    .admin-item-stat-grid, .admin-cosmetic-form, .admin-bonus-grid { grid-template-columns:1fr; }
    .admin-cosmetic-card { flex-direction:column; align-items:stretch; }
}
.ff-nav-art { width:22px; height:22px; display:grid; place-items:center; }
.ff-nav-art img { width:22px; height:22px; object-fit:contain; image-rendering:pixelated; }
.ff-nav-art.is-placeholder { width:22px; height:22px; border-radius:6px; background:rgba(8,20,28,.75); border:1px dashed rgba(126,200,227,.35); }
.ff-nav-art.is-placeholder b { font-size:7px; letter-spacing:.04em; color:#9ec5e8; }
.ff-home-art { width:18px; height:18px; display:grid; place-items:center; background-size:contain; background-repeat:no-repeat; background-position:center; image-rendering:pixelated; }
.ff-home-art::after { content:attr(data-label); font-size:6px; letter-spacing:.03em; color:#9ec5e8; }
.ff-home-art[data-home-icon="rating"] { background-image: var(--ff-icon-home-rating, none); }
.ff-home-art[data-home-icon="friends"] { background-image: var(--ff-icon-home-friends, none); }
.ff-home-art[data-home-icon="guild"] { background-image: var(--ff-icon-home-guild, none); }
.ff-home-art[data-home-icon="bosses"] { background-image: var(--ff-icon-home-bosses, none); }
.ff-home-art[data-home-icon="market"] { background-image: var(--ff-icon-home-market, none); }
.ff-home-art[data-home-icon="city"] { background-image: var(--ff-icon-home-city, none); }
.ff-home-art[data-home-icon="pets"] { background-image: var(--ff-icon-home-pets, none); }
html.ff-has-home-rating .ff-home-art[data-home-icon="rating"]::after,
html.ff-has-home-friends .ff-home-art[data-home-icon="friends"]::after,
html.ff-has-home-guild .ff-home-art[data-home-icon="guild"]::after,
html.ff-has-home-bosses .ff-home-art[data-home-icon="bosses"]::after,
html.ff-has-home-market .ff-home-art[data-home-icon="market"]::after,
html.ff-has-home-city .ff-home-art[data-home-icon="city"]::after,
html.ff-has-home-pets .ff-home-art[data-home-icon="pets"]::after { content:none; }
.home-tab.active .ff-home-art { filter:drop-shadow(0 0 7px rgba(106,217,255,.42)); }
.nav-btn.active .ff-nav-art { filter:drop-shadow(0 0 6px rgba(106,217,255,.45)); }
.rating-guild { color:#7ec8e3; font-weight:800; margin-right:2px; }
.ff-home-art[data-home-icon="codex"] { background-image: var(--ff-icon-home-codex, none); }
html.ff-has-home-codex .ff-home-art[data-home-icon="codex"]::after { content:none; }
.ff-home-art[data-home-icon="arena"] { background-image: var(--ff-icon-home-arena, none); }
html.ff-has-home-arena .ff-home-art[data-home-icon="arena"]::after { content:none; }

/* === stage1545-arena START === */
.home-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.ff-arena{display:grid;gap:10px}
.arena-hero{align-items:stretch}
.arena-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-width:168px}
.arena-stats span{display:grid;gap:2px;padding:8px 9px;border:1px solid rgba(232,190,91,.22);border-radius:10px;background:rgba(0,0,0,.22);text-align:center}
.arena-stats b{font-size:.95rem;color:#f0d5af}
.arena-stats small{color:var(--muted);font-size:.6rem}
.arena-rewards,.arena-streak{line-height:1.45}
.arena-last{padding:8px 10px;border-radius:10px;font-size:.78rem;border:1px solid rgba(126,191,215,.18);background:rgba(0,0,0,.2)}
.arena-last.win{border-color:rgba(90,190,130,.4);color:#9ee0b6}
.arena-last.loss{border-color:rgba(210,90,90,.4);color:#f0b0a8}
.arena-last.draw{color:#d8c9a8}
.arena-foe-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.arena-identity{width:100%}
.arena-section{display:grid;gap:4px}
.arena-ladder{border:1px solid rgba(118,179,203,.14);border-radius:12px;background:rgba(5,16,24,.72);padding:4px 8px 8px}
.arena-ladder>summary{cursor:pointer;list-style:none;padding:8px 4px;font-weight:700}
.arena-ladder>summary::-webkit-details-marker{display:none}
@media(max-width:640px){
    .arena-hero{grid-template-columns:1fr}
    .arena-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .arena-foe-row{grid-template-columns:minmax(0,1fr);gap:4px}
    .arena-foe-row .primary-btn{width:100%}
}
/* === stage1545-arena END === */

/* === stage1553-arena-tickets START === */
.arena-ticket-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
    padding:8px 10px;
    border:1px solid rgba(232,190,91,.18);
    border-radius:10px;
    background:rgba(0,0,0,.18);
}
.arena-ticket-bar .compact-social-btn{flex:0 0 auto}
/* === stage1553-arena-tickets END === */


.ff-recipe-band { border:1px solid rgba(118,179,203,.14); border-radius:12px; background:rgba(5,16,24,.72); margin:8px 0; overflow:hidden; }
.ff-recipe-band>summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; cursor:pointer; list-style:none; font-size:.78rem; }
.ff-recipe-band>summary::-webkit-details-marker { display:none; }
.ff-recipe-band>summary b { letter-spacing:.04em; }
.ff-recipe-band>summary span { color:var(--muted); font-size:.68rem; }
.ff-recipe-band[open]>summary { border-bottom:1px solid rgba(118,179,203,.12); }
.ff-recipe-band .action-list { padding:8px; }

.ff-item-primary-actions { position:sticky; top:0; z-index:5; display:grid; gap:6px; padding:8px 0 10px; background:linear-gradient(180deg,#102433 70%,rgba(16,36,51,0)); }
.ff-item-primary-actions .primary-btn, .ff-item-primary-actions .secondary-btn { min-height:44px; }
.ff-use-chip { background:#1a4a3a; border-color:#2e8b6a; }

.ff-codex { display:grid; gap:10px; }
.ff-codex-card { display:grid; gap:8px; padding:10px; border:1px solid rgba(118,179,203,.14); border-radius:12px; background:rgba(5,16,24,.7); }
.ff-codex-card.boss { border-color:rgba(232,148,71,.28); }
.ff-codex-head { display:grid; grid-template-columns:46px minmax(0,1fr); gap:8px; align-items:center; }
.ff-codex-art { width:46px; height:46px; }
.ff-pet-card.locked { opacity:.78; }

/* === stage1541-codex-alchemy START === */
#item-modal { padding-bottom: calc(var(--nav-h, 64px) + var(--browser-chrome-bottom, 0px)); }
#item-modal .item-modal-card {
    max-height: calc(100dvh - var(--nav-h, 64px) - var(--browser-chrome-bottom, 0px) - 8px);
    padding-bottom: 16px;
}
@media (max-width:720px) {
    #item-modal { align-items:flex-end; padding:0 0 calc(var(--nav-h, 64px) + var(--browser-chrome-bottom, 0px)); }
}
/* === stage1541-codex-alchemy END === */

/* === stage1536-titles-pets END === */



/* stage1543-tools */
.ff-tool-slot-row{margin-top:8px!important;display:block!important;}
.ff-tool-slot-row .ff-slot-wrap,
.ff-tool-wrap{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 76px!important;
    gap:6px!important;
    align-items:stretch!important;
    width:100%!important;
}
.ff-tool-slot-row .ff-loadout-slot,
.ff-tool-slot-row .equipment-slot,
.ff-tool-slot{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    flex-direction:unset!important;
    align-items:center!important;
    justify-content:unset!important;
    text-align:left!important;
    gap:8px!important;
    width:100%!important;
    min-height:54px!important;
    height:auto!important;
    padding:7px 8px!important;
    overflow:hidden!important;
}
.ff-tool-slot-row .ff-slot-art{
    width:42px!important;height:42px!important;
    min-width:42px!important;min-height:42px!important;
}
.ff-tool-slot-row .ff-slot-copy,
.ff-tool-slot .ff-slot-copy{
    display:grid!important;
    gap:2px!important;
    min-width:0!important;
    text-align:left!important;
}
.ff-tool-slot-row .ff-slot-copy b,
.ff-tool-slot .ff-slot-copy b{
    display:block!important;
    font-size:.78rem!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-transform:none!important;
    letter-spacing:0!important;
}
.ff-tool-slot-row .ff-slot-copy small,
.ff-tool-slot .ff-slot-copy small{
    display:block!important;
    font-size:.58rem!important;
    line-height:1.1!important;
    color:var(--muted)!important;
    text-transform:none!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.ff-tool-slot-row .ff-slot-mobile-label{display:none!important;}
.ff-tool-slot-row .ff-unequip-chip{min-width:76px;align-self:stretch;}

.admin-pane.hidden{display:none!important;}
.admin-pane-btn{border:0;background:transparent;color:#e0b16a;padding:7px 10px;border-radius:999px;border:1px solid rgba(185,134,72,.4);font:inherit;font-size:.75rem;background:rgba(20,16,12,.8);}
.admin-pane-btn.active{background:#2a231c;color:#f0d5af;}
.admin-item-toolbar{display:grid;gap:6px;margin:6px 0 8px;}
.admin-item-toolbar input{width:100%;box-sizing:border-box;padding:8px 9px;border:1px solid #3b332b;border-radius:8px;background:#11100e;color:#eee5d8;font:inherit;}
.admin-filter-row{display:flex;flex-wrap:wrap;gap:5px;}
.admin-filter-chip{border:1px solid #3b332b;background:#151310;color:#c9b79f;border-radius:999px;padding:5px 9px;font:inherit;font-size:.68rem;}
.admin-filter-chip.active{border-color:#b98648;color:#f0d5af;background:#2a231c;}
.admin-item-compact-list{display:grid;gap:6px;}
.admin-item-row{border:1px solid #332d27;border-radius:10px;background:#141210;padding:6px;}
.admin-item-row-head{width:100%;display:grid;gap:2px;text-align:left;background:transparent;border:0;color:inherit;font:inherit;padding:2px 2px 4px;cursor:pointer;}
.admin-item-row-head b{font-size:.82rem;}
.admin-item-row-head small{font-size:.64rem;color:#b9ad9c;}
.admin-item-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0;}
.admin-mini-stat{display:grid;gap:2px;font-size:.62rem;color:#c9b79f;}
.admin-mini-stat input{width:100%;box-sizing:border-box;padding:6px 7px;border:1px solid #3b332b;border-radius:7px;background:#11100e;color:#eee5d8;font:inherit;font-size:.78rem;}
@media (max-width:640px){
    .admin-item-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

.lock-badge { display:inline-flex; margin-top:4px; padding:2px 7px; border-radius:999px; background:rgba(232,190,91,.12); border:1px solid rgba(232,190,91,.38); color:#f0cf73; font-size:.58rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.item-card.is-locked { border-color:#8a6a2a; box-shadow:inset 0 0 0 1px rgba(232,190,91,.18); }
.ff-lock-chip.is-locked { color:#f0cf73; border-color:rgba(232,190,91,.45); }
.item-lock-block { border-color:rgba(232,190,91,.22)!important; }
.market-mine { margin-bottom:10px; }
.market-mine-row { border-color:rgba(232,190,91,.28)!important; }


/* === stage1548-itemfix START === */
.ff-paperdoll-side .ff-slot-wrap,
.ff-tool-slot-row .ff-slot-wrap { display: contents !important; }
.ff-paperdoll-stage .ff-unequip-chip,
.ff-tool-slot-row .ff-unequip-chip,
.ff-item-wrap .ff-unequip-chip { display: none !important; }
.ff-item-primary-actions { display:grid; gap:8px; margin: 4px 0 10px; }
.ff-item-primary-actions .primary-btn,
.ff-item-primary-actions .secondary-btn { width:100%; }
.item-lock-block { margin-top: 4px; }
.ff-paperdoll-side { overflow: hidden !important; }
.ff-paperdoll-stage .ff-loadout-slot.empty .ff-unequip-chip { display:none !important; }
/* === stage1548-itemfix END === */

/* === stage1551-market-codex-icons START === */
.item-mini-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    overflow: hidden !important;
    line-height: 0 !important;
}
.item-mini-icon .pixel-sprite,
.item-mini-icon .sprite-fallback,
.item-mini-sprite,
.inspect-gear-sprite {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    filter: none !important;
}
.item-mini-icon .sprite-fallback:empty {
    width: 10px !important;
    height: 10px !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #8aa8b8, #314550) !important;
}
.item-pill,
.loot-pill,
.collection-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 100%;
}
.item-pill > span,
.loot-pill > span,
.collection-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combat-loadout-weapon b {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0;
}
.inspect-gear-slot b {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0;
}
.market-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    align-items: stretch !important;
}
.market-toolbar .ff-inventory-filter-dropdown,
.ff-codex-browse .ff-inventory-filter-dropdown {
    margin: 0 !important;
}
.market-box,
.ff-codex-browse,
.home-tab-content {
    overflow: visible !important;
}
/* === stage1551-market-codex-icons END === */

/* === stage1552-codex-bots START === */
.ff-codex-cats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
}
.ff-codex-cats .home-tab {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    font-size: .62rem !important;
    white-space: nowrap !important;
}
.collection-chip {
    gap: 6px !important;
    padding: 4px 8px 4px 4px !important;
    min-height: 30px !important;
    font-size: .62rem !important;
    line-height: 1.15 !important;
}
.collection-chip .item-mini-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
}
.collection-chip .item-mini-icon .pixel-sprite,
.collection-chip .item-mini-icon .sprite-fallback,
.collection-chip .collection-chip-sprite {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
}
/* === stage1552-codex-bots END === */

/* === stage1554-quests-workers-xp2 START === */
.home-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 640px) {
    .home-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.ff-quests, .ff-holdings { display: grid; gap: 8px; }
.ff-quest-col { display: grid; gap: 5px; }
.ff-quest-row, .ff-worker-row, .ff-post-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
}
.ff-worker-row, .ff-post-row { grid-template-columns: minmax(0, 1fr) auto; }
.ff-quest-row.is-done { border-color: rgba(232,190,91,.28); background: rgba(232,190,91,.06); }
.ff-quest-icon, .ff-quest-sprite {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
}
.ff-quest-copy, .ff-worker-copy, .ff-post-copy { min-width: 0; display: grid; gap: 2px; }
.ff-quest-copy b, .ff-worker-copy b, .ff-post-copy b {
    font-size: .74rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ff-quest-copy small, .ff-worker-copy small, .ff-post-copy small {
    color: var(--muted);
    font-size: .62rem;
}
.ff-quest-reward {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: .62rem;
    color: var(--muted);
}
.ff-quest-reward .item-mini-icon,
.ff-quest-reward .pixel-sprite {
    width: 18px;
    height: 18px;
    object-fit: contain;
    image-rendering: pixelated;
}
.ff-quest-action { justify-self: end; }
.ff-worker-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}
.ff-worker-edit input {
    width: 110px;
    min-width: 0;
    padding: 4px 6px;
    font: inherit;
    font-size: .7rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.25);
    color: var(--text);
}
.ff-post-chips, .ff-worker-skills { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ff-worker-chip {
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(232,190,91,.35);
    background: rgba(232,190,91,.1);
    color: var(--text);
    font: inherit;
    font-size: .62rem;
    font-weight: 700;
}
.ff-worker-skills .home-tab {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    padding: 4px 7px;
    font-size: .6rem;
}
@media (max-width: 720px) {
    .ff-quest-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .ff-quest-reward { grid-column: 2 / span 1; }
}
/* === stage1554-quests-workers-xp2 END === */

/* === stage1558-affix-t15 START === */
.ff-affix-block { margin: 10px 0 6px; }
.ff-affix-block .panel-title-row { margin-bottom: 6px; }
.ff-affix-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.ff-affix-card {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 6px;
    padding: 8px 8px 7px;
    border: 1px solid rgba(232, 190, 91, .22);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(232,190,91,.08), rgba(16,14,12,.35));
    min-width: 0;
}
.ff-affix-card.is-zero {
    border-color: rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
    opacity: .72;
}
.ff-affix-ico { grid-row: 1 / span 2; font-size: 1rem; line-height: 1.2; }
.ff-affix-card span { color: var(--muted, #9f9385); font-size: .62rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-affix-card b { font-size: .86rem; color: #f0d5af; }
.ff-item-affixes { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.ff-item-affix {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 7px; border-radius: 999px;
    border: 1px solid rgba(232,190,91,.32);
    background: rgba(232,190,91,.1);
    font-size: .64rem;
}
.ff-item-affix em { font-style: normal; color: #e8c76b; font-weight: 700; }
@media (max-width: 720px) {
    .ff-affix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* === stage1558-affix-t15 END === */

/* === stage1562-admin-fix-no-workshop START === */
button.collection-chip {
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}
button.collection-chip:focus-visible {
    outline: 2px solid var(--ice, #83ddff);
    outline-offset: 2px;
}
.ff-codex-card[data-action="codex-inspect"] { cursor: pointer; }
.ff-codex-card[data-action="codex-inspect"]:hover { border-color: rgba(131,221,255,.45); }
/* === stage1562-admin-fix-no-workshop END === */

/* === stage1563-casino-placeholders START === */
.ff-casino-sym { width: 36px; height: 36px; border-radius: 8px; }
.ff-slot-cell { min-height: 58px; position: relative; overflow: hidden; }
.ff-slot-cell .ff-art-slot, .ff-slot-cell .ff-casino-sym { width: 36px; height: 36px; }
.ff-slot-cell.is-blur { filter: blur(1.6px); opacity: .7; }
.ff-slot-cell.is-win {
    border-color: rgba(241,195,111,.7);
    box-shadow: 0 0 14px rgba(241,195,111,.35), inset 0 0 10px rgba(241,195,111,.18);
}
.ff-slots-grid.is-spinning .ff-slots-reel.spinning .ff-slot-cell {
    animation: ff-slot-spin 0.08s steps(2, end) infinite;
}
.ff-card.ff-card-deal { animation: ff-card-deal .28s cubic-bezier(.2,1.2,.3,1); }
@keyframes ff-card-deal {
    from { transform: translateY(-16px) rotateY(70deg) scale(.86); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.ff-chest { transition: transform .16s ease, background .16s ease; }
.ff-chest.open { animation: ff-chest-open .28s ease-out; }
@keyframes ff-chest-open {
    0% { transform: scale(.86) rotate(-6deg); }
    55% { transform: scale(1.08) rotate(3deg); }
    100% { transform: none; }
}
.ff-chest .ff-art-slot, .ff-chest .ff-casino-sym { width: 28px; height: 28px; margin: 0 auto; }
.ff-slots-paytable .ff-slot-cell { min-height: 36px; width: 36px; }
.ff-slot-cell .ff-art-slot.is-placeholder b { font-size: .5rem !important; letter-spacing: .06em; }
.ff-tavern-game .ff-art-slot.is-placeholder {
    width: 36px; height: 36px;
}
/* === stage1563-casino-placeholders END === */

/* === stage1564-pwa-shell START === */
.ff-install-howto { margin-top: 16px; text-align: left; max-width: 520px; margin-left: auto; margin-right: auto; }
.ff-install-howto p { margin: 0 0 8px; }
.ff-legal h1 { font-family: "Cinzel", serif; margin: 0 0 12px; }
.ff-legal h2 { font-size: 1.05rem; margin: 18px 0 8px; }
.ff-legal p { margin: 0 0 10px; line-height: 1.5; }
.frostforge-domain-note a { color: #c9b28a; }
html.ff-standalone [data-ff-install],
html.ff-standalone #ff-install-howto { display: none !important; }
@media (display-mode: standalone) {
    .ff-game-body { min-height: 100dvh; }
}
/* === stage1564-pwa-shell END === */


.ff-hit-row.loot { color:#f4d48a; }
.ff-hit-row.gold { color:#ffe38a; }
.ff-combat-float.loot { left:50%; transform:translateX(-50%); color:#ffe38a; }
.ff-eat-toggle { display:flex; align-items:center; gap:7px; cursor:pointer; }
.ff-eat-toggle input { width:18px; height:18px; }
.ff-eat-toggle b { font-size:.72rem; }
.ff-eat-controls { display:flex; gap:6px; flex:1; min-width:0; }
.ff-eat-controls select { flex:1; min-width:0; min-height:34px; font-size:.62rem; }
.ff-switch-targets { display:flex; flex-wrap:wrap; gap:6px; padding:8px 2px 2px; }
.ff-switch-targets .secondary-btn { min-height:34px; padding:6px 10px; font-size:.62rem; }

/* === stage1571-max-compact START === */
.compact-help, .city-rules { display:none !important; }
.ability-pill small { display:none !important; }
.achievement-done { display:none !important; }
.panel { padding: 9px 10px 8px !important; }
.panel-title-row { margin-bottom: 6px !important; gap: 6px !important; }
.activity-head { margin-top: 0 !important; }
.progress-label { font-size: .58rem; }
.ff-hit-log { max-height: 132px; overflow: auto; }
.ff-hit-log-compact { max-height: 84px; }
.ff-hit-row { font-size: .58rem; padding: 2px 0; }
.monster-one-line { font-size: .52rem; }
.ff-item-card-copy small { font-size: .5rem; }
.prayer-copy small { display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recipe-label { font-size: .52rem; letter-spacing: .04em; }
.world-event-row { padding: 4px 0; font-size: .62rem; }
.location-boss-line { font-size: .55rem; }
.compact-page-head { padding-bottom: 4px !important; }
.ff-combat-v2-head small { display:block; font-size:.55rem; color:#8fb4c4; letter-spacing:.04em; text-transform:uppercase; }
.ff-duelist-copy small:empty { display:none; }
.empty-state { padding: 10px 6px; font-size: .72rem; }
.combat-home-health { font-size: .58rem; }
.city-compact-head small { font-size: .55rem; }
.ff-pets-head small { display: none; }
.guild-header p.muted { display: none; }
.market-mine .muted.tiny, .market-toolbar .muted.tiny { display: none; }
.ff-management-body .muted.small { display: none; }
/* === stage1572-play-compact START === */
.gold-label { display: none !important; }
.skill-entry-main > .muted { display: none !important; }
.skill-entry-main .mini-track { margin-top: 3px !important; }
.attack-label span:first-child { display: none; }
.ff-loadout-slot.empty .ff-slot-copy { display: none !important; }
.ff-loadout-slot.filled .ff-slot-copy small { display: none !important; }
.lock-badge { display: none !important; }
.monster-one-line:empty { display: none !important; }
.item-card.ff-item-card-compact { padding: 5px 4px 4px !important; gap: 3px; }
.ff-item-card-copy b { font-size: .58rem; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ff-item-card-copy small:empty { display: none; }
.ff-sell-weaker-panel { padding: 6px 10px !important; }
.ff-management-details { padding: 6px 10px !important; }
.ff-management-summary small { font-size: .52rem; }
.detail-section { margin-top: 6px !important; }
.ff-item-more summary { font-size: .58rem; }
.combat-loadout-weapon .recipe-label { display: none; }
.fighter-hp { font-size: .62rem; }
.inventory-index-panel > .panel-title-row h2 { font-size: .9rem; }
.skill-state { font-size: .52rem; }
.prayer-state { font-size: .48rem !important; }
.equipped-badge { font-size: .45rem; padding: 1px 4px; }
.action-meta span { letter-spacing: 0; }
.ff-core-stat span, .ff-affix-card span { font-size: .52rem; }
.profile-field .recipe-label { font-size: .52rem; }
.item-detail-head .muted.small { font-size: .58rem; }
.catalog-empty { font-size: .62rem; color: #6d8793; }
.location-meta, .monster-summary { font-size: .52rem; }
/* === stage1572-play-compact END === */
/* === stage1571-max-compact END === */