:root {
    --panel: #0a090d;
    --panel-soft: #11101a;
    --panel-highlight: #17132a;
    --border: rgba(130, 119, 180, .32);
    --text: #f3f1fa;
    --muted: #b8b3ca;
    --brand: #7d3cf0;
    --brand-strong: #5d26c5;
    --brand-light: #b8a4ff;
    --blue: #3564ed;
    --shadow: 0 12px 28px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: radial-gradient(ellipse at 30% -20%, #21114a 0%, #090817 43%, #020204 82%); }
p { color: var(--muted); line-height: 1.55; }

.login-page { display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-shell { width: min(880px, 100%); display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.login-intro { min-height: 480px; padding: 42px; background: linear-gradient(135deg, #201043, #0a0911 66%); }
.brand { color: var(--brand-light); text-transform: uppercase; letter-spacing: .13em; font-size: .68rem; font-weight: bold; }
.brand strong { display: block; color: var(--text); font-size: .94rem; }
.login-intro h1 { margin: 66px 0 14px; font-size: clamp(2.1rem, 4vw, 3.35rem); line-height: .98; letter-spacing: -.06em; }
.login-intro p { max-width: 310px; }
.login-panel { padding: 48px 36px; background: #08080c; }
.login-card { max-width: 330px; margin: auto; }
.login-card h2 { margin: 0 0 18px; font-size: 1.5rem; letter-spacing: -.03em; }
.login-card form { display: grid; gap: 14px; }
.member-number-group{min-width:0;margin:0;padding:0;border:0}.member-number-group legend{display:block;margin:0 0 7px;padding:0;color:var(--muted);font-size:.69rem;font-weight:bold;letter-spacing:.07em;text-transform:uppercase}.member-number-segments{display:grid;grid-template-columns:64px 12px 64px 12px minmax(92px,1fr);align-items:end;gap:4px}.member-number-segments label{min-width:0;margin:0}.member-number-segments label span{display:block;margin-bottom:5px;font-size:.57rem;text-align:center}.member-number-segments input{box-sizing:border-box;padding:12px 7px;text-align:center;font-variant-numeric:tabular-nums}.member-number-segments b{padding-bottom:12px;color:#756d83;font-size:1rem;text-align:center}.member-number-hint{display:block;margin-top:7px;color:var(--muted);font-size:.7rem;line-height:1.35;text-transform:none}.member-number-segments input.is-autofill-source{letter-spacing:-.04em}
.login-credential-username{position:fixed!important;left:-10000px!important;top:0!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:.01!important;pointer-events:none!important}
label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .69rem; text-transform: uppercase; letter-spacing: .07em; font-weight: bold; }
input { width: 100%; padding: 12px 13px; border: 1px solid var(--border); border-radius: 7px; outline: none; color: var(--text); background: #050507; font: inherit; }
input:focus { border-color: var(--brand-light); box-shadow: 0 0 0 3px rgba(125,60,240,.18); }
button { width: 100%; padding: 12px 14px; border: 0; border-radius: 7px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); font: 800 .92rem Arial, sans-serif; cursor: pointer; }
.meta { margin-top: 16px; text-align: center; }.meta a, summary { color: var(--brand-light); } details { margin-top: 16px; color: var(--muted); font-size: .86rem; } details p { margin: 8px 0 0; }.error { color: #ffc4d0; font-size: .86rem; }
.saved-login-help{margin-top:14px;padding:10px 12px;border:1px solid rgba(130,119,180,.22);border-radius:7px;background:#0d0c12}.saved-login-help summary{cursor:pointer;font-size:.78rem;font-weight:700}.saved-login-help p{font-size:.76rem;line-height:1.45}

.member-page { padding: 22px 0 38px; }.member-page .page { width: min(1120px, calc(100% - 32px)); margin: auto; }
.site-header { position: relative; margin-bottom: 24px; }.site-header .topbar { padding-bottom: 14px; }.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.brand-link { text-decoration: none; }.account { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; text-align: right; }.account b { display: block; color: var(--text); }.account .codename { padding-left: 12px; border-left: 1px solid var(--border); }.logout { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-decoration: none; }
.menu-toggle { display: none; width: auto; padding: 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); font-size: .76rem; letter-spacing: .08em; }.menu-toggle i, .menu-toggle i::before, .menu-toggle i::after { display: block; width: 20px; height: 2px; background: currentColor; content: ''; }.menu-toggle i { position: relative; margin-left: 11px; }.menu-toggle i::before { position: absolute; top: -6px; }.menu-toggle i::after { position: absolute; top: 6px; }
.member-menu { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #070709; }.member-menu ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }.member-menu a { display: block; padding: 10px 12px; color: var(--muted); font-size: .72rem; font-weight: bold; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; }.member-menu a:hover, .member-menu a[aria-current="page"] { color: var(--brand-light); background: rgba(125,60,240,.14); }.menu-backdrop { display: none; }

.hero, .card { border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); }.hero { padding: 24px 26px; border-radius: 11px; background: linear-gradient(115deg, #171035, #0b0a10 64%); }.eyebrow { color: var(--brand-light); font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; font-weight: bold; }.hero h1 { margin: 7px 0; font-size: clamp(1.75rem, 3.8vw, 2.7rem); letter-spacing: -.05em; }.hero p { max-width: 580px; margin: 0; font-size: .92rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }.features { grid-template-columns: repeat(2, 1fr); }.card { padding: 17px; border-radius: 9px; }.label { color: var(--muted); font-size: .82rem; }.value { display: block; margin-top: 8px; color: var(--brand-light); font-size: 1.12rem; font-weight: 800; }.card h2 { margin: 0 0 7px; font-size: 1.03rem; }.card p { margin: 0; font-size: .86rem; }.soon { display: inline-block; margin-top: 12px; color: var(--brand-light); font-size: .86rem; font-weight: bold; }.notice { margin-top: 18px; padding: 13px 15px; border-left: 3px solid var(--brand); border-radius: 5px; background: #0b0a10; }

@media (max-width: 960px) { .site-header .topbar { padding-bottom: 0; }.topbar .account { margin-left: auto; }.menu-toggle { display: inline-flex; align-items: center; }.member-menu { position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: min(310px, 88vw); padding: 68px 25px 25px; overflow-y: auto; border: 0; border-left: 1px solid var(--border); background: #08080c; box-shadow: -20px 0 50px rgba(0,0,0,.52); transform: translateX(105%); transition: transform .24s ease; }.member-menu ul { display: block; }.member-menu a { padding: 12px 0; color: var(--text); font-size: .86rem; }.member-menu a[aria-current="page"] { background: transparent; color: var(--brand-light); }.menu-backdrop { position: fixed; z-index: 19; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none; transition: opacity .24s ease; }.menu-open { overflow: hidden; }.menu-open .member-menu { transform: translateX(0); }.menu-open .menu-backdrop { display: block; opacity: 1; pointer-events: auto; } }
@media (max-width: 760px) { .login-page { padding: 14px; }.login-shell { grid-template-columns: 1fr; border-radius: 10px; }.login-intro { min-height: auto; padding: 30px 25px; }.login-intro h1 { margin: 38px 0 14px; }.login-panel { padding: 30px 24px; } }
@media (max-width: 700px) { .member-page { padding-top: 16px; }.member-page .page { width: calc(100% - 24px); }.grid, .features { grid-template-columns: 1fr; }.hero { padding: 20px; }.account { font-size: .75rem; } }
@media (max-width: 620px) { .topbar .account { display: none; }.site-header { margin-bottom: 20px; } }
.activation-success { color: #4de38a; font-size: .86rem; }

/* Logo a stručný účet v horní liště. */
.brand-logo { display: block; width: 172px; line-height: 0; }.brand-logo img { display: block; width: 100%; height: auto; }
.account .member-number b { font-size: .88rem; }.account .codename { padding-left: 12px; border-left: 1px solid var(--border); color: var(--text); font-weight: 700; text-decoration: none; }.account .codename:hover { color: var(--brand-light); }
@media (max-width: 700px) { .brand-logo { width: 138px; } }

/* Výraznější logo v horní liště. */
.brand-logo { width: 360px; }@media (max-width: 700px) { .brand-logo { width: 250px; } }@media (max-width: 420px) { .brand-logo { width: 205px; } }
/* Mobil: herní jméno zůstává dostupnou cestou do profilu. */
@media (max-width: 620px) {
    .topbar .account { display: flex; margin-left: auto; gap: 0; min-width: 0; }
    .topbar .account .member-number,
    .topbar .account .logout { display: none; }
    .topbar .account .codename { max-width: 126px; padding: 5px 0; border-left: 0; overflow: hidden; color: var(--text); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 370px) {
    .brand-logo { width: 165px; }
    .topbar .account .codename { max-width: 102px; font-size: .76rem; }
}

.remember-login { display: flex; align-items: center; gap: 8px; margin: 2px 0 -7px; color: var(--text); font-size: .84rem; font-weight: 700; cursor: pointer; }.remember-login input { width: auto; margin: 0; accent-color: var(--brand); }.remember-login-note { display: block; margin: -1px 0 2px 24px; color: var(--muted); font-size: .75rem; }

.login-brand-logo { display: block; width: min(280px, 100%); height: auto; }@media (max-width: 760px) { .login-brand-logo { width: min(230px, 78vw); } }

/* Upozornění na neúplný profil vedle herního jména. */
.profile-completion-alert { position: relative; z-index: 35; flex: 0 0 auto; }
.profile-completion-alert summary { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #ff707d; border-radius: 50%; color: #fff; background: #c72a3a; box-shadow: 0 0 0 3px rgba(199,42,58,.16); font: 900 .84rem/1 Arial, sans-serif; cursor: pointer; list-style: none; }
.profile-completion-alert summary::-webkit-details-marker { display: none; }
.profile-completion-alert summary:hover { background: #e3394b; }
.profile-completion-alert-panel { position: absolute; top: calc(100% + 11px); right: 0; display: grid; width: min(350px, calc(100vw - 24px)); gap: 6px; padding: 13px 15px; border: 1px solid rgba(255,107,120,.72); border-left: 4px solid #ff5365; border-radius: 6px; color: #ffe8eb; background: #4b1019; box-shadow: 0 14px 30px rgba(0,0,0,.42); text-align: left; }
.profile-completion-alert-panel strong { color: #fff; font-size: .86rem; }.profile-completion-alert-panel span { color: #ffd7dc; font-size: .79rem; line-height: 1.4; }.profile-completion-alert-panel a { justify-self: start; margin-top: 2px; color: #fff; font-size: .8rem; font-weight: 800; text-decoration: underline; }
@media (max-width: 620px) { .topbar .account .profile-completion-alert { margin-left: 6px; }.profile-completion-alert-panel { right: -2px; } }
/* Mobil: profil zůstává vlevo, logo nepřebíjí prostor pro herní jméno. */
@media (max-width: 620px) {
    .topbar { justify-content: flex-start; }
    .topbar .brand-logo { display: none; }
    .topbar .account { flex: 1 1 auto; justify-content: flex-start; margin-left: 0; }
    .topbar .account .codename { max-width: min(62vw, 250px); padding: 7px 0; font-size: .9rem; }
    .topbar .menu-toggle { margin-left: auto; }
}
.account-mobile-logo { display: none; }
@media (max-width: 620px) { .topbar .account-mobile-logo { display: block; width: auto; height: 25px; margin-right: 8px; object-fit: contain; } }

/* Nastavení drží na desktopu pravý okraj; mobilní odhlášení patří do menu. */
.member-menu li.menu-settings { margin-left: auto; }
.mobile-menu-logout { display: none; }
@media (max-width: 960px) {
    .topbar .logout { display: none; }
    .member-menu li.menu-settings { margin-left: 0; }
    .member-menu .mobile-menu-logout { display: block; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
    .member-menu .mobile-menu-logout a { color: #f29aa3; }
}
.member-number-hint { display: block; margin-top: 6px; color: var(--muted); font-size: .75rem; line-height: 1.35; }

/* Společný jemný sci-fi motiv horních lišt jednotlivých modulů. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #0b0a10;
  background-image:
    linear-gradient(135deg, rgba(23, 16, 53, .98) 0%, rgba(13, 10, 22, .96) 36%, rgba(9, 8, 14, .84) 61%, rgba(8, 7, 13, .45) 100%),
    url('/img/hero-space-violet.webp');
  background-position: center, right center;
  background-size: cover, 58% auto;
  background-repeat: no-repeat;
}
.hero > * { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .hero {
    background-image:
      linear-gradient(135deg, rgba(23, 16, 53, .98) 0%, rgba(12, 9, 21, .94) 62%, rgba(8, 7, 13, .7) 100%),
      url('/img/hero-space-violet.webp');
    background-size: cover, auto 100%;
    background-position: center, right center;
  }
}
/* Barevné, ale velmi jemné varianty skutečně působících vesmírných motivů. */
.member-page.module-akce .hero,
.member-page.module-room .hero,
.member-page.module-soulmate .hero {
  background-image:
    linear-gradient(135deg, rgba(31, 14, 34, .98) 0%, rgba(17, 9, 21, .95) 42%, rgba(12, 8, 14, .77) 100%),
    url('/img/hero-space-rose.webp');
}
.member-page.module-pocty-her .hero,
.member-page.module-clenske-bonusy .hero,
.member-page.module-iplaylaserforce .hero {
  background-image:
    linear-gradient(135deg, rgba(9, 31, 29, .98) 0%, rgba(8, 19, 20, .95) 42%, rgba(7, 13, 13, .77) 100%),
    url('/img/hero-space-teal.webp');
}
.member-page.module-odehrane-hry .hero,
.member-page.module-hra .hero,
.member-page.module-mapa .hero {
  background-image:
    linear-gradient(135deg, rgba(11, 22, 48, .98) 0%, rgba(8, 13, 27, .95) 42%, rgba(6, 9, 16, .77) 100%),
    url('/img/hero-space-blue.webp');
}
.member-page.module-home .dashboard-intro {
  background-color: #0b0a10 !important;
  background-image:
    linear-gradient(135deg, rgba(20, 16, 49, .98) 0%, rgba(12, 10, 23, .95) 42%, rgba(8, 7, 13, .72) 100%),
    url('/img/hero-space-violet.webp') !important;
  background-position: center, right center !important;
  background-size: cover, 58% auto !important;
  background-repeat: no-repeat !important;
}
/* Hero textura je jen v pravé polovině; levá část zůstává čistá pro text. */
.hero {
  --hero-backdrop: url('/img/hero-space-violet.webp');
  background-image:
    linear-gradient(90deg, #0b0a10 0%, #0b0a10 58%, rgba(11, 10, 16, .96) 64%, rgba(10, 9, 15, .70) 76%, rgba(8, 7, 13, 0) 100%),
    var(--hero-backdrop) !important;
  background-position: center, right center !important;
  background-size: cover, 50% 100% !important;
  background-repeat: no-repeat !important;
}
.member-page.module-akce .hero,
.member-page.module-room .hero,
.member-page.module-soulmate .hero { --hero-backdrop: url('/img/hero-space-rose.webp'); }
.member-page.module-pocty-her .hero,
.member-page.module-clenske-bonusy .hero,
.member-page.module-iplaylaserforce .hero { --hero-backdrop: url('/img/hero-space-teal.webp'); }
.member-page.module-odehrane-hry .hero,
.member-page.module-hra .hero,
.member-page.module-mapa .hero { --hero-backdrop: url('/img/hero-space-blue.webp'); }
.member-page.module-home .dashboard-intro {
  background-image:
    linear-gradient(90deg, #0b0a10 0%, #0b0a10 58%, rgba(12, 10, 20, .96) 64%, rgba(12, 9, 22, .70) 76%, rgba(8, 7, 13, 0) 100%),
    url('/img/hero-space-violet.webp') !important;
  background-position: center, right center !important;
  background-size: cover, 50% 100% !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 700px) {
  .hero,
  .member-page.module-home .dashboard-intro { background-size: cover, 66% 100% !important; }
}

/* Nenápadná společná patička s odkazem na příběh projektu. */
.site-footer { display:flex; justify-content:center; align-items:center; gap:8px; margin:34px 0 18px; color:#777083; font-size:.72rem; }
.site-footer a { color:#9990af; text-decoration:none; }
.site-footer a:hover { color:#d3c2ff; text-decoration:underline; }
/* Společné vysvětlivky statistik z EVENT_HELP. */
.event-help-card {
    margin-top: 14px;
}

.event-help-card h2 {
    margin: 0 0 10px;
    font-size: 1.02rem;
}

.event-help-list {
    display: grid;
    gap: 0;
}

.event-help-item {
    display: grid;
    grid-template-columns: minmax(150px, 27%) 1fr;
    gap: 16px;
    align-items: start;
    padding: 10px 0;
    border-top: 1px solid #2a2437;
}

.event-help-item:first-child {
    border-top: 0;
    padding-top: 2px;
}

.event-help-label {
    display: grid;
    gap: 3px;
    color: #f0eaff;
}

.event-help-label strong {
    font-size: .84rem;
}

.event-help-label span {
    color: #a995e5;
    font-size: .72rem;
    line-height: 1.35;
}

.event-help-text {
    color: #d5cde2;
    font-size: .82rem;
    line-height: 1.48;
}

@media (max-width: 620px) {
    .event-help-item {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}
/* Společná legenda a proužky pořadí ve statistikách. */
.metric-rank-legend { display:flex; flex-wrap:wrap; gap:5px 10px; align-items:center; margin:8px 0 0; color:#dcd5eb; font-size:.72rem; font-weight:700; }
.metric-rank-legend span { display:inline-flex; align-items:center; min-height:18px; padding:2px 5px; background:#0c0b10; }
.metric-rank-gold { box-shadow:inset 3px 0 #f7d34d; }
.metric-rank-silver { box-shadow:inset 3px 0 #d9d9df; }
.metric-rank-bronze { box-shadow:inset 3px 0 #c98226; }
.metric-rank-worst { box-shadow:inset 3px 0 #493568; }
@media(max-width:620px){.metric-rank-legend{gap:6px 9px;font-size:.67rem}.metric-rank-legend span{padding:3px 6px}}