* { box-sizing: border-box; margin: 0; padding: 0; } :root{ --coral:#ff7f50; --pink:#ff9797; --deep:#e0567c; --soft:#ffeaea; --ink:#5a3a44; --muted:#9b7d86; } /* 由主題色自動衍生的淺色／陰影，讓所有配件跟著彩蛋配色改變 */ :root{ --line: color-mix(in srgb, var(--coral) 24%, #fff); /* 淺邊框 */ --tint: color-mix(in srgb, var(--coral) 9%, #fff); /* 淺底／hover */ --tint2: color-mix(in srgb, var(--coral) 20%, #fff); /* active 漸層深端 */ --chip: color-mix(in srgb, var(--pink) 30%, #fff); /* 標籤／小按鈕底 */ --chip-h: color-mix(in srgb, var(--pink) 45%, #fff); /* 標籤／小按鈕 hover */ --glow: color-mix(in srgb, var(--coral) 34%, transparent); /* 一般陰影 */ --glow-strong: color-mix(in srgb, var(--coral) 48%, transparent); /* hover／發光 */ --glow-deep: color-mix(in srgb, var(--deep) 26%, transparent); /* 卡片／唱片陰影 */ } /* 🥚 成員彩蛋配色（依玩家名字切換 ） */ :root[data-theme="wendy"]{ --coral:#2aa8dd; --pink:#74d0ef; --deep:#1c74a8; --soft:#e6f6fd; } :root[data-theme="irene"]{ --coral:#ff6f9c; --pink:#ffa9c6; --deep:#d64f78; --soft:#ffe9f0; } :root[data-theme="seulgi"]{ --coral:#ff9a2e; --pink:#ffc56b; --deep:#d47714; --soft:#fff1dc; } :root[data-theme="joy"]{ --coral:#3fb972; --pink:#8ad9a5; --deep:#2b8f52; --soft:#e5f8ec; } :root[data-theme="yeri"]{ --coral:#9a63f0; --pink:#c3a4f7; --deep:#6f42c4; --soft:#efe6fd; } html,body{ min-height:100%; } html{ background:#ffeaea; } /* 彩蛋背景（html 底色 + body 漸層），對應各成員色系 */ html[data-theme="wendy"]{ background:#e2f4fd; } html[data-theme="irene"]{ background:#ffe9f0; } html[data-theme="seulgi"]{ background:#fff1dc; } html[data-theme="joy"]{ background:#e5f8ec; } html[data-theme="yeri"]{ background:#efe6fd; } [data-theme="wendy"] body{ background: radial-gradient(circle at 12% 18%, #bfe9fb 0%, transparent 42%), radial-gradient(circle at 88% 12%, #a6dbff 0%, transparent 40%), radial-gradient(circle at 78% 88%, #c9f0ff 0%, transparent 45%), linear-gradient(135deg,#f2fbff,#e2f4fd); background-attachment:fixed; } [data-theme="irene"] body{ background: radial-gradient(circle at 12% 18%, #ffd1e2 0%, transparent 42%), radial-gradient(circle at 88% 12%, #ffc0d6 0%, transparent 40%), radial-gradient(circle at 78% 88%, #ffd9ea 0%, transparent 45%), linear-gradient(135deg,#fff5f9,#ffe9f0); background-attachment:fixed; } [data-theme="seulgi"] body{ background: radial-gradient(circle at 12% 18%, #ffe0b0 0%, transparent 42%), radial-gradient(circle at 88% 12%, #ffd28a 0%, transparent 40%), radial-gradient(circle at 78% 88%, #ffe9c2 0%, transparent 45%), linear-gradient(135deg,#fff9ef,#fff1dc); background-attachment:fixed; } [data-theme="joy"] body{ background: radial-gradient(circle at 12% 18%, #bfeccf 0%, transparent 42%), radial-gradient(circle at 88% 12%, #a6e6bd 0%, transparent 40%), radial-gradient(circle at 78% 88%, #cdf3d9 0%, transparent 45%), linear-gradient(135deg,#f2fdf6,#e5f8ec); background-attachment:fixed; } [data-theme="yeri"] body{ background: radial-gradient(circle at 12% 18%, #ddccf7 0%, transparent 42%), radial-gradient(circle at 88% 12%, #cbb4f5 0%, transparent 40%), radial-gradient(circle at 78% 88%, #e4d7fb 0%, transparent 45%), linear-gradient(135deg,#f8f4ff,#efe6fd); background-attachment:fixed; } body{ font-family:'Noto Sans TC','Noto Sans',Arial,sans-serif; color:var(--ink); background: radial-gradient(circle at 12% 18%, #ffd1dc 0%, transparent 42%), radial-gradient(circle at 88% 12%, #ffc48a 0%, transparent 40%), radial-gradient(circle at 78% 88%, #d4a0ff 0%, transparent 45%), linear-gradient(135deg,#fff5f5,#ffeaea); background-attachment:fixed; min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:28px 16px 60px; } .app{ width:100%; max-width:640px; } .card{ background:rgba(255,255,255,.82); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.7); border-radius:22px; box-shadow:0 18px 50px var(--glow-deep); padding:26px 24px; position:relative; z-index:9; } h1{cursor: default; font-size:26px; text-align:center; letter-spacing:1px; background:linear-gradient(135deg,var(--pink),var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent; } .sub{ text-align:center; color:var(--muted); font-size:13px; margin-top:6px; margin-bottom:20px; } /* 雙語：中文為主、英文為輔 */ .en{ font-weight:400; color:var(--muted); font-size:.78em; letter-spacing:.3px; } .en-block{ display:block; font-weight:400; color:var(--muted); font-size:11px; letter-spacing:.3px; margin-top:2px; } h1 .en-block{ font-size:13px; margin-top:4px; } .section-title{ cursor: default;font-size:15px; font-weight:700; margin:22px 0 10px; display:flex; align-items:center; gap:8px; } .section-title i{ color:var(--coral); } .section-title:first-of-type{ margin-top:4px; } .choices{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .choice{ border:2px solid var(--line); background:#fff; border-radius:14px; padding:12px 8px; text-align:center; cursor:pointer; font-size:14px; font-weight:600; transition:.15s; color:var(--ink); user-select:none; } .choice small{ display:block; font-weight:400; color:var(--muted); font-size:11px; margin-top:3px; } .choice:hover{ border-color:var(--pink); transform:translateY(-2px); } .choice.active{ border-color:var(--coral); background:linear-gradient(135deg,var(--tint),var(--tint2)); box-shadow:0 6px 16px var(--glow); } .rounds{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .rounds .choice{ flex:1; min-width:64px; } #customWrap{ display:none; gap:8px; flex-basis:100%; margin-top:4px;justify-content: right; flex-direction: column; align-items: end; } input[type=number],input[type=text]{ font-family:inherit; font-size:15px; color:var(--ink); border:2px solid var(--line); border-radius:12px; padding:10px 12px; width:100%; background:#fff; outline:none; transition:.15s; } input:focus{ border-color:var(--coral); } #customWrap input{ width: calc(100% / 4 - 10px); } .player-row{ display:flex; gap:8px; margin-bottom:9px; align-items:center; } .player-row .idx{ width:26px; height:26px; flex:0 0 26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--pink),var(--coral)); } .icon-btn{ border:none; background:var(--chip); color:var(--deep); width:40px; height:40px; flex:0 0 40px; border-radius:12px; cursor:pointer; font-size:15px; transition:.15s; } .icon-btn:hover{ background:var(--chip-h); } .icon-btn.add{ background:#e9fbe9; color:#3a9d5a; } .icon-btn.add:hover{ background:#d6f5d6; } .btn{ display:block; width:100%; border:none; cursor:pointer; font-family:inherit; font-size:17px; font-weight:700; letter-spacing:1px; color:#fff; background:linear-gradient(135deg,var(--pink),var(--coral)); padding:15px; border-radius:16px; margin-top:24px; box-shadow:0 10px 24px var(--glow); transition:.15s; } .btn span.en{color:#fff;} .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px var(--glow-strong); } .btn:active{ transform:translateY(0); } .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:0 10px 24px var(--glow); } .btn.ghost{ background:#fff; color:var(--deep); border:2px solid var(--line); box-shadow:none; } .btn.ghost span.en{color:var(--deep);} .btn.small{ font-size:14px; padding:11px; margin-top:0; } a.btn{ text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px; } /* 下載用的成績分享卡（離螢幕渲染） */ .share-card{ position:fixed; left:-9999px; top:0; width:400px; box-sizing:border-box; padding:36px 30px 28px; border-radius:26px; text-align:center; font-family:'Noto Sans TC','Noto Sans',Arial,sans-serif; color:var(--ink); background:linear-gradient(160deg, var(--soft), #fff 78%); border:3px solid var(--coral); } .share-card .sc-app{ font-size:16px; font-weight:800; color:var(--deep); letter-spacing:.5px; } .share-card .sc-name{ font-size:20px; font-weight:900; margin-top:18px; line-height:1.15; letter-spacing:.5px; color:var(--coral); } .share-card .sc-score{ font-size:20px; font-weight:700; margin-top:6px; color:var(--ink); } .share-card .sc-score b{ font-size:52px; color:var(--coral); vertical-align:-6px; } .share-card .sc-label{ font-size:13px; color:var(--muted); margin-top:2px; } .share-card .sc-scope{ display:inline-block; margin-top:12px; padding:6px 14px; border-radius:99px; font-size:13px; font-weight:700; color:var(--deep); background:#fff; border:2px solid var(--pink); } .share-card .sc-badge{ margin:20px auto 4px; padding:14px 16px; border-radius:16px; max-width:320px; background:#fff; border:2px solid var(--pink); box-shadow:0 8px 20px rgba(0,0,0,.10); font-size:20px; font-weight:800; color:var(--deep); line-height:1.3; } .share-card .sc-badge span{ display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:3px; } .share-card .sc-songs-title{ margin-top:20px; font-size:13px; font-weight:800; color:var(--deep); } .share-card .sc-songs{ margin-top:8px; display:flex; flex-direction:column; gap:5px; } .share-card .sc-songs div{ font-size:14px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--pink); border-radius:10px; padding:7px 10px; } .share-card .sc-foot{ margin-top:22px; font-size:12px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; } /* 答錯歌曲複習播放清單 */ .review-cta{ margin-top:22px; text-align:center; } .review-text{ font-size:13px; color:var(--deep); font-weight:700; margin-bottom:10px; } .hidden{ display:none !important; } /* Game */ .topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:10px; } .topbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;flex:1;} .roundtag{ font-weight:700; color:var(--deep); } .topbar-actions .replay{ padding:8px 12px; font-size:13px; } .bar{ height:8px; background:var(--chip); border-radius:99px; overflow:hidden; margin:10px 0 20px; } .bar > div{ height:100%; background:linear-gradient(90deg,var(--pink),var(--coral)); width:0; transition:.4s; } .disc-wrap{ text-align:center; margin:8px 0 20px; } .disc{ width:150px; height:150px; border-radius:50%; margin:0 auto; background: repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.06) 0 2px, transparent 2px 5px), conic-gradient(from 0deg,#ffb3c1,#ff7f50,#d4a0ff,#ffb3c1); display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 12px 30px rgba(224,86,124,.28); animation:spin 9s linear infinite; /* 平時慢慢轉 */ transition:box-shadow .3s; } .disc::after{ content:''; width:44px; height:44px; border-radius:50%; background:#fff; position:absolute; box-shadow:0 0 0 6px rgba(255,255,255,.35), inset 0 0 0 4px rgba(224,86,124,.15); } .disc i{ position:relative; z-index:1; font-size:30px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.2); animation:counter 9s linear infinite; } /* 圖示反向轉，維持直立 */ .disc.spin{ animation-duration:1.4s; box-shadow:0 12px 34px rgba(255,127,80,.55); } /* 播放時轉快＋發光 */ .disc.spin i{ animation-duration:1.4s; } .disc.paused, .disc.paused i{ animation-play-state:paused; } /* 揭曉時停住 */ @keyframes spin{ to{ transform:rotate(360deg); } } @keyframes counter{ to{ transform:rotate(-360deg); } } .eq{ display:flex; gap:4px; justify-content:center; height:26px; align-items:flex-end; margin-top:14px; } .eq span{ width:5px; background:linear-gradient(var(--pink),var(--coral)); border-radius:3px; height:8px; } .disc-wrap.playing .eq span{ animation:eq .8s ease-in-out infinite; } .disc-wrap.playing .eq span:nth-child(2){ animation-delay:.15s } .disc-wrap.playing .eq span:nth-child(3){ animation-delay:.3s } .disc-wrap.playing .eq span:nth-child(4){ animation-delay:.45s } .disc-wrap.playing .eq span:nth-child(5){ animation-delay:.1s } @keyframes eq{ 0%,100%{ height:8px } 50%{ height:26px } } .replay{ display:inline-flex; align-items:center; gap:8px; border:2px solid var(--line); background:#fff; color:var(--deep); font-weight:700; font-size:14px; padding:9px 18px; border-radius:99px; cursor:pointer; transition:.15s; } .replay:hover{ background:var(--tint); } .timer{ text-align:center; font-size:34px; font-weight:800; color:var(--coral); font-variant-numeric:tabular-nums; margin-bottom:6px; } .timer.warn{ color:#e23; animation:pulse .5s infinite; } @keyframes pulse{ 50%{ opacity:.4 } } /* Joy 彩蛋提示 */ .joy-hint{ margin-top:12px; padding:10px 14px; border-radius:12px; text-align:center; font-size:13px; font-weight:700; color:var(--deep); background:var(--tint); border:1px dashed var(--coral); animation:achPop .3s ease; } .joy-hint i{ margin-right:6px; color:var(--coral); } .guess-row{ display:flex; gap:8px; } .guess-row input{ flex:1; } .guess-row .btn{ width:auto; margin-top:0; padding:12px 20px; } .guess-row .btn.mic{ padding:12px 14px; background:#fff; color:var(--deep); border:2px solid var(--line); box-shadow:none; } .guess-row .btn.mic:hover{ background:var(--tint); } .guess-row .btn.mic.listening{ background:linear-gradient(135deg,var(--pink),var(--coral)); color:#fff; border-color:transparent; animation:pulse .8s infinite; } .pbtns{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .pbtns.solo{ grid-template-columns:1fr; } .pbtn{ border:2px solid var(--line); background:#fff; border-radius:14px; padding:14px; cursor:pointer; font-size:15px; font-weight:700; color:var(--ink); transition:.15s; display:flex; align-items:center; gap:8px; justify-content:center; } .pbtn:hover{ border-color:var(--coral); background:var(--tint); transform:translateY(-2px); } .pbtn .idx{ width:24px; height:24px; border-radius:50%; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--pink),var(--coral)); } .pbtn.none{ grid-column:1/-1; border-style:dashed; color:var(--muted); } .pbtn.sel{ border-color:var(--coral); background:var(--tint); box-shadow:0 8px 20px var(--glow); transform:translateY(-1px); } .pbtn.sel .idx{ box-shadow:0 0 0 3px var(--glow); } /* Reveal */ .reveal{ margin-top:20px; text-align:center; } .reveal .cover{ width:120px; height:120px; border-radius:16px; object-fit:cover; box-shadow:0 10px 26px rgba(0,0,0,.16); margin-bottom:12px; } .verdict{ font-size:20px; font-weight:800; margin-bottom:4px; } .verdict.ok{ color:#2fae6a; } .verdict.no{ color:#e23; } .song-title{ font-size:19px; font-weight:700; } .song-album{ color:var(--muted); font-size:13px; margin-top:2px; } .yourguess{ font-size:13px; color:var(--muted); margin-top:8px; } .badge{ display:inline-block; font-size:11px; padding:2px 10px; border-radius:99px; background:var(--chip); color:var(--deep); } /* Results */ .rank{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:#fff; margin-bottom:10px; border:2px solid var(--line); } .rank .medal{ font-size:22px; width:34px; text-align:center; } .rank .nm{ flex:1; font-weight:700; } .rank .sc{ font-weight:800; color:var(--coral); font-size:18px; } .rank.top{ background:linear-gradient(135deg,#fff7e6,#fff0f0); border-color:#ffcf8a; } .summary{ text-align:center; font-size:16px; margin-bottom:18px; } .summary b{ color:var(--coral); font-size:22px; } .list-title{ font-weight:700; margin:16px 0 8px; display:flex; align-items:center; gap:7px; } .list-title.ok{ color:#2fae6a } .list-title.no{ color:#e23 } .item{ display:flex; align-items:center; gap:10px; padding:8px 10px; background:#fff; border-radius:11px; margin-bottom:7px; font-size:14px; } .item img{ width:34px; height:34px; border-radius:8px; object-fit:cover; } .item .a{ color:var(--muted); font-size:12px; margin-left:auto; } #yt{ position:fixed; left:-9999px; top:-9999px; width:1px; height:1px; } .foot{ text-align:center; color:var(--muted); font-size:12px; margin-top:18px;cursor: default; } /* 稱號成就徽章 */ .achievement{ margin:16px 0 6px; padding:18px 16px; border-radius:16px; text-align:center; background:linear-gradient(135deg,var(--tint),var(--tint2)); border:2px solid var(--line); box-shadow:0 8px 22px var(--glow); animation:achPop .5s ease; } .ach-label{ font-size:12px; font-weight:700; letter-spacing:1px; color:var(--deep); } .ach-label i{ margin-right:6px; color:var(--coral); } .ach-title{ font-size:23px; font-weight:800; margin-top:8px; line-height:1.25; background:linear-gradient(135deg,var(--pink),var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent; } .ach-sub{ font-size:13px; color:var(--muted); margin-top:4px; } @keyframes achPop{ 0%{ opacity:0; transform:scale(.9) translateY(8px) } 100%{ opacity:1; transform:none } } /* 成就彈窗 */ .modal{ position:fixed; inset:0; z-index:50; padding:20px; display:flex; align-items:center; justify-content:center; background:rgba(90,58,68,.45); backdrop-filter:blur(4px); } .modal-card{cursor: default; position:relative; width:100%; max-width:460px; max-height:85vh; overflow:auto; background:#fff; border-radius:22px; padding:24px 22px; box-shadow:0 20px 50px rgba(0,0,0,.25); animation:achPop .25s ease; } .modal-card h2{ font-size:22px; text-align:center;} .modal-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border:none; cursor:pointer; border-radius:50%; background:var(--chip); color:var(--deep); font-size:15px; } .modal-close:hover{ background:var(--chip-h); } .ach-count{ text-align:center; color:var(--muted); font-size:13px; margin:8px 0 4px; font-weight:700; } .ach-item{ display:flex; gap:12px; align-items:center; margin-top:10px; padding:12px; border:2px solid var(--line); border-radius:14px; } .ach-item.earned{ background:linear-gradient(135deg,var(--tint),var(--tint2)); border-color:var(--line); } .ach-item.locked{ opacity:.6; filter:grayscale(.55); } .ach-item .medal{ flex:0 0 42px; width:42px; height:42px; border-radius:50%; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--pink),var(--coral)); } .ach-item .info .t{ font-weight:800; font-size:16px; line-height:1.3; } .ach-item .info .d{ font-size:12px; color:var(--muted); margin-top:2px; } /* 專輯封面輪播裝飾：固定於視窗最底、全寬，僅開始畫面顯示 */ @keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .album-marquee-clip{ position:fixed; bottom:0; left:0; width:100%; overflow:hidden; pointer-events:none; z-index:5; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); } /* 進入遊戲／結果（#setup 隱藏）時，收起裝飾 */ body:has(#setup.hidden) .album-marquee-clip{ display:none; } /* 開始畫面預留底部空間，避免蓋住按鈕 */ body:has(#setup:not(.hidden)){ padding-bottom:clamp(10px, 10vw, 210px); } .album-marquee{ height:clamp(96px, 14vw, 150px); overflow:hidden; } .marquee-track{ display:flex; align-items:flex-end; gap:clamp(8px, 1vw, 14px); width:max-content; animation:marquee-scroll 45s linear infinite; } .marquee-track img{ width:clamp(96px, 14vw, 150px); height:clamp(96px, 14vw, 150px); object-fit:cover; flex-shrink:0; border-radius:14px 14px 0 0; box-shadow:0 -2px 12px rgba(0,0,0,.12); } h2.about-card{cursor: default; text-align: center; font-size: 20px; margin-top: 10px; } h2.about-card span { color: #f09191; } h2.about-card span:nth-child(2) { color: #ffc31f; } h2.about-card span:nth-child(3) { color: #20c1f1; } h2.about-card span:nth-child(4) { color: #71fc31; } h2.about-card span:last-child{ color: #c175ff; } .powered{ text-align:center; display:block; margin-top:12px; font-size: 12px; color: #adadad; } @media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } } @media (max-width: 768px) { .foot{display:none;} #customWrap input{width:100%;} } /* ---------- 桌面：多人時左右分欄，較好利用空間 ---------- */ @media (min-width: 820px){ /* 多人時加寬容器；單人維持原本置中窄版 */ .app:has(#game.multi:not(.hidden)){ max-width:980px; } /* 遊戲畫面（僅多人）：左（唱片）／右（作答、揭曉） */ #game.multi{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:40px; row-gap:6px; align-items:start; } #game.multi > .topbar{ grid-column:1 / -1; grid-row:1; } #game.multi > .bar{ grid-column:1 / -1; grid-row:2; } #game.multi > .disc-wrap{ grid-column:1; grid-row:3; align-self:center; margin:0; } /* 三種作答狀態同時只顯示一個，統一放在右欄 */ #game.multi > #soloArea, #game.multi > #multiArea, #game.multi > #reveal{ grid-column:2; grid-row:3; align-self:center; } }