/* Castaway — Isle of the Forgotten Compass.
   Deliberately off the arcade's neon: aged chart paper, brass and deep water.
   Everything is DOM, so this file is the renderer. */

:root {
  --bg: #0d120f;
  --bg-2: #131a15;
  --panel: #1a221c;
  --edge: #2e3a30;
  --edge-2: #3f4d40;
  --ink: #ded3bb;
  --ink-dim: #94897a;
  --ink-faint: #6b6357;
  --brass: #d8a44a;
  --brass-dim: #8e6d31;
  --sea: #14262e;
  --good: #7fae6a;
  --bad: #c05a45;

  --t-beach: #cbb684;
  --t-jungle: #4e7343;
  --t-ruins: #8a8375;
  --t-volcano: #8c4132;
  --t-fog: #18201a;

  --font-body: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
}

/* A faint chart-paper grain over the whole page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(216, 164, 74, .05), transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(20, 38, 46, .35), transparent 55%);
}

.layout { position: relative; z-index: 1; }

.stage {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 14px 60px;
}

/* ---------------------------------------------------------------- HUD ---- */
.game-wrap {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--edge);
  border-radius: 6px;
  overflow: hidden;
}

/* Top bar — the way back to Alftanet sits above the board, as on the other games. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  background: linear-gradient(180deg, #16201a, #111813);
  border-bottom: 1px solid var(--edge);
}
.topbar-title {
  font-size: 15px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: center;
  line-height: 1.15;
  min-width: 0;
}
.topbar-sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #1c241d, #161d18);
  border-bottom: 1px solid var(--edge);
  flex-wrap: wrap;
}

.hud-stats { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.stat { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13px; }
.stat-ico { font-size: 13px; line-height: 1; opacity: .85; width: 15px; text-align: center; }
.stat-bar {
  display: block;
  width: 62px; height: 7px;
  background: #0d130f;
  border: 1px solid var(--edge-2);
  border-radius: 3px;
  overflow: hidden;
}
.stat-bar i {
  display: block; height: 100%; width: 100%;
  transition: width .3s ease, background-color .3s ease;
}
.stat--hp .stat-bar i { background: #a34a3c; }
.stat--rat .stat-bar i { background: #b8893c; }
.stat--san .stat-bar i { background: #4f8fa0; }
.stat.is-low .stat-bar i { background: var(--bad); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

.stat-num { min-width: 24px; text-align: right; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.stat-num--wide { min-width: 34px; color: var(--brass); }
.stat--gld .stat-ico { color: var(--brass); }

.hud-right { display: flex; align-items: center; gap: 14px; }

.parts { display: flex; gap: 4px; }
.part-slot {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px dashed var(--edge-2);
  border-radius: 4px;
  font-size: 13px;
  color: var(--ink-faint);
  background: #10160f;
}
.part-slot.is-found {
  border: 1px solid var(--brass);
  border-style: solid;
  color: var(--brass);
  background: #241d10;
}

.turns { font-family: var(--font-ui); display: flex; align-items: baseline; gap: 4px; }
.turns #num-turns { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.turns-label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.turns.is-low #num-turns { color: var(--bad); }

/* --------------------------------------------------------------- Board --- */
.board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

.map-wrap { position: relative; }

.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The chart itself: deep water, a worn paper edge and a vignette so the board
   reads as an object on a table rather than a grid of swatches. */
.map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  aspect-ratio: 1;
  padding: 10px;
  background:
    radial-gradient(ellipse at 30% 20%, #1b3a44 0%, #10222a 55%, #0a1820 100%);
  border: 1px solid #2b4048;
  border-radius: 8px;
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, .55),
    0 10px 26px rgba(0, 0, 0, .45);
}
/* Sea texture: long, slow swell lines under the tiles. */
.map::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 8px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 14px);
}

.tile {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1.2), box-shadow .16s ease, filter .16s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Land sits on the water: a hairline and a soft drop shadow lift explored tiles
   off the sea. Unexplored tiles get neither — see below. */
.tile--beach, .tile--jungle, .tile--ruins, .tile--volcano {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .32),
    inset 0 0 10px rgba(0, 0, 0, .3),
    0 2px 6px rgba(0, 0, 0, .45);
}

