/* 🃏 記憶翻牌對決 */
.mg-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    /* 可愛圓體：英文數字用 Nunito，中文用 jf 粉圓（Huninn） */
    font-family: 'Nunito', 'Huninn', sans-serif;
}
.mg-overlay[hidden] { display: none; }
.mg-overlay button { font-family: inherit; }

.mg-panel {
    position: relative;   /* 玩法教學面板蓋在這裡面 */
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    height: min(860px, 100%);
    padding: 14px 16px 16px;
    border: 4px solid #fbcfe8;
    border-radius: 24px;
    background: #fffaf5;
    box-shadow: 0 10px 0 rgba(251, 207, 232, 0.8), 0 20px 40px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.mg-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mg-title { font-size: 1.3rem; font-weight: 900; color: #4a3b3b; min-width: 0; }
.mg-header-btns { flex: none; display: flex; align-items: center; gap: 8px; }
.mg-close {
    flex: none;
    width: 40px; height: 40px;
    border: none; border-radius: 50%;
    background: #fee2e2; color: #b91c1c;
    font-size: 1rem; font-weight: 900; cursor: pointer;
}
/* 📖 玩法教學按鈕（右上角，關閉鈕旁邊） */
.mg-rules-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 6px 14px;
    border: 3px solid #fbcfe8; border-radius: 999px;
    background: #fff1f6; color: #db2777;
    font-size: 0.95rem; font-weight: 900; cursor: pointer;
    box-shadow: 0 3px 0 #fbcfe8;
}
.mg-rules-btn:active { transform: translateY(3px); box-shadow: none; }
.mg-rules-btn.is-open { background: #fbcfe8; border-color: #f9a8d4; color: #be185d; box-shadow: 0 3px 0 #f9a8d4; }

/* 等待畫面 */
.mg-lobby, .mg-result {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    color: #4a3b3b;
}
/* 等待畫面內容比較多：塞不下就捲動，放得下就置中 */
.mg-lobby { min-height: 0; overflow-y: auto; justify-content: flex-start; justify-content: safe center; padding: 4px 4px 10px; gap: 16px; }
.mg-lobby[hidden], .mg-result[hidden], .mg-game[hidden], .mg-host-only[hidden], .mg-wait[hidden] { display: none; }

/* 🃏 大標題 */
.mg-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mg-hero-cards { display: flex; gap: 6px; margin-bottom: 2px; }
.mg-hero-cards i {
    width: 46px; height: 58px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-style: normal; font-size: 1.5rem;
    border: 3px solid #93c5fd;
    background: repeating-linear-gradient(45deg, #dbeafe 0 7px, #bfdbfe 7px 14px);
    box-shadow: 0 4px 0 #93c5fd;
    animation: mg-hero-bob 2.4s ease-in-out infinite;
}
.mg-hero-cards i:nth-child(1) { transform: rotate(-10deg); }
.mg-hero-cards i:nth-child(2) {
    width: 54px; height: 68px; font-size: 1.9rem;
    border-color: #f9a8d4; background: #fff; box-shadow: 0 4px 0 #f9a8d4;
    animation-delay: 0.3s;
}
.mg-hero-cards i:nth-child(3) { transform: rotate(10deg); animation-delay: 0.6s; }
@keyframes mg-hero-bob { 50% { translate: 0 -6px; } }
.mg-hero-title {
    margin: 0;
    font-size: clamp(2rem, 6vw, 3.1rem); font-weight: 900; line-height: 1.15; letter-spacing: 2px;
    color: #db2777;
    text-shadow: 0 3px 0 #fbcfe8, 0 6px 0 rgba(219, 39, 119, 0.12);
}
.mg-hero-sub { margin: 0; font-size: 1rem; font-weight: 800; color: #7c6a6a; }

/* 📖 規則小卡：等待畫面和玩法教學面板共用 */
.mg-rule-cards {
    width: min(760px, 100%);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
    text-align: left;
}
.mg-rule {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    border: 3px solid color-mix(in srgb, var(--rc) 30%, #fff);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--rc) 22%, #fff);
}
.mg-rule-icon {
    flex: none; width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; line-height: 1;
    background: color-mix(in srgb, var(--rc) 14%, #fff);
}
.mg-rule-body { min-width: 0; }
.mg-rule-title { font-size: 1.08rem; font-weight: 900; color: var(--rc); margin: 2px 0 4px; }
.mg-rule-text { margin: 0; font-size: 0.95rem; font-weight: 800; line-height: 1.65; color: #4a3b3b; overflow-wrap: anywhere; }
.mg-rule-text b { color: var(--rc); font-weight: 900; }

.mg-wins { margin: 0; font-weight: 900; color: #a16207; }
.mg-wait { font-weight: 900; color: #64748b; }
.mg-lobby-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mg-rules-more {
    padding: 10px 22px;
    border: 3px solid #fbcfe8; border-radius: 16px;
    background: #fff1f6; color: #db2777;
    font-size: 1.05rem; font-weight: 900; cursor: pointer;
    box-shadow: 0 4px 0 #fbcfe8;
}
.mg-rules-more:active { transform: translateY(4px); box-shadow: none; }

/* 📖 玩法教學面板：電腦版靠右邊，下面的牌桌還看得到 */
.mg-rules-sheet {
    position: absolute; inset: 0; z-index: 30;
    display: flex; justify-content: flex-end; align-items: stretch;
    padding: 10px;
    border-radius: inherit;
    background: rgba(74, 59, 59, 0.18);
}
.mg-rules-sheet[hidden] { display: none; }
/* 🏠 從主頁直接打開小丑配色（openJokerPicker）：翻牌大視窗變透明、其他內容藏起來，只露出置中的選單 */
.mg-overlay.is-pick-only { z-index: 10050; }   /* 要蓋過百寶袋視窗（z-index 10000） */
.mg-overlay.is-pick-only .mg-panel { background: transparent; border-color: transparent; box-shadow: none; }
.mg-overlay.is-pick-only .mg-panel > :not(.mg-pick-sheet) { visibility: hidden; }
.mg-overlay.is-pick-only .mg-pick-sheet { justify-content: center; align-items: center; background: transparent; }
.mg-overlay.is-pick-only .mg-pick-card { max-height: 100%; }
.mg-rules-card {
    width: min(420px, 100%);
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px;
    border: 3px solid #c4b5fd; border-radius: 20px;
    background: #fffaf5;
    box-shadow: 0 6px 0 #c4b5fd, 0 16px 32px rgba(91, 33, 182, 0.2);
    animation: mg-rules-in-side 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.2);
}
@keyframes mg-rules-in-side { from { transform: translateX(40px); opacity: 0; } }
@keyframes mg-rules-in-up { from { transform: translateY(60px); opacity: 0; } }
.mg-rules-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mg-rules-title { font-size: 1.35rem; font-weight: 900; color: #6d28d9; }
/* 對局進行中：顯示現在輪到誰 */
.mg-rules-live { padding: 8px 12px; border-radius: 14px; background: #f1f5f9; border: 2px dashed #cbd5e1; }
.mg-rules-live[hidden] { display: none; }
.mg-rules-live-status { font-size: 0.95rem; font-weight: 900; color: #475569; }
.mg-rules-live-note { font-size: 0.78rem; font-weight: 800; color: #94a3b8; margin-top: 2px; }
.mg-rules-live.is-mine { background: #fdf2f8; border-color: #f472b6; animation: mg-live-pulse 1.2s ease-in-out infinite; }
.mg-rules-live.is-mine .mg-rules-live-status { color: #db2777; }
@keyframes mg-live-pulse { 50% { box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.25); } }
.mg-rules-list {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    padding: 2px 2px 6px;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* 面板底部的大按鈕用淺粉紅（要寫成 .mg-start.mg-rules-done，不然會被後面的 .mg-start 蓋掉） */
.mg-start.mg-rules-done {
    flex: none; width: 100%;
    background: #fbcfe8; color: #be185d; box-shadow: 0 5px 0 #f9a8d4;
}
.mg-start.mg-rules-done:active { box-shadow: none; }
.mg-host-only { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mg-label { font-weight: 900; }
.mg-pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mg-pair-btn {
    min-width: 76px;
    padding: 10px 14px;
    border: 3px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
}
.mg-pair-btn.is-active { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.mg-start {
    padding: 12px 28px;
    border: none;
    border-radius: 16px;
    background: #f472b6;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 5px 0 #db2777;
}
.mg-start:active { transform: translateY(4px); box-shadow: none; }

/* 對決中 */
.mg-game { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.mg-scores { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-score {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 4px;
    border: 3px solid transparent;
    border-radius: 999px;
    background: #f1f5f9;
    font-weight: 800;
    color: #334155;
    font-size: 0.9rem;
}
.mg-score.is-turn { border-color: #f472b6; background: #fdf2f8; }
.mg-score.is-me .mg-score-name { color: #db2777; }
.mg-score-icon { width: 30px; height: 26px; }
.mg-score-icon svg { width: 100%; height: 100%; }
.mg-score-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-score-num { min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: #fff; text-align: center; }

.mg-status { font-size: 1.02rem; font-weight: 900; color: #64748b; min-height: 1.4em; }
.mg-status.is-mine { color: #db2777; }

.mg-board-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mg-board { display: grid; gap: 6px; justify-content: center; }

.mg-card {
    aspect-ratio: 4 / 5;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    perspective: 600px;
}
.mg-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease;
    transform-style: preserve-3d;
}
.mg-card.is-flipped .mg-inner { transform: rotateY(180deg); }
.mg-back, .mg-front {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    backface-visibility: hidden;
    box-sizing: border-box;
}
.mg-back {
    --back-icon: '🫧';
    border: 3px solid #93c5fd;
    background: repeating-linear-gradient(45deg, #dbeafe 0 8px, #bfdbfe 8px 16px);
    font-size: clamp(0.8rem, 2.5vw, 1.4rem);
}
.mg-back::after { content: var(--back-icon); }
.mg-card:not(.is-flipped):hover .mg-back { border-color: #f472b6; }

/* 🎴 卡背（3 勝解鎖，只有自己的畫面看得到）：牌桌 #mgBoard 和選卡背的小樣本都用 data-back
   主題是「心情漂流瓶」：大海、漂流瓶、瓶中信、浪花、夜海、沙灘、五個心情海域、海兔 */

/* 漂流瓶：藍綠海水＋一個裝著信的軟木塞瓶子 */
[data-back="bottle"] .mg-back {
    --back-icon: ''; border-color: #14b8a6;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 10px), linear-gradient(#99f6e4, #5eead4);
}
/* 瓶中信：米黃信紙＋橫線，左邊一條紅色邊線 */
[data-back="letter"] .mg-back {
    --back-icon: '💌'; border-color: #f59e0b;
    background: linear-gradient(90deg, transparent 18%, rgba(244, 114, 182, 0.55) 18% 21%, transparent 21%), repeating-linear-gradient(180deg, #fffbeb 0 8px, #fde68a 8px 9.5px);
}
/* 浪花朵朵：一層層半圓浪花 */
[data-back="ocean"] .mg-back {
    --back-icon: '🌊'; border-color: #0ea5e9;
    background: radial-gradient(circle at 50% 100%, transparent 5px, #7dd3fc 5.5px 7.5px, transparent 8px) 0 0 / 16px 10px, #e0f2fe;
}
/* 夜海星光：深藍夜空，黃星星＋白星星，上淡下深 */
[data-back="stars"] .mg-back {
    --back-icon: '🌙'; border-color: #1e3a8a;
    background: radial-gradient(circle, #fde68a 1.5px, transparent 2px) 0 0 / 14px 14px, radial-gradient(circle, #fff 1px, transparent 1.5px) 7px 7px / 14px 14px, linear-gradient(#1e3a8a, #172554);
}
/* 沙灘貝殼：沙色＋細沙點點 */
[data-back="sand"] .mg-back {
    --back-icon: '🐚'; border-color: #d97706;
    background: radial-gradient(circle, rgba(180, 83, 9, 0.28) 1px, transparent 1.5px) 0 0 / 9px 9px, radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1.5px) 4px 5px / 9px 9px, #fde68a;
}
/* 心情彩虹：五個心情海域的代表色（憤怒、秘密、破碎、厭世、開心） */
[data-back="mood"] .mg-back {
    --back-icon: '💭'; border-color: #f472b6;
    background: repeating-linear-gradient(135deg, #fca5a5 0 7px, #c4b5fd 7px 14px, #93c5fd 14px 21px, #cbd5e1 21px 28px, #fde68a 28px 35px);
}
/* 海兔家族：粉紅點點＋一隻小海兔 */
[data-back="bunny"] .mg-back {
    --back-icon: ''; border-color: #f472b6;
    background: radial-gradient(circle, #fbcfe8 2.5px, transparent 3px) 0 0 / 12px 12px, #fff1f6;
}
/* 漂流瓶、海兔家族沒有合適的表情符號，用自己畫的小圖 */
[data-back="bottle"] .mg-back::after,
[data-back="bunny"] .mg-back::after {
    content: ''; width: 58%; aspect-ratio: 1;
    background: center / contain no-repeat;
}
[data-back="bottle"] .mg-back::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(-25 20 20)'%3E%3Crect x='16' y='3' width='8' height='6' rx='2' fill='%23d6a36a' stroke='%2392400e' stroke-width='2'/%3E%3Cpath d='M16 9h8v4c0 1 5 2 5 7v12a4 4 0 0 1-4 4H15a4 4 0 0 1-4-4V20c0-5 5-6 5-7z' fill='%23f0fdfa' stroke='%230f766e' stroke-width='2.2' stroke-linejoin='round'/%3E%3Crect x='15' y='20' width='10' height='11' rx='2' fill='%23fef3c7' stroke='%23d97706' stroke-width='1.6'/%3E%3Cpath d='M17 24h6M17 27h4' stroke='%23d97706' stroke-width='1.3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}
[data-back="bunny"] .mg-back::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25 10 290 220'%3E%3Cg stroke='%23be185d' stroke-width='9' stroke-linejoin='round'%3E%3Cpath d='M250 170C270 180 300 190 290 140C280 100 250 140 240 170Z' fill='%23f9a8d4'/%3E%3Cpath d='M70 190C20 180 30 120 90 110C160 100 220 105 260 130C290 150 280 200 200 210C130 220 90 200 70 190Z' fill='%23ffffff'/%3E%3Cpath d='M100 105C80 50 95 20 110 25C125 30 120 90 115 105Z' fill='%23f9a8d4'/%3E%3Cpath d='M145 100C135 45 160 15 175 25C190 35 165 85 160 100Z' fill='%23f9a8d4'/%3E%3C/g%3E%3Cellipse cx='95' cy='162' rx='14' ry='8' fill='%23fda4af'/%3E%3Cellipse cx='165' cy='162' rx='14' ry='8' fill='%23fda4af'/%3E%3Ccircle cx='110' cy='150' r='10' fill='%232c3e50'/%3E%3Ccircle cx='150' cy='150' r='10' fill='%232c3e50'/%3E%3C/svg%3E");
}
.mg-front {
    transform: rotateY(180deg);
    overflow: hidden;
}
.mg-card.is-matched { cursor: default; }
.mg-card.is-matched .mg-front { opacity: 0.5; }
.mg-card.is-matched.is-mine .mg-front { opacity: 1; box-shadow: 0 0 0 3px #f472b6; }
.mg-card.is-wrong .mg-front { box-shadow: 0 0 0 3px #ef4444; }
.mg-card.is-wrong .mg-face { animation: mg-shake 0.35s; }

/* 🃏 牌面：主色外框＋雙框＋圓形徽章＋底部名牌，左上角是點數字和符號（像撲克牌，一眼認得出來）
   --u 是牌寬的 1%，字和框都照牌的大小等比例縮放 */
.mg-face {
    --u: calc(var(--mg-w, 100) * 0.01px);
    position: absolute; inset: 0;
    background: var(--c);
    border-radius: inherit;
}
.mg-face::before {
    content: ''; position: absolute; inset: calc(var(--u) * 5);
    border-radius: calc(var(--u) * 7);
    background: var(--bg);
    box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--bg), inset 0 0 0 calc(var(--u) * 4.5) var(--c);
}
.mg-idx {
    position: absolute; left: calc(var(--u) * 11); top: calc(var(--u) * 9); z-index: 1;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.mg-idx b { font-size: calc(var(--u) * 19); font-weight: 900; color: var(--o); }
.mg-idx i { font-style: normal; font-size: calc(var(--u) * 13); margin-top: calc(var(--u) * 1.5); }
.mg-medal {
    position: absolute; left: 55%; top: 50%; z-index: 1;
    width: calc(var(--u) * 58); height: calc(var(--u) * 58);
    transform: translate(-50%, -50%);
    border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 calc(var(--u) * 2) var(--c), 0 0 0 calc(var(--u) * 4.5) var(--bg), 0 0 0 calc(var(--u) * 5.5) var(--c);
    display: flex; align-items: center; justify-content: center;
}
.mg-front .mg-medal svg { width: 86%; height: auto; }
.mg-ribbon {
    position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--u) * 9); z-index: 1;
    height: calc(var(--u) * 14); border-radius: 99px;
    background: var(--o); color: var(--bg);
    font-weight: 900; font-size: calc(var(--u) * 9); line-height: 1;
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap; overflow: hidden;
}
/* 牌太小（50 組之類）：名字讀不到，只留色條 */
.mg-board.is-tiny .mg-ribbon { font-size: 0; height: calc(var(--u) * 8); }
/* 小牌：角落的字放大、符號拿掉，海兔徽章縮小往右下，一眼還是看得到字 */
.mg-board.is-tiny .mg-idx { left: calc(var(--u) * 9); top: calc(var(--u) * 6); }
.mg-board.is-tiny .mg-idx b { font-size: calc(var(--u) * 30); }
.mg-board.is-tiny .mg-idx i { display: none; }
.mg-board.is-tiny .mg-medal { left: 60%; top: 58%; width: calc(var(--u) * 52); height: calc(var(--u) * 52); }
.mg-joker-icon { font-size: calc(var(--u) * 34); line-height: 1; }

@keyframes mg-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* 結果 */
.mg-result-title { font-size: 1.8rem; font-weight: 900; }
.mg-ranking { margin: 0; padding: 0 0 0 1.4em; min-width: min(320px, 90%); text-align: left; }
.mg-ranking li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 4px; font-weight: 800; }
.mg-ranking li.is-winner { color: #db2777; }
.mg-note { margin: 0; color: #64748b; font-weight: 700; }

@media (max-width: 600px) {
    .mg-overlay { padding: calc(6px + env(safe-area-inset-top, 0px)) 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
    .mg-panel { padding: 10px; border-radius: 18px; }
    .mg-title { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mg-board { gap: 4px; }
    .mg-back { border-width: 2px; }
    .mg-back, .mg-front { border-radius: 6px; }

    /* 📱 等待畫面：規則小卡一欄、字稍微縮小 */
    .mg-lobby { gap: 12px; }
    .mg-hero-cards i { width: 38px; height: 48px; font-size: 1.2rem; }
    .mg-hero-cards i:nth-child(2) { width: 44px; height: 56px; font-size: 1.5rem; }
    .mg-hero-title { letter-spacing: 1px; }
    .mg-hero-sub { font-size: 0.9rem; padding: 0 8px; }
    .mg-rule-cards { grid-template-columns: 1fr; gap: 8px; }
    .mg-rule { padding: 10px 12px; gap: 10px; border-radius: 16px; }
    .mg-rule-icon { width: 38px; height: 38px; font-size: 1.25rem; border-radius: 12px; }
    .mg-rule-title { font-size: 1rem; }
    .mg-rule-text { font-size: 0.88rem; line-height: 1.6; }
    .mg-lobby-links { width: 100%; }
    .mg-lobby-links > button { flex: 1 1 140px; }
    .mg-pair-btn { min-width: 64px; min-height: 44px; padding: 8px 10px; }
    .mg-start { min-height: 48px; }

    /* 📱 玩法教學面板：從下面滑上來，上面留一點看得到牌桌和狀態列 */
    .mg-rules-sheet { align-items: flex-end; padding: 0; }
    .mg-rules-card {
        width: 100%; max-height: 82%;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        border-radius: 22px 22px 16px 16px;
        animation-name: mg-rules-in-up;
    }
    .mg-rules-title { font-size: 1.2rem; }
}
/* 📱 很窄的手機：教學按鈕只留圖示，標題才放得下 */
@media (max-width: 380px) {
    .mg-rules-btn { padding: 6px 10px; }
    .mg-rules-btn span:last-child { display: none; }
}
/* 📱 手機橫放（很矮）：教學面板改回靠右，不然只剩一點點高度 */
@media (max-height: 500px) and (min-width: 560px) {
    .mg-rules-sheet { align-items: stretch; justify-content: flex-end; padding: 6px; }
    .mg-rules-card { width: min(380px, 60%); max-height: none; border-radius: 18px; animation-name: mg-rules-in-side; }
    .mg-hero-cards { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mg-hero-cards i, .mg-rules-card, .mg-rules-live.is-mine { animation: none; }
}

/* 📖 卡牌圖鑑入口（大廳） */
.mg-album-open {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 26px;
    border: 3px solid #c4b5fd; border-radius: 16px;
    background: #f5f3ff; color: #5b21b6;
    font-size: 1.05rem; font-weight: 900; font-family: inherit;
    cursor: pointer; box-shadow: 0 4px 0 #c4b5fd;
}
.mg-album-open small { font-size: 0.75rem; font-weight: 800; color: #7c3aed; }
.mg-album-open:active { transform: translateY(4px); box-shadow: none; }

/* 📖 卡牌圖鑑：活頁小卡冊 */
.mg-album { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; color: #4a3b3b; }
.mg-album[hidden] { display: none; }
.mg-album-bar { display: flex; align-items: center; gap: 10px; }
.mg-album-back {
    padding: 6px 12px; border: 2px solid #e2e8f0; border-radius: 999px;
    background: #fff; color: #475569; font-weight: 900; font-family: inherit; cursor: pointer;
}
.mg-album-title { font-size: 1.1rem; font-weight: 900; }
.mg-album-count { margin-left: auto; font-size: 0.85rem; font-weight: 800; color: #94a3b8; }

.mg-album-stage { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 10px; }
.mg-album-nav {
    flex: none; align-self: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid #fbcfe8; background: #fff; color: #db2777;
    font-size: 1.8rem; font-weight: 900; line-height: 1; cursor: pointer;
    box-shadow: 0 3px 0 #fbcfe8;
}
.mg-album-nav:disabled { opacity: 0.35; cursor: default; }

/* 卡冊封面：粉紫色硬殼，左邊一排活頁圈 */
.mg-book {
    position: relative; flex: 1; min-width: 0;
    display: flex; padding: 10px 10px 10px 30px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f9a8d4, #c4b5fd);
    box-shadow: 0 6px 0 #a78bfa, 0 12px 24px rgba(91, 33, 182, 0.18);
    perspective: 1400px;
    touch-action: pan-y;
    user-select: none;
}
.mg-rings {
    position: absolute; left: 8px; top: 12%; bottom: 12%; z-index: 2;
    display: flex; flex-direction: column; justify-content: space-between;
}
.mg-rings i {
    width: 34px; height: 12px; border-radius: 999px;
    background: linear-gradient(180deg, #f8fafc, #94a3b8);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
/* 內頁：米白紙，一頁 2×2 四個卡套 */
.mg-page {
    flex: 1; min-width: 0;
    display: grid; grid-template-columns: repeat(var(--album-cols, 2), var(--slot-w, 1fr));
    justify-content: space-evenly; align-content: space-evenly;
    padding: 12px 10px 12px 22px;
    border-radius: 6px 12px 12px 6px;
    background: #fffdf8;
    box-shadow: inset 6px 0 10px -6px rgba(0, 0, 0, 0.25);
    transform-origin: left center;
    backface-visibility: hidden;
}
.mg-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: var(--slot-w, 120px); }
/* 卡套：透明塑膠袋，上面一道反光 */
.mg-sleeve {
    position: relative; width: 100%; aspect-ratio: 4 / 5;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.7), 0 3px 6px rgba(0, 0, 0, 0.12);
}
.mg-sleeve::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.25) 100%);
}
.mg-sleeve .mg-medal svg { width: 86%; height: auto; }
.mg-slot.is-empty .mg-sleeve { background: repeating-linear-gradient(45deg, #f8fafc 0 8px, #f1f5f9 8px 16px); box-shadow: inset 0 0 0 2px #e2e8f0; }
.mg-slot-label {
    width: 100%; min-height: 36px;
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px;
    line-height: 1.25; text-align: center;
}
.mg-slot-no { font-size: 0.7rem; font-weight: 900; color: #a78bfa; }
.mg-slot-name { font-size: 0.85rem; font-weight: 900; color: #4a3b3b; }
.mg-slot-mark { font-size: 0.75rem; font-weight: 800; color: #94a3b8; }

.mg-album-foot { display: flex; justify-content: center; gap: 14px; font-size: 0.85rem; font-weight: 900; color: #7c3aed; }
.mg-album-hint { color: #94a3b8; font-weight: 800; }

/* 翻頁動畫：往後翻是整頁往左翻起來，往前翻是從左邊翻回來 */
.mg-page.turn-out-next { animation: mg-page-out-next 0.22s ease-in forwards; }
.mg-page.turn-in-next { animation: mg-page-in-next 0.22s ease-out; }
.mg-page.turn-out-prev { animation: mg-page-out-prev 0.22s ease-in forwards; }
.mg-page.turn-in-prev { animation: mg-page-in-prev 0.22s ease-out; }
@keyframes mg-page-out-next { to { transform: rotateY(-90deg); filter: brightness(0.85); } }
@keyframes mg-page-in-next { from { transform: rotateY(90deg); filter: brightness(0.85); } }
@keyframes mg-page-out-prev { to { transform: rotateY(90deg); filter: brightness(0.85); } }
@keyframes mg-page-in-prev { from { transform: rotateY(-90deg); filter: brightness(0.85); } }

@media (max-width: 600px) {
    /* 手機：箭頭搬到卡冊下面，把寬度留給卡片 */
    .mg-album-stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
    .mg-book { grid-column: 1 / -1; grid-row: 1; }
    .mg-album-nav { grid-row: 2; }
    .mg-album-nav.prev { justify-self: end; margin-right: 20px; }
    .mg-album-nav.next { justify-self: start; margin-left: 20px; }
    .mg-album-nav { width: 34px; height: 34px; font-size: 1.4rem; }
    .mg-book { padding: 8px 6px 8px 22px; border-radius: 14px; }
    .mg-rings { left: 5px; }
    .mg-rings i { width: 26px; height: 9px; }
    .mg-page { padding: 8px 4px 8px 14px; }
    .mg-slot-name { font-size: 0.78rem; }
    .mg-album-hint { display: none; }
}

/* 🃏 開局邀請：房主按開始後，房間裡每個人畫面上方都會滑下來這張卡，選加入或觀戰 */
.mg-invite {
    position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 9500;
    width: min(520px, calc(100vw - 24px)); transform: translateX(-50%);
    border: 3px solid #c4b5fd; border-radius: 20px; overflow: hidden;
    background: #fffaf5; color: #4a3b3b; font-family: 'Nunito', 'Huninn', sans-serif;
    box-shadow: 0 6px 0 #c4b5fd, 0 16px 32px rgba(91, 33, 182, 0.25);
    animation: mg-invite-in 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.mg-invite[hidden] { display: none; }
@keyframes mg-invite-in { from { transform: translate(-50%, -140%); } }
.mg-invite-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px; }
.mg-invite-icon { flex: none; font-size: 2rem; line-height: 1; }
.mg-invite-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-invite-title { font-size: 1rem; font-weight: 900; }
.mg-invite-sub { font-size: 0.82rem; font-weight: 800; color: #7c3aed; }
.mg-invite-joined { font-size: 0.78rem; font-weight: 700; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-invite-actions { flex: none; display: flex; flex-direction: column; gap: 6px; }
.mg-invite-actions[hidden] { display: none; }
.mg-invite-actions button {
    min-width: 96px; padding: 7px 12px; border-radius: 12px;
    font-family: inherit; font-size: 0.88rem; font-weight: 900; cursor: pointer; white-space: nowrap;
}
.mg-invite-join { border: none; background: #f472b6; color: #fff; box-shadow: 0 3px 0 #db2777; }
.mg-invite-watch { border: 2px solid #c4b5fd; background: #fff; color: #6d28d9; }
.mg-invite-actions button.is-chosen { outline: 3px solid #fde047; outline-offset: 1px; }
.mg-invite-actions button:active { transform: translateY(2px); }
.mg-invite-bar { height: 5px; background: #ede9fe; }
.mg-invite-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #a78bfa, #f472b6); transition: width 0.25s linear; }
@media (max-width: 420px) {
    .mg-invite-card { gap: 8px; padding: 10px 10px 8px; }
    .mg-invite-icon { font-size: 1.5rem; }
    .mg-invite-actions button { min-width: 84px; padding: 6px 8px; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) { .mg-invite { animation: none; } }

/* 👀 觀戰中：牌不能點，游標換掉，狀態列換成紫色 */
.mg-game.is-spectating .mg-card { cursor: not-allowed; }
.mg-game.is-spectating .mg-status { color: #7c3aed; }

/* 🏆 勝場獎勵（等待畫面）：進度條＋3／10／30／100 勝四格 */
.mg-rewards {
    width: min(760px, 100%);
    padding: 14px;
    border: 3px solid #fde68a; border-radius: 20px;
    background: #fffbeb;
    box-shadow: 0 4px 0 #fde68a;
    text-align: left;
}
.mg-rewards-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mg-rewards-title { font-size: 1.15rem; font-weight: 900; color: #a16207; }
.mg-rewards .mg-wins { font-size: 0.95rem; }
.mg-rewards-bar { height: 10px; margin: 8px 0 4px; border-radius: 999px; background: #fef3c7; overflow: hidden; }
.mg-rewards-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #f472b6); transition: width 0.5s ease; }
.mg-rewards-next { font-size: 0.85rem; font-weight: 800; color: #92400e; margin-bottom: 10px; }
.mg-reward-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mg-reward {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 6px; border-radius: 16px;
    background: #fff; border: 2px solid #fde68a;
    text-align: center;
}
.mg-reward.is-locked { background: #f8fafc; border-color: #e2e8f0; }
.mg-reward-icon { font-size: 1.8rem; line-height: 1.1; }
.mg-reward.is-locked .mg-reward-icon { opacity: 0.6; }
.mg-reward-doodle { display: block; height: 2.2rem; width: auto; border-radius: 6px; }
.mg-reward-need { font-size: 0.72rem; font-weight: 900; color: #fff; background: #f59e0b; border-radius: 999px; padding: 1px 8px; }
.mg-reward.is-locked .mg-reward-need { background: #cbd5e1; }
.mg-reward-name { font-size: 0.95rem; font-weight: 900; color: #4a3b3b; margin-top: 2px; }
.mg-reward-sub { font-size: 0.72rem; font-weight: 800; color: #94a3b8; }
.mg-reward-lock { margin-top: 6px; font-size: 0.78rem; font-weight: 900; color: #94a3b8; }
/* 🤡 還沒拿到的小丑海兔：看神秘介紹 */
.mg-reward-teaser {
    margin-top: 6px; min-height: 30px; padding: 3px 12px;
    border: 2px solid #c4b5fd; border-radius: 999px;
    background: #f5f3ff; color: #6d28d9;
    font-size: 0.78rem; font-weight: 900; cursor: pointer;
}
.mg-reward-teaser:active { transform: translateY(2px); }
.mg-reward-btn {
    margin-top: 6px; min-height: 34px; padding: 4px 14px;
    border: 2px solid #fbcfe8; border-radius: 999px;
    background: #fff1f6; color: #db2777;
    font-size: 0.85rem; font-weight: 900; cursor: pointer;
    box-shadow: 0 3px 0 #fbcfe8;
}
.mg-reward-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.mg-reward-btn:disabled { background: #fbcfe8; color: #be185d; cursor: default; box-shadow: none; }

/* 🎴 選卡背／👑 換裝／🎉 解鎖通知：沿用玩法教學面板的外框 */
.mg-pick-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px; }
.mg-pick-hint { margin: 0 0 10px; font-size: 0.9rem; font-weight: 800; color: #7c6a6a; line-height: 1.5; }
.mg-pick-note { margin: -4px 0 10px; padding: 6px 10px; border-radius: 12px; background: #fff7ed; color: #9a3412; font-size: 0.8rem; font-weight: 800; }
.mg-pick-grid { display: grid; gap: 10px; }
.mg-pick-grid.is-backs { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
/* 🖍️ 作者的塗鴉：13 張貼圖一覽 */
.mg-pick-grid.is-doodles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.mg-doodle { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mg-doodle img { width: 100%; aspect-ratio: 214 / 152; display: block; border-radius: 10px; }
.mg-pick-grid.is-jokers { grid-template-columns: repeat(2, 1fr); }
.mg-pick-grid.is-jokers .mg-outfit-sample { max-width: 150px; }
.mg-pick-opt {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 6px 8px;
    border: 3px solid #f1e4e8; border-radius: 16px;
    background: #fff; cursor: pointer;
}
.mg-pick-opt.is-active { border-color: #f472b6; background: #fff1f6; box-shadow: 0 4px 0 #fbcfe8; }
/* 🤡 勝場版小丑海兔：選過之後其他配色變灰；第一次選時點到的那一種先用黃框標起來，等按「確定」 */
.mg-pick-opt.is-disabled { opacity: 0.45; filter: grayscale(0.7); cursor: not-allowed; }
.mg-pick-opt.is-pending { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 4px 0 #fde68a; }
.mg-joker-confirm {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; padding: 10px 12px; border-radius: 14px;
    background: #fffbeb; border: 2px solid #fde68a;
}
.mg-joker-confirm-text { flex: 1 1 100%; text-align: center; font-size: 0.9rem; font-weight: 900; color: #92400e; }
.mg-joker-confirm-yes, .mg-joker-confirm-no {
    min-height: 38px; padding: 6px 18px; border-radius: 999px; font-size: 0.9rem; font-weight: 900; cursor: pointer;
}
.mg-joker-confirm-yes { border: none; background: #f59e0b; color: #fff; box-shadow: 0 3px 0 #b45309; }
.mg-joker-confirm-no { border: 2px solid #fde68a; background: #fff; color: #92400e; }
.mg-joker-confirm-yes:active, .mg-joker-confirm-no:active { transform: translateY(3px); box-shadow: none; }
.mg-pick-name { font-size: 0.85rem; font-weight: 900; color: #4a3b3b; }
.mg-pick-using {
    position: absolute; top: -9px; right: -6px;
    padding: 1px 8px; border-radius: 999px;
    background: #f472b6; color: #fff; font-size: 0.7rem; font-weight: 900;
}
.mg-back-sample { position: relative; width: 56px; aspect-ratio: 4 / 5; }
.mg-back-sample .mg-back {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 1.3rem;
}
.mg-outfit-sample { width: 100%; max-width: 110px; aspect-ratio: 316 / 230; }
.mg-outfit-sample svg { width: 100%; height: 100%; display: block; }

.mg-unlock { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px; text-align: center; }
.mg-unlock-icon { font-size: 4rem; line-height: 1; animation: mg-unlock-pop 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.4); }
.mg-unlock-doodle { width: min(220px, 70%); height: auto; border-radius: 16px; animation: mg-unlock-pop 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.4); }
@keyframes mg-unlock-pop { from { transform: scale(0.3) rotate(-20deg); opacity: 0; } }
.mg-unlock-name { font-size: 1.5rem; font-weight: 900; color: #db2777; }
.mg-unlock-text { margin: 0; font-size: 1rem; font-weight: 800; color: #4a3b3b; line-height: 1.6; }
.mg-unlock-later { margin-top: 6px; border: none; background: none; color: #94a3b8; font-size: 0.88rem; font-weight: 900; cursor: pointer; text-decoration: underline; }

/* 🏰 100 勝：登上王座（全螢幕加冕典禮，點一下跳到最後）
   時間軸：0.2s 布幕拉開 → 0.8s 聚光燈、王座升起 → 1.4s 紅地毯 → 1.7s 海兔走上去 → 4.0s 皇冠降下、4.6s 落到頭上（閃光、彩帶、煙火）→ 5.0s 文字 */
.mg-throne {
    position: fixed; inset: 0; z-index: 1000005;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #6d28d9 0%, #3b0764 55%, #1e1033 100%);
    font-family: 'Nunito', 'Huninn', sans-serif;
    animation: mg-throne-fade 0.5s ease-out both;
}
.mg-throne button { font-family: inherit; }
@keyframes mg-throne-fade { from { opacity: 0; } }
.mg-throne-rays {
    position: absolute; left: 50%; top: 40%; width: 160vmax; height: 160vmax;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(rgba(253, 224, 71, 0.13) 0 10deg, transparent 10deg 20deg);
    animation: mg-throne-spin 18s linear infinite;
    pointer-events: none;
}
@keyframes mg-throne-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 紅絲絨布幕：一開始蓋住整個畫面，往兩邊拉開 */
.mg-throne-curtain {
    position: absolute; top: 0; bottom: 0; width: 52%; z-index: 3; pointer-events: none;
    background:
        linear-gradient(to bottom, #facc15 0 10px, #b45309 10px 14px, transparent 14px),
        repeating-linear-gradient(90deg, #991b1b 0 18px, #b91c1c 18px 30px, #7f1d1d 30px 44px);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    animation: mg-curtain-left 1.3s 0.2s cubic-bezier(0.7, 0, 0.3, 1) both;
}
.mg-throne-curtain.is-left { left: 0; border-right: 6px solid #facc15; }
.mg-throne-curtain.is-right { right: 0; border-left: 6px solid #facc15; animation-name: mg-curtain-right; }
@keyframes mg-curtain-left { to { transform: translateX(-104%); } }
@keyframes mg-curtain-right { to { transform: translateX(104%); } }

/* 兩道聚光燈從上面兩個角落掃到王座 */
.mg-throne-beam {
    position: absolute; top: -10%; width: 34vmax; height: 120vh; height: 120dvh; z-index: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 248, 200, 0.55), rgba(255, 248, 200, 0) 85%);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    mix-blend-mode: screen; opacity: 0;
    transform-origin: 50% 0;
}
.mg-throne-beam.is-left { left: 4%; animation: mg-beam-left 1.4s 0.8s ease-out both, mg-beam-sway-l 3.6s 2.2s ease-in-out infinite alternate; }
.mg-throne-beam.is-right { right: 4%; animation: mg-beam-right 1.4s 0.8s ease-out both, mg-beam-sway-r 3.6s 2.2s ease-in-out infinite alternate; }
@keyframes mg-beam-left { from { opacity: 0; transform: rotate(-60deg); } to { opacity: 1; transform: rotate(-24deg); } }
@keyframes mg-beam-right { from { opacity: 0; transform: rotate(60deg); } to { opacity: 1; transform: rotate(24deg); } }
@keyframes mg-beam-sway-l { from { opacity: 1; transform: rotate(-24deg); } to { opacity: 1; transform: rotate(-18deg); } }
@keyframes mg-beam-sway-r { from { opacity: 1; transform: rotate(24deg); } to { opacity: 1; transform: rotate(18deg); } }

.mg-throne-stage { position: relative; z-index: 1; width: min(340px, 78vw); aspect-ratio: 1 / 1; }
/* 紅地毯從王座往下滾出來 */
.mg-throne-carpet {
    position: absolute; left: 50%; bottom: -40%; width: 46%; height: 70%;
    transform: translateX(-50%); transform-origin: 50% 0;
    background:
        linear-gradient(90deg, #facc15 0 5%, transparent 5% 95%, #facc15 95%),
        linear-gradient(#dc2626, #991b1b);
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
    opacity: 0.95;
    animation: mg-carpet-roll 0.7s 1.4s ease-out both;
}
@keyframes mg-carpet-roll { from { transform: translateX(-50%) scaleY(0); } }
.mg-throne-chair {
    position: absolute; left: 50%; bottom: 4%; width: 76%;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 18px rgba(253, 224, 71, 0.55));
    animation: mg-throne-rise 0.8s 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
@keyframes mg-throne-rise { from { transform: translate(-50%, 30%) scale(0.6); opacity: 0; } }
/* 王座升起後一道光從左掃到右 */
.mg-throne-shine {
    position: absolute; left: 12%; bottom: 4%; width: 76%; height: 76%; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-mask: radial-gradient(ellipse at 50% 55%, #000 55%, transparent 72%); mask: radial-gradient(ellipse at 50% 55%, #000 55%, transparent 72%);
    opacity: 0;
    animation: mg-shine 0.9s 1.5s ease-in-out both;
}
@keyframes mg-shine { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0 0; } }
.mg-throne-twinkles { position: absolute; inset: 0; pointer-events: none; }
.mg-throne-twinkles i {
    position: absolute; font-style: normal; font-size: 18px; color: #fef08a;
    text-shadow: 0 0 8px rgba(253, 224, 71, 0.9);
    transform: translate(-50%, -50%) scale(0); opacity: 0;
    animation: mg-twinkle 1.6s calc(2s + var(--d)) ease-in-out infinite;
}
@keyframes mg-twinkle { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(45deg); } }

/* 海兔沿著紅地毯一跳一跳走上來，最後坐在坐墊上 */
.mg-throne-pet {
    position: absolute; left: 50%; bottom: 27%; width: 58%;
    transform: translateX(-50%);
    animation: mg-throne-walk 2.3s 1.7s ease-in-out both;
    filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25));
}
.mg-throne-pet > svg:first-child { width: 100%; height: auto; display: block; }
@keyframes mg-throne-walk {
    0% { transform: translate(-50%, 150%) scale(1.5); opacity: 0; }
    10% { opacity: 1; }
    20% { transform: translate(-50%, 115%) scale(1.4); }
    28% { transform: translate(-50%, 95%) scale(1.35); }
    40% { transform: translate(-50%, 70%) scale(1.25); }
    48% { transform: translate(-50%, 52%) scale(1.2); }
    60% { transform: translate(-50%, 30%) scale(1.1); }
    68% { transform: translate(-50%, 14%) scale(1.06); }
    82% { transform: translate(-50%, -14%) scale(1.02); }
    100% { transform: translate(-50%, 0) scale(1); }
}
/* 小皇冠從天上轉著降下來，落在兩隻耳朵中間 */
.mg-throne-crown {
    position: absolute; width: 22%; height: auto; overflow: visible;
    transform: translate(-50%, -78%);
    filter: drop-shadow(0 0 6px rgba(253, 224, 71, 0.9));
    animation: mg-crown-drop 0.75s 3.85s cubic-bezier(0.3, 0.7, 0.4, 1.35) both;
}
@keyframes mg-crown-drop {
    0% { transform: translate(-50%, -900%) rotate(-30deg) scale(1.6); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-50%, -78%) rotate(-6deg) scale(1); }
}
/* 皇冠落下的那一下：一圈金光 */
.mg-throne-burst {
    position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -60%) scale(0); opacity: 0;
    background: radial-gradient(circle, rgba(255, 250, 210, 0.95) 0 18%, rgba(253, 224, 71, 0.6) 30%, transparent 62%);
    animation: mg-burst 0.8s 4.55s ease-out both;
}
@keyframes mg-burst { 0% { opacity: 1; transform: translate(-50%, -60%) scale(0.2); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(2.2); } }
.mg-throne-flash {
    position: absolute; inset: -30%; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 247, 200, 0.95), transparent 60%);
    opacity: 0; pointer-events: none;
    animation: mg-throne-flash 0.9s 4.6s ease-out both;
}
@keyframes mg-throne-flash { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.mg-throne-confetti { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.mg-throne-confetti i {
    position: absolute; width: 10px; height: 14px; border-radius: 3px;
    opacity: 0;
    animation: mg-confetti 2.2s calc(4.6s + var(--d)) cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes mg-confetti {
    0% { transform: translate(0, 0) rotate(0); opacity: 0; }
    3% { opacity: 1; }
    35% { transform: translate(calc(var(--x) * 8), calc(var(--y) * 8)) rotate(calc(var(--r) / 2)); opacity: 1; }
    100% { transform: translate(calc(var(--x) * 10), calc(var(--y) * 4 + 2000%)) rotate(var(--r)); opacity: 0; }
}
/* 煙火：每一道光從中心往外射出去再淡掉 */
.mg-throne-fireworks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mg-fw { position: absolute; width: 0; height: 0; }
.mg-fw i {
    position: absolute; left: -2px; top: 0; width: 4px; height: 26px; border-radius: 4px;
    background: linear-gradient(to bottom, var(--c), transparent);
    box-shadow: 0 0 8px var(--c);
    transform-origin: 50% 0; opacity: 0;
    transform: rotate(var(--a)) translateY(0) scaleY(0.2);
    animation: mg-fw-ray 1.1s calc(4.7s + var(--d)) ease-out both;
}
@keyframes mg-fw-ray {
    0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scaleY(0.2); }
    5%, 60% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(70px) scaleY(1); }
}
/* 金星雨：坐上王座之後一直慢慢飄落 */
.mg-throne-rain { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mg-throne-rain i {
    position: absolute; top: -30px; font-style: normal; color: #fde047;
    text-shadow: 0 0 6px rgba(253, 224, 71, 0.8);
    opacity: 0;
    animation: mg-rain var(--t) calc(4.6s + var(--d)) linear infinite;
}
@keyframes mg-rain {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--sx), 110vh) rotate(360deg); }
}

.mg-throne-text {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    animation: mg-throne-text 0.6s 5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
@keyframes mg-throne-text { from { transform: translateY(20px) scale(0.8); opacity: 0; } }
/* 標題下面墊一條紅緞帶，兩端剪成燕尾 */
.mg-throne-ribbon {
    position: relative; padding: 6px 40px 8px;
    background: linear-gradient(#e11d48, #9f1239);
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
.mg-throne-title {
    margin: 0; font-size: clamp(1.8rem, 7vw, 2.8rem); font-weight: 900; letter-spacing: 2px;
    background: linear-gradient(100deg, #fde047 0%, #fff7cc 20%, #facc15 40%, #fde047 60%, #fffbe6 80%, #facc15 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 #7f1d1d);
    animation: mg-title-shimmer 2.4s linear infinite;
}
@keyframes mg-title-shimmer { to { background-position: -220% 0; } }
.mg-throne-sub { margin: 4px 0 0; font-size: 1.05rem; font-weight: 800; color: #f5f3ff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.mg-throne-btn { margin-top: 8px; min-width: 180px; background: #fbcfe8; color: #be185d; box-shadow: 0 5px 0 #f9a8d4; }
.mg-throne-skip {
    position: absolute; z-index: 4; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0;
    text-align: center; font-size: 0.85rem; font-weight: 800; color: rgba(245, 243, 255, 0.7);
}
.mg-throne.is-done .mg-throne-skip { display: none; }
/* 跳過：只播一次的動畫直接到最後一格；會一直動的（光芒、聚光燈、星光、金星雨、標題閃光）照常 */
.mg-throne.is-skip, .mg-throne.is-skip .mg-throne-curtain, .mg-throne.is-skip .mg-throne-carpet, .mg-throne.is-skip .mg-throne-chair,
.mg-throne.is-skip .mg-throne-pet, .mg-throne.is-skip .mg-throne-crown, .mg-throne.is-skip .mg-throne-text {
    animation-delay: 0s !important; animation-duration: 0.01s !important;
}
.mg-throne.is-skip .mg-throne-beam.is-left { animation: mg-beam-sway-l 3.6s ease-in-out infinite alternate !important; }
.mg-throne.is-skip .mg-throne-beam.is-right { animation: mg-beam-sway-r 3.6s ease-in-out infinite alternate !important; }
.mg-throne.is-skip .mg-throne-twinkles i { animation-delay: var(--d) !important; }
.mg-throne.is-skip .mg-throne-rain i { animation-delay: calc(var(--d) * -1) !important; }
.mg-throne.is-skip .mg-throne-flash, .mg-throne.is-skip .mg-throne-confetti i, .mg-throne.is-skip .mg-throne-burst,
.mg-throne.is-skip .mg-fw i, .mg-throne.is-skip .mg-throne-shine { animation: none !important; opacity: 0; }

@media (max-width: 600px) {
    .mg-rewards { padding: 12px 10px; border-radius: 18px; }
    .mg-reward-list { grid-template-columns: repeat(2, 1fr); }
    .mg-reward { padding: 10px 6px 8px; }
    .mg-reward-btn { min-height: 40px; width: 100%; max-width: 140px; }
    .mg-pick-grid.is-backs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .mg-back-sample { width: 48px; }
    .mg-pick-opt { padding: 8px 4px 6px; }
    .mg-pick-name { font-size: 0.78rem; }
    .mg-throne-sub { font-size: 0.95rem; }
}
@media (max-width: 360px) {
    .mg-pick-grid.is-backs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-height: 520px) {
    .mg-throne { flex-direction: row; gap: 20px; }
    .mg-throne-stage { width: min(260px, 42vw); }
}
@media (prefers-reduced-motion: reduce) {
    .mg-throne, .mg-throne * { animation-duration: 0.01s !important; animation-delay: 0s !important; }
    .mg-throne-rays { animation: none !important; }
}