From 0a270a59072b119c36c99217ad0db44d1085c6b8 Mon Sep 17 00:00:00 2001
From: LC mac <leochan@hkjin.com>
Date: Sat, 14 Feb 2026 23:19:35 +0800
Subject: [PATCH] change to mobile layout, reduce spacing

---
 src/App.tsx                         |   2 +-
 src/components/DiceEntropy.tsx      |   6 +-
 src/components/RandomOrgEntropy.tsx |   6 +-
 src/components/SeedBlender.tsx      | 131 ++++++++++++++++++++++------
 4 files changed, 111 insertions(+), 34 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3cb78a7..4daecf0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -661,7 +661,7 @@ function App() {
             onResetAll={handleResetAll}
           />
           <main className="w-full px-4 py-3">
-            <div className="bg-[#1a1a2e] rounded-xl border-2 border-[#00f0ff]/30 shadow-[0_0_30px_rgba(0,240,255,0.3)] p-8">
+            <div className="bg-[#1a1a2e] rounded-xl border-2 border-[#00f0ff]/30 shadow-[0_0_30px_rgba(0,240,255,0.3)] p-0">
               <div className="p-6 md:p-8 space-y-6">
                 {/* Error Display */}
                 {error && (
diff --git a/src/components/DiceEntropy.tsx b/src/components/DiceEntropy.tsx
index 8af58f2..05fa7b8 100644
--- a/src/components/DiceEntropy.tsx
+++ b/src/components/DiceEntropy.tsx
@@ -154,20 +154,20 @@ const DiceEntropy: React.FC<DiceEntropyProps> = ({
             {/* INPUT FORM - Show only when stats are NOT shown */}
             {!stats && !processing && (
                 <>
-                    <div className="p-4 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30 space-y-3">
+                    <div className="p-3 md:p-4 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30 space-y-3">
                         <div className="flex items-center gap-2"><Dices size={20} className="text-[#00f0ff]" /><h3 className="text-sm font-bold text-[#00f0ff] uppercase">Dice Roll Entropy</h3></div>
                         <div className="space-y-2 text-xs text-[#6ef3f7]">
                             <p className="font-bold text-[#00f0ff]">Instructions:</p>
                             <ul className="list-disc list-inside space-y-1 pl-2">
                                 <li>Roll a 6-sided die at least 99 times</li>
                                 <li>Enter each result (1-6) in order</li>
-                                <li>No spaces needed (e.g., 163452...)</li>
+                                <li>Spaces are ignored (e.g., 163452...)</li>
                                 <li>Pattern validation enabled</li>
                             </ul>
                         </div>
                         <div className="space-y-2">
                             <label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest">Enter Dice Rolls</label>
-                            <textarea value={rolls} onChange={(e) => { setRolls(e.target.value.replace(/[^1-6\s]/g, '')); setError(''); }} placeholder="99+ dice rolls (e.g., 16345...)" className="w-full h-32 p-3 bg-[#0a0a0f] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-xs text-[#00f0ff] placeholder:text-[10px] placeholder:text-[#6ef3f7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all resize-none" />
+                            <textarea value={rolls} onChange={(e) => { setRolls(e.target.value.replace(/[^1-6\s]/g, '')); setError(''); }} placeholder="99+ dice rolls (e.g., 16345...)" className="w-full h-28 md:h-32 p-2 md:p-3 bg-[#0a0a0f] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-xs text-[#00f0ff] placeholder:text-[10px] placeholder:text-[#6ef3f7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all resize-none" />
                             <p className="text-[10px] text-[#6ef3f7]">Current: {rolls.replace(/\s/g, '').length} rolls {rolls.replace(/\s/g, '').length >= 99 && ' ✓'}</p>
                         </div>
                         {error && (<div className="flex items-start gap-2 p-3 bg-[#0a0a0f] border border-[#ff006e] rounded-lg"><AlertCircle size={16} className="text-[#ff006e] shrink-0 mt-0.5" /><p className="text-xs text-[#ff006e]">{error}</p></div>)}
diff --git a/src/components/RandomOrgEntropy.tsx b/src/components/RandomOrgEntropy.tsx
index ab5f13c..abe74a3 100644
--- a/src/components/RandomOrgEntropy.tsx
+++ b/src/components/RandomOrgEntropy.tsx
@@ -145,7 +145,7 @@ const RandomOrgEntropy: React.FC<RandomOrgEntropyProps> = ({
         <div className="space-y-4 max-h-[calc(100vh-200px)] overflow-y-auto">
             {!stats && !processing && (
                 <>
-                    <div className="p-4 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30 space-y-3">
+                    <div className="p-3 md:p-4 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30 space-y-3">
                         <div className="flex items-center gap-2">
                             <Globe size={20} className="text-[#00f0ff]" />
                             <h3 className="text-sm font-bold text-[#00f0ff] uppercase">🌍 Random.org Entropy</h3>
@@ -226,7 +226,7 @@ const RandomOrgEntropy: React.FC<RandomOrgEntropyProps> = ({
                             readOnly
                             value={requestJson}
                             onFocus={(e) => e.currentTarget.select()}
-                            className="w-full h-36 p-3 bg-[#0a0a0f] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-[10px] text-[#00f0ff] focus:outline-none"
+                            className="w-full h-28 md:h-36 p-2 md:p-3 bg-[#0a0a0f] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-[10px] text-[#00f0ff] focus:outline-none"
                         />
                         <p className="text-[10px] text-[#6ef3f7]">
                             Endpoint: <span className="font-mono text-[#00f0ff]">https://api.random.org/json-rpc/1/invoke</span>
@@ -239,7 +239,7 @@ const RandomOrgEntropy: React.FC<RandomOrgEntropyProps> = ({
                             value={paste}
                             onChange={(e) => setPaste(e.target.value)}
                             placeholder="Paste JSON-RPC response, or paste a [1,6,2,...] array"
-                            className="w-full h-36 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-[10px] text-[#00f0ff] placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] transition-all"
+                            className="w-full h-28 md:h-36 p-2 md:p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-[10px] text-[#00f0ff] placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] transition-all"
                         />
                     </div>
 
diff --git a/src/components/SeedBlender.tsx b/src/components/SeedBlender.tsx
index 359a889..debf5d4 100644
--- a/src/components/SeedBlender.tsx
+++ b/src/components/SeedBlender.tsx
@@ -74,7 +74,9 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
     const [finalMnemonic, setFinalMnemonic] = useState<string | null>(null);
     const [mixing, setMixing] = useState(false);
     const [showFinalQR, setShowFinalQR] = useState(false);
+    const [copiedFinal, setCopiedFinal] = useState(false);
 
+    const [targetWordCount, setTargetWordCount] = useState<12 | 24>(24);
     useEffect(() => {
         const isDirty = entries.some(e => e.rawInput.length > 0) || diceRolls.length > 0;
         onDirtyStateChange(isDirty);
@@ -262,7 +264,7 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
         if (!blendedResult) return;
         setMixing(true);
         try {
-            const outputBits = blendedResult.blendedEntropy.length >= 32 ? 256 : 128;
+            const outputBits = targetWordCount === 12 ? 128 : 256;
             const result = await mixWithDiceAsync(blendedResult.blendedEntropy, diceRolls, outputBits);
             setFinalMnemonic(result.finalMnemonic);
         } catch (e) { setFinalMnemonic(null); } finally { setMixing(false); }
@@ -278,6 +280,25 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
         // This preserves the blended seed in case user wants to come back and export QR
     };
 
+    const copyFinalMnemonic = async () => {
+        if (!finalMnemonic) return;
+        try {
+            await navigator.clipboard.writeText(finalMnemonic);
+            setCopiedFinal(true);
+            window.setTimeout(() => setCopiedFinal(false), 1200);
+        } catch {
+            // fallback: select manually
+            const el = document.getElementById("final-mnemonic");
+            if (el) {
+                const range = document.createRange();
+                range.selectNodeContents(el);
+                const sel = window.getSelection();
+                sel?.removeAllRanges();
+                sel?.addRange(range);
+            }
+        }
+    };
+
     const getBorderColor = (isValid: boolean | null) => {
         if (isValid === true) return 'border-[#39ff14] focus:ring-[#39ff14]';
         if (isValid === false) return 'border-[#ff006e] focus:ring-[#ff006e]';
@@ -286,18 +307,18 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
 
     return (
         <>
-            <div className="space-y-6 pb-20">
-                <div className="mb-6">
-                    <h2 className="text-lg font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
+            <div className="space-y-4 md:space-y-6 pb-10 md:pb-20">
+                <div className="mb-3 md:mb-6">
+                    <h2 className="text-base md:text-lg font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
                         Seed Blender
                     </h2>
                 </div>
 
-                <div className="p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30">
-                    <h3 className="font-semibold text-lg mb-4 text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Step 1: Input Mnemonics</h3>
-                    <div className="space-y-4">
+                <div className="p-3 md:p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30">
+                    <h3 className="font-semibold text-base md:text-lg mb-2 md:mb-4 text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Step 1: Input Mnemonics</h3>
+                    <div className="space-y-3 md:space-y-4">
                         {entries.map((entry, index) => (
-                            <div key={entry.id} className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/20">
+                            <div key={entry.id} className="p-2 md:p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/20">
                                 {entry.passwordRequired ? (
                                     <div className="space-y-2">
                                         <div className="flex items-center justify-between"><label className="text-sm font-semibold text-[#00f0ff]">Decrypt {entry.inputType.toUpperCase()} Mnemonic</label><button onClick={() => updateEntry(index, createNewEntry())} className="text-xs text-[#6ef3f7] hover:text-[#00f0ff]">&times; Cancel</button></div>
@@ -314,9 +335,8 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
                                             onFocus={(e) => e.target.classList.remove('blur-sensitive')}
                                             onBlur={(e) => entry.rawInput && e.target.classList.add('blur-sensitive')}
                                             placeholder={`Mnemonic #${index + 1} (12 or 24 words)`}
-                                            className={`w-full h-24 p-3 bg-[#0a0a0f] border-2 rounded-lg font-mono text-xs text-[#00f0ff] placeholder:text-[10px] placeholder:text-[#6ef3f7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all ${getBorderColor(entry.isValid)} ${
-                                              entry.rawInput ? 'blur-sensitive' : ''
-                                            }`}
+                                            className={`w-full h-20 md:h-24 p-2 md:p-3 bg-[#0a0a0f] border-2 rounded-lg font-mono text-xs text-[#00f0ff] placeholder:text-[10px] placeholder:text-[#6ef3f7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all ${getBorderColor(entry.isValid)} ${entry.rawInput ? 'blur-sensitive' : ''
+                                                }`}
                                         />
                                         {/* Row 2: QR button (left) and X button (right) */}
                                         <div className="flex items-center justify-between">
@@ -342,31 +362,58 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
                                 )}
                             </div>
                         ))}
-                        <button onClick={handleAddEntry} className="w-full py-2.5 bg-[#1a1a2e] hover:bg-[#16213e] text-[#00f0ff] rounded-lg font-semibold flex items-center justify-center gap-2 border-2 border-[#00f0ff]/50"><Plus size={16} /> Add Another Mnemonic</button>
+                        <button onClick={handleAddEntry} className="w-full py-2 bg-[#1a1a2e] hover:bg-[#16213e] text-[#00f0ff] rounded-lg font-semibold flex items-center justify-center gap-2 border-2 border-[#00f0ff]/50"><Plus size={16} /> Add Another Mnemonic</button>
                     </div>
                 </div>
 
-                <div className="p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30 min-h-[10rem]">
-                    <h3 className="font-semibold text-lg mb-4 text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Step 2: Blended Preview</h3>
-                    {blending ? <p className="text-sm text-[#6ef3f7]">Blending...</p> : !blendError && blendedResult ? (<div className="space-y-4 animate-in fade-in">{xorStrength?.isWeak && (<div className="p-3 bg-[#ff006e]/10 border-2 border-[#ff006e]/30 text-[#ff006e] rounded-lg text-sm flex gap-3"><AlertTriangle /><div><span className="font-bold">Weak XOR Result:</span> Detected only {xorStrength.uniqueBytes} unique bytes. This can happen if seeds are identical or too similar.</div></div>)}<div className="space-y-1"><label className="text-xs font-semibold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Blended Mnemonic (12-word)</label><p data-sensitive="Blended Mnemonic (12-word)" className="p-3 bg-[#1a1a2e] rounded-md font-mono text-sm text-[#00f0ff] break-words border-2 border-[#00f0ff]/30">{blendedResult.blendedMnemonic12}</p></div>{blendedResult.blendedMnemonic24 && (<div className="space-y-1"><label className="text-xs font-semibold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Blended Mnemonic (24-word)</label><p data-sensitive="Blended Mnemonic (24-word)" className="p-3 bg-[#1a1a2e] rounded-md font-mono text-sm text-[#00f0ff] break-words border-2 border-[#00f0ff]/30">{blendedResult.blendedMnemonic24}</p></div>)}</div>) : (<p className="text-sm text-[#6ef3f7]">{blendError || 'Previews will appear here once you enter one or more valid mnemonics.'}</p>)}
+                <div className="p-3 md:p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30 min-h-[10rem]">
+                    <h3 className="font-semibold text-base md:text-lg mb-2 md:mb-4 text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Step 2: Blended Preview</h3>
+                    {blending ? <p className="text-sm text-[#6ef3f7]">Blending...</p> : !blendError && blendedResult ? (<div className="space-y-3 md:space-y-4 animate-in fade-in">{xorStrength?.isWeak && (<div className="p-3 bg-[#ff006e]/10 border-2 border-[#ff006e]/30 text-[#ff006e] rounded-lg text-sm flex gap-3"><AlertTriangle /><div><span className="font-bold">Weak XOR Result:</span> Detected only {xorStrength.uniqueBytes} unique bytes. This can happen if seeds are identical or too similar.</div></div>)}<div className="space-y-1"><label className="text-xs font-semibold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Blended Mnemonic (12-word)</label><p data-sensitive="Blended Mnemonic (12-word)" className="p-2 md:p-3 bg-[#1a1a2e] rounded-md font-mono text-xs md:text-sm text-[#00f0ff] break-words border-2 border-[#00f0ff]/30">{blendedResult.blendedMnemonic12}</p></div>{blendedResult.blendedMnemonic24 && (<div className="space-y-1"><label className="text-xs font-semibold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Blended Mnemonic (24-word)</label><p data-sensitive="Blended Mnemonic (24-word)" className="p-2 md:p-3 bg-[#1a1a2e] rounded-md font-mono text-xs md:text-sm text-[#00f0ff] break-words border-2 border-[#00f0ff]/30">{blendedResult.blendedMnemonic24}</p></div>)}</div>) : (<p className="text-sm text-[#6ef3f7]">{blendError || 'Previews will appear here once you enter one or more valid mnemonics.'}</p>)}
                 </div>
 
-                <div className="p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30">
-                    <h3 className="font-semibold text-lg mb-4 text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Step 3: Input Dice Rolls</h3>
-                    <div className="space-y-4">
-                        <textarea value={diceRolls} onChange={(e) => setDiceRolls(e.target.value.replace(/[^1-6]/g, ''))} placeholder="99+ dice rolls (e.g., 16345...)" className="w-full h-32 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-sm placeholder:text-[10px] placeholder:text-[#6ef3f7]" />
+                <div className="p-3 md:p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30">
+                    <h3 className="font-semibold text-base md:text-lg mb-2 md:mb-4 text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Step 3: Input Dice Rolls</h3>
+                    <div className="space-y-3 md:space-y-4">
+                        <textarea value={diceRolls} onChange={(e) => setDiceRolls(e.target.value.replace(/[^1-6]/g, ''))} placeholder="99+ dice rolls (e.g., 16345...)" className="w-full h-24 md:h-32 p-2 md:p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-xs placeholder:text-[10px] placeholder:text-[#6ef3f7]" />
                         {dicePatternWarning && (<div className="p-3 bg-[#ff006e]/10 border-2 border-[#ff006e]/30 text-[#ff006e] rounded-lg text-sm flex gap-3"><AlertTriangle /><p><span className="font-bold">Warning:</span> {dicePatternWarning}</p></div>)}
-                        {diceStats && diceStats.length > 0 && (<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center"><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Rolls</p><p className="text-lg font-bold text-[#00f0ff]">{diceStats.length}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Entropy (bits)</p><p className="text-lg font-bold text-[#00f0ff]">{diceStats.estimatedEntropyBits.toFixed(1)}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Mean</p><p className="text-lg font-bold text-[#00f0ff]">{diceStats.mean.toFixed(2)}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Chi-Square</p><p className={`text-lg font-bold ${diceStats.chiSquare > 11.07 ? 'text-[#ff006e]' : 'text-[#00f0ff]'}`}>{diceStats.chiSquare.toFixed(2)}</p></div></div>)}
-                        {diceOnlyMnemonic && (<div className="space-y-1 pt-2"><label className="text-xs font-semibold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Dice-Only Preview Mnemonic</label><p data-sensitive="Dice-Only Preview Mnemonic" className="p-3 bg-[#1a1a2e] rounded-md font-mono text-sm text-[#00f0ff] break-words border-2 border-[#00f0ff]/30">{diceOnlyMnemonic}</p></div>)}
+                        {diceStats && diceStats.length > 0 && (<div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 text-center"><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Rolls</p><p className="text-base md:text-lg font-bold text-[#00f0ff]">{diceStats.length}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Entropy (bits)</p><p className="text-base md:text-lg font-bold text-[#00f0ff]">{diceStats.estimatedEntropyBits.toFixed(1)}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Mean</p><p className="text-base md:text-lg font-bold text-[#00f0ff]">{diceStats.mean.toFixed(2)}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Chi-Square</p><p className={`text-base md:text-lg font-bold ${diceStats.chiSquare > 11.07 ? 'text-[#ff006e]' : 'text-[#00f0ff]'}`}>{diceStats.chiSquare.toFixed(2)}</p></div></div>)}
+                        {diceOnlyMnemonic && (<div className="space-y-1 pt-2"><label className="text-xs font-semibold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Dice-Only Preview Mnemonic</label><p data-sensitive="Dice-Only Preview Mnemonic" className="p-2 md:p-3 bg-[#1a1a2e] rounded-md font-mono text-xs md:text-sm text-[#00f0ff] break-words border-2 border-[#00f0ff]/30">{diceOnlyMnemonic}</p></div>)}
                     </div>
                 </div>
 
-                <div className="p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/50 shadow-[0_0_20px_rgba(0,240,255,0.3)]">
-                    <h3 className="font-semibold text-lg mb-4 text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Step 4: Generate Final Mnemonic</h3>
+                <div className="p-3 md:p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/50 shadow-[0_0_20px_rgba(0,240,255,0.3)]">
+                    <h3 className="font-semibold text-base md:text-lg mb-2 md:mb-4 text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Step 4: Generate Final Mnemonic</h3>
                     {finalMnemonic ? (
-                        <div className="p-4 bg-[#0a0a0f] border-2 border-[#39ff14] rounded-2xl shadow-[0_0_20px_rgba(57,255,20,0.3)]">
-                            <div className="flex items-center justify-between mb-4"><span className="font-bold text-[#39ff14] flex items-center gap-2 text-lg" style={{ textShadow: '0 0 10px rgba(57,255,20,0.8)' }}><CheckCircle2 size={22} /> Final Mnemonic Generated</span><button onClick={() => setFinalMnemonic(null)} className="p-2.5 hover:bg-[#16213e] rounded-xl transition-all text-[#39ff14] hover:shadow-[0_0_15px_rgba(57,255,20,0.5)] flex items-center gap-2"><EyeOff size={22} /> Hide</button></div>
-                            <div className="p-6 bg-[#0a0a0f] rounded-xl border-2 border-[#39ff14] shadow-[0_0_20px_rgba(57,255,20,0.3)]"><p data-sensitive="Final Blended Mnemonic" className="font-mono text-center text-lg break-words text-[#39ff14]">{finalMnemonic}</p></div>
+                        <div className="p-4 bg-[#0a0a0f] border-2 border-[#39ff14] rounded-2xl shadow-[0_0_20px_rgba(57,255,20,0.3)] animate-in fade-in">
+                            <div className="flex items-center justify-between mb-4">
+                                <span className="font-bold text-[#39ff14] flex items-center gap-2 text-lg" style={{ textShadow: '0 0 10px rgba(57,255,20,0.8)' }}><CheckCircle2 size={22} /> Final Mnemonic Generated</span>
+                                <button onClick={() => setFinalMnemonic(null)} className="p-2.5 hover:bg-[#16213e] rounded-xl transition-all text-[#39ff14] hover:shadow-[0_0_15px_rgba(57,255,20,0.5)] flex items-center gap-2"><EyeOff size={22} /> Hide</button>
+                            </div>
+                            <div className="p-6 bg-[#0a0a0f] rounded-xl border-2 border-[#39ff14] shadow-[0_0_20px_rgba(57,255,20,0.3)]">
+                                <div className="flex items-center justify-end mb-3">
+                                    <button
+                                        type="button"
+                                        onClick={copyFinalMnemonic}
+                                        className="px-3 py-1.5 bg-[#16213e] border-2 border-[#39ff14]/50 text-[#39ff14] rounded-lg text-xs font-semibold hover:shadow-[0_0_15px_rgba(57,255,20,0.35)] transition-all"
+                                        title="Copy final mnemonic"
+                                    >
+                                        {copiedFinal ? "Copied" : "Copy"}
+                                    </button>
+                                </div>
+                                <p
+                                    id="final-mnemonic"
+                                    data-sensitive="Final Blended Mnemonic"
+                                    className="font-mono text-center text-sm md:text-base break-words text-[#39ff14] leading-relaxed select-text cursor-text"
+                                    onClick={(e) => {
+                                        const range = document.createRange();
+                                        range.selectNodeContents(e.currentTarget);
+                                        const sel = window.getSelection();
+                                        sel?.removeAllRanges();
+                                        sel?.addRange(range);
+                                    }}
+                                >{finalMnemonic}</p>
+                                <p className="text-[9px] text-[#6ef3f7] mt-2 text-center">Click the words to select all, or use Copy.</p>
+                            </div>
                             <div className="mt-4 p-3 bg-[#ff006e]/10 text-[#ff006e] rounded-lg text-xs flex gap-2 border-2 border-[#ff006e]/30"><AlertTriangle size={16} className="shrink-0 mt-0.5" /><span><strong>Security Warning:</strong> Write this down immediately. Do not save it digitally.</span></div>
                             <div className="grid grid-cols-2 gap-3 mt-4">
                                 <button onClick={() => setShowFinalQR(true)} className="w-full py-2.5 bg-[#1a1a2e] text-[#00f0ff] rounded-lg font-semibold flex items-center justify-center gap-2 border-2 border-[#00f0ff]/50 hover:bg-[#16213e] hover:shadow-[0_0_15px_rgba(0,240,255,0.3)]"><QrCode size={16} /> Export as QR</button>
@@ -382,7 +429,37 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
                             </div>
                         </div>
                     ) : (
-                        <><p className="text-sm text-[#6ef3f7] mb-4">Once you have entered valid mnemonics and at least 50 dice rolls, you can generate the final mnemonic.</p><button onClick={handleFinalMix} disabled={!blendedResult || !diceRolls || diceRolls.length < 50 || mixing} className="w-full py-3 bg-gradient-to-r from-[#00f0ff] to-[#0066ff] text-[#16213e] rounded-xl font-bold flex items-center justify-center gap-2 disabled:opacity-50 hover:shadow-[0_0_20px_rgba(0,240,255,0.5)]">{mixing ? <RefreshCw className="animate-spin" size={20} /> : <Sparkles size={20} />}{mixing ? 'Generating...' : 'Mix Mnemonic + Dice'}</button></>
+                        <>
+                            <p className="text-xs md:text-sm text-[#6ef3f7] mb-2 md:mb-4">Once you have entered valid mnemonics and at least 50 dice rolls, you can generate the final mnemonic.</p>
+                            <div className="space-y-3 pt-4 mb-4 border-t border-[#00f0ff]/30">
+                                <label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest block text-center" style={{ textShadow: '0 0 10px rgba(0, 240, 255, 0.7)' }}>
+                                    Target Seed Length
+                                </label>
+                                <div className="grid grid-cols-2 gap-3 max-w-sm mx-auto">
+                                    <button
+                                        onClick={() => setTargetWordCount(12)}
+                                        className={`py-2.5 text-sm rounded-lg font-medium transition-all ${targetWordCount === 12
+                                            ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+                                            : 'bg-[#16213e] text-[#9d84b7] border-2 border-[#00f0ff]/30 hover:text-[#6ef3f7] hover:border-[#00f0ff]/50'
+                                            }`}
+                                        style={targetWordCount === 12 ? { textShadow: '0 0 10px rgba(0, 240, 255, 0.8)' } : undefined}
+                                    >
+                                        12 Words
+                                    </button>
+                                    <button
+                                        onClick={() => setTargetWordCount(24)}
+                                        className={`py-2.5 text-sm rounded-lg font-medium transition-all ${targetWordCount === 24
+                                            ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+                                            : 'bg-[#16213e] text-[#9d84b7] border-2 border-[#00f0ff]/30 hover:text-[#6ef3f7] hover:border-[#00f0ff]/50'
+                                            }`}
+                                        style={targetWordCount === 24 ? { textShadow: '0 0 10px rgba(0, 240, 255, 0.8)' } : undefined}
+                                    >
+                                        24 Words
+                                    </button>
+                                </div>
+                            </div>
+                            <button onClick={handleFinalMix} disabled={!blendedResult || !diceRolls || diceRolls.length < 50 || mixing} className="w-full py-3 bg-gradient-to-r from-[#00f0ff] to-[#0066ff] text-[#16213e] rounded-xl font-bold flex items-center justify-center gap-2 disabled:opacity-50 hover:shadow-[0_0_20px_rgba(0,240,255,0.5)]">{mixing ? <RefreshCw className="animate-spin" size={20} /> : <Sparkles size={20} />}{mixing ? 'Generating...' : 'Mix Mnemonic + Dice'}</button>
+                        </>
                     )}
                 </div>
             </div>