/* ============================================================
   TUNTUN'S REVENGE — Abyssal Arcade 16-bit styles
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
  /* Abyss background ramp */
  --abyss-0: #07131f;
  --abyss-1: #0b1d2e;
  --abyss-2: #13293d;
  --abyss-3: #1d3b54;
  --ink:     #16242f;
  --ink-2:   #0a1620;

  /* Foam / text */
  --foam:    #eaf6ff;
  --foam-dim:#9db8c9;
  --steel:   #6f8aa0;

  /* Vivid category accents (shared chroma) */
  --c-attack:  #ff5a3c;
  --c-defense: #2ce8d8;
  --c-poison:  #9ae600;
  --c-fire:    #ff9f1c;
  --c-heal:    #ff6b8b;
  --c-buff:    #ff4fa3;
  --c-bomb:    #ffd23f;
  --c-wild:    #b06bff;
  --c-weaken:  #8aa6bf;

  --gold:    #ffd23f;
  --danger:  #ff3b3b;

  --font-pix: 'Press Start 2P', monospace;
  --font-body: 'VT323', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--abyss-0);
  color: var(--foam);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

#root { width: 100vw; height: 100vh; }

/* ---- App stage: fixed 1280x800 scaled to fit ---- */
.stage-wrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% -10%, #0e2236 0%, #07131f 70%, #04090f 100%);
  background-color: #04090f;
}
.stage {
  position: relative;
  width: 1280px; height: 800px;
  transform-origin: center center;
  background: linear-gradient(180deg, var(--abyss-2) 0%, var(--abyss-1) 55%, var(--abyss-0) 100%);
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--ink), 0 0 60px rgba(0,0,0,.7);
}

/* CRT scanlines overlay */
.scanlines::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 9000;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.10) 3px);
  mix-blend-mode: multiply;
}
.vignette::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 8000;
  box-shadow: inset 0 0 120px 20px rgba(0,0,0,.55);
}

/* ---- Pixel typography ---- */
.pix { font-family: var(--font-pix); line-height: 1.5; letter-spacing: .5px; }
h1,h2,h3 { font-family: var(--font-pix); margin: 0; }
.body { font-family: var(--font-body); font-size: 22px; line-height: 1.05; }
.tiny { font-family: var(--font-pix); font-size: 8px; }

.text-shadow { text-shadow: 2px 2px 0 var(--ink-2); }

/* ---- Pixel panel ---- */
.panel {
  background: var(--abyss-2);
  border: 4px solid var(--ink);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 4px 4px 0 0 rgba(255,255,255,.05),
    inset -4px -4px 0 0 rgba(0,0,0,.35),
    0 6px 0 0 rgba(0,0,0,.4);
  image-rendering: pixelated;
}
.panel-raised {
  background: var(--abyss-3);
  border: 4px solid var(--ink);
  box-shadow:
    inset 3px 3px 0 0 rgba(255,255,255,.12),
    inset -3px -3px 0 0 rgba(0,0,0,.4);
}

/* ---- Pixel button ---- */
.btn {
  font-family: var(--font-pix); font-size: 12px; color: var(--foam);
  background: var(--abyss-3);
  border: 0; padding: 14px 18px; cursor: pointer;
  position: relative; image-rendering: pixelated;
  box-shadow:
    0 0 0 4px var(--ink),
    inset 3px 3px 0 0 rgba(255,255,255,.18),
    inset -3px -3px 0 0 rgba(0,0,0,.45);
  text-shadow: 2px 2px 0 var(--ink-2);
  transition: transform .04s steps(1);
  user-select: none;
}
.btn:hover { background: #244a68; }
.btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 4px var(--ink), inset 2px 2px 0 0 rgba(0,0,0,.4); }
.btn:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed; }

