/* ============================================
   ERA ITEMS - the one item card, the paper doll, the bag and the item sheet
   Descent Phase B1 Task 18 (design §10.1, §10.2, §10.3; PB-47, PB-48, PB-50, PB-69). Prefix ei-; test ids data-testid="ei-*".
   Every text colour below reads at 4.5:1 or more on both card backgrounds (#2f3349 on the site, #24242f in the dungeon), and the card
   paints that background itself: never a translucent surface behind its text, where five of the seven rarities would fail.
   ============================================ */

:root {
    /* the rarity palette (§10.2), the Resonant star; the site's dark theme only, as the site */
    --ei-r0: #c4c4d0;   /* Common      7.19 / 8.88 */
    --ei-r1: #5aa8ff;   /* Enchanted   5.02 / 6.20 */
    --ei-r2: #ffe066;   /* Rare        9.53 / 11.77 */
    --ei-r3: #c98bff;   /* Epic (Era Zero only) 5.10 / 6.30 */
    --ei-r4: #ff8a1a;   /* Legendary   5.27 / 6.51 */
    --ei-r5: #d9a744;   /* Relic       5.66 / 6.99 */
    --ei-r6: #ff7a8e;   /* Era-Forged  4.98 / 6.16 */
    --ei-star: #ffd34d; /* Resonant    8.68 / 10.73 */

    /* Task 19 fix round 1 (T19-8): an item's light (EraItems.light: the dungeon's drops and the chest reveal), as RGB triplets for
       rgb(var(--ei-light-rN) / alpha). Light, not text: brighter than the text tokens. */
    --ei-light-r4: 255 138 26;   /* Legendary: an orange beam */
    --ei-light-r5: 255 211 77;   /* Relic: a gold pillar */
    --ei-light-r6: 255 42 74;    /* Era-Forged: a crimson column after its white flash */

    /* the card's own opaque surface on the site (Vuexy dark card) */
    --ei-card-bg: #2f3349;

    /* text on the card (ratios on #2f3349 / #24242f) */
    --ei-text: #ececf3;     /* 10.56 / 13.05 */
    --ei-muted: #b4b4c6;    /* 6.08 / 7.52 */
    --ei-note: #a9a9bd;     /* 5.38 / 6.65 */
    --ei-up: #6fdc8c;       /* 7.27 / 8.98 */
    --ei-down: #ff8f8f;     /* 5.67 / 7.00 */
    --ei-unmet: #ff8f8f;    /* 5.67 / 7.00 */
    --ei-chip-bg: #3a3f58;
    --ei-chip-text: #d6d6e2; /* 7.17 on the chip */
    --ei-hairline: rgba(255, 255, 255, 0.09);

    /* the doll, the bag and the sheet (opaque surfaces) */
    --ei-tile-bg: #1d1d27;
    --ei-tile-edge: #3a3a48;
    --ei-tile-label: #b4b4c6; /* 8.18 on the tile */
    --ei-panel-bg: #14141a;
    --ei-sheet-bg: #1b1b24;
    --ei-focus: #ffd34d;
    --ei-primary: #2563eb;    /* white on it: 5.17 */
    --ei-danger-text: #ffb4b4;
    --ei-danger-bg: #2a1d22;
    --ei-danger-btn: #b42318;  /* white on it: 6.57 */
    --ei-danger-edge: #4a2a33;
    --ei-btn-bg: #262633;
    --ei-btn-edge: #3a3a48;
    --ei-btn-hover: #30303f;
    --ei-primary-hover: #1d4fd8;
    --ei-on-accent: #ffffff;
    --ei-socket: #9a9eb6;
    --ei-filled-bg: #23232f;  /* tile label 7.60 on it */
    --ei-badge-bg: #101016;
    --ei-panel-edge: #2a2a35;
    --ei-grab: #4a4a5a;
    --ei-reason-bg: #2a2330;  /* the unmet red 6.93 on it */
    --ei-notice-bg: #1f2a3d;  /* text 12.26 on it */
    --ei-notice-edge: #34507a;
    --ei-radius-card: 14px;
    --ei-slot: 64px;
    --ei-gap: 10px;
    --ei-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* the dungeon's lightest surface: the card's background inside the dungeon view */
#view-dungeon,
.dg-host {
    --ei-card-bg: #24242f;
}
/* ---- rarity colours (text) and rarity edges (tiles; decorative, the word is always printed) ---- */

.ei-r0 { color: var(--ei-r0); }
.ei-r1 { color: var(--ei-r1); }
.ei-r2 { color: var(--ei-r2); }
.ei-r3 { color: var(--ei-r3); }
.ei-r4 { color: var(--ei-r4); }
.ei-r5 { color: var(--ei-r5); }
.ei-r6 { color: var(--ei-r6); }

.ei-b0 { --ei-edge: var(--ei-r0); }
.ei-b1 { --ei-edge: var(--ei-r1); }
.ei-b2 { --ei-edge: var(--ei-r2); }
.ei-b3 { --ei-edge: var(--ei-r3); }
.ei-b4 { --ei-edge: var(--ei-r4); }
.ei-b5 { --ei-edge: var(--ei-r5); }
.ei-b6 { --ei-edge: var(--ei-r6); }

/* ---- the card ---- */

.ei-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ei-card-bg);
    color: var(--ei-text);
    border: 1px solid var(--ei-hairline);
    border-radius: var(--ei-radius-card);
    padding: 16px 16px 14px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* the rarity's accent along the top edge (a static line; a Legendary or better sweeps it once, motion allowing) */
