/* Hallmark · component: engraved circular mechanism · tone: refined oxblood steampunk · palette: RA0 root tokens · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass · mobile: pass */

.mb-round {
    --mb-case: color-mix(in srgb, var(--accent-color) 78%, var(--primary-color));
    --mb-case-deep: color-mix(in srgb, var(--card-bg-color) 68%, var(--primary-color));
    --mb-case-edge: color-mix(in srgb, var(--primary-color) 74%, var(--card-bg-color));
    --mb-cavity: color-mix(in srgb, var(--container-bg-color) 62%, var(--card-bg-color));
    --mb-metal: color-mix(in srgb, var(--secondary-color) 62%, var(--primary-color));
    --mb-metal-light: color-mix(in srgb, var(--secondary-color) 88%, var(--accent-color));
    --mb-metal-dark: color-mix(in srgb, var(--primary-color) 70%, var(--card-bg-color));
    --mb-ink: var(--secondary-color);
    --mb-frost: color-mix(in srgb, var(--card-bg-color) 80%, transparent);
    --mb-shadow: color-mix(in srgb, var(--container-bg-color) 72%, transparent);
    position: fixed;
    right: var(--spacing-lg);
    bottom: var(--spacing-lg);
    z-index: 9999;
    width: 220px;
    height: 220px;
    color: var(--mb-ink);
    font-family: var(--content-font-family);
    opacity: 0;
    pointer-events: auto;
    transform: translateY(48px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.mb-round.show { opacity: 1; transform: translateY(0); }
.mb-round *, .mb-round *::before, .mb-round *::after { box-sizing: border-box; }
.mb-round button, .mb-round input { font: inherit; }
.mb-round button:focus-visible, .mb-round input:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; }
.mb-round button:disabled { opacity: .38; cursor: not-allowed; }
.mb-round .player-content { position: relative; width: 100%; height: 100%; }

.mb-round__case { position: relative; width: 220px; height: 220px; overflow: hidden; border: 2px solid var(--mb-case-edge); border-radius: 50%; background: radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--secondary-color) 17%, transparent), transparent 31%), linear-gradient(145deg, var(--mb-case), var(--primary-color) 54%, var(--mb-case-deep)); color: var(--secondary-color); box-shadow: inset 0 1px color-mix(in srgb, var(--secondary-color) 28%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 48%, var(--card-bg-color)), 4px 5px 0 var(--mb-shadow); }
.mb-round__case::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--secondary-color) 18%, transparent); border-radius: inherit; background: linear-gradient(118deg, color-mix(in srgb, var(--secondary-color) 8%, transparent), transparent 27% 72%, color-mix(in srgb, var(--container-bg-color) 18%, transparent)); pointer-events: none; }

.mb-round__window { position: absolute; top: 19px; left: 31px; z-index: 3; width: 158px; height: 119px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--secondary-color) 30%, var(--mb-metal-dark)); border-radius: 80px 80px 6px 6px; background: linear-gradient(145deg, color-mix(in srgb, var(--secondary-color) 8%, transparent), transparent 34% 73%, color-mix(in srgb, var(--primary-color) 15%, transparent)), color-mix(in srgb, var(--mb-cavity) 88%, transparent); box-shadow: inset 0 1px color-mix(in srgb, var(--secondary-color) 18%, transparent), inset 0 -18px 28px color-mix(in srgb, var(--container-bg-color) 42%, transparent); backdrop-filter: blur(2px) saturate(1.08); }
.mb-round__window::after { content: ""; position: absolute; inset: 1px; z-index: 10; border-radius: inherit; background: linear-gradient(112deg, color-mix(in srgb, var(--secondary-color) 12%, transparent), transparent 24% 76%, color-mix(in srgb, var(--accent-color) 7%, transparent)); pointer-events: none; }

