:root{
  --bg:#000; --row:#141412; --line:#000; --chip:#2a2a26; --chip-text:#f1f1ec; --chip-border:#45453f;
  --text:#ecece7; --muted:#a3a39b; --panel:#141412; --input:#0b0b0a; --focus:#8fb8ff; --row-hover:#24241f;
  --err:#ff8a80; --ok:#9fe07f; --gold:#f8d77a; --nameplate:#40ff40;
  --S:#ff7f7f; --A:#ffbf7f; --B:#ffdf7f; --C:#ffff7f; --D:#bfff7f;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@font-face{
  font-family:"LifeCraft";
  src:url("fonts/lifecraft.woff") format("woff");
  font-display:swap;
}

*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:#000;color:var(--text);
  font:15px/1.45 "Helvetica Neue",Helvetica,Arial,sans-serif}
/* Visuel de fond, fixe, visible sur les côtés et au-dessus du panneau noir */
.bg{position:fixed;inset:0;z-index:-1;background:#000 url("img/fond.webp") center top/cover no-repeat}
.hero{min-height:clamp(150px,30vh,330px);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;padding:24px 16px 20px}
.title{margin:0;font-family:"LifeCraft","Palatino Linotype",Georgia,serif;font-weight:400;
  font-size:clamp(40px,7vw,86px);line-height:1;color:var(--gold);letter-spacing:.02em;
  text-shadow:0 2px 0 #000,0 0 6px #000,0 0 22px rgba(0,0,0,.9)}
.tagline{margin:8px 0 0;font-family:"LifeCraft","Palatino Linotype",Georgia,serif;font-size:clamp(18px,2.4vw,26px);
  color:var(--nameplate);text-shadow:0 1px 0 #000,0 0 6px #000,0 0 14px #000}
.wrap{max-width:1100px;margin:0 auto 48px;padding:18px;background:#000;border:1px solid #2b2a24;
  box-shadow:0 0 50px 10px rgba(0,0,0,.85)}
header.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:0 0 18px}
.section-title{font-family:"LifeCraft","Palatino Linotype",Georgia,serif;font-weight:400;font-size:28px;color:var(--gold);margin:28px 0 8px}
h1{margin:0;font-size:30px;line-height:1.1;letter-spacing:-.01em}
h2{margin:0 0 10px;font-size:19px}
nav{display:flex;gap:8px;flex-wrap:wrap}
.btn{font:inherit;font-weight:700;border:2px solid var(--line);background:var(--panel);color:var(--text);
  padding:8px 14px;cursor:pointer;border-radius:4px}
.btn:hover{background:var(--row-hover)}
.btn.primary{background:var(--B);color:#1a1a17;border-color:#000}
.btn.primary:hover{background:var(--A)}
.btn.small{padding:4px 10px;font-size:13px;border-width:1px}
.btn.danger{color:var(--err)}
.btn[aria-current="page"]{background:var(--text);color:var(--bg)}
.btn:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.intro{margin:0 0 14px;color:var(--muted);max-width:70ch}
.notice{border:2px solid var(--line);background:var(--panel);padding:12px 14px;margin:0 0 14px;max-width:80ch}
.notice.err{border-color:var(--err)}

/* Tableau */
.board{border:2px solid var(--line);background:var(--line);display:grid;gap:2px}
.tier{display:grid;grid-template-columns:190px 1fr;background:var(--row)}
.label{color:#1a1a17;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:8px 10px;gap:5px}
.label b{font-size:36px;line-height:1}
.label span{font-size:12px;line-height:1.25}
.drop{display:flex;flex-wrap:wrap;gap:6px;padding:8px;align-content:flex-start;min-height:88px}
.mode-edit .drop{cursor:pointer}
.drop.target{background:var(--row-hover)}
.chip{width:124px;min-height:68px;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;background:var(--chip);color:var(--chip-text);border:1px solid var(--chip-border);
  padding:6px;font:inherit;border-radius:3px;user-select:none;-webkit-user-select:none}
button.chip{cursor:grab;touch-action:manipulation}
body.dragging-chip, body.dragging-chip *{cursor:grabbing !important;user-select:none}
.chip .first{font-size:14px;line-height:1.2}
.chip .last{font-size:14px;line-height:1.2;font-weight:800;text-transform:uppercase;letter-spacing:.02em;word-break:break-word}
.chip .score{font-size:11px;color:var(--muted);margin-top:4px}
.chip.selected{outline:3px solid var(--focus);outline-offset:1px}
.chip.dragging{opacity:.4}
.pool{margin-top:16px;border:2px solid var(--line);background:var(--row)}
.pool h3{margin:0;padding:8px 10px;font-size:14px;background:var(--panel);border-bottom:2px solid var(--line)}
.pool .drop{min-height:80px}
.empty{color:var(--muted);font-size:13px;padding:4px 2px}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin:0 0 12px}
.status{font-size:13px;color:var(--muted)}
.status.err{color:var(--err)}
.status.ok{color:var(--ok)}

/* Admin */
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{border:2px solid var(--line);background:var(--panel);padding:14px}
.fields{display:grid;gap:8px;margin-bottom:10px}
.fields.two{grid-template-columns:1fr 1fr}
label.f{display:grid;gap:3px;font-size:13px;font-weight:700}
input{font:inherit;font-weight:400;padding:8px 10px;border:2px solid var(--line);background:var(--input);color:var(--text);border-radius:3px;width:100%}
.msg{font-size:13px;min-height:1.3em;margin:6px 0 0}
.msg.err{color:var(--err)} .msg.ok{color:var(--ok)}
ul.list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--chip-border);max-height:420px;overflow:auto}
ul.list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 2px;border-bottom:1px solid var(--chip-border)}
ul.list li .sub{color:var(--muted);font-size:12px}
.hint{font-size:12px;color:var(--muted);margin:10px 0 0}

