/* MERCY — Guardian of Zurich · white/gold/amber on cool alpine blue · Source Sans 3 */

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --gold: #f2c14e;
  --gold-soft: #ffd98a;
  --amber: #e8a33d;
  --blue-deep: #101c2e;
  --blue-mid: #22374f;
  --blue-mist: #8fa9c4;
  --white: #f6f3ec;
  --red: #e5484d;
  --heal: #ffd768;
  --boost: #6fc3ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Source Sans 3', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  background: var(--blue-deep);
  color: var(--white);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------- feedback layers ---------- */
#vignette-fire, #vignette-gold, #flash {
  position: fixed; inset: 0; pointer-events: none; opacity: 0;
}
#vignette-fire {
  background: radial-gradient(ellipse at center, transparent 42%, rgba(229,72,77,.16) 72%, rgba(160,20,30,.55) 100%);
  transition: opacity .18s ease-out;
}
#vignette-gold {
  background: radial-gradient(ellipse at center, rgba(255,215,104,.10) 30%, rgba(242,193,78,.28) 78%, rgba(232,163,61,.5) 100%);
  transition: opacity .3s ease;
}
#flash { background: #fff8e6; transition: opacity .5s ease-out; }

/* ---------- barks ---------- */
#barks { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.bark {
  position: absolute; transform: translate(-50%, -100%);
  background: rgba(16,28,46,.82);
  border: 1px solid rgba(242,193,78,.45);
  border-left: 3px solid var(--gold);
  color: var(--white);
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 4px;
  white-space: nowrap;
  animation: bark-in .18s ease-out, bark-out .4s ease-in forwards;
  animation-delay: 0s, var(--life, 2.4s);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.bark .who { color: var(--gold-soft); font-weight: 700; margin-right: 6px; }
.bark.critical { border-left-color: var(--red); }
.bark.critical .who { color: #ff9a9d; }
.bark.mercy { border-left-color: var(--heal); }
.bark.mercy .who { color: var(--heal); }
@keyframes bark-in { from { opacity: 0; transform: translate(-50%, -88%); } to { opacity: 1; transform: translate(-50%, -100%); } }
@keyframes bark-out { to { opacity: 0; } }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 4; }

#hud-top {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 18px;
}
#wave-chip, #score-chip {
  display: flex; align-items: baseline; gap: 7px;
  background: rgba(16,28,46,.72); border: 1px solid rgba(143,169,196,.25);
  padding: 6px 14px; border-radius: 4px; backdrop-filter: blur(4px);
}
#wave-label, #score-label, #morale-label {
  font-size: 10px; font-weight: 700; letter-spacing: .22em; color: var(--blue-mist);
}
#wave-num, #score-num { font-size: 20px; font-weight: 700; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
#wave-total { font-size: 12px; color: var(--blue-mist); }
#morale-wrap { display: flex; flex-direction: column; gap: 6px; align-items: center; }
#morale-label { text-shadow: 0 1px 3px rgba(9,15,26,.9); }
#morale-bar {
  width: min(300px, 34vw); height: 8px; border-radius: 4px;
  background: rgba(16,28,46,.8); border: 1px solid rgba(143,169,196,.3); overflow: hidden;
}
#morale-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--amber), var(--gold-soft));
  transition: width .3s ease;
}
#morale-fill.low { background: linear-gradient(90deg, #b02a2e, var(--red)); }

