/* MW4 · LE TUTORIEL — la nuit tombe autour de la partie montrée, les crochets lime l'encadrent (les cadres
   de détection du film et des cartes du bot), une plaque noire de verre dit ce qu'on y fait. */
.tr{position:fixed;inset:0;z-index:180;pointer-events:none;opacity:0;transition:opacity .35s ease}
.tr.is-on{opacity:1}
.tr.is-sort{opacity:0}
.tr__trou{position:absolute;left:0;top:0;width:0;height:0;border-radius:24px;pointer-events:none;
  box-shadow:0 0 0 200vmax rgba(3,5,3,.74);transition:transform .55s var(--mw4-entre,cubic-bezier(.16,1,.3,1)),width .55s var(--mw4-entre,ease),height .55s var(--mw4-entre,ease)}
.tr__trou i{position:absolute;inset:-6px;--c:#9dff3c;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/26px 2.5px,linear-gradient(var(--c),var(--c)) 0 0/2.5px 26px,
    linear-gradient(var(--c),var(--c)) 100% 0/26px 2.5px,linear-gradient(var(--c),var(--c)) 100% 0/2.5px 26px,
    linear-gradient(var(--c),var(--c)) 0 100%/26px 2.5px,linear-gradient(var(--c),var(--c)) 0 100%/2.5px 26px,
    linear-gradient(var(--c),var(--c)) 100% 100%/26px 2.5px,linear-gradient(var(--c),var(--c)) 100% 100%/2.5px 26px;
  background-repeat:no-repeat;filter:drop-shadow(0 0 8px rgba(157,255,60,.55));animation:tr-vise 2.4s ease-in-out infinite}
@keyframes tr-vise{0%,100%{inset:-6px}50%{inset:-11px}}
.tr__plaque{position:absolute;left:50%;bottom:clamp(14px,3vh,28px);width:min(560px,calc(100vw - 32px));transform:translateX(-50%);pointer-events:auto;
  padding:18px 20px 18px;border-radius:22px;color:var(--mw4-os,#eef2e6);background:rgba(8,11,8,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(157,255,60,.35),0 30px 80px -30px rgba(0,0,0,.9);outline:none}
.tr__plaque.is-neuf .tr__titre,.tr__plaque.is-neuf .tr__texte{animation:tr-entre .5s var(--mw4-entre,ease) both}
.tr__plaque.is-neuf .tr__texte{animation-delay:.06s}
@keyframes tr-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tr__haut{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.tr__n{font-family:var(--f-chiffre);font-weight:800;font-size:18px;color:#7d857a;font-variant-numeric:tabular-nums}
.tr__n b{font-size:26px;color:#9dff3c}
.tr__barre{flex:1;height:2px;background:rgba(238,242,230,.14);border-radius:2px;overflow:hidden}
.tr__barre i{display:block;height:100%;background:#9dff3c;transform-origin:0 50%;transform:scaleX(0);transition:transform .5s var(--mw4-entre,ease)}
.tr__x{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:9px;background:rgba(238,242,230,.08);color:inherit;cursor:pointer}
.tr__x svg{width:16px;height:16px}
.tr__x:focus-visible{outline:2px solid #9dff3c;outline-offset:2px}
.tr__titre{margin:0 0 6px;font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(24px,3vw,36px);line-height:.92;letter-spacing:-.045em;text-transform:uppercase;color:#eefbe6}
.tr__texte{margin:0 0 16px;font-family:var(--f-ui);font-size:15.5px;line-height:1.5;color:rgba(238,242,230,.82)}
.tr__cmd{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.tr__cmd .btn[hidden]{display:none}
.tr__cmd .tr__passer{margin-right:auto}
@media (max-width:760px){
  .tr__trou{border-radius:18px}
  .tr__plaque{padding:16px}
  .tr__texte{font-size:14.5px}
}
@media (prefers-reduced-motion: reduce){
  .tr,.tr__trou,.tr__barre i{transition:none}
  .tr__trou i,.tr__plaque.is-neuf .tr__titre,.tr__plaque.is-neuf .tr__texte{animation:none}
}