v4.1.0: add the egui workspace member and the roulette style spike

Phase 3 of the GUI plan. gui/ is a separate package that depends on the core with default features off, so egui never enters the TUI or server build graph. It carries the theme tokens and two embedded fonts (Open Sans OFL, Hack MIT), paints the felt, chips, cursor and wheel from RouletteView, and composes the persistent header with the betting sidebar.

The reference screen runs on demo state: arrow keys move the shared Cursor, clicks place chips, and SPIN animates a 2.4 s wheel that settles with the winning pocket under the pointer. No network until Phase 4.

Verified x86_64-pc-windows-gnu cross-compile. Measured on Linux at 1080p with llvmpipe: 6.0 MB binary (4.7 MB on Windows), 52 ms to window, 137 MB idle RSS, 0% idle CPU.

11 files changed, 1590 insertions, 0 deletions

diff --git a/gui/Cargo.toml b/gui/Cargo.toml
new file mode 100644
index 0000000..a2f4154
--- /dev/null
+++ b/gui/Cargo.toml
@@ -0,0 +1,21 @@
+[package]
+name = "zagan-bet-gui"
+version = "4.1.0"
+edition = "2024"
+license = "GPL-3.0-or-later"
+description = "Desktop frontend for zagan-bet"
+
+[[bin]]
+name = "zagan-bet-gui"
+path = "src/main.rs"
+
+[dependencies]
+# No default features: the GUI never links the server's native-tls.
+zagan-bet = { path = "..", default-features = false }
+# glow (OpenGL) rather than wgpu: no Vulkan runtime, and it cross-compiles to
+# Windows with the mingw toolchain. Fonts are embedded, so no default_fonts.
+eframe = { version = "0.37", default-features = false, features = [
+    "glow",
+    "wayland",
+    "x11",
+] }
diff --git a/gui/assets/fonts/Hack-Regular.ttf b/gui/assets/fonts/Hack-Regular.ttf
new file mode 100644
index 0000000..92a90cb
--- /dev/null
+++ b/gui/assets/fonts/Hack-Regular.ttf
diff --git a/gui/assets/fonts/LICENSE-Hack.md b/gui/assets/fonts/LICENSE-Hack.md
new file mode 100644
index 0000000..08927e5
--- /dev/null
+++ b/gui/assets/fonts/LICENSE-Hack.md
@@ -0,0 +1,45 @@
+The work in the Hack project is Copyright 2018 Source Foundry Authors and licensed under the MIT License
+
+The work in the DejaVu project was committed to the public domain.
+
+Bitstream Vera Sans Mono Copyright 2003 Bitstream Inc. and licensed under the Bitstream Vera License with Reserved Font Names "Bitstream" and "Vera"
+
+### MIT License
+
+Copyright (c) 2018 Source Foundry Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+### BITSTREAM VERA LICENSE
+
+Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved. Bitstream Vera is a trademark of Bitstream, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of the fonts accompanying this license ("Fonts") and associated documentation files (the "Font Software"), to reproduce and distribute the Font Software, including without limitation the rights to use, copy, merge, publish, distribute, and/or sell copies of the Font Software, and to permit persons to whom the Font Software is furnished to do so, subject to the following conditions:
+
+The above copyright and trademark notices and this permission notice shall be included in all copies of one or more of the Font Software typefaces.
+
+The Font Software may be modified, altered, or added to, and in particular the designs of glyphs or characters in the Fonts may be modified and additional glyphs or characters may be added to the Fonts, only if the fonts are renamed to names not containing either the words "Bitstream" or the word "Vera".
+
+This License becomes null and void to the extent applicable to Fonts or Font Software that has been modified and is distributed under the "Bitstream Vera" names.
+
+The Font Software may be sold as part of a larger software package but no copy of one or more of the Font Software typefaces may be sold by itself.
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL BITSTREAM OR THE GNOME FOUNDATION BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
+
+Except as contained in this notice, the names of Gnome, the Gnome Foundation, and Bitstream Inc., shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Font Software without prior written authorization from the Gnome Foundation or Bitstream Inc., respectively. For further information, contact: fonts at gnome dot org.
diff --git a/gui/assets/fonts/OFL-OpenSans.txt b/gui/assets/fonts/OFL-OpenSans.txt
new file mode 100644
index 0000000..2e76eef
--- /dev/null
+++ b/gui/assets/fonts/OFL-OpenSans.txt
@@ -0,0 +1,88 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to
+provide a free and open framework in which fonts may be shared and
+improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software
+components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to,
+deleting, or substituting -- in part or in whole -- any of the
+components of the Original Version, by changing formats or by porting
+the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed,
+modify, redistribute, and sell modified and unmodified copies of the
+Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in
+Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the
+corresponding Copyright Holder. This restriction only applies to the
+primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created using
+the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/gui/assets/fonts/OpenSans-Regular.ttf b/gui/assets/fonts/OpenSans-Regular.ttf
new file mode 100644
index 0000000..8529c43
--- /dev/null
+++ b/gui/assets/fonts/OpenSans-Regular.ttf
diff --git a/gui/src/app.rs b/gui/src/app.rs
new file mode 100644
index 0000000..fde117a
--- /dev/null
+++ b/gui/src/app.rs
@@ -0,0 +1,587 @@
+//! The desktop shell: header, roulette table, and betting sidebar.
+//!
+//! Phase 3 is a style spike. The table is painted from a demo `RouletteView`
+//! built with the core's own types, but no command is sent yet: Phase 4 wires
+//! the transport and replaces the demo state with `ClientCore`.
+
+use std::f32::consts::TAU;
+
+use eframe::egui::{
+    self, Align, Button, CentralPanel, Color32, Context, Frame, Key, Layout, Margin, Panel,
+    RichText, Sense, Stroke, Ui, Vec2, vec2,
+};
+use zagan_bet::client::games::roulette::{Cursor, Direction};
+use zagan_bet::client::view::{RoulettePhase, RouletteView};
+use zagan_bet::roulette::{BetTarget, Bets, Outside, WHEEL, color as wheel_color};
+use zagan_bet::version::VERSION;
+
+use crate::{roulette, theme};
+
+const HEADER_HEIGHT: f32 = 64.0;
+const SIDEBAR_WIDTH: f32 = 336.0;
+const SPIN_SECONDS: f64 = 2.4;
+/// Demo winners, cycled: a red, a zero, a red, a black, a black, a black.
+const DEMO_TARGETS: [u8; 6] = [17, 0, 32, 26, 8, 11];
+const CHIP_SIZES: [u64; 4] = [10, 25, 50, 100];
+
+pub struct ZaganApp {
+    demo: Demo,
+}
+
+impl ZaganApp {
+    pub fn new(cc: &eframe::CreationContext<'_>) -> Self {
+        theme::install(&cc.egui_ctx);
+        Self { demo: Demo::new() }
+    }
+}
+
+impl eframe::App for ZaganApp {
+    fn ui(&mut self, ui: &mut Ui, _frame: &mut eframe::Frame) {
+        self.demo.tick(ui.ctx());
+        self.demo.keys(ui.ctx());
+
+        Panel::top("header")
+            .exact_size(HEADER_HEIGHT)
+            .frame(
+                Frame::new()
+                    .fill(theme::SURFACE)
+                    .inner_margin(Margin::symmetric(theme::SPACE_5 as i8, 0)),
+            )
+            .show(ui, |ui| header(ui, &self.demo));
+
+        Panel::right("sidebar")
+            .exact_size(SIDEBAR_WIDTH)
+            .frame(
+                Frame::new()
+                    .fill(theme::SURFACE)
+                    .inner_margin(Margin::symmetric(theme::SPACE_5 as i8, 20)),
+            )
+            .show(ui, |ui| {
+                egui::ScrollArea::vertical()
+                    .auto_shrink([false, false])
+                    .show(ui, |ui| sidebar(ui, &mut self.demo));
+            });
+
+        CentralPanel::default()
+            .frame(
+                Frame::new()
+                    .fill(theme::BG)
+                    .inner_margin(Margin::same(theme::SPACE_5 as i8)),
+            )
+            .show(ui, |ui| table(ui, &mut self.demo));
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Header
+// ---------------------------------------------------------------------------
+
+fn header(ui: &mut Ui, demo: &Demo) {
+    ui.with_layout(Layout::left_to_right(Align::Center), |ui| {
+        let (mark, _) = ui.allocate_exact_size(Vec2::splat(10.0), Sense::hover());
+        ui.painter().rect_filled(mark, theme::RADIUS_SM, theme::WIN);
+        ui.add_space(theme::SPACE_2);
+        ui.label(
+            RichText::new("ZAGAN")
+                .font(theme::mono(18.0))
+                .color(theme::TEXT),
+        );
+        ui.label(
+            RichText::new("BET")
+                .font(theme::mono(18.0))
+                .color(theme::WIN),
+        );
+        ui.add_space(theme::SPACE_3);
+        pill(ui, &format!("v{VERSION}"), theme::TEXT_FAINT);
+        ui.add_space(theme::SPACE_1);
+        pill(ui, "PREVIEW", theme::GOLD);
+        ui.add_space(theme::SPACE_5);
+        connection_pill(ui, demo);
+
+        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+            stat_block(
+                ui,
+                150.0,
+                "Balance",
+                &theme::money(demo.balance),
+                theme::mono(20.0),
+                theme::TEXT,
+                None,
+            );
+            ui.add_space(theme::SPACE_5);
+            stat_block(
+                ui,
+                190.0,
+                "Account",
+                demo.user,
+                theme::sans(theme::FONT_BODY),
+                theme::TEXT,
+                Some(demo.account),
+            );
+        });
+    });
+}
+
+fn pill(ui: &mut Ui, text: &str, color: Color32) {
+    Frame::new()
+        .fill(theme::SURFACE_RAISED)
+        .corner_radius(theme::RADIUS_SM)
+        .inner_margin(Margin::symmetric(theme::SPACE_2 as i8, 3))
+        .show(ui, |ui| {
+            ui.label(RichText::new(text).font(theme::mono(10.0)).color(color));
+        });
+}
+
+fn connection_pill(ui: &mut Ui, demo: &Demo) {
+    Frame::new()
+        .fill(theme::SURFACE_RAISED)
+        .corner_radius(theme::RADIUS_SM)
+        .inner_margin(Margin::symmetric(theme::SPACE_3 as i8, 5))
+        .show(ui, |ui| {
+            ui.horizontal(|ui| {
+                let (dot, _) = ui.allocate_exact_size(Vec2::splat(8.0), Sense::hover());
+                ui.painter().circle_filled(dot.center(), 3.0, theme::WIN);
+                ui.label(
+                    RichText::new("ONLINE")
+                        .font(theme::mono(10.0))
+                        .color(theme::WIN),
+                );
+                ui.label(
+                    RichText::new(demo.host)
+                        .font(theme::mono(12.0))
+                        .color(theme::TEXT_DIM),
+                );
+                ui.label(
+                    RichText::new(format!("{} ms", demo.ping_ms))
+                        .font(theme::mono(12.0))
+                        .color(theme::TEXT_FAINT),
+                );
+            });
+        });
+}
+
+/// A label over a value, right-aligned in a fixed slot so the header's right
+/// edge stays put as the numbers change.
+fn stat_block(
+    ui: &mut Ui,
+    width: f32,
+    label: &str,
+    value: &str,
+    value_font: egui::FontId,
+    value_color: Color32,
+    detail: Option<&str>,
+) {
+    ui.allocate_ui_with_layout(vec2(width, 44.0), Layout::top_down(Align::Max), |ui| {
+        ui.spacing_mut().item_spacing.y = 0.0;
+        ui.label(theme::label(label));
+        ui.label(RichText::new(value).font(value_font).color(value_color));
+        if let Some(detail) = detail {
+            ui.label(
+                RichText::new(detail)
+                    .font(theme::mono(10.0))
+                    .color(theme::TEXT_FAINT),
+            );
+        }
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar
+// ---------------------------------------------------------------------------
+
+fn sidebar(ui: &mut Ui, demo: &mut Demo) {
+    ui.label(
+        RichText::new("Roulette")
+            .font(theme::sans(22.0))
+            .color(theme::TEXT),
+    );
+    ui.label(
+        RichText::new("European  ·  single zero")
+            .font(theme::sans(12.0))
+            .color(theme::TEXT_DIM),
+    );
+
+    ui.add_space(theme::SPACE_4);
+    let view = demo.view();
+    let wheel_size = ui.available_width().min(210.0);
+    ui.horizontal(|ui| {
+        let pad = ((ui.available_width() - wheel_size) * 0.5).max(0.0);
+        ui.add_space(pad);
+        roulette::wheel(ui, wheel_size, &view, demo.rotation);
+    });
+    ui.add_space(theme::SPACE_1);
+    result_line(ui, demo);
+
+    ui.add_space(theme::SPACE_3);
+    ui.separator();
+    ui.add_space(theme::SPACE_3);
+
+    ui.label(theme::label("Chip"));
+    ui.add_space(theme::SPACE_2);
+    ui.horizontal(|ui| {
+        ui.spacing_mut().item_spacing.x = theme::SPACE_2;
+        for amount in CHIP_SIZES {
+            if chip_button(ui, amount, demo.chip == amount).clicked() {
+                demo.chip = amount;
+            }
+        }
+    });
+
+    ui.add_space(theme::SPACE_3);
+    ui.label(theme::label("Bets"));
+    ui.add_space(theme::SPACE_1);
+    if demo.bets.chips.is_empty() {
+        ui.label(
+            RichText::new("No chips on the felt")
+                .font(theme::sans(12.0))
+                .color(theme::TEXT_FAINT),
+        );
+    } else {
+        for chip in &demo.bets.chips {
+            bet_row(ui, &roulette::target_name(&chip.target), chip.amount);
+        }
+    }
+
+    ui.add_space(theme::SPACE_3);
+    ui.separator();
+    ui.add_space(theme::SPACE_2);
+    bet_row(ui, "Total", demo.bets.total());
+
+    ui.add_space(theme::SPACE_3);
+    let spinning = demo.phase == RoulettePhase::Spinning;
+    let spin = Button::new(
+        RichText::new("SPIN")
+            .font(theme::mono(theme::FONT_MONO))
+            .color(theme::BG),
+    )
+    .fill(if spinning {
+        theme::WIN.gamma_multiply(0.45)
+    } else {
+        theme::WIN
+    })
+    .corner_radius(theme::RADIUS_MD)
+    .min_size(vec2(ui.available_width(), 44.0));
+    if ui.add_enabled(!spinning, spin).clicked() {
+        demo.start_spin(ui.ctx());
+    }
+
+    ui.add_space(theme::SPACE_2);
+    let clear = Button::new(
+        RichText::new("Clear bets")
+            .font(theme::sans(12.0))
+            .color(theme::TEXT_DIM),
+    )
+    .frame(false);
+    if ui
+        .add_enabled(!demo.bets.is_empty() && !spinning, clear)
+        .clicked()
+    {
+        demo.bets = Bets::default();
+    }
+}
+
+fn result_line(ui: &mut Ui, demo: &Demo) {
+    ui.horizontal(|ui| {
+        match (demo.phase, demo.number) {
+            (RoulettePhase::Result, Some(number)) => {
+                ui.label(theme::label("Result"));
+                ui.label(
+                    RichText::new(number.to_string())
+                        .font(theme::mono(15.0))
+                        .color(color_of(number)),
+                );
+                ui.label(
+                    RichText::new(wheel_color(number).to_uppercase())
+                        .font(theme::mono(12.0))
+                        .color(theme::TEXT_DIM),
+                );
+            }
+            (RoulettePhase::Spinning, _) => {
+                ui.label(
+                    RichText::new("SPINNING…")
+                        .font(theme::mono(12.0))
+                        .color(theme::GOLD),
+                );
+            }
+            _ => {
+                ui.label(
+                    RichText::new("Place your bets")
+                        .font(theme::sans(12.0))
+                        .color(theme::TEXT_DIM),
+                );
+            }
+        }
+        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+            ui.label(
+                RichText::new(format!("{} chips", demo.bets.chips.len()))
+                    .font(theme::mono(10.0))
+                    .color(theme::TEXT_FAINT),
+            );
+        });
+    });
+}
+
+fn bet_row(ui: &mut Ui, name: &str, amount: u64) {
+    ui.horizontal(|ui| {
+        ui.label(
+            RichText::new(name)
+                .font(theme::sans(13.0))
+                .color(theme::TEXT_DIM),
+        );
+        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+            ui.label(
+                RichText::new(theme::money(amount as i64))
+                    .font(theme::mono(13.0))
+                    .color(theme::GOLD),
+            );
+        });
+    });
+}
+
+fn chip_button(ui: &mut Ui, amount: u64, selected: bool) -> egui::Response {
+    let (rect, response) = ui.allocate_exact_size(Vec2::splat(46.0), Sense::click());
+    let center = rect.center();
+    let radius = 20.0;
+    let painter = ui.painter();
+    if selected || response.hovered() {
+        painter.circle_stroke(
+            center,
+            radius + 3.0,
+            Stroke::new(if selected { 2.0 } else { 1.0 }, theme::ACCENT),
+        );
+    }
+    roulette::paint_chip(painter, center, radius, amount);
+    response
+}
+
+fn color_of(number: u8) -> Color32 {
+    match wheel_color(number) {
+        "red" => theme::ROULETTE_RED,
+        "green" => theme::WIN,
+        _ => theme::TEXT,
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Table
+// ---------------------------------------------------------------------------
+
+fn table(ui: &mut Ui, demo: &mut Demo) {
+    ui.horizontal(|ui| {
+        ui.label(
+            RichText::new("Table 01")
+                .font(theme::sans(15.0))
+                .color(theme::TEXT),
+        );
+        ui.label(
+            RichText::new("European  ·  single zero")
+                .font(theme::sans(12.0))
+                .color(theme::TEXT_DIM),
+        );
+        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+            ui.label(
+                RichText::new("Limits 10 – 500 Kr")
+                    .font(theme::mono(12.0))
+                    .color(theme::TEXT_FAINT),
+            );
+        });
+    });
+    ui.add_space(theme::SPACE_4);
+
+    let view = demo.view();
+    let strip_height = 104.0;
+    let available = ui.available_size();
+    let size = roulette::size_for(vec2(available.x, (available.y - strip_height).max(220.0)));
+    let side_pad = ((available.x - size.x) * 0.5).max(0.0);
+    let top_pad = ((available.y - size.y - strip_height) * 0.5).max(0.0);
+    let chip = demo.chip;
+    ui.add_space(top_pad);
+    ui.horizontal(|ui| {
+        ui.add_space(side_pad);
+        if let Some(target) = roulette::felt(ui, size, &view) {
+            demo.bets.add(target, chip);
+        }
+    });
+
+    ui.add_space(theme::SPACE_4);
+    ui.horizontal(|ui| {
+        ui.label(theme::label("Last"));
+        if demo.last.is_empty() {
+            ui.label(
+                RichText::new("No spins yet")
+                    .font(theme::sans(12.0))
+                    .color(theme::TEXT_FAINT),
+            );
+        }
+        for number in &demo.last {
+            let (dot, _) = ui.allocate_exact_size(Vec2::splat(26.0), Sense::hover());
+            roulette::paint_result_dot(ui.painter(), dot.center(), 11.0, *number);
+            ui.add_space(theme::SPACE_1);
+        }
+    });
+    ui.add_space(theme::SPACE_2);
+    ui.label(
+        RichText::new(
+            "Click a pocket to place a chip  ·  arrow keys move the cursor  ·  space spins",
+        )
+        .font(theme::sans(12.0))
+        .color(theme::TEXT_FAINT),
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Demo state
+// ---------------------------------------------------------------------------
+
+struct Spin {
+    started: f64,
+    from: f32,
+    delta: f32,
+    target: u8,
+}
+
+struct Demo {
+    bets: Bets,
+    cursor: Cursor,
+    chip: u64,
+    phase: RoulettePhase,
+    number: Option<u8>,
+    rotation: f32,
+    spin: Option<Spin>,
+    spins: usize,
+    last: Vec<u8>,
+    balance: i64,
+    host: &'static str,
+    ping_ms: u32,
+    user: &'static str,
+    account: &'static str,
+}
+
+impl Demo {
+    fn new() -> Self {
+        let mut bets = Bets::default();
+        bets.add(BetTarget::Straight { number: 17 }, 50);
+        bets.add(
+            BetTarget::Corner {
+                numbers: [17, 18, 20, 21],
+            },
+            25,
+        );
+        bets.add(BetTarget::Outside { kind: Outside::Red }, 25);
+
+        Self {
+            bets,
+            // A split with no chip on it, so the fine lattice cursor shows.
+            cursor: Cursor::Lattice { x: 18, y: 3 },
+            chip: 25,
+            phase: RoulettePhase::Placing,
+            number: None,
+            rotation: 0.0,
+            spin: None,
+            spins: 0,
+            last: Vec::new(),
+            balance: 1000,
+            host: "127.0.0.1:11525",
+            ping_ms: 41,
+            user: "alice",
+            account: "#4161673306",
+        }
+    }
+
+    fn view(&self) -> RouletteView {
+        RouletteView {
+            bet_amount: 10,
+            balance: Some(self.balance),
+            chip: self.chip,
+            bets: self.bets.clone(),
+            cursor: self.cursor,
+            phase: self.phase,
+            number: self.number,
+            color: self.number.map(|number| wheel_color(number).to_string()),
+            winnings: None,
+            error: None,
+        }
+    }
+
+    fn tick(&mut self, ctx: &Context) {
+        let now = ctx.input(|input| input.time);
+        let mut finished = None;
+        if let Some(spin) = &self.spin {
+            let t = (((now - spin.started) / SPIN_SECONDS) as f32).clamp(0.0, 1.0);
+            let eased = 1.0 - (1.0 - t).powi(3);
+            self.rotation = spin.from + spin.delta * eased;
+            if t >= 1.0 {
+                finished = Some(spin.target);
+            }
+            ctx.request_repaint();
+        }
+        if let Some(number) = finished {
+            self.spin = None;
+            self.phase = RoulettePhase::Result;
+            self.number = Some(number);
+            self.last.insert(0, number);
+            self.last.truncate(12);
+        }
+    }
+
+    fn keys(&mut self, ctx: &Context) {
+        if self.phase == RoulettePhase::Spinning {
+            return;
+        }
+        let (left, right, up, down) = ctx.input(|input| {
+            (
+                input.key_pressed(Key::ArrowLeft),
+                input.key_pressed(Key::ArrowRight),
+                input.key_pressed(Key::ArrowUp),
+                input.key_pressed(Key::ArrowDown),
+            )
+        });
+        for (pressed, direction) in [
+            (left, Direction::Left),
+            (right, Direction::Right),
+            (up, Direction::Up),
+            (down, Direction::Down),
+        ] {
+            if pressed {
+                self.cursor = self.cursor.moved(direction);
+            }
+        }
+        if ctx.memory(|memory| memory.focused().is_none()) {
+            if ctx.input(|input| input.key_pressed(Key::Enter)) {
+                if let Some(target) = self.cursor.target() {
+                    let chip = self.chip;
+                    self.bets.add(target, chip);
+                }
+            }
+            if ctx.input(|input| input.key_pressed(Key::Space)) {
+                self.start_spin(ctx);
+            }
+        }
+    }
+
+    fn start_spin(&mut self, ctx: &Context) {
+        if self.phase == RoulettePhase::Spinning {
+            return;
+        }
+        let target = DEMO_TARGETS[self.spins % DEMO_TARGETS.len()];
+        self.spins += 1;
+
+        let segment = TAU / WHEEL.len() as f32;
+        let index = WHEEL
+            .iter()
+            .position(|number| *number == target)
+            .unwrap_or(0) as f32;
+        let desired = -index * segment;
+        let delta = (desired - self.rotation).rem_euclid(TAU) + 3.0 * TAU;
+
+        self.spin = Some(Spin {
+            started: ctx.input(|input| input.time),
+            from: self.rotation,
+            delta,
+            target,
+        });
+        self.phase = RoulettePhase::Spinning;
+        self.number = None;
+        ctx.request_repaint();
+    }
+}
diff --git a/gui/src/lib.rs b/gui/src/lib.rs
new file mode 100644
index 0000000..e0f5bc9
--- /dev/null
+++ b/gui/src/lib.rs
@@ -0,0 +1,9 @@
+//! Desktop frontend for zagan-bet.
+//!
+//! The window is a thin shell over the shared `ClientCore` (Phase 4). This
+//! crate holds only presentation: the theme, the roulette table, and the app
+//! layout. It never enters the TUI or server build graph.
+
+pub mod app;
+pub mod roulette;
+pub mod theme;
diff --git a/gui/src/main.rs b/gui/src/main.rs
new file mode 100644
index 0000000..cf1c67d
--- /dev/null
+++ b/gui/src/main.rs
@@ -0,0 +1,25 @@
+//! Desktop frontend for zagan-bet.
+//!
+//! Phase 3 of `docs/GUI-PLAN.md`: the style spike. It owns the window and the
+//! roulette reference screen; the shared core and transport are wired in
+//! Phase 4.
+
+use zagan_bet_gui::app::ZaganApp;
+
+fn main() -> eframe::Result {
+    let options = eframe::NativeOptions {
+        viewport: eframe::egui::ViewportBuilder::default()
+            .with_title("Zagan-Bet")
+            .with_app_id("zagan-bet")
+            .with_inner_size([1440.0, 900.0])
+            .with_min_inner_size([1100.0, 720.0]),
+        renderer: eframe::Renderer::Glow,
+        ..Default::default()
+    };
+
+    eframe::run_native(
+        "Zagan-Bet",
+        options,
+        Box::new(|cc| Ok(Box::new(ZaganApp::new(cc)))),
+    )
+}
diff --git a/gui/src/roulette.rs b/gui/src/roulette.rs
new file mode 100644
index 0000000..22c46d6
--- /dev/null
+++ b/gui/src/roulette.rs
@@ -0,0 +1,522 @@
+//! The roulette table and wheel, painted from `RouletteView`.
+//!
+//! Geometry is the GUI's business: the core only says which number or region a
+//! chip or the cursor is on. Everything here is derived from that, so the two
+//! frontends can lay the same table out differently.
+
+use std::f32::consts::{FRAC_PI_2, TAU};
+
+use eframe::egui::{
+    Align2, Color32, CornerRadius, Painter, Pos2, Rect, Sense, Shape, Stroke, StrokeKind, Ui, Vec2,
+    pos2, vec2,
+};
+use zagan_bet::client::games::roulette::Cursor;
+use zagan_bet::client::view::{RoulettePhase, RouletteView};
+use zagan_bet::roulette::{BetTarget, Outside, WHEEL, color as wheel_color, is_red};
+
+use crate::theme;
+
+const COLUMNS: usize = 12;
+const ROWS: usize = 3;
+const OUTSIDE_ORDER: [Outside; 6] = [
+    Outside::Low,
+    Outside::Even,
+    Outside::Red,
+    Outside::Black,
+    Outside::Odd,
+    Outside::High,
+];
+
+const DOZEN_ROW: f32 = 0.72;
+const COLUMN_ROW: f32 = 0.55;
+const OUTSIDE_ROW: f32 = 0.62;
+const HEIGHT_UNITS: f32 = ROWS as f32 + DOZEN_ROW + COLUMN_ROW + OUTSIDE_ROW;
+const BOARD_PAD: f32 = 6.0;
+
+/// Largest table that fits in `available`, including its felt border.
+pub fn size_for(available: Vec2) -> Vec2 {
+    let inner = (available - Vec2::splat(BOARD_PAD * 2.0)).max(Vec2::ZERO);
+    let cell = (inner.x / (COLUMNS as f32 + 1.0))
+        .min(inner.y / HEIGHT_UNITS)
+        .max(1.0);
+    vec2((COLUMNS as f32 + 1.0) * cell, HEIGHT_UNITS * cell) + Vec2::splat(BOARD_PAD * 2.0)
+}
+
+/// The table painted at `size`; returns the target clicked this frame.
+pub fn felt(ui: &mut Ui, size: Vec2, view: &RouletteView) -> Option<BetTarget> {
+    let (rect, response) = ui.allocate_exact_size(size, Sense::click());
+    let felt = Felt::new(rect);
+    let hovered = response.hover_pos().and_then(|pos| felt.hit(pos));
+    let painter = ui.painter();
+
+    painter.rect_filled(rect, theme::RADIUS_LG, theme::FELT_DARK);
+
+    for number in 0..=36u8 {
+        let highlighted = hovered == Some(BetTarget::Straight { number });
+        felt.paint_number(painter, number, highlighted);
+    }
+    for index in 0..3 {
+        felt.paint_dozen(
+            painter,
+            index,
+            hovered == Some(BetTarget::Dozen { index: index as u8 }),
+        );
+    }
+    for index in 0..3 {
+        felt.paint_column(
+            painter,
+            index,
+            hovered == Some(BetTarget::Column { index: index as u8 }),
+        );
+    }
+    for (index, kind) in OUTSIDE_ORDER.iter().enumerate() {
+        felt.paint_outside(
+            painter,
+            index,
+            *kind,
+            hovered == Some(BetTarget::Outside { kind: *kind }),
+        );
+    }
+
+    if view.phase == RoulettePhase::Result {
+        if let Some(number) = view.number {
+            painter.rect_stroke(
+                felt.number_rect(number).shrink(2.0),
+                theme::RADIUS_SM,
+                Stroke::new(2.0, theme::GOLD),
+                StrokeKind::Inside,
+            );
+        }
+    }
+
+    felt.paint_cursor(painter, &view.cursor);
+
+    for chip in &view.bets.chips {
+        if let Some(center) = felt.anchor(&chip.target) {
+            paint_chip(painter, center, felt.cell * 0.26, chip.amount);
+        }
+    }
+
+    if response.clicked() { hovered } else { None }
+}
+
+struct Felt {
+    cell: f32,
+    origin: Pos2,
+}
+
+impl Felt {
+    fn new(board: Rect) -> Self {
+        let inner = board.shrink(BOARD_PAD);
+        Self {
+            cell: inner.width() / (COLUMNS as f32 + 1.0),
+            origin: inner.min,
+        }
+    }
+
+    fn number_rect(&self, number: u8) -> Rect {
+        debug_assert!(number <= 36);
+        if number == 0 {
+            return Rect::from_min_size(self.origin, vec2(self.cell, self.cell * ROWS as f32));
+        }
+        let column = ((number - 1) / 3) as f32;
+        let row = (2 - (number - 1) % 3) as f32;
+        Rect::from_min_size(
+            self.origin + vec2(self.cell * (1.0 + column), self.cell * row),
+            Vec2::splat(self.cell),
+        )
+    }
+
+    fn dozen_rect(&self, index: usize) -> Rect {
+        let y = self.origin.y + self.cell * ROWS as f32;
+        Rect::from_min_size(
+            pos2(self.origin.x + self.cell * (1.0 + 4.0 * index as f32), y),
+            vec2(self.cell * 4.0, self.cell * DOZEN_ROW),
+        )
+    }
+
+    fn column_rect(&self, index: usize) -> Rect {
+        let y = self.origin.y + self.cell * (ROWS as f32 + DOZEN_ROW);
+        Rect::from_min_size(
+            pos2(self.origin.x + self.cell * (1.0 + index as f32), y),
+            vec2(self.cell, self.cell * COLUMN_ROW),
+        )
+    }
+
+    fn outside_rect(&self, index: usize) -> Rect {
+        let y = self.origin.y + self.cell * (ROWS as f32 + DOZEN_ROW + COLUMN_ROW);
+        Rect::from_min_size(
+            pos2(self.origin.x + self.cell * (1.0 + 2.0 * index as f32), y),
+            vec2(self.cell * 2.0, self.cell * OUTSIDE_ROW),
+        )
+    }
+
+    /// Where a chip sits for this target.
+    fn anchor(&self, target: &BetTarget) -> Option<Pos2> {
+        Some(match target {
+            BetTarget::Straight { number } => self.number_rect(*number).center(),
+            BetTarget::Split { a, b } => {
+                let a = self.number_rect(*a).center();
+                let b = self.number_rect(*b).center();
+                pos2((a.x + b.x) * 0.5, (a.y + b.y) * 0.5)
+            }
+            BetTarget::Corner { numbers } => {
+                let mut sum = Vec2::ZERO;
+                for number in numbers {
+                    sum += self.number_rect(*number).center().to_vec2();
+                }
+                (sum / numbers.len() as f32).to_pos2()
+            }
+            BetTarget::Dozen { index } => self.dozen_rect(*index as usize).center(),
+            BetTarget::Column { index } => self.column_rect(*index as usize).center(),
+            BetTarget::Outside { kind } => {
+                let index = OUTSIDE_ORDER
+                    .iter()
+                    .position(|candidate| candidate == kind)?;
+                self.outside_rect(index).center()
+            }
+        })
+    }
+
+    /// The fine-grid point the cursor occupies over the numbers.
+    fn lattice(&self, x: usize, y: usize) -> Pos2 {
+        pos2(
+            self.origin.x + self.cell * (1.0 + x as f32 * 0.5),
+            self.origin.y + self.cell * (y as f32 * 0.5),
+        )
+    }
+
+    fn hit(&self, pos: Pos2) -> Option<BetTarget> {
+        for number in 0..=36u8 {
+            if self.number_rect(number).contains(pos) {
+                return Some(BetTarget::Straight { number });
+            }
+        }
+        for index in 0..3usize {
+            if self.dozen_rect(index).contains(pos) {
+                return Some(BetTarget::Dozen { index: index as u8 });
+            }
+            if self.column_rect(index).contains(pos) {
+                return Some(BetTarget::Column { index: index as u8 });
+            }
+        }
+        for (index, kind) in OUTSIDE_ORDER.iter().enumerate() {
+            if self.outside_rect(index).contains(pos) {
+                return Some(BetTarget::Outside { kind: *kind });
+            }
+        }
+        None
+    }
+
+    fn paint_number(&self, painter: &Painter, number: u8, hovered: bool) {
+        let rect = self.number_rect(number);
+        let fill = if number == 0 {
+            theme::ROULETTE_ZERO
+        } else if is_red(number) {
+            theme::ROULETTE_RED
+        } else {
+            theme::ROULETTE_BLACK
+        };
+        painter.rect_filled(rect, CornerRadius::ZERO, fill);
+        painter.rect_stroke(
+            rect,
+            CornerRadius::ZERO,
+            Stroke::new(1.0, theme::FELT_LINE),
+            StrokeKind::Inside,
+        );
+        if hovered {
+            painter.rect_filled(
+                rect,
+                CornerRadius::ZERO,
+                Color32::WHITE.gamma_multiply(0.10),
+            );
+        }
+        painter.text(
+            rect.center(),
+            Align2::CENTER_CENTER,
+            number,
+            theme::mono(self.number_font()),
+            theme::FELT_TEXT,
+        );
+    }
+
+    fn paint_dozen(&self, painter: &Painter, index: usize, hovered: bool) {
+        let rect = self.dozen_rect(index);
+        self.paint_region(painter, rect, hovered);
+        let label = match index {
+            0 => "1st 12",
+            1 => "2nd 12",
+            _ => "3rd 12",
+        };
+        painter.text(
+            rect.center(),
+            Align2::CENTER_CENTER,
+            label,
+            theme::sans(self.label_font()),
+            theme::FELT_TEXT,
+        );
+    }
+
+    fn paint_column(&self, painter: &Painter, index: usize, hovered: bool) {
+        let rect = self.column_rect(index);
+        self.paint_region(painter, rect, hovered);
+        painter.text(
+            rect.center(),
+            Align2::CENTER_CENTER,
+            "2:1",
+            theme::sans(self.label_font()),
+            theme::FELT_TEXT,
+        );
+    }
+
+    fn paint_outside(&self, painter: &Painter, index: usize, kind: Outside, hovered: bool) {
+        let rect = self.outside_rect(index);
+        self.paint_region(painter, rect, hovered);
+        let color = match kind {
+            Outside::Red => theme::ROULETTE_RED,
+            Outside::Black => theme::TEXT_DIM,
+            _ => theme::FELT_TEXT,
+        };
+        painter.text(
+            rect.center(),
+            Align2::CENTER_CENTER,
+            kind.label(),
+            theme::sans(self.label_font()),
+            color,
+        );
+    }
+
+    fn paint_region(&self, painter: &Painter, rect: Rect, hovered: bool) {
+        painter.rect_filled(rect, CornerRadius::ZERO, theme::FELT);
+        painter.rect_stroke(
+            rect,
+            CornerRadius::ZERO,
+            Stroke::new(1.0, theme::FELT_LINE),
+            StrokeKind::Inside,
+        );
+        if hovered {
+            painter.rect_filled(
+                rect,
+                CornerRadius::ZERO,
+                Color32::WHITE.gamma_multiply(0.10),
+            );
+        }
+    }
+
+    fn paint_cursor(&self, painter: &Painter, cursor: &Cursor) {
+        let stroke = Stroke::new(2.0, theme::ACCENT);
+        match cursor {
+            Cursor::Zero => outline(painter, self.number_rect(0), stroke),
+            Cursor::Lattice { x, y } => {
+                for number in cursor.numbers() {
+                    painter.rect_filled(
+                        self.number_rect(number),
+                        CornerRadius::ZERO,
+                        theme::ACCENT.gamma_multiply(0.14),
+                    );
+                }
+                let point = self.lattice(*x, *y);
+                painter.circle_filled(point, self.cell * 0.05, theme::ACCENT);
+                painter.circle_stroke(point, self.cell * 0.14, stroke);
+            }
+            Cursor::Dozen(index) => outline(painter, self.dozen_rect(*index), stroke),
+            Cursor::Column(index) => outline(painter, self.column_rect(*index), stroke),
+            Cursor::Outside(index) => outline(painter, self.outside_rect(*index), stroke),
+        }
+    }
+
+    fn number_font(&self) -> f32 {
+        (self.cell * 0.40).clamp(12.0, 22.0)
+    }
+
+    fn label_font(&self) -> f32 {
+        (self.cell * 0.24).clamp(10.0, 15.0)
+    }
+}
+
+fn outline(painter: &Painter, rect: Rect, stroke: Stroke) {
+    painter.rect_stroke(
+        rect.shrink(1.0),
+        theme::RADIUS_SM,
+        stroke,
+        StrokeKind::Inside,
+    );
+}
+
+/// A single chip, also used by the sidebar's chip tray.
+pub fn paint_chip(painter: &Painter, center: Pos2, radius: f32, amount: u64) {
+    let fill = chip_color(amount);
+    painter.circle_filled(center, radius, fill);
+    painter.circle_stroke(
+        center,
+        radius - radius * 0.18,
+        Stroke::new(radius * 0.10, Color32::WHITE.gamma_multiply(0.55)),
+    );
+    let text_color = if amount <= 10 {
+        theme::BG
+    } else {
+        Color32::WHITE
+    };
+    painter.text(
+        center,
+        Align2::CENTER_CENTER,
+        amount,
+        theme::mono(radius * 0.85),
+        text_color,
+    );
+}
+
+/// Colour per denomination, as a chip tray would be stocked.
+pub fn chip_color(amount: u64) -> Color32 {
+    match amount {
+        0..=10 => Color32::from_rgb(0xd9, 0xd3, 0xc7),
+        11..=25 => Color32::from_rgb(0x3f, 0x7f, 0xd1),
+        26..=50 => Color32::from_rgb(0xc9, 0x4b, 0x4b),
+        _ => Color32::from_rgb(0x3a, 0x9d, 0x5d),
+    }
+}
+
+fn segment_color(number: u8) -> Color32 {
+    match wheel_color(number) {
+        "red" => theme::ROULETTE_RED,
+        "green" => theme::ROULETTE_ZERO,
+        _ => Color32::from_rgb(0x2b, 0x35, 0x3f),
+    }
+}
+
+/// Number currently under the pointer for this wheel rotation.
+pub fn number_under(rotation: f32) -> u8 {
+    let segment = TAU / WHEEL.len() as f32;
+    let index = (-rotation / segment).round() as i64;
+    WHEEL[index.rem_euclid(WHEEL.len() as i64) as usize]
+}
+
+/// The wheel dial: 37 coloured pockets, a fixed pointer, and the number under
+/// it. `rotation` is in radians.
+pub fn wheel(ui: &mut Ui, diameter: f32, view: &RouletteView, rotation: f32) {
+    let (rect, _) = ui.allocate_exact_size(Vec2::splat(diameter), Sense::hover());
+    let painter = ui.painter();
+    let center = rect.center();
+    let radius = diameter * 0.5;
+
+    painter.circle_filled(center, radius, theme::SURFACE_RAISED);
+    painter.circle_stroke(center, radius - 1.0, Stroke::new(1.0, theme::LINE));
+
+    let segment = TAU / WHEEL.len() as f32;
+    let ring = radius * 0.80;
+    let dot = (radius * 0.072).max(2.0);
+    painter.circle_stroke(
+        center,
+        ring,
+        Stroke::new(dot * 2.0, Color32::from_rgb(0x1f, 0x28, 0x31)),
+    );
+    for (index, number) in WHEEL.iter().enumerate() {
+        let angle = -FRAC_PI_2 + rotation + index as f32 * segment;
+        let pocket = center + vec2(angle.cos(), angle.sin()) * ring;
+        let winning = view.phase == RoulettePhase::Result && view.number == Some(*number);
+        let stroke = if winning {
+            Stroke::new(2.0, theme::GOLD)
+        } else {
+            Stroke::new(1.0, Color32::from_rgb(0x3a, 0x46, 0x52))
+        };
+        painter.circle(
+            pocket,
+            if winning { dot * 1.25 } else { dot },
+            segment_color(*number),
+            stroke,
+        );
+    }
+
+    // A fixed pointer at the top, marking the winning pocket.
+    let tip = center + vec2(0.0, -radius + dot * 0.30);
+    painter.add(Shape::convex_polygon(
+        vec![
+            tip,
+            tip + vec2(-dot * 0.9, -dot * 1.4),
+            tip + vec2(dot * 0.9, -dot * 1.4),
+        ],
+        theme::TEXT,
+        Stroke::NONE,
+    ));
+
+    let inner = radius * 0.52;
+    painter.circle_filled(center, inner, theme::SURFACE);
+    painter.circle_stroke(center, inner, Stroke::new(1.0, theme::LINE));
+
+    let displayed = match view.phase {
+        RoulettePhase::Result => view.number,
+        RoulettePhase::Spinning => Some(number_under(rotation)),
+        RoulettePhase::Placing => None,
+    };
+    match displayed {
+        Some(number) => {
+            let color = match wheel_color(number) {
+                "red" => theme::ROULETTE_RED,
+                "green" => theme::WIN,
+                _ => theme::TEXT,
+            };
+            painter.text(
+                center,
+                Align2::CENTER_CENTER,
+                number,
+                theme::mono(inner * 0.85),
+                color,
+            );
+        }
+        None => {
+            painter.text(
+                center,
+                Align2::CENTER_CENTER,
+                "—",
+                theme::mono(inner * 0.55),
+                theme::TEXT_FAINT,
+            );
+        }
+    }
+}
+
+/// "Straight 17", "Corner 17/18/20/21", "Red".
+pub fn target_name(target: &BetTarget) -> String {
+    match target {
+        BetTarget::Straight { number } => format!("Straight {number}"),
+        BetTarget::Split { a, b } => format!("Split {a}/{b}"),
+        BetTarget::Corner { numbers } => format!(
+            "Corner {}/{}/{}/{}",
+            numbers[0], numbers[1], numbers[2], numbers[3]
+        ),
+        BetTarget::Dozen { index } => match index {
+            0 => "1st 12".to_string(),
+            1 => "2nd 12".to_string(),
+            _ => "3rd 12".to_string(),
+        },
+        BetTarget::Column { index } => format!("Column {}", index + 1),
+        BetTarget::Outside { kind } => title_case(kind.label()),
+    }
+}
+
+fn title_case(text: &str) -> String {
+    let mut characters = text.chars();
+    match characters.next() {
+        Some(first) => {
+            first.to_uppercase().collect::<String>() + &characters.as_str().to_lowercase()
+        }
+        None => String::new(),
+    }
+}
+
+/// Small coloured dot for a result strip.
+pub fn paint_result_dot(painter: &Painter, center: Pos2, radius: f32, number: u8) {
+    let color = match wheel_color(number) {
+        "red" => theme::ROULETTE_RED,
+        "green" => theme::ROULETTE_ZERO,
+        _ => theme::ROULETTE_BLACK,
+    };
+    painter.circle_filled(center, radius, color);
+    painter.text(
+        center,
+        Align2::CENTER_CENTER,
+        number,
+        theme::mono(radius * 0.95),
+        theme::FELT_TEXT,
+    );
+}
diff --git a/gui/src/theme.rs b/gui/src/theme.rs
new file mode 100644
index 0000000..9270aa6
--- /dev/null
+++ b/gui/src/theme.rs
@@ -0,0 +1,211 @@
+//! Look and feel for the desktop frontend.
+//!
+//! The palette is derived from the terminal client's ANSI scheme so the two
+//! frontends read as the same product: near-black ground, low-contrast panels,
+//! cyan for focus, and the felt green reserved for the roulette table.
+//!
+//! egui's defaults are a debug tool's palette. Every colour, size and corner
+//! used by the app comes from this module; widgets never pick their own.
+
+use std::sync::Arc;
+
+use eframe::egui::style::WidgetVisuals;
+use eframe::egui::{
+    self, Color32, Context, CornerRadius, FontData, FontDefinitions, FontFamily, FontId, Margin,
+    RichText, Stroke, TextStyle, Theme, Visuals,
+};
+
+// ---------------------------------------------------------------------------
+// Colour tokens
+// ---------------------------------------------------------------------------
+
+/// Window ground. Everything else sits above this.
+pub const BG: Color32 = Color32::from_rgb(0x0a, 0x0e, 0x12);
+/// Cards, header, sidebar.
+pub const SURFACE: Color32 = Color32::from_rgb(0x11, 0x17, 0x1d);
+/// Inputs, pills, raised rows.
+pub const SURFACE_RAISED: Color32 = Color32::from_rgb(0x17, 0x1f, 0x27);
+/// Hover state.
+pub const SURFACE_HOVER: Color32 = Color32::from_rgb(0x1d, 0x27, 0x31);
+/// Hairlines and table borders.
+pub const LINE: Color32 = Color32::from_rgb(0x24, 0x2e, 0x38);
+/// Primary text.
+pub const TEXT: Color32 = Color32::from_rgb(0xd9, 0xe2, 0xea);
+/// Labels and secondary text.
+pub const TEXT_DIM: Color32 = Color32::from_rgb(0x8a, 0x98, 0xa6);
+/// Disabled text, captions.
+pub const TEXT_FAINT: Color32 = Color32::from_rgb(0x5b, 0x67, 0x73);
+/// Focus, cursor, selection.
+pub const ACCENT: Color32 = Color32::from_rgb(0x4f, 0xb8, 0xc9);
+/// Wins, "online", the spin button.
+pub const WIN: Color32 = Color32::from_rgb(0x4e, 0xc2, 0x7b);
+/// Losses and errors.
+pub const LOSS: Color32 = Color32::from_rgb(0xe0, 0x5a, 0x5a);
+/// Chips and pending bets.
+pub const GOLD: Color32 = Color32::from_rgb(0xe0, 0xb6, 0x4a);
+
+/// Roulette felt. Never used outside the table.
+pub const FELT: Color32 = Color32::from_rgb(0x0d, 0x5c, 0x39);
+pub const FELT_DARK: Color32 = Color32::from_rgb(0x09, 0x47, 0x2c);
+pub const FELT_LINE: Color32 = Color32::from_rgb(0x1f, 0x7d, 0x52);
+pub const FELT_TEXT: Color32 = Color32::from_rgb(0xec, 0xf7, 0xf0);
+pub const ROULETTE_RED: Color32 = Color32::from_rgb(0xb0, 0x31, 0x3a);
+pub const ROULETTE_BLACK: Color32 = Color32::from_rgb(0x15, 0x1b, 0x21);
+pub const ROULETTE_ZERO: Color32 = Color32::from_rgb(0x10, 0x6b, 0x45);
+
+// ---------------------------------------------------------------------------
+// Spacing, radius, type scale
+// ---------------------------------------------------------------------------
+
+pub const SPACE_1: f32 = 4.0;
+pub const SPACE_2: f32 = 8.0;
+pub const SPACE_3: f32 = 12.0;
+pub const SPACE_4: f32 = 16.0;
+pub const SPACE_5: f32 = 24.0;
+
+pub const RADIUS_SM: CornerRadius = CornerRadius::same(4);
+pub const RADIUS_MD: CornerRadius = CornerRadius::same(8);
+pub const RADIUS_LG: CornerRadius = CornerRadius::same(12);
+
+pub const FONT_BODY: f32 = 14.0;
+pub const FONT_SMALL: f32 = 12.0;
+pub const FONT_LABEL: f32 = 11.0;
+pub const FONT_TITLE: f32 = 24.0;
+pub const FONT_MONO: f32 = 16.0;
+
+// ---------------------------------------------------------------------------
+// Fonts
+// ---------------------------------------------------------------------------
+
+/// Open Sans, SIL OFL 1.1. See `assets/fonts/OFL-OpenSans.txt`.
+pub const FONT_SANS_BYTES: &[u8] = include_bytes!("../assets/fonts/OpenSans-Regular.ttf");
+/// Hack, MIT. See `assets/fonts/LICENSE-Hack.md`.
+pub const FONT_MONO_BYTES: &[u8] = include_bytes!("../assets/fonts/Hack-Regular.ttf");
+
+pub fn sans(size: f32) -> FontId {
+    FontId::new(size, FontFamily::Proportional)
+}
+
+pub fn mono(size: f32) -> FontId {
+    FontId::new(size, FontFamily::Monospace)
+}
+
+/// A small uppercase label, the terminal's dim section headers.
+pub fn label(text: &str) -> RichText {
+    RichText::new(text.to_uppercase())
+        .font(mono(FONT_LABEL))
+        .color(TEXT_DIM)
+}
+
+/// Group an amount in threes: 1234567 -> "1 234 567".
+pub fn group_digits(amount: i64) -> String {
+    let negative = amount < 0;
+    let digits = amount.unsigned_abs().to_string();
+    let mut grouped = String::with_capacity(digits.len() + digits.len() / 3);
+    for (index, character) in digits.chars().enumerate() {
+        if index > 0 && (digits.len() - index) % 3 == 0 {
+            grouped.push(' ');
+        }
+        grouped.push(character);
+    }
+    if negative {
+        format!("-{grouped}")
+    } else {
+        grouped
+    }
+}
+
+/// `1000` -> `"1 000 Kr"`.
+pub fn money(amount: i64) -> String {
+    format!("{} Kr", group_digits(amount))
+}
+
+// ---------------------------------------------------------------------------
+// Installation
+// ---------------------------------------------------------------------------
+
+/// Install the embedded fonts and the dark style. Call once, from the app
+/// constructor, before the first frame.
+pub fn install(ctx: &Context) {
+    let mut fonts = FontDefinitions::default();
+    fonts.font_data.insert(
+        "zagan-sans".to_owned(),
+        Arc::new(FontData::from_static(FONT_SANS_BYTES)),
+    );
+    fonts.font_data.insert(
+        "zagan-mono".to_owned(),
+        Arc::new(FontData::from_static(FONT_MONO_BYTES)),
+    );
+    fonts
+        .families
+        .get_mut(&FontFamily::Proportional)
+        .expect("proportional family exists")
+        .insert(0, "zagan-sans".to_owned());
+    fonts
+        .families
+        .get_mut(&FontFamily::Monospace)
+        .expect("monospace family exists")
+        .insert(0, "zagan-mono".to_owned());
+    ctx.set_fonts(fonts);
+
+    ctx.set_theme(Theme::Dark);
+    let mut style = (*ctx.global_style()).clone();
+    style.text_styles = [
+        (TextStyle::Heading, sans(FONT_TITLE)),
+        (TextStyle::Body, sans(FONT_BODY)),
+        (TextStyle::Button, sans(FONT_BODY)),
+        (TextStyle::Small, sans(FONT_SMALL)),
+        (TextStyle::Monospace, mono(FONT_MONO)),
+    ]
+    .into();
+    style.spacing.item_spacing = egui::vec2(SPACE_2, SPACE_2);
+    style.spacing.button_padding = egui::vec2(SPACE_3, SPACE_2);
+    style.spacing.interact_size = egui::vec2(36.0, 32.0);
+    style.spacing.window_margin = Margin::same(SPACE_3 as i8);
+    style.visuals = visuals();
+    ctx.set_global_style(style);
+}
+
+fn widget(
+    bg_fill: Color32,
+    bg_stroke: Color32,
+    fg: Color32,
+    corner_radius: CornerRadius,
+) -> WidgetVisuals {
+    WidgetVisuals {
+        bg_fill,
+        weak_bg_fill: bg_fill,
+        bg_stroke: Stroke::new(1.0, bg_stroke),
+        corner_radius,
+        fg_stroke: Stroke::new(1.0, fg),
+        expansion: 0.0,
+    }
+}
+
+fn visuals() -> Visuals {
+    let mut visuals = Visuals::dark();
+    visuals.override_text_color = Some(TEXT);
+    visuals.panel_fill = BG;
+    visuals.window_fill = SURFACE;
+    visuals.window_stroke = Stroke::new(1.0, LINE);
+    visuals.window_corner_radius = RADIUS_LG;
+    visuals.extreme_bg_color = BG;
+    visuals.faint_bg_color = SURFACE_RAISED;
+    visuals.code_bg_color = SURFACE_RAISED;
+    visuals.hyperlink_color = ACCENT;
+    visuals.warn_fg_color = GOLD;
+    visuals.error_fg_color = LOSS;
+    visuals.selection.bg_fill = ACCENT.gamma_multiply(0.30);
+    visuals.selection.stroke = Stroke::new(1.0, ACCENT);
+    visuals.widgets.noninteractive = widget(SURFACE, LINE, TEXT, RADIUS_MD);
+    visuals.widgets.inactive = widget(SURFACE_RAISED, LINE, TEXT, RADIUS_MD);
+    visuals.widgets.hovered = widget(SURFACE_HOVER, ACCENT.gamma_multiply(0.75), TEXT, RADIUS_MD);
+    visuals.widgets.active = widget(
+        ACCENT.gamma_multiply(0.25),
+        ACCENT,
+        Color32::WHITE,
+        RADIUS_MD,
+    );
+    visuals.widgets.open = visuals.widgets.active;
+    visuals
+}
diff --git a/gui/tests/layout.rs b/gui/tests/layout.rs
new file mode 100644
index 0000000..e0c0475
--- /dev/null
+++ b/gui/tests/layout.rs
@@ -0,0 +1,82 @@
+//! Pure presentation maths. Anything that touches a `Ui` is covered by the
+//! manual screenshot pass; these are the calculations a pixel test cannot
+//! express.
+
+use std::f32::consts::TAU;
+
+use zagan_bet::roulette::{BetTarget, Outside};
+use zagan_bet_gui::roulette::{number_under, size_for, target_name};
+use zagan_bet_gui::theme::{group_digits, money};
+
+#[test]
+fn money_is_grouped_in_threes() {
+    assert_eq!(group_digits(0), "0");
+    assert_eq!(group_digits(999), "999");
+    assert_eq!(group_digits(1000), "1 000");
+    assert_eq!(group_digits(1234567), "1 234 567");
+    assert_eq!(group_digits(-1500), "-1 500");
+    assert_eq!(money(1000), "1 000 Kr");
+}
+
+#[test]
+fn the_wheel_pointer_reads_the_number_at_the_top() {
+    let segment = TAU / 37.0;
+    assert_eq!(number_under(0.0), 0);
+
+    // Rotating by -i segments puts wheel entry i under the pointer.
+    for number in [0u8, 32, 17, 26] {
+        let index = zagan_bet::roulette::WHEEL
+            .iter()
+            .position(|candidate| *candidate == number)
+            .expect("number is on the wheel");
+        let rotation = -(index as f32) * segment;
+        assert_eq!(number_under(rotation), number);
+    }
+
+    // One full turn changes nothing.
+    assert_eq!(number_under(-TAU), 0);
+}
+
+#[test]
+fn table_size_keeps_the_felt_aspect_and_fits() {
+    let available = eframe::egui::vec2(1300.0, 900.0);
+    let size = size_for(available);
+    assert!(size.x <= available.x + 0.01, "{size:?} overflows");
+    assert!(size.y <= available.y + 0.01, "{size:?} overflows");
+
+    // 13 cells wide and 4.89 cells tall, plus the felt border on every side.
+    let cell = (size.x - 12.0) / 13.0;
+    assert!((cell - (size.y - 12.0) / 4.89).abs() < 0.01);
+}
+
+#[test]
+fn targets_read_as_bet_slips() {
+    assert_eq!(
+        target_name(&BetTarget::Straight { number: 17 }),
+        "Straight 17"
+    );
+    assert_eq!(
+        target_name(&BetTarget::Split { a: 26, b: 29 }),
+        "Split 26/29"
+    );
+    assert_eq!(
+        target_name(&BetTarget::Corner {
+            numbers: [17, 18, 20, 21]
+        }),
+        "Corner 17/18/20/21"
+    );
+    assert_eq!(target_name(&BetTarget::Dozen { index: 1 }), "2nd 12");
+    assert_eq!(target_name(&BetTarget::Column { index: 2 }), "Column 3");
+    assert_eq!(
+        target_name(&BetTarget::Outside {
+            kind: Outside::High
+        }),
+        "19-36"
+    );
+    assert_eq!(
+        target_name(&BetTarget::Outside {
+            kind: Outside::Black
+        }),
+        "Black"
+    );
+}