From 41f6aa72ad607d9d50aa00cdbf86b5eb38476954 Mon Sep 17 00:00:00 2001
From: Szabo Ivan <szaboivan.ch@gmail.com>
Date: Thu, 4 Jun 2026 11:34:48 +0200
Subject: [PATCH] Improve CSS formatting

---
 frontend/game.html          |   2 +-
 frontend/index.html         |  51 +++----
 frontend/leaderboard.html   |   2 +-
 frontend/lobby.html         |   2 +-
 frontend/results.html       |  12 +-
 frontend/styles/game.css    | 122 ++++++---------
 frontend/styles/index.css   | 225 +++++++++++----------------
 frontend/styles/leader.css  | 124 +++++++--------
 frontend/styles/lobby.css   | 109 +++++++-------
 frontend/styles/main.css    | 292 ++++++++++++++++--------------------
 frontend/styles/results.css | 108 ++++++-------
 11 files changed, 436 insertions(+), 613 deletions(-)

diff --git a/frontend/game.html b/frontend/game.html
index 1e39795..c9bf794 100644
--- a/frontend/game.html
+++ b/frontend/game.html
@@ -147,4 +147,4 @@
 
 <script type="module" src="scripts/game.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 908438f..7cc782e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -12,6 +12,7 @@
   <p class="noscript-msg">GeoDraw requires JavaScript. Please enable it in your browser settings.</p>
 </noscript>
 <div class="wrap">
+
   <header class="header">
     <div class="container header__inner">
       <a href="#hero" class="logo">
@@ -33,6 +34,8 @@
   </header>
 
   <main>
+
+    <!-- ─── HERO ─── -->
     <section class="hero" id="hero">
       <div class="container hero__inner">
 
@@ -61,23 +64,23 @@
 
         <div class="globe-card reveal reveal-delay-1">
           <div class="globe">
-            <div class="continent c1"></div>
-            <div class="continent c2"></div>
-            <div class="continent c3"></div>
-            <div class="continent c4"></div>
-            <div class="globe-line gl1"></div>
-            <div class="globe-line gl2"></div>
-            <div class="globe-line gl3"></div>
-            <div class="globe-line gl4"></div>
+            <div class="continent continent--a"></div>
+            <div class="continent continent--b"></div>
+            <div class="continent continent--c"></div>
+            <div class="continent continent--d"></div>
+            <div class="globe-line globe-line--meridian-sm"></div>
+            <div class="globe-line globe-line--meridian-lg"></div>
+            <div class="globe-line globe-line--parallel-sm"></div>
+            <div class="globe-line globe-line--parallel-lg"></div>
           </div>
 
-          <div class="globe-badge gb--score">
-            <span class="gb__dot gb__dot--green"></span>
+          <div class="globe-badge globe-badge--score">
+            <span class="globe-badge__dot globe-badge__dot--green"></span>
             <span>Score: 94%</span>
           </div>
 
-          <div class="globe-badge gb--country">
-            <span class="gb__dot gb__dot--blue"></span>
+          <div class="globe-badge globe-badge--country">
+            <span class="globe-badge__dot globe-badge__dot--blue"></span>
             <span>Norway — Round 3</span>
           </div>
         </div>
@@ -85,6 +88,7 @@
       </div>
     </section>
 
+    <!-- ─── ABOUT ─── -->
     <section class="about" id="about">
       <div class="container about__inner">
 
@@ -95,36 +99,32 @@
             GeoDraw is a competitive browser game built on memory and precision. You get a country name, sketch its outline, and the system calculates how close you were to the real border.
           </p>
 
-          <div class="mini-globe-wrap reveal reveal-delay-3">
-            <svg class="game-preview-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <div class="game-preview reveal reveal-delay-3">
+            <svg class="game-preview__svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
               <!-- Grid lines -->
               <line x1="0"   y1="66"  x2="200" y2="66"  stroke="rgba(11,31,42,.06)" stroke-width="1"/>
               <line x1="0"   y1="133" x2="200" y2="133" stroke="rgba(11,31,42,.06)" stroke-width="1"/>
               <line x1="66"  y1="0"   x2="66"  y2="200" stroke="rgba(11,31,42,.06)" stroke-width="1"/>
               <line x1="133" y1="0"   x2="133" y2="200" stroke="rgba(11,31,42,.06)" stroke-width="1"/>
-
               <!-- Reference outline (filled) -->
               <path d="M100 22 L148 40 L162 76 L150 112 L124 148 L80 142 L52 108 L54 66 Z"
                 fill="rgba(26,127,196,.10)"
                 stroke="rgba(26,127,196,.5)"
                 stroke-width="2"
                 stroke-linejoin="round"/>
-
-              <!-- Player's drawn path (slightly off, freehand feel) -->
+              <!-- Player's drawn path -->
               <path d="M96 26 L152 44 L164 82 L146 118 L120 152 L76 144 L48 106 L52 62 Z"
                 fill="none"
                 stroke="#1a7fc4"
                 stroke-width="2.5"
                 stroke-linejoin="round"
                 stroke-linecap="round"/>
-
               <!-- City dot: Bern -->
               <circle cx="96" cy="100" r="4" fill="rgba(240,180,40,.9)"/>
               <circle cx="96" cy="100" r="4" fill="none" stroke="white" stroke-width="1.5"/>
               <!-- City dot: Zurich -->
               <circle cx="118" cy="72"  r="4" fill="rgba(240,180,40,.9)"/>
               <circle cx="118" cy="72"  r="4" fill="none" stroke="white" stroke-width="1.5"/>
-
               <!-- Score badge -->
               <rect x="118" y="22" width="62" height="26" rx="8" fill="white" filter="url(#shadow)"/>
               <defs>
@@ -181,13 +181,11 @@
 
         <div class="register__card reveal reveal-delay-1">
 
-          <!-- Toggle switch -->
           <div class="lobby-toggle" role="group" aria-label="Lobby action">
             <button type="button" class="lobby-toggle__btn lobby-toggle__btn--active" id="toggle-create-btn">Create</button>
             <button type="button" class="lobby-toggle__btn" id="toggle-join-btn">Join</button>
           </div>
 
-          <!-- Create form (shown by default) -->
           <div id="form-create">
             <p class="card-title">Create a game</p>
             <div class="form">
@@ -203,7 +201,6 @@
             </div>
           </div>
 
-          <!-- Join form (hidden by default) -->
           <div id="form-join" hidden>
             <p class="card-title">Join a game</p>
             <div class="form">
@@ -228,18 +225,10 @@
 
   <footer class="footer">
     <div class="container footer__inner">
-
-      <div class="footer__left">
-      </div>
-
       <div class="footer__center">
         <a href="#hero" class="footer__brand">GeoDraw</a>
         <p class="footer__sub">Browser geography game</p>
       </div>
