:root {
  --bg: #0a0d1c;
  --panel: rgba(14, 17, 34, 0.94);
  --line: #3a3f63;
  --text: #eee6d2;
  --dim: #9a97ab;
  --accent: #ffc46e;
  --hp: #ff5d5d;
  --xp: #8fd8ff;
  --sh: #58c8ff;
  --common: #b9c6cf;
  --rare: #4fb4ff;
  --epic: #d77bff;
  --legend: #ff8a3d;
  --font: 'Galmuri11', 'Galmuri9', 'DungGeunMo', 'Malgun Gothic', monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 13px;
  user-select: none; -webkit-user-select: none; touch-action: none;
}

#game {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  image-rendering: pixelated; image-rendering: crisp-edges;
  display: block; background: var(--bg);
}

.hidden { display: none !important; }

button {
  font-family: var(--font); color: var(--text); cursor: pointer;
  background: #1a1e38; border: 2px solid var(--line);
  touch-action: manipulation;
}
button:hover { border-color: var(--accent); }
.pill { padding: 6px 10px; font-size: 12px; }
.pill.primary { background: #4a3418; border-color: var(--accent); color: #fff3dc; }
.pill.big { padding: 12px 34px; font-size: 18px; margin-top: 10px; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 8, 0.55); z-index: 20; padding: 16px;
}
.panel {
  background: var(--panel); border: 2px solid var(--line);
  box-shadow: 0 0 0 2px #000, 6px 6px 0 #000;
  padding: 18px 22px; max-width: 560px; width: 100%; text-align: center;
  max-height: 100%; overflow-y: auto;
}
.panel.wide { max-width: 980px; }
h1 { font-size: 34px; margin: 4px 0 6px; color: var(--accent); letter-spacing: 2px; text-shadow: 3px 3px 0 #3a2410; }
h2 { font-size: 22px; margin: 2px 0 6px; color: var(--accent); }
.sub { color: var(--dim); margin: 0 0 10px; }
.howto { text-align: left; line-height: 1.7; padding-left: 18px; margin: 8px 0; }
.howto b { color: var(--xp); }

#rotate-hint { display: none; z-index: 50; background: var(--bg); }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-hint { display: flex; }
}

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud button { pointer-events: auto; }
#hud-left {
  position: absolute; left: calc(10px + env(safe-area-inset-left)); top: 10px; width: min(300px, 38vw);
}
#hud-right {
  position: absolute; right: calc(10px + env(safe-area-inset-right)); top: 10px; text-align: right;
}
.lvl-row { display: flex; gap: 6px; align-items: center; }
#lvl-badge {
  background: #13283a; border: 2px solid var(--xp); color: var(--xp);
  padding: 2px 6px; font-size: 13px; white-space: nowrap;
}
.bar {
  position: relative; height: 14px; background: #0e1124; border: 2px solid #2c3152;
  margin-bottom: 4px; flex: 1; overflow: hidden;
}
.bar > div { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.bar span {
  position: relative; font-size: 10px; line-height: 10px; padding-left: 4px;
  text-shadow: 1px 1px 0 #000; display: block; margin-top: 0;
}
.bar.xp > div { background: var(--xp); }
.bar.xp { margin-bottom: 0; }
.lvl-row { margin-bottom: 4px; }
.bar.hp > div { background: var(--hp); }
.bar.sh > div { background: var(--sh); }
#ship-stats { font-size: 10px; color: var(--dim); line-height: 1.5; text-shadow: 1px 1px 0 #000; }
#emerg { margin-top: 4px; color: var(--accent); font-size: 12px; text-shadow: 1px 1px 0 #000; animation: blink 0.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
#stat-line { font-size: 13px; text-shadow: 1px 1px 0 #000; margin-bottom: 6px; }
#stat-line b { color: var(--accent); }
.hud-btns { display: flex; gap: 4px; justify-content: flex-end; }
.hud-btns .pill { font-size: 10px; padding: 4px 7px; background: rgba(26, 30, 56, 0.8); }

#btn-build {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px;
  padding: 9px 18px; font-size: 15px; background: #4a3418; border-color: var(--accent); color: #fff3dc;
  animation: pulse 1s steps(2) infinite;
}
#btn-build b { color: var(--accent); }
@keyframes pulse { 50% { border-color: #fff; } }

/* ---------- touch ---------- */
#touch-ui { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#stick-zone { position: absolute; left: 0; top: 25%; bottom: 0; width: 45%; pointer-events: auto; }
#stick-base {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  left: 110px; bottom: 50px; top: auto;
  border: 3px solid rgba(238, 226, 196, 0.35); border-radius: 50%;
  background: rgba(238, 226, 196, 0.06); pointer-events: none;
}
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px;
  border-radius: 50%; background: rgba(255, 196, 110, 0.45); border: 3px solid rgba(255,255,255,0.4);
}
#btn-fire {
  position: absolute; right: calc(30px + env(safe-area-inset-right)); bottom: 40px;
  width: 96px; height: 96px; border-radius: 50%; pointer-events: auto;
  background: rgba(255, 80, 80, 0.25); border: 3px solid rgba(255, 120, 120, 0.7);
  font-size: 16px; color: #ffe0e0;
}
#btn-fire.on { background: rgba(255, 80, 80, 0.55); }

