:root {
  --bg: #07030f;
  --ink: #f4f0ff;
  --muted: #b3a8d6;
  --panel: rgba(14, 8, 30, 0.86);
  --line: rgba(255, 255, 255, 0.14);
  --accent: #ff2bd6;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: Poppins, system-ui, sans-serif; }
/* iPhone: geen tekstselectie/loep/aanraakmenu bij vasthouden (joystick, rondkijken); alleen invoervelden selecteerbaar */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea { -webkit-user-select: text; user-select: text; }
#stage { display: block; width: 100vw; height: 100vh; touch-action: none; cursor: grab; }
#stage:active { cursor: grabbing; }

#brand {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 16px;
  font: 20px Audiowide, system-ui, sans-serif; letter-spacing: .02em;
  color: #fff; text-shadow: 0 0 10px #ff2bd6, 0 0 22px #7a2bff; pointer-events: none;
}
#brand span { color: #27f5ff; text-shadow: 0 0 10px #27f5ff; }

#menu-btn {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px;
  width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
  background: var(--panel); color: #fff; font-size: 22px;
  border: 1px solid var(--line); box-shadow: 0 0 18px rgba(255, 43, 214, .35);
  backdrop-filter: blur(8px);
}
#who-btn {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 170px; height: 46px; padding: 0 14px;
  border-radius: 12px; cursor: pointer; background: var(--panel); color: #fff;
  font: 14px Audiowide, system-ui, sans-serif; border: 1px solid var(--line); backdrop-filter: blur(8px);
}
#who {
  position: fixed; left: 16px; right: 16px; top: 80px; max-width: 760px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; backdrop-filter: blur(12px);
  max-height: calc(100vh - 100px); overflow: auto;
}
#who h2 { margin: 0 0 14px; font: 24px Audiowide, system-ui, sans-serif; }
#who-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
#who-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.who-card { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 8px; cursor: pointer; color: var(--ink); font: 600 15px Poppins, system-ui, sans-serif; }
.who-card img { width: 100%; aspect-ratio: 3/5; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 6px; }
.who-card.on { border-color: #ff2bd6; box-shadow: 0 0 16px rgba(255,43,214,.5); }
@media (max-width: 600px) { #who-btn { top: calc(max(12px, env(safe-area-inset-top)) + 54px); right: 12px; } }
#menu {
  position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 56px); right: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px; min-width: 200px; backdrop-filter: blur(10px);
}
.menu-title { margin: 4px 10px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 10px; border: 0; background: none; color: var(--ink);
  font: 600 16px Poppins, system-ui, sans-serif; border-radius: 8px; cursor: pointer;
}
#menu button:hover, #menu button:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
#menu button i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }

#prompt {
  position: fixed; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 15px; cursor: pointer; white-space: nowrap;
  backdrop-filter: blur(8px);
}

#panel {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto; max-height: 74vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 16px; padding: 22px 22px 24px; backdrop-filter: blur(12px);
  box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 35%, transparent);
}
#panel h2 { margin: 0 0 2px; font: 30px Audiowide, system-ui, sans-serif; color: var(--accent); text-shadow: 0 0 14px var(--accent); }
#panel .tagline { margin: 0 0 12px; color: var(--muted); font-weight: 600; }
#panel p { line-height: 1.55; }
#panel .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 14px 0; }
#panel .gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
#panel .more {
  display: inline-block; margin-top: 6px; padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: #0b0616; font-weight: 600; text-decoration: none;
}
#panel-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer;
}

