:root {
  --red: #ff3b30;
  --gold: #ffcc33;
  --hp: #5dff7a;
  --dmg: #ff5a4a;
  --arm: #6cc4ff;
  --agi: #ffd84a;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0b0708;
  color: #fff;
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  touch-action: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: calc(var(--sat) + 10px) calc(var(--sar) + 12px) 0 calc(var(--sal) + 12px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  z-index: 5;
}
#hud .row { display: flex; gap: 8px; align-items: center; }

.hpwrap {
  position: relative;
  flex: 1;
  height: 24px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .65);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 3px 0 rgba(0, 0, 0, .4);
  overflow: hidden;
}
#hpGhost, #hpFill { position: absolute; inset: 0; transform-origin: 0 50%; }
#hpGhost { background: #fff; opacity: .55; }
#hpFill { background: linear-gradient(180deg, #ff6b5b 0%, #e01b25 55%, #a3101a 100%); }
#hpText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .6);
}

#btnPause {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1);
  display: grid;
  place-items: center;
}
#btnPause svg { width: 16px; height: 16px; }

.island {
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 2px #000;
}

.bar {
  position: relative;
  height: 18px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .6);
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06);
}
.bar > div {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #b0261f, #ff8a3d);
}
.bar > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-shadow: 0 1px 2px #000;
}
.bar.boss { height: 22px; }
.bar.boss > div { background: linear-gradient(90deg, #7a0dbf, #ff2d6f); }
.bar.boss > span { font-family: 'Bungee', sans-serif; font-weight: 400; font-size: 11px; }

.stats { display: flex; gap: 5px; flex-wrap: wrap; }
.row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.power {
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 204, 51, .35);
  color: var(--gold);
  white-space: nowrap;
}
.power b { font-weight: 400; color: #fff; }
.power.ready { animation: powerGlow 1s ease-in-out infinite alternate; }
@keyframes powerGlow { to { box-shadow: inset 0 0 0 1px rgba(255, 204, 51, .9), 0 0 16px rgba(255, 204, 51, .6); } }

#minimap {
  position: fixed;
  top: calc(var(--sat) + 122px);
  right: calc(var(--sar) + 12px);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  z-index: 6;
  pointer-events: auto;
  touch-action: manipulation;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 6px 18px rgba(0, 0, 0, .5);
  cursor: pointer;
}

#toast {
  position: fixed;
  left: 50%;
  top: 60%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(88vw, 440px);
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(10, 4, 6, .86);
  box-shadow: inset 0 0 0 1px rgba(255, 204, 51, .4);
  color: #ffe9a8;
  font-weight: 900;
  font-size: 14px;
  text-align: center;
  pointer-events: none;
  z-index: 8;
  animation: hintIn .3s ease-out;
}

#dialog {
  position: fixed;
  left: 50%;
  top: calc(var(--sat) + 222px);
  transform: translateX(-50%);
  width: min(92vw, 460px);
  padding: 12px 15px 13px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(22, 8, 12, .94), rgba(10, 4, 6, .94));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 0, 0, .5);
  z-index: 8;
  pointer-events: auto;
  animation: hintIn .3s ease-out;
}
#dialogWho { font-family: 'Bungee', sans-serif; font-size: 11px; letter-spacing: .08em; color: var(--gold); margin-bottom: 4px; }
#dialogWho:empty { display: none; }
#dialogText { font-size: 14.5px; line-height: 1.38; font-weight: 500; font-style: italic; color: #f3ece6; min-height: 1.4em; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-size: 12px;
  line-height: 1;
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.chip small { font-size: 9px; font-weight: 700; letter-spacing: .06em; opacity: .8; }
.chip b { font-weight: 900; color: #fff; }
.chip.hp { color: var(--hp); }
.chip.dmg { color: var(--dmg); }
.chip.arm { color: var(--arm); }
.chip.agi { color: var(--agi); }
.chip.pulse { animation: pulse .5s ease-out; }
@keyframes pulse {
  0% { transform: scale(1.3); background: rgba(255, 255, 255, .25); }
  100% { transform: scale(1); }
}

/* ---------- controles ---------- */
#controls {
  position: fixed;
  right: calc(var(--sar) + 16px);
  bottom: calc(var(--sab) + 20px);
  width: 196px;
  height: 120px;
  pointer-events: none;
  z-index: 6;
}
#btnHook {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 38% 30%, #6a1a20, #2a080b 70%);
  box-shadow: inset 0 0 0 4px #ff4a3d, 0 7px 0 #4a0a0e, 0 0 30px rgba(255, 60, 50, .35);
  transition: transform .06s;
}
#btnHook::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(rgba(0, 0, 0, .72) calc(var(--cd, 0) * 360deg), transparent 0);
  pointer-events: none;
}
#btnHook svg { width: 58px; height: 58px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
#btnHook.press { transform: translateY(5px) scale(.97); box-shadow: inset 0 0 0 4px #ff4a3d, 0 2px 0 #4a0a0e; }

