/* ═══════════════════════════════════════════════════════════════════════════
   EPIC UI OVERHAUL — unified design system
   Loads after style.css / dungeon.css. Pure overlay: no layout shifts, no
   markup removal. Token-driven so it tracks --vpw/--vph on any screen.
   Sections: 1 tokens · 2 world ambience · 3 panels & modals · 4 buttons ·
             5 section titles · 6 compact inventory tiles · 7 responsive rails
             8 scrollbars & focus · 9 reduced motion · 10 skill tablets
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · DESIGN TOKENS ──────────────────────────────────────────────────── */
:root {
    /* Ember accents layered on the existing gold system */
    --ember:      #ff9d45;
    --ember-deep: #c2581f;
    --ember-dim:  rgba(255,157,69,0.16);
    --ember-glow: rgba(255,157,69,0.45);
    /* Adaptive frame borders: thin rails on big screens, tight on phones */
    --frame-w:    1px;
    --frame-pad:  2px;
    --frame-w:    clamp(1px, 0.18vmin, 4px);
    --frame-pad:  clamp(1px, 0.22vmin, 5px);
    --frame-rail: color-mix(in srgb, var(--gold) 30%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
    :root { --frame-rail: rgba(212,168,67,0.3); }
}
/* Match the app's zoom compensation: the dungeon page runs at zoom 1 */
html.ui-zoom-off {
    --frame-w:   1px;
    --frame-pad: 2px;
}

/* ── 2 · WORLD AMBIENCE (fluid, covers every viewport size) ─────────────── */
#screen-game.active > .game-body { position: relative; }
#screen-game.active > .game-body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 120vmax 70vmax at 50% 118%, rgba(194,88,31,0.06), transparent 58%),
        radial-gradient(ellipse 90vmax 55vmax at 100% 0%, rgba(64,72,158,0.07), transparent 56%),
        radial-gradient(ellipse 80vmax 45vmax at 0% 20%, rgba(120,40,40,0.055), transparent 54%);
}
/* Torch-flicker behind the world. Hidden when an overlay dims the screen. */
#screen-game.active > .game-body::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse 70vmax 45vmax at 50% 108%, rgba(255,157,69,0.07), transparent 62%);
    animation: epic-torch 5.6s ease-in-out infinite;
    transition: opacity 0.2s;
    opacity: 1;
}
body.modal-lock #screen-game.active > .game-body::after { opacity: 0.2; }
@keyframes epic-torch {
    0%, 100% { opacity: 1; }
    20%      { opacity: 0.88; }
    47%      { opacity: 0.96; }
    68%      { opacity: 0.84; }
    85%      { opacity: 0.95; }
}

/* ── 3 · PANELS & MODALS — engraved gold frame + ember crest ────────────── */
.modal-box {
    border: 1px solid var(--frame-rail) !important;
    outline: 1px solid rgba(0,0,0,0.55);
    outline-offset: 1px;
    box-shadow:
        0 24px 80px rgba(0,0,0,0.9),
        0 0 0 1px rgba(255,255,255,0.04),
        0 0 60px var(--ember-dim) !important;
    background:
        radial-gradient(ellipse 120% 55% at 50% -8%, rgba(194,88,31,0.1), transparent 60%),
        linear-gradient(145deg, var(--bg2), var(--bg3)) !important;
}
.modal-box::before {
    content: '';
    position: absolute; left: 50%; top: 0;
    width: clamp(80px, 22%, 170px); height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--gold-light) 30%, var(--gold-bright) 50%, var(--gold-light) 70%, transparent);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.9;
}
.modal-box::after {
    content: '';
    position: absolute; left: 50%; top: 4px;
    width: 7px; height: 7px;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(135deg, var(--gold-bright), var(--ember-deep));
    box-shadow: 0 0 9px var(--ember-glow);
    pointer-events: none;
}
.modal-title {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-light);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 16px var(--ember-dim);
}

/* ── 4 · BUTTONS — shared press/ready language ──────────────────────────── */
.btn-primary,
.btn-attack,
.btn-sm,
.btn-secondary:not(.eq-avatar-edit-btn) {
    position: relative;
    transition: transform 0.18s cubic-bezier(0.2,0.9,0.3,1.4), box-shadow 0.18s, filter 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
    will-change: transform;
}
.btn-primary:hover:not(:disabled),
.btn-attack:hover { filter: saturate(1.15) brightness(1.06); }
.btn-primary:active:not(:disabled),
.btn-attack:active,
.btn-sm:active,
.btn-secondary:active { transform: scale(0.965); filter: brightness(0.92); }
.btn-primary:focus-visible,
.btn-attack:focus-visible,
.btn-sm:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--gold-glow);
    outline-offset: 2px;
}
.btn-primary:disabled { filter: grayscale(0.7) brightness(0.6); }
/* Secondary buttons get an ember underline crest */
.btn-secondary::after {
    content: '';
    position: absolute; left: 22%; right: 22%; bottom: 3px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim) 50%, transparent);
    opacity: 0.75;
    pointer-events: none;
}
.btn-secondary:hover::after { background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent); }

/* ── 5 · SECTION TITLES — gold rule with diamond finials ────────────────── */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-light);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.section-title::before,
.section-title::after {
    content: '';
    flex: 1 1 auto;
    min-width: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--frame-rail));
}
.section-title::after { background: linear-gradient(90deg, var(--frame-rail), transparent); }
.section-title > :last-child { flex: 0 0 auto; }

/* ── 6 · COMPACT INVENTORY TILES ──────────────────────────────────────────
   mat-card shrinks from ~110px cell / 13px padding / 48px art to a tight
   20px-core tile: 34px art, 2-line clip, quantity as corner chip. */
.mat-grid { gap: 6px; }
.mat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
    padding: 8px 5px 6px;
    border-radius: var(--radius-sm);
    background: linear-gradient(145deg, var(--bg2), var(--bg3));
    border: 1px solid var(--frame-rail);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color 0.18s, transform 0.18s cubic-bezier(0.2,0.9,0.3,1.4), box-shadow 0.18s;
    cursor: pointer;
}
.mat-card::before { opacity: 0.12; }
.mat-card::after { opacity: 0.05; }
.mat-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 16px var(--gold-dim);
    z-index: 3;
}
.mat-card:active { transform: translateY(0) scale(0.97); }
/* Inline <img> art (48px inline styles in markup) → 34px responsive */
.mat-card > img { width: 34px !important; height: 34px !important; margin-bottom: 4px !important; }
.mat-card .mat-name {
    width: 100%;
    font-size: 0.66rem;
    line-height: 1.25;
    max-height: 2.5em;
    overflow: hidden;
    margin: 0 0 1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}
/* Corner chip only for owned-material quantity (mat-qty-chip).
   The exchange cards' flow lines (Cost / You can afford) keep their
   original in-flow placement under the art. */
