/* Polices Cinzel, Inter et Almendra embarquées dans assets/fonts/ (@fontsource) : aucune dépendance à Google Fonts, le
   rendu reste correct hors-ligne ou en file://. */
@font-face{font-family:'Almendra'; font-style:normal; font-weight:700; font-display:swap; src:url(assets/fonts/almendra-700.woff) format('woff');}
@font-face{font-family:'Cinzel'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/cinzel-latin-ext-600-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cinzel'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/cinzel-latin-600-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap; src:url(assets/fonts/cinzel-latin-ext-700-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap; src:url(assets/fonts/cinzel-latin-700-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/inter-latin-400-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(assets/fonts/inter-latin-ext-500-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(assets/fonts/inter-latin-500-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/inter-latin-600-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root{
    --ink:#e9e4d8; --ink-dim:#a9a291;
    --board-bg:#141c17; --board-line:#2c3a32;
    --gold:#c9a24b; --gold-dim:#8a713a;
    --blue:#3f7fb0; --blue-dim:#2a4c66;
    --crimson:#a3453f; --crimson-dim:#5c2b28;
    --arcane:#7d5bb0; --arcane-dim:#4a3868;
    --panel-bg:#1c231d; --panel-line:#39412f;
    --gray:#6b6a63;
    --select-red:#e5453d; /* contour de selection du deck-builder (cf. .db-card.selected) */
    --font-display:'Cinzel', serif; --font-body:'Inter', sans-serif;
  }
  /* Supprime le halo de tap natif sur tout élément cliquable : il se superposerait aux états visuels du jeu (ex. contour
     doré de sélection des cartes). */
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;background:#0c0f0c;}
  body{font-family:var(--font-body); color:var(--ink); display:flex; justify-content:center; padding:16px 8px;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;}
  /* la carte est agrandie par `zoom` (PC, cf. script.js) : centree horizontalement par le flex du body */
  .app{margin:0 auto;}
  .app{width:100%; max-width:420px; position:relative;}
  /* RÈGLE ABSOLUE : tous les écrans ont exactement le même cadre 941/1672, quel que soit leur contenu. Le contenu s'adapte
     (compacter, onglets), jamais l'inverse ; pas de barre de défilement visible. Toute nouvelle page hérite via .screen. */
  .screen{background:var(--board-bg); border:1px solid var(--board-line); border-radius:16px; overflow:hidden;
    aspect-ratio:941/1672; height:auto; min-height:0; max-height:none; position:relative; box-sizing:border-box;}
  .hidden{display:none !important;}

  /* Bouton mute ancré au coin droit du cadre .app, visible sur tous les écrans ; image décorative, une barre rouge en
     diagonale (::after) indique l'état coupé. */
  .mute-btn{position:absolute; top:8px; right:8px; z-index:100; width:42px; height:42px; padding:0; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .mute-btn img{width:100%; height:auto; display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.65)); transition:filter 0.2s ease, transform 0.2s ease;}
  .mute-btn:hover img{transform:scale(1.06);}
  .mute-btn::after{content:''; position:absolute; left:18%; right:18%; top:49%; height:3px; background:#d24b42; border-radius:2px; transform:rotate(-45deg); opacity:0; transition:opacity 0.2s ease; box-shadow:0 0 3px rgba(0,0,0,0.6);}
  .mute-btn.muted img{filter:drop-shadow(0 2px 5px rgba(0,0,0,0.65)) saturate(0.35) brightness(0.8);}
  .mute-btn.muted::after{opacity:1;}
  /* Premium : image sous le bouton son (.mute-btn : top 8, 42 px). Images active/désactivée dédiées
     (assets/ui/btn-premium-active|desactive, posées par premiumRender()) ; le CSS ne gère que l'ombre/lueur au survol et à
     l'état actif. */
  .premium-btn{position:absolute; top:54px; left:6px; z-index:99; width:58px; padding:0; border:none; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .premium-btn img{width:100%; height:auto; display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.7)); transition:filter 0.2s ease, transform 0.2s ease;}
  .premium-btn:hover img{transform:scale(1.06);}
  .premium-btn.actif img{filter:drop-shadow(0 0 8px rgba(240,200,90,0.9));}
  /* Paramètres : roue sous le bouton son (à droite) ; le Premium est en haut à gauche ; popup langue */
  .parametres-btn{position:absolute; top:56px; right:8px; z-index:99; width:42px; height:42px; padding:0; border:none; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .parametres-btn img{width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.7)); transition:transform 0.35s ease;}
  .parametres-btn:hover img{transform:rotate(45deg) scale(1.06);}
  /* Coffre de récompense (cooldown 12 h) sous le bouton Premium, cf. coffre12hOuvre/coffre12hRender. Préfixe « coffre12h- »
     obligatoire : .coffre-btn/.coffre-panel sont déjà pris par le coffre de fin de combat (#coffre-overlay). */
  .coffre12h-btn{position:absolute; top:116px; left:6px; z-index:99; width:58px; height:58px; padding:0; border:none; border-radius:14px; background:linear-gradient(160deg,#4a3418,#20150a); box-shadow:0 2px 6px rgba(0,0,0,0.6); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; transition:box-shadow 0.3s ease, opacity 0.3s ease;}
  /* #coffre12h-icone reprend l'image assets/rewards/chest-closed.webp du coffre de campagne (cf. openChest), avec le même
     pulse doux quand disponible (@keyframes chest-pulse). */
  .coffre12h-icone{width:34px; height:auto; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6)); transition:transform 0.2s ease, filter 0.2s ease;}
  .coffre12h-cooldown{font-size:9px; color:#f0d9a0; margin-top:2px; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,0.85); letter-spacing:0.2px;}
  .coffre12h-btn:hover .coffre12h-icone{transform:scale(1.08);}
  .coffre12h-btn.dispo{box-shadow:0 0 10px 2px rgba(255,210,90,0.85), 0 2px 6px rgba(0,0,0,0.6); animation:coffre12h-glow 1.6s ease-in-out infinite;}
  .coffre12h-btn.dispo .coffre12h-icone{animation:chest-pulse 1.4s ease-in-out infinite;}
  .coffre12h-btn.verrouille{opacity:0.55; cursor:default;}
  .coffre12h-btn.verrouille .coffre12h-icone{filter:grayscale(0.75) drop-shadow(0 2px 4px rgba(0,0,0,0.6));}
  .coffre12h-btn.verrouille:hover .coffre12h-icone{transform:none;}
  @keyframes coffre12h-glow{0%,100%{box-shadow:0 0 8px 1px rgba(255,210,90,0.7), 0 2px 6px rgba(0,0,0,0.6);} 50%{box-shadow:0 0 16px 4px rgba(255,210,90,0.95), 0 2px 6px rgba(0,0,0,0.6);}}
  .coffre12h-panel-icone{text-align:center; margin-bottom:6px;}
  /* Effet d'ouverture identique au coffre de campagne (cf. .chest-btn img.opened, openChest) : image ouverte + scale-bump,
     déclenché par coffre12hOuvre. */
  .coffre12h-panel-icone img{width:90px; height:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,0.6)); transition:transform 0.15s ease;}
  .coffre12h-panel-icone img.opened{transform:scale(1.06);}
  .parametres-panel{text-align:center;}
  .parametres-panel-img{width:54px; height:54px; display:block; margin:0 auto 4px;}
  .parametres-titre{font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--gold); margin-bottom:8px;}
  .parametres-sous-titre{font-size:11px; color:var(--ink-dim); margin-bottom:6px;}
  /* curseur de volume (retour utilisateur 18 sept.) : meme largeur max que .parametres-langues juste
     en dessous, pour rester coherent visuellement avec le reste du panneau. */
  .parametres-volume-row{display:flex; align-items:center; gap:8px; margin:0 auto 12px; max-width:200px;}
  .parametres-volume-slider{flex:1; accent-color:var(--gold);}
  .parametres-volume-value{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--gold); min-width:34px; text-align:right;}
  .parametres-langues{display:flex; flex-direction:column; gap:5px; margin:0 auto 8px; max-width:200px;}
  .parametres-langue{font-family:var(--font-display); font-size:13px; font-weight:700; padding:6px 12px; border-radius:9px; border:1px solid var(--gold-dim); background:rgba(20,16,10,0.85); color:var(--ink); cursor:pointer;}
  .parametres-langue.actif{border-color:var(--gold); background:linear-gradient(160deg,#f0d27a,#b8862b); color:#2a1d05; box-shadow:0 2px 8px rgba(0,0,0,0.5);}
  .parametres-note{font-size:9px; color:var(--ink-dim);}
  /* bouton Premium des Paramètres : affiche/masque le logo Premium (manoir et cour), non mémorisé = affiché à chaque lancement */
  .parametres-sep{margin-top:10px;}
  .premium-panel{text-align:center;}
  .premium-panel-img{width:62%; max-width:210px; height:auto; display:block; margin:0 auto 6px;}
  .premium-etat{font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--ink-dim); margin-bottom:6px;}
  .premium-etat.actif{color:var(--gold); text-shadow:0 0 8px rgba(240,200,90,0.6);}
  .premium-liste{list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:3px; font-size:10.5px; color:var(--ink);}
  .premium-liste li::before{content:"\2726  "; color:var(--gold);}
  .premium-note{font-size:9px; color:var(--ink-dim); margin-bottom:8px;}
  .premium-toggle{font-family:var(--font-display); font-size:13px; font-weight:700; padding:7px 22px; border-radius:9px; border:1px solid var(--gold); background:linear-gradient(160deg,#f0d27a,#b8862b); color:#2a1d05; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.5);}
  .premium-toggle.actif{background:rgba(20,16,10,0.85); color:var(--gold);}

  /* ===== ecran accueil ===== */
  /* 29/09 : plus d'accueil-bg.jpg (ancien fond, en Poubelle) : le fond est accueil-intro-fin.webp, cf. bloc vidéo plus bas */
  #screen-accueil{aspect-ratio:941/1672; background-size:cover; background-position:center; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:0 20px 32px;}
  /* bouton "Jouer" : seul point d'entree du menu desormais (mene a la piece-hub), detache de la
     pile de boutons du bas et centre au milieu de l'ecran (hauteur ET largeur). */
  .btn-jouer-img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:58%; max-width:320px; padding:0; border:none; background:transparent; cursor:pointer;}
  .btn-jouer-img img{width:100%; height:auto; display:block; filter:drop-shadow(0 6px 16px rgba(0,0,0,0.6));}
  .btn-jouer-img:hover img{filter:drop-shadow(0 6px 18px rgba(201,162,75,0.6)) brightness(1.08);}
  /* Bouton Jouer grisé pendant le téléchargement d'une mise à jour (classe .maj-en-cours ajoutée/retirée dynamiquement) :
     pas de partie tant que la nouvelle version n'est pas toute en cache. */
  .btn-jouer-img.maj-en-cours{cursor:not-allowed; pointer-events:none;}
  .btn-jouer-img.maj-en-cours img{filter:grayscale(0.85) brightness(0.55); opacity:0.75;}
  .accueil-buttons{display:flex; flex-direction:column; gap:12px;}
  /* Barre de mise à jour PWA ancrée en bas de #screen-accueil en position:absolute (pas fixed : tous les .screen ont le même
     cadre 941/1672 en overflow:hidden). Masquée via .hidden hors mise à jour. Dégradé bleu pour ne pas la confondre avec les
     barres vie/XP/cooldown. */
  .maj-update-bar{position:absolute; left:14px; right:14px; bottom:14px; z-index:20; padding:8px 10px 9px; background:rgba(10,12,16,0.82); border:1px solid var(--blue); border-radius:10px; backdrop-filter:blur(2px);}
  .maj-update-label{font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--ink); text-align:center; margin-bottom:5px; text-shadow:0 1px 3px rgba(0,0,0,0.9);}
  .maj-update-jauge{height:8px; border-radius:4px; background:rgba(0,0,0,0.65); border:1px solid var(--blue-dim); overflow:hidden;}
  .maj-update-fill{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--blue-dim),var(--blue)); transition:width 0.35s ease;}
  .maj-restart-btn{position:absolute; left:14px; right:14px; bottom:14px; z-index:21; font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:0.03em; color:#0d1218; background:linear-gradient(180deg,#5fb0d9,var(--blue)); border:1px solid #bfe3f5; border-radius:10px; padding:11px 14px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.55); text-align:center;}
  .maj-restart-btn:hover{filter:brightness(1.08);}
  .maj-restart-btn:disabled{cursor:not-allowed; opacity:0.75;}
  .accueil-btn{font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:0.04em; background:rgba(20,28,23,0.82); border:1px solid var(--gold); color:var(--ink); border-radius:10px; padding:14px; cursor:pointer; backdrop-filter:blur(2px);}
  .accueil-btn:hover:not(:disabled){background:var(--gold-dim); color:#1b160a;}
  .accueil-btn:disabled{opacity:0.4; cursor:not-allowed; border-color:var(--panel-line); background:rgba(20,28,23,0.6); color:var(--ink-dim);}
  .accueil-btn.analyse-btn{font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:normal; padding:8px 14px; border-color:var(--panel-line); color:var(--ink-dim); background:rgba(20,28,23,0.6);}
  .accueil-btn.analyse-btn:hover{background:rgba(20,28,23,0.85); color:var(--ink); border-color:var(--gold-dim);}

  /* Bouton Retour et titres d'écran en image, communs à hub/campagne/neant/deckbuilder/équipement ; le titre est centré en
     absolu sur la largeur totale de la barre, indépendamment du bouton retour ou d'un bouton à droite. */
  .btn-back-img{background:none; border:none; padding:0; cursor:pointer; display:inline-flex; align-items:center; pointer-events:auto; flex:0 0 auto;}
  .btn-back-img img{height:28px; width:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.65));}
  .btn-back-img:hover img{filter:drop-shadow(0 2px 6px rgba(201,162,75,0.6)) brightness(1.08);}

  /* ===== bouton "image" generique (aucun fond/bordure CSS, l'image fournie a deja son propre
     cadre decoratif) : Reessayer/Quitter (fin de partie Neant), Tester le Deck. ===== */
  .btn-img-plain{background:none; border:none; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
  .btn-img-plain img{height:34px; width:auto; display:block; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6));}
  .btn-img-plain:hover:not(:disabled) img{filter:drop-shadow(0 3px 8px rgba(201,162,75,0.6)) brightness(1.08);}
  /* #btn-start (variante image « Tester le Deck », cf. #btn-start.btn-img-plain) est plus petit, placé sous la barre du haut
     dans la ligne des compteurs, juste devant l'icône son. */
  #btn-start.btn-img-plain{position:absolute; right:76px; top:100%; margin-top:6px; z-index:6;}
  #btn-start.btn-img-plain img{height:20px;}

  /* Badge « Mon deck » (campagne) en absolu dans .campagne-topbar, centré entre le titre « Campagne » (50 %) et l'icône son. */
  .btn-deck-badge-img{position:absolute; left:74.5%; top:50%; transform:translate(-50%,-50%); background:none; border:none; padding:0; cursor:pointer; pointer-events:auto;}
  .btn-deck-badge-img img{height:26px; width:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.65));}
  .btn-deck-badge-img:hover img{filter:drop-shadow(0 2px 6px rgba(201,162,75,0.6)) brightness(1.08);}

  /* Carte affichée à l'échelle native (campagne-map.jpg, 1651x953), non écrasée dans le cadre portrait ; déplacement par
     glisser (cf. listeners de campagneViewportEl), comme .cour-viewport/.cour-world. */
  #screen-campagne{aspect-ratio:941/1672; position:relative; background:#05060a; overflow:hidden;}
  .campagne-viewport{position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none;
    -webkit-user-select:none; -moz-user-select:none; user-select:none;}
  .campagne-viewport.dragging{cursor:grabbing;}
  .campagne-world{position:absolute; top:0; left:0; width:1651px; height:953px; background-image:url('assets/campaign/campagne-map.jpg'); background-size:100% 100%; background-repeat:no-repeat;}
  .campagne-topbar{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 56px 10px 12px; background:linear-gradient(rgba(8,10,8,0.88), rgba(8,10,8,0)); z-index:5; pointer-events:none;}
  .campagne-topbar button.ctrl{background:rgba(20,28,23,0.75); border-color:var(--gold-dim); pointer-events:auto;}
  .campagne-deck-status{position:absolute; top:44px; left:0; right:0; text-align:center; font-size:10px; color:var(--ink-dim); z-index:5; padding:0 12px; text-shadow:0 1px 4px rgba(0,0,0,0.95); pointer-events:none;}
  .campagne-deck-status b{color:var(--gold);}
  .campagne-nodes{position:absolute; inset:0;}
  .campagne-node{position:absolute; width:30px; height:30px; margin-left:-15px; margin-top:-15px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; border:2px solid var(--gold); background:rgba(20,28,23,0.55); color:var(--gold); box-shadow:0 0 10px rgba(201,162,75,0.65); animation:node-pulse 1.6s ease-in-out infinite; z-index:1;}
  .campagne-node:hover, .campagne-node:focus{z-index:2;}
  .campagne-node.completed{border-color:var(--blue); color:#c7e1f2; background:rgba(20,28,23,0.72); box-shadow:0 0 8px rgba(63,127,176,0.6); animation:none;}
  .campagne-node.locked{border-color:var(--panel-line); color:var(--ink-dim); background:rgba(10,12,10,0.72); box-shadow:none; cursor:not-allowed; animation:none; opacity:0.75;}
  .campagne-node.boss{width:38px; height:38px; margin-left:-19px; margin-top:-19px; border-color:var(--crimson); color:#f0c3bf; box-shadow:0 0 12px rgba(163,69,63,0.75);}
  .campagne-node.boss.completed{border-color:var(--blue); color:#c7e1f2; box-shadow:0 0 10px rgba(63,127,176,0.6);}
  /* tour = defi du Neant (cf. showCampagneTowerPanel/startCampaignTower) : violet plutot que dore,
     pour la distinguer d'un coup d'oeil des drapeaux (combat de deck classique). */
  .campagne-node.tower{border-color:#9d7ee8; color:#e3d7ff; box-shadow:0 0 10px rgba(157,126,232,0.7);}
  .campagne-node.tower.completed{border-color:var(--blue); color:#c7e1f2; box-shadow:0 0 8px rgba(63,127,176,0.6);}
  .campagne-node.selected{outline:2px solid #fff; outline-offset:1px;}
  .campagne-node > img.tsi{width:17px; height:17px; vertical-align:0;}
  /* Une zone terminée garde l'icône de son type (tour / duo / niveau) plus une coche verte en bas à droite, légèrement
     débordante pour rester lisible sur une pastille de 30 px. */
  .campagne-node-valide{position:absolute; right:-5px; bottom:-4px; width:15px; height:15px;
    pointer-events:none; z-index:3; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.85));}
  .campagne-node.boss .campagne-node-valide{right:-6px; bottom:-5px; width:18px; height:18px;}
  @keyframes node-pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }

  /* Écran cour du château (via la porte du hub) : même principe que le Néant, monde en pixels fixes plus grand que le
     viewport, caméra qui suit le personnage (cf. COUR_BOUNDS/COUR_VOID/courApplyTransform). */
  #screen-cour, #screen-monde{aspect-ratio:941/1672; position:relative; background:#05060a; overflow:hidden;}
  .cour-topbar{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:8px; padding:10px 56px 10px 12px; background:linear-gradient(rgba(8,10,8,0.88), rgba(8,10,8,0)); z-index:5;}
  /* Blocage explicite de la sélection native (cf. .neant-viewport) : sinon un glisse lent sur un PNJ ou le personnage
     déclenche la surbrillance bleue du navigateur. Hérité par tous les PNJ (cf. renderCourNPCs). */
  .cour-viewport{position:absolute; inset:0; overflow:hidden; cursor:crosshair; touch-action:none;
    -webkit-user-select:none; -moz-user-select:none; user-select:none;
    -webkit-user-drag:none; -webkit-touch-callout:none;}
  .cour-world{position:absolute; top:0; left:0; width:1254px; height:1254px; background-image:url('assets/cour/cour-map.jpg'); background-size:100% 100%; background-repeat:no-repeat;}
  /* Décor de la cour généré depuis la map MoteurArkaN (cf. courBuildDecor) : chaque <img> a pour z-index sa ligne de pied
     (asset.foot projeté), idem pour personnage et PNJ, qui passent derrière un objet plus haut qu'eux et devant s'il est
     plus bas.
     isolation:isolate confine ces z-index (jusqu'à ~1300) au monde, sinon ils passeraient au-dessus de .cour-topbar
     (z-index:5) et du joystick (z-index:20). */
  .cour-world{isolation:isolate;}
  .cour-world.map-mode{background-image:none; background-color:#2b2118;}
  .cour-obj{position:absolute; pointer-events:none; user-select:none; -webkit-user-drag:none;
    image-rendering:auto; will-change:auto;}
  .cour-obj.flip{transform:scaleX(-1);}
  .cour-character{position:absolute; width:auto; height:100px; transform:translate(-50%,-90%); pointer-events:none; filter:drop-shadow(0 6px 6px rgba(0,0,0,0.55)); user-select:none;}
  .cour-character.facing-left{transform:translate(-50%,-90%) scaleX(-1);}
  .cour-hint{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:10.5px; color:var(--ink-dim); text-shadow:0 1px 4px rgba(0,0,0,0.9); z-index:5; pointer-events:none;}
  .cour-joystick{position:absolute; left:42px; bottom:18px; width:104px; height:104px; z-index:20; touch-action:none;}
  .cour-joystick-base{position:absolute; inset:0; border-radius:50%; background:rgba(20,28,23,0.55); border:2px solid var(--gold-dim);}
  .cour-joystick-stick{position:absolute; width:44px; height:44px; left:50%; top:50%; margin:-22px 0 0 -22px; border-radius:50%; background:rgba(201,162,75,0.8); border:2px solid var(--gold); transition:transform 0.05s linear;}

  .cour-npcs{position:absolute; top:0; left:0; width:100%; height:100%;}
  /* Le personnage est posé sur le point de couleur (cf. renderCourNPCs) ; le point d'ancrage (npc.x/y) reste au sol (pieds).
     La bulle est ancrée en haut à droite de la tête (.cour-npc en position:relative, cf. .cour-npc-bubble). */
  .cour-npc{position:absolute; transform:translate(-50%,-82%); cursor:pointer;} /* -82% (pas -100%) : le point de couleur reste sous le buste/les pieds du sprite au lieu de deborder juste sous ses pieds */
  .cour-npc-sprite{position:relative; width:auto; display:block; filter:drop-shadow(0 4px 4px rgba(0,0,0,0.5)); pointer-events:none; transition:filter 0.15s ease;}
  .cour-npc-bubble{position:absolute; top:-6px; left:66%; width:36px; height:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); pointer-events:none; transition:filter 0.15s ease;}
  /* surbrillance (halo dore) au survol du PNJ ou de sa bulle */
  .cour-npc:hover .cour-npc-sprite{filter:drop-shadow(0 4px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 6px rgba(255,210,90,0.95)) drop-shadow(0 0 14px rgba(255,210,90,0.7));}
  .cour-npc:hover .cour-npc-bubble{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 5px rgba(255,210,90,0.95)) drop-shadow(0 0 10px rgba(255,210,90,0.7));}
  /* Repère visuel (cf. npcNeedsAttention) : la bulle « point d'exclamation » pulse légèrement, même sans survol du PNJ. */
  .cour-npc-bubble-attention{animation:cour-bubble-attention-pulse 1.1s ease-in-out infinite;}
  @keyframes cour-bubble-attention-pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.16);} }

  /* Portes cliquables (cf. renderCourPortals) : zone invisible centrée sur le point du portail ; la porte est déjà peinte
     dans le décor. */
  .cour-portals{position:absolute; top:0; left:0; width:100%; height:100%;}
  .cour-portal{position:absolute; transform:translate(-50%,-50%); cursor:pointer;}

  .cour-dialogue-backdrop{position:absolute; inset:0; z-index:90; background:rgba(5,6,5,0.72); display:flex; align-items:center; justify-content:center; padding:24px;}
  .cour-dialogue-panel{width:230px; background:#141c17; border:1px solid var(--gold-dim); border-radius:14px; padding:18px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; box-shadow:0 8px 30px rgba(0,0,0,0.6);}
  .cour-dialogue-close{position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--panel-line); color:var(--ink-dim); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .cour-dialogue-close:hover{border-color:var(--gold-dim); color:var(--ink);}
  .cour-dialogue-portrait-wrap{width:96px; height:96px; margin-bottom:10px; display:flex; align-items:center; justify-content:center;}
  .cour-dialogue-portrait-wrap img{max-width:100%; max-height:100%; object-fit:contain;}
  .cour-dialogue-name{font-family:var(--font-display); font-size:13px; color:var(--gold); margin-bottom:4px;}
  .cour-dialogue-text{font-size:13px; color:var(--ink);}
  /* bouton d'entree provisoire vers le prototype de mode Tactique (cf. tactEnterFromCour dans
     script.js), affiche uniquement sur le Chevalier (cf. openCourDialogue) */
  .cour-dialogue-test-btn{margin-top:12px; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:0.04em;
    background:rgba(201,162,75,0.15); border:1px solid var(--gold); color:var(--gold); border-radius:8px; padding:8px 22px; cursor:pointer;}
  .cour-dialogue-test-btn:hover{background:var(--gold-dim); color:#1b160a;}
  /* Variante image des boutons de dialogue : cases identiques 106x34 px, bannière mise à l'échelle par object-fit:contain.
     Largeur 106 px (pas 100) : la bannière la plus large (Sériciculture, 575x188 → 104 px à 34 px de haut) serait sinon
     limitée par la largeur et rendrait ~32,7 px de haut. À élargir si une bannière dépasse 106 px à 34 px de haut. */
  .cour-dialogue-test-btn.btn-img-plain{background:none; border:none; padding:0; width:106px; height:34px;}
  .cour-dialogue-test-btn.btn-img-plain img{width:106px; height:34px; object-fit:contain;}

  .campagne-panel{position:absolute; left:12px; right:12px; bottom:14px; background:rgba(15,19,15,0.94); border:1px solid var(--gold-dim); border-radius:10px; padding:12px; z-index:6; text-align:center;}
  .campagne-panel h3{font-family:var(--font-display); font-size:14px; margin:0 0 3px; color:var(--gold);}
  .campagne-panel .zone-label{font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim); margin:0 0 8px;}
  .campagne-panel p{font-size:10.5px; color:var(--ink-dim); margin:0 0 10px;}
  .campagne-panel-actions{display:flex; gap:8px; justify-content:center;}

  /* Écran de transition du combat de drapeau (phase 1 Deck → phase 2 tour par tour contre le lieutenant, cf.
     checkWin/endGame/campaignShowLieutenantNarrative) ; même ratio 941/1672 que les écrans voisins pour éviter un saut de
     cadre. */
  #screen-campaign-narrative{aspect-ratio:941/1672; position:relative; background:#05060a; overflow:hidden; display:flex; align-items:center; justify-content:center;}
  .campaign-narrative-bg{position:absolute; inset:0; background:url('assets/campaign/campagne-map.jpg') center/cover; filter:brightness(0.35) saturate(0.75);}
  .campaign-narrative-bg::after{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(0,0,0,0.15), rgba(5,6,5,0.8));}
  .campaign-narrative-panel{position:relative; z-index:1; width:78%; max-width:260px; background:rgba(10,14,11,0.9); border:1px solid var(--gold-dim); border-radius:14px; padding:26px 18px; text-align:center; box-shadow:0 10px 34px rgba(0,0,0,0.6);}
  .campaign-narrative-title{font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--gold); margin-bottom:12px; text-shadow:0 2px 6px rgba(0,0,0,0.8);}
  .campaign-narrative-text{font-size:12.5px; line-height:1.55; color:var(--ink); margin-bottom:22px;}

  /* ===== ecran deck-builder ===== */
  /* Même cadre total 941/1672 que l'accueil et la campagne. Le contenu du haut garde sa hauteur naturelle ; seule .db-body
     s'étire pour occuper l'espace restant et défile en interne. */
  #screen-deckbuilder{aspect-ratio:941/1672; display:flex; flex-direction:column;
    background-image:url('assets/ui/deck-bg.jpg'); background-size:cover; background-position:center;}
  .db-topbar{position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 56px 10px 12px; border-bottom:1px solid var(--board-line); flex:0 0 auto;}
  #btn-start{font-family:var(--font-display); font-size:12px; background:var(--gold-dim); border:1px solid var(--gold); color:#1b160a; border-radius:8px; padding:8px 14px; cursor:pointer; font-weight:700;}
  #btn-start:disabled{opacity:0.35; cursor:not-allowed; background:var(--panel-line); border-color:var(--panel-line); color:var(--ink-dim);}
  /* Variante image de #btn-start (cf. .btn-img-plain), hors cas « Valider ce deck » de la campagne : on retire fond/bordure
     dorés, l'image a déjà son cadre. */
  #btn-start.btn-img-plain{background:none; border:none; padding:0;}
  #btn-start.btn-img-plain:disabled{background:none; border:none;}
  #btn-start.btn-img-plain:disabled img{opacity:0.4; filter:grayscale(60%);}
  .db-counters{display:flex; gap:14px; padding:8px 12px; font-size:11px; color:var(--ink-dim); border-bottom:1px solid var(--board-line); flex:0 0 auto;}
  .db-slots{display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--board-line); flex:0 0 auto;}
  .db-slot{flex:1; background:#161b14; border:1px solid var(--panel-line); border-radius:6px; padding:6px 8px; text-align:center;}
  .db-slot.filled{border-color:var(--gold);}
  .db-slot-title{font-family:var(--font-display); font-size:11px; color:var(--ink); font-weight:700;}
  .db-slot-info{font-size:9px; color:var(--ink-dim); margin:2px 0 5px; min-height:11px;}
  .db-slot-actions{display:flex; gap:4px;}
  .db-slot-btn{flex:1; font-size:9px; padding:4px 2px; border-radius:4px; border:1px solid var(--panel-line); background:#242a22; color:var(--ink); cursor:pointer;}
  .db-slot-btn:disabled{opacity:0.35; cursor:default;}
  .db-slot-btn.save:hover:not(:disabled){border-color:var(--arcane);}
  .db-slot-btn.load:hover:not(:disabled){border-color:var(--gold);}
  .db-counters b{color:var(--ink);}

  /* Synergies de classes : bonus d'équipe débloqués quand certaines cartes sont toutes dans le deck en cours. 1) ligne
     d'état au-dessus des emplacements de sauvegarde : vide sans bonus, un badge par bonus actif. */
  .db-active-bonuses{display:flex; flex-wrap:wrap; gap:6px; padding:0 12px; min-height:0; flex:0 0 auto;}
  .db-active-bonuses:not(:empty){padding:8px 12px; border-bottom:1px solid var(--board-line);}
  /* Fond légèrement grisé pour que le badge se détache du fond parchemin clair ; contour doré. */
  .active-bonus-chip{display:flex; align-items:center; gap:5px; font-size:10px; font-weight:600; color:var(--ink); background:rgba(58,56,50,0.6); border:1px solid var(--gold); border-radius:20px; padding:3px 9px 3px 6px; box-shadow:0 1px 4px rgba(0,0,0,0.35);}
  .active-bonus-chip .icon{font-size:12px; line-height:1; display:flex; align-items:center;}
  .active-bonus-chip .icon .synergy-icon-img{width:16px; height:16px; object-fit:contain;}

  /* 2) petit(s) badge(s) en haut a droite d'une carte du deck-builder, un par synergie a
     laquelle cette carte appartient (independamment du fait que la synergie soit active) */
  .db-card-synergy-badges{position:absolute; top:2px; right:2px; display:flex; flex-direction:column; gap:1px; z-index:3;}
  .db-card-synergy-badge{width:14px; height:14px; border-radius:50%; background:rgba(8,10,8,0.75); border:1px solid var(--panel-line); font-size:9px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden;}
  .db-card-synergy-badge.active{border-color:var(--gold); background:rgba(201,162,75,0.35);}
  .db-card-synergy-badge .synergy-icon-img{width:100%; height:100%; object-fit:cover; border-radius:50%;}

  /* 3) popup de description d'un bonus (declenchee par un clic sur un badge) : cadre unique
     et reutilise pour toutes les synergies, donc toujours exactement la meme taille. */
  .synergy-popup-backdrop{position:absolute; inset:0; z-index:90; background:rgba(5,6,5,0.72); display:flex; align-items:center; justify-content:center; padding:24px;}
  .synergy-popup{width:240px; height:240px; background:#141c17; border:1px solid var(--gold-dim); border-radius:14px; padding:18px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; box-shadow:0 8px 30px rgba(0,0,0,0.6);}
  .synergy-popup-close{position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--panel-line); color:var(--ink-dim); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .synergy-popup-close:hover{border-color:var(--gold-dim); color:var(--ink);}
  /* variante "image" (bouton Fermer du sheet de boutons fourni par l'utilisateur) : on garde le
     positionnement en coin de .synergy-popup-close mais on enleve le chrome rond (fond/bordure) */
  .synergy-popup-close.btn-img-plain{width:auto; height:auto; border-radius:0; background:none; border:none; padding:0;}
  .synergy-popup-close.btn-img-plain img{height:22px; width:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6));}
  .synergy-popup-close.btn-img-plain:hover img{filter:drop-shadow(0 2px 6px rgba(201,162,75,0.6)) brightness(1.08);}
  .synergy-popup-icon{font-size:34px; margin-top:6px; display:flex; align-items:center; justify-content:center;}
  .synergy-popup-icon .synergy-icon-img{width:56px; height:56px; object-fit:contain;}
  .synergy-popup-name{font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--gold); margin-top:8px;}
  .synergy-popup-members{font-size:9.5px; color:var(--ink-dim); margin-top:6px; line-height:1.4;}
  .synergy-popup-desc{font-size:10.5px; color:var(--ink); margin-top:10px; line-height:1.4;}

  /* 4) logos des bonus actifs affiches pres des chateaux en partie (cf. structureEl) */
  .castle-synergy-badges{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); display:flex; gap:2px; margin-bottom:2px; z-index:3;}
  .castle-synergy-badge{width:14px; height:14px; border-radius:50%; background:rgba(8,10,8,0.8); border:1px solid var(--gold); font-size:9px; line-height:1; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .castle-synergy-badge .synergy-icon-img{width:100%; height:100%; object-fit:cover; border-radius:50%;}

  /* ligne de choix du skin de cartes actif (debloque en terminant la zone de campagne associee) */
  .db-skins{display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--board-line); flex:0 0 auto; overflow-x:auto;}
  .db-skin-chip{flex:0 0 auto; width:52px; background:#161b14; border:1.5px solid var(--panel-line); border-radius:6px; padding:4px; text-align:center; cursor:pointer; position:relative;}
  .db-skin-chip img{width:100%; aspect-ratio:181/257; object-fit:cover; border-radius:4px; display:block;}
  .db-skin-chip.selected{border-color:var(--gold); background:#2a2410;}
  .db-skin-chip.locked{cursor:not-allowed;}
  .db-skin-chip.locked img{filter:grayscale(1) brightness(0.5);}
  .db-skin-lock{position:absolute; top:2px; right:2px; font-size:11px; filter:drop-shadow(0 0 2px #000);}
  .db-skin-lock img.tsi{width:13px; height:13px; display:block;}
  .db-skin-label{display:block; font-size:8px; color:var(--ink-dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .db-skin-chip.selected .db-skin-label{color:var(--ink);}

  .db-body{flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px 12px 16px;}
  .db-section-title{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim); margin:14px 0 6px;}
  .db-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; align-items:start;}
  .db-grid.gods{grid-template-columns:repeat(2, minmax(0,1fr));}
  /* Textes posés directement sur le fond parchemin (deck-bg.jpg) en noir pour la lisibilité ; les cases à fond sombre
     (decks, skins) gardent leur texte clair. */
  #screen-deckbuilder .db-counters, #screen-deckbuilder .db-counters b, #screen-deckbuilder .db-section-title,
  #screen-deckbuilder .db-mana-note, #screen-deckbuilder .db-mana-note b, #screen-deckbuilder .frag-pill span{color:#000; text-shadow:none;}
  #screen-deckbuilder .db-section-title{font-weight:700;}

  /* aspect-ratio:3/4 = gabarit de départ avant chargement ; ensuite le ratio naturel de l'illustration le remplace en ligne
     (cf. makeCardArtImg) pour que chaque emplacement épouse sa carte sans rogner. */
  .db-card{aspect-ratio:3/4; border-radius:8px; background:var(--panel-bg); border:1.5px solid var(--panel-line); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px 3px; cursor:pointer; text-align:center;}
  .db-card .cost{position:absolute; top:3px; left:4px; font-family:var(--font-display); font-size:11px; color:var(--gold);}
  .db-card .name{font-size:8.5px; color:var(--ink-dim); margin-top:4px; line-height:1.15;}
  /* Carte sélectionnée : toujours le même contour ROUGE net avec lueur diffuse, quelle que soit la rareté (cf.
     var(--select-red)). */
  .db-card.selected{border-color:var(--select-red); background:#2a1613; box-shadow:0 0 0 2px rgba(229,69,61,0.9), 0 0 16px 3px rgba(229,69,61,0.8);}
  .db-card.selected .name{color:var(--ink);}
  .db-card.disabled{opacity:0.3; cursor:not-allowed;}
  /* carte legendaire pas encore gagnee (cf. LEGENDAIRE_TOUR) : grisee + cadenas et zone ou la gagner */
  .db-card.locked{cursor:not-allowed;}
  .db-card.locked > img, .db-card.locked .db-card-stars{filter:grayscale(1) brightness(0.45);}
  .db-card-lock{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; pointer-events:none; font-size:9px; font-weight:700; line-height:1.15; color:#f3dc8a; text-align:center; text-shadow:0 1px 3px #000, 0 0 6px #000;}
  .db-card-lock img.tsi{width:20px; height:20px; filter:drop-shadow(0 1px 3px #000);}

  .db-card.rarity-commune{border-color:var(--gray);}
  .db-card.rarity-rare{border-color:var(--blue-dim);}
  .db-card.rarity-epique{border-color:var(--arcane-dim);}
  .db-card.rarity-legendaire{border-color:var(--gold-dim);}
  /* La sélection garde le contour rouge uniforme quelle que soit la rareté ; ces 4 règles, déclarées APRÈS .rarity-X à
     spécificité égale, l'emportent sur la couleur de bordure de rareté. */
  .db-card.selected.rarity-commune,
  .db-card.selected.rarity-rare,
  .db-card.selected.rarity-epique,
  .db-card.selected.rarity-legendaire{border-color:var(--select-red);}

  .db-mana-note{font-size:9.5px; color:var(--ink-dim); margin-top:4px;}

  /* ===== fragments & amelioration de cartes ===== */
  .db-fragments{position:relative; display:flex; align-items:center; gap:10px; padding:6px 12px; border-bottom:1px solid var(--board-line); flex-wrap:wrap; flex:0 0 auto;}
  .frag-pill{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--ink); font-weight:600;}
  .frag-pill img{width:18px; height:18px; object-fit:contain; display:block;}
  /* Bouton « Amélioration » (image) sorti du flux, aligné à gauche avec le bouton Test du bandeau (même abscisse que
     #btn-start.btn-img-plain) ; garde son emplacement en mode « annuler » (cf. toggleUpgradeMode). */
  #btn-upgrade-mode{position:absolute; left:243px; top:50%; transform:translateY(-50%); background:none; border:none; padding:0; cursor:not-allowed;}
  #btn-upgrade-mode img{height:22px; width:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6)) grayscale(70%); opacity:0.45;}
  #btn-upgrade-mode.ready{cursor:pointer;}
  #btn-upgrade-mode.ready img{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6)); opacity:1;}
  #btn-upgrade-mode.ready:hover img{filter:drop-shadow(0 2px 6px rgba(201,162,75,0.6)) brightness(1.08); opacity:1;}
  #btn-upgrade-mode.active{cursor:pointer; font-family:var(--font-display); font-size:10.5px; font-weight:700; color:var(--gold); background:rgba(201,162,75,0.12); border:1px solid var(--gold); border-radius:6px; padding:6px 10px; white-space:nowrap;}

  /* positionnee tout en bas de la case (juste au-dessus du bord inferieur de la carte),
     par-dessus le bandeau de stats imprime sur l'illustration. */
  .db-card-stars{position:absolute; bottom:2px; left:50%; transform:translateX(-50%); display:flex; gap:1px; background:rgba(0,0,0,0.55); border-radius:4px; padding:1.5px 3px; z-index:2;}
  .db-card-stars img{width:9px; height:9px; display:block;}

  .db-card.upgrade-mode{cursor:pointer;}
  .db-card.upgrade-disabled{opacity:0.28; filter:grayscale(1); cursor:not-allowed;}
  .db-card.upgrade-selected{border-color:var(--gold); box-shadow:0 0 10px rgba(201,162,75,0.65);}

  #upgrade-confirm{position:sticky; bottom:0; margin:10px -12px -16px; background:#161b14; border-top:1px solid var(--gold-dim); padding:10px 12px; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center;}
  .upgrade-confirm-text{font-size:11px; color:var(--ink);}
  .upgrade-confirm-actions{display:flex; gap:8px;}
  button.ctrl.gold{border-color:var(--gold); color:var(--gold); font-weight:700;}

  /* ===== ecran de jeu (repris du prototype precedent) ===== */
  /* Même cadre total que accueil/campagne/deck-builder. Le plateau garde sa taille exacte (ratio 600/678, essentiel à la
     disposition) ; seule la zone hud (énergie/mana/dieux/main) absorbe l'espace restant, sinon le zoom auto PC recalculerait
     une échelle différente selon le nombre de cartes en main. */
  /* Fond de cadre du combat de deck : assets/tactique/tactique-bg.jpg, comme #screen-tactique ; il remplit seulement les
     marges autour du plateau, .board garde son propre décor (aléatoire ou imposé par la zone de campagne, cf. startMatch). */
  #screen-game{aspect-ratio:941/1672; display:flex; flex-direction:column; background-image:url('assets/tactique/tactique-bg.jpg'); background-size:cover; background-position:center;}
  /* padding droit de 56px (comme les autres topbars) pour laisser la place au bouton mute (.mute-btn, position:absolute en
     haut à droite) : sans cela le chrono #clock passe dessous */
  .topbar{display:flex; justify-content:space-between; align-items:center; padding:8px 56px 8px 12px; border-bottom:1px solid var(--board-line); font-size:11px; color:var(--ink-dim); flex:0 0 auto;}
  .status{padding:6px 12px; font-size:12px; text-align:center; color:var(--gold); min-height:18px; flex:0 0 auto;}

  .board{position:relative; margin:0 10px; aspect-ratio:600/678; background-color:#0c0f0c; background-size:cover; background-position:center; border-radius:8px; overflow:hidden; flex:0 0 auto;}
  .lanes{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1.07fr 1fr; gap:0;}
  /* décors « alt » (glace/arcane/désert) : chemins de lane à ~20/50/80 % de la largeur (15/50/85 % sur le décor d'origine)
     -> colonnes 2fr/1fr/2fr pour que unités/camps/avant-postes (centrés via left:50 %) tombent sur le chemin dessiné */
  .board.map-alt .lanes{grid-template-columns:2fr 1fr 2fr;}
  .lane{position:relative;}
  .lane:first-child{border-left:none;} .lane:last-child{border-right:none;}

  /* .structure et .outpost partagent exactement la même taille de pastille (largeur + hauteur minimale), fixe en px :
     indépendante de la lane (cf. .board.map-alt), du texte affiché et de l'état de la partie */
  .structure, .outpost{width:58px; min-height:30px; display:flex; flex-direction:column; justify-content:center; padding:2px 3px; font-size:8px; line-height:1.2;}
  .structure{position:absolute; left:50%; transform:translateX(-50%); border-radius:6px; text-align:center; z-index:2;}
  .structure.enemy{background:var(--crimson-dim); border:1px solid var(--crimson); color:#f0c3bf;}
  .structure.ally{background:var(--blue-dim); border:1px solid var(--blue); color:#c7e1f2;}
  .structure .bar{height:4px; background:#0006; border-radius:2px; margin-top:2px; overflow:hidden;}
  .structure .bar i{display:block; height:100%; background:currentColor;}
  .structure .bar.bouclier{background:#0008;} .structure .bar.bouclier i{background:#e0c23a;}
  .garrison-dots{display:flex; gap:2px; justify-content:center; margin-top:3px;}
  .garrison-dots .dot{width:5px; height:5px; border-radius:50%; display:inline-block; box-shadow:0 0 2px rgba(255,255,255,0.6);}
  .structure.shielded{overflow:visible;}
  .structure.shielded::after{
    content:''; position:absolute; inset:-9px; border-radius:16px;
    border:2px solid #e0c23a; box-shadow:0 0 10px 2px rgba(224,194,58,0.7);
    pointer-events:none;
  }
  .structure.dead{opacity:0.25;}
  .structure.captured{outline:2px solid var(--gold);}

  .outpost{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:6px; text-align:center; background:#33352f; border:1px solid var(--board-line); color:var(--ink-dim); z-index:2;}
  .outpost.owned-player{border-color:var(--blue); color:#c7e1f2;}
  .outpost.owned-enemy{border-color:var(--crimson); color:#f0c3bf;}
  .outpost.destroyed{opacity:0.2; text-decoration:line-through;}
  .outpost .bar{height:3px; background:#0006; border-radius:2px; margin-top:2px; overflow:hidden;}
  .outpost .bar i{display:block; height:100%; background:currentColor;}

  /* pas de cadre ni de fond autour du sprite (PNG détouré posé sur la lane) ; object-fit:contain pour montrer le personnage
     entier sans le rogner */
  .unit{position:absolute; left:50%; transform:translate(-50%,-50%); width:22px; height:32px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; z-index:3; transition:top 0.1s linear;}
  .unit img{width:100%; height:100%; object-fit:contain; display:block;}
  .unit.petit-golem{width:16px; height:23px;} /* petits golems de l'Éboulement (Golem mort, cf. golemEboulement) */
  .unit.player{color:#08202f;}
  .unit.enemy{color:#380f0d;}
  .unit .hp{position:absolute; top:-6px; left:0; width:100%; height:2px; background:#0007;}
  .unit .hp i{display:block; height:100%; background:#fff;}
  /* barre de capture au-dessus de la barre de PV (-10px au lieu de -6px) : visible seulement pendant une recapture (cf.
     u.captureProgress dans moveUnits, remplie sur RECAPTURE_TIME secondes) */
  .unit .capture{position:absolute; top:-10px; left:0; width:100%; height:2px; background:#0007;}
  .unit .capture i{display:block; height:100%; background:var(--gold);}
  /* texte flottant de dégâts/soins (cf. pushUnitFloat/flushUnitFloats) : même classe .float-tick que les tics
     d'énergie/mana, un peu plus gros pour rester lisible au-dessus des unités (22x32px, cf. .unit) */
  .float-tick.float-unit{font-size:10px; text-shadow:0 0 4px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.95);}

  /* taille fixe (pas un % de la lane) : les lanes n'ont pas la même largeur (1fr/1.07fr/1fr ou 2fr/1fr/2fr en décor alt)
     alors que l'appel aux dieux a toujours la même portée réelle (ZONE_RADIUS) */
  .zone-fx{position:absolute; left:50%; transform:translate(-50%,-50%); width:68px; aspect-ratio:1/1; border-radius:50%; z-index:1; pointer-events:none; opacity:0.5;}

  .float-tick{position:absolute; left:50%; transform:translate(-50%,-140%); font-family:var(--font-display); font-size:12px; font-weight:700; z-index:5; pointer-events:none; text-shadow:0 0 6px rgba(0,0,0,0.7);}
  .projectile{position:absolute; left:50%; width:0; height:0; z-index:4; pointer-events:none;}
  .projectile img{position:absolute; left:0; top:0; height:20px; width:auto; display:block;}

  /* même fond que le plateau/#screen-game, avec un voile sombre semi-transparent (gradient) pour garder énergie/mana et
     cartes lisibles */
  .hud{background-image:linear-gradient(rgba(6,8,6,0.62),rgba(6,8,6,0.62)),url('assets/tactique/tactique-bg.jpg'); background-size:cover; background-position:center; border-top:1px solid var(--panel-line); padding:10px 12px 14px; flex:1 1 auto; min-height:0; overflow-y:auto;}
  .hud-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:12px;}
  .energy{color:var(--gold); font-weight:600;}
  .mana-label{color:var(--ink-dim); font-size:10px;}

  .god-row{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px;}
  .god-slot{background:#242a22; border:1px solid var(--panel-line); border-radius:8px; text-align:center; font-size:9px; color:var(--ink-dim); cursor:pointer; overflow:hidden; position:relative; padding:2px;}
  .god-slot img{width:100%; height:auto; display:block; border-radius:4px;}
  .god-slot .cap{padding:3px 2px 1px;}
  .god-slot.ready{border-color:var(--arcane); color:#d8c8f2; background:#2a2436;}
  .god-slot.selected{border-color:var(--gold); color:var(--gold); background:#2f2a12;}

  .hand{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:5px; align-items:start;}
  .card{aspect-ratio:3/4; background:#242a22; border:1px solid var(--panel-line); border-radius:6px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; font-size:8px; color:var(--ink-dim); text-align:center; padding:2px;}
  .card .cost{position:absolute; top:2px; left:3px; font-family:var(--font-display); font-size:10px; color:var(--gold);}
  .card.mana-card .cost{color:var(--arcane);}
  .card.selected{border-color:var(--gold); transform:translateY(-3px);}
  .card.unaffordable{opacity:0.4;}

  /* ===== version PC : glisser-deposer une carte sur une lane a la souris ===== */
  .card[draggable="true"]{cursor:grab;}
  .card[draggable="true"]:active{cursor:grabbing;}
  .card.dragging{opacity:0.35; border-color:var(--gold);}
  .lane.drag-over{background:rgba(201,162,75,0.14); outline:2px dashed var(--gold); outline-offset:-2px;}

  /* ===== version PC : le cadre garde les mêmes dimensions que l'accueil sur tous les écrans ; seul le zoom global agrandit
     l'ensemble pour occuper la hauteur de la fenêtre ===== */
  @media (min-width:900px){
    /* la carte entiere est zoomee (transform:scale, cf. script.js) pour occuper la hauteur
       de la fenetre ; une legere transition evite un saut brusque au changement d'ecran. */
    /* (13 sept. 2026 : plus de transition — l'agrandissement se fait par `zoom`, cf. script.js,
       qui met en page a la taille finale ; une transition sur zoom ferait clignoter la mise en page) */
    #screen-game .hand{ gap:10px; }
    #screen-game .card{ font-size:10px; border-radius:8px; }
    #screen-game .card:hover:not(.unaffordable){ border-color:var(--gold-dim); transform:translateY(-2px); }
  }

  button.ctrl{font-family:var(--font-body); font-size:11px; background:transparent; border:1px solid var(--panel-line); color:var(--ink); border-radius:6px; padding:6px 10px; cursor:pointer;}
  button.ctrl:hover{border-color:var(--gold-dim);}

  .end-overlay{position:absolute; inset:0; z-index:10; background:rgba(8,10,8,0.86); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; border-radius:16px;}
  .end-text{font-family:var(--font-display); font-size:34px; font-weight:700; letter-spacing:0.06em; text-align:center; text-shadow:0 0 18px currentColor;}
  .end-text.win{color:var(--gold);}
  .end-text.lose{color:var(--crimson);}

  .end-actions{display:flex; gap:10px;}

  .chest-wrap{display:flex; flex-direction:column; align-items:center; gap:10px;}
  .chest-hint{font-size:10.5px; color:var(--ink-dim);}
  .chest-btn{background:none; border:none; padding:0; cursor:pointer; line-height:0;}
  .chest-btn:disabled{cursor:default;}
  .chest-btn img{width:130px; height:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,0.6)); transition:transform 0.15s ease;}
  .chest-btn:not(:disabled) img{animation:chest-pulse 1.4s ease-in-out infinite;}
  .chest-btn img.opened{animation:none; transform:scale(1.06);}
  @keyframes chest-pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
  .chest-reward{display:flex; flex-direction:column; align-items:center; gap:6px;}
  .chest-reward img{width:60px; height:auto;}
  .chest-reward img.landed{filter:drop-shadow(0 0 10px rgba(201,162,75,0.75));}
  .chest-reward-text{font-family:var(--font-display); font-size:13px; color:var(--gold); font-weight:700;}

  /* ===== ecran Neant (arene libre : personnage deplacable, camera centree) ===== */
  #screen-neant{aspect-ratio:941/1672; position:relative; background:#05060a;}
  .neant-topbar{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 56px 10px 12px; background:linear-gradient(rgba(8,10,8,0.88), rgba(8,10,8,0)); z-index:5; pointer-events:none;}
  .neant-topbar button.ctrl{pointer-events:auto; background:rgba(20,28,23,0.75); border-color:var(--gold-dim);}
  /* 19 sept. 2026 : nowrap + flex:none -> « Vague N » ne se casse plus sur 2 lignes quand les PV prennent la place */
  .neant-wave{font-family:var(--font-display); font-size:14px; margin:0; color:var(--ink); white-space:nowrap; flex:none;}
  /* bloque la sélection native et le fantôme de glisser-déposer (-webkit-user-drag sur les <img>) : le clic maintenu/glissé
     (pointerdown+pointermove) déclenchait parfois une surbrillance bleue sur l'élément survolé ; hérité par les descendants
     créés dynamiquement */
  .neant-viewport{position:absolute; inset:0; overflow:hidden; cursor:crosshair; touch-action:none;
    -webkit-user-select:none; -moz-user-select:none; user-select:none;
    -webkit-user-drag:none; -webkit-touch-callout:none;}
  .neant-world{position:absolute; top:0; left:0; width:2048px; height:1728px; background-image:url('assets/neant/neant-arene.jpg'); background-size:100% 100%; background-repeat:no-repeat;}
  /* portail animé au centre du vide de l'arène (position par zone via NEANT_PORTAL_POS_BY_ZONE : la sphère peinte varie
     selon les 4 images), dimensionné pour la recouvrir sans déborder sur l'anneau de pierre
     Pas de z-index : premier enfant de #neant-world, donc sous le personnage et les monstres ajoutés après */
  .neant-portal-fx{position:absolute; left:1020px; top:830px; width:205px; height:205px; transform:translate(-50%,-50%); pointer-events:none; object-fit:contain;}
  .neant-character{position:absolute; width:132px; height:auto; transform:translate(-50%,-90%); pointer-events:none; filter:drop-shadow(0 6px 6px rgba(0,0,0,0.55)); user-select:none; z-index:15;}
  /* le personnage se tourne vers son sens de déplacement (miroir horizontal) : classe basculée en JS selon le signe du
     dernier déplacement horizontal, cf. neantStep/neantApplyTransform */
  .neant-character.facing-left{transform:translate(-50%,-90%) scaleX(-1);}
  .neant-hint{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:10.5px; color:var(--ink-dim); text-shadow:0 1px 4px rgba(0,0,0,0.9); z-index:5; pointer-events:none;}

  /* annonce "- Vague N -" au-dessus de la tete du personnage : supprimee (cf. index.html, l'element
     #neant-wave-announce n'existe plus — neantAnnounceWave devient un no-op, cf. script.js). */

  /* bannière des niveaux de boss (arrivée du boss / consigne de vidage juste avant, cf. NEANT_BOSS_WAVE_INTERVAL et
     neantShowBossBanner) : fixe en haut de l'écran, pas suivie par la caméra ; réservée à ces deux événements rares */
  .neant-boss-banner{position:absolute; left:50%; top:22px; transform:translateX(-50%) scale(0.85); z-index:25;
    font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:0.06em; color:#ff6a52;
    text-shadow:0 2px 10px rgba(0,0,0,0.95), 0 0 18px rgba(220,20,20,0.55); pointer-events:none; opacity:0;
    white-space:nowrap;}
  .neant-boss-banner.neant-boss-banner-play{animation:neant-boss-banner-pop 1.8s ease-out forwards;}
  @keyframes neant-boss-banner-pop{
    0%{opacity:0; transform:translateX(-50%) scale(0.7);}
    12%{opacity:1; transform:translateX(-50%) scale(1.08);}
    22%{transform:translateX(-50%) scale(1);}
    78%{opacity:1;}
    100%{opacity:0; transform:translateX(-50%) scale(1);}
  }
  /* joystick de déplacement en bas à gauche (pouce gauche déplace, pouce droit lance les sorts, cf. .neant-skills-wrap) ;
     tactile uniquement (cf. neantStart) */
  .neant-joystick{position:absolute; left:42px; bottom:18px; width:104px; height:104px; z-index:20; touch-action:none;}
  .neant-joystick-base{position:absolute; inset:0; border-radius:50%; background:rgba(20,28,23,0.55); border:2px solid var(--gold-dim);}
  .neant-joystick-stick{position:absolute; width:44px; height:44px; left:50%; top:50%; margin:-22px 0 0 -22px; border-radius:50%; background:rgba(201,162,75,0.8); border:2px solid var(--gold); transition:transform 0.05s linear;}

  /* sorts actifs (cf. NEANT_SKILLS), entièrement automatiques : « Vague Arcanique » (toutes les 0,5 s) n'a pas de bouton,
     seul le Bouclier Sacré (toutes les 30 s) garde le sien */
  /* sorts calés en bas à droite (pouce droit) pour ne pas chevaucher le joystick : à 360 px, joystick 42-146 px, sorts
     154-348 px, soit 8 px d'écart */
  .neant-skills-wrap{position:absolute; right:12px; bottom:18px; width:auto; height:auto; z-index:20;
    display:flex; align-items:center; gap:10px; pointer-events:none;}
  .neant-skill-btn{position:relative; border-radius:50%; background:rgba(20,28,23,0.55); border:2px solid var(--gold-dim);
    display:flex; align-items:center; justify-content:center; padding:0; pointer-events:none;}
  .neant-skill-btn img{width:66%; height:66%; object-fit:contain; pointer-events:none; user-select:none; border-radius:50%;}
  .neant-skill-btn:active{background:rgba(201,162,75,0.35); border-color:var(--gold);}
  .neant-skill-btn-shield{width:92px; height:92px; border-color:#e8c94a;}
  /* sort en recharge : assombri, avec le temps restant (secondes, arrondi) affiche au centre */
  .neant-skill-btn.on-cd{background:rgba(8,10,8,0.75);}
  .neant-skill-btn.on-cd img{opacity:0.35;}
  .neant-skill-cd-text{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--gold); text-shadow:0 1px 4px rgba(0,0,0,0.9); pointer-events:none;}

  /* « Retour dans le Temps » (cf. NEANT_REWIND_*, neantUseRewind) : seul bouton du kit cliquable (pointer-events:auto, le
     reste en none) ; pulsation dorée tant qu'il est disponible, utilisable une seule fois par traversée */
  .neant-skill-btn-rewind{width:92px; height:92px; border-color:#e8c94a; pointer-events:auto; cursor:pointer;
    box-shadow:0 0 10px rgba(232,201,74,0.55), inset 0 0 8px rgba(232,201,74,0.25);
    animation:neant-rewind-pulse 1.8s ease-in-out infinite;}
  .neant-skill-btn-rewind:active{background:rgba(201,162,75,0.35); border-color:var(--gold);}
  /* consomme (cf. neantState.rewindAvailable) : assombri et desactive pour le reste de la traversee,
     jusqu'au prochain Reessayer/nouvelle entree dans l'arene (cf. neantResetCombatState). */
  .neant-skill-btn-rewind.used{pointer-events:none; cursor:default; animation:none;
    box-shadow:none; background:rgba(8,10,8,0.75); border-color:var(--gold-dim);}
  .neant-skill-btn-rewind.used img{opacity:0.3; filter:grayscale(0.85);}
  /* petit badge "&" (cf. neantUseRewind, ecouteur clavier dans script.js) : seul sort du kit
     activable au clavier, d'ou ce rappel visuel absent des autres boutons (purement decoratifs). */
  .neant-skill-key-hint{position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 3px;
    border-radius:50%; background:rgba(8,10,8,0.85); border:1px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold);
    pointer-events:none; line-height:1;}
  .neant-skill-btn-rewind.used .neant-skill-key-hint{opacity:0.35; border-color:var(--gold-dim); color:var(--gold-dim);}
  @keyframes neant-rewind-pulse{
    0%,100%{box-shadow:0 0 10px rgba(232,201,74,0.55), inset 0 0 8px rgba(232,201,74,0.25);}
    50%{box-shadow:0 0 22px rgba(232,201,74,0.95), inset 0 0 14px rgba(232,201,74,0.5);}
  }

  /* effet de lancement de « Retour dans le Temps » (cf. neantPlayRewindCastEffect) : gif rejoué une seule fois (cf.
     NEANT_REWIND_CAST_SPRITE) puis retiré du DOM par le minuteur JS ; en coordonnées « monde », reste où le sort a été lancé
     (personnage figé, cf. neantState.moveFreezeTimer) */
  .neant-rewind-cast{position:absolute; top:0; left:0; width:300px; height:300px;
    transform:translate(-50%,-58%); pointer-events:none; z-index:12;}
  /* halo réduit et calque isolé (will-change) par précaution contre un bug de compositing GPU (drop-shadow à large rayon +
     ancêtre #neant-world retransformé par la caméra, cf. neantApplyTransform), comme les autres halos du jeu */
  .neant-rewind-cast img{width:100%; height:100%; object-fit:contain; will-change:filter;
    filter:drop-shadow(0 0 12px rgba(232,201,74,0.6));}

  /* aura du Bouclier Sacré du Néant (cf. neantUpdateShieldAura, repositionnée à chaque frame par neantApplyTransform) :
     z-index 15 pour passer DEVANT .neant-character ; boîte 160 px avec translateY:-100 % = centre à ancrage_y − 80 px, soit
     la ceinture du sprite (≈ 43 % de sa hauteur, hauteur rendue ≈ 171,6 px). */
  /* deux calques : arrière (z 14, sous le personnage z 15) et avant (z 16) ; pas de drop-shadow, l'effet a sa propre lumière */
  /* image fixe (frame 7 de Représailles, dôme complet, assets/neant/skills/bouclier-represailles-*.webp) ; dôme = 1,3 × la
     hauteur du personnage (172 px), centres confondus : k 0,735, boîte 309 px, haut = ancrage − 244 px */
  .neant-shield-aura{position:absolute; top:0; left:0; width:309px; height:309px; transform:translate(-50%,-244px);
    pointer-events:none; z-index:16;}   /* boss : « le personnage doit être centré dedans » → dôme 1,3 × sa hauteur (k 0,735), centres confondus */
  .neant-shield-aura-arriere{z-index:14;}
  /* pas de blur() sur un gif transparent (halo de pixels noirs, alpha non prémultiplié) : le drop-shadow suffit à adoucir le
     contour. will-change isole ce calque filtré de #neant-world, constamment retransformé (même correctif que
     .neant-rewind-cast img). */
  .neant-shield-aura img{width:100%; height:100%; object-fit:contain; display:block;}

  /* colonne de droite de la barre du haut : PV, puis pastilles de bouclier (jaune) juste en
     dessous sur leur propre ligne, puis score */
  .neant-hud-right{display:flex; flex-direction:column; align-items:flex-end; gap:3px; pointer-events:none;}
  .neant-hero-hp-row{display:flex; align-items:center; gap:6px;}

  /* vie du heros : pastilles affichees dans la barre du haut de l'arene Neant (le nombre suit
     neantState.heroMaxHp, qui peut grandir via l'amelioration "Coeur Vaillant") */
  .neant-hero-hp{display:flex; gap:4px; pointer-events:none;}
  /* PV sur 2 lignes quand ils ne tiennent plus entre « Vague » et le bouton son (largeur posée en JS par
     neantUpdateHeroHpUI, pastilles réduites si 2 lignes ne suffisent pas) */
  .neant-hero-hp{flex-wrap:wrap; justify-content:flex-end;}
  /* barre calée en haut ; Retour à 11 px du haut comme sur les autres écrans, « Vague » à la même hauteur (28 px) et centrée
     dessus */
  .neant-topbar{align-items:flex-start;}
  .neant-wave{align-self:flex-start; height:28px; line-height:28px;}
  .neant-hero-hp-pip{width:13px; height:13px; border-radius:50%; background:rgba(8,10,8,0.6); border:1.5px solid var(--gold-dim); box-shadow:0 1px 3px rgba(0,0,0,0.6);}
  .neant-hero-hp-pip.filled{background:#d33a3a; border-color:#f2b6b6;}
  /* PV de bouclier (jaune) accordes par le sort actif "Bouclier Sacre" (cf. NEANT_SKILLS) :
     sur leur propre ligne, juste en dessous des PV normaux (cf. #neant-shield-pips,
     neantUpdateHeroHpUI). */
  .neant-shield-pips{display:flex; gap:4px; pointer-events:none;}
  .neant-hero-hp-pip.shield-pip.filled{background:#e8c94a; border-color:#fff2b8;}

  /* badge de charges de bouclier actives (amelioration "Bouclier"), a cote des PV */
  .neant-shield{font-size:12px; font-weight:600; color:#8fd6ff; text-shadow:0 1px 3px rgba(0,0,0,0.85);}

  /* score : juste en dessous des pastilles de PV (cf. neantAddScore dans script.js) */
  .neant-score{font-size:11px; font-weight:600; color:var(--gold); text-shadow:0 1px 3px rgba(0,0,0,0.8);}

  /* sort jaune (arc) : sprite tourne pour pointer dans la direction de tir, grossit en vol */
  /* pas de filtre drop-shadow ici (cout de rendu trop eleve une fois le sort agrandi jusqu'a
     ~6x sa taille et multiplie par plusieurs sorts + monstres a l'ecran : provoquait des
     ralentissements/artefacts visuels apres un moment de jeu) */
  .neant-projectile{position:absolute; top:0; left:0; width:30px; height:auto; pointer-events:none; will-change:transform;}

  /* boules de feu des mages (type « ranged », cf. neantFireEnemyProjectile) : même sprite que l'orbe du joueur, taille fixe
     (sans grossissement en vol) et légère lueur pour la distinguer */
  .neant-enemy-projectile{position:absolute; top:0; left:0; width:34px; height:auto; pointer-events:none; will-change:transform; filter:drop-shadow(0 0 7px rgba(255,130,40,0.85));}

  /* monstres : sprite + pastilles de vie (2 points) au-dessus de la tete */
  .neant-monster-wrap{position:absolute; top:0; left:0; transform:translate(-50%,-100%); text-align:center; pointer-events:none;}
  /* taille basée sur la HAUTEUR (76px) : les sprites ont des canevas de formats différents (larges : lézard, araignée ;
     hauts), une largeur fixe rendait certains monstres trop petits ; la hauteur uniformise la taille apparente */
  .neant-monster-sprite{display:block; height:76px; width:auto; margin:0 auto; filter:drop-shadow(0 5px 5px rgba(0,0,0,0.6)); user-select:none;}
  /* miroir horizontal vers le sens de déplacement (cf. neantSetMonsterFacing/neantUpdateMonsters), appliqué sur le <img> et
     non sur .neant-monster-wrap pour ne pas interférer avec sa transform de positionnement ni l'animation de mort */
  .neant-monster-sprite.facing-left{transform:scaleX(-1);}
  .neant-monster-hp{display:flex; justify-content:center; gap:4px; margin-bottom:3px;}
  .neant-monster-hp-pip{width:9px; height:9px; border-radius:50%; background:rgba(8,10,8,0.65); border:1px solid #7a6a3a;}
  .neant-monster-hp-pip.filled{background:#e2b23b; border-color:#fff3c0;}
  .neant-monster-wrap.dying{animation:neant-monster-shake 0.35s ease-out forwards;}

  /* ===== boss (tous les 10 niveaux, cf. neantSpawnBoss) : sprite dédié plus large que haut (l'arme s'étend sur le côté),
     agrandi + halo rouge, avec barre de vie propre (plus lisible que des pastilles à PV élevés) ===== */
  .neant-monster-sprite.boss{
    width:230px;
    filter:drop-shadow(0 12px 12px rgba(0,0,0,0.75)) drop-shadow(0 0 22px rgba(220,20,20,0.85));
  }
  .neant-monster-sprite.boss.facing-left{transform:scaleX(-1);}
  .neant-boss-hp-wrap{display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:5px;}
  .neant-boss-hp-label{font-size:10px; font-weight:700; letter-spacing:0.1em; color:#ff5b4d; text-shadow:0 1px 3px rgba(0,0,0,0.95);}
  .neant-boss-hp-bar{width:104px; height:8px; border-radius:4px; background:rgba(10,8,8,0.78); border:1px solid #7a2a22; overflow:hidden;}
  .neant-boss-hp-fill{height:100%; width:100%; background:linear-gradient(90deg,#ff7a4d,#c81c1c); transition:width 0.15s ease-out;}
  /* rafale en cercle du boss ("cercles de boules") : meme sprite que les boules de feu des mages,
     teinte plus rouge/vive pour rester lisible au milieu d'un ecran deja charge. */
  .neant-enemy-projectile.boss-orb{filter:drop-shadow(0 0 10px rgba(255,40,20,0.95)) hue-rotate(-20deg) saturate(1.7);}
  @keyframes neant-monster-shake{
    0%{transform:translate(-50%,-100%) rotate(0deg); opacity:1;}
    20%{transform:translate(calc(-50% - 6px),-100%) rotate(-8deg); opacity:1;}
    40%{transform:translate(calc(-50% + 6px),-100%) rotate(8deg); opacity:0.9;}
    60%{transform:translate(calc(-50% - 4px),-100%) rotate(-6deg); opacity:0.6;}
    80%{transform:translate(calc(-50% + 4px),-100%) rotate(6deg); opacity:0.3;}
    100%{transform:translate(-50%,-100%) rotate(0deg); opacity:0;}
  }

  /* ecran d'echec : le heros a perdu ses 6 points de vie */
  .neant-gameover{position:absolute; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(5,6,5,0.78);}
  .neant-gameover-text{font-family:var(--font-display); font-size:32px; font-weight:700; letter-spacing:2px; color:#e2503a; text-shadow:0 2px 10px rgba(0,0,0,0.8);}
  /* victoire d'une Tour du Neant (cf. neantGauntletVictory dans script.js) : meme ecran, texte dore plutot que rouge */
  .neant-gameover.gauntlet-victory .neant-gameover-text{color:#e8c15a;}
  .neant-gameover-actions{display:flex; gap:10px;}

  /* ecran de choix d'amelioration : toutes les 5 vagues (cf. NEANT_UPGRADE_WAVE_INTERVAL dans
     script.js), le jeu se met en pause et propose 4 cartes tirees au hasard ; un clic sur l'une
     d'elles applique son effet et referme l'ecran (cf. neantOpenUpgradeChoice). */
  .neant-upgrade-overlay{position:absolute; inset:0; z-index:45; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:16px; background:rgba(5,6,5,0.86);}
  .neant-upgrade-title{font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:1px; color:var(--gold); text-shadow:0 2px 8px rgba(0,0,0,0.8); text-align:center;}
  .neant-upgrade-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; width:100%; max-width:380px;}
  .neant-upgrade-card{position:relative; aspect-ratio:420/595; padding:0; border:none; background:url('assets/neant/upgrade-card-frame.webp') center/100% 100% no-repeat; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .neant-upgrade-card:active{transform:scale(0.96);}
  .neant-upgrade-card-inner{position:absolute; top:15%; left:13%; right:13%; bottom:15%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:5px; overflow:hidden; text-align:center;}
  .neant-upgrade-card-icon{width:38px; height:38px; object-fit:contain; margin-top:4px; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.7));}
  .neant-upgrade-card-glyph{width:38px; height:38px; margin-top:4px; font-size:30px; line-height:38px;}
  .neant-upgrade-card-name{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--gold); margin-top:2px;}
  .neant-upgrade-card-desc{font-size:8.5px; line-height:1.35; color:var(--ink-dim); text-shadow:0 1px 2px rgba(0,0,0,0.7);}

  /* ===== écran « Jouer » : pièce-hub, déplacement gauche/droite (cf. hubStep/hubApplyTransform). Comme l'arène du Néant,
     mais le monde est mis à l'échelle pour remplir la hauteur du viewport et la caméra se cale sur les bords de l'image
     ===== */
  #screen-hub{aspect-ratio:941/1672; position:relative; background:#05060a; overflow:hidden;}
  .hub-topbar{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:8px; padding:10px 56px 10px 12px; background:linear-gradient(rgba(8,10,8,0.88), rgba(8,10,8,0)); z-index:5;}
  .hub-topbar button.ctrl{background:rgba(20,28,23,0.75); border-color:var(--gold-dim);}
  .hub-viewport{position:absolute; inset:0; overflow:hidden; cursor:pointer;}
  .hub-world{position:absolute; top:0; left:0; background-image:url('assets/hub/hub-room.jpg'); background-size:100% 100%; background-repeat:no-repeat;}
  .hub-character{position:absolute; width:auto; pointer-events:none; filter:drop-shadow(0 6px 6px rgba(0,0,0,0.55)); user-select:none;}
  .hub-hint{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:10.5px; color:var(--ink-dim); text-shadow:0 1px 4px rgba(0,0,0,0.9); z-index:5; pointer-events:none;}

  /* points d'intérêt cliquables (carte, portail, pupitre, mannequin) : seule l'icône est cliquable, posée en JS au point du
     décor (HUB_HOTSPOTS) ; estompée par défaut, illuminée (classe .active en JS) quand le personnage est à proximité */
  .hub-hotspot{position:absolute; padding:0; border:none; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center;}
  .hub-hotspot-icon{width:38px; height:auto; max-height:48px; object-fit:contain; pointer-events:none; user-select:none; filter:grayscale(90%) brightness(0.45) drop-shadow(0 2px 4px rgba(0,0,0,0.7)); opacity:0.68; transform:scale(1); transition:filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;}
  .hub-hotspot.active .hub-hotspot-icon{filter:grayscale(0%) brightness(1.2) drop-shadow(0 0 12px rgba(201,162,75,0.9)); opacity:1; transform:scale(1.18); animation:hub-marker-bob 1.6s ease-in-out infinite;}
  @keyframes hub-marker-bob{0%,100%{transform:scale(1.18) translateY(0);} 50%{transform:scale(1.18) translateY(-4px);}}

  /* ===== cases de personnage du Manoir et de la Cour (cf. .chara-case/renderCharaBar) : barre hors du monde pannable
     (.hub-world/.cour-world), donc toujours visible ; le clic ouvre l'équipement du mode Test (#screen-tequip) ; pas de
     pop-up de stats au survol ici (seulement sur le plateau) ===== */
  .chara-case-bar{position:absolute; top:50%; left:10px; transform:translateY(-50%); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; z-index:6; pointer-events:none;}
  .chara-case{position:relative; pointer-events:auto; width:44px; aspect-ratio:1/1.05; border-radius:7px; border:1px solid var(--gold-dim); background:rgba(10,14,11,0.7); overflow:hidden; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.55); transition:transform 0.15s ease, border-color 0.15s ease;}
  .chara-case:hover{transform:translateX(3px) scale(1.08); border-color:var(--gold);}
  .chara-case-portrait{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; user-select:none;}
  .chara-case-level{position:absolute; top:2px; right:2px; min-width:13px; height:13px; padding:0 2px; border-radius:4px; background:var(--gold); color:#1b160a; font-size:7.5px; font-weight:800; line-height:13px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.6);}
  /* bouton Inventaire, dernier élément de la barre ajoutée par renderCharaBar : reprend .chara-case
     (dimensions/bordure/hover) mais centre une icône de sac à dos avec une petite marge, au lieu d'un portrait rogné en
     object-fit:cover. */
  /* barre de vie d'un cadre de personnage (Manoir, Cour, map de zone et roster de combat) :
     l'equipe garde ses PV d'un duel a l'autre (cf. zone.js), il faut donc les voir partout. */
  .case-hp{position:absolute; left:2px; right:2px; bottom:2px; height:3px; border-radius:2px; background:rgba(0,0,0,0.65); overflow:hidden;}
  .case-hp-fill{height:100%; width:100%; background:linear-gradient(90deg,#4fbf6a,#7ee09a); transition:width 0.3s ease;}
  .case-hp-fill.moyen{background:linear-gradient(90deg,#c9a24b,#e3c47c);}
  .case-hp-fill.bas{background:linear-gradient(90deg,#a3453f,#d4665e);}
  .chara-case.ko .chara-case-portrait{filter:grayscale(1) brightness(0.55);}
  .chara-case.ko{border-color:var(--crimson-dim);}
  .chara-case-inv{display:flex; align-items:center; justify-content:center;}
  .chara-case-inv img{width:74%; height:74%; object-fit:contain; user-select:none;}
  /* Potion de Savoir (map du portail, sous l'Inventaire) : stock en coin, minuteur en bandeau quand active */
  .chara-case-potxp{display:flex; align-items:center; justify-content:center;}
  .chara-case-potxp img{width:78%; height:78%; object-fit:contain; user-select:none;}
  .chara-case-potxp.vide img{filter:grayscale(1); opacity:0.45;}
  .chara-case-potxp.actif{border-color:#e8c94a; box-shadow:0 0 10px rgba(232,201,74,0.8);}
  .potxp-count{position:absolute; right:3px; bottom:1px; font-size:9px; font-weight:800; color:#fff; text-shadow:0 0 3px #000, 0 0 2px #000;}
  .potxp-timer{position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:8px; font-weight:800; color:#ffe27a; background:rgba(0,0,0,0.65); line-height:11px;}
  /* petit point d'exclamation : amélioration de stuff en poche ou points de compétence non dépensés (cf.
     tactRoleNeedsAttention/tactEquipSlotHasUpgrade/tactRoleHasSkillPoints).
     Coin bas-droit, à l'opposé de .chara-case-level (haut-droit), remonté à 6px pour ne pas empiéter sur .case-hp. Placé EN
     DEDANS du cadre : .chara-case a overflow:hidden, un badge à cheval serait coupé.
     Réutilisé sur .chara-case, .tequip-tab et .tequip-skills-btn. Sur .tequip-slot, le coin bas-droit est pris par
     .forge-slot-pct : on utilise .attn-badge-haut (haut-droit, cf. slotWrapHtml). */
  .attn-badge{position:absolute; bottom:6px; right:2px; width:11px; height:11px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #ff8a80, #d32f2f 70%); border:1px solid #7a0000;
    color:#fff; font-family:var(--font-display); font-size:8px; font-weight:800; line-height:10px;
    text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.7); pointer-events:none; z-index:2;}
  .attn-badge.attn-badge-haut{bottom:auto; right:2px; top:2px;}
  /* contrairement à .chara-case, .tequip-tab n'a pas overflow:hidden : le badge sort légèrement du cadre pour ne pas
     recouvrir la fin du nom du personnage (6,5px) sous le portrait. */
  .tequip-tab .attn-badge{bottom:-3px; right:-3px;}

  /* ===== écran Équipement (accessible depuis le mannequin du hub) : personnage au centre, cases d'équipement de part et
     d'autre. ===== */
  #screen-equip{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/ui/equip-pantin-bg.jpg') no-repeat center; background-size:cover; display:flex; flex-direction:column;} /* fond dedie fourni par l'utilisateur (941x1672, meme ratio que l'ecran, arsenal medieval) - ne reutilise plus equip-bg.jpg (toujours utilise par #screen-tequip) */
  .equip-topbar{position:relative; display:flex; align-items:center; gap:8px; padding:10px 56px 10px 12px; background:rgba(20,28,23,0.5);}
  .equip-topbar button.ctrl{background:rgba(20,28,23,0.75); border-color:var(--gold-dim);}
  .equip-body{flex:1; display:flex; align-items:stretch; justify-content:center; gap:8px; padding:24px 14px;}
  .equip-col{display:flex; flex-direction:column; justify-content:space-evenly; flex:0 0 auto;}
  /* personnage réduit pour laisser plus de place aux cases d'équipement de part et d'autre, qui sont plus grandes. */
  .equip-character{flex:1; display:flex; align-items:center; justify-content:center; padding:0 6px; max-width:165px;}
  .equip-character img{width:100%; height:auto; filter:drop-shadow(0 10px 16px rgba(0,0,0,0.6));}
  /* etiquette au-dessus du cadre (et non plus dedans, en dessous de l'icone) : chaque case est un
     petit bloc vertical, libelle centre puis case juste en dessous. */
  .equip-slot-wrap{display:flex; flex-direction:column; align-items:center; gap:3px;}
  .equip-slot{position:relative; width:68px; height:68px; border-radius:10px; border:2px dashed var(--gold-dim); background:rgba(20,28,23,0.55); display:flex; align-items:center; justify-content:center; color:var(--ink-dim);}
  .equip-slot-icon{font-size:21px; display:flex; align-items:center; justify-content:center;}
  .equip-slot:not(.filled) .equip-slot-icon{opacity:0.55;}
  .equip-slot-label{font-size:7.5px; font-weight:600; letter-spacing:0.02em; text-align:center; color:var(--ink-dim); padding:0 2px; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);}
  /* case pourvue d'un objet (icône image) : pas de cadre dur, juste une lueur dorée douce. Icône carrée pleine opacité avec
     ses propres coins arrondis (les tuiles assets/equip/* gardent leur fond dégradé doré) ; 54px car le libellé est placé
     au-dessus de la case. */
  .equip-slot.filled{border-color:transparent; box-shadow:0 0 14px rgba(232,201,74,0.4);}
  .equip-slot-icon img{width:54px; height:54px; object-fit:contain; border-radius:6px; opacity:1;
    filter:drop-shadow(0 0 6px rgba(232,201,74,0.55));}

  /* ===== stock de composants et amélioration des cases (cf. renderEquipScreen/computeEquipBonuses) : barre « bannière »
     sous le titre, dans l'esprit de .db-fragments/#btn-upgrade-mode du deck-builder. ===== */
  .equip-materials{position:relative; z-index:2; display:flex; align-items:center; gap:10px; padding:8px 12px; margin:8px 12px 0; background:rgba(10,14,20,0.62); border:1px solid var(--gold-dim); border-radius:8px; flex-wrap:wrap; box-shadow:0 4px 14px rgba(0,0,0,0.45);}
  .mat-pill{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--ink); font-weight:600;}
  .mat-pill img{width:22px; height:22px; object-fit:contain; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.7));}
  #btn-equip-upgrade{margin-left:auto; background:none; border:none; padding:0; cursor:pointer;}
  #btn-equip-upgrade img{height:24px; width:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6));}
  #btn-equip-upgrade:hover img{filter:drop-shadow(0 2px 6px rgba(201,162,75,0.6)) brightness(1.08);}
  #btn-equip-upgrade.active{font-family:var(--font-display); font-size:10.5px; font-weight:700; color:var(--gold); background:rgba(201,162,75,0.12); border:1px solid var(--gold); border-radius:6px; padding:6px 10px; white-space:nowrap;}

  /* case cliquable pendant le mode amelioration (cf. equipUpgradeMode) + pastille de niveau,
     toujours visible (cf. equip-slot-lvl, ajoutee/mise a jour en JS). */
  .equip-slot.upgrade-mode{cursor:pointer;}
  .equip-slot.upgrade-mode:hover{box-shadow:0 0 14px rgba(232,201,74,0.75); border-color:var(--gold);}
  .equip-slot.maxed{box-shadow:0 0 14px rgba(120,220,255,0.65);}
  /* pantin vide (16 sept.) : case sans objet = cadre pointille vide ; mode Neant verrouille = pierre grisee */
  .equip-slot.vide{box-shadow:none; border-color:var(--gold-dim); background:rgba(10,12,10,0.55);}
  .equip-slot-icon.hidden, .equip-slot-lvl.hidden{display:none;}
  #equip-upgrade-icon.equip-non-obtenu{filter:grayscale(1) brightness(0.45);}
  .coffre-ligne.coffre-pantin{color:#f3dc8a; font-weight:700;}
  .equip-slot-lvl{position:absolute; bottom:-5px; right:-5px; font-family:var(--font-display); font-size:8.5px; font-weight:700; color:#1b160a; background:var(--gold); border-radius:6px; padding:1px 4px; line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,0.6); pointer-events:none;}

  /* panneau d'amelioration d'une case : meme gabarit que .synergy-popup (cf. plus haut) pour
     rester visuellement coherent avec le reste du jeu. */
  .equip-upgrade-backdrop{position:absolute; inset:0; z-index:90; background:rgba(5,6,5,0.72); display:flex; align-items:center; justify-content:center; padding:24px;}
  .equip-upgrade-panel{width:230px; background:#141c17; border:1px solid var(--gold-dim); border-radius:14px; padding:18px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; box-shadow:0 8px 30px rgba(0,0,0,0.6);}
  .equip-upgrade-close{position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--panel-line); color:var(--ink-dim); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .equip-upgrade-close:hover{border-color:var(--gold-dim); color:var(--ink);}
  .equip-upgrade-icon-wrap img{width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(232,201,74,0.55));}
  .equip-upgrade-name{font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--gold); margin-top:8px;}
  .equip-upgrade-level{font-size:11px; color:var(--ink); margin-top:4px;}
  .equip-upgrade-level b{color:var(--gold);}
  .equip-upgrade-cost{display:flex; align-items:center; gap:6px; margin-top:12px; font-size:11px; color:var(--ink);}
  .equip-upgrade-cost img{width:22px; height:22px; object-fit:contain;}
  .equip-upgrade-cost.insufficient{color:#e07a6c;}
  .equip-upgrade-maxed{margin-top:10px; font-size:10.5px; color:var(--gold); font-weight:600;}
  .equip-slot{cursor:pointer;}
  .equip-upgrade-info{margin-top:8px; display:flex; flex-direction:column; gap:3px; font-size:10px; color:var(--ink); text-align:center;}
  .equip-upgrade-info b{color:var(--gold);}
  .equip-info-suite, .equip-info-rarete{color:var(--ink-dim); font-size:9.5px;}
  .equip-info-note{margin-top:3px; font-size:9px; color:#b9a6e8; font-style:italic;}
  .equip-upgrade-confirm{margin-top:14px; font-family:var(--font-display); font-size:12px; font-weight:700; background:var(--gold-dim); border:1px solid var(--gold); color:#1b160a; border-radius:8px; padding:9px 18px; cursor:pointer;}
  .equip-upgrade-confirm:disabled{background:rgba(255,255,255,0.06); border-color:var(--panel-line); color:var(--ink-dim); cursor:not-allowed;}

  /* ===== écran Équipement du MODE TEST (#screen-tequip, cf. TACT_EQUIP_SETS) : système PARALLÈLE et indépendant de l'écran
     Équipement ci-dessus. Onglets par personnage, rangée cases + portrait, tableau de stats Base/Équipement/Set/Final et
     paliers de bonus de set, empilés verticalement pour exploiter la hauteur portrait. ===== */
  #screen-tequip{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/ui/equip-bg.jpg') no-repeat right bottom; background-size:cover; display:flex; flex-direction:column;} /* fond remplace par une salle d'armurerie fournie par l'utilisateur (941x1672, meme ratio que l'ecran - "Image 2 devient le fond d'equipement") */
  /* flex-wrap:wrap pour les niveaux de métier : Jardin/Vers à soie/Atelier de taille ajoutent une .metier-xp-row comme
     DERNIER enfant de cette barre (pas un frère, cf. index.html) car #screen-jardin/#screen-vers/#screen-pierre
     .tequip-topbar sont en position:absolute. Avec .metier-xp-row{flex:1 0 100%}, elle retombe sur une 2e ligne dans la
     barre. Sans effet sur les autres écrans, dont le contenu tient sur une ligne. */
  .tequip-topbar{position:relative; display:flex; align-items:center; gap:8px; padding:10px 56px 10px 12px; background:rgba(20,28,23,0.5); flex-wrap:wrap;}
  /* pas de « description de zone » en haut des pages : les libellés de titre (Équipement, Compétences, Forgeron, Inventaire,
     Jardin, Mode Tactique, nom de la map…) ne sont jamais affichés, seule la barre avec son bouton Retour reste. Éléments
     conservés dans le DOM (zone.js lit #monde-titre pour le titre d'un duel). Règle valable pour toute nouvelle page. */
  .tequip-topbar-title, .tact-topbar-title, .monde-titre{display:none !important;}

  .tequip-tabs{display:flex; justify-content:center; gap:5px; padding:8px 10px; flex-wrap:wrap;}
  .tequip-tab{position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; width:46px; padding:4px 2px; background:rgba(20,28,23,0.6); border:1px solid var(--gold-dim); border-radius:8px; cursor:pointer; color:var(--ink-dim); transition:border-color 0.15s, background 0.15s;}
  .tequip-tab img{width:26px; height:26px; object-fit:cover; object-position:top center; border-radius:5px;}
  .tequip-tab span{font-size:6.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .tequip-tab:hover{border-color:var(--gold);}
  .tequip-tab.active{background:rgba(201,162,75,0.16); border-color:var(--gold); color:var(--gold); box-shadow:0 0 10px rgba(201,162,75,0.35);}

  /* aucun defilement (regle des cadres, C9) : les deux panneaux du bas gardent leur hauteur, la
     rangee d'equipement prend ce qui reste et le personnage s'y adapte (cf. .tequip-portrait) */
  .tequip-body{flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:4px 12px 10px; overflow:hidden;}
  /* le personnage d'illustration reste modeste : la rangee ne prend jamais plus de 42 % de la
     page, le sprite s'y adapte (demande du boss, 15 sept. : « retrecis les personnages ») */
  .tequip-gear-row{flex:1 1 auto; min-height:0; max-height:42%; display:flex; align-items:stretch; justify-content:center; gap:4px;}
  .tequip-col{display:flex; flex-direction:column; justify-content:space-evenly; gap:2px; flex:0 0 auto; min-height:0;}
  .tequip-character{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0 4px; max-width:124px;}
  /* max-height (en vh, lié à la hauteur réelle de la fenêtre) + max-width + object-fit:contain bornent l'image dans les deux
     dimensions : le personnage est TOUJOURS visible de la tête aux pieds, sans rognage ni défilement, même sur un écran
     moins haut que large (#tequip-body a un aspect-ratio fixe, cf. #screen-tequip). */
  .tequip-portrait-wrap{position:relative; flex:1 1 auto; min-height:0; max-width:100%; display:flex; align-items:center; justify-content:center;}
  /* pas de coin arrondi ni de recadrage sur le sprite : ses bords (pointe de l'epee du Berserker,
     bottes) touchent deja le bord de l'image, un border-radius les rognait */
  .tequip-portrait{width:auto; height:100%; max-width:100%; max-height:100%; object-fit:contain; border-radius:0; box-sizing:border-box; filter:drop-shadow(0 10px 16px rgba(0,0,0,0.6));}
  .tequip-level{position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 4px; border-radius:6px; background:var(--gold); color:#1b160a; font-size:10px; font-weight:800; line-height:18px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,0.6);}
  .tequip-name{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--gold); text-align:center;}

  .tequip-slot-wrap{display:flex; flex-direction:column; align-items:center; gap:1px;}
  /* cadre de qualité : --tier-color vient de tequipRender, même variable et mêmes couleurs que TACT_EQUIP_TIER_COLOR (popup
     de choix .tequip-popup-case, .tequip-popup-detail-name) : une seule échelle de couleur pour tout le jeu. Gris (Initié),
     vert (Aguerri), bleu (Vétéran), or (Légendaire) selon la pièce réellement portée. */
  .tequip-slot{position:relative; width:44px; height:44px; border-radius:8px; background:rgba(20,28,23,0.55); border:2px solid var(--tier-color, var(--panel-line)); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 12px var(--tier-color, rgba(232,201,74,0.35)); transition:box-shadow 0.15s, transform 0.15s, border-color 0.15s;}
  .tequip-slot:hover{box-shadow:0 0 16px var(--tier-color, rgba(232,201,74,0.7)); transform:translateY(-1px);}
  /* object-fit:contain (et non cover) : montre toujours l'objet en entier et centré, sans rogner les objets non carrés
     (bottes, épées…). */
  .tequip-slot img{width:36px; height:36px; object-fit:contain; border-radius:5px; filter:drop-shadow(0 0 5px var(--tier-color, rgba(232,201,74,0.5)));}
  .tequip-slot-label{font-size:6.5px; line-height:1.1; font-weight:600; letter-spacing:0.02em; text-align:center; color:var(--ink-dim); padding:0 2px; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,0.9);}

  .tequip-stats-panel, .tequip-setbonus-panel{flex:0 0 auto; background:rgba(10,14,20,0.55); border:1px solid var(--gold-dim); border-radius:10px; padding:9px 11px;}
  .tequip-stats-title, .tequip-setbonus-title{font-family:var(--font-display); font-size:10px; font-weight:700; color:var(--gold); margin-bottom:5px;}
  .tequip-setbonus-title span{color:var(--ink); font-weight:600;}
  .tequip-stats-row{display:grid; grid-template-columns:1.5fr 0.8fr 1fr 0.8fr 1fr 1.1fr; gap:4px;   /* 28/09 : colonne Glyphes */ font-size:9.5px; color:var(--ink); padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.06); text-align:right;}
  .tequip-stats-row span:first-child{text-align:left; color:var(--ink-dim); font-weight:600;}
  .tequip-stats-row.tequip-stats-head{color:var(--gold-dim); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; border-bottom-color:var(--gold-dim);}
  .tequip-stats-final{color:var(--gold); font-weight:700;}
  .tequip-stat-cap-note{font-size:0.72em; font-weight:500; opacity:0.85; color:var(--gold);}   /* 28/09 : multiplicateur de critique réel */
  .tequip-stats-gly span:first-child{color:var(--ink-dim); font-weight:500;}

  .tequip-setbonus-list{display:flex; flex-direction:column; gap:4px;}
  .tequip-setbonus-row{display:flex; align-items:center; gap:8px; font-size:9.5px; padding:4px 6px; border-radius:6px; background:rgba(255,255,255,0.03); color:var(--ink-dim); opacity:0.55;}
  .tequip-setbonus-row.active{opacity:1; color:var(--ink); background:rgba(201,162,75,0.1); border:1px solid var(--gold-dim);}
  .tequip-setbonus-count{flex:0 0 auto; font-family:var(--font-display); font-weight:700; color:var(--gold); font-size:9.5px; white-space:nowrap;}
  .tequip-setbonus-row:not(.active) .tequip-setbonus-count{color:var(--ink-dim);}

  /* popup de changement de stuff : la case cliquée ouvre la liste des 4 tiers de CETTE case ; toujours ancré en bas du cadre
     (.screen est position:relative), sans jamais dépasser (règle des cadres, C9). */
  .tequip-item-popup{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:30; width:250px; max-height:calc(100% - 60px); display:flex; flex-direction:column; background:#141c17; border:1px solid var(--gold-dim); border-radius:12px; padding:14px 12px 12px; box-shadow:0 8px 26px rgba(0,0,0,0.6);}
  .tequip-item-popup-close{position:absolute; top:6px; right:8px; background:none; border:none; color:var(--ink-dim); font-size:14px; cursor:pointer;}
  .tequip-item-popup-close:hover{color:var(--gold);}
  .tequip-item-popup-slotlabel{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--gold); text-align:center; margin-bottom:8px;}
  /* grille de cases carrées (icône seul, même gabarit que .forge-stone-cell/.inventaire-pill), une case par pièce possédée ;
     le nom/bonus de la case sélectionnée s'affiche dans .tequip-popup-detail sous la grille. */
  .tequip-item-popup-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(50px,1fr)); gap:6px; overflow-y:auto; min-height:0; align-content:start;}
  /* une case = une pièce réellement possédée pour cette case (ou le stuff de départ à part) : cliquer la SURLIGNE seulement
     (tequipPopupState), l'équipement réel n'a lieu qu'au clic sur « Équipe ». */
  .tequip-popup-case{position:relative; aspect-ratio:1; border-radius:8px; background:rgba(20,28,23,0.55); border:2px solid var(--tier-color, var(--panel-line)); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s, box-shadow 0.15s, transform 0.15s;}
  .tequip-popup-case:hover{transform:translateY(-1px);}
  .tequip-popup-case.selected{background:rgba(201,162,75,0.14); box-shadow:0 0 10px var(--tier-color, rgba(201,162,75,0.6));}
  /* 16 sept. - "place mieux les stuffs dans les cases, centre proprement, qu'ils apparaissent
     complet" -> contain (pas cover) pour ne jamais rogner l'icone dans la popup non plus. */
  .tequip-popup-case img{width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 0 4px rgba(232,201,74,0.4));}
  /* badge de niveau de fusion (coin haut-gauche, meme gabarit que .tequip-slot-fusion-badge) et badge
     de quantite (coin bas-droit, meme gabarit que .forge-stone-count) - affiches uniquement si
     pertinents (fusion>0 / count>1, cf. tequipPopupCaseHtml). */
  .tequip-popup-case-fusion{position:absolute; top:-5px; left:-5px; font-family:var(--font-display); font-size:8px; font-weight:700; color:#1b160a; background:#8fd3ff; border-radius:6px; padding:1px 4px; line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,0.6); pointer-events:none;}
  .tequip-popup-case-count{position:absolute; bottom:-4px; right:-4px; font-family:var(--font-display); font-size:8px; font-weight:700; color:#1b160a; background:var(--gold); border-radius:6px; padding:0 3px; line-height:1.4; box-shadow:0 1px 3px rgba(0,0,0,0.6); pointer-events:none;}
  /* separateur entre les pieces possedees (triees par puissance decroissante) et le stuff de depart
     (tier 1, toujours disponible, cf. tequipRenderItemPopupList) - grid-column:1/-1 pour occuper
     toute la largeur de la grille comme un vrai titre de section. */
  .tequip-popup-case-sep{grid-column:1/-1; font-family:var(--font-display); font-size:8.5px; font-weight:700; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.04em; padding:4px 2px 1px; border-top:1px solid var(--panel-line); margin-top:2px;}
  /* bandeau de detail (nom + bonus) de la case actuellement selectionnee dans la grille au-dessus,
     cf. tequipRenderItemPopupDetail/forgeRenderFusionPopupDetail dans script.js. */
  .tequip-popup-detail{flex:0 0 auto; min-height:26px; padding:4px 2px 0; text-align:center;}
  .tequip-popup-detail-name{font-family:var(--font-display); font-size:10.5px; font-weight:700; color:var(--tier-color, var(--gold));}
  .tequip-popup-detail-bonus{font-size:8.5px; color:var(--ink-dim); line-height:1.3; margin-top:1px;}
  .tequip-item-popup-actions{display:flex; gap:8px; margin-top:10px; flex:0 0 auto;}
  .tequip-popup-btn{flex:1; font-family:var(--font-display); font-size:10px; font-weight:700; padding:7px 4px; border-radius:8px; cursor:pointer; border:1px solid var(--gold-dim);}
  .tequip-popup-btn-retour{background:rgba(255,255,255,0.04); color:var(--ink-dim);}
  .tequip-popup-btn-retour:hover{color:var(--ink); border-color:var(--ink-dim);}
  .tequip-popup-btn-equip{background:var(--gold); color:#1b160a;}
  .tequip-popup-btn-equip:hover{box-shadow:0 0 10px rgba(201,162,75,0.5);}

  /* ===== ÉCRAN FORGERON (#screen-forge, cf. forgeOpen/forgeRender). Fond dédié forge-bg.jpg. Même topbar que #screen-tequip
     (.tequip-topbar réutilisée sur .forge-topbar, cf. index.html) ; onglets et cases calqués sur .tequip-tab/.tequip-slot.
     ===== */
  #screen-forge{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/ui/forge-bg.jpg') no-repeat center; background-size:cover; display:flex; flex-direction:column;}
  .forge-tabs{display:flex; justify-content:center; gap:5px; padding:8px 10px; flex-wrap:wrap;}
  .forge-tab{display:flex; flex-direction:column; align-items:center; gap:2px; width:46px; padding:4px 2px; background:rgba(20,28,23,0.6); border:1px solid var(--gold-dim); border-radius:8px; cursor:pointer; color:var(--ink-dim); transition:border-color 0.15s, background 0.15s;}
  .forge-tab img{width:26px; height:26px; object-fit:cover; object-position:top center; border-radius:5px;}
  .forge-tab span{font-size:6.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .forge-tab:hover{border-color:var(--gold);}
  .forge-tab.active{background:rgba(201,162,75,0.16); border-color:var(--gold); color:var(--gold); box-shadow:0 0 10px rgba(201,162,75,0.35);}

  .forge-body{flex:1; display:flex; flex-direction:column; gap:10px; padding:6px 14px 11px; overflow-y:auto;}
  .forge-gear-row{display:flex; align-items:stretch; justify-content:center; gap:8px;}
  .forge-col{display:flex; flex-direction:column; justify-content:space-evenly; gap:8px; flex:0 0 auto;}
  .forge-character{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0 6px; max-width:150px;}
  .forge-portrait{width:auto; height:auto; max-width:100%; max-height:17vh; object-fit:contain; border-radius:8px; filter:drop-shadow(0 10px 16px rgba(0,0,0,0.6));} /* 17vh : le portrait « heal » (plus vertical que les autres rôles) ne doit pas faire déborder #forge-body au niveau
     d'enchantement maximal (149 %) avec de gros stocks de pierres/runes (3 chiffres) */
  .forge-name{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--gold); text-align:center;}

  .forge-slot-wrap{display:flex; flex-direction:column; align-items:center; gap:3px;}
  /* cadre de qualité (--tier-color), même convention que .tequip-slot : reconnaître d'un coup d'oeil le tier de chaque pièce
     équipée depuis le Forgeron. */
  .forge-slot{position:relative; width:52px; height:52px; border-radius:9px; background:rgba(20,28,23,0.55); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 12px var(--tier-color, rgba(232,201,74,0.35)); transition:box-shadow 0.15s, transform 0.15s, border-color 0.15s; border:2px solid var(--tier-color, transparent);}
  .forge-slot:hover{box-shadow:0 0 16px var(--tier-color, rgba(232,201,74,0.7)); transform:translateY(-1px);}
  .forge-slot.selected{border-color:var(--gold); box-shadow:0 0 18px rgba(232,201,74,0.9);}
  .forge-slot img{width:42px; height:42px; object-fit:cover; border-radius:6px; filter:drop-shadow(0 0 5px var(--tier-color, rgba(232,201,74,0.5)));}
  .forge-slot-label{font-size:7px; font-weight:600; letter-spacing:0.02em; text-align:center; color:var(--ink-dim); padding:0 2px; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,0.9);}
  .forge-slot-pct{position:absolute; bottom:-5px; right:-5px; font-family:var(--font-display); font-size:8px; font-weight:700; color:#1b160a; background:var(--gold); border-radius:6px; padding:1px 4px; line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,0.6); pointer-events:none;}
  /* badge « +N » sur une case équipée avec une pièce fusionnée (override, cf. tactEquipResolveSlotItem) : en haut-gauche
     pour ne pas chevaucher .forge-slot-pct (bas-droite, enchantement), les deux pouvant coexister. */
  .tequip-slot-fusion-badge{position:absolute; top:-5px; left:-5px; font-family:var(--font-display); font-size:8px; font-weight:700; color:#1b160a; background:#8fd3ff; border-radius:6px; padding:1px 4px; line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,0.6); pointer-events:none;}
  /* badge Unique (étoile) : coin bas-gauche, seul coin libre sur .tequip-slot (haut-gauche fusion, bas-droite enchantement,
     haut-droite amélioration en poche), .tequip-popup-case (haut-gauche fusion, bas-droite quantité) et .inventaire-case.
     Dégradé or/bronze pour ne pas se confondre avec la fusion (bleu) ni l'enchantement (or uni). */
  .tequip-unique-badge{position:absolute; bottom:-5px; left:-5px; width:15px; height:15px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f6d76a,#a9711f); border-radius:6px; padding:1px; box-shadow:0 1px 3px rgba(0,0,0,0.6); pointer-events:none;}
  .tequip-unique-badge img{width:13px; height:13px; object-fit:contain; display:block;}

  .forge-target-panel, .forge-stones-panel{background:rgba(10,14,20,0.55); border:1px solid var(--gold-dim); border-radius:10px; padding:10px 12px;}
  .forge-target-title, .forge-stones-title{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--gold); margin-bottom:8px;}
  .forge-target-box{min-height:64px; display:flex; align-items:center; justify-content:center;}
  .forge-target-empty{font-size:10px; color:var(--ink-dim); text-align:center; padding:8px;}
  .forge-target-filled{display:flex; align-items:center; gap:10px; width:100%;}
  .forge-target-icon-wrap img{width:52px; height:52px; object-fit:cover; border-radius:8px; filter:drop-shadow(0 0 6px rgba(232,201,74,0.55));}
  .forge-target-info{flex:1; display:flex; flex-direction:column; gap:3px; min-width:0;}
  .forge-target-name{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--gold);}
  .forge-target-bar{width:100%; height:8px; border-radius:4px; background:rgba(10,8,8,0.78); border:1px solid var(--gold-dim); overflow:hidden;}
  .forge-target-bar-fill{height:100%; width:0%; background:linear-gradient(90deg,#ffdf8a,var(--gold)); transition:width 0.3s ease-out;}
  .forge-target-pct{font-size:9.5px; color:var(--ink); font-weight:600;}
  .forge-target-statgain{font-size:9px; color:var(--ink-dim);}
  /* Enchantement et Fusion côte à côte, à demi-largeur chacun (même largeur totale qu'un panneau unique) ; paddings/police
     réduits pour que #forge-body ne déborde pas (scrollHeight/clientHeight). */
  .forge-target-row{display:flex; gap:8px;}
  .forge-target-panel-half{flex:1; min-width:0; padding:7px 8px;}
  .forge-target-panel-half .forge-target-title{margin-bottom:5px; font-size:10px;}
  .forge-target-panel-half .forge-target-box{min-height:52px;}
  .forge-target-panel-half .forge-target-filled{gap:6px;}
  .forge-target-panel-half .forge-target-icon-wrap img{width:36px; height:36px;}
  .forge-target-panel-half .forge-target-name{font-size:9px; line-height:1.15;}
  .forge-target-panel-half .forge-target-statgain{font-size:7.5px; line-height:1.2;}
  .forge-target-panel-half .forge-target-empty{font-size:8.5px; padding:4px;}
  #forge-fusion-box{cursor:pointer; transition:box-shadow 0.15s;}
  #forge-fusion-box:hover{box-shadow:0 0 10px rgba(232,201,74,0.35);}

  /* une SEULE ligne centrée de « cartes » à taille FIXE (étiquette + case 48x48), une par palier, même esprit que les cartes
     de la boutique de pierres brutes (cf. .jardin-seed-pill/pierreRenderShop) : pas de grille en % qui s'étire,
     FORGE_MATERIAL_COLORS n'ayant plus qu'une couleur (Rubis). */
  .forge-stones-grid{display:flex; flex-direction:column; gap:6px;}
  .forge-stones-line{display:flex; justify-content:center; gap:16px; flex-wrap:wrap;}
  .forge-stone-card{display:flex; flex-direction:column; align-items:center; gap:4px;}
  .forge-stone-card-label{font-size:8px; font-weight:700; color:var(--ink-dim); line-height:1.25; text-align:center;}
  .forge-stone-card-label b{display:block; color:var(--gold);}
  .forge-stone-cell{position:relative; width:48px; height:48px; border-radius:8px; background:rgba(20,28,23,0.55); border:2px solid transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color 0.15s, box-shadow 0.15s;}
  .forge-stone-cell img{width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6));}
  .forge-stone-cell:hover:not(.disabled){border-color:var(--gold-dim);}
  .forge-stone-cell.selected{border-color:var(--gold); box-shadow:0 0 12px rgba(232,201,74,0.8);}
  .forge-stone-cell.disabled{cursor:not-allowed; opacity:0.35;}
  .forge-stone-count{position:absolute; bottom:-4px; right:-4px; font-family:var(--font-display); font-size:8px; font-weight:700; color:#1b160a; background:var(--gold); border-radius:6px; padding:0 3px; line-height:1.4; box-shadow:0 1px 3px rgba(0,0,0,0.6); pointer-events:none;}

  /* ligne « Pierre runique » : reste DANS le même panneau que les pierres d'enchantement (séparée par une bordure fine) pour
     ne pas ajouter de hauteur. Cases 48x48 comme .forge-stone-cell ; la place verticale gagnée par les paddings/gaps
     resserrés (.forge-body, .forge-target-panel, .forge-stones-panel) garde tout dans le cadre sans défilement
     (scrollHeight===clientHeight). */
  .forge-rune-row{margin-top:6px; padding-top:6px; border-top:1px solid rgba(232,201,74,0.25);}
  .forge-rune-row-label{font-size:8px; font-weight:700; color:var(--ink-dim); text-align:center; margin-bottom:4px;}
  .forge-rune-row-label span{font-weight:600; opacity:0.75;}
  .forge-rune-line{display:flex; justify-content:center; gap:16px; flex-wrap:wrap;}
  .forge-rune-card{display:flex; flex-direction:column; align-items:center; gap:4px;}
  .forge-rune-card-label{font-size:8px; font-weight:700; color:var(--gold);}
  .forge-rune-cell{position:relative; width:48px; height:48px; border-radius:8px; background:rgba(20,28,23,0.55); border:2px solid transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color 0.15s, box-shadow 0.15s;}
  .forge-rune-cell img{width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6));}
  .forge-rune-cell:hover:not(.disabled){border-color:var(--gold-dim);}
  .forge-rune-cell.selected{border-color:var(--gold); box-shadow:0 0 12px rgba(232,201,74,0.8);}
  .forge-rune-cell.disabled{cursor:not-allowed; opacity:0.35;}
  .forge-rune-count{position:absolute; bottom:-4px; right:-4px; font-family:var(--font-display); font-size:8px; font-weight:700; color:#1b160a; background:var(--gold); border-radius:6px; padding:0 3px; line-height:1.4; box-shadow:0 1px 3px rgba(0,0,0,0.6); pointer-events:none;}

  .forge-enchant-btn{display:flex; flex-direction:column; align-items:center; gap:2px; font-family:var(--font-display); background:var(--gold-dim); border:1px solid var(--gold); color:#1b160a; border-radius:10px; padding:10px 18px; cursor:pointer;}
  .forge-enchant-label{font-size:14px; font-weight:800; letter-spacing:0.04em;}
  .forge-enchant-chance{font-size:9.5px; font-weight:600;}
  .forge-enchant-btn:disabled{background:rgba(255,255,255,0.06); border-color:var(--panel-line); color:var(--ink-dim); cursor:not-allowed;}
  /* ENCHANTER + FUSIONNER côte à côte, chacun à demi-largeur (même empreinte totale que le bouton unique). */
  .forge-actions-row{display:flex; gap:8px;}
  .forge-actions-row .forge-enchant-btn{flex:1; padding:8px 10px;}
  .forge-actions-row .forge-enchant-label{font-size:12px;}

  /* resultat d'une tentative (succes/echec/malus), meme gabarit que .equip-upgrade-panel */
  .forge-result-popup{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:90; width:220px; background:#141c17; border:1px solid var(--gold-dim); border-radius:14px; padding:18px 16px; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,0.6);}
  .forge-result-icon{font-size:34px; line-height:1;}
  .forge-result-icon img.tsi{width:34px; height:34px; vertical-align:middle;}
  .forge-result-text{font-size:11px; color:var(--ink); margin-top:10px; line-height:1.4;}
  .forge-result-close{margin-top:14px; font-family:var(--font-display); font-size:12px; font-weight:700; background:var(--gold-dim); border:1px solid var(--gold); color:#1b160a; border-radius:8px; padding:8px 20px; cursor:pointer;}
  /* le message vide est un enfant de la grille .tequip-item-popup-list (colonnes de 50px) : grid-column:1 / -1 pour qu'il
     occupe toute la largeur, centré sous le titre, au lieu de s'écraser dans la 1re colonne. */
  .forge-fusion-popup-empty{grid-column:1 / -1; justify-self:stretch; font-size:11px; line-height:1.45; color:var(--ink-dim); font-style:italic; padding:8px 10px; text-align:center;}

  /* ===== ÉCRAN ROULETTE (#screen-roulette, cf. rouletteOpen/rouletteRender) : fond plein écran = image de roue
     (assets/ui/roulette-bg.jpg, ratio 941/1672, sans recadrage). Même topbar que Forgeron/Équipement (.tequip-topbar). ===== */
  #screen-roulette{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/ui/roulette-bg.jpg') no-repeat center; background-size:cover; display:flex; flex-direction:column;}
  .roulette-gold-badge{margin-left:auto; font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold); background:rgba(10,14,20,0.75); border:1px solid var(--gold-dim); border-radius:20px; padding:5px 12px; white-space:nowrap;}
  /* position:relative + enfants en position:absolute (%) : même principe que les trous du Jardin (cf.
     GARDEN_HOLE_POSITIONS), pour aligner la case de mise sur le MOYEU de la roue et la zone de loot sur le tapis rouge du
     bas, sans recouvrir la roue. */
  .roulette-body{flex:1; min-height:0; position:relative; padding:6px 16px 10px; overflow:hidden;}
  .roulette-play-btn{display:flex; flex-direction:column; align-items:center; gap:3px; font-family:var(--font-display); background:linear-gradient(180deg,#ffdf8a,var(--gold)); border:2px solid #7a1f1f; color:#1b160a; border-radius:12px; padding:10px 16px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,0.5); margin:0 auto;}
  .roulette-play-label{font-size:15px; font-weight:800; letter-spacing:0.03em;}
  .roulette-play-cost{font-size:9.5px; font-weight:600; opacity:0.85;}
  .roulette-play-btn:disabled{background:rgba(255,255,255,0.08); border-color:var(--panel-line); color:var(--ink-dim); cursor:not-allowed; box-shadow:none;}
  /* case carrée où toucher la pièce misée (sélection tactile plutôt que glisser-déposer HTML5, cf. rouletteState),
     positionnée sur le moyeu de la roue, en pointillés quand vide. */
  .roulette-stake-wrap{position:absolute; top:35%; left:0; right:0; display:flex; justify-content:center;}
  .roulette-stake-slot{width:92px; height:92px; border-radius:14px; background:rgba(10,14,20,0.55); border:2px dashed var(--gold-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 16px rgba(0,0,0,0.5); transition:border-color 0.15s, box-shadow 0.15s;}
  .roulette-stake-slot:has(.roulette-stake-filled:not(.hidden)){border-style:solid; border-color:var(--gold); box-shadow:0 0 16px rgba(232,201,74,0.7);}
  .roulette-stake-empty{font-size:9px; color:var(--ink-dim); text-align:center; padding:6px; text-shadow:0 1px 3px rgba(0,0,0,0.9);}
  .roulette-stake-filled img{width:70px; height:70px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(232,201,74,0.6));}
  /* zone de loot (cf. lootPiecesList) : ancrée sur le tapis rouge en bas de l'image, panneau sombre pour la lisibilité ;
     grille interne EN SCROLL (overflow-y:auto) car le nombre de piles est dynamique et non borné, comme un popup
     (.tequip-item-popup-list) ; l'écran entier ne défile jamais (cf. C9). */
  .roulette-loot-zone{position:absolute; left:16px; right:16px; top:72%; bottom:8px; display:flex; flex-direction:column; background:rgba(10,14,20,0.78); border:1px solid var(--gold-dim); border-radius:12px; padding:7px 10px; overflow:hidden;}
  .roulette-loot-title{font-family:var(--font-display); font-size:10.5px; font-weight:700; color:var(--gold); margin-bottom:5px; text-align:center; flex:0 0 auto;}
  .roulette-loot-grid{flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(58px,1fr)); gap:6px; align-content:start;}
  .roulette-loot-pill{display:flex; flex-direction:column; align-items:center; gap:2px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:4px 3px 3px; cursor:pointer; transition:background 0.15s, box-shadow 0.15s; min-width:0;}
  .roulette-loot-pill:hover{background:rgba(255,255,255,0.08);}
  .roulette-loot-pill.selected{background:rgba(201,162,75,0.18); border-color:var(--gold); box-shadow:0 0 8px rgba(232,201,74,0.5);}
  .roulette-loot-pill img{width:26px; height:26px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));}
  .roulette-loot-count{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:9px; line-height:1.1;}
  .roulette-loot-label{font-size:6px; line-height:1.15; max-height:2.3em; overflow:hidden; font-weight:600; color:var(--ink-dim); text-align:center; text-transform:uppercase; letter-spacing:0.01em;}
  /* cadre de qualité --tier-color (TACT_EQUIP_TIER_COLOR, posé en JS par rouletteRender), comme .tequip-slot/.forge-slot :
     gris Initié, vert Aguerri, bleu Vétéran, or Légendaire. La pièce misée garde le fond doré de sélection, entourée de sa
     couleur de qualité. */
  .roulette-loot-pill{border:2px solid var(--tier-color, rgba(255,255,255,0.08)); box-shadow:0 0 6px var(--tier-color, transparent);}
  .roulette-loot-pill:hover{box-shadow:0 0 10px var(--tier-color, rgba(232,201,74,0.5));}
  .roulette-loot-pill.selected{border-color:var(--tier-color, var(--gold)); box-shadow:0 0 12px var(--tier-color, rgba(232,201,74,0.5)), inset 0 0 0 1px var(--gold);}
  .roulette-loot-pill img{filter:drop-shadow(0 0 4px var(--tier-color, rgba(0,0,0,0.5)));}
  .roulette-stake-slot:has(.roulette-stake-filled:not(.hidden)){border-color:var(--tier-color, var(--gold)); box-shadow:0 0 18px var(--tier-color, rgba(232,201,74,0.7));}
  .roulette-stake-filled img{filter:drop-shadow(0 0 8px var(--tier-color, rgba(232,201,74,0.6)));}
  .roulette-gain{font-weight:700;}

  /* ===== ÉCRAN INVENTAIRE (cf. renderInventoryScreen/inventoryOpen) : regroupe le loot du joueur (fragments de cartes +
     composants d'équipement) en une seule vue. Même habillage que l'écran Équipement du mode Test
     (.tequip-topbar/.tequip-topbar-title réutilisées, fond de #screen-tequip). ===== */
  #screen-inventaire{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/ui/inventaire-bg.jpg') no-repeat center; background-size:cover; display:flex; flex-direction:column;} /* fond dedie fourni par l'utilisateur (941x1672, meme ratio que l'ecran) - ne reutilise plus equip-bg.jpg */
  .inventaire-empty{font-size:9px; color:var(--ink-dim); text-align:center; padding:4px; font-style:italic;}
  /* Sac commun : 6 colonnes, 7 rangees par page pour garder le cadre fixe sur mobile. */
  .inventaire-body{flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:10px; overflow:hidden;}
  #inventaire-sac{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; flex:0 0 auto;}
  .inventaire-case{position:relative; display:flex; align-items:center; justify-content:center; min-width:0; width:100%; aspect-ratio:1; padding:3px; border:1px solid var(--objet-couleur,#4b3e2d); border-radius:5px; background:linear-gradient(145deg,rgba(57,42,28,.65),rgba(11,12,11,.85)); box-shadow:inset 0 1px 5px #0009; cursor:pointer;}
  .inventaire-case img{width:85%; height:85%; object-fit:contain; filter:drop-shadow(0 2px 3px #000); pointer-events:none;}
  .inventaire-case-vide{opacity:.45; cursor:default;}
  .inventaire-case:hover:not(.inventaire-case-vide),.inventaire-case[aria-pressed="true"]{border-color:var(--gold); background:rgba(99,71,30,.55);}
  .inventaire-case:focus-visible{outline:2px solid var(--gold); outline-offset:1px;}
  .inventaire-quantite{position:absolute; bottom:2px; right:3px; color:#fff0d1; font:700 10px var(--font-display); text-shadow:1px 1px 2px #000,-1px -1px 2px #000; pointer-events:none;}
  .inventaire-emoji{font-size:25px;}
  .inventaire-pagination{display:flex; align-items:center; justify-content:center; gap:16px; flex:0 0 auto; color:var(--gold); font-size:12px;}
  .inventaire-pagination button,#inventaire-detail button{border:1px solid var(--gold-dim); border-radius:5px; background:#241b12; color:var(--gold); padding:6px 12px; cursor:pointer; font:inherit;}
  .inventaire-pagination button:disabled{opacity:.3; cursor:default;}
  #inventaire-detail{display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:10px; border-top:1px solid var(--gold-dim); color:var(--ink-dim); font-size:11px; min-height:0; overflow:auto;}
  #inventaire-detail strong{color:var(--gold); font-family:var(--font-display);}
  /* 29/09 : Potion Royale — question Oui / Non dans le cadre de détail (même style que le bouton Valider du pseudo, en plus petit) */
  .inventaire-choix{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .inventaire-question{color:var(--gold); font-weight:700;}
  .inventaire-btn{font-family:var(--font-display); font-size:11px; font-weight:700; padding:3px 12px; border-radius:8px; border:1px solid var(--gold);
    background:linear-gradient(160deg,#f0d27a,#b8862b); color:#2a1d05; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.5);}

  /* ===== ÉCRAN JARDIN (premier « métier » du jeu, cf. jardinOpen/renderJardinScreen). Même convention aspect-ratio (la
     largeur pilote la hauteur) que #screen-tequip/#screen-inventaire ; jardin-fond.jpg est déjà au bon ratio (940/1672).
     ===== */
  #screen-jardin{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/jardin/jardin-fond.jpg') no-repeat center; background-size:cover; display:flex; flex-direction:column; overflow:hidden;}
  /* La topbar est en overlay absolu (hors flux) pour que .jardin-body (inset:0) occupe tout #screen-jardin, soit la même
     boîte que le fond en cover : sinon les % de GARDEN_HOLE_POSITIONS (calculés sur l'image 940x1672) se décalent de plus en
     plus vers le bas. */
  #screen-jardin .tequip-topbar{position:absolute; top:0; left:0; right:0; z-index:5;}
  .jardin-gold-pill{display:flex; align-items:center; gap:4px; background:rgba(10,14,20,0.55); border:1px solid var(--gold-dim); border-radius:20px; padding:4px 10px; font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold); white-space:nowrap;}
  .jardin-gold-icon{font-size:13px;}
  .jardin-gold-icon img.tsi{width:14px; height:14px;}
  .jardin-shop-btn{flex:0 0 auto; font-family:var(--font-display); font-size:11px; font-weight:700; color:#1b160a; background:var(--gold); border:none; border-radius:20px; padding:6px 12px; cursor:pointer; white-space:nowrap;}
  .jardin-shop-btn:hover{filter:brightness(1.08);}
  /* Bouton boutique des écrans métier : bannière assets/ui/btn-boutique.webp à 22px de haut, maximum qui tient sur une ligne
     avec le titre le plus long (#screen-pierre « Atelier de taille » + or à 4 chiffres) ; à 24px le titre passe sur 2 lignes
     dans .tequip-topbar. */
  .jardin-shop-btn.btn-img-plain{background:none; border:none; padding:0;}
  .jardin-shop-btn.btn-img-plain img{height:22px;}

  /* Niveaux de métier partagés par Jardin/Vers à soie/Atelier de taille/Forgeron (cf. metierXpBarHtml, isPremium,
     setPremium). Réutilise .xp-niv/.xp-jauge/.xp-fill de la barre d'XP des compagnons ; .metier-xp-row (flex:1 0 100%)
     occupe sa propre ligne pleine largeur sous la topbar. */
  /* flex:1 0 100% ne vaut que pour .metier-xp-row enfant direct de .tequip-topbar (flex-wrap : Jardin/Vers/Pierre). Sur le
     Forgeron, frère de .forge-topbar dans une colonne flex, il absorberait tout l'espace vertical (~715px) : on garde la
     valeur par défaut (flex:0 1 auto). */
  .tequip-topbar > .metier-xp-row{flex:1 0 100%;}
  /* Largeur fixée à celle de la rangée .tequip-tabs (5 x .tequip-tab 46px + 4 x gap 5px = 250px), centrée par margin:0 auto
     dans .metier-xp-row. */
  .metier-xp-bar{display:flex; align-items:center; gap:5px; width:250px; margin:0 auto; padding-top:2px;}
  /* Override scopé à .metier-xp-bar car .xp-jauge/.xp-fill sont partagés avec la barre d'XP des compagnons : flex:1 pour
     remplir les 250px (et non la largeur de l'écran), hauteur 9px pour une jauge plus épaisse. */
  .metier-xp-bar .xp-jauge{flex:1 1 auto; height:9px; border-radius:4px; border-width:1.5px;}
  .metier-xp-bar .xp-fill{border-radius:3px;}
  .metier-xp-txt{font-size:8px; font-weight:800; color:#1b160a; background:var(--gold); border-radius:3px; padding:0 4px; line-height:11px; white-space:nowrap;}
  /* Bouton de TEST (pas de vraie boutique/paiement dans ce prototype) qui bascule l'abonnement Premium simulé ; même gabarit
     que .jardin-shop-btn.btn-img-plain, liseret doré quand .active. */

  .jardin-body{position:absolute; inset:0; overflow:hidden;}
  .jardin-plots{position:absolute; inset:0;}
  /* Chaque trou est positionné individuellement (left/top inline, cf. GARDEN_HOLE_POSITIONS) : ceux de l'image ne sont pas
     équidistants, une grille CSS uniforme rate des centres. 54 trous (grille 3x3/parcelle) ; transform centre la case sur le
     point ; taille 9%/5.3% sans empiéter sur le voisin (espacement ~10.4%/6%). */
  .jardin-hole{position:absolute; transform:translate(-50%,-50%); width:10%; height:6%; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  /* 29/09 (boss : « il faut appuyer plusieurs fois pour récolter ») : la bulle Arroser/Récolter dépasse du trou (top:-11 %, pointer-events:none),
     un doigt posé sur la bulle tombait à côté de la zone cliquable. ::before = zone tactile invisible, élargie et prolongée vers le haut
     jusqu'à couvrir la bulle ; le trou lui-même passe de 9×5,3 % à 10×6 %. Même chose pour les cases des Vers. */
  .jardin-hole::before, .vers-case::before{content:''; position:absolute; left:-20%; right:-20%; top:-60%; bottom:-20%;}
  /* Plante centrée exactement sur le point du trou, règle unique pour les 54 trous et tous les stades :
     object-position:center, taille 36%. À 82%, l'image remplissait la hauteur de la case, débordait sur l'herbe hors cadre
     et chevauchait les rangées voisines ; à 36%, ni chevauchement ni dépassement du rebord en bois. */
  .jardin-hole-plant{position:absolute; width:36%; height:36%; object-fit:contain; object-position:center; filter:drop-shadow(0 3px 5px rgba(0,0,0,0.5)); pointer-events:none;}
  .jardin-hole-bubble{position:absolute; top:-11%; right:2%; width:52%; height:52%; object-fit:contain; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.6)); animation:jardin-bubble-bob 1.4s ease-in-out infinite; pointer-events:none;}
  @keyframes jardin-bubble-bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
  /* Carré/bac verrouillé (niveau insuffisant ou réservé Premium, cf. metierBedUnlocked) : case grisée et inerte au clic (cf.
     jardinHandleHoleClick/versHandleCaseClick), badge cadenas/couronne au centre avec info-bulle [title]. .jardin-hole-lock
     est réutilisée par Vers à soie (cf. versBuildCasesDom) ; seul le conteneur diffère (.jardin-hole-locked vs
     .vers-case-locked), les cases n'ayant pas la même taille. */
  .jardin-hole-locked, .vers-case-locked{filter:grayscale(85%) brightness(0.55); cursor:not-allowed;}
  .jardin-hole-lock{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,0.9); pointer-events:none;}
  .jardin-hole-lock img.tsi{width:20px; height:20px; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.9));}

  /* popups (choix de graine a planter / boutique), meme gabarit que .tequip-item-popup mais plus
     larges pour contenir une grille de 6 pastilles. */
  .jardin-popup{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:30; width:88%; max-width:320px; background:#141c17; border:1px solid var(--gold-dim); border-radius:12px; padding:14px 12px 12px; text-align:center; box-shadow:0 8px 26px rgba(0,0,0,0.6);}
  .jardin-popup-title{font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold); margin-bottom:10px;}
  .jardin-shop-grid, .jardin-plant-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  /* Popup « Acheter des pierres brutes » : seulement 2 cartes (Rubis/Émeraude, cf. PIERRE_COLORS), donc #pierre-shop-grid
     seul passe en flex centré, cartes de largeur fixe 93px = celle de la grille à 3 colonnes ((296px - 2*8px de gap) / 3,
     cf. .jardin-popup max-width:320px). Jardin et Vers ne sont pas concernés. */
  #pierre-shop-grid{display:flex; justify-content:center;}
  #pierre-shop-grid .jardin-seed-pill{flex:0 0 93px;}
  .jardin-seed-pill{display:flex; flex-direction:column; align-items:center; gap:3px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:8px 4px 7px; cursor:pointer; font:inherit;}
  button.jardin-seed-pill{color:inherit;}
  .jardin-seed-pill img{width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));}
  /* Réserve la même hauteur pour le nom (boutiques et popups partageant .jardin-seed-pill/.inventaire-label, cf.
     jardinRenderShop/versRenderShop/pierreRenderShop) : sans cela, un nom court sur 1 ligne décale le contenu vertical par
     rapport aux pastilles voisines. 3.6em = 3 lignes, pire cas observé (« Pierre de X »). */
  .jardin-seed-pill .inventaire-label{min-height:3.6em; display:flex; align-items:center; justify-content:center; line-height:1.15; text-align:center;}
  .jardin-shop-owned{font-size:8px; color:var(--ink-dim);}
  .jardin-buy-btn{margin-top:2px; font-family:var(--font-display); font-size:10px; font-weight:700; color:#1b160a; background:var(--gold); border:none; border-radius:14px; padding:3px 8px; cursor:pointer; white-space:nowrap;}
  .jardin-buy-btn:disabled{opacity:0.4; cursor:not-allowed;}
  .jardin-empty-msg{grid-column:1/-1; font-size:10.5px; color:var(--ink-dim); padding:6px 4px;}

  /* ÉCRAN VERS À SOIE (cf. Marchande d'étoffes/pnj_jaune, versOpen/renderVersScreen) : même structure que #screen-jardin
     (fond vers-fond.jpg, 940x1672), réutilise .jardin-body/.jardin-plots/.jardin-popup/.jardin-seed-pill ; seules les cases
     ont une classe dédiée (.vers-case), 24 cases plus grandes au lieu de 54 trous. */
  #screen-vers{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/vers/vers-fond.jpg') no-repeat center; background-size:cover; display:flex; flex-direction:column; overflow:hidden;}
  #screen-vers .tequip-topbar{position:absolute; top:0; left:0; right:0; z-index:5;} /* meme correctif que #screen-jardin, cf. commentaire au-dessus */
  /* Case = un quart de bac (grille 2x2/bac, cf. VERS_HOLE_POSITIONS) : contrairement aux trous du jardin, les bacs forment
     une grille parfaitement symétrique, d'où un simple quadrillage 2x2 de chaque bbox de bac. */
  /* 29/09 : 14 % × 7,4 % = une case du bac, sans chevauchement (17 % × 10 % + zone de clic élargie : la case du dessous
     recouvrait le bas de celle du dessus, le ver partait dans la mauvaise case). Ver agrandi d'autant : même taille à l'écran. */
  .vers-case{position:absolute; transform:translate(-50%,-50%); width:14%; height:7.4%; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .vers-case::before{left:0; right:0; top:0; bottom:0;}
  .vers-case-worm{position:absolute; width:95%; height:95%; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,0.5)); pointer-events:none;}
  .vers-case-bubble{position:absolute; top:-13%; right:0%; width:50%; height:50%; object-fit:contain; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.6)); animation:jardin-bubble-bob 1.4s ease-in-out infinite; pointer-events:none;}

  /* ÉCRAN TISSEUR RUNIQUE (sous-métier de la Marchande d'étoffes, cf. constantes TISSEUR_ et tisseurOpen) : fond
     assets/vers/tisseur-fond.jpg ; réutilise .pierre-slots-panel/.pierre-slot-card de l'Atelier de taille
     (TISSEUR_SLOT_COUNT = 5, disposition 1/2/2, le 5e = Premium, cf. .pierre-slots-panel). */
  #screen-tisseur{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/vers/tisseur-fond.jpg') no-repeat center; background-size:cover; display:flex; flex-direction:column; overflow:hidden;}
  #screen-tisseur .tequip-topbar{position:absolute; top:0; left:0; right:0; z-index:5;}

  /* ÉCRAN ATELIER DE TAILLE DE PIERRE (cf. Bijoutière/pnj_gris, pierreOpen/renderPierreScreen) : même structure que
     #screen-jardin/#screen-vers (fond pierre-fond.jpg, 940x1672), mais sans disposition de cases fournie pour ce fond : les
     emplacements sont un panneau de cartes superposé, toujours visible, plutôt que des hotspots sur l'image. */
  #screen-pierre{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/pierre/pierre-fond.jpg') no-repeat center; background-size:cover; display:flex; flex-direction:column; overflow:hidden;}
  #screen-pierre .tequip-topbar{position:absolute; top:0; left:0; right:0; z-index:5;} /* meme correctif que #screen-jardin, cf. commentaire au-dessus (sans effet visuel ici vu que .pierre-slots-panel est ancre en bas, mais garde la coherence entre les 3 ecrans) */
  /* Apothicaire (potions) : même gabarit exact que #screen-pierre (fond apothicaire-fond.jpg, 940x1672, ratio 941/1672). */
  #screen-apothicaire{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/apothicaire/apothicaire-fond.jpg') no-repeat center; background-size:cover; display:flex; flex-direction:column; overflow:hidden;}
  #screen-apothicaire .tequip-topbar{position:absolute; top:0; left:0; right:0; z-index:5;}
  /* Panneau à 5 emplacements (PIERRE_SLOT_COUNT et TISSEUR_SLOT_COUNT), rangés en 1/2/2 : grille 2 colonnes, la dernière
     carte (le 5e emplacement Premium, dernier ajouté au DOM par pierreBuildSlotsDom/tisseurBuildSlotsDom) passe en tête
     (order:-1) sur les 2 colonnes, centrée. Purement visuel : data-idx et les clics ne changent pas, elle reste l'index 4. */
  .pierre-slots-panel{position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:20; display:grid; grid-template-columns:repeat(2, minmax(0, 92px)); justify-content:center; gap:6px; width:94%; max-width:340px;}
  .pierre-slots-panel .pierre-slot-card:last-child{order:-1; grid-column:1 / -1; justify-self:center;}
  .pierre-slot-card{position:relative; width:26vw; max-width:92px; min-height:92px; background:rgba(10,14,20,0.72); border:1px solid var(--gold-dim); border-radius:10px; padding:7px 5px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,0.55);}
  .pierre-slot-card-empty{cursor:pointer;}
  .pierre-slot-empty-label{font-size:8.5px; color:var(--ink-dim);}
  .pierre-slot-icon{width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6));}
  .pierre-slot-progress{width:100%; display:flex; flex-direction:column; align-items:center; gap:3px;}
  .pierre-slot-bar{width:100%; height:6px; border-radius:3px; background:rgba(10,8,8,0.78); border:1px solid var(--gold-dim); overflow:hidden;}
  .pierre-slot-bar-fill{height:100%; width:0%; background:linear-gradient(90deg,#ffdf8a,var(--gold)); transition:width 0.3s ease-out;}
  .pierre-slot-time{font-size:7.5px; color:var(--ink-dim);}
  .pierre-slot-collect{margin-top:1px; font-size:9px; padding:3px 7px;}
  /* Emplacement verrouillé (niveau insuffisant ou réservé Premium, cf. pierreSlotUnlocked) : carte grisée + overlay centré,
     badge assets/ui/premium-badge.webp pour le 5e emplacement, texte « Déverrouille au niveau N » pour les autres (idx 2/3,
     cf. pierreSlotLockLabel). */
  .pierre-slot-card-locked{filter:grayscale(80%) brightness(0.6); cursor:not-allowed;}
  .pierre-slot-lock{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px; background:rgba(6,8,10,0.35); border-radius:10px;}
  .pierre-slot-lock-premium{width:60%; max-width:52px; height:auto; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.7));}
  .pierre-slot-lock-txt{font-size:8px; font-weight:700; color:var(--ink-dim); line-height:1.2;}

  /* ÉCRAN ENCHANTEUR : même fond que l'Atelier de taille (pierre-fond.jpg, même PNJ), sans panneau de cartes ; juste un
     panneau centré (.enchanteur-panel, fond foncé/bordure dorée) comme contenu principal de l'écran, non comme overlay. */
  #screen-enchanteur{aspect-ratio:941/1672; position:relative; background:#05060a url('assets/pierre/pierre-fond.jpg') no-repeat center; background-size:cover; display:flex; flex-direction:column; overflow:hidden;}
  #screen-enchanteur .tequip-topbar{position:absolute; top:0; left:0; right:0; z-index:5;}
  .enchanteur-body{flex:1; display:flex; align-items:center; justify-content:center; padding:60px 16px 16px;}
  .enchanteur-panel{width:100%; max-width:340px; background:#141c17; border:1px solid var(--gold-dim); border-radius:14px; padding:16px 14px; box-shadow:0 8px 30px rgba(0,0,0,0.55); text-align:center;}

  /* recompense en composants a l'ouverture d'un coffre de victoire EN CAMPAGNE (cf. openChest
     dans script.js) : une pastille par palier obtenu, a cote du fragment de carte habituel. */
  .chest-materials-reward{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:8px;}
  #chest-xp-reward{display:flex; flex-direction:column; gap:3px; width:min(100%, 360px); margin:8px auto 0;}
  #chest-xp-reward.hidden{display:none;}
  .chest-material-drop{display:flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:var(--gold); background:rgba(201,162,75,0.12); border:1px solid var(--gold-dim); border-radius:20px; padding:3px 8px 3px 4px;}
  .chest-material-drop img{width:20px; height:20px; object-fit:contain;}

  /* ===================== ECRAN TACTIQUE (prototype "test" : combat 5v5 tour par tour sur grille,
     cf. tactStart/#screen-tactique dans script.js/index.html) ===================== */
  /* Fond de cadre de l'écran tactique (940x1672, ratio exact du cadre .screen 941/1672) : visible dans les marges autour du
     plateau carré (.tact-board a son propre décor d'arène, cf. TACT_ARENES) : barre du haut, contrôles, barre de
     compétences, journal de combat. */
  #screen-tactique{position:relative; background-image:url('assets/tactique/tactique-bg.jpg'); background-size:cover; background-position:center;} /* ancre aussi #tact-skill-popup (position:absolute; inset:0) sur cet ecran */
  /* 28/09 : bouton « Auto » de farm dans la barre du haut du combat (cf. tactAutoFarmMaj) */
  .tact-auto-farm{position:absolute; right:64px; top:50%; transform:translateY(-50%); width:85px!important; height:30px!important; padding:0!important; z-index:3;}
  .tact-auto-farm img{height:30px; width:85px; object-fit:contain;}
  .tact-auto-farm.tact-auto-verrou{opacity:.45; filter:grayscale(1); cursor:default;}
  .tact-auto-farm-compteur{position:absolute; right:155px; top:50%; transform:translateY(-50%); font-family:var(--font-display); font-size:12px; color:var(--ink); opacity:.8; z-index:3; white-space:nowrap;}
  .tact-topbar{position:relative; display:flex; align-items:center; gap:8px; padding:10px 56px 10px 12px; border-bottom:1px solid var(--board-line);}
  .tact-topbar-title{flex:1; font-family:var(--font-display); font-size:12px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .tact-round{font-size:11px; color:var(--gold); font-weight:700; white-space:nowrap;}
  /* Case chrono (cf. tactChronoStart) : positionnée en absolu pour rester centrée sur la barre quelle que soit la largeur du
     titre et du numéro de tour. */
  .tact-chrono{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    min-width:28px; height:22px; padding:0 6px; box-sizing:border-box; border-radius:6px;
    background:rgba(5,6,5,0.92); border:1.5px solid var(--gold); color:var(--gold);
    font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:0.3px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 6px rgba(0,0,0,0.5); z-index:3;}
  .tact-chrono.tact-chrono-urgent{border-color:#e05a52; color:#ff8f88;}

  .tact-board{position:relative; width:100%; aspect-ratio:1/1; background-size:cover; background-position:center; overflow:hidden;}
  .tact-cells{position:absolute; inset:0;}
  .tact-units{position:absolute; inset:0;}

  /* Roster (portraits + level) de chaque équipe, cf. tactRenderRoster : logé dans les marges latérales du décor (l'octogone
     praticable, cf. TACT_FIELD_PCT, laisse ~21.8% de large de chaque côté). z-index sous .tact-units (1 < 2). Cases
     petites : largeur fixe de colonne + aspect-ratio par case, pas de flex:1. */
  .tact-roster{position:absolute; top:8%; width:10.5%; display:flex; flex-direction:column; gap:5%; z-index:1;}
  .tact-roster-left{left:3%;}
  .tact-roster-right{right:3%;}
  .tact-roster-slot{position:relative; width:100%; aspect-ratio:1/1.05; border-radius:6px; border:1px solid var(--board-line);
    background:rgba(10,14,11,0.55); overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.5); cursor:help;}
  .tact-roster-slot.dead{filter:grayscale(1); opacity:0.45;}
  .tact-roster-portrait{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; user-select:none;}
  .tact-roster-portrait.facing-left{transform:scaleX(-1);}
  .tact-roster-name{position:absolute; left:0; right:0; bottom:0; font-size:5.5px; font-weight:700; text-align:center;
    color:var(--ink); text-shadow:0 1px 2px rgba(0,0,0,0.95); background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.75));
    padding:4px 1px 1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  /* Badge de level : coin intérieur de la case, côté plateau (droite pour l'équipe gauche, gauche en miroir pour l'équipe
     droite). */
  .tact-roster-level{position:absolute; top:2px; min-width:11px; height:11px; padding:0 2px; border-radius:4px;
    background:var(--gold); color:#1b160a; font-size:6.5px; font-weight:800; line-height:11px; text-align:center;
    box-shadow:0 1px 3px rgba(0,0,0,0.6);}
  .tact-roster-left .tact-roster-level{right:2px;}
  .tact-roster-right .tact-roster-level{left:2px;}

  /* Pop-up de stats au survol d'une case du roster en combat (cf. tactShowStatPopup) : placé au-dessus/dessous de la case
     survolée, aucun clic requis (contrairement au Manoir/Cour, où la même case ouvrira la fenêtre d'équipement). */
  /* Largeur (donc hauteur) FIXE quel que soit le personnage survolé, pour que le cadre ne « saute » pas d'une case à
     l'autre ; le nom est tronqué par des points de suspension. tactShowStatPopup utilise popup.offsetWidth, donc figer la
     largeur en CSS ne casse pas le calcul de position. */
  .tact-stat-popup{position:absolute; z-index:20; width:118px; padding:6px 8px; border-radius:6px;
    border:1px solid var(--gold); background:rgba(15,20,16,0.96); box-shadow:0 4px 10px rgba(0,0,0,0.6);
    pointer-events:none; transition:opacity 0.12s; box-sizing:border-box;}
  .tact-stat-popup-name{font-size:8px; font-weight:800; color:var(--gold); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .tact-stat-popup-row{display:flex; justify-content:space-between; gap:8px; font-size:7px; color:var(--ink); line-height:1.5;}
  .tact-stat-popup-row span:first-child{color:var(--ink-dim);}

  /* Largeur de case 9.5% : tout ce qui est dimensionné en % de la case (sprite, gros sprites de bestiaire calés en JS, cf.
     tactCreateUnitDom) rétrécit et aère les unités, SANS toucher à la grille (TACT_FIELD_W/H, TACT_ARENES cx/cy,
     TACT_LAYOUT), finement calée par case sur chaque image d'arène (cf. tactCellPct). */
  .tact-unit{position:absolute; width:9.5%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; z-index:2; transition:opacity 0.3s;}
  .tact-unit-name{position:relative; z-index:6; font-size:6.5px; font-weight:700; color:var(--ink); text-shadow:0 1px 3px rgba(0,0,0,0.95); white-space:nowrap; margin-bottom:1px;
    max-width:150%; overflow:hidden; text-overflow:ellipsis; pointer-events:none;}   /* Les noms du bestiaire sont longs : coupés proprement plutôt que de chevaucher les cases voisines ; position:relative +
    z-index pour rester lisibles AU-DESSUS de l'anneau de bouclier (.tact-shield-ring, z-index:5). */
  /* pointer-events:none sur tout le contenu visuel de la case (sprite/nom/barres/statuts) : seul .tact-unit-hit (rond calé
     sur le halo de ciblage) capte les clics, pour qu'un gros sprite de bestiaire ne déborde pas sur la case voisine et ne
     lui vole pas ses clics (ex. le boss prenait l'agro du mob derrière). */
  .tact-unit-sprite{width:78%; height:auto; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.7)); user-select:none; pointer-events:none;}
  .tact-unit-sprite.facing-left{transform:scaleX(-1);}
  /* Anneau VFX du bouclier (cf. tactCreateUnitDom/tactRenderUnits) : centré sur le personnage comme .tact-unit-hit, mais
     large (155% de la case) et au premier plan (z-index positif) par-dessus le sprite. Invisible sans .active, en boucle
     (webp animé) tant que le bouclier existe, même à 1%. La teinte par classe (--shield-hue, cf. TACT_SHIELD_COLORS) vient
     d'un hue-rotate() sur l'asset bleu/blanc. */
  .tact-shield-ring{position:absolute; left:50%; top:58%; transform:translate(-50%,-50%);
    width:155%; height:230%; pointer-events:none; z-index:5; opacity:0; transition:opacity 0.25s ease;}
  .tact-shield-ring.active{opacity:1;}
  .tact-shield-ring img{width:100%; height:100%; object-fit:contain; display:block;
    filter:hue-rotate(var(--shield-hue,0deg)) saturate(1.15) drop-shadow(0 0 6px rgba(0,0,0,0.4));}
  /* chef de bande d'un cercle de zone (cf. zone.js) : place au centre de son equipe et
     dessine plus gros que les autres — le boss du cercle sud davantage encore. */
  .tact-unit.tact-chef{z-index:4;}
  /* (un monstre de bestiaire recoit sa largeur en JS, cf. tactCreateUnitDom : elle depend du
     ratio reel de son PNG — ces regles ne servent qu'aux archetypes a illustration verticale) */
  .tact-unit.tact-chef .tact-unit-sprite{width:104%;}
  .tact-unit.tact-boss .tact-unit-sprite{filter:drop-shadow(0 0 7px rgba(201,162,75,0.7)) drop-shadow(0 3px 4px rgba(0,0,0,0.75));}
  .tact-unit.tact-boss:not(.tact-bestiaire) .tact-unit-sprite{width:125%;}
  .tact-unit.tact-chef .tact-unit-name{color:var(--gold); font-weight:800;}
  .tact-team-A .tact-unit-sprite{filter:drop-shadow(0 3px 4px rgba(0,0,0,0.7)) drop-shadow(0 0 5px rgba(80,150,220,0.85));}
  .tact-team-B .tact-unit-sprite{filter:drop-shadow(0 3px 4px rgba(0,0,0,0.7)) drop-shadow(0 0 5px rgba(220,90,80,0.85));}
  .tact-unit.dead{opacity:0.28; filter:grayscale(1);}
  /* charge courte des roles Cac vers leur cible au moment de l'attaque (cf. tactPlayMeleeCharge) */
  .tact-unit-bars{position:relative; z-index:6; width:92%; margin-top:1px; pointer-events:none;}
  /* position:relative + z-index : comme .tact-unit-name, les barres de vie/vitesse restent AU-DESSUS de l'anneau de bouclier
     (.tact-shield-ring, z-index:5), qui sinon les recouvre partiellement une fois étiré en bulle. */
  /* Jauge de vitesse (ATB, cf. tactAdvanceAtb) : se remplit selon la VIT effective de l'unité, dorée et pulsante une fois
     pleine (tact-atb-full) juste avant son tour. */
  .tact-atb-bar{width:100%; height:2.5px; margin-bottom:1px; border-radius:2px; background:rgba(0,0,0,0.55); overflow:hidden;}
  .tact-atb-fill{height:100%; width:0%; background:linear-gradient(90deg,#a8790a,#ffd75e); transition:width 0.3s linear;}
  .tact-atb-fill.tact-atb-full{background:linear-gradient(90deg,#ffd75e,#fff6d0); box-shadow:0 0 4px 1px rgba(255,215,90,0.9);}
  /* Jauge de colère (barre rouge), propre aux boss (u.isBoss, cf. TACT_RAGE_CHARGE_PCT) : se charge avec les DÉGÂTS SUBIS
     (pas le temps), absente du DOM des unités non-boss (cf. tactCreateUnitDom). Pleine (tact-rage-full) juste avant
     l'attaque de pression immédiate qu'elle déclenche (cumulable avec l'ATB). */
  .tact-rage-bar{width:100%; height:2.5px; margin-bottom:1px; border-radius:2px; background:rgba(0,0,0,0.55); overflow:hidden;}
  .tact-rage-fill{height:100%; width:0%; background:linear-gradient(90deg,#7a0d0d,#ff3b30); transition:width 0.3s linear;}
  .tact-rage-fill.tact-rage-full{background:linear-gradient(90deg,#ff3b30,#ffb199); box-shadow:0 0 5px 1px rgba(255,59,48,0.95);}
  /* Le bouclier (.tact-shield-fill) se superpose sur cette barre ; position:relative pour l'overlay absolu. width n'est pas
     fixe à 100% : tactRenderUnits l'agrandit en cas de « surbouclier » (hp + bouclier > hpMax). */
  .tact-hp-bar{position:relative; width:100%; height:4px; border-radius:3px; background:rgba(0,0,0,0.65); border:1px solid rgba(0,0,0,0.8); overflow:hidden; transition:width 0.35s ease;}
  .tact-hp-fill{position:relative; z-index:1; height:100%; width:100%; background:linear-gradient(90deg,#7a2a24,#d3564a); transition:width 0.35s ease;}
  /* Overlay du bouclier : couleur/lueur pilotées par --shield-color/--shield-glow (cf. TACT_SHIELD_COLORS/tactShieldColor),
     pour distinguer skills/classes. min-width garantit que l'effet reste visible même pour un bouclier minuscule (1%). */
  .tact-shield-fill{position:absolute; top:0; left:0; z-index:2; height:100%; width:0%; min-width:3px; background:var(--shield-color,#f5d949); box-shadow:0 0 4px var(--shield-glow,rgba(245,217,73,0.85)); display:none; transition:width 0.35s ease, left 0.35s ease;}
  .tact-unit-status{display:flex; flex-wrap:wrap; justify-content:center; gap:1px; margin-top:1px; max-width:100%; pointer-events:none;}
  .tact-status-badge{font-size:7px; line-height:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.9));}
  .tact-status-badge img.tsi{width:10px; height:10px; display:block; border-radius:2px;}
  /* icone inline generique (remplace les emoji, retour utilisateur "trop d'emoji") : taille par
     defaut pour usage dans du texte (journal de combat, libelles...), surchargee au cas par cas. */
  img.tsi{width:13px; height:13px; display:inline-block; vertical-align:-2.5px; object-fit:contain;}

  .tact-tag{font-weight:700;}
  .tact-team-A.tact-tag, .tact-log .tact-team-A{color:#7fb8e8;}
  .tact-team-B.tact-tag, .tact-log .tact-team-B{color:#e58c7f;}

  /* Projectiles (fleche/orbe) volant du lanceur vers la cible avant l'effet d'impact — cf. TACT_PROJECTILES / tactFireProjectile. */
  .tact-projectile{position:absolute; width:6%; height:auto; z-index:4; pointer-events:none;
    transition:left 0.3s linear, top 0.3s linear; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.6));}
  .tact-projectile-fleche{width:1.8%; height:auto;}

  .tact-gameover{position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; text-align:center;
    padding:20px; background:rgba(5,6,5,0.72); font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--gold);
    text-shadow:0 2px 8px rgba(0,0,0,0.9);}

  .tact-controls{display:flex; align-items:center; justify-content:center; gap:10px; padding:10px;}

  /* Potions de préparation (mode Test uniquement, cf. tactShowPrepPotions) : même emplacement que .tact-controls, dont elles
     prennent la place pendant la préparation ; boutons plus grands que la barre de compétences (seules 2 actions possibles). */
  .tact-prep-potion-btn{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
    width:84px; padding:8px 6px; border-radius:10px; background:rgba(20,28,23,0.85); border:1px solid var(--gold);
    color:var(--ink); cursor:pointer;}
  .tact-prep-potion-btn:hover{background:var(--gold-dim); color:#1b160a;}
  .tact-prep-potion-icon{width:40px; height:40px; object-fit:contain; border-radius:50%; background:rgba(0,0,0,0.3);}
  .tact-prep-potion-name{font-family:var(--font-display); font-weight:700; font-size:10px; line-height:1.2; text-align:center;}
  .tact-prep-potion-count{position:absolute; top:2px; right:2px; min-width:14px; height:14px; padding:0 2px; border-radius:50%;
    background:rgba(5,6,5,0.9); border:1px solid var(--gold); color:var(--gold); font-size:9px; font-weight:700;
    display:flex; align-items:center; justify-content:center;}

  /* Barre de compétences du joueur (cf. tactBeginPlayerTurn/tactRenderSkillBar) : hauteur fixe (~104 px avec 4 boutons), et
     #tact-skillbar.hidden garde l'élément dans le flux (visibility:hidden). Sinon la hauteur de l'écran varie à chaque tour
     et, avec le zoom auto PC (cf. applyAppScale), le cadre « respire ». */
  .tact-skillbar{height:106px; box-sizing:border-box; overflow:hidden; padding:6px 10px 10px; text-align:center;}
  #tact-skillbar.hidden{display:block !important; visibility:hidden; pointer-events:none;}
  .tact-skillbar-title{font-family:var(--font-display); font-weight:700; font-size:11px; color:var(--gold);
    margin-bottom:6px; text-shadow:0 1px 3px rgba(0,0,0,0.8);}
  /* Barre principale : potion rouge | compétences | potion violette ; .tact-skillbar-row prend flex:1 pour rester centrée
     entre les deux boutons de potion. */
  .tact-skillbar-main{display:flex; align-items:center; justify-content:center; gap:8px;}
  .tact-skillbar-main .tact-skillbar-row{flex:1; min-width:0;}
  .tact-skillbar-row{display:flex; align-items:stretch; justify-content:center; gap:8px;}
  .tact-skillbar-potion-btn{position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%; background:rgba(20,28,23,0.85); border:1px solid var(--gold); cursor:pointer;}
  .tact-skillbar-potion-btn:hover{background:var(--gold-dim);}
  .tact-skillbar-potion-btn.disabled{opacity:0.4; filter:grayscale(0.6); cursor:default; border-color:var(--board-line);}
  .tact-skillbar-potion-icon{width:32px; height:32px; object-fit:contain; border-radius:50%;}
  .tact-skillbar-potion-count{position:absolute; top:-2px; right:-2px; min-width:14px; height:14px; padding:0 2px; border-radius:50%;
    background:rgba(5,6,5,0.9); border:1px solid var(--gold); color:var(--gold); font-size:9px; font-weight:700;
    display:flex; align-items:center; justify-content:center;}
  .tact-skillbar-btn{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
    width:74px; padding:6px 4px; border-radius:10px; background:rgba(20,28,23,0.85); border:1px solid var(--gold);
    color:var(--ink); cursor:pointer;}
  .tact-skillbar-btn:hover{background:var(--gold-dim); color:#1b160a;}
  .tact-skillbar-btn.disabled{opacity:0.4; filter:grayscale(0.6); cursor:default; border-color:var(--board-line);}
  .tact-skillbar-btn.disabled:hover{background:rgba(20,28,23,0.85); color:var(--ink);}
  .tact-skillbar-icon{width:32px; height:32px; object-fit:contain; border-radius:50%; background:rgba(0,0,0,0.3);}
  .tact-skillbar-name{font-size:8.5px; line-height:1.2; text-align:center;}
  .tact-skillbar-cd{position:absolute; top:2px; right:2px; min-width:14px; height:14px; padding:0 2px; border-radius:50%;
    background:rgba(5,6,5,0.9); border:1px solid var(--gold); color:var(--gold); font-size:9px; font-weight:700;
    display:flex; align-items:center; justify-content:center;}
  /* petit bouton "ℹ" (ouvre #tact-skill-popup au clic, cf. tactShowSkillPopup) : coin haut-gauche,
     pour ne pas chevaucher le badge de cooldown en haut-droite. */
  .tact-skillbar-info{position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
    background:url('assets/ui/icon-info.webp') center/100% 100% no-repeat; font-size:0;}
  .tact-skillbar-info:hover{filter:brightness(1.15);}
  .tact-skillbar-cancel{width:auto; padding:6px 16px; justify-content:center; gap:5px;}

  /* popup de description d'une competence (cf. tactShowSkillPopup/tactHideSkillPopup) */
  .tact-skill-popup{position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
    background:rgba(5,6,5,0.72); padding:20px;}
  .tact-skill-popup-box{position:relative; max-width:280px; padding:18px 20px; background:rgba(15,20,16,0.97);
    border:1px solid var(--gold); border-radius:10px; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,0.6);}
  .tact-skill-popup-close{position:absolute; top:6px; right:8px; background:none; border:none; color:var(--ink-dim);
    font-size:16px; cursor:pointer; line-height:1;}
  .tact-skill-popup-close:hover{color:var(--gold);}
  .tact-skill-popup-name{font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--gold); margin-bottom:8px;}
  .tact-skill-popup-desc{font-size:11px; line-height:1.5; color:var(--ink);}

  /* Zone de clic réelle du ciblage (cf. tactBeginTargeting/tactCreateUnitDom) : un rond calé exactement sur le halo
     vert/rouge (même left/top/width/aspect-ratio). Inerte par défaut ; sprite, nom et barres sont en pointer-events:none,
     seul ce rond capte le clic. */
  /* Centre et diamètre du halo calés en JS sur le sprite affiché (tactCaleHalo : --halo-x/--halo-y/--halo-d sur .tact-unit
     au ciblage) ; les valeurs fixes ne sont qu'un repli (sprite pas encore chargé). */
  .tact-unit-hit{position:absolute; left:var(--halo-x,50%); top:var(--halo-y,42%); transform:translate(-50%,-50%);
    width:var(--halo-d,82%); aspect-ratio:1/1; border-radius:50%; z-index:3; pointer-events:none; box-sizing:border-box;}
  .tact-unit-targetable .tact-unit-hit{pointer-events:auto; cursor:pointer;}
  .tact-unit-untargetable .tact-unit-hit{pointer-events:auto; cursor:not-allowed;} /* pas de handler JS lie : le clic n'y fait rien */

  /* mise en surbrillance des cibles valides pendant le mode de ciblage (cf. tactBeginTargeting) —
     placee apres les regles .tact-team-A/.tact-team-B .tact-unit-sprite pour les surclasser. */
  .tact-unit-targetable .tact-unit-sprite{filter:drop-shadow(0 3px 4px rgba(0,0,0,0.7)) drop-shadow(0 0 4px rgba(255,255,255,0.8)) drop-shadow(0 0 12px rgba(60,220,110,0.95)); animation:tact-target-pulse 1s ease-in-out infinite;}
  @keyframes tact-target-pulse{
    0%,100%{ filter:drop-shadow(0 3px 4px rgba(0,0,0,0.7)) drop-shadow(0 0 3px rgba(255,255,255,0.6)) drop-shadow(0 0 8px rgba(60,220,110,0.7)); }
    50%{ filter:drop-shadow(0 3px 4px rgba(0,0,0,0.7)) drop-shadow(0 0 5px rgba(255,255,255,1)) drop-shadow(0 0 16px rgba(60,220,110,1)); }
  }
  /* Halos de ciblage : vert = attaquable, rouge + rond barré = non attaquable (ex. taunt de tank_defi qui restreint
     tactAliveEnemies à un seul porteur) ; anneau coloré autour du personnage, en plus du glow vert du sprite. */
  .tact-unit-targetable::before, .tact-unit-untargetable::before{
    content:''; position:absolute; left:var(--halo-x,50%); top:var(--halo-y,42%); transform:translate(-50%,-50%);
    width:var(--halo-d,82%); aspect-ratio:1/1; border-radius:50%; pointer-events:none; z-index:1; box-sizing:border-box;
  }
  .tact-unit-targetable::before{ border:2.5px solid #3ddc6e; box-shadow:0 0 8px 1px rgba(61,220,110,0.8); animation:tact-halo-pulse 1s ease-in-out infinite; }
  @keyframes tact-halo-pulse{ 0%,100%{ opacity:0.75; } 50%{ opacity:1; } }
  .tact-unit-untargetable{ opacity:0.5; cursor:not-allowed; }
  .tact-unit-untargetable::before{ border:2.5px solid #e2453a; box-shadow:0 0 6px 1px rgba(226,69,58,0.7); }
  .tact-unit-untargetable::after{
    content:''; position:absolute; left:var(--halo-x,50%); top:var(--halo-y,42%); transform:translate(-50%,-50%) rotate(45deg);
    width:var(--halo-d,82%); height:2.5px; background:#e2453a; box-shadow:0 0 4px rgba(0,0,0,0.6); pointer-events:none; z-index:2;
  }

  .tact-log{height:108px; overflow-y:auto; margin:0 10px 10px; padding:8px 10px; background:rgba(0,0,0,0.35);
    border:1px solid var(--board-line); border-radius:8px; font-size:10.5px; line-height:1.5; color:var(--ink-dim);}
  /* Mode Test : .tact-controls (~54 px, cf. tactApplyControlsVisibility) reste masqué ; la classe tact-mode-test sur
     #screen-tactique agrandit #tact-log de la marge libérée (108 px + ~54 px). La campagne garde .tact-controls et le
     journal d'origine. */
  #screen-tactique.tact-mode-test .tact-log{height:162px;}

  .tact-log-line{border-bottom:1px solid rgba(255,255,255,0.05); padding:2px 0;}
  .tact-log-line:last-child{border-bottom:none;}
  .tact-log-line b{color:var(--gold); font-weight:700;}

/* ===== la pierre du portail du manoir (cf. pierreTire dans monde.js) ===== */
  /* l'icone du portail est une pierre, pas un pictogramme : on la laisse en couleur (pas de
     grisage) et un peu plus grande que les autres points d'interet ; un halo de sa teinte
     quand une map est tiree */
  .hub-hotspot.hub-pierre .hub-hotspot-icon{width:auto; height:60px; max-height:60px; filter:brightness(0.75) drop-shadow(0 3px 5px rgba(0,0,0,0.75)); opacity:0.92;}
  .hub-hotspot.hub-pierre.active .hub-hotspot-icon{filter:brightness(1.1) drop-shadow(0 0 12px rgba(201,162,75,0.9)); opacity:1;}
  .hub-hotspot.hub-pierre.pierre-active .hub-hotspot-icon{filter:brightness(1) drop-shadow(0 0 10px rgba(255,255,255,0.45));}
  /* pierre du mode Neant : le dessin fournit des eclats flottants autour du bloc, donc un peu plus haute pour que la roche fasse la taille de la pierre du portail, et moins assombrie (roche deja sombre) */
  .hub-hotspot.hub-pierre[data-hotspot="neant_mode"] .hub-hotspot-icon{height:72px; max-height:72px; filter:brightness(1.05) drop-shadow(0 0 8px rgba(170,80,255,0.55));}
  .hub-hotspot.hub-pierre[data-hotspot="neant_mode"].active .hub-hotspot-icon{filter:brightness(1.3) drop-shadow(0 0 14px rgba(190,110,255,0.95));}
  /* pierre du Neant grisee tant que le mode est verrouille (campagne < 100 %), survol compris : place APRES les regles
     violettes ci-dessus (meme specificite que .active sinon) ; la vraie couleur revient une fois la campagne finie */
  .hub-hotspot.hub-pierre[data-hotspot="neant_mode"].verrouille .hub-hotspot-icon,
  .hub-hotspot.hub-pierre[data-hotspot="neant_mode"].verrouille.active .hub-hotspot-icon{filter:grayscale(1) brightness(0.7) drop-shadow(0 3px 5px rgba(0,0,0,0.75));}
  /* Pastille xN (essais restants du jour, cf. majEssaisPierres) en bas à gauche de la pierre, en diagonale du « ! »
     (haut-droit, cf. exclPlace). Grisée à x0. */
  .pierre-essais{position:absolute; left:22%; bottom:0; transform:translate(-50%,35%); padding:0 6px; border-radius:8px; background:rgba(10,14,11,0.85); border:1px solid var(--gold); color:var(--gold); font-family:var(--font-display); font-size:11px; font-weight:800; line-height:15px; white-space:nowrap; pointer-events:none; box-shadow:0 1px 4px rgba(0,0,0,0.7);}
  .pierre-essais.vide{color:var(--ink-dim); border-color:var(--panel-line); opacity:0.8;}
  .pierre-backdrop{position:absolute; inset:0; z-index:40; background:radial-gradient(ellipse at center, rgba(10,8,20,0.82), rgba(0,0,0,0.94)); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; user-select:none;}
  .pierre-scene{position:relative; width:460px; max-width:100%; height:330px;}
  .pierre-centre{position:absolute; left:50%; top:50%; height:170px; width:auto; transform:translate(-50%,-50%); z-index:2; filter:drop-shadow(0 8px 14px rgba(0,0,0,0.8)); pointer-events:none;}
  .pierre-rune{position:absolute; left:50%; top:50%; height:88px; width:auto; transform:translate(-50%,-50%); will-change:transform; pointer-events:none; filter:drop-shadow(0 0 10px var(--teinte, #fff));}
  .pierre-rune.pierre-gagnante{filter:drop-shadow(0 0 22px var(--teinte, #fff)) drop-shadow(0 0 50px var(--teinte, #fff)); animation:pierre-pulse 1.4s ease-in-out infinite;}
  @keyframes pierre-pulse{ 0%,100%{filter:drop-shadow(0 0 18px var(--teinte, #fff)) drop-shadow(0 0 40px var(--teinte, #fff));} 50%{filter:drop-shadow(0 0 28px var(--teinte, #fff)) drop-shadow(0 0 64px var(--teinte, #fff));} }
  .pierre-texte{margin-top:18px; font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--gold); text-shadow:0 2px 8px rgba(0,0,0,0.9); text-align:center; padding:0 16px; min-height:26px;}
  .pierre-aide{margin-top:8px; font-size:12px; color:#cfc6b0; opacity:0.85; text-align:center; min-height:16px;}

/* ===== fiches (bilan de defaite, boss) et serie de zone (cf. bilan.js / zone.js) ===== */
  .fiche-panel{width:300px; max-width:calc(100% - 20px); max-height:calc(100% - 30px); overflow-y:auto; padding:12px 12px 0; text-align:left; align-items:stretch;}
  .fiche-titre{font-size:15px; text-align:center; margin-bottom:8px;}
  .fiche-lignes{display:flex; flex-direction:column; gap:7px;}
  .fiche-ligne{display:flex; gap:8px; align-items:flex-start; font-size:11px; line-height:1.3; color:var(--ink); padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid var(--panel-line);}
  .fiche-ligne b{color:var(--gold);}
  .fiche-ico{flex:0 0 auto; width:18px; text-align:center;}
  .fiche-ico img.tsi{width:18px; height:18px; vertical-align:0;}
  .fiche-btn{margin-top:0; text-align:center; width:100%;}
  .fiche-boutons, .fiche-panel > .fiche-btn{position:sticky; bottom:0; padding:10px 0 12px; margin-top:10px; background:linear-gradient(to top, #141c17 75%, rgba(20,28,23,0));}
  .fiche-btn-second{background:transparent; color:var(--ink-dim); border-color:var(--panel-line);}
  .fiche-boutons{display:flex; gap:8px;}
  .fiche-boutons .fiche-btn{flex:1;}
  .fiche-boss-tete{display:flex; gap:12px; align-items:center; margin-bottom:6px;}
  .fiche-boss-portrait{width:64px; height:64px; border-radius:10px; border:2px solid var(--gold-dim); object-fit:cover; background:#0b0e0c; flex:0 0 auto;}
  .fiche-boss .fiche-titre{text-align:left; margin-bottom:2px;}
  .fiche-boss-identite{font-size:12px; color:var(--ink); font-style:italic;}
  .fiche-boss-niveau{font-size:11px; color:var(--ink-dim); margin-top:2px;}
  .fiche-sous-titre{font-family:var(--font-display); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-dim); margin:8px 0 4px;}
  .fiche-comps{display:flex; flex-direction:column; gap:4px;}
  .fiche-comp{padding:4px 7px; border-radius:8px; background:rgba(201,162,75,0.07); border:1px solid var(--panel-line); display:flex; flex-wrap:wrap; gap:0 8px; align-items:baseline;}
  .fiche-comp-nom{font-family:var(--font-display); font-size:12px; color:var(--gold);}
  .fiche-comp-cd{font-size:10px; color:var(--ink-dim);}
  .fiche-comp-txt{flex-basis:100%; font-size:10.5px; color:var(--ink); line-height:1.25; margin-top:1px;}
  /* Série de zone : sept cases dans la barre du haut, à droite du titre ; les jours 4 et 7 (ronds, .x2case) doublent le
     butin. */
  /* a gauche du bouton son (.mute-btn, 42 px a droite:8px) : right 58 px */
  .zone-serie{position:absolute; right:58px; top:50%; transform:translateY(-50%); display:flex; gap:4px; align-items:center; z-index:6;}
  .zone-serie-case{width:14px; height:14px; border-radius:4px; border:1px solid var(--gold-dim); background:rgba(0,0,0,0.45); box-shadow:inset 0 1px 2px rgba(0,0,0,0.6); font-size:8px; line-height:12px; text-align:center; color:var(--gold-dim);}
  .zone-serie-case.faite{background:linear-gradient(160deg,#f0d27a,#b8862b); border-color:#f6e2a0; box-shadow:0 0 6px rgba(240,210,120,0.6); color:#3a2a08;}
  .zone-serie-case.x2case{width:18px; height:18px; border-radius:50%; font-size:10px; line-height:16px;}
  .zone-serie-case.x2case.faite{animation:chara-buff-glow 1.6s ease-in-out infinite;}
  .zone-serie-double{font-family:var(--font-display); font-size:10px; color:var(--gold); text-shadow:0 1px 3px rgba(0,0,0,0.9); margin-left:4px;}

/* ===== ecran Monde (cf. monde.js) et fenetre de la statue ===== */
.monde-titre{font-family:var(--font-display); font-size:13px; color:var(--gold); text-shadow:0 1px 4px rgba(0,0,0,0.9);}
.portail-panel{width:260px;}
.portail-btn{display:block; width:100%; margin-top:10px; text-align:left;}
.portail-btn b{display:inline-block; min-width:18px; color:var(--gold);}

  /* ===== ZONE DU JOUR (cf. zone.js) : statue bonus au nord, chefs sur les autres cercles ===== */
  .zone-obj{position:absolute; user-select:none; pointer-events:none;}
  .zone-statue{filter:drop-shadow(0 3px 5px rgba(0,0,0,0.55));}
  .zone-mob{transform:translate(-50%,-94%); image-rendering:auto;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,0.65)); animation:zone-mob-bob 2.6s ease-in-out infinite;}
  .zone-mob.zone-boss{filter:drop-shadow(0 0 6px rgba(201,162,75,0.65)) drop-shadow(0 3px 4px rgba(0,0,0,0.7));}
  @keyframes zone-mob-bob{0%,100%{transform:translate(-50%,-94%);} 50%{transform:translate(-50%,-98%);}}
  /* message de la zone (statue touchee, chef vaincu) : la ligne d'aide de la map clignote en dore */
  #monde-hint.zone-flash{color:var(--gold); font-weight:700;}
  #monde-hint img.tsi{width:16px; height:16px; vertical-align:-4px;}
  #monde-chara-bar{z-index:7;}

  /* fenetres de la statue et du bonus (cf. zone.js) */
  .statue-icone{width:72px; height:72px; margin:4px auto 6px; display:flex; align-items:center; justify-content:center;}
  .statue-icone img{max-width:100%; max-height:100%; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6));}
  .cour-dialogue-test-btn:disabled, .cour-dialogue-test-btn[disabled]{opacity:0.38; cursor:not-allowed; filter:grayscale(0.7);}
  .cour-dialogue-test-btn:disabled:hover{background:rgba(201,162,75,0.15); color:var(--gold);}
  .statue-deja{font-size:11px; color:var(--ink-dim); margin-top:6px;}
  /* bulle de dialogue au-dessus de la statue : la meme que celle des PNJ de la Cour ; elle
     pulse quand le joueur est a portee */
  .zone-bulle{filter:drop-shadow(0 2px 3px rgba(0,0,0,0.55)); transform:translate(-50%,-100%); transform-origin:50% 100%;}
  .zone-bulle.proche{animation:zone-bulle-pulse 1.1s ease-in-out infinite;}
  @keyframes zone-bulle-pulse{ 0%,100%{transform:translate(-50%,-100%) scale(1);} 50%{transform:translate(-50%,-100%) scale(1.18);} }
  /* logo du bonus actif, pose au-dessus de la premiere case de compagnon (cf. renderCharaBar) */
  .chara-buff{position:relative; pointer-events:auto; width:44px; height:44px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,0.65)); transition:transform 0.15s ease; animation:chara-buff-glow 2.4s ease-in-out infinite;}
  .chara-buff img{width:100%; height:100%; object-fit:contain; user-select:none;}
  .chara-buff:hover{transform:translateX(3px) scale(1.1);}
  @keyframes chara-buff-glow{ 0%,100%{filter:drop-shadow(0 2px 5px rgba(0,0,0,0.65));} 50%{filter:drop-shadow(0 2px 5px rgba(0,0,0,0.65)) drop-shadow(0 0 7px rgba(255,220,120,0.55));} }

  /* zoom fort (cf. mondeStart) : plus aucune ombre portee dans le monde — a x9 ou x12, un
     drop-shadow de 6 px est un flou de 54 a 72 px recalcule a chaque image, et c'est lui qui
     saccadait le deplacement sur les maps glace et neant */
  .cour-world.zoom-fort .cour-character, .cour-world.zoom-fort .zone-mob, .cour-world.zoom-fort .zone-statue,
  .cour-world.zoom-fort .zone-bulle{filter:none !important;}
  /* Pas de will-change:transform ni de backface-visibility sur le monde : Chrome figerait la rastérisation à l'échelle
     d'avant le scale(x12) et étirerait l'image (map du néant en bouillie de pixels). translate3d suffit à composer le
     calque ; sans will-change, Chrome re-rastérise à chaque changement de zoom. */

  /* ===== PROGRESSION DES COMPAGNONS (cf. progression.js) ===== */
  /* Jauge d'XP sous chaque case (.chara-case-xp, cf. renderCharaBar). .xp-niv/.xp-jauge/.xp-fill sont aussi réutilisées par
     .metier-xp-bar. */
  .xp-niv{font-family:var(--font-display); font-size:8px; font-weight:800; color:var(--gold); min-width:11px; text-align:right; text-shadow:0 1px 3px rgba(0,0,0,0.9);}
  .xp-jauge{flex:1; height:4px; border-radius:2px; background:rgba(0,0,0,0.6); border:1px solid rgba(201,162,75,0.35); overflow:hidden;}
  .xp-fill{display:block; height:100%; background:linear-gradient(90deg,#7d5bb0,#c9a24b); transition:width 0.4s ease;}
  .chara-case-xp{width:44px; height:5px; margin-top:-4px; box-sizing:border-box; border-radius:3px; background:rgba(0,0,0,0.65); border:1px solid rgba(201,162,75,0.45); overflow:hidden; pointer-events:auto; box-shadow:0 1px 3px rgba(0,0,0,0.6);}
  /* bouton Competences dans l'ecran d'equipement */
  .tequip-skills-btn{position:relative; flex:0 0 auto; margin-top:2px; padding:4px 12px; font-size:10px;}
  /* page Competences */
  /* Même fond que l'écran Équipement du mode Test (#screen-tequip, salle d'armurerie) plutôt que le fond neutre de .screen ;
     le ratio 941/1672 est déjà partagé par tous les .screen. */
  #screen-skills{background:#05060a url('assets/ui/equip-bg.jpg') no-repeat right bottom; background-size:cover;}
  .skills-body{padding:8px 10px 14px; display:flex; flex-direction:column; gap:8px;}
  .skills-entete{display:flex; align-items:center; gap:10px; justify-content:center;}
  .skills-portrait{width:44px; height:46px; object-fit:cover; object-position:top center; border-radius:7px; border:1px solid var(--gold-dim);}
  .skills-nom{font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--gold);}
  .skills-niveau{font-size:10px; color:var(--ink);}
  .skills-points{font-size:10px; color:var(--ink-dim);}
  .skills-points b{color:var(--gold);}
  .skills-grille{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
  .skill-carte{position:relative; display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:8px; border:1px solid var(--panel-line); background:rgba(10,14,11,0.7); cursor:grab; user-select:none; min-height:44px;}
  .skill-carte:active{cursor:grabbing;}
  .skill-carte.verrou{opacity:0.55; cursor:not-allowed; filter:grayscale(0.6);}
  .skill-carte.equipee{border-color:var(--gold); box-shadow:0 0 0 1px rgba(201,162,75,0.35) inset;}
  .skill-carte.choisie{border-color:var(--blue); box-shadow:0 0 6px rgba(63,127,176,0.7);}
  .skill-carte img{width:30px; height:30px; border-radius:6px; flex:none; background:#0c0f0c;}
  .skill-carte-txt{min-width:0; flex:1;}
  .skill-carte-nom{font-size:9px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .skill-carte-info{font-size:7.5px; color:var(--ink-dim); line-height:1.3;}
  .skill-carte-info b{color:var(--gold);}
  .skill-carte-niv{position:absolute; top:3px; right:4px; display:flex; gap:1px;}
  .skill-carte-niv i{display:block; width:5px; height:5px; border-radius:1px; background:rgba(255,255,255,0.12); border:1px solid rgba(201,162,75,0.4);}
  .skill-carte-niv i.on{background:var(--gold);}
  .skill-carte-verrou{position:absolute; top:2px; right:4px; font-size:8px; color:var(--crimson); font-weight:800;}
  .skill-plus{flex:none; width:18px; height:18px; border-radius:50%; border:1px solid var(--gold); background:rgba(201,162,75,0.15); color:var(--gold); font-weight:800; font-size:11px; line-height:16px; text-align:center; cursor:pointer;}
  .skill-plus:disabled{opacity:0.3; cursor:not-allowed;}
  .skills-actives-titre{font-family:var(--font-display); font-size:10px; color:var(--gold); text-align:center; margin-top:2px;}
  .skills-actives-titre span{display:block; font-family:var(--font-body); font-size:7.5px; color:var(--ink-dim); font-weight:400; margin-top:2px;}
  .skills-actives{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
  .skill-slot{position:relative; aspect-ratio:1/1.1; border-radius:8px; border:1px dashed rgba(201,162,75,0.55); background:rgba(0,0,0,0.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:7.5px; color:var(--ink-dim); text-align:center; padding:3px;}
  .skill-slot.plein{border-style:solid; border-color:var(--gold); background:rgba(201,162,75,0.08);}
  .skill-slot.cible{border-color:var(--blue); background:rgba(63,127,176,0.2);}
  .skill-slot img{width:32px; height:32px; border-radius:6px;}
  .skill-slot-n{position:absolute; top:2px; left:4px; font-family:var(--font-display); font-size:8px; color:var(--gold);}
  .skill-slot-x{position:absolute; top:1px; right:3px; font-size:9px; color:var(--ink-dim); cursor:pointer;}
  .skill-slot-nom{font-size:7.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .skills-popup-actions{margin-top:8px; display:flex; gap:6px; justify-content:center; flex-wrap:wrap;}
  .skills-popup-actions .cour-dialogue-test-btn{margin-top:0; padding:6px 12px; font-size:10px;}
  /* coffre de fin de combat */
  .coffre-overlay{position:absolute; inset:0; z-index:95; background:rgba(5,6,5,0.82); display:flex; align-items:center; justify-content:center; padding:16px;}
  .coffre-panel{width:100%; max-width:330px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
  .coffre-titre{font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--gold); text-shadow:0 2px 8px rgba(0,0,0,0.9); letter-spacing:0.05em;}
  .coffre-btn img{width:110px;}
  .coffre-hint{font-size:10px; color:var(--ink-dim); min-height:12px;}
  .coffre-lignes{display:flex; flex-direction:column; gap:4px; min-height:10px; width:100%;}
  .coffre-ligne{display:flex; align-items:center; justify-content:center; gap:6px; font-family:var(--font-display); font-size:12px; color:var(--gold); opacity:0; transform:translateY(6px); transition:opacity 0.35s ease, transform 0.35s ease;}
  .coffre-ligne.vue{opacity:1; transform:none;}
  .coffre-ligne img{width:22px; height:22px;}
  .coffre-xp{display:flex; flex-direction:column; gap:3px; width:100%; margin-top:4px;}
  .coffre-comp{display:flex; align-items:center; gap:6px; padding:3px 6px; border-radius:7px; background:rgba(255,255,255,0.04); border:1px solid var(--panel-line); opacity:0; transform:translateY(6px); transition:opacity 0.35s ease, transform 0.35s ease;}
  .coffre-comp.vue{opacity:1; transform:none;}
  .coffre-comp.up{border-color:var(--gold); background:rgba(201,162,75,0.12); animation:coffre-up 0.9s ease-in-out 2;}
  @keyframes coffre-up{0%,100%{box-shadow:none;} 50%{box-shadow:0 0 12px rgba(201,162,75,0.7);}}
  /* Portrait = enfant DIRECT de la carte (>) : sans cela, la règle grossirait aussi à 26 px la petite icône de « Nouvelle
     compétence ». */
  .coffre-comp > img{width:26px; height:27px; border-radius:5px; object-fit:cover; object-position:top center;}
  .coffre-comp-new img.tsi{width:10px; height:10px; vertical-align:-1.5px;}
  .coffre-comp-txt{flex:1; text-align:left; min-width:0;}
  .coffre-comp-nom{font-size:9px; font-weight:700; color:var(--ink);}
  .coffre-comp-xp{font-size:8px; color:var(--ink-dim);}
  .coffre-comp-xp b{color:var(--gold);}
  .coffre-comp-up{font-family:var(--font-display); font-size:9px; font-weight:800; color:var(--gold); white-space:nowrap;}
  .coffre-comp-new{font-size:7.5px; color:#7ee09a; font-weight:700;}
  .coffre-continuer{margin-top:8px;}
  .tequip-stats-niveau{grid-template-columns:auto 1fr !important; color:var(--gold); font-size:9px; border-top:1px solid var(--panel-line); margin-top:3px; padding-top:3px;}
  .tequip-stats-niveau span:first-child{font-weight:700;}

  /* .btn-gold-img : classe utilitaire qui neutralise en !important fond/bordure/padding pour ne laisser visible que l'image
     dorée (indépendant de l'ordre des règles du bouton d'origine) ; variantes de taille normale/-sm/-icon. Les boutons à
     valeur dynamique (chance %, coût, vitesse) restent en texte pour l'état non couvert par l'image. */
  .btn-gold-img{background:none!important; border:none!important; padding:0!important; box-shadow:none!important; display:inline-flex!important; align-items:center; justify-content:center; cursor:pointer;}
  .btn-gold-img img{height:32px; width:auto; display:block; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6));}
  .btn-gold-img:hover:not(:disabled) img{filter:drop-shadow(0 3px 8px rgba(201,162,75,0.6)) brightness(1.08);}
  .btn-gold-img:disabled img, .btn-gold-img[disabled] img{opacity:0.4; filter:grayscale(60%);}
  .btn-gold-img.btn-gold-img-sm img{height:22px;}
  /* petit "+" circulaire (cf. .skill-plus) : l'image remplace le fond/texte mais garde le gabarit rond. */
  .skill-plus.btn-gold-img{width:18px; height:18px; border-radius:50%;}
  .skill-plus.btn-gold-img img{height:14px;}

  /* Boutons composés (libellé + valeur dynamique) : le libellé statique est déjà dans l'image, masqué visuellement (reste
     accessible aux lecteurs d'écran) ; seule la valeur dynamique (chance %, coût) reste affichée. */
  /* Le libellé statique (ENCHANTER/FUSIONNER/TESTE TA CHANCE) est un pseudo-élément ::before dédié, pour ne jamais
     chevaucher la valeur dynamique affichée en dessous. */
  .btn-gold-bg{background:none!important; border:none!important; box-shadow:none!important; padding:0!important;
    display:flex!important; flex-direction:column; align-items:center; gap:2px; position:relative;}
  /* .hidden doit toujours gagner : .btn-gold-img/.btn-gold-bg posent display en !important avec la même spécificité et sont
     déclarées après (sinon Lecture+Pause affichées ensemble, « Récupérer » visible sur un emplacement vide). Ne pas la
     retirer. */
  .btn-gold-img.hidden, .btn-gold-bg.hidden{display:none!important;}
  .btn-gold-bg::before{content:''; display:block; width:100%; aspect-ratio:2172/724; background-repeat:no-repeat!important; background-position:center!important; background-size:contain!important;}
  .forge-enchant-btn.btn-gold-bg .forge-enchant-label, .roulette-play-btn.btn-gold-bg .roulette-play-label{display:none;}
  .forge-enchant-btn.btn-gold-bg .forge-enchant-chance{font-size:9px; font-weight:700; color:var(--gold);}
  #roulette-play-btn.btn-gold-bg .roulette-play-cost{font-size:9px; color:var(--gold);}

/* Fiche des boss solo : deux onglets pour garder les sept compétences lisibles sans défilement. */
.fiche-boss-solo{width:440px;overflow:hidden;}
.fiche-boss-solo .fiche-comps{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.fiche-boss-solo .fiche-comp{align-content:start;}
.fiche-boss-solo .fiche-boutons{position:static;margin-top:6px;}
.fiche-boss-onglets{display:flex;gap:6px;margin:5px 0;}
.fiche-boss-onglets button{flex:1;padding:6px 3px;border:1px solid var(--gold-dim);border-radius:6px;background:#122536;color:var(--gold);font:inherit;font-size:11px;cursor:pointer;}
.fiche-boss-onglets button[aria-pressed="true"]{background:#443518;}
.fiche-skill-choix{padding:7px 5px;border:1px solid var(--gold-dim);border-radius:7px;background:#20291c;color:var(--gold);font:12px var(--font-display);text-align:left;cursor:pointer;}
.fiche-skill-choix small{display:block;font:10px sans-serif;color:var(--ink-dim);margin-top:3px;}
.fiche-skill-choix[aria-pressed="true"]{background:#4b3b1c;border-color:var(--gold);}
.fiche-skill-detail{grid-column:1/-1;min-height:80px;padding:7px;border:1px solid var(--panel-line);border-radius:7px;font-size:12px;line-height:1.35;color:var(--ink);}
.tact-boss-intention{position:absolute;top:3%;left:18%;width:64%;box-sizing:border-box;padding:5px 7px;border:1px solid #9e813c;border-radius:7px;background:rgba(12,19,30,.9);color:#e8cf8c;text-align:center;font-size:11px;z-index:9;pointer-events:none;}
.tact-boss-intention.annonce{border-color:#ff9157;color:#ffd4a2;}
.tact-boss-intention img.tsi{width:15px;height:15px;vertical-align:-3px;margin-right:3px;}

/* Même cadre visible pour Fermer/Affronter : compense les marges alpha propres aux images. */
#campagne-panel .campagne-panel-actions:has(#btn-campagne-tower-fight)>button{
  position:relative;flex:0 1 128px;width:128px;height:40px;min-width:0;
  padding:0;border:0;background:none;box-sizing:border-box;
}
#campagne-panel .campagne-panel-actions:has(#btn-campagne-tower-fight)>button img{
  position:absolute;object-fit:fill;max-width:none;display:block;
}
#campagne-panel .campagne-panel-actions:has(#btn-campagne-tower-fight) #btn-campagne-cancel img{
  width:100.6601%;height:102.7778%;left:-0.4951%;top:-1.6667%;
}
#campagne-panel #btn-campagne-tower-fight img[alt="Affronter"]{
  width:106.4211%;height:148.1855%;left:-3.1857%;top:-19.3548%;
}
#campagne-panel #btn-campagne-tower-fight img[alt="Rejouer"]{
  width:100.6623%;height:102.1739%;left:-0.4967%;top:-1.6304%;
}

/* Boutons illustres : gabarit commun Sericiculture, PC et mobile.
   Tous les cadres mesurent 210 x 60 px, textes dessines sans compression.
   Le masque suit le biseau dore et elimine les marges externes des sources. */
.btn-img-plain.btn-metier-illustre {
  position:relative; width:210px; height:60px; min-width:210px; max-width:210px;
  flex:0 0 auto; padding:0; border:0; background:none; border-radius:0;
  overflow:hidden; clip-path:polygon(8% 0,92% 0,100% 27%,100% 73%,92% 100%,8% 100%,0 73%,0 27%);
}
.btn-img-plain.btn-metier-illustre img {
  position:absolute; width:216.5px; height:auto; max-width:none;
  left:-3.25px; top:-4.5px; object-fit:contain; filter:none;
}
.tequip-topbar:has(> .btn-metier-illustre) {padding-right:12px;}
.btn-metier-illustre:focus-visible {filter:brightness(1.25);}

/* Bandeau « Boutique » des écrans de métier (#jardin-shop-btn/#vers-shop-btn/#pierre-shop-btn) réduit à 50 % (cadre, image
   et décalage), ces 3 boutons uniquement : les boutons de métier de la Cour (#cour-dialogue-*-btn) gardent 210x60. Ciblé
   par ID pour l'emporter sur la règle commune. */
#jardin-shop-btn.btn-metier-illustre,
#vers-shop-btn.btn-metier-illustre,
#pierre-shop-btn.btn-metier-illustre {
  width:105px; height:30px; min-width:105px; max-width:105px;
}
#jardin-shop-btn.btn-metier-illustre img,
#vers-shop-btn.btn-metier-illustre img,
#pierre-shop-btn.btn-metier-illustre img {
  width:108.25px; left:-1.625px; top:-2.25px;
}

/* Fiche boss : cadres visibles identiques 128 x 40, marges alpha compensees. */
#fiche-boss-backdrop .fiche-boutons{justify-content:center;}
#fiche-boss-backdrop .fiche-boutons > .btn-img-plain{
  position:relative;flex:0 0 128px;width:128px;height:40px;
  padding:0;border:0;background:none;
}
#fiche-boss-backdrop .fiche-boutons > .btn-img-plain img{
  position:absolute;max-width:none;object-fit:fill;display:block;
}
#fiche-boss-combattre img{width:105.5907%;height:109.8634%;left:-2.6738%;top:-6.2215%;}
#fiche-boss-reculer img{width:102.4818%;height:102.3288%;left:-1.8005%;top:-2.3288%;}

/* Leaderboard de campagne en ligne (Firebase) : classement à l'avancement + 1er achèvement, top 100. Reprend les
   conventions des popups existantes (.cour-dialogue-backdrop/.cour-dialogue-panel/.parametres-titre). */
.leaderboard-panel{width:280px; max-height:78vh; overflow:hidden; display:flex; flex-direction:column;}
.leaderboard-tabs{display:flex; gap:6px; margin-bottom:8px; width:100%;}
.leaderboard-tab{flex:1 1 0; font-family:var(--font-display); font-size:11px; font-weight:700;
  padding:6px 4px; border-radius:9px; border:1px solid var(--gold-dim);
  background:rgba(20,16,10,0.85); color:var(--ink-dim); cursor:pointer;}
.leaderboard-tab.active{border-color:var(--gold); background:linear-gradient(160deg,#f0d27a,#b8862b); color:#2a1d05;}
.leaderboard-list{width:100%; overflow-y:auto; max-height:52vh; text-align:left; font-size:12px;}
.leaderboard-row{display:flex; align-items:center; gap:8px; padding:6px 4px; border-bottom:1px solid rgba(255,255,255,0.06);}
.leaderboard-row:last-child{border-bottom:none;}
.leaderboard-rank{flex:0 0 22px; font-weight:700; color:var(--gold); text-align:right;}
.leaderboard-pseudo{flex:1 1 auto; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.leaderboard-stat{flex:0 0 auto; color:var(--ink-dim); font-size:11px;}
.leaderboard-state{padding:16px 4px; text-align:center; color:var(--ink-dim); font-size:12px;}

  /* Détecteur de config + cadre plein écran : le cadre 941/1672 (règle C9) est agrandi au maximum de l'écran par le
     détecteur de config, puis centré ici. Les bandes restantes montrent le fond flouté (#arkan-fond) sous un voile sombre
     (body::after). La page ne défile jamais (coupe aussi le « tirer pour rafraîchir » mobile). */
  html{height:100%; overflow:hidden; overscroll-behavior:none;
    background:radial-gradient(ellipse at 50% 45%, #1b1a12 0%, #0c0f0c 72%) #0c0f0c;}
  body{height:100%; overflow:hidden; overscroll-behavior:none; background:transparent;
    align-items:center; justify-content:center;
    padding:calc(env(safe-area-inset-top,0px) + var(--arkan-marge,0px))
            calc(env(safe-area-inset-right,0px) + var(--arkan-marge,0px))
            calc(env(safe-area-inset-bottom,0px) + var(--arkan-marge,0px))
            calc(env(safe-area-inset-left,0px) + var(--arkan-marge,0px));}
  .app{flex:0 0 auto;}
  #arkan-fond{position:fixed; inset:0; z-index:-1; pointer-events:none; background:transparent center/cover no-repeat;
    filter:blur(22px) brightness(0.55) saturate(1.1); transform:scale(1.15);}
  body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at 50% 50%, rgba(12,15,12,0) 40%, rgba(12,15,12,0.75) 100%);}
  /* téléphone : le cadre touche les bords de l'écran, les coins arrondis et les bords latéraux
     n'ont plus de sens ; on garde le filet haut/bas qui sépare le cadre des bandes. */
  html[data-arkan-appareil="telephone"] .screen{border-radius:0; border-left:none; border-right:none;}
  /* ?config=1 dans l'adresse : ce que le détecteur a vu (aide au réglage sur un vrai téléphone) */
  #arkan-config-debug{position:fixed; left:6px; bottom:6px; z-index:100000; white-space:pre; pointer-events:none;
    font:11px/1.35 monospace; color:#9fe29f; background:rgba(0,0,0,0.78); padding:6px 8px; border-radius:6px;}

  /* Pseudo du classement : au premier lancement, « Jouer » grisé (.pseudo-requis) et champ sous le bouton (top 59 %, Jouer
     étant centré à 50 % sur ~72 px pour un cadre de 420). Pendant la saisie tactile (html.pseudo-saisie), le champ remonte à
     20 % : la page ne défile plus, le clavier le cacherait. */
  .btn-jouer-img.pseudo-requis{cursor:not-allowed; pointer-events:none;}
  .btn-jouer-img.pseudo-requis img{filter:grayscale(0.85) brightness(0.55); opacity:0.75;}
  .pseudo-accueil{position:absolute; left:50%; top:59%; transform:translateX(-50%); width:74%; z-index:15;
    padding:10px 12px 8px; background:rgba(10,12,10,0.78); border:1px solid var(--gold-dim); border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.55); text-align:center;}
  html.pseudo-saisie .pseudo-accueil{top:20%;}
  .pseudo-accueil-titre{font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--gold); margin-bottom:8px;}
  .pseudo-accueil-note{font-size:10px; color:var(--ink-dim); margin-top:2px;}
  .pseudo-ligne{display:flex; gap:6px; align-items:stretch;}
  /* 16 px : en dessous, Safari iOS zoome toute la page a la prise de focus */
  .pseudo-form{width:100%;}
  .pseudo-input{flex:1 1 0; width:0; min-width:0; font-family:var(--font-display); font-size:16px; font-weight:700; text-align:center;
    padding:7px 8px; border-radius:9px; border:1px solid var(--gold-dim); background:rgba(0,0,0,0.5); color:var(--ink);}
  .pseudo-input::placeholder{color:var(--ink-dim); font-weight:400; font-size:12px;}
  .pseudo-input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,162,75,0.25);}
  .pseudo-valider{flex:0 0 auto; font-family:var(--font-display); font-size:13px; font-weight:700; padding:6px 12px; border-radius:9px;
    border:1px solid var(--gold); background:linear-gradient(160deg,#f0d27a,#b8862b); color:#2a1d05; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.5);}
  .pseudo-erreur{min-height:13px; font-size:10px; line-height:13px; color:#e58a78; margin:4px 0 2px;}

  /* « i » des cartes du deck builder (cf. CARTE_INFOS) : en bas à droite, car le haut-gauche porte le coût, le haut-droit
     les badges de bonus et le bas-centre les étoiles. 16 px visibles, zone de toucher agrandie à 28 px (::before). */
  .db-card-info{position:absolute; right:3px; bottom:3px; z-index:4; width:16px; height:16px; padding:0; border-radius:50%;
    border:1px solid var(--gold); background:rgba(10,12,10,0.88); color:var(--gold); cursor:pointer;
    font:italic 700 11px/1 Georgia, 'Times New Roman', serif; display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,0.7);}
  .db-card-info::before{content:""; position:absolute; inset:-6px;}
  .carte-info{width:272px; background:#141c17; border:1px solid var(--gold-dim); border-radius:14px; padding:14px 14px 14px;
    display:flex; flex-direction:column; align-items:center; position:relative; box-shadow:0 8px 30px rgba(0,0,0,0.6);}
  .carte-info{padding-top:38px;} /* le bouton Fermer (image, ~100 px) occupe le coin haut-droit : l'en-tete passe dessous, jamais a cote */
  .carte-info-tete{display:flex; align-items:center; gap:10px; width:100%; text-align:left;}
  #carte-info-img{width:48px; aspect-ratio:181/257; object-fit:contain; flex:0 0 auto; border-radius:5px;}
  .carte-info-titres{min-width:0;}
  .carte-info-nom{font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--gold); line-height:1.2;}
  .carte-info-rang{font-size:10px; color:var(--ink-dim); margin-top:3px; line-height:1.35;}
  .carte-info-rang span{white-space:nowrap;} /* « 3 mana », « 6 énergie » ne se coupent jamais en deux lignes */
  .carte-info-stats{display:flex; gap:6px; width:100%; margin-top:10px;}
  .carte-info-stat{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; padding:4px 2px;
    border:1px solid var(--panel-line); border-radius:8px; background:rgba(255,255,255,0.04);}
  .carte-info-stat .v{font-size:13px; font-weight:700; color:var(--ink); line-height:1.2;}
  .carte-info-stat .l{font-size:9px; color:var(--ink-dim); line-height:1.2;}
  .carte-info-effets{list-style:none; margin:8px 0 0; padding:0; width:100%; text-align:left; font-size:10.5px; line-height:1.4; color:var(--ink);}
  .carte-info-effets li{position:relative; padding-left:12px; margin-top:5px;}
  .carte-info-effets li::before{content:""; position:absolute; left:2px; top:6px; width:5px; height:5px; border-radius:50%; background:var(--gold);}

  /* Points d'exclamation du manoir et de la cour (cf. majExclamations) : posés sur le coin haut-droit du logo (position par
     exclPlace) et animés comme lui (mêmes @keyframes, même durée, transform-origin au centre du logo). Ne captent aucun
     clic. */
  .excl-badge{position:absolute; left:0; top:0; visibility:hidden; height:20px; width:auto; z-index:5; pointer-events:none;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.85)); transition:transform 0.4s ease;}
  .hub-hotspot .excl-badge{height:22px;}
  .hub-hotspot.active .excl-badge{animation:hub-marker-bob 1.6s ease-in-out infinite;}  /* = .hub-hotspot.active .hub-hotspot-icon */
  .coffre12h-btn.dispo .excl-badge{animation:chest-pulse 1.4s ease-in-out infinite;}      /* = .coffre12h-btn.dispo .coffre12h-icone */

/* Boutons de métier des bulles de la Cour uniquement (#cour-dialogue-backdrop) : homothétie à 80 % du gabarit commun
   210x60 → 168x48 (image et décalage du masque inclus), identique pour tous les PNJ. */
#cour-dialogue-backdrop .btn-img-plain.btn-metier-illustre {
  width:168px; height:48px; min-width:168px; max-width:168px; margin-top:10px;
}
#cour-dialogue-backdrop .btn-img-plain.btn-metier-illustre img {
  width:173.2px; left:-2.6px; top:-3.6px;
}

/* Onglets de héros Équipement/Compétences : vignette <role>-onglet (cf. roleOnglet), affichée de 26 à 38 px dans la case
   de 46 px de large (38 + 2 x 2 px de marge interne). */
.tequip-tab img{width:38px; height:38px; object-fit:cover; object-position:center; border-radius:5px;}
/* onglets du Forgeron : meme vignette nette, mais taille inchangee (26 px) - l'ecran Forgeron n'a pas
   de place en hauteur sur telephone (mesure : l'agrandir le ferait deborder davantage). */
.forge-tab img{object-position:center;}

/* Mode Test (tous les combats tour par tour, cf. tactStart) : écran en colonne, le journal prend toute la place restante
   sans hauteur fixe (à 162 px il sortait du cadre) ; en préparation, les potions de préparation prennent la place de la
   barre de compétences (vide à ce moment). */
/* Même colonne hors mode Test : en campagne avec bandeau Lecture/Pause, un journal à 108 px fixes sortait du cadre (21 px
   à 412 × 915, 39 px à 360 × 740). Le journal prend la place restante partout. */
#screen-tactique{display:flex; flex-direction:column;}
#screen-tactique > *{flex-shrink:0;}
#screen-tactique .tact-log{height:auto; flex:1 1 0; min-height:0;}
#screen-tactique.tact-mode-test #tact-prep-potions:not(.hidden) ~ #tact-skillbar{display:none !important;}

/* Écran de fin de combat de deck : contenu compact (espacements, coffre ouvert et icône de récompense plus petits, XP des
   compagnons sur 2 colonnes), car une grosse victoire dépassait le cadre (9 px à 412 × 915, 33 px à 360 × 740). Centrage
   « safe » + défilement en dernier recours. */
.end-overlay{gap:10px; justify-content:safe center; overflow-y:auto; padding:12px 10px; box-sizing:border-box;}
.end-overlay .chest-btn img.opened{width:92px;}
.end-overlay #chest-reward-icon{width:44px;}
.end-overlay .chest-reward{gap:4px;}
.end-overlay #chest-xp-reward.coffre-xp{display:grid; grid-template-columns:1fr 1fr; gap:4px; width:100%;}
.end-overlay #chest-xp-reward.hidden{display:none;}

/* Le ratio de tous les écrans (941/1672 par défaut, règle C9) devient --arkan-ratio, calculé par le détecteur de config :
   identique sur PC, plus allongé sur un téléphone plus allongé que 9:16 (même largeur, aucune bande vide). */
.app .screen{aspect-ratio:var(--arkan-ratio, 941 / 1672) !important;}

  /* Mode « Remplir tout l'écran » : Jardin et Vers à soie ont leurs trous/cases en % sur l'image 941x1672
     (GARDEN_HOLE_POSITIONS/VERS_HOLE_POSITIONS). L'image nette et ses trous restent sur une scène au ratio exact, centrée
     verticalement ; la hauteur en plus est remplie par le même fond, flou et assombri (un cover rognerait les côtés et
     décalerait les trous). */
  html[data-arkan-plein-cadre="1"] #screen-jardin, html[data-arkan-plein-cadre="1"] #screen-vers{background:#05060a;}
  html[data-arkan-plein-cadre="1"] #screen-jardin::before, html[data-arkan-plein-cadre="1"] #screen-vers::before{content:''; position:absolute; inset:-24px; background-repeat:no-repeat; background-position:center; background-size:cover; filter:blur(12px) brightness(0.55); pointer-events:none;}
  html[data-arkan-plein-cadre="1"] #screen-jardin::before{background-image:url('assets/jardin/jardin-fond.jpg');}
  html[data-arkan-plein-cadre="1"] #screen-vers::before{background-image:url('assets/vers/vers-fond.jpg');}
  html[data-arkan-plein-cadre="1"] #jardin-body, html[data-arkan-plein-cadre="1"] #vers-body{inset:auto 0; top:50%; height:auto; aspect-ratio:941/1672; transform:translateY(-50%); background-repeat:no-repeat; background-position:center; background-size:100% 100%;}
  html[data-arkan-plein-cadre="1"] #jardin-body{background-image:url('assets/jardin/jardin-fond.jpg');}
  html[data-arkan-plein-cadre="1"] #vers-body{background-image:url('assets/vers/vers-fond.jpg');}

  /* Hauteur FIXE de #status, prévue pour 2 lignes : un message long sur 2 lignes ne pousse plus le plateau ni le bas de
     l'écran (~15 px). */
  #screen-game .status{height:42px; min-height:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; line-height:15px; overflow:hidden;}

  /* Inventaire : le sac prend toute la hauteur libre (rangées calculées dans renderInventoryScreen, le reste de moins d'une
     rangée réparti entre elles) ; la fiche de l'objet a une hauteur FIXE (nom + catégorie + bouton « Voir / équiper »), rien
     ne bouge à la sélection. */
  #inventaire-sac{flex:1 1 0; min-height:0; align-content:space-between;}
  #inventaire-detail{flex:0 0 auto; height:88px; box-sizing:border-box;}

  /* Manoir et cour (mêmes classes) : boutons du haut centrés horizontalement dans la bande entre Retour (gauche) et son
     (droite), centrés verticalement entre eux. Si le logo Premium est masqué (Paramètres), le coffre seul se recentre. */
  /* 19 sept., « écarte légèrement l'un de l'autre (à égal distance du centre) » : 20 px entre les deux
     (au lieu de 8), chacun a 10 px de l'axe central. */
  /* Rangée du haut : Premium (58), Classement et Coffre (44x44, même habillage), 10 px entre chaque, centrés verticalement.
     Largeur 166 px : à 360 px (plus petite largeur de cadre), il reste 8 px avant Retour et 54 px avant le son. */
  .premium-btn{top:13px; left:calc(50% - 90px);}
  /* 19 sept. 2026 (boss : « Met le prenium au milieu ») : ordre Classement · Premium · Coffre, Premium centre. */
  .premium-btn{left:calc(50% - 29px);}
  .coffre12h-btn{top:13px; left:calc(50% + 39px);}
  /* Case du coffre 44x44 comme le Classement ; icône et compte à rebours réduits en proportion. */
  .coffre12h-btn{width:44px; height:44px; border-radius:11px;}
  .coffre12h-btn .coffre12h-icone{width:28px;}
  .coffre12h-btn .coffre12h-cooldown{font-size:8px; line-height:9px; margin-top:0; letter-spacing:0;}
  .btn-leaderboard{position:absolute; top:13px; left:calc(50% - 83px); z-index:99; width:44px; height:44px; padding:0; border:none; border-radius:11px; background:linear-gradient(160deg,#4a3418,#20150a); box-shadow:0 2px 6px rgba(0,0,0,0.6); cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;}
  .btn-leaderboard img{width:32px; height:32px; object-fit:contain; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6)); transition:transform 0.2s ease;}
  .btn-leaderboard:hover img{transform:scale(1.08);}
  /* logo Premium masque (Parametres) : Classement + Coffre se recentrent a deux */

  /* Sprite de boss : proportions d'origine, dans une boîte de 230 x 190 px au plus (la hauteur fixe de 76 px des monstres
     normaux l'étirait). */
  .neant-monster-sprite.boss{width:auto; height:auto; max-width:230px; max-height:190px;}
  /* couleurs des boules de boss (cf. NEANT_BOSS_COULEURS / neantBossLanceMotif) : teintes de l'orbe de feu */
  .neant-enemy-projectile.boss-orb-c0{filter:drop-shadow(0 0 10px rgba(255,90,30,0.95)) saturate(1.6);}
  .neant-enemy-projectile.boss-orb-c1{filter:hue-rotate(190deg) saturate(1.6) drop-shadow(0 0 10px rgba(60,160,255,0.95));}
  .neant-enemy-projectile.boss-orb-c2{filter:hue-rotate(95deg) saturate(1.7) drop-shadow(0 0 10px rgba(80,255,110,0.95));}
  .neant-enemy-projectile.boss-orb-c3{filter:hue-rotate(250deg) saturate(1.6) drop-shadow(0 0 10px rgba(190,80,255,0.95));}
  .neant-enemy-projectile.boss-orb-c4{filter:hue-rotate(300deg) saturate(1.8) drop-shadow(0 0 10px rgba(255,70,170,0.95));}
  .neant-enemy-projectile.boss-orb-c5{filter:hue-rotate(35deg) saturate(1.8) brightness(1.15) drop-shadow(0 0 10px rgba(255,230,60,0.95));}

/* Toute fenêtre a une sortie. Combats de deck et tour par tour : Retour = pause + confirmation d'abandon. Combat de deck :
   Retour en tête de la barre du haut ; la barre garde sa hauteur (bouton 22 px au lieu de 28, sinon le plateau descend de
   12 px). */
.pierre-backdrop .pierre-retour{position:absolute; top:10px; left:12px; z-index:10;}   /* = .hub-topbar : padding 10 px, bouton 28 px */
#screen-game .topbar .deck-retour{margin:-6px 8px -6px 0;}   /* marges negatives : la barre ne grandit pas (mesure) */
#screen-game .topbar .deck-retour img{height:22px;}
#screen-game .topbar > span:first-of-type{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#deck-abandon-backdrop{z-index:95;}
#tact-abandon-backdrop{z-index:95;}
/* fenetre de confirmation commune (combat de deck ET tour par tour) */
.abandon-actions{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:12px;}
/* les deux images n'ont pas les memes marges transparentes (Annuler : contenu = 73 % de la hauteur du
   fichier, Quitter : 98 %) : boites calculees pour que les deux boutons VISIBLES fassent ~25 px de haut */
.abandon-actions .cour-dialogue-test-btn.btn-img-plain{margin-top:0;}
.abandon-actions .abandon-non, .abandon-actions .abandon-non img{width:103px; height:34px;}
.abandon-actions .abandon-oui, .abandon-actions .abandon-oui img{width:85px; height:26px;}

/* 21 sept. 2026 : duos de mini-boss de la campagne (points 3/6/9…) — anneau orange sur la carte,
   noms du duo dans le panneau, fiche a deux onglets (un par mini-boss). */
.campagne-node.miniboss{border-color:#e08a3c; color:#ffd9b3; box-shadow:0 0 10px rgba(224,138,60,0.75);}
.campagne-node.miniboss.completed{border-color:var(--blue); color:#c7e1f2; box-shadow:0 0 8px rgba(63,127,176,0.6);}
.campagne-node.miniboss.locked{border-color:var(--panel-line); color:var(--ink-dim); box-shadow:none;}
.campagne-duo-noms{display:flex; justify-content:center; flex-wrap:wrap; gap:2px 14px; margin:0 0 6px; font-family:var(--font-display); font-size:12px; color:#ffd9b3;}
.fiche-boss-duo .fiche-boss-onglets button{font-family:var(--font-display);}
/* la fiche du duo montre competences ET preparation ensemble : plus compacte, pour tenir sans defilement */
.fiche-boss-duo .fiche-skill-detail{min-height:46px;}
.fiche-boss-duo .fiche-lignes{gap:4px;}
.fiche-boss-duo .fiche-ligne{padding:4px 7px; font-size:10.5px; line-height:1.25;}
.fiche-boss-duo .fiche-sous-titre{margin:6px 0 3px;}
/* mini-boss du haut : nom, puis barres (vie / vitesse / colere) et statuts AU-DESSUS du sprite */
.tact-unit.tact-duo-haut .tact-unit-name{order:0;}
.tact-unit.tact-duo-haut .tact-unit-bars{order:1; margin:0 0 1px;}
.tact-unit.tact-duo-haut .tact-unit-status{order:2; margin:0 0 1px;}
.tact-unit.tact-duo-haut .tact-unit-sprite{order:3;}
/* ... et remonte d'autant : sinon son sprite, pousse vers le bas par les barres, recouvrait le nom du mini-boss du bas */
.tact-unit.tact-duo-haut{transform:translate(-50%,-92%);}
/* les deux remontes legerement (demande du boss, 21/09 : « Essaie de les remonter legerement ») */
.tact-unit.tact-duo-bas{transform:translate(-50%,-70%);}
@keyframes tact-choc{0%{transform:translate(0,0)}15%{transform:translate(-5px,3px)}30%{transform:translate(5px,-3px)}45%{transform:translate(-4px,2px)}60%{transform:translate(3px,-2px)}80%{transform:translate(-1px,1px)}100%{transform:translate(0,0)}}
#tact-units.tact-choc{animation:tact-choc .45s ease-out;}

/* ===== Mode difficile (v164) : bouton de la carte, teinte sombre de la carte, point du Vortex ===== */
.campagne-difficile .campagne-world::before{content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, rgba(90,0,20,0.15) 30%, rgba(70,0,15,0.55) 100%); mix-blend-mode:multiply;}
.campagne-difficile .campagne-node{border-color:#c0303a;}
.campagne-node.vortex{width:46px; height:46px; margin-left:-23px; margin-top:-23px; border-color:#b04cff !important; box-shadow:0 0 18px rgba(176,76,255,0.9);}

/* ===== v165 : interrupteur Normal / Difficile de la carte de campagne ===== */
.campagne-switch{position:absolute; right:12px; bottom:14px; z-index:5; display:flex; flex-direction:column; align-items:flex-end; gap:6px; pointer-events:auto;}
.campagne-switch-cases{display:flex; background:rgba(12,14,12,0.88); border:1px solid var(--gold-dim); border-radius:16px; padding:3px; box-shadow:0 2px 8px rgba(0,0,0,0.6);}
.campagne-switch-cases button{display:flex; align-items:center; gap:5px; font-family:inherit; font-size:12px; font-weight:600; color:var(--ink-dim); background:none; border:none; border-radius:13px; padding:5px 14px; cursor:pointer;}
.campagne-switch-cases button[data-mode="normal"].actif{color:#1a1408; background:var(--gold);}
.campagne-switch-cases button[data-mode="difficile"].actif{color:#ffe0e0; background:#8e1f2a; box-shadow:0 0 10px rgba(192,48,58,0.7);}
.campagne-switch.verrouille button[data-mode="difficile"]{opacity:0.6;}
.campagne-switch-cadenas{width:14px; height:14px;}
.campagne-switch-info{max-width:86vw; text-align:center; font-size:10px; color:#f3d9a0; background:rgba(12,14,12,0.9); border:1px solid var(--gold-dim); border-radius:8px; padding:4px 8px;}

/* v167 : l'interrupteur Normal/Difficile se cache quand un panneau de point est ouvert (il passait dessous) */
#screen-campagne .campagne-panel:not(.hidden) ~ .campagne-switch{display:none;}

/* Bouton Connexion 7 jours (cour + manoir). Ordre du haut : Classement · Premium · Connexion 7 jours · Coffre (44 px, 10
   px d'écart). */
.connexion7-btn{position:absolute; top:13px; left:calc(50% + 39px); z-index:99; width:44px; height:44px; padding:0; border:none; border-radius:11px; background:linear-gradient(160deg,#4a3418,#20150a); box-shadow:0 2px 6px rgba(0,0,0,0.6); cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;}
.connexion7-btn .connexion7-icone{width:38px; height:38px; object-fit:contain; pointer-events:none;}
.connexion7-btn.dispo{box-shadow:0 0 10px 2px rgba(120,170,255,0.85), 0 2px 6px rgba(0,0,0,0.6);}
.connexion7-btn.dispo .connexion7-icone{animation:chest-pulse 1.4s ease-in-out infinite;}
.connexion7-btn.dispo .excl-badge{animation:chest-pulse 1.4s ease-in-out infinite;}
.coffre12h-btn{left:calc(50% + 93px);}
.connexion7-panel{position:relative; width:min(94%, 470px); aspect-ratio:1226/1283; background:url('assets/ui/connexion7-cadre.webp') center/100% 100% no-repeat; container-type:inline-size; color:#f3e7c4; font-family:inherit;}
.connexion7-close{position:absolute; top:13.5%; right:6%; z-index:3; width:7cqw; height:7cqw; min-width:0; min-height:0; padding:0; font-size:5cqw; line-height:1; display:flex; align-items:center; justify-content:center;}
.connexion7-titre{position:absolute; left:23.7%; top:5.1%; width:53%; height:7.4%; display:flex; align-items:center; justify-content:center; font-size:5cqw; font-weight:700; color:#f5d98c; text-shadow:0 1px 3px #000;}
.connexion7-grille{position:absolute; inset:0;}
.connexion7-case{position:absolute; box-sizing:border-box; overflow:hidden; padding:0.5cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6cqw; border-radius:3cqw; cursor:default; transition:filter .2s;}
.connexion7-jour{font-size:3.1cqw; line-height:1.15; font-weight:700; color:#f5d98c; text-shadow:0 1px 2px #000;}
.connexion7-gains{display:flex; gap:2cqw; align-items:flex-start; justify-content:center; flex-wrap:wrap;}
.connexion7-gain{display:flex; flex-direction:column; align-items:center; font-size:2.5cqw; line-height:1.15; font-weight:700; text-shadow:0 1px 2px #000;}
.connexion7-gain img{width:6.4cqw; height:6.4cqw; object-fit:contain;}
.connexion7-etat{font-size:2.4cqw; line-height:1.15; font-weight:700; padding:.4cqw 1.6cqw; border-radius:2cqw;}
.connexion7-case.fait{filter:grayscale(.7) brightness(.7);}
.connexion7-case.fait .connexion7-etat{color:#9fe39f;}
.connexion7-case.courant.dispo{cursor:pointer; box-shadow:0 0 3cqw 1cqw rgba(120,170,255,.7) inset; animation:chest-pulse 1.4s ease-in-out infinite;}
.connexion7-case.courant.dispo .connexion7-etat{background:linear-gradient(180deg,#f5d98c,#b8862f); color:#2a1b06;}
.connexion7-case.futur{opacity:.8;}
.connexion7-message{position:absolute; left:12%; right:12%; top:19%; height:64%; display:none; flex-direction:column; align-items:center; justify-content:center; gap:1cqw; padding:2cqw; box-sizing:border-box; overflow:hidden; text-align:center; font-size:2.6cqw; line-height:1.2; font-weight:600; text-shadow:0 1px 2px #000; background:rgba(10,18,36,0.94); border:0.4cqw solid #c9a45a; border-radius:3cqw; z-index:2; cursor:pointer;}
.connexion7-message.visible{display:flex;}
.connexion7-message span{display:flex; align-items:center; gap:1.2cqw;}
.connexion7-message img{width:4cqw; height:4cqw; object-fit:contain; vertical-align:middle;}
.connexion7-case.j7{flex-direction:row; gap:5cqw;}   /* jour 7 : la barre est basse, tout sur une ligne */
.connexion7-case.j7 .connexion7-jour{font-size:3.6cqw;}
.connexion7-case.j7 .connexion7-gain img{width:7.5cqw; height:7.5cqw;}

/* Rangée Classement · Premium · Connexion 7 jours · Coffre centrée : 44 + 58 + 44 + 44 + 3 x 10 = 220 px, de −110 à +110 ;
   rien ne se superpose. */
.btn-leaderboard{left:calc(50% - 110px);}
.premium-btn{left:calc(50% - 56px);}
.connexion7-btn{left:calc(50% + 12px);}
.coffre12h-btn{left:calc(50% + 66px);}
@media (max-width:380px){   /* petits téléphones : cases de 38 px, 6 px d'écart (38 x 3 + 50 + 18 = 182 px) */
  .btn-leaderboard, .connexion7-btn, .coffre12h-btn{width:38px; height:38px; border-radius:10px;}
  .btn-leaderboard img{width:28px; height:28px;}
  .connexion7-btn .connexion7-icone{width:32px; height:32px;}
  .coffre12h-btn .coffre12h-icone{width:24px;}
  .premium-btn{width:50px;}
  .btn-leaderboard{left:calc(50% - 91px);}
  .premium-btn{left:calc(50% - 47px);}
  .connexion7-btn{left:calc(50% + 9px);}
  .coffre12h-btn{left:calc(50% + 53px);}
}

/* ===== 26 sept. 2026 : boutique d'équipement du Marchand ===== */
.boutique-panel{width:min(94%, 470px); max-width:470px; box-sizing:border-box;}
.boutique-info{display:flex; align-items:center; justify-content:center; gap:5px; font-size:12px; color:#f0d9a0; margin:4px 0 8px;}
.boutique-info img{width:16px; height:16px; object-fit:contain;}
.boutique-grille{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px;}
.boutique-carte{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; box-sizing:border-box; min-width:0; background:rgba(10,18,36,0.75); border:1px solid rgba(201,164,90,0.7); border-radius:8px; text-align:center;}
.boutique-carte.achete{filter:grayscale(0.7) brightness(0.75);}
.boutique-icone{width:46px; height:46px; object-fit:contain;}
.boutique-nom{font-size:11px; font-weight:700; line-height:1.15; overflow-wrap:anywhere; text-shadow:0 1px 2px #000;}
.boutique-classe{font-size:10px; color:#cfc3a0; line-height:1.15; overflow-wrap:anywhere;}
.boutique-acheter{margin-top:auto; display:flex; align-items:center; justify-content:center; gap:4px; width:100%; padding:4px 2px; font-size:12px; font-weight:700; color:#2a1b06; background:linear-gradient(180deg,#f5d98c,#b8862f); border:none; border-radius:6px; cursor:pointer;}
.boutique-acheter img{width:14px; height:14px; object-fit:contain;}
.boutique-acheter:disabled{cursor:default; opacity:0.55;}
.boutique-carte.achete .boutique-acheter{opacity:1; background:#3b5b3b; color:#bfe8bf;}
.boutique-message{min-height:16px; margin-top:8px; font-size:12px; font-weight:600; color:#f0d9a0; text-align:center;}

.boutique-carte{position:relative;}
.boutique-reduc{position:absolute; top:3px; right:3px; padding:1px 5px; font-size:10px; font-weight:800; color:#fff; background:#c0392b; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.6);}
.boutique-acheter s{opacity:.65; font-weight:600;}

/* 26/09 : description des objets de l'inventaire (hors équipement) */
.inventaire-description{display:block; font-size:12px; line-height:1.3; color:#e6d7ae; font-style:italic; margin-top:3px;}
.connexion7-gain{cursor:pointer;}
/* 26/09 : le cadre de détail accueille la description (2 phrases pour une potion) : 88 -> 124 px, sac d'autant plus court */
#inventaire-detail{height:124px; gap:3px; padding:8px 10px;}
.inventaire-description{font-size:11px; margin-top:1px;}

/* ===== 27 sept. 2026 : tutoriel cinématique de la Cour (cf. courTuto* dans script.js) ===== */
.cour-tuto{position:absolute; inset:0; z-index:5000; pointer-events:auto; touch-action:none;}
.cour-tuto-bande{position:absolute; left:0; right:0; background:#000; transition:transform .7s ease, opacity .7s ease; box-shadow:0 0 18px rgba(0,0,0,0.8);}
.cour-tuto-haut{top:0; height:10%; transform:translateY(-100%);}
.cour-tuto-bas{bottom:0; min-height:22%; transform:translateY(100%); display:flex; align-items:flex-end; gap:10px; padding:10px 12px 12px; box-sizing:border-box;}
.cour-tuto.ouvert .cour-tuto-haut, .cour-tuto.ouvert .cour-tuto-bas{transform:none;}
.cour-tuto.ferme .cour-tuto-bande{opacity:0;}
.cour-tuto-passer{position:absolute; right:10px; bottom:8px; background:none; border:none; color:rgba(240,217,160,0.6); font-size:12px; text-decoration:underline; cursor:pointer; padding:4px;}
.cour-tuto-passer:hover{color:#f0d9a0;}
.cour-tuto-dev{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; align-self:flex-end;}
.cour-tuto-bulle{flex:1 1 auto; min-width:0; max-width:760px; min-height:118px; align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; gap:6px; background:rgba(10,18,36,0.9); border:1px solid rgba(201,162,75,0.7); border-radius:10px; padding:10px 12px; box-sizing:border-box; opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease;}
.cour-tuto.parle .cour-tuto-bulle{opacity:1; transform:none;}
.cour-tuto-texte{font-size:14px; line-height:1.35; color:#ece3cc; overflow-y:auto;}
.cour-tuto-texte b{color:#f5d98c; font-weight:700;}
.cour-tuto-suivant{align-self:flex-end; padding:6px 16px; font-size:13px; font-weight:700; color:#2a1b06; background:linear-gradient(180deg,#f5d98c,#b8862f); border:none; border-radius:6px; cursor:pointer;}
.cour-tuto-message{position:absolute; left:50%; top:22%; transform:translateX(-50%); z-index:5001; padding:10px 18px; background:rgba(10,18,36,0.92); border:1px solid rgba(201,162,75,0.8); border-radius:10px; color:#f0d9a0; font-family:var(--font-display,'Cinzel'),serif; font-weight:700; font-size:15px; text-align:center; max-width:86vw; transition:opacity .6s ease; pointer-events:none;}
.cour-tuto-message.part{opacity:0;}
body.cour-tuto-actif #cour-joystick{display:none !important;}
/* cinématique : l'interface de la Cour s'efface, seule la scène reste */
body.cour-tuto-actif #screen-cour > *:not(.cour-viewport):not(#cour-tuto):not(.cour-tuto-message){visibility:hidden;}
@media (max-width:480px){
  .cour-tuto-texte{font-size:13px;}
  .cour-tuto-bas{padding-bottom:30px;}
  .cour-tuto-texte{font-size:12.5px;}
  .cour-tuto-passer{bottom:4px;}
}

/* « The Dev » en pied (image 690x840), calé en bas à gauche, bas du corps et bouclier volontairement en partie hors champ
   (left -13 %, hauteur 58 %). Enfant direct de #cour-tuto : ses % se mesurent sur le cadre entier. Plans : bande noire <
   The Dev < bulle ; la bande basse n'a plus de transform une fois ouverte (transform:none ne crée pas de contexte
   d'empilement), sinon la bulle resterait sous le personnage. */
.cour-tuto-dev{position:absolute; left:-13%; bottom:-16%; height:58%; width:118%; object-fit:contain; object-position:left bottom; z-index:1; pointer-events:none; user-select:none; filter:drop-shadow(0 0 10px rgba(0,0,0,0.9)); transform:translateX(-120%); transition:transform .5s ease .2s;}
.cour-tuto.ouvert .cour-tuto-dev{transform:none;}
.cour-tuto.ferme .cour-tuto-dev{opacity:0; transition:opacity .6s ease;}
.cour-tuto-bas{padding-left:40% !important;}
.cour-tuto-bulle{position:relative; z-index:2;}

/* ===== 27/09 : flèche vers le manoir (cf. courFlecheMaj) : posée dans #cour-viewport, au-dessus du décor ===== */
.cour-fleche-manoir{position:absolute; left:0; top:0; z-index:4000; pointer-events:none; line-height:0; filter:drop-shadow(0 0 6px rgba(0,0,0,0.85)) drop-shadow(0 0 10px rgba(245,217,140,0.55)); will-change:transform;}
.cour-tuto-message{line-height:1.35;}

/* ===== 27/09 : tutoriel du manoir (cf. manoirTuto* dans script.js) : même calque que la Cour (.cour-tuto) ===== */
/* cinématique : l'interface du manoir s'efface, seule la scène reste */
body.manoir-tuto-actif #screen-hub > *:not(.hub-viewport):not(#manoir-tuto):not(.cour-tuto-message){visibility:hidden;}
/* point d'intérêt présenté : même éclat que le point « actif » quand le personnage s'en approche */
.hub-hotspot.tuto-focus .hub-hotspot-icon{filter:grayscale(0%) brightness(1.2) drop-shadow(0 0 14px rgba(245,217,140,1)); opacity:1; transform:scale(1.22); animation:hub-marker-bob 1.6s ease-in-out infinite;}

/* Boutons Retour / Équiper (et Retour / Sélectionner de la fusion, même fenêtre) : 40 px de haut, images 2,5:1 donc 100 px
   de large, deux côte à côte dans les 226 px utiles de la fenêtre (250 px - marges). */
.tequip-item-popup-actions{justify-content:center; gap:10px;}
.tequip-item-popup-actions .btn-gold-img.btn-gold-img-sm img{height:40px; max-width:100%; object-fit:contain;}

/* ===== 27/09 : fiche d'équipement (cf. ficheEquipOuvre dans script.js) : petit cadre nom + stats au clic sur une pièce ===== */
.fiche-equip{position:fixed; z-index:20000; pointer-events:auto; min-width:140px; box-sizing:border-box; padding:8px 11px 9px;
  background:rgba(14,20,17,0.96); border:1px solid var(--tier-color,#c9a24b); border-radius:9px;
  box-shadow:0 6px 18px rgba(0,0,0,0.7), 0 0 10px color-mix(in srgb, var(--tier-color,#c9a24b) 35%, transparent);
  opacity:0; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease;}
.fiche-equip.visible{opacity:1; transform:none;}
.fiche-equip-nom{font-family:var(--font-display,'Cinzel'),serif; font-weight:700; font-size:13px; line-height:1.2; color:var(--tier-color,#c9a24b); overflow-wrap:anywhere;}
.fiche-equip-info{font-size:10.5px; color:rgba(236,227,204,0.65); margin:2px 0 5px; overflow-wrap:anywhere;}
.fiche-equip-stat{font-size:12px; line-height:1.4; color:#ece3cc;}
.fiche-equip-enchant{font-size:11px; color:#f5d98c; margin-top:3px;}

/* 27/09 : cadeau du duel du tutoriel (Rubis 12 %) dans la bulle de The Dev */
.cour-tuto-cadeau{display:flex; align-items:center; gap:8px; margin-top:6px; padding:5px 8px; background:rgba(201,162,75,0.12); border:1px solid rgba(201,162,75,0.45); border-radius:7px;}
.cour-tuto-cadeau img{width:30px; height:30px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 0 5px rgba(255,90,90,0.55));}

/* Bande basse des tutoriels de hauteur fixe : 30 % du cadre, partout. La bulle la remplit ; si un texte ne tient pas
   (langue longue, petit écran), sa police baisse par pas de 0,5 px (cf. courTutoAjusteTexte) au lieu d'agrandir la bande. */
.cour-tuto-bas{height:30%; min-height:0 !important;}
.cour-tuto-bulle{min-height:0; height:100%;}
.cour-tuto-texte{flex:1 1 auto; min-height:0; overflow:hidden !important;}
.cour-tuto-suivant{flex:0 0 auto;}
/* page du cadeau (duel du tutoriel) : l'objet en grand, son texte dessous */
.cour-tuto-cadeau.page{display:block; margin:0; padding:0; background:none; border:none;}
.cour-tuto-cadeau.page img{float:left; width:44px; height:44px; margin:1px 9px 2px 0;}   /* le texte coule autour de l'objet : tient dans la bande fixe même à 360 px */

/* Bulle plus large : la bande laisse 34 % à The Dev, la bulle reste au-dessus de lui ; lignes équilibrées, sans mot ni
   signe isolé en fin de paragraphe. */
.cour-tuto-bas{padding-left:34% !important;}
.cour-tuto-texte{text-wrap:pretty; hyphens:manual;}
/* une phrase par ligne dans les bulles du tuto (cf. courTutoAjusteTexte) : saut de ligne + 4 px d'air */
.cour-tuto-texte .tuto-saut{display:block; height:4px;}
/* 27/09 (boss : « mets le texte sous la pierre ») : page du cadeau centrée, la pierre au-dessus, le texte dessous */
.cour-tuto-cadeau.page{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; min-height:100%;}
.cour-tuto-cadeau.page img{float:none; width:42px; height:42px; margin:0;}
@media (max-width:480px){ .cour-tuto-cadeau.page img{width:34px; height:34px;} }
/* 27/09 (boss : « centre à gauche le texte ») : pierre toujours centrée en haut, texte du cadeau aligné à gauche */
.cour-tuto-cadeau.page > span{align-self:stretch; text-align:left;}

/* ===== 27/09 : phases explicatives map du portail / carte de campagne (cf. tutoScene* dans script.js) ===== */
/* l'interface de l'écran s'efface pendant la phase, seule la scène reste (et l'élément présenté) */
body.tuto-scene-actif .tuto-scene-ecran > *:not(.tuto-scene):not(.cour-viewport):not(.campagne-viewport):not(.cour-tuto-message){visibility:hidden;}
body.tuto-scene-actif #monde-joystick, body.tuto-scene-actif .cour-joystick{display:none !important;}
/* élément présenté : visible même si son parent est masqué, entouré d'un halo doré qui pulse */
.tuto-focus-el{visibility:visible !important; z-index:4990; box-shadow:0 0 0 3px rgba(245,217,140,0.95), 0 0 18px 6px rgba(245,217,140,0.75) !important; animation:tuto-focus-pulse 1.3s ease-in-out infinite; border-radius:10px;}
.campagne-node.tuto-focus-el{border-radius:50%;}
@keyframes tuto-focus-pulse{0%,100%{box-shadow:0 0 0 3px rgba(245,217,140,0.95), 0 0 14px 4px rgba(245,217,140,0.6);} 50%{box-shadow:0 0 0 4px rgba(255,236,170,1), 0 0 26px 10px rgba(245,217,140,0.85);}}
.tuto-focus-parent{z-index:5002 !important;}

/* Fenêtre de la pierre de bénédiction : Accepter la bénédiction / Soigne-nous ont le même cadre 180 x 60 px (images 3:1),
   l'un sous l'autre, centrés. */
.portail-panel .portail-btn.btn-img-plain{width:180px; height:60px; display:flex; margin:8px auto 0 !important;}
.portail-panel .portail-btn.btn-img-plain img{width:180px; height:60px; object-fit:fill;}
/* Les deux images n'ont pas le même cadre peint (bénédiction : 57 % de la hauteur et 96 % de la largeur ; soin : 61 % et
   94 %, mesuré sur l'opacité > 200) : chacune est étirée pour que son CADRE VISIBLE fasse 172 x 37 px ; le bouton garde sa
   zone 180 x 60. */
.portail-panel .portail-btn.btn-img-plain{overflow:visible; align-items:center; justify-content:center;}
#statue-btn-1.btn-img-plain img{width:178px; height:65px; flex:0 0 auto;}
#statue-btn-2.btn-img-plain img{width:182px; height:61px; flex:0 0 auto;}

/* 27/09 : portraits dédiés des adversaires (fond peint, tête centrée) : cadrés comme ceux des compagnons ; repli sur le
   sprite entier (sans-portrait) : on le montre en entier plutôt que rogné */
.tact-roster-portrait{object-position:center center;}
.tact-roster-portrait.sans-portrait{object-fit:contain; object-position:center bottom;}

  /* Tailles de boutons : cible tactile ≥ 32 px, paires de boutons de mêmes dimensions (audit de 26 écrans à 412 px). */
  .btn-back-img img{height:30px;}                                                /* Retour (barres du haut) : 28 → 34, puis 30 (29/09, boss : « réduis un petit peu ») */
  .btn-gold-img.btn-gold-img-sm img{height:30px;}                               /* petits boutons image : 22 → 30 */
  .cour-dialogue-close{width:32px; height:32px; font-size:16px;}                /* × des fenêtres (paramètres, boutique, premium…) */
  .tequip-item-popup-close{width:32px; height:32px; top:4px; right:4px; font-size:20px; display:flex; align-items:center; justify-content:center;}
  .skill-plus, .skill-plus.btn-gold-img{width:26px; height:26px; line-height:24px; font-size:14px;}
  .skill-plus.btn-gold-img img{height:20px;}
  .boutique-acheter{padding:7px 2px; font-size:13px;}
  .boutique-acheter img{width:16px; height:16px;}
  /* combat : « x1 » et « Auto » forment une paire → même gabarit 85 × 34 */
  #tact-btn-speed, #tact-btn-auto{width:85px!important; height:34px!important; padding:0!important; border-radius:17px;}
  /* bandeau « Boutique » des métiers, à côté de « Retour » : même hauteur (34) */
  #jardin-shop-btn.btn-metier-illustre, #vers-shop-btn.btn-metier-illustre, #pierre-shop-btn.btn-metier-illustre{width:119px; height:34px; min-width:119px; max-width:119px;}
  #jardin-shop-btn.btn-metier-illustre img, #vers-shop-btn.btn-metier-illustre img, #pierre-shop-btn.btn-metier-illustre img{width:122.7px; left:-1.84px; top:-2.55px;}
  /* paires à cadre peint identique (méthode de la fiche boss : boîte fixe, marges alpha compensées) */
  .abandon-actions .abandon-non, .abandon-actions .abandon-oui{position:relative; flex:0 1 120px; min-width:0; max-width:120px; width:120px; height:auto; aspect-ratio:3/1; padding:0; overflow:visible;}   /* restent dans la fenêtre (28/09, boss : « ne sort pas des cadres ») */
  .abandon-actions .abandon-non img, .abandon-actions .abandon-oui img{position:absolute; max-width:none; object-fit:fill; display:block;}
  .abandon-actions .abandon-non img{width:108.08%; height:130%; left:-4.08%; top:-16.8%;}   /* cadre peint mesuré : même hauteur que « Quitter » */
  .abandon-actions .abandon-oui img{width:100%; height:100%; left:0; top:0;}
  .abandon-actions{gap:8px; padding:0 4px; width:100%; box-sizing:border-box;}
  .hub-topbar .btn-back-img img, .cour-topbar .btn-back-img img{height:26px;}   /* manoir / cour : place pour le bouton Classement (28 → 26 le 29/09) */
  @media (max-width:400px){ .hub-topbar .btn-back-img img, .cour-topbar .btn-back-img img{height:24px;} }   /* manoir / cour : laisse la place au bouton Classement sur petit écran (360 px) */

  /* Glyphes (cf. glyphes.js) : écran plein cadre = plateau 941/1672, 8 emplacements placés en % (4 ronds, 4 carrés) ; le
     plateau garde son ratio et se centre si l'écran est plus haut. */
  #screen-glyphes{background:#1b1a16; position:relative;}
  .gly-plateau{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); aspect-ratio:941/1672; background:url('assets/glyphes/plateau.webp') no-repeat center / 100% 100%;}
  .gly-retour{position:absolute; top:12px; left:12px; z-index:3;}
  .gly-empl{position:absolute; transform:translate(-50%,-50%); background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; aspect-ratio:1;}
  .gly-empl.gly-rond{width:15.5%;} .gly-empl.gly-carre{width:17%;}
  .gly-empl .gly-ic{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.7));}
  .gly-empl.vide{border-radius:50%; box-shadow:0 0 0 2px rgba(201,162,75,0.55) inset, 0 0 12px rgba(201,162,75,0.35); animation:gly-pulse 2.2s ease-in-out infinite;}
  .gly-empl.gly-carre.vide{border-radius:10%;}
  .gly-plus{font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--gold); text-shadow:0 1px 4px #000;}
  .gly-empl.verrou{cursor:default; flex-direction:column; gap:2px;}
  .gly-cadenas{width:34%; opacity:0.95; filter:drop-shadow(0 1px 3px #000);}
  .gly-niv{font-family:var(--font-display); font-size:8.5px; font-weight:700; color:#e9e4d8; background:rgba(10,10,8,0.75); border-radius:8px; padding:1px 5px; white-space:nowrap;}
  .gly-rang{position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); font-size:8px; line-height:1; color:#ffd76a; background:rgba(10,10,8,0.8); border-radius:7px; padding:2px 4px; white-space:nowrap; letter-spacing:-0.5px;}
  @keyframes gly-pulse{0%,100%{box-shadow:0 0 0 2px rgba(201,162,75,0.4) inset,0 0 6px rgba(201,162,75,0.2);}50%{box-shadow:0 0 0 2px rgba(201,162,75,0.85) inset,0 0 14px rgba(201,162,75,0.5);}}
  .gly-centre{position:absolute; left:50%; top:47.1%; transform:translate(-50%,-50%); width:37%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(12,11,9,0.88) 55%, rgba(12,11,9,0.55) 75%, rgba(12,11,9,0) 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; padding:8%; box-sizing:border-box;}
  .gly-centre-titre{font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold); margin-bottom:3px;}
  .gly-centre-l{font-size:8.5px; font-weight:700; line-height:1.2; text-shadow:0 1px 2px #000;}
  .gly-centre-vide{font-size:8.5px; color:var(--ink-dim);}
  .gly-bas{position:absolute; left:50%; bottom:1.2%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; background:rgba(12,11,9,0.85); border:1px solid var(--gold-dim); border-radius:14px; padding:4px 10px; z-index:2;}
  .gly-fleche{background:none; border:none; color:var(--gold); font-size:14px; cursor:pointer; padding:2px 6px;}
  .gly-perso{font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold); white-space:nowrap; min-width:110px; text-align:center;}
  .gly-perso-niv{font-size:9px; color:var(--ink-dim);}
  .gly-popup{position:absolute; left:4%; right:4%; top:50%; transform:translateY(-50%); z-index:5; background:rgba(14,13,10,0.97); border:1px solid var(--gold-dim); border-radius:14px; padding:14px 12px 12px; box-shadow:0 10px 30px rgba(0,0,0,0.7); display:flex; flex-direction:column; gap:8px;}
  .gly-popup.hidden, .gly-fusion.hidden{display:none;}
  .gly-popup-titre{font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--gold); text-align:center;}
  .gly-grille{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; max-height:210px; overflow-y:auto; scrollbar-width:none;}
  .gly-grille::-webkit-scrollbar{display:none;}
  .gly-case{position:relative; aspect-ratio:1; background:rgba(255,255,255,0.04); border:1px solid var(--panel-line); border-radius:8px; padding:3px; cursor:pointer;}
  .gly-case img{width:100%; height:100%; object-fit:contain;}
  .gly-case.choisi{border-color:var(--gold); box-shadow:0 0 8px rgba(201,162,75,0.6);}
  .gly-case.inactif{opacity:0.45;}
  .gly-case .gly-rang{bottom:1px; font-size:6.5px;}
  .gly-nb{position:absolute; top:1px; right:2px; font-size:8px; font-weight:700; color:#1b160a; background:var(--gold); border-radius:7px; padding:0 4px; line-height:12px;}
  .gly-vide-msg{grid-column:1 / -1; font-size:10px; color:var(--ink-dim); text-align:center; padding:14px 6px; line-height:1.5;}
  .gly-detail{display:flex; align-items:center; gap:8px; min-height:44px; background:rgba(255,255,255,0.03); border-radius:8px; padding:5px 8px;}
  .gly-detail img{width:40px; height:40px; object-fit:contain; flex:0 0 auto;}
  .gly-detail img.gly-detail-mini, .gly-fusion-resultat img.gly-detail-mini{width:22px; height:22px; vertical-align:middle; margin:0 1px;}   /* 28/09 : recyclage, 3 icônes dans la ligne */
  .gly-detail-nom{font-family:var(--font-display); font-size:11px; font-weight:700;}
  .gly-detail-rang{color:#ffd76a; font-family:var(--font-body); font-size:10px;}
  .gly-detail-effet{font-size:10px; color:var(--ink);}
  .gly-detail-chance{font-size:10px; color:var(--gold); font-weight:700; margin-top:2px;}
  .gly-detail-aide{font-size:9.5px; color:var(--ink-dim);}
  .gly-actions{display:flex; justify-content:center; align-items:center; gap:10px;}
  .gly-actions .btn-gold-img{width:auto;}
  .gly-actions .btn-gold-img.btn-gold-img-sm img{height:40px; max-width:100%; object-fit:contain;}   /* même taille que les popups d'équipement */
  .gly-btn-texte{min-height:34px;}
  .gly-actions button:disabled{opacity:0.45; cursor:not-allowed;}
  .gly-btn-texte{font-family:var(--font-display); font-size:11px; font-weight:700; color:#e9e4d8; background:rgba(120,30,30,0.85); border:1px solid #b35050; border-radius:10px; padding:6px 12px; cursor:pointer;}
  .gly-btn-texte.hidden{display:none;}
  /* bouton image « Glyphes » (planche du boss, 28/09) : même hauteur que « Retour » dans la barre du haut */
  .gly-topbar-btn{margin-left:auto; display:inline-flex; align-items:center; background:none; border:none; padding:0; cursor:pointer; flex:0 0 auto;}
  .gly-topbar-btn img{height:28px; width:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.65));}
  .gly-topbar-btn:hover img{filter:drop-shadow(0 2px 6px rgba(201,162,75,0.6)) brightness(1.08);}
  .gly-fusion{position:absolute; inset:0; z-index:6; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center;}
  .gly-fusion-cadre{position:relative; width:92%; background:rgba(14,13,10,0.97); border:1px solid var(--gold-dim); border-radius:14px; padding:14px 12px 12px; box-shadow:0 10px 30px rgba(0,0,0,0.7); display:flex; flex-direction:column; gap:8px;}
  .gly-fusion-regle{font-size:9.5px; color:var(--ink-dim); text-align:center; line-height:1.4;}
  .gly-grille-fusion{max-height:250px;}
  .gly-fusion-resultat{min-height:16px; font-size:11px; font-weight:700; text-align:center;}
  .gly-ok{color:#4fd67a;} .gly-ko{color:#ff6b6b;}
  .coffre-ligne .gly-coffre-ic{width:20px; height:20px; margin-left:1px; vertical-align:middle;}
  /* ===== 28/09 : page de fusion des glyphes (#screen-gly-fusion, cf. glyphes.js construitFusion) — fond de pierre du boss ===== */
  #screen-gly-fusion{position:relative; display:flex; flex-direction:column; background:#141210 url('assets/glyphes/fusion-fond.webp') no-repeat center / 100% 100%;}
  .glyf-top{position:relative; display:flex; align-items:center; justify-content:space-between; padding:10px 60px 4px 12px; flex:0 0 auto;}   /* 60 px à droite : la roue des Paramètres est en absolu dans ce coin */
  .glyf-info{width:32px; height:32px; border-radius:50%; border:none; background:url('assets/ui/icon-info.webp') center/100% 100% no-repeat; cursor:pointer; font-size:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.7));}
  .glyf-info:hover{filter:drop-shadow(0 2px 6px rgba(201,162,75,0.7)) brightness(1.1);}
  .glyf-reserve{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin:2px 14px 0; background:rgba(8,7,5,0.55); border:1px solid rgba(201,162,75,0.35); border-radius:12px; padding:6px 8px 8px;}
  .glyf-reserve-titre{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--gold); text-align:center; margin-bottom:5px; letter-spacing:0.5px;}
  .glyf-grille{max-height:none; flex:1 1 auto; min-height:0; grid-auto-rows:min-content; align-content:start;}
  .glyf-grille .gly-case{background:rgba(0,0,0,0.45); border-color:rgba(201,162,75,0.35);}
  .glyf-atelier{flex:0 0 auto; margin:8px 14px 12px; background:rgba(8,7,5,0.72); border:1px solid rgba(201,162,75,0.5); border-radius:14px; padding:10px 10px 8px; display:flex; flex-direction:column; gap:6px; box-shadow:0 8px 24px rgba(0,0,0,0.6);}
  .glyf-cases{display:flex; align-items:center; justify-content:center; gap:8px;}
  .glyf-signe{font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--gold); text-shadow:0 1px 4px #000; width:18px; text-align:center;}
  .glyf-case{position:relative; width:64px; height:64px; flex:0 0 64px; border-radius:12px; background:rgba(0,0,0,0.55); border:2px dashed rgba(201,162,75,0.5); padding:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s, box-shadow .2s, transform .5s ease-in, opacity .5s;}
  .glyf-case img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.8));}
  .glyf-case.pleine{border-style:solid; border-color:var(--gold); box-shadow:0 0 10px rgba(201,162,75,0.45);}
  .glyf-case .gly-rang{bottom:2px; font-size:7px;}
  .glyf-case-r{cursor:default; border-color:rgba(201,162,75,0.35); background:radial-gradient(circle, rgba(201,162,75,0.12), rgba(0,0,0,0.6) 70%);}
  .glyf-interro{font-family:var(--font-display); font-size:26px; font-weight:700; color:rgba(201,162,75,0.55);}
  .glyf-fantome{opacity:0.28; filter:grayscale(0.6) drop-shadow(0 0 4px rgba(201,162,75,0.6))!important;}
  /* hauteurs FIXES du détail et du message (boss : « les cadres bougent quand on sélectionne ») : 4 lignes max, jamais de reflow */
  .glyf-detail{height:62px; min-height:0; overflow:hidden; box-sizing:border-box; text-align:center; background:rgba(255,255,255,0.03); border-radius:8px; padding:5px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;}
  .glyf-message{height:30px; overflow:hidden; font-size:11px; font-weight:700; text-align:center; line-height:1.3;}
  .glyf-message.ok{color:#4fd67a;} .glyf-message.ko{color:#ff6b6b;}
  .glyf-msg-nom{font-family:var(--font-display);}
  #screen-gly-fusion .gly-actions .btn-gold-img.btn-gold-img-sm img{height:44px;}
  #screen-gly-fusion .gly-actions button:disabled{opacity:0.45;}
  /* animation : A et B glissent vers la case résultat en rétrécissant (case A : 2 cases + 2 signes vers la droite ≈ 154 px ; B ≈ 82 px),
     la case résultat s'embrase ; puis .reussi fait surgir le nouveau glyphe, .echec secoue en rouge */
  .glyf-atelier.fusionne #glyf-case-a{transform:translateX(154px) scale(0.45); opacity:0; transition-timing-function:ease-in;}
  .glyf-atelier.fusionne #glyf-case-b{transform:translateX(82px) scale(0.45); opacity:0; transition-timing-function:ease-in;}
  .glyf-atelier.fusionne .glyf-case-r{animation:glyf-braise .9s ease-in forwards;}
  @keyframes glyf-braise{0%{box-shadow:0 0 0 rgba(255,210,90,0);}70%{box-shadow:0 0 14px 4px rgba(255,210,90,0.55);}100%{box-shadow:0 0 34px 14px rgba(255,235,160,0.95); border-color:#fff2c0; background:rgba(255,230,150,0.75);}}
  .glyf-atelier.reussi .glyf-case-r{border-style:solid; border-color:var(--gold); animation:glyf-surgit .6s cubic-bezier(.2,1.6,.4,1) both;}
  .glyf-atelier.reussi .glyf-case-r img{animation:glyf-eclat .6s ease-out both;}
  @keyframes glyf-surgit{0%{transform:scale(0.3); box-shadow:0 0 34px 14px rgba(255,235,160,0.95);}100%{transform:scale(1); box-shadow:0 0 14px 3px rgba(201,162,75,0.6);}}
  @keyframes glyf-eclat{0%{filter:brightness(3) drop-shadow(0 0 12px #fff);}100%{filter:brightness(1) drop-shadow(0 2px 5px rgba(0,0,0,0.8));}}
  .glyf-atelier.echec{animation:glyf-secousse .5s ease-out;}
  .glyf-atelier.echec .glyf-case-r{border-color:#e2453a; box-shadow:0 0 18px 4px rgba(226,69,58,0.7); background:rgba(120,20,20,0.45);}
  @keyframes glyf-secousse{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
  .glyf-atelier.reussi #glyf-case-a, .glyf-atelier.reussi #glyf-case-b, .glyf-atelier.echec #glyf-case-a, .glyf-atelier.echec #glyf-case-b{transition:none; opacity:0.35;}
  /* fenêtre « i » */
  .glyf-info-popup{position:absolute; inset:0; z-index:6; background:rgba(0,0,0,0.65); display:flex; align-items:center; justify-content:center;}
  .glyf-info-cadre{position:relative; width:88%; background:rgba(14,13,10,0.97); border:1px solid var(--gold-dim); border-radius:14px; padding:14px 14px 12px; box-shadow:0 10px 30px rgba(0,0,0,0.7); display:flex; flex-direction:column; gap:8px;}
  .glyf-info-texte{font-size:10.5px; line-height:1.45; color:var(--ink);}
  .glyf-info-texte p{margin:0 0 6px;}
  .glyf-info-texte b{color:var(--gold);}
  .glyf-taux{width:100%; border-collapse:collapse; font-size:10.5px;}
  .glyf-taux th{font-family:var(--font-display); color:var(--gold); font-weight:700; padding:3px 6px; border-bottom:1px solid var(--gold-dim); text-align:center;}
  .glyf-taux td{padding:3px 6px; text-align:center; color:#ffd76a; border-bottom:1px solid rgba(255,255,255,0.06);}
  .glyf-taux td:last-child{color:var(--ink); font-weight:700;}
  /* glyphes : tailles de boutons (28/09) */
  .btn-back-img img, .gly-topbar-btn img{height:30px;}                        /* Retour / Glyphes (barres du haut) : 28 → 34, puis 30 (29/09) */
  .gly-fleche{font-size:20px; padding:4px 12px; min-width:36px; min-height:32px;}
  .gly-fusion-cadre .gly-actions .btn-gold-img{position:relative; width:120px; height:40px; flex:0 0 120px; overflow:visible;}
  .gly-fusion-cadre .gly-actions .btn-gold-img.btn-gold-img-sm img{position:absolute; max-width:none; object-fit:fill; height:auto;}
  #gly-fusion-retour img{width:124.46px!important; height:41.3px!important; left:-2.57px; top:-0.47px;}
  #gly-fusion-go img{width:124.46px!important; height:43.96px!important; left:-2.51px; top:-2.5px;}
  .gly-topbar-btn img{height:51px;}   /* bouton « Glyphes » ×1,5 (boss, 28/09 : doublé puis « trop grand, 1,5 plutôt ») */

  /* ===== BOUTONS À CADRE + TEXTE (28/09, cf. boutons.js) : cadre 9 morceaux (assets/ui/cadres/) + texte du jeu ===== */
  .bt9{position:absolute; pointer-events:none; box-sizing:border-box; display:flex; align-items:center; justify-content:center; z-index:1;
    border-style:solid; border-width:calc(var(--h,40px)*0.267) calc(var(--h,40px)*0.317);
    border-image:url('assets/ui/cadres/cadre-bleu.webp') 80 95 fill / calc(var(--h,40px)*0.267) calc(var(--h,40px)*0.317) stretch;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,0.55));}
  .bt9.bt9-rouge{border-image-source:url('assets/ui/cadres/cadre-rouge.webp');}
  .bt9-txt{font-family:'Almendra', var(--font-display), serif; font-weight:700; line-height:1; white-space:nowrap; letter-spacing:0.01em; margin-top:-0.06em;
    color:#ffe08f; font-kerning:normal; text-rendering:geometricPrecision;   /* couleur pleine : le dégradé « background-clip:text » cassait l'espacement des lettres sous le zoom PC */
    text-shadow:-0.08em 0 0 #3a1f06,0.08em 0 0 #3a1f06,0 -0.08em 0 #3a1f06,0 0.08em 0 #3a1f06,-0.06em -0.06em 0 #3a1f06,0.06em 0.06em 0 #3a1f06,-0.06em 0.06em 0 #3a1f06,0.06em -0.06em 0 #3a1f06,0 0.14em 0.14em rgba(0,0,0,.75);}
  .bt9-hote:hover .bt9{filter:drop-shadow(0 2px 6px rgba(201,162,75,0.6)) brightness(1.08);}
  .bt9-hote:active .bt9{transform:translateY(1px); filter:brightness(0.9);}
  .bt9-hote:disabled .bt9, .bt9-hote.disabled .bt9, .bt9-hote[aria-disabled=true] .bt9{filter:grayscale(0.85) brightness(0.6);}
  /* boutons de la forge / roulette dessinés en fond CSS (::before) : même cadre, texte = leur libellé existant */
  #forge-enchant-btn.btn-gold-bg::before, #forge-fusion-btn.btn-gold-bg::before, #roulette-play-btn.btn-gold-bg::before{
    background-image:none!important; box-sizing:border-box; border-style:solid; border-width:10.7px 12.7px;
    border-image:url('assets/ui/cadres/cadre-rouge.webp') 80 95 fill / 10.7px 12.7px stretch; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.55));}
  .forge-enchant-btn.btn-gold-bg .forge-enchant-label, .roulette-play-btn.btn-gold-bg .roulette-play-label{
    display:flex!important; position:absolute; top:0; left:0; right:0; aspect-ratio:2172/724; align-items:center; justify-content:center;
    font-family:'Almendra', var(--font-display), serif; font-weight:700; font-size:15px; letter-spacing:0.02em; text-transform:none; line-height:1;
    color:#ffe29a; text-shadow:-1.5px 0 0 #3a1f06,1.5px 0 0 #3a1f06,0 -1.5px 0 #3a1f06,0 1.5px 0 #3a1f06,0 3px 3px rgba(0,0,0,.75); pointer-events:none;}
  .roulette-play-btn.btn-gold-bg .roulette-play-label{white-space:nowrap; font-size:12px;}
  #roulette-play-btn.btn-gold-bg{min-width:150px;}
  .cour-dialogue-backdrop{z-index:150;}   /* fenêtres (paramètres, boutique, premium…) au-dessus des boutons flottants du haut (z 99-100) — bug d'affichage signalé 28/09 */

  /* ===== TOUS LES BOUTONS AU CADRE (28/09, boss : « tous les boutons, même métiers, glyphes… ; Jouer et Premium ne changent pas ») ===== */
  /* icône des boutons illustrés (métiers, Glyphes) dans le calque .bt9, et petits boutons-symboles au cadre carré */
  .bt9{gap:4%;}
  .bt9-txt{flex:0 0 auto;}
  .bt9-ic{flex:0 0 auto; object-fit:contain; margin-left:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.7));}
  .bt9.bt9-carre{border:none; border-image:none; background:url('assets/ui/cadres/cadre-carre.webp') center / 100% 100% no-repeat;}
  .bt9.bt9-carre .bt9-txt{font-family:'Cinzel', serif; margin-top:0;}
  /* boutons texte (HTML) : le cadre est posé directement sur le bouton */
  .pseudo-valider, .parametres-langue, .premium-toggle, .leaderboard-tab, .campagne-switch-cases button, .jardin-buy-btn:not(.btn-gold-img),
  .boutique-acheter, .cour-tuto-suivant, .cour-tuto-passer, .maj-restart-btn, .ctrl:not(.btn-gold-img), #tact-btn-speed, .analyse-btn:not(.btn-gold-img){
    box-sizing:border-box; border-style:solid!important; border-color:transparent!important; border-width:8px 9px!important; border-radius:0!important;
    border-image:url('assets/ui/cadres/cadre-bleu.webp') 80 95 fill / 8px 9.5px stretch!important;
    background:none!important; box-shadow:none!important; min-height:32px; padding:1px 8px!important; text-decoration:none!important;
    font-family:'Almendra', var(--font-display), serif!important; font-weight:700!important; color:#ffe08f!important; line-height:1.05;
    text-shadow:-0.08em 0 0 #3a1f06,0.08em 0 0 #3a1f06,0 -0.08em 0 #3a1f06,0 0.08em 0 #3a1f06,0 0.14em 0.14em rgba(0,0,0,.75)!important;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,0.5)); display:inline-flex; align-items:center; justify-content:center; gap:4px;}
  .parametres-langue.actif, .leaderboard-tab.active, .campagne-switch-cases button.actif, .premium-toggle.actif, .pseudo-valider,
  .boutique-acheter, .jardin-buy-btn:not(.btn-gold-img), .maj-restart-btn{border-image-source:url('assets/ui/cadres/cadre-rouge.webp')!important;}
  .parametres-langue:disabled, .jardin-buy-btn:disabled, .boutique-acheter:disabled, .pseudo-valider:disabled{filter:grayscale(0.85) brightness(0.6)!important;}
  #tact-btn-speed{font-size:15px!important;}
  /* fermeture ×, flèches, « + » : petit cadre carré */
  .cour-dialogue-close, .tequip-item-popup-close, .tact-skill-popup-close, .equip-upgrade-close, .gly-fleche, .skill-plus{
    background:url('assets/ui/cadres/cadre-carre.webp') center / 100% 100% no-repeat!important; border:none!important; border-radius:0!important; box-shadow:none!important;
    width:32px!important; height:32px!important; min-width:32px; padding:0!important; display:inline-flex!important; align-items:center; justify-content:center;
    color:#ffe08f!important; font-family:'Cinzel', serif; font-weight:700; font-size:17px!important; line-height:1; text-shadow:0 0 2px #3a1f06, 0 2px 2px #000;}
  .skill-plus img{height:60%!important; width:auto;}
  /* Le « + » des compétences garde seulement l'icône icon-plus.webp (déjà encadrée), sans cadre carré derrière ; zone
     tactile 32 px. */
  .skill-plus{background:none!important;}
  .skill-plus img{height:20px!important; width:auto; max-width:none; background:none!important; border-radius:0;}   /* 20 px = la taille d'avant le 28/09 (boss) */
  .gly-fleche{width:36px!important; height:32px!important;}
  /* Toutes les fermetures × (fenêtres, popups, fiches) sans cadre carré : seule la croix dorée reste, agrandie pour la
     lisibilité, zone tactile 32 px. */
  .cour-dialogue-close, .tequip-item-popup-close, .tact-skill-popup-close, .equip-upgrade-close{background:none!important; font-size:24px!important;}
  /* boutons-icônes du haut (son, paramètres, classement, 7 jours, coffre) : laissés comme avant (boss, 28/09) */
  .bt9 > img.bt9-ic{position:static!important; left:auto!important; top:auto!important; transform:none!important; margin:0!important; max-width:none!important;
    width:var(--ic,30px)!important; height:var(--ic,30px)!important; object-fit:contain!important; opacity:1!important; display:block;}
  .bt9 > img.bt9-ic[style*="display: none"]{display:none!important;}
  /* Onglets du Classement : grille à 3 colonnes égales (flex:1 élargissait « 1er achèvement », dont la largeur minimale est
     celle de son mot le plus long) et hauteur fixe 44 px (2 lignes de 11 px + cadre) pour que tous les onglets aient la même
     taille. */
  .leaderboard-tabs{display:grid!important; grid-template-columns:repeat(3,1fr);}
  .leaderboard-tab{padding:1px 5px!important; font-size:11px!important; min-width:0; width:100%; height:44px!important; min-height:44px; white-space:normal; text-align:center;}
  /* 28/09 (boss) : roue des Paramètres à la place du bouton son, sur tous les écrans */
  .parametres-btn.parametres-global{top:8px!important; right:8px!important; left:auto!important; z-index:100;}
  /* 28/09 (boss) : plus de bouton Retour au manoir ni dans la cour */
  #btn-back-accueil-hub, #btn-back-hub-cour{display:none!important;}
  .mute-btn.parametres-mute{position:relative!important; top:auto!important; right:auto!important; left:auto!important; margin:0 auto 4px; width:52px; height:52px; display:flex; z-index:auto;}
  /* 28/09 : petits écrans — la roue des paramètres (en haut à droite) ne doit pas mordre sur le bouton Boutique des métiers */
  @media (max-width:420px){ #screen-jardin .tequip-topbar, #screen-vers .tequip-topbar, #screen-pierre .tequip-topbar{column-gap:3px;} }
  /* 28/09 : « Passer le tutoriel » en haut à GAUCHE de la bande noire — à droite, le bouton Deck mis en avant par le tuto
     de la campagne (au-dessus des bandes) le recouvrait */
  .cour-tuto-passer{right:auto!important; left:10px;}
  .cour-tuto-texte b.vert{color:#6fd873;}   /* vert = qualité Aguerri (TACT_EQUIP_TIER_COLOR[2]) */
  /* Pas de Retour sur la scène du portail. Fermer sans entrer : toucher la scène quand la pierre du jour est épuisée, ou
     Échap sur PC. */
  #pierre-retour{display:none!important;}
  /* ===== 28/09 + 29/09 : intro (#accueil-video) puis scène finale en boucle (#accueil-boucle) en fond de l'écran d'accueil, cf. index.html ===== */
  #screen-accueil{background-image:url('assets/ui/accueil-intro-fin.webp'); isolation:isolate;}
  .accueil-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; pointer-events:none; background:transparent;}
  /* 29/09 : la boucle est posée par-dessus l'intro (même z-index, plus loin dans le DOM) mais invisible tant qu'elle ne joue pas
     réellement : on ne voit jamais son poster figé ni une image noire, l'intro figée sur sa dernière image reste affichée dessous. */
  .accueil-boucle{visibility:hidden;}
  .accueil-boucle.accueil-boucle-active{visibility:visible;}
  /* 29/09 (boss : « le bouton Jouer apparaît après le tremblement de caméra ») : tant que #screen-accueil porte .accueil-attente,
     Jouer, le pseudo et les boutons d'accueil sont invisibles et inertes ; à la levée de la classe, fondu de 0,6 s.
     opacity (et non display) pour ne pas se mêler de .hidden, que pseudoAppliqueAccueil pose sur #pseudo-accueil. */
  #screen-accueil .btn-jouer-img, #screen-accueil .pseudo-accueil, #screen-accueil .accueil-buttons{transition:opacity 0.6s ease;}
  #screen-accueil.accueil-attente .btn-jouer-img, #screen-accueil.accueil-attente .pseudo-accueil,
  #screen-accueil.accueil-attente .accueil-buttons{opacity:0; pointer-events:none;}
  /* (28/09 : plus de masquage en « animations réduites » : sous Windows, animations désactivées = vidéo jamais vue) */
  /* Une ligne vide entre la liste du butin et le texte qui la suit, dans toutes les fenêtres de coffre. */
  .chest-materials-reward{margin-bottom:1.3em;}
  /* Guide des métiers (tutoGuide*) : bulle de The Dev par-dessus les menus ; seul l'élément en surbrillance (.tuto-focus-el)
     répond. La bulle passe en haut ou en bas selon la place de l'élément à toucher. */
  .tuto-guide-bulle{position:fixed; left:50%; transform:translateX(-50%); width:min(94vw,540px); box-sizing:border-box; z-index:6000;
    display:flex; align-items:center; gap:10px; padding:10px 12px 10px 10px; background:rgba(10,18,36,0.95); border:1px solid rgba(201,162,75,0.85);
    border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,0.65); color:#ece3cc; font-size:14px; line-height:1.35; pointer-events:auto;
    transition:top .25s ease, bottom .25s ease;}
  .tuto-guide-bulle.bas{bottom:12px; top:auto;}
  .tuto-guide-bulle.haut{top:12px; bottom:auto;}
  .tuto-guide-dev{width:54px; height:54px; flex:0 0 auto; object-fit:cover; object-position:50% 8%; border-radius:50%; border:2px solid rgba(201,162,75,0.85); background:#1a2233;}
  .tuto-guide-texte{flex:1 1 auto; min-width:0;}
  .tuto-guide-texte b{color:#f5d98c; font-weight:700;}
  .tuto-guide-passer{position:absolute; right:8px; top:3px; background:none; border:none; padding:2px 4px; cursor:pointer;
    color:rgba(240,217,160,0.6); font-size:11px; text-decoration:underline; font-family:inherit;}
  .tuto-guide-passer:hover{color:#f0d9a0;}
  .tuto-guide-bulle{padding-top:18px;}
  body.tuto-guide-actif .fiche-equip{display:none!important;}   /* les petites fiches d'objet cacheraient le bouton à toucher */
  @media (max-width:480px){ .tuto-guide-bulle{font-size:13px;} .tuto-guide-dev{width:44px; height:44px;} }
  /* coffre du tuto : 10 lignes de butin -> liste plus serrée, fenêtre qui défile si l'écran est très petit */
  #coffre12h-backdrop.coffre-tuto-duel .coffre12h-panel{max-height:92vh; overflow-y:auto;}
  #coffre12h-backdrop.coffre-tuto-duel .chest-material-drop{padding-top:1px; padding-bottom:1px;}
  /* coffre du tuto : fermé, il pulse et attend le toucher du joueur (tutoDuelCoffreOuvre) */
  .coffre12h-panel-icone img.coffre-a-ouvrir{cursor:pointer; animation:coffre-appel 1.1s ease-in-out infinite;}
  @keyframes coffre-appel{0%,100%{transform:scale(1); filter:drop-shadow(0 4px 14px rgba(0,0,0,0.6));} 50%{transform:scale(1.1); filter:drop-shadow(0 0 16px rgba(245,217,140,0.85));}}
  .tuto-guide-dev{object-position:center;}   /* 28/09 : avatar recadré sur le visage (the-dev-avatar.webp), net à 54 px */
  /* Bulles de The Dev (Cour, manoir, portail, campagne) posées en bas de la bande noire, à la taille de leur texte (hauteur
     ET largeur), jusqu'à toute la hauteur de la bande ; au-delà, la suite passe sur une page « Suivant »
     (courTutoAjusteTexte). Même principe pour la bulle du guide des métiers. */
  .cour-tuto .cour-tuto-bas{align-items:flex-end;}
  .cour-tuto .cour-tuto-bulle{height:auto; max-height:100%; align-self:flex-end; flex:0 1 auto; width:auto; min-width:180px; justify-content:flex-start;}
  .cour-tuto .cour-tuto-bulle .cour-tuto-suivant{margin-top:4px;}
  .tuto-guide-bulle{left:0; right:0; margin:0 auto; transform:none; width:fit-content; max-width:min(94vw,540px);}   /* centrée sans translate : la largeur suit vraiment le texte */

  /* Verrouillage des pages : tout est insélectionnable, images non glissables, menu contextuel et appui long coupés (côté
     JS). Seuls les champs de saisie gardent sélection et collage. Une capture d'écran reste possible. */
  html, body, .screen{-webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none;}
  img, video, canvas, svg{-webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;}
  input, textarea, [contenteditable="true"]{-webkit-user-select:text; -moz-user-select:text; user-select:text; -webkit-touch-callout:default;}

/* ===== 30/09 : THE DEV — aide activable (the-dev.js), Manoir et Cour. Bouton sous la roue des Paramètres ;
   fenêtre centrée, sans défilement (textes courts, paginés). Masqué pendant les tutoriels. ===== */
.thedev-btn{position:absolute; top:58px; right:8px; z-index:99; width:44px; height:44px; padding:0; border:2px solid rgba(201,162,75,0.85); border-radius:50%; background:#1a2233; box-shadow:0 2px 6px rgba(0,0,0,0.6); cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent;}
.thedev-btn img{width:100%; height:100%; object-fit:cover; object-position:50% 8%; display:block; pointer-events:none;}
body.cour-tuto-actif .thedev-btn, body.manoir-tuto-actif .thedev-btn, body.tuto-guide-actif .thedev-btn, body.tuto-scene-actif .thedev-btn{display:none;}
.thedev-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:160; width:min(90%, 380px); box-sizing:border-box; padding:14px 14px 12px; background:#141c17; border:1px solid var(--gold-dim); border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,0.75); color:#f3e7c4; overflow:hidden;}
.thedev-close{top:8px; right:8px;}
.thedev-tete{display:flex; align-items:center; gap:10px; margin:0 34px 8px 0;}
.thedev-avatar{width:48px; height:48px; flex:0 0 auto; object-fit:cover; object-position:50% 8%; border-radius:50%; border:2px solid rgba(201,162,75,0.85); background:#1a2233;}
.thedev-titre{font-size:16px; font-weight:700; color:#f5d98c; text-shadow:0 1px 2px #000;}
.thedev-corps{display:flex; flex-direction:column; gap:7px;}
.thedev-texte{margin:0; font-size:13px; line-height:1.35;}
.thedev-choix{width:100%; padding:9px 10px; border:1px solid var(--gold-dim); border-radius:10px; background:linear-gradient(180deg,#2a2412,#171309); color:#f5d98c; font:inherit; font-size:14px; font-weight:700; cursor:pointer; text-align:left;}
.thedev-choix-bug{color:#ffb4a0; border-color:rgba(220,110,90,0.7);}
.thedev-nav{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px;}
.thedev-page{font-size:12px; color:#bfae86;}
.thedev-bouton{padding:7px 14px; border:1px solid var(--gold-dim); border-radius:9px; background:linear-gradient(180deg,#f5d98c,#b8862f); color:#2a1b06; font:inherit; font-size:13px; font-weight:700; cursor:pointer;}
.thedev-bouton:disabled{opacity:.5; cursor:default;}
.thedev-label{font-size:12px; font-weight:700; color:#f5d98c;}
.thedev-champ, .thedev-zone{width:100%; box-sizing:border-box; padding:7px 8px; border:1px solid var(--gold-dim); border-radius:8px; background:#0c110e; color:#f3e7c4; font:inherit; font-size:14px; -webkit-user-select:text; user-select:text;}
.thedev-zone{resize:none; height:96px;}
.thedev-compte{font-size:11px; color:#bfae86; text-align:right;}
.thedev-msg{min-height:16px; font-size:12px; font-weight:700; text-align:center;}
.thedev-msg.erreur{color:#ff9c86;}
.thedev-msg.ok{color:#9fe39f;}
@media (max-width:380px){ .thedev-btn{width:38px; height:38px;} .thedev-texte{font-size:12px;} .thedev-choix{padding:7px 9px; font-size:13px;} }

/* ===== 30/09 : COURRIER (courrier.js) — enveloppe en haut à gauche, sous Retour (Manoir, Cour) ; fenêtre = celle de The Dev ===== */
.courrier-btn{position:absolute; top:13px; left:12px; z-index:99; width:44px; height:44px; padding:0; border:none; border-radius:11px; background:linear-gradient(160deg,#4a3418,#20150a); box-shadow:0 2px 6px rgba(0,0,0,0.6); cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;}
.courrier-btn svg{pointer-events:none;}
.courrier-btn.dispo{box-shadow:0 0 10px 2px rgba(255,200,90,0.85), 0 2px 6px rgba(0,0,0,0.6); animation:chest-pulse 1.4s ease-in-out infinite;}
.courrier-badge{position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:#c62828; color:#fff; font:700 11px/18px sans-serif; text-align:center; box-shadow:0 1px 3px #000;}
.courrier-titre{margin:0 34px 10px 0;}
.courrier-ligne{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--gold-dim); border-radius:10px; background:linear-gradient(180deg,#2a2412,#171309);}
.courrier-nom{font-size:13px; font-weight:700; color:#f5d98c;}
.courrier-aide{color:#bfae86; font-size:12px;}
body.cour-tuto-actif .courrier-btn, body.manoir-tuto-actif .courrier-btn, body.tuto-guide-actif .courrier-btn, body.tuto-scene-actif .courrier-btn{display:none;}
@media (max-width:380px){ .courrier-btn{width:38px; height:38px; border-radius:10px;} }
/* 30/09 (boss) : The Dev en face du Gardien (1re case de la barre des compagnons) — top posé par the-dev.js (alignement) */

/* ===== 30/09 (boss : « tous les boutons du haut, du Courrier à la roue des Réglages, à la même hauteur et à égale distance ») =====
   Courrier (gauche, 12 px du bord) · Classement · Premium · 7 jours · Coffre · roue (droite, 8 px du bord) : écart g identique,
   calculé sur la largeur de l'écran. Tous centrés sur l'axe de la roue (top 8 + 42/2 = 29 px). */
.courrier-btn, .btn-leaderboard, .premium-btn, .connexion7-btn, .coffre12h-btn{top:7px;}
.courrier-btn{left:12px;}
.btn-leaderboard{left:calc(56px + (100% - 296px) / 5);}
.premium-btn{left:calc(100px + 2 * (100% - 296px) / 5);}
.connexion7-btn{left:calc(158px + 3 * (100% - 296px) / 5);}
.coffre12h-btn{left:calc(202px + 4 * (100% - 296px) / 5);}
@media (max-width:380px){
  .courrier-btn, .btn-leaderboard, .premium-btn, .connexion7-btn, .coffre12h-btn{top:10px;}
  .btn-leaderboard{left:calc(50px + (100% - 264px) / 5);}
  .premium-btn{left:calc(88px + 2 * (100% - 264px) / 5);}
  .connexion7-btn{left:calc(138px + 3 * (100% - 264px) / 5);}
  .coffre12h-btn{left:calc(176px + 4 * (100% - 264px) / 5);}
}

/* ===== 30/09 : joystick à droite (réglage, cf. joystick-cote.js) — Cour, maps du portail, Néant ; sorts du Néant en miroir ===== */
body.joystick-droite .cour-joystick, body.joystick-droite .neant-joystick{left:auto; right:42px;}
body.joystick-droite .neant-skills-wrap{right:auto; left:12px; flex-direction:row-reverse;}

/* 30/09 (vérification d'affichage) : le texte d'aide du bas (« Utilisez le joystick… ») passait 4-6 px sous le joystick et sa boîte
   occupait toute la largeur : il est centré à sa taille réelle et descendu sous le joystick (bas du joystick à 18 px). */
.cour-hint, .hub-hint{left:50%; right:auto; transform:translateX(-50%); white-space:nowrap; bottom:3px;}
/* 30/09 (boss : « gauche/droite unis en un bloc sur une ligne, style bouton poussoir ») : interrupteur à deux moitiés, la moitié
   choisie est enfoncée (dorée, ombre intérieure), l'autre en relief sombre. */
.parametres-joysticks{display:flex; width:min(100%, 230px); margin:4px auto 2px; border:1px solid var(--gold-dim); border-radius:10px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.5);}
.parametres-panel .parametres-joysticks .parametres-joystick{flex:1 1 50%; margin:0; padding:7px 4px; border:none; border-radius:0; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  background:linear-gradient(180deg,#2a2412,#171309); color:#bfae86; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);}
.parametres-panel .parametres-joysticks .parametres-joystick + .parametres-joystick{border-left:1px solid var(--gold-dim);}
.parametres-panel .parametres-joysticks .parametres-joystick.actif{background:linear-gradient(180deg,#b8862f,#f5d98c); color:#2a1b06; box-shadow:inset 0 3px 6px rgba(0,0,0,0.45);}

/* 30/09 : icône image du courrier (remplace le dessin SVG) */
.courrier-btn .courrier-icone{width:38px; height:38px; object-fit:contain; pointer-events:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));}
@media (max-width:380px){ .courrier-btn .courrier-icone{width:32px; height:32px;} }

/* ===== 30/09 : onglets Semaine / Mois du Classement (classement-periode.js) — 5 onglets : 3 + 2 sur deux lignes ===== */
#leaderboard-tab-first{display:none !important;}   /* remplacé par Semaine (boss, 30/09) */
.leaderboard-tabs{display:grid !important; grid-template-columns:repeat(3,1fr) !important;}
.periode-tete{font-size:12px; color:#f5d98c; text-align:center; margin:2px 0 4px;}
.periode-tete span{color:#bfae86;}
.periode-regles{font-size:10.5px; line-height:1.3; color:#bfae86; text-align:center; margin:0 0 6px; padding:5px 6px; border:1px dashed rgba(201,162,75,0.4); border-radius:8px;}
.leaderboard-row.periode-podium .leaderboard-rank{color:#f5d98c; font-weight:700;}
.leaderboard-row.periode-moi{outline:1px solid var(--gold); border-radius:6px;}
/* 30/09 : récompenses du Classement Semaine sur trois lignes, petites icônes (coffre touchable → détail) */
.periode-regles{text-align:left;}
.periode-rec{display:flex; align-items:center; gap:5px; margin:1px 0; font-size:11px; color:#f3e7c4;}
.periode-rec-place{width:62px; font-weight:700; color:#f5d98c;}
.periode-coffre{width:24px; height:24px; padding:0; border:none; background:none; cursor:pointer;}
.periode-coffre img{width:24px; height:24px; object-fit:contain; display:block; pointer-events:none;}
.periode-pierre{width:18px; height:18px; object-fit:contain;}
.periode-plus, .periode-x{color:#bfae86; font-weight:700;}
.periode-points{margin-top:3px; font-size:10px; color:#bfae86; text-align:center;}
/* 30/09 : badge doré des Uniques (même dessin que .tequip-unique-badge) collé À GAUCHE de l'icône de la pièce dans les lignes de butin */
.loot-unique-badge{order:-1; flex:0 0 auto; width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; margin-right:-3px;
  background:linear-gradient(135deg,#f6d76a,#a9711f); border-radius:6px; padding:1px; box-shadow:0 0 6px rgba(255,210,90,0.8), 0 1px 3px rgba(0,0,0,0.6);}
.coffre-ligne .loot-unique-badge img, .chest-material-drop .loot-unique-badge img{width:14px !important; height:14px !important; object-fit:contain; display:block;}

/* 30/09 (boss) : le repère des pièces Uniques devient une ÉTOILE dorée seule, sans cadre, partout (cases d'équipement, armurerie,
   forgeron, inventaire, choix de pièce, lignes de butin). */
.tequip-unique-badge{background:none !important; box-shadow:none !important; border:none !important; padding:0 !important; width:17px; height:17px;}
.tequip-unique-badge img{width:17px !important; height:17px !important; filter:drop-shadow(0 0 2px rgba(0,0,0,0.9)) drop-shadow(0 0 3px rgba(255,210,90,0.7));}
.loot-unique-badge{background:none !important; box-shadow:none !important; padding:0 !important; width:18px; height:18px; margin-right:-2px;}
.coffre-ligne .loot-unique-badge img, .chest-material-drop .loot-unique-badge img{width:18px !important; height:18px !important; filter:drop-shadow(0 0 3px rgba(255,210,90,0.8));}
/* 30/09 : détail d'un coffre du Classement Semaine : petite case posée sous le coffre, habillage de la description d'objet */
.leaderboard-panel{position:relative;}
.periode-bulle{position:absolute; z-index:5; width:min(230px, 80%); display:flex; flex-direction:column; gap:2px; padding:7px 9px; border:1px solid var(--gold-dim); border-radius:8px;
  background:#141c17; box-shadow:0 6px 18px rgba(0,0,0,0.7); text-align:left;}
.periode-bulle strong{color:var(--gold); font-family:var(--font-display); font-size:12px;}
.periode-bulle .inventaire-description{font-size:11px; margin-top:1px;}

/* ===== 30/09 : encyclopédies (Info du deck builder, Règles du Chevalier) et bulle Multijoueur ===== */
.encyclo-panel{width:min(94%, 560px); max-height:min(82%, 1300px); display:flex; flex-direction:column; z-index:170;}
.encyclo-panel.mesure{height:min(82%, 1300px);}
.encyclo-titre{margin:0 34px 8px 0;}
.encyclo-corps{flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:7px;}
.encyclo-bloc{padding:6px 8px; border:1px solid rgba(201,162,75,0.35); border-radius:9px; background:rgba(255,255,255,0.03);}
.encyclo-bloc-nom{font-size:13px; font-weight:700; color:#f5d98c;}
.encyclo-bloc-sous{font-size:11px; color:#bfae86; margin:1px 0 3px;}
.encyclo-bloc-ligne{font-size:12px; line-height:1.3;}
.encyclo-bloc-ligne::before{content:'• '; color:#c9a24b;}
.encyclo-role{margin-top:4px; font-size:14px; font-weight:700; color:#f5d98c; border-bottom:1px solid var(--gold-dim);}
.encyclo-message{z-index:170; text-align:center; padding:26px 20px 22px;}
.encyclo-message-texte{margin:0; font-size:18px; font-weight:700; color:#f5d98c;}
.chevalier-ligne.hidden{display:none;}
/* 30/09 : Roulette — pièces portées sur une case enchantée */
.roulette-porte-note{font-size:10px; line-height:1.25; color:#bfae86; text-align:center; margin:0 6px 4px;}
.roulette-loot-enchant{font-family:var(--font-display); font-weight:700; color:#7fc8ff; font-size:9px; line-height:1.1;}
.tequip-popup-case-enchant{position:absolute; right:2px; top:1px; font-size:9px; font-weight:700; color:#7fc8ff; text-shadow:0 1px 2px #000;}

/* 30/09 : boutons au cadre peint (boutons.js) — Info du deck, Chevalier, encyclopédies */
.db-info-btn{margin-left:auto;}
.db-info-btn img{height:30px;}
/* Chevalier (boss : « boutons alignés ») : Règles, Multijoueur et Test empilés, même largeur, même écart */
.chevalier-ligne{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:12px;}
.chevalier-ligne .cour-dialogue-test-btn{margin-top:0;}
.chevalier-ligne .cour-dialogue-test-btn.btn-img-plain, #cour-dialogue-test-btn.btn-img-plain{width:150px;}
.chevalier-ligne .cour-dialogue-test-btn.btn-img-plain img, #cour-dialogue-test-btn.btn-img-plain img{width:150px;}

/* ===== LA NÉGOCIATION (30/09, cf. negoce.js) : fond du boss (marchand en haut, cuir en bas) ===== */
#screen-negoce{aspect-ratio:941/1672; position:relative; background:#1a0f08 url('assets/ui/negoce-bg.webp') no-repeat center top; background-size:100% 100%;}
#btn-back-negoce{position:absolute; left:3%; top:1.5%; z-index:3;}
.negoce-or{position:absolute; left:32%; top:1.8%; z-index:3; padding:3px 10px; border-radius:10px; background:rgba(0,0,0,0.55); border:1px solid var(--gold-dim); color:#f5d98c; font-weight:700; font-size:13px;}
.negoce-jauge-wrap{position:absolute; left:18%; right:18%; top:6.2%; z-index:2; text-align:center;}
.negoce-humeur{font-family:'Almendra', var(--font-display), serif; font-weight:700; font-size:14px; color:#f5d98c; text-shadow:0 1px 3px #000, 0 0 6px #000; margin-bottom:3px;}
.negoce-jauge{position:relative;}
.negoce-jauge img{width:100%; display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.8));}
.negoce-curseur{position:absolute; top:-6px; bottom:-6px; width:6px; margin-left:-3px; border-radius:3px; background:#fff8e0; border:1px solid #3a2410; box-shadow:0 0 6px rgba(0,0,0,0.9); transition:left 0.9s cubic-bezier(.3,1.4,.5,1); animation:negoce-souffle 2.4s ease-in-out infinite;}
@keyframes negoce-souffle{0%,100%{transform:translateX(-1.5px);}50%{transform:translateX(1.5px);}}
.negoce-bulle{position:absolute; left:5%; right:5%; top:52%; z-index:2; min-height:6.2%; box-sizing:border-box; padding:8px 12px; border-radius:12px; background:rgba(245,230,196,0.94); border:2px solid #7a5a2a; color:#2a1b06; font-style:italic; font-size:13px; line-height:1.3; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.6); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
.negoce-bulle-res{font-style:normal; color:#7a1f1f;}
.negoce-offre{position:absolute; left:4%; right:4%; top:66.9%; height:18%; z-index:2; display:flex; flex-direction:column; align-items:center; gap:3px; color:#f3e7c4;}
.negoce-offre.vide .negoce-ligne-prix, .negoce-offre.vide .negoce-ligne-action{visibility:hidden;}
.negoce-objet{display:flex; align-items:center; gap:6px; min-height:24px; font-weight:700; font-size:13px;}
.negoce-objet img{width:24px; height:24px; object-fit:contain;}
.negoce-infos{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 10px; font-size:12px; color:#e8d7a8;}
.negoce-ligne-prix{display:flex; align-items:center; gap:8px; width:100%;}
.negoce-pas img{height:26px;}
.negoce-range{flex:1; accent-color:#c9a24b;}
.negoce-ligne-action{display:flex; align-items:center; gap:12px;}
.negoce-prix-val{font-family:'Almendra', var(--font-display), serif; font-size:18px; font-weight:700; color:#f5d98c; min-width:70px; text-align:right;}
.negoce-proposer img{height:30px;}
.negoce-essais{color:#d9c49a;}
.negoce-bas{position:absolute; left:2%; right:2%; top:85.3%; bottom:1.6%; z-index:2; display:flex; align-items:center; gap:4px;}
.negoce-fleche img{height:30px;}
.negoce-fleche:disabled{opacity:0.35;}
.negoce-sac{flex:1; height:100%; display:grid; grid-template-columns:repeat(5, 1fr); grid-template-rows:repeat(2, 1fr); gap:4px 6px; padding:0 4%; box-sizing:border-box;}
.negoce-case{position:relative; aspect-ratio:1; height:100%; justify-self:center; border-radius:8px; border:2px solid var(--objet-couleur, #756044); background:rgba(0,0,0,0.45); padding:3px; cursor:pointer; display:flex; align-items:center; justify-content:center; min-height:0;}
.negoce-case img{max-width:80%; max-height:80%; object-fit:contain;}
.negoce-case.choisi{box-shadow:0 0 0 2px #f5d98c, 0 0 10px rgba(245,217,140,0.8);}
.negoce-case.bloque{filter:grayscale(1) brightness(0.55);}
.negoce-qte{position:absolute; right:2px; bottom:1px; font-size:10px; font-weight:700; color:#fff; text-shadow:0 1px 2px #000;}
.negoce-fus{position:absolute; left:2px; top:1px; font-size:9px; font-weight:700; color:#8fd3ff; text-shadow:0 1px 2px #000;}
.negoce-ench{position:absolute; right:2px; top:1px; font-size:9px; font-weight:700; color:#7fc8ff; text-shadow:0 1px 2px #000;}
.negoce-vide{grid-column:1 / -1; grid-row:1 / -1; align-self:center; text-align:center; color:#d9c49a; font-size:13px;}
.negoce-page{position:absolute; left:0; right:0; bottom:-12px; text-align:center; font-size:10px; color:#bfae86; pointer-events:none;}
.encyclo-choix{padding:8px 10px; font-size:13px;}
/* 30/09 (boss) : cadre du Classement à la hauteur maximale, verrouillé (la liste défile dedans) */
.leaderboard-panel{height:100% !important; max-height:none !important; box-sizing:border-box;}
.leaderboard-list{flex:1 1 auto; min-height:0; max-height:none !important;}
.chevalier-ligne.hidden{display:none;}
/* 30/09 (boss : « trop de zone vide ») : cadre ajusté au contenu, paragraphes en fiches, chiffres en valeur, sommaire sur 2 colonnes */
.encyclo-corps{gap:6px;}
.encyclo-para{padding:6px 9px 6px 11px; border-left:3px solid #c9a24b; border-radius:6px; background:rgba(255,255,255,0.045); font-size:13.5px; line-height:1.38;}
.encyclo-num{color:#f5d98c; font-weight:700;}
.encyclo-panel .thedev-titre{font-size:18px; padding-bottom:6px; margin-bottom:8px; border-bottom:1px solid rgba(201,162,75,0.45);}
.encyclo-panel:not(.mesure) .encyclo-corps{flex:0 1 auto;}
.encyclo-panel .encyclo-corps:has(> .encyclo-choix){display:grid; grid-template-columns:1fr 1fr; gap:7px;}
.encyclo-choix{min-height:48px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.2;}
.encyclo-choix:last-child:nth-child(odd){grid-column:1 / -1;}
.cour-npc-humeur{position:absolute; left:50%; top:-34px; width:30px; height:30px; transform:translateX(-50%); filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6)); pointer-events:none; animation:negoce-humeur-flotte 2.6s ease-in-out infinite;}
@keyframes negoce-humeur-flotte{0%,100%{margin-top:0;}50%{margin-top:-3px;}}

/* 01/10 (boss) : Paramètres — ligne « Sauvegarde Google Play Jeux » (appli seulement, posée par sauvegarde-cloud.js avant « Joystick »).
   Icônes officielles Play Jeux gardées telles quelles (consignes de marque Google : pas de déformation, pas de fond chargé). */
.parametres-cloud-bloc{align-self:stretch; display:flex; flex-direction:column; align-items:center;}
.parametres-cloud-titre{display:flex; align-items:center; justify-content:center; gap:6px;}
.parametres-cloud-titre img{height:13px; width:auto; display:block;}
.parametres-cloud{display:flex; align-items:center; justify-content:center; gap:7px; align-self:stretch; width:auto; margin:4px 0 2px; padding:7px 8px; border:1px solid var(--gold-dim); border-radius:10px; background:rgba(20,16,10,0.85); box-shadow:0 2px 5px rgba(0,0,0,0.5); font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--ink);}
.parametres-cloud-icone{height:14px; width:auto; display:block;}
.parametres-panel .parametres-cloud-btn{width:min(100%, 230px); margin:4px auto 2px; padding:7px 4px; border:1px solid var(--gold); border-radius:10px; font-family:var(--font-display); font-size:13px; font-weight:700; cursor:pointer; background:linear-gradient(180deg,#b8862f,#f5d98c); color:#2a1b06; box-shadow:0 2px 6px rgba(0,0,0,0.5);}
.parametres-cloud-note{font-size:9px; color:var(--ink-dim); margin:3px auto 10px; max-width:220px;}
.parametres-cloud-note:empty{margin-bottom:6px;}

/* 01/10 (boss : « descends le bouton Paramètres sous The Dev et centre les icônes du haut ») */
/* Roue des Paramètres : sur le Manoir et la Cour, en face de la case du Gardien (hauteur fournie par the-dev.js), The Dev
   juste dessous (inversion demandée par le boss), même axe vertical (The Dev 44 px à 8 px du bord, roue 42 px → 9 px).
   Ailleurs, elle reste en haut à droite. */
.app:has(#screen-hub:not(.hidden)) .parametres-btn.parametres-global{top:var(--param-haut-hub, 58px)!important; right:9px!important;}
.app:has(#screen-cour:not(.hidden)) .parametres-btn.parametres-global{top:var(--param-haut-cour, 58px)!important; right:9px!important;}
/* Écran sans barre des compagnons (la Cour) : the-dev.js ne pose pas de hauteur → roue à 58 px, The Dev dessous (58 + 42 + 8). */
#screen-hub .thedev-btn, #screen-cour .thedev-btn{top:108px;}
/* Rangée du haut du Manoir et de la Cour (Courrier · Classement · Premium · 7 jours · Coffre) : la roue n'y est plus ; rangée SERRÉE et centrée
   (boss : « resserre-les »), écart 10 px : 44 + 44 + 58 + 44 + 44 + 4 × 10 = 274 px, de −137 à +137 autour du centre. */
#screen-hub .courrier-btn, #screen-cour .courrier-btn{left:calc(50% - 137px);}
#screen-hub .btn-leaderboard, #screen-cour .btn-leaderboard{left:calc(50% - 83px);}
#screen-hub .premium-btn, #screen-cour .premium-btn{left:calc(50% - 29px);}
#screen-hub .connexion7-btn, #screen-cour .connexion7-btn{left:calc(50% + 39px);}
#screen-hub .coffre12h-btn, #screen-cour .coffre12h-btn{left:calc(50% + 93px);}
@media (max-width:380px){   /* cases de 38 px, Premium 50, écart 6 px : 226 px, de −113 à +113 */
  #screen-hub .courrier-btn, #screen-cour .courrier-btn{left:calc(50% - 113px);}
  #screen-hub .btn-leaderboard, #screen-cour .btn-leaderboard{left:calc(50% - 69px);}
  #screen-hub .premium-btn, #screen-cour .premium-btn{left:calc(50% - 25px);}
  #screen-hub .connexion7-btn, #screen-cour .connexion7-btn{left:calc(50% + 31px);}
  #screen-hub .coffre12h-btn, #screen-cour .coffre12h-btn{left:calc(50% + 75px);}
}

/* 01/10 (boss : « les images resautent dans la Cour ») : l'icône d'humeur du Marchand flottait en animant margin-top, ce qui
   recalcule la mise en page de toute la Cour à chaque image (téléphone : tuiles redessinées → images qui sautent, cf. journal
   30/09 sur le préchargement). Même mouvement par transform (calcul fait par la carte graphique, sans mise en page). */
.cour-npc-humeur{animation-name:negoce-humeur-flotte2;}
@keyframes negoce-humeur-flotte2{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-3px);}}

/* 01/10 : bloc d'abonnement Google Play dans la fenêtre Premium (abonnement.js) — visible seulement quand PAIEMENT_ACTIF. */
.premium-abo{display:flex; flex-direction:column; align-items:center; gap:5px; margin:2px 0 8px;}
.premium-abo-prix{font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--gold);}
.premium-abo-periode{font-size:11px; color:var(--ink-dim); font-weight:400;}
.premium-abo-essai{font-size:11px; color:#9fe0a6;}
.premium-abo-fin{font-size:11px; color:var(--ink);}
.premium-abo-liens{display:flex; gap:10px; justify-content:center;}
.premium-abo-lien{background:none; border:none; padding:2px; font-size:10px; color:var(--gold); text-decoration:underline; cursor:pointer;}
.premium-abo-msg{font-size:10px; color:var(--ink-dim); min-height:12px; max-width:200px;}