/* ═══════════════════════════════════════════════════════════════════
   Flip-Flap Solari Display  —  TV Kiosk
   16:9 full-viewport, 1080p target
   v9: Start screen overlay + board-row overflow fix
   ═══════════════════════════════════════════════════════════════════ */

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

:root {
  --bg:          #0a0a0a;
  --panel-bg:    #111;
  --tile-bg:     #1a1a1a;
  --tile-border: #2a2a2a;
  --amber:       #ffffff;
  --amber-dim:   #888888;
  --header-bg:   #0a0a0a;
  --label-col:   #cccccc;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--amber);
  -webkit-font-smoothing: antialiased;
}

/* ── Start screen ────────────────────────────────────────────────────── */
#start-screen {
  position:        fixed;
  inset:           0;
  background:      var(--bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         99999;
  transition:      opacity 0.9s ease;
}

#start-screen.fade-out {
  opacity:        0;
  pointer-events: none;
}

#start-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3.5vh;
}

.start-title {
  font-family:    'Courier New', monospace;
  font-size:      9vh;
  font-weight:    bold;
  letter-spacing: 0.55em;
  color:          var(--amber);
}

.start-sub {
  font-family:    'Courier New', monospace;
  font-size:      2vh;
  letter-spacing: 0.25em;
  color:          #444;
}

#start-btn {
  margin-top:     4vh;
  font-family:    'Courier New', monospace;
  font-size:      3vh;
  letter-spacing: 0.45em;
  font-weight:    bold;
  color:          #0a0a0a;
  background:     #f5c518;
  border:         none;
  padding:        1.4vh 5vw;
  border-radius:  4px;
  cursor:         pointer;
  transition:     background 0.15s ease, transform 0.1s ease;
}

#start-btn:hover  { background: #ffd740; }
#start-btn:active { transform: scale(0.97); }

/* ── Board ──────────────────────────────────────────────────────────── */
#board {
  width: 100vw; height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ── Header ─────────────────────────────────────────────────────────── */
#header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7vh 2vw;
  background: var(--header-bg);
  border-bottom: 2px solid var(--amber-dim);
}
.header-label {
  font-family: 'Courier New', monospace;
  font-size: 2.2vh;
  font-weight: bold;
  letter-spacing: 0.45em;
  color: var(--amber);
}
.header-city {
  font-family: 'Courier New', monospace;
  font-size: 1.5vh;
  letter-spacing: 0.2em;
  color: var(--amber-dim);
}

/* ── Content area ───────────────────────────────────────────────────── */
#content-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5vh;
  padding: 1vh 0;
  background: var(--panel-bg);
  overflow: hidden;
  position: relative;   /* anchor for #version-bar absolute positioning */
}

.board-row {
  width: 96vw;
  /* overflow: visible so sub-pixel rounding on tile widths never clips the
     rightmost tile. #content-area { overflow: hidden } handles the outer clip. */
  overflow: visible;
  line-height: 0;
}

/* ── Flapper wrapper — horizontal flex, no wrap ─────────────────────── */
.flapper {
  display:     flex      !important;
  flex-wrap:   nowrap    !important;
  gap:         1px;
  width:       auto      !important;
  overflow:    visible   !important;  /* prevent container from clipping tiles on sub-pixel rounding */
  line-height: 0;
  font-family: 'Courier New', monospace;
}

/* ══════════════════════════════════════════════════════════════════════
   CRITICAL: Flapper structural CSS
   The library's CDN CSS path is broken (404). These rules are required
   to make the four inner half-panels position absolutely inside each
   digit cell. Without this the halves stack vertically → 4 rows.
   ══════════════════════════════════════════════════════════════════════ */

/* Each digit tile */
.flapper .digit {
  position:     relative     !important;
  display:      inline-block !important;
  overflow:     hidden       !important;
}

/* All four inner panel halves: position absolutely, fill the cell */
.flapper .digit div {
  position:     absolute  !important;
  top:          0         !important;
  left:         0         !important;
  width:        100%      !important;
  height:       100%      !important;
  text-align:   center    !important;
  overflow:     hidden    !important;
}

/* Top half — clip the bottom 50%, showing only the upper portion */
.flapper .digit .top {
  clip-path: inset(0 0 50% 0) !important;
}

/* Bottom half — clip the top 50%, showing only the lower portion */
.flapper .digit .bottom {
  clip-path: inset(50% 0 0 0) !important;
}

