Visual overhaul: theme, illustrations, redesigned screens (0.3.0)

Phase "habillage" of the post-0.1.0 plan. Rendering was reviewed on real
screenshots (new tools/screenshot.gd, `make screenshot`), which also
caught and fixed map markers overlapping and truncated titles.

- Global Godot theme (Atkinson Hyperlegible font, cream/green/gold
  palette, raised buttons, rounded cards, thick keyboard focus).
- Original vector art: forest/marsh backdrops, Plume the owl, stars,
  exercise-type icons, correct/try-again icons, 10 collection items.
- Redesigned world map (markers as cards with icon, title and stars,
  responsive layout), profile screens, mission intro, exercise host,
  rule/feedback panels, reward screen and collection grid.
- Motion helper (pop-in, fade) honouring an animations setting.
- Settings: animations flag; base window 1152x648 with canvas_items.

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

scenes/ui/backdrop.gd

@@ -0,0 +1,24 @@
+extends Control
+## Decor plein ecran derriere un ecran (illustration vectorielle provisoire,
+## voir assets/CREDITS.md). "forest" pour le CE1, "marsh" pour le CE2.
+
+const TEXTURES := {
+    "forest": "res://assets/environments/forest_backdrop.svg",
+    "marsh": "res://assets/environments/marsh_backdrop.svg",
+}
+
+@export_enum("forest", "marsh") var kind: String = "forest":
+    set(value):
+        kind = value
+        _apply()
+
+@onready var _picture: TextureRect = $Picture
+
+
+func _ready() -> void:
+    _apply()
+
+
+func _apply() -> void:
+    if _picture != null:
+        _picture.texture = load(TEXTURES.get(kind, TEXTURES["forest"]))

scenes/ui/backdrop.gd.uid

@@ -0,0 +1 @@
+uid://xc0ialw4cfk0

scenes/ui/backdrop.tscn

@@ -0,0 +1,24 @@
+[gd_scene load_steps=2 format=3]
+
+[ext_resource type="Script" path="res://scenes/ui/backdrop.gd" id="1"]
+
+[node name="Backdrop" type="Control"]
+layout_mode = 3
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+mouse_filter = 2
+script = ExtResource("1")
+
+[node name="Picture" type="TextureRect" parent="."]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+mouse_filter = 2
+expand_mode = 1
+stretch_mode = 6

scenes/ui/collection.gd

@@ -2,9 +2,11 @@ extends Control
 ## Collection d'objets gagnes avec les etoiles. Un objet non debloque reste
 ## mysterieux mais indique comment l'obtenir (jamais de mystere frustrant).
 
+const ICON_SIZE := 72.0
+
 @onready var _title_label: Label = %TitleLabel
 @onready var _progress_label: Label = %ProgressLabel
-@onready var _items_box: VBoxContainer = %ItemsBox
+@onready var _items_box: GridContainer = %ItemsBox
 @onready var _back_button: Button = %BackButton
 
 
@@ -26,20 +28,39 @@ func _ready() -> void:
     )
 
 
+## Une ligne = pictogramme + texte (le Label s'appelle "TextLabel").
 func _build_row(item: Dictionary, is_owned: bool) -> Control:
+    var card := PanelContainer.new()
+    card.theme_type_variation = &"SoftCard"
+    card.size_flags_horizontal = Control.SIZE_EXPAND_FILL
+
+    var row := HBoxContainer.new()
+    row.add_theme_constant_override("separation", 12)
+    card.add_child(row)
+
+    var icon := TextureRect.new()
+    icon.texture = (
+        ItemIcons.texture_for(item["item_id"]) if is_owned else ItemIcons.locked_texture()
+    )
+    icon.custom_minimum_size = Vector2(ICON_SIZE, ICON_SIZE)
+    icon.expand_mode = TextureRect.EXPAND_IGNORE_SIZE
+    icon.stretch_mode = TextureRect.STRETCH_KEEP_ASPECT_CENTERED
+    icon.size_flags_vertical = Control.SIZE_SHRINK_CENTER
+    row.add_child(icon)
+
     var label := Label.new()
+    label.name = "TextLabel"
     label.autowrap_mode = TextServer.AUTOWRAP_WORD_SMART
-    label.custom_minimum_size = Vector2(560, 0)
+    label.size_flags_horizontal = Control.SIZE_EXPAND_FILL
+    label.size_flags_vertical = Control.SIZE_SHRINK_CENTER
     if is_owned:
