/* PVP-001f6 dev.111 - Znaki Splotu: canonical shared component for game + public profile */
:root { --st-badge-slot-size: 64px; }
body.st-badge-modal-open { overflow: hidden; }
.st-badge-dock {
    position: absolute;
    z-index: 18;
    left: 24px;
    bottom: 20px;
    width: max-content;
    max-width: calc(100% - 500px);
    padding: 10px 12px 12px;
    border: 1px solid rgba(126, 88, 234, .34);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(10, 13, 29, .95), rgba(6, 8, 18, .93));
    box-shadow: 0 16px 40px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255, 255, 255, .02);
    backdrop-filter: blur(9px);
}
.st-badge-dock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 22px;
    margin-bottom: 8px;
}
.st-badge-dock__title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.st-badge-dock__title > span {
    color: #7ec9ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.st-badge-dock__title > strong { color: #f4f1ff; font-size: 12px; line-height: 1.1; }
.st-badge-dock__head > small { color: #8f98b8; font-size: 10px; }
.st-badge-dock__edit {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(139, 92, 246, .29);
    border-radius: 9px;
    background: rgba(139, 92, 246, .09);
    color: #cbbdff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
.st-badge-dock__edit:hover { background: rgba(139, 92, 246, .18); border-color: rgba(139, 92, 246, .5); }
.st-badge-dock__slots { display: flex; align-items: center; gap: 8px; }
.st-badge-slot {
    position: relative;
    width: var(--st-badge-slot-size);
    height: var(--st-badge-slot-size);
    flex: 0 0 var(--st-badge-slot-size);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(139, 92, 246, .25);
    border-radius: 14px;
    background: linear-gradient(145deg, #101529, #070a15);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
    overflow: hidden;
}
button.st-badge-slot { cursor: pointer; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.st-badge-slot.is-filled { border: 2px solid rgba(118, 168, 255, .67); }
button.st-badge-slot.is-filled:hover,
button.st-badge-slot.is-filled:focus-visible {
    transform: translateY(-2px);
    border-color: #9fc3ff;
    box-shadow: 0 0 0 2px rgba(118, 168, 255, .12), 0 12px 24px rgba(0, 0, 0, .34);
    outline: none;
}
.st-badge-slot img { display: block; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,.38)); }
.st-badge-slot.is-empty { background: rgba(5, 8, 18, .48); }
.st-badge-slot.is-empty::after { content: ''; width: 15px; height: 15px; border: 1px solid rgba(185, 174, 220, .13); border-radius: 50%; opacity: .28; }
.st-badge-slot.rarity-rare { box-shadow: 0 0 0 1px rgba(118,168,255,.08), 0 8px 18px rgba(0,0,0,.25); }
.st-badge-slot.rarity-epic { box-shadow: 0 0 0 1px rgba(180,113,255,.1), 0 8px 20px rgba(0,0,0,.26); }
.st-badge-slot.rarity-legendary { box-shadow: 0 0 0 1px rgba(246,193,85,.13), 0 8px 22px rgba(0,0,0,.28); }
.st-badge-dock--compact { position: relative; inset: auto; max-width: 100%; margin-top: 14px; box-shadow: none; background: rgba(8,10,24,.58); }
.st-badge-dock--compact .st-badge-dock__head { margin-bottom: 7px; }
.st-badge-dock--compact .st-badge-dock__head > small { display: none; }
.st-badge-dock--compact .st-badge-slot { --st-badge-slot-size: 56px; border-radius: 13px; }

/* Tooltip jest portalem bezpośrednio pod body - nie dziedziczy overflow sceny. */
.st-badge-tooltip {
    position: fixed;
    z-index: 12050;
    width: 260px;
    padding: 12px 13px;
    border: 1px solid rgba(118, 168, 255, .44);
    border-radius: 13px;
    background: linear-gradient(180deg, #0d1326, #080b16);
    color: #f6f4ff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(118, 168, 255, .06);
    pointer-events: none;
}
.st-badge-tooltip[hidden] { display: none !important; }
.st-badge-tooltip::after {
    content: '';
    position: absolute;
    left: var(--arrow-x, 50%);
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: #080b16;
    border-right: 1px solid rgba(118,168,255,.44);
    border-bottom: 1px solid rgba(118,168,255,.44);
    transform: translateX(-50%) rotate(45deg);
}
.st-badge-tooltip.is-below::after { top: -6px; bottom: auto; border: 0; border-left: 1px solid rgba(118,168,255,.44); border-top: 1px solid rgba(118,168,255,.44); }
.st-badge-tooltip__chips,
.st-badge-detail__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.st-badge-tooltip__chips span,
.st-badge-detail__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border: 1px solid rgba(139, 92, 246, .26);
    border-radius: 999px;
    background: rgba(139, 92, 246, .12);
    color: #cab7ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.st-badge-tooltip__chips .rarity-rare,
.st-badge-detail__chips .rarity-rare { border-color: rgba(113,163,255,.32); background: rgba(76,130,230,.14); color: #9fc3ff; }
.st-badge-tooltip__chips .rarity-epic,
.st-badge-detail__chips .rarity-epic { border-color: rgba(181,112,255,.34); background: rgba(156,82,230,.14); color: #d6b4ff; }
.st-badge-tooltip__chips .rarity-legendary,
.st-badge-detail__chips .rarity-legendary { border-color: rgba(246,193,85,.34); background: rgba(217,144,39,.12); color: #ffd990; }
.st-badge-tooltip > strong { display: block; font-size: 13px; line-height: 1.25; }
.st-badge-tooltip p { margin: 7px 0; color: #c0c7dc; font-size: 10px; line-height: 1.48; }
.st-badge-tooltip p b { color: #f4f1ff; }
.st-badge-tooltip__date { padding-top: 7px; border-top: 1px solid rgba(255,255,255,.07); color: #8993b5; font-size: 9px; }

/* Popup i edytor */
.st-badge-modal {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 3, 9, .79);
    backdrop-filter: blur(7px);
}
.st-badge-modal[hidden] { display: none !important; }
.st-badge-modal__close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    background: #0b0e1d;
    color: #fff;
    cursor: pointer;
}
.st-badge-modal__close:hover { border-color: rgba(139,92,246,.42); background: #141329; }
.st-badge-detail {
    position: relative;
    isolation: isolate;
    width: min(590px, calc(100vw - 30px));
    min-height: 210px;
    display: grid;
    grid-template-columns: 155px 1fr;
    gap: 24px;
    align-items: center;
    padding: 26px;
    border: 1px solid rgba(139,92,246,.42);
    border-radius: 22px;
    background: linear-gradient(145deg, #11152b, #080b16 72%);
    box-shadow: 0 32px 100px #000;
    overflow: hidden;
}
.st-badge-detail > .st-badge-modal__close { position: absolute; right: 16px; top: 16px; z-index: 3; }
.st-badge-detail__glow { position: absolute; z-index: -1; left: -30px; top: -70px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(244,165,67,.14), rgba(59,116,224,.08) 42%, transparent 68%); }
.st-badge-detail__icon { display: grid; place-items: center; width: 148px; height: 148px; border: 1px solid rgba(244,199,111,.18); border-radius: 24px; background: radial-gradient(circle, rgba(43,86,169,.16), rgba(7,9,18,.15)); }
.st-badge-detail__icon img { width: 136px; height: 136px; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
.st-badge-detail__content h3 { margin: 0; color: #f8f6ff; font-size: 21px; line-height: 1.18; }
.st-badge-detail__content > p { margin: 8px 0 17px; max-width: 360px; color: #c3c9dd; font-size: 11px; line-height: 1.5; }
.st-badge-detail__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-badge-detail__meta > div { padding: 9px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(255,255,255,.025); }
.st-badge-detail__meta span { display: block; color: #7f8aaa; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.st-badge-detail__meta strong { display: block; margin-top: 4px; color: #f1eff9; font-size: 10px; font-weight: 700; }
.st-badge-editor {
    width: min(700px, calc(100vw - 30px));
    border: 1px solid rgba(139,92,246,.43);
    border-radius: 22px;
    background: linear-gradient(180deg, #11152b, #090c18);
    color: #f6f4ff;
    box-shadow: 0 32px 100px #000;
    overflow: hidden;
}
.st-badge-editor__head { display: flex; justify-content: space-between; gap: 20px; padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.st-badge-editor__head > div > span { color: #7ec9ff; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.st-badge-editor__head h3 { margin: 3px 0 4px; font-size: 18px; }
.st-badge-editor__head p { margin: 0; color: #9fa8c6; font-size: 10px; }
.st-badge-editor__body { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "showcase collection" "bonus bonus"; gap: 12px; padding: 16px 20px; }
.st-badge-editor__showcase-section { grid-area: showcase; }
.st-badge-editor__collection-section { grid-area: collection; }
.st-badge-editor__bonus-section { grid-area: bonus; }
.st-badge-editor__section { min-width: 0; padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: rgba(255,255,255,.018); }
.st-badge-editor__section-head { min-height: 38px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.st-badge-editor__section-head strong { display: block; font-size: 11px; }
.st-badge-editor__section-head small { display: block; margin-top: 3px; color: #8893b3; font-size: 9px; line-height: 1.35; }
.st-badge-editor__section-head em { min-width: 34px; padding: 4px 7px; border: 1px solid rgba(139,92,246,.18); border-radius: 999px; color: #bba8ff; font-size: 9px; font-style: normal; text-align: center; }
.st-badge-editor__bonus-select { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr); align-items: center; gap: 12px; margin-top: 10px; color: #aeb7d2; font-size: 9px; font-weight: 700; }
.st-badge-editor__bonus-select select { width: 100%; min-height: 34px; padding: 0 10px; border: 1px solid rgba(139,92,246,.24); border-radius: 9px; background: #090d1a; color: #f1eff9; font-size: 10px; outline: none; }
.st-badge-editor__bonus-select select:focus { border-color: rgba(119,170,255,.7); box-shadow: 0 0 0 2px rgba(119,170,255,.10); }
.st-badge-editor__badge-bonus { color: #b8d7ff !important; }
.st-badge-tooltip__bonus { color: #b8d7ff; }
.st-badge-editor__slots { display: grid; grid-template-columns: repeat(5, 56px); gap: 7px; min-height: 56px; margin-top: 11px; }
.st-badge-editor__slot { position: relative; width: 56px; height: 56px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(139,92,246,.2); border-radius: 13px; background: #090d1a; color: #6f7897; cursor: pointer; overflow: hidden; }
.st-badge-editor__slot.is-selected { border-color: #77aaff; box-shadow: none; }
.st-badge-editor__slot.is-selected::after { content: ''; position: absolute; inset: 0; z-index: 3; border: 2px solid rgba(119,170,255,.72); border-radius: inherit; box-sizing: border-box; pointer-events: none; }
.st-badge-editor__slot img { width: 88%; height: 88%; object-fit: contain; }
.st-badge-editor__slot > span { position: absolute; right: 3px; bottom: 2px; z-index: 4; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 6px; background: #11162a; color: #687495; font-size: 8px; }
.st-badge-editor__slot.is-selected > span { color: #a9c7ff; }
.st-badge-editor__clear { min-height: 28px; margin-top: 10px; padding: 0 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: transparent; color: #8f99b8; font-size: 9px; cursor: pointer; }
.st-badge-editor__clear:hover { color: #e3ddff; border-color: rgba(139,92,246,.25); }
.st-badge-editor__collection { display: grid; gap: 7px; max-height: 245px; margin-top: 11px; overflow: auto; padding-right: 2px; }
.st-badge-editor__badge { width: 100%; min-height: 64px; display: grid; grid-template-columns: 46px 1fr 20px; align-items: center; gap: 9px; padding: 7px; border: 1px solid rgba(118,168,255,.20); border-radius: 12px; background: #0a0f20; color: #fff; text-align: left; cursor: pointer; }
.st-badge-editor__badge:hover,
.st-badge-editor__badge.is-active { border-color: rgba(118,168,255,.55); background: #0d1428; }
.st-badge-editor__badge-icon { display: grid; place-items: center; width: 44px; height: 44px; }
.st-badge-editor__badge-icon img { width: 44px; height: 44px; object-fit: contain; }
.st-badge-editor__badge > span:nth-child(2) { min-width: 0; }
.st-badge-editor__badge strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.st-badge-editor__badge small { display: block; margin-top: 3px; color: #8cb8ff; font-size: 9px; }
.st-badge-editor__badge i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(116,227,177,.12); color: #73e2b0; font-size: 10px; font-style: normal; opacity: .2; }
.st-badge-editor__badge.is-active i { opacity: 1; }
.st-badge-editor__empty { margin: 12px 0 0; color: #8f98b8; font-size: 10px; }
.st-badge-editor__actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; padding: 12px 20px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(5,7,16,.28); }
.st-badge-editor__actions > span { color: #7f89a9; font-size: 9px; }
.st-badge-editor__actions > div { display: flex; gap: 8px; }
.st-badge-button { min-height: 34px; padding: 0 15px; border-radius: 9px; font-size: 10px; font-weight: 800; cursor: pointer; }
.st-badge-button--secondary { border: 1px solid rgba(255,255,255,.08); background: #0b0e1d; color: #bcc3d9; }
.st-badge-button--primary { min-width: 116px; border: 1px solid #7654da; background: linear-gradient(180deg, #6e46d1, #5030ac); color: #fff; }
.st-badge-button:disabled { opacity: .65; cursor: wait; }
.st-badge-toast { position: fixed; z-index: 13000; right: 22px; bottom: 22px; padding: 12px 15px; border: 1px solid rgba(73,217,151,.3); border-radius: 12px; background: #0b211a; color: #9af0c8; font-size: 11px; box-shadow: 0 15px 40px #000; opacity: 0; transform: translateY(8px); transition: .18s ease; }
.st-badge-toast.is-error { border-color: rgba(255,104,120,.3); background: #271017; color: #ffb0ba; }
.st-badge-toast.is-visible { opacity: 1; transform: translateY(0); }

/* Dok na scenie postaci musi mieć własne miejsce i nie może kolidować z panelem statystyk. */
.character-stage { position: relative; }
.character-module .character-stage > .st-badge-dock,
.character-module--public-profile .character-stage > .st-badge-dock { left: 24px; bottom: 22px; }

/* Publiczny /profile-character.php - ten sam komponent, ale w przepływie dokumentu. */
.profile-character-page .st-badge-dock,
.account-panel-shell .st-badge-dock--profile-public { position: relative; inset: auto; max-width: 100%; width: max-content; margin: 14px 0 0; }

@media (max-width: 1180px) {
    .st-badge-dock { max-width: calc(100% - 36px); }
}
@media (max-width: 900px) {
    .character-module .character-stage > .st-badge-dock,
    .character-module--public-profile .character-stage > .st-badge-dock { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; }
    .st-badge-dock__head > small { display: none; }
    .st-badge-editor__body { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    :root { --st-badge-slot-size: 54px; }
    .st-badge-dock { padding: 9px 10px 10px; }
    .st-badge-dock__slots { gap: 6px; }
    .st-badge-dock__title > strong { font-size: 11px; }
    .st-badge-detail__meta { grid-template-columns: 1fr; }
    .st-badge-editor { width: calc(100vw - 16px); }
    .st-badge-editor__head,
    .st-badge-editor__body,
    .st-badge-editor__actions { padding-left: 13px; padding-right: 13px; }
    .st-badge-editor__slots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
    .st-badge-editor__slot { width: 100%; height: auto; aspect-ratio: 1; }
    .st-badge-editor__actions { align-items: flex-end; flex-direction: column; }
    .st-badge-editor__actions > div { width: 100%; }
    .st-badge-button { flex: 1; }
}

/* =========================================================
   dev.111 hardening - all three canonical render locations
========================================================= */

/* Every slot has exactly the same outer geometry. Filled state never changes box size. */
.st-badge-slot,
.st-badge-editor__slot,
.st-badge-detail,
.st-badge-editor,
.st-badge-modal,
.st-badge-dock {
    box-sizing: border-box;
}
.st-badge-slot {
    appearance: none;
    -webkit-appearance: none;
    line-height: 0;
    vertical-align: middle;
    border-width: 1px;
}
.st-badge-slot.is-filled {
    border-width: 1px;
    border-color: rgba(118, 168, 255, .82);
    box-shadow:
        inset 0 0 0 1px rgba(118,168,255,.28),
        0 8px 18px rgba(0,0,0,.25);
}
.st-badge-slot.rarity-epic.is-filled {
    box-shadow: inset 0 0 0 1px rgba(180,113,255,.30), 0 8px 20px rgba(0,0,0,.27);
}
.st-badge-slot.rarity-legendary.is-filled {
    box-shadow: inset 0 0 0 1px rgba(246,193,85,.32), 0 8px 22px rgba(0,0,0,.29);
}
.st-badge-slot img { pointer-events: none; }

/* Game shell: lower scene dock. These pages do not load legacy app.css, so this
   component stylesheet is loaded explicitly by game_layout.php. */
.character-stage > .st-badge-dock--game-own,
.character-stage > .st-badge-dock--game-public {
    position: absolute;
    z-index: 18;
    left: 24px;
    right: auto;
    bottom: 22px;
    width: max-content;
    max-width: calc(100% - 548px);
    margin: 0;
}

/* Public profile: the prestige strip belongs to the right/statistics column,
   immediately after attributes, not below the whole hero card. */
.profile-character-stats-panel > .st-badge-dock--profile-public {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 18px 0 0;
    padding: 11px 12px 12px;
    align-self: stretch;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}
.profile-character-stats-panel > .st-badge-dock--profile-public .st-badge-dock__slots {
    width: 100%;
}

/* Tooltip is a body portal. Keep it above shell, drawers and stage overflow. */
.st-badge-tooltip {
    z-index: 20050;
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
}

/* Popup/editor modal: viewport-safe on desktop, tablet and phones. */
.st-badge-modal {
    z-index: 20000;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    padding:
        max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    overflow: auto;
    overscroll-behavior: contain;
}
.st-badge-detail {
    width: min(590px, 100%);
    max-width: 590px;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 26px;
}
.st-badge-detail__content { min-width: 0; padding-right: 28px; }
.st-badge-detail__content h3,
.st-badge-detail__content > p,
.st-badge-detail__meta strong {
    overflow-wrap: anywhere;
}
.st-badge-detail > .st-badge-modal__close {
    top: 14px;
    right: 14px;
}
.st-badge-modal__close {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 0;
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.st-badge-editor {
    width: min(700px, 100%);
    max-width: 700px;
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.st-badge-editor__head,
.st-badge-editor__actions { flex: 0 0 auto; }
.st-badge-editor__body {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
.st-badge-editor__slots { align-items: stretch; }
.st-badge-editor__slot { box-sizing: border-box; }

/* Tablet/stacked game layout: keep the dock visible and non-overlapping.
   Since the component is after the scene body in DOM, it becomes a full-width
   flow block below the character panel instead of disappearing under it. */
@media (max-width: 980px) {
    .character-stage > .st-badge-dock--game-own,
    .character-stage > .st-badge-dock--game-public {
        position: relative;
        inset: auto;
        width: auto;
        max-width: none;
        margin: 0 14px 16px;
    }
    .character-stage > .st-badge-dock--game-own .st-badge-dock__slots,
    .character-stage > .st-badge-dock--game-public .st-badge-dock__slots {
        width: 100%;
    }
}

@media (max-width: 620px) {
    :root { --st-badge-slot-size: 52px; }

    .st-badge-dock,
    .profile-character-stats-panel > .st-badge-dock--profile-public {
        width: 100%;
        max-width: 100%;
        border-radius: 15px;
    }
    .st-badge-dock__head {
        gap: 10px;
        margin-bottom: 9px;
    }
    .st-badge-dock__slots {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 5px;
    }
    .st-badge-slot,
    .st-badge-dock--compact .st-badge-slot {
        --st-badge-slot-size: clamp(46px, 13vw, 54px);
        width: var(--st-badge-slot-size);
        height: var(--st-badge-slot-size);
        flex-basis: var(--st-badge-slot-size);
        border-radius: 12px;
    }

    .character-stage > .st-badge-dock--game-own,
    .character-stage > .st-badge-dock--game-public {
        margin: 0 10px 14px;
        width: calc(100% - 20px);
    }

    .profile-character-stats-panel > .st-badge-dock--profile-public {
        margin-top: 14px;
    }

    .st-badge-tooltip { display: none !important; }

    .st-badge-detail {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        max-height: calc(100dvh - 24px);
        padding: 16px 14px 14px;
        border-radius: 18px;
    }
    .st-badge-detail__glow {
        left: -65px;
        top: -90px;
        width: 230px;
        height: 230px;
    }
    .st-badge-detail__icon {
        width: 80px;
        height: 80px;
        border-radius: 17px;
        margin-top: 22px;
    }
    .st-badge-detail__icon img { width: 74px; height: 74px; }
    .st-badge-detail__content {
        min-width: 0;
        padding: 22px 0 0;
    }
    .st-badge-detail__chips {
        padding-right: 42px;
        margin-bottom: 6px;
    }
    .st-badge-detail__chips span { min-height: 18px; padding: 0 6px; font-size: 8px; }
    .st-badge-detail__content h3 { font-size: 17px; }
    .st-badge-detail__content > p { margin: 7px 0 12px; font-size: 10px; }
    .st-badge-detail__meta { grid-template-columns: 1fr; gap: 6px; }
    .st-badge-detail__meta > div { padding: 8px 9px; }
    .st-badge-detail > .st-badge-modal__close { top: 11px; right: 11px; }
    .st-badge-modal__close { width: 32px; height: 32px; border-radius: 9px; }

    .st-badge-editor {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
    }
    .st-badge-editor__head { gap: 10px; padding: 14px 13px 12px; }
    .st-badge-editor__head h3 { font-size: 17px; }
    .st-badge-editor__head p { max-width: 90%; line-height: 1.4; }
    .st-badge-editor__body {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 11px 13px;
    }
    .st-badge-editor__section { padding: 11px; border-radius: 13px; }
    .st-badge-editor__slots {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
    }
    .st-badge-editor__slot {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        min-width: 0;
    }
    .st-badge-editor__collection { max-height: 210px; }
    .st-badge-editor__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 10px 13px max(10px, env(safe-area-inset-bottom));
    }
    .st-badge-editor__actions > span { order: 2; }
    .st-badge-editor__actions > div { order: 1; width: 100%; display: grid; grid-template-columns: 1fr 1.35fr; }
    .st-badge-button { width: 100%; min-height: 38px; }
}

@media (max-width: 390px) {
    .st-badge-detail {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .st-badge-detail__icon { width: 68px; height: 68px; border-radius: 15px; }
    .st-badge-detail__icon img { width: 64px; height: 64px; }
    .st-badge-dock__title { gap: 6px; }
    .st-badge-dock__title > span { font-size: 8px; }
    .st-badge-dock__title > strong { font-size: 10px; }
    .st-badge-dock__edit { min-height: 26px; padding: 0 8px; font-size: 9px; }
}

/* =========================================================
   dev.112 final profile-character alignment
   Desktop: compact centered prestige dock, same visual density as the game dock.
   Mobile: full-width dock with five equal, centered slots.
========================================================= */
@media (min-width: 621px) {
    .profile-character-stats-panel > .st-badge-dock--profile-public {
        width: fit-content;
        max-width: 100%;
        margin: 18px auto 0;
        padding: 10px 12px 11px;
        align-self: center;
        justify-self: center;
    }
    .profile-character-stats-panel > .st-badge-dock--profile-public .st-badge-dock__slots {
        width: auto;
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .profile-character-stats-panel > .st-badge-dock--profile-public {
        width: 100%;
        max-width: 100%;
        margin: 14px 0 0;
        padding: 9px 10px 10px;
        align-self: stretch;
        justify-self: stretch;
    }
    .profile-character-stats-panel > .st-badge-dock--profile-public .st-badge-dock__slots {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
    }
    .profile-character-stats-panel > .st-badge-dock--profile-public .st-badge-slot {
        margin: 0;
    }
}



/* =========================================================
   dev.113 final f6 alignment hardening
   - public app.css gives generic buttons margin-top:16px; reset it here so
     filled <button> slots align pixel-perfect with empty <span> slots.
   - phone game views use the same centered/equal 5-slot geometry as the
     accepted mobile public profile without changing desktop scene docks.
========================================================= */
.st-badge-dock button,
.st-badge-modal button,
.st-badge-slot {
    margin: 0;
}

.profile-character-stats-panel > .st-badge-dock--profile-public .st-badge-dock__slots {
    align-items: center;
}
.profile-character-stats-panel > .st-badge-dock--profile-public .st-badge-slot {
    align-self: center;
    margin: 0;
}

@media (max-width: 620px) {
    /* The game dock lives outside character-stage__panel in DOM. Match the
       panel's inner visual width (10px body + 14px panel padding on each side)
       and center it, so own/public game profiles look like profile-character. */
    .character-stage > .st-badge-dock--game-own,
    .character-stage > .st-badge-dock--game-public {
        width: calc(100% - 48px);
        max-width: calc(100% - 48px);
        margin: 0 auto 14px;
        padding: 9px 10px 10px;
    }

    .character-stage > .st-badge-dock--game-own .st-badge-dock__slots,
    .character-stage > .st-badge-dock--game-public .st-badge-dock__slots {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        justify-items: center;
        gap: 5px;
    }

    .character-stage > .st-badge-dock--game-own .st-badge-slot,
    .character-stage > .st-badge-dock--game-public .st-badge-slot {
        width: 100%;
        max-width: 54px;
        height: auto;
        aspect-ratio: 1;
        flex: none;
        margin: 0;
    }

    /* Keep the already accepted public-profile mobile geometry deterministic. */
    .profile-character-stats-panel > .st-badge-dock--profile-public .st-badge-dock__slots {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        justify-items: center;
        gap: 5px;
    }
    .profile-character-stats-panel > .st-badge-dock--profile-public .st-badge-slot {
        width: 100%;
        max-width: 54px;
        height: auto;
        aspect-ratio: 1;
        flex: none;
    }
}


/* =========================================================
   dev.114 final mobile game-profile geometry
   - /game/character.php and /game/player-profile.php use the full mobile
     module width, aligned with the character panel instead of a narrower
     centered scene dock.
   - the dock stays in normal document flow below the character panel; no
     negative offset, no upward overlap. Desktop/tablet geometry is untouched.
========================================================= */
@media (max-width: 620px) {
    .character-stage > .st-badge-dock--game-own,
    .character-stage > .st-badge-dock--game-public {
        position: relative;
        inset: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        margin: 0 10px 14px;
        padding: 9px 10px 10px;
        transform: none;
        box-sizing: border-box;
        clear: both;
    }

    .character-stage > .st-badge-dock--game-own .st-badge-dock__slots,
    .character-stage > .st-badge-dock--game-public .st-badge-dock__slots {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        justify-items: center;
        gap: 5px;
    }

    .character-stage > .st-badge-dock--game-own .st-badge-slot,
    .character-stage > .st-badge-dock--game-public .st-badge-slot {
        width: min(100%, 54px);
        max-width: 54px;
        height: auto;
        aspect-ratio: 1;
        flex: none;
        margin: 0;
    }
}


/* =========================================================
   dev.115 structural mobile fix - no more mobile scene-dock positioning
   Desktop keeps the accepted lower scene dock. On phones the same badge data is
   rendered inside character-stage__panel after defence stats, so width/flow are
   inherited from the canonical stats panel and cannot overlap the scene.
========================================================= */
.st-badge-dock--game-own-mobile,
.st-badge-dock--game-public-mobile {
    display: none;
}

@media (max-width: 760px) {
    /* Hide only the desktop scene copy. Its editor modal remains available and
       is opened by the mobile Edit button through the shared JS contract. */
    .character-stage > .st-badge-dock--game-own,
    .character-stage > .st-badge-dock--game-public {
        display: none !important;
    }

    .character-stage__panel > .st-badge-dock--game-own-mobile,
    .character-stage__panel > .st-badge-dock--game-public-mobile {
        display: block;
        position: relative;
        inset: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 9px 10px 10px;
        align-self: stretch;
        flex: 0 0 auto;
        transform: none;
        box-sizing: border-box;
        clear: both;
    }

    .character-stage__panel > .st-badge-dock--game-own-mobile .st-badge-dock__head,
    .character-stage__panel > .st-badge-dock--game-public-mobile .st-badge-dock__head {
        width: 100%;
        margin: 0 0 9px;
    }

    .character-stage__panel > .st-badge-dock--game-own-mobile .st-badge-dock__head > small,
    .character-stage__panel > .st-badge-dock--game-public-mobile .st-badge-dock__head > small {
        display: none;
    }

    .character-stage__panel > .st-badge-dock--game-own-mobile .st-badge-dock__slots,
    .character-stage__panel > .st-badge-dock--game-public-mobile .st-badge-dock__slots {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        justify-items: center;
        gap: 6px;
    }

    .character-stage__panel > .st-badge-dock--game-own-mobile .st-badge-slot,
    .character-stage__panel > .st-badge-dock--game-public-mobile .st-badge-slot {
        width: min(100%, 54px);
        max-width: 54px;
        height: auto;
        aspect-ratio: 1;
        flex: none;
        margin: 0;
    }
}

@media (max-width: 760px) {
    .st-badge-editor__body { grid-template-areas: "showcase" "collection" "bonus"; }
    .st-badge-editor__bonus-select { grid-template-columns: 1fr; gap: 6px; }
}

/* RFT-001a / dev.132 - źródło może mieć 512x512, popup nie przekracza 128x128 */
.st-badge-detail__icon{width:min(128px,34vw);height:auto;aspect-ratio:1}
.st-badge-detail__icon img{width:100%;height:100%;max-width:128px;max-height:128px;object-fit:contain}

/* UI-CSS-001c3b - mobile detail presentation.
   On phones the badge visual sits above all copy so it can stay large without
   competing with title/chips for horizontal space. The content below uses the
   full modal width; desktop/tablet presentation is unchanged. */
@media (max-width: 620px) {
    .st-badge-detail {
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: start;
        padding: 18px 16px 16px;
    }
    .st-badge-detail__icon {
        width: min(118px, 34vw);
        height: auto;
        aspect-ratio: 1;
        margin: 0 auto 2px;
    }
    .st-badge-detail__icon > img {
        width: 92%;
        height: 92%;
        max-width: none;
        max-height: none;
    }
    .st-badge-detail__content { min-width: 0; width: 100%; }
    .st-badge-detail__content h3 { padding-right: 38px; }
    .st-badge-detail__content > p { max-width: none; }
    .st-badge-detail__meta { width: 100%; grid-template-columns: 1fr; }
}


/* UI-001a7 - przewijanie Odznak pozostaje funkcjonalne, ale natywne paski nie zakłócają popupu ani edytora. */
.st-badge-modal,
.st-badge-detail,
.st-badge-editor__body,
.st-badge-editor__collection {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.st-badge-modal::-webkit-scrollbar,
.st-badge-detail::-webkit-scrollbar,
.st-badge-editor__body::-webkit-scrollbar,
.st-badge-editor__collection::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.st-badge-detail {
    overflow-x: hidden;
    overflow-y: auto;
}

.st-badge-editor__collection {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* UI-001a9 - Znaki Splotu: jedna warstwa ikony + globalna ramka progu.
   Dla rodzin Osiągnięć/Mistrzostw obie maski przyjmują identyczny kolor rzadkości. */
.st-badge-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 88%;
    height: 88%;
    flex: 0 0 auto;
    line-height: 1;
    pointer-events: none;
}
.st-badge-visual > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.38));
}
.st-badge-visual.is-tiered {
    color: var(--st-badge-rarity-color, #d9dce7);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--st-badge-rarity-glow, #d9dce7) 58%, transparent));
}
.st-badge-visual__icon-mask,
.st-badge-visual__frame-mask {
    position: absolute;
    display: block;
    background: var(--st-badge-rarity-color, #d9dce7);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.st-badge-visual__icon-mask {
    inset: 13%;
    -webkit-mask-image: var(--st-badge-icon-mask);
    mask-image: var(--st-badge-icon-mask);
}
.st-badge-visual__frame-mask {
    inset: 0;
    -webkit-mask-image: var(--st-badge-frame-mask);
    mask-image: var(--st-badge-frame-mask);
}
.st-badge-visual__fallback {
    position: relative;
    z-index: 1;
    color: var(--st-badge-rarity-color, #d9dce7);
    font-size: 42%;
    line-height: 1;
}
.st-badge-visual.has-frame .st-badge-visual__icon-mask { inset: 19%; }
.st-badge-visual.is-detail { width: 92%; height: 92%; }
.st-badge-visual.is-detail .st-badge-visual__fallback { font-size: 48%; }
.st-badge-editor__slot .st-badge-visual { width: 92%; height: 92%; }
.st-badge-editor__badge-icon .st-badge-visual { width: 44px; height: 44px; }
.st-badge-editor__badge-icon .st-badge-visual__fallback { font-size: 18px; }


/* UI-001a9h1 - Full-frame badge rendering.
   Gdy Znak ma globalną ramkę III/V/VII/X, wgrana ramka staje się jedyną
   oprawą całego pola. Systemowy border/background nie tworzy drugiej ramki. */
.st-badge-slot.has-tier-frame {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}
.st-badge-slot.has-tier-frame .st-badge-visual {
    width: 100%;
    height: 100%;
}
button.st-badge-slot.has-tier-frame:hover,
button.st-badge-slot.has-tier-frame:focus-visible {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.34) !important;
}
button.st-badge-slot.has-tier-frame:focus-visible {
    outline: 2px solid rgba(159,195,255,.52);
    outline-offset: 2px;
}

.st-badge-detail__icon.has-tier-frame {
    border-color: transparent !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    overflow: visible;
}
.st-badge-detail__icon.has-tier-frame .st-badge-visual {
    width: 100%;
    height: 100%;
}

.st-badge-editor__slot.has-tier-frame {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none;
    overflow: visible;
}
.st-badge-editor__slot.has-tier-frame .st-badge-visual {
    width: 100%;
    height: 100%;
}
.st-badge-editor__slot.has-tier-frame.is-selected {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none;
}

/* UI-CSS-001d - selected full-frame editor slot.
   Tier III/V/VII/X frames own the full slot edge, so selection must not
   compete with their frame. A small canonical check marker communicates
   the selected editor slot without adding another border around the asset. */
.st-badge-editor__slot.has-tier-frame.is-selected::after {
    content: '✓';
    inset: auto;
    top: -5px;
    left: -5px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    z-index: 6;
    border: 1px solid rgba(119, 170, 255, .72);
    border-radius: 999px;
    background: #15233d;
    color: #c6e1ff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .46), 0 0 12px rgba(119, 170, 255, .24);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}