/* ==========================================================================
   RAID HIVERNAL — design system (polices, jetons, composants)
   ========================================================================== */

/* --- Polices embarquées (aucune requête externe) --------------------------- */
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/rajdhani-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/rajdhani-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/rajdhani-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/orbitron-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/orbitron-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 800 900; font-display: swap; src: url('/assets/fonts/orbitron-latin-900-normal.woff2') format('woff2'); }

/* --- Jetons ---------------------------------------------------------------- */
:root {
  --bg-0: #050a17;
  --bg-1: #0a1328;
  --bg-2: #101c3a;
  --line: rgba(143, 190, 255, .16);
  --line-hi: rgba(143, 200, 255, .36);
  --text: #eaf3ff;
  --text-2: #a9c0e2;
  --text-3: #6f89b0;
  --ice: #8fd3ff;
  --ice-2: #4fb2ff;
  --ice-3: #1f7fe0;
  --ice-glow: rgba(110, 200, 255, .5);
  --gold: #ffd34d;
  --gold-2: #ff9f1c;
  --gold-glow: rgba(255, 200, 70, .55);
  --red: #ff4d5e;
  --blue: #3d8bff;
  --green: #34d67b;
  --ok: #3ddc84;
  --warn: #ffb020;
  --danger: #ff5470;
  --team-0: #ffc933;
  --team-1: #2fd0e4;
  --team-2: #b45cff;
  --font-ui: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Orbitron', 'Rajdhani', 'Segoe UI', sans-serif;
  --shadow: 0 16px 48px rgba(0, 0, 0, .5);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

/* --- Réinitialisation ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(79, 178, 255, .4); }

svg.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; flex: none; }
svg.ic.fill { fill: currentColor; stroke: none; }

/* barres de défilement discrètes */
* { scrollbar-width: thin; scrollbar-color: rgba(143, 190, 255, .35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(143, 190, 255, .3); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Calques de jeu --------------------------------------------------------------- */
#game-root { position: fixed; inset: 0; z-index: 0; background: #0a0f30; transition: filter .7s var(--ease); }
#game-root canvas { display: block; }
body[data-phase="boot"] #game-root { filter: brightness(.35); }
body[data-phase="ended"] #game-root { filter: brightness(.7); }
body[data-phase="playing"] #game-root { filter: none; }
body[data-phase="playing"][data-capture="soft"] { cursor: none; }

/* --- Boutons ------------------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .62em 1.15em;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: .86rem;
  color: var(--text);
  background: linear-gradient(180deg, rgba(44, 70, 128, .72), rgba(22, 38, 80, .82));
  border: 1px solid var(--line-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .15s var(--ease), box-shadow .2s, border-color .2s, background .2s, opacity .2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--ice); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(143, 211, 255, .2), 0 10px 26px -8px var(--ice-glow); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-ghost { background: rgba(14, 26, 56, .45); }
.btn-icon { padding: .6em; }
.btn-primary { background: linear-gradient(180deg, #5fc1ff, #1f7fe0); border-color: #aee0ff; color: #04152e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 24px -8px var(--ice-glow); }
.btn-primary:hover { border-color: #fff; }
.btn-danger { background: linear-gradient(180deg, rgba(150, 40, 70, .75), rgba(90, 20, 44, .85)); border-color: rgba(255, 110, 140, .5); }
.btn-danger:hover { border-color: #ff8aa0; box-shadow: 0 10px 26px -8px rgba(255, 84, 112, .5); }
.btn-sm { padding: .4em .8em; font-size: .76rem; }

/* gros bouton « JOUER » en parallélogramme */
.btn-cta {
  position: relative;
  transform: skewX(-10deg);
  filter: drop-shadow(0 12px 28px rgba(60, 160, 255, .5));
  transition: transform .2s var(--ease), filter .2s;
}
.btn-cta .cta-in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 70px;
  overflow: hidden;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: .28em;
  color: #04122a;
  background: linear-gradient(180deg, #d4f3ff 0%, #7ccfff 48%, #3d9fff 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -5px 0 rgba(18, 88, 200, .5), 0 0 0 2px rgba(190, 235, 255, .55);
}
.btn-cta .cta-in > * { transform: skewX(10deg); }
.btn-cta .cta-in::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  animation: shine 3.4s ease-in-out infinite;
}
.btn-cta:hover { transform: skewX(-10deg) translateY(-3px) scale(1.03); filter: drop-shadow(0 18px 38px rgba(80, 180, 255, .75)); }
.btn-cta:active { transform: skewX(-10deg) translateY(1px) scale(.98); }
.btn-cta[disabled] { filter: grayscale(.8) brightness(.7); pointer-events: none; }

/* --- Pastilles, cartes, onglets ---------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .4em .95em;
  border-radius: 99px;
  background: rgba(18, 34, 72, .72);
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pill b { font-family: var(--font-display); font-weight: 700; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 2s ease-in-out infinite; }
.pill-test { color: var(--gold); border-color: rgba(255, 211, 77, .4); background: rgba(70, 50, 10, .45); }
.pill-live.is-off { color: var(--danger); border-color: rgba(255, 84, 112, .45); }
.pill-live.is-off .dot { background: var(--danger); box-shadow: 0 0 10px var(--danger); }

.card {
  position: relative;
  border-radius: 16px;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(24, 42, 86, .8), rgba(10, 20, 46, .86));
  border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px) saturate(1.3);
}
.card::before, .card::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid var(--ice); opacity: .6; pointer-events: none; }
.card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; }
.card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h3 { display: flex; align-items: center; gap: .65em; font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(4, 10, 26, .65); border: 1px solid var(--line); }
.seg button { padding: .3em .66em; border-radius: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); transition: color .2s, background .2s, box-shadow .2s; }
.seg button:hover { color: var(--text); }
.seg button.is-on { background: linear-gradient(180deg, var(--ice-2), var(--ice-3)); color: #03122c; box-shadow: 0 0 14px -2px var(--ice-glow); }

/* --- Barres de progression ------------------------------------------------------------------ */
.bar { position: relative; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar > i { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--ice-3), var(--ice)); box-shadow: 0 0 12px var(--ice-glow); transition: width .6s var(--ease); }
.bar.gold > i { background: linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow: 0 0 12px var(--gold-glow); }
.bar.thick { height: 12px; }

/* --- Hexagones : avatar & niveau ------------------------------------------------------------------ */
.hex { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.avatar {
  --h: 210;
  display: grid; place-items: center; flex: none;
  width: 2.7em; height: 3em;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: 0;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  background: linear-gradient(145deg, hsl(var(--h) 85% 62%), hsl(calc(var(--h) + 45) 75% 36%));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.avatar.bot { background: linear-gradient(145deg, #7b8db0, #3a4868); }
.lvl {
  display: inline-grid; place-items: center; flex: none;
  min-width: 2.2em; height: 2.4em; padding: 0 .35em;
  font-family: var(--font-display); font-weight: 800; font-size: .78rem; color: #3a2300;
  background: linear-gradient(160deg, #fff0a8, #ffc233 55%, #e68a00);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* --- Divers ------------------------------------------------------------------------------------------- */
kbd {
  display: inline-grid; place-items: center;
  min-width: 1.75em; height: 1.75em; padding: 0 .5em; margin: 0 .12em;
  border-radius: 6px;
  background: linear-gradient(180deg, #2a4474, #172a52);
  border: 1px solid var(--line-hi); border-bottom-width: 3px;
  font-family: var(--font-ui); font-weight: 700; font-size: .78em; letter-spacing: .04em; color: var(--text);
}
.input {
  width: 100%; padding: .65em .9em; border-radius: 10px;
  background: rgba(4, 10, 26, .72); border: 1px solid var(--line-hi); outline: none;
  font-weight: 600; letter-spacing: .02em; user-select: text; -webkit-user-select: text;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(110, 200, 255, .2); }

.switch { position: relative; flex: none; width: 48px; height: 27px; border-radius: 99px; background: rgba(255, 255, 255, .12); border: 1px solid var(--line-hi); transition: background .25s, border-color .25s, box-shadow .25s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #c6dcff; transition: transform .25s var(--ease), background .25s; }
.switch[aria-checked="true"] { background: linear-gradient(90deg, var(--ice-3), var(--ice-2)); border-color: var(--ice); box-shadow: 0 0 16px -2px var(--ice-glow); }
.switch[aria-checked="true"]::after { transform: translateX(21px); background: #fff; }

input[type=range].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; outline: none; background: linear-gradient(90deg, var(--ice-2) var(--v, 50%), rgba(255, 255, 255, .15) var(--v, 50%)); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 3px solid var(--ice-2); box-shadow: 0 0 12px var(--ice-glow); cursor: pointer; }
.slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--ice-2); box-shadow: 0 0 12px var(--ice-glow); cursor: pointer; }

.team-chip { display: inline-block; width: .7em; height: .7em; border-radius: 3px; background: var(--tc, #fff); box-shadow: 0 0 8px var(--tc, #fff); }
[data-team="0"], .t0 { --tc: var(--team-0); }
[data-team="1"], .t1 { --tc: var(--team-1); }
[data-team="2"], .t2 { --tc: var(--team-2); }

[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: .4em .7em; border-radius: 8px; white-space: nowrap; z-index: 80;
  background: rgba(4, 10, 26, .95); border: 1px solid var(--line-hi);
  font-size: .78rem; font-weight: 600; letter-spacing: .03em; color: var(--text); pointer-events: none;
}

/* --- Animations ------------------------------------------------------------------------------------------ */
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
@keyframes shine { 0%, 55% { left: -40%; } 100% { left: 140%; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); } 50% { box-shadow: 0 0 22px 4px var(--gold-glow); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}