/* Písma (SIL Open Font License 1.1, balíčky @fontsource): Barlow, Barlow Semi Condensed, JetBrains Mono */
@font-face{font-family:'Barlow';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/barlow-latin-ext-400-normal.122b24bc2a.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:'Barlow';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/barlow-latin-400-normal.b0a8ad37ac.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/barlow-latin-ext-500-normal.3facdf66b6.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:'Barlow';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/barlow-latin-500-normal.cd759df8ef.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/barlow-latin-ext-600-normal.b7f099c421.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:'Barlow';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/barlow-latin-600-normal.4b52ddd483.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/barlow-semi-condensed-latin-ext-500-normal.5e07c7d621.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:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/barlow-semi-condensed-latin-500-normal.0d7513795e.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/barlow-semi-condensed-latin-ext-600-normal.5a58c6c988.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:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/barlow-semi-condensed-latin-600-normal.f158417e92.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/barlow-semi-condensed-latin-ext-700-normal.109b73c772.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:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/barlow-semi-condensed-latin-700-normal.fb958c8c20.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/jetbrains-mono-latin-ext-400-normal.505dfba8ec.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:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/jetbrains-mono-latin-400-normal.14425ba9c6.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/jetbrains-mono-latin-ext-600-normal.90899aac1c.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:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/jetbrains-mono-latin-600-normal.400c6bfda1.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/jetbrains-mono-latin-ext-700-normal.45a606d88f.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:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/jetbrains-mono-latin-700-normal.d0d4e81880.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Azbuka a čínština (SIL Open Font License 1.1): Roboto, Roboto Condensed, JetBrains Mono, Noto Sans SC (podmnožina) */
@font-face{font-family:'Barlow';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/roboto-cyrillic-400-normal.fe349e5377.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Barlow';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/roboto-cyrillic-ext-400-normal.6d6be3a7d4.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Barlow';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/roboto-cyrillic-500-normal.0991339551.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Barlow';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/roboto-cyrillic-ext-500-normal.a99e7e70a8.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Barlow';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/roboto-cyrillic-600-normal.fa28925795.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Barlow';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/roboto-cyrillic-ext-600-normal.fc99820d8e.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/roboto-condensed-cyrillic-500-normal.ef705c9547.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/roboto-condensed-cyrillic-ext-500-normal.7a0bc6dbef.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/roboto-condensed-cyrillic-600-normal.7c6c3d668f.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/roboto-condensed-cyrillic-ext-600-normal.52efa21197.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/roboto-condensed-cyrillic-700-normal.7b9ef13103.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/roboto-condensed-cyrillic-ext-700-normal.26bbae1360.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/jetbrains-mono-cyrillic-400-normal.522f582730.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/jetbrains-mono-cyrillic-600-normal.b450f960a0.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/jetbrains-mono-cyrillic-700-normal.6251ef44d6.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'CU SC';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/cu-sc-400.ca559bca06.woff2) format('woff2');unicode-range:U+2E80-2FFF,U+3000-303F,U+3040-30FF,U+3100-312F,U+31C0-31EF,U+3200-33FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}
@font-face{font-family:'CU SC';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/cu-sc-700.ed33de9fe4.woff2) format('woff2');unicode-range:U+2E80-2FFF,U+3000-303F,U+3040-30FF,U+3100-312F,U+31C0-31EF,U+3200-33FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}
@font-face{font-family:'CU SC Menu';font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/cu-sc-menu.bd7c5b8ddb.woff2) format('woff2');unicode-range:U+7B80,U+4F53,U+4E2D,U+6587}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/cu-jp.ba64f914f9.woff2) format('woff2');unicode-range:U+30AD,U+30AF,U+30B9,U+30C3,U+30D6,U+30E5,U+30FB,U+30FC}

/* Cookie_CUBES — vzhled převedený na tmavé sklo Cookie_Universum (vygenerováno tools/theme.py z původního stylu) */
:root {
  --bg: #03050a; --bg-2: #05080f;
  --fg: #eef3f8; --fg-2: #c9d4df; --muted: #94a4b5;
  --line: rgba(196, 216, 236, 0.16); --line-2: rgba(196, 216, 236, 0.26);
  --glass: rgba(6, 11, 19, 0.72); --panel: rgba(4, 8, 14, 0.84);
  --surf-0: rgba(3, 6, 11, 0.86); --surf-1: rgba(7, 12, 20, 0.84); --surf-2: rgba(12, 19, 30, 0.86); --surf-3: rgba(20, 30, 45, 0.9);
  --chip: rgba(196, 216, 236, 0.10); --chip-2: rgba(196, 216, 236, 0.16);
  --accent: #7fe06a; --accent-2: #a6f08f; --accent-ink: #061204; --accent-d: #3f8a32;
  --gold: #f2c66d; --amber: #ffb45c; --red: #ff6a5a; --red-bg: #b8443c; --violet: #c79bff; --teal: #4fd6c0;
  --f-display: 'Barlow Semi Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --sym: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Symbola", sans-serif;
  --ui: var(--f-display), var(--sym);
  --tx: var(--f-body), var(--sym);
  --wm: var(--f-display), var(--sym);
  --deep: var(--bg); --shell: var(--bg-2);
  --cream: var(--surf-1); --cream2: var(--surf-2); --lite: var(--surf-3);
  --cocoa: var(--fg); --cocoa2: var(--fg-2); --cocoa3: var(--muted);
  --caramel: var(--accent); --caramel-d: var(--accent-d); --cherry: var(--red); --cherry-d: #c24a3f;
  --mint: var(--accent); --mint-d: var(--accent); --mint-t: var(--accent); --gold-old: #c9a24b;
  --ink: var(--fg); --dim: var(--fg-2); --pp: #b89cff;
  --tin: 0 0 0 0 transparent; --tin2: 0 0 0 0 transparent;
  --lift: 0 18px 40px -18px rgba(0, 0, 0, 0.75); --lift2: 0 10px 26px -14px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--tx);
  font-weight: 600;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
#app {
  position: fixed;
  inset: 0;
}
#wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  background: var(--bg);
  cursor: crosshair;
}
.hidden {
  display: none !important;
}
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
.nojs {
  max-width: 760px;
  margin: 8vh auto;
  padding: 26px;
  border-radius: 20px;
  line-height: 1.6;
  background: var(--surf-1);
  color: var(--fg);
  font-family: var(--tx);
}
.nojs h1 {
  margin: 0 0 10px;
  font-family: var(--ui);
}
button {
  font: inherit;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  background: var(--surf-1);
  border: 0;
  border-radius: 12px;
  padding: 8px 13px;
  min-height: 34px;
  cursor: pointer;
  text-align: center;
  box-shadow:
    var(--tin2),
    0 12px 24px -8px rgba(0, 0, 0, 0.6);
  transition:
    transform 0.06s,
    box-shadow 0.06s,
    background 0.12s;
}
button:hover {
  background: var(--surf-3);
}
button:active {
  transform: translateY(3px);
  box-shadow:
    var(--tin2),
    0 3px 6px -2px rgba(0, 0, 0, 0.6);
}
button.on {
  background: var(--accent);
  color: var(--accent-ink);
}
button:disabled {
  opacity: 0.42;
  cursor: default;
  transform: none;
  box-shadow:
    var(--tin2),
    0 12px 24px -8px rgba(0, 0, 0, 0.6);
}
button.primary {
  font-size: 16px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow:
    0 15px 30px -10px rgba(0, 0, 0, 0.6),
    inset 0 6px 12px -4px rgba(0, 0, 0, 0.6);
}
button.primary:hover {
  background: #e2901d;
}
button.primary:active {
  box-shadow:
    0 3px 6px -2px rgba(0, 0, 0, 0.6),
    inset 0 6px 12px -4px rgba(0, 0, 0, 0.6);
}
button.primary2 {
  background: var(--chip-2);
  color: var(--fg);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.6);
}
button.primary2:hover {
  background: var(--surf-0);
}
button.hidden {
  display: none !important;
}
select {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  background: var(--surf-3);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 10px 34px 10px 12px;
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--chip-2) 50%),
    linear-gradient(135deg, var(--chip-2) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 52%,
    calc(100% - 13px) 52%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}
kbd {
  font-family: var(--ui);
  font-weight: 600;
  background: var(--chip-2);
  color: var(--fg);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11.5px;
}
.hud {
  position: absolute;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 5;
}
#hudTL {
  top: 14px;
  left: 14px;
}
#hudTR {
  top: 14px;
  right: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 62vw;
}
.hud .stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 7px;
  border-radius: 14px;
  background: var(--surf-1);
  color: var(--fg);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  box-shadow:
    var(--tin2),
    0 12px 24px -8px rgba(0, 0, 0, 0.6);
}
.hud .stat i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-style: normal;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f6ad65;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.hud .stat small {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--muted);
  margin-left: 1px;
  display: inline-block;
  text-align: left;
}
.hud .stat > span {
  display: inline-block;
  text-align: right;
}
#hudTL .stat:nth-child(1) i {
  background: var(--accent);
}
#hudTL .stat:nth-child(2) i {
  background: var(--accent);
}
#hudTL .stat:nth-child(3) i {
  background: #7343bc;
}
#pwBar {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#pwBar button {
  font-size: 12px;
  padding: 7px 12px;
  min-height: 32px;
  color: #ffeadf;
  background: radial-gradient(
    circle at 32% 24%,
    #d82f27,
    var(--red-bg) 62%,
    #9c2f2c
  );
  box-shadow:
    var(--tin2),
    0 12px 24px -8px rgba(0, 0, 0, 0.6),
    inset 0 6px 12px -4px rgba(0, 0, 0, 0.6);
}
#pwBar button:hover {
  background: radial-gradient(circle at 32% 24%, #df2b20, #cd3832 62%, #a33531);
}
#pwBar button.on {
  background: var(--accent);
  color: var(--accent-ink);
}
#pwBar button:disabled {
  opacity: 0.4;
}
#pwBar button u {
  text-decoration: none;
  margin-left: 4px;
  font-size: 10px;
  color: #ffe9a8;
}
#btnGiveUp {
  color: var(--red);
}
#btnGiveUp:hover {
  background: var(--red-bg);
  color: #fff1e8;
}
#btnPause small,
#btnFS small {
  font-weight: 600;
  color: var(--muted);
}
#mmbox {
  position: absolute;
  right: 14px;
  top: 70px;
  z-index: 5;
  padding: 9px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    var(--surf-3),
    var(--surf-1) 22%,
    var(--surf-2)
  );
  box-shadow: var(--tin), var(--lift);
}
#mm {
  display: block;
  image-rendering: auto;
  cursor: pointer;
  border-radius: 9px;
  box-shadow: var(--tin2);
}
#mmLab {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 6px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
#mmLab span:last-child {
  color: var(--fg);
}
#panel {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  width: auto;
  height: 190px;
  display: flex;
  flex-direction: row;
  overflow: visible;
  z-index: 5;
  padding: 0;
  border-radius: 20px;
  color: var(--fg);
  font-family: var(--tx);
  font-size: 13px;
  background: linear-gradient(
    180deg,
    var(--surf-3),
    var(--surf-1) 20%,
    var(--surf-2)
  );
  box-shadow:
    var(--tin),
    0 18px 36px -12px rgba(0, 0, 0, 0.6);
}
.pMid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 11px 16px;
  overflow: hidden;
}
.pInfo,
.pBal {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 16px;
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-start;
}
.pInfo {
  width: 278px;
  border-right: 1px solid var(--line);
}
.pBal {
  width: 224px;
  border-left: 1px solid var(--line);
}
.pHead {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 1px;
}
.pIcon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.pTtl {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 17px;
  color: var(--fg);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pSub {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--red);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hpbar {
  height: 13px;
  border-radius: 7px;
  background: var(--surf-2);
  overflow: hidden;
  box-shadow: var(--tin2);
}
/* 3.3: výplň začíná přesně na levém okraji ukazatele (dřív měla na začátku 2px tmavý proužek, pozůstatek po dílcích) */
.hpbar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.hpbar.low i {
  background: var(--red-bg);
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.kv b {
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.pBal .sect {
  margin: 0 0 2px;
}
#panel .ttl {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
  letter-spacing: 0.04em;
}
#panel .body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px 24px;
  overflow: hidden;
  flex: 1 1 auto;
}
#panel .grp {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#panel .grp + .grp {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
#panel .row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 6px;
  row-gap: 15px;
  margin-bottom: 6px;
  padding-top: 3px;
}
#panel .grp .row {
  flex-wrap: wrap;
  max-width: 340px;
}
#panel .hint {
  font-family: var(--ui);
  font-weight: 500;
  color: var(--fg-2);
  line-height: 1.4;
  margin: 4px 2px 0;
  flex: 0 0 auto;
  max-height: 32px;
  overflow: hidden;
  font-size: 11.5px;
}
#panel .hint2 {
  font-family: var(--ui);
  font-weight: 500;
  color: var(--fg-2);
  font-size: 10.5px;
  margin-top: 2px;
}
#panel .sect {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 2px 4px;
}
#panel .sect .sl {
  font-family: var(--ui);
  font-weight: 700;
  color: var(--fg-2);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
