/* ============================================================================
   game.css — Pils Quest
   Dark amber / Metland aesthetic. Mobile-first, landscape.
   ============================================================================ */

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #060400;
  font-family: 'Anton', sans-serif;
  color: #fff; user-select: none; -webkit-user-select: none;
}

/* ─── SCREENS ──────────────────────────────────────────────────────────────── */
.screen {
  position: fixed; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 1rem;
}
.screen.visible { display: flex; }

/* ─── WORLD MAP ────────────────────────────────────────────────────────────── */
#screen-map {
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  background: #080304;
}
#screen-map::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5,1,8,.50) 0%, rgba(8,3,11,.45) 35%, rgba(11,5,4,.42) 65%, rgba(18,6,0,.55) 100%),
    radial-gradient(ellipse 160% 50% at 50% 105%, rgba(65,26,0,.35) 0%, transparent 55%);
}
/* Rotating photo/video background for world map */
#map-bg-reel {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.map-bg-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}
.map-bg-slide.active { opacity: 1; }
.map-bg-slide--video { background: none; }
.map-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Starfield — small dots */
#screen-map::before {
  content: '';
  position: absolute; width: 2px; height: 2px;
  background: transparent; border-radius: 50%; top: 0; left: 0;
  box-shadow:
    35px 45px rgba(255,240,200,.6), 88px 120px rgba(255,240,200,.4),
    142px 28px rgba(255,240,200,.7), 198px 75px rgba(255,240,200,.3),
    256px 18px rgba(255,240,200,.5), 318px 92px rgba(255,240,200,.4),
    62px 185px rgba(255,240,200,.3), 174px 210px rgba(255,240,200,.5),
    305px 172px rgba(255,240,200,.3), 28px 340px rgba(255,240,200,.4),
    120px 385px rgba(255,240,200,.2), 248px 412px rgba(255,240,200,.3),
    345px 356px rgba(255,240,200,.4), 72px 456px rgba(255,240,200,.2),
    186px 478px rgba(255,240,200,.3), 310px 512px rgba(255,240,200,.25),
    42px 580px rgba(255,240,200,.2), 158px 622px rgba(255,240,200,.3),
    288px 655px rgba(255,240,200,.2), 95px 720px rgba(255,240,200,.15),
    225px 748px rgba(255,240,200,.2), 332px 790px rgba(255,240,200,.1);
  pointer-events: none; z-index: 0;
  animation: star-twinkle 4.2s ease-in-out infinite alternate;
}
/* Starfield — larger bright stars */
#screen-map::after {
  content: '';
  position: absolute; width: 3px; height: 3px;
  background: transparent; border-radius: 50%; top: 0; left: 0;
  box-shadow:
    55px 35px rgba(255,245,215,.9), 165px 58px rgba(255,245,215,.75),
    278px 42px rgba(255,245,215,.85), 128px 148px rgba(255,245,215,.65),
    312px 245px rgba(255,245,215,.55), 48px 288px rgba(255,245,215,.75),
    222px 318px rgba(255,245,215,.5), 358px 178px rgba(255,245,215,.65),
    76px 420px rgba(255,245,215,.45), 195px 500px rgba(255,245,215,.4),
    338px 555px rgba(255,245,215,.35), 22px 650px rgba(255,245,215,.3);
  pointer-events: none; z-index: 0;
  animation: star-twinkle 3.1s ease-in-out infinite alternate-reverse;
}
@keyframes star-twinkle {
  from { opacity: .5; }
  to   { opacity: 1; }
}

/* Map header */
#map-header {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 16px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(212,146,10,.15);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}
#map-title-wrap { text-align: center; }
.map-eyebrow {
  font-family: 'DM Mono', monospace; font-size: .5rem; letter-spacing: .28em;
  color: rgba(245,176,48,.55); margin-bottom: 3px;
}
.map-title {
  font-size: clamp(1.5rem, 6.5vw, 2.2rem); letter-spacing: .24em;
  color: var(--amber-hi); line-height: 1;
  text-shadow: 0 0 24px rgba(245,176,48,.55), 0 0 60px rgba(245,176,48,.2);
}
#map-stats {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-family: 'DM Mono', monospace; font-size: .62rem; letter-spacing: .08em;
  color: var(--amber);
}
.map-speak-btn {
  position: absolute; right: 14px; bottom: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 0.3rem 0.8rem;
  color: rgba(255,255,255,0.4);
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s ease-out, color 0.12s ease-out;
}
.map-speak-btn:active { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }

/* Scroll container */
#map-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 0 60px;
  scrollbar-width: none;
  position: relative; z-index: 2;
}
#map-scroll::-webkit-scrollbar { display: none; }

/* Map stage — responsive aspect ratio 340×900 */
#map-stage {
  position: relative;
  width: 100%; max-width: 380px;
  aspect-ratio: 340 / 900;
  flex-shrink: 0;
}
/* Warm ground glow at the bottom (start zone) */
#map-stage::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 28%;
  background: radial-gradient(ellipse at 50% 100%, rgba(80,32,0,.55) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
/* Dark fog at the top (locked/distant territory) */
#map-stage::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 20%;
  background: linear-gradient(to bottom, rgba(4,1,8,.78) 0%, transparent 100%);
  pointer-events: none; z-index: 4;
}

