.panel{
  min-width:0;
  padding:var(--sp-4);
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-1);
}
.hp{
  position:relative;
  height:16px;
  overflow:hidden;
  background:var(--bg-input);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.hp__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:100%;
  background:var(--c,var(--accent));
  transition:width var(--dur-2) var(--ease-out);
}
.hp__txt{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  max-width:calc(100% - 8px);
  padding:0 6px;
  overflow:hidden;
  border-radius:var(--r-pill);
  background:var(--text-ink);
  font-size:11px;
  line-height:14px;
  color:var(--text);
  white-space:nowrap;
  text-overflow:ellipsis;
}
.minibar{
  display:block;
  width:100%;
  height:4px;
  overflow:hidden;
  background:var(--bg-input);
  border-radius:var(--r-pill);
}
.minibar>i{
  display:block;
  width:0;
  height:100%;
  background:var(--accent);
  transition:width var(--dur-2) var(--ease-out);
}
.depth-rail{
  display:grid;
  grid-template-columns:repeat(var(--depth-cap-half,15),minmax(0,1fr));
  gap:3px;
}
.depth-cell{
  min-height:24px;
  background:var(--bg-input);
  border:1px solid var(--line);
  border-radius:3px;
}
.depth-cell.is-past{
  background:var(--accent-deep);
}
.depth-cell.is-current{
  background:var(--coin);
  box-shadow:var(--glow-coin);
}
.enemy-sprite{
  position:relative;
  width:min(42vw,180px);
  aspect-ratio:1;
  margin:auto;
  border-radius:46% 54% 42% 58%;
  background:radial-gradient(circle at 60% 32%,var(--enemy-1),var(--enemy-2) 68%);
  box-shadow:var(--shadow-2);
  animation:idleFloat 2.4s var(--ease-out) infinite;
}
.enemy-sprite::before,.enemy-sprite::after{
  content:"";
  position:absolute;
  top:37%;
  width:12%;
  aspect-ratio:1;
  border-radius:var(--r-pill);
  background:var(--enemy-eye);
}
.enemy-sprite::before{
  left:30%;
}
.enemy-sprite::after{
  right:30%;
}
.party{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2);
}
.party-slot{
  display:grid;
  align-content:start;
  min-width:0;
  padding:var(--sp-2);
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.party-slot__sd{
  width:100%;
  max-width:160px;
  height:auto;
  margin-inline:auto;
  display:block;
}
.party-slot__line{
  color:var(--ct,var(--text-mid));
  font-size:12px;
}
.battle-log{
  max-height:18rem;
  overflow:auto;
  margin:0;
  padding:0;
  list-style:none;
}
.battle-log__item{
  padding:var(--sp-1) 0;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-mid);
  font-size:12px;
}
.coin-chip,.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-1);
  padding:var(--sp-2);
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.toast-layer{
  position:fixed;
  top:calc(var(--hdr-h-sp) + var(--sp-2));
  left:50%;
  display:grid;
  gap:var(--sp-2);
  width:max-content;
  max-width:calc(100vw - var(--sp-5));
  transform:translateX(-50%);
  pointer-events:none;
}
.toast{
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg-raise);
  border:1px solid var(--accent-line);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-2);
  pointer-events:none;
  animation:popIn var(--dur-3) var(--ease-pop);
}
@media (max-width:879px){
  .toast-layer{
    top:calc(var(--hdr-h-sp) + var(--sp-2) + var(--sp-6) + var(--sp-5) + var(--sp-5));
  }
}
.modal-layer,.overlay-layer{
  position:fixed;
  inset:0;
  background:var(--bg-scrim);
}
.modal-layer{
  display:grid;
  place-items:center;
  padding:var(--sp-4);
}
.modal{
  width:min(100%,560px);
  max-height:calc(100vh - var(--sp-6));
  overflow:auto;
  padding:var(--sp-5);
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
}
@media (min-width:880px){
  .party{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .depth-rail{
    grid-template-columns:repeat(var(--depth-cap),minmax(0,1fr));
  }
  .depth-cell{
    min-height:30px;
  }
  .enemy-sprite{
    width:min(26vw,200px);
  }
  .battle-log{
    max-height:28rem;
  }
  .toast-layer{
    top:auto;
    right:var(--sp-3);
    bottom:var(--sp-4);
    left:auto;
    width:auto;
    transform:none;
  }
}
@media (min-width:1200px){
  .party.is-six{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
}

/* --- ステージ / ボス / 加入演出 --- */
.stages-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:var(--sp-4);
  margin-bottom:var(--sp-3);
  border-color:var(--accent-line);
  background:linear-gradient(135deg,var(--bg-panel),var(--accent-soft));
}
.stages-head h1,.stages-head p{
  margin:0;
}
.stages-head small,.stage__index{
  color:var(--accent-hi);
  font-weight:700;
  letter-spacing:.12em;
}
.stage-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-3);
}
.stage{
  min-width:0;
  overflow:hidden;
}
.stage.is-live{
  grid-column:1/-1;
  border-color:var(--accent-line);
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-2));
}
.stage header{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:var(--sp-3);
}
.stage h2{
  margin:var(--sp-1) 0 0;
}
.stage__badge{
  flex:0 0 auto;
  padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--accent);
  border-radius:var(--r-pill);
  color:var(--accent-hi);
}
.stage__badge.is-wip-badge{
  border-color:var(--danger);
  color:var(--danger);
}
.stage__badge.is-cleared{
  border-color:var(--ok);
  color:var(--ok);
}
.stage__chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
}
.stage__chips span{
  padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--bg-input);
  color:var(--coin);
  font-weight:700;
}
.stage__reward,.stage__join{
  color:var(--coin);
  font-weight:700;
}
.stage__stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2);
  margin:var(--sp-3) 0;
}
.stage__stats div{
  padding:var(--sp-3);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--bg-input);
}
.stage__stats dt{
  color:var(--text-mid);
}
.stage__stats dd{
  margin:var(--sp-1) 0 0;
  font-size:20px;
  font-weight:700;
}
.stage__mode-note{
  display:block;
  margin-top:var(--sp-2);
  color:var(--text-mid);
  text-align:center;
}
.stage__mode-current{
  margin:var(--sp-2) 0 0;
  color:var(--text-mid);
  text-align:center;
}
.stage__mode-current b{
  display:inline-block;
  margin-left:var(--sp-1);
  padding:2px var(--sp-2);
  border:1px solid var(--accent);
  border-radius:var(--r-pill);
  color:var(--accent-hi);
}
.is-wip{
  position:relative;
  filter:grayscale(1);
  opacity:.55;
}
.is-wip::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,77,106,.10) 10px 20px);
}
.stage.is-wip{
  cursor:not-allowed;
  border-color:var(--line-soft);
}
.stage.is-wip h2{
  color:var(--text-mid);
}
.stage.is-wip p{
  color:var(--text-mid);
}
.stage.is-wip p,
.stage__mode-note,
.stage__join,
.unlock-text,
.gacha-wip li span{
  line-break:strict;
  word-break:keep-all;
}
.stage.is-wip .stage__chips span{
  color:var(--text-mid);
  border-color:var(--line-soft);
}
.stage.is-wip .stage__badge.is-wip-badge{
  background:var(--danger);
  border-color:var(--danger);
  color:var(--text-ink);
}
.enemy-sprite[data-kind="boss"]{
  width:min(54vw,260px);
  border:4px solid var(--danger);
  box-shadow:0 0 28px rgba(255,77,106,.55),inset 0 0 24px rgba(255,215,94,.18);
  background:radial-gradient(circle at 60% 32%,#9f4961,#311220 68%);
}
.enemy-hp[data-kind="boss"]{
  height:24px;
  border:2px solid var(--coin);
  box-shadow:0 0 14px rgba(255,215,94,.28);
  --c:linear-gradient(90deg,#b81e45,var(--danger),var(--coin));
}
.enemy-sprite.is-boss-enter{
  animation:bossEnter 700ms var(--ease-pop);
}
.boss-kill-flash{
  position:absolute;
  z-index:8;
  inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
}
.boss-kill-flash.is-flash{
  animation:bossKillFlash 120ms linear;
}
.battle-banner{
  position:absolute;
  inset:0;
  z-index:32;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.battle-banner span{
  padding:var(--sp-2) var(--sp-5);
  border-radius:var(--r-pill);
  background:var(--bg-scrim);
  font-weight:800;
  letter-spacing:.12em;
  font-size:clamp(20px,5vw,32px);
  opacity:0;
  border:2px solid transparent;
}
.battle-banner.is-show span{
  animation:bannerFlash 1100ms var(--ease-pop);
}
.battle-banner--boss span{
  color:var(--danger);
  border-color:var(--danger);
}
.battle-banner--clear span{
  color:var(--ok);
  border-color:var(--ok);
}
.fx-boss-coin{
  z-index:9;
  font-size:32px;
  text-shadow:0 0 12px rgba(255,215,94,.85),var(--shadow-2);
}
.join-overlay{
  display:grid;
  grid-template-columns:minmax(180px,300px) minmax(260px,1fr);
  align-items:center;
  gap:var(--sp-5);
  text-align:center;
}
.join-overlay img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 0 22px var(--accent));
  animation:popIn 480ms var(--ease-pop);
}
.join-overlay h2{
  margin:var(--sp-2) 0;
  color:var(--accent-hi);
  font-size:clamp(24px,4vw,38px);
}
.join-overlay__eyebrow{
  color:var(--coin);
  font-weight:800;
  letter-spacing:.18em;
}
.join-overlay__suffix{
  display:inline-block;
  white-space:nowrap;
}
.battle-main.is-boss-compact .depth-rail,
.battle-main.is-boss-compact .mode-toggle{
  display:none;
}
@media (max-width:879px),(max-height:820px){
  .battle-main.is-boss-compact .enemy-sprite[data-kind="boss"]{
    width:min(44vw,220px);
  }
  .battle-main.is-boss-compact .enemy-hp[data-kind="boss"]{
    height:16px;
  }
  .battle-main.is-boss-compact .party{
    gap:4px;
  }
  .battle-main.is-boss-compact .party-slot{
    padding:4px;
  }
  .battle-main.is-boss-compact .party-slot__sd,
  .battle-main.is-boss-compact .equip-slots,
  .battle-main.is-boss-compact .power{
    display:none;
  }
  .battle-main.is-boss-compact .char-hp{
    height:10px;
  }
  .battle-main.is-boss-compact .char header{
    margin-bottom:2px;
  }
  .battle-main.is-boss-compact .char-hp .hp__txt{
    padding:0 4px;
    font-size:9px;
    line-height:10px;
  }
}
@keyframes bossEnter{
  from{transform:translateX(36px) scale(1.2);opacity:0;filter:brightness(2);}
  to{transform:translateX(0) scale(1);opacity:1;}
}
@keyframes bossKillFlash{
  0%,45%{opacity:.9;}
  100%{opacity:0;}
}
@media (max-width:559px){
  .stages-head{
    display:block;
  }
  .stages-head p{
    margin-top:var(--sp-2);
  }
  .stage-list{
    grid-template-columns:1fr;
  }
  .stage.is-live{
    grid-column:auto;
  }
  .stage__stats{
    grid-template-columns:1fr 1fr;
  }
  .join-overlay{
    grid-template-columns:1fr;
    gap:0;
  }
  .join-overlay img{
    width:min(58vw,220px);
    margin:auto;
  }
}
@keyframes floatUp{
  0%  {
    transform: translate(-50%, 0) scale(.85);
    opacity:0;
  }
  18% {
    transform: translate(-50%, -8px) scale(1.12);
    opacity:1;
  }
  100%{
    transform: translate(-50%, -46px) scale(1);
    opacity:0;
  }
}
@keyframes floatDown{
  0%  {
    transform:translate(-50%,0) scale(.85);
    opacity:0;
  }
  18% {
    transform:translate(-50%,6px) scale(1.12);
    opacity:1;
  }
  100%{
    transform:translate(-50%,16px) scale(1);
    opacity:0;
  }
}
@keyframes dmgPop{
  0%  {
    transform: translate(-50%, 0) scale(.7);
    opacity:0;
  }
  22% {
    transform: translate(-50%, -12px) scale(1.25);
    opacity:1;
  }
  100%{
    transform: translate(-50%, -40px) scale(.95);
    opacity:0;
  }
}
@keyframes numBump{
  0%{
    transform:scale(1);
  }
  45%{
    transform:scale(1.18);
    filter:brightness(1.35);
  }
  100%{
    transform:scale(1);
  }
}
@keyframes cellRing{
  0%{
    box-shadow:0 0 0 0 rgba(255,215,94,.85);
  }
  100%{
    box-shadow:0 0 0 12px rgba(255,215,94,0);
  }
}
@keyframes tickUp{
  0%{
    transform:translateY(60%);
    opacity:0;
  }
  100%{
    transform:translateY(0);
    opacity:1;
  }
}
@keyframes hitShake{
  0%,100%{
    transform:translateX(0);
  }
  25%{
    transform:translateX(-3px);
  }
  75%{
    transform:translateX(3px);
  }
}
@keyframes idleFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-6px);
  }
}
@keyframes auraSpin{
  to{
    transform:rotate(360deg);
  }
}
@keyframes rippleOut{
  0%{
    transform:translate(-50%,-50%) scale(.2);
    opacity:.55;
  }
  100%{
    transform:translate(-50%,-50%) scale(1);
    opacity:0;
  }
}
@keyframes speedLines{
  to{
    background-position:-40px 0;
  }
}
@keyframes revealFlip{
  0%{
    transform:rotateY(90deg) scale(.9);
    opacity:0;
  }
  60%{
    transform:rotateY(-8deg) scale(1.04);
    opacity:1;
  }
  100%{
    transform:rotateY(0) scale(1);
    opacity:1;
  }
}
@keyframes sparkOnce{
  0%{
    box-shadow:0 0 0 0 currentColor;
  }
  45%{
    box-shadow:0 0 14px 3px currentColor;
  }
  100%{
    box-shadow:0 0 20px 7px transparent;
  }
}
@keyframes hueSpin{
  to{
    filter:hue-rotate(360deg);
  }
}
@keyframes lowPulse{
  0%,100%{
    opacity:1;
  }
  50%{
    opacity:.45;
  }
}
@keyframes bossBreath{
  0%,100%{
    box-shadow:0 0 6px var(--danger);
  }
  50%{
    box-shadow:0 0 18px var(--danger);
  }
}
@keyframes wipeFlash{
  0%{
    background:radial-gradient(circle, transparent 40%, rgba(201,32,61,.75) 100%);
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
@keyframes popIn{
  0%{
    transform:scale(.6);
    opacity:0;
  }
  70%{
    transform:scale(1.08);
    opacity:1;
  }
  100%{
    transform:scale(1);
  }
}
@keyframes shake{
  0%,100%{
    transform:translateX(0);
  }
  20%{
    transform:translateX(-5px);
  }
  60%{
    transform:translateX(5px);
  }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* 0014 battle UI */
.tab{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-1);
  border:0;
  background:transparent;
  color:var(--text-mid);
  white-space:nowrap;
}
.tab__badge{
  position:absolute;
  top:7px;
  right:calc(50% - 30px);
  width:8px;
  height:8px;
  border:1px solid var(--bg-panel);
  border-radius:50%;
  background:var(--danger);
  box-shadow:0 0 6px var(--danger);
}
.tab[aria-selected="true"]{
  color:var(--accent-hi);
  background:var(--accent-soft);
}
@media (max-width:420px){
  .tab{
    gap:2px;
    font-size:13px;
  }
  .tab .ic{
    width:1.1em;
    height:1.1em;
  }
}
.battle-main{
  position:relative;
  overflow:hidden;
}
.battle-top{
  display:grid;
  gap:var(--sp-2);
}
.battle-top>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-2);
}
.depth-rail{
  margin:0;
  padding:0;
  list-style:none;
}
.depth-cell{
  position:relative;
  min-width:0;
}
.depth-cell span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--text);
  font-size:9px;
}
.depth-cell.is-current span{
  color:var(--text-ink);
}
.depth-cell.is-best{
  border-color:var(--coin);
  box-shadow:inset 0 0 0 1px var(--coin);
}
.depth-cell.is-mark{
  border-color:var(--accent-line);
}
.rail__boss{
  border-radius:50%;
  border-color:var(--danger);
}
.rail__boss.is-ready{
  animation:bossBreath 1s infinite;
}
.depth-cell.is-cur{
  animation:cellRing 420ms;
}
.rail.is-milestone{
  filter:brightness(1.4);
}
.mode-toggle{
  display:flex;
  gap:var(--sp-2);
}
.mode-toggle button{
  flex:1;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--bg-input);
  color:var(--text-mid);
}
.mode-toggle button.is-active{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--text);
}
.mode-toggle button[aria-disabled="true"]{
  opacity:.5;
  color:var(--text-dim);
}
.boost{
  display:grid;
  grid-template-columns:auto minmax(80px,1fr);
  gap:var(--sp-1) var(--sp-2);
  align-items:center;
}
.boost small{
  grid-column:1/-1;
  color:var(--text-mid);
}
.progress{
  display:block;
  height:9px;
  overflow:hidden;
  background:var(--bg-input);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.progress i{
  display:block;
  height:100%;
  width:0;
  background:var(--accent);
  transition:width 260ms linear;
}
.enemy-area{
  position:relative;
  display:grid;
  gap:var(--sp-2);
  padding:var(--sp-4) 0;
  text-align:center;
}
.enemy-area::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity 300ms ease;
}
.enemy-area.is-wiped::after{
  opacity:1;
}
.enemy-area .enemy-hp{
  transition:opacity 300ms ease;
}
.enemy-area.is-wiped .enemy-hp{
  opacity:0;
}
.enemy-title{
  min-height:1.6em;
}
.enemy-hp{
  width:min(100%,480px);
  margin:auto;
  --c:var(--danger);
}
.hp__ghost{
  position:absolute;
  inset:0 auto 0 0;
  width:100%;
  background:var(--text-mid);
  opacity:.45;
  transition:width 520ms linear;
}
.hp__fill{
  transition:width 110ms linear;
}
.hp.is-low{
  animation:lowPulse 800ms infinite;
}
.hp.is-dead{
  opacity:.45;
}
.enemy-sprite{
  filter:hue-rotate(var(--hue,0deg));
}
.enemy-sprite.is-hit{
  animation:hitShake 120ms;
  filter:hue-rotate(var(--hue,0deg)) brightness(1.8);
}
.enemy-sprite.is-dying{
  animation:enemyDie 260ms;
}
.enemy-sprite.is-spawn{
  animation:enemySpawn 320ms var(--ease-pop);
}
.char{
  position:relative;
}
.char header{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-1);
}
.char__visual{
  position:relative;
}
.char-fx{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.char.is-hit{
  animation:hitShake 120ms;
}
.char.is-dead{
  opacity:.45;
}
.char.is-locked{
  filter:grayscale(1);
  opacity:.58;
}
.char.is-locked .char-hp,
.char.is-locked .equip-slots,
.char.is-locked .power,
.char:not(.is-locked) .unlock-text{
  display:none;
}
.unlock-text{
  min-height:3em;
  color:var(--text-mid);
  font-size:12px;
}
.power{
  display:block;
  color:var(--text-mid);
  font-size:11px;
}
.equip-slots{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-1);
  margin-top:var(--sp-1);
}
.equip-slots i{
  display:grid;
  place-items:center;
  height:24px;
  border:1px solid var(--line);
  border-radius:var(--r-xs);
  color:var(--text-dim);
  font-style:normal;
}
.equip-slots i.has-card{
  border-color:var(--ct);
  color:var(--ct);
}
.battle-info{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.battle-info>section:last-child{
  flex:1;
  display:flex;
  flex-direction:column;
}
.battle-info>section:last-child .battle-log{
  flex:1;
  min-height:0;
}
.battle-info h2{
  margin:0 0 var(--sp-2);
  font-size:16px;
}
.goals p{
  margin:var(--sp-2) 0;
}
.stats dl,.stats dd{
  margin:0;
}
.stats dl>div{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-2);
}
.battle-log__item{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-2);
}
.fx-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.fx-anchor{
  position:absolute;
  z-index:30;
  top:100%;
  left:50%;
  width:0;
  height:0;
  overflow:visible;
  pointer-events:none;
}
.fx-num{
  position:absolute;
  z-index:2;
  font-weight:700;
  white-space:nowrap;
  text-shadow:var(--shadow-1);
  pointer-events:none;
}
.fx-dmg{
  color:var(--dmg);
  animation:dmgPop 620ms;
}
.fx-dmg-in{
  color:var(--dmg-in);
  animation:dmgPop 620ms;
}
.fx-heal{
  color:var(--heal);
  animation:floatUp 820ms;
}
.fx-coin{
  color:var(--coin);
  animation:floatDown 900ms;
}
.coin-chip{
  position:relative;
  overflow:hidden;
}
.coin-chip__fill{
  position:absolute;
  inset:auto auto 0 0;
  z-index:0;
  width:0;
  height:28%;
  background:var(--coin);
  opacity:.28;
  transition:width 260ms linear;
  pointer-events:none;
}
.coin-chip>*:not(.coin-chip__fill){
  position:relative;
  z-index:1;
}
.coin-chip.is-bump{
  animation:numBump 180ms;
}
.ripple{
  position:absolute;
  width:90px;
  height:90px;
  border:2px solid var(--accent);
  border-radius:50%;
  pointer-events:none;
  animation:rippleOut 420ms;
}
.battle-main.is-boosting::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.16;
  background:repeating-linear-gradient(120deg,transparent 0 16px,var(--accent-soft) 16px 19px);
  animation:speedLines 500ms linear infinite;
}
.battle-main>*:not(.fx-layer):not(.wipe-vignette):not(.ripple):not(.boss-kill-flash):not(.battle-banner){
  position:relative;
  z-index:2;
}
.wipe-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
.wipe-vignette.is-wipe{
  animation:wipeFlash 500ms;
}
.rail.is-rewind .depth-cell{
  animation:railRewind 500ms;
}
.placeholder{
  text-align:center;
}
.onboard-tip{
  position:absolute;
  z-index:5;
  top:50%;
  left:50%;
  width:max-content;
  max-width:90%;
  padding:var(--sp-2) var(--sp-3);
  transform:translate(-50%,-50%);
  border:1px solid var(--accent-line);
  border-radius:var(--r-pill);
  background:var(--bg-raise);
  box-shadow:var(--shadow-2);
  color:var(--text);
  pointer-events:none;
  animation:popIn var(--dur-3) var(--ease-pop);
}
@keyframes enemyDie{
  to{
    transform:scale(1.15);
    opacity:0;
    filter:blur(4px);
  }
}
@keyframes enemySpawn{
  from{
    transform:translateX(24px) scale(.8);
    opacity:0;
  }
}
@keyframes railRewind{
  to{
    background:var(--bg-input);
    transform:scale(.8);
    opacity:.4;
  }
}
@keyframes bannerFlash{
  0%{ transform:scale(.7); opacity:0; }
  16%{ transform:scale(1.05); opacity:1; }
  78%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(1); opacity:0; }
}

