/* =============================================
   FUNCTIONAL.CSS – Layout & Struktur (theme-unabhängig)
   Immer geladen. Keine Farben, Fonts oder Bevel hier.
   ============================================= */

/* =============================================
   1. LAYOUT-VARIABLEN
   ============================================= */
:root {
  --gap: 10px;
  --btn: 44px;
  --pad: 10px;
}

/* =============================================
   2. RESET + BASIS
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

/* =============================================
   3. LAYER 0 – CANVAS ZONE (Untergrund)
   ============================================= */
#canvasZone { position: fixed; inset: 0; }

.renderCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  outline: none;
  transition: filter 0.4s ease;
}

#canvasZone.blurred .renderCanvas {
  filter: blur(8px) brightness(0.85);
}

/* =============================================
   4. LAYER 1 – BLOG/JOURNAL (Overlay)
   ============================================= */
#blogLayer {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  padding: 16px 16px 0 16px; /* kein padding-bottom, footer schließt bündig */
  overflow: hidden;           /* kein äußeres Scrolling */
}

#blogLayer > .blog {
  pointer-events: auto;
  width: min(880px, 100%);
  margin: 0 auto;
}

/* =============================================
   5. LAYER 2 – LOGO OVERLAY
   ============================================= */
#uiOverlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 10;
}

#logo {
  position: fixed;
  right: 5%; bottom: 5%;
  width: min(220px, 22vw);
  aspect-ratio: 1/1;
  background: center/contain no-repeat url("./logo.png");
  z-index: 11;
  pointer-events: none;
}

/* =============================================
   6. LAYER 3 – RIGHT STACK
   ============================================= */
#rightStack {
  position: fixed;
  top: 16px; right: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: flex-end;
  z-index: 30;
  pointer-events: none;
}
#rightStack > * { pointer-events: auto; }

/* =============================================
   7a. SIM-STATUS (über der Konsole, gleiche Breite)
   ============================================= */
#simStatus {
  position: fixed;
  left: 14px;
  bottom: 190px;   /* 14px (console bottom) + 170px (console height) + 6px gap */
  z-index: 35;
  display: flex;
  align-items: flex-end;    /* bar sits at bottom of cube */
  gap: 3px;                 /* 2/3 less than 10px */
  pointer-events: none;
  transition: opacity 800ms ease, bottom 500ms ease;
}
#simStatus.is-hidden { opacity: 0; }

/* Wenn Konsole collapsed, simStatus nach unten schieben */
#simStatus.console-collapsed {
  bottom: 68px;    /* 14px + 44px (btn) + 10px gap */
  transition: opacity 800ms ease, bottom 500ms ease;
}

.sim-cube {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

/* Rechte Seite: Label oben, Balken ganz unten (mit padding) */
.sim-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  width: 200px;              /* feste Breite, unabhaengig vom Label */
  height: 96px;              /* match cube height */
  padding-bottom: 6px;       /* bar ends slightly before cube edge */
}

.sim-bar-wrap {
  padding-right: 8px;        /* bar doesn't reach all the way to the right edge */
}

.sim-bar {
  width: 100%;
  height: 18px;              /* etwas dicker, besser sichtbar */
  overflow: hidden;
  position: relative;
}

.sim-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0%;
  transition: width 200ms linear;
}

.sim-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================
   7b. LAYER 4 – CONSOLE (collapsible, Snackbar-Pattern)
   ============================================= */
#chatConsole {
  position: fixed;
  left: 14px; bottom: 14px;
  width: min(420px, 36vw);
  height: 170px;
  z-index: 35;
  overflow: visible;
  transition: width 360ms ease, height 360ms ease;
}

/* Collapsed: nur Tab-Button sichtbar */
#chatConsole.is-collapsed {
  width: var(--btn);
  height: var(--btn);
}
#chatConsole.is-collapsed .console-body { display: none; }

/* Tab-Button (links neben der Konsole, analog snackbar-tab) */
.console-tab {
  position: absolute;
  right: -52px;
  top: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#chatConsole.is-collapsed .console-tab {
  position: relative;
  right: 0; top: 0;
  width: var(--btn);
  height: var(--btn);
}

/* Console body wrapper */
.console-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* =============================================
   8. LAYER 5 – SINGLETON WINDOWS
   ============================================= */
.singleton {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 45;
  display: none;
  width: min(720px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 28px));
  pointer-events: auto;
}
.singleton.is-open { display: block; }

/* =============================================
   9. LAYER 6 – POPUP LAYER
   ============================================= */
#popupLayer {
  position: fixed; inset: 0;
  z-index: 50;
  pointer-events: none;
}

/* =============================================
   10. PLAY-BUTTON
   ============================================= */
#uiButton {
  width: var(--btn);
  height: var(--btn);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}

/* =============================================
   11. SLOT-BUTTONS (SET, HELP, MOD, ...)
   ============================================= */
.slotBtn {
  width: var(--btn);
  height: var(--btn);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}

/* =============================================
   12. SNACKBAR / QUICKSAVE
   ============================================= */
