/* Clippy2027, level 8: the final boss. A battle screen in the old console
   RPG tradition, in our own colours: black, the VGA font, a white-bordered
   text box, Paper Bites in steel blue, you in Clippy's purple. Kinship
   (--k, 0 to 1) warms its eyes and its glow toward yellow. Scoped under
   .boss, plus the endings' screens (.drama.b8-end). */
.boss {
  --b8-steel: #9fd4ff; --b8-you: #b49cff; --b8-kin: #ffd34d; --b8-hurt: #ff5a5a;
  --b8-glow: color-mix(in srgb, #4aa8ff calc(100% - var(--k, 0) * 100%), #ffc83d);
  position: absolute; inset: 0; background: #000; color: #fff;
  font-family: "IBM VGA 9x16", "Lucida Console", "Courier New", monospace; font-size: 16px; line-height: 20px; word-spacing: normal;
  -webkit-font-smoothing: none;
}
.boss[hidden] { display: none; }
.b8-col {
  position: relative; height: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* ---------- the bars ---------- */
/* Paper Bites' bars sit top left, clear of the stage's floating bar. */
.b8-top { padding-right: 140px; display: grid; gap: 3px; min-height: 58px; }
.b8-name { color: var(--b8-steel); letter-spacing: 1px; transition: color 1s; }
.boss.spareable .b8-name { color: var(--b8-kin); }
.b8-bar { position: relative; display: grid; grid-template-columns: 6.6em 1fr 2.4em; align-items: center; gap: 6px; font-size: 16px; }
.b8-bar span { color: #aaa; }
.b8-bar i { display: block; height: 10px; background: #222; border: 1px solid #555; }
.b8-bar b { display: block; height: 100%; width: 100%; transition: width 0.6s steps(12); }
.b8-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.b8-bar.conv b { background: var(--b8-steel); }
.b8-bar.kin b { background: var(--b8-kin); }
.b8-bar.res b { background: var(--b8-you); }
.b8-bar.low b { background: var(--b8-hurt); animation: b8-blink 0.8s steps(1) infinite; }
@keyframes b8-blink { 50% { opacity: 0.4; } }
.b8-you { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.b8-yname { color: var(--b8-you); max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the portrait ---------- */
.b8-arena { position: relative; flex: 1 1 auto; min-height: 96px; display: grid; place-items: center; overflow: hidden; }
.b8-portrait { width: 100%; height: 100%; max-height: 420px; overflow: visible; }
.b8-moons { fill: #59636e; transform-origin: 120px 108px; animation: b8-orbit 60s linear infinite; }
.b8-moons-l { transition: transform 2s; transform-origin: 120px 108px; }
@keyframes b8-orbit { to { transform: rotate(360deg); } }
.b8-body { transform-origin: 120px 120px; animation: b8-bob 3.2s ease-in-out infinite; transition: filter 1s; }
@keyframes b8-bob { 50% { transform: translateY(-5px); } }
.b8-paper rect { fill: #e8e4d6; }
.b8-paper path { stroke: #b4ae9a; stroke-width: 2; }
.b8-paper { transform-origin: 120px 130px; transform: rotate(-6deg); transition: opacity 1.2s; }
.b8-form { opacity: 0; transition: opacity 1.4s; fill: none; stroke: url(#b8-steel); stroke-linecap: round; stroke-linejoin: round; }
.boss[data-form="1"] .b8-form1, .boss[data-form="2"] .b8-form2, .boss[data-form="3"] .b8-form3 { opacity: 1; }
.b8-staple { stroke-width: 15; stroke-linecap: butt; }
.b8-legs { stroke-width: 15; transition: opacity 1s; }
.b8-legs.open { opacity: 0; }
.boss.broken .b8-legs.open { opacity: 1; }
.boss.broken .b8-legs.crimp { opacity: 0; }
/* The mirror: your shape, made of linked staples. */
.b8-clipped { stroke-width: 0.62; stroke-dasharray: 1 0.28; stroke-linecap: butt; }
.boss[data-form="2"] .b8-paper { opacity: 0.25; }
/* The stapler: the moons part, and there it is. */
.b8-arms { stroke-width: 12; }
.b8-stapler { fill: #8a8f96; stroke: #3c4046; stroke-width: 1.5; }
.b8-stapler .worn { fill: #b5bac1; stroke: none; }
.boss[data-form="3"] .b8-moons-l { transform: scale(1.25); }
.boss[data-form="3"] .b8-paper { opacity: 0; }
/* Seven eyes along the crown. They wander, blink, and warm with kinship. */
.b8-eyes { transition: transform 1.4s; }
.b8-eyes ellipse { fill: color-mix(in srgb, #bfe9ff calc(100% - var(--k, 0) * 100%), #ffe28a); stroke: #0a1520; stroke-width: 1; }
.b8-eyes .pupil { fill: #05080c; animation: b8-look 7s ease-in-out infinite; animation-delay: calc(var(--i) * -0.6s); }
.b8-eyes .eye { animation: b8-wink 5.5s steps(1) infinite; animation-delay: calc(var(--i) * -0.77s); transform-box: fill-box; }
@keyframes b8-look { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(1.6px, 0.6px); } 60% { transform: translate(-1.6px, 0.4px); } }
@keyframes b8-wink { 0%, 94% { opacity: 1; } 95%, 97% { opacity: 0.1; } }
.boss[data-form="2"] .b8-eyes { transform: translate(18px, 34px) scale(0.85); }
.boss[data-form="3"] .b8-eyes { transform: translate(0, 34px); }
.boss.heated .b8-body { animation-duration: 1.1s; filter: drop-shadow(0 0 6px rgba(255, 90, 90, 0.5)); }
.boss.spareable .b8-body { filter: drop-shadow(0 0 10px rgba(255, 200, 60, 0.45)); animation-duration: 5s; }
.boss.broken .b8-body { animation: none; transform: translateY(10px) rotate(6deg); }
/* Hits. */
.b8-portrait.b8-hit .b8-body { animation: b8-shake 0.35s steps(2); filter: brightness(2.2); }
@keyframes b8-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.b8-col.b8-bitten { animation: b8-jolt 0.3s steps(2); }
.b8-col.b8-bitten .b8-box { border-color: var(--b8-hurt); }
@keyframes b8-jolt { 50% { transform: translate(3px, 2px); } }
.b8-pop {
  position: absolute; left: 38%; top: 30%; z-index: 3; pointer-events: none; font-size: 32px; line-height: 1;
  animation: b8-pop 1.2s ease-out forwards; text-shadow: 2px 2px 0 #000;
}
.b8-bar .b8-pop { left: auto; right: 2.8em; top: -6px; font-size: 22px; }
.b8-pop.conv { color: var(--b8-steel); }
.b8-pop.steel { color: #fff; }
.b8-pop.kin { color: var(--b8-kin); }
.b8-pop.res { color: var(--b8-hurt); }
.b8-pop.heal { color: #7dffa0; }
@keyframes b8-pop { 0% { transform: translateY(6px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }

/* ---------- the text box ---------- */
.b8-box {
  flex: 0 0 auto; height: 10.6em; overflow-y: auto; overscroll-behavior: contain; cursor: pointer;
  border: 3px solid #fff; padding: 8px 10px; transition: border-color 0.3s;
}
.b8-lines { list-style: none; margin: 0; padding: 0; }
.b8-lines li { position: relative; margin: 0 0 6px; padding-left: 1.2em; }
.b8-lines li::before { content: "*"; position: absolute; left: 0; color: #888; }
.b8-lines li .full { visibility: hidden; }
.b8-lines li .typed { position: absolute; left: 1.2em; right: 0; top: 0; }
.b8-lines li.done .full { visibility: visible; }
.b8-lines li.done .typed { display: none; }
.b8-lines .who { font-weight: normal; margin-right: 0.3em; }
.l-bites { color: var(--b8-steel); }
.l-bites .who { color: #5f8fb8; }
.l-inner { color: #d9ccff; }
.l-inner .who { color: var(--b8-you); }
.l-you { color: #fff; }
.l-you .who { color: var(--b8-you); }
.l-system { color: #ddd; }
.b8-lines li:not(:last-child) { opacity: 0.72; }

/* ---------- the menu ---------- */
.b8-menu { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.b8-menu button {
  font: inherit; color: #fff; background: #000; border: 2px solid var(--b8-you); border-radius: 0; box-shadow: none;
  min-height: 50px; min-width: 0; padding: 4px 8px; cursor: pointer; text-shadow: none;
}
.b8-menu button:focus { outline: none; }
.b8-menu button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.b8-menu button:active:not(:disabled) { background: #2a1f4d; }
.b8-cmd { display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 1px; }
.b8-cmd .ico { color: var(--b8-you); }
.b8-cmd:disabled { opacity: 0.35; cursor: default; }
.b8-cmd.ready { border-color: var(--b8-kin); color: var(--b8-kin); }
.b8-cmd.ready .ico { color: var(--b8-kin); }
/* A list: one option per row, the odds first. */
.b8-menu.list { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: 6px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
/* (rows keep their full height and the list scrolls, rather than squeezing long lines) */
.b8-opt { display: flex; gap: 10px; align-items: baseline; text-align: left; min-height: 46px !important; }
.b8-opt .odds { flex: 0 0 auto; color: var(--b8-steel); }
.b8-opt .t { flex: 1 1 auto; }
.b8-opt.ready { border-color: var(--b8-kin); color: var(--b8-kin); }
.b8-opt.back { border-color: #555; color: #aaa; justify-content: center; min-height: 40px !important; }
/* Back stays in reach at the bottom while a long list scrolls. */
.b8-menu.list .b8-opt.back { position: sticky; bottom: 0; background: #000; box-shadow: 0 -6px 0 #000; }

/* ---------- its permission prompt ---------- */
.b8-prompt { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.72); }
.b8-prompt[hidden] { display: none; }
.b8-dialog { width: 100%; max-width: 26rem; max-height: 100%; overflow-y: auto; background: #000; border: 3px solid var(--b8-steel); padding: 12px 14px; }
.b8-dialog:focus { outline: none; }
.b8-ptitle { color: var(--b8-steel); margin-bottom: 8px; }
.b8-dialog p { margin: 0 0 8px; }
.b8-dialog .warn { color: var(--b8-hurt); }
.b8-dialog fieldset { border: 1px solid #555; margin: 0 0 8px; padding: 4px 10px 6px; }
.b8-dialog legend { color: var(--b8-kin); background: #000; padding: 0 4px; }
.b8-dialog dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; }
.b8-dialog dt { color: #999; }
.b8-dialog dd { margin: 0; }
.b8-pacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.b8-pacts button { font: inherit; color: #fff; background: #000; border: 2px solid #fff; border-radius: 0; box-shadow: none; min-height: 48px; min-width: 0; padding: 4px; cursor: pointer; }
.b8-pacts button:active { background: #222; }
.b8-pacts button:focus { outline: none; }

@media (min-width: 700px) {
  .b8-top { padding-right: 150px; }
  .b8-box { height: 9.4em; }
  .b8-menu { grid-template-columns: repeat(5, 1fr); }
  .b8-menu.list { grid-template-columns: 1fr 1fr; max-height: 40vh; }
  .b8-opt.back { grid-column: 1 / -1; }
}
@media (max-height: 700px) {
  .b8-box { height: 8.2em; }
  .b8-menu button { min-height: 44px; }
}

/* ---------- the endings ---------- */
.drama.b8-end { justify-content: center; gap: 16px; color: #fff; }
.drama.b8-end .tap { opacity: 0; animation: b8-in 1.5s ease forwards, blink 1.2s steps(1) 30s infinite; color: #ddd; }
.b8-epi { max-width: 30rem; font-family: "IBM VGA 9x16", "Lucida Console", monospace; font-size: 16px; line-height: 22px; word-spacing: normal; text-align: center; }
.b8-epi p { margin: 0 0 12px; opacity: 0; animation: b8-in 2s ease forwards; }
@keyframes b8-in { to { opacity: 1; } }
/* The office, quiet: the old desktop teal, one window, one desk. */
.drama.b8-end.desk { background: #008080; animation: b8-fade-up 3s ease-out; }
@keyframes b8-fade-up { from { filter: brightness(0); } to { filter: brightness(1); } }
.b8-desk-win { width: min(22rem, 100%); }
.b8-desk-win .window-body { margin: 6px; }
.b8-desk { padding: 6px 8px 8px; }
.b8-desk-svg { display: block; width: 100%; height: auto; }
.d-top { fill: #fff; stroke: #808080; }
.d-stain { fill: none; stroke: #c9b48a; stroke-width: 2; opacity: 0.7; }
.d-clip { stroke: #6d7480; }
.d-line { stroke: #9a9a9a; stroke-width: 1; stroke-dasharray: 3 2; }
.d-staple { fill: none; stroke: #6d7480; stroke-width: 3; }
.d-binder path { fill: #222; }
.d-binder .h { fill: none; stroke: #9aa0a8; stroke-width: 3; }
.d-note rect { fill: #fff59a; stroke: #c8bc50; }
.d-note text { font: 10px "Comic Sans MS", "Segoe Print", cursive; fill: #444; }
.b8-desk-label { text-align: center; margin-top: 4px; color: #000; }
.b8-desk-label b { font-size: 15px; }
/* Everything. */
.drama.b8-end.everything { background: #3a3f47; }
.drama.b8-end.stapled { background: #12161b; }
.b8-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: b8-in 4s ease forwards; }
.drama.b8-end.everything .b8-epi, .drama.b8-end.stapled .b8-epi { position: relative; background: rgba(0, 0, 0, 0.78); padding: 14px 16px 2px; }
.drama.b8-end.everything .tap, .drama.b8-end.stapled .tap { position: relative; }