/* Bedtime vs. Nightmares wiki: shared by every page under /bedtime-vs-nightmares/wiki/ (written by tools/wiki/build.py
   in the game's repository; edit it there). The studio's look: paper and ink, with the game's night colours. */
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/instrument-sans.woff2) format('woff2'); }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url(/fonts/instrument-serif-italic.woff2) format('woff2'); }
:root {
  --paper:#f5f6f1; --card:#fbfcf8; --tint:#e8ede5; --ink:#153d2f; --muted:#59675e; --lime:#d6f598; --line:#d6ddd3;
  --night:#241f5d; --night-2:#2e2770; --night-3:#3f3593; --moon:#ffd75e; --glow:#fff4dc; --star:#ecebff; --dim:#bdb8e3; --closet:#b48cff;
  --lilac:#ece8ff; --up:#2f6b3f;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:70px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Instrument Sans', Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.65; }
::selection { background:var(--lime); color:var(--ink); }
a { color:inherit; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid #5a872b; outline-offset:3px; border-radius:4px; }
img, video { display:block; max-width:100%; height:auto; }
.wrap { width:min(1200px, calc(100% - 112px)); margin-inline:auto; }
.skip { position:fixed; top:10px; left:10px; padding:12px 18px; background:var(--lime); color:var(--ink); z-index:30; transform:translateY(-150%); }
.skip:focus { transform:translateY(0); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* The studio's bar */
.studio-bar { background:var(--paper); border-bottom:1px solid var(--line); }
.studio-bar .wrap { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:18px; font-weight:700; letter-spacing:-.7px; white-space:nowrap; text-decoration:none; }
.mark { display:grid; grid-template-columns:repeat(2, 10px); gap:3px; transform:rotate(-8deg); }
.mark i { width:10px; height:10px; background:currentColor; border-radius:1px; }
.mark i:last-child { border-radius:1px 1px 6px 1px; }
.studio-bar nav { display:flex; gap:26px; font-size:14px; font-weight:500; }
.studio-bar nav a { text-decoration:none; padding:10px 0; }
.studio-bar nav a:hover { text-decoration:underline; text-underline-offset:6px; }

/* The wiki's own bar */
.wiki-bar { background:var(--night); color:var(--star); position:sticky; top:0; z-index:20; }
.wiki-bar .wrap { display:flex; align-items:center; gap:22px; min-height:54px; }
.wiki-home { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px; letter-spacing:-.2px; text-decoration:none; white-space:nowrap; color:var(--glow); }
.wiki-home img { width:30px; height:30px; border-radius:7px; }
.wiki-bar nav { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin-left:auto; }
.wiki-bar nav::-webkit-scrollbar { display:none; }
.wiki-bar nav a { text-decoration:none; font-size:14px; font-weight:600; padding:7px 13px; border-radius:99px; color:var(--dim); white-space:nowrap; }
.wiki-bar nav a:hover { color:var(--star); background:rgba(255,255,255,.08); }
.wiki-bar nav a[aria-current] { background:var(--night-3); color:#fff; }

/* The two games: the phone game's words show unless the reader picked PC (pages.py EDITION_SCRIPT, wiki.js). */
html:not([data-edition="pc"]) .pc-only { display:none !important; }
html[data-edition="pc"] .phone-only { display:none !important; }
.game-switch { display:none; background:rgba(255,255,255,.1); border-radius:99px; padding:3px; flex:none; }
html.js .game-switch { display:inline-flex; }
.game-switch button { font:inherit; font-size:13px; font-weight:700; padding:4px 13px; border:0; border-radius:99px; background:none; color:var(--dim); cursor:pointer; }
.game-switch button[aria-pressed="true"] { background:var(--moon); color:var(--night); }
.game-switch button:focus-visible { outline-color:var(--moon); }
button.chip { font:inherit; font-size:13px; font-weight:600; cursor:pointer; }

.crumbs { font-size:13px; color:var(--muted); padding:22px 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.crumbs a { text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.crumbs span[aria-hidden] { opacity:.5; }

main { padding:0 0 72px; }
h1 { font-size:clamp(34px, 4.4vw, 54px); line-height:1.08; letter-spacing:-.04em; font-weight:500; margin:14px 0 0; }
h1 em, h2 em { font-family:'Instrument Serif', Georgia, 'Times New Roman', serif; font-weight:400; font-size:1.08em; letter-spacing:-.02em; }
h2 { font-size:clamp(24px, 2.6vw, 32px); line-height:1.15; letter-spacing:-.03em; font-weight:600; margin:60px 0 0; }
h3 { font-size:19px; letter-spacing:-.3px; font-weight:600; margin:34px 0 0; }
p { margin:14px 0 0; max-width:76ch; }
.lead { font-size:18px; line-height:1.7; color:var(--muted); max-width:68ch; margin-top:16px; }
.muted, .note { color:var(--muted); }
.note { font-size:14px; line-height:1.6; }
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:2px; font-weight:600; color:var(--muted); margin:0; }
ul.plain { margin:14px 0 0; padding:0 0 0 20px; max-width:80ch; }
ul.plain li { margin:0 0 8px; }
ul.plain li::marker { color:var(--closet); }
code { font-size:.92em; background:var(--tint); padding:1px 6px; border-radius:4px; }

/* A unit's header */
.unit { display:grid; grid-template-columns:240px 1fr; gap:36px; align-items:center; padding-top:10px; }
.portrait { background:radial-gradient(circle at 50% 60%, var(--night-3), var(--night) 72%); border-radius:10px 10px 56px 10px; aspect-ratio:1; display:grid; place-items:center; padding:22px; }
.portrait img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(14,10,40,.5)); }
.unit h1 { margin-top:8px; }
.says { font-size:18px; line-height:1.6; color:var(--muted); margin-top:12px; max-width:60ch; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; font-size:13px; font-weight:600; background:var(--tint); border:1px solid #dfe6da; white-space:nowrap; text-decoration:none; }
.chip img { width:18px; height:18px; }
.chip.role { background:var(--night-2); color:var(--moon); border-color:var(--night-2); }
.chip.boss { background:#5a1f3d; color:#ffd9e6; border-color:#5a1f3d; }
.chip.good { background:var(--lime); border-color:#c4e585; }
a.chip:hover { border-color:var(--ink); }

/* Facts: label over value */
.facts { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:22px; }
.fact { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
.fact dt { font-size:11.5px; text-transform:uppercase; letter-spacing:1.2px; font-weight:600; color:var(--muted); }
.fact dd { margin:4px 0 0; font-size:20px; font-weight:600; letter-spacing:-.3px; font-variant-numeric:tabular-nums; display:flex; align-items:center; flex-wrap:wrap; gap:0 6px; }
.fact dd img { width:22px; height:22px; }
.fact dd small { font-size:13px; font-weight:500; color:var(--muted); letter-spacing:0; flex-basis:100%; }
dl.facts { margin-bottom:0; }

/* Clips */
figure { margin:22px 0 0; }
.clip { background:var(--night); border-radius:10px; overflow:hidden; box-shadow:0 10px 26px rgba(14,10,40,.22); }
.clip video, .clip img { width:100%; height:auto; background:var(--night); }
figure.tall { max-width:820px; }
figcaption { font-size:14px; line-height:1.55; color:var(--muted); margin-top:10px; max-width:80ch; }
.clip-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.measured { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:14px; max-width:620px; }
.measured div { border:1px solid var(--line); border-radius:6px; padding:10px 14px; background:var(--card); }
.measured b { display:block; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.measured span { font-size:17px; font-weight:600; }

/* Tables. One that fits its column keeps its header under the wiki's bar while the page scrolls (.fits, set by
   wiki.js). One that is wider first grows into the page's margins on a wide screen (wiki.js), and if it is still too
   wide it becomes its own scroller, no taller than the screen, whose header row and first column stay put. Without
   the script every table is that scroller. */
:root { --bar-h:54px; }
.scroll { overflow:auto; max-height:calc(100vh - var(--bar-h) - 20px); max-height:calc(100dvh - var(--bar-h) - 20px); margin-top:18px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.scroll.fits { overflow:clip; max-height:none; }
.scroll.short { max-height:none; }
.scroll:focus-visible { outline:3px solid #5a872b; outline-offset:2px; }
table.data { border-collapse:separate; border-spacing:0; width:100%; font-size:14.5px; line-height:1.45; font-variant-numeric:tabular-nums; }
.data th, .data td { text-align:right; padding:9px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.data th { font-size:11.5px; text-transform:uppercase; letter-spacing:1px; font-weight:600; color:var(--muted); background:var(--tint); position:sticky; top:0; z-index:2; vertical-align:bottom; white-space:normal; }
.scroll.fits .data th { top:var(--bar-h); }
.data th:first-child, .data td:first-child, .data .l { text-align:left; }
.data tbody tr { --row:var(--card); }
.data tbody tr:hover { --row:#f1f4ec; }
.data tr.perk { --row:#f3fbdf; }
.data tr.perk:hover { --row:#eaf6cf; }
.data td { background:var(--row); }
.data tbody tr:last-child td { border-bottom:0; }
/* The first column stays while the rest slides under it (not when it would fill the table's window: .nopin). */
.data td:first-child { position:sticky; left:0; z-index:1; }
.data th:first-child { left:0; z-index:3; }
.scroll.nopin .data td:first-child { position:static; }
.scroll.nopin .data th:first-child { left:auto; z-index:2; }
.scroll.slid:not(.nopin) .data td:first-child, .scroll.slid:not(.nopin) .data th:first-child { box-shadow:1px 0 0 var(--line), 8px 0 10px -8px rgba(21,61,47,.3); }
.data td.wrapcell, .data th.wrapcell { white-space:normal; min-width:220px; }
.data tr.perk td { background:#f3fbdf; }
.data tr.perk:hover td { background:#eaf6cf; }
.data td .perk-tag { display:inline-block; background:var(--lime); border-radius:99px; padding:1px 10px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.data td.up { color:var(--up); font-weight:600; }
.data th[data-sort] { cursor:pointer; user-select:none; }
.data th[data-sort]:hover { color:var(--ink); }
.data th[aria-sort="ascending"]::after { content:" ▲"; font-size:9px; }
.data th[aria-sort="descending"]::after { content:" ▼"; font-size:9px; }
.data .unitcell { display:flex; align-items:center; gap:10px; font-weight:600; text-decoration:none; min-width:170px; }
.data .unitcell img { width:36px; height:36px; object-fit:contain; flex:none; }
.data .unitcell:hover span { text-decoration:underline; }
.data small { color:var(--muted); font-weight:500; }
.data td.dim { color:#a3ada6; }
table.compact th, table.compact td { padding:7px 12px; }
.data td .chips { margin:0; min-width:240px; white-space:normal; }
.data.wrap td { white-space:normal; }
.data.wrap td:first-child { white-space:nowrap; }
.data.wrap td .chips { min-width:min(420px, 60vw); }
.narrow { max-width:680px; }
.data td .chips .chip { font-size:12.5px; padding:3px 10px; }

/* Filters */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.filters button { font:inherit; font-size:14px; font-weight:600; padding:7px 15px; border-radius:99px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.filters button:hover { border-color:var(--ink); }
.filters button[aria-pressed="true"] { background:var(--night-2); border-color:var(--night-2); color:#fff; }

/* Cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; margin-top:22px; }
.card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:16px 12px 14px; background:var(--card); border:1px solid var(--line); border-radius:6px 6px 26px 6px; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.card:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(21,61,47,.13); }
.card img { width:84px; height:84px; object-fit:contain; }
.card strong { font-size:15.5px; letter-spacing:-.2px; line-height:1.25; }
.card span { font-size:12.5px; color:var(--muted); }
.card.night { background:var(--night-2); border-color:var(--night-2); color:var(--star); }
.card.night span { color:var(--dim); }
.card[hidden] { display:none; }

.tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:28px; }
.tile { display:block; background:var(--tint); border:1px solid #e0e6dc; border-radius:6px 6px 36px 6px; padding:24px 26px 24px; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.tile:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(21,61,47,.14); }
.tile .row { display:flex; gap:6px; height:66px; align-items:flex-end; }
.tile .row img { width:60px; height:60px; object-fit:contain; }
.tile h3 { margin:16px 0 6px; font-size:22px; letter-spacing:-.6px; }
.tile p { margin:0; font-size:15px; line-height:1.6; color:var(--muted); }
.tile .count { display:inline-block; margin-top:14px; font-size:13px; font-weight:700; padding:3px 11px; border-radius:99px; background:var(--night-2); color:var(--moon); }

.hero { background:var(--night); color:var(--star); padding:44px 0 50px; }
.hero h1 { color:#fff; margin-top:10px; }
.hero h1 em { color:var(--moon); }
.hero .lead { color:var(--dim); }
.hero .eyebrow { color:var(--dim); }
.hero .stats { display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:28px; }
.hero .stats div { font-size:14px; color:var(--dim); }
.hero .stats b { display:block; font-size:30px; font-weight:600; letter-spacing:-1px; color:var(--moon); line-height:1.1; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.split > * { min-width:0; }
.cards2 > *, .clip-pair > * { min-width:0; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:20px 24px 22px; margin-top:22px; }
.panel h3 { margin-top:0; }
.panel.night { background:var(--night-2); border-color:var(--night-2); color:var(--star); }
.panel.night p, .panel.night li { color:var(--dim); }
.panel.night strong, .panel.night h3 { color:#fff; }

.cards2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.cards2 .panel { margin-top:0; }
.panel h4 { font-size:13px; text-transform:uppercase; letter-spacing:1.2px; font-weight:600; color:var(--muted); margin:18px 0 0; }
.panel.night h4, .panel.night .eyebrow { color:var(--dim); }
.panel .chips { margin-top:10px; }
.panel.night .chip { background:var(--night-3); border-color:var(--night-3); color:#fff; }
.kv { margin:12px 0 0; }
.kv div { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.panel.night .kv div { border-color:rgba(255,255,255,.14); }
.kv dt { flex:0 0 46%; color:var(--muted); }
.panel.night .kv dt { color:var(--dim); }
.kv dd { margin:0; font-weight:600; }

.gamepick { display:flex; align-items:center; justify-content:space-between; gap:20px 36px; flex-wrap:wrap; margin-top:32px; }
.gamepick > div:first-child { flex:1 1 380px; }
.gamepick p { margin-top:6px; }
.panel .says { font-size:16.5px; margin-top:6px; }
.panel[id] { scroll-margin-top:70px; }
.tile h3:first-child { margin-top:0; }
.tile.later { background:none; border-style:dashed; border-color:#b9c4b6; }
.tile.later:hover { transform:none; box-shadow:none; }
.tile.later .count { background:var(--tint); color:var(--muted); }
a.steam { display:inline-block; margin-top:6px; padding:10px 20px; border-radius:99px; background:var(--night-2); color:#fff; font-size:15px; font-weight:600; text-decoration:none; }
a.steam:hover { background:var(--night-3); }
.panel.night p a { color:var(--moon); }
/* A picture beside a paragraph (an elite's flame), and a trick's badge in its table. */
.withicon { display:flex; gap:16px; align-items:flex-start; margin-top:16px; }
.withicon img { width:56px; height:56px; object-fit:contain; flex:none; }
.withicon p { margin:0; }
.data .unitcell.trick { min-width:0; }
.data .unitcell.trick img { width:44px; height:44px; }
.card.still:hover { transform:none; box-shadow:none; }

/* Charts */
.chart { margin-top:18px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 18px 10px; position:relative; }
.chart h3 { margin:0; font-size:15px; }
.chart p { margin:2px 0 6px; font-size:13px; color:var(--muted); }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .plot { overflow-x:auto; }
.chart .grid-line { stroke:var(--line); stroke-width:1; }
.chart .axis-text { font-size:11.5px; fill:var(--muted); font-family:inherit; }
.chart .value-text { font-size:12.5px; font-weight:600; fill:var(--ink); font-family:inherit; }
.chart .series { fill:none; stroke:var(--night-3); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .wash { fill:var(--night-3); opacity:.1; }
.chart .dot { fill:var(--night-3); stroke:var(--card); stroke-width:2; }
.chart .cross { stroke:var(--muted); stroke-width:1; visibility:hidden; }
.chart .tip { position:absolute; pointer-events:none; background:var(--ink); color:var(--paper); font-size:13px; line-height:1.4; padding:7px 11px; border-radius:6px; transform:translate(-50%, -110%); white-space:nowrap; visibility:hidden; z-index:3; }
.chart .tip b { font-size:15px; }
.chart .tip i { font-style:normal; display:block; color:var(--lime); font-size:12px; }

/* Next and previous */
.pager { display:flex; justify-content:space-between; gap:16px; margin-top:64px; padding-top:24px; border-top:1px solid var(--line); }
.pager a { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:600; }
.pager a img { width:44px; height:44px; object-fit:contain; }
.pager a small { display:block; font-size:12px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; }
.pager a:hover span { text-decoration:underline; }
.pager .next { text-align:right; margin-left:auto; }

.toc { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.toc a { font-size:13.5px; font-weight:600; padding:5px 13px; border-radius:99px; border:1px solid var(--line); background:var(--card); text-decoration:none; }
.toc a:hover { border-color:var(--ink); }

.wiki-foot { border-top:1px solid var(--line); margin-top:10px; }
.wiki-foot .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0; flex-wrap:wrap; }
.wiki-foot .links { display:flex; flex-wrap:wrap; gap:22px; font-size:14px; }
.wiki-foot .links a { text-decoration:none; }
.wiki-foot .links a:hover { text-decoration:underline; text-underline-offset:5px; }
.legal { font-size:12px; color:var(--muted); line-height:1.6; }
.dataline { font-size:12.5px; color:var(--muted); margin-top:44px; }

@media (max-width:1000px) {
  .wrap { width:calc(100% - 64px); }
  .tiles { grid-template-columns:repeat(2, 1fr); }
  .split { grid-template-columns:1fr; gap:0; }
  .unit { grid-template-columns:180px 1fr; gap:26px; }
}
@media (max-width:680px) {
  .wrap { width:calc(100% - 32px); }
  .studio-bar .wrap { min-height:56px; }
  .brand { font-size:16px; gap:10px; }
  .studio-bar nav { gap:16px; font-size:13px; }
  .studio-bar nav .wide { display:none; }
  .wiki-bar .wrap { gap:10px; }
  .wiki-home span { display:none; }
  .wiki-bar nav { margin-left:0; }
  .game-switch button { padding:4px 10px; }
  .wiki-bar nav a { padding:7px 10px; font-size:13.5px; }
  .unit { grid-template-columns:1fr; gap:14px; }
  .portrait { width:150px; border-radius:8px 8px 40px 8px; padding:14px; }
  .tiles { grid-template-columns:1fr; gap:12px; }
  .clip-pair { grid-template-columns:1fr; }
  .cards2 { grid-template-columns:1fr; }
  .chart svg { min-width:560px; }
  .chart { padding:14px 12px 8px; }
  .grid { grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
  .card img { width:64px; height:64px; }
  .facts { grid-template-columns:repeat(2, 1fr); }
  .data th, .data td { padding:8px 10px; }
  .data .unitcell { min-width:0; gap:8px; }
  .data .unitcell img { width:28px; height:28px; }
  .data .unitcell span { white-space:normal; width:84px; font-size:13px; line-height:1.2; }
  .data .unitcell.trick img { width:36px; height:36px; }
  .data .unitcell.trick span { width:auto; }
  h2 { margin-top:46px; }
  .pager a img { display:none; }
}
@media print {
  .scroll { overflow:visible; max-height:none; margin-inline:0 !important; }
  .data th, .data td:first-child { position:static; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .card, .tile { transition:none; }
  .card:hover, .tile:hover { transform:none; }
}