:root {
  --bg: #f4f1e8; --card: #fffef9; --accent: #7b1e1e; --accent2: #2d5a3d;
  --gold: #b8860b; --text: #2c1810; --muted: #6b5e53; --border: #d4c5a9;
  --correct: #2d7a3d; --wrong: #a83232; --hover: #f0ebe0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif; color: var(--text);
  display: flex; flex-direction: column;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 8% 85%, rgba(123,30,30,.03) 0%, transparent 55%),
    radial-gradient(ellipse at 92% 15%, rgba(123,30,30,.03) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%237b1e1e' stroke-width='.6' opacity='.06'%3E%3Cpath d='M40,50 L60,50 L55,90 L45,90 Z M40,50 L35,35 M60,50 L65,35'/%3E%3Ccircle cx='120' cy='50' r='12'/%3E%3Cline x1='115' y1='38' x2='125' y2='38'/%3E%3Cline x1='120' y1='38' x2='120' y2='30'/%3E%3Cpath d='M90,120 L90,80 Q90,70 100,70 L110,70 L110,85 L103,83 L103,125 L90,120 Z'/%3E%3Cpath d='M180,130 L200,130 L200,100 L190,105 L190,120 L180,120 Z M195,100 L185,95 M195,100 L200,90'/%3E%3Ccircle cx='160' cy='180' r='15'/%3E%3Cline x1='160' y1='165' x2='160' y2='150'/%3E%3Cline x1='148' y1='180' x2='138' y2='180'/%3E%3Cline x1='172' y1='180' x2='182' y2='180'/%3E%3Cpath d='M60,170 L60,145 L75,145 L75,170 Q67,175 60,170 Z'/%3E%3Cpath d='M210,60 L220,85 L200,85 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 240px 240px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* ===== HEADER ===== */
header {
  flex-shrink: 0; background: #1a1a1a;
  color: #fffef9; text-align: center; padding: clamp(.6rem, 1.5vh, 1.2rem) 1rem;
  border-bottom: 3px solid var(--gold); position: relative;
}
header h1 { font-size: clamp(1.2rem, 3vw, 1.8rem); }
header p { opacity: .8; font-style: italic; font-size: clamp(.75rem, 1.3vw, .9rem); }
.header-logo { display: block; height: clamp(36px, 6vh, 60px); margin: 0 auto .4rem; }

/* ===== MAIN CONTAINER ===== */
.main-wrap { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.container {
  flex: 1; display: flex; flex-direction: column;
  max-width: 820px; margin: 0 auto; width: 100%; padding: clamp(.8rem, 2vh, 1.8rem);
  position: relative;
}
.container::before, .container::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  width: 60px; height: 60px; opacity: .08;
  background: var(--accent);
  mask-size: contain; mask-repeat: no-repeat;
}
.container::before {
  top: 0; left: 0;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M5,5 L25,5 L25,10 L12,10 L12,25 L5,25 Z'/%3E%3Ccircle cx='25' cy='25' r='4'/%3E%3Cpath d='M28,5 L35,5 L35,15 L28,15 Z'/%3E%3C/svg%3E");
}
.container::after {
  bottom: 0; right: 0;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M55,55 L35,55 L35,50 L48,50 L48,35 L55,35 Z'/%3E%3Ccircle cx='35' cy='35' r='4'/%3E%3Cpath d='M32,55 L25,55 L25,45 L32,45 Z'/%3E%3C/svg%3E");
}

/* ===== START SCREEN ===== */
.start-screen { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: clamp(.6rem, 2vh, 1.2rem); position: relative; }
.start-screen::before {
  content: ''; position: absolute; inset: 10% 10%; pointer-events: none; z-index: 0; opacity: .04;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%237b1e1e' stroke-width='2'%3E%3Ccircle cx='150' cy='40' r='22'/%3E%3Cline x1='140' y1='20' x2='160' y2='20'/%3E%3Cline x1='150' y1='18' x2='150' y2='5'/%3E%3Cpath d='M100,100 L100,50 Q100,35 115,35 L135,35 L135,55 L123,52 L123,100 Z'/%3E%3Cpath d='M220,120 L250,130 L250,100 L240,105 L250,70 L220,80 Z M250,70 L245,55'/%3E%3Ccircle cx='70' cy='200' r='25'/%3E%3Cline x1='70' y1='175' x2='70' y2='155'/%3E%3Cpath d='M200,220 L200,190 Q200,180 210,180 L225,180 L225,200 L215,198 L215,220 Z'/%3E%3Cpath d='M260,250 L260,230 L280,230 Q290,230 290,240 L290,250 Z'/%3E%3Ccircle cx='40' cy='260' r='18'/%3E%3Cpath d='M140,185 L155,170 L140,155'/%3E%3Cpath d='M160,185 L145,170 L160,155'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.start-screen > * { position: relative; z-index: 1; }
.start-screen h2 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); color: var(--accent); }
.start-screen p { color: var(--muted); font-size: clamp(.85rem, 1.4vw, 1rem); }
.topic-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(.5rem, 1.5vh, 1rem); width: 100%; max-width: 600px;
}
.topic-card {
  background: var(--card); border: 2px solid var(--border); border-radius: 12px;
  padding: clamp(.8rem, 2vh, 1.3rem) clamp(.5rem, 1vw, .9rem);
  cursor: pointer; transition: .15s; text-align: center; user-select: none;
}
.topic-card:active { transform: scale(.96); }
@media (hover: hover) {
  .topic-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
}
.topic-card .icon-img { height: 48px; width: auto; display: block; margin: 0 auto .4rem; object-fit: contain; }
.topic-card .label { font-weight: 700; font-size: clamp(.9rem, 1.5vw, 1.05rem); color: var(--accent); margin-top: .3rem; display: block; }
.topic-card .info { font-size: clamp(.75rem, 1.1vw, .85rem); color: var(--muted); margin-top: .15rem; display: block; }

