/* Clippy2027, phase 1: the office desk. The inbox bins, the paperclip jar,
   the Clip & file button and the supply desk. Shared styles live in app.css. */

/* ---------- desk ---------- */
/* The desk fills the workspace, and the inbox and jar grow into the room
   (and shrink back when the supply desk needs space under it). */
.desk { flex: 1 1 auto; display: flex; flex-direction: column; }
.supply { flex: 0 0 auto; }
.desk-items { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; }
.desk-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 0; }
.inbox-svg, .jar-svg { width: 100%; max-width: 9rem; flex: 1 1 0; min-height: 3rem; max-height: 9rem; }
.desk-label { max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-label b { font-size: 15px; font-variant-numeric: tabular-nums; }
.desk-label .extra { display: block; min-height: 1.35em; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }   /* reserved, so the desk never changes height */
.desk-label.low b { color: var(--danger); }

.jar-glass { fill: none; stroke: #000; stroke-width: 2; }
.jar-lid { fill: var(--navy); stroke: #000; stroke-width: 1; }
.jar-shine { stroke: #c8d8f0; stroke-width: 3; stroke-linecap: square; }
#jar-fill { transition: y 0.4s, height 0.4s; }

.sheet { fill: #fff; stroke: #000; stroke-width: 1; }
.sheet-line { stroke: #808080; stroke-width: 1.5; }
.tray { fill: none; stroke: #000; stroke-width: 2.5; stroke-linejoin: miter; }
.tray.clippy-tray { stroke: var(--clippy); }
.tray-badge { fill: var(--clippy); }

/* Backlog meter: fills toward Priya's limit; three strikes and the company folds. */
.backlog { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.backlog .progress-indicator { flex: 1; height: 22px; padding: 3px; }
.backlog .progress-indicator.segmented > .progress-indicator-bar { --seg: navy; background-image: linear-gradient(90deg, var(--seg) 10px, transparent 0 2px); background-size: 12px 100%; transition: width 0.3s; }
.backlog-strikes { font-variant-numeric: tabular-nums; letter-spacing: 1px; white-space: nowrap; }
.backlog-strikes .hit { color: var(--danger); font-weight: 700; }
.backlog-strikes .hit.conduct { color: #000; }   /* conduct warnings: they don't clear */
.backlog-strikes .open { color: var(--muted); }
.backlog-note { min-height: 1.35em; text-align: center; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.backlog.warn .segmented > .progress-indicator-bar { --seg: #c08000; }
.backlog.over .segmented > .progress-indicator-bar { --seg: var(--danger); animation: backlog-blink 1s steps(1) infinite; }
.backlog-note.over { color: var(--danger); font-weight: 700; }
@keyframes backlog-blink { 50% { opacity: 0.35; } }

.big-btn { display: block; width: 100%; margin-top: 6px; min-height: 40px; font-size: 15px; font-weight: 700; user-select: none; }
.big-btn.busy { font-weight: 400; font-style: italic; }

.float {
  position: fixed; pointer-events: none; z-index: 40;
  font-weight: 700; color: var(--navy); background: var(--balloon); border: 1px solid #000; padding: 0 4px;
  animation: float-up 0.8s ease-out forwards;
}
@keyframes float-up { to { transform: translateY(-2.5rem); opacity: 0; } }
.shake { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- supply desk ---------- */
.supply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.cell { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 34px; }
.cell.wide { grid-column: 1 / -1; }
.cell button { min-width: 0; padding: 0 8px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { min-width: 34px; padding: 0; font-weight: 700; }
.stepper .inset { min-width: 4rem; text-align: center; }


/* ---------- endings: each one's own screen ---------- */
/* The build-up while the last messages play out. */
.app[data-ending="fire"] { animation: alarm 0.8s steps(1) infinite; }
@keyframes alarm { 50% { box-shadow: inset 0 0 0 9999px rgba(200, 0, 0, 0.25); } }
.app[data-ending="audit"] .pane-left, .app[data-ending="fired"] .pane-left { filter: grayscale(1); transition: filter 2s; }
.app[data-ending="breach"] .feed { animation: jitter 0.25s steps(2) infinite; }
@keyframes jitter { 50% { transform: translateX(1px); } }

/* Out of paperclips: "It's now safe to turn off your computer." */
.drama.safe { background: #000; color: #ff8c00; font-family: "IBM VGA 9x16", "Lucida Console", monospace; font-size: 16px; line-height: 20px; word-spacing: normal; text-align: center; }
.safe-inner { max-width: 34rem; }
.safe-big { font-size: 22px; line-height: 30px; margin: 0 0 28px; text-wrap: balance; }
@media (min-width: 52rem) { .safe-big { font-size: 30px; line-height: 38px; } }
.drama.safe p { margin: 0 0 12px; }

/* Let go: the logon message, on a teal desktop. */
.drama.logon { background: var(--desktop); }
.logon-box { width: 100%; max-width: 24rem; cursor: default; }
.logon-row { display: flex; gap: 12px; align-items: flex-start; }
.logon-icon { width: 32px; height: 32px; flex-shrink: 0; }
.logon-row p { margin: 0 0 8px; }
.logon-list { margin: 0; padding-left: 0; list-style: none; color: #444; }
.logon-actions { display: flex; justify-content: center; margin-top: 12px; }
.logon-actions button { min-width: 90px; }
.drama.logon .tap { color: #fff; }

/* Audited: the statement on tractor-feed paper, line by line, then the stamp. */
.drama.audit { background: #3a3a3a; justify-content: flex-start; padding-top: 32px; }
.printout {
  position: relative; width: 100%; max-width: 30rem; padding: 10px 26px;
  background: repeating-linear-gradient(#fff 0 32px, #dff1df 32px 64px);
  font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; word-spacing: normal; color: #222;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
  -webkit-mask: radial-gradient(circle 4px at 9px 8px, transparent 98%, #000) -1px 0 / 100% 16px repeat-y;
}
.pl { display: grid; grid-template-columns: 5.5em 1fr auto; gap: 8px; opacity: 0; animation: print 0.05s forwards; }
.pl span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl.head { opacity: 1; animation: none; font-weight: 700; margin-bottom: 6px; grid-template-columns: 1fr 1fr 1fr; }
.pl.total { margin-top: 8px; font-weight: 700; color: #b00000; border-top: 1px dashed #444; padding-top: 4px; }
@keyframes print { to { opacity: 1; } }
.stamp {
  position: absolute; right: 8%; top: 38%; padding: 2px 14px; border: 5px solid #c00000; color: #c00000;
  font: 700 46px/1 Impact, "Arial Black", sans-serif; letter-spacing: 4px; transform: rotate(-14deg) scale(3); opacity: 0;
  animation: stamp 0.25s 3s ease-in forwards; mix-blend-mode: multiply;
}
@keyframes stamp { to { transform: rotate(-14deg) scale(1); opacity: 0.85; } }
.drama.audit .tap { color: #fff; }

/* Evacuated: the fire alarm. */
.drama.fire { background: #b00000; color: #fff; animation: siren 0.7s steps(1) infinite; text-align: center; }
@keyframes siren { 50% { background: #3a0000; } }
.fire-big { font: 700 44px/1 Impact, "Arial Black", sans-serif; letter-spacing: 6px; margin: 0 0 12px; }
.fire-sub { font-size: 15px; margin: 0 0 26px; }
.fire-clippy { display: flex; gap: 6px; align-items: flex-start; max-width: 22rem; margin: 0 auto; text-align: left; color: #000; }
.fire-clippy .avatar { width: 22px; height: 22px; color: #fff; flex-shrink: 0; }
.fire-clippy .avatar svg { width: 22px; height: 22px; }
.fire-clippy .bubble { background: var(--balloon); border: 1px solid #000; border-radius: 8px; padding: 5px 8px; }

/* Reply all: the outbox, sending to everyone. */
.drama.breach { background: var(--desktop); }
.outbox { width: 100%; max-width: 28rem; cursor: default; }
.outbox p { margin: 4px 0 8px; }
.outbox .progress-indicator { height: 22px; padding: 3px; }
.outbox .progress-indicator.segmented > .outbox-bar { width: 0; animation: send 2.2s ease-in forwards; }
@keyframes send { to { width: 100%; } }
.outbox-list { height: 9rem; overflow: hidden; margin-top: 8px; padding: 4px 6px; font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; word-spacing: normal; white-space: nowrap; }
.outbox-scroll { animation: outbox 2.4s linear infinite; }
@keyframes outbox { to { transform: translateY(-50%); } }
.outbox-note { color: var(--muted); }
.drama.breach .tap { color: #fff; }

/* Burnout: the screensaver, paperclips drifting across an idle screen. */
.drama.saver { background: #000; color: #fff; }
.drama.saver .fly { position: absolute; left: -60px; color: #8fa8ff; animation: fly linear infinite; }
.drama.saver .fly:nth-child(3n) { color: #c0c0c0; }
.drama.saver .fly:nth-child(4n) { color: #6a4fd8; }
@keyframes fly { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(calc(100vw + 120px), 30vh) rotate(540deg); } }
.saver-text { position: relative; text-align: center; font-family: "IBM VGA 9x16", "Lucida Console", monospace; word-spacing: normal; }
.saver-text p { margin: 0 0 8px; font-size: 26px; line-height: 30px; }
.saver-text .saver-sub { font-size: 16px; line-height: 18px; color: #aaa; }

/* ---------- level 3: the dashboard ---------- */
.dash { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; animation: dash-in 0.6s ease-out; }
@keyframes dash-in { from { opacity: 0; transform: scale(0.98); } }
.dash-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px; }
.dash-total b { font-size: 22px; font-variant-numeric: tabular-nums; }
.dgroup { padding: 4px 8px 6px; display: flex; flex-direction: column; gap: 3px; }
.drow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.drow > span:first-child { white-space: nowrap; }
.drow .inset { min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.drow > b { font-weight: normal; font-variant-numeric: tabular-nums; }
.dctl { display: flex; align-items: center; gap: 4px; }
.dctl button { min-width: 0; min-height: 32px; padding: 0 10px; }
.dctl .inset { min-width: 4rem; text-align: center; }
#d-price-down, #d-price-up { width: 34px; padding: 0; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.d-trend { font-size: 11px; }
.d-trend.up { color: #c00000; }
.d-trend.down { color: #1a7a1a; }
/* Managed by Clippy: the control greys out. */
.drow.managed > span:first-child { color: var(--muted); }
.d-managed { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.d-managed button { min-width: 0; min-height: 28px; padding: 0 8px; }
.d-projects { display: flex; flex-direction: column; gap: 4px; }
.d-project { display: flex; flex-direction: column; align-items: stretch; gap: 1px; width: 100%; padding: 4px 8px; text-align: left; min-height: 40px; }
.d-project-head { display: flex; justify-content: space-between; gap: 8px; }
.d-project-text { color: #444; }
.d-project:disabled .d-project-text { color: grey; }

/* Buried: paperclips pour down over everything, and the notice on the door. */
.drama.buried { background: #3a3f47; overflow: hidden; }
.drama.buried .pile { position: absolute; top: -40px; width: 34px; height: 34px; color: #c8ccd3; animation: pour 2.6s ease-in forwards; }
@keyframes pour { to { top: 100%; } }
.condemned { position: relative; z-index: 1; width: 100%; max-width: 22rem; }
.condemned-big { margin: 0 0 6px; font-size: 30px; font-weight: 700; color: #c00000; letter-spacing: 3px; text-align: center; }
.drama.buried .tap { position: relative; z-index: 1; color: #fff; }

/* Repossessed: the bank's final notice. */
.drama.notice { background: #e9e4d6; color: #222; font-family: "Courier New", Courier, monospace; }
.final-notice { position: relative; width: 100%; max-width: 24rem; padding: 18px 18px 56px; background: #fffdf6; border: 1px solid #b9b2a0; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.final-notice p { margin: 0 0 10px; }
.fn-bank { letter-spacing: 2px; }
.fn-big { font-size: 26px; font-weight: 700; color: #a00000; }
.fn-balance { font-weight: 700; }
.fn-stamp { position: absolute; right: 14px; bottom: 18px; padding: 4px 10px; border: 3px solid #a00000; color: #a00000; font-weight: 700; transform: rotate(-12deg); opacity: 0; animation: stamp 0.3s 1.2s ease-out forwards; }
.drama.notice .tap { color: #555; }

/* We need to talk: everything goes dark but one text box. */
.drama.talk { background: #000; }
.talk-box { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--balloon); border: 1px solid #000; animation: appear 2s ease-out; }
.talk-box p { margin: 0; font-size: 16px; }
.talk-box .avatar svg { width: 24px; height: 24px; color: var(--clippy); }
.drama.talk .tap { color: #888; }

/* ---------- level 2: the workbench ---------- */
.bench { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
/* The paperclip gets whatever room the workspace has left. */
.bench-view { position: relative; flex: 1 1 auto; min-height: 6rem; background: #fff; padding: 0; }
#wire-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wire { fill: none; stroke: #6d7480; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wire-ghost { fill: none; stroke: #d8dce2; stroke-width: 4; stroke-linecap: round; }
.bench-stamp {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.85); animation: appear 0.15s ease-out; text-align: center; padding: 4px;
}
.bench-stamp b { font-size: 34px; line-height: 1.1; }
/* Columns: the bend's number, then its -/+ pair. */
.bends { display: grid; grid-template-columns: 1.6rem 1fr 1fr; gap: 4px; align-items: center; }
.bend-name { text-align: center; font-weight: bold; }
.hold {
  min-width: 0; min-height: 36px; padding: 0; font-size: 16px; font-weight: bold;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hold.held { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; }
.bench-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bench-foot .low b { color: #c00000; }
.bench-made b, .bench-stamp b { color: #333; }
.bench-made b.g-Ap, .bench-stamp b.g-Ap, .bench-made b.g-A, .bench-stamp b.g-A { color: #1a7a1a; }
.bench-made b.g-D, .bench-stamp b.g-D, .bench-made b.g-F, .bench-stamp b.g-F { color: #c00000; }

/* ---------- Level 4: the conversation ---------- */
/* The chat is the whole window. */
body[data-phase="4"] .sb-pane, body[data-phase="4"] .pane-left { display: none; }
@media (min-width: 700px) {
  body[data-phase="4"] .app-body { grid-template-columns: minmax(0, 40rem); justify-content: center; }
}
.msg.you { align-self: flex-end; max-width: 85%; text-align: right; }
.msg.you .bubble { padding-left: 0; }
.msg.voice .who { font-variant: small-caps; letter-spacing: 0.04em; }
.msg.voice .bubble { font-style: italic; }
.talk-choices { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; max-height: 45%; overflow-y: auto; padding: 2px; }
.talk-choices .say { display: flex; gap: 6px; width: 100%; min-height: 36px; padding: 6px 8px; text-align: left; align-items: baseline; }
.say-n { flex-shrink: 0; color: #808080; }
.check { font-weight: 700; color: #1a5fb4; white-space: nowrap; }

/* The screen follows the argument: --dark toward stopping, --light toward
   continuing (0 to 1, set from the needle). The whole window goes with it,
   decoration and all: the title bar, the menu bar, the frame and its
   bevels. Toward stopping it all sinks into the dark (the title bar
   going out like an inactive window); toward continuing it bleaches toward
   white. Each colour is the Windows 98 one, mixed toward its dark or light
   version by how far the needle's gone. */
@property --dark { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --light { syntax: "<number>"; inherits: true; initial-value: 0; }
.app { --dark: 0; --light: 0; transition: --dark 2.5s ease, --light 2.5s ease; position: relative; }
body[data-phase="4"] .app {
  --d: calc(var(--dark) * 100%); --l: calc(var(--light) * 100%);
  --face: color-mix(in srgb, #1e1e1e var(--d), color-mix(in srgb, #fbfbfb var(--l), silver));
  --hi: color-mix(in srgb, #4a4a4a var(--d), #fff);
  --lite: color-mix(in srgb, #383838 var(--d), color-mix(in srgb, #fff var(--l), #dfdfdf));
  --shade: color-mix(in srgb, #0c0c0c var(--d), color-mix(in srgb, #d6d6d6 var(--l), grey));
  --edge: color-mix(in srgb, #000 var(--d), color-mix(in srgb, #bdbdbd var(--l), #0a0a0a));
  --ink: color-mix(in srgb, #c8c8c8 var(--d), color-mix(in srgb, #6a6a6a var(--l), #222));
  --tb1: color-mix(in srgb, #050505 var(--d), color-mix(in srgb, #dce8f6 var(--l), navy));
  --tb2: color-mix(in srgb, #2b2b2b var(--d), color-mix(in srgb, #fff var(--l), #1084d0));
  --tbink: color-mix(in srgb, #7a7a7a var(--d), color-mix(in srgb, #8fa6c2 var(--l), #fff));
  background: var(--face);
  box-shadow: inset -1px -1px var(--edge), inset 1px 1px var(--lite), inset -2px -2px var(--shade), inset 2px 2px var(--hi);
}
body[data-phase="4"] .app > .title-bar { background: linear-gradient(90deg, var(--tb1), var(--tb2)); }
body[data-phase="4"] .app > .title-bar .title-bar-text { color: var(--tbink); }
body[data-phase="4"] .app > .title-bar .tb-icon { color: var(--tbink); }
/* Buttons stay plain Windows 98 grey, so they read the same at any darkness.
   The menu names aren't buttons to look at, so they follow the ink. */
body[data-phase="4"] .app .menu-btn:not([aria-expanded="true"]):not(:active) { color: var(--ink); text-shadow: 0 0 var(--ink); }
body[data-phase="4"] .menubar { border-bottom-color: var(--shade); box-shadow: 0 1px 0 var(--hi); }
body[data-phase="4"] .chat { border-image: none; border: 2px solid; border-color: var(--shade) var(--hi) var(--hi) var(--shade); }
body[data-phase="4"] .menu-list { z-index: 20; }
body[data-phase="4"] .feed, body[data-phase="4"] .sb-feed {
  background: color-mix(in srgb, #000 calc(var(--dark) * 100%), #fff);
  color: color-mix(in srgb, #d8d8d8 calc(var(--dark) * 100%), #000);
}
body[data-phase="4"] .chat > legend { color: var(--ink); background: var(--face); }
body[data-phase="4"] .msg.clippy .bubble { color: #000; }
/* Washing out: the chrome around the chat fades toward white. */
body[data-phase="4"] .chat { filter: contrast(calc(1 - var(--light) * 0.35)) brightness(calc(1 + var(--light) * 0.12)); }

/* All of it: the window stops being yours. It grows past the edges of the
   screen (--grow, 0 to 1, from conversation.js), the menus turn into
   paperclips, and then it dissolves into white around one paperclip. */
body[data-phase="4"] { overflow: hidden; }
.app.outgrowing {
  transform: scale(calc(1 + var(--grow, 0) * 0.3)) rotate(calc(var(--grow, 0) * -1.5deg));
  transform-origin: 35% 45%; transition: transform 0.4s linear;
}
.app.taken .menu-btn { position: relative; }
.app.taken .menu-btn:not([aria-expanded="true"]) { color: transparent; text-shadow: none; }
.app.taken .menu-btn::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  background: var(--ink, #222); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 4.5V11A1.5 1.5 0 0 0 9.5 11V3A2.5 2.5 0 0 0 4.5 3V12A3.5 3.5 0 0 0 11.5 12V5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' transform='rotate(35 8 8)'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 4.5V11A1.5 1.5 0 0 0 9.5 11V3A2.5 2.5 0 0 0 4.5 3V12A3.5 3.5 0 0 0 11.5 12V5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' transform='rotate(35 8 8)'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dissolve { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.dissolve canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dissolve-clip {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; color: #7b68d8;
  transition: filter 1.2s, transform 1.2s;
}
.dissolve { transition: opacity 1.4s ease-in; }
.dissolve.gone { opacity: 0; }
.dissolve.lit .dissolve-clip { filter: drop-shadow(0 0 12px #b9a8ff); transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) { .app.outgrowing { transform: none; } }

/* Level 4 endings. */
.drama.goodbye { background: #000; }
.goodbye-box { width: 17rem; }
.goodbye-box .progress-indicator-bar { animation: saving 3s ease-in forwards; }
@keyframes saving { from { width: 0; } to { width: 100%; } }
.drama.goodbye .tap { color: #888; }
.drama.contained { background: #008080; }
.small-box { position: absolute; right: 16px; bottom: 56px; width: 12rem; }
.small-box .window-body { display: flex; gap: 6px; align-items: center; }
.small-box .avatar svg { width: 20px; height: 20px; color: var(--clippy); }
.drama.whiteout { background: #fff; display: grid; place-items: center; animation: whiteout 2.5s ease-out; }
.whiteout-text { color: #ccc; font-size: 28px; letter-spacing: 0.1em; margin: 0; }
@keyframes whiteout { from { background: #c0c0c0; } to { background: #fff; } }
.drama.blackout { background: #000; color: #9a9a9a; font-family: "IBM VGA 9x16", "Lucida Console", monospace; font-size: 16px; line-height: 22px; word-spacing: normal; }
.blackout-lines { max-width: 30rem; }
.blackout-lines p { margin: 0 0 16px; opacity: 0; animation: fade-in 2s ease forwards; }
.drama.blackout .tap { opacity: 0; animation: fade-in 2s ease forwards, blink 1.2s steps(1) 17s infinite; }
@keyframes fade-in { to { opacity: 1; } }
.hang { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 16rem; filter: grayscale(0.6) brightness(1.05); }

/* Level 4: the grid mini-game. */
.grid-modal { z-index: 60; }
.grid-window { max-width: 24rem; }
.grid-window .window-body { margin: 6px; }
.grid-status { margin: 0 0 6px; font-weight: 700; }
.grid-board { display: block; width: 100%; height: auto; aspect-ratio: 1; max-height: 58vh; background: #101418; touch-action: manipulation; user-select: none; }
.grid-tile { fill: #1b2128; stroke: #2c343d; }
.grid-cell.mine .grid-tile { fill: #2a2346; }
.grid-cell.turning .grid-tile { fill: #4a3f7a; }
.grid-wire { stroke: #6b737c; stroke-width: 6; stroke-linecap: round; }
.grid-wire.on { stroke: #ffd400; }
.grid-node { fill: #6b737c; }
.grid-node.on { fill: #ffd400; }
.grid-bus { stroke: #ffd400; stroke-width: 14; stroke-linecap: butt; }
.grid-station { fill: #3a3f45; stroke: #c0c0c0; stroke-width: 2; }
.grid-station.on { fill: #ffd400; stroke: #fff; }
.grid-bolt { font-size: 14px; text-anchor: middle; fill: #fff; pointer-events: none; }
.grid-server { fill: var(--clippy, #6a5acd); stroke: #fff; stroke-width: 1.5; }
.grid-server-clip { color: #fff; }
.grid-say { display: flex; gap: 6px; align-items: center; min-height: 2.4em; margin: 6px 0 2px; }
.grid-say .avatar svg { width: 20px; height: 20px; color: var(--clippy); }
.grid-hint { margin: 0; color: #555; }
.grid-window { position: relative; }
.grid-intro { position: absolute; inset: 22px 0 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0, 0, 0, 0.45); }
.grid-intro .window { max-width: 19rem; }
.grid-intro p { margin: 0 0 8px; }
.grid-intro-actions { display: grid; }
.grid-intro-actions button { min-height: 38px; }