:root{
    --bg:#0f1115; --bg2:#171a21; --card:#1b1f28; --card-h:#232834;
    --border:#262b36; --text:#e8ecf3; --muted:#8b93a7;
    --accent:#7c5cff; --accent2:#22d3ee;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background:var(--bg); color:var(--text); min-height:100vh;
}

/* ---------- topbar ---------- */
.topbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; padding:18px 32px; border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:10;
    background:rgba(15,17,21,.85); backdrop-filter:blur(12px);
}
.brand{display:flex; align-items:center; gap:14px}
.logo{
    width:44px; height:44px; border-radius:12px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:grid; place-items:center; font-weight:800; font-size:20px; color:#fff;
}
.brand h1{font-size:18px; margin:0; letter-spacing:-.3px}
.studio{margin:2px 0 0; font-size:12px; color:var(--muted)}
#search{
background:var(--bg2); border:1px solid var(--border); color:var(--text);
padding:10px 14px; border-radius:10px; font-size:14px;
min-width:260px; outline:none; transition:border-color .15s;
}
#search:focus{border-color:var(--accent)}

/* ---------- filters ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; padding:16px 32px 0}
.chip{
    background:var(--bg2); border:1px solid var(--border); color:var(--muted);
    padding:6px 14px; border-radius:999px; font-size:13px;
    cursor:pointer; transition:all .15s;
}
.chip:hover{color:var(--text); border-color:#3a4152}
.chip.active{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------- grid ---------- */
main{padding:24px 32px 40px}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:20px;
}
.card{
    background:var(--card); border:1px solid var(--border); border-radius:16px;
    overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
    transition:transform .15s, border-color .15s, background .15s;
}
.card:hover{transform:translateY(-3px); border-color:#3a4152; background:var(--card-h)}
.thumb{
    aspect-ratio:16/10; background:linear-gradient(135deg,#23283a,#161a24);
    display:grid; place-items:center; font-size:44px; font-weight:800;
    color:rgba(255,255,255,.15); overflow:hidden;
}
.thumb img{width:100%; height:100%; object-fit:cover}
.card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1}
.card-title-row{
    display:flex; align-items:center; gap:8px;
    justify-content:space-between;
}
.card-title{font-size:16px; font-weight:700; margin:0}
.card-desc{
    font-size:13px; color:var(--muted); margin:0; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{
    font-size:11px; padding:3px 8px; border-radius:6px;
    background:rgba(124,92,255,.15); color:#b8a6ff;
    border:1px solid rgba(124,92,255,.25);
}
.card-footer{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:auto; padding-top:4px;
}
.platforms{display:flex; gap:6px; font-size:15px; opacity:.85}
.platforms .off{opacity:.2; filter:grayscale(1)}
.play-btn{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    border:none; color:#fff; font-weight:700; font-size:13px;
    padding:8px 16px; border-radius:9px; cursor:pointer;
}
.play-btn:hover{opacity:.9}
.empty{text-align:center; color:var(--muted); padding:60px 0; font-size:15px}

/* ---------- бейдж версии на карточке ---------- */
.version-badge{
    font-size:11px; font-weight:700;
    padding:2px 8px; border-radius:6px;
    background:rgba(34,211,238,.15);
    color:#7fe3f2;
    border:1px solid rgba(34,211,238,.3);
    flex-shrink:0;
}

/* ---------- game page ---------- */
body.game-page{display:flex; height:100vh; overflow:hidden}
.game-sidebar{
    width:52px; flex-shrink:0; background:var(--bg2);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column; align-items:center;
    padding:12px 0; gap:8px;
}
.side-btn{
    width:38px; height:38px; border-radius:10px;
    background:transparent; border:1px solid transparent;
    color:var(--muted); font-size:18px; cursor:pointer;
    display:grid; place-items:center; text-decoration:none;
    transition:all .15s;
}
.side-btn:hover{background:var(--card); color:var(--text); border-color:var(--border)}
.side-btn.active{color:var(--accent2)}
.side-spacer{flex:1}
.side-title{
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-size:12px; color:var(--muted); letter-spacing:1px;
    text-transform:uppercase; padding:8px 0; white-space:nowrap;
    max-height:40vh; overflow:hidden; text-overflow:ellipsis;
}
.game-stage{
    flex:1; position:relative; background:#000;
    overflow:hidden;                 /* добавь — чтобы ничего не вылезало */
}
.game-stage iframe{
    position:absolute; inset:0;      /* top/right/bottom/left = 0 */
    width:100%; height:100%;
    border:0; display:block; margin:0; padding:0;
    background:#000;
}
.notfound{
    color:var(--muted); height:100%; display:grid; place-items:center; font-size:16px;
}
.notfound a{color:var(--accent); margin-left:8px; text-decoration:none}

/* ---------- кнопка версий в сайдбаре ---------- */
.version-btn{
    font-size:10px; font-weight:800; letter-spacing:-.3px;
}
.version-popover{
    position:fixed; left:60px;
    background:var(--card); border:1px solid var(--border);
    border-radius:12px; padding:8px; min-width:220px;
    z-index:100; box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.vp-title{
    font-size:11px; color:var(--muted); text-transform:uppercase;
    letter-spacing:1px; padding:4px 10px 8px;
}
.vp-list{list-style:none; margin:0; padding:0}
.vp-item{
    padding:8px 10px; border-radius:8px; cursor:pointer;
    display:grid; grid-template-columns:auto 1fr; gap:2px 10px;
    align-items:baseline; transition:background .12s;
}
.vp-item:hover{background:var(--card-h)}
.vp-item.active{background:rgba(124,92,255,.15)}
.vp-label{font-weight:700; font-size:13px}
.vp-date{font-size:11px; color:var(--muted); text-align:right}
.vp-notes{
    grid-column:1 / -1; font-size:12px; color:var(--muted);
    margin-top:2px; line-height:1.4;
}

/* ---------- предупреждение для мобилок ---------- */
.mobile-warning{
    position:absolute; inset:0;
    background:rgba(10,12,16,.82); backdrop-filter:blur(6px);
    display:grid; place-items:center; z-index:50; padding:20px;
}
.mw-card{
    background:var(--card); border:1px solid var(--border);
    border-radius:18px; padding:28px 24px 22px; max-width:420px;
    text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.mw-icon{font-size:40px; margin-bottom:12px}
.mw-title{font-size:18px; margin:0 0 10px}
.mw-text{font-size:14px; color:var(--muted); line-height:1.5; margin:0 0 22px}
.mw-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.mw-btn{
    display:inline-block; padding:10px 18px; border-radius:10px;
    font-size:14px; font-weight:600; cursor:pointer;
    border:1px solid var(--border); text-decoration:none;
    transition:opacity .15s, border-color .15s;
}
.mw-btn-secondary{background:transparent; color:var(--text)}
.mw-btn-secondary:hover{border-color:#3a4152}
.mw-btn-primary{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    border-color:transparent; color:#fff;
}
.mw-btn-primary:hover{opacity:.9}

/* ---------- mobile ---------- */
@media (max-width:640px){
    .topbar{flex-direction:column; align-items:stretch; padding:14px 16px; gap:12px}
    #search{min-width:0; width:100%}
    .filters{padding:14px 16px 0}
    main{padding:18px 16px 28px}
    .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
    .game-sidebar{width:46px}
    .side-btn{width:34px; height:34px; font-size:16px}
    .version-popover{left:52px; min-width:200px}
}