/* SVG path layer */
#map-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
  overflow: visible;
}
@keyframes path-dash {
  to { stroke-dashoffset: -52; }
}

/* Nodes container */
#map-nodes {
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
}

/* Individual node */
.map-node {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transform: translate(-50%, -50%);
  pointer-events: auto; cursor: default;
  animation: node-enter .55s cubic-bezier(.34,1.56,.64,1) both;
}
.map-node.unlocked { cursor: pointer; }
@keyframes node-enter {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.45); filter: blur(5px); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1);   filter: none; }
}
.map-node.unlocked:active { transform: translate(-50%,-50%) scale(.9) !important; }

/* Expanded invisible tap target */
.map-node.unlocked::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50px;
}

/* Bouncing 🍺 player marker on current node */
.map-node.current::before {
  content: '🍺';
  font-size: 1.15rem;
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  animation: pils-bounce .72s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(245,176,48,.65));
  pointer-events: none;
}
@keyframes pils-bounce {
  from { top: -36px; }
  to   { top: -22px; }
}

.map-node-level {
  font-family: 'DM Mono', monospace; font-size: .42rem; letter-spacing: .18em;
  color: rgba(255,255,255,.2); line-height: 1;
}
.map-node.unlocked .map-node-level { color: rgba(245,176,48,.5); }
.map-node.current  .map-node-level { color: rgba(245,176,48,.78); }

.map-node-circle {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; position: relative; overflow: hidden;
}
/* Photo fill inside node circle */
.node-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  border-radius: 50%;
  opacity: .45;
  transition: opacity .3s;
}
.map-node.unlocked:hover .node-photo,
.map-node.current .node-photo { opacity: .6; }
.map-node.locked .node-photo  { opacity: .15; filter: grayscale(1); }
/* Emoji sits above the photo */
.node-emoji { position: relative; z-index: 1; font-size: 24px; }
.map-node.locked .map-node-circle {
  background: rgba(255,255,255,.025);
  border: 2px solid rgba(255,255,255,.06);
  filter: grayscale(.9) brightness(.45);
  opacity: .38;
}
.map-node.unlocked .map-node-circle {
  background: radial-gradient(circle at 40% 35%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 100%);
  border: 2px solid rgba(245,176,48,.65);
  box-shadow:
    0 0 0 4px rgba(245,176,48,.1),
    0 0 20px rgba(245,176,48,.5),
    0 0 42px rgba(245,176,48,.2),
    inset 0 1px 1px rgba(255,218,100,.15);
  animation: node-glow 2.6s ease-in-out infinite;
}
.map-node.current .map-node-circle {
  background: radial-gradient(circle at 40% 35%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%);
  border: 2px solid #F5B030;
  animation: node-glow-current 1.9s ease-in-out infinite;
}
@keyframes node-glow {
  0%,100% {
    box-shadow:
      0 0 0 4px rgba(245,176,48,.1), 0 0 20px rgba(245,176,48,.5),
      0 0 42px rgba(245,176,48,.2), inset 0 1px 1px rgba(255,218,100,.15);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(245,176,48,.14), 0 0 28px rgba(245,176,48,.68),
      0 0 60px rgba(245,176,48,.28), inset 0 1px 1px rgba(255,218,100,.2);
  }
}
@keyframes node-glow-current {
  0%,100% {
    box-shadow:
      0 0 0 6px rgba(245,176,48,.15), 0 0 30px rgba(245,176,48,.72),
      0 0 70px rgba(245,176,48,.35);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(245,176,48,.2), 0 0 40px rgba(245,176,48,.9),
      0 0 90px rgba(245,176,48,.45);
    transform: scale(1.06);
  }
}

