/* ═══════════════════════════════════════════════════════════════
   5 NACHTEN OP DE GOUDENVLOOT — game.css
   Pirate survival horror UI — matches the aged wood aesthetic
   of the main Pint Piraat site (index.html)
═══════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #040200;
  font-family: 'IM Fell English', Georgia, serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Back link ─────────────────────────────────────────────── */
#back-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 500;
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a07808;
  background: rgba(4,1,0,.92);
  border-top:  2px solid #6a4806;
  border-left: 2px solid #5a3c04;
  border-right:  3px solid #040000;
  border-bottom: 3px solid #040000;
  padding: 4px 10px;
  text-decoration: none;
  box-shadow: 2px 2px 0 #000;
  text-shadow: 1px 1px 0 rgba(0,0,0,.8);
}
#back-link:hover { color: #c49810; }

/* ── Outer wrapper ─────────────────────────────────────────── */
#game-wrap {
  width: 100vw; height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #030100;
  position: relative;
}

/* ── Scaled inner: canvas + HUD scale as one unit ─────────── */
#game-inner {
  position: relative;
  width:  960px;
  height: 540px;
  /* JS applies transform: scale() here */
  transform-origin: center center;
  flex-shrink: 0;
}

/* ── Canvas ────────────────────────────────────────────────── */
#game-canvas {
  display: block;
  width:  960px;
  height: 540px;
  /* CSS blur classes applied by JS when player drinks */
}
/* Drunk blur levels */
#game-canvas.drunk-1 { filter: blur(.8px) brightness(.97); }
#game-canvas.drunk-2 { filter: blur(2px)  brightness(.9)  saturate(1.4); }
#game-canvas.drunk-3 { filter: blur(4px)  brightness(.82) saturate(1.9) hue-rotate(12deg); }

/* Ghost camera view — subtle surveillance camera feel, no colour shift */
#game-canvas.ghost-view {
  filter: grayscale(25%) brightness(0.88) contrast(1.08);
}

/* ── Screen shake on breach ────────────────────────────────── */
@keyframes shake {
  0%   { transform: translate(0,0)    rotate(0deg);    }
  12%  { transform: translate(-5px, 3px)  rotate(-.4deg); }
  25%  { transform: translate(4px, -4px)  rotate(.35deg); }
  37%  { transform: translate(-4px, 5px)  rotate(-.3deg); }
  50%  { transform: translate(5px, -2px)  rotate(.4deg);  }
  62%  { transform: translate(-3px, 4px)  rotate(-.25deg);}
  75%  { transform: translate(3px, -3px)  rotate(.3deg);  }
  87%  { transform: translate(-2px, 2px)  rotate(-.15deg);}
  100% { transform: translate(0,0)    rotate(0deg);    }
}
/* Applied to #game-inner by JS on breach; removed after animation ends */
#game-inner.shaking { animation: shake .55s ease-out; }

/* ══════════════════════════════════════════════════════════════
   HUD LAYER
══════════════════════════════════════════════════════════════ */
#hud {
  position: absolute;
  inset: 0;
  display: none;           /* JS sets to 'block' during PLAYING */
  pointer-events: none;    /* most of HUD is decorative; children re-enable */
}

/* ── Top bar ────────────────────────────────────────────────── */
#hud-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: rgba(4,1,0,.9);
  border-bottom: 3px solid #180a00;
  box-shadow: 0 2px 0 #0a0400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* leave room for side panels + back link */
  padding: 0 86px 0 86px;
}

/* Night counter */
#night-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 52px;
}
#night-label {
  font-family: 'Cinzel', serif;
  font-size: .48rem;
  letter-spacing: .22em;
  color: #5a3c06;
  text-transform: uppercase;
}
#night-num {
  font-family: 'Pirata One', serif;
  font-size: 1.7rem;
  color: #a07808;
  text-shadow: 2px 2px 0 rgba(0,0,0,.7);
}

/* Time bar */
#time-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 360px;
  margin: 0 20px;
}
#time-display, #time-end {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  color: #6a4c06;
  white-space: nowrap;
  letter-spacing: .04em;
}
#time-track {
  flex: 1;
  height: 10px;
  background: #0a0500;
  border-top:  2px solid #140900;
  border-left: 2px solid #140900;
  border-right:  2px solid #3a2408;
  border-bottom: 2px solid #3a2408;
  overflow: hidden;
}
#time-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2a1600 0%, #7a5606 55%, #a07808 100%);
  /* JS sets width directly each frame — no CSS transition needed */
}

