/* Coquille web de PokéPath : connexion, compte, adaptations mobile.
   Reprend la palette et le style « pixel » du jeu. */

@font-face {
  font-family: 'PressStart2P';
  src: url('./fonts/PressStart2P.ttf') format('truetype');
  font-display: swap;
}

:root {
  --pp-bg: #2a2b2d;
  --pp-panel: #3d3d3f;
  --pp-panel-dark: #242426;
  --pp-red: #a33635;
  --pp-green: #70ac4c;
  --pp-blue: #2d70e3;
  --pp-orange: #cd902f;
  --pp-danger: #c33e3e;
  --pp-text: #d4d4d4;
  --pp-muted: #9a9a96;
  --pp-yellow: #eae174;
  color-scheme: dark;
}

html, body {
  margin: 0;
  height: 100%;
  background: #111;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'PressStart2P', monospace;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

body:not(.pp-playing) #view-port { display: none; }

/* ---------- Écrans plein cadre (connexion, chargement, « toucher pour jouer ») ---------- */

#pp-shell {
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  color: var(--pp-text);
  background:
    linear-gradient(rgba(17, 17, 17, 0.72), rgba(17, 17, 17, 0.88)),
    url('./img/bg-map.png') center / cover;
  image-rendering: pixelated;
}

#pp-shell:empty { display: none; }

.pp-stack {
  width: 100%;
  max-width: 400px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pp-logo {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.6));
}

.pp-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  color: var(--pp-text);
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 1px;
}

.pp-title span { color: var(--pp-red); }

/* Panneau façon fenêtre du jeu */
.pp-card {
  width: 100%;
  box-sizing: border-box;
  background: var(--pp-panel);
  border: 1px solid #000;
  box-shadow: inset 0 2px 0 #5a5a5c, inset 0 -2px 0 #2a2a2b, 3px 3px 0 rgba(0, 0, 0, 0.6);
}

.pp-card-header {
  background: var(--pp-red);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  text-shadow: 1px 1px 0 #000;
  border-bottom: 1px solid #000;
}

.pp-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pp-text {
  margin: 0;
  font-size: 10px;
  line-height: 1.8;
  color: var(--pp-text);
}

.pp-text.pp-muted { color: var(--pp-muted); }

.pp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-field label {
  font-size: 9px;
  color: var(--pp-muted);
}

.pp-input {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: 'PressStart2P', monospace;
  font-size: 13px;
  color: var(--pp-text);
  background: var(--pp-panel-dark);
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4);
  -webkit-user-select: text;
  user-select: text;
}

.pp-input:focus-visible { border-color: var(--pp-yellow); }
.pp-input::placeholder { color: #6b6b68; }

.pp-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  font-family: 'PressStart2P', monospace;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  color: var(--pp-text);
  text-shadow: 1px 1px 0 #000;
  background: var(--pp-green);
  border-radius: 4px;
  outline: 1px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.2), inset -2px -2px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: filter 0.15s;
}

.pp-btn:hover { filter: brightness(1.1); }
.pp-btn:active { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4); transform: translateY(1px); }
.pp-btn:focus-visible { outline: 2px solid var(--pp-yellow); }
.pp-btn[disabled] { filter: grayscale(1) opacity(0.6); pointer-events: none; }
.pp-btn.pp-blue { background: var(--pp-blue); }
.pp-btn.pp-orange { background: var(--pp-orange); }
.pp-btn.pp-red { background: var(--pp-danger); }
.pp-btn.pp-grey { background: #5a5a5c; }
.pp-btn.pp-small { min-height: 36px; padding: 8px 10px; font-size: 9px; }
.pp-btn.pp-wide { width: 100%; }

.pp-msg {
  margin: 0;
  font-size: 9px;
  line-height: 1.8;
  min-height: 0;
}
.pp-msg:empty { display: none; }
.pp-msg.pp-error { color: #ff7a6e; }
.pp-msg.pp-ok { color: var(--pp-green); }

.pp-hint {
  font-size: 8px;
  line-height: 1.8;
  color: #c4c4bf;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  margin: 0;
}

.pp-spinner {
  width: 240px;
  max-width: 80vw;
  height: 16px;
  border: 1px solid #000;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}
.pp-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--pp-red);
  animation: pp-slide 1.1s ease-in-out infinite;
}
@keyframes pp-slide { from { left: -40%; } to { left: 100%; } }

.pp-tap {
  animation: pp-blink 1.2s steps(2, start) infinite;
}
@keyframes pp-blink { to { visibility: hidden; } }

@media (max-height: 480px) {
  .pp-logo { width: 56px; height: 56px; }
  .pp-title { font-size: 14px; }
  .pp-card-body { padding: 12px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-spinner::after, .pp-tap { animation: none; }
}

/* ---------- Connexion : case « Rester connecté », séparateur ---------- */

.pp-checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 9px;
  line-height: 1.6;
  color: var(--pp-text);
  cursor: pointer;
}

.pp-check {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--pp-green);
}

