Replace the party-board d20 wordmark with the compass-rose monogram lockup

The wordmark row now reads rule · monogram · NestQuest · rule, matching
design/logos/NestQuest_Logo.png. The monogram is an 80px inline SVG (compass
rose, broken ring, d20 hexagon with a knocked-out Cinzel Decorative "N")
filled with the brand gradient; no raster or remote asset. The d20 hexagon
styles and HEXAGON_CLIP are removed from the party board, PANEL-SPEC §2
item 1 describes the new row, and the bundle is rebuilt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

design/PANEL-SPEC.md

@@ -22,10 +22,14 @@ Screens `1a`, `1b`, `1j`, `1c` of the mockups. Two cards:
 
 Default view on the wall. Layout top to bottom:
 
-1. **Wordmark row** at y=64. Rule · d20 hexagon · `NestQuest` (66px/900 display, brand
-   gradient via `background-clip: text`) · d20 · rule. d20 marks are 34px hexagons
-   (`clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)`) filled with
-   the brand gradient, numeral 15px/700 Cinzel.
+1. **Wordmark row** at y=64. Rule · monogram · `NestQuest` (66px/900 Cinzel Decorative
+   display, brand gradient via `background-clip: text`) · rule — the horizontal lockup of
+   `design/logos/NestQuest_Logo.png`. The monogram is an 80px inline SVG (no raster, no
+   remote asset): a compass rose — four long cardinal points, four short diagonal points,
+   a ring broken by the points — around a d20 hexagon with facet lines and a knocked-out
+   Cinzel Decorative "N", filled with the brand gradient (`--nq-brand-blue` →
+   `--nq-brand-purple`, 135°). Gaps are SVG masks, so the mark stays transparent over the
+   parchment.
 2. **Kicker** `The Party · <weekday>, <Month D>` — 21px/600 Cinzel, tracking .30em, uppercase.
 3. **Adventurer plates**, 3-up grid, 56px gap, page inset 110px, top y=262. One plate per
    child returned by the party sensor, in configured order.

frontend/src/cards/party-board.ts

@@ -231,8 +231,76 @@ function conditionPhrase(condition: string, label: string): string {
 }
 
 const SHIELD_CLIP = "polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%)";
