/* Corrupted Etrata's colors on top of the shared Miku stylesheet: blood red in place of teal,
   violet in place of pink, and blue-black mana bars. */
:root {
  --teal: #a3122f; --teal-fill: #e0334f; --teal-soft: #fbdde2; --on-fill: #23040b;
  --pink: #5a45d6; --pink-fill: #8f7bff; --pink-soft: #e6e2fd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --teal: #ff7088; --teal-soft: #3a0d16; --on-fill: #23040b; --pink: #b3a6ff; --pink-soft: #1d1840; }
}
:root[data-theme="dark"] { --teal: #ff7088; --teal-soft: #3a0d16; --on-fill: #23040b; --pink: #b3a6ff; --pink-soft: #1d1840; }
.tug i.g { background: var(--mana-u); color: var(--mana-u-ink); }
.tug i.w { background: var(--mana-b); color: var(--mana-b-ink); }

/* tools */
.cf-out { display: grid; gap: 10px; margin-top: 12px; }
/* turn solver */
.ts-in { display: grid; gap: 12px; margin-top: 10px; }
.ts-group { display: grid; gap: 6px; }
.ts-l { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ts-in .w-fields { margin: 0; }
.ts-when { justify-self: start; }
.ts-out { display: grid; gap: 10px; margin-top: 16px; }
.ts-line { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.ts-line.best { border-color: var(--teal-fill); box-shadow: 0 0 0 1px var(--teal-fill) inset, 0 12px 28px -18px var(--teal-fill); }
.ts-line.w-blocked { background: var(--surface-2); opacity: .8; }
.ts-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ts-hd b { font: 700 15px/1.25 var(--f-display); letter-spacing: -.01em; }
.ts-hd small { font-size: 12px; }
.ts-cost { margin-left: auto; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.ts-when-b { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.w-now .ts-when-b { background: var(--teal-fill); color: var(--on-fill); }
.w-next .ts-when-b { background: var(--teal-soft); color: var(--teal); }
.w-blocked .ts-when-b { background: var(--pink-soft); color: var(--pink); }
.ts-why { margin: 8px 0 0; color: var(--pink); font-size: 14px; }
.ts-line ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.5; }
.ts-threats { display: grid; gap: 8px; }
@media (min-width: 900px) {
  .ts-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .ts-in .ts-group:nth-child(2) { grid-row: span 2; }
}
.cl-sec { margin-bottom: 18px; }
.cl-sec h3 { margin: 18px 0 4px; font: 700 13px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--pink); }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-text { font-size: 15px; line-height: 1.4; }
.swap.done .cl-text { color: var(--muted); }

/* quiz */
.qz-mode { margin-bottom: 12px; }
.qz-topics { margin-bottom: 12px; }
.qz-stats { margin-bottom: 14px; }
.qz-card { padding: 18px; }
.qz-k { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.qz-q { margin: 0 0 14px; font: 700 clamp(17px, 2.4vw, 21px)/1.35 var(--f-body); }
.qz-opts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.qz-opt { width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 15px/1.35 var(--f-body); cursor: pointer; transition: border-color .15s, background .15s; }
.qz-opt:hover:not(:disabled) { border-color: var(--teal-fill); }
.qz-opt.picked { border-color: var(--teal-fill); background: var(--teal-soft); }
.qz-opt.right { border-color: var(--teal-fill); background: var(--teal-soft); }
.qz-opt.wrong { border-color: var(--pink-fill); background: var(--pink-soft); }
.qz-opt:disabled { cursor: default; }
.qz-explain, .qz-back { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); margin-bottom: 12px; }
.qz-explain p, .qz-back p { margin: 0 0 6px; }
.qz-act { align-items: center; }


/* the game table takes Corrupted Etrata's blood red in place of Miku's teal */
:root .mg { --miku: #e0334f; --miku-ink: #ff7088; --on-miku: #23040b; }

/* combo checker */
.cc-lines { display: grid; gap: 10px; margin-top: 14px; }
.cc-line { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.cc-line.live { border-color: var(--teal-fill); box-shadow: 0 0 0 1px var(--teal-fill) inset, 0 12px 28px -18px var(--teal-fill); }
.cc-line.near .ts-when-b { background: var(--teal-soft); color: var(--teal); }
.cc-line.live .ts-when-b { background: var(--teal-fill); color: var(--on-fill); }
.cc-line p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; }
.cc-line .cc-need { color: var(--ink-soft); }