:root{
  --bg: #0f141a;            /* тёмный фон */
  --bg-soft: #151d24;       /* панели */
  --text: #c7d5e0;          /* основной текст */
  --muted: #9ab1c3;         /* вторичный текст */
  --primary: #66c0f4;       /* синий акцент (Steam-like) */
  --primary-2: #2a475e;     /* тёмный синий для обводок/hover */
  --stroke: #22384a;        /* обводка */
  --glass: transparent;     /* отключаем стеклянные эффекты */
  --shadow: 0 4px 12px rgba(0,0,0,.25); /* минимальная тень */
  --radius-xl: 8px;         /* более квадратные углы */
}
:root.light{
  --bg: #e9eef2;
  --bg-soft: #ffffff;
  --text: #121820;
  --muted: #4b5a69;
  --primary: #2b7fd6;
  --primary-2: #245f9c;
  --stroke: #d5dee6;
  --glass: transparent;
  --shadow: 0 4px 10px rgba(10, 31, 68, .08);
}
*{box-sizing:border-box}
html,body{height:100%; width:100%; overflow-x:hidden}
body{
  margin:0; font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  background: var(--bg);
  color:var(--text);
  letter-spacing:.2px;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit;text-decoration:none}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background: var(--bg);
  border-bottom:1px solid var(--stroke);
}
.container{width:100%; max-width:1200px; margin:0 auto; padding: 16px 20px;}
.row{display:flex; gap:14px; align-items:center; justify-content:space-between; margin-bottom: 10px}
.bar{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.bar > *{min-width:0}
.actions{display:flex; gap:8px; align-items:center}
.brand{display:flex; align-items:center; gap:12px}
.brand h1{font-size:18px; margin:0; letter-spacing:.4px}
.brand:hover{opacity:.9}
.logo{
  width:38px; height:38px; border-radius:6px; display:grid; place-items:center; flex:0 0 38px;
  background: var(--primary);
  color:#0b1218; font-weight:800; box-shadow: none;
}
.brand h1{font-size:18px; margin:0; letter-spacing:.4px}
.search{
  flex:1; min-width:0; max-width:560px; display:flex; gap:8px; align-items:center; background:var(--bg-soft);
  padding:10px 12px; border-radius:6px; border:1px solid var(--stroke);
}
.search{ position:relative }
.suggestions{ position:absolute; left:0; right:auto; top:100%; margin-top:6px; width:100%; max-width:560px; background:var(--bg-soft); border:1px solid var(--stroke); border-radius:6px; box-shadow: var(--shadow); z-index:100; overflow:hidden }
.suggestions.hidden,[hidden].suggestions{ display:none }
.suggestions .item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--stroke); cursor:pointer }
.suggestions .item:first-child{ border-top:0 }
.suggestions .item:hover{ background: #162029 }
.suggestions .thumb{ width:64px; height:36px; flex:0 0 64px; aspect-ratio:auto; border-radius:4px; overflow:hidden }
.suggestions .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.suggestions .title{ font-size:14px; font-weight:700; margin:0 }
.suggestions .meta{ font-size:12px }
.search input{
  flex:1; background:transparent; border:0; outline:0; color:var(--text);
  font-size:15px; padding:8px; min-width:0;
}
.icon-btn{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px;
  border:1px solid var(--stroke); background:var(--bg-soft); cursor:pointer; border-radius:6px;
}
.icon-btn:hover{transform: translateY(-1px);}

/* Nav */
.tabs{display:flex; gap:8px; flex-wrap:wrap; padding:12px 0}
.tab{
  padding:10px 14px; border-radius:6px; border:1px solid var(--stroke);
  background:var(--bg-soft); color:var(--muted); cursor:pointer; font-weight:600;
}
.tab.active{background:var(--primary); color:#0b1218; border-color:transparent}

/* Top navigation inside header */
.topnav{display:flex; gap:18px; align-items:center; border-top:1px solid var(--stroke); margin-top:12px; padding-top:10px; flex-wrap:wrap}
.topnav .nav-link{color:var(--muted); padding:10px 0; border-bottom:2px solid transparent}
.topnav .nav-link:hover{color:var(--text)}
.topnav .nav-link.active{color:var(--text); border-bottom-color: var(--primary)}
.topnav .tab{color:var(--muted); padding:10px 0; border:0; background:transparent; border-bottom:2px solid transparent}
.topnav .tab:hover{color:var(--text)}
.topnav .tab.active{color:var(--text); border-bottom-color: var(--primary)}

/* Hero */
.hero{
  margin:18px 0 10px; padding:18px; border:1px solid var(--stroke); border-radius:var(--radius-xl);
  background:var(--bg-soft);
}
.hero h2{margin:0 0 8px}
.sub{color:var(--muted); margin:0}

/* Sections */
.section{margin:24px 0}
.section > .card{ margin-top:16px }
.section > .card:first-of-type{ margin-top:0 }
.section-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.section-title{font-size:20px; font-weight:800; letter-spacing:.3px}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
/* Prevent grid children from overflowing on narrow screens */
.grid{grid-template-columns:repeat(12,minmax(0,1fr))}
/* Responsive column helpers for detail layouts */
.col-8{grid-column:span 12}
.col-4{grid-column:span 12}
@media(min-width:980px){
  .col-8{grid-column:span 8}
  .col-4{grid-column:span 4}
}

/* Cards */
.card{
  grid-column: span 12;
  width:100%;
  min-width:0;
  background:var(--bg-soft); border:1px solid var(--stroke); border-radius:8px;
  overflow:hidden; box-shadow: none; display:flex; flex-direction:column;
}
@media(min-width:680px){ .card{grid-column: span 6;} }
@media(min-width:980px){ .card{grid-column: span 4;} }
.thumb{position:relative; width:100%; aspect-ratio:16/9; background:#0f1318}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.badge{position:absolute; top:10px; left:10px; padding:6px 10px; border-radius:6px; font-size:12px; font-weight:700; letter-spacing:.3px; color:#0b1218; background:var(--primary)}
.content{padding:14px; min-width:0}
.title{font-size:16px; font-weight:800; margin:0 0 6px}
.title{overflow-wrap:anywhere}
img,svg{max-width:100%; height:auto}
iframe,embed,object,video{max-width:100%}
.meta{color:var(--muted); font-size:13px}
.actions{display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--stroke)}
.btn{
  padding:10px 12px; border-radius:10px; border:1px solid var(--stroke); background:transparent; color:var(--text);
  cursor:pointer; font-weight:700; letter-spacing:.3px
}
.btn{border-radius:6px}
.btn.primary{border-color:transparent; background:var(--primary); color:#0b1218}
.btn:disabled{opacity:.5; cursor:not-allowed}

.row-controls{display:flex; gap:10px; align-items:center}
/* Make controls wrap on small screens and never overflow */
.row-controls{flex-wrap:wrap}
.row-controls > *{min-width:0; max-width:100%}
@media (max-width:720px){
  .row-controls select,
  .row-controls .chip,
  .row-controls .btn,
  .row-controls input,
  .row-controls .kbd{
    flex: 1 1 100%;
  }
}
select, .chip{
  padding:10px 12px; border-radius:10px; border:1px solid var(--stroke); background:var(--bg-soft); color:var(--text);
}
select{min-width:0; max-width:100%}
.chip{cursor:pointer; border-radius:6px}
.chip.active{background:var(--primary); border-color:transparent; color:#0b1218}

.loadmore{display:flex; justify-content:center; margin:16px 0}

/* Skeletons */
.skeleton{
  position:relative; overflow:hidden; background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.06), rgba(255,255,255,0.04));
  background-size:200% 100%; animation:shimmer 1.2s infinite linear;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Modal */
.modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.5); z-index:10000}
.modal.active{display:grid}
.dialog{width:min(580px, 92vw); background:var(--bg-soft); border:1px solid var(--stroke); border-radius:8px; box-shadow:none}
.dialog .hd{display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid var(--stroke)}
.dialog .bd{padding:14px; display:grid; gap:12px}
.dialog label{font-weight:700}
.dialog input{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--stroke); background:transparent; color:var(--text)}
.kbd{padding:2px 6px; border-radius:6px; border:1px solid var(--stroke); background:var(--bg-soft); font-size:12px; color:var(--muted)}

