/* ============================================================
   ROOT & BASE
============================================================ */
:root {
  --brand:#e5006a;
  --brand-strong:#ff2f92;
  --bg-light:#ffe6f0;
  --bg-dark-solid:#120018;
  --bg-dark-grad:radial-gradient(circle at top,#3a005a,#120018 50%,#050008 100%);
  --glow:none;
  --header-max: 58px;
  --header-min: 48px;
  --nav-height:70px;
  --mobile-nav-height:58px;
  --nav-light:#5a004e;
  --nav-light-hover:#ff2b84;
  --nav-light-active:#ff2b84;
  --nav-dark:#fff;
  --nav-dark-hover:#ff7bff;
  --nav-dark-active:#ff4bf7;
  --text:#2b0020;
  --text-soft:#5a1140;
  --text-dark:#fce9f6;
  --glass-light:rgba(255,255,255,.7);
  --glass-dark:rgba(8,0,16,.85);
  --border-glass-light:rgba(255,255,255,.5);
  --border-glass-dark:rgba(255,150,255,.35);
  --shadow-soft:0 12px 35px rgba(229,0,106,.25);
  --shadow-strong:0 0 40px rgba(255,0,170,.4);
}

html{
  transition:background .35s,color .35s,filter .35s;
  scroll-behavior:smooth;
}

html.theme-dark{
  --bg-light:var(--bg-dark-grad);
  --text:var(--text-dark);
  --text-soft:#ffe0ff;
  --glass-light:var(--glass-dark);
  --border-glass-light:var(--border-glass-dark);
  --shadow-soft:0 12px 40px rgba(255,0,255,.35);
}

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

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:"Poppins",system-ui;
  -webkit-font-smoothing:antialiased;
  color:var(--text);
  background:var(--bg-light);
  overflow-x:hidden;
  transition:background .6s,color .4s;
}

main{flex:1;width:100%;padding:20px 5vw 40px;}
img{max-width:100%;display:block;}

/* ============================================================
   HEADER & TITLE – smooth shrink ready
============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 9999;
  display: flex;
  align-items: center;

  padding: 10px 16px;
  height: var(--header-max); /* dynamická výška */

  background-color: var(--glass-light);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-glass-light);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);

  transition: height .18s linear, transform .18s ease;
  transform: translateY(var(--header-shift, 0));
  will-change: transform, height;
}

/* TITLE WRAP — zarovnání uprostřed při scrollu */
.header__title-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;

  transition: transform .18s ease;
}

