/* The website layer over the 3D island: a top bar with plain links, a landing
   hero, name tags over every station, a first-visit hint and Prev/Next inside
   each card. It reuses the engine's tokens (engine/style.css) so it reads as
   one Minecraft-style interface. Nothing here draws in WebGL. */

:root {
  --bar-h: 56px;
  --cta: #3c8527;
  --cta-hover: #4a9c32;
  --cta-edge: #1f4a12;
  --tag-bg: rgba(14, 16, 14, .8);
  /* Station gold: the outline, gem (world/markers.js) and name tag share it. */
  --mark: #ffc93c;
  --scrim: rgba(12, 14, 12, .78);
  --sword-cursor: url("../assets/cursor/sword.png") 0 0;
}

/* Custom sword cursor across the entire site */
html, body, #world, #world canvas, dialog {
  cursor: var(--sword-cursor), auto;
}

/* Clickable elements inherit sword with pointer fallback */
a, button, [role="button"],
input[type="submit"], input[type="button"], input[type="reset"],
summary, select, .mc-button, [data-go], .tag, .site-logo, .faq-box h3,
#minimap, #minimap canvas, #hud button, #panel button, #siteBar button, #siteBar a,
#phone .app, #phone .bar, #phone .back, .work-peek, .world-row, .world-refresh,
#world[style*="pointer"], #world[style*="pointer"] canvas {
  cursor: var(--sword-cursor), pointer;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Top bar ---------- */
