/* ============================
   RESET / BODY
   ============================ */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root{
  --glass-bg: rgba(8, 10, 16, 0.42);
  --glass-bg-strong: rgba(10, 12, 18, 0.62);
  --glass-border: rgba(255,255,255,0.09);
  --glass-shadow: 0 10px 28px rgba(0,0,0,0.16);
  --text-main: #f3f5f8;
  --text-soft: rgba(243,245,248,.82);
  --accent: #89b4ff;
  --accent-2: #d8b4ff;
  --danger: #ff6d7a;
  --ok: #7de3ff;
}

/* Thèmes */
body.theme-dark {
  background: radial-gradient(circle at top, #1e2230 0%, #08090d 55%, #000 100%);
  color: var(--text-main);
}

body.theme-light {
  background: radial-gradient(circle at top, #f7f7f7 0%, #dddddd 55%, #c8c8c8 100%);
  color: #111;
}

body.theme-futuristic {
  background: radial-gradient(circle at top, #060b18 0%, #02040a 55%, #000 100%);
  color: #e6f2ff;
}

/* ============================
   PLATEAU / CANVAS 3D
   ============================ */
#board3d {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .35s ease, transform .35s ease;
}

#canvas {
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: auto;
  z-index: 1;
}

#board {
  position: relative;
  z-index: 5;
}

#board, #board3d {
  transition: filter .2s ease-out;
}

body.theme-dark #board3d,
body.theme-futuristic #board3d {
  filter: saturate(1.05) contrast(1.02);
}

body.theme-light #board3d {
  filter: saturate(.98) contrast(1.01);
}

/* ============================
   SURFACES VERRE
   ============================ */
#ui,
#hands,
#cardDesc,
#cardActions,
#logs,
#fxTopMenu,
#status,
#cameraStatus,
#cinematicToggle,
#modeIndicator,
#bombCountdown,
#modeBadge,
#towerStrikeUI,
.story-content {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--glass-shadow);
}

/* ============================
   MENU FX
   ============================ */
#fxTopMenu {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-bg);
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  z-index: 99999;
  color: white;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#fxTopMenu select {
  padding: 5px 8px;
  background: rgba(255,255,255,0.06);
  color: white;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
}

#musicPlayer {
  display: flex;
  gap: 6px;
}

#musicPlayer button {
  background: rgba(255,255,255,0.06);
  color: white;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 8px;
}

/* ============================
   MENU DE DÉMARRAGE
   ============================ */
#startMenu {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.76);
  z-index: 999;
  display: none;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 14px;
}

#startMenu.visible {
  display: flex;
  pointer-events: auto;
}

#startMenu h2 {
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: .04em;
}

#startMenu select,
#startMenu button {
  width: min(86vw, 300px);
  padding: 11px 14px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(18,18,26,0.95);
  color: #fff;
  cursor: pointer;
}

/* ============================
   UI PRINCIPALE
   ============================ */
#ui {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 15;
  background: var(--glass-bg);
  padding: 10px 12px;
  border-radius: 16px;
  color: #fff;
  max-width: 220px;
  border: 1px solid var(--glass-border);
}

#ui .card {
  background: rgba(255,255,255,0.04);
  padding: 7px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-soft);
}

.badge {
  display: inline-block;
  background: rgba(255,255,255,0.06);
  padding: 4px 8px;
  border-radius: 999px;
  margin: 2px 6px 4px 0;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}

.btn {
  padding: 7px 10px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
}

.btn:hover {
  background: rgba(255,255,255,0.11);
}

/* ============================
   DROPDOWNS
   ============================ */
.dropdown {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-bottom: 8px;
}

.dropdownHeader {
  padding: 7px 9px;
  cursor: pointer;
  font-weight: 700;
  color: #eee;
  font-size: 12px;
  letter-spacing: .02em;
}

.dropdownContent {
  padding: 6px 8px 8px 8px;
  display: none;
}

.dropdown.open .dropdownContent {
  display: block;
}

#ui .filterCategory {
  margin-top: 8px;
  margin-bottom: 4px;
  font-weight: 700;
  color: #ddd;
  font-size: 12px;
}

#ui .filterItem {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

#ui .filterItem input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
}

#ui .filterItem label {
  cursor: pointer;
  font-size: 12px;
  color: #eee;
}

#filterOffensive,
#filterDefensive,
#filterControl,
#filterSpecial {
  margin-left: 4px;
}

/* ============================
   PANNEAU DROIT
   ============================ */
#hands,
#cardDesc,
#cardActions {
  position: fixed;
  right: 0;
  width: 210px;
  z-index: 10;
  background: var(--glass-bg);
  padding: 10px;
  box-sizing: border-box;
  color: white;
  pointer-events: auto;
  border-left: 1px solid var(--glass-border);
}

