/* ===========================================================================
   3D Virtual Library — immersive shell, HUD, touch controls, book panel
   =========================================================================== */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #0b0f1a;
    color: #f4f6fb;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: none;
}

/* ---- Stage ------------------------------------------------------------- */
.lib3d-stage {
    position: fixed;
    inset: 0;
    touch-action: none;
    cursor: grab;
}
.lib3d-stage.dragging { cursor: grabbing; }
.lib3d-stage canvas { display: block; }

/* ---- Loader / entrance (cinematic) ------------------------------------- */
.lib3d-loader {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 22%, #1c2748 0%, #0b0f1a 55%, #060810 100%);
    transition: opacity .8s ease, visibility .8s ease;
}
.lib3d-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Animated background */
.lib3d-loader-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lib3d-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; mix-blend-mode: screen; }
.lib3d-orb.orb1 { width: 520px; height: 520px; left: -120px; top: -80px; background: #2f6dff; animation: lib3dDrift 18s ease-in-out infinite; }
.lib3d-orb.orb2 { width: 460px; height: 460px; right: -120px; top: 8%; background: #7b3cff; animation: lib3dDrift 22s ease-in-out infinite reverse; }
.lib3d-orb.orb3 { width: 420px; height: 420px; left: 34%; bottom: -170px; background: #c9883f; opacity: .35; animation: lib3dDrift 26s ease-in-out infinite; }
@keyframes lib3dDrift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.12); } }

/* Bookshelf silhouette along the bottom */
.lib3d-shelf {
    position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
    background: repeating-linear-gradient(90deg,
        rgba(150,80,60,0) 0px, rgba(150,80,60,.55) 2px, rgba(90,50,40,.55) 16px,
        rgba(60,90,110,.5) 18px, rgba(40,60,80,.5) 30px,
        rgba(150,120,60,.5) 32px, rgba(110,90,40,.5) 46px,
        rgba(150,80,60,0) 48px);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 45%, transparent 100%);
            mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 45%, transparent 100%);
    opacity: .35; filter: blur(.6px);
}

/* Drifting dust motes */
.lib3d-motes {
    position: absolute; inset: 0; opacity: .6;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,230,180,.85), transparent),
        radial-gradient(2px 2px at 70% 60%, rgba(200,220,255,.75), transparent),
        radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.65), transparent),
        radial-gradient(1.5px 1.5px at 85% 25%, rgba(255,230,180,.7), transparent),
        radial-gradient(2px 2px at 55% 12%, rgba(200,220,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 12% 65%, rgba(255,255,255,.55), transparent);
    animation: lib3dMotes 12s ease-in-out infinite alternate;
}
@keyframes lib3dMotes { from { transform: translateY(10px); } to { transform: translateY(-10px); } }

