/* BISTROT — écran de jeu. Tokens : voir DESIGN.md */

:root {
  --fond: oklch(16% 0.02 60);
  --bois-clair: oklch(42% 0.07 60);
  --bois: oklch(34% 0.06 55);
  --bois-sombre: oklch(26% 0.05 50);
  --carte: oklch(94% 0.015 85);
  --carte-bord: oklch(84% 0.025 80);
  --encre: oklch(28% 0.02 60);
  --rouge: oklch(55% 0.19 25);
  --laiton: oklch(76% 0.12 88);
  --ardoise: oklch(24% 0.012 250);
  --craie: oklch(92% 0.01 250);
  --jeton-vert: oklch(60% 0.14 150);
  --jeton-rouge: oklch(52% 0.17 25);
  --coeur-blanc: oklch(96% 0.01 90);
  --coeur-noir: oklch(22% 0.015 60);
  --coeur-jaune: oklch(83% 0.15 95);
  --coeur-bronze: oklch(64% 0.14 55);
  --or: oklch(76% 0.13 88);

  /* Couleurs joueurs partagées (piste de score + pastille du header) : Toi = laiton existant */
  --joueur-0: var(--laiton);
  --joueur-1: oklch(48% 0.14 20);
  --joueur-2: oklch(45% 0.09 155);
  --joueur-3: oklch(40% 0.08 260);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: oklch(82% 0.02 80);
  background-color: var(--fond);
  background-image:
    radial-gradient(120% 80% at 50% 112%, oklch(0% 0 0 / 0.5), transparent 60%),
    radial-gradient(140% 90% at 50% -10%, oklch(21% 0.035 65 / 0.9), transparent 55%),
    repeating-conic-gradient(oklch(100% 0 0 / 0.016) 0% 25%, transparent 0% 50%);
  background-size: auto, auto, 52px 52px;
  min-height: 100vh;
}

.salle {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 10px 178px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.salle-contenu { flex: 1; min-width: 0; }

/* ---- Enseigne & scores ---- */

.enseigne { padding: 16px 4px 6px; max-width: 520px; margin: 0 auto; }

.enseigne h1 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Didot", "Bodoni 72", Georgia, serif;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  color: var(--laiton);
  text-shadow: 0 1px 2px oklch(0% 0 0 / 0.6);
}
.enseigne h1::before,
.enseigne h1::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, oklch(76% 0.12 88 / 0.55));
}
.enseigne h1::after {
  background: linear-gradient(90deg, oklch(76% 0.12 88 / 0.55), transparent);
}

.infos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 11px;
}
.tour {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: oklch(65% 0.03 75);
}
.scores { display: flex; gap: 5px; }
.scores span {
  padding: 2.5px 9px;
  border-radius: 999px;
  background: oklch(21% 0.025 58);
  border: 1px solid oklch(100% 0 0 / 0.07);
  font-variant-numeric: tabular-nums;
}
.scores .moi {
  border-color: oklch(76% 0.12 88 / 0.6);
  color: var(--laiton);
}
/* Pastille couleur joueur (couleur posée en inline-style, cf. --joueur-0..3) */
.pastille {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: middle;
}

/* ---- Tables ---- */

.rangee { margin-top: 12px; }
.rangee.zinc-rangee { margin-top: 20px; }
/* Layout compact : T4a+T4b et T2+zinc côte à côte (repli en colonne si l'écran est trop étroit) */
.rangee.double { display: flex; gap: 8px; flex-wrap: wrap; }

.table {
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 9px 6px;
  border-radius: 16px;
  background-image:
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.022) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--bois-clair), var(--bois) 30%, var(--bois-sombre));
  box-shadow:
    inset 0 1px 0 oklch(70% 0.08 70 / 0.35),
    inset 0 -3px 6px oklch(0% 0 0 / 0.3),
    0 6px 14px oklch(0% 0 0 / 0.4);
}

