/* The funny game's additions to the study page styles (study/study.css stays
   as the study's own): the Stop pill in endless, the game-over sheet, the
   mode cards and the lives. */

.study-body #action-clear.is-hover {
  background: rgba(17, 17, 17, 0.07);
  color: var(--ink);
}

.study-body #action-clear.is-confirm {
  color: var(--ed-red, #d6452b);
}

.study-sheet.is-gameover {
  align-items: center;
  gap: 18px;
}

/* modes: two cards over the keyboard */
.study-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
}

.study-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: calc(var(--key-height, 10vmin) * 2.4);
  padding: 18px;
  border: 1px solid var(--ink);
  text-align: center;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.study-mode b {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vmin, 3rem);
  font-weight: 400;
}

.study-mode span {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.study-mode em {
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.study-mode.is-hover {
  background: var(--ink);
  color: #ffffff;
}

.study-mode.is-hover span,
.study-mode.is-hover em {
  color: rgba(255, 255, 255, 0.75);
}

/* endless: lives in the kicker */
.study-lives {
  display: inline-flex;
  gap: 3px;
  margin-left: 8px;
  vertical-align: -3px;
  color: var(--ed-red, #d6452b);
}

.study-lives .study-icon {
  width: 14px;
  height: 14px;
}

/* a result: one headline number, one quiet line of the rest */
.result-hero {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.result-hero b {
  font-family: var(--font-serif);
  font-size: clamp(3.4rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.result-hero > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.result-line {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.result-line i {
  margin: 0 0.35em;
  font-style: normal;
  color: var(--ink-faint);
}

/* Start / Next / Stop: no bar behind the word; the word grows and throws
   sparks while the cursor is on it (funny.js) */
.study-body .action-next,
.study-body #action-clear {
  transition: transform 160ms ease, color 160ms ease, letter-spacing 160ms ease;
}

.study-body .action-next.is-hover,
.study-body #action-clear.is-hover,
.study-body.is-pointer .action-pill.is-hover,
.study-body .action-next.is-confirm.is-hover {
  background: transparent;
  color: var(--fx-accent, var(--ink));
  transform: scale(1.18);
  letter-spacing: 0.04em;
}

/* on a result the headline number is the score: the running one steps aside */
.funny-body[data-screen="gameover"] #funny-score,
.funny-body[data-screen="summary"] #funny-score {
  visibility: hidden;
}

/* the player's name, top left on the mode screen, and the way to change it */
.funny-name[hidden],
.funny-name-form[hidden] {
  display: none;
}

.funny-name {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink);
}

.funny-name-change {
  margin-left: 6px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-faint);
}

.funny-name-form {
  display: flex;
  margin-top: 6px;
  border: 1px solid var(--ink);
  width: max-content;
}

.funny-name-form input {
  width: 9rem;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  outline: none;
}

.funny-name-form button {
  padding: 0 12px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* on the Ready screen the name line (with "change name") is the only name */
.funny-body[data-screen="ready"] #study-info-detail {
  display: none;
}
.funny-body[data-screen="ready"] .funny-name {
  margin-top: 4px;
}

/* the per-phrase result: no card, the numbers float over the output line
   (the study keeps its solid one) */
.funny-body .study-flash {
  background: transparent;
}

/* the game's lights, backgrounds and ink fill the whole screen: no margin
   around the frame (the effects live inside it) */
.funny-body .display-stage {
  padding: 0;
}
.funny-body .display-frame {
  border: none;
  border-radius: 0;
  padding: 4vmin;
}

/* the guide on a run's first phrase: a ghost swipe over the keys */
.funny-ghost {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: opacity 250ms ease;
}
.funny-ghost.is-paused {
  opacity: 0 !important;
}
.funny-ghost-line {
  fill: none;
  stroke: var(--fx-accent, #d6452b);
  stroke-opacity: 0.32;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
.funny-ghost-dot {
  fill: var(--fx-accent, #d6452b);
  fill-opacity: 0.5;
}