#siteBar {
  position: fixed; inset: 0 0 auto; z-index: 55; height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(20, 22, 20, .86); color: #fff;
  box-shadow: 0 2px 0 #000, inset 0 -2px 0 rgba(255, 255, 255, .08);
}
.site-logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 18px/1 var(--text); letter-spacing: .5px; text-shadow: 2px 2px 0 #000; flex: none; }
.site-logo img { width: 28px; height: 28px; image-rendering: pixelated; }
.site-nav { display: flex; gap: 2px; margin: 0 auto; min-width: 0; }
.site-nav a {
  display: block; padding: 8px 10px; color: #e8e6df; text-decoration: none; white-space: nowrap;
  font: 600 14px/1 var(--text); text-shadow: 1px 1px 0 #000;
}
.site-nav a:hover, .site-nav a[aria-current="true"] { color: #fff; background: rgba(255, 255, 255, .12); }
.site-nav a[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--gold); }
.site-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: none; margin-left: auto; }
.site-mode { color: #d7d4cc; font: 600 13px/1 var(--text); text-decoration: none; padding: 8px 6px; white-space: nowrap; }
.site-mode:hover { color: #fff; text-decoration: underline; }
.site-menu {
  display: none; width: 40px; height: 40px; padding: 0; border: 0; color: #fff; font-size: 20px;
  background: var(--btn); box-shadow: 0 0 0 2px #000, inset 2px 2px 0 rgba(255, 255, 255, .3), inset -2px -3px 0 rgba(0, 0, 0, .38);
}

/* The green button: Register, and the hero's main action. */
.mc-button.cta, .site-cta {
  background: var(--cta);
  box-shadow: 0 0 0 2px var(--cta-edge), inset 2px 2px 0 rgba(255, 255, 255, .32), inset -2px -3px 0 rgba(0, 0, 0, .38);
}
.mc-button.cta:hover, .site-cta:hover { background: var(--cta-hover); }
.site-cta { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; color: #fff; text-decoration: none; font: 700 14px/1 var(--text); text-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.mc-button:disabled { opacity: .7; cursor: progress; }

/* The engine's switches and radar sit below the bar. */
#corner { top: calc(max(16px, env(safe-area-inset-top)) + var(--bar-h)); }
#weatherMenu { top: calc(max(16px, env(safe-area-inset-top)) + var(--bar-h) + 58px); }
body.plain { padding-top: var(--bar-h); }
body.plain #pages .plain-title { display: none; }

/* ---------- Hero ---------- */
#hero { display: none; }
body.hero-on #hero {
  position: fixed; inset: 0; z-index: 54; display: flex; align-items: center;
  padding: calc(var(--bar-h) + 24px) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
  background: linear-gradient(90deg, var(--scrim) 0, rgba(12, 14, 12, .55) 480px, rgba(12, 14, 12, 0) 760px);
  pointer-events: none;
}
body.plain #hero { display: block; max-width: none; margin: 0; padding: 40px 22px 0 max(16px, env(safe-area-inset-left)); }
.hero-card { pointer-events: auto; width: min(520px, 100%); color: #fff; }
body.plain .hero-card { color: var(--ink); width: auto; }
.hero-eyebrow { margin: 0 0 14px; font: 600 14px/1.3 var(--text); letter-spacing: .4px; color: #cfe8c4; text-shadow: 1px 1px 0 #000; }
body.plain .hero-eyebrow { color: var(--accent); text-shadow: none; }
.hero-logo { display: block; width: 100%; max-width: 456px; height: auto; image-rendering: pixelated; margin: 0 0 16px; }
#hero h1 { margin: 0; }
.hero-tag { margin: 0 0 18px; font: 500 18px/1.45 var(--text); text-shadow: 1px 1px 0 #000; }
body.plain .hero-tag { text-shadow: none; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.hero-facts li { padding: 8px 12px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); font: 500 13px/1.25 var(--text); }
.hero-facts b { display: block; font-size: 17px; color: var(--gold); text-shadow: 1px 1px 0 #000; }
body.plain .hero-facts li { background: var(--gui); box-shadow: 0 0 0 2px var(--line), inset 2px 2px 0 var(--gui-light), inset -2px -2px 0 var(--gui-shade); }
body.plain .hero-facts b { color: var(--accent); text-shadow: none; }
.hero-count { display: flex; gap: 6px; margin: 0 0 20px; font: 500 12px/1 var(--text); }
.hero-count:empty { display: none; }
.hero-count div { min-width: 58px; padding: 8px 6px 6px; text-align: center; background: #1d1d1d; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #4a4a4a; color: #bdbdbd; }
.hero-count b { display: block; margin-bottom: 4px; font: 700 24px/1 ui-monospace, Menlo, Consolas, monospace; color: #80ff20; text-shadow: 2px 2px 0 #15210c; }
.hero-count p { margin: 0; font: 600 15px/1.3 var(--text); color: #80ff20; text-shadow: 2px 2px 0 #15210c; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.hero-actions .mc-button { min-height: 46px; padding: 0 20px; font-size: 16px; }
body.hero-on #hud, body.hero-on #siteTags { visibility: hidden; }
/* While the hero is up the world loads behind it, under open sky. */
body.hero-on #loading { background: transparent; pointer-events: none; }
body.hero-on #loading .bar { display: none; }

/* ---------- Name tags over stations ---------- */
#siteTags { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
body.reading #siteTags, body.plain #siteTags { display: none; }
.site-tag {
  position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform;
  display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 0;
  background: var(--tag-bg); color: #fff; white-space: nowrap;
  font: 700 16px/1 var(--text); letter-spacing: .3px; text-shadow: 1px 1px 0 #000;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--mark);
  transition: background-color .12s, color .12s;
  /* A slow bob, on translate so it adds to the position set in transform. */
  animation: tag-bob 2.6s ease-in-out infinite;
}
.site-tag i { width: 24px; height: 24px; image-rendering: pixelated; background: center / contain no-repeat; }
.site-tag::after { content: ""; position: absolute; left: 50%; top: calc(100% + 2px); margin-left: -7px; border: 7px solid transparent; border-top-color: var(--mark); }
.site-tag:hover, .site-tag.hot { background: var(--mark); color: #1d1a10; text-shadow: none; }
@keyframes tag-bob { 50% { translate: 0 -5px; } }
.site-tag[hidden] { display: none; }

/* ---------- First-visit hint ---------- */
#siteHint {
  position: fixed; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 76px); transform: translateX(-50%); z-index: 12;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 16px; background: rgba(14, 16, 14, .82); color: #fff;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px rgba(255, 255, 255, .1);
  font: 500 14px/1.4 var(--text); text-shadow: 1px 1px 0 #000;
}
#siteHint kbd { display: inline-block; min-width: 18px; padding: 1px 5px; margin: 0 1px; background: #3a3a3a; box-shadow: inset 0 -2px 0 #111; font: 600 12px/1.4 var(--text); text-align: center; }
#siteHint button { flex: none; width: 30px; height: 30px; border: 0; background: var(--btn); color: #fff; font-size: 18px; line-height: 1; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .3), inset -2px -2px 0 rgba(0, 0, 0, .38); }
body.reading #siteHint { display: none; }

/* ---------- Prev / Next inside a card ---------- */
#panel .tour { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#panel .tour[hidden] { display: none; }
#panel .tour span { flex: 1; text-align: center; font: 600 13px/1 var(--text); color: #fff; text-shadow: 1px 1px 0 #000; }
#panel .tour .mc-button { min-height: 38px; padding: 0 12px; font-size: 14px; }
#panelTitle.welcome-typing::after {
  content: '|'; margin-left: .08em; animation: welcome-cursor-blink .8s steps(2, start) infinite;
}
@keyframes welcome-cursor-blink { to { visibility: hidden; } }

.site-nav .site-mode-link { display: none; color: #cfe8c4; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1180px) {
  .site-nav a { padding: 8px 7px; font-size: 13px; }
}
@media (max-width: 1040px) {
  .site-menu { display: block; }
  .site-actions { margin-left: auto; }
  .site-mode { display: none; }
  .site-nav .site-mode-link { display: block; }
  .site-nav {
    position: fixed; top: calc(var(--bar-h) + env(safe-area-inset-top)); right: 0; left: auto; margin: 0;
    display: none; flex-direction: column; width: min(280px, 100vw); padding: 8px;
    background: rgba(20, 22, 20, .96); box-shadow: 0 2px 0 #000, -2px 0 0 #000;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px; font-size: 16px; }
}
@media (max-width: 720px), (max-height: 520px) {
  :root { --bar-h: 52px; }
  #siteBar { gap: 10px; padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(12px, env(safe-area-inset-left)); }
  .site-actions { margin-left: auto; }
  .site-logo span { font-size: 16px; }
  .site-mode { display: none; }
  .site-nav .site-mode-link { display: block; }
  #corner { top: calc(max(12px, env(safe-area-inset-top)) + var(--bar-h)); }
  #weatherMenu { top: calc(max(12px, env(safe-area-inset-top)) + var(--bar-h) + 52px); }
  body.hero-on #hero {
    align-items: flex-start;
    padding: calc(var(--bar-h) + env(safe-area-inset-top) + 26px) max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: linear-gradient(180deg, var(--scrim) 0, rgba(12, 14, 12, .8) 60%, rgba(12, 14, 12, .25) 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hero-eyebrow { margin-bottom: 12px; font-size: 14px; }
  .hero-logo { margin-bottom: 16px; max-width: 360px; }
  .hero-tag { font-size: 16px; margin-bottom: 18px; line-height: 1.45; }
  .hero-facts { gap: 8px; margin-bottom: 18px; }
  .hero-facts li { padding: 8px 12px; font-size: 13px; }
  .hero-facts b { font-size: 16px; }
  .hero-count { margin-bottom: 18px; gap: 6px; }
  .hero-count div { min-width: 0; flex: 1; padding: 8px 6px 6px; }
  .hero-count b { font-size: 20px; }
  .hero-actions { margin-bottom: 14px; gap: 10px; }
  .hero-actions .mc-button { flex: 1; min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
  .site-tag { gap: 6px; font-size: 13px; padding: 5px 9px 5px 6px; }
  .site-tag i { width: 18px; height: 18px; }
  .site-tag::after { margin-left: -5px; border-width: 5px; }
  /* Phones keep the bottom for the Dock and the radar: the hint goes under the switches. */
  #siteHint { top: calc(max(12px, env(safe-area-inset-top)) + var(--bar-h) + 56px); bottom: auto; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-tag { transition: none; animation: none; }
}

/* ---------- Touch controls (site/touch.js) ---------- */
/* A thumbstick to walk and a jump button, on touch screens only, in the
   stone of the corner switches. A tablet keeps the radar bottom left, so the
   stick stands above it; the jump button stands above Labyrinth's button. */
#touchStick, #touchJump { display: none; }
body.touch-controls #touchStick, body.touch-controls #touchJump { display: block; }
#touchStick {
  position: fixed; left: max(24px, env(safe-area-inset-left)); bottom: calc(250px + env(safe-area-inset-bottom)); z-index: 11;
  width: 124px; height: 124px; border-radius: 50%; touch-action: none; -webkit-user-select: none; user-select: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .1) 0 34%, rgba(14, 16, 14, .38) 35%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 255, 255, .28);
  opacity: .78; transition: opacity .15s;
}
#touchStick i {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 12px;
  background: var(--btn); box-shadow: 0 0 0 2px var(--line), inset 2px 2px 0 rgba(255, 255, 255, .32), inset -2px -3px 0 rgba(0, 0, 0, .38);
  transition: transform .18s ease-out, background-color .12s; pointer-events: none;
}
#touchStick.on { opacity: 1; }
#touchStick.on i { background: var(--accent); transition: background-color .12s; }
#touchJump {
  position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: calc(112px + env(safe-area-inset-bottom)); z-index: 11;
  width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; touch-action: none; -webkit-user-select: none; user-select: none;
  display: none; place-items: center; background: var(--btn); opacity: .85;
  box-shadow: 0 0 0 2px var(--line), inset 2px 2px 0 rgba(255, 255, 255, .32), inset -2px -3px 0 rgba(0, 0, 0, .38);
}
body.touch-controls #touchJump { display: grid; }
#touchJump svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: square; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .35)); }
#touchJump.on { opacity: 1; background: var(--accent); transform: translateY(2px); box-shadow: 0 0 0 2px var(--line), inset 2px 3px 0 rgba(0, 0, 0, .38), inset -2px -2px 0 rgba(255, 255, 255, .16); }
/* A phone held upright: the Dock takes the bottom left and the radar the
   bottom right, so the stick stands over the Dock and the station prompt
   over the stick. */
@media (max-width: 720px) and (min-height: 521px) {
  #touchStick { left: max(16px, env(safe-area-inset-left)); bottom: calc(96px + env(safe-area-inset-bottom)); width: 116px; height: 116px; }
  body.xp-on #touchStick { bottom: calc(128px + env(safe-area-inset-bottom)); }
  #touchJump { right: max(16px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 236px); width: 62px; height: 62px; }
  body.touch-controls #prompt { bottom: calc(222px + env(safe-area-inset-bottom)); }
  body.touch-controls.xp-on #prompt { bottom: calc(254px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) and (min-height: 521px) {
  #touchJump { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 188px); }
}
/* Held sideways: the stick takes the bottom-left corner, jump stands left
   of the radar, and the prompt moves over the stick. */
@media (max-height: 520px) {
  #touchStick { left: max(20px, env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 108px; height: 108px; }
  #touchJump { right: calc(max(12px, env(safe-area-inset-right)) + 150px); bottom: calc(24px + env(safe-area-inset-bottom)); width: 58px; height: 58px; }
  body.touch-controls #prompt { bottom: calc(138px + env(safe-area-inset-bottom)); }
}

/* ---------- Labyrinth (backend/agent chat widget) ---------- */
:root { --chat-w: 460px; }

/* #appShift (see index.html) wraps everything but the panel. It no longer
   shifts on open — the panel is a pure overlay now, so the main window is
   never pushed, shrunk, or cut off. The wrapper stays in the markup (harmless)
   so the panel can still sit outside it, pinned to the true viewport edge. */

#agentChat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; }
body.hero-on #agentChat, body.reading #agentChat, body.phone-on #agentChat { display: none; }

/* Keep the station prompt clear of Labyrinth's chat button on desktop */
@media (min-width: 721px) and (min-height: 521px) {
  #prompt {
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 80px);
    right: max(16px, env(safe-area-inset-right));
  }
  body.phone-on #prompt {
    right: 286px;
    bottom: max(22px, env(safe-area-inset-bottom));
  }
  body.touch-controls #prompt {
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 188px);
  }
}

