/* =========================================================================
   CODE LYOKO RESURGENCE — "TOWER OS" design system (v3)
   Concept: the whole site is the inside of a Lyoko tower / supercomputer.
   Black -> blue, red XANA zones, glitch + digital, modern & original.
   ========================================================================= */

:root{
  /* base */
  --ink:    #04060c;
  --ink-2:  #070c16;
  --panel:  #0a1019;
  /* lyoko / xana */
  --cy:      #45dcff;          /* primary cyan-blue (tower screen) */
  --cy-soft: #9fe9ff;
  --blue:    #2b6cff;
  --xana:    #ff3b46;          /* evil / red zones */
  --xana-soft:#ff7a82;
  /* text */
  --text:   #d7e7f5;
  --muted:  #6f8aa3;
  --dim:    #41566b;
  /* lines / glass */
  --line:        rgba(69,220,255,.16);
  --line-strong: rgba(69,220,255,.5);
  --glass:       rgba(10,18,30,.72);
  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --nav-h: 66px;
  --maxw: 1320px;
  --gut: clamp(1rem,4vw,2.6rem);
  --font: 'Rajdhani','Poppins',system-ui,sans-serif;
  --display: 'Orbitron','Rajdhani',sans-serif;
  --mono: 'Share Tech Mono',ui-monospace,monospace;
  --cut: 14px;
}
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--text); background:var(--ink);
  line-height:1.6; overflow-x:hidden; padding-top:var(--nav-h);
  -webkit-font-smoothing:antialiased; letter-spacing:.01em;
}
img,video,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.08; font-weight:700; }
p{ margin:0 0 1em; }
::selection{ background:rgba(69,220,255,.3); color:#fff; }
:focus-visible{ outline:2px solid var(--cy); outline-offset:3px; }
*{ scrollbar-width:thin; scrollbar-color:rgba(69,220,255,.4) transparent; }
*::-webkit-scrollbar{ width:9px;height:9px } *::-webkit-scrollbar-thumb{ background:rgba(69,220,255,.3); border-radius:9px }

/* ===================== BACKGROUND LAYERS ===================== */
.os-bg{ position:fixed; inset:0; z-index:-6; background:
  radial-gradient(1200px 700px at 50% -10%, rgba(43,108,255,.18), transparent 60%),
  radial-gradient(900px 600px at 90% 110%, rgba(255,59,70,.10), transparent 60%),
  linear-gradient(180deg,#04060c,#02040a); }
/* per-page background image: above the base gradient, BEHIND the data rain, fades out toward the bottom (like the home hero) */
.os-pagebg{ position:fixed; inset:0; z-index:-5; pointer-events:none; background-size:cover; background-position:center top; background-repeat:no-repeat; opacity:.22;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 32%,transparent 84%); mask-image:linear-gradient(180deg,#000 0%,#000 32%,transparent 84%); }
.os-rain{ position:fixed; inset:0; z-index:-4; opacity:.16; pointer-events:none; }
.os-grid{ position:fixed; inset:0; z-index:-3; pointer-events:none; opacity:.5;
  background:
    linear-gradient(rgba(69,220,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(69,220,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(130% 100% at 50% 0,#000 40%,transparent 90%); }
.os-scan{ position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px); }
.os-scan::after{ content:""; position:absolute; left:0;right:0;height:38vh; top:-38vh;
  background:linear-gradient(180deg,transparent,rgba(69,220,255,.05),transparent);
  animation:osSweep 8s linear infinite; }
@keyframes osSweep{ to{ transform:translateY(160vh) } }

/* viewport HUD frame (corner brackets) */
.hud-frame{ position:fixed; inset:0; z-index:900; pointer-events:none; }
.hud-frame i{ position:absolute; width:26px; height:26px; border:2px solid var(--line-strong); filter:drop-shadow(0 0 6px rgba(69,220,255,.4)); }
.hud-frame i:nth-child(1){ top:10px; left:10px; border-right:0; border-bottom:0; }
.hud-frame i:nth-child(2){ top:10px; right:10px; border-left:0; border-bottom:0; }
.hud-frame i:nth-child(3){ bottom:10px; left:10px; border-right:0; border-top:0; }
.hud-frame i:nth-child(4){ bottom:10px; right:10px; border-left:0; border-top:0; }

/* ===================== LAYOUT ===================== */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(3rem,7vw,6rem); position:relative; }
main > .section:first-of-type{ padding-top:clamp(1.2rem,3vw,2rem); }
.grid{ display:grid; gap:clamp(1rem,2.4vw,1.5rem); }

/* ===================== NAV (console bar) ===================== */
.os-nav{ position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--nav-h);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding-inline:var(--gut);
  background:linear-gradient(180deg,rgba(4,7,14,.92),rgba(4,7,14,.55)); border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px); }
.os-nav::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--cy),transparent); opacity:.6; }
.os-brand{ display:flex; align-items:center; gap:.6rem; }
.os-brand img{ height:34px; filter:drop-shadow(0 0 8px rgba(69,220,255,.5)); }
.os-tabs{ display:flex; justify-content:center; gap:.15rem; overflow-x:auto; scrollbar-width:none; }
.os-tabs::-webkit-scrollbar{ display:none; }
.os-tab{ position:relative; white-space:nowrap; font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:.5rem .55rem; transition:color .2s; }
.os-tab:hover{ color:var(--cy-soft); }
.os-tab.is-active{ color:var(--cy); }
.os-tab.is-active::before{ content:""; position:absolute; left:.6rem; right:.6rem; bottom:2px; height:2px; background:var(--cy); box-shadow:0 0 10px var(--cy); }
.os-nav__right{ display:flex; align-items:center; gap:.6rem; }
.os-pill{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  padding:.3rem .6rem; border:1px solid var(--line); color:var(--muted); clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.os-pill .dot{ width:7px;height:7px;border-radius:50%; background:var(--cy); box-shadow:0 0 8px var(--cy); animation:pulse 1.6s infinite; }
.lang{ display:flex; border:1px solid var(--line); }
.lang a{ font-family:var(--mono); font-size:.78rem; padding:.3rem .55rem; color:var(--muted); }
.lang a.is-active{ background:var(--cy); color:#04121a; }
.os-burger{ display:none; width:40px; height:40px; border:1px solid var(--line); background:transparent; cursor:pointer; place-items:center;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.os-burger span,.os-burger span::before,.os-burger span::after{ content:""; display:block; width:18px; height:2px; background:var(--cy); transition:.25s; }
.os-burger span::before{ transform:translateY(-6px); } .os-burger span::after{ transform:translateY(4px); }
body.menu-open .os-burger span{ background:transparent; }
body.menu-open .os-burger span::before{ transform:rotate(45deg); }
body.menu-open .os-burger span::after{ transform:rotate(-45deg) translateY(-1px); }

/* ===================== TYPOGRAPHY HELPERS ===================== */
.kicker{ font-family:var(--mono); font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cy); display:inline-flex; align-items:center; gap:.55rem; }
.kicker::before{ content:""; width:24px;height:1px; background:var(--cy); }
.kicker--xana{ color:var(--xana); } .kicker--xana::before{ background:var(--xana); }
.h-display{ font-family:var(--display); font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.lead{ color:var(--muted); font-weight:400; font-size:clamp(1rem,2vw,1.18rem); }
.rule{ height:2px; width:90px; background:linear-gradient(90deg,var(--cy),transparent); }
.txt-cy{ color:var(--cy); } .txt-xana{ color:var(--xana); }

/* GLITCH text */
.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{ content:attr(data-text); position:absolute; inset:0; clip-path:inset(0); }
.glitch::before{ color:var(--cy); transform:translate(-2px,0); mix-blend-mode:screen; animation:glx1 3.2s steps(2) infinite; }
.glitch::after{ color:var(--xana); transform:translate(2px,0); mix-blend-mode:screen; animation:glx2 2.7s steps(2) infinite; }
@keyframes glx1{ 0%,18%,40%,58%,82%,100%{ clip-path:inset(0 0 100% 0); opacity:0 } 20%{ clip-path:inset(10% 0 60% 0); opacity:.9 } 22%{ clip-path:inset(45% 0 25% 0) } 60%{ clip-path:inset(60% 0 15% 0); opacity:.9 } 62%{ clip-path:inset(25% 0 55% 0) } 84%{ clip-path:inset(15% 0 70% 0); opacity:.9 } 86%{ clip-path:inset(50% 0 20% 0) } }
@keyframes glx2{ 0%,16%,38%,56%,80%,100%{ clip-path:inset(100% 0 0 0); opacity:0 } 18%{ clip-path:inset(65% 0 10% 0); opacity:.75 } 20%{ clip-path:inset(20% 0 60% 0) } 58%{ clip-path:inset(15% 0 65% 0); opacity:.75 } 60%{ clip-path:inset(55% 0 20% 0) } 82%{ clip-path:inset(70% 0 5% 0); opacity:.75 } }

/* ===================== HERO ===================== */
.os-hero{ min-height:calc(100svh - var(--nav-h)); display:grid; align-items:center; position:relative; overflow:hidden; }
.os-hero__in{ max-width:880px; position:relative; z-index:1; }
/* looping hero video: behind the rain + the eye, fades out at the bottom */
.os-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-5; opacity:.42;
  -webkit-mask-image:linear-gradient(180deg,#000 42%,transparent 92%); mask-image:linear-gradient(180deg,#000 42%,transparent 92%); }
/* scroll cue */
.os-scroll{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:grid; justify-items:center; gap:.35rem; z-index:1; color:var(--muted); font-family:var(--mono); font-size:.64rem; letter-spacing:.3em; }
.os-scroll .m{ width:20px; height:32px; border:1.5px solid var(--muted); border-radius:12px; position:relative; }
.os-scroll .m::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; background:var(--cy); border-radius:2px; transform:translateX(-50%); animation:wheel 1.6s var(--ease) infinite; }
@keyframes wheel{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,9px)} }
.os-hero .status{ margin-bottom:1.2rem; }
.os-hero h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,6.4vw,4.8rem); line-height:1.02; margin:.4rem 0 1rem; text-transform:uppercase; letter-spacing:.01em; }
.os-hero h1 .x{ color:var(--cy); text-shadow:0 0 30px rgba(69,220,255,.5); }
.os-hero p.sub{ max-width:60ch; color:var(--text); opacity:.85; font-size:clamp(1rem,2.2vw,1.25rem); }
.os-hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.os-hero__deco{ position:absolute; right:-2%; top:50%; transform:translateY(-50%); width:min(46vw,560px); aspect-ratio:1; pointer-events:none; opacity:.55; z-index:0; }
.os-hero__deco .eye-spin{ width:100%; animation:spin 60s linear infinite; }
.os-hero__deco img{ width:100%; filter:drop-shadow(0 0 30px rgba(69,220,255,.3)); animation:eyeGlitch 5s steps(1,end) infinite; }
@keyframes eyeGlitch{
  0%,84%,100%{ transform:translate(0,0); filter:drop-shadow(0 0 30px rgba(69,220,255,.3)); opacity:1 }
  85%{ transform:translate(-8px,3px); filter:drop-shadow(0 0 26px rgba(255,59,70,.8)); opacity:.5 }
  87%{ transform:translate(7px,-4px) }
  89%{ transform:translate(-4px,2px); opacity:1 }
  91%{ transform:translate(5px,-1px); filter:drop-shadow(0 0 30px rgba(255,59,70,.6)); opacity:.55 }
  93%{ transform:translate(-2px,0); opacity:1 }
}

/* boot/scan line list */
.bootlines{ font-family:var(--mono); font-size:.82rem; color:var(--muted); display:grid; gap:.2rem; }
.bootlines b{ color:var(--cy); } .bootlines .bad{ color:var(--xana); }

/* ===================== BUTTONS ===================== */
.btn{ --c:var(--cy); position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.55rem; font-family:var(--mono); font-size:.83rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.92rem 1.8rem; color:#04121a; background:var(--c); border:1px solid var(--c); cursor:pointer; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
  transition:transform .15s,box-shadow .2s,filter .2s,background .2s,color .2s; }
/* HUD corner brackets on the two square corners (top-right + bottom-left) */
.btn::before{ content:""; position:absolute; inset:5px; pointer-events:none; opacity:.6;
  background:
    linear-gradient(currentColor,currentColor) right top/13px 2px no-repeat,
    linear-gradient(currentColor,currentColor) right top/2px 13px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/13px 2px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/2px 13px no-repeat; }
/* shine sweep on hover */
.btn::after{ content:""; position:absolute; top:0; left:0; width:55%; height:100%; pointer-events:none;
  transform:translateX(-180%) skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); transition:transform .6s var(--ease); }
.btn:hover::after{ transform:translateX(280%) skewX(-20deg); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 9px 28px rgba(69,220,255,.5), inset 0 1px 0 rgba(255,255,255,.3); filter:brightness(1.07); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--c); box-shadow:none; }
.btn--ghost::before{ opacity:.85; }
.btn--ghost:hover{ background:rgba(69,220,255,.12); color:#eafcff; box-shadow:0 0 22px rgba(69,220,255,.3); }
.btn--xana{ --c:var(--xana); color:#1a0406; }
.btn--xana.btn--ghost{ color:var(--xana); }
.btn--xana:hover{ box-shadow:0 9px 28px rgba(255,59,70,.5), inset 0 1px 0 rgba(255,255,255,.25); }

/* social dock (bottom-left) */
.os-dock{ position:fixed; left:16px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:.55rem; }
.os-dock a{ width:42px; height:42px; display:grid; place-items:center; color:var(--muted); border:1px solid var(--line); background:rgba(6,10,18,.6); backdrop-filter:blur(6px); transition:transform .2s,color .2s,border-color .2s,box-shadow .2s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.os-dock a:hover{ color:var(--cy); border-color:var(--line-strong); box-shadow:0 0 16px rgba(69,220,255,.35); transform:translateY(-2px); }
.os-dock svg{ width:20px; height:20px; }
@media (max-width:900px){ .os-dock{ flex-direction:row; left:50%; transform:translateX(-50%); } }

/* ===================== PANELS / CARDS ===================== */
.panel{ position:relative; isolation:isolate; background:linear-gradient(180deg,rgba(10,16,26,.92),rgba(6,10,18,.95));
  padding:clamp(1.1rem,2.4vw,1.7rem); clip-path:polygon(0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); }
.panel::before{ content:""; position:absolute; inset:0; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ang), rgba(69,220,255,.12) 0 6%, var(--cy) 14%, rgba(69,220,255,.08) 28% 54%, var(--blue) 66%, rgba(69,220,255,.08) 80% 100%);
  animation:spinAng 7s linear infinite; filter:drop-shadow(0 0 5px rgba(69,220,255,.45));
  clip-path:polygon(0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:filter .35s ease; }
@keyframes spinAng{ to{ --ang:360deg } }
.panel--xana::before{ background:conic-gradient(from var(--ang), rgba(255,59,70,.12) 0 6%, var(--xana) 14%, rgba(255,59,70,.08) 28% 54%, #ff7a82 66%, rgba(255,59,70,.08) 80% 100%); filter:drop-shadow(0 0 6px rgba(255,59,70,.5)); }
.panel::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.4; pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(69,220,255,.04) 0 1px,transparent 1px 4px);
  clip-path:polygon(0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  transition:background .35s ease; }
/* (panel--xana border defined above as rotating conic) */
/* hover: bordure glisse du bleu XANA vers le rouge XANA */
.panel:not(.panel--xana):not(.is-playing):hover::before{ filter:hue-rotate(168deg) saturate(1.3) drop-shadow(0 0 10px rgba(255,59,70,.6)); }
.panel:not(.panel--xana):not(.is-playing):hover::after{ background:repeating-linear-gradient(to bottom,rgba(255,59,70,.05) 0 1px,transparent 1px 4px); }

.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.panel-head .tag{ font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; color:var(--cy); }
.panel-head .dot{ width:8px;height:8px;border-radius:50%; background:var(--cy); box-shadow:0 0 8px var(--cy); animation:pulse 1.6s infinite; }

/* module cards (sections of the site, as tower modules) */
.modules{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem; }
.module{ display:block; }
.module .panel{ height:100%; transition:transform .2s,box-shadow .2s; }
.module:hover .panel{ transform:translateY(-5px); box-shadow:0 12px 40px rgba(43,108,255,.25); }
.module__id{ font-family:var(--mono); font-size:.72rem; color:var(--dim); letter-spacing:.12em; }
.module__name{ font-family:var(--display); font-size:1.15rem; margin:.4rem 0 .3rem; }
.module__desc{ color:var(--muted); font-size:.92rem; margin:0; }
.module__go{ font-family:var(--mono); font-size:.78rem; color:var(--cy); margin-top:.8rem; display:inline-block; letter-spacing:.1em; }

/* section header */
.sec-head{ display:grid; gap:.6rem; margin-bottom:clamp(1.4rem,3.5vw,2.4rem); max-width:70ch; }
.sec-head h2{ font-family:var(--display); font-size:clamp(1.7rem,4vw,2.7rem); }

/* character strip */
.warriors{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; }
.warrior{ position:relative; aspect-ratio:3/4; overflow:hidden; clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); border:1px solid var(--line); background:#0a121e; }
.warrior img{ width:100%;height:100%;object-fit:cover; filter:saturate(.9) brightness(.92); transition:.4s; }
.warrior::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(4,8,16,.95)); }
.warrior::before{ content:""; position:absolute; inset:0; z-index:2; background:repeating-linear-gradient(to bottom,rgba(69,220,255,.06) 0 2px,transparent 2px 5px); opacity:0; transition:.3s; }
.warrior span{ position:absolute; left:10px; bottom:9px; z-index:3; font-family:var(--display); font-size:.95rem; letter-spacing:.04em; text-shadow:0 2px 8px #000; }
.warrior:hover img{ transform:scale(1.06); filter:saturate(1.1) brightness(1); }
.warrior:hover::before{ opacity:1; } .warrior:hover{ border-color:var(--line-strong); box-shadow:0 0 22px rgba(69,220,255,.3); }

/* footer */
.os-foot{ border-top:1px solid var(--line); margin-top:2rem; background:linear-gradient(180deg,transparent,rgba(4,8,16,.6)); }
.os-foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-block:clamp(2rem,4vw,3rem); }
.os-foot h4{ font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; color:var(--cy); text-transform:uppercase; margin-bottom:.7rem; }
.os-foot a{ color:var(--muted); display:block; padding:.2rem 0; transition:.2s; }
.os-foot a:hover{ color:var(--cy); }
.os-foot__bottom{ border-top:1px solid var(--line); text-align:center; padding:1rem; color:var(--dim); font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; }

/* xana corner indicator */
.os-xana{ position:fixed; right:24px; bottom:24px; z-index:80; width:46px; height:46px; pointer-events:none; opacity:.9; animation:pulse 3s infinite; filter:drop-shadow(0 0 8px rgba(69,220,255,.5)); transition:filter .2s; }
.os-xana.is-red{ filter:drop-shadow(0 0 14px rgba(255,59,70,.95)); animation:pulse 1s infinite; }

/* music toggle (nav) */
.os-music{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; padding:.34rem .58rem; border:1px solid var(--line); color:var(--muted); background:transparent; cursor:pointer; transition:border-color .2s,color .2s;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.os-music:hover{ border-color:var(--line-strong); color:var(--cy-soft); }
.os-music .eq{ display:inline-flex; gap:2px; align-items:flex-end; height:12px; }
.os-music .eq i{ width:3px; height:4px; background:var(--cy); }
.os-music.on .eq i{ animation:eq .8s ease-in-out infinite; }
.os-music.on .eq i:nth-child(2){ animation-delay:.15s } .os-music.on .eq i:nth-child(3){ animation-delay:.3s }
@keyframes eq{ 0%,100%{ height:4px } 50%{ height:12px } }

/* "online" status pill (nav, beside the music toggle) */
.os-status{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; color:var(--cy-soft); padding:.32rem .55rem; border:1px solid var(--line); white-space:nowrap;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.os-status i{ width:7px; height:7px; border-radius:50%; background:#39ff9b; box-shadow:0 0 8px #39ff9b,0 0 2px #39ff9b; animation:onlineBlink 1.8s ease-in-out infinite; }
@keyframes onlineBlink{ 0%,100%{ opacity:1; box-shadow:0 0 9px #39ff9b,0 0 3px #39ff9b } 50%{ opacity:.4; box-shadow:0 0 2px #39ff9b } }
@media (max-width:620px){ .os-status{ display:none; } }

/* ===================== PAGE TRANSITION (virtualization wipe) ===================== */
.os-tr{ position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0; visibility:hidden; overflow:hidden;
  background:radial-gradient(130% 130% at 50% 50%, rgba(8,16,28,.95), rgba(3,7,14,.99)); }
.os-tr::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, rgba(69,220,255,.07) 0 1px, transparent 1px 3px); }
.os-tr__beam{ position:absolute; left:0; right:0; top:-16%; height:16%; mix-blend-mode:screen; filter:drop-shadow(0 0 12px rgba(69,220,255,.7));
  background:linear-gradient(180deg, transparent, rgba(120,236,255,.5), #eaffff, rgba(120,236,255,.5), transparent); }
.os-tr.is-out{ animation:trShow .33s ease forwards; }
.os-tr.is-out .os-tr__beam{ animation:trBeamDown .33s ease-in forwards; }
.os-tr.is-in{ opacity:1; visibility:visible; animation:trHide .5s ease forwards; }
.os-tr.is-in .os-tr__beam{ animation:trBeamUp .5s ease-out forwards; }
@keyframes trShow{ from{ opacity:0; visibility:visible } to{ opacity:1; visibility:visible } }
@keyframes trHide{ from{ opacity:1; visibility:visible } to{ opacity:0; visibility:hidden } }
@keyframes trBeamDown{ 0%{ top:-16%; opacity:0 } 14%{ opacity:1 } 100%{ top:100%; opacity:.6 } }
@keyframes trBeamUp{ 0%{ top:100%; opacity:.6 } 86%{ opacity:1 } 100%{ top:-16%; opacity:0 } }

/* ===================== XANA INTRUSION FX (secret "XANA" code) ===================== */
.os-xfx{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0; visibility:hidden; }
.os-xfx.is-on{ opacity:1; visibility:visible; animation:xfxShake .16s steps(2) 7; }
.os-xfx__flash{ position:absolute; inset:0; mix-blend-mode:screen; background:radial-gradient(120% 120% at 50% 50%, rgba(255,59,70,.1), rgba(255,59,70,.34)); }
.os-xfx.is-on .os-xfx__flash{ animation:xfxFlash 2.6s ease-out forwards; }
.os-xfx__eye{ position:absolute; left:50%; top:50%; width:min(56vh,520px); transform:translate(-50%,-50%) scale(.6); opacity:0; filter:drop-shadow(0 0 40px rgba(255,59,70,.7)); }
.os-xfx.is-on .os-xfx__eye{ animation:xfxEye 2.6s ease-out forwards; }
.os-xfx__txt{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--display); font-weight:900; font-size:clamp(3rem,14vw,11rem); color:var(--xana); letter-spacing:.1em; opacity:0; text-shadow:0 0 30px rgba(255,59,70,.85); }
.os-xfx.is-on .os-xfx__txt{ animation:xfxTxt 2.6s ease-out forwards; }
@keyframes xfxFlash{ 0%{ opacity:0 } 8%{ opacity:1 } 70%{ opacity:.55 } 100%{ opacity:0 } }
@keyframes xfxEye{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6) } 16%{ opacity:.85 } 70%{ opacity:.7 } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.06) } }
@keyframes xfxTxt{ 0%{ opacity:0 } 10%{ opacity:1 } 18%{ opacity:.15 } 27%{ opacity:1 } 70%{ opacity:.8 } 100%{ opacity:0 } }
@keyframes xfxShake{ 0%{ transform:translate(0,0) } 25%{ transform:translate(-3px,2px) } 50%{ transform:translate(3px,-2px) } 75%{ transform:translate(-2px,-2px) } 100%{ transform:translate(0,0) } }

/* ===================== KIWI easter egg (runs across the screen) ===================== */
.kiwi-run{ position:fixed; left:-130px; bottom:20px; z-index:9997; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:5px; animation:kiwiAcross 3s linear forwards; }
.kiwi-run img{ width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 7px 8px rgba(0,0,0,.55)); animation:kiwiHop .42s ease-in-out infinite; }
.kiwi-run__bubble{ position:relative; font-family:var(--mono); font-weight:700; font-size:.72rem; color:#0b0b10; background:#fff; padding:.22rem .55rem; border-radius:9px; white-space:nowrap; }
.kiwi-run__bubble::after{ content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); border:5px solid transparent; border-top-color:#fff; }
@keyframes kiwiAcross{ from{ left:-130px } to{ left:calc(100% + 130px) } }
@keyframes kiwiHop{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-15px) } }
/* ===================== TOUR ACTIVÉE — red alert + RETOUR VERS LE PASSÉ ===================== */
.os-tower{ position:fixed; inset:0; z-index:9996; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .25s; }
.os-tower.is-on{ opacity:1; visibility:visible; }
.os-tower__vig{ position:absolute; inset:0; box-shadow:inset 0 0 220px rgba(255,59,70,.42), inset 0 0 60px rgba(255,59,70,.3);
  background:repeating-linear-gradient(to bottom, rgba(255,59,70,.05) 0 1px, transparent 1px 3px); animation:towerPulse 1.1s ease-in-out infinite; }
