/* ====== 던파모바일 연마 시뮬레이터 ====== */

.wrap{max-width:1000px;margin:0 auto;padding:22px 16px 80px;position:relative;z-index:1}

/* CARD */
.card{
  position:relative;
  background:linear-gradient(180deg, rgba(50,38,24,0.55) 0%, rgba(28,20,12,0.7) 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 20px;margin-bottom:16px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,210,74,0.08) inset, 0 12px 40px rgba(0,0,0,0.5);
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,210,74,0.10) 0%, transparent 30%, transparent 70%, rgba(196,118,40,0.10) 100%);
}
.card h2{
  margin:0 0 14px;font-size:13px;font-weight:800;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:8px;
  position:relative;
}
.card h2::before{
  content:'';display:inline-block;width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg, var(--gold), var(--purple));
  box-shadow:0 0 8px rgba(255,210,74,0.6);
}
.card h2 .chip{
  margin-left:auto;font-size:10px;color:var(--muted);
  padding:2px 8px;border:1px solid var(--border);border-radius:999px;
  letter-spacing:1px;
}

.sub-h{
  font-size:10px;color:var(--gold);font-weight:800;letter-spacing:2px;
  text-transform:uppercase;margin:4px 0 8px;
  display:flex;align-items:center;gap:8px;
}
.sub-h::before,.sub-h::after{
  content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}