.mat-card .mat-qty-chip {
    position: absolute;
    top: 3px; right: 4px;
    font-size: 0.7rem;
    padding: 0 5px;
    border-radius: 8px;
    background: rgba(7,11,16,0.85);
    border: 1px solid var(--frame-rail);
    color: var(--gold-light);
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    line-height: 1.35;
    z-index: 3;
}
/* Exchange card quantity lines: restore original flow styling */
.mat-grid[style*="150px"] .mat-card .mat-qty {
    position: static;
    font-size: 1.05rem;
    margin: 2px 0;
    line-height: 1.3;
}
/* The two exchange grids on the same tab keep roomier cells */
.mat-grid[style*="150px"] { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important; gap: 8px; }
.mat-grid[style*="150px"] .mat-card { padding: 10px 6px 8px; }

/* Exchange qty input: hide the native spin buttons so the number centers
   (the −/+ buttons already provide stepping; spinners steal ~16px on the
   right and push the text left of center) */
.mat-grid[style*="150px"] .mat-qty-input::-webkit-outer-spin-button,
.mat-grid[style*="150px"] .mat-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mat-grid[style*="150px"] .mat-qty-input {
    -moz-appearance: textfield;
}

/* ── 7 · RESPONSIVE FRAME RAILS (align to any screen) ───────────────────── */
.topbar {
    border-bottom: 1px solid var(--frame-rail) !important;
    box-shadow: 0 2px 40px rgba(0,0,0,0.8), 0 1px 0 rgba(201,146,42,0.12), 0 6px 30px var(--ember-dim) !important;
}
.sidebar { border-bottom-color: var(--frame-rail) !important; }
/* Phones: tighten the compact tiles further */
@media (max-width: 520px) {
    .mat-card { padding: 6px 4px 5px; }
    .mat-card > img { width: 30px !important; height: 30px !important; }
}

/* ── 8 · SCROLLBARS & FOCUS ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(201,146,42,0.35), rgba(194,88,31,0.35));
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(232,184,75,0.55); }

/* ── 9 · ACCESSIBILITY ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #screen-game.active > .game-body::after { animation: none; opacity: 0.8; }
    .mat-card,
    .btn-primary, .btn-attack, .btn-sm, .btn-secondary { transition: none; }
}

/* ── 10 · SKILL TABLETS — engraved arc cards that fill their grid ─────────
   Markup (renderSkills in app.js):
     .skill-card[.is-active|.is-spent|.is-locked]
       ├ .skill-art   → edge-to-edge art, arched top, status chip
       └ .skill-deck  → name · desc · activate button (+ diamond connector)
   Fluid everywhere: vmin clamps on desktop, px floors on phones. */