#panel .sect:after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--surf-2);
}
#panel .cols {
  display: flex;
  gap: 18px;
}
#panel .stats {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 11.5px;
  margin: 2px 0 4px;
  font-variant-numeric: tabular-nums;
}
#panel .stats td {
  padding: 1.5px 4px;
  color: var(--fg);
}
#panel .stats td:first-child {
  color: var(--fg-2);
  white-space: nowrap;
  padding-right: 10px;
  font-weight: 500;
}
.gstats {
  flex: 0 0 auto;
  min-width: 340px;
}
.gstats .stats td {
  white-space: nowrap;
}
#panel .upg {
  border-collapse: collapse;
  margin: 2px 0 4px;
}
#panel .upg th {
  font-family: var(--ui);
  font-weight: 600;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 6px 3px;
}
#panel .upg td {
  padding: 2px 6px;
  vertical-align: middle;
}
#panel .upg td.fn {
  font-family: var(--ui);
  font-weight: 600;
  color: var(--fg-2);
  font-size: 11px;
  text-align: right;
  min-width: 56px;
}
#panel .upg th.sep,
#panel .upg td.sep {
  border-left: 1px solid var(--line);
  padding-left: 12px;
}
#panel .upg .na {
  color: var(--muted);
}
#panel .resBox {
  position: absolute;
  top: 44px;
  right: 66px;
  width: 214px;
  z-index: 2;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surf-2);
  box-shadow: var(--tin2);
}
#panel .resBox .rt {
  font-family: var(--ui);
  font-weight: 700;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#panel .resBox .rn {
  font-family: var(--ui);
  font-weight: 700;
  color: var(--fg);
  font-size: 12.5px;
  margin: 3px 0 5px;
}
#panel .resBox .rs {
  font-family: var(--ui);
  font-weight: 600;
  color: var(--fg-2);
  font-size: 10.5px;
  text-align: right;
}
.rq {
  margin: 4px 2px 0;
  max-width: 176px;
}
.rq .rn {
  font-family: var(--ui);
  font-weight: 700;
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.25;
}
.rq .rs {
  font-family: var(--ui);
  font-weight: 600;
  color: var(--fg-2);
  font-size: 10.5px;
  margin-top: 3px;
}
#panel .prog {
  height: 9px;
  border-radius: 6px;
  background: var(--surf-2);
  margin: 3px 0 6px;
  overflow: hidden;
  box-shadow: var(--tin2);
}
#panel .prog i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.ib {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  background: var(--surf-2);
  box-shadow:
    var(--tin2),
    0 9px 18px -6px rgba(0, 0, 0, 0.6);
}
.ib:hover {
  background: var(--surf-3);
}
.ib:active {
  transform: translateY(3px);
  box-shadow:
    var(--tin2),
    0 0 0 rgba(0, 0, 0, 0.28);
}
.ib .ic {
  pointer-events: none;
}
.ib .cst {
  position: absolute;
  right: -4px;
  bottom: -5px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 9.5px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 7px;
  background: var(--chip-2);
  color: var(--fg);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.ib:disabled {
  opacity: 0.42;
}
.ib.on {
  background: var(--accent);
  color: var(--accent-ink);
}
#panel .ib .lvl {
  position: absolute;
  left: -4px;
  top: -5px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
#panel .ib.maxed .lvl {
  background: var(--accent);
  color: var(--accent-ink);
}
#panel .ib.running {
  background: var(--surf-3);
  box-shadow:
    inset 0 0 0 1.5px var(--accent),
    0 9px 18px -6px rgba(0, 0, 0, 0.6);
}
#panel .ib .rp {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  background: var(--accent);
  border-radius: 0 0 8px 8px;
}
#panel .ib.locked {
  box-shadow:
    inset 0 0 0 1.5px var(--red),
    0 9px 18px -6px rgba(0, 0, 0, 0.6);
}
#panel .ib.nounl {
  opacity: 0.45;
  background: var(--surf-2);
  box-shadow:
    inset 0 0 0 1.5px var(--line),
    0 9px 18px -6px rgba(0, 0, 0, 0.6);
}
#panel .ib.nounl .ic {
  color: var(--muted);
}
#panel .ib.nounl:after {
  content: "🔒";
  position: absolute;
  right: -4px;
  top: -6px;
  font-size: 11px;
  line-height: 1;
  filter: grayscale(1);
}
#panel .ib.locked .ic {
  color: var(--red);
}
#panel .ib.poor {
  opacity: 0.5;
}
#panel .ib.corner {
  position: absolute;
  top: 10px;
  right: 14px;
  margin: 0;
  z-index: 2;
  background: var(--red-bg);
  color: #fff1e8;
}
#panel .ib.corner:hover {
  background: #d2332d;
}
#panel .ib.razeIn {
  margin-left: auto;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background: var(--red-bg);
  color: #fff1e8;
}
#panel .ib.razeIn:hover {
  background: #d2332d;
}
#panel .resBox.resIn {
  position: static;
  width: auto;
  margin-top: 2px;
}
.ib.cw {
  color: #f3bd68;
}
.ib.ca {
  color: #92b2c8;
}
.ib.cx {
  color: #b89cff;
}
.ib.cb {
  color: var(--accent);
}
.cost {
  color: var(--red);
  font-weight: 700;
}
.cpc {
  color: var(--fg-2);
}
.q {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 3px 2px;
}
.qs {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--surf-2);
  color: var(--muted);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--tin2);
}
.qs .qf {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(79, 169, 140, 0.6);
}
.qs.act {
  color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
#unitBar {
  position: absolute;
  left: 16px;
  right: 250px;
  bottom: 186px;
  z-index: 4;
  display: flex;
  gap: 8px;
  flex-wrap: wrap-reverse;
  align-items: flex-end;
  pointer-events: none;
}
#unitBar .uCard {
  pointer-events: auto;
  position: relative;
  width: 52px;
  height: 56px;
  padding: 5px 0 22px;
  border-radius: 14px 14px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  color: var(--fg);
  background: linear-gradient(180deg, var(--surf-3), var(--surf-2));
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 -3px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.08s;
}
#unitBar .uCard:hover {
  background: var(--surf-3);
  transform: translateY(-4px);
}
#unitBar .uCard:active {
  transform: translateY(-1px);
}
#unitBar .uCard.on {
  background: var(--accent);
  color: var(--accent-ink);
}
#unitBar .uCard .un {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#unitBar .uCard .ic {
  pointer-events: none;
}
body.mode-landing #unitBar,
body.mode-lobby #unitBar {
  display: none;
}
#tip {
  position: fixed;
  display: none;
  max-width: 270px;
  z-index: 30;
  pointer-events: none;
  padding: 9px 12px;
  border-radius: 13px;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fg-2);
  background: linear-gradient(180deg, var(--surf-3), var(--surf-1));
  box-shadow: var(--tin2), var(--lift2);
}
#tip b {
  font-family: var(--ui);
  font-weight: 700;
  color: var(--fg);
  display: block;
  margin-bottom: 2px;
}
#bldpop {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) scale(0.94);
  transform-origin: 50% 100%;
  padding: 7px 12px;
  border-radius: 13px;
  white-space: nowrap;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--fg);
  background: linear-gradient(180deg, var(--surf-3), var(--surf-1));
  box-shadow:
    var(--tin2),
    0 9px 18px -6px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(255, 206, 110, 0.45);
  transition: transform 0.18s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#bldpop.on {
  transform: translate(-50%, -100%) scale(1);
}
#bldpop span {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: var(--fg-2);
  margin-top: 1px;
}
body.mode-landing #bldpop,
body.mode-lobby #bldpop {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  #bldpop {
    transition: none;
  }
}
.mpSec {
  padding-top: 6px;
}
.mpBox {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px;
  padding: 26px 28px;
  border-radius: 24px;
  color: var(--fg);
  background: linear-gradient(
    180deg,
    var(--surf-3),
    var(--surf-1) 26%,
    var(--surf-2)
  );
  box-shadow: var(--tin), var(--lift);
}
.mpTag {
  display: inline-block;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e17e7a;
  background: #571e0f;
  padding: 6px 11px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1.5px var(--red);
}
.landSec .mpBox h2 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 27px;
  margin: 12px 0 10px;
  color: var(--fg);
}
.landSec .mpBox h2:after {
  content: none;
  display: none;
}
.mpTxt {
  font-family: var(--tx);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 16px;
}
.mpFacts {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mpFact {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--ui);
  font-size: 12.5px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.mpFact b {
  font-weight: 700;
  white-space: nowrap;
  color: var(--fg);
}
.mpFact span {
  font-weight: 600;
  color: var(--fg-2);
}
.mpSteps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
}
.mpStep {
  display: flex;
  gap: 11px;
  align-items: center;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg);
}
.mpStep i {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-style: normal;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.mpSteps button {
  margin-top: 8px;
  align-self: flex-start;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 14px;
}
.mpSteps button:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 7px rgba(127, 224, 106, 0.54))
    drop-shadow(0 0 20px rgba(127, 224, 106, 0.3));
}
@media (max-width: 860px) {
  .mpBox {
    grid-template-columns: 1fr;
  }
}
#campaign {
  display: block;
  overflow: auto;
  padding: 26px 30px;
  align-items: stretch;
}
.campHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto 20px;
  flex-wrap: wrap;
}
.campSub {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.campSub b {
  color: var(--fg);
  font-weight: 700;
}
.campHead {
  align-items: center;
}
.campSide {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.facTabs {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.facTab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 96px;
  padding: 9px 11px;
  border-radius: 15px;
  line-height: 1.2;
}
.facTab .crest {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}
.facTab .crest .ic {
  width: 19px;
  height: 19px;
}
.facTab b {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 12px;
}
.facTab i {
  font-style: normal;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 10.5px;
  color: var(--fg-2);
}
.facTab.on {
  background: var(--accent);
  color: var(--accent-ink);
}
.facTab.on i {
  color: #7be0ce;
}
.facTab.soon {
  opacity: 0.45;
}
.campId {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.campId .crest {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.campId .crest .ic {
  width: 30px;
  height: 30px;
}
.campProg {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  color: var(--gold);
  margin-top: 5px;
}
.storyBox {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto 16px;
}
.storyCol,
.nextCard {
  padding: 15px 18px;
  border-radius: 18px;
  color: var(--fg);
  background: linear-gradient(180deg, var(--surf-3), var(--surf-2));
  box-shadow: var(--tin2), var(--lift2);
}
.stH {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 10px;
}
.stIntro {
  font-family: var(--tx);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
}
.stIntro b {
  color: var(--fg);
}
.stList {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 210px;
  overflow: auto;
}
.stList li {
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-family: var(--tx);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
.stList li:first-child {
  border-top: none;
}
.stList li b {
  display: block;
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--fg);
  margin-bottom: 2px;
}
.nextCol {
  display: flex;
}
.nextCard {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow:
    var(--tin2),
    0 0 0 3px var(--accent),
    var(--lift2);
}
.nextTag {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e17e7a;
}
.nextNo {
  font-family: var(--wm);
  font-size: 15px;
  color: var(--red);
  margin-top: 2px;
}
.nextName {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
}
.nextPlace {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--fg-2);
  margin-bottom: 6px;
}
.nextGoals {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.nextGoals li {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  color: var(--fg-2);
  padding: 4px 0 4px 16px;
  position: relative;
}
.nextGoals li:before {
  content: "○";
  position: absolute;
  left: 1px;
  color: var(--muted);
}
.nextCard .nextGo {
  margin-top: auto;
  align-self: flex-start;
  font-size: 15px;
  padding: 11px 20px;
  border-radius: 13px;
}
.nextCard.done {
  justify-content: center;
  box-shadow:
    var(--tin2),
    0 0 0 3px var(--accent),
    var(--lift2);
}
@media (max-width: 860px) {
  .storyBox {
    grid-template-columns: 1fr;
  }
}
.campGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}
.misCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  padding: 15px 17px;
  border-radius: 18px;
  min-height: 0;
  color: var(--fg);
  background: linear-gradient(180deg, var(--surf-3), var(--surf-2));
  box-shadow: var(--tin2), var(--lift);
}
.misCard .misNo {
  font-family: var(--wm);
  font-weight: 400;
  font-size: 14px;
  color: var(--red);
}
.misCard .misName {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 17px;
}
.misCard .misPlace {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--fg-2);
}
.misCard .misState {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
}
.misCard.done .misState {
  color: var(--accent);
}
.misCard.lock {
  opacity: 0.5;
  cursor: default;
}
.misCard:not(.lock):hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 6px rgba(127, 224, 106, 0.42))
    drop-shadow(0 0 18px rgba(127, 224, 106, 0.24));
}
.splBox {
  max-width: 1180px;
  margin: 0 auto 16px;
  padding: 15px 18px;
  border-radius: 18px;
  color: var(--fg);
  background: linear-gradient(180deg, var(--surf-3), var(--surf-2));
  box-shadow: var(--tin2), var(--lift2);
}
.splHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 11px;
}
.splHead b {
  color: var(--red);
}
.splGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.splCard {
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--surf-1);
  border: 1px solid var(--line-2);
  background-clip: padding-box;
  box-shadow: var(--lift2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.splCard.up {
  box-shadow:
    0 0 0 3px var(--accent),
    var(--lift2);
}
.splN {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13.5px;
}
.splL {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 2px;
}
.splD {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--fg-2);
  margin-bottom: 6px;
}
.splUp {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
  background: var(--chip-2);
  color: var(--fg);
  box-shadow: 0 9px 18px -6px rgba(0, 0, 0, 0.6);
}
.splUp.off {
  opacity: 0.4;
}
.splMax {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--accent);
}
.splCode {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.splCode input {
  flex: 1;
  min-width: 180px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--surf-3);
  color: #f3a868;
}
.splCode button {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 10px;
}
.mPts {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
  margin-top: 10px;
  text-align: center;
}
.briefBox {
  max-width: 620px;
  padding: 26px 30px;
  border-radius: 22px;
  color: var(--fg);
  background: linear-gradient(
    180deg,
    var(--surf-3),
    var(--surf-1) 20%,
    var(--surf-2)
  );
  box-shadow: var(--tin), var(--lift);
}
.briefBox .bPlace {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.briefBox .bTitle {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 26px;
  margin: 6px 0 14px;
}
.briefBox .bText {
  font-family: var(--tx);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 18px;
}
.briefBox .bGoals {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.briefBox .bGoals li {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13.5px;
  padding: 7px 0 7px 26px;
  position: relative;
  border-top: 1px solid var(--line);
}
.briefBox .bGoals li:before {
  content: "○";
  position: absolute;
  left: 4px;
  color: var(--muted);
}
.briefBox .bGoals li.bonus:before {
  content: "☆";
  color: var(--gold);
}
.briefBox .bGoals li em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}
.bBtns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
#goals {
  position: absolute;
  left: 16px;
  top: 70px;
  z-index: 5;
  min-width: 200px;
  max-width: 260px;
  padding: 11px 14px;
  border-radius: 16px;
  color: var(--fg);
  background: linear-gradient(180deg, var(--surf-3), var(--surf-2));
  box-shadow: var(--tin2), var(--lift2);
}
#goals .gT {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 7px;
}
#goals .gI {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 5px;
  color: var(--fg-2);
}
#goals .gI i {
  font-style: normal;
  color: var(--muted);
}
#goals .gI.ok {
  color: var(--fg);
}
#goals .gI.ok i {
  color: var(--accent);
}
#goals .gI.bad i {
  color: var(--red);
}
#goals .gI.bon {
  opacity: 0.8;
  font-weight: 500;
}
body.mode-landing #goals,
body.mode-lobby #goals {
  display: none;
}
.misBox {
  max-width: 520px;
  padding: 26px 30px;
  border-radius: 22px;
  text-align: center;
  color: var(--fg);
  background: linear-gradient(180deg, var(--surf-3), var(--surf-2));
  box-shadow: var(--tin), var(--lift);
}
.misBox .mTitle {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 16px;
}
.misBox .mTitle.ok {
  color: var(--accent);
}
.misBox .mTitle.bad {
  color: var(--red);
}
.misBox .mGoals {
  text-align: left;
  margin-bottom: 20px;
}
.misBox .gI {
  display: flex;
  gap: 9px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
}
.misBox .gI.ok i {
  color: var(--accent);
}
.misBox .gI.bad i {
  color: var(--red);
}
.mBtns {
  display: flex;
  gap: 11px;
  justify-content: center;
  flex-wrap: wrap;
}
.epilog {
  font-family: var(--tx);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg-2);
  text-align: left;
  margin-bottom: 14px;
}
.epilogS {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--gold);
  text-align: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.ov {
  position: fixed;
  inset: 0;
  background: rgba(24, 13, 6, 0.86);
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.ov .box {
  max-width: 660px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 26px;
  border-radius: 20px;
  color: var(--fg);
  font-family: var(--tx);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.6;
  background: linear-gradient(
    180deg,
    var(--surf-3),
    var(--surf-1) 20%,
    var(--surf-2)
  );
  box-shadow: var(--tin), var(--lift);
}
.ov h2 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 20px;
  color: var(--fg);
  margin: 0 0 10px;
}
.ov .box b {
  color: var(--fg);
}
#helpBody {
  color: var(--fg-2);
}
#ends {
  color: var(--fg-2);
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
}
#countov {
  z-index: 14;
  background: rgba(24, 13, 6, 0.84);
}
#countov .countCard {
  padding: 30px 56px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(
    180deg,
    var(--surf-3),
    var(--surf-1) 22%,
    var(--surf-2)
  );
  box-shadow: var(--tin), var(--lift);
}
#countov .cdN {
  font-family: var(--wm);
  font-weight: 400;
  font-size: 96px;
  line-height: 1;
  color: var(--red);
  text-shadow:0 2px 22px rgba(0, 0, 0, 0.55);
  font-variant-numeric: tabular-nums;
}
#countov .cdT {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 16px;
  color: var(--fg);
  margin-top: 12px;
  letter-spacing: 0.02em;
}
#nettoast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  z-index: 20;
  max-width: 70vw;
  text-align: center;
  padding: 11px 20px;
  border-radius: 14px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  background: linear-gradient(180deg, var(--surf-3), var(--surf-1));
  box-shadow: var(--tin2), var(--lift2);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
#nettoast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
#nettoast b {
  color: var(--red);
}
#watchbar {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 12;
}
.ov.menu {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: var(--bg);
  background-image: radial-gradient(
    circle at 6px 6px,
    rgba(196, 216, 236, 0.03) 1.6px,
    transparent 1.7px
  );
  background-size: 18px 18px;
}
.menuWrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 30px 20px;
  overflow: auto;
}
.menuHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.brandMain {
  font-family: var(--wm);
  font-weight: 400;
  font-size: 22px;
  color: var(--fg);
  text-shadow:0 2px 22px rgba(0, 0, 0, 0.55);
}
.brandSub {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 26px;
  color: var(--fg);
}
.langs {
  display: flex;
  gap: 7px;
}
.langbtn {
  min-width: 46px;
}
.langbtn.on {
  background: var(--accent);
  color: var(--accent-ink);
}
.menuGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 14px;
  flex: 0 1 auto;
  align-content: start;
  align-items: start;
}
.card {
  padding: 14px 18px;
  border-radius: 20px;
  color: var(--fg);
  background: linear-gradient(
    180deg,
    var(--surf-3),
    var(--surf-1) 20%,
    var(--surf-2)
  );
  box-shadow: var(--tin), var(--lift);
}
.card.wide {
  grid-column: 1 / -1;
}
.card h3 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  margin: 0 0 9px;
}
.card select {
  width: 100%;
}
#mapPrev {
  margin: 10px auto 0;
  padding: 0;
  width: max-content;
  max-width: 100%;
  display: flex;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  background: var(--chip-2);
  box-shadow: var(--tin2);
}
#mapPrevCv {
  image-rendering: auto;
  display: block;
  height: min(230px, 26vh);
  width: auto;
  max-width: 100%;
}
.mapLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin-top: 10px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--fg-2);
}
.mapLegend .lgT {
  color: var(--fg-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
}
.mapLegend .lg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mapLegend .lg i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.mapLegend .lg i + i {
  margin-left: -3px;
}
.mapLegend .lg i.rk {
  border-radius: 50%;
}
.landLangs {
  position: absolute;
  right: 26px;
  top: 20px;
  z-index: 3;
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 70vw;
}
.landLangs .langbtn {
  min-width: 46px;
}
.sitelink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-decoration: none;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1;
  border-radius: 12px;
  padding: 0 13px;
  height: 34px;
  white-space: nowrap;
  transition:
    transform 0.12s,
    filter 0.16s,
    background 0.16s;
}
.sitelink b,
.sitelink span {
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  transform: translateY(0.5px);
}
.sitelink i {
  font-style: normal;
  font-size: 11px;
  margin-left: 7px;
  opacity: 0.75;
  line-height: 1;
}
.sitelink:active {
  transform: translateY(2px);
}
.langs .sitelink {
  margin-right: 2px;
  align-self: center;
}
.sitelink.space {
  background: var(--surf-3);
  color: var(--fg);
  border: 0;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.6);
}
.sitelink.space b {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.sitelink.space span {
  font-weight: 500;
  color: #6283f9;
  background: linear-gradient(95deg, #4300ff 0%, #1968e6 75%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sitelink.space i {
  color: var(--muted);
  -webkit-text-fill-color: currentColor;
}
.sitelink.space:hover {
  background: var(--surf-3);
  transform: translateY(-1px);
  filter: drop-shadow(0 0 5px rgba(140, 120, 255, 0.85))
    drop-shadow(0 0 16px rgba(43, 116, 232, 0.5));
}
.sitelink.space:active {
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.6);
}
.sitelink.arcade {
  background: #1b1524;
  color: #ffc65c;
  letter-spacing: 0.08em;
  border: 0;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.6);
}
.sitelink.arcade span {
  color: #6befc8;
}
.sitelink.arcade i {
  color: #a498c3;
}
.sitelink.arcade:hover {
  background: #241c31;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 5px rgba(111, 227, 192, 0.85))
    drop-shadow(0 0 16px rgba(127, 224, 106, 0.27));
}
.sitelink.arcade:active {
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.6);
}
.sitelink.hub {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #ff5c6e;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 14px;
  line-height: 1;
  height: auto;
  padding: 7px 12px;
  border-radius: 7px;
  background: rgba(4, 7, 13, 0.72);
  border: 1px solid rgba(255, 74, 94, 0.28);
  text-shadow:
    0 0 16px rgba(255, 74, 94, 0.75),
    0 2px 10px rgba(0, 0, 0, 0.9);
  box-shadow: none;
}
.sitelink.hub:hover {
  background: rgba(8, 13, 22, 0.9);
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(255, 74, 94, 0.45));
}
.sitelink.hub:active {
  box-shadow: none;
}
.meta {
  margin-top: 9px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--fg-2);
  line-height: 1.55;
}
.meta b {
  color: var(--fg);
}
#facCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.facCard {
  padding: 11px 13px;
  border-radius: 16px;
  cursor: pointer;
  color: var(--fg);
  background: var(--surf-1);
  box-shadow: var(--tin2), var(--lift2);
  transition:
    transform 0.08s,
    box-shadow 0.08s;
}
.facCard:hover {
  background: var(--surf-3);
  transform: translateY(-2px);
}
.facCard.on {
  background: var(--surf-3);
  box-shadow:
    var(--tin2),
    0 0 0 3px var(--accent),
    var(--lift2);
}
.facCard .fcHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.facCard .crest {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.facCard .crest .ic {
  width: 20px;
  height: 20px;
}
.facCard .fname {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 15px;
}
.facCard.on .fname {
  color: var(--red);
}
.facCard .fdesc {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
.menuFoot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.menuFoot p,
#waitReady {
  margin-right: auto;
}
.menuFoot p {
  margin: 0;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62%;
}
.slotrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 9px;
  padding: 11px 16px;
  border-radius: 14px;
  background: var(--surf-2);
}
.slotrow > span:first-child {
  min-width: 104px;
}
.slotrow .lbl {
  display: inline-block;
  min-width: 150px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--fg);
}
.slotrow .lbl.me {
  color: var(--red);
}
.slotrow button {
  min-height: 30px;
  padding: 6px 11px;
  font-size: 12.5px;
  border-radius: 10px;
  box-shadow:
    var(--tin2),
    0 9px 18px -6px rgba(0, 0, 0, 0.6);
}
.slotrow button:active {
  box-shadow:
    var(--tin2),
    0 3px 6px -2px rgba(0, 0, 0, 0.6);
}
.facbtn {
  min-width: 106px;
  background: var(--surf-3);
}
.teamB {
  min-width: 74px;
  font-size: 11.5px;
}
.teamB.t0 {
  background: #0f2f57;
}
.teamB.t1 {
  background: #57160f;
}
.teamB.t2 {
  background: #57450f;
}
.teamB.t3 {
  background: #280f57;
}
.teamB.t4 {
  background: #145245;
}
.teamB.t5 {
  background: #57320f;
}
.facbtn.on {
  background: var(--chip-2);
  color: var(--fg);
}
.slotrow .rdy {
  margin-left: auto;
  font-weight: 700;
}
.slotrow .rdy.on {
  background: var(--accent);
  color: var(--accent-ink);
}
.inviteBox {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.inviteBox .invT {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg);
}
.inviteBox .slotrow {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 2px 0;
  margin-bottom: 10px;
  gap: 14px;
}
.inviteBox .slotrow .lbl {
  min-width: 104px;
}
.nameIn,
.linkIn {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  background: var(--surf-3);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 9px 11px;
}
.nameIn {
  width: 210px;
  padding: 10px 13px;
}
.linkRow {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}
.linkIn {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  color: #f3a868;
}
.hint2 {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--fg-2);
  line-height: 1.55;
  margin-top: 8px;
}
#waitReady {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
}
.hint2.warn {
  color: var(--red);
}
.hint2.ok {
  color: var(--accent);
}
.connRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.connRow .hint2 {
  margin-top: 0;
  flex: 1;
  min-width: 220px;
}
button.tiny {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 11.5px;
  border-radius: 9px;
  box-shadow:
    var(--tin2),
    0 9px 18px -6px rgba(0, 0, 0, 0.6);
}
button.tiny:active {
  box-shadow:
    var(--tin2),
    0 3px 6px -2px rgba(0, 0, 0, 0.6);
}
#lobbyBack {
  background: var(--surf-2);
}
body.mode-landing .hud,
body.mode-landing #panel,
body.mode-landing #mmbox,
body.mode-lobby .hud,
body.mode-lobby #panel,
body.mode-lobby #mmbox {
  display: none;
}
body.mode-landing #cv {
  cursor: default;
}
#landing {
  display: block;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow-y: auto;
  background: linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.94) 0%,
      rgba(4, 8, 14, 0.62) 46%,
      rgba(4, 8, 14, 0.6) 100%
    ),
    linear-gradient(
      rgba(32, 18, 10, 0.1) 0%,
      rgba(4, 8, 14, 0.86) 54%,
      var(--bg) 88%
    );
}
.landWrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 34px 40px;
  color: var(--fg);
}
.landHero {
  padding: 8vh 0 46px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
}
.brandBlock {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}
.landHero .brandMain {
  font-family: var(--wm);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 70px);
  line-height: 1;
  color: var(--fg);
  display: block;
  text-shadow:0 2px 22px rgba(0, 0, 0, 0.55);
}
.landHero .brandSub {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.22em;
  color: #7ddebe;
  display: block;
  margin-top: 18px;
}
#landEyebrow {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
#landTag {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--fg);
  max-width: 520px;
  margin: 22px 0 26px;
}
.landCta {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  align-items: center;
}
.landCta button,
.landCloser button {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 14px;
  min-height: 0;
}
.landCta button:not(.primary),
.landCloser button:not(.primary) {
  background: var(--surf-1);
  color: var(--fg);
  box-shadow:
    0 15px 30px -10px rgba(0, 0, 0, 0.6),
    inset 0 6px 12px -4px rgba(0, 0, 0, 0.6);
}
.landCta button:not(.primary):hover,
.landCloser button:not(.primary):hover {
  background: var(--surf-3);
}
.landCta button,
.landCloser button,
.ov.menu button,
.landLangs button {
  transition:
    transform 0.12s,
    box-shadow 0.16s,
    background 0.16s,
    filter 0.16s;
}
.landCta button:hover,
.landCloser button:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 6px rgba(127, 224, 106, 0.57))
    drop-shadow(0 0 18px rgba(127, 224, 106, 0.45))
    drop-shadow(0 0 38px rgba(127, 224, 106, 0.27));
}
.landCta button.primary:hover,
.landCloser button.primary:hover {
  filter: drop-shadow(0 0 7px rgba(127, 224, 106, 0.6))
    drop-shadow(0 0 20px rgba(127, 224, 106, 0.51))
    drop-shadow(0 0 44px rgba(127, 224, 106, 0.33));
}
.ov.menu button:hover:not(:disabled),
.landLangs button:hover {
  filter: drop-shadow(0 0 5px rgba(127, 224, 106, 0.54))
    drop-shadow(0 0 14px rgba(127, 224, 106, 0.36))
    drop-shadow(0 0 28px rgba(127, 224, 106, 0.21));
}
.ov.menu button.on:hover,
.ov.menu .rdy.on:hover,
.landLangs button.on:hover {
  filter: drop-shadow(0 0 5px rgba(140, 240, 205, 0.95))
    drop-shadow(0 0 16px rgba(79, 169, 140, 0.7))
    drop-shadow(0 0 32px rgba(79, 169, 140, 0.4));
}
.facCard:hover {
  filter: drop-shadow(0 0 8px rgba(127, 224, 106, 0.33))
    drop-shadow(0 0 22px rgba(127, 224, 106, 0.21));
}
.ov.menu .facCard.on:hover {
  filter: drop-shadow(0 0 8px rgba(127, 224, 106, 0.48))
    drop-shadow(0 0 26px rgba(127, 224, 106, 0.3));
}
@media (prefers-reduced-motion: reduce) {
  .landCta button:hover,
  .landCloser button:hover {
    transform: none;
  }
}
.landCta button:not(.primary):active,
.landCloser button:not(.primary):active {
  transform: translateY(4px);
  box-shadow:
    0 3px 6px -2px rgba(0, 0, 0, 0.6),
    inset 0 6px 12px -4px rgba(0, 0, 0, 0.6);
}
#landCtaNote {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
  margin: 12px 0 0;
}
.startCard {
  padding: 20px 22px;
  border-radius: 20px;
  color: var(--fg);
  background: linear-gradient(
    180deg,
    var(--surf-3),
    var(--surf-1) 22%,
    var(--surf-2)
  );
  box-shadow: var(--tin), var(--lift);
}
.startCard h3 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 14px;
}
.startCard .st {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 11px;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.startCard .st b {
  font-weight: 700;
  color: var(--fg);
}
.startCard .st i {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border-radius: 8px;
  font-style: normal;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.startCard .st:nth-child(3) i {
  background: var(--accent);
  color: var(--accent-ink);
}
.startCard .st:nth-child(4) i {
  background: var(--red-bg);
  color: #fff1e8;
}
.landSec {
  margin: 44px 0 0;
}
.landSec h2 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 27px;
  color: var(--fg);
  margin: 0 0 6px;
}
.landSec h2:after {
  content: "";
  display: block;
  width: 54px;
  height: 5px;
  border-radius: 3px;
  background: var(--accent);
  margin-top: 11px;
}
.landSec .ssub {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 22px;
}
#landFacs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.lfCard {
  padding: 18px 20px;
  border-radius: 20px;
  color: var(--fg);
  background: linear-gradient(
    180deg,
    var(--surf-3),
    var(--surf-1) 22%,
    var(--surf-2)
  );
  box-shadow: var(--tin), var(--lift);
}
.lfName {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 19px;
  color: var(--fg);
  margin-bottom: 2px;
}
.lfRole {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.lfTop {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 13px;
}
.crest {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f6ad65;
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 9px 18px -6px rgba(0, 0, 0, 0.6);
}
.crest .ic {
  width: 26px;
  height: 26px;
}
.crest.c-kral {
  background: #dbab24;
}
.crest.c-horda {
  background: var(--chip-2);
}
.crest.c-podkop {
  background: #714eb1;
}
.lfTop .lfName {
  margin-bottom: 2px;
}
.lfTop .lfRole {
  margin-bottom: 0;
}
.lfDesc {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-2);
}
.lfUnits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}
.lfUnits span {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--chip-2);
  color: var(--fg);
}
#landFeats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 13px;
}
.featCell {
  padding: 15px 17px;
  border-radius: 18px;
  color: var(--fg-2);
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12.8px;
  line-height: 1.6;
  background: linear-gradient(180deg, var(--surf-3), var(--surf-2));
  box-shadow: var(--tin2), var(--lift2);
}
.featCell b {
  display: block;
  font-weight: 700;
  color: var(--fg);
  font-size: 14px;
  margin-bottom: 5px;
}
#mapsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 13px;
}
/* 3.3: náhledy map na úvodu jsou stejné malované obrázky jako ve výběru mapy v lobby: obrázek přes celou šířku
   karty (16 : 10), pod ním jméno a počet hráčů */