-const HEXAGON_CLIP =
-  "polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)";
+// The brand monogram (design/logos/NestQuest_Logo.png): a compass rose —
+// four long cardinal points, four short diagonal points, a ring broken by
+// the points — around a d20 hexagon carrying a knocked-out "N". Drawn on
+// a 100-unit grid and filled with the brand gradient; the masks cut the
+// parchment gaps so the mark stays transparent on any backdrop.
+const MONOGRAM_POINTS =
+  "M50 3 44.5 24.1 50 26 55.5 24.1Z M100 50 75.9 44.5 74 50 75.9 55.5Z " +
+  "M50 97 55.5 75.9 50 74 44.5 75.9Z M0 50 24.1 55.5 26 50 24.1 44.5Z " +
+  "M29.1 29.1 29.7 36.3 36.3 29.7Z M70.9 29.1 63.7 29.7 70.3 36.3Z " +
+  "M70.9 70.9 70.3 63.7 63.7 70.3Z M29.1 70.9 36.3 70.3 29.7 63.7Z";
+const MONOGRAM_HEX = "M50 26.5 70.4 38.2 70.4 61.8 50 73.5 29.6 61.8 29.6 38.2Z";
+const MONOGRAM_FACETS =
+  "M29.6 38.2H70.4M29.6 61.8H70.4M50 26.5 36.5 38.2M50 26.5 63.5 38.2" +
+  "M50 73.5 36.5 61.8M50 73.5 63.5 61.8M36.5 38.2V61.8M63.5 38.2V61.8" +
+  "M29.6 38.2 36.5 61.8M36.5 38.2 29.6 61.8" +
+  "M70.4 38.2 63.5 61.8M63.5 38.2 70.4 61.8";
+const MONOGRAM = html`<svg
+  class="monogram"
+  viewBox="0 0 100 100"
+  aria-hidden="true"
+  focusable="false"
+>
+  <defs>
+    <linearGradient
+      id="nq-monogram-fill"
+      gradientUnits="userSpaceOnUse"
+      x1="0"
+      y1="0"
+      x2="100"
+      y2="100"
+    >
+      <stop offset="0" style="stop-color: var(--nq-brand-blue)" />
+      <stop offset="1" style="stop-color: var(--nq-brand-purple)" />
+    </linearGradient>
+    <mask id="nq-monogram-points-gap" maskUnits="userSpaceOnUse">
+      <rect width="100" height="100" fill="#fff" />
+      <path d=${MONOGRAM_POINTS} stroke="#000" stroke-width="3.5" />
+    </mask>
+    <mask id="nq-monogram-facets" maskUnits="userSpaceOnUse">
+      <rect width="100" height="100" fill="#fff" />
+      <path d=${MONOGRAM_FACETS} stroke="#000" stroke-width="1.6" />
+      <text
+        x="50"
+        y="59.4"
+        text-anchor="middle"
+        font-family="'Cinzel Decorative', Cinzel, serif"
+        font-weight="900"
+        font-size="25"
+        fill="#fff"
+        stroke="#000"
+        stroke-width="2"
+        paint-order="stroke"
+      >N</text>
+    </mask>
+  </defs>
+  <g fill="url(#nq-monogram-fill)">
+    <path d=${MONOGRAM_POINTS} />
+    <g mask="url(#nq-monogram-points-gap)">
+      <circle
+        cx="50"
+        cy="50"
+        r="34.25"
+        fill="none"
+        stroke="url(#nq-monogram-fill)"
+        stroke-width="6.5"
+      />
+      <path mask="url(#nq-monogram-facets)" d=${MONOGRAM_HEX} />
+    </g>
+  </g>
+</svg>`;
 
 const boardStyles = css`
   * {
@@ -299,23 +367,11 @@ const boardStyles = css`
     background: rgba(92, 62, 26, 0.35);
   }
 
