/* Меню выбора игры при входе; клавиши рисует js/ui/hub.js. Фон тот же, что у тела страницы: меню — часть прибора, а не окно поверх него.
   Две полки: большие карточки главных игр (.hub-key-main) во всю ширину и плитки быстрых игр (.hub-key-tile) в две колонки.
   У каждой игры свой цвет --g: им окрашен круг под обложкой и чуть подкрашено тело клавиши. С пятнадцатью играми меню
   выше любого телефона и прокручивается — крупные клавиши важнее, чем «всё в один экран». */

.games-hub {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding:
        calc(var(--safe-top) + var(--s4))
        calc(var(--safe-right) + var(--s3))
        calc(var(--safe-bottom) + var(--s4))
        calc(var(--safe-left) + var(--s3));
    background-color: var(--ink-0);
    background-image: var(--bg-film), var(--bg-light), var(--bg-vignette);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 128px 128px, 100% 760px, 100% 100%;
    background-position: 0 0, 50% 0, 50% 0;
}

/* Авто-поля ставят карточку в середину, а когда окно ниже неё — прижимают к верху, и меню прокручивается. */
.hub-card {
    flex: none;
    width: min(460px, 100%);
    margin: auto;
}

.hub-cap {
    margin: 0 0 var(--s1);
    font-size: var(--fs-cap);
    letter-spacing: var(--ls-cap);
    text-transform: uppercase;
    color: var(--txt-3);
}

.hub-h {
    margin: 0 0 var(--s3);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--txt);
}

.hub-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Подпись полки быстрых игр — строка сетки во всю ширину. */
.hub-sect {
    grid-column: 1 / -1;
    margin: var(--s2) 0 calc(-1 * var(--s1));
}

/* Клавиша — обычная .btn: обложка и тело (название, строка о игре). И <button>, и <a> выглядят одинаково. */
.hub-key {
    --g: #6B7A6C;                       /* игра без своего цвета */
    height: auto;
    text-decoration: none;
    /* Без color-mix (старый WebView) — обычная клавиша; с ним — чуть подкрашенная цветом игры. */
    border-color: var(--key-line);
    border-color: color-mix(in srgb, var(--g) 36%, var(--key-line));
    background-image: linear-gradient(180deg, var(--key-top) 0%, var(--key-mid) 52%, var(--key-bot) 100%);
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--g) 18%, var(--key-top)) 0%,
        color-mix(in srgb, var(--g) 12%, var(--key-mid)) 52%,
        color-mix(in srgb, var(--g) 8%, var(--key-bot)) 100%);
}

@media (hover: hover) {
    .hub-key:hover {
        border-color: var(--line-hi);
        border-color: color-mix(in srgb, var(--g) 70%, var(--key-line));
    }
}

.hub-key:focus-visible {
    outline: 1px solid var(--line-hi);
    outline-offset: 2px;
}

/* Большая карточка: тело слева, обложка справа. */
.hub-key-main {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--s3);
    min-height: 112px;
    padding: var(--s3) var(--s3) var(--s3) var(--s4);
    text-align: left;
}

.hub-key-main .hub-ico {
    order: 2;
    width: 80px;
    height: 80px;
}

.hub-key-main .hub-ico svg {
    width: 56px;
    height: 56px;
}

.hub-key-main .hub-body {
    flex: 1 1 auto;
    align-items: flex-start;
}

.hub-key-main .hub-name {
    font-size: 20px;
}

.hub-key-main .hub-sub {
    font-size: var(--fs-md);
    color: var(--txt-2);
}

/* Плитка быстрой игры: обложка сверху, название и строка под ней. */
.hub-key-tile {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--s2);
    min-height: 136px;
    padding: var(--s3) var(--s2) var(--s2);
    text-align: center;
}

.hub-key-tile .hub-ico {
    width: 56px;
    height: 56px;
}

.hub-key-tile .hub-ico svg {
    width: 40px;
    height: 40px;
}

.hub-key-tile .hub-body {
    width: 100%;
    align-items: center;
}

.hub-key-tile .hub-name {
    font-size: 14px;
    line-height: 1.2;
    /* Длинное название переносится на вторую строку, а не режется: плитка узкая, а имя игры должно читаться целиком. */
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hub-key-tile .hub-sub {
    font-size: 11px;
    line-height: 1.25;
    color: var(--txt-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Обложка — цветной круг с бликом сверху и тенью снизу; рисунок на нём белый. */
.hub-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #FFFFFF;
    background-color: var(--g);
    background-image: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 38%, rgba(0, 0, 0, 0) 60%);
    box-shadow:
        inset 0 -3px 6px rgba(0, 0, 0, .22),
        inset 0 1px 2px rgba(255, 255, 255, .24),
        0 4px 10px rgba(0, 0, 0, .28);
}

.hub-ico svg {
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}

.hub-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hub-name {
    max-width: 100%;
    font-weight: 600;
    letter-spacing: var(--ls-cap);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-sub {
    max-width: 100%;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* Цвета игр. Подобраны так, чтобы белый рисунок читался на круге (контраст ≥ 3.3) в обеих темах. */
.hub-key[data-game="fastbag"] { --g: #B8801C; }
.hub-key[data-game="durak"]   { --g: #C4343C; }
.hub-key[data-game="mines"]   { --g: #1E9C80; }
.hub-key[data-game="crash"]   { --g: #D9581F; }
.hub-key[data-game="bounce"]  { --g: #2B86D0; }
.hub-key[data-game="chicken"] { --g: #6E9A1C; }
.hub-key[data-game="tower"]   { --g: #7557D9; }
.hub-key[data-game="flip"]    { --g: #B0801A; }
.hub-key[data-game="cases"]   { --g: #C94A8C; }
.hub-key[data-game="plinko"]  { --g: #1F93AC; }
.hub-key[data-game="dice"]    { --g: #4F63D6; }
.hub-key[data-game="limbo"]   { --g: #CF3F5C; }
.hub-key[data-game="wheel"]   { --g: #9C4FBF; }
.hub-key[data-game="keno"]    { --g: #2E9A55; }
.hub-key[data-game="hilo"]    { --g: #C66A2E; }

/* Узкий телефон (320): плитки чуть ниже, обложка и название мельче, чтобы «Выше-ниже» не резалось. */
@media (max-width: 359.98px) {
    .hub-key-tile { min-height: 126px; padding: var(--s2) 6px; }
    .hub-key-tile .hub-ico { width: 50px; height: 50px; }
    .hub-key-tile .hub-ico svg { width: 36px; height: 36px; }
    .hub-key-tile .hub-name { font-size: 13px; }
    .hub-key-main { min-height: 100px; padding-left: var(--s3); }
    .hub-key-main .hub-ico { width: 68px; height: 68px; }
    .hub-key-main .hub-ico svg { width: 48px; height: 48px; }
    .hub-key-main .hub-name { font-size: 18px; }
}

/* Широкое окно (планшет, ноутбук, телефон боком): четыре колонки, большие карточки по две в ряд;
   одинокая большая карточка — во всю ширину. */
@media (min-width: 600px) {
    .hub-card { width: min(720px, 100%); }
    .hub-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hub-key-main { grid-column: span 2; }
    .hub-list:not(:has(.hub-key-main + .hub-key-main)) .hub-key-main { grid-column: 1 / -1; }
}