/* css/style.css - Videotext ARD/ZDF 4:3 CRT Theme */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
  /* EGA 16 Color Palette */
  --ega-black: #000000;
  --ega-blue: #0000aa;
  --ega-green: #00aa00;
  --ega-cyan: #00aaaa;
  --ega-red: #aa0000;
  --ega-magenta: #aa00aa;
  --ega-brown: #aa5500;
  --ega-light-gray: #aaaaaa;
  --ega-dark-gray: #555555;
  --ega-bright-blue: #5555ff;
  --ega-bright-green: #55ff55;
  --ega-bright-cyan: #55ffff;
  --ega-bright-red: #ff5555;
  --ega-bright-magenta: #ff55ff;
  --ega-bright-yellow: #ffff55;
  --ega-bright-white: #ffffff;

  /* Channel Accent Theme Defaults (ARD / ZDF) */
  --theme-bg: var(--ega-black);
  --theme-header-bg: var(--ega-blue);
  --theme-header-fg: var(--ega-bright-white);
  --theme-accent: var(--ega-bright-cyan);

  /* User Custom Colors */
  --custom-c1: #ff0055;
  --custom-c2: #00ffaa;
}

/* ARD Channel Theme */
body[data-channel="ard"] {
  --theme-header-bg: var(--ega-blue);
  --theme-header-fg: var(--ega-bright-yellow);
  --theme-accent: var(--ega-bright-cyan);
}

/* ZDF Channel Theme */
body[data-channel="zdf"] {
  --theme-header-bg: var(--ega-red);
  --theme-header-fg: var(--ega-bright-white);
  --theme-accent: var(--ega-bright-yellow);
}

/* Global Reset & Pure Black Outer Layout */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100vh;
  background-color: #050505;
  color: var(--ega-bright-white);
  font-family: 'VT323', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
}

/* App Main Container: Screen + Remote Side-by-Side */
.tv-app-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  width: 100%;
  height: 100vh;
  max-width: 1200px;
  overflow: hidden;
}

@media (max-width: 850px) {
  .tv-app-container {
    flex-direction: column;
    padding: 2px;
    gap: 8px;
  }
}

/* CRT TV Frame Enclosure */
.tv-bezel {
  position: relative;
  background: radial-gradient(circle at center, #1a1a1a 0%, #0d0d0d 100%);
  border: 10px solid #222225;
  border-radius: 18px;
  box-shadow: 
    0 0 30px rgba(0, 0, 0, 0.9),
    inset 0 0 15px rgba(255, 255, 255, 0.05);
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  max-height: 96vh;
  overflow: hidden;
}

/* 80-Column Wide Aspect Ratio Screen Container */
.crt-screen-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Bezugsgroesse fuer die Schriftskalierung (cqh) - siehe .teletext-viewport */
  container-type: size;
  background-color: var(--ega-black);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
}

/* CRT Overlay Shader: Scanlines & Phosphor Glow */
.crt-screen-wrapper::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
  background-size: 100% 4px;
  z-index: 20;
  pointer-events: none;
  opacity: 0.7;
}

/* CRT Screen Curved Glass Glow Vignette */
.crt-screen-wrapper::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.4) 90%);
  z-index: 21;
  pointer-events: none;
}

/* Teletext Canvas Content Area (24 rows x 80 cols grid) */
.teletext-viewport {
  width: 100%;
  height: 100%;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Die Schrift haengt an der Schirmgroesse, nicht an der Fensterbreite: So
     passen im Textbereich immer TT_MAX_LINES (16) Zeilen und TT_COLS (70) Spalten, egal
     wie gross das Fenster ist. Herleitung (F = font-size, H = Schirmhoehe):
       H = 12px Padding + Kopfzeile (1.1F + 4px) + 16 * 1.05F + Fusszeile (0.945F + 9px)
       => F = (H - 25px) / 18.845
     Zweiter Term: 70 Zeichen a 0.4em muessen in die Breite passen (28F + 20px).
     Bei Aenderung hier auch TT_MAX_LINES / TT_COLS in includes/helpers.php anpassen. */
  font-size: max(7px, min(calc((100cqh - 25px) / 18.845), calc((100cqw - 20px) / 28)));
  line-height: 1.05;
  color: var(--ega-bright-white);
  font-family: 'VT323', monospace;
  white-space: pre;
  overflow: hidden;
  z-index: 10;
}