#ally-row {
  position: absolute; top: max(64px, calc(env(safe-area-inset-top) + 54px)); left: 0; right: 0;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.ally-chip {
  width: 128px; background: rgba(16,28,46,.72); border: 1px solid rgba(143,169,196,.25);
  border-radius: 4px; padding: 5px 8px 6px; backdrop-filter: blur(4px);
  transition: border-color .2s;
}
.ally-chip .nm { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.ally-chip .nm .key { color: var(--blue-mist); font-weight: 600; }
.ally-chip .bar { height: 5px; margin-top: 4px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.ally-chip .fill { height: 100%; background: linear-gradient(90deg, #7fd48a, #b8e6a0); transition: width .15s; }
.ally-chip.hurt .fill { background: linear-gradient(90deg, var(--amber), var(--gold)); }
.ally-chip.critical { border-color: rgba(229,72,77,.7); animation: pulse-chip 1s infinite; }
.ally-chip.critical .fill { background: linear-gradient(90deg, #b02a2e, var(--red)); }
.ally-chip.dead { border-color: rgba(242,193,78,.8); }
.ally-chip.dead .fill { background: var(--gold); width: 0; }
.ally-chip .st { font-size: 10px; color: var(--blue-mist); margin-top: 3px; letter-spacing: .06em; min-height: 13px; }
.ally-chip.dead .st { color: var(--gold-soft); }
@keyframes pulse-chip { 50% { box-shadow: 0 0 12px rgba(229,72,77,.55); } }

#hud-bottom {
  position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); left: 0; right: 0;
  display: flex; justify-content: center; align-items: flex-end; gap: 20px; flex-wrap: wrap;
}
#mercy-plate {
  background: rgba(16,28,46,.72); border: 1px solid rgba(242,193,78,.35);
  border-radius: 4px; padding: 7px 14px 8px; min-width: 220px; backdrop-filter: blur(4px);
}
#mercy-name { font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--gold-soft); }
#mercy-hpbar { height: 6px; margin: 5px 0 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
#mercy-hpfill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), #ffe9b0); transition: width .15s; }
#mercy-status { display: flex; gap: 12px; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
#beam-mode.mode-heal { color: var(--heal); }
#beam-mode.mode-boost { color: var(--boost); }
#ga-cd, #res-cd { color: var(--blue-mist); opacity: .45; transition: opacity .2s; }
#ga-cd.ready, #res-cd.ready { opacity: 1; color: var(--gold-soft); }
#hint { font-size: 12px; color: var(--blue-mist); padding-bottom: 10px; letter-spacing: .02em; }
#hint b { color: var(--white); font-weight: 700; }

#event-feed {
  position: absolute; bottom: 110px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.feed-item {
  font-size: 17px; font-weight: 700; letter-spacing: .06em; color: var(--gold-soft);
  text-shadow: 0 0 14px rgba(242,193,78,.6), 0 1px 3px rgba(0,0,0,.7);
  animation: feed-in .25s cubic-bezier(.2,1.6,.4,1), feed-out .6s ease-in forwards;
  animation-delay: 0s, 1.6s;
}
.feed-item small { color: var(--white); font-weight: 600; font-size: 12px; margin-left: 8px; opacity: .85; }
.feed-item.blue { color: var(--boost); text-shadow: 0 0 14px rgba(111,195,255,.6), 0 1px 3px rgba(0,0,0,.7); }
@keyframes feed-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@keyframes feed-out { to { opacity: 0; transform: translateY(-14px); } }

#wave-banner {
  position: fixed; top: 34%; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 6;
  animation: banner 2.6s ease forwards;
}
#wave-banner .big { font-size: clamp(30px, 6vw, 54px); font-weight: 700; letter-spacing: .3em; color: var(--gold-soft); text-shadow: 0 0 30px rgba(242,193,78,.5), 0 2px 6px rgba(0,0,0,.8); }
#wave-banner .small { font-size: clamp(12px, 2vw, 16px); letter-spacing: .18em; color: var(--white); opacity: .85; margin-top: 6px; }
@keyframes banner { 0% { opacity: 0; transform: scale(.96); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- touch UI ---------- */
#touch-ui { position: fixed; inset: 0; pointer-events: none; z-index: 7; }
#joystick {
  position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(86px, calc(env(safe-area-inset-bottom) + 76px));
  width: 116px; height: 116px; border-radius: 50%;
  background: rgba(16,28,46,.45); border: 1px solid rgba(143,169,196,.4);
  pointer-events: auto; touch-action: none;
}
#joystick-knob {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(242,193,78,.35); border: 1.5px solid var(--gold);
  transform: translate(-50%, -50%);
}
#touch-buttons {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(86px, calc(env(safe-area-inset-bottom) + 76px));
  display: flex; flex-direction: column; gap: 10px; pointer-events: auto;
}
#touch-buttons button {
  min-width: 108px; min-height: 52px; border-radius: 8px;
  background: rgba(16,28,46,.7); border: 1.5px solid var(--gold); color: var(--gold-soft);
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
}
#touch-buttons button.boost-on { border-color: var(--boost); color: var(--boost); }
#touch-buttons button:disabled { opacity: .35; }

