/* ─────  custom fonts  ───── */
@font-face {
  font-family: 'Font1';
  src: url('assets/fonts/font1.ttf') format('truetype');
}
@font-face {
  font-family: 'Font2';
  src: url('assets/fonts/font2.ttf') format('truetype');
}

/* ─────  global  ───── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; color: #fff; overflow: hidden; }
body  { font-family: 'Font1', sans-serif; }

/* fade‑out helper */
.fade-out { animation: fadeOut 1s forwards; }
@keyframes fadeOut { to { opacity: 0; } }

/* ─────  menu  ───── */
#menu-root {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* fade the button away */
.menu-btn.fade-out {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .35s ease, transform .35s ease;
}

.sticky-header {
  z-index: 1000;          /* always on top of the game canvas */
  pointer-events: none;   /* let clicks pass through */
  opacity: 1;             /* ensure it stays visible */
}

/* optional gentle fade‑in for the logo once it becomes visible */
.logo-container {
  transition: opacity 0.35s ease;
}

/* existing “collapsed” rules keep working */
.logo-container.collapsed {
  transform: translateY(-100vh) scale(0.2);
  opacity: 0;
}

/* button */
.menu-btn {
  margin-top: 2rem;
  padding: .8rem 2.4rem;
  font-family: 'Font2', sans-serif;
  font-size: 1.2rem;
  border: 2px solid #fff;
  background: transparent;
  border-radius: 2rem;
  cursor: pointer;
  transition: background .3s, color .3s;
  color: #fff;
}
.menu-btn:hover,
.menu-btn:focus {
  background: #fff;
  color: #000;
}

/* ─────  game placeholder  ───── */
.game-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Font2', sans-serif;
  font-size: 2rem;
}

/* ─────  splash logo  ───── */

/* visible state */
.logo-container {
  /* make it BIG but responsive                                  min   preferred   max   */
  font-size: clamp(6rem, 15vw, 12rem);
  line-height: .9;
  white-space: nowrap;        /* keep “IMPS” on one line        */
  font-family: 'Font2', sans-serif;
  transition:
    opacity .35s ease,
    transform 2.5s cubic-bezier(.19,1,.22,1);
}

/* typed letters inherit the size above */
.typed-text { display: inline-block; }

/* collapsed state – just lift it a bit and shrink slightly      */
.logo-container.collapsed {
  transform: translateY(-40vh) scale(.3);   /* was -100vh 0.2   */
  opacity: 0;
} 

/* ─────  permanent IMPS header  ───── */
#site-header {
  position: fixed;
  top: 50%;                   /* start dead‑centre           */
  left: 50%;
  transform: translate(-50%, -50%);         /* ⬅ centre & full size */
  font-size: clamp(6rem, 15vw, 12rem);
  line-height: .9;
  white-space: nowrap;
  font-family: 'Font2', sans-serif;
  pointer-events: none;
  z-index: 1000;
  transition: top 1s ease, transform 1s ease;
}

/* after the intro animation – pinned to the top spacer */
#site-header.pinned {
  position: fixed;                 /* unchanged */
  left: 50%;
  top: var(--logo-top, 0);         /* JS writes the exact pixel value */
  transform: translate(-50%, 0) scale(var(--logo-scale, .35));
  transform-origin: top center;    /* makes vertical maths easier */
  transition: top 1s ease, transform 1s ease;
  top: 4px;
}


/* ───────── storytelling overlay ───────── */
#story-root {
  position: fixed;
  top: 45%; left: 50%;
  width: 70vw;     
  max-width: 225ch;                                   
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 900;                     /* below logo, above game */
  font-family: 'Font2', sans-serif;
  transition: transform .6s ease;      /* smooth slide for Q/A space */
}

.story-line {
  position: absolute;
  top: 0;
  left: 50%;                        /* ← was 0  */
  transform: translate(-50%, -50%); /* stays the same */
  width: 100%;
  font-size: 3rem;
  line-height: 1.25;
  text-align: center;
  white-space: pre-wrap;
  word-wrap: break-word;
  transition: transform 0.6s ease, opacity 0.8s ease;
}

/* ───── helper fade‑in ───── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 1s forwards; }

/* ——— shared timing ——— */
:root { --btn-fade: 1s; }          /* 1s in  ➜ 1s out */

/* fade helpers now share the same duration */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to   { opacity: 0; } }

.fade-in  { animation: fadeIn  var(--btn-fade) forwards; }
.fade-out { animation: fadeOut var(--btn-fade) forwards; }

/* ——— click feedback (white flash) ——— */
@keyframes clickFlash {
  0%   { box-shadow: 0 0 0   0 rgba(255,255,255,.9); }
  100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
}
.click-flash { animation: clickFlash .28s ease both; }

#player-dot.uses-sprite{
  width:  var(--tile);
  height: var(--tile);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.enemy-dot{          /* same footprint as a map tile */
  width:  var(--tile);
  height: var(--tile);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin:auto;
}

.enemy-dot.fallback-icon{        /* no sprite → 32‑px square icon */
  width: 32px; height: 32px;
}