/* каталог игр publo.app (вариант 05 «Пабло») — общие стили каталога, страниц игр и приложений */
:root {
    --paper:#fbf8f2; --paper2:#f3eee4; --ink:#1d1a24; --mute:#6c6677; --line:#1d1a24; --soft:#e6dfd2;
    --violet:#8b5cf6; --violet-d:#6d3fe0; --lav:#d9d0ff; --lav2:#efeaff;
    --sun:#ffc526; --sun-l:#fff1c4; --rose:#ff8fab; --rose-l:#ffe3ea; --sky:#7cc8ff; --sky-l:#dff1ff; --leaf:#8fd16a; --leaf-l:#e3f6d6;
    --r:18px;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 "Golos Text", system-ui, sans-serif; overflow-x:hidden; }
  a { color:inherit; text-decoration:none; }
  button { font:inherit; color:inherit; }
  h1, h2, h3 { font-family:Rubik, system-ui, sans-serif; line-height:1.08; margin:0; letter-spacing:-.01em; }
  img { display:block; }
  .wrap { max-width:1260px; margin:0 auto; padding:0 28px; }
  @media (max-width:600px) { .wrap { padding:0 16px; } }

  /* шильдик черновика */
  .draft { display:block; text-align:center; font:600 11px/1 ui-monospace, monospace; background:var(--ink); color:var(--paper); padding:6px; letter-spacing:.04em; }
  .draft:hover { color:var(--sun); }

  /* кнопки — вырезанная бумага */
  .btn { display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border:2px solid var(--line); border-radius:14px; font:700 16px/1 "Golos Text", sans-serif; background:#fff; box-shadow:4px 4px 0 var(--line); transition:transform .12s, box-shadow .12s; cursor:pointer; white-space:nowrap; }
  .btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--line); }
  .btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--line); }
  .btn.sun { background:var(--sun); }
  .btn.violet { background:var(--violet); color:#fff; }
  .btn.small { padding:9px 13px; font-size:14px; box-shadow:3px 3px 0 var(--line); }
  .round { width:44px; height:44px; padding:0; justify-content:center; border-radius:50%; font-size:18px; box-shadow:3px 3px 0 var(--line); }

  /* шапка */
  header { position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(8px); border-bottom:2px solid var(--line); }
  .bar { display:flex; align-items:center; gap:26px; height:68px; }
  .logo { display:flex; align-items:center; gap:10px; font:800 25px/1 Rubik, sans-serif; letter-spacing:-.02em; flex:none; }
  .face { display:inline-block; flex:none; width:42px; height:42px; border-radius:50%; border:2px solid var(--line); background:var(--lav2) url(/img/pablo.png) 52% 22% / 150% auto no-repeat; }
  .logo b { color:var(--violet); }
  .logo .word { display:inline-flex; align-items:flex-end; }
  .logo .app { writing-mode:vertical-rl; transform:rotate(180deg); font:800 11px/1 Rubik, sans-serif; font-style:normal; letter-spacing:.03em; color:var(--violet); margin:0 0 3px 1px; }
  nav.main { display:flex; gap:22px; font-weight:600; }
  nav.main a { color:var(--mute); white-space:nowrap; }
  nav.main a:hover { color:var(--ink); }
  nav.main a.on { color:var(--ink); text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:4px; text-underline-offset:7px; }
  .bar .sp { flex:1; }
  .search { display:flex; align-items:center; gap:8px; border:2px solid var(--line); border-radius:99px; background:#fff; padding:0 6px 0 14px; height:44px; width:min(320px, 30vw); box-shadow:3px 3px 0 var(--line); }
  .search input { border:0; outline:0; background:none; font:500 15px/1 "Golos Text", sans-serif; width:100%; color:var(--ink); }
  .search kbd { font:600 11px/1 ui-monospace, monospace; border:1.5px solid var(--soft); border-radius:6px; padding:4px 6px; color:var(--mute); }
  .me { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; }
  .coins { display:inline-flex; align-items:center; gap:6px; background:var(--sun-l); border:2px solid var(--line); border-radius:99px; padding:6px 11px; }
  /* узкий экран: разделы второй строкой под шапкой, листаются вбок */
  @media (max-width:1000px) {
    .bar { flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:4px; row-gap:6px; }
    nav.main { order:5; width:100%; gap:18px; overflow-x:auto; scrollbar-width:none; padding:4px 0 10px; }
    nav.main::-webkit-scrollbar { display:none; }
  }
  @media (max-width:600px) {
    .bar { gap:10px; height:auto; } .logo { font-size:21px; } .logo .face { width:34px; height:34px; } .logo .app { font-size:9.5px; }
    .search { width:auto; flex:1; height:40px; padding-left:12px; } .search kbd { display:none; } .me .coins { display:none; }
  }

  /* раскладка: жанры слева полоской иконок */
  .layout { display:grid; grid-template-columns:76px 1fr; }
  .rail { position:sticky; top:70px; align-self:start; height:calc(100vh - 70px); z-index:25; }
  .rail nav { position:absolute; inset:0 auto 0 0; width:76px; padding:18px 12px; display:flex; flex-direction:column; gap:6px; background:var(--paper); border-right:2px solid var(--line); overflow:hidden auto; scrollbar-width:none; transition:width .2s, box-shadow .2s; }
  .rail nav:hover, .rail nav:focus-within { width:236px; box-shadow:6px 0 0 rgba(29,26,36,.08); }
  .rail a { display:flex; align-items:center; gap:12px; padding:5px; border-radius:14px; white-space:nowrap; font-weight:600; font-size:15px; color:#48425a; }
  .rail a:hover, .rail a.on { background:var(--lav2); color:var(--ink); }
  .rail a .gi { flex:none; width:40px; height:40px; border:2px solid var(--line); border-radius:12px; display:grid; place-items:center; font-size:19px; background:var(--c, #fff); }
  .rail a.on .gi { box-shadow:2px 2px 0 var(--line); }
  .rail hr { border:0; border-top:2px dashed var(--soft); margin:6px 4px; width:40px; }
  .rail .lbl { opacity:0; transition:opacity .15s; }
  .rail nav:hover .lbl, .rail nav:focus-within .lbl { opacity:1; }
  main { min-width:0; overflow-x:clip; }
  @media (max-width:1100px) { .layout { grid-template-columns:1fr; } .rail { display:none; } }

  section { padding:44px 0 8px; }
  .head { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:20px; }
  .head h2 { font-size:clamp(25px, 2.6vw, 34px); font-weight:800; }
  .head p { margin:4px 0 0; color:var(--mute); font-size:15px; }
  .head .tools { display:flex; gap:10px; flex:none; }
  .more { font-weight:700; color:var(--violet-d); white-space:nowrap; }
  .more:hover { text-decoration:underline; }
  @media (max-width:600px) { section { padding:34px 0 4px; } .head { margin-bottom:14px; } .head .tools .round { display:none; } }

  /* ленты */
  .row { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 28px; padding:8px 28px 22px; margin:0 -28px; scrollbar-width:none; }
  .row::-webkit-scrollbar, .ribbon::-webkit-scrollbar { display:none; }
  .row > * { scroll-snap-align:start; flex:none; }
  @media (max-width:600px) { .row { gap:14px; padding:6px 16px 18px; margin:0 -16px; scroll-padding:0 16px; } }

  /* ── обложка: картинка + второй кадр из неё же + веер «скриншотов» ── */
  .shot { position:relative; }
  .cv { position:relative; overflow:hidden; border:2px solid var(--line); border-radius:14px; background:var(--lav) center/cover; aspect-ratio:16/10; z-index:1; }
  .cv img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--fp, 50% 40%); }
  .cv img.b { opacity:0; object-position:var(--fp2, 72% 30%); transform:scale(1.5); }
  .cv .ph { position:absolute; inset:0; display:none; place-items:center; align-content:center; gap:6px; text-align:center; background:repeating-linear-gradient(135deg, var(--lav2) 0 14px, var(--lav) 14px 28px); font-size:44px; }
  .cv .ph small { font:800 15px/1.1 Rubik, sans-serif; color:var(--violet-d); padding:0 10px; }
  .cv.none img { display:none; } .cv.none .ph { display:grid; }
  .fan i { position:absolute; inset:0; border:2px solid var(--line); border-radius:14px; background:#fff center/cover; opacity:0; z-index:0; }
  .fan i:nth-child(1) { background-position:20% 30%; background-size:180%; }
  .fan i:nth-child(2) { background-position:85% 70%; background-size:200%; }
  /* оживление на наведение: камера медленно наезжает, веер раскрывается */
  .live .cv img.a { transition:transform 5s cubic-bezier(.2,.6,.3,1); }
  .live:hover .cv img.a, .live:focus-visible .cv img.a { transform:scale(1.14) translate(-2%, -2%); }
  .live .fan i { transition:transform .35s cubic-bezier(.3,1.4,.5,1), opacity .2s; }
  .live:hover .fan i, .live:focus-visible .fan i { opacity:1; }
  .live:hover .fan i:nth-child(1) { transform:translate(-9%, -5%) rotate(-7deg); }
  .live:hover .fan i:nth-child(2) { transform:translate(9%, -7%) rotate(6deg); }
  @media (prefers-reduced-motion:reduce) {
    /* без движения: вместо наезда — смена кадра, веер стоит на месте и просто проявляется */
    .live .cv img.a { transition:none; } .live:hover .cv img.a { transform:none; }
    .live .cv img.b { transition:opacity .5s; } .live:hover .cv img.b, .live:focus-visible .cv img.b { opacity:1; }
    .fan i:nth-child(1) { transform:translate(-9%, -5%) rotate(-7deg); } .fan i:nth-child(2) { transform:translate(9%, -7%) rotate(6deg); }
    .live .fan i { transition:opacity .3s; }
  }

  /* ── карточка игры ── */
  .card { display:flex; flex-direction:column; gap:10px; transition:transform .15s; min-width:0; }
  .card:hover { transform:translateY(-3px) rotate(var(--rot, -.6deg)); }
  .card .cv { box-shadow:4px 4px 0 var(--line); transition:box-shadow .15s; }
  .card:hover .cv { box-shadow:6px 7px 0 var(--line); }
  .card .bd { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; }
  .card .av { grid-row:span 2; width:38px; height:38px; border:2px solid var(--line); border-radius:11px; display:grid; place-items:center; font-size:19px; background:var(--av, #fff); }
  .card .tt { font:700 17px/1.15 Rubik, sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .card .gn { font-size:13.5px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .meta { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; color:#55506a; font-weight:500; }
  .meta .on { color:#2e7a12; font-weight:700; }
  .meta .on::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#3fb11f; margin-right:5px; vertical-align:1px; box-shadow:0 0 0 3px #3fb11f33; }
  .meta .lk { font-weight:700; }
  .card.p .cv { aspect-ratio:3/4; --fp:50% 45%; }
  .card.s .cv { aspect-ratio:1; }
  .card.w .cv { aspect-ratio:16/9; }

  /* ── фичеринг: Пабло советует ── */
  .feat { padding-top:30px; }
  .feat .head h2 { display:flex; align-items:center; gap:12px; }
  .feat .head h2 .face { width:48px; height:48px; box-shadow:3px 3px 0 var(--line); }
  .ribbon { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 28px; padding:12px 28px 28px; margin:0 -28px; scrollbar-width:none; align-items:stretch; }
  .hero { flex:0 0 min(900px, 100%); scroll-snap-align:start; position:relative; display:grid; grid-template-columns:1.18fr 1fr; background:var(--bg, var(--lav2)); border:2px solid var(--line); border-radius:26px; box-shadow:8px 8px 0 var(--line); transition:background-color .4s; }
  .hero .shot { margin:26px 6px 26px 26px; display:block; }
  .hero .shot .cv { rotate:-1.6deg; border-radius:16px; box-shadow:5px 5px 0 var(--line); }
  .hero .bd { position:relative; z-index:2; padding:26px 28px 26px 22px; display:flex; flex-direction:column; gap:14px; min-width:0; }
  .pick { display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:start; }
  .pick .face { width:52px; height:52px; }
  .bubble { position:relative; background:#fff; border:2px solid var(--line); border-radius:16px; padding:11px 14px; font-size:15px; line-height:1.4; color:#3d3847; }
  .bubble::before { content:""; position:absolute; left:-11px; top:16px; width:16px; height:16px; background:#fff; border-left:2px solid var(--line); border-bottom:2px solid var(--line); transform:rotate(45deg); }
  .hero h3 { font-size:clamp(30px, 3.4vw, 46px); font-weight:900; }
  .hero .gn { font-weight:600; color:var(--violet-d); }
  .hero .meta { font-size:14px; gap:6px 14px; }
  .hero .cta { display:flex; gap:12px; align-items:center; margin-top:auto; }
  .hero .num { position:absolute; right:18px; top:14px; font:800 13px/1 Rubik, sans-serif; color:var(--mute); }
  .hero .swap { transition:opacity .35s; } .hero.fade .swap { opacity:0; }
  .fmini { flex:0 0 200px; scroll-snap-align:start; display:flex; flex-direction:column; gap:10px; background:none; border:0; padding:0; text-align:left; cursor:pointer; }
  .fmini .cv { aspect-ratio:3/4; box-shadow:4px 4px 0 var(--line); }
  .fmini:nth-child(odd) .shot { rotate:2deg; } .fmini:nth-child(even) .shot { rotate:-1.5deg; }
  .fmini .tt { font:700 17px/1.15 Rubik, sans-serif; }
  .fmini .gn { font-size:13.5px; color:var(--mute); }
  .fmini:hover .tt { color:var(--violet-d); }
  .fmini .q { font:800 12px/1 Rubik, sans-serif; color:var(--violet-d); letter-spacing:.06em; text-transform:uppercase; }
  .dots { display:flex; gap:8px; margin-top:-6px; }
  .dots button { width:34px; height:8px; padding:0; border:2px solid var(--line); border-radius:99px; background:#fff; cursor:pointer; overflow:hidden; position:relative; }
  .dots button.on { background:var(--lav); }
  .dots button.on::after { content:""; position:absolute; inset:0; background:var(--violet); transform-origin:left; animation:fill 8s linear forwards; }
  .ribbon:hover ~ .dots button.on::after, .paused .dots button.on::after { animation-play-state:paused; }
  @keyframes fill { from { transform:scaleX(0); } }
  @media (prefers-reduced-motion:reduce) { .dots button.on::after { animation:none; } }
  @media (max-width:760px) {
    .hero { grid-template-columns:1fr; flex-basis:86%; border-radius:22px; box-shadow:6px 6px 0 var(--line); }
    .hero .shot { margin:16px 16px 0; }
    .hero .bd { padding:16px 18px 20px; gap:11px; }
    .pick { grid-template-columns:40px 1fr; } .pick .face { width:40px; height:40px; } .bubble { font-size:14px; padding:9px 12px; }
    .hero .num { display:none; }
    .fmini { flex-basis:42%; }
    .ribbon { gap:14px; padding:8px 16px 22px; margin:0 -16px; scroll-padding:0 16px; }
  }

  /* ── Продолжить: иконками ── */
  .cont { padding-top:26px; }
  .cont .line { display:flex; gap:22px; align-items:stretch; }
  .cont .icons { flex:1; min-width:0; display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; padding:4px 4px 10px; }
  .cont .icons::-webkit-scrollbar { display:none; }
  .ic { flex:none; width:84px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
  .ic .cv { width:76px; aspect-ratio:1; border-radius:20px; box-shadow:3px 3px 0 var(--line); transition:transform .15s; }
  .ic:nth-child(3n+1) .cv { rotate:-3deg; } .ic:nth-child(3n+2) .cv { rotate:2deg; }
  .ic:hover .cv { transform:translateY(-4px) scale(1.05); }
  .ic span { font:600 12.5px/1.15 "Golos Text", sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .ic .pg { width:60px; height:5px; border-radius:9px; background:var(--soft); overflow:hidden; }
  .ic .pg i { display:block; height:100%; background:var(--violet); border-radius:9px; }
  .cont h2 { font-size:20px; font-weight:800; display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .day { flex:0 0 330px; position:relative; display:grid; grid-template-columns:76px 1fr; gap:4px 14px; align-items:center; background:var(--sun); border:2px solid var(--line); border-radius:18px; box-shadow:5px 5px 0 var(--line); padding:14px 16px; rotate:1.2deg; margin-top:-8px; }
  .day .cv { width:76px; aspect-ratio:1; border-radius:16px; grid-row:span 3; }
  .day small { font:800 11.5px/1 Rubik, sans-serif; letter-spacing:.08em; text-transform:uppercase; }
  .day b { font:800 19px/1.1 Rubik, sans-serif; }
  .day p { margin:0; font-size:13.5px; line-height:1.3; }
  .day .wk { grid-column:1 / -1; display:flex; gap:5px; margin-top:8px; }
  .day .wk i { flex:1; font:700 10.5px/1 "Golos Text", sans-serif; font-style:normal; text-align:center; padding:5px 0; border:1.5px solid var(--line); border-radius:7px; background:#fff8; }
  .day .wk i.done { background:var(--ink); color:var(--sun); }
  .day .wk i.now { background:#fff; box-shadow:2px 2px 0 var(--line); }
  .day .tape { position:absolute; top:-12px; left:42%; width:70px; height:22px; background:#ffffffb0; border:1px solid #0002; rotate:-4deg; }
  @media (max-width:900px) { .cont .line { flex-direction:column; } .day { flex-basis:auto; margin:6px 6px 0 0; } }

  /* ── Новое: большая + 2×2 + постер ── */
  .mix { display:grid; grid-template-columns:repeat(12, 1fr); gap:22px 20px; align-items:start; }
  .mix .big { grid-column:span 5; }
  .mix .big .tt { font-size:24px; }
  .mix .quad { grid-column:span 4; display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
  .mix .quad .card .tt { font-size:15px; } .mix .quad .card .av { width:32px; height:32px; font-size:16px; border-radius:9px; }
  .mix .tall { grid-column:span 3; }
  .stamp { font:800 11px/1 Rubik, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--violet-d); }
  .upd { display:flex; align-items:center; gap:12px; margin-top:22px; padding:12px 14px; border:2px dashed var(--line); border-radius:16px; overflow-x:auto; scrollbar-width:none; }
  .upd::-webkit-scrollbar { display:none; }
  .upd > b { font:800 15px/1 Rubik, sans-serif; white-space:nowrap; }
  .upd a { flex:none; display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border:2px solid var(--line); border-radius:12px; background:#fff; font-weight:600; font-size:14px; white-space:nowrap; transition:transform .12s; }
  .upd a:hover { transform:rotate(-2deg); background:var(--sun-l); }
  .upd a .cv { width:30px; aspect-ratio:1; border-radius:8px; border-width:1.5px; }
  @media (max-width:1000px) { .mix .big { grid-column:span 12; } .mix .quad { grid-column:span 8; } .mix .tall { grid-column:span 4; } }
  @media (max-width:600px) { .mix { grid-template-columns:1fr 1fr; gap:18px 14px; } .mix .big, .mix .quad { grid-column:span 2; } .mix .tall { grid-column:span 2; } .mix .tall .cv { aspect-ratio:16/10; } }

  /* ── тематические полки на цветных подложках ── */
  .shelf { margin:46px 0 4px; padding:26px 0 6px; background:var(--sb); border-block:2px solid var(--line); position:relative; }
  .shelf .wrap { position:relative; }
  .shelf .sh { display:grid; grid-template-columns:auto 1fr auto; gap:4px 18px; align-items:center; margin-bottom:16px; }
  .shelf .sh .si { grid-row:span 2; width:64px; height:64px; display:grid; place-items:center; font-size:32px; background:#fff; border:2px solid var(--line); border-radius:20px; box-shadow:4px 4px 0 var(--line); rotate:-5deg; }
  .shelf h2 { font-size:clamp(24px, 2.6vw, 32px); font-weight:800; }
  .shelf .sub { color:#48425a; font-size:15px; }
  .shelf .go { grid-row:span 2; }
  .shelf.dark { --sb:#2a1f3a; color:var(--paper); }
  .shelf.dark .sub, .shelf.dark .gn, .shelf.dark .meta { color:#cfc6e0; }
  .shelf.dark .meta .on { color:#9ce57b; }
  .shelf.dark .card .cv { box-shadow:4px 4px 0 #000; border-color:#000; }
  .shelf.dark .sh .si { background:#3b2b52; border-color:#000; box-shadow:4px 4px 0 #000; }
  .shelf.dark .btn { box-shadow:4px 4px 0 #000; color:var(--ink); }
  .shelf .deco { position:absolute; right:-40px; top:-26px; width:220px; height:150px; background:var(--sd); clip-path:polygon(20% 0, 100% 10%, 90% 100%, 0 70%); opacity:.9; pointer-events:none; }
  .shelf .row .card.p { width:208px; } .shelf .row .card.s { width:196px; } .shelf .row .card.h { width:300px; }
  .shelf .row .card:nth-child(even) { --rot:.7deg; }
  @media (max-width:600px) {
    .shelf { margin-top:36px; padding-top:20px; }
    .shelf .sh { grid-template-columns:auto 1fr; } .shelf .sh .si { width:50px; height:50px; font-size:25px; border-radius:15px; } .shelf .go { display:none; }
    .shelf .row .card.p { width:150px; } .shelf .row .card.s { width:150px; } .shelf .row .card.h { width:250px; }
    .shelf .deco { width:130px; height:90px; right:-30px; }
  }

  /* две полки рядом — половинки на цветных подложках */
  .duo2 { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:46px; }
  .duo2 > div { min-width:0; }
  .duo2 .shelf { margin:0; border:2px solid var(--line); border-radius:26px; box-shadow:6px 6px 0 var(--line); padding:22px 0 2px; overflow:hidden; }
  .duo2 > div:first-child .shelf { rotate:-.5deg; } .duo2 > div:last-child .shelf { rotate:.5deg; }
  .duo2 .shelf .wrap { padding:0 22px; }
  .duo2 .shelf .go { display:none; }
  .duo2 .shelf .sh { grid-template-columns:auto 1fr; }
  .duo2 .shelf .row { margin:0 -22px; padding:8px 22px 20px; scroll-padding:0 22px; gap:16px; }
  .duo2 .shelf .row .card.p, .duo2 .shelf .row .card.s { width:168px; }
  @media (max-width:900px) { .duo2 { grid-template-columns:1fr; } }
  @media (max-width:600px) { .duo2 { gap:22px; margin-top:36px; } .duo2 .shelf .wrap { padding:0 16px; } .duo2 .shelf .row { margin:0 -16px; padding:8px 16px 18px; } .duo2 .shelf .row .card.p, .duo2 .shelf .row .card.s { width:150px; } }

  /* ── топ-10 ── */
  .podium { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-bottom:26px; }
  .pod { position:relative; padding-left:40px; }
  .pod .n { position:absolute; left:-6px; bottom:96px; z-index:3; font:900 128px/.8 Rubik, sans-serif; color:var(--nc, #fff); -webkit-text-stroke:3px var(--line); paint-order:stroke fill; text-shadow:5px 5px 0 var(--line); pointer-events:none; }
  .pod:nth-child(1) { --nc:var(--sun); } .pod:nth-child(2) { --nc:var(--lav); } .pod:nth-child(3) { --nc:var(--rose); }
  .list10 { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 26px; }
  .li { display:grid; grid-template-columns:56px 58px 1fr auto; gap:14px; align-items:center; padding:8px 12px 8px 4px; border-radius:16px; transition:background-color .15s; }
  .li:hover { background:var(--lav2); }
  .li .n { font:900 40px/1 Rubik, sans-serif; color:#fff; -webkit-text-stroke:2px var(--line); paint-order:stroke fill; text-align:center; }
  .li .cv { width:58px; aspect-ratio:1; border-radius:14px; box-shadow:3px 3px 0 var(--line); }
  .li .tt { font:700 17px/1.15 Rubik, sans-serif; } .li .gn { font-size:13.5px; color:var(--mute); }
  .li .pl { text-align:right; font-size:13px; color:var(--mute); white-space:nowrap; } .li .pl b { display:block; font:800 17px/1.1 Rubik, sans-serif; color:var(--ink); }
  @media (max-width:900px) {
    .podium { display:flex; overflow-x:auto; scrollbar-width:none; margin:0 -16px 20px; padding:4px 16px 12px; gap:12px; }
    .podium::-webkit-scrollbar { display:none; }
    .pod { flex:0 0 78%; padding-left:34px; } .pod .n { font-size:100px; bottom:92px; }
    .list10 { grid-template-columns:1fr; gap:4px; }
  }
  @media (max-width:600px) { .li { grid-template-columns:40px 50px 1fr auto; gap:10px; padding-left:0; } .li .n { font-size:30px; } .li .cv { width:50px; } .li .tt { font-size:16px; } }

  /* ── потому что играл ── */
  .because { display:grid; grid-template-columns:230px 1fr; gap:26px; align-items:center; }
  .src { position:relative; text-align:center; padding:18px 16px 16px; background:var(--lav2); border:2px solid var(--line); border-radius:20px; rotate:-2deg; box-shadow:5px 5px 0 var(--line); }
  .src .cv { aspect-ratio:1; border-radius:16px; margin-bottom:12px; }
  .src small { display:block; font-size:13px; color:var(--mute); } .src b { font:800 20px/1.15 Rubik, sans-serif; }
  .src svg { position:absolute; right:-46px; top:44%; width:58px; height:40px; }
  .because .row .card { width:210px; }
  @media (max-width:760px) { .because { grid-template-columns:1fr; gap:16px; } .src { display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center; text-align:left; padding:10px 14px; } .src .cv { margin:0; width:64px; } .src svg { display:none; } .because .row .card { width:160px; } }

  /* ── с рекордами ── */
  .boards { background:var(--sun-l); border-block:2px solid var(--line); margin-top:46px; padding:32px 0 14px; }
  .board { width:330px; display:flex; flex-direction:column; gap:12px; background:#fff; border:2px solid var(--line); border-radius:20px; box-shadow:5px 5px 0 var(--line); padding:14px; transition:transform .15s; }
  .board:hover { transform:rotate(-1deg) translateY(-3px); }
  .board .top { display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; }
  .board .cv { width:72px; aspect-ratio:1; border-radius:14px; }
  .board .tt { font:800 18px/1.15 Rubik, sans-serif; } .board .gn { font-size:13px; color:var(--mute); }
  .board ol { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
  .board li { display:grid; grid-template-columns:26px 1fr auto; gap:8px; align-items:center; font-size:14px; padding:6px 8px; border-radius:10px; background:var(--paper); }
  .board li:first-child { background:var(--sun); font-weight:700; }
  .board li i { font-style:normal; font:800 13px/1 Rubik, sans-serif; text-align:center; }
  .board li em { font-style:normal; font:700 14px/1 Rubik, sans-serif; }
  .board .btn { justify-content:center; }
  @media (max-width:600px) { .board { width:280px; } }

  /* ── игроки говорят ── */
  .says { display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; align-items:start; }
  .say { position:relative; margin:0; background:var(--c); border:2px solid var(--line); border-radius:18px; box-shadow:5px 5px 0 var(--line); padding:14px 14px 16px; display:flex; flex-direction:column; gap:12px; transition:transform .15s; }
  .say:nth-child(1) { rotate:-1.6deg; } .say:nth-child(2) { rotate:1.2deg; margin-top:22px; } .say:nth-child(3) { rotate:-.6deg; } .say:nth-child(4) { rotate:1.8deg; margin-top:30px; } .say:nth-child(5) { rotate:-1.2deg; margin-top:8px; }
  .say:hover { transform:translateY(-4px) scale(1.02); }
  .say .tape { position:absolute; top:-12px; left:50%; translate:-50% 0; width:76px; height:22px; background:#ffffffb8; border:1px solid #0002; rotate:3deg; z-index:2; }
  .say .cv { border-radius:12px; }
  .say blockquote { margin:0; font:600 16.5px/1.35 "Golos Text", sans-serif; }
  .say blockquote::before { content:"«"; } .say blockquote::after { content:"»"; }
  .say figcaption { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13.5px; color:#48425a; }
  .say figcaption b { color:var(--ink); }
  .stars { color:var(--ink); letter-spacing:1px; font-size:13px; white-space:nowrap; }
  .stars .off { opacity:.22; }
  .say .gm { font:700 14px/1.2 Rubik, sans-serif; color:var(--violet-d); margin-bottom:-4px; }
  .say .gm:hover { text-decoration:underline; }
  .says-head { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; }
  .says-head .face { width:64px; height:64px; box-shadow:4px 4px 0 var(--line); }
  @media (max-width:1000px) {
    .says { display:flex; overflow-x:auto; scrollbar-width:none; margin:0 -28px; padding:18px 28px 18px; gap:18px; scroll-snap-type:x mandatory; }
    .says::-webkit-scrollbar { display:none; }
    .say { flex:0 0 250px; scroll-snap-align:center; margin-top:0 !important; }
  }
  @media (max-width:600px) { .says { margin:0 -16px; padding:18px 16px; } .says-head .face { width:50px; height:50px; } }

  /* ── жанры иконками + все игры ── */
  .genres { display:grid; grid-template-columns:repeat(11, 1fr); gap:14px; margin-bottom:26px; }
  .gt { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px 12px; border:2px solid var(--line); border-radius:18px; background:#fff; cursor:pointer; transition:transform .12s, box-shadow .12s, background-color .12s; box-shadow:3px 3px 0 var(--line); }
  .gt .gi { width:54px; height:54px; display:grid; place-items:center; font-size:28px; border:2px solid var(--line); border-radius:16px; background:var(--c); rotate:-4deg; transition:rotate .2s; }
  .gt:nth-child(even) .gi { rotate:4deg; }
  .gt span { font:700 13.5px/1.15 Rubik, sans-serif; text-align:center; }
  .gt small { font-size:12px; color:var(--mute); margin-top:-4px; }
  .gt:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--line); } .gt:hover .gi { rotate:0deg; }
  .gt.on { background:var(--ink); color:var(--paper); } .gt.on small { color:#bbb3c9; }
  .all { display:grid; grid-template-columns:repeat(6, 1fr); gap:24px 18px; grid-auto-flow:dense; }
  .all .card.x { grid-column:span 2; grid-row:span 2; }
  .all .card.x .shot { flex:1; display:flex; flex-direction:column; } .all .card.x .cv { aspect-ratio:auto; flex:1; min-height:240px; }
  .all .card.x.r { grid-column:-3 / -1; }
  .all .card.x .tt { font-size:21px; }
  .all .card { animation:pop .35s both; }
  @keyframes pop { from { opacity:0; transform:translateY(10px); } }
  @media (prefers-reduced-motion:reduce) { .all .card { animation-name:show; } @keyframes show { from { opacity:0; } } }
  .empty { grid-column:1 / -1; padding:30px; text-align:center; border:2px dashed var(--soft); border-radius:18px; color:var(--mute); }
  @media (max-width:1200px) { .genres { grid-template-columns:repeat(6, 1fr); } .all { grid-template-columns:repeat(4, 1fr); } }
  @media (max-width:600px) {
    .genres { grid-template-columns:repeat(4, 1fr); gap:8px; } .gt { padding:10px 2px 8px; border-radius:14px; gap:6px; } .gt .gi { width:42px; height:42px; font-size:22px; border-radius:12px; } .gt span { font-size:11.5px; } .gt small { display:none; }
    .all { grid-template-columns:1fr 1fr; gap:18px 12px; } .all .card.x .cv { min-height:180px; } .card .tt { font-size:15px; } .card .av { width:32px; height:32px; font-size:16px; } .meta { font-size:12px; gap:2px 9px; }
  }

  /* ── «Сделал игру?» одной строкой ── */
  .addline { margin:56px 0 0; border-top:2px solid var(--line); background:var(--lav2); }
  .addline .wrap { display:flex; align-items:center; gap:14px; padding-top:16px; padding-bottom:16px; }
  .addline p { margin:0; flex:1; font-size:16px; } .addline p b { font-family:Rubik, sans-serif; }
  footer { border-top:2px solid var(--line); padding:20px 0 30px; font-size:14px; color:var(--mute); }
  footer .wrap { display:flex; gap:20px; flex-wrap:wrap; justify-content:space-between; }
  @media (max-width:600px) { .addline p span { display:none; } .addline .face { display:none; } }