/* ============================================================
   AKATSUKI — terminal card-duel RPG (lives in INPUT 2)
   Green-on-black CRT aesthetic. Fills the terminal cell (~514px).
   Palette: laser/UI green = #4cd98a, shield = primary lavender,
   damage = red. All sits on the terminal's black screen.
   ============================================================ */

/* mount fills the terminal cell (height set by INPUT 1 in the grid stack) */
#crt-input2 { display: flex; flex-direction: column; min-height: 0; }
#akatsuki { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#akatsuki > .akat { flex: 1; }

.akat {
  --akat-green: #4cd98a;
  --akat-green-dim: color-mix(in oklch, #4cd98a 45%, transparent);
  --akat-white: color-mix(in oklch, #ffffff 80%, transparent);
  --akat-dim: color-mix(in oklch, #ffffff 50%, transparent);
  --akat-faint: color-mix(in oklch, #ffffff 30%, transparent);
  --akat-red: #ff5a5a;
  --akat-shield: #c592ff;
  --akat-line: color-mix(in oklch, #ffffff 12%, transparent);

  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.45;
  color: var(--akat-white);
  padding: 14px 22px 16px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.akat * { box-sizing: border-box; }
/* Japanese glyphs use the site's Klee One face */
.akat-jp { font-family: 'Klee One', var(--font-mono, serif); font-weight: 400; }
/* neutralize the page's global <pre> code-block styling inside the game */
.akat pre { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.akat b { color: var(--akat-white); font-weight: 600; }

/* glowing green text helper */
.akat-g { color: var(--akat-green); text-shadow: 0 0 8px var(--akat-green-dim); }
.akat-r { color: var(--akat-red); text-shadow: 0 0 8px color-mix(in oklch, #ff5a5a 50%, transparent); }
.akat-v { color: var(--akat-shield); text-shadow: 0 0 8px color-mix(in oklch, #c592ff 45%, transparent); }

/* ---------- HUD bar ---------- */
.akat-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.14em;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--akat-dim);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--akat-line);
  flex-shrink: 0;
  gap: 12px;
}
.akat-hud { justify-content: flex-start; white-space: nowrap; }
.akat-hud__title, .akat-hud__sub { white-space: nowrap; }
.akat-hud__sub { color: var(--akat-dim); }
.akat-hud__title { color: var(--akat-green); text-shadow: 0 0 8px var(--akat-green-dim); font-weight: 600; }

/* ---------- generic screen (title / howto / end) ---------- */
.akat-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 6px 0;
}
.akat-logo {
  white-space: pre;
  line-height: 1.05;
  font-size: clamp(7px, 1.5vw, 11px);
  color: var(--akat-green);
  text-shadow: 0 0 12px var(--akat-green-dim);
  margin: 0;
}
.akat-tagline { color: var(--akat-dim); letter-spacing: 0.22em; text-transform: uppercase; font-size: 10px; }

/* --- title screen entrance --- */
.akat-bigmark.is-enter {
  animation: akatTitleEnter 1s cubic-bezier(.16,1,.3,1) forwards;
}
.akat-tagline.is-enter {
  animation: akatTitleEnter 0.8s cubic-bezier(.16,1,.3,1) 0.35s both;
}
@keyframes akatTitleEnter {
  from { opacity: 0; margin-top: 26px; }
  to   { opacity: 1; margin-top: 0; }
}
/* big styled wordmark (replaces fragile ASCII art) */
.akat-bigmark { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.akat-bigmark__kanji {
  font-family: 'Klee One', var(--font-mono, serif);
  font-size: 56px; line-height: 1;
  color: var(--akat-green);
  text-shadow: 0 0 20px var(--akat-green-dim);
}
.akat-bigmark__word {
  font-size: 23px; font-weight: 700;
  letter-spacing: 0.42em; padding-left: 0.42em;
  color: var(--akat-white);
}
.akat-endmark {
  font-size: 28px; font-weight: 700;
  letter-spacing: 0.3em; padding-left: 0.3em;
}
.akat-endmark.akat-g { color: var(--akat-green); text-shadow: 0 0 18px var(--akat-green-dim); }
.akat-endmark.akat-r { color: var(--akat-red); text-shadow: 0 0 18px color-mix(in oklch,#ff5a5a 50%, transparent); }
.akat-screen__body { color: var(--akat-white); max-width: 62ch; line-height: 1.7; }
.akat-screen__body .akat-rule { color: var(--akat-dim); display: block; margin-top: 6px; }
.akat-record { color: var(--akat-faint); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- battle stage (enemy top, player bottom) ---------- */
.akat-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 4px;
}
.akat-stage.is-shake { animation: akatShake 0.4s steps(2, end); }
@keyframes akatShake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 2px); }
}

/* enemy block */
.akat-enemy { display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 2; }
.akat-sprite {
  white-space: pre;
  text-align: center;
  line-height: 1.02;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--akat-green);
  text-shadow: 0 0 10px var(--akat-green-dim);
  margin: 0;
  transition: filter 0.1s;
}
.akat-sprite.is-hit { animation: akatHit 0.36s steps(3, end); }
@keyframes akatHit {
  0%,100% { filter: none; }
  50% { filter: brightness(2.4) drop-shadow(0 0 6px var(--akat-red)); }
}
.akat-sprite.is-dying { animation: akatDie 0.7s ease-out forwards; }
@keyframes akatDie {
  0% { opacity: 1; filter: none; }
  30% { filter: brightness(3); }
  100% { opacity: 0; filter: brightness(3) blur(3px); transform: scale(0.9); }
}
.akat-enemy__name { color: var(--akat-white); letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* player ship (small, bottom) */
.akat-player {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
}
.akat-ship {
  white-space: pre;
  text-align: center;
  line-height: 1.02;
  font-size: 11px;
  color: var(--akat-white);
  text-shadow: 0 0 8px color-mix(in oklch, #ffffff 30%, transparent);
  margin: 0;
}
.akat-ship.is-hit { animation: akatHit 0.36s steps(3, end); }

/* ---------- HP bar ---------- */
.akat-hp { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.06em; }
.akat-hp__label { color: var(--akat-dim); text-transform: uppercase; min-width: 3ch; }
.akat-hp__track {
  position: relative;
  width: 150px;
  height: 10px;
  background: color-mix(in oklch, #ffffff 8%, transparent);
  border: 1px solid var(--akat-line);
  overflow: hidden;
}
.akat-hp__fill {
  position: absolute; inset: 0;
  right: auto;
  width: 100%;
  transform-origin: left center;
  background: var(--akat-green);
  /* pixel segmentation */
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
  mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
  transition: width 0.5s cubic-bezier(0.2,0,0,1);
  box-shadow: 0 0 8px var(--akat-green-dim);
}
.akat-hp__fill.is-low { background: var(--akat-red); box-shadow: 0 0 8px color-mix(in oklch, #ff5a5a 50%, transparent); }
.akat-hp__num { color: var(--akat-white); font-variant-numeric: tabular-nums; min-width: 6ch; white-space: nowrap; }

/* enemy HP bar — vertical, centered, no label */
[data-hp="enemy"] { flex-direction: column; align-items: center; gap: 4px; }
[data-hp="enemy"] .akat-hp__label { display: none; }
[data-hp="enemy"] .akat-hp__num { min-width: unset; text-align: center; }

/* ---------- lower panel ---------- */
.akat-panel {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--akat-line);
}
.akat-log {
  min-height: 2.9em;
  color: var(--akat-white);
  line-height: 1.45;
}
.akat-log::before { content: '> '; color: var(--akat-green); }
.akat-cur::after {
  content: '';
  display: inline-block;
  width: 7px; height: 1em;
  margin-left: 1px;
  background: var(--akat-green);
  vertical-align: -2px;
}

/* hand + cards */
.akat-handrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.akat-hand { display: flex; align-items: center; gap: 8px; }
.akat-hand__lbl { color: var(--akat-dim); text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; }
.akat-cards { display: flex; gap: 6px; }
.akat-card {
  position: relative;
  width: 30px; height: 42px;
  border: 1px solid var(--akat-green-dim);
  background: color-mix(in oklch, #4cd98a 6%, transparent);
  color: var(--akat-green);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  text-shadow: 0 0 8px var(--akat-green-dim);
  border-radius: 2px;
}
.akat-card__suit { font-size: 8px; opacity: 0.7; line-height: 1; margin-top: 1px; }
.akat-card.is-down {
  color: transparent; text-shadow: none;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in oklch, #ffffff 10%, transparent) 0 3px,
      transparent 3px 6px);
  border-color: var(--akat-faint);
}
.akat-card.is-enemy { border-color: color-mix(in oklch, #ff5a5a 40%, transparent); color: var(--akat-red); background: color-mix(in oklch, #ff5a5a 6%, transparent); text-shadow: 0 0 8px color-mix(in oklch,#ff5a5a 45%, transparent); }
.akat-card.is-reveal { animation: akatReveal 0.4s ease-out; }
@keyframes akatReveal { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.akat-sum { color: var(--akat-white); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.akat-sum b { color: var(--akat-green); }
.akat-enemysum { font-size: 11px; color: var(--akat-dim); }

/* actions */
.akat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.akat-btn {
  flex: 1;
  min-width: 110px;
  appearance: none;
  background: transparent;
  border: 1px solid var(--akat-green-dim);
  color: var(--akat-green);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 2px;
  text-shadow: 0 0 8px var(--akat-green-dim);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.akat-btn:hover, .akat-btn:focus-visible {
  background: color-mix(in oklch, #4cd98a 14%, transparent);
  border-color: var(--akat-green);
  outline: none;
}
.akat-btn__key { opacity: 0.55; margin-right: 6px; }
.akat-btn--ghost { color: var(--akat-dim); border-color: var(--akat-faint); text-shadow: none; }
.akat-btn--ghost:hover { color: var(--akat-white); border-color: var(--akat-dim); background: color-mix(in oklch,#ffffff 6%, transparent); }
.akat-btn:disabled { opacity: 0.3; cursor: default; }
.akat-actions--single { justify-content: center; }
.akat-actions--single .akat-btn { flex: 0 1 auto; min-width: 160px; }

/* ---------- ASCII effects (laser / shield / burst) — plain colored text ---------- */
.akat-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }

.akat-ascii {
  position: absolute;
  margin: 0;
  font-family: var(--font-mono, monospace);
  white-space: pre;
  text-align: center;
  pointer-events: none;
}
.akat-ascii.is-green  { color: var(--akat-green); }
.akat-ascii.is-red    { color: var(--akat-red); }
.akat-ascii.is-violet { color: var(--akat-shield); }

.akat-beam {
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 12px;
  font-weight: 700;
  animation: akatFade 0.3s steps(3, end) forwards;
}
.akat-shield {
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1.05;
  font-weight: 700;
  animation: akatFade 0.7s ease-out forwards;
}
.akat-px {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  transform: translate(-50%, -50%);
}
@keyframes akatFade { 0% { opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* floating damage number */
.akat-dmg {
  position: absolute;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  z-index: 4;
  pointer-events: none;
  animation: akatDmg 0.9s ease-out forwards;
  text-shadow: 0 0 8px currentColor;
}
@keyframes akatDmg { 0% { opacity: 0; transform: translateY(0) scale(0.7);} 20% { opacity: 1; transform: translateY(-6px) scale(1.1);} 100% { opacity: 0; transform: translateY(-26px) scale(1);} }

@media (prefers-reduced-motion: reduce) {
  .akat-bigmark.is-enter, .akat-tagline.is-enter,
  .akat-stage.is-shake,
  .akat-sprite.is-hit, .akat-ship.is-hit,
  .akat-card.is-reveal,
  .akat-beam, .akat-shield, .akat-dmg { animation-duration: 0.01s; }
}