.ei-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--ei-accent, transparent);
}

.ei-card[data-rarity="0"] { --ei-accent: rgba(196, 196, 208, 0.45); }
.ei-card[data-rarity="1"] { --ei-accent: var(--ei-r1); }
.ei-card[data-rarity="2"] { --ei-accent: var(--ei-r2); }
.ei-card[data-rarity="3"] { --ei-accent: var(--ei-r3); }
.ei-card[data-rarity="4"] { --ei-accent: var(--ei-r4); }
.ei-card[data-rarity="5"] { --ei-accent: var(--ei-r5); }
.ei-card[data-rarity="6"] { --ei-accent: var(--ei-r6); border-color: rgba(255, 122, 142, 0.55); }   /* the static ring */

.ei-head { margin: 0; }

.ei-title {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.ei-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ei-muted);
}

.ei-star {
    color: var(--ei-star);
    margin-right: 4px;
}

.ei-subtitle .ei-star { margin-right: 0; }

.ei-level {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ei-muted);
}

.ei-unmet {
    color: var(--ei-unmet);
    font-weight: 600;
}

.ei-lines {
    list-style: none;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--ei-hairline);
    display: grid;
    gap: 5px;
}

.ei-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
}

.ei-k-base { font-weight: 600; }
.ei-k-implicit { color: var(--ei-muted); }
.ei-k-implicit + .ei-k-rolled,
.ei-k-base + .ei-k-rolled,
.ei-k-implicit + .ei-k-fixed,
.ei-k-base + .ei-k-fixed {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--ei-hairline);
}

.ei-k-power,
.ei-k-relic {
    display: block;
    margin-top: 6px;
    line-height: 1.4;
}

.ei-k-deadPower,
.era-line-dead {
    display: block;
    margin-top: 2px;
    color: var(--ei-note);
    font-style: italic;
    line-height: 1.4;
}

.ei-k-note,
.ei-k-legacy {
    color: var(--ei-note);
    font-style: italic;
}

.ei-k-legacy { font-style: normal; }

.ei-tier {
    flex: none;
    min-width: 26px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--ei-chip-bg);
    color: var(--ei-chip-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ei-socket {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ei-socket);   /* 4.70:1 on #2f3349: a non-text mark needs 3:1 */
    align-self: center;
}

.ei-k-socket { color: var(--ei-muted); }