-        label.text = (
-            "%s — %s\n%s"
-            % [item["title"], UIText.get_text("collection.owned_marker"), item["description"]]
-        )
+        label.text = "%s\n%s" % [item["title"], item["description"]]
     else:
         label.text = (
             "%s\n%s" % [UIText.get_text("collection.locked_title"), _unlock_hint(item["unlock"])]
         )
-    return label
+    row.add_child(label)
+    return card
 
 
 func _unlock_hint(unlock: Dictionary) -> String:

scenes/ui/collection.tscn

@@ -1,6 +1,7 @@
-[gd_scene load_steps=2 format=3]
+[gd_scene load_steps=3 format=3]
 
 [ext_resource type="Script" path="res://scenes/ui/collection.gd" id="1"]
+[ext_resource type="PackedScene" path="res://scenes/ui/backdrop.tscn" id="backdrop"]
 
 [node name="Collection" type="Control"]
 layout_mode = 3
@@ -11,6 +12,14 @@ grow_horizontal = 2
 grow_vertical = 2
 script = ExtResource("1")
 
+[node name="Backdrop" parent="." instance=ExtResource("backdrop")]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+
 [node name="Margin" type="MarginContainer" parent="."]
 layout_mode = 1
 anchors_preset = 15
@@ -18,37 +27,44 @@ anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
-theme_override_constants/margin_left = 24
+theme_override_constants/margin_left = 40
 theme_override_constants/margin_top = 24
-theme_override_constants/margin_right = 24
+theme_override_constants/margin_right = 40
 theme_override_constants/margin_bottom = 24
 
-[node name="VBox" type="VBoxContainer" parent="Margin"]
+[node name="Card" type="PanelContainer" parent="Margin"]
+layout_mode = 2
+
+[node name="VBox" type="VBoxContainer" parent="Margin/Card"]
 layout_mode = 2
 theme_override_constants/separation = 12
 
-[node name="TitleLabel" type="Label" parent="Margin/VBox"]
-unique_name_in_owner = true
-layout_mode = 2
-theme_override_font_sizes/font_size = 32
-horizontal_alignment = 1
-
-[node name="ProgressLabel" type="Label" parent="Margin/VBox"]
+[node name="TitleLabel" type="Label" parent="Margin/Card/VBox"]
 unique_name_in_owner = true
+theme_type_variation = &"CardTitle"
 layout_mode = 2
 horizontal_alignment = 1
 
-[node name="Scroll" type="ScrollContainer" parent="Margin/VBox"]
+[node name="ProgressLabel" type="Label" parent="Margin/Card/VBox"]
+unique_name_in_owner = true
+theme_type_variation = &"Emphasis"
+layout_mode = 2
+horizontal_alignment = 1
+
+[node name="Scroll" type="ScrollContainer" parent="Margin/Card/VBox"]
 layout_mode = 2
 size_flags_vertical = 3
+horizontal_scroll_mode = 0
 
-[node name="ItemsBox" type="VBoxContainer" parent="Margin/VBox/Scroll"]
+[node name="ItemsBox" type="GridContainer" parent="Margin/Card/VBox/Scroll"]
 unique_name_in_owner = true
 layout_mode = 2
 size_flags_horizontal = 3
-theme_override_constants/separation = 16
+theme_override_constants/h_separation = 16
+theme_override_constants/v_separation = 12
+columns = 2
 
-[node name="BackButton" type="Button" parent="Margin/VBox"]
+[node name="BackButton" type="Button" parent="Margin/Card/VBox"]
 unique_name_in_owner = true
 layout_mode = 2
 custom_minimum_size = Vector2(0, 56)

scenes/ui/feedback_panel.gd

@@ -5,6 +5,10 @@ extends Control
 
 signal continue_pressed
 
+const ICON_CORRECT := preload("res://assets/interface/icon_correct.svg")
+const ICON_TRY_AGAIN := preload("res://assets/interface/icon_try_again.svg")
+
+@onready var _icon: TextureRect = %Icon
 @onready var _title_label: Label = %TitleLabel
 @onready var _hint_box: VBoxContainer = %HintBox
 @onready var _hint_label: Label = %HintLabel
@@ -21,6 +25,8 @@ func _ready() -> void:
 
 
 func show_result(result: CorrectionResult, support_level: AttemptFlow.SupportLevel) -> void:
