/* ═══════════════════════════════════════════════
   PoeEnhancer — interactive app demo
   A replica of the desktop client's window, using the
   client's own colours, metrics and typography.
   ═══════════════════════════════════════════════ */

.pe-demo {
    --pe-window: #1E1E22;
    --pe-chrome: #252528;
    --pe-group: #222226;
    --pe-row: #26262A;
    --pe-row-applied: #282D2A;
    --pe-well: #18181C;
    --pe-thumb-well: #1A1A1E;
    --pe-raised: #333338;
    --pe-raised-hover: #3D3D42;
    --pe-subtab-active: #2A2A2E;

    --pe-border: #2A2A2E;
    --pe-border-card: #2E2E33;
    --pe-border-applied: #3D5C3A;
    --pe-border-well: #303038;
    --pe-border-outline: #444;

    --pe-gold: #C8AD7F;
    --pe-text: #E0E0E0;
    --pe-text-strong: #C8C8C8;
    --pe-text-dim: #999;
    --pe-text-muted: #888;
    --pe-text-faint: #666;
    --pe-text-fainter: #555;
    --pe-text-ghost: #444;

    --pe-width: 860px;
    --pe-height: 600px;
}

/* ─── Section shell ─── */

.pe-demo-stage {
    display: flex;
    justify-content: center;
    /* Sits close under the notice: the two read as one block. */
    margin-top: 1.25rem;
}

.pe-demo-scaler {
    transform: scale(var(--pe-scale, 1));
    transform-origin: top center;
}

.pe-window {
    /* The client inherits the Windows shell font; matching it is what makes
       the replica read as a desktop app rather than as part of the page. */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    width: var(--pe-width);
    height: var(--pe-height);
    display: flex;
    flex-direction: column;
    background: var(--pe-window);
    border: 1px solid var(--pe-border);
    border-radius: 4px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    color: var(--pe-text);
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
    user-select: none;
}

/* Wrapped in :where() so the reset carries no specificity of its own — a plain
   `.pe-window button` would outrank every single-class rule below and strip the
   buttons of their background, border and size. */
:where(.pe-window) :where(button) {
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

/* ─── Title bar ─── */

.pe-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 16px;
    background: var(--pe-chrome);
}

.pe-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.pe-brand-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
}

.pe-brand-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--pe-text);
}

.pe-brand-version {
    font-size: 10px;
    color: var(--pe-text-fainter);
    margin-top: 4px;
}

.pe-brand-caret {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
    color: var(--pe-text-fainter);
    border-radius: 4px;
}

.pe-brand-caret:hover,
.pe-brand-caret[aria-expanded='true'] { color: var(--pe-gold); }

/* Game switcher popup */

.pe-gamemenu {
    position: absolute;
    top: 30px;
    left: -6px;
    z-index: 5;
    min-width: 230px;
    padding: 6px;
    background: var(--pe-window);
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.pe-gamemenu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    text-align: left;
}

.pe-gamemenu-row:hover { background: var(--pe-subtab-active); }
.pe-gamemenu-row img { width: 28px; height: 28px; border-radius: 6px; }
.pe-gamemenu-title { font-size: 12px; font-weight: 600; color: var(--pe-text); }
.pe-gamemenu-sub { font-size: 10px; color: var(--pe-text-faint); }
.pe-gamemenu-state { margin-left: auto; font-size: 11px; color: var(--pe-text-fainter); }
.pe-gamemenu-state.is-pick { color: var(--pe-gold); }

/* Tabs + window buttons */

.pe-tabs {
    display: flex;
    gap: 4px;
    margin: 0 auto;
}

.pe-tab {
    height: 28px;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--pe-text-faint);
}

.pe-tab:hover { background: rgba(255, 255, 255, 0.08); }

.pe-tab.is-active {
    background: var(--pe-raised);
    color: var(--pe-text);
}

.pe-titlebar-actions { display: flex; align-items: center; gap: 2px; }

.pe-chrome-btn {
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--pe-text-muted);
}

.pe-chrome-btn:hover { background: rgba(255, 255, 255, 0.08); }
.pe-chrome-btn.is-glyph { width: 32px; padding: 0; font-size: 13px; }

/* ─── Content area ─── */

