:root{
  --ink:#12130E;
  --ink-2:#1B1C14;
  --paper:#E7DCB8;
  --paper-2:#D9CB9C;
  --paper-shadow:#B8A876;
  --stamp-red:#A83A2C;
  --stamp-red-dark:#7E2A1F;
  --verified:#4C7A54;
  --verified-dark:#365B3C;
  --text-dark:#1C1A12;
  --text-mid:#4A4636;
  --text-light:#EFE6C6;
  --text-light-dim:#B7AD8B;
  --line:#3A3A2C;
  --focus:#C9A227;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text-light);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
  pointer-events:none;
  z-index:0;
}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

h1,h2,h3,.stamp,.tab,.brand,.rank-num,.section-eyebrow{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;}

/* ===== HEADER / TOP BAR ===== */
header.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--ink-2);
  border-bottom:1px solid var(--line);
  padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.brand{
  font-size:20px; letter-spacing:2px; font-weight:700;
  color:var(--text-light);
  display:flex; align-items:baseline; gap:8px;
}
.brand .dot{color:var(--stamp-red);}
.brand small{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:1px;
  color:var(--text-light-dim);
  text-transform:none;
}

nav.tabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;}
nav.tabs::-webkit-scrollbar{display:none;}
.tab{
  background:var(--ink);
  border:1px solid var(--line);
  border-bottom:none;
  color:var(--text-light-dim);
  font-size:12.5px; letter-spacing:1.5px; font-weight:500;
  padding:10px 16px 9px;
  cursor:pointer;
  white-space:nowrap;
  clip-path:polygon(8px 0, 100% 0, 100% 100%, 0 100%);
  transition:color .15s ease, background .15s ease;
}
.tab:hover{color:var(--text-light);}
.tab[aria-selected="true"]{background:var(--paper); color:var(--text-dark); border-color:var(--paper);}

/* ===== SYNC STATUS ===== */
.sync-status{
  display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.5px;
  color:var(--text-light-dim);
}
.sync-status .dot-state{width:7px; height:7px; border-radius:50%; background:var(--text-light-dim); display:inline-block;}
.sync-status[data-state="live"] .dot-state{background:var(--verified); animation:pulse 1.6s infinite;}
.sync-status[data-state="error"] .dot-state{background:var(--stamp-red);}
.sync-status[data-state="loading"] .dot-state{background:var(--focus); animation:pulse 0.8s infinite;}
@keyframes pulse{50%{opacity:.35;}}
.sync-refresh{
  background:none; border:1px solid var(--line); color:var(--text-light-dim);
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1px;
  padding:5px 9px; cursor:pointer;
}
.sync-refresh:hover{color:var(--text-light); border-color:var(--paper-shadow);}
.sync-refresh:disabled{opacity:.5; cursor:default;}