.mb-round__settings { position: absolute; top: 99px; left: 38px; z-index: 160; display: flex; align-items: center; gap: 4px; }
.mb-round__settings-trigger { position: relative; z-index: 2; display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 48%, var(--mb-metal-dark)); border-radius: 50%; background: radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--secondary-color) 16%, transparent), transparent 34%), var(--accent-color); color: var(--mb-metal-light); box-shadow: inset 0 1px color-mix(in srgb, var(--secondary-color) 18%, transparent), inset 0 -4px 7px color-mix(in srgb, var(--card-bg-color) 32%, transparent), 0 1px 3px var(--mb-shadow); cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); }
.mb-round__settings-trigger i { font-size: 11px; line-height: 1; transition: transform var(--transition-base); }
.mb-round__settings-trigger.is-open i { transform: rotate(46deg); }
.mb-round__settings-trigger:active { transform: scale(.94); }
.mb-round__settings-panel { display: flex; align-items: center; width: 88px; height: 30px; padding: 1px 2px; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 28%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--mb-cavity) 84%, transparent); box-shadow: inset 0 1px color-mix(in srgb, var(--secondary-color) 12%, transparent), 0 3px 8px var(--mb-shadow); opacity: 0; pointer-events: none; transform: translateX(-7px) scale(.88); transform-origin: left center; transition: opacity var(--transition-fast), transform var(--transition-base); backdrop-filter: blur(7px) saturate(1.08); }
.mb-round__settings-panel.is-open { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.mb-round__settings-panel .mb-control { flex: 0 0 27px; width: 27px; height: 27px; color: var(--content-font-color); }
.mb-round__settings-panel .mb-control i { font-size: 8px; }
.mb-round__settings-panel .mb-control.active { color: var(--mb-metal-light); }

.mb-transfer-gear { position: absolute; top: 41px; left: 61px; z-index: 4; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 64%, var(--mb-metal-dark)); border-radius: 50%; background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--secondary-color) 46%, transparent) 0 3%, transparent 18%), repeating-conic-gradient(from 3deg, var(--mb-metal) 0 4deg, var(--mb-metal-dark) 4deg 9deg); box-shadow: inset 0 0 7px color-mix(in srgb, var(--container-bg-color) 45%, transparent), 0 1px 2px var(--mb-shadow); transform: scale(1.3); }
.mb-transfer-gear i { position: absolute; inset: 29%; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 72%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--mb-cavity) 78%, transparent); }
.mb-transfer-gear b { position: absolute; top: calc(50% - .5px); left: 14%; width: 72%; height: 1px; background: color-mix(in srgb, var(--mb-metal-light) 70%, transparent); }

.mb-reference-drum { position: absolute; top: 22px; right: 8px; z-index: 3; width: 79px; height: 37px; overflow: hidden; border: 1px solid var(--mb-metal-dark); border-radius: 18px 5px 5px 18px; background: linear-gradient(180deg, var(--mb-metal-dark), var(--mb-metal-light) 34%, var(--mb-metal) 60%, var(--mb-metal-dark)); box-shadow: inset 5px 0 color-mix(in srgb, var(--mb-metal-light) 72%, transparent), inset -5px 0 var(--mb-metal-dark), 0 2px 4px var(--mb-shadow); opacity: .9; }
.mb-drum-axle { position: absolute; top: 50%; width: 10px; height: 3px; background: var(--mb-metal); transform: translateY(-50%); }.mb-drum-axle--left { right: 100%; }.mb-drum-axle--right { left: 100%; }
.mb-reference-drum__pins { display: grid; grid-template-columns: repeat(5, 3px); grid-template-rows: repeat(3, 3px); place-content: space-evenly; width: 100%; height: 100%; padding-inline: 10px; }
.mb-reference-drum__pins i { width: 3px; height: 3px; border-radius: 50%; background: var(--mb-metal-light); box-shadow: 0 1px 1px var(--mb-metal-dark); }.mb-reference-drum__pins i:nth-child(3n) { transform: translateY(-1px); }.mb-reference-drum__pins i:nth-child(4n) { transform: translateX(1px); }

.mb-reference-comb { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: flex-start; gap: 3px; width: 75px; height: 39px; padding: 6px 5px 0; border-top: 2px solid color-mix(in srgb, var(--mb-metal-light) 66%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--card-bg-color) 88%, transparent), color-mix(in srgb, var(--primary-color) 28%, transparent)); box-shadow: inset 0 1px color-mix(in srgb, var(--secondary-color) 14%, transparent); }
.mb-reference-comb i { flex: 0 0 1px; width: 1px; height: 26px; background: linear-gradient(90deg, var(--content-font-color), var(--secondary-color)); opacity: .76; transform-origin: top; }.mb-reference-comb i:nth-of-type(2n) { height: 31px; opacity: .92; }