-  .d20 {
+  .monogram {
     flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 34px;
-    height: 34px;
-    clip-path: ${unsafeCSS(HEXAGON_CLIP)};
-    background: var(--nq-brand-gradient);
-  }
-
-  .d20-numeral {
-    font-family: var(--nq-p-font-heading);
-    font-size: 15px;
-    font-weight: 700;
-    line-height: 1;
-    color: #ffffff;
+    display: block;
+    width: 80px;
+    height: 80px;
   }
 
   .wordmark {
@@ -497,11 +553,12 @@ const boardStyles = css`
 
   .hint {
     position: absolute;
-    top: 930px;
+    top: 896px;
     left: 0;
     right: 0;
+    margin: 0;
     font-family: var(--nq-p-font-body);
-    font-size: 24px;
+    font-size: 27px;
     font-weight: 600;
     line-height: 1.4;
     text-align: center;
@@ -861,13 +918,8 @@ export class NestQuestPartyBoardCard extends LitElement {
         <div class="frame frame-inner"></div>
         <div class="wordmark-row">
           <span class="rule"></span>
-          <span class="d20" aria-hidden="true">
-            <span class="d20-numeral">20</span>
-          </span>
+          ${MONOGRAM}
           <span class="wordmark">NestQuest</span>
-          <span class="d20" aria-hidden="true">
-            <span class="d20-numeral">20</span>
-          </span>
           <span class="rule"></span>
         </div>
         <p class="kicker">The Party · ${formatDay(this._now, this._timeZone())}</p>

frontend/src/cards/quest-log.ts

@@ -378,7 +378,7 @@ const logStyles = css`
     flex: none;
     width: 96px;
     height: 110px;
-    padding: 3px;
+    padding: 4px;
     clip-path: ${unsafeCSS(SHIELD_CLIP)};
     background: rgba(255, 255, 255, 0.22);
   }
@@ -1938,7 +1938,7 @@ export class NestQuestQuestLogCard extends LitElement {
     const initial = (name?.charAt(0) || "?").toUpperCase();
     return html`
       <header class="header">
-        <span class="crest${away ? " away" : nothing}" aria-hidden="true">
+        <span class="crest${away ? " away" : ""}" aria-hidden="true">
           <span class="crest-face">
             <span class="initial">${initial}</span>
           </span>

tests/test_panel_cards.py

@@ -411,6 +411,36 @@ def test_panel_hard_rules_hold_in_the_card_sources() -> None:
     assert "@click" not in sealed_template
 
 
+def test_party_board_hint_clears_the_dock() -> None:
+    """PANEL-SPEC §2/§2.3: the hint line reads fully above the dock at
+    1920x1080. The hint's line box (top + font-size x line-height) must
+    end above the dock's top edge (1080 - bottom inset - dock height)
+    with a visible gap, at the 27px/600 design size. The hint is a <p>,
+    so its user-agent 1em top margin must be reset or it shifts the box
+    down by a whole font-size."""
+    style = _style_literal(_read(PARTY_BOARD), STYLE_CONSTANTS[PARTY_BOARD])
+    rules = {selector.strip(): body for selector, body in _css_rules(style)}
+    sizes = _size_tokens(_read(REWARD_TOKENS))
+
+    def px(body: str, prop: str) -> float:
+        declared = re.search(rf"(?<![-\w]){prop}:\s*([^;]+);", body)
+        assert declared is not None, prop
+        value = _font_size_px(declared.group(1), sizes)
+        assert value is not None, f"{prop}: {declared.group(1)}"
+        return value
+
+    board, hint, dock = rules[".board"], rules[".hint"], rules[".dock"]
+    assert "margin: 0;" in hint
+    line_height = float(re.search(r"line-height:\s*([\d.]+);", hint).group(1))
+    hint_bottom = px(hint, "top") + px(hint, "font-size") * line_height
+    dock_top = px(board, "height") - px(dock, "bottom") - px(dock, "height")
+    assert px(dock, "height") == 84
+    assert px(dock, "bottom") == 46
+    assert hint_bottom + 12 <= dock_top, (hint_bottom, dock_top)
+    assert px(hint, "font-size") == 27
+    assert "font-weight: 600;" in hint
+
+
 def test_panel_text_sizes_respect_the_22px_floor() -> None:
     """PANEL-SPEC §1: no body text below 22px. Every font-size in the
     panel styles resolves against the panel size tokens or an explicit
@@ -570,6 +600,40 @@ def _render_party_board(
     return json.loads(completed.stdout)
 
 
+def test_party_board_wordmark_row_is_the_monogram_lockup() -> None:
+    """PANEL-SPEC §2 item 1: the wordmark row is rule · compass-rose
+    monogram · NestQuest · rule. The monogram is an inline SVG filled
+    with the brand gradient — the old d20 hexagon pair and its "20"
+    numerals are gone, and nothing is fetched from a remote URL or
+    embedded as a raster logo."""
+    source = _read(PARTY_BOARD)
+    assert "d20" not in _style_literal(source, STYLE_CONSTANTS[PARTY_BOARD])
+    assert 'class="d20' not in source
+    assert "HEXAGON_CLIP" not in source
+
+    html = _render_party_board(
+        {"type": "custom:nestquest-party-board-card"},
+        _three_child_states(),
+    )["html"]
+    row = re.search(r'<div class="wordmark-row">(.*?)</div>', html, re.DOTALL)
+    assert row is not None
+    row_html = row.group(1)
+    classes = re.findall(r'<(?:span|svg) class="([^"]+)"', row_html)
+    assert classes == ["rule", "monogram", "wordmark", "rule"]
+    assert '<svg class="monogram" viewBox="0 0 100 100" aria-hidden="true"' in row_html
+    assert "var(--nq-brand-blue)" in row_html
+    assert "var(--nq-brand-purple)" in row_html
+    assert ">N</text>" in row_html
+    assert ">NestQuest</span>" in row_html
+    assert "d20" not in row_html
+    assert "<img" not in row_html
+
+    bundle = _read(BUNDLE_PATH)
+    assert "d20-numeral\">20<" not in bundle
+    assert "data:image/png" not in bundle
+    assert not re.search(r"https?://", bundle)
+
+
 def test_party_board_renders_discovered_children_in_sort_order() -> None:
     """No child_order key: three plates render in the roster's sort
     order (the coordinator snapshot's order), one per child."""
@@ -886,3 +950,71 @@ def test_quest_complete_screen_returns_to_the_board_after_the_countdown() -> Non
     assert result["probe"]["countdown"] == "Returning to The Party in 1 seconds"
     # …and at zero the card has returned to the party board.
     assert result["location"] == "/nestquest"
+
+
+def test_quest_log_crest_keeps_its_shield_classes() -> None:
+    """PANEL-SPEC §3 header crest: a present child's crest renders as the
+    styled shield, not a bare span. Lit removes an attribute outright when
+    any interpolated part of it is ``nothing``, so a class written as
+    ``crest${away ? " away" : nothing}`` lost ``crest`` for every present
+    child and the header showed an unstyled sliver. The rendered markup
+    must carry ``class="crest"`` (present) and ``class="crest away"``
+    (away), each wrapping the face and initial."""
+    generated = _generate_dashboard(
+        {}, _three_child_states(), url="http://homeassistant.local/nestquest"
+    )
+    log_config = generated["views"][1]["cards"][0]
+    for slug, crest_class in (("ada", "crest"), ("bo", "crest away")):
+        result = _render_quest_log(
+            log_config,
+            _three_child_states(),
+            url=f"http://homeassistant.local/nestquest/{slug}",
+        )
+        header = result["html"][result["html"].index('<header class="header">') :]
+        crest = re.match(
+            r'<header class="header">\s*(?:<!--[^>]*-->\s*)*<span ([^>]*)>\s*'
+            r'<span class="crest-face">\s*<span class="initial">',
+            header,
+        )
+        assert crest is not None, header[:600]
+        assert f'class="{crest_class}"' in crest.group(1), crest.group(1)
+
+
+def test_quest_log_crest_matches_the_spec_geometry() -> None:
+    """PANEL-SPEC §3 header crest: 96x110 shield, 4px ring of
+    rgba(255,255,255,.22) around the --nq-p-crest face, 44px/700 display
+    initial in full-opacity white; away swaps only the face gradient.
+    jsdom cannot lay out, so this pins the stylesheet the rendered test
+    above shows is applied."""
+    source = QUEST_LOG.read_text(encoding="utf-8")
+
+    def rule(selector: str) -> str:
+        found = re.search(
+            r"\n  " + re.escape(selector) + r" \{(.*?)\n  \}", source, re.DOTALL
+        )
+        assert found is not None, selector
+        return found.group(1)
+
+    crest = rule(".crest")
+    for decl in (
+        "width: 96px;",
+        "height: 110px;",
+        "padding: 4px;",
+        "clip-path: ${unsafeCSS(SHIELD_CLIP)};",
+        "background: rgba(255, 255, 255, 0.22);",
+    ):
+        assert decl in crest, decl
+    face = rule(".crest-face")
+    assert "background: var(--nq-p-crest);" in face
+    assert "clip-path: ${unsafeCSS(SHIELD_CLIP)};" in face
+    initial = rule(".crest .initial")
+    for decl in (
+        "font-family: var(--nq-p-font-display);",
+        "font-size: 44px;",
+        "font-weight: 700;",
+        "color: #ffffff;",
+    ):
+        assert decl in initial, decl
+    assert "opacity" not in initial
+    away = rule(".crest.away .crest-face")
+    assert away.strip() == "background: var(--nq-p-crest-away);"