/* =============================================================
   Le Labyrinthe des Hassanats — styles
   Esprit cahier d'écolier, dessiné à la main.
   ============================================================= */

:root {
  --paper:        #fdfdf6;
  --paper-line:   #b8d4e8;
  --paper-line-2: #8fb8d4;
  --ink:          #1a4d8f;
  --ink-soft:     #2c5fa0;
  --red:          #d63838;
  --red-dark:     #8a1f1f;
  --green:        #2e9c3e;
  --gold:         #e8b837;
  --gold-soft:    #f5e6a8;
  --shadow:       rgba(26, 77, 143, 0.15);
  --shadow-2:     rgba(26, 77, 143, 0.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive;
  color: var(--ink);
}

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  min-height: 100vh;
  font-size: 18px;
}

body::before {
  content: '';
  position: fixed;
  top: 0; bottom: 0;
  left: 80px;
  width: 1px;
  background: rgba(214, 56, 56, 0.35);
  pointer-events: none;
  z-index: 0;
}

#game {
  position: relative;
  width: 100%;
  min-height: 100vh;
  z-index: 1;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.45s ease;
  padding: 1rem;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

em { font-style: normal; font-weight: 700; }

/* =============================================================
   Typographie
   ============================================================= */
.hand-title {
  font-family: 'Caveat', cursive;
  font-size: 4rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem 0;
  text-align: center;
  line-height: 1.05;
  transform: rotate(-1deg);
}
.hand-title .underline {
  display: inline-block;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 4px;
}

.subtitle {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: var(--ink-soft);
  margin: 0 0 1rem 0;
  text-align: center;
}

.footer-note {
  position: absolute;
  bottom: 0.8rem;
  font-size: 1rem;
  color: var(--ink);
  opacity: 0.6;
  text-align: center;
  width: 100%;
}

/* =============================================================
   Bouton principal
   ============================================================= */
.big-btn {
  display: inline-block;
  margin: 1.2rem auto 0;
  padding: 0.65rem 2.2rem;
  font-family: 'Caveat', cursive;
  font-size: 1.7rem;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow-2);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.big-btn:hover  { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-2); }
.big-btn:active { transform: translate(2px, 2px);   box-shadow: 1px 1px 0 var(--shadow-2); }
.big-btn:focus-visible { outline: 3px dashed var(--gold); outline-offset: 4px; }

/* =============================================================
   Choix du personnage
   ============================================================= */
.select-screen { overflow: auto; }

.character-grid {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.character-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 4px 5px 0 var(--shadow);
  padding: 1.2rem 1.6rem 1.4rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  text-align: center;
  min-width: 200px;
}
.character-card::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 80px; height: 18px;
  background: rgba(232, 184, 55, 0.45);
  border: 1px dashed rgba(26, 77, 143, 0.3);
}
.character-card:hover {
  transform: translate(-2px, -3px);
  box-shadow: 6px 7px 0 var(--shadow);
}
.character-card svg.character-preview {
  width: 128px;
  height: 128px;
  display: block;
  margin: 0.5rem auto 0.4rem;
}
.character-card .char-name {
  font-family: 'Caveat', cursive;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
}

/* =============================================================
   Tutoriel — 5 lignes avec sprites en regard
   ============================================================= */
.intro-screen { overflow: auto; }

