/* Flaptown launch (v5) — the splash every Flaptown release opens with.
   Source of truth: FlaptownDesign/v5/components/launch/. Adapted from boards 01 (splash), 03 (ASCII rain),
   04 (launch sequence) and 05 (rain field). Pair with flaptown-launch.js; no inline styles or scripts needed.
   Syne Mono is self-hosted next to this file (OFL-SyneMono.txt). */

@font-face {
  font-family: "Syne Mono";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./SyneMono-Regular.ttf") format("truetype");
}

.ftl {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: #020202;
  color: #c9bab0;
  font-family: "Syne Mono", ui-monospace, "DejaVu Sans Mono", monospace;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  contain: strict;
}

/* the ground of board 01: a faint dished floor with a dot grid under the seal */
.ftl-ground {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 44%, #0d0f0f 0%, #070808 55%, #020303 100%);
}
.ftl-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #c9bab00d 1px, transparent 1.5px) center / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 45% 45% at 50% 44%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 45% 45% at 50% 44%, #000 20%, transparent 75%);
}

/* boards 03/04: scanlines and the tube vignette sit over everything */
.ftl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0000004d 0 1px, transparent 1px 3px);
}
.ftl::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  box-shadow: inset 0 0 180px 60px #000000;
}

.ftl-rain {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* the seal, scribed stroke by stroke (board 01) */
.ftl-sig {
  position: absolute;
  z-index: 2;
  overflow: visible;
  filter: drop-shadow(0 0 10px #e07a6233);
}
.ftl-sig line {
  fill: none;
  stroke: #b7958c;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ftl-sig .ftl-lamp {
  transform-box: fill-box;
  transform-origin: center;
}

/* the reading column: name pocket, house line, address */
.ftl-plate {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ftl-gap, 22px);
}

/* pocket + window + glass, from board 01 (.disp/.win/.glass) */
.ftl-pocket {
  position: relative;
  padding: 6px;
  border-radius: 12px;
  background: #080909;
  box-shadow: inset 0 4px 10px -3px #000000e6, inset 0 2px 0 #000000, inset 4px 0 8px -5px #000000b3,
    inset -4px 0 8px -5px #000000b3, inset 0 -1px 0 #412828, 0 0 0 1px #000000;
}
.ftl-win {
  display: flex;
  align-items: center;
  height: calc(var(--ftl-name, 40px) * 1.6);
  padding: 0 calc(var(--ftl-name, 40px) * .65);
  border-radius: 8px;
  border: 1px solid #412828;
  background: #0e1010 linear-gradient(180deg, #c9bab012 0%, #c9bab005 40%, transparent 41%);
  box-shadow: inset 0 1px 0 #c9bab01f, inset 0 -2px 6px #00000099, 0 1px 2px #000000;
}
.ftl-glass {
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  pointer-events: none;
  background: radial-gradient(130% 90% at 12% -10%, #c9bab017 0%, #c9bab006 40%, transparent 60%),
    linear-gradient(116deg, transparent 6%, #c9bab005 14%, #c9bab00c 20%, #c9bab012 26%, #c9bab00c 32%, #c9bab005 38%, transparent 46%),
    linear-gradient(180deg, transparent 65%, #00000029 100%);
  border: 1px solid #c9bab01a;
  box-shadow: inset 0 1px 0 #c9bab040, inset 1px 0 0 #c9bab01c, inset -1px 0 0 #00000080, inset 0 -1px 0 #0000009e,
    0 2px 5px #000000b3;
}
.ftl-glass::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 10%;
  right: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e6d8cd59 35%, #e6d8cd33 70%, transparent);
}

/* character cells: one glyph per 1ch cell, letter-spacing 0, letters glow from within */
.ftl-word {
  display: flex;
  font-size: var(--ftl-name, 40px);
  line-height: 1.2;
  letter-spacing: 0;
  white-space: pre;
  background-image: repeating-linear-gradient(90deg, #c9bab00c 0 calc(1ch - 1px), transparent calc(1ch - 1px) 1ch);
  background-size: 100% 78%;
  background-position: 0 55%;
  background-repeat: repeat-x;
}
.ftl-ty {
  color: #c9bab0;
  text-shadow: 0 0 1px #c9bab0, 0 0 10px #c9bab066;
}
.ftl-car {
  display: inline-block;
  width: 1ch;
  height: .95em;
  align-self: center;
  background: #b7958c;
  box-shadow: 0 0 8px #b7958c99;
  opacity: 0;
}

/* carved uppercase house line (board 01 colour, standard tracking) */
.ftl-cap {
  font-size: var(--ftl-cap, 12px);
  line-height: 1.4;
  letter-spacing: .42em;
  margin-right: -.42em;
  text-transform: uppercase;
  color: #937f6d;
  text-shadow: 0 -1px 1px #000000f2, -1px -1px 1px #000000a6, 0 1px 0 #c9bab052;
  white-space: nowrap;
}
.ftl-addr {
  font-size: calc(var(--ftl-cap, 12px) * 1.05);
  line-height: 1.4;
  letter-spacing: .32em;
  margin-right: -.32em;
  margin-top: calc(var(--ftl-gap, 22px) * -.45);
  text-transform: lowercase;
  color: #b7958c;
  text-shadow: 0 -1px 1px #000000f2, -1px -1px 1px #000000a6, 0 1px 0 #c9bab052;
  white-space: nowrap;
}
.ftl-addr:empty, .ftl-cap:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ftl, .ftl * { transition: none !important; animation: none !important; }
}