/* =====================================================================
   Versteckte Extras (Münze, Erfolge, Terminal, Bon-Drucker, Minispiel …)
   Wird nur geladen, wenn „Verspielte Effekte“ im Admin aktiv sind.
   ===================================================================== */

/* ---------- Footer: Münze + Trophäe ---------- */
.egg-slot { display: inline-flex; align-items: center; gap: .5rem; }
.coin { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; padding: 0; }
.coin i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-3); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25), inset 3px 3px 0 rgba(255, 255, 255, .4); transition: transform .5s var(--ease); }
.coin:hover i { transform: rotateY(180deg) scale(1.15); }
.coin.is-spin i { animation: spin .6s var(--ease); }
@keyframes spin { to { transform: rotateY(720deg) translateY(-10px); } }
.trophy { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--accent3-text); font: 400 .68rem/1 var(--font-pixel); letter-spacing: .06em; cursor: pointer; transition: border-color .2s, background .2s; }
.trophy[hidden] { display: none; }
.trophy:hover { border-color: var(--accent-3); background: color-mix(in srgb, var(--accent-3) 12%, transparent); }

/* ---------- Toast (normal + Achievement) ---------- */
.toast { position: fixed; z-index: 120; left: 50%; bottom: 1.5rem; max-width: calc(100% - 2rem); padding: .85rem 1.1rem; transform: translate(-50%, 220%); background: var(--text); color: var(--bg); font: 400 .78rem/1.3 var(--font-pixel); letter-spacing: .06em; text-transform: uppercase; text-align: center; transition: transform .45s var(--ease); clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); }
.toast.is-on { transform: translate(-50%, 0); }
.toast--ach { display: grid; gap: .3rem; min-width: 17rem; padding: .9rem 1.3rem .9rem 3.4rem; text-align: left; background: var(--accent-3); color: #2b1f00; }
.toast--ach::before { content: '★'; position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; }
.toast--ach small { font-size: .6rem; opacity: .7; letter-spacing: .12em; }
.toast--ach b { font-weight: 400; font-size: .92rem; }

/* ---------- Konfetti / Blütenblätter ---------- */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 110; pointer-events: none; }