+    _icon.texture = ICON_CORRECT if result.is_correct else ICON_TRY_AGAIN
+    Motion.pop_in(_icon)
     _title_label.text = (
         UIText.get_text("feedback_panel.correct_title")
         if result.is_correct

scenes/ui/feedback_panel.tscn

@@ -31,7 +31,7 @@ grow_vertical = 2
 
 [node name="Panel" type="PanelContainer" parent="CenterContainer"]
 layout_mode = 2
-custom_minimum_size = Vector2(480, 0)
+custom_minimum_size = Vector2(560, 0)
 
 [node name="Margin" type="MarginContainer" parent="CenterContainer/Panel"]
 layout_mode = 2
@@ -44,10 +44,19 @@ theme_override_constants/margin_bottom = 24
 layout_mode = 2
 theme_override_constants/separation = 12
 
-[node name="TitleLabel" type="Label" parent="CenterContainer/Panel/Margin/VBox"]
+[node name="Icon" type="TextureRect" parent="CenterContainer/Panel/Margin/VBox"]
 unique_name_in_owner = true
 layout_mode = 2
-theme_override_font_sizes/font_size = 28
+custom_minimum_size = Vector2(72, 72)
+size_flags_horizontal = 4
+expand_mode = 1
+stretch_mode = 5
+
+[node name="TitleLabel" type="Label" parent="CenterContainer/Panel/Margin/VBox"]
+unique_name_in_owner = true
+theme_type_variation = &"CardTitle"
+layout_mode = 2
+horizontal_alignment = 1
 
 [node name="HintBox" type="VBoxContainer" parent="CenterContainer/Panel/Margin/VBox"]
 unique_name_in_owner = true

scenes/ui/reward_screen.gd

@@ -5,23 +5,37 @@ extends Control
 ## au moins une etoile. Sauvegarde groupee ici, en fin de mission
 ## (docs/specs/decisions.md point 7).
 
+const STAR_FULL := preload("res://assets/interface/star_full.svg")
+const STAR_EMPTY := preload("res://assets/interface/star_empty.svg")
+const STAR_SIZE := 88.0
+const ITEM_SIZE := 72.0
+
+@onready var _backdrop: Control = %Backdrop
 @onready var _title_label: Label = %TitleLabel
+@onready var _stars_row: HBoxContainer = %StarsRow
 @onready var _stars_label: Label = %StarsLabel
 @onready var _message_label: Label = %MessageLabel
 @onready var _record_label: Label = %RecordLabel
 @onready var _total_label: Label = %TotalLabel
+@onready var _new_items_box: VBoxContainer = %NewItemsBox
 @onready var _new_items_label: Label = %NewItemsLabel
+@onready var _new_items_row: HBoxContainer = %NewItemsRow
 @onready var _collection_button: Button = %CollectionButton
 @onready var _continue_button: Button = %ContinueButton
 
 
 func _ready() -> void:
+    var mission := ExerciseEngine.get_mission(GameManager.pending_mission_id)
+    var rule := ExerciseEngine.get_rule(mission.get("rule_id", ""))
+    _backdrop.kind = "marsh" if rule.get("level", "CE1") == "CE2" else "forest"
+
     var summary := ProgressManager.complete_mission(
         GameManager.pending_mission_id, GameManager.last_outcomes
     )
     ProgressManager.save_now()
 
     _title_label.text = UIText.get_text("reward_screen.title")
+    _show_stars(summary["stars"])
     _stars_label.text = (
         "%s %d/%d"
         % [UIText.get_text("reward_screen.stars_label"), summary["stars"], MissionScoring.MAX_STARS]
@@ -32,17 +46,7 @@ func _ready() -> void:
     _total_label.text = (
         "%s %d" % [UIText.get_text("reward_screen.total_label"), summary["total_stars"]]
     )
-
-    var new_items: Array = summary["new_items"]
-    _new_items_label.visible = not new_items.is_empty()
-    if not new_items.is_empty():
-        var titles: Array[String] = []
-        for item in ExerciseEngine.get_reward_items():
-            if new_items.has(item["item_id"]):
-                titles.append(item["title"])
-        _new_items_label.text = (
-            "%s\n%s" % [UIText.get_text("reward_screen.new_items_label"), "\n".join(titles)]
-        )
+    _show_new_items(summary["new_items"])
 
     _collection_button.text = UIText.get_text("reward_screen.collection_button")
     _collection_button.pressed.connect(_on_collection_pressed)
@@ -50,6 +54,45 @@ func _ready() -> void:
     _continue_button.pressed.connect(_on_continue_pressed)
 
 
+func _show_stars(earned: int) -> void:
+    for i in MissionScoring.MAX_STARS:
+        var star := TextureRect.new()
+        star.texture = STAR_FULL if i < earned else STAR_EMPTY
+        star.custom_minimum_size = Vector2(STAR_SIZE, STAR_SIZE)
+        star.expand_mode = TextureRect.EXPAND_IGNORE_SIZE
+        star.stretch_mode = TextureRect.STRETCH_KEEP_ASPECT_CENTERED
+        _stars_row.add_child(star)
+        if i < earned:
+            Motion.pop_in(star, 0.25 + 0.2 * i)
+
+
+func _show_new_items(new_items: Array) -> void:
+    _new_items_box.visible = not new_items.is_empty()
+    if new_items.is_empty():
+        return
+    _new_items_label.text = UIText.get_text("reward_screen.new_items_label")
+    var index := 0
+    for item in ExerciseEngine.get_reward_items():
+        if not new_items.has(item["item_id"]):
+            continue
+        var holder := VBoxContainer.new()
+        var icon := TextureRect.new()
+        icon.texture = ItemIcons.texture_for(item["item_id"])
+        icon.custom_minimum_size = Vector2(ITEM_SIZE, ITEM_SIZE)
+        icon.expand_mode = TextureRect.EXPAND_IGNORE_SIZE
+        icon.stretch_mode = TextureRect.STRETCH_KEEP_ASPECT_CENTERED
+        icon.size_flags_horizontal = Control.SIZE_SHRINK_CENTER
+        holder.add_child(icon)
+        var name_label := Label.new()
+        name_label.text = item["title"]
+        name_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
+        name_label.theme_type_variation = &"Small"
+        holder.add_child(name_label)
+        _new_items_row.add_child(holder)
+        Motion.pop_in(holder, 0.8 + 0.15 * index)
+        index += 1
+
+
 func _on_collection_pressed() -> void:
     GameManager.pending_mission_id = ""
     GameManager.goto(GameManager.SCENE_COLLECTION)

scenes/ui/reward_screen.tscn

@@ -1,6 +1,8 @@
-[gd_scene load_steps=2 format=3]
+[gd_scene load_steps=4 format=3]
 
 [ext_resource type="Script" path="res://scenes/ui/reward_screen.gd" id="1"]
+[ext_resource type="PackedScene" path="res://scenes/ui/backdrop.tscn" id="backdrop"]
+[ext_resource type="Texture2D" path="res://assets/characters/owl_plume.svg" id="3"]
 
 [node name="RewardScreen" type="Control"]
 layout_mode = 3
@@ -11,59 +13,104 @@ grow_horizontal = 2
 grow_vertical = 2
 script = ExtResource("1")
 
-[node name="CenterContainer" type="CenterContainer" parent="."]
+[node name="Backdrop" parent="." instance=ExtResource("backdrop")]
 layout_mode = 1
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
-
-[node name="VBox" type="VBoxContainer" parent="CenterContainer"]
-layout_mode = 2
-theme_override_constants/separation = 20
-
-[node name="TitleLabel" type="Label" parent="CenterContainer/VBox"]
 unique_name_in_owner = true
-layout_mode = 2
-theme_override_font_sizes/font_size = 36
-horizontal_alignment = 1
 
-[node name="StarsLabel" type="Label" parent="CenterContainer/VBox"]
+[node name="Margin" type="MarginContainer" parent="."]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+theme_override_constants/margin_left = 32
+theme_override_constants/margin_top = 24
+theme_override_constants/margin_right = 32
+theme_override_constants/margin_bottom = 24
+
+[node name="Center" type="CenterContainer" parent="Margin"]
+layout_mode = 2
+
+[node name="Card" type="PanelContainer" parent="Margin/Center"]
+layout_mode = 2
+custom_minimum_size = Vector2(720, 0)
+
+[node name="VBox" type="VBoxContainer" parent="Margin/Center/Card"]
+layout_mode = 2
+theme_override_constants/separation = 12
+
+[node name="TitleLabel" type="Label" parent="Margin/Center/Card/VBox"]
 unique_name_in_owner = true
+theme_type_variation = &"CardTitle"
 layout_mode = 2
 horizontal_alignment = 1
 
-[node name="MessageLabel" type="Label" parent="CenterContainer/VBox"]
+[node name="StarsRow" type="HBoxContainer" parent="Margin/Center/Card/VBox"]
+unique_name_in_owner = true
+layout_mode = 2
+alignment = 1
+theme_override_constants/separation = 10
+
+[node name="StarsLabel" type="Label" parent="Margin/Center/Card/VBox"]
+unique_name_in_owner = true
+theme_type_variation = &"Emphasis"
+layout_mode = 2
+horizontal_alignment = 1
+
+[node name="MessageLabel" type="Label" parent="Margin/Center/Card/VBox"]
 unique_name_in_owner = true
 layout_mode = 2
 horizontal_alignment = 1
 autowrap_mode = 2
-custom_minimum_size = Vector2(480, 0)
 
-[node name="RecordLabel" type="Label" parent="CenterContainer/VBox"]
+[node name="RecordLabel" type="Label" parent="Margin/Center/Card/VBox"]
+unique_name_in_owner = true
+theme_type_variation = &"Emphasis"
+layout_mode = 2
+horizontal_alignment = 1
+
+[node name="TotalLabel" type="Label" parent="Margin/Center/Card/VBox"]
 unique_name_in_owner = true
 layout_mode = 2
 horizontal_alignment = 1
 
-[node name="TotalLabel" type="Label" parent="CenterContainer/VBox"]
+[node name="NewItemsBox" type="VBoxContainer" parent="Margin/Center/Card/VBox"]
 unique_name_in_owner = true
 layout_mode = 2
-horizontal_alignment = 1
+theme_override_constants/separation = 6
 
-[node name="NewItemsLabel" type="Label" parent="CenterContainer/VBox"]
+[node name="NewItemsLabel" type="Label" parent="Margin/Center/Card/VBox/NewItemsBox"]
 unique_name_in_owner = true
+theme_type_variation = &"Emphasis"
 layout_mode = 2
 horizontal_alignment = 1
 autowrap_mode = 2
-custom_minimum_size = Vector2(480, 0)
 
-[node name="CollectionButton" type="Button" parent="CenterContainer/VBox"]
+[node name="NewItemsRow" type="HBoxContainer" parent="Margin/Center/Card/VBox/NewItemsBox"]
 unique_name_in_owner = true
 layout_mode = 2
-custom_minimum_size = Vector2(200, 56)
+alignment = 1
+theme_override_constants/separation = 16
 
-[node name="ContinueButton" type="Button" parent="CenterContainer/VBox"]
+[node name="Buttons" type="HBoxContainer" parent="Margin/Center/Card/VBox"]
+layout_mode = 2
+theme_override_constants/separation = 16
+
+[node name="CollectionButton" type="Button" parent="Margin/Center/Card/VBox/Buttons"]
+unique_name_in_owner = true
+theme_type_variation = &"SecondaryButton"
+layout_mode = 2
+size_flags_horizontal = 3
+custom_minimum_size = Vector2(0, 56)
+
+[node name="ContinueButton" type="Button" parent="Margin/Center/Card/VBox/Buttons"]
 unique_name_in_owner = true
 layout_mode = 2
-custom_minimum_size = Vector2(200, 56)
+size_flags_horizontal = 3
+custom_minimum_size = Vector2(0, 56)

scenes/ui/rule_panel.tscn

@@ -31,7 +31,7 @@ grow_vertical = 2
 
 [node name="Panel" type="PanelContainer" parent="CenterContainer"]
 layout_mode = 2
-custom_minimum_size = Vector2(480, 0)
+custom_minimum_size = Vector2(560, 0)
 
 [node name="Margin" type="MarginContainer" parent="CenterContainer/Panel"]
 layout_mode = 2
@@ -46,8 +46,9 @@ theme_override_constants/separation = 16
 
 [node name="TitleLabel" type="Label" parent="CenterContainer/Panel/Margin/VBox"]
 unique_name_in_owner = true
+theme_type_variation = &"CardTitle"
 layout_mode = 2
-theme_override_font_sizes/font_size = 28
+horizontal_alignment = 1
 
 [node name="StatementLabel" type="Label" parent="CenterContainer/Panel/Margin/VBox"]
 unique_name_in_owner = true