:root { --gold: #ffd36b; --mint: #4fe0b0; --ink: #140f12; --panel: rgba(24, 16, 20, .78); --text: #f8f0e6; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; width: 100vw; height: 100vh; overflow: hidden; color: var(--text);
  background: #1a1214 url("assets/visuals/alchemy_lab_bg.webp") center / cover no-repeat;
  font: 700 16px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(20, 12, 14, .15) 20%, rgba(14, 8, 10, .8) 100%); pointer-events: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
img { vertical-align: middle; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 12px; padding: 10px 22px; background: #3a2a30; color: var(--text); box-shadow: 0 4px 0 #1c1216; }
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(2px); box-shadow: 0 2px 0 #1c1216; }
button.big { background: linear-gradient(180deg, #ffe08a, #ffbf3f); color: #3a2500; font-size: clamp(18px, 3.4vmin, 30px); padding: 12px 42px; box-shadow: 0 5px 0 #a8770b; }
button.rewarded { background: var(--mint); color: #062a1e; box-shadow: 0 4px 0 #1f8a66; }
button.icon { width: clamp(38px, 6vmin, 50px); height: clamp(38px, 6vmin, 50px); padding: 0; background: var(--panel); }

#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-size: clamp(14px, 2.5vmin, 21px); }
#hud button, #hud .pill { pointer-events: auto; }
.hud-top { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .06); }
.pill img { width: 1.35em; height: 1.35em; border-radius: 50%; }
.pill b { color: var(--gold); }
.boosters { position: absolute; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 10px; }
.booster { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 18px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 3px 0 #0c0708; font-size: .9em; }
.booster .ic { font-size: 1.3em; color: var(--gold); }
.booster.plain .ic { color: #d9c7b8; }
.booster .count { position: absolute; right: -6px; top: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #e5484d; color: #fff; font: 800 12px/22px system-ui, sans-serif; font-style: normal; }
.booster .count.buy { background: var(--gold); color: #3a2500; }
.booster:disabled { opacity: .45; }
#banner { position: fixed; z-index: 11; left: 50%; top: 16%; transform: translateX(-50%); font-size: clamp(28px, 7vmin, 60px); font-weight: 900; color: var(--gold);
  text-shadow: 0 4px 0 #6b4300, 0 0 24px rgba(0, 0, 0, .7); pointer-events: none; white-space: nowrap; animation: bIn .4s ease-out; }
@keyframes bIn { from { transform: translateX(-50%) scale(1.8); opacity: 0; } }
#fx { position: fixed; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; }
.float { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: clamp(16px, 3vmin, 24px); color: var(--gold); text-shadow: 0 2px 0 #4a3000, 0 0 6px #000; animation: floatUp .9s ease-out forwards; }
@keyframes floatUp { 0% { opacity: 0; margin-top: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -50px; } }

.screen { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(24, 14, 18, .45), rgba(14, 8, 10, .9)); }
.screen h1 { margin: 0; font-size: clamp(40px, 10vmin, 96px); line-height: .95; color: var(--gold); text-shadow: 0 5px 0 #6b4300, 0 0 30px rgba(0, 0, 0, .6); }
.screen h1 span { color: #fff; }
.screen h1 small { display: block; font-size: .42em; letter-spacing: .3em; color: var(--mint); text-shadow: 0 3px 0 #0b4a3a; }
.screen h2 { margin: 0; font-size: clamp(28px, 6.5vmin, 56px); }
.sub { margin: 0; opacity: .9; }
.sub img, .reward img { width: 1.4em; height: 1.4em; border-radius: 50%; margin: 0 4px; }
.reward { margin: 0; font-size: clamp(20px, 4vmin, 32px); color: var(--gold); }
.stars { display: flex; gap: 8px; font-size: clamp(40px, 9vmin, 76px); }
.stars i { font-style: normal; color: #3d3036; text-shadow: 0 3px 0 #1a1316; }
.stars i.on { color: var(--gold); text-shadow: 0 3px 0 #8a5a00, 0 0 20px rgba(255, 211, 107, .6); animation: starIn .35s ease-out backwards; }
.stars i.on:nth-child(2) { animation-delay: .15s; } .stars i.on:nth-child(3) { animation-delay: .3s; }
@keyframes starIn { from { transform: scale(2.2) rotate(-25deg); opacity: 0; } }
.hint { opacity: .78; font-size: clamp(12px, 2.1vmin, 16px); max-width: 540px; margin: 4px 0 0; }
.row { display: flex; gap: 10px; }
#loading { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; background: var(--ink); }
#loading .ltitle { font-size: clamp(24px, 6vmin, 48px); color: var(--gold); }
#loading .bar { width: min(60vw, 360px); height: 10px; border-radius: 10px; background: #3a2a30; overflow: hidden; }
#loading i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .15s; }
#toast { position: fixed; z-index: 40; left: 50%; top: 14%; transform: translateX(-50%); padding: 10px 18px; border-radius: 10px; background: var(--panel); }
@media (max-height: 480px) { .booster .lbl { display: none; } }