.snackbar {
  width: 360px;
  position: relative;
  overflow: visible;
  transition: width 360ms ease, height 360ms ease;
}
.snackbar.is-collapsed {
  width: var(--btn);
  height: var(--btn);
}
.snackbar.is-collapsed .snackbar-body { display: none; }

.snackbar-tab {
  position: absolute;
  left: -52px;
  top: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.snackbar.is-collapsed .snackbar-tab {
  position: relative;
  left: 0; top: 0;
  width: var(--btn);
  height: var(--btn);
}

.snackbar-body { padding: var(--pad); }

#quickSaveForm {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.qs-title {
  grid-column: 1/-1;
}

#emailInput {
  min-width: 0;
}

#saveStatus {
  grid-column: 1/-1;
  min-height: 1.2em;
}

/* =============================================
   13. SINGLETON INNER – Bar, Content
   ============================================= */
.singleton .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.singleton .bar .title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.singleton .bar .xbtn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.singleton .content {
  overflow: auto;
  max-height: calc(560px - 38px);
}

/* =============================================
   13b. SETTINGS PANEL – Layout
   ============================================= */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px 0;
}

.setting-row label {
  min-width: 60px;
}

.setting-btn {
  padding: 6px 14px;
  cursor: pointer;
  min-width: 90px;
  text-align: center;
}

.setting-select {
  padding: 6px 10px;
  cursor: pointer;
  min-width: 140px;
}

.setting-input {
  padding: 6px 10px;
  min-width: 0;
  flex: 1;
  max-width: 200px;
  outline: none;
}

.avatar-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* =============================================
   13c. MOD SANDBOX – Layout
   ============================================= */
.mod-header {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}

.mod-select {
  flex: 1;
  padding: 6px 8px;
}

.mod-reload-btn {
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.mod-container {
  min-height: 200px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 10px;
}

.mod-placeholder {
  text-align: center;
  padding: 40px 20px;
  font-style: italic;
}

/* =============================================
   13d. DOC/WIKI – Layout
   ============================================= */
.wiki-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}

.wiki-select {
  flex: 1;
  padding: 6px 8px;
}

.wiki-reload-btn {
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.wiki-body {
  min-height: 200px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 10px;
  line-height: 1.6;
}

.wiki-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px 0;
}

.wiki-body h1, .wiki-body h2, .wiki-body h3 {
  margin: 16px 0 8px 0;
}

.wiki-body h1:first-child,
.wiki-body h2:first-child,
.wiki-body h3:first-child {
  margin-top: 0;
}

.wiki-body p {
  margin: 0 0 8px 0;
}

.wiki-body pre {
  padding: 8px;
  overflow-x: auto;
  margin: 8px 0;
}

.wiki-body code {
  padding: 1px 4px;
}

.wiki-section {
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.wiki-section:not(:last-child) {
  border-bottom: 1px solid var(--rule, #ccc);
}

.wiki-placeholder {
  text-align: center;
  padding: 40px 20px;
  font-style: italic;
}

/* =============================================
   14. CONSOLE – Layout
   ============================================= */
#chatConsole {
  pointer-events: auto;
}

#chatConsole .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  flex-shrink: 0;
}

#chatConsole .body {
  flex: 1;
  overflow: auto;
}

.chatLine {
  margin: 0 0 6px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =============================================
   15. POPUP WINDOWS – Layout
   ============================================= */
.popup {
  position: absolute;
  width: 320px;
  pointer-events: auto;
}

.popup .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: move;
  user-select: none;
}

.popup .bar .title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup .bar .xbtn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.popup .body {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: start;
}