.mapCell {
  padding: 0 0 11px;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(180deg, var(--surf-3), var(--surf-2));
  box-shadow: var(--tin2), var(--lift2);
}
.mapCell img,
.mapCell canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  image-rendering: auto;
  background: #121a12;
  border-bottom: 1px solid var(--line);
}
.mapLab {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg);
  margin-top: 9px;
  padding: 0 12px;
}
.mapLab small {
  display: block;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--fg-2);
  margin-top: 2px;
}
.landCloser {
  margin: 46px 0 0;
  text-align: center;
  display: flex;
  gap: 13px;
  justify-content: center;
  flex-wrap: wrap;
}
.landCloser button.primary {
  font-size: 18px;
  padding: 16px 34px;
}
.landCloser button:not(.primary) {
  font-size: 17px;
  padding: 15px 30px;
}
.landFoot {
  margin: 34px 0 0;
  padding-top: 26px;
  text-align: center;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.kofi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: clamp(13px, 2.1vw, 16px);
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  color: #ffc061;
  padding: 7px 13px;
  border-radius: 7px;
  background: rgba(4, 7, 13, 0.72);
  border: 1px solid rgba(255, 182, 72, 0.42);
  text-shadow:
    0 0 16px rgba(255, 182, 72, 0.8),
    0 2px 10px rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 18px rgba(255, 182, 72, 0.12);
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.kofi svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}
.kofi:hover,
.kofi:focus-visible {
  color: #789ce3;
  background: #ff9900;
  border-color: #ffc061;
  text-shadow: none;
  box-shadow: 0 0 26px rgba(255, 182, 72, 0.55);
}
@media (max-width: 860px) {
  .kofi {
    padding: 6px 10px;
    gap: 6px;
  }
}
.footLinks {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.footLinks a {
  text-decoration: none;
  font-weight: 700;
  font-size: 12.5px;
  transition:
    filter 0.16s,
    opacity 0.16s;
  opacity: 0.85;
}
.footLinks a.fs {
  color: var(--fg);
  font-weight: 800;
}
.footLinks a.fs span {
  font-weight: 500;
  color: #8ea9ff;
  background: linear-gradient(95deg, #210f57 0%, #0f6cf0 75%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footLinks a.fa {
  color: #ffc65c;
  letter-spacing: 0.06em;
}
.footLinks a.fa span {
  color: #6befc8;
}
.footLinks a.fu {
  color: var(--fg);
  font-weight: 800;
}
.footLinks a.fu span {
  font-weight: 500;
  color: #5cdbff;
  background: linear-gradient(95deg, #00c6ff 0%, #ff008d 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footLinks a.fu:hover {
  filter: drop-shadow(0 0 8px rgba(79, 216, 255, 0.7));
}
.footLinks a:hover {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(127, 224, 106, 0.33));
}
.footLinks a.fa:hover {
  filter: drop-shadow(0 0 8px rgba(111, 227, 192, 0.7));
}
@media (max-width: 980px) {
  .landHero {
    grid-template-columns: 1fr;
    padding-top: 24px;
  }
  .menuGrid {
    grid-template-columns: 1fr;
  }
  #facCards {
    grid-template-columns: 1fr;
  }
  .landWrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .menuWrap {
    padding: 18px 18px 24px;
  }
  .menuFoot p {
    max-width: 100%;
  }
  .landLangs {
    position: static;
    max-width: none;
    padding: 14px 20px 0;
    justify-content: center;
    gap: 8px;
  }
  .menuHead {
    gap: 12px;
  }
  .menuHead .langs {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
@media (max-width: 520px) {
  .sitelink {
    font-size: 11.5px;
    padding: 0 10px;
    height: 32px;
  }
  .sitelink i {
    margin-left: 5px;
  }
  .landLangs {
    gap: 6px;
  }
  .langbtn {
    min-width: 40px;
    padding: 6px 9px;
  }
  #lobbyBack {
    padding: 6px 10px;
  }
}
@media (max-width: 620px) {
  #landFacs,
  #landFeats {
    grid-template-columns: 1fr;
  }
  #mapsGrid {
    grid-template-columns: 1fr 1fr;
  }
  .slotrow .lbl {
    min-width: 100%;
  }
}
#bldpop,
#countov .countCard,
#goals,
#mapPrev,
#mm,
#mmbox,
#nettoast,
#panel,
#panel .prog,
#panel .resBox,
#pwBar button,
#tip,
.briefBox,
.card,
.facCard,
.facCard.on,
.featCell,
.hpbar,
.hud .stat,
.ib,
.ib:active,
.lfCard,
.mapCell,
.misBox,
.misCard,
.mpBox,
.nextCard,
.nextCard.done,
.ov .box,
.qs,
.slotrow,
.slotrow button,
.slotrow button:active,
.splBox,
.startCard,
.storyCol,
button,
button.tiny,
button.tiny:active,
button:active,
button:disabled {
  border: 1px solid var(--line-2);
  background-clip: padding-box;
}
#unitBar .uCard {
  border: 1px solid var(--line-2);
  border-bottom: none;
  background-clip: padding-box;
  box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.25);
}
#unitBar .uCard:active {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
button.primary,
button.primary:active,
button.primary:disabled,
.primary2,
.primary2:active,
.landCta button,
.landCta button:active,
.landCloser button,
.landCloser button:active,
#mpGo,
.nextGo,
#briefGo {
  border: 0;
}

/* ==========================================================================
   Cookie_CUBES 3 — ruční doladění vzhledu ve stylu Cookie_Universum
   (tmavé sklo, tenké linky, Barlow / Barlow Semi Condensed / JetBrains Mono,
   zelený akcent z karty CUBES na portálu). Rozložení zůstává z původní hry.
   ========================================================================== */
:root {
  --ui: var(--f-body), var(--sym);
  --tx: var(--f-body), var(--sym);
  --radius: 18px;
  --blur: blur(14px) saturate(1.25);
}
html, body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-weight: 500; }
#cv { image-rendering: auto; background: var(--bg); }
::selection { background: rgba(127, 224, 106, 0.35); color: var(--fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- písmo nadpisů a štítků --- */
h1, h2, h3, .bTitle, #endt, #confT, #helpTitle, .mTitle, .misBox .mTitle { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.005em; }
.landSec h2, #landFacT, #landFeatT, #landMapsT, #mpT { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: clamp(30px, 3.2vw, 48px); line-height: 1; letter-spacing: 0.01em; }
.ssub { color: var(--fg-2); font-weight: 400; }
#mmLab, #panel .sect .sl, .stH, #goals .gT, .mapLegend .lgT, .bPlace, .mpTag, .nextTag, #landEyebrow, .ov.menu h3, .card h3 {
  font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
}
#landEyebrow { color: var(--accent); font-size: 12px; }

/* --- tlačítka: sklo s linkou, hlavní akce zelená --- */
button {
  font-family: var(--f-display); font-weight: 600; letter-spacing: 0.02em;
  color: var(--fg); background: rgba(6, 11, 19, 0.62);
  border: 1px solid var(--line-2); box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
button:hover:not(:disabled) { border-color: rgba(238, 243, 248, 0.55); background: rgba(14, 22, 34, 0.86); filter: none; }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
button.primary, #btnStart, #briefGo, #mpGo, .misBox .mNext {
  background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700;
}
button.primary:hover:not(:disabled), #btnStart:hover:not(:disabled), #briefGo:hover, #mpGo:hover {
  background: var(--accent-2); color: var(--accent-ink); transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(127, 224, 106, 0.65); filter: none;
}
.landCta button, .landCloser button, #btnStart, #briefGo, #mpGo, #btnAgain, #btnFacs, .misBox .mBtns button {
  border-radius: 999px; min-height: 52px; padding: 0 28px; font-size: 18px;
}
.landCta button:not(.primary), .landCloser button:not(.primary) { background: rgba(3, 5, 10, 0.5); border-color: rgba(238, 243, 248, 0.34); box-shadow: none; }
.landCta button:hover, .landCloser button:hover, .ov.menu button:hover:not(:disabled), .landLangs button:hover { filter: none; }
.landCta button:not(.primary):hover, .landCloser button:not(.primary):hover { border-color: var(--fg); transform: translateY(-2px); }
button.on, .langbtn.on, .facTab.on, .slotrow .rdy.on, .ib.on, #unitBar .uCard.on, #pwBar button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
button:disabled { opacity: 0.45; }

/* --- jazyk, odkazy na portál --- */
.langbtn { font-family: var(--f-mono); font-weight: 700; letter-spacing: 0.12em; font-size: 12px; border-radius: 999px; min-width: 44px; }
.landLangs .kofi { font-family: var(--f-mono); letter-spacing: 0.14em; border-radius: 999px; border: 1px solid rgba(255, 192, 97, 0.45); background: rgba(3, 5, 10, 0.5); color: #ffc061; box-shadow: none; }
.landLangs .kofi:hover { background: rgba(255, 192, 97, 0.1); }
.sitelink.hub { border-radius: 999px; font-family: var(--f-mono); letter-spacing: 0.16em; }

/* --- překryvy a okna --- */
.ov { background: rgba(2, 4, 8, 0.72); backdrop-filter: blur(6px); }
.ov.menu { background-color: var(--bg); background-image: radial-gradient(circle at 6px 6px, rgba(196, 216, 236, 0.05) 1.4px, transparent 1.5px); }
.ov .box, .briefBox, .misBox, .countCard, .card, .mpBox, .startCard, #panel, #mmbox, .hud .stat, #tip, #bldpop, #goals, .facCard, .misCard {
  border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}
.ov .box, .briefBox, .misBox, .countCard { background: rgba(6, 11, 19, 0.9); backdrop-filter: var(--blur); border-radius: 22px; color: var(--fg); }
#endt { text-transform: uppercase; font-size: 34px; color: var(--accent); }

/* --- úvodní stránka --- */
#landing { background: linear-gradient(90deg, rgba(3, 5, 10, 0.95) 0%, rgba(3, 5, 10, 0.7) 46%, rgba(3, 5, 10, 0.35) 100%), linear-gradient(rgba(3, 5, 10, 0) 60%, rgba(3, 5, 10, 0.9)); }
.landHero .brandMain { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(46px, min(5.6vw, 12vh), 100px); line-height: 0.9; letter-spacing: -0.005em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }
.landHero .brandSub, .brandSub { font-family: var(--f-mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.34em; color: var(--accent); }
#landTag { color: var(--fg-2); font-weight: 400; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75); }
#landCtaNote { color: var(--muted); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; }
.startCard { background: rgba(6, 11, 19, 0.72); backdrop-filter: var(--blur); border-radius: 22px; position: relative; overflow: hidden; }
.startCard::before, .mpBox::before { content: ""; position: absolute; top: 0; left: 28px; width: 56px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.startCard h3 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; }
.startCard .st i, .mpStep i { background: var(--accent); color: var(--accent-ink); font-family: var(--f-mono); }
.startCard .st:nth-child(3) i { background: var(--gold); color: #1a1204; }
.startCard .st:nth-child(4) i { background: var(--red); color: #1a0806; }
.mpBox { position: relative; background: rgba(6, 11, 19, 0.72); backdrop-filter: var(--blur); border-radius: 22px; overflow: hidden; }
.mpTag { background: transparent; border: 1px solid rgba(255, 106, 90, 0.5); color: var(--red); border-radius: 999px; }
.mpTxt { color: var(--fg-2); }
.mpFact { border-top: 1px solid var(--line); }
/* karty frakcí a vlastností jako karty portálu */
.facCard, .landSec .feat, #landFeats > div, #mapsGrid > div {
  background: rgba(6, 11, 19, 0.72); backdrop-filter: var(--blur); border-radius: 20px;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.28s ease;
}
.facCard:hover, #landFeats > div:hover, #mapsGrid > div:hover { transform: translateY(-4px); border-color: var(--line-2); filter: none; }
.facCard.on, .ov.menu .facCard.on:hover { background: rgba(12, 22, 16, 0.88); box-shadow: 0 0 0 1px var(--accent), 0 0 34px -8px rgba(127, 224, 106, 0.55); }
.facCard.on .fname { color: var(--accent); }
.facCard .fdesc { color: var(--fg-2); font-weight: 400; }
.chip, .unitChip, .facCard .tags span, #landFacs .tags span { background: var(--chip); color: var(--fg-2); border: 1px solid var(--line); }

/* --- lobby --- */
.menuHead .brandMain { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 26px; letter-spacing: 0.02em; }
.card { background: rgba(6, 11, 19, 0.74); backdrop-filter: var(--blur); border-radius: 20px; }
select, input[type="text"], .linkIn, .splCode input { background: rgba(3, 6, 11, 0.8); color: var(--fg); border: 1px solid var(--line-2); border-radius: 12px; font-family: var(--f-body); }
select:focus, input:focus { border-color: var(--accent); outline: none; }
#mapPrev { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.teamB { color: var(--fg); }

/* --- herní HUD --- */
.hud .stat { background: rgba(4, 8, 14, 0.78); backdrop-filter: var(--blur); border-radius: 14px; }
.hud .stat b, #rres, #rcp, #rpp { font-family: var(--f-mono); font-weight: 700; }
.hud .stat small { font-family: var(--f-mono); color: var(--muted); }
.hud .stat i { color: #10140a; }
#hudTL .stat:nth-child(1) i { background: var(--gold); }
#hudTL .stat:nth-child(2) i { background: var(--accent); }
#hudTL .stat:nth-child(3) i { background: var(--violet); }
#pwBar button {
  background: rgba(199, 155, 255, 0.12); color: #e6d6ff; border: 1px solid rgba(199, 155, 255, 0.38);
  border-radius: 999px; box-shadow: none; font-family: var(--f-display);
}
#pwBar button:hover:not(:disabled) { background: rgba(199, 155, 255, 0.24); border-color: rgba(214, 186, 255, 0.8); }
#pwBar button u { color: var(--gold); }
#pwBar button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
#hudTR > button { border-radius: 999px; background: rgba(4, 8, 14, 0.78); backdrop-filter: var(--blur); }
#btnGiveUp { color: var(--red); border-color: rgba(255, 106, 90, 0.45); }
#btnGiveUp:hover { background: rgba(255, 106, 90, 0.14); color: #ffb0a6; }
#mmbox { background: rgba(4, 8, 14, 0.82); backdrop-filter: var(--blur); border-radius: 18px; }
#mm { border-radius: 10px; image-rendering: auto; }
#panel { background: rgba(4, 8, 14, 0.86); backdrop-filter: var(--blur); border-radius: 20px; }
.pInfo { border-right: 1px solid var(--line); }
.pBal { border-left: 1px solid var(--line); }
#panel .grp + .grp, #panel .upg th.sep, #panel .upg td.sep { border-left: 1px solid var(--line); }
#panel .sect:after { background: var(--line); }
#panel .sect .sl { color: var(--muted); font-size: 10px; }
.pIcon { color: #10140a; }
.hpbar { background: rgba(196, 216, 236, 0.1); border-radius: 999px; overflow: hidden; }
.hpbar i { background-color: var(--accent); }
.ib { background: rgba(10, 16, 26, 0.9); border: 1px solid var(--line-2); box-shadow: none; border-radius: 12px; }
.ib:hover:not(:disabled) { border-color: var(--accent); }
#panel .ib .lvl { color: var(--accent-ink); background: var(--gold); }
#panel .ib.maxed .lvl { color: var(--accent-ink); background: var(--accent); }
#panel .ib.running { box-shadow: inset 0 0 0 1.5px var(--gold); }
#panel .ib.locked { box-shadow: inset 0 0 0 1.5px var(--red); }
/* 3.3: tlačítko shromaždiště na konci řady Výcvik (kousek stranou od jednotek); svítí, když je nastavené */
#panel .ib.rallyBtn { margin-left: 8px; }
#panel .ib.rallyOn { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
#unitBar .uCard { background: rgba(4, 8, 14, 0.86); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--line-2); }
#bldpop { background: rgba(6, 11, 19, 0.92); backdrop-filter: var(--blur); border-radius: 14px; box-shadow: 0 0 0 1px var(--line-2), 0 16px 40px -16px rgba(0, 0, 0, 0.8); }
#tip { background: rgba(4, 8, 14, 0.94); backdrop-filter: var(--blur); border-radius: 14px; color: var(--fg); }
#goals { background: rgba(4, 8, 14, 0.82); backdrop-filter: var(--blur); border-radius: 16px; }
#nettoast, .toast { background: rgba(6, 11, 19, 0.92); border: 1px solid var(--line-2); border-radius: 14px; color: var(--fg); backdrop-filter: var(--blur); }
#watchbar button { border-radius: 999px; background: rgba(4, 8, 14, 0.8); backdrop-filter: var(--blur); }

/* --- kampaň --- */
.misCard { background: rgba(6, 11, 19, 0.74); backdrop-filter: var(--blur); border-radius: 18px; }
.misCard:not(.lock):hover { filter: none; border-color: var(--accent); transform: translateY(-3px); }
.facTab { border-radius: 16px; }
.facTab.on i { color: var(--accent-ink); }
.epilog, .briefBox .bText, .stIntro, .stList li { color: var(--fg-2); }

/* --- odpočet --- */
#countov { background: rgba(2, 4, 8, 0.8); }
#countov .cdN { font-family: var(--f-display); font-weight: 700; color: var(--accent); text-shadow: 0 0 40px rgba(127, 224, 106, 0.45); }

/* --- nastavení zvuku (doplněno) a autoři --- */
.ccSnd { display: flex; align-items: center; gap: 8px; }
.ccSnd label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ccSnd input[type="range"] { accent-color: var(--accent); width: 110px; }
.ccCredits { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.6; }
.ccCredits h3 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 6px; }
.ccCredits a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* --- ovládání zvuku --- */
.ccSndBtn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px; padding: 0 10px; border-radius: 999px; color: var(--fg-2); }
.ccSndBtn svg .x { display: none; }
.ccSndBtn.muted svg .x { display: inline; }
.ccSndBtn.muted svg .w1, .ccSndBtn.muted svg .w2 { display: none; }
.ccSndBtn.muted { color: var(--red); border-color: rgba(255, 106, 90, 0.45); }
.landLangs .ccSndBtn, #facsel .langs .ccSndBtn { height: 40px; background: rgba(3, 5, 10, 0.5); }
.ccSndPop { position: fixed; z-index: 400; width: 260px; padding: 14px 16px 12px; border-radius: 16px; border: 1px solid var(--line-2);
  background: rgba(6, 11, 19, 0.95); backdrop-filter: var(--blur); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9); color: var(--fg); font-family: var(--f-body); }
