/* ============================================================
   Vlastní písma (self-hosted, latin + latin-ext / čeština).
   Žádný third-party, funguje offline, v souladu s přísnou CSP
   (font-src dědí default-src 'self'). Fraunces = displejový serif
   (starý atlas), Archivo = UI grotesk (magazín), IBM Plex Mono =
   „přístrojové" číslice (observatoř).
   ============================================================ */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("/fonts/fraunces-latin-wght-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("/fonts/fraunces-latin-ext-wght-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/archivo-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/archivo-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ============================================================
   Atlas Moderne — „starý atlas v moderním pojetí magazínu,
   připravený observatoří". Minimalismus; hvězdou obrazovky je
   skutečný OBRYS státu (rychle rozpoznat a zapamatovat).
   Vše jede přes CSS proměnné → světlý (papír) i tmavý
   (observatoř) režim sdílí stejnou kostru.    (§4.2)
   ============================================================ */

/* ---- Světlý režim: papírový atlas / magazín (výchozí) ---- */
:root{
  color-scheme:light;       /* sjednotí scrollbary, overscroll i nativní prvky */
  --bg:#F0E9D8;            /* teplý papír (pozadí) */
  --panel:#FBF7EC;         /* světlejší papír karet */
  --line:#DBD1B9;          /* vlasová linka (rámečky, oddělovače) */
  --line-strong:#C7B997;
  --text:#1C1A14;          /* tmavá sépiová čerň */
  --text2:#6F6753;         /* tlumený sépiový text */
  --accent:#15616D;        /* kartografická inkoustová modrozelená */
  --accent-2:#0E454E;
  --accent-soft:#DCE7E5;
  --land:#DDD3BD;          /* pevnina (neaktivní stát) */
  --land-border:#B6A983;   /* rytá vlasová hranice → čitelný obrys */
  --hover:#CBBE9F;
  --water:#E4ECEB;         /* chladná voda → teplá pevnina vynikne */
  --correct:#2F8F5B;  --correct-line:#1C6B41;
  --wrong:#D6402C;    --wrong-line:#9E2A1C;
  --reveal:#C58A2B;   --reveal-line:#8F5F16;   /* mosaz = atlasový highlight */
  --shadow:0 16px 40px -30px rgba(40,32,10,.45);
  --shadow-sm:0 1px 2px rgba(40,32,10,.05);
  --radius:13px;
  --radius-sm:9px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-ui:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
  /* kolik svislého místa zaberou hlavička appky + zadání + lišty kolem mapy */
  --map-reserved:calc(100vh - 270px);
}

/* ---- Tmavý režim: observatoř (půlnoc + svítící obrysy) ---- */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A1120;
  --panel:#121C30;
  --line:#21314C;
  --line-strong:#2E4366;
  --text:#E9EEF7;
  --text2:#8C9AB4;
  --accent:#4FD1E0;
  --accent-2:#86E5F0;
  --accent-soft:#10324A;
  --land:#1D2A42;
  --land-border:#36507A;   /* svítivější hranice → obrys čitelný i ve tmě */
  --hover:#2A3E63;
  --water:#060B16;
  --correct:#3FD18B;  --correct-line:#A6F2CE;
  --wrong:#FF6A57;    --wrong-line:#FFB3A7;
  --reveal:#F2B24A;   --reveal-line:#FFD891;
  --shadow:0 24px 60px -34px rgba(0,0,0,.8);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* kořenové plátno musí mít tmavé pozadí — jinak při delším obsahu / overscrollu
   prosvítá bílé <html> zpod body. --bg je na :root i [data-theme] (= <html>). */
html{background:var(--bg);}
html,body{margin:0;padding:0;min-height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:16px;line-height:1.5;
  transition:background .35s ease,color .35s ease;
  overflow-x:hidden;position:relative;
  /* atmosféra: světelné kaluže + jemná vinětace papíru */
  background-image:
    radial-gradient(1000px 520px at 86% -10%, rgba(21,97,109,.10), transparent 62%),
    radial-gradient(820px 520px at -12% 112%, rgba(197,138,43,.13), transparent 60%),
    radial-gradient(140% 120% at 50% -8%, transparent 56%, rgba(58,46,18,.10));
  background-attachment:fixed;
}
/* jemná kartografická síť (graticule) — papírová textura, mizí k okrajům */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(120,102,60,.07) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(90deg, rgba(120,102,60,.07) 0 1px, transparent 1px 52px);
  -webkit-mask-image:radial-gradient(130% 95% at 50% 20%, #000 44%, transparent 100%);
          mask-image:radial-gradient(130% 95% at 50% 20%, #000 44%, transparent 100%);
}
/* jemné papírové zrno (data-uri SVG → povoleno CSP img-src 'self' data:) */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before{
  background-image:
    repeating-linear-gradient(0deg, rgba(120,150,200,.06) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(90deg, rgba(120,150,200,.06) 0 1px, transparent 1px 52px);
}
[data-theme="dark"] body::after{opacity:.3;mix-blend-mode:screen;}
/* tmavý režim = jemné hvězdné pole observatoře */
[data-theme="dark"] body{
  background-image:
    radial-gradient(1px 1px at 25% 30%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 75% 65%, rgba(170,220,255,.7), transparent 60%),
    radial-gradient(1px 1px at 55% 48%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(700px 420px at 82% -8%, rgba(79,209,224,.12), transparent 60%);
  background-size:240px 240px,320px 320px,180px 180px,100% 100%;
  background-attachment:fixed;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
h1,h2,h3{margin:0 0 .4em;font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.06;}
.muted{color:var(--text2);}
/* vestavěné SVG ikonky (icons.js) — dědí barvu z textu (currentColor), škálují s písmem */
.ico{display:inline-flex;align-items:center;justify-content:center;}
.ico-svg{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.18em;flex:none;}
/* „přístrojové" číselné hodnoty (observatoř) */
.stat .v,.sumcard .v,.history-row .acc,#q-progress{font-family:var(--font-mono);font-feature-settings:"tnum" 1;font-weight:600;}

/* ---- Kostra appky ---- */
.app{max-width:1180px;margin:0 auto;padding:22px 20px 56px;min-height:100%;}

/* ---- Horní lišta ---- */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;}
.brand .logo{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent);color:#FBF7EC;font-size:19px;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.06);
}
[data-theme="dark"] .brand .logo{color:#0A1120;box-shadow:0 0 14px rgba(79,209,224,.45);border-color:transparent;}
.topbar .spacer{flex:1;}
.chip-btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  background:transparent;border:1px solid var(--line);font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.02em;color:var(--text2);
  transition:transform .12s ease,color .2s,border-color .2s,background .2s;
}
.chip-btn:hover{transform:translateY(-1px);color:var(--text);border-color:var(--line-strong);}
.chip-btn.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}

/* ---- Obrazovky ---- */
.screen{display:none;}
.screen.active{display:block;animation:fade .4s ease both;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* postupné nabíhání prvků menu (staggered reveal) */
#screen-menu.active > *{animation:rise .5s ease both;}
#screen-menu.active > *:nth-child(1){animation-delay:.03s;}
#screen-menu.active > *:nth-child(2){animation-delay:.09s;}
#screen-menu.active > *:nth-child(3){animation-delay:.15s;}
#screen-menu.active > *:nth-child(4){animation-delay:.21s;}
#screen-menu.active > *:nth-child(5){animation-delay:.27s;}
#screen-menu.active > *:nth-child(6){animation-delay:.33s;}
#screen-menu.active > *:nth-child(7){animation-delay:.39s;}
#screen-menu.active > *:nth-child(8){animation-delay:.45s;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-delay:0s!important;}}

/* ---- Karty / panely ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;}

/* ---- Menu ---- */
/* editorial masthead — velký serif zarovnaný vlevo (magazín) */
.hero{text-align:left;margin:38px 0 20px;max-width:820px;position:relative;}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--reveal);}
.hero h1{font-size:clamp(2.7rem,7.2vw,5.2rem);font-weight:600;letter-spacing:-.03em;line-height:.96;font-optical-sizing:auto;}
.hero p{color:var(--text2);max-width:540px;margin:20px 0 0;font-size:1.07rem;}
/* magazínová „dateline" pod heroem */
.hero::after{content:"";display:block;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent);margin-top:28px;}
.section-label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text2);margin:32px 0 13px;display:flex;align-items:center;gap:12px;}
.section-label::before{content:"";width:7px;height:7px;background:var(--reveal);transform:rotate(45deg);flex:none;}
.section-label::after{content:"";flex:1;height:1px;background:var(--line);}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.tile{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 14px 15px;text-align:center;box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden;
  transition:transform .14s ease,border-color .2s,box-shadow .2s,background .2s;
}
/* mosazný horní proužek (atlasový plát) — zesílí při výběru */
.tile::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--reveal);opacity:0;transition:opacity .2s;}
.tile:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow);}
.tile:hover::before{opacity:.5;}
.tile.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent);}
.tile.selected::before{opacity:1;background:var(--accent);}
.tile .emoji{font-size:25px;display:grid;place-items:center;width:50px;height:50px;margin:0 auto 10px;border-radius:50%;background:var(--bg);border:1px solid var(--line);filter:saturate(.92);}
.tile.selected .emoji{background:#fff;border-color:var(--accent);}
/* skutečná silueta kontinentu místo emoji — hvězda je OBRYS */
.tile .tile-shape{display:block;width:80px;height:52px;margin:2px auto 11px;overflow:visible;}
.tile .tile-shape path{fill:var(--land-border);stroke:var(--text);stroke-width:.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .2s ease,stroke .2s ease;}
.tile:hover .tile-shape path{fill:var(--hover);}
.tile.selected .tile-shape path{fill:var(--accent);stroke:var(--accent-2);}
[data-theme="dark"] .tile .tile-shape path{fill:var(--land);stroke:var(--land-border);}
[data-theme="dark"] .tile.selected .tile-shape path{fill:var(--accent);stroke:var(--accent-2);}
.tile .name{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.15;}
.tile .sub{display:block;font-family:var(--font-mono);font-size:.66rem;color:var(--text2);margin-top:5px;letter-spacing:.02em;}
.segmented{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--shadow-sm);flex-wrap:wrap;gap:2px;}
.segmented button{padding:9px 16px;border-radius:999px;font-family:var(--font-ui);font-weight:600;font-size:.9rem;color:var(--text2);transition:.18s;}
.segmented button:hover{color:var(--text);}
.segmented button.active{background:var(--accent);color:#FBF7EC;}
[data-theme="dark"] .segmented button.active{color:#0A1120;}
#subregion-row{max-width:100%;}
.sub-count{display:inline-block;min-width:18px;padding:0 5px;margin-left:3px;border-radius:999px;background:var(--line);font-family:var(--font-mono);font-size:.66rem;font-weight:600;vertical-align:middle;color:var(--text2);}
.segmented button.active .sub-count{background:rgba(255,255,255,.3);color:inherit;}
.diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.diff{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);transition:.16s;text-align:left;cursor:pointer;}
.diff:hover{transform:translateY(-2px);border-color:var(--line-strong);}
.diff.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent);}
.diff .t{font-family:var(--font-display);font-weight:600;font-size:1.12rem;display:flex;align-items:center;gap:8px;}
.diff .d{font-size:.84rem;color:var(--text2);margin-top:5px;line-height:1.4;}
.cta{
  display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#FBF7EC;font-family:var(--font-ui);font-weight:700;font-size:1.04rem;letter-spacing:.01em;
  padding:15px 32px;border-radius:12px;box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .2s,background .2s;
}
[data-theme="dark"] .cta{color:#0A1120;box-shadow:0 0 18px rgba(79,209,224,.35);}
.cta:hover{transform:translateY(-2px);background:var(--accent-2);}
.cta:active{transform:translateY(0);}
.cta:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
.menu-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px;}
.link-btn{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;}
.link-btn:hover{border-bottom-color:var(--accent);}

