/* Шрифты — подмножества Philosopher, Rubik и Noto Sans Runic (OFL), см. tools/prepare_fonts.py.
   build.py подставляет вместо путей data:-URI. */
@font-face { font-family: "RC Title"; src: url(assets/fonts/title.woff) format("woff"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "RC UI"; src: url(assets/fonts/ui.woff) format("woff"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "RC Runic"; src: url(assets/fonts/runic.woff) format("woff"); font-display: block; }

:root {
  --bg: #0d0a1a;
  --panel: #1a1430;
  --border: #3d2f6b;
  --accent: #8b5cf6;
  --accent-light: #c4b5fd;
  --gold: #f5c451;
  --text: #f1ecff;
  --muted: #a79ec4;
  --danger: #f05252;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body {
  font-family: "RC UI", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 52%, transparent 55%, rgba(8, 4, 20, 0.55) 100%);
}

/* ——— Кнопки ——— */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px; padding: 0 22px; height: 52px; font-size: 20px; letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); white-space: nowrap;
  transition: transform 0.08s;
}
.btn:active { transform: translateY(2px) scale(0.98); }
.btn-gold {
  background: linear-gradient(#ffc24a, #f0a92a 55%, #dc9620);
  box-shadow: inset 0 -4px 0 #9a5b06, inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 6px 18px rgba(240, 169, 42, 0.35);
  color: #fff;
}
.btn-purple {
  background: linear-gradient(#7c4ff0, #6d3fe0 55%, #5b31c4);
  box-shadow: inset 0 -4px 0 #3b1d8f, inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(109, 63, 224, 0.4);
  color: #fff;
}
.btn-small { height: 38px; padding: 0 14px; font-size: 15px; border-radius: 12px; }
.btn-big { height: 66px; min-width: 260px; font-size: 24px; border-radius: 20px; animation: pulse 1.1s ease-in-out infinite; }
.btn-link { color: var(--muted); font-size: 16px; padding: 10px 16px; text-decoration: underline; text-underline-offset: 3px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(26, 20, 48, 0.75); border: 2px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 22px; height: 22px; }

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ——— HUD ——— */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
#topbar {
  position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 10px);
  display: flex; align-items: flex-start; justify-content: space-between; padding: 0 12px; gap: 10px;
}
#wave-box {
  flex: 0 1 260px; margin-top: 2px; padding: 6px 12px 7px; border-radius: 14px;
  background: rgba(26, 20, 48, 0.78); border: 2px solid var(--border); text-align: center;
}
#wave-label { font-family: "RC Title", serif; font-size: 18px; color: var(--gold); line-height: 1.1; }
#xp-bar { height: 9px; margin: 5px 0 3px; border-radius: 6px; background: #0d0a1a; overflow: hidden; border: 1px solid #2b2150; }
#xp-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #8b5cf6, #ff7ad9); transition: width 0.2s; }
#xp-label { font-size: 11px; color: var(--muted); letter-spacing: 0.03em; }
#kills {
  position: absolute; left: 12px; top: calc(var(--safe-top) + 58px);
  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 12px;
  background: rgba(26, 20, 48, 0.6); font-size: 16px;
}
#kills .skull { width: 20px; height: 20px; background: no-repeat center/contain; }

#boss-bar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 88px); width: min(78vw, 420px); text-align: center; }
#boss-bar .boss-name { font-family: "RC Title", serif; font-size: 18px; color: #e9d5ff; text-shadow: 0 0 10px #b06bff, 0 2px 0 #000; margin-bottom: 4px; }
#boss-bar .bar { height: 14px; border-radius: 8px; background: rgba(13, 10, 26, 0.85); border: 2px solid #6d3fe0; overflow: hidden; }
#boss-bar .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(#ff6b8a, #d0284f); transition: width 0.15s; }