/* ---- B2 Task 16 (§2.8, review-task-7 M-4): a filled socket holds its Glyph, a gem in its kind's colour (the dungeon's and the wallet's rune
   colours, socketables.json order). A mark, never the only signal: the server's line beside it names the Glyph and its effect, and reads
   as a stat line. ---- */
.ei-socket--glyph {
    position: relative;
    border-color: var(--ei-glyph);
    box-shadow: 0 0 5px var(--ei-glyph);
}

.ei-socket--glyph::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 1px;
    background: var(--ei-glyph);
    transform: rotate(45deg) scale(0.62);
}

.ei-glyph-k0 { --ei-glyph: #ff7a3d; }   /* ember */
.ei-glyph-k1 { --ei-glyph: #9fe3ff; }   /* rime */
.ei-glyph-k2 { --ei-glyph: #ffd84d; }   /* tempest */
.ei-glyph-k3 { --ei-glyph: #6fd35a; }   /* thorn */
.ei-glyph-k4 { --ei-glyph: #9a6bff; }   /* umbral: 3.5:1 on #2f3349, the darkest, still over a non-text mark's 3:1 */
.ei-glyph-k5 { --ei-glyph: #b9bec9; }   /* iron */
.ei-glyph-k6 { --ei-glyph: #f2f0ff; }   /* aether */
.ei-glyph-unknown { --ei-glyph: var(--ei-socket); }

.ei-k-socket.is-glyph { color: var(--ei-text); }

/* B2 Task 16 (PB2-40): a crafted roll's counts, in words ("Enchants: 3 · Imprints: 1") */
.ei-crafted {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--ei-muted);
}

.ei-card > .ei-icon-frame ~ .ei-crafted { clear: both; }

.ei-sell {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--ei-muted);
}

.ei-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- AV-5 (C-AV7): the item's icon in its rarity frame. The frame is CSS on the --ei-r* tokens and decorative (the rarity word stays
   printed: colour never alone); the icon's alt is empty (the title names the item); a Legendary's power emblem sits on its corner.
   On the card it stands at the head's left (a dialog's close button keeps the top-right corner), the title, subtitle and levels beside
   it, and the lines start under it. ---- */

.ei-icon-frame { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: #15151d; border: 2px solid var(--ei-frame, var(--ei-r0)); }
.ei-icon-frame.ei-r0 { --ei-frame: var(--ei-r0); }
.ei-icon-frame.ei-r1 { --ei-frame: var(--ei-r1); }
.ei-icon-frame.ei-r2 { --ei-frame: var(--ei-r2); }
.ei-icon-frame.ei-r3 { --ei-frame: var(--ei-r3); }
.ei-icon-frame.ei-r4 { --ei-frame: var(--ei-r4); }
.ei-icon-frame.ei-r5 { --ei-frame: var(--ei-r5); }
.ei-icon-frame.ei-r6 { --ei-frame: var(--ei-r6); }
.ei-icon { width: 56px; height: 56px; }
.ei-emblem { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px #15151d; }
.ei-card > .ei-icon-frame { float: left; margin: 2px 14px 6px 0; }
/* the head and the level line keep their own column beside the icon (a wrapped requirement never runs under it) */
.ei-card > .ei-icon-frame ~ .ei-head,
.ei-card > .ei-icon-frame ~ .ei-level { display: flow-root; }
.ei-card > .ei-icon-frame ~ .ei-lines,
.ei-card > .ei-icon-frame ~ .ei-sell { clear: both; }
/* AVR-14: a failed image is hidden (EraItems.onImageError); the frame's own display must not bring it back */
.ei-icon-frame[hidden],
.ei-icon[hidden],
.ei-emblem[hidden] { display: none; }

@media (max-width: 760px) {
    .ei-icon-frame { width: 48px; height: 48px; }
    .ei-icon { width: 42px; height: 42px; }
    .ei-emblem { width: 18px; height: 18px; right: -5px; bottom: -5px; }
}

/* ---- motion: the beam (Legendary, Era-Forged) and the pillar (Relic), once, only when motion is welcome ---- */

@keyframes ei-beam {
    from { background-position: -120% 0; }
    to { background-position: 220% 0; }
}

@keyframes ei-pillar {
    0% { box-shadow: inset 3px 0 0 var(--ei-r5), 0 10px 30px rgba(0, 0, 0, 0.35); }
    50% { box-shadow: inset 3px 0 0 var(--ei-r5), 0 0 34px rgba(217, 167, 68, 0.45); }
    100% { box-shadow: inset 3px 0 0 var(--ei-r5), 0 10px 30px rgba(0, 0, 0, 0.35); }
}

@media (prefers-reduced-motion: no-preference) {
    .ei-card.ei-anim::before {
        background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
        background-color: var(--ei-accent);
        background-size: 50% 100%;
        background-repeat: no-repeat;
        animation: ei-beam 1.4s var(--ei-ease) 0.1s 1 both;
    }

    .ei-card.ei-anim[data-rarity="5"] {
        animation: ei-pillar 1.8s ease-out 1;
    }
}

/* the dungeon's own setting wins over the OS (and the site's "Reduce motion") */
.dg-reduced .ei-card.ei-anim::before,
.dg-reduced .ei-card.ei-anim {
    animation: none !important;
}

/* ---- buttons (every target at least 44 px) ---- */

.ei-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
    border: 1px solid var(--ei-btn-edge);
    border-radius: 12px;
    background: var(--ei-btn-bg);
    color: var(--ei-text);
    font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ei-btn:hover:not(:disabled) { background: var(--ei-btn-hover); }
.ei-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ei-btn-primary {
    background: var(--ei-primary);
    border-color: var(--ei-primary);
    color: var(--ei-on-accent);
}

.ei-btn-primary:hover:not(:disabled) { background: var(--ei-primary-hover); }

.ei-btn-danger {
    background: var(--ei-danger-btn);
    border-color: var(--ei-danger-btn);
    color: var(--ei-on-accent);
}

.ei-btn-quiet-danger {
    background: var(--ei-danger-bg);
    border-color: var(--ei-danger-edge);
    color: var(--ei-danger-text);
}

.ei-btn-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--ei-r1);
    padding: 0 10px;
}

.ei-btn-icon {
    width: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 16px;
}

.ei-btn:focus { outline: none; }
.ei-btn:focus-visible,
.ei-slot:focus-visible,
.ei-bag-item:focus-visible,
.ei-link:focus-visible {
    outline: 3px solid var(--ei-focus);
    outline-offset: 2px;
}

/* the dialog takes focus itself when it opens (its title is read); its controls show the ring, not the whole panel */
.ei-sheet:focus,
.ei-sheet:focus-visible { outline: none; }

/* ---- the inventory tab: the doll and the bag ---- */

.ei-inv {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.ei-panel {
    background: var(--ei-panel-bg);
    border: 1px solid var(--ei-panel-edge);
    border-radius: 16px;
    padding: 16px;
    min-width: 0;
}

.ei-panel-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ei-muted);
}

.ei-doll {
    display: grid;
    grid-template-columns: repeat(5, var(--ei-slot));
    gap: var(--ei-gap);
    justify-content: center;
}

.ei-slot,
.ei-bag-item {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--ei-slot);
    height: var(--ei-slot);
    padding: 0;
    margin: 0;
    background: var(--ei-tile-bg);
    border: 2px solid var(--ei-edge, var(--ei-tile-edge));
    border-radius: 12px;
    color: var(--ei-text);
    cursor: pointer;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ei-slot {
    min-width: 64px;
    min-height: 64px;
}

.ei-bag-item {
    min-width: 56px;
    min-height: 56px;
}

.ei-glyph {
    font-size: 26px;
    line-height: 1;
    margin-top: -8px;
}

.ei-bag-item .ei-glyph { margin-top: 0; }

.ei-empty .ei-glyph { opacity: 0.32; filter: grayscale(1); }
.ei-filled { background: var(--ei-filled-bg); }

.ei-slot-name {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 5px;
    font-size: 11px;
    line-height: 1;
    color: var(--ei-tile-label);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ei-name-short { display: none; }

.ei-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 2px 4px;
    border-radius: 6px;
    background: var(--ei-badge-bg);
    color: var(--ei-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ei-badge-ez {
    top: auto;
    bottom: 3px;
    left: 3px;
    right: 3px;
    left: 2px;
    right: 2px;
    padding: 2px 1px;
    text-align: center;
    color: var(--ei-r3);
    font-size: 11px;
    white-space: nowrap;
}

/* T18-3: the rarity's shape in the tile's top-left corner (colour never alone); 6.2:1 or more on both tile surfaces */
.ei-mark {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.ei-lock {
    position: absolute;
    left: 3px;
    bottom: 3px;
    padding: 2px 4px;
    border-radius: 6px;
    background: var(--ei-badge-bg);
    color: var(--ei-unmet);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.ei-locked .ei-glyph,
.ei-minting .ei-glyph { opacity: 0.45; }

.ei-minting::after {
    content: "Minting";
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    font-size: 11px;
    text-align: center;
    color: var(--ei-r1);
}

.ei-selected {
    border-color: var(--ei-focus);
    box-shadow: 0 0 0 3px rgba(255, 211, 77, 0.25);
}

@media (hover: hover) and (pointer: fine) {
    .ei-slot:hover,
    .ei-bag-item:hover {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
    }
}

.ei-hint {
    margin: 12px 0 0;
    max-width: 360px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ei-muted);
}

.ei-hint-touch { display: none; }

@media (hover: none), (pointer: coarse) {
    .ei-hint-fine { display: none; }
    .ei-hint-touch { display: inline; }
}

.ei-bag-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ei-bag-count {
    font-size: 13px;
    color: var(--ei-muted);
    font-variant-numeric: tabular-nums;
}

.ei-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    margin: 0 0 12px;
    padding: 4px 4px 4px 12px;
    border-radius: 12px;
    background: var(--ei-tile-bg);
    font-size: 14px;
    color: var(--ei-text);
}

.ei-filter[hidden] { display: none; }

.ei-filter-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ei-filter-actions {
    display: inline-flex;
    gap: 2px;
}

.ei-bag {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--ei-slot));
    gap: var(--ei-gap);
}

.ei-bag-cell { margin: 0; }

.ei-bag-empty[hidden] { display: none; }

.ei-bag-empty {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ei-muted);
}

/* ---- drag (desktop): valid slots glow, invalid ones dim, the reason is in the live region ---- */

.ei-dragging { opacity: 0.4; }

.ei-slot.ei-drop-ok {
    border-color: var(--ei-up);
    box-shadow: 0 0 0 3px rgba(111, 220, 140, 0.35), 0 0 18px rgba(111, 220, 140, 0.3);
}

.ei-slot.ei-drop-no {
    opacity: 0.35;
    filter: grayscale(0.7);
}

.ei-slot.ei-drop-ok.ei-drop-hover {
    box-shadow: 0 0 0 4px rgba(111, 220, 140, 0.6), 0 0 24px rgba(111, 220, 140, 0.45);
}

.ei-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 260;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    border: 2px solid var(--ei-edge, var(--ei-tile-edge));
    background: var(--ei-filled-bg);
    font-size: 28px;
    pointer-events: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    will-change: transform;
}

