/* =====================================================================
   scene.css — the sidebar, the item viewer (#puzzle-overlay /
   #item-stage), hotspots, the 360° hotspot layer and the video player.
   ===================================================================== */
:root {
    --sidebar-w: 112px;
}

/* ── Sidebar: revealed items (newest first, the 360° room last) ── */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    background: linear-gradient(90deg, rgba(18, 12, 7, 0.92), rgba(18, 12, 7, 0.78));
    border-right: 1px solid var(--gold-dim);
    pointer-events: auto;
}
#game-timer {
    font-family: var(--ui-font);
    font-size: 24px;
    text-align: center;
    color: #c36412;
    text-shadow: 0 1px 0 #000;
}
#item-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.item-thumb {
    position: relative;
    flex: none;
    padding: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    animation: thumb-in 0.5s ease;
}
.item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-thumb:hover { border-color: var(--gold-dim); }
.item-thumb.active { border-color: var(--gold); box-shadow: var(--glow-gold); }
.item-thumb.mine::after {
    content: "you";
    position: absolute;
    right: 3px;
    bottom: 3px;
    padding: 0 5px;
    font-size: 10px;
    color: var(--ink);
    background: var(--gold);
    border-radius: 3px;
}
@keyframes thumb-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }

.hud-btn {
    flex: none;
    padding: 6px 4px;
    font-family: var(--ui-font);
    font-size: 12px;
    color: var(--papyrus);
    background: rgba(224, 180, 76, 0.12);
    border: 1px solid var(--gold-dim);
    border-radius: 4px;
    cursor: pointer;
}
.hud-btn.off { opacity: 0.5; text-decoration: line-through; }

/* ── Item viewer ─────────────────────────────────────────────────── */
#puzzle-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--sidebar-w);
    z-index: 50;
    background: rgba(8, 5, 2, 0.92);
}
#puzzle-content {
    position: absolute;
    inset: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#item-stage {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-deep);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.stage-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}
.stage-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.hs {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.hs img { display: block; width: 100%; height: 100%; pointer-events: none; }
.hs.interactive { pointer-events: auto; cursor: pointer; }
.hs.interactive:hover { filter: brightness(1.12) drop-shadow(0 0 6px rgba(255, 220, 140, 0.55)); }
.hs.draggable { cursor: grab; }
.hs.dragging { cursor: grabbing; z-index: 999 !important; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6)); }
.hs.remote-drag { transition: left 0.08s linear, top 0.08s linear; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.hs.tapped { animation: hs-tap 0.18s ease; }
@keyframes hs-tap { 50% { transform: translate(-50%, -50%) scale(0.96); } }

.close-btn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    padding: 7px 14px;
    font-family: var(--ui-font);
    font-size: 14px;
    color: var(--papyrus);
    background: rgba(18, 12, 7, 0.85);
    border: 1px solid var(--gold-dim);
    border-radius: 4px;
    cursor: pointer;
}
.close-btn:hover { border-color: var(--gold); }

/* ── 360° hotspots (positioned by rooms.js) ──────────────────────── */
#pano-hotspots {
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}
#pano-hotspots.grabbing { cursor: grabbing; }
.pano-hs {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform;
}
.pano-hs img { display: block; width: 100%; height: 100%; pointer-events: none; }
.pano-hs.interactive { pointer-events: auto; cursor: pointer; }
.pano-hs.interactive:hover { filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 220, 140, 0.8)); }

/* ── Story video player ──────────────────────────────────────────── */
#video-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
#video-overlay video { width: 100%; height: 100%; object-fit: contain; }
.media-skip-btn {
    position: absolute;
    right: 18px;
    bottom: 18px;
    padding: 8px 16px;
    font-family: var(--ui-font);
    font-size: 14px;
    color: var(--papyrus);
    background: rgba(18, 12, 7, 0.7);
    border: 1px solid var(--gold-dim);
    border-radius: 4px;
    cursor: pointer;
}

/* ── Small screens: the sidebar becomes a bottom strip ──────────── */
@media (max-width: 700px) {
    :root { --sidebar-w: 0px; }
    #sidebar {
        top: auto;
        right: 0;
        width: auto;
        height: 84px;
        flex-direction: row;
        align-items: center;
        padding: 6px 8px;
        border-right: 0;
        border-top: 1px solid var(--gold-dim);
    }
    #game-timer { font-size: 18px; min-width: 64px; }
    #item-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; height: 100%; }
    .item-thumb { width: auto; height: 100%; }
    .hud-btn { font-size: 11px; }
    #puzzle-overlay { bottom: 84px; }
    #puzzle-content { inset: 44px 4px 4px; }
    .close-btn { top: -38px; }
}
@media (max-width: 700px) and (orientation: portrait) {
    #puzzle-content::after {
        content: "Tip: turn your phone sideways for a bigger view";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        text-align: center;
        font-size: 12px;
        color: var(--papyrus-dark);
        opacity: 0.7;
        pointer-events: none;
    }
}