/* ============================================================
   DIAMOND CAVE — styles spécifiques au jeu
   (charte commune dans games.css)
   ============================================================ */

/* ===========================================================
   1. TOKENS DIAMOND CAVE
   =========================================================== */

:root {
  --bd-frame: #4a2818;
  --bd-frame-light: #6b3a22;
  --bd-frame-dark: #2a1408;
  --bd-screen-bg: #000000;
  --bd-screen-text: #ffcc00;      /* jaune ambre Amstrad */
  --bd-screen-text-dim: #a07810;
  --bd-screen-gem: #5dcaff;
  --bd-screen-accent: #ff5566;
}

[data-theme="dark"] {
  /* La console reste rétro en dark mode, simplement légèrement
     assombrie pour cohérence visuelle avec l'enveloppe bleu nuit. */
  --bd-frame: #3a2010;
  --bd-frame-light: #5a3220;
  --bd-frame-dark: #1a0d05;
}

/* ===========================================================
   2. CONSOLE rétro Amstrad CPC
   =========================================================== */

.bd-console {
  background: linear-gradient(180deg, var(--bd-frame-light), var(--bd-frame));
  padding: 16px 18px 22px;
  border-radius: 14px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4),
    0 12px 32px rgba(0, 0, 0, 0.35),
    0 0 0 2px var(--bd-frame-dark);
  position: relative;
  max-width: 100%;
}

[data-theme="dark"] .bd-console {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.06),
    inset 0 -3px 0 rgba(0, 0, 0, 0.5),
    0 12px 32px rgba(0, 0, 0, 0.6),
    0 0 0 2px var(--bd-frame-dark);
}

/* Vis aux deux coins supérieurs */
.bd-console::before,
.bd-console::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--bd-frame-dark);
  border-radius: 50%;
  top: 8px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
.bd-console::before { left: 10px; }
.bd-console::after  { right: 10px; }

.bd-console-brand {
  text-align: center;
  font-family: 'Press Start 2P', var(--font-mono);
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--bd-screen-text-dim);
  margin-bottom: 8px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* HUD interne, sous la marque, au look cathodique */
.bd-screen-hud {
  background: var(--bd-screen-bg);
  color: var(--bd-screen-text);
  font-family: 'Press Start 2P', var(--font-mono);
  font-size: 10px;
  line-height: 1;
  padding: 8px 10px;
  border: 2px solid #111;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  letter-spacing: 1px;
  text-shadow:
    0 0 4px rgba(255, 204, 0, 0.55),
    0 0 2px rgba(255, 204, 0, 0.35);
  flex-wrap: wrap;
}

.bd-screen-hud .gem {
  color: var(--bd-screen-gem);
  text-shadow: 0 0 6px rgba(93, 202, 255, 0.7);
  margin-right: 2px;
}

/* Cadre noir autour du canvas (continuité avec le HUD interne) */
.bd-screen-frame {
  position: relative;
  background: var(--bd-screen-bg);
  border: 2px solid #111;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.85);
  line-height: 0;
}

/* Le canvas dans le cadre de la console : on annule la bordure
   ajoutée par games.css (qui s'applique à <canvas> globalement),
   parce que notre cadre noir tient déjà ce rôle. La taille affichée
   est gérée par JS (adjustCanvasScale) pour préserver le pixel art
   avec un facteur d'échelle multiple entier sur grand écran. */
.bd-console canvas {
  border: none;
  border-radius: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  display: block;
  /* Annuler max-width/max-height: 100% du standard pour que le canvas
     puisse être agrandi par JS au-delà de la taille du parent. La console
     elle-même s'adapte à la taille du canvas via display flex. */
  max-width: none;
  max-height: none;
}

/* ===========================================================
   3. OVERLAYS internes au canvas
   games.css définit déjà .overlay. On remplace son fond beige
   par du noir cathodique, et on adopte le look rétro pour les
   titres.
   =========================================================== */

.bd-screen-frame .overlay {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
}

