@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
  --blue: #2f4a2a;    /* Herbstgrün – Hintergrund */
  --light: #e3b968;   /* warmes Gold – Titelleisten & Akzente */
  --white: #f4e7c7;   /* warmes Creme – Text & Ränder */
  --yellow: #e08f3a;  /* Herbstorange – Überschriften */
  --shadow: #16281a;  /* dunkles Grün – Schatten */
  --deep: #20351d;    /* dunkles Grün – Felder/Buttons */
  --line: #7d8654;    /* gedämpftes Oliv – gestrichelte Linien */
  --muted: #b7c39a;   /* helles Oliv – Hinweise/Placeholder */
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--blue); color:var(--white); font-family:"VT323", "Courier New", monospace; font-size:23px; letter-spacing:.02em; }
.desktop { width:min(1000px, calc(100% - 32px)); margin:0 auto; padding:18px 0 28px; }
.topbar, footer { display:flex; justify-content:space-between; align-items:baseline; color:var(--yellow); font-size:20px; gap:16px; flex-wrap:wrap; }
.topbar { padding:0 4px 15px; border-bottom:2px solid var(--light); margin-bottom:18px; }
.topright { display:flex; gap:22px; align-items:center; }
.sound { background:none; border:0; box-shadow:none; padding:2px; width:24px; height:24px; color:var(--muted); cursor:pointer; }
.sound:hover, .sound:focus { background:none; color:var(--light); outline:0; }
.sound svg { display:block; width:100%; height:100%; }
.sound .waves { display:none; }
.sound .slash { display:block; }
.sound.on { color:var(--yellow); }
.sound.on .waves { display:block; }
.sound.on .slash { display:none; }
.vol { -webkit-appearance:none; appearance:none; width:92px; height:8px; background:var(--deep); border:1px solid var(--white); cursor:pointer; padding:0; margin:0; }
.vol::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:18px; background:var(--yellow); border:1px solid var(--ink); border-radius:0; cursor:pointer; }
.vol::-moz-range-thumb { width:12px; height:18px; background:var(--yellow); border:1px solid var(--ink); border-radius:0; cursor:pointer; }
.vol:focus { outline:0; border-color:var(--yellow); }
@media (max-width:620px) { .vol { width:60px; } }
.topright .cd { color:var(--light); }
.topright #clock { color:var(--yellow); }

.window { border:3px solid var(--light); box-shadow:7px 7px 0 var(--shadow); background:var(--blue); }
.titlebar { min-height:31px; display:flex; align-items:center; justify-content:space-between; padding:2px 8px; color:var(--blue); background:var(--light); font-size:20px; }
.window-body { padding:20px 24px; }
.compact { padding:16px 18px; }
.hero h1 { color:var(--yellow); font-size:clamp(43px, 9vw, 76px); font-weight:400; margin:7px 0 8px; letter-spacing:.04em; }
p { margin:0 0 13px; line-height:1.06; }
.prompt, .cursor-line { color:var(--light); }
.lead { max-width:660px; font-size:27px; }
.cursor { animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

.grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; margin:20px 0; align-items:start; }
.grid > .window { display:flex; flex-direction:column; height:620px; overflow:hidden; }
.grid > .window > .titlebar { flex:none; }
.grid > .window > .window-body { flex:1; min-height:0; display:flex; flex-direction:column; }
.stack { display:grid; gap:20px; }

h2 { font-weight:400; color:var(--yellow); font-size:30px; margin:0 0 10px; }

