From 4be851a591f2d259771a0df43e4abac2aad5458c Mon Sep 17 00:00:00 2001
From: Vick Scarlet <scarlet_vick@outlook.com>
Date: Thu, 13 Aug 2026 16:31:16 +0800
Subject: [PATCH] update: phone style

---
 apps/web/src/Game.css                  |  4 +--
 apps/web/src/components/Talent.css     | 37 ++++++++++++++++----
 apps/web/src/components/TextSvg.tsx    | 37 ++++++++++++++++++++
 apps/web/src/containers/Alloc.css      | 12 ++++---
 apps/web/src/containers/Home.css       | 10 +-----
 apps/web/src/containers/Home.tsx       |  7 ++--
 apps/web/src/containers/Play.css       |  4 +--
 apps/web/src/containers/Summary.css    |  2 +-
 apps/web/src/containers/TalentPick.css |  2 +-
 apps/web/src/containers/TalentPick.tsx |  7 ++--
 apps/web/src/styles/common.css         | 47 +++++++++++++++++++++-----
 11 files changed, 129 insertions(+), 40 deletions(-)
 create mode 100644 apps/web/src/components/TextSvg.tsx

diff --git a/apps/web/src/Game.css b/apps/web/src/Game.css
index 690201f..55d1e92 100644
--- a/apps/web/src/Game.css
+++ b/apps/web/src/Game.css
@@ -13,7 +13,7 @@
     > .section {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: calc(0.5rem * var(--ratio));
         width: 100%;
         padding: 0;
         box-sizing: border-box;
@@ -24,7 +24,7 @@
             align-items: center;
             font-weight: bold;
             width: 100%;
-            height: 2rem;
+            height: calc(2rem * var(--ratio));
             color: var(--base-text-color);
             border: 0.0625rem solid var(--base-text-color);
             border-bottom: 0.1875rem solid var(--color-primary);
diff --git a/apps/web/src/components/Talent.css b/apps/web/src/components/Talent.css
index 1ce7fe5..90f914e 100644
--- a/apps/web/src/components/Talent.css
+++ b/apps/web/src/components/Talent.css
@@ -4,8 +4,8 @@
     justify-content: space-between;
     align-items: center;
     padding: 0 1rem;
-    height: 2rem;
-    font-size: 1rem;
+    height: calc(2rem * var(--ratio));
+    font-size: calc(1rem * var(--ratio-font));
     gap: 1rem;
     color: var(--color);
     background: var(--background, var(--base-background-color));
@@ -17,13 +17,26 @@
     &.selected {
         --color: var(--base-background-color);
         --background: var(--grade-color);
-        &:hover { --background: oklch(from var(--grade-color) calc(l + 0.1) c h); }
+        
+        @media (hover: hover) {
+            &:hover { background: oklch(from var(--grade-color) calc(l + 0.1) c h); }
+        }
+        &:active { 
+            background: oklch(from var(--grade-color) calc(l + 0.1) c h);
+            transition: none;
+        }
+    }
+    @media (hover: hover) {
+        &:hover { background: oklch(from var(--grade-color) calc(l + 0.5) c h); }
+    }
+    &:active { 
+        background: oklch(from var(--grade-color) calc(l + 0.5) c h);
+        transition: none;
     }
-    &:hover { --background: oklch(from var(--grade-color) calc(l + 0.5) c h); }
     .talent-name { font-weight: bold; }
     .talent-description {
         color: oklch(from var(--color) calc(l + 0.1) c h);
-        font-size: 0.85rem;
+        font-size: calc(0.85rem * var(--ratio-font));
         user-select: none;
         &::before { content: '['; margin-right: 0.125rem; }
         &::after { content: ']'; margin-left: 0.125rem; }
@@ -32,8 +45,18 @@
 }
 html[data-theme='dark'] {
     .talent{ 
-        &:hover {--background: oklch(from var(--grade-color) calc(l - 0.5) c h);}
-        &.selected:hover { --background: oklch(from var(--grade-color) calc(l - 0.1) c h);}
+        @media (hover: hover) {
+            &:hover { background: oklch(from var(--grade-color) calc(l - 0.5) c h); }
+            &.selected:hover { background: oklch(from var(--grade-color) calc(l - 0.1) c h); }
+        }
+        &:active { 
+            background: oklch(from var(--grade-color) calc(l - 0.5) c h); 
+            transition: none;
+        }
+        &.selected:active { 
+            background: oklch(from var(--grade-color) calc(l - 0.1) c h);
+            transition: none;
+        }
         .talent-description { color: oklch(from var(--color) calc(l - 0.2) c h); }
     }
 }
\ No newline at end of file
diff --git a/apps/web/src/components/TextSvg.tsx b/apps/web/src/components/TextSvg.tsx
new file mode 100644
index 0000000..2c982b1
--- /dev/null
+++ b/apps/web/src/components/TextSvg.tsx
@@ -0,0 +1,37 @@
+import { useState, useEffect, useRef } from 'react'
+export interface Props {
+    text: string
+    className: string
+}
+
+export function TextSvg({ text, className }: Readonly<Props>) {
+    const [height, setHeight] = useState(0)
+    const [width, setWidth] = useState(0)
+    const textRef = useRef<SVGTextElement>(null)
+    useEffect(() => {
+        if (!textRef.current) return
+        const { width, height } = textRef.current.getBBox()
+        setWidth(width)
+        setHeight(height)
+    }, [text, className, textRef])
+    return (
+        <svg
+            className={className}
+            fill="currentColor"
+            viewBox={`0 0 ${width} ${height}`}
+        >
+            <text
+                ref={textRef}
+                fontSize={10}
+                style={{
+                    transform: 'translate(50%,50%)',
+                    textAnchor: 'middle',
+                    dominantBaseline: 'central',
+                }}
+            >
+                {text}
+            </text>
+        </svg>
+    )
+}
+export default TextSvg
diff --git a/apps/web/src/containers/Alloc.css b/apps/web/src/containers/Alloc.css
index d7956df..a3f59e5 100644
--- a/apps/web/src/containers/Alloc.css
+++ b/apps/web/src/containers/Alloc.css
@@ -8,7 +8,7 @@
     .allocation-input {
         display: flex;
         gap: 0;
-        height: 2rem;
+        height: calc(2rem * var(--ratio));
         border: 0.0625rem solid var(--grade-color);
         color: var(--grade-color);
         box-sizing: border-box;
@@ -46,11 +46,12 @@
         left: 0;
         transform: translateY(-100%);
         margin: 0;
+        font-size: calc(1rem * var(--ratio-font));
         li {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            height: 2rem;
+            height: calc(2rem * var(--ratio));
             padding: 0 0.5rem;
             gap: 0.5rem;
         }
@@ -67,6 +68,7 @@
         margin: 0;
         list-style: none;
         width: 100%;
+        font-size: calc(1rem * var(--ratio-font));
         > li {
             flex: 1 0;
             display: flex;
@@ -77,7 +79,7 @@
             gap: 0;
             > span {
                 width: 100%;
-                height: 2rem;
+                height: calc(2rem * var(--ratio));
                 color: var(--base-background-color);
                 background: var(--grade-color);
                 border: 0.0625rem solid var(--grade-color);
@@ -100,8 +102,8 @@
             > button {
                 --style-color: var(--left-color);
                 flex: 1;
-                font-size: 1rem;
-                height: 2rem;
+                font-size: calc(1rem * var(--ratio-font));
+                height: calc(2rem * var(--ratio));
                 width: 6rem;
                 padding: 0;
             }
diff --git a/apps/web/src/containers/Home.css b/apps/web/src/containers/Home.css
index e06b661..dd73cff 100644
--- a/apps/web/src/containers/Home.css
+++ b/apps/web/src/containers/Home.css
@@ -5,15 +5,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        h1 {
-            font-size: 4rem;
-            margin: 0;
-            font-weight: bold;
-        }
-        h2 {
-            font-size: 2rem;
-            margin: 0;
-        }
+        .main { font-weight: bold; }
     }
     .theme-toggle-btn {
         position: fixed;
diff --git a/apps/web/src/containers/Home.tsx b/apps/web/src/containers/Home.tsx
index 1093dca..2cb1d70 100644
--- a/apps/web/src/containers/Home.tsx
+++ b/apps/web/src/containers/Home.tsx
@@ -1,4 +1,5 @@
 import { useRemake } from '@remake/hooks'
+import { TextSvg } from '@/components/TextSvg'
 import { ThemeToggle } from '@/components/ThemeToggle'
 import './Home.css'
 
@@ -7,10 +8,10 @@ export default function Home() {
     return (
         <div className="screen home">
             <div className="title">
-                <h1>人生重开模拟器</h1>
-                <h2>这垃圾人生一秒也不想待了</h2>
+                <TextSvg text="人生重开模拟器" className="main" />
+                <TextSvg text="这垃圾人生一秒也不想待了" className="sub" />
             </div>
-            <button className="primary" onClick={remake}>
+            <button className="primary focus" onClick={remake}>
                 立即重开
             </button>
             <ThemeToggle />
diff --git a/apps/web/src/containers/Play.css b/apps/web/src/containers/Play.css
index c519975..597e5b0 100644
--- a/apps/web/src/containers/Play.css
+++ b/apps/web/src/containers/Play.css
@@ -107,8 +107,8 @@
         > button {
             flex: 1 0;
             min-width: 6rem;
-            font-size: 1.25rem;
-            height: 2.5rem;
+            font-size: calc(1.25rem * var(--ratio-font));
+            height: calc(2.5rem * var(--ratio));
         }
     }
 }
diff --git a/apps/web/src/containers/Summary.css b/apps/web/src/containers/Summary.css
index 366bdf7..c217310 100644
--- a/apps/web/src/containers/Summary.css
+++ b/apps/web/src/containers/Summary.css
@@ -37,7 +37,7 @@
     ul.talent-list {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: calc(0.5rem * var(--ratio));
         width: 100%;
     }
 }
diff --git a/apps/web/src/containers/TalentPick.css b/apps/web/src/containers/TalentPick.css
index 323d817..997435c 100644
--- a/apps/web/src/containers/TalentPick.css
+++ b/apps/web/src/containers/TalentPick.css
@@ -7,7 +7,7 @@
     ul.talent-list {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: calc(0.5rem * var(--ratio));
         li {
             display: flex;
             align-items: center;
diff --git a/apps/web/src/containers/TalentPick.tsx b/apps/web/src/containers/TalentPick.tsx
index fc829b3..e7e936c 100644
--- a/apps/web/src/containers/TalentPick.tsx
+++ b/apps/web/src/containers/TalentPick.tsx
@@ -14,8 +14,11 @@ export default function TalentPick() {
     if (!pulled)
         return (
             <div className="screen talent-pick">
-                <button className="primary font-mono" onClick={() => puller()}>
-                    {PullCount}连抽!
+                <button
+                    className="primary font-mono focus"
+                    onClick={() => puller()}
+                >
+                    {PullCount} 连抽!
                 </button>
             </div>
         )
diff --git a/apps/web/src/styles/common.css b/apps/web/src/styles/common.css
index 4345e8f..8c0f3ae 100644
--- a/apps/web/src/styles/common.css
+++ b/apps/web/src/styles/common.css
@@ -1,7 +1,12 @@
+:root {
+    --ratio: 1;
+    --ratio-font: 1;
+    color: var(--base-text-color); 
+}
+
 html { transition: all 0.2s ease-in-out; }
 html[data-theme='light'] { color-scheme: light; }
 html[data-theme='dark'] { color-scheme: dark; }
-:root { color: var(--base-text-color); }
 .hide-scrollbar,
 html {
     overflow-y: auto;
@@ -51,22 +56,42 @@ button {
     box-sizing: border-box;
     border: var(--border-color) 0.0625rem solid;
     background: var(--background-color);
-    font-size: 1.2rem;
+    font-size: calc(1.2rem * var(--ratio-font));
     font-weight: bold;
     padding: 0 1rem;
-    height: 2.5rem;
+    height: calc(2.5rem * var(--ratio));
     display: inline-flex;
     align-items: center;
     justify-content: center;
     user-select: none;
     transition: all 0.2s ease-in-out;
-    &:hover {
-        --background-color: var(--style-color);
-        --text-color: var(--style-background);
+    outline: none;
+    @media (hover: hover) {
+        &:hover {
+            border: var(--style-background) 0.0625rem solid;
+            background: var(--style-color);
+            color: var(--style-background);
+        }
     }
+
+    &:active {
+        border: var(--style-background) 0.0625rem solid;
+        background: var(--style-color);
+        color: var(--style-background);
+        transition: none;
+    }
+
     &.primary { --style-color: var(--color-primary); }
     &.info { --style-color: var(--color-info); }
     &.error { --style-color: var(--color-error); }
+    &.focus {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: calc(3.5rem * var(--ratio));
+        font-size: calc(1.6rem * var(--ratio-font));
+        font-weight: bold;
+    }
 }
 
 ul {
@@ -76,7 +101,7 @@ ul {
 }
 
 input {
-    font-size: 1rem;
+    font-size: calc(1rem * var(--ratio-font));
     padding: 0;
     margin: 0;
     border: none;
@@ -91,4 +116,10 @@ input {
     &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 }
 
-@media (max-width: 32rem) { :root { font-size: 2.88vw; } }
\ No newline at end of file
+@media (max-width: 32rem) { :root { font-size: 2.88vw; } }
+@media screen and (orientation: portrait) and (pointer: coarse) {
+    :root {
+        --ratio: 1.5;
+        --ratio-font: 1.2;
+    }
+}
\ No newline at end of file