/* TITULEK */
.header__title {
  margin: 0;

  font-size: 2.2rem;     /* výchozí – mění JS */
  letter-spacing: .2em;
  font-weight: 800;
  font-family: "Fredoka", "Poppins";

  color: var(--brand-strong);
  pointer-events: auto;

  text-shadow:
    0 0 10px rgba(229,0,106,.5),
    0 0 22px rgba(255,150,255,.4);

  transition: 
    font-size .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

/* INTERAKCE S PÍSMENY */
.header__title span {
  display: inline-block;
  transition: transform .25s;
}

.header__title span:hover {
  transform: translateY(-2px) scale(1.1);
}

/* Cute intro animace */
body.animate-title .header__title span {
  opacity: 0;
  transform: translateY(14px) scale(.92);
  animation: cuteLetter .55s cubic-bezier(.22,1.5,.36,1) forwards;
}

@keyframes cuteLetter {
  0%   { opacity: 0; transform: translateY(14px) scale(.92); }
  70%  { opacity: 1; transform: translateY(-4px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ============================================================
   NAV ICONS & LAYOUT
============================================================ */

.header__nav-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  opacity: .65;
  transition: opacity .25s, transform .25s;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

/* Globálně zrušíme všechny underline efekty */
.header__nav-link,
.header__nav-link:visited,
.header__nav-link:hover,
.header__nav-link:active {
  text-decoration: none !important;
}


/* Right side layout */
.header__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-right: 48px;
  gap: 14px;
}

.header__nav-right { margin-right: 24px; }



/* ============================================================
   DESKTOP NAVIGATION (FIXED ALIGN + PERFECT UNDERLINE)
============================================================ */

.header__nav.header__nav--desktop {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 48px;

  transition: transform .18s ease;
}

.header__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 18px;
  border-radius: 12px;

  font-weight: 500;
  line-height: 20px; /* match 20px icon height */
  transition: color .25s, background .25s, box-shadow .25s;
}

/* LIGHT / DARK default */
html.theme-light .header__nav-link { color: var(--nav-light); }
html.theme-dark  .header__nav-link { color: var(--nav-dark); }

/* Hover */
.header__nav-link:hover:not(.active) {
  color: var(--brand-strong);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 4px 10px rgba(229,0,106,0.22);
}

.header__nav-link:hover .header__nav-icon,
.header__nav-link:hover .icon {
  opacity: 1;
  color: var(--brand-strong);
}

/* Active */
.header__nav-link.active {
  background: rgba(255,255,255,0.28);
  color: var(--brand-strong) !important;
  box-shadow: 0 4px 12px rgba(229,0,106,0.28);
}

/* Theme specific active */
html.theme-light .header__nav-link.active {
  background: rgba(255,0,140,0.18);
  box-shadow: 0 4px 12px rgba(255,0,140,0.30);
}

html.theme-dark .header__nav-link.active {
  background: rgba(255,0,255,0.16);
  box-shadow: 0 4px 14px rgba(255,0,255,0.30);
  text-shadow: 0 0 8px rgba(255,120,255,0.35);
}

html.theme-dark .header__nav-link.active .header__nav-icon,
html.theme-dark .header__nav-link.active .icon {
  color: var(--brand-strong) !important;
  opacity: 1 !important;
}



/* ============================================================
   ICON ALIGNMENT PER PAGE (pixel-perfect)
============================================================ */

.header__nav-link[data-page="/"] .header__nav-icon {
  position: relative;
  top: -1px !important;
}

.header__nav-link[data-page="fotogalerie"] .header__nav-icon {
  position: relative;
  top: -0.5px !important;
}

.header__nav-link[data-page="minihra"] .header__nav-icon {
  position: relative;
  top: -1.5px !important;
}

.header__nav-link[data-page="about"] .header__nav-icon {
  position: relative;
  top: -3px !important; /* doladíš podle oka */
}



/* ============================================================
   UNDERLINE (NEW PERFECT VERSION)
============================================================ */

.header__nav-link .header__nav-label {
  position: relative;
  display: inline-block;
}

/* baseline underline (invisible before hover) */
.header__nav-link .header__nav-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  bottom: -3px;
  height: 2px;

  border-radius: 4px;
  background: var(--brand-strong);

  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease, opacity .25s ease;
}

/* hover underline */
.header__nav-link:hover .header__nav-label::after {
  opacity: 1;
  transform: scaleX(1);
}

/* active – underline stays visible! */
.header__nav-link.active .header__nav-label::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* fancy glow (hover only) */
html.theme-light .header__nav-link:hover .header__nav-label::after {
  box-shadow: 0 0 8px rgba(255,120,200,.35),
              0 0 16px rgba(255,120,200,.25);
}

html.theme-dark .header__nav-link:hover .header__nav-label::after {
  box-shadow: 0 0 12px rgba(255,0,200,.45),
              0 0 28px rgba(255,0,255,.25);
}

/* ============================================================
   MOBILE NAVIGATION
============================================================ */
@media(max-width:1100px){
  .header__nav.header__nav--desktop{display:none !important;}
  .header__menu-toggle{display:flex !important;}
  .header__right{display:none !important;}
  .header__nav.header__nav--mobile{display:flex !important;}
}

/* Force mobile nav i na velkých šířkách, když se to začne tlouct */
.header.header--force-mobile .header__nav--desktop {
  display: none !important;
}

.header.header--force-mobile .header__menu-toggle {
  display: flex !important;
}

.header.header--force-mobile .header__right {
  display: none !important;
}

.header.header--force-mobile .header__nav--mobile {
  display: flex !important;
}

.header__nav.header__nav--mobile{
  display:none;
  flex-direction:column;
  gap:12px;
  background:var(--glass-light);
  backdrop-filter:blur(14px);
  border-radius:18px;
  padding:12px 16px;
  position:absolute;
  top:60px;
  left:14px;
  box-shadow:var(--shadow-soft);
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
  transition:.25s;
  z-index:1500;
}

.header__nav.header__nav--mobile.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.header__nav-link{
  color:var(--text-soft);
  font-weight:600;
  padding:8px 10px;
  border-radius:12px;
  transition:.2s;
  text-decoration:none;
}

.header__nav-link:hover{
  color:var(--brand-strong);
  background:rgba(255,255,255,.1);
}

/* default active (dark mode friendly) */
.header__nav-link.active{
  color:var(--brand-strong);
  background:rgba(255,255,255,.1);
}

/* light mode active tweak */
html.theme-light .header__nav-link.active{
  background:rgba(255,0,140,.14);
  box-shadow:0 0 10px rgba(255,0,140,.18);
  color:var(--brand-strong);
}

/* tenká oddělovací čára mezi nav a "Vzhled" */
.header__mobile-separator{
  width:100%;
  height:1px;
  margin:10px 0 6px;
  border:none;
  background:rgba(255,255,255,.16);
}

/* jemně růžová ve světlém režimu */
html.theme-light .header__mobile-separator{
  background:rgba(255,0,140,.25);
  box-shadow:0 0 6px rgba(255,0,140,.18);
}

/* fialovější v dark režimu */
html.theme-dark .header__mobile-separator{
  background:rgba(255,100,255,.22);
  box-shadow:0 0 6px rgba(255,100,255,.18);
}


/* ============================================================
   MOBILE MENU TOGGLE
============================================================ */
.header__menu-toggle{
  position:relative;
  width:32px;
  height:24px;
  margin-right:auto;
  display:none;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  background:none;
  border:none;
  z-index:150;
}

.header__menu-toggle span{
  position:absolute;
  left:0;
  right:0;
  height:3px;
  border-radius:99px;
  background:var(--brand-strong);
  box-shadow:0 0 9px rgba(229,0,106,.9);
  transition:.3s;
}

.header__menu-toggle span:nth-child(1){top:2px;}
.header__menu-toggle span:nth-child(2){top:10px;}
.header__menu-toggle span:nth-child(3){top:18px;}

.header__menu-toggle.active span:nth-child(1){
  top:10px;
  transform:rotate(45deg);
}

.header__menu-toggle.active span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}

