/* Dunkel, klar, leicht psychedelisch: eine Grundfarbe, deren Ton langsam durchs Farbrad wandert. */
@property --h { syntax: '<number>'; inherits: true; initial-value: 0; }
:root {
  --bg: #0c0920; --glass: rgba(20, 15, 44, .78); --line: rgba(255, 255, 255, .12); --ink: #f1ecff; --muted: #a59fc4;
  --accent: hsl(calc(280 + var(--h)) 95% 72%); --accent-2: hsl(calc(190 + var(--h)) 95% 65%);
  --ok: #8dffb0; --bad: #ff7a90;
  animation: hue 48s linear infinite;
}
@keyframes hue { to { --h: 360; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
             font: 15px/1.5 ui-sans-serif, system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); padding: 8px 16px;
         transition: background .2s, border-color .2s, transform .1s; }
button:hover { background: rgba(255, 255, 255, .12); border-color: var(--accent); }
button:active { transform: scale(.97); }
button.primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); border: 0; color: #120b26; font-weight: 700; }
button.icon { width: 36px; height: 36px; padding: 0; margin-left: auto; }
input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); outline: none; }
input:focus { border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); font-size: .85rem; }
.small { font-size: .78rem; }
.row { display: flex; gap: 8px; }
.error { color: var(--bad); min-height: 1.2em; margin: 0; font-size: .85rem; }