#hands {
  top: 0;
  height: 42vh;
  overflow-y: auto;
  border-bottom-left-radius: 18px;
}

#cardDesc {
  top: 42vh;
  height: 27vh;
  overflow-y: auto;
}

#cardActions {
  top: 69vh;
  height: 31vh;
  display: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-top-left-radius: 18px;
}

.handTitle {
  font-size: 12px;
  margin-bottom: 6px;
  color: #ddd;
  letter-spacing: .03em;
}

.descTitle {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.descBody {
  font-size: 13px;
  color: #d0d4da;
  line-height: 1.36em;
}

/* ============================
   CARTES
   ============================ */
.handGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cardItem {
  width: 40px;
  height: 60px;
  border-radius: 8px;
  padding: 2px;
  margin: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .18s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.24);
  background: rgba(20,24,36,.72);
}

.cardItem:hover {
  transform: translateY(-4px) scale(1.07);
  box-shadow: 0 10px 24px rgba(100, 100, 200, 0.28);
  z-index: 100;
}

.cardItem:active {
  transform: translateY(-2px) scale(1.03);
}

.cardImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  pointer-events: none;
}

.cardBack {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #151a34 0%, #090e1f 100%);
}

.cardBack::after {
  content: "♠";
  font-size: 22px;
  color: rgba(255, 255, 255, 0.22);
}

/* ============================
   STATUS / LOGS
   ============================ */
#status {
  position: fixed;
  bottom: 12px;
  left: 12px;
  background: var(--glass-bg-strong);
  padding: 8px 12px;
  border-radius: 999px;
  color: white;
  font-size: 13px;
  z-index: 20;
  max-width: 34vw;
  border: 1px solid var(--glass-border);
}

#logs {
  position: fixed;
  left: 12px;
  bottom: 58px;
  width: 220px;
  max-height: 130px;
  overflow-y: auto;
  background: rgba(5,8,12,0.48);
  color: #d7dce3;
  font-size: 11px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 1000;
}

.logLine {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  animation: slideIn .25s ease;
}

.logLine:last-child {
  border-bottom: none;
  color: #fff;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============================
   HUD CENTRAL
   ============================ */
#turnInfo {
  position: fixed;
  top: 14px;
  left: 30%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(8,10,16,0.52);
  border: 1px solid rgba(255,255,255,0.10);
  color: #f8f8f8;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
  z-index: 60;
}

#comboInfo {
  position: fixed;
  top: 62px;
  left: 30%;
  transform: translateX(-50%) scale(1);
  color: #ff5b66;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 0 10px rgba(0,0,0,0.9), 0 0 18px rgba(255,50,50,0.7);
  z-index: 61;
  opacity: 0;
  transition: opacity .18s ease-out, transform .18s ease-out;
}

#comboInfo.visible {
  opacity: 1;
  transform: translateX(-50%) scale(1.04);
}

#checkInfo {
  position: fixed;
  top: 8%;
  left: 50%;
  transform: translate(-50%, 0) scale(1);
  padding: 18px 30px;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(180,0,0,0.90), rgba(40,0,0,0.96));
  border: 2px solid rgba(255,180,180,0.85);
  color: #ffecec;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 14px rgba(0,0,0,1), 0 0 24px rgba(255,80,80,0.8);
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
}

#checkInfo.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1.05);
}

/* ============================
   CAMERA / CINEMATIC
   ============================ */
#cameraStatus {
  position: absolute;
  top: 10px;
  left: 52%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: rgba(10, 10, 10, 0.46);
  color: #f0f0f0;
  font-size: 12px;
  border-radius: 10px;
  pointer-events: auto;
  white-space: nowrap;
  z-index: 9999;
  border: 1px solid rgba(255,255,255,0.08);
}

#cameraStatus b {
  color: #ffd24d;
}

#cameraStatus small {
  display: block;
  margin-top: 4px;
  opacity: .7;
}

#cinematicToggle {
  position: fixed;
  bottom: 12px;
  right: 16px;
  background: rgba(8,10,18,0.56);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  z-index: 9999;
  font-size: 12px;
  transition: all .25s ease;
}

#cinematicToggle:hover {
  background: rgba(50, 50, 100, 0.72);
}

#cinematicToggle.active {
  background: linear-gradient(180deg, #4a4a8a 0%, #2a2a5a 100%);
  box-shadow: 0 0 15px rgba(100, 100, 200, 0.32);
}

#uiToggleHint{
  position: fixed;
  right: 16px;
  bottom: 56px;
  z-index: 99999;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.50);
  color: rgba(255,255,255,0.92);
  font-size: 11px;
  letter-spacing: .03em;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ============================
   MODE HUD
   ============================ */
#modeIndicator {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  padding: 8px 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  z-index: 9999;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: none;
}

