frontend/game.html

@@ -8,13 +8,16 @@
   <link rel="stylesheet" href="./styles/game.css" />
 </head>
 <body>
+<noscript>
+  <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="./index.html" class="logo">
         <div class="logo__mark">
-          <svg viewBox="0 0 24 24" fill="none">
+          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
             <circle cx="12" cy="12" r="9" stroke="white" stroke-width="1.6"/>
             <path d="M3 12 Q8 8 12 12 Q16 16 21 12" stroke="white" stroke-width="1.4" fill="none"/>
             <path d="M12 3 Q14 8 12 12 Q10 16 12 21" stroke="white" stroke-width="1.4" fill="none"/>
@@ -22,7 +25,7 @@
         </div>
         <span class="logo__text">GeoDraw</span>
       </a>
-      <nav class="nav">
+      <nav class="nav" aria-label="Main navigation">
         <a href="lobby.html" class="nav__link">← Back to lobby</a>
       </nav>
     </div>
@@ -63,7 +66,7 @@
         <div class="canvas-area">
 
           <div class="canvas-wrap" id="canvas-wrap">
-            <canvas id="draw-canvas"></canvas>
+            <canvas id="draw-canvas" role="application" aria-label="Drawing canvas – sketch the country border here"></canvas>
             <div id="score-feedback"></div>
           </div>
 
@@ -105,7 +108,7 @@
         <!-- ── Controls ── -->
         <div class="game-controls">
           <button id="btn-clear" class="btn btn--ghost btn--sm">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
               <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
             </svg>
             Clear

frontend/index.html

@@ -8,12 +8,15 @@
   <link rel="stylesheet" href="styles/index.css" />
 </head>
 <body>
+<noscript>
+  <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">
         <div class="logo__mark">
-          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
             <circle cx="12" cy="12" r="9" stroke="white" stroke-width="1.6"/>
             <path d="M3 12 Q8 8 12 12 Q16 16 21 12" stroke="white" stroke-width="1.4" fill="none"/>
             <path d="M12 3 Q14 8 12 12 Q10 16 12 21" stroke="white" stroke-width="1.4" fill="none"/>
@@ -22,7 +25,7 @@
         <span class="logo__text">GeoDraw</span>
       </a>
 
-      <nav class="nav">
+      <nav class="nav" aria-label="Main navigation">
         <a href="#hero"     class="nav__link">Play</a>
         <a href="#about"    class="nav__link">How to play</a>
         <a href="#register" class="nav__cta">Login / Register</a>
@@ -51,7 +54,7 @@
           <div class="hero__actions reveal reveal-delay-3">
             <a href="#register" class="btn btn--primary">
               Start Playing
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
             </a>
             <a href="#about" class="btn btn--ghost">How it works</a>
           </div>
@@ -169,7 +172,7 @@
 
             <button type="button" class="btn btn--primary btn--full" id="reg-btn">
               Create game
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
             </button>
 
             <p class="form-footer"><a href="#" style="color:var(--sea);font-weight:600;">Join a game instead</a></p>

frontend/leaderboard.html

@@ -9,13 +9,16 @@
 
 </head>
 <body>
+<noscript>
+  <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="index.html" class="logo">
         <div class="logo__mark">
-          <svg viewBox="0 0 24 24" fill="none">
+          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
             <circle cx="12" cy="12" r="9" stroke="white" stroke-width="1.6"/>
             <path d="M3 12 Q8 8 12 12 Q16 16 21 12" stroke="white" stroke-width="1.4" fill="none"/>
             <path d="M12 3 Q14 8 12 12 Q10 16 12 21" stroke="white" stroke-width="1.4" fill="none"/>
@@ -23,7 +26,7 @@
         </div>
         <span class="logo__text">GeoDraw</span>
       </a>
-      <nav class="nav">
+      <nav class="nav" aria-label="Main navigation">
         <a href="index.html" class="nav__link">Home</a>
         <a href="lobby.html" class="nav__cta">Play again →</a>
       </nav>

frontend/lobby.html

@@ -8,13 +8,16 @@
   <link rel="stylesheet" href="./styles/lobby.css" />
 </head>
 <body>
+<noscript>
+  <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="index.html" class="logo">
         <div class="logo__mark">
-          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
             <circle cx="12" cy="12" r="9" stroke="white" stroke-width="1.6"/>
             <path d="M3 12 Q8 8 12 12 Q16 16 21 12" stroke="white" stroke-width="1.4" fill="none"/>
             <path d="M12 3 Q14 8 12 12 Q10 16 12 21" stroke="white" stroke-width="1.4" fill="none"/>
@@ -22,7 +25,7 @@
         </div>
         <span class="logo__text">GeoDraw</span>
       </a>
-      <nav class="nav">
+      <nav class="nav" aria-label="Main navigation">
         <a href="index.html" class="nav__link">Home</a>
         <a href="leaderboard.html" class="nav__link">Leaderboard</a>
       </nav>
@@ -80,7 +83,7 @@
 
             <button id="btn-start" class="btn btn--primary btn--full">
               Start Game
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                 <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>
             </button>

frontend/results.html

@@ -8,13 +8,16 @@
   <link rel="stylesheet" href="styles/results.css" />
 </head>
 <body>
+<noscript>
+  <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="index.html" class="logo">
         <div class="logo__mark">
-          <svg viewBox="0 0 24 24" fill="none">
+          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
             <circle cx="12" cy="12" r="9" stroke="white" stroke-width="1.6"/>
             <path d="M3 12 Q8 8 12 12 Q16 16 21 12" stroke="white" stroke-width="1.4" fill="none"/>
             <path d="M12 3 Q14 8 12 12 Q10 16 12 21" stroke="white" stroke-width="1.4" fill="none"/>
@@ -22,7 +25,7 @@
         </div>
         <span class="logo__text">GeoDraw</span>
       </a>
-      <nav class="nav">
+      <nav class="nav" aria-label="Main navigation">
         <a href="index.html" class="nav__link">Home</a>
         <a href="leaderboard.html" class="nav__link">Leaderboard</a>
         <a href="lobby.html" class="nav__cta">Play again →</a>

frontend/scripts/countries.js

@@ -6,131 +6,131 @@
  */
 
 const Countries = (() => {
-  /** @type {Country[]} */
+	/** @type {Country[]} */
-  const COUNTRIES_DATA = [
+	const COUNTRIES_DATA = [
-    {
+		{
-      name: "Switzerland",
+			name: "Switzerland",
-      hint: "Alpine country in Central Europe",
+			hint: "Alpine country in Central Europe",
-      cities: [
+			cities: [
-        { name: "Bern",   x: 48, y: 58 },
+				{ name: "Bern", x: 48, y: 58 },
-        { name: "Zürich", x: 58, y: 38 },
+				{ name: "Zürich", x: 58, y: 38 },
-        { name: "Geneva", x: 22, y: 72 },
+				{ name: "Geneva", x: 22, y: 72 },
-      ],
+			],
-    },
+		},
-    {
+		{
-      name: "Norway",
+			name: "Norway",
-      hint: "Scandinavian country with long coastline",
+			hint: "Scandinavian country with long coastline",
-      cities: [
+			cities: [
-        { name: "Oslo",   x: 55, y: 72 },
+				{ name: "Oslo", x: 55, y: 72 },
-        { name: "Bergen", x: 32, y: 60 },
+				{ name: "Bergen", x: 32, y: 60 },
-        { name: "Tromsø", x: 62, y: 18 },
+				{ name: "Tromsø", x: 62, y: 18 },
-      ],
+			],
-    },
+		},
-    {
+		{
-      name: "Italy",
+			name: "Italy",
-      hint: "Boot-shaped peninsula in Southern Europe",
+			hint: "Boot-shaped peninsula in Southern Europe",
-      cities: [
+			cities: [
-        { name: "Rome",   x: 52, y: 58 },
+				{ name: "Rome", x: 52, y: 58 },
-        { name: "Milan",  x: 42, y: 22 },
+				{ name: "Milan", x: 42, y: 22 },
-        { name: "Naples", x: 58, y: 72 },
+				{ name: "Naples", x: 58, y: 72 },
-      ],
+			],
-    },
+		},
-    {
+		{
-      name: "Japan",
+			name: "Japan",
-      hint: "Island nation in East Asia",
+			hint: "Island nation in East Asia",
-      cities: [
+			cities: [
-        { name: "Tokyo",   x: 72, y: 48 },
+				{ name: "Tokyo", x: 72, y: 48 },
-        { name: "Osaka",   x: 58, y: 58 },
+				{ name: "Osaka", x: 58, y: 58 },
-        { name: "Sapporo", x: 70, y: 22 },
+				{ name: "Sapporo", x: 70, y: 22 },
-      ],
+			],
-    },
+		},
-    {
+		{
-      name: "Brazil",
+			name: "Brazil",
-      hint: "Largest country in South America",
+			hint: "Largest country in South America",
-      cities: [
+			cities: [
-        { name: "Brasília",  x: 58, y: 52 },
+				{ name: "Brasília", x: 58, y: 52 },
-        { name: "São Paulo", x: 60, y: 68 },
+				{ name: "São Paulo", x: 60, y: 68 },
-        { name: "Manaus",    x: 38, y: 38 },
+				{ name: "Manaus", x: 38, y: 38 },
-      ],
+			],
-    },
+		},
-    {
+		{
-      name: "Australia",
+			name: "Australia",
-      hint: "Continent and country in the Southern Hemisphere",
+			hint: "Continent and country in the Southern Hemisphere",
-      cities: [
+			cities: [
-        { name: "Canberra", x: 72, y: 72 },
+				{ name: "Canberra", x: 72, y: 72 },
-        { name: "Sydney",   x: 78, y: 68 },
+				{ name: "Sydney", x: 78, y: 68 },
-        { name: "Perth",    x: 22, y: 65 },
+				{ name: "Perth", x: 22, y: 65 },
-      ],
+			],
-    },
+		},
-    {
+		{
-      name: "France",
+			name: "France",
-      hint: "Western Europe, roughly hexagonal shape",
+			hint: "Western Europe, roughly hexagonal shape",
-      cities: [
+			cities: [
-        { name: "Paris",     x: 50, y: 32 },
+				{ name: "Paris", x: 50, y: 32 },
-        { name: "Lyon",      x: 58, y: 55 },
+				{ name: "Lyon", x: 58, y: 55 },
-        { name: "Marseille", x: 58, y: 72 },
+				{ name: "Marseille", x: 58, y: 72 },
-      ],
+			],
-    },
+		},
-    {
+		{
-      name: "India",
+			name: "India",
-      hint: "Large peninsula in South Asia",
+			hint: "Large peninsula in South Asia",
-      cities: [
+			cities: [
-        { name: "New Delhi", x: 46, y: 28 },
+				{ name: "New Delhi", x: 46, y: 28 },
-        { name: "Mumbai",    x: 32, y: 55 },
+				{ name: "Mumbai", x: 32, y: 55 },
-        { name: "Chennai",   x: 52, y: 72 },
+				{ name: "Chennai", x: 52, y: 72 },
-      ],
+			],
-    },
+		},
-    {
+		{
-      name: "Canada",
+			name: "Canada",
-      hint: "Second largest country in the world",
+			hint: "Second largest country in the world",
-      cities: [
+			cities: [
-        { name: "Ottawa",    x: 62, y: 52 },
+				{ name: "Ottawa", x: 62, y: 52 },
-        { name: "Vancouver", x: 22, y: 55 },
+				{ name: "Vancouver", x: 22, y: 55 },
-        { name: "Toronto",   x: 60, y: 58 },
+				{ name: "Toronto", x: 60, y: 58 },
-      ],
+			],
-    },
+		},
-    {
+		{
-      name: "Germany",
+			name: "Germany",
-      hint: "Central European country",
+			hint: "Central European country",
-      cities: [
+			cities: [
-        { name: "Berlin",  x: 58, y: 28 },
+				{ name: "Berlin", x: 58, y: 28 },
-        { name: "Munich",  x: 48, y: 68 },
+				{ name: "Munich", x: 48, y: 68 },
-        { name: "Hamburg", x: 42, y: 18 },
+				{ name: "Hamburg", x: 42, y: 18 },
-      ],
+			],
-    },
+		},
-  ];
+	];
 
-  /** @type {Country[]} */
+	/** @type {Country[]} */
-  let _data = [];
+	let _data = [];
 
-  /**
+	/**
-   * Load country data into memory. Safe to call multiple times.
+	 * Load country data into memory. Safe to call multiple times.
-   * Returns a Promise for future compatibility with a real API fetch.
+	 * Returns a Promise for future compatibility with a real API fetch.
-   * @returns {Promise<Country[]>}
+	 * @returns {Promise<Country[]>}
-   */
+	 */
-  function loadCountries() {
+	function loadCountries() {
-    if (!_data.length) _data = COUNTRIES_DATA;
+		if (!_data.length) _data = COUNTRIES_DATA;
-    return Promise.resolve(_data);
+		return Promise.resolve(_data);
-  }
+	}
 
-  /**
+	/**
-   * Return a random subset of countries.
+	 * Return a random subset of countries.
-   * @param {number} count
+	 * @param {number} count
-   * @returns {Country[]}
+	 * @returns {Country[]}
-   */
+	 */
-  function getRandomCountries(count = 3) {
+	function getRandomCountries(count = 3) {
-    return [..._data].sort(() => Math.random() - 0.5).slice(0, count);
+		return [..._data].sort(() => Math.random() - 0.5).slice(0, count);
-  }
+	}
 
-  /**
+	/**
-   * Get city list for a specific country by name.
+	 * Get city list for a specific country by name.
-   * @param {string} countryName
+	 * @param {string} countryName
-   * @returns {City[]}
+	 * @returns {City[]}
-   */
+	 */
-  function getCities(countryName) {
+	function getCities(countryName) {
-    const country = _data.find((c) => c.name === countryName);
+		const country = _data.find((c) => c.name === countryName);
-    return country ? country.cities : [];
+		return country ? country.cities : [];
-  }
+	}
 
-  return { loadCountries, getRandomCountries, getCities };
+	return { loadCountries, getRandomCountries, getCities };
 })();

frontend/scripts/drawing.js

