@import "tailwindcss";

body {
    background: radial-gradient(circle at center, #1f2229 0%, #0d0f13 100%);
}

.solari-board {
    perspective: 1200px;
}

.split-flap-char {
    position: relative;
    width: 2.2rem;
    height: 3.4rem;
    background-color: #18181b; /* zinc-900 */
    border-radius: 4px;
    font-family: 'VT323', monospace;
    font-size: 2.8rem;
    color: #f4f4f5; /* zinc-100 */
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* The hinge line across the middle */
.split-flap-char::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transform: translateY(-50%);
    z-index: 10;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.split-flap-top,
.split-flap-bottom,
.split-flap-flap-top,
.split-flap-flap-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background-color: #18181b;
    color: inherit;
    border-radius: 4px;
}

/* Yellow Theme Variant */
.theme-yellow .split-flap-char,
.theme-yellow .split-flap-top,
.theme-yellow .split-flap-bottom,
.theme-yellow .split-flap-flap-top,
.theme-yellow .split-flap-flap-bottom,
.theme-yellow span {
    color: #ffcc00 !important;
}

.split-flap-top span,
.split-flap-flap-top span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.4rem;
    line-height: 3.4rem;
}

.split-flap-bottom span,
.split-flap-flap-bottom span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.4rem;
    line-height: 3.4rem;
}

.split-flap-top,
.split-flap-flap-top {
    top: 0;
    transform-origin: bottom center;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.split-flap-bottom,
.split-flap-flap-bottom {
    bottom: 0;
    transform-origin: top center;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.split-flap-flap-top,
.split-flap-flap-bottom {
    z-index: 5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.split-flap-flap-bottom {
    transform: rotateX(90deg); /* hidden initially */
}

/* Animation Classes */
.flipping .split-flap-flap-top {
    animation: flipTop 0.15s ease-in forwards;
}

.flipping .split-flap-flap-bottom {
    animation: flipBottom 0.15s ease-out 0.15s forwards;
}


@keyframes flipTop {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(-90deg); }
}

@keyframes flipBottom {
    0% { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}