/* Habillage façon RPG de poche : cadres blancs à bord épais, police pixel,
   portrait du personnage. Se superpose à style.css (mise en page commune). */

:root {
  --pk-ink: #20242e;
  --pk-paper: #fbf8ef;
  --pk-edge: #3a3f52;
  --pk-shadow: rgba(10, 12, 20, 0.35);
  --pixel: "LQPixel", ui-monospace, monospace;
}
/* la police pixel du pack a une espace quasi nulle : on la rétablit */
.dialogue, .wlabel, .place-banner, .toast, .quest-track, .keyrow, .intro-line, .title-logo { word-spacing: 0.1em; }

/* ------------------------------------------------------------ dialogue */
.dialogue {
  left: 50%; right: auto; bottom: 18px;
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 32px));
  background: var(--pk-paper);
  color: var(--pk-ink);
  border: 4px solid var(--pk-edge);
  border-radius: 12px;
  box-shadow: 0 0 0 3px var(--pk-paper), 0 0 0 7px var(--pk-edge), 0 10px 30px var(--pk-shadow);
  backdrop-filter: none;
}
.dlg-inner { gap: 1em; padding: 0.95em 1.2em 0.8em; align-items: flex-start; }
.dlg-face {
  flex: 0 0 auto; width: 86px; height: 86px;
  border-radius: 8px; border: 3px solid var(--pk-edge);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 45%, #fff) 0%, color-mix(in srgb, var(--accent) 75%, #222) 100%);
  overflow: hidden; display: grid; place-items: center;
}
.dlg-face img { width: 76px; height: 76px; image-rendering: pixelated; }
.dlg-name { font-family: var(--pixel); font-size: 0.9em; letter-spacing: 0.06em; color: #c0392b; text-transform: none; }
.dlg-text { font-family: var(--pixel); font-size: 1.12em; line-height: 1.5; color: var(--pk-ink); min-height: 3.2em; }
.dialogue .btn { background: #fff; color: var(--pk-ink); border: 3px solid var(--pk-edge); border-radius: 8px; font-family: var(--pixel); box-shadow: 0 3px 0 var(--pk-edge); }
.dialogue .btn.primary { background: #ffd84a; }
.dialogue .btn:hover { transform: translateY(-1px); }
.dialogue .btn.ghost.next { border: none; box-shadow: none; background: transparent; color: #c0392b; font-size: 1.2em; animation: pk-bob 0.8s steps(2) infinite; }
@keyframes pk-bob { 50% { transform: translateY(3px); } }

/* ------------------------------------------------------ étiquette monde */
.wlabel {
  position: absolute; left: 0; top: 0; pointer-events: none;
  background: var(--pk-paper); color: var(--pk-ink);
  border: 3px solid var(--pk-edge); border-radius: 8px;
  padding: 0.3em 0.7em 0.35em; text-align: center; white-space: nowrap;
  font-family: var(--pixel);
  box-shadow: 0 3px 0 var(--pk-edge), 0 8px 18px var(--pk-shadow);
  transition: opacity 0.12s;
  z-index: 3;
}
.wlabel::after {
  content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--pk-edge);
}
.wlabel.hidden { opacity: 0; }
.wl-main { font-size: 1.02em; }
.wl-sub { font-size: 0.78em; color: color-mix(in srgb, var(--accent) 70%, #222); }
.wl-key {
  display: inline-block; margin-top: 0.25em; font-family: var(--pixel); font-size: 0.66em;
  background: #ffd84a; color: var(--pk-ink); border: 2px solid var(--pk-edge); border-radius: 5px; padding: 0 0.4em;
}
.wlabel.locked { background: #efe7e7; }
.wlabel.locked .wl-main { color: #a33; }

/* --------------------------------------------------------- bandeau lieu */
.place-banner {
  position: absolute; left: 22px; top: 18px; pointer-events: none;
  background: var(--pk-paper); color: var(--pk-ink);
  border: 3px solid var(--pk-edge); border-radius: 8px;
  padding: 0.35em 0.9em; font-family: var(--pixel);
  opacity: 0; transform: translateY(-14px);
  box-shadow: 0 3px 0 var(--pk-edge);
}
.place-banner.in { animation: pk-banner 3.4s ease forwards; }
.pb-main { font-size: 1.05em; }
.pb-sub { font-size: 0.72em; color: #6a6f82; }
@keyframes pk-banner {
  0% { opacity: 0; transform: translateY(-14px); }
  10%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* ----------------------------------------------------------- toasts, HUD */
.toast { background: var(--pk-paper); color: var(--pk-ink); border: 3px solid var(--pk-edge); border-left-width: 8px; border-radius: 8px; font-family: var(--pixel); box-shadow: 0 3px 0 var(--pk-edge); }
.toast-title { color: var(--pk-ink); }
.toast-sub { color: #5a6072; font-family: var(--pixel); }
.quest-track, .hud-esc, .keyrow { font-family: var(--pixel); }
.hud-esc { left: 14px; top: auto; bottom: 14px; }

/* écran-titre : le logo en police pixel */
.title-logo h1 { font-family: var(--pixel); letter-spacing: 0.08em; text-shadow: 0 4px 0 #3a2a1a, 0 0 30px rgba(255, 200, 120, 0.4); }
.intro-line { font-family: var(--pixel); }

/* v5 : le canvas Phaser remplit l'écran ; le fondu passe par un voile DOM */
#game-host { position: absolute; inset: 0; }
#game-host canvas { display: block; image-rendering: pixelated; }
.lq-fade { position: absolute; inset: 0; background: #000; pointer-events: none; opacity: 1; z-index: 5; }