/* One sound's own page (/s/CODE): title, who uploaded it, a big play button, tags, actions, then similar sounds as playable cards. */
:root{--neon:56,189,248;--text:#f4f4f5;--muted:#71717a;--line:rgba(255,255,255,.07)}
*{box-sizing:border-box}
html{background:#04040a;color-scheme:dark}
body{margin:0;min-height:100vh;color:var(--text);font:15px/1.5 Inter,'Plus Jakarta Sans',system-ui,sans-serif;background:linear-gradient(#04040a4d,#04040a8c),url('/assets/space-bg.webp?v=20260923') center/cover fixed no-repeat,#04040a}
a{color:inherit;text-decoration:none}
button{font:inherit}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sp{width:min(1100px,calc(100% - 32px));margin:0 auto;padding:28px 0 90px}
.sp-back{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;border-radius:999px;background:rgba(255,255,255,.04);color:#a1a1aa;font-size:13px;font-weight:600;transition:background .2s,color .2s}
.sp-back:hover{background:rgba(255,255,255,.08);color:#fff}
.sp-back .ic{width:16px;height:16px}

/* ---------- The sound: play button and title on the left, stats, tags and buttons on the right ---------- */
.sp-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:40px;max-width:1000px;margin:18px auto 0}
.sp-hero{position:relative;display:grid;justify-items:center;text-align:center}
.sp-hero::before{content:"";position:absolute;top:-10px;left:50%;z-index:-1;width:300px;height:300px;margin-left:-150px;border-radius:50%;background:rgba(var(--neon),.16);filter:blur(70px);pointer-events:none}
.sp-hero h1{margin:24px 0 0;color:#fff;font-size:clamp(26px,3.4vw,36px);font-weight:800;line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere}
.sp-what{margin:6px 0 0;color:#a1a1aa;font-size:13.5px;line-height:1.5}
.sp-by{margin:8px 0 0;color:var(--muted);font-size:13px}
.sp-by b{color:#a1a1aa;font-weight:600}
.sp-panel{display:grid;gap:20px;padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 40%,rgba(255,255,255,0)),rgba(8,8,11,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.4)}
.sp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sp-stats div{display:grid;justify-items:center;gap:2px;padding:14px 6px 12px;border-radius:16px;background:rgba(255,255,255,.035);text-align:center}
.sp-stats .ic{width:16px;height:16px;margin-bottom:4px;color:rgb(var(--neon))}
.sp-stats b{color:#fff;font-size:20px;font-weight:800;line-height:1.1}
.sp-stats span{color:var(--muted);font-size:12px}
.sp-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:-4px 0 0}
.sp-tags a{color:#71717a;font-size:13px;font-weight:600;transition:color .2s}
.sp-tags a:hover{color:rgb(var(--neon))}
.sp-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.sp-btn{grid-column:span 2;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:46px;padding:0 12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.03);color:#e4e4e7;font-size:13.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .15s}
.sp-btn.wide{grid-column:span 3;height:50px}
.sp-btn span{overflow:hidden;text-overflow:ellipsis}
.sp-btn .ic{color:rgb(var(--neon));transition:color .2s,transform .3s}
.sp-btn:hover{border-color:rgba(var(--neon),.55);background:rgba(var(--neon),.08);color:#fff}
.sp-btn:active{transform:translateY(1px)}
.sp-btn.done .ic{color:#4ade80}
.sp-btn[data-act="fav"][aria-pressed="true"]{border-color:rgba(244,63,94,.5);background:rgba(244,63,94,.1);color:#fecdd3}
.sp-btn[data-act="fav"][aria-pressed="true"] .ic{color:#fb7185;fill:currentColor}
.sp-btn[data-act="fav"]{}
.sp-btn[data-act="board"].on{border-color:rgba(var(--neon),.5);background:rgba(var(--neon),.1)}
.pop .ic{animation:sp-pop .45s cubic-bezier(.2,.8,.2,1.4)}
@keyframes sp-pop{40%{transform:scale(1.4)}}

/* small buttons under each similar card (as on the soundboard page) */
.sb-actions{display:flex;gap:6px}
.sb-icon{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.05);color:#a1a1aa;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.sb-icon .ic{width:16px;height:16px}
.sb-icon:hover{background:rgba(255,255,255,.12);color:#fff}
.sb-icon:active{transform:scale(.88)}
.sb-icon.fav[aria-pressed="true"]{background:rgba(244,63,94,.14);color:#fb7185}
.sb-icon.fav[aria-pressed="true"] .ic{fill:currentColor}
.sb-icon.board.on{background:rgba(var(--neon),.14);color:rgb(var(--neon))}
.sb-icon.done{background:rgba(74,222,128,.14);color:#4ade80}

/* share row: solid brand buttons along the bottom of the panel */
.sp-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06)}
.sn{--b:#333;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--b);box-shadow:0 6px 16px -6px var(--b),inset 0 1px 0 rgba(255,255,255,.18);cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s}
.sn svg{width:20px;height:20px;fill:#fff}
.sn:hover{transform:translateY(-3px);filter:brightness(1.1);box-shadow:0 10px 22px -6px var(--b),inset 0 1px 0 rgba(255,255,255,.22)}
.sn:active{transform:scale(.92)}
.sn-whatsapp{--b:#25d366}.sn-messenger{--b:#0a7cff}.sn-facebook{--b:#1877f2}.sn-discord{--b:#5865f2}.sn-reddit{--b:#ff4500}.sn-telegram{--b:#229ed9}
.sn-x{--b:#f4f4f5}.sn-x svg{fill:#0a0a0c}.sn-x{box-shadow:0 6px 16px -8px rgba(255,255,255,.4)}

/* "Add to soundboard" pop-up (a sheet on phones) */
.sp-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(3,3,6,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:sp-fade .2s ease}
.sp-modal[hidden]{display:none}
@keyframes sp-fade{from{opacity:0}}
.sp-dialog{display:grid;gap:16px;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:26px;background:#0a0a0c;box-shadow:0 40px 100px rgba(0,0,0,.75)}
.sp-dh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sp-dh h2{margin:0;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.01em}
.sp-dh p{margin:3px 0 0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.sp-x{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.05);color:#a1a1aa;cursor:pointer}
.sp-x:hover{background:rgba(255,255,255,.1);color:#fff}
#pop{display:grid;gap:14px}
#pop .list{display:grid;gap:6px;max-height:300px;overflow-y:auto}
#pop .row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.02);color:#e4e4e7;font-size:14px;font-weight:700;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
#pop .row:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
#pop .row[aria-checked="true"]{border-color:rgba(var(--neon),.6);background:rgba(var(--neon),.08)}
#pop .th{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;object-fit:cover;background:linear-gradient(135deg,hsl(var(--h,200) 75% 42%),hsl(calc(var(--h,200) + 55) 70% 22%));color:#fff;font-size:15px;font-weight:800}
#pop .nm{display:grid;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#pop .nm small{color:var(--muted);font-size:12px;font-weight:500}
#pop .tick{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1.5px solid rgba(255,255,255,.2);border-radius:50%;color:transparent;transition:background .2s,border-color .2s,color .2s}
#pop .tick .ic{width:14px;height:14px;stroke-width:3}
#pop .row[aria-checked="true"] .tick{border-color:rgb(var(--neon));background:rgb(var(--neon));color:#0a0a0c}
#pop .msg{margin:0;color:#a1a1aa;font-size:14px;line-height:1.5}
#pop form{display:flex;gap:8px}
#pop input{flex:1;min-width:0;height:46px;padding:0 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04);color:#fff;font:600 14px Inter,sans-serif;outline:none}
#pop input:focus{border-color:rgb(var(--neon));box-shadow:0 0 0 4px rgba(var(--neon),.12)}
#pop form button{height:46px;padding:0 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:none;color:#fff;font-weight:700;cursor:pointer}
#pop form button:hover{background:rgba(255,255,255,.06)}
.sp-primary{display:flex;align-items:center;justify-content:center;height:48px;border:0;border-radius:999px;background:#e7e7ea;color:#0b0b10;font-size:14px;font-weight:800;cursor:pointer}
.sp-primary:hover{background:#fff}
.sp-toast{position:fixed;left:50%;bottom:24px;z-index:70;max-width:calc(100% - 32px);padding:11px 18px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:#111114;color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 18px 40px rgba(0,0,0,.6);opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity .25s,transform .25s}
.sp-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Divider + similar sounds ---------- */
.sp-more{margin:64px 0 0}
.sp-rule{display:flex;align-items:center;gap:16px;margin:0 0 26px;color:#a1a1aa;font-size:13px;font-weight:700;letter-spacing:.02em}
.sp-rule::before,.sp-rule::after{content:"";flex:1;height:1px;background:var(--line)}
.sb-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}

/* ---------- Cards and the play button (same as the soundboard page) ---------- */
.sb-card{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;width:196px;padding:20px 12px 14px;border:2px solid rgba(255,255,255,.05);border-radius:20px;background:#0a0a0c;text-align:center;transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s}
.sb-card:hover,.sb-card:has(:focus-visible),.sb-card.is-playing{border-color:rgb(var(--neon));box-shadow:0 0 35px rgba(var(--neon),.45),inset 0 0 15px rgba(var(--neon),.18)}
.sb-card:hover,.sb-card:has(:focus-visible){transform:scale(1.045);z-index:2}
.sb-card::after{content:"";position:absolute;inset:-2px;z-index:5;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from 0deg,rgb(var(--neon)) calc(var(--p,0)*1%),transparent calc(var(--p,0)*1%));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 6px rgba(var(--neon),.95));opacity:0;transition:opacity .25s}
.sb-card.is-playing::after{opacity:1}
.sb-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;margin:0;padding:0 8px;color:#f4f4f5;font-size:13.5px;font-weight:700;line-height:1.25;word-break:break-word}
.sb-name:hover{color:rgb(var(--neon))}

.sb-play{--s:108px;position:relative;width:var(--s);height:var(--s);flex:none;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sb-play:focus-visible{outline:2px solid rgb(var(--neon));outline-offset:3px}
.sb-play .inner{position:absolute;left:0;top:0;width:160px;height:160px;transform:scale(var(--k,.675));transform-origin:0 0}
.sb-play .bevel{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(51,65,85,.6);border-radius:50%;background:linear-gradient(145deg,#1f2937,#0f172a);box-shadow:0 10px 25px -5px rgba(0,0,0,.9),inset 0 2px 0 1px rgba(255,255,255,.15),inset 0 -2px 4px 1px rgba(0,0,0,.8),inset 0 4px 12px rgba(0,0,0,.8);transition:transform .3s ease-out,border-color .3s ease-out,box-shadow .3s ease-out}
.sb-play .sheen{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.08) 42%,rgba(255,255,255,0) 50%);pointer-events:none}
.sb-play .icon{position:relative;z-index:1;display:grid;place-items:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.sb-play .icon svg{width:44px;height:44px;fill:rgb(var(--neon));stroke:rgb(var(--neon));stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 2px 8px rgba(var(--neon),.6));transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.sb-play .i-play{transform:translateX(4px)}
.sb-play .i-stop{position:absolute;opacity:0;transform:scale(.5);width:38px!important;height:38px!important}
.sb-play:hover .bevel{border-color:rgba(var(--neon),.5)}
.sb-play:hover .icon{transform:scale(1.1)}
.sb-play:active .bevel{transform:scale(.93) translateY(3px);transition:transform .1s}
.is-playing .sb-play .bevel{border-color:rgba(var(--neon),.8);box-shadow:0 0 35px rgba(var(--neon),.5),inset 0 2px 0 1px rgba(255,255,255,.25),inset 0 4px 12px rgba(0,0,0,.8)}
.is-playing .sb-play .i-play{opacity:0;transform:scale(.5)}
.is-playing .sb-play .i-stop{opacity:1;transform:scale(1)}
.sb-ring{position:absolute;inset:0;z-index:3;width:160px;height:160px;pointer-events:none}
.sb-ring circle{fill:none}
.sb-ring .track{stroke:rgba(30,41,59,.8);stroke-width:5}
.sb-ring .bar{stroke:rgb(var(--neon));stroke-width:6;stroke-linecap:round;stroke-dasharray:471.24;stroke-dashoffset:calc(471.24 - 471.24 * var(--p,0) / 100);transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 5px rgba(var(--neon),.9));opacity:0;transition:opacity .2s}
.is-playing .sb-ring .bar{opacity:1}
/* the big one at the top of the page */
.sp-hero .sb-play{--s:192px}
.sp-hero .sb-play .inner{--k:1.2}

/* ---------- A soundboard's page: cover in place of the play button ---------- */
.bp-hero{gap:0}
.bp-cover{position:relative;display:grid;place-items:center;width:min(260px,62vw);aspect-ratio:1;overflow:hidden;border-radius:22px;background:linear-gradient(140deg,hsl(var(--h,200) 70% 46%),hsl(calc(var(--h,200) + 50) 72% 20%));color:#fff;font-size:96px;font-weight:800;letter-spacing:-.04em;box-shadow:0 30px 70px -20px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06);animation:bp-in .6s cubic-bezier(.16,1,.3,1)}
.bp-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.bp-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes bp-in{from{opacity:0;transform:translateY(12px) scale(.97)}}
.bp-kicker{margin:22px 0 0;color:rgb(var(--neon));font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.bp-hero h1{margin-top:6px}
.bp-note{margin:-8px 0 0;color:var(--muted);font-size:12.5px;text-align:center}
.sp-btn.primary{border:0;background:#e7e7ea;color:#0b0b10}
.sp-btn.primary .ic{color:#0b0b10;fill:currentColor}
.sp-btn.primary:hover{background:#fff;color:#0b0b10}
.sp-btn.primary.on{background:rgb(var(--neon))}
.sp-btn[hidden]{display:none}
.sp-btn.half{grid-column:span 3}
.sp-btn:disabled{opacity:.5;cursor:default}
.sp-btn#save[aria-pressed="true"]{border-color:rgba(var(--neon),.6);background:rgba(var(--neon),.1);color:#fff}
.sp-btn#save[aria-pressed="true"] .ic{fill:currentColor}
.sp-empty{color:var(--muted);text-align:center}
.bp-top ~ .sp-more .sb-card{animation:bp-in .5s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0)*30ms)}
.sp-gone{max-width:460px;margin:80px auto 0;text-align:center}
.sp-gone h1{margin:0 0 8px;font-size:28px;letter-spacing:-.02em}
.sp-gone p{margin:0 0 22px;color:var(--muted)}
.site-footer{margin-top:auto}

@media(max-width:860px){
  .sp-top{grid-template-columns:1fr;gap:26px;max-width:560px}
}
@media(max-width:640px){
  .sp-modal{align-items:end;padding:0}
  .sp-dialog{width:100%;max-height:90dvh;padding:20px 18px calc(18px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;border-bottom:0;animation:sp-sheet .32s cubic-bezier(.2,.8,.2,1)}
  .sp-social{gap:8px;padding-top:14px}
  .sn{width:40px;height:40px}
  .sn svg{width:18px;height:18px}
  .sp{width:calc(100% - 24px);padding-top:18px}
  .sp-hero .sb-play{--s:144px}
  .bp-cover{font-size:70px;border-radius:18px}
  .bp-top .sp-btn.wide{grid-column:span 3;font-size:12px;gap:6px}
  .bp-top #save span{max-width:100%}
  .bp-kicker{margin-top:16px}
  .sp-hero .sb-play .inner{--k:.9}
  .sp-hero h1{margin-top:18px}
  .sp-panel{gap:16px;padding:14px;border-radius:20px}
  .sp-stats div{padding:11px 4px 10px}
  .sp-stats b{font-size:17px}
  .sp-tags{justify-content:center}
  .sp-btn{flex-direction:column;gap:4px;height:62px;padding:0 4px;font-size:12px}
  .sp-btn.wide{flex-direction:row;gap:7px;height:48px;font-size:12.5px}
  .sp-more{margin-top:44px}
  .sb-grid{gap:8px}
  .sb-card{width:calc((100% - 16px)/3);gap:8px;padding:14px 4px 10px;border-radius:18px}
  .sb-card:hover,.sb-card:has(:focus-visible){transform:none}
  .sb-card .sb-play{--s:80px}
  .sb-card .sb-play .inner{--k:.5}
  .sb-name{padding:0 4px;font-size:12px}
  .sb-actions{gap:5px}
  .sb-icon{width:28px;height:28px}
  .sb-icon .ic{width:14px;height:14px}
  .sp-toast{bottom:16px}
}
@media(prefers-reduced-motion:reduce){.sb-card,.sb-play .icon,.sb-play .bevel{transition:none}}
@keyframes sp-sheet{from{transform:translateY(100%)}}

/* Copyright line at the bottom of sound and soundboard pages */
.sb-legal { max-width: 640px; margin: 36px auto 8px; padding: 0 16px; color: #8b8b96; font-size: 12.5px; line-height: 1.6; text-align: center; }
.sb-legal b { color: #c9c9d1; font-weight: 600; }
.sb-legal a { color: #c4b5fd; text-decoration: underline; text-underline-offset: 2px; }