*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;color:#f6f5ef;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;user-select:none}body{padding:4px}.hud{width:100%;height:100%;padding:15px;background:rgba(29,35,43,.97);border:1px solid #a5bd8b;border-radius:16px;box-shadow:0 12px 35px #0006;display:flex;flex-direction:column;gap:14px}.topbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #4a5563;-webkit-app-region:drag}.brand{display:flex;align-items:center;gap:10px}.clover,.logo{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#9acb6c,#548b3f);color:white;font-size:25px}.brand-title{font-weight:800;font-size:16px}.brand-subtitle{font-size:9px;letter-spacing:1px;color:#c0c7cf;margin-top:3px}.actions{display:flex;gap:5px;-webkit-app-region:no-drag}.actions button,.expand{width:27px;height:27px;border:1px solid #596372;border-radius:7px;background:#343d49;color:white;font-size:19px;cursor:pointer}.actions .close{color:#f5b2ad}.profile{display:flex;gap:12px;align-items:center}.avatar{flex:0 0 68px;height:88px;border-radius:10px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:linear-gradient(160deg,#526744,#293b31);border:1px solid #728b60}.avatar img{display:block;height:112px;width:auto;max-width:none;object-fit:contain;object-position:center bottom}.profile-info{flex:1;min-width:0}.player{font-size:15px}.meta{color:#c0c7cf;font-size:10px;margin:4px 0 10px;white-space:nowrap}.label{display:flex;justify-content:space-between;font-size:10px;margin:6px 0 4px}.exp-label{margin-top:8px}.bar,.mini-bar{height:8px;background:#46505c;border-radius:20px;overflow:hidden}.bar span,.mini-bar span{display:block;height:100%;border-radius:inherit}.hp span{background:linear-gradient(90deg,#c84f5c,#f07d7c)}.exp span{background:linear-gradient(90deg,#78ae54,#b0d97b)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stats article{padding:10px 5px;text-align:center;border-radius:10px;background:#343d49;border:1px solid #475361;display:flex;flex-direction:column;gap:4px}.stats i{font-style:normal;font-size:20px;color:#f2c96e}.stats article:nth-child(2) i{color:#f0878b}.stats small{font-size:10px;color:#d0d6dc}.stats b{font-size:21px}.menu{display:flex;flex-direction:column;gap:6px}.menu button{display:flex;align-items:center;gap:9px;padding:9px 10px;color:#eef0eb;background:#2b333d;border:1px solid #424d59;border-radius:8px;text-align:left;font-size:11px}.menu span{color:#a9cf83}.menu b{margin-left:auto;color:#9ba6b2;font-size:17px}footer{margin-top:auto;padding-top:10px;border-top:1px solid #4a5563;display:flex;align-items:center;gap:7px;color:#c0c7cf;font-size:9px}.dot{width:7px;height:7px;border-radius:50%;background:#d9b96a}footer small{margin-left:auto;color:#8994a1}.compact-bar{display:none;width:100%;height:100%;align-items:center;gap:10px;padding:9px 11px;border:1px solid #a9cb8b;border-radius:15px;background:rgba(29,35,43,.98);box-shadow:0 8px 24px #0006}.logo{flex:0 0 45px;height:45px;border:0;border-radius:12px;cursor:pointer}.compact-player{flex:1;min-width:0}.compact-name{font-size:11px;font-weight:800;white-space:nowrap;margin-bottom:6px}.compact-name span{color:#c0c7cf;font-weight:500;margin-left:4px}.compact-player .mini-bar{height:5px;margin-top:4px}.values{display:flex;gap:9px}.values div{display:flex;flex-direction:column;gap:2px;align-items:center}.values small{font-size:8px;color:#bfc7cf}.values b{font-size:11px}.expand{width:25px;height:30px;font-size:16px}body.compact{padding:3px}body.compact .hud{display:none}body.compact .compact-bar{display:flex}


