@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Cinzel+Decorative:wght@700;900&display=swap');

/* Server Presentation - modern, block-based marketing page */

.presentation-page {
    --pres-display: 'Cinzel', 'Inter', serif;
    width: 100%;
    overflow-x: hidden;
}

/* Presentation: pin site navbar + offset content / side rail below it */
html:has(.presentation-page) {
    --pres-nav-offset: 92px;
    scroll-padding-top: var(--pres-nav-offset);
}

@media (max-width: 1024px) {
    html:has(.presentation-page) {
        --pres-nav-offset: 76px;
    }
}

html:has(.presentation-page) .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

html:has(.presentation-page) .presentation-page {
    padding-top: var(--pres-nav-offset);
}

.presentation-page section[id^="sec-"],
.presentation-page .pres-hero {
    scroll-margin-top: calc(var(--pres-nav-offset) + 12px);
}

/* Side navigation - Rubinum-style accordion categories */
.pres-sidenav {
    position: fixed;
    top: var(--pres-nav-offset, 92px);
    left: 0;
    width: 260px;
    height: calc(100vh - var(--pres-nav-offset, 92px));
    z-index: 60;
    padding: 1rem 0.7rem 1.5rem;
    overflow-y: auto;
    background: rgba(14, 10, 9, 0.96);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    scrollbar-width: thin;
}

.pres-sidenav-inner {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.pres-sidenav-brand {
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(232, 226, 218, 0.95);
    padding: 0.15rem 0.55rem 0.35rem;
}

.pres-sidenav-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(232, 226, 218, 0.45);
    padding: 0 0.55rem 0.35rem;
    font-weight: 700;
}

.pres-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pres-nav-cat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.78rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    background: rgba(36, 27, 24, 0.95);
    color: rgba(232, 226, 218, 0.95);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pres-nav-cat:hover {
    background: rgba(48, 36, 30, 0.98);
    border-color: rgba(211, 122, 78, 0.35);
}

.pres-nav-group.open .pres-nav-cat {
    border-color: rgba(211, 122, 78, 0.45);
    box-shadow: inset 0 0 0 1px rgba(211, 122, 78, 0.12);
}

.pres-nav-cat-icon {
    width: 1.1rem;
    text-align: center;
    color: #d37a4e;
    font-size: 0.95rem;
    flex: 0 0 auto;
}

.pres-nav-cat-label {
    flex: 1 1 auto;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
}

.pres-nav-cat-chevron {
    color: rgba(232, 226, 218, 0.55);
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}

.pres-nav-group.open .pres-nav-cat-chevron {
    transform: rotate(180deg);
    color: #d37a4e;
}

.pres-nav-sub {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: 0.15rem 0 0.35rem 0.35rem;
}

.pres-nav-group.open .pres-nav-sub {
    display: flex;
}

.pres-sidenav-link {
    display: block;
    color: rgba(232, 226, 218, 0.62);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.42rem 0.7rem 0.42rem 1.55rem;
    border-radius: 8px;
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pres-sidenav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.pres-sidenav-link.active {
    color: #fff;
    background: rgba(211, 122, 78, 0.16);
    border-left-color: #d37a4e;
}

.pres-nav-toggle {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 61;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #a85a35, #d37a4e);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    display: none;
}

.pres-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.pres-nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* Desktop: reserve space so page content sits right of the rail */
@media (min-width: 992px) {
    .presentation-page.has-sidenav { padding-left: 260px; }
}

/* Tablet/mobile: rail becomes a drawer toggled by the floating button */
@media (max-width: 991px) {
    .pres-sidenav {
        transform: translateX(-110%);
        transition: transform 0.25s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    }
    .pres-sidenav.open { transform: none; }
    .pres-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* Section wrapper + scroll reveal */
.pres-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.pres-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.pres-reveal.pres-visible {
    opacity: 1;
    transform: none;
}

.pres-heading {
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 2.4rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 0.5rem;
    line-height: 1.15;
    letter-spacing: 0.5px;
}

/* Decorative divider under section headings */
.pres-heading::after {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    margin: 0.85rem auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--primary, #cc0000), var(--accent, #ff4d4d), transparent);
    box-shadow: 0 0 14px rgba(var(--primary-rgb, 204, 0, 0), 0.7);
}

.pres-subheading {
    text-align: center;
    color: var(--text-muted, #9ca3af);
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
}

.pres-body {
    color: var(--text-main, #e5e7eb);
    line-height: 1.7;
    font-size: 1rem;
}

.pres-body ul { padding-left: 1.2rem; margin: 0.5rem 0; }
.pres-body li { margin-bottom: 0.35rem; }

/* Hero */
.pres-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1.5rem 4rem;
    background-size: cover;
    background-position: center;
}

.pres-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 28%, rgba(var(--primary-rgb, 204, 0, 0), 0.28), transparent 58%),
                linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.92) 100%);
    z-index: 0;
}

/* Slow pulsing glow behind the hero title */
.pres-hero-overlay::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 32%;
    width: 620px;
    height: 620px;
    max-width: 90vw;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--primary-rgb, 204, 0, 0), 0.35), transparent 62%);
    filter: blur(20px);
    animation: presHeroGlow 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes presHeroGlow {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.12); }
}

.pres-hero > * { position: relative; z-index: 1; }

/* Animated scroll-down cue at the bottom of the hero */
.pres-hero::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    color: var(--accent, #ff4d4d);
    font-size: 1.1rem;
    opacity: 0.8;
    z-index: 1;
    animation: presScrollCue 1.8s ease-in-out infinite;
}

@keyframes presScrollCue {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.35; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 0.9; }
}

.pres-eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent, #ff4d4d);
    margin-bottom: 1rem;
}

