:root {
  --cell: 28px;
  --bg: #06080a;
}

#view {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}

#world {
  position: absolute;
  left: 0;
  top: 0;
  font: 400 calc(var(--cell) * .78)/var(--cell) var(--mono);
  transition: transform .16s cubic-bezier(.3, .7, .4, 1);
  will-change: transform;
}

.row-tiles { display: flex; height: var(--cell); }

.t {
  width: var(--cell);
  height: var(--cell);
  text-align: center;
  flex: none;
  color: #2a3330;
  transition: color .6s;
}
.t-grass { color: #2f4a2c; }
.t-tree { color: #3d7a3a; text-shadow: 0 0 6px rgb(61 122 58 / .4); }
.t-wall { color: #6b6672; }
.t-rubble { color: #3c3842; }
.t-water { color: #2d6c9c; animation: water 2.4s ease-in-out infinite; }
.t-bridge { color: #8a6b45; }
.t-floor { color: #4b3a2a; }
.t-pal { color: #c08a4a; text-shadow: 0 0 4px rgb(255 138 61 / .3); }
.t-fire { color: #ffb347; animation: fire .5s steps(2) infinite; text-shadow: 0 0 10px #ff8a3d, 0 0 20px #ff5a1d; }
.t-tent { color: #d9c8a0; }
.t-rift {
  color: #fff;
  text-shadow: 0 0 6px var(--rift-hot), 0 0 16px var(--rift), 0 0 30px var(--rift);
  animation: rift-pulse 1.4s ease-in-out infinite;
}
.t.cor {
  color: var(--rift);
  text-shadow: 0 0 6px rgb(178 77 255 / .7);
  animation: cor 1.8s ease-in-out infinite;
}
.t.cor.fresh { animation: cor-in .6s ease-out, cor 1.8s ease-in-out .6s infinite; }
.t.cleansing { animation: cleanse 1.2s ease-out forwards; }

@keyframes water { 50% { color: #4aa3d8; } }
@keyframes fire { 50% { color: #ff6a2a; } }
@keyframes rift-pulse { 50% { transform: scale(1.35) rotate(20deg); } }
@keyframes cor { 50% { opacity: .55; } }
@keyframes cor-in { from { color: #fff; transform: scale(1.8); text-shadow: 0 0 20px var(--rift-hot); } }
@keyframes cleanse { 0% { color: #fff; text-shadow: 0 0 20px #fff; } 100% { color: #2f4a2c; text-shadow: none; } }

/* Entities */
.ent {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cell);
  height: var(--cell);
  text-align: center;
  font-weight: 700;
  transition: transform .14s cubic-bezier(.3, .7, .4, 1), opacity .3s;
  z-index: 2;
}
.ent .g { display: block; }
.ent.player .g {
  color: #fff;
  text-shadow: 0 0 8px #fff, 0 0 18px var(--toxic);
}
.ent.player::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid rgb(125 255 106 / .5);
  animation: ring 2s ease-out infinite;
}
@keyframes ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

.ent.ally .g { text-shadow: 0 0 8px currentColor; }
.ent.mon .g { text-shadow: 0 0 6px currentColor; animation: mon-breathe 1.2s ease-in-out infinite; }
.ent.mon.big .g { font-size: 1.4em; line-height: .7; }
.ent .tag {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  font: 600 9px/1 var(--sans);
  white-space: nowrap;
  color: rgb(255 255 255 / .75);
  background: rgb(0 0 0 / .5);
  padding: 2px 4px;
  border-radius: 4px;
  pointer-events: none;
}
.ent .mini-hp {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 2px;
  background: rgb(255 255 255 / .1);
}
.ent .mini-hp > i { display: block; height: 100%; background: currentColor; transition: width .2s; }

@keyframes mon-breathe { 50% { transform: translateY(-1px) scale(1.06); } }

.ent.hit .g { animation: hit .25s ease-out; }
@keyframes hit {
  0% { color: #fff; transform: scale(1.5); filter: brightness(3); }
  100% { transform: scale(1); }
}
.ent.lunge .g { animation: lunge .16s ease-out; }
@keyframes lunge { 50% { transform: translate(calc(var(--lx) * 40%), calc(var(--ly) * 40%)); } }
.ent.dead { opacity: 0; transform: var(--pos) scale(2) rotate(30deg) !important; transition: transform .4s, opacity .4s; }

.fx-ring {
  position: absolute;
  width: calc(var(--cell) * 3);
  height: calc(var(--cell) * 3);
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  animation: fx-ring .35s ease-out forwards;
  z-index: 3;
}
@keyframes fx-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }

.dmg {
  position: absolute;
  z-index: 4;
  font: 800 14px/1 var(--mono);
  pointer-events: none;
  translate: -50% 0;
  animation: dmg .7s ease-out forwards;
  text-shadow: 0 1px 0 #000, 0 0 6px #000;
}
@keyframes dmg {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { transform: translateY(-10px) scale(1.3); opacity: 1; }
  100% { transform: translateY(-30px) scale(1); opacity: 0; }
}

#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%, transparent calc(var(--cell) * 3), rgb(6 8 10 / .55) calc(var(--cell) * 6), rgb(6 8 10 / .95) calc(var(--cell) * 9));
  transition: background .5s;
}
body.in-rift #vignette {
  background: radial-gradient(circle at 50% 55%, transparent calc(var(--cell) * 2.5), rgb(40 0 50 / .5) calc(var(--cell) * 5), rgb(20 0 30 / .95) calc(var(--cell) * 8));
}
body.hurt #vignette { animation: hurt .35s; }
@keyframes hurt { 0% { box-shadow: inset 0 0 80px rgb(255 59 78 / .8); } }

/* HUD */
#hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(8px + var(--safe-top)) 12px 0 52px;
  pointer-events: none;
  z-index: 10;
  font-family: var(--mono);
}
#hud .row { display: flex; justify-content: space-between; align-items: baseline; }
#zone { font-size: 14px; font-weight: 700; color: var(--toxic); transition: color .4s; }
body.in-rift #zone { color: var(--rift-hot); animation: glitch-x 2s steps(1) infinite; }
@keyframes glitch-x { 0%, 90% { transform: none; } 92% { transform: translateX(3px); } 95% { transform: translateX(-2px); } }
#turn { font-size: 11px; color: var(--dim); }
.hp {
  position: relative;
  height: 12px;
  margin-top: 6px;
  background: rgb(255 255 255 / .06);
  border-radius: 3px;
  overflow: hidden;
}
#hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #3fa63a, var(--toxic));
  transition: width .25s;
}
.hp.low #hp-fill { background: linear-gradient(90deg, #a1242f, var(--blood)); animation: cor .6s infinite; }
#hp-text { position: absolute; inset: 0; font-size: 9px; line-height: 12px; text-align: center; color: #000; font-weight: 700; mix-blend-mode: screen; }
#party { display: flex; gap: 10px; margin-top: 6px; font-size: 10px; color: var(--dim); }
#party b { font-weight: 800; }
#log {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.45;
  text-shadow: 0 1px 2px #000;
}
#log li { animation: log-in .25s ease-out; }
#log li:nth-child(2) { opacity: .6; }
#log li:nth-child(3) { opacity: .35; }
#log li:nth-child(n+4) { display: none; }
#log .c { color: var(--ice); }
#log .x { color: var(--blood); }
#log .r { color: var(--rift-hot); }
#log .g { color: var(--toxic); }
@keyframes log-in { from { opacity: 0; transform: translateX(-8px); } }

/* Skill bar */
#bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 10px calc(14px + var(--safe-bottom));
  background: linear-gradient(transparent, rgb(6 8 10 / .9) 40%);
}
.skill {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .12);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  overflow: hidden;
  transition: transform .1s, border-color .2s, opacity .2s;
}
.skill b { font: 700 22px/1 var(--mono); }
.skill span { font: 600 10px/1 var(--mono); color: var(--dim); }
.skill i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--cd, 0%);
  background: rgb(0 0 0 / .65);
  transition: height .3s;
}
.skill:active { transform: scale(.92); }
.skill.armed { border-color: var(--toxic); box-shadow: 0 0 16px rgb(125 255 106 / .4), inset 0 0 12px rgb(125 255 106 / .2); }
.skill:disabled { opacity: .35; }
.skill.seal { border-color: rgb(178 77 255 / .4); }
.skill.seal:not(:disabled) { animation: seal-ready 1s ease-in-out infinite; color: var(--rift-hot); }
@keyframes seal-ready { 50% { box-shadow: 0 0 20px var(--rift); } }

#hint {
  position: fixed;
  bottom: calc(96px + var(--safe-bottom));
  left: 0;
  right: 0;
  text-align: center;
  font: 11px var(--mono);
  color: var(--dim);
  pointer-events: none;
  z-index: 10;
  transition: opacity 1s;
}

#overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / .7);
  backdrop-filter: blur(4px);
  animation: ov-in .5s ease-out;
}
#overlay[hidden] { display: none; }
@keyframes ov-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px) scale(.95); } }
.panel { animation: rise .5s cubic-bezier(.2, .8, .2, 1); text-align: center; padding: 24px; font-family: var(--mono); }
.panel h2 { font-size: 34px; margin: 0 0 8px; color: var(--toxic); letter-spacing: .05em; }
.panel p { color: var(--dim); margin: 0 0 20px; line-height: 1.5; }
.panel button {
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid var(--toxic);
  color: var(--toxic);
  font-weight: 700;
}