/* ---- the hover card (desktop, 300 ms) and the long-press card (phones) ---- */

.ei-peek {
    position: fixed;
    z-index: 250;
    width: 320px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: hidden;
    pointer-events: auto;   /* T18-2 (WCAG 1.4.13): the pointer can move onto the card to read it; it stays until it leaves or Esc */
    display: grid;
    gap: 8px;
    opacity: 0;
}

.ei-peek[hidden] { display: none; }
.ei-peek.ei-peek-on { opacity: 1; }

.ei-peek-compare:empty,
.ei-peek-compare[hidden] { display: none; }

.ei-peek-compare {
    background: var(--ei-card-bg);
    border: 1px solid var(--ei-hairline);
    border-radius: var(--ei-radius-card);
    padding: 12px 16px;
    color: var(--ei-text);
    font-size: 13px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
    .ei-peek { transition: opacity 0.12s ease; }
}

/* ---- compare: ▲ and ▼ with the signed number (never colour alone), then the server's summary ---- */

.ei-compare {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--ei-radius-card);
    background: var(--ei-card-bg);
    border: 1px solid var(--ei-hairline);
    color: var(--ei-text);
}

.ei-compare[hidden] { display: none; }

.ei-compare-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.ei-peek-compare .ei-compare-col + .ei-compare-col {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ei-hairline);
}

