/* U2: 太空渐变态 - Awwwards级深空紫罗兰 */
.board.u2-interface .record-visual-panel {
    background: linear-gradient(145deg, rgba(28, 25, 38, .95), rgba(20, 16, 28, .96));
    border-color: #403058;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(180, 150, 255, .04);
}
.board.u2-interface .record-visual-panel .marker-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    align-items: stretch;
    justify-content: start;
    gap: 10px;
    padding: 6px;
}
.board.u2-interface .record-visual-panel .marker-item {
    --u2-tint: 160, 120, 240;
    --u2-top: #36293f;
    --u2-bottom: #23192b;
    --u2-edge: #4f3a5f;
    --u2-ink-top: #f8f6fb;
    --u2-ink-bottom: #d8c5dd;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 118px;
    min-height: 118px;
    max-height: 118px;
    margin: 0;
    padding: 7px 6px 8px;
    border: 1px solid var(--u2-edge) !important;
    border-radius: 10px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .042), transparent 45%), linear-gradient(180deg, var(--u2-top), var(--u2-bottom)) !important;
    box-shadow: inset 0 1px 0 rgba(230, 200, 255, .045), 0 3px 9px rgba(0, 0, 0, .32);
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
    text-align: center;
    text-shadow: none;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    animation: none !important;
    transition: transform 160ms ease, border-color 160ms ease;
    cursor: pointer;
}
.board.u2-interface .record-visual-panel .marker-item::before,
.board.u2-interface .record-visual-panel .marker-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: -1;
}
.board.u2-interface .record-visual-panel .marker-item::before {
    top: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
}
.board.u2-interface .record-visual-panel .marker-item::after {
    bottom: 0;
    height: 28%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .12), transparent);
}
.board.u2-interface .record-visual-panel .marker-sub {
    --u2-tint: 120, 180, 240;
    --u2-top: #253545;
    --u2-bottom: #152028;
    --u2-edge: #3a5f6a;
}
.board.u2-interface .record-visual-panel .marker-other {
    --u2-tint: 240, 180, 120;
    --u2-top: #453828;
    --u2-bottom: #28221c;
    --u2-edge: #6a5038;
}
.board.u2-interface .record-visual-panel .marker-item:is(.marker-burst-hot, .marker-special-red) {
    --u2-top: #4a2d38;
    --u2-bottom: #2e1f28;
    --u2-edge: #c54d62;
    --u2-ink-top: #ffecf0;
    --u2-ink-bottom: #ffc0ce;
    box-shadow: inset 0 1px 0 rgba(255, 200, 215, .08), 0 5px 18px rgba(238, 53, 87, .24), 0 0 28px rgba(255, 90, 120, .11);
}
.board.u2-interface .record-visual-panel .marker-item.marker-wild {
    --u2-top: #1f4d3d;
    --u2-bottom: #142d24;
    --u2-edge: #3eb87d;
    --u2-ink-top: #effffa;
    --u2-ink-bottom: #b8fce0;
    box-shadow: inset 0 1px 0 rgba(150, 255, 220, .08), 0 5px 18px rgba(25, 201, 122, .18), 0 0 26px rgba(50, 230, 145, .09);
}
.board.u2-interface .record-visual-panel .marker-item.marker-burst-hot:not(.marker-wild) {
    --u2-edge: #ff7a8a;
    border-width: 2px !important;
    padding: 6px 5px 7px;
}
.board.u2-interface .record-visual-panel .marker-head { display: contents; }
.board.u2-interface .record-visual-panel .marker-hand-index { display: none; }
.board.u2-interface .record-visual-panel .marker-icon-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    flex: 0 0 22px;
    height: 22px;
    min-height: 22px;
    margin: 0 0 2px;
    padding: 0;
    gap: 3px;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1;
}
/* Interface 3 uses the same unboxed symbol markers as interface 1. */
.board.u2-interface .record-visual-panel .marker-inherit-hint { width: 13px; height: 13px; font-size: 9px; top: 8px; right: 4px; }
.board.u2-interface .record-visual-panel .marker-hint-inherit .marker-icon-top { padding-right: 14px; }
.board.u2-interface .record-visual-panel .marker-burst-hint { width: 13px; height: 13px; flex: 0 0 13px; font-size: 9px; }
.board.u2-interface .record-visual-panel .marker-suppression-dot { width: 9px; height: 9px; font-size: 6px; top: -4px; right: -4px; }
.board.u2-interface .record-visual-panel .marker-number {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: #e2e7f0 !important;
    background: linear-gradient(165deg, var(--u2-ink-top), var(--u2-ink-bottom));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
}
.board.u2-interface .record-visual-panel .marker-item:is(.marker-burst-hot, .marker-special-red) .marker-number {
    filter: drop-shadow(0 1px 5px rgba(255, 116, 152, .2));
}
.board.u2-interface .record-visual-panel .marker-item.marker-wild .marker-number {
    filter: drop-shadow(0 1px 5px rgba(86, 242, 183, .22));
}
.board.u2-interface .record-visual-panel .marker-number.marker-number-type { font-size: 26px; }
.board.u2-interface .record-visual-panel .marker-time {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
    margin: 3px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}