.pe-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pe-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.pe-scroll::-webkit-scrollbar { width: 8px; }
.pe-scroll::-webkit-scrollbar-track { background: transparent; }

.pe-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.pe-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.33); }

/* ─── MTX: sub-tabs and search ─── */

.pe-subtabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 10px 20px 0;
}

.pe-subtab {
    height: 26px;
    padding: 0 12px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--pe-text-fainter);
}

.pe-subtab:hover { background: rgba(255, 255, 255, 0.06); }

.pe-subtab.is-active {
    background: var(--pe-subtab-active);
    color: var(--pe-text-strong);
}

/* The favourites shelf is not a category, so it keeps a gold tint at all times. */
.pe-subtab-fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
    border: 1px solid #3D381F;
    color: #7A6A4E;
}

.pe-subtab-fav:hover { background: rgba(200, 173, 127, 0.08); }

.pe-subtab-fav.is-active {
    background: #2D2A1F;
    border-color: #5A4729;
    color: var(--pe-gold);
}

.pe-subtab-star { font-size: 11px; }

.pe-subtab-count {
    padding: 1px 6px;
    border-radius: 8px;
    background: #3D381F;
    font-size: 9px;
    font-weight: 500;
    color: var(--pe-gold);
}

/* ─── Apply favourites ─── */

.pe-btn-favourites {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 20px 0;
    height: 34px;
    border-radius: 4px;
    background: var(--pe-gold);
    font-size: 12px;
    font-weight: 700;
    color: #1E1E22;
}

.pe-btn-favourites:hover { background: #D4BD93; }
.pe-btn-favourites-star { font-size: 13px; }

.pe-searchrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px 20px 4px;
}

.pe-search {
    padding: 8px 12px;
    background: var(--pe-chrome);
    border: none;
    border-radius: 5px;
    font-family: inherit;
    font-size: 13px;
    color: var(--pe-text-strong);
}

.pe-search::placeholder { color: var(--pe-text-fainter); }
.pe-search:focus { outline: none; }

/* The demo ships a slice of the catalog and says so in every category. */
.pe-preview-note {
    margin: 4px 20px 0;
    padding: 5px 10px;
    background: #2D2A1F;
    border: 1px solid #3D381F;
    border-radius: 4px;
    font-size: 10px;
    color: var(--pe-gold);
    text-align: center;
}

.pe-list { padding: 4px 20px 12px; }

/* ─── MTX: group card ─── */

.pe-group {
    margin-top: 4px;
    background: var(--pe-group);
    border: 1px solid var(--pe-border-card);
    border-radius: 6px;
    overflow: hidden;
}

.pe-group.is-flat { background: transparent; border-color: transparent; }

.pe-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px 8px 10px;
    text-align: left;
}

.pe-group-head:hover { background: rgba(255, 255, 255, 0.03); }
.pe-group-title { flex: 1 1 auto; min-width: 0; }

.pe-group-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--pe-text-strong);
}

.pe-group-count {
    margin-top: 2px;
    font-size: 11px;
    color: var(--pe-text-fainter);
}

.pe-group-thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: var(--pe-thumb-well);
    border-radius: 6px;
    overflow: hidden;
}

.pe-group-thumb img { width: 42px; height: 42px; object-fit: contain; }
.pe-group-arrow { font-size: 11px; color: var(--pe-text-fainter); }
.pe-group-body { padding: 0 8px 8px; }
.pe-group.is-flat > .pe-group-body { padding: 0; }

/* ─── MTX: item card ─── */

.pe-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 80px;
    margin: 3px;
    padding: 10px 14px;
    background: var(--pe-row);
    border: 1px solid var(--pe-border-card);
    border-radius: 6px;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.pe-item.is-applied {
    background: var(--pe-row-applied);
    border-color: var(--pe-border-applied);
}

/* Only one skin per group can be worn; the rivals dim exactly as in the client. */
.pe-item.is-blocked { opacity: 0.4; }

.pe-item-main { flex: 1 1 auto; min-width: 0; }

.pe-item-titlerow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pe-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--pe-gold);
}

.pe-badge {
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--pe-subtab-active);
    font-size: 9px;
    font-weight: 500;
    color: var(--pe-text-faint);
}

.pe-item-active {
    margin-top: 2px;
    font-size: 10px;
    color: var(--pe-gold);
}

