/**
 * mod_flipcountdown - split-flap countdown board styles
 *
 * Design: a mechanical departure-board / scoreboard aesthetic.
 * Charcoal cards, warm off-white numerals, a single amber signal
 * accent, and a physical top/bottom flap that rotates in 3D to
 * reveal each new digit - the same mechanism real split-flap
 * boards use (front face = old top half, rear face = new bottom
 * half, pre-rotated so it lands right-side up).
 */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap');

.fcd {
    --fcd-radius: 6px;
    --fcd-seam: rgba(0, 0, 0, 0.55);
    --fcd-shadow: rgba(0, 0, 0, 0.35);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif;
    text-align: center;
}

.fcd__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fcd-label, #9a9a9a);
}

.fcd__notice {
    margin: 0;
    padding: 0.75em 1em;
    border: 1px dashed var(--fcd-label, #9a9a9a);
    border-radius: var(--fcd-radius);
    color: var(--fcd-label, #9a9a9a);
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
}

.fcd__expired {
    margin: 0;
    font-size: 1.4em;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--fcd-accent, #e8862e);
}

.fcd__board {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.9em;
}

.fcd__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}

.fcd__digits {
    display: flex;
    gap: 0.18em;
}

.fcd__label {
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fcd-label, #9a9a9a);
}

.fcd__sep {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35em;
    align-self: center;
    margin-top: -1.4em;
}

.fcd__sep span {
    width: 0.14em;
    height: 0.14em;
    border-radius: 50%;
    background: var(--fcd-accent, #e8862e);
    opacity: 0.85;
}

/* ---- the flip card itself ---- */

.fcd__rotor {
    position: relative;
    width: 1.05em;
    height: 1.5em;
    font-size: 3.2rem;
    line-height: 1.5em;
    perspective: 4.5em;
}

.fcd__rotor-top,
.fcd__rotor-bottom,
.fcd__rotor-leaf-front,
.fcd__rotor-leaf-rear {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    background: var(--fcd-card, #1b1b1d);
    color: var(--fcd-digit, #f5f1e6);
    font-weight: 700;
    text-align: center;
}

.fcd__rotor-top,
.fcd__rotor-bottom {
    height: 50%;
}

.fcd__rotor-leaf-front,
.fcd__rotor-leaf-rear {
    height: 100%;
}

.fcd__rotor-top,
.fcd__rotor-leaf-front {
    top: 0;
    border-radius: var(--fcd-radius) var(--fcd-radius) 0 0;
    box-shadow: inset 0 -1px 0 var(--fcd-seam);
}

.fcd__rotor-bottom,
.fcd__rotor-leaf-rear {
    bottom: 0;
    border-radius: 0 0 var(--fcd-radius) var(--fcd-radius);
    box-shadow: inset 0 1px 0 var(--fcd-seam);
}

.fcd__rotor-top::after,
.fcd__rotor-bottom::after,
.fcd__rotor-leaf-front::after,
.fcd__rotor-leaf-rear::after {
    content: attr(data-value);
    position: absolute;
    left: 0;
    right: 0;
    height: 200%;
    line-height: 1.5em;
}

.fcd__rotor-top::after,
.fcd__rotor-leaf-front::after {
    top: 0;
}

.fcd__rotor-bottom::after,
.fcd__rotor-leaf-rear::after {
    top: -100%;
}

.fcd__rotor-leaf {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50%;
    z-index: 2;
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    transform: rotateX(0deg);
}

.fcd__rotor-leaf-front {
    backface-visibility: hidden;
}

.fcd__rotor-leaf-rear {
    backface-visibility: hidden;
    transform: rotateX(180deg);
}

.fcd__rotor-leaf.fcd-flip {
    transition: transform 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    transform: rotateX(-180deg);
}

.fcd__rotor::before {
    /* the mechanical seam / hinge line */
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    top: calc(50% - 1px);
    height: 2px;
    background: var(--fcd-seam);
    z-index: 3;
    pointer-events: none;
}

/* corner rivets - a small skeuomorphic detail nodding to the physical board */
.fcd__rotor::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--fcd-radius);
    box-shadow:
        0 0.06em 0 var(--fcd-shadow),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    pointer-events: none;
    z-index: 4;
}

/* ---- size variants ---- */

.fcd--small .fcd__rotor {
    font-size: 1.9rem;
}

.fcd--medium .fcd__rotor {
    font-size: 3.2rem;
}

.fcd--large .fcd__rotor {
    font-size: 4.6rem;
}

@media (max-width: 520px) {
    .fcd--large .fcd__rotor {
        font-size: 3rem;
    }

    .fcd--medium .fcd__rotor {
        font-size: 2.2rem;
    }

    .fcd__board {
        gap: 0.5em;
        flex-wrap: wrap;
    }
}

.fcd__sr-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .fcd__rotor-leaf,
    .fcd__rotor-leaf.fcd-flip {
        transition: none !important;
    }
}