@@ -1,166 +1,172 @@
 // drawing.js — canvas drawing module
 
 const Drawing = (() => {
-  /** @type {HTMLCanvasElement} */
+	/** @type {HTMLCanvasElement} */
-  let canvas;
+	let canvas;
-  /** @type {CanvasRenderingContext2D} */
+	/** @type {CanvasRenderingContext2D} */
-  let ctx;
+	let ctx;
 
-  let isDrawing = false;
+	let isDrawing = false;
-  /** @type {{ x: number, y: number }[]} */
+	/** @type {{ x: number, y: number }[]} */
-  let points = [];
+	let points = [];
-  /** @type {{ name: string, x: number, y: number }[]} */
+	/** @type {{ name: string, x: number, y: number }[]} */
-  let cities = [];
+	let cities = [];
 
-  const STROKE_COLOR = "#1a7fc4";
+	const STROKE_COLOR = "#1a7fc4";
-  const STROKE_WIDTH = 2.5;
+	const STROKE_WIDTH = 2.5;
 
-  /**
+	/**
-   * Initialise the drawing module on a canvas element.
+	 * Initialise the drawing module on a canvas element.
-   * @param {HTMLCanvasElement} canvasEl
+	 * @param {HTMLCanvasElement} canvasEl
-   */
+	 */
-  function init(canvasEl) {
+	function init(canvasEl) {
-    canvas = canvasEl;
+		canvas = canvasEl;
-    ctx    = canvas.getContext("2d");
+		ctx = canvas.getContext("2d");
 
-    canvas.addEventListener("pointerdown",  onDown);
+		canvas.addEventListener("pointerdown", onDown);
-    canvas.addEventListener("pointermove",  onMove);
+		canvas.addEventListener("pointermove", onMove);
-    canvas.addEventListener("pointerup",    onUp);
+		canvas.addEventListener("pointerup", onUp);
-    canvas.addEventListener("pointerleave", onUp);
+		canvas.addEventListener("pointerleave", onUp);
-    canvas.style.touchAction = "none";
+		canvas.style.touchAction = "none";
 
-    _resize();
+		_resize();
-    window.addEventListener("resize", _resize);
+		window.addEventListener("resize", _resize);
-  }
+	}
 
-  /** Resize canvas to match its CSS size, accounting for device pixel ratio. */
+	/** Resize canvas to match its CSS size, accounting for device pixel ratio. */
-  function _resize() {
+	function _resize() {
-    if (!canvas) return;
+		if (!canvas) return;
-    const { width, height } = canvas.getBoundingClientRect();
+		const { width, height } = canvas.getBoundingClientRect();
-    canvas.width  = width  * window.devicePixelRatio;
+		canvas.width = width * window.devicePixelRatio;
-    canvas.height = height * window.devicePixelRatio;
+		canvas.height = height * window.devicePixelRatio;
-    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+		ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-    _redraw();
+		_redraw();
-  }
+	}
 
-  /**
+	/**
-   * Convert a pointer event to canvas-local coordinates.
+	 * Convert a pointer event to canvas-local coordinates.
-   * @param {PointerEvent} e
+	 * @param {PointerEvent} e
-   * @returns {{ x: number, y: number }}
+	 * @returns {{ x: number, y: number }}
-   */
+	 */
-  function _pos(e) {
+	function _pos(e) {
-    const rect = canvas.getBoundingClientRect();
+		const rect = canvas.getBoundingClientRect();
-    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+		return { x: e.clientX - rect.left, y: e.clientY - rect.top };
-  }
+	}
 
-  /** @param {PointerEvent} e */
+	/** @param {PointerEvent} e */
-  function onDown(e) {
+	function onDown(e) {
-    e.preventDefault();
+		e.preventDefault();
-    isDrawing = true;
+		isDrawing = true;
-    const p = _pos(e);
+		const p = _pos(e);
-    points.push(p);
+		points.push(p);
-    ctx.beginPath();
+		ctx.beginPath();
-    ctx.moveTo(p.x, p.y);
+		ctx.moveTo(p.x, p.y);
-  }
+	}
 
-  /** @param {PointerEvent} e */
+	/** @param {PointerEvent} e */
-  function onMove(e) {
+	function onMove(e) {
-    if (!isDrawing) return;
+		if (!isDrawing) return;
-    e.preventDefault();
+		e.preventDefault();
-    const p = _pos(e);
+		const p = _pos(e);
-    points.push(p);
+		points.push(p);
-    ctx.lineTo(p.x, p.y);
+		ctx.lineTo(p.x, p.y);
-    ctx.strokeStyle = STROKE_COLOR;
+		ctx.strokeStyle = STROKE_COLOR;
-    ctx.lineWidth   = STROKE_WIDTH;
+		ctx.lineWidth = STROKE_WIDTH;
-    ctx.lineJoin    = "round";
+		ctx.lineJoin = "round";
-    ctx.lineCap     = "round";
+		ctx.lineCap = "round";
-    ctx.stroke();
+		ctx.stroke();
-  }
+	}
 
-  /** @param {PointerEvent} e */
+	/** @param {PointerEvent} e */
-  function onUp(e) {
+	function onUp(e) {
-    if (!isDrawing) return;
+		if (!isDrawing) return;
-    isDrawing = false;
+		isDrawing = false;
-    e.preventDefault();
+		e.preventDefault();
-  }
+	}
 
-  /** Clear the canvas and redraw city markers. */
+	/** Clear the canvas and redraw city markers. */
-  function clear() {
+	function clear() {
-    points = [];
+		points = [];
-    if (!ctx) return;
+		if (!ctx) return;
-    const { width, height } = canvas.getBoundingClientRect();
+		const { width, height } = canvas.getBoundingClientRect();
-    ctx.clearRect(0, 0, width, height);
+		ctx.clearRect(0, 0, width, height);
-    _drawCities();
+		_drawCities();
-  }
+	}
 
-  /**
+	/**
-   * Set city markers to display on the canvas.
+	 * Set city markers to display on the canvas.
-   * @param {{ name: string, x: number, y: number }[]} cityList - Coords in percent (0–100).
+	 * @param {{ name: string, x: number, y: number }[]} cityList - Coords in percent (0–100).
-   */
+	 */
-  function setCities(cityList) {
+	function setCities(cityList) {
-    cities = cityList || [];
+		cities = cityList || [];
-    _drawCities();
+		_drawCities();
-  }
+	}
 
-  /** Render all city markers with labels. */
+	/** Render all city markers with labels. */
-  function _drawCities() {
+	function _drawCities() {
-    if (!ctx || !cities.length) return;
+		if (!ctx || !cities.length) return;
-    const { width, height } = canvas.getBoundingClientRect();
+		const { width, height } = canvas.getBoundingClientRect();
 
-    cities.forEach((city) => {
+		cities.forEach((city) => {
-      const cx = (city.x / 100) * width;
+			const cx = (city.x / 100) * width;
-      const cy = (city.y / 100) * height;
+			const cy = (city.y / 100) * height;
 
-      // Dot
+			// Dot
-      ctx.beginPath();
+			ctx.beginPath();
-      ctx.arc(cx, cy, 5, 0, Math.PI * 2);
+			ctx.arc(cx, cy, 5, 0, Math.PI * 2);
-      ctx.fillStyle   = "rgba(240,180,40,0.9)";
+			ctx.fillStyle = "rgba(240,180,40,0.9)";
-      ctx.fill();
+			ctx.fill();
-      ctx.strokeStyle = "rgba(255,255,255,0.9)";
+			ctx.strokeStyle = "rgba(255,255,255,0.9)";
-      ctx.lineWidth   = 1.5;
+			ctx.lineWidth = 1.5;
-      ctx.stroke();
+			ctx.stroke();
 
-      // White pill label background
+			// White pill label background
-      ctx.font = "bold 11px 'DM Sans', sans-serif";
+			ctx.font = "bold 11px 'DM Sans', sans-serif";
-      const textW = ctx.measureText(city.name).width + 10;
+			const textW = ctx.measureText(city.name).width + 10;
-      const textH = 16;
+			const textH = 16;
-      const tx    = cx;
+			const tx = cx;
-      const ty    = cy - 14;
+			const ty = cy - 14;
 
-      ctx.save();
+			ctx.save();
-      ctx.fillStyle = "rgba(255,255,255,0.88)";
+			ctx.fillStyle = "rgba(255,255,255,0.88)";
-      ctx.beginPath();
+			ctx.beginPath();
-      ctx.roundRect(tx - textW / 2, ty - textH / 2 - 1, textW, textH, 4);
+			ctx.roundRect(tx - textW / 2, ty - textH / 2 - 1, textW, textH, 4);
-      ctx.fill();
+			ctx.fill();
-      ctx.restore();
+			ctx.restore();
 
-      ctx.fillStyle = "#0b1f2a";
+			ctx.fillStyle = "#0b1f2a";
-      ctx.textAlign = "center";
+			ctx.textAlign = "center";
-      ctx.fillText(city.name, tx, ty + 4);
+			ctx.fillText(city.name, tx, ty + 4);
-    });
+		});
-  }
+	}
 
-  /** Redraw the full stroke from stored points. */
+	/** Redraw the full stroke from stored points. */
-  function _redraw() {
+	function _redraw() {
-    _drawCities();
+		_drawCities();
-    if (!points.length) return;
+		if (!points.length) return;
-    ctx.beginPath();
+		ctx.beginPath();
-    ctx.strokeStyle = STROKE_COLOR;
+		ctx.strokeStyle = STROKE_COLOR;
-    ctx.lineWidth   = STROKE_WIDTH;
+		ctx.lineWidth = STROKE_WIDTH;
-    ctx.lineJoin    = "round";
+		ctx.lineJoin = "round";
-    ctx.lineCap     = "round";
+		ctx.lineCap = "round";
-    points.forEach((p, i) => (i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y)));
+		points.forEach((p, i) =>
-    ctx.stroke();
+			i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y),
-  }
+		);
+		ctx.stroke();
+	}
 
-  /**
+	/**
-   * Return a copy of the current drawn points.
+	 * Return a copy of the current drawn points.
-   * @returns {{ x: number, y: number }[]}
+	 * @returns {{ x: number, y: number }[]}
-   */
+	 */
-  function getPoints() { return [...points]; }
+	function getPoints() {
+		return [...points];
+	}
 
-  /** Remove event listeners and clean up. */
+	/** Remove event listeners and clean up. */
-  function destroy() { window.removeEventListener("resize", _resize); }
+	function destroy() {
+		window.removeEventListener("resize", _resize);
+	}
 
-  return { init, clear, setCities, getPoints, destroy };
+	return { init, clear, setCities, getPoints, destroy };
 })();

frontend/scripts/game.js

@@ -1,75 +1,76 @@
 // game.js — round management, timer, submit
 
-const TOTAL_ROUNDS   = 3;
+const TOTAL_ROUNDS = 3;
 const ROUND_DURATION = 60; // seconds
 
 /** @type {import('./countries.js').Country[]} */
 let roundCountries = [];
-let currentRound   = 0;
+let currentRound = 0;
 /** @type {number[]} */
-let scores         = [];
+let scores = [];
-let timerInterval  = null;
+let timerInterval = null;
-let timeLeft       = ROUND_DURATION;
+let timeLeft = ROUND_DURATION;
 
 // ── DOM refs
 const elCountryName = document.getElementById("country-name");
 const elCountryHint = document.getElementById("country-hint");
-const elRoundNum    = document.getElementById("round-num");
+const elRoundNum = document.getElementById("round-num");
-const elTimerNum    = document.getElementById("timer-num");
+const elTimerNum = document.getElementById("timer-num");
-const elTimerBar    = document.getElementById("timer-bar");
+const elTimerBar = document.getElementById("timer-bar");
-const elTimerWrap   = document.querySelector(".game-timer");
+const elTimerWrap = document.querySelector(".game-timer");
-const elBtnClear    = document.getElementById("btn-clear");
+const elBtnClear = document.getElementById("btn-clear");
-const elBtnSubmit   = document.getElementById("btn-submit");
+const elBtnSubmit = document.getElementById("btn-submit");
 
 // ── Init
 
 /** Load countries and start the first round. */
 async function initGame() {
-  await Countries.loadCountries();
+	await Countries.loadCountries();
-  roundCountries = Countries.getRandomCountries(TOTAL_ROUNDS);
+	roundCountries = Countries.getRandomCountries(TOTAL_ROUNDS);
-  currentRound   = 0;
+	currentRound = 0;
-  scores         = [];
+	scores = [];
-  startRound();
+	startRound();
 }
 
 // ── Round
 
 /** Set up UI and timer for the current round. */
 function startRound() {
-  const country = roundCountries[currentRound];
+	const country = roundCountries[currentRound];
 
-  elRoundNum.textContent    = currentRound + 1;
+	elRoundNum.textContent = currentRound + 1;
-  elCountryName.textContent = country.name;
+	elCountryName.textContent = country.name;
-  elCountryHint.textContent = country.hint || "";
+	elCountryHint.textContent = country.hint || "";
 
-  if (typeof window.updateRoundPips === "function") {
+	if (typeof window.updateRoundPips === "function") {
-    window.updateRoundPips(currentRound + 1);
+		window.updateRoundPips(currentRound + 1);
-  }
+	}
 
-  document.getElementById("canvas-wrap")?.classList.remove("has-drawing");
+	document.getElementById("canvas-wrap")?.classList.remove("has-drawing");
 
-  Drawing.clear();
+	Drawing.clear();
-  Drawing.setCities(country.cities || []);
+	Drawing.setCities(country.cities || []);
 
-  timeLeft = ROUND_DURATION;
+	timeLeft = ROUND_DURATION;
-  updateTimerUI();
+	updateTimerUI();
-  clearInterval(timerInterval);
+	clearInterval(timerInterval);
-  timerInterval = setInterval(tickTimer, 1000);
+	timerInterval = setInterval(tickTimer, 1000);
 
-  elBtnSubmit.disabled    = false;
+	elBtnSubmit.disabled = false;
-  elBtnSubmit.textContent = currentRound < TOTAL_ROUNDS - 1
+	elBtnSubmit.textContent =
-    ? "Submit & Next Round →"
+		currentRound < TOTAL_ROUNDS - 1
-    : "Submit & See Results →";
+			? "Submit & Next Round →"
+			: "Submit & See Results →";
 }
 
 /** Decrement timer by one second and auto-submit when time runs out. */
 function tickTimer() {
-  timeLeft--;
+	timeLeft--;
-  updateTimerUI();
+	updateTimerUI();
-  if (timeLeft <= 0) {
+	if (timeLeft <= 0) {
-    clearInterval(timerInterval);
+		clearInterval(timerInterval);
-    submitRound(true);
+		submitRound(true);
-  }
+	}
 }
 
 /**
@@ -77,11 +78,14 @@ function tickTimer() {
  * Uses `.timer--warning` and `.timer--danger` instead of inline styles.
  */
 function updateTimerUI() {
-  elTimerNum.textContent     = timeLeft;
+	elTimerNum.textContent = timeLeft;
-  elTimerBar.style.width     = `${(timeLeft / ROUND_DURATION) * 100}%`;
+	elTimerBar.style.width = `${(timeLeft / ROUND_DURATION) * 100}%`;
 
-  elTimerWrap.classList.toggle("timer--danger",  timeLeft <= 10);
+	elTimerWrap.classList.toggle("timer--danger", timeLeft <= 10);
-  elTimerWrap.classList.toggle("timer--warning", timeLeft > 10 && timeLeft <= 20);
+	elTimerWrap.classList.toggle(
+		"timer--warning",
+		timeLeft > 10 && timeLeft <= 20,
+	);
 }
 
 /**
@@ -89,27 +93,30 @@ function updateTimerUI() {
  * @param {boolean} [auto=false] - True when triggered by timer expiry.
  */
 function submitRound(auto = false) {
-  clearInterval(timerInterval);
+	clearInterval(timerInterval);
-  elBtnSubmit.disabled = true;
+	elBtnSubmit.disabled = true;
 
-  const points = Drawing.getPoints();
+	const points = Drawing.getPoints();
-  const score  = Scoring.calculateScore(points);
+	const score = Scoring.calculateScore(points);
-  scores.push(score);
+	scores.push(score);
 
-  if (typeof window.updateScoreDisplay === "function") {
+	if (typeof window.updateScoreDisplay === "function") {
-    window.updateScoreDisplay(currentRound, score);
+		window.updateScoreDisplay(currentRound, score);
-  }
+	}
 
-  showScoreFeedback(score);
+	showScoreFeedback(score);
 
-  setTimeout(() => {
+	setTimeout(
-    if (currentRound < TOTAL_ROUNDS - 1) {
+		() => {
-      currentRound++;
+			if (currentRound < TOTAL_ROUNDS - 1) {
-      startRound();
+				currentRound++;
-    } else {
+				startRound();
-      finishGame();
+			} else {
-    }
+				finishGame();
-  }, auto ? 400 : 1200);
+			}
+		},
+		auto ? 400 : 1200,
+	);
 }
 
 /**
@@ -117,39 +124,39 @@ function submitRound(auto = false) {
  * @param {number} score
  */
 function showScoreFeedback(score) {
-  const grade = Scoring.getGrade(score);
+	const grade = Scoring.getGrade(score);
-  const el    = document.getElementById("score-feedback");
+	const el = document.getElementById("score-feedback");
-  el.textContent      = `${score}%  ${grade.label}`;
+	el.textContent = `${score}%  ${grade.label}`;
-  el.style.color      = grade.color;
+	el.style.color = grade.color;
-  el.style.opacity    = "1";
+	el.style.opacity = "1";
-  el.style.transform  = "translateY(0)";
+	el.style.transform = "translateY(0)";
-  setTimeout(() => {
+	setTimeout(() => {
-    el.style.opacity   = "0";
+		el.style.opacity = "0";
-    el.style.transform = "translateY(-10px)";
+		el.style.transform = "translateY(-10px)";
-  }, 900);
+	}, 900);
 }
 
 /** Persist game state, update leaderboard, and navigate to results. */
 function finishGame() {
-  const totalScore = scores.reduce((sum, s) => sum + s, 0);
+	const totalScore = scores.reduce((sum, s) => sum + s, 0);
-  const state = {
+	const state = {
-    currentRound: TOTAL_ROUNDS,
+		currentRound: TOTAL_ROUNDS,
-    scores,
+		scores,
-    totalScore,
+		totalScore,
-    countries: roundCountries.map((c) => c.name),
+		countries: roundCountries.map((c) => c.name),
-  };
+	};
-  Storage.saveGameState(state);
+	Storage.saveGameState(state);
-  Storage.saveLeaderboard({
+	Storage.saveLeaderboard({
-    name:       Storage.getPlayerName(),
+		name: Storage.getPlayerName(),
-    totalScore,
+		totalScore,
-    scores,
+		scores,
-    date:       new Date().toISOString(),
+		date: new Date().toISOString(),
-  });
+	});
-  location.href = "results.html";
+	location.href = "results.html";
 }
 
 // ── Events
