/* Flik Explorer - the live tour's page (Pixel Streaming). The app's own tokens (SFlikUIKit.h FlikUI::Col): the dark surface
   101713, ivory F5F2E9, the primary 2FD06B with its deep ink 0B2A17; Manrope for the interface, Instrument Serif for the
   project's name (Content/Fonts, SIL OFL). */
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
    --coal: #101713;
    --coal-raised: #1b241e;
    --ivory: #f5f2e9;
    --ivory-muted: #c1cac3;
    --ivory-faint: rgba(245, 242, 233, 0.56);
    --line: rgba(245, 242, 233, 0.14);
    --primary: #2fd06b;
    --primary-hover: #4adb7f;
    --primary-pressed: #26b95d;
    --on-primary: #0b2a17;
    --accent: #22e55a;
    --cyan: #2cc9f5;
    --ok: #2fd06b;
    --fair: #e8b04a;
    --weak: #e5484d;
    --glass: rgba(16, 23, 19, 0.58);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    height: 100%;
    background: var(--coal);
    color: var(--ivory);
    font: 500 15px/1.45 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}
button { font: inherit; color: inherit; }

/* ---- the stream: the whole window, the picture letterboxed on the dark surface */
#stage { position: fixed; inset: 0; background: var(--coal); touch-action: none; }
#stage video { object-fit: contain; background: var(--coal); outline: none; }

/* ---- the splash: before the tour, while it waits, and whenever the tour is not live */
#splash {
    position: fixed; inset: 0; z-index: 20;
    display: grid; place-items: center;
    padding: calc(24px + var(--safe-t)) calc(20px + var(--safe-r)) calc(24px + var(--safe-b)) calc(20px + var(--safe-l));
    background:
        radial-gradient(1100px 620px at 50% -12%, rgba(47, 208, 107, 0.16), transparent 62%),
        radial-gradient(900px 560px at 50% 118%, rgba(44, 201, 245, 0.08), transparent 60%),
        var(--coal);
    transition: opacity 0.6s var(--ease), visibility 0.6s, background 0.8s var(--ease), backdrop-filter 0.8s var(--ease);
}
/* the live picture behind frosted glass once it has arrived: the tour is already there, waiting for one tap */
#splash.glass {
    background: rgba(16, 23, 19, 0.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
}
#splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }

.card { width: min(460px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.logo {
    width: 76px; height: 76px; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 229, 90, 0.45), 0 10px 30px rgba(0, 0, 0, 0.45);
    animation: breathe 2.8s var(--ease) infinite;
}
.ready .logo, .live .logo { animation: none; box-shadow: 0 0 0 6px rgba(34, 229, 90, 0.10), 0 10px 30px rgba(0, 0, 0, 0.45); }
@keyframes breathe {
    0% { box-shadow: 0 0 0 0 rgba(34, 229, 90, 0.42), 0 10px 30px rgba(0, 0, 0, 0.45); }
    70% { box-shadow: 0 0 0 18px rgba(34, 229, 90, 0), 0 10px 30px rgba(0, 0, 0, 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(34, 229, 90, 0), 0 10px 30px rgba(0, 0, 0, 0.45); }
}
.eyebrow {
    margin-top: 26px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    animation: live 1.6s ease-in-out infinite;
}
@keyframes live { 50% { opacity: 0.35; } }
h1 {
    margin: 10px 0 0;
    font: 400 clamp(40px, 7.4vw, 66px)/1.02 'Instrument Serif', Georgia, serif;
    letter-spacing: -0.01em;
    color: var(--ivory);
    text-wrap: balance;
}
.place { margin-top: 10px; font-size: 15px; color: var(--ivory-muted); }
.place:empty { display: none; }

.status { margin-top: 30px; min-height: 22px; font-size: 14px; font-weight: 600; color: var(--ivory); }
.detail { margin-top: 6px; min-height: 20px; font-size: 13px; color: var(--ivory-faint); max-width: 360px; text-wrap: pretty; }
.track { margin-top: 16px; width: 168px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.track::after {
    content: ''; display: block; height: 100%; width: 42%; border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--cyan));
    animation: slide 1.5s var(--ease) infinite;
}
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.ready .track, .busy .track, .lost .track, .paused .track, .expired .track { visibility: hidden; }

.actions { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 52px; }
.cta {
    height: 54px; padding: 0 30px 0 32px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--primary); color: var(--on-primary);
    font-size: 16px; font-weight: 700; letter-spacing: 0.01em;
    display: inline-flex; align-items: center; gap: 12px;
    box-shadow: 0 10px 28px rgba(47, 208, 107, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.18s var(--ease), background 0.18s, box-shadow 0.18s;
    animation: rise 0.6s var(--ease) both;
}
.cta:hover { background: var(--primary-hover); box-shadow: 0 14px 34px rgba(47, 208, 107, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.cta:active { transform: scale(0.97); background: var(--primary-pressed); }
.cta svg { width: 18px; height: 18px; }
.ghost {
    height: 44px; padding: 0 22px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: rgba(245, 242, 233, 0.06); color: var(--ivory);
    font-size: 14px; font-weight: 600;
    transition: background 0.18s, border-color 0.18s;
}
.ghost:hover { background: rgba(245, 242, 233, 0.12); border-color: rgba(245, 242, 233, 0.26); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hint { font-size: 12px; color: var(--ivory-faint); letter-spacing: 0.02em; }
.hint:empty { display: none; }

.powered {
    position: fixed; left: 0; right: 0; bottom: calc(18px + var(--safe-b));
    display: flex; justify-content: center; align-items: center; gap: 8px;
    font-size: 12px; color: var(--ivory-faint); letter-spacing: 0.04em;
}
.powered img { width: 18px; height: 18px; border-radius: 50%; }
@media (max-height: 520px) {
    .logo { width: 56px; height: 56px; }
    .eyebrow { margin-top: 16px; }
    h1 { font-size: clamp(34px, 6vw, 48px); }
    .status { margin-top: 18px; }
    .actions { margin-top: 14px; }
    .powered { display: none; }
}

/* ---- the quiet controls: lower left, out of the way, gone after a few still seconds */
#dock {
    position: fixed; z-index: 15;
    left: calc(12px + var(--safe-l)); bottom: calc(12px + var(--safe-b));
    display: flex; gap: 8px; align-items: center;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
#dock.hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }
.chip {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    display: grid; place-items: center; cursor: pointer; padding: 0;
    color: var(--ivory);
    transition: background 0.18s, border-color 0.18s;
}
.chip:hover { background: rgba(27, 36, 30, 0.82); border-color: rgba(245, 242, 233, 0.26); }
.chip svg { width: 17px; height: 17px; }
.chip[hidden] { display: none; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ivory-faint); transition: background 0.4s, box-shadow 0.4s; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(47, 208, 107, 0.7); }
.dot.fair { background: var(--fair); box-shadow: 0 0 8px rgba(232, 176, 74, 0.6); }
.dot.weak { background: var(--weak); box-shadow: 0 0 8px rgba(229, 72, 77, 0.6); }
.tip {
    height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center;
    background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ivory); white-space: nowrap;
    opacity: 0; transform: translateX(-4px); transition: opacity 0.25s, transform 0.25s var(--ease); pointer-events: none;
}
.tip.on { opacity: 1; transform: none; }

/* ---- small cards over the live tour: still there? / a toast */
.sheet {
    position: fixed; z-index: 30; left: 50%; bottom: calc(24px + var(--safe-b));
    transform: translate(-50%, 16px); opacity: 0; visibility: hidden;
    width: min(420px, calc(100% - 32px));
    padding: 18px 20px; border-radius: 22px;
    background: rgba(16, 23, 19, 0.82); -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
    border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; gap: 16px;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.sheet.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sheet .text { flex: 1; min-width: 0; }
.sheet .title { font-size: 15px; font-weight: 700; }
.sheet .sub { font-size: 13px; color: var(--ivory-muted); margin-top: 2px; }
.sheet .cta { height: 44px; padding: 0 20px; font-size: 14px; box-shadow: none; animation: none; }

/* ---- turn your phone: the tour is landscape */
#rotate {
    position: fixed; inset: 0; z-index: 25; display: none;
    place-items: center; text-align: center; padding: 32px;
    background: rgba(16, 23, 19, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
#rotate.on { display: grid; }
#rotate svg { width: 64px; height: 64px; color: var(--primary); animation: turn 2.4s var(--ease) infinite; }
@keyframes turn { 0%, 20% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
#rotate .title { margin-top: 18px; font: 400 34px/1.1 'Instrument Serif', Georgia, serif; }
#rotate .sub { margin-top: 8px; font-size: 14px; color: var(--ivory-muted); }
#rotate .ghost { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ---- the host page (this PC): the QR code for phones and the tour's state */
body.host { overflow: auto; -webkit-user-select: text; user-select: text; }
.host main {
    min-height: 100%; display: grid; place-items: center; padding: 40px 24px;
    background: radial-gradient(1100px 620px at 50% -12%, rgba(47, 208, 107, 0.14), transparent 62%), var(--coal);
}
.host .panel { width: min(880px, 100%); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
@media (max-width: 760px) { .host .panel { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.host h1 { font-size: clamp(40px, 6vw, 60px); }
.host .lede { margin-top: 12px; color: var(--ivory-muted); font-size: 16px; max-width: 460px; }
.host .rows { margin-top: 26px; display: grid; gap: 10px; max-width: 480px; }
.host .row {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    background: rgba(245, 242, 233, 0.05); border: 1px solid var(--line); font-size: 14px;
}
.host .row b { font-weight: 700; }
.host .row .url { font-family: 'Manrope', monospace; font-weight: 600; color: var(--ivory); word-break: break-all; }
.host .row .sp { flex: 1; }
.host .qr {
    width: 300px; padding: 18px; border-radius: 24px; background: var(--ivory);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); text-align: center; color: var(--coal);
}
.host .qr svg, .host .qr img { width: 100%; height: auto; display: block; }
.host .qr .cap { margin-top: 10px; font-size: 13px; font-weight: 700; }
.host .tools { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .host .tools { justify-content: center; } .host .rows { justify-items: stretch; width: 100%; } }