.map-node-name {
  font-family: 'Anton', sans-serif; font-size: .62rem; letter-spacing: .07em;
  color: rgba(212,146,10,.75); text-align: center;
  max-width: 82px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-node.locked .map-node-name  { color: rgba(50,32,12,.52); }
.map-node.current .map-node-name { color: var(--amber-hi); }

.map-node-badge {
  font-family: 'DM Mono', monospace; font-size: .42rem; letter-spacing: .12em;
  color: var(--amber-hi); background: rgba(245,176,48,.13);
  border: 1px solid rgba(245,176,48,.32); border-radius: 3px;
  padding: 1px 7px; margin-top: 1px;
}
.map-node.locked .map-node-badge, .locked-badge { display: none; }

/* Connectors now drawn as SVG paths — hide old CSS connector */
.map-node-connector { display: none; }

/* ─── CHARACTER SELECT ─────────────────────────────────────────────────────── */
#screen-select {
  background: radial-gradient(ellipse at 50% 0%, #3a2000 0%, #060400 65%);
  gap: 1rem;
}
.sel-eyebrow {
  font-family: 'DM Mono', monospace; font-size: .52rem; letter-spacing: .3em;
  color: rgba(245,176,48,.5); margin-bottom: .35rem;
}
.sel-title {
  font-size: clamp(1.2rem, 4vw, 1.8rem); letter-spacing: .08em; color: #fff;
  text-align: center; margin-bottom: .3rem;
}
.char-cards-wrap {
  position: relative; max-width: 760px; width: 100%;
}
.char-cards {
  display: flex; gap: .6rem; flex-wrap: wrap;
  justify-content: center;
  overflow-y: auto; max-height: 55vh;
  padding-bottom: 1.5rem;
  scrollbar-width: none;
}
.char-cards::-webkit-scrollbar { display: none; }
.char-cards-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 52px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--black, #060400));
}
.char-scroll-hint {
  font-family: 'DM Mono', monospace; font-size: .46rem; letter-spacing: .22em;
  color: rgba(245,176,48,.3); text-align: center; margin-top: 0;
  animation: scroll-hint-pulse 2.8s ease-in-out infinite;
}
@keyframes scroll-hint-pulse {
  0%, 100% { opacity: .35; }
  50%       { opacity: .1; }
}
.char-card {
  position: relative;
  width: 130px; border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: border-color .12s ease-out, transform .12s ease-out, box-shadow .12s ease-out;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: .5rem;
}
.char-card:hover { transform: translateY(-3px); }
.char-card:active { transform: scale(.96); }
.char-card.selected {
  border-color: var(--amber-hi);
  box-shadow: 0 0 20px rgba(245,176,48,.5), 0 4px 20px rgba(0,0,0,.5);
  transform: translateY(-4px);
}
.char-card-photo {
  width: 100%; aspect-ratio: 3/4;
  object-fit: cover; object-position: top;
  background: #1a1200;
}
.char-card-name {
  font-size: .72rem; letter-spacing: .06em; color: #fff;
  margin: .35rem .25rem .15rem; text-align: center;
}
.char-card-perk {
  font-family: 'DM Mono', monospace; font-size: .48rem; letter-spacing: .05em;
  color: var(--amber); text-align: center; padding: .3rem .4rem;
  line-height: 1.4; width: 100%;
  background: rgba(245,176,48,.08);
  border-top: 1px solid rgba(245,176,48,.15);
  margin-top: .2rem;
}
.char-card.selected .char-card-perk {
  background: rgba(245,176,48,.15);
  border-top-color: rgba(245,176,48,.3);
  color: var(--amber-hi);
}
.char-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  padding: .25rem .4rem .3rem;
  width: 100%;
  border-top: 1px solid rgba(245,176,48,.12);
  background: rgba(245,176,48,.05);
}
.char-card.selected .char-card-badges {
  border-top-color: rgba(245,176,48,.3);
  background: rgba(245,176,48,.1);
}
.char-card-badge {
  font-family: 'DM Mono', monospace;
  font-size: .38rem;
  letter-spacing: .04em;
  color: rgba(245,176,48,.8);
  background: rgba(245,176,48,.1);
  border: 1px solid rgba(245,176,48,.22);
  border-radius: 2px;
  padding: .08rem .25rem;
  line-height: 1.4;
  white-space: nowrap;
}
.char-card.selected .char-card-badge {
  color: var(--amber-hi);
  border-color: rgba(245,176,48,.4);
}
.char-card-info {
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(245,176,48,.18);
  color: rgba(245,176,48,.75);
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}
.char-card-info:active { background: rgba(245,176,48,.4); }

/* ─── GAME HUD ─────────────────────────────────────────────────────────────── */
#screen-game { padding: 0; }

#hud {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(44px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(to bottom, rgba(8,4,0,.92), rgba(4,2,0,.82));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(245,176,48,.28);
  box-shadow: 0 2px 16px rgba(0,0,0,.5), 0 1px 0 rgba(245,176,48,.08) inset;
  display: flex; align-items: center; padding-left: 10px; padding-right: 10px; gap: 8px;
  z-index: 10;
}
#hud-left { display: flex; align-items: center; gap: 6px; flex: 1; }
#hud-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--amber); overflow: hidden; flex-shrink: 0;
  background: #2a1800; display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
#hud-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
#hud-name { font-family: 'DM Mono', monospace; font-size: .6rem; letter-spacing: .08em; color: var(--amber); }