#skills-grid {
    /* Inline style has minmax(280px,1fr); override so cards truly fill the tab:
       2 columns on wide screens, 1 on narrow — always edge to edge. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
    gap: clamp(10px, 1.4vmin, 18px);
}
.skill-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: clamp(300px, 40vh, 420px);
    min-width: 0;
    border-radius: clamp(14px, 1.8vmin, 20px) clamp(14px, 1.8vmin, 20px) var(--radius-sm) var(--radius-sm);
    background: linear-gradient(160deg, var(--bg2), var(--bg3));
    border: 1px solid var(--frame-rail);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s cubic-bezier(0.2,0.9,0.3,1.4), box-shadow 0.2s;
}
.skill-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.65), 0 0 24px var(--gold-dim), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Art window — fills the card's upper area edge to edge */
.skill-art {
    position: relative;
    flex: 1 1 auto;
    min-height: clamp(150px, 26vh, 260px);
    overflow: hidden;
    background:
        radial-gradient(ellipse 130% 100% at 50% 0%, rgba(201,146,42,0.10), transparent 55%),
        linear-gradient(180deg, rgba(12,16,24,0.2), rgba(7,11,16,0.55));
}
/* Arched top: inner stone shadow + faint gold crown */
.skill-art::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 150% 42% at 50% -14%, rgba(7,11,16,0.9), transparent 58%),
        radial-gradient(ellipse 75% 24% at 50% -6%, rgba(232,184,75,0.16), transparent 70%);
}
/* Bottom vignette so the hairline reads clean */
.skill-art::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 26%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(7,11,16,0.75));
}
.skill-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.08) contrast(1.04);
    transition: transform 0.45s cubic-bezier(0.2,0.9,0.3,1.2), filter 0.3s;
}
.skill-card:hover .skill-art img { transform: scale(1.05); filter: saturate(1.22) contrast(1.08) brightness(1.05); }
/* Emoji fallback (art missing): shown when the img is hidden by data-error-hide */
.skill-art .skill-emoji {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: clamp(3rem, 8vmin, 4.5rem);
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.8));
}
/* Active pill pinned into the art's top corner */
.skill-status-chip {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #e9d5ff;
    background: rgba(40,16,60,0.82);
    border: 1px solid rgba(155,89,182,0.65);
    box-shadow: 0 0 12px rgba(155,89,182,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    backdrop-filter: blur(2px);
    z-index: 2;
}

/* Deck — name / description / button pinned to the card's base */
.skill-deck {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 13px;
    background: linear-gradient(180deg, rgba(7,11,16,0.4), rgba(7,11,16,0.15));
}
/* Gold hairline where art meets deck — lives on the deck so it tracks
   the true boundary however tall the flexed art area is */
.skill-deck::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--frame-rail) 15%, var(--frame-rail) 85%, transparent);
    pointer-events: none;
}
/* Diamond connector at the deck's top edge */
.skill-deck::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 8px;
    height: 8px;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(135deg, var(--gold-bright), var(--ember-deep));
    box-shadow: 0 0 8px var(--ember-glow);
    z-index: 2;
}
.skill-name {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.95rem, 2vmin, 1.12rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-bright);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 14px rgba(201,146,42,0.18);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.skill-desc {
    margin: 0;
    font-size: clamp(0.72rem, 1.6vmin, 0.82rem);
    line-height: 1.5;
    color: var(--text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.skill-btn {
    width: 100%;
    margin-top: auto;
    padding: 9px 10px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: not-allowed;
    transition: all 0.2s;
}
.skill-btn.can {
    cursor: pointer;
    border-color: rgba(155,89,182,0.55);
    background: linear-gradient(180deg, rgba(155,89,182,0.28), rgba(142,68,173,0.16));
    color: #d8b4fe;
    text-shadow: 0 0 10px rgba(155,89,182,0.5);
    box-shadow: 0 0 14px rgba(155,89,182,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}
.skill-btn.can:hover { filter: brightness(1.18); box-shadow: 0 0 20px rgba(155,89,182,0.4); }
.skill-btn.can:active { transform: scale(0.97); }
.skill-btn:disabled { opacity: 0.85; }

/* State dressing on the card frame */
.skill-card.is-active {
    border-color: rgba(155,89,182,0.65);
    box-shadow: 0 10px 34px rgba(0,0,0,0.6), 0 0 26px rgba(155,89,182,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: skill-aura 2.6s ease-in-out infinite;
}
@keyframes skill-aura {
    0%, 100% { box-shadow: 0 10px 34px rgba(0,0,0,0.6), 0 0 18px rgba(155,89,182,0.2); }
    50%      { box-shadow: 0 10px 34px rgba(0,0,0,0.6), 0 0 32px rgba(155,89,182,0.42); }
}
.skill-card.is-spent,
.skill-card.is-locked { filter: saturate(0.55) brightness(0.82); }
.skill-card.is-spent:hover,
.skill-card.is-locked:hover { transform: none; }

/* Phones: single column, art floor lower, tighter deck */
@media (max-width: 520px) {
    .skill-card { min-height: clamp(320px, 68vh, 430px); border-radius: 16px 16px 10px 10px; }
    .skill-art { min-height: clamp(170px, 34vh, 250px); }
    .skill-deck { padding: 11px 12px 12px; }
    .skill-desc { -webkit-line-clamp: 5; }
}

/* ── 11 · AVATAR EDIT BUTTON — bottom-center, hover-revealed ──────────── */
.eq-avatar-edit-btn {
    bottom: 2px;              /* fully inside the avatar bounds: never rides the shield slot */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(2px);
    transition: opacity 0.22s ease, transform 0.22s ease, filter 0.18s;
}
.eq-avatar-center:hover .eq-avatar-edit-btn,
.eq-avatar-center:focus-within .eq-avatar-edit-btn,
.eq-avatar-edit-btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Touch devices have no hover: keep the button discoverable but subtle */
@media (hover: none) {
    .eq-avatar-edit-btn {
        opacity: 0.55;
        pointer-events: auto;
        transform: translateX(-50%);
    }
}
/* Press state: keep the -50% centering while scaling down */
.eq-avatar-edit-btn:active {
    transform: translateX(-50%) scale(0.96);
}

/* ── 12 · RAIDS TAB — cinematic art (raid1/2/3.png) ─────────────────────
   Markup (dungeon.js): .raid-hero-banner > img.raid-hero-img + shade +
   content · hub head gets an art strip · raid cards get art backdrops.
   All art degrades gracefully: .is-missing images hide themselves. */
.raid-hero-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(150px, 22vmin, 230px);
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(145deg, var(--bg2), var(--bg3));
    border: 1px solid var(--frame-rail);
    box-shadow: 0 18px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
}
.raid-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: saturate(1.12) contrast(1.05);
    transition: transform 5.5s cubic-bezier(0.2,0.7,0.3,1);
}
.raid-hero-banner:hover .raid-hero-img { transform: scale(1.06); }
.raid-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(7,11,16,0.12) 0%, rgba(7,11,16,0.5) 55%, rgba(7,11,16,0.9) 100%),
        radial-gradient(ellipse 62% 95% at 6% 100%, rgba(255,157,69,0.13), transparent 62%);
}
.raid-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: clamp(14px, 2.4vmin, 26px) clamp(16px, 3vmin, 32px);
}
.raid-hero-kicker {
    font-size: clamp(0.64rem, 1.3vmin, 0.76rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-light);
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.raid-hero-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.5rem, 4vmin, 2.3rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-bright);
    text-shadow: 0 2px 12px rgba(0,0,0,0.92), 0 0 30px rgba(194,88,31,0.3);
}
.raid-hero-sub {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(0.8rem, 1.7vmin, 0.92rem);
    color: rgba(226,232,240,0.92);
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* Hub shell: translucent so the world glow breathes through */
.dungeon-raid-hub-shell {
    background: linear-gradient(180deg, rgba(8,12,20,0.74), rgba(6,10,18,0.68));
    border: 1px solid var(--frame-rail);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}
.raid-hub-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.dungeon-raid-hub-title {
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    letter-spacing: 0.18em;
    color: var(--gold-light);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.raid-hub-art-strip {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.raid-hub-art-strip img {
    width: clamp(64px, 11vmin, 96px);
    height: clamp(44px, 7.5vmin, 64px);
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--frame-rail);
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
    filter: saturate(1.1);
    transition: transform 0.25s, border-color 0.25s, filter 0.25s;
}
.raid-hub-art-strip img:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: var(--gold);
    filter: saturate(1.22) brightness(1.08);
}

/* Raid cards: one vivid boss-art panel on the right, dark readable info on
   the left, actions centered at the bottom. */
.raid-card {
    --art-w: clamp(130px, 27%, 230px); /* boss-art panel width, reused for layout */
    --art-w-px: 230px; /* px twin for transform math (% would resolve against the button, not the card) */
}
.raid-card,
.raid-create-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 14px;
    /* dungeon.css sizes these cards as "84px icon | info" columns; the icon
       tile is gone, so collapse to a single full-width column. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    background:
        linear-gradient(90deg, rgba(4,8,14,0.72) 0%, rgba(4,8,14,0.5) 52%, rgba(4,8,14,0.18) 100%),
        var(--raid-bg, none) center 30% / cover no-repeat,
        rgba(5,9,15,0.92);
    border: 1px solid rgba(167,139,250,0.28);
    box-shadow: 0 14px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color 0.22s, box-shadow 0.22s;
}
.raid-card:hover,
.raid-create-card:hover {
    border-color: rgba(196,181,253,0.5);
    box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 20px rgba(124,58,237,0.2);
}
/* Boss art: right-anchored panel, left edge dissolving into the card */
.raid-card-art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: var(--art-w, clamp(130px, 27%, 230px));
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    opacity: 0.95;
    filter: saturate(1.12) contrast(1.06);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
    mask-image: linear-gradient(90deg, transparent, #000 38%);
    transition: transform 0.5s ease;
}
.raid-card:hover .raid-card-art { transform: scale(1.04); }
/* Keep info text clear of the art panel */
.raid-card .exchange-info { padding-right: var(--art-w, clamp(130px, 27%, 230px)); }
.raid-card > .exchange-info,
.raid-create-card > .exchange-info { position: relative; z-index: 2; }
/* Action buttons: centered at the bottom of the card, not full-width.
   Buttons center inside .exchange-info, whose content box excludes the art
   reserve — translateX by half the reserve re-centers them on the card.
   (Mercenary recruit buttons keep their grid inside .raid-mercenary-board.) */
.raid-card .exchange-info > .exchange-btn,
.raid-create-card .exchange-info > .exchange-btn {
    display: block;
    width: auto;
    min-width: 210px;
    max-width: 380px;
    margin: 14px auto 2px;
    transform: translateX(calc(var(--art-w-px, 0px) / 2));
}
/* Leader's inline settings row: the "Update Start" button belongs beside the
   threshold select (compact, never stretched full-width). */
.raid-card .raid-setting-row {
    margin-top: 10px;
}
.raid-card .raid-setting-row .exchange-btn.raid-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    margin: 0;
    transform: none;
    padding: 9px 16px;
    white-space: nowrap;
}

/* Missing art files: hide so the layout degrades to the clean original */
.raid-hero-img.is-missing,
.raid-card-art.is-missing { display: none !important; }
.raid-card .exchange-info:has(+ .raid-card-art) { padding-right: 0; }