/* --- ガチャ / カード --- */
.gacha-banner{
  position:relative;
  min-height:180px;
  overflow:hidden;
  border-color:var(--accent-line);
  background:linear-gradient(135deg,var(--accent-deep),var(--c-r6));
}
.gacha-banner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(10,6,20,.76),rgba(10,6,20,.58) 60%,rgba(10,6,20,.3));
}
.gacha-banner__back{
  position:absolute;
  right:var(--sp-3);
  bottom:calc(var(--sp-4) * -1);
  font-size:clamp(52px,15vw,116px);
  font-weight:900;
  line-height:1;
  opacity:.13;
}
.gacha-banner h2,.gacha-banner p{
  position:relative;
  z-index:1;
  color:var(--text);
  text-shadow:0 1px 3px rgba(0,0,0,.75);
}
.gacha-banner h2{
  background:none;
  -webkit-text-fill-color:var(--text);
}
.gacha-live,.gacha-wip{
  margin-top:var(--sp-3);
}
.gacha-live{
  max-width:680px;
  margin-right:auto;
  margin-left:auto;
  padding-bottom:var(--sp-5);
}
.gacha-balance{
  font-size:18px;
  text-align:center;
}
.gacha-balance b{
  color:var(--coin);
  font-size:26px;
}
.gacha-collection{
  display:block;
  margin:var(--sp-3) 0 var(--sp-2);
  padding:var(--sp-3);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--bg-input);
}
.gacha-collection strong,.gacha-collection .progress{
  display:block;
}
.gacha-collection .progress{
  margin-top:var(--sp-2);
}
.gacha-actions{
  display:flex;
  gap:var(--sp-3);
  align-items:stretch;
  margin:var(--sp-4) auto;
  max-width:680px;
}
.gacha-actions .gacha-pull{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.gacha-actions .gacha-pull.is-main{
  flex-grow:1.6;
}
.gacha-actions .gacha-pull button{
  flex:1;
  display:grid;
  place-items:center;
  min-height:100px;
}
.gacha-actions button.is-main{
  flex-grow:1.6;
  border-color:var(--coin);
  box-shadow:var(--glow-coin);
}
.gacha-actions b{
  font-size:20px;
}
.gacha-pull__meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:68px;
  padding-top:var(--sp-1);
  color:var(--text);
}
.gacha-actions em{
  color:var(--coin);
  font-style:normal;
  font-weight:700;
}
@media (max-width:479px){
  .gacha-pull__meta em{
    font-size:12px;
  }
}
.gacha-actions small,.pull-again small{
  display:block;
  color:var(--danger);
  font-weight:700;
}
.gacha-actions .is-disabled{
  color:var(--text-mid);
  background:var(--bg-input);
  border-color:var(--line);
  cursor:not-allowed;
}
.gacha-actions button.is-main.is-disabled{
  border-color:var(--line);
  box-shadow:none;
}
[data-pull-again][aria-disabled="true"]{
  opacity:.7;
  cursor:not-allowed;
}
.pull-again{
  display:inline-block;
  vertical-align:top;
}
.is-busy .gacha-actions button{
  pointer-events:none;
  opacity:.65;
}
.shake{
  animation:shake 420ms;
}
.gacha-rates{
  max-width:680px;
  margin:auto;
  color:var(--text-mid);
}
.gacha-rates summary{
  cursor:pointer;
  color:var(--accent-hi);
}
.gacha-rates .progress,.collection-head .progress{
  display:block;
  margin-top:var(--sp-2);
}
.gacha-wip{
  max-width:680px;
  margin:var(--sp-3) auto 0;
  text-align:center;
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-2));
}
.gacha-wip header{
  display:flex;
  gap:var(--sp-3);
  align-items:center;
  justify-content:space-between;
  text-align:left;
}
.gacha-wip h2,.gacha-wip p{
  margin:0;
}
.gacha-wip strong{
  color:var(--coin);
  white-space:nowrap;
}
.gacha-wip ul{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin:var(--sp-3) 0 0;
  padding:0;
  list-style:none;
}
.gacha-wip li{
  flex:1 1 116px;
  padding:var(--sp-2);
  border:1px dashed var(--line);
  border-radius:var(--r-sm);
  background:var(--bg-input);
}
.gacha-wip li .stage__badge{
  display:inline-block;
  margin:var(--sp-1) 0;
  background:var(--danger);
  border-color:var(--danger);
  color:var(--text-ink);
  font-style:normal;
}
.gacha-wip li b,.gacha-wip li span{
  display:block;
}
.gacha-wip li span{
  color:var(--text-mid);
  font-size:12px;
}
.gacha-flash{
  position:fixed;
  z-index:350;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:var(--text);
}
.gacha-flash.is-flash{
  animation:ssrFlash 140ms;
}
.gacha-result{
  width:min(100%,980px);
}
.gacha-result__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2);
}
.gacha-result.is-single .gacha-result__grid{
  display:block;
  max-width:360px;
  margin:auto;
}
.reveal-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  min-width:0;
  padding:var(--sp-3);
  border:2px solid var(--line);
  border-radius:var(--r-md);
  background:var(--bg-panel-2);
  animation:revealFlip 420ms var(--ease-out);
  animation-delay:calc(var(--i) * 60ms);
  animation-fill-mode:both;
}
.reveal-card.rarity-n{
  border:1px solid var(--ra-n);
  background:var(--ra-n-bg);
}
.reveal-card.rarity-r{
  border:1px solid var(--ra-r);
  background:var(--ra-r-bg);
}
.reveal-card.rarity-sr{
  border:2px solid var(--ra-sr);
  background:var(--ra-sr-bg);
}
.reveal-card.rarity-r:not(.is-revealed),.reveal-card.rarity-sr:not(.is-revealed){
  animation:revealFlip 420ms var(--ease-out),sparkOnce 240ms var(--ease-out);
  animation-delay:calc(var(--i) * 60ms),calc(var(--i) * 60ms + 420ms);
  animation-fill-mode:both;
}
.reveal-card.is-revealed{
  animation:none;
}
.reveal-card header,.card-tile header{
  display:flex;
  gap:var(--sp-2);
  align-items:center;
}
.reveal-card h3,.reveal-card p{
  margin:0;
}
.reveal-card.rarity-ssr{
  z-index:1;
  scale:1.03;
  background:var(--ra-ssr-bg);
  border-image:var(--ra-ssr-grad) 1;
  box-shadow:var(--glow-ssr);
}
.reveal-card.rarity-ssr:not(.is-revealed){
  animation:revealFlip 420ms var(--ease-out),hueSpin 900ms linear infinite;
  animation-delay:calc(var(--i) * 60ms),0ms;
}
.gacha-result footer{
  position:sticky;
  z-index:2;
  bottom:calc(var(--sp-5) * -1);
  text-align:center;
  margin:var(--sp-4) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  padding:var(--sp-3) var(--sp-5) var(--sp-5);
  background:var(--bg-panel);
  border-top:1px solid var(--line);
}
.new-badge,.star-up,.max-chip{
  color:var(--coin);
}
.chip{
  display:inline-block;
  padding:1px 7px;
  border:1px solid currentColor;
  border-radius:var(--r-pill);
  font-size:12px;
  font-style:normal;
  font-weight:800;
}
.chip--n{
  color:var(--ra-n);
  background:var(--ra-n-bg);
}
.chip--r{
  color:var(--ra-r);
  background:var(--ra-r-bg);
}
.chip--sr{
  color:var(--ra-sr);
  background:var(--ra-sr-bg);
}
.chip--ssr{
  color:var(--coin);
  background:var(--ra-ssr-bg);
  border-image:var(--ra-ssr-grad) 1;
  animation:hueSpin 2s linear infinite;
}
.star-row{
  display:flex;
  align-items:center;
  gap:2px;
  color:var(--text-dim);
}
.star-row .ic{
  width:15px;
  height:15px;
  fill:transparent;
  stroke:var(--text-dim);
}
.star-row .is-on{
  fill:var(--coin);
  stroke:var(--coin);
}
.star-row b{
  margin-left:var(--sp-1);
  font-size:12px;
  color:var(--text-mid);
}
.card-subtabs{
  display:flex;
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.card-subtabs button{
  flex:1;
}
.card-subtabs .is-active{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.equip-head{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  align-items:center;
  justify-content:space-between;
}
.equip-head>div{
  display:flex;
  flex-direction:column;
}
.equip-head strong{
  font-size:28px;
  color:var(--coin);
}
.equip-head p{
  flex-basis:100%;
  margin:0;
  color:var(--warn);
}
.equip-char-list{
  display:grid;
  gap:var(--sp-3);
  margin-top:var(--sp-3);
}
.equip-char{
  position:relative;
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:var(--sp-3);
  border-color:var(--ct);
}
.equip-char>img{
  width:96px;
  height:96px;
  object-fit:contain;
}
.equip-char header{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-2);
  align-items:center;
}
.equip-char h3{
  margin:0;
}
.equip-char h3 span{
  color:var(--ct);
}
.equip-char dl{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:0;
  text-align:center;
}
.equip-char dl div{
  padding:var(--sp-1);
  background:var(--bg-panel-2);
}
.equip-char dt{
  font-size:12px;
  color:var(--text-dim);
}
.equip-char dd{
  margin:0;
  font-family:var(--font-num);
}
.equip-slot-grid{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-2);
}
.equip-slot{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:var(--sp-2);
  border:1px solid var(--line);
  background:var(--bg-input);
}
.equip-slot b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.equip-slot small{
  color:var(--text-dim);
  white-space:nowrap;
}
.result-mult{
  margin-left:auto;
  color:var(--coin);
  font-size:16px;
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.equip-slot.is-empty{
  border-style:dashed;
  font-size:20px;
}
.equip-slot.is-base{
  opacity:.65;
}
.equip-char.is-locked{
  background:var(--bg-input);
  border-style:dashed;
}
.equip-char.is-locked>img{
  filter:grayscale(1);
}
.equip-char.is-locked dl,.equip-char.is-locked header>strong{
  color:var(--text-dim);
}
.equip-char.is-locked header>strong small{
  display:block;
  font-weight:400;
}
.equip-char.is-locked .equip-slot{
  pointer-events:none;
}
.equip-char.is-locked .own-bonus{
  display:none;
}
.own-bonus{
  grid-column:1/-1;
  margin:0;
  color:var(--ok);
}
.own-bonus small{
  display:block;
  color:var(--text-dim);
}
.unlock-note{
  grid-column:1/-1;
  margin:0;
  padding:var(--sp-1);
  background:var(--bg-panel);
  color:var(--warn);
}
.slot-flash{
  animation:numBump 240ms;
}
.equip-picker__list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  max-height:60vh;
  overflow:auto;
}
.equip-picker__list button{
  flex:none;
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
}
.equip-picker__list small{
  color:var(--warn);
}
.equip-picker__list em{
  font-style:normal;
  color:var(--heal);
}
.equip-picker__current{
  margin-bottom:var(--sp-3);
  padding:var(--sp-3);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--bg-input);
}
.equip-picker__current>small,.equip-picker__current>span{
  display:block;
}
.equip-picker__current>small{
  margin-bottom:var(--sp-1);
  color:var(--text-mid);
}
.delta-plus{
  color:var(--ok);
}
.delta-minus{
  color:var(--danger);
}
.delta-zero{
  color:var(--text-mid);
}
.unequip-btn{
  width:100%;
  margin-top:var(--sp-3);
}
.collection-head{
  display:grid;
  gap:var(--sp-2);
}
.card-controls{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  align-items:end;
}
.card-controls label{
  display:flex;
  flex-direction:column;
}
.card-controls label:last-child{
  flex-direction:row;
  align-items:center;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2);
  margin-top:var(--sp-3);
}
.card-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  min-width:0;
  padding:var(--sp-3);
  border:2px solid var(--line);
  background:var(--bg-panel);
}
.card-tile.rarity-n{
  border-color:var(--ra-n);
}
.card-tile.rarity-r{
  border-color:var(--ra-r);
}
.card-tile.rarity-sr{
  border-color:var(--ra-sr);
}
.card-tile.rarity-ssr{
  border-color:var(--ra-ssr);
}
.card-tile h3,.card-tile p{
  margin:var(--sp-1) 0;
}
.card-tile header .ic{
  margin-left:auto;
}
.equip-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--dot);
  box-shadow:0 0 8px var(--dot);
}
.card-tile.is-unowned{
  background:var(--bg-input);
  border-style:dashed;
}
.card-tile small{
  color:var(--warn);
}
.card-tile__owner{
  white-space:normal;
  overflow-wrap:anywhere;
  font-size:14px;
}
.card-tile__owner small{
  white-space:nowrap;
}
.card-detail__stars{
  display:flex;
  gap:var(--sp-2);
  align-items:center;
  margin-top:var(--sp-2);
}
.card-detail h3{
  margin-top:var(--sp-4);
  color:var(--accent-hi);
}
.level-values{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-1);
  padding:0;
  list-style:none;
}
.level-values li{
  padding:var(--sp-1);
  background:var(--bg-panel-2);
}
.level-values .is-current{
  outline:2px solid var(--coin);
}
.overlay-layer{
  display:grid;
  place-items:center;
  padding:var(--sp-2);
}
.overlay-layer .modal{
  width:min(100%,1040px);
}
.overlay-layer .modal>[data-close]{
  display:none;
}
.modal-layer{
  place-items:end center;
  padding:0;
}
.modal-layer .modal{
  width:100%;
  max-height:88vh;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
@keyframes ssrFlash{
  50%{
    opacity:.92;
  }
  100%{
    opacity:0;
  }
}
@media (min-width:560px) and (max-width:879px){
  .gacha-collection{
    display:block;
  }
  .gacha-actions .gacha-pull button{
    min-height:148px;
  }
  .gacha-result.is-ten .gacha-result__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:559px){
  .gacha-collection .progress{
    display:none;
  }
  .gacha-wip header{
    flex-direction:column;
    align-items:flex-start;
  }
  .gacha-wip li span{
    word-break:keep-all;
  }
  .gacha-result.is-ten .gacha-result__grid{
    padding-bottom:128px;
  }
  .gacha-result.is-ten .reveal-card{
    padding:var(--sp-2);
  }
  .gacha-result.is-ten .reveal-card__kind,
  .gacha-result.is-ten .reveal-card__count,
  .gacha-result.is-ten .reveal-card__next{
    display:none;
  }
  .gacha-result.is-ten .reveal-card h3{
    font-size:14px;
    line-height:1.25;
    overflow-wrap:anywhere;
  }
  .gacha-result footer{
    margin:calc(-128px + var(--sp-4)) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  }
  .gacha-result footer::before{
    content:'';
    position:absolute;
    right:0;
    bottom:100%;
    left:0;
    height:24px;
    pointer-events:none;
    background:linear-gradient(to bottom,transparent,var(--bg-panel));
  }
}
@media (max-width:879px){
  .gacha-result.is-ten .reveal-card{
    gap:2px;
    padding:var(--sp-2);
    line-height:1.35;
  }
}
@media (min-width:880px){
  .gacha-banner{
    min-height:220px;
    padding:var(--sp-6);
  }
  .gacha-live,.gacha-wip{
    padding:var(--sp-6);
  }
  .gacha-collection{
    display:block;
  }
  .gacha-actions .gacha-pull button{
    min-height:152px;
  }
  .modal-layer{
    place-items:center;
    padding:var(--sp-4);
  }
  .modal-layer .modal{
    width:min(100%,560px);
    max-height:calc(100vh - var(--sp-6));
    border-radius:var(--r-lg);
  }
  .gacha-result.is-ten .gacha-result__grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .equip-char-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .card-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--sp-3);
  }
}