/* ButtonBass site shell for Drum Room. Load after drumset.css and nav-styles.css. */
body {
  color-scheme: dark;
  background:
    radial-gradient(900px 520px at 36% 9%, rgba(0, 255, 70, .10), transparent 66%),
    radial-gradient(720px 520px at 92% 28%, rgba(56, 217, 255, .045), transparent 68%),
    #08090c;
  color: #f3f4f6;
}

.drum-app,
#help-dialog {
  --ds-panel: #101217;
  --ds-panel-raised: #151820;
  --ds-line: #292d37;
  --ds-text: #f3f4f6;
  --ds-muted: #a0a7b5;
  --ds-acid: #39ff5a;
  --ds-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --paper: #101217;
  --ink: #f3f4f6;
  --muted: #a0a7b5;
  --line: #292d37;
  --font: var(--ds-sans);
  --display: var(--ds-sans);
  --mono: var(--ds-mono);
  color-scheme: dark;
  font-family: var(--ds-sans);
}

.drum-app {
  width: min(1220px, 100%);
  max-width: 1220px;
  margin: 0 auto;
  padding: 22px 18px 0;
  color: var(--ds-text);
}
.drum-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 4px 0 20px;
}
.drum-page-head > div { min-width: 0; }
.drum-page-eyebrow {
  margin: 0 0 9px;
  color: var(--ds-acid);
  font: 700 10px/1.3 var(--ds-mono);
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.drum-page-head h1 {
  margin: 0;
  color: var(--ds-text);
  font: 900 clamp(29px, 4vw, 50px)/.98 var(--ds-sans);
  letter-spacing: -2.3px;
  text-transform: uppercase;
}
.drum-page-head h1 > span {
  display: block;
  margin-top: 9px;
  color: #eef0f3;
  font-size: .38em;
  line-height: 1.3;
  letter-spacing: 1.2px;
}
.drum-page-copy {
  flex: 0 1 435px;
  max-width: 435px;
  margin: 0;
  color: #9aa1af;
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}

/* The playable stage keeps its maple, bronze and olive colors. */
.drum-app .drum-room {
  border-color: #313642;
  border-radius: 12px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .04);
}
.drum-app .session-bar {
  border-color: var(--ds-line);
  padding: 12px 0;
  margin-bottom: 16px;
}
.drum-app .session-links > a,
.drum-app .session-links > button { color: #c7ced8; }
.drum-app .session-links .builder-link { color: var(--ds-acid); }
.drum-app .session-links > button:hover { color: #fff; }
.drum-app .quick-groove > label { color: #969ead; }
.drum-app .quick-groove select,
.drum-app .groove-actions select {
  color: #e4e8ef;
  background-color: #151820;
  border: 1px solid #343a47;
  border-radius: 6px;
}
.drum-app .quick-groove select { padding: 9px 26px 9px 10px; }
.drum-app select option { background: #151820; color: #e4e8ef; }
.drum-app .primary-button {
  color: #08170c;
  background: #39ff5a;
  border-color: #51fa6d;
  font-weight: 700;
  box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 2px 10px #0004;
}
.drum-app .primary-button:hover { background: #72ff8a; border-color: #91ffa1; }
.drum-app .primary-button[aria-pressed="true"] {
  background: #1e4a2a;
  border-color: #3dde64;
  color: #bdfac9;
}
.drum-app .key-rack { background: #101319; border-top: 1px solid #2c333a; }
.drum-app .key-pad { color: #a8b0bd; border-right-color: #2c333e; }
.drum-app .key-pad kbd,
.drum-app .under-kit kbd,
#help-dialog kbd {
  background: #1b202a;
  border-color: #3b4350;
  box-shadow: 0 2px #080b10;
  color: #d5dce8;
}
.drum-app .key-pad.is-hit kbd {
  color: #102114;
  background: #58f879;
  border-color: #7bff94;
  box-shadow: 0 0 12px #39ff5a33;
}
.drum-app .under-kit { color: #9ba3b1; }
.drum-app .under-kit button { color: #b0b9c8; }
.drum-app .under-kit button:hover { color: var(--ds-acid); }
.drum-app .groove-section,
.drum-app .custom-section {
  background: linear-gradient(145deg, #151820, #101217);
  border-color: #2c313d;
  box-shadow: 0 16px 38px #0002, inset 0 1px #ffffff05;
}
.drum-app .groove-section,
.drum-app .custom-section,
.drum-app .phonk-section { scroll-margin-top: 76px; }
.drum-app .custom-heading .eyebrow,
.drum-app .groove-heading .eyebrow { color: #8dff91; }
.drum-app .custom-heading h2,
.drum-app .groove-heading h2 { color: #f3f4f6; font-weight: 750; letter-spacing: -.7px; }
.drum-app .custom-heading p:not(.eyebrow),
.drum-app .groove-heading p:not(.eyebrow) { color: #a0a7b5; }
.drum-app .outline-button {
  background: #1a2520;
  border-color: #42634c;
  color: #bce7c6;
}
.drum-app .outline-button:hover:not(:disabled) { border-color: #6bb783; background: #213b2a; }
.drum-app .custom-empty { background: #0d1117; border-color: #3b4651; }
.drum-app .custom-empty-icon { border-color: #3c5444; color: #78b68a; }
.drum-app .custom-empty p { color: #9aa7b6; }
.drum-app .custom-empty strong { color: #c3cfdb; }
.drum-app .local-badge,
.drum-app .custom-message { color: #98a4b2; }
.drum-app .custom-card {
  background: #11161f;
  border-color: #303b47;
  box-shadow: 0 3px 8px #0002;
}
.drum-app .custom-card-top,
.drum-app .custom-card label.sound-label { color: #9aa9b9; }
.drum-app .remove-custom { color: #9daaba; }
.drum-app .remove-custom:hover { color: #ffb1a2; }
.drum-app .custom-pad {
  background: radial-gradient(ellipse at 50% 15%, #2c4434, #192920);
  border-color: #496c50;
  color: #c7e9ce;
}
.drum-app .custom-pad .pad-disc {
  border-color: #8dc29266;
  box-shadow: 0 0 0 5px #86ba9212, 0 0 0 10px #a4cba00d;
}
.drum-app .custom-pad kbd {
  background: #263a2b;
  border-color: #648d63;
  color: #d9f3d4;
  box-shadow: 0 2px #0e1b11;
}
.drum-app .custom-pad-name { background: #203627cc; color: #cde8cb; }
.drum-app .custom-pad.is-hit {
  background: #385842;
  border-color: #9bdca7;
  box-shadow: 0 0 0 3px #5fa57433, inset 0 0 24px #78c78c22;
}
.drum-app .custom-source { background: #171e28; border-color: #3a4656; color: #d2dbe5; }
.drum-app .upload-button { background: #141c25; border-color: #475767; color: #b0c1cf; }
.drum-app .upload-button:hover { background: #1c2a33; border-color: #7e9dad; }
.drum-app .custom-status { color: #a0adbb; }
.drum-app .custom-status.error { color: #ffb0a0; }
.drum-app .preset-shelf { border-color: #2c333e; }
.drum-app .preset-shelf > p { color: #949ead; }
.drum-app .preset-chip { background: #191e27; border-color: #333b48; color: #c4ccd8; }
.drum-app .preset-chip small { color: #98a4b6; }
.drum-app .preset-chip:hover { background: #222c30; border-color: #659275; }
.drum-app .preset-chip[aria-pressed="true"] { background: #203a29; border-color: #4fa96d; color: #d6f9dc; }
.drum-app .preset-chip[aria-pressed="true"] small { color: #9bd2a9; }
.drum-app .preset-chip[data-preset^="phonk"] { background: #29251f; border-color: #574b37; color: #d6c7ad; }
.drum-app .preset-chip[data-preset^="phonk"][aria-pressed="true"] { background: #453721; border-color: #b59a64; color: #f6e2bb; }
.drum-app .preset-chip[data-preset^="phonk"] small { color: #bba886; }
.drum-app .capture-button { background: #30251e; border-color: #87563b; color: #f1bc96; }
.drum-app .capture-button[aria-pressed="true"] { background: #9b5630; border-color: #e39765; color: #fff1e8; }
.drum-app .capture-dot { background: #e19666; }
.drum-app .capture-button[aria-pressed="true"] .capture-dot { background: #fff2de; }
.drum-app .beat-tools p { color: #9aa5b3; }
.drum-app .text-button,
.drum-app .sequencer-footer button { color: #b8c4d1; }
.drum-app .text-button:hover,
.drum-app .sequencer-footer button:hover { color: var(--ds-acid); }
.drum-app .seq-count { color: #8e99aa; }
.drum-app .seq-count.downbeat { color: #cbd4df; }
.drum-app .seq-label { color: #afbac9; }
.drum-app .step { background: #202630; border-color: #303a47; }
.drum-app .step[aria-pressed="true"] { background: var(--row-color); border-color: var(--row-color); }
.drum-app .step:hover { filter: brightness(1.2); }
.drum-app .step.current { box-shadow: 0 0 0 2px #c8f8d4; }
.drum-app .step.current:after { background: #ffffff59; }
.drum-app .seq-count.current { color: #71ff8b; }
.drum-app .sequencer-footer { color: #9aa6b5; }
.drum-app .sequencer-footer > span i { background: #78b98c; }
.drum-app .beat-edited { color: #dab385; }
.drum-app .closing-note p { color: #959eac; }
.drum-app .closing-note strong { color: #d1d9e4; }
.drum-app .closing-note > a { color: #a7b4c4; }
.drum-app .closing-note > a:hover strong { color: #8dff91; }
.drum-app .closing-star { color: #75aa83; }

/* Drawer styles remain entirely in the canonical shared navigation stylesheet. */
body > .homepage-content {
  width: 98%;
  margin: 10px auto 0;
  padding: 20px;
  background: #101217;
  border: 1px solid #292d37;
  border-radius: 10px;
  box-shadow: 0 5px 14px #0003;
}
.drum-site-footer {
  display: block;
  max-width: none;
  margin: 0;
  padding: 24px 18px 30px;
  border: 0;
  color: #a0a0a8;
  font: 12px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
}
.drum-site-footer a:hover { color: #8dff3f; }

#help-dialog {
  background: #13171f;
  border-color: #424b59;
  color: #f3f4f6;
  box-shadow: 0 30px 100px #000a;
}
#help-dialog::backdrop { background: #04060bd9; }
#help-dialog .eyebrow { color: #83ef96; }
#help-dialog h2 { color: #f3f4f6; }
#help-dialog p:not(.eyebrow) { color: #b4bfcd; }
#help-dialog strong { color: #e4eaf1; }
#help-dialog .help-keys { color: #b8c7d9; }
#help-dialog .dialog-close { color: #bac8d8; }
#help-dialog .dialog-close:hover { color: #fff; }
.skip-link { z-index: 10001; background: #39ff5a; color: #0c1a10; }

@media (max-width: 900px) {
  .drum-page-head { gap: 18px; }
  .drum-page-copy { flex-basis: 345px; font-size: 12px; }
}
@media (max-width: 760px) {
  .drum-app { padding: 16px 8px 0; }
  .drum-page-head { align-items: flex-start; flex-direction: column; gap: 12px; margin: 3px 4px 17px; }
  .drum-page-copy { flex-basis: auto; max-width: 620px; text-align: left; }
  .drum-page-eyebrow { font-size: 9px; letter-spacing: 1.7px; }
  .drum-app .session-bar { padding: 10px 4px 14px; }
  .drum-app .quick-groove select { padding: 9px 6px; }
  body > .homepage-content { padding: 8px; border-radius: 8px; }
}
@media (max-width: 480px) {
  .drum-page-head h1 { font-size: 31px; letter-spacing: -1.5px; }
  .drum-page-head h1 > span { font-size: 11px; letter-spacing: .65px; }
  .drum-page-copy { font-size: 11px; line-height: 1.6; }
  .drum-app .quick-groove > label { font-size: 6.5px; letter-spacing: .5px; }
  .drum-app .quick-groove select { font-size: 10px; }
}


/* The same layout serves native browser fullscreen and the in-page fallback. */
.fullscreen-beat-controls { display: none; }
#drum-room:is(.room-expanded, :fullscreen) {
  position: fixed;
  inset: 0;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #171e19;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #65745c #171e19;
}
#drum-room:fullscreen::backdrop { background: #111713; }
#drum-room:is(.room-expanded, :fullscreen) > .room-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  flex: 0 0 auto;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  box-shadow: 0 3px 14px #0002;
}
#drum-room:is(.room-expanded, :fullscreen) #focus-toggle {
  flex-shrink: 0;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #69735c;
  border-radius: 6px;
  color: #e2e8d5;
  background: #2c382a;
  white-space: nowrap;
}
#drum-room:is(.room-expanded, :fullscreen) #focus-toggle:hover { border-color: #b6c7a0; background: #3c4b35; }
#drum-room:is(.room-expanded, :fullscreen) > .fullscreen-beat-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid #3c493d;
  background: #202a22;
}
#fullscreen-beat-controls .quick-groove {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(780px, 100%);
  min-width: 0;
  margin: 0 auto;
}
#fullscreen-beat-controls .quick-groove > label {
  display: block;
  margin: 0;
  color: #b4c3a7;
  font: 700 8px/1.4 var(--mono);
  letter-spacing: 1px;
}
#fullscreen-beat-controls select {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  padding: 8px 28px 8px 11px;
  border: 1px solid #59674e;
  border-radius: 5px;
  background: #141e17;
  color: #e4ebda;
  font-size: 12px;
}
#fullscreen-beat-controls .primary-button {
  justify-content: center;
  min-width: 118px;
  min-height: 36px;
  padding: 8px 13px;
}
#drum-room:is(.room-expanded, :fullscreen) > .kit-stage {
  flex: 1 0 240px;
  width: 100%;
  min-height: 240px;
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
}
#drum-room:is(.room-expanded, :fullscreen) #drum-kit {
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  overflow: hidden;
}
#drum-room:is(.room-expanded, :fullscreen) > .performance-strip,
#drum-room:is(.room-expanded, :fullscreen) > .key-rack { flex: 0 0 auto; }
#drum-room:is(.room-expanded, :fullscreen) > .key-rack {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

@media (max-width: 620px) {
  #drum-room:is(.room-expanded, :fullscreen) > .room-topbar {
    min-height: 94px;
    gap: 9px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: 9px;
  }
  #drum-room:is(.room-expanded, :fullscreen) .view-actions { gap: 10px; }
  #drum-room:is(.room-expanded, :fullscreen) #focus-toggle { font-size: 10px; padding: 6px 8px; }
  #drum-room:is(.room-expanded, :fullscreen) > .fullscreen-beat-controls { padding: 9px 12px; }
  #fullscreen-beat-controls .quick-groove { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  #fullscreen-beat-controls .quick-groove > label { max-width: 57px; font-size: 7px; letter-spacing: .5px; }
  #fullscreen-beat-controls select { min-height: 36px; padding: 7px 4px; font-size: 11px; }
  #fullscreen-beat-controls .primary-button { min-width: 106px; min-height: 36px; padding: 8px; font-size: 10px; }
  #drum-room:is(.room-expanded, :fullscreen) > .kit-stage { flex-basis: 260px; min-height: 260px; }
  #drum-room:is(.room-expanded, :fullscreen) > .key-rack { padding-left: 5px; padding-right: 5px; }
}

/* Short landscape screens can scroll the full panel; controls are never clipped. */
@media (max-height: 520px) and (min-width: 621px) {
  #drum-room:is(.room-expanded, :fullscreen) > .room-topbar { min-height: 48px; padding-top: 6px; padding-bottom: 6px; gap: 12px; }
  #drum-room:is(.room-expanded, :fullscreen) .room-edition { display: none; }
  #drum-room:is(.room-expanded, :fullscreen) .kit-selector button { padding: 6px 14px; }
  #drum-room:is(.room-expanded, :fullscreen) > .fullscreen-beat-controls { padding-top: 6px; padding-bottom: 6px; }
  #drum-room:is(.room-expanded, :fullscreen) > .kit-stage { flex-basis: 200px; min-height: 200px; }
  #drum-room:is(.room-expanded, :fullscreen) > .performance-strip { min-height: 66px; padding-top: 9px; padding-bottom: 9px; gap: 15px; }
  #drum-room:is(.room-expanded, :fullscreen) > .key-rack { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  #drum-room:is(.room-expanded, :fullscreen) .key-pad { min-height: 30px; gap: 3px; }
  #drum-room:is(.room-expanded, :fullscreen) .key-pad span { display: none; }
}


/* Static playing guide and FAQs remain readable before JavaScript loads. */
.drum-page-links { display:flex; flex-wrap:wrap; gap:8px 22px; padding:0 0 8px; font-size:11px; }
.drum-page-links a { color:#acb7c5; text-underline-offset:4px; }
.drum-page-links a:hover { color:#8dff91; text-decoration:underline; }
.drum-guide { margin:34px 0 0; padding-top:30px; border-top:1px solid var(--ds-line); scroll-margin-top:85px; }
.drum-guide-intro { max-width:850px; margin-bottom:26px; }
.drum-guide .drum-guide-eyebrow { margin:0 0 12px; font:700 10px/1.4 var(--ds-mono); letter-spacing:1.8px; color:#8dff91; }
.drum-guide h2 { margin:0 0 15px; font:750 clamp(23px,3vw,32px)/1.2 var(--ds-sans); letter-spacing:-.8px; color:#f3f4f6; }
.drum-guide h3 { margin:0 0 15px; font:700 18px/1.35 var(--ds-sans); letter-spacing:-.25px; color:#edf2f8; }
.drum-guide p, .drum-guide li { font-size:14px; line-height:1.8; color:#b0bac8; }
.drum-guide p { margin:0 0 14px; }
.drum-guide p:last-child { margin-bottom:0; }
.drum-guide strong { color:#e1e9f3; font-weight:650; }
.drum-guide a { color:#9feaaf; text-decoration:underline; text-decoration-color:#568063; text-underline-offset:3px; }
.drum-guide a:hover { color:#d5ffdf; text-decoration-color:currentColor; }
.drum-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:stretch; }
.drum-guide-card { min-width:0; padding:24px; border:1px solid #2b333e; border-radius:12px; background:linear-gradient(145deg,#151b23,#10151c); }
.drum-guide-card--keyboard { grid-row:span 2; }
.drum-guide-card--recording { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 30px; }
.drum-guide-card--recording h3 { grid-column:1/-1; }
.drum-guide-card--recording p { margin:0; }
.drum-guide-steps { margin:0; padding-left:21px; }
.drum-guide-steps li { margin-bottom:14px; padding-left:6px; }
.drum-guide-steps li:last-child { margin-bottom:0; }
.drum-guide-steps li::marker { color:#8dff91; font-weight:700; }
.drum-key-reference { max-width:100%; overflow-x:auto; margin:0 0 17px; border:1px solid #303a46; border-radius:7px; }
.drum-key-reference table { width:100%; border-collapse:collapse; color:#bac5d2; font-size:12px; line-height:1.55; }
.drum-key-reference caption { padding:10px 12px; text-align:left; color:#90a39c; background:#10171c; font-size:11px; }
.drum-key-reference th, .drum-key-reference td { padding:8px 11px; text-align:left; border-top:1px solid #29333e; }
.drum-key-reference thead th { color:#d9e6dd; font-size:11px; font-weight:600; background:#1c2727; }
.drum-key-reference tbody th { width:43%; font-weight:400; white-space:nowrap; }
.drum-key-reference tbody tr:nth-child(even) { background:#ffffff03; }
.drum-guide kbd { display:inline-block; padding:1px 4px; border:1px solid #435048; border-radius:3px; background:#1c2a25; color:#d2e9d7; box-shadow:0 1px #070e09; font:11px/1.5 var(--ds-mono); }
.drum-faq { margin-top:30px; scroll-margin-top:85px; }
.drum-faq h3 { font-size:23px; margin-bottom:18px; }
.drum-faq details { margin:0 0 9px; border:1px solid #2d3541; border-radius:9px; background:#111720; }
.drum-faq summary { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:17px 20px; list-style:none; cursor:pointer; color:#d9e2ec; font-size:14px; font-weight:600; line-height:1.5; }
.drum-faq summary::-webkit-details-marker { display:none; }
.drum-faq summary::after { content:'+'; flex:0 0 auto; color:#8dff91; font:22px/1 var(--ds-mono); }
.drum-faq details[open] summary::after { content:'−'; }
.drum-faq details[open] { border-color:#4b6656; }
.drum-faq summary:hover { color:#aaffb7; }
.drum-faq summary:focus-visible { outline:3px solid #8dff91; outline-offset:3px; border-radius:8px; }
.drum-faq details p { max-width:90ch; padding:0 20px 19px; margin:0; }
@media (max-width:760px) {
  .drum-page-links { padding:0 4px 6px; gap:8px 18px; }
  .drum-guide { margin:27px 4px 0; padding-top:25px; }
  .drum-guide-grid { grid-template-columns:1fr; gap:14px; }
  .drum-guide-card { padding:20px 16px; }
  .drum-guide-card--keyboard { grid-row:auto; }
  .drum-guide-card--recording { display:block; grid-column:auto; }
  .drum-guide-card--recording p { margin-bottom:14px; }
  .drum-guide-card--recording p:last-child { margin-bottom:0; }
  .drum-guide h3 { font-size:17px; }
  .drum-faq h3 { font-size:21px; }
  .drum-faq summary { padding:15px; font-size:13px; }
  .drum-faq details p { padding:0 15px 17px; }
  .drum-key-reference th, .drum-key-reference td { padding:8px; }
}

/* Shared responsive AdSense slots sit below the playing controls, outside fullscreen. */
.drum-ad {
  width: 100%;
  max-width: 728px;
  min-width: 0;
  margin: 36px auto;
  text-align: center;
}
.drum-ad-label {
  display: block;
  margin-bottom: 10px;
  color: #969ead;
  font: 10px/1.4 var(--ds-sans);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.drum-ad:has(ins[data-ad-status="unfilled"]) { display: none; }