/* Interface 5: optical bubble glass. Shared files own geometry and typography. */
@keyframes u6-waterlight {
    0%, 100% { opacity: .18; }
    50% { opacity: .26; }
}

@media screen {
    .board.u6-interface .record-visual-panel {
        --seq-bg: #03101d;
        --seq-ink: #c9dbe6;
        --seq-muted: #b7ccdb;
        --seq-line: #31536a;
        --seq-tool-bg: #0d2435;
        --seq-red: #e2a6b7;
        --seq-green: #9bd8b9;
        --seq-purple: #cbb8df;
        --seq-amber: #dfc08d;
        --seq-low: #aabeca;
        --seq-focus: #d3f6ff;
        --seq-readout: rgba(2, 15, 27, .78);
        background: var(--seq-bg) !important;
        border-color: #29485d !important;
        box-shadow: inset 0 1px 0 #a8e5ff24, 0 12px 32px #0007;
    }

    .board.u6-interface .record-visual-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: url("assets/sequence-bubble/bubble-backdrop.png") center top / cover no-repeat;
        opacity: .22;
        padding: 0;
        border: 0;
        mask: none;
        -webkit-mask: none;
        filter: none;
        pointer-events: none;
        z-index: 0;
    }

    .board.u6-interface .record-visual-panel::after { content: none; }

    .board.u6-interface .record-visual-panel .marker-item {
        --bubble-hue: 0deg;
        --bubble-light: 87, 202, 255;
        --bubble-brightness: .88;
        --bubble-saturation: .86;
        --card-edge: #76d8ff;
        --card-ink: #bdd6e3;
        --card-shadow: none;
        border: 1px solid transparent !important;
        border-radius: 23px;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        animation: none !important;
        transform: none;
        transition: transform .2s ease;
    }

    .board.u6-interface .record-visual-panel .marker-item.marker-main {
        --bubble-hue: 0deg;
        --bubble-light: 87, 202, 255;
        --card-edge: #76d8ff;
        --card-ink: #bdd6e3;
    }

    .board.u6-interface .record-visual-panel .marker-item.marker-sub {
        --bubble-hue: -35deg;
        --bubble-light: 84, 246, 190;
        --card-edge: #79efd3;
        --card-ink: #bddbcc;
    }

    .board.u6-interface .record-visual-panel .marker-item.marker-other {
        --bubble-hue: 177deg;
        --bubble-light: 255, 198, 105;
        --bubble-saturation: .72;
        --bubble-brightness: 1.02;
        --card-edge: #ffd090;
        --card-ink: #dfd3b2;
    }

    .board.u6-interface .record-visual-panel .marker-item:is(.marker-burst-hot, .marker-special-red) {
        --bubble-hue: 137deg;
        --bubble-light: 255, 116, 153;
        --bubble-saturation: .92;
        --card-edge: #ff97b6;
        --card-ink: #dfbeca;
    }

    .board.u6-interface .record-visual-panel .marker-item.marker-wild {
        --bubble-hue: -44deg;
        --bubble-light: 112, 255, 187;
        --bubble-saturation: .9;
        --card-edge: #9dffca;
        --card-ink: #b8d9c5;
    }

    /* Clear glass: a quiet center and a concentrated upper-left reflection. */
    .board.u6-interface .record-visual-panel .marker-item::before {
        content: "";
        position: absolute;
        inset: -4px -3px;
        width: auto;
        height: auto;
        border: 0;
        border-radius: inherit;
        padding: 0;
        background: url("assets/sequence-bubble/bubble-blue-clear-v3.png") center / 100% 100% no-repeat;
        mask: none;
        -webkit-mask: none;
        filter: hue-rotate(var(--bubble-hue)) saturate(var(--bubble-saturation)) brightness(var(--bubble-brightness)) !important;
        opacity: 1;
        animation: none !important;
        pointer-events: none;
        z-index: 0;
        transition: filter .24s ease;
    }

    .board.u6-interface .record-visual-panel .marker-item::after { content: none; }

    .board.u6-interface .record-visual-panel .marker-number {
        color: var(--card-ink) !important;
        -webkit-text-fill-color: currentColor !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .32) !important;
    }

    .board.u6-interface .record-visual-panel .marker-time {
        width: 94% !important;
        border-radius: 999px;
        border: 1px solid transparent;
        background: rgba(2, 12, 23, .5) !important;
        box-shadow: inset 0 1px 3px #0005, 0 2px 6px #0005;
    }

    .board.u6-interface .record-visual-panel .marker-time span {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        transition: none;
    }

    .board.u6-interface .record-visual-panel :is(.marker-status-text, .marker-wild-word, .marker-rush-text, .marker-record-burst-icon) {
        background: rgba(1, 13, 25, .46) !important;
        border-color: rgba(var(--bubble-light), .42) !important;
        border-radius: 6px;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none;
        text-shadow: 0 1px 2px #0008 !important;
    }

    .board.u6-interface .record-visual-panel .marker-item.oval-shape {
        border: 2px dashed var(--card-edge) !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        outline: none;
        box-shadow: 0 0 10px rgba(var(--bubble-light), .48) !important;
    }

    .board.u6-interface .record-visual-panel .marker-item.oval-shape::before {
        opacity: .67;
    }

    .board.u6-interface .record-visual-panel .marker-item.marker-latest {
        outline: 1px solid #e0f8ff;
        outline-offset: 3px;
    }

    .board.u6-interface .record-visual-panel .marker-item:focus-visible {
        outline: 2px solid #fff !important;
        outline-offset: 3px;
    }

    .board.u6-interface .record-visual-panel .marker-yesterday-ghost {
        opacity: .64 !important;
        border: 1px dashed var(--card-edge) !important;
    }
}