main{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 28px 80px;}
.view{display:none;}
.view.active{display:block; animation:fadeIn .35s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.section-eyebrow{font-size:12px; letter-spacing:3px; color:var(--stamp-red); display:flex; align-items:center; gap:10px; margin:0 0 6px;}
.section-eyebrow::before{content:"§"; font-family:'IBM Plex Mono',monospace;}
.section-title{font-size:34px; font-weight:600; letter-spacing:1px; color:var(--text-light); margin:0 0 8px;}
.section-sub{color:var(--text-light-dim); font-size:15px; max-width:640px; margin:0 0 36px; line-height:1.55;}

/* ===== HERO ===== */
.hero{padding:64px 0 40px; display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:center;}
.hero-stamp{
  display:inline-flex; align-items:center; gap:10px;
  border:2px solid var(--stamp-red); color:var(--stamp-red);
  padding:5px 12px; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:2px;
  transform:rotate(-2deg); margin-bottom:22px;
}
.hero h1{font-size:56px; line-height:1.02; letter-spacing:0.5px; color:var(--text-light); margin:0 0 20px; font-weight:700;}
.hero h1 span{color:var(--paper);}
.hero p{color:var(--text-light-dim); font-size:16px; line-height:1.6; max-width:520px; margin:0 0 28px;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:1px;
  padding:12px 20px; border:1px solid var(--paper); background:transparent; color:var(--paper);
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
.btn:hover{background:var(--paper); color:var(--text-dark);}
.btn.primary{background:var(--paper); color:var(--text-dark);}
.btn.primary:hover{background:var(--text-light);}

.hero-card{background:var(--paper); color:var(--text-dark); padding:22px; position:relative; box-shadow:8px 8px 0 var(--paper-shadow); transform:rotate(1.4deg);}
.hero-card::before{
  content:"ЛИЧНОЕ ДЕЛО № 0417-К"; display:block; font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:1.5px; color:var(--text-mid); margin-bottom:10px;
  border-bottom:1px dashed var(--paper-shadow); padding-bottom:8px;
}
.hero-card h3{font-size:18px; margin:0 0 10px;}
.hero-mini-list{list-style:none; margin:0; padding:0; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}
.hero-mini-list li{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dotted var(--paper-shadow);}
.hero-mini-list li:last-child{border-bottom:none;}
.hero-mini-list b{color:var(--stamp-red);}

/* ===== TOP GAMES ===== */
.rank-list{display:flex; flex-direction:column; gap:10px;}
.rank-row{display:grid; grid-template-columns:56px 1fr auto 130px; align-items:center; gap:18px; background:var(--ink-2); border:1px solid var(--line); padding:16px 18px; transition:border-color .15s ease;}
.rank-row:hover{border-color:var(--paper-shadow);}
.rank-num{font-size:26px; font-weight:700; color:var(--paper-shadow);}
.rank-row:nth-child(1) .rank-num, .rank-row:nth-child(2) .rank-num, .rank-row:nth-child(3) .rank-num{color:var(--stamp-red);}
.rank-info h4{margin:0 0 4px; font-size:16px; color:var(--text-light); font-weight:600;}
.rank-info span{font-size:13px; color:var(--text-light-dim);}
.rank-tags{display:flex; gap:6px; flex-wrap:wrap;}
.tag{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.5px; border:1px solid var(--line); color:var(--text-light-dim); padding:3px 8px;}
.score-wrap{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.score-val{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--verified);}
.score-bar{width:120px; height:5px; background:var(--line); position:relative;}
.score-bar i{position:absolute; inset:0; background:var(--verified); width:var(--w,50%);}

/* ===== CATALOG ===== */
.catalog-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:18px;}
.game-card{background:var(--ink-2); border:1px solid var(--line); padding:0; cursor:pointer; overflow:hidden;}
.game-card .cover{height:120px; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:2px; color:rgba(231,220,184,0.75); position:relative;}
.game-card .cover::after{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 10px);}
.game-card .body{padding:16px 16px 18px;}
.game-card h4{margin:0 0 6px; color:var(--text-light); font-size:16px;}
.game-card .meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-light-dim); margin-bottom:10px;}
.game-card p{font-size:13.5px; color:var(--text-light-dim); line-height:1.5; margin:0; max-height:0; overflow:hidden; transition:max-height .3s ease;}
.game-card.open p{max-height:200px; margin-top:10px;}
.game-card .toggle{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--stamp-red); margin-top:10px; display:inline-block;}