/* Kasse */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.stat-tile { display:flex; align-items:center; gap:12px; border:2px solid var(--light); background:var(--deep); box-shadow:3px 3px 0 var(--shadow); padding:12px 14px; }
.stat-tile .ico { width:32px; height:32px; flex:none; }
.stat-tile .n { font-size:clamp(28px,4.6vw,52px); color:var(--yellow); line-height:.9; }
.stat-tile .l { color:var(--light); font-size:16px; }
.meter { display:flex; gap:3px; padding:6px; border:2px solid var(--white); background:var(--deep); box-shadow:3px 3px 0 var(--shadow); margin:16px 0 8px; }
.meter .cell { flex:1; height:20px; background:rgba(0,0,0,.28); transition:background .35s ease, transform .35s ease; }
.meter .cell.on { background:linear-gradient(180deg,var(--yellow),#b06a24); transform:translateY(-1px); }
.caption { color:var(--light); font-size:18px; }

/* Formular */
.field { margin-bottom:14px; }
.field label { display:block; color:var(--light); font-size:18px; margin-bottom:3px; }
input, textarea { width:100%; font:inherit; color:var(--white); background:var(--deep); border:2px solid var(--white); padding:6px 10px; outline:none; }
input::placeholder, textarea::placeholder { color:var(--muted); }
input:focus, textarea:focus { border-color:var(--yellow); }
textarea { resize:vertical; min-height:66px; }
.hint { color:var(--muted); font-size:16px; }

button { cursor:pointer; appearance:none; font:inherit; text-align:left; color:var(--white); background:var(--deep); border:2px solid var(--white); padding:10px; box-shadow:3px 3px 0 var(--shadow); }
button:hover, button:focus { color:var(--blue); background:var(--yellow); outline:0; }
.methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 14px; }
.methods button { text-align:center; }
.methods button.active { background:var(--yellow); color:var(--blue); }
.wide { width:100%; text-align:center; }

.paybox { display:none; border-top:2px dashed var(--line); padding-top:12px; margin-top:6px; }
.paybox.show { display:block; }
.payrow { display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--line); padding:5px 0; }
.payrow:last-of-type { border:0; }
.payrow b { color:var(--yellow); font-weight:400; word-break:break-all; }
.acts { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.acts a { text-decoration:none; }

/* Gästebuch */
.msgs { flex:1; min-height:0; overflow-y:auto; padding-right:6px; scrollbar-width:thin; scrollbar-color:var(--light) var(--deep); }
.msgs::-webkit-scrollbar { width:10px; }
.msgs::-webkit-scrollbar-track { background:var(--deep); }
.msgs::-webkit-scrollbar-thumb { background:var(--light); }
.msg { border-bottom:1px dashed var(--line); padding:9px 0; }
.msg:last-child { border:0; }
.msg .who { color:var(--yellow); }
.msg .txt { display:block; }
.msg .amt { color:var(--light); font-size:18px; }
.ticker { margin-top:10px; color:var(--light); border-top:2px dashed var(--line); padding-top:8px; overflow:hidden; white-space:nowrap; }
.ticker span { display:inline-block; animation:run 90s linear infinite; }
.ticker:hover span { animation-play-state:paused; }
@keyframes run { to { transform:translateX(-50%); } }

/* Story / Chat */
.chat { flex:1; min-height:0; overflow-y:auto; padding:12px; scrollbar-width:thin; scrollbar-color:var(--light) var(--deep); border:2px solid var(--line); background:var(--deep); }
.chat::-webkit-scrollbar { width:10px; }
.chat::-webkit-scrollbar-track { background:var(--shadow); }
.chat::-webkit-scrollbar-thumb { background:var(--light); }
.line { margin:0 0 7px; line-height:1.18; white-space:pre-wrap; }
.line.k::before { content:"Alan> "; color:var(--yellow); }
.line.u::before { content:"DU> "; color:var(--light); }
.line.sys { color:var(--light); }
.controls { flex:none; display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.controls input { flex:1; min-width:150px; }

footer { margin-top:24px; justify-content:center; text-align:center; color:var(--light); }

/* Herbst: alles fällt von oben nach unten */
.pumpkins { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.desktop { position:relative; z-index:2; }
.pumpkin { position:absolute; top:0; left:var(--left,50%); width:var(--size,34px); animation:fall var(--dur,42s) linear infinite; animation-delay:var(--delay,0s); will-change:transform; pointer-events:auto; cursor:pointer; }
.pumpkin .pk { display:block; width:100%; animation:swaySoft var(--bob,3.4s) ease-in-out infinite; }
.pumpkin .pk svg { display:block; width:100%; height:auto; }
.pumpkin.leaf .pk { animation:swaySpin var(--bob,3s) ease-in-out infinite; }
.pumpkin.nut .pk { animation:swaySoft var(--bob,3s) ease-in-out infinite; }
.pumpkin .pk svg.hit { animation:hit .35s ease; }
@keyframes hit { 0% { transform:scale(1); } 40% { transform:scale(1.45); } 100% { transform:scale(1); } }
@keyframes fall { from { transform:translateY(-18vh); } to { transform:translateY(118vh); } }
@keyframes swaySoft { 0%,100% { transform:translateX(-9px) rotate(-8deg); } 50% { transform:translateX(9px) rotate(8deg); } }
@keyframes swaySpin { 0% { transform:translateX(-16px) rotate(0deg); } 50% { transform:translateX(16px) rotate(180deg); } 100% { transform:translateX(-16px) rotate(360deg); } }
.rain { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.drop { position:absolute; top:0; width:2px; background:rgba(206,224,236,0.42); animation:raindrop var(--dur,1s) linear infinite; animation-delay:var(--delay,0s); will-change:transform; }
@keyframes raindrop { from { transform:translateY(-12vh); } to { transform:translateY(112vh); } }
.fx { position:fixed; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.fx .bit { position:absolute; width:6px; height:6px; animation:bitfly .7s ease-out forwards; }
@keyframes bitfly { from { transform:translate(0,0) scale(1); opacity:1; } to { transform:translate(var(--dx),var(--dy)) scale(.3); opacity:0; } }
.pxi { display:inline-block; height:1em; width:auto; vertical-align:-0.16em; }
.pxi.rose { height:0.8em; width:auto; vertical-align:-0.12em; margin:0 0.05em 0 0.06em; }
.pxi.cake { height:1em; vertical-align:-0.12em; margin:0 0.08em 0 0.18em; }
@media (prefers-reduced-motion:reduce) { .pumpkin, .pumpkin .pk, .drop { animation:none; } }

@media (max-width:860px) {
  .grid { grid-template-columns:1fr; }
  .grid > .window { height:74vh; min-height:440px; }
}
@media (max-width:760px) {
  body { font-size:21px; }
  .desktop { padding:12px 0 22px; }
  .stats { grid-template-columns:1fr; gap:10px; }
  .window-body { padding:16px; }
  .window-body.compact { padding:14px; }
  .topbar { font-size:17px; }
  .topright { gap:12px; }
  .lead { font-size:22px; }
  .vol { width:70px; }
}
@media (max-width:480px) {
  body { font-size:19px; }
  .stat-tile .n { font-size:34px; }
  .topbar { font-size:15px; }
  .topright { gap:9px; }
  .vol { width:50px; }
  .grid > .window { height:80vh; min-height:400px; }
  .hero h1 { font-size:clamp(30px, 13vw, 56px); }
}