/*
 * Funnypeace — Fable 5.1
 * Additive visual layer. Existing application styles, IDs and API hooks remain intact.
 */

@font-face {
  font-family: "Geist FP";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono FP";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fp-sans: "Geist FP", "Helvetica Neue", Arial, sans-serif;
  --fp-mono: "Geist Mono FP", ui-monospace, Consolas, monospace;
  --motion-instant: 80ms;
  --motion-micro: 160ms;
  --motion-ui: 280ms;
  --motion-reveal: 480ms;
  --motion-scene: 800ms;
  --ease-system: cubic-bezier(.17, .4, .02, .99);
  --ease-mechanical: cubic-bezier(.4, 0, .1, 1);
  --ease-expand: cubic-bezier(.35, 0, 0, 1);
  --fp-console-gap: clamp(16px, 2vw, 28px);
}

body {
  font-family: var(--fp-sans) !important;
  font-feature-settings: "kern" 1, "ss01" 1;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* Functional copy stays readable; 11px is reserved for telemetry only. */
.fp-main-nav a,
.fp-kicker,
.fp-primary-cta,
.fp-secondary-cta,
.fp-topic-track span,
.filter-btn,
#send,
#gbSend,
.fp-search-inner label,
.category-header::after {
  font-family: var(--fp-mono) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
}

.latest-section::before,
.weather-section::before,
.chat-section::before,
.news-section::before,
.visitor-counter,
.fp-scroll,
.weather-city,
.weather-localtime,
.time-display,
.news-source,
.news-date,
.yt-mini h3,
.fp-footer-bottom {
  font-family: var(--fp-mono) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
}

/* ------------------------------------------------------------
   Hero — same art direction, safer type geometry
   ------------------------------------------------------------ */

.fp-hero h1 {
  line-height: .94 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

.fp-line {
  overflow: hidden;
  padding-bottom: .30em !important;
  margin-bottom: -.24em !important;
}

html.fp-hero-settled .fp-line {
  overflow: visible;
}

.fp-hero-copy {
  line-height: 1.48;
}

/* Particle field and continuous topic ticker are intentionally retained.
   Their only animated properties remain transform/opacity. */
.fp-topic-track {
  will-change: transform;
}

.fp-topic-ticker:focus-within .fp-topic-track,
.fp-topic-ticker:hover .fp-topic-track,
.fp-topic-ticker.is-paused .fp-topic-track {
  animation-play-state: paused;
}

.fp-topic-ticker {
  position: relative;
}

.fp-ticker-toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: max(10px, var(--fp-pad));
  min-width: 58px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(158, 180, 255, .22);
  border-radius: 999px;
  color: rgba(230, 240, 255, .78);
  background: #0b0d12;
  font-family: var(--fp-mono);
  font-size: 11px;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
}

/* ------------------------------------------------------------
   Live weather dock — all 23 places are visible in the first scene
   ------------------------------------------------------------ */

html.fp-weather-docked .fp-hero {
  min-height: max(820px, 100svh) !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
}

html.fp-weather-docked .fp-hero-content {
  grid-row: 1;
  align-self: center;
  padding-top: 104px !important;
  padding-bottom: 26px !important;
}

html.fp-weather-docked .fp-hero > .weather-section {
  --fp-ink: #edf0f7;
  --fp-muted: #9aa5b5;
  --fp-line: rgba(158, 180, 255, .17);
  --fp-card: rgba(14, 18, 26, .92);
  grid-row: 2;
  position: relative;
  z-index: 3;
  width: auto !important;
  max-width: none !important;
  margin: 0 var(--fp-pad) 18px !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow heading time"
    "weather weather weather";
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  color: var(--fp-ink) !important;
  border-color: var(--fp-line) !important;
  background: rgba(8, 11, 16, .94) !important;
  opacity: 1 !important;
  transform: none !important;
}

html.fp-weather-docked .fp-hero > .weather-section::before {
  content: "LIVE" !important;
  grid-area: eyebrow;
  width: auto;
  margin: 0 !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(111, 227, 255, .32) !important;
  border-radius: 999px;
  color: var(--fp-cyan) !important;
  line-height: 1;
}

html.fp-weather-docked .fp-hero > .weather-section .weather-header {
  grid-area: heading;
  margin: 0 !important;
  color: #edf0f7 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap;
}

html.fp-weather-docked .fp-hero > .weather-section .time-display {
  grid-area: time;
  margin: 0 !important;
  color: #9aa5b5 !important;
  text-align: right;
  white-space: nowrap;
}

html.fp-weather-docked .fp-hero > .weather-section .weather-container {
  grid-area: weather;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  overflow: visible !important;
}

html.fp-weather-docked .fp-hero > .weather-section .weather-card {
  position: relative;
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 5px 6px !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-areas:
    "icon temp"
    "city city"
    "local local";
  align-content: center;
  column-gap: 4px;
  row-gap: 0;
  text-align: left !important;
  border-color: var(--fp-line) !important;
  background: var(--fp-card) !important;
  overflow: hidden;
  transition: opacity var(--motion-micro) linear !important;
}

html.fp-weather-docked .weather-icon {
  grid-area: icon;
  align-self: center;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1;
}

html.fp-weather-docked .weather-temp {
  grid-area: temp;
  align-self: center;
  min-width: 0;
  margin: 0 !important;
  color: #edf0f7 !important;
  font-size: 13px !important;
  line-height: 1;
  white-space: nowrap;
}

html.fp-weather-docked .weather-city {
  grid-area: city;
  min-width: 0;
  margin: 2px 0 0 !important;
  color: #b6c0c8 !important;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.fp-weather-docked .weather-localtime {
  grid-area: local;
  margin: 1px 0 0 !important;
  color: #7f8b9a !important;
  font-size: 10px !important;
  line-height: 1;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Consoles — independent desktop columns, one controlled panel on mobile
   ------------------------------------------------------------ */

.fp-console-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--fp-console-gap) !important;
  align-items: stretch !important;
}

