:root {
  color-scheme: light;
  --ink: #17324a;
  --muted: #6b8090;
  --line: #dce8ee;
  --cyan: #21b8d3;
  --pink: #f05b55;
  --yellow: #f4ba2d;
  --danger: #d84e58;
  --green: #28a981;
}

body {
  color: var(--ink);
  background: #fff;
}

.boxing-app {
  width: min(1380px, calc(100% - 32px));
  padding: 0 0 48px;
}

.boxing-header {
  min-height: 68px;
  margin: 0 0 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
}

.brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #ff796b, #f4585a);
  box-shadow: 0 8px 20px rgba(244, 88, 90, .2);
  font-size: 18px;
}

.boxing-brand small { color: var(--muted); font-size: 8px; }
.boxing-brand h1 { color: var(--ink); font-size: clamp(22px, 3vw, 34px); }
.boxing-brand h1 b { color: #f05b55; }
.boxing-nav a {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  background: #fff;
  letter-spacing: 0;
  font-size: 11px;
}

.battle-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(31, 74, 97, .14);
}

.battle-hud {
  min-height: 78px;
  border-bottom-color: var(--line);
  background: #fff;
}

.status-copy span, .score-status span { color: var(--muted); }
.status-copy strong, .score-status span strong { color: var(--ink); }
.score-status > b { color: #d39000; }
.hp-track { height: 10px; border: 1px solid #dbe7ed; background: #edf4f7; }
.player-status .hp-track i { background: linear-gradient(90deg, #22b8d6, #59ceb2); box-shadow: none; }
.monster-status .hp-track i { background: linear-gradient(90deg, #ffb13e, #f05b55); box-shadow: none; }

.boxing-stage {
  min-height: 742px;
  padding: 14px 28px 22px;
  background: #f7fbfc url("./assets/word-arcade-commercial-v2/runtime/background-boxing.webp") center / cover no-repeat;
}

.arena-lights { display: none; }
.battle-rules {
  gap: 8px;
  margin-bottom: 10px;
  color: #4e6878;
}
.battle-rules span {
  padding: 6px 11px;
  border: 1px solid rgba(214, 228, 235, .94);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 5px 14px rgba(42, 83, 101, .08);
}
kbd { border-color: #c7dae3; color: #fff; background: #17324a; box-shadow: none; }

.boxing-track {
  height: 178px;
  border: 1px solid rgba(207, 225, 233, .96);
  border-radius: 19px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 30px rgba(48, 91, 108, .1);
  backdrop-filter: blur(5px);
}

.lane-line { background: rgba(43, 174, 232, .18); }
.lane-line::after { display: none; }
.lane-line span { top: -16px; color: #6c8391; font-size: 8px; }
.lane-english { top: 35%; box-shadow: none; }
.lane-korean { top: 70%; box-shadow: none; background: rgba(240, 91, 85, .18); }
.boxing-hit-line {
  top: 7px;
  bottom: 7px;
  left: 20%;
  width: 3px;
  background: linear-gradient(180deg, transparent, #f2b82d 14%, #e08c00 50%, #f2b82d 86%, transparent);
  box-shadow: 0 0 12px rgba(244, 186, 45, .55);
}
.boxing-hit-line::before, .boxing-hit-line::after { background: #e6a714; }
.boxing-hit-line b { color: #9e6a00; }

.boxing-note {
  top: 35%;
  width: clamp(126px, 13vw, 184px);
  min-width: 0;
  height: clamp(58px, 6.5vw, 82px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
}
.boxing-note::before { display: none; }
.boxing-note.korean { top: 70%; }
.boxing-note img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scaleX(1.08); }
.boxing-note .note-copy {
  position: absolute;
  z-index: 2;
  top: 25%;
  left: 17%;
  width: 66%;
  height: 50%;
  display: grid;
  place-items: center;
  color: #17324a;
  padding-inline: 3px;
  overflow: hidden;
  font-size: clamp(11px, 1.18vw, 16px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.boxing-note.approaching { filter: brightness(1.06) drop-shadow(0 6px 8px rgba(38, 91, 111, .16)); }
.boxing-note.hit { opacity: 0 !important; transform: translate(-50%, -50%) scale(1.25); }
.boxing-note.missed { filter: grayscale(.62) brightness(.78); }
.boxing-note.missed::after { top: 3px; right: 2px; color: #fff; background: #cf4653; }

.boxing-judgement {
  left: 20%;
  color: rgba(23, 50, 74, .2);
  text-shadow: none;
}
.boxing-judgement.perfect { color: #bd7c00; }
.boxing-judgement.good { color: #168eaa; }
.boxing-judgement.guard { color: #168d6f; }
.boxing-judgement.miss { color: var(--danger); }

.fight-arena {
  height: 410px;
  margin-top: 3px;
  overflow: visible;
}
.fight-arena::after, .monster-shadow { display: none; }

.monster {
  top: 14px;
  left: 50%;
  width: clamp(220px, 23vw, 302px);
  height: 300px;
  transform: translateX(-50%);
  transition: none;
}
.monster > img { width: 100%; height: 100%; object-fit: contain; }
.monster.hit-left, .monster.hit-right, .monster.attacking, .monster.heavy-attacking { animation: none; filter: none; }

.boxing-glove {
  bottom: -2px;
  width: clamp(165px, 20vw, 245px);
  height: clamp(165px, 20vw, 245px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: 50% 78%;
}
.boxing-glove::after { display: none; }
.boxing-glove > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.glove-left { left: 5%; background: transparent; transform: rotate(0); }
.glove-right { right: 5%; background: transparent; transform: rotate(0); }
.boxing-glove > span {
  top: auto;
  bottom: 8%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  color: #fff;
  background: #17324a;
}
.boxing-glove > b {
  position: absolute;
  z-index: 2;
  width: max-content;
  transform: translate(-50%, -50%);
  color: #17324a;
  font-size: clamp(13px, 1.6vw, 21px);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.glove-left > b { top: 34.3%; left: 55.4%; }
.glove-right > b { top: 31.5%; left: 43.5%; }
.boxing-glove > small { display: none; }
.boxing-glove.punching > b, .fight-arena.guarding .boxing-glove > b { opacity: 0; }
.glove-left.punching { animation: boxing-left-punch-v2 330ms cubic-bezier(.2,.8,.2,1); }
.glove-right.punching { animation: boxing-right-punch-v2 330ms cubic-bezier(.2,.8,.2,1); }
@keyframes boxing-left-punch-v2 { 43%,58% { transform: translate(clamp(120px, 24vw, 315px), -165px) scale(.82); } }
@keyframes boxing-right-punch-v2 { 43%,58% { transform: translate(clamp(-315px, -24vw, -120px), -165px) scale(.82); } }
.fight-arena.guarding .glove-left { animation: boxing-left-guard-v2 620ms ease; }
.fight-arena.guarding .glove-right { animation: boxing-right-guard-v2 620ms ease; }
@keyframes boxing-left-guard-v2 { 35%,72% { transform: translate(clamp(105px, 27vw, 340px), -92px) scale(.82); } }
@keyframes boxing-right-guard-v2 { 35%,72% { transform: translate(clamp(-340px, -27vw, -105px), -92px) scale(.82); } }

.guard-button {
  bottom: 2px;
  width: 150px;
  height: 112px;
  display: block;
  overflow: visible;
  border: 1px solid #b9dbe4;
  border-radius: 26px;
  color: #17324a;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 24px rgba(37, 86, 105, .15);
}
.guard-button::before { display: none; }
.guard-button > kbd {
  position: absolute;
  z-index: 5;
  top: 6px;
  left: 7px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #20a9c2;
  box-shadow: 0 3px 8px rgba(23, 50, 74, .22);
  font: 1000 10px/1 inherit;
}
.guard-button .guard-art { position: absolute; z-index: 1; inset: -8px 5px 20px; width: auto; height: auto; border-radius: 0; color: inherit; background: transparent; pointer-events: none; }
.guard-button .guard-art img { position: absolute; top: 0; width: 64%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(19, 53, 70, .18)); }
.guard-art-left { left: -1%; transform: rotate(-8deg); transform-origin: 60% 80%; }
.guard-art-right { right: -1%; transform: rotate(8deg); transform-origin: 40% 80%; }
.guard-button .guard-copy { position: absolute; z-index: 3; top: auto; right: 5px; bottom: 5px; left: 5px; display: grid; width: auto; height: auto; gap: 1px; border-radius: 0; color: #17324a; background: transparent; pointer-events: none; }
.guard-button .guard-copy b { font-size: 12px; line-height: 1; text-shadow: none; }
.guard-button .guard-copy small { margin: 0; color: #ce5954; font-size: 8px; font-weight: 1000; }

.shield-effect {
  top: 112px;
  width: 210px;
  height: 170px;
  border-color: #55d6df;
  color: #17324a;
  background: rgba(208, 250, 251, .34);
  box-shadow: 0 0 28px rgba(54, 198, 211, .5), inset 0 0 36px rgba(75, 225, 255, .28);
}

.boxing-impact {
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.boxing-impact::before, .boxing-impact::after { display: none; }

.boxing-controls { margin-top: 0; }
.boxing-controls button {
  min-height: 46px;
  border: 1px solid #d5e4ea;
  border-radius: 13px;
  color: #17324a;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 20px rgba(38, 83, 101, .12);
}
.start-fight { color: #fff !important; background: linear-gradient(135deg, #ff796b, #f4585a) !important; }
.start-fight span { color: #f4585a; }
.control-fight { color: #17324a; }

.fight-countdown, .fight-result { background: rgba(247, 251, 252, .88); backdrop-filter: blur(6px); }
.fight-countdown strong { color: #e29900; text-shadow: 0 0 28px rgba(244, 186, 45, .4); }
.fight-result { color: #17324a; }
.fight-result p { color: #e05b55; }
.fight-result > strong { color: #ef625b; }
.fight-result > div span { border-color: #dce8ee; color: #6b8090; background: #f3f8fa; }
.fight-result > div b { color: #17324a; }
.fight-result button { background: linear-gradient(135deg, #ff796b, #f4585a); }

.attack-flash { background: radial-gradient(circle, transparent 25%, rgba(239, 83, 91, .45)); }

@media (max-width: 720px) {
  .boxing-app { width: min(100% - 14px, 1380px); padding-top: 0; }
  .boxing-header { min-height: 62px; }
  .boxing-brand small { display: none; }
  .battle-hud { gap: 8px; min-height: 72px; padding: 10px; }
  .boxing-stage { min-height: 660px; padding: 10px 8px 14px; background-position: center; }
  .battle-rules { gap: 4px; }
  .battle-rules span { padding: 4px 6px; font-size: 8px; }
  .boxing-track { height: 150px; }
  .boxing-note { width: 116px; height: 58px; }
  .boxing-note .note-copy { font-size: 12px; }
  .fight-arena { height: 390px; }
  .monster { top: 18px; width: 215px; height: 252px; }
  .boxing-glove { bottom: 0; width: 145px; height: 145px; }
  .glove-left { left: -3%; }
  .glove-right { right: -3%; }
  .boxing-glove > b { font-size: 13px; }
  .guard-button { width: 112px; height: 84px; }
  .guard-button > kbd { top: 4px; left: 4px; width: 21px; height: 21px; font-size: 8px; }
  .guard-art { inset: -6px 3px 17px; }
  .guard-button .guard-copy b { font-size: 10px; }
  .guard-button .guard-copy small { font-size: 6px; }
  @keyframes boxing-left-punch-v2 { 43%,58% { transform: translate(84px, -138px) scale(.72); } }
  @keyframes boxing-right-punch-v2 { 43%,58% { transform: translate(-84px, -138px) scale(.72); } }
  @keyframes boxing-left-guard-v2 { 35%,72% { transform: translate(94px, -78px) scale(.75); } }
  @keyframes boxing-right-guard-v2 { 35%,72% { transform: translate(-94px, -78px) scale(.75); } }
}

@media (max-width: 440px) {
  .boxing-brand h1 { font-size: 20px; }
  .boxing-nav a { min-height: 38px; padding-inline: 10px; font-size: 9px; }
  .battle-rules span:nth-child(3) { max-width: 112px; }
  .boxing-stage { min-height: 630px; }
  .fight-arena { height: 370px; }
  .monster { width: 190px; height: 230px; }
  .boxing-glove { width: 126px; height: 126px; }
  .boxing-glove > span { width: 24px; height: 24px; font-size: 10px; }
  .guard-button { width: 104px; height: 78px; }
  .guard-button .guard-copy b { font-size: 9px; }
  .guard-button .guard-copy small { font-size: 6px; }
  .fight-result > div { gap: 5px; }
  .fight-result > div span { min-width: 76px; padding: 8px 4px; }
}