/* =====================================================================
   MOBY-DICK: A WHALING QUEST  —  STYLES (book.json single-scene view)
   ===================================================================== */

:root {
  --ink:     #ece3cf;
  --ink-dim: #b8ad93;
  --sea:     #0c1320;
  --panel:   #161d2b;
  --brass:   #c8a24a;
  --brass-2: #e6c878;
  --rope:    #7a623a;
  --serif: Georgia, "Palatino Linotype", "Times New Roman", serif;
  --disp:  "Hoefler Text", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(circle at 50% -10%, #1b2740, var(--sea) 70%);
  color: var(--ink);
  font-family: var(--serif);
  overflow: hidden;
}

#game { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr; }

/* ---- welcome / end overlays (title screen + "The End"; buttons reveal/restart) ---- */
#welcome, #endscreen {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--sea);
}
#welcome.hidden, #endscreen.hidden { display: none !important; }
#welcome-bg, #end-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#welcome-scrim, #end-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(8,12,20,.55) 0%, rgba(8,12,20,0) 28%,
    rgba(8,12,20,.10) 52%, rgba(8,12,20,.88) 100%);
}
#welcome-inner, #end-inner { position: relative; z-index: 1; text-align: center; padding: 0 24px 7vh; max-width: 600px; }
.welcome-title {
  font-family: var(--disp); margin: 0; letter-spacing: 4px; color: var(--brass-2);
  font-size: clamp(40px, 13vw, 72px); line-height: 1.05;
  text-shadow: 0 3px 24px #000, 0 0 44px rgba(0,0,0,.85);
}
.welcome-title .brand-whale { font-size: .8em; }
.welcome-sub {
  font-family: var(--disp); font-style: italic; letter-spacing: 2px; color: var(--ink);
  font-size: clamp(16px, 5vw, 24px); margin: 6px 0 30px; text-shadow: 0 2px 14px #000;
}
#start-btn, #again-btn {
  font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: .5px;
  color: #1a1208; background: linear-gradient(#e6c878, #c8a24a);
  border: 1px solid #f0d896; border-radius: 30px; padding: 14px 38px; cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .12s ease, box-shadow .12s ease;
}
#start-btn:hover, #start-btn:focus-visible,
#again-btn:hover, #again-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.55); outline: none; }
#start-btn:active, #again-btn:active { transform: translateY(0); }
.welcome-tag { margin: 24px auto 0; max-width: 430px; font-size: 13px; line-height: 1.7; color: var(--ink-dim); text-shadow: 0 1px 6px #000; }
.welcome-contact { margin: 14px 0 0; font-size: 12px; color: var(--ink-dim); text-shadow: 0 1px 6px #000; }
.welcome-contact a { color: var(--brass-2); text-decoration: none; border-bottom: 1px solid rgba(230,200,120,.5); }
.welcome-contact a:hover, .welcome-contact a:focus-visible { color: #fff; border-bottom-color: #fff; }

/* ---- top bar ---- */
#topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 10px;
  padding: 9px 18px;
  background: linear-gradient(#1a2030, #141a28);
  border-bottom: 1px solid #2c3650;
  z-index: 3;
}
/* scene pager: ‹‹‹ ‹‹ ‹  › ›› ›››  (jump ∓10 / ∓5 / ∓1 through the 65 scenes) */
#pager { display: flex; gap: 3px; align-items: center; flex: 0 0 auto; }
.pg {
  font-family: var(--serif); font-size: 13px; line-height: 1; letter-spacing: -1px;
  color: var(--ink); background: rgba(10,14,22,.55); border: 1px solid var(--brass);
  border-radius: 6px; padding: 4px 0; min-width: 23px; text-align: center; cursor: pointer;
  transition: background .15s;
}
.pg:hover:not(:disabled), .pg:focus-visible:not(:disabled) { background: var(--rope); outline: none; }
.pg:disabled { opacity: .28; cursor: default; }
.brand { font-family: var(--disp); letter-spacing: 3px; color: var(--brass-2); font-size: 18px; }
.brand-whale { font-size: 20px; }
.brand-sub { font-size: 12px; color: var(--ink-dim); font-style: italic; letter-spacing: 1px; }
#scene-chapter { font-size: 12px; letter-spacing: 2px; color: var(--brass); text-transform: uppercase; white-space: nowrap; flex: 0 0 auto; }
.brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- stage ---- */
#stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: hidden;
}
.scene-frame {
  position: relative;
  aspect-ratio: 9 / 16;        /* portrait scene images (1536×2688) — mobile-first */
  height: 100%;                /* default (wide / landscape / desktop): fit by HEIGHT, width
                                  follows the ratio. Portrait flips to width-fit below. Only
                                  ONE axis is ever fixed, so the aspect-ratio is always honored
                                  (no internal letterbox) and the %-positioned hotspots stay
                                  aligned; also gives imageless scenes a sized frame. */
  max-width: 100%;
  border: 1px solid #2c3650;
  border-radius: 6px;
  box-shadow: 0 14px 50px rgba(0,0,0,.6);
  overflow: hidden;
  background: linear-gradient(#1b2336, #0c1320);  /* placeholder until an image loads */
}
/* Portrait / narrow viewports (taller than the image's ratio): fit by WIDTH instead.
   Still only one fixed axis, so the ratio stays honored and hotspots stay aligned. */
@media (max-aspect-ratio: 9 / 16) {
  .scene-frame { height: auto; width: 100%; max-height: 100%; }
}
#scene-img { display: block; width: 100%; height: 100%; object-fit: contain; }
#scene-img::after { content: ""; }

#scene-title {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--disp); font-size: 30px; color: #fff;
  text-shadow: 0 2px 12px #000, 0 0 30px rgba(0,0,0,.7);
  letter-spacing: 1px; pointer-events: none;
}

#loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  color: var(--ink-dim); font-style: italic; text-align: center; line-height: 1.6;
}
#loading code { color: var(--brass-2); font-style: normal; }

/* ---- hotspots (characters 💭 + elements 🚪) ---- */
#hotspots { position: absolute; inset: 0; }
.hotspot {
  position: absolute; transform: translate(-50%, -50%);
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.hotspot.silent { cursor: default; }
.hs-icon {
  font-size: 34px; line-height: 1; display: block; position: relative;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.7));
  animation: bob 2.2s ease-in-out infinite;
}
/* glow halo to draw the eye (gold for characters) */
.hotspot::after {
  content: ""; position: absolute; top: 14px; left: 50%;
  width: 54px; height: 54px; transform: translateX(-50%);
  border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(230,200,120,.35), rgba(230,200,120,0) 70%);
  animation: pulse 2.4s ease-in-out infinite;
}
/* elements (doors / exits) glow a cool teal to read as "go here" */
.hotspot.element::after {
  background: radial-gradient(circle, rgba(110,200,210,.42), rgba(110,200,210,0) 70%);
}
.hotspot.element .hs-name { border-color: #6ec8d2; }
.hotspot:hover .hs-icon,
.hotspot:focus-visible .hs-icon,
.hotspot:active .hs-icon { transform: scale(1.12); }
.hs-name {
  font-size: 12px; color: var(--ink);
  background: rgba(10,14,22,.82); border: 1px solid var(--brass);
  padding: 2px 9px; border-radius: 11px; white-space: nowrap;
  opacity: 0; transform: translateY(-3px); transition: .15s;
  text-shadow: 0 1px 2px #000;
}
.hotspot:hover .hs-name,
.hotspot:focus-visible .hs-name,
.hotspot:active .hs-name { opacity: 1; transform: none; }

/* ---- toast (e.g. "coming soon") ---- */
#toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(16px);
  background: #1d2740; color: var(--ink); border: 1px solid var(--brass);
  border-radius: 22px; padding: 9px 18px; font-size: 14px; z-index: 30;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: .25s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes bob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pulse { 0%,100% { opacity: .5; transform: translateX(-50%) scale(.9); } 50% { opacity: 1; transform: translateX(-50%) scale(1.15); } }

/* ---- inner-monologue popup ---- */
#monologue {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(4,7,12,.72); backdrop-filter: blur(3px);
}
.mono-card {
  position: relative; max-width: 540px; width: 100%;
  background: linear-gradient(#1c2336, #141b2b);
  border: 1px solid #38456a; border-top: 3px solid var(--brass);
  border-radius: 12px; padding: 24px 26px 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.7);
  cursor: default;
}
.mono-close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #222c40; color: var(--ink); border: 1px solid #3a4768; cursor: pointer;
}
.mono-close:hover { background: var(--rope); }
.mono-head { font-family: var(--disp); font-size: 20px; color: var(--brass-2); margin-bottom: 12px; }
.mono-head.self  { color: var(--brass-2); }   /* the player (Ishmael) speaking */
.mono-head.other { color: #6ec8d2; }          /* the other party speaking */
.mono-text { font-size: 18px; line-height: 1.6; font-style: italic; color: #efe7d2; }
.mono-foot { margin-top: 16px; font-size: 11px; color: var(--ink-dim); letter-spacing: 1px; text-align: center; }

@media (max-width: 640px) {
  .brand-sub { display: none; }
  .brand { display: none; }   /* make room for the pager; the title is on the welcome screen */
  .brand-whale { font-size: 17px; }
  #scene-chapter { font-size: 10px; letter-spacing: 1px; }
  #topbar { padding: 8px 12px; }
  .pg { font-size: 12px; min-width: 21px; }
  #stage { padding: 8px; }
  #scene-title { font-size: 20px; left: 12px; bottom: 10px; }
  .hs-icon { font-size: 27px; }
  .mono-text { font-size: 16px; }
  .mono-head { font-size: 18px; }
  .mono-card { padding: 20px 18px 16px; }
  #monologue { padding: 16px; }
}