.mb-balance { position: absolute; top: 23px; left: 40px; z-index: 140; width: 42px; height: 68px; filter: drop-shadow(1px 2px 1px var(--card-bg-color)); pointer-events: none; transform: rotate(-6deg); transform-origin: 21px 59px; }
.mb-balance__wheel { position: absolute; top: 0; left: 4px; z-index: 2; width: 34px; height: 34px; border: 2px solid var(--mb-metal-light); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mb-cavity) 88%, transparent) 0 34%, color-mix(in srgb, var(--mb-metal-dark) 82%, transparent) 36% 40%, transparent 42%), conic-gradient(from 16deg, color-mix(in srgb, var(--secondary-color) 12%, transparent), transparent 22% 47%, color-mix(in srgb, var(--mb-metal-light) 20%, transparent) 52% 61%, transparent 66%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mb-metal-dark) 76%, transparent), inset 0 1px color-mix(in srgb, var(--secondary-color) 40%, transparent), 0 1px 2px var(--mb-shadow); transform-origin: center; }
.mb-balance__wheel::before { content: ""; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 44%, transparent); border-radius: 50%; }
.mb-balance__wheel > i { position: absolute; top: calc(50% - 1px); left: 50%; width: 12px; height: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--mb-metal-light), var(--mb-metal-dark)); box-shadow: 0 1px color-mix(in srgb, var(--secondary-color) 15%, transparent); transform-origin: 0 50%; }
.mb-balance__wheel > i::after { content: ""; position: absolute; top: -2px; right: -2px; width: 5px; height: 6px; border: 1px solid var(--mb-metal-dark); border-radius: 2px; background: linear-gradient(135deg, var(--mb-metal-light), var(--mb-metal)); }
.mb-balance__wheel > i:nth-child(1) { width: 13px; transform: rotate(-9deg); }
.mb-balance__wheel > i:nth-child(2) { width: 11px; transform: rotate(116deg); }
.mb-balance__wheel > i:nth-child(3) { width: 12px; transform: rotate(231deg); }
.mb-balance__hub { position: absolute; top: 50%; left: 50%; z-index: 3; width: 9px; height: 9px; border: 1px solid var(--mb-metal-dark); border-radius: 50%; background: radial-gradient(circle at 36% 30%, var(--secondary-color) 0 12%, var(--mb-metal-light) 15% 34%, var(--mb-metal) 38% 66%, var(--mb-metal-dark) 70%); box-shadow: 0 1px 2px var(--mb-shadow); transform: translate(-50%, -50%); }
.mb-balance__bridge { position: absolute; top: 28px; left: 20px; width: 2px; height: 30px; border-radius: 2px; background: linear-gradient(90deg, var(--mb-metal-dark), var(--mb-metal-light), var(--mb-metal)); box-shadow: 1px 0 var(--mb-shadow); }
.mb-balance__pivot { position: absolute; bottom: 0; left: 14px; width: 14px; height: 14px; border: 1px solid var(--mb-metal-dark); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--secondary-color) 0 10%, var(--mb-metal-light) 12% 25%, var(--mb-metal) 28% 61%, var(--mb-metal-dark) 64%); box-shadow: 0 1px 2px var(--mb-shadow); }
.mb-round__minimize { position: absolute; top: 35px; right: 31px; z-index: 150; display: grid; place-items: center; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--secondary-color); text-shadow: 0 1px 1px var(--card-bg-color); cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); }.mb-round__minimize i { font-size: 8px; }

