/* Millbury Mansion's look: a gaslit haunted manor. A midnight-violet damask
   ground under a soft candle pool from the upper left, candle gold for what's
   yours and whose turn it is, ghost mint for the uncanny, and the detective's
   notebook: green leather with parchment pages (docs/millbury-mansion.md,
   "Its look"). This file is the tokens (the house's, the room kit's and the
   game's own) and the faces of its pieces: the board's rim, pawns, cards,
   dice, cameos and the notebook. It's loaded before the room's structure
   (games/room/room.css); the table (table.css) after it. The Django pages
   (games/templates/millbury-mansion/page.html) wear just this.

   Faces, all OFL and bundled in fonts/: IM Fell English and its small caps
   (the display: titles, headings, the room plates, the notebook's hand),
   Alegreya Sans (everything else) and Kalam (your pencil). */

@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/im-fell-english-400-latin.72415626cdb5.woff2") format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/im-fell-english-400-italic-latin.c480ab933bdb.woff2") format("woff2"); }
@font-face { font-family: "IM Fell English SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/im-fell-english-sc-400-latin.7e80b7ac2375.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/alegreya-sans-400-latin.623a60bd2c49.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/alegreya-sans-500-latin.dbb18b8846c6.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/alegreya-sans-700-latin.6cc1ee17091d.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/alegreya-sans-800-latin.64c92528ac07.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/kalam-700-latin.68f247e4c7ce.woff2") format("woff2"); }

:root {
  /* the house's (docs/guide/design/tokens.md) */
  --t-display: clamp(32px, 7vw, 44px); --t-heading: 20px; --t-body: 16px; --t-label: 16px; --t-note: 14px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px;
  --pick-tint: color-mix(in srgb, currentColor 16%, transparent);
  --pick-ring: inset 0 0 0 2px currentColor;
  --pick-weight: 700;

  /* the manor */
  --manor: #15111f; --manor-hi: #221a31; --damask: rgba(176, 160, 214, .055);
  --candle: #e9c46a; --candle-lo: #8f6f22;
  --ghost: #a8e6cf;
  --walnut-hi: #6a4628; --walnut: #3f2715; --walnut-lo: #2a190d;
  --brass: #b8964f; --brass-hi: #e2c477; --brass-lo: #7a5a1e;
  /* the notebook: green leather, parchment, ink and graphite */
  --leather-hi: #2e4d40; --leather: #1b3229; --leather-lo: #22392f;
  --parch: #f4ebd3; --parch-hi: #f7f0dc; --parch-lo: #e6d9b8; --parch-edge: #c9b88f; --parch-rule: #e4d8b6;
  --nb-ink: #2b2118; --nb-ink-soft: #6b5a40; --nb-green: #1d4f3a; --graphite: #5e5c66; --nb-pick: #2f5fb3;

  /* the room kit's (docs/guide/design/tokens.md, "The room kit"), in the manor */
  --room: #15111f;
  --table:
    radial-gradient(ellipse 70% 60% at 16% 8%, rgba(233, 196, 106, .11), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .5)),
    radial-gradient(circle at 14px 14px, rgba(176, 160, 214, .055) 0 3px, transparent 3.5px) 0 0 / 28px 28px,
    radial-gradient(circle at 0 0, rgba(176, 160, 214, .04) 0 6px, transparent 6.5px) 0 0 / 28px 28px,
    #15111f;
  --rail: 0 solid transparent;
  --rail-radius: 0;
  --panel: rgba(0, 0, 0, .22);
  --panel-edge: 1.5px solid rgba(241, 234, 219, .14);
  --panel-radius: 12px;
  --sheet: #221b30;
  --chip: rgba(0, 0, 0, .22);
  --chip-edge: 1.5px solid rgba(241, 234, 219, .14);
  --chip-radius: 10px;
  --ink: #f1eadb;
  --soft: #bdb4cc;
  --turn: #e9c46a;
  --good: #a8e6cf;
  --bad: #ff9a85;
  --focus: #f1eadb;
  --btn: #e9c46a;
  --btn-ink: #1a1306;
  --btn-edge: 2px solid #e9c46a;
  --btn2: transparent;
  --btn2-ink: #f1eadb;
  --btn2-edge: 2px solid #f1eadb;
  --btn-radius: 10px;
  --btn-weight: 800;
  --confirm: #ff9a85;
  --confirm-ink: #2a0d06;
  --turn-ink: #1a1306;
  --seat-ink: #111;
  --field-edge: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  --ui-font: "Alegreya Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "IM Fell English", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --display-weight: 400;

  color-scheme: dark;
}