.board.u2-interface .record-visual-panel .marker-time span {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 5px;
    border: 1px solid rgba(var(--u2-tint), .24);
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(var(--u2-tint), .08), rgba(var(--u2-tint), .025)), rgba(4, 8, 13, .46);
    box-shadow: inset 0 1px 0 rgba(215, 232, 250, .03), 0 1px 2px rgba(0, 0, 0, .2);
    font-size: inherit;
    font-family: inherit;
    font-weight: 700;
    line-height: inherit;
    letter-spacing: -.02em;
    white-space: nowrap;
    text-shadow: none;
}
.board.u2-interface .record-visual-panel .theory-delta { min-width: 0; padding: 1px 4px; font-size: 11px; line-height: 16px; }
.board.u2-interface .record-visual-panel .marker-item.oval-shape { border-radius: 40% / 30%; border-style: dashed !important; }
.board.u2-interface .record-visual-panel .marker-yesterday-ghost { opacity: .7; border-style: dashed !important; }
.board.u2-interface .record-visual-panel .marker-item[aria-disabled="true"] { cursor: default; }
.board.u2-interface .record-visual-panel .marker-item:focus-visible { outline: 2px solid #d5b5fa; outline-offset: 3px; }
@media (hover: hover) {
    .board.u2-interface .record-visual-panel .marker-item:hover:not([aria-disabled="true"]) { transform: translateY(-2px); border-color: rgba(var(--u2-tint), .65) !important; }
    .board.u2-interface .record-visual-panel .marker-item.marker-burst-hot:not(.marker-wild):hover:not([aria-disabled="true"]) { border-color: #ff8594 !important; }
}
@media (max-width: 480px) {
    #app .board.u2-interface .record-visual-panel .marker-container .marker-icon-top {
        flex-basis: 28px;
        height: 28px !important;
        min-height: 28px !important;
        flex-wrap: wrap;
        align-content: center;
        gap: 0 2px !important;
    }
    #app .board.u2-interface .record-visual-panel .marker-hint-inherit .marker-icon-top { padding-right: 0; }
    #app .board.u2-interface .record-visual-panel .marker-inherit-hint { top: 2px; right: 2px; }
    .board.u2-interface .record-visual-panel .marker-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px !important; padding: 2px; }
    .board.u2-interface .record-visual-panel .marker-item { flex: none; width: 100% !important; min-width: 0; max-width: none; height: 110px !important; min-height: 110px !important; max-height: 110px !important; padding: 7px 4px !important; border-radius: 9px !important; }
    .board.u2-interface .record-visual-panel .marker-item.marker-burst-hot:not(.marker-wild) { padding: 6px 3px !important; }
    .board.u2-interface .record-visual-panel .marker-number { height: 36px; min-height: 36px; font-size: 36px; }
    .board.u2-interface .record-visual-panel .marker-number.marker-number-type { font-size: 22px; }
    .board.u2-interface .record-visual-panel .marker-time { font-size: 15px; line-height: 18px; min-height: 28px; }
    .board.u2-interface .record-visual-panel .marker-time span { padding: 4px; }
    .board.u2-interface .record-visual-panel .marker-item.oval-shape { border-radius: 40% / 30% !important; }
}
@media (max-width: 380px) {
    .board.u2-interface .record-visual-panel .marker-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .board.u2-interface .record-visual-panel .marker-item { transition: none; }
}
@media (forced-colors: active) {
    .board.u2-interface .record-visual-panel .marker-item { background: Canvas !important; border-color: ButtonText !important; box-shadow: none; }
    .board.u2-interface .record-visual-panel .marker-number { background: none; color: CanvasText !important; -webkit-text-fill-color: CanvasText; filter: none; }
}