@font-face {
    font-family: 'a_dripping_markerregular';
    src: url('fonts/adrip1-webfont.woff2') format('woff2'),
         url('fonts/adrip1-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
  --bg: #0b0c10;
  --text: #222;
  --muted: #666;
  --ring: #2dd4bf55;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--text); }

body {
  background: url("/assets/bg.png"); 
}

.container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 24px 16px; }

header h1 { margin: 8px 0 0; font-size: 84px; letter-spacing: 1px; text-align: center; font-family: "a_dripping_markerregular", sans-serif; }
header .muted { color: var(--muted); margin-top: 4px; text-align: center; }

.controls{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:10px; align-items:center; margin-top:8px;
}

.controls input,.controls select,.controls button{
  background:#fff; color:var(--text);
  border:1px solid #d7d7d7; padding:10px 12px; border-radius:12px; outline:none;
}
.controls input:focus,.controls select:focus,.controls button:focus{
  box-shadow:0 0 0 3px var(--ring); border-color:transparent;
}
.controls button{ cursor:pointer; }

.controls .search{
  max-width:280px;
  justify-self:start;
}

@media (max-width:520px){
  .controls .search{ max-width:100%; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px; margin: 26px 0;
}

.card {
  background: transparent;
  border: none;
  text-align: center;
}

.card .icon {
  font-size: 64px;
  line-height: 1.2;
  cursor: pointer;
  filter: grayscale(100%) contrast(1.05) brightness(0.9);
  transition: transform .15s ease, filter .2s ease;
  display: inline-block;
  position: relative;
}

.card .icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  filter: blur(18px);
  z-index: -1;
}

.card:hover .icon {
  filter: none;
  transform: translateY(-4px);
}

.card .name {
  font-size: 32px;
  margin: 0;
  /* letter-spacing: .2px; */
  font-family: "a_dripping_markerregular", sans-serif;
}

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 40px; }
.pager button { background: #fff; color: var(--text); border: 1px solid #d7d7d7; padding: 8px 12px; border-radius: 12px; cursor: pointer; }

.muted { color: var(--muted); }

.meta, .desc, .cat, .fav { display: none !important; }