/* ===== FF Kampus — vizuál chodby ===== */
/* Paleta zladená s ff-quiz / ff-biliard: značková modrá FF + akademická zlatá + papier */

:root{
  --ff:      #1a3a6b;   /* značková modrá FF (ako v biliarde) */
  --ff-d:    #0f2548;   /* tmavšia modrá */
  --ff-dd:   #081730;   /* najtmavšia */
  --ff-l:    #27508f;   /* svetlejšia modrá */
  --gold:    #d9b25b;   /* zlatá – akademická */
  --gold-l:  #e8c878;
  --gold-d:  #c79a3f;
  --ink:     #10233f;   /* tmavý text na bielych kartách */
  --paper:   #eef1f6;   /* svetlý text na modrom pozadí */
  --muted:   #9db1cf;   /* tlmený text na modrom */
  --muted-d: #6b7c94;   /* tlmený text na bielom */
  --line:    #cdd6e6;   /* okraje na bielych kartách */
  --green:   #0a7e4a;
  --red:     #c0392b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background: var(--ff-dd);
  color: var(--paper);
}
/* mobil: skutočná viditeľná výška (adresný riadok prehliadača) + stĺpcový layout,
   nech chodba vyplní presne zvyšok pod lištou bez pevného odpočtu v px */
@supports (height: 100dvh) { body { height: 100dvh; } }
body { display: flex; flex-direction: column; }

/* ---------- horná lišta ---------- */
#topbar {
  position: relative; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(var(--ff-d), var(--ff-dd));
  border-bottom: 2px solid var(--gold);
}
#brand strong {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.35rem; color: var(--gold); letter-spacing: .5px;
}
#brand span { display: block; font-size: .8rem; color: var(--muted); }
#topbtns { display: flex; gap: 8px; }
#topbtns { flex-wrap: wrap; justify-content: flex-end; }
#topbtns button {
  font: inherit; cursor: pointer;
  background: var(--ff); color: var(--paper);
  border: 1px solid var(--gold); border-radius: 10px;
  padding: 8px 14px; font-size: 1rem;
  white-space: nowrap; touch-action: manipulation;
}
#topbtns button:hover, #topbtns button:focus-visible { background: var(--ff-l); }
#stampCount { color: var(--gold-l); font-weight: 600; }
.langLink {
  align-self: center; margin-left: 2px;
  color: var(--gold-l); text-decoration: none; font-weight: 700;
  border: 1px solid var(--gold); border-radius: 8px; padding: 7px 11px;
}
.langLink:hover, .langLink:focus-visible { background: var(--ff-l); }
#btnSound.on { background: var(--gold); color: var(--ink); border-color: var(--gold-d); }

/* panel Nastavenia (dropdown pod ⚙️) */
#options {
  position: absolute; z-index: 40; top: 58px; right: 14px;
  background: var(--ff-d); color: var(--paper);
  border: 1px solid var(--gold); border-radius: 12px;
  padding: 8px 12px 10px; box-shadow: 0 14px 34px rgba(8,23,48,.55);
  min-width: 250px;
}
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 2px; }
.opt-row + .opt-row { border-top: 1px solid rgba(255,255,255,.08); }
.opt-lbl { font-size: .92rem; }
.opt-btn {
  font: inherit; font-size: .86rem; cursor: pointer;
  background: var(--ff); color: var(--paper);
  border: 1px solid var(--gold); border-radius: 8px; padding: 5px 12px; min-width: 100px; text-align: center;
}
.opt-btn:hover, .opt-btn:focus-visible { background: var(--ff-l); }
.opt-btn.on { background: var(--gold); color: var(--ink); border-color: var(--gold-d); font-weight: 700; }
.opt-note { font-size: .72rem; color: var(--muted); margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.08); }