#modeIndicator.active {
  display: block;
  animation: pulse 2s infinite;
}

#bombCountdown{
  position: fixed;
  top: 60px;
  left: 30%;
  transform: translateX(-50%);
  min-width: 160px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(120, 20, 20, 0.80);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff3f3;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  z-index: 62;
  opacity: 0;
  transition: opacity .18s ease-out, transform .18s ease-out;
  pointer-events: none;
}

#bombCountdown.visible{
  opacity: 1;
  transform: translateX(-50%) scale(1.03);
}

#modeBadge{
  position: fixed;
  top: 98px;
  left: 30%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(12,12,18,0.66);
  border: 1px solid rgba(255,255,255,0.14);
  color: #f5e9ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  z-index: 62;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

#modeBadge.visible{
  opacity: 1;
  transform: translateX(-50%) scale(1.03);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.18); }
  50% { box-shadow: 0 0 18px rgba(255, 255, 255, 0.36); }
}

/* ============================
   BIG CARD FX
   ============================ */
#bigCardFX {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 400px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999;
  transition: opacity .25s ease-out;
  opacity: 0;
}

#bigCardFX.visible {
  opacity: 1;
}

/* Soft aura hugging the card (no starburst rays) */
#bigCardFX::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 22px;
  background: radial-gradient(ellipse at center,
    var(--fxcard-tint, rgba(140,180,255,0.38)) 0%,
    var(--fxcard-tint-soft, rgba(140,180,255,0.14)) 45%,
    transparent 72%);
  filter: blur(7px);
  opacity: 0;
  z-index: -1;
  transform-origin: center center;
}
/* Single clean shockwave ring (no radial gradient bleed) */
#bigCardFX::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 2px solid var(--fxcard-ring, rgba(200,220,255,0.9));
  box-shadow: 0 0 14px var(--fxcard-ring, rgba(200,220,255,0.65));
  opacity: 0;
  z-index: -1;
}
#bigCardFX.thunder::before { animation: bigCardAura  0.9s cubic-bezier(.2,.8,.3,1) forwards; }
#bigCardFX.thunder::after  { animation: bigCardShock 0.9s cubic-bezier(.2,.8,.3,1) forwards; }

@keyframes bigCardAura {
  0%   { opacity: 0;   transform: scale(0.92); }
  28%  { opacity: 1;   transform: scale(1.05); }
  70%  { opacity: 0.8; }
  100% { opacity: 0;   transform: scale(1.12); }
}
@keyframes bigCardShock {
  0%   { opacity: 0;    transform: scale(0.88); filter: blur(0); }
  22%  { opacity: 0.95; transform: scale(1.03); filter: blur(0); }
  100% { opacity: 0;    transform: scale(1.55); filter: blur(2px); }
}

/* Per-style tints (CSS vars — no harsh box-shadow rings) */
.fx-elegant-boost {
  --fxcard-tint:      rgba(255,215,0,0.45);
  --fxcard-tint-soft: rgba(255,215,0,0.15);
  --fxcard-ring:      rgba(255,230,120,0.95);
}
.fx-flashy-boost {
  --fxcard-tint:      rgba(255,60,60,0.45);
  --fxcard-tint-soft: rgba(255,40,40,0.15);
  --fxcard-ring:      rgba(255,140,140,0.95);
}
.fx-magic-boost {
  --fxcard-tint:      rgba(160,80,255,0.45);
  --fxcard-tint-soft: rgba(140,60,255,0.15);
  --fxcard-ring:      rgba(200,140,255,0.95);
}
.fx-premium-boost {
  --fxcard-tint:      rgba(255,255,255,0.42);
  --fxcard-tint-soft: rgba(255,255,255,0.15);
  --fxcard-ring:      rgba(255,255,255,0.95);
}

/* ============================
   HIGHLIGHTS / RINGS
   ============================ */
.attackHalo {
  position: absolute;
  border-radius: 8px;
  pointer-events: none;
  transition: .15s ease-out;
  z-index: 9999;
}

.highlightTile {
  position: absolute;
  border-radius: 8px;
  pointer-events: none;
  z-index: 9000;
}

.highlightTile.moveTile{
  background: rgba(70, 170, 255, 0.14);
  box-shadow:
    0 0 0 2px rgba(90, 200, 255, 0.88) inset,
    0 0 14px rgba(90, 200, 255, 0.52);
}

.highlightTile.captureTile{
  background: rgba(255, 70, 90, 0.18);
  box-shadow:
    0 0 0 2px rgba(255, 100, 120, 0.96) inset,
    0 0 18px rgba(255, 70, 90, 0.76),
    inset 0 0 20px rgba(255, 140, 140, 0.22);
  z-index: 9001;
}

