/* ================================================================== AUTH ==
   The sign-in screen as the game's front door: the home logo, the five modes
   as a deck that swipes itself, the mascot dressed for whichever is on top,
   and that mode's backdrop behind it all (see js/auth-show.js). */

/* The last letter of a gradient word overhangs its box and was clipped (the
   "b" of Vocab). Room on every side, given back with a negative margin. */
.logo span {
  padding: .06em .09em .12em;
  margin: -.06em -.09em -.12em;
}

.screen--auth {
  isolation: isolate;
  align-content: start;
  gap: 10px;
  padding-top: max(28px, env(safe-area-inset-top));
  transition: --mode-tint .6s ease;
}

.screen--auth .homeBg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 40% at 50% 34%, transparent 0%, rgba(8, 6, 30, .25) 100%),
    linear-gradient(180deg, transparent 45%, rgba(10, 8, 34, .55) 100%);
}

.auth__head { gap: 0; }

.logo--auth { margin: 0 auto 10px; }

/* ---------- The showcase ---------- */

.authShow {
  --swipe: 0;
  position: relative;
  justify-self: center;
  width: min(100%, 320px);
  height: 196px;
  margin-top: 6px;
}

.authDeck {
  position: absolute;
  inset: 0;
  perspective: 800px;
}

.authCard {
  --depth: 0;
  position: absolute;
  top: 6px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 138px;
  height: 178px;
  margin-left: -69px;
  padding: 10px 8px;
  border: 3px solid rgba(255, 255, 255, .45);
  border-radius: 24px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .35) 0%, transparent 55%),
    linear-gradient(165deg, var(--mode-a) 0%, var(--mode-b) 100%);
  color: #fff;
  text-align: center;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    0 7px 0 var(--mode-edge),
    0 18px 30px -12px rgba(0, 0, 0, .6);
  /* Fanned behind the top card, alternating sides. */
  transform:
    translateX(calc(var(--depth) * 24px * var(--side, 1)))
    translateY(calc(var(--depth) * 3px))
    rotate(calc(var(--depth) * 5deg * var(--side, 1)))
    scale(calc(1 - var(--depth) * .05));
  filter: brightness(calc(1 - var(--depth) * .1));
  transition: transform .5s var(--ease-out, ease-out), filter .5s ease, opacity .35s ease;
}

.authCard[data-mode="duel"] { --mode-a: #ff5fa2; --mode-b: #7b2ff7; --mode-edge: #4a1596; }
.authCard[data-mode="zen"] { --mode-a: #5eead4; --mode-b: #1b8fb0; --mode-edge: #0e5f78; }
.authCard[data-mode="timeAttack"] { --mode-a: #ffd23f; --mode-b: #ff6a2b; --mode-edge: #a83a0c; }
.authCard[data-mode="suddenDeath"] { --mode-a: #ff5a67; --mode-b: #7d1330; --mode-edge: #470716; }
.authCard[data-mode="review"] { --mode-a: #a7f3d0; --mode-b: #4f8cff; --mode-edge: #2548a8; }

.authCard__emblem { display: block; width: 84px; height: 84px; }
.authCard__emblem svg { width: 100%; height: 100%; overflow: visible; }

.authCard__name {
  font: 700 21px/1.1 var(--font-display);
  text-shadow: 0 2px 0 var(--mode-edge);
}

.authCard__desc {
  font: 700 10.5px/1.25 var(--font-he);
  opacity: .92;
}

/* Only the top card is readable; the fan behind shows colour and symbol. */
.authCard:not(.is-top) .authCard__name,
.authCard:not(.is-top) .authCard__desc { opacity: 0; }

.authCard.is-top { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 7px 0 var(--mode-edge), 0 0 34px -4px var(--mode-a), 0 18px 30px -12px rgba(0, 0, 0, .6); }

/* The throw. */
.authCard.is-out-right,
.authCard.is-out-left {
  opacity: 0;
  transition: transform .6s cubic-bezier(.4, 0, .9, .6), opacity .6s ease-in;
}

.authCard.is-out-right { transform: translate(190px, -24px) rotate(28deg); }
.authCard.is-out-left { transform: translate(-190px, -24px) rotate(-28deg); }

/* The verdict flashes on the side the card went. */
.authShow__stamp {
  position: absolute;
  top: 64px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  font: 800 24px/1 var(--font-ui);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
  pointer-events: none;
}

.authShow__stamp--yes { right: 0; background: #22c38e; }
.authShow__stamp--no { left: 0; background: #ff4d6d; }

.authShow[data-throw="yes"] .authShow__stamp--yes,
.authShow[data-throw="no"] .authShow__stamp--no { opacity: 1; transform: scale(1); }

/* The mascot sits at the deck's foot, dressed for the mode on top. */
.authShow__parrot {
  position: absolute;
  z-index: 10;
  right: -6px;
  bottom: -14px;
  width: 86px;
  pointer-events: none;
}

.authShow__parrot .parrot { width: 100%; }

.authDots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.authDots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  transition: width .3s ease, background .3s ease;
}

.authDots i.is-on { width: 22px; background: #fff; }

.auth__tagline {
  margin: 0;
  text-align: center;
  font: 700 15px/1.3 var(--font-he);
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* ---------- The form ---------- */

.screen--auth .auth {
  gap: 12px;
  margin-top: 4px;
  padding: 18px 16px;
  border: 2px solid color-mix(in srgb, var(--mode-a, #8b7cf8) 55%, rgba(255, 255, 255, .25));
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(40, 34, 110, .82), rgba(22, 18, 66, .88));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .12),
    0 8px 0 rgba(10, 8, 40, .6),
    0 0 40px -12px var(--mode-glow, transparent),
    0 24px 40px -16px rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .6s ease, box-shadow .6s ease;
}

.screen--auth .field__label {
  font: 700 14px/1.2 var(--font-he);
  letter-spacing: 0;
  color: rgba(255, 255, 255, .8);
}

.screen--auth .field__input {
  padding: 13px 16px;
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(8, 6, 30, .45);
  font-size: 16px;
}

.screen--auth .field__input:focus {
  border-color: var(--mode-a, #fff);
  background: rgba(8, 6, 30, .6);
}

@media (max-height: 700px) {
  .authShow { height: 160px; transform: scale(.82); transform-origin: top center; margin-bottom: -30px; }
}

@media (prefers-reduced-motion: reduce) {
  .authCard,
  .authShow__stamp { transition: none; }
}