/* Section « monde » : l'univers, la carte du monde cliquable et les fiches des cartes, la page d'une carte,
   le tableau « où chasser », les pages illustrées (caractéristiques, systèmes). */

/* Retour à toutes les cartes, au-dessus du titre d'une carte (même lien que sur la fiche d'un monstre). L'entrée du menu
   surlignée mène déjà à /world/ : pas de fil « World › Maps » qui la répéterait. */
.fil { margin: 0; font-size: 14px; }
.fil a { text-decoration: none; }
.fil a::before { content: '\2039  '; }
.fil a:hover { text-decoration: underline; }

/* /world/ : l'histoire et les rubriques. */
.histoire { max-width: 720px; }
.histoire::after { content: ''; display: table; clear: both; }
.histoire img { float: right; width: 116px; height: auto; margin: 4px 0 10px 14px; border-radius: 8px; box-shadow: 0 4px 14px rgba(60, 35, 10, .18); }
.histoire p { margin: 0 0 12px; }
.rubriques { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); max-width: 960px; }
/* Texte d'une rubrique : jamais un dernier mot seul (« with their / monsters. », text-wrap: pretty) ; le titre (strong)
   garde son équilibrage. */
.rubriques a { display: block; height: 100%; padding: 12px 14px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); color: var(--texte); text-decoration: none; text-wrap: pretty; }
.rubriques strong { display: block; margin-bottom: 2px; font-family: var(--titre); font-size: 17px; color: var(--bleu); }
.rubriques span { font-size: 14px; color: var(--doux); }
.rubriques a:hover strong, .rubriques a:focus-visible strong { color: var(--brun); }
@media (min-width: 761px) {
  .histoire img { width: 187px; margin-left: 24px; }
}

/* Choix du serveur et « votre niveau » sur une ligne (le menu n'apparaît qu'avec JavaScript, comme dans les autres sections). */
.choix-serveur { display: none; align-items: center; gap: 8px; margin: 0 0 10px; }
.js .choix-serveur { display: flex; }
.choix-serveur label { font-size: 14px; color: var(--doux); }
.choix-serveur select { min-width: 0; max-width: 100%; font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--bord-champ); border-radius: 8px;
  background: #fffdf8; color: var(--texte); }
