/* ==========================================================================
   BO2 TikTok Launcher — thème Call of Duty : Black Ops 2
   ========================================================================== */
:root {
  --bg:        #08080a;
  --bg-2:      #0e0e11;
  --panel:     #131317;
  --panel-2:   #17171c;
  --line:      #2b2b32;
  --line-2:    #3d3d46;
  --txt:       #d9dce1;
  --txt-dim:   #838a94;
  /* Couleur du jeu actif — redéfinie sur :root par updateGameSpecificUI()
     (app.js) à chaque changement de jeu. --acc/--acc-2/--acc-deep en
     dérivent : toute la page (boutons, titres, onglet actif, séparateurs...)
     se retheme d'un coup, pas seulement le halo du logo. */
  --gc:        #ff7a1a;   /* orange BO2 par défaut, avant tout choix de jeu */
  --gc-dim:    #7a3a0d;
  --acc:       var(--gc);
  --acc-2:     color-mix(in srgb, var(--gc) 65%, white);
  --acc-deep:  var(--gc-dim);
  --ok:        #8fd14f;
  --danger:    #e5484d;
  --notch:     polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

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

/* [hidden] doit TOUJOURS masquer l'élément, même quand une règle plus
   spécifique définit un display (flex, grid, inline-flex, block...) ailleurs
   dans ce fichier — sinon un el.hidden = true en JS reste visible à l'écran
   malgré l'attribut posé (piège rencontré plusieurs fois : .switchbox,
   .st-item...). Règle générique une fois pour toutes, plutôt qu'un
   correctif par sélecteur à chaque nouvel élément basculé dynamiquement. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font: 13.5px/1.55 "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
}
h1, h2, h3, .navitem, .cta, .btn, th, .tag, .tb-name, .tb-mode, .hero-status,
.rf-pill, .step > span, summary {
  font-family: "Agency FB", "Oswald", "Bebas Neue", "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.app { display: flex; flex-direction: column; height: 100vh; }

/* ---------- Titlebar ---------- */
.titlebar {
  height: 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #17171b, #0c0c0f);
  border-bottom: 1px solid var(--line);
  -webkit-app-region: drag;
  padding-left: 12px;
}
.titlebar::after {
  content: ""; position: absolute; left: 0; top: 40px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--acc), transparent 55%);
  pointer-events: none;
}
.tb-left { display: flex; align-items: center; gap: 9px; }
.tb-icon { width: 20px; height: 20px; }
.tb-name { font-size: 14px; font-weight: 700; color: var(--txt); }
.tb-sep { color: var(--acc); }
.tb-mode { font-size: 11px; color: var(--txt-dim); }
.tb-ver {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--txt-dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}
.tb-ver:empty { display: none; }
.tb-btns { -webkit-app-region: no-drag; display: flex; align-items: center; height: 100%; }
.tb-lang {
  -webkit-app-region: no-drag; align-self: center; margin-right: 6px;
  background: var(--panel-2, #1b1b20); color: var(--txt-dim);
  border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 11px; padding: 3px 6px; cursor: pointer;
}
.tb-lang:hover { color: var(--txt, #e8e8ea); }
.tb-btn {
  width: 44px; height: 40px; border: 0; background: transparent;
  color: var(--txt-dim); font-size: 13px; cursor: pointer;
}
.tb-btn:hover { background: #222228; color: var(--txt); }
.tb-close:hover { background: var(--danger); color: #fff; }

/* ---------- Bandeau nouvelle version ---------- */
.update-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px; font-size: 12px; font-weight: 700;
  background: linear-gradient(90deg, rgba(255,122,26,.16), rgba(255,122,26,.04));
  border-bottom: 1px solid var(--acc-deep); color: var(--acc-2);
}
.update-bar #updateText { flex: 1; }
.ub-dl {
  border: 1px solid var(--acc); background: var(--acc); color: #0a0a0c;
  font-weight: 800; font-size: 11px; letter-spacing: .03em;
  padding: 5px 12px; cursor: pointer; clip-path: var(--notch);
}
.ub-dl:hover { background: var(--acc-2); border-color: var(--acc-2); }
.ub-x {
  border: 0; background: transparent; color: var(--acc-2); opacity: .6;
  font-size: 12px; cursor: pointer; padding: 4px 6px;
}
.ub-x:hover { opacity: 1; }

/* ---------- Shell ---------- */
.shell { flex: 1; display: flex; min-height: 0; }

/* ---------- Rail ---------- */
.rail {
  width: 210px; flex-shrink: 0;
  background: linear-gradient(180deg, #0d0d10, #0a0a0c);
  border-right: 1px solid var(--line);
  padding: 18px 0;
  display: flex; flex-direction: column;
}
.navitem {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; margin: 1px 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--txt-dim); font-size: 14px; font-weight: 700;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
}
.navitem:hover { color: var(--txt); background: rgba(255,122,26,.05); }
.navitem.active {
  color: var(--acc-2); background: linear-gradient(90deg, rgba(255,122,26,.16), transparent);
  border-left-color: var(--acc);
}
.ni-idx { font-size: 11px; color: var(--acc); opacity: .8; }
.navitem.active .ni-idx { opacity: 1; }
.rail-foot { margin-top: auto; padding: 14px 18px 4px; }
.rf-pill {
  font-size: 11px; font-weight: 700; padding: 4px 9px; text-align: center;
  border: 1px solid var(--line-2); color: var(--txt-dim); background: #000;
  clip-path: var(--notch);
}
.rf-pill.ok { color: var(--ok); border-color: rgba(143,209,79,.4); }
.rf-pill.warn { color: var(--acc-2); border-color: rgba(255,122,26,.45); }
.rf-ver {
  display: block; width: 100%; margin-top: 8px; padding: 3px 0;
  font-size: 10px; color: #4c4c55; text-align: center; letter-spacing: .1em;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  font-family: inherit; transition: color .12s, background .12s;
}
.rf-ver:hover { color: var(--txt-dim); background: rgba(255,255,255,.03); }
.rf-ver:disabled { cursor: default; opacity: .6; }

/* ---------- Liens réseaux GameFinds ---------- */
.social { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 30px; height: 30px; color: #6a6a76; border: 1px solid var(--line);
  background: #000; clip-path: var(--notch); text-decoration: none;
  transition: color .12s, border-color .12s, background .12s;
}
.social-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.social-btn span { display: none; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.social-btn:hover { color: var(--acc); border-color: var(--acc); background: rgba(255,122,26,.08); }

/* version large (écran de sélection) : icône + libellé */
.social-lg { margin-top: 20px; gap: 12px; flex-wrap: wrap; }
.social-lg .social-btn { width: auto; height: auto; padding: 8px 14px; }
.social-lg .social-btn span { display: inline; }

/* ---------- Main ---------- */
main {
  flex: 1; overflow-y: auto; padding: 24px 30px 36px;
  background:
    radial-gradient(70% 45% at 50% 0%, rgba(255,122,26,.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.010) 3px 4px);
}

/* ---------- Pied de page ---------- */
.appfoot {
  flex-shrink: 0; height: 32px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  background: linear-gradient(180deg, #0c0c0f, #08080a);
  border-top: 1px solid var(--line);
  font-family: "Agency FB", "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .08em;
  font-size: 10.5px;
}
.af-brand { color: var(--txt-dim); }
.af-brand .af-sep, .af-meta .af-sep { color: var(--acc); margin: 0 5px; }
.af-meta { color: #4c4c55; }
.panel { display: none; animation: fade .18s ease; max-width: 1180px; margin: 0 auto; }
.panel.active { display: block; }
#tab-keys { max-width: 1500px; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Bracket panel (coins de visée) ---------- */
.bracket {
  position: relative;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 2px solid var(--acc);
}
.bracket::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bracket::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.bracket h2 { font-size: 14px; color: var(--acc-2); margin-bottom: 10px; font-weight: 700; }

/* ---------- Hero (installation) ---------- */
.hero {
  display: flex; align-items: center; gap: 34px;
  text-align: left; padding: 24px 30px;
}
.hero-body { flex: 1; min-width: 0; }
.hero-head { margin-bottom: 8px; }
.hero-status {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 14px;
  border: 1px solid var(--line-2); color: var(--txt-dim); background: #000;
  clip-path: var(--notch);
}
.hero-status.ok { color: var(--ok); border-color: rgba(143,209,79,.45); }
.hero-status.warn { color: var(--acc-2); border-color: rgba(255,122,26,.5); }
.hero h1 { font-size: 25px; font-weight: 700; margin-bottom: 8px; }
.hero-sub { margin-bottom: 18px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-logo-slot { flex-shrink: 0; }
.hero-logo {
  display: block; width: 216px; height: auto; flex-shrink: 0;
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 1px #000, 0 12px 44px -8px rgba(255,122,26,.32);
}
@media (max-width: 700px) {
  .hero { flex-direction: column; text-align: center; }
  .hero-logo { width: 180px; }
}
/* Repli neutre pour un jeu sans logo dédié (ex. BO3) : badge texte coloré
   (couleur --gc du jeu actif), jamais l'image d'un AUTRE jeu — voir
   setGameLogo()/GAME_META.<jeu>.noLogo dans app.js et le badge "BO3" déjà
   utilisé pour la carte de sélection #gcBo3. */
.hero-logo-badge {
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--gc) 14%, #000);
  color: var(--gc); font-weight: 700; font-size: 15px; letter-spacing: .04em;
}
.hero-sub { color: var(--txt-dim); font-size: 13px; margin-bottom: 24px; }

.cta {
  -webkit-app-region: no-drag;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 46px; cursor: pointer;
  background: linear-gradient(180deg, var(--acc-2), var(--acc));
  color: #120a03; border: 0;
  font-size: 20px; font-weight: 800;
  clip-path: var(--notch);
  box-shadow: 0 0 0 1px rgba(255,176,87,.5), 0 10px 30px -8px rgba(255,122,26,.6);
  transition: transform .1s, filter .1s;
}
.cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.cta:active { transform: translateY(0); }
.cta:disabled { opacity: .45; cursor: default; box-shadow: none; }
.cta-arrow { font-size: 15px; }

.hero-fine { color: #7c828c; font-size: 11.5px; margin-top: 12px; letter-spacing: .02em; }
.hero-fine b { color: var(--acc-2); font-weight: 600; }

.hero-done {
  margin: 22px auto 0; max-width: 460px; padding: 14px 16px;
  background: rgba(143,209,79,.08); border: 1px solid rgba(143,209,79,.35);
  clip-path: var(--notch); font-size: 12.5px; color: #cfe8b6;
}

/* ---------- Interrupteur marche / arrêt ---------- */
.switchbox {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 20px;
}
.sb-txt h2 { font-size: 14px; color: var(--acc-2); margin-bottom: 3px; font-weight: 700; }
.sb-txt .hint { margin: 0; }
.switch {
  -webkit-app-region: no-drag;
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0; cursor: pointer; padding: 4px;
  flex-shrink: 0;
}
.sw-track {
  width: 60px; height: 30px; padding: 3px; flex-shrink: 0;
  background: #000; border: 1px solid var(--line-2);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: border-color .15s, background .15s;
}
.sw-thumb {
  display: block; width: 22px; height: 22px; background: #4c4c55;
  transition: transform .16s ease, background .16s;
}
.sw-label {
  font-family: "Agency FB", "Oswald", sans-serif; text-transform: uppercase;
  letter-spacing: .08em; font-size: 15px; font-weight: 800; color: var(--txt-dim);
  min-width: 92px; text-align: left;
}
.switch.on .sw-track { border-color: var(--acc); background: rgba(255,122,26,.15); }
.switch.on .sw-thumb { transform: translateX(30px); background: var(--acc); }
.switch.on .sw-label { color: var(--acc-2); }
.switch:disabled { opacity: .4; cursor: default; }

/* ---------- Chips statut ---------- */
.chips { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.hero .chips { justify-content: flex-start; margin: 15px 0 0; }
@media (max-width: 700px) { .hero .chips { justify-content: center; } }
.chip {
  font-family: "Agency FB", "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .05em;
  font-size: 11.5px; font-weight: 700; padding: 6px 12px;
  background: var(--panel); border: 1px solid var(--line-2); color: var(--txt-dim);
  clip-path: var(--notch);
}
.chip.ok { color: var(--ok); border-color: rgba(143,209,79,.4); }
.chip.no { color: #ff8b8d; border-color: rgba(229,72,77,.4); }

/* ---------- Bandeau d'état + lancer le jeu ---------- */
.statusbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin: -4px 0 16px;
  background: var(--panel); border: 1px solid var(--line);
}
.st-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Agency FB", "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .05em;
  font-size: 11.5px; color: var(--txt-dim);
  padding-right: 10px; border-right: 1px solid var(--line);
}
.st-item:last-of-type { border-right: 0; }
.st-dot { width: 8px; height: 8px; background: #4c4c55; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.03); }
.st-item.ok { color: var(--ok); }
.st-item.ok .st-dot { background: var(--ok); }
.st-item.warn { color: var(--acc-2); }
.st-item.warn .st-dot { background: var(--acc); }
.st-item.neutral { color: var(--txt); }
.st-item.neutral .st-dot { background: var(--txt-dim); }
.st-launch { margin-left: auto; }

/* ---------- Aperçu du contenu ---------- */
.overview { padding: 14px 18px; }
.ov-lead { font-size: 12.5px; color: var(--txt-dim); margin-bottom: 12px; line-height: 1.55; }
.ov-lead b { color: var(--acc-2); font-size: 15px; font-family: "Agency FB","Oswald",sans-serif; }
.ov-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-cat {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Agency FB", "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .05em;
  font-size: 12px; color: var(--txt);
  background: #000; border: 1px solid var(--line-2); padding: 6px 11px;
  clip-path: var(--notch);
}
.ov-cat b { color: var(--acc); font-size: 12px; }
.ov-ex { margin-top: 12px; font-family: Consolas, monospace; font-size: 11.5px; color: var(--txt-dim); line-height: 1.6; }
.ov-ex b { color: var(--txt); font-family: inherit; }
.ov-foot { font-size: 11.5px; color: var(--txt-dim); margin-top: 10px; }
.ov-foot b { color: var(--acc-2); }

/* ---------- Titres de section (installation) ---------- */
.io-head {
  font-family: "Agency FB", "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .09em;
  font-size: 13px; color: var(--acc-2); margin: 18px 0 9px;
  padding-bottom: 5px; border-bottom: 1px solid var(--acc-deep);
  display: flex; align-items: baseline; gap: 10px;
}
.io-sub { font-family: Consolas, monospace; font-size: 10.5px; color: var(--txt-dim); text-transform: none; letter-spacing: 0; }
.io-sub span { color: var(--acc-2); }

/* les "steps" servent aussi de cartes explicatives */
.steps .step { align-items: flex-start; line-height: 1.5; }
.steps .step div { color: var(--txt-dim); font-size: 12px; }
.steps .step b { color: var(--txt); font-size: 12.5px; }

/* ---------- Manifest (ce qui est installé) ---------- */
.manifest { padding: 6px 16px; }
.mf-row {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) auto;
  gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.mf-row:first-child { border-top: 0; }
.mf-row code {
  font-family: Consolas, monospace; font-size: 11.5px; background: #000; color: var(--acc-2);
  padding: 3px 7px; border: 1px solid var(--line); overflow-wrap: anywhere;
}
.mf-row > span:nth-child(2) { color: var(--txt-dim); }

/* ---------- Aide-mémoire ---------- */
.tips { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tips li {
  position: relative; padding: 9px 12px 9px 30px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--txt-dim); line-height: 1.5;
}
.tips li::before {
  content: "›"; position: absolute; left: 12px; top: 8px;
  color: var(--acc); font-weight: 800; font-size: 14px;
}
.tips b { color: var(--txt); }
.hero-done code, .steps code, .hint code, td code {
  font-family: Consolas, monospace; background: #000; color: var(--acc-2);
  padding: 2px 7px; border: 1px solid var(--line); font-size: 12px;
}
.hero-done code { display: inline-block; margin-top: 8px; }

.steps { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.step {
  flex: 1; min-width: 180px;
  background: var(--panel); border: 1px solid var(--line);
  padding: 12px 14px; font-size: 12.5px; color: var(--txt-dim);
  display: flex; align-items: center; gap: 10px;
}
.step > span {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--acc); color: #000; font-weight: 800; font-size: 12px;
}
.step b { color: var(--txt); }

/* ---------- Advanced ---------- */
.adv { border: 1px solid var(--line); background: var(--panel); }
.adv summary {
  padding: 12px 16px; cursor: pointer; font-size: 12px; color: var(--txt-dim);
  list-style: none;
}
.adv summary::-webkit-details-marker { display: none; }
.adv summary::before { content: "▸ "; color: var(--acc); }
.adv[open] summary::before { content: "▾ "; }
.adv-body { padding: 4px 16px 16px; }
.field { padding: 12px 0; border-top: 1px solid var(--line); }
.field:first-child { border-top: 0; }
.field > label { display: block; font-size: 10px; color: var(--txt-dim); letter-spacing: .1em; margin-bottom: 5px; }

/* ---------- Rows / buttons ---------- */
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hint { color: var(--txt-dim); font-size: 12.5px; margin: 4px 0; }
.hint b { color: var(--txt); }
.path {
  font-family: Consolas, monospace; font-size: 11.5px; color: var(--acc-2);
  background: #000; border: 1px solid var(--line); padding: 7px 9px; word-break: break-all;
}
.btn {
  -webkit-app-region: no-drag;
  background: #1b1b21; color: var(--txt); border: 1px solid var(--line-2);
  padding: 8px 15px; font-size: 12px; font-weight: 700; cursor: pointer;
  clip-path: var(--notch); font-family: inherit; letter-spacing: .04em;
}
.btn:hover { border-color: var(--acc); color: var(--acc-2); }
.btn:disabled { opacity: .35; cursor: default; }
.btn:disabled:hover { border-color: var(--line-2); color: var(--txt); }
.btn-primary { background: var(--acc); border-color: var(--acc-2); color: #120a03; }
.btn-primary:hover { background: var(--acc-2); color: #120a03; }
.btn-danger { border-color: rgba(229,72,77,.5); color: #ff8b8d; background: transparent; }
.btn-danger:hover { background: rgba(229,72,77,.14); border-color: var(--danger); color: #ff8b8d; }
.btn-ghost { background: transparent; }

.statline { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.statline:first-child { border-top: 0; }
.statline em { color: var(--txt-dim); font-style: normal; font-size: 11px; }
.tag { font-size: 11px; font-weight: 700; padding: 3px 10px; background: #000; border: 1px solid var(--line-2); color: var(--txt-dim); clip-path: var(--notch); }
.tag.ok { color: var(--ok); border-color: rgba(143,209,79,.45); }
.tag.no { color: #ff8b8d; border-color: rgba(229,72,77,.45); }

.msg { min-height: 18px; font-size: 12.5px; margin-top: 10px; }
.msg.ok { color: var(--ok); }
.msg.err { color: #ff8b8d; }

/* ---------- Forms ---------- */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.grid4 > label { display: flex; flex-direction: column; gap: 5px; font-size: 10px; color: var(--txt-dim); letter-spacing: .1em; }
.grid4 > label.chk { flex-direction: row; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--txt); }
input, select {
  background: #000; color: var(--txt); border: 1px solid var(--line-2);
  padding: 7px 8px; font-size: 12.5px; font-family: inherit;
}
input:focus, select:focus { outline: 0; border-color: var(--acc); }
input[type="checkbox"] { accent-color: var(--acc); width: 15px; height: 15px; }
.filter { width: 100%; margin-top: 10px; }

/* ---------- Slot cards (touches) ---------- */
#slotCards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.slotcard { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); position: relative; }
.slotcard::before { content: ""; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border: 2px solid var(--acc); border-right: 0; border-bottom: 0; }
.sc-head { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: rgba(255,122,26,.06); }
.sc-head b { font-family: "Agency FB", "Oswald", sans-serif; font-size: 16px; color: var(--acc-2); letter-spacing: .08em; }
.sc-head span { font-size: 10.5px; color: var(--txt-dim); }
.sc-row { display: grid; grid-template-columns: 66px 1fr; gap: 8px; align-items: center; padding: 9px 14px; border-top: 1px solid #1e1e24; }
.sc-row:first-of-type { border-top: 0; }
.sc-g { font-size: 10.5px; font-weight: 700; color: var(--acc); letter-spacing: .05em; }
.sc-g small { display: block; color: var(--txt-dim); font-weight: 400; }
.sc-ctl { display: flex; gap: 6px; }
.sc-ctl select { flex: 1; min-width: 0; }
.sc-ctl input { width: 74px; }

.cfg {
  background: #000; border: 1px solid var(--line); padding: 12px;
  font-family: Consolas, monospace; font-size: 12px; color: #b7c0cc;
  white-space: pre-wrap; max-height: 240px; overflow: auto; user-select: text;
}

/* ---------- Actions ---------- */
.acat { margin-bottom: 18px; }
.acat h3 { font-size: 15px; color: var(--acc-2); border-bottom: 1px solid var(--acc-deep); padding-bottom: 4px; margin-bottom: 4px; font-family: "Agency FB","Oswald",sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.acat .cnote { color: var(--txt-dim); font-size: 12px; margin: 6px 0 8px; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--acc-2); font-size: 11px; font-weight: 700; }
.malus { color: #ff9d5c; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #2c2c34; border: 3px solid #000; }
::-webkit-scrollbar-thumb:hover { background: var(--acc-deep); }

@media (max-width: 880px) {
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  #slotCards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Onglet Touches — 1 touche = 1 action, activable/désactivable
   ========================================================================== */
.kbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); padding: 13px 16px; margin-bottom: 18px;
}
.kbar .search { width: 250px; background: #000; border: 1px solid var(--line-2); color: var(--txt); padding: 9px 11px; font-size: 12.5px; font-family: inherit; }
.kbar .search:focus { outline: 0; border-color: var(--acc); }
.khint { flex: 1; min-width: 200px; color: var(--txt-dim); font-size: 12px; }
.khint b { color: var(--txt); }
.kcount { font-family: "Agency FB", "Oswald", sans-serif; letter-spacing: .06em; font-size: 12px; color: var(--txt-dim); white-space: nowrap; }
.kcount b { color: var(--acc-2); }

.ksec { margin-bottom: 20px; }
.ksec h3 {
  font-family: "Agency FB", "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .09em;
  font-size: 14px; color: var(--acc-2); margin: 0 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--acc-deep);
  display: flex; align-items: baseline; gap: 10px;
}
.ksec h3 .n {
  font-family: "Segoe UI", sans-serif; text-transform: none; letter-spacing: 0;
  font-size: 11px; font-weight: 700; color: var(--ok);
  border: 1px solid rgba(143,209,79,.4); padding: 2px 8px; clip-path: var(--notch);
}
.ksec h3 .n.none { color: var(--txt-dim); border-color: var(--line-2); }
.allbtn {
  margin-left: auto; font-family: "Segoe UI", sans-serif; text-transform: none; letter-spacing: 0;
  font-size: 11px; color: var(--txt-dim); background: transparent; border: 0; cursor: pointer;
}
.allbtn:hover { color: var(--acc-2); }
.ksec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 8px 24px; }
#kSections { padding-bottom: 14px; }

/* Toujours 2 rangées : titre + URL seuls sur la 1re (pleine largeur, jamais
   partagée avec les boutons), champs + Copier/Tester ensemble sur la 2e.
   Avant, le titre partageait sa ligne avec Copier/Tester et se faisait
   tronquer dès qu'il dépassait quelques mots, même sans champ actif. */
.arow {
  display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto;
  gap: 11px; row-gap: 8px; align-items: center;
  padding: 9px 12px; background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-left: 3px solid var(--acc);
  /* Hauteur FIXE (pas juste min-height) et identique sur toutes les cartes :
     un min-height ne suffit pas, une carte avec champ dépasse largement les
     cartes simples et casse l'alignement entre colonnes. 104px couvre le
     pire cas avec une marge ; les cartes plus simples ont un peu d'espace
     vide en bas, c'est le compromis accepté pour un alignement parfait
     partout. */
  height: 104px;
}
.arow .ken { width: 15px; height: 15px; accent-color: var(--acc); cursor: pointer; align-self: center; }
.arow .kt { min-width: 0; grid-row: 1; grid-column: 2; }
.a-name {
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.a-name.malus { color: #ff9d5c; }
.a-desc {
  font-size: 11.5px; color: var(--txt-dim); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* justify-content: space-between ne suffit pas quand kr-fields est absent
   (carte sans champ) : avec un seul enfant flex, space-between le colle à
   gauche au lieu de le laisser à droite. margin-left: auto sur kr-btns
   garantit qu'il reste collé à droite dans tous les cas, avec ou sans champ. */
.arow .kr { grid-row: 2; grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.arow .kr-btns { margin-left: auto; }
.kr-fields { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kr-btns { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pfield { display: flex; align-items: center; gap: 6px; }
.pfield .pl { font-size: 11.5px; letter-spacing: .01em; color: var(--txt-dim); }
.a-param { width: 52px; height: 36px; text-align: center; padding: 4px; font-size: 12px;
  background: #000; border: 1px solid var(--line-2); color: var(--txt); font-family: inherit; }
.a-param:focus { outline: 0; border-color: var(--acc); }
.a-param-wide { width: 90px; }
.a-color {
  width: 30px; height: 30px; padding: 2px; background: #000;
  border: 1px solid var(--line-2); cursor: pointer;
}
.a-color:disabled { opacity: .4; cursor: not-allowed; }
.cap {
  min-width: 76px; height: 36px; padding: 0 14px;
  background: linear-gradient(180deg, #20202a, #101014);
  border: 1px solid var(--line-2); border-bottom: 3px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  color: var(--acc-2); font-family: "Agency FB", "Oswald", sans-serif; text-transform: uppercase;
  letter-spacing: .03em; font-size: 14px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
}
.cap:hover { border-color: var(--acc); }
.cap.empty { color: #5c5c66; font-weight: 600; font-size: 11px; font-family: "Segoe UI", sans-serif;
  text-transform: none; letter-spacing: 0; border-style: dashed; border-bottom-width: 1px; }
.cap.capturing { color: var(--acc); border-color: var(--acc); animation: capblink 1s steps(2) infinite; }
@keyframes capblink { 50% { opacity: .4; } }

.arow.off { border-left-color: #33333b; }
.arow.off .kt, .arow.off .kr { opacity: .38; }
.arow.off .cap { pointer-events: none; }

.krecap { border: 1px solid var(--line); background: var(--panel); margin: 16px 0 10px; }
.krecap summary { padding: 11px 16px; cursor: pointer; font-size: 12px; color: var(--txt-dim); list-style: none; }
.krecap summary::-webkit-details-marker { display: none; }
.krecap summary::before { content: "▸ "; color: var(--acc); }
.krecap[open] summary::before { content: "▾ "; }
.recap { background: #000; border-top: 1px solid var(--line); padding: 10px 14px; font-family: Consolas, monospace; font-size: 12px; color: #c7ccd4; max-height: 220px; overflow: auto; columns: 3; column-gap: 22px; }
.recap div { padding: 2px 0; break-inside: avoid; }
.recap .k { color: var(--acc-2); }
.recap .empty { color: #5c5c66; }

.kfoot {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
/* .kfoot compte sur 2 enfants flex (label HUD à gauche, .kbtns à droite) pour
   que justify-content:space-between les écarte. Pour Market, le label HUD
   est masqué (hidden) : il ne reste alors qu'un seul enfant visible, qui se
   cale à son point de départ naturel (gauche) au lieu de rester à droite.
   margin-left:auto sur .kbtns le pousse à droite peu importe le nombre
   d'enfants visibles à côté de lui. */
.kfoot .kbtns { margin-left: auto; }
.kfoot label { font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
.kfoot label input { width: 15px; height: 15px; accent-color: var(--acc); }
.kbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.kfoot #keysMsg { flex-basis: 100%; text-align: right; margin: 6px 0 0; min-height: 0; }
.kfoot #keysMsg:empty { display: none; }
#btnWriteCfg.done { background: var(--ok); border-color: var(--ok); color: #0d1a05; animation: none; }
#btnWriteCfg.dirty::before { content: "● "; }
#btnWriteCfg.dirty { animation: dirtyPulse 1.6s ease-in-out infinite; }
@keyframes dirtyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,26,.55); }
  55% { box-shadow: 0 0 0 5px rgba(255,122,26,0); }
}

@media (max-width: 760px) { .ksec-grid { grid-template-columns: 1fr; } .recap { columns: 1; } }

/* ==========================================================================
   Onglet Presets
   ========================================================================== */
.psync {
  margin: 12px 0 0; font-family: Consolas, monospace; font-size: 11px;
  color: var(--txt-dim); display: flex; align-items: center; gap: 8px;
}
.psync::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 6px var(--ok); flex-shrink: 0;
}
.psync b { color: var(--acc-2); font-family: inherit; }

/* --- cartes outils (Tikfinity / TIK360) --- */
.preset-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 4px;
}
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); clip-path: var(--notch);
  padding: 16px 16px 14px;
}
.pcard-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pcard-badge {
  flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center;
  font-family: "Agency FB", "Oswald", sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: .04em; color: #000; background: var(--acc);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.pcard-logo {
  flex-shrink: 0; width: 40px; height: 40px; object-fit: contain;
  background: #fff; padding: 3px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.pcard-name {
  font-family: "Agency FB", "Oswald", sans-serif; text-transform: uppercase;
  letter-spacing: .06em; font-size: 15px; color: var(--txt);
}
.pcard-tag { font-size: 11px; color: var(--txt-dim); margin-top: 1px; }
.pcard-body { display: flex; flex-direction: column; gap: 10px; }
.pcard-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pcard-file code {
  font-family: Consolas, monospace; font-size: 12px; color: var(--acc-2);
  background: #000; border: 1px solid var(--line); padding: 8px 11px;
  overflow-wrap: anywhere; flex: 1; min-width: 0;
}
.pcard-file .keybox { letter-spacing: .08em; font-weight: 700; user-select: text; text-align: center; }
.pcard-meta { font-family: Consolas, monospace; font-size: 10.5px; color: var(--txt-dim); }
.pcard-cta { width: 100%; justify-content: center; }
.pcard-steps {
  list-style: none; counter-reset: s; margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px;
}
.pcard-steps li {
  counter-increment: s; position: relative; padding-left: 24px;
  font-size: 11.5px; color: var(--txt-dim); line-height: 1.5;
}
.pcard-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; display: grid; place-items: center;
  font-family: Consolas, monospace; font-size: 10px; font-weight: 700;
  color: var(--acc-2); border: 1px solid var(--acc-deep);
}
.pcard-steps b { color: var(--txt); }

@media (max-width: 760px) { .preset-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Onglet Guide
   ========================================================================== */
#tab-guide { max-width: 1120px; }
.guide-banner {
  margin: 0 0 22px; border: 1px solid var(--line-2); clip-path: var(--notch);
  overflow: hidden; background: #000; line-height: 0;
}
.guide-banner img { display: block; width: 100%; height: auto; }
a.lnk { color: var(--acc-2); text-decoration: none; border-bottom: 1px dotted var(--acc-deep); cursor: pointer; }
a.lnk:hover { color: var(--acc); }

.thero p { color: var(--txt-dim); font-size: 13px; max-width: 780px; }
.tmeta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tmeta span {
  font-size: 11.5px; font-weight: 700; padding: 5px 11px; background: #000;
  border: 1px solid var(--line-2); color: var(--txt-dim); clip-path: var(--notch);
}
.tmeta span b { color: var(--acc-2); }

.chk-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.chk-list li {
  position: relative; padding: 10px 12px 10px 38px; background: var(--panel); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--txt-dim); line-height: 1.5;
}
.chk-list li::before {
  content: ""; position: absolute; left: 12px; top: 11px; width: 15px; height: 15px;
  border: 1px solid var(--acc); background: rgba(255,122,26,.14);
}
.chk-list b { color: var(--txt); }

.tsteps { display: flex; flex-direction: column; gap: 14px; }
.tstep {
  display: grid; grid-template-columns: 52px 1fr;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); clip-path: var(--notch);
}
.tstep-num {
  display: flex; align-items: flex-start; justify-content: center; padding-top: 16px;
  background: rgba(255,122,26,.07); border-right: 1px solid var(--line);
  font-size: 20px; font-weight: 800; color: var(--acc-2);
}
.tstep-body { padding: 15px 17px 16px; }
.tstep-body h3 {
  font-size: 15px; color: var(--txt); text-transform: uppercase; letter-spacing: .05em;
  font-family: "Agency FB", "Oswald", sans-serif; margin-bottom: 7px;
}
.tstep-body p { font-size: 12.5px; color: var(--txt-dim); margin: 5px 0; line-height: 1.55; }
.tstep-body ul { margin: 6px 0 4px 18px; font-size: 12.5px; color: var(--txt-dim); line-height: 1.6; }

.shot { margin-top: 11px; border: 1px solid var(--line); background: #000; }
.shot img { display: block; width: 100%; height: auto; background: #0c0c0f; cursor: zoom-in; }
.shot-cap {
  padding: 6px 10px; font-family: Consolas, monospace; font-size: 10.5px; color: var(--txt-dim);
  background: #000; border-top: 1px dashed var(--line-2);
}
.shot-cap b { color: var(--acc-2); }

.callout { margin-top: 11px; padding: 10px 13px; font-size: 12px; line-height: 1.5; border-left: 3px solid var(--acc); }
.callout.warn { background: rgba(229,72,77,.09); border-left-color: var(--danger); color: #f0c0c1; }
.callout.info { background: rgba(255,122,26,.08); border-left-color: var(--acc); color: #e7cdb4; }
.callout b { color: #fff; }

/* lightbox (agrandir une capture) */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(4,4,5,.92);
  display: flex; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border: 1px solid var(--line-2); }

/* ==========================================================================
   Écran de sélection de jeu
   ========================================================================== */
.gscreen {
  flex: 1; overflow-y: auto; padding: 30px; display: flex; align-items: flex-start; justify-content: center;
  background:
    radial-gradient(55% 45% at 15% 0%, color-mix(in srgb, var(--gc) 16%, transparent), transparent 60%),
    radial-gradient(45% 40% at 90% 100%, rgba(124,92,255,.10), transparent 60%),
    var(--bg);
}

/* ---------- Nouvel écran de sélection : sidebar catégories + grille ---------- */
.gsel-frame {
  position: relative; max-width: 1180px; width: 100%; margin: auto;
  display: grid; grid-template-columns: 240px 1fr;
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--panel);
  border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
}

.gsel-side {
  padding: 24px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%);
  border-right: 1px solid var(--line);
}
.gsel-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 24px; }
.gsel-brand-mark {
  width: 30px; height: 30px; border-radius: 9px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.gsel-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.gsel-brand-name {
  font-family: "Agency FB", "Oswald", sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .02em; color: var(--txt);
}
.gsel-side-title {
  font-family: "Agency FB", "Oswald", sans-serif; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--txt-dim); padding: 0 10px 12px;
}
.gsel-cat {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border-radius: 12px;
  font: 13.5px/1 "Segoe UI", sans-serif; font-weight: 500; color: var(--txt-dim); cursor: pointer; margin-bottom: 3px;
  background: none; border: none; text-align: left; transition: background .15s, color .15s;
}
.gsel-cat:hover { background: rgba(255,255,255,.04); color: var(--txt); }
.gsel-cat.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 20%, transparent), color-mix(in srgb, var(--gc) 8%, transparent));
  color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 35%, transparent);
}
.gsel-swatch {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.gsel-swatch-cod { background: linear-gradient(135deg, #ff7a1a, #ffb37a); }
.gsel-swatch-sim { background: linear-gradient(135deg, #f4c300, #ffe27a); }
.gsel-swatch-mc { background: linear-gradient(135deg, #ff4b3a, #ffa08a); }
.gsel-cat-count { margin-left: auto; font-size: 11px; color: var(--txt-dim); }
.gsel-cat.active .gsel-cat-count { color: var(--acc-2); }

.gsel-main { padding: 26px 30px; min-width: 0; }
.gsel-main-head { margin-bottom: 22px; }
.gsel-main-head h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.005em; }
.gsel-main-head p { color: var(--txt-dim); font-size: 13px; }
.gsel-main-head b { color: var(--acc-2); }

.gsel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.gcard {
  --gc: var(--acc); --gc-dim: var(--acc-deep);
  position: relative; display: flex; gap: 14px; align-items: center;
  padding: 12px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform .18s, border-color .18s;
}
.gcard::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .2s; pointer-events: none;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gc) 22%, transparent), transparent 60%);
}
.gcard:hover { transform: translateY(-2px); border-color: var(--line-2); }
.gcard:hover::before { opacity: 1; }
.gcard.disabled { cursor: default; opacity: .5; }
.gcard.disabled:hover { transform: none; border-color: var(--line); }
.gcard.disabled:hover::before { opacity: 0; }

.gc-thumb {
  position: relative; width: 62px; height: 62px; border-radius: 13px; flex-shrink: 0;
  background-color: var(--gc-dim);
  background-image: linear-gradient(150deg, var(--gc), var(--gc-dim));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--gc) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.15);
  forced-color-adjust: none;
}
/* logos réels par jeu : image posée par-dessus le dégradé (::after, pas
   background-image sur .gc-thumb) pour ne jamais dépendre de l'ordre de
   déclaration CSS entre .gc-thumb et .gc-art-logo-*. Couvre tout le cadre
   (pas de marge) pour que le dégradé de fond ne dépasse jamais autour —
   les logos ont déjà leur propre fond plein (pas de transparence à percer). */
.gc-thumb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.gc-art-logo::after      { background-image: url("assets/logo.png"); }
.gc-art-logo-bo1::after  { background-image: url("assets/logo-bo1.png"); }
.gc-art-logo-waw::after  { background-image: url("assets/logo-waw.png"); }
.gc-art-logo-market::after { background-image: url("assets/logo-market.png"); }
.gc-art-logo-tcg::after { background-image: url("assets/logo-tcg.png"); }
/* logo CT en 3:2 (pas carré) : même image en cover derrière pour remplir le
   cadre, et en contain par-dessus pour que le titre ne soit jamais rogné. */
.gc-art-logo-ct::after {
  background-image: url("assets/logo-ct.webp"), url("assets/logo-ct.webp");
  background-size: contain, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* visuel TLOU2 carré avec le titre en bas : en cadre large, « cover » rognait le titre. Même méthode que CT :
   image entière (contain) par-dessus la même image en cover, pour que le titre ne soit jamais coupé. */
.gc-art-logo-tlou2::after {
  background-image: url("assets/logo-tlou2.webp"), url("assets/logo-tlou2.webp");
  background-size: contain, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat, no-repeat;
}
.gc-emblem {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Agency FB", "Oswald", sans-serif; font-weight: 800; font-size: 20px; color: rgba(255,255,255,.9);
}

.gc-info { position: relative; flex: 1; min-width: 0; }
.gc-info h3 { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; color: var(--txt); }
.gc-desc {
  font-size: 11.5px; color: var(--txt-dim); line-height: 1.4; margin-bottom: 7px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gc-status {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600;
  color: var(--ok); text-transform: uppercase; letter-spacing: .04em;
}
.gc-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.gc-status.later { color: #6a707b; }
.gc-status.later::before { box-shadow: none; }

.gc-play {
  position: relative; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(160deg, #fff, #d8d8e0); color: #0c0c11;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); transition: transform .15s;
}
.gcard:hover .gc-play { transform: scale(1.08); }
.gcard.disabled .gc-play { background: linear-gradient(160deg, var(--line-2), var(--line)); color: var(--txt-dim); }

.gs-foot { margin-top: 22px; text-align: center; font-size: 11px; color: #5a606b; }
.gs-foot b { color: var(--txt-dim); }

.rf-change { width: 100%; margin-bottom: 10px; font-size: 10.5px; }

/* ==========================================================================
   Écran de licence (activation par jeu, GameFinds)
   ========================================================================== */
.lframe { max-width: 440px; text-align: center; padding: 40px 36px 34px; }
.l-logo { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 16px; display: block; }
.l-sub {
  font-family: "Agency FB", "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em;
  font-size: 13px; color: var(--acc-2); margin-bottom: 10px;
}
.l-hint { font-size: 12.5px; color: var(--txt-dim); line-height: 1.5; margin-bottom: 18px; }
.license-input {
  width: 100%; text-align: center; text-transform: uppercase; letter-spacing: .08em;
  font-family: Consolas, monospace; font-size: 14px; color: var(--txt);
  background: #000; border: 1px solid var(--line-2); padding: 11px 12px; margin-bottom: 8px;
}
.license-input:focus { outline: 0; border-color: var(--acc); }
.license-error { min-height: 16px; font-size: 12px; color: #ff8b8d; margin-bottom: 14px; }
.license-error.ok { color: var(--ok); }
.l-row { display: flex; gap: 10px; }
.l-row .btn { flex: 1; justify-content: center; }
#crashBox.crash-alert { border: 1px solid #e8a33d; background: rgba(232, 163, 61, .08); padding: 10px 12px; }
#crashBox.crash-alert .statline span { color: #e8a33d; }