body { font-family: Arial, sans-serif; background-color: #f4f4f9; color: #333; margin: 0; /* padding: 20px; */ padding: 0; display: flex; justify-content: center; } .container { width: 90%; max-width: 800px; } .card { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } input[type="text"], input[type="password"], textarea { width: 100%; padding: 10px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #5cb85c; color: white; padding: 10px 15px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background-color: #4cae4c; } .message { margin-top: 10px; font-weight: bold; color: red; } #api-response { background: #e9e9e9; padding: 10px; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; } .image-container { /* 這是上次的關鍵設定，保持不變 */ position: relative; display: block; /* 讓它變成區塊元素，才能使用 margin: auto 置中 */ max-width: 1080px; /* 設置一個最大寬度，避免圖片在超大螢幕上過度伸展 */ /* ⭐⭐⭐ 新增：讓這個容器在父元素（即）中水平置中 ⭐⭐⭐ */ margin-left: auto; margin-right: auto; /* 或是更簡潔的寫法： margin: 0 auto; */ } /* 其他樣式保持不變 */ .image-container img { display: block; width: 100%; height: auto; } .overlay-text { /* display: none; 初始隱藏 */ position: absolute; /* ... 保持您的 top/left/transform 定位數值 ... */ /* 文字樣式美化 */ color: white; /* 白字 */ background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，增加可讀性 */ padding: 10px 20px; /*內距 */ border-radius: 5px; /* 圓角 */ font-size: 2rem; /* 字體大小 */ font-weight: bold; pointer-events: none; /* 讓滑鼠點擊穿透文字直接點到圖片 (選用) */ } .overlay-text-center { transform: translate(-50%, -50%); } .overlay-basketball { position: absolute; } .image-wrapper { /* 必須設定 relative，作為內部 absolute 元素的座標基準點 */ position: absolute; /* 讓容器的寬高自動配合其內容物 () 的大小 */ display: inline-block; width: 114px; height: 114px; } .image-wrapper img { /* 讓圖片成為重疊的基底，並給予一個 ID 或 Class */ display: block; width: 100%; } .overlapping-content { /* display: none; 初始隱藏 */ position: absolute; /* 絕對定位：允許元素重疊 */ /* ⭐ 經典的絕對定位置中技巧 ⭐ */ top: 50%; left: 50%; /* 讓元素以自己的中心點而非左上角對齊 top/left 50% 的位置 */ transform: translate(-50%, -50%); font-size: 5rem; color: yellow; font-weight: bold; } .member-label { right: 0px; top: 0px; } .score-label { left: 368px; top: 390px; color: yellow; font-size: 2.4rem; width: 200px; text-align: right; } .time-label { left: 800px; top: 390px; color: yellow; font-size: 2.4rem; width: 80px; text-align: right; } .bottom-left-yellow-box { left: 0px; top: 1385px; height: 130px; width: 595px; border: 4px solid white; border-radius: 10px; position: absolute; } .bottom-right-yellow-box { right: 0px; top: 1385px; height: 130px; width: 595px; border: 4px solid yellow; border-radius: 10px; position: absolute; } .hint-box { position: absolute; left: 50px; top: 700px; width: 936px; border: 2px solid #000; padding: 20px; background-color: rgba(0, 0, 0, 0.75); border-radius: 10px; color: yellow; font-size: 2.25rem; } .qrcode-box { position: absolute; left: 50px; bottom: 50px; border: 2px solid #000; padding: 20px; background-color: rgba(0, 0, 0, 0.5); border-radius: 10px; } .qrcode-box .text { color: white; text-align: center; width: 100%; font-size: 2rem; padding-bottom: 10px; margin: 0 auto; } .qrcode-box .img { width: 304px; height: 304px; border: 4px solid white; } .flash { animation: blink 0.5s ease-in-out; } @keyframes blink { 0% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } } /* ============================ SweetAlert2 - Esports Theme (放大版) ============================ */ /* Popup 主體 */ .esports-popup { background: rgba(10, 15, 30, 0.7) !important; border: 1px solid rgba(0, 229, 255, 0.3); backdrop-filter: blur(12px); box-shadow: 0 0 30px rgba(0, 229, 255, 0.25), inset 0 0 20px rgba(0, 229, 255, 0.1); border-radius: 12px; color: #e0f7ff; font-family: "Segoe UI", "Noto Sans TC", sans-serif; padding: 36px 40px; /* 加大 padding 呼吸感 */ } /* 標題 */ .esports-title { font-size: 36px; /* 原本 28 → 36 */ font-weight: 900; letter-spacing: 2px; color: #00e5ff; text-shadow: 0 0 10px rgba(0, 229, 255, 0.9), 0 0 20px rgba(0, 229, 255, 0.5); text-align: center; } /* 表格 */ .esports-table { width: 100%; border-collapse: collapse; margin-top: 16px; } .esports-table th { font-size: 22px; /* 原本 18 → 22 */ padding-bottom: 10px; color: #7defff; border-bottom: 1px solid rgba(0, 229, 255, 0.4); text-align: left; } .esports-table td { font-size: 24px; /* 原本 20 → 24 */ padding: 10px 0; } .esports-table td.score { font-size: 26px; /* 原本 22 → 26 */ font-weight: 700; color: #00ff9c; text-align: right; text-shadow: 0 0 8px rgba(0, 255, 156, 0.7); } /* 總分 */ .esports-total { margin-top: 20px; padding-top: 12px; font-size: 32px; /* 原本 26 → 32 */ font-weight: 900; color: #ffd54f; text-align: center; text-shadow: 0 0 12px rgba(255, 213, 79, 0.9), 0 0 24px rgba(255, 213, 79, 0.5); } /* Timer progress bar */ .swal2-timer-progress-bar-container { background: rgba(255, 255, 255, 0.08); height: 8px; /* 原本 6px → 8px */ } .esports-timer-bar { background: linear-gradient(90deg, #00e5ff, #00ff9c, #ffd54f); box-shadow: 0 0 10px #00e5ff, 0 0 20px #00ff9c; }