/* AR-сторінка: свідомо одна темна тема (камера/ніч на вулиці). Лише фірмові Navy / Ivory / Crimson. */
:root{
  --crimson:#BC082F; --ivory:#FFFFF4; --navy:#15162F;
  --veil:color-mix(in srgb,var(--navy) 82%,transparent);
  --line:color-mix(in srgb,var(--ivory) 24%,var(--navy));
  --soft:color-mix(in srgb,var(--ivory) 74%,var(--navy));
  --f-display:"Cormorant Garamond",Georgia,serif;
  --f-body:"Source Serif 4",Georgia,serif;
  --gut-l:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--navy);color:var(--ivory);font:400 16px/1.5 var(--f-body);overflow:hidden;-webkit-text-size-adjust:100%}
h1,h2{font-family:var(--f-display);font-weight:600;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid transparent;
  font:600 16px/1 var(--f-body);text-decoration:none;cursor:pointer;color:var(--ivory)}
.btn--accent{background:var(--crimson)}
.btn--ghost{background:transparent;border-color:var(--line)}
.btn--big{min-height:56px;font-size:17px;width:100%}
.pill{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--veil);color:var(--ivory);font:600 14px/1 var(--f-body);cursor:pointer;flex:none}
.pill[aria-pressed="false"]{color:var(--soft)}

/* Камера на весь екран (MindAR вставляє video + canvas) */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--navy)}
.stage video,.stage canvas{position:absolute!important}

/* Демо: плакат ширший за екран, його тягнуть під прицілом */
.demo{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--navy);touch-action:none;cursor:grab;display:flex;align-items:flex-start;padding-top:calc(64px + env(safe-area-inset-top,0px))}
.demo__track{position:relative;height:min(44vh,150vw);will-change:transform}
.demo__track img{height:100%;width:auto;max-width:none;display:block;user-select:none;-webkit-user-drag:none}

/* Приціл */
.aim{position:fixed;left:50%;top:36%;z-index:3;width:64px;height:64px;transform:translate(-50%,-50%);pointer-events:none}
.aim::before,.aim::after{content:"";position:absolute;background:var(--ivory);box-shadow:0 0 6px rgba(21,22,47,.7)}
.aim::before{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  -webkit-mask:linear-gradient(#000 0 30%,transparent 30% 70%,#000 70%);mask:linear-gradient(#000 0 30%,transparent 30% 70%,#000 70%)}
.aim::after{top:50%;left:0;right:0;height:2px;transform:translateY(-50%);
  -webkit-mask:linear-gradient(90deg,#000 0 30%,transparent 30% 70%,#000 70%);mask:linear-gradient(90deg,#000 0 30%,transparent 30% 70%,#000 70%)}
.aim span{position:absolute;inset:18px;border:2px solid var(--ivory);border-radius:50%;box-shadow:0 0 6px rgba(21,22,47,.7);transition:transform .18s,border-color .18s}
.aim.is-hit span{border-color:var(--crimson);transform:scale(1.25)}
.aim.is-pulse span{animation:pulse .3s ease-out}
@keyframes pulse{0%{transform:scale(1.6)}100%{transform:scale(1.25)}}

/* Верхня панель */
.bar{position:fixed;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;gap:10px;
  padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px;padding-left:var(--gut-l);padding-right:var(--gut-r);
  background:transparent}
.bar__back{flex:none;font-size:14px;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:var(--veil);border:1px solid var(--line)}
.bar__hint{flex:1;min-width:0;text-align:center;font-size:14px;line-height:1.3;text-shadow:0 1px 3px rgba(21,22,47,.9)}

/* Нижня панель */
.panel{position:fixed;left:0;right:0;bottom:0;z-index:4;display:grid;gap:8px;
  padding-top:12px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));padding-left:var(--gut-l);padding-right:var(--gut-r);
  background:var(--veil);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);
  max-height:48vh;transition:transform .25s ease}
.panel.is-empty .panel__titles,.panel.is-empty .carousel,.panel.is-empty .panel__note{opacity:.35}
.panel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.panel__titles{min-width:0}
.panel__tag{font:italic 500 17px/1.2 var(--f-display);color:color-mix(in srgb,var(--crimson) 45%,var(--ivory))}
.panel h2{font-size:clamp(26px,7.4vw,36px)}
.dots{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex:none;padding-bottom:6px}
.dots li{width:10px;height:22px;border-radius:2px;background:var(--line);transition:background .15s,height .15s}
.dots li.is-on{background:var(--crimson);height:30px}
.carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r));padding-inline:var(--gut-l) var(--gut-r);-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.slide{flex:0 0 auto;scroll-snap-align:center;margin:0;display:grid;gap:4px;width:clamp(92px,25vw,150px)}
.slide img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;background:color-mix(in srgb,var(--ivory) 8%,var(--navy));border:2px solid transparent;transition:border-color .2s}
.slide.is-on img{border-color:var(--ivory)}
.slide figcaption{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--soft);line-height:1.3}
.panel__note{font-size:12.5px;color:var(--soft)}
.panel__actions{display:flex;gap:8px;flex-wrap:wrap}
.panel__actions .btn{flex:1 1 auto;min-height:44px;font-size:15px}

/* Старт */
.start{position:fixed;inset:0;z-index:10;overflow:auto;background:
  linear-gradient(to bottom,color-mix(in srgb,var(--navy) 55%,transparent),var(--navy) 62%),var(--navy);background-size:cover;background-position:center top;background-repeat:no-repeat}
.start__in{max-width:520px;margin-inline:auto;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;
  padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));padding-left:var(--gut-l);padding-right:var(--gut-r)}
.start__logo{height:44px;width:auto;fill:var(--ivory);align-self:flex-start}
.start h1{font-size:clamp(40px,11vw,60px);font-style:italic;font-weight:500}
.start__steps{margin:0;padding-left:1.3em;display:grid;gap:6px;color:var(--soft)}
.start__sound{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600}
.start__sound input{width:22px;height:22px;accent-color:var(--crimson)}
.start__fine{font-size:13px;color:var(--soft)}
.start__err{font-size:15px;border-left:3px solid var(--crimson);padding-left:12px}
.start__link{font-size:14px;color:var(--soft);text-underline-offset:3px;align-self:flex-start;min-height:32px}

@media (min-width:900px){
  .panel{left:auto;right:24px;bottom:24px;width:420px;border:1px solid var(--line);border-radius:8px;padding:18px}
  .carousel{margin-inline:-18px;padding-inline:18px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* --- компактний ігровий режим --- */
.stage video{filter:brightness(1.18) contrast(1.06) saturate(1.08)}
.panel{gap:6px;padding-top:10px;max-height:none;background:color-mix(in srgb,var(--navy) 72%,transparent)}
.panel__head{align-items:center;gap:10px}
.panel__titles{flex:1;min-width:0}
.panel h2{font-size:clamp(20px,5.6vw,28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel__tag{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{flex-direction:column;gap:2px;padding:0}
.dots li{width:16px;height:4px}
.dots li.is-on{height:4px;width:22px}
.btn--sm{min-height:44px;padding:0 16px;font-size:15px;flex:none}
.panel__more{background:none;border:0;color:var(--soft);font:600 13px/1 var(--f-body);text-align:left;padding:4px 0;min-height:32px;cursor:pointer}
.panel__more-box{display:grid;gap:8px}
.panel__actions{display:none}
.aim.is-tracking{opacity:0}
.aim{transition:opacity .25s}
@media (min-width:900px){.panel{width:380px}}

.demo__track{height:min(calc(100svh - 190px),190vw)}