/* ============================================================
   LES QUATRE ROYAUMES — feuille de style
   Thème: campement de guerre nocturne, sceaux royaux gravés
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cinzel+Decorative:wght@700&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --ink:            #100d16;
  --ink-2:          #17131f;
  --parchment:      #ece3ce;
  --parchment-dim:  #a89c8e;
  --muted:          #756a80;

  --gold:           #c9a227;
  --gold-bright:    #e6c34a;
  --gold-dim:       #6e5a1c;

  --bleu:           #3e7cb1;
  --bleu-glow:      #6fb3e8;
  --vert:           #4c8c4a;
  --vert-glow:      #7fce78;
  --orange:         #c97b2e;
  --orange-glow:    #f0a85a;
  --rouge:          #a63a3a;
  --rouge-glow:     #e2696a;

  --font-display: 'Cinzel', serif;
  --font-deco:    'Cinzel Decorative', serif;
  --font-body:    'Manrope', sans-serif;

  --radius: 10px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--font-body);
  overflow-x:hidden;
}

body{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 50% -10%, #241c30 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 110%, #1c1420 0%, transparent 55%),
    var(--ink);
}

/* fine noise / grain overlay to avoid a flat AI-gradient look */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.05;
  z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.screen{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 32px 20px;
}

.hidden{ display:none !important; }

/* ---------- eyebrow / titres ---------- */
.eyebrow{
  font-family: var(--font-display);
  letter-spacing:.35em;
  text-transform:uppercase;
  font-size:.68rem;
  color: var(--gold);
  margin-bottom: 14px;
  text-align:center;
}

.title-deco{
  font-family: var(--font-deco);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  text-align:center;
  color: var(--parchment);
  text-shadow: 0 0 30px rgba(201,162,39,.25);
  line-height:1.05;
}

.subtitle{
  font-family: var(--font-body);
  color: var(--parchment-dim);
  text-align:center;
  max-width: 460px;
  margin: 16px auto 0;
  font-size: .95rem;
  line-height:1.6;
}

/* ---------- écran d'accueil ---------- */
#screen-accueil .crest{
  width:120px; height:120px;
  margin-bottom: 26px;
  opacity:.9;
}

.btn{
  font-family: var(--font-display);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.85rem;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: none;
  border-radius: 999px;
  padding: 15px 34px;
  cursor:pointer;
  box-shadow: 0 6px 0 var(--gold-dim), 0 10px 24px rgba(0,0,0,.45);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-2px); filter:brightness(1.06); }
.btn:active{ transform: translateY(2px); box-shadow: 0 3px 0 var(--gold-dim), 0 6px 14px rgba(0,0,0,.45); }
.btn:disabled{
  cursor:not-allowed;
  filter: grayscale(.6) brightness(.6);
  box-shadow: 0 4px 0 #3a3020, 0 6px 14px rgba(0,0,0,.35);
  transform:none;
}

.btn-ghost{
  font-family: var(--font-display);
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.78rem;
  color: var(--parchment-dim);
  background: transparent;
  border: 1px solid rgba(236,227,206,.25);
  border-radius: 999px;
  padding: 10px 22px;
  cursor:pointer;
  transition: all .15s ease;
}
.btn-ghost:hover{
  color: var(--parchment);
  border-color: rgba(236,227,206,.6);
  background: rgba(236,227,206,.06);
}
.btn-ghost:disabled{
  cursor:not-allowed; opacity:.35;
}

.btn-danger{
  color: var(--rouge-glow);
  border-color: rgba(166,58,58,.45);
}
.btn-danger:hover{
  color:#ffb0b0;
  border-color: rgba(230,105,106,.8);
  background: rgba(166,58,58,.1);
}

#accueil-jouer{ margin-top: 8px; }

/* ---------- hexagones de sélection de royaume ---------- */
.royaume-grid{
  display:flex;
  flex-wrap:wrap;
  gap: 34px;
  justify-content:center;
  align-items:center;
  margin: 40px 0 10px;
}

