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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #ffffff;
  font-family: 'Jua', 'Baloo 2', sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

canvas { position: fixed; inset: 0; z-index: 0; display: block; }

/* ---------- floating damage % labels ---------- */
#labels { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }

.dmglabel {
  position: absolute;
  transform: translate(-50%, -100%);
  font: 30px 'Baloo 2', 'Jua', sans-serif;
  font-weight: 800;
  letter-spacing: -1px;
  text-shadow:
    -3px -3px 0 #33241a, 3px -3px 0 #33241a, -3px 3px 0 #33241a, 3px 3px 0 #33241a,
    0 -3px 0 #33241a, 0 3px 0 #33241a, -3px 0 0 #33241a, 3px 0 0 #33241a,
    0 5px 0 #33241a;
}

/* 잡기 탈출 QTE 게이지 */
.qte {
  position: absolute;
  transform: translate(-50%, 0);
  width: 92px; height: 15px;
  border: 3px solid #33261a;
  border-radius: 9px;
  background: #fff4d8;
  box-shadow: 0 3px 6px rgba(60,40,10,.25);
}
.qte i {
  display: block; height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #ffd83d, #9ce04a);
  transition: width .08s linear;
}
.qte b {
  position: absolute;
  left: 50%; top: 17px;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 17px 'Jua';
  color: #ff6b3d;
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    0 3px 0 rgba(60,40,10,.25);
  animation: qtepulse .35s ease-in-out infinite;
}
@keyframes qtepulse { 0%,100% { scale: 1; } 50% { scale: 1.15; } }

.pop {
  position: absolute;
  transform: translate(-50%, -100%);
  font: 24px 'Jua', sans-serif;
  text-shadow:
    -2px -2px 0 #33241a, 2px -2px 0 #33241a, -2px 2px 0 #33241a, 2px 2px 0 #33241a,
    0 3px 0 #33241a;
  pointer-events: none;
}

/* ---------- HUD player cards ---------- */
#hud {
  position: fixed; left: 0; right: 0; bottom: 16px;
  z-index: 6;
  display: flex; justify-content: center; align-items: flex-end;
  gap: 22px;
  pointer-events: none;
}

.card {
  --c: #d83b2f;
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-width: 196px;
  padding: 8px 18px 8px 8px;
  border: 4px solid #33261a;
  border-radius: 14px;
  transform: skewX(-6deg);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 72%, #fff) 0%,
    var(--c) 42%,
    color-mix(in srgb, var(--c) 72%, #2a1c10) 100%);
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.30),
    inset 0 -7px 0 rgba(0,0,0,.20),
    0 8px 16px rgba(60,40,10,.22);
  transition: filter .2s;
}
.card > * { transform: skewX(6deg); }

.card.hitflash { animation: cardshake .18s; }
@keyframes cardshake {
  0%,100% { translate: 0 0; }
  25% { translate: -4px 1px; }
  60% { translate: 4px -1px; }
}

.card.out { filter: grayscale(1) brightness(.72); }

.portrait {
  width: 58px; height: 58px;
  flex: none;
  border: 3.5px solid #33261a;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff7e0, #f3dfae);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.12);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.portrait svg { width: 86%; height: 86%; }

.ptag {
  position: absolute;
  left: -10px; bottom: -10px;
  padding: 1px 8px 2px;
  font: 15px 'Jua';
  color: #fff;
  background: var(--c);
  border: 3px solid #33261a;
  border-radius: 8px;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  z-index: 1;
}

.cinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }

.pips { display: flex; gap: 5px; padding-left: 3px; }
.pip {
  width: 17px; height: 13px;
  border-radius: 50% 50% 46% 46%;
  border: 2.5px solid #33261a;
  background: #cfe39b;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55);
}
.pip.lost { background: #5a4a38; opacity: .45; }

.pct {
  font: 800 33px/1 'Baloo 2', 'Jua';
  letter-spacing: -1px;
  color: #ffd83d;
  text-shadow:
    -2.5px -2.5px 0 #33241a, 2.5px -2.5px 0 #33241a, -2.5px 2.5px 0 #33241a, 2.5px 2.5px 0 #33241a,
    0 4px 0 #33241a;
  transition: scale .1s ease-out;
}

/* ---------- overlays ---------- */
#controls {
  position: fixed; right: 14px; top: 12px;
  z-index: 6;
  font: 14px 'Jua';
  color: #8a7a60;
  background: rgba(255, 250, 236, .85);
  border: 2.5px solid #e4d4b2;
  border-radius: 10px;
  padding: 5px 12px;
  pointer-events: none;
}

#announce {
  position: fixed; left: 50%; top: 34%;
  transform: translate(-50%, -50%);
  z-index: 8;
  font: 110px 'Jua';
  color: #ffd83d;
  text-shadow:
    -5px -5px 0 #33241a, 5px -5px 0 #33241a, -5px 5px 0 #33241a, 5px 5px 0 #33241a,
    0 9px 0 #33241a, 0 14px 22px rgba(60,40,10,.3);
  pointer-events: none;
  opacity: 0;
}
#announce.show { animation: annpop .8s ease-out; }
@keyframes annpop {
  0% { opacity: 0; scale: .3; }
  18% { opacity: 1; scale: 1.18; }
  30% { scale: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; scale: 1.05; }
}

#flash {
  position: fixed; inset: 0; z-index: 7;
  background: #fff;
  opacity: 0; pointer-events: none;
}
#flash.show { animation: flashout .35s ease-out; }
@keyframes flashout { 0% { opacity: .85; } 100% { opacity: 0; } }

#title, #result {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255,255,255,0) 30%, rgba(255,252,242,.92) 75%),
    rgba(255, 252, 242, .55);
}
#title.hidden, #result.hidden { display: none; }

.logo {
  font: 92px 'Jua';
  color: #f5a23c;
  text-shadow:
    -5px -5px 0 #33241a, 5px -5px 0 #33241a, -5px 5px 0 #33241a, 5px 5px 0 #33241a,
    0 10px 0 #33241a, 0 16px 24px rgba(60,40,10,.25);
}
.sub { font: 27px 'Jua'; color: #8a7a60; }

.diff { display: flex; gap: 10px; }
.diff button {
  font: 21px 'Jua';
  color: #6b5b44;
  background: #fff4d8;
  border: 3.5px solid #33261a;
  border-radius: 12px;
  padding: 7px 22px;
  cursor: pointer;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.10), 0 4px 0 #33261a;
}
.diff button.sel {
  color: #fff;
  background: #f5a23c;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.diff button:active { translate: 0 3px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.1), 0 1px 0 #33261a; }

#start, #rematch {
  font: 36px 'Jua';
  color: #fff;
  background: linear-gradient(180deg, #ff8a52, #e2502c);
  border: 4px solid #33261a;
  border-radius: 18px;
  padding: 12px 58px;
  cursor: pointer;
  text-shadow: 0 3px 0 rgba(0,0,0,.32);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.3), inset 0 -8px 0 rgba(0,0,0,.18), 0 7px 0 #33261a;
}
#start:hover, #rematch:hover { filter: brightness(1.07); }
#start:active, #rematch:active { translate: 0 5px; box-shadow: inset 0 5px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.18), 0 2px 0 #33261a; }

.howto {
  font: 17px/1.7 'Jua';
  color: #8a7a60;
  text-align: center;
  background: rgba(255, 250, 236, .9);
  border: 3px solid #e4d4b2;
  border-radius: 14px;
  padding: 12px 26px;
}

#winnerTxt {
  font: 76px 'Jua';
  color: #ffd83d;
  text-shadow:
    -4px -4px 0 #33241a, 4px -4px 0 #33241a, -4px 4px 0 #33241a, 4px 4px 0 #33241a,
    0 8px 0 #33241a, 0 14px 22px rgba(60,40,10,.3);
  animation: winbounce 1.1s ease-in-out infinite;
}
@keyframes winbounce { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }