:root {
    --bhs-red: #d7193f;
    --bhs-ink: #111216;
    --bhs-muted: #777b83;
    --bhs-surface: #f4f4f7;
    --bhs-line: #dedfe3;
}

.bhs-games-page { background: #fff; color: var(--bhs-ink); }
.bhs-games-shell { width: min(100% - 2rem, 860px); margin-inline: auto; padding-block: 2rem 4rem; }
.bhs-games-kicker { color: var(--bhs-red); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bhs-games-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.04em; }
.bhs-games-intro { color: var(--bhs-muted); font-size: clamp(1rem, 2.2vw, 1.16rem); max-width: 40rem; }
.bhs-game-list { display: grid; gap: .9rem; }
.bhs-game-card {
    display: grid; grid-template-columns: 76px minmax(0,1fr) auto; align-items: center; gap: 1rem;
    padding: .9rem; border: 1px solid var(--bhs-line); border-radius: 1.15rem; background: #fff;
    box-shadow: 0 8px 24px rgba(10,10,20,.055); color: inherit; text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bhs-game-card:hover { color: inherit; transform: translateY(-2px); border-color: #c9cbd0; box-shadow: 0 14px 34px rgba(10,10,20,.09); }
.bhs-game-card:focus-visible { outline: 3px solid rgba(215,25,63,.28); outline-offset: 3px; }
.bhs-game-icon { width: 76px; height: 76px; border-radius: 18px; display: block; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.bhs-game-card h2 { font-size: 1.22rem; font-weight: 750; margin: 0 0 .22rem; letter-spacing: -.02em; }
.bhs-game-card p { margin: 0; color: var(--bhs-muted); line-height: 1.35; }
.bhs-game-chevron { width: 2.45rem; height: 2.45rem; border-radius: 50%; background: var(--bhs-surface); display: grid; place-items: center; color: #202124; }

.bhs-play-shell { width: min(100% - 1.5rem, 900px); margin-inline: auto; padding-block: 1.25rem 3rem; }
.bhs-game-head { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; gap: .85rem; align-items: center; margin-bottom: 1.15rem; }
.bhs-game-head img { width: 62px; height: 62px; object-fit: cover; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.bhs-game-head h1 { margin: 0; font-size: clamp(1.6rem,4vw,2.25rem); font-weight: 800; letter-spacing: -.035em; }
.bhs-game-head p { margin: .1rem 0 0; color: var(--bhs-muted); }
.bhs-icon-button { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bhs-surface); color: #15161a; font-size: 1.15rem; }
.bhs-icon-button:hover { background: #e8e9ed; }
.bhs-stat-strip { display: grid; grid-template-columns: repeat(4,1fr); margin: 1rem 0; border-radius: 1rem; background: var(--bhs-surface); overflow: hidden; }
.bhs-stat { text-align: center; padding: .85rem .35rem; position: relative; }
.bhs-stat + .bhs-stat::before { content:""; position:absolute; left:0; top:24%; bottom:24%; width:1px; background:#d4d5da; }
.bhs-stat strong { display: block; font-size: 1.35rem; line-height: 1.1; }
.bhs-stat span { color: var(--bhs-muted); font-size: .8rem; }
.bhs-feedback {
    position: fixed; inset: 0; z-index: 1080; display: none; place-items: center; padding: 1.25rem;
    background: rgba(8,9,12,.6); backdrop-filter: blur(4px);
}
.bhs-feedback.show { display: grid; }
.bhs-feedback-card { width: min(100%, 390px); background: #fff; border-radius: 1.4rem; padding: 1.5rem; text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.bhs-feedback-symbol { width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; background: #fff3c9; color: #d09200; font-size: 2rem; }
.bhs-feedback-card h2 { font-weight: 800; letter-spacing: -.025em; }
.bhs-game-ad { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--bhs-line); }

@media (max-width: 520px) {
    .bhs-games-shell { width: min(100% - 1.25rem, 860px); padding-top: 1.25rem; }
    .bhs-game-card { grid-template-columns: 64px minmax(0,1fr) auto; gap: .75rem; padding: .72rem; }
    .bhs-game-icon { width:64px; height:64px; border-radius:15px; }
    .bhs-game-card h2 { font-size: 1.08rem; }
    .bhs-game-card p { font-size:.88rem; }
    .bhs-game-chevron { width:2.1rem; height:2.1rem; }
    .bhs-game-head { grid-template-columns: 54px minmax(0,1fr) auto; }
    .bhs-game-head img { width:54px; height:54px; border-radius:13px; }
}

@media (prefers-reduced-motion: reduce) {
    .bhs-game-card { transition:none; }
}