/* Lézard Quest — habillage du lecteur web.
 * La section CONTROLLER reprend le CSS du pad tactile de GB Studio via binjgb
 * (MIT, voir LICENSES.txt) : lezard.js pilote ces éléments par leurs id. */

:root {
  --nuit: #151B2C;
  --nuit-2: #1D2438;
  --laiton: #C9A227;
  --parchemin: #F1ECDF;
  --lezard: #6FBF63;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--nuit);
  color: var(--parchemin);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

/* ---------- écran d'attente ---------- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--nuit);
  transition: opacity .4s;
}
#boot h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 6px;
  color: var(--laiton);
}
#boot p { margin: 0; opacity: .7; font-size: 14px; }
body.ready #boot { opacity: 0; pointer-events: none; }

/* ---------- bandeau ---------- */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: linear-gradient(var(--nuit-2), rgba(29, 36, 56, .85));
  border-bottom: 1px solid rgba(201, 162, 39, .45);
}
#topbar .brand {
  font-weight: bold;
  letter-spacing: 3px;
  color: var(--laiton);
  font-size: 15px;
}
#topbar .sub { opacity: .55; font-size: 12px; }
#topbar .sub a { color: var(--laiton); text-decoration: none; }
#topbar .sub a:hover { text-decoration: underline; }
#helpBtn {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--laiton);
  background: transparent;
  color: var(--laiton);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
#helpBtn:hover { background: rgba(201, 162, 39, .15); }

/* ---------- écran de jeu ---------- */
#game {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  padding-top: 44px;
  touch-action: none;
}
#game canvas {
  object-fit: contain;
  width: 100%;
  height: 100%;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- panneau d'aide ---------- */
#help[hidden] { display: none; }

#help {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(21, 27, 44, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#helpCard {
  background: var(--parchemin);
  color: #24211a;
  border: 2px solid var(--laiton);
  border-radius: 8px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.45;
}
#helpCard .cardTitle {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 5px;
  color: #8a6a10;
  text-align: center;
}
#helpCard .pitch {
  margin: 0 0 14px;
  text-align: center;
  font-size: 13.5px;
}
#helpCard h2 {
  margin: 0 0 10px;
  color: #6b5410;
  letter-spacing: 2px;
  font-size: 16px;
}
#helpCard table { border-collapse: collapse; width: 100%; }
#helpCard td { padding: 3px 8px 3px 0; vertical-align: top; }
#helpCard td:first-child { white-space: nowrap; font-weight: bold; }
#helpCard kbd {
  background: #e6dfc9;
  border: 1px solid #b8ac86;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 12px;
}
#helpCard .alt { opacity: .55; font-size: 12px; }
#about {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #b8ac86;
}
#about a { color: #6b5410; font-weight: bold; }
#helpCard .hint {
  border-left: 3px solid var(--lezard);
  padding-left: 10px;
  font-style: italic;
}
#helpClose {
  display: block;
  margin: 14px auto 0;
  padding: 8px 26px;
  border: none;
  border-radius: 6px;
  background: var(--lezard);
  color: #10240f;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

/* =====================================================================
 * CONTROLLER — pad tactile, adapté du CSS GB Studio / binjgb (MIT).
 * Affiché par lezard.js (display:block) uniquement sur écran tactile.
 * ===================================================================== */
#controller {
  display: none;
  position: fixed;
  bottom: 0;
  height: 210px;
  width: 100%;
  touch-action: none;
  opacity: 0.8;
  z-index: 10;
}
#controller_dpad {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 184px;
  height: 184px;
}
#controller_dpad:before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background: #3a4258;
  position: absolute;
  left: 68px;
  top: 68px;
}
#controller_left, #controller_right, #controller_up, #controller_down {
  position: absolute;
  width: 48px;
  height: 48px;
  background: radial-gradient(ellipse at center, #4a5470 0%, #3a4258 80%);
}
#controller_left  { left: 20px;  top: 68px;  border-radius: 4px 0 0 4px; }
#controller_right { left: 116px; top: 68px;  border-radius: 0 4px 4px 0; }
#controller_up    { left: 68px;  top: 20px;  border-radius: 4px 4px 0 0; }
#controller_down  { left: 68px;  top: 116px; border-radius: 0 0 4px 4px; }

#controller_a { position: absolute; bottom: 110px; right: 20px; }
#controller_b { position: absolute; bottom: 80px;  right: 100px; }

.roundBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 32px;
  color: #143312;
  width: 64px;
  height: 64px;
  border-radius: 64px;
  background: radial-gradient(ellipse at center, #7fd071 0%, #58a04e 100%);
  box-shadow: 0 4px 5px rgba(0, 0, 0, .3);
}
.capsuleBtn {
  font-weight: bold;
  font-size: 10px;
  color: #241d07;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  width: 64px;
  height: 32px;
  border-radius: 40px;
  background: radial-gradient(ellipse at center, #d8b53f 0%, #c9a227 100%);
  box-shadow: 0 4px 5px rgba(0, 0, 0, .3);
}
#controller_start  { position: absolute; bottom: 20px; right: 15px; }
#controller_select { position: absolute; bottom: 20px; right: 100px; }

.btnPressed { opacity: 0.5; }

/* petits écrans en portrait : pad resserré */
@media only screen and (max-device-width: 320px) and (orientation: portrait) {
  #controller_dpad  { left: -5px; bottom: -5px; }
  #controller_a     { right: 5px; bottom: 95px; }
  #controller_b     { right: 80px; }
  #controller_start { right: 5px; }
  #controller_select{ right: 80px; }
}

/* paysage : pad centré verticalement, plus discret */
@media only screen and (min-width: 300px) and (orientation: landscape) {
  #controller { bottom: 50%; transform: translateY(50%); opacity: 0.5; }
}

/* fenêtre trop basse pour le pad */
@media only screen and (max-width: 500px) and (max-height: 400px) {
  #controller { display: none; }
}