/* Schriften liegen im Projekt (SIL Open Font License): Instrument Serif und Fira Code.
   Kein Aufruf zu Google – das Spiel läuft damit auch ohne Netz und ohne fremde Server. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/InstrumentSerif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/InstrumentSerif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/InstrumentSerif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/InstrumentSerif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/FiraCode-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/FiraCode-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/FiraCode-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/FiraCode-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Die drei Farben des Spiels ----------
   Hier ändern, alles andere folgt: Bildschirm, 3D-Welt, Linien, Schrift, Anzeigen und die
   Bilder im Handy (src/theme.js liest diese Werte beim Start aus). Nach dem Ändern neu laden. */
:root {
  --paper: #FFD3F0;      /* Hintergrund */
  --ink: #000;     /* Linien und Schrift */
  --faint: #7c7b77;   /* Gedämpftes: Nebentexte, feine Linien */
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "Fira Code", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
button { font-family: var(--serif); color: var(--ink); }
kbd { font-family: var(--mono); font-size: .8em; border: 1px solid var(--faint); border-radius: 3px; padding: 0 .35em; }

/* ---------- 3D-Welt ---------- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
body.can-act #gl { cursor: pointer; }

/* Präsenz (src/presence.js setzt --f Fokus, --r scharfer Radius, --w Wärme; je 0–1) */
.focus { position: fixed; inset: 0; pointer-events: none; }
.focus[hidden] { display: none; }
#focus-blur {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent var(--r), #000 calc(var(--r) + 32%));
  mask-image: radial-gradient(ellipse at center, transparent var(--r), #000 calc(var(--r) + 32%));
  opacity: var(--f, 0);
}
/* Wärme: nur ein Hauch – Linien in der Mitte werden leicht warm (multiply lässt Schwarz schwarz), dazu etwas Licht */
#focus-warm { background: radial-gradient(ellipse at center, rgb(255, 214, 170) 0%, rgb(255, 230, 205) 38%, #fff 72%); mix-blend-mode: multiply; opacity: var(--w, 0); }
#focus-glow { background: radial-gradient(ellipse at center, rgba(255, 150, 60, .07), transparent 60%); mix-blend-mode: screen; opacity: var(--w, 0); }

/* ---------- Handy (Bildschirm über dem 3D-Handy) ---------- */
#phone-overlay { position: fixed; inset: 0; }
#phone { position: fixed; left: 0; top: 0; width: 300px; height: 621px; transform-origin: 0 0; font-family: var(--mono); }
/* Home-Balken: große Trefferfläche, sichtbarer Balken per ::after */
#phone-home { position: absolute; bottom: 0; left: 50%; width: 140px; height: 22px; margin-left: -70px; border: 0; background: none; cursor: pointer; }
#phone-home::after { content: ""; position: absolute; left: 25px; right: 25px; top: 9px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .85; }
#phone-home:hover::after { opacity: 1; }
#phone-screen { position: absolute; inset: 0 0 22px; overflow-y: auto; overflow-x: hidden; background: var(--paper); border-radius: 10px; scrollbar-width: none; touch-action: pan-y; font-size: 14px; }
#phone-screen::-webkit-scrollbar { display: none; }
/* Hosentasche: Button und Auswahl (über dem Handy-Overlay, unter den Übergängen) */
#pocket-btn { position: fixed; right: max(16px, 16vw, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 10; font-size: 17px; background: var(--paper); border: 1px solid var(--ink); border-radius: 999px; padding: 7px 18px; cursor: pointer; opacity: .8; min-width: 8.5em; text-align: center; }   /* feste Breite: „Pocket“ und „Put away“ stehen exakt gleich */
#pocket-btn:hover { opacity: 1; background: var(--ink); color: var(--paper); }
#pocket-menu { position: fixed; right: max(16px, 16vw, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 50px); z-index: 10; background: var(--paper); border: 1px solid var(--faint); border-radius: 16px; padding: 10px 12px 12px; }
#pocket-menu .pocket-title { margin: 0 0 8px; font-style: italic; color: var(--faint); font-size: 15px; }
#pocket-menu .pocket-items { display: flex; gap: 10px; }
#pocket-menu button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; padding: 10px 6px 8px; font-size: 16px; background: none; border: 1px solid var(--ink); border-radius: 12px; cursor: pointer; }
#pocket-menu svg { width: 56px; height: 56px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#pocket-menu svg .faint { stroke: var(--faint); stroke-width: 1.6; }
#pocket-menu svg .flame { stroke-width: 1.6; }
#pocket-menu button:hover { background: var(--ink); color: var(--paper); }
#pocket-menu button:hover svg, #pocket-menu button:hover svg .faint { stroke: var(--paper); }

.ph-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-size: 12px; border-bottom: 1px solid var(--faint); position: sticky; top: 0; background: var(--paper); z-index: 2; }
.ph-back { background: none; border: 1px solid var(--ink); border-radius: 10px; color: var(--ink); font-family: var(--mono); font-size: 12px; padding: 1px 8px; cursor: pointer; }
.ph-back:active { background: var(--ink); color: var(--paper); }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; padding: 22px 10px; }
.ph-app { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; position: relative; }
.ph-app svg { width: 50px; height: 50px; }
.ph-app svg *, .ph-body svg * { stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ph-body svg .faint { stroke: var(--faint); }
.ph-body svg .f { fill: var(--ink); }
.ph-body svg text { fill: var(--ink); stroke: none; font-family: var(--mono); }
.ph-body { padding: 10px 10px 18px; line-height: 1.3; }
.ph-card { border: 1px solid var(--ink); border-radius: 8px; padding: 9px; margin: 0 0 10px; }
/* Feed (Bluesky): Bilder und Avatare als Linienzeichnung (SVG-Filter aus feed.js).
   Am Bildrand sehen die Weichzeichner nichts mehr und zeichnen dort einen Rahmen:
   deshalb ist das Bild eine Spur groesser als sein Kasten, der den Rand wegschneidet. */
.ph-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; filter: url(#ph-lineart-av); clip-path: circle(46%); }
.ph-name, .ph-post { filter: grayscale(1); }   /* Emojis nicht bunt */
.ph-name { font-family: var(--serif); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-handle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-post { font-family: var(--serif); font-size: 15px; line-height: 1.3; margin: 8px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.ph-media { position: relative; margin-top: 8px; max-height: 320px; overflow: hidden; border-radius: 6px; background: var(--paper); }
.ph-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: url(#ph-lineart); transform: scale(1.03); }
.ph-video::after { content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 26px; color: var(--ink); }
/* Werbung (src/ui/phone/apps/ads.js): wie ein Beitrag gebaut, nur zeichnet sie sich selbst.
   Der Punkt vorne steht da, wo bei echten Beitraegen das Profilbild sitzt. */
.ph-ad-mark { width: 30px; height: 30px; flex: none; border: 1px solid var(--faint); border-radius: 50%; }
.ph-ad-box { margin-top: 8px; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; }
/* Das Auto kommt als Bild (dieselbe Zeichnung wie das Plakat), die anderen drei als SVG */
.ph-ad-art { display: block; width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
img.ph-ad-art { padding: 6px 0; }
.ph-ad-art .faint { stroke: var(--faint); }
.ph-ad-sub { font-family: var(--serif); font-size: 13px; color: var(--faint); margin: 6px 0 0; }

/* Kein Feed, keine Schlagzeilen: der Hinweis steht ruhig in der Mitte, nicht oben in der Ecke */
.ph-empty { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--faint); text-align: center; margin: 0; padding: 38% 14px; }
.ph-line { height: 5px; border-radius: 3px; background: var(--faint); opacity: .6; margin: 6px 0; }
.ph-btn { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 16px; padding: 6px 12px; font-family: var(--mono); font-size: 13px; cursor: pointer; }
.ph-btn:active { background: var(--ink); color: var(--paper); }
.ph-msg { max-width: 80%; border: 1px solid var(--ink); border-radius: 10px; padding: 5px 9px; margin: 6px 0; font-family: var(--serif); font-size: 16px; }
.ph-msg.me { margin-left: auto; border-style: dashed; }
.ph-muted { color: var(--faint); font-size: 11px; }
.ph-center { text-align: center; }
.ph-big { font-size: 34px; line-height: 1.1; }
.ph-serif { font-family: var(--serif); font-size: 17px; }
canvas.ph-game { width: 100%; display: block; border-bottom: 1px solid var(--ink); touch-action: none; }

/* ---------- Übergang & Schwarzblende ---------- */
#transition { position: fixed; inset: 0; background: var(--paper); z-index: 20; }
#transition-svg { width: 100%; height: 100%; }
#transition-svg * { stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#transition-svg .o { fill: var(--paper); }
#transition-svg text { fill: var(--ink); stroke: none; font-family: var(--mono); }
#transition-words { position: absolute; left: 0; right: 0; top: 15%; text-align: center; font-size: clamp(26px, 4.2vw, 56px); font-style: italic; margin: 0; }
#transition-words span { opacity: 0; transition: opacity .35s; margin: 0 .3em; display: inline-block; }
#transition-words span.on { opacity: 1; }
#blackout { position: fixed; inset: 0; background: var(--paper); z-index: 30; opacity: 0; transition: opacity 6s ease-in; }
#blackout.on { opacity: 1; }
#blackout.hard { transition: none; opacity: 1; }
#blackout.fast { transition: opacity 3s ease-in-out; }

/* ---------- Screens ---------- */
.screen {
  position: fixed; inset: 0; z-index: 40; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 6vh 8vw; overflow-y: auto;
}
.screen h1 { font-size: clamp(64px, 12vw, 150px); margin: 0; font-weight: 400; letter-spacing: .04em; }
/* Pause: über der Szene, aber unter Start- und Endbildschirm */
/* Schleier ueber der Szene: der Grundton, durchscheinend. Vorher stand hier fest Schwarz -
   bei dunkler Schrift waren Rahmen und Beschriftung der Knoepfe darauf nicht zu sehen.
   Ohne color-mix (aeltere Browser) bleibt der Schleier deckend, lesbar ist er so oder so. */
#pause { z-index: 35; background: var(--paper); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  #pause { background: color-mix(in srgb, var(--paper) 88%, transparent); }
}
#pause h2 { font-size: clamp(40px, 6vw, 72px); margin: 0 0 .1em; font-weight: 400; font-style: italic; letter-spacing: .03em; }
.screen .sub { font-size: clamp(20px, 2.5vw, 30px); font-style: italic; max-width: 32em; margin: .3em 0 1em; }
.screen .note { font-size: 18px; color: var(--faint); max-width: 40em; line-height: 1.5; margin: .2em 0; }
.screen .keys { font-family: var(--mono); font-size: 13px; color: var(--faint); max-width: 60em; line-height: 1.8; }
.screen .small { font-size: 15px; }
.screen .buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 1.4em; }
.screen button, .screen .buttons .btn { font-size: 22px; background: none; border: 1px solid var(--ink); border-radius: 999px; padding: 9px 26px; cursor: pointer; }
.screen button:hover, .screen .buttons .btn:hover { background: var(--ink); color: var(--paper); }
.screen button:disabled { opacity: .3; cursor: default; }
.screen button:disabled:hover { background: none; color: inherit; }

#ending .line { font-size: clamp(20px, 2.6vw, 30px); font-style: italic; max-width: 26em; margin: .55em 0; }
#ending .line.now { font-style: normal; font-size: clamp(34px, 5vw, 60px); margin-top: 1.4em; }
/* Die Zeilen kommen nacheinander, ruhig, die Frage zuletzt */
#ending.show .bilanz > * { animation: fadein 2.2s both; }
#ending.show .bilanz > *:nth-child(2) { animation-delay: 1.4s; }
#ending.show .bilanz > *:nth-child(3) { animation-delay: 2.6s; }
#ending.show .bilanz > *:nth-child(4) { animation-delay: 3.8s; }
#ending.show .bilanz > *:nth-child(5) { animation-delay: 5s; }
#ending.show .bilanz > *:nth-child(6) { animation-delay: 6.2s; }
#ending.show .bilanz > *:nth-child(7) { animation-delay: 7.4s; }
#ending.show .bilanz > *:nth-child(8) { animation-delay: 8.6s; }
#ending.show .bilanz > *:last-child { animation-delay: 9.8s; }
/* Abspann: Inhalt rollt als Ganzes; Position setzt src/ending.js */
#ending { display: block; padding: 0; overflow: hidden; cursor: default; }
#ending .roll { position: absolute; left: 0; right: 0; top: 0; padding: 0 8vw; will-change: transform; }
#ending .bilanz, #ending .credits { display: flex; flex-direction: column; align-items: center; }
#ending .credits { padding: 26vh 0 10vh; }   /* Abstand zu „What now?“ – der Abspann folgt, er faengt nicht neu an */
#ending .c-title { font-size: clamp(56px, 9vw, 120px); letter-spacing: .04em; margin: 0 0 .9em; }
#ending .c-role { font-style: italic; color: var(--faint); font-size: clamp(14px, 1.5vw, 18px); margin: 2.4em 0 .35em; }
#ending .c-name { font-size: clamp(17px, 1.9vw, 23px); margin: .12em 0; }
#ending .c-minor { font-size: clamp(14px, 1.5vw, 18px); }   /* lobende Erwähnung: kleiner als der Autor */
#ending .credits .buttons { margin-top: 3.2em; }
/* Verweis auf den Konzepttext: sieht aus wie die Knöpfe daneben */
.screen .buttons .btn { display: inline-block; text-decoration: none; color: var(--ink); }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Textseite (concept.html) ----------
   Kein Spiel, sondern etwas zum Lesen. Das Spiel sperrt oben html und body gegen Scrollen und
   Markieren – hier muss beides wieder gehen, auch am Telefon. */
html.page, html.page body { height: auto; min-height: 100%; overflow: visible; }
body.page { user-select: text; -webkit-user-select: text; touch-action: auto; }
/* Die Spalte rechnet in der Lesegroesse, nicht in der Grundgroesse des Browsers, und das
   seitliche Polster steckt in der Breite statt daneben (box-sizing gilt projektweit).
   So stehen rund 70 Zeichen in einer Zeile, egal wie gross der Text gerade ist. */
.prose { font-size: clamp(18px, 1.1vw + 11px, 23px); width: min(27em, 86vw); margin: 0 auto; padding: 12vh 0 14vh; }
.prose h1 { font-size: clamp(48px, 9vw, 96px); font-weight: 400; letter-spacing: .04em; margin: 0; }
.prose .sub { font-style: italic; color: var(--faint); font-size: clamp(18px, 2.2vw, 24px); margin: .25em 0 2.2em; }
.prose p { line-height: 1.65; margin: 0 0 1.5em; }
.prose a { color: var(--ink); text-underline-offset: .22em; }
.prose .back { margin-top: 3em; font-style: italic; }

@media (max-width: 700px) {
  .screen .note { font-size: 16px; }
}