/* Persona 3 Reload and Persona 5 styles, layered over app.css.
   Light, Dark and Automatic are defined in app.css and untouched here.
   The web fonts come from Google Fonts when online; every stack ends in
   system fonts so the app still reads well offline. */

@font-face {
  font-family: "BM Space";
  src: url("../fonts/bm-space.ttf") format("truetype");
  font-display: swap;
}

/* ---------- style picker (all themes) */
.theme-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; margin-bottom: 8px; }
.theme-tile {
  display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
}
.theme-tile[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent); }
.tile-prev { position: relative; display: block; height: 84px; overflow: hidden; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.tile-text { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.tile-text b { font-size: 15px; line-height: 1.2; }
.tile-text span { font-size: 13px; color: var(--text-2); line-height: 1.3; }
.tile-text .tile-default {
  align-self: flex-start; background: var(--accent); color: var(--accent-text);
  padding: 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.tp-word { position: absolute; left: 12px; top: 26px; }
.tp-word > span { display: block; }
.tp-p3r { background: linear-gradient(105deg, #050c2e 58%, #0a1752 58%); }
.tp-p3r::after { content: ""; position: absolute; right: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: #e8f1ff; box-shadow: inset -6px 0 0 #14308c; }
.tp-p3r .tp-word { filter: drop-shadow(5px 4px 0 #4fe0ff); }
.tp-p3r .tp-word > span {
  background: #fff; color: #050c2e; padding: 0 14px 0 10px; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  font: italic 900 22px/1.15 "Saira", "Bahnschrift", system-ui, sans-serif; text-transform: uppercase;
}
.tp-p5 {
  background:
    radial-gradient(#a10e14 2px, transparent 2.4px) 0 0 / 12px 12px,
    #d7141a;
}
.tp-p5::before { content: ""; position: absolute; left: -10px; bottom: -18px; width: 70%; height: 70%; background: #0b0b0b; clip-path: polygon(0 20%, 80% 0, 100% 70%, 0 100%); }
.tp-p5 .tp-word > span { text-transform: uppercase; background: #fff; color: #0b0b0b; padding: 0 8px; font: 400 24px/1.15 "Anton", Impact, "Arial Black", sans-serif; transform: rotate(-6deg); box-shadow: 4px 4px 0 #0b0b0b; }
.tp-light { background: #f6f4ef; }
.tp-dark { background: #151412; }
.tp-light .tp-word, .tp-dark .tp-word {
  left: 14px; right: 14px; top: 14px; bottom: 14px; padding: 8px 12px; border-radius: 10px;
  font: 700 18px/1.2 system-ui, sans-serif;
}
.tp-light .tp-word { background: #fff; border: 1px solid #e2ddd3; color: #22201c; }
.tp-dark .tp-word { background: #1f1d1a; border: 1px solid #36322b; color: #f0ece4; }
.tp-light .tp-word::after, .tp-dark .tp-word::after { content: "12 new"; display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: 2px; }
.tp-light .tp-word::after { background: #b8432f; color: #fff; }
.tp-dark .tp-word::after { background: #e0745f; color: #1a0d09; }
.tp-light .tp-word > span, .tp-dark .tp-word > span { display: inline; }
.tp-auto { background: linear-gradient(110deg, #f6f4ef 50%, #151412 50%); display: flex; align-items: center; justify-content: space-around; }
.tp-auto i { font: 700 20px system-ui, sans-serif; font-style: normal; color: #22201c; }
.tp-auto i + i { color: #f0ece4; }

/* =====================================================================
   Persona 3 Reload: deep blue, slanted shapes, cyan highlights.
   ===================================================================== */
:root[data-theme="p3r"] {
  --bg: #050c2e;
  --surface: #0b1a5c;
  --surface-2: #071442;
  --surface-hi: #13287a;
  --text: #ffffff;
  --text-2: #b9cdfa;
  --text-3: #7f95d6;
  --border: #1b2a6b;
  --border-strong: #2a3d8a;
  --accent: #4fe0ff;
  --accent-text: #050c2e;
  --accent-soft: #0c2f63;
  --ink: #050c2e;
  --glow: #4fe0ff;
  --good: #4fe0ff;
  --good-soft: #0c2f63;
  --bad: #ff4d6d;
  --bad-soft: #3a0f2e;
  --warn: #ffd166;
  --warn-soft: #2a2410;
  --sel: #4fe0ff;
  --sel-soft: #0c2f63;
  --apprentice: #4fe0ff;
  --guru: #39b6ff;
  --master: #3a86ff;
  --enlightened: #a9b9ff;
  --burned: #ffffff;
  --band: #0a1752;
  --band-2: #10236f;
  --ring: #14308c;
  --watermark: #0a1650;
  --radius: 0;
  --radius-sm: 0;
  --shadow: none;
  --font: "Ysabeau", "Segoe UI", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  --font-head: "Saira", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "BM Space", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
/* Reviews happen in the green "Dark Hour". */
:root[data-theme="p3r"][data-screen="review"] {
  --bg: #04130d;
  --surface: #0a2a1d;
  --surface-2: #061d14;
  --surface-hi: #12402a;
  --text-2: #d8f5c4;
  --text-3: #8fb88a;
  --border: #12402a;
  --border-strong: #1d5a3c;
  --accent: #b4f05a;
  --accent-text: #04130d;
  --accent-soft: #12402a;
  --ink: #04130d;
  --glow: #b4f05a;
  --good: #b4f05a;
  --good-soft: #12402a;
  --bad-soft: #3a1020;
  --sel: #b4f05a;
  --sel-soft: #12402a;
  --band: #071d14;
  --band-2: #0b2a1d;
  --ring: #12402a;
  --watermark: #072014;
}

:root[data-theme="p3r"] body { font-family: var(--font); font-weight: 500; }
:root[data-theme="p3r"] :is(.jp, [lang="ja"]) { font-style: normal; }
:root[data-theme="p3r"] a { color: var(--accent); }

/* Background: a slanted band, moon rings and a big faint 勉強. */
:root[data-theme="p3r"] body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  top: -20%; right: -22%; width: 64%; height: 150%;
  background: linear-gradient(90deg, var(--band-2) 0 34px, var(--band) 34px);
  transform: skewX(-16deg);
}
:root[data-theme="p3r"] body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  right: -170px; top: -190px; width: 660px; height: 660px; border-radius: 50%;
  background: radial-gradient(circle,
    transparent 0 179px, var(--ring) 179px 181px,
    transparent 181px 235px, var(--ring) 235px 237px,
    transparent 237px 291px, var(--ring) 291px 293px, transparent 293px);
}
/* The pale moon only fits beside the study column on wide screens. */
@media (min-width: 900px) {
  :root[data-theme="p3r"][data-screen="review"] body::after {
    background: radial-gradient(circle,
      #e6f5a8 0 170px, transparent 170px 239px,
      var(--ring) 239px 241px, transparent 241px 289px, var(--ring) 289px 291px, transparent 291px);
  }
}
:root[data-theme="p3r"] .study-top .muted { background: var(--surface-2); color: var(--text-2); padding: 2px 10px; }
:root[data-theme="p3r"] .study-top .btn.ghost { --face: var(--surface-2); }
:root[data-theme="p3r"] #app::before {
  content: "勉強"; position: fixed; z-index: -1; pointer-events: none;
  left: -30px; bottom: -0.3em; font: 900 clamp(180px, 38vw, 400px)/1 var(--font-jp);
  color: var(--watermark); white-space: nowrap;
}

/* Type */
:root[data-theme="p3r"] :is(h1, h2, h3, .brand, .big-num, .stat .value, .days b, .nav button, .seg button, .btn, .opt, .match button, .prompt-kind, .step-label, .badge, .tile-text b, .meet .meaning, .prompt .en-big) {
  font-family: var(--font-head);
}
:root[data-theme="p3r"] h1 {
  font-style: italic; font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(32px, 8vw, 52px); line-height: 1; letter-spacing: -0.5px; margin: 0 0 8px;
}
:root[data-theme="p3r"] h2 {
  width: fit-content; max-width: 100%; position: relative;
  background: #fff; color: var(--ink);
  padding: 2px 22px 2px 14px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font-style: italic; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: 2px; font-size: 18px;
}
:root[data-theme="p3r"] h3 { font-style: italic; font-weight: 800; font-size: 18px; }
:root[data-theme="p3r"] :is(.big-num, .stat .value, .days b) { font-style: italic; font-weight: 900; }
:root[data-theme="p3r"] .big-num { font-size: 52px; line-height: 1; color: var(--accent); }
:root[data-theme="p3r"] .stat .value { font-size: 28px; }
:root[data-theme="p3r"] .stat .label, :root[data-theme="p3r"] .step-label { font-family: var(--font-head); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
:root[data-theme="p3r"] .meet .meaning, :root[data-theme="p3r"] .prompt .en-big { font-style: italic; font-weight: 800; }
:root[data-theme="p3r"] .kbd, :root[data-theme="p3r"] .opt .num {
  font-family: var(--font-mono); font-size: 18px; line-height: 1; font-weight: 400; font-style: normal;
  background: #fff; color: var(--ink); border: 0; border-radius: 3px; padding: 2px 5px 1px; letter-spacing: 0;
}

/* Shell */
:root[data-theme="p3r"] .topbar { background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom-color: var(--border); }
:root[data-theme="p3r"] .brand { font-style: italic; font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 1px; }
:root[data-theme="p3r"] .seg { background: transparent; padding: 0; gap: 6px; }
:root[data-theme="p3r"] .nav { gap: 2px; padding-bottom: 6px; }
:root[data-theme="p3r"] .nav button { border-bottom: 0; padding: 6px 18px; font-style: italic; font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-2); }

/* Slanted controls. The face is drawn by ::before so the button itself is not
   clipped and keeps its focus ring; ::after draws the hard offset glow. */
:root[data-theme="p3r"] :is(.btn, .seg button, .nav button, .opt, .match button, .chip, .badge, .prompt-kind) {
  --face: var(--surface-2); --cut: 10px;
  position: relative; isolation: isolate;
  background: transparent; border-color: transparent; border-radius: 0; box-shadow: none;
}
:root[data-theme="p3r"] :is(.btn, .seg button, .nav button, .opt, .match button, .chip, .badge, .prompt-kind)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--face);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}
:root[data-theme="p3r"] :is(.btn.primary, .seg button[aria-pressed="true"], .opt.sel, .match .sel, .theme-tile[aria-pressed="true"], .study-card)::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--glow);
  clip-path: var(--shape, polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%));
  transform: translate(8px, 6px);
}
:root[data-theme="p3r"] .btn { font-style: italic; font-weight: 800; letter-spacing: .5px; padding: 9px 22px; }
:root[data-theme="p3r"] .btn:hover { background: transparent; --face: var(--surface-hi); }
:root[data-theme="p3r"] .btn.primary { --face: #fff; color: var(--ink); font-weight: 900; }
:root[data-theme="p3r"] .btn.primary:hover { filter: none; --face: #e4f6ff; }
:root[data-theme="p3r"] .btn.primary .kbd { background: var(--ink); color: #fff; }
:root[data-theme="p3r"] .btn.ghost { --face: transparent; }
:root[data-theme="p3r"] .btn.ghost:hover { --face: var(--surface-2); }
:root[data-theme="p3r"] .btn.danger { color: var(--bad); }
:root[data-theme="p3r"] .btn.btn.btn[disabled]::after { content: none; }
:root[data-theme="p3r"] .seg button { --face: var(--surface); color: var(--text-2); font-style: italic; font-weight: 800; padding: 6px 20px; }
:root[data-theme="p3r"] .seg button[aria-pressed="true"] { --face: #fff; color: var(--ink); font-weight: 900; }
:root[data-theme="p3r"] .nav button { --face: transparent; }
:root[data-theme="p3r"] .nav button:hover { --face: var(--surface); color: var(--text); }
:root[data-theme="p3r"] .nav button[aria-current="page"] { --face: #fff; color: var(--ink); }
:root[data-theme="p3r"] .opt, :root[data-theme="p3r"] .match button { --face: var(--surface-2); --cut: 14px; padding-left: 20px; padding-right: 20px; font-style: italic; font-weight: 800; font-size: 18px; }
:root[data-theme="p3r"] :is(.opt, .match button):not(.ok, .bad, .sel, .done, [disabled]):hover { background: transparent; --face: var(--surface-hi); }
:root[data-theme="p3r"] :is(.opt, .match button) :is(.jp-opt, .jp) { font-weight: 700; }
/* Furigana on answer buttons takes the button's own text color, so it stays
   readable on every face (dark, cyan, red, white). */
:root:is([data-theme="p3r"], [data-theme="p5"]) :is(.opt, .match button) rt { color: inherit; opacity: .85; }
:root[data-theme="p3r"] .opt .opt-sub { color: inherit; opacity: .85; font-family: var(--font); font-style: normal; }
:root[data-theme="p3r"] :is(.opt.ok, .match .ok) { --face: var(--good); color: var(--ink); }
:root[data-theme="p3r"] :is(.opt.bad, .match .bad) { --face: var(--bad); color: var(--ink); }
:root[data-theme="p3r"] :is(.opt.sel, .match .sel) { --face: #fff; color: var(--ink); }
:root[data-theme="p3r"] :is(.opt.ok, .opt.bad, .opt.sel) .num { background: var(--ink); color: #fff; }
:root[data-theme="p3r"] .opt.ok > :last-child::after { content: "  ✓"; white-space: pre; font-style: normal; font-weight: 900; }
:root[data-theme="p3r"] .opt.bad > :last-child::after { content: "  ✕"; white-space: pre; font-style: normal; font-weight: 900; }
:root[data-theme="p3r"] .chip { --cut: 6px; --face: var(--surface-2); padding: 4px 14px; }
:root[data-theme="p3r"] .chip.learned { --face: #123a8c; color: var(--good); }
:root[data-theme="p3r"] .badge { --cut: 5px; --face: var(--surface-2); color: var(--text-2); font-style: italic; font-weight: 800; padding: 2px 12px; letter-spacing: .5px; text-transform: uppercase; }
:root[data-theme="p3r"] :is(.badge.apprentice, .badge.guru, .badge.master, .badge.enlightened, .badge.burned, .badge.ok, .badge.bad) { color: var(--ink); background: transparent; }
:root[data-theme="p3r"] .badge.apprentice { --face: var(--apprentice); }
:root[data-theme="p3r"] .badge.guru { --face: var(--guru); }
:root[data-theme="p3r"] .badge.master { --face: var(--master); }
:root[data-theme="p3r"] .badge.enlightened { --face: var(--enlightened); }
:root[data-theme="p3r"] .badge.burned { --face: var(--burned); }
:root[data-theme="p3r"] .badge.ok { --face: var(--good); }
:root[data-theme="p3r"] .badge.bad { --face: var(--bad); }
:root[data-theme="p3r"] .prompt-kind { --cut: 8px; padding: 4px 20px; border-radius: 0; color: var(--ink); font-style: italic; font-weight: 900; letter-spacing: 2px; }
:root[data-theme="p3r"] .prompt-kind.meaning { --face: #fff; }
:root[data-theme="p3r"] .prompt-kind.reading { --face: var(--accent); }
:root[data-theme="p3r"] .prompt-kind.fill { --face: var(--warn); }

/* Panels with cut corners */
:root[data-theme="p3r"] :is(.card, .list, .stat, .notice, .feedback, .pattern, .modal) {
  border: 0; border-radius: 0;
  clip-path: polygon(var(--c, 16px) 0, 100% 0, 100% calc(100% - var(--c, 16px)), calc(100% - var(--c, 16px)) 100%, 0 100%, 0 var(--c, 16px));
}
:root[data-theme="p3r"] .stat { --c: 0px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
:root[data-theme="p3r"] :is(.notice, .feedback, .pattern) { --c: 10px; }
:root[data-theme="p3r"] .card { background: var(--surface); }
:root[data-theme="p3r"] .list { background: var(--surface); }
:root[data-theme="p3r"] .lesson-body { background: var(--surface-2); }
:root[data-theme="p3r"] .li.click:hover { background: var(--surface-hi); }
:root[data-theme="p3r"] .feedback .detail { color: var(--text); }
:root[data-theme="p3r"] .study-card, :root[data-theme="p3r"] .theme-tile {
  --shape: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  position: relative; isolation: isolate; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
:root[data-theme="p3r"] .study-card::before, :root[data-theme="p3r"] .theme-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face, var(--surface)); clip-path: var(--shape);
}
:root[data-theme="p3r"] .theme-tile { --shape: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); --face: var(--surface-2); }
:root[data-theme="p3r"] .theme-tile[aria-pressed="true"] { --face: #fff; color: var(--ink); box-shadow: none; }
:root[data-theme="p3r"] .theme-tile[aria-pressed="true"] .tile-text span { color: #1a4fd6; }
:root[data-theme="p3r"] .tile-text b { font-style: italic; font-weight: 900; text-transform: uppercase; }
:root[data-theme="p3r"] .tile-text .tile-default { background: var(--accent); color: var(--ink); font-family: var(--font-mono); font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; }
:root[data-theme="p3r"] .tile-prev { border-radius: 0; }
:root[data-theme="p3r"] .modal { background: var(--surface); }
:root[data-theme="p3r"] .modal-back { background: rgba(2, 6, 24, 0.72); }
:root[data-theme="p3r"] .mnemo { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
:root[data-theme="p3r"] .mnemo-tag { border-radius: 0; font-style: italic; font-weight: 700; }

/* Inputs, bars, toggles */
:root[data-theme="p3r"] :is(input[type="text"], input[type="search"], input[type="number"], select, .notes-modal textarea) {
  background: var(--surface-2); border: 0; border-bottom: 3px solid var(--accent); border-radius: 0; color: var(--text);
}
:root[data-theme="p3r"] .answer-row input { font-size: 24px; min-height: 60px; }
:root[data-theme="p3r"] .answer-row input.ok { background: var(--good-soft); border-bottom-color: var(--good); color: var(--text); }
:root[data-theme="p3r"] .answer-row input.bad { background: var(--bad-soft); border-bottom-color: var(--bad); color: var(--text); }
:root[data-theme="p3r"] :is(input, select, button):focus-visible, :root[data-theme="p3r"] input:focus, :root[data-theme="p3r"] select:focus { outline: 2px solid #fff; outline-offset: 2px; }
:root[data-theme="p3r"] :is(.stages, .progress) { border-radius: 0; transform: skewX(-24deg); background: var(--surface-2); }
:root[data-theme="p3r"] .progress { height: 10px; }
:root[data-theme="p3r"] .stages { height: 14px; }
:root[data-theme="p3r"] .legend i { border-radius: 0; transform: skewX(-20deg); }
:root[data-theme="p3r"] .bars div { border-radius: 0; opacity: 1; }
:root[data-theme="p3r"] .days div { border-radius: 0; background: var(--surface-2); }
:root[data-theme="p3r"] .days div:first-child { background: #fff; color: var(--ink); }
:root[data-theme="p3r"] .days div:first-child span { color: #1a4fd6; }
/* The track is skewed rather than clipped, so the knob leans with it and keeps
   an even gap on every side. Off is a dim knob in an outlined slot. */
:root[data-theme="p3r"] .switch span { border-radius: 0; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--border-strong); transform: skewX(-16deg); }
:root[data-theme="p3r"] .switch span::after { border-radius: 0; box-shadow: none; width: 18px; height: 20px; left: 4px; top: 4px; background: var(--text-3); }
:root[data-theme="p3r"] .switch input:checked + span { background: var(--accent); box-shadow: none; }
:root[data-theme="p3r"] .switch input:checked + span::after { background: var(--ink); transform: translateX(20px); }
:root[data-theme="p3r"] .sentence .blank { border-bottom-color: var(--accent); }
:root[data-theme="p3r"] .example { border-top-color: var(--border); }
:root[data-theme="p3r"] .toast {
  background: #fff; color: var(--ink); border-radius: 0; font: italic 800 15px var(--font-head); letter-spacing: .5px;
  padding: 10px 26px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* =====================================================================
   Persona 5: red and black, tilted cut-outs, hard shadows.
   ===================================================================== */
:root[data-theme="p5"] {
  --bg: #0b0b0b;
  --surface: #0b0b0b;
  --surface-2: #1d1d1d;
  --surface-hi: #2a2a2a;
  --text: #ffffff;
  --text-2: #cfcfcf;
  --text-3: #9a9a9a;
  --border: #3a3a3a;
  --border-strong: #5a5a5a;
  --accent: #d7141a;
  --accent-text: #ffffff;
  --accent-soft: #3a0a0c;
  --red-text: #ff4a4a;
  --good: #ffffff;
  --good-soft: #2a2a2a;
  --bad: #ff4a4a;
  --bad-soft: #3a0a0c;
  --warn: #ffd23f;
  --warn-soft: #2a2208;
  --sel: #ffffff;
  --sel-soft: #2a2a2a;
  --apprentice: #ff4a4a;
  --guru: #ff8a8a;
  --master: #ffd0d0;
  --enlightened: #ffffff;
  --burned: #8a8a8a;
  --radius: 0;
  --radius-sm: 0;
  --shadow: none;
  --font: "Archivo", "Segoe UI", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  --font-head: "Anton", Impact, "Arial Black", sans-serif;
  --font-accent: "Abril Fatface", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}
/* Home and results are red; small text on red must be white. */
:root[data-theme="p5"]:is([data-screen="home"], [data-screen="results"]) { --bg: #d7141a; --text-2: #ffffff; }
:root[data-theme="p5"] :is(.card, .list, .modal) { --text-2: #cfcfcf; }

:root[data-theme="p5"] body { font-family: var(--font); font-weight: 500; }
:root[data-theme="p5"] a { color: #fff; }

/* Background: halftone and black slabs on red screens; a red slab on dark ones. */
:root[data-theme="p5"] body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  top: -10%; right: -8%; width: 58%; height: 130%;
  background: radial-gradient(#a10e14 2.4px, transparent 2.8px) 0 0 / 16px 16px, #d7141a;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
:root[data-theme="p5"] body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  top: 0; right: 40%; width: 14px; height: 120%; background: #fff;
  transform: rotate(16deg); transform-origin: top;
}
:root[data-theme="p5"]:is([data-screen="home"], [data-screen="results"]) body::before {
  top: -20%; left: -10%; right: auto; width: 70%; height: 90%;
  background: radial-gradient(#a10e14 2.4px, transparent 2.8px) 0 0 / 16px 16px;
  clip-path: polygon(0 0, 100% 0, 40% 100%, 0 70%);
}
:root[data-theme="p5"]:is([data-screen="home"], [data-screen="results"]) body::after {
  top: auto; right: auto; left: -10%; bottom: -15%; width: 60%; height: 45%; background: #0b0b0b;
  transform: none; clip-path: polygon(0 30%, 85% 0, 100% 70%, 0 100%);
}

/* Type */
:root[data-theme="p5"] :is(h1, h2, .brand, .big-num, .stat .value, .days b, .nav button, .seg button, .btn, .prompt-kind, .opt, .match button, .tile-text b) {
  font-family: var(--font-head); font-weight: 400; letter-spacing: 1px;
}
:root[data-theme="p5"] h1 { font-size: clamp(30px, 8vw, 46px); line-height: 1.15; margin: 4px 0 14px; text-transform: uppercase; transform: rotate(-2deg); transform-origin: left; }
:root[data-theme="p5"] h1 .rn-word { display: inline-block; white-space: nowrap; }
:root[data-theme="p5"] h1 .rn { display: inline-block; padding: 0 .08em; margin: 0 .02em; line-height: 1.1; }
:root[data-theme="p5"] h1 .rn0 { background: #fff; color: #0b0b0b; font-family: "Anton", Impact, sans-serif; transform: rotate(-6deg); }
:root[data-theme="p5"] h1 .rn1 { background: #0b0b0b; color: #fff; font-family: var(--font-accent); font-size: .92em; transform: rotate(5deg); box-shadow: 0 0 0 3px #fff; }
:root[data-theme="p5"] h1 .rn2 { background: #d7141a; color: #fff; font-family: "Archivo", "Arial Black", sans-serif; font-weight: 900; font-size: .86em; transform: rotate(-3deg) translateY(3px); box-shadow: 0 0 0 3px #0b0b0b; }
:root[data-theme="p5"] h1 .rn3 { background: #fff; color: #d7141a; font-family: var(--font-accent); font-size: 1.04em; transform: rotate(8deg); }
:root[data-theme="p5"] h2 {
  width: fit-content; max-width: 100%; background: #0b0b0b; color: #fff; padding: 2px 16px;
  font-size: 22px; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 0 0 0 3px #fff;
}
:root[data-theme="p5"] h3 { font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
:root[data-theme="p5"] .big-num { font-size: 50px; line-height: 1.05; color: #fff; }
:root[data-theme="p5"] .stat .value { font-size: 30px; }
:root[data-theme="p5"] :is(.stat .label, .step-label, .tile-text .tile-default) { font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
:root[data-theme="p5"] .kbd, :root[data-theme="p5"] .opt .num {
  background: #fff; color: #0b0b0b; border: 0; border-radius: 0; font: 400 14px/1.3 var(--font-head); padding: 0 6px; letter-spacing: .5px;
}

/* Shell */
:root[data-theme="p5"] .topbar { background: #0b0b0b; border-bottom: 3px solid #fff; backdrop-filter: none; }
:root[data-theme="p5"] .brand { font-size: 24px; text-transform: uppercase; }
:root[data-theme="p5"] .brand .jp { color: var(--red-text); font-weight: 900; }
:root[data-theme="p5"] .seg { background: transparent; padding: 0; gap: 8px; }
:root[data-theme="p5"] .seg button { background: #0b0b0b; color: #fff; border-radius: 0; box-shadow: 0 0 0 2px #fff; text-transform: uppercase; }
:root[data-theme="p5"] .seg button[aria-pressed="true"] { background: #fff; color: #0b0b0b; transform: rotate(-3deg); box-shadow: 4px 4px 0 #d7141a; }
:root[data-theme="p5"] .nav { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
:root[data-theme="p5"] .nav button { color: #fff; border-bottom: 0; font-size: 18px; text-transform: uppercase; padding: 4px 14px; }
:root[data-theme="p5"] .nav button[aria-current="page"] { background: #fff; color: #0b0b0b; transform: rotate(-3deg); }
:root[data-theme="p5"] .nav button:hover:not([aria-current]) { color: var(--red-text); }

/* Buttons and answers */
:root[data-theme="p5"] .btn {
  border: 3px solid #fff; border-radius: 0; background: #0b0b0b; color: #fff; text-transform: uppercase;
  box-shadow: 5px 5px 0 #0b0b0b; transform: rotate(-1.5deg); padding: 6px 18px;
}
:root[data-theme="p5"] .btn:hover { background: #2a2a2a; }
:root[data-theme="p5"] .btn:active { transform: rotate(-1.5deg) translate(2px, 2px); box-shadow: 3px 3px 0 #0b0b0b; }
:root[data-theme="p5"] .btn.primary { background: #d7141a; border-color: #fff; color: #fff; }
:root[data-theme="p5"] .btn.primary:hover { filter: brightness(1.08); }
:root[data-theme="p5"] .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
:root[data-theme="p5"] .btn.danger { color: var(--red-text); }
:root[data-theme="p5"] .btn[disabled] { opacity: .5; }
:root[data-theme="p5"] .opt, :root[data-theme="p5"] .match button {
  border: 3px solid #0b0b0b; border-radius: 0; background: #0b0b0b; color: #fff;
  transform: skewX(-8deg); box-shadow: 6px 6px 0 #d7141a; font-size: 20px; text-transform: uppercase;
}
:root[data-theme="p5"] .opt > *, :root[data-theme="p5"] .match button > * { transform: skewX(8deg); }
:root[data-theme="p5"] :is(.opt, .match button) :is(.jp-opt, .jp) { text-transform: none; }
:root[data-theme="p5"] .match button.jp { font-family: var(--font-jp); font-weight: 700; }
:root[data-theme="p5"] :is(.opt, .match button):not(.ok, .bad, .sel, .done, [disabled]):hover { background: #2a2a2a; }
:root[data-theme="p5"] .opt .num { background: #d7141a; color: #fff; }
:root[data-theme="p5"] .opt .opt-sub { color: inherit; opacity: .85; font-family: var(--font); text-transform: none; }
/* Right is a white card with a check, wrong is a red card with a cross:
   they differ in lightness, not just hue. */
:root[data-theme="p5"] :is(.opt.ok, .match .ok) { background: #fff; color: #0b0b0b; border-color: #0b0b0b; box-shadow: 6px 6px 0 #0b0b0b; }
:root[data-theme="p5"] :is(.opt.bad, .match .bad) { background: #d7141a; color: #fff; border-color: #0b0b0b; box-shadow: 6px 6px 0 #0b0b0b; }
:root[data-theme="p5"] :is(.opt.sel, .match .sel) { background: #fff; color: #0b0b0b; border-color: #d7141a; }
:root[data-theme="p5"] .opt.ok::after { content: "✓"; margin-left: auto; font-size: 24px; transform: skewX(8deg); }
:root[data-theme="p5"] .opt.bad::after { content: "✕"; margin-left: auto; font-size: 22px; transform: skewX(8deg); }
:root[data-theme="p5"] :is(.opt.ok, .opt.bad) .num { background: #0b0b0b; color: #fff; }
:root[data-theme="p5"] .chip { border-radius: 0; border: 2px solid #fff; background: #0b0b0b; color: #fff; }
:root[data-theme="p5"] .chip.learned { background: #fff; color: #0b0b0b; border-color: #fff; }
:root[data-theme="p5"] .badge { border-radius: 0; background: #0b0b0b; color: #fff; box-shadow: 0 0 0 2px #fff; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; transform: rotate(-2deg); }
:root[data-theme="p5"] :is(.badge.apprentice, .badge.guru, .badge.master, .badge.enlightened, .badge.burned) { color: #0b0b0b; box-shadow: 0 0 0 2px #0b0b0b; }
:root[data-theme="p5"] .badge.apprentice { background: var(--apprentice); }
:root[data-theme="p5"] .badge.guru { background: var(--guru); }
:root[data-theme="p5"] .badge.master { background: var(--master); }
:root[data-theme="p5"] .badge.enlightened { background: var(--enlightened); }
:root[data-theme="p5"] .badge.burned { background: var(--burned); }
:root[data-theme="p5"] .badge.ok { background: #fff; color: #0b0b0b; }
:root[data-theme="p5"] .badge.bad { background: #d7141a; color: #fff; }
:root[data-theme="p5"] .prompt-kind { border-radius: 0; font-size: 18px; padding: 2px 16px; transform: rotate(-2deg); background: #0b0b0b; color: #fff; }
:root[data-theme="p5"] .prompt-kind.reading { background: #d7141a; color: #fff; }
:root[data-theme="p5"] .prompt-kind.fill { background: #fff; color: #0b0b0b; box-shadow: 0 0 0 3px #0b0b0b; }

/* Panels */
:root[data-theme="p5"] :is(.card, .list) { background: #0b0b0b; border: 0; border-radius: 0; box-shadow: 0 0 0 3px #fff, 8px 8px 0 3px #0b0b0b; }
:root[data-theme="p5"] .list > * + * { border-top-color: #2a2a2a; }
:root[data-theme="p5"] .li.click:hover { background: #1d1d1d; }
:root[data-theme="p5"] .lesson-body { background: #161616; }
:root[data-theme="p5"] .stat { --text-2: #3a3a3a; background: #fff; color: #0b0b0b; border-radius: 0; transform: rotate(-2deg); box-shadow: 5px 5px 0 #0b0b0b; }
:root[data-theme="p5"] .stat:nth-child(even) { transform: rotate(2deg); background: #0b0b0b; color: #fff; --text-2: #cfcfcf; box-shadow: 0 0 0 3px #fff; }
:root[data-theme="p5"] .stat:nth-child(even) .value { color: var(--red-text); }
:root[data-theme="p5"] .notice { border-radius: 0; box-shadow: 0 0 0 3px #0b0b0b; }
:root[data-theme="p5"] .pattern { border-radius: 0; background: #1d1d1d; border-left: 6px solid #d7141a; }
:root[data-theme="p5"] .feedback { border-radius: 0; }
:root[data-theme="p5"] .feedback.ok { background: #fff; color: #0b0b0b; box-shadow: 0 0 0 3px #0b0b0b; }
:root[data-theme="p5"] .feedback.bad { background: #d7141a; color: #fff; }
:root[data-theme="p5"] .feedback.info { background: #0b0b0b; color: #fff; }
:root[data-theme="p5"] .feedback .detail { color: inherit; }
:root[data-theme="p5"] .modal { background: #0b0b0b; border-radius: 0; box-shadow: 0 0 0 3px #fff, 12px 12px 0 3px #d7141a; }
:root[data-theme="p5"] .mnemo { border-radius: 0; border-left: 6px solid #d7141a; }
:root[data-theme="p5"] .mnemo.mine { box-shadow: none; border-left-color: var(--text); }
:root[data-theme="p5"] .mnemo-tag { border-radius: 0; background: #0b0b0b; box-shadow: 0 0 0 2px #fff; }
:root[data-theme="p5"] .mnemo-tag.ai { color: #ffd23f; }
:root[data-theme="p5"] .mnemo-tag.web { color: #fff; }
:root[data-theme="p5"] .modal-back { background: rgba(0, 0, 0, 0.7); }

/* The study card is a white cut-out on the dark page. */
:root[data-theme="p5"] .study-card {
  --surface: #ffffff; --surface-2: #ececec; --surface-hi: #dcdcdc; --text: #0b0b0b; --text-2: #3a3a3a; --text-3: #555555;
  --border: #0b0b0b; --border-strong: #0b0b0b; --good-soft: #ffffff; --sel: #0b0b0b; --sel-soft: #ececec;
  background: #fff; color: #0b0b0b; border: 0; border-radius: 0;
  transform: rotate(-0.8deg); box-shadow: 12px 12px 0 #d7141a;
}
:root[data-theme="p5"] .study-card .btn:not(.primary) { background: #0b0b0b; color: #fff; border-color: #0b0b0b; box-shadow: 5px 5px 0 #d7141a; }
:root[data-theme="p5"] .study-card .btn.ghost { background: transparent; color: #0b0b0b; border-color: transparent; box-shadow: none; }
:root[data-theme="p5"] .study-card .btn.primary { border-color: #0b0b0b; box-shadow: 5px 5px 0 #0b0b0b; }
:root[data-theme="p5"] .study-card .badge { box-shadow: 0 0 0 2px #0b0b0b; }
:root[data-theme="p5"] .study-card .example { border-top: 3px solid #0b0b0b; }
:root[data-theme="p5"] .study-card rt { color: #3a3a3a; }
:root[data-theme="p5"] .study-top .muted, :root[data-theme="p5"] .study > p.muted {
  background: #0b0b0b; color: #fff; padding: 2px 10px; width: fit-content; box-shadow: 0 0 0 2px #fff;
}
:root[data-theme="p5"] .study > p.muted { margin-left: auto; margin-right: auto; }
/* Text sitting straight on the page can cross the red slab or the white
   slash, so it gets a black label box, the way P5 sets captions. */
:root[data-theme="p5"] main > :is(p, .muted, .small) {
  background: #0b0b0b; color: #fff; width: fit-content; max-width: 100%; padding: 2px 10px;
}
:root[data-theme="p5"] .study-top .btn.ghost { background: #0b0b0b; color: #fff; box-shadow: 0 0 0 2px #fff; }

/* Inputs, bars, toggles */
:root[data-theme="p5"] :is(input[type="text"], input[type="search"], input[type="number"], select, .notes-modal textarea) {
  background: #0b0b0b; color: #fff; border: 0; border-bottom: 4px solid #d7141a; border-radius: 0;
}
:root[data-theme="p5"] .answer-row input { min-height: 62px; font-size: 24px; transform: skewX(-6deg); border-bottom-width: 6px; }
:root[data-theme="p5"] .answer-row input.ok { background: #0b0b0b; color: #fff; border-bottom-color: #fff; box-shadow: inset 0 0 0 3px #fff; }
:root[data-theme="p5"] .answer-row input.bad { background: #d7141a; color: #fff; border-bottom-color: #0b0b0b; }
:root[data-theme="p5"] :is(input, select, button):focus-visible, :root[data-theme="p5"] input:focus, :root[data-theme="p5"] select:focus { outline: 3px solid #ffd23f; outline-offset: 2px; }
:root[data-theme="p5"] .progress { height: 12px; border-radius: 0; background: #2a2a2a; box-shadow: 0 0 0 2px #fff; transform: rotate(-0.6deg); }
:root[data-theme="p5"] .progress span { background: #fff; }
:root[data-theme="p5"] .stages { border-radius: 0; height: 14px; background: #2a2a2a; }
:root[data-theme="p5"] .legend i { border-radius: 0; transform: rotate(45deg) scale(.8); }
:root[data-theme="p5"] .bars div { border-radius: 0; opacity: 1; }
:root[data-theme="p5"] .bars div.zero { background: #3a3a3a; }
:root[data-theme="p5"] .days div { border-radius: 0; background: #1d1d1d; }
:root[data-theme="p5"] .days div:first-child { background: #fff; color: #0b0b0b; transform: rotate(-3deg); }
:root[data-theme="p5"] .days div:first-child span { color: #3a3a3a; }
:root[data-theme="p5"] .switch span { border-radius: 0; background: #3a3a3a; box-shadow: 0 0 0 2px #fff; }
:root[data-theme="p5"] .switch span::after { border-radius: 0; background: #fff; box-shadow: none; }
:root[data-theme="p5"] .switch input:checked + span { background: #d7141a; }
:root[data-theme="p5"] .sentence .blank { border-bottom: 3px solid #d7141a; }
:root[data-theme="p5"] .sentence .blank.filled { color: #0b0b0b; background: #fff; border-bottom-color: #0b0b0b; }
:root[data-theme="p5"] .study-card .sentence .blank.filled { background: #0b0b0b; color: #fff; }
:root[data-theme="p5"] .toast { background: #0b0b0b; color: #fff; border-radius: 0; box-shadow: 0 0 0 3px #fff, 6px 6px 0 3px #d7141a; font: 400 16px var(--font-head); letter-spacing: 1px; text-transform: uppercase; }

/* Style tiles */
:root[data-theme="p5"] .theme-tile { background: #0b0b0b; color: #fff; border: 3px solid #fff; border-radius: 0; }
:root[data-theme="p5"] .theme-tile[aria-pressed="true"] { background: #fff; color: #0b0b0b; transform: rotate(-2deg); box-shadow: 6px 6px 0 #d7141a; }
:root[data-theme="p5"] .theme-tile[aria-pressed="true"] .tile-text span { color: #3a3a3a; }
:root[data-theme="p5"] .tile-prev { border-radius: 0; }
:root[data-theme="p5"] .tile-text b { font-size: 18px; text-transform: uppercase; }
:root[data-theme="p5"] .tile-text .tile-default { background: #d7141a; color: #fff; }

@media (max-width: 480px) {
  :root[data-theme="p3r"] .opt, :root[data-theme="p3r"] .match button { padding-left: 14px; padding-right: 14px; font-size: 16px; }
  :root[data-theme="p5"] .opt, :root[data-theme="p5"] .match button { font-size: 17px; }
  /* All four tabs fit on a phone without scrolling the nav. */
  :root[data-theme="p3r"] .nav button { padding: 6px 10px; font-size: 15px; letter-spacing: 0; }
  :root[data-theme="p5"] .nav { gap: 4px; }
  :root[data-theme="p5"] .nav button { padding: 4px 9px; font-size: 16px; letter-spacing: .5px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="p5"] .btn:active { transform: rotate(-1.5deg); }
}