#full-area.dragon-war {
  width: 100%;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  background: #1a1030;
  user-select: none;
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  color: #fff7e6;
}
#full-area.dragon-war :where(.dw-hud, .dw-hud *, .dw-banner, .dw-banner *, section, section *) {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}
#full-area.dragon-war #game-area {
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1) !important;
}
#full-area.dragon-war #gameContainer {
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #6cc4ff;
}
#full-area.dragon-war #dw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
}
#full-area.dragon-war canvas {
  image-rendering: auto;
}
#full-area.dragon-war .dw-hurt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 40, 40, 0) 55%, rgba(255, 30, 20, 0.55) 100%);
}
#full-area.dragon-war button {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  border: 0;
  background: none;
  color: inherit;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
#full-area.dragon-war .dw-btn {
  --dw-face: linear-gradient(180deg, #fff2a8 0 30%, #ffd23f 30% 72%, #e9a800 72%);
  position: relative;
  isolation: isolate;
  background: #1b1030;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  color: #1b1030;
  padding: 11px 40px 15px;
  transition: transform 0.12s ease, filter 0.12s ease;
  white-space: nowrap;
}
#full-area.dragon-war .dw-btn::before {
  content: "";
  position: absolute;
  inset: 3px 3px 7px;
  z-index: -1;
  background: var(--dw-face);
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
}
#full-area.dragon-war .dw-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}
#full-area.dragon-war .dw-btn:active {
  transform: translateY(3px);
}
#full-area.dragon-war .dw-btn-play {
  --dw-face: linear-gradient(180deg, #ffd98a 0 30%, #ff7a1a 30% 70%, #d8431a 70%);
  color: #fff;
  -webkit-text-stroke: 4px #1b1030;
  paint-order: stroke fill;
}
#full-area.dragon-war .dw-btn-purple {
  --dw-face: linear-gradient(180deg, #c4adff 0 30%, #8a5cff 30% 70%, #5d32d6 70%);
  color: #fff;
  -webkit-text-stroke: 4px #1b1030;
  paint-order: stroke fill;
}
#full-area.dragon-war .dw-hud, #full-area.dragon-war section, #full-area.dragon-war .dw-banner {
  position: absolute;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
#full-area.dragon-war .dw-hud {
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
#full-area.dragon-war section {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#full-area.dragon-war[data-state=play] .dw-hud, #full-area.dragon-war[data-state=duel] .dw-hud, #full-area.dragon-war[data-state=duel-hold] .dw-hud {
  opacity: 1;
}
#full-area.dragon-war[data-state=menu] .dw-menu, #full-area.dragon-war[data-state=over] .dw-over {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#full-area.dragon-war .dw-hud {
  filter: drop-shadow(0 4px 0 rgba(12, 6, 20, 0.45));
}
#full-area.dragon-war .dw-panel-me {
  position: absolute;
  left: 16px;
  top: 14px;
  display: flex;
  align-items: center;
}
#full-area.dragon-war .dw-crest {
  position: absolute;
  isolation: isolate;
  background: #1b1030;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  position: relative;
  z-index: 1;
  width: 96px;
  height: 92px;
  flex: none;
}
#full-area.dragon-war .dw-crest::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 38%, rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, #4d475c, #2c2838 60%, #1b1823);
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
}
#full-area.dragon-war .dw-crest::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 4px;
  z-index: -1;
  background: linear-gradient(90deg, #ffe066, #ff7a1a 55%, #ff3b4e);
}
#full-area.dragon-war .dw-crest::before {
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.12) 0 3px, transparent 3px 11px), radial-gradient(circle at 50% 38%, var(--g, #ffd27a) 0%, var(--c, #e8322a) 70%);
}
#full-area.dragon-war .dw-crest::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 22px;
  bottom: 4px;
  height: 5px;
  background: linear-gradient(90deg, #ffe066, #ff7a1a 55%, #ff3b4e);
}
#full-area.dragon-war .dw-face {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  transform: translate(-50%, -52%);
}
#full-area.dragon-war .dw-bars {
  width: 318px;
  margin-left: -10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#full-area.dragon-war .dw-nameplate {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding-left: 26px;
}
#full-area.dragon-war .dw-name {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  -webkit-text-stroke: 4px #1b1030;
  paint-order: stroke fill;
  color: var(--g, #ffd23f);
}
#full-area.dragon-war .dw-hp, #full-area.dragon-war .dw-energy {
  position: relative;
  background: #1b1030;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
#full-area.dragon-war .dw-hp .dw-track, #full-area.dragon-war .dw-energy .dw-track {
  position: absolute;
  inset: 3px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0 3px, transparent 3px), #1a1320;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