.pp-or {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 8px;
  color: var(--pp-muted);
}
.pp-or::before, .pp-or::after { content: ''; flex: 1; height: 2px; background: #2a2a2b; }

/* ---------- Écran « Tes parties » ---------- */

.pp-games {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-games .pp-empty {
  padding: 14px 8px;
  font-size: 9px;
  line-height: 1.8;
  text-align: center;
  color: var(--pp-muted);
}

.pp-game {
  display: flex;
  align-items: stretch;
  background: var(--pp-panel-dark);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pp-game-play {
  all: unset;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  cursor: pointer;
  font-family: 'PressStart2P', monospace;
  border-left: 4px solid var(--pp-red);
}
.pp-game-play:hover { background: rgba(255, 255, 255, 0.04); }
.pp-game-play:active { background: rgba(255, 255, 255, 0.08); }
.pp-game-play:focus-visible { outline: 2px solid var(--pp-yellow); outline-offset: -2px; }

.pp-game-name {
  font-size: 12px;
  line-height: 1.4;
  color: var(--pp-yellow);
  text-shadow: 1px 1px 0 #000;
  overflow-wrap: anywhere;
}

.pp-game-info, .pp-game-date {
  font-size: 8px;
  line-height: 1.6;
  color: var(--pp-text);
}
.pp-game-date { color: var(--pp-muted); }

.pp-game-tools {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #000;
}

.pp-icon-btn {
  all: unset;
  flex: 1;
  min-width: 44px;
  min-height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-family: system-ui, sans-serif; /* ✎ et ✕ n'existent pas dans la police pixel */
  font-size: 18px;
  color: var(--pp-muted);
}
.pp-icon-btn + .pp-icon-btn { border-top: 1px solid #000; }
.pp-icon-btn:hover { color: var(--pp-text); background: rgba(255, 255, 255, 0.05); }
.pp-icon-btn.pp-danger:hover { color: #ff7a6e; }
.pp-icon-btn:focus-visible { outline: 2px solid var(--pp-yellow); outline-offset: -2px; }

/* ---------- Fenêtre « Compte » (par-dessus le jeu, lisible sur téléphone) ---------- */

.pp-modal {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.7);
  color: var(--pp-text);
  font-family: 'PressStart2P', monospace;
}

.pp-modal .pp-card {
  max-width: 560px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.pp-modal .pp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: none;
}

.pp-close {
  all: unset;
  cursor: pointer;
  min-width: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-size: 14px;
}
.pp-close:focus-visible { outline: 2px solid var(--pp-yellow); }

.pp-modal .pp-card-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pp-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 2px solid #2a2a2b;
}
.pp-section:last-child { border-bottom: none; padding-bottom: 0; }

.pp-section h3 {
  margin: 0;
  font-size: 11px;
  font-weight: normal;
  color: var(--pp-yellow);
  text-shadow: 1px 1px 0 #000;
}

.pp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pp-row > .pp-btn { flex: 1 1 140px; }

.pp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--pp-panel-dark);
  border: 1px solid #000;
  font-size: 9px;
  line-height: 1.8;
}

.pp-list .pp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-list .pp-empty { color: var(--pp-muted); justify-content: center; }

.pp-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 7px;
  background: var(--pp-red);
  border: 1px solid #000;
  vertical-align: middle;
}

.pp-linkbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #1d2a1a;
  border: 1px solid #000;
}

.pp-linkbox .pp-input { font-size: 9px; min-height: 36px; }

.pp-confirm .pp-card { max-width: 420px; }

/* ---------- Bloc « Compte » ajouté dans le Menu du jeu (même style que le jeu) ---------- */

.menu-scene-section.pp-menu-account {
  order: -1;
  height: 150px;
}

