:root {
  --text: #f3efe3;
  --muted: #9ca7b3;
  --gold: #d4ad58;
  --gold2: #f0d28a;
  --red: #e27d7d;
  --green: #73c08f;
  --blue: #76a1d0;
  --shell-max: min(2350px, calc(100vw - 20px));
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: Segoe UI, Arial, sans-serif;
  font-size: clamp(14px, 0.82vw, 18px);
  background:
    radial-gradient(circle at 50% 12%, rgba(212,173,88,0.16), transparent 28%),
    radial-gradient(circle at 50% 115%, rgba(212,173,88,0.10), transparent 32%),
    linear-gradient(180deg, #212d38 0%, #11161d 22%, #090b0f 100%);
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 0 52%, rgba(0,0,0,0.30) 100%);
}
button, input { font: inherit; }
button {
  border: 1px solid #5a6570;
  background: linear-gradient(180deg, #2b3440, #1d242c);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 17px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 18px rgba(0,0,0,0.22);
}
button:hover { filter: brightness(1.12); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: linear-gradient(180deg, #e3c77d, #a57b2d); color: #17120a; border-color: #f0d28a; }
button.ghost { background: rgba(0,0,0,0.18); }
button.small-btn { padding: 9px 12px; }
input {
  background: #0e1115;
  border: 1px solid #4b5661;
  color: white;
  border-radius: 10px;
  padding: 13px;
  outline: none;
}
input:focus { border-color: var(--gold); }
.screen { display:none; min-height:100vh; position: relative; z-index: 1; }
.screen.active { display:block; }
#landing { padding: 8vh 20px 40px; overflow: auto; }
.hero { text-align:center; }
.crest {
  width:90px; height:90px; border:2px solid var(--gold); border-radius:50%; display:grid; place-items:center; margin:0 auto 22px;
  font-family:Georgia,serif; font-size:44px; color:var(--gold2);
  box-shadow:0 0 30px #d4ad5830, inset 0 0 20px rgba(212,173,88,0.10);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.08), rgba(0,0,0,0.0) 40%), linear-gradient(180deg, rgba(37,44,53,0.9), rgba(17,21,26,0.95));
}
.eyebrow { letter-spacing:.25em; color:var(--gold); font-weight:700; font-size:12px; }
h1 { font-family: Georgia, serif; letter-spacing:.1em; font-size: clamp(42px,8vw,74px); margin:5px 0; color:var(--gold2); text-shadow:0 2px 20px #000; }
h2 { margin:0; font-weight:400; color:#d5dbe1; }
.subtitle { color:var(--muted); }
.lobby-card {
  width:min(460px,100%); margin:38px auto 0; padding:26px;
  background:linear-gradient(180deg, rgba(21,25,30,0.96), rgba(14,18,22,0.96));
  border:1px solid #3e4751; border-radius:18px; box-shadow:0 20px 60px #0008; display:grid; gap:10px;
}
.lobby-card label { color:#c8d0d7; font-size:13px; font-weight:700; }
.separator { text-align:center; color:#76818c; position:relative; margin:4px 0; }
.separator:before,.separator:after { content:""; position:absolute; top:50%; width:42%; height:1px; background:#343c45; }
.separator:before{left:0}.separator:after{right:0}.separator span{background:#15191e;padding:0 10px;position:relative;z-index:1}
.code-input { text-transform:uppercase; letter-spacing:.25em; text-align:center; font-weight:800; }

#game { min-height: 100vh; overflow: hidden; }
.topbar {
  width: var(--shell-max);
  margin: 0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 18px;
  border:1px solid rgba(240,210,138,0.12); border-top:none; border-radius:0 0 20px 20px;
  background:linear-gradient(180deg, rgba(17,21,26,0.97), rgba(12,16,21,0.93));
  backdrop-filter: blur(8px); position:sticky; top:0; z-index:20; box-shadow:0 14px 28px rgba(0,0,0,0.28);
}
.topbar-right { display:flex; align-items:center; gap:10px; }
.brand { font-family:Georgia,serif; color:var(--gold2); font-weight:bold; font-size:clamp(20px,1.5vw,28px); letter-spacing:.08em; }
.brand small{font-family:Segoe UI;font-size:11px;color:var(--muted)}
.muted{color:var(--muted);font-size:12px}
.turn-badge{padding:10px 16px;border:1px solid #4b5661;border-radius:999px;color:#c9d1d8;font-weight:700;white-space:nowrap;background:rgba(255,255,255,0.02)}
.turn-badge.mine{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 18px #d4ad5825}
.game-shell {
  width: var(--shell-max);
  height: calc(100vh - 72px);
  margin: 8px auto 0;
  display:grid;
  grid-template-columns: minmax(0, 1fr) clamp(270px, 15vw, 340px);
  gap: 14px;
  align-items: stretch;
}
.main-column {
  min-width: 0;
  min-height: 0;
  display:grid;
  grid-template-rows: minmax(520px, 1fr) minmax(225px, 27vh) auto;
  gap: 10px;
}
.side-column { min-height:0; display:grid; grid-template-rows:minmax(0,1fr); gap:10px; }

.arena {
  position: relative;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  padding: 16px 18px;
  border: 1px solid rgba(240,210,138,0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 48%, rgba(212,173,88,0.09), transparent 23%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.34), transparent 62%),
    linear-gradient(180deg, rgba(52,38,18,0.20), rgba(17,21,26,0.0) 20%),
    linear-gradient(180deg, rgba(18,23,29,0.97), rgba(10,13,17,0.99));
  box-shadow: 0 24px 50px rgba(0,0,0,0.26), inset 0 0 0 1px rgba(255,255,255,0.02);
  display:grid;
  grid-template-rows: 136px minmax(116px, 1fr) 58px minmax(116px, 1fr) 136px;
  gap: 6px;
}
.arena::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.9;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(212,173,88,0.07) 28.5%, transparent 29.5%),
    radial-gradient(circle at 50% 50%, transparent 0 41%, rgba(212,173,88,0.05) 41.5%, transparent 42.5%),
    linear-gradient(180deg, transparent 49.65%, rgba(255,255,255,0.08) 50%, transparent 50.35%);
}
.table-crown { position:absolute; left:50%; top:50%; width:min(54vw, 900px); height:min(34vw, 520px); transform:translate(-50%, -50%); border-radius:50%; border:2px solid rgba(240,210,138,0.06); box-shadow:0 0 0 24px rgba(240,210,138,0.02),0 0 0 46px rgba(240,210,138,0.015); pointer-events:none; z-index:0; }
.table-crest { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:Georgia,serif; font-size:clamp(160px, 15vw, 270px); color:rgba(240,210,138,0.045); text-shadow:0 0 40px rgba(212,173,88,0.08); pointer-events:none; z-index:0; }
.board-glow { position:absolute; left:50%; width:64%; height:86px; transform:translateX(-50%); pointer-events:none; filter:blur(24px); opacity:.25; z-index:0; }
.board-glow.top { top:22%; background:radial-gradient(ellipse at center, rgba(210,89,89,.24), transparent 70%); }
.board-glow.bottom { bottom:22%; background:radial-gradient(ellipse at center, rgba(88,123,214,.24), transparent 70%); }
.arena > * { position: relative; z-index: 2; }

.hero-row {
  min-height: 124px;
  display:grid;
  grid-template-columns: minmax(260px,1fr) 230px minmax(260px,1fr);
  align-items:center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(31,39,48,0.86), rgba(15,20,26,0.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 18px rgba(0,0,0,0.18);
}
.hero-side {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding: 4px 2px;
}
.hero-side.right { justify-content:flex-end; }
.hero-name { font-weight:800; font-size:clamp(17px, 1.04vw, 22px); }
.hero-chip {
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  background:linear-gradient(180deg, rgba(34,42,52,.94), rgba(19,24,31,.94));
  border:1px solid rgba(255,255,255,.08); color:#cbd5dd; font-size:clamp(12px,.78vw,14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.hero-chip .value { font-weight:800; }
.hero-chip.prestige .value { color: var(--red); }
.hero-chip.prestige { border-color: rgba(226,125,125,.25); }
.hero-chip.quest .value { color: var(--gold2); }
.hero-chip.quest { border-color: rgba(240,210,138,.24); }
.hero-chip.deck .value { color: #cdd5df; }
.hero-chip.connected .value { color: var(--green); }

.hero-name-wrap { display:flex; flex-direction:column; gap:2px; }
.hero-title { font-size:13px; color:#9da9b5; }
.hero-center { display:grid; justify-items:center; align-content:center; gap:8px; }
.hero-power-btn {
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid rgba(240,210,138,.40);
  background: linear-gradient(180deg, rgba(92,72,28,.95), rgba(50,39,18,.95));
  color: #f4deb1;
  font-weight: 800;
  box-shadow: 0 8px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-power-btn.used { opacity: .65; }
.hero-power-text { max-width: 200px; text-align:center; font-size:11px; color:#b8c3cc; line-height:1.25; }
.hero-power-text.enemy { color:#98a5b0; }

.hero-drop-zone {
  display:grid;
  justify-items:center;
  gap:6px;
  padding:8px;
  border-radius:24px;
  transition:.18s transform,.18s filter,.18s box-shadow;
}
.hero-drop-zone.attackable {
  cursor: crosshair;
}
.hero-drop-zone.drop-hover {
  box-shadow: 0 0 0 2px rgba(240,210,138,.18), 0 0 26px rgba(240,210,138,.22);
  transform: translateY(-2px) scale(1.02);
}
.hero-avatar {
  width: 132px; height: 132px; border-radius:50%; position:relative;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.16), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 52% 48%, rgba(240,210,138,.16), rgba(0,0,0,0) 54%),
    linear-gradient(180deg, rgba(57,46,30,.95), rgba(18,22,28,.97));
  border:2px solid rgba(240,210,138,.44);
  box-shadow: 0 0 0 8px rgba(240,210,138,.08), 0 16px 26px rgba(0,0,0,.34), inset 0 0 22px rgba(255,255,255,.03);
  display:grid; place-items:center; text-align:center; overflow:hidden;
}
.hero-drop-zone.attackable .hero-avatar {
  box-shadow: 0 0 0 8px rgba(240,210,138,.08), 0 0 0 4px rgba(240,210,138,.28), 0 16px 26px rgba(0,0,0,.34), inset 0 0 22px rgba(255,255,255,.03);
}
.hero-drop-zone.drop-hover .hero-avatar {
  border-color: #ffe09d;
  box-shadow: 0 0 0 8px rgba(240,210,138,.10), 0 0 24px rgba(240,210,138,.35), 0 16px 26px rgba(0,0,0,.34);
}
.hero-drop-text {
  min-width: 138px;
  text-align:center;
  font-size:11px;
  color:#d4dbe1;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(12,16,21,.75);
}
.hero-drop-zone.attackable .hero-drop-text {
  color:#f5deb0;
  border-color: rgba(240,210,138,.34);
}
.hero-portrait {
  position:relative;
  width: 88px;
  height: 96px;
  margin-top: 10px;
}
.hero-portrait .portrait-shoulders {
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:84px; height:34px; border-radius:42px 42px 16px 16px;
  background: linear-gradient(180deg, rgba(31,39,50,.95), rgba(13,16,22,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-portrait .portrait-neck {
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:18px; height:18px; border-radius:8px;
  background:#dca681;
}
.hero-portrait .portrait-face {
  position:absolute; left:50%; bottom:40px; transform:translateX(-50%);
  width:44px; height:54px; border-radius:22px 22px 20px 20px;
  background: linear-gradient(180deg, #efc7a0, #d7a078);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.05);
}
.hero-portrait .portrait-hair {
  position:absolute; left:50%; bottom:66px; transform:translateX(-50%);
  width:52px; height:28px; border-radius:24px 24px 12px 12px;
}
.hero-portrait .portrait-crown {
  position:absolute; left:50%; bottom:84px; transform:translateX(-50%);
}
.hero-portrait .portrait-accent {
  position:absolute; left:50%; transform:translateX(-50%);
}
.hero-portrait.arthur .portrait-hair {
  background: linear-gradient(180deg, #5e4027, #362113);
}
.hero-portrait.arthur .portrait-crown {
  width:38px; height:16px; background: linear-gradient(180deg, #f2d38a, #c79432);
  clip-path: polygon(0 100%, 8% 32%, 20% 68%, 33% 12%, 50% 70%, 66% 12%, 80% 68%, 92% 32%, 100% 100%);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.hero-portrait.arthur .portrait-accent {
  bottom:46px; width:24px; height:18px; border-bottom:10px solid rgba(88,51,24,.82); border-left:5px solid transparent; border-right:5px solid transparent; border-radius:0 0 16px 16px;
}
.hero-portrait.lancelot .portrait-hair {
  width:56px; height:32px;
  background: linear-gradient(180deg, #7f858e, #4b5158);
  border-radius:24px 24px 14px 14px;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.08);
}
.hero-portrait.lancelot .portrait-crown {
  width:50px; height:22px; border-radius:18px 18px 10px 10px;
  background: linear-gradient(180deg, #a8afb9, #6a7280);
  clip-path: polygon(6% 100%, 0 24%, 15% 0, 36% 18%, 50% 4%, 64% 18%, 85% 0, 100% 24%, 94% 100%);
  border:1px solid rgba(255,255,255,.2);
}
.hero-portrait.lancelot .portrait-accent {
  bottom:18px; width:64px; height:24px; border-radius:18px 18px 6px 6px;
  background: linear-gradient(180deg, #d8dce3, #89909a);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  opacity:.8;
}
.hero-avatar .hero-letter { font-family: Georgia, serif; font-size: 44px; color: #f4d997; text-shadow: 0 0 20px rgba(240,210,138,.2); }
.hero-avatar .hero-label { position:absolute; bottom:12px; font-size:11px; letter-spacing:.08em; color:#d8dee6; text-transform:uppercase; }
.hero-avatar .hero-prestige {
  position:absolute; top:-6px; right:-2px; min-width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center; padding:0 8px; font-size:14px; font-weight:900;
  color:#1a0f0f; background:linear-gradient(180deg, #f09b9b, #d76464); border:1px solid #ffd1d1;
}
.hero-avatar .hero-quest {
  position:absolute; top:-6px; left:-2px; min-width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center; padding:0 8px; font-size:14px; font-weight:900;
  color:#17120a; background:linear-gradient(180deg, #f0d28a, #c99a37); border:1px solid #f6e3b6;
}
.board-row {
  min-height: 112px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  overflow-x:auto;
  overflow-y:visible;
  padding:10px 8px;
  scrollbar-width: thin;
}
.middle-line { min-height: 58px; display:flex; align-items:center; justify-content:center; gap:18px; padding:2px 0; }
.location-card {
  border:1px solid #8f7240; background:linear-gradient(135deg,#3a2e1d,#17191c); color:var(--gold2);
  padding:8px 14px; border-radius:12px; text-align:center; font-family:Georgia,serif; font-size:clamp(12px,0.84vw,15px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 20px rgba(0,0,0,0.18);
}
.location-card small{font-family:Segoe UI;color:#b4a37f}
.status-line{color:#aab4be;font-size:clamp(12px,0.82vw,15px)}

.card {
  width: clamp(122px, 6.4vw, 152px);
  min-height: clamp(178px, 10.2vw, 226px);
  border-radius:17px; border:2px solid #505b66;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0) 14%), linear-gradient(160deg,#252b33,#0e1318 82%);
  padding:8px; position:relative; flex:0 0 auto;
  box-shadow:0 12px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.02);
  transition:.15s transform,.15s border-color,.15s box-shadow,.18s filter; user-select:none;
}
.card::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,0.05), transparent 26%, transparent 74%, rgba(255,255,255,0.02)); pointer-events:none; }
.card:hover{transform:translateY(-4px);border-color:#8994a1;box-shadow:0 18px 30px rgba(0,0,0,0.38)}
.card.selectable{cursor:pointer}
.card.selected{border-color:var(--gold2);box-shadow:0 0 0 2px #8a682a,0 16px 34px rgba(0,0,0,0.45);transform:translateY(-8px)}
.card.attack-source { animation: pulseAttack 0.55s ease; }
.card.attack-target { outline: 2px dashed rgba(240,210,138,0.55); outline-offset: 3px; }
.card.drop-hover { border-color: #ffe09d; box-shadow:0 0 0 2px rgba(240,210,138,.42), 0 18px 30px rgba(0,0,0,0.38); }
.card.impact { animation: impact .35s ease; }
.card.dimmed { opacity: 0.55; filter: saturate(0.8); }
.card.drag-source { opacity: .88; }
.card.epic{border-color:#8464aa}.card.legendary{border-color:#c39a44}.card.rare{border-color:#4e7faa}.card.common{border-color:#59636d}
.card-cost { position:absolute;left:8px;top:7px;width:28px;height:28px;border-radius:50%; background:linear-gradient(180deg,#d1ac59,#a27728);color:#15110a;display:grid;place-items:center; font-weight:900;border:1px solid #f3d58c; font-size:12px; box-shadow:0 4px 10px rgba(0,0,0,0.25); }
.card-name { padding-left:32px; min-height:29px; font-weight:800; font-size:clamp(12px,0.82vw,15px); color:#f3e7c7; line-height:1.08; }
.card-art { height:clamp(56px, 3.2vw, 76px); margin:6px 0; border-radius:10px; display:grid; place-items:center; font-family:Georgia,serif; font-size:clamp(22px,1.7vw,32px); color:#f4deb1; box-shadow: inset 0 0 24px rgba(255,255,255,0.04), 0 8px 16px rgba(0,0,0,0.12); position:relative; overflow:hidden; }
.card-art::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.08)); }
.card-type{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#a8b1ba}
.card-text{font-size:clamp(9px,0.60vw,10px);color:#c1c8ce;line-height:1.24;margin-top:4px;height:39px;overflow:hidden}
.card-stats{display:flex;justify-content:space-between;font-size:clamp(10px,0.68vw,13px);font-weight:800;margin-top:6px}
.atk{color:#e19472}.hp{color:#76ba8f}.def{color:#82a9d6}
.sleep{position:absolute;right:8px;top:9px;font-size:10px;color:#aaa}
.empty-slot {
  padding: 18px 24px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 14px; background: rgba(255,255,255,0.02);
  color:#8e99a4; font-size:13px;
}

.hand-wrap {
  padding: 8px 14px 10px;
  height: 100%;
  border: 1px solid rgba(240,210,138,0.12);
  border-bottom: none;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(37,28,18,0.18), rgba(0,0,0,0.0) 12%), linear-gradient(180deg, rgba(17,21,26,0.96), rgba(12,16,20,0.98));
  box-shadow: 0 -12px 30px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.03);
  overflow: hidden;
}
.hand-topline { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height: 24px; }
.hand-title{font-size:13px;color:#aeb7c0;font-weight:800;letter-spacing:.08em}
.hand-hint { color:#8f9aa3; font-size:12px; }
.hand {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:2px;
  overflow-x:auto;
  overflow-y:visible;
  padding:6px 8px 6px;
  min-height: 176px;
  height: calc(100% - 26px);
  scrollbar-width: thin;
}
.hand .card { width:clamp(128px, 6.6vw, 154px); min-height:clamp(182px, 10.4vw, 228px); transform-origin:center 94%; margin-left:-28px; }
.hand .card:first-child { margin-left:0; }
.hand .card:hover { z-index:4; }

.controls { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 0 8px; color:#9eabb6; min-height: 56px; }
.control-buttons{display:flex;gap:10px;flex-wrap: wrap}
#selectionText { flex: 1; min-width: 0; }
.preview-panel, .log-panel {
  background:linear-gradient(180deg, rgba(16,20,25,0.98), rgba(13,17,21,0.98));
  border:1px solid rgba(240,210,138,0.10); border-radius: 22px; box-shadow: 0 18px 34px rgba(0,0,0,0.28);
}
.preview-panel { padding: 14px; }
.preview-panel h3, .log-panel h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-top:0}
.preview-empty { min-height: 220px; display:grid; place-items:center; padding:18px; color:#8f9aa3; text-align:center; border:1px dashed rgba(255,255,255,0.12); border-radius:14px; background:rgba(255,255,255,0.02); }
.preview-panel .card { width:100%; max-width:240px; min-height:0; margin:0 auto; }
.log-panel { min-height:0; padding:14px; overflow-y:auto; }
.log-entry{font-size:13px;line-height:1.45;color:#aeb8c1;border-bottom:1px solid #232a31;padding:8px 0}

.drag-ghost {
  position: fixed; z-index: 999; pointer-events: none; transform: translate(-50%, -50%) rotate(-6deg) scale(1.05);
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.45));
}
.drag-ghost.attack-arrow{
  height:12px;
  min-width:1px;
  transform-origin:0 50%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(116,220,255,.45),#dffbff 18%,#56cfff 64%,#f7df9a);
  box-shadow:0 0 5px #b8f1ff,0 0 16px rgba(57,190,255,.9),0 0 28px rgba(255,204,118,.42);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.75));
}
.drag-ghost.attack-arrow::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:24px;
  height:24px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#ffffff 0 12%,#69dcff 30%,rgba(58,188,255,.15) 68%,transparent 72%);
  box-shadow:0 0 16px rgba(74,211,255,.9);
}
.drag-ghost.attack-arrow::after{
  content:'';
  position:absolute;
  right:-2px;
  top:50%;
  width:22px;
  height:22px;
  transform:translate(50%,-50%) rotate(45deg);
  border-top:5px solid #f9e6ad;
  border-right:5px solid #f9e6ad;
  filter:drop-shadow(0 0 5px #60d8ff);
}
.damage-burst {
  position:absolute; left:50%; top:-8px; transform:translate(-50%, 0); z-index:8; pointer-events:none;
  background:linear-gradient(180deg,#ffde8e,#c87f1e); color:#2b1500; border:1px solid #ffeab9;
  min-width:34px; height:34px; padding:0 10px; border-radius:999px; display:grid; place-items:center;
  font-weight:900; box-shadow:0 10px 18px rgba(0,0,0,.28);
  animation: burstUp .72s ease forwards;
}
#toast{position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-80px);z-index:99;background:#8d4242;color:white;padding:11px 18px;border-radius:8px;transition:.2s;box-shadow:0 8px 25px #0008;font-weight:700}
#toast.show{transform:translateX(-50%) translateY(0)}
.winner-overlay{position:fixed;inset:0;background:#080a0ddc;z-index:50;display:grid;place-items:center;text-align:center}
.winner-box{padding:45px;border:1px solid #ad8d41;background:#15191e;border-radius:16px}
.winner-box h2{font-size:44px;color:var(--gold2);font-family:Georgia,serif}.winner-box p{color:#c3ccd4}

@keyframes pulseAttack { 0% { transform: translateY(-8px) scale(1);} 50% { transform: translateY(-20px) scale(1.03); box-shadow: 0 0 0 3px rgba(240,210,138,0.22), 0 16px 36px rgba(0,0,0,0.45);} 100% { transform: translateY(-8px) scale(1);} }
@keyframes impact { 0% { transform: scale(1);} 35% { transform: scale(1.04) translateX(4px); filter: brightness(1.22);} 100% { transform: scale(1);} }
@keyframes burstUp { 0% { opacity:0; transform:translate(-50%, 8px) scale(.8);} 18% { opacity:1; transform:translate(-50%, -8px) scale(1);} 100% { opacity:0; transform:translate(-50%, -38px) scale(.95);} }


.hero-row.opponent { border-color: rgba(226,125,125,0.10); }
.hero-row.me { border-color: rgba(118,161,208,0.12); }
.hand-title span { color:#d2d8de; font-weight:600; }
.board-row .empty-slot {
  min-width: 240px;
  text-align:center;
  padding: 20px 26px;
  border-radius: 18px;
  background: rgba(255,255,255,0.015);
}
.preview-panel, .log-panel {
  backdrop-filter: blur(6px);
}
.log-panel { padding-right: 10px; }
#gameLog { padding-right: 4px; }
.topbar, .arena, .hand-wrap, .preview-panel, .log-panel { position: relative; }

@media (max-width: 1500px) {
  body, #game { overflow:auto; }
  .game-shell { height:auto; min-height: calc(100vh - 70px); grid-template-columns: 1fr; }
  .side-column { grid-template-rows: minmax(320px, 1fr); }
  .main-column { grid-template-rows: minmax(500px, 1fr) minmax(210px, 28vh) auto; }
}
@media (max-width: 1100px) {
  :root { --shell-max: calc(100vw - 10px); }
  body, #game { overflow:auto; }
  .topbar { width: calc(100vw - 10px); padding: 10px 12px; }
  .game-shell { width: calc(100vw - 10px); gap: 10px; height:auto; }
  .hero-row { grid-template-columns: 1fr; justify-items:center; text-align:center; min-height: auto; }
  .hero-side, .hero-side.right { justify-content:center; }
  .board-row { justify-content:flex-start; min-height: 96px; }
  .controls { flex-direction:column; align-items:stretch; }
  .control-buttons { justify-content:flex-end; }
  .hand { justify-content:flex-start; min-height: 170px; }
  .hand .card { margin-left:0; }
  .arena { grid-template-rows: auto minmax(88px, 1fr) auto minmax(88px,1fr) auto; }
}
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar-right { width:100%; justify-content:space-between; }
  .hand-topline, .middle-line { flex-direction:column; align-items:flex-start; gap:8px; }
  .card { width: 116px; min-height: 166px; }
  .hand .card { width: 124px; min-height: 176px; }
  .hero-avatar { width: 112px; height: 112px; }
  .hero-drop-text { min-width: 116px; font-size:10px; }
}


.card[data-cardkey="arthur"] .card-art, .card[data-cardkey="lancelot_hero"] .card-art { filter: brightness(1.06); }
.card .art-glyph { position:relative; z-index:2; }
.card-art::before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.16), transparent 25%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}


.lobby-card.large { width:min(760px,100%); }
.hero-selector {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}
.hero-choice {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(240,210,138,.18);
  background: linear-gradient(180deg, rgba(23,28,34,.98), rgba(15,18,23,.98));
  display:grid;
  justify-items:center;
  text-align:center;
  gap: 6px;
}
.hero-choice.selected {
  border-color: rgba(240,210,138,.65);
  box-shadow: 0 0 0 2px rgba(240,210,138,.18), 0 16px 28px rgba(0,0,0,.26);
}
.hero-choice-art {
  width: 86px; height: 86px; border-radius: 50%; position: relative;
  display:grid; place-items:center;
  font-family: Georgia, serif; font-size: 36px; font-weight: 700; color: #fae5ae;
  border: 2px solid rgba(240,210,138,.45);
  box-shadow: inset 0 0 24px rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.25);
}
.hero-choice-art.arthur { background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.13), transparent 25%), linear-gradient(180deg, #6f5428, #232a34); }
.hero-choice-art.lancelot { background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.13), transparent 25%), linear-gradient(180deg, #767d89, #232a34); }
.hero-choice-name { font-weight: 800; font-size: 18px; color: var(--gold2); }
.hero-choice-title { font-size: 12px; color: #c9d1d8; }
.hero-choice-power { font-size: 12px; color: #95a1ad; line-height: 1.35; }

.hero-avatar.waiting {
  background: linear-gradient(180deg, rgba(43,50,60,.95), rgba(16,20,25,.98));
}
.hero-avatar.waiting .hero-letter { opacity: .8; }
.hero-portrait .portrait-backglow {
  position:absolute; inset:6px 10px 16px; border-radius:50%;
  background: radial-gradient(circle at center, rgba(240,210,138,.18), transparent 62%);
  filter: blur(8px);
}
.hero-portrait .portrait-cape {
  position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  width:74px; height:28px; border-radius:30px 30px 14px 14px;
  background: linear-gradient(180deg, rgba(104,17,17,.92), rgba(45,10,10,.95));
  opacity:.9;
}
.hero-portrait .portrait-eyes {
  position:absolute; left:50%; bottom:61px; transform:translateX(-50%);
  width:18px; height:3px; border-radius:99px;
  background: rgba(51,34,20,.75);
  box-shadow: -12px 0 0 rgba(51,34,20,.75), 12px 0 0 rgba(51,34,20,.75);
}
.hero-portrait.lancelot .portrait-cape { background: linear-gradient(180deg, rgba(202,202,210,.94), rgba(94,100,112,.95)); }
.hero-portrait.lancelot .portrait-eyes { background: rgba(40,40,48,.78); box-shadow: -12px 0 0 rgba(40,40,48,.78), 12px 0 0 rgba(40,40,48,.78); }
.hero-avatar::after {
  content:"";
  position:absolute; inset:8px; border-radius:50%; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.attack-beam {
  position: fixed;
  height: 8px;
  z-index: 1200;
  pointer-events: none;
  transform-origin: left center;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,239,189,.08), rgba(255,224,128,.96), rgba(255,239,189,.08));
  box-shadow: 0 0 12px rgba(255,214,105,.55), 0 0 24px rgba(255,214,105,.35);
  animation: beamFlash .42s ease-out forwards;
}
.attack-spark {
  position: fixed;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -11px;
  border-radius: 50%;
  z-index: 1201;
  pointer-events: none;
  background: radial-gradient(circle at center, #fff3bf 0 18%, #ffc64d 19% 45%, rgba(255,198,77,0) 70%);
  box-shadow: 0 0 22px rgba(255,198,77,.45);
  animation: sparkBoom .46s ease-out forwards;
}
.summon-pop {
  animation: summonPop .58s cubic-bezier(.2,.9,.22,1.1);
}
.location-card {
  box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.card.summon-pop::after {
  content:"";
  position:absolute; inset:-4px; border-radius:22px;
  border:2px solid rgba(240,210,138,.45);
  animation: summonHalo .58s ease-out forwards;
}
@keyframes summonPop {
  0% { transform: translateY(24px) scale(.82); opacity:0; filter:brightness(1.35); }
  75% { transform: translateY(-4px) scale(1.02); opacity:1; }
  100% { transform: translateY(0) scale(1); opacity:1; }
}
@keyframes summonHalo {
  0% { opacity:.85; transform:scale(.92); }
  100% { opacity:0; transform:scale(1.06); }
}
@keyframes beamFlash {
  0% { opacity: 0; }
  22% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes sparkBoom {
  0% { opacity:0; transform:scale(.3); }
  25% { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1.6); }
}

@media (max-width: 900px) {
  .hero-selector { grid-template-columns: 1fr; }
}


.lobby-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.overlay-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(5,7,11,.82);
  display:grid;
  place-items:center;
  padding: 18px;
  backdrop-filter: blur(8px);
}
.overlay-modal.hidden { display:none; }
.overlay-card {
  width:min(1180px, 96vw);
  max-height: 90vh;
  overflow:auto;
  border-radius: 24px;
  border: 1px solid rgba(240,210,138,.20);
  background:
    linear-gradient(180deg, rgba(53,40,22,.18), rgba(0,0,0,0) 14%),
    linear-gradient(180deg, rgba(17,21,26,.98), rgba(10,13,17,.99));
  box-shadow: 0 28px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  padding: 18px;
}
.overlay-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom: 14px;
}
.overlay-head h3 {
  margin:0;
  font-size:22px;
  color: var(--gold2);
  font-family: Georgia, serif;
}
.collection-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.collection-item {
  position:relative;
  padding-top: 8px;
}
.collection-count {
  position:absolute;
  right:10px;
  top:0;
  z-index:2;
  min-width:34px;
  height:34px;
  padding:0 8px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:900;
  color:#161006;
  background:linear-gradient(180deg,#f0d28a,#c99837);
  border:1px solid #f7e5bb;
  box-shadow:0 10px 18px rgba(0,0,0,.25);
}
.collection-item .card {
  width: 100%;
  min-height: 238px;
}
.mulligan-card { width:min(1280px, 98vw); }
.mulligan-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.mulligan-pick {
  border-radius: 20px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.05);
  transition: .18s transform, .18s box-shadow, .18s border-color;
}
.mulligan-pick:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 24px rgba(0,0,0,.24);
}
.mulligan-pick.picked {
  border-color: rgba(226,125,125,.72);
  box-shadow: 0 0 0 2px rgba(226,125,125,.18), 0 16px 28px rgba(0,0,0,.32);
  background: linear-gradient(180deg, rgba(80,24,24,.25), rgba(0,0,0,0));
}
.mulligan-pick .card {
  width:100%;
  min-height: 248px;
}
.mulligan-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;overflow:visible}
.mulligan-pick{position:relative;padding:8px;z-index:1}
.mulligan-pick:hover{z-index:20;transform:translateY(-10px) scale(1.08);box-shadow:0 22px 36px rgba(0,0,0,.42)}
.mulligan-pick .card.full-art-card{width:100%;min-height:330px;aspect-ratio:2/3}
.mulligan-pick .card.full-art-card .full-card-face{font-size:1.08em}
@media(max-width:700px){.mulligan-grid{grid-template-columns:repeat(2,minmax(145px,1fr));gap:12px}.mulligan-pick .card.full-art-card{min-height:255px}.mulligan-pick:hover{transform:translateY(-6px) scale(1.06)}}
.mulligan-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.mulligan-waiting {
  min-height: 180px;
  display:grid;
  place-items:center;
  color:#b7c0c9;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.02);
}
.hero-avatar.impact,
.card.impact { animation: impact .35s ease; }
.hero-avatar.death-flash,
.card.death-flash { animation: deathFlash .72s ease; }
.card.attack-target,
.hero-drop-zone.attackable .hero-avatar {
  box-shadow: 0 0 0 2px rgba(240,210,138,.22), 0 0 24px rgba(240,210,138,.18), 0 16px 26px rgba(0,0,0,.34);
}
.drag-source {
  opacity: .68;
  filter: brightness(1.12);
}
.card:hover {
  box-shadow: 0 18px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.04);
}
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 20%),
    linear-gradient(180deg, rgba(17,21,26,.98), rgba(9,12,16,1));
}
.card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 20%);
  mix-blend-mode: screen;
}
.card-legendary, .card.legendary { box-shadow: 0 0 0 1px rgba(240,210,138,.14), 0 16px 28px rgba(0,0,0,.28), 0 0 28px rgba(240,210,138,.09); }
.hero-row {
  backdrop-filter: blur(8px);
}
.topbar {
  background:
    linear-gradient(180deg, rgba(53,40,22,.18), rgba(0,0,0,0) 20%),
    linear-gradient(180deg, rgba(18,23,29,.97), rgba(10,13,17,.99));
}
.hand-wrap {
  background:
    linear-gradient(180deg, rgba(53,40,22,.18), rgba(0,0,0,0) 14%),
    linear-gradient(180deg, rgba(17,21,26,.97), rgba(10,13,17,.99));
}
@keyframes deathFlash {
  0% { filter: brightness(1); transform: scale(1); }
  24% { filter: brightness(1.55) saturate(1.2); transform: scale(1.05); }
  70% { filter: brightness(.4) saturate(.65); transform: scale(.95); opacity:.35; }
  100% { filter: brightness(1); transform: scale(1); opacity:1; }
}
@media (max-width: 900px) {
  .collection-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mulligan-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}


button.secondary { background: linear-gradient(180deg, #96b4d6, #54779c); color:#0d1622; border-color:#b8d0e8; }
.muted { color:#9aa4ae; }
.deckbuilder-card { width:min(1440px, 98vw); }
.deckbuilder-layout {
  display:grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap:18px;
}
.deckbuilder-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom: 14px;
  flex-wrap:wrap;
}
.deck-summary {
  font-weight:800;
  color:#f0d28a;
}
.deckbuilder-actions-inline { display:flex; gap:10px; flex-wrap:wrap; }
.deckbuilder-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap:14px;
  overflow:visible;
}
.deckbuilder-entry {
  border:1px solid rgba(240,210,138,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,0));
  border-radius:18px;
  padding:10px;
}
.deckbuilder-entry-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.deckbuilder-entry-title { font-weight:800; color:#e8edf1; }
.deckbuilder-entry-cost {
  min-width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#17120a;
  background:linear-gradient(180deg,#f0d28a,#b58533);
}
.deckbuilder-entry .collection-item .card { min-height: 225px; }
.deckbuilder-entry{position:relative;z-index:1;transition:z-index 0s .18s,transform .18s ease,box-shadow .18s ease}
.deckbuilder-entry:hover{z-index:30;transform:translateY(-4px);box-shadow:0 18px 30px rgba(0,0,0,.28)}
.deckbuilder-entry .collection-item{z-index:1}
.deckbuilder-entry .collection-item .card{position:relative;transform-origin:center top;transition:transform .2s ease,box-shadow .2s ease;will-change:transform}
.deckbuilder-entry:hover .collection-item .card{transform:scale(1.08);z-index:40;box-shadow:0 14px 24px rgba(0,0,0,.4),0 0 0 2px rgba(118,210,240,.35)}
.deckbuilder-entry:hover .collection-count{z-index:45}
@media(max-width:900px){.deckbuilder-entry:hover .collection-item .card{transform:scale(1.16)}}
.deckbuilder-entry-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top: 8px;
}
.deck-count-pill {
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#d6dde4;
  font-size:12px;
  font-weight:700;
}
.decklist-panel {
  border:1px solid rgba(240,210,138,.14);
  background:linear-gradient(180deg, rgba(17,21,26,.97), rgba(10,13,17,.99));
  border-radius:18px;
  padding:14px;
  min-height: 400px;
}
.decklist-panel h4 {
  margin:0 0 12px;
  color:#f0d28a;
  font-size:18px;
  font-family:Georgia,serif;
}
.deck-list { display:grid; gap:8px; max-height: 72vh; overflow:auto; }
.deck-line {
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-bottom:8px;
  font-size:13px;
  color:#dbe1e6;
}
.deck-line small { color:#95a0aa; }
@media (max-width: 1100px) {
  .deckbuilder-layout { grid-template-columns: 1fr; }
  .decklist-panel { order:-1; min-height: auto; }
}

.deck-io-panel {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}
.deck-io-panel label {
  color: #f0d28a;
  font-weight: 700;
  font-size: 13px;
}
.deck-io-text {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(5,8,12,.8);
  color: #dfe5eb;
  font: inherit;
}
.deck-io-help { color:#96a0aa; font-size:12px; line-height:1.35; }

.history-card { width:min(980px, 96vw); }
.history-layout { display:grid; gap:16px; }
.history-stats-grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
.history-stat {
  border:1px solid rgba(240,210,138,.14);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  display:grid;
  gap:8px;
}
.history-stat span { color:#9ca6b0; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.history-stat strong { color:#f0d28a; font-size:28px; }
.history-list { display:grid; gap:12px; max-height:60vh; overflow:auto; }
.history-entry {
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.history-entry.victory { border-color: rgba(118,186,143,.28); box-shadow: inset 0 0 0 1px rgba(118,186,143,.08); }
.history-entry.defeat { border-color: rgba(225,148,114,.28); box-shadow: inset 0 0 0 1px rgba(225,148,114,.08); }
.history-entry-top, .history-entry-foot { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.history-entry-top strong { font-size:18px; }
.history-entry-top span, .history-entry-foot { color:#95a0aa; font-size:12px; }
.history-entry-body { color:#d9e0e6; line-height:1.45; margin:7px 0; }

.spell-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  opacity: 0;
  animation: spellFlash .58s ease forwards;
}
.spell-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.18), transparent 46%);
}
.spell-burst {
  position:absolute;
  left:50%; top:50%;
  width:min(52vw, 740px); height:min(52vw, 740px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.26);
  box-shadow:0 0 40px rgba(255,255,255,.12), inset 0 0 60px rgba(255,255,255,.05);
  animation: spellRing .58s ease forwards;
}
.spell-burst.secondary { width:min(36vw, 420px); height:min(36vw, 420px); animation-delay: .05s; }
.spell-overlay.arcane .spell-burst { border-color: rgba(171,111,230,.55); box-shadow:0 0 45px rgba(138,91,229,.25), inset 0 0 60px rgba(138,91,229,.08); }
.spell-overlay.holy .spell-burst { border-color: rgba(240,210,138,.68); box-shadow:0 0 50px rgba(240,210,138,.22), inset 0 0 60px rgba(240,210,138,.08); }
.spell-overlay.fire .spell-burst { border-color: rgba(225,148,114,.68); box-shadow:0 0 50px rgba(225,148,114,.24), inset 0 0 60px rgba(225,148,114,.08); }
.spell-overlay.royal .spell-burst { border-color: rgba(240,210,138,.62); box-shadow:0 0 60px rgba(240,210,138,.20), inset 0 0 60px rgba(119,172,232,.08); }
.spell-overlay.steel .spell-burst { border-color: rgba(163,189,216,.62); box-shadow:0 0 55px rgba(163,189,216,.18), inset 0 0 60px rgba(163,189,216,.08); }
@keyframes spellFlash { 0%{opacity:0} 15%{opacity:1} 100%{opacity:0} }
@keyframes spellRing { 0%{transform:translate(-50%,-50%) scale(.55); opacity:.9} 100%{transform:translate(-50%,-50%) scale(1.08); opacity:0} }

.card-art {
  position: relative;
}
.mini-portrait, .action-emblem {
  position:absolute;
  inset:0;
  border-radius:10px;
  overflow:hidden;
}
.mini-portrait .mini-backglow,
.mini-portrait .mini-shoulders,
.mini-portrait .mini-cape,
.mini-portrait .mini-neck,
.mini-portrait .mini-face,
.mini-portrait .mini-hair,
.mini-portrait .mini-crown,
.mini-portrait .mini-accent,
.mini-portrait .mini-symbol {
  position:absolute;
}
.mini-portrait .mini-backglow {
  inset:0;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.22), transparent 28%), radial-gradient(circle at 50% 130%, rgba(0,0,0,.45), transparent 50%);
}
.mini-portrait .mini-shoulders {
  width:86%; height:52%; left:7%; bottom:-4%; border-radius:46% 46% 18% 18% / 60% 60% 18% 18%;
  background: linear-gradient(180deg, rgba(30,36,44,.95), rgba(10,12,17,.96));
}
.mini-portrait .mini-cape {
  width:96%; height:42%; left:2%; bottom:0; border-radius:50% 50% 8% 8%;
  background: linear-gradient(180deg, rgba(69,35,18,.46), rgba(8,9,12,0));
}
.mini-portrait .mini-neck { width:17%; height:15%; left:41.5%; top:47%; background:#d5b184; border-radius:40% 40% 50% 50%; }
.mini-portrait .mini-face { width:30%; height:34%; left:35%; top:18%; background:linear-gradient(180deg,#efd2ad,#cc9f73); border-radius:42% 42% 48% 48%; box-shadow: inset 0 -6px 12px rgba(0,0,0,.12); }
.mini-portrait .mini-hair { width:38%; height:20%; left:31%; top:15%; background:linear-gradient(180deg,#4f3722,#29190f); border-radius:46% 46% 22% 22%; box-shadow:0 4px 8px rgba(0,0,0,.15); }
.mini-portrait .mini-crown { display:none; }
.mini-portrait .mini-accent { width:56%; height:46%; right:-10%; top:14%; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.1), transparent 58%); }
.mini-portrait .mini-symbol { right:8px; bottom:6px; font-family:Georgia,serif; font-size:28px; color:rgba(255,235,192,.92); text-shadow:0 2px 10px rgba(0,0,0,.4); }
.mini-portrait.arthur .mini-crown,
.mini-portrait.perceval .mini-crown,
.mini-portrait.gauvain .mini-crown { display:block; left:40%; top:9%; width:20%; height:12%; background:linear-gradient(180deg,#f7dc8c,#b4842c); clip-path:polygon(0 100%, 8% 35%, 24% 65%, 40% 20%, 56% 65%, 72% 28%, 88% 65%, 100% 100%); }
.mini-portrait.lancelot .mini-hair,
.mini-portrait.lancelot_hero .mini-hair,
.mini-portrait.leodagan .mini-hair { background:linear-gradient(180deg,#7d725d,#40392f); }
.mini-portrait.merlin .mini-hair { height:24%; background:linear-gradient(180deg,#d8d1cc,#6f6966); }
.mini-portrait.karadoc .mini-face { width:34%; left:33%; }
.mini-portrait.karadoc .mini-shoulders { width:92%; left:4%; }
.mini-portrait.bohort .mini-accent { background: radial-gradient(circle, rgba(113,156,207,.28), transparent 58%); }
.mini-portrait.leodagan .mini-accent { background: radial-gradient(circle, rgba(177,83,83,.26), transparent 58%); }
.mini-portrait.merlin .mini-accent { background: radial-gradient(circle, rgba(146,102,196,.30), transparent 58%); }
.mini-portrait.gauvain .mini-accent, .mini-portrait.yvain .mini-accent { background: radial-gradient(circle, rgba(136,173,73,.28), transparent 58%); }
.action-emblem { display:grid; place-items:center; }
.action-ring {
  position:absolute; inset:12% 18%; border-radius:50%; border:2px solid rgba(255,240,206,.22);
  box-shadow: inset 0 0 28px rgba(255,255,255,.06), 0 0 24px rgba(0,0,0,.14);
}
.action-core {
  position:relative; z-index:2; width:54%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  font-family:Georgia,serif; font-size:34px; color:#ffe3b8; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(255,255,255,.02) 45%, rgba(0,0,0,.3) 100%);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.action-runes {
  position:absolute; inset:0;
  background: radial-gradient(circle at 28% 26%, rgba(255,255,255,.10), transparent 18%), radial-gradient(circle at 74% 64%, rgba(255,255,255,.08), transparent 18%);
}
.attack-beam {
  position: fixed;
  height: 8px;
  border-radius: 999px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255,236,182,.9), rgba(255,178,69,.75), rgba(255,103,52,.25));
  box-shadow: 0 0 18px rgba(255,185,74,.55);
  z-index: 88;
  pointer-events:none;
  animation: beamFade .4s ease forwards;
}
.attack-spark {
  position: fixed;
  width: 26px; height: 26px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,248,211,.92), rgba(255,171,78,.66), transparent 68%);
  box-shadow: 0 0 24px rgba(255,186,92,.55);
  z-index: 89; pointer-events:none;
  animation: sparkFade .45s ease forwards;
}
@keyframes beamFade { from{opacity:0; filter:brightness(1.4)} 20%{opacity:1} to{opacity:0; filter:brightness(.9)} }
@keyframes sparkFade { from{opacity:0; transform:translate(-50%, -50%) scale(.45)} 30%{opacity:1} to{opacity:0; transform:translate(-50%, -50%) scale(1.35)} }

@media (max-width: 900px) {
  .history-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .history-stats-grid { grid-template-columns: 1fr; }
}

/* ===== V18.2 — board layout fix + autonomous bot clarity ===== */
.arena > .table-crown,
.arena > .table-crest,
.arena > .board-glow {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.arena > .hero-row,
.arena > .board-row,
.arena > .middle-line {
  position: relative !important;
  z-index: 2 !important;
}
.arena {
  grid-template-rows: 94px minmax(108px, 1fr) 50px minmax(108px, 1fr) 94px !important;
  gap: 4px !important;
  padding: 8px 14px !important;
}
.hero-row {
  min-height: 94px !important;
  grid-template-columns: minmax(220px, 1fr) 132px minmax(220px, 1fr) !important;
  padding: 6px 12px !important;
  gap: 12px !important;
  border-radius: 18px !important;
  overflow: visible;
}
.hero-center { gap: 0 !important; }
.hero-drop-zone { padding: 0 !important; gap: 0 !important; }
.hero-avatar {
  width: 82px !important;
  height: 82px !important;
  overflow: visible !important;
}
.hero-portrait {
  transform: scale(.62);
  transform-origin: center center;
  margin-top: -6px !important;
}
.hero-avatar .hero-label {
  bottom: 6px !important;
  font-size: 9px !important;
}
.hero-avatar .hero-prestige,
.hero-avatar .hero-quest {
  min-width: 30px !important;
  height: 30px !important;
  font-size: 12px !important;
}
.hero-avatar .hero-prestige { top: -4px !important; right: -6px !important; }
.hero-avatar .hero-quest { top: -4px !important; left: -6px !important; }
.hero-side {
  flex-wrap: nowrap !important;
  gap: 7px !important;
  min-width: 0;
}
.hero-side.left { justify-content: flex-start; }
.hero-side.right { justify-content: flex-end; }
.hero-name-wrap { min-width: 0; margin-right: 4px; }
.hero-name {
  font-size: clamp(14px, .92vw, 18px) !important;
  white-space: nowrap;
}
.hero-title {
  font-size: 10px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}
.hero-chip {
  padding: 5px 8px !important;
  font-size: clamp(10px, .66vw, 12px) !important;
  white-space: nowrap;
}
.hero-power-btn {
  padding: 6px 9px !important;
  font-size: 11px !important;
  white-space: nowrap;
}
.power-chip { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.power-chip .value { overflow: hidden; text-overflow: ellipsis; }
.bot-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  margin-left: 5px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .08em;
  color: #0a1510;
  background: linear-gradient(180deg, #8bd3aa, #4e9d73);
  vertical-align: middle;
}
.hero-chip.bot-online {
  border-color: rgba(104, 203, 147, .35) !important;
  background: linear-gradient(180deg, rgba(35,72,52,.9), rgba(18,39,28,.92)) !important;
}
.hero-chip.bot-online .value { color: #8bd3aa !important; }
.board-row {
  min-height: 108px !important;
  padding: 5px 8px !important;
  overflow-x: auto;
  overflow-y: hidden !important;
}
.board-row .card {
  width: clamp(112px, 5.8vw, 140px) !important;
  min-height: clamp(164px, 9.1vw, 205px) !important;
  transform: scale(.84);
  transform-origin: center center;
  margin-inline: -6px;
}
.board-row .card:hover,
.board-row .card.selected { transform: scale(.88) translateY(-3px) !important; }
.middle-line {
  min-height: 50px !important;
  padding: 0 !important;
}
.location-card {
  padding: 5px 10px !important;
  font-size: 11px !important;
}
.status-line { font-size: 11px !important; }
.hero-hit-number {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translate(-50%, -50%);
  z-index: 20;
  color: #fff1d0;
  font-size: 25px;
  font-weight: 900;
  text-shadow: 0 2px 6px #000, 0 0 14px rgba(226,125,125,.8);
  animation: heroHitFloat .8s ease forwards;
}
@keyframes heroHitFloat {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(.7); }
  20% { opacity: 1; transform: translate(-50%, -4px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -30px) scale(.95); }
}
@media (max-width: 1500px) {
  .hero-row {
    grid-template-columns: minmax(180px,1fr) 112px minmax(180px,1fr) !important;
  }
  .hero-chip.power-chip { display:none; }
}
@media (max-width: 1100px) {
  .arena { grid-template-rows: auto minmax(88px, 1fr) 46px minmax(88px,1fr) auto !important; }
  .hero-row { grid-template-columns: 1fr 100px 1fr !important; text-align:left !important; }
  .hero-side, .hero-side.right { justify-content:flex-start !important; flex-wrap:wrap !important; }
  .hero-avatar { width:72px !important; height:72px !important; }
}

/* V18.3 — combat lisible et attaques IA visibles */
.action-banner {
  position: fixed;
  left: 50%;
  top: 78px;
  transform: translate(-50%, -18px) scale(.98);
  z-index: 1300;
  max-width: min(760px, calc(100vw - 36px));
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(240,210,138,.28);
  background: linear-gradient(180deg, rgba(27,33,41,.97), rgba(12,16,21,.97));
  color: #f3e7c7;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  transition: .16s opacity, .16s transform;
}
.action-banner.ai {
  border-color: rgba(118,161,208,.48);
  box-shadow: 0 12px 30px rgba(0,0,0,.34), 0 0 22px rgba(118,161,208,.10), inset 0 1px 0 rgba(255,255,255,.05);
}
.action-banner.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
#opponentPlayedCard{position:fixed;right:clamp(12px,2.2vw,42px);bottom:clamp(12px,2.2vh,32px);z-index:1400;display:block;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s ease}
#opponentPlayedCard.show{opacity:1;visibility:visible}
.played-card-stage{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:min(220px,22vw);transform:translateY(10px) scale(.88);animation:playedCardIn .28s cubic-bezier(.2,.8,.2,1) forwards}
.played-card-kicker{padding:7px 16px;border:1px solid rgba(130,203,241,.52);border-radius:999px;background:rgba(4,12,18,.94);color:#e9f9ff;font:800 14px/1 Georgia,serif;box-shadow:0 7px 22px rgba(0,0,0,.5),0 0 20px rgba(63,181,240,.18)}
.played-card-art{width:min(164px,16vw);aspect-ratio:2/3;filter:drop-shadow(0 14px 22px rgba(0,0,0,.72))}
.played-card-art .card{width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:2/3!important;transform:none!important;margin:0!important}
.played-card-effect{width:min(210px,22vw);padding:7px 9px;display:flex;flex-direction:column;gap:3px;border:1px solid rgba(241,210,137,.46);border-radius:9px;background:linear-gradient(180deg,rgba(22,29,33,.97),rgba(5,10,13,.98));color:#f7f0dc;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.08);font:11px/1.25 'Segoe UI',sans-serif}
.played-card-effect strong{color:#f3d27f;font:700 13px/1 Georgia,serif;text-transform:uppercase;letter-spacing:.12em}
@keyframes playedCardIn{to{transform:translateY(0) scale(1)}}
@media(max-width:700px){#opponentPlayedCard{right:8px;bottom:8px}.played-card-stage{max-width:128px}.played-card-art{width:90px}.played-card-effect{font-size:9px;width:128px}}
.combat-number {
  position: absolute;
  left: 50%;
  z-index: 20;
  min-width: 38px;
  height: 34px;
  padding: 0 9px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  pointer-events: none;
  transform: translateX(-50%);
  animation: combatNumberUp .88s ease forwards;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}
.combat-number.dealt {
  top: -16px;
  color: #241306;
  background: linear-gradient(180deg,#ffe8a3,#d9922d);
  border: 1px solid #fff0bd;
}
.combat-number.received {
  top: 22%;
  color: #fff0ee;
  background: linear-gradient(180deg,#d85f58,#8f2929);
  border: 1px solid #efaaa5;
}
.card.combat-source,
.hero-avatar.combat-source {
  border-color: #f0d28a !important;
  box-shadow: 0 0 0 3px rgba(240,210,138,.20), 0 0 26px rgba(240,210,138,.22), 0 16px 30px rgba(0,0,0,.34) !important;
  filter: brightness(1.12);
}
@keyframes combatNumberUp {
  0% { opacity:0; transform:translate(-50%, 12px) scale(.72); }
  18% { opacity:1; transform:translate(-50%, 0) scale(1.05); }
  72% { opacity:1; transform:translate(-50%, -14px) scale(1); }
  100% { opacity:0; transform:translate(-50%, -30px) scale(.95); }
}

/* ===== V19 — PROTOCOLE NÉANT theme overrides ===== */
:root {
  --text: #edf1f4;
  --muted: #93a2af;
  --gold: #6dd1c1;
  --gold2: #bff9ef;
  --red: #f08d8d;
  --green: #7fe0ae;
  --blue: #7ebeff;
}
body {
  background:
    radial-gradient(circle at 50% 12%, rgba(90, 217, 198, 0.13), transparent 26%),
    radial-gradient(circle at 50% 88%, rgba(126, 190, 255, 0.10), transparent 34%),
    linear-gradient(180deg, #1b2630 0%, #0c1219 26%, #06090d 100%);
}
body::before {
  background:
    radial-gradient(circle at center, transparent 0 50%, rgba(0,0,0,0.34) 100%),
    linear-gradient(90deg, rgba(32,116,111,.09), transparent 18%, transparent 82%, rgba(60,112,167,.08));
}
.crest {
  border-color: rgba(127,224,174,.55);
  color: var(--gold2);
  box-shadow: 0 0 36px rgba(86,191,178,.22), inset 0 0 26px rgba(127,224,174,.08);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), rgba(0,0,0,0) 40%), linear-gradient(180deg, rgba(24,39,49,.96), rgba(9,18,24,.96));
}
.topbar, .hero-row, .preview-panel, .log-panel, .hand-wrap, .controls, .lobby-card {
  border-color: rgba(127,224,174,.16);
}
button.primary {
  background: linear-gradient(180deg, #77e0c9, #2c8578);
  color: #061114;
  border-color: rgba(191,249,239,.75);
}
button.secondary {
  background: linear-gradient(180deg, #88b4dd, #406786);
  color: #071117;
  border-color: rgba(180,220,255,.65);
}
.arena {
  background:
    radial-gradient(circle at 50% 48%, rgba(92,216,189,0.07), transparent 23%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.36), transparent 64%),
    linear-gradient(180deg, rgba(32,79,84,0.16), rgba(17,21,26,0.0) 20%),
    linear-gradient(180deg, rgba(15,23,31,0.98), rgba(7,11,15,0.99));
}
.arena::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(127,224,174,0.06) 28.5%, transparent 29.5%),
    radial-gradient(circle at 50% 50%, transparent 0 41%, rgba(126,190,255,0.05) 41.5%, transparent 42.5%),
    linear-gradient(180deg, transparent 49.65%, rgba(191,249,239,0.07) 50%, transparent 50.35%);
}
.board-glow.top { background: radial-gradient(ellipse at center, rgba(120, 230, 180, .20), transparent 70%); }
.board-glow.bottom { background: radial-gradient(ellipse at center, rgba(80, 154, 236, .20), transparent 70%); }
.location-card {
  border-color: rgba(127,224,174,.32);
  background: linear-gradient(180deg, rgba(42,71,73,.94), rgba(18,35,39,.95));
  color: var(--gold2);
}
.turn-badge.mine { border-color: rgba(127,224,174,.45); box-shadow: 0 0 18px rgba(91,214,192,.18); }
.hero-chip.quest { border-color: rgba(127,224,174,.26); }
.hero-chip.quest .value { color: var(--green); }
.hero-chip.prestige { border-color: rgba(126,190,255,.24); }
.hero-chip.prestige .value { color: #9fccff; }
.hero-choice-art.captain-hale {
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.13), transparent 25%), linear-gradient(180deg, #2f6771, #18252f);
}
.hero-choice-art.unit-s9 {
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.13), transparent 25%), linear-gradient(180deg, #617a9c, #1a2430);
}
.hero-portrait.captain-hale .portrait-hair {
  background: linear-gradient(180deg, #4b3424, #23140d);
}
.hero-portrait.captain-hale .portrait-crown {
  display:block;
  left:42%; top:11%; width:16%; height:10%;
  background: linear-gradient(180deg,#8ce1cf,#3e978a);
  clip-path: polygon(0 100%, 10% 38%, 28% 70%, 46% 18%, 64% 68%, 82% 34%, 100% 100%);
}
.hero-portrait.captain-hale .portrait-accent {
  background: radial-gradient(circle, rgba(98,218,193,.28), transparent 60%);
}
.hero-portrait.unit-s9 .portrait-hair {
  background: linear-gradient(180deg, #d8e0e7, #8b98a6);
  border-radius: 18px 18px 10px 10px;
}
.hero-portrait.unit-s9 .portrait-crown {
  display:block;
  left:34%; top:28%; width:32%; height:12%;
  background: linear-gradient(180deg,#18222e,#090f14);
  border-radius: 999px;
}
.hero-portrait.unit-s9 .portrait-accent {
  background: radial-gradient(circle, rgba(126,190,255,.28), transparent 60%);
}
.hero-portrait.unit-s9 .portrait-eyes {
  background: rgba(88, 216, 255, .85);
  box-shadow: -12px 0 0 rgba(88,216,255,.85), 12px 0 0 rgba(88,216,255,.85);
}
.card[data-cardkey="captain_hale"] .card-art, .card[data-cardkey="unit_s9"] .card-art { filter: brightness(1.06); }
.mini-portrait.voidrunner .mini-accent { background: radial-gradient(circle, rgba(82,168,221,.26), transparent 58%); }
.mini-portrait.hauler .mini-face { width: 34%; left: 33%; }
.mini-portrait.hauler .mini-shoulders { width: 92%; left: 4%; }
.mini-portrait.shocktrooper .mini-accent { background: radial-gradient(circle, rgba(196,88,88,.28), transparent 58%); }
.mini-portrait.bulwark .mini-accent { background: radial-gradient(circle, rgba(104,199,199,.28), transparent 58%); }
.mini-portrait.synth7 .mini-hair {
  height: 22%;
  background: linear-gradient(180deg, #dfe5ea, #7b8794);
  border-radius: 16px 16px 10px 10px;
}
.mini-portrait.synth7 .mini-crown {
  display:block; left:36%; top:28%; width:28%; height:10%; background: linear-gradient(180deg,#16212c,#0b1016); border-radius:999px;
  clip-path:none;
}
.mini-portrait.synth7 .mini-accent { background: radial-gradient(circle, rgba(132,192,255,.28), transparent 58%); }
.mini-portrait.voidstalker .mini-hair { background: linear-gradient(180deg, #8d61a6, #3f284c); }
.mini-portrait.voidstalker .mini-accent { background: radial-gradient(circle, rgba(171,111,230,.30), transparent 58%); }
.mini-portrait.nyx .mini-accent { background: radial-gradient(circle, rgba(71,187,166,.28), transparent 58%); }
.mini-portrait.khepri .mini-accent { background: radial-gradient(circle, rgba(145,196,91,.30), transparent 58%); }
.action-emblem .action-core { color:#dffef8; }
.action-emblem .action-ring { border-color: rgba(191,249,239,.26); }
.attack-beam {
  background: linear-gradient(90deg, rgba(194,255,247,.95), rgba(99,237,201,.82), rgba(91,148,255,.25));
  box-shadow: 0 0 18px rgba(99,237,201,.46);
}
.attack-spark {
  background: radial-gradient(circle, rgba(240,255,251,.95), rgba(90,237,197,.68), transparent 68%);
  box-shadow: 0 0 24px rgba(92,229,192,.45);
}


/* ===== V20 — plateau illustré vaisseau abandonné ===== */
.arena {
  background:
    linear-gradient(180deg, rgba(5,10,14,.44), rgba(5,10,14,.62)),
    radial-gradient(circle at 50% 48%, rgba(91,216,189,.08), transparent 35%),
    url('/static/assets/plateau_vaisseau_abandonne.png') center center / cover no-repeat;
  border-color: rgba(126,190,255,.18);
  box-shadow:
    0 24px 54px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 -120px 160px rgba(0,0,0,.28),
    inset 0 100px 150px rgba(0,0,0,.22);
}
.arena::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.02) 25%, rgba(0,0,0,.02) 75%, rgba(0,0,0,.16)),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 20%, transparent 80%, rgba(0,0,0,.18));
  opacity: 1;
}
.table-crown {
  opacity: .16;
  filter: drop-shadow(0 0 10px rgba(90,220,190,.22));
}
.table-crest {
  opacity: .14;
  color: #bff9ef;
  text-shadow: 0 0 28px rgba(90,220,190,.28);
}
.board-glow.top {
  background: radial-gradient(ellipse at center, rgba(122,229,194,.18), transparent 72%);
  mix-blend-mode: screen;
}
.board-glow.bottom {
  background: radial-gradient(ellipse at center, rgba(105,166,255,.15), transparent 72%);
  mix-blend-mode: screen;
}
.hero-row {
  background: linear-gradient(180deg, rgba(10,18,24,.80), rgba(6,11,16,.70));
  border-color: rgba(166,236,224,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.22);
}
.board-row .card {
  box-shadow: 0 16px 28px rgba(0,0,0,.42);
}
.middle-line {
  z-index: 4;
}
.location-card {
  background: linear-gradient(180deg, rgba(20,54,58,.94), rgba(8,25,30,.94));
  backdrop-filter: blur(8px);
}
.status-line {
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
}


/* ===== V21.1 overrides ===== */
.hero-selector-v211{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.hero-choice{display:flex;align-items:center;gap:12px;padding:12px;min-height:124px}.hero-choice-meta{display:grid;gap:4px}.hero-choice-art{width:86px;height:86px;border-radius:18px;overflow:hidden;flex:0 0 86px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}.hero-choice-art img{display:block;width:100%;height:100%;object-fit:cover}.hero-choice.human.selected{box-shadow:0 0 0 1px rgba(125,208,242,.55),0 0 26px rgba(125,208,242,.18)}.hero-choice.synthetic.selected{box-shadow:0 0 0 1px rgba(182,185,255,.55),0 0 26px rgba(182,185,255,.18)}.hero-choice.parasite.selected{box-shadow:0 0 0 1px rgba(139,224,131,.55),0 0 26px rgba(139,224,131,.18)}
.card-art-img{display:block;width:100%;height:100%;object-fit:cover}.hero-portrait-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.card-faction-badge{position:absolute;right:8px;top:34px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;background:rgba(10,14,18,.78);border:1px solid rgba(255,255,255,.08)}
.card.faction-human{border-color:rgba(125,208,242,.45)}.card.faction-synthetic{border-color:rgba(182,185,255,.45)}.card.faction-parasite{border-color:rgba(139,224,131,.45)}
.card-faction-badge.human,.hero-chip.hero-faction.human{background:rgba(70,151,185,.15);color:#d9f7ff;border:1px solid rgba(125,208,242,.28)}.card-faction-badge.synthetic,.hero-chip.hero-faction.synthetic{background:rgba(116,122,220,.14);color:#eff0ff;border:1px solid rgba(182,185,255,.28)}.card-faction-badge.parasite,.hero-chip.hero-faction.parasite{background:rgba(80,146,80,.14);color:#e4ffe1;border:1px solid rgba(139,224,131,.28)}
@media (max-width: 960px){.hero-selector-v211{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){.hero-selector-v211{grid-template-columns:1fr}}

/* ===== V21.2 — Combat FX + result screen ===== */
.damage-vignette{
  position:fixed;inset:0;z-index:96;pointer-events:none;opacity:0;
  background:radial-gradient(circle at center, transparent 35%, rgba(177,18,33,.20) 72%, rgba(119,0,17,.56) 100%);
  transition:opacity .08s ease;
}
.damage-vignette.show{opacity:1;animation:vignettePulse .42s ease forwards}
.damage-vignette.heavy.show{animation:vignettePulseHeavy .62s ease forwards}
@keyframes vignettePulse{0%{opacity:0}18%{opacity:.9}100%{opacity:0}}
@keyframes vignettePulseHeavy{0%{opacity:0}12%{opacity:1}42%{opacity:.75}100%{opacity:0}}

.impact-burst{position:fixed;width:16px;height:16px;transform:translate(-50%,-50%);z-index:97;pointer-events:none}
.impact-burst::before{content:'';position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.96),rgba(111,231,255,.74) 22%,rgba(255,96,96,.38) 50%,transparent 72%);animation:impactCore .62s ease-out forwards}
.impact-burst.heavy::before{inset:-34px;background:radial-gradient(circle,rgba(255,255,255,1),rgba(255,216,124,.82) 18%,rgba(255,82,82,.54) 42%,transparent 74%)}
.impact-burst i{position:absolute;left:50%;top:50%;width:4px;height:38px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(91,210,255,.46),transparent);transform-origin:50% 100%;animation:impactRay .7s ease-out forwards}
.impact-burst i:nth-child(1){transform:translate(-50%,-100%) rotate(0deg)}
.impact-burst i:nth-child(2){transform:translate(-50%,-100%) rotate(60deg)}
.impact-burst i:nth-child(3){transform:translate(-50%,-100%) rotate(120deg)}
.impact-burst i:nth-child(4){transform:translate(-50%,-100%) rotate(180deg)}
.impact-burst i:nth-child(5){transform:translate(-50%,-100%) rotate(240deg)}
.impact-burst i:nth-child(6){transform:translate(-50%,-100%) rotate(300deg)}
@keyframes impactCore{0%{opacity:0;transform:scale(.2)}22%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.65)}}
@keyframes impactRay{0%{opacity:0;height:8px}22%{opacity:1;height:46px}100%{opacity:0;height:82px}}

.attack-beam{height:9px!important;background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(106,237,255,.96) 20%,rgba(65,176,255,.82) 52%,rgba(255,70,101,.28))!important;box-shadow:0 0 18px rgba(107,232,255,.85),0 0 42px rgba(65,176,255,.38),0 0 70px rgba(255,73,99,.14)!important}
.attack-spark{width:96px!important;height:96px!important;background:radial-gradient(circle,rgba(255,255,255,1),rgba(117,236,255,.9) 18%,rgba(255,128,88,.62) 38%,rgba(255,61,91,.26) 55%,transparent 72%)!important;box-shadow:0 0 34px rgba(117,236,255,.68),0 0 62px rgba(255,92,92,.25)!important}
.action-banner.ai{border-color:rgba(255,87,104,.42);box-shadow:0 0 32px rgba(255,72,94,.22),0 18px 38px rgba(0,0,0,.42)}

.winner-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(22,54,65,.62),rgba(4,7,10,.93) 64%,#020406 100%);backdrop-filter:blur(10px)}
.winner-overlay.victory{background:radial-gradient(circle at 50% 36%,rgba(33,97,91,.58),rgba(4,8,10,.94) 66%,#020405 100%)}
.winner-overlay.defeat{background:radial-gradient(circle at 50% 36%,rgba(90,29,37,.58),rgba(7,5,8,.95) 66%,#030204 100%)}
.result-scanlines{position:absolute;inset:0;pointer-events:none;opacity:.18;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(255,255,255,.035) 3px 4px)}
.result-particles{position:absolute;inset:-20%;pointer-events:none;background-image:radial-gradient(circle,rgba(174,246,238,.45) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(255,255,255,.24) 0 1px,transparent 1.5px);background-size:74px 74px,113px 113px;animation:resultDrift 14s linear infinite;opacity:.35}
.winner-overlay.defeat .result-particles{filter:hue-rotate(135deg) saturate(1.5)}
@keyframes resultDrift{from{transform:translateY(0)}to{transform:translateY(120px)}}
.winner-box.premium-result{width:min(920px,94vw);padding:34px;border-radius:28px;border:1px solid rgba(168,231,222,.28);background:linear-gradient(180deg,rgba(16,24,30,.95),rgba(8,12,16,.97));box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.025);text-align:center;animation:resultIn .58s cubic-bezier(.18,.88,.3,1.2) both;position:relative}
.winner-overlay.defeat .winner-box.premium-result{border-color:rgba(255,106,120,.28)}
@keyframes resultIn{0%{opacity:0;transform:translateY(22px) scale(.92)}100%{opacity:1;transform:translateY(0) scale(1)}}
.result-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#90a6b1;font-weight:800}
.result-title{font-family:Georgia,serif;font-size:clamp(42px,6vw,78px);line-height:1;margin:13px 0 8px;color:#cafff5;text-shadow:0 0 30px rgba(105,238,214,.22)}
.winner-overlay.defeat .result-title{color:#ffb5bd;text-shadow:0 0 30px rgba(255,88,108,.22)}
.result-subtitle{color:#b9c5cc;font-size:15px;margin-bottom:26px}
.result-versus{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin:12px 0 22px}
.result-hero{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);text-align:left}
.result-hero img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.12);box-shadow:0 14px 28px rgba(0,0,0,.32)}
.result-hero div{display:grid;gap:4px}.result-hero strong{font-size:18px;color:#f4f8fa}.result-hero span{font-size:12px;color:#97a6b0}.result-hero b{font-size:13px;color:#d6e4e9}
.result-winner{border-color:rgba(114,231,203,.26);box-shadow:inset 0 0 26px rgba(114,231,203,.05)}
.result-loser{opacity:.72;filter:saturate(.72)}
.result-vs{font-family:Georgia,serif;font-size:28px;color:#83939d;text-shadow:0 0 20px rgba(255,255,255,.08)}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.result-stats>div{padding:14px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);display:grid;gap:6px}.result-stats span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#82939e}.result-stats strong{font-size:25px;color:#eff6f8}
.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}.result-actions button{min-width:170px}
.ai-difficulty{display:block;width:min(360px,100%);margin:8px 0 14px;padding:10px 12px;color:#e8f7fa;background:#091a23;border:1px solid #327a8b;border-radius:10px}
.result-rewards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;text-align:left}
.result-rewards>div{padding:12px;border:1px solid rgba(109,218,219,.24);border-radius:12px;background:rgba(22,56,66,.36);font-size:13px}
.result-rewards span{display:block;color:#9bc0ca;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.result-rewards strong{font-size:23px;color:#e3fff8}
@media(max-width:760px){.result-rewards{grid-template-columns:repeat(2,minmax(0,1fr))}.winner-box.premium-result{max-height:94vh;overflow:auto}}
@media(max-width:760px){.result-versus{grid-template-columns:1fr}.result-vs{font-size:18px}.result-stats{grid-template-columns:1fr}.result-hero{justify-content:center}.winner-box.premium-result{padding:24px 18px}.result-title{font-size:42px}}


/* ===== V21.2.6 — Intégration cartes TCG illustrées ===== */
.card.full-art-card {
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 30px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: visible;
}
.card.full-art-card::before { display:none; }
.card.full-art-card .full-card-face {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:16px;
  pointer-events:none;
  user-select:none;
  box-shadow: 0 10px 24px rgba(0,0,0,.30);
}
.card.full-art-card .fullcard-sleep {
  position:absolute;
  right:8px;
  top:8px;
  z-index:2;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(5,8,12,.72);
  backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.12);
  color:#dbe7ff;
}
.card.full-art-card.selected { box-shadow: 0 0 0 2px rgba(240,210,138,.58), 0 24px 36px rgba(0,0,0,.46); }
.card.full-art-card.drop-hover { box-shadow: 0 0 0 2px rgba(240,210,138,.62), 0 18px 32px rgba(0,0,0,.42); }
.card.full-art-card.attack-target { outline-offset: 5px; }
.card.full-art-card.dimmed .full-card-face { filter: saturate(.82) brightness(.84); }
.hand .card.full-art-card { width: clamp(132px, 7.1vw, 164px); min-height: clamp(198px, 11.5vw, 246px); }
.preview-panel .card.full-art-card { max-width: 280px; }
.collection-item .card.full-art-card,
.mulligan-pick .card.full-art-card,
.deckbuilder-entry .collection-item .card.full-art-card { min-height: auto; aspect-ratio: 2 / 3; }
.board-row .card.full-art-card { width: clamp(116px, 6vw, 146px); min-height: auto; aspect-ratio: 2 / 3; }
.drag-ghost.full-art-card { background: transparent; }
.hero-choice-art {
  width: 102px;
  height: 146px;
  border-radius: 14px;
  flex: 0 0 102px;
  background: rgba(255,255,255,.02);
}
.hero-choice-art img { object-fit: cover; }
.hero-choice {
  align-items: center;
  min-height: 168px;
}
.hero-choice-meta { align-self: stretch; justify-content: center; }
.hero-choice.synthetic .hero-choice-art,
.hero-choice.parasite .hero-choice-art,
.hero-choice.human .hero-choice-art {
  box-shadow: 0 12px 22px rgba(0,0,0,.24);
}
@media (max-width: 960px) {
  .hero-choice-art { width: 92px; height: 132px; flex-basis: 92px; }
  .hero-choice { min-height: 154px; }
}
@media (max-width: 640px) {
  .hero-choice { min-height: auto; }
}


/* ===== V21.2.8 — polish main/board/attack fx ===== */
.arena.battle-live::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(93,168,210,.09), transparent 48%), radial-gradient(circle at 18% 82%, rgba(242,87,87,.08), transparent 26%), radial-gradient(circle at 88% 18%, rgba(255,205,102,.08), transparent 24%);mix-blend-mode:screen;animation:arenaPulse 8s ease-in-out infinite;z-index:0}
.arena.battle-live::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 20%, rgba(255,255,255,.022) 50%, rgba(255,255,255,0) 78%, rgba(255,255,255,.02));opacity:.45;z-index:0}
@keyframes arenaPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.015)}}
.hero-row.current-turn{box-shadow:0 0 0 1px rgba(241,209,122,.22),0 0 38px rgba(241,209,122,.10),inset 0 0 24px rgba(241,209,122,.08)}
.hero-row.current-turn .hero-avatar{box-shadow:0 0 0 2px rgba(241,209,122,.34), 0 0 34px rgba(241,209,122,.18), inset 0 0 22px rgba(255,255,255,.08)}
.hero-row.current-turn .hero-chip,.hero-row.current-turn .hero-power-btn{border-color:rgba(241,209,122,.22)}
.turn-mine .hand-wrap{box-shadow:0 0 0 1px rgba(116,211,255,.12), 0 18px 60px rgba(0,0,0,.32), inset 0 0 40px rgba(116,211,255,.035)}
.turn-opponent .log-panel{box-shadow:0 0 0 1px rgba(233,110,110,.12), inset 0 0 36px rgba(233,110,110,.03)}
.hand-wrap{overflow:visible}
.hand-wrap::before{content:'';position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:min(74vw,1000px);height:120px;border-radius:50%;background:radial-gradient(ellipse at center, rgba(6,17,26,.92) 0%, rgba(6,17,26,.65) 42%, rgba(6,17,26,0) 72%);pointer-events:none;z-index:0}
.hand{padding:12px 28px 28px;align-items:flex-end}
.hand .card{transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.hand .card:hover{filter:brightness(1.05) saturate(1.06)}
.hand .card.full-art-card:hover .full-card-face{box-shadow:0 18px 28px rgba(0,0,0,.40), 0 0 18px rgba(255,224,140,.10)}
.board-row{position:relative;padding:14px 18px 18px;border-radius:20px;background:linear-gradient(180deg, rgba(10,18,26,.34), rgba(6,10,16,.14));border:1px solid rgba(255,255,255,.04)}
.board-row::before{content:'';position:absolute;inset:10px;pointer-events:none;border-radius:16px;border:1px dashed rgba(255,255,255,.04)}
.board-row .empty-slot{min-height:114px;background:linear-gradient(180deg, rgba(11,17,25,.64), rgba(8,12,17,.42));border:1px dashed rgba(255,255,255,.08);box-shadow:inset 0 0 26px rgba(255,255,255,.03)}
.board-row .card.full-art-card{filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.board-row .card.full-art-card.selected .full-card-face{box-shadow:0 14px 28px rgba(0,0,0,.44), 0 0 18px rgba(255,208,116,.16)}
.attack-beam{height:8px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(102,229,255,.95) 18%, rgba(255,239,146,.95) 52%, rgba(255,84,84,.65) 82%, rgba(255,255,255,0));box-shadow:0 0 14px rgba(102,229,255,.42), 0 0 26px rgba(255,84,84,.24);transform-origin:left center;animation:attackBeamV28 .46s ease-out forwards;z-index:95;pointer-events:none;position:fixed}
.attack-beam.heavy{height:12px;box-shadow:0 0 18px rgba(255,213,122,.52), 0 0 34px rgba(255,84,84,.34)}
.attack-beam.hero-strike{background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,209,98,.95) 16%, rgba(255,120,120,.96) 56%, rgba(255,255,255,0));}
.attack-beam.ai-strike{filter:hue-rotate(18deg) saturate(1.1)}
.attack-spark{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(126,236,255,.95) 24%, rgba(255,214,112,.62) 44%, rgba(255,0,0,0) 74%);box-shadow:0 0 18px rgba(126,236,255,.55), 0 0 34px rgba(255,204,118,.34);animation:attackSparkV28 .48s ease-out forwards;z-index:96;pointer-events:none;position:fixed;transform:translate(-50%,-50%)}
.attack-spark.heavy{width:34px;height:34px}.attack-spark.hero-strike{filter:hue-rotate(-12deg)}
.attack-ring{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,226,147,.72);position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:94;animation:attackRingV28 .55s ease-out forwards;box-shadow:0 0 14px rgba(255,226,147,.28)}
.attack-ring.heavy{border-width:3px}
@keyframes attackBeamV28{0%{opacity:0;filter:blur(2px)}18%{opacity:1}100%{opacity:0;filter:blur(1px)}}
@keyframes attackSparkV28{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
@keyframes attackRingV28{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}
.action-banner{backdrop-filter:blur(9px);box-shadow:0 12px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06) inset}
.preview-panel{background:linear-gradient(180deg, rgba(8,14,22,.96), rgba(8,12,18,.82));box-shadow:0 16px 32px rgba(0,0,0,.24), inset 0 0 24px rgba(255,255,255,.02)}
.preview-panel .card.full-art-card{max-width:300px;transform:scale(1.02)}
.topbar{box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 0 22px rgba(255,255,255,.02)}
#selectionText{letter-spacing:.02em}


/* ===== V21.2.9 — cartes TCG universelles, raretés et holo ===== */
.card.full-art-card{
  --rarity-glow: rgba(205,215,225,.24);
  --rarity-line: rgba(210,220,230,.58);
  perspective: 800px;
  isolation:isolate;
}
.card.full-art-card.common{--rarity-glow:rgba(205,215,225,.20);--rarity-line:rgba(210,220,230,.56)}
.card.full-art-card.rare{--rarity-glow:rgba(80,195,255,.34);--rarity-line:rgba(91,208,255,.88)}
.card.full-art-card.epic{--rarity-glow:rgba(189,91,255,.36);--rarity-line:rgba(205,116,255,.90)}
.card.full-art-card.legendary{--rarity-glow:rgba(255,190,73,.42);--rarity-line:rgba(255,215,112,.96)}
.card.full-art-card::after{
  content:'';position:absolute;inset:-2px;border-radius:18px;pointer-events:none;z-index:4;
  border:1px solid var(--rarity-line);box-shadow:0 0 12px var(--rarity-glow), inset 0 0 10px rgba(255,255,255,.025);
}
.card.full-art-card.legendary::after{animation:legendaryFramePulse 2.4s ease-in-out infinite}
@keyframes legendaryFramePulse{0%,100%{box-shadow:0 0 10px rgba(255,190,73,.30),inset 0 0 8px rgba(255,226,138,.06)}50%{box-shadow:0 0 25px rgba(255,190,73,.58),0 0 44px rgba(255,129,56,.16),inset 0 0 15px rgba(255,226,138,.10)}}
.full-card-face,.generated-card-inner{transform-style:preserve-3d;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.card.full-art-card:hover .full-card-face,
.card.generated-tcg-card:hover .generated-card-inner{
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(12px) scale(1.025);
  filter:brightness(1.045) saturate(1.06);
}
.card.full-art-card::before{
  content:'' !important;display:block !important;position:absolute;inset:0;border-radius:17px;pointer-events:none;z-index:5;opacity:0;
  background:radial-gradient(circle at var(--card-x,50%) var(--card-y,50%),rgba(255,255,255,.30),rgba(255,255,255,.08) 16%,transparent 42%),linear-gradient(125deg,transparent 20%,rgba(104,218,255,.10) 39%,rgba(255,218,122,.13) 51%,rgba(190,104,255,.08) 65%,transparent 80%);
  mix-blend-mode:screen;transition:opacity .16s ease;
}
.card.full-art-card:hover::before{opacity:.82}
.generated-tcg-card{padding:0;background:#070b10;border:none;overflow:hidden;aspect-ratio:2/3;min-height:auto}
.generated-card-inner{position:absolute;inset:0;overflow:hidden;border-radius:16px;background:linear-gradient(180deg,#121922,#05080b)}
.generated-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.16) contrast(1.08) brightness(.88);transform:scale(1.22)}
.generated-tcg-card.faction-nomad{border:2px solid #c98535;box-shadow:inset 0 0 0 2px rgba(255,207,116,.25),0 0 18px rgba(221,131,42,.24)}
.generated-tcg-card.faction-crystalline{border:2px solid #9b72db;box-shadow:inset 0 0 0 2px rgba(224,199,255,.22),0 0 18px rgba(165,103,255,.28)}
.generated-card-inner::before{content:"";position:absolute;inset:4px;z-index:3;pointer-events:none;border:1px solid rgba(231,244,239,.52);clip-path:polygon(0 0,18% 0,20% 1.2%,80% 1.2%,82% 0,100% 0,100% 100%,82% 100%,80% 98.8%,20% 98.8%,18% 100%,0 100%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.62),inset 0 0 18px rgba(255,255,255,.12)}
.generated-card-inner::after{content:"";position:absolute;inset:5px;z-index:4;pointer-events:none;border:3px solid transparent;border-image:linear-gradient(135deg,#d9e8e4,#3c5960 22%,#0a1116 42%,#d9e8e4 50%,#25353c 68%,#a5c4c0) 1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),inset 0 0 12px rgba(0,0,0,.8)}
.generated-tcg-card.faction-nomad .generated-card-inner::after{border-image:linear-gradient(135deg,#ffe0a1,#bd6f25 24%,#1a1010 43%,#f4b85c 52%,#60300e 75%,#ffd88c) 1}
.generated-tcg-card.faction-crystalline .generated-card-inner::after{border-image:linear-gradient(135deg,#f1ddff,#8c62d7 24%,#110b20 43%,#d9bdff 52%,#382064 75%,#b77fff) 1}
.generated-tcg-card.faction-nomad .generated-card-vignette{background:linear-gradient(180deg,rgba(3,8,12,.15),rgba(8,4,0,.05) 28%,rgba(5,4,2,.22) 54%,rgba(0,0,0,.88) 75%,rgba(0,0,0,.98)),radial-gradient(circle at 50% 34%,transparent 0 30%,rgba(91,39,5,.24) 78%,rgba(0,0,0,.68))}
.generated-tcg-card.faction-crystalline .generated-card-vignette{background:linear-gradient(180deg,rgba(6,2,15,.15),rgba(8,4,18,.05) 28%,rgba(8,2,20,.24) 54%,rgba(0,0,0,.88) 75%,rgba(0,0,0,.98)),radial-gradient(circle at 50% 34%,transparent 0 30%,rgba(101,50,185,.24) 78%,rgba(0,0,0,.68))}
.generated-card-header{left:7px;right:7px;top:7px;gap:5px}
.generated-card-cost{width:36px;height:36px;flex-basis:36px;border:2px ridge #f7e6a7;font-family:Georgia,serif;font-size:18px;z-index:4}
.generated-card-name{padding:8px 11px;border:1px solid rgba(219,233,226,.5);border-radius:3px;background:linear-gradient(180deg,rgba(11,20,22,.96),rgba(3,7,10,.78));font-family:Georgia,serif;font-size:14px;letter-spacing:.01em;clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%)}
.generated-card-faction{top:47px;right:9px;border-radius:2px;padding:4px 9px;border:1px solid currentColor;font-size:8px;background:rgba(3,8,10,.86)!important;box-shadow:0 0 8px currentColor}
.generated-card-faction.nomad{color:#ffd17b}.generated-card-faction.crystalline{color:#e1c8ff}
.generated-card-rarity{left:50%;bottom:86px;transform:translateX(-50%);padding:4px 18px;border:1px solid currentColor;border-radius:2px;background:rgba(3,8,10,.88);font-size:8px;white-space:nowrap;letter-spacing:.16em}
.generated-card-bottom{left:8px;right:8px;bottom:8px;min-height:83px;padding:8px 10px;border:1px solid rgba(221,234,227,.42);border-radius:3px;background:linear-gradient(180deg,rgba(4,10,12,.78),rgba(2,5,7,.97));box-shadow:inset 0 0 14px rgba(255,255,255,.04),0 -12px 22px rgba(0,0,0,.3)}
.generated-card-type{text-align:center;color:#d9f2f1;border-bottom:1px solid rgba(220,238,236,.28);padding-bottom:4px;font-family:Georgia,serif;font-size:8px}
.generated-card-text{text-align:center;font-family:Georgia,serif;font-size:9px;line-height:1.24;min-height:32px}
.tcg-live-stats{gap:6px;margin-top:6px;justify-content:center}.tcg-live-stats span{min-width:43px;padding:4px 7px;border:1px solid currentColor;border-radius:3px;background:rgba(4,10,13,.92);text-align:center;font-family:Georgia,serif;font-size:13px;text-shadow:0 1px 2px #000}.tcg-atk{color:#e4f6ff}.tcg-def{color:#a9dfff}.tcg-hp{color:#ffb4bb}
.generated-card-bottom{left:6px;right:6px;bottom:6px;min-height:86px;padding:8px 9px 9px;border:2px solid rgba(188,220,205,.58);border-radius:0;background:linear-gradient(180deg,rgba(4,13,14,.92),rgba(1,5,7,.98));clip-path:polygon(4% 0,96% 0,100% 12%,100% 88%,96% 100%,4% 100%,0 88%,0 12%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.85),inset 0 0 18px rgba(102,255,217,.08),0 -12px 24px rgba(0,0,0,.35)}
.generated-card-bottom::before{content:"";position:absolute;left:12%;right:12%;top:-2px;height:2px;background:linear-gradient(90deg,transparent,#efffe9 18%,#6e9b91 50%,#efffe9 82%,transparent);box-shadow:0 0 8px #c8ffe8}
.generated-card-type{margin:-2px 10px 5px;padding:3px 18px;border:1px solid rgba(231,255,239,.7);border-radius:0 0 9px 9px;background:linear-gradient(180deg,#172e2e,#061112);color:#d8ffe9;text-align:center;font:700 8px Georgia,serif;letter-spacing:.16em}
.generated-card-text{min-height:31px;color:#f0f3e9;font:italic 9px Georgia,serif;line-height:1.22;text-align:center;text-shadow:0 1px 2px #000}
.tcg-live-stats{gap:4px;margin-top:6px;justify-content:space-between}
.tcg-live-stats span{position:relative;min-width:45px;padding:4px 6px;border:2px solid currentColor;border-radius:0;background:linear-gradient(180deg,rgba(8,19,21,.96),rgba(1,6,8,.98));clip-path:polygon(16% 0,84% 0,100% 24%,100% 76%,84% 100%,16% 100%,0 76%,0 24%);text-align:center;font:700 14px Georgia,serif;text-shadow:0 1px 2px #000;box-shadow:inset 0 0 8px currentColor,0 2px 4px #000}
.tcg-atk{color:#dcf7eb!important}.tcg-def{color:#b8e7ff!important}.tcg-hp{color:#ffb4bd!important}
.generated-tcg-card.faction-nomad .tcg-atk{color:#ffd28b!important}.generated-tcg-card.faction-crystalline .tcg-atk{color:#e1c8ff!important}
.generated-card-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.05) 28%,rgba(0,0,0,.18) 54%,rgba(0,0,0,.84) 75%,rgba(0,0,0,.96) 100%),radial-gradient(circle at 50% 34%,transparent 0 32%,rgba(0,0,0,.36) 78%,rgba(0,0,0,.65) 100%)}
.generated-card-scan{position:absolute;inset:0;opacity:.20;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px);mix-blend-mode:screen}
.generated-card-header{position:absolute;left:8px;right:8px;top:8px;display:flex;align-items:center;gap:7px;z-index:2}
.generated-card-cost{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 26%,#fff0a4,#d4a538 48%,#66430e 100%);border:1px solid rgba(255,244,188,.92);box-shadow:0 3px 12px rgba(0,0,0,.42),0 0 12px rgba(234,187,74,.22);color:#161006;font-weight:950;font-size:15px}
.generated-card-name{min-width:0;flex:1;padding:6px 7px;border-radius:9px;background:linear-gradient(90deg,rgba(3,7,11,.92),rgba(3,7,11,.60),rgba(3,7,11,.12));text-shadow:0 2px 4px rgba(0,0,0,.9);font-weight:950;font-size:13px;line-height:1.05;color:#f4efe0}
.generated-card-faction{position:absolute;right:8px;top:44px;z-index:2;padding:3px 7px;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.12)}
.generated-card-faction.human{background:rgba(25,82,108,.70);color:#dff8ff}.generated-card-faction.synthetic{background:rgba(62,60,118,.70);color:#eff0ff}.generated-card-faction.parasite{background:rgba(41,91,37,.70);color:#e9ffe6}
.generated-card-rarity{position:absolute;left:8px;bottom:82px;z-index:2;font-size:7px;font-weight:900;letter-spacing:.13em;color:var(--rarity-line);text-shadow:0 1px 3px #000}
.generated-card-bottom{position:absolute;left:7px;right:7px;bottom:7px;min-height:72px;z-index:2;padding:7px 8px 8px;border-radius:10px;background:linear-gradient(180deg,rgba(7,11,15,.78),rgba(4,7,10,.96));border:1px solid rgba(255,255,255,.09);box-shadow:0 -9px 20px rgba(0,0,0,.22)}
.generated-card-type{font-size:7px;font-weight:900;letter-spacing:.16em;color:#aab5bf;margin-bottom:4px}
.generated-card-text{font-size:8px;line-height:1.22;color:#e0e4e7;min-height:30px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcg-live-stats{display:flex;justify-content:space-between;gap:4px;margin-top:5px;font-size:10px;font-weight:950}.tcg-atk{color:#ffb66f}.tcg-def{color:#8ccaff}.tcg-hp{color:#8ee59f}.tcg-action-mark{margin-top:5px;text-align:right;color:#8ecfe4;font-size:7px;font-weight:900;letter-spacing:.13em}
.hand .generated-tcg-card{width:clamp(132px,7.1vw,164px);min-height:auto;aspect-ratio:2/3}
.board-row .generated-tcg-card{width:clamp(116px,6vw,146px);min-height:auto;aspect-ratio:2/3}
.preview-panel .generated-tcg-card{width:min(280px,100%);aspect-ratio:2/3}
.collection-item .generated-tcg-card,.mulligan-pick .generated-tcg-card{aspect-ratio:2/3;min-height:auto}
.fullcard-sleep{box-shadow:0 4px 12px rgba(0,0,0,.38)}
@media (max-width:760px){.generated-card-name{font-size:11px}.generated-card-text{font-size:7px}.generated-card-cost{width:27px;height:27px;flex-basis:27px;font-size:13px}}


/* ===== V21.2.11 — contours corrigés + agrandissement au survol ===== */
.card.full-art-card{
  border:none !important;
  border-radius:18px;
  box-shadow:0 12px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:visible;
}
.card.full-art-card::after{
  inset:0 !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 8px var(--rarity-glow), inset 0 0 0 1px rgba(255,255,255,.025);
}
.card.full-art-card::before{
  inset:1px !important;
  border-radius:17px !important;
}
.card.full-art-card .full-card-face,
.generated-card-inner,
.generated-card-bg{
  border-radius:18px;
}
.hand .card{
  transform-origin:center bottom;
  will-change:transform, filter;
}
.hand .card.full-art-card,
.hand .card.generated-tcg-card{
  transform:translate(var(--fan-x,0px), var(--fan-y,0px)) rotate(var(--fan-rot,0deg));
}
.hand .card:hover{
  z-index:600 !important;
}
.hand .card.full-art-card:hover,
.hand .card.generated-tcg-card:hover{
  transform:translate(var(--fan-x,0px), calc(var(--fan-y,0px) - 30px)) rotate(var(--fan-rot,0deg)) scale(1.22) !important;
  filter:brightness(1.07) saturate(1.08);
}
.hand .card.full-art-card:hover .full-card-face,
.hand .card.generated-tcg-card:hover .generated-card-inner{
  box-shadow:0 22px 34px rgba(0,0,0,.46), 0 0 22px rgba(255,225,138,.18);
}
.board-row .card.full-art-card:hover,
.board-row .card.generated-tcg-card:hover{
  transform:translateY(-10px) scale(1.08);
  z-index:180;
}
.preview-panel .card.full-art-card,
.preview-panel .card.generated-tcg-card{
  transform:none !important;
}
.preview-panel .card.full-art-card .full-card-face,
.preview-panel .card.generated-tcg-card .generated-card-inner{
  box-shadow:0 20px 30px rgba(0,0,0,.42);
}
@media (max-width: 1200px){
  .hand .card.full-art-card,
  .hand .card.generated-tcg-card{ transform:translate(0,0) rotate(0deg); }
  .hand .card.full-art-card:hover,
  .hand .card.generated-tcg-card:hover{ transform:translateY(-18px) scale(1.14) !important; }
}


/* ===== V21.2.12 — survol net au-dessus du plateau ===== */
#game, .game-shell, .main-column { overflow: visible !important; }
.hand-wrap, .hand { overflow: visible !important; }
#hoverZoomCard{
  position: fixed;
  width: min(430px, 30vw);
  aspect-ratio: 2 / 3;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transform: scale(.94);
  transform-origin: center bottom;
  transition: opacity .12s ease, transform .14s ease;
  filter: drop-shadow(0 26px 42px rgba(0,0,0,.62)) drop-shadow(0 0 28px rgba(255,220,128,.14));
}
#hoverZoomCard.show{ opacity: 1; transform: scale(1); }
#hoverZoomCard .card{ 
  width: 100% !important;
  min-height: auto !important;
  aspect-ratio: 2 / 3;
  margin: 0 !important;
  transform: none !important;
  z-index: auto !important;
}
#hoverZoomCard .card.full-art-card,
#hoverZoomCard .card.generated-tcg-card{
  box-shadow: 0 22px 40px rgba(0,0,0,.54), 0 0 0 1px rgba(255,255,255,.05) inset;
}
#hoverZoomCard.deckbuilder-hover-preview{width:min(360px,38vw);max-height:calc(100vh - 24px);z-index:500!important}
#hoverZoomCard.deckbuilder-hover-preview .card{width:100%!important;height:auto!important;max-height:calc(100vh - 24px);transform:none!important}
#hoverZoomCard .full-card-face,
#hoverZoomCard .generated-card-inner,
#hoverZoomCard .generated-card-bg{
  transform: none !important;
  filter: none !important;
  border-radius: 20px !important;
}
#hoverZoomCard .generated-card-name{ font-size: 20px; }
#hoverZoomCard .generated-card-cost{ width: 42px; height: 42px; flex-basis: 42px; font-size: 20px; }
#hoverZoomCard .generated-card-faction{ font-size: 11px; top: 56px; }
#hoverZoomCard .generated-card-rarity{ font-size: 10px; }
#hoverZoomCard .generated-card-type{ font-size: 11px; }
#hoverZoomCard .generated-card-text{ font-size: 12px; line-height: 1.28; min-height: 52px; -webkit-line-clamp: 4; }
#hoverZoomCard .tcg-live-stats{ font-size: 16px; margin-top: 10px; }
#hoverZoomCard .tcg-action-mark{ font-size: 10px; margin-top: 8px; }
.hand .card.full-art-card:hover,
.hand .card.generated-tcg-card:hover{
  transform: translate(var(--fan-x,0px), calc(var(--fan-y,0px) - 14px)) rotate(var(--fan-rot,0deg)) scale(1.08) !important;
}
@media (max-width: 980px){
  #hoverZoomCard{ display:none; }
}


/* ===== V21.2.24 — landing accessibility fix ===== */
body.landing-mode { overflow: hidden; }
body.game-mode { overflow: hidden; }
#landing {
  height: 100vh;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 20px 44px;
  -webkit-overflow-scrolling: touch;
}
#landing .hero { margin-bottom: 14px; }
#landing .subtitle { max-width: 900px; margin: 10px auto 0; }
.lobby-card.large {
  width: min(920px, 100%);
  margin-top: 22px;
  padding: 22px;
}
.hero-selector-v211 { gap: 12px; }
.hero-choice { min-height: 110px; padding: 10px; }
.hero-choice-art { width: 80px; height: 80px; flex-basis: 80px; }
.lobby-actions { position: sticky; bottom: 0; padding-top: 8px; background: linear-gradient(180deg, rgba(16,20,26,0), rgba(16,20,26,.82) 30%, rgba(16,20,26,.98)); }
@media (max-width: 1200px) {
  #landing { padding-top: 18px; }
  .lobby-card.large { width: min(860px, 100%); }
}
@media (max-height: 1080px) {
  .hero { margin-bottom: 10px; }
  .crest { width: 74px; height: 74px; font-size: 38px; margin-bottom: 14px; }
  h1 { font-size: clamp(34px, 5vw, 62px); margin: 2px 0; }
  h2 { font-size: clamp(20px, 1.6vw, 28px); }
  .subtitle { font-size: 14px; }
  .hero-choice { min-height: 102px; }
}
@media (max-width: 900px) {
  #landing { height: auto; min-height: 100vh; }
}


/* ===== V21.2.48 — suppression Aperçu + infobulle pouvoir commandant ===== */
.side-column .log-panel{height:100%;min-height:0}
.hero-power-tooltip{position:relative;display:inline-flex;align-items:center;overflow:visible!important}
.hero-power-tooltip::after{
  content:attr(data-tooltip);
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  width:max-content;
  max-width:320px;
  min-width:190px;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid rgba(111,211,255,.32);
  background:linear-gradient(180deg,rgba(8,18,28,.98),rgba(5,10,16,.98));
  color:#eaf6ff;
  font-size:12px;
  line-height:1.35;
  font-weight:600;
  white-space:normal;
  text-align:left;
  box-shadow:0 12px 28px rgba(0,0,0,.48),0 0 18px rgba(78,181,235,.10);
  opacity:0;
  visibility:hidden;
  transform:translateY(5px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
  pointer-events:none;
  z-index:250;
}
.hero-power-tooltip::before{
  content:'';
  position:absolute;
  right:20px;
  bottom:calc(100% + 4px);
  width:10px;height:10px;
  background:#07111b;
  border-right:1px solid rgba(111,211,255,.32);
  border-bottom:1px solid rgba(111,211,255,.32);
  transform:rotate(45deg);
  opacity:0;visibility:hidden;
  z-index:251;
}
.hero-power-tooltip:hover::after,.hero-power-tooltip:hover::before{
  opacity:1;visibility:visible;transform:translateY(0);
}
.hero-side.right{overflow:visible}
.hero-row{overflow:visible}
@media(max-width:900px){
  .hero-power-tooltip::after{max-width:240px;right:50%;transform:translate(50%,5px)}
  .hero-power-tooltip:hover::after{transform:translate(50%,0)}
}


/* ============================================================
   V21.2.49 — GRAND PLATEAU / FIGURINES
   Interface inspirée du mockup validé : plateau plein écran,
   héros centraux, main en éventail, figurines sur socles.
   ============================================================ */
body.game-mode{overflow:hidden;background:#020609}
#game.screen.active{position:fixed;inset:0;display:block;overflow:hidden;background:#03070a}
#game .topbar{
  position:absolute;z-index:70;left:18px;top:12px;right:auto;height:auto;padding:0;
  border:0;background:transparent;box-shadow:none;pointer-events:none
}
#game .topbar>div:first-child{pointer-events:none}
#game .brand{font-family:Georgia,serif;letter-spacing:.25em;font-size:20px;color:#e8eef3;text-shadow:0 2px 10px #000}
#game .brand small{display:none}
.room-code-bar{display:flex;align-items:center;gap:8px;margin-top:5px;color:#dce8ee}
.room-code-caption{font-size:9px;letter-spacing:.16em;color:#8da6b1;font-weight:700}
#roomCodeDisplay{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px;letter-spacing:.2em;color:#f1fbff;text-shadow:0 0 10px rgba(87,211,255,.55)}
.copy-room-code{border:1px solid rgba(96,210,255,.55);background:rgba(8,32,43,.9);color:#bdeeff;border-radius:5px;padding:3px 8px;font-size:10px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.05em}
.copy-room-code:hover{background:rgba(17,77,101,.95);color:#fff;box-shadow:0 0 12px rgba(77,205,255,.3)}
#game .topbar-right{
  position:fixed;z-index:80;right:18px;top:36%;display:flex;flex-direction:column;gap:8px;align-items:stretch;pointer-events:auto
}
#game .turn-badge{
  min-width:190px;padding:13px 22px;border-radius:5px;border:2px solid rgba(91,190,247,.7);
  background:linear-gradient(180deg,rgba(5,27,43,.98),rgba(3,12,22,.98));
  box-shadow:0 0 0 3px rgba(4,14,22,.9),0 0 22px rgba(44,164,240,.34),inset 0 0 24px rgba(37,137,208,.16);
  color:#dff7ff;font-family:Georgia,serif;font-size:18px;text-align:center;text-transform:none;letter-spacing:.02em
}
#game .turn-badge.mine{color:#dff8ff;border-color:#55c8ff;box-shadow:0 0 0 3px #07131c,0 0 30px rgba(52,190,255,.5),inset 0 0 26px rgba(45,155,222,.25)}
#leaveBtn{position:fixed;right:18px;top:10px;opacity:.65;pointer-events:auto}
#leaveBtn.battle-menu-highlight{opacity:1;box-shadow:0 0 0 2px rgba(95,202,255,.55),0 0 20px rgba(95,202,255,.3)}

#game .game-shell{position:absolute;inset:0;display:block;margin:0;padding:0;max-width:none;width:100%;height:100%}
#game .main-column{position:absolute;inset:0;display:block;min-width:0}
#game .arena{
  position:absolute;inset:0;min-height:0;height:100%;border:0;border-radius:0;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(3,8,11,.03),rgba(3,8,11,.20) 43%,rgba(1,4,7,.4)),
    url('/static/assets/plateau_vaisseau_abandonne.png') center/cover no-repeat;
  box-shadow:inset 0 0 120px rgba(0,0,0,.62)
}
#game .arena::before{
  content:'';position:absolute;inset:15% 7% 12%;z-index:0;pointer-events:none;opacity:.42;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(124,156,163,.22) 50%,transparent 50.2%),
    linear-gradient(0deg,transparent 49.8%,rgba(124,156,163,.17) 50%,transparent 50.2%),
    repeating-linear-gradient(90deg,rgba(140,160,166,.09) 0 1px,transparent 1px 18%),
    repeating-linear-gradient(0deg,rgba(140,160,166,.08) 0 1px,transparent 1px 32%);
  border:1px solid rgba(115,150,160,.15);transform:perspective(800px) rotateX(3deg)
}
#game .arena::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 55%,transparent 20%,rgba(0,0,0,.12) 56%,rgba(0,0,0,.54) 100%)}
.table-crown,.table-crest,.board-glow,.middle-line{z-index:2}
.table-crown{opacity:.18}.table-crest{opacity:.13;font-size:180px}
.middle-line{position:absolute!important;left:50%!important;top:49%!important;transform:translate(-50%,-50%);width:190px!important;height:70px!important;opacity:.28!important;pointer-events:none}
.middle-line .status-line{display:none}.location-card{font-size:10px!important;background:rgba(3,15,18,.35)!important}

/* Hero HUDs */
#opponentHero,#myHero{position:absolute!important;z-index:18!important;left:50%!important;transform:translateX(-50%);width:min(760px,70vw)!important;height:140px!important;display:block!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
#opponentHero{top:20px!important}
#myHero{bottom:255px!important}
#opponentHero .hero-center,#myHero .hero-center{position:absolute;left:50%;top:0;transform:translateX(-50%);width:138px;height:138px;z-index:4}
.hero-drop-zone{width:100%!important;height:100%!important}
.hero-avatar{width:126px!important;height:126px!important;border:4px solid #a68743!important;box-shadow:0 0 0 4px rgba(8,14,18,.92),0 0 24px rgba(45,171,236,.24)!important;background:#050a0d!important}
.hero-avatar img{object-fit:cover!important}
.hero-avatar .hero-prestige,.hero-avatar .hero-quest{width:42px!important;height:42px!important;line-height:42px!important;top:15px!important;border:2px solid #e4c76d!important;font-size:17px!important;z-index:7}
.hero-avatar .hero-prestige{right:-24px!important;background:linear-gradient(#a92a32,#5f1015)!important;color:white!important;border-color:#ff7c81!important}
.hero-avatar .hero-quest{left:-24px!important;background:linear-gradient(#9a761f,#4d3608)!important;color:#fff4bc!important}
.hero-avatar .hero-label{bottom:-24px!important;left:50%!important;transform:translateX(-50%);min-width:160px;padding:4px 14px!important;border-radius:4px!important;background:linear-gradient(180deg,#141a1c,#070a0b)!important;border:1px solid #9d8a50!important;font-family:Georgia,serif;font-size:14px!important;white-space:nowrap}
#opponentHero .hero-side.left,#myHero .hero-side.left{position:absolute;left:50%;top:116px;transform:translateX(-50%);display:flex!important;justify-content:center;gap:5px;width:520px;opacity:.94}
#opponentHero .hero-name-wrap,#myHero .hero-name-wrap{display:none!important}
#opponentHero .hero-side.left .hero-chip,#myHero .hero-side.left .hero-chip{font-size:9px!important;padding:4px 7px!important;background:rgba(5,10,13,.86)!important}
#opponentHero .hero-side.right,#myHero .hero-side.right{position:absolute;left:calc(50% + 100px);top:28px;width:250px;display:flex!important;flex-wrap:wrap;gap:5px;align-items:center;justify-content:flex-start;overflow:visible!important}
#opponentHero .hero-side.right{left:calc(50% + 105px)}
.hero-side.right .hero-chip:not(.power-chip):not(.connected),.hero-side.right .connected{display:none!important}
.hero-power-btn,.hero-chip.power-chip{max-width:245px!important;padding:7px 10px!important;border:1px solid rgba(92,196,247,.38)!important;background:linear-gradient(180deg,rgba(7,24,34,.96),rgba(4,10,15,.96))!important;border-radius:6px!important;color:#dff7ff!important;font-size:10px!important}
#opponentHero .hero-power-btn{display:none!important}
.hero-power-tooltip::after{z-index:500!important}

/* Board rows */
#opponentBoard,#myBoard{position:absolute!important;left:50%!important;transform:translateX(-50%);width:min(860px,70vw)!important;height:210px!important;z-index:15!important;display:flex!important;justify-content:center!important;align-items:flex-end!important;gap:18px!important;padding:0!important;overflow:visible!important;background:transparent!important;border:0!important}
#opponentBoard{top:185px!important}
#myBoard{bottom:385px!important}
#opponentBoard .empty-slot,#myBoard .empty-slot{align-self:center;min-height:0!important;padding:8px 16px!important;background:rgba(0,0,0,.25)!important;border:1px dashed rgba(255,255,255,.09)!important;font-size:10px!important}

/* Figurines pseudo-3D */
.board-figure{position:relative!important;flex:0 0 145px!important;width:145px!important;height:190px!important;background:transparent!important;border:0!important;overflow:visible!important;transform-style:preserve-3d;perspective:650px;filter:none!important;transition:transform .18s ease,filter .18s ease!important;cursor:pointer}
.board-figure:hover{transform:translateY(-8px) scale(1.08)!important;z-index:80!important}
.board-figure.selected{transform:translateY(-10px) scale(1.09)!important;filter:drop-shadow(0 0 14px #4bd5ff)!important}
.board-figure.attack-target{filter:drop-shadow(0 0 16px #ff655f)!important;animation:figureTargetPulse 1s infinite alternate}
.board-figure.dimmed{opacity:.45!important;filter:grayscale(.45)!important}
.board-figure.exhausted{filter:saturate(.68) brightness(.73)!important}
.figure-shadow{position:absolute;left:16px;right:16px;bottom:8px;height:25px;border-radius:50%;background:rgba(0,0,0,.62);filter:blur(8px);transform:translateZ(-10px)}
.figure-aura{position:absolute;left:19px;right:19px;bottom:22px;height:64px;border-radius:50%;background:radial-gradient(ellipse,rgba(46,184,255,.32),rgba(46,184,255,0) 70%);filter:blur(7px)}
.faction-parasite .figure-aura{background:radial-gradient(ellipse,rgba(185,230,43,.36),rgba(150,220,30,0) 70%)}
.figure-body{position:absolute;left:15px;right:15px;top:2px;height:145px;overflow:hidden;clip-path:polygon(16% 0,84% 0,98% 78%,75% 100%,25% 100%,2% 78%);transform:perspective(500px) rotateX(-3deg) translateZ(18px);filter:drop-shadow(0 10px 8px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(63,184,246,.28))}
.figure-body::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 24% 75%,rgba(255,255,255,.05)),linear-gradient(0deg,rgba(0,0,0,.42),transparent 40%);pointer-events:none}
.figure-body .miniature-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform:scale(1.02)}
.figure-body .figure-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.18);border-radius:24% 24% 18% 18%;opacity:.08;mix-blend-mode:screen;filter:blur(1px)}
.figure-base{position:absolute;left:8px;right:8px;bottom:17px;height:43px;border-radius:50%;background:linear-gradient(180deg,#33414a,#0d1216 38%,#030506 74%);border:3px solid #398fd2;box-shadow:inset 0 7px 12px rgba(255,255,255,.08),0 0 0 3px #11191d,0 0 14px rgba(52,174,247,.7);transform:perspective(340px) rotateX(57deg);z-index:3}
.faction-parasite .figure-base{border-color:#829d22;box-shadow:inset 0 7px 12px rgba(255,255,255,.06),0 0 0 3px #161a0a,0 0 15px rgba(180,225,43,.7)}
.figure-base-core{position:absolute;inset:7px 20px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:repeating-radial-gradient(circle,rgba(255,255,255,.06) 0 2px,transparent 2px 12px)}
.figure-name{position:absolute;z-index:8;left:50%;bottom:49px;transform:translateX(-50%);max-width:125px;padding:2px 7px;border-radius:4px;background:rgba(3,8,11,.86);border:1px solid rgba(89,190,241,.34);color:#eaf7ff;font-size:9px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 3px 8px #000}
.faction-parasite .figure-name{border-color:rgba(185,230,55,.45);color:#efffc8}
.figure-stat{position:absolute;z-index:9;bottom:10px;min-width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-family:Georgia,serif;font-size:17px;font-weight:900;color:white;border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 7px #000}
.figure-stat.atk{left:10px;background:linear-gradient(#1469a5,#06243b);border-color:#55c5ff}
.faction-parasite .figure-stat.atk{background:linear-gradient(#5f7c0c,#1c2d03);border-color:#b7e534}
.figure-stat.hp{right:10px;background:linear-gradient(#b72a32,#52080e);border-color:#ff7c80}
.figure-stat.def{left:50%;transform:translateX(-50%);bottom:3px;width:25px;height:25px;min-width:25px;font-size:11px;background:#0c202e;border-color:#8fcbe5;opacity:.9}
.figure-exhausted{position:absolute;z-index:10;right:18px;top:12px;padding:3px 7px;border-radius:10px;background:rgba(8,12,15,.9);border:1px solid #91a1a7;color:#dfe9ed;font-size:11px;font-weight:900}
@keyframes figureTargetPulse{from{transform:translateY(-2px) scale(1)}to{transform:translateY(-7px) scale(1.06)}}

/* Main hand — lower fan */
.hand-wrap{position:fixed!important;z-index:45!important;left:50%!important;bottom:-6px!important;transform:translateX(-50%)!important;width:min(760px,70vw)!important;height:250px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.hand-topline{display:none!important}
.hand{height:245px!important;min-height:0!important;align-items:flex-end!important;justify-content:center!important;overflow:visible!important;padding:0 20px 8px!important;gap:0!important}
.hand .card{width:142px!important;height:210px!important;flex:0 0 142px!important;margin-left:-22px!important;transform-origin:50% 100%!important;box-shadow:0 12px 24px rgba(0,0,0,.6)!important}
.hand .card:first-child{margin-left:0!important}
.hand .card:nth-child(1){transform:rotate(-8deg) translateY(14px)!important}
.hand .card:nth-child(2){transform:rotate(-4deg) translateY(3px)!important}
.hand .card:nth-child(3){transform:rotate(0deg) translateY(-2px)!important}
.hand .card:nth-child(4){transform:rotate(4deg) translateY(3px)!important}
.hand .card:nth-child(5){transform:rotate(8deg) translateY(14px)!important}
.hand .card:nth-child(n+6){transform:rotate(10deg) translateY(18px)!important}
.hand .card:hover{transform:translateY(-76px) scale(1.32)!important;z-index:120!important}

/* Right controls */
.controls{position:fixed!important;z-index:78!important;right:18px!important;top:calc(36% + 62px)!important;width:190px!important;padding:0!important;border:0!important;background:transparent!important;display:block!important;box-shadow:none!important}
.controls #selectionText{display:none!important}
.control-buttons{display:flex!important;flex-direction:column!important;gap:8px!important}
#endTurnBtn{order:-1;width:190px!important;min-height:54px!important;border:2px solid #64cfff!important;border-radius:5px!important;background:linear-gradient(180deg,#0c77bf,#06416c 55%,#031727)!important;box-shadow:0 0 0 3px #07141c,0 0 24px rgba(66,190,255,.5),inset 0 0 20px rgba(119,218,255,.24)!important;font-family:Georgia,serif!important;font-size:19px!important;color:white!important}
#cancelBtn{width:190px!important;background:rgba(5,12,16,.82)!important;font-size:11px!important;opacity:.76}

/* Left rail and journal drawer */
.battle-left-rail{position:fixed;z-index:85;left:0;top:34%;display:flex;flex-direction:column;gap:6px}
.rail-button{width:62px;height:58px;border-radius:0 6px 6px 0;border:1px solid #465a66;border-left:0;background:linear-gradient(180deg,rgba(10,19,24,.96),rgba(3,7,10,.96));color:#d7e2e7;box-shadow:0 5px 15px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.rail-button:hover{color:#76d8ff;border-color:#4ebdf1;box-shadow:0 0 16px rgba(52,181,242,.25)}
.rail-icon{font-size:22px;line-height:1}.rail-button small{font-size:8px;letter-spacing:.06em}
.side-column{position:fixed!important;z-index:95!important;left:70px!important;top:25%!important;width:350px!important;height:420px!important;display:block!important;transform:translateX(-470px);transition:transform .22s ease;pointer-events:auto}
.side-column.open{transform:translateX(0)}
.log-panel{height:100%!important;border:1px solid rgba(88,187,234,.3)!important;background:rgba(5,12,16,.96)!important;box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 20px rgba(60,175,230,.12)!important}
.journal-head{display:flex;align-items:center;justify-content:space-between}.journal-head h3{margin:0}.journal-head button{min-width:34px;padding:4px 8px}
#gameLog{height:calc(100% - 38px)!important;overflow:auto!important}

/* Hover full-card preview should float above the whole battlefield */
#hoverZoomCard{z-index:300!important}
#hoverZoomCard .card{width:300px!important;height:448px!important}

/* Small screen fallback */
@media(max-width:1150px){
  #opponentBoard,#myBoard{width:72vw!important;gap:10px!important}
  .board-figure{transform:scale(.9);margin:-7px}
  #game .topbar-right,.controls{right:8px!important}
  .battle-left-rail{display:none}
  .side-column{left:12px!important}
  .hand-wrap{width:78vw!important}
}
@media(max-height:800px){
  #opponentHero{top:4px!important;transform:translateX(-50%) scale(.82)!important}
  #opponentBoard{top:120px!important;height:180px!important}
  #myBoard{bottom:285px!important;height:180px!important}
  #myHero{bottom:185px!important;transform:translateX(-50%) scale(.82)!important}
  .hand-wrap{height:185px!important}.hand{height:185px!important}.hand .card{width:112px!important;height:166px!important;flex-basis:112px!important}
}


/* ===== V21.2.51 — cinematic board pass ===== */
body:not(.landing-mode){background:#020506!important;overflow:hidden!important}
#game{background:
 radial-gradient(circle at 50% 15%,rgba(189,214,53,.10),transparent 25%),
 radial-gradient(circle at 50% 80%,rgba(27,137,219,.11),transparent 30%),
 linear-gradient(180deg,#050806,#060a0c 48%,#05090c)!important}
#game::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:
 linear-gradient(90deg,rgba(0,0,0,.72),transparent 16% 84%,rgba(0,0,0,.72)),
 linear-gradient(180deg,rgba(0,0,0,.38),transparent 25%,transparent 74%,rgba(0,0,0,.46));}
#game .topbar{height:0!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important}
#game .topbar>div:first-child{display:block!important;position:fixed!important;left:24px!important;top:58px!important;z-index:95!important;padding:8px 12px!important;border:1px solid rgba(91,190,224,.45)!important;border-radius:8px!important;background:rgba(3,12,17,.88)!important;box-shadow:0 0 18px rgba(28,162,207,.18)!important}
#game .topbar-right{position:fixed!important;right:24px!important;top:20px!important;z-index:90!important;gap:8px!important}
#game #turnBadge{display:none!important}
#game #leaveBtn{opacity:.45;font-size:10px;padding:5px 9px!important}
.cinematic-brand{position:fixed;z-index:80;left:24px;top:18px;display:flex;flex-direction:column;letter-spacing:.24em;color:#eef8fb;text-shadow:0 2px 8px #000}
.cinematic-brand strong{font-family:Georgia,serif;font-size:18px;font-weight:700}
.cinematic-brand small{margin-top:3px;font-size:9px;letter-spacing:.12em;color:#b9c4c9}
.game-shell,.main-column{width:100%!important;height:100vh!important;max-width:none!important;margin:0!important;padding:0!important}
.arena{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:
 linear-gradient(180deg,rgba(122,139,24,.11) 0 29%,transparent 42%),
 linear-gradient(0deg,rgba(17,102,170,.09) 0 30%,transparent 45%),
 url('/static/assets/plateau_vaisseau_abandonne.png') center/cover no-repeat!important;box-shadow:none!important}
.arena::before{content:'';position:absolute;z-index:1;left:7%;right:7%;top:17%;bottom:23%;clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);background:
 repeating-linear-gradient(90deg,transparent 0 14.7%,rgba(136,163,170,.08) 15%,transparent 15.3% 30%),
 repeating-linear-gradient(0deg,transparent 0 23.5%,rgba(148,169,177,.08) 24%,transparent 24.4% 48%),
 radial-gradient(circle at 50% 50%,rgba(64,104,122,.10),transparent 44%),
 linear-gradient(180deg,rgba(26,32,33,.72),rgba(14,19,21,.76));border:1px solid rgba(160,178,182,.16);box-shadow:inset 0 0 80px rgba(0,0,0,.75),0 25px 100px rgba(0,0,0,.45);transform:perspective(1200px) rotateX(4deg);transform-origin:center bottom;pointer-events:none}
.arena::after{content:'';position:absolute;z-index:2;left:0;right:0;top:0;height:37%;pointer-events:none;background:
 radial-gradient(ellipse at 20% 5%,rgba(188,223,47,.18),transparent 30%),
 radial-gradient(ellipse at 82% 0%,rgba(188,223,47,.16),transparent 27%),
 linear-gradient(180deg,rgba(35,48,5,.28),rgba(12,14,8,.06) 75%,transparent);mix-blend-mode:screen;opacity:.75}
.table-crown,.table-crest,.board-glow,.middle-line{display:none!important}
#opponentHero,#myHero,#opponentBoard,#myBoard,.hand-wrap,.controls,.battle-left-rail,.cinematic-turn-panel,.deck-stack{z-index:20!important}

/* commandants */
#opponentHero,#myHero{width:620px!important;height:145px!important;background:transparent!important;border:0!important;box-shadow:none!important}
#opponentHero{top:18px!important}
#myHero{bottom:205px!important}
.hero-avatar{width:116px!important;height:116px!important;border:4px solid #796b38!important;box-shadow:0 0 0 4px #0c1113,0 0 22px rgba(89,192,241,.26),inset 0 0 22px rgba(255,255,255,.05)!important}
#opponentHero .hero-avatar{border-color:#6f782c!important;box-shadow:0 0 0 4px #0d1008,0 0 24px rgba(187,226,55,.24)!important}
.hero-avatar .hero-label{bottom:-26px!important;font-size:15px!important;padding:4px 16px!important}
.hero-avatar .hero-prestige,.hero-avatar .hero-quest{width:44px!important;height:44px!important;font-size:18px!important;top:35px!important}
.hero-avatar .hero-prestige{right:-34px!important}.hero-avatar .hero-quest{left:-34px!important}
#opponentHero .hero-side.right,#myHero .hero-side.right{left:calc(50% + 96px)!important;top:27px!important;width:315px!important}
.hero-power-btn,.hero-chip.power-chip{font-family:Georgia,serif!important;font-size:12px!important;max-width:305px!important;min-height:48px!important;padding:9px 13px!important;border:1px solid rgba(104,201,244,.45)!important;box-shadow:0 0 0 2px rgba(3,11,16,.9),0 0 20px rgba(57,169,228,.13)!important}
#opponentHero .hero-chip.power-chip{border-color:rgba(181,224,55,.35)!important;color:#f3ffd2!important;background:linear-gradient(180deg,rgba(19,27,6,.96),rgba(7,12,4,.96))!important}
#opponentHero .hero-side.left,#myHero .hero-side.left{display:none!important}

/* cinematic lane and larger miniature standees */
#opponentBoard,#myBoard{width:min(820px,63vw)!important;height:205px!important;gap:30px!important;align-items:flex-end!important}
#opponentBoard{top:170px!important}
#myBoard{bottom:350px!important}
.board-figure{flex-basis:158px!important;width:158px!important;height:205px!important}
.figure-body{left:14px!important;right:14px!important;top:0!important;height:157px!important;clip-path:polygon(22% 0,78% 0,94% 70%,82% 91%,64% 100%,36% 100%,18% 91%,6% 70%)!important;filter:drop-shadow(0 14px 10px rgba(0,0,0,.85)) drop-shadow(0 0 10px rgba(63,184,246,.32))!important}
.faction-parasite .figure-body{filter:drop-shadow(0 14px 10px rgba(0,0,0,.85)) drop-shadow(0 0 12px rgba(188,229,54,.32))!important}
.figure-body .miniature-canvas{transform:scale(1.05)!important}
.figure-body .figure-fallback{transform:scale(1.28)!important;object-position:center 30%!important;border-radius:26% 26% 20% 20%!important}
.figure-base{left:5px!important;right:5px!important;bottom:15px!important;height:48px!important;border-width:3px!important;box-shadow:inset 0 8px 14px rgba(255,255,255,.08),0 0 0 4px #11191d,0 0 18px rgba(52,174,247,.72)!important}
.faction-parasite .figure-base{box-shadow:inset 0 8px 14px rgba(255,255,255,.05),0 0 0 4px #161a0a,0 0 18px rgba(180,225,43,.75)!important}
.figure-name{bottom:54px!important;font-size:10px!important;max-width:142px!important}
.figure-stat{bottom:8px!important;width:35px!important;height:35px!important;font-size:18px!important}
.figure-stat.atk{left:9px!important}.figure-stat.hp{right:9px!important}.figure-stat.def{bottom:1px!important;width:27px!important;height:27px!important;font-size:12px!important}

/* deck piles */
.deck-stack{position:fixed;width:94px;height:132px;filter:drop-shadow(0 15px 18px rgba(0,0,0,.75));pointer-events:none}
.deck-stack.enemy{left:34px;top:165px}.deck-stack.mine{right:34px;bottom:175px}
.deck-card-back{position:absolute;inset:0;border-radius:8px;border:2px solid #8b7e42;background:radial-gradient(circle at center,#161c0c,#070a06 64%),repeating-linear-gradient(45deg,transparent 0 8px,rgba(183,222,54,.08) 8px 9px);box-shadow:-5px 5px 0 #070908,-10px 10px 0 #0b0c09,-15px 15px 0 #050605,0 0 18px rgba(186,225,54,.18);display:grid;place-items:center;color:#cce54b;font-family:Georgia,serif;font-size:38px}
.deck-stack.mine .deck-card-back{border-color:#3e91bd;background:radial-gradient(circle at center,#081725,#03080d 64%),repeating-linear-gradient(45deg,transparent 0 8px,rgba(65,177,236,.08) 8px 9px);box-shadow:5px 5px 0 #07090b,10px 10px 0 #05070a,15px 15px 0 #030405,0 0 18px rgba(66,181,239,.2);color:#66caf6}
.deck-stack>span{position:absolute;right:-12px;bottom:-13px;width:38px;height:38px;border-radius:7px;background:#11161a;border:2px solid #7e8b8f;color:#fff;display:grid;place-items:center;font-family:Georgia,serif;font-size:18px;font-weight:700;box-shadow:0 4px 12px #000}

/* turn panel on the right */
.cinematic-turn-panel{position:fixed;right:14px;top:40%;width:205px;text-align:center;font-family:Georgia,serif;color:white;text-shadow:0 2px 8px #000}
#cinematicTurnNumber{padding:8px 12px;background:linear-gradient(180deg,rgba(18,25,29,.95),rgba(7,10,12,.95));border:1px solid #6c828b;border-radius:8px 8px 0 0;font-size:15px;letter-spacing:.04em}
#cinematicTurnState{padding:12px 8px;border:2px solid #5cc7ff;background:linear-gradient(180deg,#0a537e,#062a45);box-shadow:0 0 0 3px #091319,0 0 22px rgba(66,190,255,.45),inset 0 0 18px rgba(128,220,255,.16);font-size:20px;font-weight:700;color:#dff8ff}
.controls{top:calc(40% + 90px)!important;right:21px!important;width:190px!important}
#endTurnBtn{font-size:20px!important;min-height:58px!important}
#cancelBtn{display:none!important}

/* cards: larger and lower, like a physical fan */
.hand-wrap{width:min(820px,68vw)!important;height:260px!important;bottom:-12px!important}
.hand{height:258px!important;padding-bottom:3px!important}
.hand .card{width:150px!important;height:222px!important;flex-basis:150px!important;margin-left:-27px!important;border-radius:10px!important}
.hand .card:nth-child(1){transform:rotate(-10deg) translateY(20px)!important}.hand .card:nth-child(2){transform:rotate(-5deg) translateY(7px)!important}.hand .card:nth-child(3){transform:rotate(0deg) translateY(0)!important}.hand .card:nth-child(4){transform:rotate(5deg) translateY(7px)!important}.hand .card:nth-child(5){transform:rotate(10deg) translateY(20px)!important}
.hand .card:hover{transform:translateY(-90px) scale(1.38)!important;z-index:180!important}

/* edge machinery */
#game::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:12;background:linear-gradient(90deg,rgba(3,7,9,.9) 0 2.5%,transparent 7% 93%,rgba(3,7,9,.9) 97.5% 100%);box-shadow:inset 30px 0 45px rgba(0,0,0,.6),inset -30px 0 45px rgba(0,0,0,.6)}
.battle-left-rail{top:36%!important}
.rail-button{width:58px!important;height:56px!important;background:linear-gradient(180deg,#12191d,#06090b)!important;border-color:#52636b!important}

@media(max-width:1300px){
  #opponentBoard,#myBoard{width:68vw!important;gap:12px!important}
  .board-figure{transform:scale(.88);margin:-9px!important}
  .deck-stack{transform:scale(.82)}
  .cinematic-turn-panel{right:6px;width:180px}.controls{right:10px!important;width:170px!important}#endTurnBtn{width:170px!important}
}
@media(max-height:850px){
  #opponentHero{top:2px!important;transform:translateX(-50%) scale(.78)!important}
  #opponentBoard{top:110px!important;height:175px!important}
  #myBoard{bottom:276px!important;height:175px!important}
  #myHero{bottom:168px!important;transform:translateX(-50%) scale(.78)!important}
  .hand-wrap{height:184px!important}.hand{height:184px!important}.hand .card{width:108px!important;height:160px!important;flex-basis:108px!important;margin-left:-18px!important}
  .cinematic-turn-panel{top:38%;transform:scale(.85);transform-origin:right center}.controls{top:50%!important;transform:scale(.85);transform-origin:right center}
  .deck-stack.enemy{top:115px}.deck-stack.mine{bottom:115px}
}


.board-figure .figure-body{background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.06),transparent 42%),linear-gradient(180deg,rgba(8,11,15,.08),rgba(8,11,15,0));}
.board-figure .figure-body::before{content:'';position:absolute;inset:10% 24% auto 24%;height:22%;background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,0));filter:blur(10px);pointer-events:none;z-index:1}
.board-figure .miniature-canvas{position:absolute;inset:0;z-index:2;pointer-events:none}
.board-figure .figure-fallback{pointer-events:none}



/* ===== ancien pass de placement, désormais remplacé par la reconstruction V21.2.53 ===== */
body.game-mode{background:#020304!important;overflow:hidden!important}
body.game-mode #game{
  position:fixed!important;inset:0!important;
  width:100vw!important;height:100vh!important;
  background:#030506!important;
  overflow:hidden!important;
}
body.game-mode #game::before{content:''!important;position:fixed!important;inset:0!important;z-index:1!important;pointer-events:none!important;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.02) 70%,rgba(0,0,0,.15))!important}
body.game-mode #game::after{content:''!important;position:fixed!important;inset:0!important;z-index:2!important;pointer-events:none!important;box-shadow:inset 0 0 90px rgba(0,0,0,.48)!important;background:transparent!important}
body.game-mode .cinematic-brand{z-index:80!important;left:23px!important;top:19px!important}
body.game-mode .cinematic-brand strong{font-size:17px!important;letter-spacing:.28em!important}
body.game-mode .cinematic-brand small{font-size:9px!important}
body.game-mode #leaveBtn{position:fixed!important;right:20px!important;top:18px!important;z-index:100!important}

body.game-mode .game-shell,
body.game-mode .main-column{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important;padding:0!important;z-index:5!important}
body.game-mode .arena{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;z-index:5!important}
body.game-mode .arena::before{content:''!important;position:absolute!important;left:11.5%!important;right:11.5%!important;top:21%!important;bottom:29%!important;z-index:3!important;pointer-events:none!important;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%)!important;background:linear-gradient(180deg,rgba(7,11,13,.50),rgba(8,11,13,.64))!important;border:1px solid rgba(193,207,214,.08)!important;box-shadow:inset 0 0 70px rgba(0,0,0,.40)!important;transform:none!important}
body.game-mode .arena::after{display:none!important}
body.game-mode .table-crown,body.game-mode .table-crest,body.game-mode .board-glow,body.game-mode .middle-line{display:none!important}

/* HUD commandants exactement dans l'axe du visuel */
body.game-mode #opponentHero,body.game-mode #myHero{position:fixed!important;left:50%!important;transform:translateX(-50%)!important;width:560px!important;height:138px!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:45!important;overflow:visible!important}
body.game-mode #opponentHero{top:20px!important}
body.game-mode #myHero{bottom:190px!important}
body.game-mode .cin-hero-hud{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible}
body.game-mode .cin-hero-core{position:relative;width:205px;height:128px;display:grid;place-items:center}
body.game-mode .cin-hero-avatar{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:103px;height:103px;border-radius:50%;overflow:hidden;border:5px solid #4a8cc0;box-shadow:0 0 0 4px #0b1116,0 0 22px rgba(58,172,239,.58),inset 0 0 20px rgba(255,255,255,.08);background:#091018}
body.game-mode .cin-hero-hud.enemy .cin-hero-avatar{border-color:#869523;box-shadow:0 0 0 4px #0f1209,0 0 24px rgba(190,228,48,.52),inset 0 0 20px rgba(255,255,255,.06)}
body.game-mode .cin-hero-avatar img{width:100%;height:100%;object-fit:cover}
body.game-mode .cin-orb{position:absolute;top:33px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:19px;font-weight:900;color:#fff;border:3px solid #ccb24c;background:radial-gradient(circle at 35% 25%,#ffdc5e,#6a5110 58%,#181005);box-shadow:0 0 0 3px #101314,0 0 14px rgba(255,209,77,.45);z-index:6}
body.game-mode .cin-orb.energy{left:2px}
body.game-mode .cin-orb.hp{right:2px;border-color:#ff767a;background:radial-gradient(circle at 35% 25%,#ff7777,#8f1d24 58%,#2a0809);box-shadow:0 0 0 3px #101314,0 0 14px rgba(255,80,86,.45)}
body.game-mode .cin-hero-hud.enemy .cin-orb.energy{border-color:#b5d638;background:radial-gradient(circle at 35% 25%,#dffb62,#607216 60%,#172006)}
body.game-mode .cin-hero-name{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);min-width:178px;padding:5px 13px;text-align:center;font-family:Georgia,serif;font-size:15px;font-weight:700;color:#f8fbfc;white-space:nowrap;background:linear-gradient(180deg,rgba(19,26,30,.96),rgba(5,8,10,.97));border:1px solid #8d9699;border-radius:3px;box-shadow:0 3px 8px #000}
body.game-mode .cin-power-wrap{position:absolute;left:calc(50% + 112px);top:22px;width:315px;z-index:8}
body.game-mode .cin-power{width:315px;min-height:74px;padding:10px 14px;display:flex;align-items:center;gap:12px;text-align:left;border:2px solid #47b9ed;border-radius:7px;background:linear-gradient(180deg,rgba(7,31,48,.97),rgba(3,15,25,.97));color:#eaffff;box-shadow:0 0 0 3px rgba(3,8,12,.92),0 0 18px rgba(65,184,238,.26);font-family:Georgia,serif}
body.game-mode .cin-power.enemy{border-color:#8ba923;background:linear-gradient(180deg,rgba(20,30,6,.97),rgba(7,11,3,.97));box-shadow:0 0 0 3px rgba(8,10,4,.92),0 0 18px rgba(190,228,45,.22)}
body.game-mode .cin-power strong{display:block;font-size:15px;line-height:1.1}
body.game-mode .cin-power small{display:block;margin-top:4px;font-size:12px;line-height:1.25;color:#d4e6ed}
body.game-mode .cin-power.enemy small{color:#e4efbf}
body.game-mode .cin-power-icon{flex:0 0 48px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:radial-gradient(circle,#0f4566,#05131d);border:2px solid #72d1ff;color:#e7fbff}
body.game-mode .cin-power.enemy .cin-power-icon{background:radial-gradient(circle,#52650d,#121904);border-color:#c4e742;color:#f0ff8c}
body.game-mode .cin-power.used{filter:grayscale(.8) brightness(.65)}
body.game-mode .hero-drop-zone.attackable .cin-hero-avatar{animation:heroTargetPulse .75s infinite alternate}

/* zones de figurines : trois gros emplacements visuels comme sur la référence */
body.game-mode #opponentBoard,body.game-mode #myBoard{position:fixed!important;left:50%!important;transform:translateX(-50%)!important;width:min(760px,58vw)!important;height:190px!important;display:flex!important;justify-content:center!important;align-items:flex-end!important;gap:55px!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:32!important;overflow:visible!important}
body.game-mode #opponentBoard{top:205px!important}
body.game-mode #myBoard{bottom:328px!important}
body.game-mode .board-figure{flex:0 0 165px!important;width:165px!important;height:205px!important;margin:0!important;transform-origin:center bottom!important}
body.game-mode .board-figure:hover{transform:translateY(-9px) scale(1.07)!important}
body.game-mode .figure-body{left:8px!important;right:8px!important;top:-4px!important;height:166px!important;clip-path:none!important;overflow:visible!important;filter:drop-shadow(0 13px 10px rgba(0,0,0,.78)) drop-shadow(0 0 10px rgba(59,178,241,.30))!important;background:transparent!important}
body.game-mode .faction-parasite .figure-body{filter:drop-shadow(0 13px 10px rgba(0,0,0,.82)) drop-shadow(0 0 12px rgba(183,225,49,.34))!important}
body.game-mode .figure-body::after,body.game-mode .figure-body::before{display:none!important}
body.game-mode .miniature-canvas{width:100%!important;height:100%!important;transform:scale(1.08)!important;filter:contrast(1.04) saturate(1.08)}
body.game-mode .figure-fallback{opacity:0!important}
body.game-mode .figure-base{left:7px!important;right:7px!important;bottom:12px!important;height:47px!important;border-radius:50%!important}
body.game-mode .figure-name{display:none!important}
body.game-mode .figure-stat{bottom:7px!important;width:37px!important;height:37px!important;min-width:37px!important;font-size:18px!important;border-width:2px!important}
body.game-mode .figure-stat.atk{left:7px!important}.figure-stat.hp{right:7px!important}.figure-stat.def{left:50%!important;bottom:0!important;width:25px!important;height:25px!important;min-width:25px!important;font-size:10px!important}
body.game-mode #opponentBoard .empty-slot,body.game-mode #myBoard .empty-slot{opacity:.18!important;color:#dce7ea!important;border:1px dashed rgba(255,255,255,.12)!important;background:rgba(4,8,10,.16)!important}

/* Piles comme l'image : une à gauche et une à droite en haut */
body.game-mode .deck-stack{position:fixed!important;top:170px!important;width:86px!important;height:118px!important;z-index:40!important;transform:none!important}
body.game-mode .deck-stack.enemy{left:30px!important}
body.game-mode .deck-stack.mine{right:31px!important;bottom:auto!important}
body.game-mode .deck-card-back{border-radius:4px!important;background:linear-gradient(160deg,#0e1309,#070805)!important;border:2px solid #9a8b36!important;color:#d0dc4b!important;box-shadow:-4px 5px 0 #080907,-8px 10px 0 #0b0c09,-12px 15px 0 #050605,0 0 14px rgba(192,223,45,.20)!important}
body.game-mode .deck-stack.mine .deck-card-back{background:linear-gradient(160deg,#0e1309,#070805)!important;border-color:#9a8b36!important;color:#d0dc4b!important;box-shadow:4px 5px 0 #080907,8px 10px 0 #0b0c09,12px 15px 0 #050605,0 0 14px rgba(192,223,45,.20)!important}
body.game-mode .deck-stack>span{right:-9px!important;bottom:-9px!important;width:36px!important;height:36px!important;border-radius:6px!important}

/* Rail gauche et panneau de tour à droite */
body.game-mode .battle-left-rail{position:fixed!important;left:0!important;top:36%!important;z-index:70!important;gap:6px!important}
body.game-mode .rail-button{width:60px!important;height:57px!important;border-radius:0 5px 5px 0!important;background:linear-gradient(180deg,rgba(14,20,24,.98),rgba(4,7,9,.98))!important;border:1px solid #69777d!important;border-left:0!important}
body.game-mode .cinematic-turn-panel{position:fixed!important;right:0!important;top:36%!important;width:208px!important;z-index:70!important;transform:none!important}
body.game-mode #cinematicTurnNumber{font-size:15px!important;padding:8px!important;border-radius:6px 0 0 0!important}
body.game-mode #cinematicTurnState{font-size:20px!important;padding:13px 7px!important;border-radius:0!important}
body.game-mode .controls{position:fixed!important;right:0!important;top:calc(36% + 104px)!important;width:208px!important;height:auto!important;z-index:71!important;background:transparent!important;border:0!important;padding:0!important}
body.game-mode #selectionText,body.game-mode #cancelBtn{display:none!important}
body.game-mode #endTurnBtn{width:208px!important;min-height:62px!important;margin:0!important;border-radius:0 0 0 7px!important;font-family:Georgia,serif!important;font-size:21px!important;background:linear-gradient(180deg,#0877b7,#043e65)!important;border:2px solid #6bd3ff!important;box-shadow:0 0 0 3px #061118,0 0 19px rgba(56,185,247,.42),inset 0 0 15px rgba(127,224,255,.16)!important}

/* main : grandes cartes en éventail au ras du bas */
body.game-mode .hand-wrap{position:fixed!important;left:50%!important;bottom:-25px!important;transform:translateX(-50%)!important;width:min(850px,70vw)!important;height:245px!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:55!important;overflow:visible!important}
body.game-mode .hand-topline{display:none!important}
body.game-mode .hand{height:245px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important;overflow:visible!important}
body.game-mode .hand .card{width:150px!important;height:220px!important;flex:0 0 150px!important;margin-left:-27px!important;transform-origin:50% 100%!important;box-shadow:0 12px 18px rgba(0,0,0,.7)!important}
body.game-mode .hand .card:first-child{margin-left:0!important}
body.game-mode .hand .card:nth-child(1){transform:rotate(-10deg) translateY(22px)!important}
body.game-mode .hand .card:nth-child(2){transform:rotate(-5deg) translateY(8px)!important}
body.game-mode .hand .card:nth-child(3){transform:rotate(0) translateY(0)!important}
body.game-mode .hand .card:nth-child(4){transform:rotate(5deg) translateY(8px)!important}
body.game-mode .hand .card:nth-child(5){transform:rotate(10deg) translateY(22px)!important}
body.game-mode .hand .card:hover{transform:translateY(-105px) scale(1.42)!important;z-index:200!important}

/* Le journal devient un tiroir et ne casse plus la composition */
body.game-mode .side-column{position:fixed!important;left:70px!important;top:35%!important;width:360px!important;height:340px!important;z-index:120!important;transform:translateX(-460px)!important;transition:transform .2s ease!important;background:rgba(4,8,10,.94)!important;border:1px solid rgba(114,144,156,.35)!important;border-radius:10px!important;box-shadow:0 18px 50px rgba(0,0,0,.6)!important}
body.game-mode .side-column.open{transform:translateX(0)!important}
body.game-mode .log-panel{height:100%!important;background:transparent!important;border:0!important}

@media(max-width:1350px){
  body.game-mode #opponentBoard,body.game-mode #myBoard{width:62vw!important;gap:22px!important}
  body.game-mode .board-figure{transform:scale(.90)!important;margin:-5px!important}
  body.game-mode .cin-power-wrap{left:calc(50% + 100px)!important;width:265px!important}
  body.game-mode .cin-power{width:265px!important}
  body.game-mode .hand-wrap{width:72vw!important}
  body.game-mode .hand .card{width:128px!important;height:188px!important;flex-basis:128px!important;margin-left:-23px!important}
}
@media(max-height:900px){
  body.game-mode #opponentHero{top:5px!important;transform:translateX(-50%) scale(.84)!important}
  body.game-mode #opponentBoard{top:138px!important;height:168px!important}
  body.game-mode #myBoard{bottom:274px!important;height:168px!important}
  body.game-mode #myHero{bottom:156px!important;transform:translateX(-50%) scale(.84)!important}
  body.game-mode .hand-wrap{height:180px!important;bottom:-20px!important}.hand{height:180px!important}
  body.game-mode .hand .card{width:108px!important;height:160px!important;flex-basis:108px!important;margin-left:-18px!important}
  body.game-mode .cinematic-turn-panel{top:34%!important;transform:scale(.88)!important;transform-origin:right center!important}
  body.game-mode .controls{top:calc(34% + 92px)!important;transform:scale(.88)!important;transform-origin:right top!important}
  body.game-mode .deck-stack{top:116px!important;transform:scale(.84)!important}
}


/* ===== V21.2.53 — le prototype visuel devient une vraie interface, pas un wallpaper ===== */
body.game-mode #game{
  background:#030608!important;
  isolation:isolate;
}
body.game-mode #game::before{
  content:''!important;position:fixed!important;inset:0!important;z-index:0!important;pointer-events:none!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(79,100,111,.15),transparent 35%),
    linear-gradient(180deg,#070a0c 0 16%,#11171b 16% 74%,#06090b 74% 100%)!important;
}
body.game-mode #game::after{
  content:''!important;position:fixed!important;inset:0!important;z-index:90!important;pointer-events:none!important;
  background:linear-gradient(90deg,rgba(0,0,0,.54),transparent 9% 91%,rgba(0,0,0,.54));
  box-shadow:inset 0 0 80px rgba(0,0,0,.58)!important;
}
body.game-mode .prototype-scenery{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none}

/* plafond infesté / coque supérieure */
body.game-mode .ship-ceiling{position:absolute;left:0;right:0;top:0;height:24%;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(3,6,7,.96),rgba(12,13,10,.92)),
    repeating-linear-gradient(90deg,#172027 0 5px,#080c0f 5px 58px);
  border-bottom:4px solid #49412a;box-shadow:0 12px 28px rgba(0,0,0,.68),inset 0 -10px 24px rgba(225,171,42,.08)}
body.game-mode .ship-ceiling::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 16% 44%,rgba(169,208,42,.64) 0 2.5%,rgba(65,78,14,.45) 3% 6%,transparent 7%),
  radial-gradient(ellipse at 30% 18%,rgba(191,226,49,.60) 0 3%,rgba(71,82,15,.4) 3.5% 7%,transparent 8%),
  radial-gradient(ellipse at 68% 42%,rgba(187,225,46,.64) 0 3%,rgba(73,87,16,.4) 3.5% 7%,transparent 8%),
  radial-gradient(ellipse at 83% 17%,rgba(177,216,45,.62) 0 2.8%,rgba(62,77,14,.38) 3.5% 7%,transparent 8%);
  filter:drop-shadow(0 0 10px rgba(190,228,47,.28))}
body.game-mode .hive-mass{position:absolute;border-radius:46% 54% 58% 42%;background:
  radial-gradient(circle at 36% 30%,#d7f65d 0 5%,#708513 7% 13%,#1b2206 15% 30%,transparent 31%),
  radial-gradient(circle at 61% 66%,#b6dd35 0 4%,#5b7010 5% 12%,#131804 14% 31%,transparent 33%),
  repeating-radial-gradient(circle at 52% 48%,rgba(84,51,28,.9) 0 9px,rgba(25,18,13,.95) 10px 16px,rgba(122,160,25,.18) 17px 20px);
  border:3px solid rgba(106,70,38,.7);box-shadow:0 0 18px rgba(183,224,44,.2),inset 0 0 30px #050603}
body.game-mode .hive-a{width:34%;height:118%;left:-5%;top:-18%;transform:rotate(-8deg)}
body.game-mode .hive-b{width:34%;height:112%;left:33%;top:-28%;transform:rotate(3deg)}
body.game-mode .hive-c{width:36%;height:120%;right:-5%;top:-19%;transform:rotate(8deg)}
body.game-mode .hive-tendril{position:absolute;height:18px;border-radius:999px;background:linear-gradient(180deg,#3b261b,#110c09 40%,#6c371a 75%,#1a120c);box-shadow:0 0 0 2px rgba(132,76,32,.42),0 0 12px rgba(178,220,40,.12)}
body.game-mode .tendril-a{width:42%;left:5%;top:69%;transform:rotate(8deg)}
body.game-mode .tendril-b{width:43%;right:3%;top:61%;transform:rotate(-11deg)}
body.game-mode .tendril-c{width:32%;left:37%;top:31%;transform:rotate(14deg)}
body.game-mode .arena.enemy-synthetic~* .ship-ceiling{}

/* plateau métallique réel */
body.game-mode .battle-floor{position:absolute;left:7.8%;right:7.8%;top:20.5%;bottom:18.5%;clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);
  background:
    linear-gradient(90deg,transparent 0 49.82%,rgba(207,175,89,.16) 49.9% 50.1%,transparent 50.18%),
    repeating-linear-gradient(0deg,transparent 0 92px,rgba(154,140,95,.23) 93px 96px,transparent 97px 185px),
    repeating-linear-gradient(90deg,transparent 0 194px,rgba(116,111,83,.16) 195px 199px,transparent 200px 388px),
    radial-gradient(ellipse at 50% 45%,rgba(57,65,69,.52),transparent 55%),
    linear-gradient(180deg,#30373a,#1d2529 48%,#141b1f);
  border:4px solid #38454c;border-top-color:#665f42;box-shadow:inset 0 0 85px rgba(0,0,0,.60),0 10px 30px rgba(0,0,0,.70)}
body.game-mode .battle-floor::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 16% 28%,rgba(128,38,26,.38) 0 2px,transparent 3px),
  radial-gradient(circle at 66% 14%,rgba(121,37,28,.35) 0 2px,transparent 3px),
  radial-gradient(circle at 81% 64%,rgba(119,31,28,.38) 0 2px,transparent 3px);
  background-size:19px 23px,31px 37px,27px 29px;opacity:.38;mix-blend-mode:screen}
body.game-mode .floor-grid{position:absolute;inset:0;background:linear-gradient(90deg,rgba(218,191,97,.13) 1px,transparent 1px),linear-gradient(0deg,rgba(218,191,97,.10) 1px,transparent 1px);background-size:12.5% 100%,100% 19.5%;opacity:.44}
body.game-mode .floor-emblem{position:absolute;left:50%;top:45%;width:128px;height:128px;transform:translate(-50%,-50%);border:3px solid rgba(170,157,107,.24);border-radius:50%;box-shadow:0 0 0 9px rgba(130,118,80,.06)}
body.game-mode .floor-emblem::before,body.game-mode .floor-emblem::after{content:'';position:absolute;left:50%;top:50%;background:rgba(191,179,121,.28);transform:translate(-50%,-50%)}
body.game-mode .floor-emblem::before{width:92px;height:3px}.floor-emblem::after{width:3px;height:92px}
body.game-mode .floor-emblem span{position:absolute;inset:24px;transform:rotate(45deg);border:2px solid rgba(191,179,121,.23)}
body.game-mode .floor-scar{position:absolute;height:4px;border-radius:100%;background:linear-gradient(90deg,transparent,#601d18,#b84d27,#5a1917,transparent);filter:blur(.1px);opacity:.58}
body.game-mode .scar-a{width:42%;left:7%;top:24%;transform:rotate(5deg)}
body.game-mode .scar-b{width:39%;right:8%;top:56%;transform:rotate(-7deg)}
body.game-mode .scar-c{width:28%;left:37%;top:73%;transform:rotate(2deg)}
body.game-mode .sector-copy{position:absolute;color:rgba(219,224,222,.44);font:700 14px/1.25 Arial,sans-serif;letter-spacing:.05em;text-shadow:0 2px 3px #000;transform:skewY(-5deg)}
body.game-mode .sector-copy strong{font-size:16px}.sector-left{left:7%;top:53%}.sector-right{right:5.5%;top:56%;text-align:right}

/* rails mécaniques latéraux / profondeur */
body.game-mode .side-frame{position:absolute;top:16%;bottom:0;width:8%;background:
  repeating-linear-gradient(0deg,#11171b 0 15px,#26333a 16px 21px,#06090b 22px 36px),
  linear-gradient(90deg,#050708,#202c32,#06090b);box-shadow:inset 0 0 24px #000,0 0 24px #000}
body.game-mode .frame-left{left:0;border-right:3px solid #35454d}.frame-right{right:0;border-left:3px solid #35454d}
body.game-mode .side-frame::after{content:'';position:absolute;inset:6% 24%;background:repeating-linear-gradient(0deg,#0b1a20 0 12px,#106ea0 13px 17px,#071014 18px 38px);box-shadow:0 0 12px rgba(47,173,229,.34)}
body.game-mode .frame-right::after{background:repeating-linear-gradient(0deg,#0b161b 0 12px,#a36d13 13px 17px,#071014 18px 38px);box-shadow:0 0 12px rgba(222,145,38,.22)}

/* consoles avant-plan */
body.game-mode .foreground-console{position:absolute;bottom:-7%;width:26%;height:28%;z-index:5;background:linear-gradient(150deg,#11191e,#05080a 62%);border:4px solid #222d33;box-shadow:0 -8px 28px rgba(0,0,0,.78),inset 0 0 35px rgba(57,148,188,.12);clip-path:polygon(0 29%,18% 9%,79% 0,100% 22%,92% 100%,0 100%)}
body.game-mode .console-left{left:-3%;transform:rotate(3deg)}.console-right{right:-3%;transform:scaleX(-1) rotate(3deg)}
body.game-mode .foreground-console span{position:absolute;left:24%;top:44%;color:rgba(232,238,239,.36);font:700 18px/1.15 Arial,sans-serif;letter-spacing:.08em;transform:scaleX(1)}
body.game-mode .console-right span{transform:scaleX(-1);left:27%}
body.game-mode .foreground-console::before{content:'';position:absolute;left:34%;top:17%;width:30%;height:15%;background:linear-gradient(180deg,#14384a,#071016);border:2px solid #48616d;box-shadow:0 0 14px rgba(51,177,231,.28)}
body.game-mode .console-right::before{box-shadow:0 0 14px rgba(231,156,50,.20)}
body.game-mode .space-window{position:absolute;right:1.2%;top:4%;width:9%;height:18%;z-index:2;clip-path:polygon(12% 0,100% 6%,92% 100%,0 91%);background:linear-gradient(155deg,#0d2740,#5178a0 50%,#102235);border:3px solid #4e5f65;box-shadow:inset 0 0 24px rgba(0,0,0,.58)}
body.game-mode .space-stars{position:absolute;inset:0;background:radial-gradient(circle at 22% 34%,#fff 0 1px,transparent 2px),radial-gradient(circle at 66% 27%,#bedcff 0 1px,transparent 2px),radial-gradient(circle at 80% 69%,#fff 0 1px,transparent 2px);background-size:38px 38px,53px 53px,67px 67px}

/* les vraies zones interactives restent au-dessus du décor */
body.game-mode .game-shell,body.game-mode .main-column,body.game-mode .arena{z-index:10!important}
body.game-mode .cinematic-brand,body.game-mode .deck-stack,body.game-mode .battle-left-rail,body.game-mode .cinematic-turn-panel,body.game-mode .controls,body.game-mode .hand-wrap,body.game-mode #opponentHero,body.game-mode #myHero,body.game-mode #opponentBoard,body.game-mode #myBoard{z-index:40!important}
body.game-mode .arena{background:transparent!important}
body.game-mode .arena::before,body.game-mode .arena::after{display:none!important}

/* au lieu du wallpaper, on donne de la matière aux HUDs */
body.game-mode .deck-card-back{background:
  radial-gradient(circle at 50% 46%,rgba(196,224,59,.25),transparent 28%),
  linear-gradient(135deg,#161b0b,#050604)!important}
body.game-mode .cinematic-turn-panel,#endTurnBtn,.cin-power,.cin-hero-name{backdrop-filter:blur(3px)}
body.game-mode .hand .card{filter:drop-shadow(0 10px 10px rgba(0,0,0,.62));}

/* faction adverse : la partie haute du décor change sans changer la géométrie */
body.game-mode .arena.enemy-synthetic ~ .prototype-scenery .ship-ceiling{}
body.game-mode:has(.arena.enemy-synthetic) .ship-ceiling{filter:hue-rotate(75deg) saturate(.65)}
body.game-mode:has(.arena:not(.enemy-parasite):not(.enemy-synthetic)) .ship-ceiling{filter:hue-rotate(130deg) saturate(.45)}

@media(max-width:1350px){
  body.game-mode .foreground-console{width:29%}.sector-copy{font-size:11px!important}.sector-copy strong{font-size:13px!important}
}
@media(max-height:820px){
  body.game-mode .ship-ceiling{height:22%}.battle-floor{top:18%!important;bottom:16%!important}.foreground-console{height:25%!important}
}


/* ===== V21.2.54 — reconstruction de l'interface à partir du prototype validé ===== */
body.game-mode{background:#030608!important;color:#edf7ff;overflow:hidden!important}
body.game-mode #game{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;overflow:hidden!important;background:#020407!important}
body.game-mode #game::before{content:''!important;position:fixed!important;inset:0!important;z-index:0!important;pointer-events:none!important;background:
  linear-gradient(180deg,rgba(3,4,6,.48),rgba(3,4,6,.18) 30%,rgba(3,4,6,.08) 50%,rgba(3,4,6,.24) 72%,rgba(2,4,6,.75) 100%),
  url('/static/assets/plateau_vaisseau_abandonne.png') center center / cover no-repeat!important;filter:saturate(1.05) contrast(1.03)}
body.game-mode #game::after{content:''!important;position:fixed!important;inset:0!important;z-index:90!important;pointer-events:none!important;background:
  radial-gradient(circle at 50% 54%,transparent 0 40%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.42) 100%),
  linear-gradient(90deg,rgba(0,0,0,.56),transparent 9%,transparent 91%,rgba(0,0,0,.56));box-shadow:inset 0 0 120px rgba(0,0,0,.72)!important}
body.game-mode .prototype-scenery{position:fixed!important;inset:0!important;z-index:1!important;pointer-events:none!important;overflow:hidden!important}
body.game-mode .ship-ceiling{position:absolute!important;left:0!important;right:0!important;top:0!important;height:26%!important;overflow:hidden!important;background:linear-gradient(180deg,rgba(6,8,9,.95),rgba(11,12,9,.88));border-bottom:2px solid rgba(180,149,65,.42)!important;box-shadow:0 10px 28px rgba(0,0,0,.58), inset 0 -24px 42px rgba(137,109,31,.10)!important}
body.game-mode .ship-ceiling::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,240,140,.05),transparent 50%,rgba(0,0,0,.28));}
body.game-mode .hive-mass{opacity:.92!important;filter:drop-shadow(0 0 14px rgba(203,255,97,.16))!important}
body.game-mode .hive-tendril{opacity:.95!important}
body.game-mode .battle-floor{position:absolute!important;left:9%!important;right:9%!important;top:20.8%!important;bottom:16.8%!important;clip-path:polygon(2.7% 0,97.3% 0,100% 100%,0 100%)!important;background:
  linear-gradient(90deg,transparent 0 49.88%,rgba(198,170,86,.16) 49.93%,rgba(198,170,86,.16) 50.07%,transparent 50.12%),
  repeating-linear-gradient(0deg,transparent 0 18%,rgba(191,179,132,.18) 18.2% 18.5%,transparent 18.7% 37%),
  repeating-linear-gradient(90deg,transparent 0 12.4%,rgba(191,179,132,.12) 12.5% 12.7%,transparent 12.8% 25%),
  linear-gradient(180deg,rgba(49,55,58,.70),rgba(18,23,27,.78));border:3px solid rgba(107,118,126,.42)!important;border-top-color:rgba(194,165,79,.55)!important;box-shadow:inset 0 0 90px rgba(0,0,0,.52),0 16px 38px rgba(0,0,0,.46)!important}
body.game-mode .battle-floor::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 14% 26%,rgba(126,30,28,.50) 0 3px,transparent 4px),
  radial-gradient(circle at 23% 34%,rgba(126,30,28,.30) 0 2px,transparent 3px),
  radial-gradient(circle at 66% 23%,rgba(126,30,28,.42) 0 2px,transparent 3px),
  radial-gradient(circle at 76% 68%,rgba(126,30,28,.46) 0 2px,transparent 3px),
  radial-gradient(circle at 45% 55%,rgba(126,30,28,.34) 0 2px,transparent 3px);
  background-size:18px 20px,24px 28px,30px 35px,22px 26px,27px 30px;opacity:.55}
body.game-mode .battle-floor::after{content:'';position:absolute;left:50%;top:50%;width:122px;height:122px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(192,180,128,.18);box-shadow:0 0 0 10px rgba(192,180,128,.06),0 0 0 28px rgba(192,180,128,.03)}
body.game-mode .floor-grid,body.game-mode .floor-scar,body.game-mode .floor-emblem,body.game-mode .sector-copy{display:block!important;position:absolute!important}
body.game-mode .floor-grid{inset:0!important;background:linear-gradient(90deg,rgba(205,190,135,.10) 1px,transparent 1px),linear-gradient(0deg,rgba(205,190,135,.08) 1px,transparent 1px)!important;background-size:12.5% 100%,100% 20%!important;opacity:.65!important}
body.game-mode .floor-emblem{left:50%!important;top:50%!important;width:86px!important;height:86px!important;transform:translate(-50%,-50%)!important;border:2px solid rgba(201,189,135,.20)!important;border-radius:50%!important}
body.game-mode .floor-emblem::before,body.game-mode .floor-emblem::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(201,189,135,.20)}
body.game-mode .floor-emblem::before{width:62px;height:2px}.floor-emblem::after{width:2px;height:62px}
body.game-mode .floor-emblem span{position:absolute;inset:16px;border:2px solid rgba(201,189,135,.16);transform:rotate(45deg)}
body.game-mode .scar-a{width:42%;left:9%;top:28%;height:4px;background:linear-gradient(90deg,transparent,rgba(126,29,26,.1),rgba(184,67,52,.55),rgba(126,29,26,.25),transparent);transform:rotate(6deg)}
body.game-mode .scar-b{width:36%;right:10%;top:56%;height:4px;background:linear-gradient(90deg,transparent,rgba(126,29,26,.08),rgba(184,67,52,.50),rgba(126,29,26,.22),transparent);transform:rotate(-9deg)}
body.game-mode .scar-c{width:24%;left:43%;top:75%;height:4px;background:linear-gradient(90deg,transparent,rgba(126,29,26,.08),rgba(184,67,52,.40),rgba(126,29,26,.18),transparent);transform:rotate(3deg)}
body.game-mode .sector-copy{font-family:Arial,sans-serif!important;font-weight:700!important;line-height:1.22!important;letter-spacing:.06em!important;color:rgba(222,232,236,.44)!important;text-shadow:0 2px 4px rgba(0,0,0,.7)!important}
body.game-mode .sector-copy strong{font-size:17px!important}
body.game-mode .sector-left{left:7.4%!important;top:57.2%!important;transform:skewY(-5deg)!important}
body.game-mode .sector-right{right:5.2%!important;top:56.5%!important;text-align:right!important;transform:skewY(-5deg)!important}
body.game-mode .side-frame{position:absolute!important;top:15.4%!important;bottom:12.8%!important;width:8.8%!important;background:linear-gradient(90deg,#0b1115,#1c262d 38%,#06090b)!important;box-shadow:inset 0 0 30px rgba(0,0,0,.65),0 0 24px rgba(0,0,0,.35)!important}
body.game-mode .frame-left{left:0!important;border-right:2px solid rgba(94,113,126,.35)!important}
body.game-mode .frame-right{right:0!important;border-left:2px solid rgba(94,113,126,.35)!important}
body.game-mode .side-frame::after{content:'';position:absolute;inset:6% 25%;background:repeating-linear-gradient(0deg,#101920 0 12px,#0b5a82 13px 17px,#081116 18px 36px)!important;box-shadow:0 0 12px rgba(55,176,237,.20)!important}
body.game-mode .frame-right::after{background:repeating-linear-gradient(0deg,#101920 0 12px,#8d6f1d 13px 17px,#081116 18px 36px)!important;box-shadow:0 0 12px rgba(209,159,61,.18)!important}
body.game-mode .foreground-console{position:absolute!important;bottom:-10%!important;width:26%!important;height:26%!important;z-index:4!important;clip-path:polygon(0 32%,18% 10%,78% 0,100% 22%,92% 100%,0 100%)!important;background:linear-gradient(155deg,#121a1f,#05090b 65%)!important;border:3px solid rgba(58,74,84,.72)!important;box-shadow:0 -8px 28px rgba(0,0,0,.72), inset 0 0 30px rgba(46,171,230,.08)!important}
body.game-mode .console-left{left:-2.5%!important;transform:rotate(2deg)!important}.console-right{right:-2.5%!important;transform:scaleX(-1) rotate(2deg)!important}
body.game-mode .foreground-console span{position:absolute!important;left:20%!important;top:42%!important;color:rgba(233,239,242,.33)!important;font:700 18px/1.15 Arial,sans-serif!important;letter-spacing:.08em!important}
body.game-mode .console-right span{left:22%!important;transform:scaleX(-1)!important}
body.game-mode .space-window{position:absolute!important;right:1.2%!important;top:5.4%!important;width:10.2%!important;height:18.4%!important;z-index:2!important;clip-path:polygon(12% 0,100% 6%,92% 100%,0 91%)!important;background:linear-gradient(155deg,#0d2740,#6487af 48%,#102235)!important;border:2px solid rgba(94,113,126,.66)!important;box-shadow:inset 0 0 22px rgba(0,0,0,.52)!important}
body.game-mode .space-stars{position:absolute!important;inset:0!important;background:radial-gradient(circle at 22% 34%,#fff 0 1px,transparent 2px),radial-gradient(circle at 66% 27%,#bedcff 0 1px,transparent 2px),radial-gradient(circle at 80% 69%,#fff 0 1px,transparent 2px)!important;background-size:38px 38px,53px 53px,67px 67px!important}
body.game-mode .game-shell,body.game-mode .main-column,body.game-mode .arena{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:10!important;padding:0!important;margin:0!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important}
body.game-mode .arena::before,body.game-mode .arena::after,.table-crown,.table-crest,.board-glow,.middle-line{display:none!important}
body.game-mode .battle-left-rail{position:fixed!important;left:22px!important;top:40%!important;display:flex!important;flex-direction:column!important;gap:10px!important;z-index:52!important}
body.game-mode .rail-button{width:62px!important;height:62px!important;border-radius:10px!important;border:2px solid rgba(130,146,154,.55)!important;background:linear-gradient(180deg,rgba(18,22,26,.92),rgba(4,6,8,.96))!important;color:#f4fbff!important;box-shadow:0 6px 18px rgba(0,0,0,.42), inset 0 0 12px rgba(255,255,255,.03)!important}
body.game-mode .rail-button small{font-size:10px!important;letter-spacing:.09em!important}
body.game-mode .rail-button .rail-icon{font-size:22px!important}
body.game-mode .topbar{position:fixed!important;inset:0!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none!important;z-index:60!important}
body.game-mode .topbar>div:first-child{display:none!important}
body.game-mode .topbar-right{display:contents!important}
body.game-mode #leaveBtn{position:fixed!important;right:22px!important;top:18px!important;pointer-events:auto!important;z-index:65!important;background:rgba(14,18,22,.85)!important;border:1px solid rgba(117,129,136,.46)!important;color:#f3f7fa!important;padding:6px 12px!important}
body.game-mode .cinematic-brand{position:fixed!important;left:28px!important;top:18px!important;z-index:65!important;text-transform:uppercase!important}
body.game-mode .cinematic-brand strong{font-size:17px!important;letter-spacing:.28em!important;color:#f6fbff!important;text-shadow:0 2px 6px rgba(0,0,0,.5)!important}
body.game-mode .cinematic-brand small{font-size:9px!important;letter-spacing:.2em!important;color:#d4dde2!important}
body.game-mode .deck-stack{position:fixed!important;z-index:54!important;width:76px!important;height:104px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important}
body.game-mode .deck-stack.enemy{right:36px!important;top:165px!important}
body.game-mode .deck-stack.mine{left:36px!important;top:165px!important;bottom:auto!important}
body.game-mode .deck-card-back{width:66px!important;height:90px!important;border-radius:10px!important;border:2px solid rgba(205,226,58,.72)!important;background:radial-gradient(circle at 50% 50%,rgba(176,216,41,.16),transparent 28%),linear-gradient(180deg,#14160c,#060604)!important;box-shadow:0 0 18px rgba(192,227,67,.14),0 8px 18px rgba(0,0,0,.54)!important;color:transparent!important;position:relative!important}
body.game-mode .deck-card-back::before{content:'';position:absolute;inset:10px;background:radial-gradient(circle at 50% 50%,rgba(192,227,67,.25),transparent 30%),repeating-linear-gradient(45deg,rgba(192,227,67,.08) 0 2px,transparent 2px 10px);border-radius:8px}
body.game-mode .deck-stack span{position:absolute!important;left:-5px!important;bottom:-6px!important;display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:10px!important;background:linear-gradient(180deg,#11171b,#05090c)!important;border:2px solid rgba(170,180,185,.65)!important;color:#fff!important;font:800 22px/1 Georgia,serif!important;box-shadow:0 6px 18px rgba(0,0,0,.45)!important}
body.game-mode .deck-stack.enemy span{left:auto!important;right:-5px!important}
body.game-mode .cinematic-turn-panel{position:fixed!important;right:24px!important;top:274px!important;width:220px!important;padding:12px 16px!important;border-radius:12px!important;background:linear-gradient(180deg,rgba(11,19,25,.95),rgba(5,10,13,.97))!important;border:2px solid rgba(94,113,126,.58)!important;box-shadow:0 8px 22px rgba(0,0,0,.42)!important;z-index:58!important;text-align:center!important}
body.game-mode #cinematicTurnNumber{font:700 16px/1.1 Georgia,serif!important;color:#d6e1e7!important;margin-bottom:4px!important}
body.game-mode #cinematicTurnState{font:700 13px/1.2 Arial,sans-serif!important;color:#90b8d7!important;letter-spacing:.05em!important;text-transform:uppercase!important}
body.game-mode #turnBadge{position:fixed!important;right:24px!important;top:344px!important;width:220px!important;height:74px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 18px!important;border-radius:14px!important;border:2px solid #61c7ff!important;background:linear-gradient(180deg,#0e4a76,#0c1f31 82%)!important;color:#f5fbff!important;box-shadow:0 0 0 2px rgba(7,15,24,.82),0 0 22px rgba(72,185,255,.24)!important;font:800 18px/1.15 Georgia,serif!important;letter-spacing:.03em!important;text-align:center!important;pointer-events:none!important}
body.game-mode #turnBadge.mine{background:linear-gradient(180deg,#1390e9,#0f3655 82%)!important}
body.game-mode .controls{position:fixed!important;right:24px!important;top:428px!important;width:220px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;z-index:58!important}
body.game-mode #selectionText,body.game-mode #cancelBtn{display:none!important}
body.game-mode .control-buttons{display:block!important}
body.game-mode #endTurnBtn{display:flex!important;align-items:center!important;justify-content:center!important;width:220px!important;height:74px!important;border-radius:14px!important;border:2px solid #67bbff!important;background:linear-gradient(180deg,#1b7de2,#11385d 82%)!important;color:#f5fbff!important;box-shadow:0 0 0 2px rgba(8,16,24,.86),0 0 22px rgba(61,164,255,.22)!important;font:800 18px/1.1 Georgia,serif!important}
body.game-mode .side-column{position:fixed!important;left:96px!important;top:160px!important;bottom:160px!important;width:320px!important;transform:translateX(-360px)!important;transition:transform .2s ease!important;z-index:70!important}
body.game-mode .side-column.open{transform:translateX(0)!important}
body.game-mode .log-panel{height:100%!important;background:linear-gradient(180deg,rgba(8,14,18,.95),rgba(3,7,10,.97))!important;border:2px solid rgba(82,102,113,.58)!important;border-radius:16px!important;box-shadow:0 18px 32px rgba(0,0,0,.4)!important}
body.game-mode #opponentHero,body.game-mode #myHero{position:fixed!important;left:50%!important;transform:translateX(-50%)!important;width:720px!important;height:124px!important;z-index:56!important;background:none!important;border:0!important;box-shadow:none!important}
body.game-mode #opponentHero{top:26px!important}
body.game-mode #myHero{bottom:150px!important}
body.game-mode .cin-hero-hud{position:relative!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
body.game-mode .cin-hero-core{position:relative!important;width:250px!important;height:118px!important;display:grid!important;place-items:center!important}
body.game-mode .hero-drop-zone{position:absolute!important;left:50%!important;top:0!important;transform:translateX(-50%)!important}
body.game-mode .cin-hero-avatar{width:112px!important;height:112px!important;border-radius:50%!important;overflow:hidden!important;background:#0a1117!important;border:4px solid #419cff!important;box-shadow:0 0 0 4px rgba(7,11,15,.92),0 0 24px rgba(72,185,255,.34), inset 0 0 14px rgba(255,255,255,.06)!important}
body.game-mode .cin-hero-hud.enemy .cin-hero-avatar{border-color:#aecf32!important;box-shadow:0 0 0 4px rgba(10,10,6,.92),0 0 24px rgba(189,227,65,.26), inset 0 0 14px rgba(255,255,255,.04)!important}
body.game-mode .cin-orb{position:absolute!important;top:18px!important;width:56px!important;height:56px!important;border-radius:50%!important;display:grid!important;place-items:center!important;color:#fff!important;font:800 28px/1 Georgia,serif!important;border:3px solid rgba(255,215,98,.92)!important;background:radial-gradient(circle at 35% 26%,#f7da60,#79570f 58%,#1a1204)!important;box-shadow:0 0 0 3px rgba(9,13,17,.92),0 0 18px rgba(255,210,90,.24)!important;z-index:3!important}
body.game-mode .cin-hero-hud.enemy .cin-orb.energy{border-color:#bfdc39!important;background:radial-gradient(circle at 35% 26%,#dff960,#586f12 58%,#121906)!important;box-shadow:0 0 0 3px rgba(10,13,9,.92),0 0 18px rgba(205,245,79,.18)!important}
body.game-mode .cin-orb.energy{left:8px!important}
body.game-mode .cin-orb.hp{right:8px!important;border-color:#ff7b84!important;background:radial-gradient(circle at 35% 26%,#ff8080,#8f1e24 58%,#280709)!important;box-shadow:0 0 0 3px rgba(9,13,17,.92),0 0 18px rgba(255,120,128,.18)!important}
body.game-mode .cin-hero-name{position:absolute!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;min-width:220px!important;padding:7px 18px!important;border-radius:999px!important;border:1px solid rgba(144,154,160,.8)!important;background:linear-gradient(180deg,rgba(18,20,23,.97),rgba(3,4,6,.98))!important;color:#f8fbfc!important;font:700 17px/1.1 Georgia,serif!important;text-align:center!important;box-shadow:0 6px 16px rgba(0,0,0,.56)!important}
body.game-mode .cin-power-wrap{position:absolute!important;top:10px!important;width:290px!important;z-index:4!important}
body.game-mode .cin-hero-hud.mine .cin-power-wrap{left:calc(50% + 120px)!important}
body.game-mode .cin-hero-hud.enemy .cin-power-wrap{left:calc(50% + 120px)!important}
body.game-mode .cin-power{width:290px!important;min-height:86px!important;padding:12px 14px!important;border-radius:12px!important;display:flex!important;align-items:center!important;gap:12px!important;background:linear-gradient(180deg,rgba(23,35,9,.97),rgba(7,13,3,.97))!important;border:2px solid rgba(174,207,50,.78)!important;color:#f7ffe0!important;box-shadow:0 0 0 2px rgba(7,10,4,.84),0 0 20px rgba(195,229,62,.14)!important}
body.game-mode .cin-hero-hud.mine .cin-power{background:linear-gradient(180deg,rgba(10,38,58,.97),rgba(4,15,25,.97))!important;border-color:rgba(97,199,255,.85)!important;color:#f0fbff!important;box-shadow:0 0 0 2px rgba(5,11,16,.84),0 0 20px rgba(61,164,255,.14)!important}
body.game-mode .cin-power strong{display:block!important;font:700 16px/1.08 Georgia,serif!important}
body.game-mode .cin-power small{display:block!important;margin-top:4px!important;font:400 13px/1.25 Arial,sans-serif!important;color:inherit!important;opacity:.92!important}
body.game-mode .cin-power-icon{flex:0 0 46px!important;width:46px!important;height:46px!important;border-radius:50%!important;display:grid!important;place-items:center!important;font-size:26px!important;background:radial-gradient(circle,#52650d,#121904)!important;border:2px solid rgba(212,245,76,.78)!important;color:#f0ff8c!important}
body.game-mode .cin-hero-hud.mine .cin-power-icon{background:radial-gradient(circle,#0f4566,#05131d)!important;border-color:#72d1ff!important;color:#e7fbff!important}
body.game-mode #opponentBoard,body.game-mode #myBoard{position:fixed!important;left:50%!important;transform:translateX(-50%)!important;width:min(860px,66vw)!important;height:200px!important;display:flex!important;justify-content:center!important;align-items:flex-end!important;gap:36px!important;z-index:54!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
body.game-mode #opponentBoard{top:185px!important}
body.game-mode #myBoard{bottom:255px!important}
body.game-mode .board-row .empty-slot{width:170px!important;height:170px!important;border:2px dashed rgba(190,210,219,.22)!important;background:rgba(6,9,12,.25)!important;border-radius:30px!important;padding:18px!important;color:rgba(235,245,250,.55)!important;display:grid!important;place-items:center!important;text-align:center!important}
body.game-mode .board-figure{position:relative!important;flex:0 0 176px!important;width:176px!important;height:192px!important;margin:0!important;transform:none!important;filter:none!important}
body.game-mode .board-figure:hover{transform:translateY(-8px) scale(1.05)!important}
body.game-mode .figure-shadow{position:absolute!important;left:10%!important;right:10%!important;bottom:24px!important;height:22px!important;border-radius:50%!important;background:radial-gradient(circle,rgba(0,0,0,.62),rgba(0,0,0,0) 70%)!important}
body.game-mode .figure-aura{position:absolute!important;left:16px!important;right:16px!important;bottom:28px!important;height:36px!important;border-radius:50%!important;background:radial-gradient(circle,rgba(49,155,239,.24),rgba(49,155,239,0) 70%)!important;filter:blur(8px)!important}
body.game-mode .faction-parasite .figure-aura{background:radial-gradient(circle,rgba(191,227,67,.24),rgba(191,227,67,0) 70%)!important}
body.game-mode .figure-body{position:absolute!important;left:0!important;right:0!important;top:-4px!important;height:150px!important;background:transparent!important;clip-path:none!important;overflow:visible!important;filter:drop-shadow(0 10px 16px rgba(0,0,0,.56))!important}
body.game-mode .board-figure .miniature-canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:scale(1.06)!important;z-index:2!important}
body.game-mode .board-figure .figure-fallback{display:none!important}
body.game-mode .figure-base{position:absolute!important;left:18px!important;right:18px!important;bottom:14px!important;height:42px!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(31,37,44,.98),rgba(8,11,14,.98))!important;border:2px solid rgba(108,121,130,.7)!important;box-shadow:inset 0 0 12px rgba(255,255,255,.04),0 10px 18px rgba(0,0,0,.45)!important}
body.game-mode .figure-base-core{position:absolute!important;left:18%!important;right:18%!important;top:8px!important;bottom:8px!important;border-radius:999px!important;background:linear-gradient(90deg,rgba(54,165,239,.12),rgba(18,22,26,.0),rgba(54,165,239,.12))!important}
body.game-mode .faction-parasite .figure-base-core{background:linear-gradient(90deg,rgba(191,227,67,.12),rgba(18,22,26,0),rgba(191,227,67,.12))!important}
body.game-mode .figure-name{display:none!important}
body.game-mode .figure-stat{position:absolute!important;bottom:8px!important;display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:50%!important;color:#fff!important;font:800 26px/1 Georgia,serif!important;box-shadow:0 0 0 3px rgba(8,12,16,.92),0 8px 16px rgba(0,0,0,.38)!important}
body.game-mode .figure-stat.atk{left:18px!important;background:radial-gradient(circle at 35% 26%,#58b9ff,#0f3f68 60%,#071018)!important;border:2px solid rgba(105,197,255,.86)!important}
body.game-mode .faction-parasite .figure-stat.atk{background:radial-gradient(circle at 35% 26%,#bddd38,#4b6110 60%,#111706)!important;border-color:rgba(196,226,62,.86)!important}
body.game-mode .figure-stat.hp{right:18px!important;background:radial-gradient(circle at 35% 26%,#ff7a7a,#8b1b22 60%,#220609)!important;border:2px solid rgba(255,127,135,.82)!important}
body.game-mode .figure-stat.def{display:none!important}
body.game-mode .figure-exhausted{position:absolute!important;right:12px!important;top:8px!important;padding:4px 8px!important;border-radius:999px!important;background:rgba(10,12,15,.88)!important;border:1px solid rgba(179,191,198,.45)!important;color:#f7fbff!important;font-size:12px!important}
body.game-mode .hand-wrap{position:fixed!important;left:50%!important;bottom:8px!important;transform:translateX(-50%)!important;width:min(920px,72vw)!important;height:215px!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;z-index:59!important}
body.game-mode .hand-topline{display:none!important}
body.game-mode .hand{position:absolute!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:0!important;height:215px!important;width:auto!important;padding:0 32px!important;overflow:visible!important}
body.game-mode .hand .card{position:relative!important;width:146px!important;height:206px!important;flex:0 0 146px!important;margin-left:-36px!important;transform-origin:center bottom!important;transition:transform .16s ease, filter .16s ease!important;filter:drop-shadow(0 12px 18px rgba(0,0,0,.62))!important}
body.game-mode .hand .card:first-child{margin-left:0!important}
body.game-mode .hand .card:hover{transform:translateY(-28px) scale(1.08)!important;z-index:20!important}
body.game-mode .hand .card.selected{transform:translateY(-34px) scale(1.1)!important;z-index:24!important}
body.game-mode .generated-tcg-card,.full-art-card{border-radius:14px!important;overflow:hidden!important}
body.game-mode .history-banner,.preview-panel,#preview,.card-preview,.big-preview,.preview-wrap{display:none!important}
@media (max-width:1500px){
  body.game-mode #opponentHero,body.game-mode #myHero{width:640px!important}
  body.game-mode .cin-power-wrap{width:260px!important}
  body.game-mode .cin-power{width:260px!important}
  body.game-mode #opponentBoard,body.game-mode #myBoard{width:min(760px,68vw)!important;gap:24px!important}
  body.game-mode .board-figure{width:160px!important;flex-basis:160px!important}
  body.game-mode .hand{padding:0 10px!important}
  body.game-mode .hand .card{width:132px!important;height:188px!important;flex-basis:132px!important;margin-left:-34px!important}
}
@media (max-height:900px){
  body.game-mode .ship-ceiling{height:24%!important}
  body.game-mode .battle-floor{top:19.5%!important;bottom:15.2%!important}
  body.game-mode #opponentBoard{top:170px!important}
  body.game-mode #myBoard{bottom:225px!important}
  body.game-mode #myHero{bottom:132px!important}
  body.game-mode .hand-wrap{height:188px!important}
  body.game-mode .hand{height:188px!important}
  body.game-mode .hand .card{width:128px!important;height:182px!important;flex-basis:128px!important}
}


/* ===== V21.2.55 — correction HUD bas / main 1920x1080 + petits écrans ===== */
body.game-mode #myHero{
  bottom:215px!important;
  z-index:64!important;
}
body.game-mode #opponentHero{z-index:64!important}
body.game-mode .cin-hero-hud{pointer-events:none!important}
body.game-mode .cin-hero-hud .hero-drop-zone,
body.game-mode .cin-hero-hud .cin-power-wrap,
body.game-mode .cin-hero-hud button{pointer-events:auto!important}
body.game-mode .hand-wrap{
  bottom:-18px!important;
  width:min(860px,66vw)!important;
  height:215px!important;
  z-index:58!important;
  overflow:visible!important;
}
body.game-mode .hand{
  height:215px!important;
  padding:0 20px!important;
  overflow:visible!important;
  align-items:flex-end!important;
}
body.game-mode .hand::before{
  content:'';
  position:absolute;
  left:8%;right:8%;bottom:2px;height:62px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(20,78,112,.22),rgba(3,10,15,.05) 54%,transparent 72%);
  filter:blur(7px);
  pointer-events:none;
  z-index:-1;
}
body.game-mode .hand .card{
  width:132px!important;
  height:188px!important;
  flex:0 0 132px!important;
  margin-left:-30px!important;
  transform-origin:50% 100%!important;
  transform:translateX(var(--fan-x,0px)) translateY(var(--fan-y,0px)) rotate(var(--fan-rot,0deg))!important;
  transition:transform .16s ease,filter .16s ease!important;
  filter:drop-shadow(0 12px 15px rgba(0,0,0,.68))!important;
}
body.game-mode .hand .card:first-child{margin-left:0!important}
body.game-mode .hand .card:nth-child(1),
body.game-mode .hand .card:nth-child(2),
body.game-mode .hand .card:nth-child(3),
body.game-mode .hand .card:nth-child(4),
body.game-mode .hand .card:nth-child(5),
body.game-mode .hand .card:nth-child(6),
body.game-mode .hand .card:nth-child(7),
body.game-mode .hand .card:nth-child(8),
body.game-mode .hand .card:nth-child(9),
body.game-mode .hand .card:nth-child(10){
  transform:translateX(var(--fan-x,0px)) translateY(var(--fan-y,0px)) rotate(var(--fan-rot,0deg))!important;
}
body.game-mode .hand .card:hover{
  transform:translateX(var(--fan-x,0px)) translateY(calc(var(--fan-y,0px) - 54px)) rotate(0deg) scale(1.18)!important;
  z-index:120!important;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.78)) drop-shadow(0 0 12px rgba(76,184,255,.30))!important;
}
body.game-mode .hand .card.selected{
  transform:translateX(var(--fan-x,0px)) translateY(calc(var(--fan-y,0px) - 38px)) rotate(0deg) scale(1.12)!important;
  z-index:110!important;
}
body.game-mode .cin-hero-hud.mine .cin-power-wrap{
  left:calc(50% + 126px)!important;
  top:12px!important;
}
body.game-mode .cin-hero-hud.mine .cin-power{
  width:286px!important;
  min-height:82px!important;
}
body.game-mode .cin-hero-hud.mine .cin-hero-core{z-index:3!important}
body.game-mode .cin-hero-hud.mine .cin-power-wrap{z-index:2!important}

/* 1080p : séparation nette HUD / main */
@media (min-height:901px){
  body.game-mode #myHero{bottom:220px!important}
  body.game-mode .hand-wrap{bottom:-18px!important;height:216px!important}
  body.game-mode .hand{height:216px!important}
}

/* 720–900px de haut : réduction cohérente sans chevauchement */
@media (max-height:900px){
  body.game-mode #myHero{
    bottom:174px!important;
    transform:translateX(-50%) scale(.84)!important;
    transform-origin:center bottom!important;
  }
  body.game-mode .hand-wrap{bottom:-12px!important;height:166px!important;width:min(760px,68vw)!important}
  body.game-mode .hand{height:166px!important}
  body.game-mode .hand .card{width:108px!important;height:154px!important;flex-basis:108px!important;margin-left:-24px!important}
  body.game-mode .hand .card:hover{transform:translateX(var(--fan-x,0px)) translateY(calc(var(--fan-y,0px) - 38px)) rotate(0deg) scale(1.16)!important}
  body.game-mode #myBoard{bottom:260px!important}
}

/* très faible hauteur : la main reste sous le héros au lieu de le recouvrir */
@media (max-height:700px){
  body.game-mode #myHero{
    bottom:132px!important;
    transform:translateX(-50%) scale(.68)!important;
    transform-origin:center bottom!important;
  }
  body.game-mode .hand-wrap{bottom:-9px!important;height:123px!important;width:min(650px,70vw)!important}
  body.game-mode .hand{height:123px!important;padding:0 8px!important}
  body.game-mode .hand .card{width:82px!important;height:118px!important;flex-basis:82px!important;margin-left:-17px!important}
  body.game-mode .hand .card:hover{transform:translateX(var(--fan-x,0px)) translateY(calc(var(--fan-y,0px) - 26px)) rotate(0deg) scale(1.16)!important}
  body.game-mode #myBoard{bottom:185px!important;transform:translateX(-50%) scale(.78)!important;transform-origin:center bottom!important}
  body.game-mode #opponentBoard{top:126px!important;transform:translateX(-50%) scale(.78)!important;transform-origin:center top!important}
  body.game-mode #opponentHero{top:8px!important;transform:translateX(-50%) scale(.68)!important;transform-origin:center top!important}
}


/* ===== V21.2.56 — CINEMATIC PASS 2 / composition 1920x1080 ===== */
body.game-mode #game::before{
  background:
    radial-gradient(ellipse at 50% 46%,rgba(59,69,72,.18),transparent 42%),
    linear-gradient(180deg,#050709 0 21%,#181d1f 21.2% 73.5%,#06090b 74% 100%)!important;
  filter:none!important;
}
body.game-mode #game::after{
  background:
    radial-gradient(ellipse at 50% 54%,transparent 0 49%,rgba(0,0,0,.13) 67%,rgba(0,0,0,.54) 100%),
    linear-gradient(90deg,rgba(0,0,0,.62),transparent 8.5% 91.5%,rgba(0,0,0,.62))!important;
  box-shadow:inset 0 0 115px rgba(0,0,0,.70)!important;
}
/* Biomasse haute : plus proche du prototype, sans utiliser l'image comme wallpaper */
body.game-mode .ship-ceiling{
  height:24.5%!important;
  background:
    radial-gradient(ellipse at 10% 32%,rgba(190,223,44,.25),transparent 12%),
    radial-gradient(ellipse at 28% 15%,rgba(190,223,44,.20),transparent 12%),
    radial-gradient(ellipse at 52% 28%,rgba(190,223,44,.22),transparent 13%),
    radial-gradient(ellipse at 77% 18%,rgba(190,223,44,.20),transparent 12%),
    linear-gradient(180deg,#0b0a08,#090a08 42%,#11100b 100%)!important;
  border-bottom:3px solid rgba(177,147,60,.55)!important;
  box-shadow:0 15px 32px rgba(0,0,0,.74),inset 0 -14px 32px rgba(214,170,54,.10)!important;
}
body.game-mode .ship-ceiling::before{
  content:''!important;position:absolute!important;inset:-18% -2% -8% -2%!important;opacity:1!important;
  background:
    radial-gradient(circle at 7% 48%,#c0df38 0 1.5%,#647512 2% 4.2%,#1b170e 4.6% 7.8%,transparent 8.4%),
    radial-gradient(circle at 17% 23%,#a9ca2b 0 1.7%,#607313 2.2% 4.7%,#21170f 5.2% 8.4%,transparent 9%),
    radial-gradient(circle at 28% 58%,#d1ea52 0 1.4%,#71821b 1.9% 4%,#21170d 4.6% 7.3%,transparent 8%),
    radial-gradient(circle at 39% 19%,#b5d735 0 1.6%,#637613 2.1% 4.4%,#1f170e 5% 7.8%,transparent 8.5%),
    radial-gradient(circle at 50% 51%,#d3ed57 0 1.5%,#71851b 2% 4.3%,#1e160d 4.9% 8.2%,transparent 8.9%),
    radial-gradient(circle at 61% 18%,#b7d837 0 1.6%,#627414 2.2% 4.4%,#20170f 5% 8%,transparent 8.6%),
    radial-gradient(circle at 73% 55%,#d3eb54 0 1.5%,#71851b 2% 4.4%,#20170f 5% 8%,transparent 8.7%),
    radial-gradient(circle at 85% 20%,#b3d134 0 1.6%,#607113 2.2% 4.5%,#20170f 5% 8%,transparent 8.6%),
    radial-gradient(circle at 94% 50%,#cbe94c 0 1.5%,#708119 2% 4.4%,#20170e 5% 8%,transparent 8.8%)!important;
  filter:drop-shadow(0 0 12px rgba(192,227,55,.20))!important;
}
body.game-mode .ship-ceiling::after{
  content:''!important;position:absolute!important;inset:0!important;
  background:
    repeating-linear-gradient(164deg,transparent 0 34px,rgba(101,41,26,.66) 36px 45px,rgba(18,10,8,.92) 46px 53px,transparent 55px 88px),
    repeating-linear-gradient(18deg,transparent 0 55px,rgba(92,35,24,.55) 57px 65px,rgba(20,11,8,.88) 66px 72px,transparent 74px 112px),
    linear-gradient(180deg,transparent 50%,rgba(0,0,0,.30))!important;
  mix-blend-mode:screen!important;opacity:.64!important;
}
body.game-mode .hive-a{left:-2%!important;top:-9%!important;width:31%!important;height:104%!important}
body.game-mode .hive-b{left:35%!important;top:-15%!important;width:31%!important;height:106%!important}
body.game-mode .hive-c{right:-2%!important;top:-9%!important;width:32%!important;height:104%!important}
body.game-mode .hive-mass{opacity:.66!important}
body.game-mode .hive-tendril{height:10px!important;opacity:.72!important}
/* plateau : suppression de l'effet tapis à pois / métal plus lisible */
body.game-mode .battle-floor{
  left:8.4%!important;right:8.4%!important;top:20.5%!important;bottom:17.2%!important;
  background:
    linear-gradient(90deg,transparent 0 49.86%,rgba(210,180,92,.19) 49.94% 50.06%,transparent 50.14%),
    repeating-linear-gradient(0deg,transparent 0 19.5%,rgba(205,187,119,.15) 19.7% 20%,transparent 20.2% 39.5%),
    repeating-linear-gradient(90deg,transparent 0 12.3%,rgba(169,158,109,.12) 12.4% 12.7%,transparent 12.8% 25%),
    radial-gradient(ellipse at 50% 53%,rgba(80,79,66,.24),transparent 52%),
    linear-gradient(180deg,#343a3c,#232a2c 51%,#151b1e)!important;
  border:3px solid rgba(89,105,113,.55)!important;border-top-color:rgba(195,164,78,.66)!important;
  box-shadow:inset 0 0 78px rgba(0,0,0,.53),0 14px 38px rgba(0,0,0,.64)!important;
}
body.game-mode .battle-floor::before{
  background:
    radial-gradient(ellipse at 12% 27%,rgba(111,24,22,.24) 0 7%,transparent 8%),
    radial-gradient(ellipse at 74% 34%,rgba(111,24,22,.19) 0 7%,transparent 8%),
    radial-gradient(ellipse at 88% 73%,rgba(111,24,22,.18) 0 6%,transparent 7%),
    linear-gradient(105deg,transparent 0 26%,rgba(108,35,24,.26) 26.4% 26.8%,transparent 27.1%),
    linear-gradient(78deg,transparent 0 69%,rgba(108,35,24,.22) 69.4% 69.8%,transparent 70.1%)!important;
  background-size:auto!important;opacity:1!important;
}
body.game-mode .battle-floor::after{width:116px!important;height:116px!important;border-color:rgba(191,176,117,.22)!important;box-shadow:0 0 0 9px rgba(191,176,117,.06),0 0 0 31px rgba(191,176,117,.025)!important}
body.game-mode .floor-grid{opacity:.46!important}
body.game-mode .floor-scar{height:3px!important;opacity:.70!important}
body.game-mode .sector-left{left:6.2%!important;top:55%!important}
body.game-mode .sector-right{right:4.4%!important;top:55%!important}
/* éclairage du bord supérieur du plateau */
body.game-mode .battle-floor{--warm:#d5a846}
body.game-mode .battle-floor .floor-grid::before{content:'';position:absolute;left:2%;right:2%;top:2px;height:16px;background:repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,208,89,.54) 55px 59px,transparent 60px 95px);filter:blur(.2px);opacity:.62}
/* rails latéraux plus mécaniques */
body.game-mode .side-frame{top:15%!important;bottom:11%!important;width:8.2%!important;border-color:rgba(77,97,107,.48)!important;background:linear-gradient(90deg,#030608,#151e23 34%,#05090c 100%)!important}
body.game-mode .side-frame::before{content:'';position:absolute;inset:0 10%;background:repeating-linear-gradient(0deg,transparent 0 25px,rgba(133,151,160,.16) 26px 28px,transparent 29px 56px);opacity:.7}
body.game-mode .side-frame::after{inset:8% 30%!important}
/* HUD haut : compact, centré, pouvoir proche */
body.game-mode #opponentHero{top:15px!important;height:132px!important;width:700px!important}
body.game-mode #myHero{bottom:210px!important;height:132px!important;width:700px!important}
body.game-mode .cin-hero-core{width:246px!important;height:126px!important}
body.game-mode .cin-hero-avatar{width:108px!important;height:108px!important}
body.game-mode .cin-hero-name{bottom:2px!important;min-width:206px!important;padding:6px 15px!important;font-size:16px!important;border-radius:6px!important}
body.game-mode .cin-orb{top:20px!important;width:52px!important;height:52px!important;font-size:25px!important}
body.game-mode .cin-power-wrap{top:13px!important;width:300px!important}
body.game-mode .cin-hero-hud.mine .cin-power-wrap,body.game-mode .cin-hero-hud.enemy .cin-power-wrap{left:calc(50% + 112px)!important}
body.game-mode .cin-power{width:300px!important;min-height:82px!important;padding:10px 13px!important;border-radius:8px!important}
body.game-mode .cin-power-icon{width:50px!important;height:50px!important;flex-basis:50px!important}
/* rangées : trois figurines lisibles sans envahir le HUD */
body.game-mode #opponentBoard,body.game-mode #myBoard{width:min(900px,66vw)!important;height:190px!important;gap:46px!important}
body.game-mode #opponentBoard{top:188px!important}
body.game-mode #myBoard{bottom:330px!important}
body.game-mode .board-figure{width:172px!important;flex-basis:172px!important;height:188px!important}
body.game-mode .figure-body{height:150px!important;top:-2px!important}
body.game-mode .figure-base{bottom:12px!important;left:17px!important;right:17px!important;height:40px!important}
body.game-mode .figure-stat{bottom:5px!important;width:40px!important;height:40px!important;font-size:23px!important}
/* deck stacks référence : un à gauche, un à droite au même niveau */
body.game-mode .deck-stack.enemy{right:32px!important;top:166px!important}
body.game-mode .deck-stack.mine{left:32px!important;top:166px!important}
body.game-mode .deck-card-back{width:72px!important;height:98px!important;border-radius:8px!important;transform:perspective(300px) rotateX(3deg)!important}
body.game-mode .deck-stack::before,body.game-mode .deck-stack::after{content:'';position:absolute;width:72px;height:98px;border:1px solid rgba(160,177,183,.22);border-radius:8px;background:#090c0e;z-index:-1}
body.game-mode .deck-stack::before{transform:translate(5px,7px)}
body.game-mode .deck-stack::after{transform:translate(9px,13px);z-index:-2}
/* panneaux de tour compacts, alignés sur le rail droit */
body.game-mode .cinematic-turn-panel{right:20px!important;top:315px!important;width:208px!important;border-radius:7px!important;padding:9px 12px!important}
body.game-mode #turnBadge{right:20px!important;top:369px!important;width:208px!important;height:66px!important;border-radius:7px!important;font-size:17px!important}
body.game-mode .controls{right:20px!important;top:443px!important;width:208px!important}
body.game-mode #endTurnBtn{width:208px!important;height:66px!important;border-radius:7px!important;font-size:17px!important}
/* rail gauche dans le même langage */
body.game-mode .battle-left-rail{left:13px!important;top:39%!important;gap:8px!important}
body.game-mode .rail-button{width:58px!important;height:58px!important;border-radius:7px!important}
/* main : basse, éventail plus large et portrait totalement dégagé */
body.game-mode .hand-wrap{bottom:-34px!important;width:min(820px,64vw)!important;height:198px!important;z-index:58!important}
body.game-mode .hand{height:198px!important;padding:0 14px!important}
body.game-mode .hand .card{width:124px!important;height:177px!important;flex-basis:124px!important;margin-left:-27px!important;border-radius:12px!important}
body.game-mode .hand .card:hover{transform:translateX(var(--fan-x,0px)) translateY(calc(var(--fan-y,0px) - 60px)) rotate(0deg) scale(1.22)!important;z-index:140!important}
body.game-mode .hand .card.selected{transform:translateX(var(--fan-x,0px)) translateY(calc(var(--fan-y,0px) - 44px)) rotate(0deg) scale(1.14)!important}
/* consoles avant-plan plus présentes comme sur le prototype */
body.game-mode .foreground-console{height:27%!important;bottom:-8%!important;width:27%!important;opacity:.94!important}
body.game-mode .foreground-console::after{content:'';position:absolute;right:11%;bottom:13%;width:28%;height:46%;border:2px solid rgba(55,86,103,.44);border-radius:12px;background:linear-gradient(180deg,rgba(10,36,50,.54),rgba(5,11,15,.75));box-shadow:inset 0 0 18px rgba(61,167,220,.08)}
body.game-mode .console-right::after{left:11%;right:auto;transform:scaleX(-1)}
/* masquer les restes de UI non présents dans le prototype */
body.game-mode .location-card,body.game-mode #statusLine,body.game-mode .hand-hint,body.game-mode .hand-title{display:none!important}
@media (max-height:900px){
  body.game-mode #myHero{bottom:170px!important;transform:translateX(-50%) scale(.84)!important;transform-origin:center bottom!important}
  body.game-mode #myBoard{bottom:248px!important;transform:translateX(-50%) scale(.86)!important;transform-origin:center bottom!important}
  body.game-mode #opponentBoard{top:145px!important;transform:translateX(-50%) scale(.86)!important;transform-origin:center top!important}
  body.game-mode #opponentHero{top:6px!important;transform:translateX(-50%) scale(.82)!important;transform-origin:center top!important}
  body.game-mode .hand-wrap{bottom:-26px!important;height:154px!important;width:min(700px,64vw)!important}
  body.game-mode .hand{height:154px!important}
  body.game-mode .hand .card{width:100px!important;height:143px!important;flex-basis:100px!important;margin-left:-21px!important}
}


/* =====================================================================
   V21.2.57 — BATTLE UI REBUILD
   Composition calibrée pour 1920×1080 d’après la maquette cinématique.
   La maquette N’EST PAS utilisée comme fond : chaque bloc reste réel,
   interactif et alimenté par l’état du jeu.
   ===================================================================== */
body.game-mode{--pn-blue:#22a9ff;--pn-blue2:#0062b9;--pn-green:#b7dc27;--pn-lime:#d9ff4b;--pn-red:#df3542;--pn-gold:#e4b33c;--pn-metal:#232b2f;--pn-dark:#05080a;background:#020304!important;overflow:hidden!important}
body.game-mode #game{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;min-width:0!important;min-height:0!important;background:#020304!important;overflow:hidden!important;isolation:isolate!important}
body.game-mode #game::before{content:''!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;background:
  radial-gradient(ellipse at 50% 104%,rgba(18,64,88,.22),transparent 34%),
  linear-gradient(180deg,#050708 0 18%,#111415 18% 72%,#05080a 72% 100%)!important;filter:none!important}
body.game-mode #game::after{content:''!important;position:absolute!important;inset:0!important;z-index:95!important;pointer-events:none!important;background:radial-gradient(ellipse at 50% 52%,transparent 38%,rgba(0,0,0,.15) 69%,rgba(0,0,0,.60) 100%)!important;box-shadow:inset 0 0 120px rgba(0,0,0,.55)!important}

/* --- DECOR SCRIPTÉ : baie infectée / aucun screenshot utilisé --- */
body.game-mode .prototype-scenery{position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;overflow:hidden!important;background:transparent!important}
body.game-mode .ship-ceiling{position:absolute!important;left:0!important;right:0!important;top:0!important;height:23.5%!important;overflow:hidden!important;background:
  radial-gradient(circle at 8% 28%,rgba(220,255,86,.86) 0 1.1%,rgba(107,132,19,.7) 1.3% 2.5%,transparent 2.9%),
  radial-gradient(circle at 13% 61%,rgba(206,244,72,.88) 0 1.35%,rgba(102,126,18,.75) 1.6% 3%,transparent 3.4%),
  radial-gradient(circle at 24% 22%,rgba(220,255,85,.88) 0 1.5%,rgba(102,128,18,.78) 1.8% 3.2%,transparent 3.6%),
  radial-gradient(circle at 30% 62%,rgba(206,244,72,.9) 0 1.2%,rgba(98,123,17,.78) 1.5% 2.8%,transparent 3.2%),
  radial-gradient(circle at 42% 24%,rgba(220,255,85,.9) 0 1.6%,rgba(105,129,19,.80) 1.9% 3.3%,transparent 3.7%),
  radial-gradient(circle at 50% 60%,rgba(213,251,78,.9) 0 1.3%,rgba(102,127,18,.80) 1.6% 2.9%,transparent 3.3%),
  radial-gradient(circle at 61% 23%,rgba(220,255,85,.86) 0 1.5%,rgba(103,128,18,.78) 1.8% 3.2%,transparent 3.6%),
  radial-gradient(circle at 70% 63%,rgba(211,249,75,.9) 0 1.35%,rgba(102,127,18,.78) 1.6% 3%,transparent 3.4%),
  radial-gradient(circle at 83% 25%,rgba(220,255,85,.88) 0 1.5%,rgba(103,128,18,.76) 1.8% 3.2%,transparent 3.6%),
  radial-gradient(circle at 91% 61%,rgba(211,249,75,.9) 0 1.25%,rgba(102,127,18,.78) 1.55% 2.9%,transparent 3.3%),
  repeating-linear-gradient(160deg,transparent 0 30px,rgba(96,26,25,.70) 31px 40px,rgba(27,7,8,.92) 41px 47px,transparent 49px 72px),
  repeating-linear-gradient(18deg,transparent 0 42px,rgba(83,21,24,.62) 44px 51px,rgba(24,7,8,.9) 52px 58px,transparent 60px 94px),
  linear-gradient(180deg,#0b0a07,#090b08 58%,#121008)!important;border:0!important;border-bottom:3px solid rgba(203,155,49,.72)!important;box-shadow:inset 0 -18px 35px rgba(243,185,49,.11),0 12px 30px rgba(0,0,0,.72)!important}
body.game-mode .ship-ceiling::before{content:''!important;position:absolute!important;inset:-9% -3% -20% -3%!important;background:
  repeating-radial-gradient(ellipse at 16% 42%,rgba(190,224,54,.28) 0 9px,rgba(54,56,13,.26) 10px 20px,transparent 21px 45px),
  repeating-radial-gradient(ellipse at 73% 33%,rgba(190,224,54,.22) 0 10px,rgba(54,56,13,.22) 11px 21px,transparent 22px 50px)!important;opacity:.9!important;filter:drop-shadow(0 0 10px rgba(197,235,60,.17))!important}
body.game-mode .ship-ceiling::after{content:''!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:18px!important;background:repeating-linear-gradient(90deg,#0b0d0e 0 36px,#d29128 37px 42px,#1a2023 43px 66px,#0b0d0e 67px 96px)!important;box-shadow:0 0 14px rgba(234,167,54,.35)!important;opacity:.94!important}
body.game-mode .hive-mass{display:none!important}
body.game-mode .hive-tendril{position:absolute!important;height:10px!important;border-radius:999px!important;background:linear-gradient(180deg,#7b3424,#220a0c 50%,#9e2d27)!important;box-shadow:0 0 0 2px rgba(81,12,18,.7),0 0 8px rgba(210,52,45,.16)!important;opacity:.86!important}
body.game-mode .tendril-a{left:-2%!important;top:48%!important;width:52%!important;transform:rotate(8deg)!important}.tendril-b{right:-4%!important;top:52%!important;width:50%!important;transform:rotate(-8deg)!important}.tendril-c{left:28%!important;top:29%!important;width:48%!important;transform:rotate(2deg)!important}
body.game-mode .upper-light-rail{position:absolute!important;left:11%!important;right:11%!important;top:22.2%!important;height:13px!important;background:repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,194,72,.88) 48px 55px,transparent 56px 82px)!important;filter:drop-shadow(0 0 5px rgba(255,184,58,.48))!important}
body.game-mode .battle-floor{position:absolute!important;left:9%!important;right:9%!important;top:22.5%!important;height:45.2%!important;bottom:auto!important;clip-path:polygon(3.2% 0,96.8% 0,100% 100%,0 100%)!important;background:
  linear-gradient(90deg,transparent 0 49.86%,rgba(219,188,99,.22) 49.92% 50.08%,transparent 50.14%),
  repeating-linear-gradient(0deg,transparent 0 19.7%,rgba(208,188,118,.18) 19.9% 20.1%,transparent 20.3% 39.7%),
  repeating-linear-gradient(90deg,transparent 0 12.3%,rgba(188,173,106,.14) 12.45% 12.65%,transparent 12.8% 25%),
  radial-gradient(ellipse at 50% 50%,rgba(91,81,55,.18),transparent 53%),
  linear-gradient(180deg,#3b3d39 0,#2b302f 45%,#171d1f 100%)!important;border:3px solid rgba(93,104,106,.66)!important;border-top-color:rgba(203,168,76,.76)!important;box-shadow:inset 0 0 85px rgba(0,0,0,.45),0 18px 30px rgba(0,0,0,.5)!important}
body.game-mode .battle-floor::before{content:''!important;position:absolute!important;inset:0!important;background:
  radial-gradient(ellipse at 17% 23%,rgba(127,25,24,.26) 0 6%,transparent 6.5%),
  radial-gradient(ellipse at 72% 19%,rgba(127,25,24,.20) 0 5%,transparent 5.5%),
  radial-gradient(ellipse at 84% 65%,rgba(127,25,24,.18) 0 5%,transparent 5.5%),
  linear-gradient(103deg,transparent 0 27%,rgba(134,32,25,.24) 27.3% 27.6%,transparent 27.9%),
  linear-gradient(81deg,transparent 0 69%,rgba(134,32,25,.22) 69.3% 69.6%,transparent 69.9%)!important;opacity:1!important}
body.game-mode .battle-floor::after{content:''!important;position:absolute!important;left:50%!important;top:50%!important;width:118px!important;height:118px!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;border:2px solid rgba(194,179,117,.24)!important;box-shadow:0 0 0 8px rgba(194,179,117,.05),0 0 0 28px rgba(194,179,117,.025)!important}
body.game-mode .floor-grid{position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(214,194,129,.09) 1px,transparent 1px),linear-gradient(0deg,rgba(214,194,129,.08) 1px,transparent 1px)!important;background-size:12.5% 100%,100% 20%!important;opacity:.65!important}
body.game-mode .floor-emblem{position:absolute!important;left:50%!important;top:50%!important;width:82px!important;height:82px!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;border:2px solid rgba(198,183,122,.20)!important;opacity:.75!important}
body.game-mode .floor-emblem::before,body.game-mode .floor-emblem::after{content:''!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;background:rgba(198,183,122,.24)!important}.floor-emblem::before{width:60px!important;height:2px!important}.floor-emblem::after{height:60px!important;width:2px!important}
body.game-mode .floor-emblem span{position:absolute!important;inset:17px!important;border:2px solid rgba(198,183,122,.18)!important;transform:rotate(45deg)!important}
body.game-mode .floor-scar{display:block!important;position:absolute!important;height:3px!important;border-radius:999px!important;background:linear-gradient(90deg,transparent,rgba(123,26,24,.16),rgba(188,62,40,.52),rgba(123,26,24,.24),transparent)!important;opacity:.65!important}.scar-a{width:38%!important;left:8%!important;top:27%!important;transform:rotate(6deg)!important}.scar-b{width:33%!important;right:9%!important;top:54%!important;transform:rotate(-8deg)!important}.scar-c{width:23%!important;left:39%!important;top:75%!important;transform:rotate(3deg)!important}
body.game-mode .sector-copy{position:absolute!important;color:rgba(226,230,225,.53)!important;font:700 15px/1.2 Arial,sans-serif!important;letter-spacing:.04em!important;text-shadow:0 2px 3px #000!important}.sector-copy strong{font-size:17px!important}.sector-left{left:6.8%!important;top:57%!important;transform:skewY(-5deg)!important}.sector-right{right:5.3%!important;top:56%!important;text-align:right!important;transform:skewY(-5deg)!important}
body.game-mode .side-frame{position:absolute!important;top:13.5%!important;bottom:0!important;width:8.8%!important;background:linear-gradient(90deg,#030608,#182228 45%,#05090c)!important;box-shadow:inset 0 0 30px rgba(0,0,0,.72),0 0 25px rgba(0,0,0,.5)!important}.frame-left{left:0!important;border-right:3px solid rgba(79,99,109,.42)!important}.frame-right{right:0!important;border-left:3px solid rgba(79,99,109,.42)!important}.side-frame::before{content:''!important;position:absolute!important;inset:0 12%!important;background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(124,147,158,.15) 31px 34px,transparent 35px 64px)!important}.side-frame::after{content:''!important;position:absolute!important;inset:8% 30%!important;background:repeating-linear-gradient(0deg,#071116 0 12px,#0877b0 13px 17px,#071116 18px 39px)!important;box-shadow:0 0 14px rgba(30,167,236,.34)!important}.frame-right::after{background:repeating-linear-gradient(0deg,#0d1112 0 12px,#ad741e 13px 17px,#0d1112 18px 39px)!important;box-shadow:0 0 14px rgba(225,145,38,.28)!important}
body.game-mode .foreground-console{position:absolute!important;bottom:-6%!important;width:27%!important;height:30%!important;z-index:3!important;background:linear-gradient(150deg,#131c21,#05090b 64%)!important;border:4px solid #26333a!important;box-shadow:0 -8px 30px rgba(0,0,0,.72),inset 0 0 36px rgba(50,160,212,.10)!important;clip-path:polygon(0 29%,18% 9%,79% 0,100% 22%,92% 100%,0 100%)!important}.console-left{left:-3%!important;transform:rotate(2deg)!important}.console-right{right:-3%!important;transform:scaleX(-1) rotate(2deg)!important}.foreground-console span{position:absolute!important;left:22%!important;top:43%!important;color:rgba(232,238,239,.46)!important;font:700 18px/1.15 Arial,sans-serif!important;letter-spacing:.07em!important}.console-right span{transform:scaleX(-1)!important;left:25%!important}.foreground-console::before{content:''!important;position:absolute!important;left:33%!important;top:17%!important;width:32%!important;height:17%!important;background:linear-gradient(180deg,#143c54,#07131a)!important;border:2px solid #486674!important;box-shadow:0 0 15px rgba(54,179,236,.25)!important}.foreground-console::after{content:''!important;position:absolute!important;right:10%!important;bottom:13%!important;width:31%!important;height:49%!important;border:2px solid rgba(52,79,93,.50)!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(9,31,43,.64),rgba(5,10,14,.85))!important;box-shadow:inset 0 0 18px rgba(55,174,225,.10)!important}.console-right::after{right:auto!important;left:10%!important}
body.game-mode .space-window{position:absolute!important;right:1.1%!important;top:3.8%!important;width:10.2%!important;height:19%!important;z-index:2!important;clip-path:polygon(12% 0,100% 6%,92% 100%,0 91%)!important;background:linear-gradient(160deg,#071827,#295782 55%,#0a1a2a)!important;border:3px solid rgba(90,109,120,.72)!important;box-shadow:inset 0 0 26px rgba(0,0,0,.55),0 0 16px rgba(35,129,185,.15)!important}.space-stars{position:absolute!important;inset:0!important;background:radial-gradient(circle at 20% 24%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 27%,#d6ecff 0 1px,transparent 2px),radial-gradient(circle at 77% 65%,#fff 0 1px,transparent 2px),radial-gradient(circle at 40% 70%,#fff 0 1px,transparent 2px)!important;background-size:31px 31px,47px 47px,63px 63px,55px 55px!important}.space-planet{position:absolute!important;left:-18%!important;bottom:-22%!important;width:118%!important;height:72%!important;border-radius:50%!important;background:radial-gradient(ellipse at 50% 0,#9dd7ff 0 2%,#508bc0 4%,#173a59 20%,#071420 52%,transparent 54%)!important;transform:rotate(-12deg)!important;opacity:.9!important}.space-station{position:absolute!important;right:15%!important;top:16%!important;width:16px!important;height:78px!important;background:linear-gradient(90deg,#1b2830,#7c929f,#17232a)!important;transform:rotate(10deg)!important;box-shadow:18px 22px 0 -5px #263840,-17px 30px 0 -6px #263840!important}
body.game-mode .wall-copy{position:absolute!important;color:rgba(228,231,224,.48)!important;font:700 14px/1.35 Arial,sans-serif!important;letter-spacing:.04em!important;text-shadow:0 2px 3px #000!important}.wall-copy-left{left:8.2%!important;top:8%!important;transform:rotate(-3deg)!important}.wall-copy-right{right:2.4%!important;top:1.6%!important;text-align:right!important}
body.game-mode .lower-battle-rim{position:absolute!important;left:13%!important;right:13%!important;top:66.6%!important;height:42px!important;background:repeating-linear-gradient(90deg,#0a0e10 0 35px,#0d5373 36px 41px,#121a1e 42px 68px,#a36b19 69px 73px,#0a0e10 74px 105px)!important;border-top:3px solid rgba(87,102,111,.55)!important;box-shadow:0 -6px 20px rgba(0,0,0,.45),0 0 15px rgba(34,148,210,.14)!important}

/* --- vrai layout UI calé sur la maquette --- */
body.game-mode .game-shell,body.game-mode .main-column,body.game-mode .arena{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;z-index:10!important}.arena::before,.arena::after,.table-crown,.table-crest,.board-glow,.middle-line{display:none!important}
body.game-mode .cinematic-brand{position:absolute!important;left:1.35%!important;top:1.4%!important;z-index:60!important}.cinematic-brand strong{display:block!important;color:#f9fbfb!important;font:700 18px/1 Georgia,serif!important;letter-spacing:.25em!important;text-shadow:0 2px 5px #000!important}.cinematic-brand small{display:block!important;margin-top:6px!important;color:#c6d1d6!important;font:10px/1 Arial,sans-serif!important;letter-spacing:.08em!important}
body.game-mode .topbar{position:absolute!important;inset:0!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;pointer-events:none!important;z-index:65!important}.topbar>div:first-child{display:none!important}.topbar-right{display:contents!important}#leaveBtn{position:absolute!important;right:1.4%!important;top:1.6%!important;pointer-events:auto!important;background:rgba(11,15,18,.75)!important;border:1px solid rgba(130,143,150,.4)!important;color:#dfe9ee!important;padding:5px 10px!important;font-size:10px!important;border-radius:6px!important}

/* Le code doit rester visible en partie : cette règle passe après les variantes de HUD. */
body.game-mode #game .topbar>div:first-child{display:block!important;position:fixed!important;left:24px!important;top:58px!important;z-index:95!important;pointer-events:auto!important;padding:8px 12px!important;border:1px solid rgba(91,190,224,.45)!important;border-radius:8px!important;background:rgba(3,12,17,.9)!important;box-shadow:0 0 18px rgba(28,162,207,.2)!important}
.floating-room-code{display:none;position:fixed;left:18px;top:18px;z-index:9999;align-items:center;gap:9px;padding:9px 12px;border:2px solid #3c9fba;border-radius:8px;background:linear-gradient(135deg,#07151d,#020609);box-shadow:0 0 18px #178bb766;color:#d7f5ff;font:700 11px Arial,sans-serif;pointer-events:auto}
.floating-room-code.visible{display:flex}
.floating-room-code span{color:#7ed5e8;letter-spacing:.12em;font-size:9px}
.floating-room-code strong{font:800 19px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em;color:#fff;text-shadow:0 0 9px #57d8ff}
.floating-room-code button{border:1px solid #63c7e5;border-radius:4px;background:#0b3443;color:#dff8ff;padding:5px 8px;font-size:9px;font-weight:800;cursor:pointer}
.floating-room-code button:hover{background:#14657d}
@media(max-width:600px){.floating-room-code{left:8px;top:8px;gap:6px;padding:7px 8px}.floating-room-code strong{font-size:15px}.floating-room-code span{font-size:8px}.floating-room-code button{padding:4px 6px}}
.my-turn-notice{position:fixed;left:50%;top:43%;z-index:1500;display:flex;flex-direction:column;align-items:center;gap:5px;padding:15px 34px;border:2px solid #56d9ff;border-radius:8px;background:linear-gradient(180deg,rgba(8,43,61,.96),rgba(3,13,20,.97));box-shadow:0 0 0 4px rgba(45,169,214,.18),0 0 36px rgba(50,197,255,.5);opacity:0;transform:translate(-50%,18px) scale(.94);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.my-turn-notice.visible{opacity:1;transform:translate(-50%,0) scale(1)}
.my-turn-notice span{font:800 25px Georgia,serif;letter-spacing:.08em;color:#e8fbff;text-shadow:0 0 12px #4bd5ff}
.my-turn-notice small{color:#8ed9ea;font:700 11px Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:600px){.my-turn-notice{padding:12px 18px}.my-turn-notice span{font-size:18px}}
.generated-tcg-card .generated-card-bottom{left:6px;right:6px;bottom:6px;min-height:86px;padding:8px 9px 9px;border:2px solid rgba(188,220,205,.58);border-radius:0;background:linear-gradient(180deg,rgba(4,13,14,.92),rgba(1,5,7,.98));clip-path:polygon(4% 0,96% 0,100% 12%,100% 88%,96% 100%,4% 100%,0 88%,0 12%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.85),inset 0 0 18px rgba(102,255,217,.08),0 -12px 24px rgba(0,0,0,.35)}
.generated-tcg-card .generated-card-type{margin:-2px 10px 5px;padding:3px 18px;border:1px solid rgba(231,255,239,.7);border-radius:0 0 9px 9px;background:linear-gradient(180deg,#172e2e,#061112);color:#d8ffe9;text-align:center;font:700 8px Georgia,serif;letter-spacing:.16em}
.generated-tcg-card .generated-card-text{min-height:31px;color:#f0f3e9;font:italic 9px Georgia,serif;line-height:1.22;text-align:center;text-shadow:0 1px 2px #000}
.generated-tcg-card .tcg-live-stats{gap:4px;margin-top:6px;justify-content:space-between}
.generated-tcg-card .tcg-live-stats span{min-width:45px;padding:4px 6px;border:2px solid currentColor;border-radius:0;background:linear-gradient(180deg,rgba(8,19,21,.96),rgba(1,6,8,.98));clip-path:polygon(16% 0,84% 0,100% 24%,100% 76%,84% 100%,16% 100%,0 76%,0 24%);text-align:center;font:700 14px Georgia,serif;text-shadow:0 1px 2px #000;box-shadow:inset 0 0 8px currentColor,0 2px 4px #000}
.generated-tcg-card .tcg-atk{color:#dcf7eb!important}.generated-tcg-card .tcg-def{color:#b8e7ff!important}.generated-tcg-card .tcg-hp{color:#ffb4bd!important}
body.game-mode .battle-left-rail{position:absolute!important;left:.8%!important;top:33.7%!important;display:flex!important;flex-direction:column!important;gap:8px!important;z-index:60!important}.rail-button{width:64px!important;height:64px!important;border:2px solid rgba(123,141,150,.72)!important;border-radius:7px!important;background:linear-gradient(180deg,rgba(20,25,29,.98),rgba(4,7,9,.98))!important;color:#fff!important;box-shadow:0 5px 14px rgba(0,0,0,.48),inset 0 0 12px rgba(255,255,255,.025)!important}.rail-icon{font-size:24px!important}.rail-button small{font-size:10px!important;letter-spacing:.06em!important}
body.game-mode .deck-stack{position:absolute!important;z-index:56!important;width:84px!important;height:116px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important}.deck-stack.mine{left:2.1%!important;top:15.2%!important;bottom:auto!important}.deck-stack.enemy{right:2.1%!important;top:15.2%!important}.deck-card-back{width:74px!important;height:100px!important;border-radius:8px!important;background:radial-gradient(circle at 50% 50%,rgba(202,241,58,.22),transparent 28%),linear-gradient(180deg,#151808,#050603)!important;border:2px solid rgba(211,239,69,.78)!important;box-shadow:0 0 17px rgba(201,235,68,.16),5px 6px 0 #101214,9px 11px 0 #080a0b!important;color:transparent!important;position:relative!important}.deck-card-back::before{content:'✦'!important;position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;color:#d9ff49!important;font-size:30px!important;text-shadow:0 0 11px rgba(212,249,73,.45)!important}.deck-stack span{position:absolute!important;bottom:-12px!important;width:44px!important;height:36px!important;display:grid!important;place-items:center!important;background:linear-gradient(180deg,#191d20,#06090b)!important;border:2px solid rgba(167,180,186,.78)!important;border-radius:7px!important;color:#fff!important;font:800 22px/1 Georgia,serif!important;box-shadow:0 5px 12px rgba(0,0,0,.5)!important}.deck-stack.mine span{left:-2px!important}.deck-stack.enemy span{right:-2px!important}
body.game-mode .enemy-hand-backs{position:absolute!important;left:50%!important;top:-10px!important;transform:translateX(-50%)!important;width:380px!important;height:105px!important;z-index:48!important;pointer-events:none!important}.enemy-hand-card{position:absolute!important;left:50%!important;top:0!important;width:74px!important;height:104px!important;border-radius:8px!important;background:radial-gradient(circle at 50% 47%,rgba(206,242,62,.20),transparent 27%),linear-gradient(180deg,#151807,#050603)!important;border:2px solid rgba(211,239,69,.64)!important;box-shadow:0 6px 15px rgba(0,0,0,.45)!important;transform-origin:50% 125%!important;transform:translateX(calc((var(--i) - (var(--n) - 1)/2) * 36px)) rotate(calc((var(--i) - (var(--n) - 1)/2) * 5deg))!important}.enemy-hand-card::after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;color:#d8ff45;font-size:25px;opacity:.9}

/* héros supérieur et inférieur */
body.game-mode #opponentHero,body.game-mode #myHero{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;width:720px!important;height:145px!important;background:none!important;border:0!important;box-shadow:none!important;z-index:59!important;overflow:visible!important}.opponent#opponentHero{top:18px!important}#myHero{top:66.0%!important;bottom:auto!important}.cin-hero-hud{position:relative!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}.cin-hero-core{position:relative!important;width:244px!important;height:138px!important;display:grid!important;place-items:center!important}.hero-drop-zone{position:absolute!important;left:50%!important;top:0!important;transform:translateX(-50%)!important}.cin-hero-avatar{width:112px!important;height:112px!important;border-radius:50%!important;overflow:hidden!important;background:#071019!important;border:5px solid #168fe2!important;box-shadow:0 0 0 4px #0a0e11,0 0 20px rgba(22,160,238,.50),inset 0 0 18px rgba(255,255,255,.06)!important}.cin-hero-hud.enemy .cin-hero-avatar{border-color:#a7c927!important;box-shadow:0 0 0 4px #0c0e08,0 0 20px rgba(183,221,50,.40),inset 0 0 18px rgba(255,255,255,.04)!important}.cin-hero-avatar img{width:100%!important;height:100%!important;object-fit:cover!important}.cin-orb{position:absolute!important;top:31px!important;width:55px!important;height:55px!important;border-radius:50%!important;display:grid!important;place-items:center!important;color:#fff!important;font:800 27px/1 Georgia,serif!important;border:3px solid rgba(245,202,65,.98)!important;background:radial-gradient(circle at 35% 28%,#f7d35d,#77550d 58%,#180f02)!important;box-shadow:0 0 0 3px #0a0d0f,0 0 16px rgba(244,195,60,.34)!important;z-index:7!important}.cin-orb.energy{left:1px!important}.cin-orb.hp{right:1px!important;border-color:#ff6972!important;background:radial-gradient(circle at 35% 28%,#ff777c,#951a25 58%,#250507)!important;box-shadow:0 0 0 3px #0a0d0f,0 0 16px rgba(255,81,91,.34)!important}.cin-hero-hud.enemy .cin-orb.energy{border-color:#c2df3d!important;background:radial-gradient(circle at 35% 28%,#ddf662,#60730f 58%,#141903)!important;box-shadow:0 0 0 3px #0a0d0f,0 0 16px rgba(197,230,61,.30)!important}.cin-hero-name{position:absolute!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;min-width:220px!important;padding:7px 18px!important;text-align:center!important;white-space:nowrap!important;color:#fff!important;font:700 17px/1.1 Georgia,serif!important;background:linear-gradient(180deg,#1b2023,#050708)!important;border:1px solid rgba(169,176,179,.88)!important;border-radius:5px!important;box-shadow:0 4px 10px rgba(0,0,0,.62)!important}.cin-power-wrap{position:absolute!important;left:calc(50% + 115px)!important;top:23px!important;width:315px!important;z-index:8!important}.cin-power{width:315px!important;min-height:82px!important;padding:10px 13px!important;display:flex!important;align-items:center!important;gap:12px!important;text-align:left!important;border-radius:8px!important;background:linear-gradient(180deg,rgba(7,35,54,.98),rgba(3,15,24,.98))!important;border:2px solid #28b5ff!important;color:#f4fbff!important;box-shadow:0 0 0 2px #071017,0 0 16px rgba(37,170,238,.24)!important}.cin-hero-hud.enemy .cin-power{background:linear-gradient(180deg,rgba(25,36,7,.98),rgba(8,12,3,.98))!important;border-color:#a7c927!important;box-shadow:0 0 0 2px #0a0e05,0 0 16px rgba(183,220,47,.20)!important}.cin-power-icon{flex:0 0 50px!important;width:50px!important;height:50px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:radial-gradient(circle,#0e4769,#04131d)!important;border:2px solid #5eceff!important;color:#e4fbff!important;font-size:27px!important}.cin-hero-hud.enemy .cin-power-icon{background:radial-gradient(circle,#53650e,#111703)!important;border-color:#c6e246!important;color:#edff85!important}.cin-power strong{display:block!important;font:700 16px/1.05 Georgia,serif!important}.cin-power small{display:block!important;margin-top:4px!important;color:inherit!important;font:400 13px/1.25 Arial,sans-serif!important;opacity:.95!important}

/* figurines exactement dans les deux rangées du plateau */
body.game-mode #opponentBoard,body.game-mode #myBoard{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;width:min(910px,62vw)!important;height:205px!important;display:flex!important;justify-content:center!important;align-items:flex-end!important;gap:58px!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important;z-index:55!important}.board-row.top#opponentBoard{top:20.5%!important}.board-row.bottom#myBoard{top:44.0%!important;bottom:auto!important}.board-row:empty{display:flex!important}.board-figure{position:relative!important;flex:0 0 176px!important;width:176px!important;height:195px!important;margin:0!important;transform-origin:center bottom!important;filter:none!important}.board-figure:hover{transform:translateY(-8px) scale(1.06)!important;z-index:85!important}.figure-shadow{position:absolute!important;left:12%!important;right:12%!important;bottom:23px!important;height:24px!important;border-radius:50%!important;background:radial-gradient(circle,rgba(0,0,0,.65),transparent 70%)!important}.figure-aura{position:absolute!important;left:18px!important;right:18px!important;bottom:28px!important;height:42px!important;border-radius:50%!important;background:radial-gradient(circle,rgba(32,168,255,.30),rgba(32,168,255,0) 68%)!important;filter:blur(8px)!important}.faction-parasite .figure-aura{background:radial-gradient(circle,rgba(198,235,65,.32),rgba(198,235,65,0) 68%)!important}.figure-body{position:absolute!important;left:0!important;right:0!important;top:-1px!important;height:154px!important;overflow:visible!important;clip-path:none!important;background:none!important;filter:drop-shadow(0 10px 10px rgba(0,0,0,.68))!important}.figure-body::before,.figure-body::after{display:none!important}.miniature-canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:scale(1.12)!important}.figure-fallback{display:none!important}.figure-base{position:absolute!important;left:15px!important;right:15px!important;bottom:11px!important;height:43px!important;border-radius:50%!important;background:linear-gradient(180deg,#26323a,#0a0d10 55%,#020304)!important;border:3px solid #148ee2!important;box-shadow:0 0 0 3px #101418,0 0 16px rgba(28,159,237,.58),inset 0 5px 10px rgba(255,255,255,.06)!important;transform:perspective(340px) rotateX(56deg)!important}.faction-parasite .figure-base{border-color:#92b922!important;box-shadow:0 0 0 3px #111507,0 0 16px rgba(184,225,47,.55),inset 0 5px 10px rgba(255,255,255,.04)!important}.figure-base-core{position:absolute!important;inset:7px 21px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.13)!important;background:repeating-radial-gradient(circle,rgba(255,255,255,.05) 0 2px,transparent 2px 11px)!important}.figure-name{display:none!important}.figure-stat{position:absolute!important;bottom:5px!important;width:42px!important;height:42px!important;min-width:42px!important;display:grid!important;place-items:center!important;border-radius:50%!important;color:#fff!important;font:800 24px/1 Georgia,serif!important;box-shadow:0 0 0 3px #0b0e10,0 4px 12px rgba(0,0,0,.55)!important;z-index:8!important}.figure-stat.atk{left:14px!important;background:radial-gradient(circle at 34% 28%,#55bbff,#0e3e66 60%,#061018)!important;border:2px solid #57c2ff!important}.faction-parasite .figure-stat.atk{background:radial-gradient(circle at 34% 28%,#b9dc3c,#4d6410 60%,#111704)!important;border-color:#c2e54c!important}.figure-stat.hp{right:14px!important;background:radial-gradient(circle at 34% 28%,#ff7379,#8c1920 60%,#220506)!important;border:2px solid #ff8187!important}.figure-stat.def{display:none!important}.figure-exhausted{position:absolute!important;right:11px!important;top:4px!important;padding:4px 8px!important;border-radius:999px!important;background:rgba(5,8,10,.9)!important;border:1px solid rgba(180,191,197,.45)!important;color:#fff!important;font-size:11px!important}

/* panneau de tour à droite */
body.game-mode .cinematic-turn-panel{position:absolute!important;right:.9%!important;top:35.0%!important;width:214px!important;padding:10px 14px!important;text-align:center!important;border-radius:6px!important;background:linear-gradient(180deg,rgba(17,23,27,.97),rgba(5,8,10,.98))!important;border:2px solid rgba(106,126,137,.72)!important;box-shadow:0 6px 18px rgba(0,0,0,.48)!important;z-index:61!important}.cinematic-turn-panel #cinematicTurnNumber{color:#f4f8fa!important;font:700 16px/1.1 Georgia,serif!important}.cinematic-turn-panel #cinematicTurnState{display:none!important}#turnBadge{position:absolute!important;right:.9%!important;top:39.4%!important;width:214px!important;height:72px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 16px!important;text-align:center!important;border-radius:6px!important;background:linear-gradient(180deg,#0c6fb6,#0c2a46 84%)!important;border:2px solid #48beff!important;color:#fff!important;box-shadow:0 0 0 2px #06101a,0 0 20px rgba(52,177,244,.32)!important;font:800 18px/1.12 Georgia,serif!important;z-index:61!important;pointer-events:none!important}#turnBadge.mine{background:linear-gradient(180deg,#0a92e9,#0b385d 84%)!important}.controls{position:absolute!important;right:.9%!important;top:46.6%!important;width:214px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;z-index:61!important}#selectionText,#cancelBtn{display:none!important}.control-buttons{display:block!important}#endTurnBtn{width:214px!important;height:72px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:6px!important;border:2px solid #52b9ff!important;background:linear-gradient(180deg,#177fe2,#10385e 84%)!important;color:#fff!important;box-shadow:0 0 0 2px #06101a,0 0 20px rgba(52,177,244,.25)!important;font:800 18px/1.1 Georgia,serif!important}

/* main au niveau exact du prototype, sans chevaucher le héros */
body.game-mode .hand-wrap{position:absolute!important;left:50%!important;top:76.0%!important;bottom:auto!important;transform:translateX(-50%)!important;width:min(930px,61vw)!important;height:245px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;z-index:62!important;overflow:visible!important}.hand-topline{display:none!important}.hand{position:absolute!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;height:245px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:0!important;padding:0 18px!important;overflow:visible!important}.hand .card{position:relative!important;width:150px!important;height:214px!important;flex:0 0 150px!important;margin-left:-31px!important;transform-origin:center 110%!important;transition:transform .16s ease,filter .16s ease!important;filter:drop-shadow(0 12px 12px rgba(0,0,0,.67))!important;border-radius:13px!important}.hand .card:first-child{margin-left:0!important}.hand .card:hover{transform:translateY(-45px) rotate(0deg) scale(1.14)!important;z-index:150!important}.hand .card.selected{transform:translateY(-38px) rotate(0deg) scale(1.10)!important;z-index:145!important}

/* journal glissant, pas de colonne permanente */
body.game-mode .side-column{position:absolute!important;left:85px!important;top:150px!important;bottom:140px!important;width:330px!important;transform:translateX(-360px)!important;transition:transform .2s ease!important;z-index:80!important}.side-column.open{transform:translateX(0)!important}.log-panel{height:100%!important;background:linear-gradient(180deg,rgba(9,14,18,.97),rgba(3,6,8,.98))!important;border:2px solid rgba(83,102,112,.62)!important;border-radius:14px!important;box-shadow:0 18px 36px rgba(0,0,0,.52)!important}.location-card,#statusLine,.hand-title,.hand-hint,.preview-panel{display:none!important}

/* 1920×1080 prioritaire ; on garde la composition sur fenêtres plus petites */
@media (max-width:1550px){body.game-mode .cin-hero-hud{transform:scale(.90)!important}.enemy-hand-backs{transform:translateX(-50%) scale(.9)!important;transform-origin:center top!important}#opponentBoard,#myBoard{width:min(790px,62vw)!important;gap:34px!important}.board-figure{width:156px!important;flex-basis:156px!important}.hand-wrap{width:min(780px,60vw)!important}.hand .card{width:128px!important;height:183px!important;flex-basis:128px!important;margin-left:-28px!important}.deck-stack{transform:scale(.9)!important}}
@media (max-height:900px){body.game-mode #opponentHero{top:4px!important;transform:translateX(-50%) scale(.82)!important;transform-origin:center top!important}body.game-mode #myHero{top:64%!important;transform:translateX(-50%) scale(.80)!important;transform-origin:center top!important}body.game-mode #opponentBoard{top:18.7%!important;transform:translateX(-50%) scale(.86)!important;transform-origin:center top!important}body.game-mode #myBoard{top:41.5%!important;transform:translateX(-50%) scale(.86)!important;transform-origin:center top!important}body.game-mode .hand-wrap{top:74%!important;height:198px!important}.hand{height:198px!important}.hand .card{width:122px!important;height:174px!important;flex-basis:122px!important;margin-left:-27px!important}.cinematic-turn-panel{top:34%!important}#turnBadge{top:39%!important;height:62px!important}.controls{top:47%!important}#endTurnBtn{height:62px!important}}



/* ======================================================================
   V21.2.58 — RECONSTRUCTION VISUELLE D'APRÈS LA RÉFÉRENCE VALIDÉE
   La capture de référence n'est PAS utilisée comme fond. Le HUD est réel.
   ====================================================================== */
body.game-mode{
  --pn-blue:#17a9ff;
  --pn-blue-soft:#76d7ff;
  --pn-green:#b8dc2c;
  --pn-green-soft:#e4ff73;
  --pn-gold:#c99c38;
  --pn-red:#e74b52;
  background:#030507!important;
  overflow:hidden!important;
}
body.game-mode #game{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;overflow:hidden!important;background:#020406!important;isolation:isolate!important}
/* décor de hangar : asset d'environnement uniquement, pas la capture de l'interface */
body.game-mode #game::before{content:''!important;position:fixed!important;inset:0!important;z-index:0!important;pointer-events:none!important;background:
  linear-gradient(180deg,rgba(2,4,6,.28) 0%,rgba(2,4,6,.06) 25%,rgba(2,4,6,.12) 58%,rgba(1,3,5,.70) 100%),
  url('/static/assets/hangar_infestation.png') center center/cover no-repeat!important;filter:saturate(1.08) contrast(1.06) brightness(.82)!important}
body.game-mode #game::after{content:''!important;position:fixed!important;inset:0!important;z-index:95!important;pointer-events:none!important;background:
  radial-gradient(ellipse at 50% 43%,transparent 0 43%,rgba(0,0,0,.10) 63%,rgba(0,0,0,.48) 100%),
  linear-gradient(90deg,rgba(0,0,0,.45),transparent 8%,transparent 92%,rgba(0,0,0,.45))!important;box-shadow:inset 0 0 130px rgba(0,0,0,.50)!important}

body.game-mode .prototype-scenery{position:fixed!important;inset:0!important;z-index:2!important;pointer-events:none!important;overflow:hidden!important}
/* V21.2.60 — socle cinématique : le hangar réel donne de la profondeur au
   décor tout en laissant les overlays CSS, le plateau et les interactions au
   premier plan. */
body.game-mode .prototype-scenery{background:
  linear-gradient(180deg,rgba(3,7,9,.10),rgba(3,7,9,.48) 63%,rgba(1,3,4,.82))!important}
body.game-mode .ship-ceiling{background:transparent!important;border:0!important;box-shadow:none!important}
body.game-mode .side-frame{background:transparent!important;border:0!important;box-shadow:none!important}
/* haut infesté riche et organique, mais reconstruit */
body.game-mode .ship-ceiling{position:absolute!important;left:0!important;right:0!important;top:0!important;height:25.5%!important;overflow:hidden!important;background:
  radial-gradient(ellipse at 8% 48%,rgba(195,229,55,.95) 0 1.5%,rgba(70,82,12,.92) 2.2% 4.8%,rgba(23,13,10,.0) 5.6%),
  radial-gradient(ellipse at 20% 18%,rgba(203,236,66,.95) 0 1.8%,rgba(77,89,14,.9) 2.5% 5.6%,rgba(23,13,10,0) 6.5%),
  radial-gradient(ellipse at 34% 52%,rgba(201,234,61,.95) 0 1.7%,rgba(72,83,13,.9) 2.4% 5.2%,transparent 6%),
  radial-gradient(ellipse at 52% 21%,rgba(203,237,65,.96) 0 2.0%,rgba(72,84,13,.92) 2.7% 6.0%,transparent 6.8%),
  radial-gradient(ellipse at 68% 49%,rgba(201,235,61,.95) 0 1.8%,rgba(72,84,13,.9) 2.5% 5.6%,transparent 6.4%),
  radial-gradient(ellipse at 82% 19%,rgba(202,235,62,.96) 0 1.7%,rgba(73,85,14,.9) 2.4% 5.2%,transparent 6%),
  radial-gradient(ellipse at 92% 55%,rgba(196,231,57,.94) 0 1.7%,rgba(69,82,13,.9) 2.4% 5.3%,transparent 6.1%),
  repeating-radial-gradient(ellipse at 50% 58%,rgba(86,25,18,.95) 0 8px,rgba(24,9,8,.98) 9px 17px,rgba(145,41,24,.55) 18px 21px,rgba(18,8,7,.96) 22px 32px),
  linear-gradient(180deg,rgba(8,8,8,.55),rgba(5,5,4,.92))!important;border-bottom:3px solid rgba(193,155,58,.60)!important;box-shadow:0 11px 30px rgba(0,0,0,.64),inset 0 -24px 40px rgba(221,174,47,.10)!important}
body.game-mode .ship-ceiling::before{content:''!important;position:absolute!important;inset:-8% -4%!important;background:
  repeating-linear-gradient(12deg,transparent 0 44px,rgba(150,31,22,.84) 47px 52px,rgba(35,11,9,.94) 53px 61px,transparent 62px 112px),
  repeating-linear-gradient(-15deg,transparent 0 62px,rgba(103,21,17,.72) 64px 69px,rgba(26,9,8,.92) 70px 80px,transparent 81px 142px)!important;filter:blur(.35px)!important;opacity:.88!important}
body.game-mode .ship-ceiling::after{content:''!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(255,215,84,.04),transparent 44%,rgba(0,0,0,.25))!important;box-shadow:inset 0 -1px 0 rgba(255,198,76,.38)!important}
body.game-mode .hive-mass{position:absolute!important;border-radius:48%!important;background:radial-gradient(circle at 34% 28%,#e1f978 0 7%,#718711 9% 19%,#24170e 22% 43%,transparent 46%),radial-gradient(circle at 66% 63%,#badb42 0 7%,#55680d 9% 19%,#23140d 22% 44%,transparent 47%),repeating-radial-gradient(circle,rgba(77,24,17,.95) 0 9px,rgba(14,8,7,.98) 10px 18px,rgba(148,39,24,.32) 19px 22px)!important;border:2px solid rgba(104,56,28,.72)!important;box-shadow:0 0 20px rgba(191,229,58,.16),inset 0 0 28px rgba(0,0,0,.76)!important;opacity:.86!important}
body.game-mode .hive-a{width:33%!important;height:115%!important;left:-4%!important;top:-18%!important;transform:rotate(-8deg)!important}
body.game-mode .hive-b{width:35%!important;height:112%!important;left:33%!important;top:-24%!important;transform:rotate(2deg)!important}
body.game-mode .hive-c{width:34%!important;height:118%!important;right:-4%!important;top:-19%!important;transform:rotate(8deg)!important}
body.game-mode .hive-tendril{height:14px!important;background:linear-gradient(180deg,#5e2519,#1a0b09 45%,#7d2e19 74%,#130807)!important;box-shadow:0 0 0 2px rgba(116,51,25,.55),0 0 12px rgba(190,222,50,.10)!important;opacity:.95!important}

/* plateau central similaire à la référence : plus clair, métal usé et visible */
body.game-mode .battle-floor{position:absolute!important;left:7.0%!important;right:7.0%!important;top:20.6%!important;bottom:20.2%!important;clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)!important;background:
  linear-gradient(90deg,transparent 0 49.90%,rgba(196,169,92,.17) 49.94% 50.06%,transparent 50.10%),
  repeating-linear-gradient(0deg,transparent 0 19.3%,rgba(188,174,122,.20) 19.5% 19.8%,transparent 20.1% 39.4%),
  repeating-linear-gradient(90deg,transparent 0 12.15%,rgba(177,164,111,.13) 12.35% 12.55%,transparent 12.75% 24.9%),
  linear-gradient(180deg,rgba(73,77,78,.70),rgba(39,44,46,.78) 40%,rgba(23,28,31,.88))!important;border:3px solid rgba(93,104,111,.55)!important;border-top-color:rgba(187,157,75,.60)!important;box-shadow:inset 0 0 78px rgba(0,0,0,.28),0 12px 32px rgba(0,0,0,.42)!important}
body.game-mode .battle-floor::before{content:''!important;position:absolute!important;inset:0!important;background:
  radial-gradient(circle at 13% 25%,rgba(120,22,21,.72) 0 2px,transparent 3px),
  radial-gradient(circle at 22% 48%,rgba(120,22,21,.54) 0 2px,transparent 3px),
  radial-gradient(circle at 43% 30%,rgba(120,22,21,.62) 0 2px,transparent 3px),
  radial-gradient(circle at 61% 22%,rgba(120,22,21,.58) 0 2px,transparent 3px),
  radial-gradient(circle at 77% 61%,rgba(120,22,21,.64) 0 2px,transparent 3px),
  radial-gradient(circle at 89% 38%,rgba(120,22,21,.56) 0 2px,transparent 3px)!important;background-size:21px 23px,31px 29px,27px 33px,34px 37px,25px 31px,29px 35px!important;opacity:.46!important}
body.game-mode .battle-floor::after{content:''!important;position:absolute!important;left:50%!important;top:49%!important;width:116px!important;height:116px!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;border:2px solid rgba(204,190,129,.22)!important;box-shadow:0 0 0 9px rgba(204,190,129,.06)!important}
body.game-mode .floor-grid{inset:0!important;background:linear-gradient(90deg,rgba(202,187,129,.09) 1px,transparent 1px),linear-gradient(0deg,rgba(202,187,129,.08) 1px,transparent 1px)!important;background-size:12.5% 100%,100% 20%!important;opacity:.72!important}
body.game-mode .floor-emblem{left:50%!important;top:49%!important;width:78px!important;height:78px!important;transform:translate(-50%,-50%)!important;border:2px solid rgba(208,194,132,.21)!important;border-radius:50%!important}
body.game-mode .floor-emblem span{inset:14px!important;border-color:rgba(208,194,132,.17)!important}
body.game-mode .floor-scar{height:3px!important;opacity:.56!important;filter:none!important}
body.game-mode .scar-a{width:44%!important;left:8%!important;top:26%!important;transform:rotate(6deg)!important}
body.game-mode .scar-b{width:40%!important;right:7%!important;top:58%!important;transform:rotate(-7deg)!important}
body.game-mode .scar-c{width:31%!important;left:38%!important;top:73%!important;transform:rotate(3deg)!important}
body.game-mode .sector-copy{color:rgba(226,233,235,.45)!important;font:700 14px/1.18 Arial,sans-serif!important;letter-spacing:.04em!important;text-shadow:0 2px 4px #000!important}
body.game-mode .sector-copy strong{font-size:16px!important}
body.game-mode .sector-left{left:7%!important;top:54%!important}.sector-right{right:5.8%!important;top:54%!important;text-align:right!important}

/* structures latérales, comme les montants du prototype */
body.game-mode .side-frame{position:absolute!important;top:14.5%!important;bottom:0!important;width:7.4%!important;background:linear-gradient(90deg,#070a0c,#1b252c 37%,#080b0d)!important;box-shadow:inset 0 0 30px #000,0 0 24px rgba(0,0,0,.40)!important}
body.game-mode .frame-left{left:0!important;border-right:2px solid rgba(69,96,109,.46)!important}.frame-right{right:0!important;border-left:2px solid rgba(69,96,109,.46)!important}
body.game-mode .side-frame::before{content:''!important;position:absolute!important;inset:1.8% 6%!important;background:repeating-linear-gradient(0deg,rgba(18,24,28,.95) 0 25px,rgba(42,54,60,.9) 26px 29px,rgba(7,10,12,.98) 30px 55px)!important;border:1px solid rgba(76,94,104,.36)!important}
body.game-mode .side-frame::after{content:''!important;position:absolute!important;inset:9% 28%!important;background:repeating-linear-gradient(0deg,#071017 0 11px,#1281b7 12px 16px,#071017 17px 37px)!important;box-shadow:0 0 12px rgba(36,162,225,.27)!important}
body.game-mode .frame-right::after{background:repeating-linear-gradient(0deg,#0e1112 0 11px,#a97c21 12px 16px,#0e1112 17px 37px)!important;box-shadow:0 0 12px rgba(224,156,46,.20)!important}

/* gros blocs avant-plan, sans masquer les cartes */
body.game-mode .foreground-console{position:absolute!important;bottom:-5.5%!important;width:23.5%!important;height:25%!important;z-index:4!important;background:linear-gradient(150deg,#10171b,#050709 67%)!important;border:3px solid rgba(53,68,77,.74)!important;clip-path:polygon(0 32%,16% 10%,77% 0,100% 22%,92% 100%,0 100%)!important;box-shadow:0 -8px 26px rgba(0,0,0,.66),inset 0 0 28px rgba(46,160,212,.09)!important}
body.game-mode .console-left{left:-3%!important;transform:rotate(2deg)!important}.console-right{right:-3%!important;transform:scaleX(-1) rotate(2deg)!important}
body.game-mode .foreground-console::after{content:''!important;position:absolute!important;right:9%!important;top:24%!important;width:38%!important;height:45%!important;border-radius:8px!important;background:linear-gradient(180deg,#07151c,#020507)!important;border:2px solid rgba(57,89,105,.55)!important;box-shadow:inset 0 0 18px rgba(46,180,235,.09)!important}
body.game-mode .foreground-console span{top:48%!important;font-size:16px!important;color:rgba(232,239,242,.33)!important}
body.game-mode .space-window{right:.8%!important;top:3.8%!important;width:11.8%!important;height:20.2%!important;clip-path:polygon(10% 0,100% 5%,92% 100%,0 92%)!important;background:linear-gradient(155deg,#09223a,#3f668d 48%,#0d1c2c)!important;border:2px solid rgba(97,120,132,.7)!important;box-shadow:inset 0 0 26px rgba(0,0,0,.58)!important}
body.game-mode .wall-copy-left{left:7.6%!important;top:7%!important;opacity:.55!important}.wall-copy-right{right:4.7%!important;top:3.8%!important;opacity:.48!important}
body.game-mode .upper-light-rail{position:absolute!important;left:7.2%!important;right:7.2%!important;top:20.2%!important;height:7px!important;background:repeating-linear-gradient(90deg,transparent 0 6.5%,rgba(239,173,47,.8) 6.7% 7.0%,transparent 7.2% 13.5%)!important;box-shadow:0 0 12px rgba(232,163,42,.28)!important}
body.game-mode .lower-battle-rim{position:absolute!important;left:7.5%!important;right:7.5%!important;bottom:19.7%!important;height:18px!important;background:linear-gradient(180deg,#28343a,#0a0e11)!important;border-top:2px solid rgba(67,93,106,.55)!important;box-shadow:0 -7px 14px rgba(0,0,0,.30)!important}

/* marque, menus, decks */
body.game-mode .cinematic-brand{left:22px!important;top:18px!important;z-index:70!important}.cinematic-brand strong{font-size:18px!important;letter-spacing:.30em!important}.cinematic-brand small{font-size:9px!important}
body.game-mode .battle-left-rail{left:5px!important;top:35.5%!important;gap:8px!important;z-index:72!important}.rail-button{width:60px!important;height:58px!important;border-radius:5px!important;background:linear-gradient(180deg,#151b1f,#06090b)!important;border:2px solid rgba(117,137,147,.68)!important;box-shadow:0 5px 13px rgba(0,0,0,.42)!important}.rail-icon{font-size:21px!important}.rail-button small{font-size:9px!important}
body.game-mode .deck-stack{width:86px!important;height:116px!important;z-index:68!important}.deck-stack.enemy{right:22px!important;top:17.2%!important}.deck-stack.mine{left:22px!important;top:17.2%!important;bottom:auto!important}.deck-card-back{width:75px!important;height:101px!important;border-radius:7px!important;border:2px solid rgba(211,236,66,.70)!important;background:radial-gradient(circle at 50% 46%,rgba(206,242,62,.18),transparent 30%),linear-gradient(180deg,#16190a,#050603)!important;box-shadow:8px 10px 0 rgba(17,19,17,.82),16px 18px 0 rgba(12,14,13,.76),0 8px 18px rgba(0,0,0,.50)!important}.deck-stack span{bottom:-7px!important;width:38px!important;height:34px!important;border-radius:6px!important;font-size:20px!important}

/* adversaire : cartes en main derrière le portrait */
body.game-mode .enemy-hand-backs{left:50%!important;top:-13px!important;width:390px!important;height:105px!important;z-index:50!important}.enemy-hand-card{width:70px!important;height:98px!important;border-radius:6px!important;box-shadow:0 6px 13px rgba(0,0,0,.48)!important}

/* commandant adverse/allié */
body.game-mode #opponentHero,body.game-mode #myHero{left:50%!important;width:660px!important;height:124px!important;z-index:72!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
body.game-mode #opponentHero{top:2.5%!important}.hero-row.me#myHero{top:61.8%!important;bottom:auto!important}
body.game-mode .cin-hero-core{width:235px!important;height:120px!important}.cin-hero-avatar{width:104px!important;height:104px!important;border-width:4px!important}.cin-orb{top:22px!important;width:52px!important;height:52px!important;font-size:25px!important}.cin-orb.energy{left:4px!important}.cin-orb.hp{right:4px!important}.cin-hero-name{bottom:1px!important;min-width:196px!important;padding:5px 14px!important;border-radius:4px!important;font-size:15px!important}.cin-power-wrap{top:18px!important;width:288px!important}.cin-hero-hud.mine .cin-power-wrap,.cin-hero-hud.enemy .cin-power-wrap{left:calc(50% + 108px)!important}.cin-power{width:288px!important;min-height:76px!important;padding:9px 12px!important;border-radius:5px!important}.cin-power-icon{flex-basis:46px!important;width:46px!important;height:46px!important}.cin-power strong{font-size:15px!important}.cin-power small{font-size:12px!important}

/* figurines : positions proportionnelles comme le prototype */
body.game-mode #opponentBoard,body.game-mode #myBoard{left:50%!important;width:min(820px,58vw)!important;height:188px!important;gap:48px!important;z-index:70!important}.board-row.top#opponentBoard{top:22.7%!important}.board-row.bottom#myBoard{top:43.7%!important;bottom:auto!important}.board-figure{width:166px!important;flex-basis:166px!important;height:188px!important}.figure-body{height:150px!important}.miniature-canvas{transform:scale(1.10)!important}.figure-base{left:14px!important;right:14px!important;bottom:9px!important;height:41px!important}.figure-stat{bottom:4px!important;width:39px!important;height:39px!important;min-width:39px!important;font-size:22px!important}.figure-stat.atk{left:13px!important}.figure-stat.hp{right:13px!important}

/* tour / bouton fin de tour */
body.game-mode .cinematic-turn-panel{right:1.1%!important;top:34.4%!important;width:205px!important;padding:9px 13px!important;border-radius:4px!important;z-index:75!important}.cinematic-turn-panel #cinematicTurnNumber{font-size:15px!important}#turnBadge{right:1.1%!important;top:39.0%!important;width:205px!important;height:64px!important;border-radius:4px!important;font-size:17px!important;z-index:75!important}.controls{right:1.1%!important;top:45.8%!important;width:205px!important;z-index:75!important}#endTurnBtn{width:205px!important;height:64px!important;border-radius:4px!important;font-size:17px!important}

/* main joueur : sous le héros, les cartes ne mangent plus le HUD */
body.game-mode .hand-wrap{left:50%!important;top:73.6%!important;width:min(835px,57vw)!important;height:228px!important;z-index:74!important}.hand{height:228px!important;padding:0 10px!important}.hand .card{width:139px!important;height:198px!important;flex-basis:139px!important;margin-left:-27px!important;transform-origin:center 112%!important}.hand .card:hover{transform:translateY(-38px) scale(1.11)!important;z-index:160!important}
body.game-mode .hero-row.me#myHero{z-index:78!important}

/* retrait des couches qui donnaient l'ancien aspect abstrait */
body.game-mode .arena::before,body.game-mode .arena::after,.table-crown,.table-crest,.board-glow,.middle-line{display:none!important}.location-card,#statusLine,.hand-topline,.preview-panel{display:none!important}
body.game-mode .game-shell,body.game-mode .main-column,body.game-mode .arena{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:10!important;overflow:visible!important}

/* priorité 1920×1080 */
@media (min-width:1700px) and (min-height:960px){
  body.game-mode #opponentBoard,body.game-mode #myBoard{gap:58px!important;width:850px!important}
  body.game-mode .board-figure{width:174px!important;flex-basis:174px!important}
  body.game-mode .hand-wrap{width:870px!important}
  body.game-mode .hand .card{width:145px!important;height:207px!important;flex-basis:145px!important;margin-left:-28px!important}
}
@media (max-width:1500px){
  body.game-mode #opponentHero,body.game-mode #myHero{transform:translateX(-50%) scale(.90)!important;transform-origin:center top!important}
  body.game-mode #opponentBoard,body.game-mode #myBoard{width:min(720px,58vw)!important;gap:26px!important;transform:translateX(-50%) scale(.90)!important;transform-origin:center top!important}
  body.game-mode .hand-wrap{width:min(720px,57vw)!important}.hand .card{width:120px!important;height:171px!important;flex-basis:120px!important;margin-left:-24px!important}
  body.game-mode .cinematic-turn-panel,#turnBadge,.controls{right:.4%!important}
}
@media (max-height:900px){
  body.game-mode #opponentHero{top:0!important;transform:translateX(-50%) scale(.80)!important;transform-origin:center top!important}
  body.game-mode .hero-row.me#myHero{top:61%!important;transform:translateX(-50%) scale(.80)!important;transform-origin:center top!important}
  body.game-mode .board-row.top#opponentBoard{top:20.9%!important;transform:translateX(-50%) scale(.82)!important;transform-origin:center top!important}
  body.game-mode .board-row.bottom#myBoard{top:42.0%!important;transform:translateX(-50%) scale(.82)!important;transform-origin:center top!important}
  body.game-mode .hand-wrap{top:72.5%!important;height:190px!important}.hand{height:190px!important}.hand .card{width:118px!important;height:168px!important;flex-basis:118px!important;margin-left:-23px!important}
  body.game-mode .cinematic-turn-panel{top:34%!important}#turnBadge{top:39%!important;height:58px!important}.controls{top:46%!important}#endTurnBtn{height:58px!important}
}

/* ========================================================================
   V21.2.59 — PASSE D'INTÉGRATION VISUELLE À PARTIR DU PROTOTYPE VALIDÉ
   Objectif : rapprocher l'interface réelle du screenshot de référence
   sans utiliser ce screenshot comme simple fond plein écran.
   ======================================================================== */

body.game-mode{
  background:#040608 !important;
  overflow:hidden !important;
}
body.game-mode #game,
body.game-mode .game-shell,
body.game-mode .main-column,
body.game-mode .screen{
  background:transparent !important;
}
body.game-mode .topbar,
body.game-mode .side-column,
body.game-mode .location-card,
body.game-mode #statusLine,
body.game-mode .hand-topline,
body.game-mode .table-crown,
body.game-mode .table-crest,
body.game-mode .board-glow,
body.game-mode .middle-line{
  display:none !important;
}

/* --- scène générale --- */
body.game-mode .prototype-scenery{
  position:fixed !important;
  inset:0 !important;
  z-index:1 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(213,255,81,.10), transparent 36%),
    linear-gradient(180deg,#080b0c 0%, #030506 100%) !important;
}
body.game-mode .prototype-scenery::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(4,7,9,.06) 0%, rgba(4,7,9,.18) 34%, rgba(4,7,9,.58) 78%, rgba(4,7,9,.92) 100%),
    radial-gradient(circle at 50% 18%, rgba(255,214,88,.07), transparent 20%),
    url('/static/assets/hangar_infestation.png') center center / cover no-repeat;
  filter: brightness(.70) saturate(1.05) contrast(1.04);
  opacity:.88;
}
body.game-mode .prototype-scenery::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 84%, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.52) 74%, rgba(0,0,0,.84) 100%),
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.72) 100%);
}

/* --- plafond ruche / infestation --- */
body.game-mode .ship-ceiling,
body.game-mode .hive-mass,
body.game-mode .hive-tendril{
  display:block !important;
}
body.game-mode .ship-ceiling{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:29% !important;
  overflow:hidden !important;
  z-index:2 !important;
  background:
    radial-gradient(circle at 12% 42%, rgba(199,228,71,.70) 0 2%, rgba(161,186,53,.68) 3%, rgba(63,78,15,.92) 9%, transparent 11%),
    radial-gradient(circle at 19% 33%, rgba(199,228,71,.72) 0 2%, rgba(161,186,53,.68) 3%, rgba(63,78,15,.92) 9%, transparent 11%),
    radial-gradient(circle at 27% 38%, rgba(211,241,80,.76) 0 2%, rgba(175,198,60,.72) 3%, rgba(70,86,18,.94) 9%, transparent 11%),
    radial-gradient(circle at 36% 29%, rgba(206,237,77,.72) 0 2%, rgba(165,190,55,.68) 3%, rgba(66,82,17,.92) 9%, transparent 11%),
    radial-gradient(circle at 51% 38%, rgba(206,237,77,.78) 0 2%, rgba(165,190,55,.72) 3%, rgba(67,82,15,.95) 9%, transparent 11%),
    radial-gradient(circle at 62% 31%, rgba(211,241,80,.72) 0 2%, rgba(175,198,60,.70) 3%, rgba(70,86,18,.94) 9%, transparent 11%),
    radial-gradient(circle at 74% 34%, rgba(199,228,71,.72) 0 2%, rgba(161,186,53,.68) 3%, rgba(63,78,15,.92) 9%, transparent 11%),
    radial-gradient(circle at 84% 40%, rgba(199,228,71,.72) 0 2%, rgba(161,186,53,.68) 3%, rgba(63,78,15,.92) 9%, transparent 11%),
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.34) 100%);
  opacity:.92 !important;
}
body.game-mode .ship-ceiling::before{
  content:'' !important;
  position:absolute !important;
  inset:-3% -2% 0 -2% !important;
  background:
    repeating-radial-gradient(circle at 10% 15%, rgba(202,234,71,.13) 0 8px, rgba(0,0,0,0) 10px 70px),
    linear-gradient(112deg, transparent 0 4%, rgba(106,7,18,.60) 5%, rgba(44,4,11,.90) 6%, transparent 8%),
    linear-gradient(96deg, transparent 0 13%, rgba(105,9,20,.58) 14%, rgba(45,5,10,.88) 15%, transparent 17%),
    linear-gradient(84deg, transparent 0 24%, rgba(116,10,18,.55) 25%, rgba(40,4,9,.86) 26%, transparent 28%),
    linear-gradient(102deg, transparent 0 39%, rgba(107,9,23,.54) 40%, rgba(43,4,10,.84) 41%, transparent 43%),
    linear-gradient(78deg, transparent 0 56%, rgba(109,9,21,.56) 57%, rgba(43,4,10,.88) 58%, transparent 60%),
    linear-gradient(97deg, transparent 0 71%, rgba(112,10,19,.53) 72%, rgba(44,4,11,.86) 73%, transparent 75%),
    linear-gradient(88deg, transparent 0 84%, rgba(119,11,21,.52) 85%, rgba(44,4,12,.88) 86%, transparent 88%);
  mix-blend-mode:screen !important;
  opacity:.88 !important;
}
body.game-mode .ship-ceiling::after{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:35px !important;
  background:linear-gradient(180deg, rgba(255,215,106,0), rgba(255,215,106,.22) 60%, rgba(0,0,0,.70));
}
body.game-mode .hive-mass{
  position:absolute !important;
  width:31% !important;
  height:72% !important;
  top:-6% !important;
  border-radius:44% 56% 34% 66% / 39% 34% 66% 61% !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(222,249,98,.75) 0%, rgba(167,194,57,.60) 10%, rgba(65,79,16,.95) 33%, rgba(31,12,14,.96) 45%, rgba(0,0,0,0) 59%),
    radial-gradient(circle at 60% 42%, rgba(208,238,78,.70) 0%, rgba(168,193,55,.56) 10%, rgba(66,81,17,.94) 30%, rgba(34,12,12,.95) 46%, rgba(0,0,0,0) 56%),
    radial-gradient(circle at 44% 66%, rgba(205,238,76,.62) 0%, rgba(169,193,58,.52) 11%, rgba(62,78,15,.92) 28%, rgba(31,11,12,.96) 44%, rgba(0,0,0,0) 55%);
  filter: blur(.4px) saturate(1.15) !important;
  opacity:.95 !important;
}
body.game-mode .hive-a{ left:-4% !important; transform:rotate(-7deg) !important; }
body.game-mode .hive-b{ left:34% !important; width:34% !important; top:-12% !important; }
body.game-mode .hive-c{ right:-3% !important; transform:rotate(6deg) !important; }
body.game-mode .hive-tendril{
  position:absolute !important;
  height:12px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, rgba(44,5,11,.98), rgba(121,17,30,.80), rgba(43,4,10,.98)) !important;
  box-shadow:0 0 12px rgba(184,38,44,.28), inset 0 0 4px rgba(255,255,255,.05) !important;
  opacity:.96 !important;
}
body.game-mode .tendril-a{ left:-3% !important; top:35% !important; width:45% !important; transform:rotate(9deg) !important; }
body.game-mode .tendril-b{ left:23% !important; top:18% !important; width:54% !important; transform:rotate(-4deg) !important; }
body.game-mode .tendril-c{ left:56% !important; top:38% !important; width:47% !important; transform:rotate(8deg) !important; }

/* --- plateau central --- */
body.game-mode .battle-floor{
  position:absolute !important;
  left:7.1% !important;
  right:7.1% !important;
  top:19.8% !important;
  bottom:17.2% !important;
  z-index:3 !important;
  clip-path:polygon(3% 0,97% 0,100% 100%,0 100%) !important;
  border-top:3px solid rgba(255,210,99,.52) !important;
  background:
    linear-gradient(180deg, rgba(19,22,25,.93), rgba(11,14,16,.97)),
    linear-gradient(90deg, rgba(255,214,92,.16) 0 2px, transparent 2px 15%),
    url('/static/assets/plateau_vaisseau_abandonne.png') center center / cover no-repeat !important;
  box-shadow:
    inset 0 18px 48px rgba(255,205,90,.10),
    inset 0 -16px 34px rgba(0,0,0,.55),
    0 0 0 1px rgba(218,196,127,.08),
    0 16px 40px rgba(0,0,0,.45) !important;
}
body.game-mode .battle-floor::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:
    repeating-linear-gradient(90deg, rgba(212,186,103,.22) 0 2px, transparent 2px calc(20% - 2px), rgba(212,186,103,.22) calc(20% - 2px) 20%),
    repeating-linear-gradient(180deg, rgba(212,186,103,.20) 0 2px, transparent 2px calc(25% - 2px), rgba(212,186,103,.20) calc(25% - 2px) 25%),
    linear-gradient(112deg, transparent 0 8%, rgba(125,20,21,.65) 9%, rgba(63,8,10,.85) 10%, transparent 12%),
    linear-gradient(88deg, transparent 0 23%, rgba(122,18,22,.60) 24%, rgba(61,7,11,.82) 25%, transparent 27%),
    linear-gradient(96deg, transparent 0 48%, rgba(125,20,21,.58) 49%, rgba(63,8,10,.84) 50%, transparent 52%),
    linear-gradient(83deg, transparent 0 71%, rgba(125,20,21,.55) 72%, rgba(63,8,10,.84) 73%, transparent 75%),
    radial-gradient(circle at 17% 32%, rgba(148,16,21,.45) 0 2.2%, transparent 2.4%),
    radial-gradient(circle at 66% 19%, rgba(148,16,21,.46) 0 1.7%, transparent 1.9%),
    radial-gradient(circle at 79% 67%, rgba(148,16,21,.46) 0 2.4%, transparent 2.7%);
  opacity:.74 !important;
}
body.game-mode .battle-floor::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:48.5% !important;
  width:112px !important;
  height:112px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  border:2px solid rgba(204,190,129,.25) !important;
  box-shadow:0 0 0 10px rgba(204,190,129,.06) !important;
  background:
    linear-gradient(90deg, transparent 47%, rgba(204,190,129,.42) 48%, rgba(204,190,129,.42) 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(204,190,129,.42) 48%, rgba(204,190,129,.42) 52%, transparent 53%);
}
body.game-mode .floor-grid,
body.game-mode .floor-emblem,
body.game-mode .floor-scar{display:none !important;}
body.game-mode .sector-copy{
  position:absolute !important;
  color:rgba(232,236,240,.56) !important;
  font:700 19px/1.08 Arial,sans-serif !important;
  letter-spacing:.02em !important;
  text-shadow:0 3px 8px rgba(0,0,0,.58) !important;
  z-index:2 !important;
}
body.game-mode .sector-copy strong{font-weight:900 !important;}
body.game-mode .sector-left{left:9.7% !important; bottom:17.5% !important;}
body.game-mode .sector-right{right:9.5% !important; bottom:19.0% !important; text-align:right !important;}
body.game-mode .sector-right::before{content:'DANGER\A BIOMASSE\A ACTIVE'; white-space:pre; font-weight:800;}
body.game-mode .sector-right{font-size:0 !important;}

/* --- flancs et consoles --- */
body.game-mode .side-frame{
  position:absolute !important;
  top:14.2% !important;
  bottom:0 !important;
  width:7.8% !important;
  z-index:2 !important;
  background:linear-gradient(90deg, #07090a, #24303a 45%, #060809) !important;
  box-shadow:inset 0 0 32px rgba(0,0,0,.88), 0 0 24px rgba(0,0,0,.35) !important;
}
body.game-mode .side-frame.frame-left{left:0 !important;}
body.game-mode .side-frame.frame-right{right:0 !important;}
body.game-mode .side-frame::before{
  content:'' !important;
  position:absolute !important;
  inset:2% 9% !important;
  border:1px solid rgba(99,120,131,.30) !important;
  background:repeating-linear-gradient(0deg, rgba(19,26,30,.95) 0 24px, rgba(53,66,74,.92) 24px 27px, rgba(8,12,14,.95) 27px 55px) !important;
}
body.game-mode .side-frame::after{
  content:'' !important;
  position:absolute !important;
  inset:14% 28% !important;
  background:repeating-linear-gradient(0deg, #071017 0 12px, #1aa0df 12px 17px, #071017 17px 38px) !important;
  box-shadow:0 0 12px rgba(36,162,225,.28) !important;
}
body.game-mode .wall-copy{
  position:absolute !important;
  color:rgba(236,240,245,.72) !important;
  font:700 18px/1.18 Arial,sans-serif !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  z-index:4 !important;
  text-shadow:0 4px 10px rgba(0,0,0,.74) !important;
}
body.game-mode .wall-copy-left{left:5.8% !important; top:9.2% !important;}
body.game-mode .wall-copy-right{right:3.0% !important; top:3.4% !important; text-align:right !important;}
body.game-mode .space-window{
  position:absolute !important;
  right:1.0% !important;
  top:4.1% !important;
  width:12.1% !important;
  height:20.5% !important;
  z-index:3 !important;
  clip-path:polygon(11% 0,100% 6%,92% 100%,0 92%) !important;
  background:
    radial-gradient(circle at 58% 64%, rgba(143,172,205,.90), rgba(65,96,134,.88) 22%, rgba(17,35,59,.95) 39%, rgba(9,20,33,.96) 54%),
    linear-gradient(155deg,#0a2236,#44698f 44%,#0c1d2b) !important;
  border:2px solid rgba(96,118,130,.76) !important;
  box-shadow:inset 0 0 24px rgba(0,0,0,.58) !important;
}
body.game-mode .space-stars,
body.game-mode .space-planet,
body.game-mode .space-station{display:block !important;position:absolute !important;}
body.game-mode .space-stars{inset:0;background:
    radial-gradient(circle at 12% 25%, rgba(255,255,255,.90) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 56%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 22%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 78%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 55%, rgba(255,255,255,.78) 0 1px, transparent 2px);
}
body.game-mode .space-planet{width:52%;height:52%;right:8%;bottom:-9%;border-radius:50%;background:radial-gradient(circle at 40% 38%, #a6d3ff, #385b80 60%, #182838 88%);opacity:.95;box-shadow:0 0 26px rgba(147,185,255,.24)}
body.game-mode .space-station{left:18%;top:30%;width:52%;height:6px;background:linear-gradient(90deg, rgba(0,0,0,0), rgba(206,219,235,.88) 16%, rgba(0,0,0,0) 24%, rgba(206,219,235,.88) 35%, rgba(0,0,0,0));transform:rotate(-28deg);box-shadow:0 0 8px rgba(233,240,255,.32)}
body.game-mode .foreground-console{
  position:absolute !important;
  bottom:-5.4% !important;
  width:23.7% !important;
  height:24.8% !important;
  z-index:4 !important;
  background:linear-gradient(150deg,#10161a,#040608 67%) !important;
  border:3px solid rgba(57,73,83,.80) !important;
  clip-path:polygon(0 33%,16% 10%,77% 0,100% 22%,92% 100%,0 100%) !important;
  box-shadow:0 -10px 28px rgba(0,0,0,.70), inset 0 0 30px rgba(46,160,212,.08) !important;
}
body.game-mode .console-left{left:-2.6% !important;}
body.game-mode .console-right{right:-2.6% !important;}
body.game-mode .foreground-console::after{
  content:'' !important;
  position:absolute !important;
  right:9% !important;
  top:25% !important;
  width:38% !important;
  height:44% !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,#08151d,#020507) !important;
  border:2px solid rgba(55,88,104,.52) !important;
  box-shadow:inset 0 0 18px rgba(46,180,235,.08) !important;
}
body.game-mode .foreground-console span{
  position:absolute !important;
  left:10% !important;
  top:48% !important;
  color:rgba(236,240,242,.34) !important;
  font:800 17px/1.15 Arial,sans-serif !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
}
body.game-mode .upper-light-rail,
body.game-mode .lower-battle-rim{display:none !important;}

/* --- marque et hud latéral --- */
body.game-mode .cinematic-brand{
  position:fixed !important;
  left:22px !important;
  top:18px !important;
  z-index:80 !important;
  color:#f4f8fb !important;
  text-shadow:0 3px 8px rgba(0,0,0,.72) !important;
}
body.game-mode .cinematic-brand strong{
  display:block !important;
  font:700 40px/1.0 Georgia,serif !important;
  letter-spacing:.16em !important;
}
body.game-mode .cinematic-brand small{
  display:block !important;
  margin-top:5px !important;
  font:700 20px/1 Arial,sans-serif !important;
  opacity:.86 !important;
}
body.game-mode .battle-left-rail{
  position:fixed !important;
  left:5px !important;
  top:36.5% !important;
  z-index:82 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
body.game-mode .rail-button{
  width:62px !important;
  height:58px !important;
  padding:0 !important;
  border-radius:5px !important;
  border:2px solid rgba(117,137,147,.72) !important;
  background:linear-gradient(180deg,#151b1f,#06090b) !important;
  box-shadow:0 5px 13px rgba(0,0,0,.42) !important;
  color:#fff !important;
}
body.game-mode .rail-icon{font-size:22px !important;}
body.game-mode .rail-button small{font-size:9px !important;letter-spacing:.04em !important;}

/* --- decks --- */
body.game-mode .deck-stack{
  position:fixed !important;
  width:86px !important;
  height:116px !important;
  z-index:68 !important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.68)) !important;
}
body.game-mode .deck-stack.enemy{left:32px !important; top:19.0% !important; right:auto !important;}
body.game-mode .deck-stack.mine{right:32px !important; top:19.0% !important; left:auto !important; bottom:auto !important;}
body.game-mode .deck-card-back{
  width:75px !important;
  height:101px !important;
  border-radius:8px !important;
  border:2px solid rgba(214,240,66,.78) !important;
  color:#d8ef69 !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(210,242,66,.16), rgba(210,242,66,0) 28%),
    linear-gradient(180deg,#16190a,#050603) !important;
  box-shadow:8px 10px 0 rgba(16,18,16,.84), 16px 18px 0 rgba(10,12,11,.80), 0 8px 18px rgba(0,0,0,.55) !important;
}
body.game-mode .deck-stack > span{
  position:absolute !important;
  right:-10px !important;
  bottom:-7px !important;
  width:38px !important;
  height:34px !important;
  border-radius:6px !important;
  border:2px solid rgba(159,171,180,.88) !important;
  background:linear-gradient(180deg,#0f1418,#07090b) !important;
  color:#fff !important;
  font:800 20px/1 Georgia,serif !important;
}
body.game-mode .enemy-hand-backs{
  position:fixed !important;
  left:50% !important;
  top:-2px !important;
  transform:translateX(-50%) !important;
  width:420px !important;
  height:128px !important;
  display:flex !important;
  justify-content:center !important;
  gap:10px !important;
  z-index:60 !important;
  pointer-events:none !important;
}
body.game-mode .enemy-hand-backs .enemy-back{
  width:96px !important;
  height:128px !important;
  border-radius:10px !important;
  border:2px solid rgba(209,241,67,.76) !important;
  background:linear-gradient(180deg,#15190b,#060704) !important;
  box-shadow:0 8px 14px rgba(0,0,0,.55) !important;
  transform-origin:center 100% !important;
}

/* --- panneau de tour / fin de tour --- */
body.game-mode .cinematic-turn-panel{
  position:fixed !important;
  right:1.2% !important;
  top:35.0% !important;
  width:206px !important;
  z-index:75 !important;
  padding:8px 13px !important;
  text-align:center !important;
  border-radius:4px !important;
  color:#fff !important;
  background:linear-gradient(180deg, rgba(13,22,30,.95), rgba(6,11,16,.95)) !important;
  border:2px solid rgba(107,121,134,.65) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.42) !important;
}
body.game-mode #cinematicTurnNumber{font:700 15px/1 Georgia,serif !important;}
body.game-mode #cinematicTurnState{display:none !important;}
body.game-mode #turnBadge{
  position:fixed !important;
  right:1.2% !important;
  top:40.1% !important;
  width:206px !important;
  height:66px !important;
  z-index:75 !important;
  border-radius:4px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  border:2px solid #2cb4ff !important;
  background:linear-gradient(180deg,#1493f4,#0d2b45 88%) !important;
  box-shadow:0 0 0 2px #071018, 0 0 18px rgba(41,170,243,.34) !important;
  color:#ffffff !important;
  font:800 20px/1.08 Georgia,serif !important;
  text-shadow:0 2px 8px rgba(0,0,0,.65) !important;
}
body.game-mode .controls{
  position:fixed !important;
  right:1.2% !important;
  top:47.0% !important;
  width:206px !important;
  z-index:75 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body.game-mode #cancelBtn{display:none !important;}
body.game-mode #endTurnBtn{
  width:206px !important;
  height:66px !important;
  border-radius:4px !important;
  border:2px solid #2cb4ff !important;
  background:linear-gradient(180deg,#0f78dc,#0b2946 88%) !important;
  box-shadow:0 0 0 2px #071018, 0 0 18px rgba(41,170,243,.24) !important;
  color:#fff !important;
  font:800 20px/1.08 Georgia,serif !important;
  text-shadow:0 2px 8px rgba(0,0,0,.65) !important;
}
body.game-mode #selectionText{display:none !important;}

/* --- héros et pouvoirs --- */
body.game-mode #opponentHero,
body.game-mode #myHero{
  position:fixed !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:720px !important;
  height:145px !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:61 !important;
  overflow:visible !important;
}
body.game-mode #opponentHero{top:18px !important;}
body.game-mode #myHero{top:67.0% !important;}
body.game-mode .cin-hero-hud,
body.game-mode .cin-hero-core{display:flex !important; align-items:center !important; justify-content:center !important; overflow:visible !important;}
body.game-mode .cin-hero-core{position:relative !important; width:246px !important; height:136px !important;}
body.game-mode .hero-drop-zone{position:absolute !important; left:50% !important; top:0 !important; transform:translateX(-50%) !important;}
body.game-mode .cin-hero-avatar{
  width:110px !important;
  height:110px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background:#071019 !important;
  border:5px solid #1893e8 !important;
  box-shadow:0 0 0 4px #0a0e11, 0 0 20px rgba(22,160,238,.48), inset 0 0 18px rgba(255,255,255,.05) !important;
}
body.game-mode .cin-hero-hud.enemy .cin-hero-avatar{
  border-color:#a7c927 !important;
  box-shadow:0 0 0 4px #0c0e08, 0 0 20px rgba(183,221,50,.38), inset 0 0 18px rgba(255,255,255,.04) !important;
}
body.game-mode .cin-orb{
  position:absolute !important;
  top:29px !important;
  width:55px !important;
  height:55px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  color:#fff !important;
  font:800 27px/1 Georgia,serif !important;
  z-index:7 !important;
}
body.game-mode .cin-orb.energy{
  left:1px !important;
  border:3px solid rgba(245,202,65,.98) !important;
  background:radial-gradient(circle at 35% 28%,#f7d35d,#77550d 58%,#180f02) !important;
  box-shadow:0 0 0 3px #0a0d0f, 0 0 16px rgba(244,195,60,.34) !important;
}
body.game-mode .cin-orb.hp{
  right:1px !important;
  border:3px solid #ff6972 !important;
  background:radial-gradient(circle at 35% 28%,#ff777c,#951a25 58%,#250507) !important;
  box-shadow:0 0 0 3px #0a0d0f, 0 0 16px rgba(255,81,91,.34) !important;
}
body.game-mode .cin-hero-hud.enemy .cin-orb.energy{
  border-color:#c2df3d !important;
  background:radial-gradient(circle at 35% 28%,#ddf662,#60730f 58%,#141903) !important;
  box-shadow:0 0 0 3px #0a0d0f, 0 0 16px rgba(197,230,61,.30) !important;
}
body.game-mode .cin-hero-name{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  min-width:220px !important;
  padding:7px 18px !important;
  text-align:center !important;
  white-space:nowrap !important;
  color:#fff !important;
  font:700 17px/1.1 Georgia,serif !important;
  background:linear-gradient(180deg,#1b2023,#050708) !important;
  border:1px solid rgba(169,176,179,.88) !important;
  border-radius:5px !important;
  box-shadow:0 4px 10px rgba(0,0,0,.62) !important;
}
body.game-mode .cin-power-wrap{
  position:absolute !important;
  left:calc(50% + 116px) !important;
  top:22px !important;
  width:316px !important;
  z-index:8 !important;
}
body.game-mode .cin-power{
  width:316px !important;
  min-height:82px !important;
  padding:10px 13px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  text-align:left !important;
  border-radius:8px !important;
  border:2px solid #28b5ff !important;
  background:linear-gradient(180deg,rgba(7,35,54,.98),rgba(3,15,24,.98)) !important;
  color:#f4fbff !important;
  box-shadow:0 0 0 2px #071017,0 0 16px rgba(37,170,238,.24) !important;
}
body.game-mode .cin-hero-hud.enemy .cin-power{
  background:linear-gradient(180deg,rgba(25,36,7,.98),rgba(8,12,3,.98)) !important;
  border-color:#a7c927 !important;
  box-shadow:0 0 0 2px #0a0e05,0 0 16px rgba(183,220,47,.20) !important;
}
body.game-mode .cin-power-icon{
  flex:0 0 50px !important;
  width:50px !important;
  height:50px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:radial-gradient(circle,#0e4769,#04131d) !important;
  border:2px solid #5eceff !important;
  color:#e4fbff !important;
  font-size:27px !important;
}
body.game-mode .cin-hero-hud.enemy .cin-power-icon{
  background:radial-gradient(circle,#53650e,#111703) !important;
  border-color:#c6e246 !important;
  color:#edff85 !important;
}
body.game-mode .cin-power strong{display:block !important;font:700 16px/1.05 Georgia,serif !important;}
body.game-mode .cin-power small{display:block !important;margin-top:4px !important;color:inherit !important;font:400 13px/1.25 Arial,sans-serif !important;opacity:.95 !important;}

/* --- lignes de combat et figurines --- */
body.game-mode #opponentBoard,
body.game-mode #myBoard{
  position:fixed !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(830px,58vw) !important;
  height:190px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-end !important;
  gap:50px !important;
  z-index:58 !important;
  overflow:visible !important;
  background:none !important;
  border:0 !important;
}
body.game-mode #opponentBoard{top:22.2% !important;}
body.game-mode #myBoard{top:44.3% !important;}
body.game-mode .board-figure{position:relative !important;flex:0 0 168px !important;width:168px !important;height:190px !important;margin:0 !important;transform-origin:center bottom !important;filter:none !important;z-index:2 !important}
body.game-mode .board-figure:hover{transform:translateY(-8px) scale(1.06) !important;z-index:85 !important;}
body.game-mode .figure-shadow{position:absolute !important;left:12% !important;right:12% !important;bottom:23px !important;height:24px !important;border-radius:50% !important;background:radial-gradient(circle,rgba(0,0,0,.65),transparent 70%) !important;}
body.game-mode .figure-aura{position:absolute !important;left:18px !important;right:18px !important;bottom:28px !important;height:42px !important;border-radius:50% !important;background:radial-gradient(circle,rgba(32,168,255,.30),rgba(32,168,255,0) 68%) !important;filter:blur(8px) !important;}
body.game-mode .faction-parasite .figure-aura{background:radial-gradient(circle,rgba(198,235,65,.32),rgba(198,235,65,0) 68%) !important;}
body.game-mode .figure-body{position:absolute !important;left:0 !important;right:0 !important;top:-1px !important;height:150px !important;overflow:visible !important;background:none !important;filter:drop-shadow(0 10px 10px rgba(0,0,0,.68)) !important;}
body.game-mode .figure-3d-render{position:absolute!important;left:0!important;top:-8px!important;width:100%!important;height:170px!important;object-fit:contain!important;object-position:center bottom!important;z-index:3!important;filter:drop-shadow(0 13px 9px rgba(0,0,0,.82)) saturate(1.12) contrast(1.08)!important;pointer-events:none!important}
body.game-mode .figure-body .miniature-canvas{display:none!important}
body.game-mode .figure-body::before,
body.game-mode .figure-body::after,
body.game-mode .figure-fallback,
body.game-mode .figure-name,
body.game-mode .figure-stat.def{display:none !important;}
body.game-mode .miniature-canvas{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;transform:scale(1.10) !important;}
body.game-mode .figure-base{position:absolute !important;left:14px !important;right:14px !important;bottom:9px !important;height:41px !important;border-radius:50% !important;background:linear-gradient(180deg,#26323a,#0a0d10 55%,#020304) !important;border:3px solid #148ee2 !important;box-shadow:0 0 0 3px #101418,0 0 16px rgba(28,159,237,.58),inset 0 5px 10px rgba(255,255,255,.06) !important;transform:perspective(340px) rotateX(56deg) !important;}
body.game-mode .faction-parasite .figure-base{border-color:#92b922 !important;box-shadow:0 0 0 3px #111507,0 0 16px rgba(184,225,47,.55),inset 0 5px 10px rgba(255,255,255,.04) !important;}
body.game-mode .figure-base-core{position:absolute !important;inset:7px 21px !important;border-radius:50% !important;border:1px solid rgba(255,255,255,.13) !important;background:repeating-radial-gradient(circle,rgba(255,255,255,.05) 0 2px,transparent 2px 11px) !important;}
body.game-mode .figure-stat{position:absolute !important;bottom:4px !important;width:39px !important;height:39px !important;min-width:39px !important;display:grid !important;place-items:center !important;border-radius:50% !important;color:#fff !important;font:800 22px/1 Georgia,serif !important;box-shadow:0 0 0 3px #0b0e10,0 4px 12px rgba(0,0,0,.55) !important;z-index:8 !important;}
body.game-mode .figure-stat.atk{left:13px !important;background:radial-gradient(circle at 34% 28%,#55bbff,#0e3e66 60%,#061018) !important;border:2px solid #57c2ff !important;}
body.game-mode .faction-parasite .figure-stat.atk{background:radial-gradient(circle at 34% 28%,#b9dc3c,#4d6410 60%,#111704) !important;border-color:#c2e54c !important;}
body.game-mode .figure-stat.hp{right:13px !important;background:radial-gradient(circle at 34% 28%,#ff7379,#8c1920 60%,#220506) !important;border:2px solid #ff8187 !important;}

/* --- main du joueur --- */
body.game-mode .hand-wrap{
  position:fixed !important;
  left:50% !important;
  top:74.2% !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
  width:min(835px,57vw) !important;
  height:228px !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:74 !important;
  overflow:visible !important;
}
body.game-mode .hand{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  height:228px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:0 !important;
  padding:0 10px !important;
  overflow:visible !important;
}
body.game-mode .hand .card{
  width:139px !important;
  height:198px !important;
  flex:0 0 139px !important;
  margin-left:-27px !important;
  transform-origin:center 112% !important;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.67)) !important;
}
body.game-mode .hand .card:first-child{margin-left:0 !important;}
body.game-mode .hand .card:hover{transform:translateY(-38px) scale(1.11) !important;z-index:160 !important;}
body.game-mode .hand .card.selected{transform:translateY(-32px) scale(1.08) !important;z-index:155 !important;}

/* --- responsif --- */
@media (max-width: 1550px){
  body.game-mode #opponentBoard,
  body.game-mode #myBoard{width:min(790px,62vw) !important; gap:34px !important;}
  body.game-mode .board-figure{width:156px !important; flex-basis:156px !important;}
  body.game-mode .hand-wrap{width:min(780px,60vw) !important;}
  body.game-mode .hand .card{width:128px !important;height:183px !important;flex-basis:128px !important;margin-left:-28px !important;}
  body.game-mode .deck-stack{transform:scale(.90) !important;}
}
@media (max-height: 900px){
  body.game-mode #opponentHero{transform:translateX(-50%) scale(.84) !important; transform-origin:center top !important;}
  body.game-mode #myHero{top:65.0% !important; transform:translateX(-50%) scale(.82) !important; transform-origin:center top !important;}
  body.game-mode #opponentBoard{top:21.3% !important;}
  body.game-mode #myBoard{top:43.0% !important;}
  body.game-mode .hand-wrap{top:72.4% !important;height:190px !important;}
  body.game-mode .hand{height:190px !important;}
  body.game-mode .hand .card{width:118px !important;height:168px !important;flex-basis:118px !important;margin-left:-23px !important;}
}
\n\n/* ========================================================================
   V21.2.60 — RECONSTRUCTION FINALE D'APRÈS LA RÉFÉRENCE 1600×900
   Tous les éléments de jeu restent de vrais composants interactifs.
   Le screenshot de référence n'est jamais utilisé comme fond du jeu.
   ======================================================================== */

body.game-mode{
  --pn-blue:#19a9ff;
  --pn-blue2:#054c84;
  --pn-acid:#c9df31;
  --pn-acid2:#667515;
  --pn-red:#f14954;
  --pn-gold:#efc84a;
  --pn-steel:#667782;
  background:#020405!important;
}

/* Décor entièrement reconstruit : suppression des images de décor plein écran. */
body.game-mode .prototype-scenery::before{
  background:
    radial-gradient(ellipse at 50% 12%,rgba(213,236,65,.14),transparent 30%),
    linear-gradient(180deg,rgba(7,10,12,.12),rgba(3,5,7,.74) 82%,#020304 100%),
    repeating-linear-gradient(90deg,#081015 0 3.8%,#1b2a31 3.9% 4.2%,#080d10 4.3% 8.4%,#26343b 8.5% 8.8%,#080b0d 8.9% 13.3%),
    linear-gradient(180deg,#121a1f,#050708)!important;
  filter:none!important;
  opacity:1!important;
}
body.game-mode .prototype-scenery::after{
  background:
    radial-gradient(ellipse at 50% 16%,transparent 0 22%,rgba(0,0,0,.14) 43%,rgba(0,0,0,.54) 86%),
    linear-gradient(90deg,rgba(0,0,0,.78),transparent 11% 89%,rgba(0,0,0,.78))!important;
}

/* Infestation de plafond : volumes, nodules lumineux et veines. */
body.game-mode .ship-ceiling{
  height:25.2%!important;
  background:
    radial-gradient(circle at 8% 42%,#e2ef58 0 3px,#728018 4px 10px,transparent 12px),
    radial-gradient(circle at 15% 20%,#d5e846 0 3px,#56630f 4px 9px,transparent 11px),
    radial-gradient(circle at 24% 45%,#ebf96c 0 3px,#667514 4px 11px,transparent 13px),
    radial-gradient(circle at 36% 23%,#dbe94d 0 3px,#5e6c12 4px 10px,transparent 12px),
    radial-gradient(circle at 48% 41%,#effb70 0 3px,#6b7817 4px 11px,transparent 13px),
    radial-gradient(circle at 60% 22%,#e8f45e 0 3px,#687313 4px 10px,transparent 12px),
    radial-gradient(circle at 72% 42%,#edf96a 0 3px,#6a7615 4px 11px,transparent 13px),
    radial-gradient(circle at 84% 21%,#dce950 0 3px,#5b6711 4px 10px,transparent 12px),
    radial-gradient(circle at 92% 43%,#ebf768 0 3px,#687514 4px 11px,transparent 13px),
    linear-gradient(180deg,#050707 0%,#0b0c08 62%,rgba(10,9,5,.72) 100%)!important;
  border-bottom:3px solid rgba(203,175,73,.34)!important;
  box-shadow:inset 0 -28px 46px rgba(0,0,0,.82),0 8px 20px rgba(0,0,0,.56)!important;
}
body.game-mode .ship-ceiling::before{
  inset:-10% -4% -2%!important;
  background:
    repeating-radial-gradient(ellipse at 48% 7%,rgba(192,211,48,.12) 0 4px,transparent 5px 33px),
    linear-gradient(105deg,transparent 0 6%,#2b070c 6.4% 7.2%,#751121 7.5% 8.1%,transparent 8.5% 15%,#2b070c 15.5% 16.4%,transparent 17% 100%),
    linear-gradient(79deg,transparent 0 22%,#41090f 22.5% 23.3%,#8c1726 23.7% 24.2%,transparent 24.7% 48%,#3f080e 48.5% 49.2%,transparent 49.6% 100%),
    linear-gradient(98deg,transparent 0 57%,#35070c 57.3% 58.2%,#7c1421 58.4% 59%,transparent 59.4% 78%,#34070c 78.3% 79%,transparent 79.4%)!important;
  opacity:.88!important;
}
body.game-mode .hive-mass{filter:blur(.2px) saturate(1.2)!important;opacity:.96!important}
body.game-mode .hive-a{left:-6%!important;width:34%!important}
body.game-mode .hive-b{left:35%!important;width:31%!important;top:-14%!important}
body.game-mode .hive-c{right:-6%!important;width:34%!important}

/* Plateau : géométrie et texture métalliques codées. */
body.game-mode .battle-floor{
  left:7.0%!important;
  right:7.0%!important;
  top:20.6%!important;
  bottom:18.4%!important;
  clip-path:polygon(3.1% 0,96.9% 0,100% 100%,0 100%)!important;
  border-top:4px solid rgba(179,151,68,.65)!important;
  background:
    linear-gradient(90deg,rgba(6,10,12,.72) 0 1.2%,transparent 1.3% 98.7%,rgba(6,10,12,.72) 98.8%),
    repeating-linear-gradient(90deg,rgba(216,197,135,.10) 0 1px,transparent 1px 12.5%),
    repeating-linear-gradient(0deg,rgba(216,197,135,.08) 0 1px,transparent 1px 25%),
    radial-gradient(ellipse at 50% 48%,rgba(81,92,95,.20),transparent 50%),
    linear-gradient(180deg,#2a3031 0%,#1b2021 46%,#111617 100%)!important;
  box-shadow:inset 0 15px 24px rgba(218,174,71,.08),inset 0 -28px 55px rgba(0,0,0,.56),0 11px 38px rgba(0,0,0,.52)!important;
}
body.game-mode .battle-floor::before{
  background:
    linear-gradient(90deg,transparent 0 13%,rgba(171,184,181,.13) 13.05% 13.2%,transparent 13.25% 25%,rgba(171,184,181,.11) 25.05% 25.2%,transparent 25.25% 75%,rgba(171,184,181,.11) 75.05% 75.2%,transparent 75.25% 87%,rgba(171,184,181,.13) 87.05% 87.2%,transparent 87.25%),
    linear-gradient(0deg,transparent 0 24.5%,rgba(181,191,186,.16) 24.6% 24.9%,transparent 25% 49.5%,rgba(181,191,186,.16) 49.6% 49.9%,transparent 50% 74.5%,rgba(181,191,186,.16) 74.6% 74.9%,transparent 75%),
    radial-gradient(ellipse at 18% 34%,rgba(119,5,13,.46),transparent 13%),
    radial-gradient(ellipse at 78% 56%,rgba(119,5,13,.40),transparent 15%),
    radial-gradient(ellipse at 57% 20%,rgba(112,7,13,.27),transparent 11%),
    linear-gradient(108deg,transparent 0 23%,rgba(88,4,11,.52) 23.2% 23.8%,transparent 24.1%),
    linear-gradient(76deg,transparent 0 69%,rgba(88,4,11,.46) 69.2% 69.8%,transparent 70.1%)!important;
  opacity:.92!important;
}
body.game-mode .battle-floor::after{
  width:132px!important;height:132px!important;top:50%!important;
  border-color:rgba(195,174,114,.26)!important;
  box-shadow:0 0 0 9px rgba(195,174,114,.055),0 0 0 28px rgba(195,174,114,.022)!important;
}
body.game-mode .floor-grid{display:block!important;position:absolute!important;inset:0!important;background:
  linear-gradient(90deg,transparent 49.86%,rgba(185,170,123,.16) 49.9% 50.1%,transparent 50.14%),
  linear-gradient(0deg,transparent 49.86%,rgba(185,170,123,.13) 49.9% 50.1%,transparent 50.14%)!important}
body.game-mode .floor-emblem{display:block!important;position:absolute!important;left:50%!important;top:50%!important;width:90px!important;height:90px!important;transform:translate(-50%,-50%) rotate(45deg)!important;border:1px solid rgba(194,180,129,.11)!important}
body.game-mode .floor-scar{display:block!important;position:absolute!important;border-radius:50%!important;filter:blur(5px)!important;background:radial-gradient(circle,rgba(109,4,12,.48),rgba(72,4,8,.18) 40%,transparent 70%)!important}
body.game-mode .scar-a{left:13%!important;top:22%!important;width:22%!important;height:18%!important}
body.game-mode .scar-b{right:13%!important;top:34%!important;width:24%!important;height:20%!important}
body.game-mode .scar-c{right:25%!important;bottom:4%!important;width:17%!important;height:14%!important}

/* Parois latérales plus épaisses, lumières bleues et panneaux. */
body.game-mode .side-frame{top:0!important;bottom:0!important;width:8.3%!important;background:
  repeating-linear-gradient(0deg,#070a0c 0 42px,#29363d 43px 47px,#080b0d 48px 92px),
  linear-gradient(90deg,#030405,#25343c 48%,#060809)!important;border-inline:2px solid rgba(83,104,115,.30)!important}
body.game-mode .side-frame::after{inset:9% 27%!important;background:repeating-linear-gradient(0deg,#071017 0 15px,#20a7ec 16px 21px,#071017 22px 48px)!important;filter:drop-shadow(0 0 6px rgba(21,157,225,.68))!important}
body.game-mode .wall-copy-left{left:7.0%!important;top:11%!important;transform:rotate(7deg)!important;color:rgba(215,220,223,.38)!important;font-size:16px!important}
body.game-mode .wall-copy-right{right:2.2%!important;top:2.2%!important;color:rgba(232,234,229,.73)!important;font:700 14px/1.35 Georgia,serif!important;letter-spacing:.14em!important}
body.game-mode .space-window{display:none!important}

body.game-mode .foreground-console{bottom:-7.5%!important;width:25.5%!important;height:28%!important;background:
  radial-gradient(circle at 66% 22%,rgba(28,146,225,.16),transparent 14%),
  repeating-linear-gradient(90deg,#081015 0 24px,#26353c 25px 29px,#06090b 30px 56px)!important;border-color:rgba(58,76,87,.78)!important;box-shadow:0 -12px 32px rgba(0,0,0,.74),inset 0 0 28px rgba(31,145,205,.10)!important}
body.game-mode .foreground-console::before{content:'';position:absolute;left:10%;right:16%;top:15%;height:10px;background:repeating-linear-gradient(90deg,#0b1720 0 20px,#24aef6 21px 31px,#071017 32px 51px);filter:drop-shadow(0 0 7px #1f8cc7)}
body.game-mode .foreground-console::after{right:12%!important;top:35%!important;width:34%!important;height:34%!important;border-color:rgba(65,125,158,.42)!important}
body.game-mode .console-left span{left:12%!important;top:54%!important;font-size:15px!important}.console-right span{left:38%!important;top:55%!important;font-size:14px!important;letter-spacing:.20em!important}

/* Titre compact comme sur la référence. */
body.game-mode .cinematic-brand{left:22px!important;top:18px!important}
body.game-mode .cinematic-brand strong{font:700 18px/1 Georgia,serif!important;letter-spacing:.28em!important}
body.game-mode .cinematic-brand small{font:700 10px/1 Arial,sans-serif!important;margin-top:4px!important}

/* Deck joueur à gauche, deck adverse à droite, comme la référence. */
body.game-mode .deck-stack.mine{left:27px!important;right:auto!important;top:18.5%!important}
body.game-mode .deck-stack.enemy{right:27px!important;left:auto!important;top:18.5%!important}
body.game-mode .deck-card-back{position:relative!important;font-size:0!important;overflow:hidden!important}
body.game-mode .deck-card-back::before{content:'✦';position:absolute;inset:0;display:grid;place-items:center;font:700 38px/1 Georgia,serif;color:#b9d9f4;text-shadow:0 0 14px currentColor}
body.game-mode .deck-stack[data-faction="parasite"] .deck-card-back{border-color:rgba(211,237,59,.74)!important;background:radial-gradient(circle at 50% 45%,rgba(192,224,44,.16),transparent 29%),linear-gradient(180deg,#161909,#050603)!important}
body.game-mode .deck-stack[data-faction="parasite"] .deck-card-back::before{content:'✺';color:#d9ed46}
body.game-mode .deck-stack[data-faction="synthetic"] .deck-card-back::before{content:'◇';color:#a9c9ff}
body.game-mode .deck-stack[data-faction="human"] .deck-card-back::before{content:'✦';color:#bde8ff}

/* Cartes adverses au-dessus du commandant. */
body.game-mode .enemy-hand-backs{top:-18px!important;height:112px!important;width:500px!important;gap:0!important;align-items:flex-start!important}
body.game-mode .enemy-hand-card{display:block!important;position:relative!important;width:78px!important;height:108px!important;margin-left:-9px!important;border-radius:8px!important;border:2px solid rgba(207,226,66,.72)!important;background:radial-gradient(circle at 50% 46%,rgba(203,232,58,.16),transparent 27%),linear-gradient(180deg,#171a0b,#050604)!important;box-shadow:0 6px 12px rgba(0,0,0,.58)!important;transform:rotate(calc((var(--i) - (var(--n) - 1)/2) * 2.7deg)) translateY(calc(abs(var(--i) - (var(--n) - 1)/2) * 2px))!important;transform-origin:center bottom!important}
body.game-mode .enemy-hand-card::after{content:'✺';position:absolute;inset:0;display:grid;place-items:center;font:700 29px/1 Georgia,serif;color:#d7e846;text-shadow:0 0 9px currentColor}
body.game-mode .enemy-hand-backs[data-faction="human"] .enemy-hand-card{border-color:#399fe0!important;background:linear-gradient(180deg,#0b1b28,#04090d)!important}.enemy-hand-backs[data-faction="human"] .enemy-hand-card::after{content:'✦';color:#a7dcff}
body.game-mode .enemy-hand-backs[data-faction="synthetic"] .enemy-hand-card{border-color:#6b85d4!important;background:linear-gradient(180deg,#111629,#05070e)!important}.enemy-hand-backs[data-faction="synthetic"] .enemy-hand-card::after{content:'◇';color:#b6c5ff}

/* Commandants et pouvoirs : même hiérarchie que la maquette. */
body.game-mode #opponentHero{top:3.9%!important;height:145px!important}
body.game-mode #myHero{top:60.1%!important;height:145px!important;z-index:78!important}
body.game-mode .cin-hero-core{width:246px!important;height:136px!important}
body.game-mode .cin-hero-avatar{width:112px!important;height:112px!important}
body.game-mode .cin-hero-hud.enemy .cin-hero-avatar{border-color:var(--pn-acid)!important}
body.game-mode .cin-hero-hud.mine .cin-hero-avatar{border-color:var(--pn-blue)!important}
body.game-mode .cin-orb{top:29px!important;width:56px!important;height:56px!important;font-size:29px!important}
body.game-mode .cin-hero-name{bottom:-2px!important;min-width:210px!important;padding:6px 14px!important;font-size:16px!important}
body.game-mode .cin-power-wrap{left:calc(50% + 108px)!important;top:24px!important;width:298px!important}
body.game-mode .cin-power{width:298px!important;min-height:82px!important;border-radius:7px!important;padding:8px 12px!important}
body.game-mode .cin-power strong{font-size:15px!important}.cin-power em{display:block!important;font:400 12px/1.05 Arial,sans-serif!important;font-style:normal!important;color:#b6c1c8!important;margin-top:2px!important}.cin-power small{font-size:12px!important;margin-top:5px!important;line-height:1.22!important}
body.game-mode .cin-power-icon{width:51px!important;height:51px!important;flex-basis:51px!important}
body.game-mode .cin-power{position:relative!important}
body.game-mode .cin-power-cost{position:absolute!important;left:-31px!important;top:13px!important;width:45px!important;height:45px!important;display:grid!important;place-items:center!important;border-radius:50%!important;color:#fff8dc!important;font:800 24px/1 Georgia,serif!important;background:radial-gradient(circle at 35% 28%,#f6d56d 0,#a97820 48%,#3b2508 78%,#130b02 100%)!important;border:2px solid #f0cd72!important;box-shadow:0 0 0 3px #080b0d,0 0 12px rgba(240,190,65,.38),inset 0 0 0 2px rgba(255,240,166,.28)!important;text-shadow:0 2px 3px #211504!important;z-index:4!important}

/* Figurines alignées sur deux lignes du plateau. */
body.game-mode #opponentBoard{top:21.7%!important;width:min(760px,55vw)!important;height:174px!important;gap:58px!important}
body.game-mode #myBoard{top:41.8%!important;width:min(760px,55vw)!important;height:178px!important;gap:58px!important}
body.game-mode .board-figure{width:156px!important;flex-basis:156px!important;height:178px!important}
body.game-mode .figure-body{height:143px!important}
body.game-mode .miniature-canvas{transform:scale(1.08)!important}
body.game-mode .figure-base{left:13px!important;right:13px!important;bottom:8px!important;height:39px!important}
body.game-mode .figure-stat{bottom:2px!important;width:38px!important;height:38px!important;font-size:21px!important}

/* Panneau de tour à droite. */
body.game-mode .cinematic-turn-panel{right:.25%!important;top:35.5%!important;width:207px!important;height:42px!important;padding:8px 13px!important}
body.game-mode #turnBadge{right:.25%!important;top:40.1%!important;width:207px!important;height:66px!important}
body.game-mode .controls{right:.25%!important;top:47.5%!important;width:207px!important}
body.game-mode #endTurnBtn{width:207px!important;height:64px!important}

/* Main : cinq cartes visibles comme sur la référence, sans masquer le commandant. */
body.game-mode .hand-wrap{top:74.9%!important;width:min(900px,60vw)!important;height:235px!important;z-index:74!important}
body.game-mode .hand{height:235px!important;padding:0 12px!important}
body.game-mode .hand .card{width:146px!important;height:208px!important;flex:0 0 146px!important;margin-left:-25px!important;border-radius:11px!important}
body.game-mode .hand .card:hover{transform:translateY(-46px) rotate(0deg) scale(1.12)!important;z-index:170!important}
body.game-mode .hand .card.selected{transform:translateY(-40px) rotate(0deg) scale(1.10)!important;z-index:165!important}

/* Rail gauche compact et sans texte envahissant. */
body.game-mode .battle-left-rail{left:4px!important;top:37.5%!important;gap:7px!important}
body.game-mode .rail-button{width:58px!important;height:54px!important}.rail-button small{display:none!important}.rail-icon{font-size:24px!important}

/* Jouabilité sur écrans plus petits. */
@media (max-width:1350px){
  body.game-mode .cin-power-wrap{transform:scale(.88)!important;transform-origin:left center!important}
  body.game-mode #opponentBoard,body.game-mode #myBoard{width:min(660px,54vw)!important;gap:28px!important}
  body.game-mode .board-figure{width:138px!important;flex-basis:138px!important}
  body.game-mode .hand-wrap{width:min(760px,58vw)!important}.hand .card{width:124px!important;height:177px!important;flex-basis:124px!important;margin-left:-22px!important}
}
@media (max-height:760px){
  body.game-mode #opponentHero{top:1.8%!important;transform:translateX(-50%) scale(.78)!important;transform-origin:center top!important}
  body.game-mode #myHero{top:58.5%!important;transform:translateX(-50%) scale(.76)!important;transform-origin:center top!important}
  body.game-mode #opponentBoard{top:20.6%!important;transform:translateX(-50%) scale(.83)!important;transform-origin:center top!important}
  body.game-mode #myBoard{top:39.8%!important;transform:translateX(-50%) scale(.83)!important;transform-origin:center top!important}
  body.game-mode .hand-wrap{top:72.2%!important;height:176px!important}.hand{height:176px!important}.hand .card{width:112px!important;height:160px!important;flex-basis:112px!important;margin-left:-20px!important}
  body.game-mode .cinematic-turn-panel{top:34.3%!important}body.game-mode #turnBadge{top:39.5%!important;height:56px!important}body.game-mode .controls{top:46.5%!important}body.game-mode #endTurnBtn{height:56px!important}
}

/* Eventail adverse compatible navigateurs */
body.game-mode .enemy-hand-card{transform:none!important}
body.game-mode .enemy-hand-card:nth-child(1){transform:rotate(-8deg) translateY(9px)!important}
body.game-mode .enemy-hand-card:nth-child(2){transform:rotate(-5deg) translateY(4px)!important}
body.game-mode .enemy-hand-card:nth-child(3){transform:rotate(-2deg) translateY(1px)!important}
body.game-mode .enemy-hand-card:nth-child(4){transform:rotate(0deg)!important}
body.game-mode .enemy-hand-card:nth-child(5){transform:rotate(2deg) translateY(1px)!important}
body.game-mode .enemy-hand-card:nth-child(6){transform:rotate(5deg) translateY(4px)!important}
body.game-mode .enemy-hand-card:nth-child(7){transform:rotate(8deg) translateY(9px)!important}
body.game-mode .enemy-hand-card:nth-child(8){transform:rotate(10deg) translateY(14px)!important}

/* Dernier calque de direction artistique : le décor de référence reste
   derrière les composants interactifs du plateau. */
body.game-mode .prototype-scenery{background:
  linear-gradient(180deg,rgba(3,7,9,.10),rgba(3,7,9,.48) 63%,rgba(1,3,4,.82))!important}
body.game-mode .ship-ceiling{background:transparent!important;border:0!important;box-shadow:none!important}
body.game-mode .side-frame{background:transparent!important;border:0!important;box-shadow:none!important}

/* Le plateau reçoit directement le décor de référence afin que le calque
   soit visible même lorsque la scène cinématique est couverte par l'arène. */
body.game-mode .battle-floor{background:
  linear-gradient(180deg,rgba(55,62,63,.72),rgba(31,36,38,.86) 48%,rgba(15,20,22,.96)),
  repeating-linear-gradient(0deg,transparent 0 19.3%,rgba(204,190,132,.16) 19.5% 19.8%,transparent 20.1% 39.4%),
  repeating-linear-gradient(90deg,transparent 0 12.15%,rgba(177,164,111,.12) 12.35% 12.55%,transparent 12.75% 24.9%)!important;
  border-color:rgba(207,178,95,.72)!important;
  box-shadow:inset 0 0 110px rgba(0,0,0,.42),0 14px 34px rgba(0,0,0,.55)!important}

/* Reconstruction native du prototype : infestation suspendue, métal usé et
   éclairage asymétrique. Aucun bitmap de plateau n'est utilisé ici. */
body.game-mode .ship-ceiling{background:
  radial-gradient(ellipse at 8% 65%,rgba(183,218,44,.95) 0 1.5%,rgba(67,80,10,.92) 2.5% 6%,transparent 7%),
  radial-gradient(ellipse at 22% 26%,rgba(205,235,57,.9) 0 1.8%,rgba(72,80,11,.9) 3% 7%,transparent 8%),
  radial-gradient(ellipse at 48% 58%,rgba(203,231,57,.94) 0 2%,rgba(71,77,10,.9) 3% 8%,transparent 9%),
  radial-gradient(ellipse at 75% 24%,rgba(197,228,46,.9) 0 1.8%,rgba(64,75,9,.92) 3% 7%,transparent 8%),
  repeating-radial-gradient(ellipse at 50% 70%,rgba(91,24,17,.92) 0 9px,rgba(18,8,8,.98) 10px 21px,rgba(145,42,22,.55) 22px 27px,rgba(8,6,7,.98) 28px 42px),
  linear-gradient(180deg,#0b0e0e,#090b09 58%,#11120b)!important;
  border-bottom:3px solid rgba(215,176,60,.72)!important;
  box-shadow:inset 0 -24px 48px rgba(212,169,38,.14),0 12px 30px rgba(0,0,0,.7)!important}
body.game-mode .ship-ceiling::before{content:''!important;position:absolute!important;inset:-10% -5%!important;background:
  repeating-linear-gradient(12deg,transparent 0 42px,rgba(127,29,19,.78) 45px 50px,rgba(31,10,8,.95) 51px 60px,transparent 61px 116px),
  repeating-linear-gradient(-14deg,transparent 0 58px,rgba(89,23,16,.7) 60px 67px,rgba(22,8,8,.9) 69px 78px,transparent 80px 138px)!important;opacity:.85!important}
body.game-mode .side-frame{background:linear-gradient(90deg,#050708,#18252d 38%,#07090a)!important;border:0!important;box-shadow:inset 0 0 30px #000,0 0 24px rgba(0,0,0,.55)!important}
body.game-mode .side-frame::before{background:repeating-linear-gradient(0deg,#0d151a 0 24px,#34444a 25px 29px,#070b0e 30px 56px)!important}
body.game-mode .side-frame::after{background:repeating-linear-gradient(0deg,#071017 0 11px,#168dcc 12px 16px,#071017 17px 37px)!important;box-shadow:0 0 14px rgba(36,162,225,.34)!important}
body.game-mode .frame-right::after{background:repeating-linear-gradient(0deg,#0e1112 0 11px,#d39a2b 12px 16px,#0e1112 17px 37px)!important;box-shadow:0 0 14px rgba(224,156,46,.24)!important}

/* Figurines 3D : une seule base (celle du rendu), proportions de la référence.
   Les anciens socles DOM dédoublaient la base et repoussaient les compteurs. */
body.game-mode .board-figure{
  width:150px!important;
  flex:0 0 150px!important;
  height:174px!important;
}
body.game-mode .figure-body{
  left:0!important;
  right:0!important;
  top:-3px!important;
  height:154px!important;
  overflow:visible!important;
  clip-path:none!important;
}
body.game-mode .figure-3d-render{
  left:4px!important;
  top:0!important;
  width:142px!important;
  height:142px!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:drop-shadow(0 9px 7px rgba(0,0,0,.78)) saturate(1.08) contrast(1.06)!important;
}
body.game-mode .figure-base{display:none!important}
body.game-mode .figure-shadow{left:16px!important;right:16px!important;bottom:15px!important;height:18px!important}
body.game-mode .figure-aura{left:19px!important;right:19px!important;bottom:18px!important;height:34px!important}
body.game-mode .figure-stat{
  bottom:43px!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  font-size:19px!important;
  box-shadow:0 0 0 2px #0b0e10,0 3px 8px rgba(0,0,0,.58)!important;
}
body.game-mode .figure-stat.atk{left:8px!important}
body.game-mode .figure-stat.hp{right:8px!important}

/* Bulwark possède sa propre silhouette : sentinelle humanoïde avec fusil et bouclier. */
body.game-mode [data-cardkey="bulwark"] .figure-3d-render{
  width:142px!important;
  height:154px!important;
  top:-8px!important;
  mix-blend-mode:screen!important;
  filter:drop-shadow(0 9px 7px rgba(0,0,0,.82)) saturate(1.12) contrast(1.08)!important;
}

/* Pas de halo ni de tache floue derrière les figurines 3D. */
body.game-mode .figure-aura,
body.game-mode .figure-shadow{
  display:none!important;
  filter:none!important;
  box-shadow:none!important;
}
body.game-mode .figure-body{
  filter:none!important;
  background:transparent!important;
}
body.game-mode .board-figure,
body.game-mode .board-figure::before,
body.game-mode .board-figure::after{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.game-mode .figure-body::before,
body.game-mode .figure-body::after{
  display:none!important;
  background:none!important;
}
body.game-mode .figure-3d-render{
  filter:saturate(1.08) contrast(1.06)!important;
}
body.game-mode [data-cardkey="bulwark"] .figure-3d-render{
  filter:saturate(1.12) contrast(1.08)!important;
}

/* Le rang adverse descend légèrement dans l'arène pour laisser respirer le HUD. */
body.game-mode .board-row.top#opponentBoard{top:27%!important}

/* Écussons fixés sur la lèvre avant du socle : métal biseauté et émail. */
body.game-mode .board-figure .figure-stat.atk,
body.game-mode .board-figure .figure-stat.hp{
  --stat-light:#299cdd;
  --stat-mid:#063957;
  --stat-dark:#020d18;
  z-index:1000!important;
  bottom:44px!important;
  width:30px!important;
  min-width:30px!important;
  height:35px!important;
  padding:0 0 3px!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:isolate;
  color:#fff9e7!important;
  font:700 23px/1 Georgia,'Times New Roman',serif!important;
  text-shadow:0 2px 1px #000,0 0 3px #000!important;
  filter:drop-shadow(0 2px 1px #000)!important;
  transform:translateZ(80px) rotate(-7deg)!important;
  pointer-events:none;
}
body.game-mode .board-figure .figure-stat.atk{left:31px!important}
body.game-mode .board-figure .figure-stat.hp{
  right:43px!important;
  --stat-light:#e54b4f;
  --stat-mid:#730e19;
  --stat-dark:#200208;
  transform:translateZ(80px) rotate(7deg)!important;
}
body.game-mode .board-figure.faction-parasite .figure-stat.atk{
  --stat-light:#a5be39;
  --stat-mid:#3d510c;
  --stat-dark:#111a02;
}
body.game-mode .board-figure .figure-stat.atk::before,
body.game-mode .board-figure .figure-stat.hp::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  clip-path:polygon(20% 0,80% 0,100% 20%,90% 65%,72% 85%,50% 100%,28% 85%,10% 65%,0 20%);
  background:linear-gradient(130deg,#161c1e 0%,#b9b9a1 13%,#f4edd0 18%,#4d554d 25%,#10181b 47%,#9b9d83 72%,#d0c6a0 77%,#252c2c 87%,#070c10 100%);
}
body.game-mode .board-figure .figure-stat.atk::after,
body.game-mode .board-figure .figure-stat.hp::after{
  content:'';
  position:absolute;
  inset:3px 3px 4px;
  z-index:-1;
  clip-path:polygon(19% 0,81% 0,100% 18%,90% 64%,71% 85%,50% 100%,29% 85%,10% 64%,0 18%);
  background:linear-gradient(145deg,rgba(255,255,224,.55),transparent 24%,transparent 66%,rgba(0,0,0,.8)),radial-gradient(ellipse at 35% 12%,var(--stat-light),var(--stat-mid) 48%,var(--stat-dark) 85%);
  box-shadow:inset 0 2px 3px #000;
}

/* Responsive final pass: preserve the battlefield composition on common
   desktop, laptop and compact-window resolutions. */
body.game-mode #game,
body.game-mode #game .game-shell,
body.game-mode #game .main-column,
body.game-mode #game .arena{
  width:100%!important;
  min-width:0!important;
  height:100dvh!important;
  min-height:0!important;
}
body.game-mode #opponentBoard,
body.game-mode #myBoard{
  width:min(860px,70vw)!important;
  gap:clamp(12px,1.4vw,28px)!important;
}
body.game-mode .hand-wrap{width:min(760px,70vw)!important}
body.game-mode .controls{right:clamp(8px,1.2vw,18px)!important;width:clamp(158px,12vw,190px)!important}
body.game-mode #endTurnBtn,
body.game-mode #cancelBtn{width:100%!important}
body.game-mode .side-column{width:clamp(270px,23vw,350px)!important}

@media (max-width:1550px){
  body.game-mode #opponentBoard,
  body.game-mode #myBoard{width:min(820px,70vw)!important;gap:clamp(8px,1.8vw,24px)!important}
  body.game-mode .hand-wrap{width:min(760px,76vw)!important}
  body.game-mode .hand .card{width:clamp(108px,9vw,142px)!important;height:auto!important;aspect-ratio:2 / 3!important;flex-basis:clamp(108px,9vw,142px)!important}
  body.game-mode #hoverZoomCard{width:min(400px,28vw,calc(100vw - 24px))!important}
}

@media (max-width:1150px){
  body.game-mode #opponentBoard,
  body.game-mode #myBoard{width:72vw!important;gap:clamp(6px,1.2vw,14px)!important}
  body.game-mode .hand-wrap{width:78vw!important}
  body.game-mode .controls{top:calc(34% + 54px)!important}
  body.game-mode .side-column{left:12px!important}
}

@media (max-height:800px){
  body.game-mode #opponentBoard{top:clamp(108px,16vh,150px)!important}
  body.game-mode #myBoard{bottom:clamp(250px,31vh,330px)!important}
  body.game-mode .side-column{top:18%!important;height:clamp(300px,58vh,420px)!important}
  body.game-mode #hoverZoomCard{max-height:calc(100dvh - 18px)!important}
}

/* Thèmes de plateau : la faction du joueur est toujours orientée vers lui. */
body.game-mode.player-parasite.opponent-human .prototype-scenery{
  transform:rotate(180deg)!important;
  transform-origin:center center!important;
}
body.game-mode.player-parasite.opponent-human .prototype-scenery .wall-copy,
body.game-mode.player-parasite.opponent-human .prototype-scenery .sector-copy,
body.game-mode.player-parasite.opponent-human .prototype-scenery .foreground-console span{
  visibility:hidden!important;
}

/* Alien contre alien : la scène entière reprend la dominante de la Ruche. */
body.game-mode.same-faction-parasite .prototype-scenery::before{
  background:
    linear-gradient(180deg,rgba(4,8,3,.18),rgba(4,8,3,.68)),
    url('/static/assets/hangar_infestation.png') center/cover no-repeat!important;
  filter:saturate(1.22) hue-rotate(-8deg) contrast(1.08)!important;
  opacity:.94!important;
}
body.game-mode.same-faction-parasite .prototype-scenery::after{
  background:
    radial-gradient(circle at 50% 48%,transparent 10%,rgba(112,153,20,.08) 52%,rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,rgba(17,28,4,.15),rgba(3,7,2,.52))!important;
}
body.game-mode.same-faction-parasite .ship-ceiling{
  box-shadow:inset 0 -25px 42px rgba(189,231,44,.20),0 10px 28px rgba(0,0,0,.66)!important;
}

/* Humain/synthétique contre humain/synthétique : scène métallique froide uniforme. */
body.game-mode.same-faction-human .prototype-scenery::before{
  background:
    linear-gradient(180deg,rgba(4,11,17,.18),rgba(3,8,13,.58)),
    url('/static/assets/battle-environment-realistic-v1.png') center/cover no-repeat!important;
  filter:saturate(.82) hue-rotate(4deg) contrast(1.08)!important;
  opacity:.94!important;
}
body.game-mode.same-faction-human .prototype-scenery::after{
  background:
    radial-gradient(circle at 50% 48%,transparent 12%,rgba(39,151,218,.08) 52%,rgba(0,0,0,.64) 100%),
    linear-gradient(180deg,rgba(2,10,17,.12),rgba(2,5,9,.52))!important;
}
body.game-mode.same-faction-human .ship-ceiling{filter:saturate(.72) hue-rotate(10deg)!important}
/* Hangar showcase: the same transparent 3D miniatures as the battle board. */
.hangar-miniature-gallery{width:min(1440px,96vw);margin:24px auto 40px;padding:20px;border:1px solid rgba(101,154,184,.34);border-radius:16px;background:linear-gradient(145deg,rgba(5,13,20,.94),rgba(10,24,31,.82));box-shadow:0 18px 45px rgba(0,0,0,.32),inset 0 0 30px rgba(72,177,224,.05)}
.hangar-gallery-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}.hangar-gallery-heading h2{margin:2px 0 0;color:#eaf6ff;font-family:Georgia,serif;letter-spacing:.04em}.hangar-gallery-heading span{color:#86b6ca;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.hangar-miniature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.hangar-miniature-card{position:relative;min-width:0;border:1px solid rgba(112,153,171,.28);border-radius:12px;padding:12px;background:radial-gradient(circle at 50% 35%,rgba(42,106,130,.18),transparent 62%),rgba(2,8,12,.72)}.hangar-miniature-card:hover{z-index:30;border-color:rgba(130,220,255,.78);box-shadow:0 0 0 1px rgba(130,220,255,.24),0 16px 38px rgba(0,0,0,.48)}
.hangar-miniature-stage{position:relative;height:286px;overflow:visible;border-radius:8px;background:linear-gradient(180deg,rgba(18,31,39,.55),rgba(3,9,13,.82));isolation:isolate}.hangar-miniature-model{position:absolute;z-index:2;left:50%;bottom:38px;width:178px;height:242px;object-fit:contain;object-position:center bottom;transform:translateX(-50%)}.hangar-miniature-base{position:absolute;z-index:1;left:50%;bottom:1px;width:230px;height:111px;transform:translateX(-50%);background-position:center;background-size:100% 100%;background-repeat:no-repeat}.hangar-miniature-stat{position:absolute;z-index:4;bottom:10px;width:38px;height:40px;display:grid;place-items:center;color:#fff7e7;font:700 23px/1 Georgia,serif;text-shadow:0 2px 3px #000}.hangar-miniature-atk{left:calc(50% - 78px);color:#e8f8ff}.hangar-miniature-hp{left:calc(50% + 40px);color:#fff0f0}.hangar-miniature-card.faction-parasite .hangar-miniature-stat{color:#f1ffd2}.hangar-miniature-info{display:grid;gap:4px;padding:11px 3px 3px}.hangar-miniature-info strong{color:#edf5f8;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hangar-miniature-info small{color:#86a1ad;font-size:12px}
.hangar-card-preview{position:absolute;z-index:40;right:10px;top:10px;width:360px;aspect-ratio:2/3;object-fit:cover;border:2px solid #8dbdd0;border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,.78);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.96);transition:opacity .16s ease,transform .16s ease,visibility .16s ease}.hangar-miniature-card:hover .hangar-card-preview{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
@media (max-width:1100px){.hangar-miniature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.hangar-miniature-gallery{padding:12px}.hangar-gallery-heading{display:block}.hangar-gallery-heading span{display:block;margin-top:7px}.hangar-miniature-grid{grid-template-columns:1fr;gap:10px}.hangar-miniature-stage{height:240px}.hangar-miniature-model{width:156px;height:214px}.hangar-miniature-base{width:204px;height:99px}.hangar-card-preview{width:260px}.hangar-miniature-stat{bottom:7px}.hangar-miniature-atk{left:calc(50% - 69px)}.hangar-miniature-hp{left:calc(50% + 33px)}}

/* Main-page gallery: lift each figure so its feet sit at the centre of its base. */
.hangar-miniature-model{bottom:52px!important}
@media (max-width:620px){.hangar-miniature-model{bottom:44px!important}}

/* New faction showcase accents. */
.hangar-miniature-card.faction-nomad{border-color:rgba(230,145,54,.42);background:radial-gradient(circle at 50% 35%,rgba(221,124,42,.19),transparent 62%),rgba(2,8,12,.72)}
.hangar-miniature-card.faction-crystalline{border-color:rgba(173,122,255,.5);background:radial-gradient(circle at 50% 35%,rgba(126,74,205,.22),transparent 62%),rgba(2,8,12,.72)}
.hangar-miniature-card.faction-nomad:hover{border-color:rgba(255,184,75,.9)}
.hangar-miniature-card.faction-crystalline:hover{border-color:rgba(207,160,255,.95)}
.hangar-miniature-card.faction-riftborn{border-color:rgba(224,92,255,.55);background:radial-gradient(circle at 50% 35%,rgba(133,48,170,.22),transparent 62%),rgba(2,8,12,.72)}
.hangar-miniature-card.faction-riftborn:hover{border-color:rgba(255,139,255,.95)}
.hangar-miniature-card.show-card-preview>.hangar-card-preview{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.hangar-card-preview.showcase-preview{object-fit:contain;padding:10px;background:radial-gradient(circle at 50% 45%,rgba(27,67,90,.72),rgba(3,9,13,.98));}
.hangar-card-preview.showcase-preview{display:grid;grid-template-rows:1fr auto;gap:8px;align-items:center}
.hangar-card-preview.showcase-preview>img{width:100%;height:100%;min-height:0;object-fit:contain}
.hangar-card-preview.showcase-preview>div{padding:8px 10px;border-top:1px solid rgba(148,206,226,.35);background:rgba(2,8,12,.88);text-align:left}
.hangar-card-preview.showcase-preview strong{display:block;color:#f2fbff;font-size:15px;margin-bottom:4px}
.hangar-card-preview.showcase-preview small{display:block;color:#c2d5dc;font-size:12px;line-height:1.35}
.faction-card-showcase{width:min(1440px,96vw);margin:0 auto 48px;padding:20px;border:1px solid rgba(101,154,184,.34);border-radius:16px;background:linear-gradient(145deg,rgba(5,13,20,.94),rgba(10,24,31,.82));box-shadow:0 18px 45px rgba(0,0,0,.32),inset 0 0 30px rgba(72,177,224,.05)}
.faction-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.faction-showcase-card{position:relative;overflow:hidden;min-width:0;border:1px solid rgba(112,153,171,.35);border-radius:12px;padding:10px;background:linear-gradient(180deg,rgba(18,34,44,.96),rgba(2,8,13,.98));box-shadow:0 12px 28px rgba(0,0,0,.32)}
.faction-showcase-card.faction-nomad{border-color:rgba(230,145,54,.62)}.faction-showcase-card.faction-crystalline{border-color:rgba(173,122,255,.68)}
.faction-showcase-art{height:270px;border-radius:8px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(44,107,130,.2),transparent 65%),#071117}.faction-showcase-card.faction-nomad .faction-showcase-art{background:radial-gradient(circle at 50% 45%,rgba(219,126,38,.28),transparent 68%),#101216}.faction-showcase-card.faction-crystalline .faction-showcase-art{background:radial-gradient(circle at 50% 45%,rgba(137,78,224,.3),transparent 68%),#0d0b1a}.faction-showcase-art img{width:100%;height:100%;object-fit:contain}.faction-showcase-top{display:flex;justify-content:space-between;gap:8px;margin:10px 2px 5px;color:#9fc5d2;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.faction-showcase-card.faction-nomad .faction-showcase-top{color:#f1b866}.faction-showcase-card.faction-crystalline .faction-showcase-top{color:#c7a5ff}.faction-showcase-top b{color:#e9f5f8}.faction-showcase-card h3{margin:0 2px 8px;color:#f3fbff;font-size:17px}.faction-showcase-stats{display:flex;gap:8px;margin:0 2px 9px}.faction-showcase-stats span{padding:5px 9px;border-radius:999px;background:rgba(7,16,23,.9);border:1px solid rgba(132,190,214,.35);color:#e7f5fb;font-size:12px;font-weight:700}.faction-showcase-card p{min-height:62px;margin:0 2px;color:#bed0d8;font-size:13px;line-height:1.4}
@media (max-width:1100px){.faction-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.faction-card-showcase{padding:12px}.faction-card-grid{grid-template-columns:1fr;gap:10px}.faction-showcase-art{height:250px}}

/* New cards follow the original TCG frame while keeping each faction's palette. */
.faction-showcase-card{padding:0;border-radius:13px;background:#071018;overflow:hidden}
.faction-card-frame{position:relative;padding:9px;border:2px solid rgba(102,150,175,.78);border-radius:13px;background:linear-gradient(145deg,#162b38,#050b11 55%,#0c1720);box-shadow:inset 0 0 0 1px rgba(214,244,255,.12),0 12px 24px rgba(0,0,0,.4)}
.faction-showcase-card.faction-nomad .faction-card-frame{border-color:#d58a32;background:linear-gradient(145deg,#50331c,#10171b 52%,#21160e);box-shadow:inset 0 0 22px rgba(239,144,44,.18),0 12px 24px rgba(0,0,0,.4)}
.faction-showcase-card.faction-crystalline .faction-card-frame{border-color:#9e75e8;background:linear-gradient(145deg,#2b2252,#0b101b 52%,#1d1234);box-shadow:inset 0 0 22px rgba(164,104,255,.2),0 12px 24px rgba(0,0,0,.4)}
.faction-card-cost{position:absolute;z-index:3;left:13px;top:12px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:2px solid #8dd9ff;background:radial-gradient(circle at 35% 28%,#effcff,#1d83c7 58%,#08243b);color:#fff;font:700 20px Georgia,serif;text-shadow:0 2px 3px #000;box-shadow:0 0 10px rgba(92,202,255,.55)}
.faction-showcase-card.faction-nomad .faction-card-cost{border-color:#ffd06c;background:radial-gradient(circle at 35% 28%,#fff4c8,#d97c25 58%,#40200b);box-shadow:0 0 10px rgba(255,162,55,.55)}
.faction-showcase-card.faction-crystalline .faction-card-cost{border-color:#d3b6ff;background:radial-gradient(circle at 35% 28%,#fff,#8f4de1 58%,#24104b);box-shadow:0 0 10px rgba(183,111,255,.55)}
.faction-card-header{min-height:39px;margin-left:45px;padding:3px 8px 3px 10px;display:flex;align-items:center;justify-content:space-between;gap:7px;border:1px solid rgba(145,206,232,.45);border-radius:5px;background:linear-gradient(180deg,rgba(12,27,37,.95),rgba(3,10,15,.9));color:#f2fbff;font:700 15px Georgia,serif}.faction-card-header small{color:#9ed3e4;font:700 9px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-align:right}.faction-showcase-card.faction-nomad .faction-card-header{border-color:rgba(255,184,79,.55)}.faction-showcase-card.faction-nomad .faction-card-header small{color:#f4bb68}.faction-showcase-card.faction-crystalline .faction-card-header{border-color:rgba(200,164,255,.6)}.faction-showcase-card.faction-crystalline .faction-card-header small{color:#cbb0ff}
.faction-showcase-art{height:250px;margin-top:8px;border:1px solid rgba(148,209,233,.35);border-radius:4px}.faction-showcase-card.faction-nomad .faction-showcase-art{border-color:rgba(255,178,71,.55)}.faction-showcase-card.faction-crystalline .faction-showcase-art{border-color:rgba(196,156,255,.62)}
.faction-card-type{width:max-content;margin:-1px auto 8px;padding:4px 28px;border:1px solid rgba(164,221,241,.65);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#173542,#06131b);color:#d7f4ff;font:700 10px Arial,sans-serif;letter-spacing:.15em;text-align:center}.faction-showcase-card.faction-nomad .faction-card-type{border-color:#e5a34d;background:linear-gradient(180deg,#6c3d17,#201006);color:#ffe0a5}.faction-showcase-card.faction-crystalline .faction-card-type{border-color:#b98fff;background:linear-gradient(180deg,#432681,#150d2b);color:#eadbff}
.faction-card-text{min-height:76px;padding:9px 10px;border:1px solid rgba(137,193,214,.35);border-radius:5px;background:linear-gradient(180deg,rgba(3,12,18,.92),rgba(8,22,30,.8));color:#d9e8ee}.faction-card-text strong{display:block;margin-bottom:5px;color:#9ee0f5;font-size:10px;letter-spacing:.15em;text-align:center}.faction-showcase-card.faction-nomad .faction-card-text strong{color:#ffc66d}.faction-showcase-card.faction-crystalline .faction-card-text strong{color:#d2b0ff}.faction-card-text p{margin:0;font-size:12px;line-height:1.35;text-align:center}
.faction-showcase-card .faction-showcase-stats{justify-content:space-between;margin:8px 5px 2px}.faction-showcase-card .faction-showcase-stats span{min-width:50px;justify-content:center;border-radius:7px;font:700 16px Georgia,serif}.faction-showcase-card .faction-showcase-stats span:first-child{border-color:#6ecbff;color:#c9f3ff;background:linear-gradient(180deg,#123b59,#071825)}.faction-showcase-card .faction-showcase-stats span:last-child{border-color:#ff7180;color:#ffe1e2;background:linear-gradient(180deg,#5b1c28,#190b10)}.faction-showcase-card.faction-nomad .faction-showcase-stats span:first-child,.faction-showcase-card.faction-crystalline .faction-showcase-stats span:first-child{border-color:#77d8ff}.faction-showcase-card.faction-crystalline .faction-showcase-stats span:last-child{border-color:#c39cff;background:linear-gradient(180deg,#48215c,#160d24)}
/* Main hangar commander cards: readable talent text. */
.hero-choice-power{font-size:15px!important;line-height:1.42!important;color:#c7d9e3!important;font-weight:600!important;text-shadow:0 1px 2px #000}
.hero-choice-title{font-size:13px!important;color:#d6e1e7!important}
.hero-choice{min-height:132px!important}
@media (max-width:720px){.hero-choice-power{font-size:14px!important}.hero-choice{min-height:120px!important}}

/* Phase 2 : centre de progression joueur. */
.progress-card{width:min(980px,94vw);max-height:min(84vh,820px);overflow:auto;background:linear-gradient(145deg,rgba(8,22,31,.98),rgba(3,8,14,.98));border:1px solid rgba(93,190,226,.48);box-shadow:0 0 50px rgba(15,115,164,.24),inset 0 0 30px rgba(74,170,218,.06)}
.progress-summary{margin:8px 0 18px}.profile-ribbon{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 16px;border:1px solid rgba(111,216,255,.38);border-radius:10px;background:linear-gradient(90deg,rgba(12,55,75,.88),rgba(9,19,29,.76));color:#c9edfb}.profile-ribbon b{color:#fff;font-size:18px;letter-spacing:.08em}.profile-ribbon span{padding-left:12px;border-left:1px solid rgba(144,218,244,.3)}.mission-group{margin:18px 0}.mission-group h4,.journal-grid h4{margin:0 0 8px;color:#8fe3ff;letter-spacing:.14em;font-size:12px}.mission-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(132,184,203,.18)}.mission-row strong,.commander-row strong{display:block;color:#f2fbff;font-size:16px}.mission-row small,.commander-row small{display:block;margin-top:4px;color:#a9c3cf}.mission-progress{text-align:right;color:#c9f2ff;font-weight:700}.mission-progress span{font-size:11px;color:#7fb4c4;font-weight:400}.mission-claim:disabled{opacity:.42;cursor:not-allowed}.journal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.journal-grid>div{padding:16px;border:1px solid rgba(103,169,197,.25);border-radius:10px;background:rgba(5,18,26,.72)}.journal-grid p{color:#c6dce4;line-height:1.5}.commander-row{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(132,184,203,.18)}.commander-row img{width:78px;height:78px;object-fit:cover;border-radius:8px;border:1px solid rgba(102,205,239,.4)}.commander-row p{margin:6px 0 0;color:#c2d5dd;font-size:13px}.commander-row>span{font-size:11px;letter-spacing:.1em;color:#79d5ef}.commander-row.locked{filter:saturate(.25);opacity:.68}.commander-row.locked>span{color:#e89b82}
@media (max-width:680px){.mission-row{grid-template-columns:1fr}.mission-progress{text-align:left}.journal-grid{grid-template-columns:1fr}.commander-row{grid-template-columns:58px minmax(0,1fr)}.commander-row img{width:58px;height:58px}.commander-row>span{grid-column:2}}
.status-terminal{padding:18px;border:1px solid rgba(105,210,239,.38);border-radius:10px;color:#aeeeff;letter-spacing:.16em;text-align:center;background:rgba(8,43,57,.65)}.status-terminal.locked{border-color:rgba(229,157,104,.5);color:#ffc38e;background:rgba(72,34,24,.5)}.menu-status-copy{padding:30px 12px;text-align:center;color:#d1e5ec;font-size:16px;line-height:1.6}

/* Phase 3.0 : visuels de ciblage et de combat, sans incidence sur le moteur. */
body.game-mode #myBoard .board-figure{touch-action:none;user-select:none}
.targeting-overlay{position:fixed;inset:0;width:100vw;height:100vh;z-index:999;pointer-events:none;overflow:visible}
.targeting-flow{fill:none;stroke-linecap:round;stroke-linejoin:round}
.targeting-glow{stroke:#f02235;stroke-width:24;opacity:.5;filter:url(#pn-target-glow);animation:targetingPulse .62s ease-in-out infinite alternate}
.targeting-core{stroke:#ff5260;stroke-width:9;filter:drop-shadow(0 0 5px #f31730);stroke-dasharray:16 5;animation:targetingFlow .35s linear infinite}
.targeting-head{fill:#ffb3a7;stroke:#b80d22;stroke-width:2;filter:drop-shadow(0 0 8px #ff3446)}
body.game-mode .board-figure.drop-hover{filter:drop-shadow(0 0 18px #ff5266)!important;transform:translateY(-7px) scale(1.07)!important;z-index:90!important}
.hero-drop-zone.drop-hover{filter:drop-shadow(0 0 22px #ff4259)!important}
body.game-mode .board-figure.combat-lunge-origin{visibility:hidden!important}
body.game-mode .board-figure.combat-lunge-avatar{position:fixed!important;z-index:1000!important;pointer-events:none!important;margin:0!important;visibility:visible!important;transform:none;transition:none!important;filter:drop-shadow(0 8px 15px rgba(255,51,72,.4))!important}
body.game-mode .board-figure.combat-lunge-avatar:hover{transform:none!important}
body.game-mode .board-figure.combat-destroyed{animation:combatDissolve .38s ease-in forwards!important}
.impact-burst.fx-human i{background:linear-gradient(180deg,#fff4c6,#ffae50,transparent)!important}
.impact-burst.fx-parasite::before{background:radial-gradient(circle,#eaffb3,#80cf38 26%,rgba(29,156,75,.48) 52%,transparent 75%)!important}
.impact-burst.fx-parasite i{background:linear-gradient(180deg,#eaffb0,#62bd58,transparent)!important}
.attack-beam.fx-parasite{background:linear-gradient(90deg,transparent,#c9ff74,#49ba52,transparent)!important;box-shadow:0 0 22px rgba(107,222,82,.7)!important}
.attack-spark.fx-parasite{background:radial-gradient(circle,#f7ffdf,#a3fa54 25%,rgba(31,164,92,.45) 52%,transparent 75%)!important}
.impact-burst.fx-synthetic::before{background:radial-gradient(circle,#fff,#84edff 24%,rgba(39,125,254,.48) 52%,transparent 74%)!important}
.impact-burst.fx-synthetic i{background:linear-gradient(180deg,#fff,#58c9ff,transparent)!important}
.attack-beam.fx-synthetic{background:linear-gradient(90deg,transparent,#c4faff,#3aa9ff,transparent)!important;box-shadow:0 0 20px rgba(67,182,255,.82)!important}
.attack-spark.fx-synthetic{background:radial-gradient(circle,#fff,#78e7ff 24%,rgba(36,102,246,.5) 50%,transparent 74%)!important}
@keyframes targetingPulse{from{opacity:.34}to{opacity:.68}}
@keyframes targetingFlow{to{stroke-dashoffset:-21}}
@keyframes combatDissolve{0%{opacity:1;filter:brightness(1.5) saturate(1.4)}45%{opacity:.9;filter:brightness(2.5) saturate(.8)}100%{opacity:0;filter:brightness(3) blur(7px);transform:scale(.78)}}
@media (prefers-reduced-motion:reduce){.targeting-glow,.targeting-core,body.game-mode .board-figure.combat-destroyed{animation:none!important}}

/* Phase 3.1 — la carte reste dans la main jusqu'à la confirmation du serveur. */
body.game-mode #hand .card{touch-action:none;user-select:none;cursor:grab}
body.game-mode #hand .card.hand-drag-source{opacity:.28!important;filter:grayscale(.45)!important}
body.game-mode #hand .card.summon-pending{opacity:.5!important;filter:saturate(.65)!important}
body.game-mode #placementHint{display:none!important;position:fixed!important;left:50%!important;top:70%!important;transform:translateX(-50%)!important;width:min(620px,58vw)!important;padding:8px 14px!important;border:1px solid rgba(131,221,255,.58)!important;border-radius:9px!important;background:rgba(5,18,29,.9)!important;color:#d9f4ff!important;text-align:center!important;font:600 12px/1.35 sans-serif!important;letter-spacing:.02em!important;z-index:95!important;pointer-events:none!important;box-shadow:0 0 18px rgba(54,163,224,.25)!important}
body.game-mode #placementHint.visible{display:block!important}
body.game-mode.card-placement-mode #cancelBtn{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;margin-top:7px!important;padding:6px 10px!important;border:1px solid rgba(171,217,235,.48)!important;border-radius:6px!important;background:rgba(5,18,29,.85)!important;color:#d7ebf5!important;font:700 11px/1 sans-serif!important;cursor:pointer!important;z-index:95!important}
body.game-mode .hand-drag-ghost.card{position:fixed!important;z-index:1002!important;margin:0!important;flex:none!important;pointer-events:none!important;transform:none!important;transform-origin:center center!important;opacity:.96!important;filter:drop-shadow(0 0 20px rgba(104,211,255,.52)) drop-shadow(0 18px 22px rgba(0,0,0,.65))!important;transition:none!important;animation:none!important}
body.game-mode .hand-drag-ghost.card.valid-drop{filter:drop-shadow(0 0 26px rgba(142,242,255,.9))!important}
body.game-mode .hand-drag-ghost.card.invalid-drop{filter:drop-shadow(0 0 19px rgba(255,84,100,.78))!important}
.summon-drop-zone{position:fixed;z-index:88;pointer-events:none;border:2px dashed rgba(112,192,232,.25);border-radius:22px;background:rgba(33,99,131,.06);color:rgba(206,239,255,.48);display:grid;place-items:center;font:700 13px/1.1 sans-serif;letter-spacing:.22em;opacity:.5;transition:background .12s,border-color .12s,opacity .12s}
.summon-drop-zone.active{opacity:1;border-color:rgba(113,229,255,.86);background:radial-gradient(ellipse,rgba(86,185,229,.17),rgba(25,89,125,.04) 70%);box-shadow:inset 0 0 30px rgba(95,202,250,.15),0 0 20px rgba(90,208,255,.22)}
.summon-drop-zone.invalid{border-color:rgba(255,92,111,.65);color:rgba(255,151,158,.8);background:rgba(172,30,45,.12)}
.summon-drop-zone.faction-parasite.active{border-color:#c2f36c;background:radial-gradient(ellipse,rgba(135,203,53,.2),transparent 70%)}
.summon-drop-zone.faction-synthetic.active{border-color:#7cddff;background:radial-gradient(ellipse,rgba(34,147,244,.24),transparent 70%)}
.summon-drop-zone.faction-nomad.active{border-color:#ffc475;background:radial-gradient(ellipse,rgba(214,131,45,.2),transparent 70%)}
.summon-drop-zone.faction-crystalline.active{border-color:#cfabff;background:radial-gradient(ellipse,rgba(143,90,230,.21),transparent 70%)}
body.game-mode .board-figure.action-drag-target{filter:drop-shadow(0 0 21px #a7e9ff)!important;transform:translateY(-6px) scale(1.05)!important;z-index:90!important}
.summon-slot-preview{position:fixed;z-index:89;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:88px;height:118px;transform:translate(-50%,-50%);border:2px solid #a4eeff;border-radius:50%;background:radial-gradient(ellipse,rgba(118,220,255,.27),rgba(21,65,95,.1) 70%);box-shadow:0 0 22px rgba(100,214,255,.65),inset 0 0 14px rgba(148,234,255,.35);color:#e5faff;opacity:0;transition:opacity .12s}
.summon-slot-preview.visible{opacity:1;animation:summonSlotPulse .75s ease-in-out infinite alternate}
.summon-slot-preview span{font:700 42px/1 sans-serif}.summon-slot-preview small{font:700 8px/1 sans-serif;letter-spacing:.1em}
.summon-slot-preview.faction-parasite{border-color:#b7ef69;box-shadow:0 0 22px rgba(172,241,86,.65)}
.summon-slot-preview.faction-crystalline{border-color:#c7a0ff;box-shadow:0 0 22px rgba(176,119,255,.7)}
.summon-slot-preview.faction-nomad{border-color:#ffc278;box-shadow:0 0 22px rgba(255,177,84,.6)}
.summon-energy{position:fixed;z-index:120;pointer-events:none;width:170px;height:145px;transform:translate(-50%,-50%);border:3px solid #a9e9ff;border-radius:50%;box-shadow:0 0 25px #52c8ff,inset 0 0 25px #52c8ff;animation:summonArrival .68s ease-out forwards}
.summon-energy::before,.summon-energy::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:130%;transform:translate(-50%,-50%);background:linear-gradient(transparent,#d8faff,transparent);filter:blur(3px)}
.summon-energy::after{transform:translate(-50%,-50%) rotate(90deg)}
.summon-energy.summon-parasite{border-color:#c4ef60;box-shadow:0 0 28px #8dcc43,inset 0 0 23px #9ad348}
.summon-energy.summon-synthetic{border-color:#a9edff;box-shadow:0 0 30px #38a9ff,inset 0 0 23px #38a9ff}
.summon-energy.summon-nomad{border-color:#ffd49a;box-shadow:0 0 26px #d8843c,inset 0 0 23px #d8843c}
.summon-energy.summon-crystalline{border-color:#d4b5ff;box-shadow:0 0 29px #af7aff,inset 0 0 25px #af7aff}
.summon-energy.summon-human{background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(84,190,250,.11) 10px 11px);border-style:dashed}
.summon-energy.summon-human::before{width:125%;height:3px;background:linear-gradient(90deg,transparent,#9ceaff,transparent);filter:blur(2px)}
.summon-energy.summon-human::after{width:3px;height:160%;background:linear-gradient(transparent,#a9eaff,transparent)}
.summon-energy.summon-parasite{border-radius:46% 54% 63% 37%/58% 44% 56% 42%;animation:parasiteSummonArrival .68s ease-out forwards}
.summon-energy.summon-parasite::before,.summon-energy.summon-parasite::after{width:65%;height:65%;border:2px solid rgba(187,238,84,.75);border-radius:55% 45% 57% 43%;background:radial-gradient(circle,rgba(132,210,58,.42),transparent 70%);filter:blur(3px)}
.summon-energy.summon-synthetic{border-radius:14px;animation:syntheticSummonArrival .68s ease-out forwards}
.summon-energy.summon-synthetic::before{width:8px;height:175%;background:linear-gradient(transparent,#78ddff 20%,#fff 50%,#54a4ff 80%,transparent);box-shadow:0 0 18px #62d6ff}
.summon-energy.summon-synthetic::after{width:110%;height:4px;background:linear-gradient(90deg,transparent,#c6f6ff,transparent);box-shadow:0 0 12px #5dbfff}
@keyframes summonSlotPulse{from{filter:brightness(.9)}to{filter:brightness(1.5)}}
@keyframes summonArrival{from{opacity:0;scale:.35}35%{opacity:1}to{opacity:0;scale:1.35}}
@keyframes parasiteSummonArrival{from{opacity:0;scale:.35;rotate:-16deg}40%{opacity:1;scale:1.1;rotate:12deg}to{opacity:0;scale:1.5;rotate:-8deg}}
@keyframes syntheticSummonArrival{from{opacity:0;scale:.25;filter:brightness(2)}35%{opacity:1;scale:.85;filter:brightness(1.8)}to{opacity:0;scale:1.3;filter:brightness(.9)}}
@media (prefers-reduced-motion:reduce){.summon-slot-preview.visible,.summon-energy{animation:none!important}}

/* Phase 3.2 — commandant et pouvoir : médaillon séparé, états explicites. */
body.game-mode .cin-hero-hud{--hero-accent:#6bd4ff;--hero-glow:rgba(70,184,248,.5)}
body.game-mode .cin-hero-hud.faction-parasite{--hero-accent:#c1ee5a;--hero-glow:rgba(165,220,55,.52)}
body.game-mode .cin-hero-hud.faction-synthetic{--hero-accent:#70bdff;--hero-glow:rgba(66,153,255,.55)}
body.game-mode .cin-hero-hud.faction-nomad{--hero-accent:#ffc47d;--hero-glow:rgba(238,151,71,.5)}
body.game-mode .cin-hero-hud.faction-crystalline{--hero-accent:#d1a8ff;--hero-glow:rgba(170,113,246,.52)}
body.game-mode .cin-hero-hud.faction-riftborn{--hero-accent:#e6a1f2;--hero-glow:rgba(196,92,211,.5)}
body.game-mode .cin-hero-hud .cin-hero-avatar{border-radius:48% 48% 12% 12%!important;border:4px solid var(--hero-accent)!important;box-shadow:0 0 0 4px #080e14,0 0 22px var(--hero-glow),inset 0 0 15px rgba(255,255,255,.12)!important;clip-path:polygon(50% 0,94% 13%,100% 84%,82% 100%,18% 100%,0 84%,6% 13%)}
body.game-mode .cin-hero-hud .cin-hero-name{border-color:var(--hero-accent)!important;box-shadow:0 3px 10px #000,0 0 10px var(--hero-glow)!important;z-index:8!important}
body.game-mode .cin-hero-hud .cin-orb{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;text-align:center!important}
body.game-mode .cin-orb small{display:block;font:800 8px/1 sans-serif;letter-spacing:.08em;text-shadow:0 1px 2px #000}
body.game-mode .cin-orb strong{display:block;font:900 25px/1 Georgia,serif}
body.game-mode .cin-orb strong span{font:700 11px/1 sans-serif;opacity:.85}
body.game-mode .cin-orb.energy{border-color:#81d6ff!important;background:radial-gradient(circle at 35% 25%,#357eb3,#102d54 60%,#06101f)!important;box-shadow:0 0 0 3px #091018,0 0 15px rgba(84,184,255,.5)!important}
body.game-mode .cin-hero-hud.enemy .cin-orb.energy{border-color:#81d6ff!important;background:radial-gradient(circle at 35% 25%,#357eb3,#102d54 60%,#06101f)!important}
body.game-mode .cin-orb.hp{border-radius:34% 34% 48% 48%!important;clip-path:polygon(50% 0,100% 20%,93% 70%,50% 100%,7% 70%,0 20%);border:3px solid #ff8b90!important;background:radial-gradient(circle at 35% 22%,#fa6472,#8d1727 58%,#2a0710)!important}
body.game-mode .cin-power-wrap{left:calc(50% + 127px)!important;top:14px!important;width:315px!important}
body.game-mode .cin-power{width:315px!important;min-height:108px!important;gap:9px!important;padding:9px 11px 9px 9px!important;border:2px solid var(--hero-accent)!important;border-radius:15px 7px 7px 15px!important;background:linear-gradient(125deg,rgba(15,41,57,.96),rgba(4,14,24,.97))!important;box-shadow:0 0 0 3px #080f16,0 0 16px var(--hero-glow),inset 0 0 20px rgba(91,170,207,.08)!important;cursor:pointer!important;transition:filter .16s,box-shadow .16s,transform .16s!important}
body.game-mode .cin-power-icon{flex:0 0 65px!important;width:65px!important;height:65px!important;font-size:33px!important;border:3px solid var(--hero-accent)!important;background:radial-gradient(circle at 42% 35%,#1d6687,#071b2b 64%,#02090f)!important;box-shadow:0 0 0 3px #061018,0 0 16px var(--hero-glow),inset 0 0 14px var(--hero-glow)!important}
body.game-mode .cin-power-copy{display:block;min-width:0;flex:1}
body.game-mode .cin-power strong{font:700 16px/1.08 Georgia,serif!important;color:#f7fcff!important}
body.game-mode .cin-power em{color:var(--hero-accent)!important;font-size:10px!important;font-weight:700!important;letter-spacing:.04em}
body.game-mode .cin-power small{font-size:12px!important;line-height:1.2!important;color:#d0e0e9!important;opacity:1!important}
body.game-mode .cin-power-state{display:inline-block;margin-top:5px;padding:2px 6px;border:1px solid currentColor;border-radius:3px;color:#a8b9c2;background:rgba(3,11,16,.64);font:800 9px/1.1 sans-serif;letter-spacing:.09em;text-transform:uppercase}
body.game-mode .cin-power.ready .cin-power-state{color:#b1f3ce}
body.game-mode .cin-power.ready{animation:heroPowerReady 1.9s ease-in-out infinite}
body.game-mode .cin-power.ready:hover,body.game-mode .cin-power.targeting{filter:brightness(1.22)!important;transform:translateY(-2px)!important;box-shadow:0 0 0 3px #080f16,0 0 27px var(--hero-glow),inset 0 0 22px var(--hero-glow)!important}
body.game-mode .cin-power.unavailable,body.game-mode .cin-power.enemy{filter:none!important;cursor:default!important;border-color:#718996!important;box-shadow:0 0 0 3px #080f16,inset 0 0 14px rgba(125,157,173,.12)!important}
body.game-mode button.cin-power:disabled{opacity:1!important}
body.game-mode .cin-power.unavailable .cin-power-icon,body.game-mode .cin-power.enemy .cin-power-icon{filter:saturate(.6)!important}
body.game-mode .cin-power.unavailable .cin-power-state{color:#ffb2a8}
body.game-mode .cin-power.activating,body.game-mode .cin-power.power-fired{animation:heroPowerFire .65s ease-out!important}
body.game-mode .cin-power-cost{left:-22px!important;top:-17px!important;width:38px!important;height:38px!important;font-size:21px!important}
body.game-mode #heroPowerBtn{touch-action:none}
body.game-mode #myBoard .board-figure.power-drop-hover{filter:drop-shadow(0 0 22px #9beeff)!important;transform:translateY(-5px) scale(1.05)!important}
.power-target-line{position:fixed;z-index:1001;height:5px;transform-origin:0 50%;pointer-events:none;background:linear-gradient(90deg,rgba(94,201,255,.1),#62cfff 60%,#e4faff);box-shadow:0 0 13px #58bdff;border-radius:999px}
.power-target-line::after{content:'';position:absolute;right:-4px;top:-6px;width:14px;height:14px;border-right:3px solid #e4faff;border-top:3px solid #e4faff;transform:rotate(45deg)}
.hero-power-burst{position:fixed;z-index:120;pointer-events:none;width:16px;height:16px;border:2px solid #a7efff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 22px #65d8ff;animation:heroPowerBurst .7s ease-out forwards}
.hero-power-burst.faction-parasite{border-color:#c1f164;box-shadow:0 0 25px #8ccc46}
.hero-power-burst.faction-synthetic{border-color:#90dcff;box-shadow:0 0 25px #429eff}
@keyframes heroPowerReady{50%{box-shadow:0 0 0 3px #080f16,0 0 23px var(--hero-glow),inset 0 0 17px var(--hero-glow)}}
@keyframes heroPowerFire{30%{filter:brightness(2);transform:scale(1.06)}to{filter:brightness(1);transform:scale(1)}}
@keyframes heroPowerBurst{25%{opacity:1}to{width:145px;height:145px;opacity:0;border-width:1px}}

/* L'invocation et les raretés restent purement visuelles. */
body.game-mode #hand .card.full-art-card:is(.epic,.legendary):hover{filter:drop-shadow(0 0 17px var(--rarity-glow)) brightness(1.12)!important}
body.game-mode .enemy-hand-backs{left:calc(50% - 315px)!important;width:360px!important}
body.game-mode .summon-pop.summon-human{filter:drop-shadow(0 0 19px #7ddcff)!important}
body.game-mode .summon-pop.summon-parasite{filter:drop-shadow(0 0 22px #a4e863)!important}
body.game-mode .summon-pop.summon-synthetic{filter:drop-shadow(0 0 22px #68aaff)!important}
.summon-energy{will-change:opacity,scale}
.impact-burst.heavy{filter:brightness(1.3)}
@media(max-width:1550px){body.game-mode .cin-power-wrap{transform:scale(.9)!important;transform-origin:left top!important}}
@media(max-width:1350px){body.game-mode .cin-power-wrap{transform:scale(.82)!important;transform-origin:left top!important}}
@media(max-height:760px){body.game-mode .cin-power-wrap{top:10px!important}}
@media(prefers-reduced-motion:reduce){body.game-mode .cin-power.ready,body.game-mode .cin-power.power-fired,.hero-power-burst{animation:none!important}}

/* Phase 4.1 — lecture rapide du catalogue et du deck. */
.deckbuilder-filters{display:grid;grid-template-columns:minmax(180px,2fr) repeat(5,minmax(100px,1fr));gap:8px;margin:10px 0 14px}
.deckbuilder-filters :is(input,select){min-width:0;padding:9px 10px;color:#e6f5ff;background:#071925;border:1px solid #426176;border-radius:6px}
.deckbuilder-filters :is(input,select):focus-visible{outline:2px solid #71d4ff;outline-offset:2px}
.deckbuilder-insight{padding:10px 12px;margin:6px 0 10px;border:1px solid #33556a;border-radius:7px;background:linear-gradient(130deg,#081822,#0c2530);color:#d4eaf1;font-size:.88rem;line-height:1.4}
.deckbuilder-insight strong{display:block;margin-bottom:7px;color:#e8f6ff}
.deck-curve{height:108px;display:flex;align-items:end;justify-content:space-around;gap:5px}
.deck-curve span{flex:1;display:flex;align-items:center;flex-direction:column;justify-content:end;gap:4px;color:#c8dce8;text-align:center}
.deck-curve i{display:block;width:min(26px,100%);border-radius:3px 3px 0 0;background:linear-gradient(#75dfff,#1677a8);box-shadow:0 0 8px #29b4e255}
.deck-curve small{font-size:.7rem;line-height:1.1}
.deckbuilder-entry .deck-plus:disabled{opacity:.35;cursor:not-allowed}
.deckbuilder-entry:has(.deck-plus:disabled) .deckbuilder-entry-title{color:#b8c3ca}
.faction-human .generated-effect-keyword{color:#ff9a58}
.faction-parasite .generated-effect-keyword{color:#c0e95d}
.faction-synthetic .generated-effect-keyword{color:#68ddf5}
.generated-effect-keyword{color:#f4dc8b;font-style:italic}
@media(max-width:1500px){.deckbuilder-filters{grid-template-columns:repeat(3,minmax(120px,1fr))}.deckbuilder-filters input{grid-column:span 3}}
@media(max-width:700px){.deckbuilder-filters{grid-template-columns:repeat(2,minmax(100px,1fr))}.deckbuilder-filters input{grid-column:span 2}}
@media(prefers-reduced-motion:reduce){.deckbuilder-entry,.deckbuilder-entry .collection-item .card{transition:none!important;animation:none!important}}