/* Mercenary cards: full-bleed monster art with an info deck at the base */
.raid-mercenary-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 168px;
}
.raid-mercenary-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    filter: saturate(1.1);
}
.raid-mercenary-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4,7,12,0.06) 0%, rgba(4,7,12,0.42) 46%, rgba(3,6,10,0.94) 100%);
}
.raid-mercenary-card > .raid-mercenary-name,
.raid-mercenary-card > .raid-mercenary-stats,
.raid-mercenary-card > .raid-mercenary-status,
.raid-mercenary-card > .raid-mercenary-btn {
    position: relative;
    z-index: 2;
}
.raid-mercenary-card .raid-mercenary-name {
    margin-top: auto;
    margin-bottom: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.95);
}
.raid-mercenary-card .raid-mercenary-stats {
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.raid-mercenary-card .raid-mercenary-btn {
    margin-top: 7px;
}
.raid-mercenary-card.is-recruited .raid-mercenary-art {
    filter: grayscale(0.55) brightness(0.8);
}
.raid-mercenary-card.is-recruited {
    border-color: rgba(46,204,113,0.35);
}
.raid-mercenary-art.is-missing { display: none; }

/* ── 13 · DUNGEON ENTRY — tower crest, boss showcase, floor strip ───── */
/* Replace the 🗼 emoji with an engraved gold tower crest */
.dungeon-tower-icon { font-size: 0; line-height: 0; }
.tower-svg {
    display: block;
    width: clamp(44px, 7vmin, 64px);
    height: clamp(44px, 7vmin, 64px);
    filter: drop-shadow(0 4px 14px rgba(194,88,31,0.35));
}

/* Next-boss showcase: large art panel instead of a 64px blob */
.dungeon-tower-next {
    background: linear-gradient(180deg, rgba(8,12,20,0.75), rgba(6,10,18,0.65));
    border: 1px solid var(--frame-rail);
    border-radius: 14px;
    padding: clamp(12px, 2vmin, 18px);
}
.dungeon-next-label {
    font-size: 0.7rem;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.dungeon-next-boss {
    display: flex;
    align-items: stretch;
    gap: clamp(14px, 2.2vmin, 22px);
}
.dungeon-next-art {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    flex: 0 0 auto;
    width: clamp(200px, 32vmin, 320px);
    aspect-ratio: 3 / 2;
    border-radius: 14px;
    border: 1px solid var(--frame-rail);
    background: var(--dungeon-bg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.dungeon-next-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.05);
    transition: transform 5s cubic-bezier(0.2,0.7,0.3,1);
}
.dungeon-tower-next:hover .dungeon-next-art img { transform: scale(1.05); }
/* Emoji fallback tile (shown when the art is missing) */
.dungeon-next-art > span {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}
.dungeon-next-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 55%, rgba(7,11,16,0.5) 100%),
        radial-gradient(ellipse 85% 30% at 50% 0%, rgba(7,11,16,0.35), transparent 65%);
}
.dungeon-next-floor {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(7,11,16,0.8);
    border: 1px solid var(--frame-rail);
    color: var(--gold-light);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.dungeon-next-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}
.dungeon-next-name {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.05rem, 2.6vmin, 1.4rem);
    letter-spacing: 0.05em;
    color: #e2e8f0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.dungeon-next-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--dungeon-muted);
}
.dungeon-next-stats span {
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
}
.dungeon-next-drops { font-size: 0.74rem; color: var(--dungeon-gold); }
.dungeon-next-lore {
    font-size: 0.72rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--dungeon-muted);
    border-left: 2px solid var(--frame-rail);
    padding-left: 10px;
}

/* Upcoming floors: taller art + slow zoom */
.dungeon-floor-preview-card { width: 168px; }
.fp-banner { height: 104px; min-height: 104px; }
.fp-banner img { width: 100%; height: 100%; transition: transform 0.5s ease; }
.dungeon-floor-preview-card:hover .fp-banner img { transform: scale(1.08); }

/* Mobile: stack boss showcase, wider art */
@media (max-width: 640px) {
    .dungeon-next-boss { flex-direction: column; }
    .dungeon-next-art { width: 100%; aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .dungeon-next-art img, .dungeon-tower-next:hover .dungeon-next-art img,
    .fp-banner img, .dungeon-floor-preview-card:hover .fp-banner img { transition: none; transform: none; }
}

/* Mobile: narrower art panel, actions stay centered */
@media (max-width: 640px) {
    .raid-hero-banner { min-height: 150px; border-radius: 14px; }
    .raid-card { --art-w: 100px; --art-w-px: 100px; }
    .raid-card-art { -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
    .raid-card .exchange-info > .exchange-btn, .raid-create-card .exchange-info > .exchange-btn { min-width: 170px; max-width: calc(100% - 10px); }
    .dungeon-raid-hub-shell { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .raid-hero-img, .raid-hero-banner:hover .raid-hero-img,
    .raid-card-art, .raid-card:hover .raid-card-art,
    .raid-hub-art-strip img, .raid-hub-art-strip img:hover { transition: none; transform: none; }
}


/* ───────────────────────────────────────────────────────────────
   13. Shop header actions — Claim Free Gems + Reroll Shop
   (restored: the retired tab-header strip carried them away)
   ─────────────────────────────────────────────────────────────── */
.shop-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.shop-header-actions .btn-secondary {
    background: linear-gradient(160deg, var(--bg3, #0d1420), rgba(10, 14, 22, 0.9));
    border-color: var(--frame-rail, rgba(212, 175, 55, 0.35));
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 190, 0.10),
        0 2px 10px rgba(0, 0, 0, 0.45);
}

.shop-header-actions .btn-secondary:hover {
    border-color: var(--gold-light, #f2d57e);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 190, 0.14),
        0 0 18px rgba(212, 175, 55, 0.22);
}

.shop-header-actions .shop-gems-cta {
    border-color: rgba(52, 152, 219, 0.45);
}

.shop-header-actions .shop-gems-cta:hover {
    border-color: #7ec8f7;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 18px rgba(52, 152, 219, 0.30);
}

@media (max-width: 640px) {
    .shop-header-actions {
        justify-content: stretch;
    }
    .shop-header-actions .btn-secondary {
        flex: 1 1 46%;
        justify-content: center;
    }
}

/* ── 15 · LOADOUT — zone pickers & save button ───────────────────────── */
/* Inline .btn-primary.btn-sm sit beside inputs, not as full-width form bars.
   (.btn-primary base is width:100%; the btn-sm modifier implies inline use.) */
.loadout-save-btn {
    width: auto;
    min-width: 240px;
    max-width: 380px;
    display: flex;
    margin: 16px auto 4px;
}
.btn-primary.btn-sm {
    width: auto;
    display: inline-flex;
}
#tab-squads .squads-card .btn-primary.btn-sm {
    width: auto;
}

/* ── 14 · PREMIUM CHAMBER — gem hero, medallion cards, synergy crest ──── */
.pr-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(155,89,182,0.3);
    background:
        radial-gradient(ellipse 90% 130% at 8% 0%, rgba(124,58,237,0.2), transparent 55%),
        linear-gradient(180deg, rgba(10,8,18,0.85), rgba(7,6,14,0.8));
    box-shadow: 0 10px 26px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
}
.pr-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #c084fc, #7c3aed 60%, transparent);
    box-shadow: 0 0 12px rgba(147,51,234,0.5);
}
.pr-head-title { display: flex; align-items: center; gap: 12px; }
.pr-head-crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    color: #d8b4fe;
    border: 1px solid rgba(192,132,252,0.4);
    border-radius: 9px;
    background: linear-gradient(160deg, rgba(124,58,237,0.3), rgba(124,58,237,0.08));
    text-shadow: 0 0 10px rgba(192,132,252,0.7);
    transform: rotate(45deg);
}
.pr-head-crest { border-radius: 7px; }
.pr-head-crest > * { transform: rotate(-45deg); }
.pr-head-crest { transform: none; }
.pr-head-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.34em;
    color: rgba(216,180,254,0.75);
    font-weight: 700;
}
.pr-head-name {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.15rem, 2.6vmin, 1.5rem);
    font-weight: 700;
    color: #ede9fe;
    text-shadow: 0 2px 10px rgba(124,58,237,0.35);
    line-height: 1.2;
}
.pr-head-gems {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 8px 16px;
    border-radius: 11px;
    border: 1px solid rgba(192,132,252,0.3);
    background:
        radial-gradient(ellipse 120% 100% at 50% 0%, rgba(124,58,237,0.22), transparent 70%),
        rgba(8,6,14,0.75);
}
.pr-head-gems-label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(216,180,254,0.65);
}
.pr-head-gems-value {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #d8b4fe;
    text-shadow: 0 0 14px rgba(147,51,234,0.55);
}

