*{box-sizing:border-box;}
[hidden]{ display:none !important; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  height:100%;
}
#app{ display:flex; flex-direction:column; height:100vh; }

h1{
  font-size:14px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--text-dim); font-weight:600; margin:0; white-space:nowrap;
}
.accent-mark{ color:var(--accent); }

.btn{
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  padding:9px 18px; border-radius:var(--radius-pill); font-size:13px; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s, box-shadow .2s; letter-spacing:0.02em; white-space:nowrap;
  text-decoration:none; display:inline-block;
}
.btn.primary{ border-color:var(--accent-dim); color:var(--accent); }
.btn:disabled{ opacity:0.4; cursor:default; }
.btn:focus-visible, .card:focus-visible, .category-card:focus-visible,
.podium-card:focus-visible, .rank-row:focus-visible{
  outline:none; box-shadow:var(--focus-ring);
}

/* --- Shortcuts modal --- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
.modal-box{
  position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px 28px; max-width:360px; width:90%; box-shadow:var(--shadow-lg);
}
.modal-close{
  position:absolute; top:10px; right:10px; background:none; border:none; color:var(--text-dim);
  font-size:16px; cursor:pointer; line-height:1; padding:4px;
}
.modal-title{ font-size:15px; margin:0 0 16px; color:var(--text); letter-spacing:0.02em; }
.shortcut-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:13px; color:var(--text-dim); }
.key{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg); color:var(--accent); font-size:16px; flex-shrink:0;
}
.modal-box .btn{ margin-top:8px; width:100%; text-align:center; }
.confirm-message{ font-size:14px; line-height:1.6; color:var(--text); margin:0 0 20px; }
.confirm-actions{ display:flex; gap:10px; justify-content:flex-end; }
.confirm-actions .btn{ width:auto; margin-top:0; }

/* --- Loading screen --- */
#loading-screen{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:20px; color:var(--text-dim); font-size:13px;
}

/* --- Top bar --- */
/* Grille à 3 zones : logo+marque à gauche, titre de page centré (toujours centré, même
   si une des deux autres zones est vide ou de largeur différente), boutons à droite. */
#topbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--bg); flex-shrink:0;
  position:sticky; top:0; z-index:30; background:var(--bg); box-shadow:var(--shadow-sm);
}
#topbar .brand{
  display:flex; align-items:center; gap:8px; justify-self:start;
  text-decoration:none; color:inherit; min-width:0;
}
#topbar .brand-logo{ width:24px; height:auto; color:var(--text-dim); flex-shrink:0; transition:color .15s; }
#topbar .page-title{
  font-size:14px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim);
  font-weight:600; text-align:center; white-space:nowrap;
}
#topbar-buttons{ display:flex; gap:8px; flex-wrap:wrap; justify-self:end; }
#stats{ color:var(--text-dim); font-size:12px; letter-spacing:0.03em; white-space:nowrap; }
#stats b{ color:var(--text); font-weight:600; }

/* --- Instructions panel --- */
#instructions-panel{
  position:absolute; top:56px; left:18px; right:18px; max-width:560px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 40px 16px 18px; font-size:13px; line-height:1.7; color:var(--text-dim); z-index:20;
  box-shadow:var(--shadow-md);
}
#instructions-panel b{ color:var(--text); }
#instructions-panel p{ margin:0 0 10px; }
#instructions-panel p:last-child{ margin-bottom:0; }

/* --- Three columns --- */
#main-columns{
  flex:1; display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr auto; gap:0;
  min-height:0;
}
.column{
  overflow-y:auto; padding:20px; display:flex; flex-direction:column; align-items:center;
  min-height:0;
}
.column.col-left{ grid-column:1; grid-row:1; border-right:1px solid var(--bg); }
.column.col-middle{ grid-column:2; grid-row:1; border-right:1px solid var(--bg); }
.column.col-right{ grid-column:3; grid-row: 1 / 3; align-items:stretch; }

