.soundboard-page{min-height:100vh}
.soundboard-header{position:relative;max-width:1500px;height:156px;margin:auto;padding:0 28px;display:flex;align-items:center;border-bottom:1px solid #5b100c}
.soundboard-header .desktop-brand-logo{width:260px;height:142px;justify-content:flex-start}
.soundboard-header .brand-logo-image{max-width:235px;max-height:135px}
.soundboard-header .push-signup{display:none}
.soundboard-nav{display:block!important;width:100%}
.soundboard-nav .nav-inner{justify-content:center;max-width:980px;padding:0 16px}
.soundboard-nav .nav-item{min-width:150px}
.soundboard-main{max-width:1500px;margin:auto;padding:16px 28px 50px}
.soundboard-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:8px}
.soundboard-heading p{color:#bbaaa4;margin:0}
#stopSound{padding:12px 18px;background:#7d110b;color:white;border:1px solid #e34334;border-radius:8px;font-weight:800;cursor:pointer;white-space:nowrap}
#stopSound:disabled{opacity:.45;cursor:default}
#boardStatus{min-height:23px;color:#f2c14d;font-size:13px}
.soundboard-grid{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:10px 8px;align-items:start}
.sound-cell{min-width:0;text-align:center}
.sound-pad{width:100%;min-width:0;aspect-ratio:1;display:grid;place-items:center;padding:5px;border-radius:10px;border:1px solid #7c2119;background:radial-gradient(circle at 34% 24%,#923022,#37100a 64%,#110302);box-shadow:inset 0 2px #b64435,0 5px 10px #0008;color:#fff;cursor:pointer;transition:transform .12s,border-color .12s,background .12s,box-shadow .12s,filter .12s}
.sound-pad:hover:not(:disabled),.sound-pad:focus-visible{transform:translateY(-2px) scale(1.04);border-color:#f2c14d;background:radial-gradient(circle at 34% 24%,#c54a35,#5d160d 64%,#180302);box-shadow:inset 0 2px #f2c14d,0 0 16px #f2c14d45;outline:2px solid #f2c14d;outline-offset:2px}
.sound-pad:active:not(:disabled){transform:translateY(1px) scale(.96);background:radial-gradient(circle at 50% 60%,#4c110a,#170302 72%);box-shadow:inset 0 4px 12px #000,0 2px 6px #0008}
.sound-pad.playing{border-color:#ffb94f;background:radial-gradient(circle at 52% 58%,#ef7b24,#8d1c0e 67%,#240401);box-shadow:inset 0 3px #ffc465,0 0 20px #f14b2870;transform:scale(.98)}
.sound-pad:disabled{opacity:.34;cursor:default;background:#1c0b09;border-color:#4b211c;filter:grayscale(.5)}
.pad-title{display:block;margin-top:6px;font-weight:900;font-size:clamp(8px,.74vw,11px);line-height:1.12;color:#f4e6df;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;text-shadow:0 1px 3px #000}
.pad-icon{font-size:clamp(18px,2.2vw,31px);line-height:1;filter:drop-shadow(0 2px 3px #000)}
@media(max-width:1100px){.soundboard-grid{grid-template-columns:repeat(10,minmax(0,1fr))}}
@media(max-width:760px){.soundboard-header .push-signup{display:block}.soundboard-nav .nav-inner{max-width:none;padding:0 8px;gap:8px;justify-content:center}.soundboard-nav .nav-item{display:flex!important;flex:1 1 0;min-width:0;max-width:none;height:52px;padding:0 7px!important;font-size:13px!important;font-weight:900;line-height:1;white-space:nowrap}.soundboard-nav .nav-soundboard-link{font-size:13px!important}.soundboard-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 5px}.sound-pad{border-radius:7px}.pad-title{font-size:9px}}
@media(max-width:600px){.soundboard-header{height:120px;padding:0 12px}.soundboard-main{padding:12px 12px 38px}.soundboard-heading{align-items:center}.soundboard-heading p{font-size:12px}#stopSound{font-size:11px;padding:8px}.soundboard-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px 5px}.sound-pad{border-radius:6px;padding:4px}.pad-title{font-size:8px;-webkit-line-clamp:2}.pad-icon{font-size:17px}}

.soundboard-pages{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0;color:#f2c14d;font-weight:800}
.soundboard-pages[hidden]{display:none}
.soundboard-pages button{padding:8px 12px;border:1px solid #86251b;background:#2b0806;color:#fff;border-radius:7px;cursor:pointer}
.soundboard-pages button:disabled{opacity:.4;cursor:default}