[data-theme="dark"] .bd-screen-frame .overlay {
  background: rgba(0, 0, 0, 0.82);
}

.bd-screen-frame .overlay-title {
  font-family: 'Press Start 2P', var(--font-display);
  color: var(--bd-screen-text);
  text-shadow:
    2px 2px 0 var(--bd-screen-accent),
    0 0 14px rgba(255, 204, 0, 0.45);
  letter-spacing: 0.04em;
}

.bd-screen-frame .overlay-text {
  color: var(--bd-screen-text-dim);
}

/* ===========================================================
   4. CONTRÔLES sous la console (Règles + Nouvelle partie)
   =========================================================== */

.game-controls {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ===========================================================
   5. FLASH visuel quand le joueur meurt
   =========================================================== */

.bd-screen-frame.flash-death::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 60, 60, 0.35);
  pointer-events: none;
  animation: bd-flash 0.6s ease-out;
}

@keyframes bd-flash {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ===========================================================
   6. RESPONSIVE
   Sur mobile, la console rétrécit. Le HUD standard et le D-pad
   sont déjà gérés par games.css.
   =========================================================== */

@media (max-width: 700px) {
  .bd-console {
    padding: 12px 12px 16px;
  }
  .bd-console-brand {
    font-size: 7px;
    letter-spacing: 2px;
  }
  .bd-screen-hud {
    font-size: 9px;
    padding: 6px 8px;
    gap: 8px;
  }
  /* Note : on ne force PAS width:100% sur le canvas. Sur cave large en
     portrait, la compression rendrait le pixel art illisible — on bloque
     le portrait via .rotate-overlay (cf. section 8). Sur cave étroite
     (intermissions), le canvas natif tient sans souci. */
}

/* ===========================================================
   7. SÉLECTEUR DE CAVE sur l'écran d'accueil
   =========================================================== */

.cave-picker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) auto var(--space-sm);
  justify-content: center;
}

.cave-picker label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted, var(--color-text));
  opacity: 0.7;
}

.cave-select {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 10px;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border, currentColor);
  border-radius: 4px;
  cursor: pointer;
  min-width: 220px;
}

.cave-select:focus {
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 2px;
}

[data-theme="dark"] .cave-select option {
  background: #0d1b2a;
  color: #e0e1dd;
}

/* ===========================================================
   8. BLOCAGE DU PORTRAIT POUR CAVES LARGES
   Diamond Cave 40×22 nécessite la vue d'ensemble pour anticiper les
   éboulements. En portrait mobile, soit on compresse jusqu'à
   l'illisibilité, soit on déborde et on ne voit pas la cave. Aucune des
   deux n'est jouable. On bloque proprement et on demande la rotation.

   L'overlay est masqué par défaut. Il apparaît uniquement quand :
   - appareil tactile (hover: none, pointer: coarse)
   - orientation portrait
   - cave large (.wide-cave posé par JS sur <body>)

   Les caves étroites (intermissions ~20 colonnes) tiennent en portrait,
   elles ne déclenchent pas l'overlay.
   =========================================================== */

.rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  text-align: center;
}

.rotate-overlay-icon {
  font-size: 64px;
  line-height: 1;
  color: var(--color-text);
  animation: rotate-hint 2s ease-in-out infinite;
}

@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}

.rotate-overlay-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

.rotate-overlay-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text);
  opacity: 0.75;
  max-width: 320px;
  line-height: 1.5;
}

/* L'overlay n'apparaît que :
   - sur appareil tactile en portrait,
   - sur l'écran de jeu (body.game-page),
   - quand la cave est large (body.wide-cave).
   L'accueil et les règles, jouables en portrait, ne sont pas concernés. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  body.game-page.wide-cave .rotate-overlay {
    display: flex;
  }
}

/* ===========================================================
   9. ÉLARGIR .app SUR L'ÉCRAN DE JEU
   Le standard limite .app à 960px, mais notre canvas en mode ×2
   peut faire jusqu'à 1280×704px (cave 40×22 en pixel art doublé).
   Sur grand écran on retire donc cette contrainte pour laisser
   le canvas respirer. L'enveloppe éditoriale (header) reste
   centrée car les autres éléments ont leurs propres contraintes.
   =========================================================== */