/* datově řízený přehled v úvodu — „přístrojový" panel (observatoř) */
.menu-stats{display:inline-flex;flex-wrap:wrap;margin:2px 0 4px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-sm);overflow:hidden;max-width:100%;}
.menu-stats .fig{display:flex;flex-direction:column;gap:4px;padding:12px 22px;min-width:84px;}
.menu-stats .fig + .fig{border-left:1px solid var(--line);}
.menu-stats .fig .n{font-family:var(--font-mono);font-weight:600;font-size:1.5rem;line-height:1;color:var(--text);font-feature-settings:"tnum" 1;}
.menu-stats .fig .l{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text2);}
[data-theme="dark"] .menu-stats .fig .n{color:var(--accent);}

/* ---- Hra ---- */
.game-head{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.prompt-card{
  flex:1 1 320px;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:14px 18px 14px 22px;display:flex;align-items:center;gap:16px;min-height:80px;overflow:hidden;
}
.prompt-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);}
.prompt-card .find{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);}
.prompt-main{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.3rem);font-weight:600;line-height:1.02;letter-spacing:-.02em;font-optical-sizing:auto;}
.prompt-native{color:var(--text2);font-family:var(--font-display);font-style:italic;font-size:1.04rem;margin-top:2px;}
.stats-strip{display:flex;gap:8px;flex-wrap:wrap;}
.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-sm);padding:9px 14px;min-width:72px;text-align:center;
}
.stat .v{font-size:1.3rem;line-height:1;}
.stat .l{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);margin-top:5px;}
.stat.streak.hot{border-color:var(--reveal);}
.stat.streak.hot .v{color:var(--reveal);}
.progress{height:6px;background:var(--land);border-radius:999px;overflow:hidden;margin:2px 0 14px;}
.progress > i{display:block;height:100%;background:var(--accent);width:0;transition:width .4s ease;border-radius:999px;}
[data-theme="dark"] .progress > i{box-shadow:0 0 10px rgba(79,209,224,.6);}