.hex-royaume{
  --c: var(--gold);
  --c-glow: var(--gold-bright);
  position:relative;
  width: 148px;
  height: 168px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #000 15%), color-mix(in srgb, var(--c) 25%, #000 55%));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  border:none;
  transition: transform .18s ease, filter .18s ease;
  filter: saturate(.85);
}
.hex-royaume::after{
  content:"";
  position:absolute; inset:0;
  clip-path: inherit;
  box-shadow: inset 0 0 0 2px rgba(236,227,206,.18);
}
.hex-royaume:hover{
  transform: translateY(-6px) scale(1.03);
  filter: saturate(1.15);
}
.hex-royaume:hover::after{
  box-shadow: inset 0 0 0 2px var(--c-glow), 0 0 26px -4px var(--c-glow);
}
.hex-royaume.selected::after{
  box-shadow: inset 0 0 0 3px var(--c-glow), 0 0 30px -2px var(--c-glow);
}
.hex-royaume .nom{
  font-family: var(--font-display);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.82rem;
  color: var(--parchment);
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.hex-royaume .glyph{
  width:38px; height:38px;
  border-radius:50%;
  background: rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 1px rgba(236,227,206,.3);
}
.hex-royaume .glyph svg{ width:20px; height:20px; }

.hex-royaume[data-royaume="bleu"]{ --c: var(--bleu); --c-glow: var(--bleu-glow); }
.hex-royaume[data-royaume="vert"]{ --c: var(--vert); --c-glow: var(--vert-glow); }
.hex-royaume[data-royaume="orange"]{ --c: var(--orange); --c-glow: var(--orange-glow); }
.hex-royaume[data-royaume="rouge"]{ --c: var(--rouge); --c-glow: var(--rouge-glow); }

/* petite variante compacte utilisée dans les panneaux */
.hex-royaume.compact{ width:104px; height:118px; gap:6px; }
.hex-royaume.compact .nom{ font-size:.68rem; }
.hex-royaume.compact .glyph{ width:28px; height:28px; }
.hex-royaume.compact .glyph svg{ width:15px; height:15px; }

.hex-royaume.checkbox::before{
  content:"";
  position:absolute;
  top:8px; left:50%;
  transform:translateX(-50%);
  width:16px; height:16px;
  border-radius:4px;
  border:2px solid rgba(236,227,206,.55);
  background: rgba(16,13,22,.4);
  z-index:2;
}
.hex-royaume.checkbox.selected::before{
  background: var(--c-glow);
  border-color: var(--c-glow);
  box-shadow: 0 0 10px var(--c-glow);
}

/* ============================================================
   TABLE DE JEU
   ============================================================ */
#screen-jeu{
  justify-content:flex-start;
  padding-top: 24px;
  padding-bottom: 140px;
  gap: 0;
}

.jeu-header{
  width:100%;
  max-width: 980px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 4px 22px;
  border-bottom: 1px solid rgba(236,227,206,.12);
  margin-bottom: 34px;
}

