* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; font-family: "Segoe UI", Inter, Arial, sans-serif; }
body { background: #101914; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tour {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background: #101914;
  user-select: none;
  isolation: isolate;
}

.canvasHost {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
}

.canvasHost .store-webgl-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.canvasHost :global(.store-webgl-canvas.is-dragging) { cursor: grabbing; }

.tour::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 12, 8, .76), transparent 18%, transparent 72%, rgba(3, 10, 7, .63)),
    radial-gradient(circle at center, transparent 57%, rgba(2, 8, 5, .34));
  pointer-events: none;
}

.header {
  position: absolute;
  z-index: 10;
  top: 20px;
  right: 24px;
  left: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
}

.brand,
.backLink,
.quickControls button,
.helpPanel button { pointer-events: auto; }

.brand {
  display: grid;
  width: 78px;
  height: 63px;
  place-items: center;
  overflow: hidden;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 15px;
  box-shadow: 0 12px 32px rgba(0,0,0,.2);
  backdrop-filter: blur(16px);
}

.brand img { width: 70px; height: 56px; object-fit: contain; }

.titleBlock {
  justify-self: center;
  display: grid;
  justify-items: center;
  padding: 10px 19px;
  background: rgba(2, 15, 9, .54);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(13px);
  text-shadow: 0 2px 12px rgba(0,0,0,.38);
}

