feat(tip): improve avatar and payment typography

src/app/tip/tip-screen.module.css

@@ -75,7 +75,7 @@
   min-height: 0;
   flex: 0 1 auto;
   flex-direction: column;
-  margin-top: auto;
+  margin-top: 0;
 }
 
 .headerIdentity {
@@ -89,13 +89,16 @@
 }
 
 .headerAvatar {
-  width: 48px;
-  height: 48px;
+  width: clamp(88px, 22.222vw, 112px);
+  height: clamp(88px, 22.222vw, 112px);
   flex: 0 0 auto;
-  border: 2px solid rgba(255, 255, 255, 0.94);
+  margin-top: -48px;
+  border: 4px solid rgba(255, 255, 255, 0.9);
   border-radius: 999px;
-  background: #f3d3c3;
-  box-shadow: 0 8px 20px rgba(112, 65, 66, 0.16);
+  background: linear-gradient(145deg, #ffbd7c, #ff5d91);
+  box-shadow:
+    0 20px 44px rgba(255, 98, 133, 0.24),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
   overflow: hidden;
 }
 
@@ -105,7 +108,7 @@
   overflow: hidden;
   color: #2a1a1d;
   font-family: var(--font-athelas), Georgia, serif;
-  font-size: clamp(21px, 5.7vw, 27px);
+  font-size: clamp(24px, 6.4vw, 30px);
   font-weight: 760;
   letter-spacing: -0.025em;
   line-height: 1.05;
@@ -117,12 +120,12 @@
 .supportPrompt {
   position: relative;
   z-index: 1;
-  width: min(100%, 340px);
+  width: min(100%, 356px);
   box-sizing: border-box;
   margin: 12px auto 0;
   padding: 0 4px;
   color: #684d51;
-  font-size: clamp(14px, 3.7vw, 15px);
+  font-size: clamp(15.5px, 4.1vw, 17px);
   font-weight: 650;
   line-height: 1.35;
   text-align: center;
@@ -299,7 +302,7 @@
 
 .tierPrice {
   color: #d23f79;
-  font-size: clamp(13px, 3.5vw, 16px);
+  font-size: clamp(15px, 3.9vw, 18px);
   font-weight: 900;
   white-space: nowrap;
 }
@@ -460,7 +463,7 @@
 
   .headerTitle {
     max-width: 200px;
-    font-size: 20px;
+    font-size: 23px;
   }
 
   .productCard {
@@ -480,7 +483,7 @@
   }
 
   .tierPrice {
-    font-size: 13px;
+    font-size: 15px;
   }
 
   .tierCheck {
@@ -501,20 +504,15 @@
     min-height: 44px;
   }
 
-  .headerAvatar {
-    width: 44px;
-    height: 44px;
-  }
-
   .purchaseFlow {
-    gap: 10px;
-    margin-top: 10px;
+    gap: 8px;
+    margin-top: 8px;
   }
 
   .supportPrompt {
     margin-top: 9px;
     padding: 0 3px;
-    font-size: 13.5px;
+    font-size: 15px;
     line-height: 1.35;
   }
 
@@ -544,6 +542,14 @@
 }
 
 @media (max-height: 600px) {
+  .contentFlow {
+    margin-top: auto;
+  }
+
+  .headerAvatar {
+    margin-top: 0;
+  }
+
   .supportPrompt {
     display: -webkit-box;
     overflow: hidden;

src/app/tip/tip-screen.tsx

@@ -222,7 +222,7 @@ export function TipScreen({
                 src={character.assets.avatar}
                 alt={character.displayName}
                 size="100%"
-                imageSize={52}
+                imageSize={88}
                 priority
               />
             </div>