* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(1200px 600px at 50% -10%, #2a2a3a, #16161d);
  color: #e6e6ee;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 20px;
}

.card {
  width: 100%;
  max-width: 360px;
  background: #20202b;
  border: 1px solid #34344a;
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: 0 18px 50px #0008;
}

.card h1 {
  font-size: 22px;
  margin-bottom: 18px;
  text-align: center;
}

form { display: flex; flex-direction: column; gap: 14px; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #aab;
}

input {
  padding: 10px 12px;
  font-size: 15px;
  color: #f0f0f6;
  background: #15151d;
  border: 1px solid #3a3a52;
  border-radius: 8px;
  outline: none;
}
input:focus { border-color: #5b8cff; }

button {
  margin-top: 4px;
  padding: 11px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #4f6dff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { background: #607bff; }

.error {
  background: #3a1d22;
  border: 1px solid #743;
  color: #ffb4b4;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}

.remember {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #aab;
}
.remember input {
  width: auto;
  margin: 0;
  cursor: pointer;
  accent-color: #4f6dff;
}

.notice {
  background: #2a2438;
  border: 1px solid #4a3f6b;
  color: #cdbcff;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}

.alt {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: #99a;
}
.alt a { color: #8aa6ff; text-decoration: none; }
.alt a:hover { text-decoration: underline; }

.server-status {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #2c2c3a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: #9aa;
}
.server-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;
}
.server-status.online .dot { background: #53d769; box-shadow: 0 0 6px #53d769; }
.server-status.offline { color: #cc8888; }
.server-status.offline .dot { background: #d9534f; }

/* --- Choix du royaume (realms.php) ---------------------------------------- */
.realm-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 4px;
}
.realm {
  display: flex;
  align-items: center;
  justify-content: space-between; /* nom à gauche, statut à droite, même ligne */
  gap: 12px;
  padding: 13px 15px;
  border-radius: 10px;
  background: #15151d;
  border: 1px solid #34344a;
  color: #e6e6ee;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
a.realm:hover { background: #1b1b27; border-color: #5b8cff; }
a.realm:active { transform: scale(0.99); }
.realm.off { opacity: 0.5; cursor: not-allowed; }
.realm-id { display: flex; flex-direction: column; gap: 3px; }
.realm-name { font-weight: 600; font-size: 15px; }
.realm-chars { font-size: 12px; color: #8a8aa0; }
.realm-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #9aa;
  white-space: nowrap;
}
.realm-state .dot { width: 8px; height: 8px; border-radius: 50%; background: #666; }
.realm-state.online { color: #bcd2e8; }
.realm-state.online .dot { background: #53d769; box-shadow: 0 0 6px #53d769; }
.realm-state.offline { color: #cc8888; }
.realm-state.offline .dot { background: #d9534f; }
.realm-state.full { color: #ff9d2e; font-weight: 700; }
.realm-state.locked { color: #d8b24a; font-weight: 700; }

/* Verrou d'accès au jeu (admin) */
.locked-error {
  margin: 4px 0 14px; padding: 11px 13px; border-radius: 10px;
  background: #3a1414; border: 1px solid #9a3a55; color: #ffd0d8;
  font-size: 13px; font-weight: 600; line-height: 1.45;
}
.locked-error strong { color: #ffe14d; }
a.realm.locked-realm { border-color: #6a5a18; }
a.realm.locked-realm:hover { border-color: #d8b24a; background: #1f1c12; }
.locked-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 14px; padding: 10px 13px; border-radius: 10px;
  background: #3a2f10; border: 1px solid #6a5a18; color: #ffe9a0;
  font-size: 13px; font-weight: 600;
}
.locked-banner .lock, .realm-state .lock { font-size: 14px; }
.lock-form { margin: 6px 0 10px; }
.lock-btn {
  width: 100%; padding: 11px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: #fff;
}
.lock-btn.lock { background: #7a2c40; border: 1px solid #9a3a55; }
.lock-btn.lock:hover { background: #92344f; }
.lock-btn.unlock { background: #2c7a44; border: 1px solid #3a9a55; }
.lock-btn.unlock:hover { background: #34924f; }
.realm-state.full .dot { background: #ff9d2e; box-shadow: 0 0 6px #ff9d2e; }

/* --- Personnages (characters.php / create / delete) ----------------------- */
.card-wide { max-width: 460px; }

.char-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.char-row { display: flex; gap: 8px; align-items: stretch; }
.char-play {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  border-radius: 10px;
  background: #15151d;
  border: 1px solid #34344a;
  color: #e6e6ee;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.char-play:hover { background: #1b1b27; border-color: #5b8cff; }
.char-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.char-name { font-weight: 600; font-size: 15px; }
.char-meta { font-size: 11.5px; color: #9aa; }
.char-play .play { font-size: 12.5px; font-weight: 700; color: #7dd87d; white-space: nowrap; }
.char-del {
  display: flex; align-items: center; padding: 0 13px;
  border-radius: 10px; background: #231a1f; border: 1px solid #5a3540;
  color: #e7a3ad; text-decoration: none; font-size: 12.5px;
  transition: background .15s ease, border-color .15s ease;
}
.char-del:hover { background: #2e1f25; border-color: #8a4b58; }
.char-create {
  display: block; text-align: center; margin-top: 10px; padding: 11px;
  border-radius: 10px; border: 1px dashed #4a4a63; color: #9fb4ff;
  text-decoration: none; font-size: 14px;
}
.char-create:hover { border-color: #5b8cff; background: #181826; }
.char-empty { color: #99a; font-size: 13px; text-align: center; padding: 10px 0; }

/* --- Sélection de race (create) ------------------------------------------- */
.field-label { font-size: 13px; color: #aab; margin: 4px 0 -4px; }
.race-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.race-opt { display: block; cursor: pointer; }
.race-opt input { position: absolute; opacity: 0; pointer-events: none; }
.race-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px 12px; height: 100%;
  border-radius: 10px; background: #15151d; border: 1px solid #34344a;
  transition: border-color .15s ease, background .15s ease;
}
.race-opt:hover .race-card { border-color: #45557e; }
.race-opt input:checked + .race-card { border-color: #5b8cff; background: #1a1f30; }
.race-head { display: flex; align-items: center; gap: 10px; }
.race-sprite {
  width: 48px; height: 72px; flex: none;
  background-repeat: no-repeat;
  background-size: 144px 288px;   /* feuille 96x192 mise à l'échelle 1.5 */
  background-position: -48px 0;   /* frame centrale (idle) de la ligne "down" */
  image-rendering: pixelated;
}
.race-name { display: block; font-weight: 600; font-size: 14px; }
.race-desc { display: block; font-size: 11.5px; color: #99a; }
.race-stats { display: flex; flex-direction: column; gap: 4px; }
.stat { display: grid; grid-template-columns: 64px 1fr 16px; align-items: center; gap: 6px; font-size: 10.5px; color: #aab; }
.stat-name { white-space: nowrap; }
.stat-bar { height: 6px; background: #2a2a3a; border-radius: 3px; overflow: hidden; }
.stat-bar span { display: block; height: 100%; background: linear-gradient(90deg, #4f6dff, #6f8bff); }
.stat-val { text-align: right; color: #cdd; }

.confirm-text { font-size: 13.5px; line-height: 1.5; color: #d8d8e2; margin-bottom: 14px; }
.btn-danger { background: #b5384a; }
.btn-danger:hover { background: #c8404f; }

/* --- Infobulles de statistiques ------------------------------------------- */
.tip { position: relative; cursor: help; }
.char-meta .tip { text-decoration: underline dotted #667; text-underline-offset: 2px; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 210px;
  white-space: normal;
  text-align: left;
  background: #0e0e16;
  color: #e6e6ee;
  border: 1px solid #3a3a52;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: 0 8px 24px #0009;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  z-index: 50;
  pointer-events: none;
}
.tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #3a3a52;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  z-index: 50;
  pointer-events: none;
}
.tip:hover::after, .tip:hover::before { opacity: 1; visibility: visible; }

/* --- Anti-zoom mobile (cohérent avec la page de jeu) -----------------------
   touch-action: manipulation supprime le double-tap zoom ; text-size-adjust
   empêche le redimensionnement automatique du texte. Le pincement (iOS) est
   bloqué par client/js/nozoom.js + la balise viewport user-scalable=no. */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --- Appui long iOS : pas de loupe ni de sélection de texte ----------------
   Au toucher (appui long), iOS/WebKit affiche une loupe de sélection sur la zone
   survolée. On la supprime (callout + sélection désactivés) tout en gardant les
   champs de saisie sélectionnables pour écrire. Limité au tactile (pointer:coarse)
   pour ne pas gêner la sélection à la souris sur ordinateur. */
@media (pointer: coarse) {
  body, body * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }
}