/* Pe îndelete – Romanian Fast Track. Warm yellow and golden-amber sunrise over Carpathian ridges, dark aubergine ink
   on cream, a plum accent (#6B2D5C) and the flag colours used sparingly. Folk ornaments (ie rhombus/sun rosette, the
   twisted rope "funia răsucită", Brâncuși's Endless Column rhombus chain), mountain silhouettes and a small wooden
   Maramureș church are inline SVG data URIs. Decorative only (CSS pseudo-elements). No external fonts, images or network. */
:root {
  --paper: #FFF9EC;     /* cream page: ink 16.1:1 */
  --soft: #FDF0CC;      /* soft yellow panels, footer (ink-2 8.0:1) */
  --soft-2: #F8E3A8;    /* hover, tags, card back (ink-2 7.1:1, plum 7.7:1) */
  --amber: #F6C445;     /* header base colour: ink 10.4:1 */
  --sunrise: linear-gradient(180deg, #FFE7A0 0%, #F9CB55 55%, #F2AE45 100%); /* darkest stop: ink 8.8:1 */
  --plum: #6B2D5C;      /* primary buttons (white 9.7:1), accents */
  --plum-2: #561F4A;    /* hover (white 12.4:1) */
  --aub: #4A1D3F;       /* logo tile, current nav item (#FFE9A8 11.4:1) */
  --mid: #A0527F;       /* decorative underlines */
  --ink: #2B1622;       /* dark aubergine-brown text */
  --ink-2: #5F3F52;     /* muted text: 8.6:1 on paper */
  --sun: #F6C445;       /* focus halo, logo letter */
  --ro-blue: #002B7F; --ro-yellow: #FCD116; --ro-red: #CE1126; /* flag colours, sparingly */
  --card: #FFFFFF;
  --card-2: #FFFCF4;
  --line: #E6CF95;      /* decorative borders */
  --ok: #1E6B34; --ok-bg: #E3F4E6;
  --no: #A32A12; --no-bg: #FCE6DF;
  --radius: 14px;
  --shadow: 0 2px 0 rgba(43, 22, 34, .06), 0 6px 18px rgba(107, 45, 92, .08);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.55 var(--font); overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--mid); }
