@font-face { font-family: 'Mikado'; src: url('fonts/MikadoBold_DEMO.otf') format('opentype'); font-weight: normal; font-display: swap;
  /* the DEMO font replaces punctuation with a watermark, so only use it for letters */
  unicode-range: U+0041-005A, U+0061-007A; }

:root {
  --bg: #351BDF; --bg-rgb: 53, 27, 223;
  --ink: #2b2470; --yellow: #ffd84d; --green: #5ee08a; --orange: #ff9f43; --red: #ff6b6b;
  font-family: 'Mikado', 'Trebuchet MS', 'Comic Sans MS', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: #fff;
  /* top layer: 50% wash of the base colour = pattern at 50% strength; bottom layer: the luminosity-blended pattern */
  background:
    linear-gradient(rgba(53, 27, 223, .5), rgba(53, 27, 223, .5)),
    url('img/bg-pattern.png') top center / clamp(320px, 100vw, 512px) auto repeat var(--bg);
  background-blend-mode: normal, luminosity;
}
html, body { margin: 0; height: 100%; overflow: hidden; }
main { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 5vw 14dvh; height: 100vh; height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; }
#reading-screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#reading-screen[hidden] { display: none; }
header { position: absolute; top: 1.5dvh; left: 5vw; right: 5vw; z-index: 6; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 12px; }
h1 { font-size: 1.7rem; margin: 0; text-shadow: 0 3px 0 rgba(0,0,0,.2); }

.mic { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; background: rgba(255,255,255,.18); padding: 6px 14px; border-radius: 999px; }
.mic i { width: 12px; height: 12px; border-radius: 50%; background: #c9c4f5; display: inline-block; }
.mic.on i { background: var(--green); animation: pulse 1.1s infinite; }
.mic.paused i { background: var(--yellow); }
@keyframes pulse { 50% { opacity: .35; transform: scale(1.3); } }

#message { min-height: 0; margin: 6px 0; padding: 0; color: #fff3b0; font-size: 1.05rem; }
#message:not(:empty) { background: rgba(0,0,0,.25); padding: 8px 14px; border-radius: 14px; }
#message.error { background: var(--red); color: #fff; }

/* reading card */
#box { position: relative; color: #fff; flex: 1 1 0; min-height: 0; display: flex; }
#paragraph { --fs: min(4.2dvh, 7vw); --lh: 1.45; --row: calc(var(--fs) * var(--lh)); position: relative; flex: 1; min-height: 0; margin: 0;
  font-size: var(--fs); line-height: var(--lh); overflow: hidden; padding: var(--row) 0 calc(var(--row) * 2);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--row) * .95), #000 calc(100% - var(--row) * 1.4), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--row) * .95), #000 calc(100% - var(--row) * 1.4), transparent 100%); }
#box:not(.started) #paragraph { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--row) * 1.4), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--row) * 1.4), transparent 100%); }
#edit { position: absolute; top: -52px; right: 0; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: none; background: #ece9ff; font-size: 1.2rem; cursor: pointer; box-shadow: 0 3px 0 #cfc9fa; }
#edit:active { transform: translateY(3px); box-shadow: none; }

