/* TODO QUEST - Game UI */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=DotGothic16&family=Noto+Sans+JP:wght@400;600&display=swap');

:root{
  --bg:#0f0f1a;
  --panel:#1a1a2e;
  --panel2:#1e1e3a;
  --gold:#f0c040;
  --gold2:#d4a017;
  --accent:#6c5ce7;
  --text:#e8e8f0;
  --muted:#9a9ab0;
  --danger:#ff6b6b;
  --success:#00d2a0;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Noto Sans JP','DotGothic16',system-ui,sans-serif;
  background: radial-gradient(ellipse at top, #1a1a3e 0%, #0f0f1a 55%, #070711 100%);
  color:var(--text);
  min-height:100vh;
  padding:20px;
}
a{color:var(--gold)}
#app{max-width:900px;margin:0 auto}
.game-title{
  font-family:'Cinzel',serif;
  text-align:center;
  font-size:36px;
  font-weight:800;
  letter-spacing:0.12em;
  color:var(--gold);
  text-shadow:0 0 20px rgba(240,192,64,0.5), 0 2px 0 #000;
  margin:10px 0 6px;
}
.game-subtitle{
  text-align:center;color:var(--muted);font-size:13px;letter-spacing:0.2em;margin-bottom:20px;
}
.frame{
  background:linear-gradient(180deg, var(--panel) 0%, #13132a 100%);
  border:2px solid var(--gold2);
  border-radius:16px;
  box-shadow:0 0 0 4px rgba(240,192,64,0.08), 0 20px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  padding:24px;
  position:relative;
}
.frame::before{
  content:"";position:absolute;inset:8px;border:1px solid rgba(240,192,64,0.12);border-radius:12px;pointer-events:none;
}
/* HUD */
.hud{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:18px;
  background:linear-gradient(135deg, #1e1e3a 0%, #16162e 100%);
  border:1px solid rgba(240,192,64,0.25);
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
}
.avatar-box{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.avatar{
  width:120px;height:120px;
  border-radius:16px;
  border:3px solid var(--gold);
  background:radial-gradient(ellipse at 30% 20%, #2a2a5a 0%, #1a1a3a 60%, #0f0f2a 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:56px;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 30px rgba(108,92,231,0.35), inset 0 0 20px rgba(240,192,64,0.15);
  transition:all 0.6s;
}
.avatar.evolved{box-shadow:0 0 40px rgba(240,192,64,0.5), 0 0 60px rgba(108,92,231,0.3)}
.avatar.hero{border-color:#fff;box-shadow:0 0 50px gold, 0 0 80px rgba(255,215,0,0.6)}
.avatar-stage{font-size:11px;color:var(--gold);letter-spacing:0.12em;text-align:center}
.avatar-name{font-weight:700;font-size:14px;text-align:center}
.stats{flex:1}
.level-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.level-badge{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
  color:#1a1a2e;padding:6px 14px;border-radius:999px;font-weight:800;font-family:'Cinzel',serif;letter-spacing:0.06em;
}
.job-badge{border:1px solid rgba(240,192,64,0.4);padding:4px 10px;border-radius:999px;font-size:12px;color:var(--gold)}
.exp-bar{height:14px;background:#0a0a18;border:1px solid #333;border-radius:999px;overflow:hidden;position:relative}
.exp-fill{height:100%;background:linear-gradient(90deg, #00d2a0 0%, #00a8ff 50%, var(--gold) 100%);transition:width 0.8s cubic-bezier(.2,.8,.2,1)}
.exp-text{font-size:11px;color:var(--muted);margin-top:4px;display:flex;justify-content:space-between}
.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.status-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:8px 10px;text-align:center}
.status-card .k{font-size:10px;color:var(--muted);letter-spacing:0.08em}
.status-card .v{font-weight:700;font-size:16px;margin-top:2px}
/* Auth */
.auth-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.auth-tabs button{padding:8px 18px;border-radius:999px;border:1px solid rgba(240,192,64,0.3);background:transparent;color:var(--muted);cursor:pointer}
.auth-tabs button.active{background:var(--gold);color:#1a1a2e;border-color:var(--gold);font-weight:700}
.auth-form{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 auto}
.auth-form input, .auth-form select{padding:12px 14px;border-radius:10px;border:1px solid #333;background:#0f0f1e;color:var(--text);font-size:14px}
.job-select{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.job-card{border:2px solid #333;border-radius:14px;padding:14px 8px;text-align:center;cursor:pointer;background:#111126;transition:all .2s}
.job-card.selected{border-color:var(--gold);background:linear-gradient(180deg, #2a2250 0%, #1a1a3a 100%);box-shadow:0 0 20px rgba(240,192,64,0.3)}
.job-card .emoji{font-size:32px}
.job-card .label{font-size:13px;margin-top:6px;font-weight:600}
.job-card .desc{font-size:10px;color:var(--muted);margin-top:4px}
.btn-primary{background:linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);color:#1a1a2e;border:none;padding:12px 20px;border-radius:10px;font-weight:800;cursor:pointer;letter-spacing:0.06em}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed}
.btn-ghost{background:transparent;border:1px solid #444;color:var(--muted);padding:8px 14px;border-radius:10px;cursor:pointer}
.alert{padding:10px 14px;border-radius:10px;font-size:13px}
.alert-error{background:rgba(255,107,107,0.12);border:1px solid rgba(255,107,107,0.3);color:#ff9a9a}
.alert-success{background:rgba(0,210,160,0.12);border:1px solid rgba(0,210,160,0.3);color:#7ff0d0}
.verify-box{background:rgba(240,192,64,0.08);border:1px dashed var(--gold);padding:12px;border-radius:10px;word-break:break-all;font-size:12px}
/* Add form */
.add-quest{
  display:grid;gap:10px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px;margin-bottom:16px;
}
.add-quest .row{display:flex;gap:10px;flex-wrap:wrap}
.add-quest input[type="text"]{flex:1;min-width:180px;padding:12px 14px;border-radius:10px;border:1px solid #333;background:#0f0f1e;color:var(--text)}
.add-quest select, .add-quest input[type="text"].small{padding:10px 12px;border-radius:10px;border:1px solid #333;background:#0f0f1e;color:var(--text)}
.range{display:flex;align-items:center;gap:8px;font-size:13px}
.range input[type="range"]{accent-color:var(--gold)}
.range .val{width:22px;text-align:center;font-weight:700;color:var(--gold)}
/* Todo list */
.quest-list{display:flex;flex-direction:column;gap:10px}
.quest-item{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg, #1a1a2e 0%, #15152e 100%);
  border:1px solid rgba(255,255,255,0.06);
  border-left:4px solid #555;
  border-radius:12px;padding:12px 14px;
  transition:transform .15s, box-shadow .15s, border-color .2s;
}
.quest-item:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.quest-item.lv-1{border-left-color:#00d2a0}
.quest-item.lv-2{border-left-color:#00a8ff}
.quest-item.lv-3{border-left-color:#f0c040}
.quest-item.lv-4{border-left-color:#ff8c42}
.quest-item.lv-5{border-left-color:#ff4757}
.quest-main{flex:1;min-width:0}
.quest-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quest-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;align-items:center}
.badge{padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:0.04em}
.badge-enemy{background:#22224a;color:#aab0ff;border:1px solid #3a3a6a}
.badge-urg{color:#fff}
.badge-urg-1{background:#2ecc71}.badge-urg-2{background:#3498db}.badge-urg-3{background:#f1c40f;color:#1a1a2e}.badge-urg-4{background:#e67e22}.badge-urg-5{background:#e74c3c}
.badge-imp{background:#6c5ce7;color:#fff}
.badge-due{background:#0f0f1e;color:var(--muted);border:1px solid #333}
.badge-due.due-soon{background:#f1c40f;color:#1a1a2e;border-color:#f39c12;animation:duePulse 1.6s infinite}
.badge-due.due-today{background:#e74c3c;color:#fff;border-color:#c0392b;animation:dueBlink 1.1s infinite}
@keyframes duePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes dueBlink{0%,100%{opacity:1}50%{opacity:0.85;transform:scale(1.02)}}
.badge-exp{background:linear-gradient(135deg, #00d2a0, #00a8ff);color:#fff}
.quest-actions{display:flex;gap:8px;align-items:center}
.btn-defeat{background:linear-gradient(135deg, #ff6b6b 0%, #c0392b 100%);color:#fff;border:none;padding:10px 16px;border-radius:10px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(255,107,107,0.4)}
.btn-defeat.wizard{background:linear-gradient(135deg, #6c5ce7 0%, #341f97 100%);box-shadow:0 4px 14px rgba(108,92,231,0.4)}
.btn-defeat.priest{background:linear-gradient(135deg, #00d2a0 0%, #079992 100%);box-shadow:0 4px 14px rgba(0,210,160,0.4)}
.btn-defeat:active{transform:scale(0.96)}
.btn-defeat:disabled{opacity:0.5}
.btn-delete{background:transparent;border:1px solid #333;color:var(--muted);padding:8px 10px;border-radius:10px;cursor:pointer}
.anim-hit{animation:hit 0.5s}
@keyframes hit{0%{transform:scale(1)}25%{transform:scale(1.06) rotate(-1deg)}50%{transform:scale(0.98)}100%{transform:scale(1)}}
.anim-shake{animation:shake 0.4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.evolve-modal{position:fixed;inset:0;background:rgba(5,5,15,0.85);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.evolve-card{background:radial-gradient(ellipse at top, #2a2a5a 0%, #1a1a3a 70%);border:2px solid var(--gold);border-radius:20px;padding:32px;text-align:center;max-width:420px;width:100%;box-shadow:0 0 60px rgba(240,192,64,0.4)}
.evolve-card h2{font-family:'Cinzel',serif;color:var(--gold);font-size:22px}
.evolve-card .big{font-size:64px;margin:12px 0}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .big{font-size:40px}
.footer{text-align:center;color:var(--muted);font-size:11px;margin-top:18px;letter-spacing:0.08em}
@media(max-width:700px){
  .hud{grid-template-columns:1fr}
  .avatar{width:100px;height:100px;font-size:48px}
  .add-quest .row{flex-direction:column}
  .quest-item{flex-wrap:wrap}
  .quest-actions{width:100%;justify-content:flex-end}
  .game-title{font-size:28px}
}

/* 31 random defeat anime */
.anime-layer{position:fixed;inset:0;pointer-events:none;z-index:40;display:flex;align-items:center;justify-content:center;flex-direction:column}
.center-enemy{width:160px;height:160px;object-fit:contain;position:absolute;z-index:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.6));opacity:0.95}
.center-enemy.cut{animation:centerCut 0.75s forwards}
.center-enemy.explode{animation:centerExplode 0.75s forwards}
.center-enemy.burn{animation:centerBurn 0.75s forwards}
.center-enemy.vanish{animation:centerVanish 0.75s forwards}
@keyframes centerCut{0%{transform:scale(0.6) translateY(30px);opacity:0;clip-path:inset(0 0 0 0)}15%{transform:scale(1) translateY(0);opacity:1}45%{clip-path:inset(0 50% 0 0)}100%{clip-path:inset(0 50% 0 0);transform:translate(-14px,10px) rotate(-10deg) scale(1.05);opacity:0}}
@keyframes centerExplode{0%{transform:scale(0.6) translateY(20px);opacity:0}15%{transform:scale(1) translateY(0);opacity:1}30%{transform:scale(1.12)}60%{transform:scale(1.35);filter:brightness(1.6) blur(1px);opacity:0.8}100%{transform:scale(1.9);filter:blur(6px);opacity:0}}
@keyframes centerBurn{0%{transform:scale(0.6) translateY(20px);opacity:0;filter:brightness(1)}15%{transform:scale(1) translateY(0);opacity:1}30%{filter:hue-rotate(-20deg) brightness(1.4) sepia(0.6)}60%{filter:hue-rotate(-10deg) brightness(1.8) sepia(1) blur(1px);transform:scale(1.06)}100%{filter:brightness(0.15) blur(3px);opacity:0;transform:scale(0.9)}}
@keyframes centerVanish{0%{transform:scale(0.6) translateY(20px);opacity:0}15%{transform:scale(1) translateY(0);opacity:1}40%{transform:scale(1.08);filter:blur(0.5px)}100%{transform:scale(0.5);filter:blur(10px);opacity:0}}
.anime-cut{position:relative;z-index:2}
.anime-cut{font-family:'Cinzel','DotGothic16',serif;font-weight:900;font-size:52px;letter-spacing:0.12em;color:#fff;text-shadow:0 2px 0 #000, 0 0 18px currentColor, 0 0 36px currentColor;opacity:0;transform:scale(0.8)}
.anime-cut.show{animation:cutPop 0.7s cubic-bezier(.2,.8,.2,1)}
@keyframes cutPop{0%{opacity:0;transform:scale(0.7) rotate(-6deg)} 18%{opacity:1;transform:scale(1.08) rotate(1deg)} 70%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.12) rotate(2deg)}}
.quest-item.anime{position:relative;overflow:hidden}
.quest-item.anime::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0.55;mix-blend-mode:screen}
.anime01{animation:anime01 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime01{0%{transform:scale(1)}25%{transform:scale(1.06) rotate(-1deg)}50%{transform:scale(0.98)}100%{transform:scale(1)}}
.quest-item.anime01::after{background:hsla(27, 85%, 60%, 0.18);animation:anime01Overlay 0.65s}
@keyframes anime01Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime02{animation:anime02 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime02{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.quest-item.anime02::after{background:hsla(54, 85%, 60%, 0.18);animation:anime02Overlay 0.65s}
@keyframes anime02Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime03{animation:anime03 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime03{0%{transform:translateX(-18px) skewX(-12deg);opacity:0}20%{opacity:1}100%{transform:translateX(18px) skewX(-12deg);opacity:0}}
.quest-item.anime03::after{background:hsla(81, 85%, 60%, 0.18);animation:anime03Overlay 0.65s}
@keyframes anime03Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime04{animation:anime04 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime04{0%{transform:translateX(18px) skewX(12deg);opacity:0}20%{opacity:1}100%{transform:translateX(-18px) skewX(12deg);opacity:0}}
.quest-item.anime04::after{background:hsla(108, 85%, 60%, 0.18);animation:anime04Overlay 0.65s}
@keyframes anime04Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime05{animation:anime05 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime05{0%{transform:scale(0.95);filter:brightness(1) sepia(0.2)}50%{transform:scale(1.06);filter:brightness(1.5) sepia(0.4) hue-rotate(-10deg)}100%{transform:scale(1);filter:brightness(1)}}
.quest-item.anime05::after{background:hsla(135, 85%, 60%, 0.18);animation:anime05Overlay 0.65s}
@keyframes anime05Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime06{animation:anime06 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime06{0%{filter:hue-rotate(160deg) brightness(1.3) blur(0px)}50%{filter:hue-rotate(180deg) brightness(1.1) blur(1px)}100%{filter:hue-rotate(160deg) brightness(1)}}
.quest-item.anime06::after{background:hsla(162, 85%, 60%, 0.18);animation:anime06Overlay 0.65s}
@keyframes anime06Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime07{animation:anime07 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime07{0%,100%{filter:brightness(1)}10%{filter:brightness(2.2) contrast(1.6)}20%{filter:brightness(1)}30%{filter:brightness(2)}}
.quest-item.anime07::after{background:hsla(189, 85%, 60%, 0.18);animation:anime07Overlay 0.65s}
@keyframes anime07Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime08{animation:anime08 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime08{0%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.02)}100%{transform:rotate(-8deg) scale(1)}}
.quest-item.anime08::after{background:hsla(216, 85%, 60%, 0.18);animation:anime08Overlay 0.65s}
@keyframes anime08Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime09{animation:anime09 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime09{0%,100%{transform:translateY(0)}25%{transform:translateY(-10px)}50%{transform:translateY(0)}75%{transform:translateY(-4px)}}
.quest-item.anime09::after{background:hsla(243, 85%, 60%, 0.18);animation:anime09Overlay 0.65s}
@keyframes anime09Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime10{animation:anime10 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime10{0%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(0.9)}100%{transform:scale(1)}}
.quest-item.anime10::after{background:hsla(270, 85%, 60%, 0.18);animation:anime10Overlay 0.65s}
@keyframes anime10Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime11{animation:anime11 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime11{0%,100%{transform:rotate(0)}15%{transform:rotate(2deg)}30%{transform:rotate(-2deg)}45%{transform:rotate(1.5deg)}}
.quest-item.anime11::after{background:hsla(297, 85%, 60%, 0.18);animation:anime11Overlay 0.65s}
@keyframes anime11Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime12{animation:anime12 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime12{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(1deg)}100%{transform:translateY(0) rotate(0)}}
.quest-item.anime12::after{background:hsla(324, 85%, 60%, 0.18);animation:anime12Overlay 0.65s}
@keyframes anime12Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime13{animation:anime13 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime13{0%{transform:translate(0,0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}100%{transform:translate(0,0)}}
.quest-item.anime13::after{background:hsla(351, 85%, 60%, 0.18);animation:anime13Overlay 0.65s}
@keyframes anime13Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime14{animation:anime14 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime14{0%{filter:brightness(1) drop-shadow(0 0 0px gold)}50%{filter:brightness(1.6) drop-shadow(0 0 12px gold)}100%{filter:brightness(1)}}
.quest-item.anime14::after{background:hsla(18, 85%, 60%, 0.18);animation:anime14Overlay 0.65s}
@keyframes anime14Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime15{animation:anime15 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime15{0%{filter:brightness(1) contrast(1)}30%{filter:brightness(0.4) contrast(1.4)}100%{filter:brightness(1)}}
.quest-item.anime15::after{background:hsla(45, 85%, 60%, 0.18);animation:anime15Overlay 0.65s}
@keyframes anime15Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime16{animation:anime16 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime16{0%{transform:scale(1)}25%{transform:scale(1.06) rotate(-1deg)}50%{transform:scale(0.98)}100%{transform:scale(1)}}
.quest-item.anime16::after{background:hsla(72, 85%, 60%, 0.18);animation:anime16Overlay 0.65s}
@keyframes anime16Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime17{animation:anime17 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime17{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.quest-item.anime17::after{background:hsla(99, 85%, 60%, 0.18);animation:anime17Overlay 0.65s}
@keyframes anime17Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime18{animation:anime18 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime18{0%{transform:translateX(-18px) skewX(-12deg);opacity:0}20%{opacity:1}100%{transform:translateX(18px) skewX(-12deg);opacity:0}}
.quest-item.anime18::after{background:hsla(126, 85%, 60%, 0.18);animation:anime18Overlay 0.65s}
@keyframes anime18Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime19{animation:anime19 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime19{0%{transform:translateX(18px) skewX(12deg);opacity:0}20%{opacity:1}100%{transform:translateX(-18px) skewX(12deg);opacity:0}}
.quest-item.anime19::after{background:hsla(153, 85%, 60%, 0.18);animation:anime19Overlay 0.65s}
@keyframes anime19Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime20{animation:anime20 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime20{0%{transform:scale(0.95);filter:brightness(1) sepia(0.2)}50%{transform:scale(1.06);filter:brightness(1.5) sepia(0.4) hue-rotate(-10deg)}100%{transform:scale(1);filter:brightness(1)}}
.quest-item.anime20::after{background:hsla(180, 85%, 60%, 0.18);animation:anime20Overlay 0.65s}
@keyframes anime20Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime21{animation:anime21 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime21{0%{filter:hue-rotate(160deg) brightness(1.3) blur(0px)}50%{filter:hue-rotate(180deg) brightness(1.1) blur(1px)}100%{filter:hue-rotate(160deg) brightness(1)}}
.quest-item.anime21::after{background:hsla(207, 85%, 60%, 0.18);animation:anime21Overlay 0.65s}
@keyframes anime21Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime22{animation:anime22 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime22{0%,100%{filter:brightness(1)}10%{filter:brightness(2.2) contrast(1.6)}20%{filter:brightness(1)}30%{filter:brightness(2)}}
.quest-item.anime22::after{background:hsla(234, 85%, 60%, 0.18);animation:anime22Overlay 0.65s}
@keyframes anime22Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime23{animation:anime23 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime23{0%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.02)}100%{transform:rotate(-8deg) scale(1)}}
.quest-item.anime23::after{background:hsla(261, 85%, 60%, 0.18);animation:anime23Overlay 0.65s}
@keyframes anime23Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime24{animation:anime24 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime24{0%,100%{transform:translateY(0)}25%{transform:translateY(-10px)}50%{transform:translateY(0)}75%{transform:translateY(-4px)}}
.quest-item.anime24::after{background:hsla(288, 85%, 60%, 0.18);animation:anime24Overlay 0.65s}
@keyframes anime24Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime25{animation:anime25 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime25{0%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(0.9)}100%{transform:scale(1)}}
.quest-item.anime25::after{background:hsla(315, 85%, 60%, 0.18);animation:anime25Overlay 0.65s}
@keyframes anime25Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime26{animation:anime26 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime26{0%,100%{transform:rotate(0)}15%{transform:rotate(2deg)}30%{transform:rotate(-2deg)}45%{transform:rotate(1.5deg)}}
.quest-item.anime26::after{background:hsla(342, 85%, 60%, 0.18);animation:anime26Overlay 0.65s}
@keyframes anime26Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime27{animation:anime27 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime27{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(1deg)}100%{transform:translateY(0) rotate(0)}}
.quest-item.anime27::after{background:hsla(9, 85%, 60%, 0.18);animation:anime27Overlay 0.65s}
@keyframes anime27Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime28{animation:anime28 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime28{0%{transform:translate(0,0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}100%{transform:translate(0,0)}}
.quest-item.anime28::after{background:hsla(36, 85%, 60%, 0.18);animation:anime28Overlay 0.65s}
@keyframes anime28Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime29{animation:anime29 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime29{0%{filter:brightness(1) drop-shadow(0 0 0px gold)}50%{filter:brightness(1.6) drop-shadow(0 0 12px gold)}100%{filter:brightness(1)}}
.quest-item.anime29::after{background:hsla(63, 85%, 60%, 0.18);animation:anime29Overlay 0.65s}
@keyframes anime29Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime30{animation:anime30 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime30{0%{filter:brightness(1) contrast(1)}30%{filter:brightness(0.4) contrast(1.4)}100%{filter:brightness(1)}}
.quest-item.anime30::after{background:hsla(90, 85%, 60%, 0.18);animation:anime30Overlay 0.65s}
@keyframes anime30Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.anime31{animation:anime31 0.65s cubic-bezier(.2,.8,.2,1)}
@keyframes anime31{0%{transform:scale(1)}25%{transform:scale(1.06) rotate(-1deg)}50%{transform:scale(0.98)}100%{transform:scale(1)}}
.quest-item.anime31::after{background:hsla(117, 85%, 60%, 0.18);animation:anime31Overlay 0.65s}
@keyframes anime31Overlay{0%{opacity:0}15%{opacity:0.7}100%{opacity:0}}
.quest-item.anime.hit{box-shadow:0 0 22px hsla(var(--h, 0), 80%, 60%, 0.45)}

/* 31 enemy images + defeat effects */
.enemy-img{width:54px;height:54px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));transition:transform 0.2s}
.quest-item .enemy-wrap{position:relative;width:54px;height:54px;flex-shrink:0}
.enemy-cutline{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0}
.enemy-img.cut + .enemy-cutline{opacity:1;background:linear-gradient(108deg, transparent 48%, #fff 49%, #ffd700 50%, #fff 51%, transparent 52%);animation:cutLine 0.55s}
@keyframes cutLine{0%{transform:translateX(-60%) skewX(-12deg);opacity:0}20%{opacity:1}100%{transform:translateX(60%) skewX(-12deg);opacity:0}}


/* 31 enemy defeat effects */
@keyframes enemy01Cut{0%{transform:translate(0,0) rotate(0) scale(1);clip-path:inset(0 0 0 0);filter:brightness(1)}25%{transform:translate(-2px,0) rotate(-1deg)}45%{clip-path:inset(0 50% 0 0)}55%{clip-path:inset(0 50% 0 0);transform:translate(-8px,4px) rotate(-8deg);opacity:1}100%{clip-path:inset(0 50% 0 0);transform:translate(-14px,8px) rotate(-12deg);opacity:0} } .enemy-img.enemy01.cut{animation:enemy01Cut 0.75s forwards} .enemy-img.enemy01.cut::after{content:''}
@keyframes enemy02Explode{0%{transform:scale(1);filter:brightness(1);opacity:1}30%{transform:scale(1.15);filter:brightness(1.4)}60%{transform:scale(1.3);filter:brightness(1.8) blur(1px);opacity:0.8}100%{transform:scale(1.8);filter:blur(4px);opacity:0}} .enemy-img.enemy02.explode{animation:enemy02Explode 0.75s forwards}
@keyframes enemy03Burn{0%{filter:hue-rotate(0deg) brightness(1) sepia(0);transform:scale(1)}25%{filter:hue-rotate(-30deg) brightness(1.3) sepia(0.6) saturate(1.6)}50%{filter:hue-rotate(-10deg) brightness(1.8) sepia(1) blur(0.5px);transform:scale(1.04)}100%{filter:brightness(0.2) sepia(1) blur(2px);transform:scale(0.9);opacity:0}} .enemy-img.enemy03.burn{animation:enemy03Burn 0.75s forwards}
@keyframes enemy04Vanish{0%{transform:scale(1);opacity:1;filter:blur(0px)}40%{transform:scale(1.08);opacity:0.9;filter:blur(0.5px)}100%{transform:scale(0.6);opacity:0;filter:blur(6px)}} .enemy-img.enemy04.vanish{animation:enemy04Vanish 0.75s forwards}
@keyframes enemy05Cut{0%{transform:translate(0,0) rotate(0) scale(1);clip-path:inset(0 0 0 0);filter:brightness(1)}25%{transform:translate(-2px,0) rotate(-1deg)}45%{clip-path:inset(0 50% 0 0)}55%{clip-path:inset(0 50% 0 0);transform:translate(-8px,4px) rotate(-8deg);opacity:1}100%{clip-path:inset(0 50% 0 0);transform:translate(-14px,8px) rotate(-12deg);opacity:0} } .enemy-img.enemy05.cut{animation:enemy05Cut 0.75s forwards} .enemy-img.enemy05.cut::after{content:''}
@keyframes enemy06Explode{0%{transform:scale(1);filter:brightness(1);opacity:1}30%{transform:scale(1.15);filter:brightness(1.4)}60%{transform:scale(1.3);filter:brightness(1.8) blur(1px);opacity:0.8}100%{transform:scale(1.8);filter:blur(4px);opacity:0}} .enemy-img.enemy06.explode{animation:enemy06Explode 0.75s forwards}
@keyframes enemy07Burn{0%{filter:hue-rotate(0deg) brightness(1) sepia(0);transform:scale(1)}25%{filter:hue-rotate(-30deg) brightness(1.3) sepia(0.6) saturate(1.6)}50%{filter:hue-rotate(-10deg) brightness(1.8) sepia(1) blur(0.5px);transform:scale(1.04)}100%{filter:brightness(0.2) sepia(1) blur(2px);transform:scale(0.9);opacity:0}} .enemy-img.enemy07.burn{animation:enemy07Burn 0.75s forwards}
@keyframes enemy08Vanish{0%{transform:scale(1);opacity:1;filter:blur(0px)}40%{transform:scale(1.08);opacity:0.9;filter:blur(0.5px)}100%{transform:scale(0.6);opacity:0;filter:blur(6px)}} .enemy-img.enemy08.vanish{animation:enemy08Vanish 0.75s forwards}
@keyframes enemy09Cut{0%{transform:translate(0,0) rotate(0) scale(1);clip-path:inset(0 0 0 0);filter:brightness(1)}25%{transform:translate(-2px,0) rotate(-1deg)}45%{clip-path:inset(0 50% 0 0)}55%{clip-path:inset(0 50% 0 0);transform:translate(-8px,4px) rotate(-8deg);opacity:1}100%{clip-path:inset(0 50% 0 0);transform:translate(-14px,8px) rotate(-12deg);opacity:0} } .enemy-img.enemy09.cut{animation:enemy09Cut 0.75s forwards} .enemy-img.enemy09.cut::after{content:''}
@keyframes enemy10Explode{0%{transform:scale(1);filter:brightness(1);opacity:1}30%{transform:scale(1.15);filter:brightness(1.4)}60%{transform:scale(1.3);filter:brightness(1.8) blur(1px);opacity:0.8}100%{transform:scale(1.8);filter:blur(4px);opacity:0}} .enemy-img.enemy10.explode{animation:enemy10Explode 0.75s forwards}
@keyframes enemy11Burn{0%{filter:hue-rotate(0deg) brightness(1) sepia(0);transform:scale(1)}25%{filter:hue-rotate(-30deg) brightness(1.3) sepia(0.6) saturate(1.6)}50%{filter:hue-rotate(-10deg) brightness(1.8) sepia(1) blur(0.5px);transform:scale(1.04)}100%{filter:brightness(0.2) sepia(1) blur(2px);transform:scale(0.9);opacity:0}} .enemy-img.enemy11.burn{animation:enemy11Burn 0.75s forwards}
@keyframes enemy12Vanish{0%{transform:scale(1);opacity:1;filter:blur(0px)}40%{transform:scale(1.08);opacity:0.9;filter:blur(0.5px)}100%{transform:scale(0.6);opacity:0;filter:blur(6px)}} .enemy-img.enemy12.vanish{animation:enemy12Vanish 0.75s forwards}
@keyframes enemy13Cut{0%{transform:translate(0,0) rotate(0) scale(1);clip-path:inset(0 0 0 0);filter:brightness(1)}25%{transform:translate(-2px,0) rotate(-1deg)}45%{clip-path:inset(0 50% 0 0)}55%{clip-path:inset(0 50% 0 0);transform:translate(-8px,4px) rotate(-8deg);opacity:1}100%{clip-path:inset(0 50% 0 0);transform:translate(-14px,8px) rotate(-12deg);opacity:0} } .enemy-img.enemy13.cut{animation:enemy13Cut 0.75s forwards} .enemy-img.enemy13.cut::after{content:''}
@keyframes enemy14Explode{0%{transform:scale(1);filter:brightness(1);opacity:1}30%{transform:scale(1.15);filter:brightness(1.4)}60%{transform:scale(1.3);filter:brightness(1.8) blur(1px);opacity:0.8}100%{transform:scale(1.8);filter:blur(4px);opacity:0}} .enemy-img.enemy14.explode{animation:enemy14Explode 0.75s forwards}
@keyframes enemy15Burn{0%{filter:hue-rotate(0deg) brightness(1) sepia(0);transform:scale(1)}25%{filter:hue-rotate(-30deg) brightness(1.3) sepia(0.6) saturate(1.6)}50%{filter:hue-rotate(-10deg) brightness(1.8) sepia(1) blur(0.5px);transform:scale(1.04)}100%{filter:brightness(0.2) sepia(1) blur(2px);transform:scale(0.9);opacity:0}} .enemy-img.enemy15.burn{animation:enemy15Burn 0.75s forwards}
@keyframes enemy16Vanish{0%{transform:scale(1);opacity:1;filter:blur(0px)}40%{transform:scale(1.08);opacity:0.9;filter:blur(0.5px)}100%{transform:scale(0.6);opacity:0;filter:blur(6px)}} .enemy-img.enemy16.vanish{animation:enemy16Vanish 0.75s forwards}
@keyframes enemy17Cut{0%{transform:translate(0,0) rotate(0) scale(1);clip-path:inset(0 0 0 0);filter:brightness(1)}25%{transform:translate(-2px,0) rotate(-1deg)}45%{clip-path:inset(0 50% 0 0)}55%{clip-path:inset(0 50% 0 0);transform:translate(-8px,4px) rotate(-8deg);opacity:1}100%{clip-path:inset(0 50% 0 0);transform:translate(-14px,8px) rotate(-12deg);opacity:0} } .enemy-img.enemy17.cut{animation:enemy17Cut 0.75s forwards} .enemy-img.enemy17.cut::after{content:''}
@keyframes enemy18Explode{0%{transform:scale(1);filter:brightness(1);opacity:1}30%{transform:scale(1.15);filter:brightness(1.4)}60%{transform:scale(1.3);filter:brightness(1.8) blur(1px);opacity:0.8}100%{transform:scale(1.8);filter:blur(4px);opacity:0}} .enemy-img.enemy18.explode{animation:enemy18Explode 0.75s forwards}
@keyframes enemy19Burn{0%{filter:hue-rotate(0deg) brightness(1) sepia(0);transform:scale(1)}25%{filter:hue-rotate(-30deg) brightness(1.3) sepia(0.6) saturate(1.6)}50%{filter:hue-rotate(-10deg) brightness(1.8) sepia(1) blur(0.5px);transform:scale(1.04)}100%{filter:brightness(0.2) sepia(1) blur(2px);transform:scale(0.9);opacity:0}} .enemy-img.enemy19.burn{animation:enemy19Burn 0.75s forwards}
@keyframes enemy20Vanish{0%{transform:scale(1);opacity:1;filter:blur(0px)}40%{transform:scale(1.08);opacity:0.9;filter:blur(0.5px)}100%{transform:scale(0.6);opacity:0;filter:blur(6px)}} .enemy-img.enemy20.vanish{animation:enemy20Vanish 0.75s forwards}
@keyframes enemy21Cut{0%{transform:translate(0,0) rotate(0) scale(1);clip-path:inset(0 0 0 0);filter:brightness(1)}25%{transform:translate(-2px,0) rotate(-1deg)}45%{clip-path:inset(0 50% 0 0)}55%{clip-path:inset(0 50% 0 0);transform:translate(-8px,4px) rotate(-8deg);opacity:1}100%{clip-path:inset(0 50% 0 0);transform:translate(-14px,8px) rotate(-12deg);opacity:0} } .enemy-img.enemy21.cut{animation:enemy21Cut 0.75s forwards} .enemy-img.enemy21.cut::after{content:''}
@keyframes enemy22Explode{0%{transform:scale(1);filter:brightness(1);opacity:1}30%{transform:scale(1.15);filter:brightness(1.4)}60%{transform:scale(1.3);filter:brightness(1.8) blur(1px);opacity:0.8}100%{transform:scale(1.8);filter:blur(4px);opacity:0}} .enemy-img.enemy22.explode{animation:enemy22Explode 0.75s forwards}
@keyframes enemy23Burn{0%{filter:hue-rotate(0deg) brightness(1) sepia(0);transform:scale(1)}25%{filter:hue-rotate(-30deg) brightness(1.3) sepia(0.6) saturate(1.6)}50%{filter:hue-rotate(-10deg) brightness(1.8) sepia(1) blur(0.5px);transform:scale(1.04)}100%{filter:brightness(0.2) sepia(1) blur(2px);transform:scale(0.9);opacity:0}} .enemy-img.enemy23.burn{animation:enemy23Burn 0.75s forwards}
@keyframes enemy24Vanish{0%{transform:scale(1);opacity:1;filter:blur(0px)}40%{transform:scale(1.08);opacity:0.9;filter:blur(0.5px)}100%{transform:scale(0.6);opacity:0;filter:blur(6px)}} .enemy-img.enemy24.vanish{animation:enemy24Vanish 0.75s forwards}
@keyframes enemy25Cut{0%{transform:translate(0,0) rotate(0) scale(1);clip-path:inset(0 0 0 0);filter:brightness(1)}25%{transform:translate(-2px,0) rotate(-1deg)}45%{clip-path:inset(0 50% 0 0)}55%{clip-path:inset(0 50% 0 0);transform:translate(-8px,4px) rotate(-8deg);opacity:1}100%{clip-path:inset(0 50% 0 0);transform:translate(-14px,8px) rotate(-12deg);opacity:0} } .enemy-img.enemy25.cut{animation:enemy25Cut 0.75s forwards} .enemy-img.enemy25.cut::after{content:''}
@keyframes enemy26Explode{0%{transform:scale(1);filter:brightness(1);opacity:1}30%{transform:scale(1.15);filter:brightness(1.4)}60%{transform:scale(1.3);filter:brightness(1.8) blur(1px);opacity:0.8}100%{transform:scale(1.8);filter:blur(4px);opacity:0}} .enemy-img.enemy26.explode{animation:enemy26Explode 0.75s forwards}
@keyframes enemy27Burn{0%{filter:hue-rotate(0deg) brightness(1) sepia(0);transform:scale(1)}25%{filter:hue-rotate(-30deg) brightness(1.3) sepia(0.6) saturate(1.6)}50%{filter:hue-rotate(-10deg) brightness(1.8) sepia(1) blur(0.5px);transform:scale(1.04)}100%{filter:brightness(0.2) sepia(1) blur(2px);transform:scale(0.9);opacity:0}} .enemy-img.enemy27.burn{animation:enemy27Burn 0.75s forwards}
@keyframes enemy28Vanish{0%{transform:scale(1);opacity:1;filter:blur(0px)}40%{transform:scale(1.08);opacity:0.9;filter:blur(0.5px)}100%{transform:scale(0.6);opacity:0;filter:blur(6px)}} .enemy-img.enemy28.vanish{animation:enemy28Vanish 0.75s forwards}
@keyframes enemy29Cut{0%{transform:translate(0,0) rotate(0) scale(1);clip-path:inset(0 0 0 0);filter:brightness(1)}25%{transform:translate(-2px,0) rotate(-1deg)}45%{clip-path:inset(0 50% 0 0)}55%{clip-path:inset(0 50% 0 0);transform:translate(-8px,4px) rotate(-8deg);opacity:1}100%{clip-path:inset(0 50% 0 0);transform:translate(-14px,8px) rotate(-12deg);opacity:0} } .enemy-img.enemy29.cut{animation:enemy29Cut 0.75s forwards} .enemy-img.enemy29.cut::after{content:''}
@keyframes enemy30Explode{0%{transform:scale(1);filter:brightness(1);opacity:1}30%{transform:scale(1.15);filter:brightness(1.4)}60%{transform:scale(1.3);filter:brightness(1.8) blur(1px);opacity:0.8}100%{transform:scale(1.8);filter:blur(4px);opacity:0}} .enemy-img.enemy30.explode{animation:enemy30Explode 0.75s forwards}
@keyframes enemy31Burn{0%{filter:hue-rotate(0deg) brightness(1) sepia(0);transform:scale(1)}25%{filter:hue-rotate(-30deg) brightness(1.3) sepia(0.6) saturate(1.6)}50%{filter:hue-rotate(-10deg) brightness(1.8) sepia(1) blur(0.5px);transform:scale(1.04)}100%{filter:brightness(0.2) sepia(1) blur(2px);transform:scale(0.9);opacity:0}} .enemy-img.enemy31.burn{animation:enemy31Burn 0.75s forwards}

.enemy-burst{position:absolute;inset:-6px;pointer-events:none;opacity:0}
.enemy-img.explode ~ .enemy-burst,.enemy-img.burn ~ .enemy-burst{opacity:1;animation:burst 0.7s}
@keyframes burst{0%{transform:scale(0.5);opacity:0}20%{opacity:1}100%{transform:scale(1.5);opacity:0}}
.enemy-burst span{position:absolute;width:6px;height:6px;border-radius:50%;background:currentColor}