footer{padding:40px 0; color:var(--muted); text-align:center}
main{flex:1 0 auto}

/* Comments */
.comments-title{font-size:18px; font-weight:800; margin:0 0 8px}
.comment-item{padding:10px 0; border-top:1px solid var(--stroke)}
.comment-item:first-child{border-top:0}
.comment-author{font-weight:700}
.comment-date{color:var(--muted); font-size:12px; margin-left:8px}
.comment-text{white-space:pre-wrap; margin:6px 0 0}
.comment-form{display:grid; gap:8px; margin-top:12px}
.comment-form input,.comment-form textarea{width:100%; padding:10px 12px; border-radius:6px; border:1px solid var(--stroke); background:transparent; color:var(--text)}
.comment-form textarea{min-height:90px; resize:vertical}
.comment-actions{display:flex; gap:8px; align-items:center}

/* Simple top navigation */
.site-nav{position:sticky; top:0; z-index:60; background:var(--bg); border-bottom:1px solid var(--stroke)}
.site-nav .inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.site-nav .links{display:flex; gap:12px; align-items:center}
.site-nav .right{display:flex; gap:12px; align-items:center}
.site-nav .link{color:var(--muted); padding:8px 10px; border-radius:6px; border:1px solid transparent}
.site-nav .link:hover, .site-nav .link.active{color:var(--text); background:var(--bg-soft); border-color:var(--stroke)}
@media (max-width:720px){ .site-nav .links{display:none} }
.site-nav .lang select{padding:6px 8px; border-radius:6px; border:1px solid var(--stroke); background:var(--bg-soft); color:var(--text)}