/* ---------- pack screen ---------- */
#pack-list { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pack {
  flex: 1 1 0; min-width: 200px; max-width: 300px; background: #12152b; border: 2px solid var(--line);
  padding: 10px; text-align: left; cursor: pointer; position: relative;
}
.pack:hover, .pack:focus { border-color: var(--accent); transform: translateY(-2px); }
.pack .pk-title { font-size: 15px; margin-bottom: 2px; }
.pack .pk-desc { font-size: 10px; color: var(--dim); margin-bottom: 8px; }
.pack .pk-key { position: absolute; right: 8px; top: 8px; color: var(--dim); font-size: 11px; }
.pk-item { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.pk-item canvas { width: 36px; height: 36px; image-rendering: pixelated; flex: none; background: #0a0d1c; border: 1px solid #2c3152; }
.pk-item .nm { font-size: 12px; }
.pk-item .ds { font-size: 10px; color: var(--dim); line-height: 1.35; }
.r-common { color: var(--common); }
.r-rare { color: var(--rare); }
.r-epic { color: var(--epic); }
.r-legend { color: var(--legend); }
.pack.legend { border-color: #9a4a1c; background: #1c1418; }
.pack.epic { border-color: #6a3a85; }
.pack.rare { border-color: #2a5675; }
.pk-item .sz, .tray-item .sz { color: var(--legend); font-size: 10px; }
.pk-item .sz { border: 1px solid #9a4a1c; padding: 0 3px; margin-left: 2px; }

/* ---------- build ui ---------- */
#build-ui { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
#build-ui button, #tray { pointer-events: auto; }
#build-top {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 2px solid var(--line); padding: 5px 10px; font-size: 11px;
  white-space: nowrap; max-width: 96vw; overflow: hidden; text-overflow: ellipsis;
}
#build-info {
  position: absolute; top: 44px; right: 10px; width: 220px; background: var(--panel);
  border: 2px solid var(--line); padding: 8px; font-size: 11px; line-height: 1.5;
}
#build-info:empty { display: none; }
#build-info .nm { font-size: 14px; }
#build-bottom {
  position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; gap: 8px; align-items: flex-end;
  justify-content: center; flex-wrap: wrap;
}
#tray { display: flex; gap: 6px; background: var(--panel); border: 2px solid var(--line); padding: 6px; max-width: 70vw; overflow-x: auto; }
.tray-item { position: relative; padding: 0; width: 52px; height: 52px; background: #0a0d1c; }
.tray-item canvas { width: 44px; height: 44px; image-rendering: pixelated; display: block; margin: 2px auto 0; }
.tray-item .cnt { position: absolute; right: 2px; bottom: 0; font-size: 11px; color: #fff; text-shadow: 1px 1px 0 #000; }
.tray-item.sel { border-color: var(--accent); background: #3a2a14; }
.tray-item .sz { position: absolute; left: 2px; top: 0; text-shadow: 1px 1px 0 #000; }
#build-btns { display: flex; gap: 6px; }
#build-btns .pill { padding: 10px 12px; }

@media (max-height: 420px) {
  .panel { padding: 10px 14px; }
  h1 { font-size: 24px; }
  h2 { font-size: 17px; }
  .howto { line-height: 1.45; font-size: 11px; }
  .pack { min-width: 170px; padding: 7px; }
  .pk-item { margin: 3px 0; }
  .pk-item canvas { width: 28px; height: 28px; }
  #build-info { width: 180px; font-size: 10px; }
}