.titleBlock h1 { margin: 0; font-size: 1.03rem; font-weight: 790; letter-spacing: -.025em; line-height: 1.2; }
.titleBlock span { margin-top: 2px; color: #a9e7b6; font-size: .62rem; font-weight: 680; letter-spacing: .13em; text-transform: uppercase; }

.backLink {
  justify-self: end;
  display: flex;
  min-height: 45px;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  color: white;
  background: rgba(3, 14, 9, .55);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 690;
  backdrop-filter: blur(14px);
}

.backLink svg { width: 20px; }

.scopeBadge {
  position: absolute;
  z-index: 8;
  top: 106px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 154px;
  padding: 11px 14px;
  background: rgba(3, 15, 9, .62);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  pointer-events: none;
  backdrop-filter: blur(15px);
}

.scopeBadge div { display: grid; gap: 2px; }
.scopeBadge b { color: rgba(255,255,255,.58); font-size: .53rem; letter-spacing: .16em; }
.scopeBadge strong { color: #dffff0; font-size: .76rem; }
.liveDot { width: 8px; height: 8px; background: #57e67b; border-radius: 50%; box-shadow: 0 0 0 5px rgba(73,223,112,.16), 0 0 16px #57e67b; }

.collisionBadge {
  position: absolute;
  z-index: 8;
  top: 167px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: rgba(255,255,255,.76);
  background: rgba(3, 15, 9, .46);
  border: 1px solid rgba(120,235,146,.25);
  border-radius: 9px;
  font-size: .61rem;
  letter-spacing: .04em;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.collisionBadge svg { width: 17px; color: #70e78a; }

.doorBadge {
  position: absolute;
  z-index: 8;
  top: 112px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: rgba(255,255,255,.74);
  background: rgba(4,13,9,.48);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  font-size: .63rem;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.doorBadge i { width: 7px; height: 7px; background: #d8b743; border-radius: 50%; box-shadow: 0 0 10px #d8b743; }
.doorOpen i { background: #55e879; box-shadow: 0 0 12px #55e879; }

.reticle {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%,-50%);
  pointer-events: none;
  opacity: .73;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.7));
}

.reticle i { position: absolute; background: white; border-radius: 999px; }
.reticle i:first-child { top: 11px; left: 3px; width: 18px; height: 2px; }
.reticle i:last-child { top: 3px; left: 11px; width: 2px; height: 18px; }
.reticle::after { content: ""; position: absolute; inset: 7px; background: rgba(255,255,255,.15); border: 1px solid white; border-radius: 50%; }

.collisionFlash {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 0 solid rgba(255, 76, 76, 0);
  pointer-events: none;
}

.collision .collisionFlash { animation: collision-flash .32s ease-out; }
.collision .reticle { color: #ff6868; animation: reticle-hit .28s ease; }
.collision .reticle i { background: #ff6868; }
.collision .reticle::after { border-color: #ff6868; }

.helpPanel {
  position: absolute;
  z-index: 9;
  right: 24px;
  bottom: 105px;
  width: min(390px, calc(100vw - 48px));
  padding: 17px;
  background: linear-gradient(145deg, rgba(4, 18, 11, .88), rgba(9, 23, 15, .72));
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  box-shadow: 0 20px 55px rgba(0,0,0,.25);
  backdrop-filter: blur(18px) saturate(1.18);
}

.helpHeading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.15); }
.helpHeading div { display: grid; gap: 2px; }
.helpHeading span { color: #71e48b; font-size: .57rem; font-weight: 760; letter-spacing: .15em; text-transform: uppercase; }
.helpHeading strong { font-size: .93rem; }
.helpHeading button { display: grid; width: 31px; height: 31px; padding: 0; place-items: center; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; cursor: pointer; }
.helpHeading svg { width: 17px; }
.helpGrid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; margin-top: 13px; }
.helpGrid > div { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; padding: 11px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; }
.helpGrid svg { width: 27px; color: #b9efc4; }
.helpGrid span { display: grid; gap: 2px; }
.helpGrid b { font-size: .7rem; }
.helpGrid small { color: rgba(255,255,255,.56); font-size: .58rem; line-height: 1.35; }
.helpPanel p { margin: 11px 1px 0; color: rgba(255,255,255,.56); font-size: .61rem; line-height: 1.5; }

.quickControls {
  position: absolute;
  z-index: 10;
  right: 24px;
  bottom: 26px;
  display: flex;
  gap: 9px;
}

.quickControls button {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  color: white;
  background: rgba(3, 15, 9, .62);
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 50%;
  box-shadow: 0 9px 24px rgba(0,0,0,.19);
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: transform .2s ease, background .2s ease;
}

.quickControls button:hover { background: rgba(22,117,52,.72); transform: translateY(-3px); }
.quickControls svg { width: 22px; }

.movementHint {
  position: absolute;
  z-index: 7;
  bottom: 26px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 16px;
  background: rgba(3, 15, 9, .61);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  box-shadow: 0 11px 30px rgba(0,0,0,.18);
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(14px);
}

.movementHint span { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.8); font-size: .55rem; font-weight: 720; letter-spacing: .06em; white-space: nowrap; }
.movementHint > b { width: 1px; height: 17px; background: rgba(255,255,255,.19); }
.dragGlyph { width: 14px; height: 9px; border: 1px solid #b8edc3; border-radius: 999px; }
.scrollGlyph { color: #70e489; font-size: 1rem; font-style: normal; line-height: 1; }

.previewNote {
  position: absolute;
  z-index: 6;
  bottom: 27px;
  left: 24px;
  padding: 9px 12px;
  color: rgba(255,255,255,.62);
  background: rgba(3, 15, 9, .48);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  font-size: .59rem;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.loading,
.errorPanel {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  color: white;
  background: radial-gradient(circle at center, #123522, #06110b 66%);
  text-align: center;
}

.loading strong { margin-top: 20px; font-size: 1rem; }
.loading small { margin-top: 5px; color: rgba(255,255,255,.58); font-size: .72rem; }
.loader { width: 42px; height: 42px; border: 3px solid rgba(255,255,255,.15); border-top-color: #68e785; border-radius: 50%; animation: spin .8s linear infinite; }

.errorPanel { padding: 30px; }
.errorPanel strong { font-size: 1.3rem; }
.errorPanel p { max-width: 500px; color: rgba(255,255,255,.68); line-height: 1.6; }
.errorPanel a { margin-top: 10px; padding: 11px 16px; color: white; background: #16884c; border-radius: 10px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes collision-flash {
  0% { border-width: 0; border-color: rgba(255, 76, 76, 0); }
  42% { border-width: 14px; border-color: rgba(255, 76, 76, .48); }
  100% { border-width: 0; border-color: rgba(255, 76, 76, 0); }
}
@keyframes reticle-hit { 45% { transform: translate(-50%,-50%) scale(1.4); } }

@media (max-width: 860px) {
  .header { top: 12px; right: 12px; left: 12px; }
  .brand { width: 60px; height: 51px; border-radius: 12px; }
  .brand img { width: 55px; height: 45px; }
  .titleBlock { padding: 8px 12px; }
  .titleBlock h1 { font-size: .82rem; }
  .titleBlock span { font-size: .48rem; }
  .backLink { width: 43px; min-height: 43px; justify-content: center; padding: 0; }
  .backLink span { display: none; }
  .scopeBadge { top: 78px; left: 12px; padding: 9px 11px; }
  .collisionBadge { top: 132px; left: 12px; }
  .doorBadge { top: 82px; right: 12px; }
  .helpPanel { right: 12px; bottom: 82px; width: min(355px, calc(100vw - 24px)); }
  .quickControls { right: 12px; bottom: 16px; }
  .quickControls button { width: 44px; height: 44px; }
  .movementHint { bottom: 16px; gap: 9px; padding: 10px 12px; }
  .movementHint span { font-size: .48rem; }
  .previewNote { display: none; }
}

@media (max-width: 640px) {
  .helpGrid { grid-template-columns: 1fr; }
  .helpGrid > div { grid-template-columns: 29px 1fr; padding: 9px; }
  .helpPanel { bottom: 78px; }
  .movementHint { left: 12px; max-width: calc(100vw - 176px); transform: none; }
  .movementHint > b,
  .movementHint span:first-child { display: none; }
  .movementHint span { white-space: normal; line-height: 1.25; }
  .collisionBadge { display: none; }
}

@media (max-height: 680px) and (min-width: 700px) {
  .scopeBadge { top: 90px; }
  .collisionBadge { top: 151px; }
  .helpPanel { bottom: 84px; transform: scale(.88); transform-origin: bottom right; }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .collision .collisionFlash,
  .collision .reticle { animation: none; }
}