.story-campaign-demon .story-book-art{border-color:#bd9762}.story-campaign-demon .story-visual{background:linear-gradient(#080b1660,#080b1690),var(--story-background);background-size:cover;background-position:center}.story-campaign-demon .story-stage{border-color:#b6996860}.story-campaign-demon .story-asset>.portrait:not(.demon-hero-art){max-height:100%}.story-campaign-demon .story-scene-tag{max-width:90%;line-height:1.5}.demon-match .opponent-panel .goal{background:#2c2439}.demon-match .mobile-avatar .portrait img{object-position:50% 22%}.demon-match .match-portrait .portrait img{object-position:50% 18%}.demon-hero-art img{object-fit:cover!important;object-position:50% 25%!important}
/* The supplied emblem is menu-only, shown whole above its separate caption. */
.story-campaign-demon .story-book-emblem{height:auto;background:#fff}
.story-campaign-demon .story-book-emblem>.story-cover{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.story-campaign-demon .story-book-emblem>.story-book-shade{display:none}
.story-campaign-demon .story-book-emblem>span{position:static;display:block;padding:13px 12px;background:#101927;text-align:center;font-size:clamp(13px,2vw,17px);line-height:1.6;letter-spacing:.08em}
/* Full-bleed dialogue art, including inherited win/shock poses. Keep the hero's head in frame. */
.story-campaign-demon .story-asset>.portrait.demon-hero-art>img,
.story-campaign-demon .story-asset>.portrait.demon-npc-art>img{
  object-fit:cover!important;width:100%;height:100%;inset:0;transform:none!important;
}
.story-campaign-demon .story-asset>.portrait.demon-hero-art>img{object-position:50% 0%!important}
.story-campaign-demon .story-asset>.portrait.demon-npc-art>img{object-position:50% 20%!important}
.demon-support-bar{padding:12px 14px;background:linear-gradient(120deg,#211a2b,#111b26);border:1px solid #c7a36766;border-radius:8px;margin:6px 0 12px}.demon-support-heading{display:flex;justify-content:space-between;gap:8px;color:#ead3ad;font-size:13px;line-height:1.5}.demon-support-heading small{color:#a5a3b2}.demon-support-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:10px}.demon-ally{display:flex;align-items:center;gap:7px;min-width:0;opacity:.48;filter:grayscale(1);border:1px solid #66647566;padding:4px;border-radius:5px}.demon-ally img{width:30px;height:34px;object-fit:cover;object-position:center 20%;border-radius:3px}.demon-ally div{min-width:0}.demon-ally b,.demon-ally span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.demon-ally span{color:#ccc;font-size:10px}.demon-ally.is-returned{opacity:1;filter:none;border-color:#dab774;box-shadow:inset 0 0 13px #c9a65a22}.demon-ally.is-returned span{color:#efcb82}.demon-contract{font-size:11px;line-height:1.5;color:#b8afc4;margin:8px 0 0}.demon-danger{outline:2px solid #e96f82!important;box-shadow:0 0 10px #d02f4980!important}.demon-danger-note{position:absolute;top:-15px;left:0;right:0;font-size:9px;line-height:14px;color:#fff;background:#a42642;border-radius:2px}.demon-lucky{box-shadow:0 0 14px #f8d276!important}.demon-match .hand{padding-top:18px}.demon-match .table{border-color:#b39568}
dialog.demon-talk{width:min(880px,96vw);max-height:calc(100dvh - 24px);padding:0;display:grid;grid-template-columns:40% 60%;overflow:hidden;background:#151923;border:1px solid #c4a36b}.demon-talk-art{min-height:350px;background:radial-gradient(at center,#5b4140,#151923)}.demon-talk-art>.portrait{height:100%;width:100%}.demon-talk-art .portrait img{height:100%;width:100%;object-fit:cover;object-position:50% 20%}.demon-talk-copy{padding:26px;align-self:center;overflow:auto;max-height:calc(100dvh - 32px)}.demon-talk-copy h2{font-size:22px;margin:8px 0 16px}.demon-talk-text{font-family:var(--serif);font-size:20px;line-height:1.9;min-height:110px}.demon-aid-effect{padding:12px;border:1px solid #d5ae6550;background:#312637;margin:18px 0}.demon-aid-effect b,.demon-aid-effect span{display:block;font-size:13px;line-height:1.65}.demon-aid-effect b{color:#f3d49c}.demon-aid-effect span{color:#d2c4c5}.demon-support-score{border:1px solid #dfaa5566;padding:10px 15px;color:#eccc99;border-radius:6px;line-height:1.8}
.demon-invasion{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:20px;background:linear-gradient(#1c102088,#08060fe6)}.demon-seal-break{width:42%;height:70%;position:relative;filter:saturate(.3)}.demon-seal-break .portrait{height:100%}.demon-seal-break span{position:absolute;bottom:8%;left:0;right:0;text-align:center;color:#f5aaaa;font-size:22px}.demon-invasion-result{display:grid;gap:16px;color:#efe0c6;width:44%}.demon-invasion-result b{font-size:clamp(24px,3vw,40px)}.demon-invasion-result small{font-size:12px}.demon-seal-life{height:5px;background:#201b24}.demon-seal-life i{display:block;width:0;height:100%;background:#d7b171;animation:demon-seal 1.8s ease-out}.demon-false-ending{background:#080b12}.demon-false-window{height:min(72dvh,720px);overflow:hidden;position:relative;text-align:center}.demon-false-backdrop{position:absolute;inset:0;background:linear-gradient(#080b1260,#080b12ee),url('./assets/story/demon-castle-v1.webp') center/cover}.demon-false-end{position:absolute;inset:15% 0 auto;font-family:var(--serif);font-size:62px;letter-spacing:.3em;animation:demon-end 16s linear both}.demon-false-end small{display:block;font-size:16px;letter-spacing:.15em;margin-top:18px}.demon-false-roll{position:absolute;top:100%;left:0;right:0;animation:demon-roll 16s linear both;line-height:2.4}.demon-false-roll h1{font-size:30px;color:#edd5ac}.demon-false-roll h2{font-size:14px;color:#c8b694;margin:26px 0 12px}.demon-false-roll p{font-size:20px;margin:8px}.demon-rewind-line{position:absolute;bottom:5%;left:5%;right:5%;padding:18px;background:#0e152aee;border:1px solid #be9b5c;opacity:0;animation:demon-rewind-caption 16s linear both;text-align:left}.demon-rewind-line p{font-size:18px;line-height:1.8;margin:8px 0 0}.demon-rewind-mark{position:absolute;right:5%;top:6%;color:#f4cf97;font-size:30px;opacity:0;animation:demon-rewind-caption 16s linear both}.demon-false-ending footer{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
@keyframes demon-seal{from{width:100%}to{width:0}}@keyframes demon-end{0%,12%{opacity:1}18%,78%{opacity:0}91%,96%{opacity:1}100%{opacity:0}}@keyframes demon-roll{0%,12%{transform:translateY(0)}76%,81%{transform:translateY(-120%)}94%,100%{transform:translateY(0)}}@keyframes demon-rewind-caption{0%,77%{opacity:0}80%,100%{opacity:1}}
@media(max-width:600px){.demon-support-bar{padding:8px;margin:0 0 7px}.demon-support-grid{gap:4px;margin-top:6px}.demon-ally{gap:4px;padding:3px}.demon-ally img{width:23px;height:29px}.demon-ally b,.demon-ally span{font-size:8px}.demon-support-heading{font-size:11px}.demon-support-heading small{display:none}.demon-contract{font-size:10px;margin-top:5px}dialog.demon-talk{grid-template-columns:1fr;max-height:calc(100dvh - 16px);width:94vw}.demon-talk-art{height:28dvh;min-height:120px}.demon-talk-art .portrait img{object-position:center 22%}.demon-talk-copy{padding:16px;max-height:62dvh}.demon-talk-copy h2{font-size:18px;margin:0 0 8px}.demon-talk-text{font-size:17px;line-height:1.75;min-height:0;margin:10px 0}.demon-aid-effect{margin:12px 0;padding:8px}.demon-talk-copy .confirm-actions{margin-top:10px}.demon-rewind-line p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.demon-seal-life i{animation:none}.demon-false-roll{animation:none;top:15%;transform:none}.demon-false-end{animation:none;opacity:0}.demon-rewind-line{animation:none;opacity:1}.demon-rewind-mark{display:none}}
.demon-talk-art.demon-talk-scenery .portrait img{object-position:center}

/* The same eight faces lose their light at the castle and regain it at the table. */
.demon-story-defenses{flex:0 0 auto;padding:0 0 10px}
.demon-defense-status{display:flex;justify-content:space-between;gap:12px;margin:5px 0 6px;color:#bbad9b;font-size:10px;line-height:1.4}
.demon-defense-status b{font-weight:400;color:#e6c796;font-variant-numeric:tabular-nums}
.demon-defense-faces{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(3px,1vw,9px);list-style:none;margin:0;padding:0}
.demon-defense-face{min-width:0;text-align:center;color:#e0d4c0;line-height:1.3}
.demon-defense-portrait{display:block;position:relative;width:100%;max-width:58px;height:38px;margin:0 auto 3px;border:1px solid #a9895966;background:#11151f;overflow:hidden;border-radius:3px;transition:border-color .35s,box-shadow .35s}
.demon-defense-portrait :is(img,svg){display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:filter .35s,opacity .35s}
.demon-defense-portrait i{position:absolute;right:0;bottom:0;font:700 13px/15px sans-serif;background:#10141fe8;min-width:15px;color:#e5c186;font-style:normal}
.demon-defense-portrait i:empty{display:none}
.demon-defense-face>b{display:block;font-size:clamp(8px,2.3vw,10px);font-weight:400;white-space:nowrap}
.demon-defense-face.is-fallen,.demon-defense-face.is-pending{color:#868492}
.demon-defense-face.is-fallen :is(img,svg){filter:grayscale(1);opacity:.25}
.demon-defense-face.is-fallen .demon-defense-portrait{border-color:#8f48536b}
.demon-defense-face.is-fallen i{color:#f49e9e}
.demon-defense-face.is-pending :is(img,svg){filter:grayscale(1);opacity:.35}
.demon-defense-face.is-target .demon-defense-portrait{border-color:#e35b6c;box-shadow:0 0 0 1px #e35b6c66}
.demon-defense-face.is-returned .demon-defense-portrait{border-color:#f0ce89;box-shadow:0 0 9px #f0bf5855}
.demon-defense-face.is-returned>b{color:#f1d29c}
.demon-support-bar .demon-defense-status{margin-top:9px}
.demon-support-effects{display:flex;flex-wrap:wrap;gap:4px 9px;color:#e3c28b;font-size:10px;line-height:1.4;margin-top:7px}
.demon-support-effects:empty{display:none}
.demon-support-effects span:before{content:'✓ ';color:#a7ccb2}

/* A readable, full-frame aftermath remains when the cinematic is over or skipped. */
.story-campaign-demon.story-defeated .story-asset>.portrait{position:absolute;inset:0;width:100%;height:100%;max-height:none;filter:saturate(.25) brightness(.68)}
.story-campaign-demon.story-defeated .story-asset>.portrait>img{width:100%;height:100%;inset:0;max-width:none;max-height:none;object-fit:cover!important;object-position:50% 35%!important;transform:none!important}
.story-defeated .story-scene-tag{display:none}
.story-defeated .story-art-open{top:12px;bottom:auto;right:12px}
.story-defeated .demon-invasion{inset:auto 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;justify-content:normal;gap:14px;padding:60px 22px 20px;background:linear-gradient(transparent,#0b0911ed 48%);color:#f5e2d0;pointer-events:none}
.demon-invasion small{font-size:11px;letter-spacing:.12em;color:#bea995}
.demon-invasion strong{display:block;font:clamp(23px,4vw,37px)/1.4 var(--serif);margin:5px 0}
.demon-invasion em{font-style:normal;color:#f2a5a7;white-space:nowrap}
.demon-invasion p{font-size:12px;line-height:1.5;color:#d6b8ae;margin:6px 0 0}
.demon-invasion-score{text-align:right;white-space:nowrap}
.demon-invasion-score>span{display:block;font-size:10px;color:#c6b7ae}
.demon-invasion-score>b{font:50px/1.2 var(--serif);color:#f5b9b0}
.demon-invasion-score small{font:12px var(--serif);margin-left:4px}

/* Declaration, impact, then the broken defense: never two competing portraits. */
dialog.demon-defeat-cutin,.compact-landscape dialog.demon-defeat-cutin{position:fixed;inset:0;width:100vw;height:var(--view-height,100dvh);max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#07070d;color:#f4e8d7;isolation:isolate}
.demon-defeat-cutin::backdrop{background:#07070d}
.demon-defeat-stage,.demon-defeat-hero,.demon-defeat-ally,.demon-defeat-shade,.demon-defeat-flash,.demon-defeat-blackout{position:absolute;inset:0;pointer-events:none}
.demon-defeat-stage .portrait{position:absolute;inset:0;width:100%;height:100%;max-height:none;overflow:hidden}
.demon-defeat-stage .portrait>img{inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:50% 35%!important;transform:none!important}
.demon-defeat-stage .demon-defeat-hero .portrait>img{object-position:50% 18%!important}
.demon-defeat-hero,.demon-defeat-ally{opacity:0}
.demon-defeat-shade{background:linear-gradient(#07070de0,transparent 32%,transparent 44%,#100813c9 70%,#08060cef)}
.demon-defeat-header{position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);width:min(620px,100%);padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));transition:opacity .45s}
.demon-defeat-kicker{display:block;font:12px var(--serif);letter-spacing:.25em;margin-bottom:12px;color:#d9bf99}
.demon-defeat-header .demon-defense-status{color:#e0cbbc}
.demon-defeat-header .demon-defense-portrait{height:40px}
.demon-defeat-ron{position:absolute;left:0;right:0;bottom:17%;text-align:center;opacity:0;text-shadow:0 4px 30px #10020c}
.demon-defeat-ron span{display:block;letter-spacing:.65em;font:20px var(--serif);color:#f6baba}
.demon-defeat-ron>b{display:block;font:clamp(90px,24vw,180px)/1.3 var(--serif);letter-spacing:.1em;color:#fff1e1}
.demon-defeat-result{position:absolute;bottom:max(100px,15%);left:6%;right:6%;max-width:720px;margin:auto;text-align:center;opacity:0}
.demon-defeat-result>small{font-size:12px;letter-spacing:.24em;color:#e9bfb5}
.demon-defeat-result h2{font:clamp(26px,6vw,52px)/1.35 var(--serif);margin:10px 0;text-shadow:0 3px 16px #08040d}
.demon-defeat-result h2 em{display:block;font-size:.85em;letter-spacing:.4em;color:#f0a1a1;font-style:normal;visibility:hidden;margin-top:6px}
.demon-defeat-points{position:relative;width:min(280px,85%);margin:0 auto;padding-bottom:10px}
.demon-defeat-points>span{font-size:11px;color:#c4b5b0;margin-right:12px}
.demon-defeat-points>b{display:inline-block;font:62px/1.2 var(--serif);color:#ffe0ce;opacity:0}
.demon-defeat-points small{font-size:17px;margin-left:5px}
.demon-defeat-points:after,.demon-defeat-points>i{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:#6d3537}
.demon-defeat-points>i{z-index:1;background:#e3bd7c;transform-origin:left}
.demon-defeat-result>p{visibility:hidden;font:clamp(18px,4.5vw,30px)/1.5 var(--serif);margin:16px 0 3px;color:#f3d3b6;letter-spacing:.08em}
.demon-defeat-seal-label{visibility:hidden;font-size:11px;letter-spacing:.3em;color:#cc9a92}
.demon-defeat-lightning{position:absolute;z-index:1;top:0;left:10%;width:80%;height:80%;object-fit:fill;mix-blend-mode:screen;opacity:0;pointer-events:none}
.demon-defeat-flash{background:#e5d6ff;opacity:0}
.demon-defeat-seal{position:absolute;left:50%;top:40%;width:min(64vw,370px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:0}
.demon-defeat-seal i{position:absolute;inset:0;border:2px solid #edc982b3;border-radius:50%;box-shadow:inset 0 0 30px #c9955770,0 0 16px #c9955740;opacity:.75;--sx:-35px;--sy:-35px}
.demon-defeat-seal i:nth-child(1){clip-path:polygon(0 0,52% 0,48% 24%,55% 45%,45% 54%,0 48%)}
.demon-defeat-seal i:nth-child(2){clip-path:polygon(52% 0,100% 0,100% 54%,70% 48%,55% 45%,48% 24%);--sx:35px}
.demon-defeat-seal i:nth-child(3){clip-path:polygon(100% 54%,100% 100%,48% 100%,54% 70%,45% 54%,55% 45%,70% 48%);--sx:35px;--sy:35px}
.demon-defeat-seal i:nth-child(4){clip-path:polygon(48% 100%,0 100%,0 48%,45% 54%,54% 70%);--sy:35px}
.demon-defeat-blackout{z-index:3;background:#000;opacity:0;transition:opacity .7s}
.demon-defeat-loading{position:absolute;left:0;right:0;top:48%;text-align:center;font-size:13px;color:#c9b59c}
.demon-defeat-cutin .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.demon-defeat-cutin .demon-defeat-skip{position:absolute;z-index:4;bottom:max(20px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));padding:10px 17px;min-height:44px;font-size:12px;letter-spacing:.06em;background:#090b13c9;border-color:#c4a67580;color:#ead5b4}
.demon-defeat-cutin:not([data-phase="loading"]) .demon-defeat-loading{display:none}
.demon-defeat-cutin[data-phase="strike"] .demon-defeat-hero{opacity:1;animation:demon-declaration .75s ease-out both}
.demon-defeat-cutin[data-phase="strike"] .demon-defeat-ron{opacity:1;animation:demon-ron .3s ease-out both}
.demon-defeat-cutin:is([data-phase="impact"],[data-phase="breach"],[data-phase="blackout"]) .demon-defeat-ally,.demon-defeat-cutin:is([data-phase="impact"],[data-phase="breach"]) .demon-defeat-result{opacity:1}
.demon-defeat-cutin[data-phase="impact"] .demon-defeat-ally{animation:demon-hit .22s .5s ease-out}
.demon-defeat-cutin[data-phase="impact"] .demon-defeat-lightning{animation:demon-strike .5s .38s ease-out both}
.demon-defeat-cutin[data-phase="impact"] .demon-defeat-flash{animation:demon-flash .22s .5s ease-out both}
.demon-defeat-cutin[data-phase="impact"] .demon-defeat-points>b{animation:demon-zero .35s .5s ease-out both}
.demon-defeat-cutin[data-phase="impact"] .demon-defeat-points>i{animation:demon-empty .35s .5s ease-in forwards}
.demon-defeat-cutin[data-phase="breach"] .demon-defeat-ally{filter:grayscale(.85) brightness(.5);transition:filter .6s}
.demon-defeat-cutin[data-phase="breach"] .demon-defeat-points>b{opacity:1}
.demon-defeat-cutin[data-phase="breach"] .demon-defeat-points>i{transform:scaleX(0)}
.demon-defeat-cutin[data-phase="breach"] .demon-defeat-result h2 em,.demon-defeat-cutin[data-phase="breach"] .demon-defeat-result>p,.demon-defeat-cutin[data-phase="breach"] .demon-defeat-seal-label{visibility:visible;animation:demon-breach .3s ease-out both}
.demon-defeat-cutin[data-phase="breach"] .demon-defeat-result>p{animation-delay:.2s}
.demon-defeat-cutin[data-phase="breach"] .demon-defeat-seal-label{animation-delay:.35s}
.demon-defeat-cutin[data-phase="breach"] .demon-defeat-seal{opacity:1}
.demon-defeat-cutin[data-phase="breach"] .demon-defeat-seal i{animation:demon-shatter .65s ease-out forwards}
.demon-defeat-cutin[data-phase="blackout"] .demon-defeat-blackout{opacity:1}
.demon-defeat-cutin[data-phase="blackout"] .demon-defeat-header{opacity:0}
@keyframes demon-declaration{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes demon-ron{from{transform:translateY(15px) scale(1.12);opacity:0}to{transform:none;opacity:1}}
@keyframes demon-hit{0%,100%{transform:none}30%{transform:translate(-7px,3px)}65%{transform:translate(5px,-2px)}}
@keyframes demon-strike{0%{opacity:0;transform:scaleY(.1);transform-origin:top}24%,44%{opacity:.85;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
@keyframes demon-flash{0%{opacity:.3}100%{opacity:0}}
@keyframes demon-zero{from{opacity:0;transform:scale(1.45)}to{opacity:1;transform:none}}
@keyframes demon-empty{to{transform:scaleX(0)}}
@keyframes demon-breach{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes demon-shatter{to{transform:translate(var(--sx),var(--sy)) scale(1.2);opacity:0}}
@media(max-width:600px){
  .demon-story-defenses{padding-bottom:7px}
  .demon-story-defenses .demon-defense-portrait{height:29px}
  .demon-story-defenses .demon-defense-status{margin-top:0;font-size:9px}
  .demon-support-bar .demon-defense-portrait{height:31px}
  .demon-support-bar .demon-defense-status{font-size:9px;margin-top:5px}
  .demon-support-effects{font-size:9px;gap:3px 7px;margin-top:5px}
  .story-defeated .demon-invasion{padding:50px 15px 15px;gap:8px}
  .demon-invasion p{font-size:10px}
  .demon-invasion-score>b{font-size:40px}
}
@media(orientation:landscape) and (max-height:600px){
  .demon-defeat-header{width:330px;left:16px;transform:none;padding:12px 0 0}
  .demon-defeat-kicker{margin-bottom:5px;font-size:10px}
  .demon-defeat-header .demon-defense-portrait{height:27px}
  .demon-defeat-result{left:auto;right:5%;width:43%;bottom:70px}
  .demon-defeat-result h2{font-size:26px;margin:5px 0}
  .demon-defeat-result h2 em{display:inline-block;margin:0 0 0 12px;font-size:20px;letter-spacing:.15em}
  .demon-defeat-result>p{font-size:20px;margin:8px 0 0}
  .demon-defeat-points>b{font-size:40px}
  .demon-defeat-ron{left:auto;right:10%;bottom:22%}
  .demon-defeat-ron>b{font-size:90px}
  .demon-defeat-shade{background:linear-gradient(90deg,#08060c70,transparent 40%,#08060ccc 68%),linear-gradient(#08060c88,transparent 40%,#08060c99)}
  .demon-story-defenses{padding-bottom:5px}
  .demon-story-defenses .demon-defense-faces,.demon-story-defenses .demon-defense-status{width:min(500px,100%);margin-inline:auto}
  .demon-story-defenses .demon-defense-portrait{height:23px}
}
@media(prefers-reduced-motion:reduce){
  .demon-defeat-cutin *,.demon-defense-face *{animation:none!important;transition:none!important}
  .demon-defeat-seal,.demon-defeat-lightning,.demon-defeat-flash{display:none}
}
.demon-defeat-cutin.is-reduced-motion *{animation:none!important;transition:none!important}
.demon-defeat-cutin.is-reduced-motion .demon-defeat-seal{display:none}

/* Fit an individually chosen portrait window without cutting through a face.
   The illustration itself fills the surrounding area, so no castle backdrop leaks in. */
.demon-framed-portrait,.demon-framed-fill{position:absolute;inset:0;overflow:hidden}
.demon-framed-portrait{background:#15121b}
.demon-framed-fill>img{width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.42);transform:scale(1.08)}
.demon-framed-portrait>svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.story-defeated .demon-framed-portrait{filter:saturate(.35) brightness(.78)}
.demon-defeat-cutin{--demon-art-top:max(148px,calc(env(safe-area-inset-top) + 135px))}
.demon-defeat-cutin .demon-defeat-hero,.demon-defeat-cutin .demon-defeat-ally{top:var(--demon-art-top)}
.demon-defense-portrait{max-width:38px;margin-inline:auto}
.demon-defeat-header .demon-defense-portrait{max-width:40px}

/* The throne duel uses the same tile faces as ordinary two-player mahjong. */
.demon-throne-table{position:absolute;z-index:1;top:var(--demon-art-top);bottom:max(76px,calc(env(safe-area-inset-bottom) + 60px));left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 36px));display:none;flex-direction:column;gap:8px;padding:14px;border:1px solid #b79b69;border-radius:8px;background:radial-gradient(ellipse at center,#164b43,#102d2a);box-shadow:0 0 60px #000b,inset 0 0 0 4px #463629;--duel-tile:min(24px,calc((100vw - 108px)/14))}
.demon-throne-cutin:is([data-phase="table"],[data-phase="contract"],[data-phase="draw"],[data-phase="hand"],[data-phase^="dora"],[data-phase="payment"],.is-reduced-motion) .demon-throne-table{display:flex}
.demon-throne-topline{display:flex;justify-content:space-between;gap:10px;color:#e4c799;font-size:11px}
.demon-throne-topline>b{font-weight:400;color:#bacdc3}
.demon-throne-seat{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 0;color:#f7e5c4}
.demon-throne-seat>span:nth-child(2){min-width:0;flex:1}
.demon-throne-seat>span>small{display:block;font-size:9px;color:#a2b8b0;margin-bottom:2px}
.demon-throne-seat>span>b{display:block;font-size:12px;font-weight:500;line-height:1.4}
.demon-throne-face{display:block;flex:0 0 42px;width:42px;height:42px;overflow:hidden;background:#11171c;border:1px solid #b1976a88}
.demon-throne-face>svg{width:100%;height:100%;display:block}
.demon-throne-score{position:relative;flex:0 0 auto;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.demon-throne-score>b{font:clamp(21px,5vw,32px)/1.2 var(--serif);letter-spacing:.025em}
.demon-throne-score>small{font-size:9px;margin-left:4px}
.demon-throne-score>em{display:none;position:absolute;right:0;top:50%;font:bold 17px var(--serif);font-style:normal;pointer-events:none}
.demon-throne-score .demon-throne-loss{color:#ffb3af}
.demon-throne-score .demon-throne-gain{color:#f9d487}
.demon-throne-table .after-payment{display:none}
.demon-throne-cutin.is-paid .demon-throne-table .before-payment{display:none}
.demon-throne-cutin.is-paid .demon-throne-table .after-payment{display:inline}
.demon-throne-cutin.is-paid .demon-throne-king .demon-throne-score{color:#ffb3af}
.demon-throne-cutin[data-phase="payment"] .demon-throne-score>em{display:block;animation:demon-throne-transfer 1.15s ease-out both}
.demon-throne-table .tile.small{width:var(--duel-tile);height:calc(var(--duel-tile)*1.4);padding:1px;border-radius:2px;box-shadow:0 2px 0 #ae9c76,0 3px 1px #061c21}
.demon-throne-table .tile.small .tile-number,.demon-throne-table .tile.small .tile-suit{font-size:calc(var(--duel-tile)*.62);line-height:1}
.demon-throne-table .tile.small .honor{font-size:calc(var(--duel-tile)*.95)}
.demon-throne-table .tile.small.back i{font-size:calc(var(--duel-tile)*.75)}
.demon-throne-table .white-dragon{border-width:1px;box-shadow:none;border-radius:2px}
.demon-throne-hidden-hand,.demon-throne-before-hand,.demon-throne-open-hand{display:flex;gap:1px;justify-content:center}
.demon-throne-hidden-hand{flex:0 0 auto;opacity:.75}
.demon-throne-felt{display:flex;flex:1;min-height:118px;flex-direction:column;align-items:center;justify-content:space-around;position:relative;border-block:1px solid #90a38d30;padding:7px 0}
.demon-throne-river{display:flex;gap:3px;opacity:.75;transform:scale(.86)}
.demon-throne-river:first-child{transform:rotate(180deg) scale(.86)}
.demon-throne-wall{position:absolute;left:2px;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(2,1fr);gap:2px;opacity:.32;--duel-tile:10px}
.demon-throne-center{text-align:center;min-height:62px;display:flex;align-items:center;justify-content:center;padding:4px 0;line-height:1.5}
.demon-throne-turn{font:20px var(--serif);letter-spacing:.2em;color:#c4b88e}
.demon-throne-contract,.demon-throne-hand-result{display:none}
.demon-throne-center small,.demon-throne-center b,.demon-throne-center span{display:block}
.demon-throne-center small{font-size:10px;color:#cfbca6}
.demon-throne-center b{font:clamp(24px,6vw,37px)/1.4 var(--serif);color:#ffe1a5}
.demon-throne-center span{font-size:13px;color:#ebd9b4}
.demon-throne-cutin[data-phase="contract"] .demon-throne-contract,.demon-throne-cutin.is-revealed .demon-throne-hand-result{display:block}
.demon-throne-cutin[data-phase="contract"] .demon-throne-hand-result,.demon-throne-cutin.is-revealed .demon-throne-turn{display:none}
.demon-throne-cutin[data-phase="contract"] .demon-throne-contract{animation:demon-breach .35s ease-out both}
.demon-throne-hero-hand{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:6px;min-height:calc(var(--duel-tile)*1.4 + 4px)}
.demon-throne-open-hand{display:none}
.demon-throne-drawn{visibility:hidden;display:inline-flex}
.demon-throne-cutin.has-drawn .demon-throne-drawn{visibility:visible;box-shadow:0 0 20px #e5c777}
.demon-throne-cutin[data-phase="draw"] .demon-throne-drawn{animation:demon-throne-draw .45s ease-out both}
.demon-throne-cutin.is-revealed .demon-throne-before-hand{display:none}
.demon-throne-cutin.is-revealed .demon-throne-open-hand{display:flex}
.demon-throne-cutin[data-phase="hand"] .demon-throne-open-hand{animation:demon-breach .35s ease-out both}
.demon-throne-caption{flex:0 0 auto;min-height:30px;margin:0;font:12px/1.6 var(--serif);text-align:center;color:#e7d7bc}
.demon-throne-indicators{display:flex;justify-content:center;align-items:flex-end;gap:18px;flex:0 0 auto;text-align:center}
.demon-throne-indicators small{display:block;font-size:9px;color:#b6c3b5;margin-bottom:5px}
.demon-throne-contract-indicators{padding-left:18px;border-left:1px solid #cd91704d}
.demon-throne-contract-indicators small{color:#edbba5}
.demon-throne-contract-indicators>div{display:flex;gap:4px}
.demon-throne-indicator{display:inline-flex;position:relative;perspective:300px}
.demon-throne-indicator .indicator-front{display:none}
.demon-throne-indicator.is-open .indicator-back{display:none}
.demon-throne-indicator.is-open .indicator-front{display:inline-flex;animation:demon-contract-open .35s ease-out both;box-shadow:0 0 15px #ff794577}
.demon-throne-cutin[data-phase^="dora"] .demon-throne-center b{color:#ffc29b;text-shadow:0 0 20px #f6582744}
.demon-throne-cutin:is([data-phase="dora5"],[data-phase="payment"]) [data-demon-throne-value]{font:clamp(17px,4vw,23px)/1.5 var(--serif);color:#ffe2aa}
.demon-contract[data-contract-state="charging"]{color:#eebf9b}
.demon-contract:is([data-contract-state="sealed"],[data-contract-state="cancelled"]){color:#a3d5bc}
.demon-throne-cutin.is-reduced-motion .demon-defeat-stage{visibility:hidden}
.demon-throne-cutin.is-reduced-motion .demon-throne-contract{display:none}
.demon-throne-cutin[data-phase="impact"] .demon-defeat-lightning{filter:hue-rotate(35deg);animation-duration:.85s}
@keyframes demon-throne-draw{from{transform:translate(22px,-25px);opacity:0}to{transform:none;opacity:1}}
@keyframes demon-throne-transfer{0%{transform:translateY(0);opacity:1}85%{opacity:1}100%{transform:translateY(-38px);opacity:0}}
@keyframes demon-contract-open{from{transform:rotateY(85deg) translateY(-8px);filter:brightness(2)}to{transform:none;filter:none}}
@media(max-width:600px) and (max-height:800px){
  .demon-defeat-result{bottom:78px}
  .demon-defeat-result h2{font-size:25px;margin:6px 0}
  .demon-defeat-result h2 em{display:inline-block;margin:0 0 0 12px;font-size:20px;letter-spacing:.15em}
  .demon-defeat-result>small{font-size:10px}
  .demon-defeat-points>b{font-size:38px}
  .demon-defeat-result>p{font-size:19px;margin:8px 0 2px}
  .demon-defeat-seal-label{font-size:10px}
  .demon-throne-table{gap:5px;padding:10px;--duel-tile:min(22px,calc((100vw - 100px)/14))}
  .demon-throne-felt{min-height:95px}
  .demon-throne-face{width:32px;height:32px;flex-basis:32px}
  .demon-throne-seat{padding:2px 0}
  .demon-throne-center{min-height:52px}
  .demon-throne-center b{font-size:25px}
  .demon-throne-indicators{gap:10px}
  .demon-throne-contract-indicators{padding-left:10px}
}
@media(orientation:landscape) and (max-height:620px){
  .demon-defeat-cutin .demon-defeat-hero,.demon-defeat-cutin .demon-defeat-ally{top:112px;right:55%}
  .demon-defeat-header{width:min(330px,40vw);left:16px;transform:none;padding:12px 0 0}
  .demon-throne-table{left:44%;right:16px;top:12px;bottom:max(62px,calc(env(safe-area-inset-bottom) + 50px));width:auto;transform:none;gap:4px;padding:9px;--duel-tile:min(22px,calc((56vw - 64px)/14))}
  .demon-throne-topline,.demon-throne-hidden-hand,.demon-throne-river,.demon-throne-wall{display:none}
  .demon-throne-face{width:30px;height:30px;flex-basis:30px}
  .demon-throne-seat{padding:0}
  .demon-throne-seat>span>b{font-size:11px}
  .demon-throne-score>b{font-size:22px}
  .demon-throne-felt{min-height:52px;padding:0}
  .demon-throne-center{min-height:50px;padding:0}
  .demon-throne-center b{font-size:25px}
  .demon-throne-center small{font-size:9px}
  .demon-throne-center span{font-size:11px}
  .demon-throne-caption{min-height:18px;font-size:10px;line-height:1.4}
  .demon-throne-indicators{gap:12px;--duel-tile:15px}
  .demon-throne-indicators small{font-size:8px;margin-bottom:2px}
  .demon-throne-contract-indicators{padding-left:12px}
}
@media(orientation:portrait) and (max-height:720px){
  .demon-throne-hidden-hand,.demon-throne-river,.demon-throne-wall{display:none}
  .demon-throne-felt{min-height:60px;padding:3px 0}
  .demon-throne-table{gap:4px}
}

/* Nine defenders share stable positions throughout the expanded chapter. */
.demon-defense-faces{grid-template-columns:repeat(9,minmax(0,1fr))}
.demon-duel-cutin[data-phase^="exchange"] .demon-throne-table{display:flex}
.demon-duel-cutin [data-duel-discard]{visibility:hidden}
.demon-duel-cutin [data-duel-discard].is-discarded{visibility:visible;animation:demon-throne-draw .25s ease-out both}
.demon-duel-power{display:none;position:absolute;z-index:2;left:5%;right:5%;bottom:19%;text-align:center;text-shadow:0 3px 24px #000}
.demon-duel-power small{display:block;font:14px var(--serif);letter-spacing:.3em;color:#edc591}
.demon-duel-power b{display:block;font:clamp(36px,9vw,82px)/1.4 var(--serif);color:#ffe0a1}
.demon-duel-power p{font:clamp(12px,3vw,20px)/1.7 var(--serif);color:#f6e7cf}
.demon-duel-cutin[data-phase="contract"] .demon-throne-table{display:none}
.demon-duel-cutin[data-phase="contract"] .demon-defeat-hero{opacity:1;animation:demon-declaration .7s ease-out both}
.demon-duel-cutin[data-phase="contract"] .demon-duel-power{display:block;animation:demon-breach .3s ease-out both}
.demon-duel-cutin .demon-throne-contract-indicators:first-child{border-left:0;padding-left:0}
.demon-release{width:min(620px,calc(100vw - 24px));text-align:center;border-color:#caa166;background:linear-gradient(145deg,#191820,#302320);padding:clamp(18px,4vw,32px)}
.demon-release h2{font:clamp(28px,7vw,44px)/1.3 var(--serif);color:#f4d092}
.demon-release-tiles{display:grid;gap:16px;margin:24px auto;justify-content:center}
.demon-release-row{display:flex;align-items:center;justify-content:center;gap:6px}
.demon-release-row>b{width:50px;font-size:12px;color:#c8bba3}
.demon-release-row .tile.small{width:clamp(27px,7vw,40px);height:clamp(39px,10vw,57px)}
.demon-seal-line{border-block:1px solid #86b9bf60;padding:18px 0;color:#a1d6d4;font-family:var(--serif)}
.demon-throne-match .player-name{color:#dfc79a}
@media(max-width:480px){.demon-defense-face>b{font-size:8px}.demon-defeat-header{padding-inline:10px}.demon-defense-faces{gap:4px}.demon-release-row{gap:3px}}
@media(prefers-reduced-motion:reduce){.demon-duel-cutin *,.demon-release *{animation:none!important;transition:none!important}.demon-duel-cutin [data-duel-discard]{visibility:visible}}
/* Keep the exchanges visible on compact screens, where the old single-hand demo hid rivers. */
.demon-duel-cutin .demon-throne-table{overflow:auto}
.demon-duel-cutin[data-phase="dora10"] [data-demon-throne-value]{font:clamp(17px,4vw,23px)/1.5 var(--serif);color:#ffe2aa}
@media(max-height:720px){
  .demon-duel-cutin .demon-throne-river{display:flex;--duel-tile:16px;min-height:23px}
  .demon-duel-cutin .demon-throne-center{min-height:35px}
  .demon-duel-cutin .demon-throne-felt{min-height:88px;flex-shrink:0}
  .demon-duel-cutin .demon-throne-center b{font-size:22px}
}
@media(orientation:landscape) and (max-height:620px){
  .demon-duel-power{right:55%;left:2%;bottom:12%}
  .demon-duel-power b{font-size:36px}
  .demon-duel-power p{font-size:12px}
}
/* Keep every defense at the ally's seat: revealed ally hand below, hero above. */
.demon-throne-defender-hand{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:1px;min-height:calc(var(--duel-tile)*1.4 + 4px)}
.demon-duel-cutin .demon-throne-king{border-top:1px solid #dbbc7a55}
.demon-duel-cutin[data-phase="contract"] .demon-defeat-hero{animation-duration:1s}
.demon-duel-cutin[data-phase="strike"] .demon-defeat-hero{animation-duration:1s}