:root {
  --bg: #0a120e;
  --panel: #121c16;
  --line: rgba(125, 197, 0, 0.28);
  --ink: #e8ebe3;
  --muted: #7a8270;
  --green: #7dc500;
  --green-hot: #b6ff2a;
  --wood: #c48a3a;
  --steel: #9ab0c4;
  --crystal: #7ad0ff;
  --gold: #e8c547;
  --danger: #e05555;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(125, 197, 0, 0.12), transparent 55%),
    #070c09;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  background: #1a2a1c;
}

#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 12, 9, 0.78), transparent);
}

.chip {
  min-width: 84px;
  padding: 7px 11px;
  background: rgba(18, 28, 22, 0.88);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.chip .k {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.chip.god-chip {
  border-color: rgba(255, 224, 102, 0.55);
}
.chip.god-chip strong {
  color: #ffe066;
}

.mute,
.inv-btn {
  pointer-events: auto;
  margin-left: 4px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: rgba(18, 28, 22, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.inv-btn { margin-left: auto; color: var(--green-hot); }
.mute:hover,
.inv-btn:hover { border-color: var(--green); }

.weapon-cycle {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 92px;
  padding: 8px 8px 10px;
  border: 2px solid rgba(125, 197, 0, 0.5);
  background: rgba(12, 18, 14, 0.9);
  color: var(--green-hot);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.weapon-cycle:active {
  border-color: var(--green-hot);
  background: rgba(125, 197, 0, 0.22);
  transform: translateX(-50%) scale(0.96);
}

.weapon-cycle canvas {
  display: block;
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

#weapon-cycle-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.weapon-cycle-hint {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (pointer: coarse), (hover: none), (max-width: 820px) {
  .weapon-cycle {
    left: auto;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(140px, calc(env(safe-area-inset-bottom) + 132px));
    transform: none;
  }
  .weapon-cycle:active {
    transform: scale(0.96);
  }
}

#toast {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 10px 16px;
  background: rgba(12, 18, 14, 0.92);
  border: 1px solid var(--line);
  color: var(--green-hot);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  pointer-events: none;
}

.pad {
  display: none;
  position: absolute;
  z-index: 7;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(125, 197, 0, 0.12);
  border: 2px solid rgba(125, 197, 0, 0.4);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.pad-move { left: max(14px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); }

.pad-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(182, 255, 42, 0.45);
  border: 2px solid rgba(182, 255, 42, 0.75);
  pointer-events: none;
  transition: none;
}

.pad-atk,
.pad-inv {
  display: none;
  position: absolute;
  z-index: 7;
  border-radius: 50%;
  border: 2px solid rgba(125, 197, 0, 0.45);
  background: rgba(18, 28, 22, 0.88);
  color: var(--green-hot);
  font: 700 0.85rem "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.pad-atk {
  right: max(18px, env(safe-area-inset-right));
  bottom: max(36px, env(safe-area-inset-bottom));
  width: 88px;
  height: 88px;
  font-size: 0.95rem;
  background: rgba(125, 197, 0, 0.22);
}

.pad-inv {
  right: max(110px, calc(env(safe-area-inset-right) + 92px));
  bottom: max(28px, env(safe-area-inset-bottom));
  width: 64px;
  height: 64px;
}

.pad-atk:active,
.pad-inv:active {
  background: rgba(182, 255, 42, 0.35);
}

body.touch-ui .pad,
body.touch-ui .pad-atk,
body.touch-ui .pad-inv {
  display: block;
}

body.touch-ui .inv-btn {
  display: none;
}

@media (pointer: coarse), (hover: none), (max-width: 820px) {
  .pad,
  .pad-atk,
  .pad-inv { display: block; }
  .inv-btn { display: none; }
}

.inventory {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(4, 8, 5, 0.72);
  padding: 16px;
}

.inventory.hidden { display: none; }

.inv-panel {
  width: min(720px, 100%);
  max-height: min(86vh, 640px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px 20px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.inv-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.inv-panel h2 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.2rem;
  color: var(--green-hot);
}

.inv-close {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.inv-hint {
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 14px;
}

.inv-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 720px) {
  .inv-cols { grid-template-columns: 1fr; }
}

.inv-panel h3 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.inv-panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inv-panel li button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid rgba(125, 197, 0, 0.18);
  background: rgba(8, 14, 10, 0.7);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.inv-panel li button:hover { border-color: var(--green); }
.inv-panel li button.active {
  border-color: var(--green-hot);
  background: rgba(125, 197, 0, 0.12);
  color: var(--green-hot);
}

.inv-panel li .meta {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.inv-arrows {
  margin-top: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.55;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 20%, rgba(125, 197, 0, 0.15), transparent 60%),
    rgba(5, 8, 6, 0.92);
}

.overlay.hidden { display: none; }

.panel {
  width: min(520px, 100%);
  padding: 28px 26px 24px;
  background: rgba(14, 22, 16, 0.95);
  border: 1px solid var(--line);
  text-align: center;
}

.brand {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}

.panel h1 {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  color: var(--green-hot);
  margin-bottom: 10px;
}

.tag {
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.45;
}

.rules {
  text-align: left;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.92rem;
  color: var(--ink);
}

.rules li {
  padding-left: 14px;
  border-left: 2px solid rgba(125, 197, 0, 0.35);
}

.hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 18px;
}

#play {
  padding: 12px 28px;
  border: none;
  background: var(--green);
  color: #0a120e;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

#play:hover { background: var(--green-hot); }

.back-line {
  margin-top: 16px;
  font-size: 0.85rem;
}

.back-line a {
  color: var(--muted);
  text-decoration: none;
}

.back-line a:hover { color: var(--green-hot); }