/* Progress banner: synergy state / Ascendant ultimate */
.pr-ultimate {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 15px 20px 14px;
    margin-bottom: 16px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.1);
    background:
        radial-gradient(ellipse 70% 130% at 50% -20%, rgba(255,255,255,0.05), transparent 60%),
        rgba(9,9,15,0.72);
}
.pr-ultimate-crest {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: rgba(255,255,255,0.3);
}
.pr-ultimate-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-bright, #ede9fe);
    letter-spacing: 0.06em;
}
.pr-ultimate-sub {
    font-size: 0.76rem;
    color: var(--text-dim, rgba(255,255,255,0.55));
    margin-top: 4px;
    line-height: 1.45;
}
.pr-ultimate.is-ultimate {
    border-color: rgba(241,196,15,0.45);
    background:
        radial-gradient(ellipse 80% 140% at 50% -30%, rgba(241,196,15,0.16), transparent 62%),
        linear-gradient(180deg, rgba(20,16,6,0.7), rgba(12,9,4,0.8));
    animation: prUltimatePulse 3.2s ease-in-out infinite;
}
.pr-ultimate.is-ultimate .pr-ultimate-crest {
    color: #f1c40f;
    text-shadow: 0 0 14px rgba(241,196,15,0.8);
}
.pr-ultimate.is-ultimate .pr-ultimate-title {
    color: var(--gold, #f4d06f);
    font-size: 1.2rem;
}
.pr-ultimate.is-ultimate .pr-ultimate-sub { color: rgba(244,208,111,0.85); }
@keyframes prUltimatePulse {
    0%, 100% { box-shadow: 0 10px 26px rgba(0,0,0,0.4), 0 0 10px rgba(241,196,15,0.08); }
    50% { box-shadow: 0 10px 26px rgba(0,0,0,0.4), 0 0 26px rgba(241,196,15,0.22); }
}

/* Synergy panel: always present so activation never shifts the layout */
.pr-synergy-panel {
    margin-bottom: 16px;
    padding: 12px 16px 13px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(ellipse 70% 130% at 12% -20%, rgba(255,255,255,0.04), transparent 60%),
        rgba(9,9,15,0.72);
}
.pr-synergy-panel.has-synergies {
    border-color: rgba(241,196,15,0.28);
    background:
        radial-gradient(ellipse 70% 130% at 12% -20%, rgba(241,196,15,0.09), transparent 60%),
        rgba(12,10,6,0.75);
}
.pr-synergy-head {
    display: flex;
    align-items: center;
    gap: 9px;
}
.pr-synergy-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
}
.has-synergies .pr-synergy-glyph {
    color: #f4d06f;
    border-color: rgba(241,196,15,0.4);
    text-shadow: 0 0 10px rgba(241,196,15,0.5);
}
.pr-synergy-title {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.has-synergies .pr-synergy-title { color: var(--gold, #f4d06f); }
.pr-synergy-count {
    margin-left: auto;
    min-width: 26px;
    padding: 2px 8px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
}
.has-synergies .pr-synergy-count {
    border-color: rgba(241,196,15,0.45);
    background: rgba(241,196,15,0.12);
    color: var(--gold, #f4d06f);
    box-shadow: 0 0 10px rgba(241,196,15,0.15);
}
.has-synergies .pr-synergy-empty { display: none; }
/* Fixed-height content zone: 0 → N synergies never changes panel height */
.pr-synergy-track,
.pr-synergy-panel .pr-synergy-empty {
    min-height: 34px;
    max-height: 34px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* Synergy chips */
.pr-synergy-track {
    gap: 8px;
    margin-top: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}
.pr-synergy-panel .pr-synergy-empty {
    margin-top: 10px;
    padding: 0 12px;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 9px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.42);
}
.pr-synergy-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid rgba(241,196,15,0.32);
    background: linear-gradient(180deg, rgba(241,196,15,0.1), rgba(241,196,15,0.04));
    font-size: 0.72rem;
    color: var(--gold, #f4d06f);
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    cursor: default;
}
.pr-synergy-chip strong { font-weight: 700; }
.pr-chip-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    border-radius: 50%;
    border: 1px solid rgba(244,208,111,0.45);
    font-size: 0.55rem;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    color: rgba(244,208,111,0.8);
    transition: background 0.15s, color 0.15s;
}
.pr-synergy-chip:hover .pr-chip-info,
.pr-synergy-chip:focus .pr-chip-info {
    background: rgba(241,196,15,0.2);
    color: #f4d06f;
}
.pr-synergy-chip {
    cursor: pointer;
}
.pr-synergy-chip:hover,
.pr-synergy-chip:focus {
    border-color: rgba(241,196,15,0.55);
    box-shadow: 0 0 12px rgba(241,196,15,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.pr-synergy-chip:focus-visible {
    outline: 2px solid rgba(241,196,15,0.5);
    outline-offset: 2px;
}

/* Floating synergy tooltip (pointer devices) */
.pr-tip {
    position: fixed;
    z-index: 300;
    max-width: 300px;
    padding: 10px 13px;
    border-radius: 11px;
    border: 1px solid rgba(241,196,15,0.35);
    background:
        radial-gradient(ellipse 90% 100% at 20% 0%, rgba(241,196,15,0.08), transparent 60%),
        linear-gradient(180deg, rgba(14,12,8,0.97), rgba(9,8,5,0.97));
    box-shadow: 0 14px 30px rgba(0,0,0,0.55), 0 0 16px rgba(241,196,15,0.1);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.pr-tip.pr-tip-show { opacity: 1; transform: translateY(0); }
.pr-tip-name {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #f4d06f;
    margin-bottom: 3px;
}
.pr-tip-desc {
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
}
.pr-tip-req {
    margin-top: 6px;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: rgba(244,208,111,0.6);
}
@media (hover: none) {
    .pr-tip { display: none; }
}

/* Synergy detail modal */
.pr-synergy-modal {
    position: relative;
    max-width: 420px;
    width: calc(100% - 32px);
    text-align: center;
    padding: 30px 26px 24px;
    border-radius: 16px;
    border: 1px solid rgba(241,196,15,0.35);
    background:
        radial-gradient(ellipse 90% 70% at 50% -10%, rgba(241,196,15,0.12), transparent 60%),
        linear-gradient(180deg, rgba(16,14,9,0.98), rgba(10,9,6,0.99));
    box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 30px rgba(241,196,15,0.1);
}
.pr-synergy-modal-crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    font-size: 1.3rem;
    color: #f4d06f;
    border: 1px solid rgba(241,196,15,0.45);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(241,196,15,0.16), rgba(241,196,15,0.04));
    text-shadow: 0 0 14px rgba(241,196,15,0.7);
    box-shadow: 0 0 20px rgba(241,196,15,0.15);
}
.pr-synergy-modal-name {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f4d06f;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.pr-synergy-modal-desc {
    font-size: 0.86rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    margin: 12px 0 18px;
}
.pr-synergy-modal-req-label {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 8px;
}
.pr-synergy-modal-req {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}
.pr-req-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid rgba(192,132,252,0.35);
    background: linear-gradient(180deg, rgba(124,58,237,0.18), rgba(124,58,237,0.06));
    font-size: 0.72rem;
    font-weight: 600;
    color: #d8b4fe;
}
.pr-req-plus {
    color: rgba(244,208,111,0.7);
    font-weight: 700;
}

/* Feature cards: medallion socket + engraved deck */
.premium-feature-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    width: 100%;
}
.premium-feature-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    flex: 0 1 220px;
    min-width: 200px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,255,255,0.03), transparent 60%),
        linear-gradient(180deg, rgba(11,10,18,0.92), rgba(8,7,13,0.95));
    box-shadow: 0 10px 24px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.premium-feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(192,132,252,0.4);
    box-shadow: 0 16px 32px rgba(0,0,0,0.5), 0 0 18px rgba(124,58,237,0.18);
}
.premium-feature-card.is-active {
    border-color: rgba(241,196,15,0.4);
    background:
        radial-gradient(ellipse 100% 55% at 50% 0%, rgba(241,196,15,0.08), transparent 62%),
        linear-gradient(180deg, rgba(14,12,7,0.92), rgba(9,8,5,0.95));
}
.premium-feature-card.is-active:hover {
    border-color: rgba(241,196,15,0.55);
    box-shadow: 0 16px 32px rgba(0,0,0,0.5), 0 0 20px rgba(241,196,15,0.16);
}
.premium-feature-art-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
/* Blend the art's lower edge into the info deck */
.premium-feature-art-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 58%, rgba(8,7,13,0.55) 82%, rgba(8,7,13,0.95) 100%);
}
.pr-halo {
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: radial-gradient(circle at 50% 40%, rgba(124,58,237,0.3), rgba(124,58,237,0.08) 58%, transparent 78%);
    filter: blur(2px);
}
.is-active .pr-halo {
    background: radial-gradient(circle at 50% 42%, rgba(241,196,15,0.22), rgba(241,196,15,0.05) 58%, transparent 72%);
}
.premium-feature-art {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(124,58,237,0.25));
    transition: transform 0.35s ease;
}
.is-active .premium-feature-art {
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55)) drop-shadow(0 0 16px rgba(241,196,15,0.35));
}
.premium-feature-card:hover .premium-feature-art { transform: translateY(-3px) scale(1.04); }
.premium-feature-emoji {
    position: relative;
    z-index: 2;
    font-size: 3.6rem;
    line-height: 1;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.6));
}
.premium-feature-days {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid rgba(241,196,15,0.4);
    background: rgba(10,8,4,0.8);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--gold, #f4d06f);
}
.premium-feature-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 14px 14px;
    text-align: center;
}
.premium-feature-body::before {
    content: '';
    display: block;
    width: 54px;
    height: 1px;
    margin: 0 auto 9px;
    background: linear-gradient(90deg, transparent, rgba(192,132,252,0.55), transparent);
}
.is-active .premium-feature-body::before {
    background: linear-gradient(90deg, transparent, rgba(241,196,15,0.55), transparent);
}
.premium-feature-name {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-bright, #f1edff);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.premium-feature-cost {
    font-size: 0.64rem;
    color: #d8b4fe;
    letter-spacing: 0.06em;
    margin-top: 2px;
}
.is-active .premium-feature-cost { color: var(--gold, #f4d06f); }
.premium-feature-desc {
    font-size: 0.75rem;
    color: var(--text-dim, rgba(255,255,255,0.55));
    line-height: 1.5;
    margin: 7px 0 10px;
    flex: 1;
}
.pr-btn {
    width: 100%;
    padding: 10px 12px;
    margin-top: auto;
    border-radius: 10px;
    border: 1px solid rgba(155,89,182,0.45);
    background: linear-gradient(180deg, rgba(124,58,237,0.24), rgba(124,58,237,0.1));
    color: #d8b4fe;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
}
.pr-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(124,58,237,0.4), rgba(124,58,237,0.18));
    border-color: rgba(192,132,252,0.6);
    box-shadow: 0 0 14px rgba(124,58,237,0.3);
}
.pr-btn:active:not(:disabled) { transform: scale(0.98); }
.pr-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.pr-btn.is-renew {
    border-color: rgba(241,196,15,0.4);
    background: linear-gradient(180deg, rgba(241,196,15,0.16), rgba(241,196,15,0.06));
    color: var(--gold, #f4d06f);
}
.pr-btn.is-renew:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(241,196,15,0.26), rgba(241,196,15,0.1));
    border-color: rgba(241,196,15,0.55);
    box-shadow: 0 0 14px rgba(241,196,15,0.22);
}