.highlightTile.dark-square {
  box-shadow:
    0 0 15px 6px rgba(0, 255, 200, 0.8),
    inset 0 0 10px rgba(0, 255, 200, 0.4);
}

.selectRing {
  position: absolute;
  border-radius: 999px;
  border: 2px solid rgba(255, 220, 120, 0.96);
  box-shadow:
    0 0 10px rgba(255, 215, 0, 0.8),
    0 0 18px rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 9500;
  animation: ringPulse 1.5s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.9), 0 0 18px rgba(255, 255, 255, 0.8);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 255, 255, 0.9);
    transform: scale(1.04);
  }
}

/* ============================
   GAME MODE SELECT
   ============================ */
#gameModeSel {
  background: linear-gradient(180deg, #24283d 0%, #151827 100%);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .25s ease;
}

#gameModeSel:hover {
  border-color: rgba(150, 150, 255, 0.55);
  box-shadow: 0 0 10px rgba(100, 100, 200, 0.22);
}

#gameModeSel option {
  background: #161a2c;
  padding: 8px;
}

/* ============================
   STORY DIALOG
   ============================ */
.story-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  animation: fadeIn .5s ease;
}

.story-content {
  background: linear-gradient(145deg, rgba(18,18,34,0.92) 0%, rgba(8,8,18,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 34px 44px;
  max-width: 600px;
  text-align: center;
  box-shadow:
    0 0 60px rgba(100, 100, 200, 0.18),
    inset 0 0 30px rgba(60,40,120,0.12);
}
/* ============================
   RESET / BODY
   ============================ */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================
   THÈMES
   ============================ */
body.theme-dark {
  background: radial-gradient(circle at top, #1a1a2e 0%, #050510 55%, #000 100%);
  color: #eee;
}

body.theme-light {
  background: radial-gradient(circle at top, #f0f0f8 0%, #dcdce8 55%, #c0c0d0 100%);
  color: #111;
}

body.theme-futuristic {
  background: radial-gradient(circle at top, #050816 0%, #02040a 55%, #000 100%);
  color: #e0f0ff;
}

/* ============================
   PLATEAU / CANVAS 3D
   ============================ */
#board3d {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

#canvas {
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: auto;
  z-index: 1;
}

#board {
  position: relative;
  z-index: 5;
}

#board, #board3d {
  transition: filter 0.22s ease-out;
}

/* ============================
   MENU FX (haut droite, épuré)
   ============================ */
#fxTopMenu {
  position: fixed;
  top: 12px;
  right: 260px;
  background: rgba(6, 8, 14, 0.48);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  z-index: 99999;
  color: white;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#fxTopMenu label {
  opacity: 0.7;
  font-size: 12px;
}

#fxTopMenu select {
  padding: 3px 6px;
  background: rgba(0,0,0,0.5);
  color: white;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  font-size: 12px;
}

#musicPlayer {
  display: flex;
  gap: 4px;
}

#musicPlayer button {
  background: rgba(255,255,255,0.06);
  color: white;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s;
}

#musicPlayer button:hover {
  background: rgba(255,255,255,0.12);
}

/* ============================
   MENU DE DÉMARRAGE
   ============================ */
#startMenu {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px);
  z-index: 999;
  display: none;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 14px;
}

#startMenu.visible {
  display: flex;
  pointer-events: auto;
}

#startMenu h2 {
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .06em;
  margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(180,160,255,0.5);
}

#startMenu select,
#startMenu button {
  padding: 10px 18px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(20,20,34,0.88);
  color: #fff;
  cursor: pointer;
  min-width: 260px;
  transition: border-color .18s, box-shadow .18s;
}

#startMenu select:hover,
#startMenu button:hover {
  border-color: rgba(180,140,255,0.5);
  box-shadow: 0 0 12px rgba(160,120,255,0.25);
}

#startMenu button {
  background: linear-gradient(180deg, rgba(80,60,130,0.9), rgba(40,28,80,0.95));
  font-weight: 700;
  letter-spacing: .04em;
  margin-top: 4px;
}

#startMenu button:hover {
  background: linear-gradient(180deg, rgba(110,80,180,0.95), rgba(60,40,110,0.98));
}

#gameModeSel {
  background: linear-gradient(180deg, rgba(36,28,54,0.92) 0%, rgba(18,14,32,0.96) 100%);
  border: 1px solid rgba(140,110,200,0.35);
  color: #fff;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.22s ease;
}

#gameModeSel:hover {
  border-color: rgba(180,140,255,0.55);
  box-shadow: 0 0 14px rgba(140,100,220,0.35);
}

#gameModeSel option {
  background: #14102a;
  padding: 8px;
}

/* ============================
   COLONNE DROITE
   ============================ */