/* Authentification intégrée — les contrôles restent dans le renderer isolé. */
[hidden]{display:none!important}.auth-panel{padding:12px;border:1px solid #475361;border-radius:11px;background:rgba(43,51,61,.88);display:flex;flex-direction:column;gap:8px}.auth-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.auth-state{font-size:9px;color:#c0c7cf;padding:4px 7px;border-radius:20px;background:#3a434e}.auth-form{display:flex;flex-direction:column;gap:5px}.auth-form label,.challenge-label{font-size:10px;color:#c0c7cf}.auth-row{display:flex;gap:7px}.auth-row input{min-width:0;flex:1;padding:9px 10px;border:1px solid #596372;border-radius:7px;background:#202730;color:#fff;font:inherit;font-size:11px;outline:none}.auth-row input:focus{border-color:#9acb6c}.auth-row button,.challenge-code-row button,.secondary-btn,.logout-btn{border:1px solid #75985d;border-radius:7px;background:#527f3e;color:#fff;font:inherit;font-weight:700;font-size:10px;padding:8px 10px;cursor:pointer}.auth-row button:disabled,.secondary-btn:disabled{opacity:.5;cursor:wait}.challenge-box{padding-top:8px;border-top:1px solid #4a5563;display:flex;flex-direction:column;gap:7px}.challenge-code-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.challenge-code-row strong{font-size:22px;letter-spacing:3px;color:#c5e7a2;font-variant-numeric:tabular-nums}.challenge-code-row button{background:#343d49;border-color:#596372}.challenge-box p{margin:0;color:#d3d8dc;font-size:10px;line-height:1.45}.secondary-btn{background:#343d49;border-color:#596372}.challenge-box small{font-size:9px;color:#c0c7cf}.auth-message{margin:0;font-size:10px;line-height:1.4;color:#c0c7cf}.auth-message.success{color:#b8e59a}.auth-message.error{color:#f3aaa5}.auth-message.info{color:#c0c7cf}.logout-btn{align-self:flex-start;background:#343d49;border-color:#596372}.dot.connected{background:#8fd16c;box-shadow:0 0 8px #8fd16c88}.profile[hidden]{display:none!important}

#logoutBtn{margin-top:-5px;margin-bottom:-4px}

/* Niveau du joueur dans le profil déplié */
.player-level{margin-left:8px;color:#c0c7cf;font-size:13px;font-weight:600;white-space:nowrap}

/* Logos personnalisés Clover Island */
.clover,
.logo {
  background: transparent;
  overflow: hidden;
}

.clover img,
.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* Profil avec PV, endurance et EXP */
.avatar {
  height: 112px;
}

.bar.endurance span,
.mini-bar.endurance span {
  background: linear-gradient(90deg, #347d68, #55aa8b);
}

.endurance-label {
  margin-top: 8px;
}

.profile-info .bar.endurance {
  height: 8px;
}

.brand-subtitle {
  font-size: 9px;
  letter-spacing: .3px;
}


/* Quatre caractéristiques alignées */
.stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.stats article {
  min-width: 0;
  padding: 5px 3px;
  gap: 2px;
  overflow: hidden;
}

.stats article i {
  font-style: normal;
  font-size: 17px;
  line-height: 1.1;
}

.stats article small {
  font-size: 9px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.stats article b {
  font-size: 18px;
  line-height: 1.1;
}

.stats article:nth-child(2) i {
  color: #b8c8d8;
}

.stats article:nth-child(4) i {
  color: #a9cf83;
}


/* Actions du compte et choix de l'arme */
.account-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.combat-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.weapon-btn {
  border: 1px solid #596372;
  border-radius: 7px;
  background: #343d49;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.weapon-btn[aria-pressed="true"] {
  background: #527f3e;
  border-color: #a9cb8b;
  box-shadow: 0 0 0 1px #a9cb8b44;
}

#logoutBtn {
  margin-top: 0;
  margin-bottom: 0;
}

/* Navigation par onglets du HUD */
.hud-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 42px;
  gap: 5px;
  padding: 2px 0 8px;
  border-bottom: 1px solid #4a5563;
  -webkit-app-region: no-drag;
}

.hud-tab {
  min-width: 0;
  height: 36px;
  padding: 5px 3px;
  border: 1px solid #475361;
  border-radius: 8px;
  background: #2b333d;
  color: #c0c7cf;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, border-color .15s, color .15s;
}

.hud-tab-icon {
  display: grid;
  place-items: center;
  width: 42px;
  justify-self: center;
  border-color: transparent;
  background: transparent;
  font-size: 23px;
}

.hud-tab-icon:hover {
  background: transparent;
  color: #fff;
}

.hud-tab-icon.active {
  border-color: transparent;
  background: transparent;
  color: #a9cf83;
  box-shadow: none;
}

.hud-tab:hover {
  background: #394451;
  color: #fff;
}

.hud-tab.active {
  background: #527f3e;
  border-color: #a5bd8b;
  color: #fff;
  box-shadow: inset 0 0 0 1px #a5bd8b55;
}

.hud-tab:focus-visible {
  outline: 2px solid #a5bd8b;
  outline-offset: 2px;
}

/* Inventaire Clover Island */
.inventory-panel {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 3px 8px 0;
  scrollbar-width: thin;
  scrollbar-color: #657b55 #252d36;
}

.inventory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.inventory-heading h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.inventory-money {
  padding: 6px 9px;
  border: 1px solid #71633e;
  border-radius: 8px;
  background: #39352b;
  color: #f2d17b;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.inventory-capacity {
  padding: 9px 10px;
  border: 1px solid #475361;
  border-radius: 9px;
  background: #252d36;
  margin-bottom: 10px;
}

.inventory-capacity-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: #d5dbe0;
  font-size: 10px;
}

.inventory-capacity-label b {
  color: #c5e7a2;
  font-variant-numeric: tabular-nums;
}

.inventory-capacity-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid #4b5864;
  border-radius: 20px;
  background: #171d24;
}