.header__menu-toggle.active span:nth-child(3){
  top:10px;
  transform:rotate(-45deg);
}


/* ============================================================
   RESPONSIVE HEADER & NAV (MOBILE)
============================================================ */
@media(max-width:820px){
  .header{
    gap:10px;
    padding-inline:14px;
  }

  .header__title{
    font-size:1.4rem;
    letter-spacing:.18em;
  }

  .header__title:hover{
    transform:scale(1.03);
    text-shadow:0 0 12px rgba(255,170,220,.7),
                 0 0 26px rgba(255,150,255,.5);
  }

  .header__nav{
    position:absolute;
    right:14px;
    top:64px;
    flex-direction:column;
    align-items:stretch;
    padding:12px 48px;
    border-radius:18px;
    background:var(--glass-light);
    backdrop-filter:blur(12px);
    border:1px solid var(--border-glass-light);
    box-shadow:var(--shadow-soft);
    gap:10px;
    opacity:0;
    transform:translateY(-10px) scale(.98);
    pointer-events:none;
  }

  .header__nav.show{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
    transition:opacity .25s,transform .25s;
  }

  .header__nav-link{
    justify-content:flex-start;
    min-width:150px;
  }
}


/* ============================================================
   THEME TOGGLE – BASE (SE SILNÝM NEONEM)
============================================================ */
.theme-toggle{
  display:flex;
  align-items:center;
  border-radius:999px;
  cursor:pointer;
  background:transparent;
  box-shadow:0 0 16px rgba(0,0,0,.35);
  transition:background .35s, box-shadow .35s, transform .35s;
  border:none;
  padding:0;
}

.theme-toggle__switch{
  width:100%;
  height:100%;
  padding:4px;
  border-radius:inherit;
  position:relative;
  display:flex;
  align-items:center;
  background:var(--switch-bg);
}

.theme-toggle__thumb{
  width:28px;
  height:28px;
  border-radius:50%;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--thumb-bg);
  box-shadow:var(--thumb-glow);
  transition:transform .3s,background .3s,box-shadow .3s;
}

/* základní stav ikon */
.theme-toggle__icon{
  width:20px;
  height:20px;
  display:none;
  transition:transform .25s, opacity .25s;
}