.ei-compare-head {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ei-muted);
    overflow-wrap: anywhere;
}

.ei-deltas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 14px;
}

.ei-delta { display: flex; gap: 6px; align-items: baseline; }
.ei-up { color: var(--ei-up); }
.ei-down { color: var(--ei-down); }
.ei-same { color: var(--ei-muted); }
.ei-arrow { flex: none; width: 1em; text-align: center; }

.ei-compare-summary {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--ei-hairline);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ei-compare-notice {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--ei-muted);
}

.ei-muted { margin: 0; color: var(--ei-muted); font-size: 13px; }

/* ---- the sheet: a bottom sheet on phones (240 ms slide; a fade with reduced motion), a dialog on wide screens ---- */

.ei-sheet-root {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ei-sheet-root[hidden] { display: none; }

/* while it slides or fades out, a closing sheet lets taps through to the page underneath */
.ei-sheet-root:not(.ei-open) { pointer-events: none; }

.ei-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 10, 0.62);
    opacity: 0;
    transition: opacity 240ms ease;
}

.ei-sheet-root.ei-open .ei-sheet-backdrop { opacity: 1; }

.ei-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    max-height: 88dvh;
    background: var(--ei-sheet-bg);
    color: var(--ei-text);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 240ms var(--ei-ease);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ei-sheet-root.ei-open .ei-sheet { transform: none; }

