/* Ailfe Master — UI portrait mobile EXCLUSIF. Sur ordi : cadre 440px centré (façon téléphone) +
   létterbox sombre. Sur mobile : plein écran, AUCUN scroll de page (#app fixe à 100dvh, overflow hidden). */
/* Police du pack (achetée, OFL) : LT Avocado pour les titres ronds */
@font-face { font-family: "LT Avocado"; src: url("/master/assets/fonts/LTAvocado-Bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "LT Avocado"; src: url("/master/assets/fonts/LTAvocado-Regular.ttf") format("truetype"); font-weight: 400 600; font-display: swap; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: "LT Avocado", "Afacad Flux", "Baloo 2", "Segoe UI", system-ui, sans-serif; /* LT Avocado partout */
  background: #14182a; /* létterbox autour du téléphone sur ordi */
  user-select: none; -webkit-user-select: none;
  color: #2a2438;
  font-weight: 700; /* tout le texte du jeu en gras par défaut */
}
/* gros titres ronds → LT Avocado (police du pack). NB : .pg-title/.bank-title (Mine/Coffre) restent en Afacad Flux pour être identiques. */
.fi-banner, .create-title, .login-box h2, .offline-box h2,
.forge-btn .fb-t, .pet-summon .ps-t, .comp-banner, .dp-box .pg-title, .nav-b .nb-t,
.mine-claim .mc-t, .mine-up .mu-t, .bank-btn, .pet-eq, .pet-sell { font-family: "LT Avocado", "Baloo 2", sans-serif; }
:root { --ink: #2c2438; --line: #2c2438; }

/* CADRE TÉLÉPHONE */
#app {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 440px; /* top:0 + bottom:0 → remplit EXACTEMENT le viewport visible (pas de bande vide haut/bas sur mobile) */
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, #aee6ff 0%, #c8f0a0 38%, #cdeb8f 100%);
  box-shadow: 0 0 0 1px #0006, 0 12px 60px #0009;
}

/* ---------- BARRE DU HAUT ---------- */
#topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 10px calc(env(safe-area-inset-top) + 0px); padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } /* marge droite : le diamant n'est plus rogné par le bord/coin arrondi */
.me { display: flex; align-items: center; gap: 8px; background: #2c2438; border: 3px solid #1a1626;
  border-radius: 14px; padding: 4px 12px 4px 4px; box-shadow: 0 3px 0 #0005; flex: 1 1 auto; min-width: 0; }
.ava { width: 36px; height: 36px; border-radius: 10px; background: #f0d9a8; display: grid; place-items: center; font-size: 22px; border: 2px solid #1a1626; flex: 0 0 auto; }
.me-txt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.me-name { color: #ffe7a8; font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-pow { color: #ff9; font-weight: 800; font-size: 13px; }
.cur { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; width: 132px; }
/* largeur FIXE : le HUD ne s'élargit plus quand l'or/les gemmes grandissent (contenu centré, débordement masqué) */
.cur-chip { box-sizing: border-box; width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden;
  padding: 3px 12px; border-radius: 20px; border: 3px solid #1a1626; box-shadow: 0 3px 0 #0004; }
.cur-chip.gold { background: #ffd34d; color: #6b4a00; }
.cur-chip.gem { background: #5ad6ff; color: #064a63; }

/* ---------- ZONE DE COMBAT ---------- */
#battle { flex: 1 1 auto; position: relative; display: flex; flex-direction: column; min-height: 0; padding: 4px 10px 8px; }
.stage-head { text-align: center; }
.age { font-size: 12px; font-weight: 800; color: #3c6e1e; background: #ffffff8c; padding: 1px 10px; border-radius: 20px; }
.stage-head h1 { margin: 4px 0 6px; font-size: 22px; color: #2c2438; text-shadow: 0 2px 0 #fff6; }
.pbar { height: 9px; background: #ffffff7a; border: 2px solid #2c2438; border-radius: 20px; overflow: hidden; max-width: 230px; margin: 0 auto; }
.pbar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #ffb43c, #ff7a3c); transition: width .3s; }
.field { flex: 1 1 auto; position: relative; margin-top: 8px; border-radius: 18px;
  --env: /master/assets/env;
  background:
    radial-gradient(120% 60% at 50% 120%, #b98a4d 0 38%, transparent 39%),
    linear-gradient(180deg, #8fd35a, #7ec850);
  border: 3px solid #4f7a2a; overflow: hidden; min-height: 120px;
  box-shadow: inset 0 6px 0 #ffffff20, inset 0 -10px 0 #00000018; }
/* Couche de décor (props posés au sol, ancrés par leur base, centrés horizontalement) */
.field-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.field-scene img { position: absolute; transform: translateX(-50%); width: auto; image-rendering: auto;
  filter: drop-shadow(0 2px 2px #00000030); }
.hero, .foes { position: absolute; bottom: 22%; font-size: 38px; filter: drop-shadow(0 4px 2px #0004); }
.hero { left: 14%; animation: bob 1.1s ease-in-out infinite; }
.foes { right: 8%; display: flex; gap: 2px; flex-wrap: wrap; width: 40%; justify-content: flex-end; font-size: 26px; }
.vs { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); font-size: 20px; opacity: .55; }
@keyframes bob { 50% { transform: translateY(-5px); } }
#gainpop { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; }
.gain { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 900; color: #2c7a1e;
  text-shadow: 0 2px 0 #fff, 0 0 6px #fff; font-size: 18px; animation: floatup 1s ease-out forwards; white-space: nowrap; }
@keyframes floatup { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, -40px); } }
.rate { text-align: center; font-weight: 800; font-size: 13px; color: #2c4a14; margin-top: 6px; }

/* ---------- ZONE DE FORGE ---------- */
/* Conteneur du bas = même style que la page Sac d'Ailfe (fond dégradé sombre + bordure dégradée bleue). */
#forge { flex: 0 0 auto; padding: 12px 10px 14px; border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #0d1836, #04060f) padding-box,
    linear-gradient(135deg, #1b3470, #5fb6ff 48%, #0c1838) border-box;
  border: 3px solid transparent; border-bottom: 0;
  box-shadow: inset 1px 1px 0 rgba(150,185,255,.22), 0 -8px 28px #000a; } /* pas de safe-area : #bottomnav est au bas */
/* Bandeau de forge : niveau + barre d'XP + bouton infos */
.forge-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.forge-lvl { color: #ffe7a8; font-weight: 800; font-size: 13px; white-space: nowrap; }
.forge-lvl b { color: #ffd34d; }
.forge-info { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #5fb6ff;
  background: #11244d; color: #bfe0ff; font-size: 14px; font-weight: 900; cursor: pointer; line-height: 1; }
.forge-info:active { transform: translateY(1px); }
/* Jauge XP de forge = MÊME look que la jauge XP du joueur (sombre + remplissage bleu), SANS radius */
/* même design que la JAUGE de la mine (track marron + remplissage orange) mais SANS radius */
.forge-xpbar { flex: 1 1 120px; position: relative; height: 16px; border-radius: 0; overflow: hidden; min-width: 110px;
  background: linear-gradient(180deg, #4a3526, #38271b); box-shadow: inset 0 2px 3px #0008, 0 0 0 2px #2a1c12; border: 0; }
.forge-xpbar > i { display: block; height: 100%; width: 0; border-radius: 0;
  background: linear-gradient(180deg, #b98a52, #855b30); box-shadow: inset 0 2px 0 #ffffff33; transition: width .25s; } /* jauge MARRON */
.forge-xptxt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff3df; text-shadow: 0 1px 2px #000c; } /* x/x XP en clair */
.hammer-next { text-align: center; font-size: 11px; font-weight: 700; color: #bfe0ff; margin-top: 8px; opacity: .9; }
.gear { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
/* SLOTS = rendu LayerLab : tuile arrondie colorée par la RARETÉ + icône d'objet + losange de TYPE en haut à gauche. */
.slot { position: relative; aspect-ratio: 1/1; border-radius: 22%;
  background: #aeb7c4; border: 3px solid #2c2438; /* vide = gris neutre */
  box-shadow: inset 0 5px 0 #ffffff33, inset 0 -7px 0 #00000022, 0 3px 0 #00000033;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .08s; overflow: visible; }
.slot:active { transform: scale(.94); }
.slot.sel { outline: 0; } /* pas de sélection visible (slots = tests) */
.slot .ic { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 1px #0006); z-index: 1; }
.slot .lv { position: absolute; bottom: 2px; font-size: 10px; font-weight: 800; color: #fff; background: #00000055; border-radius: 7px; padding: 0 5px; z-index: 3; }
/* Arme secondaire incompatible : cadenas par-dessus le slot */
.slot .lock { display: none; }
.slot.locked .lock { display: grid; place-items: center; position: absolute; inset: 0; font-size: 22px; background: #000000a8; border-radius: inherit; z-index: 4; }
.slot.locked .ic-img { opacity: .3; filter: grayscale(1); }
.slot.afford::after { content: '⬆'; position: absolute; bottom: -5px; right: -5px; background: #4caf50; color: #fff;
  border: 2px solid #1c2a14; border-radius: 50%; width: 17px; height: 17px; font-size: 10px; display: grid; place-items: center; z-index: 4; }
/* Losange de TYPE (haut-gauche) : carré pivoté 45° + icône du type redressée. */
.slot .type-badge { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; transform: rotate(45deg);
  background: #2c2438; border: 2px solid #ffffffd0; border-radius: 4px; z-index: 5; display: grid; place-items: center; box-shadow: 0 1px 2px #0008; }
.slot .type-badge > span { transform: rotate(-45deg); font-size: 9px; line-height: 1; }
/* Pastille de SCORE (haut-droite, façon Sac d'Ailfe). */
.slot .iv-score { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 15px; padding: 0 3px; border-radius: 6px;
  font-size: 10px; font-weight: 800; line-height: 15px; text-align: center; color: #fff; z-index: 4;
  box-shadow: 0 1px 3px #0009, inset 0 1px 0 #ffffff30; pointer-events: none; font-variant-numeric: tabular-nums; }
.iv-score-good { background: linear-gradient(180deg,#37b964,#239048); }
.iv-score-mid  { background: linear-gradient(180deg,#e0a23a,#b9791f); }
.iv-score-bad  { background: linear-gradient(180deg,#d2524d,#a5302c); }

/* Objet équipé : bordure dégradée qui défile (comme le Sac). */
.slot.has { border-color: transparent;
  background: linear-gradient(180deg, #131f3e, #0a1224) padding-box, var(--rg) border-box;
  background-size: auto, 200% 100%; animation: borderflow 16s linear infinite; }
@keyframes borderflow { from { background-position: 0 0, 200% 0; } to { background-position: 0 0, 0 0; } }
.slot.r1 { --rg: linear-gradient(90deg,#5b6474,#cdd5e2,#5b6474,#cdd5e2,#5b6474); box-shadow: inset 0 2px 6px #0009, 0 0 8px #8a93a444; }
.slot.r2 { --rg: linear-gradient(90deg,#1f7a38,#8af0a0,#1f7a38,#8af0a0,#1f7a38); box-shadow: inset 0 2px 6px #0009, 0 0 11px #4cd96455; }
.slot.r3 { --rg: linear-gradient(90deg,#1463a8,#a8dcff,#1463a8,#a8dcff,#1463a8); box-shadow: inset 0 2px 6px #0009, 0 0 11px #4db5ff66; }
.slot.r4 { --rg: linear-gradient(90deg,#5e2aa0,#d6b0ff,#5e2aa0,#d6b0ff,#5e2aa0); box-shadow: inset 0 2px 6px #0009, 0 0 12px #b06bff66; }
.slot.r5 { --rg: linear-gradient(90deg,#a85e0e,#ffd49a,#a85e0e,#ffd49a,#a85e0e); box-shadow: inset 0 2px 6px #0009, 0 0 12px #ff9d2e66; }
.slot.r6 { --rg: linear-gradient(90deg,#9e1818,#ffa0a0,#9e1818,#ffa0a0,#9e1818); box-shadow: inset 0 2px 6px #0009, 0 0 13px #ff4d4d70; }
.slot.r7 { --rg: linear-gradient(90deg,#0e7a72,#7df0e4,#0e7a72,#7df0e4,#0e7a72); box-shadow: inset 0 2px 6px #0009, 0 0 14px #37d6c477; }
.slot.r8 { --rg: linear-gradient(90deg,#9a7d0e,#ffe14d,#9a7d0e,#ffe14d,#9a7d0e); box-shadow: inset 0 2px 6px #0009, 0 0 14px #ffe14d77; }
.slot.r9  { --rc:#7fdfff; } .slot.r10 { --rc:#9d7bff; } .slot.r11 { --rc:#ff7be0; } .slot.r12 { --rc:#6a8bff; }
.slot.r13 { --rc:#ffb14d; } .slot.r14 { --rc:#8aff6a; } .slot.r15 { --rc:#4de0c0; } .slot.r16 { --rc:#c77bff; }
.slot.r17 { --rc:#ff5a5a; } .slot.r18 { --rc:#ffd700; } .slot.r19 { --rc:#e8eefc; } .slot.r20 { --rc:#ff6ad5; }
.slot.r9,.slot.r10,.slot.r11,.slot.r12,.slot.r13,.slot.r14,.slot.r15,.slot.r16,.slot.r17,.slot.r18,.slot.r19,.slot.r20 {
  --rg: linear-gradient(90deg, var(--rc), #ffffff, var(--rc), #ffffff, var(--rc));
  box-shadow: inset 0 0 0 1px var(--rc), inset 0 2px 6px #0009, 0 0 18px var(--rc); }
.slot.r20 { --rg: linear-gradient(90deg,#ff5a5a,#ffb13c,#ffe24d,#5ce06a,#4db5ff,#b06bff,#ff5a5a);
  animation: borderflow 12s linear infinite, r8halo 2s ease-in-out infinite; }
@keyframes r8halo { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

/* ---------- FIL DES DROPS (toasts) ---------- */
#dropfeed { position: absolute; top: 6px; right: 6px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; z-index: 5; max-width: 60%; }
.dropt { display: flex; align-items: center; gap: 6px; background: #2c2438e8; color: #eaf2ff; border: 2px solid #fff;
  border-radius: 10px; padding: 4px 8px 4px 6px; box-shadow: 0 3px 0 #0004; animation: dropin .25s ease-out; }
.dropt .dt-ic { font-size: 20px; }
.dropt .dt-tx { font-size: 11px; font-weight: 700; line-height: 1.2; }
.dropt .dt-tx i { font-style: normal; opacity: .85; font-size: 10px; }
@keyframes dropin { from { opacity: 0; transform: translateX(20px); } }

/* ---------- ÉCRAN DE RETOUR D'ABSENCE ---------- */
#offline { position: fixed; inset: 0; background: #14182ad9; display: grid; place-items: center; z-index: 55; }
#offline.hidden { display: none; }
.offline-box { background: #fff; border: 4px solid #2c2438; border-radius: 22px; padding: 24px 22px; text-align: center;
  width: min(340px, 86vw); box-shadow: 0 14px 0 #0004; }
.offline-box .logo { font-size: 44px; }
.offline-box h2 { margin: 2px 0; font-size: 24px; color: #2c2438; }
.offline-box p { color: #6a6378; font-size: 13px; margin: 4px 0 14px; }
.off-stats { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.off-st { flex: 1; background: #f3f0e8; border: 3px solid #2c2438; border-radius: 12px; padding: 8px 4px; }
.off-st b { display: block; font-size: 20px; color: #2c2438; }
.off-st span { font-size: 10px; color: #6a6378; font-weight: 700; }
.offline-box button { width: 100%; padding: 12px; border: 3px solid #2c2438; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #6ad06a, #46b046); color: #fff; font-size: 16px; font-weight: 900; box-shadow: 0 5px 0 #2f7d2f; }
.offline-box button:active { transform: translateY(3px); box-shadow: 0 2px 0 #2f7d2f; }

.anvil-row { display: flex; align-items: stretch; gap: 8px; }
.anvil { flex: 0 0 auto; width: 58px; border-radius: 14px; background: #cfd6dd; border: 3px solid #2c2438;
  display: grid; place-items: center; font-size: 30px; position: relative; box-shadow: 0 3px 0 #0003; }
.anvil.hit { animation: anvilhit .18s; }
@keyframes anvilhit { 50% { transform: translateY(2px) scale(.96); } }
.spark { position: absolute; inset: 0; pointer-events: none; }
.spark.go::before { content: '✨'; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: 18px; animation: floatup .5s ease-out; }
.forge-btn { flex: 1 1 auto; border: 3px solid #2c2438; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #4db6ff, #2a90e6); color: #fff; box-shadow: 0 4px 0 #185a93;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px; }
.forge-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #185a93; }
.forge-btn[disabled] { background: #b8c2cc; box-shadow: 0 4px 0 #8a949e; cursor: default; }
.fb-t { font-size: 20px; font-weight: 900; text-shadow: 0 2px 0 #0003; }
.fb-s { font-size: 11px; font-weight: 700; opacity: .92; }
.fb-c { font-size: 14px; font-weight: 800; }
.auto-btn { flex: 0 0 auto; width: 58px; border: 3px solid #2c2438; border-radius: 14px; cursor: pointer;
  background: #eceff2; color: #2c2438; font-weight: 800; font-size: 18px; box-shadow: 0 4px 0 #b9c0c7;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auto-btn span { font-size: 11px; }
.auto-btn.on { background: #9be86a; box-shadow: 0 4px 0 #5fae3a; }
.auto-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b9c0c7; }
.forge-btn.hit { animation: anvilhit .18s; }

/* bouton MINE (remplace l'enclume, en bas à gauche) */
.mine-btn { flex: 0 0 auto; width: 58px; border: 3px solid #2c2438; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #b98a4d, #8a5e2e); color: #fff; box-shadow: 0 4px 0 #5e3c18;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.mine-btn .mb-ic { font-size: 24px; line-height: 1; }
.mine-btn .mb-t { font-size: 11px; font-weight: 800; }
.mine-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #5e3c18; }

/* ---------- OVERLAY GÉNÉRIQUE (façon page Sac) ---------- */
.overlay { position: fixed; inset: 0; background: #14182ad9; display: grid; place-items: center; z-index: 56; }
.overlay.hidden { display: none; }
.ov-box { position: relative; background: #fff; border: 4px solid #2c2438; border-radius: 22px; padding: 22px;
  width: min(340px, 88vw); box-shadow: 0 14px 0 #0004; text-align: center; }
.ov-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 3px solid #2c2438;
  border-radius: 50%; background: #ff6b6b; color: #fff; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 #b53a3a; }
.ov-x:active { transform: translateY(2px); box-shadow: 0 1px 0 #b53a3a; }
.pg-title { margin: 2px 0 4px; font-size: 24px; color: #2c2438; }
.ov-sub { color: #6a6378; font-size: 13px; margin: 0 0 14px; }

/* AUCUN border-radius nulle part sur la page Mine */
#view-mine, #view-mine * { border-radius: 0 !important; }
/* EXCEPTION : la jauge d'or + le slider de dépôt gardent leurs bouts arrondis (design slider du pack) */
#view-mine .mine-gauge, #view-mine .mine-gauge > i { border-radius: 11px !important; }
#view-mine input[type=range] { border-radius: 9px !important; }
/* carte de la mine */
.mine-card { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #f3e2bd, #e8d2a0); border: 3px solid #c69a5e; border-radius: 0; padding: 9px 14px; margin-bottom: 8px; } /* bordure marron + plus petit */
.mine-lvl { font-size: 14px; font-weight: 800; color: #5a3a1a; }
.mine-lvl b { font-size: 18px; }
.mine-rate { font-size: 14px; font-weight: 800; color: #6b4a00; }
.mine-rate b { font-size: 18px; }
/* Jauge de réclamation de la mine — design propre (rail sombre encastré + remplissage or brillant), SANS radius */
/* Jauge = barre arrondie MARRON foncé + remplissage ORANGE + poignée LOSANGE (design slider du pack) */
.mine-gauge { position: relative; height: 22px; border: 0; border-radius: 11px; overflow: hidden; margin: 8px 0 16px;
  background: linear-gradient(180deg, #4a3526, #38271b); box-shadow: inset 0 2px 3px #0008, 0 0 0 2px #2a1c12; }
.mine-gauge > i { display: block; height: 100%; width: 0%; border-radius: 11px 0 0 11px; transition: width .25s; position: relative;
  background: linear-gradient(180deg, #ffcf6a, #f0951e); box-shadow: inset 0 2px 0 #ffffff66, inset 0 -2px 2px #00000022; }
/* (pas de poignée : c'est une JAUGE à remplir, pas un slider) */
.mine-gauge .mg-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2;
  font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000c, 0 0 3px #000a; }
.mine-claim { width: 100%; border: 3px solid #2c2438; border-radius: 14px; cursor: pointer; padding: 9px; margin-bottom: 12px;
  background: linear-gradient(180deg, #7ee06a, #3fae3a); color: #fff; box-shadow: 0 5px 0 #2c7a28;
  display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mine-claim .mc-t { font-size: 17px; font-weight: 900; }
.mine-claim .mc-v { font-size: 13px; font-weight: 800; }
.mine-claim:active { transform: translateY(3px); box-shadow: 0 2px 0 #2c7a28; }
.mine-claim[disabled] { background: #b8c2cc; box-shadow: 0 5px 0 #8a949e; cursor: default; }
.mine-next { font-size: 13px; color: #9fb6da; font-weight: 700; margin-bottom: 14px; }
.mine-up { width: 100%; border: 3px solid #2c2438; border-radius: 14px; cursor: pointer; padding: 11px;
  background: linear-gradient(180deg, #ffb43c, #ff8a2a); color: #fff; box-shadow: 0 5px 0 #c96a17;
  display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mine-up .mu-t { font-size: 18px; font-weight: 900; }
.mine-up .mu-c { font-size: 14px; font-weight: 800; }
.mine-up:active { transform: translateY(3px); box-shadow: 0 2px 0 #c96a17; }
.mine-up[disabled] { background: #b8c2cc; box-shadow: 0 5px 0 #8a949e; cursor: default; }

/* ---------- VUES PAR ONGLET ---------- */
#views { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.view { flex: 1 1 auto; min-height: 0; }
.view.hidden { display: none; }
#view-combat:not(.hidden) { display: flex; flex-direction: column; } /* battle + forge empilés */
/* Menus (onglets) = même fond + bordure que le conteneur des boutons (#forge, façon Sac). */
.tab-page { overflow-y: auto; margin: 8px; padding: 16px 14px 18px;
  background: linear-gradient(180deg, #0d1836, #04060f) padding-box,
    linear-gradient(135deg, #1b3470, #5fb6ff 48%, #0c1838) border-box;
  border: 3px solid transparent; border-radius: 16px;
  box-shadow: inset 1px 1px 0 rgba(150,185,255,.22); }
.tab-page .pg-title { text-align: center; color: #eaf2ff; }
.tab-page .ov-sub { text-align: center; color: #9fb6da; }

/* ---------- BARRE DE NAVIGATION (5 onglets) ---------- */
#bottomnav { flex: 0 0 auto; display: flex; align-items: flex-start; background: #2c2438; border-top: 4px solid #1a1626;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)); } /* +16px de hauteur, boutons remontés en haut */
.nav-b { flex: 1; background: none; border: 0; color: #b0a8c4; cursor: pointer; padding: 8px 2px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: inherit; }
.nav-b .nb-ic { font-size: 22px; line-height: 1; }
.nav-b .nb-t { font-size: 10px; font-weight: 800; }
.nav-b.active { color: #ffe7a8; }
.nav-b.active .nb-ic { filter: drop-shadow(0 0 6px #ffd34daa); transform: translateY(-1px); }
.nav-b.locked { opacity: .35; cursor: default; }
.nav-b:not(.locked):active { transform: translateY(1px); }

/* ---------- CARTES D'UNITÉS (onglet Unités) ---------- */
#unitList { display: flex; flex-direction: column; gap: 10px; }
.unit-card { background: #fff; border: 3px solid #2c2438; border-radius: 14px; padding: 10px; box-shadow: 0 3px 0 #0002; }
.uc-top { display: flex; align-items: center; gap: 10px; }
.uc-ic { font-size: 32px; width: 40px; text-align: center; flex: 0 0 auto; }
.uc-info { flex: 1 1 auto; min-width: 0; }
.uc-name { font-weight: 800; font-size: 15px; color: #2c2438; }
.uc-count { color: #2c7a1e; }
.uc-stars { font-size: 18px; line-height: 1.1; margin: 1px 0; white-space: nowrap; }
.uc-stars .star { -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-stroke: 2px #000; }
.uc-stars .star.off { color: #e8e4f0; } /* étoile vide : remplissage clair + bordure noire */
.uc-stars .uc-lvl { font-size: 10px; color: #6a6378; font-weight: 800; margin-left: 4px; -webkit-text-stroke: 0; }
.uc-stats { font-size: 13px; font-weight: 700; color: #6b4a00; }
.uc-up { flex: 0 0 auto; width: 116px; border: 3px solid #2c2438; border-radius: 12px; cursor: pointer; padding: 7px 6px;
  color: #fff; font-weight: 800; font-size: 11px; line-height: 1.2; text-align: center;
  background: linear-gradient(180deg, #c77bff, #9b4de0); box-shadow: 0 4px 0 #6a2da0; }
.uc-up:active { transform: translateY(3px); box-shadow: 0 1px 0 #6a2da0; }
.uc-up[disabled] { background: #b8c2cc; box-shadow: 0 4px 0 #8a949e; cursor: default; }
.uc-srow { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.uc-srow .uc-range { flex: 1 1 auto; min-width: 0; }
.uc-pick { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #2c2438; white-space: nowrap; }
.uc-pick .uc-n { color: #2c7a1e; }

/* slider (range) = même design : track MARRON, remplissage ORANGE (à gauche), poignée LOSANGE */
input[type=range] { -webkit-appearance: none; appearance: none; height: 18px; border-radius: 9px; width: 100%; outline: none; margin: 10px 0;
  background: linear-gradient(90deg, #f0951e 0, #f0951e var(--fill, 100%), #38271b var(--fill, 100%), #38271b 100%);
  box-shadow: inset 0 2px 3px #0008, 0 0 0 2px #2a1c12; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
  background: transparent url('/master/assets/gui/Slider_Hande_01_Handle.png') center/contain no-repeat; border: 0; box-shadow: none; cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; box-shadow: none; cursor: pointer;
  background: transparent url('/master/assets/gui/Slider_Hande_01_Handle.png') center/contain no-repeat; }
input[type=range]::-moz-range-track { background: transparent; }

/* barre de recrutement groupé */
#recruitBar { margin-top: 12px; background: #fff; border: 3px solid #2c2438; border-radius: 14px; padding: 10px;
  box-shadow: 0 3px 0 #0002; text-align: center; }
.rb-tot { font-size: 14px; font-weight: 800; color: #2c2438; margin-bottom: 8px; }
#recruitGo { width: 100%; border: 3px solid #2c2438; border-radius: 12px; cursor: pointer; padding: 11px;
  background: linear-gradient(180deg, #6ad06a, #46b046); color: #fff; font-size: 16px; font-weight: 900; box-shadow: 0 5px 0 #2f7d2f; }
#recruitGo:active { transform: translateY(3px); box-shadow: 0 2px 0 #2f7d2f; }
#recruitGo[disabled] { background: #b8c2cc; box-shadow: 0 5px 0 #8a949e; cursor: default; }

/* slider de dépôt (coffre) */
.dep-slider { margin: 12px 0 4px; }
.dep-slider .dep-pick { font-size: 13px; font-weight: 800; color: #cfe0ff; margin-top: 7px; text-align: center; }
.dep-slider .dep-pick small { font-weight: 700; color: #6a6378; }

/* ---------- COFFRE (onglet Mine) ---------- */
.bank-title { margin: 22px 0 2px; font-size: 19px; color: #eaf2ff; text-align: center; }
.bank-row { display: flex; gap: 8px; margin-top: 8px; }
.bank-btn { flex: 1; border: 3px solid #2c2438; border-radius: 12px; cursor: pointer; padding: 10px;
  color: #fff; font-weight: 800; font-size: 14px; line-height: 1.15; text-align: center; }
.bank-btn small { font-size: 10px; opacity: .9; }
.bank-btn.dep { background: linear-gradient(180deg, #6ad06a, #46b046); box-shadow: 0 4px 0 #2f7d2f; }
.bank-btn.wd { background: linear-gradient(180deg, #ffb43c, #ff8a2a); box-shadow: 0 4px 0 #c96a17; }
.bank-btn:active { transform: translateY(3px); }

/* ---------- ALLIÉS derrière le héros (combat) ---------- */
.allies { position: absolute; bottom: 15%; left: 3%; display: flex; gap: 5px; flex-wrap: wrap; max-width: 40%; z-index: 1; }
.ally { position: relative; font-size: 26px; filter: drop-shadow(0 3px 2px #0004); }
.ally .al-c { position: absolute; bottom: -3px; right: -7px; background: #2c2438; color: #ffe7a8; font-size: 10px;
  font-weight: 900; border: 2px solid #1a1626; border-radius: 8px; padding: 0 3px; }

/* ---------- LOGIN ---------- */
#login { position: fixed; inset: 0; background: #14182ad9; display: grid; place-items: center; z-index: 50; }
#login.hidden { display: none; }
.login-box { background: #fff; border: 4px solid #2c2438; border-radius: 22px; padding: 26px 22px; text-align: center;
  width: min(340px, 86vw); box-shadow: 0 14px 0 #0004; }
.login-box .logo { font-size: 46px; }
.login-box h2 { margin: 4px 0; font-size: 26px; color: #2c2438; }
.login-box p { color: #6a6378; font-size: 14px; margin: 4px 0 14px; }
.login-box input { width: 100%; padding: 12px; border: 3px solid #2c2438; border-radius: 12px; font-size: 16px; text-align: center; margin-bottom: 12px; }
.login-box button { width: 100%; padding: 13px; border: 3px solid #2c2438; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #ffb43c, #ff8a2a); color: #fff; font-size: 17px; font-weight: 900; box-shadow: 0 5px 0 #c96a17; }
.login-box button:active { transform: translateY(3px); box-shadow: 0 2px 0 #c96a17; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.hidden { display: none !important; }

/* ---------- POP-UP DE DROP : 2 cartes crème bordées par la RARETÉ (façon maquette) ---------- */
#dropPopup.overlay { background: #04060fbb; } /* fond assombri mais le jeu reste visible */
.ov-box.dp-box { background: var(--cr-bg); border: 3px solid var(--cr-ink); color: var(--cr-ink); width: min(380px, 94vw);
  border-radius: 0; box-shadow: inset 0 0 0 3px var(--cr-hi), inset 0 0 0 5px var(--cr-ln), 0 14px 0 #0004; }
.dp-box .pg-title { color: var(--cr-ink); }
.dp-slot { display: none; }
.dp-cmp { display: flex; align-items: stretch; gap: 9px; }
/* popup d'inspection : une seule carte (= côté « Équipé actuel » d'un drop) + croix */
.insp-box { width: min(290px, 88vw); }
.insp-box .dp-card { width: 100%; }
.dp-card { flex: 1; min-width: 0; border: 3px solid transparent; border-radius: 0;
  background: linear-gradient(#fffaf0, #fffaf0) padding-box,
    linear-gradient(90deg, var(--rcd, #8a7a55), var(--rcl, #e9dcc0), var(--rcd, #8a7a55), var(--rcl, #e9dcc0), var(--rcd, #8a7a55)) border-box;
  background-size: auto, 200% 100%; background-repeat: no-repeat, repeat; animation: rarsweep 3s linear infinite;
  padding: 9px 9px 10px; text-align: left; box-shadow: 0 3px 0 #00000012, inset 0 1px 0 #fff; }
.dp-card.rar20b { background: linear-gradient(#fffaf0, #fffaf0) padding-box,
    linear-gradient(90deg, #ff5a5a, #ffb13c, #ffe24d, #5ce06a, #4db5ff, #b06bff, #ff5a5a) border-box;
  background-size: auto, 200% 100%; background-repeat: no-repeat, repeat; } /* rareté 20 = arc-en-ciel, comme le texte */
.iv-top { display: flex; gap: 8px; align-items: center; }
.iv-ico { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 0; position: relative; overflow: hidden;
  border: 3px solid transparent; /* bordure ANIMÉE : conic de la couleur de rareté qui TOURNE (--ba + rarspin, comme la 20) */
  background: linear-gradient(#f1e7d0, #f1e7d0) padding-box,
    conic-gradient(from var(--ba), var(--rcd, #8a7a55), var(--rcl, #e9dcc0), var(--rcd, #8a7a55), var(--rcl, #e9dcc0), var(--rcd, #8a7a55)) border-box;
  animation: rarspin 3.5s linear infinite;
  box-shadow: inset 0 2px 5px #00000020; }
.iv-id { min-width: 0; }
.iv-name { font-weight: 900; font-size: 13px; color: #2e2114; line-height: 1.1; }
.iv-lv { display: inline-block; font-size: 10px; font-weight: 900; color: #fff; background: #7a5a36; border-radius: 6px; padding: 0 6px; margin: 2px 0 1px; }
.iv-rare { font-weight: 800; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; margin-top: 1px; }
.iv-banner { background: var(--cr-ln); color: var(--cr-ink); font-weight: 900; font-size: 13px; padding: 3px 6px;
  border-radius: 6px; margin: 9px 0 7px; text-align: center; box-shadow: inset 0 1px 0 #fff7;
  display: flex; align-items: center; justify-content: center; gap: 4px; }
.iv-banner .pw-ic { width: 16px; height: 16px; background: center/contain no-repeat; filter: drop-shadow(0 1px 1px #0005); }
.iv-stats { font-size: 12px; }
.iv-st { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 1px; border-bottom: 1px dashed #00000018; }
.iv-st:last-child { border-bottom: 0; }
.iv-st > span { color: var(--cr-sub); font-weight: 700; }
.iv-st > b { color: #221913; font-weight: 900; white-space: nowrap; }
.dp-d { font-size: 11px; font-weight: 900; }
.dp-d.up { color: #2faa4f; } .dp-d.dn { color: #d2524d; }
.iv-new { font-size: 9px; font-weight: 900; color: #d2524d; vertical-align: top; }
.iv-empty { color: #b09a78; font-style: italic; padding: 22px 4px; text-align: center; font-size: 12px; }
.dp-warn { background: #fde2dc; border: 2px solid #e0796a; color: #9a3322; font-weight: 800; font-size: 12px; text-align: center; padding: 7px 10px; border-radius: 10px; margin: 8px 0 2px; }
.dp-warn.hidden { display: none; }
.dp-btns { display: flex; gap: 8px; margin-top: 14px; }
.dp-keep, .dp-swap { flex: 1; border: 3px solid #1a1626; border-radius: 12px; cursor: pointer; padding: 11px 8px; color: #fff; font-weight: 900; font-size: 14px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.dp-keep small, .dp-swap small { font-size: 9px; font-weight: 700; opacity: .9; }
.dp-keep { background: linear-gradient(180deg, #5aa6ff, #3a7fe0); box-shadow: 0 4px 0 #2860b5; }
.dp-swap { background: linear-gradient(180deg, #6ad06a, #46b046); box-shadow: 0 4px 0 #2f7d2f; }
.dp-keep:active, .dp-swap:active { transform: translateY(3px); }

/* Vignette (thumbnail) de l'objet équipé dans le slot. */
.slot .ic.img { width: 62%; height: 62%; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 2px 2px #000a); image-rendering: auto; }

/* ---------- POPUP TAUX DE DROP — grille colonnes alignées + banderole marron débordante ---------- */
.ov-box.fi-box { position: relative; width: min(370px, 95vw); max-height: 82vh; overflow: visible;
  background: #f7edd2; border: 4px solid #c99a5e; border-radius: 0; padding: 40px 12px 14px;
  box-shadow: 0 16px 44px #0008; }
/* Bandeau = VRAI sprite du pack Title_Tapered_01 (9-slice : bouts à losanges fixes, milieu étiré) */
.fi-banner { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: min(147px, 45%); height: 27px; box-sizing: border-box; /* −30% (trop gros sur mobile) */
  display: flex; align-items: center; justify-content: center;
  background: none; border-style: solid; border-color: transparent; border-width: 0 27px;
  border-image: url('/master/assets/gui/Title_Tapered_01.png') 0 54 fill / 0 27px / 0 stretch;
  color: #fff7ea; font-size: 9px; letter-spacing: .2px; text-shadow: 0 2px 0 #4a2a0e, 0 0 2px #4a2a0e;
  border-radius: 0; padding-bottom: 2px; }
#fiRows { display: block; max-height: 300px; overflow-y: auto; padding-right: 2px; scrollbar-width: none; -ms-overflow-style: none; } /* ~5 lignes puis scroll, barre masquée */
#fiRows::-webkit-scrollbar { width: 0; height: 0; display: none; }
.fi-row { display: block; width: 100%; padding: 7px 6px; border-bottom: 1px solid #e3d0a6; }
.fi-row:last-child { border-bottom: 0; }
.fi-row.fi-cur { display: block; background: #fff1bd; border: 2px solid #f1b015; border-radius: 0; margin: 3px 0; padding: 9px 6px; } /* niveau courant = bloc jaune, SANS radius */
.fi-lv { display: block; width: 100%; text-align: center; font-weight: 900; color: #7a3b16; font-size: 13px; margin-bottom: 6px; }
.fi-row.fi-cur .fi-lv { display: block; width: 100%; font-size: 15px; margin-bottom: 8px; } /* « Niv X » sur sa propre ligne, au-dessus des cases */
.fi-segs { display: flex; width: 100%; gap: 3px; }
.fi-seg { flex: 1 1 0; min-width: 0; text-align: center; }
.fi-nm { display: block; font-size: 8px; font-weight: 900; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.fi-pc { display: block; font-size: 10px; font-weight: 900; border-radius: 0; padding: 3px 1px; text-shadow: 0 1px 0 #ffffff44; }
/* raretés 11-20 dans le popup : le motif SVG animé (.rar-hi) est appliqué directement à .fi-pc, texte dans un <span> au-dessus */
.fi-loading { text-align: center; padding: 22px; color: #9a7038; font-weight: 800; }
/* Croix de fermeture : en HAUT à DROITE du popup, −25% (34px au lieu de 46px) */
.fi-close { position: absolute; top: 6px; right: 6px; margin: 0; display: block; width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(180deg, #ff6a5a, #e23a2c); color: #fff; border: 3px solid #a8261c;
  font-size: 15px; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 #a8261c; z-index: 3; }
.fi-close:active { transform: translateY(3px); box-shadow: 0 1px 0 #a8261c; }
.ov-box { position: relative; } /* ancre la croix + le bandeau */

/* ---------- HÉROS = canvas paper-doll ---------- */
#heroCv { width: 96px; height: 96px; image-rendering: auto; }

/* ---------- ÉCRAN DE CRÉATION DU PERSO ---------- */
/* ÉCRAN DE CRÉATION — plein écran sombre opaque (couvre l'encoche/safe-areas) + thème forge */
/* Page création = THÈME DU JEU (crème/marron) */
#create { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(130% 46% at 50% -6%, #ecdab0, transparent),
              radial-gradient(130% 46% at 50% 106%, #d3ab78, transparent), #c79a5e; }
#create.hidden { display: none; }
.create-box { width: min(360px, 94vw); text-align: center; box-sizing: border-box;
  background: #f6edd4; border: 3px solid #7a3b16; border-radius: 14px; padding: 18px 18px 20px;
  box-shadow: 0 16px 40px #0007, inset 0 0 0 2px #fff7e6, inset 0 0 0 4px #e7cfa0; }
.create-stage { width: 152px; height: 152px; margin: 0 auto 12px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 32%, #f1e7d0, #e2cfa6 72%); border: 3px solid #c69a5e;
  box-shadow: inset 0 6px 14px #0003; }
#createCv { width: 140px; height: 140px; }
/* Champs de saisie = style maquette (fond marron, bordure plus foncée, sans radius, icône personne dedans) */
.create-box input, .login-box input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px 0 44px;
  border: 3px solid #6e4a28; border-radius: 0; text-align: left; margin-bottom: 12px;
  background: url('/master/assets/gui/Icon_Member.png') 12px center / 22px no-repeat, linear-gradient(180deg, #cdab87, #bd9466);
  color: #432c14; font-size: 16px; font-weight: 800; box-shadow: inset 0 2px 4px #00000026, inset 0 -2px 0 #ffffff33; }
.create-box input::placeholder, .login-box input::placeholder { color: #8a6a47; font-weight: 700; }
.create-box input.OLD-removed { width: 100%; box-sizing: border-box; padding: 11px; border: 2px solid #2c4a86; border-radius: 0;
  font-size: 16px; text-align: center; margin-bottom: 12px; background: #0a1124; color: #e8eefc; font-weight: 700; }
.create-box input::placeholder { color: #6f86b5; }
#custList { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.cust-row { display: flex; align-items: center; gap: 6px; }
.cust-row > .lbl { flex: 0 0 70px; text-align: left; font-size: 12px; font-weight: 800; color: #bfe0ff; }
/* pastilles de couleur : défilement horizontal (24 couleurs, on en voit ~7) */
.sw-scroll { flex: 1 1 0; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
  padding: 3px 2px 5px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.sw-scroll::-webkit-scrollbar { height: 5px; }
.sw-scroll::-webkit-scrollbar-thumb { background: #ffffff44; border-radius: 3px; }
.cust-row .sw { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid #2c4a86; cursor: pointer; transition: transform .1s; }
.cust-row .sw.on { border-color: #ffd34d; box-shadow: 0 0 8px #ffd34d; transform: scale(1.14); }
.cust-row .cyc { width: 34px; height: 34px; flex: 0 0 auto; border: 0; cursor: pointer; background: center/contain no-repeat; }
.cust-row .cyc.prev { background-image: url('/master/assets/gui/ArrowIconButton_01_Prev.png'); }
.cust-row .cyc.next { background-image: url('/master/assets/gui/ArrowIconButton_01_Next.png'); }
.cust-row .cyc:active { transform: translateY(2px); }
.cust-row .cyc-lab { flex: 1; font-size: 12px; color: #9fb0d0; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.create-rand { width: 100%; padding: 10px; border: 2px solid #1a1626; border-radius: 12px; cursor: pointer; margin-bottom: 8px;
  background: linear-gradient(180deg, #6a8bff, #4a63c8); color: #fff; font-size: 15px; font-weight: 900; box-shadow: 0 4px 0 #2f3f8c;
  display: flex; align-items: center; justify-content: center; gap: 8px; }
.create-rand:active { transform: translateY(2px); box-shadow: 0 2px 0 #2f3f8c; }
.create-rand .cr-dice { width: 22px; height: 22px; background: center/contain no-repeat url('/master/assets/stat/Stat_RandomBonus.png'); } /* icône blanche (comme bouton taux de drop) */
#cname { text-align: center !important; padding-left: 14px !important; background-image: none !important; } /* pseudo centré, sans icône */
.create-go { width: 100%; padding: 13px; border: 3px solid #1a1626; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #ffd34d, #ff9d2e); color: #5a3000; font-size: 17px; font-weight: 900; box-shadow: 0 5px 0 #c96a17; }
.create-go:active { transform: translateY(3px); box-shadow: 0 2px 0 #c96a17; }

/* ======================= COMPAGNONS (PETS) ======================= */
/* Sprite animé d'un compagnon : bande horizontale défilée par steps(). */
.pet-box { position: relative; display: inline-block; vertical-align: bottom; }
.pet-spr { display: block; transform-origin: top left; background-repeat: no-repeat; image-rendering: auto; }
/* ===== SCÈNE BOUTIQUE (façon maquette) ===== */
#view-pets { padding: 0 !important; display: flex; flex-direction: column; } /* remplit 100% (la topbar flotte par-dessus le mur) */
/* la scène boutique démarre sous la topbar pour ne pas masquer les compagnons */
#view-pets .comp-wall { padding-top: calc(env(safe-area-inset-top) + 52px); box-sizing: content-box; }
.comp-scene { position: relative; flex: 0 0 auto; }
/* Banderole marron débordante */
.comp-banner { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: linear-gradient(180deg, #b07a44, #8a5228); color: #fff7e6; font-weight: 900; font-size: 16px;
  text-shadow: 0 2px 0 #00000055; padding: 7px 28px; border: 3px solid #5e3417; border-radius: 9px;
  box-shadow: 0 4px 0 #00000033, inset 0 2px 0 #ffffff2a;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
/* Mur en bois + étagère de bouteilles */
.comp-wall { height: 48px; background: linear-gradient(180deg, #c79a5e 0%, #b07f49 55%, #9a6b3a 100%);
  border-bottom: 5px solid #6e4a26; position: relative; box-shadow: inset 0 -10px 0 #00000018; }
.comp-shelf { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 40px;
  display: flex; align-items: flex-end; justify-content: space-around;
  border-bottom: 6px solid #7a5230; border-radius: 3px; }
.comp-shelf i { width: 26px; height: 38px; background: center/contain no-repeat; filter: drop-shadow(0 2px 1px #0004); }
/* Sol carrelé en pierre */
/* Sol = scène de combat : herbe + route brune au centre (les compagnons sont sur la route) */
.comp-floor { position: relative; height: 188px; overflow: hidden;
  background:
    url('/master/assets/env/road_strip.png') repeat-x center 56% / auto 50%,
    url('/master/assets/env/Field_Forest.png') repeat top left / 112px 112px; }
.comp-chest { position: absolute; right: 8px; top: 14px; width: 56px; height: 56px; background: center/contain no-repeat; filter: drop-shadow(0 3px 2px #0005); }
.comp-pads { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 8px; transform: translateY(-32px); } /* remontés de 32px → au centre de la terre */
.comp-pad { position: relative; flex: 0 0 auto; width: 96px; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; }
.comp-pad-disc { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 76px; height: 24px; border-radius: 50%; background: radial-gradient(ellipse, #00000055, #00000022 70%, transparent 72%); }
.comp-pad-pet { position: relative; z-index: 2; margin-bottom: 18px; }
.comp-pad-nm { position: absolute; bottom: 0; z-index: 3; font-size: 10px; font-weight: 900; color: #4a2e12; background: #fff8e8; border-radius: 8px; padding: 1px 8px; }
/* sous un pet équipé : SEULEMENT icône attaque + valeur (pas de fond/infobull) */
.comp-pad-atk { position: absolute; bottom: 0; z-index: 3; display: inline-flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #000a, 0 0 4px #000; }
.comp-pad-atk .atk-ic { width: 17px; height: 17px; background: center/contain no-repeat; filter: drop-shadow(0 1px 1px #0008); }
.comp-lock { width: 40px; height: 40px; background: center/contain no-repeat; opacity: .85; margin-bottom: 40px; position: relative; z-index: 2; } /* remonté de 16px */
.comp-lock-lv { position: absolute; bottom: 30px; z-index: 3; font-size: 10px; font-weight: 900; color: #fff; background: #00000088; border-radius: 8px; padding: 1px 7px; }
.comp-pad.locked .comp-pad-disc { background: radial-gradient(ellipse, #00000033, transparent 72%); }
/* mode ÉQUIPEMENT : les slots débloqués s'illuminent (clic = équiper/remplacer dans ce slot) */
.comp-pad.targetable { cursor: pointer; }
.comp-pad.targetable .comp-pad-disc { background: radial-gradient(ellipse, #ffe08aee, #ffcf5577 60%, transparent 72%); }
.comp-pad.targetable::after { content: ''; position: absolute; inset: 6px 6px 12px; border: 3px dashed #ffd84d; border-radius: 12px;
  box-shadow: 0 0 14px #ffd84daa, inset 0 0 12px #ffd84d55; animation: padpulse 1s ease-in-out infinite; pointer-events: none; z-index: 4; }
@keyframes padpulse { 50% { box-shadow: 0 0 22px #ffe27aee, inset 0 0 16px #ffd84d88; border-color: #fff0a8; transform: scale(1.02); } }
.pet-eq.placing { animation: padpulse 1s ease-in-out infinite; }
/* Barre Effet possédé */
.comp-effect { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: linear-gradient(180deg, #f3e2bd, #e8d2a0); border-top: 3px solid #c69a5e; }
.comp-effect .ce-l { font-size: 12px; font-weight: 900; color: #7a3b16; }
.comp-effect .ce-st { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: #4a2e12; font-size: 14px; margin-left: auto; }
.comp-effect .ce-st + .ce-st { margin-left: 6px; }
.comp-effect .ce-ic { width: 20px; height: 20px; background: center/contain no-repeat; }
/* Panneau gacha/inventaire sous la scène */
.comp-panel { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 18px; background: #f6edd4; }
/* Tirage */
.pet-summon-row { display: flex; gap: 8px; margin-bottom: 12px; }
.pet-summon { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.pet-summon .ps-t { font-size: 15px; font-weight: 900; } .pet-summon .ps-c { font-size: 12px; font-weight: 800; }
/* Inventaire */
.pet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pet-none { grid-column: 1/-1; text-align: center; color: #7a5a36; font-weight: 800; padding: 18px; }
.pet-card { position: relative; background: linear-gradient(180deg, #f3e2bd, #e8d2a0); border: 3px solid var(--rc, #c69a5e); border-radius: 0; padding: 5px 4px 7px; text-align: center; cursor: pointer; box-shadow: 0 2px 0 #00000012; }
.pet-card.sel { box-shadow: 0 0 0 3px var(--rc, #c69a5e), 0 0 8px var(--rc, #c69a5e); } /* anneau 3px à la couleur de RARETÉ du compagnon choisi */
.pet-card.eq { background: linear-gradient(180deg, #e7ddb0, #d8c890); }
.pet-card-art { height: 56px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 2px; }
.pet-card-nm { font-size: 11px; font-weight: 900; color: #5a3a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-card-rk { font-size: 12px; font-weight: 900; line-height: 1.15; }
.pet-card-at { font-size: 13px; font-weight: 900; color: #6a4a22; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.pet-card-at .atk-ic { width: 15px; height: 15px; background: center/contain no-repeat; }
.pet-eqbadge { position: absolute; top: 3px; right: 5px; background: #3fae3a; color: #fff; border-radius: 50%; width: 17px; height: 17px; font-size: 11px; line-height: 17px; font-weight: 900; box-shadow: 0 1px 2px #0004; }
/* Actions du pet sélectionné */
.pet-actions { display: flex; gap: 8px; position: sticky; bottom: 6px; }
.pet-actions.hidden { display: none; }
.pet-eq, .pet-sell { flex: 1 1 0; min-width: 0; min-height: 48px; }
/* Toast de tirage */
.pet-toast { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  background: #fff; border: 3px solid #f5b81e; border-radius: 12px; padding: 6px 14px; font-weight: 900; color: #5a3a1a;
  z-index: 20; box-shadow: 0 6px 16px #0005; animation: floatup 1.8s ease-out forwards; }
/* Compagnons à côté du héros au combat */
.allies .ally-pet { display: inline-block; vertical-align: bottom; }

/* ===== Bouton "taux de drop" des compagnons (haut-droite du sol) ===== */
.comp-floor { position: relative; }
.pet-droprate { position: absolute; top: 8px; right: 8px; z-index: 6; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 9px; background: rgba(20, 16, 26, 0.6); cursor: pointer; box-shadow: 0 2px 0 #00000033; }
.pet-droprate .fi-ic { display: block; width: 100%; height: 100%; background: center / 74% no-repeat; filter: drop-shadow(0 1px 1px #0006); }
.pet-droprate:active { transform: translateY(1px); }
/* ===== Tremblement de la zone de forge (la forge "s'ouvre") ===== */
#forge.forging { animation: forgeshake .45s ease-out; }
@keyframes forgeshake {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-2px, 1px) rotate(-.4deg); }
  30% { transform: translate(2px, -1px) rotate(.4deg); }
  45% { transform: translate(-2px, 1px); }
  60% { transform: translate(1px, -1px) rotate(.2deg); }
  75% { transform: translate(-1px, 0); }
  100% { transform: translate(0, 0); }
}

/* icône masse (page combat : titre forge + "Prochain dans") */
.mace-ic { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 1px;
  background: center / contain no-repeat; filter: drop-shadow(0 1px 1px #0007); }

/* ===== Popup CONFIG FORGE AUTO (filtres + Drop précis + ×N) ===== */
.ac-box { max-width: min(400px, 94vw); text-align: left; }
.ac-sec { margin: 10px 0; }
.ac-h { font-weight: 800; font-size: 12px; color: #7a5a36; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.ac-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chk { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; cursor: pointer;
  background: #efe4cc; border: 2px solid #d8c6a0; font-size: 12px; font-weight: 700; color: #4a3a22; user-select: none; }
.ac-chk small { color: #8a7550; font-weight: 600; font-size: 10px; opacity: .75; }
.ac-chk.on { background: #ffe9a8; border-color: #e0a800; box-shadow: 0 0 0 2px #ffcf4d55; }
.ac-empty { color: #8a7550; font-size: 12px; }
.ac-switches { display: flex; gap: 8px; margin: 10px 0; }
.ac-switches .ac-switch { flex: 1 1 0; margin: 0; } /* les 2 switches côte à côte, compacts */
.ac-switch { display: flex; align-items: center; gap: 8px; background: #f3ead6; border: 2px solid #d8c6a0;
  border-radius: 8px; padding: 6px 8px; margin: 10px 0; cursor: pointer; color: #4a3a22; min-width: 0; }
.ac-switch .acs-txt { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.ac-switch .acs-txt b { font-size: 12px; }
.ac-switch small { color: #7a5a36; font-size: 10px; font-weight: 600; }
/* CHECKBOX au design GUI (marron carré + lip 3D + coche blanche, comme les boutons) */
.ac-switch input[type=checkbox] { appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px; flex: 0 0 auto;
  cursor: pointer; background: #fffaf0; border: 2px solid #a5672f; border-radius: 0; box-shadow: 0 2px 0 #6f4419; position: relative; }
.ac-switch input[type=checkbox]:checked { background: #a5672f; }
.ac-switch input[type=checkbox]:checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; font-weight: 900; font-size: 15px; line-height: 1; }
.ac-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; font-weight: 700; color: #4a3a22; font-size: 13px; }
.ac-row select { padding: 5px 8px; border-radius: 8px; border: 2px solid #d8c6a0; background: #fffaf0; font-weight: 800; color: #4a3a22; }
.ac-note { font-size: 11px; color: #7a5a36; margin: 6px 0 10px; line-height: 1.35; }
.ac-start { width: 100%; margin-top: 8px; font-size: 15px; cursor: pointer; } /* look = bouton Master vert (border-image, cf. gui.css) */
.dp-count { text-align: center; font-weight: 800; font-size: 12px; color: #b8860b; margin: 14px 0 4px; }
.ac-box { position: relative; }
.ac-box .pg-x { position: absolute; top: 6px; right: 10px; background: none; border: none; font-size: 20px; line-height: 1; color: #7a5a36; cursor: pointer; font-weight: 800; }
.ov-box.dp-box, .ac-box { overflow: visible; padding-top: 24px; } /* laisse dépasser le bandeau .fi-banner */
.ac-switch.disabled { opacity: .45; pointer-events: none; } /* Drop précis indispo tant qu'aucune rareté ≥2 subs cochée */

/* ===== Popup STATISTIQUES (clic avatar) ===== */
.st-box { width: min(360px, 94vw); text-align: left; }
.st-main { display: flex; gap: 10px; margin: 4px 0 12px; }
.st-m { flex: 1; background: #f3ead6; border: 2px solid #d8c6a0; border-radius: 10px; padding: 8px 6px; text-align: center; }
.st-m span { display: block; font-size: 12px; color: #7a5a36; font-weight: 700; margin-bottom: 2px; }
.st-m b { font-size: 19px; color: #3a2410; }
.st-subs { display: flex; flex-direction: column; gap: 2px; max-height: 48vh; overflow: auto; }
.st-sub { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 8px; border-bottom: 1px dashed #00000018; font-size: 13px; color: #4a3a22; font-weight: 700; }
.st-sub small { color: #8a7550; font-weight: 600; }
.st-empty { color: #8a7550; font-size: 13px; text-align: center; padding: 10px; }
.ava { cursor: pointer; }
/* Bordure des popups = brun clair du bandeau titre (au lieu du violet foncé) */
.ov-box.dp-box, .ov-box.fi-box, .ac-box, .st-box { border-color: #b07040 !important; }
.st-m .st-ic { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; background: center/contain no-repeat; }

/* ===== Popup AMÉLIORATION compagnon ===== */
.pu-box { width: min(360px, 94vw); text-align: center; }
.pu-target { text-align: center; margin-bottom: 8px; }
.pu-frame { width: 96px; height: 96px; margin: 0 auto 6px; border: 3px solid #cbb78e; border-radius: 12px; background: #f1e7d0; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 5px #00000020; }
.pu-name { font-weight: 900; font-size: 15px; color: #2e2114; }
.pu-rare { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 1px 0; }
.pu-pow { font-weight: 800; font-size: 14px; color: #4a3a22; margin: 4px 0; }
.pu-pow .pu-atk { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; background: center/contain no-repeat; }
.pu-pow .pu-arrow { color: #2f9e44; }
.pu-pow small { color: #8a7550; font-weight: 700; }
.pu-xpbar { height: 10px; background: #e0d3b3; border: 1px solid #b89968; border-radius: 6px; overflow: hidden; margin: 6px auto 2px; max-width: 240px; }
.pu-xpbar > i { display: block; height: 100%; background: linear-gradient(180deg, #5fd0ff, #2f8fd0); transition: width .2s; }
.pu-xptxt { font-size: 11px; color: #7a5a36; margin-bottom: 8px; }
.pu-food-h { font-weight: 800; font-size: 12px; color: #7a5a36; text-transform: uppercase; text-align: left; margin: 6px 0 5px; }
.pu-food { display: flex; flex-direction: column; gap: 4px; max-height: 34vh; overflow: auto; }
.pu-fchk { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; cursor: pointer; background: #efe4cc; border: 2px solid #d8c6a0; }
.pu-fchk.on { background: #ffe9a8; border-color: #e0a800; box-shadow: 0 0 0 2px #ffcf4d55; }
.pu-fchk .pu-fn { flex: 1; text-align: left; font-weight: 700; font-size: 13px; color: #4a3a22; }
.pu-fchk small { font-weight: 700; font-size: 10px; }
.pu-fchk b { color: #2f8fd0; font-weight: 900; font-size: 12px; }
.pu-empty { color: #8a7550; font-size: 13px; text-align: center; padding: 12px; }
.ac-start.off { opacity: .5; }
/* Bonus compagnons (attaque de vague + santé joueur) : 2 stats côte à côte */
.comp-effect { display: flex; justify-content: center; gap: 16px; }
.comp-effect .ce-st { display: inline-flex; align-items: center; gap: 4px; }
.comp-effect .ce-ic.ce-hp { filter: none; }
.pet-card-at .hp-ic { margin-left: 5px; }
.pet-card-lv { display: block; font-size: 9px; color: #7a5a36; font-weight: 700; margin-top: 1px; }
/* Boutons d'action DIRECTEMENT sous les 3 slots équipés (au lieu d'en bas de page) */
.comp-scene .pet-actions { position: absolute; left: 10px; right: 10px; top: 134px; bottom: auto; z-index: 6; } /* remontés un peu */
/* Estrade du compagnon SÉLECTIONNÉ mise en évidence */
/* surbrillance = petit CARRÉ (sans radius) centré sur le sprite, clignotant — plus de rectangle */
.comp-pad.sel { outline: none; border-radius: 0; animation: none; }
.comp-pad.sel::after { content: ''; position: absolute; left: 50%; top: 64%; width: 58px; height: 58px; transform: translate(-50%, -50%); border: 2px solid #ffd24a; border-radius: 0; pointer-events: none; animation: padblink .8s ease-in-out infinite; } /* abaissée sous l'ombre du compagnon */
@keyframes padblink { 0%,100% { box-shadow: 0 0 4px #ffcf4d55; border-color: #ffd24a; } 50% { box-shadow: 0 0 12px #ffcf4dee; border-color: #fff2b0; } }
/* Note explicative bas de popup Statistiques */
.st-note { margin-top: 8px; font-size: 11px; color: #7a5a36; line-height: 1.35; }
/* Popup récap hors-ligne */
.off-box { width: min(340px, 92vw); text-align: center; }
.off-dur { font-size: 14px; color: #5a3a1a; margin: 4px 0 10px; }
.off-dur b { color: #b06a1a; }
.off-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; margin: 4px 0; background: #efe4cc; border-radius: 8px; font-weight: 800; color: #4a3a22; font-size: 14px; }
.off-row b { color: #2f9e44; }
.off-note { font-size: 11px; color: #8a7550; margin-top: 8px; font-style: italic; }
/* Sélecteur de forges simultanées (custom, ouvre vers le HAUT, cadenas) */
.fc-select { position: relative; }
.fc-cur { background: #e8d2a0; border: 2px solid #c69a5e; border-radius: 8px; padding: 5px 14px; font-weight: 900; color: #5a3a1a; cursor: pointer; font-size: 14px; min-width: 54px; }
.fc-menu { position: absolute; bottom: calc(100% + 4px); right: 0; background: #fffaf0; border: 2px solid #c69a5e; border-radius: 10px; box-shadow: 0 -6px 18px #0005; padding: 4px; z-index: 30; max-height: 44vh; overflow: auto; min-width: 128px; }
.fc-menu.hidden { display: none; }
.fc-opt { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; font-weight: 800; color: #5a3a1a; cursor: pointer; font-size: 14px; }
.fc-opt:hover { background: #f0e2c2; }
.fc-opt.on { background: #ffe9a8; box-shadow: inset 0 0 0 2px #e0a800; }
.fc-opt.locked { color: #a08a6a; cursor: default; }
.fc-opt.locked:hover { background: none; }
.fc-opt.locked small { font-size: 10px; font-weight: 700; color: #b08a4a; }
.fc-lock { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; background: center/contain no-repeat url('/master/assets/gui/Icon_Lock.png'); }

/* ===== Écran de chargement (rendu Ailfe, thème CRÈME/MARRON, sans astuce) ===== */
#loadScreen { position: fixed; inset: 0; height: 100dvh; min-height: 100vh; z-index: 9999; display: flex; align-items: center; justify-content: center;
  /* portrait mobile : halos crème en HAUT et en BAS (écran étroit et haut), remplit tout l'écran */
  background: radial-gradient(130% 46% at 50% -6%, #ecdab0, transparent),
              radial-gradient(130% 46% at 50% 106%, #d3ab78, transparent), #c79a5e;
  color: #5a3a1a; font-family: 'Baloo 2', system-ui, sans-serif; transition: opacity .4s; }
.ls-status { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #7a5a36; min-height: 18px; text-shadow: 0 1px 0 #ffffff55; }
#loadScreen.hidden { opacity: 0; pointer-events: none; }
.ls-inner { text-align: center; }
.ls-spinner { width: 52px; height: 52px; margin: 0 auto 18px;
  border: 5px solid rgba(122, 59, 22, .22); border-top-color: #7a3b16; border-radius: 50%;
  animation: lsspin .85s linear infinite; }
@keyframes lsspin { to { transform: rotate(360deg); } }
.ls-txt { font-size: 18px; letter-spacing: .06em; font-weight: 800; margin: 0; color: #6e4a26; text-shadow: 0 2px 0 #ffffff66; }
/* jauge de progression en BAS (comme Ailfe #load-bar) */
#ls-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 7px; background: rgba(122, 59, 22, .14); z-index: 10000; }
#ls-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a9743e, #e6c088); box-shadow: 0 0 10px rgba(169, 116, 62, .6); transition: width .15s ease-out; }

/* ===== Bouton ⚙️ + popup Paramètres ===== */
/* Paramètres = engrenage, SOUS le HUD diamant — carré, MÊME hauteur que les puces monnaie, bord droit aligné (14px) */
#settingsBtn { position: absolute; top: 33px; right: 8px; z-index: 25; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(20, 16, 26, 0.82) center/70% no-repeat url('/master/assets/gui/icon_gear.png'); border: 0; box-shadow: none;
  cursor: pointer; padding: 0; font-size: 0; }
#settingsBtn:active { transform: translateY(1px); }
.set-box { width: min(360px, 94vw); overflow: visible; text-align: left; } /* boîte visible (bandeau) — le SCROLL est sur .set-body */
.set-body { max-height: 74vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 2px; }
.set-sec { background: #efe4cc; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.set-h { font-weight: 900; font-size: 14px; color: #5a3a1a; margin-bottom: 4px; }
.set-h2 { font-weight: 800; font-size: 12.5px; color: #7a5a36; margin: 8px 0 4px; }
.set-p { font-size: 12.5px; color: #6a4a22; margin: 0 0 6px; line-height: 1.35; }
.set-box input { width: 100%; box-sizing: border-box; padding: 9px 10px; margin: 4px 0; border-radius: 8px; border: 2px solid #c69a5e; background: #fffaf0; color: #4a3a22; font-size: 14px; }
.set-box .ac-start { margin-top: 6px; width: 100%; }
.set-msg { font-size: 12px; color: #c0392b; font-weight: 700; margin-top: 4px; min-height: 14px; }
.set-soc { display: flex; gap: 6px; margin-top: 10px; }
.set-soc button { flex: 1; padding: 8px 4px; border-radius: 8px; border: 2px solid #cbb78e; background: #e2d4b4; color: #8a7550; font-weight: 700; font-size: 12px; opacity: .6; }
.set-hint { font-size: 10.5px; color: #8a7550; text-align: center; margin-top: 4px; font-style: italic; }
.set-del { border-image-source: url('/master/assets/gui/btn_red.png') !important; }
/* Login sur la page de création */
.create-login { margin-top: 10px; text-align: center; }
.create-login a { color: #c69a5e; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.create-login #loginForm { margin-top: 8px; }
.create-login input { display: block; width: 100%; box-sizing: border-box; margin: 6px 0; padding: 9px 10px; border-radius: 8px; border: 2px solid #c69a5e; background: #fffaf0; color: #4a3a22; font-size: 14px; }
/* Boutons sociaux (désactivés) aux couleurs GUI */
.set-soc .set-fb { background: #3b5998; color: #dfe6f5; border: 0; }
.set-soc .set-gg { background: #ffffff; color: #444; border: 1px solid #ccc; }
.set-soc .set-ap { background: #111; color: #eee; border: 0; }
.iv-max { color: #9a7038; font-weight: 700; font-size: 0.82em; margin-left: 2px; }