.pdrum{--body: #1f8f86;--body2: #14675f;--tongue: #27a096;--cut: rgba(5,30,28,.78);--gold: #f1d27a;position:relative;max-width:760px;margin-inline:auto;border-radius:28px;padding:14px 14px 18px;color:#f4efe3;overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,#2b3a55,#18202f 62%,#0f141e);box-shadow:0 24px 56px #0f141e59,inset 0 0 0 1px #ffffff12;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.pdrum[data-color=navy]{--body: #2c3f6b;--body2: #1b2a4d;--tongue: #38507f}.pdrum[data-color=gold]{--body: #c99a2e;--body2: #946d14;--tongue: #d8ac45;--cut: rgba(60,38,0,.7)}.pdrum[data-color=pink]{--body: #d98a8f;--body2: #b0636a;--tongue: #e49ea2;--cut: rgba(70,20,28,.6)}.pdrum[data-color=purple]{--body: #8b73c4;--body2: #624c9a;--tongue: #9d88d1;--cut: rgba(30,15,60,.7)}.pdrum[data-color=black]{--body: #2a2a2e;--body2: #121214;--tongue: #38383e;--cut: rgba(0,0,0,.85);--gold: #e8c566}.pdrum button{font:inherit;color:inherit;cursor:pointer}.pdrum__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:4px 4px 10px}.pdrum__colors{display:flex;gap:10px}.pdrum__dot{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:var(--c);padding:0;transition:transform .15s ease,box-shadow .15s ease}.pdrum__dot.is-on{transform:scale(1.12);box-shadow:0 0 0 3px #18202f,0 0 0 5px var(--gold)}.pdrum__btns{display:flex;gap:8px;flex-wrap:wrap}.pdrum .pdrum__btn{border:0;border-radius:999px;padding:10px 18px;font-weight:700;background:#ffbd3a;color:#3a2400;box-shadow:0 3px #c98a00;transition:transform .12s ease,box-shadow .12s ease}.pdrum .pdrum__btn:active{transform:translateY(2px);box-shadow:0 1px #c98a00}.pdrum .pdrum__btn--ghost{background:#ffffff1f;color:#f4efe3;box-shadow:inset 0 0 0 1px #ffffff4d}.pdrum__btn[hidden]{display:none}.pdrum__stage{display:grid;place-items:center;padding:6px 0 4px}.pdrum__drum{position:relative;width:min(100%,470px);aspect-ratio:1;border-radius:50%;touch-action:manipulation;background:radial-gradient(circle at 38% 30%,var(--tongue) 0%,var(--body) 38%,var(--body2) 100%);box-shadow:0 22px 34px #00000080,inset 0 0 0 5px #ffffff12,inset 0 -14px 30px #00000047,inset 0 10px 22px #ffffff1f}.pdrum__t{position:absolute;left:50%;top:50%;width:17.5%;height:25%;padding:0;border:2.5px solid var(--cut);border-radius:46% 46% 26% 26%/44% 44% 22% 22%;background:linear-gradient(170deg,#ffffff38,#ffffff05 55%),var(--tongue);display:grid;align-content:center;justify-items:center;gap:1px;transform:translate(-50%,-50%) rotate(var(--a,0deg)) translateY(-132%);box-shadow:inset 0 2px 3px #ffffff47,0 1px 2px #0000004d;transition:filter .08s ease}.pdrum__t--mid{width:27%;height:21%;transform:translate(-50%,-50%);border-radius:44% 44% 30% 30%/52% 52% 26% 26%}.pdrum__n{display:block;font-weight:800;font-size:clamp(13px,3.6vw,20px);color:var(--gold);transform:rotate(calc(var(--a,0deg) * -1));text-shadow:0 1px 0 rgba(0,0,0,.35);pointer-events:none}.pdrum__t--mid .pdrum__n{transform:none}.pdrum__t:focus-visible{outline:3px solid #ffbd3a;outline-offset:2px}.pdrum__t.is-hit{filter:brightness(1.45) saturate(1.2);animation:pdHit .38s ease-out}.pdrum__t.is-next{box-shadow:0 0 0 3px #ffbd3a,0 0 22px 6px #ffbd3a99;animation:pdNext .8s ease-in-out infinite}.pdrum__t.is-wrong{animation:pdWrong .28s ease}.pdrum__ring{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;border:3px solid rgba(255,255,255,.7);pointer-events:none;transform:translate(-50%,-50%) scale(.3);opacity:.9;animation:pdRing .6s ease-out forwards}.pdrum__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 6px 0;min-height:32px}.pdrum__msg{font-weight:600;font-size:15px;line-height:1.35}.pdrum__dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:46%}.pdrum__dots i{width:8px;height:8px;border-radius:50%;background:#ffffff38}.pdrum__dots i.on{background:#ffbd3a}@keyframes pdHit{0%{transform:translate(-50%,-50%) rotate(var(--a,0deg)) translateY(-132%) scale(.94)}to{transform:translate(-50%,-50%) rotate(var(--a,0deg)) translateY(-132%) scale(1)}}.pdrum__t--mid.is-hit{animation-name:pdHitMid}@keyframes pdHitMid{0%{transform:translate(-50%,-50%) scale(.94)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes pdNext{0%,to{filter:brightness(1.1)}50%{filter:brightness(1.55)}}@keyframes pdWrong{0%,to{filter:none}50%{filter:brightness(.7) hue-rotate(-30deg)}}@keyframes pdRing{to{transform:translate(-50%,-50%) scale(1.6);opacity:0}}@media(max-width:520px){.pdrum{padding:10px 10px 14px;border-radius:22px}.pdrum__dot{width:34px;height:34px}.pdrum__dots{max-width:38%}}@media(prefers-reduced-motion:reduce){.pdrum__t.is-next,.pdrum__t.is-hit{animation:none}.pdrum__ring{display:none}}.pdrum__snd{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:10px 6px 0;font-size:13px;line-height:1.4;opacity:.75}.pdrum__snd i{width:8px;height:8px;border-radius:50%;background:#ffffff59;flex:none}.pdrum__snd.is-on i{background:#5fd38d;box-shadow:0 0 8px #5fd38d}.pdrum__snd.is-on [data-sound-txt]{font-weight:700}
/*# sourceMappingURL=/cdn/shop/t/4/assets/play-drum.css.map */