#hud-center { text-align: center; flex-shrink: 0; }
#hud-timer {
  font-size: 1.4rem; line-height: 1; color: #fff; letter-spacing: .04em;
  display: inline-block;
  transition: font-size .18s ease-out, letter-spacing .18s ease-out, padding .18s ease-out, background .18s ease-out;
  will-change: transform;
}
#hud-timer.urgent {
  color: #ff3322;
  font-size: 2.52rem;
  letter-spacing: -0.01em;
  padding: 2px 8px;
  background: rgba(140, 20, 10, 0.25);
  border-radius: 6px;
  text-shadow:
    0 0 8px rgba(255,51,34,0.95),
    0 0 20px rgba(255,51,34,0.6),
    0 0 40px rgba(255,51,34,0.3);
  animation: timer-shake 0.15s steps(2, end) infinite;
}
#hud-timer.urgent-critical {
  transform: scale(1.15);
  text-shadow:
    0 0 12px rgba(255,70,50,1),
    0 0 28px rgba(255,51,34,0.85),
    0 0 56px rgba(255,51,34,0.5);
  background: rgba(180, 25, 10, 0.35);
  animation: timer-shake-fast 0.09s steps(2, end) infinite;
}
@keyframes timer-shake {
  0%   { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  100% { transform: translateX(-2px); }
}
@keyframes timer-shake-fast {
  0%   { transform: translateX(-2px) scale(1.15); }
  50%  { transform: translateX(2px) scale(1.15); }
  100% { transform: translateX(-2px) scale(1.15); }
}
#hud-timer-label { font-family: 'DM Mono', monospace; font-size: .38rem; color: #666; letter-spacing: .2em; }

#hud-right { text-align: right; flex: 1; }
#hud-pils-count {
  font-size: 2rem; line-height: 1; color: var(--amber-hi); letter-spacing: .04em;
  text-shadow: 0 0 12px rgba(245,176,48,.6);
  display: inline-block;
  will-change: transform;
  transition: color .18s ease-out;
}
#hud-pils-count.pop {
  animation: pils-pop 350ms cubic-bezier(.34,1.56,.64,1) forwards;
  color: #F5B030;
}
@keyframes pils-pop {
  0%   { transform: scale(1);    text-shadow: 0 0 12px rgba(245,176,48,.6); color: #fff; }
  30%  { transform: scale(1.65); text-shadow: 0 0 20px rgba(245,176,48,0.95), 0 0 40px rgba(245,176,48,0.5); color: #F5B030; }
  60%  { transform: scale(0.9);  text-shadow: 0 0 16px rgba(245,176,48,0.8),  0 0 30px rgba(245,176,48,0.4); color: #F5B030; }
  100% { transform: scale(1);    text-shadow: 0 0 12px rgba(245,176,48,.6); color: var(--amber-hi); }
}
#hud-pils-label { font-family: 'DM Mono', monospace; font-size: .52rem; color: var(--amber); letter-spacing: .1em; }

/* Avatar hit shake */
#hud-avatar {
  transition: border-color .12s ease-out;
  will-change: transform;
}
#hud-avatar.hit {
  animation: avatar-shake 0.24s steps(2, end) 4;
  border-color: #ff2200 !important;
}
@keyframes avatar-shake {
  0%   { transform: translateX(-3px); }
  50%  { transform: translateX(3px); }
  100% { transform: translateX(-3px); }
}

#hud-progress {
  position: absolute; top: 44px; left: 0; right: 0; height: 5px;
  background: rgba(255,255,255,.06); z-index: 10;
}
#hud-prog-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #D4920A, #F5B030);
  box-shadow: 0 0 8px rgba(245,176,48,.5);
  transition: width 0.25s ease-out, box-shadow .3s ease, background .3s ease;
}
#hud-prog-fill.glowing {
  animation: prog-glow 2s ease-in-out infinite;
}
@keyframes prog-glow {
  0%,100% { box-shadow: 0 0 8px rgba(245,176,48,.5); }
  50%     { box-shadow: 0 0 22px rgba(245,176,48,.95), 0 0 44px rgba(245,176,48,.45); }
}
#hud-prog-fill.full {
  background: linear-gradient(90deg, #F5B030, #FFF3D0);
  box-shadow: 0 0 20px rgba(255,243,208,0.9), 0 0 40px rgba(245,176,48,0.6);
}

/* ─── EVENT BANNER — kompakte Einzeilen-Leiste direkt unter dem HUD ────────── */
#event-banner {
  --ev-color: #F5B030;
  position: absolute; top: 49px; left: 0; right: 0;
  background: linear-gradient(to right, rgba(4,2,0,0.92), rgba(8,4,0,0.88), rgba(4,2,0,0.92));
  border-bottom: 1px solid var(--ev-color);
  padding: .2rem .8rem .35rem;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  z-index: 20;
  color: var(--ev-color);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 0 22px color-mix(in srgb, var(--ev-color) 28%, transparent);
  animation: ev-slide-in 0.3s ease-out;
  pointer-events: none;
}
@keyframes ev-slide-in {
  from { transform: translateY(-18px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
#ev-icon {
  font-size: 1rem; line-height: 1;
  display: inline-block;
  animation: ev-icon-bounce 0.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ev-color) 70%, transparent));
}
@keyframes ev-icon-bounce {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}
#ev-name {
  font-family: 'Anton', sans-serif;
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--ev-color);
  text-shadow: 0 0 10px color-mix(in srgb, var(--ev-color) 55%, transparent);
  white-space: nowrap;
}
#ev-bar-wrap {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
#ev-bar {
  height: 100%;
  background: var(--ev-color);
  width: 100%;
  transition: width linear;
  box-shadow: 0 0 8px color-mix(in srgb, var(--ev-color) 75%, transparent);
}


/* ─── CANVAS ───────────────────────────────────────────────────────────────── */
#game-canvas {
  position: absolute; top: 49px; left: 0; right: 0; bottom: 0;
  width: 100%; height: calc(100% - 49px); display: block;
}