/* ===== SECRETS ===== */
.secrets-game{margin-bottom:34px;}
.secrets-game > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; background:var(--ink-2); border:1px solid var(--line); padding:14px 18px; font-family:'Oswald',sans-serif; letter-spacing:1px; font-size:16px; color:var(--text-light);}
.secrets-game > summary::-webkit-details-marker{display:none;}
.secrets-game > summary::after{content:"+"; font-size:20px; color:var(--stamp-red);}
.secrets-game[open] > summary::after{content:"–";}
.secret-list{border:1px solid var(--line); border-top:none; padding:14px;}
.secret-item{display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; padding:12px 0; border-bottom:1px dashed var(--line);}
.secret-item:last-child{border-bottom:none;}
.secret-label{font-size:13.5px; color:var(--text-light-dim);}
.secret-value{position:relative; font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.5px; color:var(--text-light); padding:6px 10px; background:var(--ink); border:1px solid var(--line); min-width:170px; text-align:center;}
.secret-value.hidden .code-text{visibility:hidden;}
.secret-value .bar{position:absolute; inset:3px; background:#0A0A07; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.secret-value.revealed .bar{display:none;}
.declassify-label{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1.5px; color:var(--stamp-red);}
.stamp-tag{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1.5px; color:var(--verified); border:1px solid var(--verified); padding:2px 6px; opacity:0; transform:scale(1.4) rotate(-8deg); transition:opacity .25s ease, transform .25s ease; position:absolute; right:-6px; top:-10px; background:var(--ink);}
.secret-value.revealed .stamp-tag{opacity:1; transform:scale(1) rotate(-8deg);}

/* ===== STREAMS ===== */
.stream-controls{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line);}
.search-input{flex:1 1 260px; background:var(--ink-2); border:1px solid var(--line); color:var(--text-light); font-family:'IBM Plex Mono',monospace; font-size:13px; padding:12px 14px;}
.search-input::placeholder{color:var(--text-light-dim);}
.chip-row{display:flex; gap:8px; flex-wrap:wrap;}
.chip{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.5px; border:1px solid var(--line); color:var(--text-light-dim); padding:8px 13px; cursor:pointer; background:transparent;}
.chip[aria-pressed="true"]{background:var(--stamp-red); border-color:var(--stamp-red); color:var(--text-light);}

.stream-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px;}
.stream-card{background:var(--ink-2); border:1px solid var(--line);}
.stream-thumb{height:110px; position:relative; display:flex; align-items:flex-end; justify-content:flex-start; font-family:'Oswald',sans-serif; letter-spacing:1px;}
.stream-thumb::after{content:"";position:absolute; inset:0; background-image:repeating-linear-gradient(-45deg, rgba(0,0,0,0.15) 0 2px, transparent 2px 10px);}
.live-dot{position:absolute; top:8px; left:8px; z-index:2; background:var(--stamp-red); color:var(--text-light); font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1px; padding:3px 7px; display:flex; align-items:center; gap:5px;}
.live-dot i{width:5px; height:5px; border-radius:50%; background:var(--text-light); display:inline-block; animation:blink 1.4s infinite;}
@keyframes blink{50%{opacity:.25;}}
.stream-body{padding:12px 14px 14px;}
.stream-body h4{margin:0 0 3px; font-size:14px; color:var(--text-light);}
.stream-body .streamer{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-light-dim); margin-bottom:8px;}
.stream-meta{display:flex; justify-content:space-between; font-size:11px; color:var(--text-light-dim);}
.stream-meta .platform{color:var(--verified);}
.no-results{color:var(--text-light-dim); font-family:'IBM Plex Mono',monospace; font-size:13px; padding:30px 0;}
.skeleton{background:linear-gradient(90deg, var(--ink-2) 25%, var(--line) 37%, var(--ink-2) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite;}
@keyframes shimmer{0%{background-position:100% 0;} 100%{background-position:0 0;}}

footer{border-top:1px solid var(--line); padding:24px 28px; text-align:center; color:var(--text-light-dim); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px;}

@media (max-width:840px){
  .hero{grid-template-columns:1fr; padding-top:40px;}
  .hero h1{font-size:38px;}
  .rank-row{grid-template-columns:40px 1fr; grid-template-areas:"num info" "num tags" "score score";}
  .rank-num{grid-area:num;}
  .rank-info{grid-area:info;}
  .rank-tags{grid-area:tags;}
  .score-wrap{grid-area:score; align-items:flex-start; margin-top:8px;}
  header.topbar{flex-direction:column; align-items:flex-start; gap:10px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}