/* Glass card */
.lib3d-loader-inner {
    position: relative; z-index: 2;
    text-align: center; max-width: 460px; width: 88vw; padding: 40px 36px;
    border-radius: 22px;
    background: rgba(14,19,34,.55);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    animation: lib3dRise .8s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lib3dRise { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }

.lib3d-logo-img {
    width: min(320px, 74%); height: auto; display: block; margin: 0 auto 18px;
    filter: drop-shadow(0 6px 26px rgba(79,140,255,.45));
    animation: lib3dFloat 5s ease-in-out infinite, lib3dLogoIn .9s ease both;
}
@keyframes lib3dFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lib3dLogoIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

.lib3d-loader-title {
    font-size: 1.9rem; margin: 6px 0; font-weight: 800; letter-spacing: .4px;
    background: linear-gradient(90deg, #ffffff, #cfe0ff 55%, #e7c984);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lib3d-tagline { margin: 0 0 26px; color: #aab8d6; font-size: 1.02rem; }

.lib3d-progress {
    position: relative; width: 100%; height: 5px;
    background: rgba(255,255,255,.10); border-radius: 6px; overflow: hidden;
}
.lib3d-progress-bar {
    height: 100%; width: 0%; border-radius: 6px;
    background: linear-gradient(90deg, #4f8cff, #8a5bff, #e7c984);
    background-size: 200% 100%;
    box-shadow: 0 0 14px rgba(79,140,255,.7);
    transition: width .35s ease;
    animation: lib3dShimmer 2s linear infinite;
}
@keyframes lib3dShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.lib3d-status { color: #8a99bd; font-size: .85rem; margin: 12px 0 22px; min-height: 1.2em; letter-spacing: .3px; }

.lib3d-enter-btn {
    appearance: none; border: none; position: relative; overflow: hidden;
    padding: 15px 56px; font-size: 1.08rem; font-weight: 700; letter-spacing: .4px;
    border-radius: 999px; color: #fff;
    background: linear-gradient(90deg, #4f8cff, #8a5bff);
    cursor: pointer;
    transition: transform .15s ease, opacity .4s ease, box-shadow .25s ease;
    box-shadow: 0 10px 34px rgba(79,140,255,.45);
}
.lib3d-enter-btn:not(:disabled) { animation: lib3dPulse 2.4s ease-in-out infinite; }
@keyframes lib3dPulse { 0%, 100% { box-shadow: 0 10px 34px rgba(79,140,255,.45); } 50% { box-shadow: 0 10px 46px rgba(138,91,255,.72); } }
.lib3d-enter-btn:disabled { opacity: .45; cursor: default; box-shadow: none; animation: none; }
.lib3d-enter-btn:not(:disabled):hover { transform: translateY(-2px); }
.lib3d-enter-btn::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    animation: lib3dShine 3.2s ease-in-out infinite;
}
.lib3d-enter-btn:disabled::after { animation: none; opacity: 0; }
@keyframes lib3dShine { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } }

/* ---- HUD --------------------------------------------------------------- */
.lib3d-exit {
    position: static;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(12,16,28,.6);
    backdrop-filter: blur(8px);
    color: #e6ecfb;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.12);
    transition: background .2s ease;
    white-space: nowrap;
}
.lib3d-exit:hover { background: rgba(40,50,80,.8); }

/* Top-right HUD cluster — flex so buttons never overlap regardless of label length */
.lib3d-topright {
    position: fixed;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 31;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Audio toggle ------------------------------------------------------ */
.lib3d-audio {
    position: static;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12,16,28,.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
    color: #e6ecfb;
    font-size: 1rem;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background .2s ease;
}
.lib3d-audio:hover { background: rgba(40,50,80,.8); }
.lib3d-audio.on { background: rgba(79,140,255,.5); border-color: transparent; }

/* ---- Find a book ------------------------------------------------------- */
.lib3d-search {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 32;
    width: min(360px, 70vw);
}
.lib3d-search input {
    width: 100%;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(12,16,28,.7);
    backdrop-filter: blur(10px);
    color: #eef2fb;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}
.lib3d-search input::placeholder { color: #7e8db0; }
.lib3d-search input:focus { border-color: rgba(79,140,255,.7); background: rgba(16,22,38,.85); }

.lib3d-search-results {
    margin-top: 8px;
    border-radius: 14px;
    /* Clip horizontally (keeps rounded corners) but scroll vertically when the
       list is taller than the cap, so more than a handful of results stay
       reachable without covering the whole viewport. */
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(56vh, 420px);
    overscroll-behavior: contain;
    background: rgba(14,19,34,.95);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
    display: none;
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(79,140,255,.55) transparent;
}
.lib3d-search-results.open { display: block; }

/* WebKit scrollbar — slim, themed to the library's blue accent */
.lib3d-search-results::-webkit-scrollbar { width: 8px; }
.lib3d-search-results::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.lib3d-search-results::-webkit-scrollbar-thumb {
    background: rgba(79,140,255,.45);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.lib3d-search-results::-webkit-scrollbar-thumb:hover { background: rgba(79,140,255,.75); background-clip: padding-box; }

.lib3d-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: start;
    transition: background .15s ease;
}
.lib3d-result:hover, .lib3d-result.active { background: rgba(79,140,255,.2); }
.lib3d-result img {
    width: 30px;
    height: 44px;
    object-fit: cover;
    border-radius: 3px;
    background: #222a40;
    flex-shrink: 0;
}
.lib3d-result-text { min-width: 0; }
.lib3d-result-title { color: #eef2fb; font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib3d-result-author { color: #8a99bd; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib3d-result-empty { padding: 14px; color: #7e8db0; font-size: .85rem; text-align: center; }


/* ---- Current section indicator ---------------------------------------- */
.lib3d-now {
    position: fixed;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 26;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(12,16,28,.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,230,176,.2);
    color: #ffe6b0;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.lib3d-now.show { opacity: 1; }

/* ---- Jump-to-section menu --------------------------------------------- */
.lib3d-nav-toggle {
    position: fixed;
    top: 16px;
    inset-inline-start: 16px;
    z-index: 31;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(12,16,28,.6);
    backdrop-filter: blur(8px);
    color: #e6ecfb;
    border: 1px solid rgba(255,255,255,.12);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}
.lib3d-nav-toggle:hover { background: rgba(40,50,80,.8); }

.lib3d-nav {
    position: fixed;
    top: 58px;
    inset-inline-start: 16px;
    z-index: 30;
    width: 250px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px;
    border-radius: 14px;
    background: rgba(14,19,34,.92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.lib3d-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }

.lib3d-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #dce4f7;
    font-size: .9rem;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: background .15s ease;
}
.lib3d-nav-item:hover { background: rgba(79,140,255,.18); }
.lib3d-nav-item.active { background: linear-gradient(90deg, rgba(79,140,255,.35), rgba(138,91,255,.25)); color: #fff; }
.lib3d-nav-item .count { font-size: .78rem; color: #8a99bd; }
.lib3d-nav-item.active .count { color: #d9e2ff; }


.lib3d-hint {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(12,16,28,.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.1);
    font-size: .8rem;
    color: #cdd7ee;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    transition: opacity .6s ease;
}
.lib3d-hint.faded { opacity: 0; }
.lib3d-hint-touch { display: none; }

/* ---- Touch movement pad ------------------------------------------------ */
.lib3d-pad {
    position: fixed;
    bottom: 28px;
    inset-inline-start: 22px;
    z-index: 28;
    display: none;
    width: 150px;
    height: 150px;
}
.lib3d-pad-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(20,28,48,.6);
    backdrop-filter: blur(6px);
    color: #dce4f7;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.lib3d-pad-btn:active { background: rgba(79,140,255,.6); }
.lib3d-pad-btn.up    { top: 0;    left: 50px; }
.lib3d-pad-btn.down  { bottom: 0; left: 50px; }
.lib3d-pad-btn.left  { top: 50px; left: 0; }
.lib3d-pad-btn.right { top: 50px; right: 0; }

/* ---- Floor-plan minimap (toggled) ------------------------------------- */
.lib3d-minimap {
    position: fixed;
    bottom: 72px;
    inset-inline-end: 16px;
    z-index: 27;
    border-radius: 12px;
    background: rgba(10,14,24,.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    cursor: pointer;
    display: none;
}
body.lib3d-map-open:not(.lib3d-lobby) .lib3d-minimap { display: block; }

.lib3d-map-toggle {
    position: fixed;
    bottom: 18px;
    inset-inline-end: 16px;
    z-index: 28;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(12,16,28,.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.14);
    color: #e6ecfb;
    font-size: 1.2rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
body:not(.lib3d-lobby) .lib3d-map-toggle { display: flex; }
.lib3d-map-toggle:hover { background: rgba(40,50,80,.85); }
.lib3d-map-toggle.active { background: rgba(79,140,255,.55); border-color: transparent; }

/* ---- Book panel -------------------------------------------------------- */
.lib3d-book-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(.96);
    z-index: 40;
    width: min(620px, 92vw);
    display: flex;
    gap: 22px;
    padding: 24px;
    border-radius: 18px;
    background: rgba(16,21,38,.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.lib3d-book-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.lib3d-book-cover {
    width: 150px;
    min-width: 150px;
    height: 225px;
    object-fit: cover;
    border-radius: 8px;
    background: #222a40;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.lib3d-book-info { display: flex; flex-direction: column; min-width: 0; }
.lib3d-book-info h2 { margin: 4px 0 6px; font-size: 1.3rem; line-height: 1.25; }
.lib3d-book-author { margin: 0 0 10px; color: #9fb0d0; font-size: .95rem; }
.lib3d-book-meta { margin: 0 0 auto; color: #7e8db0; font-size: .85rem; }
.lib3d-book-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.lib3d-btn {
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    color: #e6ecfb;
    border: 1px solid rgba(255,255,255,.18);
    transition: background .2s ease, transform .15s ease;
}
.lib3d-btn:hover { transform: translateY(-1px); }
.lib3d-btn.primary { background: linear-gradient(90deg, #4f8cff, #8a5bff); border-color: transparent; }

.lib3d-book-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.1);
    color: #dce4f7;
    cursor: pointer;
    font-size: .9rem;
}
.lib3d-book-close:hover { background: rgba(255,255,255,.2); }

/* ---- Touch device tweaks ---------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .lib3d-pad { display: block; }
    .lib3d-hint-desktop { display: none; }
    .lib3d-hint-touch { display: inline; }
}

@media (max-width: 560px) {
    .lib3d-book-panel { flex-direction: column; align-items: center; text-align: center; }
    .lib3d-book-actions { justify-content: center; }
}

/* ===========================================================================
   Multi-language lobby + transitions (2A)
   =========================================================================== */

/* Arabic-capable font for canvas signage */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Cairo-400.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/Cairo-600.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Cairo-700.ttf') format('truetype');
    font-display: swap;
}

/* Poppins — the site's primary font (self-hosted) */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Poppins-800.woff2') format('woff2'); }

/* Arabic UI uses Cairo */
body.lib3d-rtl,
body.lib3d-rtl .lib3d-search input,
body.lib3d-rtl .lib3d-nav-item,
body.lib3d-rtl .lib3d-now,
body.lib3d-rtl .lib3d-lobby-hint {
    font-family: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', sans-serif;
}

/* Form controls don't inherit font-family by default — force them to use the
   site font (Poppins, or Cairo in RTL via the body rule above). */
.lib3d-exit, .lib3d-lobby-btn, .lib3d-audio, .lib3d-nav-toggle, .lib3d-nav-item,
.lib3d-search input, .lib3d-result, .lib3d-enter-btn, .lib3d-book-close, .lib3d-btn,
.lib3d-pad-btn {
    font-family: inherit;
}

/* Transition fade overlay */
.lib3d-fade {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: #0b0f1a;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    pointer-events: none;
}
.lib3d-fade.show { opacity: 1; visibility: visible; }

/* Return-to-lobby button (only in a wing) */
.lib3d-lobby-btn {
    position: static;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(12,16,28,.6);
    backdrop-filter: blur(8px);
    color: #e6ecfb;
    border: 1px solid rgba(255,255,255,.12);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: background .2s ease;
}
.lib3d-lobby-btn:hover { background: rgba(40,50,80,.8); }

/* Lobby guidance banner */
.lib3d-lobby-hint {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 26;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(12,16,28,.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,230,176,.25);
    color: #ffe6b0;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* While in the lobby, hide the wing-only HUD */
body.lib3d-lobby .lib3d-search,
body.lib3d-lobby .lib3d-nav-toggle,
body.lib3d-lobby .lib3d-nav,
body.lib3d-lobby .lib3d-minimap,
body.lib3d-lobby .lib3d-now,
body.lib3d-lobby .lib3d-hint,
body.lib3d-lobby .lib3d-pad,
body.lib3d-lobby .lib3d-lobby-btn { display: none !important; }

/* While in a wing, hide the lobby guidance */
body:not(.lib3d-lobby) .lib3d-lobby-hint { display: none; }

/* Inside a wing, replace the catalog "Exit" with "Back to Lobby" so you can
   step back and enter another language door without leaving the 3D library.
   The Exit link only shows in the lobby itself. */
body:not(.lib3d-lobby) .lib3d-exit { display: none; }

/* Shared book-detail modal (same as community feed) fade-in */
@keyframes mibModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===========================================================================
   Mobile layout — avoid top overlap, compact controls
   =========================================================================== */
@media (max-width: 600px) {
    /* Top row: compact buttons */
    .lib3d-nav-toggle { padding: 7px 11px; font-size: .78rem; }
    .lib3d-topright { gap: 6px; }
    .lib3d-exit, .lib3d-lobby-btn { padding: 7px 11px; font-size: .78rem; }
    .lib3d-audio { width: 34px; height: 34px; font-size: .95rem; }

    /* Search drops to its own row beneath the buttons (no overlap) */
    .lib3d-search { top: 60px; width: 94vw; }
    .lib3d-now { top: 106px; font-size: .8rem; }
    .lib3d-nav { top: 104px; width: 82vw; max-height: 58vh; }

    /* Hint clutters small screens */
    .lib3d-hint { display: none; }

    /* Smaller map */
    .lib3d-minimap { width: 124px; height: 194px; bottom: 72px; }

    /* Compact movement pad */
    .lib3d-pad { width: 138px; height: 138px; bottom: 22px; inset-inline-start: 16px; }
    .lib3d-pad-btn { width: 46px; height: 46px; }
    .lib3d-pad-btn.up    { left: 46px; }
    .lib3d-pad-btn.down  { left: 46px; }
    .lib3d-pad-btn.left  { top: 46px; }
    .lib3d-pad-btn.right { top: 46px; }

    .lib3d-lobby-hint { font-size: .85rem; padding: 8px 16px; white-space: normal; max-width: 86vw; text-align: center; }
}

/* Minimap CSS tooltip (genre name on room hover) */
.lib3d-map-tip {
    position: fixed;
    z-index: 40;
    max-width: 240px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(12,16,28,.94);
    color: #eef2fb;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    pointer-events: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translate(-100%, -130%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}
.lib3d-map-tip.show { opacity: 1; visibility: visible; }
.lib3d-map-tip .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }