:root {
  --cyan: #38d8ff;
  --orange: #ff8a2a;
  --ink: #e9f3ff;
  --panel: rgba(8, 16, 34, 0.82);
  --ui-font: "M PLUS Rounded 1c", "Noto Sans JP", system-ui, sans-serif;
  --tech-font: Orbitron, "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #05070d;
  color: var(--ink);
  font-family: var(--ui-font);
  user-select: none;
  -webkit-user-select: none;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
.hidden { display: none !important; }

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  margin-right: 4px;
  border-radius: 6px;
  background: linear-gradient(#f7fbff, #c9d6e6);
  color: #0d1a33;
  font: 800 13px var(--tech-font);
  box-shadow: 0 2px 0 #6b7c95, 0 0 10px rgba(56, 216, 255, 0.25);
}
kbd.wide { font-size: 11px; }

/* ---------------------------------------------------------------- carga */
#loading {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse at center, #0f1c38 0%, #04060c 70%);
  transition: opacity 0.8s ease;
  z-index: 50;
}
#loading.done { opacity: 0; }
#loading .jp { font: 900 34px "Noto Sans JP", sans-serif; letter-spacing: 0.3em; color: var(--cyan); text-shadow: 0 0 18px var(--cyan); }
.load-track { width: min(420px, 70vw); height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
#load-bar { height: 100%; width: 5%; background: linear-gradient(90deg, var(--cyan), #9ff0ff); box-shadow: 0 0 12px var(--cyan); transition: width 0.3s ease; }
#load-label { font-size: 14px; opacity: 0.8; }

/* ---------------------------------------------------------------- título */
#title-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(3,6,14,0.15), rgba(3,6,14,0.55));
  pointer-events: auto;
  cursor: pointer;
  z-index: 40;
}
.title-inner { text-align: center; animation: rise 1.2s ease both; }
.title-inner .jp { font: 900 26px "Noto Sans JP", sans-serif; letter-spacing: 0.5em; color: #ffcf5a; text-shadow: 0 0 14px rgba(255,170,60,0.8); }
.title-inner h1 {
  margin: 6px 0 4px;
  font: 900 clamp(48px, 9vw, 104px) var(--tech-font);
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #ffffff 0%, #9fe8ff 45%, #2f7bff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(56,216,255,0.55)) drop-shadow(0 4px 0 #0b1a3a);
}
.title-inner .sub { font-size: 20px; opacity: 0.9; letter-spacing: 0.1em; }
.title-inner .start { margin-top: 40px; font: 700 18px var(--tech-font); letter-spacing: 0.2em; animation: blink 1.4s ease-in-out infinite; }
.title-inner .credits { margin-top: 30px; font-size: 12px; opacity: 0.55; }

/* ------------------------------------------------------- indicador y avisos */
#prompt {
  position: fixed;
  transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 8px;
  border-radius: 20px;
  background: var(--panel);
  border: 1.5px solid rgba(56, 216, 255, 0.7);
  box-shadow: 0 0 18px rgba(56, 216, 255, 0.35);
  font-weight: 800; font-size: 15px;
  animation: bob 1.2s ease-in-out infinite;
  white-space: nowrap;
}
#prompt::before { content: 'Press'; font-weight: 500; opacity: 0.8; margin: 0 2px 0 6px; order: -1; }

#toast {
  position: fixed; top: 9%; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
#toast.show { animation: toast 3.2s ease both; }
#toast .t-title { font: 900 30px "Noto Sans JP", sans-serif; letter-spacing: 0.15em; text-shadow: 0 0 16px rgba(0,0,0,0.9), 0 0 24px rgba(56,216,255,0.5); }
#toast .t-sub { font-size: 14px; opacity: 0.85; margin-top: 4px; text-shadow: 0 0 8px #000; }
#toast .t-title::after { content: ''; display: block; height: 2px; margin: 8px auto 0; width: 70%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }

#controls {
  position: fixed; right: 18px; top: 18px;
  min-width: 270px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid rgba(56, 216, 255, 0.35);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  animation: rise 0.4s ease both;
}
#controls.bottom { top: auto; bottom: 18px; }
#controls .c-title { font: 800 13px var(--tech-font); letter-spacing: 0.18em; color: var(--cyan); margin-bottom: 10px; text-transform: uppercase; }
#controls .c-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 14px; }
#controls .keys { min-width: 118px; display: flex; flex-wrap: wrap; gap: 2px; }

#hint {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 14px;
  background: rgba(0,0,0,0.5); font-size: 13px; opacity: 0.85;
}
#credit {
  position: fixed; left: 10px; bottom: 10px; z-index: 60;
  padding: 4px 10px; border-radius: 10px;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(56, 216, 255, 0.25);
  font-size: 12px; color: var(--ink); text-decoration: none; opacity: 0.75;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
#credit b { color: var(--cyan); font-weight: 700; }
#credit:hover { opacity: 1; border-color: var(--cyan); }
#fps { position: fixed; left: 10px; bottom: 40px; font: 600 12px var(--tech-font); opacity: 0.75; }

/* ---------------------------------------------------------------- diálogo */
#dialog {
  position: fixed; left: 50%; bottom: 5%;
  transform: translateX(-50%);
  width: min(820px, 92vw);
  pointer-events: auto;
}
#dialog .box {
  position: relative;
  min-height: 132px;
  padding: 26px 30px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 28, 62, 0.94), rgba(6, 12, 30, 0.94));
  border: 3px solid #e9f3ff;
  box-shadow: 0 0 0 3px #1b3a7a, 0 12px 40px rgba(0,0,0,0.6), inset 0 0 30px rgba(56,216,255,0.12);
  animation: rise 0.25s ease both;
}
#dialog-name {
  position: absolute; top: -18px; left: 22px;
  padding: 4px 18px;
  border-radius: 8px;
  border: 2px solid #fff;
  font: 800 16px var(--ui-font);
  letter-spacing: 0.06em;
  box-shadow: 0 3px 0 rgba(0,0,0,0.4);
}
#dialog-text { font-size: 21px; line-height: 1.55; min-height: 64px; text-shadow: 0 2px 0 rgba(0,0,0,0.5); }
#dialog-next { position: absolute; right: 22px; bottom: 12px; color: var(--cyan); animation: bob 0.8s ease-in-out infinite; }
#choices {
  position: absolute; right: 12px; bottom: calc(100% + 14px);
  min-width: 240px;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 28, 62, 0.96), rgba(6, 12, 30, 0.96));
  border: 3px solid #e9f3ff;
  box-shadow: 0 0 0 3px #1b3a7a, 0 10px 30px rgba(0,0,0,0.5);
  animation: rise 0.2s ease both;
}
.choice {
  position: relative;
  padding: 9px 14px 9px 34px;
  border-radius: 8px;
  font-size: 18px; font-weight: 700;
  cursor: pointer;
}
.choice.sel { background: linear-gradient(90deg, rgba(56,216,255,0.35), rgba(56,216,255,0.05)); }
.choice.sel::before { content: '▶'; position: absolute; left: 12px; color: #ffcf5a; animation: nudge 0.6s ease-in-out infinite; }

/* ---------------------------------------------------------------- combate */
#combat-hud {
  position: fixed; left: 0; right: 0; top: 14px;
  display: flex; justify-content: center; align-items: flex-start; gap: 18px;
  padding: 0 18px;
  animation: drop 0.5s ease both;
}
#combat-hud .bar { width: min(420px, 40vw); }
#combat-hud .bar-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
#combat-hud .right .bar-head { justify-content: flex-end; }
.tag { font: 800 11px var(--tech-font); padding: 2px 7px; border-radius: 4px; background: var(--cyan); color: #04122a; }
.tag.cpu { background: var(--orange); }
.rname { font: 800 15px var(--tech-font); letter-spacing: 0.08em; text-shadow: 0 0 10px rgba(0,0,0,0.9); }
.hpnum { font: 900 30px var(--tech-font); text-shadow: 0 0 12px rgba(56,216,255,0.6), 0 2px 0 #000; }
.right .hpnum { text-shadow: 0 0 12px rgba(255,138,42,0.6), 0 2px 0 #000; }
.track {
  position: relative; height: 16px;
  border-radius: 3px;
  background: rgba(5, 10, 22, 0.8);
  border: 2px solid rgba(255,255,255,0.75);
  overflow: hidden;
  transform: skewX(-18deg);
}
.track .fill, .track .lag { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; }
.right .track .fill, .right .track .lag { left: auto; right: 0; }
.track .lag { background: #ffffff; opacity: 0.6; }
.left .fill { background: linear-gradient(180deg, #9ff0ff, #1f9fd6 60%, #0d6aa8); box-shadow: 0 0 12px var(--cyan); }
.right .fill { background: linear-gradient(180deg, #ffd29a, #ff8a2a 60%, #c4500e); box-shadow: 0 0 12px var(--orange); }
.left .fill.low { background: linear-gradient(180deg, #ffb0b0, #ff3a3a 60%, #a80d0d); animation: blink 0.5s steps(2) infinite; }
.vs { font: 900 22px var(--tech-font); margin-top: 22px; color: #ffcf5a; text-shadow: 0 0 12px rgba(255,170,60,0.8); }
.weapons { display: flex; gap: 14px; margin-top: 10px; }
.wpn { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wpn small { font-size: 10px; opacity: 0.7; }
.ring {
  --p: 360deg;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--cyan) var(--p), rgba(255,255,255,0.12) var(--p));
  position: relative;
}
.ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: rgba(6, 12, 30, 0.92); }
.ring span { position: relative; font: 800 9px var(--tech-font); letter-spacing: 0.05em; }
.ring.dash { background: var(--cyan); }
.ring.dash.used { background: rgba(255,255,255,0.15); }

#banner {
  position: fixed; top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  font: 900 clamp(48px, 9vw, 110px) var(--tech-font);
  letter-spacing: 0.06em;
  opacity: 0;
  white-space: nowrap;
}
#banner.show { animation: banner 0.5s cubic-bezier(.2,1.6,.4,1) both; }
#banner.ready { color: #fff; text-shadow: 0 0 20px var(--cyan), 0 6px 0 #0b1a3a; }
#banner.go { color: #ffcf5a; text-shadow: 0 0 24px #ff8a2a, 0 6px 0 #3a1a00; }
#banner.down { color: #ff7a7a; font-size: clamp(32px, 6vw, 64px); text-shadow: 0 0 18px #ff2a2a, 0 4px 0 #2a0000; }
#banner.win { background: linear-gradient(180deg, #fff6c8, #ffcf5a 50%, #ff8a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px rgba(255,170,60,0.8)) drop-shadow(0 6px 0 #3a1a00); }
#banner.lose { color: #9fb4d6; text-shadow: 0 0 20px #2f5bd6, 0 6px 0 #0b1a3a; }

#dmg-layer { position: fixed; inset: 0; }
.dmg {
  position: fixed;
  transform: translate(-50%, -50%);
  font: 900 26px var(--tech-font);
  color: #fff;
  text-shadow: 0 0 10px var(--cyan), 0 2px 0 #000;
}
.dmg.bad { color: #ffb0a0; text-shadow: 0 0 10px #ff3a1a, 0 2px 0 #000; }

#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* -------------------------------------------------------------- animaciones */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#dialog .box, #choices { transform-origin: bottom; }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes bob { 50% { transform: translate(-50%, calc(-100% - 5px)); } }
#dialog-next { animation-name: bobn; }
@keyframes bobn { 50% { transform: translateY(4px); } }
@keyframes nudge { 50% { transform: translateX(3px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes banner {
  from { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}