/* --- Schmale Schirme (Handy hochkant) ---------------------------------------
   Hier begrenzt die BREITE die Schriftgroesse, denn 70 Spalten muessen passen.
   Also: Rahmen und Innenabstaende so schmal wie moeglich, hoeheres Bildformat
   (4:3 statt 16:9, sonst blieben zu wenig Zeilen) und eine Formel mit den
   kleineren Abstaenden. Dieser Block muss NACH den Basisregeln stehen -
   gleiche Spezifitaet, also gewinnt die spaetere Regel.
   Auch mit 70 Spalten bleibt es auf 375 CSS-Pixeln bei rund 5 Pixeln pro
   Zeichen - richtig gross wird es auf dem Handy erst im Querformat. */
@media (max-width: 850px) {
  .tv-bezel {
    border-width: 3px;
    border-radius: 10px;
    padding: 3px;
  }

  .crt-screen-wrapper {
    aspect-ratio: 4 / 3;
  }

  .teletext-viewport {
    padding: 3px 4px;
    font-size: max(7px, min(calc((100cqh - 19px) / 18.845), calc((100cqw - 8px) / 28)));
  }
}

/* Teletext Header Line (Strictly 1 single line) */
.tt-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--theme-header-bg);
  color: var(--theme-header-fg);
  padding: 0 4px;
  font-weight: bold;
  height: 1.1em;
  line-height: 1.1em;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.tt-page-badge {
  color: var(--ega-bright-white);
  background-color: var(--ega-black);
  padding: 0 4px;
}

.tt-search-input {
  color: var(--ega-bright-yellow);
  background-color: var(--ega-black);
  padding: 0 4px;
}

/* Teletext Main Grid Body Lines (Block pre container) */
.tt-body {
  flex-grow: 1;
  display: block !important;
  font-family: 'VT323', monospace;
  white-space: pre !important;
  line-height: 1.05;
  letter-spacing: 0px;
  overflow: hidden;
  width: 100%;
}

.tt-body span, .tt-body a {
  display: inline !important;
  white-space: pre !important;
}

.tt-line {
  display: block;
  width: 100%;
  height: 1.1em;
  overflow: hidden;
}

/* Double Height Text Styling */
.dh-line {
  display: inline-block !important;
  transform: scaleY(2);
  transform-origin: top left;
  height: 2.2em;
  margin-bottom: 0.8em;
}

/* Flashing Effect */
.flash {
  animation: tt-blink 1s steps(2, start) infinite;
}

@keyframes tt-blink {
  to {
    visibility: hidden;
  }
}

/* EGA 16 Color Text Classes */
.c-black          { color: var(--ega-black); }
.c-blue           { color: var(--ega-blue); }
.c-green          { color: var(--ega-green); }
.c-cyan           { color: var(--ega-cyan); }
.c-red            { color: var(--ega-red); }
.c-magenta        { color: var(--ega-magenta); }
.c-brown          { color: var(--ega-brown); }
.c-light-gray     { color: var(--ega-light-gray); }
.c-dark-gray      { color: var(--ega-dark-gray); }
.c-bright-blue    { color: var(--ega-bright-blue); }
.c-bright-green   { color: var(--ega-bright-green); }
.c-bright-cyan    { color: var(--ega-bright-cyan); }
.c-bright-red     { color: var(--ega-bright-red); }
.c-bright-magenta { color: var(--ega-bright-magenta); }
.c-bright-yellow  { color: var(--ega-bright-yellow); }
.c-bright-white   { color: var(--ega-bright-white); }
.c-custom1        { color: var(--custom-c1); }
.c-custom2        { color: var(--custom-c2); }

