/* Forgetting curve. Everything scoped under .fc-*. */

.fc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fc-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 300px; }
.fc-hero img { display: block; width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }

/* a syllable tile */
.fc-syl { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; padding: 16px 24px; border-radius: 16px;
  background: #F4EEE2; color: #1B1A22; font: 700 40px var(--mono); letter-spacing: .12em; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.fc-syl.fc-in { animation: fcIn .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fcIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.fc-syl.fc-wait { background: transparent; border: 2px dashed var(--line-strong); box-shadow: none; color: var(--faint); }
.fc-syl.fc-small { font: 600 20px var(--sans); letter-spacing: .02em; min-height: 82px; }
.fc-syl.fc-q { color: #6B6558; }
.fc-syl.fc-mini { min-width: 0; padding: 8px 12px; font-size: 20px; border-radius: 10px; }
.fc-slot { min-height: 92px; display: grid; place-items: center; }
.fc-row3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 320px; }
.fc-six { max-width: 280px; }
.fc-etc { font: 700 20px var(--mono); color: var(--faint); align-self: center; }
.fc-dots { display: flex; gap: 7px; }
.fc-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); }
.fc-dots i.now { border-color: var(--violet-bright); background: var(--violet-bright); }
.fc-dots i.done { background: var(--raised); border-color: var(--dim); }
.fc-count { font: 600 13px var(--mono); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }

/* the three answers */
.fc-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 380px; margin: 0 auto; }
.fc-opt { height: 64px; border-radius: 14px; border: 2px solid var(--line-strong); border-bottom-width: 4px; background: var(--raised); color: var(--text);
  font: 700 24px var(--mono); letter-spacing: .1em; padding: 0; }
.fc-opt:disabled { opacity: .55; }
.fc-opt.ok { opacity: 1; background: var(--mint); border-color: var(--mint); color: var(--mint-ink); }
.fc-opt.no { opacity: 1; background: var(--red); border-color: var(--red); color: #fff; }

/* Ebbinghaus */
.fc-man { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fc-man img { width: 190px; max-height: 32vh; object-fit: cover; object-position: top; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.fc-man figcaption { font-size: 13px; font-weight: 700; color: var(--dim); }

/* savings bars */
.fc-bars { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 14px; }
.fc-br { display: grid; grid-template-columns: 1fr 64px; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.fc-br.in { opacity: 1; transform: none; }
.fc-br span { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.fc-bt { height: 18px; border-radius: 9px; background: rgba(234, 227, 215, .08); overflow: hidden; }
.fc-bt i { display: block; height: 100%; border-radius: 9px; background: var(--violet); }
.fc-br.again .fc-bt i { background: var(--violet-bright); }
.fc-br.saved .fc-bt i { background: var(--gold); }
.fc-br.saved span, .fc-br.saved b { color: var(--gold); }
.fc-br b { font: 700 15px var(--mono); color: var(--text); text-align: right; }

/* the chart */
.fc-chart { width: 100%; max-width: 340px; overflow: visible; }
.fc-grid { stroke: var(--line); stroke-width: 1; }
.fc-tk { font: 500 13px var(--sans); fill: var(--dim); }
.fc-yl { font: 700 13px var(--sans); fill: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.fc-cap { font: 600 13px var(--sans); fill: var(--faint); text-anchor: middle; }
.fc-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.fc-line.ebb { stroke: var(--gold); }
.fc-line.dros { stroke: var(--violet-bright); stroke-dasharray: 2 6; }
.fc-line.you { stroke: var(--mint); }
.fc-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.fc-dot.start { fill: var(--text); }
.fc-dot.ghost { fill: none; stroke: var(--mint); stroke-width: 3; stroke-dasharray: 3 3; }
.fc-dot.dros { fill: var(--violet-bright); r: 5; }
.fc-dot.mine { fill: var(--mint); }
.fc-val { font: 700 14px var(--mono); fill: var(--gold); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.fc-val.you { fill: var(--mint); }
.fc-keys { display: flex; gap: 16px; justify-content: center; }
.fc-keys .k { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.fc-keys .k::before { content: ''; width: 18px; height: 4px; border-radius: 2px; }
.fc-keys .k.ebb { color: var(--gold); } .fc-keys .k.ebb::before { background: var(--gold); }
.fc-keys .k.dros { color: var(--violet-bright); } .fc-keys .k.dros::before { background: var(--violet-bright); }

/* your two scores */
.fc-cols { display: flex; justify-content: center; align-items: flex-end; gap: 36px; width: 100%; max-width: 320px; }
.fc-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 110px; opacity: 0; transition: opacity .3s; }
.fc-col.in { opacity: 1; }
.fc-cb { width: 64px; height: 170px; border-radius: 12px; background: rgba(234, 227, 215, .08); display: flex; align-items: flex-end; overflow: hidden; }
.fc-cb i { display: block; width: 100%; border-radius: 12px; background: var(--violet-bright); transform-origin: bottom; }
.fc-col.in .fc-cb i { animation: fcGrow .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fcGrow { from { transform: scaleY(0); } }
.fc-col.now .fc-cb i { background: var(--mint); }
.fc-col b { font: 700 18px var(--mono); color: var(--text); }
.fc-col span { font-size: 13px; font-weight: 700; color: var(--dim); text-align: center; }

/* two cards side by side */
.fc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.fc-pp { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); }
.fc-pp b { font: 700 17px var(--sans); color: var(--text); }
.fc-pp span { font-size: 14px; line-height: 1.35; color: var(--dim); }
.fc-pp em { font-style: normal; font: 700 14px var(--sans); margin-top: 4px; }
.fc-pp em.slow { color: var(--mint); }
.fc-pp em.fast { color: var(--red); }

/* the week */
.fc-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; max-width: 340px; }
.fc-day { min-height: 92px; border-radius: 12px; background: var(--raised); border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; }
.fc-day b { font: 700 14px var(--sans); color: var(--dim); }
.fc-day span { font-size: 13px; font-weight: 700; color: var(--gold); text-align: center; line-height: 1.2; }
.fc-day.on { border-color: var(--gold); }
.fc-day.drop { background: rgba(216, 85, 85, .18); border-color: var(--red); }

@media (max-height: 700px) {
  .fc-syl { font-size: 34px; padding: 12px 20px; }
  .fc-hero img { max-height: 28vh; }
  .fc-man img { max-height: 26vh; width: 160px; }
  .fc-chart { max-width: 300px; }
  .fc-opt { height: 56px; }
  .fc-cb { height: 130px; }
}