/* Receba — visual 1:1 do design aprovado (v4). NAO editar a mao:
   gerado a partir de design/index-v4.html. */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
body{margin:0;background:#0F0F14;color:#F2F3F7;font-family:'Source Sans 3',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#3792FF}
a:hover{color:#6FB1FF}
button{cursor:pointer;font-family:inherit}
a:focus-visible,button:focus-visible{outline:2px solid #3792FF;outline-offset:2px;border-radius:4px}
::selection{background:#0A7AFF;color:#FFFFFF}
.dt-only{display:none !important}
@media (min-width:1020px){.dt-only{display:flex !important}.mb-only{display:none !important}}
.page-pad{padding-bottom:104px}
@media (min-width:768px){.page-pad{padding-bottom:0}.mbar{display:none !important}}
.dl-row{display:grid;grid-template-columns:1fr;gap:3px 28px;padding:13px 0;border-top:1px solid #262631}
.dl-row:first-child{border-top:0}
@media (min-width:720px){.dl-row{grid-template-columns:290px 1fr}}
table.rt{width:100%;border-collapse:collapse}
.rt thead th{padding:12px 18px;border-bottom:1px solid #32323F;background:rgba(38,38,49,0.55)}
.rt tbody th,.rt tbody td{padding:17px 18px;border-top:1px solid #262631;text-align:left;vertical-align:top}
.rt tbody tr:first-child th,.rt tbody tr:first-child td{border-top:0}
@media (max-width:899px){
.rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rt,.rt tbody,.rt tr,.rt tbody th,.rt tbody td{display:block}
.rt tbody tr{border:1px solid #32323F;border-radius:14px;background:#191A1E;padding:6px 16px;margin:0 0 12px}
.rt tbody th,.rt tbody td{padding:13px 0;border-top:1px solid #262631}
.rt tbody tr>*:first-child{border-top:0}
.rt tbody td[data-th]::before{content:attr(data-th);display:block;font-family:'Roboto Mono',monospace;font-size:11px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:#A0A3B0;margin:0 0 6px}
}
.tbl-card{margin:0}
@media (min-width:900px){.tbl-card{background:#191A1E;border:1px solid #32323F;border-radius:16px;overflow:hidden}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}html{scroll-behavior:auto}}

/* --- порт: то, что в Claude Design жило на рантайме --- */
.faq-a{display:none}
.faq-item.is-open .faq-a{display:block}
.chev{flex:none;width:9px;height:9px;border-right:2px solid #3792FF;border-bottom:2px solid #3792FF;transform:rotate(45deg);transition:transform 0.18s ease}
.faq-item.is-open .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.shelf-row{display:flex;justify-content:center;align-items:center;padding:36px 0 30px;transition:transform 0.45s ease}
.shelf-card{flex:none;width:190px;height:253px;margin:0 -26px;position:relative;border-radius:16px;transition:transform 0.45s ease,box-shadow 0.45s ease}
/* Прints с сайта оператора. Плитка игры почти той же пропорции, что карточка
   (0,744 против 0,751), поэтому cover срезает меньше процента. */
.shelf-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px;background:#191A1E}
/* Плитка ведёт на сайт оператора. Ховер — только фильтр и обводка: transform
   у .shelf-card ставит карусельный JS инлайном, CSS его всё равно не перебьёт. */
.shelf-link{display:block;width:100%;height:100%;border-radius:16px;outline-offset:3px}
.shelf-link .shelf-img{transition:filter 0.18s ease,box-shadow 0.18s ease}
.shelf-link:hover .shelf-img,.shelf-link:focus-visible .shelf-img{filter:brightness(1.1) saturate(1.05);box-shadow:0 0 0 2px #3792FF}
/* Лента коллекций: ровно 4 карточки в ряд плюс краешек пятой — первый сигнал
   «листается». Родную полосу прокрутки прячем целиком и рисуем свою (.pers-bar):
   родная на macOS видна только во время скролла, а на iOS её вообще не
   стилизовать — то есть как подсказка она не работает там, где нужнее всего. */
.pers-row{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pers-row>div{flex:0 0 calc((100% - 82px) / 4);scroll-snap-align:start}
.pers-row::-webkit-scrollbar{display:none}
.pers-row:focus-visible{outline:2px solid #3792FF;outline-offset:4px}
.pers-bar{position:relative;height:6px;margin:12px 0 0;border-radius:999px;background:#262631;cursor:pointer;touch-action:none}
.pers-thumb{position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:999px;background:#3792FF;transition:background 0.15s ease}
.pers-bar:hover .pers-thumb{background:#0A7AFF}
@media (max-width:900px){.pers-row>div{flex:0 0 68%}}
.pers-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 0}
.pers-hint{font-size:13.5px;line-height:1.5;color:#A0A3B0}
.pers-btns{display:flex;gap:8px;flex:none}
.pers-move{width:40px;height:40px;border-radius:50%;border:1px solid #32323F;background:#191A1E;color:#F2F3F7;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color 0.15s ease,background 0.15s ease}
.pers-move:hover{border-color:#3792FF;background:#262631}
/* Персонаж: холст шире любой карточки, поэтому cover масштабирует по высоте и
   режет только ровный фон слева — фигура никогда не обрезается сверху и снизу,
   а слева остаётся место под чип-подпись. */
.pers-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
/* Banner de cookies do mb-core: cores vem do mbcore_config; aqui so a tipografia
   do guia. Prefixo body porque o plugin imprime o CSS dele no rodape (depois). */
body .mbcore-consent{border-radius:14px}
body .mbcore-consent p{color:#C9CCD6;font-size:15px;line-height:1.6}
body .mbcore-consent button{font-family:Montserrat,sans-serif;font-size:15px;border-radius:12px;padding:13px 22px}
body .mbcore-consent .mbcore-accept:hover{background:#3792FF}
body .mbcore-consent .mbcore-reject:hover{border-color:#3792FF;color:#FFFFFF}
.hv1:hover{color:#F2F3F7;background:rgba(242,243,247,0.05)}
.hv2:hover{color:#F2F3F7;background:rgba(242,243,247,0.05)}
.hv3:hover{color:#F2F3F7;background:rgba(242,243,247,0.05)}
.hv4:hover{color:#F2F3F7;background:rgba(242,243,247,0.05)}
.hv5:hover{color:#F2F3F7;background:rgba(242,243,247,0.05)}
.hv6:hover{color:#F2F3F7;background:rgba(242,243,247,0.05)}
.hv7:hover{color:#F2F3F7;background:rgba(242,243,247,0.05)}
.hv8:hover{color:#F2F3F7;background:rgba(242,243,247,0.05)}
.hv9:hover{border-color:#3792FF;color:#F2F3F7}
.hv10:hover{background:#3792FF;color:#FFFFFF;transform:translateY(-1px)}
.hv11:hover{border-color:#3792FF;color:#F2F3F7;transform:translateY(-1px)}
.hv12:hover{border-color:#3792FF;color:#3792FF}
.hv13:hover{background:#3792FF}
.hv14:hover{border-color:#3792FF;color:#3792FF}
.hv15:hover{transform:translateY(-2px);border-color:#3A3B4A}
.hv16:hover{transform:translateY(-2px);border-color:#3A3B4A}
.hv17:hover{transform:translateY(-2px);border-color:#3A3B4A}
.hv18:hover{border-color:#3792FF;transform:translateY(-2px)}
.hv19:hover{border-color:#3792FF;transform:translateY(-2px)}
.hv20:hover{color:#F2F3F7}
.hv21:hover{color:#F2F3F7}
.hv22:hover{color:#F2F3F7}
.hv23:hover{color:#F2F3F7}
.hv24:hover{color:#F2F3F7}
.hv25:hover{color:#F2F3F7}
.hv26:hover{color:#F2F3F7}
.hv27:hover{color:#F2F3F7}
.hv28:hover{color:#F2F3F7}
.hv29:hover{color:#F2F3F7}
.hv30:hover{color:#F2F3F7}
.hv31:hover{color:#F2F3F7}
.hv32:hover{color:#F2F3F7}
.hv33:hover{color:#F2F3F7}
.hv34:hover{color:#F2F3F7}
.hv35:hover{background:#3792FF;color:#FFFFFF}