.table.zinc {
  border-radius: 10px 22px 22px 10px;
  background-image:
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, oklch(58% 0.09 86), oklch(42% 0.07 80) 45%, oklch(33% 0.06 76));
  box-shadow:
    inset 0 1.5px 0 oklch(88% 0.1 90 / 0.5),
    inset 0 -3px 6px oklch(0% 0 0 / 0.35),
    0 6px 14px oklch(0% 0 0 / 0.4);
}

/* ---- Marché : vitrine d'information permanente (les 4 cartes visibles), pas une table où l'on s'assoit ----
   Colonne fixe à gauche de la salle (sticky), les cartes empilées verticalement, plaque en tête. */

.marche {
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--bois-sombre), oklch(19% 0.025 50));
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.25);
}
.marche.marche-colonne {
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  position: sticky;
  top: 8px;
  align-self: flex-start;
}
.marche.marche-colonne .sieges { flex-direction: column; }
/* La plaque horizontale (40px) tronquait « MARCHÉ » : lettres empilées verticalement dans la colonne */
.marche.marche-colonne .plaque {
  width: auto;
  align-self: center;
  padding: 8px 3px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.3em;
}

/* Ardoise des conditions / plaque du zinc */

.ardoise {
  flex: none;
  align-self: stretch;
  width: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 3px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 7px;
  border: 2px solid var(--bois-sombre);
  background: linear-gradient(160deg, oklch(27% 0.015 250), var(--ardoise));
  box-shadow: inset 0 0 0 1px oklch(50% 0.02 250 / 0.35), inset 0 0 9px oklch(0% 0 0 / 0.55);
}

/* Une ligne d'ardoise = une condition ; 2 icônes sur la ligne = au choix (condition double) */
.cond { white-space: nowrap; }

.plaque {
  flex: none;
  align-self: center;
  width: 40px;
  padding: 6px 0;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: oklch(32% 0.05 75);
  border-radius: 6px;
  background: linear-gradient(180deg, oklch(84% 0.1 92), oklch(60% 0.09 84));
  box-shadow: inset 0 1px 0 oklch(95% 0.05 95 / 0.7), 0 1px 2px oklch(0% 0 0 / 0.4);
}

/* ---- Sièges & cartes ---- */

.sieges { display: flex; gap: 3px; }
/* 42px (au lieu de 44) : marge nécessaire pour que les rangées combinées (T4a+T4b, T2+zinc, chantier B)
   restent sous 520px ; .carte suit en % */
.siege { position: relative; width: 42px; height: 60px; }

.chaise {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: oklch(0% 0 0 / 0.2);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.06), inset 0 2px 5px oklch(0% 0 0 / 0.3);
}
.chaise::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 18%;
  right: 18%;
  height: 4px;
  border-radius: 3px;
  background: oklch(100% 0 0 / 0.09);
}

.carte {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px 2px;
  border-radius: 7px;
  background: linear-gradient(180deg, oklch(96% 0.012 85), var(--carte));
  box-shadow: inset 0 0 0 1px var(--carte-bord), 0 2px 5px oklch(0% 0 0 / 0.45);
  color: var(--encre);
}
/* Fond genré : bleuté hommes, rosé femmes (chroma faible, esprit papier conservé) */
.carte.h { background: linear-gradient(180deg, oklch(95.5% 0.018 235), oklch(92.5% 0.028 235)); }
.carte.f { background: linear-gradient(180deg, oklch(96% 0.018 10), oklch(93% 0.032 10)); }