/* thumb pozice – víc ke krajům */
html.theme-light .theme-toggle__thumb{
  left:2px;
  right:auto;
}
html.theme-dark .theme-toggle__thumb{
  right:2px;
  left:auto;
}

/* ============================================================
   LIGHT MODE
============================================================ */
html.theme-light .theme-toggle__switch{
  --switch-bg:#ffe4f9;
  --thumb-bg:#ffffff;
  --thumb-glow:
    0 0 10px rgba(255,0,140,.35),
    0 0 18px rgba(255,0,200,.3);
}

/* viditelné sluníčko, měsíc schovaný */
html.theme-light .theme-toggle__icon--sun{
  display:block;
}
html.theme-light .theme-toggle__icon--moon{
  display:none;
}

/* neon aura za přepínačem */
html.theme-light .theme-toggle.theme-toggle--desktop,
html.theme-light .theme-toggle.theme-toggle--mobile{
  box-shadow:
    0 0 20px rgba(255,0,140,.30),
    0 0 40px rgba(255,160,220,.25);
}

/* ============================================================
   DARK MODE
============================================================ */
html.theme-dark .theme-toggle__switch{
  --switch-bg:#1b0023;
  --thumb-bg:#ff00ff;
  --thumb-glow:
    0 0 14px rgba(255,0,255,.6),
    0 0 28px rgba(255,0,255,.4);
}

/* viditelný měsíc, sun schovaný */
html.theme-dark .theme-toggle__icon--moon{
  display:block;
  transform:translateY(-1px);
}
html.theme-dark .theme-toggle__icon--sun{
  display:none;
}

/* aura přepínače v dark režimu */
html.theme-dark .theme-toggle.theme-toggle--desktop,
html.theme-dark .theme-toggle.theme-toggle--mobile{
  box-shadow:
    0 0 24px rgba(229,0,106,.35),
    0 0 45px rgba(120,0,180,.30);
}

/* ============================================================
   SVG OVERRIDES – přebijeme inline fill/stroke
============================================================ */

/* SUN – růžová kontura, žádná výplň */
html.theme-light .theme-toggle__icon--sun,
html.theme-light .theme-toggle__icon--sun *{
  stroke:#ff56c1 !important;
  fill:none !important;
  stroke-width:1.8 !important;
}

/* MOON – čistě bílá kontura */
html.theme-dark .theme-toggle__icon--moon,
html.theme-dark .theme-toggle__icon--moon *{
  stroke:#ffffff !important;
  fill:none !important;
  stroke-width:1.8 !important;
}

/* ============================================================
   ANIMACE – mírný bounce při přepnutí
============================================================ */
@keyframes toggle-bounce{
  0%{transform:translateY(-50%) scale(1);}
  50%{transform:translateY(-50%) scale(1.2);}
  100%{transform:translateY(-50%) scale(1);}
}

.bounce{
  animation:toggle-bounce .3s ease;
}

/* ============================================================
   DESKTOP VARIANTA
============================================================ */
.theme-toggle.theme-toggle--desktop{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:62px;
  height:34px;
  padding:4px;
}

/* ============================================================
   MOBILE VARIANTA
============================================================ */
.header__mobile-theme-row{
  width:100%;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.header__mobile-theme-label{
  font-size:1.1rem;
  font-weight:600;
}

.theme-toggle.theme-toggle--mobile{
  position:relative;
  margin-left:22px;
  width:54px;
  height:30px;
  padding:3px;
}

@media(max-width:1100px){
  .theme-toggle.theme-toggle--desktop{display:none;}
}

@media(min-width:1101px){
  .theme-toggle.theme-toggle--mobile{display:none;}
}

/* ============================================================
   HOMEPAGE WIDGET
============================================================ */
.home-widget{
  max-width:960px;
  margin:24px auto 18px;
  padding:18px;
  border-radius:20px;
  background-color: var(--glass-light);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(12px);
}

.home-widget__title{
  margin:0 0 12px;
  font-size:1.4rem;
  color:var(--brand-strong);
}

.home-widget__gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  gap:10px;
}

.home-widget__photo{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.65);
  box-shadow:0 0 14px rgba(229,0,106,.35);
  transition:transform .25s,box-shadow .25s,filter .25s;
}

.home-widget__photo:hover,
.home-widget__photo--hovered{
  transform:translateY(-4px) scale(1.06);
  filter:brightness(1.12) saturate(1.18);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 0 20px rgba(229,0,106,.55),
             0 0 40px rgba(255,150,255,.45),
             0 8px 18px rgba(0,0,0,.35);
}

