/* =========================================================================
   flagbattle.online — BROWSE CSS
   ========================================================================= */

/* Layout */
.browse-layout{max-width:1600px;margin:0 auto;padding:20px 16px;display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}

/* =====================================================================
   FILTR PANEL
   ===================================================================== */
.filter-panel{background:var(--panel);border:1px solid rgba(0,0,0,0.3);position:sticky;top:120px}
.fp-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.06);font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-dim)}
.fp-clear{background:none;border:none;color:var(--accent);font-size:0.78rem;cursor:pointer;font-family:inherit}
.fp-clear:hover{text-decoration:underline}
.fp-section{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.05)}
.fp-title{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}
.fp-check{display:flex;align-items:center;gap:8px;font-size:0.84rem;color:var(--ink-dim);cursor:pointer;padding:4px 0;transition:color 0.12s}
.fp-check:hover{color:var(--ink)}
.fp-check input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.fp-check input:checked + *{color:var(--ink)}

/* Tag filter chips */
.fp-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;margin:3px 2px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:2px;font-size:0.76rem;color:var(--ink-dim);cursor:pointer;transition:all 0.12s}
.fp-tag:hover{background:rgba(255,255,255,0.12);color:var(--ink)}
.fp-tag.active{background:rgba(26,159,255,0.2);border-color:var(--accent);color:var(--accent)}

/* =====================================================================
   TOOLBAR
   ===================================================================== */
.results-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap}
.results-info{display:flex;align-items:center;gap:12px}
.breadcrumb{font-size:0.82rem;color:var(--ink-mute)}
.breadcrumb a{color:var(--ink-dim)}.breadcrumb a:hover{color:var(--ink)}
.result-count{font-size:0.82rem;color:var(--ink-mute)}
.toolbar-right{display:flex;align-items:center;gap:10px}
.sort-wrap{display:flex;align-items:center;gap:8px}
.sort-label{font-size:0.8rem;color:var(--ink-dim);white-space:nowrap}
.sort-select{background:var(--dropdown);border:1px solid var(--line);color:var(--ink);padding:6px 28px 6px 10px;font-size:0.82rem;font-family:inherit;cursor:pointer;border-radius:2px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%238ba1b5'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.sort-select:focus{outline:none;border-color:var(--accent)}

/* View toggle */
.view-toggle{display:flex;gap:2px}
.vt-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink-mute);padding:6px 8px;cursor:pointer;transition:all 0.12s;display:flex;align-items:center}
.vt-btn:hover{color:var(--ink)}
.vt-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.filter-toggle-btn{display:none;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);color:var(--ink-dim);padding:6px 12px;cursor:pointer;font-size:0.82rem;font-family:inherit}