/* Rámeček MÁ poměr stran aktuálního regionu (--map-aspect, nastavuje fitViewBox)
   a je co největší: plná šířka, nebo (dostupná výška × poměr). Mapa ho pak vyplní
   beze zbytku — žádný umělý „vodní" letterbox. */
.map-wrap{position:relative;background:var(--water);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;aspect-ratio:var(--map-aspect,1.5625);width:min(100%,calc(var(--map-reserved) * var(--map-aspect,1.5625)));margin-inline:auto;}
/* kartografické rohové značky (jemný atlasový detail) */
.map-wrap::before,.map-wrap::after{content:"";position:absolute;width:15px;height:15px;border:1.5px solid var(--line-strong);opacity:.55;pointer-events:none;z-index:1;}
.map-wrap::before{left:10px;top:10px;border-right:none;border-bottom:none;}
.map-wrap::after{right:10px;bottom:10px;border-left:none;border-top:none;}
/* Mapa se vždy vejde na viditelnou plochu (výška = výřez okna minus hlavička/lišty)
   a zůstává vycentrovaná i se zachovaným poměrem stran — hned se dá hrát. */
#map{display:block;width:100%;height:100%;touch-action:none;}
.country{fill:var(--land);stroke:var(--land-border);stroke-width:.5px;stroke-linejoin:round;transition:fill .18s ease,stroke-width .18s ease;cursor:pointer;}
.country:hover{fill:var(--hover);}
[data-theme="dark"] .country:hover{filter:drop-shadow(0 0 6px rgba(79,209,224,.5));}
/* zpětná vazba: zvýrazni i OBRYS (silnější tah) — hráč si pamatuje tvar */
.country.correct{fill:var(--correct)!important;stroke:var(--correct-line)!important;stroke-width:1.7px!important;}
.country.wrong{fill:var(--wrong)!important;stroke:var(--wrong-line)!important;stroke-width:1.5px!important;}
.country.reveal{fill:var(--reveal)!important;stroke:var(--reveal-line)!important;stroke-width:2px!important;animation:revealPulse .5s ease;}
[data-theme="dark"] .country.correct{filter:drop-shadow(0 0 8px rgba(63,209,139,.55));}
[data-theme="dark"] .country.reveal{filter:drop-shadow(0 0 9px rgba(242,178,74,.6));}
@keyframes revealPulse{0%{opacity:.4;}100%{opacity:1;}}
.country.hint{animation:hintPulse 1s ease 2;}
@keyframes hintPulse{0%,100%{fill:var(--land);}50%{fill:var(--accent);}}
.marker{fill:var(--land);stroke:var(--land-border);stroke-width:1px;cursor:pointer;transition:fill .18s,r .15s;}
.marker:hover{fill:var(--hover);}
.marker.correct{fill:var(--correct)!important;stroke:var(--correct-line)!important;}
.marker.wrong{fill:var(--wrong)!important;stroke:var(--wrong-line)!important;}
.marker.reveal{fill:var(--reveal)!important;stroke:var(--reveal-line)!important;}
/* vlasová spojnice od pravého těžiště k posunutému markeru (declutter) */
.marker-leader{stroke:var(--text2);stroke-width:.8;vector-effect:non-scaling-stroke;opacity:.4;pointer-events:none;stroke-linecap:round;}
.hit{fill:transparent;cursor:pointer;}