.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.field input,.field select{
  width:100%;height:40px;
  border:1px solid var(--border);border-radius:10px;
  padding:0 12px;font-size:13px;font-weight:600;
  background:rgba(18,12,6,0.6);color:var(--text);
  font-family:inherit;font-variant-numeric:tabular-nums;
  transition:border-color .15s, box-shadow .15s, background .15s;
  box-sizing:border-box;
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--gold);
  background:rgba(18,12,6,0.85);
  box-shadow:0 0 0 3px rgba(255,210,74,0.18);
}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:34px;
}
.field select option{background:#1a140e;color:var(--text)}

.checkrow{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:rgba(18,12,6,0.6);
  border:1px solid var(--border);border-radius:10px;
  cursor:pointer;user-select:none;
  transition:all .15s;
  height:40px;
  box-sizing:border-box;
}
.checkrow:hover{border-color:var(--border-bright);background:rgba(18,12,6,0.85)}
.checkrow input{accent-color:var(--gold);width:16px;height:16px;cursor:pointer;flex-shrink:0}
.checkrow span.main{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.checkrow .hint{
  color:var(--gold);font-size:9px;font-weight:800;
  padding:2px 5px;background:rgba(255,210,74,0.12);border-radius:5px;
  letter-spacing:0.5px;text-transform:uppercase;flex-shrink:0;
}

/* ============= STAGE ZONE ============= */
.stage-zone{
  position:relative;
  height:360px;
  border-radius:18px;
  background:
    radial-gradient(ellipse 70% 65% at 50% 50%, rgba(255,210,74,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(196,118,40,0.28) 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, #2a1f12 0%, #0d0905 70%);
  border:1px solid var(--border-bright);
  overflow:hidden;
  margin:14px 0 16px;
  isolation:isolate;
  box-shadow:inset 0 0 80px rgba(0,0,0,0.6), inset 0 0 1px rgba(255,210,74,0.3), 0 0 30px rgba(196,118,40,0.18);
}
.stage-zone::before,
.stage-zone::after{
  content:'';position:absolute;width:80px;height:80px;border-radius:50%;
  pointer-events:none;z-index:1;
  background:radial-gradient(circle, rgba(255,210,74,0.18) 0%, transparent 60%);
}
.stage-zone::before{top:-30px;left:-30px}
.stage-zone::after{bottom:-30px;right:-30px;background:radial-gradient(circle, rgba(196,118,40,0.2) 0%, transparent 60%)}

.magic-circle{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:280px;height:280px;border-radius:50%;
  pointer-events:none;z-index:2;opacity:0.35;
  background:conic-gradient(from 0deg, rgba(255,210,74,0.0), rgba(255,210,74,0.4), rgba(165,96,255,0.4), rgba(255,210,74,0.4), rgba(255,210,74,0.0));
  mask:radial-gradient(circle, transparent 38%, #000 40%, #000 48%, transparent 50%);
  -webkit-mask:radial-gradient(circle, transparent 38%, #000 40%, #000 48%, transparent 50%);
  animation:rot 12s linear infinite;
}
@keyframes rot{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  100%{transform:translate(-50%,-50%) rotate(360deg)}
}
.magic-circle.inner{
  width:200px;height:200px;opacity:0.45;
  animation:rot 8s linear infinite reverse;
  mask:radial-gradient(circle, transparent 44%, #000 46%, #000 49%, transparent 51%);
  -webkit-mask:radial-gradient(circle, transparent 44%, #000 46%, #000 49%, transparent 51%);
}

/* EQUIPMENT CARD */
.equip-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:210px;height:250px;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(120,75,20,0.5) 0%, transparent 65%),
    linear-gradient(160deg, #2a1c0a 0%, #150a02 100%);
  border:2px solid #d4ab3c;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 8px 30px rgba(0,0,0,0.6),
    0 0 40px rgba(255,210,74,0.35),
    inset 0 1px 0 rgba(255,210,74,0.4),
    inset 0 -2px 0 rgba(60,30,0,0.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:5;transition:transform .25s;
  padding:14px 10px 10px;
}
.equip-card::before{
  content:'';position:absolute;inset:5px;border-radius:13px;
  border:1px solid rgba(255,210,74,0.25);
  pointer-events:none;
}
.equip-icon-wrap{
  width:130px;height:130px;
  margin-bottom:4px;
  filter:drop-shadow(0 0 12px rgba(255,210,74,0.5));
}
.equip-icon{width:100%;height:100%;display:block}
.equip-icon.hidden{display:none}
.equip-card .stage-num{
  font-size:54px;font-weight:900;line-height:1;
  background:linear-gradient(180deg,#fff48a 0%,#ffd24a 50%,#a8761a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:2px 0;
  text-shadow:0 0 18px rgba(255,210,74,0.4);
  transition:transform .3s;
  font-variant-numeric:tabular-nums;
}
.equip-card .stage-suffix{
  font-size:10px;color:#ffd24a;font-weight:800;letter-spacing:3px;
  text-shadow:0 0 8px rgba(255,210,74,0.5);
}

.tier-marks{
  position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  display:flex;gap:3px;
}
.tier-marks i{
  display:block;width:14px;height:4px;border-radius:2px;
  background:rgba(255,255,255,0.15);
  transition:all .3s;
}
.tier-marks i.on{
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  box-shadow:0 0 8px var(--gold);
}
.tier-marks i.legend{
  background:linear-gradient(90deg,var(--gold),var(--purple));
  box-shadow:0 0 12px var(--purple);
}

/* glow ring + charging */
.ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:240px;height:240px;border-radius:50%;
  border:2px solid rgba(255,210,74,0);
  z-index:4;pointer-events:none;
}
.stage-zone.charging .ring{animation:ringPulse 0.8s ease-out infinite}
@keyframes ringPulse{
  0%{transform:translate(-50%,-50%) scale(0.8);border-color:rgba(255,210,74,0.8);opacity:1;box-shadow:0 0 30px rgba(255,210,74,0.5)}
  100%{transform:translate(-50%,-50%) scale(1.35);border-color:rgba(255,210,74,0);opacity:0;box-shadow:0 0 0 rgba(255,210,74,0)}
}
.stage-zone.charging .equip-card{
  animation:eqShake 0.18s linear infinite;
  box-shadow:0 0 0 1px rgba(0,0,0,0.4),0 8px 30px rgba(0,0,0,0.5),0 0 60px rgba(255,210,74,0.6),inset 0 2px 0 rgba(255,255,255,0.6);
}
@keyframes eqShake{
  0%,100%{transform:translate(-50%,-50%) rotate(-0.7deg)}
  50%{transform:translate(-50%,-50%) rotate(0.7deg)}
}

.charge-particle{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#fff6c0 0%,#ffd24a 60%,transparent 100%);
  z-index:3;pointer-events:none;
  box-shadow:0 0 12px #ffd24a;
}
.charge-text{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  font-size:11px;font-weight:800;color:var(--gold);
  letter-spacing:4px;opacity:0;z-index:10;text-transform:uppercase;
  text-shadow:0 0 8px rgba(255,210,74,0.6);
}
.stage-zone.charging .charge-text{animation:chargeTxt 0.6s ease-out forwards}
@keyframes chargeTxt{
  0%{opacity:0;transform:translateX(-50%) translateY(8px)}
  100%{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* RESULT TEXT */
.result-text{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(0.5);
  font-weight:900;letter-spacing:-2px;
  z-index:25;pointer-events:none;opacity:0;
  text-shadow:0 4px 30px rgba(0,0,0,0.6);
  white-space:nowrap;
}
.result-text.show{animation:resultPop 1.1s cubic-bezier(.15,1.3,.4,1) forwards}
@keyframes resultPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.3) rotate(-6deg)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(2deg)}
  35%{transform:translate(-50%,-50%) scale(1.05) rotate(0deg)}
  65%{opacity:1;transform:translate(-50%,-65%) scale(1.0)}
  100%{opacity:0;transform:translate(-50%,-95%) scale(0.85)}
}
.result-text.success{font-size:64px;color:var(--gold-bright);text-shadow:0 0 24px var(--gold),0 0 48px var(--gold-deep),0 4px 30px rgba(0,0,0,0.6)}
.result-text.legendary{
  font-size:72px;
  background:linear-gradient(135deg, #ffe98a 0%, #ffd24a 25%, #ff9e3d 50%, #a560ff 80%, #ffd24a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px #ffd24a) drop-shadow(0 0 40px #a560ff);
}
.result-text.maintain{font-size:54px;color:#c8c4d8;opacity:0.85}
.result-text.fail{font-size:58px;color:var(--orange);text-shadow:0 0 22px #ff7a1e,0 4px 30px rgba(0,0,0,0.6)}
.result-text.destroy{font-size:72px;color:#ff3050;text-shadow:0 0 24px #ff3050,0 0 48px #b71c1c,0 4px 30px rgba(0,0,0,0.6)}

/* SHOCKWAVE / FLASH POP / TWINKLE */
.shockwave{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
  width:120px;height:120px;border-radius:50%;
  border:5px solid rgba(255,210,74,0.95);
  z-index:7;pointer-events:none;opacity:0;
  box-shadow:0 0 30px rgba(255,210,74,0.7), inset 0 0 18px rgba(255,210,74,0.5);
  mix-blend-mode:screen;
}
.shockwave.go{animation:shockwaveGo 1s cubic-bezier(.1,.5,.3,1) forwards}
@keyframes shockwaveGo{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0;border-width:6px}
  8%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(4.2);opacity:0;border-width:0.5px}
}
.shockwave.legend{border-color:rgba(200,144,255,0.95);box-shadow:0 0 36px rgba(200,144,255,0.7),inset 0 0 18px rgba(200,144,255,0.5)}

.flash-pop{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.3);
  width:340px;height:340px;border-radius:50%;
  z-index:24;pointer-events:none;opacity:0;
  mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,250,180,0.95) 12%, rgba(255,210,74,0.7) 28%, rgba(255,210,74,0.25) 50%, transparent 75%);
}
.flash-pop.go{animation:flashPop 0.55s cubic-bezier(.1,.7,.4,1) forwards}
@keyframes flashPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.2)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}
}
.flash-pop.legend{
  background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,250,180,0.95) 10%, rgba(255,210,74,0.8) 25%, rgba(200,144,255,0.6) 45%, rgba(140,80,220,0.2) 65%, transparent 80%);
}

.twinkle{
  position:absolute;z-index:9;pointer-events:none;
  opacity:0;transform:scale(0.3) rotate(0deg);
  background:
    radial-gradient(ellipse 50% 8% at 50% 50%, #fffbe0 0%, transparent 75%),
    radial-gradient(ellipse 8% 50% at 50% 50%, #fffbe0 0%, transparent 75%);
  filter:drop-shadow(0 0 6px #ffd24a) drop-shadow(0 0 12px #ffd24a);
  mix-blend-mode:screen;
}
.twinkle.purple{filter:drop-shadow(0 0 6px #c890ff) drop-shadow(0 0 14px #a560ff)}
.twinkle.rainbow{filter:drop-shadow(0 0 6px #fff48a) drop-shadow(0 0 12px #c890ff) drop-shadow(0 0 20px #ffd24a)}
.twinkle.cyan{filter:drop-shadow(0 0 6px #b0f7ff) drop-shadow(0 0 14px #5eead4)}

/* PRISM RING — 영롱한 무지개 회전 링 */
.prism-ring{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(0.3) rotate(0deg);
  width:300px;height:300px;border-radius:50%;
  z-index:7;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,
    rgba(255,235,90,0) 0deg,
    rgba(255,235,90,0.85) 30deg,
    rgba(255,170,80,0.7) 70deg,
    rgba(255,120,200,0.7) 130deg,
    rgba(200,144,255,0.85) 180deg,
    rgba(150,200,255,0.65) 230deg,
    rgba(170,255,220,0.6) 280deg,
    rgba(255,235,90,0.8) 330deg,
    rgba(255,235,90,0) 360deg);
  mask:radial-gradient(circle, transparent 36%, #000 42%, #000 52%, transparent 58%);
  -webkit-mask:radial-gradient(circle, transparent 36%, #000 42%, #000 52%, transparent 58%);
  filter:blur(3px);
  mix-blend-mode:screen;
}
.prism-ring.go{animation:prismGo 1.5s cubic-bezier(.15,.6,.3,1) forwards}
@keyframes prismGo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.3) rotate(0deg)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(70deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.85) rotate(320deg)}
}

/* GLOW ORB — 천천히 퍼지는 영롱한 광원 */
.glow-orb{
  position:absolute;z-index:8;pointer-events:none;
  border-radius:50%;
  opacity:0;
  filter:blur(2px);
  mix-blend-mode:screen;
}
.glow-orb.go{animation:glowOrbGo 1.7s ease-out forwards}
@keyframes glowOrbGo{
  0%{opacity:0;transform:scale(0.25)}
  20%{opacity:1;transform:scale(1)}
  60%{opacity:0.55;transform:scale(1.4)}
  100%{opacity:0;transform:scale(2.3)}
}

/* GLEAM — 짧고 강한 다이아몬드 글린트 */
.gleam{
  position:absolute;z-index:10;pointer-events:none;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #fff8a0 40%, transparent 80%);
  box-shadow:0 0 14px #fff8a0, 0 0 28px #ffd24a;
  opacity:0;
}
.gleam.go{animation:gleamGo 0.7s ease-out forwards}
@keyframes gleamGo{
  0%{opacity:0;transform:scale(0)}
  30%{opacity:1;transform:scale(1.6)}
  100%{opacity:0;transform:scale(0.5)}
}
.gleam.purple{
  background:radial-gradient(circle, #fff 0%, #e0c0ff 40%, transparent 80%);
  box-shadow:0 0 14px #e0c0ff, 0 0 28px #a560ff;
}
.twinkle.go{animation:twinkleGo 0.85s ease-out forwards}
@keyframes twinkleGo{
  0%{opacity:0;transform:scale(0.2) rotate(0deg)}
  35%{opacity:1;transform:scale(1.1) rotate(45deg)}
  65%{opacity:1;transform:scale(1) rotate(60deg)}
  100%{opacity:0;transform:scale(0.5) rotate(90deg)}
}

.equip-card.success-glow{animation:successCardGlow 0.85s ease-out}
@keyframes successCardGlow{
  0%,100%{filter:none}
  25%{filter:drop-shadow(0 0 20px #ffd24a) drop-shadow(0 0 45px #fff48a) brightness(1.4)}
}
.equip-card.legend-glow{animation:legendCardGlow 1.1s ease-out}
@keyframes legendCardGlow{
  0%,100%{filter:none}
  20%{filter:drop-shadow(0 0 22px #ffd24a) drop-shadow(0 0 50px #fff48a) brightness(1.5)}
  60%{filter:drop-shadow(0 0 22px #c890ff) drop-shadow(0 0 50px #a560ff) brightness(1.3)}
}

.burst{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
  width:300px;height:300px;border-radius:50%;
  z-index:6;pointer-events:none;mix-blend-mode:screen;
}
.burst.success-burst{background:radial-gradient(circle, rgba(255,235,90,0.95) 0%, rgba(255,210,74,0.7) 25%, rgba(255,170,40,0.3) 50%, transparent 75%)}
.burst.legend-burst{background:radial-gradient(circle, rgba(255,255,200,0.95) 0%, rgba(255,210,74,0.8) 18%, rgba(165,96,255,0.5) 45%, rgba(80,30,160,0.3) 65%, transparent 80%)}
.burst.go{animation:burstGo 1s ease-out forwards}
@keyframes burstGo{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0}
  15%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}
}

.rays{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:600px;height:600px;
  z-index:5;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(255,235,90,0.5) 8deg, transparent 16deg,
    transparent 50deg, rgba(165,96,255,0.5) 58deg, transparent 66deg,
    transparent 100deg, rgba(255,210,74,0.6) 108deg, transparent 116deg,
    transparent 150deg, rgba(255,235,90,0.5) 158deg, transparent 166deg,
    transparent 200deg, rgba(165,96,255,0.6) 208deg, transparent 216deg,
    transparent 250deg, rgba(255,210,74,0.5) 258deg, transparent 266deg,
    transparent 300deg, rgba(255,235,90,0.6) 308deg, transparent 316deg,
    transparent 360deg);
}
.rays.go{animation:raysGo 1.4s ease-out forwards}
@keyframes raysGo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.3) rotate(0deg)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(90deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.4) rotate(280deg)}
}

.star{
  position:absolute;width:24px;height:24px;
  z-index:7;pointer-events:none;opacity:0;
  background:
    linear-gradient(45deg, transparent 45%, #fff 47%, #fff 53%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #fff 47%, #fff 53%, transparent 55%),
    linear-gradient(0deg, transparent 47%, #fff 49%, #fff 51%, transparent 53%),
    linear-gradient(90deg, transparent 47%, #fff 49%, #fff 51%, transparent 53%);
  filter:drop-shadow(0 0 6px #ffe98a) drop-shadow(0 0 12px #ffd24a);
}
.star.purple{filter:drop-shadow(0 0 6px #c890ff) drop-shadow(0 0 14px #a560ff)}

.screen-flash{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.85) 0%, rgba(255,210,74,0.5) 30%, rgba(165,96,255,0.4) 60%, transparent 90%);
}
.screen-flash.go{animation:screenFlash 0.7s ease-out forwards}
@keyframes screenFlash{
  0%{opacity:0}
  20%{opacity:1}
  100%{opacity:0}
}

.wisp{
  position:absolute;width:5px;height:18px;border-radius:5px;
  background:linear-gradient(180deg,#fff,#bdbdbd 60%,transparent);
  opacity:0;z-index:6;pointer-events:none;filter:blur(0.5px);
}

.crack{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:210px;height:250px;border-radius:18px;
  background:
    linear-gradient(45deg,transparent 47%,#ff7a1e 49%,#ff7a1e 51%,transparent 53%),
    linear-gradient(135deg,transparent 45%,#ff7a1e 47%,#ff7a1e 49%,transparent 51%),
    linear-gradient(95deg,transparent 60%,#ffaa55 62%,#ffaa55 63%,transparent 65%);
  opacity:0;z-index:7;pointer-events:none;mix-blend-mode:screen;
}
.crack.show{animation:crackShow 0.6s ease-out forwards}
@keyframes crackShow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.9)}
  30%{opacity:0.95;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}
}

/* destroy */
.red-flash{
  position:absolute;inset:0;background:radial-gradient(circle,#ff1f30 0%,#7a0010 80%);opacity:0;
  z-index:30;pointer-events:none;mix-blend-mode:overlay;
}
.red-flash.go{animation:redFlash 0.8s ease-out forwards}
@keyframes redFlash{
  0%,100%{opacity:0}
  12%{opacity:0.75}
  24%{opacity:0.1}
  40%{opacity:0.65}
  60%{opacity:0.05}
  78%{opacity:0.4}
}
.shard{
  position:absolute;left:50%;top:50%;
  width:18px;height:26px;
  background:linear-gradient(160deg,#fff8e0,#c4a45a);
  border:1px solid #6a4810;
  z-index:8;pointer-events:none;opacity:0;
  transform-origin:center;
}
.equip-card.shatter{animation:shatter .35s ease-in forwards}
@keyframes shatter{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1;filter:brightness(1)}
  40%{transform:translate(-50%,-50%) scale(1.12);opacity:1;filter:brightness(1.8)}
  100%{transform:translate(-50%,-50%) scale(0.4);opacity:0;filter:brightness(0.4)}
}
.stage-zone.quake{animation:quake 0.6s linear}
@keyframes quake{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-8px,3px)}
  20%{transform:translate(8px,-3px)}
  30%{transform:translate(-7px,4px)}
  40%{transform:translate(7px,-4px)}
  50%{transform:translate(-5px,3px)}
  60%{transform:translate(5px,-3px)}
  70%{transform:translate(-3px,1px)}
  80%{transform:translate(3px,-1px)}
  90%{transform:translate(-1px,0)}
}
.stage-num.pulse-up{animation:pulseUp 0.7s ease-out}
@keyframes pulseUp{
  0%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}
  40%{transform:scale(1.45);filter:drop-shadow(0 0 22px #ffd24a) drop-shadow(0 0 40px #ffd24a)}
  100%{transform:scale(1)}
}
.stage-num.pulse-legend{animation:pulseLegend 0.9s ease-out}
@keyframes pulseLegend{
  0%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}
  30%{transform:scale(1.55);filter:drop-shadow(0 0 26px #ffd24a) drop-shadow(0 0 50px #a560ff)}
  60%{transform:scale(1.25);filter:drop-shadow(0 0 22px #a560ff) drop-shadow(0 0 40px #ffd24a)}
  100%{transform:scale(1)}
}
.stage-num.pulse-down{animation:pulseDown 0.5s ease-out}
@keyframes pulseDown{
  0%{transform:scale(1)}
  40%{transform:scale(0.85);color:#ff5050;filter:hue-rotate(0deg)}
  100%{transform:scale(1)}
}
.stage-num.pulse-zero{animation:pulseZero 0.7s ease-out}
@keyframes pulseZero{
  0%{transform:scale(1)}
  50%{transform:scale(0.55);color:#b71c1c;filter:blur(1px)}
  100%{transform:scale(1)}
}

/* ============= NEXT ATTEMPT ============= */
.next-attempt{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,210,74,0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(50,38,24,0.5) 0%, rgba(20,14,8,0.7) 100%);
  border:1px solid var(--border-bright);
  border-radius:12px;
  padding:14px 16px;margin-bottom:12px;font-size:13px;
  position:relative;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.4);
}
.na-section-title{
  font-size:12px;font-weight:800;color:var(--gold);
  display:flex;align-items:center;gap:8px;
  margin-bottom:8px;letter-spacing:0.5px;
}
.na-section-title::before{
  content:'';display:inline-block;width:7px;height:7px;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
  transform:rotate(45deg);flex-shrink:0;
  box-shadow:0 0 6px rgba(255,210,74,0.6);
}
.na-top-row{display:flex;flex-direction:column;gap:14px;margin-bottom:12px}
.na-level-row{margin-bottom:0}
.na-prob-section{margin-bottom:12px}
.na-level-display{display:flex;align-items:center;gap:14px;padding-left:16px}

/* 장비 카드 + 정보 패널 좌우 분할 */
.forge-row{display:flex;gap:14px;align-items:stretch;margin:14px 0 16px}
.forge-row > .stage-zone{flex:1 1 340px;margin:0;min-width:280px}
.forge-row > .next-attempt{flex:1 1 420px;margin:0;min-width:0;display:flex;flex-direction:column}
.forge-row > .next-attempt .na-top-row{flex:1}
@media (max-width:780px){
  .forge-row{flex-direction:column}
  .forge-row > .stage-zone,
  .forge-row > .next-attempt{flex:1 1 auto}
}

.lv-num{font-size:30px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.lv-from{color:#a89880;text-shadow:none}
.lv-to{
  background:linear-gradient(180deg,#fff5b0 0%,#ffd24a 60%,#a8761a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,210,74,0.5));
}
.lv-to.legend{
  background:linear-gradient(180deg,#fff5b0 0%,#ffd24a 40%,#c890ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,210,74,0.5)) drop-shadow(0 0 14px rgba(200,144,255,0.5));
}
.lv-arrow-svg{color:var(--gold);filter:drop-shadow(0 0 4px rgba(255,210,74,0.5));flex-shrink:0}

.na-prob-list{display:flex;flex-direction:column;gap:7px;padding-left:16px}
.prob-row{
  display:grid;
  grid-template-columns:74px 1fr 46px;
  align-items:center;gap:12px;
  font-size:12px;font-weight:800;
}
.prob-row .p-pct{text-align:right;font-variant-numeric:tabular-nums}
.p-track{
  height:12px;
  background:linear-gradient(180deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.35) 100%);
  border:1px solid rgba(0,0,0,0.5);
  border-radius:2px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
.p-fill{height:100%;width:0;transition:width 0.4s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,0.25)}
.r-success .p-label,.r-success .p-pct{color:#5fe085}
.r-success .p-fill{background:linear-gradient(180deg,#7af0a0 0%,#2cc566 100%)}
.r-maintain .p-label,.r-maintain .p-pct{color:#e0b860}
.r-maintain .p-fill{background:linear-gradient(180deg,#ffd97a 0%,#b88a30 100%)}
.r-fail .p-label,.r-fail .p-pct{color:#c87878}
.r-fail .p-fill{background:linear-gradient(180deg,#d88080 0%,#8a3838 100%)}
.r-destroy .p-label,.r-destroy .p-pct{color:#ed5050}
.r-destroy .p-fill{background:linear-gradient(180deg,#ff6868 0%,#c52020 100%)}

.na-cost{
  border-top:1px dashed var(--border);padding-top:10px;
  color:var(--muted);font-size:12px;
  display:flex;flex-wrap:nowrap;gap:10px;align-items:center;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:thin;
}
.na-cost::-webkit-scrollbar{height:4px}
.na-cost::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.na-cost > span{white-space:nowrap;flex-shrink:0}
.na-cost b{color:var(--text);font-weight:700}
.saving{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;
  background:linear-gradient(90deg, rgba(255,210,74,0.18), rgba(165,96,255,0.12));
  color:var(--gold);font-size:10px;font-weight:900;letter-spacing:1.5px;
  border:1px solid rgba(255,210,74,0.3);text-transform:uppercase;
}
.leg-tag{
  background:linear-gradient(90deg, rgba(255,210,74,0.2), rgba(200,144,255,0.25))!important;
  border-color:rgba(200,144,255,0.4)!important;color:#dcb8ff!important;
}

/* ============= BUTTONS ============= */
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
button.btn{
  flex:1;min-width:130px;
  border:none;border-radius:12px;padding:14px 16px;
  font-size:14px;font-weight:800;
  cursor:pointer;color:#fff;font-family:inherit;letter-spacing:0.3px;
  transition:transform .08s, filter .15s, box-shadow .15s;
  position:relative;overflow:hidden;
}
button.btn::before{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events:none;
}
button.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
button.btn:active{transform:translateY(0);filter:brightness(0.95)}
button.btn:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(0.5)}
.btn.b-once{
  background:linear-gradient(180deg, #2a253c 0%, #15121f 100%);
  border:1px solid var(--border-bright);
  box-shadow:0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn.b-auto{
  background:linear-gradient(180deg, #c8a035 0%, #8a6018 100%);
  color:#1a1100;
  border:1px solid #d4ab3c;
  box-shadow:0 4px 14px rgba(200,160,53,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
  text-shadow:0 1px 0 rgba(255,255,255,0.2);
}
.btn.b-auto.running{
  background:linear-gradient(180deg, #c83a3a 0%, #7a1818 100%);
  color:#fff;
  border:1px solid #d44545;
  box-shadow:0 4px 14px rgba(200,58,58,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  text-shadow:none;
  animation:autoPulse 1.2s ease-in-out infinite;
}
@keyframes autoPulse{
  0%,100%{box-shadow:0 4px 14px rgba(200,58,58,0.35), inset 0 1px 0 rgba(255,255,255,0.15)}
  50%{box-shadow:0 4px 24px rgba(200,58,58,0.7), inset 0 1px 0 rgba(255,255,255,0.15)}
}
.btn.b-reset{
  background:linear-gradient(180deg, #3a3550 0%, #1f1c30 100%);
  border:1px solid var(--border);
  box-shadow:0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

.speed-row{
  display:flex;align-items:center;gap:12px;margin-top:12px;
  font-size:11px;color:var(--muted);font-weight:700;letter-spacing:1px;text-transform:uppercase;
}
.speed-row input[type=range]{flex:1;accent-color:var(--gold);height:6px}
.speed-row b{
  color:var(--gold);font-size:13px;font-variant-numeric:tabular-nums;
  min-width:34px;text-align:right;
  text-shadow:0 0 8px rgba(255,210,74,0.5);
}

/* ============= STATS ============= */
.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.stat{
  position:relative;
  background:linear-gradient(180deg, rgba(255,210,74,0.10) 0%, rgba(18,12,6,0.6) 100%);
  border:1px solid var(--border);border-radius:12px;
  padding:12px 8px;text-align:center;
  transition:background .25s, border-color .25s;
  overflow:hidden;
}
.stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0.3;
}
.stat .k{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.stat .v{font-size:20px;font-weight:900;margin-top:4px;letter-spacing:-0.5px;color:var(--text);font-variant-numeric:tabular-nums}
.stat.flash{
  background:linear-gradient(180deg, rgba(255,210,74,0.35) 0%, rgba(18,12,6,0.6) 100%);
  border-color:var(--gold);
  transition:background .05s, border-color .05s;
}
.stat.flash .v{color:var(--gold-bright);text-shadow:0 0 12px var(--gold)}
.stat.danger.flash{
  background:linear-gradient(180deg, rgba(255,77,109,0.35) 0%, rgba(18,12,6,0.6) 100%);
  border-color:var(--red);
}
.stat.danger.flash .v{color:var(--red);text-shadow:0 0 12px var(--red)}

/* 최대 단계 stat (성취감 강조) */
.stat.highlight{
  background:linear-gradient(180deg, rgba(255,210,74,0.18) 0%, rgba(18,12,6,0.6) 100%);
  border-color:rgba(255,210,74,0.4);
}
.stat.highlight .k{color:var(--gold)}
.stat.highlight .v{
  background:linear-gradient(180deg,#fff5b0 0%,#ffd24a 60%,#a8761a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px rgba(255,210,74,0.4));
}
.stat.highlight.flash{
  background:linear-gradient(180deg, rgba(255,210,74,0.45) 0%, rgba(18,12,6,0.6) 100%);
  border-color:var(--gold);
}

.cost-table{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;font-size:13px}
.cost-table .ln{display:flex;justify-content:space-between;align-items:baseline;padding:5px 4px}
.cost-table .ln .lbl{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:0.3px}
.cost-table .ln .val{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.cost-table .total{border-top:1px solid var(--border);margin-top:8px;padding-top:10px}
.cost-table .total .lbl{color:var(--text);font-weight:700}
.cost-table .total .val{font-size:17px;color:var(--gold)}
.cost-table .cash{
  margin-top:6px;padding:10px 12px;
  background:linear-gradient(135deg, rgba(255,77,109,0.10), rgba(165,96,255,0.08));
  border:1px solid rgba(255,77,109,0.25);border-radius:10px;
}
.cost-table .cash .lbl{color:var(--text);font-weight:800;letter-spacing:0.5px}
.cost-table .cash .val{
  font-size:22px;
  background:linear-gradient(135deg, #ff4d6d 0%, #ff9e3d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 18px rgba(255,77,109,0.3);
}

/* ============= PROTECTION BADGE (하락 방지 시스템) ============= */
.protection-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:6px;
  font-size:10px;font-weight:900;letter-spacing:1.5px;
  text-transform:uppercase;white-space:nowrap;
}
.protection-badge.lv1{
  background:linear-gradient(90deg, rgba(255,158,61,0.20), rgba(196,118,40,0.10));
  border:1px solid rgba(255,158,61,0.45);
  color:#ffb774;
}
.protection-badge.lv2{
  background:linear-gradient(90deg, rgba(94,234,212,0.20), rgba(52,211,153,0.10));
  border:1px solid rgba(94,234,212,0.45);
  color:#5eead4;
}

/* ============= DATA TABLE (단계별 재료 표) ============= */
.data-table-card{
  position:relative;
  background:linear-gradient(180deg, rgba(50,38,24,0.55) 0%, rgba(28,20,12,0.7) 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 20px;margin-bottom:16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,210,74,0.08) inset, 0 12px 40px rgba(0,0,0,0.5);
}
.data-table-card[open]{padding-bottom:18px}
.data-table-card summary{
  cursor:pointer;list-style:none;
  font-size:13px;font-weight:800;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:8px;
  padding:4px 0;
  user-select:none;
}
.data-table-card summary::-webkit-details-marker{display:none}
.data-table-card summary::before{
  content:'';display:inline-block;width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg, var(--gold), var(--purple));
  box-shadow:0 0 8px rgba(255,210,74,0.6);
  flex-shrink:0;
}
.data-table-card summary .chip{
  margin-left:8px;font-size:10px;color:var(--muted);font-weight:700;
  padding:2px 8px;border:1px solid var(--border);border-radius:999px;
  letter-spacing:1px;
}
.data-table-card summary::after{
  content:'';margin-left:auto;
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--gold);
  transition:transform .2s ease;
}
.data-table-card[open] summary::after{transform:rotate(180deg)}
.data-table-card summary:hover{filter:brightness(1.1)}

.data-table-tabs{
  display:flex;gap:8px;margin:14px 0 10px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
  align-items:center;flex-wrap:wrap;
}
.data-table-tabs .tab{
  padding:6px 14px;border-radius:8px;
  font-size:12px;font-weight:800;letter-spacing:1px;
  background:rgba(18,12,6,0.5);
  border:1px solid var(--border);
  color:var(--muted);cursor:pointer;font-family:inherit;
  transition:all .15s;
}
.data-table-tabs .tab.active{
  background:linear-gradient(180deg, rgba(255,210,74,0.2), rgba(255,210,74,0.05));
  border-color:var(--gold);
  color:var(--gold);
  box-shadow:0 0 8px rgba(255,210,74,0.15);
}
.data-table-tabs .tab:hover:not(.active){
  border-color:var(--border-bright);color:var(--text);
}
.data-table-tabs .tab-divider{
  width:1px;height:22px;background:var(--border);margin:0 4px;
}
.data-table-tabs .base-tab.active{
  background:linear-gradient(180deg, rgba(94,234,212,0.18), rgba(94,234,212,0.05));
  border-color:#5eead4;color:#5eead4;
  box-shadow:0 0 8px rgba(94,234,212,0.15);
}
.data-table-tabs .legend-hint{
  margin-left:auto;font-size:10px;color:var(--muted);
  letter-spacing:0.5px;
}

.data-table-wrap{overflow-x:auto;scrollbar-width:thin}
.data-table-wrap::-webkit-scrollbar{height:6px}
.data-table-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.data-table{
  width:100%;border-collapse:collapse;
  font-size:12px;font-variant-numeric:tabular-nums;
  min-width:560px;
}
.data-table thead th{
  padding:8px 8px;text-align:right;
  font-size:10px;color:var(--muted);font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table thead th:first-child{text-align:left}
.data-table tbody td{
  padding:8px 8px;text-align:right;
  border-bottom:1px solid rgba(62,46,28,0.4);
  font-weight:700;color:var(--text);
  white-space:nowrap;
}
.data-table tbody td:first-child{text-align:left;color:var(--gold);font-weight:900}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:rgba(255,210,74,0.04)}
.data-table tbody tr.legend td:first-child{
  background:linear-gradient(135deg,#fff5b0 0%,#ffd24a 50%,#c890ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.data-table .leg-mark{
  display:inline-block;margin-left:4px;
  font-size:9px;font-weight:900;
  padding:1px 5px;border-radius:4px;
  background:linear-gradient(90deg, rgba(255,210,74,0.25), rgba(200,144,255,0.25));
  border:1px solid rgba(200,144,255,0.4);
  color:#dcb8ff;
  vertical-align:1px;
  -webkit-text-fill-color:#dcb8ff;
  background-clip:padding-box;
}
.data-table td.success{color:#5fe085}
.data-table td.maintain{color:#e0b860}
.data-table td.fail{color:#c87878}
.data-table td.destroy{color:#ed5050}
.data-table .empty-row{
  padding:24px !important;text-align:center !important;
  color:var(--muted) !important;font-style:italic;
}
.data-table-note{
  margin:10px 4px 0;font-size:11px;color:var(--muted);
  letter-spacing:0.2px;line-height:1.5;
}

/* ============= LOG ============= */
.log-card .log-list{
  max-height:360px;overflow-y:auto;
  border:1px solid var(--border);border-radius:12px;
  background:rgba(18,12,6,0.55);
}
.log-list::-webkit-scrollbar{width:8px}
.log-list::-webkit-scrollbar-track{background:transparent}
.log-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.log-list::-webkit-scrollbar-thumb:hover{background:var(--border-bright)}

.log-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px;letter-spacing:0.5px}
.log-row{
  display:flex;gap:10px;align-items:center;
  padding:10px 14px;border-bottom:1px solid rgba(62,46,28,0.5);
  font-size:13px;font-variant-numeric:tabular-nums;
  animation:logIn 0.4s ease-out;
  transition:background 1.2s ease-out;
}
.log-row:last-child{border-bottom:none}
.log-row.hl{background:rgba(255,210,74,0.12)}
.log-row.hl.r-d{background:rgba(255,77,109,0.15)}
.log-row.hl.r-leg{background:linear-gradient(90deg, rgba(255,210,74,0.18), rgba(165,96,255,0.18))}
@keyframes logIn{
  0%{opacity:0;transform:translateY(-10px);max-height:0;padding-top:0;padding-bottom:0}
  1%{max-height:60px;padding-top:10px;padding-bottom:10px}
  100%{opacity:1;transform:translateY(0);max-height:60px}
}
.log-row .seq{width:48px;color:var(--muted);font-size:11px;text-align:right;font-weight:700}
.log-row .stage{width:80px;color:var(--text);font-weight:800;letter-spacing:0.5px}
.log-row .stage .arr{color:var(--muted);font-weight:400;margin:0 4px}
.log-row .out{
  flex:0 0 auto;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:800;
  min-width:54px;text-align:center;letter-spacing:1px;text-transform:uppercase;
  border:1px solid;
}
.log-row.r-s .out{background:rgba(255,210,74,0.15);color:var(--gold-bright);border-color:rgba(255,210,74,0.4)}
.log-row.r-leg .out{background:linear-gradient(90deg, rgba(255,210,74,0.2), rgba(165,96,255,0.2));color:#fff;border-color:rgba(255,210,74,0.5)}
.log-row.r-m .out{background:rgba(168,163,200,0.1);color:#a8a3c8;border-color:rgba(168,163,200,0.25)}
.log-row.r-f .out{background:rgba(255,158,61,0.12);color:var(--orange);border-color:rgba(255,158,61,0.4)}
.log-row.r-d .out{background:rgba(255,77,109,0.15);color:var(--red);border-color:rgba(255,77,109,0.4)}
.log-row .delta{flex:1;color:var(--muted);font-size:12px;text-align:right;font-weight:700}

/* ============= RESPONSIVE ============= */
@media (max-width:680px){
  .wrap{padding:16px 12px 60px}
  .grid-2,.grid-3,.grid-4,.stat-grid{grid-template-columns:repeat(2,1fr)}
  .stage-zone{height:320px}
  .equip-card{width:180px;height:220px}
  .equip-icon-wrap{width:108px;height:108px}
  .equip-card .stage-num{font-size:46px}
  .result-text.success{font-size:48px}
  .result-text.legendary{font-size:54px}
  .result-text.maintain{font-size:42px}
  .result-text.fail{font-size:44px}
  .result-text.destroy{font-size:54px}
  .ring{width:200px;height:200px}
  .burst{width:240px;height:240px}
  .crack{width:180px;height:220px}
  .rays{width:480px;height:480px}
  button.btn{min-width:0;font-size:13px;padding:13px 10px}
  .log-row .seq{width:40px}
  .log-row .stage{width:70px;font-size:12px}
}