/* Duel d'époques : jeton tenu en main, bornes illustrées. Après ../shared/labo.css (non modifiée).
   Mouvement : transform et opacity seulement ; la physique du jeton est dans game.js. */

/* la scène ne sert plus de curseur de défilement : on attrape un objet */
.ep-stage{ cursor:default; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.ep-stage.is-holding{ cursor:grabbing; }
/* la poignée du moteur reste pour le clavier (flèches, Entrée), invisible ; le jeton la remplace */
.ep-stage .handle{ pointer-events:none; opacity:0; }
.ep-stage .handle:focus-visible{ opacity:1; }
.ep-stage .handle:focus-visible::before{ background:transparent; box-shadow:0 0 0 2px var(--fg); }
.ep-stage .handle:focus-visible .ico{ display:none; }
/* une seule bulle : celle du jeton */
.bulle:not(.bulle--ep){ display:none !important; }

/* bornes : image dans un disque, sous chaque bout de la frise */
.ep-anchor{ position:absolute; left:0; top:0; width:var(--s, 56px); height:var(--s, 56px); pointer-events:none; will-change:transform; }
.ep-anchor__disc{ position:absolute; inset:0; border-radius:50%; overflow:hidden; background:var(--raised-3); box-shadow:0 0 0 1px var(--line-2), 0 4px 12px rgba(0,0,0,.4); }
.ep-anchor__disc img{ width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; user-select:none; }
.ep-anchor.is-cut .ep-anchor__disc{ background:radial-gradient(circle at 50% 35%, #3a3a3a, #1e1e1e 70%); }
.ep-anchor.is-cut .ep-anchor__disc img{ object-fit:contain; padding:5px; }

/* socle : la place du jeton tant qu'il est en main */
.ep-tray{ position:absolute; left:0; top:0; width:var(--s, 80px); height:var(--s, 80px); pointer-events:none; transition:opacity .2s ease; }
/* en main (11 nov. 2026) : plus de cercle ; le nom est écrit au-dessus du jeton qui flotte */
.ep-tray{ z-index:4; }
.ep-tray__ring{ display:none; }
.ep-tray__name{ position:absolute; left:50%; bottom:calc(100% + 16px); transform:translateX(-50%); white-space:nowrap; font-size:13px; font-weight:600; color:var(--fg); letter-spacing:-.01em;
  padding:3px 9px; border-radius:var(--r-pill); background:rgba(10,10,10,.72); transition:opacity .2s ease; }
.ep-stage.is-holding .ep-tray__name{ opacity:0; }
.ep-stage.is-placed .ep-tray__name{ opacity:0; }
.ep-stage.is-reveal .ep-tray{ opacity:0; }

/* ombre portée au sol */
.ep-shadow{ position:absolute; left:0; top:0; width:100px; height:12px; border-radius:50%; transform-origin:0 50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); pointer-events:none; will-change:transform, opacity; }

/* le jeton : trois couches (position, rotation au point de prise en haut, écrasement depuis le bas) */
.tk{ position:absolute; left:0; top:0; width:var(--tk, 80px); height:var(--tk, 80px); pointer-events:none; z-index:3; will-change:transform; }
.tk__rot{ position:absolute; inset:0; transform-origin:50% 0; will-change:transform; }
.tk__sq{ position:absolute; inset:0; transform-origin:50% 100%; will-change:transform; }
.tk__disc{ position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--u) 38%, #2a2a2a), #191919 72%);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--u) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.18); }
.tk__img{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; }
/* détouré : le sujet sort du disque par le haut (effet médaille) */
.tk.is-cut .tk__img{ border-radius:0 0 50% 50% / 0 0 50% 50%; object-fit:contain; object-position:50% 100%; height:118%; top:-18%; padding:0 6%; }
.tk.is-cut.is-wide .tk__img{ border-radius:0; width:128%; left:-14%; height:100%; top:2%; padding:0; object-position:50% 50%; }
.ep-stage.is-holding .tk__disc{ box-shadow:0 0 0 2px var(--u), inset 0 1px 0 rgba(255,255,255,.22); }

/* « Valider » tant que le jeton est en main : présent mais éteint (le clic secoue le jeton et redit la consigne) */
.cta.ep-off{ background:var(--raised-3); color:var(--fg-3); }
.ep-none{ font-size:.42em; color:var(--fg-3); letter-spacing:-.01em; }

@media (prefers-reduced-motion: reduce){
  .ep-tray{ transition:none; }
}

/* comparatif : « il y a N ans » sous la date */
.compare dd .ep-ago, .ep-ago{ display:block !important; margin-top:4px; font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--fg-2); }

/* souris (10 nov. 2026) : main ouverte au survol du jeton, main fermée pendant la prise ; ailleurs, viser la frise */
@media (hover:hover) and (pointer:fine){
  .ep-stage{ cursor:pointer; }
  .ep-stage.is-hover-tk{ cursor:grab; }
  .ep-stage.is-holding, .ep-stage.is-holding *{ cursor:grabbing; }
  .ep-stage.is-hover-tk .tk__disc{ box-shadow:0 0 0 2px var(--u), 0 0 0 7px color-mix(in srgb, var(--u) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.22); }
  .ep-stage.is-reveal{ cursor:default; }
}
/* grand écran : jeton, bornes et libellés un cran plus grands (la taille est posée en JS d'après la scène) */
@media (min-width:1280px){ .ep-tray__name{ font-size:15px; } }

/* ---------- gelée (11 nov. 2026, demande d'Hugues) ----------
   Le jeton devient une bulle de gelée : disque translucide teinté de la couleur du jeu, reflets, lueur au bord ;
   il s'étire dans le sens du mouvement (couche .tk__jel, centrée) et éclate en gouttes à l'impact (toile .ep-splat). */
.tk__jel{ position:absolute; inset:0; transform-origin:50% 50%; will-change:transform; }
.tk__disc{
  background:
    radial-gradient(120% 90% at 50% 105%, color-mix(in srgb, var(--u) 70%, transparent), transparent 60%),
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--u) 45%, #ffffff10), color-mix(in srgb, var(--u) 22%, #141414) 75%);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--u) 85%, white 10%), 0 0 18px color-mix(in srgb, var(--u) 45%, transparent),
    inset 0 -10px 18px color-mix(in srgb, var(--u) 55%, transparent), inset 0 2px 0 rgba(255,255,255,.35); }
