百萬富翁

/* ============================================ TVB 港版「百萬富翁」v2 - 手機優化 ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } :root { --c-purple-deep: #1a0938; --c-purple-mid: #2d1b4e; --c-purple-light: #4a2c6e; --c-gold: #ffd700; --c-gold-dark: #b8860b; --c-gold-light: #ffed4e; --c-black: #000; --c-red: #d32f2f; --c-green: #2e7d32; --c-timer-ok: #4caf50; --c-timer-warn: #ff9800; --c-timer-crit: #f44336; } html, body { height: 100%; font-family: 'Microsoft JhengHei', 'Heiti TC', sans-serif; background: radial-gradient(ellipse at center, #2d1b4e 0%, #1a0938 40%, #000 100%); color: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; overflow-y: auto; } /* === Studio 背景 === */ .studio-floor { position: fixed; bottom: 0; left: 0; width: 100%; height: 200px; background: linear-gradient(to top, rgba(255, 215, 0, 0.1) 0%, transparent 50%), linear-gradient(180deg, transparent 0%, rgba(45, 27, 78, 0.5) 100%); pointer-events: none; z-index: 0; } .spotlight { position: fixed; top: -50px; left: 50%; transform: translateX(-50%); width: 800px; height: 100vh; background: radial-gradient(ellipse at top, rgba(255, 215, 0, 0.15) 0%, transparent 60%); pointer-events: none; z-index: 0; animation: spotlight-pulse 4s ease-in-out infinite; } @keyframes spotlight-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* === Screens === */ .screen { display: none; min-height: 100vh; padding: 16px; position: relative; z-index: 1; } .screen.active { display: flex; flex-direction: column; align-items: center; } .screen.center { justify-content: center; } /* === Mute button (top-right) === */ .mute-btn { position: fixed; top: 8px; right: 8px; z-index: 100; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.65); border: 1.5px solid var(--c-gold); color: var(--c-gold); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); transition: all 0.2s; } .mute-btn:hover { background: var(--c-gold); color: #000; } .mute-btn.muted { opacity: 0.5; } /* === TVB 港版 Logo === */ .tvb-logo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(0,0,0,0.4); border: 1px solid var(--c-gold); border-radius: 6px; font-size: 0.85em; color: var(--c-gold); font-weight: 700; letter-spacing: 2px; } /* === Title === */ .title-banner { text-align: center; margin-bottom: 16px; } .millionaire-title { font-size: 3.2em; font-weight: 900; color: var(--c-gold); text-shadow: 0 0 20px var(--c-gold), 0 0 40px var(--c-gold-dark), 2px 2px 0 var(--c-gold-dark); letter-spacing: 4px; font-style: italic; line-height: 1; margin-bottom: 6px; animation: title-glow 3s ease-in-out infinite alternate; } @keyframes title-glow { from { text-shadow: 0 0 20px var(--c-gold), 0 0 40px var(--c-gold-dark), 2px 2px 0 var(--c-gold-dark); } to { text-shadow: 0 0 30px var(--c-gold), 0 0 60px var(--c-gold), 2px 2px 0 var(--c-gold-dark); } } .millionaire-dollars { display: flex; justify-content: center; gap: 16px; font-size: 2em; color: var(--c-gold); text-shadow: 0 0 15px var(--c-gold); margin-bottom: 12px; } .subtitle { font-size: 0.9em; color: var(--c-gold-light); letter-spacing: 2px; font-style: italic; } /* === Inputs === */ .name-input, .email-input { background: rgba(0,0,0,0.6); border: 2px solid var(--c-gold); border-radius: 10px; padding: 14px 24px; font-size: 1.1em; color: #fff; text-align: center; margin-bottom: 14px; width: 100%; max-width: 320px; font-family: inherit; } .name-input::placeholder, .email-input::placeholder { color: #888; } .name-input:focus, .email-input:focus { outline: none; box-shadow: 0 0 20px var(--c-gold); } /* === Buttons === */ .start-btn { background: linear-gradient(135deg, var(--c-gold), var(--c-gold-dark)); border: 2px solid var(--c-gold-light); border-radius: 50px; padding: 16px 50px; font-size: 1.2em; color: var(--c-black); font-weight: 900; letter-spacing: 2px; box-shadow: 0 4px 20px rgba(255,215,0,0.5); margin: 14px 0; cursor: pointer; font-family: inherit; transition: all 0.2s; } .start-btn:active { transform: scale(0.97); } .secondary-btn, .primary-btn { padding: 14px 32px; border-radius: 10px; font-size: 1em; font-weight: 700; cursor: pointer; margin: 6px; font-family: inherit; } .secondary-btn { background: rgba(0,0,0,0.5); color: #fff; border: 1px solid var(--c-gold); } .primary-btn { background: linear-gradient(135deg, var(--c-gold), var(--c-gold-dark)); color: var(--c-black); border: 1px solid var(--c-gold-light); } /* === Leaderboard === */ .leaderboard-section { width: 100%; max-width: 500px; margin-top: 24px; background: rgba(0,0,0,0.5); border: 1px solid var(--c-gold-dark); border-radius: 12px; padding: 16px; } .leaderboard-section h3 { color: var(--c-gold); font-size: 1.1em; margin-bottom: 12px; text-align: center; letter-spacing: 2px; } .leaderboard-list { list-style: none; } .leaderboard-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid rgba(255,215,0,0.1); font-size: 0.95em; } .leaderboard-item:last-child { border-bottom: none; } .leaderboard-rank { min-width: 28px; text-align: center; font-weight: 900; color: var(--c-gold); } .leaderboard-rank.top-1 { color: #ffd700; font-size: 1.3em; } .leaderboard-rank.top-2 { color: #c0c0c0; } .leaderboard-rank.top-3 { color: #cd7f32; } .leaderboard-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaderboard-score { color: #4caf50; font-weight: 700; } .leaderboard-empty { text-align: center; color: #888; font-size: 0.9em; padding: 16px; font-style: italic; } .leaderboard-save-status { text-align: center; font-size: 0.85em; padding: 4px 8px; margin-bottom: 8px; border-radius: 4px; min-height: 0; transition: all 0.3s; word-break: break-word; } .leaderboard-save-status:empty { display: none; } .leaderboard-save-status.pending { background: rgba(255, 200, 0, 0.15); color: #ffc800; } .leaderboard-save-status.ok { background: rgba(76, 175, 80, 0.18); color: #4caf50; } .leaderboard-save-status.error { background: rgba(255, 0, 0, 0.15); color: #ff8a8a; } .bank-status { margin-top: 12px; padding: 8px 16px; background: rgba(0,0,0,0.5); border: 1px solid var(--c-gold-dark); border-radius: 8px; color: var(--c-gold-light); font-size: 0.85em; text-align: center; letter-spacing: 1px; } .bank-status span { color: var(--c-gold); font-weight: 700; } /* .update-bank-btn removed in v4 (auto refill) */ .update-bank-status { margin-top: 8px; padding: 8px 12px; border-radius: 4px; font-size: 0.78em; line-height: 1.5; display: none; } .update-bank-status.pending { display: block; background: rgba(255, 152, 0, 0.1); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); } .update-bank-status.success { display: block; background: rgba(76, 175, 80, 0.1); color: #4caf50; border: 1px solid rgba(76, 175, 80, 0.3); } .start-btn-locked { opacity: 0.5; cursor: not-allowed !important; background: rgba(100, 100, 100, 0.3) !important; } .start-btn-locked:hover { transform: none !important; box-shadow: none !important; } /* === Game screen === */ .game-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; width: 100%; max-width: 800px; padding: 10px 56px 10px 16px; /* 右上留位給 mute btn */ background: rgba(0,0,0,0.5); border: 1px solid var(--c-gold-dark); border-radius: 10px; } .game-header .logo { font-size: 1em; color: var(--c-gold); font-weight: 700; font-style: italic; } .player-info { text-align: right; font-size: 0.85em; } .player-name { color: var(--c-gold-light); } .player-money { color: #4caf50; font-size: 1.1em; font-weight: 800; } /* === Timer === */ .timer-bar { width: 100%; max-width: 800px; height: 10px; background: rgba(0,0,0,0.5); border-radius: 5px; overflow: hidden; margin-bottom: 8px; border: 1px solid rgba(255,215,0,0.3); } .timer-fill { height: 100%; background: var(--c-timer-ok); transition: width 1s linear, background 0.5s; width: 100%; } .timer-fill.warn { background: var(--c-timer-warn); } .timer-fill.crit { background: var(--c-timer-crit); animation: pulse-crit 0.5s ease-in-out infinite; } @keyframes pulse-crit { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .timer-text { text-align: center; font-size: 1em; color: var(--c-gold); margin-bottom: 16px; font-weight: 700; letter-spacing: 2px; } .timer-text.warn { color: var(--c-timer-warn); } .timer-text.crit { color: var(--c-timer-crit); } /* === Money display (above question) === */ .current-prize { text-align: center; margin-bottom: 12px; width: 100%; max-width: 800px; } .current-prize-label { font-size: 0.85em; color: var(--c-gold-light); letter-spacing: 2px; margin-bottom: 2px; } .current-prize-amount { font-size: 2.4em; color: var(--c-gold); font-weight: 900; font-style: italic; text-shadow: 0 0 20px var(--c-gold); letter-spacing: 2px; } .current-prize.safe-mark::after { content: ' 🛡'; font-size: 0.5em; color: var(--c-gold-light); } /* === Lifelines === */ .lifelines { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; } .lifeline-btn { background: linear-gradient(180deg, var(--c-purple-light), var(--c-purple-mid)); border: 2px solid var(--c-gold); border-radius: 50px; padding: 10px 16px; color: #fff; font-size: 0.85em; font-weight: 600; display: flex; align-items: center; gap: 5px; font-family: inherit; transition: all 0.2s; } .lifeline-btn:active:not(:disabled) { background: var(--c-gold); color: #000; transform: scale(0.95); } .lifeline-btn:disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; } /* === Quit / Walk Away === */ .quit-btn { background: linear-gradient(180deg, #b71c1c, #7f0000); border: 2px solid #ff5252; border-radius: 50px; padding: 10px 16px; color: #fff; font-size: 0.85em; font-weight: 700; display: flex; align-items: center; gap: 5px; font-family: inherit; transition: all 0.2s; cursor: pointer; } .quit-btn:active { background: #ff5252; color: #000; transform: scale(0.95); } .quit-btn:hover { box-shadow: 0 0 20px rgba(255, 82, 82, 0.6); } /* === Simulated Check (for walk away) === */ .check-wrapper { background: linear-gradient(135deg, #fff8e1 0%, #ffe082 100%); border: 3px solid #b8860b; border-radius: 12px; padding: 20px; margin: 16px auto; max-width: 480px; box-shadow: 0 8px 24px rgba(184, 134, 11, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.3); font-family: 'Georgia', 'Times New Roman', serif; position: relative; overflow: hidden; } .check-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(184, 134, 11, 0.03) 10px, rgba(184, 134, 11, 0.03) 20px); pointer-events: none; } .check-header { text-align: center; border-bottom: 2px dashed #b8860b; padding-bottom: 10px; margin-bottom: 12px; } .check-header .logo { font-size: 1.1em; font-weight: 800; color: #6d4c00; letter-spacing: 2px; } .check-header .subtitle { font-size: 0.75em; color: #8d6e00; margin-top: 4px; font-style: italic; } .check-amount { text-align: center; margin: 16px 0; font-size: 2.4em; font-weight: 900; color: #b71c1c; text-shadow: 1px 1px 0 #fff; letter-spacing: 1px; } .check-amount-label { text-align: center; font-size: 0.75em; color: #6d4c00; letter-spacing: 3px; text-transform: uppercase; } .check-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9em; color: #4a3000; border-bottom: 1px dotted rgba(184, 134, 11, 0.3); } .check-row .label { font-weight: 600; } .check-stamp { position: absolute; top: 18px; right: 18px; width: 90px; height: 90px; border: 3px solid #b71c1c; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(-15deg); color: #b71c1c; font-size: 0.7em; font-weight: 800; text-align: center; line-height: 1.1; opacity: 0.75; background: rgba(255, 255, 255, 0.4); } .check-stamp::before { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(15deg); font-size: 2.4em; opacity: 0.2; } /* === Share buttons (game style) === */ .share-section-game { margin: 20px 0 12px; padding: 16px; border-top: 1px solid var(--c-gold-dark); border-bottom: 1px solid var(--c-gold-dark); text-align: center; } .share-section-game .label { color: var(--c-gold); font-size: 0.9em; margin-bottom: 12px; letter-spacing: 1px; } .share-buttons-game { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .share-btn-game { background: rgba(0,0,0,0.5); border: 1px solid var(--c-gold); color: var(--c-gold); padding: 8px 14px; border-radius: 8px; font-size: 0.85em; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; } .share-btn-game:hover { background: var(--c-gold); color: #000; transform: translateY(-1px); } .download-check-btn { background: linear-gradient(180deg, #2e7d32, #1b5e20); border: 1px solid #66bb6a; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 0.9em; font-weight: 700; cursor: pointer; margin: 12px 0; font-family: inherit; } .download-check-btn:hover { background: #66bb6a; color: #000; } /* === Question area === */ .question-area { background: linear-gradient(180deg, rgba(45, 27, 78, 0.95), rgba(26, 9, 56, 0.95)); border: 2px solid var(--c-gold); border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 0 20px rgba(255,215,0,0.3); width: 100%; max-width: 800px; } .question-number { color: var(--c-gold); font-size: 0.85em; margin-bottom: 8px; letter-spacing: 2px; font-weight: 700; } .question-text { color: #fff; font-size: 1.1em; line-height: 1.5; margin-bottom: 16px; font-weight: 500; } .answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .answer-btn { background: linear-gradient(180deg, var(--c-purple-light), var(--c-purple-mid)); border: 2px solid var(--c-gold-dark); border-radius: 8px; padding: 12px 14px; color: #fff; font-size: 0.9em; text-align: left; display: flex; align-items: center; gap: 10px; font-family: inherit; min-height: 48px; transition: all 0.2s; } .answer-btn:active:not(:disabled) { background: linear-gradient(180deg, var(--c-gold), var(--c-gold-dark)) !important; color: var(--c-black) !important; transform: scale(0.98); } .answer-btn:disabled { cursor: not-allowed; } .answer-btn.selected { background: linear-gradient(180deg, var(--c-gold), var(--c-gold-dark)) !important; color: var(--c-black) !important; } .answer-btn.correct { background: var(--c-green) !important; border-color: #66bb6a !important; } .answer-btn.wrong { background: var(--c-red) !important; border-color: #ef5350 !important; } .answer-btn.eliminated { visibility: hidden; height: 0; padding: 0; margin: 0; border: none; } .answer-letter { background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 4px; font-weight: 900; min-width: 28px; text-align: center; color: var(--c-gold); font-size: 0.9em; } /* === Modals === */ .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .modal.active { display: flex; } .modal-content { background: linear-gradient(180deg, var(--c-purple-mid), var(--c-purple-deep)); border: 3px solid var(--c-gold); border-radius: 16px; padding: 24px; max-width: 480px; width: 100%; text-align: center; box-shadow: 0 0 50px rgba(255,215,0,0.5); } .modal-content h2 { color: var(--c-gold); margin-bottom: 12px; font-size: 1.4em; } .modal-content p { color: #fff; margin-bottom: 10px; font-size: 1em; } .modal-close { background: var(--c-purple-light); border: 2px solid var(--c-gold); border-radius: 8px; padding: 10px 28px; color: var(--c-gold); font-weight: 700; margin-top: 12px; font-family: inherit; } /* === Result screen === */ .result-content { text-align: center; background: rgba(0,0,0,0.6); border: 3px solid var(--c-gold); border-radius: 16px; padding: 30px 20px; max-width: 500px; width: 100%; box-shadow: 0 0 50px rgba(255,215,0,0.5); } .result-content h1 { font-size: 2.5em; color: var(--c-gold); margin-bottom: 16px; font-style: italic; text-shadow: 0 0 20px var(--c-gold); } .result-content h1.lose { color: #f44336; text-shadow: 0 0 20px #f44336; } .result-msg { color: #fff; font-size: 1.2em; margin-bottom: 16px; } .result-prize { color: var(--c-gold); font-size: 2.2em; font-weight: 900; margin: 16px 0; text-shadow: 0 0 20px var(--c-gold); } .back-home-btn { background: linear-gradient(180deg, var(--c-purple-light), var(--c-purple-mid)); border: 2px solid var(--c-gold); border-radius: 10px; padding: 12px 30px; color: var(--c-gold); font-size: 1em; font-weight: 700; margin-top: 16px; font-family: inherit; } /* === $1M winner special === */ .winner-prize { background: linear-gradient(135deg, var(--c-gold) 0%, #ff8f00 100%); color: var(--c-black); padding: 16px 32px; border-radius: 12px; font-size: 2em; font-weight: 900; margin: 16px 0; animation: winner-pulse 1s ease-in-out infinite; } @keyframes winner-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 20px var(--c-gold); } 50% { transform: scale(1.05); box-shadow: 0 0 40px var(--c-gold); } } .email-form { background: rgba(0,0,0,0.4); border: 1px solid var(--c-gold); border-radius: 10px; padding: 16px; margin: 12px 0; } /* === Audio bar (bottom) === */ .money-tooltip { position: fixed; bottom: 4px; right: 8px; color: var(--c-gold-dark); font-size: 0.6em; opacity: 0.4; } /* === Responsive === */ @media (max-width: 600px) { body { font-size: 14px; } .screen { padding: 12px; } .millionaire-title { font-size: 2.4em; letter-spacing: 2px; } .millionaire-dollars { font-size: 1.4em; gap: 10px; } .start-btn { padding: 14px 40px; font-size: 1.1em; } .current-prize-amount { font-size: 1.8em; } .answers { grid-template-columns: 1fr; } .question-text { font-size: 1em; } .lifeline-btn { padding: 8px 12px; font-size: 0.8em; } .result-content { padding: 20px 16px; } .result-content h1 { font-size: 1.8em; } .result-prize, .winner-prize { font-size: 1.6em; padding: 12px 20px; } .timer-text { font-size: 0.85em; } }

📺 TVB 港版

🏆 玩家排行榜

📚 題目庫：-- 條｜已玩 -- / --

💰 百萬富翁

玩家

⏱️ 30s

第 1 題獎金

$100

第 1 題

題目載入中...

🏆 玩家排行榜

🔒 最終確認

👥 觀眾投票

🚪 確定棄權？

📞 問朋友

🏆 你係百萬富翁！