#main-content > .fp-console-grid {
  margin-bottom: 90px !important;
}

.fp-console-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fp-console-gap);
  min-width: 0;
}

.fp-console-row > section,
.fp-console-grid > .fp-console-youtube {
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

.fp-console-grid .chat-header,
.fp-console-grid .news-header {
  min-height: 0;
  margin-bottom: 28px !important;
  font-size: clamp(32px, 3.3vw, 52px) !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}

.fp-console-chat #chat {
  height: 360px !important;
  min-height: 360px;
}

.fp-console-chat #composer {
  flex: 0 0 auto;
}

/* The guestbook feed stays intentionally compact so it doesn't outgrow the
   chat panel it now sits beside; every entry remains available by scrolling. */
.fp-console-guestbook #gbList {
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(72, 214, 255, .5) transparent;
}

.fp-console-guestbook #gbList::-webkit-scrollbar { width: 5px; }
.fp-console-guestbook #gbList::-webkit-scrollbar-thumb {
  background: rgba(72, 214, 255, .5);
  border-radius: 99px;
}

/* The visual reading order of the console row remains 03 → 05. */
.chat-section.fp-console-youtube::before {
  content: "05 — BEWEGTBILD" !important;
}

#composer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch !important;
  gap: 8px !important;
}

#input {
  width: 100%;
  min-height: 48px !important;
  max-height: 168px;
  padding-block: 12px !important;
  line-height: 1.45 !important;
  overflow-y: hidden !important;
  resize: none;
}

#send {
  min-width: 92px;
  min-height: 48px;
  align-self: stretch !important;
}

.fp-console-tabs {
  display: none;
}

