/* =========================================================================
   Orang3 — zárás: széttépés, oklevél, ranglista

   Három ütem egyetlen képernyőn, egymás UTÁN, sosem egyszerre:
     1. a feladatlap, amit szét kell tépni,
     2. az oklevél, ami a helyén nő ki,
     3. a ranglista.

   MINDEN OSZTÁLYNÉV `fin-` ELŐTAGOT KAP. Két feladat nem oszthat
   osztálynevet – ez a szabály az 1. és a 4. feladat ütközése után született.

   A lap NEM `.glass`. A háttér sík #131313, tehát az elmosódásnak nincs mit
   elmosnia; viszont a széttépéshez két klónt kell `clip-path`-tal vágni és
   `transform`-mal mozgatni, és a `backdrop-filter` + `clip-path` + mozgás
   hármas pont az a kombináció, amitől egy integrált grafikás laptop kockákat
   kezd dobálni. Ugyanaz a látvány, fele annyi kockázat.
   ========================================================================= */

:root {
  /* Az érmek. SZÁNDÉKOSAN nem a termék meglévő színei, és szándékosan nem
     kitöltött felületek: az arany, az ezüst és a bronz TINTA – a sorszám és
     a név színe, plusz egy 1px-es vonal a sor körül (7. szabály). A halvány
     háttér-árnyalat annyi, hogy egy sorrendet két méterről is lehessen látni,
     de nem ragyog és nem neon (8. szabály).

     Az arany szándékosan UGYANAZ, mint a csillagé: az első hely és a
     csillagok egy dologról szólnak, nem kell nekik két sárga. */
  --medal-1: var(--gold);   /* #E8C04B */
  --medal-2: #DCE4EF;       /* hűvös ezüst: a sima sorok fehére meleg-semleges,
                               ezért kell neki egy hajszálnyi kék, különben a
                               2. hely csak „egy kicsit világosabb sor" lenne */
  --medal-3: #CC8F4E;
}

.finish {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 9.6rem 2rem 2rem;   /* a fejléc-márkajel alja 8,95rem */
}

/* =========================================================================
   1. ÜTEM — a feladatlap és a széttépés
   ========================================================================= */

.fin-stage {
  position: relative;
  width: min(32rem, 100%);
  flex: 0 1 auto;
  min-height: 0;
}

/* A lap felülete: ugyanaz az áttetsző fehér és ugyanaz az árnyék, mint a
   feladatlapoké, csak elmosódás nélkül. */
.fin-paper {
  position: relative;
  border-radius: 1.75rem;
  padding: 2.4rem 2.2rem 2.2rem;
  background: rgba(255, 255, 255, .115);
  box-shadow:
    0 2.5rem 5.5rem rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
}

.fin-paper__in { text-align: center; }

.fin-paper__title {
  margin-top: .3rem;
  font-size: 2.6rem;
  line-height: 1.05;
}

.fin-paper__sub {
  margin-top: .45rem;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.fin-sum {
  margin-top: 1.5rem;
  display: grid;
  gap: .55rem;
  text-align: left;
}

.fin-sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 1.1875rem;
}

