/*
 * home.css — Home-Bildschirm im iOS-15-Stil: Statusleiste, App-Raster,
 * Benachrichtigungen (unter dem Logo), Werbespiel-Widget (rechts unten), Glas-Dock. App-Icons: .app-icon / .app-tile.
 */

.home {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  transition: opacity var(--transition-app), transform var(--transition-app), filter var(--transition-app);
}

body.is-booting .home {
  opacity: 0;
  transform: scale(1.06);
}

body.has-app .home {
  transform: scale(0.94);
  filter: blur(6px);
  opacity: 0.5;
}

/* ---------- Statusleiste ---------- */

.statusbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: calc(var(--statusbar-h) + var(--safe-top));
  padding: var(--safe-top) calc(var(--gutter) + 8px) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Home: Ton links oben, Sprache · Vollbild rechts oben (Reihenfolge per order, Markup wie in der Kopfleiste) */
.statusbar-tools {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.statusbar-tools .sound-toggle {
  margin-right: auto;
}

.statusbar-tools .lang-toggle {
  order: 1;
}

.statusbar-tools .fs-toggle {
  order: 2;
}

/* Vollbild-Knopf: Pfeile nach aussen (an) bzw. innen (aus) */
.statusbar-btn {
  width: 28px;
  height: 28px;
}

.statusbar-btn svg {
  width: 15px;
  height: 15px;
}

.statusbar-btn.sys-btn {
  width: auto;
  min-width: 28px;
}

.lang-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border: 1px solid var(--bar-fg-faint);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

/* ---------- Inhalt ---------- */

.home-body {
  touch-action: pan-y;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2) var(--gutter) calc(var(--dock-space) + var(--safe-bottom) + var(--sp-4));
}

/* ---------- Logo oben mittig (volle Wortmarke) ---------- */

.home-logo {
  align-self: center;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.home-logo .logo-mark {
  width: 64px;
  height: 64px;
}

.app-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--slot-gap);
  width: min(100%, calc(var(--grid-max-cols) * var(--slot) + (var(--grid-max-cols) - 1) * var(--slot-gap)));
  margin: auto;
}

/* Wischen zwischen Live und Werkstatt: Raster gleitet von der Seite herein */
.app-grid.is-from-right {
  animation: grid-in-right 300ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.app-grid.is-from-left {
  animation: grid-in-left 300ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

@keyframes grid-in-right {
  from { opacity: 0; transform: translateX(40px); }
}

@keyframes grid-in-left {
  from { opacity: 0; transform: translateX(-40px); }
}

.app-grid .app-icon {
  width: var(--slot);
  min-height: var(--slot);
  justify-content: center;
}

/* ---------- App-Icon ---------- */

.app-icon {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--bar-fg);
}

.app-icon:focus-visible {
  outline: none;
}

.app-icon:focus-visible .app-tile {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7);
}

.app-tile {
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  border-radius: calc(var(--icon-size) * 0.2237);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #3a3a3c, #1c1c1e);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.app-icon:hover .app-tile {
  transform: translateY(-2px);
}

.app-icon:active .app-tile {
  transform: scale(0.9);
  filter: brightness(0.75);
}

.app-tile svg {
  width: calc(var(--icon-size) * 0.5);
  height: calc(var(--icon-size) * 0.5);
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Illustriertes Icon (Manifest "image"): Bild fuellt die Kachel */
.app-tile-image {
  overflow: hidden;
  background: none;
}

.app-tile-image img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Kachel + Badge: Badge sitzt auf der rechten oberen Ecke der Kachel und ueberlagert sie */
.app-tile-box {
  position: relative;
  display: block;
}

.app-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  z-index: 1;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--warn);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Desktop-Umschalter (Live · Werkstatt) wie der Tab-Wechsler in ao – mittig ueber dem Dock
   (Dock-Hoehe = Icon + Beschriftung + 2 × 13px Innenabstand + 2px Rand) */
.desktops {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + var(--footer-space) + var(--dock-icon) + var(--dock-label) + 28px + var(--sp-3));
  z-index: 12;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.desktop-tab {
  appearance: none;
  border: 0;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--bar-fg-dim);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* Admins: Neu laden, klein rechts neben den Tabs */
.desktop-reload {
  appearance: none;
  display: grid;
  place-items: center;
  width: 34px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bar-fg-dim);
  cursor: pointer;
}

.desktop-reload:hover,
.desktop-reload:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--bar-fg);
  outline: none;
}

.desktop-reload svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.desktop-tab.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: var(--bar-fg);
}

.desktop-tab[data-desktop="demo"].is-active {
  background: #ff9f0a;
  color: #1c1203;
}

.desktop-tab[data-desktop="lab"].is-active {
  background: #bf5af2;
  color: #fff;
}

/* Werkstatt: lila Rahmen ums ganze OS, damit man nie verwechselt, wo man ist */
body.is-lab .home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  border: 3px solid rgba(191, 90, 242, 0.55);
  pointer-events: none;
}

.app-badge.is-off {
  background: #636366;
  color: #fff;
}

