/* ==========================================================================
   Split Flap Countdown - Premium Styling
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@700&family=Outfit:wght@300;400;600;800&display=swap');

:root {
  --bg-color: #0f0f12;
  --panel-bg: rgba(20, 20, 25, 0.85);
  --flap-bg-top: #1b1b1f;
  --flap-bg-bottom: #16161a;
  --flap-border: #0a0a0c;
  --flap-text: #f3f3f7;
  --accent-color: #ff6b6b;
  --label-color: #8e8e9c;
  --font-flap: 'Courier Prime', 'Courier New', monospace;
  --font-ui: 'Outfit', sans-serif;
  
  /* Responsive card sizing */
  --card-width: clamp(14px, 4.2vw, 65px);
  --card-height: calc(var(--card-width) * 1.46);
  --half-height: calc(var(--card-height) / 2);
  --card-font-size: calc(var(--card-width) * 1.15);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-ui);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  color: #ffffff;
  transition: background 0.8s ease;
  background: var(--bg-color);
}

/* Background Presets */
body.dark-brushed {
  background: radial-gradient(circle at center, #1b1b22 0%, #0a0a0d 100%);
  position: relative;
}
body.dark-brushed::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.03;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 2px);
}

body.industrial-wall {
  background: linear-gradient(135deg, #2e2f35 0%, #151618 100%);
}

body.cozy-ambient {
  background: radial-gradient(circle at center, #241411 0%, #0c0706 100%);
}

body.retro-terminal {
  background: radial-gradient(circle at center, #051408 0%, #010402 100%);
}

/* Main Container */
.board-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  width: 100%;
  max-width: 1400px;
  z-index: 10;
}

/* Header Info */
.board-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.board-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5rem;
}

.board-header p {
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--label-color);
}

/* Single Row Flap Display Board */
.split-flap-board {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: calc(var(--card-width) * 0.15) calc(var(--card-width) * 0.25);
  background: var(--panel-bg);
  padding: calc(var(--card-width) * 0.4) calc(var(--card-width) * 0.3);
  border-radius: 16px;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  max-width: 100%;
  overflow-x: hidden; /* Hide scrollbars; everything fits now! */
}

/* Individual Unit (e.g. Days, Hours) */
.time-unit-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Horizontal Flap Cards Sequence */
.flap-sequence {
  display: flex;
  gap: calc(var(--card-width) * 0.06);
}

/* Label below the flaps */
.unit-label {
  margin-top: calc(var(--card-width) * 0.15);
  font-size: clamp(8px, calc(var(--card-width) * 0.18), 14px);
  font-weight: 600;
  letter-spacing: clamp(1px, calc(var(--card-width) * 0.04), 3px);
  color: var(--label-color);
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* The Split Flap Card Structure */
.split-flap-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  font-family: var(--font-flap);
  font-size: var(--card-font-size);
  font-weight: 700;
  perspective: 300px;
  border-radius: 6px;
  user-select: none;
}

/* Half flap properties */
.flap-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: var(--flap-bg-top);
  border: 1px solid var(--flap-border);
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.flap-half span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--card-height);
  line-height: var(--card-height);
  text-align: center;
}

/* Top half setup */
.flap-top {
  top: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.7);
  background: linear-gradient(to bottom, #232329 0%, #17171b 100%);
}

.flap-top span {
  top: 0;
}

/* Bottom half setup */
.flap-bottom {
  bottom: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(to bottom, #19191d 0%, #101013 100%);
}

.flap-bottom span {
  top: calc(-1 * var(--half-height));
}

/* Overlaying digits for 3D Flipping */
.flap-card-back {
  /* Underneath layer */
  z-index: 1;
}

.flap-card-front {
  /* Top layer */
  z-index: 2;
}

/* Flipping animated flaps */
.flap-flip-top {
  transform-origin: bottom center;
  z-index: 3;
  animation: flipTop 0.18s ease-in forwards;
}

.flap-flip-bottom {
  transform-origin: top center;
  z-index: 3;
  transform: rotateX(90deg);
  animation: flipBottom 0.18s ease-out 0.18s forwards;
  background: linear-gradient(to bottom, #1d1d22 0%, #101013 100%);
}

/* Mechanical Hinge Details on the left and right sides */
.split-flap-card::before,
.split-flap-card::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  width: 4px;
  height: 8px;
  background: #08080a;
  border-radius: 2px;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.split-flap-card::before {
  left: -2px;
}

.split-flap-card::after {
  right: -2px;
}

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

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

/* Sound and Control Panel */
.control-panel {
  margin-top: 3rem;
  display: flex;
  gap: 1rem;
  z-index: 10;
}

.control-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  backdrop-filter: blur(5px);
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.control-btn.active {
  background: rgba(255, 107, 107, 0.2);
  border-color: var(--accent-color);
}

.control-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Footer / Creator note */
footer {
  margin-top: auto;
  padding: 2rem 0;
  font-size: 0.85rem;
  color: var(--label-color);
  letter-spacing: 1px;
  z-index: 10;
  opacity: 0.7;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .board-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .board-header h1 {
    font-size: 1.6rem;
  }
  .board-header p {
    font-size: 0.9rem;
  }
  .board-container {
    padding: 1rem;
  }
}