.inventory-capacity-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #548b3f, #a9d77c);
  transition: width .25s ease;
}

.inventory-status {
  margin: 0 0 10px;
  color: #aeb8c2;
  font-size: 9px;
  line-height: 1.4;
}

.inventory-category {
  margin-top: 12px;
}

.inventory-category h3 {
  margin: 0 0 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid #424d59;
  color: #c5e7a2;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.inventory-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #586575;
  border-radius: 7px;
  background: linear-gradient(145deg, #394451, #252d36);
  transition: border-color .15s, background .15s;
}

.inventory-slot.has-items {
  border-color: #788f65;
  background: linear-gradient(145deg, #3b4a38, #252f2b);
}

.inventory-slot.empty {
  opacity: .55;
}

.inventory-slot:hover {
  border-color: #c5e7a2;
  background: #465342;
}

.inventory-slot img {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.inventory-slot img[hidden] {
  display: none;
}

.inventory-item-fallback {
  display: none;
  color: #c5e7a2;
  font-size: 17px;
  font-weight: 800;
  text-shadow: 0 1px 3px #000;
}

.inventory-slot.no-image .inventory-item-fallback {
  display: block;
}

.inventory-item-count {
  position: absolute;
  right: 3px;
  bottom: 2px;
  max-width: calc(100% - 4px);
  padding: 1px 3px;
  border-radius: 4px;
  background: #151b21eF;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

@media (max-width: 330px) {
  .inventory-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Correctif : défilement interne de l'inventaire */
#tabContent {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tabContent > .tab-panel:not([hidden]) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Symbole de monnaie dans l'inventaire */
.inventory-money-icon {
  display: inline-block;
  margin-right: 3px;
  color: #f2d17b;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  vertical-align: -1px;
}

/* Ceinture : deux emplacements d'objets équipés */
.belt {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 10px auto 12px;
  width: 100%;
}

.belt-slot {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(46%, 180px);
  min-height: 58px;
  padding: 7px 9px;
  color: #f7e8c5;
  background: linear-gradient(145deg, #29241f, #171513);
  border: 1px solid #a8874b;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 153, 0.08),
              0 3px 8px rgba(0, 0, 0, 0.22);
}

.belt-slot:has(.belt-item-icon[src]) {
  border-color: #d1ad65;
}

.belt-item-icon {
  display: none;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
}

.belt-item-name {
  min-width: 0;
  flex: 1;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.belt-item-quantity {
  align-self: flex-end;
  font-size: 11px;
  font-weight: 700;
  color: #ffe09a;
  white-space: nowrap;
}

.belt-tooltip {
  display: none;
  position: absolute;
  z-index: 100;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  padding: 9px 11px;
  color: #f8eedb;
  background: #171411;
  border: 1px solid #c4a05e;
  border-radius: 6px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
  pointer-events: none;
}

.belt-slot:hover .belt-tooltip,
.belt-slot:focus-within .belt-tooltip {
  display: block;
}

@media (max-width: 360px) {
  .belt {
    gap: 7px;
  }

  .belt-slot {
    gap: 5px;
    padding: 6px;
  }

  .belt-item-icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }

  .belt-item-name,
  .belt-item-quantity {
    font-size: 10px;
  }
}

/* Interaction avec les objets de la ceinture */
#beltSlot1[role="button"] {
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

#beltSlot1[role="button"]:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

#beltSlot1[role="button"]:active {
  transform: translateY(0) scale(0.97);
}

#beltSlot1[role="button"]:focus-visible {
  outline: 2px solid #f5d76e;
  outline-offset: 3px;
}

/* Interaction avec le deuxième emplacement de ceinture */
#beltSlot2[role="button"] {
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

#beltSlot2[role="button"]:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

#beltSlot2[role="button"]:active {
  transform: translateY(0) scale(0.97);
}

#beltSlot2[role="button"]:focus-visible {
  outline: 2px solid #f5d76e;
  outline-offset: 3px;
}

/* Déconnexion : rouge discret, cohérent avec le HUD */
#logoutBtn {
  background: #493236;
  border-color: #805158;
  color: #f0c2c3;
  transition: background .15s, border-color .15s, color .15s;
}

#logoutBtn:hover {
  background: #603b40;
  border-color: #b16b70;
  color: #fff0ef;
}

#logoutBtn:active {
  background: #3e2b30;
}

/* Actions de combat : même surbrillance que les onglets */
.weapon-btn,
.combat-actions button {
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.weapon-btn:hover,
.combat-actions button:hover {
  background: #394451;
  border-color: #a5bd8b;
  color: #fff;
  box-shadow: inset 0 0 0 1px #a5bd8b33;
}

.weapon-btn:active,
.combat-actions button:active {
  background: #527f3e;
}

.weapon-btn:focus-visible,
.combat-actions button:focus-visible {
  outline: 2px solid #a5bd8b;
  outline-offset: 2px;
}

/* Infobulle instantanée sur toute la carte des points */
.stats article.points-card {
  position: relative;
  cursor: help;
}

.stats article.points-card::after {
  content: "Points à répartir";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 3px);
  padding: 6px 9px;
  border-radius: 5px;
  background: #202833;
  border: 1px solid #a5bd8b;
  color: #fff;
  font-size: 11px;
  font-weight: normal;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
  transition: opacity .08s ease, transform .08s ease, visibility .08s;
}

.stats article.points-card:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}


/* ============================
   Métiers — Clover Island
   ============================ */

.professions-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 12px;
}

.profession-card {
  overflow: hidden;
  border: 1px solid #424d59;
  border-radius: 8px;
  background: linear-gradient(145deg, #303a45, #242c35);
}

.profession-card[open] {
  border-color: #788f65;
}

.profession-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  cursor: pointer;
  list-style: none;
}

.profession-summary::-webkit-details-marker {
  display: none;
}

.profession-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #586575;
  border-radius: 7px;
  background: #252d36;
  font-size: 19px;
}