/* ---- Režim Česko: kraje + značky měst ---- */
.cz-intro{max-width:560px;margin:-2px 0 4px;}
.kraj{fill:var(--land);stroke:var(--land-border);stroke-width:1px;stroke-linejoin:round;transition:fill .18s ease;}
.kraj.clickable{cursor:pointer;}
.kraj.clickable:hover{fill:var(--hover);}
.kraj.correct{fill:var(--correct)!important;stroke:var(--correct-line)!important;stroke-width:1.7px!important;}
.kraj.wrong{fill:var(--wrong)!important;stroke:var(--wrong-line)!important;stroke-width:1.5px!important;}
.kraj.reveal{fill:var(--reveal)!important;stroke:var(--reveal-line)!important;stroke-width:2px!important;animation:revealPulse .5s ease;}
#map.precise{cursor:crosshair;}
.cz-truth{fill:var(--reveal);stroke:var(--panel);stroke-width:2;}
.cz-truth-label{font-family:var(--font-mono);font-size:13px;font-weight:600;fill:var(--text);paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round;}
.cz-click{stroke:var(--panel);stroke-width:1.5;}
.cz-click.ok{fill:var(--correct);}
.cz-click.bad{fill:var(--wrong);}
.cz-line{stroke-width:2;stroke-dasharray:4 3;fill:none;}
.cz-line.ok{stroke:var(--correct-line);}
.cz-line.bad{stroke:var(--wrong-line);}