body.game-page .app {
  max-width: 1600px;
}

/* Sur petit écran, on garde le comportement par défaut */
@media (max-width: 700px) {
  body.game-page .app {
    max-width: none;
  }
}

/* ===========================================================
   10. MOBILE LANDSCAPE : optimisation espace vertical
   En landscape sur appareil tactile, la hauteur est limitée.
   On cache les éléments redondants (HUD du standard, déjà
   répliqué dans la console rétro) pour donner toute la place
   au canvas.

   Critère : (hover: none) and (pointer: coarse) and (orientation:
   landscape). On ne dépend plus de max-height qui excluait
   certains appareils.
   =========================================================== */

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  /* Cacher le HUD au-dessus (l'info est aussi dans la console) */
  body.game-page .hud {
    display: none;
  }
  /* Réduire le header */
  body.game-page .header {
    padding: 4px var(--space-md);
  }
  body.game-page .header h1,
  body.game-page .header .game-title {
    font-size: 14px;
  }
  /* Cacher les boutons sous la console (clavier physique ou retour
     accueil restent disponibles via les touches du device) */
  body.game-page .game-controls {
    display: none;
  }
  /* Compresser un peu la console */
  body.game-page .bd-console {
    padding: 6px 10px 10px;
  }
  body.game-page .bd-console-brand {
    display: none;
  }
  /* Cacher aussi le HUD interne pour économiser de la hauteur */
  body.game-page .bd-screen-hud {
    display: none;
  }
}

/* ===========================================================
   11. ZONES TACTILES INVISIBLES
   Sur tactile, le D-pad disparaît au profit de 4 zones invisibles
   superposées au jeu. La forme des zones évite les angles morts :
   - haut/bas : bandes centrées (50% de large, 34% de haut)
   - gauche/droite : grandes bandes verticales (38% de large, 60% de haut)
   Les overlays canvas (boutons cave suivante, etc.) restent au-dessus
   grâce à un z-index supérieur défini dans games.css.
   =========================================================== */

.touch-zones {
  display: none;  /* Masqué sur desktop par défaut */
}

@media (hover: none) and (pointer: coarse) {
  body.game-page .game-screen {
    position: relative;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  body.game-page .touch-zones {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
    pointer-events: none;  /* le conteneur ne capture rien */
  }

  body.game-page .touch-zone {
    position: absolute;
    display: block;
    border: 0;
    background: transparent;
    pointer-events: auto;  /* mais les zones individuelles capturent */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  body.game-page .touch-zone-up {
    top: 0;
    left: 25%;
    width: 50%;
    height: 34%;
  }

  body.game-page .touch-zone-down {
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 34%;
  }

  body.game-page .touch-zone-left {
    top: 20%;
    left: 0;
    width: 38%;
    height: 60%;
  }

  body.game-page .touch-zone-right {
    top: 20%;
    right: 0;
    width: 38%;
    height: 60%;
  }
}

/* ===========================================================
   12. CORRECTIF — éviter le conflit avec games.css
   La console rétro Amstrad + le HUD interne suffisent, et le
   .canvas-wrap générique en flex:1 + center pousse mal l'ensemble.
   On neutralise :
   - HUD standard masqué (redondant avec le HUD rétro)
   - .canvas-wrap libéré du flex:1 et du centrage
   - .game-screen avec scroll si nécessaire
   =========================================================== */

body.game-page .hud {
  display: none;
}

body.game-page .game-screen {
  flex: 1;
  min-height: 0;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  padding-top: 16px;
  overflow: auto;
}

body.game-page .canvas-wrap {
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  overflow: visible;
}

body.game-page .game-controls {
  flex: 0 0 auto;
  margin-top: 8px;
}