.profession-heading {
  flex: 1;
  min-width: 0;
}

.profession-heading h3 {
  margin: 0 0 4px;
  color: #edf2f6;
  font-size: 12px;
  font-weight: 750;
}

.profession-level {
  color: #c5e7a2;
  font-size: 10px;
  font-weight: 700;
}

.profession-chevron {
  color: #aeb8c2;
  font-size: 12px;
  transition: transform .15s;
}

.profession-card[open] .profession-chevron {
  transform: rotate(90deg);
}

.profession-body {
  padding: 0 10px 10px;
}

.profession-xp-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: #aeb8c2;
  font-size: 9px;
}

.profession-xp-label b {
  color: #edf2f6;
  font-variant-numeric: tabular-nums;
}

.profession-xp-track {
  height: 6px;
  overflow: hidden;
  border: 1px solid #1b2229;
  border-radius: 5px;
  background: #1d242b;
}

.profession-xp-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #548b3f, #a9d77c);
  transition: width .25s ease;
}

.profession-next-unlock {
  margin: 6px 0 0;
  color: #aeb8c2;
  font-size: 9px;
  line-height: 1.4;
}

.profession-resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 10px;
}

.profession-resource {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px;
  border: 1px solid #424d59;
  border-radius: 6px;
  background: #252d36;
}

.profession-resource.locked {
  opacity: .42;
  filter: grayscale(1);
}

.profession-resource-icon {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  object-fit: contain;
  image-rendering: pixelated;
}

.profession-resource-info {
  flex: 1;
  min-width: 0;
}

.profession-resource-name {
  display: block;
  overflow-wrap: anywhere;
  color: #edf2f6;
  font-size: 10px;
  font-weight: 700;
}

.profession-resource-level {
  display: block;
  margin-top: 2px;
  color: #aeb8c2;
  font-size: 9px;
}

.profession-unavailable {
  padding: 12px 10px;
  color: #aeb8c2;
  font-size: 10px;
  text-align: center;
}

/* Ajustement visuel de l'onglet Métiers */
.tab-panel[data-panel="metiers"] > .inventory-status {
  margin-top: 0;
  margin-bottom: 8px;
}

.tab-panel[data-panel="metiers"] > .professions-list {
  padding-top: 0;
}

/* =========================================
   PARAMETRES — CLOVER ISLAND HUD
   ========================================= */

.settings-intro {
  margin: 4px 0 16px;
  color: #b9c3ce;
  font-size: 12px;
  line-height: 1.5;
}

.settings-section {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #475361;
  border-radius: 12px;
  background: #2b333d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.settings-section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
}

.settings-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #52634e;
  border-radius: 10px;
  background: #36443a;
  color: #c0d5a8;
  font-size: 19px;
}

.settings-section-heading h3,
.settings-bar-title h4 {
  margin: 0;
  color: #edf1e9;
  font-size: 13px;
  font-weight: 700;
}

.settings-section-heading p,
.settings-bar-title p {
  margin: 4px 0 0;
  color: #aab5c1;
  font-size: 11px;
  line-height: 1.4;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin-top: 12px;
}

.settings-field label {
  color: #cbd3dc;
  font-size: 11px;
  font-weight: 600;
}

.settings-select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 39px;
  padding: 9px 11px;
  border: 1px solid #526071;
  border-radius: 8px;
  outline: none;
  background: #222a33;
  color: #edf1e9;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.settings-select:hover {
  border-color: #8da77a;
  background: #27312d;
}

.settings-select:focus {
  border-color: #a5bd8b;
  box-shadow: 0 0 0 2px rgba(165, 189, 139, 0.15);
}

.settings-select option {
  background: #222a33;
  color: #edf1e9;
}

.settings-bar-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #414d5a;
  border-radius: 10px;
  background: #323c47;
}

.settings-bar-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-bar-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #718765;
  border-radius: 8px;
  background: #3c4b3d;
  color: #d1e4bd;
  font-size: 14px;
  font-weight: 800;
}

