/* INTERACTIVE · Spiele-UI: Glas-Panels mit Goldrahmen, schwebende Bedien-Chips, Menue in vier Stilen */
html[data-theme] .fxt { background: linear-gradient(180deg, #ffffff 0%, #bfe2ff 45%, #4aa8ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 #0d2a5a) drop-shadow(0 0 30px rgba(70, 170, 255, 0.45)); }
html[data-theme] .ph-t { font-size: clamp(56px, 14cqi, 150px); line-height: 0.95; letter-spacing: 0; }
html[data-theme] .ph-s { color: #e8c066; letter-spacing: 0.5em; }
html[data-theme] .ph-fx { background: linear-gradient(90deg, rgba(5, 11, 22, 0.95) 0%, rgba(5, 11, 22, 0.55) 50%, rgba(5, 11, 22, 0.15) 100%), radial-gradient(50% 60% at 75% 50%, rgba(70, 170, 255, 0.2), transparent 70%); }
.fx-ui { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fx-ui .chip { position: absolute; display: flex; }
.fx-ui .ci { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; border: 1px solid rgba(232, 190, 90, 0.55); background: linear-gradient(180deg, rgba(36, 80, 146, 0.86), rgba(10, 28, 64, 0.92)); font: 700 13px/1 'Baloo 2', var(--body); color: #e8f3ff; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25); opacity: 0.85; }
.fx-ui .chip i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(180deg, #7cf08a, #22a546); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); }
/* Je drei Hinweise links und rechts, halb ueber der Kante des Artworks (Position aus --cx/--cy/--cw/--ch, core.js) */
.fx-ui .chip { --side: -1; left: calc(var(--cx, 75%) + var(--side) * (var(--cw, 400px) / 2 - 28px)); top: calc(var(--cy, 50%) + var(--h) * var(--ch, 500px)); translate: -100% -50%; opacity: 0; }
.fx-ui :is(.c1, .c5, .c2) { --side: 1; translate: 0 -50%; }
.fx-ui .c0 { --h: -0.3; --k: 0; } .fx-ui .c3 { --h: 0.02; --k: 2; } .fx-ui .c4 { --h: 0.33; --k: 4; }
.fx-ui .c1 { --h: -0.36; --k: 1; } .fx-ui .c5 { --h: -0.04; --k: 3; } .fx-ui .c2 { --h: 0.28; --k: 5; }
/* Einblenden aussen (.chip), Schweben innen (.ci): zwei Animationen auf transform/opacity am selben Element rechnet Chrome dauerhaft
   im Hauptthread, getrennt laufen beide auf der Grafikkarte. Endwert des Einblendens steht im Grundstil (backwards, keine Nachwirkung) */
.ph.fx-on .fx-ui .chip { opacity: 1; animation: chip-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) calc(var(--k) * 140ms) backwards; }
.ph.fx-on .fx-ui .ci { animation: chip 8s ease-in-out calc(var(--k) * 140ms + 0.6s) infinite; }
@keyframes chip-pop { from { opacity: 0; transform: translateY(12px) scale(0.85); } to { opacity: 1; transform: none; } }
.fx-ui .c1 i { background: linear-gradient(180deg, #ffd56a, #e5a51a); } .fx-ui .c2 i { background: linear-gradient(180deg, #ff8a8a, #d63a3a); } .fx-ui .c3 i { background: linear-gradient(180deg, #7cc8ff, #2a7fe0); }
@keyframes chip { 0%, 100% { transform: translateY(0); opacity: 0.85; } 50% { transform: translateY(-14px); opacity: 1; } }
html[data-theme] .ph-cover .glow { background: radial-gradient(closest-side, rgba(70, 170, 255, 0.55), rgba(20, 80, 170, 0.2) 55%, transparent); }
html[data-theme] .btn--acc { background: linear-gradient(180deg, #ffe08c, #e3a93a); color: #2a1a00; border-radius: 14px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 10px 30px -8px rgba(232, 190, 90, 0.6); font-family: var(--t-disp); font-size: 14px; letter-spacing: 0.08em; }
html[data-theme] .btn--acc:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
html[data-theme] .btn--ghost { border-radius: 14px; }
html[data-theme] .icon-btn { border-radius: 14px; }
html[data-theme] .ph-meta li + li::before, html[data-theme] .pb .gem { width: 9px; height: 9px; border-radius: 3px; transform: none; background: linear-gradient(180deg, #7cf08a, #22a546); box-shadow: none; }
html[data-theme] .pt-card { border-radius: 22px; border: 2px solid rgba(232, 190, 90, 0.45); background: linear-gradient(180deg, rgba(40, 90, 160, 0.35), rgba(8, 20, 46, 0.92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
html[data-theme] .pt-card .br { display: none; }
html[data-theme] .pd .num { font-family: var(--t-disp); }
html[data-theme] .pd-grid li { border-radius: 16px; }
/* Menue-Spielwiese */
.ui-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.ui-tabs { display: grid; gap: 8px; }
.ui-tabs button { height: 54px; border-radius: 14px; border: 1px solid rgba(232, 190, 90, 0.35); font: 700 16px var(--t-disp); color: var(--fg-2); transition: background-color 0.25s, color 0.25s, transform 0.3s var(--ease); }
.ui-tabs button:hover { transform: translateX(4px); }
.ui-tabs button.on { background: linear-gradient(180deg, #ffe08c, #e3a93a); color: #2a1a00; border-color: transparent; }
.ui-menu { position: relative; padding: 28px; border-radius: 26px; transition: background 0.5s, border-color 0.5s; }
.ui-menu.swap { animation: uiswap 0.5s var(--ease-out); }
@keyframes uiswap { from { opacity: 0.2; transform: scale(0.97); } }
.ui-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.ui-title span { font: 800 34px/1 var(--t-disp); }
.ui-title b { font: 600 12px var(--body); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.ui-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ui-b { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; font: 700 15px var(--t-disp); text-align: left; transition: transform 0.15s, filter 0.2s, background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s; animation: lkin 0.5s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.ui-b i { flex: none; width: 18px; height: 18px; }
.ui-b:hover { filter: brightness(1.15); transform: translateY(-2px); }
.ui-b.hit { animation: uihit 0.35s var(--ease-out); }
@keyframes uihit { 30% { transform: scale(0.94); } 60% { transform: scale(1.04); } }
@keyframes lkin { from { opacity: 0; transform: translateY(10px); } }
.ui-menu[data-style="casual"] { background: linear-gradient(180deg, #7fd3ff, #3a8fe8); border: 4px solid #fff; color: #08264d; }
.ui-menu[data-style="casual"] .ui-b { border-radius: 18px; background: #fff; color: #1a4f8f; box-shadow: inset 0 -4px 0 #b9d8f3; }
.ui-menu[data-style="casual"] .ui-b i { border-radius: 50%; background: #ffcf3a; }
.ui-menu[data-style="dark"] { background: linear-gradient(180deg, #1a1420, #0a080d); border: 1px solid #5a2a3a; color: #d8c8d0; }
.ui-menu[data-style="dark"] .ui-b { border-radius: 2px; background: rgba(120, 20, 40, 0.18); border: 1px solid rgba(160, 40, 70, 0.5); color: #e8c8d0; }
.ui-menu[data-style="dark"] .ui-b i { transform: rotate(45deg); width: 10px; height: 10px; margin: 0 4px; background: #c22a4a; }
.ui-menu[data-style="medieval"] { background: linear-gradient(180deg, #e8d3a6, #c8a96a); border: 6px double #6a4a1a; color: #3a2408; border-radius: 6px; }
.ui-menu[data-style="medieval"] .ui-b { border-radius: 4px; background: linear-gradient(180deg, #7a1e14, #4a0e08); border: 2px solid #d9b25a; color: #f6e2a8; font-family: 'Cormorant Garamond', serif; font-size: 17px; }
.ui-menu[data-style="medieval"] .ui-b i { border-radius: 50%; background: radial-gradient(circle, #f6e2a8, #b8862f); }
.ui-menu[data-style="modern"] { background: #0e1116; border: 1px solid rgba(255, 255, 255, 0.12); color: #e8eef6; border-radius: 12px; }
.ui-menu[data-style="modern"] .ui-b { border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(70, 170, 255, 0.35); color: #e8eef6; font-family: var(--body); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.ui-menu[data-style="modern"] .ui-b i { width: 3px; height: 18px; background: #46aaff; box-shadow: 0 0 10px #46aaff; }
@media (max-width: 860px) { .ui-wrap { grid-template-columns: minmax(0, 1fr); } .ui-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { html[data-theme] .fx-ui { display: none; } }