From 6c388dfa5e3ccd5a57a314dd6a2d97000ebb3492 Mon Sep 17 00:00:00 2001
From: hz <zeeshaun@gmail.com>
Date: Wed, 22 Jul 2026 23:18:13 -0500
Subject: [PATCH] Redesign answer choice rows into a cleaner divided list

Unselected/eliminated choices now sit in a flat list with a thin
bottom divider instead of each getting its own bordered box, and only
the selected/correct/wrong choice pops out as a rounded, tinted card -
closer to the reference mockup and less visually busy than every
option looking like an separate boxed card.
---
 scripts/ui/question_player.gd | 38 ++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/scripts/ui/question_player.gd b/scripts/ui/question_player.gd
index 7782d57..1ca107a 100644
--- a/scripts/ui/question_player.gd
+++ b/scripts/ui/question_player.gd
@@ -423,10 +423,14 @@ func _ready() -> void:
 	_set_scaled_label(question_elo_label, 16, Style.AMBER)
 	question_content.add_child(question_elo_label)
 
+	var choices_container := VBoxContainer.new()
+	choices_container.add_theme_constant_override("separation", 8)
+	question_content.add_child(choices_container)
+
 	for index in range(5):
 		var choice_row := VBoxContainer.new()
 		choice_row.add_theme_constant_override("separation", 6)
-		question_content.add_child(choice_row)
+		choices_container.add_child(choice_row)
 		choice_rows.append(choice_row)
 
 		var button := Button.new()
@@ -678,28 +682,30 @@ func _question_content_box(dark: bool) -> StyleBoxFlat:
 
 func _answer_box(dark: bool, state: String) -> StyleBoxFlat:
 	var box := StyleBoxFlat.new()
-	var background := Color("0b172b") if dark else Color("ffffff")
-	var border := Color("2b3958") if dark else Brand.LIGHT_BORDER
-	if state == "selected":
-		background = Color("17183b") if dark else Color("f7f3ff")
-		border = Brand.PURPLE
-	elif state == "correct":
+	box.content_margin_left = 54
+	box.content_margin_right = 82
+	box.content_margin_top = 16
+	box.content_margin_bottom = 16
+	if state == "default" or state == "eliminated":
+		# Flat, divider-style row - most choices sit in a plain list; only the
+		# states below need to visually pop out as their own card.
+		box.bg_color = Color("0b172b") if dark else Color("ffffff")
+		box.border_color = Color("22304d") if dark else Color("e7ebf2")
+		box.border_width_bottom = 1
+		box.set_corner_radius_all(0)
+		return box
+	var background := Color("17183b") if dark else Color("eff4ff")
+	var border := Brand.PURPLE
+	if state == "correct":
 		background = Color("08251d") if dark else Color("ecfdf3")
 		border = Brand.SUCCESS
 	elif state == "wrong":
 		background = Color("32131d") if dark else Color("fff1f2")
 		border = Color("fb7185")
-	elif state == "eliminated":
-		background = Color("0a1323") if dark else Color("f8fafc")
-		border = Color("26344f") if dark else Color("e2e8f0")
 	box.bg_color = background
 	box.border_color = border
-	box.set_border_width_all(1)
-	box.set_corner_radius_all(7)
-	box.content_margin_left = 54
-	box.content_margin_right = 82
-	box.content_margin_top = 12
-	box.content_margin_bottom = 12
+	box.set_border_width_all(2)
+	box.set_corner_radius_all(14)
 	return box