/* LYNN · thema LANDSCHAP (bergen en meer, kleurt mee met het tijdstip van de dag; kleuren zet app.js) */
@font-face { font-family: 'Fredoka'; font-weight: 400; font-display: swap; src: url(fonts/fredoka-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url(fonts/fredoka-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url(fonts/fredoka-latin-700-normal.woff2) format('woff2'); }

:root {
  --nacht: #0d0620;
  --paars: #22103f;
  --paars-2: #2f1652;
  --lila: #b892ff;
  --lila-licht: #d9c2ff;
  --roze: #ff4fa3;
  --roze-licht: #ff9ad2;
  --groen-oog: #d8ff5c;
  --tekst: #fbf3ff;
  --zacht: #c8b4e6;
  --glas: rgba(28, 12, 52, .62);
  --rand: rgba(217, 194, 255, .22);
  --r: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--tekst);
  background: var(--l-voor, var(--nacht));
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
svg { display: block; }

.knop {
  border: 0; border-radius: 999px; padding: 14px 28px;
  background: linear-gradient(135deg, var(--roze), #b14dff);
  font-weight: 700; letter-spacing: .06em; font-size: 17px;
  box-shadow: 0 6px 22px rgba(255, 79, 163, .35);
}
.knop:active { transform: scale(.97); }
.knop.klein { padding: 10px 18px; font-size: 14px; min-width: 96px; }
.knop.licht { background: rgba(217, 194, 255, .16); box-shadow: none; border: 1px solid var(--rand); }
.knop.gevaar { background: rgba(255, 79, 123, .16); box-shadow: none; border: 1px solid rgba(255, 79, 123, .5); color: #ffb3c6; }
.knop.uit { background: rgba(217, 194, 255, .16); box-shadow: none; border: 1px solid var(--rand); }

.ikoon-knop {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: rgba(217, 194, 255, .12); display: grid; place-items: center; padding: 0;
}
.ikoon-knop svg { width: 24px; height: 24px; }

/* ---------- landschap ---------- */
:root {
  /* standaard = nacht; app.js zet ze elke minuut opnieuw */
  --l-top: #070b1f; --l-mid: #121a3f; --l-hor: #1f2a5c; --l-ver1: #1d2550; --l-ver2: #161d42; --l-mid2: #10163a;
  --l-dicht: #0b1029; --l-voor: #060914; --l-meer1: #1a2350; --l-meer2: #0a0f26; --l-zon: #fff3c4; --l-gloed: #ffd27a;
  --l-wolk: #2a3366; --l-wolkop: .35; --l-sterren: 1; --l-nevel: #2a3366; --l-spiegel: #e9ecff; --l-spiegelop: .12; --l-glans: #c9d2ff;
}
.landschap { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.landschap-svg { width: 100%; height: 100%; }
.s-top { stop-color: var(--l-top); } .s-mid { stop-color: var(--l-mid); } .s-hor { stop-color: var(--l-hor); }
.s-meer1 { stop-color: var(--l-meer1); } .s-meer2 { stop-color: var(--l-meer2); }
.s-gloed { stop-color: var(--l-gloed); } .s-nevel { stop-color: var(--l-nevel); }
.l-ver1 { fill: var(--l-ver1); } .l-ver2 { fill: var(--l-ver2); } .l-mid { fill: var(--l-mid2); }
.l-dicht { fill: var(--l-dicht); } .l-voor { fill: var(--l-voor); }
.l-zonbol { fill: var(--l-zon); }
.l-wolk { fill: var(--l-wolk); opacity: var(--l-wolkop); } .l-wolk.zacht { opacity: calc(var(--l-wolkop) * .7); }
.l-sterren { opacity: var(--l-sterren); }
.l-spiegel { fill: var(--l-spiegel); opacity: var(--l-spiegelop); }
.l-glans rect { fill: var(--l-glans); opacity: .35; }
.l-zon, .l-maan { transition: transform 2s; }
.landschap-svg path, .landschap-svg stop, .landschap-svg rect, .landschap-svg ellipse, .landschap-svg g { transition: fill 3s, stop-color 3s, opacity 3s; }
.flonker { animation: fl 4s ease-in-out infinite; } .f2 { animation-duration: 5.5s; animation-delay: -2s; } .f3 { animation-duration: 3.2s; animation-delay: -1s; }
@keyframes fl { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.vallend { animation: val 13s linear infinite; opacity: 0; }
@keyframes val { 0% { transform: translate(300px, 60px); opacity: 0; } 2% { opacity: 1; } 8% { transform: translate(720px, 240px); opacity: 0; } 100% { transform: translate(720px, 240px); opacity: 0; } }
.drijf { animation: drijf 140s linear infinite alternate; } .d2 { animation-duration: 200s; animation-direction: alternate-reverse; }
@keyframes drijf { from { transform: translateX(-120px); } to { transform: translateX(120px); } }
.glinster { animation: glinster 3s ease-in-out infinite; } .g2 { animation-delay: -1s; } .g3 { animation-delay: -2s; animation-duration: 4s; }
@keyframes glinster { 0%, 100% { opacity: .1; } 50% { opacity: .55; } }

/* ---------- koppelen ---------- */
.koppel { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.koppel-kaart {
  width: min(440px, 100%); padding: 32px 28px; text-align: center;
  background: var(--glas); border: 1px solid var(--rand); border-radius: 28px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.koppel-logo { border-radius: 24px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.koppel h1 { font-size: 30px; margin: 16px 0 20px; font-weight: 700; }
.rollen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rol {
  display: grid; justify-items: center; gap: 10px; padding: 18px 10px;
  border-radius: 20px; border: 2px solid var(--rand); background: rgba(217, 194, 255, .08);
  font-weight: 700; letter-spacing: .1em; font-size: 18px;
}
.rol[aria-checked="true"] { border-color: var(--roze); background: rgba(255, 79, 163, .16); box-shadow: 0 0 24px rgba(255, 79, 163, .3); }
.rol-ava { width: 64px; height: 64px; font-size: 30px; }
.code { margin-top: 22px; display: grid; gap: 12px; }
.code label { color: var(--zacht); }
.code input {
  font: inherit; font-size: 32px; letter-spacing: .4em; text-align: center; padding: 12px 8px 12px 20px;
  border-radius: 16px; border: 2px solid var(--rand); background: rgba(10, 4, 20, .6); color: var(--tekst); outline: none;
}
.code input:focus { border-color: var(--lila); }
.fout { color: #ffb3c6; min-height: 1.2em; margin: 0; }

/* ---------- avatars ---------- */
.ava, .rol-ava {
  border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden; font-weight: 700;
}
.ava { width: 44px; height: 44px; font-size: 20px; }
.ava-papa { background: linear-gradient(135deg, #4fb6ff, #6a4dff); color: #fff; }
.ava-lynn { background: linear-gradient(135deg, var(--roze), #b14dff); color: #fff; }

/* ---------- Lynn: HUB (tablet, liggend) ---------- */
.hub {
  height: 100%; display: grid; grid-template-rows: 1fr auto; padding: 4.5vh 5vw 7vh;
  position: relative;
}
.hub-kop { align-self: start; text-shadow: 0 2px 4px rgba(10, 8, 30, .35), 0 2px 24px rgba(10, 8, 30, .55); }
.klok { font-size: clamp(64px, 17vh, 150px); font-weight: 600; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.datum { font-size: clamp(18px, 4vh, 30px); color: var(--lila-licht); margin-top: .4vh; text-transform: lowercase; }
.groet { font-size: clamp(22px, 5vh, 38px); font-weight: 600; margin-top: 2.2vh; }
.groet b { color: var(--roze-licht); font-weight: 700; }

.tegels { --t: clamp(140px, 32vh, 220px); display: flex; gap: calc(var(--t) * .14); align-items: flex-start; }
.tegel {
  position: relative; width: var(--t); height: var(--t); flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--t) * .08); padding: 0;
  border-radius: 30px; text-decoration: none; color: var(--tekst);
  background: var(--glas); border: 2px solid var(--rand);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(5, 2, 12, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .15s;
}
.tegel:active { transform: scale(.95); }
.tegel-icoon { width: calc(var(--t) * .5); height: calc(var(--t) * .5); flex: none; }
.tegel-icoon svg { width: 100%; height: 100%; }
.tegel-naam { font-weight: 700; letter-spacing: .12em; font-size: clamp(14px, 2.9vh, 20px); }
.tegel-berichten { border-color: rgba(255, 79, 163, .55); box-shadow: 0 10px 34px rgba(5, 2, 12, .55), 0 0 30px rgba(255, 79, 163, .22); }
.teller {
  position: absolute; top: -12px; right: -12px; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 21px;
  background: var(--roze); color: #fff; font-weight: 700; font-size: 22px; display: grid; place-items: center;
  border: 3px solid var(--nacht); animation: hup 1.6s ease-in-out infinite;
}
@keyframes hup { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.online-stip, .chat-status i {
  width: 14px; height: 14px; border-radius: 50%; background: var(--groen-oog); box-shadow: 0 0 10px var(--groen-oog);
}
.online-stip { position: absolute; top: 14px; left: 14px; }
.hub-instel {
  position: absolute; top: 4.5vh; right: 5vw; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--rand); background: var(--glas); display: grid; place-items: center; opacity: .7;
}
.hub-instel svg { width: 24px; height: 24px; }

/* ---------- berichten ---------- */
.chat {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(13, 6, 32, .84), rgba(34, 16, 63, .8));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  user-select: text;
}
[data-scherm="lynn"] .chat { animation: schuif .22s ease-out; }
@keyframes schuif { from { transform: translateX(40px); opacity: 0; } }
.chat-kop {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(13, 6, 32, .7); border-bottom: 1px solid var(--rand);
}
.chat-wie { flex: 1; min-width: 0; }
.chat-naam { font-weight: 700; font-size: 20px; }
.chat-status { font-size: 14px; color: var(--zacht); display: flex; align-items: center; gap: 6px; }
.chat-status i { width: 9px; height: 9px; display: inline-block; }

.berichten {
  flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 4px;
  overscroll-behavior: contain;
}
[data-scherm="lynn"] .berichten, [data-scherm="lynn"] .snel, [data-scherm="lynn"] .schrijf, [data-scherm="lynn"] .emoji-bord { padding-left: max(14px, calc(50% - 420px)); padding-right: max(14px, calc(50% - 420px)); }
.dag { align-self: center; font-size: 13px; color: var(--zacht); background: rgba(217, 194, 255, .1); padding: 4px 12px; border-radius: 999px; margin: 12px 0 8px; }
.leeg { margin: auto; text-align: center; color: var(--zacht); }
.leeg-icoon { font-size: 64px; margin: 0; }
.bel {
  max-width: min(78%, 560px); padding: 9px 14px 7px; border-radius: 20px; font-size: 18px; line-height: 1.35;
  white-space: pre-wrap; overflow-wrap: anywhere; position: relative; margin-top: 4px;
}
.bel .tijd { font-size: 11.5px; opacity: .72; margin-left: 10px; float: right; margin-top: 7px; display: inline-flex; gap: 3px; align-items: center; }
.bel .vink { font-size: 12px; letter-spacing: -3px; }
.bel .vink.gelezen { color: var(--groen-oog); }
.bel.ik { align-self: flex-end; background: linear-gradient(135deg, var(--roze), #b14dff); border-bottom-right-radius: 6px; }
.bel.ander { align-self: flex-start; background: rgba(217, 194, 255, .15); border: 1px solid var(--rand); border-bottom-left-radius: 6px; }
.bel.groot { font-size: 46px; line-height: 1.1; background: none; border: 0; padding: 0 4px; }
.bel.groot .tijd { color: var(--zacht); }
.bel.wacht { opacity: .6; }
.bel.mislukt { outline: 2px solid #ff4f7b; }

.snel { display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px; scrollbar-width: none; flex: none; }
.snel::-webkit-scrollbar { display: none; }
.snel button {
  flex: none; border: 1px solid rgba(255, 154, 210, .45); background: rgba(255, 79, 163, .12); color: var(--tekst);
  border-radius: 999px; padding: 8px 14px; font-size: 15px; white-space: nowrap;
}
.snel button:active { background: rgba(255, 79, 163, .3); }

.emoji-bord {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 4px; padding: 8px 14px;
  max-height: 36vh; overflow-y: auto; flex: none; background: rgba(13, 6, 32, .5); border-top: 1px solid var(--rand);
}
.emoji-bord button { border: 0; background: none; font-size: 30px; padding: 4px 0; border-radius: 12px; }
.emoji-bord button:active { background: rgba(217, 194, 255, .15); }

.schrijf {
  display: flex; align-items: flex-end; gap: 8px; padding: 8px 14px 12px; flex: none;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.emoji-knop { font-size: 24px; }
.schrijf textarea {
  flex: 1; resize: none; font: inherit; font-size: 18px; line-height: 1.35; max-height: 140px;
  padding: 10px 16px; border-radius: 22px; border: 1px solid var(--rand); background: rgba(10, 4, 20, .55);
  color: var(--tekst); outline: none;
}
.schrijf textarea:focus { border-color: var(--lila); }
.stuur {
  width: 48px; height: 48px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--roze), #b14dff); box-shadow: 0 4px 16px rgba(255, 79, 163, .4);
}
.stuur svg { width: 24px; height: 24px; }
.stuur:disabled { opacity: .45; box-shadow: none; }

/* ---------- instellingen ---------- */
.paneel-achter { position: fixed; inset: 0; background: rgba(5, 2, 12, .6); display: grid; place-items: center; padding: 16px; z-index: 10; }
.paneel {
  width: min(480px, 100%); max-height: 100%; overflow-y: auto; padding: 22px; border-radius: 26px;
  background: #1b0c33; border: 1px solid var(--rand); box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.paneel h2 { margin: 0 0 12px; font-size: 24px; }
.rij { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rand); }
.rij > div { flex: 1; display: grid; gap: 2px; }
.rij span { color: var(--zacht); font-size: 14px; }
.paneel .sluit { width: 100%; margin-top: 10px; }

.melding {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 20;
  background: #2f1652; border: 1px solid var(--rand); padding: 10px 18px; border-radius: 999px; font-size: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* lage schermen (tablet liggend): koppelkaart compacter */
@media (max-height: 700px) {
  .koppel-kaart { padding: 18px 24px; }
  .koppel-logo { width: 64px; height: 64px; }
  .koppel h1 { font-size: 24px; margin: 8px 0 12px; }
  .rol { padding: 10px; gap: 6px; }
  .rol-ava { width: 48px; height: 48px; font-size: 22px; }
  .code { margin-top: 12px; gap: 8px; }
  .code input { font-size: 26px; padding: 8px; }
}