/* =========================================================
   LAYOUT + PAGE STYLING
   ---------------------------------------------------------
   Page chrome (not the split-flap mechanism itself).
   ========================================================= */
body{
  /* Keep your current demo layout (content roughly mid-screen) */
  position: absolute;
  width: 100%;
  height: 300px;
  top: 32%;
  margin: 0 auto;
  margin-top: -74px;

  /* Typography + base colors (themes will override) */
  text-align: center;
  font-size: 30px;
  background: #1b1b1b;
  color: #eaeaea;
  font-family: Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------
   Global sizing controls (safe, theme-adjustable)
   1.00 = original sizes. Lower to make glyphs fit tighter.
   --------------------------------------------------------- */
:root{
  --sf-scale: 1;        /* affects the top marquee (big word) */
  --sf-clock-scale: 1;  /* affects the bottom clock */
}

/* Demo marquee size and tile width */
.splitflap{ font-size: calc(150px * var(--sf-scale)); margin-bottom: 30px; }
.splitflap .segment{ width: 145px; }


/* =========================================================
   CLOCK (center bottom, inline time + AM/PM)
   ========================================================= */
.clock{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%); /* center horizontally */
  font-size: calc(90px * var(--sf-clock-scale));
  display: inline-flex;         /* keep all segments on one line */
  align-items: flex-end;        /* align baseline for clean look */
  gap: 2px;                     /* tighter spacing between digit blocks (was 6px) */
}

/* Standard digit segments (narrower tiles) */
.clock .segment {
  width: 90px;   /* was 120px, reduced so HH:MM:SS sit closer together */
}

/* Colon separators (less spacing) */
.colon{
  display: inline-block;
  width: .4em;   /* was .6em, narrower colon */
  margin: 0 1px; /* tighter spacing around colon (was 0 2px) */
  font-weight: 700;
  opacity: .85;
}

/* AM/PM segment styling */
.clock .ampm{
  margin-left: 6px; /* space after seconds before AM/PM */
}
.clock .ampm li{
  font-size: 36px !important;  /* a little smaller so it doesn’t overpower digits */
  width: 80px !important;      /* fit "AM"/"PM" without looking huge */
  border-radius: 8px !important;
  line-height: 1.1;
}

/* =========================================================
   FRIENDLIER INPUT UI (the "Type a flap" field + button)
   ========================================================= */
.flap-input{
  margin: 12px auto 28px;
  display: inline-flex;
  gap: 12px;
  align-items: center;
  font-size: 26px;
}
.flap-input label{ font-weight: 700; }
.flap-input input{
  width: 18ch;
  font-size: 22px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #0f0f0f;
  color: #eaeaea;
}
.flap-input button{
  font-size: 18px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #3a3a3a;
  background: #222;
  color: #eaeaea;
  cursor: pointer;
}

/* =========================================================
   THEME PICKER WIDGET (bottom-left)
   ========================================================= */
#theme-picker{
  position: fixed; left: 14px; bottom: 14px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px 12px;
  color: #eaeaea; font-size: 14px;
  display: flex; gap: 8px; align-items: center;
  backdrop-filter: blur(6px);
  z-index: 99;
}
#theme-picker label{ opacity:.85; font-weight:600; }
#theme-select{
  background: #111; color: #eee;
  border: 1px solid #333; border-radius: 8px;
  padding: 6px 10px; font-size: 14px;
}

/* =========================================================
   SPLIT-FLAP CORE STYLES (MECHANICS)
   ---------------------------------------------------------
   These styles create the flip effect. Themes *only* change
   color, fonts, and decoration—don’t touch transforms here.
   ========================================================= */

/* One display “segment” = a tile containing two OLs (top/bottom) */
.splitflap .segment{
  position: relative;
  display: inline-block;
  margin: 0 4px; /* spacing between tiles */
}

/* clearfix for container */
.splitflap:after{
  content: " ";
  display: table;
  clear: both;
}

/* The two halves (<ol class="top"> and <ol class="bottom">) */
.splitflap .segment ol{
  padding: 0;
  margin: 0;
  position: relative;
}

