/* 221B Baker Street (3D) — HUD: Mrs Hudson's list, the clock, toasts,
   crosshair, and the touch controls. Loaded after /css/arcade.css. */

#bs-hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; font-family: Georgia, 'Times New Roman', serif; }
#bs-hud button { pointer-events: auto; font-family: inherit; }
body:not(.bs-live) #bs-list, body:not(.bs-live) #bs-clock, body:not(.bs-live) #bs-crosshair { display: none; }

#bs-crosshair {
    position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 50%; background: rgba(255, 244, 220, 0.75); box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    transition: transform 0.15s ease, background 0.15s ease;
}
#bs-crosshair.aimed { background: #ffd166; transform: scale(2.1); box-shadow: 0 0 10px rgba(255, 190, 90, 0.8); }

#bs-prompt {
    position: absolute; left: 50%; top: calc(50% + 26px); transform: translateX(-50%);
    background: rgba(12, 10, 8, 0.72); color: #f2e2bc; border: 1px solid rgba(214, 180, 110, 0.5);
    border-radius: 6px; padding: 0.2rem 0.6rem; font-size: 0.85rem; white-space: nowrap;
}

#bs-toast {
    position: absolute; left: 50%; bottom: 5.5rem; transform: translateX(-50%) translateY(8px);
    width: min(640px, 88vw); background: rgba(18, 13, 10, 0.9); color: #e8dcc2;
    border: 1px solid rgba(214, 180, 110, 0.55); border-radius: 10px; padding: 0.7rem 1rem;
    font-size: 0.95rem; line-height: 1.45; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}
#bs-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#bs-toast strong { color: #ffd166; }

#bs-clock {
    position: absolute; top: var(--bs-top, 3.2rem); left: 50%; transform: translateX(-50%);
    display: flex; gap: 0.8rem; align-items: baseline;
    background: rgba(14, 11, 9, 0.78); border: 1px solid rgba(214, 180, 110, 0.45); border-radius: 999px;
    padding: 0.25rem 1rem; color: #f2e2bc;
}
#bs-time { font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
#bs-count { font-size: 0.85rem; color: #c8b48a; }
#bs-clock.urgent #bs-time { color: #ff8a6a; animation: bs-pulse 1s ease-in-out infinite; }
@keyframes bs-pulse { 50% { opacity: 0.55; } }

#bs-list {
    position: absolute; top: var(--bs-top, 3.2rem); left: 0.8rem; width: min(330px, 46vw);
    background: linear-gradient(180deg, rgba(232, 220, 190, 0.96), rgba(214, 198, 160, 0.96));
    color: #2a1d12; border-radius: 6px; padding: 0.5rem 0.7rem 0.6rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(120, 90, 40, 0.25);
    pointer-events: auto; max-height: calc(100vh - 5rem); overflow: auto;
}
#bs-list-head {
    display: flex; justify-content: space-between; width: 100%; background: none; border: 0; padding: 0.1rem 0 0.35rem;
    color: #3a2412; font-size: 1rem; font-weight: bold; cursor: pointer; border-bottom: 1px solid rgba(90, 60, 30, 0.35);
}
#bs-items { list-style: none; margin: 0.35rem 0 0.4rem; padding: 0; }
#bs-items li { padding: 0.28rem 0; border-bottom: 1px dashed rgba(90, 60, 30, 0.22); transition: background 0.4s ease; }
#bs-items li:last-child { border-bottom: 0; }
#bs-items .bs-name { display: block; font-size: 0.92rem; font-weight: bold; }
#bs-items .bs-quote { display: block; font-size: 0.74rem; font-style: italic; color: #5a4430; line-height: 1.3; }
#bs-items li.found .bs-name { color: #2f6a2a; text-decoration: line-through; text-decoration-color: rgba(47, 106, 42, 0.6); }
#bs-items li.found .bs-quote { opacity: 0.6; }
#bs-items li.just { background: rgba(255, 210, 110, 0.55); }
#bs-hint-btn {
    width: 100%; background: #3a2412; color: #f6e6c0; border: 0; border-radius: 6px; padding: 0.4rem;
    font-size: 0.9rem; cursor: pointer;
}
#bs-hint-btn:hover { background: #5a3a1c; }
#bs-hint-btn small { opacity: 0.75; }
#bs-list.collapsed #bs-items, #bs-list.collapsed .bs-quote { display: none; }
#bs-list.collapsed { width: auto; }

.bs-topbtn {
    background: none; border: 1px solid #2a2f3a; color: #9a9a9a; border-radius: 6px;
    padding: 0.2rem 0.55rem; cursor: pointer; font-size: 0.85rem; margin-right: 0.5rem; font-family: inherit;
}
.bs-topbtn:hover { color: #ffd166; border-color: #6a5a3a; }

/* The overlay card in candlelight rather than neon */
body .game-overlay-card { border-color: rgba(214, 180, 110, 0.7); box-shadow: 0 0 50px rgba(255, 170, 80, 0.15); }
body .overlay-button { background: #d9a84e; color: #1a1006; }

/* Touch */
#bs-touch { position: absolute; inset: 0; pointer-events: none; }
#bs-stick {
    position: absolute; left: 1.2rem; bottom: 1.4rem; width: 120px; height: 120px; border-radius: 50%;
    background: rgba(20, 16, 12, 0.35); border: 2px solid rgba(214, 180, 110, 0.45);
    pointer-events: auto; touch-action: none;
}
#bs-knob {
    position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
    background: rgba(214, 180, 110, 0.6); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
#bs-use {
    position: absolute; right: 1.4rem; bottom: 2rem; width: 78px; height: 78px; border-radius: 50%;
    background: rgba(217, 168, 78, 0.85); border: 2px solid rgba(255, 230, 170, 0.8); font-size: 2rem;
    touch-action: manipulation;
}
.bs-touchmode #bs-toast { bottom: 9.5rem; }

@media (max-width: 700px) {
    /* this page's own top bar, kept to one line on a phone */
    #arcade-topbar { gap: 0.45rem; padding: 0.4rem 0.6rem; }
    #arcade-topbar .arcade-title { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
    #arcade-topbar .arcade-best { white-space: nowrap; font-size: 0.78rem; }
    #arcade-topbar .arcade-links { gap: 0.4rem; }
    #arcade-topbar .arcade-links a { padding: 0.2rem 0.45rem; white-space: nowrap; }
    .bs-topbtn { margin-right: 0; padding: 0.2rem 0.4rem; }
    #bs-list { width: min(300px, 70vw); }
    #bs-clock { top: auto; bottom: 0.6rem; }
    .bs-touchmode #bs-clock { bottom: auto; top: var(--bs-top, 3rem); left: auto; right: 0.6rem; transform: none; }
    #bs-toast { font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
    #bs-clock.urgent #bs-time { animation: none; }
}