.app-badge.is-dev {
  background: #bf5af2;
  color: #fff;
}

/* Entwicklungsversion (?dev=…): Band unten, damit niemand live und dev verwechselt */
.dev-ribbon {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  padding: 2px 12px;
  border-radius: 8px 8px 0 0;
  background: #bf5af2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.app-label {
  max-width: var(--slot);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Farbflaechen (Manifest "tint") */
.tint-studio { background: linear-gradient(180deg, #161616, #000); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.tint-gray   { background: linear-gradient(180deg, #8e8e93, #48484a); }
.tint-blue   { background: linear-gradient(180deg, #4aa3ff, #0a5cd8); }
.tint-indigo { background: linear-gradient(180deg, #7d7aff, #4433c9); }
.tint-purple { background: linear-gradient(180deg, #c77dff, #7a2fd1); }
.tint-pink   { background: linear-gradient(180deg, #ff6b9a, #d6245d); }
.tint-red    { background: linear-gradient(180deg, #ff6b5f, #d1281c); }
.tint-orange { background: linear-gradient(180deg, #ffb340, #f06a00); }
.tint-yellow { background: linear-gradient(180deg, #ffe066, #f5b400); }
.tint-green  { background: linear-gradient(180deg, #5be37a, #1c9c3c); }
.tint-teal   { background: linear-gradient(180deg, #5fd4e8, #0b8aa6); }

/* ---------- Widgets ---------- */

/*
 * Benachrichtigungen (js/notify.js) direkt unter dem Logo: dunkles Glas, weisse Schrift,
 * je Karte ein Schliessen-Knopf. Karten mit Aktion (Spiel, Chat) sind klickbar.
 */
.notes {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(100%, calc(440px + var(--icon-size) / 2));
  margin-top: var(--sp-4);
}

.notes:empty {
  display: none;
}

.note {
  position: relative;
  padding: var(--sp-3) calc(var(--sp-4) + var(--icon-size) / 4);
  border-radius: var(--radius-xl);
  background: rgba(8, 16, 30, 0.5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  color: #fff;
  text-align: center;
  animation: note-in 320ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.note.is-action {
  cursor: pointer;
}

.note.is-action:hover,
.note.is-action:focus-visible {
  background: rgba(8, 16, 30, 0.62);
  outline: none;
}

@keyframes note-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.note-title {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
}

.note-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.note-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.note-close:hover,
.note-close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  outline: none;
}

.note-close svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/*
 * Werbespiel rechts unten: zugeklappt nur .promo-line (Typo wie Impressum, auf
 * Hoehe des Impressums), aufgeklappt (Hover, Fokus, .is-open nach Tippen) das
 * volle Widget darueber – mit dem Lichtstreifen-Effekt.
 */
.widgets {
  position: absolute;
  right: clamp(var(--gutter), 3vw, 40px);
  bottom: calc(var(--safe-bottom) + var(--footer-space));
}

.promo {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--safe-bottom) + 8px);
  z-index: 13;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  max-width: calc(100vw - 2 * var(--gutter));
  font-size: 11px;
  color: var(--bar-fg-faint);
}

.promo-line {
  max-width: 100%;
  padding: 2px 0 2px var(--sp-2);
}

.promo-phrase {
  display: inline-block;
  transition: opacity 600ms ease, transform 600ms ease;
}

.promo-phrase.is-fading {
  opacity: 0;
  transform: translateY(3px);
}

.promo .widget-promo {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 300ms ease, transform 350ms cubic-bezier(0.2, 0.9, 0.25, 1.1), visibility 0s linear 350ms, box-shadow 300ms ease;
}

.promo:hover .widget-promo,
.promo:focus-within .widget-promo,
.promo.is-open .widget-promo {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 300ms ease, transform 350ms cubic-bezier(0.2, 0.9, 0.25, 1.1), box-shadow 300ms ease;
}

.promo:hover .promo-line,
.promo.is-open .promo-line {
  color: var(--bar-fg-dim);
}

.widget {
  width: 300px;
  padding: var(--sp-4);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/*
 * Werbespiel-Widget, kompakt. Offen: ein Lichtstreifen laeuft um den Rand (.widget-ring, 1.5px-Ring
 * per Maske), dahinter leuchtet derselbe Verlauf weich (.widget-glow). Gedreht wird ein grosses
 * Quadrat mit conic-gradient per transform – laeuft auch in Safari (iPhone/iPad), anders als eine
 * animierte CSS-Variable (@property), die Safari nicht an Pseudo-Elemente weitergibt.
 */
.widget-promo {
  appearance: none;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 264px;
  padding: var(--sp-3) var(--sp-4);
  color: var(--bar-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: box-shadow 300ms ease;
}

/* Glasflaeche als eigene Ebene: liegt ueber dem Glow, unter dem Inhalt */
.widget-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  transition: background 300ms ease, border-color 300ms ease;
}

.widget-ring,
.widget-glow {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.widget-ring {
  inset: -1px;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity 400ms ease;
}

.widget-glow {
  inset: -4px;
  z-index: -2;
  filter: blur(22px);
  transition: opacity 500ms ease;
}

.widget-ring::before,
.widget-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  aspect-ratio: 1;
  background: conic-gradient(transparent 0 62%, #4aa3ff 74%, #ffffff 82%, #c77dff 90%, transparent 100%);
  transform: translate(-50%, -50%) rotate(0deg);
}

.promo:hover .widget-promo,
.promo:focus-within .widget-promo,
.promo.is-open .widget-promo {
  box-shadow: 0 10px 40px rgba(20, 80, 200, 0.3);
  outline: none;
}

.promo:hover .widget-promo::before,
.promo:focus-within .widget-promo::before,
.promo.is-open .widget-promo::before {
  background: var(--glass-strong);
  border-color: rgba(255, 255, 255, 0.2);
}

.promo:hover .widget-ring,
.promo:focus-within .widget-ring,
.promo.is-open .widget-ring {
  opacity: 1;
}

.promo:hover .widget-glow,
.promo:focus-within .widget-glow,
.promo.is-open .widget-glow {
  opacity: 0.8;
}

.promo:hover .widget-ring::before,
.promo:focus-within .widget-ring::before,
.promo.is-open .widget-ring::before,
.promo:hover .widget-glow::before,
.promo:focus-within .widget-glow::before,
.promo.is-open .widget-glow::before {
  animation: promo-spin 3.2s linear infinite;
}

@keyframes promo-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* "Bewegung reduzieren" (iOS, Windows "Animationseffekte" aus): der Lichtstreifen laeuft trotzdem,
   nur langsamer – gewollt; ueberstimmt die 1ms-Regel aus tokens.css */
@media (prefers-reduced-motion: reduce) {
  .promo:hover .widget-ring::before,
  .promo:focus-within .widget-ring::before,
  .promo.is-open .widget-ring::before,
  .promo:hover .widget-glow::before,
  .promo:focus-within .widget-glow::before,
  .promo.is-open .widget-glow::before {
    animation-duration: 6s !important;
  }
}

.widget-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.widget-promo .widget-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.widget-promo .widget-title {
  margin: 0;
  font-size: var(--fs-md);
}

.widget-promo .widget-text {
  margin-top: var(--sp-1);
  font-size: 12.5px;
  line-height: 1.4;
}

.widget-cta {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--bar-fg);
}

.widget-mark {
  width: 34px;
  height: 34px;
  stroke-width: 2;
}

.widget-title {
  display: block;
  margin: var(--sp-2) 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.widget-text {
  display: block;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--bar-fg-dim);
}

/* ---------- Dock ---------- */

.dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + var(--footer-space));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 16px;
  border-radius: 30px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Umschalter sichtbar: App-Raster bleibt frei ueber ihm */
.home:has(.desktops:not([hidden])) .home-body {
  padding-bottom: calc(var(--dock-space) + var(--safe-bottom) + var(--sp-4) + 56px);
}

.dock:empty {
  display: none;
}

.dock .app-tile {
  --icon-size: var(--dock-icon);
}

/* Dock: Einzelwort unter jedem Icon (app.json "dockLabel") */
.dock .app-icon {
  gap: 4px;
}

.dock .app-label {
  max-width: calc(var(--dock-icon) + 18px);
  font-size: 11px;
  line-height: 14px;
  color: var(--bar-fg-dim);
}

/* ---------- Impressum-Zeile (immer sichtbar auf Home) ---------- */

.home-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 8px);
  z-index: 12;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 0 var(--gutter);
  font-size: 11px;
  pointer-events: none;
  color: var(--bar-fg-faint);
}

.imprint-line {
  appearance: none;
  border: 0;
  background: transparent;
  max-width: 100%;
  padding: 2px var(--sp-2);
  font-size: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Versionsnummer ganz links unten */
.home-version {
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* "Design & Code:" als ruhiger Text, nur der Name ist der Mail-Link */
.imprint-credit {
  white-space: nowrap;
}

.imprint-line,
.imprint-credit {
  pointer-events: auto;
}

.imprint-credit .imprint-line {
  padding: 2px 0;
}

.imprint-line:hover,
.imprint-line:focus-visible {
  color: var(--bar-fg-dim);
  outline: none;
}

/* Mittlere Breite: Widget ueber das Dock */
@media (min-width: 721px) and (max-width: 1100px) {
  .widgets {
    bottom: calc(var(--safe-bottom) + var(--dock-space));
  }
}

/* Smartphone: Werbespiel-Widget unter den Apps im Fluss */
@media (max-width: 720px) {
  .home-body {
    gap: var(--sp-6);
  }

  .home-logo .logo-mark {
    width: 48px;
    height: 48px;
  }

  .home-logo .logo-word {
    font-size: 18px;
  }

  /* Handy: eine Zeile mehr Platz unter dem Dock – Werbezeile ueber dem Impressum */
  :root {
    --footer-space: 50px;
  }

  .promo {
    left: var(--gutter);
    bottom: calc(var(--safe-bottom) + 28px);
  }

  .promo .widget-promo {
    width: min(100%, 360px);
  }

  .widget {
    width: 100%;
  }

}