/* The voyage game page. Scoped to .voyagepage so nothing here leaks into
   the rest of the site. It borrows the site's ink/paper/rust, and only the
   chart inside the canvas keeps its own palette. */
.voyagepage{--chart-ink:#12202a;--chart-cream:#f4ecd0}

.game-head{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end;margin:0 0 22px}
.game-head .lede{margin-bottom:0}
.game-head h1{margin:.06em 0 .18em}

.game-buttons{display:flex;gap:9px;flex-wrap:wrap}
.game-buttons button{font:400 13px 'Courier Prime',monospace;letter-spacing:.06em;text-transform:uppercase;
  border:1.5px solid var(--ink);background:none;color:var(--ink);padding:10px 16px;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none}
.game-buttons button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.game-buttons button:active:not(:disabled){transform:translate(1px,1px)}
.game-buttons button:disabled{opacity:.4;cursor:default}

.game-wrap{position:relative;border:1.5px solid var(--ink);background:var(--neg);
  box-shadow:5px 5px 0 var(--ink);margin:0 0 6px}
.gamebar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--paper);border-bottom:1.5px solid var(--ink);padding:9px 13px;
  font:400 11.5px/1.3 'Courier Prime',monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.gamebar span{white-space:nowrap}
.gamebar b{color:var(--ink);font-weight:400}
.canvasbox{position:relative;aspect-ratio:16/9}
.voyagepage canvas{width:100%;height:100%;display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}

.chapter{position:absolute;left:13px;bottom:13px;background:rgba(18,32,42,.86);color:#f4ecd0;
  padding:7px 10px;font:400 11px 'Courier Prime',monospace;letter-spacing:.09em;text-transform:uppercase;pointer-events:none}
.weather{position:absolute;right:13px;top:13px;background:rgba(244,236,208,.92);color:#12202a;
  padding:7px 9px;font:400 11px 'Courier Prime',monospace;letter-spacing:.07em;pointer-events:none}

.modalback{display:none;position:absolute;inset:0;background:rgba(10,20,26,.6);z-index:8;
  align-items:center;justify-content:center;padding:18px}
.modalback.open{display:flex}
.modal{max-width:520px;width:100%;background:var(--paper);border:1.5px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);padding:24px}
.modal .stamp{font:400 11.5px 'Courier Prime',monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--rust)}
.modal h2{font:400 clamp(27px,3vw,34px)/1.06 'IM Fell English',Georgia,serif;margin:8px 0 10px}
.modal p{margin:.5em 0;font-size:16px;line-height:1.55}
.modal .tiny{font:400 12px 'Courier Prime',monospace;color:var(--ink2)}
.modal-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.modal button{font:400 13px 'Courier Prime',monospace;letter-spacing:.06em;text-transform:uppercase;
  border:1.5px solid var(--ink);background:none;color:var(--ink);padding:10px 16px;cursor:pointer}
.modal button:hover{background:var(--ink);color:var(--paper)}

.game-help{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:28px 0 0}
.game-card h2{margin:0 0 8px;font-size:clamp(22px,2vw,26px)}
.game-card p{font-size:16px;line-height:1.55;margin:0 0 12px}
.game-note{font:400 12.5px/1.6 'Courier Prime',monospace;color:var(--ink2);max-width:74ch;margin:30px 0 0}

.voyage-log{margin:44px 0 0}
.voyage-log h2{margin:.1em 0 .5em}
.loggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 22px}
.logitem{border-top:1px solid var(--ink);padding:11px 0 14px}
.logitem b{display:block;font:400 11px 'Courier Prime',monospace;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink2);font-weight:400;margin-bottom:3px}
.logitem span{font:400 20px/1.2 'IM Fell English',Georgia,serif}

.poster-source{display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:center;
  margin:44px 0 0;padding-top:22px;border-top:1px solid var(--ink)}
.poster-source img{width:100%;border:1px solid var(--rule)}
.poster-source h2{margin:.1em 0 .3em}
.poster-source p{font-size:16px;line-height:1.55;margin:0 0 .7em}

.album-player{margin:40px 0 0}
.album-player h2{margin:.1em 0 .5em}

@media (max-width:760px){
  .game-head,.game-help{grid-template-columns:1fr;gap:16px}
  .game-wrap{box-shadow:3px 3px 0 var(--ink)}
  .gamebar{font-size:10px;letter-spacing:.05em;gap:8px}
  .loggrid{grid-template-columns:1fr 1fr;gap:0 18px}
  .poster-source{grid-template-columns:1fr;gap:16px}
  .poster-source img{max-width:230px}
}

/* sightings log: fills in as you meet each creature, and stays filled */
.sightings{margin:16px 0 0}
.sightings .cap{margin:0 0 8px}
.sightings ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0}
.sightings li{display:flex;align-items:center;gap:8px;border:1px solid var(--rule);
  padding:7px 12px 6px;font:400 13px/1 'Courier Prime',monospace;letter-spacing:.04em;
  color:var(--ink2);transition:border-color .3s,color .3s}
.sightings li .gl{width:9px;height:9px;border:1px solid currentColor;border-radius:50%;flex:none}
.sightings li.got{border-color:var(--ink);color:var(--ink)}
.sightings li.got .gl{background:var(--rust);border-color:var(--rust)}
.sightings .tiny{font:400 12px 'Courier Prime',monospace;color:var(--ink2);margin:9px 0 0}
@media (max-width:760px){.sightings li{font-size:12px;padding:6px 10px 5px}}

/* a line of Gunn's own on the landfall card */
.modal blockquote{margin:14px 0 6px;padding:0 0 0 16px;border-left:2px solid var(--rust);
  font:italic 400 19px/1.5 'IM Fell English',Georgia,serif;color:var(--ink)}
.modal blockquote[hidden]{display:none}
.modal .cite{margin:0 0 12px 18px;font:400 11px 'Courier Prime',monospace;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink2)}
.modal .cite[hidden]{display:none}