#full-area.dragon-war .dw-hp .dw-track::after, #full-area.dragon-war .dw-energy .dw-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  right: -12px;
  transform: skewX(-36deg);
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(18, 10, 22, 0.7) calc(10% - 2px) 10%);
  pointer-events: none;
}
#full-area.dragon-war .dw-hp i, #full-area.dragon-war .dw-energy i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}
#full-area.dragon-war .dw-hp b, #full-area.dragon-war .dw-energy b {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  -webkit-text-stroke: 4px #1b1030;
  paint-order: stroke fill;
  color: #fff;
  z-index: 2;
}
#full-area.dragon-war .dw-hp .dw-icon, #full-area.dragon-war .dw-energy .dw-icon {
  position: absolute;
  top: 50%;
  z-index: 2;
  fill: #fff6e0;
  stroke: #1b1030;
  stroke-width: 2.6px;
  stroke-linejoin: round;
  paint-order: stroke;
}
#full-area.dragon-war .dw-hp {
  height: 30px;
  margin-left: 14px;
}
#full-area.dragon-war .dw-hp b {
  right: 24px;
}
#full-area.dragon-war .dw-hp .dw-icon {
  left: 16px;
  width: 22px;
  height: 20px;
  margin-top: -10px;
}
#full-area.dragon-war .dw-hp-lag {
  background: #fff1c2;
  transition: width 0.05s linear;
}
#full-area.dragon-war .dw-hp-fill {
  background: linear-gradient(180deg, #ff8f86 0 26%, #ef2d42 26% 68%, #a8132e 68%);
}
#full-area.dragon-war .dw-hp.is-low .dw-hp-fill {
  animation: dwLowHp 0.6s ease-in-out infinite alternate;
}
#full-area.dragon-war .dw-energy {
  width: 280px;
  height: 22px;
  margin-left: 8px;
}
#full-area.dragon-war .dw-energy b {
  left: 40px;
  font-size: 12px;
  -webkit-text-stroke-width: 3px;
}
#full-area.dragon-war .dw-energy .dw-icon {
  left: 18px;
  width: 13px;
  height: 17px;
  margin-top: -9px;
}
#full-area.dragon-war .dw-energy-fill {
  background: linear-gradient(180deg, #b5f7ff 0 28%, #36d6ff 28% 68%, #168ac4 68%);
  transition: width 0.08s linear;
}
#full-area.dragon-war .dw-energy[data-e=burn] .dw-energy-fill {
  background: linear-gradient(180deg, #ffe39a 0 28%, #ff7a1a 28% 68%, #c9461a 68%);
}
#full-area.dragon-war .dw-energy[data-e=out] .dw-energy-fill {
  background: linear-gradient(180deg, #ff9aae 0 28%, #ff3b4e 28% 68%, #a01530 68%);
}
#full-area.dragon-war .dw-energy[data-e=out] b {
  color: #ffd0d8;
  animation: dwBlink 0.5s ease-in-out infinite alternate;
}
#full-area.dragon-war .dw-energy[data-e=surge] .dw-energy-fill {
  background: linear-gradient(90deg, #fff36a, #ffffff, #fff36a);
  background-size: 200% 100%;
  animation: dwShine 0.6s linear infinite;
}
#full-area.dragon-war .dw-buffs {
  display: flex;
  gap: 6px;
}
#full-area.dragon-war .dw-buff {
  display: none;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  line-height: 1;
  padding: 4px 12px 3px;
  color: #fff;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  box-shadow: inset 0 0 0 2px #1b1030;
}
#full-area.dragon-war .dw-buff-rage {
  background: linear-gradient(180deg, #d58bff 0 35%, #a33cf0 35%);
}
#full-area.dragon-war .dw-buff-surge {
  background: linear-gradient(180deg, #fff59a 0 35%, #f0b400 35%);
  color: #1b1030;
}
#full-area.dragon-war .dw-buffs[data-buffs~=rage] .dw-buff-rage,
#full-area.dragon-war .dw-buffs[data-buffs~=surge] .dw-buff-surge {
  display: block;
  animation: dwPulse 0.7s ease-in-out infinite;
}
#full-area.dragon-war .dw-voice {
  position: absolute;
  isolation: isolate;
  background: #1b1030;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  left: 20px;
  bottom: 84px;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 26px 12px 22px;
  pointer-events: auto;
  cursor: default;
}
#full-area.dragon-war .dw-voice::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 38%, rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, #4d475c, #2c2838 60%, #1b1823);
  clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
}
#full-area.dragon-war .dw-voice::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 4px;
  z-index: -1;
  background: linear-gradient(90deg, #ffe066, #ff7a1a 55%, #ff3b4e);
}
#full-area.dragon-war .dw-voice b {
  width: 34px;
  flex: none;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  line-height: 1;
  -webkit-text-stroke: 3px #1b1030;
  paint-order: stroke fill;
  color: #fff;
  text-align: right;
}
#full-area.dragon-war .dw-voice .dw-sens {
  min-width: 0;
}
#full-area.dragon-war .dw-voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
#full-area.dragon-war .dw-voice-label {
  width: 46px;
  flex: none;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  line-height: 1;
  -webkit-text-stroke: 3px #1b1030;
  paint-order: stroke fill;
  color: #ffd23f;
}
#full-area.dragon-war .dw-voice-tube {
  position: relative;
  flex: 1;
  height: 18px;
  background: #1b1030;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
