/* Каталог игр города (game.onrify.com/, шаг 20, макет docs/screens/discovery.html): шапка, поиск, сторис, карточки игр,
   «Есть свой бизнес?», пустой город, сторис на весь экран. Сначала телефон (390 и 320 px): нажатия ≥ 44 px, без прокрутки вбок.
   Зависит от tokens.css, base.css, game.css (значки, кнопки, шторки, .ava, .ib, .langbtn), coupon.css (.page, .list, .empty, .cap). */
body.noscroll{overflow:hidden}
.page .scroll{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}

/* шапка: onrify · игры, город, язык, профиль */
.ctop{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;align-items:center;gap:2px;height:56px;padding:env(safe-area-inset-top,0px) 4px 0 12px;box-sizing:content-box;border-bottom:1px solid var(--line)}
.ctop .logo{flex:1;min-width:0;overflow:hidden;display:flex;align-items:baseline;gap:5px;font-weight:800;font-size:21px;letter-spacing:-.03em;min-height:var(--tap);white-space:nowrap;text-align:left}
.ctop .logo i{width:5px;height:5px;border-radius:50%;background:var(--text);display:inline-block;align-self:center;margin:0 -1px}
.ctop .logo small{font-size:15px;font-weight:600;color:var(--gray);letter-spacing:0}
.pillbtn{display:flex;align-items:center;gap:3px;height:34px;padding:0 8px 0 9px;margin:5px 0;border-radius:999px;background:var(--press);font-size:13.5px;font-weight:600;min-width:0;flex:0 1 auto;position:relative}
.pillbtn::after{content:"";position:absolute;inset:-5px 0}
.pillbtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.ctop .langbtn{padding:0 2px 0 10px}

/* поиск */
.sw-row{display:flex;align-items:center;gap:4px;padding:10px 12px 4px 16px}
.csearch{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 4px 0 12px;border-radius:12px;background:var(--press);color:var(--gray)}
.csearch input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;font-size:16px;color:var(--text);height:100%;-webkit-appearance:none;appearance:none}
.csearch input::-webkit-search-cancel-button{display:none}
.csearch .ib.sm{width:36px;height:36px}
.qcancel{min-height:var(--tap);padding:0 8px;font-weight:600;font-size:15px;flex:none}
.frow{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 14px;border-top:1px solid var(--line)}
.list>.frow:first-child{border-top:0}
.frow:active{background:var(--press)}
.frow .pic{width:48px;height:48px;border-radius:10px;overflow:hidden;flex:none;background:var(--box)}
.frow .pic img{width:100%;height:100%;object-fit:cover;display:block}
.frow .t{flex:1;min-width:0}
.frow .t b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .t span{display:block;font-size:13px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* сторис */
.stories{display:flex;gap:12px;overflow-x:auto;padding:10px 16px 12px;scrollbar-width:none;border-bottom:1px solid var(--line);overscroll-behavior-x:contain}
.stories::-webkit-scrollbar{display:none}
.story{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:#262626}
.story .ring{width:66px;height:66px;border-radius:50%;padding:2.5px;background:conic-gradient(from 200deg,#FFD43B,#FF8A3D,#FF4D6D,#C13584,#FFD43B);display:flex}
.story .ring .ava{width:100%;height:100%;border:2.5px solid var(--bg);font-size:20px;box-sizing:border-box}
.story.seen .ring{background:var(--pill)}
.story.add .ring{background:none;box-shadow:0 0 0 1.5px var(--pill) inset}
.story.add .ava{background:var(--box)!important;color:var(--text);border-color:transparent}
.story .nm{max-width:68px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* лента */
.sech{display:flex;align-items:baseline;justify-content:space-between;padding:14px 16px 4px}
.sech b{font-size:17px}.sech span{font-size:13.5px;color:var(--gray)}
.gpost{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.gpost:active{background:var(--box)}
.gpost .ava{width:40px;height:40px;font-size:16px}
.gb{flex:1;min-width:0}
.gpost .who{display:flex;align-items:center;gap:4px;min-width:0}
.gpost .who b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gpost .time{margin-left:auto;padding-left:8px;font-size:13px;color:var(--gray);white-space:nowrap}
.gpost .prize{margin:2px 0 0;font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.gpost .aim{display:block;font-size:12px;color:var(--gray);margin-top:1px}
.gmeta{font-size:13.5px;color:var(--gray);margin-top:3px}
.gpics{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px;border-radius:14px;overflow:hidden}
.gpics span{aspect-ratio:1;background:var(--box)}
.gpics img{width:100%;height:100%;object-fit:cover;display:block}
.gact{display:flex;align-items:center;gap:12px;margin-top:10px}
.gact .btn.sm{width:auto;min-height:44px;padding:0 18px;font-size:15px;border-radius:12px}
.muted{color:var(--gray);font-size:13.5px}

/* «Есть свой бизнес?», подвал, пустой город */
.bizbox{margin:16px;padding:16px;border-radius:18px;background:var(--box);display:grid;gap:8px}
.bizbox b{font-size:17px}.bizbox p{margin:0 0 6px;color:#333;font-size:14.5px}
.cfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;padding:8px 16px 4px;font-size:13px;color:var(--gray)}
.cfoot a{min-height:var(--tap);display:inline-flex;align-items:center}
.cempty{min-height:calc(100svh - 160px)}
.cempty .stack{width:100%;max-width:320px;margin-top:18px}
.sheet a.sub{display:flex;align-items:center;min-height:var(--tap);color:var(--you)}

/* сторис на весь экран */
.sv{position:fixed;inset:0;z-index:60;background:#111;color:#fff;animation:fade .2s}
.sv-in{max-width:520px;height:100%;margin:0 auto;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.sv-bars{display:flex;gap:4px;padding:8px 10px 0}
.sv-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.sv-bars b{display:block;height:100%;background:#fff}
.sv-hd{display:flex;align-items:center;gap:10px;padding:8px 4px 8px 12px}
.sv-hd .ava{width:32px;height:32px;font-size:13px}
.sv-hd .t{flex:1;min-width:0;line-height:1.2}
.sv-hd .t b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-hd .t span{font-size:12px;opacity:.75}
.sv-hd .ib{color:#fff}
.sv-card{flex:1;min-height:0;margin:0 8px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(170deg,#E9CFB3,#B78A63);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-x}
.sv-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sv-card::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none}
.sv-tx{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px;display:grid;gap:6px;pointer-events:none}
.sv-tx .ey{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.sv-tx b{font-size:26px;line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
.sv-tx span{font-size:14px;opacity:.85}
.sv-bt{padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px))}
.sv-bt .btn{background:#fff;color:#000}

@media (max-width:360px){
  .ctop{padding-left:10px}
  .ctop .logo{font-size:19px}.ctop .logo small{display:none}
  .pillbtn span{max-width:76px}
  .gpost{padding:12px}
  .gpost .ava{width:36px;height:36px}
}