.btn-primary { background: var(--c-attack); color: #fff; }
.btn-primary:hover { background: #ff7458; }
.btn-go { background: var(--c-defense); color: #04222a; text-shadow: 1px 1px 0 rgba(255,255,255,.4); }
.btn-go:hover { background: #57f0e2; }

/* ---- HP / resource bars ---- */
.bar {
  position: relative; height: 18px; background: var(--ink-2);
  border: 3px solid var(--ink); image-rendering: pixelated; overflow: hidden;
}
.bar-fill { position: absolute; inset: 0; right: auto; transition: width .25s steps(8); }
.bar-hp .bar-fill { background: linear-gradient(180deg,#ff7a5c,#e8351c); }
.bar-block { background: linear-gradient(180deg,#5cf0e6,#1fb9ad); }
.bar-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pix); font-size: 8px; color: #fff; text-shadow: 1px 1px 0 #000; z-index: 2;
}

/* ---- sprite holder ---- */
.sprite { display: inline-block; image-rendering: pixelated; }
.sprite canvas { display: block; image-rendering: pixelated; }

/* idle bob */
@keyframes bob { 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-6px)} }
@keyframes bob-slow { 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-10px)} }
.bob { animation: bob 1.6s steps(8) infinite; }
.bob-slow { animation: bob-slow 2.6s steps(10) infinite; }

@keyframes hurt { 0%,100%{ filter:none; transform:translateX(0)} 20%{ filter: brightness(2.2) saturate(0)} 40%{ transform:translateX(-8px)} 60%{ transform:translateX(7px)} 80%{ transform:translateX(-3px)} }
.hurt { animation: hurt .32s steps(4); }
@keyframes lunge { 0%{transform:translateX(0)} 40%{transform:translateX(26px)} 100%{transform:translateX(0)} }
.lunge { animation: lunge .3s steps(3); }
@keyframes lunge-l { 0%{transform:translateX(0)} 40%{transform:translateX(-26px)} 100%{transform:translateX(0)} }
.lunge-l { animation: lunge-l .3s steps(3); }

@keyframes pop { 0%{ transform: scale(0); } 70%{ transform: scale(1.15);} 100%{ transform: scale(1);} }
.pop { animation: pop .22s steps(4); }
@keyframes chestRattle { 0%,100%{ transform: rotate(0) translateY(0);} 25%{ transform: rotate(-5deg) translateY(-2px);} 75%{ transform: rotate(5deg) translateY(-2px);} }
@keyframes unlockIn { 0%{ transform: translateX(-120%) scale(.9); opacity:0;} 60%{ transform: translateX(6px) scale(1.04); opacity:1;} 100%{ transform: translateX(0) scale(1); opacity:1;} }
.unlock-toast { animation: unlockIn .42s cubic-bezier(.2,.9,.3,1.2) both; }

@keyframes deathPop { 0%{transform:scale(1) rotate(0);opacity:1} 55%{transform:scale(1.35) rotate(18deg);opacity:1} 100%{transform:scale(0) rotate(70deg);opacity:0} }
.death-pop { animation: deathPop .5s steps(6) forwards; }
@keyframes shakeX { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-7px,3px)} 45%{transform:translate(6px,-4px)} 70%{transform:translate(-4px,3px)} 90%{transform:translate(3px,-2px)} }
.shaking { animation: shakeX .32s steps(3); }
@keyframes critRing { 0%{ transform:translate(-50%,-50%) scale(.2); opacity:.9 } 100%{ transform:translate(-50%,-50%) scale(2.2); opacity:0 } }
.crit-ring { position:absolute; border:4px solid #ffd23f; border-radius:50%; width:80px; height:80px; pointer-events:none; animation: critRing .4s steps(6) forwards; z-index:55; }
@keyframes flashFade { 0%{opacity:.55} 100%{opacity:0} }
.dmg-flash { position:absolute; inset:0; pointer-events:none; z-index:70; animation: flashFade .35s ease-out forwards; }

/* ---- COMBO juice ---- */
@keyframes comboPunch { 0%{ transform:translate(-50%,-50%) scale(.3) rotate(-8deg); opacity:0 } 40%{ transform:translate(-50%,-50%) scale(1.25) rotate(3deg); opacity:1 } 70%{ transform:translate(-50%,-50%) scale(.95) rotate(-1deg) } 100%{ transform:translate(-50%,-50%) scale(1.05) rotate(0); opacity:1 } }
.combo-pop { animation: comboPunch .26s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes comboShine { 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.5) } }
/* camera zoom punch on big hits */
@keyframes stagePunch { 0%{ transform:scale(1) } 35%{ transform:scale(1.035) } 100%{ transform:scale(1) } }
.punching { animation: stagePunch .26s ease-out; }

@keyframes floatUp {
  0%{ transform: translateY(0); opacity: 1;}
  100%{ transform: translateY(-50px); opacity: 0;}
}
.float-num {
  position: absolute; font-family: var(--font-pix); font-size: 16px;
  text-shadow: 2px 2px 0 #000; pointer-events: none; z-index: 50;
  animation: floatUp 1s steps(10) forwards;
}

/* ---- catch queue (left rail feedback) ---- */
.catch-chip {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: rgba(7,19,31,.88);
  border: 3px solid #16242f; box-shadow: 0 0 0 2px #07131f, 3px 3px 0 rgba(0,0,0,.4);
  transition: transform .28s steps(5), opacity .5s steps(7), box-shadow .2s;
  animation: catchIn .26s steps(4);
}
.catch-chip.active {
  transform: scale(1.22) translateX(4px);
  box-shadow: 0 0 0 2px #07131f, 0 0 14px rgba(255,210,63,.7);
}
.catch-chip.done { opacity: 0; transform: translateX(-34px) scale(.6); }
@keyframes catchIn { from { opacity: 0; transform: translateX(-26px) scale(.7); } to { opacity: 1; transform: none; } }

/* ---- Center column helpers ---- */
.fill { position: absolute; inset: 0; }
.col { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }
.center { align-items: center; justify-content: center; }

/* ---- Title flicker ---- */
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.blink { animation: blink 1s steps(1) infinite; }

@keyframes hueShift { 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }

/* ---- combat background parallax (per-act) ---- */
@keyframes bgFar  { 0%{transform:translateX(0)} 50%{transform:translateX(-4%)} 100%{transform:translateX(0)} }
@keyframes bgNear { 0%{transform:translateX(0)} 50%{transform:translateX(3.5%)} 100%{transform:translateX(0)} }
.bg-far  { animation: bgFar 26s ease-in-out infinite; will-change: transform; }
.bg-near { animation: bgNear 17s ease-in-out infinite; will-change: transform; }

/* scrollbars hidden */
::-webkit-scrollbar { width: 0; height: 0; }

/* ---- Visual themes (tweakable) ---- */
.stage.theme-neon   { background: linear-gradient(180deg, #1a1038 0%, #0d0a24 55%, #07061a 100%); }
.stage.theme-neon   .panel { background: #1a1340; }
.stage.theme-magma  { background: linear-gradient(180deg, #361616 0%, #1f0c0c 55%, #120606 100%); }
.stage.theme-magma  .panel { background: #2a1414; }
.stage.no-scan::after { display: none; }