/* ─── MOBILE CONTROLS ──────────────────────────────────────────────────────── */
.drink-btn {
  --fill-pct: 0%;
  position: absolute; bottom: 12px; right: 12px;
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(212,146,10,.28), rgba(80,40,0,.22));
  border: 2px solid rgba(212,146,10,.55);
  box-shadow: 0 0 18px rgba(212,146,10,.22), inset 0 1px 0 rgba(255,210,80,.12);
  color: var(--amber-hi); font-size: 1.5rem; text-align: center;
  display: none; align-items: center; justify-content: center; flex-direction: column;
  cursor: pointer; z-index: 15; line-height: 1;
  transition: background .1s, box-shadow .1s, border-color .1s;
  overflow: hidden; isolation: isolate;
}
/* Vertical fill shows drinkProgress while holding near a tap */
#drink-btn::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--fill-pct);
  background: linear-gradient(to top, rgba(245,176,48,0.75), rgba(245,176,48,0.25));
  pointer-events: none;
  z-index: -1;
  transition: height 0.06s linear;
}
.drink-btn > * { position: relative; z-index: 1; }
.drink-btn span {
  font-family: 'DM Mono', monospace; font-size: .44rem; letter-spacing: .12em;
  color: var(--amber); margin-top: 2px;
}
.drink-btn.touch-visible { display: flex; }
#drink-btn.poured {
  animation: drink-poured 250ms ease-out;
}
@keyframes drink-poured {
  0%   { background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.85), rgba(245,176,48,0.5)); box-shadow: 0 0 40px rgba(255,243,208,0.95); }
  60%  { background: radial-gradient(circle at 40% 35%, rgba(245,176,48,0.7), rgba(120,60,0,0.35));   box-shadow: 0 0 28px rgba(245,176,48,0.7); }
  100% { background: radial-gradient(circle at 40% 35%, rgba(212,146,10,.28), rgba(80,40,0,.22));    box-shadow: 0 0 18px rgba(212,146,10,.22); }
}

/* Kotzen button — green/sick, left of drink button */
.kotzen-btn {
  right: 114px;
  border-color: rgba(100,200,50,.55);
  background: radial-gradient(circle at 40% 35%, rgba(60,160,20,.28), rgba(20,60,0,.22));
  box-shadow: 0 0 18px rgba(80,180,30,.22), inset 0 1px 0 rgba(180,255,100,.12);
  color: #8fde5a;
}
.kotzen-btn span { color: #6eb842; }
.kotzen-btn:active {
  background: radial-gradient(circle at 40% 35%, rgba(100,220,50,.48), rgba(40,100,0,.35));
  border-color: #a0e050;
  box-shadow: 0 0 28px rgba(120,220,50,.5), inset 0 1px 0 rgba(200,255,120,.2);
}
.kotzen-btn.on-cooldown {
  opacity: .5;
}
.kotzen-btn.on-cooldown span { color: rgba(110,184,66,.7); }

/* Ready-flash: button pulses cream when cooldown just expired */
@keyframes koetzerchen-ready-pulse {
  0%   { box-shadow: 0 0 18px rgba(80,180,30,.22), inset 0 1px 0 rgba(180,255,100,.12); transform: scale(1); }
  40%  { box-shadow: 0 0 36px rgba(255,243,208,.85), inset 0 1px 0 rgba(255,255,255,.4); transform: scale(1.08); }
  100% { box-shadow: 0 0 18px rgba(80,180,30,.22), inset 0 1px 0 rgba(180,255,100,.12); transform: scale(1); }
}
.kotzen-btn.ready-flash {
  animation: koetzerchen-ready-pulse 600ms ease-out;
}

/* Chat panel repositioned above drink/kotzen during gameplay (dock itself hidden via JS on 'game' screen) */
#pfb-chat-panel {
  bottom: 174px;
  right: 12px;
  max-height: 55vh;
}

/* Tutorial hint banner */
#tutorial-hint {
  position: absolute;
  bottom: 118px;
  left: 50%; transform: translateX(-50%);
  background: rgba(4,2,0,.92);
  border: 1px solid rgba(245,176,48,.55);
  border-radius: 8px;
  padding: .45rem 1.1rem;
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--amber-hi);
  z-index: 20;
  white-space: nowrap;
  pointer-events: none;
  display: none;
  animation: tut-pulse 2s ease-in-out infinite;
}
@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(245,176,48,.25); }
  50%       { box-shadow: 0 0 20px rgba(245,176,48,.55); }
}