/* Coin supérieur droit coloré par race (mêmes couleurs littérales que les cœurs) */
.carte.rblanc::before, .carte.rnoir::before, .carte.rjaune::before, .carte.rbronze::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 0 6px 0 100%;
  box-shadow: inset 0 0 0 1px oklch(38% 0.03 60 / 0.28);
}
.carte.rblanc::before { background: var(--coeur-blanc); }
.carte.rnoir::before { background: var(--coeur-noir); }
.carte.rjaune::before { background: var(--coeur-jaune); }
.carte.rbronze::before { background: var(--coeur-bronze); }
.carte.grande::before { width: 14px; height: 14px; border-radius: 0 9px 0 100%; }
.carte img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(89% 0.02 85);
  box-shadow: inset 0 0 0 1px oklch(75% 0.03 80 / 0.5);
}
.icones {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Demi-cœurs (gauche = femme, droite = homme) */

.coeur {
  position: absolute;
  top: 22%;
  z-index: 3;
  font-size: 17px;
  line-height: 1;
  color: var(--rouge);
  -webkit-text-stroke: 0.6px oklch(38% 0.03 60 / 0.6);
  filter: drop-shadow(0 1px 1.5px oklch(0% 0 0 / 0.35));
}
/* Demi-cœur posé sur le bord, moitié interne : coupe alignée sur le bord de la carte */
.coeur.gauche { left: -8.5px; clip-path: inset(-3px -3px -3px 50%); }
.coeur.droit { right: -8.5px; clip-path: inset(-3px 50% -3px -3px); }
/* Couple formé : les deux demi-cœurs glissent vers l'interstice et s'y rejoignent en un cœur entier */
.coeur.couple.gauche { left: -10px; z-index: 4; }
.coeur.couple.droit { right: -10px; z-index: 4; }
.coeur.eteint { color: oklch(38% 0.02 60); }

/* Jetons de score */
.jeton {
  position: absolute;
  bottom: -6px;
  right: -5px;
  z-index: 5;
  min-width: 17px;
  height: 17px;
  padding: 0 2px;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-weight: 700;
  color: oklch(97% 0.01 85);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(100% 0 0 / 0.3), transparent 55%) var(--jeton-vert);
  box-shadow: inset 0 0 0 1.5px oklch(100% 0 0 / 0.28), 0 1.5px 3px oklch(0% 0 0 / 0.55);
  font-variant-numeric: tabular-nums;
}
.jeton.moins { background-color: var(--jeton-rouge); }
.jeton.nul { background-color: oklch(45% 0.02 60); }

/* ---- Lot en main ---- */

.lot {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: min(520px, 100%);
  padding: 9px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, oklch(23% 0.03 55), oklch(17% 0.025 55));
  border-top: 1px solid oklch(100% 0 0 / 0.09);
  box-shadow: 0 -8px 24px oklch(0% 0 0 / 0.45);
}
.lot h2 {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  color: oklch(65% 0.03 75);
}
.lot h2 em { color: var(--laiton); font-style: normal; }
.lot-cartes {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
}

.carte.grande {
  width: 88px;
  height: 120px;
  padding: 8px 4px 4px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--carte-bord), 0 4px 10px oklch(0% 0 0 / 0.5);
}
.carte.grande img { width: 46px; height: 46px; }
.carte.grande .icones {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
}
.carte.grande .coeur { font-size: 26px; top: 26%; }
.carte.grande .coeur.gauche { left: -13px; }
.carte.grande .coeur.droit { right: -13px; }

/* ---- Phase de choix du lot ---- */

body.phase-choix .pose { display: none; }
body.phase-pose .choix { display: none; }
body.phase-choix .salle { padding-bottom: 296px; }

.lots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.lot-choix {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: 10px;
  background: oklch(0% 0 0 / 0.25);
  border: 1px solid oklch(100% 0 0 / 0.08);
}
.lot-choix.selection {
  border-color: oklch(76% 0.12 88 / 0.75);
  background: oklch(100% 0 0 / 0.04);
  box-shadow: 0 0 10px oklch(76% 0.12 88 / 0.25), inset 0 0 0 1px oklch(76% 0.12 88 / 0.3);
}
.lot-choix.pris { opacity: 0.4; }
.lot-tag {
  position: absolute;
  top: -8px;
  right: 8px;
  z-index: 6;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  color: oklch(80% 0.02 80);
  background: oklch(28% 0.03 58);
  border: 1px solid oklch(100% 0 0 / 0.12);
}
.prendre {
  display: block;
  margin: 10px auto 0;
  padding: 6px 22px;
  border: 0;
  border-radius: 999px;
  font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: oklch(24% 0.04 70);
  background: linear-gradient(180deg, oklch(82% 0.12 90), oklch(68% 0.11 84));
  box-shadow: inset 0 1px 0 oklch(94% 0.06 95 / 0.8), 0 2px 6px oklch(0% 0 0 / 0.5);
  cursor: pointer;
}