.popup .iconBox {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.popup .iconBox img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.popup .footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* =============================================
   16. BLOG HEADER – Layout (inside scrollable main)
   ============================================= */
.blogHeader {
  position: relative;
  z-index: 3;               /* above scrollbar track */
  overflow: hidden;
  min-height: 238px;
  padding: 0;
  margin: -12px -17px 0 -12px; /* flush + rechts über scrollbar (5px) */
  border-radius: 4px 4px 0 0;
}

.blogHeader .headerCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Logo: links, vertikal zentriert im Header */
.hdr-logo {
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.hdr-logo img {
  height: calc(85% - 28px);    /* 85% dezenter */
  max-height: 178px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* Wetter-Overlay: eine Zeile, rechts unten im Header */
.hdr-weather {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  font-size: 0.88em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 24px;        /* deutlicher Abstand zwischen Temp- und Wind-Gruppe */
}

.pw-row {
  display: flex;
  align-items: center;
  gap: 4px;         /* Symbol eng an eigenen Text */
}

/* Sprite icons: 72×72 per frame in 288×72 sheets, displayed at 50px (70%) */
.pw-sprite {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: 200px 50px; /* 288*(50/72)=200, scaled down */
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  flex-shrink: 0;
}

.pw-sprite-temp {
  background-image: url("symbols/temperatur.png");
  /* frame 0=cold-blue, 1=cool-blue, 2=warm-red, 3=hot-red */
}

.pw-sprite-wind {
  background-image: url("symbols/wind_sock.png");
  /* frame 0=calm, 1=light, 2=moderate, 3=strong */
}

/* data-frame selects the visible sprite (0-3) */
.pw-sprite[data-frame="0"] { background-position: 0 0; }
.pw-sprite[data-frame="1"] { background-position: -50px 0; }
.pw-sprite[data-frame="2"] { background-position: -100px 0; }
.pw-sprite[data-frame="3"] { background-position: -150px 0; }

.hdr-weather .pw-temp {
  font-size: 1.2em;
  font-weight: bold;
}

.hdr-weather .pw-detail {
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  opacity: 1;
}

.hdr-weather .tide-line {
  margin: 4px 0 0;
  font-size: 0.82em;
  opacity: 0.85;
}

/* =============================================
   17. BLOG MAIN – Layout
   ============================================= */
#blogLayer > main.blog {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  margin-bottom: 0;

  /* Minimale Scrollbar: dünner grauer Fleck */
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,0.35) transparent;
}
#blogLayer > main.blog::-webkit-scrollbar {
  width: 5px;
}
#blogLayer > main.blog::-webkit-scrollbar-track {
  background: transparent;
}
#blogLayer > main.blog::-webkit-scrollbar-thumb {
  background: rgba(128,128,128,0.35);
  border-radius: 3px;
}
#blogLayer > main.blog::-webkit-scrollbar-thumb:hover {
  background: rgba(128,128,128,0.55);
}

/* Pinned panels */
.panel.pinned {
  padding: 12px;
  margin: 0;
}

.panelActions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Panel weather row */
.panel-label {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin-bottom: 6px;
}

.panel-weather {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pw-icon { font-size: 1.3em; }
.pw-temp { font-weight: bold; font-size: 1.1em; }
.pw-detail { font-size: 0.82em; opacity: 0.75; }

.tide-line {
  margin: 4px 0;
  font-size: 0.88em;
  letter-spacing: 0.02em;
}

.tide-note {
  margin: 4px 0 0;
  font-size: 0.8em;
  font-style: italic;
  opacity: 0.7;
}

/* Blog posts */
.blog-post {
  margin: 0;
  padding: 18px 16px;
  line-height: 1.65;
}

.blog-post h2 {
  margin: 0 0 10px 0;
  font-size: 1.15em;
  line-height: 1.35;
}

.blog-post p {
  margin: 0 0 12px 0;
  font-size: 0.92em;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.75em;
  opacity: 0.6;
}

.post-tag {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Blog images */
.post-img {
  margin: 14px 0;
}

.post-img img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.post-img figcaption {
  font-size: 0.76em;
  opacity: 0.6;
  margin-top: 6px;
  line-height: 1.4;
  font-style: italic;
}

/* Blog asides (Fundstück, Morgen-Vorschau) */
.blog-aside {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid currentColor;
  opacity: 0.85;
}

.aside-label {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin-bottom: 8px;
}

.blog-aside p {
  font-size: 0.88em;
  line-height: 1.6;
  margin: 0;
}

/* =============================================
   18. BLOG FOOTER – Layout
   ============================================= */
footer.blog {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 0 16px; /* eigenes bottom-padding statt blogLayer */
  border-top: none;
}

.footerLinks {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =============================================
   19. JIGGLE ANIMATION
   ============================================= */
@keyframes jiggle {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-3px); }
  40%  { transform: translateX(3px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.jiggle {
  animation: jiggle 350ms ease;
}

/* =============================================
   20. SCREEN READER ONLY
   ============================================= */
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =============================================
   21. RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  #chatConsole { width: min(420px, 60vw); height: 160px; }
}

@media (max-width: 520px) {
  #rightStack { right: 12px; top: 12px; }
  .snackbar { width: 92vw; }
  #chatConsole { width: calc(100vw - 24px); height: 150px; left: 12px; bottom: 12px; }
  #simStatus   { left: 12px; }
  .sim-cube    { width: 64px; height: 64px; }
  .sim-right   { height: 64px; width: 100px; }
}

/* =============================================
   22. MOBILE – Pure Blog Mode
   ============================================= */

/* Game-UI komplett ausblenden */
body.is-mobile #canvasZone,
body.is-mobile #uiOverlay,
body.is-mobile #rightStack,
body.is-mobile #simStatus,
body.is-mobile #chatConsole,
body.is-mobile #settingsWin,
body.is-mobile #helpWin,
body.is-mobile #modWin,
body.is-mobile #docWin,
body.is-mobile #popupLayer {
  display: none !important;
}

/* Blog: vom Game-Overlay zum normalen Dokument */
body.is-mobile #blogLayer {
  position: static;
  inset: auto;
  z-index: auto;
  pointer-events: auto;
  min-height: 100vh;
  padding: 0 12px;
}

body.is-mobile #blogLayer > .blog {
  pointer-events: auto;
}

body.is-mobile #blogLayer > main.blog {
  overflow: visible;
}