-
-      <div class="footer__right">
-      </div>
-
     </div>
   </footer>
 
@@ -247,4 +236,4 @@
 
 <script type="module" src="scripts/index.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index cbf8a24..c8125e9 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -91,4 +91,4 @@
 
 <script type="module" src="scripts/leaderboard.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/lobby.html b/frontend/lobby.html
index 0105d63..7a9c25b 100644
--- a/frontend/lobby.html
+++ b/frontend/lobby.html
@@ -116,4 +116,4 @@
 
 <script type="module" src="scripts/lobby.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/results.html b/frontend/results.html
index b59ea7a..b6f658e 100644
--- a/frontend/results.html
+++ b/frontend/results.html
@@ -60,12 +60,8 @@
         </div>
 
         <div class="results-actions">
-          <a href="lobby.html" class="btn btn--primary">
-            Play Again →
-          </a>
-          <a href="leaderboard.html" class="btn btn--ghost">
-            🏆 Leaderboard
-          </a>
+          <a href="lobby.html" class="btn btn--primary">Play Again →</a>
+          <a href="leaderboard.html" class="btn btn--ghost">🏆 Leaderboard</a>
         </div>
 
       </div>
@@ -74,7 +70,7 @@
 
   <footer class="footer">
     <div class="container footer__inner">
-      <div>
+      <div class="footer__left">
         <a href="index.html" class="footer__brand">GeoDraw</a>
         <p class="footer__sub">© 2026 · Browser geography game</p>
       </div>
@@ -98,4 +94,4 @@
 
 <script type="module" src="scripts/results.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/styles/game.css b/frontend/styles/game.css
index b490c5d..917dd59 100644
--- a/frontend/styles/game.css
+++ b/frontend/styles/game.css
@@ -1,5 +1,8 @@
 /* game.css */
 
+/* ════════════════════════════════════════
+   GAME LAYOUT
+   ════════════════════════════════════════ */
 .game-layout {
 	min-height: calc(100vh - var(--hh));
 	display: grid;
@@ -8,7 +11,10 @@
 	gap: 16px;
 }
 
-/* ── Top bar */
+
+/* ════════════════════════════════════════
+   TOP BAR
+   ════════════════════════════════════════ */
 .game-topbar {
 	display: grid;
 	grid-template-columns: 1fr auto 1fr;
@@ -16,6 +22,7 @@
 	gap: 16px;
 }
 
+/* Round pips */
 .game-round {
 	display: flex;
 	align-items: center;
@@ -30,12 +37,8 @@
 	transition: background 0.3s;
 }
 
-.round-pip.active {
-	background: var(--sea);
-}
-.round-pip.done {
-	background: var(--leaf);
-}
+.round-pip--active { background: var(--sea); }
+.round-pip--done   { background: var(--leaf); }
 
 .round-label {
 	font-family: "Syne", sans-serif;
@@ -113,29 +116,20 @@
 	width: 100%;
 	background: linear-gradient(90deg, var(--sea), var(--leaf));
 	border-radius: 999px;
-	transition:
-		width 1s linear,
-		background 0.4s ease;
+	transition: width 1s linear, background 0.4s ease;
 }
 
-/* Timer urgency states — applied via JS classList */
-.timer--warning .timer-bar,
-.timer--warning .timer-num {
-	color: var(--gold);
-}
-.timer--warning .timer-bar {
-	background: var(--gold);
-}
+/* Timer urgency states — toggled via JS */
+.timer--warning .timer-num { color: var(--gold); }
+.timer--warning .timer-bar  { background: var(--gold); }
 
-.timer--danger .timer-bar,
-.timer--danger .timer-num {
-	color: var(--danger);
-}
-.timer--danger .timer-bar {
-	background: var(--danger);
-}
+.timer--danger .timer-num   { color: var(--danger); }
+.timer--danger .timer-bar   { background: var(--danger); }
 
-/* ── Canvas area */
+
+/* ════════════════════════════════════════
+   CANVAS AREA
+   ════════════════════════════════════════ */
 .canvas-area {
 	display: grid;
 	grid-template-columns: 1fr 220px;
@@ -193,15 +187,16 @@
 	font-size: 2rem;
 	font-weight: 800;
 	opacity: 0;
-	transition:
-		opacity 0.4s ease,
-		transform 0.4s ease;
+	transition: opacity 0.4s ease, transform 0.4s ease;
 	pointer-events: none;
 	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 	white-space: nowrap;
 }
 
-/* Sidebar */
+
+/* ════════════════════════════════════════
+   SIDEBAR
+   ════════════════════════════════════════ */
 .game-sidebar {
 	display: flex;
 	flex-direction: column;
@@ -226,7 +221,7 @@
 	margin-bottom: 10px;
 }
 
-/* Round scores */
+/* Round score rows */
 .round-scores {
 	display: grid;
 	gap: 8px;
@@ -256,7 +251,7 @@
 	color: var(--sea);
 }
 
-/* Player name in sidebar */
+/* Player info */
 .player-name-display {
 	font-family: "Syne", sans-serif;
 	font-weight: 700;
@@ -271,13 +266,19 @@
 	line-height: 1.55;
 }
 
-/* Controls */
+
+/* ════════════════════════════════════════
+   CONTROLS
+   ════════════════════════════════════════ */
 .game-controls {
 	display: flex;
 	gap: 10px;
 }
 
-/* ─── Responsive ─── */
+
+/* ════════════════════════════════════════
+   RESPONSIVE
+   ════════════════════════════════════════ */
 @media (max-width: 900px) {
 	.canvas-area {
 		grid-template-columns: 1fr;
@@ -289,17 +290,9 @@
 		flex-wrap: wrap;
 	}
 
-	.sidebar-card {
-		flex: 1 1 140px;
-	}
-
-	.canvas-wrap {
-		width: min(100%, 72vh);
-	}
-
-	.game-topbar {
-		grid-template-columns: auto 1fr auto;
-	}
+	.sidebar-card  { flex: 1 1 140px; }
+	.canvas-wrap   { width: min(100%, 72vh); }
+	.game-topbar   { grid-template-columns: auto 1fr auto; }
 }
 
 @media (max-width: 600px) {
@@ -314,36 +307,17 @@
 		gap: 10px;
 	}
 
-	.game-country {
-		text-align: left;
-	}
-	.game-timer {
-		align-items: flex-start;
-	}
-	.timer-track {
-		width: 100%;
-	}
+	.game-country  { text-align: left; }
+	.game-timer    { align-items: flex-start; }
+	.timer-track   { width: 100%; }
+	.canvas-wrap   { width: 100%; }
 
-	.canvas-wrap {
-		width: 100%;
-	}
-
-	.game-controls {
-		flex-direction: column;
-	}
-	.game-controls .btn {
-		width: 100%;
-	}
+	.game-controls          { flex-direction: column; }
+	.game-controls .btn     { width: 100%; }
 }
 
 @media (max-width: 360px) {
-	.country-name {
-		font-size: 1.4rem;
-	}
-	.timer-num {
-		font-size: 1.6rem;
-	}
-	.canvas-wrap {
-		min-height: 0;
-	}
-}
+	.country-name { font-size: 1.4rem; }
+	.timer-num    { font-size: 1.6rem; }
+	.canvas-wrap  { min-height: 0; }
+}
\ No newline at end of file
diff --git a/frontend/styles/index.css b/frontend/styles/index.css
index 7ae040a..57ae125 100644
--- a/frontend/styles/index.css
+++ b/frontend/styles/index.css
@@ -1,6 +1,8 @@
 /* index.css — landing page specific styles */
 
-/* ─── EYEBROW ─── */
+/* ════════════════════════════════════════
+   EYEBROW BADGE
+   ════════════════════════════════════════ */
 .eyebrow {
 	display: inline-flex;
 	align-items: center;
@@ -26,8 +28,7 @@
 }
 
 @keyframes pulse {
-	0%,
-	100% {
+	0%, 100% {
 		transform: scale(1);
 		opacity: 1;
 	}
@@ -37,7 +38,10 @@
 	}
 }
 
-/* ─── HERO ─── */
+
+/* ════════════════════════════════════════
+   HERO SECTION
+   ════════════════════════════════════════ */
 .hero {
 	min-height: calc(100vh - var(--hh));
 	display: grid;
@@ -84,7 +88,10 @@
 	flex-wrap: wrap;
 }
 
-/* ─── GLOBE CARD ─── */
+
+/* ════════════════════════════════════════
+   GLOBE CARD
+   ════════════════════════════════════════ */
 .globe-card {
 	background: var(--glass);
 	backdrop-filter: blur(12px);
@@ -106,18 +113,11 @@
 	inset: 0;
 	border-radius: var(--r-xl);
 	background:
-		radial-gradient(
-			circle at 30% 25%,
-			rgba(65, 184, 105, 0.18),
-			transparent 50%
-		),
-		radial-gradient(
-			circle at 75% 75%,
-			rgba(26, 127, 196, 0.15),
-			transparent 50%
-		);
+		radial-gradient(circle at 30% 25%, rgba(65, 184, 105, 0.18), transparent 50%),
+		radial-gradient(circle at 75% 75%, rgba(26, 127, 196, 0.15), transparent 50%);
 }
 
+/* Globe sphere */
 .globe {
 	position: relative;
 	z-index: 1;
@@ -137,20 +137,22 @@
 		0 30px 60px rgba(7, 47, 82, 0.28);
 }
 
+/* Continents */
 .continent {
 	position: absolute;
 	background: #52c870;
 	border-radius: 46% 54% 58% 42%;
 }
 