.pp-menu-account .pp-menu-line {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 44px;
  font-size: 11px;
  line-height: 18px;
  color: var(--pp-text);
  text-shadow: 1px 1px 0 #000;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-menu-account .pp-menu-line b { color: var(--pp-yellow); font-weight: normal; }
.pp-menu-account .pp-menu-sync { top: 66px; font-size: 9px; color: var(--pp-muted); }

.pp-menu-account .pp-menu-buttons {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  display: flex;
  gap: 10px;
}

.pp-menu-btn {
  flex: 1;
  height: 30px;
  line-height: 30px;
  color: var(--pp-text);
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  outline: 1px solid #000;
  font-size: 10px;
  text-transform: uppercase;
  background: #2d70e3;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.2), inset -2px -2px 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}
.pp-menu-btn:hover { filter: brightness(1.1); }
.pp-menu-btn:active { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4); transform: translateY(1px); }
.pp-menu-btn.pp-green { background: #70ac4c; }
.pp-menu-btn.pp-orange { background: #cd902f; }
.pp-menu-btn.pp-red { background: #c33e3e; }

/* ---------- Indicateur de synchronisation (visible seulement en cas de souci) ---------- */

#pp-sync-badge {
  position: fixed;
  top: max(6px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 25000;
  padding: 6px 10px;
  font-family: 'PressStart2P', monospace;
  font-size: 8px;
  line-height: 1.6;
  color: #000;
  background: var(--pp-yellow);
  border: 1px solid #000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
#pp-sync-badge[hidden] { display: none; }

/* ---------- Mobile ---------- */

/* Les zones qu'on fait glisser au doigt ne doivent pas faire défiler la page. */
#screen canvas,
.ui-pokemon-sprite {
  touch-action: none;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- Mode tactile (touch-layout.js) ---------- */

/* Le jeu bloque le défilement sur les cases de la Boîte et du Sac (pour son glisser-déposer) :
   on autorise le défilement vertical, le glisser reste possible à l'horizontale. */
body.pp-touch .box-scene-unit,
body.pp-touch .inventory-scene-item-slot {
  touch-action: pan-y !important;
}

body.pp-touch #view-port {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#pp-toolbar {
  display: none;
  position: fixed;
  z-index: 15000;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(56px + env(safe-area-inset-left));
  padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: #1b1b1d;
  border-right: 2px solid #000;
  box-shadow: inset -2px 0 0 #2f2f31;
}

body.pp-touch.pp-playing #pp-toolbar:not(:empty) { display: flex; }

.pp-tool {
  all: unset;
  flex: 0 1 44px;
  min-height: 30px;
  max-height: 48px;
  width: 44px;
  border-radius: 6px;
  cursor: pointer;
  background-color: #3d3d3f;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  image-rendering: pixelated;
  outline: 1px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.12), inset -2px -2px 0 rgba(0, 0, 0, 0.3);
  -webkit-tap-highlight-color: transparent;
}
.pp-tool:active { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.45); transform: translateY(1px); }
.pp-tool:focus-visible { outline: 2px solid var(--pp-yellow); }
.pp-tool.is-selected { background-color: var(--pp-red); }
.pp-tool.is-locked { opacity: 0.35; }

#pp-zoom-close {
  all: unset;
  position: fixed;
  z-index: 15001;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: system-ui, sans-serif;
  font-size: 20px;
  color: var(--pp-text);
  background: var(--pp-red);
  outline: 2px solid #000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6), inset 2px 2px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
#pp-zoom-close[hidden] { display: none; }
#pp-zoom-close:active { transform: translateY(1px); }
body:not(.pp-touch) #pp-zoom-close { display: none; }

/* Téléphone tenu en portrait : le jeu (1238×674) serait minuscule. */
#pp-rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40000;
  background: #111;
  color: var(--pp-text);
  font-family: 'PressStart2P', monospace;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  box-sizing: border-box;
}

#pp-rotate .pp-phone {
  width: 44px;
  height: 72px;
  border: 4px solid var(--pp-text);
  border-radius: 8px;
  animation: pp-rotate 2s ease-in-out infinite;
}
@keyframes pp-rotate { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

#pp-rotate p { margin: 0; font-size: 11px; line-height: 2; }

@media (orientation: portrait) and (max-width: 600px) {
  body.pp-playing #pp-rotate { display: flex; }
}