.w { display: inline-block; padding: 0 6px; border-radius: 12px; transition: background .2s; }
.w.current { background: var(--yellow); animation: bob 1.1s ease-in-out infinite; }
.w.current, .w.correct, .w.retry, .w.practice { color: var(--ink); }
.w.correct { background: var(--green); }
.w.retry { background: var(--orange); }
.w.practice { background: #ffd2a1; text-decoration: underline wavy #ea580c; }
.w.wrong { background: var(--red); color: #fff; animation: nod .8s ease-in-out; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes nod { 0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(5px) rotate(-3deg); } 40% { transform: translateY(-3px) rotate(2deg); } 60% { transform: translateY(5px) rotate(-3deg); } 80% { transform: translateY(-2px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .w.current, .w.wrong, .mic.on i { animation: none; } }

/* settings */
.gear { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); font-size: 1.1rem; cursor: pointer; padding: 0; }
.toolbar { position: absolute; top: 100%; right: 0; margin-top: 6px; display: flex; flex-direction: column; gap: 12px; background: #4a33e6; padding: 14px 16px; border-radius: 20px; box-shadow: 0 8px 0 rgba(0,0,0,.2); }
.toolbar[hidden] { display: none; }
.toolbar label { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.toolbar input[type=range] { accent-color: var(--yellow); width: 130px; }

/* editor */
#editor { margin-top: 12px; }
textarea { width: 100%; font: inherit; font-size: 1.1rem; padding: 14px; border: none; border-radius: 20px; color: var(--ink); }
#editor .btn { margin-top: 10px; margin-right: 8px; }

/* chunky 3D buttons */
.btn {
  font: inherit; color: #fff; cursor: pointer; border: none; border-radius: 20px;
  padding: 12px 22px; font-size: 1.1rem; text-shadow: 0 2px 0 rgba(0,0,0,.25);
  background: linear-gradient(180deg, #b26bff 0%, #8d3df0 100%);
  box-shadow: 0 6px 0 #5b21b6, 0 10px 18px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.35);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #5b21b6, 0 3px 8px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.35); }
.btn.small { padding: 8px 18px; font-size: 1rem; }
.btn.ghost { background: linear-gradient(180deg, #8c86d6, #6e67bf); box-shadow: 0 6px 0 #4a43a0, inset 0 2px 0 rgba(255,255,255,.3); }
.btn.big { width: 100%; font-size: min(3.6dvh, 8vw); padding: 1.8dvh 0; border-radius: 26px; }
.btn.big.stop { background: linear-gradient(180deg, #ff8a8a 0%, #ec4a4a 100%); box-shadow: 0 6px 0 #a42020, 0 10px 18px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.4); }

/* bottom dock: text scrolls behind a fade, button stays 40px above the bottom */
#dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 0 5vw max(3dvh, env(safe-area-inset-bottom)); pointer-events: none;}
#dock .btn { pointer-events: auto; display: block; margin: 0 auto; max-width: 460px; }

/* popup */
#modal { position: fixed; inset: 0; background: rgba(30,20,90,.65); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
#modal[hidden] { display: none; }
#modal .card { background: #fff; color: var(--ink); border-radius: 32px; padding: 30px 38px; text-align: center; min-width: 270px; box-shadow: 0 10px 0 rgba(0,0,0,.2); animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#m-word { font-size: 3.6rem; }
#m-split { font-size: 2.1rem; color: #ea580c; letter-spacing: .12em; margin: 10px 0; }
#m-status { font-size: 1.3rem; color: #7c3aed; }

/* summary */
#summary-screen { background: #fff; color: var(--ink); border-radius: 28px; padding: 22px 24px; box-shadow: 0 8px 0 rgba(0,0,0,.18); }
#summary-screen h2 { margin-top: 0; }
#summary-screen ul { font-size: 1.3rem; line-height: 1.9; padding-left: 22px; }
#s-list { font-size: 1.2rem; color: #ea580c; }

/* unread words are dimmed */
#box .w.pending { opacity: .5; }

/* intro video: pinned behind the page while the text card scrolls over it */
#hero { position: relative; z-index: 0; flex: 0 0 40dvh; min-height: 0; margin-bottom: 1dvh; display: flex; }
#intro { display: block; flex: 1; width: 100%; min-height: 0; object-fit: contain; background: none; }
#box, #editor { position: relative; z-index: 1; }
.pre { visibility: hidden !important; opacity: 0; }
.slide-in { animation: slideUp .8s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes slideUp { from { transform: translateY(70vh); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slide-in { animation: none; } }
#playbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; font-size: 2rem; padding: 0; }
#playbtn[hidden] { display: none; }

/* intro: video starts big in the middle of the screen, then zooms out to its place */
#hero { transition: transform .9s cubic-bezier(.5, 0, .2, 1); will-change: transform; }
#hero.big { z-index: 3; }
.slide-in-dock { animation: dockUp .6s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes dockUp { from { transform: translateY(140px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slide-in-dock, #hero { animation: none; transition: none; } }
#m-img { display: block; height: 150px; margin: -6px auto 4px; }

/* editor overlay so the page never scrolls */
#editor { position: fixed; left: 5vw; right: 5vw; top: 8dvh; z-index: 7; }
#editor[hidden] { display: none; }
textarea { height: 40dvh; box-sizing: border-box; }
#summary-screen { overflow: auto; max-height: 75dvh; }