:root {
  --bg-dark: #12151f;
  --bg-mid: #2a2320;
  --panel: rgba(9, 11, 16, 0.78);
  --line: rgba(255, 229, 191, 0.34);
  --text-main: #f6f2e9;
  --text-sub: #d2c9b7;
  --shadow: rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: "Nanum Myeongjo", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at 12% 8%, rgba(195, 142, 87, 0.22), transparent 38%),
    radial-gradient(circle at 85% 18%, rgba(122, 139, 162, 0.2), transparent 34%),
    linear-gradient(150deg, var(--bg-dark) 0%, var(--bg-mid) 48%, #14161f 100%);
}

#app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.4vw, 28px);
}

.screen {
  width: min(1024px, 96vw);
}

.hidden {
  display: none !important;
}

#intro-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(18, 22, 31, 0.88), rgba(28, 22, 17, 0.86));
  box-shadow: 0 22px 44px var(--shadow);
}

.main-title {
  margin: 0;
  letter-spacing: 0.06em;
  line-height: 1.2;
  font-size: clamp(2rem, 6.2vw, 4.1rem);
}

.intro-note {
  margin: 0;
  max-width: 760px;
  color: var(--text-sub);
  font-size: clamp(0.97rem, 2vw, 1.18rem);
}

.loading-container {
  width: min(540px, 88vw);
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(236, 198, 137, 0.58);
  background: linear-gradient(180deg, rgba(66, 42, 26, 0.86), rgba(42, 27, 18, 0.92));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.42), 0 6px 16px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.loading-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a5a2f 0%, #c99a5e 46%, #f1d08a 100%);
  box-shadow: 0 0 14px rgba(226, 177, 99, 0.45);
  transition: width 0.14s ease-out;
}

.main-title,
.intro-note,
#intro-screen .primary-btn,
.end-banner,
#end-actions .primary-btn,
#end-actions .coffee-btn {
  font-family: "Gungsuh", "궁서", serif;
}

.primary-btn,
.danger-btn,
.tool-btn,
.coffee-btn {
  border: 1px solid rgba(255, 219, 177, 0.48);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: clamp(0.94rem, 1.9vw, 1.07rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--text-main);
  background: linear-gradient(180deg, rgba(233, 161, 93, 0.24), rgba(107, 53, 35, 0.38));
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease;
}

.danger-btn {
  background: linear-gradient(180deg, rgba(222, 84, 76, 0.36), rgba(120, 32, 32, 0.48));
}

.primary-btn:hover,
.danger-btn:hover,
.tool-btn:hover,
.coffee-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.09);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 8, 13, 0.82);
}

.modal-panel {
  width: min(860px, 95vw);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(18, 18, 25, 0.96), rgba(38, 28, 22, 0.92));
  padding: clamp(20px, 3.4vw, 38px);
  text-align: center;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.56);
}

.warning-text {
  margin: 0 auto 18px;
  max-width: 760px;
  line-height: 1.8;
  color: var(--text-sub);
  white-space: pre-line;
  text-align: center;
}

#game-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

#status-slot {
  width: min(720px, 95vw);
}

.hp-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
}

.end-banner {
  margin: 0;
  padding: 9px 12px;
  text-align: center;
  font-size: clamp(1.9rem, 4.8vw, 3rem);
  letter-spacing: 0.04em;
}

.poison-note {
  margin: 8px 0 0;
  color: #ff5b5b;
  font-weight: 700;
  text-align: left;
  min-height: 20px;
}

.hp-label {
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.hp-bar {
  height: 16px;
  flex: 1;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

#hp-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #32cf62, #8ff1b0);
  transition: width 0.25s ease, background 0.25s ease;
}

.hp-text {
  min-width: 30px;
  text-align: right;
  font-weight: 700;
}

.arena {
  position: relative;
  width: min(86vw, 560px);
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  border: 2px solid rgba(255, 224, 183, 0.32);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(111, 128, 145, 0.62) 0%, rgba(84, 70, 62, 0.54) 52%, rgba(28, 25, 22, 0.86) 100%),
    radial-gradient(circle at 60% 20%, rgba(212, 217, 226, 0.22), transparent 42%);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.42);
}

.arena::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 2px,
    transparent 2px,
    transparent 8px
  );
  pointer-events: none;
}

#han-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(88%, 500px);
  transform: translate(-50%, -43%);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.48));
  z-index: 2;
}