/* ---------- atmosféra: denný nádych + padajúce lupene ---------- */
#atmoTint {
  position: absolute; inset: 0; z-index: 15; pointer-events: none;
  opacity: 0; transition: background-color 2.5s ease, opacity 2.5s ease;
}
body.atmo #atmoTint { opacity: 1; }
#petals { position: absolute; inset: 0; z-index: 16; pointer-events: none; overflow: hidden; display: none; }
body.atmo #petals { display: block; }
.petal {
  position: absolute; top: -22px; width: 12px; height: 12px;
  will-change: transform, opacity; animation: fall linear forwards;
}
.petal.sakura { background: radial-gradient(circle at 32% 30%, #ffe0ec, #f5a3c6); border-radius: 78% 8% 60% 50% / 60% 8% 78% 50%; }
.petal.leaf   { background: radial-gradient(circle at 32% 30%, #ecb856, #bd7326); border-radius: 0 82% 0 82%; }
.petal.snow   { background: #fff; border-radius: 50%; box-shadow: 0 0 5px rgba(255,255,255,.85); }
@keyframes fall {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 0; }
  12%  { opacity: .95; }
  100% { transform: translate(var(--dx,20px), 96vh) rotate(var(--rot,360deg)); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .petal { display: none; } }

/* ---------- javisko / chodba ---------- */
#stage {
  position: relative;
  flex: 1; min-height: 0;
  overflow: hidden;
  touch-action: none;               /* žiadny zoom/pan gestami — plocha hry */
  -webkit-tap-highlight-color: transparent;
  /* strop + stena (svetlý papier) + zlatá lišta + modrý „koberec" */
  background:
    linear-gradient(180deg,
      #c9d2de 0%, #d8dfe9 3.4%, #e3e8f0 4.2%,
      #e7ebf2 6%, #f1f4f9 52%, #e7ebf2 55%,
      var(--gold-d) 55.2%, var(--gold) 56.4%,
      #dfe5ee 56.6%, #cdd6e6 79%,
      var(--ff-l) 79.2%, var(--ff) 87%, var(--ff-d) 100%);
}

#corridorSign {
  position: absolute; z-index: 20; top: 14px; left: 50%;
  transform: translateX(-50%);
  background: var(--ff-d); color: var(--gold-l);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem; letter-spacing: 1px;
  padding: 7px 22px; border-radius: 8px;
  border: 1px solid var(--gold);
  box-shadow: 0 4px 10px rgba(8,23,48,.35);
  white-space: nowrap;
}

#farLayer, #world { position: absolute; inset: 0; will-change: transform; }
#farLayer { z-index: 1; }
#world { z-index: 5; pointer-events: none; }   /* priepustné, nech portréty v stene idú kliknúť */
.door { pointer-events: auto; }

/* okná a obrazy na stene (farLayer) */
/* okno podľa reálnej fasády FF: hliníkový rám, štíhle priečky, odlesk skla
   a bordový parapetný panel pod oknom (ako na budove na Ul. 17. novembra) */
.wallWin {
  position: absolute; bottom: 51%;
  width: 118px; height: 158px;
  background: linear-gradient(168deg, #cfdde9 0%, #9fb6c9 38%, #c4d4e0 56%, #8ea6ba 100%);
  border: 5px solid #9aa4ad;
  border-radius: 2px;
  box-shadow: 0 3px 9px rgba(8,23,48,.18), inset 0 0 0 1px #e8edf1;
}
.wallWin::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      transparent calc(50% - 2px), #9aa4ad calc(50% - 2px),
      #9aa4ad calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(115deg,
      rgba(255,255,255,.55) 10%, transparent 30%,
      transparent 58%, rgba(255,255,255,.3) 76%, transparent 88%);
}
.wallWin::after {
  content: ""; position: absolute; left: -5px; right: -5px; top: 100%;
  height: 30px;
  background: linear-gradient(#6e4038, #5a342e);
  border: 5px solid #9aa4ad; border-top: none;
}
/* pri zapnutej atmosfére: za oknom sezónny strom (pod sklom = pod ::before mrežou) */
body.atmo[data-season="sakura"] .wallWin,
body.atmo[data-season="leaf"] .wallWin,
body.atmo[data-season="snow"] .wallWin {
  background-repeat: no-repeat, no-repeat;
  /* strom je menší než okno → cez sklo vidno korunku s kúskom oblohy okolo,
     kmeň/tráva sadajú k parapetu (nie zväčšená koruna cez celé okno) */
  background-size: 84% auto, cover;
  background-position: center bottom, center;
}
body.atmo[data-season="sakura"] .wallWin {
  background-image: url(assets/tree-sakura.svg),
    linear-gradient(168deg, #e0ecf6 0%, #bcd2e6 55%, #a6c1d9 100%);
}
body.atmo[data-season="leaf"] .wallWin {
  background-image: url(assets/tree-autumn.svg),
    linear-gradient(168deg, #ece6d5 0%, #d3d9c2 55%, #c1ccae 100%);
}
body.atmo[data-season="snow"] .wallWin {
  background-image: url(assets/tree-winter.svg),
    linear-gradient(168deg, #e9eff5 0%, #d6e0ea 55%, #c4d2df 100%);
}

/* zarámovaná fotografia fakulty: tmavomodrý rám + biela pasparta + zlatý lem */
.wallPic {
  position: absolute; bottom: 53%;
  width: 158px; height: 112px;
  background: #fff; padding: 7px;
  border: 4px solid var(--ff); border-radius: 3px;
  box-shadow: 0 6px 14px rgba(8,23,48,.28), inset 0 0 0 1px var(--gold-d);
}
.wallPic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* portrét dekana v ráme + nenápadný popis (meno + obdobie) */
.wallPortrait {
  position: absolute; bottom: 55%;
  width: 104px; pointer-events: none;
}
.wallPortrait img {
  width: 100%; height: 116px; object-fit: cover; object-position: 50% 22%;
  display: block; background: #dfe5ee;
  border: 4px solid var(--ff); border-bottom: none; border-radius: 3px 3px 0 0;
}
.wallPortrait .cap {
  background: var(--ff); color: #f1f4f9;
  border-radius: 0 0 3px 3px;
  padding: 3px 4px 4px; text-align: center;
  box-shadow: 0 6px 14px rgba(8,23,48,.28), inset 0 0 0 1px var(--gold-d);
}
.wallPortrait .pname { display: block; font-size: .56rem; font-weight: 600; letter-spacing: .01em; line-height: 1.15; }
.wallPortrait .pyears { display: block; font-size: .48rem; color: var(--gold-l); letter-spacing: .02em; }
/* portrét je klikateľný — otvorí medailón dekana */
.wallPortrait { pointer-events: auto; cursor: pointer; transition: transform .18s, filter .18s; }
.wallPortrait:hover { transform: translateY(-3px); filter: drop-shadow(0 6px 12px rgba(8,23,48,.35)); }
.wallPortrait:hover .cap { box-shadow: inset 0 0 0 1px var(--gold-d), 0 0 0 2px rgba(217,178,91,.5); }

/* medailón dekana */
.deanCard #deanPhoto {
  width: 104px; height: 128px; object-fit: cover; object-position: 50% 20%;
  border: 3px solid var(--ff); border-radius: 4px; flex: none;
  box-shadow: 0 4px 10px rgba(8,23,48,.3), inset 0 0 0 1px var(--gold-d);
}
.deanCard .roomHead { align-items: flex-start; }
#deanRole { color: var(--gold-d); font-weight: 600; font-size: .95rem; margin-top: 4px; }
#deanBio { font-size: 1rem; line-height: 1.55; margin: 6px 2px 0; }

/* živá nástenka (FF aktuality) — modrá tabuľa, biele písmo, zlatý rám */
.noticeBoard {
  position: absolute; bottom: 47%; width: 216px;
  background: linear-gradient(160deg, var(--ff-l), var(--ff) 55%, var(--ff-d));
  border: 4px solid var(--gold-d); border-radius: 6px;
  box-shadow: 0 9px 20px rgba(8,23,48,.38), inset 0 0 0 1px rgba(232,200,120,.35);
  pointer-events: auto; overflow: hidden;
}
.noticeBoard .nbHead {
  background: linear-gradient(var(--gold-l), var(--gold));
  color: var(--ff-d); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; text-align: center; font-size: .74rem;
  padding: 5px 6px; font-family: 'Source Serif 4', Georgia, serif;
}
.newsList { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 5px; }
.newsItem {
  color: #fff; text-decoration: none; line-height: 1.22; font-size: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 4px;
}
.newsItem:last-child { border-bottom: none; }
.newsItem:hover .newsTitle { color: var(--gold-l); text-decoration: underline; }
.newsDate { display: block; color: var(--muted); font-size: .6rem; margin-top: 1px; }
.newsEmpty { color: var(--muted); font-style: italic; font-size: .68rem; }

/* nástenné písmo (ako kovové litery na budovách) */
.wallSign {
  position: absolute; bottom: 64%;
  transform: translateX(-50%);
  text-align: center; white-space: nowrap;
  pointer-events: none;
}
.wallSign .big {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600;
  font-size: clamp(1.6rem, 4.2vh, 2.7rem);
  letter-spacing: .22em; color: #2c4468;
  text-shadow: 0 1px 0 #fff, 0 3px 7px rgba(8,23,48,.25);
}
.wallSign .sub {
  margin-top: 7px;
  font-size: clamp(.7rem, 1.6vh, .95rem);
  letter-spacing: .34em; text-transform: uppercase;
  color: #8a97ab;
}
.wallSign .rule {
  width: 58%; height: 2px; margin: 9px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* závesná lampa nad dverami (v rovine dverí, nie v parallaxe) */
.lamp { position: absolute; top: 0; width: 46px; height: 100px; pointer-events: none; }
.lamp::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 3px; height: 66px; margin-left: -1.5px;
  background: linear-gradient(#7f8993, #9aa4ad);
}
.lamp::after {
  content: ""; position: absolute; top: 64px; left: 0; right: 0; height: 26px;
  background: linear-gradient(var(--ff-l), var(--ff-d));
  border-radius: 50% 50% 10px 10px / 74% 74% 10px 10px;
  box-shadow:
    inset 0 -4px 0 rgba(232,200,120,.85),
    0 10px 22px 2px rgba(255,226,150,.4);
}

/* nástenné hodiny — visia zo stropu na nožke ako lampa; ukazujú reálny čas */
.clock { position: absolute; top: 0; width: 74px; height: 138px; pointer-events: none; }
.clock::before {                  /* nožka zo stropu (rovnaká ako pri lampe) */
  content: ""; position: absolute; top: 0; left: 50%;
  width: 3px; height: 50px; margin-left: -1.5px;
  background: linear-gradient(#7f8993, #9aa4ad);
}
.clock svg { position: absolute; top: 46px; left: 0; display: block; width: 74px; height: 74px;
  filter: drop-shadow(0 5px 8px rgba(8,23,48,.32)); }

/* okrúhly medailón s pečaťou FF (ako heroLogo vo ff-quiz) */
.medallion {
  position: absolute; bottom: 52%;
  width: 92px; height: 92px; border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(217,178,91,.16), 0 6px 14px rgba(8,23,48,.3);
  overflow: hidden; background: #fff;
}
.medallion img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- dvere ---------- */
.door {
  position: absolute; bottom: 21%;
  width: 128px; height: 226px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.door .frame {
  position: absolute; inset: -10px -12px 0 -12px;
  background: var(--ff-d); border-radius: 10px 10px 0 0;
  box-shadow: 0 8px 14px rgba(8,23,48,.3);
}
.door .dark {
  position: absolute; inset: 0;
  background: var(--ff-dd); border-radius: 6px 6px 0 0;
}
.door .leaf {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ff-l), var(--ff) 55%, #15396b);
  border-radius: 6px 6px 0 0;
  border: 3px solid var(--ff-d);
  transform-origin: left center;
  transition: transform .38s ease-in;
  display: flex; flex-direction: column; align-items: center;
}
.door.open .leaf { transform: perspective(700px) rotateY(-74deg); }
.door .knob {
  position: absolute; right: 10px; top: 52%;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-l), var(--gold) 60%, #8a6d2a);
}
/* presklené dvere s hliníkovým rámom (podľa reálnej budovy) */
.door .frame { background: #8f99a3; border-radius: 4px 4px 0 0; }
.door .dark  { background: #2a3742; }
.door .leaf {
  border: 3px solid #8f99a3; border-radius: 2px 2px 0 0;
  justify-content: flex-start;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.34) 12%, rgba(255,255,255,0) 34%,
      rgba(255,255,255,0) 62%, rgba(255,255,255,.18) 78%, rgba(255,255,255,0) 90%),
    linear-gradient(168deg,
      rgba(213,226,236,.94) 0%, rgba(164,186,204,.94) 45%, rgba(120,143,163,.96) 100%);
}
/* kopací plech dole */
.door .leaf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  background: linear-gradient(#a6b0ba, #7f8993);
}

/* zlatý nadpis na dverách — jediný obsah dverí */
.door .doorSign {
  max-width: 88%; margin-top: 16px;
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600;
  color: var(--gold-l); font-size: .68rem; line-height: 1.22;
  letter-spacing: .01em; text-align: center;
  padding: 6px 9px; border-radius: 7px;
  background: rgba(15,37,72,.9); border: 1px solid var(--gold);
  box-shadow: 0 2px 6px rgba(8,23,48,.4);
}
.door.gateway .doorSign, .door.backdoor .doorSign { font-size: .82rem; }

/* vodorovné madlo pod nadpisom */
.door .panel {
  position: absolute; left: 12%; right: 12%; bottom: 34%; height: 7px;
  border-radius: 4px;
  background: linear-gradient(#d7dde3, #9aa4ad);
  box-shadow: 0 2px 3px rgba(8,23,48,.35);
}
.door .knob { display: none; }

.door.near .frame { box-shadow: 0 0 0 3px rgba(217,178,91,.65), 0 8px 14px rgba(8,23,48,.3); }
.door.near .doorSign { background: var(--ff-d); box-shadow: 0 0 10px 2px rgba(232,200,120,.55); }
.door.visited .doorSign::after { content: " ✓"; color: #8fe08f; }

/* smerovky v hale a návrat: tmavšie sklo */
.door.gateway .leaf {
  background:
    linear-gradient(115deg, rgba(255,255,255,.22) 14%, rgba(255,255,255,0) 36%),
    linear-gradient(168deg, rgba(52,74,104,.97), rgba(26,42,66,.97));
}
.door.backdoor .leaf {
  background:
    linear-gradient(115deg, rgba(255,255,255,.4) 14%, rgba(255,255,255,0) 40%),
    linear-gradient(168deg, rgba(228,236,243,.96), rgba(186,203,218,.96));
  border-color: #8f99a3;
}
.door.backdoor .doorSign { color: var(--gold-l); }

/* ---------- študentík ---------- */
#studentWrap {
  position: absolute; z-index: 10; bottom: 18.5%;
  transform: translateX(-50%);
  pointer-events: none;
}
#studentSvg { display: block; overflow: visible; }
#studentSvg.flip { transform: scaleX(-1); }
.st-eye   { fill: var(--ink); }
.st-smile { stroke: var(--ink); stroke-width: 2.4; fill: none; stroke-linecap: round; }

.st2-skin  { fill: #eec39a; }
.st2-hair  { fill: #3b2a1c; }
.st2-brow  { stroke: #3b2a1c; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.st2-jacket { fill: #24466e; }
.st2-collar { fill: #f1f4f9; }
.st2-zip   { stroke: #16304e; stroke-width: 1.6; }
.st2-sleeve { fill: #24466e; }
.st2-hand  { fill: #eec39a; }
.st2-strap { stroke: var(--gold-d); stroke-width: 5; stroke-linecap: round; fill: none; }
.st2-bag   { fill: #b08a3e; }
.st2-bagflap { fill: #8f6d2c; }
.st2-jeans { fill: #33475e; }
.st2-shoe  { fill: #e8e8e8; }
.st2-sole  { fill: #24303c; }

/* študentka */
#stGirl { display: none; }
body.avatar-girl #stV2 { display: none; }
body.avatar-girl #stGirl { display: block; }
.g-skin { fill: #f0cba0; }
.g-hair, .g-hairback { fill: #6b3f22; }
.g-brow { stroke: #6b3f22; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.g-top { fill: #8a3b5c; }
.g-collar { fill: #f4e2ea; }
.g-sleeve { fill: #8a3b5c; }
.g-hand { fill: #f0cba0; }
.g-skirt { fill: #5a2b44; }
.g-tight { fill: #3a4a5e; }
.g-flat { fill: #b23a52; }
.g-bag { fill: #c98a3f; }
.g-bagflap { fill: #a56f2c; }

.st-leg, .st-arm { transform-origin: 60px 118px; }
.st-arm { transform-origin: 60px 72px; }
#studentSvg.walking .st-leg-l { animation: swing .46s ease-in-out infinite; }
#studentSvg.walking .st-leg-r { animation: swing .46s ease-in-out infinite reverse; }
#studentSvg.walking .st-arm-l { animation: swing .46s ease-in-out infinite reverse; }
#studentSvg.walking .st-arm-r { animation: swing .46s ease-in-out infinite; }
#studentSvg.walking #stV2,
#studentSvg.walking #stGirl { animation: bob .23s ease-in-out infinite alternate; }
@keyframes swing { 0%,100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
@keyframes bob   { from { transform: translateY(0); } to { transform: translateY(-3px); } }

/* skok študenta */
#studentJump.jump { animation: jump .62s ease-out; }
@keyframes jump {
  0%   { transform: translateY(0)     scaleY(.92); }
  18%  { transform: translateY(-14px) scaleY(1.06); }
  45%  { transform: translateY(-58px) scaleY(1.02); }
  70%  { transform: translateY(-30px) scaleY(1); }
  88%  { transform: translateY(0)     scaleY(.9); }
  100% { transform: translateY(0)     scaleY(1); }
}
/* mávnutie (občasné idle) */
#studentSvg.wave .st-arm-r { animation: wave .5s ease-in-out 3; transform-origin: 84px 72px; }
@keyframes wave { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(-42deg); } }

#bubble {
  position: absolute; bottom: 105%; left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: 230px;
  background: #fff; color: var(--ink);
  border: 2px solid var(--gold); border-radius: 12px;
  padding: 8px 12px; font-size: .85rem; line-height: 1.3;
  box-shadow: 0 5px 12px rgba(8,23,48,.3);
}
#bubble.joy {
  font-weight: 700; color: var(--ff-d);
  animation: joyPop .35s cubic-bezier(.2,2,.4,1);
}
@keyframes joyPop { 0% { transform: translateX(-50%) scale(.4); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
#bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  margin-left: -7px; border: 7px solid transparent;
  border-top-color: var(--gold);
}

/* ---------- NPC: občasný okoloidúci (popredie, chodí po podlahe) ---------- */
/* každý chodec (dvojica/trojica) je samostatný klon šablóny — môže ich byť
   viac naraz, každý s vlastnou rýchlosťou/smerom (živosť chodby) */
.npcWalker {
  position: absolute; z-index: 9; bottom: 13%; left: 0;
  display: flex; align-items: flex-end; gap: 10px;
  opacity: .9; pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(8,23,48,.25));
}
.npcWalker.flip { flex-direction: row-reverse; }   /* pri chôdzi vľavo vedie druhá postava */
.npcFig { position: relative; }
.npcSvg { display: block; }
.npcWalker.flip .npcSvg { transform: scaleX(-1); }   /* postavy sa otočia, bubliny nie */
.npc-coat { fill: #3a4a5e; }
.npc-strap { stroke: #8a6d2c; stroke-width: 4; fill: none; stroke-linecap: round; }
.npc-bag { fill: #7a5a2b; }
.npc-skin { fill: #eec39a; }
.npc-hair { fill: #4a3626; }
/* kamarátka: teplejšia paleta, sukňa + dlhšie vlasy */
.npc2-top { fill: #7a3b5c; }
.npc2-skirt { fill: #572a42; }
.npc2-hair, .npc2-hairback { fill: #5a3a22; }
.npc2-bag { fill: #b0863e; }
/* učenec: olivový kabát, šál a okuliare */
.npc3-coat { fill: #46543c; }
.npc3-hair { fill: #2e2416; }
.npc3-scarf { fill: #9a3b2e; }
.npc3-bag { fill: #6a5228; }
.npc3-glasses { fill: none; stroke: #241c14; stroke-width: 1.5; stroke-linecap: round; }
.npc-leg rect { fill: #2b3a4d; }
.npc-leg ellipse { fill: #1d2733; }
.npcSvgF .npc-leg rect { fill: #3a4152; }
.npc-leg { transform-origin: 41px 96px; }
/* pomalý krok, aby ladil s pokojnou chôdzou (inak vyzerajú, že utekajú) */
.npcWalker .npc-leg-l { animation: swing 1s ease-in-out infinite; }
.npcWalker .npc-leg-r { animation: swing 1s ease-in-out infinite reverse; }
/* postavy v skupine kráčajú mimo fázy — nech nevyzerajú ako klony */
.npcWalker .npcFig:nth-child(2) .npc-leg-l,
.npcWalker .npcFig:nth-child(2) .npc-leg-r { animation-delay: -.4s; }
.npcWalker .npcFig:nth-child(3) .npc-leg-l,
.npcWalker .npcFig:nth-child(3) .npc-leg-r { animation-delay: -.24s; }

/* vlajka pri citoslovciach (inline SVG — vidno ju aj na Windows) */
.flag { display: inline-block; width: 17px; height: 11px; vertical-align: -1px;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }

/* rečová bublina okoloidúcich (upright — neprevracia sa s postavou) */
.npcBub {
  position: absolute; bottom: 116px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 210px;
  background: #fffdf5; color: var(--ink);
  border: 2px solid var(--gold); border-radius: 12px;
  padding: 6px 11px; font-size: .76rem; line-height: 1.3; text-align: center;
  box-shadow: 0 5px 12px rgba(8,23,48,.3);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.npcBub.on { opacity: 1; }
.npcBub::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  margin-left: -6px; border: 6px solid transparent; border-top-color: var(--gold);
}

/* ---------- sova-radkyňa (fixný sprievodca s tipmi) ---------- */
#owl {
  position: absolute; z-index: 26; right: 20px; top: 12px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(8,23,48,.35));
}
#owl.off { display: none; }
#owlSvg { display: block; }
#owl:hover #owlSvg { animation: owlBob .5s ease-in-out infinite alternate; }
@keyframes owlBob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.ow-branch { fill: #6b4a2b; }
.ow-body  { fill: var(--ff); }
.ow-belly { fill: #efe6d3; }
.ow-wing  { fill: var(--ff-d); }
.ow-tuft  { fill: var(--ff-d); }
.ow-face  { fill: #efe6d3; }
.ow-eye   { fill: #fff; stroke: var(--gold); stroke-width: 1.6; }
.ow-pupil { fill: #1c2430; }
.ow-shine { fill: #fff; }
.ow-beak  { fill: var(--gold-d); }
.ow-foot  { stroke: var(--gold-d); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.ow-eye   { animation: owlBlink 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes owlBlink { 0%,94%,100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
#owlBubble {
  position: absolute; right: 62px; top: 8px;
  width: max-content; max-width: 240px;
  background: #fffdf5; color: var(--ink);
  border: 2px solid var(--gold); border-radius: 12px;
  padding: 8px 12px; font-size: .82rem; line-height: 1.3;
  box-shadow: 0 5px 14px rgba(8,23,48,.32);
  transform-origin: right center;
  animation: owlPop .3s cubic-bezier(.2,2,.4,1);
}
@keyframes owlPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#owlBubble::after {
  content: ""; position: absolute; right: -8px; top: 14px;
  border: 7px solid transparent; border-left-color: var(--gold);
}

/* ---------- Strom stránky FF (odkaz na mapu webu, pri Sove Fila) ---------- */
#stromBtn {
  position: absolute; z-index: 26; right: 26px; top: 100px;
  display: block; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(8,23,48,.35));
}
.strom-ic {
  display: block; width: 46px; height: 69px;
  transition: transform .3s ease;
}
#stromBtn:hover .strom-ic,
#stromBtn:focus-visible .strom-ic { transform: translateY(-3px) scale(1.05); }
#stromBubble {
  position: absolute; right: 52px; top: 2px;
  width: max-content; max-width: 232px;
  background: #fffdf5; color: var(--ink);
  border: 2px solid var(--gold); border-radius: 12px;
  padding: 8px 12px; font-size: .8rem; line-height: 1.3;
  box-shadow: 0 5px 14px rgba(8,23,48,.32);
  transform-origin: right center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  /* jednorazový úvodný „pop" po načítaní, aby bolo jasné, čo ikonka je */
  animation: stromIntro 7.5s ease 1.4s 1 both;
}
#stromBubble::after {
  content: ""; position: absolute; right: -8px; top: 14px;
  border: 7px solid transparent; border-left-color: var(--gold);
}
#stromBtn:hover #stromBubble,
#stromBtn:focus #stromBubble,
#stromBtn:focus-visible #stromBubble { opacity: 1; }
@keyframes stromIntro {
  0% { opacity: 0; transform: scale(.6); }
  5% { opacity: 1; transform: scale(1); }
  82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #stromBubble { animation: none; }
}

/* ---------- ovládanie ---------- */
.pad {
  position: absolute; z-index: 25;
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(15,37,72,.78); color: var(--gold-l);
  font-size: 1.5rem; cursor: pointer;
  touch-action: none; user-select: none;
  -webkit-user-select: none;
}
.pad:active { background: rgba(217,178,91,.4); }
#padJump { left: 50%; transform: translateX(-50%); bottom: calc(10.5% + 40px); font-size: 1.4rem; }

/* kopka kníh na chodbe (na preskočenie) */
.bookpile {
  position: absolute; z-index: 8; pointer-events: none;
  display: flex; flex-direction: column-reverse; align-items: center;
  transform: scale(var(--s, 1)); transform-origin: bottom center;
}
.bookpile::after {           /* mäkký tieň na podlahe */
  content: ""; position: absolute; bottom: -4px; left: 50%;
  width: 92px; height: 9px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(8,23,48,.3), transparent 72%);
}
.bookpile i {
  position: relative; height: 13px; margin-top: -1px;
  border-radius: 2px 3px 3px 2px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.24),
    0 1px 2px rgba(8,23,48,.32);
}
.bookpile i::after {         /* orezané strany (pergamen) na chrbte */
  content: ""; position: absolute; top: 2px; bottom: 2px; right: 2px; width: 4px;
  border-radius: 1px;
  background: repeating-linear-gradient(#f3ead7 0 1px, #d6c8a6 1px 2px);
}
.bookpile i.flip { border-radius: 3px 2px 2px 3px; }
.bookpile i.flip::after { right: auto; left: 2px; }
.bookpile i::before {        /* zlatý štítok / nápis na chrbte */
  content: ""; position: absolute; top: 5px; left: 22%; width: 34%; height: 2px;
  border-radius: 1px; background: rgba(232,200,120,.75);
}
/* vycentrované vo zvislom strede podlahového pruhu (pruh = spodných 21 %) */
#padL { left: 3%; bottom: calc(10.5% - 31px); }
#padR { right: 3%; bottom: calc(10.5% - 31px); }

#hint {
  position: absolute; z-index: 20; bottom: calc(10.5% - 19px); left: 50%;
  transform: translateX(-50%);
  background: rgba(15,37,72,.85); color: var(--paper);
  border: 1px solid rgba(217,178,91,.6); border-radius: 999px;
  padding: 7px 18px; font-size: .88rem; white-space: nowrap;
  transition: opacity .3s;
}
#hint.pulse { animation: hintPulse 1.4s ease-in-out infinite; }
@keyframes hintPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(217,178,91,.5); } 50% { box-shadow: 0 0 0 8px rgba(217,178,91,0); } }

/* ---------- overlay / miestnosť ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8,23,48,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.roomCard {
  position: relative;
  width: min(680px, 100%);
  max-height: 92vh; overflow-y: auto;
  background: #fff; color: var(--ink);
  border: 3px solid var(--gold); border-radius: 16px;
  padding: 22px 24px 18px;
  box-shadow: 0 18px 50px rgba(8,23,48,.55);
}
.roomHead { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
#roomLogo { width: 72px; height: 72px; object-fit: contain; background: #fff;
  border: 2px solid var(--gold); border-radius: 10px; flex: none; padding: 5px; }
#roomIcon, .idxIco { font-size: 52px; line-height: 1; flex: none; }
.roomHead h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.35rem; line-height: 1.2; color: var(--ff-d);
}
#roomWhere { margin: 4px 0 10px; font-size: .95rem; color: var(--muted-d); font-style: italic; }

#roomVybavis h3, #roomContacts h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem; color: var(--gold-d);
  border-bottom: 1px solid var(--line);
  margin: 12px 0 6px; padding-bottom: 3px;
}
#vybavisList { list-style: none; }
#vybavisList li { padding: 3px 0 3px 26px; position: relative; }
#vybavisList li::before { content: "✔"; position: absolute; left: 4px; color: var(--green); }

.contact { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.contact:last-child { border-bottom: none; }
.contact .role { font-size: .8rem; color: var(--muted-d); text-transform: uppercase; letter-spacing: .4px; }
.contact .cname { font-weight: 600; }
.contact .cdet { font-size: .92rem; }
.contact a { color: var(--ff-l); text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.contact .room { color: var(--muted-d); font-size: .85rem; }

.roomFoot {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  margin-top: 16px;
}
.btn {
  font: inherit; font-size: 1rem; cursor: pointer;
  border: 2px solid var(--ff-d); border-radius: 10px;
  background: #fff; color: var(--ff-d);
  padding: 9px 16px; text-decoration: none; display: inline-block;
}
.btn:hover, .btn:focus-visible { background: var(--paper); }
.kbd {
  display: inline-block; margin-left: 4px; padding: 0 6px;
  font-size: .78em; font-weight: 700; line-height: 1.5;
  background: var(--ff-d); color: var(--gold-l);
  border-radius: 5px; border: 1px solid var(--gold-d);
}
.btnGold { background: var(--gold); border-color: var(--gold-d); color: var(--ink); font-weight: 600; }
.btnGold:hover, .btnGold:focus-visible { background: var(--gold-l); }

/* pečiatka */
#stamp {
  position: absolute; top: 16px; right: 18px;
  width: 108px; height: 108px; border-radius: 50%;
  border: 4px double var(--red); color: var(--red);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; font-size: .72rem; letter-spacing: 1px; text-align: center;
  transform: rotate(-14deg);
  background: rgba(255,255,255,.35);
  animation: stampIn .5s cubic-bezier(.2,2.4,.5,1);
  pointer-events: none;
}
#stamp small { font-size: .6rem; font-weight: 600; margin-top: 3px; letter-spacing: 2px; }
@keyframes stampIn {
  0% { transform: rotate(-14deg) scale(2.6); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: rotate(-14deg) scale(1); }
}

/* ---------- index pečiatok ---------- */
.indexCard { width: min(760px, 100%); }
#indexProgress { margin: 2px 0 12px; font-weight: 600; color: var(--gold-d); }
#indexGrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.idxItem {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 9px; font-size: .8rem; line-height: 1.2;
  min-height: 52px;
}
.idxItem img { width: 34px; height: 34px; object-fit: contain; flex: none;
  border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.idxItem .ie { font-size: 26px; flex: none; }
.idxItem.got { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.idxItem .mark { margin-left: auto; flex: none; font-size: 1.05rem; color: var(--red); font-weight: 800; transform: rotate(-12deg); }
.idxItem:not(.got) { opacity: .62; }
.idxItem:not(.got) .mark { color: var(--muted); transform: none; font-weight: 400; }

/* ---------- toast ---------- */
#toast {
  position: fixed; z-index: 60; left: 50%; bottom: 12%;
  transform: translateX(-50%);
  background: var(--ff-d); color: var(--paper);
  border: 2px solid var(--gold); border-radius: 12px;
  padding: 11px 20px; font-size: 1rem;
  box-shadow: 0 8px 24px rgba(8,23,48,.5);
  animation: toastIn .35s ease-out;
  white-space: nowrap;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } }

/* ---------- drobné displeje / mobil ---------- */
/* dotykové zariadenia: väčšie pady pre prst */
@media (pointer: coarse) {
  .pad { width: 74px; height: 74px; font-size: 1.7rem; }
}

/* úzke displeje (mobil na výšku aj menšie okná) */
@media (max-width: 700px) {
  #topbar { padding: 7px 10px; gap: 8px; }
  #topbtns { gap: 5px; }
  #topbtns button { padding: 7px 9px; font-size: .95rem; }
  .btnTxt { display: none; }              /* v lište ostanú len ikony */
  .langLink { padding: 6px 8px; font-size: .85rem; }
  #brand strong { font-size: 1.02rem; }
  #brand span { display: none; }
  #options { left: 8px; right: 8px; min-width: 0; }
}
/* na mobile je tlačidlo skoku zbytočné (skáče sa ťuknutím na chodbu) a prekrýva
   študenta — na veľkej dotykovej obrazovke kiosku ho nechávame */
@media (max-width: 700px), (max-height: 520px) {
  #padJump { display: none; }
}
@media (max-width: 640px) {
  .door { width: 106px; height: 196px; }
  .door .doorSign { font-size: .62rem; }
  #studentSvg { width: 76px; height: 120px; }
  #hint { font-size: .76rem; max-width: 62vw; white-space: normal; text-align: center; }
  #corridorSign { font-size: .85rem; padding: 6px 12px; max-width: 72vw; overflow: hidden; text-overflow: ellipsis; }
  #owlSvg { width: 52px; height: 60px; }
  #owlBubble { right: 50px; max-width: 190px; font-size: .76rem; }
  #stromBtn { top: 84px; right: 24px; }
  .strom-ic { width: 34px; height: 51px; }
  #stromBubble { right: 44px; max-width: 180px; font-size: .74rem; }
  .noticeBoard { width: 178px; }
  .wallSign .big { letter-spacing: .12em; }
  .roomCard { padding: 16px 14px 12px; }
  #stamp { width: 84px; height: 84px; font-size: .6rem; top: 10px; right: 10px; }
}

/* nízke displeje (mobil na šírku) — menšie kulisy, nech sa chodba zmestí */
@media (max-height: 520px) {
  #topbar { padding: 4px 10px; }
  #topbtns button { padding: 5px 9px; }
  .door { width: 96px; height: 168px; }
  .door .doorSign { font-size: .58rem; margin-top: 10px; }
  #studentSvg { width: 64px; height: 101px; }
  .wallWin { width: 86px; height: 112px; }
  .wallPic { width: 116px; height: 82px; }
  .wallPortrait { width: 78px; }
  .wallPortrait img { height: 88px; }
  .noticeBoard { width: 170px; }
  .medallion { width: 68px; height: 68px; }
  .lamp, .clock { display: none; }        /* visiace zo stropu by pretínali dvere */
  #hint { font-size: .74rem; padding: 5px 12px; }
  #corridorSign { top: 8px; font-size: .82rem; padding: 5px 12px; }
  #owlSvg { width: 46px; height: 53px; }
  #stromBtn { top: 72px; right: 22px; }
  .strom-ic { width: 30px; height: 45px; }
  #padJump { bottom: calc(10.5% + 30px); }
}