:root { --pink:#ff4fb0; --cyan:#5ae8ff; --violet:#9a5aff; --orange:#ff8a2a; --bg:rgba(14,6,34,.86); --font: "Trebuchet MS","Segoe UI",system-ui,sans-serif; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:#07020f; color:#f2eaff; font-family:var(--font); user-select:none; }
#game { position:fixed; inset:0; width:100vw; height:100vh; display:block; outline:none; }
.hidden { display:none !important; }
.screen { position:fixed; inset:0; display:none; z-index:20; }
.screen.show { display:flex; }
.logo { font-size:clamp(40px,min(7vw,11vh),110px); line-height:1; font-weight:900; letter-spacing:.12em; background:linear-gradient(90deg,#ff4fb0,#ffb04a,#5ae8ff,#b07aff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 18px rgba(255,79,176,.7)) drop-shadow(0 0 40px rgba(90,232,255,.4)); animation:hue 8s linear infinite; }
@keyframes hue { 0%{filter:hue-rotate(0) drop-shadow(0 0 18px rgba(255,79,176,.7));} 100%{filter:hue-rotate(360deg) drop-shadow(0 0 18px rgba(255,79,176,.7));} }
.sub { font-size:clamp(14px,min(2vw,3vh),24px); letter-spacing:.3em; color:#ffd6f4; text-shadow:0 0 12px #ff4fb0; margin-bottom:2vh; text-transform:uppercase; }
#loading { flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%,#2a0a4a,#07020f 70%); }
#loading .bar { width:min(420px,70vw); height:6px; background:#2a1a4a; border-radius:3px; overflow:hidden; }
#loading .bar i { display:block; height:100%; width:5%; background:linear-gradient(90deg,var(--pink),var(--cyan)); transition:width .2s; }

/* Menu principal */
#menu { align-items:center; justify-content:flex-start; }
.menu-bg { position:absolute; inset:0; background:url("../assets/lore.jpg") center/cover no-repeat; opacity:.22; filter:blur(3px) saturate(1.3); }
.menu-col { position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:3vh 5vw; gap:min(10px,1.2vh); max-width:640px; background:linear-gradient(90deg,rgba(7,2,15,.92),rgba(7,2,15,.55) 70%,transparent); height:100%; justify-content:center; }
.menu-foot { margin-top:18px; font-size:13px; opacity:.7; letter-spacing:.08em; }
.menu-cast { position:absolute; right:3vw; bottom:4vh; display:grid; grid-template-columns:repeat(6,1fr); gap:8px; width:min(560px,44vw); }
.menu-cast figure { margin:0; position:relative; }
.menu-cast img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; border:2px solid rgba(255,79,176,.6); box-shadow:0 0 18px rgba(255,79,176,.35); animation:float 5s ease-in-out infinite; }
.menu-cast figcaption { position:absolute; bottom:4px; left:0; right:0; text-align:center; font-size:12px; font-weight:700; text-shadow:0 0 6px #000,0 0 3px #000; }
@keyframes float { 50% { transform:translateY(-6px); } }
.btn { font:inherit; font-size:clamp(14px,min(1.6vw,2.6vh),20px); color:#f6eaff; background:linear-gradient(90deg,rgba(80,20,140,.65),rgba(30,10,60,.35)); border:1px solid rgba(154,90,255,.6); padding:min(10px,1.3vh) 22px; border-radius:10px; min-width:min(340px,80vw); text-align:left; cursor:pointer; transition:all .15s; letter-spacing:.04em; }
.btn:hover, .btn.focus, .btn:focus-visible { outline:none; border-color:var(--cyan); background:linear-gradient(90deg,rgba(255,79,176,.55),rgba(90,232,255,.25)); box-shadow:0 0 16px rgba(90,232,255,.6),inset 0 0 12px rgba(255,79,176,.4); transform:translateX(6px); }
.btn[disabled] { opacity:.4; cursor:not-allowed; }

/* Panneaux */
.panel-screen { align-items:center; justify-content:center; background:rgba(5,0,15,.6); backdrop-filter:blur(4px); z-index:30; }
.panel { background:var(--bg); border:1px solid rgba(154,90,255,.6); border-radius:18px; padding:24px 30px; min-width:min(480px,92vw); max-width:92vw; max-height:92vh; overflow:auto; box-shadow:0 0 40px rgba(154,90,255,.35),inset 0 0 30px rgba(255,79,176,.08); display:flex; flex-direction:column; gap:10px; }
.panel.wide { width:min(900px,94vw); }
.panel h2 { margin:0 0 8px; font-size:28px; color:#fff; text-shadow:0 0 12px var(--pink); letter-spacing:.08em; }
.opt { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:6px 8px; border-radius:8px; }
.opt.focus { background:rgba(90,232,255,.15); box-shadow:0 0 0 1px var(--cyan); }
.opt input[type=range] { width:220px; accent-color:var(--pink); }
.opt select { font:inherit; background:#1a0a34; color:#fff; border:1px solid var(--violet); border-radius:6px; padding:4px 8px; }
.opt input[type=checkbox] { width:22px; height:22px; accent-color:var(--pink); }
.note { font-size:13px; opacity:.75; }
table.ctrl { border-collapse:collapse; width:100%; font-size:15px; }
table.ctrl th, table.ctrl td { padding:6px 10px; border-bottom:1px solid rgba(154,90,255,.25); text-align:left; }
table.ctrl th { color:var(--cyan); }

/* HUD */
#hud { position:fixed; inset:0; pointer-events:none; z-index:10; }
#viewdivider { position:absolute; top:0; bottom:0; left:50%; width:4px; margin-left:-2px; background:linear-gradient(var(--pink),var(--cyan)); box-shadow:0 0 14px var(--pink); }
#minimap { position:absolute; top:14px; left:14px; width:170px; height:170px; border-radius:50%; border:2px solid rgba(154,90,255,.8); box-shadow:0 0 18px rgba(154,90,255,.6); background:rgba(10,4,24,.6); }
#minimap.duo { left:50%; margin-left:-60px; width:120px; height:120px; top:8px; }
#quest { position:absolute; top:16px; right:18px; max-width:340px; background:linear-gradient(270deg,rgba(14,6,34,.85),rgba(14,6,34,.2)); padding:10px 16px; border-right:3px solid var(--orange); border-radius:8px; text-align:right; }
#quest .q-title { font-weight:800; color:#ffd080; text-shadow:0 0 8px rgba(255,138,42,.8); letter-spacing:.04em; }
#quest .q-step { font-size:15px; margin-top:4px; }
#bossbar { position:absolute; top:60px; left:50%; transform:translateX(-50%); width:min(640px,70vw); display:flex; flex-direction:column; gap:6px; }
.bb { background:rgba(10,0,10,.7); border:1px solid #ff6a1a; border-radius:6px; padding:3px 8px; }
.bb .n { font-size:13px; font-weight:800; letter-spacing:.1em; color:#ffd0a0; text-transform:uppercase; }
.bb .b { height:10px; background:#2a0a0a; border-radius:5px; overflow:hidden; }
.bb .b i { display:block; height:100%; background:linear-gradient(90deg,#ff2a0a,#ffb040); box-shadow:0 0 10px #ff6a1a; transition:width .15s; }
#toasts { position:absolute; top:22%; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; }
.toast { background:rgba(14,6,34,.85); border:1px solid rgba(90,232,255,.6); border-radius:20px; padding:6px 18px; font-size:15px; animation:toast 3s forwards; text-shadow:0 0 6px #000; white-space:nowrap; }
.toast.big { font-size:24px; font-weight:800; border-color:var(--pink); box-shadow:0 0 22px rgba(255,79,176,.6); color:#fff; }
.toast.left { position:fixed; left:25%; transform:translateX(-50%); }
.toast.right { position:fixed; left:75%; transform:translateX(-50%); }
@keyframes toast { 0%{opacity:0; transform:translateY(10px) scale(.9);} 10%{opacity:1; transform:none;} 80%{opacity:1;} 100%{opacity:0; transform:translateY(-14px);} }
.toast.left, .toast.right { animation-name:toast2; }
@keyframes toast2 { 0%{opacity:0;} 10%{opacity:1;} 80%{opacity:1;} 100%{opacity:0;} }
#fps { position:absolute; bottom:6px; right:8px; font-size:12px; opacity:.7; }
.hud-player { position:fixed; bottom:16px; left:16px; z-index:11; display:flex; gap:12px; align-items:flex-end; pointer-events:none; }
#hp1 { left:calc(50% + 16px); }
.hud-player img { width:76px; height:76px; border-radius:50%; object-fit:cover; border:3px solid var(--pink); box-shadow:0 0 16px var(--pink); }
.hud-player .bars { display:flex; flex-direction:column; gap:4px; min-width:230px; }
.hud-player .name { font-weight:800; font-size:17px; text-shadow:0 0 8px var(--pink); }
.hud-player .name small { font-weight:400; opacity:.8; margin-left:6px; }
.bar2 { height:12px; background:rgba(20,6,30,.8); border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,.15); position:relative; }
.bar2 i { display:block; height:100%; transition:width .12s; }
.bar2.hp i { background:linear-gradient(90deg,#ff2a6a,#ff8ad8); box-shadow:0 0 10px #ff4fb0; }
.bar2.en i { background:linear-gradient(90deg,#2a8aff,#5ae8ff); box-shadow:0 0 10px #5ae8ff; }
.bar2.xp { height:6px; } .bar2.xp i { background:linear-gradient(90deg,#ffb040,#ffe060); }
.bar2 span { position:absolute; inset:0; font-size:10px; line-height:12px; text-align:center; text-shadow:0 0 3px #000; }
.slots { display:flex; gap:6px; margin-top:2px; }
.slot { font-size:11px; padding:3px 7px; border-radius:6px; background:rgba(30,10,60,.8); border:1px solid rgba(154,90,255,.6); position:relative; overflow:hidden; white-space:nowrap; }
.slot .cd { position:absolute; left:0; bottom:0; top:0; background:rgba(0,0,0,.6); }
.slot.ready { border-color:var(--cyan); box-shadow:0 0 8px rgba(90,232,255,.5); }
.prompt { position:fixed; bottom:120px; left:25%; transform:translateX(-50%); z-index:12; background:rgba(14,6,34,.9); border:1px solid var(--cyan); border-radius:20px; padding:6px 16px; font-size:15px; box-shadow:0 0 14px rgba(90,232,255,.5); }
.prompt.solo { left:50%; }
#prompt1 { left:75%; }
.cross { position:fixed; top:50%; left:50%; width:16px; height:16px; margin:-8px; border:2px solid rgba(255,255,255,.8); border-radius:50%; z-index:12; box-shadow:0 0 8px var(--cyan); }
.cross.p0duo { left:25%; } .cross.p1duo { left:75%; }
.hurt { position:fixed; top:0; bottom:0; left:0; width:100%; pointer-events:none; z-index:9; opacity:0; background:radial-gradient(ellipse at center,transparent 50%,rgba(255,0,60,.55)); transition:opacity .25s; }
.hurt.duo { width:50%; } #hurt1.duo { left:50%; }
.hurt.on { opacity:1; transition:none; }

/* Dialogues & cinématiques */
/* cinématiques vidéo : plein écran, image entière (bandes noires si besoin), sous les sous-titres */
#cine-video { position:fixed; inset:0; width:100vw; height:100vh; object-fit:contain; background:#000; z-index:14; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .35s; }
#cine-video.on { opacity:1; visibility:visible; }
body.cine-video .letterbox.on { height:0; }
.letterbox { position:fixed; left:0; right:0; height:0; background:#000; z-index:15; transition:height .5s ease; }
#letterbox-top { top:0; } #letterbox-bottom { bottom:0; }
.letterbox.on { height:11vh; }
#dialogue { position:fixed; left:50%; bottom:3vh; transform:translateX(-50%); width:min(980px,94vw); z-index:16; display:flex; gap:18px; align-items:flex-end; }
#dlg-portrait { width:clamp(110px,15vw,180px); height:clamp(110px,15vw,180px); object-fit:cover; border-radius:16px; border:3px solid var(--pink); box-shadow:0 0 26px rgba(255,79,176,.7); background:#100420; }
.dlg-body { flex:1; background:linear-gradient(180deg,rgba(30,10,60,.94),rgba(10,4,26,.96)); border:1px solid rgba(154,90,255,.8); border-radius:16px; padding:14px 22px; min-height:120px; box-shadow:0 0 30px rgba(154,90,255,.45); }
#dlg-name { font-size:22px; font-weight:900; color:#ffd0f0; text-shadow:0 0 10px var(--pink); margin-bottom:6px; letter-spacing:.05em; }
#dlg-text { font-size:clamp(16px,1.7vw,21px); line-height:1.45; min-height:60px; }
.dlg-hint { font-size:12px; opacity:.6; text-align:right; margin-top:6px; animation:blink 1.4s infinite; }
@keyframes blink { 50% { opacity:.25; } }
#cine { position:fixed; left:0; right:0; bottom:13vh; z-index:16; text-align:center; pointer-events:none; }
#cine-text { display:inline-block; max-width:min(900px,90vw); font-size:clamp(17px,2vw,26px); line-height:1.5; text-shadow:0 0 10px #000,0 0 22px rgba(255,79,176,.8); padding:0 20px; transition:opacity .6s; }
#cine-skip { position:fixed; right:20px; top:calc(11vh + 10px); font-size:13px; opacity:.7; }
#titlecard { position:fixed; inset:0; z-index:17; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; animation:tc 4.5s forwards; }
#titlecard .tc-main { font-size:clamp(60px,12vw,160px); font-weight:900; letter-spacing:.15em; background:linear-gradient(90deg,#ff4fb0,#ffb04a,#5ae8ff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 30px rgba(255,79,176,.9)); }
#titlecard .tc-sub { font-size:clamp(18px,2.4vw,30px); letter-spacing:.4em; text-transform:uppercase; text-shadow:0 0 14px var(--cyan); }
@keyframes tc { 0%{opacity:0; transform:scale(1.15);} 15%{opacity:1; transform:none;} 80%{opacity:1;} 100%{opacity:0;} }

/* Inventaire */
.panel.inv { width:min(1000px,96vw); }
.inv-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.inv-tabs { display:flex; gap:8px; }
.inv-tabs .btn { min-width:0; padding:6px 14px; font-size:15px; }
.inv-tabs .btn.active { border-color:var(--pink); box-shadow:0 0 12px var(--pink); }
.inv-grid { display:grid; grid-template-columns:260px 1fr; gap:18px; }
#inv-portrait { width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; border:2px solid var(--pink); }
#inv-stats { font-size:14px; margin:8px 0; line-height:1.6; }
#inv-equip .eq { font-size:14px; padding:4px 0; border-bottom:1px solid rgba(154,90,255,.25); }
#inv-equip .eq b { color:var(--cyan); display:inline-block; width:92px; }
#inv-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; max-height:44vh; overflow:auto; padding:4px; }
.item { font:inherit; text-align:left; color:#fff; background:rgba(30,10,60,.7); border:1px solid rgba(154,90,255,.45); border-radius:10px; padding:8px 10px; cursor:pointer; font-size:14px; }
.item .t { font-size:11px; opacity:.7; text-transform:uppercase; letter-spacing:.08em; }
.item.equipped { border-color:var(--pink); box-shadow:0 0 10px rgba(255,79,176,.6); }
.item.equipped::after { content:" ✦ équipé"; color:var(--pink); font-size:11px; }
.item.locked { opacity:.35; cursor:default; }
.item.focus, .item:hover { border-color:var(--cyan); box-shadow:0 0 12px rgba(90,232,255,.7); }
#inv-desc { margin-top:10px; min-height:48px; font-size:14px; opacity:.9; font-style:italic; }
.inv-journal h3 { margin:8px 0 4px; color:#ffd080; }
#inv-journal div { font-size:14px; padding:2px 0; }
#inv-journal .done { opacity:.5; text-decoration:line-through; }
#inv-journal .cur { color:#ffd080; }
@media (max-width:760px) { .inv-grid { grid-template-columns:1fr; } .menu-cast { display:none; } }

body.cine #hud, body.cine .hud-player, body.cine .prompt, body.cine .cross { display:none !important; }

/* Sous-titres désactivés (voix active) */
.nosubs { visibility: hidden; }
/* --- Chapitre 2 : quête annexe (HUD), carte des royaumes, journal --- */
#quest .q-side { font-size:13px; margin-top:6px; padding-top:5px; border-top:1px solid rgba(111,232,255,.35); color:#9ae8ff; }
.mapp { text-align:center; }
.map-hint { margin:0 0 8px; color:#c8b8ff; font-size:14px; }
#map-canvas { width:min(720px,88vw,calc(46vh * 720 / 420)); height:auto; aspect-ratio:720/420; border-radius:12px; border:1px solid rgba(154,90,255,.5); background:#0a0418; }
.map-list { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:10px 0; }
.map-list .btn { min-width:150px; font-size:13px; padding:8px 12px; }
.map-list .btn.here { border-color:var(--cyan); }
.jour .jour-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:18px; max-height:62vh; overflow:auto; text-align:left; }
.jour h3 { margin:10px 0 4px; color:#ffd080; font-size:16px; }
.jour .jq { padding:5px 8px; margin:3px 0; border-radius:6px; background:rgba(255,255,255,.04); font-size:14px; }
.jour .jq.done { opacity:.6; }
.jour .jq.cur { background:rgba(255,176,74,.14); border-left:3px solid var(--orange); }
.jour .jq.side { border-left:3px solid var(--cyan); }
.jour .jq small { display:block; color:#c8b8ff; margin-top:2px; }
@media (max-width:720px) { .jour .jour-grid { grid-template-columns:1fr; } }

/* choix des héros */
.panel.sel { width:min(1100px,96vw); }
.sel-players { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sel-players .btn.active { border-color:var(--orange); box-shadow:0 0 14px rgba(255,176,74,.5); }
.sel-hint { color:#c8b8ff; }
.sel-body { display:grid; grid-template-columns:2fr 1fr; gap:16px; min-height:0; }
.sel-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; max-height:62vh; overflow:auto; padding:4px; }
.sel-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px; text-align:center; }
.sel-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:2px solid rgba(154,90,255,.5); }
.sel-card.locked img { filter:grayscale(1) brightness(.35); }
.sel-card.picked.p0 img { border-color:#7bdc3a; box-shadow:0 0 14px #7bdc3a; }
.sel-card.picked.p1 img { border-color:#2fe6ff; box-shadow:0 0 14px #2fe6ff; }
.sel-name { font-weight:700; color:#fff; }
.sel-tag { position:absolute; top:8px; left:8px; padding:1px 7px; border-radius:8px; font-weight:800; font-size:13px; color:#120022; }
.sel-tag.p0 { background:#7bdc3a; } .sel-tag.p1 { background:#2fe6ff; }
.sel-info { text-align:left; background:rgba(255,255,255,.04); border-radius:12px; padding:10px 14px; max-height:58vh; overflow:auto; }
.sel-info h3 { margin:2px 0 8px; color:#ffd080; }
.sel-stat { display:grid; grid-template-columns:96px 1fr; align-items:center; gap:8px; margin:4px 0; font-size:14px; }
.sel-stat .bar2 { height:10px; }
.sel-stat .bar2 i { background:linear-gradient(90deg,var(--pink),var(--orange)); }
.sel-kit { font-size:14px; margin:6px 0; } .sel-kit b { color:#ffb6e0; }
.sel-actions { display:flex; gap:10px; justify-content:center; }
.slot.ult.full { border-color:#ffd040; box-shadow:0 0 12px #ffd040; animation:ultpulse 0.8s ease-in-out infinite alternate; }
@keyframes ultpulse { from { filter:brightness(1); } to { filter:brightness(1.5); } }
@media (max-width:760px) { .sel-body { grid-template-columns:1fr; } .sel-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sel-card .t { font-size:11px; }

/* roue des fusions */
.fwheel { position:fixed; inset:0; z-index:25; display:flex; align-items:center; justify-content:center; pointer-events:none; background:radial-gradient(circle at 50% 50%, rgba(10,0,30,.55), rgba(10,0,30,0) 60%); }
.fwheel.duo.p0 { right:50%; } .fwheel.duo.p1 { left:50%; }
.fw-ring { position:relative; width:min(520px,70vh,46vw); aspect-ratio:1; border-radius:50%; border:2px solid rgba(255,138,216,.55); box-shadow:0 0 40px rgba(255,79,163,.35), inset 0 0 60px rgba(90,255,138,.12); background:rgba(14,4,32,.55); pointer-events:auto; }
.fwheel.duo .fw-ring { width:min(420px,60vh,44vw); }
.fw-opt { position:absolute; transform:translate(-50%,-50%); width:23%; padding:6px 4px; border-radius:14px; background:rgba(30,10,60,.92); border:2px solid rgba(154,90,255,.6); color:#fff; font:600 12px/1.15 inherit; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; transition:transform .1s; }
.fw-opt i { width:22px; height:22px; border-radius:50%; box-shadow:0 0 10px currentColor; }
.fw-opt small { color:#9af0ff; font-weight:500; }
.fw-opt.duo { border-color:#2fe6ff; }
.fw-opt.off { opacity:.45; filter:grayscale(.7); }
.fw-opt.sel { transform:translate(-50%,-50%) scale(1.15); border-color:#ffd040; box-shadow:0 0 18px #ffd040; }
.fw-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44%; text-align:center; display:flex; flex-direction:column; gap:6px; color:#fff; font-size:13px; }
.fw-center b { color:#ffb6e0; font-size:16px; letter-spacing:.05em; } .fw-center small { color:#c8b8ff; font-size:11px; }
/* Cinémathèque + titre des cinématiques */
#cine-title { position:fixed; left:4vw; top:calc(11vh + 14px); z-index:17; pointer-events:none; display:flex; flex-direction:column; gap:2px; animation:ctfade 15s forwards; }
#cine-title .ct-ch { font-size:clamp(11px,1.1vw,14px); letter-spacing:.35em; text-transform:uppercase; opacity:.75; color:var(--cyan,#5ae8ff); }
#cine-title .ct-name { font-size:clamp(18px,2.2vw,30px); font-weight:800; letter-spacing:.06em; text-shadow:0 0 14px rgba(255,79,176,.8); }
@keyframes ctfade { 0% { opacity:0; transform:translateY(6px); } 6% { opacity:1; transform:none; } 26% { opacity:1; } 34%,100% { opacity:0; } }
.panel.cinema { max-height:86vh; overflow:auto; }
#cin-list h3 { margin:14px 0 6px; font-size:15px; letter-spacing:.08em; opacity:.85; }
.cin-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; }
.btn.cin { text-align:left; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:14px; }
.btn.cin small { opacity:.6; font-size:11px; }
.btn.cin.locked { opacity:.45; cursor:not-allowed; }

/* ===== Passe graphique 3 : finition de l'interface (verre dépoli, reflets, focus clavier/manette) ===== */
.panel { position:relative; background:linear-gradient(165deg,rgba(40,16,78,.9) 0%,rgba(16,6,38,.92) 38%,rgba(10,4,26,.95) 100%); border-color:rgba(190,140,255,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 18px 60px rgba(0,0,0,.55),0 0 42px rgba(154,90,255,.3),inset 0 0 34px rgba(255,79,176,.07); }
.panel::before { content:""; position:absolute; left:18px; right:18px; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,200,240,.8),rgba(140,230,255,.8),transparent); pointer-events:none; }
.panel h2 { background:linear-gradient(90deg,#fff,#ffd6f4 40%,#bfefff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 10px rgba(255,79,176,.55)); }
.btn { position:relative; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 10px rgba(0,0,0,.35); }
.btn::after { content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent); transform:skewX(-18deg); opacity:0; transition:left .45s ease,opacity .2s; pointer-events:none; }
.btn:hover::after, .btn.focus::after, .btn:focus-visible::after { left:110%; opacity:1; }
.btn:active { transform:translateX(6px) scale(.985); }
.btn:focus-visible { outline:2px solid rgba(90,232,255,.85); outline-offset:2px; }
.toast { background:linear-gradient(180deg,rgba(36,14,70,.88),rgba(14,6,34,.9)); backdrop-filter:blur(6px); box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 14px rgba(90,232,255,.25); }
.dlg-body { position:relative; background:linear-gradient(180deg,rgba(40,14,78,.93),rgba(12,4,30,.96)); box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 30px rgba(154,90,255,.45),inset 0 1px 0 rgba(255,255,255,.08); }
.dlg-body::before { content:""; position:absolute; left:22px; right:22px; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,180,230,.9),transparent); }
#dlg-portrait { box-shadow:0 0 26px rgba(255,79,176,.7),0 10px 30px rgba(0,0,0,.5); }
.bar2 { box-shadow:inset 0 1px 3px rgba(0,0,0,.6); }
.bar2 i { position:relative; }
.bar2 i::after { content:""; position:absolute; left:0; right:0; top:0; height:45%; background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0)); border-radius:6px 6px 0 0; }
.hud-player img { box-shadow:0 0 16px var(--pink),0 4px 14px rgba(0,0,0,.5); }
.slot { background:linear-gradient(180deg,rgba(46,16,86,.88),rgba(22,8,46,.88)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.menu-cast img { transition:transform .25s,box-shadow .25s; }
.menu-cast figure:hover img { box-shadow:0 0 26px rgba(255,79,176,.7),0 0 10px rgba(90,232,255,.5); }
@media (prefers-reduced-motion: reduce) { .btn::after { transition:none; } .menu-cast img { animation:none; } }

/* Passe 4 : chargement, retours visuels, accessibilité */
#loading .loadpct { margin-top:10px; font-size:14px; letter-spacing:.2em; color:#cfe9ff; opacity:.85; font-variant-numeric:tabular-nums; }
#loading .loadtip { margin-top:3vh; max-width:min(520px,80vw); text-align:center; font-size:14px; color:#e8d8ff; opacity:.75; }
.btn:active { transform:scale(.97); filter:brightness(1.15); }
.btn { transition:transform .08s, filter .08s; }
#o-note.flash { animation:noteflash .9s ease-out; }
@keyframes noteflash { 0% { color:#9affc8; text-shadow:0 0 10px #3aff9a; } 100% { color:inherit; text-shadow:none; } }
body[data-subs="grand"] #dlg-text, body[data-subs="grand"] #cine-text { font-size:clamp(20px,2.2vw,28px); }
body[data-subs="tres-grand"] #dlg-text, body[data-subs="tres-grand"] #cine-text { font-size:clamp(24px,2.8vw,36px); line-height:1.35; }
body[data-subs="grand"] #dlg-name { font-size:26px; } body[data-subs="tres-grand"] #dlg-name { font-size:30px; }
body[data-subs="tres-grand"] #cine-text, body[data-subs="tres-grand"] #dlg-text { background:rgba(0,0,0,.45); border-radius:8px; }
/* aide daltonisme : palette bleu / orange (Okabe-Ito) + indices de forme, jamais la couleur seule */
body.cvd .bar2.hp i { background:linear-gradient(90deg,#0072b2,#56b4e9); box-shadow:0 0 10px #56b4e9; }
body.cvd .slot.ready { border-color:#e69f00; box-shadow:0 0 8px rgba(230,159,0,.6); }
body.cvd .slot.ready::before { content:'✔ '; color:#e69f00; font-weight:900; }
body.cvd .slot.ult.full { border-color:#f0e442; box-shadow:0 0 12px #f0e442; }
body.cvd .slot.ult.full::before { content:'★ '; color:#f0e442; }
body.cvd .toast.big { border-color:#e69f00; box-shadow:0 0 22px rgba(230,159,0,.6); }
@media (prefers-reduced-motion: reduce) { .btn, #o-note.flash { transition:none; animation:none; } }

/* Bandeau de proposition du préréglage « Crosscall M6 – ultra léger » (gros boutons tactiles) */
.qoffer { position:fixed; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; max-width:min(94vw, 720px); padding:10px 14px; border-radius:16px; background:rgba(14,6,34,.92); border:1px solid rgba(90,232,255,.6); box-shadow:0 6px 22px rgba(0,0,0,.45); font-size:15px; text-align:center; pointer-events:auto; }
.qoffer[hidden] { display:none; }
.qoffer small { opacity:.75; }
.qoffer .btn { min-height:44px; min-width:96px; }

/* ===== Charte i_No : ouverture signature, intro, menu 3D (verre dépoli) ===== */
.intro { position:fixed; inset:0; z-index:70; background:transparent; pointer-events:none; }
.intro[hidden] { display:none; }
.intro.sig { background:#000; }
.intro.media { background:#000; }
/* intro photoréaliste : vidéo filmée par-dessus une affiche fixe (chargement, repli, mouvements réduits) */
.intro-media { position:absolute; inset:0; overflow:hidden; background:transparent; }
.intro-media img, .intro-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.intro-media img:not([src]) { visibility:hidden; }
.intro-media img { transform-origin:50% 55%; will-change:transform; }
.intro-media video { opacity:0; }
.intro-media video.on { opacity:1; }
.sig-text { position:absolute; left:0; right:0; top:74vh; text-align:center; color:#f5efdc; opacity:0; pointer-events:none; text-shadow:0 0 18px rgba(255,230,170,.55),0 0 3px rgba(0,0,0,.8); }
.sig-text .sig-name { font:600 clamp(28px,6vh,64px) Georgia,'Times New Roman',serif; letter-spacing:.04em; }
.sig-text .sig-sub { font:300 clamp(12px,2.6vh,26px) system-ui,sans-serif; margin-top:.4em; letter-spacing:.2em; }
.intro-veil { position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; }
.intro-cap { position:absolute; left:50%; bottom:15vh; transform:translateX(-50%); width:min(820px,88vw); margin:0; text-align:center; font-size:clamp(16px,min(2.2vw,3.4vh),26px); font-style:italic; letter-spacing:.04em; color:#f6efe0; text-shadow:0 0 14px rgba(0,0,0,.9),0 0 4px #000; opacity:0; transition:opacity .6s; }
.intro-cap.on { opacity:1; }
.intro-title { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity 1s; }
.intro-title.on { opacity:1; }
.intro-skip { position:absolute; right:3vw; bottom:4vh; min-width:0; width:auto; pointer-events:auto; text-align:center; }
.ino-credit { position:absolute; left:0; right:0; bottom:max(10px,env(safe-area-inset-bottom)); margin:0; text-align:center; font-size:12px; letter-spacing:.14em; color:rgba(246,239,224,.72); text-shadow:0 0 6px #000; pointer-events:none; z-index:2; }
.intro.sig .ino-credit { color:rgba(246,239,224,.55); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* menu principal : la scène 3D est le décor (plus d'image de fond ni de bandeau opaque) */
#menu .menu-bg { display:none; }
#menu .menu-cast { display:none; }
#menu .menu-col { background:linear-gradient(90deg,rgba(5,3,16,.55),rgba(5,3,16,.18) 70%,transparent); }
#menu.show { animation:menuIn .9s ease-out both; }
@keyframes menuIn { from { opacity:0; } to { opacity:1; } }
.btn.glass { background:rgba(210,200,255,.10); border:1px solid rgba(255,255,255,.28); box-shadow:0 0 14px rgba(154,90,255,.25),inset 0 1px 0 rgba(255,255,255,.25); -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3); text-shadow:0 0 8px rgba(0,0,0,.6); }
.btn.glass small { font-size:.7em; opacity:.75; margin-left:.6em; letter-spacing:.04em; }
.btn.glass:hover, .btn.glass.focus, .btn.glass:focus-visible { background:rgba(255,240,220,.18); border-color:rgba(255,236,190,.85); box-shadow:0 0 22px rgba(255,226,160,.55),0 0 8px rgba(90,232,255,.5),inset 0 1px 0 rgba(255,255,255,.45); }
/* Crosscall M6 – ultra léger : pas de flou d'arrière-plan (coûteux sur les petits GPU) */
body.lite .btn.glass { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(40,30,80,.72); }
@media (prefers-reduced-motion: reduce) { #menu.show { animation:none; } .intro-cap, .intro-title { transition:none; } .btn.glass { transition:none; } }
.online-soon { font-size:26px; font-weight:800; color:#ffe9b8; text-shadow:0 0 14px rgba(255,200,120,.6); margin:6px 0 10px; }