/* Connexion */
dialog{border:2px solid var(--line);background:var(--panel);color:var(--text);padding:18px;width:min(380px,calc(100vw - 32px));border-radius:4px}
dialog::backdrop{background:rgba(0,0,0,.55)}
.row-end{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

@media (max-width:760px){
  .admin-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .wrap{padding:12px;margin-bottom:0;border-left:0;border-right:0}
  h1{font-size:24px}
  .tier{grid-template-columns:100px 1fr}
  .label{padding:6px}
  .label b{font-size:28px}
  .label span{font-size:10px}
  .chip{width:104px;min-height:60px}
  .chip .first,.chip .last{font-size:13px}
  .fields.two,.fields.three{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .drop{transition:background-color .12s}
}

.label.tS{background:var(--S)} .label.tA{background:var(--A)} .label.tB{background:var(--B)}
.label.tC{background:var(--C)} .label.tD{background:var(--D)}
.flush{margin:0}
.hint.top{margin:0 0 12px}
#publicIntro{margin:0 0 14px}
.empty.spaced{margin-top:12px}

/* Classes WoW Classic : fond sombre façon plaque de nom, nom dans la couleur de classe */
.fields.three{grid-template-columns:1fr 1fr 1fr}
select{font:inherit;font-weight:400;padding:8px 10px;border:2px solid var(--line);background:var(--input);color:var(--text);border-radius:3px;width:100%}
select.small{width:auto;padding:3px 6px;font-size:13px;border-width:1px}
.c-druid{--cls:#FF7D0A} .c-hunter{--cls:#ABD473} .c-mage{--cls:#69CCF0}
.c-paladin{--cls:#F58CBA} .c-priest{--cls:#FFFFFF} .c-rogue{--cls:#FFF569}
.c-shaman{--cls:#0070DE} .c-warlock{--cls:#9482C9} .c-warrior{--cls:#C79C6E}
.chip.cls{background:#161614;border-color:var(--cls);box-shadow:inset 0 4px 0 var(--cls)}
.chip.cls .first,.chip.cls .last{color:var(--cls)}
.chip.cls .first{font-weight:600}
.chip.c-shaman .first,.chip.c-shaman .last{color:#4a9bff}
.chip .cname{font-size:10px;color:#a3a39b;margin-top:2px}
.chip.cls .score{color:#b5b5ad}
ul.list li .ctrl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--cls);border:1px solid #0006;margin-right:6px;vertical-align:middle}

/* Glisser-déposer à la souris : copie du pseudo qui suit le curseur */
.chip.ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;margin:0;
  box-shadow:0 8px 24px rgba(0,0,0,.7);opacity:.95;outline:2px solid var(--focus)}
.chip.dragging{opacity:.35}

/* Classe désirée */
.profile{margin:0 0 8px}
.fields.four{grid-template-columns:1.2fr 1fr 1fr 1fr}
.profile-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pf-preview{font-size:14px;color:var(--muted)}
.pf-preview b{color:var(--cls,var(--text))}

/* Roster des Sires */
.roster-wrap{margin-top:8px}
.comp{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.comp span{border:1px solid #33322c;background:#0e0e0d;padding:4px 10px;border-radius:3px;font-size:13px}
.comp b{font-size:15px}
.comp .alliance b{color:#5aa9ff} .comp .horde b{color:#ff5a5a}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.rcard{background:#0e0e0d;border:1px solid #2b2a24;border-left:4px solid var(--cls,#555);padding:9px 11px;display:grid;gap:2px}
.rcard .rname{font-weight:800;font-size:16px;color:var(--cls,var(--text));word-break:break-word}
.rcard.c-shaman .rname{color:#4a9bff}
.rcard .rline{font-size:13px;color:#d6d6cf}
.rcard .rmeta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.rcard .fac-alliance{color:#5aa9ff} .rcard .fac-horde{color:#ff5a5a}
.role{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border-radius:2px;background:#24241f;color:#ecece7}
.role.tank{background:#2b3f63} .role.heal{background:#24512b} .role.dps{background:#5e2626}

@media (max-width:760px){
  .fields.four{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .fields.four{grid-template-columns:1fr}
}

/* Souhaits de classe (plusieurs par joueur) */
.fields.name-only{grid-template-columns:minmax(0,320px)}
.wishes{display:grid;gap:8px;margin-bottom:10px}
.wish{border:1px solid #2b2a24;border-left:4px solid var(--cls,#444);background:#0e0e0d;padding:8px 10px}
.wish .fields{margin-bottom:0}
.wish-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.wish-head b{color:var(--cls,var(--text))}
.wish-tools{display:flex;gap:6px}
.wish-add{margin-bottom:12px}
.rwish{display:flex;gap:6px;align-items:flex-start;margin-top:4px}
.rwish .rnum{font-size:11px;font-weight:700;color:var(--muted);min-width:52px;padding-top:2px;text-transform:uppercase;letter-spacing:.03em}
.rwish .rbody{display:grid;gap:1px}
.rwish .rcls{color:var(--cls,var(--text))}
.rwish.c-shaman .rcls{color:#4a9bff}
.rwish.alt{opacity:.8}

/* Titre : reflet qui passe + lueur animée */
.title{
  background:linear-gradient(110deg,#b8892f 0%,#f8d77a 35%,#fff7d6 50%,#f8d77a 65%,#b8892f 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  animation:titleShine 4s linear infinite,titleGlow2 2.8s ease-in-out infinite alternate;
}
@keyframes titleShine{from{background-position:100% 0}to{background-position:0% 0}}
@keyframes titleGlow2{
  from{filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 5px rgba(255,170,40,.35))}
  to{filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 16px rgba(255,170,40,.9))}
}
@media (prefers-reduced-motion:reduce){.title{animation:none}}
.rcard{align-content:start}

.rcard .rplayer{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.rcard .rname{font-size:18px}
.rwish{border-top:1px solid #23221d;padding-top:6px;margin-top:6px}
.rwish .rline.sub{font-size:12px;color:#c4c4bd}
.rwish .rcls{font-size:14px}
.wish .fields.four{grid-template-columns:1.2fr 1fr 1fr 1fr}
@media (max-width:760px){.wish .fields.four{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.wish .fields.four{grid-template-columns:1fr}}

/* Mon compte : mot de passe */
.pw-panel{margin-top:24px}
.pw-panel h2{margin:0 0 10px}

/* Lecteur des sons de la guilde, fixé en bas à gauche */
.gplayer{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:500;width:480px;max-width:calc(100vw - 24px);
  background:#0b0b0a;border:1px solid #3a3830;box-shadow:0 6px 24px rgba(0,0,0,.8);border-radius:4px}
.gp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 10px;border-bottom:1px solid #2b2a24}
.gp-title{font-family:"LifeCraft","Palatino Linotype",Georgia,serif;color:var(--gold);font-size:17px}
.gp-toggle{font:inherit;font-size:12px;font-weight:700;background:#24241f;color:var(--text);border:1px solid #3a3830;border-radius:3px;padding:3px 8px;cursor:pointer}
.gp-toggle:hover{background:#2f2f29}
.gp-body{padding:8px;display:grid;gap:8px}
.gp-body select{font-size:14px;padding:6px 8px}
.gp-frame{aspect-ratio:16/9;background:#000}
.gp-frame iframe{width:100%;height:100%;border:0;display:block}
.gplayer.collapsed{width:auto}
.gplayer.collapsed .gp-body{display:none}
.gplayer.collapsed .gp-head{border-bottom:0}
/* Espace en bas de page pour que le lecteur ne cache jamais le contenu */
body{padding-bottom:70px}
body.gp-open{padding-bottom:440px}

/* Volume perso du lecteur */
.gp-volrow{display:flex;align-items:center;gap:10px}
.gp-mute{font-size:22px;line-height:1;width:44px;height:40px;flex:none;background:#24241f;border:1px solid #3a3830;border-radius:4px;cursor:pointer;color:var(--text)}
.gp-mute:hover{background:#2f2f29}
.gp-pct{min-width:52px;text-align:right;font-size:14px;font-weight:700;color:var(--gold)}
.gp-vol{flex:1;width:auto;height:40px;margin:0;padding:0;border:0;border-radius:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--fill:60%}
.gp-vol::-webkit-slider-runnable-track{height:10px;border-radius:5px;border:1px solid #3a3830;
  background:linear-gradient(to right,var(--gold) var(--fill),#24241f var(--fill))}
.gp-vol::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;background:var(--gold);border:2px solid #000;box-shadow:0 0 6px rgba(255,170,40,.6)}
.gp-vol::-moz-range-track{height:10px;border-radius:5px;border:1px solid #3a3830;background:#24241f}
.gp-vol::-moz-range-progress{height:10px;border-radius:5px;background:var(--gold)}
.gp-vol::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--gold);border:2px solid #000;box-shadow:0 0 6px rgba(255,170,40,.6)}

/* Œil : bouton discret en haut à gauche pour ne voir que l'image de fond */
.eye-btn{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:10px;z-index:600;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.45);color:#f1f1ec;border:1px solid rgba(255,255,255,.18);opacity:.55}
.eye-btn:hover,.eye-btn:focus-visible{opacity:1;background:rgba(0,0,0,.7)}
body.bg-only .eye-btn{opacity:.85}
.hero,.wrap,.gplayer{transition:opacity .35s ease,visibility .35s}
body.bg-only .hero,body.bg-only .wrap,body.bg-only .gplayer{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero,.wrap,.gplayer{transition:none}}

/* Lecteur déplaçable : on le tient par son bandeau */
.gp-head{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.gplayer.moving .gp-head{cursor:grabbing}
.gplayer.moving{box-shadow:0 12px 36px rgba(0,0,0,.9);outline:1px solid rgba(248,215,122,.5)}
.gplayer.moving iframe{pointer-events:none}

.gplayer{cursor:grab;touch-action:none}
.gplayer select,.gplayer input,.gplayer button,.gp-frame{cursor:auto;touch-action:auto}
.gplayer button{cursor:pointer}
.gp-grip{font-size:16px;color:var(--muted);margin-right:-2px;line-height:1}
.gp-head{justify-content:flex-start}
.gp-head .gp-toggle{margin-left:auto}

/* Poignée de redimensionnement du lecteur (coin bas droit) */
.gplayer .gp-resize{position:absolute;right:0;bottom:0;width:22px;height:22px;padding:0;border:0;border-radius:0 0 4px 0;
  cursor:nwse-resize;touch-action:none;opacity:.7;
  background:linear-gradient(135deg,transparent 0 45%,var(--gold) 45% 52%,transparent 52% 62%,var(--gold) 62% 69%,transparent 69% 79%,var(--gold) 79% 86%,transparent 86%)}
.gplayer .gp-resize:hover,.gplayer .gp-resize:focus-visible{opacity:1}
.gplayer.collapsed .gp-resize{display:none}
.gp-body{padding-bottom:14px}