/* UKnow · дуелі стікерів — темна база, один акцент на екран. */

@font-face{font-family:'Bricolage';src:url('/fonts/bricolage-latin.woff2') format('woff2');
  font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/geist-lat.woff2') format('woff2');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'GeistMono';src:url('/fonts/geistmono-lat.woff2') format('woff2');
  font-weight:100 900;font-display:swap}

:root{
  --ink:#0B0B0D; --paper:#F2F1EB; --bone:#E3DFD1;
  --coral:#FF5028; --volt:#C6F135; --mut:#8A8D94;
  --brand:'Bricolage','Geist',system-ui,sans-serif;
  --ui:'Geist',system-ui,-apple-system,sans-serif;
  --mono:'GeistMono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;overflow:hidden}

.screen{position:fixed;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;padding:24px}
.screen.on{display:flex}

.wrap{width:min(560px,100%);text-align:center}
.lab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--coral);font-weight:700;margin-bottom:20px}
h1{font-family:var(--brand);font-weight:800;font-stretch:88%;letter-spacing:-.04em;
  line-height:.96;font-size:clamp(34px,8vw,54px)}
.lead{margin-top:18px;font-size:15px;line-height:1.5;color:var(--mut)}
.q{margin-top:34px;font-size:14px;color:var(--paper);font-weight:600}

.seg{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.seg button{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink);
  background:var(--paper);border:0;border-radius:999px;padding:13px 22px;cursor:pointer;
  transition:transform .12s ease,background .12s ease}
.seg button:hover{background:var(--volt)}
.seg button:active{transform:scale(.96)}

/* ── дуель ───────────────────────────────────────────────────────────── */
.bar{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(242,241,235,.14)}
.bar i{display:block;height:100%;width:0;background:var(--volt);transition:width .25s ease}
.count{position:fixed;top:18px;left:0;right:0;text-align:center;font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;color:var(--mut)}

.ring{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,40px);
  width:100%;max-width:1100px}
.card{flex:1 1 0;min-width:0;aspect-ratio:1/1;max-height:62vh;background:var(--bone);
  border:0;border-radius:22px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;overflow:hidden;padding:8%;transition:transform .12s ease,box-shadow .12s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card:active{transform:scale(.97)}
.card.gone{opacity:0;transform:scale(.9)}
.card img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;
  pointer-events:none}
.vs{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--mut);flex:none}

.hint{position:fixed;bottom:26px;left:0;right:0;text-align:center;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;color:var(--mut)}
kbd{font-family:var(--mono);border:1px solid rgba(242,241,235,.25);border-radius:5px;
  padding:1px 5px;font-size:10px}

/* ── фінал ───────────────────────────────────────────────────────────── */
.winner{margin:26px auto 0;width:min(330px,74vw);aspect-ratio:1/1;background:var(--bone);
  border-radius:22px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:11%}
.winner img{max-width:100%;max-height:100%;min-height:0;object-fit:contain}
.ask{margin-top:34px}
.thanks{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--volt)}

@media (max-width:620px){
  .ring{flex-direction:column;gap:14px}
  .card{width:100%;flex:none;aspect-ratio:auto;height:32vh;max-height:32vh;padding:6%}
  .hint{display:none}
}

/* ── фінальний набір ──────────────────────────────────────────────────── */
.packgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  max-width:430px;margin:22px auto 6px}
.pcell{background:var(--bone);border-radius:12px;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;padding:11%}
.pcell img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:430px){ .packgrid{gap:7px} }