.intro-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 1.6rem 2.2rem 1.8rem;
  max-width: 580px;
  box-shadow: 4px 5px 0 var(--shadow);
  text-align: left;
}
.intro-card h2 {
  font-family: 'Caveat', cursive;
  font-size: 1.9rem;
  margin: 0 0 0.4rem 0;
  color: var(--ink);
  text-align: center;
}
.rules {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0 0;
  font-size: 1.18rem;
  line-height: 1.45;
}
.rules li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.55rem 0;
}
.rules .rule-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rules .rule-icon svg { width: 100%; height: 100%; }
.rules .rule-keys {
  display: inline-flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.key {
  display: inline-block;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 0 0.45rem;
  background: var(--paper);
  font-family: 'Patrick Hand', sans-serif;
  font-size: 1.05rem;
  margin: 0 0.05rem;
  min-width: 1.6rem;
  text-align: center;
}

/* =============================================================
   Labyrinthe (Pac-Man)
   ============================================================= */
.maze-screen {
  justify-content: flex-start;
  padding: 0.5rem;
}

.hud {
  display: flex;
  gap: 0.7rem;
  padding: 0.4rem 0.5rem 0.6rem;
  font-size: 1.15rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.hud-item {
  padding: 0.25rem 0.85rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 5px;
  font-family: 'Patrick Hand', sans-serif;
}
.hud-green   { color: var(--green); }
.hud-progress { font-family: 'Caveat', cursive; font-size: 1.3rem; }

.hud-protect {
  display: none;
  background: var(--gold);
  color: var(--ink);
  border-color: #b38820;
  font-weight: 700;
  align-items: center;
  gap: 0.4rem;
  animation: pulseGold 0.6s ease-in-out infinite alternate;
}
.hud-protect.shown { display: inline-flex; }
@keyframes pulseGold {
  from { box-shadow: 0 0 0 0   rgba(232, 184, 55, 0.7); transform: scale(1); }
  to   { box-shadow: 0 0 0 8px rgba(232, 184, 55, 0);   transform: scale(1.04); }
}
.hud-protect-bar {
  width: 80px; height: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 4px;
  overflow: hidden;
}
.hud-protect-bar-fill {
  height: 100%;
  background: var(--ink);
  width: 100%;
  transition: width 0.1s linear;
}

.maze-svg {
  width: min(96vw, 760px);
  height: auto;
  max-height: 80vh;
  display: block;
  margin: 0 auto;
}

.maze-area-bg {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
  rx: 6;
}
.wall-cell {
  fill: var(--ink-soft);
  stroke: var(--ink);
  stroke-width: 1.4;
}

/* Hassanats (pellets dorés) */
.hassanat-dot {
  fill: var(--gold);
  stroke: #b38820;
  stroke-width: 0.8;
  animation: dotPulse 1.6s ease-in-out infinite alternate;
}
@keyframes dotPulse {
  from { opacity: 0.85; }
  to   { opacity: 1;    }
}

/* =============================================================
   ANGES — éléments les plus visibles du labyrinthe
   ============================================================= */
.angel-spot { transform-box: fill-box; transform-origin: center; }

.angel-glow {
  fill: url(#angel-glow-grad);
  transform-box: fill-box;
  transform-origin: center;
  animation: angelGlow 1.2s ease-in-out infinite;
}
@keyframes angelGlow {
  0%   { opacity: 0.5; transform: scale(0.85); }
  50%  { opacity: 1.0; transform: scale(1.18); }
  100% { opacity: 0.5; transform: scale(0.85); }
}
.angel-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: angelRotate 9s linear infinite;
}
.angel-ray {
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}
@keyframes angelRotate {
  to { transform: rotate(360deg); }
}
.angel-sprite {
  animation: angelBob 2.2s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes angelBob {
  from { transform: translateY(-2px); }
  to   { transform: translateY(2px);  }
}

/* =============================================================
   Joueur — sprite + halo de Protection
   ============================================================= */
.player-character {
  /* la position est mise à jour à chaque frame en JS via transform */
}

.player-halo-container {
  display: none;
  pointer-events: none;
}
.player-halo-container.shown { display: inline; }
.player-halo-container.fading { animation: haloFadeOut 0.5s ease-out forwards; }

.player-halo-circle {
  fill: url(#player-halo-grad);
  transform-box: fill-box;
  transform-origin: center;
  animation: playerHaloPulse 0.8s ease-in-out infinite alternate;
}
@keyframes playerHaloPulse {
  from { opacity: 0.55; transform: scale(0.95); }
  to   { opacity: 1;    transform: scale(1.18); }
}
@keyframes haloFadeOut {
  to { opacity: 0; transform: scale(1.6); }
}

/* =============================================================
   Démons — état normal + état purifié (transition fluide)
   ============================================================= */
.demon-character .demon-normal,
.demon-character .demon-purified {
  transition: opacity 0.5s ease;
}
.demon-character .demon-purified {
  opacity: 0;
}
.demon-character.purified .demon-normal {
  opacity: 0;
}
.demon-character.purified .demon-purified {
  opacity: 1;
  animation: scaredWobble 0.45s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes scaredWobble {
  from { transform: rotate(-5deg) translateY(-1px); }
  to   { transform: rotate(5deg)  translateY(1px);  }
}

/* =============================================================
   Particules dorées (explosion à la dissipation d'un démon)
   ============================================================= */
.particle {
  fill: var(--gold);
  pointer-events: none;
  animation: particleBurst 0.7s ease-out forwards;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes particleBurst {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; }
}

/* =============================================================
   Portail de sortie
   ============================================================= */
.exit-portal-locked {
  fill: rgba(180, 180, 180, 0.4);
  stroke: #888;
  stroke-width: 2;
  stroke-dasharray: 4 4;
}
.exit-portal-open {
  fill: var(--gold);
  fill-opacity: 0.5;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-dasharray: 5 3;
  animation: portalOpen 1.6s linear infinite;
}
@keyframes portalOpen {
  to { stroke-dashoffset: -32; }
}
.exit-label {
  font-family: 'Caveat', cursive;
  font-size: 0.9rem;
  fill: var(--ink);
  font-weight: 700;
  pointer-events: none;
}

/* Toasts (×7, ×42, etc.) */
.toast-text {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  font-weight: 700;
  pointer-events: none;
  text-anchor: middle;
}

.maze-back-btn {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: 0.2rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
}
.maze-back-btn:hover { background: var(--ink); color: var(--paper); }

/* =============================================================
   Paradis
   ============================================================= */
.paradise-screen { padding: 0; overflow: hidden; }

.paradise-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #a7dbff 0%, #fde6a6 55%, #b9e6a6 100%);
  z-index: 0;
}
.paradise-scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.paradise-hill1 { fill: #81ca79; }
.paradise-hill2 { fill: #5bb25e; }
.paradise-river {
  stroke: #3ea0d4; stroke-width: 8; opacity: 0.78; stroke-linecap: round;
  stroke-dasharray: 14 5;
  animation: flow 6s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -38; } }
.tree-trunk { stroke: #6b4023; stroke-width: 5; stroke-linecap: round; }
.tree-crown { fill: #3c8e3f; stroke: #2d6a30; stroke-width: 2; }
.paradise-sun { fill: var(--gold); stroke: #b38820; stroke-width: 3; }
.sun-ray { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.paradise-bird { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }

.end-card {
  position: relative;
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  border: 3px solid var(--gold);
  border-radius: 12px;
  padding: 1.4rem 2.5rem 1.6rem;
  text-align: center;
  box-shadow: 4px 5px 0 rgba(232, 184, 55, 0.4);
  max-width: 520px;
}
.end-card .winner-sprite {
  width: 110px; height: 110px;
  display: block;
  margin: 0 auto 0.4rem;
  filter: drop-shadow(0 0 12px rgba(232,184,55,0.65));
  animation: gentleFloat 2s ease-in-out infinite alternate;
}
@keyframes gentleFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
.poem {
  font-family: 'Caveat', cursive;
  font-size: 1.85rem;
  line-height: 1.3;
  margin: 0.3rem 0 1rem 0;
}
.end-stats {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  margin: 0.2rem 0 1rem;
  color: var(--ink-soft);
}

.end-buttons {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: none;
}
.btn-secondary:hover { background: var(--ink); color: var(--paper); box-shadow: none; }

/* =============================================================
   Enfer — ton doux
   ============================================================= */
.hell-screen {
  padding: 0;
  background: linear-gradient(to bottom, #200808 0%, #5a1a1a 50%, #1a0404 100%);
  overflow: hidden;
}
.hell-flames {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.flame {
  position: absolute;
  bottom: -20px;
  background: radial-gradient(ellipse at center bottom,
    #ffc94a 0%, #ff6b33 40%, #9c1f1f 80%, transparent 100%);
  border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
  opacity: 0.78;
  animation: flicker 1.9s ease-in-out infinite alternate;
  filter: blur(2px);
}
@keyframes flicker {
  0%   { transform: translateY(0)    scale(1, 1);       opacity: 0.75; }
  50%  { transform: translateY(-12px) scale(1.05, 0.95); opacity: 0.95; }
  100% { transform: translateY(-6px)  scale(0.95, 1.05); opacity: 0.68; }
}
.hell-card {
  position: relative;
  z-index: 3;
  background: rgba(30, 10, 10, 0.88);
  border: 3px solid #c73e3e;
  border-radius: 12px;
  padding: 1.4rem 2.5rem 1.6rem;
  text-align: center;
  color: #fff4e0;
  box-shadow: 4px 5px 0 rgba(199, 62, 62, 0.4);
  max-width: 520px;
}
.hell-card .hand-title { color: #ffcd6a; font-size: 2.6rem; }
.hell-card .poem       { color: #ffe0c0; }
.hell-card .end-stats  { color: #ffe0c0; }
.hell-btn {
  background: #c73e3e;
  box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.15);
}
.hell-card .btn-secondary {
  color: #ffcd6a;
  border-color: #c73e3e;
}

/* =============================================================
   D-pad virtuel (mobile uniquement, monté en JS pendant la phase maze)
   ============================================================= */
.dpad {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  z-index: 9998;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  pointer-events: auto;
  touch-action: none;
}
.dpad-btn {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform 0.1s ease, opacity 0.1s ease, background 0.1s ease;
}
.dpad-btn:active {
  transform: scale(0.92);
  opacity: 1;
  background: var(--gold-soft);
}
.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 3; }


/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 800px) {
  .hand-title  { font-size: 3rem; }
  .intro-card  { padding: 1.4rem; }
  .character-grid { gap: 1.2rem; }
  .character-card { min-width: 160px; padding: 1rem; }
  .character-card svg.character-preview { width: 96px; height: 96px; }
  .rules { font-size: 1.05rem; }
  .maze-svg { max-height: 70vh; }
}

@media (max-width: 600px) {
  body::before { display: none; }
  body { font-size: 16px; }
  .hand-title { font-size: 2.4rem; }

  .hud { font-size: 0.95rem; gap: 0.35rem; padding: 0.3rem 0.4rem 0.45rem; }
  .hud-item { padding: 0.18rem 0.55rem; }
  .hud-progress { font-size: 1.05rem; }
  .hud-protect-bar { width: 56px; }
  .maze-back-btn { font-size: 0.95rem; padding: 0.15rem 0.5rem; }

  .maze-svg { max-height: 65vh; }
  .maze-screen { padding-bottom: 200px; }

  .rules { font-size: 0.95rem; }
  .rules li { flex-wrap: wrap; }

  .dpad { width: 144px; height: 144px; bottom: 12px; }
}