.mix-btn {
  background: var(--accent); color: #fff; padding: clamp(.6rem, 1.5vh, .85rem) clamp(1.2rem, 3vw, 2rem);
  border: none; border-radius: 8px; cursor: pointer; font-weight: 700;
  font-size: clamp(.9rem, 1.6vw, 1rem); transition: .15s; user-select: none;
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
}
.mix-icon { height: 24px; width: auto; display: inline-block; }
.mix-btn:active { transform: scale(.96); }
@media (hover: hover) { .mix-btn:hover { background: #5c1515; } }

/* ===== QUIZ AREA ===== */
.quiz-area { flex: 1; display: flex; flex-direction: column; }
.quiz-area.hidden { display: none; }

.top-bar {
  flex-shrink: 0; display: flex; justify-content: space-between; align-items: center;
  padding: clamp(.2rem, .8vh, .5rem) 0; flex-wrap: wrap; gap: .3rem;
}
.progress-text { color: var(--muted); font-size: 1rem; font-weight: 600; }
.score-badge { display: inline-flex; align-items: center; gap: .3rem; }
.score-img { height: 28px; width: auto; display: block; }
.score-num {
  color: var(--accent2); font-weight: 800; font-size: 1.1rem;
}
.progress-bar-wrap { flex-shrink: 0; height: 5px; background: var(--border); border-radius: 3px; width: 100%; }
.progress-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }

/* Question card */
.q-card {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  background: var(--card); border: 2px solid var(--border); border-radius: 14px;
  padding: 2rem 2rem; margin: .5rem 0; transition: .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  min-height: 0; position: relative; overflow: hidden;
}
/* Manuscript backgrounds — public domain (Wikimedia Commons) */
.q-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .1;
  background: center/cover no-repeat;
}
.q-card.topic-povijest::after  { background-image: url("povelja-kulina-bana.jpg"); }
.q-card.topic-abeceda::after   { background-image: url("humacka-ploca.jpg"); }
.q-card.topic-spomenici::after { background-image: url("slike/povelja-kulina-bana.jpg"); }
.q-card.topic-opcenito::after  { background-image: url("slike/krepcanski-manastir.jpg"); }
.q-card.topic-nazivi::after    { background-image: url("slike/truhelka.jpg"); }

