feat: add word import and class type display controls

app/pk/components/GameScreen.tsx

@@ -10,6 +10,7 @@ import { WordImage } from "./WordImage";
 type GameScreenProps = {
   selectedGrade: Grade;
   selectedClassTypeName?: string;
+  showCurrentWord: boolean;
   roundWords: WordItem[];
   currentWord: WordItem;
   options: WordItem[];
@@ -30,6 +31,7 @@ type GameScreenProps = {
 export function GameScreen({
   selectedGrade,
   selectedClassTypeName,
+  showCurrentWord,
   roundWords,
   currentWord,
   options,
@@ -83,8 +85,13 @@ export function GameScreen({
           </p>
         </div>
 
-        <div className="pk-game-grid grid gap-[clamp(18px,3vw,34px)] lg:grid-cols-[minmax(300px,0.9fr)_minmax(420px,1.25fr)]">
-          <div className="flex min-w-0 flex-col">
+        <div
+          className={cn(
+            "pk-game-grid grid items-center gap-[clamp(18px,3vw,34px)] lg:grid-cols-[minmax(300px,0.9fr)_minmax(420px,1.25fr)]",
+            !showCurrentWord && "pk-game-grid-word-hidden",
+          )}
+        >
+          <div className="flex min-w-0 flex-col justify-center">
             <div className="flex items-center gap-[clamp(10px,1.8vw,18px)]">
               <TeamCard team="red" active={currentTeam === "red"} score={scoreRed} />
               <div className="text-[clamp(20px,2.8vw,30px)] font-black text-amber-500">VS</div>
@@ -104,7 +111,14 @@ export function GameScreen({
               <div className="h-full rounded-full bg-emerald-500 transition-all" style={{ width: `${progress}%` }} />
             </div>
 
-            <div className="pk-listen-area flex flex-1 flex-col items-center justify-center py-[clamp(24px,5vw,70px)] text-center">
+            <div
+              className={cn(
+                "pk-listen-area flex flex-col items-center justify-center text-center",
+                showCurrentWord
+                  ? "py-[clamp(24px,5vw,70px)]"
+                  : "min-h-[clamp(150px,24vh,230px)] py-[clamp(16px,3vw,34px)]",
+              )}
+            >
               <p className="text-[clamp(16px,1.7vw,20px)] text-slate-600">听一听，这是哪个单词？</p>
               <button
                 onClick={() => onSpeakWord(currentWord)}
@@ -113,8 +127,12 @@ export function GameScreen({
               >
                 <Volume2 className="size-[clamp(28px,3vw,36px)]" />
               </button>
-              <AdaptiveWordText text={formatWordDisplay(currentWord.english, settings.wordDisplayMode)} variant="hero" />
-              <p className="mt-2 min-h-6 text-[clamp(13px,1.4vw,16px)] text-slate-500">{speechTip}</p>
+              {showCurrentWord && (
+                <>
+                  <AdaptiveWordText text={formatWordDisplay(currentWord.english, settings.wordDisplayMode)} variant="hero" />
+                  <p className="mt-2 min-h-6 text-[clamp(13px,1.4vw,16px)] text-slate-500">{speechTip}</p>
+                </>
+              )}
             </div>
           </div>