/* Interface 5 shares interface 6 markers, typography and geometry.
   Only the requested card/skill color exceptions and readable fallbacks remain. */
@media screen and (forced-colors: none) {
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item {
        box-shadow: none !important;
    }
    /* Old clarity rules still address interface 5 by ID; suppress their glass. */
    #app .board[data-sequence-interface="5"] .record-visual-panel::before,
    #app .board[data-sequence-interface="5"] .record-visual-panel::after,
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item::before,
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item::after {
        content: none !important;
        display: none !important;
        background: none !important;
        animation: none !important;
    }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item.oval-shape {
        box-shadow: none !important;
    }
    /* In the shared theme a lock has marker-special-red. It is not a burst. */
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item.marker-main.marker-special-red[data-u5-surface="normal"]:not(.oval-shape) {
        background: #2a4a6a !important;
        border-color: #6f9fda !important;
    }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item.marker-sub.marker-special-red[data-u5-surface="normal"]:not(.oval-shape) {
        background: #3a6a3a !important;
        border-color: #9fb087 !important;
    }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item.marker-other.marker-special-red[data-u5-surface="normal"]:not(.oval-shape) {
        background: #8a5a3a !important;
        border-color: #f59e0b !important;
    }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item.marker-special-red[data-u5-surface="normal"].oval-shape {
        border-color: #f59e0b !important;
    }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item.marker-special-red[data-u5-surface="normal"] .marker-number-main { color: #7fb4ff !important; }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item.marker-special-red[data-u5-surface="normal"] .marker-number-sub { color: #8cff8c !important; }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item.marker-special-red[data-u5-surface="normal"] .marker-number-other { color: #ffb347 !important; }
    /* Non-wild bursts use interface 6's translucent red; wild cards keep its green/oval surface. */
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item[data-u5-surface="burst"]:not(.marker-wild) {
        background: rgba(255, 80, 80, .2) !important;
        border-color: #ff6a6a !important;
    }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-time[data-u5-skill="high"] > span,
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item.marker-wild[data-u5-surface="burst"] .marker-time > span {
        color: #ff7373 !important;
        -webkit-text-fill-color: currentColor !important;
    }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item:focus-visible {
        outline: 2px solid #ffffff !important;
        outline-offset: 3px;
    }
}
@media screen and (forced-colors: none) and (max-width: 480px) {
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item.marker-latest {
        box-shadow: 0 0 0 2px rgba(98, 221, 255, .92), 0 0 12px rgba(98, 221, 255, .28) !important;
    }
}
/* Preserve the original interface 5 readable fallbacks after retiring u6 CSS. */
@media (forced-colors: active) {
    #app .board[data-sequence-interface="5"] .record-visual-panel { background: Canvas !important; color: CanvasText !important; box-shadow: none; }
    #app .board[data-sequence-interface="5"] .record-visual-panel::before,
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item::before { display: none; }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item { background: Canvas !important; color: CanvasText !important; border: 1px solid CanvasText !important; box-shadow: none !important; }
    #app .board[data-sequence-interface="5"] .record-visual-panel :is(.marker-number, .marker-time, .marker-time span, .marker-status-text, .marker-rush-text, .marker-wild-word, .marker-record-burst-icon, .marker-inherit-hint, .theory-delta) { background: Canvas !important; color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; border-color: CanvasText !important; text-shadow: none !important; box-shadow: none !important; }
}
@media print {
    #app .board[data-sequence-interface="5"] .record-visual-panel { background: white !important; color: black !important; box-shadow: none; }
    #app .board[data-sequence-interface="5"] .record-visual-panel::before,
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item::before { display: none; }
    #app .board[data-sequence-interface="5"] .record-visual-panel .marker-item { background: white !important; border: 1px solid black !important; box-shadow: none !important; }
    #app .board[data-sequence-interface="5"] .record-visual-panel :is(.marker-number, .marker-time, .marker-time span, .marker-status-text, .marker-rush-text, .marker-wild-word, .marker-record-burst-icon, .marker-inherit-hint, .theory-delta) { background: none !important; color: black !important; -webkit-text-fill-color: black !important; text-shadow: none !important; box-shadow: none !important; }
}