/* Admin panel link */
.pr-admin-link,
#premium-content a[href="/admin-panel"] {
    display: block;
    text-align: center;
    padding: 10px;
    margin: 4px 0 16px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: filter 0.15s;
}
#premium-content a[href="/admin-panel"]:hover { filter: brightness(1.35); }

@media (max-width: 680px) {
    .premium-feature-grid { gap: 12px; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; }
    .premium-feature-card {
        flex: 1 1 calc(50% - 6px);
        min-width: 148px;
        max-width: none;
    }
    .premium-feature-art-wrap { padding: 0; max-width: none; width: 100%; margin: 0; }
    .premium-feature-art { width: 100%; height: 100%; object-fit: cover; }
    .premium-feature-emoji { width: auto; height: auto; line-height: 1; font-size: 2.8rem; }
    .premium-feature-body { padding: 8px 11px 11px; }
    .premium-feature-desc { font-size: 0.7rem; }
    .pr-btn { padding: 9px 8px; font-size: 0.68rem; }
    .pr-head { padding: 13px 14px; }
    .pr-head-gems { align-items: flex-end; }
}
@media (max-width: 340px) {
    .premium-feature-card { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .pr-ultimate.is-ultimate { animation: none; }
    .premium-feature-card, .premium-feature-art, .pr-btn { transition: none; }
}

/* ═══════════════ 17 · SQUAD CUSTOM ROLES ═══════════════ */

/* Squad subtabs (class-based replacement for the old inline-styled buttons) */
.squad-subtabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }

.squad-subtab {
    padding: 8px 16px;
    background: #14141e;
    border: 1px solid #2a2a35;
    border-radius: 6px;
    color: #8a8a90;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.squad-subtab:hover { color: #c8a86e; border-color: #4a4a58; }

.squad-subtab.active {
    background: #1a1a28;
    border-color: #c8a86e;
    color: #c8a86e;
}

.sq-role-chip {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    font-size: 0.58rem;
    line-height: 14px;
    border-radius: 7px;
    color: var(--gold, #d4af37);
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.08);
    vertical-align: middle;
    cursor: help;
}

.sq-member-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 6px;
    vertical-align: middle;
}

.sq-member-id { display: inline-flex; align-items: center; }

.sq-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(212, 175, 55, 0.25);
    background: rgba(212, 175, 55, 0.06);
    font-size: 1.35rem;
}
.sq-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sq-header-card { position: relative; overflow: hidden; }
.sq-header-card .sq-header-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: var(--sq-backdrop-opacity, 0.45);
    pointer-events: none;
}
.sq-header-card > .squads-card-head { position: relative; z-index: 1; }

.sq-browse-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 300px; overflow-y: auto; }
.sq-browse-loading { font-size: 0.78rem; color: var(--text-dim); padding: 6px 2px; }
.sq-browse-empty { font-size: 0.78rem; color: var(--text-dim); margin-top: 6px; }
.sq-browse-refresh { margin-top: 8px; }
.sq-browse-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.04);
}
.sq-browse-row .sq-logo { width: 34px; height: 34px; border-radius: 9px; font-size: 1.05rem; }
.sq-browse-info { flex: 1; min-width: 0; }
.sq-browse-name { font-weight: 600; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-browse-tag { color: var(--gold-light); opacity: 0.85; }
.sq-browse-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 1px; }

.sq-member-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    justify-content: stretch;
    gap: 4px 10px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
/* Member rows get a class-art backdrop + dedicated info/online/actions columns */
.sq-member-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--sq-row-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--sq-row-bg-opacity, 0.16);
    pointer-events: none;
    z-index: 0;
}
.sq-member-row > * { position: relative; z-index: 1; min-width: 0; }
.sq-member-row .sq-member-id { display: inline-flex; align-items: center; }
.sq-member-row .sq-member-id > span { flex: 1 1 auto; min-width: 0; }
.sq-member-row .sq-member-id .squads-member-name { display: inline; word-break: break-word; }
.sq-member-role { margin-left: 6px; font-size: 0.75rem; opacity: 0.7; white-space: nowrap; }
.sq-member-row .sq-member-id .squads-member-sub { justify-content: flex-start; }
/* Dedicated "last online" column: nowrap, right-aligned to the actions column edge */
.sq-member-row .sq-member-online {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    font-size: 0.74rem;
    color: var(--text-dim);
    text-align: right;
}
/* Dedicated actions column: pinned far right, never floats mid-row */
.sq-member-row .sq-member-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: nowrap;
}
.squads-members.sq-manage .sq-member-actions { margin-left: 0; min-width: 168px; }
.squads-members.sq-manage .sq-member-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.squads-members:not(.sq-manage) .sq-member-row { grid-template-columns: minmax(0, 1fr) auto; }
.squads-members.sq-manage .squad-role-select { width: 104px; min-width: 0; }
.squads-members.sq-manage .sq-member-actions .btn-danger { flex: 0 0 auto; }
/* Non-manage viewers get no actions column at all — online stays far right */
.squads-members:not(.sq-manage) .sq-member-actions { display: none; }
/* Squad member tooltip: class-art backdrop under the card content */
.item-tooltip .tt-squad-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    opacity: 0.14; border-radius: 14px; overflow: hidden;
    pointer-events: none;
}
.item-tooltip:has(.tt-squad-bg) .tt-preview,
.item-tooltip:has(.tt-squad-bg) .tt-body { position: relative; z-index: 1; }
@media (max-width: 520px) {
    .sq-member-row,
    .squads-members.sq-manage .sq-member-row,
    .squads-members:not(.sq-manage) .sq-member-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 10px;
    }
    .sq-member-row .sq-member-id { grid-column: 1; grid-row: 1; width: 100%; }
    .sq-member-row .sq-member-online { grid-column: 2; grid-row: 1; justify-content: flex-end; }
    .sq-member-row .sq-member-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
    }
    .sq-member-row .sq-member-actions .squad-role-select,
    .sq-member-row .sq-member-actions .btn-danger,
    .sq-member-row .sq-member-actions .btn-primary {
        height: 24px;
        box-sizing: border-box;
        margin: 0;
    }
    .sq-member-row .sq-member-actions .squad-role-select {
        max-width: 60%;
        min-width: 0;
    }
}

.squads-member-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin-top: 2px;
}

.sq-sub-item { white-space: nowrap; }
.sq-sub-status { opacity: 0.85; }

.sq-roles-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.sq-role-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 7px 10px;
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.04);
}

.sq-role-name { font-weight: 600; font-size: 0.8rem; min-width: 120px; }

.sq-role-perms { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }

.sq-perm-chip {
    font-size: 0.62rem;
    padding: 1px 7px;
    border-radius: 8px;
    border: 1px solid rgba(155, 89, 182, 0.4);
    background: rgba(155, 89, 182, 0.1);
    color: #c9a7e8;
}

