.discover-letter-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 1vh, 10px);
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: max(74px, calc(env(safe-area-inset-top) + 64px)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  color: #493766;
  background: radial-gradient(circle at 12% 14%, rgba(255,255,255,.84), transparent 29%), radial-gradient(circle at 90% 87%, rgba(255,255,255,.66), transparent 31%), linear-gradient(140deg, #fff2b5, #ffe0ec 53%, #c9f2ed);
  font-family: 'Baloo 2', Inter, system-ui, sans-serif;
}
.discover-letter-heading {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  text-align: center;
}
.discover-letter-kicker {
  margin: 0;
  color: #875d9d;
  font-size: clamp(10px, 1.4vh, 14px);
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;
}
.discover-letter-heading h1 {
  margin: 0;
  color: #563681;
  font-size: clamp(27px, 5vh, 48px);
  font-weight: 800;
  line-height: .98;
  text-align: center;
  text-shadow: 0 2px 0 rgba(255,255,255,.95), 0 5px 13px rgba(54,38,89,.14);
}
.discover-letter-instruction {
  margin: 2px 0 0;
  padding: 3px 13px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 999px;
  color: #57436f;
  background: rgba(255,255,255,.82);
  font-size: clamp(13px, 2vh, 20px);
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  cursor: pointer;
}
.discover-letter-instruction:focus-visible { outline: 3px solid #6846a7; outline-offset: 3px; }
.discover-letter-instruction .karaoke-token,
.discover-letter-feedback .karaoke-token { border-radius: .25em; transition: color .12s, background .12s, box-shadow .12s; }
.discover-letter-instruction .karaoke-token.is-karaoke-active,
.discover-letter-feedback .karaoke-token.is-karaoke-active { color: #523800; background: #ffe58c; box-shadow: 0 2px 0 #e5bd4f; }
.discover-letter-level {
  flex: 0 0 auto;
  margin: 0;
  padding: 3px 12px;
  border-radius: 999px;
  color: #624882;
  background: rgba(255,255,255,.7);
  font-size: clamp(12px, 1.7vh, 16px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
.discover-letter-replay {
  flex: 0 0 auto;
  min-height: clamp(42px, 6vh, 54px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 4px clamp(15px, 2.5vw, 25px);
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #42c9b0, #218f8f);
  box-shadow: 0 5px 0 #19746f, 0 8px 15px rgba(32,93,91,.17);
  font: 800 clamp(16px, 2.4vh, 22px)/1.05 'Baloo 2', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .14s, filter .14s;
}
.discover-letter-replay > span:first-child { font-size: 1.3em; }
.discover-letter-replay:hover { transform: translateY(-2px); filter: brightness(1.06); }
.discover-letter-replay:active { transform: translateY(2px); }
.discover-letter-replay:focus-visible,
.discover-letter-back:focus-visible,
.discover-letter-choice:focus-visible { outline: 4px solid #3a3a7a; outline-offset: 4px; }
.discover-letter-feedback {
  flex: 0 0 auto;
  min-height: 1.2em;
  max-width: min(94vw, 820px);
  margin: 0;
  padding: 2px 10px;
  border-radius: 999px;
  color: #563681;
  font-size: clamp(16px, 2.5vh, 24px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
.discover-letter-feedback.is-correct { color: #177a62; animation: discover-letter-cheer .42s ease-out; }
.discover-letter-feedback.is-try-again { color: #a44860; }
@keyframes discover-letter-cheer { 45% { transform: scale(1.08); } }
.discover-letter-stage {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 170px;
  width: min(1100px, 100%);
  max-height: min(55vh, 520px);
  overflow: hidden;
  box-sizing: border-box;
  border: clamp(4px, .7vw, 8px) solid rgba(255,255,255,.96);
  border-radius: clamp(22px, 3vw, 34px);
  background: rgba(255,255,255,.7);
  box-shadow: 0 8px 0 rgba(100,75,142,.1), 0 14px 25px rgba(50,40,90,.12), inset 0 0 0 2px rgba(174,148,207,.12);
}
.discover-letter-options {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  touch-action: none;
}
.discover-letter-options.is-linear {
  display: grid;
  grid-template-columns: repeat(var(--option-count), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(6px, 2vw, 20px);
  padding: clamp(8px, 2vw, 22px);
}
.discover-letter-choice {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 4px;
  border: clamp(3px, .65vw, 7px) solid #fff;
  border-radius: clamp(19px, 3vw, 34px);
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--choice-color), white 16%), var(--choice-color));
  box-shadow: 0 7px 0 var(--choice-shade), 0 12px 20px rgba(57,42,87,.17);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  line-height: .95;
  text-align: center;
  text-shadow: 0 3px 0 rgba(35,30,70,.15);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s, filter .14s, box-shadow .14s, outline-color .14s;
}
.discover-letter-options.is-linear .discover-letter-choice {
  width: 100%;
  max-width: clamp(82px, 24vw, 190px);
  aspect-ratio: 1;
  font-size: clamp(34px, min(12vw, 15vh), 104px);
}
.discover-letter-screen.is-youngest .discover-letter-options.is-linear .discover-letter-choice {
  max-width: clamp(86px, 26vw, 200px);
  font-size: clamp(40px, min(14vw, 17vh), 112px);
}
.discover-letter-options.is-scattered .discover-letter-choice {
  position: absolute;
  top: var(--letter-y);
  left: var(--letter-x);
  width: clamp(68px, 13vw, 132px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  font-size: clamp(40px, 8vw, 78px);
}
.discover-letter-choice.is-digraph { font-size: clamp(27px, 6vw, 58px) !important; letter-spacing: -.045em; }
.discover-letter-choice:hover,
.discover-letter-choice.is-preview { z-index: 2; filter: brightness(1.12) saturate(1.12); outline: 5px solid #ffe17a; outline-offset: 1px; box-shadow: 0 9px 0 var(--choice-shade), 0 0 0 10px rgba(255,209,102,.22), 0 16px 26px rgba(57,42,87,.22); }
.discover-letter-options.is-linear .discover-letter-choice:hover,
.discover-letter-options.is-linear .discover-letter-choice.is-preview { transform: translateY(-5px) scale(1.06); }
.discover-letter-options.is-scattered .discover-letter-choice:hover,
.discover-letter-options.is-scattered .discover-letter-choice.is-preview { transform: translate(-50%, -50%) scale(1.08); }
.discover-letter-choice:active:not(:disabled) { filter: brightness(1.08); }
.discover-letter-choice:disabled { cursor: default; }
.discover-letter-choice.is-correct { outline: 6px solid #fff3a3; outline-offset: 2px; animation: discover-letter-correct .5s cubic-bezier(.2,.8,.25,1); }
.discover-letter-choice.is-wrong { animation: discover-letter-wrong .34s ease-in-out; }
@keyframes discover-letter-correct { 45% { filter: brightness(1.18); transform: scale(1.1); } }
@keyframes discover-letter-wrong { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.discover-letter-options.is-scattered .discover-letter-choice.is-correct { animation: discover-letter-correct-scattered .5s cubic-bezier(.2,.8,.25,1); }
@keyframes discover-letter-correct-scattered { 45% { filter: brightness(1.18); transform: translate(-50%, -50%) scale(1.1); } }
.discover-letter-footer {
  flex: 0 0 auto;
  width: min(1100px, 100%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.discover-letter-score {
  margin: 0 0 0 clamp(12px, 3vw, 28px);
  padding: 5px 13px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 999px;
  color: #604780;
  background: rgba(255,255,255,.76);
  font-size: clamp(14px, 2vh, 19px);
  font-weight: 800;
  line-height: 1.1;
}
.discover-letter-back {
  min-height: 42px;
  box-sizing: border-box;
  padding: 5px clamp(14px, 2.2vw, 24px);
  border: 3px solid #fff;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #8b68c6, #6846a7);
  box-shadow: 0 4px 0 #4b347e, 0 7px 12px rgba(47,34,79,.15);
  font: 800 clamp(15px, 2.1vh, 20px)/1.05 'Baloo 2', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.discover-letter-back:hover { filter: brightness(1.07); transform: translateY(-1px); }
@media (max-width: 560px) {
  .discover-letter-screen { gap: 5px; padding-left: 7px; padding-right: 7px; }
  .discover-letter-heading h1 { font-size: clamp(24px, 7vw, 36px); }
  .discover-letter-kicker { font-size: 10px; }
  .discover-letter-instruction { padding: 3px 9px; font-size: clamp(12px, 3.8vw, 16px); }
  .discover-letter-level { padding: 2px 9px; font-size: 12px; }
  .discover-letter-replay { min-height: 40px; padding: 3px 15px; font-size: 16px; }
  .discover-letter-feedback { font-size: clamp(14px, 4vw, 19px); }
  .discover-letter-stage { min-height: 155px; width: 100%; border-radius: 20px; }
  .discover-letter-options.is-linear { gap: 5px; padding: 6px; }
  .discover-letter-options.is-linear .discover-letter-choice { max-width: 100%; border-radius: 17px; font-size: clamp(31px, 10vw, 52px); }
  .discover-letter-screen.is-youngest .discover-letter-options.is-linear .discover-letter-choice { font-size: clamp(38px, 13vw, 66px); }
  .discover-letter-options.is-scattered .discover-letter-choice { width: clamp(64px, 21vw, 92px); border-radius: 18px; font-size: clamp(38px, 12vw, 58px); }
  .discover-letter-choice.is-digraph { font-size: clamp(24px, 7vw, 38px) !important; }
  .discover-letter-footer { gap: 6px; }
  .discover-letter-score { margin-left: clamp(10px, 3vw, 20px); padding: 4px 8px; font-size: clamp(12px, 3.4vw, 16px); }
  .discover-letter-back { min-height: 39px; padding-inline: 10px; font-size: clamp(13px, 3.8vw, 17px); }
}
@media (max-height: 560px) {
  .discover-letter-screen { gap: 3px; padding-top: max(58px, calc(env(safe-area-inset-top) + 48px)); padding-bottom: 5px; }
  .discover-letter-heading { gap: 1px; }
  .discover-letter-heading h1 { font-size: clamp(22px, 5.5vh, 32px); }
  .discover-letter-kicker { font-size: 9px; }
  .discover-letter-instruction { margin-top: 1px; padding-block: 2px; font-size: clamp(11px, 2.7vh, 15px); }
  .discover-letter-level { padding-block: 1px; font-size: 11px; }
  .discover-letter-replay { min-height: 34px; padding-block: 2px; font-size: 14px; }
  .discover-letter-feedback { min-height: 1em; font-size: clamp(13px, 2.7vh, 18px); }
  .discover-letter-stage { min-height: 118px; max-height: 44vh; }
  .discover-letter-options.is-linear .discover-letter-choice { max-width: clamp(68px, 15vh, 115px); font-size: clamp(29px, 8vh, 54px); }
  .discover-letter-options.is-scattered .discover-letter-choice { width: clamp(60px, 16vh, 100px); font-size: clamp(31px, 8vh, 58px); }
  .discover-letter-footer .discover-letter-back { min-height: 33px; padding-block: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .discover-letter-replay,
  .discover-letter-back,
  .discover-letter-choice { transition: none; }
  .discover-letter-feedback.is-correct,
  .discover-letter-choice.is-correct,
  .discover-letter-choice.is-wrong { animation: none; }
}