/* HOME WIDGET – na mobilech vždy min. 3 fotky v řadě */
@media (max-width: 820px) {
  .home-widget__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}

/* ============================================================
   INFO BOX
============================================================ */
.info-banner{
  max-width:960px;
  margin:28px auto 10px;
  padding:18px;
  text-align:center;
  font-weight:700;
  font-size:1.3rem;
  color:var(--brand-strong);
  background:linear-gradient(135deg,rgba(255,230,248,.95),rgba(255,245,255,.9));
  border-radius:22px;
  box-shadow:0 0 24px rgba(255,182,212,.8),
             0 0 40px rgba(255,150,255,.5);
}

html.theme-dark .info-banner{
  color:#ffe7ff;
  background:radial-gradient(circle at top,rgba(80,0,110,.9),rgba(10,0,18,.95));
  border:1px solid rgba(255,170,255,.5);
  box-shadow:0 0 26px rgba(255,0,255,.5),
             0 0 50px rgba(120,0,170,.8);
}


/* ============================================================
   ABOUT PAGE – TIMELINE (match s home-widget)
============================================================ */

.about {
  max-width: 960px;
  margin: 28px auto 40px;
  padding: 22px 24px 26px;
  border-radius: 20px;

  /* stejný základ jako .home-widget */
  background-color: var(--glass-light);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.about__title {
  margin: 0 0 10px;
  font-size: 1.8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-strong);
}

.about__lead {
  margin: 0 0 20px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--brand-strong);
  text-shadow:
    0 0 10px rgba(255,120,200,.55),
    0 0 16px rgba(255,0,140,.45);
}

/* timeline kontejner */
.about__content {
  position: relative;
  margin-top: 6px;
  padding-left: 44px;              /* místo pro linku + bubliny */
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: about;
}

/* vertikální linka – zarovnaná na střed bublin */
.about__content::before {
  content: "";
  position: absolute;
  left: 25px;                      /* dřív 18px – teď sedí na střed 01/02/03 */
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(255,0,180,.85),
    rgba(255,150,255,.45),
    rgba(120,0,255,.6)
  );
  box-shadow:
    0 0 10px rgba(255,0,200,.5),
    0 0 18px rgba(120,0,255,.35);  /* jemnější než předtím */
}

/* jednotlivé fakty */
.about__content p {
  position: relative;
  margin: 0;
  padding: 10px 16px 10px 18px;
  border-radius: 18px;
  font-size: 1rem;
  font-weight: 500;
}

/* světlej režim – jen lehký glow (trochu jemnější než fotky) */
html.theme-light .about__content p {
  color: var(--nav-light);
  background: rgba(255,255,255,.96);
  box-shadow:
    0 0 14px rgba(229,0,106,.25);
}

/* dark mode – taky stažený neon */
html.theme-dark .about__content p {
  color: #ffe7ff;
  background: radial-gradient(
    circle at top,
    rgba(80,0,110,.96),
    rgba(10,0,18,.97)
  );
  border: 1px solid rgba(255,170,255,.35);
  box-shadow:
    0 0 16px rgba(255,0,255,.35),
    0 0 30px rgba(120,0,170,.45);
}

/* očíslované bubliny 01 / 02 / 03… */
.about__content p::before {
  counter-increment: about;
  content: "0" counter(about);
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .05em;

  background: radial-gradient(circle at top, #ff4bd1, #ff0080);
  box-shadow:
    0 0 10px rgba(255,60,200,.8),
    0 0 22px rgba(255,0,160,.8);
}

/* mobil – lehké doladění zarovnání */
@media (max-width: 640px) {
  .about {
    margin: 22px auto 32px;
    padding: 18px 16px 22px;
  }

  .about__title {
    font-size: 1.6rem;
  }

  .about__lead {
    font-size: 1.2rem;
  }

  .about__content {
    padding-left: 38px;
    gap: 10px;
  }

  .about__content::before {
    left: 22px;
  }

  .about__content p {
    font-size: .98rem;
    padding: 9px 12px 9px 16px;
  }

  .about__content p::before {
    left: -30px;
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }
}


/* ============================================================
   GALLERY GRID & IMAGES
============================================================ */
.gallery{
  max-width:1280px;
  margin:14px auto 40px;
  text-align:center;
}

.gallery__title{
  margin:6px 0 12px;
  font-size:1.6rem;
  color:var(--brand-strong);
  transition: opacity .25s ease, transform .25s ease;
}

.gallery__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  width:100%;
}

