/* Mallet & announcer store. */

/* ---------- store ---------- */
.store-wrap { display: flex; gap: 14px; width: min(980px, 100%); align-items: stretch; flex-wrap: wrap; justify-content: center; }
.store-preview { flex: 1 1 320px; max-width: 420px; display: flex; flex-direction: column; align-items: center; }
.store-list { flex: 1 1 360px; max-width: 540px; }
#voice-card { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; max-width: 360px; aspect-ratio: 6 / 5; border-radius: 6px; background: radial-gradient(ellipse at center, #2a0c14 0%, #07030a 75%); }
#vc-icon { font-size: clamp(64px, 12vw, 110px); filter: drop-shadow(0 0 20px rgba(255,60,60,.5)); animation: titleBob 2.4s ease-in-out infinite; }
.store-voices #store-canvas { display: none; } .store-voices #voice-card { display: flex; }
.skin .vi { font-size: 34px; line-height: 1.6; }
#store-canvas { width: 100%; max-width: 360px; aspect-ratio: 6 / 5; height: auto; border-radius: 6px; background: radial-gradient(ellipse at center, #2a0c14 0%, #07030a 75%); }
#st-name { font-family: 'Creepster', cursive; font-size: clamp(26px, calc(var(--u) * 4.4), 44px); color: var(--blood); text-shadow: 3px 3px 0 #000; margin-top: 8px; }
#st-desc { font-size: clamp(8px, calc(var(--u) * 1.1), 11px); color: #cab; line-height: 1.8; margin: 6px 0 14px; min-height: 2.2em; }
#st-wallet { font-size: clamp(12px, calc(var(--u) * 1.8), 18px); color: var(--gold); margin-bottom: 12px; text-shadow: 0 0 8px var(--ember); }
#st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.skin { font: inherit; cursor: pointer; color: var(--bone); background: rgba(30,6,10,.7); border: 2px solid #3a1016; border-radius: 6px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .1s, border-color .15s; }
.skin img { width: 100%; aspect-ratio: 6 / 5; object-fit: contain; }
.skin .sn { font-size: 7px; line-height: 1.5; }
.skin .sp { font-size: 8px; color: var(--gold); }
.skin.owned .sp { color: #7fdc6a; }
.skin.sel { border-color: #fff; transform: translateY(-2px); box-shadow: 0 0 14px rgba(255,255,255,.25); }
.skin.equipped { border-color: var(--gold); }
.skin.locked img { filter: brightness(.35) grayscale(.6); }
.bones-earned { font-size: clamp(9px, calc(var(--u) * 1.3), 13px); color: var(--gold); margin: -4px 0 14px; min-height: 1em; text-shadow: 0 0 8px var(--ember); }
@media (max-width: 440px) { .store-tabs { flex-wrap: nowrap; gap: 4px; } .store-tabs .lb-tab { padding: 9px 7px; font-size: 8px; } }

/* ---------- Signature series (DELLYWAVE, FISHTANKFANATIC, HECKLEFISH, MIDMELFI, BOILED_BACON) ---------- */
@property --sig-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.skin.signature { position: relative; overflow: hidden; border: 2px solid transparent; animation: sigSpin 3.2s linear infinite; }
.skin.sig-kawaii {
    background: radial-gradient(ellipse at 50% 30%, rgba(255,154,208,.38), rgba(44,12,44,.94) 72%) padding-box,
                conic-gradient(from var(--sig-a), #ff9ad0, #9ff0e0, #fff09a, #c9a8ff, #ff9ad0) border-box;
}
.skin.sig-pen {
    background: repeating-linear-gradient(90deg, rgba(255,215,120,.07) 0 1px, transparent 1px 12px) padding-box,
                radial-gradient(ellipse at 50% 30%, #1e2848, #06080f 76%) padding-box,
                conic-gradient(from var(--sig-a), #e8c066, #2a1e06, #fff0c0, #2a1e06, #e8c066) border-box;
}
.skin.signature::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 62%);
    transform: translateX(-130%); animation: sigShine 3.6s ease-in-out infinite;
}
.skin.signature.sel { transform: translateY(-3px); }
.skin.sig-kawaii.sel { box-shadow: 0 0 18px rgba(255,154,208,.7); }
.skin.sig-pen.sel { box-shadow: 0 0 18px rgba(232,192,102,.6); }
.skin.sig-kawaii .sn { color: #ffd6ee; }
.skin.sig-pen .sn { color: #ffe9a8; font-size: 6px; letter-spacing: 0; }
.sig-badge { position: absolute; top: 4px; left: 4px; z-index: 1; font-size: 6px; letter-spacing: 1px; padding: 3px 5px; border-radius: 3px; }
.sig-kawaii .sig-badge { background: linear-gradient(90deg, #ff9ad0, #c9a8ff); color: #3a0a2a; }
.sig-pen .sig-badge { background: linear-gradient(90deg, #b08a30, #ffe9a8, #b08a30); color: #1a1204; }

/* preview panel backdrops + name styling */
.store-preview.sig-kawaii { border-color: #ff9ad0; box-shadow: 0 0 30px rgba(255,154,208,.35); --sig-glow: rgba(255,154,208,.7); }
.store-preview.sig-pen { border-color: #b08a30; box-shadow: 0 0 30px rgba(232,192,102,.25); --sig-glow: rgba(232,192,102,.6); }
.store-preview.sig-kawaii #store-canvas { background: radial-gradient(circle at 50% 42%, #ffe6f4 0%, #ffb4dc 22%, #8a5ac8 60%, #24102e 100%); }
.store-preview.sig-pen #store-canvas {
    background: repeating-linear-gradient(90deg, rgba(255,215,120,.05) 0 1px, transparent 1px 22px),
                radial-gradient(ellipse at 50% 38%, #26325a 0%, #0a0e1c 56%, #030409 100%);
}
.sig-name, .sig-sub { display: block; }
.sig-sub { font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 3px; margin-top: 8px; text-shadow: none; }
.sig-kawaii .sig-name {
    font-family: 'Bungee', Impact, sans-serif; font-size: clamp(24px, calc(var(--u) * 3.6), 36px); letter-spacing: 1px; text-shadow: none;
    background: linear-gradient(90deg, #ff8ac8, #fff08a, #8af0e0, #c4a0ff, #ff8ac8); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 #3a0a2a) drop-shadow(0 0 10px rgba(255,154,208,.6)); animation: sigRainbow 3s linear infinite;
}
.sig-kawaii .sig-sub { color: #ffb4dc; }
.sig-pen .sig-name {
    font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(18px, calc(var(--u) * 2.8), 28px); letter-spacing: 2px; text-shadow: none;
    background: linear-gradient(100deg, #9a7422 0%, #ffe9a8 35%, #e8c066 50%, #fff6d8 60%, #9a7422 100%); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 #000); animation: sigRainbow 4s ease-in-out infinite alternate;
}
.sig-pen .sig-sub { color: #c9a45a; }
/* HECKLEFISH: royal velvet and gold, a ring of gem colours */
.skin.sig-jewel {
    background: radial-gradient(ellipse at 50% 30%, rgba(255,200,90,.28), rgba(40,6,48,.95) 72%) padding-box,
                conic-gradient(from var(--sig-a), #f2c24a, #ff2a5a, #f2c24a, #3a7aff, #f2c24a, #20e080, #f2c24a, #c060ff, #f2c24a) border-box;
}
.skin.sig-jewel.sel { box-shadow: 0 0 18px rgba(255,210,110,.7); }
.skin.sig-jewel .sn { color: #ffe9a8; }
.sig-jewel .sig-badge { background: linear-gradient(90deg, #b07a18, #fff0b0, #b07a18); color: #2a0830; }
.store-preview.sig-jewel { border-color: #f2c24a; box-shadow: 0 0 30px rgba(255,210,110,.35); --sig-glow: rgba(255,220,130,.75); }
.store-preview.sig-jewel #store-canvas {
    background: radial-gradient(circle at 50% 40%, #6a2a7a 0%, #3a0a4a 38%, #14021a 100%),
                repeating-linear-gradient(45deg, rgba(255,210,110,.05) 0 2px, transparent 2px 18px);
    background-blend-mode: screen;
}
.sig-jewel .sig-name {
    font-family: Georgia, 'Times New Roman', serif; font-size: clamp(22px, calc(var(--u) * 3.3), 34px); letter-spacing: 3px; text-shadow: none;
    background: linear-gradient(100deg, #b07a18 0%, #fff0b0 22%, #ff6a8a 36%, #fff0b0 48%, #6aa0ff 60%, #fff0b0 72%, #b07a18 100%); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 #2a0830) drop-shadow(0 0 12px rgba(255,210,110,.5)); animation: sigRainbow 4s linear infinite;
}
.sig-jewel .sig-sub { color: #f2c24a; }

/* MIDMELFI: soft yarn pinks, teal wand stripes, sunny yellow */
.skin.sig-cat {
    background: radial-gradient(ellipse at 50% 30%, rgba(255,120,180,.34), rgba(40,14,40,.94) 72%) padding-box,
                conic-gradient(from var(--sig-a), #ff5aa0, #5ae8d8, #ffe070, #c89aff, #ff5aa0) border-box;
}
.skin.sig-cat.sel { box-shadow: 0 0 18px rgba(255,120,180,.7); }
.skin.sig-cat .sn { color: #ffd6ee; }
.sig-cat .sig-badge { background: linear-gradient(90deg, #ff5aa0, #5ae8d8); color: #2a0a24; }
.store-preview.sig-cat { border-color: #ff7ab8; box-shadow: 0 0 30px rgba(255,120,180,.35); --sig-glow: rgba(255,140,190,.7); }
.store-preview.sig-cat #store-canvas {
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.18) 0 6%, transparent 7%),
                radial-gradient(circle at 75% 70%, rgba(255,255,255,.12) 0 5%, transparent 6%),
                radial-gradient(circle at 50% 42%, #ffe0ee 0%, #ff9ac8 26%, #7a4ab0 64%, #22102c 100%);
}
.sig-cat .sig-name {
    font-family: 'Bungee', Impact, sans-serif; font-size: clamp(24px, calc(var(--u) * 3.6), 36px); letter-spacing: 1px; text-shadow: none;
    background: repeating-linear-gradient(115deg, #ff5aa0 0 12px, #ff8ac0 12px 24px, #5ae8d8 24px 36px, #ffe070 36px 48px); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 #3a0a2a) drop-shadow(0 0 10px rgba(255,120,180,.55)); animation: sigRainbow 5s linear infinite;
}
.sig-cat .sig-sub { color: #ff9ac8; }

/* BOILED_BACON: sewer greens, grubby rope and cheddar */
.skin.sig-rat {
    background: repeating-linear-gradient(0deg, rgba(120,160,60,.06) 0 2px, transparent 2px 14px) padding-box,
                radial-gradient(ellipse at 50% 30%, rgba(200,160,80,.22), rgba(16,20,10,.96) 72%) padding-box,
                conic-gradient(from var(--sig-a), #a8864e, #3a4a1a, #ffd040, #5a3a1e, #a8864e) border-box;
}
.skin.sig-rat.sel { box-shadow: 0 0 18px rgba(255,208,64,.55); }
.skin.sig-rat .sn { color: #ffe08a; font-size: 6.5px; letter-spacing: 0; }
.sig-rat .sig-badge { background: linear-gradient(90deg, #7a5a2e, #ffd040, #7a5a2e); color: #1a1004; }
.store-preview.sig-rat { border-color: #a8864e; box-shadow: 0 0 30px rgba(200,160,80,.25); --sig-glow: rgba(255,208,64,.6); }
.store-preview.sig-rat #store-canvas {
    background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 3px, transparent 3px 40px),
                radial-gradient(ellipse at 50% 38%, #4a5a2a 0%, #1e2610 52%, #080a04 100%);
}
.sig-rat .sig-name {
    font-family: 'Bungee', Impact, sans-serif; font-size: clamp(20px, calc(var(--u) * 3.1), 32px); letter-spacing: 1px; text-shadow: none;
    background: linear-gradient(180deg, #fff0a0 0%, #ffd040 45%, #c88a18 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 0 #3a2410) drop-shadow(0 0 8px rgba(160,200,80,.45));
}
.sig-rat .sig-sub { color: #b8c870; }
/* NEEPY_PEEPY_SQUEEPY: his colours. Seal brown, cream, and icy blue like his eyes */
.skin.sig-snow {
    background: radial-gradient(ellipse at 50% 30%, rgba(169,210,238,.3), rgba(24,18,16,.95) 72%) padding-box,
                conic-gradient(from var(--sig-a), #a9d2ee, #f6f2ec, #4a3326, #a9d2ee, #f6f2ec, #8a6a52, #a9d2ee) border-box;
}
.skin.sig-snow.sel { box-shadow: 0 0 18px rgba(169,210,238,.7); }
.skin.sig-snow .sn { color: #dff2ff; font-size: 5px; letter-spacing: 0; }
.sig-snow .sig-badge { background: linear-gradient(90deg, #4a3326, #a9d2ee, #4a3326); color: #0e0a08; }
.store-preview.sig-snow { border-color: #a9d2ee; box-shadow: 0 0 30px rgba(169,210,238,.3); --sig-glow: rgba(190,225,250,.7); }
.store-preview.sig-snow #store-canvas {
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.35) 0 1.5%, transparent 2%),
                radial-gradient(circle at 70% 35%, rgba(255,255,255,.3) 0 1.2%, transparent 1.7%),
                radial-gradient(circle at 40% 70%, rgba(255,255,255,.25) 0 1%, transparent 1.5%),
                radial-gradient(circle at 50% 42%, #e8f4fc 0%, #a9c8dc 30%, #4a5a6a 66%, #14121a 100%);
}
.sig-snow .sig-name {
    font-family: 'Bungee', Impact, sans-serif; font-size: clamp(15px, calc(var(--u) * 2.3), 24px); letter-spacing: 0; text-shadow: none; overflow-wrap: anywhere;
    background: linear-gradient(90deg, #f6f2ec 0%, #a9d2ee 30%, #f6f2ec 50%, #c8a888 75%, #f6f2ec 100%); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 #2e1f18) drop-shadow(0 0 10px rgba(169,210,238,.5)); animation: sigRainbow 5s linear infinite;
}
.sig-snow .sig-sub { color: #a9d2ee; }
.store-preview.celebrate { animation: sigCelebrate 1.2s ease-out; }

@keyframes sigSpin { to { --sig-a: 360deg; } }
@keyframes sigShine { 55%, 100% { transform: translateX(130%); } }
@keyframes sigRainbow { to { background-position: 200% 0; } }
@keyframes sigCelebrate { 0% { transform: scale(1); } 15% { transform: scale(1.035); box-shadow: 0 0 70px 14px var(--sig-glow); } 100% { transform: scale(1); } }