.outils-monde { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.outils-monde > * { margin-bottom: 12px; }

/* /world/maps/ : la carte du monde à côté de la liste des cartes du serveur. */
.atlas { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) {
  .atlas { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); }
  .atlas > .monde { position: sticky; top: 12px; }
}
/* L'image (avec sa copie @2x) et par-dessus les zones, à la même échelle. */
.monde { position: relative; max-width: 444px; border-radius: var(--rayon); overflow: hidden; background: var(--parchemin); }
.monde img { display: block; width: 100%; height: auto; }
.monde svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.monde a :is(polygon, rect) { fill: transparent; stroke: transparent; stroke-width: 2px; vector-effect: non-scaling-stroke; transition: fill .15s, stroke .15s; }
.monde a:hover :is(polygon, rect), .monde a:focus-visible :is(polygon, rect), .monde a.survol :is(polygon, rect) { fill: rgba(255, 210, 110, .4); stroke: #f3c45a; }
.monde a.proche :is(polygon, rect) { fill: rgba(255, 210, 110, .26); stroke: rgba(243, 196, 90, .85); }
.monde a:focus { outline: none; }
/* Étiquettes des cartes venues après 2006, dessinées comme celles de l'image (clair cerné de sombre). */
.monde text, .situation text { font: 700 11px Georgia, 'Times New Roman', serif; fill: #f3e6c4; stroke: #2e2010; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; pointer-events: none; }
.monde a:hover text, .monde a:focus-visible text, .monde a.survol text, .monde a.proche text { fill: #ffd76e; }

/* Liste des cartes du serveur, groupée par type, en colonnes. */
.liste-cartes { columns: 2 220px; column-gap: 24px; }
.liste-cartes section { break-inside: avoid; margin: 0 0 14px; }
.liste-cartes h2 { margin: 0 0 6px; font-size: 17px; }
.liste-cartes ul { list-style: none; margin: 0; padding: 0; }
.liste-cartes li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 8px; border-radius: 6px; line-height: 1.35; }
.liste-cartes li a { text-decoration: none; }
.liste-cartes li a:hover { text-decoration: underline; }
.liste-cartes .lv { flex: none; font-size: 13px; color: var(--doux); font-variant-numeric: tabular-nums; }
/* Avec un niveau : les cartes proches ressortent, les autres s'effacent un peu (sans changer de taille : aucun décalage). */
.liste-cartes.avec-niveau li:not(.proche) { opacity: .65; }
.liste-cartes li.proche { background: #f6e3b4; }
.liste-cartes .legende-repli { break-before: avoid; }

/* La zone d'une carte, éclairée sur l'extrait de la carte du monde. */
.situation :is(polygon, rect) { fill: rgba(255, 210, 110, .3); stroke: #f3c45a; stroke-width: 2.5px; vector-effect: non-scaling-stroke; }

/* /world/maps/<carte>/ */
.reperes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.reperes li { padding: 2px 10px; background: var(--carte); border: 1px solid var(--bord); border-radius: 999px; font-size: 14px; }
.figures { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin: 12px 0 4px; }
.figures figure { margin: 0; }
.figures .lieu { overflow: hidden; background: var(--parchemin); border: 1px solid var(--bord); border-radius: var(--rayon); }
/* La minicarte dans son cadre (.cadre-carte), à sa taille d'origine au plus (--l, posée par la page), l'extrait de la carte du monde à côté. */
.figures .plan { flex: 0 1 var(--l, 480px); }
.etage-carte { margin: 0 0 12px; }
.figures .lieu { flex: 1 1 300px; max-width: 380px; }
.figures img, .figures svg { display: block; width: 100%; height: auto; }
.figures figcaption { padding: 6px 10px; font-size: 13px; color: var(--doux); background: var(--carte); border-top: 1px solid var(--bord); }
.monstres { max-width: 640px; }
.monstres td:first-child { white-space: normal; min-width: 120px; }
.monstres small { color: var(--doux); }
.monstres .horaire { white-space: normal; min-width: 150px; font-size: 13px; }
.monstres .horaire .ligne { display: block; }
/* Escorte d'un boss, sous son nom. */
.monstres td:first-child .ligne { display: block; font-size: 13px; }
.doux { color: var(--doux); }
.etage h2 { margin-bottom: 8px; }
.etage h3 { margin: 16px 0 8px; font-size: 16px; color: var(--brun); }
.sans-serveur { margin: 0 0 8px; }
.pnj { max-width: 720px; }
/* Comment y aller : libellé à gauche en bureau, au-dessus sur un téléphone. */
.acces { margin: 0; max-width: 720px; }
.acces > div { display: grid; gap: 2px 14px; padding: 6px 0; border-bottom: 1px solid #efe4d2; }
.acces dt { font-weight: 600; color: var(--brun); }
.acces dd { margin: 0; }
@media (min-width: 640px) {
  .acces > div { grid-template-columns: 170px minmax(0, 1fr); }
}

/* « Your level », à côté du choix du serveur (cartes et « où upar »), libellé discret comme celui du serveur. */
.niveau-joueur { margin: 0 0 12px; }
.niveau-joueur label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--doux); }
/* Bord du champ à 3,3:1 sur la page (--bord-champ de site.css, WCAG 1.4.11) ; 16 px : un téléphone ne zoome pas à la saisie. */
.niveau-joueur input { width: 5.5em; padding: 5px 10px; font: inherit; font-size: 16px; color: var(--texte); border: 1px solid var(--bord-champ); border-radius: 8px; background: #fffdf8; }

/* /world/hunting/ */
.chasse { max-width: 680px; }
/* En-têtes d'un mot (jamais coupés, white-space: nowrap de .tableau th) : « Level » au-dessus de « Monsters » et « Entry »,
   « Area » sur la même ligne de base qu'eux. */
.chasse .groupe { text-align: center; }
.chasse th[rowspan] { vertical-align: bottom; }
/* Colonnes des niveaux à la largeur de leur en-tête, la zone prend le reste : les largeurs ne changent plus pendant que les
   lignes arrivent (sinon les colonnes glissaient de 20 px en 1280 quand le navigateur affichait le tableau en cours de lecture). */
.chasse .num { width: 1%; }
.chasse td:first-child { white-space: normal; min-width: 140px; }
.chasse small { color: var(--doux); }
/* Téléphone : cases resserrées, pour que la meilleure XP tienne sans faire défiler le tableau. */
@media (max-width: 520px) {
  .chasse .tableau th, .chasse .tableau td { padding-left: 7px; padding-right: 7px; }
  .chasse td:first-child { min-width: 112px; }
}
.insecable { white-space: nowrap; }

/* /world/features/ et /world/systems/ : sections illustrées d'une capture du jeu. */
.chapeau p { margin: 0 0 12px; }
.illustre { display: grid; gap: 8px 20px; max-width: 820px; margin-top: 26px; }
.illustre img { display: block; max-width: 100%; height: auto; border: 1px solid var(--bord); border-radius: 8px; }
.illustre h2 { margin: 0 0 6px; }
.illustre p { margin: 0 0 10px; }
@media (min-width: 640px) {
  .illustre { grid-template-columns: 193px minmax(0, 1fr); align-items: start; }
}