/* My Skyblock > Doorbell (NX-DOORBELL v1, Claude Main, 12 Oct 2026). Centred, few boxes: dark glass cards with a teal edge
   when chosen. Scoped to .db so nothing leaks into the header or other sections. */
.cc .db { --db: 45, 212, 191; display: grid; gap: 34px; width: min(940px, 100%); margin: 0 auto; }
.cc .db-sec h3 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; color: var(--cc-dim, #8a8a94); font: 700 11px var(--cc-mono, monospace); letter-spacing: .16em; text-align: center; text-transform: uppercase; }
.cc .db svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Standard chimes */
.cc .db-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cc .db-card { display: grid; justify-items: center; gap: 8px; padding: 20px 12px 14px; border-radius: 18px; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--db), .06), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), #0a0a0c;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.06); animation: ccIn .45s var(--cc-ease, ease) both; animation-delay: calc(var(--i) * 35ms); transition: box-shadow .3s; }
.cc .db-card.on { box-shadow: inset 0 0 0 2px rgb(var(--db)), inset 0 0 18px rgba(var(--db), .14), 0 0 30px rgba(var(--db), .22); }
.cc .db-card b { color: #fff; font: 800 14px/1.3 Outfit, Inter, sans-serif; }
.cc .db-card small { min-height: 15px; color: rgb(var(--db)); font: 700 10px var(--cc-mono, monospace); letter-spacing: .14em; text-transform: uppercase; }

:is(.cc, .db-trim) .db-play { display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(255,255,255,.04) 60%), #141418; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(var(--db), .45), 0 6px 18px rgba(0,0,0,.4); transition: transform .2s, box-shadow .2s; }
:is(.cc, .db-trim) .db-play svg { width: 18px; height: 18px; margin-left: 2px; stroke: none; }
:is(.cc, .db-trim) .db-play.on { background: rgb(var(--db)); color: #062019; box-shadow: 0 0 22px rgba(var(--db), .55); }
:is(.cc, .db-trim) .db-play.on svg { margin-left: 0; }
:is(.cc, .db-trim) .db-play:hover { transform: scale(1.06); }
:is(.cc, .db-trim) .db-play:active { transform: scale(.95); }

:is(.cc, .db-trim) .db-use { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 84px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.06); color: #e4e4e7; font: 700 12.5px Inter, sans-serif; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .2s, color .2s; }
:is(.cc, .db-trim) .db-use:hover:not(:disabled) { background: rgba(var(--db), .16); color: #fff; }
:is(.cc, .db-trim) .db-use.on { background: rgba(var(--db), .14); color: rgb(var(--db)); box-shadow: inset 0 0 0 1px rgba(var(--db), .4); cursor: default; }
:is(.cc, .db-trim) .db-use:disabled { opacity: 1; }
:is(.cc, .db-trim) .db-use:disabled:not(.on) { opacity: .6; cursor: wait; }
:is(.cc, .db-trim) .db-use svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* VIP soundboard chime */
.cc .db-badge { padding: 2px 7px; border-radius: 6px; background: linear-gradient(135deg, #fde68a, #f59e0b); color: #1c1205; font: 900 9.5px Inter, sans-serif; font-style: normal; letter-spacing: .08em; }
.cc .db-vip { display: grid; justify-items: center; }
.cc .db-lock { display: grid; justify-items: center; gap: 8px; width: min(460px, 100%); padding: 26px 22px; border-radius: 18px; text-align: center; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--cc-line, rgba(255,255,255,.08)); }
.cc .db-lock-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(245,158,11,.12); color: #fbbf24; }
.cc .db-lock-ic svg { width: 22px; height: 22px; }
.cc .db-lock b { color: #fff; font: 800 16px Outfit, Inter, sans-serif; }
.cc .db-lock span { color: #a1a1aa; font: 500 13.5px/1.5 Inter, sans-serif; }
.cc .db-lock .nx-btn { margin-top: 6px; }

.cc .db-mine { display: flex; align-items: center; gap: 14px; width: min(620px, 100%); padding: 14px 16px; border-radius: 18px; background: #0a0a0c; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.07); }
.cc .db-mine.on { box-shadow: inset 0 0 0 2px rgb(var(--db)), 0 0 30px rgba(var(--db), .2); }
.cc .db-mine-tx { display: grid; flex: 1; min-width: 0; gap: 5px; text-align: left; }
.cc .db-mine-tx b { overflow: hidden; color: #fff; font: 800 15px Outfit, Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.cc .db-mine-tx small { color: #8a8a94; font: 500 12.5px Inter, sans-serif; }
.cc .db-mine-acts { display: flex; align-items: center; gap: 8px; }
.cc .db-pill { display: inline-flex; align-items: center; gap: 5px; justify-self: start; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: #a1a1aa; font: 700 11.5px Inter, sans-serif; }
.cc .db-pill svg { width: 12px; height: 12px; stroke-width: 2.6; }
.cc .db-pill.g { background: rgba(var(--db), .14); color: rgb(var(--db)); }
.cc .db-pill.a { background: rgba(245,158,11,.14); color: #fbbf24; }
.cc .db-x { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.05); color: #a1a1aa; cursor: pointer; }
.cc .db-x:hover { background: rgba(248,113,113,.14); color: #fca5a5; }
.cc .db-x svg { width: 15px; height: 15px; }
.cc .db-note { margin: 12px 0 14px; color: #8a8a94; font: 500 13px Inter, sans-serif; text-align: center; }

.cc .db-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.cc .db-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #a1a1aa; font: 700 12.5px Inter, sans-serif; cursor: pointer; }
.cc .db-tabs button svg { width: 15px; height: 15px; }
.cc .db-tabs button[aria-selected="true"] { background: #f4f4f5; color: #0b0b10; }
.cc .db-search { display: flex; align-items: center; gap: 10px; width: min(620px, 100%); height: 48px; margin-top: 14px; padding: 0 16px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #71717a; }
.cc .db-search:focus-within { box-shadow: inset 0 0 0 1.5px rgba(var(--db), .6); }
.cc .db-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #fff; font: 500 15px Inter, sans-serif; }
.cc .db-list { display: grid; gap: 8px; width: min(620px, 100%); margin-top: 12px; }
.cc .db-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); animation: ccIn .35s var(--cc-ease, ease) both; animation-delay: calc(min(var(--i), 12) * 25ms); }
.cc .db-row .db-play { width: 40px; height: 40px; }
.cc .db-row .db-play svg { width: 14px; height: 14px; }
.cc .db-row b { flex: 1; min-width: 0; overflow: hidden; color: #f4f4f5; font: 600 14px Inter, sans-serif; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.cc .db-msg { margin: 10px 0; color: #8a8a94; font: 500 13.5px/1.5 Inter, sans-serif; text-align: center; }
.cc .db-msg a { color: rgb(var(--db)); }

/* How to get one */
.cc .db-how { display: grid; justify-items: center; text-align: center; }
.cc .db-how p { max-width: 560px; margin: 8px 0 0; color: #a1a1aa; font: 500 13.5px/1.6 Inter, sans-serif; }
.cc .db-recipe { display: grid; gap: 4px; margin-bottom: 8px; }
.cc .db-recipe span { display: grid; place-items: center; width: 150px; height: 34px; border-radius: 9px; background: #16161a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); color: #e4e4e7; font: 700 12px Inter, sans-serif; }
.cc .db-recipe .n { color: #fcd34d; }
.cc .db-recipe .m { color: #d6b98c; }
.cc .db-recipe .r { color: #f87171; }

@media (max-width: 900px) {
  .cc .db { gap: 28px; }
  .cc .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cc .db-card { padding: 16px 10px 12px; }
  .cc .db-mine { flex-wrap: wrap; justify-content: center; text-align: center; }
  .cc .db-mine-tx { flex-basis: calc(100% - 70px); }
  .cc .db-mine-acts { flex-basis: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cc .db-card, .cc .db-row { animation: none; } }

/* Trimmer pop-up (on body, outside .cc) */
.db-trim { --db: 45, 212, 191; position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.66); backdrop-filter: blur(6px); animation: ccIn .25s ease both; }
.db-trim svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.db-trim-box { position: relative; display: grid; justify-items: center; gap: 14px; width: min(560px, 100%); padding: 26px 22px 20px; border-radius: 22px; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(var(--db), .08), transparent 60%), #0b0b0e; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.6); }
.db-trim-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: #a1a1aa; cursor: pointer; }
.db-trim-x svg { width: 15px; height: 15px; }
.db-trim-t { max-width: calc(100% - 50px); overflow: hidden; color: #fff; font: 800 17px Outfit, Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.db-trim-p { margin: -6px 0 0; color: #a1a1aa; font: 500 13.5px Inter, sans-serif; }
.db-trim-wave { position: relative; width: 100%; height: 86px; border-radius: 12px; background: #121216; touch-action: none; cursor: pointer; user-select: none; }
.db-trim-wave[hidden], .db-trim-row[hidden] { display: none; }
.db-trim-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.db-trim-sel { position: absolute; top: 0; bottom: 0; border-radius: 10px; background: rgba(var(--db), .2); box-shadow: inset 0 0 0 2px rgb(var(--db)); cursor: grab; }
.db-trim-sel:active { cursor: grabbing; }
.db-trim-sel .h { position: absolute; top: -4px; bottom: -4px; width: 18px; cursor: ew-resize; }
.db-trim-sel .h::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 34px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 2px rgb(var(--db)), 0 2px 8px rgba(0,0,0,.5); transform: translate(-50%, -50%); }
.db-trim-sel .h.a { left: -9px; }
.db-trim-sel .h.b { right: -9px; }
.db-trim-head { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; opacity: 0; pointer-events: none; transform: translateX(-1px); }
.db-trim-row { display: flex; align-items: center; gap: 12px; }
.db-trim-len { color: #d4d4d8; font: 600 13px var(--cc-mono, monospace); font-variant-numeric: tabular-nums; white-space: pre; }
.db-trim-acts { display: flex; gap: 10px; margin-top: 4px; }
.db-trim .db-trim-save { min-width: 160px; }
@media (max-width: 600px) { .db-trim-box { padding: 22px 14px 16px; } .db-trim-wave { height: 78px; } }