.fin-sum__row span { color: var(--ink-3); }
.fin-sum__row b {
  font-weight: 400;
  color: var(--ink);
  font-size: 1.375rem;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- A tépés vonala ------------------------------------------------------
   Egy sötét, cikcakkos sáv a lap közepén, ami felülről lefelé nő. Csak
   `transform: scaleY()` animálódik; a cikcakkot egy STATIKUS `clip-path`
   adja, ami sosem változik.                                              */
.fin-rip {
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  width: 1.1rem;
  margin-left: -.55rem;
  pointer-events: none;
}

.fin-rip__gap {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
  transform-origin: 50% 0;
  transform: scaleY(var(--rip, 0));
  clip-path: polygon(
    38% 0%, 62% 4%, 40% 9%, 60% 14%, 41% 19%, 63% 24%, 39% 29%, 61% 34%,
    40% 39%, 62% 44%, 38% 49%, 60% 54%, 41% 59%, 63% 64%, 39% 69%, 61% 74%,
    40% 79%, 62% 84%, 38% 89%, 60% 94%, 44% 100%,
    56% 100%, 78% 94%, 56% 89%, 80% 84%, 58% 79%, 79% 74%, 57% 69%, 81% 64%,
    59% 59%, 78% 54%, 56% 49%, 80% 44%, 58% 39%, 79% 34%, 57% 29%, 81% 24%,
    59% 19%, 78% 14%, 56% 9%, 80% 4%, 56% 0%
  );
}

/* A fogantyú: a lap TETEJÉN ül, félig kilógva. Ez mondja meg, hogy lefelé
   kell húzni. Valódi `<button>`, tehát billentyűzetről is használható, és
   a PUSZTA KATTINTÁS is széttépi a lapot.

   Ez a 3. feladat tanulsága: kell egy út, amin senki nem tud beragadni. */
.fin-grip {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3.4rem;
  height: 3.4rem;
  margin: -1.7rem 0 0 -1.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 .5rem 1.5rem rgba(0, 0, 0, .45);
  color: var(--ink);
  touch-action: none;                 /* a húzást mi kezeljük, nem a görgetés */
  z-index: 2;
  transition: background var(--t-fast) linear, transform var(--t-tick) var(--ease-out);
}

.fin-grip svg {
  width: 1.5rem; height: 1.5rem;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.fin-grip:hover,
.fin-grip:focus-visible { background: rgba(255, 255, 255, .2); }

/* Húzás közben. A gombot NEM mozgatjuk el: a lapot tépjük, nem a fogantyút
   húzzuk le a lapról. */
.fin-stage.is-tearing .fin-grip { background: rgba(255, 255, 255, .24); }

/* --- A két fél szétválása ------------------------------------------------
   A `data-paper` klónja kapja a jobb felet. A végállapotot az OSZTÁLY írja
   le: ha az átmenet bármiért elmarad, a lap akkor is eltűnik, és nem
   marad ott félbetépve az oklevél előtt (6. szabály).                    */
.fin-paper--l { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }

.fin-paper--r {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.fin-paper--l,
.fin-paper--r { transition: transform 760ms var(--ease-in), opacity 700ms linear; }

.fin-stage.is-torn .fin-paper--l { transform: translate(-32%, 16%) rotate(-11deg); opacity: 0; }
.fin-stage.is-torn .fin-paper--r { transform: translate(32%, 19%) rotate(12deg); opacity: 0; }
.fin-stage.is-torn .fin-grip { opacity: 0; pointer-events: none; transition: opacity 220ms linear; }

.fin-hint {
  min-height: 1.6rem;
  font-size: var(--fs-pill);
  color: var(--ink-3);
  text-align: center;
}

/* =========================================================================
   2. ÜTEM — az oklevél
   ========================================================================= */

.fin-cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  min-height: 0;
}

.fin-cert__card {
  width: min(38rem, 100%);
  padding: 2.2rem 2.4rem 1.8rem;
  border-radius: 1.5rem;
  text-align: center;
  background: linear-gradient(var(--surface-angle), var(--surface-from) 0%, var(--surface-to) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 2rem 4.5rem rgba(0, 0, 0, .5);
}

.fin-cert__eyebrow {
  font-size: .9375rem;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fin-cert__name {
  margin-top: .7rem;
  font-size: 3.1rem;
  line-height: 1.05;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.fin-cert__line {
  margin-top: .5rem;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.fin-cert__stats {
  margin-top: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  flex-wrap: wrap;
}

.fin-cert__stat {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.1875rem;
  color: var(--ink-3);
}

.fin-cert__stat b {
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--ink);
}

.fin-cert__star { width: 1.6rem; height: 1.6rem; fill: var(--gold); }

.fin-cert__where {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: 1.0625rem;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.fin-cert__date { margin-top: .25rem; font-size: var(--fs-hint); color: var(--ink-3); }

.fin-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}

.fin-actions .intro__ok { margin-top: 0; }

/* A halkabb, másodlagos gomb. Ugyanaz a forma, kevesebb festék. */
.fin-ghost {
  min-width: 10rem;
  height: 3.75rem;
  padding: 0 1.6rem;
  border-radius: 1.875rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: color var(--t-fast) linear, background var(--t-fast) linear;
}

.fin-ghost:hover,
.fin-ghost:focus-visible { color: var(--ink); background: rgba(255, 255, 255, .11); }

.fin-note {
  min-height: 1.3rem;
  font-size: var(--fs-hint);
  color: var(--ink-3);
  text-align: center;
}

/* =========================================================================
   3. ÜTEM — a ranglista
   ========================================================================= */

.fin-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  width: min(44rem, 100%);
  min-height: 0;
}

.fin-board__title { font-size: 2.4rem; line-height: 1; }

.fin-board__sub {
  font-size: var(--fs-hint);
  color: var(--ink-3);
  text-align: center;
}

.fin-table {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.fin-tr {
  display: grid;
  grid-template-columns: 3.2rem 1fr 6.5rem 5.5rem;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem;
  border-radius: .75rem;
  font-size: 1.1875rem;
}

.fin-tr--head {
  font-size: .8125rem;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: .35rem;
}

.fin-tr--head > :nth-child(3),
.fin-tr--head > :nth-child(4),
.fin-row > :nth-child(3),
.fin-row > :nth-child(4) { text-align: right; }

.fin-rows {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding-right: .3rem;
}

/* A dobogón kívüli sorok halkak: a dobogó ettől lesz dobogó. */
.fin-row {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .028);
  color: var(--ink-2);
}

.fin-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.fin-row__pos { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.fin-row__stars,
.fin-row__time { font-variant-numeric: tabular-nums; }

/* --- Dobogó -------------------------------------------------------------
   Arany, ezüst, bronz. TINTA és 1px-es vonal, plusz egy alig látható
   árnyalat a háttérben: ennyi kell ahhoz, hogy a sorrend két méterről is
   olvasható legyen, és ennyi fér bele a 7. és a 8. szabályba.           */
.fin-row--1 {
  color: var(--medal-1);
  background: rgba(232, 192, 75, .10);
  box-shadow: inset 0 0 0 1px rgba(232, 192, 75, .42);
}
.fin-row--2 {
  color: var(--medal-2);
  background: rgba(220, 228, 239, .13);
  box-shadow: inset 0 0 0 1px rgba(220, 228, 239, .52);
}
.fin-row--3 {
  color: var(--medal-3);
  background: rgba(204, 143, 78, .12);
  box-shadow: inset 0 0 0 1px rgba(204, 143, 78, .50);
}

.fin-row--1 .fin-row__name,
.fin-row--1 .fin-row__pos { color: var(--medal-1); }
.fin-row--2 .fin-row__name,
.fin-row--2 .fin-row__pos { color: var(--medal-2); }
.fin-row--3 .fin-row__name,
.fin-row--3 .fin-row__pos { color: var(--medal-3); }

/* A saját sor. Nem szín, hanem egy jel: a gyerek a saját nevét keresi, és
   egy huszonöt soros listában meg kell találnia. */
.fin-row.is-me { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.fin-row--1.is-me { box-shadow: inset 0 0 0 2px rgba(232, 192, 75, .75); }
.fin-row--2.is-me { box-shadow: inset 0 0 0 2px rgba(220, 228, 239, .82); }
.fin-row--3.is-me { box-shadow: inset 0 0 0 2px rgba(204, 143, 78, .85); }

.fin-row__me {
  margin-left: .5rem;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* A kihagyott sorok jele, ha a játékos a tizedik hely alatt van. */
.fin-gap {
  padding: .2rem .9rem;
  color: var(--ink-4);
  font-size: 1.25rem;
  letter-spacing: .3em;
}

/* =========================================================================
   Belépés és ütemváltás

   Minden ütem a saját osztályával ÉRKEZIK, és a végállapot az osztályban
   van, nem az animációban (6. szabály).
   ========================================================================= */

.finish.is-entering .fin-stage { animation: rise 520ms var(--ease-out) 120ms both; }
.finish.is-entering .fin-hint  { animation: appear 420ms var(--ease-out) 620ms both; }

.fin-cert,
.fin-board { animation: rise 460ms var(--ease-out) both; }

/* =========================================================================
   Kisebb képernyők
   ========================================================================= */

@media (max-width: 900px) {
  .finish { padding: 7.5rem 1rem 1.5rem; }
  .fin-cert__name { font-size: 2.3rem; }
  .fin-tr { grid-template-columns: 2.4rem 1fr 4.6rem 4.4rem; font-size: 1rem; padding: .5rem .6rem; }
}

@media (max-height: 760px) {
  .finish { padding: 8.6rem 2rem 1rem; gap: .8rem; }
  .fin-paper { padding: 1.6rem 1.6rem 1.5rem; }
  .fin-paper__title { font-size: 2rem; }
  .fin-sum { margin-top: 1rem; }
  .fin-cert__card { padding: 1.4rem 1.6rem 1.2rem; }
  .fin-cert__name { font-size: 2.3rem; }
  .fin-cert__where { margin-top: .9rem; padding-top: .7rem; }
  .fin-cert__stats { margin-top: .9rem; gap: 1.6rem; }
  .fin-board__title { font-size: 1.9rem; }
  .intro__ok, .fin-ghost { height: 3rem; font-size: 1.15rem; }
}