/* Faol filterlar */
.active-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;min-height:0}
.af-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(26,159,255,0.15);border:1px solid rgba(26,159,255,0.35);border-radius:2px;font-size:0.78rem;color:var(--accent)}
.af-chip button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:0.9rem;line-height:1;padding:0;margin-left:2px}
.af-chip button:hover{color:#fff}

/* =====================================================================
   GRID VIEW
   ===================================================================== */
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.results-grid.view-list{grid-template-columns:1fr;gap:2px}

/* Grid karta */
.tile{background:var(--panel);border:1px solid transparent;cursor:pointer;display:block;transition:border-color 0.12s}
.tile:hover{border-color:var(--accent-lt)}
.tile.locked{cursor:default}.tile.locked:hover{border-color:transparent}
.tile .cap{aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile.live .cap{background:linear-gradient(150deg,#1b3a52,#2a5070)}
.tile.locked .cap{background:linear-gradient(150deg,#141e2e,#1a2638);filter:saturate(0.4)}
.tile .cap .mini{display:flex;gap:6px}
.tile .cap .mm{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,0.5);overflow:hidden;position:relative}
.tile .cap .mm img{width:150%;height:150%;position:absolute;top:-25%;left:-25%;object-fit:cover}
.tile .plabel{position:absolute;top:8px;left:8px;font-size:0.64rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border-radius:2px;display:inline-flex;align-items:center;gap:4px}
.tile.live .plabel{background:var(--green);color:#1b2838}
.tile.locked .plabel{background:rgba(0,0,0,0.65);color:var(--ink-dim)}
.tile .badge-top{position:absolute;top:8px;right:8px;font-size:0.62rem;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:2px;background:var(--gold);color:#1b2838}
.tile .meta{padding:12px;border-top:1px solid rgba(255,255,255,0.05)}
.tile .meta h3{font-size:0.92rem;font-weight:700;color:#fff;margin-bottom:3px}
.tile .meta p{font-size:0.76rem;color:var(--ink-dim);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tile .meta .foot{margin-top:8px;display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid rgba(255,255,255,0.06);gap:6px}
.tile .meta .price-sep{color:var(--ink-mute);font-size:0.7rem}
.tile .meta .tags-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tile .meta .tags{font-size:0.68rem;color:var(--ink-mute)}
.tile .meta .price{font-size:0.78rem;font-weight:700;color:var(--green)}
.tile.locked .meta .price{color:var(--ink-mute)}
.tile.locked .meta::after{content:'';display:block;height:2px;background:linear-gradient(90deg,var(--accent-lt) 30%,rgba(255,255,255,0.08) 30%);border-radius:1px;margin-top:10px}

/* Teg */
.game-tag{display:inline-flex;padding:2px 8px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:2px;font-size:0.68rem;color:var(--ink-mute);transition:all 0.12s;text-decoration:none}
.game-tag:hover{background:rgba(26,159,255,0.15);border-color:rgba(26,159,255,0.3);color:var(--accent)}

/* =====================================================================
   LIST VIEW
   ===================================================================== */
.results-grid.view-list .tile{display:grid;grid-template-columns:185px 1fr;min-height:70px}
.results-grid.view-list .tile .cap{aspect-ratio:unset;height:70px;width:185px}
.results-grid.view-list .tile .cap .mini{transform:scale(0.7)}
.results-grid.view-list .tile .meta{padding:8px 14px;display:flex;align-items:center;gap:16px;border-top:none;border-left:1px solid rgba(0,0,0,0.3)}
.results-grid.view-list .tile .meta h3{font-size:1rem;margin-bottom:0;min-width:160px}
.results-grid.view-list .tile .meta p{flex:1;margin:0}
.results-grid.view-list .tile .meta .foot{display:flex;align-items:center;gap:4px;margin:0;padding:0;border:none;min-width:120px;flex-shrink:0}
.results-grid.view-list .tile .meta .foot .tags{white-space:nowrap}
.results-grid.view-list .tile .meta .foot .price{white-space:nowrap}
.results-grid.view-list .tile .meta .tags-row{display:none}

/* =====================================================================
   BO'SH HOLAT
   ===================================================================== */
.empty-state{text-align:center;padding:60px 20px;color:var(--ink-mute)}
.empty-state svg{display:block;margin:0 auto 16px}
.empty-state p{font-size:1rem;margin-bottom:14px}
.empty-state button{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:8px 20px;border-radius:2px;cursor:pointer;font-family:inherit}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1000px){
  .browse-layout{grid-template-columns:1fr}
  .filter-panel{display:none;position:fixed;left:0;top:0;bottom:0;width:280px;z-index:200;overflow-y:auto}
  .filter-panel.open{display:block}
  .filter-toggle-btn{display:flex}
  .scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:190}
  .scrim.show{display:block}
}
@media(max-width:760px){
  .results-grid{grid-template-columns:repeat(2,1fr)}
  .sort-label{display:none}
  .top-nav{display:none}
}
@media(max-width:480px){
  .results-grid{grid-template-columns:1fr}
}