/***** THEME COLORS (easy to change) **********************************/
:root {
  /* UI text / borders / base */
  --main-color: #e8e8e8;
  --input-color: #888;
  --bg-color: #000000;     /* page background color (picker updates this) */

  /* Character colors */
  --color-letter: #e8e8e8; /* default text color (consonants etc) */
  --color-vowel:  #00d1ff; /* A, E, I, U */
  --color-o:      #ffcc00; /* O / o */
  --color-zero:   #ff5a5f; /* 0 (zero) */
  --color-digit:  #6ca2ff; /* 1–9 digits */
  --color-symbol: #ff7ab3; /* punctuation etc */
  --color-emoji:  #ffffff; /* emoji fallback */

  /* Input sizing (smaller white input) */
  --input-font-size: 20px;
  --input-height: 44px;
  --input-width-desktop: 56%;
  --input-width-mobile: 84%;

  /* Big text scaling (updated by JS) */
  --lt-scale: 0.6;
}

/***** GLOBAL BASE ****************************************************/
* { margin: 0; padding: 0; }
html, body {
  font-family: sans-serif;
  height: 100%;
  overflow: hidden; /* we pan inside .text, not page scroll */
  color: var(--main-color);
  background: var(--bg-color);
}

/***** INPUT + CONTROLS **********************************************/
.main {
  position: relative;
  z-index: 0;
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  width: 100%;
}

/* Top-right color stack */
.ui-top-right {
  position: absolute;
  top: 10px;
  right: 8px;
  display: grid;
  grid-auto-rows: min-content;
  row-gap: 6px;
  column-gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .75rem;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 5;
  user-select: none;
  font-weight: 600;
}
.color-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ui-top-right label { opacity: .9; min-width: 80px; text-align: right; }
.ui-top-right input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.reset-btn {
  grid-column: 1 / -1; /* full width */
  appearance: none;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 2px;
}
.reset-btn:hover { background: rgba(255,255,255,.18); }
.reset-btn:active { background: rgba(255,255,255,.28); }

/* Input bar */
.inputarea {
  left: 0;
  margin-left: calc((100% - var(--input-width-desktop)) / 2);
  margin-right: calc((100% - var(--input-width-desktop)) / 2);
  margin-top: 10px;
  position: absolute;
  top: 0;
  width: var(--input-width-desktop);
}
@media (max-width: 700px) {
  .inputarea {
    width: var(--input-width-mobile);
    margin-left: calc((100% - var(--input-width-mobile)) / 2);
    margin-right: calc((100% - var(--input-width-mobile)) / 2);
  }
}
input.inputbox {
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
  font-family: sans-serif;
  font-size: var(--input-font-size);
  min-height: var(--input-height);
  outline: none;
  padding: 8px 12px;
  text-align: center;
  width: 100%;
  color: #111;
  background: #ffffff; /* white input */
}
input.inputbox::placeholder { color: #666; }

/* Text size control pinned under input */
.lt-controls {
  position: absolute;
  top: calc(10px + var(--input-height) + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .75rem;
  background: rgba(0,0,0,.35);
}
.lt-controls label { font-weight: 600; }
.lt-controls input[type="range"] { width: 220px; }
.lt-scale-value { min-width: 3.5ch; text-align: right; font-variant-numeric: tabular-nums; }

/***** BIG TEXT VIEWPORT + CANVAS (frameless full-bleed) *************/
.text {
  position: relative;
  width: 100vw;
  height: 82vh;          /* visible area; JS caps scale to never exceed height */
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;      /* clip edges; we pan the inner canvas horizontally */
  counter-reset: num-chars;
}
.lt-canvas {
  position: absolute;
  top: 0; left: 0;
  display: flow-root;    /* contain floats so size measures correctly */
  will-change: transform;
}

/***** CHARACTER TILES ************************************************/
.text li {
  counter-increment: num-chars;
  display: flex;
  flex-direction: column;
  float: left;
  font-family: monospace;
  font-size: calc(10vw * var(--lt-scale));
}

/* Base char color (consonants etc) */
.text li .char { color: var(--color-letter); }

/* Overrides per class */
.text li .char.vowel     { color: var(--color-vowel); }
.text li .char.letter-o  { color: var(--color-o); }
.text li .char.zero      { color: var(--color-zero); }
.text li .char.number    { color: var(--color-digit); }
.text li .char.symbol    { color: var(--color-symbol); }
.text li .char.emoji     { color: var(--color-emoji); }

/* Emoji sizing */
.text li .emoji { height: 1.1645em; }

/* Optional very subtle alternating tile backgrounds */
.text li:nth-child(odd)  { background: rgba(255,255,255,0.02); }
.text li:nth-child(even) { background: rgba(255,255,255,0.06); }

/* index number below each tile */
.text li::after {
  color: #bbb;
  content: counter(num-chars);
  display: block;
  font-size: calc(1.5vw * var(--lt-scale));
  text-align: center;
  user-select: none;
}

/* No-wrap mode for horizontal overflow/panning */
.lt-canvas.lt-nowrap .charbox { float: none; display: inline-block; }
.lt-canvas.lt-nowrap { white-space: nowrap; }

/***** PAN SLIDER (centered) *****************************************/
.lt-pan-controls {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: max-content;
  display: inline-grid;
  justify-items: center;
  align-items: center;
  gap: 8px;
  z-index: 1;
  text-align: center;
}
.lt-pan-row {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.25);
  border-radius: .75rem; background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
}
.lt-pan-row input[type="range"] { width: 360px; }
.lt-pan-value { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }