/* Vytvořil: Matěj Kopecký matysek.kopecky@seznam.cz */
/* assets/style.css — čistý moderní vzhled celého systému.
   Výchozí režim: TMAVÝ (černý). Alternativy: modrý a světlý. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

/* ============ Barevné režimy ============ */
/* Výchozí = tmavý (černý) */
:root,
html[data-theme="tmavy"]{
  --bg:#06070a; --bg2:#0b0d13; --glow1:rgba(77,141,255,.16); --glow2:rgba(34,211,238,.10);
  --panel:#13161e; --panel2:#1a1e28; --panel3:#222634;
  --text:#f4f6fb; --muted:#98a2b6; --faint:#6b7488;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --accent:#5b9dff; --accent2:#22d3ee; --indigo:#7c8cff;
  --green:#34d399; --red:#fb6f84; --amber:#fbbf24; --purple:#b794ff; --pink:#ff8fb1;
  --btn-grad:#3b82f6; --btn-fg:#ffffff; --daily:#8b5cf6;
  --board:#0c0f16; --board-line:rgba(255,255,255,.10); --grid-strong:rgba(255,255,255,.30);
  --digit:#f4f6fb; --user-digit:#7fb4ff; --prefilled:#eef2f9;
  --sel:rgba(91,157,255,.24); --peer:rgba(91,157,255,.08); --same:rgba(34,211,238,.16);
  --radius:20px; --radius-sm:14px;
  --shadow:0 24px 60px rgba(0,0,0,.5); --shadow-sm:0 10px 30px rgba(0,0,0,.4);
}
/* Modrý režim (světle modrý) */
html[data-theme="modry"]{
  --bg:#e9f1fc; --bg2:#f3f8ff; --glow1:rgba(47,123,255,.18); --glow2:rgba(22,184,217,.16);
  --panel:#ffffff; --panel2:#eef5ff; --panel3:#e3edfd;
  --text:#13233a; --muted:#5f7088; --faint:#90a0b8;
  --line:#dbe6f5; --line2:#c6d6ee;
  --accent:#2f7bff; --accent2:#16b8d9; --indigo:#6a78ff;
  --green:#12b886; --red:#e64b61; --amber:#e8a317; --purple:#8b5cf6; --pink:#ec5a93;
  --btn-grad:#2f7bff; --btn-fg:#ffffff; --daily:#7c4dff;
  --board:#ffffff; --board-line:#c7d6ec; --grid-strong:#8aa2c8;
  --digit:#13233a; --user-digit:#1f6bff; --prefilled:#33425c;
  --sel:rgba(47,123,255,.16); --peer:rgba(47,123,255,.06); --same:rgba(22,184,217,.20);
  --radius:20px; --radius-sm:14px;
  --shadow:0 22px 55px rgba(28,54,95,.12); --shadow-sm:0 10px 26px rgba(28,54,95,.10);
}
/* Světlý režim (neutrální) */
html[data-theme="svetly"]{
  --bg:#eef1f6; --bg2:#f7f9fc; --glow1:rgba(99,102,241,.12); --glow2:rgba(34,211,238,.10);
  --panel:#ffffff; --panel2:#f1f4fb; --panel3:#e7ebf3;
  --text:#0f1626; --muted:#5b6472; --faint:#8a93a6;
  --line:#e6e9f1; --line2:#d4dae6;
  --accent:#3b6dff; --accent2:#0ea5b7; --indigo:#6366f1;
  --green:#15a06a; --red:#e2455d; --amber:#d98a0b; --purple:#7c5cf0; --pink:#e0568c;
  --btn-grad:#3b6dff; --btn-fg:#ffffff; --daily:#7c4dff;
  --board:#ffffff; --board-line:#d2dae8; --grid-strong:#9aa7bf;
  --digit:#0f1626; --user-digit:#2f5fff; --prefilled:#33415c;
  --sel:rgba(59,109,255,.14); --peer:rgba(59,109,255,.05); --same:rgba(14,165,183,.16);
  --radius:20px; --radius-sm:14px;
  --shadow:0 22px 55px rgba(20,30,60,.10); --shadow-sm:0 10px 26px rgba(20,30,60,.08);
}

/* ============ Základ ============ */
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text); font-weight:450; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:var(--bg);
}
h1,h2,h3{font-family:"Sora",inherit;letter-spacing:-.025em;font-weight:700;margin:.2em 0 .45em;line-height:1.12}
p{line-height:1.62}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:color-mix(in srgb,var(--accent) 38%,transparent)}