@media screen and (hover: hover) and (pointer: fine) {
    .board.u6-interface .record-visual-panel .marker-item:hover:not([aria-disabled="true"]) {
        --bubble-brightness: 1.03;
        border-color: transparent !important;
    }
    .board.u6-interface .record-visual-panel .marker-item.oval-shape:hover:not([aria-disabled="true"]) {
        border-color: #e8ffff !important;
    }
}

@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .board.u6-interface .record-visual-panel .marker-item:hover:not([aria-disabled="true"]) { transform: translateY(-2px); }
}

@media screen and (prefers-reduced-motion: no-preference) {
    .board.u6-interface .record-visual-panel::before { animation: u6-waterlight 12s ease-in-out infinite; }
}

@media (max-width: 480px) {
    .board.u6-interface .record-visual-panel .marker-item { border-radius: 16px; }
    .board.u6-interface .record-visual-panel .marker-item::before { inset: -3px -2px; }
}

@media (prefers-reduced-motion: reduce) {
    .board.u6-interface .record-visual-panel::before,
    .board.u6-interface .record-visual-panel .marker-item,
    .board.u6-interface .record-visual-panel .marker-item::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

@media (forced-colors: active) {
    .board.u6-interface .record-visual-panel { background: Canvas !important; color: CanvasText !important; box-shadow: none; }
    .board.u6-interface .record-visual-panel::before,
    .board.u6-interface .record-visual-panel .marker-item::before { display: none; }
    .board.u6-interface .record-visual-panel .marker-item { background: Canvas !important; color: CanvasText !important; border: 1px solid CanvasText !important; box-shadow: none !important; }
    .board.u6-interface .record-visual-panel :is(.marker-number, .marker-time, .marker-time span, .marker-status-text, .marker-rush-text, .marker-wild-word, .marker-record-burst-icon) { background: Canvas !important; color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; border-color: CanvasText !important; text-shadow: none !important; box-shadow: none !important; }
    .board.u6-interface .record-visual-panel .marker-time[data-skill-tone] span { color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; }
}

@media print {
    .board.u6-interface .record-visual-panel { background: white !important; color: black !important; box-shadow: none; }
    .board.u6-interface .record-visual-panel::before,
    .board.u6-interface .record-visual-panel .marker-item::before { display: none; }
    .board.u6-interface .record-visual-panel .marker-item { background: white !important; border: 1px solid black !important; box-shadow: none !important; }
    .board.u6-interface .record-visual-panel :is(.marker-number, .marker-time, .marker-time span, .marker-status-text, .marker-rush-text, .marker-wild-word, .marker-record-burst-icon) { background: none !important; color: black !important; -webkit-text-fill-color: black !important; text-shadow: none !important; box-shadow: none !important; }
    .board.u6-interface .record-visual-panel .marker-time[data-skill-tone] span { color: black !important; -webkit-text-fill-color: black !important; }
}