#hint { position: fixed; left: 16px; bottom: calc(10px + env(safe-area-inset-bottom)); margin: 0; font-size: 12px; color: var(--muted); pointer-events: none; }
@media (max-width: 600px) { #hint { display: none; } #brand { font-size: 16px; } }
#joy { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); background: rgba(255,43,214,.12); pointer-events: none; }
#joy i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(255,255,255,.75); box-shadow: 0 0 16px #ff2bd6; }
#warp { position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #ff8af0 18%, #ff2bd6 40%, #3a0a6a 75%, #07030f 100%); }
#warp.calm { background: #07030f; }
[hidden] { display: none !important; }

/* chatvenster: praten met Daniel (Telegram aan de andere kant). Futuristisch roze glas, transparant. */
#chat-btn {
  position: fixed; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 20;
  width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  color: #ffd6f4; background: linear-gradient(160deg, rgba(255,160,230,.22), rgba(255,43,214,.08));
  border: 1px solid rgba(255,140,225,.45); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
/* rondgaand lichtje om de knop: nodigt uit om te klikken; stopt als het venster open is */
#chat-btn::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; padding: 3px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(255,43,214,.15) 62%, #ff5ce0 84%, #fff 92%, transparent 93%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px #ff2bd6);
  animation: chat-orbit 2.4s linear infinite;
}
#chat-btn.open::before { animation: none; opacity: 0; transition: opacity .3s; }
@keyframes chat-orbit { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { #chat-btn::before { animation-duration: 8s; } }
#chat-btn .dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ff2bd6; box-shadow: 0 0 10px #ff2bd6; }
#chat {
  position: fixed; right: 12px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 60px); z-index: 20;
  width: min(350px, calc(100vw - 24px)); height: min(460px, 66vh); display: flex; flex-direction: column; overflow: hidden;
  font-family: Poppins, system-ui, sans-serif; color: #fff4fc;
  background: linear-gradient(160deg, rgba(255,170,235,.16) 0%, rgba(255,43,214,.07) 45%, rgba(60,10,50,.18) 100%);
  border: 1px solid rgba(255,150,228,.38); border-radius: 20px;
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 10px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
#chat[hidden] { display: none; }
#chat::before {   /* glanslijn over het glas */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 30%);
}
#chat > * { position: relative; z-index: 1; }
#chat header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; font: 600 11px Poppins, system-ui, sans-serif; letter-spacing: .18em; color: rgba(255,235,250,.9); }
#chat header b { font-weight: 400; }
#chat .x { background: none; border: 0; color: rgba(255,220,245,.8); font-size: 22px; cursor: pointer; line-height: 1; }
#chat .sub { margin: 4px 16px 8px; font-size: 12px; color: rgba(255,225,245,.7); }
#chat .log { flex: 1; overflow-y: auto; padding: 4px 12px; display: flex; flex-direction: column; gap: 7px; min-height: 80px; scrollbar-width: thin; scrollbar-color: rgba(255,150,228,.35) transparent; }
#chat .b { margin: 0; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; max-width: 84%; word-wrap: break-word; backdrop-filter: blur(6px); }
#chat .b.me { align-self: flex-end; background: rgba(255,43,214,.26); border: 1px solid rgba(255,140,225,.5); border-bottom-right-radius: 4px; }
#chat .b.daniel { align-self: flex-start; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-bottom-left-radius: 4px; }
#chat .b.sys { align-self: center; color: rgba(255,225,245,.65); font-size: 12px; background: none; }
#chat form { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
#chat input { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255,150,228,.3); background: rgba(255,255,255,.08); color: #fff; caret-color: #ff2bd6; font: 16px Poppins, system-ui, sans-serif; outline: none; }   /* 16px: kleiner laat iOS inzoomen bij focus */
#chat input:focus { border-color: rgba(255,43,214,.75); box-shadow: 0 0 12px rgba(255,43,214,.28); }
#chat input::placeholder { color: rgba(255,225,245,.5); }
#chat .row { display: flex; gap: 6px; }
#chat .row button { padding: 0 15px; border-radius: 12px; border: 0; background: rgba(255,43,214,.8); color: #fff; font: 600 13px Poppins, system-ui, sans-serif; cursor: pointer; }
#chat .row button:hover { background: #ff2bd6; }
#chat.off .row button { opacity: .35; cursor: default; }
#chat .glyphs { display: flex; gap: 9px; padding: 0 16px 8px; }
#chat .glyphs svg { width: 15px; height: 15px; fill: none; stroke: rgba(255,200,240,.45); stroke-width: 1.4; stroke-linecap: round; animation: glyphglow 7.2s ease-in-out infinite; }
#chat .glyphs svg .f, #chat .mark .f { fill: currentColor; stroke: none; }
#chat .glyphs svg { color: rgba(255,200,240,.45); }
#chat .glyphs svg:nth-child(2) { animation-delay: 1.2s; } #chat .glyphs svg:nth-child(3) { animation-delay: 2.4s; }
#chat .glyphs svg:nth-child(4) { animation-delay: 3.6s; } #chat .glyphs svg:nth-child(5) { animation-delay: 4.8s; }
#chat .glyphs svg:nth-child(6) { animation-delay: 6s; }
@keyframes glyphglow { 0%, 20%, 100% { stroke: rgba(255,200,240,.4); color: rgba(255,200,240,.4); filter: none; } 8% { stroke: #fff; color: #fff; filter: drop-shadow(0 0 4px #ff2bd6); } }
#chat .mark { position: absolute; right: -30px; bottom: 40px; width: 190px; height: 190px; fill: none; stroke: rgba(255,190,238,.09); stroke-width: .7; color: rgba(255,190,238,.09); pointer-events: none; z-index: 0; }
#chat header b { display: flex; color: rgba(255,235,250,.95); filter: drop-shadow(0 0 4px rgba(255,43,214,.6)); }
#chat header .gtext { display: block; max-width: 100%; }
#chat .b .gtext { display: inline-block; vertical-align: middle; margin: 2px 0; }
#chat .b { line-height: 2.1; }

/* muziek aan/uit, naast het menu */
#music-btn {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 66px; z-index: 5;
  width: 46px; height: 46px; border-radius: 12px; cursor: pointer; display: grid; place-items: center;
  background: var(--panel); color: #fff; border: 1px solid var(--line); backdrop-filter: blur(8px);
}
#music-btn.off { color: var(--muted); }
#sfx-btn {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 120px; z-index: 5;
  width: 46px; height: 46px; border-radius: 12px; cursor: pointer; display: grid; place-items: center;
  background: var(--panel); color: #fff; border: 1px solid var(--line); backdrop-filter: blur(8px);
}
#sfx-btn.off { color: var(--muted); }
#menu .menu-classic { display: block; margin: 6px 10px 4px; font-size: 12px; color: var(--muted); text-decoration: none; }
#menu .menu-classic:hover { color: #fff; }
#chat-btn[hidden] { display: none; }
#panel iframe.yt { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; margin: 6px 0 12px; background: #000; }