#full-area.dragon-war .dw-voice-tube .dw-track {
  position: absolute;
  inset: 2px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, #2d2638 0 7px, #1a1320 7px 10px);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
#full-area.dragon-war .dw-voice-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #8d9bbf;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 10px);
  mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 10px);
  transition: width 0.05s linear;
}
#full-area.dragon-war .dw-voice.is-fire .dw-voice-fill {
  background: linear-gradient(90deg, #ffe066, #ff7a1a 55%, #ff3b4e);
  background-size: 230px 100%;
}
#full-area.dragon-war .dw-voice-gate {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58%;
  width: 3px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px #1b1030;
  transition: left 0.2s ease;
}
#full-area.dragon-war .dw-voice.is-inferno .dw-voice-tube {
  background: #ffb02e;
}
#full-area.dragon-war .dw-map {
  position: absolute;
  isolation: isolate;
  background: #1b1030;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  right: 20px;
  bottom: 84px;
  padding: 9px 24px 13px;
}
#full-area.dragon-war .dw-map::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 38%, rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, #4d475c, #2c2838 60%, #1b1823);
  clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
}
#full-area.dragon-war .dw-map::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 4px;
  z-index: -1;
  background: linear-gradient(90deg, #ffe066, #ff7a1a 55%, #ff3b4e);
}
#full-area.dragon-war .dw-map canvas {
  display: block;
  width: 220px;
  height: 94px;
}
#full-area.dragon-war .dw-score {
  position: absolute;
  isolation: isolate;
  background: #1b1030;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  right: 70px;
  top: 14px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 34px 4px 28px;
}
#full-area.dragon-war .dw-score::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 38%, rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, #4d475c, #2c2838 60%, #1b1823);
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
}
#full-area.dragon-war .dw-score::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 3px;
  height: 4px;
  z-index: -1;
  background: linear-gradient(90deg, #ffe066, #ff7a1a 55%, #ff3b4e);
}
#full-area.dragon-war .dw-score .dw-icon-skull {
  width: 36px;
  height: 32px;
  fill: #f6e7c8;
  stroke: #1b1030;
  stroke-width: 2.4px;
  stroke-linejoin: round;
  paint-order: stroke;
}
#full-area.dragon-war .dw-score span {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  -webkit-text-stroke: 3px #1b1030;
  paint-order: stroke fill;
  color: #ffd23f;
  align-self: flex-end;
  margin-bottom: 14px;
}
#full-area.dragon-war .dw-score b {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  -webkit-text-stroke: 6px #1b1030;
  paint-order: stroke fill;
  color: #fff;
  min-width: 30px;
  text-align: center;
}
#full-area.dragon-war .dw-score.is-bump b {
  animation: dwBump 0.45s ease;
}
#full-area.dragon-war .dw-banner {
  left: 50%;
  top: 200px;
  transform: translate(-50%, 0) scale(0.6);
  opacity: 0;
  text-align: center;
  pointer-events: none;
}
#full-area.dragon-war .dw-banner b {
  display: block;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 92px;
  line-height: 1;
  color: #ffd23f;
  -webkit-text-stroke: 4px #1b1030;
  paint-order: stroke fill;
  text-shadow: 0 7px 0 #1b1030;
}
#full-area.dragon-war .dw-banner span {
  display: block;
  margin-top: 6px;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-size: 30px;
  color: #fff;
  -webkit-text-stroke: 3px #1b1030;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #1b1030;
}
#full-area.dragon-war .dw-banner.is-on {
  animation: dwBanner 1.9s ease forwards;
}
#full-area.dragon-war .dw-menu {
  inset: 0;
  background: linear-gradient(90deg, rgba(27, 16, 48, 0.55) 0%, rgba(27, 16, 48, 0.2) 40%, rgba(27, 16, 48, 0) 55%);
}
#full-area.dragon-war .dw-menu-left {
  position: absolute;
  left: 46px;
  top: 26px;
  width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#full-area.dragon-war .dw-logo {
  width: 520px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 0 rgba(27, 16, 48, 0.35));
  animation: dwFloat 4s ease-in-out infinite;
}
#full-area.dragon-war .dw-menu-left .dw-btn-play {
  margin-top: 22px;
  font-size: 46px;
  padding: 12px 74px 17px;
  animation: dwPulse 1.6s ease-in-out infinite;
}
#full-area.dragon-war .dw-pick {
  position: absolute;
  isolation: isolate;
  background: #1b1030;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  position: relative;
  margin-top: 14px;
  padding: 16px 34px 18px;
}
#full-area.dragon-war .dw-pick::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 38%, rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, #4d475c, #2c2838 60%, #1b1823);
  clip-path: polygon(17px 0, 100% 0, calc(100% - 17px) 100%, 0 100%);
}
#full-area.dragon-war .dw-pick::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 3px;
  height: 4px;
  z-index: -1;
  background: linear-gradient(90deg, #ffe066, #ff7a1a 55%, #ff3b4e);
}
#full-area.dragon-war .dw-pick-row {
  display: flex;
  gap: 6px;
}
#full-area.dragon-war .dw-pick-btn {
  position: relative;
  isolation: isolate;
  width: 92px;
  height: 76px;
  background: #1b1030;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: transform 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