@keyframes towerPulse{ 0%,100%{ opacity:.65 } 50%{ opacity:1 } }
.os-tower__bar{ position:absolute; top:calc(var(--nav-h) + 16px); left:50%; transform:translateX(-50%); display:grid; justify-items:center; gap:.25rem; padding:.55rem 1.5rem; text-align:center;
  background:linear-gradient(180deg, rgba(40,8,10,.88), rgba(20,4,6,.88)); border:1px solid var(--xana); box-shadow:0 0 26px rgba(255,59,70,.5);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); animation:towerBar .5s var(--ease) both, towerPulse 1.1s ease-in-out infinite; }
.os-tower__lbl{ font-family:var(--display); font-weight:900; letter-spacing:.12em; color:var(--xana); font-size:clamp(1.1rem,3.4vw,1.7rem); text-shadow:0 0 18px rgba(255,59,70,.8); }
.os-tower__sub{ font-family:var(--mono); font-size:.64rem; letter-spacing:.22em; color:var(--xana-soft); }
@keyframes towerBar{ from{ transform:translateX(-50%) translateY(-16px); opacity:0 } to{ transform:translateX(-50%) translateY(0); opacity:1 } }
/* the whole site shifts red while a tower is active */
body.tower-active .hud-frame i{ border-color:var(--xana) !important; box-shadow:0 0 14px rgba(255,59,70,.5); }
body.tower-active .os-grid{ filter:hue-rotate(150deg) saturate(1.4); }
body.tower-active .os-bg{ filter:hue-rotate(150deg) saturate(1.2); }