#hands,
#cardDesc,
#cardActions {
  position: fixed;
  right: 0;
  width: 230px;
  z-index: 10;
  background: rgba(6, 8, 14, 0.46);
  backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255,255,255,0.07);
  padding: 10px;
  box-sizing: border-box;
  color: white;
  pointer-events: auto;
  transition: opacity .22s ease, transform .22s ease;
}

#hands {
  top: 0;
  height: 44vh;
  overflow-y: auto;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

#cardDesc {
  top: 44vh;
  height: 30vh;
  overflow-y: auto;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

#cardActions {
  top: 74vh;
  height: 26vh;
  display: none;
}

/* ============================
   CARTES MINIATURES
   ============================ */
.handGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cardItem {
  width: 42px;
  height: 62px;
  background: rgba(20,18,38,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 2px;
  margin: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.cardItem:hover {
  transform: translateY(-6px) scale(1.1);
  box-shadow: 0 10px 26px rgba(140,100,255,0.4);
  border-color: rgba(180,140,255,0.5);
  z-index: 100;
}

.cardItem:active {
  transform: translateY(-2px) scale(1.04);
}

.cardImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  pointer-events: none;
}

.cardBack {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a4a 0%, #0a0a2a 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardBack::after {
  content: "♠";
  font-size: 22px;
  color: rgba(255,255,255,0.25);
}

/* ============================
   TITRES / TEXTES
   ============================ */
.handTitle {
  font-size: 13px;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.65);
  letter-spacing: .03em;
}

.descTitle {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
}

.descBody {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  line-height: 1.4em;
}

/* ============================
   BOUTONS GÉNÉRIQUES
   ============================ */
.btn {
  padding: 7px 12px;
  background: rgba(255,255,255,0.07);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s;
}

.btn:hover {
  background: rgba(255,255,255,0.13);
}

/* ============================
   STATUS (bas gauche)
   ============================ */
#status {
  position: fixed;
  bottom: 12px;
  left: 12px;
  background: rgba(6, 8, 14, 0.52);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  z-index: 20;
  max-width: 36vw;
  transition: opacity .22s ease, transform .22s ease;
}

/* ============================
   HUD TOUR / COMBO / ÉCHEC
   ============================ */
#turnInfo {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 22px;
  border-radius: 999px;
  background: rgba(6,8,14,0.56);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  color: #f0f0f0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
  z-index: 60;
}

#comboInfo {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) scale(1);
  color: #ff4141;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: .1em;
  text-shadow:
    0 0 10px rgba(0,0,0,0.9),
    0 0 20px rgba(255,50,50,0.9);
  z-index: 61;
  opacity: 0;
  transition: opacity .18s ease-out, transform .18s ease-out;
  pointer-events: none;
}

#comboInfo.visible {
  opacity: 1;
  transform: translateX(-50%) scale(1.06);
}

#checkInfo {
  position: fixed;
  top: 8%;
  left: 50%;
  transform: translate(-50%, 0) scale(1);
  padding: 18px 34px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(180,0,0,0.92), rgba(40,0,0,0.96));
  border: 2px solid rgba(255,180,180,0.85);
  color: #ffecec;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-shadow:
    0 0 14px rgba(0,0,0,1),
    0 0 24px rgba(255,80,80,0.9);
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
}

#checkInfo.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1.06);
}

/* ============================
   CAMERA STATUS
   ============================ */
#cameraStatus {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  background: rgba(6,8,14,0.46);
  backdrop-filter: blur(8px);
  color: #f0f0f0;
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  z-index: 9999;
  pointer-events: auto;
  transition: opacity .22s ease;
}

#cameraStatus b { color: #ffd24d; }
#cameraStatus small { display: block; margin-top: 3px; opacity: .7; }

/* ============================
   UI PANNEAU (gauche)
   ============================ */
#ui {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 15;
  background: rgba(6, 8, 14, 0.44);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 10px;
  border-radius: 14px;
  color: #fff;
  max-width: 230px;
  transition: opacity .22s ease, transform .22s ease;
}

#ui .card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 6px 8px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

/* ============================
   BADGES
   ============================ */
.badge {
  display: inline-block;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 3px 8px;
  border-radius: 999px;
  margin-right: 4px;
  font-size: 12px;
}

/* ============================
   DROPDOWN FILTRES
   ============================ */
.dropdown {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 8px;
}

.dropdownHeader {
  padding: 7px 10px;
  cursor: pointer;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  letter-spacing: .03em;
}

.dropdownContent {
  padding: 6px 8px;
  display: none;
}

.dropdown.open .dropdownContent {
  display: block;
}

#ui .filterCategory {
  margin-top: 8px;
  margin-bottom: 3px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
}

#ui .filterItem {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

#ui .filterItem input[type="checkbox"] {
  cursor: pointer;
  width: 14px;
  height: 14px;
  accent-color: #a06fef;
}

#ui .filterItem label {
  cursor: pointer;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
}