@media(max-width:820px){
  .gallery__grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px;
  }
}

.gallery__item{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}

.gallery__item--shimmer::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.3) 50%,
    rgba(255,255,255,.05) 100%);
  background-size:200% 100%;
  animation:shimmerMove 1.2s linear infinite;
  z-index:1;
}

@keyframes shimmerMove{
  0%{background-position:180% 0;}
  100%{background-position:-180% 0;}
}

.gallery__image{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  opacity:0;
  transform:scale(1.02);
  filter:blur(5px);
  transition:opacity .55s,transform .55s,filter .55s;
}

.gallery__image.loaded{
  opacity:1;
  transform:scale(1);
  filter:blur(0);
}

.gallery__image.loaded:hover{
  transform:scale(1.05);
  filter:brightness(1.1) saturate(1.12);
  box-shadow:0 0 18px rgba(229,0,106,.35),
             0 0 32px rgba(255,150,255,.3),
             0 6px 14px rgba(0,0,0,.25);
  transition:.3s;
}

.gallery__lazy{
  opacity:0;
  transform:scale(.97);
  transition:opacity .45s,transform .45s;
}

.gallery__lazy.loaded{
  opacity:1;
  transform:scale(1);
}

/* ========================================
   GLOBAL LAYOUT & SCROLL
======================================== */
html, body {
  height: 100%;
  margin: 0;
  overflow-y: auto;
}

/* na desktopu nechceme systémový scrollbar – scrolluje jen galerie */
@media (min-width: 1101px) {
  html, body {
    overflow-y: hidden;
  }
}

/* Kontejner celé stránky */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ========================================
   GALERIE — jediný scroll (desktop) + glow
======================================== */

.page__gallery-wrapper {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;

  /* výška pro desktop (header + mezera) */
  height: calc(100vh - 180px);
  max-height: calc(100vh - 180px);

  /* schování scrollbaru */
  scrollbar-width: none;
}
.page__gallery-wrapper::-webkit-scrollbar {
  display: none;
}

/* Na mobilu NE vnitřní scroll – scrolluje window */
@media (max-width: 1100px) {
  .page__gallery-wrapper {
    height: auto;
    max-height: none;
    overflow-y: visible;
  }
}

/* ========================================
   iOS overscroll glow
======================================== */
.page__gallery-wrapper::before,
.page__gallery-wrapper::after {
    content:"";
    position: sticky;
    left:0;
    right:0;
    height:55px;
    z-index:50;
    pointer-events:none;

    opacity:0;
    transition: opacity .12s ease-out;
}

/* Glow top */
.page__gallery-wrapper::before {
    top:0;
    background:radial-gradient(
        ellipse at top,
        rgba(255,0,200,0.55),
        rgba(255,0,200,0.25),
        rgba(255,0,200,0)
    );
    filter:blur(14px);
}

/* Glow bottom */
.page__gallery-wrapper::after {
    bottom:0;
    background:radial-gradient(
        ellipse at bottom,
        rgba(255,0,200,0.55),
        rgba(255,0,200,0.25),
        rgba(255,0,200,0)
    );
    filter:blur(14px);
}

.page__gallery-wrapper.page__gallery-wrapper--overscroll-top::before {
    opacity:1;
}
.page__gallery-wrapper.page__gallery-wrapper--overscroll-bottom::after {
    opacity:1;
}

/* ============================================================
   HEADER SHRINK – STAV header-small
============================================================ */

.header.header--small {
  height: var(--header-min); /* 38px podle tvých proměnných */
}

/* nápis BOREL menší */
.header.header--small .header__title {
  font-size: 1.4rem;
  opacity: 0.9;
}

/* MOBIL: zmenšit hamburger */
@media (max-width: 1100px) {
  .header.header--small .header__menu-toggle {
    transform: scale(0.8);
    transform-origin: left center;
  }
}

/* DESKTOP: zmenšit NAV + toggle */
@media (min-width: 1101px) {
  .header.header--small .header__nav.header__nav--desktop {
    transform: scale(0.85);
    transform-origin: right center;
  }

  .header.header--small .theme-toggle.theme-toggle--desktop {
    transform: translateY(-50%) scale(0.8);
  }
}