.settings-profession-field[hidden] {
  display: none !important;
}

.settings-note {
  margin: 13px 2px 0;
  color: #9eabb8;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 360px) {
  .settings-section {
    padding: 11px;
  }

  .settings-bar-card {
    padding: 10px;
  }
}

/* Barre compacte : alignement stable des indicateurs */
.compact-bar {
  gap: 10px;
}

.compact-player {
  flex: 1 1 auto;
  min-width: 0;
}

.values {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 58px 76px;
  gap: 8px;
  align-items: center;
}

.values div {
  min-width: 0;
  width: 100%;
  align-items: center;
  text-align: center;
}

.values small {
  font-size: 8px;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.values b {
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.compact-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-player .mini-bar {
  flex-shrink: 0;
}


/* Journal de quêtes intégré à l’onglet Quêtes du HUD complet */
.quest-panel{padding:2px 3px 8px 0!important;scrollbar-width:thin;scrollbar-color:#657b55 #252d36}.quest-panel-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}.quest-panel-heading h2{margin:3px 0 0}.quest-kicker{font-size:8px;letter-spacing:1.4px;font-weight:800;color:#a9cf83}.quest-refresh{width:31px;height:31px;border:1px solid #596372;border-radius:8px;background:#343d49;color:#f4f4ef;font-size:19px;line-height:1;cursor:pointer}.quest-refresh:hover{background:#46515d}.quest-refresh:disabled{opacity:.5;cursor:wait}.quests-status{margin:0 0 9px;padding:8px 9px;border:1px solid #475361;border-radius:8px;background:#29313b;color:#c5d0d8;font-size:10px;line-height:1.4}.quests-status.success{color:#b8e59a}.quests-status.error{color:#f3aaa5}.quests-list{display:flex;flex-direction:column;gap:9px}.quest-card{padding:10px;border:1px solid #52614b;border-radius:11px;background:linear-gradient(145deg,#303b35,#29313b)}.quest-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.quest-badge{padding:4px 7px;border-radius:20px;font-size:8px;font-weight:800;letter-spacing:.4px}.quest-badge.main{background:#526f3c;color:#e1f4ca}.quest-badge.side{background:#4b5664;color:#e1e6eb}.quest-count{font-size:9px;color:#c0c7cf}.quest-title{margin:8px 0 4px;font-size:13px}.quest-summary,.quest-details{font-size:10px;line-height:1.45;color:#cbd1d5;margin:0 0 7px}.quest-details{padding:7px;border-left:2px solid #9acb6c;background:#222a31;border-radius:0 6px 6px 0}.quest-progress-label{font-size:9px;color:#d9e7cc;margin-top:8px}.quest-progress-track{height:5px;background:#46505c;border-radius:8px;overflow:hidden;margin:5px 0 8px}.quest-progress-track span{display:block;height:100%;background:linear-gradient(90deg,#78ae54,#b0d97b);border-radius:inherit}.quest-steps{list-style:none;margin:8px 0 0;padding:0}.quest-step{display:flex;gap:8px;position:relative;padding:8px 0 3px;border-top:1px solid #ffffff12}.step-marker{flex:0 0 18px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#414a55;color:#a9b3bc;font-size:10px}.quest-step.complete .step-marker{background:#527f3e;color:white}.quest-step.current .step-marker{background:#e0b954;color:#2a2e2c}.step-copy{min-width:0}.step-title{font-size:10px;line-height:1.4}.quest-step.complete .step-title{color:#c3e3ab}.quest-step.current .step-title{color:#f1d98e}.step-description{font-size:9px;line-height:1.4;color:#bdc5cc;margin:3px 0 0}.step-reward{font-size:9px;line-height:1.4;color:#f2d58a;margin:4px 0 0}

.quest-no-steps{padding:9px 0 2px;border-top:1px solid #ffffff12;color:#d3b96e;font-size:9px;line-height:1.45}
.quest-checklist{margin-top:10px;padding-top:9px;border-top:1px solid #ffffff12}.quest-checklist-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.quest-checklist-title{font-size:10px;color:#e2e9dc}.quest-checklist-count{font-size:9px;color:#c0c7cf}.quest-room-list{list-style:none;margin:5px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:2px}.quest-room-item{display:flex;align-items:center;gap:7px;min-width:0;padding:3px 0;font-size:9px;line-height:1.35}.quest-room-marker{display:grid;place-items:center;flex:0 0 15px;width:15px;height:15px;border-radius:50%;font-size:9px;background:#414a55;color:#a9b3bc}.quest-room-item.visited .quest-room-marker{background:#527f3e;color:white}.quest-room-item.visited .quest-room-name{color:#c3e3ab}.quest-room-item.remaining .quest-room-name{color:#bdc5cc}
.quest-tools{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:6px;margin:0 0 9px}.quest-tools input,.quest-tools select{min-width:0;padding:7px 8px;border:1px solid #475361;border-radius:7px;background:#29313b;color:#e8ecef;font:inherit;font-size:9px;outline:none}.quest-tools input:focus,.quest-tools select:focus{border-color:#9acb6c}.quest-tools select:last-child{grid-column:1/-1}.quest-card{padding:0;overflow:hidden}.quest-card.favorite{border-color:#b79754;box-shadow:0 0 0 1px #b7975428}.quest-card-heading{display:flex;align-items:stretch;gap:5px;padding:7px}.quest-card-toggle{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}.quest-card-toggle:disabled{cursor:default}.quest-card-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.quest-card-badges{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.quest-card-badges .quest-badge{padding:3px 6px;font-size:7px}.quest-card-main .quest-title{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.quest-compact-progress{font-size:8px;color:#b9c2ca}.quest-expand-icon{flex:0 0 17px;display:grid;place-items:center;color:#b9c7ae;font-size:14px}.quest-favorite{flex:0 0 29px;align-self:center;width:29px;height:29px;border:1px solid #596372;border-radius:8px;background:#343d49;color:#b9c2ca;font-size:16px;cursor:pointer}.quest-favorite.active{border-color:#b79754;background:#53452c;color:#ffe6a3}.quest-card-content{padding:0 10px 10px}.quest-card-content[hidden]{display:none}.quest-card-content .quest-summary{margin-top:3px}.quest-card-content .quest-progress-label{margin-top:7px}.quest-card-content .quest-steps{margin-top:7px}
.hud #tabContent:has(.quest-panel:not([hidden])){margin-top:-8px}.quest-panel-heading{margin-bottom:5px}
.hud #tabContent:has(.tab-panel[data-panel="parametres"]:not([hidden])){margin-top:-30px}
.compact-bar{-webkit-app-region:drag}.compact-bar button{-webkit-app-region:no-drag}
.clover{width:45px;height:45px;flex:0 0 45px;border-radius:12px}
.brand .clover{position:relative;width:45px;height:45px;flex:0 0 45px;overflow:visible;border-radius:12px}
.brand .clover img{position:absolute;inset:0;width:45px!important;height:45px!important;max-width:none!important;max-height:none!important;object-fit:contain}
.quest-tools{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}.quest-tools input{grid-column:1/-1}.quest-card-badges .quest-important{background:#66521f;color:#ffe08a;border:1px solid #d2ad47;box-shadow:0 0 8px #d2ad4738}
.inventory-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin:8px 0 4px}.inventory-tools input,.inventory-tools select{min-width:0;padding:7px 8px;border:1px solid #475361;border-radius:7px;background:#29313b;color:#e8ecef;font:inherit;font-size:9px;outline:none}.inventory-tools input{grid-column:1/-1}.inventory-tools input:focus,.inventory-tools select:focus{border-color:#9acb6c}.inventory-category[hidden],.inventory-slot[hidden]{display:none}.inventory-panel #inventoryNoResults{margin:2px 0 6px}