.ccSndH { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ccRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; color: var(--fg-2); }
.ccRow input[type="range"] { width: 130px; accent-color: var(--accent); }
.ccMute { justify-content: flex-start; }
.ccMute input { accent-color: var(--accent); width: 16px; height: 16px; }
.ccCredBtn { margin-top: 8px; width: 100%; min-height: 34px; border-radius: 999px; font-size: 14px; }
.ccNote { margin-top: 8px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.ccFootCred { margin-left: 14px; min-height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--fg-2); }
.ccCredits ul { margin: 8px 0 0; padding-left: 18px; }
.ccCredits li { margin: 3px 0; }

/* ---- týmy (Ctrl+1–9): záložky vlevo nad seznamem jednotek ---- */
#grpBar { position: absolute; left: 16px; bottom: 250px; z-index: 4; display: flex; gap: 6px; pointer-events: none; }
#grpBar:empty { display: none; }
#grpBar .grpTab { pointer-events: auto; display: inline-flex; align-items: baseline; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px;
  font: 600 12px/26px var(--ui, 'Barlow', sans-serif); color: var(--fg-2, #c9d4df); background: rgba(4, 8, 14, 0.82); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 1px var(--line-2, rgba(255, 255, 255, 0.12)); cursor: pointer; transition: transform 0.08s, background 0.12s; }
#grpBar .grpTab b { font: 700 13px/26px var(--mono, 'JetBrains Mono', monospace); color: var(--fg, #eef3f8); }
#grpBar .grpTab span { font-variant-numeric: tabular-nums; opacity: 0.8; }
#grpBar .grpTab:hover { transform: translateY(-2px); background: rgba(14, 22, 34, 0.92); }
#grpBar .grpTab.part { box-shadow: inset 0 0 0 1.5px rgba(127, 224, 106, 0.55); }
#grpBar .grpTab.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
#grpBar .grpTab.on b { color: var(--accent-ink); }
body.mode-landing #grpBar, body.mode-lobby #grpBar { display: none; }

/* ---- malované ikony (portréty praporů, budovy, erby frakcí) ---- */
img.pic { display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; image-rendering: auto; }
#unitBar .uCard .pic { width: 38px; height: 38px; margin-top: -5px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }
#unitBar .uCard { padding-top: 3px; }
.ib .pic { width: 31px; height: 31px; }
.ib .pic.pb { width: 33px; height: 33px; }
#panel .ib.locked .pic, #panel .ib.nounl .pic { opacity: 0.55; filter: grayscale(0.7); }
.qs .pic { width: 25px; height: 25px; }
.pIcon:has(.pic) { background: radial-gradient(circle at 50% 72%, #2c3a48 0%, #121a24 78%); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -10px 16px -10px rgba(127, 224, 106, 0.35); }
.pIcon .pic { width: 36px; height: 36px; }
.pIcon .pic.pb { width: 40px; height: 40px; margin-top: -4px; }
.crest:has(.pf) { background: transparent !important; box-shadow: none !important; }
.crest .pic.pf { width: 118%; height: 118%; max-width: none; margin: -9%; }

/* ---- deset jazyků: čínština (podmnožina Noto Sans SC) stojí za latinkou ve všech písmech ---- */
:root {
  --f-display: 'Barlow Semi Condensed', 'CU SC', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-body: 'Barlow', 'CU SC', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'CU SC', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
/* nabídka jazyků (úvod, lobby): <details> s odkazy, funguje i bez skriptu */
details.jazyk { position: relative; display: inline-block; }
details.jazyk > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(3, 5, 10, 0.5); color: var(--fg); font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; user-select: none; }
details.jazyk > summary::-webkit-details-marker { display: none; }
details.jazyk > summary .ico { color: var(--accent); flex: none; }
details.jazyk > summary:hover, details.jazyk[open] > summary { border-color: rgba(127, 224, 106, 0.6); }
details.jazyk > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.jazyk .jzList, #langMenu { display: grid; gap: 2px; min-width: 178px; padding: 6px; border-radius: 14px; background: rgba(6, 10, 17, 0.97);
  border: 1px solid var(--line-2); box-shadow: 0 22px 48px -12px rgba(0, 0, 0, 0.78); backdrop-filter: blur(10px); }
details.jazyk .jzList { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; }
details.jazyk .jzList a, #langMenu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 9px;
  color: var(--fg-2); text-decoration: none; font-family: var(--f-body); font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  background: transparent; border: 0; box-shadow: none; min-height: 0; height: auto; text-align: left; cursor: pointer; }
/* „简体中文“ z drobného písma se čtyřmi znaky, ať nabídka nestahuje celou čínskou podmnožinu */
details.jazyk .jzList a[lang="zh-Hans"], #langMenu button[lang="zh-Hans"] { font-family: 'Barlow', 'CU SC Menu', 'CU SC', sans-serif; }
details.jazyk .jzList a:hover, details.jazyk .jzList a:focus-visible, #langMenu button:hover, #langMenu button:focus-visible { background: rgba(196, 216, 236, 0.08); color: var(--fg); outline: none; filter: none; transform: none; }
details.jazyk .jzList a.on, #langMenu button.on { color: var(--accent); }
details.jazyk .jzList a.on::after, #langMenu button.on::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(127, 224, 106, 0.8); }
#langMenu { position: fixed; top: 58px; right: 14px; z-index: 80; }
#langMenu.hidden { display: none; }
/* nízký displej (telefon na šířku): deset jazyků ve dvou sloupcích, ať se nabídka vejde pod lištu */
@media (max-height: 520px) {
  details.jazyk .jzList, #langMenu { grid-template-columns: 1fr 1fr; min-width: 300px; max-height: calc(100vh - 72px); overflow-y: auto; }
  details.jazyk .jzList a, #langMenu button { padding: 7px 10px; }
}
#btnLang { font-family: var(--f-mono); font-weight: 700; letter-spacing: 0.1em; }

/* ==========================================================================
   Cookie_CUBES 3.1 — herní lišta: piktogramy místo znaků (⛏ ⚑ ✦ ⏸ ⛶ ?),
   čtvercová tlačítka s popiskem v bublině (vzor: Železo a Popel), tmavé sklo
   a zelený akcent (Cookie_Universum). Kouzla mají vlastní lištu nahoře uprostřed.
   ========================================================================== */
.hud i[data-ic] { display: inline-flex; align-items: center; justify-content: center; font-style: normal; flex: none; }
.hud svg.hi { width: 18px; height: 18px; display: block; }

/* --- zdroje vlevo nahoře --- */
#hudTL { gap: 6px; }
#hudTL .stat { height: 40px; padding: 0 13px 0 6px; gap: 8px; border-radius: 13px; font-size: 15px; }
#hudTL .stat i { width: 28px; height: 28px; border-radius: 9px; color: #0d1206; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
#hudTL .stat i svg.hi { width: 17px; height: 17px; }
#hudTL .st-res i { background: linear-gradient(160deg, #ffe08a, var(--gold)); }
#hudTL .st-pop i { background: linear-gradient(160deg, #b9f5a8, var(--accent)); }
#hudTL .st-pp i { background: linear-gradient(160deg, #e3cbff, var(--violet)); color: #1a0c2e; }

/* --- ovládání vpravo nahoře: jedna řada, nic se nepřekrývá --- */
#hudTR { gap: 6px; flex-wrap: nowrap; max-width: none; }
#hudTR > button.hb, #hudTR > .ccSndBtn {
  height: 40px; min-width: 40px; padding: 0 10px; border-radius: 12px; gap: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 14, 0.8); backdrop-filter: var(--blur); border: 1px solid var(--line-2);
  color: var(--fg-2); font-size: 14px; line-height: 1; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.6);
}
#hudTR > button.hb.lab { padding: 0 13px 0 11px; color: var(--fg); }
#hudTR > button.hb:hover:not(:disabled), #hudTR > .ccSndBtn:hover { color: var(--fg); border-color: rgba(238, 243, 248, 0.5); background: rgba(14, 22, 34, 0.9); transform: none; }
#hudTR > button.hb .t { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
#hudTR .hsep { width: 1px; height: 22px; background: var(--line-2); margin: 0 3px; flex: none; }
#btnLang .t { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; }
#btnLang svg.hi { width: 16px; height: 16px; color: var(--accent); }
#hudTR > #btnGiveUp { color: var(--red); border-color: rgba(255, 106, 90, 0.42); }
#hudTR > #btnGiveUp:hover { color: #ffb0a6; background: rgba(255, 106, 90, 0.14); border-color: rgba(255, 106, 90, 0.75); }
#btnArmy svg.hi { color: var(--accent); }
/* pauza a celá obrazovka: druhá ikona ve stavu „on" */
#hudTR .hb .i1 { display: none; }
#hudTR .hb.on .i0 { display: none; }
#hudTR .hb.on .i1 { display: inline-flex; }
#hudTR > #btnPause.on { background: var(--gold); color: #1a1204; border-color: transparent; }

/* --- kouzla: lišta nahoře uprostřed, piktogram s cenou --- */
#hudPW { top: 14px; left: 50%; transform: translateX(-50%); }
#pwBar { display: flex; gap: 6px; padding: 4px; border-radius: 16px; background: rgba(4, 8, 14, 0.62); backdrop-filter: var(--blur); border: 1px solid var(--line); }
#pwBar:empty { display: none; }
#pwBar button.spell {
  position: relative; width: 42px; height: 40px; min-height: 0; padding: 0; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(199, 155, 255, 0.2), rgba(115, 67, 188, 0.16)); color: #efe4ff;
  border: 1px solid rgba(199, 155, 255, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#pwBar button.spell svg.hi { width: 21px; height: 21px; }
#pwBar button.spell .cost {
  position: absolute; right: -5px; bottom: -6px; min-width: 19px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #5b2fa0; color: #fff; font: 700 10.5px/17px var(--f-mono); letter-spacing: 0; box-shadow: 0 0 0 2px rgba(4, 8, 14, 0.9);
}
#pwBar button.spell u { position: absolute; top: 3px; left: 4px; display: flex; gap: 2px; text-decoration: none; }
#pwBar button.spell u::before, #pwBar button.spell u.lv3::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 4px rgba(255, 210, 102, 0.8); }
#pwBar button.spell:hover:not(:disabled) { border-color: rgba(222, 200, 255, 0.9); background: linear-gradient(180deg, rgba(199, 155, 255, 0.34), rgba(115, 67, 188, 0.26)); transform: translateY(-1px); }
#pwBar button.spell.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 0 0 2px rgba(127, 224, 106, 0.35), 0 0 22px -4px rgba(127, 224, 106, 0.7); }
#pwBar button.spell.on .cost { background: #16320f; }
#pwBar button.spell:disabled { opacity: 1; color: rgba(239, 228, 255, 0.38); background: rgba(40, 32, 58, 0.35); border-color: rgba(199, 155, 255, 0.16); }
#pwBar button.spell:disabled .cost { background: #3a2c52; color: rgba(255, 255, 255, 0.6); }

/* užší okno: kouzla pod zdroje vlevo, ať se nepotkají s ovládáním */
@media (max-width: 1180px) {
  #hudPW { left: 14px; top: 62px; transform: none; }
  #goals { top: 116px; }
}
@media (max-width: 900px) {
  #hudTR > button.hb.lab .t { display: none; }
  #hudTR > button.hb.lab { padding: 0 10px; }
}

/* bublina kouzla: cena hned u názvu */
#tip .tcost { margin-left: 6px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: #cfa8ff; white-space: nowrap; }

/* nápověda a Autoři zvuků jdou otevřít i z úvodní stránky a z lobby: okno musí být nad nimi */
#help { z-index: 50; }

/* piktogramy v bublinách nápovědy (ceny ⛏ ⚑ ✦ a zámek místo znaků, které má každý systém jiné) */
#tip svg.ti { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.17em; margin: 0 1px; }
#tip svg.tres { color: var(--gold); }
#tip svg.tpop { color: var(--accent); }
#tip svg.tspk { color: #cfa8ff; }
#tip svg.tlock { color: var(--gold); margin: 0 5px 0 0; }

/* ==========================================================================
   Cookie_CUBES 3.2 — herní obrazovky (ui/shell.js) ve stylu Železa a Popela:
   celé okno nad živou bitvou, tmavý přechod zleva, nadtitulek + nadpis, sekce s popiskem,
   karty a volby jako tlačítka s tenkou linkou, vybraná položka zeleným rámečkem,
   dok s akcemi vlevo dole. Barvy a písma Cookie_CUBES (Barlow, JetBrains Mono, #7fe06a).
   ========================================================================== */