/* ============================================================
   LIGHTBOX (s SVG ikonami)
============================================================ */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(4px);
  overflow:hidden;
  z-index:9999;
}

.lightbox.lightbox--show{
  display:flex;
}

.lightbox__image{
  max-width:min(92vw,1200px);
  max-height:80vh;
  border-radius:18px;
  object-fit:contain;
  box-shadow:
    0 0 30px rgba(229,0,106,.9),
    0 0 60px rgba(120,0,180,.8);
  opacity:0;
  transition:opacity .35s,transform .35s;
}

.lightbox__image.loaded{
  opacity:1;
}

/* animace při přechodu snímků (pokud používáš) */
.is-exiting-left{opacity:0;transform:translateX(-40px);}
.is-exiting-right{opacity:0;transform:translateX(40px);}
.is-entering-left{animation:slideInLeft .35s forwards;}
.is-entering-right{animation:slideInRight .35s forwards;}

@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-40px);}
  to  {opacity:1;transform:translateX(0);}
}

@keyframes slideInRight{
  from{opacity:0;transform:translateX(40px);}
  to  {opacity:1;transform:translateX(0);}
}

/* zavírací tlačítko – pro SVG */
.lightbox__close{
  position:fixed;
  top:22px;
  right:22px;
  width:44px;
  height:44px;
  padding:0;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,.55);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s,background .25s,box-shadow .25s;
}

.lightbox__close-icon{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* wrapper pro šipky */
.lightbox__nav{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:30px;
  pointer-events:none;
}

/* tlačítka šipek – SVG verze */
.lightbox__nav-button{
  pointer-events:auto;
  width:56px;
  height:56px;
  padding:0;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,.55);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 18px rgba(0,0,0,.7);
  transition:transform .25s,background .25s,box-shadow .25s;
}

/* kontejner pro šipky */
.lightbox__arrow-icon{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* samotné SVG z injectAllIcons */
.lightbox__close-icon svg,
.lightbox__arrow-icon svg{
  width:22px;
  height:22px;
  display:block;
  pointer-events:none;        /* aby kliky šly na button, ne na svg */
  stroke:#ffffff;
  fill:none;
}

/* levá šipka se otočí z jednoho arrow.svg */
.icon--arrow-left{
  transform:scaleX(-1);
}

/* hover efekty */
.lightbox__close:hover,
.lightbox__nav-button:hover{
  background:var(--brand-strong);
  transform:scale(1.1);
  box-shadow:
    0 0 14px rgba(255,0,200,.45),
    0 0 30px rgba(255,100,255,.3);
}

/* čítač snímků */
.lightbox__counter{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  padding:6px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:.9rem;
}

/* na mobilu schovat šipky i křížek */
@media(max-width:820px){
  .lightbox__nav,
  .lightbox__nav-button,
  .lightbox__close{
    display:none !important;
    pointer-events:none !important;
    visibility:hidden !important;
    opacity:0 !important;
  }
}

/* ============================================================
   GAME STYLES
============================================================ */
.game{
  width:90vw;
  max-width:420px;
  height:600px;
  margin:40px auto;
  background:linear-gradient(#ffe6f0,#fff0fa);
  border-radius:16px;
  border:2px solid rgba(255,182,212,.7);
  box-shadow:
    0 0 25px rgba(229,0,106,.4),
    0 0 50px rgba(255,182,212,.3),
    inset 0 0 20px rgba(255,255,255,.25);
  position:relative;
  overflow:hidden;
  transition:box-shadow .5s,border .5s;
}

.game:hover{
  box-shadow:
    0 0 35px rgba(229,0,106,.6),
    0 0 70px rgba(255,182,212,.45),
    inset 0 0 25px rgba(255,255,255,.3);
  border-color:rgba(229,0,106,.8);
}

html.theme-dark .game{
  background:linear-gradient(#1a0023,#2a0045);
  border:2px solid rgba(255,0,255,.4);
  box-shadow:
    0 0 30px rgba(255,0,255,.35),
    0 0 60px rgba(255,150,255,.25),
    inset 0 0 20px rgba(255,255,255,.08);
}

html.theme-dark .game:hover{
  box-shadow:
    0 0 40px rgba(255,0,255,.6),
    0 0 80px rgba(255,150,255,.35),
    inset 0 0 25px rgba(255,255,255,.1);
  border-color:rgba(255,0,255,.55);
}

canvas{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(#87CEEB,#bde7ff);
}

/* HUD */
.game__hud{
  position:absolute;
  left:12px;
  top:12px;
  padding:6px 10px;
  border-radius:12px;
  font-weight:600;
  color:#e5006a;
  background:rgba(255,255,255,.35);
  backdrop-filter:blur(10px);
}

html.theme-dark .game__hud{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.game__score{top:10px;}
.game__difficulty{top:54px;}

/* Neon puls okolo level pilulky */
@keyframes levelUpPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255,0,200,0);
  }
  40% {
    transform: scale(1.12);
    box-shadow:
      0 0 14px rgba(255,0,200,0.45),
      0 0 28px rgba(255,0,255,0.35),
      0 0 36px rgba(255,0,255,0.22);
  }
  70% {
    transform: scale(1.06);
    box-shadow:
      0 0 8px rgba(255,0,200,0.30),
      0 0 18px rgba(255,0,255,0.18);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255,0,200,0);
  }
}

.game__difficulty--pulse{
  animation:levelUpPulse .45s ease-out;
  border-radius:inherit;
}

/* ============================================================
   GAME BUTTONS (mute / vibrate)
============================================================ */
.game__button{
  position:absolute;
  right:12px;
  width:44px;
  height:44px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  font-weight:600;
  cursor:pointer;
  z-index:50;

  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.35);
  color:#fff;

  box-shadow:
    0 4px 14px rgba(255,182,212,.55),
    inset 0 0 10px rgba(255,255,255,.35);

  backdrop-filter:blur(10px);
  transition:.25s;
}