/* Unexplored is weather on open water, not a dark box. Dropping the border and
   most of the opacity is what stops the board reading as a spreadsheet: the
   island emerges from the sea as you walk it, instead of squares changing
   colour inside a permanent grid. */
.tile:not([class*="tile--"]) {
  opacity: .34;
  box-shadow: none;
  border-radius: 50%;
  transform: scale(.92);
}
.tile:not([class*="tile--"]) .tile-art { mix-blend-mode: screen; opacity: .5; }

.tile-art, .tile-feature {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.tile-feature {
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .65));
  transform: scale(.78);
}

/* Seen from the next hill over but not walked: the art is there, under weather.
   A translucent veil beats the old diagonal hatch — it reads as distance rather
   than as a disabled control. */
.tile.is-unvisited { filter: saturate(.55) brightness(.72); }
.tile.is-unvisited::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse at 40% 35%, rgba(22, 30, 26, .30), rgba(14, 20, 17, .62));
}

.tile.is-reachable {
  cursor: pointer;
  filter: none;
  box-shadow:
    inset 0 0 0 2px rgba(216, 164, 74, .85),
    inset 0 0 14px rgba(216, 164, 74, .22),
    0 0 12px rgba(216, 164, 74, .28);
}
.tile.is-reachable::after { display: none; }
.tile.is-reachable:hover { transform: translateY(-2px) scale(1.05); z-index: 4; }
.tile.is-reachable:active { transform: translateY(0) scale(.98); }

/* Where you are. A pin with a rippling ring — legible at 40 px on a phone. */
.tile.is-you {
  z-index: 5;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .9),
    0 0 16px rgba(255, 255, 255, .35);
}
/* A ring, not a disc — the wreck and the trader's camp are drawn on the tile you
   are standing on, and a filled marker hid them completely. */
.you-pin {
  position: absolute;
  z-index: 4;
  width: 52%; height: 52%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .92);
  box-shadow:
    0 0 8px rgba(255, 255, 255, .5),
    inset 0 0 6px rgba(255, 255, 255, .35);
}
.you-pin::after {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75);
  animation: ripple 2.4s ease-out infinite;
}
@keyframes ripple {
  0% { transform: scale(.55); opacity: .9; }
  100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .you-pin::after { animation: none; opacity: .5; }
}

/* ------------------------------------------------------------ Compass ---- */
.compass {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 4px;
}
.compass-read { min-width: 0; text-align: left; }
.compass-dir {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
/* A brass instrument under glass: bezel, tick marks, and a highlight sweeping
   the top-left so it reads as a curved surface rather than a flat disc. */
.compass-rose {
  position: relative;
  flex: none;
  width: 62px; height: 62px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #33291a 0%, #1d1710 55%, #100c07 100%);
  border: 2px solid var(--brass-dim);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .6),
    inset 0 0 14px rgba(0, 0, 0, .8),
    inset 0 1px 0 rgba(216, 164, 74, .35);
}
/* tick marks every 30° */
.compass-rose::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(216, 164, 74, .55) 0deg 1.2deg, transparent 1.2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 62% 100%);
  mask: radial-gradient(circle, transparent 0 62%, #000 62% 100%);
}
/* glass */
.compass-rose::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 32%, transparent 55%);
}
.compass-cardinal {
  position: absolute;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--brass-dim);
  letter-spacing: .04em;
}
.compass-n { top: 2px; left: 50%; transform: translateX(-50%); }
.compass-s { bottom: 2px; left: 50%; transform: translateX(-50%); }
.compass-e { right: 3px; top: 50%; transform: translateY(-50%); }
.compass-w { left: 3px; top: 50%; transform: translateY(-50%); }

/* The needle. `--wobble` is set from the player's nerve, so a shaky reading
   looks shaky before you have read a word of the caption. */