/* Tutorial comic panel (Emmy speech bubble) */
.tut-comic {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: .4rem;
  text-align: left;
}
.tut-comic-avatar {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .2rem;
}
.tut-comic-avatar img {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; object-position: top;
  border: 2px solid var(--amber);
  box-shadow: 0 0 16px rgba(245,176,48,.4);
}
.tut-comic-avatar span {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  background: rgba(245,176,48,.15); border: 2px solid var(--amber);
}
.tut-comic-name {
  font-family: 'DM Mono', monospace; font-size: .5rem; letter-spacing: .2em;
  color: var(--amber-hi);
}
.tut-comic-bubble {
  flex: 1; position: relative;
  background: rgba(245,176,48,.08);
  border: 1px solid rgba(245,176,48,.35);
  border-radius: 12px;
  padding: .7rem .9rem;
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: .04em; line-height: 1.55;
  color: rgba(255,243,208,.88);
  animation: tut-bubble-in .4s ease-out;
}
.tut-comic-bubble::before {
  content: ''; position: absolute;
  left: -8px; top: 22px;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 9px solid rgba(245,176,48,.35);
}
.tut-comic-bubble::after {
  content: ''; position: absolute;
  left: -6px; top: 23px;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid rgba(30,18,4,.98);
}
.tut-comic-bubble strong { color: var(--amber-hi); }
.tut-comic-bubble em { color: var(--amber-hi); font-style: normal; letter-spacing: .1em; }
@keyframes tut-bubble-in {
  from { opacity: 0; transform: translateX(-8px) scale(.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.drink-btn:active {
  background: radial-gradient(circle at 40% 35%, rgba(245,176,48,.48), rgba(120,60,0,.35));
  border-color: var(--amber-hi);
  box-shadow: 0 0 28px rgba(245,176,48,.5), inset 0 1px 0 rgba(255,220,100,.2);
}

/* ─── WIN/LOSS OVERLAY ─────────────────────────────────────────────────────── */
#screen-overlay {
  background: rgba(4,2,0,.9); backdrop-filter: blur(10px);
}
.ov-card {
  background: linear-gradient(to bottom, rgba(18,10,2,.98), rgba(10,6,0,.98));
  border: 1px solid rgba(212,146,10,.5);
  box-shadow:
    0 0 0 1px rgba(212,146,10,.1),
    0 0 50px rgba(212,146,10,.2),
    0 32px 80px rgba(0,0,0,.75);
  border-radius: 14px; max-width: 380px; width: 100%;
  padding: 2rem 1.5rem 1.5rem; text-align: center;
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .8rem;
}
.ov-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .78;
  z-index: 0;
  pointer-events: none;
  filter: saturate(1.2) contrast(1.05) brightness(.9);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.5) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.5) 100%);
}
/* Dark scrim over the video so text stays legible (lighter for visibility) */
.ov-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(4,2,0,.35) 0%, rgba(4,2,0,.12) 70%, transparent 100%);
  pointer-events: none;
}
.ov-card > *:not(.ov-bg-video) { position: relative; z-index: 1; }
.ov-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245,176,48,.8) 30%, var(--amber-hi) 50%, rgba(245,176,48,.8) 70%, transparent);
  z-index: 1;
}
#ov-eyebrow {
  font-family: 'DM Mono', monospace; font-size: .5rem; letter-spacing: .3em;
  color: rgba(245,176,48,.48); margin-bottom: .45rem;
}
#ov-title { font-size: 2rem; letter-spacing: .06em; color: var(--amber-hi); }
#ov-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--amber); margin: 0 auto; }
#ov-body { font-family: 'DM Mono', monospace; font-size: .62rem; letter-spacing: .06em; color: rgba(255,255,255,.6); line-height: 1.6; }