/* pozice */
.game__button--mute{ top:10px; }
.game__button--vibrate{ top:64px; }

/* hover */
.game__button:hover{
  transform:scale(1.06);
  box-shadow:
    0 8px 22px rgba(255,182,212,.8),
    inset 0 0 12px rgba(255,255,255,.45);
}

/* dark theme */
html.theme-dark .game__button{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  box-shadow:
    0 4px 14px rgba(255,0,255,.25),
    inset 0 0 10px rgba(255,255,255,.08);
}

html.theme-dark .game__button:hover{
  background:rgba(255,255,255,.12);
  box-shadow:
    0 8px 22px rgba(255,0,255,.35),
    inset 0 0 12px rgba(255,255,255,.12);
}

/* ============================================================
   IKONY UVNITŘ BUTTONŮ (SVG přes data-icon)
============================================================ */
.game__icon{
  position:absolute;
  width:22px;
  height:22px;
  pointer-events:none;
  display:none;          /* základ – vše skryté */
}

/* defaultně je ON varianta vidět */
.game__icon--sound-on,
.game__icon--vib-on{
  display:block;
}

/* samotné SVG */
.game__icon svg{
  width:22px;
  height:22px;
  display:block;
  stroke:currentColor;
  fill:none;
  transition:transform .25s,opacity .25s;
}

.game__button:hover .game__icon svg{
  transform:scale(1.1);
}

/* mobil-only tlačítko vibrací */
.game__mobile-only{
  display:none;
}

@media (max-width:820px){
  .game__mobile-only{
    display:flex;
  }
}

/* ============================================================
   START MESSAGE
============================================================ */
.game__center-message{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:14px 22px;
  border-radius:16px;
  background:rgba(255,255,255,.35);
  color:#e5006a;
  font-weight:600;
  text-align:center;
  pointer-events:none;
  backdrop-filter:blur(12px);
}

html.theme-dark .game__center-message{
  background:rgba(255,255,255,.12);
  color:#fff;
}


/* ============================================================
   FOOTER
============================================================ */
.footer{
  flex-shrink:0;
  width:100%;
  margin-top:auto;
  padding:10px 5vw 14px;
  text-align:center;
  font-size:.9rem;
  font-weight:600;
  background-color: var(--glass-light);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border-glass-light);
  box-shadow:0 -8px 18px rgba(0,0,0,.25);
  color:var(--text-soft);
}

.footer a{
  color:var(--brand-strong);
  text-decoration:none;
}

.footer a:hover{text-decoration:underline;}