/* Portal-Popup, RPG-Modus, Quest-Brett, fliegender Esel. Systemschriften, keine externen Ressourcen. */
.quest-root { --q-parch: #f1e3c4; --q-parch-2: #e6d2a8; --q-ink: #2b1d0e; --q-ink-soft: #5c4326; --q-wood: #6b4423; --q-gold: #c9a227; --q-red: #7a1f1f; --q-edge: #1d1b26;
  --q-serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --q-deco: Luminari, "Palatino Linotype", Palatino, Georgia, serif;
  --q-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Pixel-Rahmen (3 px Stufen) */
.portal-pop, .quest, .quest-toast, .pbtn {
  box-shadow: 0 -3px 0 0 var(--q-edge), 0 3px 0 0 var(--q-edge), -3px 0 0 0 var(--q-edge), 3px 0 0 0 var(--q-edge);
}

/* ---- Portal-Popup rechts unten ---- */
.portal-pop { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 61;
  display: flex; gap: 14px; align-items: center; width: min(25rem, calc(100vw - 32px)); padding: 12px 14px 12px 12px;
  background: #0b0714; color: #d9ffd9; font: 700 .85rem/1.4 var(--q-mono);
  transform: translateX(calc(100% + 40px)); transition: transform .45s cubic-bezier(.2, .9, .25, 1.15); }
.portal-pop.is-in { transform: none; }
.portal-pop[hidden] { display: none; }
.portal-gate { flex: none; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 0 10px rgba(124, 58, 237, .7)); }
.portal-gate canvas { display: block; width: 96px; height: 112px; image-rendering: pixelated; image-rendering: crisp-edges; }
.portal-gate:hover { filter: drop-shadow(0 0 16px rgba(192, 132, 252, .95)); }
.portal-text { display: grid; gap: 10px; min-width: 0; }
.portal-text p { margin: 0; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.portal-x { position: absolute; top: 2px; right: 6px; border: 0; background: none; color: #8fa1b8; font: 700 1.2rem/1 var(--q-mono); cursor: pointer; padding: 4px; }
.portal-x:hover { color: #fff; }

/* Tab am rechten Rand, solange das Portal zu ist */
.portal-tab { position: fixed; right: 0; top: 50%; z-index: 60; transform: translateY(-50%); writing-mode: vertical-rl;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 7px; border: 0; cursor: pointer;
  background: #0b0714; color: #d9ffd9; font: 700 .8rem/1 var(--q-mono); letter-spacing: .06em;
  box-shadow: 0 -3px 0 0 var(--q-edge), 0 3px 0 0 var(--q-edge), -3px 0 0 0 var(--q-edge), -6px 0 16px rgba(124, 58, 237, .45);
  animation: portal-tab-in .35s ease-out both; }
.portal-tab[hidden] { display: none; }
.portal-tab:hover { padding-right: 11px; color: #fff; }
.portal-tab:focus-visible { outline: 3px solid var(--q-gold); outline-offset: 3px; }
.portal-tab-gem { width: 12px; height: 12px; background: linear-gradient(135deg, #e6fffb 0 30%, #4aedd9 30% 65%, #1c8a7e 65%); box-shadow: 0 0 6px #7c3aed; }
@keyframes portal-tab-in { from { transform: translate(100%, -50%); } }
@media (prefers-reduced-motion: reduce) { .portal-tab { animation: none; } }

/* ---- Pixel-Knoepfe ---- */
.pbtn { font: 700 .8rem/1.2 var(--q-mono); padding: 7px 11px; border: 0; cursor: pointer; background: #e6fffb; color: #0b0714; }
.pbtn:hover { background: #fff; }
.pbtn-rpg { background: #4aedd9; color: #0b0714; }
.pbtn-rpg:hover { background: #b5f5ec; }
.pbtn:focus-visible, .portal-gate:focus-visible, .portal-x:focus-visible { outline: 3px solid var(--q-gold); outline-offset: 5px; }

/* ---- RPG-Leiste (nur im RPG-Modus) ---- */
.rpg-bar { display: none; position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
html.rpg .rpg-bar { display: flex; }
html.rpg .rpg-bar .pbtn { background: var(--q-parch); color: var(--q-ink); font-family: var(--q-serif); font-size: .95rem; }
html.rpg .rpg-bar .pbtn-rpg { background: var(--q-red); color: var(--q-parch); }

/* ---- Quest-Brett ---- */
.quest { width: min(36rem, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; padding: 0; border: 0;
  background: var(--q-parch); color: var(--q-ink); font: 1rem/1.5 var(--q-serif); }
.quest::backdrop { background: rgba(18, 6, 31, .6); }
.quest-form { display: grid; gap: 14px; padding: 22px 22px 20px;
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(107, 68, 35, .06) 22px 23px), radial-gradient(ellipse at 50% 0%, #f8ecd0, var(--q-parch) 70%); }
.quest h2 { margin: 0; font: 700 1.9rem/1.1 var(--q-deco); color: var(--q-red); letter-spacing: 0; text-wrap: balance; }
.quest fieldset { border: 2px solid var(--q-wood); padding: 10px 14px 14px; margin: 0; display: grid; gap: 8px; }
.quest legend { font-weight: 700; padding: 0 6px; color: var(--q-wood); }
.quest-tier { margin: 0; font-weight: 700; }
.quest-tier span { font-weight: 400; color: var(--q-ink-soft); }
.quest-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.quest-opt { display: inline-flex; }
.quest-opt input { position: absolute; opacity: 0; pointer-events: none; }
.quest-opt span { padding: 6px 14px; border: 2px solid var(--q-wood); background: var(--q-parch-2); cursor: pointer; font-weight: 700; }
.quest-opt input:checked + span { background: var(--q-wood); color: var(--q-parch); }
.quest-opt input:focus-visible + span { outline: 3px solid var(--q-gold); outline-offset: 2px; }
.quest-special { display: flex; gap: 8px; align-items: center; }
.quest-special input[type=radio] { accent-color: var(--q-wood); width: 1.1rem; height: 1.1rem; flex: none; }
.quest input[type=text], .quest input[type=email], .quest input[type=tel], .quest textarea { width: 100%; font: inherit; color: var(--q-ink); background: #fbf4e2; border: 2px solid var(--q-wood); padding: 8px 10px; border-radius: 0; }
.quest textarea { resize: vertical; min-height: 7rem; }
.quest input:focus-visible, .quest textarea:focus-visible { outline: 3px solid var(--q-gold); outline-offset: 1px; }
.quest-field { display: grid; gap: 6px; font-weight: 700; }
.quest-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.quest-note { margin: 0; font-size: .85rem; color: var(--q-ink-soft); }
.quest-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.quest-actions .pbtn { font-family: var(--q-serif); font-size: 1rem; padding: 9px 14px; background: var(--q-parch-2); color: var(--q-ink); }
.quest-actions .pbtn-rpg { background: var(--q-red); color: var(--q-parch); }
.quest-actions .pbtn-rpg:hover { background: #962828; }

.quest-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 62; margin: 0;
  max-width: calc(100vw - 32px); padding: 10px 14px; background: var(--q-parch); color: var(--q-ink); font: 700 .95rem/1.4 var(--q-serif); }
.quest-toast[hidden] { display: none; }

/* ---- Anfrage ohne RPG-Modus: normaler Seitenstil, gleiche Felder ---- */
.rpg-only { display: none; }
html.rpg .rpg-only { display: inline; }
html.rpg .norm-only { display: none; }
html:not(.rpg) .quest { background: var(--bg); color: var(--ink); font: 1rem/1.5 var(--font); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px rgba(14, 23, 38, .28); }
html:not(.rpg) .quest::backdrop { background: rgba(14, 23, 38, .55); }
html:not(.rpg) .quest-form { background: none; padding: 24px; }
html:not(.rpg) .quest h2 { font: 800 1.6rem/1.15 var(--font); letter-spacing: -.02em; color: var(--ink); }
html:not(.rpg) .quest fieldset { border: 1px solid var(--line); border-radius: var(--radius); }
html:not(.rpg) .quest legend { color: var(--ink-soft); font-weight: 650; }
html:not(.rpg) .quest-tier span, html:not(.rpg) .quest-note { color: var(--ink-soft); }
html:not(.rpg) .quest-opt span { border: 1px solid var(--line); background: var(--bg-band); border-radius: 999px; font-weight: 600; }
html:not(.rpg) .quest-opt input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
html:not(.rpg) .quest-opt input:focus-visible + span { outline-color: var(--mark); }
html:not(.rpg) .quest-special input[type=radio] { accent-color: var(--accent); }
html:not(.rpg) .quest input:not([type=radio]), html:not(.rpg) .quest textarea { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); }
html:not(.rpg) .quest input:focus-visible, html:not(.rpg) .quest textarea:focus-visible { outline: 3px solid var(--mark); border-color: var(--accent); }
html:not(.rpg) .quest-field { font-weight: 600; }
html:not(.rpg) .quest-actions .pbtn { box-shadow: none; border: 2px solid var(--line); border-radius: var(--radius); font: 650 1rem/1.2 var(--font); padding: .75rem 1.2rem; background: var(--bg-band); color: var(--ink); }
html:not(.rpg) .quest-actions .pbtn-rpg { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
html:not(.rpg) .quest-actions .pbtn-rpg:hover { background: var(--accent); filter: brightness(1.1); }
html:not(.rpg) .quest-toast { box-shadow: 0 10px 30px rgba(0, 0, 0, .2); border-radius: var(--radius); background: var(--dark); color: var(--dark-ink); font: 600 .95rem/1.4 var(--font); }

/* ---- Fliegender Esel ---- */
.donkey-fly { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; will-change: transform; }

/* ---- RPG-Modus: die ganze Seite im Mittelalter-Stil ---- */
html.rpg {
  --bg: #f1e3c4; --bg-band: #e6d2a8; --ink: #2b1d0e; --ink-soft: #5c4326; --line: #b89a66;
  --accent: #7a1f1f; --accent-ink: #f8ecd0; --mark: #c9a227; --dark: #2b1d0e; --dark-ink: #f1e3c4;
  --radius: 0; --font: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color-scheme: light;
}
html.rpg body { background: var(--bg) repeating-linear-gradient(0deg, transparent 0 28px, rgba(107, 68, 35, .05) 28px 29px); }
html.rpg h1, html.rpg h2, html.rpg h3, html.rpg .brand { font-family: Luminari, "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: 0; }
html.rpg .top { background: #e6d2a8; border-bottom: 3px solid #6b4423; }
html.rpg .btn { border: 3px double #f1e3c4; outline: 2px solid #7a1f1f; }
html.rpg .band-dark .lead, html.rpg .band-dark .note { color: #d9c7a0; }
html.rpg-flash body { animation: rpg-flash .9s ease-out; }
@keyframes rpg-flash { 0% { filter: brightness(2.2) hue-rotate(200deg) saturate(2); } 100% { filter: none; } }

@media (max-width: 30rem) {
  .portal-pop { flex-direction: column; align-items: flex-start; }
  .portal-gate canvas { width: 72px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-pop { transition: none; }
  html.rpg-flash body { animation: none; }
}

/* ---- RPG: Ritter statt Alltagskleider, Pixel-Grafik wie auf altem Pergament ---- */
.avatar-knight, .j-knight { display: none; }
html.rpg .avatar-fig { display: none !important; }
html.rpg .avatar-knight { display: block; }
html.rpg .jurte-allan .pixel:not(.j-knight) { display: none; }
html.rpg .jurte-allan .j-knight { display: block; }
html.rpg main .pixel:not(.avatar-svg):not(.j-knight), html.rpg .scene-stage canvas, html.rpg .jurte-bild, html.rpg .wardrobe, html.rpg .scene img { filter: sepia(.4) saturate(.85) contrast(1.05); }
html.rpg .scene, html.rpg .band-dark { background: #2b1d0e linear-gradient(180deg, rgba(201, 162, 39, .08), transparent 40%); }
html.rpg .scene-pick button { background: #3d2a14; border-color: #c9a227; color: #f1e3c4; border-radius: 0; }
html.rpg main h2::before { content: "❧ "; color: #c9a227; }
html.rpg .hero h1 { text-decoration: none; }
html.rpg .hero h1::first-letter { color: #7a1f1f; font-size: 1.25em; }
html.rpg .avatar { background: #e6d2a8; border-bottom-color: #6b4423; box-shadow: inset 0 0 0 3px #b89a66; }
html.rpg .foot { background: #e6d2a8; border-top: 3px solid #6b4423; }
html.rpg .bb-chest { --bb-bubble: #f1e3c4; --bb-ink: #2b1d0e; --bb-edge: #6b4423; --bb-name: #7a1f1f; --bb-silver: #5a6470; }
html.rpg .bb-bubble { font-family: "Palatino Linotype", Palatino, Georgia, serif; font-size: .85rem; }