:root{
  --bg:#0e0c0b; --card:#1a1715; --line:#2a2522; --text:#faf7f2; --muted:#a39b92;
  --acc:#e3bc62; --acc-soft:rgba(227,188,98,.16); --gold:linear-gradient(135deg,#f7e3a3 0%,#d9ac4b 45%,#a8792a 100%); --ok:#3ecf72; --ok-soft:rgba(62,207,114,.16);
  --bad:#ff6b5b; --bad-soft:rgba(255,107,91,.16); --wine:#6e1a1a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Onest,system-ui,sans-serif}
body{min-height:100vh;background:
  radial-gradient(120% 60% at 50% -10%,rgba(227,188,98,.18),transparent 60%),
  repeating-linear-gradient(45deg,rgba(227,188,98,.035) 0 1px,transparent 1px 22px),
  repeating-linear-gradient(-45deg,rgba(227,188,98,.035) 0 1px,transparent 1px 22px),
  var(--bg);background-attachment:fixed}
.emblem{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 6px;color:var(--acc)}
.emblem:before,.emblem:after{content:"";height:1px;width:56px;background:linear-gradient(90deg,transparent,var(--acc))}
.emblem:after{background:linear-gradient(90deg,var(--acc),transparent)}
.gold{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.deco{border:1px solid rgba(227,188,98,.35);border-radius:16px;padding:22px 18px;background:rgba(14,12,11,.6);position:relative}
.deco:before{content:"";position:absolute;inset:5px;border:1px solid rgba(227,188,98,.15);border-radius:12px;pointer-events:none}
body.lock{overflow:hidden}
.wrap{max-width:560px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
h1{font-size:30px;line-height:1.1;margin:8px 0 12px;font-weight:800}
h2{font-size:24px;margin:12px 0 8px}
.kicker{color:var(--acc);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.muted{color:var(--muted)} .small{font-size:13px}
.center{min-height:70vh;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:6px}
.stack{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.input{height:52px;border-radius:12px;border:0;background:var(--card);color:var(--text);font:inherit;font-size:18px;padding:0 16px;outline:none}
.input:focus{box-shadow:0 0 0 2px var(--acc) inset}
.btn{height:44px;border:0;border-radius:12px;font:inherit;font-weight:700;font-size:16px;padding:0 16px;cursor:pointer;color:var(--text);background:var(--card);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{background:var(--gold);color:#1d1404;box-shadow:0 6px 20px rgba(217,172,75,.25)}
.btn.big{height:56px;font-size:18px}
.btn.ghost{background:rgba(255,255,255,.08)}
.btn.wine{background:var(--wine)}
.btn:disabled{opacity:.55}
.btn.grow{flex:1}
.err{color:var(--bad)}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.who{color:var(--muted);font-size:14px;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rhead{display:flex;justify-content:space-between;align-items:flex-end;margin:4px 0 10px}
.rtitle{font-size:22px;font-weight:800}
.timer{position:relative;height:40px;border-radius:12px;background:var(--card);overflow:hidden;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.timer .bar{position:absolute;left:0;top:0;bottom:0;background:var(--acc-soft);transition:width .25s linear}
.timer span{position:relative}
.timer.hot{color:var(--bad)} .timer.hot .bar{background:var(--bad-soft)}
.timer.over{font-size:15px;font-weight:600;color:var(--acc)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--card);aspect-ratio:3/4;cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile .num{position:absolute;left:8px;top:8px;background:var(--gold);color:#1a1300;font-weight:800;border-radius:8px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px}
.tile.dim img{opacity:.35}
.tile.mine{box-shadow:0 0 0 4px var(--acc) inset,0 0 24px rgba(227,188,98,.35)}
.tile.mine img{opacity:1}
.tile .my{position:absolute;left:8px;bottom:8px;background:var(--gold);color:#1d1404;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700}
.tile.real{box-shadow:0 0 0 4px var(--ok) inset}
.tile.fake img{opacity:.4;filter:grayscale(.6)}
.tile .tag{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.72);color:#faf7f2;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700}
.tile .tag.ok{background:var(--ok);color:#06210f}
.hint{color:var(--muted);text-align:center;font-size:14px;margin:14px 0 0}
.res{border-radius:12px;padding:12px 14px;font-weight:700;margin-bottom:12px;text-align:center}
.res.ok{background:var(--ok-soft);color:var(--ok)} .res.bad{background:var(--bad-soft);color:var(--bad)} .res.none{background:var(--card);color:var(--muted)}
.lbh{margin-top:4px}
.lb{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.lb li{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:12px;padding:10px 14px}
.lb li.me{background:var(--acc-soft)}
.lb .pl{width:26px;color:var(--muted);font-weight:700}
.lb li:nth-child(-n+3) .pl{color:var(--acc)}
.lb .nm{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .pt{font-weight:800}
.pulse{width:18px;height:18px;border-radius:50%;background:var(--gold);margin:0 auto 10px;animation:p 1.4s ease-in-out infinite}
@keyframes p{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:1}}
.viewer{position:fixed;inset:0;background:#000;z-index:10;display:flex;flex-direction:column;padding:calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom))}
.viewer[hidden]{display:none}
.viewer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.badge{background:var(--acc);color:#1a1300;font-weight:800;border-radius:8px;padding:6px 10px}
.icon-btn{width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center}
.viewer-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.viewer-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.viewer-bottom{display:flex;gap:8px;margin-top:10px}
.viewer-bottom .btn{height:52px}
.res.mid{background:var(--acc-soft);color:var(--acc)}
.first{margin:14px 0 8px;padding:12px 14px;border-radius:12px;background:var(--acc-soft);text-align:center;font-weight:600}
.first b{color:var(--acc)}
.sec-title{font-weight:800;margin:14px 0 8px}
.lb.stats li{padding:8px 12px}
.lb .mark{font-size:12px;font-weight:700;border-radius:8px;padding:3px 8px}
.lb .mark.ok{background:var(--ok-soft);color:var(--ok)} .lb .mark.bad{background:var(--bad-soft);color:var(--bad)}
.lb .pt{min-width:54px;text-align:right}
.lb .crown{background:var(--gold);color:#1d1404;border-radius:6px;padding:1px 6px;font-size:11px;margin-left:4px}
.lb .nm small{display:block;color:var(--muted);font-size:12px;font-weight:500;margin-top:2px}
.lb .loser{background:var(--bad);color:#fff;border-radius:6px;padding:1px 6px;font-size:11px;margin-left:4px}
.first.loserbox{background:var(--bad-soft)} .first.loserbox b{color:var(--bad)}
/* плашки и уведомления */
.ic{width:22px;height:22px;flex:none}
.input{border:1.5px solid rgba(227,188,98,.25);transition:border-color .2s, box-shadow .2s}
.input:focus{box-shadow:0 0 0 4px rgba(227,188,98,.14);border-color:var(--acc)}
.input.invalid{border-color:var(--bad);box-shadow:0 0 0 4px rgba(255,107,91,.14)}
.note{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;font-weight:600;font-size:15px;text-align:left;line-height:1.3}
.note[hidden]{display:none}
.note.bad{background:linear-gradient(135deg,rgba(255,107,91,.18),rgba(110,26,26,.35));color:#ffb3a8;border:1px solid rgba(255,107,91,.35)}
.shake{animation:shake .35s ease}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.res{display:flex;align-items:center;gap:12px;text-align:left;border-radius:16px;padding:14px 16px;line-height:1.3;border:1px solid transparent;position:relative;overflow:hidden}
.res:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor;opacity:.9}
.res.ok{background:linear-gradient(135deg,rgba(62,207,114,.20),rgba(62,207,114,.06));border-color:rgba(62,207,114,.35)}
.res.bad{background:linear-gradient(135deg,rgba(255,107,91,.22),rgba(110,26,26,.30));border-color:rgba(255,107,91,.35)}
.res.mid{background:linear-gradient(135deg,rgba(227,188,98,.22),rgba(227,188,98,.06));border-color:rgba(227,188,98,.35)}
.res.none{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(255,255,255,.12)}
.first{border:1px solid rgba(227,188,98,.3);border-radius:16px;background:linear-gradient(135deg,rgba(227,188,98,.18),rgba(227,188,98,.04))}
.first.loserbox{border-color:rgba(255,107,91,.35);background:linear-gradient(135deg,rgba(255,107,91,.20),rgba(110,26,26,.25))}
.lb li{border:1px solid rgba(255,255,255,.05)}
.lb li.me{border-color:rgba(227,188,98,.45)}
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translate(-50%,-140%);z-index:50;display:flex;align-items:center;gap:10px;max-width:min(92vw,480px);padding:13px 16px;border-radius:16px;font-weight:700;font-size:15px;box-shadow:0 14px 40px rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.toast.show{transform:translate(-50%,0)}
.toast.bad{background:rgba(70,18,16,.92);color:#ffb3a8;border:1px solid rgba(255,107,91,.45)}
.toast.ok{background:rgba(18,48,30,.92);color:#8ff0b2;border:1px solid rgba(62,207,114,.45)}
/* плитки по пропорциям фото, мобильные мелочи */
.tile{aspect-ratio:var(--ar,.75)}
.grid[style*="--ar:1"] .tile, .grid .tile{aspect-ratio:var(--ar,.75)}
.btn,.tile,.chip,.icon-btn,.ri{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.tile img{-webkit-user-drag:none}
.who{max-width:45%}
.rtitle{overflow-wrap:anywhere}
.lb .nm{min-width:0}
.viewer-img img{touch-action:pan-y}
@media (max-width:360px){.wrap{padding-left:12px;padding-right:12px}.btn.big{font-size:16px}.rtitle{font-size:20px}}
.grid.wide{grid-template-columns:1fr;gap:10px}
/* просмотр: приближение, точки, анимация листания */
.viewer-img{position:relative;overflow:hidden;border-radius:10px}
.viewer-img.zoomed{overflow:auto;display:block;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.viewer-img.zoomed img{max-width:none;max-height:none;border-radius:0}
.viewer-img img{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.vdots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.vdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .2s}
.vdots i.on{width:22px;border-radius:4px;background:var(--acc)}
.vdots i.pick{box-shadow:0 0 0 2px var(--acc)}
.vhint{text-align:center;color:var(--muted);font-size:12px;margin-top:6px}
.sl{animation:sl .22s ease} .sr{animation:sr .22s ease}
@keyframes sl{from{transform:translateX(30px);opacity:.3}to{transform:none;opacity:1}}
@keyframes sr{from{transform:translateX(-30px);opacity:.3}to{transform:none;opacity:1}}
[hidden]{display:none!important}
.vdots i.real{background:var(--ok)}
.vdots i.real.on{background:var(--ok)}
.viewer-bottom.nopick .btn{flex:1}