/* ============ Značka (vlevo nahoře) ============ */
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;
  background:var(--btn-grad);
}
.brand-logo svg{width:24px;height:24px;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{
  font-family:"Sora",inherit;font-weight:800;font-size:26px;letter-spacing:.02em;color:var(--accent);
}
.brand-sub{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.04em;margin-top:3px}

/* ============ Tlačítka ============ */
button,.big-button{
  font-family:inherit;font-weight:700;cursor:pointer;border:0;
  border-radius:999px;padding:11px 20px;font-size:14.5px;
  color:var(--btn-fg);background:var(--btn-grad);box-shadow:none;
  transition:transform .12s ease, filter .12s ease, background .12s ease;
}
button:hover,.big-button:hover{transform:translateY(-2px);filter:brightness(1.06);text-decoration:none}
button:active{transform:translateY(0)}
.big-button{display:inline-block;padding:14px 26px;font-size:16px}

/* Sekundární (povrchová) tlačítka — výborná čitelnost v tmavém režimu */
button.ghost,.btn-surface,.toolbar button,.filter button{
  background:var(--panel2);color:var(--text);border:1px solid var(--line2);box-shadow:none;
}
button.ghost:hover,.btn-surface:hover,.toolbar button:hover,.filter button:hover{
  border-color:var(--accent);filter:none;background:color-mix(in srgb,var(--accent) 12%,var(--panel2))
}
/* Primární akce v panelu nástrojů (Nová hra) zůstává barevná */
.toolbar button#new{background:var(--btn-grad);color:var(--btn-fg);border:0;box-shadow:none}
.toolbar button#new:hover{filter:brightness(1.06);background:var(--btn-grad)}
/* Nápověda: vždy červená, v závorce počet zbývajících (3,2,1); po vyčerpání zešedne a nejde kliknout */
.toolbar button#hint{background:var(--red);color:#fff;border:0;box-shadow:none}
.toolbar button#hint:hover{filter:brightness(1.06);background:var(--red)}
.toolbar button#hint:disabled{background:var(--panel3);color:var(--faint);border:1px solid var(--line);cursor:not-allowed;filter:none;transform:none;box-shadow:none}
/* Daily Challenge */
.toolbar button#daily{background:var(--daily);color:#fff;border:0;box-shadow:none}
.toolbar button#daily:hover{filter:brightness(1.06);background:var(--daily)}

/* ============ Hlavička ============ */
.top{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:14px clamp(16px,4vw,32px);position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
}
.top nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.top nav a{
  font-weight:600;font-size:14.5px;color:var(--text);padding:9px 15px;border-radius:999px;
  background:transparent;border:1px solid transparent;transition:background .14s ease,border-color .14s ease
}
.top nav a:hover{text-decoration:none;background:color-mix(in srgb,var(--text) 8%,transparent)}
.top nav a.danger{color:var(--red)}
.top nav a.danger:hover{background:color-mix(in srgb,var(--red) 14%,transparent)}
.user-chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:13.5px;font-weight:600
}
.user-chip strong{color:var(--text);font-weight:700}

/* ============ Rozvržení ============ */
.container{width:min(1120px,92vw);margin:34px auto}
.site-footer{width:min(1120px,92vw);margin:30px auto;color:var(--faint);text-align:center;font-size:13.5px}
.small{color:var(--muted)}

/* Odznak (pill badge) jako v referenci */
.badge{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;
  padding:8px 16px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);
  font-size:13.5px;font-weight:700;color:var(--text)
}
.badge::before{content:"";width:9px;height:9px;border-radius:999px;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}

/* ============ Hero ============ */
.hero{
  display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:center;
  background:var(--panel);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  padding:clamp(26px,4vw,42px);box-shadow:var(--shadow);position:relative;overflow:hidden
}

.hero h1{font-size:clamp(34px,6vw,58px);margin:0 0 14px;color:var(--accent)}
.hero p{color:var(--muted);font-size:17px;margin:0 0 22px;max-width:48ch}
.hero img,.auth-logo{width:100%;max-width:280px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.35))}

