/* ============================================================
   WordGuess — vizuál převzatý z AIKVIZ design systému
   Tokeny (accent, surface, stíny, radii, font) + herní komponenty .wg-*
   ============================================================ */

:root, [data-theme="light"]{
  --surface:#ffffff;       --surface-2:#f4f5f7;   --surface-3:#eceef1;
  --app-bg:#e7e8ea;         --app-bg-grad:radial-gradient(circle at 50% 0%, #f3f3f4 0%, #e7e8ea 100%);
  --app-text:#17191c;       --app-muted:#838a93;    --app-faint:#aab0b8;
  --app-border:#ecedf0;     --app-border-strong:#dcdee2;
  --accent:#f15a29;         --accent-hover:#d94a1e; --on-accent:#ffffff;
  --app-success:#16a34a;
  --shadow-card:0 14px 30px -18px rgba(20,25,35,.45);
  --shadow-accent:0 12px 26px -10px rgba(241,90,41,.8);
}
[data-theme="dark"]{
  --surface:#141519;       --surface-2:#1f2128;   --surface-3:#23252c;
  --app-bg:#0c0d10;         --app-bg-grad:radial-gradient(circle at 50% -5%, #1c1d22 0%, #0c0d10 60%);
  --app-text:#f4f5f7;       --app-muted:#9aa0a8;    --app-faint:#6b7079;
  --app-border:#26282e;     --app-border-strong:#33363d;
  --accent:#f15a29;         --accent-hover:#ff7a4d; --on-accent:#ffffff;
  --app-success:#34d17e;
  --shadow-card:0 16px 34px -20px rgba(0,0,0,.8);
  --shadow-accent:0 12px 30px -8px rgba(241,90,41,.7);
}

:root{
  --app-font:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display-font:"Space Grotesk","Inter",sans-serif;
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-pill:999px;
}

*{box-sizing:border-box;}

body{
  margin:0; min-height:100vh;
  background:var(--app-bg); background-image:var(--app-bg-grad);
  background-attachment:fixed;
  color:var(--app-text); font-family:var(--app-font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------- shell ---------- */
.wg-shell{max-width:560px; margin:0 auto; padding:32px 20px 80px; display:flex; flex-direction:column; gap:22px;}

.wg-top{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.wg-logo{font-family:var(--display-font); font-weight:700; font-size:22px; letter-spacing:-.02em; color:var(--app-text); text-decoration:none;}
.wg-logo .g{color:var(--accent);}
.wg-date{font-size:13px; color:var(--app-faint);}

/* ---------- karta ---------- */
.wg-card{
  background:var(--surface); border:1px solid var(--app-border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-card);
  padding:26px;
}

/* ---------- metrika (rank) ---------- */
.wg-metric{text-align:center;}
.wg-metric .label{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--app-muted);}
.wg-metric .value{font-family:var(--display-font); font-weight:700; font-size:60px; line-height:1.05; letter-spacing:-.03em; margin-top:6px; font-variant-numeric:tabular-nums;}
.wg-metric .value.win{color:var(--accent);}
.wg-metric .sub{font-size:14px; color:var(--app-muted); margin-top:2px;}

.wg-progress{margin-top:18px; height:10px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden;}
.wg-progress .fill{height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--accent),#ff9166); transition:width .4s ease;}
.wg-steps{margin-top:10px; font-size:12.5px; color:var(--app-faint); text-align:center;}

/* ---------- aktuální slovo ---------- */
.wg-current{text-align:center;}
.wg-current .label{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--app-muted);}
.wg-current .word{font-family:var(--display-font); font-weight:700; font-size:34px; letter-spacing:-.02em; margin-top:6px; color:var(--app-text);}

/* ---------- možnosti ---------- */
.wg-options{display:flex; flex-direction:column; gap:12px;}
.wg-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; cursor:pointer;
  background:var(--surface-2); border:1.5px solid var(--app-border);
  border-radius:var(--r-lg); padding:18px 20px;
  color:var(--app-text); font-family:var(--app-font); font-size:18px; font-weight:600;
  transition:border-color .15s, background .15s, transform .05s;
}
.wg-option:hover{border-color:var(--accent); background:var(--surface-3);}
.wg-option:active{transform:scale(.99);}
.wg-option .arrow{color:var(--app-faint); transition:color .15s;}
.wg-option:hover .arrow{color:var(--accent);}
.wg-option .badge{font-size:12px; font-weight:700; color:var(--app-muted); background:var(--surface-3); border-radius:var(--r-pill); padding:3px 10px; font-variant-numeric:tabular-nums;}
.wg-options form{margin:0;}