/* ---------- title / end screens ---------- */
#title-screen, #end-screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 62%, rgba(16,28,46,.18) 0%, rgba(16,28,46,.66) 78%, rgba(9,15,26,.9) 100%);
  transition: opacity .6s ease;
}
#title-screen.fading, #end-screen.fading { opacity: 0; pointer-events: none; }
#title-inner, #end-inner { text-align: center; max-width: 640px; padding: 24px; }
#title-eyebrow, #end-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .34em; color: var(--blue-mist); }
#title-name {
  font-size: clamp(64px, 13vw, 118px); font-weight: 700; letter-spacing: .22em; line-height: 1.04;
  margin: 10px 0 0; padding-left: .22em;
  background: linear-gradient(180deg, #fff8ea 18%, var(--gold-soft) 55%, var(--amber) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(242,193,78,.28);
}
#title-sub { font-size: clamp(15px, 2.6vw, 21px); font-weight: 600; letter-spacing: .5em; padding-left: .5em; color: var(--white); opacity: .92; }
#title-pitch, #end-text {
  margin: 22px auto 0; max-width: 520px; font-size: 15px; line-height: 1.6; color: var(--blue-mist);
}
#title-pitch { color: #c6d5e6; }
#title-controls {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 24px auto 0; max-width: 560px;
}
#title-controls div { display: flex; flex-direction: column; align-items: center; min-width: 120px; margin-bottom: 6px; }
#title-controls b { font-size: 13px; color: var(--gold-soft); letter-spacing: .04em; }
#title-controls span { font-size: 11.5px; color: var(--blue-mist); }
#btn-start, #btn-restart {
  margin-top: 28px; padding: 14px 44px; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold-soft), var(--amber));
  border: none; color: #20160a; font-size: 15px; font-weight: 700; letter-spacing: .28em; padding-left: calc(44px + .28em);
  box-shadow: 0 0 34px rgba(242,193,78,.35), 0 4px 14px rgba(0,0,0,.4);
  transition: transform .15s ease, box-shadow .15s ease;
}
#btn-start:hover, #btn-restart:hover { transform: translateY(-2px); box-shadow: 0 0 48px rgba(242,193,78,.55), 0 6px 18px rgba(0,0,0,.45); }
#title-foot { margin-top: 26px; font-size: 13px; font-style: italic; color: var(--blue-mist); opacity: .8; }

#end-title { font-size: clamp(34px, 7vw, 62px); font-weight: 700; letter-spacing: .14em; margin-top: 10px; color: var(--gold-soft); text-shadow: 0 0 40px rgba(242,193,78,.35); }
#end-title.defeat { color: #ff9a9d; text-shadow: 0 0 40px rgba(229,72,77,.35); }
#end-stats { display: flex; justify-content: center; gap: 26px; margin-top: 24px; flex-wrap: wrap; }
#end-stats .stat { display: flex; flex-direction: column; }
#end-stats .v { font-size: 26px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
#end-stats .k { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--blue-mist); margin-top: 2px; }

#mute-chip {
  position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 11;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--blue-mist);
  background: rgba(16,28,46,.6); border: 1px solid rgba(143,169,196,.3); border-radius: 4px;
  padding: 5px 9px; cursor: pointer; pointer-events: auto;
}
#mute-chip.muted { color: var(--red); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  #hint { display: none; }
  #mute-chip { top: max(124px, calc(env(safe-area-inset-top) + 114px)); }
  .ally-chip { width: 96px; padding: 4px 6px 5px; }
  .ally-chip .nm { font-size: 9.5px; }
  .ally-chip .st { font-size: 9px; }
  #hud-top { gap: 8px; }
  #wave-chip, #score-chip { padding: 4px 9px; }
  #wave-num, #score-num { font-size: 15px; }
  #morale-bar { width: 30vw; }
  #mercy-plate { min-width: 168px; padding: 5px 10px 6px; }
  #hud-bottom { justify-content: flex-start; padding-left: 12px; }
  #title-controls div { min-width: 44%; }
  .bark { font-size: 12px; }
}