.ei-sheet-grab {
    flex: none;
    width: 36px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 3px;
    background: var(--ei-grab);
}

.ei-sheet-close {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 1;
    background: var(--ei-btn-bg);
}

.ei-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 4px;
}

.ei-sheet-card .ei-card { box-shadow: none; }
.ei-sheet-card .ei-title { padding-right: 44px; font-size: 19px; }

.ei-sheet-reason {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--ei-reason-bg);
    color: var(--ei-unmet);
    font-size: 14px;
    font-weight: 600;
}

.ei-sheet-reason[hidden] { display: none; }

.ei-confirm {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--ei-danger-bg);
    border: 1px solid var(--ei-danger-edge);
}

.ei-confirm[hidden] { display: none; }

.ei-confirm-text { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }

.ei-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ei-sheet-actions {
    flex: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));   /* Equip, Compare and Sell share one row down to 320 px */
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--ei-panel-edge);
    background: var(--ei-sheet-bg);
}

.ei-sheet-more {
    margin: 8px 0 4px;
    text-align: center;
    /* B2 Task 16 (A12): the Inventory page and the Town, side by side where they fit, one under the other where they don't */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 4px;
}

.ei-sheet-more[hidden] { display: none; }

.ei-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    color: var(--ei-r1);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* wide screens: a centred dialog */
@media (min-width: 761px) and (min-height: 501px) {
    .ei-sheet-root {
        align-items: center;
        padding: 24px;
    }

    .ei-sheet {
        max-width: 460px;
        max-height: min(88vh, 760px);
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
        transform: translateY(12px) scale(0.98);
        opacity: 0;
        transition: transform 240ms var(--ei-ease), opacity 240ms ease;
    }

    .ei-sheet-root.ei-open .ei-sheet {
        transform: none;
        opacity: 1;
    }

    .ei-sheet-grab { display: none; }
}