/* ---------- cesta ---------- */
.wg-section-label{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--app-muted); margin-bottom:12px;}
.wg-path{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.wg-path li{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--app-border);}
.wg-path li.current{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent);}
.wg-path .left{display:flex; align-items:center; gap:12px;}
.wg-path .idx{width:22px; text-align:right; font-size:12px; color:var(--app-faint); font-variant-numeric:tabular-nums;}
.wg-path .w{font-weight:600;}
.wg-path li.current .w{color:var(--accent);}
.wg-path .rank{font-size:12px; color:var(--app-faint); font-variant-numeric:tabular-nums;}

/* ---------- input na tipy ---------- */
.wg-guessform{display:flex; gap:10px;}
.wg-guessform .wg-input{flex:1;}
.wg-input{
  width:100%; height:50px; padding:0 18px; border-radius:var(--r-md); box-sizing:border-box;
  border:1.5px solid var(--app-border); background:var(--surface-2); color:var(--app-text);
  font-family:var(--app-font); font-size:17px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.wg-input::placeholder{color:var(--app-faint);}
.wg-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}
.wg-submit{
  height:50px; padding:0 22px; border:0; cursor:pointer; border-radius:var(--r-md);
  background:var(--accent); color:var(--on-accent); font-family:var(--app-font);
  font-weight:700; font-size:16px; box-shadow:var(--shadow-accent); transition:background .15s;
}
.wg-submit:hover{background:var(--accent-hover);}
.wg-submit:disabled{
  background:var(--surface-3); color:var(--app-faint); cursor:not-allowed; box-shadow:none;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.wg-submit:disabled::after{
  content:""; width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:wg-spin .7s linear infinite;
}
@keyframes wg-spin{to{transform:rotate(360deg);}}

/* ---------- seznam tipů ---------- */
.wg-guesses{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.wg-guess{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--app-border);}
.wg-guess .term{flex:0 0 33%; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wg-guess .bar{flex:1; height:8px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; container-type:inline-size;}
/* gradient je fixni na plnou sirku baru (100cqw); .fill z nej odkryva jen levou cast — maly % = jen modra */
.wg-guess .bar .fill{display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,#3b82f6,var(--accent)); background-size:100cqw 100%; background-repeat:no-repeat; background-position:left center;}
.wg-guess .pct{flex:0 0 56px; text-align:right; font-size:13px; font-variant-numeric:tabular-nums; color:var(--app-muted);}
.wg-guess .tag{flex:1; font-size:12.5px; color:var(--app-faint);}
.wg-guess.invalid{opacity:.55;}
.wg-guess.invalid .term{text-decoration:line-through; color:var(--app-faint);}
.wg-guess.hit{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent);}
.wg-guess.hit .term{color:var(--accent);}
.wg-guess.last{border-color:var(--accent); border-width:2px; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);}

/* ---------- výhra ---------- */
.wg-win{text-align:center; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); background:color-mix(in srgb, var(--accent) 10%, transparent);}
.wg-win .title{font-family:var(--display-font); font-weight:700; font-size:26px; color:var(--accent);}
.wg-win .lead{color:var(--app-muted); margin-top:8px;}
.wg-win .lead strong{color:var(--app-text);}

/* ---------- prázdný stav ---------- */
.wg-empty{text-align:center; padding:60px 20px;}
.wg-empty h1{font-family:var(--display-font); font-weight:700; font-size:30px; margin:0 0 10px;}
.wg-empty p{color:var(--app-muted); max-width:380px; margin:0 auto;}
.wg-empty code{color:var(--accent); background:var(--surface-2); padding:2px 7px; border-radius:8px;}

/* ---------- auth v headeru (.wg-top) ---------- */
.wg-auth{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px;}
.wg-auth .nick{font-size:13px; font-weight:600; color:var(--app-muted); max-width:45vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wg-chip{display:inline-flex; align-items:center; font-size:13px; font-weight:600; text-decoration:none; padding:10px 16px; border-radius:var(--r-pill); border:1px solid var(--app-border-strong); background:var(--surface); color:var(--app-text); transition:border-color .15s, color .15s, background .15s;}
.wg-chip:hover{border-color:var(--accent); color:var(--accent);}
.wg-chip.accent{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.wg-chip.accent:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent);}