.tk__img{ filter:saturate(1.1) contrast(1.02); }
/* le vernis : un reflet en haut à gauche, une lueur en bas, un liseré clair, par-dessus l'image */
.tk__gloss{ position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(38% 26% at 34% 24%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    radial-gradient(14% 9% at 70% 72%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%),
    radial-gradient(70% 60% at 50% 120%, color-mix(in srgb, var(--u) 50%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%, color-mix(in srgb, var(--u) 25%, transparent));
  mix-blend-mode:screen; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28), inset 0 -6px 14px color-mix(in srgb, var(--u) 40%, transparent); }
.tk.is-cut .tk__gloss{ inset:0; }
.ep-splat{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
@media (prefers-reduced-motion: reduce){ .ep-splat{ display:none; } }

/* ---------- 15 nov. 2026 (Hugues : « enlève le rond, mets juste l'image en entier, plein pied ») ----------
   Plus de disque ni de vernis de gelée : on tient l'image elle-même. Détourée : le sujet entier, debout sur la frise.
   Photo (Wright, Gutenberg, Tenochtitlan) : la photo entière en carte arrondie. La gelée et les gouttes sont retirées. */
.tk__disc, .tk__gloss, .ep-splat{ display:none !important; }
.tk__img, .tk.is-cut .tk__img, .tk.is-cut.is-wide .tk__img{ border-radius:0; padding:0; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.tk.is-cut .tk__img{ left:-15%; width:130%; top:-40%; height:140%; object-fit:contain; object-position:50% 100%; }
.tk.is-cut.is-wide .tk__img{ left:-35%; width:170%; top:-10%; height:110%; object-position:50% 100%; }
.tk:not(.is-cut) .tk__img{ left:-15%; width:130%; top:2%; height:98%; object-fit:cover; border-radius:12px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--u) 80%, transparent), 0 8px 16px rgba(0,0,0,.45); filter:none; }
.ep-stage.is-holding .tk.is-cut .tk__img{ filter:drop-shadow(0 0 0 var(--u)) drop-shadow(0 14px 16px rgba(0,0,0,.55)); }
@media (hover:hover) and (pointer:fine){ .ep-stage.is-hover-tk .tk.is-cut .tk__img{ filter:drop-shadow(0 0 6px color-mix(in srgb, var(--u) 60%, transparent)) drop-shadow(0 6px 10px rgba(0,0,0,.5)); } }