.map-toolbar{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:2;}
.map-toolbar button{width:36px;height:36px;border-radius:9px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--text2);display:grid;place-items:center;transition:.15s;}
.map-toolbar button:hover{color:var(--accent);border-color:var(--accent);}
.feedback-toast{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(8px);z-index:2;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:11px;padding:10px 18px;
  font-family:var(--font-display);font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90%;text-align:center;
}
.feedback-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.feedback-toast.ok{color:var(--correct);}
.feedback-toast.bad{color:var(--wrong);}
.feedback-toast .rev{display:block;font-family:var(--font-ui);font-weight:500;color:var(--text2);font-style:italic;font-size:.88rem;margin-top:2px;}
.game-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px;flex-wrap:wrap;}
#continent-label{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;}

/* ---- Výsledky / Statistiky ---- */
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin:8px 0 22px;}
.sumcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px 14px;text-align:center;}
.sumcard .v{font-size:1.9rem;line-height:1;}
.sumcard .l{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text2);margin-top:7px;}
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
.chart-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px;}
.chart-box h3{font-family:var(--font-display);font-weight:600;font-size:1.06rem;margin-bottom:12px;}
.chart-box canvas{max-height:240px;}
.mistakes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.mistake-pill{background:var(--accent-soft);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:6px 13px;font-size:.85rem;font-weight:600;}
.mistake-pill .nat{color:var(--text2);font-family:var(--font-display);font-style:italic;font-weight:500;}
.rec{background:var(--accent-soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:13px 16px;margin-top:16px;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;}
.btn{padding:12px 20px;border-radius:11px;font-family:var(--font-ui);font-weight:600;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.14s;}
.btn:hover{transform:translateY(-2px);border-color:var(--line-strong);}
.btn.primary{background:var(--accent);color:#FBF7EC;border-color:var(--accent);}
[data-theme="dark"] .btn.primary{color:#0A1120;}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--text2);}
.btn.ghost:hover{color:var(--text);border-color:var(--line);}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
select{padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-family:var(--font-ui);font-size:.9rem;box-shadow:var(--shadow-sm);}
/* ---- Nastavení obtížností ---- */
.settings-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.set-card{display:flex;flex-direction:column;gap:4px;}
.set-card .section-label{margin:10px 0 3px;}
.set-card .section-label:first-of-type{margin-top:4px;}
.set-card .segmented{align-self:flex-start;}
.set-title{font-family:var(--font-display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;}
.set-range{width:100%;accent-color:var(--accent);height:24px;cursor:pointer;margin-top:2px;}

.history-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;}
.history-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-sm);padding:10px 14px;}
.history-row .acc{font-size:1.16rem;min-width:54px;}
.history-row .meta{flex:1;font-size:.85rem;}
.history-row .meta b{font-weight:700;}
.lead-list{display:flex;flex-direction:column;gap:7px;}
.lead-row{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-sm);padding:8px 12px;font-size:.9rem;}
.lead-row .bar{flex:1;height:7px;background:var(--land);border-radius:999px;overflow:hidden;}
.lead-row .bar > i{display:block;height:100%;background:var(--wrong);border-radius:999px;}
.empty{text-align:center;color:var(--text2);padding:30px;font-style:italic;}

/* ---- Loading / error overlay ---- */
.overlay{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:50;text-align:center;padding:20px;}
.overlay.hidden{display:none;}
.overlay h2{font-family:var(--font-display);font-weight:600;}
.spinner{width:46px;height:46px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 18px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Confetti canvas ---- */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:40;}

/* ---- Přepínač (toggle) ---- */
.switch{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.76rem;color:var(--text2);font-weight:500;}
.switch input{display:none;}
.switch .track{width:38px;height:22px;background:var(--land);border:1px solid var(--line);border-radius:999px;position:relative;transition:.2s;}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--panel);transition:.2s;box-shadow:var(--shadow-sm);}
.switch input:checked + .track{background:var(--accent);border-color:var(--accent);}
.switch input:checked + .track::after{transform:translateX(16px);background:#fff;}

@media (max-width:640px){
  .app{padding:14px 12px 36px;}
  .card{padding:16px;}
  .stat{min-width:60px;padding:8px 10px;}
  .hero{margin:10px 0 22px;}
}