:root{
  --bg:#0b0e14;
  --ink:#e6ecff;

  --hp1:#2cff6a;
  --hp2:#6dff9c;

  --atb1:#3aa0ff;
  --atb2:#7fd1ff;

  --chain1:#b48bff;
  --chain2:#ffd27a;

  --enemy1:#ff4a4a;
  --enemy2:#ff9a9a;
}


/* =========================
BASE
========================= */

html,body{
  margin:0;
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,Segoe UI,Roboto,Arial;
}



/* =========================
FIELD WORLD
========================= */

#wrap{
  position:fixed;
  inset:0;
}

#c{
  width:100vw;
  height:100vh;
  display:block;
}

#fieldMenuBtn{
  position:fixed;
  top:10px;
  right:12px;
  z-index:50;

  width:40px;
  height:40px;

  border-radius:10px;
  border:none;

  background:#1a1f33;
  color:white;

  cursor:pointer;
}



/* =========================
COMBAT ROOT
========================= */

#combatScene{
  position:fixed;
  inset:0;
  display:none;
  z-index:20;
}



/* =========================
BATTLEFIELD CANVAS
========================= */

#battleStage{
  position:absolute;
  inset:0;

  width:100vw;
  height:100vh;

  z-index:1;
}



/* =========================
HUD LAYER
========================= */

#enemyHud,
#partyHud,
#paradigmHud,
#combatFx,
#log{
  position:absolute;
  z-index:10;
}



/* =========================
ENEMY HUD (TOP CENTER)
========================= */

#enemyHud{
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:320px;
}

.enemyName{
  text-align:center;
  font-size:14px;
  margin-bottom:6px;
  opacity:.9;
}

.hudBar{
  height:10px;
  border-radius:8px;
  background:rgba(255,255,255,.15);
  overflow:hidden;
  margin-top:6px;
}

.hudFill{
  height:100%;
  width:0%;
  transition:width .15s linear;
}

.hudBar.hp .hudFill{
  background:linear-gradient(90deg,var(--enemy1),var(--enemy2));
}

.hudBar.atb .hudFill{
  background:linear-gradient(90deg,var(--atb1),var(--atb2));
}

.hudBar.chain .hudFill{
  background:linear-gradient(90deg,var(--chain1),var(--chain2));
}

#staggerTag{
  display:none;
  text-align:center;
  margin-top:6px;
  font-size:11px;
  letter-spacing:1px;
  color:#ffd27a;
}



/* =========================
PARADIGM HUD (TOP RIGHT)
========================= */

#paradigmHud{
  top:20px;
  right:20px;
  width:220px;

  font-size:12px;
  text-align:right;

  background:rgba(0,0,0,.25);
  padding:8px;
  border-radius:10px;
}

#hudParadigmName{
  font-weight:600;
}

#hudParadigmRoles{
  opacity:.85;
  margin-top:2px;
}

.shiftBtns{
  margin-top:6px;
}

.shiftBtns button{
  margin-left:4px;

  background:#1a1f33;
  border:none;
  color:white;

  padding:4px 8px;
  border-radius:6px;

  cursor:pointer;
}



/* =========================
PARTY HUD (BOTTOM LEFT)
========================= */

#partyHud{
  bottom:60px;
  left:20px;
  width:260px;
}

.unitRow{
  margin-bottom:12px;
}

.rowTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  margin-bottom:2px;
}

.rowRole{
  opacity:.75;
  font-size:10px;
  text-transform:uppercase;
}

.rowBar{
  height:8px;
  border-radius:6px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
  margin-top:4px;
}

.rowFill{
  height:100%;
  width:0%;
  transition:width .15s linear;
}

.rowBar.hp .rowFill{
  background:linear-gradient(90deg,var(--hp1),var(--hp2));
}

.rowBar.atb .rowFill{
  background:linear-gradient(90deg,var(--atb1),var(--atb2));
}



/* =========================
FLOATING COMBAT NUMBERS
========================= */

#combatFx{
  inset:0;
  pointer-events:none;
  z-index:12;
}

.floatingNumber{
  position:absolute;

  transform:translate(-50%,-50%);

  font-size:20px;
  font-weight:700;

  text-shadow:
    0 2px 8px rgba(0,0,0,.8),
    0 0 2px rgba(0,0,0,.9);

  opacity:0;
  animation:floatUp .7s ease-out forwards;
}

.floatingNumber.damage{
  color:#ffffff;
}

.floatingNumber.heal{
  color:#8dffad;
}

.floatingNumber.chain{
  color:#ffd27a;
}

@keyframes floatUp{
  0%{
    opacity:0;
    transform:translate(-50%,-10px) scale(.92);
  }

  15%{
    opacity:1;
    transform:translate(-50%,-20px) scale(1);
  }

  100%{
    opacity:0;
    transform:translate(-50%,-52px) scale(1.03);
  }
}



/* =========================
COMBAT LOG
========================= */

#log{
  bottom:20px;
  right:20px;

  width:220px;
  max-height:92px;

  overflow-y:auto;

  font-size:10px;
  line-height:1.35;

  padding:6px 8px;

  background:rgba(0,0,0,.25);
  backdrop-filter:blur(4px);

  border-radius:10px;
  opacity:.75;
}

#log div{
  margin-bottom:2px;
}