.q-card::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 3px;
  background: linear-gradient(90deg,
    transparent, var(--gold) 15%, var(--gold) 25%,
    var(--accent) 35%, var(--accent) 45%,
    transparent 50%,
    var(--accent) 55%, var(--accent) 65%,
    var(--gold) 75%, var(--gold) 85%,
    transparent);
  border-radius: 0 0 2px 2px; opacity: .5;
}
.q-card .inner {
  overflow-y: auto; flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 620px; margin: 0 auto; width: 100%;
  position: relative; z-index: 1;
}
.q-card.correct-flash { border-color: var(--correct) !important; }
.q-card.wrong-flash { border-color: var(--wrong) !important; }
.q-num { color: var(--accent); font-weight: 700; font-size: .9rem; margin-bottom: .6rem; text-align: center; }
.q-num-icon { height: 20px; width: auto; vertical-align: middle; margin-right: .3rem; }
.q-text {
  font-size: 1.35rem; font-weight: 600; line-height: 1.5; margin-bottom: 1.8rem;
  text-align: center; letter-spacing: .01em; font-family: 'Cirilica', serif;
}
.q-text em { background: #fff3cd; padding: 0 .2rem; border-radius: 3px; }

/* Options */
.opts { display: flex; flex-direction: column; gap: .7rem; }
.opt {
  padding: 1rem 1.3rem; border: 2px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: .1s; background: var(--card);
  display: flex; gap: .7rem; align-items: center; font-size: 1.1rem;
  user-select: none; text-align: left;
}
.opt:active { transform: scale(.98); }
@media (hover: hover) { .opt:hover { background: var(--hover); } }
.opt.correct { border-color: var(--correct) !important; background: #e8f5e8 !important; }
.opt.wrong { border-color: var(--wrong) !important; background: #fde8e8 !important; }
.opt.picked { border-color: var(--accent); background: #fdf5f0; }
.opt .letter { font-weight: 700; min-width: 20px; text-align: center; flex-shrink: 0; }

/* Feedback */
.feedback {
  margin-top: 1rem; padding: .9rem 1.2rem;
  border-radius: 8px; font-weight: 600; font-size: 1rem;
  display: none; line-height: 1.5; max-height: 40vh; overflow-y: auto;
}
.feedback.show { display: block; }
.feedback.correct { background: #e8f5e8; color: #1a5c1a; border: 1px solid #a3d9a3; }
.feedback.wrong { background: #fde8e8; color: #7a1a1a; border: 1px solid #f0aaaa; }
.feedback .explanation { font-weight: 400; display: block; margin-top: .4rem; color: var(--text); font-size: .95rem; }

/* Space between feedback and next button */
#nextBtnSingle, #nextBtn {
  margin-top: 1.2rem;
}

/* Controls */
.controls { flex-shrink: 0; text-align: center; padding-bottom: clamp(.2rem, .5vh, .5rem); }
.next-btn {
  display: none; background: var(--accent); color: #fff; border: none;
  padding: .8rem 2.2rem;
  border-radius: 8px; cursor: pointer; font-weight: 700;
  font-size: 1.05rem; transition: .15s; user-select: none;
}
.next-btn.show { display: inline-block; }
.next-btn:active { transform: scale(.96); }
@media (hover: hover) { .next-btn:hover { background: #5c1515; } }

.back-btn {
  background: var(--border); border: none; color: var(--text); padding: clamp(.4rem, 1vh, .55rem) clamp(.8rem, 2vw, 1.2rem);
  border-radius: 6px; cursor: pointer; font-weight: 600; font-size: clamp(.7rem, 1.2vw, .82rem);
  transition: .15s; margin-left: .4rem; user-select: none;
}
.back-btn:active { transform: scale(.96); }
@media (hover: hover) { .back-btn:hover { background: #c4b595; } }

/* ===== END SCREEN ===== */
.end-screen { flex: 1; display: none; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: clamp(.3rem, 1vh, .8rem); position: relative; }
.end-screen::before {
  content: ''; position: absolute; inset: 10% 10%; pointer-events: none; z-index: 0; opacity: .035;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%232d5a3d' stroke-width='2'%3E%3Ccircle cx='150' cy='150' r='80'/%3E%3Ccircle cx='150' cy='150' r='60'/%3E%3Ccircle cx='150' cy='150' r='40'/%3E%3Cline x1='150' y1='50' x2='150' y2='15'/%3E%3Cline x1='150' y1='250' x2='150' y2='285'/%3E%3Cline x1='50' y1='150' x2='15' y2='150'/%3E%3Cline x1='250' y1='150' x2='285' y2='150'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3Ccircle cx='240' cy='60' r='12'/%3E%3Ccircle cx='240' cy='240' r='12'/%3E%3Ccircle cx='60' cy='240' r='12'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.end-screen > * { position: relative; z-index: 1; }
.end-screen.show { display: flex; }
.big-score { font-size: clamp(2.5rem, 10vw, 5rem); font-weight: 800; }
.big-score.good { color: var(--correct); }
.big-score.ok { color: var(--gold); }
.big-score.poor { color: var(--wrong); }
.end-pct { font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 700; }
.end-msg { font-size: clamp(.85rem, 1.5vw, 1.1rem); max-width: 500px; }

/* ===== MUTE BUTTON ===== */
.mute-btn {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 99;
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--card); cursor: pointer; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); transition: .15s; user-select: none;
}
.mute-btn:active { transform: scale(.9); }

/* ===== CUSTOM CYRILLIC FONT ===== */
@font-face {
  font-family: 'Cirilica';
  src: url('cirilica.ttf') format('truetype');
  unicode-range: U+0400-047F, U+0480-04FF;
}
.cyr-font { font-family: 'Cirilica', serif; }

/* Global: use Cirilica for all text — only Cyrillic codepoints via unicode-range */
body, .q-text, .q-num, .opt, .feedback, .match-tile, .drag-tile, .drag-group {
  font-family: 'Cirilica', 'Segoe UI', system-ui, sans-serif;
}
@font-face {
  font-family: 'FSGLA';
  src: url('fsgla.ttf') format('truetype');
}
.gla-font { font-family: 'FSGLA', sans-serif; }

/* ===== FEEDBACK MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: overlayIn .25s ease-out;
}
@keyframes overlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-overlay.hidden { display: none; }
.modal-overlay.closing { animation: overlayOut .25s ease-in forwards; }
@keyframes overlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.modal-overlay.closing .modal-box { animation: modalOut .25s ease-in forwards; }
@keyframes modalOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(20px) scale(.95); }
}
.modal-box {
  background: var(--card); border-radius: 14px; border: 2px solid var(--border);
  max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 1.6rem 1.8rem; text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  animation: modalIn .3s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(30px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-content { font-size: 1.15rem; line-height: 1.55; }
.modal-content .explanation { display: block; margin-top: .6rem; color: var(--text); font-size: 1.02rem; font-weight: 400; }
.modal-content.correct { color: var(--correct); }
.modal-content.wrong { color: var(--wrong); }
.modal-box .next-btn { margin-top: 1.2rem; font-size: 1.1rem; padding: .9rem 2.4rem; }

/* ===== LETTER COMPARISON TABLE ===== */
.lq-table-wrap { margin-top: 1rem; overflow-x: auto; }
.lq-table {
  width: 100%; border-collapse: collapse; margin: 0 auto;
  font-size: 1.1rem;
}
.lq-table th {
  background: var(--accent); color: #fff; padding: .5rem .6rem;
  font-size: .85rem; text-transform: uppercase; letter-spacing: .05em;
}
.lq-table td {
  padding: .7rem .6rem; border: 1px solid var(--border); text-align: center;
  font-size: 1.6rem; background: var(--card);
}
.lq-table th:first-child { border-radius: 8px 0 0 0; }
.lq-table th:last-child { border-radius: 0 8px 0 0; }
.lq-cell-cyr { font-family: 'Cirilica', serif; color: var(--accent); }
.lq-cell-lat { color: var(--accent2); font-size: 1.3rem !important; }
.lq-cell-gla { font-family: 'FSGLA', sans-serif; color: #6b3fa0; }
.lq-cell-mod { color: #7d6608; font-family: 'Segoe UI', system-ui, sans-serif; }
.lq-cell-gr { color: #1a5276; }

/* ===== LIGHTBOX ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem; cursor: default;
}
.lightbox.hidden { display: none; }
.lightbox-stage {
  position: relative; overflow: hidden;
  max-width: 92vw; max-height: 82vh;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in; touch-action: none;
}
.lightbox-stage img {
  max-width: 92vw; max-height: 82vh; width: auto; height: auto;
  object-fit: contain; display: block;
  border-radius: 8px; box-shadow: 0 5px 30px rgba(0,0,0,.5);
  transition: transform .15s ease-out;
  transform-origin: center center;
  user-select: none; -webkit-user-drag: none;
}
.lightbox-stage.zoomed { cursor: grab; }
.lightbox-stage.zoomed img { max-width: none; max-height: none; }
.lightbox-stage.zoomed.dragging { cursor: grabbing; }
.lightbox-zoom-hint {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.6); color: #fff; font-size: .75rem;
  padding: .25rem .6rem; border-radius: 12px; pointer-events: none;
  opacity: .8; white-space: nowrap;
}
.lightbox-cap { color: #ddd; margin-top: .8rem; font-size: .95rem; text-align: center; max-width: 80vw; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.2); color: #fff; font-size: 1.3rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.35); }
.q-img-wrap { margin-top: .9rem; text-align: center; }
.q-img { max-width: 100%; max-height: 300px; border-radius: 8px; border: 1px solid var(--border); }
.q-img-cap { font-size: .85rem; color: var(--muted); margin-top: .35rem; font-style: italic; }

/* ===== LETTER QUIZ ===== */
.letter-display-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid var(--border); border-radius: 16px;
  margin: .5rem 0; min-height: 0;
}
.letter-big {
  font-family: 'Cirilica', serif; font-size: clamp(5rem, 15vw, 12rem);
  font-weight: 400; color: var(--accent); line-height: 1; user-select: none;
  letter-spacing: .1em;
}
.feedback-overlay {
  flex-shrink: 0; text-align: center; padding: .3rem;
  font-weight: 700; font-size: 1rem; min-height: 2rem;
}
.feedback-overlay.correct { color: var(--correct); }
.feedback-overlay.wrong { color: var(--wrong); }
.letter-options {
  flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  padding: .3rem 0 .8rem;
}
.lq-opt {
  padding: .8rem; border: 2px solid var(--border); border-radius: 12px;
  background: var(--card); cursor: pointer; font-weight: 600; font-size: 1.1rem;
  transition: .1s; text-align: center; user-select: none;
}
.lq-opt:hover { border-color: var(--gold); }
.lq-opt:active { transform: scale(.97); }
.lq-opt.correct { border-color: var(--correct); background: #e8f5e8; color: var(--correct); }
.lq-opt.wrong { border-color: var(--wrong); background: #fde8e8; color: var(--wrong); }
.lq-opt.disabled { pointer-events: none; opacity: .8; }

@media (max-width: 480px) {
  .letter-options { gap: .4rem; }
  .lq-opt { padding: .7rem; font-size: 1rem; }
}

.match-mode-bar {
  flex-shrink: 0; display: flex; gap: .4rem; justify-content: center; padding: .3rem 0 .6rem;
}
.match-mode-btn {
  padding: .4rem 1rem; border: 2px solid var(--border); border-radius: 20px;
  background: var(--card); cursor: pointer; font-weight: 600; font-size: .82rem;
  transition: .15s; user-select: none;
}
.match-mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.match-mode-btn:hover:not(.active) { border-color: var(--gold); }

/* Drag-drop mode */
.match-grid.drag-mode {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: .8rem;
}
.drag-targets {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  padding: .6rem; background: #fdf5f0; border-radius: 10px; border: 2px dashed var(--border);
}
.drag-group {
  display: flex; align-items: center; gap: .35rem; padding: .4rem .6rem;
  border: 2px solid var(--border); border-radius: 10px; background: var(--card);
  transition: .15s; min-width: 70px; justify-content: center;
}
.drag-group.over { border-color: var(--gold); background: #fef9e7; box-shadow: 0 0 0 3px var(--gold); }
.drag-group.matched-group { border-color: var(--correct); background: #e8f5e8; }
.drag-group .dg-lat { font-size: 1.2rem; font-weight: 700; color: var(--accent2); }
.drag-group .dg-cyr { font-size: 1.2rem; font-weight: 700; color: var(--accent); font-family: 'Cirilica', serif; }
.drag-group .dg-gla { font-size: 1.2rem; font-weight: 700; color: #6b3fa0; font-family: 'FSGLA', sans-serif; }
.drag-group span + span::before { content: '·'; margin: 0 .2rem; color: var(--muted); font-weight: 400; }
.drag-source-area {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-content: start;
}
.drag-tile {
  padding: .5rem .7rem; border: 2px solid var(--border); border-radius: 10px;
  background: var(--card); cursor: grab; text-align: center; font-size: 1.4rem;
  font-weight: 700; color: var(--accent); transition: .1s; user-select: none;
  font-family: 'Cirilica', serif;
}
.drag-tile:active { cursor: grabbing; }
.drag-tile.dragging { opacity: .4; transform: scale(.9); }
.drag-tile.gla { color: #6b3fa0; font-family: 'FSGLA', sans-serif; }
.drag-tile.matched { display: none; }
.drag-tile.wrong-flash { border-color: var(--wrong) !important; background: #fde8e8 !important; }

.match-grid {
  flex: 1; display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem; align-content: start; padding: .5rem 0;
}
.match-col {
  display: flex; flex-direction: column; gap: .5rem;
}
.match-col-header {
  text-align: center; font-weight: 700; font-size: .85rem; padding: .3rem;
  color: var(--accent); border-bottom: 2px solid var(--border);
  margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .1em;
}
.match-tile {
  background: var(--card); border: 2px solid var(--border); border-radius: 12px;
  padding: .65rem .5rem; cursor: pointer; text-align: center;
  transition: .15s; user-select: none; min-height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.match-tile:active { transform: scale(.95); }
@media (hover: hover) { .match-tile:hover { border-color: var(--gold); } }
.match-tile.selected { border-color: var(--accent); background: #fdf5f0; box-shadow: 0 0 0 2px var(--accent); }
.match-tile.matched {
  border-color: var(--correct) !important; background: #e8f5e8 !important;
  opacity: .4; pointer-events: none; cursor: default;
}
.match-tile.wrong-flash { border-color: var(--wrong) !important; background: #fde8e8 !important; }
.match-tile .cyr { font-size: 1.5rem; font-weight: 700; color: var(--accent); line-height: 1; font-family: 'Cirilica', serif; }
.match-tile .lat { font-size: 1.3rem; font-weight: 700; color: var(--accent2); line-height: 1; }
.match-reset {
  background: var(--border); border: none; color: var(--text);
  padding: .5rem 1.2rem; border-radius: 6px; cursor: pointer;
  font-weight: 600; font-size: .85rem; transition: .15s; margin-top: .5rem;
}
.match-reset:hover { background: #c4b595; }

@media (max-width: 480px) {
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .q-card { padding: 1.2rem 1rem; border-radius: 10px; }
  .q-text { font-size: 1.15rem; margin-bottom: 1.2rem; }
  .opt { padding: .85rem 1rem; font-size: 1rem; border-radius: 8px; }
  .feedback { font-size: .9rem; }
  .feedback .explanation { font-size: .85rem; }
  .match-grid { gap: .4rem; }
  .match-tile { padding: .5rem .3rem; min-height: 44px; border-radius: 10px; }
  .match-tile .cyr { font-size: 1.2rem; }
  .match-tile .lat { font-size: 1rem; }
  .match-col-header { font-size: .7rem; }
}

/* ===== IMPRESSUM ===== */
.impressum-btn {
  background: transparent; color: var(--accent); border: 2px solid var(--border); border-radius: 8px;
  padding: clamp(.5rem, 1.2vh, .7rem) clamp(1rem, 2.5vw, 1.6rem); font-weight: 700; cursor: pointer;
  font-size: clamp(.85rem, 1.4vw, .95rem); transition: .15s;
}
.impressum-btn:active { transform: scale(.96); }
@media (hover: hover) { .impressum-btn:hover { border-color: var(--gold); background: var(--hover); } }
.impressum-box { max-width: 720px; text-align: left; position: relative; line-height: 1.5; }
.impressum-box h2 { color: var(--accent); margin-bottom: .8rem; padding-right: 2rem; }
.impressum-box h3 { color: var(--accent); font-size: 1.05rem; margin: 1.3rem 0 .5rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.impressum-list dt { font-weight: 700; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .6rem; }
.impressum-list dd { margin: .15rem 0 0; }
.impressum-box a { color: var(--accent2); overflow-wrap: anywhere; }
.biblio { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.biblio li { padding-left: 1.6rem; text-indent: -1.6rem; margin-bottom: .55rem; }
.impressum-close {
  position: absolute; top: .8rem; right: .8rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; font-size: 1rem;
}
.impressum-actions { text-align: center; margin-top: 1.2rem; }

/* ===== NAZIVI (višestruki odabir) ===== */
.names-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.name-opt { font-size: 1rem; padding: .75rem 1rem; }
.name-box {
  width: 1.4rem; height: 1.4rem; flex-shrink: 0; border: 2px solid var(--border); border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; background: #fff;
}
.name-opt.picked .name-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.name-opt.correct .name-box { background: var(--correct); border-color: var(--correct); color: #fff; }
.name-opt.wrong .name-box { background: var(--wrong); border-color: var(--wrong); color: #fff; }
.name-opt.missed { border: 2px dashed var(--correct) !important; background: #f3faf3; }
.name-opt.missed .name-box { border-color: var(--correct); color: var(--correct); }
.name-opt.faded { opacity: .45; }
.names-area-disabled, #namesSubmit:disabled { opacity: .5; cursor: not-allowed; }
.names-result { text-align: center; font-weight: 700; font-size: 1.15rem; margin-bottom: .6rem; }
.names-result span { display: block; font-weight: 400; font-size: .95rem; color: var(--muted); margin-top: .2rem; }
.names-result.good { color: var(--correct); }
.names-result.poor { color: var(--accent); }
.names-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; justify-content: center; font-size: .8rem; color: var(--muted); margin-bottom: .8rem; }
.names-legend .lg::before { content: ''; display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.names-legend .lg.correct::before { background: var(--correct); }
.names-legend .lg.missed::before { border: 2px dashed var(--correct); width: .6rem; height: .6rem; }
.names-legend .lg.wrong::before { background: var(--wrong); }
.names-explanation { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); text-align: left; }
.names-explanation h3 { color: var(--accent); font-size: 1.05rem; margin-bottom: .5rem; }
.names-expl { padding-left: 1.1rem; line-height: 1.5; }
.names-expl li { margin-bottom: .45rem; }
.names-thumb { display: inline-block; vertical-align: middle; margin-left: .3rem; cursor: zoom-in; }
.names-thumb img { height: 34px; width: 34px; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); }
.names-note { margin-top: .7rem; font-size: .92rem; color: var(--muted); line-height: 1.5; }
.names-submit-wrap { text-align: center; margin-top: 1.2rem; }
/* Glagoljica u igri spajanja: FSGLA mora nadjačati .match-tile .cyr i globalni Cirilica font */
.match-tile .gla-font, .match-tile .cyr.gla-font, .drag-tile.gla, .drag-group .dg-gla, .lq-cell-gla { font-family: 'FSGLA', sans-serif !important; font-weight: 400; }
.match-mode-btn .mode-cyr { font-family: 'Cirilica', serif; font-size: 1.15em; }