/* Mobile bottom nav */
.mobile-nav{position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; border-top:1px solid var(--stroke); background:var(--bg-soft); padding-bottom: env(safe-area-inset-bottom, 0px)}
.mobile-nav a{flex:1; text-align:center; padding:6px 4px; color:var(--muted); font-size:12px; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:2px}
.mobile-nav a .ico{width:20px; height:20px; display:block}
.mobile-nav a .label{line-height:1}
.mobile-nav a.active{color:var(--text)}
@media (min-width:721px){ .mobile-nav{display:none} }
@media (max-width:720px){ body{ padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) } }
@media (max-width:720px){
  .bar{gap:12px}
  .search{flex:1 1 100%; max-width:100%}
  .topnav{gap:12px}
}

/* Section header alignment tweaks */
.section-header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.section-header .section-title{flex:1 1 auto}
.section-header .row-controls{display:flex; align-items:center; gap:10px}
@media (max-width:720px){ .section-header{flex-direction:row; flex-wrap:wrap; align-items:center} .section-header .section-title{flex:1 1 100%} .section-header .row-controls{flex:1 1 auto; width:auto} }
@media (max-width:720px){ .row-controls select, .row-controls .chip, .row-controls .btn, .row-controls input, .row-controls .kbd { flex: initial } }
select{vertical-align:middle}

/* games grid image overrides */
#gamesGrid .thumb{aspect-ratio:16/9}