/* Jeu Années : pas de classement, donc pas de 3e colonne — deux colonnes suffisent,
   col-left/col-middle + #comparison-controls (déjà en grid-column:1/3) s'alignent
   sans rien changer d'autre. */
#main-columns.no-ranking{ grid-template-columns:1fr 1fr; }
/* Sans la 3e colonne, chaque carte dispose de bien plus de largeur — mais l'image
   restait limitée par sa hauteur (max-height, pourcentage de la carte, inchangée) :
   elle paraissait perdue au milieu d'un grand espace vide. Agrandie en conséquence. */
#main-columns.no-ranking .card img{ max-height:75%; }

/* --- Comparison controls (sous les cartes) --- */
#comparison-controls{
  grid-column: 1 / 3; grid-row:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 16px 14px; border-top:1px solid var(--bg);
}
#comparison-controls .controls-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.page-footer{
  font-size:11px; color:var(--text-dim); letter-spacing:0.02em; white-space:nowrap;
  max-width:100%; overflow-x:auto; text-align:center; opacity:0.6;
}

/* --- Poster card --- */
.card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%; height:100%; min-height:0; cursor:pointer; padding:24px; border-radius:var(--radius-lg);
  border:1px solid var(--select-border); transition:border-color .2s, background .2s, transform .1s, box-shadow .2s;
}
.card .btn-lock{
  position:absolute; top:10px; right:10px; z-index:1;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--border); color:var(--text-dim);
  border-radius:9px; font-size:16px; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.card .btn-lock.active{ border-color:var(--accent); color:var(--accent); background:rgba(212,165,61,0.12); }
.card:active{ transform:scale(0.99); }
.card.winner-flash{ border-width:2px; border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,165,61,0.35), var(--shadow-lg); }
.card img{
  max-width:100%; max-height:60%; object-fit:contain; border-radius:8px; background:#050505;
}
.card .title{
  font-size:18px; text-align:center; color:var(--text); font-weight:400;
}
.card .meta{
  font-size:11px; color:var(--text-dim); letter-spacing:0.03em;
}
.card .btn-not-seen{
  margin-top:6px; font-size:15px; padding:8px 20px; border-radius:8px;
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  cursor:pointer; transition:border-color .15s, color .15s; letter-spacing:0.02em;
}
.card .choose-hint{
  margin-top:auto; padding-top:6px; font-size:13px; color:var(--text-dim);
  letter-spacing:0.02em; opacity:0.55;
}

.empty-msg{ color:var(--text-dim); font-size:13px; text-align:center; }

/* --- Ranking / history column --- */
#ranking-header, #history-header, #global-history-header{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
  color:var(--text-dim); font-size:12px;
}
#history-header .title, #global-history-header .title{ color:var(--text); font-size:14px; }
#ranking-list, #history-list, #global-history-list{ display:flex; flex-direction:column; gap:6px; }

/* --- Top 3 podium (cartes alignées) --- */
.podium-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:10px; }
.podium-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--row-bg-top); border:1px solid rgba(212,165,61,0.3);
  border-radius:var(--radius-md); padding:12px 8px; cursor:pointer;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.podium-card .thumb-lg{ width:100%; max-width:120px; aspect-ratio:2/3; object-fit:cover; border-radius:7px; background:#000; }
.podium-card .title-row{ display:flex; align-items:baseline; gap:5px; justify-content:center; text-align:center; }
.podium-card .pos{ font-size:11px; color:var(--accent); letter-spacing:0.03em; flex-shrink:0; }
.podium-card .name{ font-size:12px; color:var(--text); word-break:break-word; }
.podium-card .sub{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text); }
.podium-card .sub .count{ font-size:10px; color:var(--text-dim); }