-elBtnClear.addEventListener("click",  () => Drawing.clear());
+elBtnClear.addEventListener("click", () => Drawing.clear());
 elBtnSubmit.addEventListener("click", () => submitRound(false));
 
 // ── Boot

frontend/scripts/index.js

@@ -5,29 +5,31 @@
  * Validates the lobby name, persists it, and navigates to the lobby page.
  */
 document.getElementById("reg-btn")?.addEventListener("click", () => {
-  const lobbyInput = /** @type {HTMLInputElement|null} */ (document.getElementById("username"));
+	const lobbyInput = /** @type {HTMLInputElement|null} */ (
-  const lobbyName  = lobbyInput ? lobbyInput.value.trim() : "";
+		document.getElementById("username")
+	);
+	const lobbyName = lobbyInput ? lobbyInput.value.trim() : "";
 
-  if (lobbyName) {
+	if (lobbyName) {
-    Storage.saveLobbyName(lobbyName);
+		Storage.saveLobbyName(lobbyName);
-    window.location.href = "lobby.html";
+		window.location.href = "lobby.html";
-  } else {
+	} else {
-    lobbyInput?.focus();
+		lobbyInput?.focus();
-  }
+	}
 });
 
 // Scroll reveal — animate elements into view as they enter the viewport
 const reveals = document.querySelectorAll(".reveal");
 const observer = new IntersectionObserver(
-  (entries) => {
+	(entries) => {
-    entries.forEach((entry) => {
+		entries.forEach((entry) => {
-      if (entry.isIntersecting) {
+			if (entry.isIntersecting) {
-        entry.target.classList.add("visible");
+				entry.target.classList.add("visible");
-        observer.unobserve(entry.target);
+				observer.unobserve(entry.target);
-      }
+			}
-    });
+		});
-  },
+	},
-  { threshold: 0.12 },
+	{ threshold: 0.12 },
 );
 
 reveals.forEach((el) => observer.observe(el));

frontend/scripts/leaderboard.js

@@ -1,69 +1,72 @@
 // leaderboard.js — leaderboard page logic
 
 document.addEventListener("DOMContentLoaded", () => {
-  const currentPlayer = Storage.getPlayerName();
+	const currentPlayer = Storage.getPlayerName();
-  const body          = document.getElementById("lb-body");
+	const body = document.getElementById("lb-body");
 
-  /**
+	/**
-   * Escape HTML special characters to prevent XSS.
+	 * Escape HTML special characters to prevent XSS.
-   * @param {string} str - Raw user-provided string.
+	 * @param {string} str - Raw user-provided string.
-   * @returns {string} HTML-safe string.
+	 * @returns {string} HTML-safe string.
-   */
+	 */
-  function escHtml(str) {
+	function escHtml(str) {
-    return String(str)
+		return String(str)
-      .replace(/&/g, "&")
+			.replace(/&/g, "&")
-      .replace(/</g, "&lt;")
+			.replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;");
+			.replace(/>/g, "&gt;");
-  }
+	}
 
-  /** Render the leaderboard from localStorage data. */
+	/** Render the leaderboard from localStorage data. */
-  function render() {
+	function render() {
-    const board = Storage.getLeaderboard();
+		const board = Storage.getLeaderboard();
-    body.innerHTML = "";
+		body.innerHTML = "";
 
-    if (!board.length) {
+		if (!board.length) {
-      body.innerHTML = `
+			body.innerHTML = `
         <div class="lb-empty">
           <div class="lb-empty__icon">🏁</div>
           <p class="lb-empty__text">No games played yet. Be the first on the board!</p>
           <a href="lobby.html" class="btn btn--primary btn--sm">Play now →</a>
         </div>`;
-      return;
+			return;
-    }
+		}
 
-    const medals       = ["🥇", "🥈", "🥉"];
+		const medals = ["🥇", "🥈", "🥉"];
-    const scoreClasses = ["gold", "silver", "bronze"];
+		const scoreClasses = ["gold", "silver", "bronze"];
 
-    board.forEach((entry, index) => {
+		board.forEach((entry, index) => {
-      const rank   = index + 1;
+			const rank = index + 1;
-      const isYou  = entry.name === currentPlayer;
+			const isYou = entry.name === currentPlayer;
-      const date   = entry.date
+			const date = entry.date
-        ? new Date(entry.date).toLocaleDateString("en-CH", { day: "2-digit", month: "short" })
+				? new Date(entry.date).toLocaleDateString("en-CH", {
-        : "—";
+						day: "2-digit",
-      const rounds = (entry.scores || []).join(" · ") || "—";
+						month: "short",
+					})
+				: "—";
+			const rounds = (entry.scores || []).join(" · ") || "—";
 
-      const row = document.createElement("div");
+			const row = document.createElement("div");
-      row.className        = `lb-row${rank <= 3 ? ` rank-${rank}` : ""}`;
+			row.className = `lb-row${rank <= 3 ? ` rank-${rank}` : ""}`;
-      row.style.animationDelay = `${index * 0.05}s`;
+			row.style.animationDelay = `${index * 0.05}s`;
 
-      row.innerHTML = `
+			row.innerHTML = `
         <span class="lb-rank">${rank <= 3 ? `<span class="lb-medal">${medals[rank - 1]}</span>` : rank}</span>
         <span class="lb-name${isYou ? " is-you" : ""}">${escHtml(entry.name)}</span>
         <span class="lb-rounds hide-sm">${escHtml(rounds)}</span>
         <span class="lb-date hide-sm">${date}</span>
         <span class="lb-score${rank <= 3 ? ` ${scoreClasses[rank - 1]}` : ""}">${entry.totalScore}</span>
       `;
-      body.appendChild(row);
+			body.appendChild(row);
-    });
+		});
 
-    // Show the current player's latest score bar
+		// Show the current player's latest score bar
-    const latest = board.find((entry) => entry.name === currentPlayer);
+		const latest = board.find((entry) => entry.name === currentPlayer);
-    if (latest) {
+		if (latest) {
-      document.getElementById("your-bar").style.display        = "flex";
+			document.getElementById("your-bar").style.display = "flex";
-      document.getElementById("your-bar-name").textContent     = latest.name;
+			document.getElementById("your-bar-name").textContent = latest.name;
-      document.getElementById("your-bar-score").textContent    = latest.totalScore;
+			document.getElementById("your-bar-score").textContent = latest.totalScore;
-    }
+		}
-  }
+	}
 
-  render();
+	render();
 });

frontend/scripts/lobby.js

@@ -1,55 +1,55 @@
 // lobby.js — lobby page logic
 
 document.addEventListener("DOMContentLoaded", () => {
-  const input  = document.getElementById("username");
+	const input = document.getElementById("username");
-  const btn    = document.getElementById("btn-start");
+	const btn = document.getElementById("btn-start");
-  const errMsg = document.getElementById("name-error");
+	const errMsg = document.getElementById("name-error");
 
-  // Display the current lobby name
+	// Display the current lobby name
-  const lobbyNameEl = document.getElementById("lobby-name-display");
+	const lobbyNameEl = document.getElementById("lobby-name-display");
-  if (lobbyNameEl) {
+	if (lobbyNameEl) {
-    lobbyNameEl.textContent = Storage.getLobbyName();
+		lobbyNameEl.textContent = Storage.getLobbyName();
-  }
+	}
 
-  /**
+	/**
-   * Validate the username input and navigate to the game.
+	 * Validate the username input and navigate to the game.
-   * Shows an inline error message on invalid input.
+	 * Shows an inline error message on invalid input.
-   */
+	 */
-  btn.addEventListener("click", () => {
+	btn.addEventListener("click", () => {
-    const name = input.value.trim();
+		const name = input.value.trim();
 
-    if (!name) {
+		if (!name) {
-      errMsg.textContent = "Please enter a username to continue.";
+			errMsg.textContent = "Please enter a username to continue.";
-      input.classList.add("input--error");
+			input.classList.add("input--error");
-      input.focus();
+			input.focus();
-      return;
+			return;
-    }
+		}
-    if (name.length < 2) {
+		if (name.length < 2) {
-      errMsg.textContent = "Username must be at least 2 characters.";
+			errMsg.textContent = "Username must be at least 2 characters.";
-      input.classList.add("input--error");
+			input.classList.add("input--error");
-      input.focus();
+			input.focus();
-      return;
+			return;
-    }
+		}
 
-    Storage.savePlayerName(name);
+		Storage.savePlayerName(name);
-    Storage.clearGameState();
+		Storage.clearGameState();
-    location.href = "game.html";
+		location.href = "game.html";
-  });
+	});
 
-  // Clear validation state on every keystroke
+	// Clear validation state on every keystroke
-  input.addEventListener("input", () => {
+	input.addEventListener("input", () => {
-    errMsg.textContent = "";
+		errMsg.textContent = "";
-    input.classList.remove("input--error");
+		input.classList.remove("input--error");
-  });
+	});
 
-  // Allow form submission via Enter key
+	// Allow form submission via Enter key
-  input.addEventListener("keydown", (e) => {
+	input.addEventListener("keydown", (e) => {
-    if (e.key === "Enter") btn.click();
+		if (e.key === "Enter") btn.click();
-  });
+	});
 
-  // Pre-fill username if the player has played before
+	// Pre-fill username if the player has played before
-  const existing = Storage.getPlayerName();
+	const existing = Storage.getPlayerName();
-  if (existing && existing !== "Anonymous") {
+	if (existing && existing !== "Anonymous") {
-    input.value = existing;
+		input.value = existing;
-  }
+	}
 });

frontend/scripts/results.js