/* zendpaneel in de Contact-zaal: glas in de zaalkleur, onderin het midden */
#transmit {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 21;
  width: min(560px, calc(100vw - 32px)); padding: 14px 14px 10px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,170,90,.16), rgba(40,14,40,.55)); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  color: #fff3ea; font-family: Poppins, system-ui, sans-serif;
}
#transmit input { width: 100%; box-sizing: border-box; font: 16px Poppins, system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 10px 12px; outline: none; }
#transmit input:focus { border-color: var(--c); }
#transmit .nl { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 10px; }
#transmit .nl .name { display: block; margin-top: 4px; width: 60%; text-transform: none; letter-spacing: 0; }
#transmit input:disabled { opacity: .45; }
#transmit .row { display: flex; gap: 8px; }
#transmit .go { flex: none; font: 600 15px Poppins, system-ui, sans-serif; color: #1a0a00; background: var(--c); border: 0; border-radius: 12px; padding: 0 16px; cursor: pointer; box-shadow: 0 0 16px var(--c); }
#transmit .go:disabled { opacity: .5; }
#transmit .x { position: absolute; top: -12px; right: -8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(20,8,30,.8); color: #fff; font-size: 18px; cursor: pointer; }
#transmit .st { margin: 8px 2px 0; font-size: 13px; opacity: .85; min-height: 1em; }
#transmit.off .go { opacity: .4; pointer-events: none; }
#transmit .conv { margin: 10px 0 2px; display: grid; gap: 8px; }
#transmit .me { justify-self: end; max-width: 80%; margin: 0; padding: 7px 12px; border-radius: 14px 14px 4px 14px; background: rgba(255,255,255,.1); font-size: 14px; }
#transmit .dan { justify-self: start; max-width: 85%; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--c) 18%, rgba(0,0,0,.35)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
#transmit .dan b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); margin-bottom: 2px; }
#transmit .dan .txt { margin: 0; font-size: 15px; }
#transmit .dan .dots, #transmit .dan .wait { display: none; }
#transmit .dan.waiting .dots { display: inline-flex; gap: 5px; padding: 6px 0 4px; }
#transmit .dan.waiting .wait { display: block; font-size: 12px; opacity: .65; margin-top: 2px; }
#transmit .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); opacity: .3; animation: tx-dot 1.4s infinite ease-in-out; }
#transmit .dots i:nth-child(2) { animation-delay: .2s; } #transmit .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes tx-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }