/* A boss night (boss-night.js): his entrance, his health in the status bar, the banner for each phase,
   the face-off with its burning fuse, the Creed that finishes him, and the flashes between. Loaded after
   the looks, and every rule starts html:root body so it outranks their dialog rules too.
   His color is set by tokens (Arius crimson by default); the gold of the last words is the abbey's. */
:root { --boss:#9b3d4a; --boss-hot:#e0707e; --boss-ink:#ffe3e7; --boss-serif:var(--lk-serif, var(--serif));
  --boss-kicker:#d99aa3; --boss-title:#e8b4ab; --boss-shine:#d0405a; --boss-halo:#d0405acc; --boss-shade:#9b3d4a99; --boss-dim:#9b3d4a55; --boss-ring:#9b3d4a66;
  --boss-btn:#b8404f; --boss-btn-deep:#8a2636; --boss-btn-edge:#f08a96; --boss-btn-ink:#fff3ea; --boss-btn-glow:#c0405a66;
  --boss-bar-a:#2a0f15f2; --boss-bar-b:#170b0ef2; --boss-bar-edge:#c0505e; --boss-phase-ink:#e8b7bd;
  --boss-seg:#ff8795; --boss-seg-deep:#b8283e; --boss-seg-glow:#e0506099; --boss-spent:#3b2328; --boss-spent-edge:#6d3a42; --boss-line:#f3dcc9;
  --boss-duel-edge:#b34a58; --boss-duel-wash:#24121699; --boss-duel-ground:#181012; --boss-duel-cast:#5a0d1a99; --boss-portrait:#b8404f88;
  --boss-fuse-end:#ff9a66; --boss-fuse-low:#ff4c60; --boss-claim:#2b1519; --boss-answer:#2c1a1e; --boss-answer-ink:#f6e6dc; --boss-blast:#b0203a99; }
/* Each boss's own colors, set on the root while his night is played (main.js): Pelagius river-pale, Nestorius indigo. */
:root[data-boss="pelagius"] { --boss:#6f8fa3; --boss-hot:#a9cbe0; --boss-ink:#eef7fc;
  --boss-kicker:#a8c3d3; --boss-title:#bcd3e0; --boss-shine:#7fb2d0; --boss-halo:#7fb2d0cc; --boss-shade:#6f8fa399; --boss-dim:#6f8fa355; --boss-ring:#6f8fa366;
  --boss-btn:#5f8399; --boss-btn-deep:#3e5d70; --boss-btn-edge:#a9d0e6; --boss-btn-ink:#f2f9fc; --boss-btn-glow:#5f8fb066;
  --boss-bar-a:#0f1c24f2; --boss-bar-b:#0b1218f2; --boss-bar-edge:#6f9ab3; --boss-phase-ink:#b9d2e0;
  --boss-seg:#d6ecf7; --boss-seg-deep:#6f9ab3; --boss-seg-glow:#8fc0dd99; --boss-spent:#1d2a31; --boss-spent-edge:#3d5666; --boss-line:#dce9f0;
  --boss-duel-edge:#5f8aa3; --boss-duel-wash:#12202899; --boss-duel-ground:#0f1519; --boss-duel-cast:#0d2a3a99; --boss-portrait:#6f9ab388;
  --boss-fuse-end:#d6ecf7; --boss-fuse-low:#8fd0ff; --boss-claim:#15222a; --boss-answer:#18242b; --boss-answer-ink:#e6f0f5; --boss-blast:#3a6f9099; --boss-duty:#bcd3e0; --boss-mark:#8fb3c9; }
:root[data-boss="nestorius"] { --boss:#3d5285; --boss-hot:#8fa5e3; --boss-ink:#e6ebff;
  --boss-kicker:#a3b0dc; --boss-title:#b8c2e6; --boss-shine:#5a72c8; --boss-halo:#5a72c8cc; --boss-shade:#3d528599; --boss-dim:#3d528555; --boss-ring:#3d528566;
  --boss-btn:#4a63a8; --boss-btn-deep:#2c3d72; --boss-btn-edge:#9fb3e8; --boss-btn-ink:#eef1ff; --boss-btn-glow:#4a63c066;
  --boss-bar-a:#11152af2; --boss-bar-b:#0b0d1af2; --boss-bar-edge:#5a6fb0; --boss-phase-ink:#b7c1e6;
  --boss-seg:#c3d0ff; --boss-seg-deep:#4a63a8; --boss-seg-glow:#7f96e099; --boss-spent:#1e2238; --boss-spent-edge:#3a4470; --boss-line:#dde2f5;
  --boss-duel-edge:#4f62a0; --boss-duel-wash:#14182c99; --boss-duel-ground:#0f111a; --boss-duel-cast:#101a4a99; --boss-portrait:#4a63a888;
  --boss-fuse-end:#b8c6ff; --boss-fuse-low:#7f96ff; --boss-claim:#171b2e; --boss-answer:#191d30; --boss-answer-ink:#e6e9f6; --boss-blast:#2a3a8a99; --boss-duty:#b8c2e6; --boss-mark:#8e9fd6; }
:root[data-boss="theophilus"] { --boss:#5e3a73; --boss-hot:#c9a8de; --boss-ink:#f4ecfa;
  --boss-kicker:#c2abd3; --boss-title:#d6c4e3; --boss-shine:#8a5aa8; --boss-halo:#8a5aa8cc; --boss-shade:#5e3a7399; --boss-dim:#5e3a7355; --boss-ring:#5e3a7366;
  --boss-btn:#74498f; --boss-btn-deep:#4a2c5e; --boss-btn-edge:#c9a8de; --boss-btn-ink:#f6effb; --boss-btn-glow:#7a4a9866;
  --boss-bar-a:#1d1324f2; --boss-bar-b:#120b17f2; --boss-bar-edge:#8a62a6; --boss-phase-ink:#d3c1e0;
  --boss-seg:#ecdff5; --boss-seg-deep:#74498f; --boss-seg-glow:#b48fd099; --boss-spent:#2a1f31; --boss-spent-edge:#4d3a5c; --boss-line:#eee6f3;
  --boss-duel-edge:#7a5694; --boss-duel-wash:#20142899; --boss-duel-ground:#140e18; --boss-duel-cast:#2e124a99; --boss-portrait:#74498f88;
  --boss-fuse-end:#efe7d6; --boss-fuse-low:#d9b8ff; --boss-claim:#22182a; --boss-answer:#251b2d; --boss-answer-ink:#f1eaf5; --boss-blast:#5a2a7a99; --boss-duty:#d6c4e3; --boss-mark:#b597cc; }

/* The entrance: the abbey shows through above, where the camera has gone to him; his name comes up below. */
html:root body .overlay:has(.boss-intro) { align-items:flex-end; padding:0; background:linear-gradient(to bottom, #07030514 0%, #0703052e 34%, #0b0608e8 52%, #0b0608fc 62%, #0b0608 100%); }
html:root body .overlay:has(.boss-intro)::before { content:''; position:absolute; inset:0; background:#000; pointer-events:none; animation:boss-lift 2s ease-out forwards; }
html:root body .dialog.boss-intro { position:relative; width:min(560px, 100%); max-height:none; overflow:visible; margin:0 auto; padding:20px 22px calc(22px + env(safe-area-inset-bottom, 0px)); text-align:center; background:none; border:0; box-shadow:none; }
html:root body .boss-intro > * { animation:boss-rise .8s ease-out both; }
html:root body .boss-intro > :nth-child(1) { animation-delay:.5s; }
html:root body .boss-intro > :nth-child(2) { animation:boss-name 1.1s cubic-bezier(.2,.9,.25,1.15) .9s both; }
html:root body .boss-intro > :nth-child(3) { animation-delay:1.4s; }
html:root body .boss-intro > :nth-child(4) { animation-delay:2s; }
html:root body .boss-intro > :nth-child(5) { animation-delay:2.6s; }
html:root body .boss-intro > :nth-child(6) { animation-delay:3s; }
html:root body .boss-kicker { margin:0 0 4px!important; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--boss-kicker)!important; }
html:root body .dialog .boss-name { margin:0!important; font:600 64px/1 var(--boss-serif); letter-spacing:.08em; text-transform:uppercase; color:var(--boss-ink); text-shadow:0 0 24px var(--boss-halo), 0 0 60px var(--boss-shade), 0 3px 4px #000; }
html:root body .boss-title { margin:6px 0 14px!important; font:italic 19px/1.3 var(--boss-serif); color:var(--boss-title)!important; }
html:root body .boss-taunt { margin:0 auto 14px; max-width:26em; padding:0; border:0; font:italic 20px/1.45 var(--boss-serif); color:#f3e5d2; }
html:root body .boss-rules p { margin:0 0 8px!important; font-size:14px; line-height:1.5; color:#d7cdb6!important; }
html:root body .boss-rules .small-note { font-size:13px!important; color:#b9ad97!important; }
html:root body .dialog .boss-go, html:root body .creed-dialog .primary { margin-top:6px; background:linear-gradient(var(--boss-btn), var(--boss-btn-deep)); border-color:var(--boss-btn-edge); color:var(--boss-btn-ink); font-size:15px; min-height:50px; letter-spacing:.04em; box-shadow:0 0 22px var(--boss-btn-glow); }

/* His health: a lit piece in his color for each claim still standing. */
html:root body .boss-bar { display:none; }
html:root body .statusbar.boss-mode { background:linear-gradient(90deg, var(--boss-bar-a), var(--boss-bar-b))!important; border-color:var(--boss-bar-edge)!important; box-shadow:0 0 16px var(--boss-dim); }
html:root body .statusbar.boss-mode > :not(.boss-bar) { display:none!important; }
html:root body .statusbar.boss-mode .boss-bar { display:flex; align-items:center; gap:8px; height:100%; min-width:0; flex:1 1 auto; width:100%; }
html:root body .boss-bar-name { font:600 13px/1 var(--boss-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--boss-ink); text-shadow:0 0 8px var(--boss-shine); }
html:root body .boss-bar-phase { font-size:11px; color:var(--boss-phase-ink); white-space:nowrap; }
html:root body .duel-segs { display:flex; gap:4px; flex:1; min-width:54px; }
html:root body .duel-segs i { flex:1; height:8px; min-width:14px; border-radius:2px; background:linear-gradient(var(--boss-seg), var(--boss-seg-deep)); box-shadow:0 0 8px var(--boss-seg-glow); }
html:root body .duel-segs i.broken { background:var(--boss-spent); box-shadow:inset 0 0 0 1px var(--boss-spent-edge); }
html:root body .duel-segs i.fresh { animation:boss-shatter 1s ease-out; }
/* Dawn, the one clock his night has, counts down in the role chip whichever way the phone is held,
   big enough to read at a glance, and turns amber with a gentle pulse in its last minute. */
html:root.touch-layout[data-boss] .calling #day-label { display:inline; font:600 12px/1.2 var(--lk-sans, Arial); color:#e6dec8; font-variant-numeric:tabular-nums; white-space:nowrap; }
html:root[data-boss] #day-label.dawn-near, html:root.touch-layout[data-boss] .calling #day-label.dawn-near { color:#f5b95f; animation:dawn-near 1.1s ease-in-out infinite alternate; }

/* Each phase is announced across the abbey. */
/* It sits on a soft dark backing, so it reads over the floor and the name plates, and goes again soon. */
html:root body .boss-banner { position:absolute; left:50%; top:34%; z-index:5; width:max-content; max-width:min(560px, calc(100% - 32px)); padding:8px 18px 10px; border-radius:18px; background:#0b0a0eb3; box-shadow:0 0 22px 12px #0b0a0eb3; transform:translate(-50%, -50%); text-align:center; pointer-events:none; opacity:0; }
html:root body .boss-banner.show { animation:boss-banner 3.2s ease-out both; }
html:root body .boss-banner strong { display:block; font:600 30px/1.1 var(--boss-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--boss-ink); text-shadow:0 0 18px var(--boss-shine), 0 2px 3px #000; }
html:root body .boss-banner span { display:block; margin-top:8px; font:italic 16px/1.4 var(--boss-serif); color:var(--boss-line); text-shadow:0 1px 3px #000, 0 0 12px #000; }

/* The face-off. */
html:root body .dialog.boss-duel { border-color:var(--boss-duel-edge); background:linear-gradient(var(--boss-duel-wash), #0000 160px), var(--boss-duel-ground); box-shadow:0 0 0 1px var(--boss-ring), 0 20px 70px var(--boss-duel-cast); }
html:root body .duel-head { display:flex; align-items:center; gap:14px; margin:0 0 12px; text-align:left; }
html:root body .duel-head h2 { margin:0 0 6px!important; }
html:root body .duel-head .case-kicker { margin:0 0 2px!important; }
html:root body .duel-portrait { width:68px; height:68px; flex:none; display:grid; place-items:center; border-radius:50%; background:radial-gradient(var(--boss-portrait), #0000 70%); }
html:root body .duel-portrait svg, html:root body .duel-portrait .monk-badge { width:58px; height:58px; transition:transform .6s, filter .6s, opacity .6s; }
html:root body .duel-fuse { height:7px; margin:0 0 12px; border-radius:4px; overflow:hidden; background:var(--boss-spent); }
html:root body .duel-fuse i { display:block; width:100%; height:100%; background:linear-gradient(90deg, var(--boss-seg-deep), var(--boss-fuse-end)); transition:width .1s linear; }
html:root body .duel-fuse.low i { background:var(--boss-fuse-low); animation:boss-pulse .45s ease-in-out infinite alternate; }
html:root body .boss-duel .dispute-claim { font-size:20px; border-left-color:var(--boss-hot); background:var(--boss-claim); }
/* His choices are in his color and the last words gold, not the abbey's green. */
html:root body .boss-duel .dispute-answer { background:var(--boss-answer); border-color:var(--boss-spent-edge); color:var(--boss-answer-ink); }
html:root body .creed-dialog .creed-piece { background:#2a2118; border-color:#8a6a3a; color:#ffe6ad; }
html:root body .boss-duel.landed .duel-portrait { animation:boss-reel .7s ease-out; }
html:root body .boss-duel.missed .duel-portrait { animation:boss-gloat .8s ease-out; }

/* The Creed. */
html:root body .creed-line { min-height:3.1em; margin:4px 0 12px!important; font:italic 19px/1.5 var(--boss-serif); color:#ffe6ad!important; text-shadow:0 0 12px #e0b04a55; }
html:root body .creed-line span { animation:boss-rise .4s ease-out both; }
html:root body .creed-pieces { display:flex; flex-wrap:wrap; gap:8px; }
html:root body .dialog .creed-piece { flex:1 1 40%; min-height:48px; font-size:15px; white-space:normal; }
html:root body .creed-piece.said { opacity:.25; }
html:root body .creed-piece.shake { animation:boss-shake .35s; }
html:root body .creed-end { text-align:center; }
html:root body .creed-end .duel-portrait { width:92px; height:92px; margin:0 auto 12px; }
html:root body .creed-end .duel-portrait svg, html:root body .creed-end .duel-portrait .monk-badge { width:78px; height:78px; }
html:root body .creed-end.kneels .duel-portrait { background:radial-gradient(#f4d58a66, #0000 70%); }
html:root body .creed-end.kneels .duel-portrait svg { transform:translateY(12px) scale(.86); filter:saturate(.55) brightness(1.1); }
html:root body .creed-end.flees .duel-portrait svg { transform:translateX(26px); opacity:.4; }
html:root body .creed-line.whole { min-height:0; }

/* Flashes: a blow landing, a song taking brothers, and the light when it is over. */
#boss-flash { position:fixed; inset:0; z-index:30; pointer-events:none; opacity:0; }
#boss-flash.hit { background:radial-gradient(circle at 50% 45%, #fffbeedd, #ffe9b566 40%, #0000 75%); animation:boss-fade .8s ease-out; }
#boss-flash.blast { background:radial-gradient(circle, #0000 42%, var(--boss-blast) 100%); animation:boss-fade 1.2s ease-out; }
#boss-flash.dawn { background:radial-gradient(circle at 50% 40%, #fffdf2cc, #ffe7a88c 45%, #ffd27a33 85%); animation:boss-dawn 2.6s ease-out; }

@keyframes boss-lift { 0%, 30% { opacity:1; } 100% { opacity:0; } }
@keyframes boss-rise { from { opacity:0; transform:translateY(14px); } }
@keyframes boss-name { from { opacity:0; transform:scale(1.5); filter:blur(8px); letter-spacing:.3em; } }
@keyframes boss-banner { 0% { opacity:0; transform:translate(-50%, -38%) scale(1.15); } 12% { opacity:1; transform:translate(-50%, -50%) scale(1); } 62% { opacity:1; } 100% { opacity:0; } }
@keyframes boss-banner-top { 0% { opacity:0; transform:translate(-50%, 10px) scale(1.1); } 12% { opacity:1; transform:translate(-50%, 0) scale(1); } 62% { opacity:1; } 100% { opacity:0; } }
@keyframes boss-shatter { 0% { background:#fff; box-shadow:0 0 20px #fff; transform:scale(1.35); } 35% { transform:scale(1.1) rotate(5deg); } 100% { transform:none; } }
@keyframes boss-pulse { to { opacity:.55; } }
@keyframes dawn-near { to { color:#ffd58f; text-shadow:0 0 9px #f5b95fb3; } }
@keyframes boss-reel { 20% { transform:translateX(-9px) rotate(-9deg); } 40% { transform:translateX(7px) rotate(6deg); } 60% { transform:translateX(-4px); } }
@keyframes boss-gloat { 30% { transform:scale(1.12); } }
@keyframes boss-shake { 25% { transform:translateX(-6px); } 50% { transform:translateX(5px); } 75% { transform:translateX(-3px); } }
@keyframes boss-fade { from { opacity:1; } to { opacity:0; } }
@keyframes boss-dawn { 0% { opacity:0; } 18% { opacity:1; } 100% { opacity:0; } }

@media (max-width:420px) {
  html:root body .dialog .boss-name { font-size:52px; }
  html:root body .boss-taunt { font-size:18px; }
  html:root body .boss-banner strong { font-size:25px; }
  /* A size down, so the countdown still fits beside "The Faithful" in the chip under his bar. */
  html:root.touch-layout[data-boss] .calling #day-label { font-size:11px; }
}
/* Upright and narrower still, it goes under the name, the cross beside both (look-candlelit.css lays the chip out). */
@media (max-width:389px) and (orientation:portrait) {
  html:root.touch-layout[data-boss] .calling .role-symbol { grid-row:span 2; }
  html:root.touch-layout[data-boss] .calling #day-label { grid-column:2; }
}
/* Wherever the status bar is narrower than its full width (a phone upright, or a small one sideways), his name sits
   over his claims, which run the bar's whole width, so a long name like Theophilus's never pushes them out. */
@media (max-width:560px) {
  html:root body .boss-bar-phase { display:none; }
  html:root body .statusbar.boss-mode .boss-bar { flex-direction:column; align-items:stretch; justify-content:center; gap:5px; }
  /* (The padding keeps the name's glow inside its own clipped box, so it never shows as a hard-edged rectangle.) */
  html:root body .boss-bar-name { font-size:12px; letter-spacing:.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:8px 10px; margin:-8px -10px; }
  html:root body .duel-segs { flex:none; min-width:0; width:100%; }
  html:root body .duel-segs i { height:6px; min-width:0; }
}
/* A phone held sideways. */
@media (max-height:500px) and (min-width:600px) {
  /* His entrance: he stands on the left, where the camera has gone to him, and his words come up on the
     right, dawn time and all. */
  html:root body .overlay:has(.boss-intro) { align-items:center; justify-content:flex-end; background:linear-gradient(to right, #07030500 0%, #07030522 30%, #0b0608d6 46%, #0b0608f5 56%, #0b0608 100%); }
  html:root body .dialog.boss-intro { width:min(540px, 62%); max-height:100%; overflow-y:auto; margin:0; padding:10px 18px 12px; }
  html:root body .dialog .boss-name { font-size:38px; }
  html:root body .boss-title { display:none; }
  html:root body .boss-taunt { margin-bottom:8px; font-size:17px; }
  html:root body .boss-rules p { margin-bottom:6px!important; font-size:13px; line-height:1.45; }
  html:root body .boss-rules .small-note { font-size:13px!important; }
  html:root body .dialog .boss-go { min-height:46px; }
  html:root body:has(.boss-intro) :is(.world-hint, .map-heading, .touch-joystick, .actions) { visibility:hidden; }
  /* Each phase's banner hangs just under the top bar, clear of you and him in the middle of the view. */
  html:root body .boss-banner { top:96px; max-width:min(600px, calc(100% - 40px)); padding:5px 16px 7px; transform:translateX(-50%); }
  html:root body .boss-banner.show { animation-name:boss-banner-top; }
  html:root body .boss-banner strong { font-size:21px; }
  html:root body .boss-banner span { margin-top:3px; font-size:14px; line-height:1.3; }
  /* The face-off: the fuse burns along the top, his claim on the left and the answers on the right, all
     in view at once, so no one scrolls while it burns. */
  html:root body .dialog.boss-duel { width:min(860px, 100%); padding:12px 18px 14px; }
  html:root body .dialog.boss-duel:has(.dispute-answers) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); grid-template-rows:auto auto auto 1fr; column-gap:18px; align-items:start; }
  html:root body .boss-duel .duel-fuse { grid-column:1 / -1; grid-row:1; height:6px; margin:0 0 10px; }
  html:root body .boss-duel .duel-head { grid-column:1; grid-row:2; gap:10px; margin:0 0 8px; }
  html:root body .boss-duel .duel-head h2 { margin:0 0 4px!important; font-size:23px; }
  html:root body .boss-duel .duel-portrait { width:50px; height:50px; }
  html:root body .boss-duel .duel-portrait svg, html:root body .boss-duel .duel-portrait .monk-badge { width:44px; height:44px; }
  html:root body .boss-duel .dispute-claim { grid-column:1; grid-row:3; margin:0 0 6px; padding:8px 12px; font-size:16px; line-height:1.4; }
  html:root body .boss-duel .dispute-prompt { grid-column:1; grid-row:4; margin:0!important; font-size:13px!important; }
  html:root body .boss-duel .dispute-answers { grid-column:2; grid-row:2 / span 3; gap:6px; }
  html:root body .boss-duel .dispute-answer { min-height:44px; padding:8px 12px!important; font-size:14px!important; line-height:1.35; }
  html:root body .boss-duel .dispute-verdict { font-size:16px; }
  html:root body .boss-duel .dispute-note { font-size:13px!important; }
  /* The Creed: its pieces three to a row under the line they build. */
  html:root body .creed-dialog .duel-head { margin:0 0 4px; }
  html:root body .creed-dialog .dispute-prompt { font-size:13px!important; }
  html:root body .creed-line { min-height:2.8em; margin:2px 0 8px!important; font-size:16px; line-height:1.4; }
  html:root body .dialog .creed-piece { flex-basis:30%; min-height:44px; padding:6px 10px; font-size:14px; }
  html:root body .creed-end .duel-portrait { width:58px; height:58px; margin:0 auto 4px; }
  html:root body .creed-end .duel-portrait svg, html:root body .creed-end .duel-portrait .monk-badge { width:50px; height:50px; }
  html:root body .creed-end h2 { font-size:24px; }
  html:root body .creed-end .lead { margin:4px 0 10px; font-size:15px; line-height:1.45; }
  /* What closes the card stays pinned in view, on a fade of the card's own ground. */
  html:root body .boss-duel :is(#dispute-done, #creed-done) { position:sticky; bottom:0; box-shadow:0 -10px 16px 6px var(--boss-duel-ground); }
  html:root body .boss-duel #creed-done { box-shadow:0 0 22px var(--boss-btn-glow), 0 -10px 16px 6px var(--boss-duel-ground); }
}
@media (prefers-reduced-motion:reduce) {
  html:root body .boss-intro > *, html:root body .duel-segs i.fresh, html:root body .boss-duel .duel-portrait, html:root body .creed-piece.shake, html:root body .creed-line span, html:root body #day-label.dawn-near { animation:none!important; }
  html:root body .boss-banner.show { animation:boss-fade 3.2s ease-in both; }
  #boss-flash { display:none; }
}