* { box-sizing: border-box; }

[hidden] { display: none !important; }

.kuku-quiz {
  margin: 0;
  min-width: 40rem;
  min-height: 100vh;
  background: #10171c;
  color: #fff;
  font-family: sans-serif;
}

.kuku-quiz__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.kuku-quiz__problem,
.kuku-quiz__keypad {
  min-width: 0;
  min-height: 0;
}

.kuku-quiz__problem {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
}

.kuku-quiz__top-link {
  position: absolute;
  top: clamp(1rem, 3vw, 3rem);
  right: clamp(1rem, 3vw, 3rem);
  border: 2px solid #66f08f;
  border-radius: .65rem;
  padding: .55rem .8rem;
  background: #19252d;
  color: #eef5f8;
  font-weight: 700;
  text-decoration: none;
}

.kuku-quiz__top-link:hover,
.kuku-quiz__top-link:focus-visible {
  outline: none;
  background: #258c4c;
  box-shadow: 0 0 .6rem #5dff91;
}

.kuku-quiz__skip-recording {
  position: absolute;
  bottom: clamp(1rem, 3vw, 3rem);
  left: clamp(1rem, 3vw, 3rem);
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  cursor: pointer;
}

.kuku-quiz__skip-recording input {
  width: 1.35em;
  height: 1.35em;
  margin: 0;
  accent-color: #56ef85;
}

.kuku-quiz__skip-recording:has(input:focus-visible) {
  border-radius: .4rem;
  outline: .15rem solid #56ef85;
  outline-offset: .15rem;
}

.kuku-quiz__progress {
  justify-self: start;
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 700;
}

.kuku-quiz__expression {
  display: flex;
  align-items: center;
  gap: .3em;
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 700;
  white-space: nowrap;
}

.kuku-quiz__hard-label {
  align-self: flex-start;
  border: .12em solid #ff5c67;
  border-radius: 999px;
  padding: .18em .45em;
  background: #5d0712;
  color: #ffd5d8;
  font-size: .2em;
  letter-spacing: .08em;
}

.kuku-quiz__formula.is-hard {
  color: #ff5f68;
  text-shadow: 0 0 .15em #ff2638, 0 0 .4em #a90018;
  animation: kuku-hard-pulse 900ms ease-in-out infinite alternate;
}

@keyframes kuku-hard-pulse {
  from {
    color: #ffabb0;
    text-shadow: 0 0 .08em #ff5f68, 0 0 .25em #850011;
  }
  to {
    color: #ff2638;
    text-shadow: 0 0 .2em #ff2638, 0 0 .5em #d0001c;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kuku-quiz__formula.is-hard {
    animation: none;
  }
}

.kuku-quiz__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.kuku-quiz__answer {
  width: 2.4em;
  border: .04em solid #758793;
  border-radius: .15em;
  padding: .08em .12em;
  background: #fff;
  color: #182127;
  font: inherit;
  text-align: center;
}

.kuku-quiz__result {
  align-self: center;
  text-align: center;
}

.kuku-quiz__result h1,
.kuku-quiz__result p {
  margin: 0 0 .5rem;
}

.kuku-quiz__result output {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 800;
  color: #56ef85;
}

.kuku-quiz__earned {
  margin: 1.25rem 0 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
}

.kuku-quiz__earned output {
  color: #79f59d;
  font-size: inherit;
}

.kuku-quiz__result-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.kuku-quiz__result-button {
  border: .12rem solid #66f08f;
  border-radius: 1rem;
  padding: .7em 1em;
  background: linear-gradient(180deg, #258c4c, #126532);
  color: #f4fff7;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: 0 0 .4rem #38df70, inset 0 .08em .12em #75f49d;
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.kuku-quiz__result-button:hover,
.kuku-quiz__result-button:focus-visible {
  outline: none;
  transform: scale(1.04);
  box-shadow: 0 0 .75rem #5dff91, inset 0 .08em .12em #9affb8;
}

.kuku-quiz__result-button:active {
  transform: scale(.97);
}

.kuku-quiz__error {
  max-width: 100%;
  border: 2px solid #ff4141;
  border-radius: .75rem;
  padding: .75rem 1rem;
  color: #ffb2b2;
  font-weight: 700;
}

.kuku-quiz__keypad {
  padding: clamp(.75rem, 2vw, 2rem);
}

.kuku-quiz__tenkey {
  min-block-size: 0;
}

.kuku-quiz__keypad button:disabled {
  cursor: wait;
  opacity: .55;
}

@media (max-width: 52rem) {
  .kuku-quiz__result-actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kuku-quiz__result-button {
    transition: none;
  }
}