.fp-console-tabs[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------
   Categories and search
   ------------------------------------------------------------ */

/* Retain the original controls/IDs for integration safety, but remove the
   redundant filter row from visual and keyboard flow. */
.filter-nav {
  display: none !important;
}

.content-wrapper {
  margin-top: 0 !important;
}

.category-section {
  scroll-margin-top: 84px;
}

.category-header {
  transition: transform var(--motion-ui) var(--ease-mechanical), opacity var(--motion-ui) linear !important;
}

.category-title {
  text-wrap: balance;
}

html.fp-js .category-title::after {
  transition: transform var(--motion-ui) var(--ease-mechanical) !important;
}

.category-section > .grid.fp-stagger > * {
  transition-duration: var(--motion-reveal) !important;
  transition-timing-function: var(--ease-system) !important;
}

.fp-search-overlay {
  transition: opacity var(--motion-ui) linear, visibility 0s linear var(--motion-ui) !important;
}

.fp-search-overlay.is-open {
  transition-delay: 0s !important;
}

.fp-search-inner {
  transition: transform var(--motion-ui) var(--ease-expand), opacity var(--motion-ui) linear !important;
}

.fp-search-close {
  transition: transform var(--motion-ui) var(--ease-mechanical), opacity var(--motion-micro) linear !important;
}

body.fp-search-active > :not(.fp-search-overlay):not(script) {
  pointer-events: none;
  user-select: none;
}

/* Clear, persistent keyboard focus. */
:where(a, button, input, textarea, [role="button"]):focus-visible {
  outline: 2px solid #c9f4f6 !important;
  outline-offset: 3px !important;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 720px) {
  .fp-main-nav a,
  .fp-primary-cta,
  .fp-secondary-cta,
  #send,
  #gbSend {
    font-size: 12px !important;
  }

  .fp-search-button {
    display: grid !important;
  }

  .fp-console-tabs {
    width: min(100%, 1460px);
    margin: 0 auto 12px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid var(--fp-line);
    border-radius: var(--fp-r);
    background: var(--fp-surface);
  }

  .fp-console-tab {
    min-width: 0;
    min-height: 44px;
    padding: 8px 4px;
    border: 0;
    border-radius: calc(var(--fp-r) - 1px);
    color: var(--fp-muted);
    background: transparent;
    font-family: var(--fp-mono);
    font-size: 11px;
    letter-spacing: .04em;
    cursor: pointer;
  }

  .fp-console-tab[aria-selected="true"] {
    color: #06121a;
    background: var(--fp-cyan);
  }

  .fp-console-grid {
    display: block !important;
    gap: 0 !important;
  }

  .fp-console-row {
    display: contents;
  }

  .fp-console-row > section[hidden],
  .fp-console-grid > .fp-console-youtube[hidden] {
    display: none !important;
  }

  .fp-console-row > section:not([hidden]),
  .fp-console-grid > .fp-console-youtube:not([hidden]) {
    height: auto;
  }

  .fp-console-grid .chat-header,
  .fp-console-grid .news-header {
    min-height: 0;
    font-size: clamp(30px, 9.5vw, 42px) !important;
  }

  .fp-console-chat #chat {
    height: 300px !important;
    min-height: 300px;
  }

  .category-header,
  #info-section .category-header {
    min-height: 176px !important;
  }

  .category-title {
    font-size: clamp(30px, 9vw, 40px) !important;
  }
}