-.c1 {
+.continent--a {
 	width: 30%;
 	height: 22%;
 	top: 18%;
 	left: 12%;
 	transform: rotate(-14deg);
 }
-.c2 {
+
+.continent--b {
 	width: 18%;
 	height: 28%;
 	top: 30%;
@@ -158,14 +160,16 @@
 	transform: rotate(8deg);
 	border-radius: 40% 60% 50% 50%;
 }
-.c3 {
+
+.continent--c {
 	width: 22%;
 	height: 16%;
 	top: 56%;
 	right: 15%;
 	transform: rotate(22deg);
 }
-.c4 {
+
+.continent--d {
 	width: 12%;
 	height: 18%;
 	top: 68%;
@@ -174,6 +178,7 @@
 	border-radius: 50%;
 }
 
+/* Globe grid lines */
 .globe-line {
 	position: absolute;
 	border: 1px solid rgba(255, 255, 255, 0.12);
@@ -183,25 +188,12 @@
 	transform: translate(-50%, -50%);
 }
 
-.gl1 {
-	width: 60%;
-	height: 100%;
-}
-.gl2 {
-	width: 88%;
-	height: 100%;
-}
-.gl3 {
-	width: 100%;
-	height: 55%;
-	top: 50%;
-}
-.gl4 {
-	width: 100%;
-	height: 80%;
-	top: 50%;
-}
+.globe-line--meridian-sm  { width: 60%;  height: 100%; }
+.globe-line--meridian-lg  { width: 88%;  height: 100%; }
+.globe-line--parallel-sm  { width: 100%; height: 55%; top: 50%; }
+.globe-line--parallel-lg  { width: 100%; height: 80%; top: 50%; }
 
+/* Globe floating badges */
 .globe-badge {
 	position: absolute;
 	z-index: 2;
@@ -214,43 +206,30 @@
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	animation: floatBadge 3s ease-in-out infinite;
+	animation: float-badge 3s ease-in-out infinite;
 }
 
-.gb--score {
-	top: 14%;
-	right: 6%;
-	animation-delay: 0s;
-}
-.gb--country {
-	bottom: 14%;
-	left: 4%;
-	animation-delay: 1.2s;
+.globe-badge--score   { top: 14%;    right: 6%; animation-delay: 0s; }
+.globe-badge--country { bottom: 14%; left: 4%;  animation-delay: 1.2s; }
+
+@keyframes float-badge {
+	0%, 100% { transform: translateY(0); }
+	50%       { transform: translateY(-8px); }
 }
 
-@keyframes floatBadge {
-	0%,
-	100% {
-		transform: translateY(0);
-	}
-	50% {
-		transform: translateY(-8px);
-	}
-}
-
-.gb__dot {
+.globe-badge__dot {
 	width: 8px;
 	height: 8px;
 	border-radius: 50%;
 }
-.gb__dot--green {
-	background: var(--leaf);
-}
-.gb__dot--blue {
-	background: var(--sea);
-}
 
-/* ─── ABOUT ─── */
+.globe-badge__dot--green { background: var(--leaf); }
+.globe-badge__dot--blue  { background: var(--sea);  }
+
+
+/* ════════════════════════════════════════
+   ABOUT SECTION
+   ════════════════════════════════════════ */
 .about {
 	padding: 100px 0;
 }
@@ -269,7 +248,8 @@
 	margin-bottom: 36px;
 }
 
-.mini-globe-wrap {
+/* Game preview card */
+.game-preview {
 	background: var(--glass);
 	backdrop-filter: blur(10px);
 	border: 1px solid rgba(255, 255, 255, 0.8);
@@ -285,26 +265,25 @@
 	overflow: hidden;
 }
 
-.mini-globe-wrap::before {
+.game-preview::before {
 	content: "";
 	position: absolute;
 	inset: 0;
 	border-radius: var(--r-xl);
-	background: radial-gradient(
-		circle at 60% 40%,
-		rgba(26, 127, 196, 0.1),
-		transparent 50%
-	);
+	background: radial-gradient(circle at 60% 40%, rgba(26, 127, 196, 0.1), transparent 50%);
 }
 
-.game-preview-svg {
+.game-preview__svg {
 	width: 100%;
 	height: auto;
 	position: relative;
 	z-index: 1;
 }
 
-/* ─── STEPS ─── */
+
+/* ════════════════════════════════════════
+   STEPS LIST
+   ════════════════════════════════════════ */
 .steps {
 	display: grid;
 	gap: 16px;
@@ -321,9 +300,7 @@
 	border-radius: var(--r-lg);
 	padding: 22px 26px;
 	box-shadow: 0 4px 20px rgba(11, 31, 42, 0.06);
-	transition:
-		transform 0.2s,
-		box-shadow 0.2s;
+	transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .step:hover {
@@ -359,7 +336,10 @@
 	line-height: 1.5;
 }
 
-/* ─── REGISTER ─── */
+
+/* ════════════════════════════════════════
+   REGISTER SECTION
+   ════════════════════════════════════════ */
 .register {
 	padding: 100px 0;
 }
@@ -401,7 +381,7 @@
 	text-align: center;
 }
 
-/* ─── LOBBY TOGGLE SWITCH ─── */
+/* Lobby toggle */
 .lobby-toggle {
 	display: flex;
 	background: var(--cream);
@@ -431,7 +411,10 @@
 	color: var(--white);
 }
 
-/* ─── RESPONSIVE ─── */
+
+/* ════════════════════════════════════════
+   RESPONSIVE
+   ════════════════════════════════════════ */
 @media (max-width: 960px) {
 	.hero__inner,
 	.about__inner,
@@ -440,35 +423,20 @@
 		gap: 40px;
 	}
 
-	.globe-card {
-		min-height: 360px;
-	}
-	.mini-globe-wrap {
-		max-width: 260px;
-	}
+	.globe-card    { min-height: 360px; }
+	.game-preview  { max-width: 260px;  }
 }
 
 @media (max-width: 680px) {
-	.hero {
-		padding: 50px 0 40px;
-	}
+	.hero          { padding: 50px 0 40px; }
 	.about,
-	.register {
-		padding: 70px 0;
-	}
-	.register__card {
-		padding: 28px 22px;
-	}
-	.globe-card {
-		padding: 24px;
-		min-height: 280px;
-	}
+	.register      { padding: 70px 0; }
+	.register__card { padding: 28px 22px; }
+	.globe-card    { padding: 24px; min-height: 280px; }
 }
 
 @media (max-width: 420px) {
-	.hero__title {
-		font-size: 3rem;
-	}
+	.hero__title { font-size: 3rem; }
 }
 
 @media (max-width: 360px) {
@@ -476,49 +444,28 @@
 		padding: 36px 0 32px;
 		min-height: auto;
 	}
+
 	.hero__title {
 		font-size: 2.6rem;
 		letter-spacing: -0.03em;
 	}
+
 	.hero__desc {
 		font-size: 0.95rem;
 		margin-bottom: 28px;
 	}
-	.globe-card {
-		padding: 16px;
-		min-height: 240px;
-	}
-	.globe-badge {
-		padding: 7px 10px;
-		font-size: 0.72rem;
-	}
+
+	.globe-card   { padding: 16px; min-height: 240px; }
+	.globe-badge  { padding: 7px 10px; font-size: 0.72rem; }
+
 	.about,
-	.register {
-		padding: 52px 0;
-	}
-	.about__desc {
-		font-size: 0.95rem;
-	}
-	.step {
-		padding: 16px 18px;
-		gap: 14px;
-	}
-	.step__num {
-		width: 46px;
-		height: 46px;
-		font-size: 0.88rem;
-		border-radius: 12px;
-	}
-	.register__card {
-		padding: 22px 16px;
-		border-radius: var(--r-lg);
-	}
-	.card-title {
-		font-size: 1.25rem;
-		margin-bottom: 22px;
-	}
-	.btn--full {
-		padding: 14px 18px;
-		font-size: 0.95rem;
-	}
-}
+	.register     { padding: 52px 0; }
+	.about__desc  { font-size: 0.95rem; }
+
+	.step         { padding: 16px 18px; gap: 14px; }
+	.step__num    { width: 46px; height: 46px; font-size: 0.88rem; border-radius: 12px; }
+
+	.register__card { padding: 22px 16px; border-radius: var(--r-lg); }
+	.card-title     { font-size: 1.25rem; margin-bottom: 22px; }
+	.btn--full      { padding: 14px 18px; font-size: 0.95rem; }
+}
\ No newline at end of file
diff --git a/frontend/styles/leader.css b/frontend/styles/leader.css
index 239c390..f1c09b8 100644
--- a/frontend/styles/leader.css
+++ b/frontend/styles/leader.css
@@ -1,5 +1,8 @@
 /* leader.css — leaderboard page styles */
 
+/* ════════════════════════════════════════
+   PAGE LAYOUT
+   ════════════════════════════════════════ */
 .lb-page {
 	min-height: calc(100vh - var(--hh));
 	padding: 60px 0;
@@ -41,7 +44,10 @@
 	flex-wrap: wrap;
 }
 
-/* ─── TABLE ─── */
+
+/* ════════════════════════════════════════
+   TABLE
+   ════════════════════════════════════════ */
 .lb-table {
 	background: var(--white);
 	border: 1px solid var(--line);
@@ -66,9 +72,7 @@
 	color: var(--ink-muted);
 }
 
-.lb-th.right {
-	text-align: right;
-}
+.lb-th--right { text-align: right; }
 
 .lb-body {
 	display: grid;
@@ -81,38 +85,23 @@
 	padding: 16px 24px;
 	border-bottom: 1px solid var(--line);
 	transition: background 0.15s;
-	animation: fadeRow 0.4s ease both;
+	animation: fade-row 0.4s ease both;
 }
 
-.lb-row:last-child {
-	border-bottom: none;
-}
-.lb-row:hover {
-	background: var(--cream);
+.lb-row:last-child { border-bottom: none; }
+.lb-row:hover      { background: var(--cream); }
+
+@keyframes fade-row {
+	from { opacity: 0; transform: translateY(8px); }
+	to   { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes fadeRow {
-	from {
-		opacity: 0;
-		transform: translateY(8px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-/* ─── TOP 3 HIGHLIGHT ─── */
-.lb-row.rank-1 {
-	background: rgba(240, 180, 40, 0.07);
-}
-.lb-row.rank-2 {
-	background: rgba(180, 180, 195, 0.06);
-}
-.lb-row.rank-3 {
-	background: rgba(205, 130, 70, 0.05);
-}
+/* Top 3 row highlights */
+.lb-row--rank-1 { background: rgba(240, 180, 40,  0.07); }
+.lb-row--rank-2 { background: rgba(180, 180, 195, 0.06); }
+.lb-row--rank-3 { background: rgba(205, 130, 70,  0.05); }
 
+/* Rank number */
 .lb-rank {
 	font-family: "Syne", sans-serif;
 	font-weight: 800;
@@ -120,20 +109,13 @@
 	color: var(--ink-muted);
 }
 
-.lb-row.rank-1 .lb-rank {
-	color: var(--gold);
-}
-.lb-row.rank-2 .lb-rank {
-	color: #a0a0b0;
-}
-.lb-row.rank-3 .lb-rank {
-	color: #c07840;
-}
+.lb-row--rank-1 .lb-rank { color: var(--gold); }
+.lb-row--rank-2 .lb-rank { color: #a0a0b0; }
+.lb-row--rank-3 .lb-rank { color: #c07840; }
 
-.lb-medal {
-	font-size: 1.1rem;
-}
+.lb-medal { font-size: 1.1rem; }
 
+/* Player name */
 .lb-name {
 	font-family: "Syne", sans-serif;
 	font-weight: 700;
@@ -144,7 +126,7 @@
 	white-space: nowrap;
 }
 
-.lb-name.is-you::after {
+.lb-name--you::after {
 	content: " (you)";
 	font-weight: 400;
 	font-family: "DM Sans", sans-serif;
@@ -164,6 +146,7 @@
 	text-align: right;
 }
 
+/* Score value */
 .lb-score {
 	font-family: "Syne", sans-serif;
 	font-weight: 800;
@@ -172,17 +155,14 @@
 	text-align: right;
 }
 
-.lb-score.gold {
-	color: var(--gold);
-}
-.lb-score.silver {
-	color: #888898;
-}
-.lb-score.bronze {
-	color: #c07840;
-}
+.lb-score--gold   { color: var(--gold); }
+.lb-score--silver { color: #888898; }
+.lb-score--bronze { color: #c07840; }
 
-/* ─── EMPTY STATE ─── */
+
+/* ════════════════════════════════════════
+   EMPTY STATE
+   ════════════════════════════════════════ */
 .lb-empty {
 	padding: 64px 24px;
 	text-align: center;
@@ -199,7 +179,10 @@
 	margin-bottom: 20px;
 }
 
-/* ─── CURRENT PLAYER BAR ─── */
+
+/* ════════════════════════════════════════
+   CURRENT PLAYER BAR
+   ════════════════════════════════════════ */
 .your-score-bar {
 	margin-top: 20px;
 	padding: 16px 24px;
@@ -217,31 +200,26 @@
 	font-size: 0.9rem;
 	color: var(--ink-soft);
 }
-.your-score-bar__text strong {
-	color: var(--ink);
-}
 
-/* ─── RESPONSIVE ─── */
+.your-score-bar__text strong       { color: var(--ink); }
+.your-score-bar__text--score strong { color: var(--sea); }
+
+
+/* ════════════════════════════════════════
+   RESPONSIVE
+   ════════════════════════════════════════ */
 @media (max-width: 640px) {
-	.lb-page {
-		padding: 40px 0;
-	}
+	.lb-page { padding: 40px 0; }
 
 	.lb-table-head,
-	.lb-row {
-		grid-template-columns: 44px 1fr 72px;
-	}
+	.lb-row { grid-template-columns: 44px 1fr 72px; }
 
-	.lb-th.hide-sm,
+	.lb-th--hide-sm,
 	.lb-rounds,
-	.lb-date {
-		display: none;
-	}
+	.lb-date { display: none; }
 }
 
 @media (max-width: 360px) {
 	.lb-table-head,
-	.lb-row {
-		padding: 12px 16px;
-	}
-}
+	.lb-row { padding: 12px 16px; }
+}
\ No newline at end of file
diff --git a/frontend/styles/lobby.css b/frontend/styles/lobby.css
index a61140d..f1460be 100644
--- a/frontend/styles/lobby.css
+++ b/frontend/styles/lobby.css
@@ -1,5 +1,8 @@
 /* lobby.css */
 
+/* ════════════════════════════════════════
+   LOBBY LAYOUT
+   ════════════════════════════════════════ */
 .lobby {
 	min-height: calc(100vh - var(--hh));
 	display: grid;
@@ -15,33 +18,12 @@
 	width: 100%;
 }
 
-/* ─── Lobby name badge ─── */
-.lobby__name-badge {
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-	padding: 10px 18px;
-	border-radius: var(--r-lg);
-	background: var(--glass);
-	border: 1px solid rgba(255, 255, 255, 0.9);
-	box-shadow: var(--shadow-sm);
-	backdrop-filter: blur(10px);
-	margin-bottom: 20px;
-}
 
-.lobby__name-icon {
-	font-size: 1.1rem;
-}
+/* ════════════════════════════════════════
+   PROMO (LEFT COLUMN)
+   ════════════════════════════════════════ */
 
-#lobby-name-display {
-	font-family: "Syne", sans-serif;
-	font-weight: 700;
-	font-size: 1rem;
-	color: var(--ink);
-	letter-spacing: -0.01em;
-}
-
-/* ─── EYEBROW ─── */
+/* Eyebrow badge — mirrors index.css for standalone page loading */
 .eyebrow {
 	display: inline-flex;
 	align-items: center;
@@ -67,17 +49,35 @@
 }
 
 @keyframes pulse {
-	0%,
-	100% {
-		transform: scale(1);
-		opacity: 1;
-	}
-	50% {
-		transform: scale(1.45);
-		opacity: 0.7;
-	}
+	0%, 100% { transform: scale(1);    opacity: 1; }
+	50%       { transform: scale(1.45); opacity: 0.7; }
 }
 
+/* Lobby name badge */
+.lobby__name-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 18px;
+	border-radius: var(--r-lg);
+	background: var(--glass);
+	border: 1px solid rgba(255, 255, 255, 0.9);
+	box-shadow: var(--shadow-sm);
+	backdrop-filter: blur(10px);
+	margin-bottom: 20px;
+}
+
+.lobby__name-icon { font-size: 1.1rem; }
+
+#lobby-name-display {
+	font-family: "Syne", sans-serif;
+	font-weight: 700;
+	font-size: 1rem;
+	color: var(--ink);
+	letter-spacing: -0.01em;
+}
+
+/* Title */
 .lobby__title {
 	font-family: "Syne", sans-serif;
 	font-weight: 800;
@@ -95,6 +95,7 @@
 	background-clip: text;
 }
 
+/* Description */
 .lobby__desc {
 	font-size: 1.02rem;
 	line-height: 1.72;
@@ -103,6 +104,7 @@
 	margin-bottom: 32px;
 }
 
+/* Info badges */
 .lobby__badges {
 	display: flex;
 	flex-wrap: wrap;
@@ -124,11 +126,12 @@
 	backdrop-filter: blur(8px);
 }
 
-.badge__icon {
-	font-size: 1rem;
-}
+.badge__icon { font-size: 1rem; }
 
-/* Right side card */
+
+/* ════════════════════════════════════════
+   FORM CARD (RIGHT COLUMN)
+   ════════════════════════════════════════ */
 .lobby__card {
 	background: var(--white);
 	border: 1px solid var(--line);
@@ -151,30 +154,22 @@
 	margin-bottom: 30px;
 }
 
-/* Form and field styles are defined in main.css */
+/* Form and field styles live in main.css */
 
-/* ─── Responsive ─── */
+
+/* ════════════════════════════════════════
+   RESPONSIVE
+   ════════════════════════════════════════ */
 @media (max-width: 900px) {
-	.lobby__inner {
-		grid-template-columns: 1fr;
-		gap: 40px;
-	}
+	.lobby__inner { grid-template-columns: 1fr; gap: 40px; }
 }
 
 @media (max-width: 680px) {
-	.lobby {
-		padding: 44px 0;
-	}
-	.lobby__card {
-		padding: 28px 22px;
-	}
+	.lobby        { padding: 44px 0; }
+	.lobby__card  { padding: 28px 22px; }
 }
 
 @media (max-width: 360px) {
-	.lobby__card {
-		padding: 22px 16px;
-	}
-	.lobby__title {
-		font-size: 2.4rem;
-	}
-}
+	.lobby__card  { padding: 22px 16px; }
+	.lobby__title { font-size: 2.4rem; }
+}
\ No newline at end of file
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index 2117ee4..6dbc4f6 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -2,30 +2,49 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600&display=swap");
 
+
+/* ════════════════════════════════════════
+   DESIGN TOKENS
+   ════════════════════════════════════════ */
 :root {
-	--ink: #0b1f2a;
-	--ink-soft: #3d5563;
+	/* Colors */
+	--ink:       #0b1f2a;
+	--ink-soft:  #3d5563;
 	--ink-muted: #7a9aaa;
-	--sea: #1a7fc4;
+
+	--sea:       #1a7fc4;
 	--sea-light: #4faae0;
-	--sea-dim: rgba(26, 127, 196, 0.12);
-	--leaf: #41b869;
-	--leaf-dim: rgba(65, 184, 105, 0.13);
-	--gold: #f0b429;
-	--danger: #e05c5c;
-	--cream: #f4f9f6;
-	--white: #ffffff;
+	--sea-dim:   rgba(26, 127, 196, 0.12);
+
+	--leaf:      #41b869;
+	--leaf-dim:  rgba(65, 184, 105, 0.13);
+
+	--gold:    #f0b429;
+	--danger:  #e05c5c;
+	--cream:   #f4f9f6;
+	--white:   #ffffff;
+
 	--glass: rgba(255, 255, 255, 0.72);
-	--line: rgba(11, 31, 42, 0.09);
-	--shadow: 0 24px 60px rgba(11, 31, 42, 0.1);
-	--shadow-sm: 0 4px 20px rgba(11, 31, 42, 0.07);
+	--line:  rgba(11, 31, 42, 0.09);
+
+	/* Shadows */
+	--shadow:    0 24px 60px rgba(11, 31, 42, 0.10);
+	--shadow-sm: 0 4px  20px rgba(11, 31, 42, 0.07);
+
+	/* Radii */
 	--r-xl: 32px;
 	--r-lg: 22px;
 	--r-md: 14px;
 	--r-sm: 8px;
+
+	/* Layout */
 	--hh: 72px;
 }
 
+
+/* ════════════════════════════════════════
+   RESET
+   ════════════════════════════════════════ */
 *,
 *::before,
 *::after {
@@ -34,9 +53,7 @@
 	padding: 0;
 }
 
-html {
-	scroll-behavior: smooth;
-}
+html { scroll-behavior: smooth; }
 
 body {
 	font-family: "DM Sans", sans-serif;
@@ -47,25 +64,28 @@ body {
 	min-width: 320px;
 }
 
+a              { color: inherit; text-decoration: none; }
+img, svg       { display: block; max-width: 100%; }
+button, input  { font: inherit; }
+
+
+/* ════════════════════════════════════════
+   BACKGROUND DECORATIONS
+   ════════════════════════════════════════ */
+
+/* Ambient colour blobs */
 body::before {
 	content: "";
 	position: fixed;
 	inset: 0;
 	background:
-		radial-gradient(
-			ellipse 60% 50% at 10% 0%,
-			rgba(65, 184, 105, 0.1) 0%,
-			transparent 60%
-		),
-		radial-gradient(
-			ellipse 50% 60% at 90% 100%,
-			rgba(26, 127, 196, 0.1) 0%,
-			transparent 60%
-		);
+		radial-gradient(ellipse 60% 50% at 10%  0%,   rgba(65, 184, 105, 0.1), transparent 60%),
+		radial-gradient(ellipse 50% 60% at 90% 100%,  rgba(26, 127, 196, 0.1), transparent 60%);
 	pointer-events: none;
 	z-index: 0;
 }
 
+/* Grid overlay */
 body::after {
 	content: "";
 	position: fixed;
@@ -78,25 +98,15 @@ body::after {
 	z-index: 0;
 }
 
-a {
-	color: inherit;
-	text-decoration: none;
-}
-img,
-svg {
-	display: block;
-	max-width: 100%;
-}
-button,
-input {
-	font: inherit;
-}
-
 .wrap {
 	position: relative;
 	z-index: 1;
 }
 
+
+/* ════════════════════════════════════════
+   LAYOUT
+   ════════════════════════════════════════ */
 .container {
 	width: 100%;
 	max-width: 1280px;
@@ -104,6 +114,10 @@ input {
 	padding: 0 28px;
 }
 
+
+/* ════════════════════════════════════════
+   HEADER
+   ════════════════════════════════════════ */
 .header {
 	position: sticky;
 	top: 0;
@@ -124,6 +138,7 @@ input {
 	gap: 24px;
 }
 
+/* Logo */
 .logo {
 	display: inline-flex;
 	align-items: center;
@@ -155,6 +170,7 @@ input {
 	letter-spacing: -0.02em;
 }
 
+/* Nav */
 .nav {
 	display: flex;
 	align-items: center;
@@ -167,9 +183,7 @@ input {
 	font-size: 0.92rem;
 	font-weight: 500;
 	color: var(--ink-soft);
-	transition:
-		background 0.18s,
-		color 0.18s;
+	transition: background 0.18s, color 0.18s;
 }
 
 .nav__link:hover {
@@ -185,9 +199,7 @@ input {
 	font-weight: 600;
 	color: var(--white);
 	background: var(--ink);
-	transition:
-		opacity 0.18s,
-		transform 0.18s;
+	transition: opacity 0.18s, transform 0.18s;
 }
 
 .nav__cta:hover {
@@ -195,7 +207,10 @@ input {
 	transform: translateY(-1px);
 }
 
-/* ─── BUTTONS ─── */
+
+/* ════════════════════════════════════════
+   BUTTONS
+   ════════════════════════════════════════ */
 .btn {
 	display: inline-flex;
 	align-items: center;
@@ -208,48 +223,29 @@ input {
 	font-weight: 600;
 	border: none;
 	cursor: pointer;
-	transition:
-		transform 0.2s,
-		box-shadow 0.2s,
-		opacity 0.2s;
+	transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
 	line-height: 1;
 }
 
-.btn:hover:not(:disabled) {
-	transform: translateY(-2px);
-}
-.btn:disabled {
-	opacity: 0.45;
-	cursor: not-allowed;
-}
+.btn:hover:not(:disabled) { transform: translateY(-2px); }
+.btn:disabled              { opacity: 0.45; cursor: not-allowed; }
 
 .btn--primary {
 	color: var(--white);
-	background: linear-gradient(
-		135deg,
-		var(--sea) 0%,
-		#159fd4 50%,
-		var(--leaf) 100%
-	);
+	background: linear-gradient(135deg, var(--sea) 0%, #159fd4 50%, var(--leaf) 100%);
 	background-size: 200% 200%;
 	box-shadow: 0 8px 24px rgba(26, 127, 196, 0.28);
-	animation: gradShift 4s ease infinite;
+	animation: grad-shift 4s ease infinite;
 }
 
 .btn--primary:hover:not(:disabled) {
 	box-shadow: 0 12px 32px rgba(26, 127, 196, 0.4);
 }
 
-@keyframes gradShift {
-	0% {
-		background-position: 0% 50%;
-	}
-	50% {
-		background-position: 100% 50%;
-	}
-	100% {
-		background-position: 0% 50%;
-	}
+@keyframes grad-shift {
+	0%   { background-position: 0%   50%; }
+	50%  { background-position: 100% 50%; }
+	100% { background-position: 0%   50%; }
 }
 
 .btn--ghost {
@@ -269,17 +265,13 @@ input {
 	box-shadow: 0 6px 18px rgba(224, 92, 92, 0.25);
 }
 
-.btn--full {
-	width: 100%;
-}
+.btn--full { width: 100%; }
+.btn--sm   { padding: 10px 20px; font-size: 0.88rem; border-radius: var(--r-md); }
 
-.btn--sm {
-	padding: 10px 20px;
-	font-size: 0.88rem;
-	border-radius: var(--r-md);
-}
 
-/* ─── CARD ─── */
+/* ════════════════════════════════════════
+   CARD
+   ════════════════════════════════════════ */
 .card {
 	background: var(--glass);
 	backdrop-filter: blur(12px);
@@ -288,7 +280,10 @@ input {
 	box-shadow: var(--shadow);
 }
 
-/* ─── SECTION LABELS ─── */
+
+/* ════════════════════════════════════════
+   SECTION TYPOGRAPHY
+   ════════════════════════════════════════ */
 .section-label {
 	display: inline-block;
 	padding: 5px 13px;
@@ -311,16 +306,12 @@ input {
 	margin-bottom: 16px;
 }
 
-/* ─── FORM ─── */
-.form {
-	display: grid;
-	gap: 20px;
-}
 
-.field {
-	display: grid;
-	gap: 8px;
-}
+/* ════════════════════════════════════════
+   FORM
+   ════════════════════════════════════════ */
+.form  { display: grid; gap: 20px; }
+.field { display: grid; gap: 8px; }
 
 .field label {
 	font-size: 0.84rem;
@@ -338,14 +329,10 @@ input {
 	background: var(--cream);
 	color: var(--ink);
 	font-size: 0.98rem;
-	transition:
-		border-color 0.18s,
-		box-shadow 0.18s;
+	transition: border-color 0.18s, box-shadow 0.18s;
 }
 
-.field input::placeholder {
-	color: var(--ink-muted);
-}
+.field input::placeholder { color: var(--ink-muted); }
 
 .field input:focus {
 	outline: none;
@@ -365,7 +352,10 @@ input {
 	min-height: 1.2em;
 }
 
-/* ─── FOOTER ─── */
+
+/* ════════════════════════════════════════
+   FOOTER
+   ════════════════════════════════════════ */
 .footer {
 	border-top: 1px solid var(--line);
 	background: rgba(255, 255, 255, 0.5);
@@ -393,9 +383,7 @@ input {
 	margin-top: 4px;
 }
 
-.footer__center {
-	text-align: center;
-}
+.footer__center { text-align: center; }
 
 .footer__label {
 	font-size: 0.7rem;
@@ -420,34 +408,27 @@ input {
 	transition: color 0.18s;
 }
 
-.footer__link:hover {
-	color: var(--ink);
-}
+.footer__link:hover { color: var(--ink); }
 
-/* ─── SCROLL REVEAL ─── */
+
+/* ════════════════════════════════════════
+   SCROLL REVEAL
+   ════════════════════════════════════════ */
 .reveal {
 	opacity: 0;
 	transform: translateY(24px);
-	transition:
-		opacity 0.55s ease,
-		transform 0.55s ease;
+	transition: opacity 0.55s ease, transform 0.55s ease;
 }
 
-.reveal.visible {
-	opacity: 1;
-	transform: translateY(0);
-}
-.reveal-delay-1 {
-	transition-delay: 0.1s;
-}
-.reveal-delay-2 {
-	transition-delay: 0.2s;
-}
-.reveal-delay-3 {
-	transition-delay: 0.32s;
-}
+.reveal.visible  { opacity: 1; transform: translateY(0); }
+.reveal-delay-1  { transition-delay: 0.10s; }
+.reveal-delay-2  { transition-delay: 0.20s; }
+.reveal-delay-3  { transition-delay: 0.32s; }
 
-/* ─── NOSCRIPT ─── */
+
+/* ════════════════════════════════════════
+   NOSCRIPT
+   ════════════════════════════════════════ */
 .noscript-msg {
 	padding: 1.5rem 2rem;
 	background: var(--danger);
@@ -456,39 +437,31 @@ input {
 	text-align: center;
 }
 
-/* ─── REDUCED MOTION ─── */
+
+/* ════════════════════════════════════════
+   REDUCED MOTION
+   ════════════════════════════════════════ */
 @media (prefers-reduced-motion: reduce) {
-	*,
-	*::before,
-	*::after {
+	*, *::before, *::after {
 		animation-duration: 0.01ms !important;
 		animation-iteration-count: 1 !important;
 		transition-duration: 0.01ms !important;
 	}
 }
 
-/* ─── RESPONSIVE BASE ─── */
+
+/* ════════════════════════════════════════
+   RESPONSIVE
+   ════════════════════════════════════════ */
 @media (max-width: 680px) {
-	.container {
-		padding: 0 18px;
-	}
-	.nav__link {
-		display: none;
-	}
-	.footer__inner {
-		grid-template-columns: 1fr;
-	}
+	.container { padding: 0 18px; }
+	.nav__link  { display: none; }
+
+	.footer__inner         { grid-template-columns: 1fr; }
 	.footer__center,
-	.footer__right {
-		justify-self: start;
-		text-align: left;
-	}
-	.socials {
-		justify-content: flex-start;
-	}
-	.footer__right {
-		justify-content: flex-start;
-	}
+	.footer__right         { justify-self: start; text-align: left; }
+	.socials               { justify-content: flex-start; }
+	.footer__right         { justify-content: flex-start; }
 }
 
 @media (max-width: 360px) {
@@ -496,18 +469,9 @@ input {
 		--r-xl: 22px;
 		--r-lg: 16px;
 	}
-	.container {
-		padding: 0 14px;
-	}
-	.logo__mark {
-		width: 34px;
-		height: 34px;
-	}
-	.logo__text {
-		font-size: 1.05rem;
-	}
-	.nav__cta {
-		padding: 7px 12px;
-		font-size: 0.82rem;
-	}
-}
+
+	.container  { padding: 0 14px; }
+	.logo__mark { width: 34px; height: 34px; }
+	.logo__text { font-size: 1.05rem; }
+	.nav__cta   { padding: 7px 12px; font-size: 0.82rem; }
+}
\ No newline at end of file
diff --git a/frontend/styles/results.css b/frontend/styles/results.css
index 52ae389..f548336 100644
--- a/frontend/styles/results.css
+++ b/frontend/styles/results.css
@@ -1,5 +1,8 @@
 /* results.css — results page styles */
 
+/* ════════════════════════════════════════
+   PAGE LAYOUT
+   ════════════════════════════════════════ */
 .results-page {
 	min-height: calc(100vh - var(--hh));
 	display: grid;
@@ -14,7 +17,10 @@
 	gap: 24px;
 }
 
-/* ─── HEADER ─── */
+
+/* ════════════════════════════════════════
+   HEADER
+   ════════════════════════════════════════ */
 .results-header {
 	text-align: center;
 }
@@ -23,18 +29,12 @@
 	font-size: 3.5rem;
 	margin-bottom: 16px;
 	display: block;
-	animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+	animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
-@keyframes popIn {
-	from {
-		transform: scale(0);
-		opacity: 0;
-	}
-	to {
-		transform: scale(1);
-		opacity: 1;
-	}
+@keyframes pop-in {
+	from { transform: scale(0); opacity: 0; }
+	to   { transform: scale(1); opacity: 1; }
 }
 
 .results-title {
@@ -46,40 +46,26 @@
 	margin-bottom: 8px;
 }
 
-.results-player {
-	font-size: 1rem;
-	color: var(--ink-soft);
-}
+.results-player       { font-size: 1rem; color: var(--ink-soft); }
+.results-player strong { color: var(--ink); }
 
-.results-player strong {
-	color: var(--ink);
-}
 
-/* ─── TOTAL SCORE ─── */
+/* ════════════════════════════════════════
+   TOTAL SCORE CARD
+   ════════════════════════════════════════ */
 .score-total-card {
-	background: linear-gradient(
-		135deg,
-		var(--sea) 0%,
-		#159fd4 50%,
-		var(--leaf) 100%
-	);
+	background: linear-gradient(135deg, var(--sea) 0%, #159fd4 50%, var(--leaf) 100%);
 	border-radius: var(--r-xl);
 	padding: 36px 40px;
 	text-align: center;
 	color: var(--white);
 	box-shadow: 0 16px 40px rgba(26, 127, 196, 0.3);
-	animation: slideUp 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+	animation: slide-up 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
-@keyframes slideUp {
-	from {
-		transform: translateY(30px);
-		opacity: 0;
-	}
-	to {
-		transform: translateY(0);
-		opacity: 1;
-	}
+@keyframes slide-up {
+	from { transform: translateY(30px); opacity: 0; }
+	to   { transform: translateY(0);    opacity: 1; }
 }
 
 .score-total-label {
@@ -117,14 +103,17 @@
 	letter-spacing: 0.04em;
 }
 
-/* ─── ROUND BREAKDOWN ─── */
+
+/* ════════════════════════════════════════
+   ROUND BREAKDOWN CARD
+   ════════════════════════════════════════ */
 .rounds-card {
 	background: var(--white);
 	border: 1px solid var(--line);
 	border-radius: var(--r-xl);
 	padding: 28px 32px;
 	box-shadow: var(--shadow-sm);
-	animation: slideUp 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+	animation: slide-up 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
 .rounds-card-title {
@@ -136,10 +125,7 @@
 	color: var(--ink-soft);
 }
 
-.round-rows {
-	display: grid;
-	gap: 14px;
-}
+.round-rows { display: grid; gap: 14px; }
 
 .round-row {
 	display: grid;
@@ -178,7 +164,7 @@
 	text-align: right;
 }
 
-/* ─── COUNTRY TAGS ─── */
+/* Country tags */
 .countries-row {
 	display: flex;
 	flex-wrap: wrap;
@@ -195,36 +181,30 @@
 	font-weight: 600;
 }
 
-/* ─── ACTIONS ─── */
+
+/* ════════════════════════════════════════
+   ACTIONS
+   ════════════════════════════════════════ */
 .results-actions {
 	display: flex;
 	gap: 12px;
 	flex-wrap: wrap;
-	animation: slideUp 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+	animation: slide-up 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
-.results-actions .btn {
-	flex: 1 1 180px;
-}
+.results-actions .btn { flex: 1 1 180px; }
 
-/* ─── RESPONSIVE ─── */
+
+/* ════════════════════════════════════════
+   RESPONSIVE
+   ════════════════════════════════════════ */
 @media (max-width: 600px) {
-	.results-page {
-		padding: 40px 0;
-	}
-	.score-total-card {
-		padding: 28px 24px;
-	}
-	.rounds-card {
-		padding: 22px 20px;
-	}
-	.results-actions .btn {
-		flex-basis: 100%;
-	}
+	.results-page         { padding: 40px 0; }
+	.score-total-card     { padding: 28px 24px; }
+	.rounds-card          { padding: 22px 20px; }
+	.results-actions .btn { flex-basis: 100%; }
 }
 
 @media (max-width: 360px) {
-	.score-total-num {
-		font-size: 3.4rem;
-	}
-}
+	.score-total-num { font-size: 3.4rem; }
+}
\ No newline at end of file