/* Flash Cards: the HTML game inside the theater's stage. House style: chunky ink borders,
   rounded panels, the palette tokens from site.css. */

#fc-root {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--cream);
  color: var(--ink);
  padding: 0 0 28px;
  font-family: var(--font-body);
}

.fc-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 14px;
  background: rgba(255, 248, 236, 0.96);
  border-bottom: 2px solid var(--rule);
}

.fc-title {
  margin: 0;
  font-size: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-body {
  padding: 14px 14px 0;
  max-width: 560px;
  margin: 0 auto;
}

.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 18px;
  border: var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  font: 800 1rem/1.1 var(--font-body);
  cursor: pointer;
  touch-action: manipulation;
}

.fc-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

.fc-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.fc-back {
  width: 42px;
  min-height: 42px;
  padding: 0;
  box-shadow: 0 3px 0 var(--ink);
}

.fc-back .i {
  width: 20px;
  height: 20px;
}

.fc-got {
  background: var(--mint);
}

.fc-again {
  background: #FFE0EA;
}

.fc-ghost {
  box-shadow: none;
  border-width: 2px;
  min-height: 42px;
}

.fc-danger {
  color: #C2334F;
}

.fc-wide {
  width: 100%;
  margin-top: 8px;
}

.fc-h {
  margin: 18px 0 10px;
  font-size: 1.1rem;
}

.fc-sub,
.fc-hint,
.fc-note {
  margin: 8px 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}

.fc-note {
  text-align: left;
  font-weight: 600;
}

.fc-hero {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fc-lede {
  margin: 0;
  font: 600 1.1rem/1.3 var(--font-display);
}

.fc-buddy {
  flex: 0 0 auto;
  width: 66px;
  height: 88px;
}

.fc-buddy.is-hop {
  animation: hop 380ms ease-in-out 2;
}

/* Deck tiles */
.fc-decks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fc-deck {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 92px;
  padding: 12px;
  border: var(--border);
  border-radius: 16px;
  background: var(--accent-soft, var(--panel));
  box-shadow: 0 4px 0 var(--ink);
  border-left-width: 10px;
  border-left-color: var(--accent, var(--ink));
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  font: inherit;
  color: inherit;
}

.fc-deck:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink);
}

.fc-deck-title {
  font: 600 1.05rem/1.2 var(--font-display);
}

.fc-deck-meta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.fc-deck-new {
  border-style: dashed;
  border-left-width: 3px;
  background: var(--panel);
  box-shadow: none;
}

.fc-deck-new .i {
  width: 22px;
  height: 22px;
  color: var(--violet);
}

/* Deck page */
.fc-meter {
  height: 16px;
  border: var(--border);
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
}

.fc-meter-fill {
  display: block;
  height: 100%;
  background: var(--mint);
}

.fc-modes {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.fc-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  border: var(--border);
  border-radius: 18px;
  background: var(--accent-soft, var(--panel));
  box-shadow: 0 4px 0 var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

.fc-mode:disabled {
  opacity: 0.5;
  cursor: default;
}

.fc-mode-title {
  font: 600 1.35rem/1.1 var(--font-display);
}

.fc-mode-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}

.fc-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* The card */
.fc-stage {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.fc-stage-result {
  flex-direction: column;
  align-items: center;
}

.fc-stage-result .fc-buddy {
  width: 96px;
  height: 128px;
}

.fc-card {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 210px;
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 900px;
  cursor: pointer;
  touch-action: manipulation;
  font: inherit;
  color: inherit;
}

.fc-card-inner {
  position: absolute;
  inset: 0;
  transition: transform 380ms cubic-bezier(.2, .9, .3, 1.1);
  transform-style: preserve-3d;
}

.fc-card.is-flipped .fc-card-inner {
  transform: rotateY(180deg);
}

.fc-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: var(--border);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 6px 0 var(--ink);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font: 600 clamp(1.4rem, 7vw, 2.1rem)/1.2 var(--font-display);
  text-align: center;
  overflow-wrap: anywhere;
}

.fc-face-back {
  background: #DDF7E8;
  transform: rotateY(180deg);
}

.fc-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 16px;
  border: var(--border);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 6px 0 var(--ink);
  font: 600 clamp(1.4rem, 7vw, 2rem)/1.2 var(--font-display);
  text-align: center;
  cursor: default;
}

.fc-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.fc-actions.is-waiting .fc-btn {
  opacity: 0.55;
}

/* Quiz */
.fc-options {
  display: grid;
  gap: 8px;
}

.fc-option {
  justify-content: flex-start;
  border-radius: 16px;
  min-height: 52px;
  text-align: left;
}

.fc-option.is-right {
  background: var(--mint);
}

.fc-option.is-wrong {
  background: #FFB3C6;
}

/* Match */
.fc-match-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.fc-clock {
  margin: 0;
  font: 600 1.8rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.fc-match {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.fc-tile {
  min-height: 74px;
  padding: 6px;
  border-radius: 14px;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  box-shadow: 0 3px 0 var(--ink);
}

.fc-tile.is-picked {
  background: var(--sun);
}

.fc-tile.is-done {
  background: var(--mint);
  opacity: 0.55;
  box-shadow: none;
  cursor: default;
}

/* Results */
.fc-result {
  margin: 8px 0 0;
  font: 600 1.6rem/1.2 var(--font-display);
  text-align: center;
}

.fc-reward {
  margin: 4px 0 0;
  padding: 4px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #FFF6D6;
  font-weight: 800;
}

/* Editor and sharing */
.fc-warn {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: #FFF2BF;
  font-weight: 700;
  font-size: 0.92rem;
}

.fc-input {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--panel);
  font: 700 1rem var(--font-body);
  color: var(--ink);
}

.fc-input:focus {
  outline: 3px solid var(--violet);
  outline-offset: 1px;
}

.fc-rows {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.fc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
  gap: 6px;
}

.fc-x {
  width: 40px;
  min-height: 46px;
  padding: 0;
  box-shadow: none;
  border-width: 2px;
}

.fc-x .i {
  width: 16px;
  height: 16px;
}

.fc-paste {
  margin-top: 10px;
  resize: vertical;
}

.fc-msg {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: #C2334F;
  font-weight: 800;
}

.fc-link {
  font-size: 0.85rem;
}

.fc-shared {
  padding: 16px;
  border: var(--border);
  border-radius: 18px;
  background: #F1EDFF;
}

.fc-shared .i {
  width: 34px;
  height: 34px;
  color: var(--violet);
}

.fc-shared .fc-h {
  margin-top: 6px;
}

@media (min-width: 600px) {
  .fc-decks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fc-buddy {
    width: 84px;
    height: 112px;
  }

  .fc-match {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

html.calm .fc-card-inner,
html.calm .fc-buddy {
  transition: none;
  animation: none;
}