body { background: var(--room); }

/* ── the floor plan in its walnut rim, brass bead and plate ────────────── */
.mmboard { position: relative; width: 100%; aspect-ratio: 1; }
.mmrim {
  position: absolute; inset: 0; box-sizing: border-box; padding: clamp(6px, 1.85%, 12px); border-radius: 12px;
  background: linear-gradient(150deg, var(--walnut-hi) 0%, var(--walnut) 38%, var(--walnut-lo) 70%, #3a2414 100%);
  box-shadow: inset 0 1px 0 rgba(255, 222, 176, .38), inset 0 -2px 0 rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .45), 0 22px 44px rgba(0, 0, 0, .5);
}
.mmbead {
  position: relative; width: 100%; height: 100%; box-sizing: border-box; border: clamp(2px, .65%, 4px) solid var(--brass); border-radius: 3px;
  box-shadow: 0 0 0 1px #3a2414, inset 0 0 0 1px rgba(255, 236, 190, .35); overflow: hidden;
}
.mmplan { display: block; width: 100%; height: 100%; }
.mmvignette { position: absolute; inset: 0; box-shadow: inset 0 0 14px rgba(0, 0, 0, .65); pointer-events: none; }
.mmplate {
  position: absolute; left: 50%; bottom: -1px; translate: -50% 0; height: 22px; box-sizing: border-box; padding: 2px 16px 0; display: flex; align-items: center; border-radius: 4px;
  background: linear-gradient(180deg, var(--brass-hi), #a8823e); box-shadow: inset 0 1px 0 rgba(255, 246, 214, .7), 0 1px 2px rgba(0, 0, 0, .5);
  font: 400 12px/1 "IM Fell English SC", var(--display); letter-spacing: .12em; color: #2a1a08; white-space: nowrap;
}
/* the room plates; the lit room's in candle gold, the case file's the hero's */
.mmplatebox rect { fill: rgba(12, 9, 18, .86); stroke: var(--brass); }
.mmplatebox text { fill: #f3e9d2; }
.mmplatebox.hero rect, .mmplatebox.lit rect { fill: rgba(12, 9, 18, .9); stroke: var(--candle); stroke-width: 1.5; }
.mmplatebox.hero text, .mmplatebox.lit text { fill: #ffe7b0; }
.mmplatebox rect.fu { fill: rgba(12, 9, 18, .7); stroke: none; }
.mmplatebox text.fu { font-family: var(--display); font-style: italic; fill: #e9dfc8; letter-spacing: 0; }
/* the passages' marks breathe faintly; Mr. Millbury's eyes in his portrait glow */
.mmeyes { animation: mmeyes 5.5s ease-in-out infinite; }
@keyframes mmeyes { 0%, 70%, 100% { opacity: .55; } 80% { opacity: 1; } }
.mmghost { animation: mmghost 9s ease-in-out infinite; }
@keyframes mmghost { 50% { opacity: .55; } }
.mmflame { animation: mmflame 3.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes mmflame { to { opacity: .82; transform: scale(.94); } }
/* the case file opened: its seal broken, its flap up */
.mmplan.opened .mmseal { opacity: 0; transition: opacity .5s; }
.mmplan.opened .mmflap { transform: rotate(-6deg) translateY(-6px) scaleY(-1); transform-box: fill-box; transform-origin: center top; transition: transform .6s; }
.mmplan.opened .mmcase { filter: url(#mm-obj) drop-shadow(0 0 10px rgba(233, 196, 106, .8)); }

/* what's lit to choose, in candle gold; the rest steps back a little */
.mmlit { pointer-events: none; }
.mmlit.room { fill: rgba(233, 196, 106, .12); stroke: var(--candle); stroke-width: 2.5; }
.mmlit.cell { fill: rgba(233, 196, 106, .34); stroke: var(--candle); stroke-width: 1.5; }
.mmhit { fill: transparent; stroke: none; cursor: pointer; outline: none; }
.mmhit.room:focus-visible { stroke: var(--focus); stroke-width: 3; }
@media (hover: hover) {
  .mmhit.cell:hover { fill: rgba(233, 196, 106, .4); }
  .mmhit.room:hover { fill: rgba(233, 196, 106, .1); }
}
.mmplan .mmhit.house-beckon { outline: none !important; stroke: var(--candle); stroke-width: 4; animation: mmbeckon var(--m-beckon, 1600ms) ease-in-out 3; }
@keyframes mmbeckon { 50% { stroke-width: 9; stroke-opacity: .5; } }

/* the pawns: turned wood with both shadows; yours wears the gold ring */
.mmpawn { pointer-events: none; transition: transform 160ms ease-out; }
.mmpawn .ring { fill: none; stroke: none; }
.mmpawn.you .ring { stroke: var(--candle); stroke-width: 2.5; }
.mmpawn.turn:not(.you) .ring { stroke: rgba(241, 234, 219, .7); stroke-width: 2; stroke-dasharray: 3 3; }
.mmpawn.walking { transition: transform 110ms linear; }
.mmheirloom { pointer-events: none; }
.mmstart.under { visibility: hidden; }

/* ── a card (shown to you): parchment, a brass line inside, lifted ─────── */
.mmcard {
  width: 224px; height: 316px; box-sizing: border-box; padding: 10px; border-radius: 12px; rotate: -3deg;
  background: linear-gradient(160deg, #f7efd9, #e8dbb9);
  box-shadow: inset 0 1px 0 #fffdf5, 0 2px 3px rgba(0, 0, 0, .5), 0 28px 50px rgba(0, 0, 0, .6), 0 0 60px rgba(233, 196, 106, .25);
}
.mmcardin {
  height: 100%; box-sizing: border-box; border: 1.5px solid var(--brass); border-radius: 7px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .5), transparent 70%); color: var(--nb-ink);
}
.mmcardkind { font: 700 12px/1 var(--ui-font); letter-spacing: .16em; text-transform: uppercase; color: #7a5a2a; }
.mmcardart { flex: 1; min-height: 0; display: grid; place-items: center; }
.mmcardsvg { width: 150px; height: 130px; }
.mmcardname { font: 400 26px/1.05 var(--display); text-align: center; text-wrap: balance; }
.mmcardfoot { font: italic 400 13px/1 var(--display); color: #7a6a50; }

/* ── the dice: ivory bone ──────────────────────────────────────────────── */
.mmdicepair { display: inline-flex; gap: 6px; }
.mmdie { width: 32px; height: 32px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)) drop-shadow(1px 4px 5px rgba(0, 0, 0, .4)); }
.mmdie .face { fill: #f2e8cf; }
.mmdie .edge { fill: none; stroke: #fffaf0; stroke-width: 1; opacity: .7; }
.mmdie .pip { fill: var(--nb-ink); }
.mmdie.rolling { animation: mmroll 600ms cubic-bezier(.2, .7, .2, 1); }
@keyframes mmroll { 0% { transform: rotate(-200deg) translateY(-10px); opacity: .3; } 70% { transform: rotate(12deg); opacity: 1; } }

/* ── the cameos ─────────────────────────────────────────────────────────── */
.mmcameo { display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)) drop-shadow(1px 6px 8px rgba(0, 0, 0, .45)); }
.mmhicon { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }

/* ── the detective's notebook: green leather, parchment pages ─────────── */
.nbook { position: relative; min-height: 0; display: flex; flex-direction: column; }
.nbcover {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: 10px; border-radius: 12px;
  background: linear-gradient(135deg, var(--leather-hi), var(--leather) 55%, var(--leather-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .45), 0 18px 34px rgba(0, 0, 0, .45);
}
.nbcover::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(201, 164, 92, .55); border-radius: 9px; pointer-events: none; }
.nbpage {
  --row: 18px; --colw: 46px;
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: 8px 12px 8px 16px; border-radius: 4px 6px 6px 4px;
  background: linear-gradient(90deg, #d6c7a1 0, #ece1c4 14px, var(--parch) 70%, #efe4c8 100%); color: var(--nb-ink);
  box-shadow: 2px 2px 0 #d9caa3, 4px 4px 0 #c6b588, 4px 4px 0 1px rgba(0, 0, 0, .25);
  container-type: size;
}
.nbhead { flex: none; display: flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 2px; }
.nbtitles { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; flex-wrap: wrap; row-gap: 0; }
.nbtitle { margin: 0; font: 400 20px/1.1 var(--display); white-space: nowrap; }
.nbsub { font: italic 400 14px/1.2 var(--display); color: var(--nb-ink-soft); white-space: nowrap; }
.nbhintbtn {
  flex: none; height: 32px; padding: 0 6px; border: 0; background: none; color: var(--nb-ink); cursor: pointer;
  font: 700 15px/1 var(--ui-font); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.nbtabs { flex: none; display: flex; height: 32px; box-sizing: border-box; border: 1.5px solid #9c8b66; border-radius: 8px; overflow: hidden; }
.nbtabs button { height: 100%; padding: 0 12px; border: 0; background: transparent; color: var(--nb-ink); font: 500 14px/1 var(--ui-font); cursor: pointer; white-space: nowrap; }
.nbtabs button.on { background: rgba(43, 33, 24, .12); box-shadow: inset 0 0 0 2px var(--nb-ink); font-weight: 800; }
.nbtabs button:focus-visible, .nbhintbtn:focus-visible, .nbdone:focus-visible { outline: 2px solid var(--nb-pick); outline-offset: 2px; }
.nbdone { display: none; }
.nbbody { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0 -6px 0 -4px; padding: 0 6px 0 4px; }
.nbook.footopen .nbbody { padding-bottom: 150px; }

/* the clues: a table, you first */
.nbgridwrap { overflow-x: auto; }
.nbgrid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.nbgrid col.c { width: var(--colw); }
.nbgrid th, .nbgrid td { padding: 0; }
.nbcols th {
  width: var(--colw); height: 22px; padding: 0 3px 4px; vertical-align: bottom; text-align: center; font: 800 13px/1 var(--ui-font); color: #3a2e20;
  border-bottom: 3px solid var(--col); background-clip: padding-box;
}
.nbcols th span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbcols th, .nbcols .nbcorner { position: sticky; top: 0; z-index: 2; background-color: #f2e8cf; }
.nbcols .nbcorner { width: auto; }
.nbsec th { height: calc(var(--row) - 2px); padding-top: 4px; box-sizing: border-box; border-bottom: 1px solid var(--parch-edge); text-align: left; font: 700 12px/1 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: var(--nb-ink-soft); vertical-align: bottom; }
.nbgrid tbody tr:not(.nbsec) { height: var(--row); border-bottom: 1px solid var(--parch-rule); }
.nbname { text-align: left; font: 700 14px/1 var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.nbname > * { vertical-align: middle; }
.nbname.out .nbnm { font-weight: 400; color: #8a7a62; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.nbname.sealed .nbnm { color: var(--nb-green); }
.nbsw { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.nbup { margin-left: 6px; font: italic 400 13px/1 var(--display); color: #7a6a50; }
.nbsealed { width: 13px; height: 13px; margin-left: 6px; fill: rgba(139, 30, 43, .85); stroke: #5a1018; stroke-width: 1; }
.nbgrid td { border-left: 1px solid #e2d5b2; }
.nbcell {
  all: unset; box-sizing: border-box; display: grid; place-items: center; width: 100%; height: calc(var(--row) - 1px); cursor: pointer; position: relative;
}
.nbcell:focus-visible { box-shadow: inset 0 0 0 2px var(--nb-pick); }
@media (hover: hover) { .nbcell:hover { background: rgba(43, 33, 24, .06); } }
.nbgrid td.picked .nbcell { box-shadow: inset 0 0 0 2.5px var(--nb-pick); background: rgba(47, 95, 179, .1); }
.nbgrid td.lit { background: color-mix(in srgb, var(--focus-tag, #7a3f73) 14%, transparent); }
.nbgrid td.lit .nbcell { box-shadow: inset 0 0 0 2px #7a3f73; }
.nbgrid td.hinted .nbcell { box-shadow: inset 0 0 0 2.5px #b0801e; background: rgba(233, 196, 106, .42); }
.nbgrid td.fresh { animation: nbfresh 2.4s ease-out; }
@keyframes nbfresh { 0%, 40% { background: rgba(233, 196, 106, .55); box-shadow: inset 0 0 0 1.5px rgba(176, 128, 30, .8); } }
.nbicon { width: 12px; height: 12px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nbicon.has { width: 14px; height: 14px; stroke: var(--nb-green); stroke-width: 2.6; }
.nbicon.not { stroke: #3a2c1e; stroke-width: 2.4; }
.nbicon.phas, .nbicon.pnot { stroke: var(--graphite); stroke-width: 1.9; width: 14px; height: 14px; }
.nbicon.card { fill: #efe5cc; stroke: #3a2c1e; stroke-width: 1.5; width: 12px; height: 15px; }
.nbicon.seal { fill: none; stroke: #8b1e2b; stroke-width: 1.6; }
.nbq { font: 700 15px/1 "Kalam", cursive; color: var(--graphite); }
.nbdash { display: block; width: 10px; height: 1.5px; background: #a8977a; }
.nbtags { display: inline-flex; gap: 2px; }
.nbtag {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 3px; border-radius: 999px;
  font: 800 12px/1 var(--ui-font); color: #fff; background: var(--tag, #7a5a1e); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); font-variant-numeric: tabular-nums;
}
.nblegend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0 4px; font: 400 13px/1.3 var(--ui-font); color: #5b4d38; }
.nblegend > span { display: inline-flex; align-items: center; gap: 6px; }
.nbook.blankmode .nblegend > span:first-child { display: none; }

/* the strip at the foot: a cell's story, a hint, your pencil */
.nbfoot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
.nbfoot:empty { display: none; }
.nbstrip {
  margin: 0 4px 4px; padding: 10px 12px 12px; border-radius: 8px; border-top: 1.5px solid var(--parch-edge); background: #efe3c3;
  box-shadow: 0 -8px 16px rgba(60, 40, 20, .14); display: flex; flex-direction: column; gap: 8px; max-height: 60cqh; overflow: auto;
}
.nbstrip p { margin: 0; font: 400 15px/1.4 var(--ui-font); color: #3a2e20; }
.nbstriphead { display: flex; align-items: center; gap: 8px; }
.nbstriphead b { flex: 1; font: 700 16px/1.25 var(--ui-font); }
.nbclose { all: unset; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; color: var(--nb-ink); margin: -6px -6px -6px 0; }
.nbclose svg { width: 14px; height: 14px; }
.nbclose:focus-visible { box-shadow: inset 0 0 0 2px var(--nb-pick); }
.nbink { display: flex; gap: 8px; align-items: baseline; }
.nbink .nbicon { flex: none; translate: 0 2px; }
.nbhinttext b { color: #6b4a0e; }
.nbstory { border-left: 4px solid var(--tag); padding-left: 10px; display: flex; flex-direction: column; gap: 6px; }
.nbstoryhead { display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--ui-font); }
.nbstory .nbtag { width: 22px; height: 22px; }
.nbtoledger.btn { align-self: flex-start; --btn2-ink: var(--nb-ink); --btn2-edge: 2px solid var(--nb-ink); color: var(--nb-ink); border-color: var(--nb-ink); min-height: 36px; }
.nbpencil { display: flex; flex-direction: column; gap: 6px; }
.nbpenlabel { font: italic 400 14px/1 var(--display); color: #5b4d38; }
.nbpenrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.nbpen {
  all: unset; box-sizing: border-box; height: 36px; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid #9c8b66; background: var(--parch-hi); color: var(--nb-ink); font: 700 15px/1 var(--ui-font); white-space: nowrap;
}
.nbpen.on { background: rgba(43, 33, 24, .12); box-shadow: inset 0 0 0 2px var(--nb-ink); }
.nbpen:focus-visible { outline: 2px solid var(--nb-pick); outline-offset: 2px; }

/* the ledger */
.nbledger { padding: 4px 0 12px; }
.nbchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; }
.nbchip {
  all: unset; box-sizing: border-box; height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #b8a77f; cursor: pointer;
  font: 500 14px/1 var(--ui-font); color: var(--nb-ink); display: inline-flex; align-items: center;
}
.nbchip.on { border-color: transparent; background: rgba(43, 33, 24, .12); box-shadow: inset 0 0 0 2px var(--nb-ink); font-weight: 800; }
.nbchip:focus-visible { outline: 2px solid var(--nb-pick); outline-offset: 2px; }
.nbentries { list-style: none; margin: 0; padding: 0; }
.nbentry { padding: 10px 0 12px; border-bottom: 1px solid #e0d2ae; }
.nbentry.lit { background: rgba(122, 63, 115, .1); margin: 0 -8px; padding: 10px 8px 12px; border-radius: 8px; }
.nbentryhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nbturn {
  all: unset; box-sizing: border-box; width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: 800 13px/1 var(--ui-font); color: #fff; background: var(--tag, #7a5a1e); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); font-variant-numeric: tabular-nums;
}
.nbturn.still { cursor: default; background: #8a7a62; }
.nbturn:focus-visible { outline: 2px solid var(--nb-pick); outline-offset: 2px; }
.nbasker { font: 700 16px/1.2 var(--ui-font); }
.nbwhere { font: italic 400 15px/1.2 var(--display); color: #5b4d38; }
.nbtrios { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 6px 36px; }
.nbtrio { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: #e7dcbf; font: 700 13px/1 var(--ui-font); }
.nbanswers { list-style: none; margin: 0; padding: 0 0 0 36px; display: flex; flex-direction: column; gap: 3px; font: 400 15px/1.3 var(--ui-font); color: #3a2e20; }
.nbanswers li { display: flex; align-items: center; gap: 7px; }
.nbanswers li.none { color: var(--nb-ink-soft); }
.nbanswers li.none .nbicon { stroke: #8a7a62; stroke-width: 2.2; }
.nbanswers li.mine { font-weight: 700; color: var(--nb-green); }
.nbanswers li.nobody, .nbanswers li.waiting { font-style: italic; color: var(--nb-ink-soft); }
.nbaccused { margin: 6px 0 0 36px; font: 400 15px/1.35 var(--ui-font); }
.nbentry.accuse.right .nbaccused b { color: var(--nb-green); }
.nbentry.accuse.wrong .nbaccused b { color: #8c2a2a; }
.nbempty { margin: 12px 0; font: italic 400 15px/1.4 var(--display); color: var(--nb-ink-soft); }

/* a narrow notebook on a computer (a tall window's), and a big one */
@container (min-height: 600px) { .nbpage { --row: clamp(18px, calc((100cqh - 150px) / 22), 28px); } }

/* on a touch screen: rows and columns a finger's size; the grid scrolls
   sideways with its names held, when six players don't fit */
@media (pointer: coarse) {
  .nbpage { --row: 44px; --colw: 44px; }
  .nbgrid { width: auto; min-width: 100%; }
  .nbgrid .nbname { position: sticky; left: 0; z-index: 1; background: var(--parch); min-width: 112px; max-width: 150px; width: 40%; font-size: 15px; }
  .nbcols .nbcorner { position: sticky; left: 0; z-index: 3; }
  .nbtabs { height: 44px; }
  .nbhintbtn, .nbclose { height: 44px; min-width: 44px; }
  .nbpen, .nbchip { height: 44px; }
  .nbturn { width: 32px; height: 32px; }
  .nbturn::before { content: ''; position: absolute; width: 44px; height: 44px; }
  .nbtoledger.btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .mmeyes, .mmghost, .mmflame, .mmdie.rolling, .nbgrid td.fresh { animation: none; }
  .mmpawn, .mmplan.opened .mmflap, .mmplan.opened .mmseal { transition: none; }
}