:root { --gold: #ffcf4a; --blue: #3aa0ff; --red: #ff4d5e; --ink: #0f1a14; --panel: rgba(12, 20, 16, .78); --text: #f4f7f2; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; width: 100vw; height: 100vh; overflow: hidden; background: #8fd0ff; color: var(--text);
  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;
}
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: #24382c; color: var(--text); box-shadow: 0 4px 0 #101a14; }
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(2px); box-shadow: 0 2px 0 #101a14; }
button:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
button.big { background: linear-gradient(180deg, #ffdf7a, #ffb52e); color: #3a2500; font-size: clamp(18px, 3.4vmin, 30px); padding: 12px 46px; box-shadow: 0 5px 0 #a8770b; }
button.rewarded { background: #3fbf6f; color: #052513; box-shadow: 0 4px 0 #1d7a41; }
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 { pointer-events: auto; }
.hud-top { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; gap: 10px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--panel); }
.pill img { width: 1.35em; height: 1.35em; border-radius: 50%; }
.pill b { color: var(--gold); }
.progress { position: relative; flex: 1; height: .8em; border-radius: 8px; background: rgba(10, 20, 14, .6); overflow: visible; }
.progress i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #6fe08a, #ffe066); }
.progress .boss { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); font-size: 1.3em; text-shadow: 0 2px 4px #000; }
#bossbar { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); width: min(70vw, 420px); text-align: center; text-shadow: 0 2px 4px #000; }
#bossbar .bar { height: 14px; margin-top: 4px; border-radius: 8px; background: rgba(40, 10, 10, .8); overflow: hidden; border: 2px solid rgba(255, 255, 255, .2); }
#bossbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff4d5e, #ff9b5e); transition: width .1s; }
#dragHint { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: flex; gap: 16px; align-items: center; font-size: clamp(18px, 3.6vmin, 30px);
  text-shadow: 0 2px 6px #000; animation: sway 1.4s ease-in-out infinite; }
@keyframes sway { 50% { transform: translateX(calc(-50% + 18px)); } }
#packCount { position: fixed; z-index: 9; transform: translate(-50%, -100%); padding: 4px 14px; border-radius: 999px; background: rgba(20, 60, 140, .9); border: 2px solid #9fd2ff;
  font-size: clamp(18px, 3.4vmin, 28px); font-weight: 900; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transition: transform .08s; }
#packCount.bump { transform: translate(-50%, -100%) scale(1.25); }
#banner { position: fixed; z-index: 12; left: 50%; top: 28%; transform: translate(-50%, -50%); font-size: clamp(30px, 7vmin, 64px); font-weight: 900; color: var(--gold);
  text-shadow: 0 4px 0 #5a3a00, 0 0 24px rgba(0, 0, 0, .6); white-space: nowrap; pointer-events: none; animation: bIn .35s ease-out; }
#banner.bad { color: var(--red); text-shadow: 0 4px 0 #4a0d08, 0 0 24px rgba(0, 0, 0, .6); }
@keyframes bIn { from { transform: translate(-50%, -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(18px, 3.4vmin, 30px); color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px #000; animation: floatUp .9s ease-out forwards; }
.float.good { color: #9fe7ff; } .float.bad { color: var(--red); } .float.coin { color: var(--gold); font-size: clamp(14px, 2.6vmin, 22px); }
@keyframes floatUp { 0% { opacity: 0; margin-top: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -60px; } }

.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(10, 24, 16, .35), rgba(6, 14, 10, .88)); }
.screen h1 { margin: 0; font-size: clamp(42px, 10vmin, 100px); line-height: .95; color: var(--gold); text-shadow: 0 5px 0 #6b4300, 0 0 30px rgba(0, 0, 0, .5); }
.screen h1 span { color: #fff; }
.screen h1 small { display: block; font-size: .48em; letter-spacing: .35em; color: #9fd2ff; text-shadow: 0 3px 0 #10325a; }
.screen h2 { margin: 0; font-size: clamp(28px, 6.5vmin, 56px); }
.sub { margin: 0; opacity: .92; }
.sub img, .reward img { width: 1.4em; height: 1.4em; border-radius: 50%; margin: 0 4px; }
.reward { margin: 0; font-size: clamp(22px, 4.4vmin, 36px); color: var(--gold); }
.row { display: flex; gap: 10px; }
.hint { opacity: .78; font-size: clamp(12px, 2vmin, 15px); max-width: 560px; margin: 2px 0 0; }
#shop { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.upg { display: flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(130px, 22vmin, 180px); padding: 10px; border-radius: 14px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .08); }
.upg b { color: var(--gold); font-size: .95em; }
.upg small { opacity: .8; font-size: .75em; }
.upg button { margin-top: 6px; padding: 7px 12px; background: #3aa0ff; color: #04203d; box-shadow: 0 4px 0 #1d5fa3; font-size: .9em; }
.upg button img { width: 1.1em; height: 1.1em; border-radius: 50%; }
#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: #24382c; overflow: hidden; }
#loading i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .15s; }
#toast { position: fixed; z-index: 40; left: 50%; bottom: 18%; transform: translateX(-50%); padding: 10px 18px; border-radius: 10px; background: var(--panel); }
@media (max-height: 460px) { .upg small { display: none; } }