#btnFury {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  display: grid;
  place-items: center;
  background: conic-gradient(#ff8a1f calc(var(--f, 0) * 360deg), rgba(255, 255, 255, .1) 0);
  box-shadow: 0 5px 0 #3a1505;
  transition: transform .06s;
}
#btnFury::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #4a2208, #1a0904 75%);
}
#btnFury span {
  position: relative;
  font-family: 'Bungee', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
#btnFury svg { width: 36px; height: 36px; opacity: .45; }
#btnFury.ready { animation: furyPulse .7s ease-in-out infinite alternate; }
#btnFury.ready span { color: #fff; }
#btnFury.ready svg { opacity: 1; }
#btnFury.active { background: conic-gradient(#ff3b1f calc(var(--f, 0) * 360deg), rgba(255, 255, 255, .1) 0); }
#btnFury.active svg { opacity: 1; }
@keyframes furyPulse {
  from { transform: scale(1); box-shadow: 0 5px 0 #3a1505, 0 0 0 rgba(255, 140, 30, 0); }
  to { transform: scale(1.08); box-shadow: 0 5px 0 #3a1505, 0 0 28px rgba(255, 140, 30, .85); }
}

#hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sab) + 160px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(86vw, 420px);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .74);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  z-index: 7;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  animation: hintIn .35s ease-out;
}
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 10px); } }

#banner {
  position: fixed;
  left: 0; right: 0;
  top: 30%;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  z-index: 8;
  padding: 0 16px;
}
#banner h1 {
  font-family: 'Bungee', sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 9.5vw, 58px);
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 4px 0 #3a1a00, 0 8px 30px rgba(0, 0, 0, .7);
}
#banner h2 {
  margin-top: 8px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 2px 4px #000;
}
#banner.show { animation: banner 2.6s ease-out forwards; }
@keyframes banner {
  0% { opacity: 0; transform: scale(1.7); }
  9% { opacity: 1; transform: scale(.96); }
  14% { transform: scale(1); }
  78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-24px); }
}

/* ---------- telas ---------- */
.screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(var(--sat) + 24px) calc(var(--sar) + 20px) calc(var(--sab) + 24px) calc(var(--sal) + 20px);
  text-align: center;
  background: radial-gradient(120% 80% at 50% 40%, rgba(30, 8, 10, .45), rgba(6, 2, 3, .92));
  overflow-y: auto;
  touch-action: pan-y;
}
#menu {
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(6, 2, 3, 0) 0%, rgba(6, 2, 3, .15) 30%, rgba(6, 2, 3, .88) 52%, rgba(6, 2, 3, .95) 100%);
}
.menu-col { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
@media (orientation: landscape) {
  #menu {
    justify-content: center;
    align-items: flex-end;
    background: linear-gradient(90deg, rgba(6, 2, 3, 0) 0%, rgba(6, 2, 3, .2) 38%, rgba(6, 2, 3, .9) 55%, rgba(6, 2, 3, .95) 100%);
  }
  .menu-col { width: min(56vw, 460px); }
}