.os-rttp{ position:fixed; inset:0; z-index:10000; pointer-events:none; opacity:0; visibility:hidden; background:#eef6ff; display:grid; place-items:center; }
.os-rttp.is-on{ visibility:visible; animation:rttpFlash 1.7s ease forwards; }
.os-rttp__txt{ font-family:var(--display); font-weight:900; letter-spacing:.18em; color:#0b1320; font-size:clamp(1.1rem,4vw,2.2rem); opacity:0; animation:rttpTxt 1.7s ease forwards; }
@keyframes rttpFlash{ 0%{ opacity:0 } 12%{ opacity:1 } 52%{ opacity:1 } 100%{ opacity:0 } }
@keyframes rttpTxt{ 0%,18%{ opacity:0 } 30%{ opacity:1 } 50%{ opacity:1 } 72%{ opacity:0 } 100%{ opacity:0 } }

/* tower banner turns GREEN when the attack ends ("attaque terminée") */
.os-tower.is-done .os-tower__vig{ display:none; }
.os-tower.is-done .os-tower__bar{ border-color:#39ff9b; background:linear-gradient(180deg, rgba(8,30,18,.9), rgba(4,18,12,.9)); box-shadow:0 0 26px rgba(57,255,155,.5); animation:none; }
.os-tower.is-done .os-tower__lbl{ color:#39ff9b; text-shadow:0 0 18px rgba(57,255,155,.8); }
.os-tower.is-done .os-tower__lbl::before,.os-tower.is-done .os-tower__lbl::after{ display:none; }
.os-tower.is-done .os-tower__sub{ color:#9affd0; }

/* XANA dialogue box (Visual-Novel style, bottom-centre) */
.os-xdlg{ position:fixed; left:50%; bottom:5vh; transform:translateX(-50%); z-index:9997; width:min(680px,92vw); pointer-events:none; opacity:0; visibility:hidden; }
.os-xdlg.is-on{ opacity:1; visibility:visible; animation:xdlgIn .4s var(--ease) both; }
.os-xdlg.is-closing{ animation:xdlgGlitch .62s steps(3) both; }
.os-xdlg__box{ position:relative; padding:1rem 1.2rem 1.1rem; background:linear-gradient(180deg, rgba(30,6,8,.95), rgba(15,4,6,.96)); border:1px solid var(--xana); box-shadow:0 0 30px rgba(255,59,70,.4), inset 0 0 30px rgba(255,59,70,.08);
  clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); }
.os-xdlg__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.os-xdlg__eye{ width:24px; height:24px; filter:drop-shadow(0 0 6px rgba(255,59,70,.9)); animation:twbtnPulse 1.4s ease-in-out infinite; }
.os-xdlg__who{ font-family:var(--display); font-weight:900; letter-spacing:.18em; color:var(--xana); text-shadow:0 0 14px rgba(255,59,70,.7); }
.os-xdlg__sig{ font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; color:var(--xana-soft); margin-left:auto; }
.os-xdlg__txt{ font-family:var(--mono); font-size:.94rem; line-height:1.55; color:#ffd9dc; min-height:3em; margin:0; }
.os-xdlg__txt::after{ content:"▌"; color:var(--xana); margin-left:1px; animation:xdlgCaret 1s steps(1) infinite; }
@keyframes xdlgIn{ from{ opacity:0; transform:translateX(-50%) translateY(22px) } to{ opacity:1; transform:translateX(-50%) translateY(0) } }
@keyframes xdlgCaret{ 50%{ opacity:0 } }
@keyframes xdlgGlitch{ 0%{ opacity:1; clip-path:inset(0 0 0 0); transform:translateX(-50%) } 30%{ opacity:1; clip-path:inset(22% 0 32% 0); transform:translateX(calc(-50% + 6px)) } 60%{ clip-path:inset(58% 0 6% 0); transform:translateX(calc(-50% - 7px)) } 100%{ opacity:0; clip-path:inset(48% 0 48% 0); transform:translateX(-50%) scaleY(.05) } }

/* hidden "XANA tower" button — pops at a random edge, peeking out; hover slides it fully out */
.os-twbtn{ position:fixed; z-index:95; width:46px; height:46px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,59,70,.55); background:rgba(18,4,6,.72); display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:scale(.55); transition:transform .4s var(--ease), opacity .4s, box-shadow .25s, border-color .25s; }
.os-twbtn img{ width:26px; height:26px; filter:drop-shadow(0 0 5px rgba(255,59,70,.85)); animation:twbtnPulse 1.7s ease-in-out infinite; }
.os-twbtn.is-on{ opacity:.9; visibility:visible; transform:scale(1); }
.os-twbtn.is-on:hover{ opacity:1; transform:scale(1.12) translate(var(--tx,0),var(--ty,0)); box-shadow:0 0 24px rgba(255,59,70,.75); border-color:var(--xana); }
@keyframes twbtnPulse{ 0%,100%{ opacity:.6 } 50%{ opacity:1 } }

@media (prefers-reduced-motion:reduce){ .os-tr,.os-xfx,.os-tower,.os-rttp,.os-xdlg,.os-twbtn,.kiwi-run{ display:none !important; } }

/* news / transmission card with image preview */
.tx-card{ padding:0; overflow:hidden; display:grid; grid-template-columns:230px 1fr; }
.tx-card__img{ background:#0a121e; overflow:hidden; min-height:160px; }
.tx-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.tx-card:hover .tx-card__img img{ transform:scale(1.05); }
.tx-card__body{ padding:clamp(1.1rem,2.4vw,1.6rem); }
@media (max-width:620px){ .tx-card{ grid-template-columns:1fr } }

/* ===================== ANIMATIONS ===================== */
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.5; transform:scale(.92) } }
@keyframes spin{ to{ transform:rotate(360deg) } }
[data-rv]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
[data-rv].in{ opacity:1; transform:none; }
[data-rv][data-d="1"]{ transition-delay:.08s } [data-rv][data-d="2"]{ transition-delay:.16s } [data-rv][data-d="3"]{ transition-delay:.24s } [data-rv][data-d="4"]{ transition-delay:.32s }

/* ===================== RESPONSIVE ===================== */
/* nav collapses to a burger sooner now there are more tabs (Le Jeu) + the status pill */
@media (max-width:1160px){
  .os-tabs{ display:none; }
  .os-burger{ display:grid; }
  .os-tabs.open{ display:flex; flex-direction:column; position:fixed; inset:var(--nav-h) 0 auto 0; background:rgba(4,7,14,.97); border-bottom:1px solid var(--line); padding:1rem var(--gut); gap:.25rem; backdrop-filter:blur(12px); overflow:visible; }
  .os-tabs.open .os-tab{ padding:.8rem; font-size:.9rem; text-align:center; }
}
@media (max-width:900px){
  .os-foot__grid{ grid-template-columns:1fr 1fr; }
  .os-hero__deco{ display:none; }
}
@media (max-width:560px){ .os-foot__grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  [data-rv]{ opacity:1!important; transform:none!important; }
  .glitch::before,.glitch::after{ display:none; }
}

/* ============================ CHARACTERS (sheet) ============================ */
.char-layout{ display:grid; grid-template-columns:300px 1fr; gap:clamp(1rem,2.4vw,2rem); align-items:start; }
.char-roster{ position:sticky; top:calc(var(--nav-h) + 1rem); display:flex; flex-direction:column; gap:.6rem; }
/* search/filter pinned at the top of the roster */
.roster-search{ position:relative; flex:none; }
.roster-search__input{ width:100%; font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; color:var(--text); padding:.55rem .7rem .55rem 2rem;
  background:rgba(7,12,20,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345dcff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat .6rem center / 14px;
  border:1px solid var(--line); clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.roster-search__input::placeholder{ color:var(--muted); }
.roster-search__input:focus{ outline:none; border-color:var(--line-strong); box-shadow:0 0 14px rgba(69,220,255,.25); }
/* the scrolling list — the search above stays fixed; contained scroll = no page-chaining */
.roster-list{ display:flex; flex-direction:column; gap:.55rem; overflow:auto; padding:4px; overscroll-behavior:contain; max-height:calc(100svh - var(--nav-h) - 11rem);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 16px),transparent); mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 16px),transparent); }
.roster-empty{ font-family:var(--mono); font-size:.74rem; color:var(--muted); text-align:center; padding:1rem .5rem; opacity:.8; }
.roster-item{ position:relative; display:grid; grid-template-columns:50px 1fr; align-items:center; gap:.75rem; width:100%; text-align:left; cursor:pointer; color:var(--text);
  padding:.5rem 1.3rem .5rem .65rem; background:linear-gradient(180deg,rgba(12,20,32,.6),rgba(7,12,20,.62)); border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); transition:transform .2s,background .2s,border-color .2s,box-shadow .2s; }
