/* ALTER EGO — les trois mondes. Chaque thème change couleurs, police, formes et décor. */

:root, [data-theme="backrooms"] {
  --bg: #0d0c06;
  --panel: rgba(16, 14, 5, .7);
  --panel-2: rgba(36, 32, 12, .78);
  --line: rgba(214, 196, 110, .28);
  --line-strong: rgba(236, 222, 140, .62);
  --ink: #ece2ae;
  --ink-dim: #a99f6c;
  --accent: #f4e98c;
  --accent-ink: #1a1704;
  --ok: #c8e07a;
  --warn: #f0b04a;
  --bad: #e66a4f;
  --user: rgba(244, 233, 140, .1);
  --font: "Courier Prime", "Courier New", monospace;
  --font-head: "Courier Prime", "Courier New", monospace;
  --font-code: "Courier Prime", "Courier New", monospace;
  --fs: 15px;
  --radius: 2px;
  --cut: 0px;
  --glow: 0 0 18px rgba(244, 233, 140, .18);
}

[data-theme="cyberpunk"] {
  --bg: #07040f;
  --panel: rgba(16, 9, 32, .86);
  --panel-2: rgba(30, 13, 52, .8);
  --line: rgba(5, 217, 232, .3);
  --line-strong: rgba(255, 42, 109, .8);
  --ink: #f2ecff;
  --ink-dim: #9d8fc2;
  --accent: #ff2a6d;
  --accent-ink: #fff;
  --accent-2: #05d9e8;
  --ok: #05d9e8;
  --warn: #ffb547;
  --bad: #ff2a6d;
  --user: rgba(5, 217, 232, .1);
  --font: "Chakra Petch", system-ui, sans-serif;
  --font-head: "Chakra Petch", system-ui, sans-serif;
  --fs: 15px;
  --radius: 0px;
  --cut: 14px;
  --glow: 0 0 22px rgba(255, 42, 109, .35), 0 0 2px rgba(5, 217, 232, .6);
}

[data-theme="hacker"] {
  --bg: #000;
  --panel: rgba(0, 10, 3, .88);
  --panel-2: rgba(0, 24, 8, .85);
  --line: rgba(51, 255, 102, .25);
  --line-strong: rgba(51, 255, 102, .75);
  --ink: #5cff84;
  --ink-dim: #239a45;
  --accent: #33ff66;
  --accent-ink: #001a07;
  --ok: #33ff66;
  --warn: #d6ff3a;
  --bad: #ff4d3a;
  --user: rgba(51, 255, 102, .07);
  --font: "VT323", "Courier New", monospace;
  --font-head: "VT323", "Courier New", monospace;
  --font-code: "VT323", "Courier New", monospace;
  --fs: 20px;
  --radius: 0px;
  --cut: 0px;
  --glow: 0 0 8px rgba(51, 255, 102, .55);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--fs)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------ décor de fond */
.fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }

/* Backrooms : le papier peint, assombri, avec grain et vignette */
[data-theme="backrooms"] .fx {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 246, 170, .13), transparent 55%),
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, .78) 100%),
    linear-gradient(rgba(10, 9, 3, .46), rgba(10, 9, 3, .6)),
    url("/static/wallpaper.jpg") center / cover no-repeat;
}
[data-theme="backrooms"] .fx::after {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .09; mix-blend-mode: overlay;
}

/* Cyberpunk : nuit violette, halo néon et sol en grille */
[data-theme="cyberpunk"] .fx {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(255, 42, 109, .22), transparent 45%),
    radial-gradient(ellipse at 90% 85%, rgba(5, 217, 232, .18), transparent 45%),
    linear-gradient(180deg, #07040f 0%, #12062a 60%, #07040f 100%);
}
[data-theme="cyberpunk"] .fx::before {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%;
  background-image:
    linear-gradient(rgba(255, 42, 109, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 217, 232, .28) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom;
  mask-image: linear-gradient(transparent, #000 70%);
  opacity: .5;
}

/* Hacker : noir pur, pluie de caractères et lignes de balayage */
[data-theme="hacker"] .fx canvas { display: block; opacity: .16; }
[data-theme="hacker"] .fx::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px);
}
[data-theme="hacker"] body, [data-theme="hacker"] { text-shadow: 0 0 6px rgba(51, 255, 102, .45); }

/* ------------------------------------------------ panneaux par thème */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}
[data-theme="cyberpunk"] .panel {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  border-color: transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2) 60%, transparent) border-box;
  border: 1px solid transparent;
}
[data-theme="backrooms"] .panel { box-shadow: inset 0 1px 0 rgba(255, 246, 170, .08), 0 18px 40px rgba(0, 0, 0, .45); }
[data-theme="hacker"] .panel { backdrop-filter: none; }

.btn {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55em 1em; cursor: pointer;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.btn:hover { background: var(--panel-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: var(--glow); text-shadow: none; }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; }
[data-theme="cyberpunk"] .btn { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
[data-theme="hacker"] .btn.primary { background: transparent; color: var(--accent); }
[data-theme="hacker"] .btn.primary:hover { background: var(--accent); color: var(--accent-ink); }

/* Clignotement des néons au chargement (Backrooms seulement) */
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .35; }
}
[data-theme="backrooms"] .flicker { animation: flicker 1.6s linear 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}