.compass-needle {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  width: 3px; height: 24px;
  margin-left: -1.5px;
  margin-top: -24px;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, #e0523f 0%, #e0523f 55%, #cfc4ab 55%, #cfc4ab 100%);
  border-radius: 2px;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
  --wobble: 0deg;
  animation: needle-drift 2.6s ease-in-out infinite;
}
@keyframes needle-drift {
  0%, 100% { filter: none; }
  50% { filter: blur(calc(var(--blur, 0px))); }
}
.compass-needle.is-shaky { animation: needle-shake 1.6s ease-in-out infinite; }
@keyframes needle-shake {
  0%, 100% { transform: rotate(calc(var(--dir) - var(--wobble))); }
  50% { transform: rotate(calc(var(--dir) + var(--wobble))); }
}
.compass-hub {
  position: absolute;
  z-index: 3;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0cf8c, #8e6d31);
  box-shadow: 0 0 3px rgba(0,0,0,.8);
}

.compass-caption {
  margin-top: 2px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.compass-caption.is-bad { color: var(--bad); }

/* ---------------------------------------------------------------- Side --- */
.side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--brass-dim);
  border-radius: 4px;
  padding: 13px 14px;
  flex: 1;
  min-height: 0;
}
.panel-title { margin: 0 0 7px; font-size: 17px; color: var(--brass); font-weight: 600; letter-spacing: .01em; }
.panel-text { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.panel-text:empty { display: none; }

.choices { display: flex; flex-direction: column; gap: 7px; }
.choice {
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.35;
  padding: 9px 11px;
  color: var(--ink);
  background: #202a22;
  border: 1px solid var(--edge-2);
  border-radius: 3px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.choice:hover:not(:disabled) { background: #2a362c; border-color: var(--brass-dim); }
.choice:active:not(:disabled) { transform: translateY(1px); }
.choice:disabled { opacity: .42; cursor: not-allowed; }
.choice-req { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-faint); font-style: italic; }

.panel-hint { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-faint); margin: 0; }

/* ---------------------------------------------------------------- Pack --- */
.pack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 4px;
}
.pack-items { display: flex; gap: 6px; }
.slot {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px dashed var(--edge-2);
  border-radius: 4px;
  background: #10160f;
  font-size: 15px;
  padding: 0;
  color: var(--ink);
}
.slot.is-full { border-style: solid; border-color: var(--brass-dim); cursor: pointer; background: #1e2a20; }
.slot.is-full:hover { border-color: var(--brass); background: #27342a; }

/* ----------------------------------------------------------------- Log --- */
.log {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  background: #10160f;
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 9px 11px;
  max-height: 132px;
  overflow-y: auto;
}
.log p { margin: 0 0 5px; }
.log p:last-child { margin-bottom: 0; color: var(--ink); }
.log p.is-good { color: var(--good); }
.log p.is-bad { color: var(--bad); }

/* ------------------------------------------------------------ Controls --- */
.ctrl-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 11px;
  color: var(--ink-dim);
  background: #1a221c;
  border: 1px solid var(--edge-2);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
}
.ctrl-btn:hover { color: var(--ink); border-color: var(--brass-dim); }

/* ------------------------------------------------------------- Overlay --- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 12, 9, .93);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.overlay.hidden { display: none; }

.overlay-panel {
  width: 100%;
  max-width: 470px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--edge-2);
  border-radius: 6px;
  padding: 22px 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
}

.logo {
  margin: 0 0 14px;
  font-size: clamp(28px, 6vw, 40px);
  letter-spacing: .16em;
  color: var(--brass);
  font-weight: 400;
}
.logo-sub {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.intro p { font-size: 14px; line-height: 1.65; color: var(--ink-dim); margin: 0 0 10px; }
.intro b { color: var(--ink); }
.intro-key { border-left: 2px solid var(--brass-dim); padding-left: 10px; text-align: left; }

.diff-row { display: flex; gap: 8px; margin: 14px 0 4px; }
.diff {
  flex: 1;
  font-family: var(--font-ui);
  padding: 9px 6px;
  background: #1b241d;
  border: 1px solid var(--edge-2);
  border-radius: 4px;
  color: var(--ink-dim);
  cursor: pointer;
}
.diff b { display: block; font-size: 14px; color: var(--ink); }
.diff span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink-faint); }
.diff.is-on { border-color: var(--brass); background: #262f22; }
.diff.is-on b { color: var(--brass); }

.result-title { font-family: var(--font-ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.big-score {
  font-size: clamp(38px, 9vw, 54px);
  color: var(--brass);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
}
.result-rank { font-family: var(--font-ui); font-size: 13px; color: var(--ink); margin-bottom: 10px; }
.breakdown {
  font-family: var(--font-ui);
  font-size: 12px;
  text-align: left;
  color: var(--ink-dim);
  border-top: 1px solid var(--edge);
  padding-top: 8px;
  margin-bottom: 12px;
}
.breakdown div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.breakdown span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); }
.breakdown div.is-neg span:last-child { color: var(--bad); }

.name-row { display: flex; gap: 7px; margin-bottom: 12px; }
.name-row.hidden, .result.hidden, .intro.hidden { display: none; }
#name-input {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 9px 11px;
  background: #10160f;
  border: 1px solid var(--edge-2);
  border-radius: 3px;
  color: var(--ink);
}
#name-input:focus { outline: none; border-color: var(--brass-dim); }

.btn {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .12s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn--primary { width: 100%; background: var(--brass); color: #1a1409; }
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn--ghost { background: #202a22; color: var(--ink); border-color: var(--edge-2); }
.btn--ghost:hover:not(:disabled) { border-color: var(--brass-dim); }
.btn--sm { font-size: 12px; padding: 7px 12px; font-weight: 500; }

.hint { margin-top: 10px; font-family: var(--font-ui); font-size: 12px; color: var(--ink-faint); }

/* --------------------------------------------------------- Leaderboard --- */
.leaderboard { margin-top: 22px; }
.leaderboard h2, .game-info h2 {
  font-size: 19px;
  color: var(--brass);
  font-weight: 600;
  margin: 0 0 10px;
}
#leaderboard-list {
  list-style: none;
  counter-reset: lb;
  margin: 0; padding: 0;
  background: var(--bg-2);
  border: 1px solid var(--edge);
  border-radius: 5px;
  overflow: hidden;
}
.lb-row {
  counter-increment: lb;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  border-bottom: 1px solid #1c241d;
}
.lb-row:last-child { border-bottom: 0; }
.lb-row::before {
  content: counter(lb);
  width: 20px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lb-row:nth-child(1)::before { color: var(--brass); }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { color: var(--brass); font-variant-numeric: tabular-nums; }
.lb-row.is-you { background: #232d21; }
.lb-empty { padding: 13px; color: var(--ink-faint); font-family: var(--font-ui); font-size: 13px; text-align: center; }

/* ----------------------------------------------------------- Game info --- */
.game-info { margin-top: 26px; max-width: 760px; }
.game-info h3 { font-size: 16px; color: var(--ink); margin: 22px 0 8px; }
.game-info p, .game-info li { font-size: 15px; line-height: 1.7; color: var(--ink-dim); }
.game-info p { margin: 0 0 12px; }
.game-info ul { margin: 0 0 12px; padding-left: 20px; }
.game-info li { margin-bottom: 6px; }
.game-info strong { color: var(--ink); }
.game-info em { color: var(--ink); font-style: italic; }
.foot-link { margin-top: 26px; }
.game-info a { color: var(--brass); text-decoration: none; }
.game-info a:hover { text-decoration: underline; }

/* Shared reviews widget */
.reviews-block { margin-top: 26px; }

/* ---------------------------------------------------------- Responsive --- */
@media (max-width: 720px) {
  .stage { padding: 8px 8px 44px; }
  .board { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .map { max-width: 400px; margin: 0 auto; }
  .compass { padding: 8px 11px; gap: 10px; }
  .compass-rose { width: 50px; height: 50px; }
  .compass-needle { height: 20px; margin-top: -20px; }
  .hud { padding: 8px 10px; gap: 8px; }
  .hud-stats { gap: 10px; font-size: 12px; }
  .stat-bar { width: 44px; }
  .log { max-height: 96px; }
  .panel-text { font-size: 14px; }
}

@media (max-width: 520px) {
  /* The subtitle wraps to two lines and doubles the bar's height for no gain —
     the page title still carries it. */
  .topbar-sub { display: none; }
  .topbar-title { font-size: 13px; }
}

@media (max-width: 400px) {
  .stat-bar { width: 34px; }
  .hud-stats { gap: 8px; }
}