/* Adventure Workshop - terminal styling
   Themes are CSS custom properties set via body[data-theme]. */

@keyframes aw-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes aw-flicker { 0% { opacity: .05; } 50% { opacity: .11; } 100% { opacity: .05; } }

:root {
  --bg: #060a06;
  --fg: #46e07a;
  --dim: #1f7a40;
  --accent: #a6ffc4;
  --glow: rgba(70, 224, 122, .55);
}

body[data-theme="green"] { --bg:#060a06; --fg:#46e07a; --dim:#1f7a40; --accent:#a6ffc4; --glow:rgba(70,224,122,.55); }
body[data-theme="amber"] { --bg:#0e0900; --fg:#ffb22e; --dim:#855512; --accent:#ffd684; --glow:rgba(255,178,46,.50); }
body[data-theme="mono"]  { --bg:#0c0c10; --fg:#e9e9ee; --dim:#6a6a76; --accent:#aab8ff; --glow:transparent; }
body[data-theme="paper"] { --bg:#efe9da; --fg:#272320; --dim:#9c9079; --accent:#8a5a2b; --glow:transparent; }

html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: clamp(15px, 1.15vw + 12px, 19px);
}
::selection { background: rgba(255,255,255,.20); }

.aw-screen {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  box-sizing: border-box;
  cursor: text;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body[data-crt="on"] .aw-screen { box-shadow: inset 0 0 220px rgba(0,0,0,.6); }

/* The visuals (image/pano) stay pinned up top; only the transcript scrolls. */
.aw-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.aw-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 5; display: none;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.20) 2px 3px);
}
.aw-flicker {
  position: fixed; inset: 0; pointer-events: none; z-index: 4; display: none;
  background: var(--fg); opacity: .06;
  animation: aw-flicker 7s ease-in-out infinite;
}
body[data-crt="on"] .aw-scanlines, body[data-crt="on"] .aw-flicker { display: block; }

.aw-col {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto;
  width: 100%; box-sizing: border-box;
}
.aw-col-head { padding: 0 26px; flex: 0 0 auto; }
.aw-col-body { padding: 24px 26px 90px; }

/* Illustrated mode image pane (lives in the pinned header) */
.aw-image {
  display: none;
  margin: 20px 0 4px;
  border: 1px solid var(--dim);
  padding: 6px;
  background: rgba(0,0,0,.25);
}
body[data-theme="paper"] .aw-image { background: rgba(0,0,0,.05); }
.aw-image img {
  display: block; width: 100%; height: auto;
  max-height: 44vh; object-fit: contain;
  image-rendering: pixelated;
}
.aw-image.on { display: block; }

/* 360° panorama pane */
.aw-pano-inner { position: relative; height: clamp(220px, 42vh, 400px); }
.aw-pano { position: relative; overflow: hidden; }
.aw-pano canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: grab; touch-action: none; display: block;
}
.aw-pano canvas.dragging { cursor: grabbing; }
.aw-pano-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aw-hs {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: pointer;
  background: transparent; border: none; padding: 6px; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.aw-hs-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--accent); background: rgba(0,0,0,.35);
  box-shadow: 0 0 8px var(--glow), inset 0 0 4px var(--glow);
  transition: transform .12s ease;
}
.aw-hs:hover .aw-hs-dot { transform: scale(1.35); background: var(--accent); }
/* travel hotspots: diamond, so "this moves you" reads differently from "this examines" */
.aw-hs-nav .aw-hs-dot { border-radius: 3px; transform: rotate(45deg); }
.aw-hs-nav:hover .aw-hs-dot { transform: rotate(45deg) scale(1.35); }
.aw-hs-label {
  color: var(--accent); font-size: 12px; letter-spacing: .06em;
  background: rgba(0,0,0,.55); padding: 1px 7px;
  opacity: 0; transition: opacity .12s ease; white-space: nowrap;
  text-shadow: none;
}
body[data-theme="paper"] .aw-hs-label { background: rgba(255,255,255,.75); }
.aw-hs:hover .aw-hs-label { opacity: 1; }

/* Transcript line kinds */
.aw-line { margin: 0 0 12px; white-space: pre-wrap; word-break: break-word; line-height: 1.55; color: var(--fg); }
body[data-crt="on"] .aw-line { text-shadow: 0 0 6px var(--glow); }
.aw-line.cmd  { color: var(--dim); margin: 14px 0 6px; }
.aw-line.room {
  color: var(--accent); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; margin: 2px 0 10px;
}
body[data-crt="on"] .aw-line.room { text-shadow: 0 0 10px var(--glow); }
.aw-line.link { color: var(--accent); font-weight: 600; }
.aw-line.egg  { color: var(--accent); }
.aw-line.sys  { color: var(--dim); font-style: italic; }

/* Prompt row */
.aw-row { display: flex; align-items: baseline; margin-top: 4px; }
.aw-prompt {
  color: var(--accent); margin-right: 12px; font-weight: 700; flex: 0 0 auto;
  animation: aw-blink 1.15s step-end infinite;
}
body[data-crt="on"] .aw-prompt { text-shadow: 0 0 6px var(--glow); }
.aw-input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--fg); font: inherit; caret-color: var(--accent); padding: 0;
}
body[data-crt="on"] .aw-input { text-shadow: 0 0 6px var(--glow); }

/* ---- Menu / picker pages ---- */
.aw-menu { max-width: 780px; margin: 0 auto; padding: 60px 26px 90px; position: relative; z-index: 1; }
.aw-title {
  color: var(--accent); font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; font-size: 1.4em; margin: 0 0 6px;
}
body[data-crt="on"] .aw-title { text-shadow: 0 0 10px var(--glow); }
.aw-sub { color: var(--dim); font-style: italic; margin: 0 0 40px; }
.aw-section { color: var(--accent); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin: 34px 0 14px; }
.aw-card {
  display: block; border: 1px solid var(--dim); padding: 14px 18px; margin: 0 0 12px;
  color: var(--fg); text-decoration: none; cursor: pointer; background: transparent;
  font: inherit; width: 100%; box-sizing: border-box; text-align: left;
}
.aw-card:hover, .aw-card:focus { border-color: var(--accent); color: var(--accent); outline: none; }
.aw-card .t { font-weight: 700; }
.aw-card .b { color: var(--dim); display: block; margin-top: 4px; font-size: .9em; }
.aw-card.disabled { opacity: .45; cursor: default; }
.aw-card.disabled:hover { border-color: var(--dim); color: var(--fg); }
.aw-note { color: var(--dim); font-style: italic; margin-top: 10px; }
.aw-drop.dragover { border-color: var(--accent); color: var(--accent); }