5 files changed, 1354 insertions, 0 deletions

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
+}