/* EGA Background Color Classes */
.bg-black          { background-color: var(--ega-black); }
.bg-blue           { background-color: var(--ega-blue); }
.bg-green          { background-color: var(--ega-green); }
.bg-cyan           { background-color: var(--ega-cyan); }
.bg-red            { background-color: var(--ega-red); }
.bg-magenta        { background-color: var(--ega-magenta); }
.bg-brown          { background-color: var(--ega-brown); }
.bg-light-gray     { background-color: var(--ega-light-gray); }
.bg-dark-gray      { background-color: var(--ega-dark-gray); }
.bg-bright-blue    { background-color: var(--ega-bright-blue); }
.bg-bright-green   { background-color: var(--ega-bright-green); }
.bg-bright-cyan    { background-color: var(--ega-bright-cyan); }
.bg-bright-red     { background-color: var(--ega-bright-red); }
.bg-bright-magenta { background-color: var(--ega-bright-magenta); }
.bg-bright-yellow  { background-color: var(--ega-bright-yellow); }
.bg-bright-white   { background-color: var(--ega-bright-white); }

/* Teletext Nav Links */
.tt-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.tt-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
  text-decoration: underline;
}

/* Footer Colored Navigation Buttons */
.tt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--ega-black);
  padding-top: 4px;
  border-top: 1px solid var(--ega-dark-gray);
  font-size: 0.9em;
}

.tt-nav-btn {
  flex: 1;
  text-align: center;
  padding: 2px 0;
  text-decoration: none;
  font-weight: bold;
}

.tt-nav-btn.red    { background-color: var(--ega-red); color: var(--ega-bright-white); }
.tt-nav-btn.green  { background-color: var(--ega-green); color: var(--ega-black); }
.tt-nav-btn.yellow { background-color: var(--ega-bright-yellow); color: var(--ega-black); }
.tt-nav-btn.blue   { background-color: var(--ega-bright-blue); color: var(--ega-bright-white); }

.tt-nav-btn:hover {
  filter: brightness(1.2);
}

/* ------------------------------------------------------------- */
/* SIDE RETRO REMOTE CONTROL STYLING                             */
/* ------------------------------------------------------------- */
.tv-remote {
  background: linear-gradient(145deg, #2b2c30, #1b1c1e);
  border: 3px solid #3a3b40;
  border-radius: 20px;
  padding: 16px 14px;
  box-shadow: 
    6px 6px 15px rgba(0,0,0,0.6),
    inset 0 1px 2px rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 180px;
}

.remote-brand {
  font-size: 0.9em;
  color: #aaa;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 1px 1px #000;
  font-weight: bold;
}

/* Channel Umschalter & Custom Color Trigger */
.remote-top-actions {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
}

.remote-action-btn {
  flex: 1;
  background: #3a3b40;
  color: #fff;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 8px 0;
  font-size: 0.85em;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.4);
  transition: transform 0.1s, background 0.2s;
}

.remote-action-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}

/* Numeric Keypad Grid */
.remote-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.num-key {
  background: linear-gradient(145deg, #44464c, #2e3035);
  color: #ffffff;
  border: 1px solid #555860;
  border-radius: 8px;
  padding: 12px 0;
  font-size: 1.35em;
  font-family: 'VT323', monospace;
  font-weight: bold;
  cursor: pointer;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 3px 0 #1b1c1e, 0 4px 6px rgba(0,0,0,0.5);
  transition: transform 0.05s, box-shadow 0.05s;
}

.num-key:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #1b1c1e, inset 0 2px 4px rgba(0,0,0,0.6);
}

/* Smartphone Landscape Mode Optimization */
@media (orientation: landscape) and (max-height: 600px) {
  html, body {
    padding: 0;
    margin: 0;
    height: 100vh;
    overflow: hidden;
  }

  .tv-app-container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 4px;
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
  }

  .tv-bezel {
    border-width: 4px;
    border-radius: 10px;
    padding: 4px;
    height: 96vh;
    width: auto;
    aspect-ratio: 4 / 3;
    max-width: calc(96vh * 4 / 3);
    flex-shrink: 0;
  }

  .crt-screen-wrapper {
    height: 100%;
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .teletext-viewport {
    /* Muss zum Padding passen, das in der Schrift-Formel angenommen wird (8px). */
    padding: 3px 4px;
  }

  .tt-header-row {
    padding: 1px 4px;
    margin-bottom: 2px;
  }

  .tt-footer {
    padding-top: 2px;
  }

  .tv-remote {
    width: 135px;
    padding: 6px 4px;
    gap: 6px;
    max-height: 96vh;
    overflow-y: auto;
    border-radius: 12px;
    flex-shrink: 0;
  }

  .remote-brand {
    font-size: 0.7em;
  }

  .remote-top-actions {
    gap: 4px;
  }

  .remote-action-btn {
    padding: 4px 0;
    font-size: 0.75em;
  }

  .remote-keypad {
    gap: 4px;
  }

  .num-key {
    padding: 6px 0;
    font-size: 1.05em;
    border-radius: 4px;
  }
}
/* Ende Querformat-Block. Die schliessende Klammer fehlte - dadurch galten alle
   nachfolgenden Regeln nur im Querformat. */