.roster-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cy); opacity:.3; transition:opacity .2s,box-shadow .2s; }
.roster-item::after{ content:"\203A"; position:absolute; right:.55rem; top:50%; transform:translateY(-50%) translateX(-5px); color:var(--cy); font-family:var(--display); font-weight:800; opacity:0; transition:.2s; }
.roster-item:hover{ transform:translateX(4px); border-color:var(--line-strong); }
.roster-item:hover::before{ opacity:.7; }
.roster-item.is-active{ border-color:var(--line-strong); background:linear-gradient(180deg,rgba(69,220,255,.13),rgba(43,108,255,.05)); box-shadow:0 6px 22px rgba(43,108,255,.22); }
.roster-item.is-active::before{ opacity:1; box-shadow:0 0 12px var(--cy); }
.roster-item.is-active::after{ opacity:1; transform:translateY(-50%) translateX(0); }
.roster-item__img{ width:50px; height:50px; object-fit:cover; border:1px solid var(--line-strong); clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.roster-item__name{ font-family:var(--display); font-weight:700; font-size:.9rem; }
.roster-item__role{ display:block; font-family:var(--mono); font-size:.66rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-top:.12rem; }
/* roster category headers */
.roster-cat{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cy); opacity:.85; padding:1rem .4rem .35rem; display:flex; align-items:center; gap:.5rem; }
.roster-cat::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-strong),transparent); }
.roster-cat:first-child{ padding-top:.2rem; }
.roster-item__img--ph{ display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--cy); background:rgba(69,220,255,.08); }
/* no-portrait placeholder inside the scanner */
.scanner__noimg{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-family:var(--mono); font-size:.8rem; letter-spacing:.18em; color:var(--muted); padding:1rem; }
/* secret / redacted profile (red) */
.roster-item.is-secret .roster-item__name{ color:var(--xana-soft); }
.roster-item.is-secret::before{ background:var(--xana); }
.roster-item.is-secret.is-active{ background:linear-gradient(180deg,rgba(255,59,70,.13),rgba(255,59,70,.04)); }
.roster-item.is-secret .roster-item__img--ph{ color:var(--xana); background:rgba(255,59,70,.1); }
.is-secret .scanner__frame{ border-color:rgba(255,59,70,.6); }
.is-secret .scanner__noimg{ color:var(--xana-soft); }
.is-secret .scanner__beam{ background:linear-gradient(180deg,transparent,rgba(255,59,70,.5),rgba(255,120,120,.6),rgba(255,59,70,.5),transparent); }
.is-secret .sheet__name{ color:var(--xana-soft); }
.is-secret .console__tag{ color:var(--xana); }
.is-secret .panel.console::before,.is-secret .panel.sheet__bio::before{ background:conic-gradient(from var(--ang), rgba(255,59,70,.12) 0 6%, var(--xana) 14%, rgba(255,59,70,.08) 28% 54%, #ff7a82 66%, rgba(255,59,70,.08) 80% 100%); filter:drop-shadow(0 0 6px rgba(255,59,70,.5)); }

.sheet{ display:grid; gap:1.2rem; }
.sheet__top{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:1.5rem; align-items:start; }
.scanner{ margin:0; }
.scanner__frame{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#070d16; border:1px solid var(--line-strong); max-width:440px; margin-inline:auto;
  clip-path:polygon(0 22px,22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%); }
.scanner__frame img{ width:100%; height:100%; object-fit:cover; }
.scanner__grid{ position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:linear-gradient(rgba(69,220,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(69,220,255,.08) 1px,transparent 1px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%,#000 60%,transparent); mask-image:radial-gradient(120% 80% at 50% 40%,#000 60%,transparent); }
.scanner__beam{ position:absolute; left:0; right:0; top:-20%; height:64px; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent,rgba(69,220,255,.45),rgba(255,255,255,.55),rgba(69,220,255,.45),transparent); animation:scanBeam 4.8s var(--ease) infinite; }
@keyframes scanBeam{ 0%{ top:-20%; opacity:0 } 12%{ opacity:.9 } 86%{ opacity:.9 } 100%{ top:112%; opacity:0 } }
.scanner__reticle{ position:absolute; inset:11px; pointer-events:none; opacity:.85; filter:drop-shadow(0 0 4px rgba(69,220,255,.6));
  background:linear-gradient(var(--cy),var(--cy)) left top/18px 2px no-repeat,linear-gradient(var(--cy),var(--cy)) left top/2px 18px no-repeat,linear-gradient(var(--cy),var(--cy)) right top/18px 2px no-repeat,linear-gradient(var(--cy),var(--cy)) right top/2px 18px no-repeat,linear-gradient(var(--cy),var(--cy)) left bottom/18px 2px no-repeat,linear-gradient(var(--cy),var(--cy)) left bottom/2px 18px no-repeat,linear-gradient(var(--cy),var(--cy)) right bottom/18px 2px no-repeat,linear-gradient(var(--cy),var(--cy)) right bottom/2px 18px no-repeat; }
.scanner__id{ margin-top:.6rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--cy); display:flex; justify-content:space-between; gap:.5rem; }
.scanner__id b{ color:var(--cy-soft); }

/* ---- portrait materialization: a scanner beam sweeps down and the image RESOLVES in.
   The picture keeps correct proportions at all times (it is revealed, never scaled/squished).
   Pure CSS — re-fires on every character select because renderSheet rebuilds the markup. ---- */
@keyframes matReveal{
  0%   { clip-path:inset(0 0 100% 0); filter:brightness(1.6) saturate(.5); }
  58%  { clip-path:inset(0 0 0 0);    filter:brightness(1.18) saturate(.9); }
  70%  { opacity:.68; }                 /* hologram stabilises with two quick flickers */
  77%  { opacity:1; }
  87%  { opacity:.85; }
  100% { clip-path:inset(0 0 0 0); filter:none; opacity:1; }
}
.scanner__frame img{ animation:matReveal 1.05s cubic-bezier(.22,.7,.2,1) both; }
/* bright scan-line travelling down in sync with the reveal (hides the clip edge) */
@keyframes matBeam{
  0%{ top:-9%; opacity:0 } 10%{ opacity:1 } 56%{ opacity:1 } 64%{ top:100%; opacity:0 } 100%{ top:100%; opacity:0 }
}
.scanner__frame::before{ content:""; position:absolute; left:-3%; right:-3%; height:13%; z-index:4; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent,rgba(120,236,255,.85) 42%,#f2ffff 50%,rgba(120,236,255,.85) 58%,transparent);
  box-shadow:0 0 22px 6px rgba(69,220,255,.55); animation:matBeam 1.05s cubic-bezier(.22,.7,.2,1) both; }
/* soft cyan bloom from the top while it resolves */
@keyframes matBloom{ 0%{ opacity:.85 } 70%{ opacity:.4 } 100%{ opacity:0 } }
.scanner__frame::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(120% 70% at 50% -8%,rgba(69,220,255,.28),transparent 62%); animation:matBloom 1.05s ease-out both; }
/* red variant for redacted / secret profiles */
.is-secret .scanner__frame::before{ background:linear-gradient(180deg,transparent,rgba(255,150,155,.85) 42%,#fff0f0 50%,rgba(255,150,155,.85) 58%,transparent); box-shadow:0 0 22px 6px rgba(255,59,70,.5); }
.is-secret .scanner__frame::after{ background:radial-gradient(120% 70% at 50% -8%,rgba(255,59,70,.28),transparent 62%); }
@media (prefers-reduced-motion: reduce){ .scanner__frame img{ animation:none } .scanner__frame::before,.scanner__frame::after{ animation:none; opacity:0 } }
.console__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.console__tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--cy); }
.console__dot{ width:8px; height:8px; border-radius:50%; background:var(--cy); box-shadow:0 0 8px var(--cy); animation:pulse 1.6s infinite; }
.sheet__name{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.3rem,3vw,1.8rem); margin:0; }
.sheet__quote{ font-style:italic; color:var(--cy-soft); margin:.35rem 0 0; }
.sheet__voice{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--muted); margin:.5rem 0 0; }
.sheet__voice b{ color:var(--cy-soft); }
.readout{ margin:1.1rem 0 0; display:grid; gap:.5rem; }
.readout__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:.5rem; }
.readout__row dt{ margin:0; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.readout__row .dots{ align-self:center; height:0; border-bottom:1px dashed rgba(69,220,255,.2); }
.readout__row dd{ margin:0; font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--cy-soft); text-align:right; }
.traits{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem; }
.tag-hud{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--cy-soft); padding:.32rem .7rem; background:rgba(69,220,255,.1); border:1px solid var(--line-strong);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.console__foot{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:center; margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.field-label{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.radar{ position:relative; width:84px; height:84px; display:grid; place-items:center; }
.radar::before{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--line-strong); opacity:.6; }
.radar::after{ content:""; position:absolute; inset:5px; border-radius:50%; border:2px solid transparent; border-top-color:var(--cy); border-right-color:rgba(43,108,255,.6); animation:spin 3.6s linear infinite; }
.radar img{ width:52px; height:52px; object-fit:contain; animation:pulse 3.4s ease-in-out infinite; }
.radar img.is-pulsing{ animation:affilPulse 1.5s infinite; }
@keyframes affilPulse{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(255,59,70,.4)) } 50%{ filter:drop-shadow(0 0 18px rgba(255,59,70,.9)) } }
.aplayer{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem; padding:.5rem .7rem; border:1px solid var(--line-strong);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.aplayer__btn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:rgba(69,220,255,.08); color:var(--cy); cursor:pointer; display:grid; place-items:center; }
.aplayer__seek{ -webkit-appearance:none; appearance:none; width:100%; height:5px; background:linear-gradient(90deg,var(--cy) var(--p,0%),rgba(69,220,255,.2) var(--p,0%)); }
.aplayer__seek::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; border:2px solid var(--cy); }
.aplayer__seek::-moz-range-thumb{ width:13px; height:13px; border:2px solid var(--cy); border-radius:50%; background:#fff; }
.aplayer__time{ font-family:var(--mono); font-size:.74rem; color:var(--cy-soft); }
.audio-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; }
.audio-tab{ font-family:var(--mono); font-size:.72rem; border:1px solid var(--line); background:rgba(69,220,255,.05); color:var(--text); padding:.3rem .6rem; cursor:pointer; }
.audio-tab.is-active{ border-color:var(--line-strong); background:rgba(69,220,255,.16); color:var(--cy); }
.soon{ font-family:var(--display); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--xana); animation:pulse 1.6s infinite; }
/* ---- character "Diary / Journal" audio card ---- */
/* its OWN frame — deliberately different from the angular cyan HUD panels:
   rounded corners + warm-pink double border + soft glow (no rotating border / scanlines) */
.diary.panel{ clip-path:none; border-radius:14px; border:2px solid rgba(242,152,166,.5);
  background:linear-gradient(180deg,rgba(22,15,20,.93),rgba(13,10,16,.96));
  box-shadow:inset 0 0 0 4px rgba(242,152,166,.12), 0 0 26px rgba(242,152,166,.14), 0 10px 30px rgba(0,0,0,.4); }
.diary.panel::before,.diary.panel::after{ display:none !important; }
.diary__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.diary__tag{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; color:#f6b8c2; }
.diary__head .console__dot{ background:#f298a6; box-shadow:0 0 8px #f298a6; }
.diary__row{ display:flex; align-items:center; gap:1rem; }
.diary__play{ flex:none; width:48px; height:48px; border-radius:50%; border:1px solid rgba(242,152,166,.55); background:rgba(242,152,166,.1); color:#f6b8c2; cursor:pointer; display:grid; place-items:center; font-size:1.05rem; transition:.2s; }
.diary__play:hover:not(:disabled){ background:rgba(242,152,166,.22); box-shadow:0 0 16px rgba(242,152,166,.5); }
.diary__play:disabled{ cursor:not-allowed; color:var(--muted); border-color:var(--line); }
.diary__wave{ flex:1 1 auto; height:56px; min-width:0; display:block; }
.diary__time{ flex:none; font-family:var(--mono); font-size:.78rem; color:#f6b8c2; min-width:3.4ch; text-align:right; }
.diary.is-soon .diary__time{ color:var(--xana-soft); }
.diary__by{ font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.04em; margin:.7rem 0 0; }
.diary__by b{ color:#f6b8c2; }
.sheet__bio h3{ font-family:var(--display); text-transform:uppercase; font-size:1rem; letter-spacing:.04em; color:#fff; margin:0 0 .5rem; }
.sheet__bio h3::before{ content:"\25B8 "; color:var(--cy); }
.sheet__bio p{ color:var(--muted); }
.relations{ list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:.45rem; }
.relations li{ padding:.55rem .85rem; background:rgba(69,220,255,.05); border-left:2px solid var(--line-strong); }
.relations li b{ color:var(--cy-soft); }
@media (max-width:1024px){
  .char-layout{ grid-template-columns:1fr; }
  .sheet__top{ grid-template-columns:1fr; }
  .char-roster{ position:static; }
  .roster-list{ max-height:46vh; }
}

/* ============================ STORY ============================ */
.synopsis{ font-size:clamp(1.08rem,2.2vw,1.4rem); line-height:1.8; color:#cfe2f2; min-height:5em; }
.synopsis.typing::after{ content:"\258C"; color:var(--cy); margin-left:2px; animation:blink .9s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }
.timeline{ display:grid; position:relative; padding-left:1.7rem; }
.timeline::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--cy),rgba(255,59,70,.5) 70%,transparent); }
.tl-item{ position:relative; padding:0 0 1.6rem 1rem; }
.tl-item::before{ content:""; position:absolute; left:-1.62rem; top:5px; width:12px; height:12px; border-radius:50%; background:var(--cy); box-shadow:0 0 12px var(--cy); }
.tl-item h3{ font-family:var(--display); text-transform:uppercase; font-size:1rem; letter-spacing:.03em; margin:0 0 .2rem; }
.tl-item h3::before{ content:"\25B8 "; color:var(--cy); }
.tl-item p{ color:var(--muted); margin:0; }

/* ============================ UNIVERSE ============================ */
.principles{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.principles li{ border:1px solid var(--line); border-left:3px solid var(--cy); padding:.85rem 1.1rem; background:rgba(69,220,255,.04); color:var(--muted); transition:transform .2s,border-color .2s; }
.principles li:hover{ transform:translateX(5px); border-left-color:var(--xana); }
.principles li b{ display:block; margin-bottom:.2rem; color:var(--cy-soft); font-family:var(--display); text-transform:uppercase; font-size:.9rem; letter-spacing:.03em; }
.media-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem; }
.media-ic{ font-size:1.7rem; margin-bottom:.4rem; }
.road{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.road li{ display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; border:1px solid var(--line); background:rgba(69,220,255,.04); }
.road li .dot{ width:10px; height:10px; border-radius:50%; background:var(--muted); flex:none; }
.road li.is-progress{ border-color:rgba(255,200,100,.4); } .road li.is-progress .dot{ background:#ffc864; box-shadow:0 0 10px rgba(255,200,100,.7); }
.video-wrap{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line-strong); background:#000;
  clip-path:polygon(0 16px,16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%); }
.video-wrap video{ width:100%; height:100%; object-fit:contain; }
.faq{ display:grid; gap:1.2rem; }
.faq-group > h3{ font-family:var(--display); text-transform:uppercase; color:var(--cy); letter-spacing:.06em; font-size:.95rem; margin-bottom:.5rem; }
.faq-item{ border:1px solid var(--line); background:rgba(10,16,26,.6); margin-bottom:.5rem; transition:border-color .2s; }
.faq-item[open]{ border-color:var(--line-strong); }
.faq-item summary{ cursor:pointer; font-weight:600; padding:.85rem 1rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--cy); font-size:1.3rem; line-height:1; transition:transform .2s; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:0; padding:0 1rem 1rem; color:var(--muted); }

/* ============================ CHIP ============================ */
.chip{ display:inline-flex; align-items:center; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cy-soft); padding:.25rem .6rem; border:1px solid var(--line-strong); background:rgba(69,220,255,.1);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }

/* ============================ NEWS ============================ */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.3rem; }
.news-card,.news-feature{ position:relative; background:linear-gradient(180deg,rgba(10,16,26,.92),rgba(6,10,18,.95)); border:1px solid var(--line); display:block; color:inherit; overflow:hidden;
  clip-path:polygon(0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); transition:transform .2s,border-color .2s,box-shadow .2s; }
.news-card:hover,.news-feature:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 12px 36px rgba(43,108,255,.22); }
.news-card{ display:grid; grid-template-rows:auto 1fr; }
.news-card__media,.news-feature__media{ aspect-ratio:16/9; background:#0a121e; overflow:hidden; }
.news-card__media img,.news-feature__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-card:hover .news-card__media img{ transform:scale(1.06); }
.news-card__body{ padding:1.1rem 1.2rem 1.3rem; display:grid; gap:.5rem; align-content:start; }
.news-card__meta{ display:flex; gap:.6rem; align-items:center; font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.news-card h3{ font-family:var(--display); text-transform:uppercase; font-size:1.05rem; margin:0; }
.news-card p,.news-feature p{ color:var(--muted); margin:0; font-size:.92rem; }
.news-feature{ display:grid; grid-template-columns:1.2fr 1fr; margin-bottom:1.4rem; }
.news-feature__media{ min-height:320px; }
.news-feature__body{ padding:clamp(1.4rem,3vw,2.2rem); display:grid; gap:.7rem; align-content:center; }
.news-feature h2{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.4rem,3vw,2rem); margin:0; }
@media (max-width:768px){ .news-feature{ grid-template-columns:1fr; } .news-feature__media{ min-height:200px; } }

/* ============================ TEAM ============================ */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.2rem; }
.member{ text-align:center; display:grid; gap:.55rem; justify-items:center; }
.member__av{ width:108px; height:108px; border-radius:50%; object-fit:cover; border:2px solid var(--line-strong); padding:3px; background:#0a121e; transition:transform .2s,box-shadow .2s; }
.member:hover .member__av{ transform:scale(1.05); box-shadow:0 0 20px rgba(69,220,255,.4); }
.member__av--ph{ display:grid; place-items:center; font-family:var(--display); font-size:2rem; color:var(--cy); }
.member h3{ margin:0; font-family:var(--display); font-size:1.05rem; }
.member__role{ font-family:var(--mono); color:var(--cy-soft); font-size:.78rem; letter-spacing:.04em; }
.member__socials{ display:flex; gap:.5rem; justify-content:center; }
.member__socials a{ width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); transition:.2s; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.member__socials a:hover{ color:var(--cy); border-color:var(--line-strong); }
.member__socials svg{ width:18px; height:18px; fill:currentColor; }

/* ============================ RECRUITMENT ============================ */
.role-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; }
.role-card{ position:relative; background:linear-gradient(180deg,rgba(10,16,26,.92),rgba(6,10,18,.95)); border:1px solid var(--line); padding:clamp(1.1rem,2.2vw,1.5rem); display:grid; gap:.7rem; align-content:start;
  clip-path:polygon(0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); transition:transform .2s,border-color .2s; }
.role-card:hover{ transform:translateY(-4px); border-color:var(--line-strong); }
.role-card__head{ display:flex; align-items:center; gap:.8rem; }
.role-card__ic{ width:46px; height:46px; display:grid; place-items:center; font-size:1.3rem; background:rgba(69,220,255,.1); border:1px solid var(--line-strong); flex:none; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.role-card h3{ margin:0; font-family:var(--display); text-transform:uppercase; font-size:1.05rem; }
.role-card ul{ margin:0; padding-left:1.1rem; color:var(--muted); display:grid; gap:.25rem; font-size:.92rem; }
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.step{ padding-top:.6rem; }
.step__n{ font-family:var(--display); font-size:2.2rem; color:var(--cy); opacity:.5; line-height:1; }
.step h3{ font-family:var(--display); text-transform:uppercase; font-size:1rem; margin:.3rem 0 .2rem; }
.step p{ color:var(--muted); margin:0; font-size:.92rem; }

/* ============================ MUSIC ============================ */
.tracklist{ display:grid; gap:1.7rem; }
/* each category = an immersive cover (left) + its track list (right) */
.ost{ display:grid; grid-template-columns:300px 1fr; gap:1rem; align-items:stretch; }
.ost__list{ display:grid; gap:.5rem; align-content:start; }
@media (max-width:780px){ .ost{ grid-template-columns:1fr; } }
/* ---- immersive cover panel (jaquette) ---- */
.ost__cover{ position:relative; overflow:hidden; min-height:210px; padding:1.5rem 1.6rem; display:flex; flex-direction:column;
  background:radial-gradient(120% 80% at 50% 38%, rgba(69,220,255,.16), rgba(8,14,24,.55) 62%), linear-gradient(180deg, rgba(12,20,32,.86), rgba(7,12,20,.93));
  border:1px solid var(--line-strong); box-shadow:inset 0 0 44px rgba(69,220,255,.1), 0 0 26px rgba(43,108,255,.16);
  clip-path:polygon(0 16px,16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%); }
.ost__cover-img{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.45; }
.ost__title{ position:relative; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.4rem,2.2vw,2rem); color:#fff; letter-spacing:.02em; line-height:1.04; }
.ost__sub{ position:relative; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--cy-soft); margin-top:.35rem; }
.ost__big{ position:absolute; left:1.3rem; bottom:2.8rem; font-family:var(--display); font-weight:900; font-size:7rem; line-height:.78; color:rgba(120,200,255,.13); letter-spacing:-.03em; user-select:none; pointer-events:none; }
.ost__foot{ position:relative; margin-top:auto; padding-top:1rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; color:var(--muted); }
/* ---- track card: clean "tracklist" (numéro + barre d'accent à gauche, cadre épuré) ---- */
.track{ position:relative; display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:.5rem 1rem; padding:.6rem .95rem; clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  background:linear-gradient(180deg,rgba(12,19,30,.72),rgba(8,13,22,.82)); border:1px solid var(--line);
  transition:transform .18s, border-color .2s, background .2s, box-shadow .2s; }
.track::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cy); opacity:.4; transition:opacity .2s, background .2s, box-shadow .2s; }
.track:not(.is-soon):hover{ transform:translateX(4px); border-color:var(--line-strong); background:linear-gradient(180deg,rgba(69,220,255,.07),rgba(8,13,22,.85)); box-shadow:-4px 0 16px rgba(69,220,255,.14); }
.track:not(.is-soon):hover::before{ opacity:.95; box-shadow:0 0 10px rgba(69,220,255,.55); }
.track__num{ font-family:var(--mono); font-size:.84rem; color:var(--cy-soft); opacity:.5; min-width:2ch; text-align:center; }
.track__play{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(69,220,255,.08); color:var(--cy); cursor:pointer; display:grid; place-items:center; font-size:.95rem; transition:.2s; flex:none; }
.track__play:hover:not(:disabled){ background:rgba(69,220,255,.2); box-shadow:0 0 14px rgba(69,220,255,.4); }
.track__play:disabled{ cursor:not-allowed; color:var(--muted); border-color:var(--line); }
.track__title{ font-family:var(--display); text-transform:uppercase; font-size:.92rem; letter-spacing:.01em; }
.track__artist{ font-family:var(--mono); font-size:.7rem; color:var(--muted); letter-spacing:.04em; margin-top:.12rem; }
.track__dur{ font-family:var(--mono); color:var(--cy-soft); font-size:.76rem; }
.track.is-soon{ opacity:.5; }
.track.is-soon::before{ background:var(--xana-soft); opacity:.35; }
.track.is-soon .track__dur{ color:var(--xana-soft); }

