:root{--bg:#101117;--panel:#1b1d27;--line:#393b49;--text:#f4f0f4;--muted:#aaa8b5;--accent:#aeb8c9;--light:#e0e5ef;--glow:rgba(174,184,201,.22)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#343140,#11121a 60%,#0b0c11);color:var(--text);font-family:system-ui,sans-serif}.shell{max-width:1100px;margin:auto;padding:16px}header{display:flex;justify-content:center;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.brand{text-align:center}.brand b{display:block;font:36px Georgia;letter-spacing:.18em;color:var(--light);text-shadow:0 0 20px var(--glow)}.brand small,small{color:var(--muted);letter-spacing:.12em;font-size:10px}nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:14px}button{cursor:pointer;color:inherit}nav button,.treeTabs button{background:transparent;border:1px solid transparent;border-radius:10px;padding:10px 14px;color:var(--muted)}nav button.active,.treeTabs button.selected{border-color:var(--accent);color:var(--text);background:var(--glow)}.view{display:none}.view.active{display:block}.panel{background:linear-gradient(145deg,#20222d,#171922);border:1px solid var(--line);border-radius:18px;padding:20px;margin:14px 0;box-shadow:0 12px 28px #0003}.hero{display:grid;grid-template-columns:1.2fr .8fr;min-height:245px;align-items:center;background:linear-gradient(90deg,#171923f5,#171923aa),radial-gradient(circle at 85%,var(--glow),transparent 50%)}h1{font:38px Georgia;margin:8px 0 16px}h1 em{color:var(--light)}h2{font:24px Georgia;margin:8px 0}.hero p,.panel p{color:var(--muted);font-size:14px}.avatar{height:180px;display:grid;place-items:center;font:130px Georgia;color:var(--light);text-shadow:0 0 35px var(--glow);position:relative;background:radial-gradient(ellipse,var(--glow),transparent 65%);border-radius:15px}.avatar small{position:absolute;bottom:8px;font:9px system-ui}.avatar.big{height:230px}.primary,.secondary{border:1px solid var(--accent);border-radius:10px;padding:12px 16px;font-weight:700;background:linear-gradient(120deg,var(--accent),var(--light));color:#15151c}.secondary{background:transparent;color:var(--light)}.rank{border-color:var(--accent);box-shadow:0 0 20px var(--glow)}.ranktop,.between,.preview,.labels,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.ranktop h2{font-size:30px}.emblem{font-size:44px;color:var(--light)}.total{text-align:right}.total b{display:block;font:36px Georgia}.track{height:12px;background:#090a0f;border-radius:20px;margin-top:15px;overflow:hidden}.track i{display:block;width:92%;height:100%;background:linear-gradient(90deg,var(--accent),var(--light));box-shadow:0 0 14px var(--accent)}.labels{font-size:12px;color:var(--muted);margin-top:8px}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.two>.panel{margin:0 0 14px}.two h2{font-size:25px}.activity{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:13px}.activity small{display:block;margin-top:4px}.pill{border:1px solid var(--accent);border-radius:20px;padding:5px 9px;color:var(--light);white-space:nowrap}.hint{font-size:11px!important;line-height:1.5}.tree-row{display:grid;grid-template-columns:115px 1fr 35px;gap:10px;align-items:center;margin:16px 0;font-size:13px}.tiny{height:8px;background:#090a0f;border-radius:20px;overflow:hidden}.tiny i{display:block;height:100%;background:var(--accent)}label{display:block;color:var(--muted);font-size:12px;margin:12px 0}input,select{display:block;width:100%;padding:12px;margin-top:7px;border:1px solid var(--line);border-radius:10px;background:#101119;color:var(--text)}.preview{padding:12px;background:#11131b;border-radius:10px;margin:12px 0;color:var(--muted)}.preview b{color:var(--light);font-size:20px}.treeTabs{display:flex;gap:6px;overflow:auto}.treeTabs button{border:1px solid var(--line);white-space:nowrap}.goal{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:14px}.goal input{width:18px;margin:0;accent-color:var(--accent)}.goal.done span{text-decoration:line-through;color:var(--muted)}.del{margin-left:auto;background:none;border:0;color:var(--muted);font-size:18px}.add{display:flex;gap:8px;margin-top:14px}.add input{flex:1}.add button{font-size:20px}.mirror{display:flex;justify-content:space-around;text-align:center;padding:22px;color:var(--light)}.mirror small{letter-spacing:0}footer{display:flex;justify-content:space-between;color:#777986;font-size:9px;letter-spacing:.12em;padding:20px 4px}#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;background:#252936;border:1px solid var(--accent);padding:12px 18px;border-radius:12px;transition:.2s;z-index:5}#toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:650px){.shell{padding:10px}.hero{grid-template-columns:1fr}.hero>div:first-child{padding:10px}.avatar{height:130px;font-size:90px}.two{grid-template-columns:1fr}.brand b{font-size:28px}h1{font-size:32px}.panel{padding:15px}nav{justify-content:space-between;gap:0}nav button{padding:9px 7px;font-size:12px}}

.auth-panel{margin:14px 0;padding:16px}.auth-panel h2{margin:5px 0 10px}.auth-panel label{display:block;margin:10px 0}.auth-panel input{width:100%;box-sizing:border-box}.auth-actions{display:flex;gap:10px;flex-wrap:wrap}.auth-toggle{font-size:.85rem;padding:8px 12px}.auth-panel[hidden]{display:none!important}

.trait-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0 16px}
.trait-grid label{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);font-size:.9rem}
.trait-grid input{accent-color:var(--accent);width:17px;height:17px}
#characterName,#customTrait{width:100%}
@media(min-width:720px){.trait-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.journal-field{border:1px solid var(--line);border-radius:14px;padding:12px;margin:14px 0}
.journal-field legend{padding:0 6px;color:var(--light);font-size:.9rem}
.journal-layout{align-items:stretch}
.reaction-panel{display:flex;flex-direction:column;justify-content:center;min-height:100%;background:radial-gradient(circle at 50% 25%,var(--glow),transparent 55%)}
.reaction-face{font-size:4.5rem;text-align:center;margin:20px auto 8px;filter:drop-shadow(0 0 22px var(--glow))}
.reaction-panel h2,.reaction-panel p{text-align:center}
.trait-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:12px 0}
.journal-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.journal-entry:last-child{border-bottom:0}
.journal-entry small{display:block;color:var(--muted);margin-top:5px}
.journal-entry p{margin:7px 0 0;font-size:.9rem}
.journal-edit{white-space:nowrap}
@media(max-width:700px){.journal-layout{grid-template-columns:1fr}.reaction-panel{min-height:280px}}

