.battle-grid {
  grid-template-columns: repeat(3, 100px) 20px repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  justify-content: center;
  align-content: center;
  gap: 5px 0;
  min-height: 322px;
  width: 620px;
  aspect-ratio: auto;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  background-color: #101923;
  background-image: linear-gradient(#1a2938,#101923);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.battle-screen.combat-active > .battle-title,
.battle-screen.combat-active > .battle-exp-top { display:none !important; }
[hidden] { display:none !important; }
.adventure-waiting-screen { max-width:980px; margin:0 auto; }
.waiting-title { margin-bottom:14px; padding:20px; border:1px solid #3f6482; border-radius:14px; background:linear-gradient(115deg,#1a3858,#101f35 72%); box-shadow:0 10px 28px #0004; }
.waiting-title small { color:#f0bd55; letter-spacing:.15em; }
.waiting-title h1 { margin:4px 0; }
.waiting-title p { margin:6px 0 0; color:#b8cbe0; }
.adventure-waiting-mode .waiting-title { margin-bottom:8px; padding:10px 14px; border-radius:10px; box-shadow:none; }
.adventure-waiting-mode .waiting-title small { font-size:9px; }
.adventure-waiting-mode .waiting-title h1 { margin:1px 0; font-size:21px; line-height:1.15; }
.adventure-waiting-mode .waiting-title p { margin:2px 0 0; font-size:12px; }
.waiting-content { overflow:hidden; border:1px solid #365672; border-radius:14px; background:#0b1727; box-shadow:0 14px 38px #0004; }
.waiting-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:16px 0; }
.side-attack-label {
  position:absolute;
  z-index:20;
  left:50%;
  top:-22px;
  transform:translateX(-50%);
  width:max-content;
  padding:3px 7px;
  border:1px solid #ffd166;
  border-radius:999px;
  background:#351900e8;
  color:#ffe08a;
  font:900 11px/1 sans-serif;
  letter-spacing:.04em;
  text-shadow:0 1px 2px #000;
}
.battle-map-image {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 100px;
  border-radius: 9px 9px 0 0;
  width: 100%;
  object-fit: fill;
  object-position: left center;
  opacity: 1;
  pointer-events: none;
  display: block;
}
.battle-cell {
  width: 100px;
  height: 100px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-color: #ffffff24;
}
.battle-cell[data-x="0"] { grid-column: 1; z-index: 2; }
.battle-cell[data-x="1"] { grid-column: 2; z-index: 3; }
.battle-cell[data-x="2"] { grid-column: 3; z-index: 4; }
.battle-cell[data-x="3"] { grid-column: 5; z-index: 4; }
.battle-cell[data-x="4"] { grid-column: 6; z-index: 3; }
.battle-cell[data-x="5"] { grid-column: 7; z-index: 2; }
.battle-cell[data-y="0"] { grid-row: 1; }
.battle-cell[data-y="1"] { grid-row: 2; }
.battle-cell[data-y="2"] { grid-row: 3; }
.battle-cell:hover { z-index: 8; }
.battle-cell:disabled { cursor: default; filter: grayscale(.28); }
.unit-visual {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100px;
  height: 100px;
  display: block;
  pointer-events: none;
}
.battle-cell .unit-visual img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 0;
  display: block;
  filter: drop-shadow(0 3px 3px #000a);
}
.unit-hp {
  position: absolute;
  left: 27px;
  width: 46px;
  top: -4px;
  height: 7px;
  overflow: hidden;
  border: 1px solid #071017;
  border-radius: 999px;
  background: #380a0d;
  box-shadow: 0 1px 3px #000b;
  z-index: 4;
}
.hero-floor-enter .unit-visual { animation: hero-floor-enter .18s steps(1,end) 1 both; animation-delay: var(--entry-delay,0ms); }
.enemy-floor-spawn .unit-visual { animation: enemy-floor-spawn .62s cubic-bezier(.2,.85,.3,1.2) both; animation-delay: var(--entry-delay,0ms); }
.floor-leaving .player-cell .unit-visual { animation: hero-floor-leave .18s steps(1,end) 1 both; }
.unit-visual.knockback-player { animation: knockback-player .16s steps(1,end) 1 both; }
.unit-visual.knockback-enemy { animation: knockback-enemy .16s steps(1,end) 1 both; }
.unit-visual.unit-delta-move { animation: unit-delta-move .32s cubic-bezier(.2,.72,.25,1) 1 both; }
.unit-visual.unit-knockback-pending { transform:translate(calc(var(--move-dx) * 100px),calc(var(--move-dy) * 100px)); }
.unit-visual.unit-knockback-move { animation: unit-knockback-move .16s steps(1,end) 1 both; }
.unit-hp i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,#3edb62,#b8f36b);
  transition: width .22s ease;
}
.battle-cell[data-y="1"] .unit-hp,
.battle-cell[data-y="2"] .unit-hp { top: 4px; }
.unit-visual.battle-host::before {
  content:"";
  position:absolute;
  z-index:0;
  left:14px;
  top:10px;
  width:72px;
  height:82px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,226,91,.22) 0,rgba(255,180,35,.11) 46%,transparent 72%);
  box-shadow:0 0 10px rgba(255,210,61,.24);
  pointer-events:none;
}
.unit-visual.battle-host img { position:relative;z-index:1; }
.unit-visual.battle-host .unit-hp { border-color:#fff0a0;background:#493300;box-shadow:0 0 5px #ffc52d99,0 1px 3px #000b; }
.unit-visual.battle-host .unit-hp i { background:linear-gradient(90deg,#ffb51c,#fff176); }
.unit-visual.battle-host .unit-hp::after {
  content:"";
  position:absolute;
  right:7px;
  top:-3px;
  width:2px;
  height:13px;
  transform:rotate(45deg);
  background:#fff;
  box-shadow:0 0 4px #fff8a8;
  opacity:.9;
}
.player-dead { cursor:pointer; }
.player-dead .unit-hp,
.npc-defeated .unit-hp { display:none; }
.coffin-visual img { filter:drop-shadow(0 4px 4px #000c) grayscale(.08)!important; }
.unit-visual.player-dying { animation:player-death-hit .48s steps(4,end) both; transform-origin:center 72%; }
.unit-visual.player-reviving { animation:player-revive-return .75s cubic-bezier(.15,.72,.2,1.15) both; transform-origin:center 72%; }
.battle-screen.party-death-impact::after {
  content:"";
  position:fixed;
  z-index:9998;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center,transparent 18%,#d00000aa 100%);
  animation:party-death-flash .72s steps(3,end) both;
}
.battle-effect {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  pointer-events: none;
}
.effect-player_attack,.effect-enemy_attack {
  background-image: url('../img/effect/weapon_attack.png');
  background-repeat: no-repeat;
  background-size: 400% 100%;
  animation: weapon-sprite .62s steps(4) both;
}
.effect-player_attack { border-radius: 50%; box-shadow: inset 0 0 34px #fff,0 0 28px #ffe16b; }
.effect-npc_skill_attack { border-radius:50%; background:radial-gradient(circle,#fff 0 8%,#69d8ff 12% 25%,#2869d7aa 42%,transparent 70%); box-shadow:0 0 30px #86e8ff; animation:skill-burst .55s ease-out 1 both; }
.effect-npc_skill_attack.skill-slash { background:linear-gradient(135deg,transparent 32%,#fff 42% 48%,#68d4ff 51% 58%,transparent 65%); transform:rotate(-13deg); }
.effect-npc_skill_attack.skill-thrust { background:radial-gradient(ellipse at 20% 50%,#fff 0 5%,#ffdc72 8% 14%,transparent 48%); box-shadow:inset -38px 0 26px #ff8d3966; }
.effect-npc_skill_attack.skill-magic { background:conic-gradient(from 0deg,#98f5ff,#735eff,#ff70d2,#98f5ff); border:7px double #fff; opacity:.88; animation:magic-spin .6s ease-out 1 both; }
.effect-npc_skill_attack.skill-holy { background:radial-gradient(circle,#fff 0 10%,#fff59b 20%,#ffd23a77 42%,transparent 70%); }
.effect-npc_skill_attack.skill-fire { border-radius:48% 52% 56% 44%; background:radial-gradient(circle at 50% 70%,#fff 0 7%,#fff15b 13%,#ff9a20 28%,#ef2818cc 50%,transparent 72%); box-shadow:0 0 24px #ffb126,0 0 48px #e82a18aa; animation:element-fire .68s ease-out both; }
.effect-npc_skill_attack.skill-fire::before,.effect-npc_skill_attack.skill-fire::after { content:""; position:absolute; left:25%; bottom:12%; width:28%; height:72%; border-radius:50% 50% 42% 42%; background:linear-gradient(0deg,#fff476,#ff5a16 48%,transparent 90%); filter:blur(1px); transform:rotate(-13deg); }
.effect-npc_skill_attack.skill-fire::after { left:50%; height:58%; transform:rotate(17deg); }
.effect-npc_skill_attack.skill-lightning { background:linear-gradient(112deg,transparent 0 37%,#fff 38% 43%,#8feaff 44% 49%,transparent 50% 100%); filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #38bfff); animation:element-lightning .58s steps(4,end) both; }
.effect-npc_skill_attack.skill-lightning::before,.effect-npc_skill_attack.skill-lightning::after { content:""; position:absolute; inset:-16% 18%; background:#e9ffff; clip-path:polygon(56% 0,28% 42%,49% 42%,25% 100%,78% 36%,57% 36%); filter:drop-shadow(0 0 7px #25c8ff); }
.effect-npc_skill_attack.skill-lightning::after { inset:5% 2% 4% 50%; transform:scale(.65) rotate(12deg); opacity:.8; }
.effect-npc_skill_attack.skill-ice { background:conic-gradient(from 12deg at 50% 50%,transparent 0 8%,#eaffff 9% 14%,#68dfff 15% 22%,transparent 23% 33%,#fff 34% 39%,#57bbff 40% 47%,transparent 48% 100%); filter:drop-shadow(0 0 9px #75eaff); animation:element-ice .72s ease-out both; }
.effect-npc_skill_attack.skill-ice::before { content:""; position:absolute; inset:18%; background:linear-gradient(135deg,#fff,#7cddff 55%,#2474cc); clip-path:polygon(50% 0,63% 37%,100% 50%,63% 62%,50% 100%,37% 62%,0 50%,37% 37%); }
.effect-npc_skill_attack.skill-water { border-radius:50%; border:7px double #c5fbff; background:radial-gradient(circle,transparent 22%,#6de8ff99 25% 37%,transparent 40% 48%,#168edc88 51% 63%,transparent 66%); box-shadow:0 0 22px #46d8ff; animation:element-water .72s ease-out both; }
.effect-npc_skill_attack.skill-wind { border-radius:50%; background:repeating-conic-gradient(from 0deg,transparent 0 17deg,#ddffffcc 20deg 25deg,transparent 28deg 55deg); box-shadow:inset 0 0 16px #baffff,0 0 22px #58e0d9; animation:element-wind .68s ease-out both; }
.effect-npc_skill_attack.skill-earth { background:linear-gradient(155deg,transparent 25%,#e5b86b 27% 36%,transparent 38%),linear-gradient(25deg,transparent 35%,#9a612f 37% 49%,transparent 51%); filter:drop-shadow(0 0 8px #ffca78); animation:element-earth .65s ease-out both; }
.effect-npc_skill_attack.skill-earth::before { content:""; position:absolute; inset:20% 8% 8%; background:linear-gradient(135deg,#e4bb72,#68401f); clip-path:polygon(9% 79%,26% 31%,42% 60%,61% 13%,91% 78%); }
.effect-npc_skill_attack.skill-explosion { border-radius:50%; background:radial-gradient(circle,#fff 0 8%,#fff35b 12% 22%,#ff7a1a 28% 42%,#d7190d 49% 57%,transparent 72%); box-shadow:0 0 28px #fff18a,0 0 52px #f23218; animation:element-explosion .7s ease-out both; }
.effect-npc_skill_attack.skill-dark { border-radius:50%; background:radial-gradient(circle,#030006 0 17%,#4d176e 29%,#b43cffaa 43%,#17001fcc 58%,transparent 72%); box-shadow:0 0 28px #a43cff; animation:element-dark .78s ease-out both; }
.effect-npc_skill_attack.skill-poison { overflow:visible; border-radius:50%; background:radial-gradient(circle at 17% 76%,#fff 0 3%,#caffad 4% 7%,#62d82e 9% 13%,transparent 15%),radial-gradient(circle at 35% 46%,#efffa3 0 4%,#78df35 7% 12%,transparent 14%),radial-gradient(circle at 57% 73%,#fff 0 3%,#b9ff88 5% 9%,#469f1f 11% 15%,transparent 17%),radial-gradient(circle at 76% 34%,#eaff8a 0 5%,#5abb1e 8% 14%,transparent 16%),radial-gradient(circle at 86% 70%,#fff 0 2%,#d8ffc4 4% 7%,#58bc28 9% 12%,transparent 14%),radial-gradient(circle,#51216d,#226d22aa 48%,transparent 70%); box-shadow:0 0 28px #69d331,0 0 46px #8cff5966; animation:element-poison 1.2s ease-out both; }
.effect-npc_skill_attack.skill-poison::before,.effect-npc_skill_attack.skill-poison::after { content:""; position:absolute; inset:-8%; border-radius:50%; background:radial-gradient(circle at 22% 78%,#fff 0 3%,#a9ff75 4% 7%,transparent 9%),radial-gradient(circle at 44% 59%,#efffdc 0 2%,#55d221 4% 7%,transparent 9%),radial-gradient(circle at 67% 80%,#fff 0 2%,#8cf24d 4% 8%,transparent 10%),radial-gradient(circle at 81% 54%,#f7fff0 0 3%,#50b925 5% 8%,transparent 10%); animation:poison-bubbles-rise 1.2s ease-out both; }
.effect-npc_skill_attack.skill-poison::after { inset:4%; transform:scale(.82); animation-delay:.13s; filter:brightness(1.25); }
.effect-npc_skill_attack.skill-sleep { overflow:visible; border-radius:50%; background:radial-gradient(circle at 25% 72%,#fff 0 4%,#dff7ff 6% 10%,transparent 13%),radial-gradient(circle at 55% 44%,#fff 0 5%,#bbddff 7% 13%,transparent 16%),radial-gradient(circle at 78% 70%,#fff 0 3%,#d8eaff 5% 10%,transparent 13%),radial-gradient(circle,#a8dcff66,#435ab077 48%,transparent 72%); box-shadow:0 0 28px #c8ebff,0 0 52px #718fff88; animation:sleep-cloud-drift 1.35s ease-out both; }
.effect-npc_skill_attack.skill-sleep::before { content:"○  ◯  ○  ◯"; position:absolute; inset:12% -8% auto; color:#fff; font:900 22px/1 sans-serif; letter-spacing:.18em; text-align:center; text-shadow:0 0 6px #fff,0 0 13px #8acbff; animation:poison-bubbles-rise 1.25s ease-out both; }
.effect-npc_skill_attack.skill-sleep::after { content:"Z  z  Z"; position:absolute; right:-2%; top:-18%; color:#fff; font:900 27px/1 sans-serif; letter-spacing:.12em; text-shadow:0 0 5px #fff,0 0 14px #65a9ff,0 2px 2px #23306a; animation:sleep-letters 1.35s ease-out both; }
.effect-npc_skill_attack.skill-arrow { background:linear-gradient(105deg,transparent 33%,#fff 36% 40%,#cda45d 43% 49%,transparent 52%); filter:drop-shadow(0 0 8px #fff2a0); animation:skill-burst .55s ease-out both; }
.effect-npc_skill_attack.skill-wave { border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 12%,#8ceaffcc 14% 18%,transparent 20% 29%); filter:drop-shadow(0 0 8px #41cfff); animation:element-water .72s ease-out both; }
.effect-npc_skill_attack.skill-low_strike{background:radial-gradient(ellipse at 50% 86%,#fff 0 4%,#ffd76f 8% 13%,#ff6b2f88 22%,transparent 48%);box-shadow:inset 0 -22px 24px -15px #ff8c3f;animation:low-strike-impact .65s ease-out both}
.effect-npc_skill_attack.skill-low_strike::before,.effect-npc_skill_attack.skill-low_strike::after{content:"";position:absolute;left:3%;right:3%;bottom:9%;height:31%;border-bottom:7px solid #fff4bd;border-radius:50%;filter:drop-shadow(0 0 7px #ff9f45);transform:rotate(-9deg)}
.effect-npc_skill_attack.skill-low_strike::after{left:22%;right:10%;bottom:20%;border-color:#ff9745;opacity:.78;transform:rotate(12deg)}
.effect-npc_skill_attack.skill-high_strike{background:radial-gradient(ellipse at 50% 16%,#fff 0 5%,#bcecff 9% 15%,#539dff88 23%,transparent 49%);box-shadow:inset 0 24px 25px -17px #6fc8ff;animation:high-strike-impact .68s ease-out both}
.effect-npc_skill_attack.skill-high_strike::before,.effect-npc_skill_attack.skill-high_strike::after{content:"";position:absolute;left:12%;right:2%;top:7%;height:35%;border-top:8px solid #f4fdff;border-radius:50%;filter:drop-shadow(0 0 8px #5cbfff);transform:rotate(13deg)}
.effect-npc_skill_attack.skill-high_strike::after{left:5%;right:30%;top:23%;border-color:#80d5ff;opacity:.75;transform:rotate(-16deg)}
.effect-npc_skill_attack.skill-bite{overflow:visible;border-radius:46%;background:radial-gradient(ellipse at center,#fff 0 5%,#ffe7a4 9% 15%,#a41e1e99 24%,transparent 57%);box-shadow:inset 0 0 26px #ffefb0,0 0 28px #ff3d2a99;animation:fang-bite-impact .78s cubic-bezier(.18,.72,.22,1) both}
.effect-npc_skill_attack.skill-bite::before,.effect-npc_skill_attack.skill-bite::after{content:"";position:absolute;z-index:2;left:7%;right:7%;height:48%;background:linear-gradient(135deg,transparent 0 12%,#fff9df 13% 27%,#d9c38f 28% 33%,transparent 34% 43%,#fff 44% 59%,#d7bd7e 60% 65%,transparent 66% 75%,#fff8dc 76% 89%,transparent 90%);filter:drop-shadow(0 2px 3px #4d0b09) drop-shadow(0 0 8px #fff1a3);transform-origin:center 100%;animation:fang-jaw-top .78s cubic-bezier(.2,.82,.25,1) both}
.effect-npc_skill_attack.skill-bite::before{top:-10%;clip-path:polygon(0 0,100% 0,100% 44%,90% 34%,82% 100%,69% 38%,57% 96%,43% 38%,31% 96%,18% 38%,10% 100%,0 44%)}
.effect-npc_skill_attack.skill-bite::after{bottom:-10%;clip-path:polygon(0 100%,100% 100%,100% 56%,90% 66%,82% 0,69% 62%,57% 4%,43% 62%,31% 4%,18% 62%,10% 0,0 56%);transform-origin:center 0;animation-name:fang-jaw-bottom}
.effect-npc_skill_attack.skill-weapon_combo{border-radius:50%;background-image:url('../img/effect/weapon_attack.png');background-repeat:no-repeat;background-size:400% 100%;box-shadow:inset 0 0 38px #fff,0 0 35px #ffbe43;animation:weapon-combo-sprite .92s steps(4,end) both}
.effect-npc_skill_attack.skill-heal_grand{overflow:visible;background:radial-gradient(circle at 50% 76%,#fff 0 8%,#d8fff2 13%,#6effbcaa 29%,#7d8dff55 48%,transparent 72%);box-shadow:0 0 32px #8bffd0,0 0 68px #8d86ff99;animation:grand-heal-aura 1.35s ease-out both}
.effect-npc_skill_attack.skill-holy_rain{overflow:visible;background:repeating-linear-gradient(102deg,transparent 0 13%,#fffad188 15% 18%,transparent 21% 31%),radial-gradient(circle,#fff 0 8%,#ffe77b77 24%,transparent 67%);box-shadow:0 0 30px #fff2a1;animation:holy-rain .95s ease-out both}
.effect-npc_skill_attack.skill-holy_rain::before,.effect-npc_skill_attack.skill-holy_rain::after{content:"✦";position:absolute;left:14%;top:-24%;color:#fffbd0;font-size:28px;text-shadow:0 0 10px #fff,0 0 20px #ffd34e;animation:holy-star-fall .86s ease-in both}.effect-npc_skill_attack.skill-holy_rain::after{left:65%;animation-delay:.12s}
.effect-npc_skill_attack.skill-meteor_burst{border-radius:50%;background:radial-gradient(circle at 48% 52%,#fff 0 7%,#fff45a 11% 19%,#ff8c22 24% 37%,#d31c0c 43% 54%,#260306aa 62%,transparent 73%);box-shadow:0 0 34px #fff18a,0 0 72px #ed2918;animation:meteor-burst .82s cubic-bezier(.12,.7,.2,1) both}
.effect-npc_skill_attack.skill-meteor_burst::before{content:"";position:absolute;left:35%;top:-60%;width:30%;height:100%;border-radius:50%;background:linear-gradient(#fff0,#ffed84,#ff561c);filter:blur(4px);transform:rotate(23deg)}
.effect-npc_skill_heal { overflow:visible; border-radius:50%; background:radial-gradient(ellipse at 50% 88%,#fff 0 5%,#baffda 10%,#52f6a277 27%,transparent 58%); box-shadow:0 22px 28px -20px #72ffbd,0 0 24px #64ffad66; animation:heal-aura 1.18s ease-out 1 both; }
.effect-npc_skill_heal.skill-heal_grand{background:radial-gradient(ellipse at 50% 88%,#fff 0 8%,#dfffee 13%,#62ffc1aa 29%,#897dff55 48%,transparent 72%);box-shadow:0 0 35px #a7ffda,0 0 72px #8d86ff88;animation:grand-heal-aura 1.35s ease-out both}
.effect-npc_skill_heal.skill-heal_grand::before{left:-8%;right:-8%;height:112%;background:repeating-linear-gradient(90deg,transparent 0 6%,#eafff299 8% 11%,transparent 13% 20%),linear-gradient(0deg,#6bffc2dd,transparent 88%)}
.effect-npc_skill_heal.skill-heal_grand::after{content:"✦ ✧ ✦ ✧ ✦";left:-12%;right:-12%;font-size:27px;color:#fff;text-shadow:0 0 6px #fff,0 0 15px #67ffc2,0 0 27px #a076ff}
.effect-npc_skill_heal::before { content:""; position:absolute; left:11%; right:11%; bottom:4px; height:88%; border-radius:50% 50% 42% 42%; background:repeating-linear-gradient(90deg,transparent 0 8%,#b8ffe466 10% 13%,transparent 16% 24%),linear-gradient(0deg,#4dff9ebb,transparent 82%); filter:blur(2px) drop-shadow(0 0 7px #82ffd0); transform-origin:center bottom; animation:heal-fountain 1.08s cubic-bezier(.16,.75,.25,1) both; }
.effect-npc_skill_heal::after { content:"✦  ✧  ✦"; position:absolute; left:4%; right:4%; bottom:10%; color:#effff6; font-size:24px; letter-spacing:9px; text-align:center; text-shadow:0 0 5px #fff,0 0 12px #57ffaf; animation:heal-stars 1.12s ease-out both; }
.effect-npc_skill_heal b { position:absolute; z-index:2; left:var(--spark-x); bottom:8%; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 4px #fff,0 0 10px #5dffb2; animation:heal-spark .82s ease-out var(--spark-delay) both; }
.effect-revive { overflow:visible; border-radius:50%; background:radial-gradient(circle,#fff 0 8%,#d8fff0 15%,#72ffc499 34%,transparent 68%); box-shadow:0 0 28px #bffff0,0 0 58px #40f5a899; animation:revive-aura 1.2s ease-out both; }
.effect-revive::before,.effect-revive::after { content:""; position:absolute; inset:8%; border:4px solid #e9fff6; border-radius:50%; box-shadow:0 0 13px #75ffc5; animation:revive-ring 1s ease-out both; }
.effect-revive::after { inset:25%; animation-delay:.13s; }
.effect-revive b { position:absolute; z-index:2; left:var(--spark-x); bottom:8%; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 5px #fff,0 0 12px #5dffb2; animation:heal-spark .82s ease-out var(--spark-delay) both; }
.effect-skill_buff{overflow:visible;border-radius:50%;background:radial-gradient(circle,#fff 0 6%,#ffe872 12% 22%,#ff8a2d99 38%,transparent 70%);box-shadow:0 0 18px #fff08a,0 0 42px #ff7a35;animation:skill-buff-rise 1.05s ease-out both}
.effect-skill_buff::before,.effect-skill_buff::after{content:"";position:absolute;inset:9%;border:4px solid #ffe990;border-radius:50%;animation:skill-buff-ring .85s ease-out both}.effect-skill_buff::after{inset:24%;animation-delay:.12s}.effect-skill_buff .buff-value{position:absolute;z-index:4;left:50%;bottom:82%;min-width:120px;transform:translateX(-50%);padding:3px 8px;border:1px solid #ffe680;border-radius:999px;background:#281406e8;color:#fff0a0;font-style:normal;font-size:13px;text-align:center;text-shadow:0 1px 3px #000;white-space:nowrap;animation:skill-buff-label 1.05s ease-out both}
@keyframes skill-buff-rise{0%{opacity:0;transform:scale(.45) translateY(18px)}30%{opacity:1;transform:scale(1.15) translateY(0)}100%{opacity:0;transform:scale(1.35) translateY(-18px)}}
@keyframes skill-buff-ring{0%{opacity:0;transform:scale(.25)}40%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@keyframes skill-buff-label{0%{opacity:0;transform:translate(-50%,12px) scale(.8)}25%,70%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-18px)}}
.npc-member { border-color:#61d9ff!important; background:#10314b!important; }
.npc-cell::after { content:'NPC'; position:absolute; right:2px; bottom:2px; z-index:9; padding:1px 3px; border-radius:4px; background:#126083cc; color:#dff8ff; font-size:8px; font-weight:800; }
@keyframes skill-burst { 0%{transform:scale(.2);opacity:0}45%{transform:scale(1.2);opacity:1}100%{transform:scale(1.55);opacity:0} }
@keyframes magic-spin { 0%{transform:scale(.25) rotate(0);opacity:0}55%{transform:scale(1) rotate(210deg);opacity:1}100%{transform:scale(1.35) rotate(360deg);opacity:0} }
@keyframes heal-aura { 0%{transform:scale(.6);opacity:0} 18%,70%{transform:scale(1);opacity:1} 100%{transform:scale(1.18);opacity:0} }
@keyframes heal-fountain { 0%{transform:translateY(22px) scale(.45,.12);opacity:0} 24%{opacity:1} 72%{transform:translateY(-12px) scale(1,1.12);opacity:.92} 100%{transform:translateY(-34px) scale(.82,1.35);opacity:0} }
@keyframes heal-stars { 0%{transform:translateY(22px) scale(.55) rotate(-5deg);opacity:0} 25%,68%{opacity:1} 100%{transform:translateY(-58px) scale(1.15) rotate(8deg);opacity:0} }
@keyframes heal-spark { 0%{transform:translate(0,14px) scale(.2) rotate(0);opacity:0} 18%{opacity:1} 100%{transform:translate(var(--spark-drift),-76px) scale(1.25) rotate(180deg);opacity:0} }
@keyframes player-death-hit { 0%{opacity:1;filter:brightness(1);transform:none} 22%{filter:brightness(3) saturate(.2);transform:translate(-5px,1px) rotate(-3deg)} 46%{filter:brightness(1.4) sepia(1) saturate(6);transform:translate(5px,-1px) rotate(3deg)} 72%{opacity:.85;filter:brightness(2);transform:translate(-2px,5px) rotate(-2deg)} 100%{opacity:.16;filter:brightness(3) grayscale(1);transform:translateY(12px) scale(.82)} }
@keyframes party-death-flash { 0%{opacity:0} 16%{opacity:.92} 42%{opacity:.22} 65%{opacity:.72} 100%{opacity:0} }
@keyframes revive-aura { 0%{opacity:0;transform:scale(.35)} 25%,72%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.38)} }
@keyframes revive-ring { from{opacity:1;transform:scale(.2)} to{opacity:0;transform:scale(1.7)} }
@keyframes player-revive-return { 0%{opacity:0;filter:brightness(4);transform:translateY(14px) scale(.6)} 45%{opacity:1;filter:brightness(2);transform:translateY(-5px) scale(1.12)} 100%{opacity:1;filter:none;transform:none} }
@keyframes element-fire { 0%{opacity:0;transform:translateY(25px) scale(.35)} 35%{opacity:1;transform:translateY(-5px) scale(1.08)} 100%{opacity:0;transform:translateY(-28px) scale(1.28)} }
@keyframes element-lightning { 0%,100%{opacity:0} 14%,30%,52%,72%{opacity:1;transform:scale(1.08)} 22%,43%,63%{opacity:.22;transform:scale(.92)} }
@keyframes element-ice { 0%{opacity:0;transform:scale(.2) rotate(-18deg)} 45%{opacity:1;transform:scale(1.12) rotate(4deg)} 100%{opacity:0;transform:scale(1.38) rotate(10deg)} }
@keyframes element-water { 0%{opacity:0;transform:scale(.18)} 38%{opacity:1;transform:scale(.85)} 100%{opacity:0;transform:scale(1.45)} }
@keyframes element-wind { 0%{opacity:0;transform:scale(.25) rotate(0)} 45%{opacity:1} 100%{opacity:0;transform:scale(1.35) rotate(260deg)} }
@keyframes element-earth { 0%{opacity:0;transform:translateY(35px) scale(.6)} 42%{opacity:1;transform:translateY(-5px) scale(1.12)} 100%{opacity:0;transform:translateY(-18px) scale(1.24)} }
@keyframes element-explosion { 0%{opacity:0;transform:scale(.1)} 28%{opacity:1;transform:scale(.78)} 58%{opacity:1;transform:scale(1.25)} 100%{opacity:0;transform:scale(1.65)} }
@keyframes element-dark { 0%{opacity:0;transform:scale(1.5) rotate(0)} 45%{opacity:1;transform:scale(.82) rotate(130deg)} 100%{opacity:0;transform:scale(.3) rotate(250deg)} }
@keyframes element-poison { 0%{opacity:0;transform:translateY(24px) scale(.45)} 24%,74%{opacity:1} 100%{opacity:0;transform:translateY(-35px) scale(1.32)} }
@keyframes poison-bubbles-rise { 0%{opacity:0;transform:translateY(26px) scale(.45)} 25%,72%{opacity:1} 100%{opacity:0;transform:translateY(-38px) scale(1.22)} }
@keyframes sleep-cloud-drift { 0%{opacity:0;transform:translate(8px,20px) scale(.55)} 28%,75%{opacity:1} 100%{opacity:0;transform:translate(-9px,-25px) scale(1.2)} }
@keyframes sleep-letters { 0%{opacity:0;transform:translate(-8px,18px) scale(.45) rotate(-8deg)} 28%,72%{opacity:1} 100%{opacity:0;transform:translate(14px,-34px) scale(1.18) rotate(8deg)} }
@keyframes low-strike-impact{0%{opacity:0;transform:translateY(26px) scale(.35,.7)}35%{opacity:1;transform:translateY(4px) scale(1.08,.9)}65%{transform:translateY(0) scale(1.18,1)}100%{opacity:0;transform:translateY(-5px) scale(1.35,.85)}}
@keyframes high-strike-impact{0%{opacity:0;transform:translateY(-28px) scale(.38,.72)}38%{opacity:1;transform:translateY(-3px) scale(1.1,.9)}68%{transform:scale(1.2)}100%{opacity:0;transform:translateY(6px) scale(1.38,.86)}}
@keyframes fang-bite-impact{0%{opacity:0;transform:scale(1.25)}20%{opacity:.75}45%{opacity:1;transform:scale(.86)}58%{filter:brightness(2.6);transform:scale(.93)}100%{opacity:0;transform:scale(1.18)}}
@keyframes fang-jaw-top{0%{opacity:0;transform:translateY(-34px) scaleY(.78)}18%{opacity:1}47%{transform:translateY(22px) scaleY(1.08)}61%{transform:translateY(15px) scaleY(.95)}100%{opacity:0;transform:translateY(-15px) scaleY(.86)}}
@keyframes fang-jaw-bottom{0%{opacity:0;transform:translateY(34px) scaleY(.78)}18%{opacity:1}47%{transform:translateY(-22px) scaleY(1.08)}61%{transform:translateY(-15px) scaleY(.95)}100%{opacity:0;transform:translateY(15px) scaleY(.86)}}
@keyframes weapon-combo-sprite{0%{background-position:0 0;opacity:0;transform:scale(.65) rotate(-8deg)}12%{opacity:1}75%{background-position:133.333% 0;opacity:1;transform:scale(1.18) rotate(5deg)}100%{background-position:133.333% 0;opacity:0;transform:scale(1.42) rotate(9deg)}}
@keyframes grand-heal-aura{0%{opacity:0;transform:translateY(24px) scale(.35)}25%{opacity:1;transform:translateY(0) scale(1.05)}68%{opacity:1;filter:brightness(1.45)}100%{opacity:0;transform:translateY(-34px) scale(1.42)}}
@keyframes holy-rain{0%{opacity:0;transform:translateY(-38px) scale(.65)}35%{opacity:1;transform:translateY(0) scale(1)}75%{opacity:1;filter:brightness(1.7)}100%{opacity:0;transform:translateY(24px) scale(1.2)}}
@keyframes holy-star-fall{0%{opacity:0;transform:translateY(-30px) rotate(0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translateY(110px) rotate(190deg) scale(1.25)}}
@keyframes meteor-burst{0%{opacity:0;transform:translate(26px,-42px) scale(.28)}38%{opacity:1;transform:translate(0,0) scale(.82)}62%{filter:brightness(2.4);transform:scale(1.25)}100%{opacity:0;transform:scale(1.72)}}
.battle-cell.impact-hit { animation: impact-cell-flash .24s steps(3,end) 1; }
.battle-cell.impact-hit-enemy { animation-duration: .2s; }
.battle-grid.battle-impact { animation: battle-impact-shake .24s steps(4,end) 1; }
.level-burst-origin-wave {
  position:absolute;
  z-index:45;
  width:48px;
  height:48px;
  margin:-17px 0 0 -17px;
  border:6px solid #fffbd0;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 10%,#fff5a8 18%,#ffc62f99 38%,transparent 68%);
  box-shadow:0 0 24px #fff,0 0 56px #ffd84d,0 0 90px #ff9d2f,inset 0 0 22px #fff;
  pointer-events:none;
  animation:level-burst-origin-wave .78s cubic-bezier(.04,.7,.12,1) both;
}
.level-burst-origin-wave::before,.level-burst-origin-wave::after,.level-burst-origin-wave b,.level-burst-origin-wave i,.level-burst-origin-wave em {
  content:"";
  position:absolute;
  inset:-12px;
  border:4px solid #ffd85a;
  border-radius:50%;
  box-shadow:0 0 20px #fff07a;
  animation:level-burst-ring .72s ease-out both;
}
.level-burst-origin-wave::after { animation-delay:.06s; }
.level-burst-origin-wave b { inset:-4px; border-color:#fff; animation-delay:.11s; }
.level-burst-origin-wave i { inset:-18px; border-color:#ffb52f; animation-delay:.16s; }
.level-burst-origin-wave em { inset:-28px; border-width:3px; border-color:#fff099; animation-delay:.22s; }
.level-burst-origin-wave span {
  position:absolute;
  left:50%;
  top:-34px;
  width:max-content;
  transform:translateX(-50%);
  color:#fff4a8;
  font:900 13px/1 sans-serif;
  letter-spacing:.12em;
  text-shadow:0 0 4px #fff,0 0 12px #ffb300,0 2px 3px #000;
}
.battle-grid.level-burst-origin-impact { animation:level-burst-shake .68s steps(9,end) 1; box-shadow:inset 0 0 90px #fff7a4aa,0 0 34px #ffc52f; }
.damage-number {
  position:absolute;
  z-index:70;
  left:50%;
  top:-12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:clamp(180px,36vw,280px);
  min-height:96px;
  padding:10px 22px;
  transform:translateX(-50%);
  color:#fff49b;
  font:800 clamp(42px,8.5vw,70px)/1.04 "Arial Black","Helvetica Neue",sans-serif;
  text-align:center;
  letter-spacing:0;
  white-space:nowrap;
  -webkit-text-stroke:1.5px #2a1000;
  text-shadow:-2px -2px 0 #331600,2px -2px 0 #331600,-2px 2px 0 #331600,2px 2px 0 #331600,0 0 8px #fff7c4,0 0 16px #ff9d00;
  pointer-events:none;
  animation:damage-number-pop 1.15s cubic-bezier(.12,.78,.24,1) both;
}
.damage-number::before,.damage-number::after { display:none; content:none; }
.damage-number.damage-to-player { color:#ffb3b3; text-shadow:-2px -2px 0 #420000,2px -2px 0 #420000,-2px 2px 0 #420000,2px 2px 0 #420000,0 0 11px #ff3030; }
.damage-number.half-damage { color:#9fe8ff; }
.damage-number small { display:block; margin-top:2px; color:#aeeaff; font-size:10px; letter-spacing:.08em; text-shadow:0 1px 3px #001c2c; }
.effect-level_burst_attack { border-radius:50%; background:radial-gradient(circle,#fff 0 8%,#fff7a8 10% 25%,#ffba36aa 38%,transparent 70%); box-shadow:inset 0 0 38px #fff,0 0 38px #ffd459; animation:level-burst-wave .5s ease-out 1 both; }
.enemy-defeat-pending .unit-visual { opacity:1; }
.unit-visual.enemy-destroying { animation:enemy-destroy .62s steps(5,end) 1 both; transform-origin:center 70%; }
.effect-destroy { border-radius:50%; background:radial-gradient(circle,#fff 0 7%,#fff08d 9% 20%,#ff792fbb 31%,#ff243355 48%,transparent 70%); box-shadow:0 0 18px #fff,0 0 42px #ffaf37,0 0 64px #ff283b88; animation:destroy-burst .62s ease-out 1 both; }
.effect-destroy::before,.effect-destroy::after { content:""; position:absolute; inset:13%; background:repeating-conic-gradient(from 5deg,transparent 0 13deg,#fff2ac 14deg 17deg,transparent 18deg 31deg); filter:drop-shadow(0 0 5px #ff7b2e); animation:destroy-fragments .62s ease-out 1 both; }
.effect-destroy::after { inset:24%; transform:rotate(19deg); animation-delay:.05s; }
.battle-cell.level-burst-hit { animation:level-burst-hit .42s steps(4,end) 1; }
.battle-grid.level-burst-impact { animation:level-burst-shake .42s steps(6,end) 1; }
.effect-enemy_attack { filter: hue-rotate(300deg) saturate(1.5); transform: scaleX(-1); }
.effect-move,.effect-enemy_move { border-radius: 50%; animation: move-pulse .16s steps(1,end) 1 both; }
.effect-move { box-shadow: inset 0 0 24px #73d8ff; }
.effect-enemy_move { box-shadow: inset 0 0 24px #ff785d; }
.attr-打 { filter: sepia(.35) saturate(1.6) hue-rotate(350deg); }
.attr-斬 { filter: hue-rotate(0deg) saturate(1.2); }
.attr-壊 { filter: sepia(1) saturate(3.2) hue-rotate(335deg); }
.attr-音 { filter: hue-rotate(255deg) saturate(2); }
.attr-射 { filter: hue-rotate(85deg) saturate(1.8); }
.attr-無 { filter: sepia(.35) saturate(1.6) hue-rotate(350deg); }
.attr-突 { filter: hue-rotate(175deg) saturate(2); }
.battle-player { display: grid; gap: 7px; }
.battle-player span { color: #b8cbe0; }
.party-member { border-left: 3px solid #50647d; padding-left: 7px; }
.party-member.ready { border-color: #55db7c; color: #eaffef; }
.battle-exp { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; margin:3px 0; padding:7px 8px; border:1px solid #665322; border-radius:8px; background:#17170d; }
.battle-exp-top { margin:0 18px 10px; border-color:#99762d; box-shadow:0 0 14px #ffcf3b24; }
.battle-status-bars { display:grid; gap:5px; width:min(620px,100%); margin:7px auto 0; }
.battle-status-bars[hidden] { display:none; }
.battle-resource-bars { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px; }
.battle-time-mp-row { display:grid; grid-template-columns:minmax(120px,.75fr) minmax(180px,1.25fr); gap:6px; }
.battle-exp-bottom { margin:0; border-color:#99762d; box-shadow:0 0 12px #ffcf3b20; }
.battle-status-bars .battle-exp { grid-template-columns:auto 1fr; padding:5px 7px; }
.battle-status-bars .battle-exp>small { display:none; }
.battle-status-bars [data-exp-top]>span { font-size:0; }
.battle-status-bars [data-exp-top]>span::after { content:'EXP'; font-size:11px; }
.battle-mp { border-color:#285e91; background:#0a1726; box-shadow:0 0 12px #3fa9ff20; }
.battle-mp>span,.battle-mp>small { color:#a9ddff; }
.battle-mp>div { border-color:#285e91; background:#071c31; }
.battle-mp>div>i { background:linear-gradient(90deg,#176ec6,#52c9ff 68%,#d8f8ff); box-shadow:0 0 8px #3fbfff; }
.battle-skill-actions { display:flex; flex-wrap:nowrap; gap:6px; width:min(760px,100%); margin:6px auto 0; padding:5px; overflow-x:auto; overflow-y:hidden; border:1px solid #31516f; border-radius:9px; background:#071422; scrollbar-width:thin; white-space:nowrap; -webkit-overflow-scrolling:touch; }
.battle-skill-actions[hidden] { display:none; }
.battle-command { flex:0 0 auto; min-width:96px; min-height:42px; padding:5px 10px; border:1px solid #42698e; border-radius:7px; background:linear-gradient(#1d3f60,#102a43); color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.battle-command strong,.battle-command small { display:block; white-space:nowrap; }
.battle-command.normal-command { font-size:0; }
.battle-command.normal-command::after { content:'攻撃'; font-size:14px; }
.battle-command small { margin-top:2px; color:#a9c9e5; font-size:10px; font-weight:600; }
.battle-command.selected { border-color:#ffe27a; background:linear-gradient(#9f5d20,#5a3011); box-shadow:0 0 12px #ffc34f88,inset 0 0 9px #ffd86c44; }
.battle-command:disabled { opacity:.4; cursor:not-allowed; filter:grayscale(.65); }
.battle-skill-description{width:min(760px,100%);min-height:28px;margin:4px auto 0;padding:5px 9px;overflow-x:auto;border-left:3px solid #e0b84d;background:#15180f;color:#ffeaa1;font-size:12px;white-space:nowrap;scrollbar-width:thin}.battle-skill-description[hidden]{display:none}
.battle-screen.combat-active .battle-title [data-guide] { display:none; }
.battle-chat-compose{display:grid;gap:5px;width:min(760px,100%);margin:6px auto 0;padding:6px;border:1px solid #31516f;border-radius:9px;background:#071422}.battle-chat-compose form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.battle-chat-compose input{min-width:0;min-height:38px;padding:7px 10px;border:1px solid #456782;border-radius:7px;background:#091321;color:#fff;font:inherit;font-size:16px}.battle-chat-compose form button,.battle-chat-quick button{min-height:38px;padding:6px 12px;border:1px solid #4d7397;border-radius:7px;background:#183b5c;color:#fff;font:inherit;font-weight:800;white-space:nowrap;cursor:pointer}.battle-chat-quick{display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto;-webkit-overflow-scrolling:touch}.battle-chat-quick button{flex:1 0 auto;min-height:32px;padding:4px 10px;background:#132c44;font-size:12px}.battle-side-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.battle-side>.battle-log{height:240px;min-height:0;max-height:240px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.battle-chat-log[hidden],.battle-log[hidden]{display:none}.chat-history-line{display:grid;grid-template-columns:auto 1fr;gap:7px;padding:5px 0;border-bottom:1px solid #20374d}.chat-history-line strong{color:#86d7ff;white-space:nowrap}.chat-history-line span{overflow-wrap:anywhere}.battle-lobby-log{border-color:#4f456e;background:#100d1b}.battle-lobby-log .chat-history-line{border-bottom-color:#302646}.battle-lobby-log .chat-history-line strong{color:#d0a7ff}.battle-chat-stream{position:absolute;z-index:60;inset:0;overflow:hidden;pointer-events:none}.battle-chat-bullet{position:absolute;left:100%;display:flex;align-items:center;gap:8px;width:max-content;max-width:90%;padding:6px 13px;border:1px solid #8fdcffaa;border-radius:999px;background:#071522dd;color:#fff;font-size:clamp(13px,2vw,18px);font-weight:900;white-space:nowrap;text-shadow:0 2px 3px #000;box-shadow:0 0 14px #44bfff55;animation:chat-bullet var(--chat-duration,7s) linear forwards}.battle-chat-bullet.lobby-bullet{border-color:#d5a7ffaa;background:#21122fdd;box-shadow:0 0 14px #b56dff55}.battle-chat-bullet.lobby-bullet strong{color:#e0bdff}.battle-chat-bullet strong{color:#7de1ff}.battle-chat-bullet span{color:#fff}@keyframes chat-bullet{from{transform:translateX(0)}to{transform:translateX(calc(-100vw - 120%))}}
.turn-progress { display:grid; grid-template-columns:auto 1fr minmax(72px,auto); align-items:center; gap:7px; min-height:27px; padding:5px 8px; border:1px solid #365d79; border-radius:8px; background:#0d1721; }
.turn-progress>span,.turn-progress>small { color:#a9dcff; font-size:10px; font-weight:900; white-space:nowrap; }
.turn-progress>small { text-align:right; }
.turn-progress>div { height:8px; overflow:hidden; border:1px solid #305875; border-radius:999px; background:#071018; box-shadow:inset 0 1px 3px #000; }
.turn-progress>div>i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#29a8ef,#79edff 68%,#e4ffff); box-shadow:0 0 8px #4edaff; transition:width .12s linear; }
.battle-exp>span,.battle-exp>small { color:#ffe89a; font-size:11px; font-weight:800; white-space:nowrap; }
.battle-exp>div { height:9px; overflow:hidden; border:1px solid #6c571d; border-radius:999px; background:#251d08; box-shadow:inset 0 1px 3px #000; }
.battle-exp>div>i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#e39323,#fff078 68%,#fffbd0); box-shadow:0 0 8px #ffd247; transition:width .35s ease; }
.battle-mp>div>i { background:linear-gradient(90deg,#176ec6,#52c9ff 68%,#d8f8ff); box-shadow:0 0 8px #3fbfff; }
.heal-number { color:#8dffc2!important; text-shadow:0 2px 0 #075329,0 0 10px #70ffb5!important; }
.battle-screen { position:relative; }
.battle-cutin { position:fixed; inset:0; z-index:1000; display:none; place-items:center; width:100vw; height:100vh; height:100dvh; overflow:hidden; pointer-events:none; color:#fff; }
.battle-cutin.show { display:grid; animation:cutin-fade 2.2s ease forwards; }
.battle-cutin .cutin-backdrop,.battle-cutin .cutin-rays,.battle-cutin .cutin-particles { position:absolute; inset:0; }
.battle-cutin .cutin-backdrop { background:radial-gradient(circle at center,#ffefa64d,#d87a1628 34%,#000b 76%); animation:cutin-backdrop 2.2s ease forwards; }
.battle-cutin .cutin-rays { background:repeating-conic-gradient(from 0deg,transparent 0 12deg,#ffe78233 12deg 17deg,transparent 17deg 31deg); mix-blend-mode:screen; animation:cutin-rays 1.5s ease-out forwards; }
.battle-cutin .cutin-core { position:relative; z-index:4; width:min(94vw,900px); padding:24px; text-align:center; }
.battle-cutin .cutin-core small { display:block; color:#fff4b4; font-size:clamp(12px,2vw,16px); font-weight:900; letter-spacing:.45em; text-shadow:0 0 14px #ffd35d; animation:cutin-kicker .4s ease-out both; }
.battle-cutin .cutin-core strong { display:block; margin:8px 0; color:#fff9d9; font-size:clamp(42px,10vw,100px); line-height:.95; letter-spacing:.07em; -webkit-text-stroke:2px #783d0055; text-shadow:0 0 9px #fff,0 0 28px #ffd65d,0 6px 18px #000b; animation:cutin-title .72s cubic-bezier(.16,1,.3,1) both; }
.battle-cutin .cutin-core div { color:#fff1ad; font-size:clamp(21px,4vw,40px); font-weight:900; text-shadow:0 3px 12px #000; }
.battle-cutin .cutin-core b { margin:0 14px; color:#ffd352; }
.battle-cutin .cutin-core em { display:block; margin-top:12px; color:#dfffff; font-size:clamp(11px,2vw,16px); font-style:normal; font-weight:800; letter-spacing:.14em; }
.levelup-cutin .levelup-avatar { display:block; width:min(230px,48vw); height:min(230px,48vw); object-fit:contain; margin:-8px auto -22px; filter:drop-shadow(0 0 26px #ffe570) drop-shadow(0 12px 12px #000b); animation:boss-image-in .55s cubic-bezier(.16,1,.3,1) both; }
.levelup-cutin .cutin-core h2 { margin:0 0 5px; color:#fff; font-size:clamp(20px,4vw,38px); text-shadow:0 0 12px #ffdb55,0 4px 10px #000; }
.levelup-gains { display:flex!important; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:10px; font-size:clamp(13px,2.5vw,20px)!important; }
.levelup-gains span { padding:4px 9px; border:1px solid #ffe17888; border-radius:999px; background:#2a1d08cc; color:#fff5bd; }
.levelup-gains b { margin:0!important; color:#74ff9d!important; }
.floor-cutin.show { animation:floor-cutin-fade 1.25s ease forwards; }
.floor-cutin .cutin-backdrop { background:radial-gradient(circle at center,#7ee7ff52,#176bb548 38%,#031525e8 78%); animation-duration:1.25s; }
.floor-cutin .cutin-rays { filter:hue-rotate(155deg) saturate(1.35); animation-duration:1.1s; }
.floor-cutin .cutin-core { width:min(90vw,680px); padding:26px; border-block:2px solid #a8ecffbb; background:linear-gradient(90deg,transparent,#0b467fd9 18%,#102f59ee 50%,#0b467fd9 82%,transparent); box-shadow:0 0 34px #4fc9ff66; animation:floor-panel-in .5s cubic-bezier(.16,1,.3,1) both; }
.floor-cutin .cutin-core small { color:#bcefff; text-shadow:0 0 14px #4bcaff; }
.floor-cutin .cutin-core strong { color:#fff; font-size:clamp(58px,17vw,138px); letter-spacing:.04em; text-shadow:0 0 10px #fff,0 0 34px #4bcaff,0 7px 20px #000; }
.floor-cutin .cutin-core div { color:#d9f6ff; font-size:clamp(16px,4vw,30px); }
.battle-cutin .cutin-slash { position:absolute; z-index:2; left:-10%; width:120%; height:90px; border-block:2px solid #ffef9ebf; background:linear-gradient(90deg,transparent,#ffe49030,#ffd24f8c,#ffe49030,transparent); box-shadow:0 0 36px #ffa43166; transform:rotate(-12deg); animation:cutin-slash .9s ease-out both; }
.battle-cutin .cutin-slash.one { top:30%; }.battle-cutin .cutin-slash.two { top:62%; animation-delay:.08s; }
.battle-cutin .cutin-particles i { position:absolute; left:50%; top:50%; width:8px; height:17px; border-radius:9px; background:linear-gradient(#fff,#ffd95f,#ff962c); box-shadow:0 0 10px #ffe68a; animation:cutin-particle 1.25s ease-out both; }
.boss-cutin .cutin-backdrop { background:radial-gradient(circle at center,#ff4a3f38,#7e0d1766 42%,#000e 80%); }
.boss-cutin .cutin-rays { filter:hue-rotate(310deg) saturate(2); }
.boss-cutin .cutin-core { width:min(88vw,760px); padding:24px 34px 28px; border:2px solid #ffd28ccc; background:linear-gradient(135deg,#210000f2,#740b0bea); box-shadow:0 0 26px #ff454588,0 0 80px #ff221f3d,inset 0 0 32px #ffad5d18; transform:skewX(-7deg); animation:boss-panel-in .55s cubic-bezier(.14,1.1,.28,1) both; }
.boss-cutin .cutin-core small { color:#ffb9ad; text-shadow:0 0 14px #ff342d; }
.boss-cutin .cutin-core strong { color:#fff4d6; font-size:clamp(40px,9vw,92px); text-shadow:0 0 9px #fff,0 0 30px #ff342d,0 6px 18px #000; }
.boss-cutin .cutin-core img { display:block; width:min(260px,52vw); height:min(260px,52vw); object-fit:contain; margin:-2px auto -20px; filter:drop-shadow(0 0 18px #fff5c7) drop-shadow(0 0 42px #ff3d35aa) drop-shadow(0 18px 15px #000c); animation:boss-image-in .55s cubic-bezier(.16,1,.3,1) both; }
.boss-cutin .cutin-core div { color:#fff; font-size:clamp(24px,5vw,46px); letter-spacing:.08em; text-shadow:0 0 14px #ff675f,0 5px 12px #000; }
.boss-cutin .cutin-core em { color:#ffd59b; }
.boss-rare-cutin .cutin-backdrop { background:radial-gradient(circle at center,#5d8dff55,#27116688 42%,#02020ff2 82%); animation:rare-boss-pulse 1s ease-in-out infinite alternate; }
.boss-rare-cutin .cutin-rays { filter:hue-rotate(160deg) saturate(2.8); }
.boss-rare-cutin .cutin-core { border-color:#91bdff; background:linear-gradient(135deg,#081b4df2,#39206ded); box-shadow:0 0 28px #80b5ffbb,0 0 105px #653cff77,inset 0 0 38px #a9d2ff26; }
.boss-rare-cutin .cutin-core strong { color:#eaf5ff; text-shadow:0 0 9px #fff,0 0 34px #64a6ff,0 7px 20px #000; }
.boss-rare-cutin .cutin-core em { color:#b9ddff; font-size:clamp(14px,2.4vw,22px); }
.boss-legendary-cutin .cutin-backdrop { background:radial-gradient(circle at center,#ffd65c66,#7b1111aa 35%,#050006f5 80%); animation:legendary-boss-pulse .65s ease-in-out infinite alternate; }
.boss-legendary-cutin .cutin-rays { background:repeating-conic-gradient(from 0deg,transparent 0 8deg,#fff0a855 8deg 13deg,transparent 13deg 22deg); filter:saturate(2.4); animation-duration:.8s; }
.boss-legendary-cutin .cutin-core { border:3px solid #ffe071; background:linear-gradient(135deg,#130505f7,#761111f2 48%,#2c1604f3); box-shadow:0 0 18px #fff,0 0 48px #ffcf49dd,0 0 130px #ff2b1f88,inset 0 0 50px #ffd45235; animation:legendary-panel-in .75s cubic-bezier(.08,1.2,.2,1) both; }
.boss-legendary-cutin .cutin-core strong { color:#fffbe1; -webkit-text-stroke:2px #6b1700; text-shadow:0 0 8px #fff,0 0 24px #ffe15a,0 0 48px #ff3124,0 8px 22px #000; }
.boss-legendary-cutin .cutin-core img { filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 34px #ffd84d) drop-shadow(0 0 70px #ff261dbb) drop-shadow(0 20px 16px #000e); animation:legendary-boss-image .85s cubic-bezier(.05,1.25,.2,1) both; }
.boss-legendary-cutin .cutin-core em { color:#ffe88e; font-size:clamp(15px,2.6vw,24px); font-weight:900; text-shadow:0 0 12px #ffb11f; }
.battle-screen.boss-variant-rare .battle-grid { border-color:#6fa9ff; box-shadow:0 0 22px #438fff88,inset 0 0 24px #3c40a333; }
.battle-screen.boss-variant-legendary .battle-grid { border-color:#ffd75b; box-shadow:0 0 20px #ffd34dbb,0 0 52px #ff322966,inset 0 0 30px #801b1b55; animation:legendary-grid-aura 1.25s ease-in-out infinite alternate; }
.enemy-special-rare .unit-visual,.enemy-special-legendary .unit-visual{isolation:isolate}
.enemy-special-rare .unit-visual img,.enemy-special-legendary .unit-visual img{position:relative;z-index:2}
.enemy-special-rare .unit-visual::before,.enemy-special-legendary .unit-visual::before{content:"";position:absolute;z-index:0;left:-12px;top:-10px;width:124px;height:124px;border-radius:50%;pointer-events:none;mix-blend-mode:screen}
.enemy-special-rare .unit-visual::after,.enemy-special-legendary .unit-visual::after{content:"";position:absolute;z-index:3;left:6px;top:5px;width:88px;height:88px;border-radius:50%;pointer-events:none}
.enemy-special-rare .unit-visual::before{background:conic-gradient(from 0deg,transparent,#4fa6ffbb,#8c5dff88,transparent 42%,#61e7ff99,transparent 72%);filter:blur(7px);animation:rare-unit-aura 2.2s linear infinite}
.enemy-special-rare .unit-visual::after{border:2px solid #87c9ff77;box-shadow:0 0 12px #5ba7ff,0 0 25px #7756ff88,inset 0 0 16px #70dfff55;animation:rare-unit-ring 1.15s ease-in-out infinite alternate}
.enemy-special-legendary .unit-visual::before{background:conic-gradient(from 0deg,transparent,#ffe778dd,#ff4b2dcc,transparent 38%,#fff2a6cc,#b000ff88,transparent 76%);filter:blur(6px);animation:legendary-unit-aura 1.25s linear infinite}
.enemy-special-legendary .unit-visual::after{border:2px solid #fff2a6aa;box-shadow:0 0 12px #fff,0 0 28px #ffbd31,0 0 44px #ff302788,inset 0 0 18px #ffcf4f66;animation:legendary-unit-ring .7s ease-in-out infinite alternate}
@keyframes rare-boss-pulse { from{filter:brightness(.85)} to{filter:brightness(1.2)} }
@keyframes legendary-boss-pulse { from{filter:brightness(.85) saturate(1.1)} to{filter:brightness(1.28) saturate(1.6)} }
@keyframes legendary-panel-in { from{opacity:0;transform:scale(2.2) rotate(-3deg)} 55%{opacity:1;transform:scale(.94) rotate(1deg)} to{transform:scale(1) rotate(0)} }
@keyframes legendary-boss-image { from{opacity:0;transform:scale(.15) rotate(-18deg)} 65%{opacity:1;transform:scale(1.2) rotate(3deg)} to{transform:scale(1) rotate(0)} }
@keyframes legendary-grid-aura { from{filter:saturate(1)} to{filter:saturate(1.35) brightness(1.08)} }
@keyframes rare-unit-aura{to{transform:rotate(360deg)}}
@keyframes rare-unit-ring{from{opacity:.45;transform:scale(.86)}to{opacity:1;transform:scale(1.08)}}
@keyframes legendary-unit-aura{to{transform:rotate(-360deg)}}
@keyframes legendary-unit-ring{from{opacity:.55;transform:scale(.82)}to{opacity:1;transform:scale(1.12)}}
.victory-cutin .cutin-backdrop { background:radial-gradient(circle at center,#e9ff9e4d,#2aa56b38 36%,#04140fe8 78%); }
.victory-cutin .cutin-rays { filter:hue-rotate(75deg) saturate(1.5); }
.victory-cutin .cutin-core { width:min(92vw,820px); padding:30px; border:2px solid #fff2a8cc; border-radius:20px; background:linear-gradient(135deg,#123c2ded,#24693ee8); box-shadow:0 0 32px #bfff8c88,0 0 100px #43e98438,inset 0 0 35px #fff6a522; animation:boss-panel-in .62s cubic-bezier(.14,1.1,.28,1) both; }
.victory-cutin .cutin-core small { color:#eaffb8; text-shadow:0 0 14px #79ff86; }
.victory-cutin .cutin-core strong { color:#fffbd7; text-shadow:0 0 9px #fff,0 0 30px #9cff6b,0 7px 20px #000; }
.victory-cutin .cutin-core div { color:#fff; }
.victory-cutin .cutin-core em { color:#d9ffe5; }
.battle-screen.cutin-impact { animation:cutin-screen-impact .75s steps(6,end) 1; }
.battle-screen.boss-impact { animation:boss-screen-impact .9s steps(9,end) 1; }
.defeated { color: #ff6e6e; }
.sound-toggle { min-height: 38px; border: 1px solid #496787; border-radius: 7px; background: #13243b; color: #fff; cursor: pointer; }
.battle-mode .site-header { display: none; }
.battle-mode .page-shell { margin-top: 8px; }
.battle-exit-row { display: flex; justify-content: flex-end; padding: 0 18px 18px; }
.btn-flee { min-height: 42px; border-color: #b96b72; background: linear-gradient(#6b2931,#3d171d); }
.flee-confirm-screen { min-height: min(620px,calc(100vh - 32px)); display: grid; place-items: center; padding: 20px; border: 1px solid #69424a; border-radius: 14px; background: radial-gradient(circle at 50% 32%,#3d222b,#120d14 68%); }
.flee-confirm-screen[hidden] { display: none; }
.flee-confirm-card { width: min(520px,100%); padding: clamp(24px,7vw,48px); text-align: center; border: 1px solid #94545e; border-radius: 14px; background: #190f16e8; box-shadow: 0 20px 60px #000b; }
.flee-confirm-card small { color: #dc8d95; letter-spacing: .18em; }
.flee-confirm-card h1 { margin: 10px 0 16px; }
.flee-confirm-card p { color: #d9bec3; line-height: 1.8; }
.flee-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.turn-wait { min-width: 150px; color: #ffe28a; font-weight: 800; text-align: right; }
.adventure-select,.adventure-lobby { padding: 20px; }
.battle-screen.selection-mode { overflow:visible; border:0; border-radius:0; background:transparent; }
.battle-screen.selection-mode > .battle-title { margin-bottom:14px; border:1px solid #3f6482; border-radius:14px; background:linear-gradient(115deg,#1a3858,#101f35 72%); box-shadow:0 10px 28px #0004; }
.battle-screen.selection-mode > [data-selection] { border:0; border-radius:14px; background:#0b1727; box-shadow:0 14px 38px #0004; }
.battle-screen.lobby-mode { overflow:visible; border:0; border-radius:0; background:transparent; }
.battle-screen.lobby-mode > .battle-title { margin-bottom:14px; border:1px solid #6b5a8f; border-radius:14px; background:linear-gradient(120deg,#31264f,#19243d 68%,#15394a); box-shadow:0 12px 34px #0005; }
.battle-screen.lobby-mode > [data-selection] { border:1px solid #466c78; border-radius:16px; background:radial-gradient(circle at 50% 0,#244a5b,#101c2d 68%); box-shadow:0 18px 46px #0006; }
.battle-screen.lobby-mode .adventure-lobby { text-align:center; }
.battle-screen.lobby-mode .adventure-lobby h2 { color:#e5fbff; letter-spacing:.08em; }
.battle-screen.lobby-mode .lobby-party { justify-content:center; }
.battle-screen.lobby-mode .battle-exit-row { padding-top:14px; }
.battle-screen.reward-mode { border-color:#c6a64c; background:radial-gradient(circle at 50% 16%,#4c3c18,#12170f 66%); box-shadow:0 0 34px #ffd75c2c; }
.battle-screen.reward-mode > .battle-title { background:linear-gradient(110deg,#654e16,#282813 72%); }
.battle-screen.reward-impact { animation:reward-screen-shake .58s steps(7,end) 1; }
.clear-reward-screen { position:relative; display:grid; place-items:center; min-height:420px; padding:clamp(20px,5vw,46px); overflow:hidden; }
.clear-reward-screen[hidden] { display:none; }
.clear-reward-screen.reward-flash::before { content:""; position:absolute; z-index:10; inset:-22%; pointer-events:none; background:radial-gradient(circle,#fff 0 10%,#fff8cfed 20%,#ffd75baa 38%,transparent 68%); mix-blend-mode:screen; animation:reward-flash .78s ease-out 1 both; }
.clear-reward-screen.reward-flash .clear-reward-card { animation:reward-card-impact .62s cubic-bezier(.18,.85,.25,1.25) 1 both; }
.clear-reward-card { width:min(560px,100%); padding:clamp(24px,6vw,44px); text-align:center; border:2px solid #e9c55e; border-radius:18px; background:linear-gradient(145deg,#2e280f,#12170d); box-shadow:0 16px 48px #0009,0 0 28px #ffd95a35,inset 0 0 28px #fff09a12; }
.clear-reward-card>small { color:#ffe78f; font-weight:900; letter-spacing:.2em; }
.clear-reward-card h2 { margin:10px 0 20px; color:#fff7cb; font-size:clamp(24px,6vw,38px); text-shadow:0 0 16px #ffd24f; }
.reward-item { display:grid; justify-items:center; gap:10px; margin:12px auto 20px; }
.reward-item img { width:144px; height:144px; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 0 14px #fff4a0) drop-shadow(0 12px 10px #0008); animation:reward-item-in .58s cubic-bezier(.16,1,.3,1) both; }
.reward-item strong { color:#fff; font-size:clamp(20px,5vw,30px); }
.reward-summary { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:18px 0; }
.reward-summary span { min-width:150px; padding:10px 14px; border:1px solid #9e833d; border-radius:9px; background:#171b0e; color:#ffeaa0; font-weight:800; }
.reward-summary b { color:#fff; }
.reward-mastery-notice { position:relative; display:grid; gap:4px; margin:16px 0 10px; padding:15px 16px 14px 60px; overflow:hidden; border:1px solid #638a6a; border-radius:12px; background:linear-gradient(120deg,#142b20,#102016); color:#fff; text-align:left; text-decoration:none; box-shadow:inset 0 0 20px #8aff9e0d; }
.reward-mastery-notice::before { content:"★"; position:absolute; left:17px; top:50%; color:#b9e6a8; font-size:29px; text-shadow:0 0 12px #72dc79; transform:translateY(-52%); }
.reward-mastery-notice small { color:#a9d6ae; font-size:11px; font-weight:900; letter-spacing:.08em; }
.reward-mastery-notice strong { color:#f2ffe9; font-size:clamp(17px,4.5vw,22px); }
.reward-mastery-notice span { color:#b9cdbb; font-size:12px; }
.reward-mastery-notice.ready { border:2px solid #ffd65c; background:linear-gradient(120deg,#6e4510,#30250b 72%); box-shadow:0 0 22px #ffd65c55,inset 0 0 25px #fff3a718; animation:mastery-ready-glow 1.45s ease-in-out infinite alternate; }
.reward-mastery-notice.ready::before { content:"!"; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#ffe57e; color:#5c3900; font-size:23px; font-weight:1000; text-shadow:none; box-shadow:0 0 16px #ffe16a; }
.reward-mastery-notice.ready small { color:#ffe991; }
.reward-mastery-notice.ready strong { color:#fff; text-shadow:0 0 9px #ffd359aa; }
.reward-mastery-notice.ready span { color:#fff0b8; font-weight:800; }
.reward-collection-progress { display:grid; gap:7px; margin:14px 0; padding:13px 15px; border:1px solid #8c7639; border-radius:11px; background:#10180dcc; color:#fff0a9; text-decoration:none; text-align:left; }
.reward-collection-progress small { color:#c9b96e; font-size:10px; font-weight:900; letter-spacing:.14em; }
.reward-collection-progress strong { color:#fff8cf; font-size:16px; }
.reward-collection-progress>span { color:#c7ceb4; font-size:12px; }
.reward-collection-bar { height:14px; overflow:hidden; border:1px solid #76642f; border-radius:999px; background:#070b06; box-shadow:inset 0 2px 5px #000b; }
.reward-collection-bar>i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4bc47b,#e6d552 72%,#fff0a0); box-shadow:0 0 10px #d9ed6c88; transition:width .65s ease-out; }
.reward-collection-progress:hover,.reward-collection-progress:focus { border-color:#dcc55f; background:#17210f; }
.reward-rank { display:grid; grid-template-columns:auto auto auto auto; align-items:center; justify-content:center; gap:8px 12px; margin:16px auto 0; padding:12px 14px; border:1px solid #826d37; border-radius:10px; background:#0b120dcc; }
.reward-rank small { color:#b8c0a1; font-size:11px; font-weight:800; }
.reward-rank strong { color:#fff3ad; font-size:clamp(18px,4vw,25px); text-shadow:0 0 9px #d7a92888; }
.reward-rank>b { color:#f7cb52; font-size:20px; }
.clear-reward-card>p { color:#c9c8aa; }
.reward-empty { padding:28px; }
@keyframes reward-item-in { from{opacity:0;transform:translateY(22px) scale(.55) rotate(-8deg)} to{opacity:1;transform:none} }
@keyframes reward-screen-shake { 0%,100%{transform:none} 14%{transform:translate(-7px,3px)} 28%{transform:translate(7px,-3px)} 42%{transform:translate(-5px,-2px)} 56%{transform:translate(5px,2px)} 70%{transform:translate(-3px,1px)} 84%{transform:translate(2px,-1px)} }
@keyframes reward-flash { 0%{opacity:0;transform:scale(.35)} 15%{opacity:1} 48%{opacity:.72;transform:scale(1)} 100%{opacity:0;transform:scale(1.35)} }
@keyframes reward-card-impact { 0%{opacity:.3;transform:scale(.82)} 45%{opacity:1;transform:scale(1.045)} 100%{transform:none} }
@keyframes mastery-ready-glow { from{filter:brightness(.98)} to{filter:brightness(1.13)} }
.place-list,.room-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 10px; margin-bottom: 22px; }
.place-card,.room-card { position:relative; isolation:isolate; overflow:hidden; min-height: 100px; padding: 12px; display: grid; align-content:end; gap: 6px; text-align: left; color: #fff; border: 1px solid #496787; border-radius: 9px; background: linear-gradient(135deg,#203f62,#11243b); cursor: pointer; }
.place-map-image { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; object-position:left center; }
.place-card::after,.room-card::after { content:""; position:absolute; z-index:0; inset:0; background:linear-gradient(180deg,#07131a12 12%,#07131a66 54%,#07131ae8 100%); }
.place-card strong,.room-card strong,.place-card span,.room-card span { position:relative; z-index:1; text-shadow:0 2px 4px #000; }
.place-card:hover,.room-card:hover { filter: brightness(1.18); }
.place-card span,.room-card span { color: #b8cbe0; font-size: 12px; }
.lobby-party { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 22px; }
.lobby-party div { width: 116px; display: grid; justify-items: center; gap: 3px; padding: 8px; border: 1px solid #415e7e; border-radius: 9px; background: #0b1727; }
.lobby-party img { width: 92px; height: 92px; object-fit: contain; }
.lobby-party span { color: #f0bd55; font-size: 12px; }
.waiting-loading { padding:42px 18px; text-align:center; color:#a9bed4; }
.adventure-select-tabs,.waiting-chat-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 0 14px; padding:5px; border:1px solid #344e69; border-radius:12px; background:#07111e; }
.adventure-select-tabs button,.waiting-chat-tabs button { min-height:42px; border:0; border-radius:8px; background:#182a3d; color:#aabed1; font-weight:900; cursor:pointer; }
.adventure-select-tabs button.active,.waiting-chat-tabs button.active { background:linear-gradient(135deg,#3275a5,#205477); color:#fff; box-shadow:0 0 12px #46b4ff3d; }
.selection-panel { min-height:170px; }
.room-list-compact { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:7px; }
.room-card-compact { min-height:64px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; background:linear-gradient(115deg,#162b42,#0b1727); }
.room-card-compact::after { display:none; }
.room-summary { min-width:0; display:grid; gap:2px; text-align:left; }
.room-summary strong { overflow:hidden; color:#fff; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.room-summary>small { color:#9fb4c8; font-size:11px; }
.room-count { align-self:center; display:grid; justify-items:center; gap:2px; min-width:48px; padding:4px 7px; border-radius:9px; background:#244861; color:#dff8ff; font-size:12px; }
.room-count i { color:#fff1a6; font-size:11px; font-style:normal; }
.room-member-names { overflow:hidden; color:#cbd9e5; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.recruiting-rooms { margin-top:14px; }
.selection-panel>.recruiting-rooms:first-child { margin-top:0; }
.selection-panel>.recruiting-rooms+.public-lobby { margin-top:14px; }
.recruiting-rooms h2 { margin:0 0 8px; font-size:17px; }
.place-list-toggle { display:block; width:min(420px,100%); min-height:42px; margin:12px auto 0; border:1px solid #466987; border-radius:9px; background:#13283b; color:#dbeeff; font-weight:900; cursor:pointer; }
.public-lobby { padding:10px; border:1px solid #42647d; border-radius:12px; background:linear-gradient(145deg,#0b1928,#07101b); box-shadow:0 12px 28px #0004; }
.public-lobby-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:7px; }
.public-lobby-head small { color:#68bde4; font-size:9px; font-weight:900; letter-spacing:.14em; }
.public-lobby-head h2 { margin:1px 0 0; color:#e9f8ff; font-size:18px; }
.public-lobby-head .lobby-online { flex:1; justify-content:flex-end; margin:0; }
.public-lobby-log { height:210px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; padding:8px; border:1px solid #243d52; border-radius:7px; background:#030a11; }
.public-lobby-log div { display:grid; grid-template-columns:minmax(60px,110px) minmax(0,1fr); gap:8px; padding:3px 5px; border-bottom:1px solid #142433; font-size:13px; }
.public-lobby-log strong { overflow:hidden; color:#69c7ee; text-overflow:ellipsis; white-space:nowrap; }
.public-lobby-log span { color:#edf5fa; overflow-wrap:anywhere; }
.public-lobby-log p { margin:auto; color:#74889a; }
.public-lobby-form { display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:6px; margin-top:7px; }
.public-lobby-form input { min-width:0; height:42px; padding:8px 10px; border:1px solid #405c75; border-radius:7px; background:#101e2d; color:#fff; font-size:16px; }
.public-lobby-form button { border:1px solid #3f83aa; border-radius:7px; background:#245f81; color:#fff; font-weight:900; }
.waiting-room-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #3d617c; border-radius:10px; background:linear-gradient(110deg,#183a55,#102236); text-align:left; }
.waiting-room-head small { color:#86b8d3; font-weight:900; letter-spacing:.12em; }
.waiting-room-head h2 { margin:2px 0 0; font-size:20px; }
.waiting-room-head>b { min-width:58px; color:#fff1a6; font-size:18px; text-align:right; }
.lobby-party-compact { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:7px; margin:10px 0; }
.lobby-party-compact div { width:auto; min-width:0; display:flex; align-items:center; justify-items:initial; gap:8px; padding:6px 8px; }
.lobby-party-compact img { flex:0 0 auto; width:46px; height:46px; }
.lobby-party-compact>div>span { min-width:0; display:grid; text-align:left; }
.lobby-party-compact strong { overflow:hidden; color:#fff; text-overflow:ellipsis; white-space:nowrap; }
.lobby-party-compact strong i { margin-left:5px; padding:1px 4px; border-radius:5px; background:#8a6724; color:#fff2b6; font-size:9px; font-style:normal; }
.lobby-party-compact small { color:#e6b95c; font-size:10px; }
.waiting-start { width:min(460px,100%); margin:8px auto; }
.waiting-chat { margin-top:14px; padding:9px; border:1px solid #3a586f; border-radius:12px; background:#08131f; text-align:left; }
.waiting-chat-tabs { margin-bottom:8px; }
.waiting-chat-tabs button { min-height:36px; }
.lobby-online { display:flex; align-items:center; gap:5px; overflow-x:auto; margin-bottom:6px; padding:4px 2px; white-space:nowrap; scrollbar-width:thin; }
.lobby-online b { color:#7fe0a7; font-size:11px; }
.lobby-online span { padding:2px 6px; border-radius:9px; background:#173126; color:#c8f3d7; font-size:10px; }
.waiting-chat-log { height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; padding:7px; border-radius:7px; background:#050b12; }
.waiting-chat-log div { display:flex; align-items:flex-start; gap:8px; font-size:13px; }
.waiting-chat-log strong { flex:0 0 auto; max-width:110px; overflow:hidden; color:#75c9ed; text-overflow:ellipsis; white-space:nowrap; }
.waiting-chat-log span { color:#e6edf3; overflow-wrap:anywhere; }
.waiting-chat-log p { margin:auto; color:#718397; }
.waiting-chat-form { display:grid; grid-template-columns:minmax(0,1fr) 70px; gap:6px; margin-top:7px; }
.waiting-chat-form input { min-width:0; height:42px; padding:8px 10px; border:1px solid #405c75; border-radius:7px; background:#101e2d; color:#fff; font-size:16px; }
.waiting-chat-form button { border:1px solid #3f83aa; border-radius:7px; background:#245f81; color:#fff; font-weight:900; }
.battle-field-wrap { position: relative; }
.battle-skill-banner { position:absolute; z-index:45; top:10px; left:50%; width:min(420px,calc(100% - 20px)); padding:7px 18px 9px; transform:translate(-50%,-18px); opacity:0; pointer-events:none; text-align:center; border:1px solid #b8dcff; border-radius:3px; background:linear-gradient(180deg,#173a69f5,#07152bf5); box-shadow:0 3px 0 #020814,0 0 16px #63b7ff88,inset 0 0 15px #72bfff24; color:#fff; text-shadow:0 2px 3px #000; }
.battle-skill-banner[hidden] { display:none; }
.battle-skill-banner.show { animation:skill-banner 1.05s ease-out both; }
.battle-skill-banner small { display:block; margin-bottom:1px; color:#bcd8f8; font-size:11px; letter-spacing:.08em; }
.battle-skill-banner strong { display:block; font-size:clamp(19px,3vw,27px); line-height:1.15; letter-spacing:.06em; }
.battle-cell.skill-caster .unit-visual { animation:skill-caster-glow .72s ease-out both; }
.battle-projectile { position:absolute; z-index:34; width:46px; height:24px; margin:-12px 0 0 -23px; pointer-events:none; transform-origin:center; animation:projectile-flight .58s cubic-bezier(.2,.65,.25,1) both; filter:drop-shadow(0 0 6px #fff); }
.projectile-arrow { height:6px; border-radius:4px; background:linear-gradient(#fff4c1,#b88a45 55%,#523112); box-shadow:0 0 7px #ffe69a; transform:rotate(var(--projectile-angle)); }
.projectile-arrow::before { content:""; position:absolute; right:-9px; top:-5px; border-left:12px solid #f7d77f; border-top:8px solid transparent; border-bottom:8px solid transparent; }
.projectile-arrow::after { content:""; position:absolute; left:-8px; top:-6px; width:14px; height:18px; background:linear-gradient(45deg,transparent 44%,#dcefff 45% 55%,transparent 56%),linear-gradient(-45deg,transparent 44%,#dcefff 45% 55%,transparent 56%); }
.projectile-fireball { width:35px; height:35px; margin:-18px 0 0 -18px; border-radius:50%; background:radial-gradient(circle at 38% 38%,#fff 0 10%,#fff76d 18%,#ff9f24 42%,#f32913 70%,transparent 73%); box-shadow:0 0 12px #fff389,0 0 25px #ff521f,0 0 42px #e2180d88; }
.projectile-fireball::before,.projectile-fireball::after { content:""; position:absolute; right:20px; top:8px; width:34px; height:18px; border-radius:50%; background:linear-gradient(90deg,transparent,#ffeb55,#ff471b); transform:rotate(var(--projectile-angle)); transform-origin:right center; filter:blur(2px); opacity:.82; }
.projectile-fireball::after { width:50px; opacity:.45; filter:blur(5px); }
.projectile-wave { width:38px; height:38px; margin:-19px 0 0 -19px; border:4px solid #9ef7ff; border-radius:50%; box-shadow:0 0 12px #47dfff,inset 0 0 10px #a8faff; }
.projectile-wave::after { content:""; position:absolute; inset:5px; border:2px solid #fff; border-radius:50%; }
.projectile-lightning { width:58px; height:28px; background:#eaffff; clip-path:polygon(0 38%,39% 38%,47% 0,58% 39%,100% 39%,62% 58%,55% 100%,45% 62%,0 62%); filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 14px #33c8ff); transform:rotate(var(--projectile-angle)); }
.projectile-ice { width:42px; height:20px; background:linear-gradient(90deg,#fff,#7ee5ff 48%,#246ec9); clip-path:polygon(0 25%,72% 25%,100% 50%,72% 75%,0 75%,18% 50%); transform:rotate(var(--projectile-angle)); }
.projectile-dark_orb { width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:radial-gradient(circle,#050008 0 28%,#762ca0 48%,#d166ff 64%,transparent 68%); box-shadow:0 0 20px #9c35d6; }
.projectile-wind_blade { width:52px; height:28px; border:5px solid #d9ffff; border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; filter:drop-shadow(0 0 8px #56e0d8); transform:rotate(calc(var(--projectile-angle) + 45deg)); }
@keyframes weapon-sprite { from { background-position: 0 0; opacity: 1; } to { background-position: 133.333% 0; opacity: 0; } }
@keyframes move-pulse { from { opacity: .9; transform: scale(.45); } to { opacity: 0; transform: scale(1.15); } }
@keyframes impact-cell-flash { 0% { background:#fff9; box-shadow:inset 0 0 28px #fff,0 0 24px #ffd75e; } 55% { background:#ffdf5d66; box-shadow:inset 0 0 16px #fff7,0 0 14px #ff9f43; } 100% { background:transparent; box-shadow:none; } }
@keyframes battle-impact-shake { 0% { transform:translate(0,0); } 25% { transform:translate(-4px,1px); } 50% { transform:translate(4px,-1px); } 75% { transform:translate(-2px,0); } 100% { transform:translate(0,0); } }
@keyframes level-burst-wave { 0%{opacity:0;transform:scale(.2)} 30%{opacity:1;transform:scale(.8)} 100%{opacity:0;transform:scale(1.45)} }
@keyframes level-burst-hit { 0%{background:#fff;filter:brightness(2.8)} 35%{background:#ffe25caa;filter:brightness(2)} 100%{background:transparent;filter:none} }
@keyframes level-burst-shake { 0%,100%{transform:none} 17%{transform:translate(-7px,2px)} 34%{transform:translate(7px,-2px)} 51%{transform:translate(-5px,1px)} 68%{transform:translate(4px,-1px)} 85%{transform:translate(-2px,0)} }
@keyframes enemy-destroy { 0%{opacity:1;filter:brightness(1);transform:scale(1)} 20%{opacity:1;filter:brightness(3) saturate(0);transform:scale(1.12)} 45%{opacity:.95;filter:brightness(2) sepia(1) saturate(5);transform:scale(.96) rotate(-3deg)} 70%{opacity:.65;filter:brightness(2);transform:scale(1.18) rotate(4deg)} 100%{opacity:0;filter:brightness(4);transform:scale(.25) rotate(-8deg)} }
@keyframes destroy-burst { 0%{opacity:0;transform:scale(.15)} 16%{opacity:1;transform:scale(.65)} 55%{opacity:1;transform:scale(1.15)} 100%{opacity:0;transform:scale(1.65)} }
@keyframes destroy-fragments { 0%{opacity:0;transform:scale(.25) rotate(0)} 25%{opacity:1} 100%{opacity:0;transform:scale(1.8) rotate(28deg)} }
@keyframes cutin-fade { 0%{opacity:0} 8%,78%{opacity:1} 100%{opacity:0} }
@keyframes cutin-backdrop { 0%{opacity:0;transform:scale(.88)} 22%{opacity:1;transform:scale(1)} 75%{opacity:1} 100%{opacity:0} }
@keyframes cutin-rays { 0%{opacity:0;transform:rotate(-15deg) scale(.7)} 45%{opacity:1;transform:rotate(4deg) scale(1.15)} 100%{opacity:0;transform:rotate(12deg) scale(1.35)} }
@keyframes cutin-kicker { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:none} }
@keyframes cutin-title { from{opacity:0;transform:scale(.5) skewX(-10deg)} to{opacity:1;transform:scale(1)} }
@keyframes floor-cutin-fade { 0%{opacity:0} 12%,72%{opacity:1} 100%{opacity:0} }
@keyframes floor-panel-in { from{opacity:0;transform:scaleX(.35) translateY(14px)} to{opacity:1;transform:none} }
@keyframes cutin-slash { from{opacity:0;transform:translateX(-32%) rotate(-12deg) scaleX(.45)} 30%{opacity:1} to{opacity:.9;transform:translateX(0) rotate(-12deg) scaleX(1)} }
@keyframes cutin-particle { from{opacity:1;transform:translate(-50%,-50%) scale(.5)} to{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(240deg) scale(1.2)} }
@keyframes boss-image-in { from{opacity:0;transform:translateY(25px) scale(.3)} to{opacity:1;transform:none} }
@keyframes boss-panel-in { 0%{opacity:0;transform:translateX(-22%) skewX(-16deg) scale(.82)} 58%{opacity:1;transform:translateX(3%) skewX(-7deg) scale(1.04)} 100%{opacity:1;transform:skewX(-7deg) scale(1)} }
@keyframes boss-screen-impact { 0%,100%{transform:none;filter:none} 10%{transform:translate(-10px,3px);filter:brightness(1.5)} 20%{transform:translate(9px,-4px)} 32%{transform:translate(-8px,3px)} 45%{transform:translate(7px,-2px)} 58%{transform:translate(-5px,2px)} 72%{transform:translate(4px,-1px)} 86%{transform:translate(-2px,0)} }
@keyframes cutin-screen-impact { 0%,100%{transform:none} 15%{transform:translate(-8px,2px)} 30%{transform:translate(7px,-3px)} 45%{transform:translate(-6px,2px)} 60%{transform:translate(5px,-1px)} 80%{transform:translate(-2px,0)} }
@keyframes hero-floor-enter { from { opacity: 0; transform: translateX(-145px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hero-floor-leave { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(145px); } }
@keyframes enemy-floor-spawn { 0% { opacity: 0; transform: translateY(-30px) scale(.15); filter: brightness(2.6); } 70% { opacity: 1; transform: translateY(4px) scale(1.08); filter: brightness(1.45); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: none; } }
@keyframes knockback-player { from { filter: brightness(2); opacity: .72; } to { filter: none; opacity: 1; } }
@keyframes knockback-enemy { from { filter: brightness(2); opacity: .72; } to { filter: none; opacity: 1; } }
@keyframes unit-delta-move { from { transform: translate(calc(var(--move-dx) * 100px),calc(var(--move-dy) * 100px)); } to { transform: translate(0,0); } }
@keyframes unit-knockback-move { from { transform: translate(calc(var(--move-dx) * 100px),calc(var(--move-dy) * 100px)); filter: brightness(2); } to { transform: translate(0,0); filter: none; } }
@keyframes skill-banner { 0%{opacity:0;transform:translate(-50%,-18px) scaleX(.82)} 14%,72%{opacity:1;transform:translate(-50%,0) scaleX(1)} 100%{opacity:0;transform:translate(-50%,-7px) scaleX(.96)} }
@keyframes skill-caster-glow { 0%{filter:brightness(1);transform:scale(1)} 28%{filter:brightness(2.1) drop-shadow(0 0 13px #7fdcff);transform:scale(1.08)} 68%{filter:brightness(1.35) drop-shadow(0 0 7px #7fdcff);transform:scale(1.03)} 100%{filter:none;transform:scale(1)} }
@keyframes projectile-flight { 0%{opacity:0;translate:0 0;scale:.55} 10%{opacity:1} 82%{opacity:1} 100%{opacity:0;translate:var(--projectile-x) var(--projectile-y);scale:1.18} }
@keyframes level-burst-origin-wave { 0%{transform:scale(.12);opacity:0;filter:brightness(2.8)} 10%{opacity:1} 35%{opacity:1;filter:brightness(1.8)} 100%{transform:scale(16);opacity:0;filter:brightness(1)} }
@keyframes level-burst-ring { 0%{transform:scale(.12);opacity:1} 28%{opacity:1} 100%{transform:scale(12);opacity:0} }
@keyframes damage-number-pop { 0%{transform:translate(-50%,22px) scale(.28) rotate(-5deg);opacity:0;filter:brightness(2.4)} 14%{transform:translate(-50%,-7px) scale(1.24) rotate(2deg);opacity:1;filter:brightness(1.45)} 30%{transform:translate(-50%,-18px) scale(.98) rotate(-1deg);opacity:1;filter:none} 54%{transform:translate(-50%,-29px) scale(1.06);opacity:1} 100%{transform:translate(-50%,-70px) scale(.9);opacity:0} }
@keyframes damage-spark { 0%{opacity:0;transform:scale(.2) rotate(0)} 30%{opacity:1;transform:scale(1.45) rotate(35deg)} 100%{opacity:0;transform:translateY(-24px) scale(.55) rotate(100deg)} }

/* Dedicated combat values: intentionally isolated from legacy span/number rules. */
.battle-grid .battle-cell > .cqre-combat-float {
  all:unset !important;
  position:absolute !important;
  z-index:900 !important;
  left:50% !important;
  top:-24px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  width:max-content !important;
  min-width:82px !important;
  min-height:52px !important;
  padding:2px 5px !important;
  color:#74f4ff !important;
  font-family:"Arial Black","Helvetica Neue",Arial,sans-serif !important;
  font-size:25px !important;
  font-style:normal !important;
  font-weight:900 !important;
  line-height:.92 !important;
  letter-spacing:-.035em !important;
  text-align:center !important;
  white-space:nowrap !important;
  -webkit-text-stroke:1px #062e49 !important;
  text-shadow:-1px -1px 0 #062e49,1px -1px 0 #062e49,-1px 1px 0 #062e49,1px 1px 0 #062e49,0 0 6px #eaffff,0 0 13px #00bfe8 !important;
  pointer-events:none !important;
  animation:cqre-combat-float-pop 1.18s cubic-bezier(.12,.78,.24,1) both !important;
}
.battle-grid > .cqre-damage-rise-v2 { all:unset !important;position:absolute !important;z-index:950 !important;left:var(--damage-left) !important;top:var(--damage-top) !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;box-sizing:border-box !important;width:max-content !important;min-width:82px !important;min-height:52px !important;padding:2px 5px !important;color:#74f4ff !important;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif !important;font-size:25px !important;font-style:normal !important;font-weight:900 !important;line-height:.92 !important;letter-spacing:-.035em !important;text-align:center !important;white-space:nowrap !important;-webkit-text-stroke:1px #062e49 !important;text-shadow:-1px -1px 0 #062e49,1px -1px 0 #062e49,-1px 1px 0 #062e49,1px 1px 0 #062e49,0 0 6px #eaffff,0 0 13px #00bfe8 !important;pointer-events:none !important;overflow:visible !important;transform-origin:50% 85% !important;animation:none !important;will-change:transform,opacity !important; }
.battle-grid > .cqre-damage-rise-v2.cqre-hit-player { color:#ff8fa3 !important;-webkit-text-stroke-color:#510018 !important;text-shadow:-1px -1px 0 #510018,1px -1px 0 #510018,-1px 1px 0 #510018,1px 1px 0 #510018,0 0 6px #fff,0 0 14px #ff315d !important; }
.battle-grid > .cqre-damage-rise-v2::before { content:"" !important;position:absolute !important;z-index:-1 !important;left:50% !important;top:48% !important;width:128% !important;height:5px !important;border-radius:999px !important;background:linear-gradient(90deg,transparent,#fff 28% 72%,transparent) !important;box-shadow:0 0 8px #fff,0 0 18px currentColor !important;transform:translate(-50%,-50%) rotate(-12deg) scaleX(.1) !important;opacity:0;animation:cqre-damage-slash .46s ease-out both !important; }
.battle-grid > .cqre-damage-rise-v2::after { content:"" !important;position:absolute !important;z-index:-1 !important;left:50% !important;top:52% !important;width:5px !important;height:5px !important;border-radius:50% !important;background:#fff !important;box-shadow:-31px -13px 0 -1px currentColor,-24px 16px 0 -1px #fff,28px -18px 0 -1px #fff,35px 9px 0 -2px currentColor,-10px -25px 0 -2px currentColor,13px 23px 0 -2px #fff !important;opacity:0;animation:cqre-damage-sparks .7s ease-out both !important; }
.battle-grid > .cqre-damage-rise-v2.cqre-damage-sm { font-size:22px !important; }
.battle-grid > .cqre-damage-rise-v2.cqre-damage-md { font-size:25px !important; }
.battle-grid > .cqre-damage-rise-v2.cqre-damage-lg { font-size:28px !important; }
.battle-grid > .cqre-damage-rise-v2.cqre-damage-xl { font-size:31px !important; }
.battle-grid > .cqre-damage-rise-v2.cqre-hit-half { color:#d9a7ff !important;-webkit-text-stroke-color:#3d125d !important; }
.battle-grid > .cqre-damage-rise-v2 .cqre-half-label { all:unset !important;display:block !important;margin-top:3px !important;color:#dff8ff !important;font:900 12px/1 "Arial Black",sans-serif !important;letter-spacing:.04em !important;-webkit-text-stroke:0 !important;text-shadow:0 2px 4px #002a40,0 0 8px #38cfff !important; }
.battle-grid .battle-cell > .cqre-combat-float.cqre-hit-half { color:#d9a7ff !important;-webkit-text-stroke-color:#3d125d !important; }
.battle-grid .battle-cell > .cqre-combat-float.cqre-combat-heal { color:#bdffca !important;-webkit-text-stroke-color:#06451d !important;text-shadow:-2px -2px 0 #06451d,2px -2px 0 #06451d,-2px 2px 0 #06451d,2px 2px 0 #06451d,0 0 9px #fff,0 0 18px #32e86f !important; }
.battle-grid .battle-cell > .cqre-combat-float .cqre-half-label { all:unset !important;display:block !important;margin-top:3px !important;color:#dff8ff !important;font:900 12px/1 "Arial Black",sans-serif !important;letter-spacing:.04em !important;-webkit-text-stroke:0 !important;text-shadow:0 2px 4px #002a40,0 0 8px #38cfff !important; }
.battle-grid.boss-intro-wait .battle-cell .unit-visual { opacity:0 !important;animation:none !important; }
@keyframes cqre-combat-float-pop { 0%{transform:translate(-50%,25px) scale(.25);opacity:0;filter:brightness(2.5)} 15%{transform:translate(-50%,-5px) scale(1.17);opacity:1;filter:brightness(1.35)} 32%{transform:translate(-50%,-13px) scale(1);opacity:1;filter:none} 64%{transform:translate(-50%,-25px) scale(1.04);opacity:1} 100%{transform:translate(-50%,-66px) scale(.94);opacity:0} }
@keyframes cqre-damage-rise-v2 { 0%{transform:translate(-50%,24px) scale(.22) rotate(-7deg);opacity:0;filter:brightness(2.8)} 12%{transform:translate(-50%,-8px) scale(1.3) rotate(var(--damage-tilt));opacity:1;filter:brightness(1.65)} 25%{transform:translate(-50%,-20px) scale(.96) rotate(0);opacity:1;filter:none} 48%{transform:translate(calc(-50% + var(--damage-drift-half)),-42px) scale(1.08) rotate(var(--damage-tilt));opacity:1} 72%{transform:translate(calc(-50% + var(--damage-drift)),-68px) scale(1);opacity:.94} 100%{transform:translate(calc(-50% + var(--damage-drift)),-104px) scale(.82) rotate(-3deg);opacity:0;filter:blur(.6px)} }
@keyframes cqre-damage-slash { 0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scaleX(.08)} 20%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scaleX(1.15)} 100%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scaleX(1.55)} }
@keyframes cqre-damage-sparks { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)} 22%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(18deg)} 100%{opacity:0;transform:translate(-50%,-82%) scale(1.8) rotate(48deg)} }
@media(max-width: 800px) {
  .battle-grid {
    grid-template-columns: repeat(6, 52px);
    width: 350px;
  }
  .battle-cell { width: 52px; }
  .battle-cell[data-x="0"] { grid-column: 1; }
  .battle-cell[data-x="1"] { grid-column: 2; }
  .battle-cell[data-x="2"] { grid-column: 3; }
  .battle-cell[data-x="3"] { grid-column: 4; }
  .battle-cell[data-x="4"] { grid-column: 5; }
  .battle-cell[data-x="5"] { grid-column: 6; }
  .unit-visual { inset: -6px auto auto -30px; width: 112px; height: 112px; }
  .battle-cell .unit-visual img { width: 112px; height: 112px; }
  .unit-hp { left: 30px; width: 52px; top: 3px; }
  .battle-cell[data-y="1"] .unit-hp,
  .battle-cell[data-y="2"] .unit-hp { top: 8px; }
  .battle-effect { left: -30px; top: -6px; width: 112px; height: 112px; }
  .unit-visual.unit-knockback-pending { transform:translate(calc(var(--move-dx) * 52px),calc(var(--move-dy) * 100px)); }
  @keyframes unit-delta-move { from { transform: translate(calc(var(--move-dx) * 52px),calc(var(--move-dy) * 100px)); } to { transform: translate(0,0); } }
  @keyframes unit-knockback-move { from { transform: translate(calc(var(--move-dx) * 52px),calc(var(--move-dy) * 100px)); filter: brightness(2); } to { transform: translate(0,0); filter: none; } }
  @keyframes battle-impact-shake { 0% { transform:translate(0,0); } 25% { transform:translate(-2px,1px); } 50% { transform:translate(2px,-1px); } 75% { transform:translate(-1px,0); } 100% { transform:translate(0,0); } }
  @keyframes level-burst-shake { 0%,100%{transform:none} 20%{transform:translate(-3px,1px)} 40%{transform:translate(3px,-1px)} 60%{transform:translate(-2px,0)} 80%{transform:translate(1px,0)} }
}
@media(max-width: 430px) {
  .battle-layout { padding: 0; }
  .battle-layout > div:first-child { overflow-x: auto; padding-top: 6px; }
  .battle-grid { min-width: 350px; min-height: 322px; margin: 0 auto; }
  .battle-help,#battle-next { margin-left: 8px; margin-right: 8px; }
  .turn-wait { min-width: 0; text-align: left; }
  .battle-exp-top { margin:0 8px 8px; }
  .battle-time-mp-row { grid-template-columns:minmax(102px,.72fr) minmax(168px,1.28fr); }
  .battle-command { min-width:82px; min-height:38px; padding:4px 8px; }
  .battle-chat-compose{margin-inline:8px;width:calc(100% - 16px)}
  .battle-chat-bullet{max-width:none;font-size:14px}
  .adventure-select,.adventure-lobby { padding: 12px; }
  .place-list,.room-list { grid-template-columns: 1fr; }
  .room-card-compact { min-height:58px; grid-template-columns:minmax(0,1fr) auto; padding:6px 8px; }
  .public-lobby-head { display:block; }
  .public-lobby-head .lobby-online { justify-content:flex-start; margin-top:4px; }
  .public-lobby-log { height:180px; }
  .lobby-party-compact { grid-template-columns:1fr 1fr; }
  .lobby-party-compact div { gap:5px; padding:5px; }
  .lobby-party-compact img { width:38px; height:38px; }
  .waiting-chat-log { height:132px; }
  .flee-confirm-screen { min-height: calc(100vh - 28px); padding: 12px; }
  .flee-confirm-actions { grid-template-columns: 1fr; }
}
.battle-next-action{display:block;width:min(760px,100%);min-height:48px;margin:8px auto 2px;font-size:16px;font-weight:900}.battle-next-action[hidden]{display:none}.battle-side-tools{grid-template-columns:repeat(3,minmax(0,1fr))}.battle-side-tools .sound-toggle{min-width:0;padding-inline:5px;font-size:12px;font-weight:800}.battle-side-tools .sound-toggle.active{border-color:#78d5ff;background:linear-gradient(#25577d,#173954);color:#fff;box-shadow:0 0 10px #52c8ff44,inset 0 0 8px #8ee4ff22}.battle-side-tools [data-log-tab="lobby"].active{border-color:#d4a2ff;background:linear-gradient(#654080,#3d2756);box-shadow:0 0 10px #c17aff55,inset 0 0 8px #e2c4ff22}
.unit-status{position:absolute;z-index:9;top:12px;left:50%;transform:translateX(-50%);padding:1px 5px;border:1px solid rgba(255,255,255,.7);border-radius:9px;background:rgba(35,24,54,.9);color:#fff;font-size:10px;line-height:1.25;white-space:nowrap;text-shadow:0 1px 2px #000;pointer-events:none}.unit-status.status-poison,.unit-status.status-severe_poison{background:rgba(91,28,127,.94)}.unit-status.status-paralysis{background:rgba(180,129,0,.95)}.unit-status.status-sleep{background:rgba(40,78,142,.95)}.unit-status.status-confusion{background:rgba(173,48,98,.95)}
.battle-cell.beginner-target-hint{z-index:40;overflow:visible;border-color:#fff;box-shadow:0 0 0 2px #ffffff55,0 0 15px #ffffff99}.beginner-finger{position:absolute!important;z-index:80!important;left:50%!important;top:-13px!important;width:auto!important;color:#fff!important;font-family:Arial,"Segoe UI Symbol",sans-serif!important;font-size:32px!important;font-weight:700!important;line-height:1!important;text-shadow:0 2px 3px #000,0 0 5px #000;filter:none!important;pointer-events:none;transform:translateX(-50%);animation:cqre-beginner-point .9s ease-in-out infinite}.beginner-target-hint::after{display:none!important;content:none!important}@keyframes cqre-beginner-point{0%,100%{transform:translate(-50%,-4px)}55%{transform:translate(-50%,4px)}}

/* Weakness, critical and attribute reactions. Isolated from legacy battle text rules. */
.battle-grid .battle-cell > .cqre-combat-result{all:unset!important;position:absolute!important;z-index:980!important;left:50%!important;top:7px!important;display:block!important;width:max-content!important;padding:3px 9px!important;border:2px solid #fff!important;border-radius:999px!important;color:#fff!important;font:900 15px/1 "Arial Black",Arial,sans-serif!important;letter-spacing:.035em!important;white-space:nowrap!important;transform:translateX(-50%)!important;pointer-events:none!important;animation:cqre-combat-result-pop .88s ease-out both!important}
.battle-grid .battle-cell > .result-critical{top:-15px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#ffe65a!important;font-size:20px!important;font-style:italic!important;letter-spacing:-.015em!important;-webkit-text-stroke:1px #671500!important;text-shadow:-1px -1px 0 #671500,1px -1px 0 #671500,-1px 1px 0 #671500,1px 1px 0 #671500,0 0 7px #fff,0 0 15px #ff4d00!important;transform:translateX(-50%) skewX(-8deg)!important;animation:cqre-critical-title .88s cubic-bezier(.16,.78,.25,1) both!important}
.battle-grid .result-weakness{background:#174fb2!important;box-shadow:0 0 8px #fff,0 0 18px #29c8ff!important;text-shadow:0 2px 2px #00285d!important}
.battle-grid .result-nullify{background:#4b5865!important;box-shadow:0 0 8px #fff,0 0 18px #b7d1e6!important}
.battle-grid .result-reflect{background:#8c258f!important;box-shadow:0 0 8px #fff,0 0 20px #fa64ff!important}
.battle-grid .result-absorb{background:#087a4a!important;box-shadow:0 0 8px #fff,0 0 20px #31f49a!important}
.battle-grid > .cqre-damage-rise-v2.cqre-hit-critical{color:#ffe45a!important;-webkit-text-stroke-color:#731500!important;text-shadow:-1px -1px 0 #731500,1px -1px 0 #731500,-1px 1px 0 #731500,1px 1px 0 #731500,0 0 7px #fff,0 0 17px #ff5400!important}
.battle-grid > .cqre-damage-rise-v2.cqre-hit-weakness{filter:drop-shadow(0 0 7px #22d7ff)!important}
.battle-cell.combat-nullify-flash .unit-visual{animation:cqre-nullify-flash .6s ease-out both!important}
.battle-cell.combat-reflect-flash .unit-visual{animation:cqre-reflect-flash .7s ease-out both!important}
.battle-cell.combat-absorb-flash .unit-visual{animation:cqre-absorb-flash .72s ease-out both!important}
.battle-cell.impact-critical{z-index:70!important;animation:cqre-critical-cell .62s ease-out both!important}
.battle-cell.impact-critical .unit-visual{animation:cqre-critical-victim .62s cubic-bezier(.16,.78,.2,1) both!important}
.battle-cell.impact-critical .unit-visual.unit-knockback-pending{animation:cqre-critical-pending .62s ease-out both!important}
.battle-cell.impact-weakness{z-index:65!important;animation:cqre-weakness-cell .58s ease-out both!important}
.battle-cell.impact-weakness .unit-visual{animation:cqre-weakness-victim .58s cubic-bezier(.16,.78,.2,1) both!important}
.battle-cell.impact-weakness .unit-visual.unit-knockback-pending{animation:cqre-weakness-pending .58s ease-out both!important}
@keyframes cqre-combat-result-pop{0%{opacity:0;transform:translate(-50%,12px) scale(.35)}20%{opacity:1;transform:translate(-50%,-7px) scale(1.18)}65%{opacity:1;transform:translate(-50%,-14px) scale(1)}100%{opacity:0;transform:translate(-50%,-31px) scale(.9)}}
@keyframes cqre-critical-title{0%{opacity:0;transform:translate(-50%,13px) scale(.25) skewX(-8deg)}20%{opacity:1;transform:translate(-50%,-3px) scale(1.28) skewX(-8deg)}50%{opacity:1;transform:translate(-50%,-11px) scale(1) skewX(-8deg)}100%{opacity:0;transform:translate(-50%,-34px) scale(.88) skewX(-8deg)}}
@keyframes cqre-nullify-flash{0%,100%{filter:none}25%,55%{filter:grayscale(1) brightness(2.2);transform:scale(1.08)}}
@keyframes cqre-reflect-flash{0%,100%{filter:none}20%{filter:brightness(2.5) drop-shadow(0 0 13px #f5f)}45%{transform:translateX(-5px)}65%{transform:translateX(4px)}}
@keyframes cqre-absorb-flash{0%,100%{filter:none}25%,65%{filter:brightness(1.6) drop-shadow(0 0 14px #2aff91);transform:scale(1.08)}}
@keyframes cqre-critical-cell{0%,100%{box-shadow:none;background:transparent}12%{box-shadow:0 0 0 2px #fff,0 0 22px 8px #ff531f;background:#fff8}38%{box-shadow:0 0 24px 7px #ff2f00;background:#ffb12c38}}
@keyframes cqre-critical-victim{0%{transform:translate(0,0) scale(1);filter:none}12%{transform:translate(-8px,1px) scale(.88,1.08);filter:brightness(3.2) saturate(1.8)}25%{transform:translate(7px,-2px) scale(1.14,.9);filter:brightness(1.8) drop-shadow(0 0 13px #ff3b00)}40%{transform:translate(-5px,1px) scale(.94,1.06);filter:brightness(1.35)}58%{transform:translate(3px,0) scale(1.05,.97);filter:none}78%{transform:translate(-1px,0) scale(.99,1.01)}100%{transform:none;filter:none}}
@keyframes cqre-critical-pending{0%{filter:none}12%{filter:brightness(3.2) saturate(1.8) drop-shadow(0 0 14px #ff3b00)}35%{filter:brightness(1.65) drop-shadow(0 0 11px #ff3b00)}65%{filter:brightness(1.18)}100%{filter:none}}
@keyframes cqre-weakness-cell{0%,100%{box-shadow:none;background:transparent}16%{box-shadow:0 0 0 2px #fff,0 0 19px 7px #1bcfff;background:#d9fbff88}42%{box-shadow:0 0 20px 6px #118cff;background:#56d7ff2e}}
@keyframes cqre-weakness-victim{0%{transform:translate(0,0) scale(1);filter:none}15%{transform:translate(-6px,1px) scale(.91,1.07);filter:brightness(2.8) saturate(1.6)}31%{transform:translate(5px,-1px) scale(1.1,.93);filter:brightness(1.65) drop-shadow(0 0 11px #30cfff)}52%{transform:translate(-3px,0) scale(.97,1.03);filter:none}74%{transform:translate(1px,0) scale(1.02,.99)}100%{transform:none;filter:none}}
@keyframes cqre-weakness-pending{0%{filter:none}15%{filter:brightness(2.8) saturate(1.6) drop-shadow(0 0 12px #30cfff)}42%{filter:brightness(1.55) drop-shadow(0 0 9px #30cfff)}70%{filter:brightness(1.12)}100%{filter:none}}

/* Rotating thrown blade and visible miss result. */
.projectile-spinning_blade{width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #79cfff);animation:projectile-flight .58s cubic-bezier(.2,.65,.25,1) both,projectile-blade-spin .14s linear infinite}
.projectile-spinning_blade::before{content:"";position:absolute;left:20px;top:1px;width:8px;height:38px;border:2px solid #eaf7ff;border-radius:70% 8px 8px 70%;background:linear-gradient(90deg,#7697b7,#fff 48%,#8db1ce 55%,#31516f);box-shadow:0 0 5px #fff}
.projectile-spinning_blade::after{content:"";position:absolute;left:10px;top:20px;width:28px;height:8px;border-radius:5px;background:linear-gradient(#f7dd7c,#8e551a);box-shadow:0 0 4px #ffe8a0}
.battle-grid .result-miss{top:-8px!important;padding:0!important;border:0!important;background:transparent!important;color:#eef7ff!important;font-size:21px!important;font-style:italic!important;letter-spacing:.08em!important;-webkit-text-stroke:1px #243a57!important;text-shadow:0 0 5px #fff,0 0 13px #55b9ff!important}

/* 管理IP試用: 外部PiP動画を上部へ置くための、ながらプレイ画面。 */
.watch-mode-space{display:none}
@media(max-width:800px){
  .battle-screen.watch-mode.combat-active .watch-mode-space{display:flex;min-height:clamp(150px,42vw,210px);box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:8px 10px 0;border:1px dashed #587a99;border-radius:12px;background:linear-gradient(145deg,#081321,#10233a);color:#9fc4df;text-align:center;pointer-events:none}
  .battle-screen.watch-mode.combat-active .watch-mode-space span{font-size:13px;font-weight:800;letter-spacing:.04em}
  .battle-screen.watch-mode.combat-active .watch-mode-space small{font-size:10px;color:#6f91ab}
  .battle-screen.watch-mode.combat-active .battle-layout{padding-top:10px}
  .battle-screen.watch-mode.combat-active .battle-skill-actions{position:sticky;z-index:120;bottom:0;padding:7px;background:#07111be8;box-shadow:0 -6px 18px #0007;backdrop-filter:blur(5px)}
  .battle-screen.watch-mode.combat-active .battle-next-action:not([hidden]){position:fixed!important;z-index:1400;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));width:min(88vw,390px);min-height:58px;margin:0!important;border:2px solid #fff0a8;border-radius:16px;background:linear-gradient(180deg,#f0b93f,#9b5c08);box-shadow:0 0 0 5px #07111bcc,0 10px 34px #000c,0 0 24px #ffc94f99;color:#fff;font-size:18px;font-weight:900;transform:translateX(-50%);animation:cqre-watch-next-pop .28s ease-out both}
}
@keyframes cqre-watch-next-pop{from{opacity:0;transform:translate(-50%,18px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.battle-cell.impact-miss .unit-visual{animation:cqre-miss-evade .55s ease-out both!important}
@keyframes projectile-blade-spin{to{transform:rotate(360deg)}}
@keyframes cqre-miss-evade{0%,100%{transform:none;filter:none}30%{transform:translateY(-5px) scale(.96);filter:brightness(1.35)}60%{transform:translateY(2px);filter:none}}
/* Debuff visuals: a sword or shield visibly shatters over the target. */
.effect-npc_skill_attack.skill-sword_break,.effect-skill_buff.skill-sword_break,.effect-npc_skill_attack.skill-shield_break,.effect-skill_buff.skill-shield_break{overflow:visible;border-radius:50%;background:radial-gradient(circle,#fff 0 5%,#ffdb7d99 13%,#b6402a66 34%,transparent 69%);box-shadow:0 0 20px #fff4bd,0 0 44px #e64634;animation:cqre-break-impact .92s ease-out both}
.effect-npc_skill_attack.skill-sword_break::before,.effect-skill_buff.skill-sword_break::before{content:"";position:absolute;left:43%;top:4%;width:12%;height:47%;border:2px solid #f2fbff;border-radius:70% 12% 4px 4px;background:linear-gradient(90deg,#49647e,#fff 45%,#83a9c8 55%,#23384d);box-shadow:0 0 8px #fff;transform:rotate(-38deg);transform-origin:50% 100%;animation:cqre-broken-sword-top .82s cubic-bezier(.18,.75,.25,1) both}
.effect-npc_skill_attack.skill-sword_break::after,.effect-skill_buff.skill-sword_break::after{content:"";position:absolute;left:42%;top:48%;width:16%;height:45%;border-top:7px solid #d5a343;border-radius:4px;background:linear-gradient(90deg,#503215,#db9d3b 45%,#6c3d13);box-shadow:0 0 6px #ffd77c;transform:rotate(-38deg);transform-origin:50% 0;animation:cqre-broken-sword-bottom .82s cubic-bezier(.18,.75,.25,1) both}
.effect-npc_skill_attack.skill-shield_break::before,.effect-skill_buff.skill-shield_break::before{content:"";position:absolute;inset:13% 19% 20%;border:4px solid #eef8ff;background:linear-gradient(135deg,#dff5ff 0 38%,#446783 40% 47%,#b7d9ec 49% 100%);clip-path:polygon(50% 0,94% 18%,85% 72%,50% 100%,15% 72%,6% 18%);box-shadow:inset 0 0 13px #fff,0 0 10px #b7e7ff;animation:cqre-broken-shield-left .86s cubic-bezier(.18,.75,.25,1) both}
.effect-npc_skill_attack.skill-shield_break::after,.effect-skill_buff.skill-shield_break::after{content:"";position:absolute;left:49%;top:18%;width:34%;height:58%;border:3px solid #eef8ff;border-left:0;background:linear-gradient(145deg,#8db4ce,#eaffff 55%,#58758e);clip-path:polygon(0 0,100% 7%,87% 80%,6% 100%,20% 58%,0 39%);box-shadow:0 0 9px #d7f4ff;animation:cqre-broken-shield-right .86s cubic-bezier(.18,.75,.25,1) both}
.effect-skill_buff.skill-sword_break .buff-value,.effect-skill_buff.skill-shield_break .buff-value{border-color:#ffb09c;background:#270907e8;color:#ffd8cf;text-shadow:0 1px 3px #000;animation:skill-buff-label 1.05s ease-out both}
@keyframes cqre-break-impact{0%{opacity:0;transform:scale(.3);filter:brightness(2.5)}24%{opacity:1;transform:scale(1.12);filter:brightness(1.8)}48%{opacity:1;transform:scale(1);filter:none}100%{opacity:0;transform:scale(1.32);filter:brightness(.8)}}
@keyframes cqre-broken-sword-top{0%,30%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0;translate:-28px -34px;rotate:-75deg}}
@keyframes cqre-broken-sword-bottom{0%,30%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0;translate:31px 28px;rotate:68deg}}
@keyframes cqre-broken-shield-left{0%,30%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0;translate:-34px 24px;rotate:-48deg}}
@keyframes cqre-broken-shield-right{0%,30%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0;translate:35px 27px;rotate:53deg}}
/* Rough stone projectile. */
.projectile-stone{width:34px;height:30px;margin:-15px 0 0 -17px;border:3px solid #d7c7aa;border-radius:48% 58% 43% 61%;background:radial-gradient(circle at 31% 27%,#eee3cb 0 7%,transparent 9%),radial-gradient(circle at 68% 64%,#52483d 0 9%,transparent 11%),linear-gradient(145deg,#a99a82 0 24%,#665b4d 48%,#302a25 76%,#877966 100%);box-shadow:inset 4px 4px 7px #f1e4c455,inset -5px -5px 8px #19151288,0 0 5px #fff8,0 0 11px #dfb77a77;filter:drop-shadow(7px 5px 4px #0008);animation:projectile-flight .58s cubic-bezier(.2,.65,.25,1) both,projectile-stone-spin .2s linear infinite}
.projectile-stone::before{content:"";position:absolute;left:7px;top:8px;width:7px;height:5px;border-radius:50%;background:#4b4137;box-shadow:11px -3px 0 -1px #c9b99d,15px 8px 0 -2px #29241f}
@keyframes projectile-stone-spin{to{transform:rotate(360deg)}}
.effect-summon{position:absolute;inset:-18px;z-index:24;border:3px solid rgba(137,231,255,.9);border-radius:50%;box-shadow:0 0 16px #7de8ff,0 0 34px rgba(180,102,255,.8),inset 0 0 18px rgba(255,255,255,.9);animation:cqre-summon-ring 1s ease-out both;pointer-events:none}.effect-summon b{position:absolute;left:50%;top:50%;width:7px;height:24px;margin:-12px 0 0 -3px;border-radius:7px;background:linear-gradient(#fff,#76eaff,transparent);transform:rotate(var(--summon-angle)) translateY(-46px);transform-origin:center 58px;animation:cqre-summon-spark .72s var(--summon-delay) ease-out both}.unit-summoned{animation:cqre-summoned-unit .85s cubic-bezier(.18,.82,.28,1.25) both}@keyframes cqre-summon-ring{0%{opacity:0;transform:scale(.15) rotate(-45deg)}35%{opacity:1;transform:scale(1.15) rotate(8deg)}100%{opacity:0;transform:scale(1.5) rotate(35deg)}}@keyframes cqre-summon-spark{0%{opacity:0;filter:brightness(2)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--summon-angle)) translateY(-10px) scale(.2)}}@keyframes cqre-summoned-unit{0%{opacity:0;transform:scale(.25);filter:brightness(3) saturate(0)}48%{opacity:1;transform:scale(1.25);filter:brightness(1.8)}100%{transform:scale(1);filter:none}}
.reward-thanks{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
.reward-thanks h3{margin:0 0 10px;color:#fff3a2}.reward-thanks>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px}.reward-thanks article{display:flex;align-items:center;gap:7px;padding:8px;border-radius:10px;background:#172945}.reward-thanks article a{min-width:0;display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none}.reward-thanks article img{width:48px;height:48px;object-fit:contain}.reward-thanks article span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reward-thanks button{margin-left:auto;padding:7px;border:1px solid #ffe378;border-radius:8px;background:#785517;color:#fff;font-weight:900;white-space:nowrap}.reward-thanks button:disabled{border-color:#68748a;background:#394357;color:#bfc7d4}.reward-like-history{display:inline-block;margin-top:10px;color:#bcecff;font-weight:800}
@media(max-width:560px){.reward-thanks>div{grid-template-columns:1fr 1fr}.reward-thanks article{align-items:stretch;flex-direction:column}.reward-thanks button{width:100%;margin:0}}