/* ============================
   LOGS (bas gauche)
   ============================ */
#logs {
  position: fixed;
  bottom: 50px;
  left: 10px;
  width: 240px;
  max-height: 140px;
  overflow-y: auto;
  background: rgba(6, 8, 14, 0.50);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 8px;
  z-index: 9999;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  transition: opacity .22s ease, transform .22s ease;
}

.logLine {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  animation: slideIn .3s ease;
}

.logLine:last-child {
  border-bottom: none;
  color: #fff;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================
   DEBUG PANEL
   ============================ */
#debugDropdown {
  margin-top: 8px;
}

#debugOverlay {
  max-height: 220px;
  overflow-y: auto;
  background: rgba(20,20,28,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px;
  border-radius: 8px;
  color: #eee;
  font-size: 11px;
}

#debugOverlay * { color: #eee !important; }

/* ============================
   CARTE GÉANTE FX
   ============================ */
#bigCardFX {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 340px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.28s ease-out;
  opacity: 0;
}

#bigCardFX::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0;
}

#bigCardFX.thunder::before {
  background: radial-gradient(
    circle,
    rgba(255,255,255,0.95) 0%,
    rgba(140,170,255,0.55) 35%,
    rgba(90,130,255,0.25) 65%,
    rgba(0,0,0,0) 100%
  );
  box-shadow:
    0 0 35px rgba(255,255,255,0.95),
    0 0 65px rgba(140,170,255,0.9),
    0 0 110px rgba(90,130,255,0.8);
  animation: bigCardThunderFX 1s ease-out;
  opacity: 1;
}

@keyframes bigCardThunderFX {
  0%   { opacity: 1; transform: scale(.85); filter: brightness(2.5) contrast(1.4); }
  25%  { opacity: 1; transform: scale(1.05); filter: brightness(3.2) contrast(1.6); }
  50%  { opacity: .85; transform: scale(1.18); filter: brightness(2) contrast(1.3); }
  75%  { opacity: .45; transform: scale(1.28); filter: brightness(1.3) contrast(1.1); }
  100% { opacity: 0; transform: scale(1.38); filter: brightness(1) contrast(1); }
}

.fx-elegant-boost::before {
  box-shadow: 0 0 35px rgba(255,215,0,1), 0 0 70px rgba(255,215,0,.9), 0 0 110px rgba(255,215,0,.7) !important;
}
.fx-flashy-boost::before {
  box-shadow: 0 0 40px rgba(255,60,60,1), 0 0 80px rgba(255,40,40,.9), 0 0 130px rgba(255,20,20,.7) !important;
}
.fx-magic-boost::before {
  box-shadow: 0 0 40px rgba(160,80,255,1), 0 0 80px rgba(140,60,255,.9), 0 0 130px rgba(120,40,255,.7) !important;
}
.fx-premium-boost::before {
  box-shadow: 0 0 40px rgba(255,255,255,1), 0 0 80px rgba(255,255,255,.9), 0 0 130px rgba(255,255,255,.7) !important;
}

/* ============================
   HALOS / HIGHLIGHTS / SELECT
   ============================ */
.attackHalo {
  position: absolute;
  border-radius: 8px;
  pointer-events: none;
  transition: .15s ease-out;
  z-index: 9999;
}

.highlightTile {
  position: absolute;
  border-radius: 8px;
  pointer-events: none;
  z-index: 9000;
}

.highlightTile.moveTile {
  background: rgba(70,170,255,0.13);
  box-shadow:
    0 0 0 2px rgba(90,200,255,0.9) inset,
    0 0 14px rgba(90,200,255,0.55);
}

.highlightTile.captureTile {
  background: rgba(255,70,90,0.16);
  box-shadow:
    0 0 0 2px rgba(255,100,120,0.96) inset,
    0 0 18px rgba(255,70,90,0.75),
    inset 0 0 18px rgba(255,140,140,0.20);
}

.highlightTile.dark-square {
  box-shadow:
    0 0 15px 6px rgba(0,255,200,0.8),
    inset 0 0 10px rgba(0,255,200,0.4);
}

.selectRing {
  position: absolute;
  border-radius: 999px;
  border: 2px solid rgba(255,215,0,0.96);
  box-shadow:
    0 0 10px rgba(255,215,0,0.9),
    0 0 18px rgba(255,255,255,0.8);
  pointer-events: none;
  z-index: 9500;
  animation: ringPulse 1.5s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255,215,0,0.9), 0 0 18px rgba(255,255,255,0.8);
  }
  50% {
    box-shadow: 0 0 22px rgba(255,215,0,1), 0 0 32px rgba(255,255,255,0.9);
  }
}

/* ============================
   BOUTON CINÉMATIQUE
   ============================ */
