/* ═══════════════════════════════════════════
   TapaBoom — Base Styles
   Reset, typography, utilities
   ═══════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,-apple-system,system-ui,sans-serif;background:#0a0a0a;color:#f0f0f0;min-height:100vh}
.hidden{display:none!important}

/* ─── Volume controls (shared) ─── */
.vol-wrap{display:flex;align-items:center;gap:4px}
.vol-icon{font-size:14px;color:#555;cursor:pointer}
.vol-slider{-webkit-appearance:none;width:60px;height:4px;border-radius:2px;background:#2a2a2a;outline:none}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#f0f0f0;cursor:pointer}

/* ─── Filter tags (shared) ─── */
.filter-tag{height:28px;padding:0 14px;border-radius:14px;border:1px solid #2a2a2a;background:transparent;color:#888;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all 0.15s;flex-shrink:0}
.filter-tag:hover{border-color:#444;color:#eee}
.filter-tag.active{background:#60a5fa;border-color:#60a5fa;color:#0a0a0a}

/* ─── Action buttons (shared) ─── */
.random-btn{width:36px;height:36px;border-radius:10px;border:1px solid #2a2a2a;background:transparent;color:#888;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;text-decoration:none}
.random-btn:hover{border-color:#60a5fa;color:#60a5fa;background:#0f1a2e}

/* ─── Squircle button core ─── */
.bi{position:absolute;inset:12.4%;clip-path:url(#sq);overflow:hidden;transition:transform 0.12s,filter 0.12s}
.bi img.pat{width:100%;height:100%;object-fit:cover;display:block}
.bi img.ov{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;mix-blend-mode:screen;pointer-events:none}
.sf{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}