Update UI score display to 1-4 scale

mindcheck-web/src/app/result/page.tsx

@@ -98,9 +98,9 @@ function ResultContent() {
       <>
         <header className="bg-surface border-b border-outline-variant w-full top-0 sticky z-50">
           <div className="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
-            <Link href="/" className="font-hero-lg text-hero-lg font-bold text-primary">MindCheck</Link>
+            <Link href="/" className="text-lg md:text-hero-lg md:font-hero-lg font-bold text-primary">MindCheck</Link>
             <div className="font-section-heading text-section-heading hidden md:block">Screening Results</div>
-            <Link href="/chat" className="px-[20px] py-[12px] bg-transparent border border-primary text-primary rounded hover:bg-surface-container transition-colors">
+            <Link href="/chat" className="text-sm px-3 py-2 md:px-[20px] md:py-[12px] bg-transparent border border-primary text-primary rounded hover:bg-surface-container transition-colors">
               Start Screening
             </Link>
           </div>
@@ -125,9 +125,9 @@ function ResultContent() {
       {/* TopNavBar */}
       <header className="bg-surface border-b border-outline-variant w-full top-0 sticky z-50">
         <div className="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
-          <Link href="/" className="font-hero-lg text-hero-lg font-bold text-primary">MindCheck</Link>
+          <Link href="/" className="text-lg md:text-hero-lg md:font-hero-lg font-bold text-primary">MindCheck</Link>
           <div className="font-section-heading text-section-heading hidden md:block">Screening Results</div>
-          <Link href="/chat" className="px-[20px] py-[12px] bg-transparent border border-primary text-primary rounded hover:bg-surface-container transition-colors">
+          <Link href="/chat" className="text-sm px-3 py-2 md:px-[20px] md:py-[12px] bg-transparent border border-primary text-primary rounded hover:bg-surface-container transition-colors">
             Restart Screening
           </Link>
         </div>
@@ -143,7 +143,7 @@ function ResultContent() {
               <h1 className="font-section-heading text-section-heading text-on-surface">Your Result</h1>
               <div className="flex items-center gap-4 mt-2">
                 <div className="flex items-baseline">
-                  <span className="text-[56px] font-bold text-primary leading-none tracking-tight">
+                  <span className="text-[40px] md:text-[56px] font-bold text-primary leading-none tracking-tight">
                     {Math.round(result.total_score)}
                   </span>
                   <span className="text-2xl text-on-surface-variant ml-1 font-medium">/{maxScore}</span>
@@ -166,17 +166,18 @@ function ResultContent() {
 
             {/* Bar Chart Section */}
             <section
-              className="bg-surface-lowest border-[0.5px] border-outline-variant rounded-lg p-section-padding bg-white"
+              className="bg-surface-lowest border-[0.5px] border-outline-variant rounded-lg p-4 md:p-section-padding bg-white"
               style={{ animation: "fadeSlideIn 0.6s ease-out 0.1s both" }}
             >
               <h2 className="font-body-md text-body-md font-semibold mb-6">Score per question</h2>
               <div className="flex flex-col gap-4">
                 {result.scores.map((score, i) => {
                   const name = result.itemShortNames?.[i] || SHORT_NAMES[i] || `Q${i + 1}`;
-                  const pct = Math.min((score / 3) * 100, 100);
+                  const displayScore = score + 1;
+                  const pct = Math.min((displayScore / 4) * 100, 100);
                   return (
                     <div key={i} className="flex items-center gap-4 group">
-                      <div className="w-[140px] truncate text-on-surface-variant text-sm" title={name}>
+                      <div className="w-[100px] md:w-[140px] truncate text-on-surface-variant text-sm" title={name}>
                         {name}
                       </div>
                       <div className="flex-grow h-2.5 bg-surface-container rounded-full overflow-hidden flex">
@@ -185,8 +186,8 @@ function ResultContent() {
                           style={{ width: `${pct}%`, transitionDelay: `${i * 80}ms` }}
                         />
                       </div>
-                      <div className={`w-6 text-right font-medium ${score === 0 ? "text-outline" : ""}`}>
-                        {score.toFixed(1)}
+                      <div className={`w-6 text-right font-medium ${displayScore === 1 ? "text-outline" : ""}`}>
+                        {displayScore.toFixed(1)}
                       </div>
                     </div>
                   );
@@ -240,7 +241,7 @@ function ResultContent() {
 
             {/* Recommendation Card */}
             <div
-              className="bg-white border-[0.5px] border-outline-variant border-l-4 border-l-primary rounded-lg p-section-padding flex flex-col gap-stack-sm"
+              className="bg-white border-[0.5px] border-outline-variant border-l-4 border-l-primary rounded-lg p-4 md:p-section-padding flex flex-col gap-stack-sm"
               style={{ animation: "fadeSlideIn 0.5s ease-out 0.3s both" }}
             >
               <h3 className="font-body-md text-body-md font-semibold">Recommended Next Steps</h3>