a:hover { text-decoration-color: var(--plum); }
h1, h2, h3 { line-height: 1.2; margin: .2em 0 .5em; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); letter-spacing: -.01em; }
h2 { font-size: 1.25rem; }
p { margin: .5em 0 .9em; }
code { background: var(--soft); padding: 0 .3em; border-radius: 4px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.center { text-align: center; }
.lead { font-size: 1.1rem; max-width: 62ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Focus: always visible, high contrast */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--sun); border-radius: 6px; }
main:focus, h1:focus { outline: none; box-shadow: none; }
h1:focus-visible { outline: 3px dashed var(--ink-2); outline-offset: 4px; box-shadow: none; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { top: 12px; }

/* Header */
.site-header { background: var(--sunrise); background-color: var(--amber); color: var(--ink); position: sticky; top: 0; z-index: 5; }
.header-in { position: relative; }
.header-in { display: flex; align-items: center; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; padding: 6px 0; }
.logo { width: 40px; height: 40px; border-radius: 10px; background: var(--aub); color: var(--sun); display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; line-height: 1; box-shadow: 0 0 0 2px rgba(255,249,236,.85); flex: none; }
.brand-t { display: flex; flex-direction: column; line-height: 1.1; }
.brand-t b { font-size: 1.3rem; }
.brand-t small { font-size: .8rem; font-weight: 600; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.site-nav a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-weight: 650; font-size: .95rem; color: var(--ink); }
.site-nav a:hover { background: rgba(255, 249, 236, .75); }
.site-nav a[aria-current="page"] { background: var(--aub); color: #FFE9A8; box-shadow: inset 0 -3px 0 var(--sun); }
.menu-btn { display: none; }
@media (min-width: 861px) {
  .site-nav { width: 100%; padding-bottom: 6px; }
  .site-nav a { padding: 8px 8px; }
}

@media (max-width: 860px) {
  .menu-btn { display: inline-block; font: inherit; font-weight: 700; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; padding: 7px 14px; cursor: pointer; }
  .site-nav { display: none; width: 100%; padding-bottom: 10px; }
  .site-nav.open { display: block; }
  .site-nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .site-nav a { background: #FFF1C4; text-align: center; padding: 10px 4px; }
  .site-nav a:hover { background: var(--paper); }
}

main { padding-top: 24px; padding-bottom: 40px; min-height: 60vh; }

/* Buttons */
.btn, .opt {
  font: inherit; font-weight: 650; color: var(--ink); background: var(--card);
  border: 2px solid var(--ink); border-radius: 12px; padding: 10px 16px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; text-align: center; line-height: 1.25; max-width: 100%;
}
.btn:hover, .opt:hover:not(:disabled) { background: var(--soft-2); }
.btn.primary { background: var(--plum); border-color: var(--plum); color: #fff; }
.btn.primary:hover { background: var(--plum-2); border-color: var(--plum-2); }
.btn.danger { border-color: var(--no); color: var(--no); }
.btn.danger:hover { background: var(--no-bg); }
.btn.again { border-color: var(--no); color: var(--no); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.listen { display: none; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink); background: var(--soft); border: 1.5px solid var(--ink-2); border-radius: 999px; padding: 3px 10px; cursor: pointer; align-items: center; gap: 4px; vertical-align: middle; }
.has-voice .listen { display: inline-flex; }
.voice-msg { display: none; }
.has-voice .voice-msg { display: inline; }
.has-voice .no-voice-msg { display: none; }

/* Hero & panels */
.hero { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 22px 24px 8px; box-shadow: var(--shadow); }
.kicker { font-weight: 700; margin: 0; color: var(--ink-2); }
.panel { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 18px 0; box-shadow: var(--shadow); }
.panel.notes { background: var(--soft); }
.panel.notes li { margin-bottom: .5em; }
.panel.sos { border: 2px solid var(--no); }
.panel.compact { background: var(--soft); }
.crumbs { font-size: .95rem; margin-bottom: 6px; color: var(--ink-2); }
.dayno { display: inline-block; background: var(--plum); color: #fff; border-radius: 8px; padding: 0 .35em; font-size: .7em; vertical-align: middle; }
.hr-title { display: block; font-size: .55em; font-weight: 600; color: var(--ink-2); margin-top: 6px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.stat { background: var(--soft); border-radius: var(--radius); padding: 14px; text-align: center; border: 2px solid var(--plum); overflow: hidden; }
.stat b { color: var(--plum); }
.stat b { display: block; font-size: 1.8rem; line-height: 1.1; }
.stat small { font-size: .9rem; font-weight: 600; }
.stat span { font-weight: 600; font-size: .9rem; }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bar { height: 12px; background: var(--soft); border: 1.5px solid var(--ink-2); border-radius: 999px; overflow: hidden; margin: 4px 0 14px; }
.bar span { display: block; height: 100%; background: var(--plum); }

/* Phrases */
.phrases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .phrases { grid-template-columns: minmax(0, 1fr); } }
.phrase { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card-2); overflow-wrap: anywhere; }
.phrase-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.phrase .hr { font-weight: 750; font-size: 1.12rem; }
.fem { margin-top: 2px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag { display: inline-block; background: var(--soft-2); border: 1px solid var(--ink-2); border-radius: 6px; padding: 0 6px; font-size: .78rem; font-weight: 700; }
.pron { color: var(--ink-2); font-style: italic; font-size: .95rem; }
.en { margin-top: 2px; }
.pnote { font-size: .88rem; color: var(--ink-2); margin-top: 4px; border-left: 3px solid var(--mid); padding-left: 8px; }
.from { display: inline-block; margin-top: 6px; font-size: .88rem; font-weight: 600; }

/* Path */
.path { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.path-item a { display: flex; flex-direction: column; gap: 2px; height: 100%; text-decoration: none; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.path-item a:hover { border-color: var(--plum); }
.path-item.is-done a { background: var(--soft); border-color: var(--ink-2); }
.day { font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.pt { font-weight: 750; font-size: 1.08rem; }
.phr { font-style: italic; color: var(--ink-2); }
.meta { font-size: .85rem; margin-top: 4px; }
.badge { background: var(--ink); color: var(--paper); border-radius: 6px; padding: 0 6px; font-weight: 700; }
.pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }

/* Situations */
.sit-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.sit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; background: var(--soft); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px; height: 100%; }
.sit:hover { border-color: var(--ink); background: var(--soft-2); }
.sit-icon { font-size: 1.7rem; line-height: 1; }
.sit-t { font-weight: 750; }
.sit-hr { font-size: .9rem; color: var(--ink-2); font-style: italic; }
@media (max-width: 400px) { .sit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Toolbar & form controls */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.toolbar label { font-weight: 700; }
select, input[type="text"], input[type="search"] {
  font: inherit; color: var(--ink); background: var(--card); border: 2px solid var(--ink-2); border-radius: 10px; padding: 9px 12px; min-height: 46px; max-width: 100%;
}
select { min-width: 0; }
@media (max-width: 560px) { .toolbar select { width: 100%; } .toolbar label { width: 100%; margin-bottom: -4px; } }

/* Flashcards */
.boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 6px 0 12px; }
.lbox { background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; text-align: center; padding: 6px 2px; }
.lbox b { display: block; font-size: 1.2rem; }
.lbox span { font-size: .78rem; font-weight: 600; }
.lbox.new { background: var(--soft); }
.flash-wrap { perspective: 1200px; max-width: 620px; margin: 0 auto; }
.flash { position: relative; width: 100%; min-height: 240px; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); transform-style: preserve-3d; transition: transform .45s ease; border-radius: 18px; display: block; }
.flash.flipped { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border-radius: 18px; border: 3px solid var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; overflow-wrap: anywhere; }
.front { background: var(--card); }
.back { background: var(--soft-2); border-color: var(--plum); transform: rotateY(180deg); }
.face .big { font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 750; line-height: 1.25; }
.hint { font-size: .85rem; color: var(--ink-2); }
.flash-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.flash-actions .btn { min-width: 140px; }
@media (prefers-reduced-motion: reduce) { .flash { transition: none; } }

/* Quiz */
.q-prompt { font-weight: 700; margin-bottom: 4px; }
.q-big { font-size: clamp(1.3rem, 4.5vw, 1.8rem); font-weight: 750; margin: 6px 0 14px; overflow-wrap: anywhere; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .opts { grid-template-columns: minmax(0, 1fr); } }
.opt { width: 100%; justify-content: flex-start; text-align: left; font-weight: 600; }
.opt:disabled { cursor: default; opacity: 1; }
.opt.correct { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.opt.correct::before { content: "✓ "; }
.opt.wrong { background: var(--no-bg); border-color: var(--no); color: var(--no); }
.opt.wrong::before { content: "✗ "; }
.typeform { display: flex; gap: 10px; flex-wrap: wrap; }
.typeform input { flex: 1 1 220px; font-size: 1.1rem; }
.feedback { margin: 14px 0; padding: 12px 14px; border-radius: 12px; border: 2px solid; overflow-wrap: anywhere; }
.feedback.ok { background: var(--ok-bg); border-color: var(--ok); }
.feedback.no { background: var(--no-bg); border-color: var(--no); }
.result h2 { font-size: 1.6rem; }

/* Tables */
.table-wrap { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; margin: 8px 0 12px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th, .grammar th { background: var(--soft); }
.alpha th[scope="row"] { font-size: 1.15rem; white-space: nowrap; }
.key td:nth-child(odd) { font-weight: 750; font-style: italic; white-space: nowrap; }
@media (max-width: 560px) {
  .key, .key tbody, .key tr { display: block; }
  .key tr { display: grid; grid-template-columns: auto 1fr; }
  th, td { padding: 7px 6px; }
}
.tricky { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tricky div { background: var(--card-2); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tricky dt { font-weight: 800; font-size: 1.2rem; }
.tricky dd { margin: 4px 0 0; }
.tricky .ex { font-style: italic; color: var(--ink-2); }
@media (max-width: 700px) { .tricky { grid-template-columns: minmax(0, 1fr); } }

/* Search */
.search input { width: 100%; font-size: 1.15rem; padding: 12px 14px; border-width: 3px; border-color: var(--ink); }

/* Footer */
.site-footer { border-top: 3px solid var(--plum); background: var(--soft); padding: 18px 0 26px; font-size: .95rem; }

/* Bonus topics: wine & culture */
.topic-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.topic-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: 100%; text-decoration: none; background: var(--soft); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px; }
.topic-tile:hover { border-color: var(--ink); background: var(--soft-2); }
.hr-sub { font-size: .85em; font-weight: 600; font-style: italic; color: var(--ink-2); }
.panel.caution { background: var(--soft); border: 2px solid var(--ink); border-left: 10px solid var(--sun); }
.panel.caution p { margin: 0; }
.toc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 4px; }
.toc-l { font-weight: 700; }
.chip { font: inherit; font-size: .9rem; font-weight: 650; color: var(--ink); background: var(--card); border: 1.5px solid var(--ink-2); border-radius: 999px; padding: 6px 12px; min-height: 38px; cursor: pointer; text-align: left; max-width: 100%; }
.chip:hover { background: var(--soft-2); }
.topic-sec { scroll-margin-top: 90px; }
.topic-sec:focus:not(:focus-visible) { box-shadow: var(--shadow); }
.fact-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.fact { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card-2); overflow-wrap: anywhere; }
.fact h3, .item h3 { font-size: 1.1rem; margin: 0 0 2px; }
.fact p { margin: .3em 0 0; }
.fact-sub { margin: 0 0 .4em; font-size: .95rem; color: var(--ink-2); }
.fact-hr { font-weight: 700; color: var(--ink); }
.item { border-top: 1.5px solid var(--line); padding-top: 14px; margin-top: 14px; overflow-wrap: anywhere; }
.item:first-of-type { border-top: 0; padding-top: 0; }
.item .phrases { margin-top: 8px; }
.dialogue { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.line { display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; max-width: 46rem; overflow-wrap: anywhere; }
.line.a { background: var(--card-2); }
.line.b { background: var(--soft); margin-left: clamp(0px, 6vw, 4rem); }
.line .who { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.line .hr { font-weight: 750; font-size: 1.08rem; }


/* Hero idiom note */
.idiom { max-width: 62ch; border-left: 4px solid var(--plum); padding: 4px 0 4px 12px; background: var(--soft); border-radius: 0 10px 10px 0; }

/* ---------- Romanian folk ornament & landscape (decorative only; inline SVG data URIs, no network) ----------
   ie rhombus / sun rosette, funia răsucită (twisted rope), the Endless Column rhombus chain, Carpathian ridges,
   a sunrise and a small wooden Maramureș church. Neutral heritage motifs only: no arms, political or military symbols. */
.site-header::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%23FFF6D6' fill-opacity='.75'%3E%3Ccircle cx='60' cy='60' r='22'/%3E%3C/g%3E%3Cg stroke='%23FFF6D6' stroke-opacity='.65' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M60 30V20M39 39L32 32M81 39L88 32M30 58H20M90 58H100M47 33L43 24M73 33L77 24'/%3E%3C/g%3E%3C/svg%3E") right 18% bottom 0 / 120px 60px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 52 L70 34 L130 46 L210 22 L290 44 L360 30 L430 48 L520 18 L600 42 L680 28 L760 46 L850 20 L930 40 L1010 26 L1090 44 L1150 32 L1200 40 V80 H0Z' fill='%23FFF3C8' fill-opacity='.45'/%3E%3Cpath d='M0 62 L90 46 L160 58 L240 38 L330 60 L410 44 L500 62 L590 40 L680 58 L770 42 L860 60 L950 36 L1040 56 L1120 44 L1200 54 V80 H0Z' fill='%23E89A35' fill-opacity='.45'/%3E%3Cpath d='M0 72 L110 60 L200 70 L300 56 L400 70 L500 58 L620 72 L720 60 L830 72 L940 58 L1050 70 L1140 62 L1200 68 V80 H0Z' fill='%23B5652A' fill-opacity='.30'/%3E%3C/svg%3E") left bottom / 100% 64px no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .site-header::before { animation: sunrise 2.6s ease-out both; }
  @keyframes sunrise { from { background-position: right 18% bottom -46px, left bottom; } to { background-position: right 18% bottom 0, left bottom; } }
}
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect width='12' height='12' fill='%234A1D3F'/%3E%3Cpath d='M-2 10 C2 10 4 2 8 2 M4 10 C8 10 10 2 14 2' fill='none' stroke='%23F6C445' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M-2 10 C2 10 4 2 8 2 M4 10 C8 10 10 2 14 2' fill='none' stroke='%234A1D3F' stroke-width='.8' stroke-linecap='round' transform='translate(.6 .3)'/%3E%3C/svg%3E") 0 0 / 12px 12px repeat-x var(--aub); box-shadow: 0 3px 0 rgba(107, 45, 92, .18); }
.site-header + main { padding-top: 36px; }

.hero { position: relative; overflow: hidden; border-left: 2px solid var(--line); padding-left: 34px; padding-bottom: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 5 L5 0.5 L10 5 L5 9.5Z M10 5 L15 0.5 L20 5 L15 9.5Z' fill='none' stroke='%23C79A3E' stroke-width='1.2'/%3E%3Ccircle cx='5' cy='5' r='1.2' fill='%236B2D5C' fill-opacity='.6'/%3E%3Ccircle cx='15' cy='5' r='1.2' fill='%236B2D5C' fill-opacity='.6'/%3E%3C/svg%3E") 0 100% / 20px 10px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Crect width='12' height='20' fill='%23FDF0CC'/%3E%3Cpath d='M6 0 L11 5 L6 10 L1 5Z M6 10 L11 15 L6 20 L1 15Z' fill='%236B2D5C' fill-opacity='.55'/%3E%3Cpath d='M6 2.5 L8.5 5 L6 7.5 L3.5 5Z M6 12.5 L8.5 15 L6 17.5 L3.5 15Z' fill='%23F6C445'/%3E%3C/svg%3E") 0 0 / 12px 20px repeat-y, linear-gradient(180deg, #FFFDF6, var(--card)); background-color: var(--card); }
/* Carpathian ridges with a rising sun and a wooden church, right side, low opacity (baked into the SVG). */
.hero::before { content: ""; position: absolute; right: 6px; bottom: 10px; width: 300px; height: 190px; max-height: 100%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -10 270 170'%3E%3Cg opacity='.55'%3E%3Ccircle cx='150' cy='70' r='18' fill='%23F6C445'/%3E%3Cg stroke='%23F6C445' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M150 42V32M150 98V108M122 70H112M178 70H188M130 50L123 43M170 50L177 43M130 90L123 97M170 90L177 97'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M-40 150 L20 96 L50 116 L100 64 L140 104 L170 84 L230 150Z' fill='%236B2D5C' fill-opacity='.16'/%3E%3Cpath d='M-40 150 L10 122 L60 134 L120 108 L180 130 L230 116 L260 150Z' fill='%23C9772A' fill-opacity='.22'/%3E%3Cg opacity='.22' transform='translate(118 6) scale(.95)'%3E%3Cg fill='%234A1D3F'%3E%3Cpath d='M51 0V12M47 4H55' stroke='%234A1D3F' stroke-width='2' fill='none'/%3E%3Cpath d='M51 10 L44 56 H58Z'/%3E%3Crect x='41' y='56' width='20' height='5'/%3E%3Crect x='44' y='61' width='14' height='26'/%3E%3Cpath d='M30 86 H88 L80 104 H38Z'/%3E%3Cpath d='M24 116 H94 L86 104 H32Z'/%3E%3Crect x='34' y='116' width='50' height='30'/%3E%3C/g%3E%3Cg fill='%23FFF9EC' fill-opacity='.85'%3E%3Crect x='47' y='70' width='3' height='6'/%3E%3Crect x='52' y='70' width='3' height='6'/%3E%3Cpath d='M55 146 V134 a4 4 0 0 1 8 0 V146Z'/%3E%3Crect x='42' y='124' width='4' height='7'/%3E%3Crect x='72' y='124' width='4' height='7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right bottom / contain no-repeat; }
.hero > * { position: relative; }
@media (min-width: 861px) { .hero > p, .hero > h1 { max-width: calc(100% - 260px); } }
@media (max-width: 860px) {
  .hero { padding-bottom: 104px; }
  .hero::before { width: 150px; height: 96px; right: 8px; bottom: 10px; }
  .hero .kicker { margin-bottom: 12px; }
}

.orn-divider { position: relative; height: 30px; margin: 22px 0 6px; }
.orn-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 5 L5 0.5 L10 5 L5 9.5Z M10 5 L15 0.5 L20 5 L15 9.5Z' fill='none' stroke='%23C79A3E' stroke-width='1.2'/%3E%3Ccircle cx='5' cy='5' r='1.2' fill='%236B2D5C' fill-opacity='.6'/%3E%3Ccircle cx='15' cy='5' r='1.2' fill='%236B2D5C' fill-opacity='.6'/%3E%3C/svg%3E") left center / 20px 10px repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 44%, transparent 46%, transparent 54%, #000 56%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 44%, transparent 46%, transparent 54%, #000 56%, #000 88%, transparent); }
.orn-divider::after { content: ""; position: absolute; left: 50%; top: 0; width: 30px; height: 30px; margin-left: -15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='1'%3E%3Cg fill='%23FDF0CC' stroke='%239C5A86' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(0 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(315 50 50)'/%3E%3C/g%3E%3Cg fill='none' stroke='%239C5A86' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(0 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(315 50 50)'/%3E%3Cpath d='M50 34 L66 50 L50 66 L34 50Z'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='5' fill='%23CE1126'/%3E%3C/svg%3E") center / 30px 30px no-repeat; }

.panel { position: relative; }
.panel::before { content: ""; position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23E3C77E' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M28 4 L36 12 L28 20 L20 12Z'/%3E%3Cpath d='M28 8 L32 12 L28 16 L24 12Z'/%3E%3Cpath d='M20 12 H10 M28 20 V30 M12 12 l-3 -3 M12 12 l-3 3 M28 28 l-3 3 M28 28 l3 3'/%3E%3C/g%3E%3Ccircle cx='28' cy='12' r='1.4' fill='%23B07A9C'/%3E%3C/svg%3E") center / contain no-repeat; }
.panel.caution::before, .panel.sos::before { display: none; }
.panel > * { position: relative; }

.front { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='1'%3E%3Cg fill='none' stroke='%23F3E3B8' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(0 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 50 L44 30 L50 12 L56 30Z' transform='rotate(315 50 50)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F3E3B8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(0 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 8 l-4 -4 M50 8 l4 -4' transform='rotate(315 50 50)'/%3E%3Cpath d='M50 34 L66 50 L50 66 L34 50Z'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='5' fill='%23F3E3B8'/%3E%3C/svg%3E") right 14px bottom 14px / 72px 72px no-repeat, var(--card); }
.back { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 5 L5 0.5 L10 5 L5 9.5Z M10 5 L15 0.5 L20 5 L15 9.5Z' fill='none' stroke='%23C79A3E' stroke-width='1.2'/%3E%3Ccircle cx='5' cy='5' r='1.2' fill='%236B2D5C' fill-opacity='.6'/%3E%3Ccircle cx='15' cy='5' r='1.2' fill='%236B2D5C' fill-opacity='.6'/%3E%3C/svg%3E") 0 calc(100% - 10px) / 20px 10px repeat-x, var(--soft-2); }

.stat { box-shadow: inset 0 4px 0 var(--plum); padding-top: 16px; }

/* Footer: twisted rope on top, mountains and the wooden church on the right, plum ridges at the bottom,
   and a thin tricolour thread (the only place the full flag colours appear). */
.site-footer { position: relative; border-top: 0; padding-top: 30px; padding-bottom: 112px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -10 270 170'%3E%3Cpath d='M-40 150 L20 96 L50 116 L100 64 L140 104 L170 84 L230 150Z' fill='%236B2D5C' fill-opacity='.22'/%3E%3Cpath d='M-40 150 L10 122 L60 134 L120 108 L180 130 L230 116 L260 150Z' fill='%23C9772A' fill-opacity='.30'/%3E%3Cg opacity='.34' transform='translate(60 6) scale(.95)'%3E%3Cg fill='%234A1D3F'%3E%3Cpath d='M51 0V12M47 4H55' stroke='%234A1D3F' stroke-width='2' fill='none'/%3E%3Cpath d='M51 10 L44 56 H58Z'/%3E%3Crect x='41' y='56' width='20' height='5'/%3E%3Crect x='44' y='61' width='14' height='26'/%3E%3Cpath d='M30 86 H88 L80 104 H38Z'/%3E%3Cpath d='M24 116 H94 L86 104 H32Z'/%3E%3Crect x='34' y='116' width='50' height='30'/%3E%3C/g%3E%3Cg fill='%23FFF9EC' fill-opacity='.85'%3E%3Crect x='47' y='70' width='3' height='6'/%3E%3Crect x='52' y='70' width='3' height='6'/%3E%3Cpath d='M55 146 V134 a4 4 0 0 1 8 0 V146Z'/%3E%3Crect x='42' y='124' width='4' height='7'/%3E%3Crect x='72' y='124' width='4' height='7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right max(20px, calc(50% - 500px)) bottom 40px / 150px 94px no-repeat, var(--soft); }
@media (min-width: 861px) { .site-footer { padding-bottom: 96px; } .site-footer .wrap { padding-right: 170px; } }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect width='12' height='12' fill='%23FDF0CC'/%3E%3Cpath d='M-2 10 C2 10 4 2 8 2 M4 10 C8 10 10 2 14 2' fill='none' stroke='%23B07A9C' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M-2 10 C2 10 4 2 8 2 M4 10 C8 10 10 2 14 2' fill='none' stroke='%23FDF0CC' stroke-width='.8' stroke-linecap='round' transform='translate(.6 .3)'/%3E%3C/svg%3E") 0 0 / 12px 12px repeat-x; border-top: 2px solid var(--plum); }
.site-footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; pointer-events: none;
  background: linear-gradient(90deg, var(--ro-blue) 0 33.33%, var(--ro-yellow) 33.33% 66.66%, var(--ro-red) 66.66%) left bottom / 100% 3px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 V22 L50 10 L90 20 L150 4 L210 22 L260 12 L330 26 L390 8 L450 22 L520 12 L600 24 V40Z' fill='%236B2D5C'/%3E%3Cpath d='M0 40 V30 L70 20 L130 30 L200 18 L280 32 L350 22 L430 32 L500 22 L600 30 V40Z' fill='%234A1D3F'/%3E%3C/svg%3E") left top / 100% 37px no-repeat; }

/* Plum branch on action buttons (decorative only: a CSS mask on ::before, never part of the accessible name).
   One SVG in --plum-branch; the tint comes from --branch-ink: plum #6B2D5C on light buttons (9.7:1 on white,
   7.7:1 on hover #F8E3A8), pale plum #F1D9EA on solid plum (7.4:1, 9.4:1 on hover). Quiz answers, chips, nav,
   Listen and the flashcard face are left clean. */
:root { --plum-branch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cpath id='l' d='M0 0C1.7-1.3 1.7-4.2 0-6C-1.7-4.2-1.7-1.3 0 0Z'/%3E%3C/defs%3E%3Cpath d='M2 17C6 13 10 9 17 3' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3Cuse href='%23l' transform='translate(6 13.2) rotate(-20)'/%3E%3Cuse href='%23l' transform='translate(10.5 9) rotate(80) scale(.9)'/%3E%3Cuse href='%23l' transform='translate(16.6 3.4) rotate(45) scale(.8)'/%3E%3Cpath d='M8.2 11.2L9.6 13.6M12.6 7.6L14.4 9.6' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cellipse cx='9.9' cy='15.6' rx='2.3' ry='2.6'/%3E%3Cellipse cx='14.9' cy='11.8' rx='2.1' ry='2.4'/%3E%3C/svg%3E"); }
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .btn, .menu-btn { gap: 0; }
  .btn::before, .menu-btn::before { content: ""; flex: 0 100000 auto; width: 23px; min-width: 0; height: 18px; padding-right: 5px; margin-left: -5px; pointer-events: none;
    background-color: var(--branch-ink, #6B2D5C); -webkit-mask: var(--plum-branch) content-box center / contain no-repeat; mask: var(--plum-branch) content-box center / contain no-repeat; }
  .btn.primary { --branch-ink: #F1D9EA; }
  .btn.danger, .btn.again { --branch-ink: #A32A12; }
  @media (max-width: 860px) { .menu-btn { display: inline-flex; align-items: center; } }
}
@media (forced-colors: active) { .btn::before, .menu-btn::before { display: none; } }

/* Not-found page: lost in the mountains, a path winding down to the village church */
.lost-mtn { width: 200px; height: 126px; max-width: 100%; margin: 18px 0 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -10 270 170'%3E%3Ccircle cx='160' cy='40' r='16' fill='%23F6C445' fill-opacity='.7'/%3E%3Cpath d='M-40 150 L30 50 L70 96 L110 30 L170 112 L230 150Z' fill='%236B2D5C' fill-opacity='.22'/%3E%3Cpath d='M-40 150 L20 118 L80 132 L140 104 L230 140 V150Z' fill='%23C9772A' fill-opacity='.3'/%3E%3Cpath d='M110 34 C96 60 124 72 100 92 S70 118 92 132 S120 140 128 150' fill='none' stroke='%236B2D5C' stroke-width='2.4' stroke-dasharray='4 5' stroke-linecap='round'/%3E%3Cg opacity='.45' transform='translate(130 98) scale(.36)'%3E%3Cg fill='%234A1D3F'%3E%3Cpath d='M51 0V12M47 4H55' stroke='%234A1D3F' stroke-width='2' fill='none'/%3E%3Cpath d='M51 10 L44 56 H58Z'/%3E%3Crect x='41' y='56' width='20' height='5'/%3E%3Crect x='44' y='61' width='14' height='26'/%3E%3Cpath d='M30 86 H88 L80 104 H38Z'/%3E%3Cpath d='M24 116 H94 L86 104 H32Z'/%3E%3Crect x='34' y='116' width='50' height='30'/%3E%3C/g%3E%3Cg fill='%23FFF9EC' fill-opacity='.85'%3E%3Crect x='47' y='70' width='3' height='6'/%3E%3Crect x='52' y='70' width='3' height='6'/%3E%3Cpath d='M55 146 V134 a4 4 0 0 1 8 0 V146Z'/%3E%3Crect x='42' y='124' width='4' height='7'/%3E%3Crect x='72' y='124' width='4' height='7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 400px) { .panel::before { width: 26px; height: 26px; } }
@media print {
  .site-header::before, .site-header::after, .hero::before, .site-footer::after, .site-footer::before, .panel::before, .orn-divider, .lost-mtn, .btn::before, .menu-btn::before { display: none; }
  .site-header { background: #fff; color: #000; } .site-footer { background: none; padding-bottom: 20px; }
}