/* ---- category header: "badge encadré" (chip à coins coupés + ligne lumineuse) ---- */
.music-cat{ display:flex; align-items:center; gap:.7rem; padding:1.15rem .05rem .5rem; }
.music-cat:first-child{ padding-top:.2rem; }
.music-cat span{ font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cy);
  padding:.35rem .75rem; border:1px solid var(--line-strong); background:rgba(69,220,255,.06);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%); }
.music-cat::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--cy),transparent); box-shadow:0 0 6px rgba(69,220,255,.45); }
.music-empty{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--muted); opacity:.7; padding:.2rem .4rem .7rem; }

/* ---- track right area: waveform + category tag ---- */
.track__right{ display:flex; flex-direction:row; align-items:center; gap:.7rem; }
.track__tag{ font-family:var(--mono); font-weight:600; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cy-soft); border:1px solid var(--line-strong); padding:.28rem .5rem; white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%); }
.track.is-playing .track__tag{ color:var(--xana-soft); border-color:rgba(255,59,70,.5); }
.track.is-soon .track__tag{ opacity:.7; }

/* ---- EQ waveform bars (only visible when playing) ---- */
@keyframes wv{ 0%{ transform:scaleY(.18); } 100%{ transform:scaleY(1); } }
.track__wv{ display:none; align-items:flex-end; gap:2px; height:18px; }
.track.is-playing .track__wv{ display:flex; }
.wv-bar{ width:3px; height:18px; background:var(--xana); border-radius:1px 1px 0 0; transform-origin:bottom; transform:scaleY(.18); animation:wv .5s ease-in-out infinite alternate; box-shadow:0 0 5px rgba(255,59,70,.65); }

/* ---- playing track: XANA red (accent bar + tint, no rotating border) ---- */
.track.is-playing{ background:linear-gradient(180deg,rgba(255,59,70,.12),rgba(10,16,26,.88)); border-color:rgba(255,59,70,.4); }
.track.is-playing::before{ background:var(--xana); opacity:1; box-shadow:0 0 12px rgba(255,59,70,.85); }
.track.is-playing .track__num{ color:var(--xana-soft); opacity:.9; }
.track.is-playing .track__play{ border-color:var(--xana); color:var(--xana); background:rgba(255,59,70,.18); box-shadow:0 0 16px rgba(255,59,70,.5); }
.track.is-playing .track__title{ color:var(--xana-soft); }
.track.is-playing .track__dur{ display:none; }