/* ─── OVERLAY INTRO CONTENT ─────────────────────────────────────────────────── */
.ov-target-num {
  font-size: 3.2rem; letter-spacing: .04em; color: var(--amber-hi);
  text-shadow: 0 0 28px rgba(245,176,48,.65); line-height: 1;
}
.ov-target-sub {
  font-family: 'DM Mono', monospace; font-size: .72rem; letter-spacing: .18em;
  color: rgba(245,176,48,.6); margin-top: .2rem;
}
.ov-emmy-bar {
  display: flex; align-items: center; gap: .6rem;
  margin: .4rem auto .2rem;
  padding: .4rem .7rem .4rem .45rem;
  background: rgba(245,176,48,.08);
  border: 1px solid rgba(245,176,48,.3);
  border-radius: 999px;
  max-width: 92%;
}
.ov-emmy-bar img {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; object-position: top;
  border: 1.5px solid var(--amber); flex: 0 0 auto;
}
.ov-emmy-fallback {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(245,176,48,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex: 0 0 auto;
}
.ov-emmy-quote {
  font-family: 'Anton', sans-serif; font-size: 1rem; letter-spacing: .04em;
  color: var(--amber-hi); text-align: left; line-height: 1.1;
}
.ov-star-strip {
  display: flex; justify-content: space-between; gap: .3rem;
  padding: .3rem .2rem 0;
  font-family: 'DM Mono', monospace; font-size: .55rem; letter-spacing: .1em;
  color: rgba(245,176,48,.55);
}
.ov-star-strip span { white-space: nowrap; }
.ov-steps {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .25rem 0;
}
.ov-step { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.ov-step-icon { font-size: 1.6rem; }
.ov-step-label {
  font-family: 'DM Mono', monospace; font-size: .52rem; letter-spacing: .14em;
  color: rgba(245,176,48,.7);
}
.ov-step-sep { font-size: 1.4rem; color: rgba(245,176,48,.3); margin-bottom: .8rem; }
.ov-warning {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: 'DM Mono', monospace; font-size: .62rem; letter-spacing: .1em;
  color: rgba(255,80,30,.9);
}

/* ─── SHARED BUTTONS ───────────────────────────────────────────────────────── */
.play-btn {
  background: var(--amber); border: 2px solid var(--cream); border-radius: 8px;
  color: #060400; font-family: 'Anton', sans-serif; font-size: 1rem; letter-spacing: .08em;
  padding: .7rem 2rem; cursor: pointer; transition: background .12s ease-out, transform .1s ease-out;
  min-width: 160px; min-height: 44px;
}
.play-btn:hover { background: var(--amber-hi); }
.play-btn:active { transform: scale(.97); }
.back-btn {
  background: none; border: 1px solid rgba(255,255,255,.15); border-radius: 6px;
  color: rgba(255,255,255,.5); font-family: 'DM Mono', monospace; font-size: .58rem;
  letter-spacing: .12em; padding: .35rem .8rem; cursor: pointer;
  transition: border-color .12s ease-out, color .12s ease-out;
}
.back-btn:hover { border-color: rgba(245,176,48,.4); color: var(--amber); }
.back-link {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: 'DM Mono', monospace; font-size: .52rem; letter-spacing: .14em;
  color: rgba(255,255,255,.3); text-decoration: none;
  transition: color .12s ease-out;
}
.back-link:hover { color: var(--amber); }

/* ─── SCREEN FLASH ─────────────────────────────────────────────────────────── */
#screen-flash {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none; opacity: 0;
}

/* ─── WIN OVERLAY — STARS, SECONDARY BUTTONS, TOAST ────────────────────────── */
.ov-card {
  gap: 0.6rem;
}

/* Emmy verdict quote above stars */
.ov-verdict {
  font-family: 'Anton', sans-serif;
  font-size: 1.15rem;
  letter-spacing: .03em;
  color: #FFF3D0;
  font-style: italic;
  max-width: 85%;
  margin: 0.2rem auto 0.1rem;
  text-align: center;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(8px);
  animation: ov-verdict-in 0.45s ease-out 0.1s forwards;
  position: relative;
}
.ov-verdict::before,
.ov-verdict::after {
  color: var(--amber-hi);
  font-family: 'Anton', sans-serif;
  font-style: normal;
  text-shadow: 0 0 10px rgba(245,176,48,0.55);
  font-size: 1.4rem;
  line-height: 0;
  position: relative;
}
.ov-verdict::before { content: '„'; margin-right: 0.15em; top: 0.2em; }
.ov-verdict::after  { content: '"'; margin-left: 0.15em; top: 0.2em; }
@keyframes ov-verdict-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ov-stars {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.3rem 0 0.6rem;
}
.ov-star {
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(255,255,255,0.15);
  transform: scale(0);
  display: inline-block;
  animation: ov-star-pop 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.ov-star.filled {
  color: #F5B030;
  text-shadow:
    0 0 10px rgba(245,176,48,0.85),
    0 0 24px rgba(245,176,48,0.5),
    0 0 48px rgba(245,176,48,0.25);
}
@keyframes ov-star-pop {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

.ov-btn-secondary {
  background: transparent;
  border: 1.5px solid rgba(245,176,48,0.55);
  border-radius: 8px;
  color: var(--amber-hi);
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  padding: 0.6rem 1.2rem;
  min-height: 44px;
  min-width: 160px;
  cursor: pointer;
  transition: background .12s ease-out, border-color .12s ease-out, transform .1s ease-out;
}
.ov-btn-secondary:hover {
  background: rgba(245,176,48,0.08);
  border-color: var(--amber-hi);
}
.ov-btn-secondary:active { transform: scale(.97); }
.ov-btn-secondary:disabled {
  opacity: 0.55;
  cursor: default;
}

#ov-toast {
  position: fixed;
  left: 50%;
  bottom: 22%;
  transform: translate(-50%, 20px);
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  color: #fff;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .22s ease, transform .22s ease;
  border: 1.5px solid transparent;
}
#ov-toast.ov-toast-show {
  opacity: 1;
  transform: translate(-50%, 0);
  animation: ov-toast-fade 2s ease forwards;
}
#ov-toast.good {
  background: rgba(30,110,40,0.92);
  border-color: rgba(120,220,100,0.7);
  box-shadow: 0 0 24px rgba(80,220,80,0.35);
}
#ov-toast.bad {
  background: rgba(140,30,20,0.92);
  border-color: rgba(255,110,80,0.7);
  box-shadow: 0 0 24px rgba(255,80,50,0.35);
}
@keyframes ov-toast-fade {
  0%   { opacity: 0; transform: translate(-50%, 20px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

/* ─── STAR CONDITIONS (intro overlay) ─────────────────────────────────────── */
.ov-star-conds {
  display: flex; flex-direction: column; gap: .2rem;
  margin-top: .45rem;
  padding: .35rem .55rem;
  background: rgba(245,176,48,.05);
  border: 1px solid rgba(245,176,48,.18);
  border-radius: 6px;
}
.ov-star-cond {
  font-family: 'DM Mono', monospace;
  font-size: .56rem; letter-spacing: .06em;
  color: rgba(245,176,48,.7);
  display: flex; align-items: center; gap: .4rem;
}
.osc-star { color: #F5B030; letter-spacing: -.05em; }

/* ─── CHALLENGE BUTTONS (won overlay) ─────────────────────────────────────── */
.ov-challenge-btns {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  margin-top: .5rem;
}
.ov-challenge-btn {
  background: transparent;
  border: 1.5px solid rgba(245,176,48,.35);
  border-radius: 8px;
  color: rgba(245,176,48,.75);
  font-family: 'Anton', sans-serif;
  font-size: .75rem; letter-spacing: .1em;
  padding: .4rem .9rem;
  min-height: 40px;
  cursor: pointer;
  transition: background .12s ease-out, border-color .12s ease-out, transform .1s ease-out;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.ov-challenge-btn small {
  font-family: 'DM Mono', monospace;
  font-size: .5rem; letter-spacing: .06em;
  color: rgba(245,176,48,.5);
}
.ov-challenge-btn:hover { background: rgba(245,176,48,.07); border-color: var(--amber-hi); }
.ov-challenge-btn:active { transform: scale(.96); }

/* ─── STATS LINE (won + lost overlay) ────────────────────────────────────── */
.ov-stats-line {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  color: rgba(245,176,48,.7);
  margin-top: .1rem;
  display: inline-flex; flex-wrap: wrap;
  justify-content: center; align-items: baseline;
  gap: .35em;
  max-width: 92%;
}
.ov-stats-sep { color: rgba(245,176,48,.28); }
.ov-stats-total {
  color: rgba(245,176,48,.4);
  font-size: .52rem; letter-spacing: .18em;
}
.ov-stats-line--bad { color: rgba(255,140,90,.7); }
.ov-stats-line--bad .ov-stats-sep { color: rgba(255,140,90,.3); }
.ov-stats-line--bad .ov-stats-total { color: rgba(255,140,90,.45); }

/* ─── SCHONTAG / LOST OVERLAY ────────────────────────────────────────────── */
.ov-emmy-bar--bad {
  background: rgba(255,110,70,.08);
  border-color: rgba(255,110,70,.35);
}
.ov-emmy-bar--bad .ov-emmy-quote { color: rgba(255,200,170,.95); }
.ov-emmy-bar--bad img { border-color: rgba(255,110,70,.7); filter: grayscale(.35); }
.ov-fail-stars {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.18);
  text-align: center;
  margin: .1rem auto .05rem;
}
.ov-fail-stars::before { content: '☆☆☆'; }
.ov-fail-reason {
  font-family: 'DM Mono', monospace; font-size: .58rem; letter-spacing: .15em;
  color: rgba(255,140,90,.75); text-align: center;
  margin: .2rem auto 0;
}

/* ─── ICON ROW — secondary actions on won overlay ────────────────────────── */
.ov-icons-row {
  display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap;
  margin-top: .3rem;
}
.ov-icon-btn {
  background: transparent;
  border: 1px solid rgba(245,176,48,.22);
  border-radius: 8px;
  color: rgba(245,176,48,.7);
  font-family: 'Anton', sans-serif;
  font-size: .65rem; letter-spacing: .1em;
  padding: .35rem .7rem;
  min-height: 40px;
  min-width: 68px;
  cursor: pointer;
  transition: background .12s ease-out, border-color .12s ease-out, transform .1s ease-out, color .12s ease-out;
  display: inline-flex; flex-direction: column; align-items: center; gap: .05rem;
}
.ov-icon-btn .ov-icon-glyph { font-size: 1rem; line-height: 1; }
.ov-icon-btn .ov-icon-label {
  font-family: 'DM Mono', monospace;
  font-size: .5rem; letter-spacing: .08em;
  color: rgba(245,176,48,.55);
}
.ov-icon-btn:hover { background: rgba(245,176,48,.06); border-color: var(--amber-hi); color: var(--amber-hi); }
.ov-icon-btn:active { transform: scale(.95); }
.ov-icon-btn:disabled { opacity: .55; cursor: default; }

/* ─── STREAK HUD ─────────────────────────────────────────────────────────── */
#hud-streak {
  position: absolute;
  top: 2px; right: 4px;
  background: rgba(255,80,0,.85);
  border-radius: 8px;
  padding: .15rem .45rem;
  display: flex; align-items: center; gap: .2rem;
  font-family: "Anton", sans-serif;
  font-size: .9rem;
  color: #fff;
  pointer-events: none;
  z-index: 2;
  transition: opacity .15s ease-out;
}
#hud-streak.hidden { display: none; }
#hud-streak-count { letter-spacing: .03em; }
#hud-streak-label { font-size: .85rem; }

/* ─── MAP NODE STARS ──────────────────────────────────────────────────────── */
.map-node-stars {
  display: flex; justify-content: center; gap: .1rem;
  margin-top: .1rem;
  font-size: .85rem;
  line-height: 1;
}
.mns { color: rgba(245,176,48,.18); }
.mns.on { color: #F5B030; text-shadow: 0 0 6px rgba(245,176,48,.7); }

/* ─── NPC INTRO OVERLAY ─────────────────────────────────────────────────── */
.npc-intro-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
}
.npc-intro-overlay.visible { display: flex; }

.npc-intro-card {
  background: linear-gradient(180deg, #1a0f00 0%, #060400 100%);
  border: 3px solid #D4920A;
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 48px rgba(245, 176, 48, 0.35);
}

.npc-intro-emoji {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 14px;
  animation: npc-bob 1.4s ease-in-out infinite;
}
@keyframes npc-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.npc-intro-title {
  font-family: Anton, sans-serif;
  font-size: 28px;
  color: #F5B030;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.npc-intro-subtitle {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  color: #FFF3D0;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.npc-intro-body {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  color: #FFF3D0;
  line-height: 1.4;
  margin-bottom: 22px;
}
.npc-intro-btn {
  background: #D4920A;
  color: #060400;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-family: Anton, sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 0 #7a5208;
  transition: transform 0.08s, box-shadow 0.08s;
}
.npc-intro-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #7a5208;
}

/* ─── NPC BANNER (repeat-spawn) ─────────────────────────────────────────── */
.npc-banner {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(6, 4, 0, 0.88);
  border: 2px solid #D4920A;
  border-radius: 10px;
  padding: 10px 22px;
  font-family: Anton, sans-serif;
  font-size: 18px;
  color: #F5B030;
  letter-spacing: 1px;
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(.2,.6,.35,1);
}
.npc-banner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}