/* Zauberschule-Look: Kerzenlicht, altes Gold, Bordeaux, Pergament – gedämpft statt Neon */
:root {
  --bg: #0e1014;
  --panel: rgba(22, 18, 14, .95);
  --line: rgba(201, 162, 74, .45);
  --text: #efe3c4;
  --muted: #a99a7a;
  --gold: #c9a24a;
  --gold-hi: #f0d488;
  --wine: #6e1a22;
  --wine-dk: #3e0d12;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#cv { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; }

.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(8, 7, 5, .55); backdrop-filter: blur(2px); z-index: 10; }
.hidden { display: none !important; }
.panel { width: min(380px, 100%); max-height: 100%; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 24px 18px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: inset 0 0 0 4px rgba(22,18,14,.95), inset 0 0 0 5px rgba(201,162,74,.25), 0 20px 60px rgba(0,0,0,.6); }

h1 { margin: 0; text-align: center; font-size: 46px; font-weight: 700; letter-spacing: 6px; color: var(--gold-hi);
  text-shadow: 0 2px 0 #4a3510, 0 0 18px rgba(240,200,120,.25); }
h1 small { display: block; margin-top: 2px; font-size: 14px; font-style: italic; letter-spacing: 4px; font-weight: 400; color: var(--muted); }
h1::after { content: ""; display: block; height: 1px; margin: 10px 30px 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
h2 { margin: 0 0 4px; text-align: center; font-size: 26px; font-weight: 700; color: var(--gold-hi); letter-spacing: 2px; }
.coins { text-align: center; font-size: 19px; font-weight: 700; color: var(--gold-hi); }
.muted { color: var(--muted); font-weight: 400; font-size: 14px; }
.hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.7; font-style: italic; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row button { width: 56px; }

button { font: inherit; font-weight: 700; font-size: 17px; color: var(--text); background: linear-gradient(#2c241b, #1d1812); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 14px; cursor: pointer; letter-spacing: .5px; transition: transform .06s, border-color .15s; }
button:active { transform: scale(.97); }
button:hover { border-color: var(--gold); }
button:disabled { opacity: .45; cursor: default; }
button.big { background: linear-gradient(#8a2129, var(--wine) 55%, var(--wine-dk)); color: var(--gold-hi); font-size: 21px; padding: 15px;
  border: 1px solid var(--gold); box-shadow: 0 3px 0 #22070a, 0 0 16px rgba(201,162,74,.18); letter-spacing: 2px; }

#pauseBtn { position: fixed; top: 12px; right: 12px; width: 44px; height: 34px; padding: 0; z-index: 5; font-size: 14px; background: rgba(0,0,0,.45); }

.upg { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(201,162,74,.25); border-radius: 4px; background: rgba(240,220,170,.03); }
.upg b { font-size: 15px; color: var(--gold-hi); }
.upg span { font-size: 12px; color: var(--muted); font-style: italic; }
.upg button { grid-row: span 2; font-size: 14px; padding: 8px 10px; min-width: 92px; }
#shopList { display: flex; flex-direction: column; gap: 8px; }
#resStats { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 16px; padding: 6px 4px 10px; }
#resStats b { text-align: right; color: var(--gold-hi); }

#strikeBtn { position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 5; font-size: 13px; padding: 9px 16px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) calc(var(--p, 0) * 100%), rgba(14,12,9,.7) 0); border: 1px solid rgba(201,162,74,.7); }
#strikeBtn.ready { animation: pulse .9s infinite alternate; color: #1d1408; }
@keyframes pulse { to { box-shadow: 0 0 20px rgba(240,212,136,.8); } }