/* ============ Karty (kategorie / statistiky) ============ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.cards article{
  --c:var(--accent);
  background:color-mix(in srgb,var(--c) 12%,var(--panel));
  border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;position:relative
}
.cards article:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cards article h2{font-size:18px;margin:14px 0 6px}
.cards article p{margin:0;color:var(--muted);font-size:14.5px}
.card-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 24%,transparent);color:var(--c)}
.card-icon svg{width:24px;height:24px}
.number{font-family:"Sora",inherit;font-size:44px;font-weight:800;margin:4px 0;color:var(--c);line-height:1}
.cat-blue{--c:var(--accent)} .cat-green{--c:var(--green)} .cat-purple{--c:var(--purple)}
.cat-amber{--c:var(--amber)} .cat-pink{--c:var(--pink)} .cat-cyan{--c:var(--accent2)}

/* ============ Textová stránka ============ */
.text-page{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);line-height:1.75;font-size:16.5px
}
.text-page h1{margin-top:0}
.text-page p,.mini,.small{color:var(--muted)}
.about-links{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
.about-links li{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px}

/* ============ Přihlášení / registrace ============ */
.auth-page{display:grid;place-items:center;padding:22px;min-height:100vh;position:relative}
.auth-card{
  width:min(430px,96vw);text-align:center;position:relative;z-index:1;
  background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  padding:34px 30px;box-shadow:var(--shadow)
}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:18px}
.auth-brand .brand-logo{width:54px;height:54px;border-radius:16px}
.auth-brand .brand-logo svg{width:30px;height:30px}
.auth-brand .brand-name{font-size:34px}
.auth-brand .brand-sub{font-size:12.5px}
.auth-card h1{font-size:22px;margin:0 0 4px}
.auth-card form{display:grid;gap:14px;text-align:left;margin-top:18px}
.auth-card label{display:grid;gap:6px;color:var(--muted);font-weight:600;font-size:14px}
input,.toolbar select,.filter select{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line2);
  background:var(--panel2);color:var(--text);font-family:inherit;font-size:15px;
  transition:border-color .14s ease, box-shadow .14s ease
}
input:focus,.toolbar select:focus,.filter select:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)
}
.auth-card button{width:100%;font-size:16px;margin-top:4px}
.message{padding:11px 14px;border-radius:var(--radius-sm);font-weight:600;font-size:14px}
.error{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}

/* ============ Herní plocha ============ */
.game-layout{width:min(1280px,94vw);margin:26px auto;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start}
.game-panel,.side{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:24px;box-shadow:var(--shadow-sm)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.toolbar label{flex-basis:100%;color:var(--muted);font-weight:600;font-size:14px;display:grid;gap:7px}
.toolbar select{width:auto;min-width:140px}
.toolbar button{flex:1 1 auto}

.board{
  position:relative;display:grid;grid-template-columns:repeat(9,1fr);
  width:min(640px,100%);aspect-ratio:1/1;margin:auto;
  background:var(--board);border:2px solid var(--grid-strong);border-radius:16px;overflow:hidden
}
.cell{position:relative;border:1px solid var(--board-line);display:grid}
.cell:nth-child(3n){border-right:2px solid var(--grid-strong)}
.cell:nth-child(9n){border-right:0}
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--grid-strong)}
.cell.peer{background:var(--peer)}
.cell.selected{background:var(--sel);box-shadow:inset 0 0 0 2px var(--accent)}
.cell.bad{background:color-mix(in srgb,var(--red) 36%,transparent)}
.digit{
  width:100%;height:100%;border:0;background:transparent;text-align:center;
  font-family:"Sora",inherit;font-size:clamp(18px,4.4vw,30px);font-weight:600;color:var(--user-digit);
  caret-color:var(--accent);padding:0
}
.digit:focus{outline:0}
.prefilled{color:var(--prefilled);font-weight:800}

.board.is-generating::after{
  content:attr(data-generating);position:absolute;inset:0;display:grid;place-items:center;
  background:color-mix(in srgb,var(--board) 82%,transparent);color:var(--muted);
  font-weight:700;z-index:2;backdrop-filter:blur(2px)
}

/* Číselník */

/* Boční panel */
.side h2{margin:16px 0 10px;font-size:15px;color:var(--text)}
.side h2:first-of-type{margin-top:0}
.side p{margin:6px 0;font-size:14px;color:var(--muted)}
.side p strong{color:var(--text)}
.timer{font-family:"Sora",inherit;font-size:48px;font-weight:800;text-align:center;color:var(--green);margin-bottom:14px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.progress{height:12px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}
.mini{color:var(--muted);font-size:14px;line-height:1.65}
/* Karta „Daily Challenge vyřešeno" */
.daily-card{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:14px 16px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--daily) 14%,var(--panel2));border:1px solid color-mix(in srgb,var(--daily) 40%,var(--line))}
.daily-card span{color:var(--muted);font-weight:600;font-size:13.5px}
.daily-card strong{font-family:"Sora",inherit;font-size:26px;color:var(--daily);line-height:1}

/* Statistiky vedle tabulky Top 10 */
.top10-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.stats-aside h2{margin-top:0;font-size:16px}
.stat-rows{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.stat-rows li{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:var(--radius-sm);background:var(--panel2);border:1px solid var(--line)}
.stat-rows li span:first-child{font-weight:600}
.stat-count{color:var(--muted);font-weight:600;font-size:14px}
.best-score{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--green) 13%,var(--panel2));border:1px solid color-mix(in srgb,var(--green) 40%,var(--line));margin-bottom:14px}
.best-score span{color:var(--muted);font-weight:600;font-size:13.5px}
.best-score strong{font-family:"Sora",inherit;font-size:24px;color:var(--green);line-height:1}