/* Drink pips */
#drink-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
}
#drink-label {
  font-family: 'Cinzel', serif;
  font-size: .46rem;
  letter-spacing: .18em;
  color: #5a2406;
  text-transform: uppercase;
}
#drink-pips {
  display: flex;
  gap: 5px;
}
.pip {
  width: 18px; height: 18px;
  background: #0a0500;
  border-top:  2px solid #2a1600;
  border-left: 2px solid #2a1600;
  border-right:  3px solid #040100;
  border-bottom: 3px solid #040100;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.5);
}
.pip.filled {
  background: #801808;
  box-shadow:
    inset 0 0 5px rgba(180,30,10,.5),
    0 0 6px rgba(180,30,10,.35);
}
/* Flash animation while the third pip is filling (game over imminent) */
@keyframes pip-flash {
  0%, 100% { background: #cc2810; }
  50%       { background: #400808; }
}
.pip.flashing { animation: pip-flash .35s steps(2) infinite; }

/* ── Side panels ────────────────────────────────────────────── */
/* Shared styles */
#panel-left,
#panel-right {
  position: absolute;
  top: 48px; bottom: 60px;
  width: 86px;
  background: rgba(4,1,0,.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
  gap: 10px;
  pointer-events: auto;
}
#panel-left  { left: 0;  border-right: 3px solid #140900; }
#panel-right { right: 0; border-left:  3px solid #140900; }

/* Integrity bar (vertical) */
.integrity-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px; /* gap pushes label below the bar */
  position: relative;
}
.integrity-track {
  width: 14px;
  height: 100px;
  background: #0a0500;
  border-top:  2px solid #140900;
  border-left: 2px solid #140900;
  border-right:  2px solid #3a2408;
  border-bottom: 2px solid #3a2408;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
}
.integrity-fill {
  width: 100%;
  height: 100%;   /* JS sets height % */
  background: linear-gradient(to top, #3a6c0a 0%, #5a8c18 55%, #4a7c10 100%);
}
/* Low integrity warning — shifts to orange/red and pulses */
@keyframes integrity-low {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.integrity-fill.low {
  background: linear-gradient(to top, #7a1808 0%, #c02010 55%, #a01808 100%);
  animation: integrity-low .7s steps(2) infinite;
}
.integrity-label {
  font-family: 'Cinzel', serif;
  font-size: .4rem;
  letter-spacing: .1em;
  color: #4a2c06;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Door barricade buttons */
.btn-door {
  width: 62px;
  padding: 10px 4px;
  font-family: 'Cinzel', serif;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #c8b060;
  background: linear-gradient(180deg, #1c0e02 0%, #0e0800 100%);
  border-top:  3px solid #6a4806;
  border-left: 3px solid #5a3c04;
  border-right:  4px solid #060100;
  border-bottom: 4px solid #040000;
  box-shadow: 3px 3px 0 #000;
  text-shadow: 1px 1px 0 rgba(0,0,0,.8);
  cursor: pointer;
  text-align: center;
  line-height: 1.6;
  pointer-events: auto;
}
.btn-door:active,
.btn-door.door-closed {
  border-top:  4px solid #040000;
  border-left: 4px solid #040000;
  border-right:  3px solid #6a4806;
  border-bottom: 3px solid #5a3c04;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
  color: #4a7c14;
  background: linear-gradient(180deg, #081008 0%, #060c04 100%);
}
/* Pulse when integrity is critically low (< 25 %) */
@keyframes door-warn {
  0%, 100% { border-top-color: #6a4806; border-left-color: #5a3c04; color: #c8b060; }
  50%       { border-top-color: #8a2008; border-left-color: #6a1806; color: #cc3010; }
}
.btn-door.door-warn { animation: door-warn .65s steps(2) infinite; }

/* Visual state when door integrity is depleted */
.btn-door.door-broken {
  color: #601010;
  border-top-color: #3a1806;
  opacity: .6;
  cursor: not-allowed;
  animation: none;
}

/* ── Bottom ability bar ─────────────────────────────────────── */
#hud-bottom {
  position: absolute;
  bottom: 0; left: 86px; right: 86px;
  height: 60px;
  background: rgba(4,1,0,.9);
  border-top: 3px solid #140900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: auto;
}

.btn-ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  min-width: 84px;
  cursor: pointer;
  background: linear-gradient(180deg, #1c0e02 0%, #0e0800 100%);
  border-top:  2px solid #6a4806;
  border-left: 2px solid #5a3c04;
  border-right:  3px solid #040000;
  border-bottom: 3px solid #030000;
  box-shadow: 2px 2px 0 #000;
  gap: 1px;
}
.btn-ability:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.btn-ability.disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}

.ability-icon  { font-size: 1.25rem; line-height: 1; }
.ability-name  {
  font-family: 'Cinzel', serif;
  font-size: .42rem;
  letter-spacing: .12em;
  color: #6a4806;
  text-transform: uppercase;
}
.ability-status {
  font-family: 'Cinzel', serif;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #4a7c10;
}
.ability-status.unavailable { color: #7a2008; }
.btn-map-toggle .ability-status { color: #a07808; }

/* ══════════════════════════════════════════════════════════════
   MAP OVERLAY
══════════════════════════════════════════════════════════════ */
#map-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2,1,0,.94);
  display: none;           /* JS toggles to flex */
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: auto;
}
#map-overlay.visible { display: flex; }

#map-panel {
  background: #0e0700;
  border-top:  3px solid #6a4806;
  border-left: 3px solid #5a3c04;
  border-right:  5px solid #040000;
  border-bottom: 5px solid #040000;
  box-shadow: 6px 6px 0 #000;
  padding: 18px 22px 22px;
  width: 88%;
  max-width: 680px;
  max-height: 92%;
  overflow-y: auto;
}

#map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #1e0c00;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
#map-title {
  font-family: 'Pirata One', serif;
  font-size: 1.3rem;
  color: #a07808;
  text-shadow: 2px 2px 0 rgba(0,0,0,.7);
}

#btn-close-map {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #8a1a08;
  background: #0a0600;
  border-top:  2px solid #4a1a08;
  border-left: 2px solid #3a1206;
  border-right:  3px solid #030000;
  border-bottom: 3px solid #020000;
  padding: 4px 10px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
}
#btn-close-map:active { transform: translate(1px,1px); box-shadow: none; }

/* Ship room grid — 3 columns × 3 rows representing wing topology */
#ship-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 8px;
  margin-bottom: 14px;
}

.map-room {
  background: #160a00;
  border-top:  2px solid #3a2408;
  border-left: 2px solid #2e1c06;
  border-right:  3px solid #040000;
  border-bottom: 3px solid #040000;
  padding: 12px 10px;
  cursor: pointer;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.map-room:hover { background: #221000; border-top-color: #7a5808; }
.map-room.selected {
  background: #221000;
  border-top-color: #a07808;
}
/* Flashes red when a pirate is in the hallway (danger zone) */
.map-room.danger {
  border-top-color: #7a1808;
  background: #1c0602;
  animation: map-danger 1s ease-in-out infinite alternate;
}
@keyframes map-danger {
  from { background: #1c0602; }
  to   { background: #280a04; }
}

.room-name {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #7a5808;
  text-transform: uppercase;
}
.room-desc {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: .7rem;
  color: #3a2208;
  line-height: 1.3;
}
/* Scry hint shown on hover */
.map-room::after {
  content: '👁 Bekijk kamer';
  display: block;
  font-family: 'Cinzel', serif;
  font-size: .40rem;
  letter-spacing: .08em;
  color: #3a2806;
  margin-top: 4px;
  opacity: 0;
}
.map-room:hover::after { opacity: 1; color: #6a4808; }

/* Empty filler cell — no border, no hover */
.map-room-empty {
  background: transparent;
  border: none;
  cursor: default;
  pointer-events: none;
}
.map-room-empty::after { display: none; }
.map-room-empty:hover  { background: transparent; }

/* Captain's cabin cell — clickable to close map */
.map-room-captain {
  background: #0a0800;
  border-color: #5a4010;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.map-room-captain .room-name { color: #9a7808; text-align: center; }
.map-room-captain .room-desc { color: #6a5010; text-align: center; font-style: italic; }
.map-room-captain::after { display: none; }
.map-room-captain:hover  { background: #160e00; border-color: #9a7808; }

/* Hallway / door-threshold rooms — pulsing threat indicator */
.map-room-hall {
  background: #100400;
  border-color: #3a1206;
}
.map-room-hall .room-name { color: #882008; }
.map-room-hall.danger .room-name { color: #d84010; }

/* ── Ghost camera nav arrows ───────────────────────────────── */
#btn-nav-left,
#btn-nav-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: none; /* JS sets to flex */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 80px;
  background: rgba(2,12,4,0.72);
  border: 2px solid rgba(50,180,70,0.45);
  color: rgba(80,220,100,0.90);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s;
}
#btn-nav-left  { left: 6px; border-radius: 0 6px 6px 0; }
#btn-nav-right { right: 6px; border-radius: 6px 0 0 6px; }
#btn-nav-left:hover,
#btn-nav-right:hover { background: rgba(4,24,8,0.90); color: rgba(120,255,140,0.98); }
#btn-nav-left:active,
#btn-nav-right:active { opacity: .7; }

#map-footer {
  border-top: 1px solid #1e0c00;
  padding-top: 10px;
}
#map-detail {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: .82rem;
  color: #5a3808;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   SCREEN OVERLAYS (menu, night intro, morning, gameover, win)
══════════════════════════════════════════════════════════════ */
.screen {
  position: absolute;
  inset: 0;
  display: none;           /* JS sets to flex via .active */
  align-items: center;
  justify-content: center;
  z-index: 100;
  background: rgba(2,1,0,.96);
  pointer-events: auto;
}
.screen.active { display: flex; }

/* Parchment content box */
.screen-box {
  background: #ceb86a;
  background-image:
    radial-gradient(ellipse 65% 40% at 18% 76%, rgba(110,65,10,.15) 0%, transparent 55%),
    radial-gradient(ellipse 45% 28% at 84% 20%, rgba(80,48,6,.10) 0%, transparent 50%),
    repeating-linear-gradient(45deg,
      transparent 0, transparent 4px,
      rgba(90,55,8,.05) 4px, rgba(90,55,8,.05) 5px);
  border-top:  3px solid #6a4408;
  border-left: 3px solid #5a3806;
  border-right:  5px solid #1e0c00;
  border-bottom: 5px solid #1e0c00;
  box-shadow: 5px 5px 0 #0e0600, 9px 9px 0 rgba(0,0,0,.55);
  padding: 36px 44px;
  text-align: center;
  max-width: 520px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.screen-box-slim {
  max-width: 440px;
  padding: 32px 36px;
}

/* Titles */
.screen-title {
  font-family: 'Pirata One', serif;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  color: #1e0e00;
  text-shadow: 1px 1px 0 rgba(255,200,60,.25);
  line-height: 1.2;
}
.screen-title-sm {
  font-family: 'Pirata One', serif;
  font-size: clamp(1.1rem, 2.8vw, 1.8rem);
  color: #1e0e00;
}
.screen-title-red {
  font-family: 'Pirata One', serif;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  color: #6a1006;
  text-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
.screen-title-gold {
  font-family: 'Pirata One', serif;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  color: #5a3c06;
  text-shadow: 1px 1px 0 rgba(255,210,60,.4);
}

.screen-sub {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: .92rem;
  color: #3e2408;
  line-height: 1.75;
}
.screen-score {
  font-family: 'Cinzel', serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #4e3008;
}

.screen-logo {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border-top:  3px solid #6a4408;
  border-left: 3px solid #5a3806;
  border-right:  4px solid #1e0c00;
  border-bottom: 4px solid #1e0c00;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}

/* Name input */
#name-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
#name-input {
  width: 100%;
  padding: 9px 12px;
  font-family: 'Pirata One', serif;
  font-size: 1.25rem;
  background: #e8dc80;
  color: #1e0e00;
  border-top:  2px solid #1e0e00;
  border-left: 2px solid #1e0e00;
  border-right:  3px solid #7a5c0a;
  border-bottom: 3px solid #7a5c0a;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.12);
  text-align: center;
  outline: none;
}
#name-input::placeholder { color: #8a6c20; opacity: .7; }

/* Controls hint on menu */
#controls-hint {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(80,50,8,.3);
  padding-top: 10px;
  width: 100%;
}
#controls-hint span {
  font-family: 'IM Fell English', serif;
  font-size: .78rem;
  color: #5a3a10;
  text-align: left;
}

/* Shared screen button style (old carved wood look) */
.btn-screen {
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ecd890;
  background: linear-gradient(180deg, #8a6a06 0%, #5e4404 45%, #7a5c06 70%, #4a3402 100%);
  border-top:  3px solid #b48410;
  border-left: 3px solid #9a7008;
  border-right:  5px solid #100800;
  border-bottom: 5px solid #0c0600;
  padding: 11px 28px;
  box-shadow: 3px 3px 0 #060300, 6px 6px 0 rgba(0,0,0,.5);
  text-shadow: 1px 1px 0 rgba(0,0,0,.7), 0 -1px 0 rgba(0,0,0,.35);
  cursor: pointer;
  width: 100%;
  max-width: 260px;
}
.btn-screen:hover  { filter: brightness(1.1); }
.btn-screen:active {
  border-top:  5px solid #100800;
  border-left: 5px solid #0c0600;
  border-right:  3px solid #b48410;
  border-bottom: 3px solid #9a7008;
  transform: translate(4px, 4px);
  box-shadow: none;
}

.btn-screen-outline {
  background: linear-gradient(180deg, #160e02 0%, #0c0800 100%);
  color: #9a7c1a;
  border-top-color:  #6a4806;
  border-left-color: #5a3804;
  border-right-color:  #040000;
  border-bottom-color: #030000;
}

/* ── Night intro screen ─────────────────────────────────────── */
.night-label {
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .4em;
  color: #4a2c08;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.night-num {
  font-family: 'Pirata One', serif;
  font-size: 5.5rem;
  color: #1e0e00;
  text-shadow: 2px 2px 0 rgba(255,190,50,.2);
  line-height: 1;
}
.night-quote {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: .95rem;
  color: #3e2408;
  line-height: 1.65;
  margin-top: 6px;
}
.night-hint {
  font-family: 'Cinzel', serif;
  font-size: .52rem;
  letter-spacing: .14em;
  color: #6a4808;
  line-height: 1.9;
  border-top: 1px solid rgba(80,50,8,.28);
  padding-top: 10px;
  text-transform: uppercase;
}

/* ── Night intro pirate roster ─────────────────────────────── */
#intro-pirates {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 0 12px;
  width: 100%;
}
.intro-pirate-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(80,50,8,.10);
  border: 1px solid rgba(80,50,8,.18);
}
.intro-pirate-new {
  background: rgba(180,110,10,.18);
  border-color: rgba(200,140,20,.55);
}
.intro-pirate-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.intro-pirate-name {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  font-weight: 700;
  color: #2c1600;
  flex: 1;
}
.intro-pirate-role {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: .6rem;
  color: #5a3a08;
}
.intro-pirate-badge {
  font-family: 'Cinzel', serif;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
  background: #b85000;
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
}

/* ── Ghost camera back-to-map button ───────────────────────── */
#btn-back-to-map {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: none;              /* JS sets to flex when scrying */
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(80,220,100,0.92);
  background: rgba(2,12,4,0.88);
  border-top:  2px solid rgba(40,160,55,0.6);
  border-left: 2px solid rgba(40,160,55,0.5);
  border-right:  3px solid rgba(0,0,0,0.8);
  border-bottom: 3px solid rgba(0,0,0,0.8);
  box-shadow: 0 0 12px rgba(40,200,60,0.25);
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}
#btn-back-to-map:hover { color: rgba(120,255,140,0.98); box-shadow: 0 0 18px rgba(40,220,70,0.4); }
#btn-back-to-map:active { transform: translateX(-50%) translate(1px, 1px); box-shadow: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 520px) {
  .screen-box  { padding: 24px 20px; }
  .screen-box-slim { padding: 22px 18px; }
  #ship-map    { gap: 5px; }
  .map-room    { padding: 8px 6px; min-height: 60px; }
}