/* Game detail (Steam/Epic inspired) */
.game-hero{position:relative; border:1px solid var(--stroke); border-radius:8px; overflow:hidden; background: #0d1319; height:min(46vw, 360px);}
.game-hero .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.9) saturate(1.05);} /* lighter, less darkening */
.game-hero::after{content:""; position:absolute; inset:0; display:none}
.game-hero .inner{position:absolute; inset:auto 0 0 0; padding:16px 20px; display:grid; gap:10px}
.game-title{margin:0; font-size:24px; font-weight:800}
@media(min-width:720px){ .game-title{font-size:28px} }
.badges{display:flex; flex-wrap:wrap; gap:8px}
.game-actions{display:flex; gap:8px; flex-wrap:wrap}
.kv{margin:8px 0 0; padding:0}
.kv div{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:flex-start; border-top:1px solid var(--stroke); padding:8px 0}
.kv div:first-child{border-top:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0; font-weight:700}
.kv dt,.kv dd{min-width:0}
.kv dd{word-break:break-word}
.desc{position:relative; max-height:180px; overflow:hidden; transition:max-height .3s ease}
.desc-inner{overflow-wrap:anywhere}
.desc.expanded{max-height:none}
.desc::after{content:""; position:absolute; left:0; right:0; bottom:0; height:48px; background:linear-gradient(180deg, rgba(15,20,26,0) 0%, var(--bg-soft) 100%); z-index:1; pointer-events:none}
.desc.expanded::after{display:none}
.desc .expand-hint{position:absolute; left:50%; transform:translateX(-50%); bottom:8px; padding:8px 12px; border-radius:16px; border:1px solid transparent; background:var(--primary); color:#0b1218; cursor:pointer; font-weight:800; font-size:12px; box-shadow: var(--shadow); z-index:2; pointer-events:auto}
.desc .expand-hint:hover{filter:brightness(0.95)}
.gallery{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr); gap:10px; overflow-x:auto; padding-bottom:6px; width:100%; max-width:100%}
.gallery img{width:100%; height:140px; object-fit:cover; border-radius:6px; display:block; border:1px solid var(--stroke)}
/* Lightbox for screenshots */
.lightbox{width:100vw; height:100vh; background:rgba(0,0,0,.92); display:grid; grid-template-rows:auto 1fr}
.lb-toolbar{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.35)}
.lb-toolbar .lb-counter{color:#c7d5e0; font-weight:700}
.lb-toolbar .spacer{flex:1}
.lb-btn{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:18px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.08); color:#c7d5e0; cursor:pointer}
.lb-btn:hover{background:rgba(255,255,255,.14)}
.lb-canvas{position:relative; flex:1; overflow:hidden; cursor:grab; background:rgba(0,0,0,.2)}
.lb-canvas.dragging{cursor:grabbing}
.lb-canvas img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); transform-origin:center center; max-width:none; max-height:none; user-select:none; -webkit-user-drag:none; transition:transform .15s ease; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb-arrow{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:22px; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.4); color:#c7d5e0; cursor:pointer; display:grid; place-items:center}
.lb-arrow:hover{background:rgba(0,0,0,.55)}
.lb-prev{left:16px}
.lb-next{right:16px}

/* Game detail mobile overflow fixes */
#gameDetail{min-width:0}
#gameDetail .game-hero,
#gameDetail .card{max-width:100%}
#gameDetail .desc-inner,
#gameDetail .game-title,
#gameDetail .kv dt,
#gameDetail .kv dd{overflow-wrap:anywhere; word-break:break-word}
#gameDetail table{width:100%; max-width:100%; display:block; overflow-x:auto}
@media (max-width:720px){
  #gameDetail .kv div{flex-direction:column; gap:4px; align-items:flex-start}
  #gameDetail .game-actions .btn{flex:1 1 100%; text-align:center}
  #gameDetail .gallery{grid-auto-columns:minmax(180px, 1fr)}
}

/* Guard against fixed-width embeds on small screens */
#gameDetail,
#gameDetail section,
#gameDetail article{width:100%; max-width:100%}
#gameDetail *{min-width:0}
@media (max-width:720px){
  [data-adb-id]{max-width:100%; overflow:hidden}
  [data-adb-id] iframe,
  [data-adb-id] img,
  [data-adb-id] embed,
  [data-adb-id] object{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block;
  }
}