#full-area.dragon-war .dw-pick-btn::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, #5b5470, #3a3449);
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
#full-area.dragon-war .dw-pick-btn canvas {
  width: 88px;
  height: 64px;
  pointer-events: none;
}
#full-area.dragon-war .dw-pick-btn:hover {
  transform: translateY(-3px);
}
#full-area.dragon-war .dw-pick-btn.is-on {
  background: var(--c);
  transform: translateY(-3px) scale(1.06);
}
#full-area.dragon-war .dw-pick-btn.is-on::before {
  inset: 4px;
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0 3px, transparent 3px 11px), radial-gradient(circle at 50% 42%, #fff4c4, #ffb43a 80%);
}
#full-area.dragon-war .dw-guide {
  position: absolute;
  isolation: isolate;
  background: #1b1030;
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  right: 44px;
  top: 70px;
  width: 486px;
  padding: 18px 40px 24px;
}
#full-area.dragon-war .dw-guide::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 38%, rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, #4d475c, #2c2838 60%, #1b1823);
  clip-path: polygon(19px 0, 100% 0, calc(100% - 19px) 100%, 0 100%);
}
#full-area.dragon-war .dw-guide::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 4px;
  height: 4px;
  z-index: -1;
  background: linear-gradient(90deg, #ffe066, #ff7a1a 55%, #ff3b4e);
}
#full-area.dragon-war .dw-guide::before {
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 170, 80, 0.16), rgba(255, 170, 80, 0) 70%), linear-gradient(180deg, #2f2940, #1f1a2b);
}
#full-area.dragon-war .dw-guide-title {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 34px;
  line-height: 1;
  -webkit-text-stroke: 5px #1b1030;
  paint-order: stroke fill;
  color: #ffd23f;
  text-align: center;
  text-shadow: 0 4px 0 #1b1030;
  margin-bottom: 14px;
}
#full-area.dragon-war .dw-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
#full-area.dragon-war .dw-rule + .dw-rule {
  margin-top: 8px;
}
#full-area.dragon-war .dw-rule-art {
  flex: none;
  width: 68px;
  height: 62px;
}
#full-area.dragon-war .dw-rule-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 0 rgba(10, 4, 24, 0.45));
}
#full-area.dragon-war .dw-rule-text {
  min-width: 0;
}
#full-area.dragon-war .dw-rule-text b {
  display: block;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 25px;
  line-height: 1;
  -webkit-text-stroke: 4px #1b1030;
  paint-order: stroke fill;
  color: #fff;
  margin-bottom: 4px;
}
#full-area.dragon-war .dw-rule-text span {
  display: block;
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.22;
  color: #f1eaff;
}
#full-area.dragon-war .dw-art-mouse + .dw-rule-text b {
  color: #a6d6ff;
}
#full-area.dragon-war .dw-art-shout + .dw-rule-text b {
  color: #ffb36a;
}
#full-area.dragon-war .dw-art-energy + .dw-rule-text b {
  color: #8ff0ff;
}
#full-area.dragon-war .dw-mic {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 0 6px;
}
#full-area.dragon-war .dw-mic span, #full-area.dragon-war .dw-mic b {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  -webkit-text-stroke: 4px #1b1030;
  paint-order: stroke fill;
  color: #fff;
}
#full-area.dragon-war .dw-mic span {
  color: #ffd23f;
}
#full-area.dragon-war .dw-mic b {
  width: 48px;
  text-align: right;
}
#full-area.dragon-war .dw-sens {
  flex: 1;
  height: 22px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