:root {
  --sh-pad: clamp(18px, 4vw, 64px);
  --sh-ink: #eef2ea;
  --sh-mute: #a3b1aa;
  --sh-dim: #8a9a93; /* 3.2.2: světlejší, drobné poznámky mají kontrast aspoň 4,8 : 1 (dřív 4,3) */
  --sh-line: rgba(214, 228, 220, 0.13);
  --sh-line2: rgba(214, 228, 220, 0.24);
  --sh-panel: rgba(9, 14, 19, 0.72);
  --sh-panel2: rgba(13, 20, 27, 0.86);
  --sh-acc: #7fe06a;
  --sh-acc2: #9ff08c;
  --sh-accInk: #0a1807;
  --sh-gold: #f2c66d;
  --sh-bad: #ff8a78;
}
.ov.shell {
  align-items: stretch; justify-content: stretch; padding: 0; z-index: 9;
  backdrop-filter: none; background-image: none;
  background-color: transparent;
  background: linear-gradient(90deg, rgba(4, 6, 10, 0.95) 0%, rgba(4, 6, 10, 0.9) 34%, rgba(4, 6, 10, 0.7) 64%, rgba(4, 6, 10, 0.46) 100%),
    linear-gradient(rgba(4, 6, 10, 0.8), rgba(4, 6, 10, 0) 24%, rgba(4, 6, 10, 0) 70%, rgba(4, 6, 10, 0.65));
}
#misend.shell, #endo.shell { background: linear-gradient(90deg, rgba(4, 6, 10, 0.94) 0%, rgba(4, 6, 10, 0.82) 42%, rgba(4, 6, 10, 0.45) 100%); }
.ov.shell.hidden { display: none; }
.sh-screen { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--sh-ink); font-family: var(--f-body), var(--sym); }
.sh-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: clamp(24px, 5vh, 50px) var(--sh-pad) 118px; scrollbar-width: thin; scrollbar-color: rgba(214, 228, 220, 0.25) transparent; }
.sh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin: 0 0 26px; max-width: 1560px; }
.sh-headR { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sh-eyebrow { font: 600 11.5px/1.3 var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sh-acc); }
.sh-screen .sh-title { font: 700 clamp(32px, 3.3vw, 48px)/1.02 var(--f-display); color: var(--sh-ink); margin: 10px 0 0; letter-spacing: 0.004em; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6); }
.sh-screen .sh-titleXL { font: 700 clamp(40px, 5vw, 72px)/0.98 var(--f-display); margin: 12px 0 20px; color: var(--sh-ink); text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6); }
.sh-screen .sh-titleXL.ok { color: var(--sh-acc); }
.sh-screen .sh-titleXL.bad { color: var(--sh-bad); }
.sh-screen .sh-title2 { font: 700 clamp(28px, 2.4vw, 38px)/1.05 var(--f-display); margin: 8px 0 4px; color: var(--sh-ink); }
.sh-screen .sh-label { font: 600 11px/1.3 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sh-mute); margin: 0 0 12px; }
.sh-sec { margin: 0 0 28px; }
.sh-lead { color: var(--sh-mute); font-size: 16px; line-height: 1.6; max-width: 760px; margin: -8px 0 24px; }
.sh-note { color: var(--sh-dim); font-size: 13.5px; line-height: 1.55; margin: 10px 0 0; }
.sh-note.ok { color: #9fd894; }
.sh-note.bad, .sh-note.warn { color: var(--sh-gold); }
.sh-relay { display: flex; align-items: flex-start; gap: 8px; }
.sh-relay svg.hi { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--sh-acc); }
.sh-desc { color: var(--sh-mute); font-size: 13.5px; line-height: 1.5; margin: 0; font-weight: 400; }
.sh-card { background: var(--sh-panel); border: 1px solid var(--sh-line); border-radius: 8px; padding: 16px 18px; backdrop-filter: blur(6px); }
.sh-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0 0; }

/* --- tlačítka --- */
.sh-screen button { text-transform: none; letter-spacing: 0; filter: none; }
.sh-screen .sh-btn {
  height: 46px; min-height: 0; padding: 0 22px; border-radius: 7px; font: 600 15.5px/1 var(--f-display); letter-spacing: 0.02em;
  background: rgba(14, 21, 28, 0.92); color: var(--sh-ink); border: 1px solid var(--sh-line2); box-shadow: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.sh-screen .sh-btn:hover:not(:disabled) { border-color: rgba(238, 243, 238, 0.6); background: rgba(22, 32, 40, 0.95); transform: none; }
.sh-screen .sh-btn.primary { background: var(--sh-acc); color: var(--sh-accInk); border-color: transparent; font-weight: 700; }
.sh-screen .sh-btn.primary:hover:not(:disabled) { background: var(--sh-acc2); color: var(--sh-accInk); box-shadow: 0 10px 28px -10px rgba(127, 224, 106, 0.7); transform: translateY(-1px); }
.sh-screen .sh-btn.sm { height: 38px; padding: 0 16px; font-size: 14.5px; }
.sh-screen .sh-btn:disabled { opacity: 0.42; cursor: default; }
.sh-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 10px; background: var(--sh-gold); color: #1d1404; font: 700 12px/1 var(--f-mono); font-style: normal; }
.sh-screen .sh-chip {
  height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--sh-line2); background: rgba(10, 16, 22, 0.72);
  color: var(--sh-ink); font: 600 13.5px/1 var(--f-body); box-shadow: none;
}
.sh-screen .sh-chip:hover:not(:disabled) { border-color: rgba(238, 243, 238, 0.55); background: rgba(18, 26, 34, 0.9); }
.sh-screen .sh-chip.on { border-color: var(--sh-acc); color: var(--sh-acc); background: rgba(127, 224, 106, 0.1); }

/* staré pravidlo pro #btnStart, #briefGo, #btnAgain a #btnFacs (pilulky) tu neplatí */
#facsel .sh-btn, #campaign .sh-btn, #misend .sh-btn, #endo .sh-btn { border-radius: 7px; min-height: 0; padding: 0 22px; font-size: 15.5px; }
#facsel .sh-btn.sm, #campaign .sh-btn.sm, #misend .sh-btn.sm, #endo .sh-btn.sm { padding: 0 16px; font-size: 14.5px; }

/* --- dok s akcemi --- */
.sh-dock {
  position: absolute; left: var(--sh-pad); bottom: 20px; z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px; max-width: calc(100% - 2 * var(--sh-pad)); background: rgba(6, 10, 14, 0.9); border: 1px solid var(--sh-line);
  border-radius: 11px; backdrop-filter: blur(10px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}
.sh-wait { color: var(--sh-mute); font-size: 14px; padding: 0 10px; }

/* --- vybíratelné karty (frakce, mapy) --- */
.sh-screen .sh-pick {
  display: block; width: 100%; text-align: left; padding: 0; margin: 0; border-radius: 9px; font: inherit; color: var(--sh-ink);
  background: var(--sh-panel); border: 1px solid var(--sh-line); box-shadow: none; cursor: pointer; transition: border-color 0.18s, background-color 0.18s, transform 0.18s, box-shadow 0.2s;
}
.sh-screen .sh-pick:hover:not(:disabled) { border-color: rgba(238, 243, 238, 0.4); background: var(--sh-panel2); transform: translateY(-1px); }
.sh-screen .sh-pick.on, .sh-screen .sh-pick.on:hover { border-color: var(--sh-acc); background: linear-gradient(180deg, rgba(127, 224, 106, 0.13), rgba(127, 224, 106, 0.03)), var(--sh-panel2); box-shadow: 0 0 0 1px rgba(127, 224, 106, 0.4), 0 14px 36px -22px rgba(127, 224, 106, 0.7); color: var(--sh-ink); }
.sh-screen .sh-pick:disabled { cursor: default; opacity: 0.6; }
.sh-screen .sh-pick.on:disabled { opacity: 1; }
.sh-crest { width: 48px; height: 48px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.sh-crest.sm { width: 28px; height: 28px; }
.sh-crest.xs { width: 20px; height: 20px; }
.sh-crest.none { display: inline-block; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.sh-pt { width: 34px; height: 34px; object-fit: contain; image-rendering: auto; }

/* --- nastavení bitvy --- */
.sh-setupGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 34px; max-width: 1560px; }
@media (min-width: 1240px) { .sh-setupGrid { grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.85fr); } }
.sh-facGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .sh-facGrid { grid-template-columns: minmax(0, 1fr); } }
.sh-fac { padding: 16px 16px 12px !important; display: flex !important; flex-direction: column; gap: 10px; min-height: 100%; }
.sh-facTop { display: flex; align-items: center; gap: 12px; }
.sh-facT { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-facT b { font: 700 22px/1.05 var(--f-display); }
.sh-motto { font: 600 10.5px/1.3 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sh-gold); }
.sh-fac.f-kral .sh-motto { color: #e9c46a; }
.sh-fac.f-horda .sh-motto { color: #f08a6e; }
.sh-fac.f-podkop .sh-motto { color: #c2a9ff; }
.sh-fac .sh-desc { font-size: 13px; flex: 1; }
.sh-units { display: flex; gap: 4px; padding-top: 8px; border-top: 1px solid var(--sh-line); }
.sh-slots { display: flex; flex-direction: column; gap: 8px; }
.sh-slot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: var(--sh-panel); border: 1px solid var(--sh-line); border-radius: 8px; }
.sh-slot.me { border-color: rgba(127, 224, 106, 0.35); }
.sh-slot.off { opacity: 0.6; }
.sh-sw { width: 10px; height: 30px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }
.sh-slotN { font: 600 15px/1.2 var(--f-display); min-width: 120px; flex: 1; }
.sh-facPick { display: flex; gap: 4px; }
.sh-screen .sh-fp { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 7px; background: rgba(10, 16, 22, 0.7); border: 1px solid var(--sh-line); box-shadow: none; }
.sh-screen .sh-fp:hover:not(:disabled) { border-color: rgba(238, 243, 238, 0.5); background: rgba(18, 26, 34, 0.9); }
.sh-screen .sh-fp.on { border-color: var(--sh-acc); background: rgba(127, 224, 106, 0.14); }
.sh-screen .sh-fp:disabled { opacity: 0.35; }
.sh-screen .sh-fp.on:disabled { opacity: 0.9; }
.sh-screen .sh-team { height: 34px; padding: 0 12px; border-radius: 6px; font: 600 13px/1 var(--f-body); color: var(--sh-ink); background: rgba(10, 16, 22, 0.72); border: 1px solid var(--sh-line2); box-shadow: none; }
.sh-screen .sh-team.t0 { border-color: rgba(88, 166, 255, 0.7); }
.sh-screen .sh-team.t1 { border-color: rgba(255, 93, 93, 0.7); }
.sh-screen .sh-team.t2 { border-color: rgba(255, 215, 106, 0.7); }
.sh-screen .sh-team.t3 { border-color: rgba(199, 155, 255, 0.7); }
.sh-screen .sh-team.t4 { border-color: rgba(79, 214, 192, 0.7); }
.sh-screen .sh-team.t5 { border-color: rgba(255, 154, 77, 0.7); }
.sh-screen .sh-ready { height: 34px; padding: 0 12px; border-radius: 6px; font: 600 13px/1 var(--f-body); color: var(--sh-mute); background: rgba(10, 16, 22, 0.72); border: 1px solid var(--sh-line2); box-shadow: none; }
.sh-screen .sh-ready.on { color: var(--sh-accInk); background: var(--sh-acc); border-color: transparent; }
.sh-screen .sh-ready:disabled { opacity: 0.85; }
.sh-net { display: flex; flex-direction: column; gap: 4px; }
.sh-netT { margin: 0; font-size: 15px; }
.sh-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 600 14px var(--f-display); color: var(--sh-mute); }
.sh-input { height: 40px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--sh-line2); background: rgba(4, 8, 12, 0.85); color: var(--sh-ink); font: 500 15px var(--f-body); min-width: 0; }
.sh-input:focus { outline: none; border-color: var(--sh-acc); box-shadow: 0 0 0 3px rgba(127, 224, 106, 0.2); }
.sh-field .sh-input { width: 220px; max-width: 100%; }
.sh-linkRow { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; flex-wrap: wrap; }
.sh-link { flex: 1 1 280px; font: 500 13px var(--f-mono); color: var(--sh-mute); }
.sh-linkRow.edit .sh-link { color: var(--sh-ink); border-color: rgba(127, 224, 106, 0.55); }
.sh-link::placeholder { color: var(--sh-dim); font-family: var(--f-body); }
.sh-mapBig { margin: 0 0 14px; border-radius: 9px; overflow: hidden; border: 1px solid var(--sh-line2); background: #10160f; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9); }
.sh-mapBig img, .sh-mapBig .sh-mapNone { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.sh-mapBig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding: 12px 14px; background: rgba(6, 10, 14, 0.92); }
.sh-mapBig figcaption b { font: 700 22px/1.1 var(--f-display); }
.sh-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.sh-meta div { display: flex; gap: 6px; font-size: 13px; }
.sh-meta dt { color: var(--sh-dim); }
.sh-meta dd { margin: 0; color: var(--sh-ink); font-weight: 600; }
.sh-mapGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sh-map { overflow: hidden; }
.sh-map img, .sh-map .sh-mapNone { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #121a12; border-bottom: 1px solid var(--sh-line); }
.sh-mapN { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 9px; }
.sh-mapN b { font: 700 15px/1.1 var(--f-display); }
.sh-mapN i { font-style: normal; font-size: 12px; color: var(--sh-dim); }
.sh-mapNone { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 8px, transparent 8px 16px), #121a12; }

/* --- kampaň --- */
.sh-tabs { display: flex; gap: 8px; }
.sh-screen .sh-tab { height: 52px; padding: 0 14px 0 10px; display: flex; align-items: center; gap: 10px; border-radius: 9px; background: var(--sh-panel); border: 1px solid var(--sh-line); color: var(--sh-ink); box-shadow: none; font: inherit; }
.sh-screen .sh-tab span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sh-screen .sh-tab b { font: 700 15px/1 var(--f-display); }
.sh-screen .sh-tab i { font: 600 11px/1 var(--f-mono); font-style: normal; color: var(--sh-dim); letter-spacing: 0.08em; }
.sh-screen .sh-tab:hover:not(:disabled) { border-color: rgba(238, 243, 238, 0.45); background: var(--sh-panel2); }
.sh-screen .sh-tab.on, .sh-screen .sh-tab.on:hover { border-color: var(--sh-acc); background: rgba(127, 224, 106, 0.1); color: var(--sh-ink); }
.sh-screen .sh-tab.on i { color: var(--sh-acc); }
.sh-pts { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.sh-pts b { font: 700 30px/1 var(--f-display); color: var(--sh-gold); }
.sh-pts span { font: 600 11px/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sh-mute); }
.sh-campGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 34px; max-width: 1560px; align-items: start; }
@media (min-width: 1180px) { .sh-campGrid { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.9fr); } }
.sh-cmap { position: relative; width: 100%; border-radius: 6px; box-shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(214, 228, 220, 0.16); overflow: visible; }
.sh-cmapCv { position: absolute; inset: 0; border-radius: 6px; display: block; }
.sh-nodes { position: absolute; inset: 0; }
.sh-screen .sh-node {
  position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; cursor: pointer; z-index: 1;
}
.sh-screen .sh-node:hover:not(:disabled) { background: none; border: 0; transform: none; }
.sh-nodeC {
  position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 14px/1 var(--f-display); color: #eaf0e4; background: rgba(12, 18, 16, 0.92); border: 2px solid rgba(232, 236, 224, 0.55);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); transition: transform 0.15s, box-shadow 0.2s;
}
.sh-node.done .sh-nodeC { background: #2f3a24; border-color: var(--fc, #7fe06a); color: var(--fc, #7fe06a); }
.sh-cmap.f-kral { --fc: #e9c46a; }
.sh-cmap.f-horda { --fc: #ec6a4f; }
.sh-cmap.f-podkop { --fc: #ad8ff2; }
.sh-node.open .sh-nodeC { border-color: var(--sh-acc); color: var(--sh-acc); box-shadow: 0 0 0 4px rgba(127, 224, 106, 0.18), 0 0 22px rgba(127, 224, 106, 0.45); animation: shPulse 2.4s ease-in-out infinite; }
.sh-node.locked .sh-nodeC { opacity: 0.6; border-style: dashed; color: rgba(232, 236, 224, 0.7); }
.sh-node.sel .sh-nodeC { transform: scale(1.22); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 26px rgba(127, 224, 106, 0.55); }
.sh-node:hover .sh-nodeC { transform: scale(1.12); }
.sh-node.sel:hover .sh-nodeC { transform: scale(1.22); }
.sh-node:focus-visible { outline: none; }
.sh-node:focus-visible .sh-nodeC { outline: 2px solid var(--sh-acc); outline-offset: 3px; }
@keyframes shPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(127, 224, 106, 0.16), 0 0 18px rgba(127, 224, 106, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(127, 224, 106, 0.08), 0 0 30px rgba(127, 224, 106, 0.55); } }
@media (prefers-reduced-motion: reduce) { .sh-node.open .sh-nodeC { animation: none; } }
.sh-nodeL {
  position: absolute; left: 0; top: 20px; transform: translateX(-50%); width: max-content; max-width: 150px; text-align: center; white-space: normal;
  font: 600 12px/1.25 var(--f-body); color: #e6ebe0; padding: 3px 7px; border-radius: 4px; background: rgba(8, 12, 10, 0.78); border: 1px solid rgba(232, 236, 224, 0.12);
  pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.sh-node[data-lp='t'] .sh-nodeL { top: auto; bottom: 20px; }
.sh-node[data-lp='r'] .sh-nodeL { top: 0; left: 21px; transform: translateY(-50%); text-align: left; }
.sh-node[data-lp='l'] .sh-nodeL { top: 0; left: auto; right: 21px; transform: translateY(-50%); text-align: right; }
.sh-node.locked .sh-nodeL { color: rgba(230, 235, 224, 0.62); }
.sh-node.sel .sh-nodeL { color: #fff; border-color: rgba(127, 224, 106, 0.55); background: rgba(10, 22, 10, 0.88); }
.sh-cmapFoot { margin: 12px 2px 0; font: 600 12px/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--sh-dim); }
.sh-brief { background: rgba(7, 11, 15, 0.78); border: 1px solid var(--sh-line); border-radius: 9px; padding: 20px 22px; backdrop-filter: blur(8px); }
.sh-place { font: 600 12px/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sh-gold); margin: 0 0 14px; }
.sh-briefT { color: #d6ddd2; font-size: 15px; line-height: 1.62; margin: 0 0 18px; }
.sh-briefT b { color: var(--sh-ink); }
.sh-lockMsg { color: var(--sh-mute); font-size: 15px; }
.sh-goals { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.sh-goals li { display: flex; align-items: baseline; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--sh-line); font-size: 14.5px; line-height: 1.4; }
.sh-goals li:last-child { border-bottom: 1px solid var(--sh-line); }
.sh-goals li i { font-style: normal; color: var(--sh-acc); font-size: 11px; width: 14px; flex: none; text-align: center; }
.sh-goals li.bonus i { color: var(--sh-gold); font-size: 13px; }
.sh-goals li em { margin-left: auto; font: 600 10px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sh-gold); font-style: normal; padding-left: 10px; }
.sh-goals.res li.ok i { color: var(--sh-acc); font-size: 14px; }
.sh-goals.res li.bad i { color: var(--sh-bad); font-size: 14px; }
.sh-goals.res li.bad span { color: var(--sh-mute); }
.sh-table { margin: 0; display: flex; flex-direction: column; }
.sh-table > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--sh-line); }
.sh-table dt { color: var(--sh-dim); font-size: 13.5px; flex: none; }
.sh-table dd { margin: 0; text-align: right; font-weight: 600; font-size: 14px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.sh-sides { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sh-side { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--sh-line); }
.sh-side b { font: 600 13px var(--f-display); }
.sh-side i { font-style: normal; font-weight: 500; font-size: 12px; color: var(--sh-dim); }
.sh-side.ally { border-color: rgba(127, 224, 106, 0.4); }
.sh-side.ally i { color: var(--sh-acc); }
.sh-newL { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sh-new { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 6px; background: rgba(127, 224, 106, 0.06); border: 1px solid rgba(127, 224, 106, 0.22); }
.sh-new img { width: 28px; height: 28px; object-fit: contain; }
.sh-new .sh-pt { width: 28px; height: 28px; }
.sh-new i { font-style: normal; font-weight: 600; font-size: 12.5px; }
.sh-new.pow svg { width: 22px; height: 22px; margin: 3px; color: #d9c8ff; }
.sh-briefBan { position: relative; margin: -20px -22px 16px; height: 132px; overflow: hidden; border-radius: 9px 9px 0 0; border-bottom: 1px solid var(--sh-line); }
.sh-briefBan img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); filter: saturate(1.05); }
.sh-briefBan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(7, 11, 15, 0) 40%, rgba(7, 11, 15, 0.92)); }
.sh-briefBan span { position: absolute; left: 22px; bottom: 10px; z-index: 1; font: 600 11px/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(238, 242, 234, 0.85); }

