/* Sélection premium (17/10/2026) : choix du serveur, des personnages et création (characters-ui.js).
   Chargée après characters-ui.css, juste avant mobile-v2.css. Fond : illustration d'Astrub (zaap, Iop, Crâ, Féca ; landing-assets/retro-astrub-hero)
   en webp léger, une seule image téléchargée selon l'écran (1440 px ≈ 89 Ko, mobile ≈ 37 Ko), seulement quand l'écran s'affiche.
   En jeu (.is-ingame), le voile flouté sur la carte reste tel quel. */
#rv-chars{--sp-gold:#e3bd6a;--sp-gold-hi:#ffe3a1;--sp-gold-lo:#8a6a2c;--sp-ink:#f6ecd4;--sp-muted:#c2b18b;--sp-line:rgba(227,189,106,.3);--sp-card:linear-gradient(160deg,rgba(64,50,32,.96),rgba(30,24,16,.97));--sp-ease:cubic-bezier(.2,.7,.2,1)}:where(html[data-theme="nuit"]) #rv-chars{--sp-card:linear-gradient(160deg,rgba(34,44,62,.96),rgba(17,21,29,.97))}

/* ---------- Fond : illustration, lumière chaude, vignettage ---------- */
#rv-chars:not(.is-ingame){background:#140e08;isolation:isolate}:where(html[data-theme="nuit"]) #rv-chars:not(.is-ingame){background:#0a0d12}
#rv-chars:not(.is-ingame)::before{content:"";position:fixed;inset:-3%;z-index:-2;pointer-events:none;background:#2b2a17 50% 50%/cover no-repeat;animation:sp-drift 40s ease-in-out infinite alternate}
#rv-chars:not(.is-ingame)::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
 radial-gradient(ellipse 55% 40% at 50% 0%,rgba(255,200,115,.30),transparent 72%),
 radial-gradient(ellipse 85% 75% at 50% 50%,transparent 30%,rgba(10,6,2,.78) 100%),
 linear-gradient(180deg,rgba(24,15,6,.30),rgba(20,13,6,.42) 55%,rgba(10,6,2,.80))}:where(html[data-theme="nuit"]) #rv-chars:not(.is-ingame)::after{background:radial-gradient(ellipse 55% 40% at 50% 0%,rgba(255,200,115,.30),transparent 72%),
 radial-gradient(ellipse 85% 75% at 50% 50%,transparent 30%,rgba(4,5,8,.78) 100%),
 linear-gradient(180deg,rgba(10,14,20,.30),rgba(9,12,17,.42) 55%,rgba(4,5,8,.80))}
@media (min-width:701px) and (min-height:501px){#rv-chars:not(.is-ingame)::before{background-image:url("ui-assets/select/astrub-zaap-1440.webp")}}
@media (max-width:700px),(max-height:500px){#rv-chars:not(.is-ingame)::before{background-image:url("ui-assets/select/astrub-zaap-mobile.webp");background-position:50% 60%}}
@keyframes sp-drift{from{transform:scale(1.03) translate3d(-1%,-.5%,0)}to{transform:scale(1.08) translate3d(1%,.8%,0)}}

/* ---------- Fenêtre : verre sombre, double filet doré, coins ornés ---------- */
#rv-chars .rv-chars-window{background:linear-gradient(180deg,rgba(44,34,22,.93),rgba(24,18,12,.95));border:1px solid var(--sp-gold-lo);border-radius:18px;
 box-shadow:0 0 0 1px #000,0 0 0 5px rgba(227,189,106,.07),inset 0 1px rgba(255,236,190,.12),0 40px 90px rgba(0,0,0,.72),0 0 70px rgba(255,190,90,.12)}:where(html[data-theme="nuit"]) #rv-chars .rv-chars-window{background:linear-gradient(180deg,rgba(24,31,42,.93),rgba(13,17,23,.95))}
#rv-chars .rv-chars-window::before{inset:6px;border-color:rgba(227,189,106,.2);border-radius:13px;z-index:2}
#rv-chars .rv-chars-window::after{content:"";position:absolute;inset:10px;pointer-events:none;z-index:2;opacity:.75;--c:var(--sp-gold);background:
 linear-gradient(var(--c),var(--c)) 0 0/22px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 22px,
 linear-gradient(var(--c),var(--c)) 100% 0/22px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 22px,
 linear-gradient(var(--c),var(--c)) 0 100%/22px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 22px,
 linear-gradient(var(--c),var(--c)) 100% 100%/22px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 22px;background-repeat:no-repeat}
#rv-chars .rv-chars-bar{min-height:62px;padding:10px 56px;background:radial-gradient(ellipse 60% 120% at 50% 0%,rgba(255,206,120,.16),transparent 70%),linear-gradient(180deg,rgba(72,56,35,.92),rgba(36,28,18,.92));border-bottom:1px solid var(--sp-gold-lo)}:where(html[data-theme="nuit"]) #rv-chars .rv-chars-bar{background:radial-gradient(ellipse 60% 120% at 50% 0%,rgba(255,206,120,.16),transparent 70%),linear-gradient(180deg,rgba(38,49,69,.92),rgba(19,25,35,.92))}
#rv-chars .rv-chars-bar h2{display:flex;align-items:center;gap:12px;font:700 21px/1.15 var(--font-display,Georgia,serif);letter-spacing:.1em;
 background:linear-gradient(180deg,#fff4cf,#f1cd7c 55%,#c99a45);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.85)) drop-shadow(0 0 12px rgba(227,189,106,.3))}
#rv-chars .rv-chars-bar h2::before{content:"";flex:none;width:40px;height:42px;background:url("ui-assets/select/retroverse-crest.webp") center/contain no-repeat}
#rv-chars .rv-chars-account{background:rgba(0,0,0,.28);border-bottom:1px solid rgba(0,0,0,.5);color:var(--sp-muted);letter-spacing:.02em}
#rv-chars .rv-chars-account a{color:var(--sp-gold-hi);text-underline-offset:3px}
#rv-chars .rv-chars-body{padding:6px 22px 16px}
#rv-chars .rv-chars-section{color:var(--sp-gold);letter-spacing:.2em}
#rv-chars .rv-chars-section::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--sp-gold);box-shadow:0 0 8px rgba(227,189,106,.7)}

/* ---------- Boutons : doré en relief (principal), sobres (secondaires) ---------- */
#rv-chars .rv-btn{min-height:42px;padding:9px 18px;border-radius:11px;font:700 13px/1.2 var(--font-ui,sans-serif);letter-spacing:.02em;color:var(--sp-ink);text-shadow:0 1px 0 #000;
 background:linear-gradient(180deg,rgba(255,240,200,.09),rgba(255,240,200,.02)) #2a2117;border:1px solid rgba(227,189,106,.42);
 box-shadow:inset 0 1px rgba(255,240,200,.13),0 2px 0 rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.35);transition:transform .12s var(--sp-ease),box-shadow .15s,border-color .15s,background-color .15s,color .15s}:where(html[data-theme="nuit"]) #rv-chars .rv-btn{background:linear-gradient(180deg,rgba(255,240,200,.09),rgba(255,240,200,.02)) #181e29}
