@font-face{
  font-family:"HeroBrush";
  src:url("fonts/hero-brush.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --pink:#ff7eb9; --pink-d:#e85b9d;
  --blue:#5aa9ff; --blue-d:#3d8bfd;
  --yellow:#ffb64d; --yellow-d:#f59b1b;
  --ink:#4a3f55; --ink-soft:#8a7c96;
  --card:#ffffff;
  --shadow:0 8px 24px rgba(180,140,160,.18);
  --shadow-sm:0 3px 10px rgba(180,140,160,.15);
  --radius:20px;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #ffe3ef 0%, transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, #e3f0ff 0%, transparent 55%),
    linear-gradient(160deg, #fff7f0 0%, #fdeef6 55%, #eef6ff 100%);
  min-height:100vh; overflow-x:hidden; position:relative;
}

/* 飘落装饰 */
.petals{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.petal{ position:absolute; top:-6%; opacity:.55; animation:fall linear infinite; user-select:none; }
@keyframes fall{ 0%{ transform:translateY(-6vh) translateX(0) rotate(0);} 100%{ transform:translateY(108vh) translateX(60px) rotate(360deg);} }

.app{ position:relative; z-index:2; max-width:1040px; margin:0 auto; padding:18px 16px 60px; }

/* 开始 / 选角界面背景 */
.screen-bg{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transition:opacity .6s ease; }
.screen-bg.show{ opacity:1; }
.screen-bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,247,240,.58) 0%, rgba(253,238,246,.46) 55%, rgba(238,246,255,.56) 100%); }
.screen{ display:none; }
.screen.active{ display:block; animation:pop .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop{ from{ opacity:0; transform:translateY(12px) scale(.98);} to{ opacity:1; transform:none;} }

/* 顶栏 */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(135deg,#ffd7e8,#d7e7ff); border-radius:var(--radius);
  padding:14px 20px; box-shadow:var(--shadow); margin-bottom:16px; }
.title{ font-size:1.25rem; font-weight:800; letter-spacing:.5px; }
.title .sub{ display:block; font-size:.72rem; font-weight:600; color:var(--ink-soft); letter-spacing:1px; }
.week-chip{ background:#fff; border-radius:999px; padding:8px 16px; font-weight:800; color:var(--pink-d);
  box-shadow:var(--shadow-sm); white-space:nowrap; font-size:.9rem; }

.columns{ display:grid; grid-template-columns:1fr 300px; gap:16px; }
@media (max-width:820px){ .columns{ grid-template-columns:1fr; } }
.panel{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }

/* 轮盘 */
.wheel-panel{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.wheel-caption{ font-size:.86rem; font-weight:700; color:var(--ink-soft); text-align:center; }
.wheel-caption b{ color:var(--ink); }
.wheel{ position:relative; width:178px; height:178px; border-radius:50%;
  box-shadow:inset 0 0 0 1px #f0e6ef, var(--shadow); margin:2px 0; }
.wheel-node{ position:absolute; width:62px; height:62px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800; color:#fff; transition:transform .35s ease, filter .35s ease, box-shadow .35s ease;
  filter:saturate(.7) opacity(.72); box-shadow:0 3px 8px rgba(0,0,0,.12); text-shadow:0 1px 2px rgba(0,0,0,.15); }
.wheel-node .ico{ font-size:1.3rem; line-height:1; }
.wheel-node.active{ filter:none; transform:scale(1.16); box-shadow:0 0 0 5px #fff, 0 0 22px currentColor; }
.wheel-node.sing{ background:linear-gradient(145deg,#ff9ac7,#f45f9e); color:var(--pink-d); left:50%; top:2%; transform:translateX(-50%); }
.wheel-node.dance{ background:linear-gradient(145deg,#7cb9ff,#3d8bfd); color:var(--blue-d); right:2%; bottom:6%; }
.wheel-node.visual{ background:linear-gradient(145deg,#ffc874,#f59b1b); color:var(--yellow-d); left:2%; bottom:6%; }
.wheel-node.active.sing{ transform:translateX(-50%) scale(1.16); }
.needle{ position:absolute; left:50%; top:50%; width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent; border-top:30px solid #e0457b;
  transform-origin:50% 100%; transform:translate(-50%,-100%) rotate(0deg);
  transition:transform .5s cubic-bezier(.3,.9,.4,1.2); filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.boost-note{ font-weight:800; color:#fff; border-radius:999px; padding:6px 14px; font-size:.85rem; box-shadow:var(--shadow-sm); transition:background .4s; }

/* 资源条 */
.bars{ display:flex; flex-direction:column; gap:8px; margin:4px 0 2px; width:100%; }
.bar-row{ display:flex; align-items:center; gap:10px; font-size:.82rem; }
.bar-label{ width:64px; font-weight:800; flex-shrink:0; }
.bar{ flex:1; height:16px; border-radius:999px; background:#f3ebf3; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.06); }
.bar-fill{ height:100%; border-radius:999px; transition:width .5s cubic-bezier(.2,.8,.3,1); }
.bar-fill.stamina{ background:linear-gradient(90deg,#6fdf8f,#3cc06b); }
.bar-fill.stamina.low{ background:linear-gradient(90deg,#ff9a7a,#ff5c5c); }
.bar-fill.vigor{ background:linear-gradient(90deg,#ffb64d,#ff8a3d); }
.bar-val{ width:44px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }

/* buff 状态卡 */
.buff-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.buff-box{ border-radius:16px; padding:12px 8px; text-align:center; color:#fff; box-shadow:var(--shadow-sm); position:relative; }
.buff-box .ic{ font-size:1.45rem; display:block; }
.buff-box .lb{ font-size:.72rem; font-weight:700; opacity:.95; margin-top:2px; }
.buff-box .vl{ font-size:1.5rem; font-weight:900; margin-top:2px; font-variant-numeric:tabular-nums; }
.buff-box.focus{ background:linear-gradient(150deg,#b49bff,#7f6bf2); }
.buff-box.tune{ background:linear-gradient(150deg,#ff9a6a,#ff6a3d); }
.buff-box.great{ background:linear-gradient(150deg,#ffd76a,#ffb300); }
.buff-box.great .vl{ font-size:1.05rem; }

.mult-note{ margin-top:10px; text-align:center; font-size:.8rem; color:var(--ink-soft); line-height:1.6; }
.mult-note b{ color:var(--ink); }

/* 卡牌 */
.hand-title{ font-weight:800; margin:14px 2px 10px; font-size:.95rem; }
.hand-title span{ color:var(--pink-d); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }
.card{ position:relative; border-radius:16px; padding:14px; cursor:pointer; background:#fff;
  box-shadow:var(--shadow-sm); border:2px solid transparent; overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.35), box-shadow .22s ease, border-color .22s ease; animation:rise .4s ease backwards; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.card:hover{ transform:translateY(-14px) scale(1.04); box-shadow:0 18px 34px rgba(180,140,160,.38); }
.card:active{ transform:translateY(-1px) scale(.98); }
.card .topstrip{ position:absolute; top:0; left:0; right:0; height:5px; }
.card.type-a{ border-color:#ffd9d9; } .card.type-a .topstrip{ background:linear-gradient(90deg,#ff8a8a,#ff5c5c); }
.card.type-m{ border-color:#d5f0e2; } .card.type-m .topstrip{ background:linear-gradient(90deg,#6fdf8f,#3cc06b); }
.card .tag{ display:inline-block; font-size:.62rem; font-weight:900; color:#fff; padding:2px 7px; border-radius:6px; letter-spacing:.5px; }
.card.type-a .tag{ background:#ff5c5c; }
.card.type-m .tag{ background:#3cc06b; }
.card .tag.ex{ background:linear-gradient(135deg,#ffd75e,#ff9d00); color:#5a3300; }
.card.exclusive{ border-color:#ffb300; box-shadow:0 0 0 2px rgba(255,179,0,.28), 0 10px 26px rgba(255,179,0,.3); }
.card.exclusive:hover{ box-shadow:0 0 0 2px rgba(255,179,0,.4), 0 18px 34px rgba(255,179,0,.42); }
.dc-name .tag{ display:inline-block; font-size:.58rem; font-weight:900; padding:1px 6px; border-radius:5px; margin-right:2px; }
.dc-name .tag.ex{ background:linear-gradient(135deg,#ffd75e,#ff9d00); color:#5a3300; }
.card .cname{ font-weight:800; font-size:1rem; display:flex; align-items:center; gap:6px; margin-top:6px; }
.card .cdesc{ font-size:.78rem; color:var(--ink-soft); margin-top:7px; line-height:1.5; }
.card .ccost{ position:absolute; top:12px; right:12px; font-size:.72rem; font-weight:800; padding:3px 9px; border-radius:999px; background:#fff2f2; color:#e04b4b; }
.card.played{ animation:playfly .5s ease forwards; pointer-events:none; }
@keyframes playfly{ 40%{ transform:scale(1.1) rotate(-2deg);} 100%{ transform:scale(.9) translateY(10px); opacity:0;} }

/* 出牌 · 技能名艺术字飘字 */
.skill-pop{
  position:fixed; left:50%; top:50%; z-index:300; pointer-events:none;
  transform:translate(-50%,-50%);
  font-size:clamp(2.6rem, 8vw, 5rem); font-weight:900; letter-spacing:.12em; white-space:nowrap;
  background:linear-gradient(180deg, #fff8fb 0%, #ffd7e8 35%, #ff7eb9 65%, #f45f9e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1.5px #c2447f;
  filter:drop-shadow(0 6px 18px rgba(232,91,157,.6)) drop-shadow(0 0 6px rgba(255,182,77,.5));
  animation:skillpop 1.05s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes skillpop{
  0%{ opacity:0; transform:translate(-50%,-20%) scale(.55) rotate(-3deg); }
  15%{ opacity:1; transform:translate(-50%,-58%) scale(1.08) rotate(1deg); }
  28%{ transform:translate(-50%,-66%) scale(1) rotate(0); }
  72%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-240%) scale(.9) rotate(2deg); }
}

/* 角色专属牌 · 全屏演出 */
.exclusive-fx{ position:fixed; inset:0; z-index:9000; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  animation:ex-fade 1.4s ease forwards; }
.exclusive-fx .ex-burst{ position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,215,94,.95) 0%, rgba(255,157,0,.5) 34%, rgba(255,157,0,0) 70%);
  animation:ex-burst 1.2s ease-out forwards; }
.exclusive-fx .ex-card{ font-size:4.8rem; line-height:1;
  filter:drop-shadow(0 6px 20px rgba(255,157,0,.75));
  animation:ex-card .7s cubic-bezier(.2,.9,.3,1.4); }
.exclusive-fx .ex-name{ font-size:clamp(1.3rem,4vw,1.9rem); font-weight:900; color:#fff;
  text-shadow:0 2px 0 #d97a00, 0 0 18px rgba(255,179,0,.95);
  animation:ex-name .6s ease; }
.exclusive-fx .ex-tag{ font-size:.72rem; font-weight:900; letter-spacing:4px; color:#fff;
  background:linear-gradient(135deg,#ffd75e,#ff9d00); padding:4px 14px; border-radius:999px;
  box-shadow:0 4px 14px rgba(255,157,0,.5); }
@keyframes ex-burst{ 0%{ transform:scale(.2); opacity:1;} 100%{ transform:scale(2.3); opacity:0;} }
@keyframes ex-card{ 0%{ transform:scale(.3) rotate(-20deg); opacity:0;} 100%{ transform:scale(1) rotate(0); opacity:1;} }
@keyframes ex-name{ 0%{ transform:translateY(10px); opacity:0;} 100%{ transform:translateY(0); opacity:1;} }
@keyframes ex-fade{ 0%,80%{ opacity:1;} 100%{ opacity:0;} }

/* 卡牌悬停提示框 */
.card-tip{
  position:fixed; z-index:400; pointer-events:none; display:none;
  width:210px; background:#fff; border:1px solid #f0e6ef; border-radius:14px;
  box-shadow:0 12px 30px rgba(74,63,85,.26); padding:11px 14px 12px;
  font-size:.78rem; color:var(--ink); line-height:1.5;
}
.card-tip.show{ display:block; }
.card-tip .tip-name{ font-weight:900; font-size:.95rem; padding-right:52px; }
.card-tip .tip-cost{ position:absolute; top:10px; right:13px; font-weight:900; font-size:.84rem; color:#e04b4b; background:#fff2f2; padding:2px 9px; border-radius:999px; }
.card-tip .tip-buffs{ display:flex; flex-direction:column; gap:2px; margin:7px 0 7px; padding:6px 0; border-top:1px dashed #eee; border-bottom:1px dashed #eee; }
.card-tip .tip-buffs span{ line-height:1.45; }
.card-tip .tip-reuse{ font-size:.7rem; color:var(--ink-soft); }

/* 牌库查看界面（近全屏） */
.deck-overlay{ position:fixed; inset:0; z-index:200; background:rgba(74,63,85,.58);
  display:none; align-items:center; justify-content:center; }
.deck-overlay.show{ display:flex; }
.deck-panel{ width:min(96vw, 920px); height:min(92vh, 780px); background:#fff; border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.32); padding:18px 20px; display:flex; flex-direction:column; overflow:hidden; }
.deck-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-shrink:0; }
.deck-title{ font-size:1.35rem; font-weight:900; color:var(--ink); letter-spacing:1px; }
.deck-close{ border:none; background:#f3ebf3; width:36px; height:36px; border-radius:10px;
  cursor:pointer; font-size:1rem; color:var(--ink-soft); transition:background .15s ease; }
.deck-close:hover{ background:#e8dce8; }
.deck-body{ overflow-y:auto; flex:1; min-height:0; }
.deck-sec{ margin-bottom:18px; }
.deck-sec:last-child{ margin-bottom:0; }
.deck-sec-title{ font-size:.82rem; font-weight:900; color:var(--ink-soft); letter-spacing:1px; margin-bottom:8px; padding-left:2px; }
.deck-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; padding:2px 2px 4px; }
.deck-empty{ grid-column:1/-1; font-size:.78rem; color:var(--ink-soft); padding:6px 2px; }
.deck-card{ position:relative; border-radius:14px; padding:12px 13px; background:#fff;
  border:2px solid transparent; box-shadow:var(--shadow-sm); }
.deck-card.type-a{ border-color:#ffd9d9; } .deck-card.type-m{ border-color:#d5f0e2; }
.deck-card .dc-name{ font-weight:900; font-size:.98rem; color:var(--ink); padding-right:44px; }
.deck-card .dc-cost{ position:absolute; top:12px; right:12px; font-weight:900; font-size:.78rem;
  color:#e04b4b; background:#fff2f2; padding:2px 9px; border-radius:999px; }
.deck-card .dc-type{ display:inline-block; font-size:.6rem; font-weight:900; color:#fff; padding:2px 7px;
  border-radius:6px; letter-spacing:.5px; margin-right:5px; vertical-align:1px; }
.deck-card.type-a .dc-type{ background:#ff5c5c; } .deck-card.type-m .dc-type{ background:#3cc06b; }
.deck-card .dc-buffs{ display:flex; flex-direction:column; gap:2px; margin:7px 0 6px; padding:6px 0;
  border-top:1px dashed #eee; border-bottom:1px dashed #eee; font-size:.76rem; line-height:1.45; }
.deck-card .dc-reuse{ font-size:.68rem; color:var(--ink-soft); }

/* 选牌置顶弹窗 */
.deck-card.pickable{ cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.deck-card.pickable:hover{ transform:translateY(-2px); }
.deck-card.pickable.selected{ border-color:#ff7eb9; box-shadow:0 0 0 3px #ffe3ef; transform:translateY(-2px); }
.pick-count{ font-size:.84rem; font-weight:900; color:var(--ink-soft); }
.pick-actions{ display:flex; justify-content:flex-end; padding-top:14px; flex-shrink:0; }
.pick-actions .btn{ min-width:140px; }

/* 对手面板 */
.rival-head{ display:flex; align-items:center; gap:12px; }
.avatar{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.7rem; box-shadow:var(--shadow-sm); flex-shrink:0; }
.avatar.you{ background:linear-gradient(145deg,#ffe3ef,#ffd7e8); }
.avatar.foe{ background:linear-gradient(145deg,#e6ecff,#d7e2ff); }
.rival-name{ font-weight:800; }
.rival-role{ font-size:.72rem; color:var(--ink-soft); }
.vs-bar{ margin-top:14px; }
.vs-bar .row{ display:flex; justify-content:space-between; font-size:.8rem; font-weight:700; margin-bottom:4px; }
.track{ height:12px; border-radius:999px; background:#f3ebf3; overflow:hidden; margin:6px 0 10px; position:relative; }
.track .fill{ position:absolute; top:0; bottom:0; left:0; border-radius:999px; transition:width .5s ease; }
.track.you .fill{ background:linear-gradient(90deg,#ff9ac7,#f45f9e); }
.track.foe .fill{ background:linear-gradient(90deg,#7cb9ff,#3d8bfd); }
.rival-hint{ font-size:.75rem; color:var(--ink-soft); text-align:center; line-height:1.5; }

.log{ margin-top:14px; max-height:170px; overflow-y:auto; border-radius:12px; background:#fbf5fb; padding:10px 12px; font-size:.8rem; line-height:1.7; }
.log div{ animation:rise .3s ease both; }

/* 按钮 */
.btn{ display:inline-block; border:none; cursor:pointer; font-weight:800; font-family:inherit;
  border-radius:999px; padding:13px 30px; font-size:.98rem; color:#fff; letter-spacing:1px;
  background:linear-gradient(135deg,#ff8fbb,#ff5c9d); box-shadow:0 8px 20px rgba(255,92,157,.35);
  transition:transform .15s ease, box-shadow .15s ease; user-select:none; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 11px 26px rgba(255,92,157,.45); }
.btn:active{ transform:translateY(0) scale(.97); }
.btn.ghost{ background:#fff; color:var(--pink-d); box-shadow:var(--shadow-sm); }

/* 开场屏 */
#screen-start{ position:relative; min-height:calc(100vh - 78px); }
#screen-start.active{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
#screen-start .hero{
  font-family:"HeroBrush","STXingkai","华文行楷","KaiTi","楷体",cursive;
  font-weight:400;
  font-size:clamp(2.8rem, 9vw, 5.2rem);
  line-height:1.15;
  letter-spacing:2px;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:#111;
  -webkit-text-fill-color:#111;
  text-shadow:0 2px 8px rgba(255,255,255,.45);
}
#screen-start .hero span{
  display:inline-block;
  clip-path:inset(-20px 100% -20px 0);
  animation:heroWrite .45s cubic-bezier(.25,.8,.3,1) forwards;
}
#screen-start .hero span:nth-child(1){ animation-delay:.25s; }
#screen-start .hero span:nth-child(2){ animation-delay:.37s; }
#screen-start .hero span:nth-child(3){ animation-delay:.49s; }
#screen-start .hero span:nth-child(4){ animation-delay:.61s; }
#screen-start .hero span:nth-child(5){ animation-delay:.73s; }
#screen-start .hero span:nth-child(6){ animation-delay:.85s; }
@keyframes heroWrite{ to{ clip-path:inset(-20px -20px -20px -20px); } }
@media (prefers-reduced-motion:reduce){
  #screen-start .hero span{ animation:none; clip-path:none; }
}
.start-inner{ max-width:640px; margin:4vh auto 0; text-align:center; }
#screen-start .start-inner{ width:100%; margin:0; }

/* 开始界面右侧：四张透明立绘依次从右侧淡入 */
.start-idols{ position:absolute; right:calc(-46px - max(0px, 50vw - 520px)); bottom:-28vh; width:min(58vw, 840px); height:80vh; z-index:0; pointer-events:none; }
.start-idols img{
  --x:0px; --y:0vh; --h:60vh; --rot:0deg; --d:0s;
  position:absolute; right:var(--x); bottom:var(--y); height:var(--h); width:auto; max-width:none;
  opacity:0; transform:translateX(220px) rotate(var(--rot));
  filter:drop-shadow(-10px 14px 22px rgba(74,63,85,.22));
  animation:startIdolIn .9s cubic-bezier(.2,.9,.3,1.15) forwards; animation-delay:var(--d);
}
@keyframes startIdolIn{ to{ opacity:1; transform:translateX(0) rotate(var(--rot)); } }
.start-idols img:nth-child(1){ --x:clamp(380px, 35vw, 500px); --y:13vh; --h:44vh; --rot:-8deg; --d:.05s; z-index:1; }
.start-idols img:nth-child(2){ --x:clamp(260px, 24vw, 340px); --y:8vh; --h:50vh; --rot:-3deg; --d:.15s; z-index:2; }
.start-idols img:nth-child(3){ --x:clamp(135px, 12vw, 175px); --y:4vh; --h:56vh; --rot:3deg; --d:.25s; z-index:3; }
.start-idols img:nth-child(4){ --x:0px; --y:-1vh; --h:60vh; --rot:7deg; --d:.35s; z-index:4; }
#screen-start .start-inner{ position:relative; z-index:2; }
@media (max-width:1179px){
  .start-idols{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .start-idols img{ animation-duration:.01s; animation-delay:0s; }
}
.hero{ font-size:2.6rem; font-weight:900; letter-spacing:2px; line-height:1.1; margin-bottom:6px;
  background:linear-gradient(135deg,#ff5c9d,#3d8bfd,#f59b1b); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ color:var(--ink-soft); font-weight:600; letter-spacing:2px; margin-bottom:20px; }
.idol-card{ display:flex; align-items:center; gap:16px; text-align:left; background:#fff; border-radius:18px;
  padding:18px; box-shadow:var(--shadow); margin:0 auto 14px; max-width:480px; }
.idol-card .big{ width:74px; height:74px; font-size:2.6rem; }
.idol-card h3{ font-size:1.1rem; }
.idol-card p{ font-size:.8rem; color:var(--ink-soft); margin-top:4px; line-height:1.5; }
.type-chip{ display:inline-block; font-size:.7rem; font-weight:800; color:#fff; background:linear-gradient(135deg,#b49bff,#7f6bf2); border-radius:999px; padding:3px 10px; margin-left:6px; }
/* 玩法说明：默认收起，点击弹出完整内容 */
.start-actions{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:22px; }
.start-actions .btn{ min-width:200px; }
.scholarship-bank{ display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:999px;
  background:rgba(255,255,255,.75); color:var(--ink); font-weight:900; font-size:.95rem;
  box-shadow:var(--shadow-sm); }
.scholarship-bank b{ color:#e0a000; font-size:1.05rem; }

.rules-dialog{ position:fixed; inset:0; margin:auto; height:fit-content; width:min(92vw, 620px); max-height:82vh;
  padding:0; border:none; border-radius:18px; background:#fff; color:var(--ink); box-shadow:0 24px 70px rgba(0,0,0,.32); }
.rules-dialog::backdrop{ background:rgba(74,63,85,.52); }
.rules-dialog-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f0e6ef; }
.rules-dialog-title{ font-size:1.1rem; font-weight:900; color:var(--pink-d); }
.rules-dialog-close{ border:none; background:#f3ebf3; width:34px; height:34px; border-radius:10px;
  cursor:pointer; font-size:1rem; color:var(--ink-soft); transition:background .15s ease; }
.rules-dialog-close:hover{ background:#e8dce8; }
.rules-dialog-body{ padding:16px 22px 22px; font-size:.85rem; line-height:1.85; overflow-y:auto; max-height:calc(82vh - 78px); }
.rules-dialog-body .tag{ display:inline-block; font-size:.62rem; font-weight:900; color:#fff; padding:1px 6px; border-radius:5px; }
.rules-dialog-body .tag.a{ background:#ff5c5c; } .rules-dialog-body .tag.m{ background:#3cc06b; }

/* 选角屏 */
#screen-select .start-inner{ max-width:1040px; }
.idol-carousel{ display:flex; align-items:center; gap:12px; margin:22px 0; }
.page-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:58px; height:58px; border-radius:16px; border:none; cursor:pointer; font-size:1.5rem; line-height:1;
  color:var(--pink-d); background:#fff; box-shadow:var(--shadow-sm); font-family:inherit; flex-shrink:0;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.page-btn span{ font-size:.56rem; font-weight:800; letter-spacing:1px; }
.page-btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--shadow); }
.page-btn:active:not(:disabled){ transform:scale(.94); }
.page-btn:disabled{ opacity:.35; cursor:default; }
.idol-grid{ flex:1; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.idol-pick{ background:#fff; border-radius:18px; padding:16px 10px; box-shadow:var(--shadow);
  cursor:pointer; text-align:center; border:3px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.idol-pick:hover{ transform:translateY(-4px); }
.idol-pick:active{ transform:translateY(-1px) scale(.98); }

/* 角色卡稀有度：徽章 + 描边 */
.idol-pick{ position:relative; }
.idol-pick .rarity-badge{ position:absolute; top:9px; left:9px; z-index:2;
  font-size:.58rem; font-weight:900; letter-spacing:.6px; line-height:1;
  color:#fff; padding:3px 7px; border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.18); }
.idol-pick[data-rarity="R"]{ border-color:#9fb3c8; }
.idol-pick[data-rarity="R"] .rarity-badge{ background:linear-gradient(135deg,#a9bccf,#6f8199); }
.idol-pick[data-rarity="SR"]{ border-color:#a06bff; box-shadow:0 0 0 1px rgba(160,107,255,.22), var(--shadow); }
.idol-pick[data-rarity="SR"] .rarity-badge{ background:linear-gradient(135deg,#b98bff,#8a3ffc); }
.idol-pick[data-rarity="SSR"]{
  border-color:transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(120deg,#ffd75e,#ff9d00,#fff3b0,#ff8a00,#ffd75e) border-box;
  background-size:100% 100%, 300% 300%;
  animation:ssr-border 3.2s linear infinite;
  box-shadow:0 0 0 1px rgba(255,179,0,.35), 0 0 22px rgba(255,179,0,.45), var(--shadow);
}
@keyframes ssr-border{
  from{ background-position:0 0, 0% 50%; }
  to{ background-position:0 0, 300% 50%; }
}
.idol-pick[data-rarity="SSR"] .rarity-badge{ background:linear-gradient(135deg,#ffd75e,#ff9d00); color:#5a3300; }

/* SSR 锁定态 */
.idol-pick.locked{ cursor:not-allowed; }
.idol-pick.locked:hover{ transform:none; }
.idol-pick.locked .pick-avatar{ filter:grayscale(.65) brightness(.82); }
.idol-pick .idol-lock{ position:absolute; inset:0; z-index:3; border-radius:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:linear-gradient(180deg, rgba(30,20,40,.12), rgba(30,20,40,.74));
  color:#fff; text-align:center; padding:10px; }
.idol-pick .idol-lock span{ font-size:1.5rem; line-height:1; }
.idol-pick .idol-lock b{ font-size:.82rem; }
.idol-pick .idol-lock small{ font-size:.6rem; opacity:.88; line-height:1.35; }
.lock-toast{ position:fixed; left:50%; bottom:90px; transform:translateX(-50%); z-index:9999;
  max-width:86vw; background:rgba(35,25,50,.94); color:#fff; padding:10px 16px; border-radius:12px;
  font-size:.8rem; line-height:1.4; box-shadow:0 8px 24px rgba(0,0,0,.3);
  animation:toast-in .2s ease; }
@keyframes toast-in{ from{ opacity:0; transform:translate(-50%,10px);} to{ opacity:1; transform:translate(-50%,0);} }

.idol-pick .pick-avatar{ width:64px; height:64px; border-radius:50%; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center; font-size:2.2rem; box-shadow:var(--shadow-sm); overflow:hidden; }
.idol-pick .pick-avatar img{ width:100%; height:100%; object-fit:cover; }
.idol-pick h3{ font-size:.95rem; }
.idol-pick .pick-sub{ font-size:.66rem; color:var(--ink-soft); letter-spacing:1px; margin-top:2px; }
.idol-pick .pick-color{ display:inline-block; margin-top:8px; font-size:.66rem; font-weight:800; color:#fff; border-radius:999px; padding:3px 10px; }
.idol-pick p{ font-size:.7rem; color:var(--ink-soft); margin-top:8px; line-height:1.5; }
.idol-pick .pick-motto{ margin-top:6px; font-size:.68rem; color:var(--ink-soft); font-style:italic; line-height:1.5; }
.idol-pick .pick-perk{ margin-top:8px; font-size:.68rem; font-weight:800; color:var(--pink-d); }

/* 结算屏 */
.result-inner{ max-width:600px; margin:4vh auto 0; text-align:center; }
.grade{ font-size:5rem; font-weight:900; line-height:1; animation:pop .6s cubic-bezier(.2,.9,.3,1.4); }
.grade.s{ background:linear-gradient(135deg,#ffd700,#ff8a3d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grade.a{ color:#f59b1b; } .grade.b{ color:#3d8bfd; } .grade.c{ color:#9aa0a8; }
.result-verdict{ font-size:1.4rem; font-weight:800; margin:8px 0 4px; }
.result-sub{ color:var(--ink-soft); margin-bottom:18px; }
.breakdown{ background:#fff; border-radius:18px; padding:16px 20px; box-shadow:var(--shadow); text-align:left; font-size:.9rem; margin-bottom:20px; }
.breakdown .line{ display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed #f0e6ef; }
.breakdown .line:last-child{ border-bottom:none; }
.breakdown .total{ font-size:1.1rem; font-weight:900; color:var(--pink-d); }
.breakdown .rival{ color:var(--blue-d); }
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:50; }
.confetti span{ position:absolute; width:10px; height:14px; top:-5%; border-radius:2px; animation:cf linear forwards; }
@keyframes cf{ 0%{ transform:translateY(-5vh) rotate(0);} 100%{ transform:translateY(108vh) rotate(720deg);} }

/* ===== 比赛界面布局 ===== */
#screen-game{ position:fixed; inset:0; z-index:2; }

/* 左上：颜色轮盘（12 等分圆环） */
.ring-box{ position:absolute; top:14px; left:14px; z-index:6; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ring{ position:relative; width:120px; height:120px; border-radius:50%;
  background:repeating-conic-gradient(#ff5c5c 0deg 30deg, #3d8bfd 30deg 60deg, #f5b62d 60deg 90deg);
  box-shadow:0 6px 18px rgba(0,0,0,.18); }
.ring::after{ content:''; position:absolute; inset:17px; background:#fff; border-radius:50%;
  box-shadow:inset 0 1px 5px rgba(0,0,0,.08); z-index:1; }
.ring-center{ position:absolute; inset:17px; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-center .n{ font-size:1.8rem; font-weight:900; line-height:1; color:var(--ink); }
.ring-center .t{ font-size:.58rem; font-weight:700; color:var(--ink-soft); }
.ring-needle{ position:absolute; left:50%; bottom:50%; width:5px; height:48px; margin-left:-2.5px;
  background:#4a3f55; border-radius:3px; transform-origin:50% 100%; z-index:3;
  transition:transform .6s cubic-bezier(.3,.9,.4,1.2); }
.ring-note{ font-weight:800; font-size:.74rem; color:#fff; border-radius:999px; padding:4px 12px; box-shadow:var(--shadow-sm); transition:background .4s; }

/* 左上：轮盘旁 · 加成与提示文字 */
.hud-note{ position:absolute; top:18px; left:152px; z-index:6; display:flex; flex-direction:column; gap:6px; max-width:220px; }
.hud-note .mult-note{ margin:0; text-align:left; }
.hud-note .rival-hint{ text-align:left; }

/* 顶部中央：比分 */
.score-box{ position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:min(520px, calc(100vw - 180px)); z-index:5; display:flex; flex-direction:column; gap:7px; }
.score-line{ display:flex; align-items:center; gap:10px; }
.score-line .who{ width:auto; min-width:48px; font-weight:900; font-size:.88rem; flex-shrink:0; text-align:center; }
.score-line .who.you{ color:var(--pink-d); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.score-line .who.foe{ color:var(--blue-d); }
.who-avatar{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; overflow:hidden; background:linear-gradient(145deg,#ffe3ef,#ffd7e8); box-shadow:var(--shadow-sm); flex-shrink:0; }
.who-avatar img{ width:100%; height:100%; object-fit:cover; }
.who-name{ font-size:.62rem; line-height:1; max-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.score-track{ flex:1; height:20px; border-radius:999px; background:#fff; overflow:hidden; box-shadow:inset 0 1px 4px rgba(0,0,0,.1), var(--shadow-sm); }
.score-track .fill{ height:100%; width:0; border-radius:999px; transition:width .5s ease; }
.score-track .fill.you{ background:linear-gradient(90deg,#ff9ac7,#f45f9e); }
.score-track .fill.foe{ background:linear-gradient(90deg,#7cb9ff,#3d8bfd); }
.score-num{ min-width:66px; text-align:right; font-weight:900; font-size:1.1rem; font-variant-numeric:tabular-nums; flex-shrink:0; }

/* 左侧中央：buff（缩小） */
.side-buffs{ position:absolute; left:12px; top:50%; transform:translateY(-50%); z-index:6; display:flex; flex-direction:column; gap:10px; }
.buff-chip{ width:58px; padding:10px 4px; border-radius:14px; text-align:center; color:#fff; box-shadow:var(--shadow-sm); }
.buff-chip .ic{ font-size:1.05rem; display:block; line-height:1; }
.buff-chip b{ font-size:.6rem; font-weight:800; display:block; margin-top:3px; }
.buff-chip .vl{ font-size:1.15rem; font-weight:900; display:block; margin-top:1px; }
.buff-chip.focus{ background:linear-gradient(160deg,#b49bff,#7f6bf2); }
.buff-chip.tune{ background:linear-gradient(160deg,#ff9a6a,#ff6a3d); }
.buff-chip.great{ background:linear-gradient(160deg,#ffd76a,#ffb300); }
.buff-chip.great .vl{ font-size:.85rem; }

/* 中部：状态 + 日志 */
.mid-area{ position:absolute; left:88px; right:18px; top:152px; bottom:262px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.mid-area .log{ flex:1; max-height:none; margin-top:0; }

/* 右上：体力 / 元气（缩短为屏宽 1/10） */
#screen-game .bars{ position:absolute; top:14px; right:14px; z-index:7; width:10vw; min-width:118px; gap:5px; margin:0; }
#screen-game .bar-row{ gap:6px; font-size:.72rem; }
#screen-game .bar-label{ width:auto; }
#screen-game .bar{ height:12px; }
#screen-game .bar-val{ width:auto; min-width:32px; }

/* 底部：卡牌（加大） */
.hand-bottom{ position:absolute; left:0; right:0; bottom:0; padding:10px 16px 16px; z-index:6;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.9)); }
.hand-bottom .hand-title{ text-align:center; margin:0 0 12px; font-size:1.05rem; }
.hand-cards-wrap{ position:relative; max-width:1120px; margin:0 auto; }
.hand-bottom .cards{ gap:14px; }
.hand-bottom .card{ padding:12px 18px; min-height:112px; }
.hand-bottom .card .cname{ font-size:1.25rem; }
.hand-bottom .card .cdesc{ font-size:.88rem; }
.hand-bottom .card .ccost{ font-size:.84rem; padding:5px 12px; top:14px; right:14px; }
.hand-bottom .card .tag{ font-size:.7rem; }

/* 休息按钮（右上角，绿色方块 + 爱心） */
.rest-btn{ position:absolute; right:0; top:-56px; width:54px; height:54px; border-radius:14px;
  border:none; cursor:pointer; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#5fd98c,#2fb469); box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease; }
.rest-btn .ic{ font-size:1.5rem; line-height:1; }
.rest-btn .lb{ font-size:.58rem; font-weight:800; margin-top:2px; letter-spacing:1px; }
.rest-btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.rest-btn:active{ transform:scale(.94); }

/* 牌库按钮（休息按钮上方的小方块） */
.deck-btn{ position:absolute; right:0; top:-102px; width:38px; height:38px; border-radius:11px;
  border:none; cursor:pointer; font-size:1.25rem; line-height:1; color:var(--ink);
  background:#fff; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease; }
.deck-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.deck-btn:active{ transform:scale(.92); }

/* 卡牌入库动画 */
.stock-overlay{ position:fixed; inset:0; z-index:100; background:rgba(74,63,85,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  animation:stockfade .3s ease; }
@keyframes stockfade{ from{opacity:0;} to{opacity:1;} }
.stock-overlay.hide{ opacity:0; transition:opacity .3s ease; }
.stock-overlay .card{ position:fixed; margin:0; cursor:default; }
.stock-deck{ font-size:4.4rem; line-height:1; filter:drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.stock-label{ color:#fff; font-weight:800; letter-spacing:1px; background:rgba(0,0,0,.28); padding:8px 18px; border-radius:999px; }

@media (max-width:640px){
  /* ===== 游戏主屏 · 移动端重排 ===== */
  #screen-game{ overflow:hidden; }
  .ring{ width:72px; height:72px; }
  .ring::after{ inset:10px; }
  .ring-center{ inset:10px; }
  .ring-center .n{ font-size:1.1rem; }
  .ring-needle{ height:26px; }
  .ring-box{ top:10px; left:10px; }
  .ring-note{ font-size:.62rem; padding:3px 8px; }

  .score-box{ top:92px; left:10px; right:10px; width:auto; transform:none; gap:6px; }
  .score-line .who{ min-width:36px; font-size:.76rem; }
  .who-avatar{ width:32px; height:32px; font-size:1.05rem; }
  .who-name{ font-size:.56rem; max-width:42px; }
  .score-track{ height:16px; }
  .score-num{ min-width:50px; font-size:.9rem; }

  #screen-game .bars{ top:10px; right:10px; width:132px; min-width:0; gap:5px; }
  #screen-game .bar-row{ gap:4px; font-size:.62rem; }
  #screen-game .bar{ height:10px; }
  #screen-game .bar-val{ min-width:24px; }

  .hud-note{ top:170px; left:10px; right:10px; max-width:none; gap:4px; }
  .hud-note .mult-note{ font-size:.72rem; }
  .hud-note .rival-hint{ font-size:.68rem; }

  .side-buffs{ left:6px; gap:7px; }
  .buff-chip{ width:46px; padding:8px 2px; border-radius:12px; }
  .buff-chip .ic{ font-size:.95rem; }
  .buff-chip .vl{ font-size:.95rem; }

  .mid-area{ left:60px; right:8px; top:212px; bottom:250px; }

  .hand-bottom{ padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .hand-bottom .hand-title{ margin:0 0 8px; font-size:.92rem; }
  .hand-bottom .cards{
    display:flex; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
    gap:10px; padding:2px 4px 6px;
  }
  .hand-bottom .card{
    flex:0 0 auto; width:min(60vw, 236px); min-height:112px;
    padding:12px 14px; scroll-snap-align:center;
  }
  .hand-bottom .card .cname{ font-size:1.05rem; }
  .hand-bottom .card .cdesc{ font-size:.78rem; }
  .hand-bottom .card .ccost{ font-size:.72rem; padding:4px 10px; top:12px; right:12px; }
  .hand-bottom .card .tag{ font-size:.66rem; }
  .rest-btn{ width:48px; height:48px; }
  .deck-btn{ width:34px; height:34px; }

  /* ===== 选角屏 · 单列横向卡片 ===== */
  .idol-carousel{ gap:8px; margin:16px 0; }
  .page-btn{ width:44px; height:44px; font-size:1.2rem; }
  .page-btn span{ font-size:.5rem; }
  .idol-grid{ grid-template-columns:1fr; gap:10px; }
  .idol-pick{
    display:grid;
    grid-template-columns:60px 1fr;
    grid-template-areas:"avatar name" "avatar sub" "avatar color" "avatar desc" "avatar motto" "avatar perk";
    column-gap:14px; row-gap:2px;
    align-items:center; text-align:left; padding:14px;
  }
  .idol-pick .pick-avatar{ grid-area:avatar; width:56px; height:56px; margin:0; font-size:1.8rem; align-self:start; }
  .idol-pick h3{ grid-area:name; font-size:.92rem; }
  .idol-pick .pick-sub{ grid-area:sub; font-size:.62rem; }
  .idol-pick .pick-color{ grid-area:color; justify-self:start; font-size:.62rem; margin-top:4px; }
  .idol-pick p{ grid-area:desc; font-size:.68rem; margin-top:4px; }
  .idol-pick .pick-motto{ grid-area:motto; font-size:.66rem; margin-top:4px; }
  .idol-pick .pick-perk{ grid-area:perk; font-size:.64rem; margin-top:4px; }

  /* ===== 牌库弹窗 · 全屏 ===== */
  .deck-panel{ width:100%; height:100%; max-height:none; border-radius:0; padding:14px 16px; }
  .deck-title{ font-size:1.15rem; }
  .deck-grid{ grid-template-columns:1fr; gap:10px; }
}

/* 触屏设备：禁用卡牌悬停位移（避免 sticky hover） */
@media (hover:none){
  .card:hover{ transform:none; box-shadow:var(--shadow-sm); }
  .idol-pick:hover{ transform:none; }
}

/* ===== 背景音乐控制 ===== */
.bgm-dock{ position:fixed; left:14px; bottom:14px; z-index:150;
  display:flex; align-items:center; gap:8px; padding:6px 10px 6px 6px;
  background:rgba(255,255,255,.82); border-radius:999px; box-shadow:var(--shadow);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:bottom .3s ease, box-shadow .2s ease; }
.bgm-dock:hover{ box-shadow:0 10px 26px rgba(180,140,160,.3); }
.bgm-toggle{ width:38px; height:38px; flex-shrink:0; padding:0; border:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  background:linear-gradient(135deg,#ff8fbb,#ff5c9d); box-shadow:0 4px 12px rgba(255,92,157,.4);
  transition:transform .15s ease, filter .2s ease; }
.bgm-toggle:hover{ transform:scale(1.07); }
.bgm-toggle:active{ transform:scale(.94); }
.bgm-toggle.muted{ background:linear-gradient(135deg,#c7bfd2,#9d93ad); box-shadow:none; filter:saturate(.5); }
.bgm-dock.playing .bgm-toggle{ animation:bgmPulse 2.4s ease-out infinite; }
@keyframes bgmPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,92,157,.45); }
  70%{ box-shadow:0 0 0 10px rgba(255,92,157,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,92,157,0); }
}
.bgm-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; max-width:170px; }
.bgm-label{ font-size:.54rem; font-weight:900; letter-spacing:2px; color:var(--pink-d); line-height:1; }
.bgm-name{ font-size:.68rem; font-weight:700; color:var(--ink); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bgm-next{ width:28px; height:28px; flex-shrink:0; padding:0; border:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; color:var(--ink-soft);
  background:#fff; box-shadow:var(--shadow-sm); transition:transform .15s ease, color .15s ease; }
.bgm-next:hover{ transform:scale(1.1); color:var(--pink-d); }
.bgm-next:active{ transform:scale(.92); }
/* 游戏界面：让出底部手牌区 */
body[data-screen="screen-game"] .bgm-dock{ bottom:190px; }
@media (max-width:640px){
  .bgm-dock{ padding:5px; gap:6px; }
  .bgm-meta{ display:none; }
  body[data-screen="screen-game"] .bgm-dock{ left:8px; bottom:176px; }
}
@media (prefers-reduced-motion:reduce){
  .bgm-dock.playing .bgm-toggle{ animation:none; }
}