/* Steam Talents 3D Experience overlay */
/* Hero — override base .hero (dark flex layout) for 3D preview */
.hero.hero-experience {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, #87ceeb 0%, #a8d4f0 50%, #c8e4f8 100%) !important;
    align-items: unset;
}
.hero-experience .xp-canvas-host {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.7s ease;
}
.hero-experience.xp-ready .xp-canvas-host {
    opacity: 1;
}
.hero-experience {
    position: relative;
    overflow: hidden;
}
.hero-experience .xp-loader { z-index: 40; }
.hero-experience .xp-tooltip { z-index: 11; }
.hero-experience canvas,
.xp-root canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.hero-experience-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 72px;
    background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(10,22,40,0.18) 65%, rgba(10,22,40,0.62) 100%);
    pointer-events: none;
}
.hero-experience-overlay .container { pointer-events: auto; }
.hero-experience-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: #00d4aa; margin-bottom: 14px;
}
.hero-experience-overlay h1 {
    font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 800; color: #fff;
    letter-spacing: -0.04em; line-height: 0.98; max-width: 16ch; margin-bottom: 16px;
}
.hero-experience-overlay p {
    color: rgba(255,255,255,0.78); font-size: clamp(0.95rem, 2vw, 1.15rem);
    max-width: 38rem; line-height: 1.55; margin-bottom: 28px;
}
.hero-experience-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.hero-skip {
    color: rgba(255,255,255,0.55); font-size: 0.82rem; font-weight: 600;
    border-bottom: 1px solid transparent; align-self: center;
}
.hero-skip:hover { color: #00d4aa; }

/* Technology classroom door buttons */
.hero-door {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 58px;
    min-width: 220px;
    padding: 3px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
    overflow: hidden;
    isolation: isolate;
}
.hero-door::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, #e8f4ff 0%, #a8cce8 45%, #5b9fd4 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.45) inset, 0 4px 18px rgba(0,102,255,0.22);
    z-index: 0;
}
.hero-door::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 14px;
    right: 14px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, #0066ff, #00d4aa, #0066ff);
    box-shadow: 0 0 10px rgba(0,212,170,0.75), 0 0 20px rgba(0,102,255,0.35);
    z-index: 2;
    opacity: 0.8;
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.hero-door-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 50px 14px 22px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(136,221,255,0.5) 0%, rgba(91,159,212,0.35) 55%, rgba(0,102,255,0.18) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.38);
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,40,80,0.35);
}
.hero-door-inner::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00d4aa;
    box-shadow: 0 0 6px #00d4aa;
    animation: hero-door-pulse 2.2s ease-in-out infinite;
}
.hero-door-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,0.03) 3px,
        rgba(255,255,255,0.03) 4px
    );
    pointer-events: none;
}
.hero-door-handle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 30px;
    border-radius: 99px;
    background: linear-gradient(180deg, #66ffdd, #00d4aa, #00a888);
    box-shadow: 0 0 10px rgba(0,212,170,0.85), 0 0 22px rgba(0,212,170,0.45), inset 0 1px 0 rgba(255,255,255,0.55);
    z-index: 3;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.hero-door-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: #00d4aa;
    box-shadow: 0 0 8px #00d4aa;
}
.hero-door-icon { font-size: 1.05rem; opacity: 0.92; flex-shrink: 0; }