#cinematicToggle {
  position: fixed;
  bottom: 12px;
  right: 244px;
  background: rgba(6, 8, 14, 0.52);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 9999;
  font-size: 12px;
  transition: all .2s ease;
}

#cinematicToggle:hover {
  background: rgba(60,40,100,0.7);
  border-color: rgba(160,120,255,0.4);
}

#cinematicToggle.active {
  background: linear-gradient(180deg, rgba(80,55,140,0.85), rgba(40,28,80,0.9));
  box-shadow: 0 0 14px rgba(140,100,255,0.4);
}

/* ============================
   UI TOGGLE IMMERSIF
   ============================ */
#uiToggleHint {
  position: fixed;
  right: 14px;
  bottom: 50px;
  z-index: 99999;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(6, 8, 14, 0.52);
  color: rgba(255,255,255,0.88);
  font-size: 11px;
  letter-spacing: .03em;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* MODE IMMERSIF — masquage UI */
body.immersive-ui #ui,
body.immersive-ui #hands,
body.immersive-ui #cardDesc,
body.immersive-ui #cardActions,
body.immersive-ui #logs,
body.immersive-ui #fxTopMenu,
body.immersive-ui #cameraStatus,
body.immersive-ui #cinematicToggle,
body.immersive-ui #status,
body.immersive-ui #debugDropdown,
body.immersive-ui #debugOverlay,
body.immersive-ui #uiToggleHint {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(6px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
}

/* ============================
   HUD MODES SPÉCIAUX
   ============================ */
#bombCountdown {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(110, 18, 18, 0.88);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  color: #fff3f3;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 10px rgba(0,0,0,0.85);
  z-index: 62;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
}

#bombCountdown.visible {
  opacity: 1;
  transform: translateX(-50%) scale(1.04);
}

#modeBadge {
  position: fixed;
  top: 106px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(8,10,18,0.60);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  color: #f5e9ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  z-index: 62;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

#modeBadge.visible {
  opacity: 1;
  transform: translateX(-50%) scale(1.03);
}

/* ============================
   FLÈCHES DE VENT
   ============================ */
.windArrow {
  position: fixed;
  z-index: 99998;
  font-size: 28px;
  font-weight: 900;
  color: #dff6ff;
  text-shadow:
    0 0 10px rgba(80,180,255,.95),
    0 0 18px rgba(80,180,255,.65);
  animation: windArrowPop 1.4s ease-out forwards;
  pointer-events: none;
}

@keyframes windArrowPop {
  0%   { opacity: 0; transform: scale(.7) translateY(6px); }
  15%  { opacity: 1; transform: scale(1.08) translateY(0); }
  100% { opacity: 0; transform: scale(1.28) translateY(-10px); }
}

/* ============================
   TOWER STRIKE MINI-CARTE
   ============================ */
#towerStrikeUI {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) translateY(20px);
  min-width: 320px;
  max-width: 440px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(24,14,38,0.96), rgba(8,6,16,0.97));
  border: 1px solid rgba(255,255,255,0.13);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 30px rgba(180,120,255,0.22);
  color: #fff;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

#towerStrikeUI.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.towerStrikeTitle {
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 7px;
  letter-spacing: .06em;
}

.towerStrikeText {
  font-size: 13px;
  opacity: .85;
  margin-bottom: 12px;
  line-height: 1.4em;
}

.towerStrikeMiniMap {
  display: grid;
  grid-template-columns: repeat(8, 26px);
  gap: 4px;
  justify-content: center;
  margin-bottom: 12px;
}

.towerMiniCell {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(90,60,140,.85), rgba(40,24,70,.9));
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}

.towerMiniCell:hover {
  background: linear-gradient(180deg, rgba(180,110,255,.95), rgba(80,46,140,.95));
  box-shadow: 0 0 10px rgba(180,120,255,.55);
}

.towerStrikeButtons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.towerStrikeButtons button {
  flex: 1;
  min-width: 90px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: background .14s;
}

.towerStrikeButtons button:hover {
  background: rgba(255,255,255,0.14);
}

/* ============================
   TOWER CARDS
   ============================ */
.towerCard {
  background: linear-gradient(145deg, rgba(34,20,50,0.92), rgba(16,8,28,0.95));
  border: 1px solid rgba(180,120,255,0.35);
  box-shadow: 0 0 18px rgba(120,60,200,0.28);
  transition: all .25s ease;
}

.towerCard:hover {
  transform: scale(1.02);
  box-shadow: 0 0 28px rgba(180,100,255,0.5);
}

.towerCard.glow {
  animation: towerGlow 1.1s ease-in-out infinite;
}

@keyframes towerGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(120,60,200,0.28); }
  50%       { box-shadow: 0 0 38px rgba(220,120,255,0.75); }
}

