/* Welcome screen: a magic chest that opens with the hero's secret code. */

.hero-gate {
  --gate-gold: #ffca56;
  --gate-gold-dark: #e3ae43;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 20% 15%, #fff7d6 0, transparent 35%),
    radial-gradient(circle at 85% 80%, #d9f2d6 0, transparent 40%),
    linear-gradient(170deg, var(--sky) 0%, #e2f1df 60%, #f3ecd2 100%);
  transition: opacity .6s ease, transform .6s ease;
}

.hero-gate--leaving {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}

.hero-gate__sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-gate__sparkle {
  position: absolute;
  color: #ffd265;
  font-size: 22px;
  opacity: .8;
  animation: hero-gate-twinkle 3s ease-in-out infinite;
}

.hero-gate__card {
  position: relative;
  width: min(440px, 100%);
  background: #fffef7;
  border: 1px solid #e2e7da;
  border-radius: 32px;
  box-shadow: 0 8px 0 #dce4d4, 0 30px 80px #1b3a3330;
  padding: 26px 22px 22px;
  text-align: center;
}

.hero-gate__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1.7px;
  color: var(--green);
  text-transform: uppercase;
}

.hero-gate__title {
  margin: 8px 0 4px;
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.1;
}

.hero-gate__hint {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--muted);
  font-weight: 650;
}

.hero-gate__stage {
  position: relative;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
}

.hero-gate__hero {
  height: 140px;
  width: 110px;
  object-fit: contain;
  animation: hero-gate-bob 2.4s ease-in-out infinite;
}

.hero-gate__chest {
  height: 112px;
  width: 130px;
  object-fit: contain;
  filter: saturate(.75) brightness(.92);
  transition: filter .4s, transform .4s;
}

.hero-gate__bubble {
  position: absolute;
  top: 0;
  right: 6%;
  background: #fff;
  border: 2px solid #f1dfa8;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 800;
  color: #8a6a2e;
  box-shadow: 0 3px 0 #f1dfa8;
}

.hero-gate__slots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 6px;
}

.hero-gate__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hero-gate__group-label {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-gate__group-slots {
  display: flex;
  gap: 6px;
}

.hero-gate__slot {
  width: 48px;
  height: 58px;
  border-radius: 14px;
  background: #f0f2e8;
  border: 2px dashed #cfd8c5;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 900;
  color: var(--ink);
}

.hero-gate__slot--filled {
  background: #fff3cd;
  border: 2px solid #ecc66d;
  animation: hero-gate-pop .3s ease;
}

.hero-gate__slot--current {
  border-color: var(--green);
  border-style: solid;
}

.hero-gate__message {
  min-height: 26px;
  margin: 4px 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
}

.hero-gate__message--oops {
  color: #c06a3a;
}

.hero-gate__keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hero-gate__key {
  min-height: 62px;
  border-radius: 18px;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  border: 0;
  box-shadow: 0 5px 0 var(--key-shadow), inset 0 2px 0 #ffffff70;
  background: var(--key-color);
  text-shadow: 0 2px 0 #0000001f;
}

.hero-gate__key:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--key-shadow);
}

/* One rainbow color per digit so kids can also find keys by color. */
.hero-gate__key[data-digit="1"] { --key-color: #ff8a80; --key-shadow: #d9645b; }
.hero-gate__key[data-digit="2"] { --key-color: #ffb36b; --key-shadow: #d98c45; }
.hero-gate__key[data-digit="3"] { --key-color: #ffd257; --key-shadow: #d6a92e; }
.hero-gate__key[data-digit="4"] { --key-color: #9ad56f; --key-shadow: #72ad4a; }
.hero-gate__key[data-digit="5"] { --key-color: #5fcf9b; --key-shadow: #3ba676; }
.hero-gate__key[data-digit="6"] { --key-color: #5cc6e8; --key-shadow: #379dbf; }
.hero-gate__key[data-digit="7"] { --key-color: #7aa2f7; --key-shadow: #557bd0; }
.hero-gate__key[data-digit="8"] { --key-color: #a98cf2; --key-shadow: #8267c9; }
.hero-gate__key[data-digit="9"] { --key-color: #f08cc9; --key-shadow: #c866a2; }
.hero-gate__key[data-digit="0"] { --key-color: #8fa39a; --key-shadow: #6b7f76; }

.hero-gate__key--erase {
  --key-color: #f0f0e7;
  --key-shadow: #cfd3c4;
  color: #758578;
  text-shadow: none;
  font-size: 26px;
}

.hero-gate__key--spacer {
  visibility: hidden;
}

/* Wrong code: the chest wiggles "no" instead of showing an error. */
.hero-gate--oops .hero-gate__slots,
.hero-gate--oops .hero-gate__chest {
  animation: hero-gate-shake .5s ease;
}

/* Right code: the chest lights up and stars fly out. */
.hero-gate--open .hero-gate__chest {
  filter: none;
  transform: scale(1.15) rotate(-3deg);
}

.hero-gate--open .hero-gate__hero {
  animation: hero-gate-jump .6s ease 2;
}

.hero-gate__burst {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 26px;
  color: #ffc847;
  pointer-events: none;
  animation: hero-gate-burst 1.1s ease-out forwards;
}

@keyframes hero-gate-twinkle {
  0%, 100% { opacity: .2; transform: scale(.7); }
  50% { opacity: .9; transform: scale(1.1); }
}

@keyframes hero-gate-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes hero-gate-pop {
  0% { transform: scale(.6); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes hero-gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

@keyframes hero-gate-jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-26px); }
}

@keyframes hero-gate-burst {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(180deg); opacity: 0; }
}

@media (max-height: 700px) {
  .hero-gate__stage { height: 110px; }
  .hero-gate__hero { height: 104px; width: 84px; }
  .hero-gate__chest { height: 84px; width: 100px; }
  .hero-gate__key { min-height: 52px; font-size: 26px; }
}

/* Landscape phone: chest on the left, keypad on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero-gate__card {
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    align-items: center;
    padding: 16px 20px;
  }

  .hero-gate__intro { grid-column: 1; }
  .hero-gate__keypad { grid-column: 2; grid-row: 1 / span 2; }
  .hero-gate__title { font-size: 24px; }
  .hero-gate__stage { height: 90px; }
  .hero-gate__hero { height: 86px; width: 70px; }
  .hero-gate__chest { height: 70px; width: 84px; }
  .hero-gate__bubble { display: none; }
  .hero-gate__key { min-height: 48px; font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-gate *,
  .hero-gate {
    animation: none !important;
    transition: none !important;
  }
}