/* ── Main content cells (rows 1, 2 & 3) ─────────────────────────────── */
/* 4 rows total; 3 content + 1 label. Shorter tiles to fit all 4 in view. */
/* font-size 8vh (not 9vh): Courier New chars at 9vh are ~58px wide but   */
/* tiles are only ~53px — clips wide strokes on M, R, W etc.              */
#row1 .flapper .digit,
#row2 .flapper .digit,
#row3 .flapper .digit {
  flex:         0 0 auto                   !important;
  width:        calc((96vw - 33px) / 34)   !important;
  height:       13vh                       !important;
  font-size:    8vh                        !important;
  line-height:  13vh                       !important;
  background:   var(--tile-bg)             !important;
  border:       1px solid var(--tile-border) !important;
  border-radius: 2px                       !important;
  color:        var(--amber)               !important;
}

#row1 .flapper .digit div,
#row2 .flapper .digit div,
#row3 .flapper .digit div {
  background:   var(--tile-bg) !important;
  color:        var(--amber)   !important;
  font-size:    inherit        !important;
  line-height:  inherit        !important;
}

/* ── Label row (row4) ───────────────────────────────────────────────── */
#row4 .flapper .digit {
  flex:         0 0 auto                   !important;
  width:        calc((96vw - 33px) / 34)   !important;
  height:       7.5vh                      !important;
  font-size:    5.5vh                      !important;
  line-height:  7.5vh                      !important;
  background:   var(--tile-bg)             !important;
  border:       1px solid var(--tile-border) !important;
  border-radius: 2px                       !important;
  color:        var(--label-col)           !important;
}

#row4 .flapper .digit div {
  background:   var(--tile-bg)   !important;
  color:        var(--label-col) !important;
  font-size:    inherit          !important;
  line-height:  inherit          !important;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
#footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  padding: 1vh 2.5vw;
  background: #0d0d0d;
  border-top: 2px solid #1e1e1e;
}

/* ── City panels ─────────────────────────────────────────────────────── */
.city-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45vh;
  flex: 1;
  max-width: 44vw;
}

.city-sep {
  font-family: 'Courier New', monospace;
  font-size: 3vh;
  color: #262626;
  flex: 0;
  align-self: center;
}

.city-name {
  font-family: 'Courier New', monospace;
  font-size: 4vh;
  letter-spacing: 0.5em;
  color: #787878;
  font-weight: bold;
}

.city-wx {
  font-family: 'Courier New', monospace;
  font-size: 4vh;
  letter-spacing: 0.12em;
  color: #787878;
}

/* ── Nairobi clock tiles ─────────────────────────────────────────────── */
#panel-nairobi .flapper .digit {
  flex:          0 0 auto             !important;
  width:         calc((20vw - 7px) / 8) !important;
  height:        8.5vh             !important;
  font-size:     6vh               !important;
  line-height:   8.5vh             !important;
  background:    #0e1518           !important;
  border:        1px solid #1a2830 !important;
  border-radius: 3px               !important;
  color:         #5cc8e8           !important;
}

#panel-nairobi .flapper .digit div {
  background:  #0e1518 !important;
  color:       #5cc8e8 !important;
  font-size:   inherit !important;
  line-height: inherit !important;
}

/* ── Muskoka clock tiles ──────────────────────────────────────────────── */
#panel-muskoka .flapper .digit {
  flex:          0 0 auto             !important;
  width:         calc((20vw - 7px) / 8) !important;
  height:        8.5vh             !important;
  font-size:     6vh               !important;
  line-height:   8.5vh             !important;
  background:    #181410           !important;
  border:        1px solid #2a2018 !important;
  border-radius: 3px               !important;
  color:         #e8885c           !important;
}

#panel-muskoka .flapper .digit div {
  background:  #181410 !important;
  color:       #e8885c !important;
  font-size:   inherit !important;
  line-height: inherit !important;
}

/* ── Version corner (top-right, inside header bar) ──────────────────── */
#version-bar {
  position:       absolute;
  top:            1.2vh;
  right:          2vw;
  font-family:    'Courier New', monospace;
  font-size:      1.8vh;
  letter-spacing: 0.3em;
  color:          #444444;
  line-height:    1;
  pointer-events: none;
}

/* ── CRT scanline overlay ────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px,
    transparent 1px, transparent 3px
  );
  pointer-events: none;
  z-index: 9999;
}