/* reduced motion: no slide, a fade */
@media (prefers-reduced-motion: reduce) {
    .ei-sheet,
    .ei-sheet-root.ei-open .ei-sheet {
        transform: none;
    }

    .ei-sheet {
        opacity: 0;
        transition: opacity 240ms ease;
    }

    .ei-sheet-root.ei-open .ei-sheet { opacity: 1; }

    .ei-slot,
    .ei-bag-item { transition: none; }
}

/* ---- phones: 56 px slots, a tighter gutter ---- */

@media (max-width: 760px) {
    :root {
        --ei-slot: 56px;
        --ei-gap: 8px;
    }

    .ei-slot {
        min-width: 56px;
        min-height: 56px;
    }

    .ei-glyph { font-size: 23px; margin-top: -9px; }
    .ei-slot-name { left: 0; right: 0; bottom: 4px; }   /* T18-13: 11 px, normal tracking; "Main" and "Off" on a 56 px slot */
    .ei-name-long { display: none; }
    .ei-name-short { display: inline; }
}

@media (max-width: 640px) {
    .ei-inv { grid-template-columns: minmax(0, 1fr); }
    .ei-hint { max-width: none; }
}

@media (max-width: 420px) {
    :root { --ei-gap: 6px; }

    #view-character { padding: 12px 8px; }
    .ei-panel { padding: 12px; }
    .ei-sheet-body { padding: 10px 12px 4px; }
    .ei-sheet-actions { padding: 10px 12px; }
}

/* landscape phones: the doll and the bag side by side, the sheet a full-height panel */
@media (max-height: 500px) and (orientation: landscape) {
    .ei-panel { padding: 10px 12px; }
    .ei-panel-title { margin-bottom: 8px; }
    .ei-hint { display: none; }
    .ei-sheet { max-height: 96vh; max-height: 96dvh; }
    .ei-sheet-grab { display: none; }
}

/* ---- the character view around the doll (scoped): 44 px targets, no motion when it is unwelcome ---- */

#view-character .character-view-tabs .tab-btn,
#view-character .character-view-header .btn-back {
    min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
    #view-character .character-view-container::after { animation: none !important; }
}

/* ---- fix round 1 (review-t18.md) ---- */

/* Ruling R18-1: the notice line under the doll. The status line is always present; the box and its ✕ show only with a message */
.ei-notice {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 360px;
}

.ei-notice-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ei-text);
}

.ei-notice-close {
    display: none;
    flex: none;
    background: transparent;
    border-color: transparent;
}

.ei-notice.ei-has-notice {
    margin-top: 12px;
    padding: 4px 4px 4px 12px;
    border-radius: 12px;
    background: var(--ei-notice-bg);
    border: 1px solid var(--ei-notice-edge);
}

.ei-notice.ei-has-notice .ei-notice-close { display: inline-flex; }

/* T18-1: the compare results' heading, where Compare scrolls and moves focus */
.ei-compare-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 650;
    color: var(--ei-text);
    scroll-margin-top: 8px;
    border-radius: 4px;
}

.ei-compare-title:focus { outline: none; }
.ei-compare-title:focus-visible { outline: 3px solid var(--ei-focus); outline-offset: 2px; }

/* T18-6: the shared toast under reduced motion fades instead of sliding (its 3 s timing is the page's) */
@keyframes ei-toast-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ei-toast-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    #toast-container .game-toast { animation: ei-toast-fade-in 0.2s ease, ei-toast-fade-out 0.2s ease 2.8s forwards; }
}

/* T18-14: the My NFTs tab, each token on the shared card */
#nft-grid.nft-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

.nft-card.ei-nft {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 8px;
    border-radius: 16px;
    background: var(--ei-panel-bg);
    overflow: visible;
    transition: none;
}

.nft-card.ei-nft:hover { transform: none; box-shadow: none; }

.ei-nft-meta,
.ei-nft-note {
    margin: 0;
    padding: 0 4px;
    font-size: 13px;
    color: var(--ei-muted);
}

.ei-nft-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}