.title {
  font-family: 'Bungee', sans-serif;
  font-size: clamp(32px, 10.2vw, 72px);
  line-height: .95;
  color: var(--red);
  text-shadow: 0 5px 0 #4a070b, 0 10px 40px rgba(255, 40, 30, .35);
  animation: titleIn .6s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.title span {
  display: block;
  color: var(--gold);
  font-size: .7em;
  text-shadow: 0 4px 0 #5a3300, 0 10px 40px rgba(255, 190, 40, .3);
}
.title.sm { font-size: clamp(24px, 7.6vw, 46px); }
@keyframes titleIn { from { opacity: 0; transform: scale(1.4); } }

.tag { font-size: 15px; font-weight: 500; opacity: .82; max-width: 320px; line-height: 1.35; }
.kicker { font-family: 'Bungee', sans-serif; font-size: 12px; letter-spacing: .2em; color: var(--gold); }

.panel {
  width: min(100%, 380px);
  padding: 14px;
  border-radius: 18px;
  background: rgba(10, 4, 5, .74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.panel .mi { font-family: 'Bungee', sans-serif; font-size: 13px; letter-spacing: .04em; }
.stats.center { justify-content: center; }
.relics { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.relics:empty { display: none; }
.relics span { font-size: 12px; font-weight: 700; padding: 5px 8px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.mdev { font-size: 12px; opacity: .6; }

.btn {
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  letter-spacing: .02em;
  padding: 16px 36px;
  min-width: 230px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ff5a45, #d01822);
  box-shadow: 0 7px 0 #5c0b10, 0 14px 34px rgba(255, 50, 40, .35);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  pointer-events: auto;
}
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #5c0b10; }
.btn.ghost {
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45);
  font-size: 15px;
  padding: 12px 22px;
  min-width: 0;
}
.btn.ghost:active { box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.btn.small { font-size: 12px; padding: 10px 14px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.link { font-size: 13px; opacity: .5; text-decoration: underline; padding: 8px; }
.ios { font-size: 12.5px; opacity: .72; max-width: 300px; line-height: 1.4; }

.cards { display: flex; flex-direction: column; gap: 10px; width: min(100%, 420px); }
.card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2c1216, #150809);
  box-shadow: inset 0 0 0 2px #5a1a20, 0 6px 0 rgba(0, 0, 0, .5);
  animation: cardIn .45s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.card:active { transform: scale(.97); box-shadow: inset 0 0 0 2px var(--gold), 0 3px 0 rgba(0, 0, 0, .5); }
.card .ic {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 32px;
  background: rgba(255, 255, 255, .06);
}
.card .lv { font-size: 10.5px; font-weight: 900; letter-spacing: .1em; color: #ff8a7a; }
.card h3 { font-family: 'Bungee', sans-serif; font-weight: 400; font-size: 16px; color: var(--gold); margin-top: 2px; }
.card p { font-size: 13px; line-height: 1.3; opacity: .86; margin-top: 3px; }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.9); } }

.deadstats { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.deadstats .big { font-size: 15px; }
.deadstats .big b { font-family: 'Bungee', sans-serif; font-weight: 400; color: var(--gold); font-size: 20px; }

@media (orientation: landscape) and (min-width: 700px) {
  .cards { flex-direction: row; width: min(100%, 900px); }
  .card { flex: 1; flex-direction: column; text-align: center; }
}
@media (max-height: 560px) {
  .screen { gap: 8px; justify-content: flex-start; }
  #menu { justify-content: center; }
  .menu-col { gap: 8px; }
  .title { font-size: clamp(26px, 8vh, 44px); }
  .tag, .ios { display: none; }
  .btn { padding: 12px 28px; font-size: 18px; }
  .panel { padding: 10px; gap: 6px; }
}

body.icon-mode #hud, body.icon-mode .screen, body.icon-mode #controls,
body.icon-mode #banner, body.icon-mode #hint { display: none !important; }
body.icon-mode, body.icon-mode html { background: transparent; }

/* ---------- mapa ---------- */
#mapScreen { justify-content: flex-start; gap: 10px; background: rgba(5, 3, 8, .96); }
.map-top { width: 100%; max-width: 900px; display: flex; align-items: center; justify-content: space-between; }
#mapCanvas { flex: 1; width: 100%; max-width: 900px; min-height: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.map-info { font-size: 13px; line-height: 1.45; opacity: .85; max-width: 520px; }
.map-info b { color: var(--gold); }

/* ---------- história ---------- */
#story { position: fixed; inset: 0; z-index: 12; touch-action: manipulation; cursor: pointer; }
#story .lb { position: absolute; left: 0; right: 0; height: 13vh; background: #000; }
#story .lb.top { top: 0; animation: lbTop .7s ease-out; }
#story .lb.bot { bottom: 0; animation: lbBot .7s ease-out; }
@keyframes lbTop { from { transform: translateY(-100%); } }
@keyframes lbBot { from { transform: translateY(100%); } }
#btnSkip { position: absolute; top: calc(var(--sat) + 12px); right: calc(var(--sar) + 14px); z-index: 2; }
.story-box {
  position: absolute;
  left: 50%;
  bottom: calc(13vh + 18px);
  transform: translateX(-50%);
  width: min(90vw, 560px);
  padding: 16px 18px 14px;
  border-radius: 18px;
  background: rgba(8, 3, 6, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
#storyText { font-size: 17px; line-height: 1.45; font-weight: 500; color: #f6efe8; min-height: 4.4em; }
.story-next { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .5; text-align: right; }
.story-next.wait { opacity: 0; }