:root {
  --night: #141b29;
  --gui: #c6c6c6;        /* Inventar-Grau */
  --gui-hi: #ffffff;
  --gui-lo: #555555;
  --slot: #8b8b8b;
  --ink: #2b2b2b;        /* Text auf Grau */
  --ink-soft: #4f4f4f;
  --text: #f4f4f4;       /* Text auf dunklem Grund */
  --muted: #b9c3d2;
  --gold: #ffd83d;
  --red: #c8323c;
  --red-deep: #6e1219;
  --green: #3c8527;
  --px: 3px;             /* "Pixel"-Breite der Rahmen */
  --font: "Minecraft", "Monocraft", "Cascadia Mono", Consolas, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
  --emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  /* gewölbte Inventar-Fläche bzw. eingelassener Slot */
  --raised: inset var(--px) var(--px) 0 var(--gui-hi), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--gui-lo);
  --sunken: inset var(--px) var(--px) 0 #373737, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--gui-hi);
  --shadow-text: 2px 2px 0 rgba(0, 0, 0, .75);
}

* { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--night) var(--tex-night, none) 0 0 / 64px 64px;
  image-rendering: pixelated;
  color: var(--text);
  font: 15px/1.6 var(--font);
  min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; line-height: 1.2; margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--gold); }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