.sq-perm-chip.sq-perm-none { border-color: rgba(255, 255, 255, 0.12); background: transparent; color: var(--text-dim, #888); font-style: italic; }

.sq-role-add-btn { display: inline-flex; width: auto; margin-top: 4px; }

/* Editor modal */
.sq-role-overlay { z-index: 1200; }

.sq-role-editor {
    width: min(480px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
}

.sq-role-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sq-role-editor-title { font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--gold, #d4af37); letter-spacing: 0.04em; }

.sq-role-editor-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--text-dim, #999);
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 0.8rem;
}

.sq-role-editor-close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

.sq-role-field-label {
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim, #999);
    margin-bottom: 5px;
}

.sq-perm-grid { display: flex; flex-direction: column; gap: 6px; }

.sq-perm-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.sq-perm-option:hover { border-color: rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.04); }

.sq-perm-option:has(input:checked) { border-color: rgba(212, 175, 55, 0.5); background: rgba(212, 175, 55, 0.07); }

.sq-perm-option input[type="checkbox"] { margin-top: 3px; accent-color: var(--gold, #d4af37); }

.sq-perm-option-text { display: flex; flex-direction: column; gap: 2px; }

.sq-perm-option-text strong { font-size: 0.78rem; font-weight: 600; }

.sq-perm-option-text small { font-size: 0.64rem; color: var(--text-dim, #999); line-height: 1.35; }

.sq-role-editor-note {
    margin-top: 12px;
    font-size: 0.64rem;
    color: var(--text-dim, #999);
    font-style: italic;
    line-height: 1.4;
    padding: 7px 9px;
    border-left: 2px solid rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.04);
    border-radius: 0 6px 6px 0;
}

.sq-role-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 480px) {
    .sq-role-row { flex-direction: column; align-items: flex-start; }
    .sq-role-name { min-width: 0; }
}

/* =====================================================================
   Hover-cursor stability (button-edge flicker fix) — loaded LAST (index.html)
   ---------------------------------------------------------------------
   :hover rules that translateY/scale the element ITSELF move its hit-box.
   Park the cursor on an edge and the moving edge sweeps across it, so
   :hover keeps toggling on/off and the cursor flips between arrow/hand
   ("can't decide which mode to stay"). We null the geometry motion on
   hover but keep the glow / border / box-shadow feedback. Press-state
   (:active) transforms are excluded via :not(:active) so press squish
   still works, and inner-content zooms (img scale on hover) are untouched
   — they don't change the clickable hit area.
   ===================================================================== */
.skip-tutorial-btn:hover:not(:active),
.goto-missions-btn:hover:not(:active),
.android-qr-link:hover:not(:active),
.game-logo:hover:not(:active),
.class-card:hover:not(:active),
.create-carousel-nav:hover:not(:active),
.btn-primary:hover:not(:active),
.btn-attack:hover:not(:active):not(:disabled),
.btn-train:hover:not(:active):not(:disabled),
.btn-upgrade:hover:not(:active):not(:disabled),
.btn-forge:not(:disabled):hover:not(:active),
.btn-shop:hover:not(:active):not(:disabled),
.btn-danger:hover:not(:active),
.btn-craft-direct:hover:not(:active),
.topbar-chat-btn:hover:not(:active),
.topbar-menu-btn:hover:not(:active),
.topbar-menu-action:hover:not(:active),
.topbar-menu-toggle:hover:not(:active),
.nav-btn:hover:not(:active),
.character-hub-option:hover:not(:active),
.character-switch-card:hover:not(:active),
.weekly-task-material-btn:hover:not(:active),
.upgrade-card:hover:not(:active),
.forge-card:hover:not(:active),
.inv-item-cell:hover:not(:active),
.inv-consumable-card:hover:not(:active),
.mat-card:hover:not(:active),
.shop-card:hover:not(:active),
.news-item:hover:not(:active),
.news-item-cta-btn:hover:not(:active),
.story-fab:hover:not(:active),
.mz-spot-card:hover:not(.mz-spot-locked):not(:active),
.mz-mission-card:hover:not(:active),
.footer-btn:hover:not(:active),
.footer-donate-btn:hover:not(:active),
.abyss-exit-btn:hover:not(:active),
.btn-join:hover:not(:active),
.dungeon-floor-preview-card:hover:not(:active),
.dungeon-path-btn:hover:not(:active):not(:disabled),
.dungeon-direction-btn:hover:not(:active):not(:disabled),
.trial-char-card:hover:not(.down):not(:active),
.trial-mon-card:hover:not(.down):not(:active),
.monster-combat-card:hover:not(:active),
.trial-ability-btn:hover:not(:active):not(:disabled),
.dungeon-scene-image:hover:not(:active),
.material-card:hover:not(:active),
.craft-btn:hover:not(:active):not(:disabled),
.skill-card:hover:not(:active),
.premium-feature-card:hover:not(:active) {
    transform: none !important;
}

.sq-desc-strip {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sq-desc-text {
    flex: 1; min-width: 0;
    font-size: 0.82rem; line-height: 1.5;
    color: var(--text-dim);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.sq-desc-empty { opacity: 0.6; font-style: italic; }
.sq-desc-edit { flex-shrink: 0; align-self: center; }
.sd-desc {
    margin-top: 6px;
    font-size: 0.85rem; line-height: 1.5;
    color: var(--text-dim);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.sq-browse-desc {
    font-size: 0.72rem; line-height: 1.4;
    color: var(--text-dim);
    margin-top: 2px;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.sq-desc-textarea {
    width: 100%; min-height: 92px;
    resize: vertical;
    font-family: inherit; font-size: 0.85rem; line-height: 1.5;
}



/* ════════════════════════════════════════════════════════════════════════
   17 · NEWS ART — cinematic image bands on news cards
   ════════════════════════════════════════════════════════════════════════ */
.news-item-art {
    position: relative;
    margin: -18px -18px 14px;
    height: 150px;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 20%, rgba(120, 90, 200, 0.14), transparent 60%),
        var(--bg-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.news-item-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.001);
    transition: transform 6s ease-out;
    filter: saturate(1.08) contrast(1.04);
}
.news-item-art-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.52) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 78%, rgba(0,0,0,0.30) 100%);
    pointer-events: none;
}
.news-item.open .news-item-art img {
    transform: scale(1.07);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .news-item:hover .news-item-art img {
        transform: scale(1.07);
    }
}

/* Featured story card — taller cinematic banner */
.news-item--featured .news-item-art {
    height: 220px;
    border-bottom: 1px solid rgba(155, 89, 182, 0.35);
    box-shadow: inset 0 -30px 40px -24px rgba(0, 0, 0, 0.7);
}

@media (max-width: 560px) {
    .news-item-art { height: 118px; }
    .news-item--featured .news-item-art { height: 160px; }
}

/* ── PC: vertical pan so no artwork is stuck on a static center slice ──── */
/* The window drifts top → bottom → top; object-position adapts to each    */
/* image's own slack, so every art gets fully revealed over the cycle.     */
@keyframes newsArtPan {
    from { object-position: 50% 0%; }
    to   { object-position: 50% 100%; }
}
@media (min-width: 561px) and (prefers-reduced-motion: no-preference) {
    .news-item-art img {
        animation: newsArtPan 18s ease-in-out infinite alternate;
    }
    /* featured banner has the most hidden art — give it a longer, grander sweep */
    .news-item--featured .news-item-art img {
        animation-duration: 26s;
    }
    /* de-sync the grid so cards don't sway in lockstep */
    .news-list .news-item:nth-child(2n) .news-item-art img { animation-duration: 22s; animation-delay: -7s; }
    .news-list .news-item:nth-child(3n) .news-item-art img { animation-duration: 20s; animation-delay: -12s; }
}