/* Thème commun « salle de futsal + cartes à collectionner » (maquette C, design/maquettes-design.html) :
   parquet et lignes orange, tableau d'affichage lumineux, cartes en blason or / argent / bronze.
   Utilisé par l'accueil, le salon en ligne, le classement, l'explorateur et le constructeur ; la page de match
   (index.html) a son propre habillage, dans le même esprit. */
@import url("/fonts/fonts.css");

:root {
  --bg: #0e1116; --panel: rgba(12, 14, 18, .86); --panel-2: #1f2630; --line: #3a4452; --text: #e8edf2; --muted: #9aa8b6;
  --a: #60a5fa; --b: #f87171; --tec: #f59e0b; --phy: #22c55e; --orange: #f97316; --ok: #22c55e; --bad: #f87171; --drop: #fde68a;
  --art: #7c3aed; --mon: #b91c1c; --ren: #ea580c; --met: #0d9488; --neu: #475569;
  --display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --led: "Orbitron", "Consolas", monospace;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh;
       background-color: #b98246;
       background-image: radial-gradient(ellipse at 50% 30%, rgba(255, 240, 210, .12), rgba(0, 0, 0, .62) 80%),
         repeating-linear-gradient(90deg, #c99456 0 38px, #b98246 38px 39px, #d3a066 39px 77px, #bb8649 77px 78px);
       background-attachment: fixed; }
a { color: #fdba74; }
button, .btn { display: inline-block; font: 600 15px var(--cond); letter-spacing: .5px; cursor: pointer; border: 1px solid var(--line); background: #1b2129; color: var(--text); padding: 7px 14px; border-radius: 8px; text-decoration: none; }
button:hover, .btn:hover { border-color: #64748b; }
button.primary, .btn.primary { background: var(--orange); border-color: #fdba74; color: #fff; font-weight: 700; text-transform: uppercase; }
button.blue, .btn.blue { background: #1d4ed8; border-color: #bfdbfe; color: #fff; font-weight: 700; text-transform: uppercase; }
button:disabled { opacity: .5; cursor: default; }
button.small { padding: 2px 9px; font-size: 13px; }
input, select { font: inherit; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
input:focus, select:focus { outline: 2px solid rgba(249, 115, 22, .6); outline-offset: 0; }

/* ---- barre du haut commune ---- */
.topbar { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: linear-gradient(#171a1f, #0b0c0e); border-bottom: 3px solid var(--orange); flex-wrap: wrap; }
.topbar .brand { display: flex; align-items: center; gap: 6px; text-decoration: none; background: #0b0b0c; border: 2px solid #2b2b2e; border-radius: 8px; padding: 2px 10px; box-shadow: inset 0 0 10px rgba(0, 0, 0, .8); }
.topbar .brand span { font: 800 15px var(--led); color: #ff3b30; text-shadow: 0 0 7px rgba(255, 59, 48, .8); letter-spacing: 1px; }
.topbar .brand b { font: 700 17px var(--cond); color: #fde68a; letter-spacing: 1px; }
.topbar h1 { margin: 0; font: 26px/1 var(--display); letter-spacing: 1.5px; color: #fde68a; }
.topbar nav a { color: #fdba74; margin-right: 12px; text-decoration: none; font: 600 15px var(--cond); letter-spacing: .5px; }
.topbar nav a:hover { text-decoration: underline; }
.topbar .spacer { flex: 1; }

/* ---- panneaux sombres posés sur le parquet ---- */
.panel { background: var(--panel); border: 2px solid rgba(249, 115, 22, .75); border-radius: 14px; padding: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.panel h2 { margin: 0 0 6px; font: 24px/1.1 var(--display); letter-spacing: 1.5px; color: #fde68a; }
.panel h3 { margin: 8px 0 4px; font: 700 15px var(--cond); letter-spacing: 1px; text-transform: uppercase; color: #fbbf24; }
.muted { color: var(--muted); }
.led { font: 800 30px var(--led); color: #ff3b30; text-shadow: 0 0 8px rgba(255, 59, 48, .8); letter-spacing: 4px; }

/* ---- widget de compte (account.js) ---- */
#account { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#account .who { color: #a7f3d0; font: 700 15px var(--cond); letter-spacing: .5px; }

/* ---- carte du catalogue en fiche « aimant » (explorateur, constructeur, decks, accueil) : fiche bristol dont le haut
   prend la couleur de l'école (emblème en filigrane), épinglée par un aimant de l'école ; rareté = ruban adhésif
   (bleu : rare, doré et étoile : légendaire). Maquette : design/cartes-options.html (option C, papier 3). ---- */
.pc { --c: var(--neu); position: relative; display: flex; transition: transform .12s; }
.pc.s-ARTISTE { --c: var(--art); } .pc.s-MONSTRE { --c: var(--mon); } .pc.s-RENARD { --c: var(--ren); } .pc.s-METRONOME { --c: var(--met); }
.pc .face { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 46px 10px 12px; color: #1c1917; border-radius: 5px;
            background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #fff) 0 118px, #fffdf4 118px); box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.pc:nth-child(odd) .face { transform: rotate(-.8deg); } .pc:nth-child(even) .face { transform: rotate(.8deg); }
.pc .face > * { flex-shrink: 0; }  /* une carte trop courte déborde plutôt que d'écraser le nom (overflow: hidden) */
.pc .pin { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center;
           background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 40%), var(--c); box-shadow: 0 3px 4px rgba(0, 0, 0, .35), inset 0 -3px 4px rgba(0, 0, 0, .25); }
.pc .pin svg { width: 20px; height: 20px; }
.pc .wm { position: absolute; right: 6px; top: 34px; width: 74px; height: 74px; color: var(--c); opacity: .16; transform: rotate(-12deg); pointer-events: none; }
.pc .pos { position: absolute; left: 10px; top: 9px; display: flex; flex-direction: column; gap: 2px; font: 700 13px var(--cond); letter-spacing: 1px; color: color-mix(in srgb, var(--c) 65%, #000); }
.pc .mini { width: 26px; height: 15px; }
.pc .cost { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #111; background: rgba(255, 255, 255, .7); color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(8deg); }
.pc .cost b { font: 16px/1 var(--marker); } .pc .cost small { font: 700 7px var(--cond); letter-spacing: 1px; }
.pc .tape { position: absolute; right: -12px; bottom: 20px; width: 64px; height: 18px; transform: rotate(-32deg); opacity: .9; display: none; z-index: 1; }
.pc.r-RARE .tape { display: block; background: repeating-linear-gradient(90deg, #60a5fa 0 6px, #93c5fd 6px 12px); }
.pc.r-LEGENDAIRE .tape { display: block; background: linear-gradient(90deg, #b8860b, #ffe08a, #b8860b); }
.pc.r-LEGENDAIRE .face::after { content: "★"; position: absolute; left: 12px; top: 50px; font-size: 20px; color: #eab308; font-family: system-ui, sans-serif; }
.pc .name { position: relative; font: 23px/1.2 var(--marker); text-align: center; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .sub { position: relative; font: 600 11px var(--cond); letter-spacing: 1px; text-transform: uppercase; text-align: center; color: #44403c; }
.pc .stats { display: flex; gap: 4px; margin-top: 6px; }
.pc .stat { flex: 1; text-align: center; padding: 1px 0; }
.pc .stat b { display: block; font: 28px/1 var(--marker); }
.pc .stat.tec b { color: #d97706; } .pc .stat.tir b { color: #dc2626; } .pc .stat.def b { color: #15803d; } .pc .stat.arr b { color: #7c3aed; } .pc .stat.sta b { color: #0f766e; }
.pc .stat small { display: block; font: 700 9.5px var(--cond); letter-spacing: 1px; color: #1e3a8a; }
.pc .desc { font-size: 12px; line-height: 1.3; color: #292524; border-top: 1px dashed #d6d3d1; padding: 4px 2px 0; }
.pc .desc b { font: 700 13px var(--cond); letter-spacing: .5px; text-transform: uppercase; color: #1c1917; }
.pc .desc.passive b { color: #065f46; } .pc .desc.power b { color: #9a3412; } .pc .desc.warn { color: #991b1b; font-weight: 600; }
.pc .foot { margin-top: auto; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; padding-top: 4px; }
/* carte jeu en fiche aimant : couleur de la famille, schéma tactique sur la partie papier */
.pc.gc.fam-OFFENSIVE { --c: #f97316; } .pc.gc.fam-DEFENSIVE { --c: #2563eb; } .pc.gc.fam-CREATIVE { --c: #8b5cf6; }
.pc.gc .board { height: 50px; display: flex; align-items: center; justify-content: center; margin-top: 10px; border: 1px dashed #d6d3d1; border-radius: 6px; background: rgba(255, 255, 255, .5); }
.pc.gc .board svg { height: 40px; width: 110px; }
.crest.s-ARTISTE { color: var(--art); } .crest.s-MONSTRE { color: var(--mon); } .crest.s-RENARD { color: var(--ren); } .crest.s-METRONOME { color: var(--met); } .crest.s-NEUTRE, .crest.s-GB { color: var(--neu); }

/* ---- carte jeu : fiche tactique en papier, bandeau de la famille ---- */
.tcard { position: relative; display: flex; flex-direction: column; gap: 6px; background: #fbf7ef; color: #1f2937; border-radius: 10px; border-top: 8px solid var(--line); padding: 10px 12px 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.tcard.fam-OFFENSIVE { border-top-color: var(--orange); } .tcard.fam-DEFENSIVE { border-top-color: #2563eb; } .tcard.fam-CREATIVE { border-top-color: #8b5cf6; }
.tcard .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tcard .name { font: 700 21px/1.05 var(--cond); letter-spacing: .5px; text-transform: uppercase; }
.tcard .fam { font: 600 11px var(--cond); letter-spacing: 1px; text-transform: uppercase; color: #6b7280; }
.tcard .board { height: 54px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(90deg, #f3e5cf 0 18px, #efdcc0 18px 19px); border: 1px solid #e7d3b3; border-radius: 6px; }
.tcard .board svg { height: 44px; width: 120px; }
.tcard .text { font-size: 12.5px; line-height: 1.3; color: #374151; }
.tcard .cost { flex: none; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3f3f46, #0a0a0b 70%); color: #fde68a; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tcard .cost b { font: 21px/.85 var(--display); } .tcard .cost small { font: 700 8px var(--cond); letter-spacing: 1px; color: #fbbf24; }
.tcard .foot { margin-top: auto; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ---- listes, tableaux ---- */
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 700 12px var(--cond); letter-spacing: .5px; }

@media (max-width: 700px) {
  .topbar { gap: 8px; padding: 6px 10px; }
  .topbar h1 { font-size: 22px; }
  .topbar nav a { margin-right: 8px; font-size: 14px; }
}