/* --- kronika a výsledky --- */
.sh-chronCol, .sh-resCol { max-width: 720px; margin: 0 0 0 clamp(0px, 14vw, 280px); }
.sh-resCol { margin-left: 0; max-width: 760px; }
/* výsledek stojí uprostřed výšky (automatické okraje: při přetečení se nic neusekne nahoře) */
.sh-screen.sh-result .sh-scroll { display: flex; flex-direction: column; }
.sh-screen.sh-result .sh-resCol { margin-top: auto; margin-bottom: auto; padding-bottom: 4vh; }
.sh-screen.sh-chron .sh-titleXL { color: var(--sh-gold); }
.sh-cast { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 22px; }
.sh-castI { display: inline-flex; align-items: center; gap: 8px; color: var(--sh-mute); font-size: 13px; }
.sh-castI .sh-pt { width: 44px; height: 44px; border-radius: 6px; background: rgba(30, 44, 30, 0.6); border: 1px solid var(--sh-line); }
.sh-castI i { font-style: normal; }
.sh-prose { color: #dfe5da; font-size: 17px; line-height: 1.72; margin: 0 0 24px; }
.sh-prose b { color: var(--sh-ink); }
.sh-prose.drop::first-letter { float: left; font: 700 64px/0.82 var(--f-display); color: var(--sh-gold); margin: 6px 10px 0 0; }
.sh-prose.epilog { border-left: 2px solid var(--sh-gold); padding-left: 18px; }
.sh-recaps { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.sh-recaps li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--sh-line); }
.sh-recaps b { font: 700 18px/1.2 var(--f-display); color: var(--sh-ink); }
.sh-recaps span { color: var(--sh-mute); font-size: 15px; line-height: 1.6; }
.sh-gain { display: inline-block; margin: 0 0 20px; padding: 8px 14px; border-radius: 7px; background: rgba(242, 198, 109, 0.12); border: 1px solid rgba(242, 198, 109, 0.4); color: var(--sh-gold); font: 700 16px var(--f-display); }
.sh-stats { max-width: 520px; margin: 0 0 20px; }
.sh-stats dd { font: 700 20px var(--f-display); }

/* --- kouzla --- */
.sh-splGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; max-width: 1240px; }
.sh-spl { display: flex; flex-direction: column; gap: 10px; }
.sh-spl.up { border-color: rgba(242, 198, 109, 0.35); }
.sh-splTop { display: flex; align-items: center; gap: 12px; }
.sh-splTop b { display: block; font: 700 20px/1.1 var(--f-display); margin: 0 0 6px; }
.sh-splIc { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(199, 155, 255, 0.22), rgba(115, 67, 188, 0.18)); border: 1px solid rgba(199, 155, 255, 0.42); color: #efe4ff; flex: none; }
.sh-splIc svg { width: 26px; height: 26px; }
.sh-pips { display: inline-flex; gap: 5px; }
.sh-pips i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid rgba(242, 198, 109, 0.6); }
.sh-pips i.on { background: var(--sh-gold); border-color: var(--sh-gold); box-shadow: 0 0 6px rgba(242, 198, 109, 0.6); }
.sh-splLv { margin: 0; font-size: 13px; color: var(--sh-gold); font-weight: 600; }
.sh-spl .sh-btn, .sh-spl .sh-max { align-self: flex-start; margin-top: auto; }
.sh-max { font: 600 12px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sh-gold); padding: 10px 0; }
.sh-code { max-width: 820px; }

/* --- přechody obrazovek --- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }

/* --- úzké obrazovky (web na telefonu) --- */
@media (max-width: 720px) {
  .sh-scroll { padding-bottom: 150px; }
  .sh-dock { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .sh-dock .sh-btn { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
  .sh-tabs { flex-wrap: wrap; }
  .sh-nodeL { max-width: 96px; font-size: 10.5px; }
  .sh-chronCol { margin-left: 0; }
}
@media (max-height: 760px) { .sh-scroll { padding-top: 22px; } .sh-head { margin-bottom: 18px; } }

.sh-facNote { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 26px; border-radius: 8px; background: rgba(9, 14, 19, 0.6); border: 1px solid var(--sh-line); }
.sh-facNote b { display: block; font: 700 16px/1.2 var(--f-display); margin: 2px 0 6px; }
.sh-next { padding: 18px 20px; margin: 0 0 28px; border-radius: 9px; border: 1px solid rgba(127, 224, 106, 0.32); background: linear-gradient(180deg, rgba(127, 224, 106, 0.08), rgba(127, 224, 106, 0.02)), rgba(7, 11, 15, 0.75); }
.sh-next .sh-briefT { margin: 0; font-size: 15px; }

/* výsledek bitvy nebo mise: herní lišta, minimapa a panel se schovají (bojiště zůstane vidět) */
body.sh-res #hudTL, body.sh-res #hudTR, body.sh-res #hudPW, body.sh-res #mmbox, body.sh-res #panel, body.sh-res #unitBar,
body.sh-res #goals, body.sh-res #grpBar, body.sh-res #bldpop, body.sh-res #tip { visibility: hidden !important; }

/* --- okna nad hrou (nápověda, potvrzení, odpočet) ve stejném stylu --- */
#help .box, #conf .box, #countov .countCard {
  border-radius: 12px; background: rgba(7, 11, 15, 0.95); border: 1px solid var(--sh-line2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
}
#help .box { max-width: 760px; padding: 26px 30px; }
#help h2, #conf h2 { font: 700 26px/1.15 var(--f-display); color: var(--sh-ink); margin: 0 0 14px; }
#help #helpBody { font-weight: 400; color: #d6ddd2; font-size: 14.5px; line-height: 1.65; }
#conf .box { padding: 24px 26px; max-width: 520px; }
#conf .box p { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
#help .box > button, #conf .box button {
  height: 44px; min-height: 0; padding: 0 20px; border-radius: 7px; font: 600 15px/1 var(--f-display);
  background: rgba(14, 21, 28, 0.92); color: var(--sh-ink); border: 1px solid var(--sh-line2); box-shadow: none; text-transform: none;
}
#conf #confYes { background: var(--sh-acc); color: var(--sh-accInk); border-color: transparent; font-weight: 700; }
#help .box > button:hover, #conf .box button:hover { border-color: rgba(238, 243, 238, 0.6); }
#countov .countCard { padding: 26px 42px; text-align: center; }
#countov .cdN { font: 700 84px/1 var(--f-display); color: var(--sh-acc); text-shadow: 0 0 40px rgba(127, 224, 106, 0.45); }
#countov .cdT { font: 600 12px/1.4 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sh-mute); margin-top: 8px; }

/* hlášky (#nettoast) nad dokem s tlačítky, když je otevřená některá z obrazovek */
body:has(.ov.shell:not(.hidden)) #nettoast { bottom: 104px; }
@media (max-width: 720px) { body:has(.ov.shell:not(.hidden)) #nettoast { bottom: 150px; } }

/* řádek čísel na konci mise (padlí nepřátelé, vlastní ztráty, zbořené budovy, čas) */
.sh-statRow { display: flex; flex-wrap: wrap; gap: 0; margin: 4px 0 22px; max-width: 760px; border: 1px solid var(--sh-line); border-radius: 9px; background: rgba(7, 11, 15, 0.72); }
.sh-statRow > div { flex: 1 1 120px; padding: 12px 16px; border-left: 1px solid var(--sh-line); }
.sh-statRow > div:first-child { border-left: 0; }
.sh-statRow dt { font: 600 10.5px/1.3 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sh-mute); }
.sh-statRow dd { margin: 6px 0 0; font: 700 24px/1 var(--f-display); color: var(--sh-ink); }

/* upozornění pro telefon v nastavení bitvy */
.sh-mob { margin: -6px 0 24px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(242, 198, 109, 0.35); background: rgba(242, 198, 109, 0.08); max-width: 760px; }
.sh-mob b { display: block; font: 700 15px/1.25 var(--f-display); color: var(--sh-gold); margin: 0 0 4px; }
.sh-mob p { margin: 0; color: #e8dcc0; font-size: 13.5px; line-height: 1.55; }

/* úzká mapa kampaně: jen štítek vybrané mise */
.sh-cmap.compact .sh-node:not(.sel) .sh-nodeL { display: none; }

/* pozvánka od přítele: jméno a Připojit se */
.sh-joinCard { max-width: 720px; padding: 24px 26px; }
.sh-joinCrests { display: flex; gap: 6px; margin: 0 0 16px; }
.sh-joinCrests .sh-crest { width: 42px; height: 42px; }
.sh-joinCard .sh-lead { margin: 0 0 18px; color: var(--sh-ink); }
.sh-joinCard .sh-field .sh-input { width: 280px; }

/* 3.2.2 (přístupnost) */
/* text jen pro čtečky (stav mise u bodu na mapě) */
.sh-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* nadpis obrazovky dostává fokus skriptem (ať čtečka i klávesnice začnou na nové obrazovce); rámeček nepotřebuje */
.sh-title:focus, .sh-titleXL:focus, #helpTitle:focus, main.sh-screen:focus { outline: none; }
/* posuvná plocha bez ovládacích prvků (kronika) jde posouvat klávesnicí; fokus je vidět */
.sh-scroll[tabindex]:focus-visible { outline: 2px solid var(--sh-acc); outline-offset: -4px; }

/* ==== Hlavička a úvod 3.2.1: stejný jazyk jako Cookie_Universum a Cookie_Arcade ====
   Hvězda v barvě webu (Cookie_CUBES zelená #7fe06a, Arcade červená, Universum bílá), jméno v JetBrains Mono,
   odkazy na sekce, kulatá ikonová tlačítka, jazyk s šipkou, Kup mi kafe a odkaz na Universum v barvě webu.
   V úvodu kana „クッキー・キューブス“, štítek, dvouřádkový nadpis (druhý řádek v barvě webu) a řádek čísel.
   Selektory začínají #landing, ať přebijí starší pravidla ze site.css a game.css. */

#landing { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { #landing { scroll-behavior: auto; } }

/* --- hlavička: sklo přes celou šířku, obsah zarovnaný s úvodem --- */
#landing .ccHead {
  position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line);
  background: rgba(3, 5, 10, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
#landing .ccHeadIn {
  max-width: 1320px; margin: 0 auto; padding: 0 34px; min-height: 72px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
#landing .ccBrand {
  display: inline-flex; align-items: center; gap: 12px; flex: none; color: var(--fg); text-decoration: none; white-space: nowrap;
  font: 700 15px/1 var(--f-mono); letter-spacing: 0.22em;
}
#landing .ccBrand .ccStar { flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 10px rgba(127, 224, 106, 0.35)); }
#landing .ccBrand:focus-visible, #landing .ccLink:focus-visible, #landing .ccHead .ccIco:focus-visible,
#landing .ccHead .kofi:focus-visible, #landing .ccHead .sitelink.hub:focus-visible, #landing .ccHead details.jazyk > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
#landing .ccMenu { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; min-width: 0; }
#landing .ccLink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  font: 600 13px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); text-decoration: none;
  transition: background-color 0.2s ease;
}
#landing .ccLink:hover { background: rgba(238, 243, 248, 0.08); }
#landing .ccHead .landLangs {
  position: static; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap;
  max-width: none; margin: 0 0 0 6px; padding: 0;
}