.royaume-actif{
  display:flex;
  align-items:center;
  gap:12px;
}
.pastille{
  width:34px; height:34px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: color-mix(in srgb, var(--c, var(--gold)) 70%, #000 10%);
  box-shadow: 0 0 14px -2px var(--c-glow, var(--gold-bright));
}
.royaume-actif .label{
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  color: var(--parchment-dim);
}
.royaume-actif .valeur{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1rem;
  color: var(--parchment);
}

/* ---------- table / cartes ---------- */
.table-cartes{
  width:100%;
  max-width: 980px;
  display:flex;
  flex-wrap:wrap;
  gap: 30px 26px;
  justify-content:center;
  align-items:flex-start;
  min-height: 240px;
}

.carte{
  position:relative;
  width: 168px;
  animation: poser .35s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes poser{
  from{ opacity:0; transform: translateY(18px) scale(.9) rotate(-3deg); }
  to{ opacity:1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes disparaitre{
  to{ opacity:0; transform: scale(.75) rotate(6deg); }
}
.carte.sortie{ animation: disparaitre .22s ease forwards; }

.carte img{
  width:100%;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
  cursor:pointer;
  transition: filter .15s ease, transform .15s ease;
}
.carte:hover img{ transform: translateY(-4px); }
.carte.selectionnee img{
  filter:
    drop-shadow(0 0 0 3px var(--gold-bright))
    drop-shadow(0 0 22px var(--gold-bright))
    drop-shadow(0 10px 18px rgba(0,0,0,.55));
}

.carte .nom-carte{
  text-align:center;
  margin-top:8px;
  font-family: var(--font-display);
  font-size:.72rem;
  letter-spacing:.04em;
  color: var(--parchment-dim);
  text-transform:uppercase;
}

.carte .supprimer{
  position:absolute;
  top:-8px; right:6px;
  width:28px; height:28px;
  border-radius:50%;
  border: 1px solid rgba(230,105,106,.5);
  background: rgba(16,13,22,.85);
  color: var(--rouge-glow);
  font-family: var(--font-body);
  font-size:.95rem;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: all .15s ease;
  z-index:3;
}
.carte.selectionnee .supprimer{ display:flex; }
.carte .supprimer:hover{ background: var(--rouge); color:#fff; }
.carte .supprimer:disabled{
  opacity:.3; cursor:not-allowed;
}

.emplacement-vide{
  width:168px;
  aspect-ratio: 1 / 0.87;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 2px dashed rgba(236,227,206,.15);
  display:flex; align-items:center; justify-content:center;
  color: var(--parchment-dim);
  font-family: var(--font-display);
  font-size: 1.6rem;
  opacity:.5;
}

/* ---------- barre d'actions ---------- */
.barre-actions{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:20;
  display:flex;
  justify-content:center;
}
.barre-actions-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  justify-content:center;
  padding: 16px 22px;
  margin: 0 16px 18px;
  max-width: 980px;
  width:100%;
  background: rgba(16,13,22,.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(236,227,206,.14);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

.sep-verticale{
  width:1px; height:26px;
  background: rgba(236,227,206,.15);
  margin: 0 2px;
}

/* ============================================================
   PANNEAUX SUPERPOSÉS (overlays)
   ============================================================ */
.overlay{
  position:fixed; inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  background: rgba(8,6,12,.72);
  backdrop-filter: blur(4px);
  animation: fondu .18s ease both;
}
@keyframes fondu{ from{ opacity:0; } to{ opacity:1; } }

.panneau{
  width:100%;
  max-width: 640px;
  background:
    radial-gradient(500px 260px at 50% -20%, rgba(201,162,39,.08), transparent 60%),
    var(--ink-2);
  border: 1px solid rgba(236,227,206,.14);
  border-radius: 20px;
  padding: 34px 30px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: monter .22s cubic-bezier(.2,.9,.3,1.1) both;
  max-height: 86vh;
  overflow-y:auto;
}
@keyframes monter{
  from{ opacity:0; transform: translateY(22px) scale(.97); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.panneau-titre{
  font-family: var(--font-display);
  font-size:1.3rem;
  text-align:center;
  color: var(--parchment);
  margin-bottom:6px;
}
.panneau-soustitre{
  text-align:center;
  color: var(--parchment-dim);
  font-size:.85rem;
  margin-bottom: 26px;
  line-height:1.5;
}

.panneau-grille{
  display:flex;
  flex-wrap:wrap;
  gap: 22px;
  justify-content:center;
}

.panneau-pied{
  display:flex;
  justify-content:center;
  gap: 14px;
  margin-top: 28px;
}

/* choix de cartes dans les panneaux */
.choix-cartes{
  display:flex;
  flex-wrap:wrap;
  gap: 22px;
  justify-content:center;
}
.carte-choix{
  width: 136px;
  cursor:pointer;
  text-align:center;
  transition: transform .15s ease;
}
.carte-choix:hover{ transform: translateY(-6px); }
.carte-choix img{
  width:100%;
  display:block;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.5));
  transition: filter .15s ease;
}
.carte-choix:hover img{
  filter: drop-shadow(0 0 0 3px var(--gold-bright)) drop-shadow(0 0 18px var(--gold-bright)) drop-shadow(0 10px 16px rgba(0,0,0,.5));
}
.carte-choix .nom-carte{
  margin-top:8px;
  font-family: var(--font-display);
  font-size:.7rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color: var(--parchment-dim);
}

.message-vide{
  text-align:center;
  color: var(--parchment-dim);
  font-size:.9rem;
  padding: 20px 0;
}

/* confirmation d'abandon */
.panneau.petit{ max-width: 420px; text-align:center; }

/* ---------- toast ---------- */
.toast{
  position:fixed;
  top: 26px; left:50%;
  transform: translateX(-50%) translateY(-14px);
  z-index:80;
  background: var(--ink-2);
  border: 1px solid rgba(201,162,39,.4);
  color: var(--parchment);
  font-size:.85rem;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transition: all .25s ease;
}
.toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- responsive ---------- */
@media (max-width: 560px){
  .hex-royaume{ width:118px; height:134px; }
  .carte, .emplacement-vide{ width: 128px; }
  .carte-choix{ width: 108px; }
  .barre-actions-inner{ gap:8px; padding:12px; }
  .btn{ padding:13px 22px; font-size:.78rem; }
  .btn-ghost{ padding:9px 16px; font-size:.72rem; }
}

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background: rgba(236,227,206,.2); border-radius:4px; }