#full-area.dragon-war .dw-sens::-webkit-slider-runnable-track {
  height: 10px;
  border: 2px solid #1b1030;
  background: linear-gradient(90deg, #ff7a1a 0 var(--p, 25%), #1a1320 var(--p, 25%));
  transform: skewX(-24deg);
}
#full-area.dragon-war .dw-sens::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 22px;
  margin-top: -8px;
  border: 2px solid #1b1030;
  background: linear-gradient(180deg, #fff2c4 0 34%, #ffd23f 34% 70%, #e0a000 70%);
}
#full-area.dragon-war .dw-sens::-moz-range-track {
  height: 6px;
  border: 2px solid #1b1030;
  background: #1a1320;
}
#full-area.dragon-war .dw-sens::-moz-range-progress {
  height: 6px;
  background: #ff7a1a;
}
#full-area.dragon-war .dw-sens::-moz-range-thumb {
  width: 10px;
  height: 18px;
  border: 2px solid #1b1030;
  border-radius: 0;
  background: #ffd23f;
}
#full-area.dragon-war .dw-over {
  inset: 0;
  background: rgba(18, 8, 36, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 70px;
}
#full-area.dragon-war .dw-over-card {
  position: relative;
  top: 5px;
  width: 540px;
  text-align: center;
  transform: scale(0.85);
  transition: transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#full-area.dragon-war .dw-over-plate {
  position: absolute;
  isolation: isolate;
  background: #1b1030;
  clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
  position: relative;
  padding: 10px 44px 30px;
}
#full-area.dragon-war .dw-over-plate::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 38%, rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, #4d475c, #2c2838 60%, #1b1823);
  clip-path: polygon(23px 0, 100% 0, calc(100% - 23px) 100%, 0 100%);
}
#full-area.dragon-war .dw-over-plate::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 4px;
  height: 4px;
  z-index: -1;
  background: linear-gradient(90deg, #ffe066, #ff7a1a 55%, #ff3b4e);
}
#full-area.dragon-war[data-state=over] .dw-over-card {
  transform: scale(1);
}
#full-area.dragon-war .dw-over-face {
  position: relative;
  z-index: 1;
  width: 190px;
  height: 139px;
  margin: -70px auto -62px;
  display: block;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.3));
}
#full-area.dragon-war .dw-over-title {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 52px;
  line-height: 1;
  -webkit-text-stroke: 5px #1b1030;
  paint-order: stroke fill;
  color: #ffd23f;
  text-shadow: 0 5px 0 #1b1030;
  margin: 70px 0 14px;
}
#full-area.dragon-war .dw-over.is-best .dw-over-title {
  animation: dwPulse 0.9s ease-in-out infinite;
}
#full-area.dragon-war .dw-over-stats {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}
#full-area.dragon-war .dw-stat {
  flex: 1;
  padding: 8px 6px 6px;
  background: rgba(10, 4, 24, 0.5);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow: inset 0 0 0 3px #1b1030;
}
#full-area.dragon-war .dw-stat span {
  display: block;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 14px;
  line-height: 1;
  color: #d9cfe8;
}
#full-area.dragon-war .dw-stat b {
  display: block;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  -webkit-text-stroke: 4px #1b1030;
  paint-order: stroke fill;
  line-height: 1.1;
  color: #fff;
  transform: translateX(-3px);
}
#full-area.dragon-war .dw-stat-main {
  flex: 1.5;
}
#full-area.dragon-war .dw-stat-main b {
  font-size: 48px;
  color: #ffd23f;
  transform: translateX(-4px);
}
#full-area.dragon-war .dw-over-actions {
  display: flex;
  gap: 12px;
}
#full-area.dragon-war .dw-over-actions .dw-btn {
  flex: 1;
  font-size: 26px;
  padding: 11px 10px 15px;
}

@keyframes dwPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes dwLowHp {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.45) saturate(1.2);
  }
}
@keyframes dwBlink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.35;
  }
}
@keyframes dwShine {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes dwBump {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.5);
    color: #ffe14d;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dwFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}
@keyframes dwBanner {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.1);
  }
  22% {
    transform: translate(-50%, 0) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -24px) scale(1);
  }
}