/* Slot holds several favourites: which one is worn */
.pe-pick {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 0;
    font-size: 10px;
    color: var(--pe-text-fainter);
}

.pe-pick:hover { color: var(--pe-text-dim); }
.pe-pick.is-on { color: var(--pe-gold); }
.pe-pick-dot { font-size: 11px; }

.pe-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.pe-btn-raised,
.pe-btn-outlined {
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 10px;
}

.pe-btn-raised {
    background: var(--pe-raised);
    color: var(--pe-text-strong);
}

.pe-btn-raised:hover { background: var(--pe-raised-hover); }

.pe-btn-outlined {
    border: 1px solid var(--pe-border-outline);
    color: var(--pe-text-dim);
}

.pe-btn-outlined:hover { background: rgba(255, 255, 255, 0.08); }

.pe-star {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    font-size: 14px;
    color: #5C5C62;
}

.pe-star:hover { background: rgba(255, 255, 255, 0.08); }
.pe-star.is-on { color: var(--pe-gold); }

.pe-item-image {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    padding: 5px;
    background: var(--pe-well);
    border: 1px solid var(--pe-border-well);
    border-radius: 6px;
}

.pe-item-image img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.pe-more {
    margin: 3px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px dashed var(--pe-border-card);
    font-size: 11px;
    color: var(--pe-text-fainter);
    text-align: center;
}

.pe-empty {
    padding: 40px 20px;
    text-align: center;
    font-size: 12px;
    color: var(--pe-text-fainter);
}

/* ─── General tab ─── */

.pe-page { padding: 10px 20px 4px; }

.pe-sectionhead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.pe-sectionhead-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--pe-text-faint);
}

.pe-sectionhead-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--pe-border);
}

.pe-sectionhead-count { font-size: 11px; color: var(--pe-text-fainter); }
.pe-section { margin-bottom: 18px; }

.pe-hint {
    font-size: 10px;
    color: var(--pe-text-fainter);
    margin-bottom: 6px;
}

.pe-link {
    font-size: 10px;
    color: var(--pe-gold);
    text-decoration: underline;
    display: inline-block;
    margin-bottom: 8px;
}

.pe-inventory-box {
    padding: 10px 12px;
    background: var(--pe-chrome);
    border-radius: 4px;
    font-size: 12px;
    color: var(--pe-text-fainter);
    margin-bottom: 8px;
}

.pe-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
    padding: 6px 10px;
    background: var(--pe-row);
    border-radius: 4px;
}

.pe-row-main { flex: 1 1 auto; min-width: 0; }
.pe-row-name { font-size: 12px; color: var(--pe-text-strong); }
.pe-row-sub { font-size: 10px; color: var(--pe-text-fainter); }
.pe-row-state { font-size: 11px; color: var(--pe-gold); }

/* ─── Optimizer tab ─── */

.pe-optimizer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 0;
}

.pe-btn-apply {
    height: 36px;
    padding: 0 28px;
    border-radius: 4px;
    background: var(--pe-raised);
    font-size: 13px;
    font-weight: 600;
    color: var(--pe-text-strong);
}

.pe-btn-apply:hover { background: var(--pe-raised-hover); }
.pe-optimizer-head-spacer { flex: 1 1 auto; }

.pe-btn-flat {
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 11px;
    color: #777;
}

.pe-btn-flat:hover { background: rgba(255, 255, 255, 0.08); }

.pe-patch {
    margin: 2px 0;
    padding: 8px 12px;
    background: var(--pe-row);
    border-radius: 4px;
}

.pe-patch-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
}

.pe-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border: 1px solid #5A5A62;
    border-radius: 3px;
    font-size: 11px;
    color: transparent;
}

.pe-patch.is-on .pe-check {
    background: var(--pe-gold);
    border-color: var(--pe-gold);
    color: #1E1E22;
}

.pe-patch-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--pe-text-strong);
}

.pe-patch-desc {
    margin-top: 2px;
    font-size: 11px;
    color: var(--pe-text-faint);
}

.pe-slider-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0 2px 34px;
}

.pe-slider { flex: 1 1 auto; accent-color: var(--pe-text-muted); }

.pe-slider-value {
    min-width: 30px;
    font-size: 12px;
    font-weight: 600;
    color: #AAA;
}