#spells {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 16px);
  display: flex; justify-content: center; gap: 10px;
}
.spell {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--c2), var(--c1));
  border: 3px solid var(--c3); box-shadow: 0 0 14px var(--c2), 0 3px 0 rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: "RC Runic", serif; font-weight: 400; font-size: 24px; color: #fff; text-shadow: 0 1px 2px #000;
  animation: pop-in 0.45s cubic-bezier(.2, 1.6, .4, 1);
}
.spell::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(rgba(0, 0, 0, 0.55) calc(var(--cd, 0) * 1turn), transparent 0);
}
@keyframes pop-in { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ——— Баннеры и подсказки ——— */
#banner {
  position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none;
  font-family: "RC Title", serif; font-size: 40px; color: #fff; opacity: 0;
  text-shadow: 0 0 18px var(--banner-glow, #8b5cf6), 0 3px 0 #1a0f33, 0 0 2px #000;
}
#banner.show { animation: banner 2s ease-out forwards; }
#banner small { display: block; font-family: "RC UI", sans-serif; font-size: 17px; color: var(--accent-light); margin-top: 6px; }
@keyframes banner {
  0% { opacity: 0; transform: scale(1.6); }
  12% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}
#spell-pop {
  position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 112px); text-align: center; pointer-events: none; opacity: 0;
  font-family: "RC Title", serif; font-size: 28px; color: var(--pop-color, #fff);
  text-shadow: 0 0 16px var(--pop-color, #fff), 0 3px 0 #000;
}
#spell-pop.show { animation: banner 1.3s ease-out forwards; }

#hint { position: absolute; inset: 0; pointer-events: none; }
.finger {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 38%, rgba(255, 255, 255, 0.35) 40% 60%, transparent 62%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 4px 14px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
#hint .finger { left: 50%; top: 72%; animation: finger-move 2.4s ease-in-out infinite; }
@keyframes finger-move {
  0%, 100% { transform: translate(-70px, 0); }
  25% { transform: translate(0, -40px); }
  50% { transform: translate(70px, 0); }
  75% { transform: translate(0, 40px); }
}
.hint-text {
  position: absolute; left: 50%; top: calc(72% + 70px); transform: translateX(-50%);
  padding: 8px 16px; border-radius: 14px; background: rgba(26, 20, 48, 0.85); border: 2px solid var(--border);
  font-size: 18px; white-space: nowrap;
}

#stick { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.28)); border: 2px solid rgba(196, 181, 253, 0.45); }
#stick .knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e9e2ff, #8b5cf6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }

/* ——— Крафт ——— */
#craft { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 5, 18, 0.72); animation: fade-in 0.25s; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
#craft .panel {
  width: min(92vw, 420px); padding: 18px 16px 18px; border-radius: 22px; text-align: center;
  background: linear-gradient(#221a3e, #16112b); border: 2px solid var(--border);
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: pop-in 0.35s cubic-bezier(.2, 1.4, .4, 1);
}
#craft .title { font-family: "RC Title", serif; font-size: 30px; color: var(--gold); text-shadow: 0 2px 0 #000; }
#craft .subtitle { color: var(--muted); font-size: 15px; margin-top: 2px; }
#craft-runes { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 16px 0 24px; min-height: 80px; }
.gem { position: relative; width: 68px; height: 78px; touch-action: none; transition: transform 0.15s, opacity 0.2s; }
.gem .hex, .gem .hex-in {
  position: absolute; inset: 0;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}
.gem .hex { background: var(--dark); }
.gem .hex-in { inset: 7px 6px; background: linear-gradient(160deg, var(--light), var(--col) 50%, var(--mid)); }
.gem .glyph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "RC Runic", serif; font-weight: 400; font-size: 36px; color: #fffaf0; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.gem .label { position: absolute; left: -12px; right: -12px; top: 81px; font-size: 13px; color: var(--muted); }
.gem.selected { transform: scale(1.12); filter: drop-shadow(0 0 10px var(--col)); }
.gem.dragging { z-index: 5; filter: drop-shadow(0 0 14px var(--col)); transition: none; }
.gem.target { transform: scale(1.15); filter: drop-shadow(0 0 16px #fff); }
.gem.used { opacity: 0; transform: scale(0.3); pointer-events: none; }
.gem.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
#craft-result { min-height: 0; }
.spell-card {
  display: flex; align-items: center; gap: 12px; margin: 12px auto 0; padding: 10px 14px; max-width: 330px; text-align: left;
  border-radius: 16px; background: rgba(13, 10, 26, 0.7); border: 2px solid var(--c3);
  box-shadow: 0 0 22px var(--c2); animation: pop-in 0.45s cubic-bezier(.2, 1.6, .4, 1);
}
.spell-card .spell { flex: 0 0 auto; animation: none; }
.spell-card .name { font-family: "RC Title", serif; font-size: 22px; color: #fff; }
.spell-card .desc { font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 2px; }
#craft-msg { min-height: 22px; margin-top: 10px; font-size: 15px; color: var(--accent-light); }
#craft-msg.bad { color: #ff9b9b; }
#btn-fight { margin-top: 10px; min-width: 180px; }
#craft-finger { position: absolute; transition: none; }

/* ——— Финальный экран ——— */
#endcard {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 16px calc(var(--safe-bottom) + 22px); text-align: center;
  background: linear-gradient(rgba(8, 5, 18, 0) 18%, rgba(8, 5, 18, 0.55) 45%, rgba(8, 5, 18, 0.94) 72%);
  animation: fade-in 0.5s;
}
.logo { display: flex; flex-direction: column; align-items: center; line-height: 0.95; margin-bottom: 10px; animation: pop-in 0.6s cubic-bezier(.2, 1.4, .4, 1); }
.logo-top {
  font-family: "RC Title", serif; font-size: 52px;
  background: linear-gradient(#fff3c4, #f5c451 45%, #d98a1c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3b1d0b) drop-shadow(0 0 16px rgba(245, 196, 81, 0.45));
}
.logo-bottom { font-family: "RC Title", serif; font-size: 26px; letter-spacing: 0.32em; margin-left: 0.32em; color: var(--accent-light); text-shadow: 0 0 12px #8b5cf6, 0 2px 0 #000; }
#end-title { font-family: "RC Title", serif; font-size: 30px; color: #fff; text-shadow: 0 0 14px var(--end-glow, #8b5cf6), 0 2px 0 #000; }
#end-stats { display: flex; justify-content: center; gap: 10px; margin: 10px 0 8px; flex-wrap: wrap; }
#end-stats div { padding: 6px 12px; border-radius: 12px; background: rgba(26, 20, 48, 0.85); border: 2px solid var(--border); font-size: 15px; }
#end-stats b { color: var(--gold); }
#end-pitch { max-width: 340px; color: var(--muted); font-size: 15px; font-weight: 500; margin-bottom: 16px; line-height: 1.35; }

#toast {
  position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 100px); transform: translateX(-50%);
  padding: 10px 18px; border-radius: 14px; background: rgba(26, 20, 48, 0.95); border: 2px solid var(--border);
  font-size: 15px; opacity: 0; pointer-events: none; transition: opacity 0.3s; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; }

#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--gold); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Широкий экран: герой слева, финальный экран справа */
@media (min-aspect-ratio: 23/20) {
  #endcard {
    justify-content: center; padding: 0 16px 0 46%;
    background: linear-gradient(90deg, rgba(8, 5, 18, 0) 25%, rgba(8, 5, 18, 0.7) 45%, rgba(8, 5, 18, 0.92) 70%);
  }
}

/* Низкие экраны (телефон боком) */
@media (max-height: 520px) {
  #wave-label { font-size: 15px; }
  #kills { top: calc(var(--safe-top) + 54px); }
  #boss-bar { top: calc(var(--safe-top) + 72px); }
  .spell { width: 48px; height: 48px; font-size: 20px; }
  #craft .panel { padding: 10px 14px 12px; }
  #craft .title { font-size: 24px; }
  #craft-runes { margin: 10px 0 4px; }
  .logo-top { font-size: 38px; }
  .logo-bottom { font-size: 20px; }
  #end-title { font-size: 24px; }
  #end-pitch { margin-bottom: 10px; }
  .btn-big { height: 56px; font-size: 21px; }
}