/* Interface 2: use interface 1's existing base appearance.
   Only the framed game markers retain the former interface-2 presentation.
   No duplicate panel/card/font theme: main.css remains the shared source. */
.board.u3-interface .record-visual-panel .marker-head { display: contents; }
.board.u3-interface .record-visual-panel .marker-hand-index { display: none; }
.board.u3-interface .record-visual-panel .marker-icon-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    height: 22px;
    min-height: 22px;
    margin: 0 0 2px;
    padding: 0;
    gap: 3px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1;
}
/* Interface 2 uses framed status words; prediction lamps keep their original icons. */
.board.u3-interface .record-visual-panel .marker-icon-top :is(.marker-status-text, .marker-wild-word, .marker-record-burst-icon, .marker-rush-text) {
    --u3-badge-tint: 170, 200, 235;
    position: relative;
    inset: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 3px;
    border: 1px solid rgba(var(--u3-badge-tint), .65);
    border-radius: 5px;
    color: rgb(var(--u3-badge-tint)) !important;
    background: rgba(var(--u3-badge-tint), .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    font: 700 12px/1 "Segoe UI", "Microsoft YaHei", sans-serif;
    white-space: nowrap;
    text-shadow: none;
}
.board.u3-interface .record-visual-panel .marker-hint-inherit .marker-icon-top { padding-right: 14px; }
.board.u3-interface .record-visual-panel .marker-icon-top :is(.marker-wild-word, .marker-status-wild) { --u3-badge-tint: 140, 255, 140; }
.board.u3-interface .record-visual-panel .marker-icon-top .marker-record-burst-big { --u3-badge-tint: 255, 146, 160; }
.board.u3-interface .record-visual-panel .marker-icon-top .marker-record-burst-small { --u3-badge-tint: 255, 218, 116; }
.board.u3-interface .record-visual-panel .marker-icon-top .marker-status-lock { --u3-badge-tint: 255, 180, 108; }
.board.u3-interface .record-visual-panel .marker-icon-top .marker-rush-text { --u3-badge-tint: 255, 170, 143; }
.board.u3-interface .record-visual-panel .marker-icon-top:has(> :nth-child(3)) { gap: 2px; }
.board.u3-interface .record-visual-panel .marker-icon-top:has(> :nth-child(3)) > :is(.marker-status-text, .marker-wild-word, .marker-record-burst-icon, .marker-rush-text) {
    min-width: 18px;
    padding: 0 1px;
    font-size: 11px;
}
.board.u3-interface .record-visual-panel .marker-burst-hint { width: 16px; height: 16px; flex: 0 0 16px; font-size: 12px; }
.board.u3-interface .record-visual-panel .marker-inherit-hint { width: 13px; height: 13px; font-size: 9px; top: 8px; right: 4px; }
.board.u3-interface .record-visual-panel .marker-suppression-dot { width: 9px; height: 9px; font-size: 6px; top: -4px; right: -4px; }
.board.u3-interface .record-visual-panel .theory-delta { min-width: 0; padding: 1px 4px; font-size: 11px; line-height: 16px; }

.board.u3-interface .record-visual-panel .marker-item.oval-shape { border-radius: 40% / 30%; border-style: dashed !important; }
.board.u3-interface .record-visual-panel .marker-yesterday-ghost { opacity: .7; border-style: dashed !important; }
.board.u3-interface .record-visual-panel .marker-item[aria-disabled="true"] { cursor: default; }
.board.u3-interface .record-visual-panel .marker-item:focus-visible { outline: 2px solid #b5d5fa; outline-offset: 3px; }

/* Keep marker glyph fallback independent of the inherited card font. */
.board.u3-interface .record-visual-panel :is(.marker-icon-top, .marker-inherit-hint, .theory-delta) {
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

@media (max-width: 480px) {
    /* The original phone cards inherit the shared UI font; framed words keep
       their own existing font shorthand. Preserve that marker fallback too. */
    .board.u3-interface .record-visual-panel :is(.marker-icon-top, .marker-inherit-hint, .theory-delta) { font-family: inherit; }
    #app .board.u3-interface .record-visual-panel .marker-container .marker-icon-top {
        height: 28px !important;
        min-height: 28px !important;
        flex-wrap: wrap;
        align-content: center;
        gap: 0 2px !important;
    }
    #app .board.u3-interface .record-visual-panel .marker-container .marker-icon-top :is(.marker-status-text, .marker-wild-word, .marker-record-burst-icon, .marker-rush-text) {
        min-width: 16px;
        height: 14px !important;
        padding: 0 1px !important;
        border-radius: 3px;
        font-size: 10px !important;
        line-height: 12px !important;
    }
    .board.u3-interface .record-visual-panel .marker-burst-hint { width: 14px; height: 14px; flex-basis: 14px; font-size: 10px; }

    .board.u3-interface .record-visual-panel .marker-item.oval-shape { border-radius: 40% / 30% !important; }
}

@media (prefers-reduced-motion: reduce) {
    .board.u3-interface .record-visual-panel .marker-item { transition: none; }
}

/* Extra contrast is glyph-only: preserve dark surfaces and semantic colors.
   The full card path beats legacy red/wild brightness rules without !important
   or a filter on a card/container, which would alter the shared glow layers. */
@media screen and (forced-colors: none) {
    #app .board.u3-interface[data-sequence-interface="2"] .record-visual-panel .marker-container .marker-item .marker-number {
        filter: brightness(1.28);
        -webkit-text-fill-color: color-mix(in srgb, currentColor 90%, white);
    }
    #app .board.u3-interface[data-sequence-interface="2"] .record-visual-panel .marker-time > span {
        -webkit-text-fill-color: color-mix(in srgb, currentColor 70%, white) !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .8), 0 0 6px color-mix(in srgb, currentColor 35%, transparent);
        opacity: 1 !important;
    }
}