.fog-layer {
  position: absolute;
  inset: -12%;
  z-index: 3;
  opacity: 0.95;
  pointer-events: none;
  filter: blur(10px);
  background:
    radial-gradient(circle at 34% 30%, rgba(250, 250, 250, 0.78), rgba(255, 255, 255, 0) 54%),
    radial-gradient(circle at 68% 60%, rgba(223, 228, 237, 0.78), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(220, 227, 236, 0.68), rgba(132, 144, 163, 0.4), rgba(70, 84, 103, 0.22));
}

.fog-layer.clear {
  animation: fog-lift 2.3s ease forwards;
}

.damage-layer,
.projectile-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.damage-layer {
  z-index: 7;
}

.projectile-layer {
  z-index: 6;
}

.impact-frame {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 7;
  image-rendering: auto;
}

.impact-frame.strong {
  filter: drop-shadow(0 0 20px rgba(255, 167, 167, 0.88));
}

.projectile-sprite,
.arrow-projectile,
.stone-chunk {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform, opacity;
  user-select: none;
}

.stone-chunk {
  width: 30px;
  height: 25px;
  border-radius: 47% 53% 42% 58% / 52% 48% 55% 45%;
  background: radial-gradient(circle at 32% 32%, #d1cbc0 0%, #8e8578 44%, #585247 100%);
  box-shadow: inset -4px -5px 7px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.32);
}

.danjong-actor {
  position: absolute;
  left: 7%;
  bottom: 8%;
  width: min(42vw, 320px);
  z-index: 8;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}

.arrow-projectile {
  width: 82px;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, #4a3116, #9b7a4c 45%, #dbc8a4 85%);
}

.arrow-projectile::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 1px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 10px solid #d8ddd9;
}

.arrow-projectile::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -3px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #e7ddd0;
}

.poison-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 8;
  background: radial-gradient(circle at 50% 50%, rgba(255, 80, 80, 0.38), rgba(112, 0, 0, 0.18));
}

.poison-flash.active {
  animation: poison-hit 0.42s ease;
}

.subtitle {
  width: min(760px, 95vw);
  min-height: 62px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(9, 12, 19, 0.78);
  text-align: center;
  font-size: clamp(1rem, 2.2vw, 1.22rem);
  line-height: 1.5;
}

.tools-panel,
.end-actions {
  width: min(720px, 95vw);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.end-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-btn {
  min-height: 54px;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  background: linear-gradient(180deg, rgba(102, 46, 30, 0.54), rgba(39, 19, 14, 0.64));
}

.tool-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.secret-btn {
  border-color: rgba(255, 237, 148, 0.86);
  background: linear-gradient(180deg, rgba(154, 122, 36, 0.72), rgba(74, 56, 11, 0.86));
}

.secret-btn.revealed {
  animation: secret-pop 1.6s ease, secret-glow 1.8s ease-in-out infinite alternate;
}

.coffee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(99, 130, 58, 0.6), rgba(44, 69, 30, 0.72));
}

.shake {
  animation: screen-shake 0.24s linear;
}

.shake-heavy {
  animation: screen-shake-heavy 0.35s linear;
}

@keyframes fog-lift {
  0% {
    opacity: 0.95;
    transform: translateY(0) scale(1.02);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.08);
  }
}

@keyframes poison-hit {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes screen-shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(4px, -2px); }
  50% { transform: translate(-4px, 2px); }
  75% { transform: translate(3px, 1px); }
  100% { transform: translate(0, 0); }
}

@keyframes screen-shake-heavy {
  0% { transform: translate(0, 0); }
  20% { transform: translate(9px, -5px); }
  40% { transform: translate(-8px, 4px); }
  60% { transform: translate(6px, 5px); }
  80% { transform: translate(-6px, -3px); }
  100% { transform: translate(0, 0); }
}

@keyframes secret-pop {
  0% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes secret-glow {
  from {
    box-shadow: 0 0 8px rgba(255, 222, 126, 0.55), 0 0 1px rgba(255, 255, 255, 0.6);
  }
  to {
    box-shadow: 0 0 22px rgba(255, 225, 132, 0.9), 0 0 8px rgba(255, 245, 193, 0.9);
  }
}

@media (max-width: 768px) {
  #app {
    padding: 12px;
  }

  .arena {
    width: min(95vw, 430px);
    border-radius: 18px;
  }

  #han-image {
    width: min(90%, 460px);
    transform: translate(-50%, -41%);
  }

  .tools-panel {
    width: min(96vw, 520px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .end-actions {
    width: min(96vw, 520px);
    grid-template-columns: 1fr;
    gap: 10px;
  }
}