*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

:root{
  --bg1:#fff7ed; --bg2:#fdf2f8; --bg3:#eef2ff;
  --card:#ffffff; --text:#20242f; --muted:#8a8f9e; --line:#ede6f2;
  --boy:#3d7dd8; --boy-bg:#e3efff;
  --girl:#e0608a; --girl-bg:#fde7f0;
  --like:#22c55e; --nope:#ef4444; --undo:#f59e0b;
  --accent1:#a855f7; --accent2:#ec4899;
  --shadow:0 18px 40px -12px rgba(80,60,120,.25);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg1:#171226; --bg2:#131a2e; --bg3:#101322;
    --card:#212739; --text:#f1f2f8; --muted:#9aa0b5; --line:#323950;
    --boy:#6ea8f0; --boy-bg:#1d3050;
    --girl:#f088ac; --girl-bg:#46243a;
    --shadow:0 18px 40px -12px rgba(0,0,0,.55);
  }
}

html{
  height:100%;
  background:linear-gradient(160deg,var(--bg1),var(--bg2) 50%,var(--bg3)) fixed;
}
body{
  margin:0 auto; max-width:520px;
  height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  overscroll-behavior:none;
}
button{font-family:inherit; cursor:pointer; touch-action:manipulation; color:var(--text)}
:focus-visible{outline:3px solid var(--accent1); outline-offset:2px}
h1{font-size:26px; margin:8px 0 2px}

/* ---------- horní lišta ---------- */
#topbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 8px;
}
.brand{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0}
.icon-btn{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  border:1px solid var(--line); background:var(--card); font-size:17px; line-height:1;
  display:grid; place-items:center;
}
.round-chip{
  margin-left:8px; font-size:12px; color:var(--muted);
  background:var(--card); padding:3px 9px; border-radius:999px; border:1px solid var(--line);
}
.heart-btn{
  flex-shrink:0; border:1px solid var(--line); background:var(--card); color:var(--girl);
  border-radius:999px; padding:7px 14px; font-size:15px; font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
#progress{height:4px; background:rgba(128,128,160,.18); border-radius:99px; margin:0 16px}
#progress-fill{
  height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  transition:width .25s;
}

/* ---------- obrazovky ---------- */
.screen{flex:1; display:flex; flex-direction:column; min-height:0}
.center-box{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; overflow-y:auto;
}
.big-emoji{font-size:64px; line-height:1.2}
.sub{color:var(--muted); line-height:1.55; margin:6px 0 16px}
.tx-like{color:var(--like)} .tx-nope{color:var(--nope)}

/* ---------- úvod ---------- */
.gender-btns{display:flex; flex-direction:column; gap:12px; width:100%; max-width:320px}
.gender-btn{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border-radius:16px; border:1px solid var(--line);
  background:var(--card); font-size:18px; font-weight:700;
  box-shadow:0 4px 14px -8px rgba(0,0,0,.18); transition:transform .12s;
}
.gender-btn small{color:var(--muted); font-weight:500; font-size:13px}
.gender-btn:active{transform:scale(.97)}
.track-btn{
  display:flex; flex-direction:column; align-items:stretch; gap:5px; text-align:left;
  padding:14px 18px; border-radius:16px; border:1px solid var(--line);
  background:var(--card); box-shadow:0 4px 14px -8px rgba(0,0,0,.18); transition:transform .12s;
}
.track-btn:active{transform:scale(.97)}
.track-btn.started{border-color:var(--accent1)}
.track-label{font-size:18px; font-weight:700}
.track-status{color:var(--muted); font-size:13px}

