/* ==========================================================================
   KOCIAL — free-roam ("play") mode overlay.

   The deck is the default. Pressing "Enter the world" hands the controls to
   the visitor: the slides step aside, the world fills the frame, and this
   HUD comes up over it. Esc gives the deck back.
   ========================================================================== */

/* ---------- mode switch ---------- */
.slide, .rail{ transition:opacity .45s var(--ease), visibility .45s, transform .6s var(--ease-out) }
.app[data-play="on"] .deck .slide,
.app[data-play="on"] .rail{ opacity:0; visibility:hidden; pointer-events:none }

.play-only{ display:none }
.app[data-play="on"] .play-only{ display:flex }
.app[data-play="on"] .deck-only{ display:none }

/* the world becomes interactive only in play mode */
.app__gl{ pointer-events:none }
.app[data-play="on"] .app__gl{ pointer-events:auto; cursor:crosshair }

/* ---------- poster (first paint / no-WebGL) ---------- */
.app__poster{
  /* four coloured beacons standing in for the monuments, so the still view
     still says what the site is — and it is the first paint for everyone */
  background:
    radial-gradient(24% 30% at 15% 26%,rgba(37,229,255,.34),transparent 68%),
    radial-gradient(20% 26% at 38% 18%,rgba(168,85,247,.32),transparent 68%),
    radial-gradient(20% 26% at 62% 18%,rgba(255,61,87,.28),transparent 68%),
    radial-gradient(24% 30% at 85% 26%,rgba(255,201,60,.28),transparent 68%),
    radial-gradient(90% 60% at 50% 96%,rgba(37,229,255,.12),transparent 70%),
    linear-gradient(180deg,#05060b 0%,#070a14 42%,#05060b 100%);
}
.app__poster::after{
  content:'';position:absolute;inset:0;opacity:.32;
  background-image:linear-gradient(rgba(150,175,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(150,175,255,.10) 1px,transparent 1px);
  background-size:70px 70px;
  transform:perspective(400px) rotateX(66deg) scale(2.4);
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(transparent 44%,#000 82%);
  mask-image:linear-gradient(transparent 44%,#000 82%);
}

/* ---------- play HUD ---------- */
.phud{
  position:absolute;inset:0;z-index:12;pointer-events:none;
  font-family:'Space Grotesk',system-ui,sans-serif;
  opacity:0;visibility:hidden;transition:.4s var(--ease);
}
.app[data-play="on"] .phud{opacity:1;visibility:visible}
.phud > *{pointer-events:auto}

.phud__exit{
  position:absolute;left:var(--pad);top:12px;
  padding:8px 15px;border-radius:99px;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
  background:color-mix(in srgb,var(--void) 74%,transparent);
  border:1px solid var(--line-strong);color:var(--ink-dim);backdrop-filter:blur(10px);
  transition:.25s var(--ease);
}
.phud__exit:hover{color:var(--ink);border-color:var(--brand)}

.phud__keys{
  position:absolute;right:var(--pad);bottom:14px;
  display:flex;flex-direction:column;gap:7px;align-items:flex-end;opacity:.9;
}
.phud__row{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--ink-dim)}
kbd{
  display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;
  border-radius:6px;background:rgba(255,255,255,.07);border:1px solid var(--line-strong);
  border-bottom-width:2px;font-family:'Space Grotesk',monospace;font-size:.68rem;
  font-weight:700;color:var(--ink);
}
@media (max-width:900px){ .phud__keys{display:none} }

/* minimap */
.minimap{
  position:absolute;right:var(--pad);top:12px;
  width:110px;height:110px;border-radius:14px;overflow:hidden;
  background:color-mix(in srgb,var(--void) 72%,transparent);
  border:1px solid var(--line-strong);backdrop-filter:blur(10px);
}
.minimap canvas{width:100%;height:100%}
@media (max-width:900px){ .minimap{width:78px;height:78px} }

/* ---------- monument pins ---------- */
.portals{position:absolute;inset:0;z-index:11;pointer-events:none;
  opacity:0;visibility:hidden;transition:.4s var(--ease)}
.app[data-play="on"] .portals{opacity:1;visibility:visible}
.portal{
  position:absolute;translate:-50% -100%;pointer-events:auto;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;will-change:transform;
  transition:opacity .3s var(--ease);
}
.portal[data-vis="false"]{opacity:0;pointer-events:none}
.portal__pin{
  display:flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:99px;white-space:nowrap;
  background:color-mix(in srgb,var(--void) 74%,transparent);
  border:1px solid var(--c);color:var(--c);backdrop-filter:blur(10px);
  font-family:'Space Grotesk';font-size:.75rem;font-weight:700;letter-spacing:.07em;
  box-shadow:0 0 24px -8px var(--c);transition:.25s var(--ease);
}
.portal__pin svg{width:16px;height:16px;flex:none}
.portal:hover .portal__pin,.portal[data-near="true"] .portal__pin{
  background:var(--c);color:#04060f;transform:translateY(-3px)}
.portal__hint{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);opacity:0;transition:.25s var(--ease);font-weight:600}
.portal[data-near="true"] .portal__hint{opacity:1}
.portal__stem{width:1px;height:24px;background:linear-gradient(var(--c),transparent)}
/* on a phone all four pins land in one band — show only the one you are at */
@media (max-width:700px){
  .portal{opacity:0;pointer-events:none}
  .portal[data-near="true"]{opacity:1;pointer-events:auto}
}

/* ---------- virtual joystick ---------- */
.stick{
  position:absolute;left:calc(var(--pad) - 4px);bottom:14px;z-index:14;
  width:118px;height:118px;border-radius:50%;display:none;place-items:center;
  background:radial-gradient(circle,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line-strong);backdrop-filter:blur(8px);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.app[data-touch="true"][data-play="on"] .stick{display:grid}
.stick__ring{position:absolute;inset:9px;border-radius:50%;border:1px dashed rgba(255,255,255,.13)}
.stick__nub{
  width:50px;height:50px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,var(--brand) 68%);
  box-shadow:0 0 22px var(--brand),0 6px 18px rgba(0,0,0,.5);
  will-change:transform;transition:transform .09s linear;
}
.tapbtn{
  position:absolute;right:var(--pad);bottom:18px;z-index:14;
  width:72px;height:72px;border-radius:50%;display:none;place-items:center;
  background:color-mix(in srgb,var(--brand) 18%,rgba(10,14,26,.7));
  border:1.5px solid var(--brand);color:var(--brand);backdrop-filter:blur(8px);
  font-family:'Space Grotesk';font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;
  cursor:pointer;touch-action:manipulation;
}
.app[data-touch="true"][data-play="on"] .tapbtn{display:grid}
.tapbtn:active{transform:scale(.93)}

/* ---------- in-world dialogue ---------- */
.talk{
  position:absolute;left:50%;bottom:112px;translate:-50% 10px;z-index:15;
  width:min(560px,calc(100vw - var(--pad) * 2));
  background:color-mix(in srgb,var(--surface) 93%,transparent);
  border:1px solid var(--accent-line);border-radius:var(--radius);
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--shadow),0 0 44px -20px var(--accent-glow);
  padding:16px 18px;display:flex;gap:14px;
  opacity:0;visibility:hidden;transition:.32s var(--ease-out);
}
.talk[data-open="true"]{opacity:1;visibility:visible;translate:-50% 0}
.talk__av{
  position:relative;width:48px;height:48px;border-radius:12px;flex-shrink:0;overflow:hidden;
  border:1px solid var(--accent-line);background:var(--accent-soft);
  display:grid;place-items:center;
}
.talk__av-fb{width:60%;height:60%;color:var(--accent);opacity:.85}
.talk__av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.talk__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.talk__who{font-family:'Space Grotesk';font-size:var(--t-xs);font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.talk__msg{font-size:.92rem;line-height:1.55;color:var(--ink);min-height:2.4em;
  font-family:'Inter',sans-serif}
.talk__msg .caret{display:inline-block;width:7px;height:1.05em;background:var(--accent);
  translate:0 2px;animation:blink .9s steps(2) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.talk__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.talk__close{position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:8px;
  border:0;background:transparent;color:var(--ink-mute);cursor:pointer;display:grid;
  place-items:center;font-size:1.15rem;line-height:1}
.talk__close:hover{color:var(--ink);background:rgba(255,255,255,.07)}
@media (max-width:640px){
  .talk{bottom:150px;padding:14px 15px;gap:11px}
  .talk__av{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){ .talk__msg .caret{animation:none} }

/* ---------- boot / status ---------- */
[data-enter][hidden]{display:none}
.boot{
  position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:16;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:.5s var(--ease);pointer-events:none;
}
.app[data-gl="ready"] .boot{opacity:0;visibility:hidden}
.boot__bar{width:150px;height:2px;background:rgba(255,255,255,.11);border-radius:2px;overflow:hidden}
.boot__bar i{display:block;height:100%;width:0;background:var(--brand-grad);
  box-shadow:0 0 12px var(--brand);transition:width .3s var(--ease)}
.boot__t{font-family:'Space Grotesk';font-size:var(--t-xs);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-mute);font-weight:600;text-align:center;
  max-width:min(90vw,44ch);line-height:1.6}

/* ==========================================================================
   Location card — the banner that drops in when you cross into a zone,
   the way a route name announces itself in a top-down RPG.
   ========================================================================== */
.zone{
  position:absolute; left:50%; top:22px; translate:-50% -14px; z-index:16;
  min-width:min(330px, 76vw); padding:12px 26px 13px;
  text-align:center; pointer-events:none;
  background:color-mix(in srgb,var(--void) 84%,transparent);
  border:1px solid var(--accent); border-radius:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 16px 44px -18px var(--accent),
             inset 0 0 26px -14px var(--accent);
  backdrop-filter:blur(14px);
  opacity:0; transition:opacity .35s var(--ease), translate .45s var(--ease-out);
}
.zone[data-show="true"]{opacity:1; translate:-50% 0}
.zone__name{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.28rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
  text-shadow:0 0 22px var(--accent);
}
.zone__tag{
  margin-top:3px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:600;
}
@media (max-width:640px){
  .zone{top:14px;padding:9px 18px 10px}
  .zone__name{font-size:1.02rem}
  .zone__tag{font-size:.62rem}
}

/* the dialogue now leads with the actual product, not a paragraph about it */
.talk{flex-wrap:wrap}
.talk__shot{
  width:100%; border-radius:11px; border:1px solid var(--accent-line);
  display:block; aspect-ratio:16/10; object-fit:cover; object-position:top left;
  background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));
  margin-bottom:2px;
}
.talk__shot[hidden]{display:none}
@media (max-width:640px){ .talk__shot{aspect-ratio:16/9} }

/* Town-only HUD has nothing to point at on a themed set. */
.app:not([data-world="town"]) .portals,
.app:not([data-world="town"]) .minimap{ display:none }