.rank-row{
  display:flex; align-items:center; gap:10px;
  background:var(--row-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:7px 10px; cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s;
}
.rank-row.top-10{ border:1px solid rgba(212,165,61,0.3); background:var(--row-bg-top); }
.rank-row.not-seen{ opacity:0.55; }
.rank-row .trophy{ width:20px; text-align:center; font-size:14px; flex-shrink:0; }
.tag-not-seen{
  font-size:10px; color:var(--text-dim); border:1px solid var(--border); border-radius:4px;
  padding:1px 5px; margin-left:6px; letter-spacing:0.02em; vertical-align:middle; white-space:nowrap;
}
.rank-row .pos{
  width:22px; text-align:right; color:var(--accent); font-size:12px; font-variant-numeric:tabular-nums;
}
.rank-row .thumb, .hist-row .thumb, .global-hist-row .thumb{
  width:38px; height:38px; object-fit:cover; border-radius:5px; background:#000; flex-shrink:0;
}
.rank-row .name, .hist-row .name{ flex:1; font-size:12px; color:var(--text); word-break:break-word; }
.rank-row .elo{
  font-size:12px; color:var(--text); font-variant-numeric:tabular-nums; width:46px; text-align:right;
}
.rank-row .count{ font-size:10px; color:var(--text-dim); width:56px; text-align:right; }

.hist-row{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:7px 10px;
}
.hist-row .result{ width:60px; font-size:11px; font-weight:600; letter-spacing:0.03em; }
.hist-row .result.win{ color:var(--win); }
.hist-row .result.lose{ color:var(--lose); }
.hist-row .date{ font-size:10px; color:var(--text-dim); width:100px; text-align:right; }
.hist-row .del{
  background:none; border:1px solid var(--border); color:var(--text-dim);
  width:22px; height:22px; border-radius:6px; cursor:pointer; font-size:12px; line-height:1; flex-shrink:0;
}
#no-history, #no-global-history{ color:var(--text-dim); font-size:13px; text-align:center; margin-top:10px; }

.global-hist-row{
  display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:7px 10px;
}
.global-hist-row .side{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.global-hist-row .side.loser{ opacity:0.55; }
.global-hist-row .side .name{ font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-hist-row .vs{ font-size:14px; font-weight:600; color:var(--accent); flex-shrink:0; }
.global-hist-row .date{ font-size:10px; color:var(--text-dim); width:90px; text-align:right; flex-shrink:0; }

input[type=file]{ display:none; }

/* --- Jeu "Années" (jeu-annee-films.html / jeu-annee-series.html) --- */
.game-year-card .year-reveal{
  /* Hauteur toujours réservée (même invisible) pour ne jamais faire bouger le reste de
     la carte (notamment l'image) au moment de la révélation — seule l'opacité change. */
  height:28px; font-size:22px; font-weight:600; color:var(--accent); letter-spacing:0.03em;
  opacity:0; transition:opacity .25s;
}
.game-year-card .year-reveal.visible{ opacity:1; }
#score-hud{ font-size:14px; color:var(--text); text-align:center; }
#score-hud b{ color:var(--accent); }
.result-banner{
  /* Toujours dans le flux (padding/bordure constants), seule l'opacité change — sinon
     son apparition fait varier la hauteur de la ligne "auto" de la grille #main-columns
     et rétrécit la ligne des cartes juste au-dessus (bug de "shrink" au moment du choix). */
  text-align:center; font-size:14px; font-weight:600; padding:8px 14px; border-radius:8px;
  border:1px solid transparent; opacity:0; transition:opacity .2s;
}
.result-banner.visible{ opacity:1; }
.result-banner.win{ color:var(--win); border-color:var(--win); background:rgba(111,174,127,0.08); }
.result-banner.loss{ color:var(--lose); border-color:var(--lose); background:rgba(179,80,63,0.08); }
.rank-row.no-click{ cursor:default; }
.podium-card.no-click{ cursor:default; }

/* Carrousel horizontal du classement (mobile uniquement, voir media query plus bas) —
   masqué par défaut en desktop où le podium + la liste verticale restent utilisés. */
#ranking-carousel{
  display:none;
  gap:8px; overflow-x:auto; padding-bottom:4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#ranking-carousel::-webkit-scrollbar{ display:none; }
#ranking-carousel .podium-card{ flex:0 0 76px; padding:6px 4px; gap:4px; }
#ranking-carousel .podium-card .thumb-lg{ max-width:100%; }
/* Position au-dessus du titre (pas côte à côte) : ordre voulu affiche → position → titre. */
#ranking-carousel .podium-card .title-row{ flex-direction:column; gap:2px; }
/* Carte compacte : affiche + position + titre (l'année est déjà incluse dans le titre
   recomposé par displayTitle) — pas la ligne de stats (icône/elo/matchs), pour garder
   une hauteur raisonnable. Titre tronqué à 2 lignes avec "…" s'il est trop long. */
#ranking-carousel .podium-card .sub{ display:none; }
/* Exception : le jeu Années n'a que le nombre de victoires comme statistique (pas
   d'elo/icône à masquer) — on le garde visible, juste le titre+année qu'on retire
   ailleurs (podium Elo). */
#ranking-carousel .podium-card .sub.sub-count{ display:flex; font-size:10px; }
#ranking-carousel .podium-card .name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; max-width:100%; font-size:10px; line-height:1.3;
}

/* Les styles :hover ne s'appliquent qu'aux pointeurs avec vrai survol (souris). Sur
   tactile, un appui suivi d'un glissement (ex: doigt qui traverse une carte puis un
   bouton) déclencherait sinon un état ":hover" qui reste "collé" indéfiniment, faute de
   vrai mouvement de survol à quitter pour le réinitialiser. */
@media (hover: hover) and (pointer: fine){
  .btn:hover{ border-color:var(--accent); color:var(--accent); }
  .btn.primary:hover{ background:var(--accent-gradient); color:#000; border-color:var(--accent); box-shadow:var(--shadow-sm); }
  .btn.danger:hover{ border-color:var(--danger); color:var(--danger); }
  .btn:disabled:hover{ border-color:var(--border); color:var(--text); }
  .modal-close:hover{ color:var(--text); }
  #topbar .brand:hover h1{ color:var(--accent); }
  #topbar .brand:hover .brand-logo{ color:var(--accent); }
  .card .btn-lock:hover{ border-color:var(--accent); color:var(--accent); }
  .card:hover{ border-width:2px; border-color:var(--accent-dim); background:var(--panel); box-shadow:var(--shadow-md); }
  .card:hover .title{ color:var(--accent); }
  .card .btn-not-seen:hover{ border-color:var(--danger); color:var(--danger); }
  .podium-card:hover{ border-color:var(--accent); box-shadow:var(--shadow-md); transform:scale(1.03); }
  .rank-row:hover{ border-color:var(--accent-dim); box-shadow:var(--shadow-sm); transform:translateX(2px); }
  .hist-row .del:hover{ border-color:var(--danger); color:var(--danger); }
  .rank-row.no-click:hover{ border-color:var(--border); box-shadow:none; transform:none; }
  .podium-card.no-click:hover{ border-color:rgba(212,165,61,0.3); box-shadow:none; transform:none; }
}

@media (max-width: 860px), (max-height: 500px) and (orientation: landscape){
  /* La deuxième condition couvre les mobiles en paysage (largeur souvent > 860px mais
     hauteur de viewport très réduite, ex. iPhone/Android ~400-430px de haut) : sans elle,
     le layout desktop s'appliquait avec height:100vh trop petit, et .card{height:100%} /
     .card img{max-height:60%} n'avaient plus assez de place, faisant déborder l'affiche. */

  /* Ordre voulu sur mobile, du haut vers le bas : classement en carrousel, puis les deux
     cartes de comparaison côte à côte (jamais empilées), puis les contrôles (Passer/
     Annuler, ou Instructions pour les pages de jeu). Des lignes de grille explicites
     évitent de dépendre de l'ordre du HTML. */
  #app{ height:auto; min-height:100vh; }
  #main-columns{
    flex:none; height:auto;
    grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto;
  }
  /* Plus de scroll interne nulle part sur mobile : la page défile normalement dans son
     ensemble (corrige l'ascenseur vertical disgracieux qui apparaissait dans la zone du
     classement). Seul le carrousel garde son propre défilement, horizontal. */
  .column{ overflow-y:visible; }
  .column.col-right{ grid-column:1 / 3; grid-row:1; border-right:none; border-bottom:1px solid var(--border); padding-bottom:14px; }
  /* Hauteur explicite (plutôt que "height:100%" hérité d'un ancêtre maintenant en
     hauteur automatique) : sans ça, .card{height:100%} et .card img{max-height:60%}
     n'ont plus rien à quoi se rapporter et l'image peut déborder de son cadre. */
  .column.col-left, .column.col-middle{
    grid-row:2; height:42vh; padding:10px 6px; border-bottom:none;
  }
  .column.col-left{ grid-column:1; border-right:1px solid var(--bg); }
  .column.col-middle{ grid-column:2; }
  #comparison-controls{ grid-column:1 / 3; grid-row:3; }

  /* Jeu Années : pas de classement ni de carrousel à afficher au-dessus — les cartes
     remontent directement en première ligne, les contrôles juste en dessous. */
  #main-columns.no-ranking{ grid-template-rows:auto auto; }
  #main-columns.no-ranking .column.col-left,
  #main-columns.no-ranking .column.col-middle{ grid-row:1; }
  #main-columns.no-ranking #comparison-controls{ grid-row:2; }

  /* Un seul carrousel remplace à la fois le podium et la liste complète : classement
     entier (1er à gauche, dernier à droite), pas de scrollbar visible. */
  #ranking-podium, #ranking-list{ display:none; }
  #ranking-carousel{ display:flex; }

  /* Logo seul dans la marque (pas le texte "Tu préfères ..."), légèrement agrandi. */
  #topbar .brand h1{ display:none; }
  #topbar .brand-logo{ width:32px; }

  /* Titre de page collé à gauche du logo (plus centré) : la grille 3 zones desktop
     devient un simple alignement horizontal, marque + titre groupés à gauche, boutons
     (ou rien) à droite — tout centré verticalement, aligné avec le widget de connexion/
     thème fixe (top:12px) grâce au même padding vertical sur #topbar. */
  #topbar{ display:flex; align-items:center; }
  #topbar .page-title{ text-align:left; margin-left:2px; }
  #topbar-buttons{ margin-left:auto; }

  /* Les deux nombres ("X films" / "Y comparaison(s)") l'un au-dessus de l'autre : côte à
     côte, ils mordent sur le bouton "Réinitialiser" à cette largeur. */
  #ranking-header{ align-items:flex-start; }
  #stats{ display:flex; flex-direction:column; gap:2px; white-space:normal; }
  #stats .stat-sep{ display:none; }

  /* Cartes plus compactes : moins de padding, textes réduits, plus d'indice "Choisir"
     (répète juste ce que montrent déjà les deux cartes côte à côte). */
  .card{ padding:10px; gap:6px; }
  .card .title{
    font-size:13px;
    /* Un titre trop long poussait l'affiche hors du cadre de la carte (hauteur fixe,
       voir plus haut) : tronqué à 2 lignes avec "…" pour ne jamais dépasser l'espace
       réservé, comme dans le carrousel du classement. */
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
  }
  .card .meta{ font-size:10px; }
  .card .choose-hint{ display:none; }

  /* Le cadenas mordait sur l'affiche (taille desktop trop grande pour une carte réduite). */
  .card .btn-lock{ width:24px; height:24px; font-size:12px; top:4px; right:4px; }

  /* "↑ Annuler" / "↓ Passer" : la flèche fait référence à un raccourci clavier qui n'a
     pas de sens sur un écran tactile — on garde juste le texte du bouton. */
  .btn-arrow{ display:none; }
}