/* ============================================================
   GameRent — Category page styles
   ============================================================ */
.cat-head { border-bottom: 1px solid var(--line); background: var(--bg-1); padding-block: 22px 30px; }
.cat-head-grid { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: end; }
.cat-h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; }
.cat-intro { color: var(--tx-dim); font-size: 15px; line-height: 1.65; margin-top: 14px; max-width: 720px; }
.cat-stats { display: flex; flex-direction: column; gap: 12px; }
.cat-stat { display: flex; flex-direction: column; padding: 12px 16px; border-radius: var(--r-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.cat-stat-n { font-size: 22px; font-weight: 700; line-height: 1; }
.cat-stat-l { font-size: 12.5px; color: var(--tx-mute); margin-top: 4px; }
@media (max-width: 900px){
  .cat-head-grid { grid-template-columns: 1fr; gap: 22px; }
  .cat-stats { flex-direction: row; }
  .cat-stat { flex: 1; }
}
@media (max-width: 520px){ .cat-stats { flex-wrap: wrap; } .cat-stat { min-width: 120px; } }

.cat-body { padding-block: 24px 0; }

/* toolbar */
.cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); position: sticky; top: var(--nav-h);
  background: var(--bg); z-index: 40; padding-top: 14px; }
.cat-count { font-size: 14px; color: var(--tx-dim); }
.cat-count b { color: var(--tx); }
.cat-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.cat-sort { position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border-radius: var(--r-sm); padding: 0 36px 0 12px; height: 40px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cat-sort select { appearance: none; background: transparent; border: none; font-size: 14px; font-weight: 600; cursor: pointer; padding-right: 4px; outline: none; }
.cat-sort select option { background: var(--bg-2); color: var(--tx); }
.cat-sort-chev { position: absolute; right: 12px; color: var(--tx-mute); pointer-events: none; }

/* layout */
.cat-layout { display: grid; grid-template-columns: 248px 1fr; gap: 30px; align-items: start; }
@media (max-width: 980px){ .cat-layout { grid-template-columns: 1fr; } }
.cat-side-desk { display: block; }
.cat-filter-btn { display: none !important; }
@media (max-width: 980px){
  .cat-side-desk { display: none; }
  .cat-filter-btn { display: inline-flex !important; }
}

/* sidebar */
.fsidebar { position: sticky; top: calc(var(--nav-h) + 72px); display: flex; flex-direction: column; gap: 4px; }
.fclear { font-size: 12.5px; color: var(--ac); font-weight: 600; }
.fclear:hover { text-decoration: underline; }
.fsec { border-bottom: 1px solid var(--line); padding: 6px 0; }
.fsec-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 2px;
  font-family: var(--f-disp); font-weight: 600; font-size: 14px; color: var(--tx); }
.fsec-body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }

.fcheck { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--r-xs); text-align: left; transition: background .12s; }
.fcheck:hover { background: var(--bg-2); }
.fcheck-box { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--line-3); color: var(--ac-ink); transition: all .14s; }
.fcheck.on .fcheck-box { background: var(--ac); box-shadow: none; }
.fcheck-label { font-size: 13.5px; color: var(--tx-dim); flex: 1; }
.fcheck.on .fcheck-label { color: var(--tx); }
.fcheck-count { font-size: 12px; color: var(--tx-faint); }

.fradio { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--r-xs); text-align: left; font-size: 13.5px; color: var(--tx-dim); transition: background .12s; }
.fradio:hover { background: var(--bg-2); }
.fradio-dot { width: 16px; height: 16px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line-3); flex-shrink: 0; position: relative; transition: all .14s; }
.fradio.on { color: var(--tx); }
.fradio.on .fradio-dot { box-shadow: inset 0 0 0 1.5px var(--ac); }
.fradio.on .fradio-dot::after { content:''; position: absolute; inset: 4px; border-radius: 99px; background: var(--ac); }

.durpills { display: flex; gap: 6px; }
.durpill { flex: 1; height: 36px; border-radius: var(--r-sm); font-family: var(--f-disp); font-weight: 600; font-size: 13px;
  background: var(--bg-2); color: var(--tx-dim); box-shadow: inset 0 0 0 1px var(--line-2); transition: all .14s; }
.durpill:hover { background: var(--bg-3); }
.durpill.on { background: var(--ac); color: var(--ac-ink); box-shadow: none; }

/* load more */
.cat-more { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0 10px; }
.cat-more-bar { width: 180px; height: 4px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.cat-more-bar > div { height: 100%; background: var(--ac); border-radius: 99px; transition: width .3s; }

/* bottom seo */
.cat-seo { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); padding-bottom: 30px; }
.cat-seo-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; }
@media (max-width: 860px){ .cat-seo-grid { grid-template-columns: 1fr; gap: 30px; } }
.cat-related { display: flex; flex-direction: column; gap: 8px; }
.cat-rel { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--r-md); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; color: var(--tx-dim); transition: all .15s; text-align: left; }
.cat-rel:hover { color: var(--tx); box-shadow: inset 0 0 0 1px var(--ac-line); }

/* mobile filter sheet */
.fsheet-wrap { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: flex; align-items: flex-end; animation: fadeIn .2s; }
.fsheet { background: var(--bg-1); width: 100%; max-height: 88vh; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 18px; display: flex; flex-direction: column;
  box-shadow: 0 -20px 60px rgba(0,0,0,.6); animation: sheetUp .3s cubic-bezier(.22,.61,.36,1); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }