:root {
  --ui-bg-texture: url('/img/ui/bg-pattern.png');
  --ui-frame-border: url('/img/ui/frame-border.png');
  --ui-panel-ornament: url('/img/ui/panel-ornament.png');
  --ui-btn-icon: url('/img/ui/button-icon-left.png');
  --ui-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  --ui-panel-glow: rgba(212, 175, 55, 0.12);
  --ui-card-glow: rgba(255, 230, 150, 0.15);
  --ui-border: rgba(255, 255, 255, 0.08);
}

body {
  background-image:
    var(--ui-bg-texture),
    radial-gradient(circle at top left, rgba(210, 170, 60, 0.08), transparent 22%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.06), transparent 20%),
    linear-gradient(180deg, #09090d 0%, #050505 100%);
  background-size: auto 100%, 450px 450px, 450px 450px, cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: overlay, normal, normal, normal;
}

.screen.active {
  position: relative;
}

.screen.active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top center, rgba(255, 220, 120, 0.06), transparent 28%);
  pointer-events: none;
  z-index: 0;
}

/* Global panel / carte UI */
.lobby-card,
.waiting-card,
.game-header,
.left-panel,
.right-panel,
#char-reveal-box,
.lobby-header,
.map-widget-card {
  position: relative;
  background: rgba(12, 10, 10, 0.84);
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  backdrop-filter: blur(20px);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
}

.lobby-card::before,
.waiting-card::before,
.map-widget-card::before,
.left-panel::before,
.right-panel::before,
#char-reveal-box::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 35%),
              radial-gradient(circle at bottom right, rgba(212, 175, 55, 0.08), transparent 25%);
}

.lobby-card::after,
.waiting-card::after,
.map-widget-card::after,
#char-reveal-box::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--ui-frame-border);
  background-size: cover;
  opacity: 0.24;
}

.lobby-header,
.game-header {
  border-radius: 0 0 22px 22px;
  background: rgba(8, 8, 12, 0.88);
}

.lobby-header h1,
.game-header h1 {
  position: relative;
  z-index: 1;
}

.lobby-header::before,
.game-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%);
  pointer-events: none;
}

.lobby-card h2,
.waiting-card h2,
.map-widget-card h2,
.panel-title,
.cso-title {
  color: #ffd984;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.lobby-card h2::before,
.waiting-card h2::before,
.map-widget-card h2::before,
.panel-title::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  vertical-align: middle;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.7), transparent 65%);
  border-radius: 50%;
}

.lobby-card,
.waiting-card,
.map-widget-card {
  padding: 26px;
}

.lobby-main,
.waiting-main,
.game-layout {
  z-index: 1;
}

/* Boutons graphiques améliorés */
.btn {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.95), rgba(140, 95, 24, 0.98));
  color: #111;
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-shadow: 0 1px 0 rgba(255,255,255,.08);
}

.btn-secondary,
.btn-zone,
.btn-target,
.btn-attack {
  background: linear-gradient(180deg, rgba(18, 18, 24, 0.96), rgba(37, 35, 43, 0.96));
  color: #f7f5f1;
  border-color: rgba(255,255,255,.08);
}

.btn::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background-image: var(--ui-btn-icon);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.82;
}

.btn.btn-secondary::before,
.btn.btn-zone::before,
.btn.btn-target::before,
.btn.btn-attack::before {
  opacity: 0.18;
}

.btn.btn-xs::before {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.btn.btn-tutorial::before { display: none; }

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.btn:active {
  transform: translateY(0);
}

/* Titres de section décorés */
.panel-title {
  position: relative;
  padding-bottom: 10px;
}

.panel-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.85), transparent);
}

/* Cartes joueurs et tuiles plus graphiques */
.pcard,
.zone {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(18,18,24,.92), rgba(12,12,18,.95));
}

.pcard {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.2);
}

.pcard.current {
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.28), inset 0 0 0 1px rgba(212,175,55,.14);
}

.zone {
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  transition: transform .24s ease, box-shadow .24s ease;
}

.zone:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 35px rgba(0,0,0,.32);
}

.zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.08), transparent 28%);
  pointer-events: none;
}

.zone-bg {
  filter: saturate(1.05) brightness(0.92);
}

.zone-name,
.zone-type-badge,
.zone-dice-badge {
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}

/* Board background envelope */
#board.game-board-map {
  background: linear-gradient(180deg, rgba(8,8,14,.6), rgba(4,4,6,.9));
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 24px 72px rgba(0,0,0,.55);
}

/* Panneaux latéraux */
.left-panel,
.right-panel {
  padding: 18px;
  border-radius: 22px;
}

.left-panel {
  background: linear-gradient(180deg, rgba(12,12,16,.94), rgba(14,12,18,.95));
}

.right-panel {
  background: linear-gradient(180deg, rgba(15,12,18,.95), rgba(9,9,14,.96));
}

/* En-tête joueur plus graphique */
#gh-player-info {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 8px 14px;
}

.hp-badge {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.35));
}

/* Bannières / overlays */
.reveal-window-banner,
.overlay,
.char-reveal-box {
  border: 1px solid rgba(255,255,255,.08);
}

.reveal-window-banner {
  background: linear-gradient(180deg, rgba(18, 16, 20, 0.95), rgba(14, 12, 18, 0.98));
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
}

.char-reveal-box {
  background: linear-gradient(180deg, rgba(16,14,12,.96), rgba(10,10,12,.98));
}

/* Support des assets graphiques pour les titres */
.has-ui-ornament h1,
.has-ui-ornament h2,
.has-ui-ornament .panel-title {
  position: relative;
}

.has-ui-ornament h1::after,
.has-ui-ornament h2::after,
.has-ui-ornament .panel-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 48px;
  background-image: var(--ui-panel-ornament);
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: 0.28;
  pointer-events: none;
}