/* kulatá ikonová tlačítka: ovládání (nápověda) a zvuk */
#landing .ccHead .ccIco {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-width: 0; min-height: 0;
  margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(6, 11, 19, 0.6); color: var(--fg);
  box-shadow: none; text-shadow: none; filter: none; transform: none; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#landing .ccHead .ccIco:hover { background: rgba(238, 243, 248, 0.08); border-color: var(--fg-2); transform: none; filter: none; }
#landing .ccHead .ccIco svg { width: 20px; height: 20px; display: block; }

/* jazyk: glóbus, kód a šipka */
#landing .ccHead details.jazyk > summary {
  height: 44px; padding: 0 13px; gap: 7px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(6, 11, 19, 0.6);
  font: 700 13px/1 var(--f-mono); letter-spacing: 0.12em; color: var(--fg); box-shadow: none;
}
#landing .ccHead details.jazyk > summary .ico { color: var(--fg); }
#landing .ccHead details.jazyk > summary .sipka { flex: none; opacity: 0.8; transition: transform 0.2s ease; }
#landing .ccHead details.jazyk[open] > summary .sipka { transform: rotate(180deg); }
#landing .ccHead details.jazyk > summary:hover, #landing .ccHead details.jazyk[open] > summary { background: rgba(238, 243, 248, 0.08); border-color: var(--fg-2); }
#landing .ccHead details.jazyk .jzList { top: calc(100% + 8px); border-radius: 16px; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.8); }

/* Kup mi kafe (jantarová jako na všech webech) */
#landing .ccHead .kofi {
  display: inline-flex; align-items: center; gap: 10px; flex: none; height: 44px; padding: 0 18px; box-sizing: border-box;
  border: 1px solid rgba(255, 192, 97, 0.7); border-radius: 999px; background: rgba(255, 192, 97, 0.1); color: #ffc061;
  font: 700 13px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  text-shadow: none; box-shadow: none; transition: background-color 0.2s ease;
}
#landing .ccHead .kofi:hover, #landing .ccHead .kofi:focus-visible { background: rgba(255, 192, 97, 0.2); color: #ffc061; border-color: rgba(255, 192, 97, 0.85); box-shadow: none; }
#landing .ccHead .kofi svg { width: 18px; height: 18px; flex: none; }

/* odkaz na Cookie_Universum v barvě webu (Arcade má svou červenou, Cubes zelenou) */
#landing .ccHead .sitelink.hub {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid rgba(127, 224, 106, 0.5); border-radius: 999px; background: transparent; color: var(--accent);
  font: 700 12px/1 var(--f-mono); letter-spacing: 0.14em; text-decoration: none; white-space: nowrap;
  text-shadow: none; box-shadow: none; filter: none; transform: none;
}
#landing .ccHead .sitelink.hub span { transform: none; }
#landing .ccHead .sitelink.hub svg { flex: none; opacity: 0.85; }
#landing .ccHead .sitelink.hub:hover { background: rgba(127, 224, 106, 0.1); filter: none; transform: none; }

/* --- úvod: obsah stránky stejně široký jako hlavička (jméno vlevo nad nadpisem) --- */
#landing .landWrap { max-width: 1320px; }
#landing .landHero { padding: clamp(28px, 7vh, 80px) 0 52px; gap: clamp(28px, 3.5vw, 56px); }
#landing .landText { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
#landing .landText .kana { font-family: 'Noto Sans JP', 'Yu Gothic', 'Hiragino Sans', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.2; letter-spacing: 0.42em; color: #a3b3c4; }
#landing #landEyebrow { margin: 0; font: 600 12px/1.45 var(--f-mono); letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); }
#landing .landTitle {
  margin: 2px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(52px, min(6.2vw, 12.5vh), 112px);
  line-height: 0.88; letter-spacing: -0.012em; text-transform: uppercase; color: var(--fg); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
#landing .landTitle span { display: block; }
#landing .landTitle .t2 { color: var(--accent); }
#landing #landTag { margin: 2px 0 0; max-width: 40ch; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.55; color: var(--fg-2); }
#landing .landCta { margin: 6px 0 0; gap: 12px; }
#landing .landCta button {
  display: inline-flex; align-items: center; min-height: 54px; height: auto; padding: 0 26px; border-radius: 999px;
  font: 600 18px/1 var(--f-body); letter-spacing: 0; text-transform: none; box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}
#landing .landCta button.primary { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; }
#landing .landCta button.primary:hover, #landing .landCta button.primary:focus-visible { background: var(--accent); box-shadow: 0 0 28px -4px rgba(127, 224, 106, 0.8); transform: translateY(-1px); }
#landing .landCta button:not(.primary) { border: 1px solid var(--line-2); background: rgba(6, 11, 19, 0.5); color: var(--fg); }
#landing .landCta button:not(.primary):hover { background: rgba(238, 243, 248, 0.08); border-color: var(--fg-2); transform: none; }

/* řádek čísel (jako stav automatu na Arcade) */
#landing .landStav {
  display: grid; grid-template-columns: 1fr 1fr 1.35fr; width: 100%; max-width: 520px; margin: 8px 0 0; padding: 0; list-style: none;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden;
}
#landing .landStav li { padding: 14px 16px 12px; min-width: 0; }
#landing .landStav li + li { border-left: 1px solid var(--line); }
#landing .landStav small { display: block; font: 600 10.5px/1.25 var(--f-mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#landing .landStav b { display: block; margin-top: 4px; font: 600 20px/1.15 var(--f-display); letter-spacing: 0.02em; color: var(--fg); white-space: nowrap; }
#landing .landStav b.ac { color: var(--accent); }
#landing #landCtaNote { margin: 0; font: 500 12px/1.5 var(--f-mono); letter-spacing: 0.04em; color: var(--muted); }

/* 3.3: co hra potřebuje (stejně jako u her v Herně Cookie_Universum): počítač, prohlížeč, obrazovka */
#landing .landReq { display: flex; flex-wrap: wrap; gap: 3px 20px; max-width: 560px; margin: -6px 0 0; font: 500 12px/1.5 var(--f-mono); letter-spacing: 0.04em; }
#landing .landReq div { display: flex; gap: 8px; min-width: 0; }
#landing .landReq dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; line-height: 18px; white-space: nowrap; }
#landing .landReq dd { margin: 0; color: var(--fg-2); }

/* 3.3: hra je jen pro počítač. Na telefonu a tabletu (třída „pconly“ z web/lang.js) nahradí tlačítka Hrát a Kampaň
   upozornění s odkazem pro odeslání adresy na počítač; živou ukázku jde sledovat dál. */
#landing .landPc, #landing .pcNote, #landing .pcJoin { display: none; }
html.pconly #landing #landCtaMain, html.pconly #landing #landPlay2, html.pconly #landing #landCamp2, html.pconly #landing #mpGo { display: none; }
html.pconly #landing .landPc {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; max-width: 560px; margin: 6px 0 0; padding: 18px 18px 14px;
  border: 1px solid rgba(242, 198, 109, 0.42); border-radius: 20px; background: rgba(24, 18, 8, 0.82);
}
html.pconly #landing .landPc.ping { animation: pcPing 0.9s ease-out 1; }
@keyframes pcPing { 0% { box-shadow: 0 0 0 0 rgba(242, 198, 109, 0.55); } 100% { box-shadow: 0 0 0 16px rgba(242, 198, 109, 0); } }
@media (prefers-reduced-motion: reduce) { html.pconly #landing .landPc.ping { animation: none; } }
#landing .landPc .pcIco { flex: 0 0 auto; margin-top: 1px; color: #f2c66d; }
#landing .landPc .pcTxt { min-width: 0; }
#landing .landPc b { display: block; font: 700 20px/1.2 var(--f-display); letter-spacing: 0.01em; color: #f2c66d; }
#landing .landPc p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
html.pcjoin #landing .landPc .pcJoin { display: block; color: var(--fg); font-weight: 600; }
#landing .landPc .pcAct { margin: 14px 0 0; gap: 10px; flex-wrap: wrap; }
#landing .landPc .pcAct button { min-height: 48px; padding: 0 20px; font-size: 16px; }
#landing .landPc .pcGo {
  display: inline-block; min-height: 44px; margin: 6px 0 0; padding: 0; border: 0; border-radius: 6px; background: none; box-shadow: none;
  font: 500 13.5px/1.4 var(--f-body); letter-spacing: 0; text-transform: none; text-align: left; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#landing .landPc .pcGo:hover, #landing .landPc .pcGo:focus-visible { color: var(--fg); filter: none; transform: none; }
html.pconly #landing .pcNote { display: block; margin: 0; font: 600 14px/1.5 var(--f-body); color: #f2c66d; }
html.pconly #landing .landCloser .pcNote { flex-basis: 100%; text-align: center; }

/* karta „Co tě čeká“: rám jako obrazovka automatu (akcentový proužek nahoře, štítek v mono písmu) */
#landing .startCard {
  padding: 20px 22px 16px; border: 1px solid var(--line-2); border-radius: 24px;
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.86), rgba(4, 8, 14, 0.9));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 30px 90px -30px rgba(127, 224, 106, 0.35), 0 0 60px -30px rgba(127, 224, 106, 0.5);
}
#landing .startCard::before { top: -1px; left: 34px; width: 72px; height: 3px; }
#landing .startCard h3 { margin: 0 0 14px; font: 600 11.5px/1.35 var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }

/* odkazy z hlavičky na sekce nemají skončit pod hlavičkou */
#landing .landSec { scroll-margin-top: 88px; }

/* --- když se hlavička nevejde (délka textů se liší podle jazyka): ui/shell.js (fitHead) postupně schová
   odkazy na sekce, text u Kup mi kafe a ovládání, zkrátí odkaz na Universum na „UNIVERSUM ↗“, schová jméno u hvězdy
   a na nejužším telefonu radši schová Kup mi kafe než odkaz na Universum --- */
/* stažené mezery: první krok, když se hlavička nevejde (němčina na počítači) */
#landing .ccHead.h-tight .ccHeadIn { gap: 10px; }
#landing .ccHead.h-tight .ccMenu { gap: 2px; }
#landing .ccHead.h-tight .ccLink { padding: 0 9px; letter-spacing: 0.12em; }
#landing .ccHead.h-tight .landLangs { gap: 4px; margin-left: 2px; }
#landing .ccHead.h-tight .kofi { padding: 0 13px; gap: 8px; letter-spacing: 0.1em; }
#landing .ccHead.h-tight .sitelink.hub { padding: 0 11px; }
#landing .ccHead.h-unishort .sitelink.hub .u1 { display: none; }
#landing .ccHead.h-nokofi2 .kofi { display: none; }
#landing .ccHead.h-nouni .sitelink.hub { display: none; }
#landing .ccHead.h-nolinks .ccLink { display: none; }
#landing .ccHead.h-nokofi .kofi { padding: 0 13px; }
#landing .ccHead.h-nokofi .kofi span { display: none; }
#landing .ccHead.h-nohelp #landHelp { display: none; }
#landing .ccHead.h-nobrand .ccBrand span { display: none; }
#landing #landTag { text-wrap: pretty; }
@media (max-width: 980px) {
  #landing .ccHeadIn { padding: 0 20px; }
  #landing .landHero { padding-top: 28px; }
}
@media (max-width: 760px) {
  #landing { scroll-padding-top: 72px; }
  #landing .landSec { scroll-margin-top: 72px; }
  #landing .ccHeadIn { min-height: 60px; gap: 8px; padding: 0 14px; }
  #landing .ccMenu, #landing .ccHead .landLangs { gap: 5px; }
  #landing .ccBrand { font-size: 12px; letter-spacing: 0.12em; gap: 7px; }
  #landing .ccBrand .ccStar { width: 20px; height: 20px; }
  #landing .ccHead .ccIco { width: 38px; height: 38px; }
  #landing .ccHead .kofi { height: 38px; }
  #landing .ccHead details.jazyk > summary { height: 38px; padding: 0 10px; gap: 5px; }
  #landing .ccHead details.jazyk > summary .ico { display: none; }
  #landing .landTitle { font-size: clamp(44px, 12vw, 64px); }
  #landing .landStav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #landing .landStav li { padding: 12px 12px 10px; }
  #landing .landStav b { font-size: 18px; }
}
@media (max-width: 420px) {
  #landing .landStav small { letter-spacing: 0.14em; }
}

/* patička: znak webu jako v hlavičce */
#landing .landFoot .ccFootBrand { font-size: 13px; gap: 10px; margin-right: 6px; }
@media (max-width: 760px) { #landing .landFoot .ccFootBrand { font-size: 12px; } }

/* úzký telefon: nabídka jazyků přes celou šířku pod hlavičkou (jinak by z pravého zarovnání přetekla vlevo ven).
   Hlavička má backdrop-filter (pak se „fixed“ počítá od ní) a drží se nahoře přes celou šířku, takže 66 px od
   horního okraje vychází stejně, ať prohlížeč počítá od hlavičky, nebo od okna. */
@media (max-width: 600px) {
  #landing .ccHead details.jazyk .jzList { position: fixed; top: 66px; left: 12px; right: 12px; min-width: 0; }
}

/* 3.2.2 */
/* Úvod je v HTML a je vidět hned, ještě než se načte hra. Bez skriptů zůstane schovaný (ukáže se upozornění
   z <noscript>), s pozvánkou v adrese také (hra otevře rovnou pozvánku). Třídy nastavuje web/lang.js v hlavičce. */
html:not(.js) #landing, html.has-join #landing { display: none; }
/* kliknutí před startem hry se zapamatuje a provede hned po něm */
html.js:not(.ready) #landing .landCta button, html.js:not(.ready) #landing .landCloser button, html.js:not(.ready) #mpGo, html.js:not(.ready) #landHelp { cursor: progress; }
#landing button.wait { opacity: 0.7; }
/* nouzová karta mapy bez obrázku (jen jméno) */
#landing .mapCell.pre { min-height: 44px; display: flex; align-items: flex-end; }
/* hvězda v hlavičce jako cíl pro prst: aspoň 24 × 24 px (na telefonu zbude z loga jen ona); totéž logo v patičce */
#landing .ccHead .ccBrand { min-width: 24px; min-height: 24px; }
#landing .landFoot .ccFootBrand { min-height: 24px; }

/* Než hra hlavičku změří (ui/shell.js přidá třídu „fit“), drží ji pohromadě odhad podle šířky okna:
   stejné kroky, jaké pak skript volí přesně podle jazyka. Bez toho by na telefonu před startem hry přetekla. */
@media (max-width: 1180px) { html:not(.fit) #landing .ccHead .ccLink { display: none; } }
@media (max-width: 900px) {
  html:not(.fit) #landing .ccHead .kofi { padding: 0 13px; }
  html:not(.fit) #landing .ccHead .kofi span { display: none; }
}
@media (max-width: 560px) {
  html:not(.fit) #landing .ccHead #landHelp { display: none; }
  html:not(.fit) #landing .ccHead .sitelink.hub .u1 { display: none; }
  html:not(.fit) #landing .ccHead .ccBrand span { display: none; }
}
@media (max-width: 350px) { html:not(.fit) #landing .ccHead .kofi { display: none; } }

/* Slabý počítač (ui/shell.js změřil málo snímků za sekundu): bez rozostření bitvy za stránkou, panely méně průhledné */
html.lowfx *, html.lowfx *::before, html.lowfx *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lowfx #landing .ccHead { background: rgba(3, 5, 10, 0.93); }
html.lowfx #landing .startCard, html.lowfx #landing .mpBox, html.lowfx #landing .featCell, html.lowfx #landing .mapCell, html.lowfx #landing .lfCard, html.lowfx #landing .card { background-color: rgba(6, 11, 19, 0.92); }
html.lowfx .shell { --sh-panel: rgba(9, 14, 19, 0.92); --sh-panel2: rgba(13, 20, 27, 0.95); }
html.lowfx .sh-brief { background: rgba(7, 11, 15, 0.94); }