---
title: "Endgame Review, Halvorsen vs Beaumont (Shilling Gambit)"
platform: ios
slug: endgame-review-halvorsen-vs-beaumont-shilling-gambit
screens: []
domains: ["gaming"]
style: "retro"
fonts: ["Space Mono", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "toolbar"]
score: {clean: 100, consistent: 71, accessible: 70, comprehensible: 16}
url: https://gui.farm/ios/endgame-review-halvorsen-vs-beaumont-shilling-gambit
raw: https://gui.farm/ios/endgame-review-halvorsen-vs-beaumont-shilling-gambit/design.guix
download: https://gui.farm/ios/endgame-review-halvorsen-vs-beaumont-shilling-gambit.gui
---

# Endgame Review, Halvorsen vs Beaumont (Shilling Gambit)

A retro amber-CRT iOS post-game chess review showing the final smothered-mate position on a coordinate board, an evaluation curve, side-by-side player accuracy with a move-quality breakdown, and the game's key blunders and brilliant move.

- **Live preview:** https://gui.farm/ios/endgame-review-halvorsen-vs-beaumont-shilling-gambit
- **Raw source:** https://gui.farm/ios/endgame-review-halvorsen-vs-beaumont-shilling-gambit/design.guix
- **Download (.gui):** https://gui.farm/ios/endgame-review-halvorsen-vs-beaumont-shilling-gambit.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Endgame Review, Halvorsen vs Beaumont (Shilling Gambit)">
  <mode name="theme" values="light dark" default="dark" />

  <tokens>
    <color name="bg"       value="#100D08" />
    <color name="panel"    value="#1A1610" />
    <color name="panel2"   value="#231E15" />
    <color name="hair"     value="#302A1F" />
    <color name="ink"      value="#F4ECD8" />
    <color name="ink-2"    value="#B7AC93" />
    <color name="ink-3"    value="#9A9179" />
    <color name="amber"    value="#F2A93B" />
    <color name="amber-2"  value="#C98A2A" />
    <color name="amber-dp" value="#8A5A10" />
    <color name="glow"     value="#F2A93B" />
    <color name="red"      value="#E5563B" />
    <color name="red-dp"   value="#B23A22" />
    <color name="sql"      value="#4C4534" />
    <color name="sqd"      value="#22201A" />
    <color name="hl-from"  value="#3C2C10" />
    <color name="hl-to"    value="#4E3A12" />

    <number name="r-card" value="4" />
    <number name="r-pill" value="999" />
  </tokens>

  <styles>
    <text-style name="NavTitle" font-family="Space Mono" font-size="14" font-weight="700" line-height="17" letter-spacing="0.5" />
    <text-style name="NavSub"   font-family="Space Mono" font-size="10" font-weight="700" line-height="13" letter-spacing="1.2" />
    <text-style name="Eyebrow"  font-family="Space Mono" font-size="10" font-weight="700" line-height="13" letter-spacing="1.4" />
    <text-style name="Label"    font-family="Space Mono" font-size="11" font-weight="700" line-height="14" letter-spacing="0.6" />
    <text-style name="H2"       font-family="Space Mono" font-size="14" font-weight="700" line-height="17" letter-spacing="0.4" />
    <text-style name="Result"   font-family="Space Mono" font-size="30" font-weight="700" line-height="32" letter-spacing="-0.5" />
    <text-style name="BigPct"   font-family="Space Mono" font-size="29" font-weight="700" line-height="31" letter-spacing="-1" />
    <text-style name="Mono"     font-family="Space Mono" font-size="12" font-weight="400" line-height="16" />
    <text-style name="MonoB"    font-family="Space Mono" font-size="12" font-weight="700" line-height="16" />
    <text-style name="MonoV"    font-family="Space Mono" font-size="13" font-weight="700" line-height="17" />
    <text-style name="Piece"    font-family="Space Mono" font-size="20" font-weight="700" line-height="24" />
    <text-style name="Coord"    font-family="Space Mono" font-size="10" font-weight="700" line-height="13" letter-spacing="0.5" />
    <text-style name="KeyMove"  font-family="Space Mono" font-size="14" font-weight="700" line-height="18" letter-spacing="0.2" />
    <text-style name="Mono10"   font-family="Space Mono" font-size="10" font-weight="700" line-height="13" letter-spacing="1" />
    <text-style name="Player"   font-family="SF Pro Display" font-size="16" font-weight="700" line-height="20" />
    <text-style name="Body"     font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Sub"      font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Status"   font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" />
  </styles>

  <fonts>
    <font family="Space Mono" source="google" weights="400 700" styles="normal" />
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>

  <col w="393" fill="$bg" pb="0" gap="0" align="top-center">

    <!-- Status bar (device chrome, untagged) -->
    <row w="393" h="50" p="16 20 0 20" align="middle-left">
      <text w="fill" value="9:41" text-style="Status" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23F4ECD8" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F4ECD8" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F4ECD8" w="24" h="17" />
      </row>
    </row>

    <!-- Top navigation -->
    <row w="393" h="56" p="0 16" gap="10" align="middle-left" fill="$bg" border-bottom="2 $hair" role="top-navigation-bar">
      <col w="40" h="40" fill="$panel" border="2 $hair" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23F4ECD8" w="22" h="22" />
      </col>
      <col w="fill" gap="2" align="middle-left">
        <text value="GAME REVIEW" text-style="NavTitle" color="$ink" />
        <text value="RUY LOPEZ ARENA · 8 MIN AGO" text-style="NavSub" color="$amber-2" />
      </col>
      <col w="40" h="40" fill="$panel" border="2 $hair" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/share-2.svg?color=%23F4ECD8" w="18" h="18" />
      </col>
    </row>

    <!-- Body -->
    <col w="393" p="14 20 18 20" gap="13">

      <!-- Matchup header card -->
      <col w="353" fill="$panel" border="2 $hair" p="16" gap="14" role="card">
        <row w="321" gap="10" align="middle-left">
          <col fill="$amber" p="5 11" align="middle-center" role="badge">
            <text value="0-1" text-style="Result" color="$bg" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text value="BLACK WINS BY CHECKMATE" text-style="Label" color="$amber" />
            <text value="Blackburne Shilling Gambit" text-style="MonoB" color="$ink" />
          </col>
          <col fill="$panel2" border="2 $hair" p="6 8" align="middle-center" role="badge">
            <text value="C50" text-style="Mono10" color="$ink-2" />
          </col>
        </row>
        <text w="321" value="RAPID 10+0 · CLUB ARENA · AUG 14, 2026" text-style="Mono10" color="$ink-3" />
        <line w="321" fill="$hair" thickness="2" role="divider" />

        <!-- Black player (winner) -->
        <row w="321" gap="12" align="middle-left">
          <col w="40" h="40" fill="$amber" border="2 $ink" align="middle-center">
            <text value="MH" text-style="MonoB" color="$bg" />
          </col>
          <col w="fill" gap="2" align="middle-left">
            <row gap="8" align="middle-center">
              <rect w="11" h="11" radius="$r-pill" fill="$amber" />
              <text value="M. Halvorsen" text-style="Player" color="$ink" />
            </row>
            <text value="Black · 1846 (+8)" text-style="Sub" color="$ink-2" />
          </col>
          <col gap="2" align="middle-right">
            <text value="97.1%" text-style="MonoV" color="$amber" align="right" />
            <text value="ACCURACY" text-style="Mono10" color="$ink-3" align="right" />
          </col>
        </row>

        <!-- White player -->
        <row w="321" gap="12" align="middle-left">
          <col w="40" h="40" fill="$panel2" border="2 $ink-3" align="middle-center">
            <text value="RB" text-style="MonoB" color="$ink" />
          </col>
          <col w="fill" gap="2" align="middle-left">
            <row gap="8" align="middle-center">
              <rect w="11" h="11" radius="$r-pill" fill="$panel" border="2 $ink-2" />
              <text value="R. Beaumont" text-style="Player" color="$ink" />
            </row>
            <text value="White · 1791 (-8)" text-style="Sub" color="$ink-2" />
          </col>
          <col gap="2" align="middle-right">
            <text value="42.6%" text-style="MonoV" color="$ink-2" align="right" />
            <text value="ACCURACY" text-style="Mono10" color="$ink-3" align="right" />
          </col>
        </row>
      </col>

      <!-- Board card -->
      <col w="353" fill="$panel" border="2 $hair" p="14" gap="11" role="card">
        <row w="325" align="middle-left">
          <text w="fill" value="FINAL POSITION" text-style="H2" color="$ink" />
          <text value="7...Nf3#" text-style="MonoV" color="$amber" align="right" />
        </row>

        <col w="fill" gap="3" align="top-center">
          <row w="320" gap="0" align="top-left">
            <!-- rank gutter -->
            <col w="16" gap="0">
              <col w="16" h="38" align="middle-center"><text value="8" text-style="Coord" color="$ink-3" /></col>
              <col w="16" h="38" align="middle-center"><text value="7" text-style="Coord" color="$ink-3" /></col>
              <col w="16" h="38" align="middle-center"><text value="6" text-style="Coord" color="$ink-3" /></col>
              <col w="16" h="38" align="middle-center"><text value="5" text-style="Coord" color="$ink-3" /></col>
              <col w="16" h="38" align="middle-center"><text value="4" text-style="Coord" color="$ink-3" /></col>
              <col w="16" h="38" align="middle-center"><text value="3" text-style="Coord" color="$ink-3" /></col>
              <col w="16" h="38" align="middle-center"><text value="2" text-style="Coord" color="$ink-3" /></col>
              <col w="16" h="38" align="middle-center"><text value="1" text-style="Coord" color="$ink-3" /></col>
            </col>
            <!-- board 8x38 = 304 -->
            <col w="304" gap="0" border="2 $hair">
              <!-- rank 8: r . b . k b n r  (start light) -->
              <row w="304" h="38" gap="0">
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="r" text-style="Piece" color="$amber" /></col>
                <rect w="38" h="38" fill="$sqd" />
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="b" text-style="Piece" color="$amber" /></col>
                <rect w="38" h="38" fill="$sqd" />
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="k" text-style="Piece" color="$amber" /></col>
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="b" text-style="Piece" color="$amber" /></col>
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="n" text-style="Piece" color="$amber" /></col>
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="r" text-style="Piece" color="$amber" /></col>
              </row>
              <!-- rank 7: p p p p . N p p  (start dark) -->
              <row w="304" h="38" gap="0">
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="p" text-style="Piece" color="$amber" /></col>
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="p" text-style="Piece" color="$amber" /></col>
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="p" text-style="Piece" color="$amber" /></col>
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="p" text-style="Piece" color="$amber" /></col>
                <rect w="38" h="38" fill="$sqd" />
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="N" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="p" text-style="Piece" color="$amber" /></col>
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="p" text-style="Piece" color="$amber" /></col>
              </row>
              <!-- rank 6: empty (start light) -->
              <row w="304" h="38" gap="0">
                <rect w="38" h="38" fill="$sql" /><rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" /><rect w="38" h="38" fill="$sqd" />
                <rect w="38" h="38" fill="$sql" /><rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" /><rect w="38" h="38" fill="$sqd" />
              </row>
              <!-- rank 5: empty (start dark) -->
              <row w="304" h="38" gap="0">
                <rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" /><rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" />
                <rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" /><rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" />
              </row>
              <!-- rank 4: . . . [d4 from] q . . .  (start light) -->
              <row w="304" h="38" gap="0">
                <rect w="38" h="38" fill="$sql" /><rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" />
                <rect w="38" h="38" fill="$hl-from" />
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="q" text-style="Piece" color="$amber" /></col>
                <rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" /><rect w="38" h="38" fill="$sqd" />
              </row>
              <!-- rank 3: . . . . . [f3 to n] . .  (start dark) -->
              <row w="304" h="38" gap="0">
                <rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" /><rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" /><rect w="38" h="38" fill="$sqd" />
                <col w="38" h="38" fill="$hl-to" border="2 $amber" align="middle-center"><text value="n" text-style="Piece" color="$amber" /></col>
                <rect w="38" h="38" fill="$sqd" /><rect w="38" h="38" fill="$sql" />
              </row>
              <!-- rank 2: P P P P B P . P  (start light) -->
              <row w="304" h="38" gap="0">
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="P" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="P" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="P" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="P" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="B" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="P" text-style="Piece" color="$ink" /></col>
                <rect w="38" h="38" fill="$sql" />
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="P" text-style="Piece" color="$ink" /></col>
              </row>
              <!-- rank 1: R N B Q [e1 K mated] R . .  (start dark) -->
              <row w="304" h="38" gap="0">
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="R" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="N" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sqd" align="middle-center"><text value="B" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="Q" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sqd" border="2 $red" align="middle-center"><text value="K" text-style="Piece" color="$ink" /></col>
                <col w="38" h="38" fill="$sql" align="middle-center"><text value="R" text-style="Piece" color="$ink" /></col>
                <rect w="38" h="38" fill="$sqd" />
                <rect w="38" h="38" fill="$sql" />
              </row>
            </col>
          </row>
          <!-- file letters -->
          <row w="320" gap="0" align="top-left" pt="3" pl="16">
            <row w="304" gap="0">
              <col w="38" align="middle-center"><text value="a" text-style="Coord" color="$ink-3" /></col>
              <col w="38" align="middle-center"><text value="b" text-style="Coord" color="$ink-3" /></col>
              <col w="38" align="middle-center"><text value="c" text-style="Coord" color="$ink-3" /></col>
              <col w="38" align="middle-center"><text value="d" text-style="Coord" color="$ink-3" /></col>
              <col w="38" align="middle-center"><text value="e" text-style="Coord" color="$ink-3" /></col>
              <col w="38" align="middle-center"><text value="f" text-style="Coord" color="$ink-3" /></col>
              <col w="38" align="middle-center"><text value="g" text-style="Coord" color="$ink-3" /></col>
              <col w="38" align="middle-center"><text value="h" text-style="Coord" color="$ink-3" /></col>
            </row>
          </row>
        </col>

        <row w="325" gap="9" fill="$panel2" border="1 $hair" p="10 12" align="top-left">
          <img src="https://api.iconify.design/lucide/message-square-text.svg?color=%23F2A93B" w="17" h="17" />
          <text w="fill" value="Smothered mate. The knight lands on f3 and the bishop on e2 is pinned to the king, so it cannot capture." text-style="Body" color="$ink-2" />
        </row>
      </col>

      <!-- Evaluation graph card -->
      <col w="353" fill="$panel" border="2 $hair" p="16" gap="12" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="EVALUATION" text-style="H2" color="$ink" />
          <text value="PAWNS · DEPTH 22" text-style="Mono10" color="$ink-3" align="right" />
        </row>
        <img src="https://gui.farm/tools/charts/line-chart.svg?data=0:0.2,1:0.1,2:0.3,3:0.2,4:0.3,5:0.5,6:-1.4,7:-1.6,8:-3.6,9:-4.1,10:-4.6,11:-6,12:-6,13:-8&amp;line=%23F2A93B&amp;surface=dark&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=show&amp;xlabels=hide&amp;ylabels=show&amp;width=642&amp;height=300" w="321" h="150" />
        <row w="321" gap="16" align="middle-left">
          <row gap="7" align="middle-center">
            <rect w="11" h="11" fill="$amber" />
            <text value="ABOVE 0 = WHITE" text-style="Mono10" color="$ink-3" />
          </row>
          <row gap="7" align="middle-center">
            <rect w="11" h="11" fill="$red" />
            <text value="2 BLUNDERS BY WHITE" text-style="Mono10" color="$ink-3" />
          </row>
        </row>
      </col>

      <!-- Accuracy + move quality card -->
      <col w="353" fill="$panel" border="2 $hair" p="16" gap="14" role="card">
        <text w="321" value="ACCURACY" text-style="H2" color="$ink" />
        <row w="321" gap="12" align="bottom-left">
          <col w="fill" gap="3" align="middle-left">
            <text value="97.1%" text-style="BigPct" color="$amber" />
            <text value="BLACK · HALVORSEN" text-style="Mono10" color="$ink-2" />
          </col>
          <col w="fill" gap="3" align="middle-right">
            <text value="42.6%" text-style="BigPct" color="$ink-2" align="right" />
            <text value="WHITE · BEAUMONT" text-style="Mono10" color="$ink-3" align="right" />
          </col>
        </row>
        <col w="321" gap="7">
          <frame w="321" h="12" fill="$panel2" clip="true">
            <rect x="0" y="0" w="312" h="12" fill="$amber" />
          </frame>
          <frame w="321" h="12" fill="$panel2" clip="true">
            <rect x="0" y="0" w="137" h="12" fill="$ink-3" />
          </frame>
        </col>

        <line w="321" fill="$hair" thickness="2" role="divider" />

        <row w="321" align="middle-left">
          <text w="fill" value="MOVE QUALITY" text-style="Label" color="$ink-2" />
          <text value="BLACK / WHITE" text-style="Mono10" color="$ink-3" align="right" />
        </row>
        <col w="321" gap="10">
          <row w="321" gap="12" align="middle-center">
            <text w="24" value="2" text-style="MonoV" color="$amber" />
            <rect w="10" h="10" fill="$amber" />
            <text w="fill" value="Brilliant" text-style="Body" color="$ink" />
            <text w="24" value="0" text-style="MonoV" color="$ink-3" align="right" />
          </row>
          <row w="321" gap="12" align="middle-center">
            <text w="24" value="3" text-style="MonoV" color="$amber" />
            <rect w="10" h="10" fill="$amber-2" />
            <text w="fill" value="Best move" text-style="Body" color="$ink" />
            <text w="24" value="0" text-style="MonoV" color="$ink-3" align="right" />
          </row>
          <row w="321" gap="12" align="middle-center">
            <text w="24" value="2" text-style="MonoV" color="$ink-2" />
            <rect w="10" h="10" fill="$ink-3" />
            <text w="fill" value="Book" text-style="Body" color="$ink" />
            <text w="24" value="3" text-style="MonoV" color="$ink-2" align="right" />
          </row>
          <row w="321" gap="12" align="middle-center">
            <text w="24" value="0" text-style="MonoV" color="$ink-3" />
            <rect w="10" h="10" fill="$amber-dp" />
            <text w="fill" value="Forced" text-style="Body" color="$ink" />
            <text w="24" value="2" text-style="MonoV" color="$ink-2" align="right" />
          </row>
          <row w="321" gap="12" align="middle-center">
            <text w="24" value="0" text-style="MonoV" color="$ink-3" />
            <rect w="10" h="10" fill="$red" />
            <text w="fill" value="Blunder" text-style="Body" color="$ink" />
            <text w="24" value="2" text-style="MonoV" color="$red" align="right" />
          </row>
        </col>
      </col>

      <!-- Key moments card -->
      <col w="353" fill="$panel" border="2 $hair" p="16" gap="13" role="card">
        <text w="321" value="KEY MOMENTS" text-style="H2" color="$ink" />

        <row w="321" gap="12" align="top-left">
          <col w="42" gap="3" align="middle-center">
            <text value="4." text-style="Mono10" color="$ink-3" align="center" />
            <col fill="$red" p="4 7" align="middle-center"><text value="??" text-style="MonoB" color="$bg" /></col>
          </col>
          <col w="fill" gap="3" align="top-left">
            <row gap="8" align="baseline">
              <text value="Nxe5" text-style="KeyMove" color="$ink" />
              <text value="BLUNDER" text-style="Mono10" color="$red" />
            </row>
            <text value="Grabs the e5 pawn and steps into the trap. Qg5 hits g2 and e5 at once." text-style="Body" color="$ink-2" />
          </col>
          <text value="+0.5 to -1.4" text-style="Mono" color="$red" align="right" />
        </row>
        <line w="321" fill="$hair" thickness="1" role="divider" />

        <row w="321" gap="12" align="top-left">
          <col w="42" gap="3" align="middle-center">
            <text value="5." text-style="Mono10" color="$ink-3" align="center" />
            <col fill="$red" p="4 7" align="middle-center"><text value="??" text-style="MonoB" color="$bg" /></col>
          </col>
          <col w="fill" gap="3" align="top-left">
            <row gap="8" align="baseline">
              <text value="Nxf7" text-style="KeyMove" color="$ink" />
              <text value="BLUNDER" text-style="Mono10" color="$red" />
            </row>
            <text value="Forks queen and rook, but Qxg2 wins first. The decisive error." text-style="Body" color="$ink-2" />
          </col>
          <text value="-1.6 to -3.6" text-style="Mono" color="$red" align="right" />
        </row>
        <line w="321" fill="$hair" thickness="1" role="divider" />

        <row w="321" gap="12" align="top-left">
          <col w="42" gap="3" align="middle-center">
            <text value="7..." text-style="Mono10" color="$ink-3" align="center" />
            <col fill="$amber" p="4 7" align="middle-center"><text value="!!" text-style="MonoB" color="$bg" /></col>
          </col>
          <col w="fill" gap="3" align="top-left">
            <row gap="8" align="baseline">
              <text value="Nf3#" text-style="KeyMove" color="$amber" />
              <text value="BRILLIANT" text-style="Mono10" color="$amber" />
            </row>
            <text value="Smothered checkmate. The pinned e2 bishop cannot take the knight." text-style="Body" color="$ink-2" />
          </col>
          <text value="mate" text-style="Mono" color="$amber" align="right" />
        </row>
      </col>

    </col>

    <!-- Action bar (viewport-fixed, last flow child) -->
    <col w="393" fill="$panel" border-top="2 $hair" p="12 20 10 20" gap="10" role="toolbar">
      <row w="353" gap="10" align="middle-center">
        <row w="107" h="52" fill="$panel2" border="2 $hair" gap="8" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/share-2.svg?color=%23F4ECD8" w="17" h="17" />
          <text value="SHARE" text-style="MonoB" color="$ink" />
        </row>
        <row w="fill" h="52" fill="$amber" gap="9" align="middle-center" role="button">
          <appearance>
            <effect type="drop-shadow" x="0" y="3" radius="0" spread="0" color="#8A5A1066" />
          </appearance>
          <img src="https://api.iconify.design/lucide/rotate-ccw.svg?color=%23100D08" w="18" h="18" />
          <text value="REPLAY GAME" text-style="MonoV" color="$bg" />
        </row>
      </row>
    </col>

    <!-- Home indicator (device chrome, untagged) -->
    <frame w="393" h="24" clip="true">
      <rect fill="$ink" w="134" h="5" radius="3" x="130" y="9" />
    </frame>

  </col>
</gui>
```