.hero-door-primary::before {
    background: linear-gradient(145deg, #00d4aa 0%, #5b9fd4 48%, #0066ff 100%);
    box-shadow: 0 0 22px rgba(0,212,170,0.32), 0 4px 22px rgba(0,102,255,0.28), inset 0 1px 0 rgba(255,255,255,0.42);
}
.hero-door-primary .hero-door-inner {
    background: linear-gradient(135deg, rgba(0,212,170,0.38) 0%, rgba(0,102,255,0.42) 58%, rgba(91,159,212,0.4) 100%);
    font-weight: 800;
}
.hero-door-primary .hero-door-inner::before { background: #fff; box-shadow: 0 0 8px #fff; animation: hero-door-pulse-primary 1.8s ease-in-out infinite; }

.hero-door-secondary::before {
    background: linear-gradient(145deg, rgba(255,255,255,0.92) 0%, #c8dff5 50%, #88c0e8 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset, 0 4px 18px rgba(91,159,212,0.25);
}
.hero-door-secondary .hero-door-inner {
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(136,221,255,0.28) 100%);
    border-color: rgba(255,255,255,0.52);
}
.hero-door-secondary .hero-door-handle {
    background: linear-gradient(180deg, #aaddff, #0066ff, #0044bb);
    box-shadow: 0 0 10px rgba(0,102,255,0.85), 0 0 20px rgba(0,102,255,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}
.hero-door-secondary .hero-door-handle::before { background: #0066ff; box-shadow: 0 0 8px #0066ff; }

.hero-door:hover {
    transform: translateY(-3px) perspective(500px) rotateY(-3deg);
    box-shadow: 0 14px 36px rgba(0,102,255,0.32);
}
.hero-door:hover .hero-door-handle {
    transform: translateY(-50%) translateX(5px);
    box-shadow: 0 0 16px rgba(0,212,170,1), 0 0 32px rgba(0,212,170,0.55);
}
.hero-door-secondary:hover .hero-door-handle {
    box-shadow: 0 0 16px rgba(0,102,255,1), 0 0 32px rgba(0,102,255,0.55);
}
.hero-door:hover::after {
    opacity: 1;
    box-shadow: 0 0 14px rgba(0,212,170,0.95), 0 0 28px rgba(0,102,255,0.55);
}

[dir="rtl"] .hero-door-inner { padding: 14px 22px 14px 50px; }
[dir="rtl"] .hero-door-handle { right: auto; left: 15px; }
[dir="rtl"] .hero-door-handle::before { right: auto; left: 100%; margin-right: 0; margin-left: 5px; }
[dir="rtl"] .hero-door-inner::before { left: auto; right: 12px; }
[dir="rtl"] .hero-door:hover { transform: translateY(-3px) perspective(500px) rotateY(3deg); }
[dir="rtl"] .hero-door:hover .hero-door-handle { transform: translateY(-50%) translateX(-5px); }

@keyframes hero-door-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #00d4aa; }
    50% { opacity: 0.45; box-shadow: 0 0 12px #00d4aa; }
}
@keyframes hero-door-pulse-primary {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px #fff; }
    50% { opacity: 0.6; box-shadow: 0 0 14px #fff; }
}

.xp-body { margin: 0; overflow: hidden; background: #87ceeb; }
.xp-root {
    position: relative; width: 100%; height: 100dvh; height: 100vh; height: 100svh;
    background: linear-gradient(180deg, #87ceeb 0%, #a8d4f0 50%, #c8e4f8 100%); overflow: hidden; color: #fff;
    display: flex; flex-direction: column;
}
.xp-root, .xp-root * { box-sizing: border-box; }
.xp-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}
.xp-canvas-host { position: absolute; inset: 0; width: 100%; height: 100%; }
.xp-canvas-host canvas { width: 100% !important; height: 100% !important; display: block; }

.xp-loader {
    position: absolute; inset: 0; z-index: 40;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #b8d4f0 0%, #88c0e8 50%, #5b9fd4 100%); gap: 18px; transition: opacity 0.6s ease;
}
.xp-loader.is-done { opacity: 0; pointer-events: none; }
.xp-loader-mark {
    width: 56px; height: 56px; border-radius: 12px;
    background: linear-gradient(135deg, #0066ff, #00d4aa);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.xp-loader p { color: rgba(255,255,255,0.65); font-size: 0.9rem; letter-spacing: 0.04em; }
.xp-loader-bar { width: min(280px, 70vw); height: 3px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
.xp-loader-bar span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #0066ff, #00d4aa); transition: width 0.2s ease; }
.xp-loader-pct { font-size: 0.75rem; color: #00d4aa; font-weight: 700; letter-spacing: 0.12em; }

.xp-top, .xp-bottom, .xp-hint {
    z-index: 12;
    display: flex; align-items: center; justify-content: space-between;
    pointer-events: none;
}
.xp-top {
    position: relative; flex-shrink: 0;
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(10,22,40,0.55), rgba(10,22,40,0.15));
    gap: 10px;
}
.xp-btn-back {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px !important;
}
.xp-btn-back span { font-size: 0.72rem; }
.xp-brand {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xp-top-actions {
    margin-inline-start: auto;
    flex-shrink: 0;
}
.xp-bottom {
    position: relative; flex-shrink: 0;
    padding: 12px 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(10,22,40,0.65), rgba(10,22,40,0.12));
    gap: 10px; flex-wrap: wrap;
}
.xp-top > *, .xp-bottom > * { pointer-events: auto; }
.xp-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.92rem; color: #fff; text-decoration: none; }
.xp-brand span {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, #0066ff, #00d4aa);
    display: grid; place-items: center; font-size: 0.85rem;
}
.xp-top-actions, .xp-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.xp-btn {
    appearance: none; border: 1px solid rgba(255,255,255,0.14);
    background: rgba(10,22,40,0.72); color: rgba(255,255,255,0.88);
    padding: 9px 14px; border-radius: 8px; font: 650 0.75rem/1 Inter, sans-serif;
    letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-decoration: none;
    backdrop-filter: blur(10px);
}
.xp-btn:hover, .xp-btn.is-active { border-color: #00d4aa; color: #00d4aa; }
.xp-btn-accent { background: #00d4aa; color: #0a1628; border-color: #00d4aa; }
.xp-room-label { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.7); letter-spacing: 0.08em; text-transform: uppercase; }
.xp-hint {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 11;
    justify-content: center; pointer-events: none;
    color: rgba(255,255,255,0.72); font-size: 0.8rem; letter-spacing: 0.08em;
    text-align: center; padding: 0 16px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}

.xp-tooltip {
    position: absolute; z-index: 15;
    transform: translate(-50%, calc(-100% - 12px));
    background: rgba(10,22,40,0.94); border: 1px solid rgba(0,212,170,0.45);
    color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 0.8rem; font-weight: 600;
    pointer-events: none; white-space: nowrap; display: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    max-width: calc(100% - 20px);
    text-align: center;
}
.xp-tooltip.is-on { display: block; }

.xp-panel {
    position: absolute; z-index: 20; right: 20px; top: 50%;
    transform: translateY(-50%) translateX(24px);
    width: min(360px, calc(100% - 32px));
    background: rgba(10,22,40,0.94);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
    opacity: 0; pointer-events: none;
    transition: 0.35s cubic-bezier(0.4,0,0.2,1);
    backdrop-filter: blur(18px);
    overflow: hidden;
}
.xp-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.xp-panel-toggle {
    display: none;
    width: 100%; border: none; background: transparent; color: inherit;
    cursor: pointer; text-align: start; padding: 0;
}
.xp-panel-toggle-icon { display: none; }
.xp-panel-body { padding: 22px; }
.xp-panel:not(.is-open) .xp-panel-body { padding: 0; }
.xp-panel-kicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; color: #00d4aa; margin-bottom: 8px; display: block; }
.xp-panel-kicker-desktop { display: block; }
.xp-panel-body h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.02em; }
.xp-panel-body p { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.75); margin-bottom: 16px; min-height: 3em; }
.xp-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-panel-actions .xp-btn { flex: 1 1 calc(33% - 8px); min-width: 72px; justify-content: center; }
.xp-fallback {
    position: absolute; inset: 0; z-index: 30; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 32px; background: #0a1628; gap: 16px;
}
.xp-fallback.is-on { display: flex; }
.xp-fallback h2 { font-size: 1.5rem; font-weight: 800; }
.xp-fallback p { color: rgba(255,255,255,0.65); max-width: 28rem; }

@media (max-width: 768px) {
    .hero-experience { min-height: 92dvh; }
    .hero-experience-overlay { padding-bottom: 40px; }
    .hero-experience-actions { flex-direction: column; width: 100%; }
    .hero-door { width: 100%; min-width: 0; }
    .hero-door:hover { transform: translateY(-2px); }
    [dir="rtl"] .hero-door:hover { transform: translateY(-2px); }

    .xp-top { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); gap: 8px; }
    .xp-btn-back { padding: 8px 10px !important; }
    .xp-btn-back span { display: inline; }
    .xp-brand { font-size: 0.82rem; gap: 8px; }
    .xp-brand span { width: 28px; height: 28px; font-size: 0.75rem; }
    .xp-top-actions { gap: 6px; }
    .xp-btn { padding: 8px 10px; font-size: 0.68rem; }
    .xp-btn-exit { display: none; }

    .xp-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .xp-room-label { font-size: 0.72rem; text-align: center; }
    .xp-nav {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .xp-nav::-webkit-scrollbar { display: none; }
    .xp-bottom > .xp-btn { width: 100%; text-align: center; justify-content: center; }

    .xp-hint {
        bottom: 8px;
        font-size: 0.72rem;
    }

    .xp-panel {
        top: auto; bottom: 0; right: 0; left: 0; width: 100%;
        transform: translateY(110%);
        border-radius: 16px 16px 0 0;
        max-height: min(42vh, 320px);
        border-bottom: none;
    }
    .xp-panel.is-open { transform: translateY(0); }
    .xp-panel.is-minimized { max-height: 64px; }
    .xp-panel.is-minimized .xp-panel-body p,
    .xp-panel.is-minimized .xp-panel-actions { display: none; }
    .xp-panel.is-minimized .xp-panel-body { padding: 0 14px 10px; }
    .xp-panel.is-minimized .xp-panel-body h3 {
        margin: 0;
        font-size: 0.92rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.35;
    }
    .xp-panel.is-open + .xp-hint { opacity: 0; visibility: hidden; }
    .xp-panel-kicker-desktop { display: none; }
    .xp-panel-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px 0;
        width: 100%;
    }
    .xp-panel-toggle-icon {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: rgba(255,255,255,0.08);
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }
    .xp-panel.is-expanded .xp-panel-toggle-icon { transform: rotate(180deg); }
    .xp-panel-body { padding: 8px 14px 14px; max-height: calc(min(42vh, 320px) - 52px); overflow-y: auto; }
    .xp-panel-body p { min-height: 0; margin-bottom: 12px; font-size: 0.84rem; }
    .xp-panel-actions .xp-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        padding: 10px 8px;
        font-size: 0.65rem;
    }
    .xp-panel-actions .xp-btn-accent { flex: 1 1 100%; }
}