/* ---- inline player (hidden until is-playing) ---- */
.track__player{ display:none; grid-column:1/-1; align-items:center; gap:.6rem; padding-top:.45rem; margin-top:.1rem; border-top:1px solid rgba(255,59,70,.22); }
.track.is-playing .track__player{ display:flex; }
.track__time,.track__total{ font-family:var(--mono); font-size:.7rem; color:var(--xana-soft); white-space:nowrap; min-width:2.8ch; }
.track__total{ text-align:right; }
.track__progress{ flex:1; height:5px; background:rgba(255,59,70,.15); border-radius:3px; cursor:pointer; position:relative; }
.track__progress:hover{ background:rgba(255,59,70,.28); }
.track__bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--xana),#ff7a82); border-radius:3px; box-shadow:0 0 7px rgba(255,59,70,.8); transition:width .1s linear; }
.track__dot{ position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--xana); box-shadow:0 0 8px rgba(255,59,70,.9); transform:translate(-50%,-50%); left:0%; transition:left .1s linear; pointer-events:none; }
/* per-track volume control (XANA red, matches the active track) */
.track__vol{ flex:none; width:26px; height:26px; display:grid; place-items:center; background:none; border:none; color:var(--xana-soft); cursor:pointer; font-size:.9rem; line-height:1; padding:0; }
.track__vol:hover{ color:#fff; }
.track__volslider{ flex:none; width:72px; height:4px; -webkit-appearance:none; appearance:none; background:rgba(255,59,70,.22); border-radius:3px; cursor:pointer; }
.track__volslider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%; background:var(--xana); box-shadow:0 0 6px rgba(255,59,70,.8); cursor:pointer; }
.track__volslider::-moz-range-thumb{ width:12px; height:12px; border:none; border-radius:50%; background:var(--xana); box-shadow:0 0 6px rgba(255,59,70,.8); cursor:pointer; }
@media (max-width:520px){ .track__volslider{ width:54px; } }

/* ============================ GAME — VISUAL NOVEL (by Arcs) ============================ */
.game-intro{ max-width:74ch; margin:0 0 1.8rem; }
.game-list{ display:grid; gap:1.5rem; }
.game-empty{ font-family:var(--mono); font-size:.76rem; color:var(--muted); opacity:.7; }
/* status badges */
.ep-badge{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:.18rem .45rem; border:1px solid currentColor; white-space:nowrap; }
.ep-badge--ok{ color:#39ff9b; } .ep-badge--wip{ color:#ffcf4d; } .ep-badge--soon{ color:var(--cy-soft); }

/* ---- ARC ---- */
.arc__head{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin-bottom:.4rem; }
.arc__no{ font-family:var(--display); font-weight:800; font-size:1.45rem; color:var(--cy); letter-spacing:.04em; line-height:1; text-shadow:0 0 14px rgba(69,220,255,.4); }
.arc__title{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.1rem,2.6vw,1.55rem); letter-spacing:.03em; margin:0; }
.arc__sum{ color:var(--muted); margin:.2rem 0 1.1rem; max-width:78ch; }
.game-date{ font-family:var(--mono); font-size:.7rem; color:var(--cy-soft); letter-spacing:.06em; margin-left:auto; white-space:nowrap; }
/* secret / locked arc (red, redacted) */
.arc--secret::before{ background:conic-gradient(from var(--ang),rgba(255,59,70,.12) 0 6%,var(--xana) 14%,rgba(255,59,70,.08) 28% 54%,#ff7a82 66%,rgba(255,59,70,.08) 80% 100%); filter:drop-shadow(0 0 6px rgba(255,59,70,.5)); }
.arc-locked{ display:flex; align-items:center; gap:.9rem; }
.arc-locked__icon{ font-size:1.35rem; filter:drop-shadow(0 0 7px rgba(255,59,70,.65)); }
.arc-locked__txt{ font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; color:var(--xana-soft); font-size:clamp(1.05rem,2.4vw,1.4rem); }
.arc-locked__tag{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; color:var(--xana); display:block; margin-top:.3rem; }
.arc-redact{ display:inline-block; background:var(--xana); color:transparent; border-radius:2px; padding:0 .35em; user-select:none; }

/* ---- EPISODE card (clickable, thumbnail on the right) ---- */
.eps{ display:grid; gap:.7rem; }
.ep{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; width:100%; text-align:left; font:inherit; color:inherit;
  border:1px solid var(--line); border-left:3px solid var(--cy); background:rgba(69,220,255,.04); padding:.65rem .65rem .65rem .95rem; cursor:pointer;
  transition:border-color .2s,transform .2s,background .2s,box-shadow .2s; }
.ep:hover{ transform:translateX(4px); border-left-color:var(--cy-soft); background:rgba(69,220,255,.08); box-shadow:0 0 18px rgba(69,220,255,.18); }
.ep:focus-visible{ outline:2px solid var(--cy); outline-offset:2px; }
.ep__top{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.ep__no{ font-family:var(--mono); font-size:.72rem; color:var(--cy); }
.ep__title{ font-family:var(--display); text-transform:uppercase; font-size:.98rem; letter-spacing:.02em; }
.ep__hint{ display:block; font-family:var(--mono); font-size:.63rem; color:var(--muted); letter-spacing:.08em; margin-top:.35rem; opacity:.8; }
.ep:hover .ep__hint{ color:var(--cy-soft); opacity:1; }
.ep__thumb{ width:76px; height:76px; flex:none; border:1px solid var(--line-strong); background:#070d16 center/cover no-repeat; position:relative; overflow:hidden;
  clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%); }
.ep__thumb--ph{ display:grid; place-items:center; gap:.05rem; color:var(--cy); font-family:var(--display); font-weight:800; font-size:1rem; background:rgba(69,220,255,.06); }
.ep__thumb--ph span{ font-family:var(--mono); font-weight:400; font-size:.5rem; letter-spacing:.12em; color:var(--muted); }

/* "to be continued" footer under an arc's episode list */
.eps-more{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:.15rem; padding:.7rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cy-soft); border:1px dashed var(--line-strong); background:rgba(69,220,255,.03);
  clip-path:polygon(0 7px,7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%); }
.eps-more__dots{ display:inline-flex; gap:4px; }
.eps-more__dots i{ width:5px; height:5px; border-radius:50%; background:var(--cy); box-shadow:0 0 6px var(--cy); animation:moreDots 1.4s ease-in-out infinite; }
.eps-more__dots i:nth-child(2){ animation-delay:.22s } .eps-more__dots i:nth-child(3){ animation-delay:.44s }
@keyframes moreDots{ 0%,100%{ opacity:.25; transform:translateY(1px) } 50%{ opacity:1; transform:translateY(-2px) } }

/* ---- EPISODE modal ---- */
.ep-modal[hidden]{ display:none; }
.ep-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:5vh 1rem; }
.ep-modal__overlay{ position:absolute; inset:0; background:rgba(2,5,12,.78); backdrop-filter:blur(4px); }
.ep-modal__panel{ position:relative; width:min(720px,96vw); max-height:90vh; overflow:auto; animation:modalIn .25s var(--ease) both; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
.ep-modal__close{ position:absolute; top:.7rem; right:.7rem; width:34px; height:34px; border:1px solid var(--line-strong); background:rgba(69,220,255,.08); color:var(--cy); cursor:pointer; display:grid; place-items:center; z-index:1; }
.ep-modal__close:hover{ background:rgba(255,59,70,.15); color:var(--xana); border-color:var(--xana); }
.ep-modal__kick{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; color:var(--cy); text-transform:uppercase; }
.ep-modal__title{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.3rem,3.4vw,1.9rem); margin:.3rem 0 .2rem; }
.ep-modal__meta{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:.4rem; }
.ep-modal h4{ font-family:var(--display); text-transform:uppercase; font-size:.95rem; letter-spacing:.04em; color:var(--cy-soft); margin:1.2rem 0 .5rem; }
.ep-modal h4::before{ content:"\25B8 "; color:var(--cy); }
.ep-modal p{ color:var(--muted); margin:0; }
.ep-chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.ep-chip{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--cy-soft); border:1px solid var(--line); background:rgba(69,220,255,.05); padding:.28rem .55rem; }
.ep-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; }
.ep-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); }
.ep-soon{ font-family:var(--mono); font-size:.78rem; color:var(--muted); opacity:.7; }
body.modal-open{ overflow:hidden; }

/* XANA eye faintly behind the "Le Jeu" nav tab (::after, behind the text) */
.os-tab--xana{ z-index:0; }
.os-tab--xana::after{ content:""; position:absolute; left:50%; top:50%; width:26px; height:26px; transform:translate(-50%,-52%); background:url('/assets/xr.png') center/contain no-repeat; opacity:.22; pointer-events:none; z-index:-1; }
.os-tabs.open .os-tab--xana::after{ width:30px; height:30px; opacity:.18; }

/* ============================ DOWNLOAD ============================ */
.dl-platforms{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:1.4rem; }
.dl-plat{ position:relative; min-width:150px; text-align:center; padding:1.2rem 1.4rem; border:1px solid var(--line); background:rgba(10,16,26,.7); color:var(--muted); font-family:var(--display); text-transform:uppercase; letter-spacing:.04em;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.dl-plat span{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--xana-soft); margin-top:.4rem; }