/* ─── Status bar ─── */

.pe-statusbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 8px 16px;
    background: var(--pe-chrome);
}

.pe-status-text {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    color: var(--pe-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-status-actions { display: flex; gap: 8px; }

.pe-btn-status {
    height: 28px;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 11px;
}

.pe-status-path {
    flex: 1 1 0;
    min-width: 0;
    font-size: 10px;
    color: var(--pe-text-ghost);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Toast ─── */

.pe-toast {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: #333;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
    font-size: 13px;
    color: var(--pe-text-strong);
    pointer-events: none;
}

.pe-window { position: relative; }

/* ─── Caption under the window ─── */

.pe-caption {
    margin: 2rem auto 0;
    max-width: 760px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Sits above the window so it is read before anything gets clicked. */
.pe-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 3rem auto 0;
    padding: 0.7rem 1.1rem;
    background: var(--accent-dim);
    border: 1px solid rgba(200, 173, 127, 0.35);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* Only worth saying to someone holding a phone; on a desktop they are already
   in the right place. Breakpoint matches the one where the window reflows. */
.pe-notice-desktop { display: none; }

@media (max-width: 720px) {
    .pe-notice-desktop { display: inline; }
}

.pe-notice-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bg-deep);
}

@media (max-width: 640px) {
    .pe-notice {
        margin-top: 2rem;
        font-size: 0.8rem;
        text-align: left;
    }

    .pe-demo-stage { margin-top: 1rem; }
}

/* ═══════════════════════════════════════════════
   Narrow screens

   The window is a desktop replica, so scaling it down to phone width turns its
   10px labels into noise. Below this breakpoint it stops being scaled and
   reflows instead: full width, taller than wide, chrome that only makes sense
   with a mouse removed, and the smallest type nudged up to stay readable.
   Kept in step with FLUID_BELOW in demo.js.
   ═══════════════════════════════════════════════ */

@media (max-width: 720px) {
    .pe-demo-scaler { width: 100%; }

    .pe-window {
        width: 100%;
        height: min(84vh, 700px);
        min-height: 440px;
    }

    /* Title bar: keep the brand and the three tabs, drop the rest */
    .pe-titlebar { padding: 10px 12px; gap: 6px; }
    .pe-titlebar-actions,
    .pe-brand-version { display: none; }
    .pe-brand-name { font-size: 14px; }
    .pe-tab { padding: 0 12px; font-size: 12px; }

    /* Categories keep wrapping, the way the client's own tab strip does — a
       single scrolling row would cut a name in half and read as broken. */
    .pe-subtabs {
        justify-content: flex-start;
        gap: 5px;
        padding: 10px 12px 0;
    }

    .pe-subtab {
        height: 27px;
        padding: 0 9px;
        font-size: 12px;
    }

    /* The two fields stay side by side: the wrapped tab strip already costs
       four rows, and stacking them too would leave barely a card of list. */
    .pe-searchrow {
        gap: 6px;
        padding: 8px 12px 4px;
    }

    .pe-search { padding: 7px 10px; font-size: 12px; }

    .pe-preview-note,
    .pe-btn-favourites { margin-left: 12px; margin-right: 12px; }

    .pe-list { padding: 4px 12px 12px; }
    .pe-page { padding: 10px 12px 4px; }
    .pe-optimizer-head { padding: 10px 12px 0; }

    .pe-item { gap: 10px; padding: 10px 12px; }
    .pe-item-name { font-size: 13px; }
    .pe-item-image { width: 62px; height: 62px; }
    .pe-item-image img { width: 52px; height: 52px; }

    .pe-btn-raised,
    .pe-btn-outlined { height: 26px; font-size: 11px; }
    .pe-star { width: 26px; height: 26px; }
    .pe-pick { font-size: 11px; }

    .pe-group-head { padding: 10px 12px; }
    .pe-group-thumb { width: 40px; height: 40px; }
    .pe-group-thumb img { width: 36px; height: 36px; }

    /* Status bar: the path and the repair buttons need a desktop to be useful */
    .pe-statusbar { padding: 8px 12px; }
    .pe-status-actions,
    .pe-status-path { display: none; }

    .pe-patch-name { font-size: 12px; }
    .pe-slider-row { margin-left: 28px; }
}