/* HUD */
.hud { position: fixed; z-index: 2; margin: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-left { top: max(14px, env(safe-area-inset-top)); left: 16px; }
.hud-left h1 { margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
               background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.status { margin: 2px 0 0; font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status.ok .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.status.bad .dot { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.status.bad { color: var(--bad); }
.hud-right { top: max(12px, env(safe-area-inset-top)); right: 16px; display: flex; gap: 8px; }
.hud-right button { backdrop-filter: blur(8px); background: rgba(20, 15, 44, .6); font-size: .85rem; }
.hud-hint { bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-size: .8rem; letter-spacing: .12em;
            color: var(--muted); background: rgba(20, 15, 44, .6); padding: 6px 14px; border-radius: 999px; transition: opacity 1s; white-space: nowrap; }
.hud-hint.gone { opacity: 0; }
.hud-foot { bottom: max(10px, env(safe-area-inset-bottom)); right: 16px; font-size: .68rem; color: var(--muted); opacity: .7; }

/* Glas-Panels */
.panel { background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--line); color: var(--ink);
         box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03) inset; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--c, var(--accent)); box-shadow: 0 0 18px var(--c, var(--accent)); position: relative; }
.avatar::before, .avatar::after { content: ""; position: absolute; top: 15px; width: 5px; height: 7px; border-radius: 50%; background: #141024; }
.avatar::before { left: 12px; } .avatar::after { right: 12px; }
.avatar.sphinx { --c: #b6ff5c; }
.avatar.trophy { --c: #ffcf4d; }

/* Chat */
.chat { position: fixed; z-index: 5; right: 16px; bottom: 16px; top: 64px; width: min(400px, calc(100% - 32px)); border-radius: 22px;
        display: flex; flex-direction: column; transform: translateX(calc(100% + 40px)); transition: transform .35s cubic-bezier(.2, .9, .3, 1); }
.chat.open { transform: none; }
.msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 86%; padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; animation: in .3s ease-out; }
.msg.bot { align-self: flex-start; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg.user { align-self: flex-end; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #120b26; border-bottom-right-radius: 5px; }
.msg.error { color: var(--bad); }
.msg .thinking { color: var(--muted); font-size: .85rem; }
.msg .thinking i { display: inline-block; animation: dots 1.2s infinite; font-style: normal; }
.msg .thinking i:nth-child(2) { animation-delay: .2s; } .msg .thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 0%, 100% { opacity: .2; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }
.chat .row { padding: 12px; border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .chat { left: 8px; right: 8px; bottom: 8px; top: auto; height: 62dvh; width: auto; transform: translateY(calc(100% + 30px)); }
  .hud-right button { padding: 6px 12px; font-size: .78rem; }
  .hud-foot { display: none; }
}

/* Modals */
.modal { width: min(440px, calc(100% - 24px)); padding: 0; border-radius: 24px; }
.modal::backdrop { background: rgba(5, 3, 15, .55); backdrop-filter: blur(3px); }
.modal[open] { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { opacity: 0; transform: scale(.92); } }
.screen { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.screen[hidden] { display: none; }
.screen label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.screen label input { color: var(--ink); }
.say { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(182, 255, 92, .08); border: 1px solid rgba(182, 255, 92, .25); color: #e6ffd0; min-height: 1.5em; }
.say:empty { visibility: hidden; }
.meta { display: flex; justify-content: space-between; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.timer { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
#timerBar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform-origin: left; }
.problem { margin: 6px 0; text-align: center; font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums;
           text-shadow: 0 0 24px var(--accent); }
.problem.right { animation: right .4s; } .problem.wrong { animation: wrong .4s; }
@keyframes right { 40% { transform: scale(1.12); color: var(--ok); } }
@keyframes wrong { 20%, 60% { transform: translateX(-8px); color: var(--bad); } 40%, 80% { transform: translateX(8px); } }
#answer { font-size: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.big { margin: 0; text-align: center; font-size: 2.2rem; font-weight: 800; }
.board { margin: 0; padding: 4px 16px 16px 40px; display: flex; flex-direction: column; gap: 4px; max-height: 50dvh; overflow-y: auto; }
.board li { padding: 4px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.board li span { float: right; color: var(--muted); }
.board li.me { color: var(--accent); }
.board:empty::before { content: "Noch niemand. Sei die erste Legende."; color: var(--muted); margin-left: -24px; }
.screen .board { padding: 0 0 0 24px; max-height: 30dvh; }
.screen .board:empty { display: none; }

/* Apollons Bass: Panel unten, Karte bleibt oben sichtbar */
.synth { position: fixed; z-index: 5; left: 50%; bottom: 12px; width: min(900px, calc(100% - 16px)); max-height: calc(100dvh - 90px); overflow-y: auto;
         border-radius: 22px; transform: translate(-50%, calc(100% + 40px)); transition: transform .35s cubic-bezier(.2, .9, .3, 1); }
.synth.open { transform: translate(-50%, 0); }
.synth-icon { --c: #ff5ce1; }
.scope { display: block; width: 100%; height: 64px; border-bottom: 1px solid var(--line); }
.synth-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; }
.groups section { display: flex; flex-direction: column; gap: 6px; }
.groups h4 { margin: 0; font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.knob { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; }
.knob span { display: flex; justify-content: space-between; color: var(--muted); }
.knob b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.knob input { width: 100%; padding: 0; border: 0; background: none; accent-color: var(--accent); -webkit-appearance: none; appearance: none; height: 18px; }
.knob input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.knob input::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.knob input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--accent); }
.knob input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--accent); }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { flex: 1; border: 0; border-radius: 0; padding: 4px 6px; font-size: .75rem; background: none; }
.seg button.on { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #120b26; font-weight: 700; }
.seq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seq > button { padding: 6px 12px; font-size: .8rem; }
.seq > button.on { border-color: #ff4d6d; color: #ff8fa3; box-shadow: 0 0 10px rgba(255, 77, 109, .5); }
.steps { flex: 1 1 320px; display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.step { padding: 0; height: 30px; border-radius: 6px; font-size: .62rem; color: #120b26; font-weight: 700; background: rgba(255, 255, 255, .06); }
.step:nth-child(4n + 1) { border-color: rgba(255, 255, 255, .28); }
.step.on { background: linear-gradient(160deg, var(--accent), var(--accent-2)); }
.step.now { outline: 2px solid #fff; outline-offset: -2px; box-shadow: 0 0 12px #fff; }
.keys-row { display: flex; align-items: stretch; gap: 8px; }
.keys-row > button { margin: 0; align-self: center; }
.keys { flex: 1; position: relative; display: flex; height: 92px; touch-action: none; user-select: none; }
.key { flex: 1; min-width: 0; padding: 0 0 4px; border-radius: 0 0 8px 8px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .9);
       color: #120b26; font-size: .6rem; display: flex; align-items: flex-end; justify-content: center; transition: none; }
.key.black { flex: 0 0 auto; width: calc(100% / 14 * .62); margin: 0 calc(100% / 14 * -.31); height: 58%; z-index: 1; background: #1c1430; border-color: var(--accent); }
.key.down { background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 0 18px var(--accent); }
.key:hover { transform: none; }
@media (max-width: 600px) { .groups { grid-template-columns: 1fr 1fr; } .keys { height: 78px; } }

/* Live-Chat unten links */
.live { left: 16px; bottom: max(52px, calc(env(safe-area-inset-bottom) + 40px)); width: min(360px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 6px; }
.live-log { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; font-size: .8rem;
            mask-image: linear-gradient(to bottom, transparent, #000 30%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); }
.live-line { margin: 0; padding: 3px 8px; border-radius: 8px; background: rgba(20, 15, 44, .55); backdrop-filter: blur(6px); width: fit-content; max-width: 100%; }
.live-line.me { color: var(--accent-2); }
.live-line.sys { color: var(--muted); font-style: italic; }
.live-tools { opacity: 0; transition: opacity .2s; white-space: nowrap; }
.live-line:hover .live-tools, .live-line:focus-within .live-tools { opacity: 1; }
.live-tools button { padding: 0 6px; margin-left: 4px; font-size: .7rem; border-radius: 6px; }
.live-form { display: flex; align-items: center; gap: 6px; background: rgba(20, 15, 44, .6); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 3px; }
.live-form input { border: 0; background: none; padding: 6px 4px; font-size: .85rem; }
.live-name { padding: 4px 10px; font-size: .75rem; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-count { font-size: .7rem; color: var(--muted); padding-right: 8px; white-space: nowrap; }
@media (max-width: 600px) { .live { bottom: 12px; } .live-log { max-height: 90px; } .hud-hint { bottom: auto; top: 60px; } }

/* Jam: Startleiste, Reiter, Drum-Raster */
.jam-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.jam-bar .tempo { flex: 1 1 180px; }
.jam-bar [data-act="play"].on { background: linear-gradient(120deg, #ff4d6d, var(--accent)); }
.tabs { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.tabs button { border: 0; border-radius: 0; padding: 6px 16px; background: none; }
.tabs button.on { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #120b26; font-weight: 700; }
.synth-body[hidden] { display: none; }
.drum-grid { display: grid; grid-template-columns: 74px repeat(16, 1fr); gap: 3px; }
.pad { padding: 2px 6px; border-radius: 8px; font-size: .72rem; text-align: left; display: flex; justify-content: space-between; align-items: center; }
.pad small { color: var(--muted); font-size: .65rem; }
.pad.hit { animation: padhit .25s; }
@keyframes padhit { from { background: var(--accent-2); color: #120b26; box-shadow: 0 0 14px var(--accent-2); } }
.cell { padding: 0; height: 26px; border-radius: 5px; background: rgba(255, 255, 255, .06); }
.cell:nth-child(17n + 2), .cell:nth-child(17n + 6), .cell:nth-child(17n + 10), .cell:nth-child(17n + 14) { border-color: rgba(255, 255, 255, .28); }
.cell.on { background: linear-gradient(160deg, var(--accent-2), var(--accent)); }
.cell.now { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: -2px; }
.seq .knob { flex: 1 1 180px; }
@media (max-width: 600px) { .drum-grid { grid-template-columns: 52px repeat(16, 1fr); gap: 2px; } .cell { height: 22px; } .pad small { display: none; } }

/* Zahlenschloss */
.chest-icon { --c: #ffd84d; }
.lock-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lock-fields label { min-width: 0; }
.lock-fields input { width: 100%; text-align: center; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#lockForm.shake { animation: wrong .4s; }

/* Aktuelles Ziel unter dem Logo */
.quest { margin: 8px 0 0; max-width: min(360px, 60vw); display: flex; align-items: center; gap: 6px; font-size: .78rem; line-height: 1.35;
         background: rgba(20, 15, 44, .6); backdrop-filter: blur(8px); border: 1px solid var(--line); border-left: 3px solid var(--accent);
         padding: 6px 6px 6px 10px; border-radius: 10px; }
.quest b { color: var(--accent); }
button.tiny { width: 24px; height: 24px; font-size: .8rem; flex: none; opacity: .6; }
.unlock { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--accent); background: rgba(199, 125, 255, .1); }
.unlock p { margin: 0 0 10px; }
.unlock b { color: var(--accent); font-size: 1.1em; letter-spacing: .04em; }
.unlock[hidden] { display: none; }

/* Erzähl-Karte */
.story .screen { text-align: center; align-items: center; padding: 26px 22px 22px; }
.story h2 { margin: 0; font-size: 1.6rem; letter-spacing: .02em; background: linear-gradient(90deg, var(--accent), var(--accent-2));
            -webkit-background-clip: text; background-clip: text; color: transparent; }
.story p { margin: 0; }
.kicker { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }

/* Im Pferd */
.horse { position: fixed; inset: 0; z-index: 20; background: #05030f; animation: fadein .8s ease-out; }
.horse canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: none; }
.horse.out { animation: fadeout .7s forwards; }
.horse-box { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - 24px));
             background: rgba(14, 10, 32, .82); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; }
.horse-text { margin: 0 0 10px; }
.horse-choices:empty { display: none; }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }

/* Kurzer Zeitsprung zwischen den Karten */
.warp { position: fixed; inset: 0; z-index: 30; pointer-events: none;
        background: radial-gradient(circle, #fff 0%, var(--accent) 30%, var(--accent-2) 55%, #05030f 80%); animation: warp 1.1s ease-in-out forwards; }
.warp[hidden] { display: none; }
@keyframes warp { 0% { opacity: 0; transform: scale(.2) rotate(0); } 45% { opacity: 1; transform: scale(1.6) rotate(90deg); } 100% { opacity: 0; transform: scale(3) rotate(180deg); } }

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