main, .top, .foot { position: relative; z-index: 1; }
main { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Inventar-Fenster: alles, was "Panel" ist */
.riddle, .card, .pack, .start, .reward {
  background: var(--gui);
  color: var(--ink);
  border: var(--px) solid #000;
  box-shadow: var(--raised), 6px 6px 0 rgba(0, 0, 0, .45);
  padding: 18px;
}
.riddle a, .card a, .pack a, .start a, .reward a { color: #1c3fa8; font-weight: 700; }
.riddle .muted, .card .muted, .pack .muted, .reward .muted { color: var(--ink-soft); }

/* Kopfzeile */
.top { position: sticky; top: 0; z-index: 5; background: #4a3421 var(--tex-planks, none) 0 0 / 64px 64px; border-bottom: var(--px) solid #000; box-shadow: inset 0 calc(-1 * var(--px)) 0 rgba(0, 0, 0, .35); }
.lights { height: 12px; border-top: 2px solid #1b1b1b; background-size: 56px 8px; background-image:
  linear-gradient(90deg, var(--red) 0 8px, transparent 8px 14px, var(--gold) 14px 22px, transparent 22px 28px, #55c93f 28px 36px, transparent 36px 42px, #4aa3ff 42px 50px, transparent 50px);
  background-position: 6px 2px; background-repeat: repeat-x; }
.nav { max-width: 1120px; margin: 0 auto; padding: 8px 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav .ghost { margin-left: auto; }

/* Minecraft-Knöpfe */
button { font: inherit; cursor: pointer; }
.btn, .ghost, .chip, .nav a {
  display: inline-block; text-decoration: none; font-weight: 700; color: #fff; text-shadow: var(--shadow-text);
  background: #7a7a7a; border: var(--px) solid #000; padding: 7px 16px;
  box-shadow: inset var(--px) var(--px) 0 #aeaeae, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #4b4b4b;
}
.btn:hover, .ghost:hover, .chip:hover, .nav a:hover {
  background: #6f7fc4; color: #ffffa0;
  box-shadow: inset var(--px) var(--px) 0 #a9b6ee, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #3d4a8a, 0 0 0 2px #fff;
}
.btn:active, .chip:active { transform: translateY(2px); }
.btn:disabled { background: #3a3a3a; color: #a0a0a0; box-shadow: none; cursor: wait; }
.btn { padding: 10px 22px; }
.ghost[aria-pressed="false"] { color: #a0a0a0; background: #4a4a4a; box-shadow: inset var(--px) var(--px) 0 #2c2c2c, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #666; }
.chip[aria-pressed="true"] { background: var(--green); color: #fff; box-shadow: inset var(--px) var(--px) 0 #6fc552, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #1f4d12; }
.chip small { opacity: .85; font-weight: 400; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 4px; text-shadow: var(--shadow-text); }

/* Begrüßung */
.hero { padding: 52px 0 24px; }
.eyebrow { color: var(--gold); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; margin-bottom: 14px; text-shadow: var(--shadow-text); }
.title { position: relative; display: inline-block; }
h1 { font-size: clamp(2.3rem, 8.5vw, 5.2rem); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; color: #f4f4f4;
  text-shadow: 0 4px 0 #b9b9b9, 0 8px 0 var(--red), 0 12px 0 var(--red-deep), 6px 18px 0 rgba(0, 0, 0, .55); }
.splash { position: absolute; right: -14%; bottom: -8%; color: #ffff55; font-weight: 700; font-size: clamp(.9rem, 2.4vw, 1.5rem);
  text-shadow: 3px 3px 0 #3f3f15; transform: rotate(-16deg); animation: splash .9s ease-in-out infinite alternate; white-space: nowrap; }
@keyframes splash { from { transform: rotate(-16deg) scale(1); } to { transform: rotate(-16deg) scale(1.1); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: 28px; margin-top: 44px; align-items: start; }
/* Buchseite */
.letter { background: #fdf6dc; color: #2a2118; padding: 24px 26px 18px; font-size: 1rem;
  border: var(--px) solid #000; box-shadow: inset var(--px) var(--px) 0 #fff, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #cdbb8a, 0 0 0 var(--px) #6b4423, 9px 9px 0 rgba(0, 0, 0, .45); margin: var(--px); }
.letter strong { color: #a01822; }
.letter .sign { font-weight: 700; font-size: 1.15rem; color: #2c6b1c; margin: 0; }
.start { text-align: center; }
.start-label { font-size: 1.2rem; font-weight: 700; margin: 0; }
.start-sub { color: var(--ink-soft); margin-bottom: 14px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.countdown div { background: var(--slot); box-shadow: var(--sunken); padding: 10px 2px 8px; }
.countdown b { display: block; font-size: 1.7rem; line-height: 1; color: #fff; text-shadow: var(--shadow-text); font-variant-numeric: tabular-nums; }
.countdown span { font-size: .72rem; color: #f0f0f0; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.countdown .live { grid-column: 1 / -1; font-weight: 700; font-size: 1.1rem; color: var(--gold); text-shadow: var(--shadow-text); }

/* Serverliste wie im Mehrspieler-Menü */
.side { display: grid; gap: 22px; }
.servers { background: rgba(0, 0, 0, .6); border: var(--px) solid #000; box-shadow: 6px 6px 0 rgba(0, 0, 0, .45); padding: 12px; display: grid; gap: 10px; }
.servers-title { font-size: 1rem; text-align: center; margin: 0; text-shadow: var(--shadow-text); }
.servers-title::before { display: none; }
.server { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 8px; border: 2px solid #808080; }
.server-icon { width: 44px; height: 44px; display: grid; place-items: center; font: 1.6rem/1 var(--emoji); background: #2b2b2b; image-rendering: auto; }
.server-info { display: grid; min-width: 0; }
.server-info b { color: #fff; }
.server-info span { color: #a8a8a8; font-size: .82rem; }
.server-info code { font: 700 .92rem var(--font); color: #55ff55; overflow-wrap: anywhere; user-select: all; }
.server .copy { grid-column: 1 / -1; padding: 6px 12px; }

.block { padding: 60px 0 8px; }
.block-head { max-width: 760px; margin-bottom: 22px; text-shadow: var(--shadow-text); }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 10px; color: #fff; text-shadow: 3px 3px 0 #000; }
h2::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .45em; background: #fff var(--tex-snow, none) 0 0 / 100% 100%; border: 2px solid #000; vertical-align: -.02em; }

/* Rätsel */
.progress { list-style: none; display: inline-flex; gap: 0; padding: var(--px); margin: 14px 0 0; background: #000; text-shadow: none; }
.progress li { width: 48px; height: 48px; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem;
  background: var(--slot); color: #d9d9d9; box-shadow: var(--sunken); text-shadow: var(--shadow-text); }
.progress li.open { outline: var(--px) solid #fff; outline-offset: calc(-1 * var(--px)); color: var(--gold); position: relative; z-index: 1; }
.progress li.done { background: var(--green); color: #fff; }
.riddles { display: grid; gap: 22px; }
.riddle h3 { font-size: 1.25rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #3f3f3f; }
.riddle.locked { background: #8b8b8b; box-shadow: inset var(--px) var(--px) 0 #a8a8a8, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #4a4a4a, 6px 6px 0 rgba(0, 0, 0, .45); }
.riddle.locked h3 { color: #2b2b2b; }
.riddle.locked p { margin: 8px 0 0; color: #2f2f2f; }
.riddle.solved { background: #b5d6a7; box-shadow: inset var(--px) var(--px) 0 #e3f5da, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #4f7a3f, 6px 6px 0 rgba(0, 0, 0, .45); }
.tag { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; background: #3b3b3b; color: #fff; }
.tag.ok { background: var(--green); }
.riddle-body { margin-top: 16px; display: grid; gap: 14px; }
/* Text wie im Chat / Befehlsblock */
.cipher { font-size: 1rem; line-height: 1.75; background: #101010; color: #e8e8e8; border: var(--px) solid #000; box-shadow: inset 2px 2px 0 #3a3a3a; padding: 14px 16px; overflow-wrap: anywhere; }
.cipher p:last-child { margin: 0; }
.hint { font-style: italic; font-weight: 700; color: #7a3d00; margin: 0; }
.formula { font-weight: 700; font-size: 1.25rem; margin: 0; }
.answer { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.field { flex: 1 1 220px; display: grid; gap: 4px; font-weight: 700; }
input[type=text], input[type=search] { width: 100%; font: inherit; color: #fff; background: #000; border: var(--px) solid #a0a0a0; padding: 9px 12px; }
input[type=text]:focus, input[type=search]:focus { border-color: #fff; outline: none; }
input::placeholder { color: #8a8a8a; }
.feedback { min-height: 1.6em; margin: 0; font-weight: 700; }
.feedback.bad { color: #a01010; }
.feedback.good { color: #1a6b2a; }
.solved-text { font-weight: 700; margin: 12px 0 0; color: #1f4d12; }

.build { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.pad { display: grid; grid-template-columns: repeat(3, 56px); gap: 0; padding: var(--px); background: #000; }
.pad button { width: 56px; height: 56px; padding: 0; background: var(--slot); border: 0; box-shadow: var(--sunken); }
.pad button:hover { background: #a9a9a9; }
.pad button[aria-pressed="true"] { background: #f2f7fa var(--tex-snow, none) 0 0 / 100% 100%; box-shadow: inset 0 0 0 var(--px) #000; }

.scene { position: relative; overflow: hidden; border: var(--px) solid #000; cursor: crosshair; line-height: 0; image-rendering: auto; }
.scene img { width: 100%; height: auto; display: block; }
.scene .pin { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: var(--px) solid #fff; box-shadow: 0 0 0 var(--px) #000; pointer-events: none; }

.reward { margin-top: 22px; background: #2b2b2b; color: #f4f4f4; box-shadow: inset var(--px) var(--px) 0 #5a5a5a, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #111, 0 0 0 var(--px) var(--gold), 9px 9px 0 rgba(0, 0, 0, .45); margin-inline: var(--px); padding: 24px; }
.reward h3 { font-size: 1.6rem; color: var(--gold); margin-bottom: 8px; text-shadow: var(--shadow-text); }
.reward ol { padding-left: 1.8em; margin: 0 0 18px; }
.reward li { margin-bottom: 6px; }
.reward h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #c9c9c9; margin: 18px 0 10px; }
.reset-row { text-align: right; margin: 12px 0 0; }

/* Rezepte */
.search-bar { display: grid; gap: 12px; margin-bottom: 8px; }
.search input { font-size: 1.1rem; padding: 13px 16px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card { display: grid; gap: 12px; align-content: start; padding: 14px; }
.card-head { display: flex; gap: 12px; align-items: center; }
.card h3 { font-size: 1.05rem; color: #3f3f3f; }
.card .de { color: var(--ink-soft); font-size: .88rem; margin: 2px 0 0; }
.icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; font: 1.6rem/1 var(--emoji); background: var(--slot); box-shadow: var(--sunken); image-rendering: auto; }
.icon.tinted { background: var(--tint); }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.craft { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(3, 42px); gap: 0; }
.slot { position: relative; width: 42px; height: 42px; background: var(--slot); display: grid; place-items: center; box-shadow: var(--sunken); font: 1.3rem/1 var(--emoji); image-rendering: auto; }
.slot.full:hover { background: #c5c5c5; }
.px { width: 32px; height: 32px; image-rendering: pixelated; display: block; }
.slot.tinted { background: var(--tint); }
/* Item-Tooltip wie im Spiel */
.slot[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 4;
  white-space: nowrap; font: 700 .85rem/1.2 var(--font); color: #fff; text-shadow: 2px 2px 0 #3f3f3f; padding: 5px 8px;
  background: #100010; border: 2px solid #2d0a63; box-shadow: 0 0 0 2px #100010; pointer-events: none; }
.arrow { font-size: 1.8rem; font-weight: 700; color: #5a5a5a; line-height: 1; }
.result { display: grid; justify-items: center; gap: 2px; font-weight: 700; }
.result .slot { width: 48px; height: 48px; font-size: 1.6rem; }
.shapeless { font-size: .78rem; color: var(--ink-soft); margin-top: 4px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; }
.legend li { display: flex; gap: 8px; align-items: center; }
.swatch { width: 16px; height: 16px; flex: none; font: .8rem/16px var(--emoji); text-align: center; }
.swatch .px { width: 16px; height: 16px; }
.legend code { color: var(--ink-soft); font: .76rem var(--font); margin-left: auto; overflow-wrap: anywhere; text-align: right; }
.note { font-size: .86rem; font-weight: 700; color: #7a3d00; margin: 0; }
.reward .card .note { color: #7a3d00; }
.empty { grid-column: 1 / -1; text-align: center; padding: 40px 16px; border: var(--px) dashed #6c7686; color: var(--muted); text-shadow: var(--shadow-text); }
#count { text-shadow: var(--shadow-text); }

/* Datapacks */
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.pack { display: grid; gap: 8px; align-content: start; }
.pack h3 { font-size: 1.08rem; color: #3f3f3f; }
.pack p { margin: 0; color: var(--ink); font-size: .92rem; }
.pack.secret { background: #8b8b8b; box-shadow: inset var(--px) var(--px) 0 #a8a8a8, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #4a4a4a, 6px 6px 0 rgba(0, 0, 0, .45); }
.pack.secret h3, .pack.secret p { color: #262626; }
.pack.unlocked { box-shadow: var(--raised), 0 0 0 var(--px) var(--gold), 9px 9px 0 rgba(0, 0, 0, .45); margin: var(--px); }

/* "Fortschritt erzielt!" */
.toasts { position: fixed; top: 76px; right: 12px; z-index: 9; display: grid; gap: 8px; }
.toast { display: flex; gap: 12px; align-items: center; min-width: 250px; max-width: calc(100vw - 24px); padding: 10px 14px; background: #212121; color: #fff;
  border: var(--px) solid #000; box-shadow: inset 2px 2px 0 #555, inset -2px -2px 0 #111; animation: toast 5s forwards; }
.toast .icon { width: 40px; height: 40px; font-size: 1.4rem; background: none; box-shadow: none; }
.toast b { display: block; color: #ffff55; }
@keyframes toast { 0% { transform: translateX(120%); } 8%, 90% { transform: none; } 100% { transform: translateX(120%); } }

.foot { text-align: center; padding: 60px 16px 40px; text-shadow: var(--shadow-text); }
.foot p { margin: 0 0 4px; }

@media (max-width: 760px) {
  .hero { padding-top: 36px; }
  .hero-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .letter { padding: 18px; }
  .nav .ghost { margin-left: 0; }
  .nav a, .ghost { padding: 6px 10px; }
  .recipes { grid-template-columns: 1fr; }
  .splash { right: 0; bottom: -14%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .splash { animation: none; }
  .toast { animation: none; }
}