/* Učimo bosanski — shared styles for all book pages.
   Each page is one square "stage" that keeps the whole illustration visible;
   the area around it is filled with a blurred copy of the same picture. */

/* Fonts on our own server (no request to Google — GDPR). Variable WOFF2
   files, one per subset; Latin Extended has č ć š ž đ. Licence: SIL OFL
   (fonts/OFL-*.txt). Source: Google Fonts, Baloo 2 and Nunito 700–800. */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../fonts/baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", "Trebuchet MS", system-ui, sans-serif;

  --ink: #5b3a1e;            /* brown ink outline colour of the illustrations */
  --ink-shadow: rgba(91, 58, 30, 0.85);
  --sky-shadow: rgba(30, 70, 115, 0.4);

  --c-red: #d8452f;
  --c-orange: #f08a24;
  --c-yellow: #e9b21c;
  --c-green: #4f9e2f;
  --c-pink: #e2558f;
  --c-blue: #2f6fc2;
  --c-purple: #8a4fc4;
  --c-teal: #1f9e9a;

  --bar-h: 60px;            /* the top bar (book-bar); the page sits below it */
  --stage-size: min(100vw, 100vh - var(--bar-h));
  color-scheme: light;
}

@supports (height: 100dvh) {
  :root { --stage-size: min(100vw, 100dvh - var(--bar-h)); }
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body { height: 100%; margin: 0; }

body {
  overflow: hidden;
  background: #7fb8e3;
  color: #ffffff;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* The backdrop is an <img> of the page's own illustration, so every page
   only sets its picture in the HTML. */
.backdrop {
  position: fixed;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(28px) saturate(1.1) brightness(0.92);
  transform: scale(1.05);
  pointer-events: none;
}

/* The page colour over the blurred background, strongest on the panel side,
   so the page and its surroundings read as one unit. */
.backdrop-tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--panel) 85%, transparent) 0%,
    color-mix(in srgb, var(--panel) 55%, transparent) 50%,
    color-mix(in srgb, var(--panel) 30%, transparent) 100%);
}

/* Tall screens: the free space is above and below the page. */
@media (max-aspect-ratio: 1/1) {
  .backdrop-tint { background: color-mix(in srgb, var(--panel) 60%, transparent); }
}

.stage {
  position: fixed;
  top: calc(50% + var(--bar-h) / 2);
  left: 50%;
  width: var(--stage-size);
  height: var(--stage-size);
  transform: translate(-50%, -50%);
  container-type: size;
  overflow: hidden;
  box-shadow: 0 2cqw 6cqw rgba(30, 40, 60, 0.35);
}

.stage__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Cover title — sizes in cqw so the layout scales with the square stage
   (800 px reference: title 104 px, subtitle 21 px). */
.cover-title {
  position: absolute;
  top: 6cqw;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

.cover-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 10%;
  right: 10%;
  top: -4cqw;
  height: 52cqw;
  background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(30, 80, 130, 0.32) 0%, rgba(30, 80, 130, 0) 100%);
}

.cover-title__main {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13cqw;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-shadow:
    0.026em 0.026em 0 #fff, -0.026em 0.026em 0 #fff,
    0.026em -0.026em 0 #fff, -0.026em -0.026em 0 #fff,
    0 0.035em 0 #fff, 0.035em 0 0 #fff, -0.035em 0 0 #fff, 0 -0.035em 0 #fff,
    0 0.078em 0 var(--ink-shadow),
    0 0.12em 0.22em var(--sky-shadow);
}

.cover-title__line { display: block; }

/* One plain sentence under the title: what the book is (also for search). */
.cover-title__lead {
  max-width: 26em;
  margin: 2cqw 1.5em 0;
  font-size: 2.9cqw;
  text-wrap: balance;
  font-weight: 800;
  line-height: 1.3;
  text-shadow: 0 0.1em 0 var(--ink-shadow), 0 0.1em 0.6em rgba(30, 70, 115, 0.55);
}

.cover-title__sub {
  margin: 1.5cqw 0 0;
  font-size: 2.65cqw;
  font-weight: 800;
  letter-spacing: 0.015em;
  text-shadow: 0 0.1em 0 var(--ink-shadow), 0 0.1em 0.6em rgba(30, 70, 115, 0.55);
}

.c-red { color: var(--c-red); }
.c-orange { color: var(--c-orange); }
.c-yellow { color: var(--c-yellow); }
.c-green { color: var(--c-green); }
.c-pink { color: var(--c-pink); }
.c-blue { color: var(--c-blue); }
.c-purple { color: var(--c-purple); }
.c-teal { color: var(--c-teal); }

/* Start button sits on the grass between the bear and the tray, low enough
   not to cover the characters. */
.start-button {
  position: absolute;
  left: 50%;
  bottom: 3cqw;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2cqw;
  min-width: 44px;
  min-height: 44px;
  padding: 1.2cqw 4.5cqw 1.4cqw;
  border-radius: 999px;
  background: var(--c-orange);
  border: 0.5cqw solid #fff;
  box-shadow: 0 0.8cqw 0 var(--ink), 0 1.6cqw 3cqw rgba(60, 40, 20, 0.35);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.start-button__label {
  font-size: 4.6cqw;
  font-weight: 800;
  line-height: 1;
}

.start-button__translation {
  font-family: var(--font-body);
  font-size: 1.7cqw;
  font-weight: 800;
  opacity: 0.95;
}

.start-button:hover { background: #e47a12; }

.start-button:active {
  transform: translateX(-50%) translateY(0.6cqw);
  box-shadow: 0 0.2cqw 0 var(--ink), 0 0.8cqw 1.6cqw rgba(60, 40, 20, 0.3);
}

.start-button:focus-visible {
  outline: 0.6cqw solid var(--c-blue);
  outline-offset: 0.6cqw;
}

/* Entrance: title letters drop in one after another. */
.is-ready .cover-title__line > span {
  display: inline-block;
  animation: letter-drop 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.cover-title__lead .lead-word { display: inline-block; white-space: nowrap; }

.is-ready .cover-title__lead .sub-char {
  display: inline-block;
  white-space: pre;
  animation: sub-rise 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

@keyframes sub-rise {
  from { opacity: 0; transform: translateY(0.6em); }
  to { opacity: 1; transform: none; }
}

@keyframes letter-drop {
  from { opacity: 0; transform: translateY(-0.4em) scale(0.8); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .is-ready .cover-title__line > span,
  .is-ready .cover-title__lead .sub-char { animation: none; }
}

/* Hide the animated title until the fonts are in (only when JS runs,
   so the cover stays complete without JS). */
.js body:not(.is-ready) .cover-title { visibility: hidden; }

/* ---------------------------------------------------------------------
   Letter pages (slovo-a, slovo-b, ...)
   Text on the letter pages is flat: no text shadows (one look for all).
   Each page sets --panel on <body>. Sizes in cqw use the same
   800 px reference as the canvas design (e.g. 230 px = 28.75cqw).
   --------------------------------------------------------------------- */

.page-letter { --panel: var(--c-green); background: var(--panel); }

.letter-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: 60cqw;
  background: linear-gradient(90deg, var(--panel) 0%, var(--panel) var(--panel-solid, 62%), transparent 100%);
}

.letter-panel::after {
  content: "";
  position: absolute;
  left: -15cqw;
  top: 15cqw;
  width: 65cqw;
  height: 65cqw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
}

.letter-head {
  position: absolute;
  left: 5.5cqw;
  top: 7cqw;
  width: 37.5cqw;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.letter-glyphs {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28.75cqw;
  line-height: 0.9;
  letter-spacing: -0.02em;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  text-align: left;
}

.letter-glyphs__small { font-size: 0.74em; }

.letter-word {
  margin: 2.25cqw 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9.5cqw;
  line-height: 1;
}

.letter-translation {
  margin: 1.25cqw 0 0;
  font-size: 2.625cqw;
  font-weight: 800;
  opacity: 0.92;
}

.letter-sentence {
  position: absolute;
  left: 5.5cqw;
  bottom: 5.5cqw;
  width: 37.5cqw;
  display: flex;
  flex-direction: column;
  gap: 1.25cqw;
}

.letter-sentence__bs {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.75cqw;
  line-height: 1.2;
}

.letter-sentence__tr {
  margin: 0;
  font-size: 1.875cqw;
  font-weight: 700;
  line-height: 1.4;
  opacity: 0.9;
}

/* Small stages (phones): the 44 px minimum on the buttons makes the top
   column taller than the free space, so it ran into the sentence. Smaller
   big letters and word give that space back. */
@container (max-width: 560px) {
  .letter-head { top: 5cqw; }
  .letter-glyphs { font-size: 22cqw; }
  .letter-word { margin-top: 1.5cqw; font-size: 8.5cqw; }
  .practice-open--song { margin-top: 2.4cqw; }
}

/* Tap the big letter: it bounces (a hook for the letter sound later). */
.letter-glyphs.is-bouncing { animation: letter-bounce 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }

@keyframes letter-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.08) rotate(-3deg); }
  100% { transform: scale(1); }
}

.letter-glyphs:focus-visible {
  outline: 0.5cqw solid #fff;
  outline-offset: 0.5cqw;
  border-radius: 2cqw;
}

/* Page navigation: in the blurred side areas on wide screens,
   in a bar below the picture on tall screens. */
.page-nav {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.page-nav__link {
  position: absolute;
  top: 50%;
  width: clamp(48px, 6vmin, 72px);
  height: clamp(48px, 6vmin, 72px);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border: 3px solid #fff;
  box-shadow: 0 4px 0 var(--ink), 0 8px 18px rgba(40, 30, 20, 0.3);
  pointer-events: auto;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.page-nav__link svg { width: 50%; height: 50%; }
.page-nav__link:hover { background: #fff; }
.page-nav__link:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 4px; }
.page-nav__link--prev { left: calc((100vw - var(--stage-size)) / 4 - clamp(24px, 3vmin, 36px)); }
.page-nav__link--next { right: calc((100vw - var(--stage-size)) / 4 - clamp(24px, 3vmin, 36px)); }

/* No side space (almost square, tablets, phones): smaller arrows at the
   screen edges, in the middle of the page height. */
@media (max-aspect-ratio: 5/4) {
  .page-nav__link {
    width: 42px;
    height: 42px;
    border-width: 2px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 3px 0 rgba(59, 36, 16, 0.55), 0 6px 14px rgba(40, 25, 10, 0.25);
  }
  .page-nav__link--prev { left: 6px; }
  .page-nav__link--next { right: 6px; }
}
/* Phones: in the middle of the picture area, above the text. */
@media (max-aspect-ratio: 4/5) {
  .page-nav__link { top: 42%; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-glyphs.is-bouncing { animation: none; }
}

/* ---------------------------------------------------------------------
   Narration buttons on letter pages
   --------------------------------------------------------------------- */

/* No font shorthand here: it would override the big letter's own size. */
.say-btn {
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

.letter-word .say-btn { font: inherit; }

.say-btn.is-bouncing { animation: letter-bounce 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.say-btn:focus-visible { outline: 0.5cqw solid #fff; outline-offset: 0.5cqw; border-radius: 1.5cqw; }

.letter-sentence__row { display: flex; align-items: flex-start; gap: 1.5cqw; }

.speaker-btn {
  flex: none;
  width: max(44px, 6cqw);
  height: max(44px, 6cqw);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0.4cqw solid #fff;
  background: rgba(255, 255, 255, 0.95);
  color: color-mix(in srgb, var(--panel) 70%, #3b2410);
  box-shadow: 0 0.5cqw 0 color-mix(in srgb, var(--panel) 55%, #3b2410);
  cursor: pointer;
}

.speaker-btn svg { width: 55%; height: 55%; }
.speaker-btn:focus-visible { outline: 0.5cqw solid #fff; outline-offset: 0.5cqw; }
.speaker-btn.is-bouncing { animation: letter-bounce 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }

.practice-open {
  align-self: flex-start;
  margin-top: 4cqw;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2cqw;
  min-height: 44px;
  padding: 1.1cqw 3.2cqw 1.3cqw;
  border-radius: 999px;
  border: 0.4cqw solid #fff;
  background: #fff;
  color: color-mix(in srgb, var(--panel) 70%, #3b2410);
  box-shadow: 0 0.7cqw 0 color-mix(in srgb, var(--panel) 55%, #3b2410), 0 1.4cqw 2.4cqw rgba(59, 36, 16, 0.25);
  font-family: var(--font-display);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.practice-open__label { font-size: 3.6cqw; font-weight: 800; line-height: 1; }
.practice-open__tr { font-family: var(--font-body); font-size: 1.6cqw; font-weight: 800; opacity: 0.85; }
.practice-open:hover { transform: translateY(-0.3cqw); }
.practice-open:active { transform: translateY(0.4cqw); }
.practice-open:focus-visible { outline: 0.5cqw solid #fff; outline-offset: 0.6cqw; }

/* ---------------------------------------------------------------------
   Practice dialog
   --------------------------------------------------------------------- */

.practice {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #fffaf2;
  color: #3b2410;
  box-shadow: 0 10px 0 color-mix(in srgb, var(--panel) 60%, #3b2410), 0 24px 60px rgba(30, 20, 10, 0.4);
  font-family: var(--font-body);
  overflow: auto;
}

.practice::backdrop { background: rgba(40, 28, 16, 0.55); backdrop-filter: blur(4px); }

.practice__inner { display: grid; gap: 20px; padding: 24px clamp(16px, 5vw, 36px) 28px; }

.practice__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.practice__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1;
  color: color-mix(in srgb, var(--panel) 80%, #3b2410);
}

.practice__close {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #ead9c2;
  background: #fff;
  color: #3b2410;
  cursor: pointer;
}

.practice__close svg { width: 20px; height: 20px; }

.practice__dots { display: flex; gap: 8px; }

.practice__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ead9c2;
}

.practice__dot.is-current { background: var(--c-orange); transform: scale(1.25); }
.practice__dot.is-done { background: var(--panel); }

.practice__step { display: grid; gap: 18px; }
.practice__step[hidden] { display: none; }

.practice__prompt { margin: 0; display: grid; gap: 2px; }
.practice__prompt strong { font-family: var(--font-display); font-size: clamp(22px, 4.2vw, 28px); line-height: 1.15; }
.practice__prompt span, .practice__tr { font-size: 15px; font-weight: 700; color: #7a5a3c; }

.practice__task {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 7vw, 48px);
  line-height: 1.2;
}

.practice__task--sentence { font-size: clamp(22px, 4.6vw, 30px); font-weight: 700; }

.practice__blank {
  width: 2.2em;
  padding: 0 4px;
  font: inherit;
  color: var(--c-orange);
  text-align: center;
  background: #fff;
  border: 3px dashed #d9bf9c;
  border-radius: 12px;
  outline: none;
}

.practice__task--sentence .practice__blank { width: 5.5em; }
.practice__blank:focus { border-color: var(--c-orange); border-style: solid; }
.is-solved .practice__blank { border-color: var(--panel); border-style: solid; color: var(--panel); }

.practice__tiles { display: flex; flex-wrap: wrap; gap: 12px; }

.practice__tile {
  min-width: 64px;
  min-height: 56px;
  padding: 6px 18px;
  border-radius: 16px;
  border: 3px solid #fff;
  background: color-mix(in srgb, var(--panel) 18%, #fff);
  color: #3b2410;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  box-shadow: 0 4px 0 #e2cdb0;
  cursor: pointer;
}

.practice__tile:active { transform: translateY(3px); box-shadow: 0 1px 0 #e2cdb0; }
.practice__tile:focus-visible, .practice__btn:focus-visible, .practice__close:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; }

.practice__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.practice__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 22px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: #fff;
  color: #3b2410;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  box-shadow: 0 4px 0 #e2cdb0;
  cursor: pointer;
  text-decoration: none;
}

.practice__btn svg { width: 24px; height: 24px; flex: none; }
.practice__btn small { font-family: var(--font-body); font-size: 13px; font-weight: 700; opacity: 0.8; }
.practice__btn[hidden] { display: none; }

.practice__primary { background: var(--c-orange); color: #fff; box-shadow: 0 4px 0 var(--ink); }
.practice__btn.is-active { background: #d8452f; color: #fff; animation: pulse 1s ease-in-out infinite; }

@keyframes pulse { 50% { transform: scale(1.05); } }

.practice__feedback { min-height: 52px; display: grid; gap: 2px; font-size: 14px; font-weight: 700; color: #7a5a3c; }
.practice__feedback strong { font-family: var(--font-display); font-size: 26px; line-height: 1.1; }
.practice__feedback[data-kind="correct"] strong { color: var(--c-green); }
.practice__feedback[data-kind="again"] strong { color: #c0392b; }
.practice__feedback[data-kind="hook"] strong { color: #c46a00; }

.practice__voice-status { margin: 0; min-height: 1.4em; font-size: 15px; font-weight: 700; color: #7a5a3c; }

.practice__done { text-align: center; justify-items: center; }
.practice__done strong { font-family: var(--font-display); font-size: clamp(30px, 6vw, 40px); color: var(--c-green); }

@media (prefers-reduced-motion: reduce) {
  .say-btn.is-bouncing, .speaker-btn.is-bouncing, .practice__btn.is-active { animation: none; }
}

/* "Pjevamo i učimo" under the word; a smaller "Vježbaj" under the sentence. */
.practice-open--song {
  margin-top: 3.2cqw;
  padding: 1cqw 2.8cqw 1.2cqw 2.2cqw;
  flex-direction: row;
  align-items: center;
  gap: 1.4cqw;
}
.practice-open__icon { width: 4.2cqw; height: 4.2cqw; flex: none; }
.practice-open__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2cqw; }
.practice-open--song .practice-open__label { font-size: 3.1cqw; }
.practice-open--song .practice-open__tr { font-size: 1.45cqw; }

.practice-open--small {
  margin-top: 0.6cqw;
  padding: 0.7cqw 2cqw 0.8cqw;
  box-shadow: 0 0.5cqw 0 color-mix(in srgb, var(--panel) 55%, #3b2410), 0 1cqw 1.8cqw rgba(59, 36, 16, 0.22);
}
.practice-open--small .practice-open__label { font-size: 2.3cqw; }
.practice-open--small .practice-open__tr { font-size: 1.2cqw; }

/* ---------------------------------------------------------------------
   Song screen (full screen): Tekst and Karaoke modes.
   song.js sets every transform per frame; CSS only styles the states.
   --beat (0–1) is the beat pulse, --fill the karaoke fill of a word,
   --level the microphone level.
   --------------------------------------------------------------------- */

.song-screen {
  --beat: 0;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #2b2140;
  color: #fff;
  font-family: var(--font-body);
  overflow: hidden;
}

.song-screen[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.song-screen::backdrop { background: #2b2140; }

/* Colourful blurred background: the page picture + slowly drifting colour light. */
.song-screen__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.song-screen__bg img {
  position: absolute;
  inset: -80px;
  width: calc(100% + 160px);
  height: calc(100% + 160px);
  object-fit: cover;
  filter: blur(42px) saturate(1.6) brightness(0.62);
}

.song-screen__blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: blob-drift 22s ease-in-out infinite alternate;
}

.song-screen__blob--1 { left: -25vmax; top: -30vmax; background: radial-gradient(circle, var(--c-pink) 0%, transparent 65%); }
.song-screen__blob--2 { right: -30vmax; top: -10vmax; background: radial-gradient(circle, var(--c-blue) 0%, transparent 65%); animation-duration: 28s; animation-delay: -6s; }
.song-screen__blob--3 { left: 10vmax; bottom: -40vmax; background: radial-gradient(circle, var(--c-orange) 0%, transparent 65%); animation-duration: 25s; animation-delay: -12s; }

@keyframes blob-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vmax, 6vmax) scale(1.15); }
  100% { transform: translate(-6vmax, 10vmax) scale(0.95); }
}

/* Light flash on the beat (stronger on the clap lines). */
.song-screen__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.5), transparent 60%);
  opacity: calc(var(--beat) * 0.18);
}

.song-screen.is-clap .song-screen__bg::after { opacity: calc(var(--beat) * 0.45); }

/* Top bar */
.song-screen__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: max(16px, env(safe-area-inset-top, 0px)) clamp(16px, 3vw, 32px) 8px;
}

.song-screen__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.1;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.song-modes {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
}

.song-modes__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-height: 48px;
  padding: 6px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  cursor: pointer;
}

.song-modes__btn small { font-family: var(--font-body); font-size: 11px; font-weight: 700; opacity: 0.8; }
.song-modes__btn[aria-pressed="true"] { background: #fff; color: #3b2410; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }

.song-screen__close {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: #3b2410;
  cursor: pointer;
}

.song-screen__close svg { width: 22px; height: 22px; }

.song-modes__btn:focus-visible,
.song-screen__close:focus-visible,
.song-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Main area: big letter | lyrics | (karaoke) side panel */
.song-screen__main {
  position: relative;
  z-index: 1;
  display: grid;
  /* Lyrics in the middle, exactly as wide as the progress bar below (900 px);
     the big letter left of them, the karaoke panel right of them. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 900px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 2vw, 32px);
  padding-inline: clamp(16px, 3vw, 40px);
  min-height: 0;
}

.song-letter { grid-column: 1; }
.song-lyrics { grid-column: 2; }
.song-side { grid-column: 3; justify-self: center; width: min(100%, 340px); }

.song-letter {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(110px, 24vmin, 280px);
  line-height: 1;
  color: #fff;
  transform-origin: 50% 85%;
  will-change: transform;
  text-shadow:
    0.02em 0.02em 0 #fff, -0.02em 0.02em 0 #fff, 0.02em -0.02em 0 #fff, -0.02em -0.02em 0 #fff,
    0 0.06em 0 var(--ink-shadow), 0 0.1em 0.2em rgba(0, 0, 0, 0.3);
}

.song-screen[data-mode="karaoke"] .song-letter { font-size: clamp(90px, 17vmin, 200px); }

.song-letter__big,
.song-letter__small {
  display: inline-block;
  transform-origin: 50% 90%;
  transition: color 0.25s ease;
  will-change: transform;
}

.song-letter__big { color: inherit; }
.song-letter__small { font-size: 0.72em; color: #fff; }

/* Lyrics column */
.song-lyrics {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}

/* Centred, with side room: a growing word never touches the edge of the
   lyrics box (it was cut on the left) and long lines break in balanced halves. */
.song-lyrics__track {
  position: relative;
  will-change: transform;
  padding-inline: clamp(16px, 6%, 64px);
  text-align: center;
}

.song-line {
  position: relative;
  margin: 0;
  padding: 6px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3.2vmin, 32px);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.55);
  text-wrap: balance;
  transition: color 0.3s ease, font-size 0.35s ease, padding 0.35s ease;
}

.song-line[data-section]::before {
  content: attr(data-section);
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.song-line.is-past { color: rgba(255, 255, 255, 0.38); }
.song-line.is-choir { color: rgba(255, 226, 138, 0.75); }

.song-line.is-current {
  padding-top: 52px;
  font-size: clamp(30px, 5.8vmin, 62px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.25);
}

.song-line.is-current.is-choir { color: #ffe28a; }
.song-line.is-current .song-word { margin-inline: 0.09em; } /* room for the zoom of the sung word */

.song-word {
  display: inline-block;
  margin-inline: 0.03em;
  transform-origin: 50% 85%;
  will-change: transform;
  transition: color 0.2s ease;
}

.song-hit { display: inline-block; color: #ffd34d; transform-origin: 50% 90%; }
.song-line.is-current .song-hit { color: #ffe066; }
.song-screen[data-mode="text"] .song-line.is-current .song-word.is-sung { color: #b9f5c2; }

/* Karaoke fill: a bar under the word grows from left to right while it is sung.
   (No background-clip:text here: it cannot follow the jumping letter spans,
   so letters such as the "a" in "malo" disappeared.) */
.song-screen[data-mode="karaoke"] .song-word { position: relative; }
.song-screen[data-mode="karaoke"] .song-line.is-current .song-word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.06em;
  height: 0.11em;
  border-radius: 1em;
  background: #ffd34d;
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
}

.song-screen[data-mode="karaoke"] .song-line.is-current .song-word.is-rest::after { display: none; }
.song-screen[data-mode="karaoke"] .song-line.is-current .song-word.is-active { color: #ffe066; }
.song-screen[data-mode="karaoke"] .song-word.is-singing { text-shadow: 0 0 18px #ffd34d, 0 0.06em 0 rgba(0, 0, 0, 0.25); }
.song-screen[data-mode="karaoke"] .song-line.is-current .song-word.is-hit { color: #8dff9e; }
.song-screen[data-mode="karaoke"] .song-line.is-current .song-word.is-hit::after { background: #8dff9e; }
.song-screen[data-mode="karaoke"] .song-line.is-current .song-word.is-miss { color: rgba(255, 255, 255, 0.7); }
.song-screen[data-mode="karaoke"] .song-line.is-current .song-word.is-miss::after { background: rgba(255, 255, 255, 0.5); }

/* The ball (song.js moves it; the inner span squashes) */
.song-ball {
  position: absolute;
  left: -15px;
  top: 0;
  width: 30px;
  height: 30px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  will-change: transform;
}

.song-ball > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4 0%, #ffc93c 35%, var(--c-orange) 70%, #c4590a 100%);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(40, 20, 0, 0.45);
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Karaoke side panel: microphone + full text */
.song-side { display: none; }

.song-screen[data-mode="karaoke"] .song-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: calc(100% - 24px);
  min-height: 0;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
}

.song-mic {
  --level: 0;
  position: relative;
  align-self: center;
  width: 76px;
  height: 76px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.6);
}

.song-mic svg { position: relative; width: 34px; height: 34px; }

.song-mic__level {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 255, 158, 0.9) 0%, rgba(141, 255, 158, 0) 70%);
  opacity: calc(0.15 + var(--level) * 0.85);
  transform: scale(calc(1 + var(--level) * 0.9));
}

.song-mic.is-on { color: #fff; }
.song-mic.is-voice { box-shadow: 0 0 0 4px #8dff9e; }

.song-side__status { margin: 0; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.35; }

.song-side__list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: thin;
}

.song-side__list li {
  padding: 5px 10px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.75);
}

.song-side__list li.is-choir { color: #ffe28a; }
.song-side__list li.is-past { opacity: 0.5; }
.song-side__list li.is-current { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* Bottom bar */
.song-screen__bottom {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 8px clamp(16px, 3vw, 32px) max(18px, env(safe-area-inset-bottom, 0px));
}

.song-screen__tr { margin: 0; min-height: 1.4em; text-align: center; font-size: 16px; font-weight: 700; opacity: 0.9; }

.song-progress { width: min(900px, 100%); height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.song-progress span { display: block; height: 100%; background: #fff; border-radius: inherit; transform: scaleX(0); transform-origin: left; }

.song-screen__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.song-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #3b2410;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.song-btn[hidden] { display: none; }
.song-btn svg { width: 22px; height: 22px; flex: none; }
.song-btn--primary { background: var(--c-orange); color: #fff; }
.song-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

.song-screen__note { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; opacity: 0.85; }
.song-screen__note svg { width: 18px; height: 18px; flex: none; }

/* Result after karaoke */
.song-result {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(30, 20, 40, 0.55);
  backdrop-filter: blur(6px);
}

.song-result[hidden] { display: none; }

.song-result__card {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 520px;
  padding: 28px clamp(20px, 5vw, 40px);
  border-radius: 28px;
  background: #fffaf2;
  color: #3b2410;
  text-align: center;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.25);
}

.song-result__stars { margin: 0; font-size: 52px; line-height: 1; color: #ffc93c; letter-spacing: 6px; }
.song-result__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--c-green); }
.song-result__text { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #7a5a3c; }
.song-result .song-btn { background: #f3e7d6; }
.song-result .song-btn--primary { background: var(--c-orange); }

/* Narrow and tall screens: letter on top, lyrics below; karaoke side as a bar. */
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
  .song-screen__top { flex-wrap: wrap; }
  .song-screen__title { flex-basis: calc(100% - 64px); }
  .song-modes { order: 3; }
  .song-screen__main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .song-letter, .song-lyrics, .song-side { grid-column: 1; }
  .song-screen[data-mode="karaoke"] .song-side { width: 100%; }
  .song-letter,
  .song-screen[data-mode="karaoke"] .song-letter { font-size: clamp(72px, 14vmin, 130px); }
  .song-screen[data-mode="karaoke"] .song-side {
    flex-direction: row;
    align-items: center;
    height: auto;
    padding: 10px 14px;
  }
  .song-side__list { display: none; }
  .song-mic { width: 56px; height: 56px; }
  .song-side__status { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .song-screen__blob { animation: none; }
  .song-line { transition: color 0.3s ease; }
}

/* ---------------------------------------------------------------------
   Practice v2: six exercises, voice answers with confirmation, stars
   --------------------------------------------------------------------- */

.practice { position: relative; overflow: visible; }
.practice__inner { max-height: calc(100dvh - 32px); overflow: auto; }

.practice__progress { height: 8px; border-radius: 999px; background: #ead9c2; overflow: hidden; }
.practice__progress span {
  display: block;
  height: 100%;
  background: var(--panel);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.practice__steps { min-height: 300px; }
.practice__step-no { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: #a58d70; }

.practice__listen { justify-self: start; }
.practice__tiles--big .practice__tile { min-width: 96px; min-height: 84px; font-size: 44px; }

.practice__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.practice__tile--grid { min-width: 0; min-height: 64px; padding: 4px; font-size: 32px; }

.practice__tile.is-right,
.practice__blank.is-right {
  background: color-mix(in srgb, var(--c-green) 22%, #fff);
  border-color: var(--c-green);
  color: #24581a;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c-green) 60%, #3b2410);
}

.practice__tile[hidden] { display: none; }

.practice__counter { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--panel); }

.practice__picture {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid #fff;
  box-shadow: 0 4px 0 #e2cdb0;
}

.practice__slots { display: flex; flex-wrap: wrap; gap: 8px; }

.practice__slot {
  width: 56px;
  height: 64px;
  border-radius: 14px;
  border: 3px dashed #d9bf9c;
  background: #fff;
  color: #3b2410;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  cursor: pointer;
}

.practice__slot:not(:empty) { border-style: solid; border-color: var(--panel); }
.practice__slots.is-right .practice__slot { border-color: var(--c-green); background: color-mix(in srgb, var(--c-green) 18%, #fff); }

.practice__mic { background: #fff; }
.practice__mic.is-active { background: #d8452f; color: #fff; animation: pulse 1s ease-in-out infinite; }

.is-shaking { animation: shake 0.45s ease; }
@keyframes shake {
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* Celebration dots (practice.js positions the burst) */
.practice__burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 10; }
.practice__burst span {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: burst 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* Confirmation of a voice answer */
.practice__confirm {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: inherit;
  background: rgba(255, 250, 242, 0.88);
  backdrop-filter: blur(3px);
}

.practice__confirm[hidden] { display: none; }

.practice__confirm-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 24px clamp(16px, 5vw, 32px);
  border-radius: 24px;
  background: #fff;
  text-align: center;
  box-shadow: 0 8px 0 #e2cdb0, 0 16px 40px rgba(60, 40, 20, 0.2);
}

.practice__confirm-heard { margin: 0; font-size: 15px; font-weight: 800; color: #a58d70; }
.practice__confirm-answer {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 9vw, 64px);
  line-height: 1.05;
  color: var(--panel);
}
.practice__confirm-question { margin: 4px 0 8px; display: grid; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.practice__confirm-question span { font-family: var(--font-body); font-size: 13px; color: #7a5a3c; }
.practice__confirm-hint { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #a58d70; }

/* Result */
.practice__stars { margin: 0; font-size: 56px; line-height: 1; letter-spacing: 6px; color: #ffc93c; }
.practice__done-title { font-family: var(--font-display); font-size: clamp(28px, 6vw, 38px); color: var(--c-green); }

@media (max-width: 560px) {
  .practice__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .practice__slot { width: 46px; height: 56px; font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-shaking, .practice__mic.is-active, .practice__burst span { animation: none; }
}


/* ---------------------------------------------------------------------
   Page number: a round button in the page colour (opens the letters window)
   --------------------------------------------------------------------- */
/* "Sva slova" pill: opens the letters window. Bottom right of the page;
   the page arrows never sit there (see .page-nav__link). */
.page-number {
  position: absolute;
  right: 3cqw;
  bottom: 3cqw;
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  min-height: 44px;
  margin: 0;
  padding: 0.9cqw 1cqw 0.9cqw 2cqw;
  border-radius: 999px;
  border: 0.45cqw solid #fff;
  background: var(--panel);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0.6cqw 0 color-mix(in srgb, var(--panel) 55%, #3b2410), 0 1.2cqw 2.4cqw rgba(40, 25, 10, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.page-number__icon { width: max(16px, 3cqw); height: max(16px, 3cqw); flex: none; }
.page-number__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3cqw; }
.page-number__label { font-size: max(14px, 2.5cqw); }
.page-number__tr { font-family: var(--font-body); font-size: max(9px, 1.25cqw); opacity: 0.9; }
.page-number__num {
  display: grid;
  place-items: center;
  width: max(30px, 5cqw);
  height: max(30px, 5cqw);
  border-radius: 50%;
  background: #fff;
  color: color-mix(in srgb, var(--panel) 70%, #3b2410);
  font-size: max(15px, 2.6cqw);
}

.page-number:hover { transform: scale(1.06); }
.page-number:active { transform: scale(0.96); }
.page-number:focus-visible { outline: 0.5cqw solid #fff; outline-offset: 0.5cqw; }

/* ---------------------------------------------------------------------
   Letters window: all 30 letters in colourful boxes
   --------------------------------------------------------------------- */
.letters {
  width: min(1000px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px clamp(16px, 4vw, 32px) 20px;
  border: 0;
  border-radius: 28px;
  background: #fffaf2;
  color: #3b2410;
  font-family: var(--font-body);
  box-shadow: 0 10px 0 #e2cdb0, 0 24px 60px rgba(30, 20, 10, 0.4);
  overflow: auto;
}

.letters::backdrop { background: rgba(40, 28, 16, 0.55); backdrop-filter: blur(4px); }
.letters[open] { animation: letters-in 0.35s cubic-bezier(0.3, 1.3, 0.5, 1); }

@keyframes letters-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.letters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.letters__title { margin: 0; display: grid; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 4vw, 34px); line-height: 1.05; }
.letters__title span { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: #a58d70; }

.letters__close {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #ead9c2;
  background: #fff;
  color: #3b2410;
  cursor: pointer;
}

.letters__close svg { width: 20px; height: 20px; }

.letters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}

.letters__item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 104px;
  padding: 10px 6px 8px;
  border-radius: 20px;
  border: 3px solid #fff;
  background: var(--panel);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--panel) 55%, #3b2410);
  transition: transform 0.15s ease;
}

a.letters__item:hover { transform: translateY(-3px) rotate(-1.5deg); }
a.letters__item:active { transform: translateY(2px); }
a.letters__item:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; }

.letters__item.is-current { border-color: #3b2410; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #3b2410; }

.letters__item.is-soon { filter: grayscale(0.85); opacity: 0.45; box-shadow: none; cursor: default; }

.letters__glyph { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; }
.letters__glyph span { font-size: 0.72em; }
.letters__word { font-size: 12px; font-weight: 800; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.letters__note { margin: 16px 0 0; font-size: 13px; font-weight: 700; color: #a58d70; }

/* ---------------------------------------------------------------------
   Page turns (book.js): the old page flips away like paper, the new one
   settles in from the same side.
   --------------------------------------------------------------------- */
.stage { backface-visibility: hidden; }

.is-turning-next .stage { animation: page-out-next 0.45s cubic-bezier(0.4, 0, 0.6, 1) forwards; }
.is-turning-prev .stage { animation: page-out-prev 0.45s cubic-bezier(0.4, 0, 0.6, 1) forwards; }
.is-turning-next .backdrop,
.is-turning-prev .backdrop,
.is-turning-next .backdrop-tint,
.is-turning-prev .backdrop-tint { transition: opacity 0.45s ease; opacity: 0.6; }
.is-turning-next .page-nav,
.is-turning-prev .page-nav { opacity: 0; transition: opacity 0.2s ease; }

/* A soft page turn: the page slides a little to the side and fades,
   the next page slides in gently from the other side. */
@keyframes page-out-next {
  to { transform: translate(calc(-50% - 6%), -50%) scale(0.98); opacity: 0; }
}

@keyframes page-out-prev {
  to { transform: translate(calc(-50% + 6%), -50%) scale(0.98); opacity: 0; }
}

.is-arriving-next .stage { animation: page-in-next 0.55s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
.is-arriving-prev .stage { animation: page-in-prev 0.55s cubic-bezier(0.2, 0.6, 0.3, 1) both; }

@keyframes page-in-next {
  from { transform: translate(calc(-50% + 6%), -50%) scale(0.98); opacity: 0; }
  to { transform: translate(-50%, -50%); opacity: 1; }
}

@keyframes page-in-prev {
  from { transform: translate(calc(-50% - 6%), -50%) scale(0.98); opacity: 0; }
  to { transform: translate(-50%, -50%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .is-turning-next .stage, .is-turning-prev .stage,
  .is-arriving-next .stage, .is-arriving-prev .stage,
  .letters[open] { animation: none; }
}

/* ---------------------------------------------------------------------
   Website layer around the book
   The book pages stay full screen: no header, no footer. Website links
   live in places that already exist — the "Sva slova" window, a pill on
   the cover, a small parent line on the end screens. Site pages
   (za-roditelje, podrzi, …) are normal scrolling pages: the cover
   picture blurred behind a paper card, in the same colours and fonts.
   --------------------------------------------------------------------- */

.page-number--parents { text-decoration: none; padding-right: 2.4cqw; }

/* Small parent line on the "Bravo" screens (practice and song). */
.parent-link {
  display: block;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 800;
  color: #8a6a4a;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* inline-block: the underline of the link does not run under the translation. */
.parent-link span { display: inline-block; width: 100%; margin-top: 3px; font-size: 11px; font-weight: 700; line-height: 1.35; opacity: 0.8; }

/* Letters window footer: progress and parent links. */
.letters__foot { display: grid; gap: 10px; margin-top: 16px; }
.letters__foot .letters__note { margin: 0; }
.letters__progress { height: 10px; border-radius: 999px; background: #efe3d0; overflow: hidden; }
.letters__progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-green), var(--c-yellow)); }
.letters__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.letters__links a { color: var(--ink); font-weight: 800; font-size: 14px; text-underline-offset: 3px; }
.letters__links small { font-weight: 700; color: #a58d70; }

/* ---------- Site pages ---------- */
html:has(.page-site),
.page-site { height: auto; min-height: 100%; }
/* The footer stays at the bottom of the screen, also on short pages. */
.page-site {
  overflow: auto;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--bar-h) + env(safe-area-inset-top) + 24px) 16px 0;
}
.page-site .site-footer { margin-top: auto; }
.page-site .backdrop-tint { background: color-mix(in srgb, var(--panel) 55%, transparent); }

/* Only the chosen language is visible. */
.page-site .l-en,
.page-site .l-de,
.gate .l-en,
.gate .l-de { display: none; }
html[data-lang="en"] .l-bs,
html[data-lang="de"] .l-bs { display: none; }
html[data-lang="en"] .l-en,
html[data-lang="de"] .l-de { display: revert; }

.site-bar,
.site-card,
.site-footer { position: relative; width: min(760px, 100%); }

.site-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 16px;
}

.site-logo { display: block; line-height: 0; }
.site-logo img { width: auto; height: clamp(30px, 6.5vw, 42px); }

.site-bar__actions { display: flex; align-items: center; gap: 10px; }

.site-card .site-lang { float: right; margin: 0 0 12px 16px; border-color: color-mix(in srgb, var(--panel) 25%, #fff); }
.site-lang {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #fff;
}
.site-lang button {
  min-width: 44px;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: 800 14px var(--font-body);
  cursor: pointer;
}
.site-lang button[aria-pressed="true"] { background: var(--panel); color: #fff; }

.site-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: var(--panel);
  color: #fff;
  font: 800 16px var(--font-display);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--panel) 55%, #3b2410);
  cursor: pointer;
}
.site-btn svg { width: 18px; height: 18px; }

.site-card {
  margin-bottom: 8px;
  padding: clamp(24px, 5vw, 48px);
  border-radius: 28px;
  background: #fffaf2;
  box-shadow: 0 10px 0 color-mix(in srgb, var(--panel) 45%, #3b2410), 0 24px 48px rgba(40, 25, 10, 0.3);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.site-card h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(34px, 7vw, 48px);
  line-height: 1.1;
  color: var(--panel);
}
.site-card h2 {
  margin: 32px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.2;
}
.site-card p { margin: 0 0 14px; }
.site-card a:not(.site-cta) { color: color-mix(in srgb, var(--panel) 70%, #3b2410); }

.site-list { margin: 0 0 14px; padding-left: 1.2em; }
.site-list li { margin-bottom: 8px; }
.site-list li::marker { color: var(--panel); }

.site-progress { margin: 8px 0 20px; }
.site-progress__bar { height: 16px; border-radius: 999px; background: #efe3d0; overflow: hidden; }
.site-progress__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-green), var(--c-yellow)); }
.site-progress__label { margin: 8px 0 0 !important; font-size: 15px; }
.site-progress__label strong { font-family: var(--font-display); font-size: 20px; }

.site-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
}
.site-tier {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid color-mix(in srgb, var(--panel) 35%, #fff);
}
.site-tier__price { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--panel); }
.site-tier__name { font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.site-tier__text { font-size: 14px; line-height: 1.4; color: #8a6a4a; }

.site-actions { margin: 24px 0 !important; }
.site-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: var(--panel);
  color: #fff;
  font: 800 20px var(--font-display);
  text-decoration: none;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--panel) 55%, #3b2410), 0 10px 20px rgba(40, 25, 10, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.site-cta:hover { transform: translateY(-2px); }
.site-cta:active { transform: translateY(3px); }
.site-cta svg { width: 22px; height: 22px; flex: none; }
.site-cta small { font: 700 13px var(--font-body); opacity: 0.85; }
.site-cta--soft { background: #fff; color: color-mix(in srgb, var(--panel) 70%, #3b2410); border-color: color-mix(in srgb, var(--panel) 35%, #fff); }
.site-cta.is-disabled { background: #d9cdbb; color: #fff; box-shadow: none; cursor: default; transform: none; }

.site-note { font-size: 14px; color: #8a6a4a; }
.site-sponsors { display: grid; gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.site-sponsors span { color: var(--panel); font-family: var(--font-display); }

.site-footer {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 0 32px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px rgba(40, 25, 10, 0.5);
}
.site-footer p { margin: 0; opacity: 0.9; }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.site-footer__nav a { color: #fff; text-underline-offset: 3px; }
.site-footer__nav a[aria-current="page"] { text-decoration: none; opacity: 0.75; }

/* Parent gate (site.js) */
.gate {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #fffaf2;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(40, 25, 10, 0.4);
}
.gate::backdrop { background: rgba(40, 25, 10, 0.55); }
.gate__card { display: grid; gap: 12px; padding: 28px; font-weight: 700; }
.gate__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.1; color: var(--panel); }
.gate__text { margin: 0; }
.gate__question { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 30px; }
.gate__input {
  width: 110px;
  min-height: 52px;
  padding: 0 12px;
  border: 3px solid color-mix(in srgb, var(--panel) 45%, #fff);
  border-radius: 14px;
  font: 800 28px var(--font-display);
  color: var(--ink);
  text-align: center;
}
.gate__error { min-height: 1.4em; margin: 0; color: var(--c-red); }
.gate__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gate__actions .site-cta { font-size: 18px; min-height: 48px; padding: 0 22px; }

/* Share images (tools/build-og.sh): the page without its controls. */
.is-og .page-nav,
.is-og .page-number { display: none; }

/* Cover: "Podržavaoci" pill, bottom left (mirror of "Za roditelje"). */
.page-number--supporters { right: auto; left: 3cqw; text-decoration: none; }
.page-number--supporters:not(:has(.page-number__num)) { padding-right: 2.4cqw; }

/* "Vaša riječ u knjizi" tier: the full row, highlighted. */
.site-tier--feature { grid-column: 1 / -1; background: color-mix(in srgb, var(--panel) 10%, #fff); border-color: var(--panel); }

/* Thank-you page: one card per supporter. */
.sponsors { display: grid; gap: 14px; margin: 20px 0; padding: 0; list-style: none; }
.sponsor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid color-mix(in srgb, var(--panel) 30%, #fff);
}
.sponsor__letter {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--panel);
  color: #fff !important;
  font: 800 30px var(--font-display);
  text-decoration: none;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--panel) 55%, #3b2410);
}
.sponsor__letter.is-soon { background: #cfc4b4; box-shadow: 0 4px 0 #a99c88; }
.sponsor__letter.is-heart svg { width: 26px; height: 26px; }
.sponsor__body > * { margin: 0 !important; }
.sponsor__name { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.sponsor__type { font-size: 14px; color: #8a6a4a; }
.sponsor__message { margin-top: 8px !important; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--panel) 45%, #fff); font-style: italic; }

/* Small covers: the two side pills become round icon buttons, so they never
   touch the "Počni" button in the middle. */
@container (max-width: 700px) {
  .page-number--supporters,
  .page-number--parents { gap: 0.8cqw; padding: 0.9cqw; min-width: 44px; justify-content: center; }
  .page-number--supporters .page-number__text,
  .page-number--parents .page-number__text { display: none; }
  .page-number--supporters .page-number__icon,
  .page-number--parents .page-number__icon { width: max(20px, 4cqw); height: max(20px, 4cqw); }
}

/* Unfinished letter: tappable, with its own small card (book.js openSoon). */
button.letters__item { font: inherit; color: inherit; cursor: pointer; }
button.letters__item.is-soon:hover { opacity: 0.6; }
button.letters__item:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; }

.letters-soon {
  width: min(360px, calc(100vw - 32px));
  padding: 28px 24px 22px;
  border: 0;
  border-radius: 28px;
  background: #fffaf2;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 24px 60px rgba(40, 25, 10, 0.4);
}
.letters-soon::backdrop { background: rgba(40, 25, 10, 0.45); }
.letters-soon > * { margin-left: auto; margin-right: auto; }
.letters-soon :where(h2, p) { margin-top: 0; margin-bottom: 0; }
.letters-soon__tile {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 14px;
  border-radius: 24px;
  background: var(--panel);
  color: #fff;
  font: 800 56px var(--font-display);
  line-height: 1;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--panel) 55%, #3b2410);
}
.letters-soon__title { font: 800 28px/1.1 var(--font-display); }
.letters-soon__word { margin-top: 6px; font-weight: 800; font-size: 18px; }
.letters-soon__tr { margin-top: 2px; font-weight: 700; font-size: 13px; color: #a58d70; }
.letters-soon__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  padding: 10px 28px;
  line-height: 1.1;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--panel);
  color: #fff;
  font: 800 20px var(--font-display);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--panel) 55%, #3b2410);
  cursor: pointer;
}
.letters-soon__ok small { font: 700 12px var(--font-body); opacity: 0.85; }
.letters-soon__parents { max-width: 260px; margin-top: 22px; padding-top: 16px; border-top: 2px dashed #ecdcc4; line-height: 1.3; }

/* Support page: the letter a parent came for (?slovo=D). */
.site-letter {
  display: grid;
  gap: 14px;
  margin: 8px 0 28px;
  padding: 20px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 10%, #fff);
  border: 3px solid var(--panel);
  scroll-margin-top: 16px;
}
.site-letter[hidden] { display: none; }
.site-letter__head { display: flex; align-items: center; gap: 16px; }
.site-letter__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--panel);
  color: #fff;
  font: 800 42px/1 var(--font-display);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--panel) 55%, #3b2410);
}
.site-card .site-letter__title { margin: 0; font-size: clamp(22px, 4.5vw, 28px); }
.site-letter__lead { margin: 4px 0 0 !important; font-size: 15px; line-height: 1.4; }
.site-letter__label { font-size: 15px; }
.site-letter__message {
  width: 100%;
  min-height: 150px;
  padding: 12px 14px;
  border: 3px solid color-mix(in srgb, var(--panel) 45%, #fff);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: 700 16px/1.5 var(--font-body);
  resize: vertical;
}
.site-letter__message:focus { outline: none; border-color: var(--panel); }
.site-letter__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.site-letter__actions .site-cta { font-size: 18px; min-height: 48px; padding: 0 22px; }
.site-letter__hint { margin: 0 !important; }
.site-letter__hint.is-done { color: var(--c-green); font-weight: 800; }

/* Footer: Buy Me a Coffee in white (through the parent gate). */
.site-footer__bmc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font: 800 15px var(--font-display);
  text-decoration: none;
  text-shadow: none;
  background: rgba(255, 255, 255, 0.14);
}
.site-footer__bmc:hover { background: rgba(255, 255, 255, 0.26); }
.site-footer__bmc svg { width: 18px; height: 18px; }

/* Contact form (/kontakt/). */
.contact-form { display: grid; gap: 16px; margin: 24px 0 8px; }
.contact-form .field { display: grid; gap: 6px; }
.contact-form .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.contact-form label { font-size: 15px; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 3px solid color-mix(in srgb, var(--panel) 35%, #fff);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: 700 16px/1.4 var(--font-body);
}
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form :is(input, select, textarea):focus { outline: none; border-color: var(--panel); }
.contact-form .site-cta { justify-self: start; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form__turnstile:empty { display: none; }
.contact-form__note { margin: 0 !important; font-size: 14px; color: #8a6a4a; }
.contact-form__note.is-warn { color: var(--c-red); font-weight: 800; }
.contact-sent {
  display: grid;
  gap: 6px;
  margin: 24px 0;
  padding: 20px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 12%, #fff);
  border: 3px solid var(--panel);
}
.contact-sent strong { font: 800 22px/1.2 var(--font-display); color: color-mix(in srgb, var(--panel) 70%, #3b2410); }

/* =====================================================================
   Phones and tall tablets (portrait, aspect ≤ 4/5)
   The page fills the whole screen — no blurred bands. The picture covers
   the upper part, the page colour fades in below it and carries all text
   and buttons in one ordered column; navigation sits in a top bar.
   Sizes are in px/vw here, not cqw: the stage is no longer square.
   ===================================================================== */
.letter-content,
.letter-title,
.stage > picture { display: contents; }

@media (max-aspect-ratio: 4/5) {
  .stage {
    top: 50%;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    box-shadow: none;
  }

  /* ---------- Picture and panel ----------
     The stage is two rows: the picture takes all space above the text
     block, whatever its height, so there is never an empty band. The text
     block carries the page colour and fades into the picture. */
  .page-letter .stage {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  /* The picture fills all space above the text block (cover); the text
     block has only its own height. --art-focus (pages.json "artFocus")
     keeps the main figure in view. */
  .page-letter .stage__art {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: var(--art-focus, 62%) 50%;
  }
  .page-letter .stage { padding-top: calc(var(--bar-h) + env(safe-area-inset-top)); background: var(--panel); }
  .page-letter .letter-panel { display: none; }

  /* ---------- Text and buttons, one ordered column ---------- */
  .page-letter .letter-content {
    position: relative;
    grid-row: 2;
    margin-top: -64px;
    padding-top: 64px !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 0%, transparent) 0, var(--panel) 64px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
    padding: 0 20px calc(18px + env(safe-area-inset-bottom));
  }
  .page-letter .letter-head,
  .page-letter .letter-sentence { display: contents; }

  .page-letter .letter-glyphs {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: clamp(56px, 19vw, 92px);
    line-height: 0.95;
  }
  /* The word and its translation are one block, set off from the letter. */
  .page-letter .letter-title {
    display: block;
    grid-column: 2 / -1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    padding-left: 16px;
    text-align: right;
  }
  .page-letter .letter-title .say-btn { text-align: right; }
  .page-letter .letter-word {
    margin: 0;
    font-size: clamp(32px, 10.5vw, 48px);
  }
  .page-letter .letter-translation {
    margin: 4px 0 0;
    font-size: 14px;
  }
  .page-letter .letter-sentence__row {
    grid-column: 1 / -1;
    grid-row: 3;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    justify-content: space-between;
  }
  .page-letter .letter-sentence__bs { font-size: clamp(20px, 5.8vw, 26px); }
  .page-letter .speaker-btn { width: 44px; height: 44px; border-width: 2px; box-shadow: 0 3px 0 color-mix(in srgb, var(--panel) 55%, #3b2410); }
  .page-letter .letter-sentence__tr {
    grid-column: 1 / -1;
    grid-row: 4;
    font-size: 13px;
    line-height: 1.4;
  }

  /* The two buttons share the last row: song left, practice right. */
  .page-letter .practice-open {
    grid-row: 5;
    justify-content: center;
    margin: 10px 0 0;
    min-height: 48px;
    padding: 8px 18px;
    border-width: 2px;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--panel) 55%, #3b2410), 0 8px 16px rgba(40, 25, 10, 0.2);
  }
  .page-letter .practice-open--song { grid-column: 1 / 3; justify-self: start; gap: 10px; }
  .page-letter .practice-open--small { grid-column: 3; justify-self: end; }
  .page-letter .practice-open:only-of-type { grid-column: 1 / -1; }
  .page-letter .practice-open__icon { width: 22px; height: 22px; }
  .page-letter .practice-open__label,
  .page-letter .practice-open--song .practice-open__label,
  .page-letter .practice-open--small .practice-open__label { font-size: 18px; }
  /* Only the names fit side by side on a phone. */
  .page-letter .practice-open__tr { display: none; }
  .page-letter .practice-open--song { min-width: 0; }

  /* ---------- Cover ----------
     The title sits on the sky; the picture fills everything below it to the
     bottom of the screen, and the buttons sit on its grass. */
  .page-cover .stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr minmax(0, 100vw) auto;
    padding: calc(var(--bar-h) + env(safe-area-inset-top)) 0 0;
    background: linear-gradient(180deg, #8cc4ea 0%, #a9d4f0 100%);
  }
  .page-cover .cover-title {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center;
    padding: clamp(32px, 6vh, 64px) 0 20px;
  }
  .page-cover .cover-title::before { display: none; }
  .page-cover .cover-title__main { font-size: clamp(62px, 19vw, 120px); }
  .page-cover .cover-title__lead { margin: 12px 20px 0; font-size: clamp(15px, 4.2vw, 20px); }
  .page-cover .cover-title__sub { margin-top: 6px; font-size: clamp(12px, 3.3vw, 16px); }
  .page-cover .stage__art {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 2 / 4;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  }
  .page-cover .start-button {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    grid-column: 2;
    grid-row: 3;
    z-index: 1;
    margin: 6px 0 calc(16px + env(safe-area-inset-bottom));
    padding: 12px 40px 14px;
    border-width: 3px;
  }
  .page-cover .page-number--supporters,
  .page-cover .page-number--parents {
    position: relative;
    inset: auto;
    translate: none;
    grid-row: 3;
    z-index: 1;
    align-self: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border-width: 2px;
  }
  .page-cover .page-number__text,
  .page-cover .page-number__num { display: none; }
  .page-cover .page-number--supporters { grid-column: 1; justify-self: start; margin-left: 16px; }
  .page-cover .page-number--parents { grid-column: 3; justify-self: end; margin-right: 16px; }
  .page-cover .start-button:active { transform: translateY(3px); }
  .page-cover .start-button__label { font-size: 30px; }
  .page-cover .start-button__translation { font-size: 12px; }
  .page-cover .page-number__icon { width: 22px; height: 22px; }
}


/* =====================================================================
   Top bar on every book page (tools/build-pages.mjs bookBar()):
   logo · ‹ Sva slova N › · Za roditelje, Podrži nas, Kontakt.
   Desktop: the page sits below it. Phones: it floats over the blurred top.
   ===================================================================== */
.book-bar {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(59, 36, 16, 0.08), 0 6px 18px rgba(40, 25, 10, 0.12);
  color: var(--ink);
}
.book-bar__home { justify-self: start; display: flex; align-items: center; line-height: 0; }
.book-bar__logo { height: clamp(22px, 6.2vw, 30px); width: auto; }

.book-bar__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: color-mix(in srgb, var(--panel, var(--c-orange)) 70%, #3b2410);
  font-size: 16px;
}

.book-bar__links { display: none; }
.book-bar__links a,
.book-bar__drop a { color: var(--ink); font: 800 15px var(--font-body); text-decoration: none; }
.book-bar__links a:hover,
.book-bar__drop a:hover { text-decoration: underline; text-underline-offset: 4px; }

.book-bar__more { justify-self: end; position: relative; }
.book-bar__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--panel, var(--c-orange)) 35%, #fff);
  font: 800 15px var(--font-display);
  list-style: none;
  cursor: pointer;
}
.book-bar__more summary::-webkit-details-marker { display: none; }
.book-bar__more summary svg { width: 20px; height: 20px; }
.book-bar__more summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.book-bar__more[open] summary { background: color-mix(in srgb, var(--panel, var(--c-orange)) 12%, #fff); }
.book-bar__drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 190px;
  padding: 8px;
  border-radius: 18px;
  background: #fffaf2;
  box-shadow: 0 16px 40px rgba(40, 25, 10, 0.3);
}
.book-bar__drop a { padding: 10px 12px; border-radius: 12px; }
.book-bar__drop a:hover,
.book-bar__drop a[aria-current="page"] { background: color-mix(in srgb, var(--panel, var(--c-orange)) 12%, #fff); text-decoration: none; }


@media (max-width: 560px) {
  .book-bar { padding-left: 12px; padding-right: 12px; gap: 6px; }
}


/* Share images: no bar, the page uses the full height. */
.is-og { --bar-h: 0px; }
.is-og .book-bar { display: none; }

/* "Sva slova" is the first item of the menu. */
.book-bar__all {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 8px 8px 8px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--panel, var(--c-orange));
  color: #fff;
  font: 800 16px var(--font-display);
  text-align: left;
  cursor: pointer;
}
.book-bar__all svg { width: 16px; height: 16px; flex: none; }
.book-bar__all span:first-of-type { flex: 1; }
.book-bar__all .book-bar__num { width: 28px; height: 28px; font-size: 14px; }

/* Text for screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Cookie consent for Google Analytics (js/consent.js): a small card at the
   bottom, for parents. */
.consent {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  translate: -50% 0;
  width: min(560px, calc(100vw - 24px));
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fffaf2;
  color: var(--ink);
  box-shadow: 0 12px 36px rgba(40, 25, 10, 0.35);
  font: 700 14px/1.45 var(--font-body);
}
.consent[hidden] { display: none; }
.consent__text { margin: 0; }
.consent__text span { display: block; margin-top: 2px; font-size: 12px; color: #8a6a4a; }
.consent__text a { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--ink); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent__btn {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 8px 12px;
  border: 2px solid #2f6fc2;
  border-radius: 999px;
  background: #fff;
  color: #1f4f8f;
  font: 800 16px/1.15 var(--font-display);
  cursor: pointer;
}
/* Accept and decline look the same (equal choice, as EU regulators expect). */
.consent__btn small { font: 700 11px var(--font-body); opacity: 0.8; }
.site-footer__link {
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}