/* ---------- karty ---------- */
#stack{position:relative; flex:1; margin:14px 18px 6px; min-height:0}
.card{
  position:absolute; inset:0; margin:auto;
  width:min(100%,340px); height:min(100%,460px);
  background:var(--card); border:1px solid var(--line); border-radius:26px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  touch-action:none; cursor:grab; will-change:transform;
  transition:transform .35s cubic-bezier(.2,.8,.3,1.15), opacity .3s;
}
.card.dragging{transition:none; cursor:grabbing}
.card.top{z-index:3}
.card.d1{z-index:2; transform:translateY(14px) scale(.955); opacity:.85}
.card.d2{z-index:1; transform:translateY(26px) scale(.91); opacity:.45}
.card.g-m{background:linear-gradient(180deg,var(--boy-bg),var(--card) 36%)}
.card.g-f{background:linear-gradient(180deg,var(--girl-bg),var(--card) 36%)}
.card .name{
  font-size:clamp(34px,11vw,52px); font-weight:800; letter-spacing:.5px;
  margin:0; padding:0 12px; text-align:center; overflow-wrap:anywhere;
}
.card .name.long{font-size:clamp(27px,8.6vw,40px)}
.card .date{color:var(--muted); font-size:16px; margin:12px 0 0}
.chip{
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  font-size:13px; font-weight:700; padding:5px 13px; border-radius:999px;
}
.g-m .chip{background:var(--card); color:var(--boy)}
.g-f .chip{background:var(--card); color:var(--girl)}
.stamp{
  position:absolute; top:24px; font-size:23px; font-weight:900; letter-spacing:2px;
  padding:4px 12px; border:4px solid; border-radius:12px;
  opacity:0; pointer-events:none; background:var(--card);
}
.stamp.like{left:16px; color:var(--like); border-color:var(--like); transform:rotate(-14deg)}
.stamp.nope{right:16px; color:var(--nope); border-color:var(--nope); transform:rotate(14deg)}

.counter{text-align:center; color:var(--muted); font-size:13px; margin:8px 0 2px}

/* ---------- akční tlačítka ---------- */
.actions{
  display:flex; align-items:center; justify-content:center; gap:24px;
  padding:10px 0 calc(env(safe-area-inset-bottom,0px) + 16px);
}
.round-btn{
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); font-size:28px; line-height:1;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.3);
  display:grid; place-items:center; transition:transform .12s;
}
.round-btn:active{transform:scale(.86)}
.round-btn.nope{color:var(--nope)}
.round-btn.like{color:var(--like)}
.round-btn.undo{width:48px; height:48px; font-size:20px; color:var(--undo)}
.round-btn:disabled{opacity:.35}
.kbd-hint{text-align:center; color:var(--muted); font-size:12px; margin:0 0 10px}
@media (hover:none){.kbd-hint{display:none}}

/* ---------- konec kola ---------- */
.stack-btns{display:flex; flex-direction:column; gap:10px; width:100%; max-width:320px; margin-top:14px}
.pill{
  padding:14px 16px; border-radius:14px; border:1px solid var(--line);
  background:var(--card); font-size:16px; font-weight:700; transition:transform .12s;
}
.pill:active{transform:scale(.97)}
.pill.primary{
  background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; border:none;
  box-shadow:0 10px 24px -10px rgba(168,85,247,.55);
}
.pill.danger-link{background:none; border:none; color:var(--nope); font-weight:600; font-size:14px; box-shadow:none}
.link-btn{background:none; border:none; color:var(--muted); font-size:14px; padding:6px}
.winner-card{
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  box-shadow:var(--shadow); padding:26px 44px; margin:10px 0 4px;
}
.winner-card.g-m{background:linear-gradient(180deg,var(--boy-bg),var(--card) 55%)}
.winner-card.g-f{background:linear-gradient(180deg,var(--girl-bg),var(--card) 55%)}
.winner-card h2{font-size:40px; margin:0; overflow-wrap:anywhere}
.winner-card p{color:var(--muted); margin:8px 0 0}

/* ---------- užší výběr ---------- */
.list-head{display:flex; align-items:center; gap:12px; padding:8px 16px 6px}
.list-head h1{font-size:20px; margin:0}
#list-count{color:var(--muted); font-weight:500}
.back-btn{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  border:1px solid var(--line); background:var(--card); font-size:18px;
}
#name-list{
  list-style:none; margin:6px 0 0; padding:2px 16px; flex:1;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
#name-list li{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:11px 14px; margin-bottom:8px;
}
#name-list li.empty{justify-content:center; color:var(--muted); border-style:dashed; background:none; padding:22px}
.dot{width:10px; height:10px; border-radius:50%; flex-shrink:0}
.dot.g-m{background:var(--boy)} .dot.g-f{background:var(--girl)}
.nm{flex:1; min-width:0}
.nm strong{font-size:17px}
.nm small{display:block; color:var(--muted); font-size:12px; margin-top:1px}
.rm{border:none; background:none; color:var(--muted); font-size:17px; padding:6px 8px; flex-shrink:0}
.list-actions{
  display:flex; flex-direction:column; gap:10px;
  padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 16px);
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important; animation:none!important}
}