@@ -1,65 +1,74 @@
 // results.js — results page logic
 
 document.addEventListener("DOMContentLoaded", () => {
-  const state = Storage.getGameState();
+	const state = Storage.getGameState();
-  const name  = Storage.getPlayerName();
+	const name = Storage.getPlayerName();
 
-  document.getElementById("results-player").textContent = name;
+	document.getElementById("results-player").textContent = name;
 
-  if (!state) {
+	if (!state) {
-    document.getElementById("results-title").textContent = "No game found.";
+		document.getElementById("results-title").textContent = "No game found.";
-    document.getElementById("total-score").textContent   = "—";
+		document.getElementById("total-score").textContent = "—";
-    return;
+		return;
-  }
+	}
 
-  const { scores, totalScore, countries } = state;
+	const { scores, totalScore, countries } = state;
 
-  // Determine emoji and title based on average score
+	// Determine emoji and title based on average score
-  const avg = totalScore / 3;
+	const avg = totalScore / 3;
-  let emoji = "🌍";
+	let emoji = "🌍";
-  let title = "Not bad!";
+	let title = "Not bad!";
-  if (avg >= 85)      { emoji = "🔥"; title = "Incredible!"; }
+	if (avg >= 85) {
-  else if (avg >= 70) { emoji = "🎉"; title = "Well done!"; }
+		emoji = "🔥";
-  else if (avg >= 50) { emoji = "👏"; title = "Good effort!"; }
+		title = "Incredible!";
-  else                { emoji = "😅"; title = "Keep practising!"; }
+	} else if (avg >= 70) {
+		emoji = "🎉";
+		title = "Well done!";
+	} else if (avg >= 50) {
+		emoji = "👏";
+		title = "Good effort!";
+	} else {
+		emoji = "😅";
+		title = "Keep practising!";
+	}
 
-  document.getElementById("results-emoji").textContent = emoji;
+	document.getElementById("results-emoji").textContent = emoji;
-  document.getElementById("results-title").textContent  = title;
+	document.getElementById("results-title").textContent = title;
-  document.getElementById("total-score").textContent    = totalScore;
+	document.getElementById("total-score").textContent = totalScore;
 
-  // Grade badge
+	// Grade badge
-  const grade   = Scoring.getGrade(avg);
+	const grade = Scoring.getGrade(avg);
-  const gradeEl = document.getElementById("total-grade");
+	const gradeEl = document.getElementById("total-grade");
-  gradeEl.textContent = `Grade ${grade.label}`;
+	gradeEl.textContent = `Grade ${grade.label}`;
 
-  // Round breakdown rows
+	// Round breakdown rows
-  const rowsContainer = document.getElementById("round-rows");
+	const rowsContainer = document.getElementById("round-rows");
-  (scores || []).forEach((score, index) => {
+	(scores || []).forEach((score, index) => {
-    const row = document.createElement("div");
+		const row = document.createElement("div");
-    row.className = "round-row";
+		row.className = "round-row";
-    row.innerHTML = `
+		row.innerHTML = `
       <span class="round-row__label">Round ${index + 1}</span>
       <div class="round-row__bar-wrap">
         <div class="round-row__bar" style="width:0%" data-target="${score}"></div>
       </div>
       <span class="round-row__score">${score}%</span>
     `;
-    rowsContainer.appendChild(row);
+		rowsContainer.appendChild(row);
-  });
+	});
 
-  // Animate score bars on next frame so CSS transition fires
+	// Animate score bars on next frame so CSS transition fires
-  requestAnimationFrame(() => {
+	requestAnimationFrame(() => {
-    document.querySelectorAll(".round-row__bar").forEach((bar) => {
+		document.querySelectorAll(".round-row__bar").forEach((bar) => {
-      bar.style.width = `${bar.dataset.target}%`;
+			bar.style.width = `${bar.dataset.target}%`;
-    });
+		});
-  });
+	});
 
-  // Country tags
+	// Country tags
-  const tagsContainer = document.getElementById("countries-row");
+	const tagsContainer = document.getElementById("countries-row");
-  (countries || []).forEach((country) => {
+	(countries || []).forEach((country) => {
-    const tag = document.createElement("span");
+		const tag = document.createElement("span");
-    tag.className   = "country-tag";
+		tag.className = "country-tag";
-    tag.textContent = country;
+		tag.textContent = country;
-    tagsContainer.appendChild(tag);
+		tagsContainer.appendChild(tag);
-  });
+	});
 });

frontend/scripts/scoring.js

@@ -1,47 +1,46 @@
 // scoring.js — accuracy calculation
 
 const Scoring = (() => {
+	/**
+	 * Calculate a score from the drawn path points.
+	 * NOTE: Currently uses an effort-based approximation.
+	 * TODO: Replace with real polygon comparison (IoU or Hausdorff distance).
+	 * @param {{ x: number, y: number }[]} drawnPoints
+	 * @returns {number} Score between 0 and 100.
+	 */
+	function calculateScore(drawnPoints) {
+		if (!drawnPoints || drawnPoints.length < 10) return 0;
 
-  /**
+		const effort = Math.min(drawnPoints.length / 300, 1); // 0–1
-   * Calculate a score from the drawn path points.
+		const base = 40 + Math.round(effort * 45); // 40–85
-   * NOTE: Currently uses an effort-based approximation.
+		const jitter = Math.round((Math.random() - 0.5) * 14); // ±7
-   * TODO: Replace with real polygon comparison (IoU or Hausdorff distance).
+		return Math.max(0, Math.min(100, base + jitter));
-   * @param {{ x: number, y: number }[]} drawnPoints
+	}
-   * @returns {number} Score between 0 and 100.
-   */
-  function calculateScore(drawnPoints) {
-    if (!drawnPoints || drawnPoints.length < 10) return 0;
 
-    const effort = Math.min(drawnPoints.length / 300, 1);       // 0–1
+	/**
-    const base   = 40 + Math.round(effort * 45);                 // 40–85
+	 * Compare a drawn polygon against a reference polygon.
-    const jitter = Math.round((Math.random() - 0.5) * 14);       // ±7
+	 * Stub — reserved for future IoU / Hausdorff implementation.
-    return Math.max(0, Math.min(100, base + jitter));
+	 * @param {{ x: number, y: number }[]} _drawnPoints
-  }
+	 * @param {{ x: number, y: number }[]} _referencePolygon - Normalised 0–1 coords.
+	 * @returns {number} Score between 0 and 100.
+	 */
+	function compareShapes(_drawnPoints, _referencePolygon) {
+		// TODO: implement real shape comparison
+		return 0;
+	}
 
-  /**
+	/**
-   * Compare a drawn polygon against a reference polygon.
+	 * Map a numeric score to a letter grade with colour.
-   * Stub — reserved for future IoU / Hausdorff implementation.
+	 * @param {number} score
-   * @param {{ x: number, y: number }[]} _drawnPoints
+	 * @returns {{ label: string, color: string }}
-   * @param {{ x: number, y: number }[]} _referencePolygon - Normalised 0–1 coords.
+	 */
-   * @returns {number} Score between 0 and 100.
+	function getGrade(score) {
-   */
+		if (score >= 90) return { label: "S", color: "#f0b429" };
-  function compareShapes(_drawnPoints, _referencePolygon) {
+		if (score >= 75) return { label: "A", color: "#41b869" };
-    // TODO: implement real shape comparison
+		if (score >= 60) return { label: "B", color: "#1a7fc4" };
-    return 0;
+		if (score >= 40) return { label: "C", color: "#7a9aaa" };
-  }
+		return { label: "D", color: "#e05c5c" };
+	}
 
-  /**
+	return { calculateScore, compareShapes, getGrade };
-   * Map a numeric score to a letter grade with colour.
-   * @param {number} score
-   * @returns {{ label: string, color: string }}
-   */
-  function getGrade(score) {
-    if (score >= 90) return { label: "S", color: "#f0b429" };
-    if (score >= 75) return { label: "A", color: "#41b869" };
-    if (score >= 60) return { label: "B", color: "#1a7fc4" };
-    if (score >= 40) return { label: "C", color: "#7a9aaa" };
-    return               { label: "D", color: "#e05c5c" };
-  }
-
-  return { calculateScore, compareShapes, getGrade };
 })();

frontend/scripts/storage.js

@@ -1,85 +1,105 @@
 // storage.js — localStorage helpers
 
 const Storage = (() => {
-  const KEYS = {
+	const KEYS = {
-    PLAYER_NAME: "gd_playerName",
+		PLAYER_NAME: "gd_playerName",
-    LOBBY_NAME:  "gd_lobbyName",
+		LOBBY_NAME: "gd_lobbyName",
-    GAME_STATE:  "gd_gameState",
+		GAME_STATE: "gd_gameState",
-    LEADERBOARD: "gd_leaderboard",
+		LEADERBOARD: "gd_leaderboard",
-  };
+	};
 
-  /**
+	/**
-   * Safely write a value to localStorage.
+	 * Safely write a value to localStorage.
-   * Silently fails if storage quota is exceeded or unavailable.
+	 * Silently fails if storage quota is exceeded or unavailable.
-   * @param {string} key
+	 * @param {string} key
-   * @param {string} value
+	 * @param {string} value
-   */
+	 */
-  function _set(key, value) {
+	function _set(key, value) {
-    try {
+		try {
-      localStorage.setItem(key, value);
+			localStorage.setItem(key, value);
-    } catch {
+		} catch {
-      console.warn(`Storage: could not write key "${key}"`);
+			console.warn(`Storage: could not write key "${key}"`);
-    }
+		}
-  }
+	}
 
-  /** @param {string} name */
+	/** @param {string} name */
-  function savePlayerName(name) { _set(KEYS.PLAYER_NAME, name.trim()); }
+	function savePlayerName(name) {
+		_set(KEYS.PLAYER_NAME, name.trim());
+	}
 
-  /** @returns {string} */
+	/** @returns {string} */
-  function getPlayerName() { return localStorage.getItem(KEYS.PLAYER_NAME) || "Anonymous"; }
+	function getPlayerName() {
+		return localStorage.getItem(KEYS.PLAYER_NAME) || "Anonymous";
+	}
 
-  /** @param {string} name */
+	/** @param {string} name */
-  function saveLobbyName(name) { _set(KEYS.LOBBY_NAME, name.trim()); }
+	function saveLobbyName(name) {
+		_set(KEYS.LOBBY_NAME, name.trim());
+	}
 
-  /** @returns {string} */
+	/** @returns {string} */
-  function getLobbyName() { return localStorage.getItem(KEYS.LOBBY_NAME) || "My Lobby"; }
+	function getLobbyName() {
+		return localStorage.getItem(KEYS.LOBBY_NAME) || "My Lobby";
+	}
 
-  /**
+	/**
-   * @param {{ scores: number[], totalScore: number, countries: string[] }} state
+	 * @param {{ scores: number[], totalScore: number, countries: string[] }} state
-   */
+	 */
-  function saveGameState(state) { _set(KEYS.GAME_STATE, JSON.stringify(state)); }
+	function saveGameState(state) {
+		_set(KEYS.GAME_STATE, JSON.stringify(state));
+	}
 
-  /**
+	/**
-   * @returns {{ scores: number[], totalScore: number, countries: string[] } | null}
+	 * @returns {{ scores: number[], totalScore: number, countries: string[] } | null}
-   */
+	 */
-  function getGameState() {
+	function getGameState() {
-    try {
+		try {
-      return JSON.parse(localStorage.getItem(KEYS.GAME_STATE)) || null;
+			return JSON.parse(localStorage.getItem(KEYS.GAME_STATE)) || null;
-    } catch {
+		} catch {
-      return null;
+			return null;
-    }
+		}
-  }
+	}
 
-  function clearGameState() { localStorage.removeItem(KEYS.GAME_STATE); }
+	function clearGameState() {
+		localStorage.removeItem(KEYS.GAME_STATE);
+	}
 
-  /**
+	/**
-   * Add an entry to the leaderboard and keep the top 20.
+	 * Add an entry to the leaderboard and keep the top 20.
-   * @param {{ name: string, totalScore: number, scores: number[], date: string }} entry
+	 * @param {{ name: string, totalScore: number, scores: number[], date: string }} entry
-   */
+	 */
-  function saveLeaderboard(entry) {
+	function saveLeaderboard(entry) {
-    const board = getLeaderboard();
+		const board = getLeaderboard();
-    board.push(entry);
+		board.push(entry);
-    board.sort((a, b) => b.totalScore - a.totalScore);
+		board.sort((a, b) => b.totalScore - a.totalScore);
-    _set(KEYS.LEADERBOARD, JSON.stringify(board.slice(0, 20)));
+		_set(KEYS.LEADERBOARD, JSON.stringify(board.slice(0, 20)));
-  }
+	}
 
-  /**
+	/**
-   * @returns {{ name: string, totalScore: number, scores: number[], date: string }[]}
+	 * @returns {{ name: string, totalScore: number, scores: number[], date: string }[]}
-   */
+	 */
-  function getLeaderboard() {
+	function getLeaderboard() {
-    try {
+		try {
-      return JSON.parse(localStorage.getItem(KEYS.LEADERBOARD)) || [];
+			return JSON.parse(localStorage.getItem(KEYS.LEADERBOARD)) || [];
-    } catch {
+		} catch {
-      return [];
+			return [];
-    }
+		}
-  }
+	}
 
-  function clearLeaderboard() { localStorage.removeItem(KEYS.LEADERBOARD); }
+	function clearLeaderboard() {
+		localStorage.removeItem(KEYS.LEADERBOARD);
+	}
 
-  return {
+	return {
-    savePlayerName, getPlayerName,
+		savePlayerName,
-    saveLobbyName,  getLobbyName,
+		getPlayerName,
-    saveGameState,  getGameState,  clearGameState,
+		saveLobbyName,
-    saveLeaderboard, getLeaderboard, clearLeaderboard,
+		getLobbyName,
-  };
+		saveGameState,
+		getGameState,
+		clearGameState,
+		saveLeaderboard,
+		getLeaderboard,
+		clearLeaderboard,
+	};
 })();

frontend/styles/game.css

@@ -1,291 +1,339 @@
 /* game.css */
 
 .game-layout {
-  min-height: calc(100vh - var(--hh));
+	min-height: calc(100vh - var(--hh));
-  display: grid;
+	display: grid;
-  grid-template-rows: auto 1fr auto;
+	grid-template-rows: auto 1fr auto;
-  padding: 20px 0 28px;
+	padding: 20px 0 28px;
-  gap: 16px;
+	gap: 16px;
 }
 
 /* ── Top bar */
 .game-topbar {
-  display: grid;
+	display: grid;
-  grid-template-columns: 1fr auto 1fr;
+	grid-template-columns: 1fr auto 1fr;
-  align-items: center;
+	align-items: center;
-  gap: 16px;
+	gap: 16px;
 }
 
 .game-round {
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  gap: 10px;
+	gap: 10px;
 }
 
 .round-pip {
-  width: 10px;
+	width: 10px;
-  height: 10px;
+	height: 10px;
-  border-radius: 50%;
+	border-radius: 50%;
-  background: var(--line);
+	background: var(--line);
-  transition: background .3s;
+	transition: background 0.3s;
 }
 
-.round-pip.active  { background: var(--sea); }
+.round-pip.active {
-.round-pip.done    { background: var(--leaf); }
+	background: var(--sea);
+}
+.round-pip.done {
+	background: var(--leaf);
+}
 
 .round-label {
-  font-family: 'Syne', sans-serif;
+	font-family: "Syne", sans-serif;
-  font-size: .82rem;
+	font-size: 0.82rem;
-  font-weight: 700;
+	font-weight: 700;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
-  letter-spacing: .06em;
+	letter-spacing: 0.06em;
-  text-transform: uppercase;
+	text-transform: uppercase;
 }
 
 .round-label span {
-  color: var(--ink);
+	color: var(--ink);
 }
 
 /* Country name */
 .game-country {
-  text-align: center;
+	text-align: center;
 }
 
 .country-name {
-  font-family: 'Syne', sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: clamp(1.5rem, 3vw, 2.4rem);
+	font-size: clamp(1.5rem, 3vw, 2.4rem);
-  letter-spacing: -.03em;
+	letter-spacing: -0.03em;
-  line-height: 1.1;
+	line-height: 1.1;
 }
 
 .country-hint {
-  font-size: .82rem;
+	font-size: 0.82rem;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
-  margin-top: 4px;
+	margin-top: 4px;
 }
 
 /* Timer */
 .game-timer {
-  display: flex;
+	display: flex;
-  flex-direction: column;
+	flex-direction: column;
-  align-items: flex-end;
+	align-items: flex-end;
-  gap: 6px;
+	gap: 6px;
 }
 
 .timer-display {
-  display: flex;
+	display: flex;
-  align-items: baseline;
+	align-items: baseline;
-  gap: 4px;
+	gap: 4px;
 }
 
 .timer-num {
-  font-family: 'Syne', sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: 2rem;
+	font-size: 2rem;
-  line-height: 1;
+	line-height: 1;
-  color: var(--ink);
+	color: var(--ink);
-  transition: color .3s;
+	transition: color 0.3s;
-  min-width: 2ch;
+	min-width: 2ch;
-  text-align: right;
+	text-align: right;
 }
 
 .timer-unit {
-  font-size: .78rem;
+	font-size: 0.78rem;
-  font-weight: 600;
+	font-weight: 600;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
 }
 
 .timer-track {
-  width: 120px;
+	width: 120px;
-  height: 4px;
+	height: 4px;
-  background: var(--line);
+	background: var(--line);
-  border-radius: 999px;
+	border-radius: 999px;
-  overflow: hidden;
+	overflow: hidden;
 }
 
 .timer-bar {
-  height: 100%;
+	height: 100%;
-  width: 100%;
+	width: 100%;
-  background: linear-gradient(90deg, var(--sea), var(--leaf));
+	background: linear-gradient(90deg, var(--sea), var(--leaf));
-  border-radius: 999px;
+	border-radius: 999px;
-  transition: width 1s linear, background .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-num {
-.timer--warning .timer-bar { background: var(--gold); }
+	color: var(--gold);
+}
+.timer--warning .timer-bar {
+	background: var(--gold);
+}
 
 .timer--danger .timer-bar,
-.timer--danger .timer-num { color: var(--danger); }
+.timer--danger .timer-num {
-.timer--danger .timer-bar { background: var(--danger); }
+	color: var(--danger);
+}
+.timer--danger .timer-bar {
+	background: var(--danger);
+}
 
 /* ── Canvas area */
 .canvas-area {
-  display: grid;
+	display: grid;
-  grid-template-columns: 1fr 220px;
+	grid-template-columns: 1fr 220px;
-  gap: 16px;
+	gap: 16px;
-  min-height: 0;
+	min-height: 0;
 }
 
 .canvas-wrap {
-  position: relative;
+	position: relative;
-  background: var(--white);
+	background: var(--white);
-  border: 1.5px solid var(--line);
+	border: 1.5px solid var(--line);
-  border-radius: var(--r-xl);
+	border-radius: var(--r-xl);
-  box-shadow: var(--shadow);
+	box-shadow: var(--shadow);
-  overflow: hidden;
+	overflow: hidden;
-  cursor: crosshair;
+	cursor: crosshair;
 }
 
 .canvas-wrap::before {
-  content: 'Draw the border here';
+	content: "Draw the border here";
-  position: absolute;
+	position: absolute;
-  inset: 0;
+	inset: 0;
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  justify-content: center;
+	justify-content: center;
-  font-size: .9rem;
+	font-size: 0.9rem;
-  font-weight: 500;
+	font-weight: 500;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
-  pointer-events: none;
+	pointer-events: none;
-  opacity: 1;
+	opacity: 1;
-  transition: opacity .3s;
+	transition: opacity 0.3s;
 }
 
-.canvas-wrap.has-drawing::before { opacity: 0; }
+.canvas-wrap.has-drawing::before {
+	opacity: 0;
+}
 
 #draw-canvas {
-  display: block;
+	display: block;
-  width: 100%;
+	width: 100%;
-  height: 100%;
+	height: 100%;
-  touch-action: none;
+	touch-action: none;
 }
 
 /* Score feedback overlay */
 #score-feedback {
-  position: absolute;
+	position: absolute;
-  top: 20px;
+	top: 20px;
-  left: 50%;
+	left: 50%;
-  transform: translateX(-50%) translateY(-10px);
+	transform: translateX(-50%) translateY(-10px);
-  font-family: 'Syne', sans-serif;
+	font-family: "Syne", sans-serif;
-  font-size: 2rem;
+	font-size: 2rem;
-  font-weight: 800;
+	font-weight: 800;
-  opacity: 0;
+	opacity: 0;
-  transition: opacity .4s ease, transform .4s ease;
+	transition:
-  pointer-events: none;
+		opacity 0.4s ease,
-  text-shadow: 0 2px 8px rgba(0,0,0,.12);
+		transform 0.4s ease;
-  white-space: nowrap;
+	pointer-events: none;
+	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+	white-space: nowrap;
 }
 
 /* Sidebar */
 .game-sidebar {
-  display: flex;
+	display: flex;
-  flex-direction: column;
+	flex-direction: column;
-  gap: 12px;
+	gap: 12px;
 }
 
 .sidebar-card {
-  background: var(--glass);
+	background: var(--glass);
-  backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
-  border: 1px solid rgba(255,255,255,.85);
+	border: 1px solid rgba(255, 255, 255, 0.85);
-  border-radius: var(--r-lg);
+	border-radius: var(--r-lg);
-  padding: 18px 20px;
+	padding: 18px 20px;
-  box-shadow: var(--shadow-sm);
+	box-shadow: var(--shadow-sm);
 }
 
 .sidebar-card__label {
-  font-size: .72rem;
+	font-size: 0.72rem;
-  font-weight: 700;
+	font-weight: 700;
-  letter-spacing: .08em;
+	letter-spacing: 0.08em;
-  text-transform: uppercase;
+	text-transform: uppercase;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
-  margin-bottom: 10px;
+	margin-bottom: 10px;
 }
 
 /* Round scores */
-.round-scores { display: grid; gap: 8px; }
+.round-scores {
+	display: grid;
+	gap: 8px;
+}
 
 .rscore-row {
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  justify-content: space-between;
+	justify-content: space-between;
-  gap: 8px;
+	gap: 8px;
 }
 
 .rscore-label {
-  font-size: .82rem;
+	font-size: 0.82rem;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  font-weight: 500;
+	font-weight: 500;
 }
 
 .rscore-val {
-  font-family: 'Syne', sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: .9rem;
+	font-size: 0.9rem;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
 }
 
-.rscore-val.filled { color: var(--sea); }
+.rscore-val.filled {
+	color: var(--sea);
+}
 
 /* Player name in sidebar */
 .player-name-display {
-  font-family: 'Syne', sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 700;
+	font-weight: 700;
-  font-size: 1rem;
+	font-size: 1rem;
-  color: var(--ink);
+	color: var(--ink);
-  word-break: break-word;
+	word-break: break-word;
 }
 
 /* Controls */
 .game-controls {
-  display: flex;
+	display: flex;
-  gap: 10px;
+	gap: 10px;
 }
 
 /* ─── Responsive ─── */
 @media (max-width: 900px) {
-  .canvas-area {
+	.canvas-area {
-    grid-template-columns: 1fr;
+		grid-template-columns: 1fr;
-    grid-template-rows: 1fr auto;
+		grid-template-rows: 1fr auto;
-  }
+	}
 
-  .game-sidebar {
+	.game-sidebar {
-    flex-direction: row;
+		flex-direction: row;
-    flex-wrap: wrap;
+		flex-wrap: wrap;
-  }
+	}
 
-  .sidebar-card { flex: 1 1 140px; }
+	.sidebar-card {
+		flex: 1 1 140px;
+	}
 
-  .canvas-wrap { min-height: 340px; }
+	.canvas-wrap {
+		min-height: 340px;
+	}
 
-  .game-topbar {
+	.game-topbar {
-    grid-template-columns: auto 1fr auto;
+		grid-template-columns: auto 1fr auto;
-  }
+	}
 }
 
 @media (max-width: 600px) {
-  .game-layout { padding: 14px 0 20px; gap: 12px; }
+	.game-layout {
+		padding: 14px 0 20px;
+		gap: 12px;
+	}
 
-  .game-topbar {
+	.game-topbar {
-    grid-template-columns: 1fr;
+		grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
+		grid-template-rows: auto auto auto;
-    gap: 10px;
+		gap: 10px;
-  }
+	}
 
-  .game-country { text-align: left; }
+	.game-country {
-  .game-timer { align-items: flex-start; }
+		text-align: left;
-  .timer-track { width: 100%; }
+	}
+	.game-timer {
+		align-items: flex-start;
+	}
+	.timer-track {
+		width: 100%;
+	}
 
-  .canvas-wrap { min-height: 280px; }
+	.canvas-wrap {
+		min-height: 280px;
+	}
 
-  .game-controls { flex-direction: column; }
+	.game-controls {
-  .game-controls .btn { width: 100%; }
+		flex-direction: column;
+	}
+	.game-controls .btn {
+		width: 100%;
+	}
 }
 
 @media (max-width: 360px) {
-  .country-name { font-size: 1.4rem; }
+	.country-name {
-  .timer-num { font-size: 1.6rem; }
+		font-size: 1.4rem;
-  .canvas-wrap { min-height: 240px; }
+	}
+	.timer-num {
+		font-size: 1.6rem;
+	}
+	.canvas-wrap {
+		min-height: 240px;
+	}
 }

frontend/styles/index.css

@@ -2,353 +2,486 @@
 
 /* ─── EYEBROW ─── */
 .eyebrow {
-  display: inline-flex;
+	display: inline-flex;
-  align-items: center;
+	align-items: center;
-  gap: 8px;
+	gap: 8px;
-  padding: 7px 14px 7px 10px;
+	padding: 7px 14px 7px 10px;
-  border-radius: 999px;
+	border-radius: 999px;
-  border: 1px solid var(--leaf-dim);
+	border: 1px solid var(--leaf-dim);
-  background: rgba(65, 184, 105, 0.08);
+	background: rgba(65, 184, 105, 0.08);
-  color: #289149;
+	color: #289149;
-  font-size: 0.82rem;
+	font-size: 0.82rem;
-  font-weight: 600;
+	font-weight: 600;
-  letter-spacing: 0.04em;
+	letter-spacing: 0.04em;
-  text-transform: uppercase;
+	text-transform: uppercase;
-  margin-bottom: 26px;
+	margin-bottom: 26px;
 }
 
 .eyebrow__dot {
-  width: 7px;
+	width: 7px;
-  height: 7px;
+	height: 7px;
-  border-radius: 50%;
+	border-radius: 50%;
-  background: var(--leaf);
+	background: var(--leaf);
-  animation: pulse 2s ease-in-out infinite;
+	animation: pulse 2s ease-in-out infinite;
 }
 
 @keyframes pulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
+	0%,
-  50%       { transform: scale(1.4); opacity: 0.7; }
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	50% {
+		transform: scale(1.4);
+		opacity: 0.7;
+	}
 }
 
 /* ─── HERO ─── */
 .hero {
-  min-height: calc(100vh - var(--hh));
+	min-height: calc(100vh - var(--hh));
-  display: grid;
+	display: grid;
-  place-items: center;
+	place-items: center;
-  padding: 80px 0 60px;
+	padding: 80px 0 60px;
 }
 
 .hero__inner {
-  display: grid;
+	display: grid;
-  grid-template-columns: 1fr minmax(320px, 500px);
+	grid-template-columns: 1fr minmax(320px, 500px);
-  gap: 64px;
+	gap: 64px;
-  align-items: center;
+	align-items: center;
 }
 
 .hero__title {
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: clamp(3.6rem, 8vw, 7rem);
+	font-size: clamp(3.6rem, 8vw, 7rem);
-  line-height: 0.92;
+	line-height: 0.92;
-  letter-spacing: -0.04em;
+	letter-spacing: -0.04em;
-  margin-bottom: 24px;
+	margin-bottom: 24px;
 }
 
 .hero__title em {
-  font-style: normal;
+	font-style: normal;
-  background: linear-gradient(135deg, var(--sea), var(--leaf));
+	background: linear-gradient(135deg, var(--sea), var(--leaf));
-  -webkit-background-clip: text;
+	-webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+	-webkit-text-fill-color: transparent;
-  background-clip: text;
+	background-clip: text;
 }
 
 .hero__desc {
-  font-size: 1.08rem;
+	font-size: 1.08rem;
-  line-height: 1.75;
+	line-height: 1.75;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  max-width: 520px;
+	max-width: 520px;
-  margin-bottom: 38px;
+	margin-bottom: 38px;
 }
 
 .hero__actions {
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  gap: 16px;
+	gap: 16px;
-  flex-wrap: wrap;
+	flex-wrap: wrap;
 }
 
 /* ─── GLOBE CARD ─── */
 .globe-card {
-  background: var(--glass);
+	background: var(--glass);
-  backdrop-filter: blur(12px);
+	backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.8);
+	border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: var(--r-xl);
+	border-radius: var(--r-xl);
-  box-shadow: var(--shadow);
+	box-shadow: var(--shadow);
-  padding: 40px;
+	padding: 40px;
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  justify-content: center;
+	justify-content: center;
-  min-height: 500px;
+	min-height: 500px;
-  position: relative;
+	position: relative;
-  overflow: hidden;
+	overflow: hidden;
 }
 
 .globe-card::before {
-  content: "";
+	content: "";
-  position: absolute;
+	position: absolute;
-  inset: 0;
+	inset: 0;
-  border-radius: var(--r-xl);
+	border-radius: var(--r-xl);
-  background:
+	background:
-    radial-gradient(circle at 30% 25%, rgba(65, 184, 105, 0.18), transparent 50%),
+		radial-gradient(
-    radial-gradient(circle at 75% 75%, rgba(26, 127, 196, 0.15), transparent 50%);
+			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 {
-  position: relative;
+	position: relative;
-  z-index: 1;
+	z-index: 1;
-  width: min(100%, 380px);
+	width: min(100%, 380px);
-  aspect-ratio: 1;
+	aspect-ratio: 1;
-  border-radius: 50%;
+	border-radius: 50%;
-  background: radial-gradient(
+	background: radial-gradient(
-    circle at 35% 30%,
+		circle at 35% 30%,
-    #70d0ff 0%,
+		#70d0ff 0%,
-    var(--sea) 30%,
+		var(--sea) 30%,
-    #0d4b80 65%,
+		#0d4b80 65%,
-    #072f52 100%
+		#072f52 100%
-  );
+	);
-  box-shadow:
+	box-shadow:
-    inset -20px -20px 40px rgba(0, 0, 0, 0.22),
+		inset -20px -20px 40px rgba(0, 0, 0, 0.22),
-    inset 8px 8px 24px rgba(255, 255, 255, 0.08),
+		inset 8px 8px 24px rgba(255, 255, 255, 0.08),
-    0 30px 60px rgba(7, 47, 82, 0.28);
+		0 30px 60px rgba(7, 47, 82, 0.28);
 }
 
 .continent {
-  position: absolute;
+	position: absolute;
-  background: #52c870;
+	background: #52c870;
-  border-radius: 46% 54% 58% 42%;
+	border-radius: 46% 54% 58% 42%;
 }
 
-.c1 { width: 30%; height: 22%; top: 18%; left: 12%; transform: rotate(-14deg); }
+.c1 {
-.c2 { width: 18%; height: 28%; top: 30%; left: 46%; transform: rotate(8deg); border-radius: 40% 60% 50% 50%; }
+	width: 30%;
-.c3 { width: 22%; height: 16%; top: 56%; right: 15%; transform: rotate(22deg); }
+	height: 22%;
-.c4 { width: 12%; height: 18%; top: 68%; left: 20%; transform: rotate(-6deg); border-radius: 50%; }
+	top: 18%;
+	left: 12%;
+	transform: rotate(-14deg);
+}
+.c2 {
+	width: 18%;
+	height: 28%;
+	top: 30%;
+	left: 46%;
+	transform: rotate(8deg);
+	border-radius: 40% 60% 50% 50%;
+}
+.c3 {
+	width: 22%;
+	height: 16%;
+	top: 56%;
+	right: 15%;
+	transform: rotate(22deg);
+}
+.c4 {
+	width: 12%;
+	height: 18%;
+	top: 68%;
+	left: 20%;
+	transform: rotate(-6deg);
+	border-radius: 50%;
+}
 
 .globe-line {
-  position: absolute;
+	position: absolute;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+	border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 50%;
+	border-radius: 50%;
-  top: 50%;
+	top: 50%;
-  left: 50%;
+	left: 50%;
-  transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
 }
 
-.gl1 { width: 60%; height: 100%; }
+.gl1 {
-.gl2 { width: 88%; height: 100%; }
+	width: 60%;
-.gl3 { width: 100%; height: 55%; top: 50%; }
+	height: 100%;
-.gl4 { width: 100%; height: 80%; top: 50%; }
+}
+.gl2 {
+	width: 88%;
+	height: 100%;
+}
+.gl3 {
+	width: 100%;
+	height: 55%;
+	top: 50%;
+}
+.gl4 {
+	width: 100%;
+	height: 80%;
+	top: 50%;
+}
 
 .globe-badge {
-  position: absolute;
+	position: absolute;
-  z-index: 2;
+	z-index: 2;
-  background: var(--white);
+	background: var(--white);
-  border-radius: var(--r-md);
+	border-radius: var(--r-md);
-  padding: 10px 14px;
+	padding: 10px 14px;
-  box-shadow: 0 8px 24px rgba(11, 31, 42, 0.14);
+	box-shadow: 0 8px 24px rgba(11, 31, 42, 0.14);
-  font-size: 0.8rem;
+	font-size: 0.8rem;
-  font-weight: 600;
+	font-weight: 600;
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  gap: 8px;
+	gap: 8px;
-  animation: floatBadge 3s ease-in-out infinite;
+	animation: floatBadge 3s ease-in-out infinite;
 }
 
-.gb--score   { top: 14%; right: 6%; animation-delay: 0s; }
+.gb--score {
-.gb--country { bottom: 14%; left: 4%; animation-delay: 1.2s; }
+	top: 14%;
+	right: 6%;
+	animation-delay: 0s;
+}
+.gb--country {
+	bottom: 14%;
+	left: 4%;
+	animation-delay: 1.2s;
+}
 
 @keyframes floatBadge {
-  0%, 100% { transform: translateY(0); }
+	0%,
-  50%      { transform: translateY(-8px); }
+	100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-8px);
+	}
 }
 
-.gb__dot         { width: 8px; height: 8px; border-radius: 50%; }
+.gb__dot {
-.gb__dot--green  { background: var(--leaf); }
+	width: 8px;
-.gb__dot--blue   { background: var(--sea); }
+	height: 8px;
+	border-radius: 50%;
+}
+.gb__dot--green {
+	background: var(--leaf);
+}
+.gb__dot--blue {
+	background: var(--sea);
+}
 
 /* ─── ABOUT ─── */
 .about {
-  padding: 100px 0;
+	padding: 100px 0;
 }
 
 .about__inner {
-  display: grid;
+	display: grid;
-  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
-  gap: 64px;
+	gap: 64px;
-  align-items: center;
+	align-items: center;
 }
 
 .about__desc {
-  font-size: 1.05rem;
+	font-size: 1.05rem;
-  line-height: 1.75;
+	line-height: 1.75;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  margin-bottom: 36px;
+	margin-bottom: 36px;
 }
 
 .mini-globe-wrap {
-  background: var(--glass);
+	background: var(--glass);
-  backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.8);
+	border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: var(--r-xl);
+	border-radius: var(--r-xl);
-  box-shadow: var(--shadow);
+	box-shadow: var(--shadow);
-  padding: 32px;
+	padding: 32px;
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  justify-content: center;
+	justify-content: center;
-  aspect-ratio: 1;
+	aspect-ratio: 1;
-  max-width: 340px;
+	max-width: 340px;
-  position: relative;
+	position: relative;
-  overflow: hidden;
+	overflow: hidden;
 }
 
 .mini-globe-wrap::before {
-  content: "";
+	content: "";
-  position: absolute;
+	position: absolute;
-  inset: 0;
+	inset: 0;
-  border-radius: var(--r-xl);
+	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%
+	);
 }
 
 /* ─── STEPS ─── */
 .steps {
-  display: grid;
+	display: grid;
-  gap: 16px;
+	gap: 16px;
 }
 
 .step {
-  display: grid;
+	display: grid;
-  grid-template-columns: 64px 1fr;
+	grid-template-columns: 64px 1fr;
-  gap: 20px;
+	gap: 20px;
-  align-items: center;
+	align-items: center;
-  background: var(--glass);
+	background: var(--glass);
-  backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.8);
+	border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: var(--r-lg);
+	border-radius: var(--r-lg);
-  padding: 22px 26px;
+	padding: 22px 26px;
-  box-shadow: 0 4px 20px rgba(11, 31, 42, 0.06);
+	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 {
-  transform: translateX(6px);
+	transform: translateX(6px);
-  box-shadow: 0 8px 28px rgba(11, 31, 42, 0.1);
+	box-shadow: 0 8px 28px rgba(11, 31, 42, 0.1);
 }
 
 .step__num {
-  width: 56px;
+	width: 56px;
-  height: 56px;
+	height: 56px;
-  border-radius: 16px;
+	border-radius: 16px;
-  background: linear-gradient(135deg, var(--sea), var(--leaf));
+	background: linear-gradient(135deg, var(--sea), var(--leaf));
-  color: var(--white);
+	color: var(--white);
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: 1rem;
+	font-size: 1rem;
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  justify-content: center;
+	justify-content: center;
-  flex-shrink: 0;
+	flex-shrink: 0;
 }
 
 .step__title {
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 700;
+	font-weight: 700;
-  font-size: 1rem;
+	font-size: 1rem;
-  margin-bottom: 4px;
+	margin-bottom: 4px;
 }
 
 .step__text {
-  font-size: 0.9rem;
+	font-size: 0.9rem;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  line-height: 1.5;
+	line-height: 1.5;
 }
 
 /* ─── REGISTER ─── */
 .register {
-  padding: 100px 0;
+	padding: 100px 0;
 }
 
 .register__inner {
-  display: grid;
+	display: grid;
-  grid-template-columns: 1fr minmax(320px, 560px);
+	grid-template-columns: 1fr minmax(320px, 560px);
-  gap: 64px;
+	gap: 64px;
-  align-items: center;
+	align-items: center;
 }
 
 .register__desc {
-  font-size: 1.05rem;
+	font-size: 1.05rem;
-  line-height: 1.75;
+	line-height: 1.75;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  margin-top: 16px;
+	margin-top: 16px;
 }
 
 .register__card {
-  background: var(--white);
+	background: var(--white);
-  border: 1px solid var(--line);
+	border: 1px solid var(--line);
-  border-radius: var(--r-xl);
+	border-radius: var(--r-xl);
-  padding: 44px;
+	padding: 44px;
-  box-shadow: var(--shadow);
+	box-shadow: var(--shadow);
 }
 
 .card-title {
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: 1.5rem;
+	font-size: 1.5rem;
-  letter-spacing: -0.02em;
+	letter-spacing: -0.02em;
-  margin-bottom: 30px;
+	margin-bottom: 30px;
 }
 
 .form-footer {
-  margin-top: 8px;
+	margin-top: 8px;
-  font-size: 0.84rem;
+	font-size: 0.84rem;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
-  text-align: center;
+	text-align: center;
 }
 
 /* ─── RESPONSIVE ─── */
 @media (max-width: 960px) {
-  .hero__inner,
+	.hero__inner,
-  .about__inner,
+	.about__inner,
-  .register__inner {
+	.register__inner {
-    grid-template-columns: 1fr;
+		grid-template-columns: 1fr;
-    gap: 40px;
+		gap: 40px;
-  }
+	}
 
-  .globe-card    { min-height: 360px; }
+	.globe-card {
-  .mini-globe-wrap { max-width: 260px; }
+		min-height: 360px;
+	}
+	.mini-globe-wrap {
+		max-width: 260px;
+	}
 }
 
 @media (max-width: 680px) {
-  .hero          { padding: 50px 0 40px; }
+	.hero {
-  .about,
+		padding: 50px 0 40px;
-  .register      { padding: 70px 0; }
+	}
-  .register__card { padding: 28px 22px; }
+	.about,
-  .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) {
-  .hero          { padding: 36px 0 32px; min-height: auto; }
+	.hero {
-  .hero__title   { font-size: 2.6rem; letter-spacing: -0.03em; }
+		padding: 36px 0 32px;
-  .hero__desc    { font-size: 0.95rem; margin-bottom: 28px; }
+		min-height: auto;
-  .globe-card    { padding: 16px; min-height: 240px; }
+	}
-  .globe-badge   { padding: 7px 10px; font-size: 0.72rem; }
+	.hero__title {
-  .about,
+		font-size: 2.6rem;
-  .register      { padding: 52px 0; }
+		letter-spacing: -0.03em;
-  .about__desc   { font-size: 0.95rem; }
+	}
-  .step          { padding: 16px 18px; gap: 14px; }
+	.hero__desc {
-  .step__num     { width: 46px; height: 46px; font-size: 0.88rem; border-radius: 12px; }
+		font-size: 0.95rem;
-  .register__card { padding: 22px 16px; border-radius: var(--r-lg); }
+		margin-bottom: 28px;
-  .card-title    { font-size: 1.25rem; margin-bottom: 22px; }
+	}
-  .btn--full     { padding: 14px 18px; font-size: 0.95rem; }
+	.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;
+	}
 }

frontend/styles/leader.css

@@ -1,193 +1,247 @@
 /* leader.css — leaderboard page styles */
 
 .lb-page {
-  min-height: calc(100vh - var(--hh));
+	min-height: calc(100vh - var(--hh));
-  padding: 60px 0;
+	padding: 60px 0;
 }
 
 .lb-inner {
-  max-width: 760px;
+	max-width: 760px;
-  margin: 0 auto;
+	margin: 0 auto;
 }
 
 .lb-head {
-  display: flex;
+	display: flex;
-  align-items: flex-end;
+	align-items: flex-end;
-  justify-content: space-between;
+	justify-content: space-between;
-  gap: 20px;
+	gap: 20px;
-  margin-bottom: 32px;
+	margin-bottom: 32px;
-  flex-wrap: wrap;
+	flex-wrap: wrap;
 }
 
 .lb-title {
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: clamp(2rem, 5vw, 3.2rem);
+	font-size: clamp(2rem, 5vw, 3.2rem);
-  letter-spacing: -0.03em;
+	letter-spacing: -0.03em;
-  line-height: 1;
+	line-height: 1;
 }
 
 .lb-title em {
-  font-style: normal;
+	font-style: normal;
-  background: linear-gradient(135deg, var(--sea), var(--leaf));
+	background: linear-gradient(135deg, var(--sea), var(--leaf));
-  -webkit-background-clip: text;
+	-webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+	-webkit-text-fill-color: transparent;
-  background-clip: text;
+	background-clip: text;
 }
 
-.lb-actions { display: flex; gap: 10px; flex-wrap: wrap; }
+.lb-actions {
+	display: flex;
+	gap: 10px;
+	flex-wrap: wrap;
+}
 
 /* ─── TABLE ─── */
 .lb-table {
-  background: var(--white);
+	background: var(--white);
-  border: 1px solid var(--line);
+	border: 1px solid var(--line);
-  border-radius: var(--r-xl);
+	border-radius: var(--r-xl);
-  overflow: hidden;
+	overflow: hidden;
-  box-shadow: var(--shadow);
+	box-shadow: var(--shadow);
 }
 
 .lb-table-head {
-  display: grid;
+	display: grid;
-  grid-template-columns: 56px 1fr 90px 90px 90px;
+	grid-template-columns: 56px 1fr 90px 90px 90px;
-  padding: 14px 24px;
+	padding: 14px 24px;
-  background: var(--cream);
+	background: var(--cream);
-  border-bottom: 1px solid var(--line);
+	border-bottom: 1px solid var(--line);
 }
 
 .lb-th {
-  font-size: 0.72rem;
+	font-size: 0.72rem;
-  font-weight: 700;
+	font-weight: 700;
-  letter-spacing: 0.08em;
+	letter-spacing: 0.08em;
-  text-transform: uppercase;
+	text-transform: uppercase;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
 }
 
-.lb-th.right { text-align: right; }
+.lb-th.right {
+	text-align: right;
+}
 
-.lb-body { display: grid; }
+.lb-body {
+	display: grid;
+}
 
 .lb-row {
-  display: grid;
+	display: grid;
-  grid-template-columns: 56px 1fr 90px 90px 90px;
+	grid-template-columns: 56px 1fr 90px 90px 90px;
-  align-items: center;
+	align-items: center;
-  padding: 16px 24px;
+	padding: 16px 24px;
-  border-bottom: 1px solid var(--line);
+	border-bottom: 1px solid var(--line);
-  transition: background 0.15s;
+	transition: background 0.15s;
-  animation: fadeRow 0.4s ease both;
+	animation: fadeRow 0.4s ease both;
 }
 
-.lb-row:last-child { border-bottom: none; }
+.lb-row:last-child {
-.lb-row:hover      { background: var(--cream); }
+	border-bottom: none;
+}
+.lb-row:hover {
+	background: var(--cream);
+}
 
 @keyframes fadeRow {
-  from { opacity: 0; transform: translateY(8px); }
+	from {
-  to   { opacity: 1; transform: translateY(0); }
+		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-1 {
-.lb-row.rank-2 { background: rgba(180, 180, 195, 0.06); }
+	background: rgba(240, 180, 40, 0.07);
-.lb-row.rank-3 { background: rgba(205, 130, 70,  0.05); }
+}
-
+.lb-row.rank-2 {
-.lb-rank {
+	background: rgba(180, 180, 195, 0.06);
-  font-family: "Syne", sans-serif;
+}
-  font-weight: 800;
+.lb-row.rank-3 {
-  font-size: 1rem;
+	background: rgba(205, 130, 70, 0.05);
-  color: var(--ink-muted);
 }
 
-.lb-row.rank-1 .lb-rank { color: var(--gold); }
+.lb-rank {
-.lb-row.rank-2 .lb-rank { color: #a0a0b0; }
+	font-family: "Syne", sans-serif;
-.lb-row.rank-3 .lb-rank { color: #c07840; }
+	font-weight: 800;
+	font-size: 1rem;
+	color: var(--ink-muted);
+}
 
-.lb-medal { font-size: 1.1rem; }
+.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-name {
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 700;
+	font-weight: 700;
-  font-size: 0.96rem;
+	font-size: 0.96rem;
-  color: var(--ink);
+	color: var(--ink);
-  overflow: hidden;
+	overflow: hidden;
-  text-overflow: ellipsis;
+	text-overflow: ellipsis;
-  white-space: nowrap;
+	white-space: nowrap;
 }
 
 .lb-name.is-you::after {
-  content: " (you)";
+	content: " (you)";
-  font-weight: 400;
+	font-weight: 400;
-  font-family: "DM Sans", sans-serif;
+	font-family: "DM Sans", sans-serif;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
-  font-size: 0.8rem;
+	font-size: 0.8rem;
 }
 
 .lb-rounds {
-  font-size: 0.82rem;
+	font-size: 0.82rem;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
-  text-align: right;
+	text-align: right;
 }
 
 .lb-date {
-  font-size: 0.78rem;
+	font-size: 0.78rem;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
-  text-align: right;
+	text-align: right;
 }
 
 .lb-score {
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: 1.05rem;
+	font-size: 1.05rem;
-  color: var(--sea);
+	color: var(--sea);
-  text-align: right;
+	text-align: right;
 }
 
-.lb-score.gold   { color: var(--gold); }
+.lb-score.gold {
-.lb-score.silver { color: #888898; }
+	color: var(--gold);
-.lb-score.bronze { color: #c07840; }
+}
+.lb-score.silver {
+	color: #888898;
+}
+.lb-score.bronze {
+	color: #c07840;
+}
 
 /* ─── EMPTY STATE ─── */
 .lb-empty {
-  padding: 64px 24px;
+	padding: 64px 24px;
-  text-align: center;
+	text-align: center;
 }
 
-.lb-empty__icon { font-size: 3rem; margin-bottom: 12px; }
+.lb-empty__icon {
+	font-size: 3rem;
+	margin-bottom: 12px;
+}
 
 .lb-empty__text {
-  font-size: 1rem;
+	font-size: 1rem;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  margin-bottom: 20px;
+	margin-bottom: 20px;
 }
 
 /* ─── CURRENT PLAYER BAR ─── */
 .your-score-bar {
-  margin-top: 20px;
+	margin-top: 20px;
-  padding: 16px 24px;
+	padding: 16px 24px;
-  background: linear-gradient(135deg, var(--sea-dim), var(--leaf-dim));
+	background: linear-gradient(135deg, var(--sea-dim), var(--leaf-dim));
-  border: 1px solid rgba(26, 127, 196, 0.18);
+	border: 1px solid rgba(26, 127, 196, 0.18);
-  border-radius: var(--r-lg);
+	border-radius: var(--r-lg);
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  justify-content: space-between;
+	justify-content: space-between;
-  gap: 16px;
+	gap: 16px;
-  flex-wrap: wrap;
+	flex-wrap: wrap;
 }
 
-.your-score-bar__text { font-size: 0.9rem; color: var(--ink-soft); }
+.your-score-bar__text {
-.your-score-bar__text strong { color: var(--ink); }
+	font-size: 0.9rem;
+	color: var(--ink-soft);
+}
+.your-score-bar__text strong {
+	color: var(--ink);
+}
 
 /* ─── RESPONSIVE ─── */
 @media (max-width: 640px) {
-  .lb-page { padding: 40px 0; }
+	.lb-page {
+		padding: 40px 0;
+	}
 
-  .lb-table-head,
+	.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-rounds,
-  .lb-date { display: none; }
+	.lb-date {
+		display: none;
+	}
 }
 
 @media (max-width: 360px) {
-  .lb-table-head,
+	.lb-table-head,
-  .lb-row { padding: 12px 16px; }
+	.lb-row {
+		padding: 12px 16px;
+	}
 }

frontend/styles/lobby.css

@@ -1,160 +1,180 @@
 /* lobby.css */
 
 .lobby {
-  min-height: calc(100vh - var(--hh));
+	min-height: calc(100vh - var(--hh));
-  display: grid;
+	display: grid;
-  place-items: center;
+	place-items: center;
-  padding: 60px 0;
+	padding: 60px 0;
 }
 
 .lobby__inner {
-  display: grid;
+	display: grid;
-  grid-template-columns: 1fr minmax(300px, 480px);
+	grid-template-columns: 1fr minmax(300px, 480px);
-  gap: 64px;
+	gap: 64px;
-  align-items: center;
+	align-items: center;
-  width: 100%;
+	width: 100%;
 }
 
 /* ─── Lobby name badge ─── */
 .lobby__name-badge {
-  display: inline-flex;
+	display: inline-flex;
-  align-items: center;
+	align-items: center;
-  gap: 8px;
+	gap: 8px;
-  padding: 10px 18px;
+	padding: 10px 18px;
-  border-radius: var(--r-lg);
+	border-radius: var(--r-lg);
-  background: var(--glass);
+	background: var(--glass);
-  border: 1px solid rgba(255,255,255,.9);
+	border: 1px solid rgba(255, 255, 255, 0.9);
-  box-shadow: var(--shadow-sm);
+	box-shadow: var(--shadow-sm);
-  backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
-  margin-bottom: 20px;
+	margin-bottom: 20px;
 }
 
-.lobby__name-icon { font-size: 1.1rem; }
+.lobby__name-icon {
+	font-size: 1.1rem;
+}
 
 #lobby-name-display {
-  font-family: 'Syne', sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 700;
+	font-weight: 700;
-  font-size: 1rem;
+	font-size: 1rem;
-  color: var(--ink);
+	color: var(--ink);
-  letter-spacing: -.01em;
+	letter-spacing: -0.01em;
 }
 
-/* Left side promo */
+/* ─── EYEBROW ─── */
-.lobby__promo {}
-
 .eyebrow {
-  display: inline-flex;
+	display: inline-flex;
-  align-items: center;
+	align-items: center;
-  gap: 8px;
+	gap: 8px;
-  padding: 6px 14px 6px 10px;
+	padding: 6px 14px 6px 10px;
-  border-radius: 999px;
+	border-radius: 999px;
-  border: 1px solid var(--leaf-dim);
+	border: 1px solid var(--leaf-dim);
-  background: rgba(65,184,105,.08);
+	background: rgba(65, 184, 105, 0.08);
-  color: #289149;
+	color: #289149;
-  font-size: .78rem;
+	font-size: 0.78rem;
-  font-weight: 600;
+	font-weight: 600;
-  letter-spacing: .05em;
+	letter-spacing: 0.05em;
-  text-transform: uppercase;
+	text-transform: uppercase;
-  margin-bottom: 22px;
+	margin-bottom: 22px;
 }
 
 .eyebrow__dot {
-  width: 7px;
+	width: 7px;
-  height: 7px;
+	height: 7px;
-  border-radius: 50%;
+	border-radius: 50%;
-  background: var(--leaf);
+	background: var(--leaf);
-  animation: pulse 2s ease-in-out infinite;
+	animation: pulse 2s ease-in-out infinite;
 }
 
 @keyframes pulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
+	0%,
-  50%       { transform: scale(1.45); opacity: .7; }
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	50% {
+		transform: scale(1.45);
+		opacity: 0.7;
+	}
 }
 
 .lobby__title {
-  font-family: 'Syne', sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: clamp(2.8rem, 5.5vw, 5rem);
+	font-size: clamp(2.8rem, 5.5vw, 5rem);
-  line-height: .94;
+	line-height: 0.94;
-  letter-spacing: -.04em;
+	letter-spacing: -0.04em;
-  margin-bottom: 20px;
+	margin-bottom: 20px;
 }
 
 .lobby__title em {
-  font-style: normal;
+	font-style: normal;
-  background: linear-gradient(135deg, var(--sea), var(--leaf));
+	background: linear-gradient(135deg, var(--sea), var(--leaf));
-  -webkit-background-clip: text;
+	-webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+	-webkit-text-fill-color: transparent;
-  background-clip: text;
+	background-clip: text;
 }
 
 .lobby__desc {
-  font-size: 1.02rem;
+	font-size: 1.02rem;
-  line-height: 1.72;
+	line-height: 1.72;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  max-width: 420px;
+	max-width: 420px;
-  margin-bottom: 32px;
+	margin-bottom: 32px;
 }
 
 .lobby__badges {
-  display: flex;
+	display: flex;
-  flex-wrap: wrap;
+	flex-wrap: wrap;
-  gap: 10px;
+	gap: 10px;
 }
 
 .badge {
-  display: inline-flex;
+	display: inline-flex;
-  align-items: center;
+	align-items: center;
-  gap: 6px;
+	gap: 6px;
-  padding: 8px 14px;
+	padding: 8px 14px;
-  border-radius: 999px;
+	border-radius: 999px;
-  background: var(--glass);
+	background: var(--glass);
-  border: 1px solid rgba(255,255,255,.9);
+	border: 1px solid rgba(255, 255, 255, 0.9);
-  box-shadow: var(--shadow-sm);
+	box-shadow: var(--shadow-sm);
-  font-size: .82rem;
+	font-size: 0.82rem;
-  font-weight: 600;
+	font-weight: 600;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  backdrop-filter: blur(8px);
+	backdrop-filter: blur(8px);
 }
 
-.badge__icon { font-size: 1rem; }
+.badge__icon {
+	font-size: 1rem;
+}
 
 /* Right side card */
 .lobby__card {
-  background: var(--white);
+	background: var(--white);
-  border: 1px solid var(--line);
+	border: 1px solid var(--line);
-  border-radius: var(--r-xl);
+	border-radius: var(--r-xl);
-  padding: 44px;
+	padding: 44px;
-  box-shadow: var(--shadow);
+	box-shadow: var(--shadow);
 }
 
 .lobby__card-title {
-  font-family: 'Syne', sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: 1.5rem;
+	font-size: 1.5rem;
-  letter-spacing: -.02em;
+	letter-spacing: -0.02em;
-  margin-bottom: 8px;
+	margin-bottom: 8px;
 }
 
 .lobby__card-sub {
-  font-size: .9rem;
+	font-size: 0.9rem;
-  color: var(--ink-muted);
+	color: var(--ink-muted);
-  margin-bottom: 30px;
+	margin-bottom: 30px;
 }
 
 /* Form and field styles are defined in main.css */
 
 /* ─── 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 {
-  .lobby__card { padding: 28px 22px; }
+		padding: 44px 0;
+	}
+	.lobby__card {
+		padding: 28px 22px;
+	}
 }
 
 @media (max-width: 360px) {
-  .lobby__card { padding: 22px 16px; }
+	.lobby__card {
-  .lobby__title { font-size: 2.4rem; }
+		padding: 22px 16px;
+	}
+	.lobby__title {
+		font-size: 2.4rem;
+	}
 }

frontend/styles/main.css

@@ -1,78 +1,107 @@
 /* main.css — shared design tokens & base */
 
-@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');
+@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");
 
 :root {
-  --ink:       #0b1f2a;
+	--ink: #0b1f2a;
-  --ink-soft:  #3d5563;
+	--ink-soft: #3d5563;
-  --ink-muted: #7a9aaa;
+	--ink-muted: #7a9aaa;
-  --sea:       #1a7fc4;
+	--sea: #1a7fc4;
-  --sea-light: #4faae0;
+	--sea-light: #4faae0;
-  --sea-dim:   rgba(26,127,196,.12);
+	--sea-dim: rgba(26, 127, 196, 0.12);
-  --leaf:      #41b869;
+	--leaf: #41b869;
-  --leaf-dim:  rgba(65,184,105,.13);
+	--leaf-dim: rgba(65, 184, 105, 0.13);
-  --gold:      #f0b429;
+	--gold: #f0b429;
-  --danger:    #e05c5c;
+	--danger: #e05c5c;
-  --cream:     #f4f9f6;
+	--cream: #f4f9f6;
-  --white:     #ffffff;
+	--white: #ffffff;
-  --glass:     rgba(255,255,255,.72);
+	--glass: rgba(255, 255, 255, 0.72);
-  --line:      rgba(11,31,42,.09);
+	--line: rgba(11, 31, 42, 0.09);
-  --shadow:    0 24px 60px rgba(11,31,42,.10);
+	--shadow: 0 24px 60px rgba(11, 31, 42, 0.1);
-  --shadow-sm: 0 4px 20px rgba(11,31,42,.07);
+	--shadow-sm: 0 4px 20px rgba(11, 31, 42, 0.07);
-  --r-xl:      32px;
+	--r-xl: 32px;
-  --r-lg:      22px;
+	--r-lg: 22px;
-  --r-md:      14px;
+	--r-md: 14px;
-  --r-sm:      8px;
+	--r-sm: 8px;
-  --hh:        72px;
+	--hh: 72px;
 }
 
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
 
-html { scroll-behavior: smooth; }
+html {
+	scroll-behavior: smooth;
+}
 
 body {
-  font-family: 'DM Sans', sans-serif;
+	font-family: "DM Sans", sans-serif;
-  color: var(--ink);
+	color: var(--ink);
-  background: var(--cream);
+	background: var(--cream);
-  overflow-x: hidden;
+	overflow-x: hidden;
-  position: relative;
+	position: relative;
-  min-width: 320px;
+	min-width: 320px;
 }
 
 body::before {
-  content: '';
+	content: "";
-  position: fixed;
+	position: fixed;
-  inset: 0;
+	inset: 0;
-  background:
+	background:
-    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(65,184,105,.10) 0%, transparent 60%),
+		radial-gradient(
-    radial-gradient(ellipse 50% 60% at 90% 100%, rgba(26,127,196,.10) 0%, transparent 60%);
+			ellipse 60% 50% at 10% 0%,
-  pointer-events: none;
+			rgba(65, 184, 105, 0.1) 0%,
-  z-index: 0;
+			transparent 60%
+		),
+		radial-gradient(
+			ellipse 50% 60% at 90% 100%,
+			rgba(26, 127, 196, 0.1) 0%,
+			transparent 60%
+		);
+	pointer-events: none;
+	z-index: 0;
 }
 
 body::after {
-  content: '';
+	content: "";
-  position: fixed;
+	position: fixed;
-  inset: 0;
+	inset: 0;
-  background-image:
+	background-image:
-    linear-gradient(var(--line) 1px, transparent 1px),
+		linear-gradient(var(--line) 1px, transparent 1px),
-    linear-gradient(90deg, var(--line) 1px, transparent 1px);
+		linear-gradient(90deg, var(--line) 1px, transparent 1px);
-  background-size: 60px 60px;
+	background-size: 60px 60px;
-  pointer-events: none;
+	pointer-events: none;
-  z-index: 0;
+	z-index: 0;
 }
 
-a { color: inherit; text-decoration: none; }
+a {
-img, svg { display: block; max-width: 100%; }
+	color: inherit;
-button, input { font: inherit; }
+	text-decoration: none;
+}
+img,
+svg {
+	display: block;
+	max-width: 100%;
+}
+button,
+input {
+	font: inherit;
+}
 
-.wrap { position: relative; z-index: 1; }
+.wrap {
+	position: relative;
+	z-index: 1;
+}
 
 .container {
-  width: 100%;
+	width: 100%;
-  max-width: 1280px;
+	max-width: 1280px;
-  margin: 0 auto;
+	margin: 0 auto;
-  padding: 0 28px;
+	padding: 0 28px;
 }
 
 .header {
@@ -166,135 +195,174 @@ button, input { font: inherit; }
 	transform: translateY(-1px);
 }
 
-
 /* ─── BUTTONS ─── */
 .btn {
-  display: inline-flex;
+	display: inline-flex;
-  align-items: center;
+	align-items: center;
-  justify-content: center;
+	justify-content: center;
-  gap: 8px;
+	gap: 8px;
-  padding: 15px 28px;
+	padding: 15px 28px;
-  border-radius: var(--r-lg);
+	border-radius: var(--r-lg);
-  font-family: 'DM Sans', sans-serif;
+	font-family: "DM Sans", sans-serif;
-  font-size: 1rem;
+	font-size: 1rem;
-  font-weight: 600;
+	font-weight: 600;
-  border: none;
+	border: none;
-  cursor: pointer;
+	cursor: pointer;
-  transition: transform .2s, box-shadow .2s, opacity .2s;
+	transition:
-  line-height: 1;
+		transform 0.2s,
+		box-shadow 0.2s,
+		opacity 0.2s;
+	line-height: 1;
 }
 
-.btn:hover:not(:disabled) { transform: translateY(-2px); }
+.btn:hover:not(:disabled) {
-.btn:disabled { opacity: .45; cursor: not-allowed; }
+	transform: translateY(-2px);
+}
+.btn:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
 
 .btn--primary {
-  color: var(--white);
+	color: var(--white);
-  background: linear-gradient(135deg, var(--sea) 0%, #159fd4 50%, var(--leaf) 100%);
+	background: linear-gradient(
-  background-size: 200% 200%;
+		135deg,
-  box-shadow: 0 8px 24px rgba(26,127,196,.28);
+		var(--sea) 0%,
-  animation: gradShift 4s ease infinite;
+		#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;
 }
 
-.btn--primary:hover:not(:disabled) { box-shadow: 0 12px 32px rgba(26,127,196,.4); }
+.btn--primary:hover:not(:disabled) {
+	box-shadow: 0 12px 32px rgba(26, 127, 196, 0.4);
+}
 
 @keyframes gradShift {
-  0%   { background-position: 0% 50%; }
+	0% {
-  50%  { background-position: 100% 50%; }
+		background-position: 0% 50%;
-  100% { background-position: 0% 50%; }
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
 }
 
 .btn--ghost {
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  background: transparent;
+	background: transparent;
-  border: 1.5px solid var(--line);
+	border: 1.5px solid var(--line);
 }
 
-.btn--ghost:hover:not(:disabled) { border-color: var(--ink-muted); color: var(--ink); }
+.btn--ghost:hover:not(:disabled) {
+	border-color: var(--ink-muted);
+	color: var(--ink);
+}
 
 .btn--danger {
-  color: var(--white);
+	color: var(--white);
-  background: var(--danger);
+	background: var(--danger);
-  box-shadow: 0 6px 18px rgba(224,92,92,.25);
+	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: .88rem; border-radius: var(--r-md); }
+.btn--sm {
+	padding: 10px 20px;
+	font-size: 0.88rem;
+	border-radius: var(--r-md);
+}
 
 /* ─── CARD ─── */
 .card {
-  background: var(--glass);
+	background: var(--glass);
-  backdrop-filter: blur(12px);
+	backdrop-filter: blur(12px);
-  border: 1px solid rgba(255,255,255,.8);
+	border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: var(--r-xl);
+	border-radius: var(--r-xl);
-  box-shadow: var(--shadow);
+	box-shadow: var(--shadow);
 }
 
 /* ─── SECTION LABELS ─── */
 .section-label {
-  display: inline-block;
+	display: inline-block;
-  padding: 5px 13px;
+	padding: 5px 13px;
-  border-radius: 999px;
+	border-radius: 999px;
-  background: var(--sea-dim);
+	background: var(--sea-dim);
-  color: var(--sea);
+	color: var(--sea);
-  font-size: .78rem;
+	font-size: 0.78rem;
-  font-weight: 600;
+	font-weight: 600;
-  letter-spacing: .06em;
+	letter-spacing: 0.06em;
-  text-transform: uppercase;
+	text-transform: uppercase;
-  margin-bottom: 16px;
+	margin-bottom: 16px;
 }
 
 .section-title {
-  font-family: 'Syne', sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: clamp(2rem, 4vw, 3.6rem);
+	font-size: clamp(2rem, 4vw, 3.6rem);
-  line-height: 1.04;
+	line-height: 1.04;
-  letter-spacing: -.03em;
+	letter-spacing: -0.03em;
-  margin-bottom: 16px;
+	margin-bottom: 16px;
 }
 
 /* ─── FORM ─── */
-.form { display: grid; gap: 20px; }
+.form {
+	display: grid;
+	gap: 20px;
+}
 
-.field { display: grid; gap: 8px; }
+.field {
+	display: grid;
+	gap: 8px;
+}
 
 .field label {
-  font-size: 0.84rem;
+	font-size: 0.84rem;
-  font-weight: 600;
+	font-weight: 600;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  letter-spacing: 0.02em;
+	letter-spacing: 0.02em;
 }
 
 .field input {
-  width: 100%;
+	width: 100%;
-  height: 54px;
+	height: 54px;
-  padding: 0 18px;
+	padding: 0 18px;
-  border: 1.5px solid var(--line);
+	border: 1.5px solid var(--line);
-  border-radius: var(--r-md);
+	border-radius: var(--r-md);
-  background: var(--cream);
+	background: var(--cream);
-  color: var(--ink);
+	color: var(--ink);
-  font-size: 0.98rem;
+	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;
+	outline: none;
-  border-color: var(--sea-light);
+	border-color: var(--sea-light);
-  box-shadow: 0 0 0 3px rgba(26, 127, 196, 0.12);
+	box-shadow: 0 0 0 3px rgba(26, 127, 196, 0.12);
-  background: var(--white);
+	background: var(--white);
 }
 
 .field input.input--error {
-  border-color: var(--danger);
+	border-color: var(--danger);
-  box-shadow: 0 0 0 3px rgba(224, 92, 92, 0.12);
+	box-shadow: 0 0 0 3px rgba(224, 92, 92, 0.12);
 }
 
 .field-error {
-  font-size: 0.82rem;
+	font-size: 0.82rem;
-  color: var(--danger);
+	color: var(--danger);
-  min-height: 1.2em;
+	min-height: 1.2em;
 }
 
 /* ─── FOOTER ─── */
@@ -329,7 +397,6 @@ button, input { font: inherit; }
 	text-align: center;
 }
 
-
 .footer__label {
 	font-size: 0.7rem;
 	font-weight: 700;
@@ -359,30 +426,88 @@ button, input { font: inherit; }
 
 /* ─── SCROLL REVEAL ─── */
 .reveal {
-  opacity: 0;
+	opacity: 0;
-  transform: translateY(24px);
+	transform: translateY(24px);
-  transition: opacity .55s ease, transform .55s ease;
+	transition:
+		opacity 0.55s ease,
+		transform 0.55s ease;
 }
 
-.reveal.visible { opacity: 1; transform: translateY(0); }
+.reveal.visible {
-.reveal-delay-1 { transition-delay: .1s; }
+	opacity: 1;
-.reveal-delay-2 { transition-delay: .2s; }
+	transform: translateY(0);
-.reveal-delay-3 { transition-delay: .32s; }
+}
+.reveal-delay-1 {
+	transition-delay: 0.1s;
+}
+.reveal-delay-2 {
+	transition-delay: 0.2s;
+}
+.reveal-delay-3 {
+	transition-delay: 0.32s;
+}
+
+/* ─── NOSCRIPT ─── */
+.noscript-msg {
+	padding: 1.5rem 2rem;
+	background: var(--danger);
+	color: var(--white);
+	font-weight: 600;
+	text-align: center;
+}
+
+/* ─── REDUCED MOTION ─── */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+	}
+}
 
 /* ─── RESPONSIVE BASE ─── */
 @media (max-width: 680px) {
-  .container { padding: 0 18px; }
+	.container {
-  .nav__link { display: none; }
+		padding: 0 18px;
-  .footer__inner { grid-template-columns: 1fr; }
+	}
-  .footer__center, .footer__right { justify-self: start; text-align: left; }
+	.nav__link {
-  .socials { justify-content: flex-start; }
+		display: none;
-  .footer__right { justify-content: flex-start; }
+	}
+	.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;
+	}
 }
 
 @media (max-width: 360px) {
-  :root { --r-xl: 22px; --r-lg: 16px; }
+	:root {
-  .container { padding: 0 14px; }
+		--r-xl: 22px;
-  .logo__mark { width: 34px; height: 34px; }
+		--r-lg: 16px;
-  .logo__text { font-size: 1.05rem; }
+	}
-  .nav__cta { padding: 7px 12px; font-size: .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;
+	}
 }

frontend/styles/results.css

@@ -1,196 +1,230 @@
 /* results.css — results page styles */
 
 .results-page {
-  min-height: calc(100vh - var(--hh));
+	min-height: calc(100vh - var(--hh));
-  display: grid;
+	display: grid;
-  place-items: center;
+	place-items: center;
-  padding: 60px 0;
+	padding: 60px 0;
 }
 
 .results-inner {
-  width: 100%;
+	width: 100%;
-  max-width: 680px;
+	max-width: 680px;
-  display: grid;
+	display: grid;
-  gap: 24px;
+	gap: 24px;
 }
 
 /* ─── HEADER ─── */
 .results-header {
-  text-align: center;
+	text-align: center;
 }
 
 .results-emoji {
-  font-size: 3.5rem;
+	font-size: 3.5rem;
-  margin-bottom: 16px;
+	margin-bottom: 16px;
-  display: block;
+	display: block;
-  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+	animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
 @keyframes popIn {
-  from { transform: scale(0); opacity: 0; }
+	from {
-  to   { transform: scale(1); opacity: 1; }
+		transform: scale(0);
+		opacity: 0;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
 }
 
 .results-title {
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: clamp(2rem, 5vw, 3.4rem);
+	font-size: clamp(2rem, 5vw, 3.4rem);
-  letter-spacing: -0.03em;
+	letter-spacing: -0.03em;
-  line-height: 1.05;
+	line-height: 1.05;
-  margin-bottom: 8px;
+	margin-bottom: 8px;
 }
 
 .results-player {
-  font-size: 1rem;
+	font-size: 1rem;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
 }
 
-.results-player strong { color: var(--ink); }
+.results-player strong {
+	color: var(--ink);
+}
 
 /* ─── TOTAL SCORE ─── */
 .score-total-card {
-  background: linear-gradient(135deg, var(--sea) 0%, #159fd4 50%, var(--leaf) 100%);
+	background: linear-gradient(
-  border-radius: var(--r-xl);
+		135deg,
-  padding: 36px 40px;
+		var(--sea) 0%,
-  text-align: center;
+		#159fd4 50%,
-  color: var(--white);
+		var(--leaf) 100%
-  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;
+	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;
 }
 
 @keyframes slideUp {
-  from { transform: translateY(30px); opacity: 0; }
+	from {
-  to   { transform: translateY(0);    opacity: 1; }
+		transform: translateY(30px);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
 }
 
 .score-total-label {
-  font-size: 0.78rem;
+	font-size: 0.78rem;
-  font-weight: 700;
+	font-weight: 700;
-  letter-spacing: 0.1em;
+	letter-spacing: 0.1em;
-  text-transform: uppercase;
+	text-transform: uppercase;
-  opacity: 0.78;
+	opacity: 0.78;
-  margin-bottom: 8px;
+	margin-bottom: 8px;
 }
 
 .score-total-num {
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: clamp(4rem, 10vw, 6rem);
+	font-size: clamp(4rem, 10vw, 6rem);
-  line-height: 1;
+	line-height: 1;
-  letter-spacing: -0.04em;
+	letter-spacing: -0.04em;
 }
 
 .score-total-max {
-  font-size: 1.4rem;
+	font-size: 1.4rem;
-  opacity: 0.6;
+	opacity: 0.6;
-  font-weight: 400;
+	font-weight: 400;
 }
 
 .score-grade {
-  display: inline-block;
+	display: inline-block;
-  margin-top: 12px;
+	margin-top: 12px;
-  padding: 4px 18px;
+	padding: 4px 18px;
-  border-radius: 999px;
+	border-radius: 999px;
-  background: rgba(255, 255, 255, 0.22);
+	background: rgba(255, 255, 255, 0.22);
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: 1.1rem;
+	font-size: 1.1rem;
-  letter-spacing: 0.04em;
+	letter-spacing: 0.04em;
 }
 
 /* ─── ROUND BREAKDOWN ─── */
 .rounds-card {
-  background: var(--white);
+	background: var(--white);
-  border: 1px solid var(--line);
+	border: 1px solid var(--line);
-  border-radius: var(--r-xl);
+	border-radius: var(--r-xl);
-  padding: 28px 32px;
+	padding: 28px 32px;
-  box-shadow: var(--shadow-sm);
+	box-shadow: var(--shadow-sm);
-  animation: slideUp 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+	animation: slideUp 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
 .rounds-card-title {
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 700;
+	font-weight: 700;
-  font-size: 1rem;
+	font-size: 1rem;
-  letter-spacing: -0.01em;
+	letter-spacing: -0.01em;
-  margin-bottom: 20px;
+	margin-bottom: 20px;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
 }
 
-.round-rows { display: grid; gap: 14px; }
+.round-rows {
+	display: grid;
+	gap: 14px;
+}
 
 .round-row {
-  display: grid;
+	display: grid;
-  grid-template-columns: auto 1fr auto;
+	grid-template-columns: auto 1fr auto;
-  align-items: center;
+	align-items: center;
-  gap: 16px;
+	gap: 16px;
 }
 
 .round-row__label {
-  font-size: 0.82rem;
+	font-size: 0.82rem;
-  font-weight: 600;
+	font-weight: 600;
-  color: var(--ink-soft);
+	color: var(--ink-soft);
-  white-space: nowrap;
+	white-space: nowrap;
 }
 
 .round-row__bar-wrap {
-  height: 8px;
+	height: 8px;
-  background: var(--cream);
+	background: var(--cream);
-  border-radius: 999px;
+	border-radius: 999px;
-  overflow: hidden;
+	overflow: hidden;
 }
 
 .round-row__bar {
-  height: 100%;
+	height: 100%;
-  border-radius: 999px;
+	border-radius: 999px;
-  background: linear-gradient(90deg, var(--sea), var(--leaf));
+	background: linear-gradient(90deg, var(--sea), var(--leaf));
-  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+	transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .round-row__score {
-  font-family: "Syne", sans-serif;
+	font-family: "Syne", sans-serif;
-  font-weight: 800;
+	font-weight: 800;
-  font-size: 0.9rem;
+	font-size: 0.9rem;
-  color: var(--sea);
+	color: var(--sea);
-  min-width: 36px;
+	min-width: 36px;
-  text-align: right;
+	text-align: right;
 }
 
 /* ─── COUNTRY TAGS ─── */
 .countries-row {
-  display: flex;
+	display: flex;
-  flex-wrap: wrap;
+	flex-wrap: wrap;
-  gap: 8px;
+	gap: 8px;
-  margin-top: 8px;
+	margin-top: 8px;
 }
 
 .country-tag {
-  padding: 5px 12px;
+	padding: 5px 12px;
-  border-radius: 999px;
+	border-radius: 999px;
-  background: var(--sea-dim);
+	background: var(--sea-dim);
-  color: var(--sea);
+	color: var(--sea);
-  font-size: 0.8rem;
+	font-size: 0.8rem;
-  font-weight: 600;
+	font-weight: 600;
 }
 
 /* ─── ACTIONS ─── */
 .results-actions {
-  display: flex;
+	display: flex;
-  gap: 12px;
+	gap: 12px;
-  flex-wrap: wrap;
+	flex-wrap: wrap;
-  animation: slideUp 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+	animation: slideUp 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 ─── */
 @media (max-width: 600px) {
-  .results-page       { padding: 40px 0; }
+	.results-page {
-  .score-total-card   { padding: 28px 24px; }
+		padding: 40px 0;
-  .rounds-card        { padding: 22px 20px; }
+	}
-  .results-actions .btn { flex-basis: 100%; }
+	.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;
+	}
 }