/* ---- Interactions passe 2 : sélection de carte / siège ---- */

[data-siege] .chaise { cursor: pointer; }
.carte[data-carte] { cursor: pointer; }

.carte.selection {
  box-shadow: 0 0 0 2px var(--laiton), inset 0 0 0 1px var(--carte-bord), 0 2px 5px oklch(0% 0 0 / 0.45);
}
.carte.grande.selection {
  box-shadow: 0 0 0 2px var(--laiton), inset 0 0 0 1px var(--carte-bord), 0 4px 10px oklch(0% 0 0 / 0.5);
}

/* Jeton fantôme : préview des points d'une pose avant validation, sur une chaise vide */
.jeton.fantome { opacity: 0.55; }


/* ---- Notes d'objectifs secrets (papier scotché, styles repris du mockup .objectif) ---- */

.notes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.note {
  position: relative;
  width: fit-content;
  padding: 9px 14px 8px;
  rotate: -1.2deg;
  border-radius: 2px;
  background: linear-gradient(180deg, oklch(93% 0.02 95), oklch(88% 0.03 90));
  color: oklch(30% 0.03 60);
  box-shadow: 0 3px 9px oklch(0% 0 0 / 0.45);
  font-family: "Noteworthy", "Marker Felt", "Bradley Hand", "Segoe Print", cursive;
  cursor: pointer;
}
.note:nth-child(even) { rotate: 1deg; }
/* Scotch en haut de la note */
.note::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  width: 36px;
  height: 12px;
  rotate: -4deg;
  border-radius: 1px;
  background: oklch(100% 0 0 / 0.15);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.15);
}
/* Formule iconique (data/objectifs.json : pictos) : le contenu principal de la note, en gros ;
   le libellé complet ne s'affiche qu'au zoom. */
.note-pictos { display: block; font-size: 20px; line-height: 1.2; white-space: nowrap; }
.note-valeur {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px dashed oklch(52% 0.09 70);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: oklch(46% 0.1 60);
  font-variant-numeric: tabular-nums;
}
/* Flux d'échange : la note à brûler s'illumine */
.note.brulable { box-shadow: 0 0 0 2px var(--laiton), 0 3px 9px oklch(0% 0 0 / 0.45); }
[data-marche] { cursor: pointer; }

.visite-notes { font-size: 10px; color: oklch(65% 0.03 75); }

/* Zoom d'une note (pattern de l'overlay .detail, classe distincte) : pictos + libellé complet + estimation + règle */
.note-zoom {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: oklch(0% 0 0 / 0.55);
}
.note-zoom .note-zoom-panneau {
  max-width: 280px;
  padding: 18px 20px 14px;
  font: 16px/1.4 "Noteworthy", "Marker Felt", "Bradley Hand", "Segoe Print", cursive;
  color: oklch(30% 0.03 80);
  background: linear-gradient(180deg, oklch(90% 0.06 95), oklch(84% 0.07 92));
  border-radius: 3px;
  rotate: -1deg;
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.5);
}
.note-zoom .note-zoom-pictos { font-size: 28px; line-height: 1.2; }
.note-zoom .note-zoom-libelle { margin-top: 8px; font-size: 15px; line-height: 1.35; }
.note-zoom .note-valeur { margin-top: 8px; }
.note-zoom .note-zoom-estimation { margin-top: 8px; font-size: 13px; }
.note-zoom .note-zoom-regle {
  margin-top: 10px;
  font: 10.5px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: oklch(45% 0.02 80);
}