.mb-round__faceplate { position: absolute; right: 22px; bottom: 22px; left: 22px; z-index: 60; display: grid; grid-template-rows: 29px 26px; align-items: center; min-height: 55px; color: var(--secondary-color); text-shadow: 0 1px 1px var(--card-bg-color); }
.mb-round__faceplate::before { content: ""; position: absolute; top: 0; right: 12px; left: 12px; height: 1px; background: color-mix(in srgb, var(--primary-color) 42%, transparent); }
.mb-transport { display: flex; align-items: center; justify-content: center; gap: 2px; transform: translateY(4px); }
.mb-round__list { position: absolute; top: 3px; right: 11px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--secondary-color); cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); }
.mb-round__list i { font-size: 9px; line-height: 1; }
.mb-round__list:active { transform: scale(.94); }.mb-round__list.active { color: var(--mb-metal-light); }
.mb-control { position: relative; display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--secondary-color); cursor: pointer; transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast); }
.mb-control i { font-size: 9px; line-height: 1; }.mb-control--play i { font-size: 10px; }
.mb-control:active { transform: scale(.94); }.mb-control:disabled { opacity: .38; cursor: not-allowed; }.mb-control.active { color: var(--mb-metal-light); }
.mb-round .repeat-one-badge { position: absolute; top: 1px; right: 1px; font-size: 7px; line-height: 1; }
.mb-track { justify-self: center; width: 100px; max-width: 100px; min-width: 0; overflow: hidden; padding: 0; color: var(--secondary-color); font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.mb-round .playlist-container { position: absolute; right: calc(100% + 12px); bottom: 10px; z-index: 170; width: 170px; max-height: 132px; overflow-y: auto; padding: 7px; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 38%, transparent); border-radius: 8px; background: var(--mb-frost); color: var(--content-font-color); box-shadow: 5px 7px 0 color-mix(in srgb, var(--container-bg-color) 44%, transparent); backdrop-filter: blur(12px); }
.mb-round .playlist { margin: 0; padding: 0; list-style: none; }.mb-round .playlist li { overflow: hidden; padding: 6px 7px; border-radius: 4px; color: var(--content-font-color); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }.mb-round .playlist li:hover { color: var(--secondary-color); }.mb-round .playlist li.current { background: color-mix(in srgb, var(--primary-color) 78%, transparent); color: var(--secondary-color); }
.mb-round .volume-control { position: relative; flex: 0 0 27px; width: 27px; height: 27px; }.mb-round .volume-popup { position: absolute; right: -2px; bottom: calc(100% + 7px); z-index: 190; display: none; width: 112px; padding: 8px; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 36%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--mb-cavity) 92%, transparent); box-shadow: 2px 3px 7px var(--mb-shadow); backdrop-filter: blur(10px); }.mb-round .volume-popup.show { display: block; }.mb-round .volume-slider { display: block; width: 96px; max-width: none; margin: 0; accent-color: var(--accent-color); cursor: pointer; }

.mb-round.playing .mb-balance__wheel { animation: mb-balance-oscillate 1.45s cubic-bezier(.45, .05, .55, .95) infinite alternate; }.mb-round.playing .mb-transfer-gear { animation: mb-round-gear 6s linear infinite; }.mb-round.playing .mb-reference-drum__pins { animation: mb-drum-roll 1.25s ease-in-out infinite alternate; }.mb-round.playing .mb-reference-comb i:nth-of-type(3n + 1) { animation: mb-tine 420ms ease-in-out infinite alternate; }

.mb-round.minimized { width: 48px; height: 48px; border: 1px solid var(--mb-case-edge); border-radius: 50%; background: var(--mb-case); box-shadow: 3px 4px 0 var(--mb-shadow); cursor: pointer; }.mb-round.minimized .player-content { display: none; }.mb-round .minimized-overlay { display: none; }.mb-round.minimized .minimized-overlay { position: absolute; inset: 0; z-index: 3; display: block; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }.mb-round.minimized::before { content: ""; position: absolute; inset: 12px; border: 3px dotted var(--mb-metal-light); border-radius: 50%; animation: mb-spin 5s linear infinite; }

@media (hover:hover) and (pointer:fine) { .mb-round button:hover:not(:disabled) { color: var(--mb-metal-light); }.mb-round__list:hover { transform: scale(1.08); }.mb-round__settings-trigger:hover { transform: scale(1.04); }.mb-round.minimized:hover { transform: scale(1.04); } }
@media (max-width: 520px) { .mb-round { right: var(--spacing-md); bottom: var(--spacing-md); }.mb-round .playlist-container { right: 0; bottom: calc(100% + 10px); } }
@media (prefers-reduced-motion: reduce) { .mb-round, .mb-round *, .mb-round *::before, .mb-round *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }

@keyframes mb-spin { to { transform: rotate(360deg); } }
@keyframes mb-round-gear { from { transform: scale(1.3) rotate(0); } to { transform: scale(1.3) rotate(-360deg); } }
@keyframes mb-balance-oscillate { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes mb-drum-roll { to { transform: translateX(8px); } }
@keyframes mb-tine { to { transform: scaleY(.72); } }