.character-memory{margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035);font-size:.9rem;line-height:1.55;text-align:center}
#surpriseLine{align-self:center;margin:4px auto 12px}
.reaction-face{transition:transform .25s ease}
.reaction-face:hover{transform:translateY(-3px) scale(1.04)}

/* Identité visuelle de l'héroïne — LEVEL UP 2.4 */
.heroine-avatar{
  background-image:linear-gradient(180deg,rgba(12,13,18,.04),rgba(12,13,18,.34)),url("assets/heroine-reference.png");
  background-size:cover;
  background-position:18% 20%;
  border:1px solid var(--accent);
  box-shadow:0 0 24px var(--glow);
  min-height:260px;
}
.heroine-avatar:after{content:"";position:absolute;inset:0;border-radius:15px;box-shadow:inset 0 0 35px #0005;pointer-events:none}
.heroine-avatar small{z-index:1;background:#11131bd9;padding:6px 10px;border-radius:20px}
.heroine-reference{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#20222dcc,#14151dcc)}
.heroine-reference h2{margin:5px 0}
.heroine-reference img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:#111}
.heroine-reference p{line-height:1.55}
@media(max-width:650px){.heroine-avatar{min-height:220px;background-position:18% 18%}}

/* LEVEL UP 2.5 — expressions visuelles */
.reaction-portrait-wrap{position:relative;width:100%;max-width:230px;margin:12px auto 16px;border-radius:18px;overflow:hidden;border:1px solid var(--accent);box-shadow:0 0 20px var(--glow);background:#15131a}
.reaction-portrait{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 35%}
.reaction-emoji{position:absolute;right:10px;top:8px;background:#17131ddd;border:1px solid var(--accent);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:19px}
.expression-library{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#11131a66}
.expression-library h3{margin:0}
.expression-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}
.expression-card{min-width:0;text-align:center;background:#11131a;border:1px solid var(--line);border-radius:10px;overflow:hidden;padding-bottom:7px}
.expression-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.expression-card b{display:block;font-size:.82rem;margin-top:6px}
@media(max-width:600px){.expression-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reaction-portrait-wrap{max-width:190px}}

/* LEVEL UP 2.6 — personnalisation des cheveux */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hair-customizer{padding:16px;margin:12px 0;background:linear-gradient(145deg,#22232d,#171821)}
.hair-customizer h3{margin:5px 0 10px}
.hair-swatches{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 5px}
.hair-swatch{width:38px;height:38px;border-radius:50%;border:2px solid #777;background:linear-gradient(135deg,var(--swatch),#0d0d12);cursor:pointer;box-shadow:inset 0 0 0 2px #ffffff20;position:relative}
.hair-swatch.selected{outline:2px solid var(--accent);outline-offset:3px;border-color:#f7d8b5}
.hair-swatch.selected:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:white;text-shadow:0 1px 4px #000;font-weight:800}
.hair-choice{margin:8px 0 14px;color:var(--accent);font-weight:650}
.hair-style-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:10px 0 14px}
.hair-style{min-height:72px;padding:8px 4px;border:1px solid var(--line);border-radius:10px;background:#11131a;color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hair-style.selected{border-color:var(--accent);box-shadow:0 0 12px var(--glow);background:#3a2a2b}
.hair-style b{font-size:11px;line-height:1.2;text-align:center}
.style-icon{font-size:22px;color:var(--accent)}
.hair-preview{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--line);border-radius:10px;background:#101118;margin:10px 0}
.hair-preview-dot{width:28px;height:28px;border-radius:50%;background:var(--hair-color,#493126);border:2px solid #d9b28c;flex:0 0 auto}
.hair-preview strong{display:block;margin-top:3px}
@media(max-width:650px){.hair-style-options{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* LEVEL UP 2.7 — sélection de tenues */
.outfit-customizer{padding:16px;margin:12px 0;background:linear-gradient(145deg,#22232d,#171821)}
.outfit-customizer h3{margin:5px 0 10px}
.outfit-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.outfit-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:9px;border:1px solid var(--line);border-radius:12px;background:#11131a;color:var(--text);text-align:left;cursor:pointer;min-width:0}
.outfit-card.selected{border-color:var(--accent);box-shadow:0 0 14px var(--glow);background:#38282b}
.outfit-card b{font-size:13px}
.outfit-card small{font-size:11px;color:var(--muted)}
.outfit-illustration{display:block;width:100%;height:66px;border-radius:8px;background:linear-gradient(135deg,#34333a,#14151c);position:relative;overflow:hidden}
.outfit-illustration:before{content:"";position:absolute;left:calc(50% - 14px);top:7px;width:28px;height:51px;border-radius:9px 9px 5px 5px;background:linear-gradient(90deg,#090a0e,#37343a,#0b0c10);box-shadow:-13px 15px 0 -7px #242127,13px 15px 0 -7px #242127}
.outfit-illustration.sport:before{background:linear-gradient(90deg,#090a0e,#29272d,#090a0e)}
.outfit-illustration.technical:before{background:linear-gradient(90deg,#242b2d,#64706b,#252b2d)}
.outfit-illustration.cargo:before{background:linear-gradient(90deg,#333326,#6a6242,#343326)}
.outfit-illustration.training:before{background:linear-gradient(90deg,#38333c,#8a777f,#38333c)}
.outfit-preview{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--line);border-radius:10px;background:#101118;margin:10px 0}
.outfit-preview-icon{width:30px;height:30px;border-radius:9px;background:#302329;color:var(--accent);display:grid;place-items:center;font-size:20px}
.outfit-preview strong{display:block;margin-top:3px}

/* LEVEL UP 2.8 — accessoires */
.accessory-customizer{padding:16px;margin:12px 0;background:linear-gradient(145deg,#22232d,#171821)}
.accessory-customizer h3{margin:5px 0 10px}
.accessory-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.accessory-card{min-height:86px;padding:9px 5px;border:1px solid var(--line);border-radius:11px;background:#11131a;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.accessory-card.selected{border-color:var(--accent);box-shadow:0 0 13px var(--glow);background:#38282b}
.accessory-card span{font-size:25px;color:var(--accent);line-height:1}
.accessory-card b{font-size:11px;text-align:center;line-height:1.2}
.accessory-preview{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--line);border-radius:10px;background:#101118;margin:10px 0}
.accessory-preview>span{width:30px;height:30px;border-radius:9px;background:#302329;color:var(--accent);display:grid;place-items:center;font-size:21px;flex:0 0 auto}
.accessory-preview strong{display:block;margin-top:3px}
@media(max-width:650px){.accessory-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* LEVEL UP 2.9 — évolution visuelle des rangs */
.rank-evolution{margin:16px 0;padding:18px;background:radial-gradient(ellipse at 18% 28%,var(--glow),transparent 58%),linear-gradient(145deg,#24232b,#15161e);border:1px solid var(--accent);box-shadow:0 0 20px var(--glow)}
.rank-evolution-head,.rank-showcase,.rank-unlock,.rank-progress-label{display:flex;align-items:center;justify-content:space-between;gap:14px}
.rank-evolution-head h2{margin:5px 0}.rank-evolution-head p,.rank-copy p,.rank-unlock p{margin:4px 0;color:var(--muted)}
.rank-tier{font-size:11px;letter-spacing:.12em;color:var(--light);border:1px solid var(--accent);border-radius:20px;padding:7px 10px;white-space:nowrap}
.rank-showcase{justify-content:flex-start;padding:18px 0}
.rank-crest{width:104px;height:116px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;clip-path:polygon(50% 0,91% 22%,86% 75%,50% 100%,14% 75%,9% 22%);background:linear-gradient(145deg,var(--light),var(--accent) 45%,#171821 90%);filter:drop-shadow(0 0 18px var(--glow));color:#17131a;position:relative}
.rank-crest:before{content:"";position:absolute;inset:5px;clip-path:polygon(50% 0,91% 22%,86% 75%,50% 100%,14% 75%,9% 22%);border:1px solid #fff9;background:linear-gradient(145deg,#fff3,transparent 60%)}
.rank-crest span{font-size:36px;line-height:1;text-shadow:0 1px 3px #fff8;z-index:1}
.rank-crest small{font-size:11px;font-weight:900;letter-spacing:.12em;z-index:1}
.rank-copy h3{font-family:Georgia,serif;font-size:24px;margin:5px 0;color:var(--light)}
.rank-unlock{justify-content:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;background:#0e1018a8}
.unlock-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--glow);color:var(--light);font-size:23px;flex:0 0 auto}
.rank-unlock strong{display:block;margin:3px 0;color:var(--light)}
.rank-unlock p{font-size:12px}
.rank-progress-track{height:7px;background:#090a0f;border-radius:20px;overflow:hidden;margin-top:16px}
.rank-progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--light));box-shadow:0 0 12px var(--glow);border-radius:20px;transition:width .5s}
.rank-progress-label{font-size:11px;color:var(--muted);margin-top:6px}
@media(max-width:600px){.rank-evolution-head{align-items:flex-start}.rank-showcase{gap:12px}.rank-crest{width:82px;height:96px}.rank-copy h3{font-size:20px}}

/* LEVEL UP 3.0 — inventaire des récompenses */
.inventory-summary{display:flex;align-items:center;justify-content:space-between;background:radial-gradient(circle at 90% 40%,var(--glow),transparent 45%),linear-gradient(145deg,#24232b,#15161e)}
.inventory-summary h2{font-size:30px;margin:5px 0}.inventory-gem{font-size:48px;color:var(--light);text-shadow:0 0 18px var(--glow)}
.inventory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.inventory-item{padding:12px;border:1px solid var(--line);border-radius:13px;background:#12131b;min-width:0}
.inventory-item.unlocked{border-color:var(--accent);background:linear-gradient(145deg,var(--glow),#14151d 70%)}
.inventory-item.locked{opacity:.65}
.inventory-item-icon{height:62px;display:grid;place-items:center;border-radius:9px;background:#20212b;color:var(--light);font-size:34px;margin-bottom:9px}
.inventory-item small{color:var(--muted);font-size:10px;letter-spacing:.04em}
.inventory-item b{display:block;margin:5px 0;color:var(--light)}
.inventory-item p{font-size:12px;line-height:1.4;color:var(--muted);min-height:34px}
.inventory-status{display:inline-block;margin-top:4px;font-size:11px;color:var(--light)}
.next-reward{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--accent);border-radius:12px;background:linear-gradient(145deg,var(--glow),#12131b 70%)}
.next-reward-icon{width:56px;height:56px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#20212b;color:var(--light);font-size:29px}
.next-reward strong{display:block;margin:5px 0;color:var(--light)}
.next-reward p{margin:3px 0;font-size:12px;color:var(--muted)}
@media(max-width:560px){.inventory-grid{grid-template-columns:1fr}}

.equip-btn{margin-top:8px;border:1px solid var(--accent);border-radius:999px;padding:7px 12px;background:transparent;color:var(--light);font:inherit;font-size:11px;cursor:pointer}.equip-btn.is-equipped{background:var(--glow);font-weight:700}.equipped-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}.equipped-slot{border:1px solid var(--line);border-radius:11px;padding:11px;background:#12131b;min-width:0}.equipped-slot small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}.equipped-slot b{color:var(--light);font-size:13px;overflow-wrap:anywhere}@media(max-width:560px){.equipped-summary{grid-template-columns:1fr 1fr}}

/* LEVEL UP 3.2 — aperçu visuel de l'équipement sur le portrait */
.heroine-avatar{overflow:hidden}
.portrait-gear{position:absolute;inset:10px 10px 38px;display:flex;flex-direction:column;align-items:flex-end;gap:7px;z-index:2;pointer-events:none}
.portrait-gear-chip{display:flex;align-items:center;gap:6px;max-width:78%;padding:6px 9px;border:1px solid var(--accent);border-radius:999px;background:rgba(13,14,21,.86);box-shadow:0 0 16px var(--glow);font:600 10px system-ui;color:var(--light);backdrop-filter:blur(5px);animation:gearIn .35s ease both}
.portrait-gear-chip i{font-style:normal;font-size:15px;line-height:1}
.portrait-gear-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gear-embleme{align-self:flex-start;border-radius:10px}
.gear-aura{border-width:2px;box-shadow:0 0 18px var(--accent),inset 0 0 14px var(--glow)}
.gear-prestige{font-size:12px;border-width:2px;letter-spacing:.02em}
.heroine-avatar.has-aura{box-shadow:0 0 18px var(--accent),0 0 38px var(--glow),inset 0 0 45px var(--glow)}
.heroine-avatar.has-prestige{outline:1px solid var(--light);outline-offset:3px}
@keyframes gearIn{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:translateX(0)}}