.pres-title {
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: clamp(2.6rem, 6.5vw, 5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #ffd9d9 45%, var(--accent, #ff4d4d) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 24px rgba(var(--primary-rgb, 204, 0, 0), 0.45));
}

.pres-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted, #cbd5e1);
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

.pres-launch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.pres-launch span:first-child {
    color: var(--accent, #ff4d4d);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.pres-hero-body {
    max-width: 640px;
    color: var(--text-muted, #cbd5e1);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.pres-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--primary, #cc0000), var(--accent, #ff4d4d));
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pres-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(var(--primary-rgb, 204, 0, 0), 0.4);
}

/* Feature cards */
.pres-cards {
    display: grid;
    grid-template-columns: repeat(var(--pres-cols, 3), 1fr);
    gap: 1.25rem;
}

.pres-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    border-radius: 16px;
    padding: 1.75rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.pres-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary, #cc0000);
}

.pres-card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.4rem;
    color: var(--accent, #ff4d4d);
    background: rgba(var(--primary-rgb, 204, 0, 0), 0.12);
    margin-bottom: 1rem;
}

.pres-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.pres-card p { color: var(--text-muted, #9ca3af); font-size: 0.92rem; line-height: 1.6; }

/* Image block */
.pres-figure { text-align: center; }

.pres-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

.pres-figure.narrow img { max-width: 640px; }
.pres-figure.wide img { max-width: 900px; }

.pres-image-placeholder {
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #9ca3af);
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    font-size: 0.9rem;
}

.pres-caption {
    margin-top: 0.9rem;
    color: var(--text-muted, #9ca3af);
    font-size: 0.9rem;
}

/* Icon grid with tooltips */
.pres-grid {
    display: grid;
    grid-template-columns: repeat(var(--pres-cols, 4), 1fr);
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
}

.pres-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    border-radius: 14px;
    cursor: help;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.pres-grid-item:hover { border-color: var(--primary, #cc0000); transform: translateY(-3px); }

.pres-grid-item .pres-grid-icon {
    font-size: 2rem;
    color: var(--accent, #ff4d4d);
}

.pres-grid-item img { width: 56px; height: 56px; object-fit: contain; }
.pres-grid-item .pres-grid-label { font-size: 0.85rem; font-weight: 600; }

.pres-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 240px;
    background: #12121a;
    border: 1px solid var(--primary, #cc0000);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 20;
    text-align: left;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.pres-grid-item:hover .pres-tooltip,
.pres-grid-item.pres-tip-open .pres-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pres-tooltip h4 { font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--accent, #ff4d4d); }
.pres-tooltip p { font-size: 0.8rem; color: var(--text-muted, #cbd5e1); line-height: 1.5; }

.pres-hint {
    text-align: center;
    color: var(--text-muted, #9ca3af);
    font-size: 0.8rem;
    margin-top: 1.25rem;
}

/* Helper cards nested inside image_grid_tooltip (same section, no 2nd window) */
.pres-grid-helpers {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(212, 175, 55, 0.22);
}
.pres-helpers-heading {
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.35rem;
    letter-spacing: 0.4px;
}
.pres-grid-helpers .pres-subheading {
    margin-bottom: 1.25rem;
}

/* Lead cards ABOVE the icon grid (Angeln intro) */
.pres-grid-lead {
    margin: 0 0 2rem;
}
.pres-grid-lead .pres-subheading {
    margin-bottom: 1.25rem;
}
.pres-grid-lead + .pres-helpers-heading {
    margin-top: 0.5rem;
}

/* Tabs */
.pres-tabs-head {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.pres-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.pres-tab-btn.active {
    background: var(--primary, #cc0000);
    color: #fff;
    border-color: var(--primary, #cc0000);
}

.pres-tab-panel {
    display: none;
    max-width: 760px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    border-radius: 16px;
    padding: 2rem;
}

.pres-tab-panel.active { display: block; }

/* Step selector */
.pres-steps-head {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.pres-step-btn {
    min-width: 64px;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.pres-step-btn.active {
    background: linear-gradient(135deg, var(--primary, #cc0000), var(--accent, #ff4d4d));
    color: #fff;
    border-color: transparent;
}

.pres-step-panel {
    display: none;
    max-width: 640px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    border-radius: 16px;
    padding: 2rem;
}

.pres-step-panel.active { display: block; }
.pres-step-panel h3 { color: var(--accent, #ff4d4d); margin-bottom: 0.75rem; }

/* Table */
.pres-table-wrap { overflow-x: auto; max-width: 860px; margin: 0 auto; }

.pres-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    overflow: hidden;
}

.pres-table th,
.pres-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
    font-size: 0.92rem;
}

.pres-table th {
    background: rgba(var(--primary-rgb, 204, 0, 0), 0.15);
    color: #fff;
    font-weight: 700;
}

.pres-table tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* Video */
.pres-video {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    background: #000;
}

.pres-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.pres-video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #9ca3af);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.9rem;
}

/* CTA */
.pres-cta {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 2rem;
    border-radius: 22px;
    background: radial-gradient(circle at 50% 0%, rgba(var(--primary-rgb, 204, 0, 0), 0.25), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}

.pres-cta h2 { font-size: 2rem; margin-bottom: 0.75rem; }
.pres-cta p { color: var(--text-muted, #cbd5e1); margin-bottom: 1.75rem; }

/* Loading / empty */
.pres-loading,
.pres-empty {
    text-align: center;
    padding: 6rem 1.5rem;
    color: var(--text-muted, #9ca3af);
}

/* Responsive */
@media (max-width: 900px) {
    .pres-cards { grid-template-columns: repeat(2, 1fr); }
    .pres-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .pres-section { padding: 3rem 1rem; }
    .pres-cards { grid-template-columns: 1fr; }
    .pres-grid { grid-template-columns: repeat(2, 1fr); }
    .pres-heading { font-size: 1.7rem; }
    .pres-tooltip { width: 180px; }
}

/* =========================================================
   Premium blocks + graphical polish
   ========================================================= */

.pres-cta h2 { font-family: var(--pres-display, 'Cinzel', serif); font-weight: 900; letter-spacing: 0.5px; }

/* Card polish: gradient top edge + glow on hover */
.pres-card { position: relative; overflow: hidden; }
.pres-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary, #cc0000), var(--accent, #ff4d4d));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.pres-card:hover::before { transform: scaleX(1); }
.pres-card:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--primary-rgb, 204, 0, 0), 0.3); }
.pres-card-icon { background: linear-gradient(135deg, rgba(var(--primary-rgb, 204, 0, 0), 0.28), rgba(var(--primary-rgb, 204, 0, 0), 0.08)); }

/* Icon grid cell polish (Metin2-style framed slots) */
.pres-grid-item {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pres-grid-item:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--primary-rgb, 204, 0, 0), 0.4); }
.pres-grid-item img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }

/* Branded placeholder for missing renders / screenshots */
.pres-placeholder {
    width: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted, #9ca3af);
    border-radius: 16px;
    border: 2px dashed rgba(var(--primary-rgb, 204, 0, 0), 0.4);
    background:
        radial-gradient(circle at 50% 40%, rgba(var(--primary-rgb, 204, 0, 0), 0.12), transparent 70%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 12px, rgba(255, 255, 255, 0.04) 12px 24px);
}
.pres-placeholder-compact { min-height: 150px; padding: 1rem; }
.pres-placeholder-icon { font-size: 2.4rem; color: var(--accent, #ff4d4d); opacity: 0.85; }
.pres-placeholder-compact .pres-placeholder-icon { font-size: 1.6rem; }
.pres-placeholder-label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px; max-width: 320px; }

/* ---- render_showcase: split render + text ---- */
.pres-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.pres-showcase-reverse .pres-showcase-media { order: 2; }
.pres-showcase-media {
    padding: 0;
}
.pres-showcase-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
.pres-eyebrow-left { text-align: left; margin-bottom: 0.6rem; }
.pres-showcase-title {
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}
.pres-showcase-sub { color: var(--accent, #ff4d4d); font-weight: 600; margin-bottom: 1rem; }

/* ---- dungeon_grid: cards ---- */
.pres-dungeons {
    display: grid;
    grid-template-columns: repeat(var(--pres-cols, 3), 1fr);
    gap: 1.25rem;
}
.pres-dungeon-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pres-dungeon-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary, #cc0000);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.pres-dungeon-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: 0;
    background: transparent;
}
.pres-dungeon-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}
.pres-dungeon-card:hover .pres-dungeon-thumb img { transform: scale(1.06); }
.pres-dungeon-thumb .pres-placeholder { border: none; border-radius: 0; min-height: 100%; }
.pres-dungeon-body { padding: 1.1rem 1.25rem 1.4rem; }
.pres-dungeon-name { font-family: var(--pres-display, 'Cinzel', serif); font-size: 1.15rem; margin-bottom: 0.6rem; }
.pres-dungeon-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.pres-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: var(--accent, #ff4d4d);
    background: rgba(var(--primary-rgb, 204, 0, 0), 0.14);
    border: 1px solid rgba(var(--primary-rgb, 204, 0, 0), 0.3);
}
.pres-dungeon-desc { color: var(--text-muted, #9ca3af); font-size: 0.9rem; line-height: 1.55; }

/* ---- stat_highlights: big numbers ---- */
.pres-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.1rem;
    max-width: 1080px;
    margin: 0 auto;
}
.pres-stat {
    text-align: center;
    padding: 1.5rem 0.9rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    border-radius: 16px;
}
.pres-stat-icon { font-size: 1.45rem; color: var(--accent, #ff4d4d); margin-bottom: 0.55rem; display: block; }
.pres-stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
    line-height: 1;
}
.pres-stat-num {
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 2.35rem;
    font-weight: 900;
    background: linear-gradient(135deg, #fff, var(--accent, #ff4d4d));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pres-stat-suffix { font-size: 1.25rem; font-weight: 900; color: var(--accent, #ff4d4d); }
.pres-stat-label { margin-top: 0.45rem; color: var(--text-muted, #9ca3af); font-size: 0.82rem; font-weight: 600; }

/* ---- roadmap: vertical timeline ---- */
.pres-roadmap { position: relative; max-width: 760px; margin: 0 auto; padding-left: 2.25rem; }
.pres-roadmap::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, var(--primary, #cc0000), rgba(255, 255, 255, 0.08));
}
.pres-roadmap-item { position: relative; margin-bottom: 1.5rem; }
.pres-roadmap-dot {
    position: absolute;
    left: -2.25rem;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #fff;
    background: #1a1a24;
    border: 2px solid var(--text-muted, #6b7280);
    z-index: 1;
}
.pres-rm-done .pres-roadmap-dot { border-color: #22c55e; box-shadow: 0 0 12px rgba(34, 197, 94, 0.6); }
.pres-rm-active .pres-roadmap-dot { border-color: var(--accent, #ff4d4d); box-shadow: 0 0 12px rgba(var(--primary-rgb, 204, 0, 0), 0.7); animation: presRmPulse 2s ease-in-out infinite; }
@keyframes presRmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.pres-roadmap-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    border-radius: 14px;
    padding: 1.1rem 1.35rem;
}
.pres-roadmap-date { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent, #ff4d4d); font-weight: 700; margin-bottom: 0.25rem; }
.pres-roadmap-title { font-family: var(--pres-display, 'Cinzel', serif); font-size: 1.15rem; margin-bottom: 0.4rem; }

/* ---- gui gallery: in-game screenshot bento grid ---- */
.pres-gui-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.pres-gui-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}
.pres-gui-span-1 { grid-column: span 4; }
.pres-gui-span-2 { grid-column: span 8; }
.pres-gui-span-full { grid-column: 1 / -1; }

/* Screenshot tile: no frame, centered UI capture */
.pres-gui-frame {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    transition: transform 0.25s ease;
}
.pres-gui-frame:hover {
    transform: translateY(-3px);
}

.pres-gui-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 0;
    background: transparent;
}
.pres-gui-span-2 .pres-gui-canvas { min-height: 260px; }
.pres-gui-span-full .pres-gui-canvas { min-height: 300px; }

.pres-gui-canvas img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.35));
}
.pres-gui-span-2 .pres-gui-canvas img { max-height: 260px; }
.pres-gui-span-full .pres-gui-canvas img { max-height: 340px; }
.pres-gui-frame:hover .pres-gui-canvas img {
    transform: scale(1.02);
}

.pres-gui-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    font-size: 0.8rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.pres-gui-frame:hover .pres-gui-zoom,
.pres-gui-frame:focus-visible .pres-gui-zoom {
    opacity: 1;
    transform: translateY(0);
}
.pres-gui-meta { padding: 0 0.15rem; }
.pres-gui-title {
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}
.pres-gui-text {
    color: var(--text-muted, #9ca3af);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

/* Lightbox for GUI screenshots */
.pres-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.pres-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}
.pres-lightbox-inner {
    position: relative;
    max-width: min(1100px, 94vw);
    max-height: 92vh;
    padding: 0;
    background: transparent;
}
.pres-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 4rem);
    margin: 0 auto;
    object-fit: contain;
}
.pres-lightbox-caption {
    margin-top: 0.75rem;
    text-align: center;
    color: #e5e7eb;
    font-weight: 600;
}
.pres-lightbox-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--primary, #cc0000);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Responsive for premium blocks */
@media (max-width: 900px) {
    .pres-showcase { grid-template-columns: 1fr; gap: 1.5rem; }
    .pres-showcase-reverse .pres-showcase-media { order: 0; }
    .pres-dungeons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .pres-dungeons { grid-template-columns: 1fr; }
    .pres-stat-num { font-size: 2.1rem; }
    .pres-showcase-title { font-size: 1.6rem; }
    .pres-gui-span-1,
    .pres-gui-span-2,
    .pres-gui-span-full { grid-column: 1 / -1; }
    .pres-gui-canvas { min-height: 220px; }
    .pres-gui-canvas img { max-height: 200px; }
    .pres-gui-span-2 .pres-gui-canvas img,
    .pres-gui-span-full .pres-gui-canvas img { max-height: 240px; }
}

/* =========================================================
   Presentation V2 - readability on video background +
   Metin2 look (gold accents, ornaments, soft image edges)
   ========================================================= */

/* ---- 1. Dim the global video background on this page (no live-video blur) ---- */
html:has(.presentation-page) .bg-backdrop .bg-video,
html:has(.presentation-page) .bg-video {
    opacity: 0.18;
    filter: saturate(0.7) brightness(0.55) contrast(0.95);
}

html:has(.presentation-page) .bg-backdrop .bg-poster {
    opacity: 0.45;
    filter: saturate(0.7) brightness(0.55);
}

html:has(.presentation-page) .bg-backdrop .bg-overlay {
    background: linear-gradient(180deg, rgba(6, 6, 10, 0.62) 0%, rgba(6, 6, 10, 0.82) 60%, rgba(6, 6, 10, 0.92) 100%);
    opacity: 1;
}

/* ---- 2. Sections become real glass panels (text readable) ---- */
.presentation-page .pres-section {
    position: relative;
    background: linear-gradient(180deg, rgba(13, 13, 20, 0.94), rgba(10, 10, 16, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    margin: 2.75rem auto;
    padding: 3.25rem 2.5rem;
}

/* Gold corner ornaments on panels */
.presentation-page .pres-section::before,
.presentation-page .pres-section::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.4);
    border-style: solid;
    pointer-events: none;
}

.presentation-page .pres-section::before {
    top: 10px;
    left: 10px;
    border-width: 1px 0 0 1px;
    border-top-left-radius: 10px;
}

.presentation-page .pres-section::after {
    bottom: 10px;
    right: 10px;
    border-width: 0 1px 1px 0;
    border-bottom-right-radius: 10px;
}

/* CTA block already has its own framed card - keep its section transparent */
.presentation-page .pres-section:has(> .pres-cta) {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.presentation-page .pres-section:has(> .pres-cta)::before,
.presentation-page .pres-section:has(> .pres-cta)::after {
    display: none;
}

/* ---- 3. Text contrast lifted ---- */
.pres-body {
    color: var(--text-main, #f8fafc);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.pres-subheading { color: #b7bfcd; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.pres-card p, .pres-dungeon-desc, .pres-gui-text { color: #c9cfda; }
.pres-hero-body { color: #dbe1ea; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.pres-subtitle { color: #e2e7ef; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }

/* Hero: near-opaque bottom so title/CTA always readable over video */
.pres-hero-overlay {
    background: radial-gradient(circle at 50% 28%, rgba(var(--primary-rgb, 204, 0, 0), 0.22), transparent 58%),
                linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(3, 3, 6, 0.68) 55%, rgba(3, 3, 6, 0.96) 100%);
}

/* ---- 4. Metin2 typography: gold display headings ---- */
.pres-heading {
    background: linear-gradient(135deg, #ffffff 0%, #f3e3b2 55%, var(--gold, #fbbf24) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.6));
}

/* Ornamental divider under headings (inline SVG, asian flourish) */
.pres-heading::after {
    width: 220px;
    height: 14px;
    margin: 0.9rem auto 0;
    border-radius: 0;
    box-shadow: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14'%3E%3Cpath d='M4 7 C 30 3, 60 11, 90 7' stroke='%23d7b46a' stroke-width='1.2' fill='none' opacity='0.75'/%3E%3Cpath d='M130 7 C 160 3, 190 11, 216 7' stroke='%23d7b46a' stroke-width='1.2' fill='none' opacity='0.75'/%3E%3Cpath d='M110 1 L116 7 L110 13 L104 7 Z' fill='%23f0cf8a'/%3E%3Ccircle cx='96' cy='7' r='1.7' fill='%23d7b46a'/%3E%3Ccircle cx='124' cy='7' r='1.7' fill='%23d7b46a'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pres-eyebrow { color: var(--gold, #fbbf24); }
.pres-showcase-sub { color: var(--gold, #fbbf24); }

.pres-title {
    background: linear-gradient(135deg, #ffffff 0%, #f6e7bb 45%, var(--gold, #fbbf24) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.65));
}

.pres-showcase-title {
    background: linear-gradient(135deg, #ffffff 0%, #f3e3b2 60%, var(--gold, #fbbf24) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- 5. Cards: gold top edge + hover glow ---- */
.pres-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border-color: rgba(255, 255, 255, 0.09);
}

.pres-card::before {
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb, 251, 191, 36), 0.85), transparent);
}

.pres-card:hover {
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.55);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(var(--gold-rgb, 251, 191, 36), 0.12);
}

.pres-card-icon {
    color: var(--gold, #fbbf24);
    background: linear-gradient(135deg, rgba(var(--gold-rgb, 251, 191, 36), 0.18), rgba(var(--gold-rgb, 251, 191, 36), 0.05));
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.25);
}

/* ---- 6. Soft image embedding (no hard edges) ---- */
.pres-gui-canvas img,
.pres-showcase-media img {
    -webkit-mask-image: radial-gradient(140% 140% at 50% 50%, #000 66%, rgba(0, 0, 0, 0.85) 82%, transparent 100%);
    mask-image: radial-gradient(140% 140% at 50% 50%, #000 66%, rgba(0, 0, 0, 0.85) 82%, transparent 100%);
}

.pres-figure img {
    border: none;
    border-radius: 18px;
    -webkit-mask-image: radial-gradient(140% 140% at 50% 50%, #000 70%, rgba(0, 0, 0, 0.9) 85%, transparent 100%);
    mask-image: radial-gradient(140% 140% at 50% 50%, #000 70%, rgba(0, 0, 0, 0.9) 85%, transparent 100%);
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}

/* Dungeon card thumbs fade into the card body */
.pres-dungeon-thumb img {
    object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

.pres-dungeon-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
}

.pres-dungeon-card:hover {
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.5);
}

.pres-chip {
    color: #f0cf8a;
    background: rgba(var(--gold-rgb, 251, 191, 36), 0.1);
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.3);
}

/* Grid cells + tooltips follow the gold accent */
.pres-grid-item:hover {
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.5);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--gold-rgb, 251, 191, 36), 0.35);
}

.pres-tooltip { border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.6); }
.pres-tooltip h4 { color: var(--gold, #fbbf24); }

/* Panels inside sections get darker, readable backgrounds */
.pres-tab-panel,
.pres-step-panel {
    background: rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.08);
}

.pres-table { background: rgba(0, 0, 0, 0.25); }

.pres-table th {
    background: rgba(var(--gold-rgb, 251, 191, 36), 0.12);
    color: #f3e3b2;
}

/* Stat highlights in gold */
.pres-stat {
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.18);
}

.pres-stat-num {
    background: linear-gradient(135deg, #ffffff, var(--gold, #fbbf24));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pres-stat-suffix { color: var(--gold, #fbbf24); }
.pres-stat-icon { color: var(--gold, #fbbf24); }

/* CTA panel: gold frame accent */
.pres-cta {
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.3);
    background: radial-gradient(circle at 50% 0%, rgba(var(--primary-rgb, 204, 0, 0), 0.28), rgba(10, 10, 16, 0.94));
}

/* ---- 7. Side navigation: darker + grouped headers ---- */
.pres-sidenav {
    background: rgba(8, 8, 13, 0.88);
    border-right: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.12);
}

.pres-sidenav-group {
    margin-top: 1rem;
    padding: 0.5rem 0.85rem 0.3rem;
    font-size: 0.66rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(var(--gold-rgb, 251, 191, 36), 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pres-sidenav-group:first-of-type { border-top: none; margin-top: 0.25rem; }

.pres-sidenav-link.active {
    background: rgba(var(--primary-rgb, 204, 0, 0), 0.2);
    border-left-color: var(--gold, #fbbf24);
}

/* Placeholder boxes follow the gold theme */
.pres-placeholder {
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.35);
    background:
        radial-gradient(circle at 50% 40%, rgba(var(--gold-rgb, 251, 191, 36), 0.08), transparent 70%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 12px, rgba(255, 255, 255, 0.04) 12px 24px);
}

.pres-placeholder-icon { color: var(--gold, #fbbf24); }

/* Mobile: tighter panel padding */
@media (max-width: 600px) {
    .presentation-page .pres-section { padding: 2.25rem 1.1rem; margin: 1.75rem auto; }
}

/* =========================================================
   Presentation V3 - "Chronicle" chapter layer
   Warm Metin2 palette, full-bleed chapter bands with roman
   numerals, hotspot showcases, before/after slider and
   self-hosted video frames.
   Hard rule: no filter:blur / backdrop-filter in this layer
   (GPU recompositing over the bg video causes scroll jank).
   ========================================================= */

/* ---- 1. Warm scoped tokens (admin Site Design presets keep working:
        gold/primary stay var()-driven) ---- */
.presentation-page {
    --pres-display-deco: 'Cinzel Decorative', 'Cinzel', 'Times New Roman', serif;
    --pres-ink: rgba(18, 14, 10, 0.94);
    --pres-ink-2: rgba(26, 19, 12, 0.9);
    --pres-parchment: #eadfc8;
    --pres-parchment-dim: #c9bda2;
    --pres-gold-soft: rgba(var(--gold-rgb, 251, 191, 36), 0.55);
    --pres-ember: rgba(var(--primary-rgb, 204, 0, 0), 0.35);
}

/* ---- 2. Warm retint of the V2 glass panels + copy ---- */
.presentation-page .pres-section {
    background: linear-gradient(180deg, var(--pres-ink), var(--pres-ink-2));
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.14);
}

.presentation-page .pres-section:has(> .pres-cta) {
    background: transparent;
    border: none;
}

.pres-body { color: var(--pres-parchment); }
.pres-subheading { color: var(--pres-parchment-dim); }
.pres-card p,
.pres-dungeon-desc,
.pres-gui-text { color: var(--pres-parchment-dim); }
.pres-hero-body { color: var(--pres-parchment); }

/* Warm gradient buttons (AoM-style, token-driven) */
.presentation-page .pres-btn {
    background: linear-gradient(135deg, rgb(var(--primary-rgb, 204, 0, 0)) 0%, rgba(var(--primary-rgb, 204, 0, 0), 0.62) 100%);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(var(--primary-rgb, 204, 0, 0), 0.25);
}

.presentation-page .pres-btn:hover {
    border-color: var(--gold, #fbbf24);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(var(--gold-rgb, 251, 191, 36), 0.35);
}

/* Hero title in the decorative display face */
.pres-title { font-family: var(--pres-display-deco, var(--pres-display)); }

/* ---- 3. Shared ornament: flourish divider as standalone class ---- */
.pres-flourish {
    width: 220px;
    height: 14px;
    margin: 1rem auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14'%3E%3Cpath d='M4 7 C 30 3, 60 11, 90 7' stroke='%23d7b46a' stroke-width='1.2' fill='none' opacity='0.75'/%3E%3Cpath d='M130 7 C 160 3, 190 11, 216 7' stroke='%23d7b46a' stroke-width='1.2' fill='none' opacity='0.75'/%3E%3Cpath d='M110 1 L116 7 L110 13 L104 7 Z' fill='%23f0cf8a'/%3E%3Ccircle cx='96' cy='7' r='1.7' fill='%23d7b46a'/%3E%3Ccircle cx='124' cy='7' r='1.7' fill='%23d7b46a'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- 4. Chapter bands (full-bleed artwork, soft mask edges) ---- */
.pres-chapter {
    position: relative;
    width: 100%;
    margin: -1.25rem auto 0;
    padding: 5.5rem 1rem 3.25rem;
    text-align: center;
    z-index: 0;
}

.pres-chapter-tall { padding: 8rem 1rem 5.5rem; }

.pres-chapter-band {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.pres-chapter-band picture {
    position: absolute;
    inset: 0;
}

.pres-chapter-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
}

/* Placeholder band while no artwork is uploaded yet */
.pres-chapter-bg-empty {
    background:
        radial-gradient(60% 80% at 50% 45%, rgba(var(--gold-rgb, 251, 191, 36), 0.1), transparent 70%),
        radial-gradient(90% 100% at 50% 110%, var(--pres-ember), transparent 65%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
}

.pres-ch-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.pres-ch-numeral {
    position: relative;
    display: inline-block;
    font-family: var(--pres-display-deco);
    font-weight: 900;
    font-size: clamp(3.4rem, 8vw, 6.5rem);
    line-height: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #f3e3b2 40%, var(--gold, #fbbf24) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
}

.pres-ch-numeral::before {
    content: "";
    position: absolute;
    inset: -45% -70%;
    z-index: -1;
    background: radial-gradient(50% 50% at 50% 50%, rgba(var(--gold-rgb, 251, 191, 36), 0.16), transparent 70%);
    pointer-events: none;
}

.pres-ch-title {
    margin: 0.5rem 0 0;
    font-family: var(--pres-display, 'Cinzel', serif);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: clamp(1.7rem, 4vw, 2.9rem);
    background: linear-gradient(135deg, #ffffff 0%, #f3e3b2 55%, var(--gold, #fbbf24) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.6));
}

.pres-ch-sub {
    max-width: 640px;
    margin: 0.9rem auto 0;
    color: var(--pres-parchment-dim);
    font-size: 1.02rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Sections inside a chapter flow tighter under the band */
.pres-chapter + .pres-section { margin-top: 0.75rem; }

/* Bigger double corner ornaments on the first panel after a chapter head */
.presentation-page .pres-chapter + .pres-section::before,
.presentation-page .pres-chapter + .pres-section::after {
    width: 40px;
    height: 40px;
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.55);
}

/* ---- 5. Hotspot showcase ("Klick auf einen Punkt") ---- */
.pres-hs {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.pres-hs-narrow { max-width: 700px; }

.pres-hs-base {
    display: block;
    width: 100%;
    border-radius: 14px;
    -webkit-mask-image: radial-gradient(140% 140% at 50% 50%, #000 70%, rgba(0, 0, 0, 0.9) 85%, transparent 100%);
    mask-image: radial-gradient(140% 140% at 50% 50%, #000 70%, rgba(0, 0, 0, 0.9) 85%, transparent 100%);
}

.pres-hs-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.pres-hs-layer-on { opacity: 1; }

.pres-hs-dot {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--gold, #fbbf24);
    background: radial-gradient(circle, rgba(var(--gold-rgb, 251, 191, 36), 0.9) 0 30%, rgba(var(--gold-rgb, 251, 191, 36), 0.25) 60%, transparent 70%);
    box-shadow: 0 0 0 0 rgba(var(--gold-rgb, 251, 191, 36), 0.55);
    animation: presHsPulse 2.2s ease-out infinite;
    transition: transform 0.15s ease;
}

.pres-hs-dot:hover,
.pres-hs-dot.active {
    animation: none;
    transform: scale(1.18);
    background: var(--gold, #fbbf24);
    box-shadow: 0 0 18px rgba(var(--gold-rgb, 251, 191, 36), 0.8);
}

@keyframes presHsPulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb, 251, 191, 36), 0.55); }
    70% { box-shadow: 0 0 0 14px rgba(var(--gold-rgb, 251, 191, 36), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb, 251, 191, 36), 0); }
}

.pres-hs-panel {
    display: none;
    max-width: 700px;
    margin: 1.25rem auto 0;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    text-align: left;
    background: var(--pres-ink-2);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.3);
}

.pres-hs-panel-open { display: block; }

.pres-hs-panel-title {
    margin: 0 0 0.4rem;
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 1.05rem;
    color: var(--gold, #fbbf24);
}

.pres-hs-panel-body {
    margin: 0;
    color: var(--pres-parchment);
}

/* ---- 6. Before/after comparison slider ---- */
.pres-ba {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.25);
    background: #000;
}

.pres-ba-media {
    display: block;
    width: 100%;
}

.pres-ba-after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 0 0 var(--ba-pos, 50%));
}

.pres-ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-pos, 50%);
    width: 2px;
    margin-left: -1px;
    background: var(--gold, #fbbf24);
    box-shadow: 0 0 12px rgba(var(--gold-rgb, 251, 191, 36), 0.7);
    pointer-events: none;
}

.pres-ba-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pres-ink);
    border: 2px solid var(--gold, #fbbf24);
    color: var(--gold, #fbbf24);
    font-size: 0.85rem;
}

.pres-ba-label {
    position: absolute;
    top: 12px;
    padding: 0.25rem 0.7rem;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: #f0cf8a;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.3);
    border-radius: 999px;
    pointer-events: none;
    z-index: 2;
}

.pres-ba-label-l { left: 12px; }
.pres-ba-label-r { right: 12px; }

/* Keyboard/a11y range control: invisible strip at the bottom, visible on focus */
.pres-ba-range {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    width: calc(100% - 24px);
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 3;
}

.pres-ba-range:focus-visible { opacity: 1; }

/* ---- 7. Self-hosted video frame ---- */
.pres-mv {
    margin: 0 auto;
    max-width: 1000px;
}

.pres-mv.narrow { max-width: 760px; }
.pres-mv.full { max-width: none; }

.pres-mv-video {
    display: block;
    width: 100%;
    border-radius: 16px;
    -webkit-mask-image: radial-gradient(140% 140% at 50% 50%, #000 70%, rgba(0, 0, 0, 0.9) 88%, transparent 100%);
    mask-image: radial-gradient(140% 140% at 50% 50%, #000 70%, rgba(0, 0, 0, 0.9) 88%, transparent 100%);
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}

/* ---- 8. Side nav: chapter group links ---- */
.pres-sidenav-grouplink {
    display: block;
    text-decoration: none;
    cursor: pointer;
    border-left: 2px solid transparent;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pres-sidenav-grouplink:hover {
    color: var(--gold, #fbbf24);
    background: rgba(255, 255, 255, 0.05);
}

.pres-sidenav-grouplink.active {
    color: var(--gold, #fbbf24);
    background: rgba(var(--primary-rgb, 204, 0, 0), 0.14);
    border-left-color: var(--gold, #fbbf24);
}

/* ---- 9. Motion + mobile guards ---- */
@media (prefers-reduced-motion: reduce) {
    .pres-hs-dot { animation: none; }
    .pres-hs-layer { transition: none; }
}

@media (max-width: 600px) {
    .pres-chapter { padding: 3.5rem 0.75rem 2rem; }
    .pres-chapter-tall { padding: 4.5rem 0.75rem 3rem; }
    .pres-ch-numeral { font-size: 3rem; }
    .pres-ch-title { letter-spacing: 0.08em; }
    .pres-hs-dot { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
    .pres-ba-grip { width: 34px; height: 34px; }
    .pres-hs-panel { padding: 0.9rem 1rem; }
}

/* ---- V3.1: stronger band presence once real artwork is set ---- */
.pres-chapter-bg { opacity: 0.78; }

.pres-chapter:has(.pres-chapter-bg) { padding: 7.5rem 1rem 5rem; }

.pres-chapter:has(.pres-chapter-bg) .pres-ch-sub { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75); }

@media (max-width: 600px) {
    .pres-chapter:has(.pres-chapter-bg) { padding: 4.75rem 0.75rem 3rem; }
}

/* ---- V3.2: band geometry + background de-duplication ----
   The band <img> is cover-cropped, so its rendered ratio has to stay close to
   the artwork ratio (2560x740 desktop / 900x620 mobile). A min-height plus
   centred content keeps the band between ~2.9:1 and ~3.6:1 across viewports
   instead of collapsing to a thin slice on wide screens. */
.pres-chapter:has(.pres-chapter-bg) {
    min-height: clamp(260px, 24vw, 480px);
    margin-top: -3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pres-chapter-bg { opacity: 0.88; }

/* The site-wide background art is the same brand illustration used by the
   hero. At the old opacity it ghosted through every panel gap and read as the
   artwork repeating down the page - keep it as texture only. */
html:has(.presentation-page) .bg-backdrop .bg-poster,
html:has(.presentation-page) .bg-poster {
    opacity: 0.13;
}

@media (max-width: 600px) {
    .pres-chapter:has(.pres-chapter-bg) {
        min-height: 250px;
        margin-top: -2rem;
    }
}

/* =========================================================
   Presentation V4 - system showcase (bento + detail overlay)
   and the item tier path with in-game icons.
   Same hard rule as V3: no filter:blur / backdrop-filter.
   ========================================================= */

/* ---- 1. System showcase: bento grid ---- */
.pres-sys-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

.pres-sys-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.16);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--pres-ink, rgba(18, 14, 10, 0.94)), var(--pres-ink-2, rgba(26, 19, 12, 0.9)));
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pres-sys-card:hover,
.pres-sys-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.6);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 26px rgba(var(--gold-rgb, 251, 191, 36), 0.14);
}

/* tile sizes */
.pres-sys-1-1 { grid-column: span 4; }
.pres-sys-2-1 { grid-column: span 8; }
.pres-sys-2-2 { grid-column: span 6; }
.pres-sys-full { grid-column: 1 / -1; }

.pres-sys-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
}

.pres-sys-2-1 .pres-sys-media,
.pres-sys-2-2 .pres-sys-media { min-height: 260px; }
.pres-sys-full .pres-sys-media { min-height: 320px; }

.pres-sys-img,
.pres-sys-video {
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.pres-sys-card:hover .pres-sys-img,
.pres-sys-card:hover .pres-sys-video { transform: scale(1.04); }

.pres-sys-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 0.2rem 0.6rem;
    font-size: 0.66rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 700;
    color: #f0cf8a;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.32);
    border-radius: 999px;
}

.pres-sys-meta { padding: 0 1.1rem 1.1rem; }

.pres-sys-title {
    margin: 0 0 0.3rem;
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 1.04rem;
    color: var(--gold, #fbbf24);
}

.pres-sys-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--pres-parchment-dim, #c9bda2);
}

.pres-sys-more {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    color: var(--gold, #fbbf24);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.4);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.pres-sys-card:hover .pres-sys-more,
.pres-sys-card:focus-visible .pres-sys-more { opacity: 1; }

/* ---- 2. Detail overlay ---- */
.pres-sysdetail {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: rgba(0, 0, 0, 0.82);
}

.pres-sysdetail.open { display: flex; }

.pres-sysdetail-inner {
    position: relative;
    width: min(980px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 18px;
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.36);
    background: linear-gradient(180deg, rgba(20, 15, 10, 0.98), rgba(12, 9, 6, 0.98));
}

.pres-sysdetail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--gold, #fbbf24);
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.4);
}

.pres-sysdetail-media { background: #000; }

.pres-sysdetail-img,
.pres-sysdetail-video {
    display: block;
    width: 100%;
    max-height: 56vh;
    object-fit: contain;
}

.pres-sysdetail-body { padding: 1.4rem 1.6rem 1.8rem; }

.pres-sysdetail-title {
    margin: 0 0 0.6rem;
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 1.4rem;
    color: var(--gold, #fbbf24);
}

.pres-sysdetail-text {
    margin: 0 0 0.9rem;
    line-height: 1.65;
    color: var(--pres-parchment, #eadfc8);
}

.pres-sysdetail-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--pres-parchment-dim, #c9bda2);
}

.pres-sysdetail-list li { margin-bottom: 0.35rem; }

/* ---- 3. Item tier path ---- */
.pres-ipath {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    max-width: 1100px;
    margin: 0 auto;
}

.pres-ipath-track {
    padding: 1.1rem 1.2rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.14);
}

.pres-ipath-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold, #fbbf24);
}

.pres-ipath-chain {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pres-ipath-step {
    position: relative;
    flex: 1 1 0;
    min-width: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.35rem;
}

/* gold chevron only between craft-path steps (cube recipes) */
.pres-ipath-craft > .pres-ipath-step + .pres-ipath-step::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 26px;
    width: 14px;
    height: 14px;
    border-top: 2px solid rgba(var(--gold-rgb, 251, 191, 36), 0.55);
    border-right: 2px solid rgba(var(--gold-rgb, 251, 191, 36), 0.55);
    transform: rotate(45deg);
}

.pres-ipath-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 35%, rgba(var(--gold-rgb, 251, 191, 36), 0.14), transparent 70%),
        rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.4);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6);
}

.pres-ipath-sm .pres-ipath-frame { width: 54px; height: 54px; }
.pres-ipath-lg .pres-ipath-frame { width: 82px; height: 82px; }

.pres-ipath-icon {
    max-width: 78%;
    max-height: 78%;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
}

.pres-ipath-noicon::after {
    content: "\f3ed";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.2rem;
    color: rgba(var(--gold-rgb, 251, 191, 36), 0.35);
}

.pres-ipath-body { margin-top: 0.55rem; }

.pres-ipath-name {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pres-parchment, #eadfc8);
}

.pres-ipath-lvl {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #f0cf8a;
    background: rgba(var(--gold-rgb, 251, 191, 36), 0.12);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.3);
    border-radius: 999px;
}

.pres-ipath-note {
    margin-top: 0.3rem;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--pres-parchment-dim, #c9bda2);
}

/* ---- 4. Responsive ---- */
@media (max-width: 900px) {
    .pres-sys-1-1 { grid-column: span 6; }
    .pres-sys-2-1,
    .pres-sys-2-2 { grid-column: 1 / -1; }
    .pres-sys-media { min-height: 210px; }
}

@media (max-width: 600px) {
    .pres-sys-grid { gap: 1rem; }
    .pres-sys-1-1,
    .pres-sys-2-1,
    .pres-sys-2-2 { grid-column: 1 / -1; }
    .pres-sys-media,
    .pres-sys-2-1 .pres-sys-media,
    .pres-sys-2-2 .pres-sys-media { min-height: 180px; }
    .pres-sysdetail-body { padding: 1.1rem 1.1rem 1.4rem; }

    /* the chain becomes a vertical timeline so nothing is cut off */
    /* column mode needs stretch - the base rule uses flex-start, which
       would size each row to its content width instead of full width */
    .pres-ipath-chain { flex-direction: column; align-items: stretch; overflow-x: visible; }
    .pres-ipath-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.85rem;
        min-width: 0;
        padding: 0.5rem 0;
    }
    .pres-ipath-craft > .pres-ipath-step + .pres-ipath-step::before {
        left: 30px;
        top: -8px;
        transform: rotate(135deg);
    }
    .pres-ipath-frame { flex: 0 0 auto; }
    .pres-ipath-body { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pres-sys-card,
    .pres-sys-img,
    .pres-sys-video { transition: none; }
    .pres-sys-card:hover { transform: none; }
    .pres-sys-card:hover .pres-sys-img,
    .pres-sys-card:hover .pres-sys-video { transform: none; }
}

/* =====================================================================
   V5 layer (2026-07-25) - image density: item icons on cards and grids,
   icon strips, freestanding render gallery.
   Item icons are served by /api/shop/icons/<vnum>.png and are 32-64px
   client TGAs upscaled - keep frames small and never stretch them.
   ===================================================================== */

/* ---- shared item-icon frame look (matches .pres-ipath-frame) ---- */
.pres-card-icon-img,
.pres-grid-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 35%, rgba(var(--gold-rgb, 251, 191, 36), 0.14), transparent 70%),
        rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.4);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6);
}

.pres-card-icon-img {
    width: 60px;
    height: 60px;
}

.pres-card-img {
    max-width: 44px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}

.pres-grid-frame {
    width: 72px;
    height: 72px;
}

.pres-grid-img {
    max-width: 52px;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

/* An icon that failed to load leaves an empty frame, not a broken image. */
.pres-noicon::after {
    content: '\f128';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    color: rgba(var(--gold-rgb, 251, 191, 36), 0.35);
}

/* ---- icon strip (dense row of item icons under a card / render) ---- */
.pres-iconstrip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}

.pres-iconstrip-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--gold-rgb, 251, 191, 36), 0.22);
    cursor: help;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.pres-iconstrip-cell:hover {
    border-color: rgba(var(--gold-rgb, 251, 191, 36), 0.7);
    transform: translateY(-2px);
}

.pres-iconstrip-icon {
    max-width: 30px;
    max-height: 30px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---- render_gallery: freestanding boss/character renders ---- */
.pres-rgal {
    display: grid;
    grid-template-columns: repeat(var(--pres-cols, 4), 1fr);
    gap: 1.4rem;
}

.pres-rgal-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 1.4rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.25));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pres-rgal-card.is-zoomable { cursor: zoom-in; }

.pres-rgal-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--primary-rgb, 204, 0, 0), 0.55);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

/* The stage is a lit pedestal: the render stands on it, bottom-anchored,
   so cut-out PNGs of very different heights still line up. */
.pres-rgal-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 260px;
    padding: 1rem 0.6rem 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(var(--primary-rgb, 204, 0, 0), 0.3), transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 20%, rgba(var(--gold-rgb, 251, 191, 36), 0.07), transparent 70%);
}

.pres-rgal-sm .pres-rgal-stage { height: 200px; }
.pres-rgal-lg .pres-rgal-stage { height: 330px; }

.pres-rgal-stage::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 6px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65), transparent 70%);
}

.pres-rgal-img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.65));
    transition: transform 0.3s ease;
}

.pres-rgal-card:hover .pres-rgal-img { transform: scale(1.05) translateY(-4px); }

.pres-rgal-body { padding: 1.1rem 1.25rem 0; }

.pres-rgal-name {
    font-family: var(--pres-display, 'Cinzel', serif);
    font-size: 1.1rem;
    margin-bottom: 0.55rem;
}

.pres-rgal-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.pres-rgal-desc { color: var(--text-muted, #9ca3af); font-size: 0.88rem; line-height: 1.55; }

.pres-rgal-droplabel {
    margin-top: 0.9rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb, 251, 191, 36), 0.75);
}

.pres-rgal-drops { margin-top: 0.4rem; }

@media (max-width: 900px) {
    .pres-grid.pres-grid-icons { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
    .pres-rgal { grid-template-columns: repeat(3, 1fr); }
    .pres-rgal-stage { height: 210px; }
    .pres-rgal-lg .pres-rgal-stage { height: 250px; }
}

@media (max-width: 600px) {
    .pres-grid.pres-grid-icons { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.7rem; }
    .pres-rgal { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .pres-rgal-stage { height: 170px; }
    .pres-rgal-lg .pres-rgal-stage { height: 190px; }
    .pres-rgal-body { padding: 0.9rem 0.9rem 0; }
    .pres-rgal-name { font-size: 0.98rem; }
    .pres-grid-frame { width: 60px; height: 60px; }
    .pres-grid-img { max-width: 44px; max-height: 44px; }
    .pres-iconstrip-cell { width: 34px; height: 34px; }
    .pres-iconstrip-icon { max-width: 26px; max-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .pres-rgal-card,
    .pres-rgal-img,
    .pres-iconstrip-cell { transition: none; }
    .pres-rgal-card:hover { transform: none; }
    .pres-rgal-card:hover .pres-rgal-img { transform: none; }
    .pres-iconstrip-cell:hover { transform: none; }
}

/* V9 - apprentice chest reward lists inside step_selector */
.pres-reward-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.45rem 1rem;
}
.pres-reward-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.92rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
}
.pres-reward-list .pres-itemicon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: 0 0 32px;
    image-rendering: pixelated;
}
.pres-step-panel .pres-body p {
    margin: 0.35rem 0 0.55rem;
}
@media (max-width: 600px) {
    .pres-reward-list { grid-template-columns: 1fr; }
}


/* Ingame-style catalog item tooltip (ThinBoard look) */
.m2-item-tip-host {
    cursor: help;
}

.m2-item-tip {
    position: absolute;
    z-index: 12000;
    width: 190px;
    min-width: 160px;
    max-width: 260px;
    padding: 10px 8px 12px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid #555;
    box-shadow:
        0 0 0 1px #000,
        0 8px 24px rgba(0, 0, 0, 0.55);
    color: #c2c2c2;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
    font-family: Tahoma, "Segoe UI", sans-serif;
}

.m2-item-tip-open {
    display: block;
}

.m2-item-tip-line {
    word-break: break-word;
}

.m2-item-tip-title {
    color: #f2e7c1;
    font-weight: 600;
    margin-bottom: 2px;
}

.m2-item-tip-space {
    height: 5px;
}

.m2-item-tip-sep {
    margin: 8px 16px 6px;
    border-top: 1px solid #555;
    border-bottom: 1px solid #000;
    height: 0;
}

.m2-item-tip-extra-title {
    color: #ffb96d;
    font-weight: 600;
    margin-top: 2px;
}

.m2-item-tip-extra-body {
    color: #c2c2c2;
    font-size: 11px;
    line-height: 1.45;
    margin-top: 2px;
    text-align: center;
}

/* When proto tooltip is attached, hide legacy CMS tip bubble */
.pres-grid-item.m2-item-tip-host .pres-tooltip {
    display: none;
}

.m2-item-tip-sock {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    margin: 4px 2px;
    padding: 2px 0;
}

.m2-item-tip-sock-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: 0 0 32px;
    image-rendering: pixelated;
}

.m2-item-tip-sock-text {
    flex: 1 1 auto;
    min-width: 0;
}

.m2-item-tip-sock-meta {
    font-size: 11px;
    line-height: 15px;
    margin-top: 1px;
}

.pres-ipath-look {
    margin-top: 2.5rem;
}

.pres-ipath-look-heading {
    font-family: Cinzel, serif;
    font-size: 1.15rem;
    margin: 0 0 1rem;
    color: var(--pres-gold, #e8d5a3);
}

/* ---- V18 compact data lists ---- */
/* One row per entry. Drops/rewards are an icon strip: chance under the
   icon, stack count in its corner, the name in the ingame tooltip. */
.pres-cl-wrap { overflow-x: auto; max-width: 100%; margin: 0 auto; }
.pres-cl {
    width: 100%;
    min-width: 640px;
    table-layout: fixed;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 12px;
    overflow: hidden;
}
.pres-cl th {
    text-align: left;
    padding: 0.5rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(var(--primary-rgb, 204, 0, 0), 0.12);
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}
.pres-cl td {
    padding: 0.4rem 0.7rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.88rem;
}
.pres-cl tr:last-child td { border-bottom: 0; }
.pres-cl tbody tr:hover td { background: rgba(255, 255, 255, 0.035); }
.pres-cl.is-boss  th:nth-child(1), .pres-cl.is-boss  td:nth-child(1) { width: 23%; }
.pres-cl.is-boss  th:nth-child(2), .pres-cl.is-boss  td:nth-child(2) { width: 21%; }
.pres-cl.is-metin th:nth-child(1), .pres-cl.is-metin td:nth-child(1) { width: 23%; }
.pres-cl.is-metin th:nth-child(2), .pres-cl.is-metin td:nth-child(2) { width: 23%; }
.pres-cl.is-bio   th:nth-child(1), .pres-cl.is-bio   td:nth-child(1) { width: 8%; }
.pres-cl.is-bio   th:nth-child(2), .pres-cl.is-bio   td:nth-child(2) { width: 30%; }
.pres-cl.is-chest th:nth-child(1), .pres-cl.is-chest td:nth-child(1) { width: 8%; }
.pres-cl.is-chest th:nth-child(2), .pres-cl.is-chest td:nth-child(2) { width: 26%; }
.pres-cl-ent { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.pres-cl-thumb { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
.pres-cl-thumb.is-round { border-radius: 8px; }
.pres-cl-ent > .pres-itemicon {
    width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; image-rendering: pixelated;
}
.pres-cl-txt { min-width: 0; }
.pres-cl-nm {
    display: inline; font-weight: 700; font-size: 0.9rem; line-height: 1.25;
    color: rgba(255, 255, 255, 0.94);
}
.pres-cl-sub { display: block; font-size: 0.76rem; line-height: 1.3; opacity: 0.55; }
.pres-cl-lv {
    display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.36rem;
    border-radius: 6px; font-size: 0.7rem; font-weight: 700; white-space: nowrap;
    color: var(--gold, #e8c07a);
    background: rgba(var(--primary-rgb, 204, 0, 0), 0.16);
}
.pres-cl-lv.is-solo { margin-left: 0; }
.pres-cl-meta { font-size: 0.82rem; line-height: 1.3; opacity: 0.72; }
.pres-cl-chip {
    display: inline-block; margin: 0.1rem 0.25rem 0.1rem 0; padding: 0.05rem 0.4rem;
    border-radius: 6px; font-size: 0.72rem; line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.pres-cl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem; }
.pres-cl-or { font-size: 0.72rem; opacity: 0.5; margin-left: 0.3rem; }
.pres-cl-plus { display: block; font-size: 0.76rem; opacity: 0.65; margin-top: 0.2rem; }
.pres-cl-plus .pres-cl-drops { display: inline-flex; vertical-align: middle; margin-left: 0.2rem; }
.pres-cl-empty { font-size: 0.8rem; opacity: 0.45; }
.pres-cl-drops {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.15rem 0.25rem;
}
.pres-cl-drops li {
    position: relative; width: 40px; text-align: center; line-height: 1;
}
.pres-cl-drops .pres-itemicon {
    width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated;
}
.pres-cl-drops b {
    display: block; margin-top: 1px; font-size: 0.63rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.58); white-space: nowrap;
}
.pres-cl-drops i {
    position: absolute; top: 15px; right: 3px;
    padding: 0 2px; border-radius: 4px;
    font-size: 0.6rem; font-style: normal; font-weight: 700; line-height: 1.25;
    color: #fff; background: rgba(0, 0, 0, 0.72);
}
.pres-cl-drops.is-plain li { width: 34px; }
.pres-cl-grp {
    margin: 1.6rem 0 0.5rem; font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--gold, #e8c07a); opacity: 0.85;
}
.pres-cl-grp:first-child { margin-top: 0; }
.pres-cl-note { margin: 0.8rem 0 0; font-size: 0.8rem; line-height: 1.5; opacity: 0.55; }
.pres-cl-note .pres-itemicon {
    width: 22px; height: 22px; vertical-align: -5px; image-rendering: pixelated;
}
.pres-table-tight th, .pres-table-tight td { padding: 0.42rem 0.7rem; font-size: 0.85rem; }
.pres-table-tight .pres-reward-list { margin: 0.15rem 0 0; gap: 0.1rem 0.7rem; }
.pres-table-tight .pres-reward-list li { font-size: 0.82rem; line-height: 1.25; }
.pres-table-tight .pres-reward-list .pres-itemicon { width: 24px; height: 24px; flex: 0 0 24px; }
.pres-table-tight p { margin: 0.1rem 0; }
@media (max-width: 700px) {
    .pres-cl { min-width: 560px; }
    .pres-cl-thumb { width: 34px; height: 34px; flex: 0 0 34px; }
    .pres-cl-nm { font-size: 0.85rem; }
}
/* ---- end V18 compact data lists ---- */