#rv-chars .rv-btn:hover:not(:disabled){background:linear-gradient(180deg,rgba(255,240,200,.13),rgba(255,240,200,.03)) #3a2d1e;border-color:var(--sp-gold);color:var(--sp-gold-hi)}:where(html[data-theme="nuit"]) #rv-chars .rv-btn:hover:not(:disabled){background:linear-gradient(180deg,rgba(255,240,200,.13),rgba(255,240,200,.03)) #202938}
#rv-chars .rv-btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 0 0 rgba(0,0,0,0)}
#rv-chars .rv-btn:disabled{opacity:.42;filter:grayscale(.7);box-shadow:none;cursor:not-allowed}
#rv-chars .rv-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #150f08,0 0 0 4px var(--sp-gold-hi),0 0 18px rgba(255,227,161,.45)}:where(html[data-theme="nuit"]) #rv-chars .rv-btn:focus-visible{box-shadow:0 0 0 2px #0a0d13,0 0 0 4px var(--sp-gold-hi),0 0 18px rgba(255,227,161,.45)}
#rv-chars .rv-btn.is-primary{position:relative;overflow:hidden;isolation:isolate;min-width:180px;min-height:46px;padding:10px 28px;border-radius:12px;
 font:700 16px/1.1 var(--font-display,Georgia,serif);letter-spacing:.05em;color:#3b2303;text-shadow:0 1px 0 rgba(255,240,190,.75);
 background:linear-gradient(180deg,#fff3c4 0%,#f7d377 20%,#e6aa40 50%,#c9821b 51%,#dc9a30 100%);border:1px solid #ffe7a6;
 box-shadow:inset 0 1px 0 #fffbe8,inset 0 -2px 0 rgba(120,66,6,.5),0 0 0 1px #5a3606,0 4px 0 #6b4208,0 9px 20px rgba(0,0,0,.5),0 0 24px rgba(240,180,70,.32)}
#rv-chars .rv-btn.is-primary::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-75%;width:45%;z-index:-1;animation:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);transition:left .65s var(--sp-ease);pointer-events:none}
#rv-chars .rv-btn.is-primary:hover:not(:disabled){color:#3b2303;border-color:#fff1c4;filter:brightness(1.06) saturate(1.08);box-shadow:inset 0 1px 0 #fffbe8,inset 0 -2px 0 rgba(120,66,6,.5),0 0 0 1px #5a3606,0 4px 0 #6b4208,0 12px 26px rgba(0,0,0,.55),0 0 34px rgba(255,196,90,.55)}
#rv-chars .rv-btn.is-primary:hover:not(:disabled)::after{left:135%}
#rv-chars .rv-btn.is-primary:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px 4px rgba(120,66,6,.45),0 0 0 1px #5a3606,0 1px 0 #6b4208,0 4px 10px rgba(0,0,0,.45)}
#rv-chars .rv-btn.is-primary:focus-visible{box-shadow:inset 0 1px 0 #fffbe8,0 0 0 1px #5a3606,0 4px 0 #6b4208,0 0 0 3px #150f08,0 0 0 5px var(--sp-gold-hi),0 0 26px rgba(255,214,130,.6)}
#rv-chars .rv-btn.is-primary:disabled{opacity:.7;filter:none;color:#3b362c;text-shadow:none;background:linear-gradient(180deg,#9c927b,#746b57);border-color:#a89e86;box-shadow:inset 0 1px rgba(255,255,255,.25),0 0 0 1px #2c2820,0 3px 0 #3a352b}:where(html[data-theme="nuit"]) #rv-chars .rv-btn.is-primary:disabled{box-shadow:inset 0 1px rgba(255,255,255,.25),0 0 0 1px #1d242f,0 3px 0 #272f3e}
#rv-chars .rv-btn.is-primary:disabled::after{display:none}
#rv-chars .rv-btn.is-danger{color:#ffe6df;background:linear-gradient(180deg,#9a3a2b,#651f15);border-color:#c4644c}
#rv-chars .rv-btn.is-danger:hover:not(:disabled){color:#fff;background:linear-gradient(180deg,#ad4433,#74241a);border-color:#e08a70}
#rv-chars .rv-chars-actions{gap:10px;padding:14px 22px;background:linear-gradient(180deg,rgba(36,28,19,.96),rgba(22,17,11,.98));border-top:1px solid rgba(227,189,106,.22);box-shadow:0 -10px 24px rgba(0,0,0,.25)}:where(html[data-theme="nuit"]) #rv-chars .rv-chars-actions{background:linear-gradient(180deg,rgba(20,25,35,.96),rgba(12,15,21,.98))}
#rv-chars .rv-chars-x{width:36px;height:36px}

/* ---------- Serveurs : grandes cartes, badges recommandé / état / population ---------- */
#rv-chars .rv-chars-window.is-realms{width:min(700px,100%)}
#rv-chars .rv-realms-intro{font-size:13.5px;color:var(--sp-muted);margin:16px 0 14px}
#rv-chars .rv-realms.is-step{gap:18px}
#rv-chars .rv-realms.is-step button{border:1px solid var(--sp-line);border-radius:18px;background:linear-gradient(180deg,#1b150e,#2a2117);box-shadow:inset 0 1px rgba(255,240,200,.08),0 10px 26px rgba(0,0,0,.55);transition:transform .22s var(--sp-ease),border-color .2s,box-shadow .22s}:where(html[data-theme="nuit"]) #rv-chars .rv-realms.is-step button{background:linear-gradient(180deg,#0f131a,#181e29)}
#rv-chars .rv-realms.is-step button img{transition:transform .5s var(--sp-ease),filter .2s;transform-origin:50% 30%}
#rv-chars .rv-realms.is-step button:hover:not(:disabled){transform:translateY(-5px);border-color:var(--sp-gold);box-shadow:inset 0 1px rgba(255,240,200,.12),0 18px 34px rgba(0,0,0,.6),0 0 26px rgba(227,189,106,.25)}
#rv-chars .rv-realms.is-step button:hover:not(:disabled) img{transform:scale(1.04)}
#rv-chars .rv-realms.is-step button.is-on{border-color:var(--sp-gold-hi);box-shadow:inset 0 0 0 1px rgba(255,227,161,.35),0 0 0 3px rgba(227,189,106,.22),0 18px 36px rgba(0,0,0,.6),0 0 40px rgba(255,200,100,.28)}
#rv-chars .rv-realms.is-step button b{font-size:30px;letter-spacing:.04em}
#rv-chars .rv-realms.is-step button small{color:#d8c9a6}
.rv-realm-reco,.rv-realm-state{position:absolute;top:12px;z-index:1;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font:800 10.5px/1.5 var(--font-ui,sans-serif);font-style:normal;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.rv-realm-reco{left:12px;color:#3b2303;background:linear-gradient(180deg,#fff0b8,#e9b04a);border:1px solid #fff1c4;box-shadow:0 0 0 1px #5a3606,0 3px 10px rgba(0,0,0,.5),0 0 16px rgba(255,200,90,.45)}
.rv-realm-state{right:12px;color:#d9f5dd;background:rgba(14,10,6,.78);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px)}:where(html[data-theme="nuit"]) .rv-realm-state{background:rgba(7,9,13,.78)}
.rv-realm-state::before{content:"";width:7px;height:7px;border-radius:50%;background:#46d160;box-shadow:0 0 7px #46d160}
.rv-realm-state.is-maint{color:#ffd9a8}.rv-realm-state.is-maint::before{background:#f0962e;box-shadow:0 0 7px #f0962e}
.rv-realm-state.is-soon{color:#d4cbb8}.rv-realm-state.is-soon::before{background:#9b927e;box-shadow:none}
#rv-chars .rv-realm-online{gap:7px;padding:3px 10px;border-radius:999px;background:rgba(70,209,96,.1);border:1px solid rgba(70,209,96,.3)}
.rv-realm-pop{display:inline-flex;align-items:flex-end;gap:2px;height:11px;margin-left:2px;text-decoration:none}
.rv-realm-pop s{width:3px;border-radius:1px;background:rgba(185,232,192,.25)}
.rv-realm-pop s:nth-child(1){height:5px}.rv-realm-pop s:nth-child(2){height:8px}.rv-realm-pop s:nth-child(3){height:11px}
[data-pop="1"] .rv-realm-pop s:nth-child(-n+1),[data-pop="2"] .rv-realm-pop s:nth-child(-n+2),[data-pop="3"] .rv-realm-pop s{background:#7fe08f}
#rv-chars .rv-realm-chip{padding:9px 12px 9px 9px;border-radius:14px;border-color:var(--sp-line);background:linear-gradient(90deg,rgba(26,20,13,.95),rgba(48,37,24,.95))}:where(html[data-theme="nuit"]) #rv-chars .rv-realm-chip{background:linear-gradient(90deg,rgba(14,18,25,.95),rgba(26,33,46,.95))}

/* ---------- Personnages : scène du sélectionné, cartes ---------- */
#rv-chars .rv-chars-stage{border-radius:18px;border-color:var(--sp-line);padding:14px;background:radial-gradient(ellipse 50% 90% at 18% 50%,rgba(255,200,110,.14),transparent 70%),linear-gradient(90deg,rgba(26,20,13,.96),rgba(46,36,23,.94));box-shadow:inset 0 1px rgba(255,240,200,.08),0 10px 26px rgba(0,0,0,.4)}:where(html[data-theme="nuit"]) #rv-chars .rv-chars-stage{background:radial-gradient(ellipse 50% 90% at 18% 50%,rgba(255,200,110,.14),transparent 70%),linear-gradient(90deg,rgba(14,18,25,.96),rgba(25,32,44,.94))}
#rv-chars .rv-create-preview{overflow:hidden;border:1px solid var(--sp-gold-lo);border-radius:16px;
 background:radial-gradient(ellipse 42% 12% at 50% 87%,rgba(255,220,150,.45),transparent 75%),radial-gradient(ellipse 70% 60% at 50% 25%,rgba(255,226,160,.22),transparent 70%),linear-gradient(180deg,#5d7a33,#3e5a24 55%,#2a3f19);
 box-shadow:inset 0 0 0 1px rgba(255,240,200,.18),inset 0 -40px 50px rgba(0,0,0,.35),inset 0 20px 40px rgba(0,0,0,.15),0 10px 24px rgba(0,0,0,.5)}
#rv-chars .rv-stage-info h3{font-size:30px;background:linear-gradient(180deg,#fff4cf,#f1cd7c 60%,#c99a45);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.8))}
#rv-chars .rv-chars-list{gap:14px}
#rv-chars .rv-char-card{overflow:hidden;isolation:isolate;min-height:108px;border-radius:16px;background:var(--sp-card);border:1px solid var(--sp-line);box-shadow:inset 0 1px rgba(255,240,200,.08),0 8px 20px rgba(0,0,0,.45);transition:transform .2s var(--sp-ease),border-color .2s,box-shadow .2s}
#rv-chars .rv-char-card::before{content:"";position:absolute;right:-16px;bottom:-22px;width:104px;height:104px;z-index:-1;background:var(--rv-sym,none) center/contain no-repeat;opacity:.08;transform:rotate(-12deg);transition:opacity .25s,transform .4s var(--sp-ease);pointer-events:none}
#rv-chars .rv-char-card:hover{transform:translateY(-3px);border-color:var(--sp-gold);box-shadow:inset 0 1px rgba(255,240,200,.12),0 14px 28px rgba(0,0,0,.55),0 0 20px rgba(227,189,106,.18)}
#rv-chars .rv-char-card:hover::before{opacity:.15;transform:rotate(-4deg) scale(1.06)}
#rv-chars .rv-char-card:active{transform:translateY(0)}
#rv-chars .rv-char-card.is-selected{border-color:var(--sp-gold-hi);background:radial-gradient(ellipse 60% 100% at 15% 50%,rgba(255,206,120,.2),transparent 70%),linear-gradient(160deg,rgba(78,61,38,.98),rgba(40,31,20,.98));box-shadow:inset 0 0 0 1px rgba(255,227,161,.3),0 0 0 3px rgba(227,189,106,.2),0 14px 30px rgba(0,0,0,.6),0 0 30px rgba(255,200,100,.25)}:where(html[data-theme="nuit"]) #rv-chars .rv-char-card.is-selected{background:radial-gradient(ellipse 60% 100% at 15% 50%,rgba(255,206,120,.2),transparent 70%),linear-gradient(160deg,rgba(41,54,75,.98),rgba(21,28,39,.98))}
#rv-chars .rv-char-card.is-selected::before{opacity:.18}
#rv-chars .rv-char-card:focus-visible{outline:none;box-shadow:0 0 0 2px #150f08,0 0 0 4px var(--sp-gold-hi),0 14px 30px rgba(0,0,0,.6)}:where(html[data-theme="nuit"]) #rv-chars .rv-char-card:focus-visible{box-shadow:0 0 0 2px #0a0d13,0 0 0 4px var(--sp-gold-hi),0 14px 30px rgba(0,0,0,.6)}
#rv-chars .rv-char-face{width:76px;height:76px;box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 0 4px rgba(227,189,106,.22),inset 0 0 14px rgba(0,0,0,.65)}
#rv-chars .rv-char-card.is-selected .rv-char-face::after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
 background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,227,161,.95) 80%,transparent 96%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:sp-spin 3.6s linear infinite}
@keyframes sp-spin{to{transform:rotate(1turn)}}
#rv-chars .rv-char-info strong{font-size:18px}
#rv-chars .rv-char-info small{color:#a99a78}
#rv-chars .rv-char-lv{box-shadow:inset 0 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.5)}
/* Étiquette (En jeu, Compagnon, Nom à choisir) : onglet suspendu au bord haut, sans chevaucher le nom. */
#rv-chars .rv-char-card:has(.rv-char-flag){padding-top:24px}
#rv-chars .rv-char-flag{top:0;right:14px;padding:2px 10px 3px;border-radius:0 0 9px 9px;border-top:0;font-size:10.5px;letter-spacing:.03em;box-shadow:0 3px 8px rgba(0,0,0,.4)}
#rv-chars .rv-char-flag.is-ally{background:linear-gradient(180deg,#4f8a35,#35612a);color:#eaffdf;border-color:#6fae52}
#rv-chars .rv-char-card.is-empty{background:rgba(255,240,200,.03);border:1px dashed rgba(227,189,106,.4);box-shadow:none}
#rv-chars .rv-char-card.is-empty:hover{background:rgba(227,189,106,.08);border-style:solid}
/* Mode compagnon : même matière que le reste (l'encart clair détonnait). */
#rv-chars .rv-ally-cta{padding:14px 16px;border-radius:16px;border:1px solid rgba(111,174,82,.45);background:radial-gradient(ellipse 50% 120% at 0% 0%,rgba(111,174,82,.18),transparent 70%),linear-gradient(160deg,rgba(40,44,26,.95),rgba(26,24,15,.96))}
#rv-chars .rv-ally-cta,#rv-chars .rv-ally-cta p{color:var(--sp-ink)}
#rv-chars .rv-ally-cta h4{color:#cdeeb4;font:700 15px/1.3 var(--font-display,Georgia,serif);letter-spacing:.02em}
#rv-chars .rv-ally-cta h4 small{color:var(--sp-muted);opacity:1}
#rv-chars .rv-ally-cta .rv-btn.is-primary{min-width:0;min-height:40px;font-size:14px}
#rv-chars .rv-create-ally{margin:4px 22px 12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(111,174,82,.35);background:rgba(63,107,42,.16);color:#dcebcd}

/* ---------- Création ---------- */
#rv-chars .rv-create-classes{gap:8px;padding:16px 22px 8px}
#rv-chars .rv-class{gap:5px;padding:8px 2px 7px;border-radius:14px;background:var(--sp-card);border:1px solid var(--sp-line);box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform .18s var(--sp-ease),border-color .18s,box-shadow .18s}
#rv-chars .rv-class img{width:56px;height:56px;border:2px solid var(--sp-gold-lo);box-shadow:0 0 0 2px rgba(0,0,0,.5);transition:transform .25s var(--sp-ease),border-color .2s}
#rv-chars .rv-class:hover{transform:translateY(-2px);border-color:var(--sp-gold)}
#rv-chars .rv-class:hover img{transform:scale(1.07)}
#rv-chars .rv-class.is-selected{padding:8px 2px 7px;border-color:var(--sp-gold-hi);color:var(--sp-gold-hi);background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(255,206,120,.25),transparent 75%),linear-gradient(160deg,rgba(84,66,40,.98),rgba(42,33,21,.98));box-shadow:inset 0 0 0 1px rgba(255,227,161,.3),0 0 0 2px rgba(227,189,106,.25),0 0 22px rgba(255,200,100,.3)}:where(html[data-theme="nuit"]) #rv-chars .rv-class.is-selected{background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(255,206,120,.25),transparent 75%),linear-gradient(160deg,rgba(44,57,80,.98),rgba(23,29,40,.98))}
#rv-chars .rv-class.is-selected img{border-color:var(--sp-gold-hi);box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 14px rgba(255,214,130,.6)}
#rv-chars .rv-class:focus-visible{outline:none;box-shadow:0 0 0 2px #150f08,0 0 0 4px var(--sp-gold-hi)}:where(html[data-theme="nuit"]) #rv-chars .rv-class:focus-visible{box-shadow:0 0 0 2px #0a0d13,0 0 0 4px var(--sp-gold-hi)}
#rv-chars .rv-create-sex{gap:0;width:max-content;margin:8px auto 4px;padding:4px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid var(--sp-line);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
#rv-chars .rv-create-sex button{min-width:110px;min-height:36px;border:1px solid transparent;background:transparent;color:var(--sp-muted);transition:background .2s,color .2s}
#rv-chars .rv-create-sex button:hover{color:var(--sp-gold-hi)}
#rv-chars .rv-create-sex button[aria-checked=true]{color:#3b2303;background:linear-gradient(180deg,#fff0b8,#e6aa40 60%,#cf8a22);border-color:#ffe7a6;box-shadow:0 2px 6px rgba(0,0,0,.45),0 0 14px rgba(240,180,70,.35)}
#rv-chars .rv-create-sex button:focus-visible{outline:2px solid var(--sp-gold-hi);outline-offset:2px}
#rv-chars .rv-create-stage{gap:12px 22px;padding:10px 22px 14px}
#rv-chars .rv-create-about h3{font-size:26px;background:linear-gradient(180deg,#fff4cf,#f1cd7c 60%,#c99a45);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.8))}
#rv-chars .rv-create-about p{font-size:13.5px;line-height:1.5}
#rv-chars .rv-color{padding:6px 8px;border-radius:12px;background:rgba(0,0,0,.25);border-color:var(--sp-line)}
#rv-chars .rv-color input{width:30px;height:30px;border-radius:50%;border:2px solid var(--sp-gold-lo);overflow:hidden;box-shadow:0 0 0 2px rgba(0,0,0,.5)}
#rv-chars .rv-color input::-webkit-color-swatch-wrapper{padding:0}#rv-chars .rv-color input::-webkit-color-swatch{border:0;border-radius:50%}#rv-chars .rv-color input::-moz-color-swatch{border:0;border-radius:50%}
#rv-chars .rv-color button{border-radius:8px}
#rv-chars .rv-color-random{border-radius:12px}
#rv-chars .rv-name-row input{min-height:46px;border-radius:12px;font-size:16px;letter-spacing:.02em}
#rv-chars .rv-name-row .rv-btn{min-width:48px}
#rv-chars .rv-step{border-radius:12px;background:rgba(20,15,9,.7);backdrop-filter:blur(3px);transition:background .15s,transform .15s}:where(html[data-theme="nuit"]) #rv-chars .rv-step{background:rgba(10,13,19,.7)}
#rv-chars .rv-step:hover{background:rgba(60,45,26,.85)}:where(html[data-theme="nuit"]) #rv-chars .rv-step:hover{background:rgba(30,40,56,.85)}
#rv-chars .rv-turn{width:38px;height:38px}
#rv-chars .rv-chars-switch{border-radius:18px}

/* ---------- Téléphone portrait : la fenêtre devient un verre sur l'illustration ---------- */
@media (max-width:700px){
 #rv-chars .rv-chars-window{border:0;border-radius:0;box-shadow:none;background:linear-gradient(180deg,rgba(20,14,8,.12),rgba(20,14,8,.3) 45%,rgba(16,11,6,.55))}:where(html[data-theme="nuit"]) #rv-chars .rv-chars-window{background:linear-gradient(180deg,rgba(10,13,18,.12),rgba(10,13,18,.3) 45%,rgba(8,10,14,.55))}
 #rv-chars:not(.is-ingame)::after{background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(255,200,115,.22),transparent 75%),radial-gradient(ellipse 120% 80% at 50% 50%,transparent 45%,rgba(10,6,2,.6) 100%),linear-gradient(180deg,rgba(24,15,6,.25),rgba(20,13,6,.35) 50%,rgba(10,6,2,.7))}:where(html[data-theme="nuit"]) #rv-chars:not(.is-ingame)::after{background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(255,200,115,.22),transparent 75%),radial-gradient(ellipse 120% 80% at 50% 50%,transparent 45%,rgba(4,5,8,.6) 100%),linear-gradient(180deg,rgba(10,14,20,.25),rgba(9,12,17,.35) 50%,rgba(4,5,8,.7))}
 #rv-chars .rv-realms-intro,#rv-chars .rv-chars-section,#rv-chars .rv-create-name label,#rv-chars .rv-create-name small{text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.8)}
 #rv-chars .rv-realms-intro{padding:6px 10px;border-radius:10px;background:rgba(14,10,6,.55)}:where(html[data-theme="nuit"]) #rv-chars .rv-realms-intro{background:rgba(7,9,13,.55)}
 #rv-chars .rv-create-stage{margin:4px 10px 8px;padding:10px;border:1px solid var(--sp-line);border-radius:16px;background:rgba(24,18,11,.84);box-shadow:0 8px 20px rgba(0,0,0,.35)}:where(html[data-theme="nuit"]) #rv-chars .rv-create-stage{background:rgba(12,16,23,.84)}
 #rv-chars .rv-create-sex{background:rgba(14,10,6,.72)}:where(html[data-theme="nuit"]) #rv-chars .rv-create-sex{background:rgba(7,9,13,.72)}
 #rv-chars .rv-chars-window::after{display:none}
 #rv-chars .rv-chars-bar{min-height:54px;padding:max(8px,env(safe-area-inset-top)) 50px 8px;background:linear-gradient(180deg,rgba(30,22,12,.72),rgba(30,22,12,.35));border-bottom-color:rgba(227,189,106,.35);backdrop-filter:blur(6px)}:where(html[data-theme="nuit"]) #rv-chars .rv-chars-bar{background:linear-gradient(180deg,rgba(15,19,27,.72),rgba(15,19,27,.35))}
 #rv-chars .rv-chars-bar h2{font-size:17px;gap:9px;letter-spacing:.08em}
 #rv-chars .rv-chars-bar h2::before{width:32px;height:34px}
 #rv-chars .rv-chars-account{background:rgba(0,0,0,.32);font-size:11.5px}
 #rv-chars .rv-chars-body{padding:4px 12px 12px}
 #rv-chars .rv-chars-actions{padding:10px 12px max(12px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(30,23,15,.9),rgba(18,13,8,.98));backdrop-filter:blur(8px)}:where(html[data-theme="nuit"]) #rv-chars .rv-chars-actions{background:linear-gradient(180deg,rgba(16,21,29,.9),rgba(9,12,17,.98))}
 #rv-chars .rv-btn{min-height:46px;border-radius:12px}
 #rv-chars .rv-btn.is-primary{flex:1.6;min-width:0;min-height:50px;padding:10px 14px;font-size:17px}
 #rv-chars .rv-realms-intro{margin:12px 6px 12px;font-size:12.5px}
 #rv-chars .rv-realms.is-step{gap:10px}
 #rv-chars .rv-realms.is-step button{border-radius:16px}
 #rv-chars .rv-realms.is-step button img{height:min(48vh,300px)}
 #rv-chars .rv-realms.is-step button b{font-size:23px}
 .rv-realm-reco{left:50%;transform:translateX(-50%);top:8px;padding:2px 8px;font-size:9.5px}
 .rv-realm-state.is-open{display:none}
 .rv-realm-state{top:auto;right:auto;left:50%;transform:translateX(-50%);bottom:auto;top:34px;font-size:9.5px}
 #rv-chars .rv-realm-online{max-width:100%;font-size:10.5px;padding:2px 7px;gap:5px;white-space:nowrap}
 #rv-chars .rv-realms.is-step button>span{padding:0 8px 14px;min-width:0}
 #rv-chars .rv-realms.is-step button small{max-width:100%;font-size:11px;overflow-wrap:anywhere}
 #rv-chars .rv-chars-stage{border-radius:16px;padding:10px}
 #rv-chars .rv-stage-info h3{font-size:23px}
 #rv-chars .rv-chars-list{gap:10px}
 #rv-chars .rv-char-card{min-height:84px;padding:10px 12px;gap:12px;border-radius:14px}
 #rv-chars .rv-char-card:has(.rv-char-flag){padding-top:10px}
 #rv-chars .rv-char-flag{top:auto;bottom:0;border-radius:9px 9px 0 0;border-top:1px solid;border-bottom:0}
 #rv-chars .rv-char-face{width:62px;height:62px}
 #rv-chars .rv-char-info strong{font-size:17px}
 #rv-chars .rv-create-classes{gap:5px;padding:10px 10px 4px}
 #rv-chars .rv-class{padding:5px 1px 4px;border-radius:11px}#rv-chars .rv-class.is-selected{padding:5px 1px 4px}
 #rv-chars .rv-class img{width:40px;height:40px}
 #rv-chars .rv-create-sex button{min-width:96px;min-height:38px}
 #rv-chars .rv-create-stage{gap:10px 12px;padding:6px 10px 10px}
 #rv-chars .rv-create-about h3{font-size:22px}
 #rv-chars .rv-create-about p{font-size:13px}
 #rv-chars .rv-color{padding:5px 4px}
 #rv-chars .rv-create-ally{margin:2px 10px 10px;font-size:12px}
}
@media (max-width:370px){#rv-chars .rv-chars-bar h2{font-size:15px;letter-spacing:.04em}#rv-chars .rv-class span{font-size:9.5px}#rv-chars .rv-class img{width:36px;height:36px}#rv-chars .rv-btn{padding:9px 10px}}

/* ---------- Téléphone paysage : plein écran, en-tête compact, pied toujours visible ---------- */
@media (max-height:500px) and (min-width:701px){
 #rv-chars{padding:0;place-items:stretch}
 #rv-chars .rv-chars-window,#rv-chars .rv-chars-window.is-create,#rv-chars .rv-chars-window.is-realms,#rv-chars .rv-chars-window.is-small{width:100%;max-height:100dvh;height:100dvh;border:0;border-radius:0;box-shadow:none;background:linear-gradient(90deg,rgba(18,13,8,.6),rgba(22,16,10,.9) 18%,rgba(22,16,10,.9) 82%,rgba(18,13,8,.6))}:where(html[data-theme="nuit"]) #rv-chars .rv-chars-window,:where(html[data-theme="nuit"]) #rv-chars .rv-chars-window.is-create,:where(html[data-theme="nuit"]) #rv-chars .rv-chars-window.is-realms,:where(html[data-theme="nuit"]) #rv-chars .rv-chars-window.is-small{background:linear-gradient(90deg,rgba(9,12,17,.6),rgba(11,15,21,.9) 18%,rgba(11,15,21,.9) 82%,rgba(9,12,17,.6))}
 #rv-chars .rv-chars-window::before,#rv-chars .rv-chars-window::after{display:none}
 #rv-chars .rv-chars-bar{min-height:40px;padding:4px max(50px,env(safe-area-inset-right)) 4px max(50px,env(safe-area-inset-left))}
 #rv-chars .rv-chars-bar h2{font-size:15px}#rv-chars .rv-chars-bar h2::before{width:26px;height:28px}
 #rv-chars .rv-chars-x{width:32px;height:32px}
 #rv-chars .rv-chars-account{padding:3px 12px;font-size:11px}
 #rv-chars .rv-chars-body{padding:2px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
 #rv-chars .rv-create{flex:1}
 #rv-chars .rv-chars-actions{position:sticky;bottom:0;margin-top:auto;padding:6px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left))}
 #rv-chars .rv-btn{min-height:38px;padding:6px 14px}#rv-chars .rv-btn.is-primary{min-height:40px;font-size:15px}
 #rv-chars .rv-create-classes{grid-template-columns:repeat(12,1fr);gap:4px;padding:6px 16px 2px}
 #rv-chars .rv-class{padding:4px 0;border-radius:10px}#rv-chars .rv-class.is-selected{padding:4px 0}
 #rv-chars .rv-class img{width:38px;height:38px}#rv-chars .rv-class span{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 #rv-chars .rv-create-sex{margin:4px auto 2px}#rv-chars .rv-create-sex button{min-height:30px;min-width:90px}
 #rv-chars .rv-create-stage{grid-template-columns:150px 1fr 1fr;grid-template-areas:"preview about name" "preview about colors";padding:4px 16px 6px;gap:6px 14px}
 #rv-chars .rv-create-about h3{font-size:19px}#rv-chars .rv-create-about p{font-size:12px;line-height:1.35}
 #rv-chars .rv-color>span{display:none}#rv-chars .rv-color{padding:3px 5px}
 #rv-chars .rv-create-ally{display:none}
 #rv-chars .rv-realms-intro{margin:6px 0}
 #rv-chars .rv-realms.is-step{grid-template-columns:1fr 1fr;gap:12px}
 #rv-chars .rv-realms.is-step button{flex-direction:row;align-items:stretch;text-align:left}
 #rv-chars .rv-realms.is-step button img{width:42%;height:auto;min-height:170px;max-height:220px;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
 #rv-chars .rv-realms.is-step button>span{margin:0;padding:12px 12px 12px 0;justify-items:start;align-content:center}
 #rv-chars .rv-realms.is-step button b{font-size:22px}
 #rv-chars .rv-realms.is-step button em,#rv-chars .rv-realms.is-step .rv-realm-online{margin:0}
 .rv-realm-reco{top:8px;left:8px;font-size:9.5px}
 .rv-realm-state{top:8px;right:8px;font-size:9.5px}
 #rv-chars .rv-chars-stage{grid-template-columns:96px 1fr;padding:6px 10px;margin-top:6px}
 #rv-chars .rv-stage-preview{width:96px}
 #rv-chars :is(.rv-stage-role,.rv-stage-style,.rv-stage-where){display:none}
 #rv-chars .rv-realm-chip{margin-top:6px;padding:4px 8px 4px 4px}#rv-chars .rv-realm-chip img{width:30px;height:40px}
 #rv-chars .rv-chars-window .rv-realm-chip .rv-btn{min-height:32px;padding:4px 12px}
 #rv-chars .rv-stage-info h3{font-size:21px}
 #rv-chars .rv-chars-list{grid-template-columns:repeat(3,1fr);gap:8px}
 #rv-chars .rv-char-card{min-height:76px;padding:8px 10px;gap:9px}
 #rv-chars .rv-char-card:has(.rv-char-flag){padding-top:20px}
 #rv-chars .rv-char-face{width:52px;height:52px}
 #rv-chars .rv-char-info strong{font-size:15px}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
 #rv-chars:not(.is-ingame)::before,#rv-chars .rv-char-card.is-selected .rv-char-face::after{animation:none}
 #rv-chars .rv-btn,#rv-chars .rv-char-card,#rv-chars .rv-char-card::before,#rv-chars .rv-class,#rv-chars .rv-class img,#rv-chars .rv-realms.is-step button,#rv-chars .rv-realms.is-step button img{transition:none}
 #rv-chars .rv-char-card:hover,#rv-chars .rv-class:hover,#rv-chars .rv-realms.is-step button:hover:not(:disabled),#rv-chars .rv-realms.is-step button:hover:not(:disabled) img,#rv-chars .rv-class:hover img{transform:none}
 #rv-chars .rv-btn.is-primary::after{display:none}
}