.drum-mode-controls{margin:14px 0 20px}.drum-mode-controls h2{font-size:18px;color:#173568}.drum-mode-buttons{display:flex;gap:8px;flex-wrap:wrap}.drum-mode-buttons button{font:600 13px Poppins,sans-serif;padding:10px 14px;min-height:44px;border:1px solid #b8cbea;border-radius:9px;color:#244675;background:white;cursor:pointer}.drum-mode-buttons button[aria-pressed=true]{background:#245bd3;color:white}.drum-mode-controls p{font-size:12px;color:#5b7192;line-height:1.8}
.drum-kit.marching-mode{height:auto!important;aspect-ratio:auto!important;min-height:0!important;background:#edf2f8!important;padding:16px!important;border-radius:18px;overflow:hidden}.marching-mode>[hidden]{display:none!important}.drum-kit.marching-mode .marching-pads{position:relative;width:100%;max-width:720px;margin:auto;left:auto;top:auto;height:auto;isolation:isolate}.marching-surface{display:block;width:100%;height:auto;max-width:100%;pointer-events:none;user-select:none}.drum-kit.marching-mode .marching-pads.snare{max-width:480px}.drum-kit.marching-mode .marching-pads.tenor{aspect-ratio:1.5}.drum-kit.marching-mode .marching-pads.bass{display:flex;align-items:center;gap:6px;aspect-ratio:2.5;max-width:800px}.marching-pad{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:0;border-radius:50%;background:transparent;box-shadow:none;padding:0;color:white;font:600 12px Poppins,sans-serif;cursor:pointer;touch-action:manipulation;user-select:none;min-width:28px;min-height:28px;box-sizing:border-box}.marching-pad strong{font-size:11px;line-height:1.4;background:#173558e0;color:white;padding:3px 6px;border-radius:4px;pointer-events:none}.marching-pad small{font-size:10px;background:white;color:#173558;padding:1px 6px;border-radius:4px;pointer-events:none}.marching-pad:hover{box-shadow:inset 0 0 0 2px #a4c7f3}.marching-pad.struck{box-shadow:inset 0 0 0 3px #71a7f4;background-color:#8fbaff50;filter:brightness(1.12)}.marching-pad:focus-visible,.touch-accent:focus-visible,.cymbal-damp:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.marching-pads.tenor .found-drumhead{background:radial-gradient(ellipse at 40% 35%,#fbfaf6,#e1e0d7);border:5px solid #98a4af;box-shadow:inset 0 0 0 2px #e3e7eb,0 6px 0 #36516d;border-radius:50%;filter:drop-shadow(0 5px 3px #273b5233)}.marching-pads.tenor .found-drumhead.struck{filter:drop-shadow(0 3px 3px #273b5233) brightness(1.2)}.drum-kit.marching-mode .bass .marching-pad{position:relative!important;left:auto!important;top:auto!important;width:20%!important;height:auto!important;aspect-ratio:.95;background:white url('/assets/marching-images/bass.jpg') left top/145% auto no-repeat;border-radius:46%;overflow:hidden;flex-shrink:1}.bass .marching-pad img{display:none}.bass .marching-pad:nth-child(1){scale:.72}.bass .marching-pad:nth-child(2){scale:.79}.bass .marching-pad:nth-child(3){scale:.86}.bass .marching-pad:nth-child(4){scale:.93}.bass .marching-pad strong{font-size:10px}.cymbal-damp{position:absolute;bottom:1%;left:50%;translate:-50% 0;z-index:3;border:1px solid #a8bedf;border-radius:8px;min-height:44px;padding:8px 16px;background:#fff;color:#254d87;font:600 12px Poppins,sans-serif;white-space:nowrap}
.marching-expression{display:flex;gap:12px;align-items:center;font:600 12px Poppins,sans-serif;color:#5b7192}.marching-expression[hidden]{display:none}.accent-indicator{padding:8px 12px;background:#eef3fb;border-radius:20px}.accent-indicator.active{background:#dcebdc;color:#22643a}.touch-accent{display:none;min-height:44px;border:1px solid #adc1e4;border-radius:8px;padding:8px 14px;background:white;color:#254d87;touch-action:none;user-select:none}.touch-accent[aria-pressed=true]{background:#245bd3;color:white}.marching-feedback{font:600 13px Poppins,sans-serif;text-align:center;color:#254d87;min-height:24px}.marching-photo-credit{font:10px/1.7 Poppins,sans-serif;color:#607594;max-width:720px;margin:10px auto}.marching-photo-credit a{color:#315c9e}
@media(hover:none),(pointer:coarse){.touch-accent{display:block}.accent-indicator:not(.active){display:none}}
@media(max-width:600px){.drum-kit.marching-mode{padding:8px!important}.drum-mode-buttons button{font-size:11px;padding:8px 10px}.marching-pad{gap:3px}.marching-pad strong{font-size:9px;padding:2px 3px}.marching-pad small{font-size:9px;padding:1px 4px}.drum-kit.marching-mode .marching-pads.bass{aspect-ratio:2}.bass .marching-pad strong{font-size:8px}.cymbal-damp{min-height:36px;padding:5px 10px;font-size:10px}}
.drum-kit.marching-mode .marching-pads.tenor{aspect-ratio:auto;max-width:640px;background:white;border-radius:12px}.marching-pads.tenor .found-drumhead{background:transparent;border:0;box-shadow:none;filter:none}.marching-pads.tenor .found-drumhead.struck{background:#8fbaff50;box-shadow:inset 0 0 0 2px #71a7f4;filter:none}.marching-photo-credit summary{cursor:pointer;display:list-item;width:fit-content}.marching-photo-credit p{margin:5px 0}

/* Exact user-supplied reference: rotate the existing photograph in CSS into player view. */
.drum-kit.marching-mode .marching-pads.tenor{aspect-ratio:427/320;background:#edf2f8;max-width:640px;overflow:hidden}.tenor .marching-surface{position:absolute;width:74.94145%;max-width:none;height:auto;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);clip-path:polygon(48% 0,71% 0,78% 5%,80% 15%,77% 22%,73% 25%,74% 34%,75% 48%,76% 57%,75% 65%,81% 72%,86% 81%,85% 90%,78% 97%,68% 100%,54% 100%,45% 96%,40% 88%,39% 80%,39% 74%,29% 73%,19% 70%,15% 62%,16% 54%,21% 48%,24% 44%,25% 42%,24% 35%,23% 30%,25% 24%,31% 20%,40% 18%,40% 13%,41% 7%)}.tenor .marching-pad{z-index:2}.tenor .marching-pad strong{font-size:10px}.tenor .marching-pad small{font-size:10px}