/* Each <li> is a FULL glyph. The “split” look happens by
   scaling the stacks in the top/bottom <ol>s. */
.splitflap .segment li{
  position: absolute;
  display: block;
  top: 0; left: 0;
  overflow: hidden;
  text-align: center;
  height: .48em;           /* ~half the tile height (from font-size) */
  width: 100%;
  text-transform: none;    /* ensure case is preserved */
}

/* Provide a “base” item in each half’s stack. */
.splitflap .top li:first-child   { position: static; }
.splitflap .bottom li:last-child { position: static; }

/* ---------- TOP half (folds downward) ---------- */
.splitflap .top li.falling{
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.splitflap .top li{
  color: #FFF;                 /* glyph color (themes override) */
  background-color: #222;      /* tile color (themes override) */
  -webkit-border-top-left-radius: 7px;
  -webkit-border-top-right-radius: 7px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;

  /* timing: top closes slightly faster */
  -webkit-transition: -webkit-transform 110ms 0 ease-out;
  transition: transform 110ms 0ms ease-out;

  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transform-origin: 50% 100%; /* hinge on bottom edge */
  transform-origin: 50% 100%;
}

/* tiny seam + line-height fix between halves */
.splitflap .segment ol.top{
  margin-bottom: .03em;
  line-height: 1;
}

/* ---------- BOTTOM half (folds upward) ---------- */
.splitflap .bottom li{
  color: #CCC;                 /* glyph color (themes override) */
  line-height: 0;
  background-color: #151515;   /* tile color (themes override) */

  /* timing: opens after a small delay to meet the top perfectly */
  -webkit-transition: -webkit-transform 100ms 60ms ease-in;
  transition: transform 100ms 60ms ease-in;

  -webkit-border-bottom-right-radius: 7px;
  -webkit-border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;

  -webkit-transform-origin: 50% 0; /* hinge on top edge */
  transform-origin: 50% 0;

  -webkit-transform: scaleY(0);    /* closed by default */
  transform: scaleY(0);
}

/* “current” and “falling” bottom flaps are visible (opened) */
.splitflap .bottom li.current,
.splitflap .bottom li.falling{
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

/* =========================================================
   THEMES  (toggle by adding a class to <body>)
   ---------------------------------------------------------
   Available: theme-classic (default), theme-retro,
              theme-hacker, theme-azula, theme-meyer
   ========================================================= */

/* --- Classic (default) --- */
body.theme-classic{
  background:#1b1b1b; color:#eaeaea;
}
body.theme-classic .splitflap .segment li{
  /* Put a DIN-like font with lowercase BEFORE DIN Alternate */
  font-family: "Roboto Condensed","DIN Alternate","Helvetica Neue",Arial,sans-serif;
  font-weight:700;
}
body.theme-classic .splitflap .top li{ background:#000;    color:#fff;    }
body.theme-classic .splitflap .bottom li{ background:#0f0f0f; color:#e6e6e6; }

/* --- Retro (Solari orange) --- */
body.theme-retro{
  background:#181818; 
  color:#f1e7df;

  /* shrink clock slightly so digits don’t clip */
  --sf-clock-scale: .88;   /* default is 1, only affects .clock */
}

body.theme-retro .splitflap .segment li{
  /* All mono faces that include lowercase; removed DIN */
  font-family:"IBM Plex Mono","Space Mono","Menlo","Courier New",monospace;
  font-weight:700; 
  letter-spacing:.5px;
}

body.theme-retro .splitflap .top li{    
  background:#000; 
  color:#ff6a3a; 
}
body.theme-retro .splitflap .bottom li{ 
  background:#000; 
  color:#ffa07e; 
}

/* subtle beveled edge */
body.theme-retro .splitflap .segment li{
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0  1px 0 rgba(0,0,0,.4);
}

/* clock-only adjustments for Retro */
body.theme-retro .clock .segment{
  width: 98px; /* was 90px, gives digits room */
}
body.theme-retro .splitflap.clock .segment li{
  font-weight:600; /* a little lighter for fit */
}

/* --- Hacker (green CRT) --- */
body.theme-hacker{
  background:#0b0d0b; color:#4ef438;

  /* Slightly shrink glyphs so they sit comfortably in tiles */
  --sf-scale: .94;        /* marquee ~6% smaller */
  --sf-clock-scale: .90;  /* clock ~10% smaller (was .92) */
}
body.theme-hacker .splitflap .segment li{
  font-family:"IBM Plex Mono","Share Tech Mono","VT323","Lucida Console",Monaco,monospace;
  font-weight:600;
  text-shadow: 0 0 6px rgba(78,244,56,.55), 0 0 14px rgba(78,244,56,.35);
}
body.theme-hacker .splitflap .top li{    background:#020202; color:#4ef438; }
body.theme-hacker .splitflap .bottom li{ background:#020202; color:#79ff64; }

/* Clock-only overrides */
body.theme-hacker .clock .segment{
  width: 88px; /* narrower tiles so tall glyphs fit better */
}
body.theme-hacker .splitflap.clock .segment li{
  font-size: .90em; /* shrink just a touch inside each tile */
}

/* --- Azula (new cool blues) --- */
body.theme-azula{
  /* deep indigo background with soft periwinkle text */
  background:#1A2A80;  /* from palette */
  color:#B2B0E8;       /* light lavender-blue for text */

  /* Russo One tends to run tall/wide → trim more here */
  --sf-scale: .90;        /* marquee ~10% smaller */
  --sf-clock-scale: .88;  /* clock ~12% smaller */
}
body.theme-azula .splitflap .segment li{
  font-family:"Russo One","Space Mono","Menlo","Consolas",monospace;
  font-weight:500;
  letter-spacing:.02em;
  text-shadow: 0 0 10px rgba(178,176,232,.35);
}
body.theme-azula .splitflap .top li{
  background:#3B38A0;   /* rich indigo tile */
  color:#7A85C1;        /* muted blue glyphs */
}
body.theme-azula .splitflap .bottom li{
  background:#252b6f;   /* darker navy for lower half */
  color:#B2B0E8;        /* lighter lavender-blue glyphs */
}

/* --- Meyer Pink (playful pinks) --- */
body.theme-meyer{
  background:#141017;
  color:#ffd6ea;
}
body.theme-meyer .splitflap .segment li{
  /* Primary face supports lowercase; Bebas/DIN kept as fallbacks */
  font-family:"Chakra Petch","Bebas Neue","DIN Alternate","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  letter-spacing:.015em;
  text-shadow: 0 0 8px rgba(255,105,180,.25);
}
body.theme-meyer .splitflap .top li{
  background:#0e0b10;    
  color:#ff6bb5;         /* hot pink */
}
body.theme-meyer .splitflap .bottom li{
  background:#0e0b10;
  color:#ffc0d9;         /* lighter pink */
}

/* ===========================
   Dark / Light toggle (top-right)
   =========================== */
.mode-toggle{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.55);
  color: #eaeaea;
  font: 600 14px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.mode-toggle .icon { font-size: 16px; }

/* Make the button look right in light mode */
body.light-ui .mode-toggle{
  border-color: rgba(0,0,0,.15);
  background: rgba(255,255,255,.7);
  color: #222;
}

/* ===========================
   Light UI overrides
   (page chrome only; themes still style the tiles)
   =========================== */
body.light-ui{
  background: #f6f7f8;  /* brighter page */
  color: #1b1b1b;
}

/* Input + button + picker in light mode */
body.light-ui .flap-input input{
  background: #ffffff;
  color: #111;
  border-color: #cfcfcf;
}
body.light-ui .flap-input button{
  background: #ffffff;
  color: #111;
  border-color: #cfcfcf;
}
body.light-ui #theme-picker{
  background: rgba(255,255,255,.7);
  color: #111;
  border-color: rgba(0,0,0,.12);
}
body.light-ui #theme-select{
  background: #fff;
  color: #111;
  border-color: #cfcfcf;
}

/* Optional: a subtle card behind the clock in light mode */
body.light-ui .clock{
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 6px 10px; /* tiny breathing room without affecting centering */
}