@media (max-width: 560px) {
  html.fp-weather-docked .fp-hero {
    min-height: max(780px, 100svh) !important;
  }

  html.fp-weather-docked .fp-hero-content {
    align-self: center;
    padding: 76px 16px 16px !important;
  }

  .fp-kicker {
    margin-bottom: 14px !important;
    font-size: 10px !important;
  }

  .fp-hero h1 {
    max-width: 100%;
    font-size: clamp(43px, 12vw, 54px) !important;
    line-height: .96 !important;
    letter-spacing: -.04em !important;
  }

  .fp-hero-copy {
    max-width: 360px;
    margin-top: 17px !important;
    font-size: 13px !important;
    line-height: 1.42;
  }

  .fp-hero-actions {
    margin-top: 18px !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    gap: 12px 14px !important;
  }

  .fp-primary-cta {
    min-height: 44px;
    padding: 12px 14px !important;
    gap: 12px !important;
  }

  .fp-secondary-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-bottom: 0 !important;
  }

  .fp-scroll {
    display: none !important;
  }

  html.fp-weather-docked .fp-hero > .weather-section {
    margin: 0 10px 10px !important;
    padding: 8px !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "eyebrow heading"
      "time time"
      "weather weather";
    column-gap: 8px;
    row-gap: 5px;
  }

  html.fp-weather-docked .fp-hero > .weather-section .weather-header {
    font-size: 15px !important;
  }

  html.fp-weather-docked .fp-hero > .weather-section .time-display {
    text-align: left;
    font-size: 9px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html.fp-weather-docked .fp-hero > .weather-section .weather-container {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  html.fp-weather-docked .fp-hero > .weather-section .weather-card {
    min-height: 58px !important;
    padding: 4px 5px !important;
    grid-template-columns: 15px minmax(0, 1fr);
    column-gap: 3px;
  }

  html.fp-weather-docked .weather-icon {
    font-size: 12px !important;
  }

  html.fp-weather-docked .weather-temp {
    font-size: 12px !important;
  }

  html.fp-weather-docked .weather-city {
    display: -webkit-box;
    font-size: 11px !important;
    letter-spacing: .02em !important;
    text-transform: none;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html.fp-weather-docked .weather-localtime {
    font-size: 10px !important;
  }

  #main-content {
    padding-top: 64px !important;
  }

  #composer {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #send {
    width: 100%;
    min-height: 48px;
  }

  .fp-console-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Short phones need a denser first scene so all live weather remains visible
   without sacrificing any city or data field. */
@media (max-width: 560px) and (max-height: 700px) {
  html.fp-weather-docked .fp-hero {
    min-height: 100svh !important;
  }

  html.fp-weather-docked .fp-hero-content {
    padding: 64px 14px 7px !important;
  }

  .fp-kicker {
    display: none !important;
  }

  .fp-hero h1 {
    font-size: clamp(35px, 10.5vw, 42px) !important;
    line-height: .94 !important;
  }

  .fp-hero-copy {
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.28;
  }

  .fp-hero-actions {
    margin-top: 8px !important;
    gap: 6px 10px !important;
  }

  .fp-primary-cta,
  .fp-secondary-cta {
    min-height: 38px;
    font-size: 10px !important;
  }

  .fp-primary-cta {
    padding: 8px 10px !important;
  }

  html.fp-weather-docked .fp-hero > .weather-section {
    margin: 0 7px 6px !important;
    padding: 5px !important;
    row-gap: 3px;
  }

  html.fp-weather-docked .fp-hero > .weather-section::before {
    padding: 3px 5px !important;
    font-size: 9px !important;
  }

  html.fp-weather-docked .fp-hero > .weather-section .weather-header {
    font-size: 13px !important;
  }

  html.fp-weather-docked .fp-hero > .weather-section .time-display {
    display: none;
  }

  html.fp-weather-docked .fp-hero > .weather-section .weather-container {
    gap: 2px !important;
  }

  html.fp-weather-docked .fp-hero > .weather-section .weather-card {
    min-height: 47px !important;
    padding: 3px 4px !important;
  }

  html.fp-weather-docked .weather-icon {
    font-size: 11px !important;
  }

  html.fp-weather-docked .weather-temp {
    font-size: 11px !important;
  }

  html.fp-weather-docked .weather-city {
    display: block;
    font-size: 9.5px !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  html.fp-weather-docked .weather-localtime {
    font-size: 8.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .fp-hero-media canvas,
  .fp-topic-track,
  .fp-scroll i::after {
    animation: none !important;
    transform: none !important;
  }

  .fp-hero-media canvas {
    display: none !important;
  }

  .fp-line,
  .fp-line-inner,
  .fp-reveal,
  .fp-stagger > * {
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

html.fp-live-reduced-motion {
  scroll-behavior: auto !important;
}

html.fp-live-reduced-motion .fp-hero-media canvas {
  display: none !important;
}

html.fp-live-reduced-motion .fp-topic-track,
html.fp-live-reduced-motion .fp-scroll i::after,
html.fp-live-reduced-motion .fp-line-inner,
html.fp-live-reduced-motion .fp-reveal,
html.fp-live-reduced-motion .fp-stagger > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-transparency: reduce) {
  .fp-site-header.is-scrolled,
  html.fp-weather-docked .fp-hero > .weather-section,
  .fp-search-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}