/* =====================================================================
   大封印戦（0.12.0）：冒険の受付の札・部屋の帯と小さな札・タイトル画面・小窓・封印成功の発表
   色：くちやみの魔王の、暗い赤（--sl）と、やみの紫。くさびと お祝いは金（--brass）。
       文字は、いつもの文字の色（--text・--muted）。きずなゲージ・総攻撃は、あたたかい金と桃
   ===================================================================== */
.sl-card {
  --sl: #ff7d8e; --sl-deep: #a5112f; --sl-line: rgba(255, 93, 112, .55); --sl-bond: #ffd27a;
  position: relative; display: grid; gap: 12px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--sl-line);
  background: radial-gradient(130% 78% at 50% 0%, rgba(160, 18, 52, .36), transparent 62%), linear-gradient(180deg, #1d0f1d, #130a16); margin-bottom: 12px; min-width: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 6px 22px rgba(60, 0, 20, .35);
}
.sl-card.done.win { --sl-line: rgba(255, 214, 120, .75); border-color: var(--sl-line); background: radial-gradient(130% 80% at 50% 0%, rgba(255, 200, 90, .22), transparent 62%), var(--panel); box-shadow: none; }
.sl-card.done.gone { border-color: var(--line-2); background: radial-gradient(130% 80% at 50% 0%, rgba(70, 20, 60, .3), transparent 62%), #15101a; box-shadow: none; }
.sl-title { scroll-margin-top: 72px; }
.sl-head { display: grid; gap: 4px; min-width: 0; }
.sl-kicker { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--fs-min); font-weight: 700; letter-spacing: .12em; color: var(--sl); }
.sl-card.win .sl-kicker { color: #ffd678; }
.sl-card.gone .sl-kicker { color: var(--muted); }
.sl-left { font-weight: 400; letter-spacing: 0; color: var(--muted); }
.sl-name { margin: 0; font-family: var(--font-dot); font-weight: 400; font-size: calc(21px * var(--fs-k, 1)); line-height: 1.3; overflow-wrap: anywhere; }
.sl-card.live .sl-name, .sl-card.soon .sl-name { text-shadow: 0 0 12px rgba(255, 40, 80, .55); }
.sl-desc, .sl-when { margin: 0; font-size: var(--fs-min); color: var(--muted); line-height: 1.6; }
.sl-when b { color: var(--text); font-weight: 700; }
.sl-party { margin: 2px 0 0; font-size: var(--fs-min); color: #ffe3a0; }

/* ---- ラウンドの印と、このラウンドの体力（3つの部位の合計） */
.sl-gauge { display: grid; gap: 6px; min-width: 0; }
.sl-gauge-t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: var(--fs-min); color: var(--text); }
.sl-gauge-t > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sl-gauge-n b { font-size: calc(18px * var(--fs-k, 1)); }
.sl-wedges { display: inline-flex; gap: 5px; align-items: center; }
.sl-wedges i { display: block; width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; border: 1.5px solid var(--line-2); background: rgba(0, 0, 0, .3); }
.sl-wedges i.on { border-color: var(--brass-hi); background: var(--brass); }
.sl-wedges i.now { border-color: var(--sl, #ff7d8e); box-shadow: 0 0 6px rgba(255, 60, 90, .7); }
.sl-bar { display: block; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, .55); overflow: hidden; border: 1px solid var(--line-2); }
.sl-bar > i { display: block; height: 100%; border-radius: 7px 0 0 7px; background: linear-gradient(180deg, #ff8c99, #d6264a 55%, #a5112f); transition: width .4s ease-out; }
.sl-bar.low > i { background: linear-gradient(180deg, #ffd08a, #ff8a3c 55%, #d6482a); }
@media (prefers-reduced-motion: reduce) { .sl-bar > i { transition: none; } }
.sl-crew { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: var(--fs-min); color: var(--muted); }
.sl-crew b { color: var(--text); }

/* ---- 絵と、部位の名前（うしろで、赤い光が どくどくと脈を打つ） */
.sl-art { position: relative; justify-self: center; width: min(100%, var(--art, 208px)); aspect-ratio: 1; line-height: 0; border-radius: 14px; background: radial-gradient(closest-side, rgba(120, 10, 44, .5), rgba(14, 4, 14, .7) 72%, transparent); }
.sl-art::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 50, 90, .34), transparent 70%); animation: slPulse 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes slPulse { 0%, 100% { opacity: .35; transform: scale(.92); } 12% { opacity: 1; transform: scale(1.04); } 24% { opacity: .5; transform: scale(.96); } 36% { opacity: .9; transform: scale(1.02); } 60% { opacity: .4; transform: scale(.94); } }
.sl-art.small { width: 112px; opacity: .92; }
.sl-art.small.shade img { filter: brightness(.22) contrast(1.3) saturate(1.6); } /* 予告：すがたは、まだ やみの中 */
.sl-art.small.sealed::before { display: none; }
.sl-art.small.sealed img { filter: grayscale(.75) brightness(.72); } /* 封印された */
.sl-card.gone .sl-art.small { opacity: .5; filter: grayscale(.4); }
.sl-card.gone .sl-art::before, .sl-card.win .sl-art::before { animation: none; opacity: .25; }
.sl-pic { position: relative; display: block; width: 100%; height: 100%; }
.sl-pic img, .sl-art.small img { position: relative; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.sl-spot { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px; padding: 2px 6px 3px; border-radius: 8px; background: rgba(20, 4, 12, .86); border: 1px solid var(--sl-line); line-height: 1.2; pointer-events: none; white-space: nowrap; }
.sl-spot b { font-size: var(--fs-min); color: #fff; font-weight: 700; }
.sl-spot small { font-size: 12px; color: var(--sl); }
.sl-spot.me { border-color: var(--brass-hi); box-shadow: 0 0 0 2px rgba(227, 179, 65, .35); }
@media (prefers-reduced-motion: reduce) { .sl-art::before { animation: none; opacity: .6; } }

/* ---- 自分の相手の強さ・こうけん度・向かう前の注意 */
.sl-me { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); min-width: 0; }
.sl-place { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-min); color: var(--muted); }
.sl-place b { font-family: var(--font-dot); font-weight: 400; font-size: calc(17px * var(--fs-k, 1)); color: var(--text); }
.sl-mine { margin: 0; font-size: var(--fs-min); color: var(--text); }
.sl-mine b { font-size: calc(18px * var(--fs-k, 1)); color: var(--brass-hi); }
.sl-mine small { color: var(--muted); margin-left: 4px; }
.sl-mine.none { color: var(--muted); }
.sl-act { display: grid; gap: 4px; }
.sl-go { width: 100%; min-height: 48px; }
.sl-hint { font-size: var(--fs-min); color: var(--muted); line-height: 1.5; }
.sl-hint.warn { color: #ffd0a0; }

/* ---- 部位（体力のバーと数・こわしたときの効果・向かうボタン）と、きずなゲージ、大技の注意 */
.sl-partbox { display: grid; gap: 8px; min-width: 0; }
.sl-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sl-part { display: grid; gap: 6px; align-content: start; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 120, 140, .22); min-width: 0; }
.sl-part.rec { border-color: rgba(227, 179, 65, .7); }
.sl-part.broken { border-style: dashed; border-color: var(--line-2); background: rgba(0, 0, 0, .16); }
.sl-part-h { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-min); color: var(--muted); }
.sl-part-h b { font-family: var(--font-dot); font-weight: 400; font-size: calc(19px * var(--fs-k, 1)); color: var(--text); }
.sl-part.broken .sl-part-h b { color: var(--muted); text-decoration: line-through; }
.sl-rec { padding: 0 7px; border-radius: 999px; background: rgba(227, 179, 65, .18); border: 1px solid rgba(227, 179, 65, .7); color: var(--brass-hi); font-weight: 700; white-space: nowrap; }
.sl-pn { margin-left: auto; color: var(--text); white-space: nowrap; }
.sl-pbar { height: 12px; }
.sl-part-n { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; font-size: var(--fs-min); color: var(--muted); }
.sl-part-n b { font-size: calc(17px * var(--fs-k, 1)); color: var(--text); }
.sl-part-x { margin: 0; display: grid; gap: 1px; font-size: var(--fs-min); color: var(--muted); line-height: 1.5; }
.sl-part-x b { color: var(--brass-hi); font-weight: 700; letter-spacing: .06em; }
.sl-pgo { width: 100%; min-height: 44px; }
.sl-bond { display: grid; gap: 5px; padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(255, 210, 122, .5); background: linear-gradient(180deg, rgba(255, 190, 90, .12), rgba(255, 120, 150, .06)); min-width: 0; }
.sl-bond-t { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-min); color: var(--text); }
.sl-bond-t b { color: var(--sl-bond); font-weight: 700; letter-spacing: .06em; }
.sl-bond-t .num { font-weight: 700; color: var(--text); }
.sl-bbar { height: 12px; border-color: rgba(255, 210, 122, .45); }
.sl-bbar > i { background: linear-gradient(180deg, #fff0b4, #ffc24a 55%, #ff8a5a); }
.sl-bond-n { margin: 0; font-size: var(--fs-min); line-height: 1.55; color: var(--muted); }
.sl-bond-n b { color: var(--text); font-weight: 700; }
.sl-bond-n small { color: var(--sl-bond); white-space: nowrap; }
.sl-bond.rush { border-color: #ffd678; background: linear-gradient(180deg, rgba(255, 214, 120, .26), rgba(255, 120, 90, .14)); animation: slRush 1.1s ease-in-out infinite alternate; }
.sl-bond.rush .sl-bond-n { color: var(--text); }
@keyframes slRush { from { box-shadow: 0 0 0 0 rgba(255, 214, 120, .0); } to { box-shadow: 0 0 16px 2px rgba(255, 200, 90, .5); } }
.sl-roar { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: baseline; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 93, 112, .6); background: rgba(200, 20, 60, .14); font-size: var(--fs-min); line-height: 1.55; color: var(--text); }
.sl-roar b { color: var(--sl); font-weight: 700; white-space: nowrap; }
.sl-roar.off { border-color: var(--line-2); background: rgba(0, 0, 0, .16); color: var(--muted); }
.sl-roar.off b { color: var(--brass-hi); }
.sl-gauge-n small { color: var(--muted); }
.sl-spot.broken { opacity: .65; border-style: dashed; }
.sl-spot.broken b { text-decoration: line-through; }
@media (max-width: 419px) { .sl-roar { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sl-bond.rush { animation: none; box-shadow: 0 0 12px 1px rgba(255, 200, 90, .45); } }

/* ---- こうけん度・支援の回数 */
.sl-rank { display: grid; gap: 6px; min-width: 0; }
.sl-rank h4, .sl-mvp h4 { margin: 0; font-size: var(--fs-min); color: var(--muted); font-weight: 700; letter-spacing: .08em; }
.sl-rank h4 small { font-weight: 400; letter-spacing: 0; }
.sl-rank h4.sl-aid-h { margin-top: 4px; }
.sl-rank > .btn { justify-self: start; }
.sl-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sl-top li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: baseline; gap: 6px; padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, .26); font-size: var(--fs-min); }
.sl-top.big li { grid-template-columns: 2.6em minmax(0, 1fr) auto auto; }
.sl-top li.me { outline: 1.5px solid rgba(227, 179, 65, .7); }
.sl-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-top small { color: var(--muted); white-space: nowrap; }
.sl-pl { color: var(--muted); text-align: right; }
.sl-top li:nth-child(1) .sl-pl { color: var(--brass-hi); font-weight: 700; }
.sl-top.mine li:nth-child(1) .sl-pl { color: var(--muted); font-weight: 400; }
.sl-pc { color: var(--text); font-weight: 700; }
.sl-rank-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sl-el { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-min); color: var(--muted); }

/* ---- 祝勝会と、活やくした人（結果の札・封印成功の発表） */
.sl-fest { grid-column: 1 / -1; display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(255, 214, 120, .8); background: linear-gradient(135deg, rgba(255, 214, 120, .2), rgba(255, 134, 179, .12) 60%, rgba(143, 227, 255, .1)); }
.sl-fest-t { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; font-size: var(--fs-min); color: var(--muted); }
.sl-fest-t b { font-family: var(--font-dot); font-weight: 400; font-size: calc(19px * var(--fs-k, 1)); color: #ffe08a; }
.sl-fest-l { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-min); }
.sl-fest-l li { padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 214, 120, .45); color: var(--text); }
.sl-mvp { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; }
.sl-mvp > .btn { justify-self: start; }
.sl-mvp-g { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.sl-mvp-g section { display: grid; gap: 4px; align-content: start; min-width: 0; }
.sl-mvp-last { margin: 0; font-size: var(--fs-min); color: var(--muted); }
.sl-mvp-last b { font-weight: 700; }

/* ---- 予告の説明・あそびかた */
.sl-points { margin: 0; padding: 0 0 0 1.2em; display: grid; gap: 6px; font-size: var(--fs-min); line-height: 1.6; color: var(--text); }
.sl-points b { color: var(--brass-hi); font-weight: 700; }
.sl-card.soon { grid-template-columns: minmax(0, 1fr) auto; }
.sl-card.soon .sl-points { grid-column: 1 / -1; }
.sl-card.done { grid-template-columns: minmax(0, 1fr) auto; }
.sl-card.done .sl-rank { grid-column: 1 / -1; }
.sl-card.compact { margin-bottom: 12px; }
@media (max-width: 419px) { .sl-card.soon .sl-art.small, .sl-card.done .sl-art.small { width: 72px; } }

/* 広い画面：絵を右に。部位は、横に3つ */
@media (min-width: 760px) {
  .sl-card.live:not(.compact) { grid-template-columns: minmax(0, 1fr) 232px; grid-template-areas: "head art" "gauge art" "parts parts" "me me" "rank rank"; align-items: start; }
  .sl-card.live:not(.compact) .sl-head { grid-area: head; }
  .sl-card.live:not(.compact) .sl-gauge { grid-area: gauge; }
  .sl-card.live:not(.compact) .sl-art { grid-area: art; align-self: center; }
  .sl-card.live:not(.compact) .sl-partbox { grid-area: parts; }
  .sl-card.live:not(.compact) .sl-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-card.live:not(.compact) .sl-me { grid-area: me; }
  .sl-card.live:not(.compact) .sl-rank { grid-area: rank; }
}

/* ---- 部屋：いちばん上の帯（お知らせの帯と同じ形で、色だけちがう）・景色の下の小さな札・ボタン */
.rm-ann.rm-seal { border-color: rgba(255, 93, 112, .75); background: linear-gradient(90deg, rgba(150, 16, 50, .5), rgba(60, 8, 30, .3)); }
.rm-ann.rm-seal .rm-ann-go b { color: #ff9aa8; }
.rm-ann.rm-seal .rm-ann-x { border-left-color: rgba(255, 93, 112, .35); }
.rm-ann.rm-seal.party { border-color: rgba(255, 214, 120, .85); background: linear-gradient(90deg, rgba(255, 200, 90, .3), rgba(255, 134, 179, .14)); }
.rm-ann.rm-seal.party .rm-ann-go b { color: #ffe08a; }
.rm-ann.rm-seal.party .rm-ann-x { border-left-color: rgba(255, 214, 120, .4); }
.rm-giant.rm-sealchip { border-color: #ff5d70; background: rgba(70, 6, 24, .82); color: #ffe1e5; }
.rm-giant.rm-sealchip.rush { border-color: #ffd678; background: rgba(110, 60, 6, .85); color: #fff3cc; }
.rm-cmds .rm-cmd.k-giant.k-seal { border-color: #ff5d70; background: linear-gradient(180deg, rgba(170, 20, 56, .42), rgba(60, 6, 24, .3)); }
.rm-cmds .rm-cmd.k-giant.k-seal b { color: #ffe1e5; }

/* ---- 部屋の景色のかざり：開催中は、町の空が暗く、赤くなる（魔王が目をさましている）。祝勝会は、外の景色に花火・店や家の中に紙ふぶき */
.rm-sealfx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rm-sealfx.live { background: linear-gradient(180deg, rgba(60, 0, 26, .78), rgba(70, 10, 40, .46) 55%, rgba(28, 0, 18, .6)); mix-blend-mode: multiply; }
.rm-sealfx.live::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 0%, rgba(255, 40, 80, .5), transparent 70%); animation: slSky 5s ease-in-out infinite; }
.rm-scene:not([data-out]) .rm-sealfx.live { opacity: .55; }
@keyframes slSky { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* 花火：小さな四角の粒を、二重の輪にならべて、ひらく。昼の明るい空でも見えるように、こい色と、うすい ふち */
.rm-sealfx.party i { position: absolute; width: 3px; height: 3px; color: #ffb81f; opacity: 0; filter: drop-shadow(0 0 1px rgba(40, 8, 50, .75));
  box-shadow: 0 -20px, 10px -17px, 17px -10px, 20px 0, 17px 10px, 10px 17px, 0 20px, -10px 17px, -17px 10px, -20px 0, -17px -10px, -10px -17px,
    0 -11px, 8px -8px, 11px 0, 8px 8px, 0 11px, -8px 8px, -11px 0, -8px -8px;
  animation: slFw 2.6s ease-out infinite; }
.rm-sealfx.party i:nth-child(1) { left: 14%; top: 28%; }
.rm-sealfx.party i:nth-child(2) { left: 34%; top: 15%; color: #ff4f93; animation-delay: .7s; }
.rm-sealfx.party i:nth-child(3) { left: 55%; top: 30%; color: #37c8ff; animation-delay: 1.3s; }
.rm-sealfx.party i:nth-child(4) { left: 74%; top: 16%; color: #7be05a; animation-delay: .35s; }
.rm-sealfx.party i:nth-child(5) { left: 90%; top: 32%; color: #c58bff; animation-delay: 1.8s; }
/* 店や家の中は、花火のかわりに、紙ふぶきが ゆっくり まう（小さな四角の粒のかたまりを、上から下へ） */
.rm-scene:not([data-out]) .rm-sealfx.party i { top: -70%; width: 4px; height: 4px; opacity: .95; color: #ffb81f;
  box-shadow: 26px 18px #ff4f93, -22px 40px #37c8ff, 40px 64px #7be05a, -36px 86px #ffffff, 14px 108px #ffb81f, -10px 132px #ff4f93, 46px 150px #37c8ff, -44px 166px #c58bff, 20px 186px #7be05a;
  animation: slConf 9s linear infinite, slSway 2.8s ease-in-out infinite alternate; }
.rm-scene:not([data-out]) .rm-sealfx.party i:nth-child(1) { left: 9%; }
.rm-scene:not([data-out]) .rm-sealfx.party i:nth-child(2) { left: 27%; animation-duration: 11s, 3.4s; animation-delay: -4s, 0s; }
.rm-scene:not([data-out]) .rm-sealfx.party i:nth-child(3) { left: 48%; animation-duration: 8s, 2.4s; animation-delay: -6.5s, 0s; }
.rm-scene:not([data-out]) .rm-sealfx.party i:nth-child(4) { left: 68%; animation-duration: 10s, 3s; animation-delay: -2s, 0s; }
.rm-scene:not([data-out]) .rm-sealfx.party i:nth-child(5) { left: 88%; animation-duration: 12s, 3.6s; animation-delay: -8s, 0s; }
@keyframes slConf { from { top: -70%; } to { top: 104%; } }
@keyframes slSway { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
@keyframes slFw { 0% { transform: scale(.15); opacity: 0; } 12% { opacity: 1; } 55% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.35) translateY(4px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rm-sealfx.live::after { animation: none; opacity: .7; } .rm-sealfx.party i { animation: none; opacity: .9; transform: scale(1); } .rm-scene:not([data-out]) .rm-sealfx.party i { animation: none; top: 6%; } }

/* ---- タイトル画面 */
.title-ann.title-seal { background: rgba(150, 16, 50, .2); border: 1px solid rgba(255, 93, 112, .5); }
.title-ann.title-seal b { color: #ff9aa8; }
.title-ann.title-seal.live { border-color: rgba(255, 93, 112, .85); background: rgba(170, 20, 56, .28); }
.title-ann.title-seal.win { border-color: rgba(255, 214, 120, .8); background: rgba(255, 200, 90, .14); }
.title-ann.title-seal.win b { color: #ffe08a; }
.title-ann.title-seal + .title-ann { margin-top: 8px; }

/* ---- 小窓：ごほうび・ランキング・あそびかた */
.sl-r .wbr-kicker { color: #ff9aa8; }
.sl-r.k-win .wbr-kicker, .sl-r.k-gift .wbr-kicker { color: #ffd678; }
.sl-r-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.sl-r-list li { display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .2); font-size: var(--fs-min); }
.sl-r-list li.k-win b, .sl-r-list li.k-gift b { color: #ffd678; }
.sl-r-list li.k-part b { color: #ff9aa8; }
.sl-r-list small { color: var(--muted); }
.sl-r-top { margin: 0; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(227, 179, 65, .6); background: rgba(227, 179, 65, .12); font-size: var(--fs-min); text-align: left; }
.sl-rk { display: grid; gap: 10px; text-align: left; min-width: 0; }
.sl-rk h2 { margin: 0; font-family: var(--font-dot); font-weight: 400; font-size: calc(20px * var(--fs-k, 1)); }
.sl-rk h3 { margin: 6px 0 0; font-size: var(--fs-min); color: var(--muted); letter-spacing: .08em; }
.sl-rk .hint { margin: 0; }
.sl-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-min); }
.sl-hist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; padding: 5px 8px; border-radius: 8px; background: rgba(0, 0, 0, .18); }
.sl-hist b { color: var(--brass-hi); white-space: nowrap; }
.sl-hist small { grid-column: 1 / -1; color: var(--muted); }

.sl-next { color: var(--sl, #ff7d8e); }

/* ---- 封印成功の発表（全員の画面に、大きく）：夜空に花火。まん中に、封じられた魔王と、5本のくさび */
.sl-fin { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 12px; overflow: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 70% at 50% 22%, rgba(255, 200, 100, .26), rgba(22, 10, 34, .96) 58%), #0d0714; animation: slFinIn .5s ease-out; }
@keyframes slFinIn { from { opacity: 0; } to { opacity: 1; } }
.sl-fin-sky { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.sl-fin-box { position: relative; display: grid; gap: 10px; justify-items: center; width: min(100%, 560px); padding: 18px 16px calc(18px + var(--safe-b, 0px)); border-radius: 18px; border: 2px solid rgba(255, 214, 120, .85);
  background: linear-gradient(180deg, rgba(40, 24, 10, .9), rgba(22, 14, 26, .92)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 44px rgba(255, 200, 90, .35); text-align: center; }
.sl-fin-k { margin: 0; font-size: var(--fs-min); font-weight: 700; letter-spacing: .3em; color: #ffd678; }
.sl-fin-t { margin: 0; font-family: var(--font-dot); font-weight: 400; font-size: clamp(38px, 11vw, 64px); line-height: 1.1; color: #fff3c8; text-shadow: 0 0 18px rgba(255, 200, 90, .9), 0 3px 0 #9c731b; animation: slFinPop .7s cubic-bezier(.2, 1.5, .4, 1) both .15s; }
@keyframes slFinPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sl-fin-art { position: relative; width: 144px; height: 144px; line-height: 0; }
.sl-fin-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: grayscale(.8) brightness(.62); }
.sl-fin-w { position: absolute; left: 0; right: 0; bottom: -4px; display: flex; justify-content: center; gap: 9px; }
.sl-fin-w i { width: 14px; height: 14px; transform: rotate(45deg); border-radius: 2px; border: 2px solid var(--brass-hi); background: var(--brass); box-shadow: 0 0 10px rgba(255, 214, 120, .9); animation: slFinW .5s ease-out both; }
.sl-fin-w i:nth-child(1) { animation-delay: .5s; } .sl-fin-w i:nth-child(2) { animation-delay: .7s; } .sl-fin-w i:nth-child(3) { animation-delay: .9s; } .sl-fin-w i:nth-child(4) { animation-delay: 1.1s; } .sl-fin-w i:nth-child(5) { animation-delay: 1.3s; }
@keyframes slFinW { from { transform: rotate(45deg) translate(-18px, -18px) scale(1.8); opacity: 0; } to { transform: rotate(45deg); opacity: 1; } }
.sl-fin-d { margin: 0; font-size: calc(16px * var(--fs-k, 1)); line-height: 1.6; color: var(--text); }
.sl-fin-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.sl-fin-stats li { display: grid; gap: 1px; padding: 6px 4px; border-radius: 10px; background: rgba(0, 0, 0, .34); border: 1px solid rgba(255, 214, 120, .3); }
.sl-fin-stats small { font-size: var(--fs-min); color: var(--muted); }
.sl-fin-stats b { font-family: var(--font-dot); font-weight: 400; font-size: calc(18px * var(--fs-k, 1)); color: #ffe08a; overflow-wrap: anywhere; }
.sl-fin .sl-mvp { width: 100%; text-align: left; }
.sl-fin .sl-mvp-last { text-align: center; }
.sl-fin-party { margin: 0; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 214, 120, .7); background: linear-gradient(135deg, rgba(255, 214, 120, .2), rgba(255, 134, 179, .12)); font-size: var(--fs-min); line-height: 1.6; color: var(--text); }
.sl-fin-party b { display: block; font-family: var(--font-dot); font-weight: 400; font-size: calc(18px * var(--fs-k, 1)); color: #ffe08a; }
/* ボタンは、長い発表でも、いつも画面の下に見えている */
.sl-fin-ok { position: sticky; bottom: calc(8px + var(--safe-b, 0px)); min-width: min(100%, 220px); min-height: 48px; box-shadow: 0 0 0 6px rgba(22, 14, 26, .85), 0 6px 18px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .sl-fin, .sl-fin-t, .sl-fin-w i { animation: none; } }

/* ---- 戦いの画面：魔王の戦いは、景色を暗く、赤く。大技の予告のあいだは、どくどくと */
.quest.is-seal .b-stage { border-color: rgba(255, 70, 100, .55); box-shadow: 0 0 20px rgba(200, 20, 60, .22); min-height: 306px; } /* 上のバーが1行多いぶん、場を少し高く（スマホでも、魔王の絵を2倍で出せるように） */
@media (max-height: 720px) { .quest.is-seal .b-stage { min-height: 232px; } }
/* 空を、血のような赤むらさきに そめる（かけ合わせ）。その上から、上と下を暗く */
.quest.is-seal .b-stage.has-scenery .q-scenery::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(170, 30, 70, .92) 0%, rgba(130, 40, 90, .74) 45%, rgba(84, 30, 70, .8) 100%); mix-blend-mode: multiply; }
.quest.is-seal .b-stage.has-scenery .q-scenery::after { background: linear-gradient(180deg, rgba(20, 0, 12, .6) 0%, rgba(30, 2, 18, .22) 32%, rgba(24, 2, 16, .32) 56%, rgba(8, 0, 6, .86) 100%); }
.quest.is-seal .b-stage:has(.wb-bar.charge) .q-scenery::after { animation: slDread 1s ease-in-out infinite alternate; }
@keyframes slDread { from { background-color: rgba(120, 0, 30, 0); } to { background-color: rgba(120, 0, 30, .42); } }
.quest.is-rush .b-stage { border-color: #ffd678; box-shadow: 0 0 0 1px rgba(255, 214, 120, .6), 0 0 26px rgba(255, 190, 80, .45); }
@media (prefers-reduced-motion: reduce) { .quest.is-seal .b-stage:has(.wb-bar.charge) .q-scenery::after { animation: none; background-color: rgba(120, 0, 30, .3); } }
/* 上のバー：やみの色。体力の数が大きいので、せまい画面でも数が切れない高さに */
.wb-bar.seal { background: linear-gradient(180deg, rgba(66, 6, 24, .95), rgba(16, 4, 14, .9)); border-color: rgba(255, 70, 100, .6); }
.wb-bar.seal .wb-kicker { color: #ff9aa8; }
.wb-bar.seal .wb-fill { background: linear-gradient(180deg, #ff8c99, #d6264a 55%, #8a0c2a); }
.wb-bar.seal .wb-hp { height: 20px; box-shadow: inset 0 0 0 1.5px rgba(255, 110, 130, .55); }
.wb-bar.seal .wb-num { line-height: 1; white-space: nowrap; }
/* せまい画面：見出しを1行に（名前は短くして見出しへ・のこり時間は札で見る）。そのぶん、魔王の絵を大きく出せる */
@container bt (max-width: 520px) { .wb-bar.seal .wb-hp { height: 19px; } .wb-bar.seal .wb-name, .wb-bar.seal .wb-time { display: none; } .wb-bar.seal .wb-kicker { letter-spacing: .04em; white-space: nowrap; } }
.wb-tags .wb-fx { border-color: rgba(255, 214, 120, .7); color: #fff0c4; background: rgba(120, 80, 10, .4); white-space: nowrap; }
/* きずなゲージ・総攻撃・闘志（バーの下の1行） */
.wb-bond { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: var(--fs-min); line-height: 1.2; color: var(--text); min-width: 0; }
.wb-bond[hidden] { display: none; }
.wb-bd-l { flex: none; font-weight: 700; color: #ffd27a; white-space: nowrap; }
.wb-bd { flex: 1 1 40px; min-width: 24px; height: 9px; border-radius: 5px; background: rgba(0, 0, 0, .6); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 210, 122, .5); }
.wb-bd > i { display: block; height: 100%; background: linear-gradient(180deg, #fff0b4, #ffc24a 55%, #ff8a5a); transition: width .3s ease-out; }
.wb-bd-n { flex: none; white-space: nowrap; color: var(--text); }
.wb-sp { flex: none; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(255, 150, 90, .75); background: rgba(160, 50, 10, .4); color: #ffd9b8; font-weight: 700; white-space: nowrap; }
.wb-sp.max { border-color: #ffd678; color: #fff3cc; background: rgba(170, 90, 10, .55); }
.wb-bond.rush .wb-bd-l { color: #fff3cc; text-shadow: 0 0 8px rgba(255, 200, 90, .9); }
.wb-bond.rush .wb-bd > i { background: linear-gradient(90deg, #ffd678, #fff6d8, #ffd678); background-size: 200% 100%; animation: slBdRush 1s linear infinite; }
.wb-bond.rush .wb-bd-n { color: #ffe08a; font-weight: 700; }
@keyframes slBdRush { from { background-position: 0 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wb-bd > i { transition: none; } .wb-bond.rush .wb-bd > i { animation: none; } }
#b-alert.seal { border-color: rgba(255, 70, 100, .95); background: linear-gradient(90deg, rgba(150, 10, 44, .7), rgba(60, 4, 22, .6)); }