/* Rideau levé en fin de partie : l'objectif scoré révélé sous la ligne de classement */
.classement li { flex-wrap: wrap; }
.note-revelee {
  width: 100%;
  font: 11px "Noteworthy", "Marker Felt", "Bradley Hand", "Segoe Print", cursive;
  color: oklch(70% 0.06 92);
}

/* ---- Récap de fin : dans la zone basse, la salle reste visible et navigable ---- */

.fin-recap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
/* Le récap est plus haut que la barre de pose : la salle doit pouvoir défiler au-dessus */
body.phase-fin .salle { padding-bottom: 320px; }
.classement {
  list-style: none;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.classement li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: oklch(21% 0.025 58);
  border: 1px solid oklch(100% 0 0 / 0.07);
}
.classement li.moi { border-color: oklch(76% 0.12 88 / 0.6); }
.classement .rang { width: 16px; color: oklch(65% 0.03 75); font-variant-numeric: tabular-nums; }
.classement .nom { flex: none; }
.classement li.moi .nom { color: var(--laiton); }
.classement .decomp { flex: 1; font-size: 11px; color: oklch(65% 0.03 75); }
.classement .score { font-weight: 700; font-variant-numeric: tabular-nums; }

.fin-recap .rejouer {
  font-size: 12px;
  color: var(--laiton);
  text-decoration: none;
  border-bottom: 1px solid oklch(76% 0.12 88 / 0.4);
}

/* ---- Passe 3 : bistrots adverses ---- */

.scores span { cursor: pointer; }
.scores .regarde { box-shadow: inset 0 0 0 1px var(--craie); }

.visite {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 2px 10px;
  font-size: 11px;
  color: var(--laiton);
}
.visite .revenir { cursor: pointer; text-decoration: underline; }

/* ---- Passe 3 : écran de détail d'une carte posée ---- */

.detail {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: oklch(16% 0.02 60 / 0.72);
}
.detail-panneau {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 18px 18px;
  border-radius: 10px;
  background: var(--ardoise);
  color: var(--craie);
  border: 1px solid oklch(92% 0.01 250 / 0.25);
  box-shadow: 0 10px 26px oklch(0% 0 0 / 0.5);
}
.detail-ligne {
  width: 100%;
  max-width: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.detail-coeur { justify-content: center; }
.detail-ligne .pts { font-weight: 700; color: var(--jeton-vert); }
.detail-ligne .pts.moins { color: var(--jeton-rouge); }
.detail-ligne .pts.nul { color: oklch(65% 0.02 60); }
.detail-total { margin-top: 2px; font-weight: 700; font-size: 14px; }

/* ---- Passe 3 : animation ciblée d'un jeton/cœur qui vient de se figer ---- */

@keyframes pop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.jeton.pop, .coeur.pop {
  animation: pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Piste de score ----
   Repli assumé (cadre complet des 4 bords trop lourd sans mesure JS de la hauteur variable de .salle,
   cf. rapport) : bandeau haut seul, pleine largeur, ligne graduée 0-49 avec un jeton par joueur. */
.piste {
  position: relative;
  max-width: 520px;
  margin: 12px auto 0;
  padding: 14px 6px 4px;
}
.piste-ligne {
  position: relative;
  height: 2px;
  background: oklch(100% 0 0 / 0.15);
  border-radius: 2px;
}
.piste-tick {
  position: absolute;
  top: 6px;
  translate: -50% 0;
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
  color: oklch(60% 0.02 75);
}
.piste-jetons { position: relative; }
.piste-jeton {
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  translate: -50% 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.35), 0 1px 2px oklch(0% 0 0 / 0.5);
  transition: left 200ms ease-out, transform 200ms ease-out;
}