/* ============ Tabulky ============ */
.table-wrap{overflow:auto;background:var(--panel);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:14.5px}
th{color:var(--accent);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover,tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
tr:last-child td{border-bottom:0}
.filter{display:flex;gap:10px;margin:18px 0}
.filter select{width:auto;min-width:160px}

/* ============ Administrace ============ */
.admin-cards{grid-template-columns:repeat(4,1fr)}
.admin-section{margin-top:24px}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-actions form{margin:0}
.admin-actions button{padding:8px 13px;font-size:13px;white-space:nowrap}

/* ============ Výherní okno ============ */
.modal-overlay{
  position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;
  background:rgba(4,7,14,.62);backdrop-filter:blur(5px)
}
.modal-overlay.open{display:grid}
.modal-card{
  width:min(450px,96vw);background:var(--panel);border:1px solid var(--line2);
  border-radius:24px;padding:30px;box-shadow:0 34px 90px rgba(0,0,0,.55);text-align:center;animation:pop .22s ease
}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-card h2{margin:0 0 6px;font-size:27px}
.modal-stats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0 24px}
.modal-stats span{
  display:flex;flex-direction:column;gap:3px;align-items:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 15px;font-size:12px;color:var(--muted);min-width:76px
}
.modal-stats strong{font-family:"Sora",inherit;font-size:18px;color:var(--text)}
.modal-actions{display:flex;gap:10px;justify-content:center}

/* ============ Toast ============ */
.toast{
  position:fixed;left:50%;bottom:26px;translate:-50% 0;
  background:var(--panel);color:var(--text);border:1px solid var(--line2);
  padding:12px 18px;border-radius:999px;box-shadow:var(--shadow);z-index:90;
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;font-weight:600
}
.toast.show{opacity:1;transform:translate(0,-6px)}

/* ============ Padající číslice (přihlášení) ============ */
.rain{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.12}
.rain span{position:absolute;top:-60px;color:var(--accent);font-family:"Sora",inherit;font-weight:700;font-size:24px;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(115vh) rotate(16deg);opacity:.1}}

/* ============ Přepínač motivů (segmentový) ============ */
.theme-box,.theme-select{display:none!important}
.theme-dots{
  display:inline-flex;gap:4px;align-items:center;padding:5px;
  border:1px solid var(--line2);border-radius:999px;background:var(--panel2)
}
.theme-dot{
  width:26px!important;height:26px!important;min-width:26px!important;padding:0!important;
  border-radius:999px!important;border:2px solid transparent!important;box-shadow:none!important;
  cursor:pointer;position:relative;transition:transform .12s ease,border-color .12s ease
}
.theme-dot:hover{transform:scale(1.08)}
.theme-dot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.theme-dot-dark{background:#0b0d13!important}
.theme-dot-blue{background:#2f7bff!important}
.theme-dot-light{background:#e8eef9!important}
.theme-dot.is-active{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)!important}

/* ============ Hamburger (mobil) ============ */
.hamburger{display:none;background:var(--panel2)!important;box-shadow:none!important;border:1px solid var(--line2)!important;border-radius:13px!important;padding:9px!important;width:44px;height:42px}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:999px;margin:5px 4px;transition:.18s ease}
.top.nav-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.top.nav-open .hamburger span:nth-child(2){opacity:0}
.top.nav-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ Responzivita ============ */
@media(max-width:900px){
  .top{flex-wrap:wrap}
  .brand-name{font-size:22px}
  .brand-logo{width:38px;height:38px}
  .hamburger{display:block;margin-left:auto}
  .top nav{display:none;width:100%;padding-top:12px;gap:8px}
  .top.nav-open nav{display:flex;flex-direction:column;align-items:stretch}
  .top nav a{width:100%;text-align:center}
  .theme-dots{align-self:center}
  .hero{grid-template-columns:1fr;text-align:center}
  .hero p{margin-inline:auto}
  .hero img{max-width:190px;margin:auto}
  .cards,.admin-cards{grid-template-columns:1fr}
  .game-layout{grid-template-columns:1fr;width:min(680px,96vw)}
  .game-panel,.side{padding:16px}
  .top10-layout{grid-template-columns:1fr}
  .game-layout .side{order:-1}
  .toolbar{display:grid}
  .toolbar label,.toolbar select,.toolbar button{width:100%}
  .toolbar select{min-width:0}
  .board{width:100%;max-width:560px;margin-inline:auto}
  .container{width:min(94vw,720px)}
  .admin-actions{display:grid}
}