.towerCard.mode-salve::after {
  content: "🔥";
  position: absolute;
  top: 6px; right: 6px;
  font-size: 17px;
}

.towerCard.mode-cannon::after {
  content: "🎯";
  position: absolute;
  top: 6px; right: 6px;
  font-size: 17px;
}

/* ============================
   ODYSSÉE — DIALOGUE
   ============================ */
.story-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  animation: fadeIn .45s ease;
}

.story-content {
  background: linear-gradient(145deg, rgba(18,14,32,0.96) 0%, rgba(8,6,16,0.98) 100%);
  border: 1px solid rgba(140,110,200,0.4);
  border-radius: 22px;
  padding: 44px 64px;
  max-width: 580px;
  text-align: center;
  box-shadow:
    0 0 60px rgba(120,80,220,0.22),
    inset 0 0 30px rgba(60,40,120,0.12);
}

.story-content h2 {
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 28px;
  text-shadow: 0 0 20px rgba(200,180,255,0.55);
  letter-spacing: 2px;
}

.story-continue {
  background: linear-gradient(180deg, rgba(90,60,160,0.95), rgba(45,28,90,0.98));
  border: none;
  color: #fff;
  padding: 12px 40px;
  font-size: 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s ease;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.story-continue:hover {
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(140,100,255,0.6);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================
   MODE INDICATOR
   ============================ */
#modeIndicator {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(6,8,14,0.60);
  backdrop-filter: blur(8px);
  padding: 6px 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  z-index: 9999;
  border: 1px solid rgba(255,255,255,0.12);
  display: none;
}

#modeIndicator.active {
  display: block;
  animation: pulseBadge 2s ease-in-out infinite;
}

@keyframes pulseBadge {
  0%, 100% { box-shadow: 0 0 6px rgba(255,255,255,0.18); }
  50%       { box-shadow: 0 0 18px rgba(255,255,255,0.42); }
}

/* ============================
   JOKER CHOICE PANEL
   ============================ */
.jokerChoicePanel {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,6,18,0.96);
  backdrop-filter: blur(14px);
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 16px;
  z-index: 99999;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 290px;
  justify-content: center;
}

.jokerTitle {
  width: 100%;
  text-align: center;
  font-size: 17px;
  margin-bottom: 10px;
  color: #fff;
  font-weight: 700;
}

.jokerBtn {
  padding: 8px 14px;
  background: rgba(255,255,255,0.07);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background .14s;
}

.jokerBtn:hover { background: rgba(255,255,255,0.14); }

/* ============================
   SCROLLBARS
   ============================ */
#hands::-webkit-scrollbar,
#cardDesc::-webkit-scrollbar,
#logs::-webkit-scrollbar {
  width: 4px;
}

#hands::-webkit-scrollbar-thumb,
#cardDesc::-webkit-scrollbar-thumb,
#logs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}

#hands::-webkit-scrollbar-track,
#cardDesc::-webkit-scrollbar-track,
#logs::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 768px) {
  #hands, #cardDesc, #cardActions {
    width: 175px;
  }
  #startMenu select, #startMenu button {
    width: 88%;
    max-width: 280px;
  }
  #logs {
    width: 170px;
    font-size: 10px;
  }
  .story-content {
    padding: 22px 28px;
    margin: 12px;
  }
  .story-content h2 { font-size: 19px; }
}
#kingKamehamehaFX{
  mix-blend-mode: screen;
}

#swapConfirmBox{
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: 420px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(20,14,38,0.96), rgba(8,6,16,0.97));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 30px rgba(120,180,255,0.18);
  color: #fff;
  z-index: 99999;
  backdrop-filter: blur(16px);
}

.swapConfirmTitle{
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 6px;
  letter-spacing: .04em;
}

.swapConfirmText{
  font-size: 13px;
  opacity: .86;
  margin-bottom: 12px;
}

.swapConfirmButtons{
  display: flex;
  gap: 8px;
}

/* ============================
   PANNEAUX TRANSPARENTS
   ============================ */
:root {
  --glass-bg: transparent !important;
  --glass-bg-strong: transparent !important;
}

#ui,
#hands,
#cardDesc,
#cardActions,
#logs,
#fxTopMenu,
#status,
#cameraStatus,
#modeIndicator,
#modeBadge,
#comboGauge,
#uiToggleHint,
#bombCountdown,
#towerStrikeUI,
#swapConfirmBox {
  background: transparent !important;
  background-color: transparent !important;
}

.story-content {
  background: transparent !important;
}

/* Garder le texte lisible avec text-shadow */
#ui,
#hands,
#cardDesc,
#cardActions,
#logs,
#status,
#modeIndicator,
#modeBadge {
  text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
}

/* Menus contextuels JS (Joker, Steal, Counter) */
#jokerMenu,
#stealMenu,
#counter8Menu {
  background: transparent !important;
}