/* ---------- Arcade-Modus (Konami) ---------- */
html.arcade { --accent: #00e5ff; --accent-2: #39ff88; --accent-3: #fff200; --on-accent: #02080c; }
html.arcade body::after { content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
html.arcade .hero-name { animation: hue 6s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }

/* ---------- Interaktives Terminal ---------- */
.term { cursor: text; }
.term.is-live .tl { opacity: 1; animation: none; }
.term.is-live .tl-cmd .typed { width: auto; animation: none; }
.term.is-live .term-body { max-height: 24rem; overflow-y: auto; }
.tl-live { opacity: 1 !important; animation: none !important; }
.tl-dim { color: var(--faint); }
.tl-err { color: var(--err); }
.term-body > * { flex-shrink: 0; }
.tl-fetch { margin: .3rem 0; white-space: pre; overflow-x: auto; line-height: 1.3; font: inherit; }
.tl-fetch .a { color: var(--accent); } .tl-fetch .b { color: var(--accent-2); } .tl-fetch .c { color: var(--accent3-text); }
.tl-name { display: inline-block; min-width: 11ch; color: var(--accent3-text); }
.term-input { background: transparent; border: 0; outline: 0; padding: 0; margin: 0; width: calc(100% - 2.6ch); color: var(--text); font: inherit; caret-color: var(--accent); }

/* ---------- Bon-Drucker ---------- */
.receipt { --w: min(300px, 86vw); position: fixed; z-index: 130; top: 0; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2); padding: 1.5rem 1.3rem 2.2rem; background: #f6f2e8; color: #1b1b1b; font: 400 .78rem/1.55 var(--font-mono); cursor: pointer; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  animation: feed 2.6s steps(26) both; }
@keyframes feed { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.receipt.out { animation: feed-out .6s ease-in forwards; }
@keyframes feed-out { to { transform: translateY(-115%); } }
.receipt .r-title { text-align: center; font-weight: 700; letter-spacing: .14em; font-size: .9rem; }
.receipt .r-sub { text-align: center; opacity: .65; }
.receipt .rl { display: flex; justify-content: space-between; gap: .8rem; }
.receipt hr { border: 0; border-top: 1px dashed #1b1b1b; margin: .6rem 0; }
.receipt .r-bar { height: 34px; margin: .7rem 0 .3rem; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px); }
.receipt .r-thx { text-align: center; font-weight: 700; margin-top: .4rem; }

/* ---------- Overlays: Erfolge + Minispiel ---------- */
.eggs-overlay { position: fixed; inset: 0; z-index: 125; display: grid; place-items: center; padding: 1rem; background: rgba(3, 10, 16, .72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.ach-panel, .game-panel { width: min(100%, 460px); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 40px 100px -30px #000; overflow: hidden; outline: none; }
.ach-panel > header { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.ach-panel h2 { font-size: 1.15rem; } .ach-count { font: 400 .72rem var(--font-pixel); color: var(--accent3-text); letter-spacing: .08em; }
.ach-list { list-style: none; margin: 0; padding: .6rem; overflow-y: auto; display: grid; gap: .4rem; }
.ach { display: flex; gap: .8rem; align-items: center; padding: .65rem .8rem; border-radius: 10px; background: var(--surface-2); opacity: .62; }
.ach.on { opacity: 1; box-shadow: inset 3px 0 0 var(--accent-3); }
.ach-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--bg-2); color: var(--faint); font: 400 1rem var(--font-pixel); }
.ach.on .ach-ico { color: var(--accent-3); }
.ach b { display: block; font: 600 .92rem var(--font-display); } .ach small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.ach-foot { display: flex; justify-content: space-between; gap: .6rem; padding: .8rem 1rem; border-top: 1px solid var(--line); }
.icon-btn.sm { width: 34px; height: 34px; }


/* ---------- Pixel-Begleiter (erscheint nach längerer Ruhe) ---------- */
.buddy { position: fixed; z-index: 60; bottom: 0; left: -90px; border: 0; background: transparent; padding: 0; cursor: pointer; animation: buddy-in 4.6s steps(32) forwards; }
.buddy svg { display: block; transform-origin: bottom center; animation: hop 1.15s ease-in-out infinite; }
.buddy-bubble { position: absolute; bottom: 100%; left: 50%; margin-bottom: 4px; transform: translateX(-50%); padding: .35rem .5rem; background: var(--text); color: var(--bg); font: 400 .62rem/1 var(--font-pixel); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.buddy.leave { animation: buddy-out 2.6s steps(22) forwards; }
.buddy.joy svg { animation: joy .6s ease-out infinite; }
@keyframes buddy-in { to { left: 12vw; } }
@keyframes buddy-out { from { left: 12vw; } to { left: 110vw; } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: scale(1.12, .88); } 50% { transform: translateY(-16px) scale(.94, 1.08); } 80% { transform: translateY(0) scale(1.1, .9); } }
@keyframes joy { 50% { transform: translateY(-22px) rotate(12deg); } }

/* ---------- Kleine Effekte ---------- */
.brand.glitch .brand-name { animation: glitch .9s steps(2) 1; }
@keyframes glitch {
  0% { transform: translate(0); } 15% { transform: translate(-2px, 1px); text-shadow: 2px 0 var(--accent-2), -2px 0 var(--accent); }
  35% { transform: translate(2px, -1px); text-shadow: -2px 0 var(--accent-2), 2px 0 var(--accent); } 55% { transform: translate(-1px, 2px); text-shadow: 3px 0 var(--accent-2); }
  75% { transform: translate(1px, -2px); text-shadow: -3px 0 var(--accent); } 100% { transform: none; text-shadow: none; }
}
html.shake main, html.shake .site-footer { animation: shake .6s linear; }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-6px, 2px); } 40%, 60% { transform: translate(6px, -1px); } }
.cover-wrap.pop .cover { animation: pop .38s var(--ease); }
@keyframes pop { 50% { transform: scale(1.08) rotate(-2deg); } }

@media (prefers-reduced-motion: reduce) {
  .receipt { animation: none; }
  .buddy { left: 12vw; animation: none; } .buddy svg { animation: none; }
  .brand.glitch .brand-name, html.shake main, html.shake .site-footer, .cover-wrap.pop .cover { animation: none; }
}

/* ---------- rm -rf /: Seite löst sich auf, dann „404“ ---------- */
.tl-pre { white-space: pre; }
.nuke-out { animation: nuke-out .65s steps(7) forwards; pointer-events: none; }
@keyframes nuke-out {
  0% { opacity: 1; transform: none; filter: none; }
  15% { transform: translate(-6px, 2px) skewX(4deg); filter: hue-rotate(90deg) saturate(2); }
  30% { transform: translate(5px, -3px); opacity: .85; clip-path: inset(0 0 45% 0); }
  50% { transform: translate(-3px, 1px) scaleY(.6); opacity: .6; filter: grayscale(1) contrast(2); clip-path: inset(40% 0 0 0); }
  75% { opacity: .3; transform: scale(.96); filter: blur(2px); }
  100% { opacity: 0; transform: scale(.9); filter: blur(6px); }
}
.nuke-black { position: fixed; inset: 0; z-index: 300; background: #000; opacity: 0; transition: opacity .5s; }
.nuke-black.on { opacity: 1; }
/* bewusst wie die Standard-Fehlerseite eines nginx-Servers – ohne jede Gestaltung der Seite */
.nuke-404 { position: fixed; inset: 0; z-index: 310; overflow: auto; background: #fff; color: #000; color-scheme: light; font: 16px/normal 'Times New Roman', Times, serif; text-align: center; }
.nuke-404 h1 { all: revert; display: block; font: bold 32px 'Times New Roman', Times, serif; margin: 21px 0; text-align: center; color: #000; }
.nuke-404 hr { all: revert; display: block; margin: 8px 0; }
.nuke-404 p { all: revert; margin: 16px 0; }
.nuke-404 button { all: revert; margin-top: 28px; font: 13.3333px Arial, sans-serif; cursor: pointer; }

/* ---------- Matrix-Regen ---------- */
.matrix { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 105; pointer-events: none; background: transparent; transition: opacity 1s; }
.matrix.fade { opacity: 0; }

/* ---------- Piano ---------- */
.piano { position: fixed; z-index: 115; bottom: 0; left: 50%; transform: translateX(-50%); width: min(620px, 98vw); padding: .6rem .6rem 0; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .6); animation: piano-up .4s var(--ease); }
@keyframes piano-up { from { transform: translate(-50%, 100%); } }
.piano-keys { position: relative; display: flex; height: 150px; }
.pkey { flex: 1; position: relative; border: 1px solid #1b1f2a; border-top: 0; background: linear-gradient(#f4f6fb, #d9deea); border-radius: 0 0 8px 8px; cursor: pointer; padding: 0; color: #5b6479; font: 400 .62rem var(--font-pixel); display: flex; align-items: flex-end; justify-content: center; padding-bottom: .5rem; transition: transform .05s; }
.pkey.on { background: linear-gradient(var(--accent), var(--accent-2)); color: #06121c; transform: translateY(2px); }
.pkey.black { position: absolute; top: 0; flex: none; width: 6.4%; height: 62%; z-index: 2; background: linear-gradient(#262c3c, #0b0f18); border-color: #000; border-radius: 0 0 6px 6px; color: #8d97ad; }
.pkey.black.on { background: linear-gradient(var(--accent-2), var(--accent)); }
.piano-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .2rem; }
.piano-bar small { color: var(--faint); font-size: .72rem; }

/* ---------- Kleinigkeiten ---------- */
.hero-name { user-select: none; }
.hero-name.epic { animation: epic .6s steps(6) 2; }
@keyframes epic { 50% { filter: brightness(1.7) drop-shadow(0 0 18px var(--accent-3)); transform: scale(1.04); } }
.live-dot { position: relative; cursor: default; }
.live-dot::after { content: ''; position: absolute; inset: -9px; }
.live-dot.is-live { background: #eb0400; animation: ping-red 1.4s infinite; }
@keyframes ping-red { 70% { box-shadow: 0 0 0 9px transparent; } 0% { box-shadow: 0 0 0 0 rgba(235, 4, 0, .6); } }
@media (prefers-reduced-motion: reduce) { .piano { animation: none; } .nuke-out { animation: none; } .hero-name.epic { animation: none; } }

/* ---------- Minispiel: Aufbau ---------- */
.game-panel { width: min(100%, 440px); overflow-y: auto; }
.game-panel [hidden] { display: none !important; }
.game-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem .55rem .95rem; border-bottom: 1px solid var(--line); }
.game-head strong { font: 400 .8rem var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--accent3-text); }
.game-stage { position: relative; background: #06101a; }
.game-panel canvas { display: block; width: min(100%, max(250px, calc((100svh - 330px) * .6667))); aspect-ratio: 2 / 3; height: auto; margin: 0 auto; background: #06101a; touch-action: none; cursor: pointer; }
.game-board { min-height: 320px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.game-board h3 { font-size: 1.05rem; }
.game-board table { width: 100%; border-collapse: collapse; font: 500 .85rem var(--font-mono); }
.game-board th { text-align: left; font: 400 .62rem var(--font-pixel); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); padding: .3rem .4rem; }
.game-board td { padding: .4rem; border-top: 1px solid var(--line); color: var(--muted); }
.game-board td.nm { color: var(--text); font-family: var(--font-body); font-weight: 600; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-board td:nth-child(3), .game-board th:nth-child(3) { text-align: right; }
.game-board tr.me td { color: var(--accent-3); background: color-mix(in srgb, var(--accent-3) 10%, transparent); }
.game-board .empty { color: var(--muted); }
.game-board .btn { align-self: flex-start; margin-top: auto; }
.game-bar { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; padding: .6rem .8rem .3rem; border-top: 1px solid var(--line); }
.game-form { display: flex; gap: .6rem; align-items: flex-end; padding: .5rem .9rem .2rem; }
.game-label { flex: 1; display: grid; gap: .3rem; font: 400 .62rem/1 var(--font-pixel); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.game-name { width: 100%; padding: .55rem .7rem; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: 600 .92rem var(--font-body); text-transform: none; letter-spacing: 0; }
.game-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.game-name.invalid { border-color: var(--err); animation: nudge .35s steps(4); }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.game-err { display: block; min-height: 1.3em; padding: .15rem .95rem 0; color: var(--err); font-size: .78rem; }
.game-mapbar { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; padding: .6rem .9rem; }
.game-hint { display: block; padding: .1rem .95rem .85rem; color: var(--faint); font-size: .74rem; line-height: 1.35; text-align: center; }
.game-panel[data-state='play'] .game-form, .game-panel[data-state='play'] .game-bar { opacity: .45; pointer-events: none; }

/* ---------- Shinkansen ---------- */
.train { position: fixed; z-index: 109; left: 0; bottom: 6px; width: min(520px, 92vw); pointer-events: none; transform: translateX(-110%); animation: train-go 6.6s cubic-bezier(.3, .1, .6, 1) forwards; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .3)); }
.train svg { display: block; width: 100%; height: auto; }
.train-rail { position: fixed; z-index: 108; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none; background: repeating-linear-gradient(90deg, var(--faint) 0 4px, transparent 4px 12px) 0 100% / 100% 3px no-repeat, linear-gradient(var(--line-2), var(--line-2)) 0 0 / 100% 2px no-repeat; animation: rail 7s ease forwards; }
@keyframes train-go { to { transform: translateX(calc(100vw + 10%)); } }
@keyframes rail { 0%, 100% { opacity: 0; } 10%, 85% { opacity: 1; } }

/* ---------- Bildschirmschoner ---------- */
.saver { position: fixed; inset: 0; z-index: 108; overflow: hidden; background: rgba(3, 10, 16, .94); cursor: none; animation: saver-in .8s ease both; }
.saver.out { opacity: 0; transition: opacity .3s; }
.saver-logo { position: absolute; left: 0; top: 0; padding: .35rem .9rem; border: 3px solid currentColor; font: 400 clamp(1.6rem, 6vw, 3rem)/1.2 var(--font-pixel); letter-spacing: .06em; text-shadow: 0 0 18px currentColor; box-shadow: 0 0 22px -6px currentColor; will-change: transform; transition: color .15s; }
.saver-cheer { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 400 clamp(2rem, 9vw, 4.5rem) var(--font-pixel); color: var(--accent3-text); text-shadow: 0 0 24px currentColor; animation: cheer 2.6s ease both; }
.saver-cheer[hidden] { display: none; }
@keyframes saver-in { from { opacity: 0; } }
@keyframes cheer { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 25% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .train, .train-rail { display: none; } }