#agentChatToggle {
  width: 72px; height: 72px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--btn); color: #fff; cursor: pointer;
  box-shadow: 0 0 0 2px #000, inset 2px 2px 0 rgba(255, 255, 255, .3), inset -2px -2px 0 rgba(0, 0, 0, .38);
}
#agentChatToggle:hover { background: var(--btn-hover); }
#agentChatToggle img { width: 48px; height: 48px; display: block; pointer-events: none; }

/* A drawer sliding in from the right, under the top bar, as a pure overlay —
   it never affects the layout or size of anything behind it. */
#agentChatPanel {
  position: fixed; top: calc(var(--bar-h) + env(safe-area-inset-top)); right: 0; bottom: 0; z-index: 50;
  width: min(var(--chat-w), 100vw); display: flex; flex-direction: column; color: var(--ink);
  background: var(--gui); border-left: 8px solid transparent; border-image: var(--mc-frame) 4 fill / 8px;
  box-shadow: -2px 0 0 var(--line), -12px 0 36px rgba(0, 0, 0, .45);
  transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility .28s;
  padding-bottom: env(safe-area-inset-bottom);
}
#agentChatPanel.open { transform: translateX(0); visibility: visible; }
body.hero-on #agentChatPanel, body.reading #agentChatPanel { display: none; }

#agentChatPanel header { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; border-bottom: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.agent-chat-title { display: flex; align-items: center; gap: 10px; }
.agent-chat-title img { width: 40px; height: 40px; display: block; }
#agentChatPanel h2 { margin: 0; font: 700 17px/1.2 var(--text); }
.agent-chat-close { border: 0; background: transparent; color: var(--ink); font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer; }

.agent-chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.agent-chat-msg { margin: 0; max-width: 88%; padding: 8px 10px; border-radius: 4px; font: 400 13px/1.4 var(--text); white-space: pre-wrap; }
.agent-chat-msg.user { align-self: flex-end; background: var(--accent); color: #fff; }
.agent-chat-msg.assistant { align-self: flex-start; background: color-mix(in srgb, var(--ink) 8%, transparent); }

.agent-chat-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.agent-chat-form input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 0; font: 400 14px/1.4 var(--text); color: var(--ink);
  background: var(--field); box-shadow: 0 0 0 2px var(--field-edge);
}
.agent-chat-form input::placeholder { color: var(--field-hint); }
.agent-chat-form input:focus { outline: none; box-shadow: 0 0 0 2px var(--ink); }

.agent-chat-status { margin: 0 14px 12px; min-height: 14px; font: 500 12px/1.3 var(--text); color: var(--ink-soft); }

@media (max-width: 760px) {
  #agentChat {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 140px);
  }
  #agentChatToggle { width: 56px; height: 56px; }
  #agentChatToggle img { width: 36px; height: 36px; }
  #agentChatPanel { width: 100vw; }
}
@media (max-width: 560px) {
  #agentChat {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 116px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #agentChatPanel, #appShift { transition: none; }
}