/* --- Snake (Seite 700) -----------------------------------------------------
   Das Spielfeld ist ein Canvas; seine Zellgroesse berechnet js/teletext.js aus
   dem verfuegbaren Platz. Die Tasten stehen links und rechts NEBEN dem Feld -
   so liegen auf dem Handy beide Daumen an der richtigen Stelle, ohne dass das
   Feld verdeckt wird. */
.snake-page {
  white-space: normal !important;
}

.snake-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.snake-board {
  flex: 0 1 auto;
  min-width: 0;
}

/* Je zwei Tasten pro Seite, versetzt: oben/links links, unten/rechts rechts */
.snake-pad {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.snake-pad-left  { align-items: flex-end; }
.snake-pad-right { align-items: flex-start; }

.snake-btn {
  width: 52px;
  height: 46px;
  font-family: inherit;
  font-size: 1.3em;
  color: #fff;
  background: #444;
  border: 1px solid #777;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}

.snake-btn:active {
  background: #6a6a6a;
}

/* Links: hoch nach aussen, links nach innen versetzt - und rechts gespiegelt.
   Das ergibt die diagonale Anordnung um das Feld herum. */
.snake-pad-left  .snake-btn.up    { margin-right: 14px; }
.snake-pad-right .snake-btn.down  { margin-left: 14px; }

.snake-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}

.snake-btn-wide {
  font-family: inherit;
  font-size: 0.85em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  touch-action: manipulation;
}

.snake-restart { background: #a00; color: #fff; }
.snake-scores  { background: #00aa00; color: #000; }
.snake-tilt    { background: #2a2a34; color: #ddd; border: 1px solid #777; }
.snake-tilt.active { background: var(--ega-bright-yellow); color: #000; border-color: #ff0; }

.snake-hs-modal {
  display: none;
  margin-top: 6px;
  background: #222;
  border: 2px solid var(--ega-bright-yellow);
  padding: 6px;
  text-align: center;
}

.snake-hs-modal form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.snake-hs-modal input[type="text"] {
  width: 60px;
  text-transform: uppercase;
  background: #000;
  color: #0f0;
  border: 1px solid var(--ega-bright-yellow);
  text-align: center;
  font-family: inherit;
  font-size: 1.2em;
}

.snake-hs-modal button {
  background: #0f0;
  color: #000;
  font-weight: bold;
  font-family: inherit;
  border: none;
  padding: 4px 10px;
  cursor: pointer;
}

/* Schmale Schirme: kleinere Tasten, damit neben dem Feld genug Platz bleibt */
@media (max-width: 850px) {
  .snake-layout { gap: 4px; }
  .snake-btn { width: 42px; height: 40px; font-size: 1.1em; }
  .snake-pad { gap: 6px; }
  .snake-pad-left  .snake-btn.up   { margin-right: 8px; }
  .snake-pad-right .snake-btn.down { margin-left: 8px; }
  .snake-btn-wide { padding: 5px 8px; font-size: 0.8em; }
}

/* Modal Custom Color Picker Panel */
.color-picker-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1e1e24;
  border: 3px solid var(--ega-bright-cyan);
  border-radius: 12px;
  padding: 20px;
  z-index: 100;
  box-shadow: 0 0 30px rgba(0,255,255,0.4);
  color: #fff;
  width: 320px;
}

.color-picker-modal.active {
  display: block;
}

.color-picker-modal h3 {
  margin-bottom: 12px;
  color: var(--ega-bright-yellow);
}

.color-input-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.color-input-group label {
  font-size: 1.1em;
}

.color-input-group input[type="color"] {
  border: none;
  width: 40px;
  height: 30px;
  cursor: pointer;
  background: none;
}