/*
Theme Name: mcu-portal
Description: MCU 實驗平台入口網站（學生首頁、公告、註冊、闖關、排行榜）。平台自帶，打包在 image 裡，後台不能修改。
Version: 1.2.1
Requires at least: 7.0
Requires PHP: 8.4
Text Domain: mcu-portal
*/

/* ---------- 色彩與尺寸 ---------- */
:root {
	--mcu-bg: #f3f5fb;
	--mcu-bg-2: #e9edf8;
	--mcu-surface: #ffffff;
	--mcu-surface-2: #f7f8fc;
	--mcu-text: #1a2033;
	--mcu-muted: #5a6378;
	--mcu-line: #dde2ee;
	--mcu-accent: #3a4fd9;
	--mcu-accent-2: #0fa3a3;
	--mcu-accent-soft: #e8ebff;
	--mcu-accent-text: #ffffff;
	--mcu-gold: #e0a100;
	--mcu-silver: #8d97a8;
	--mcu-bronze: #b8743d;
	--mcu-ok-bg: #e4f6ec;
	--mcu-ok-text: #12663a;
	--mcu-error-bg: #fdeceb;
	--mcu-error-text: #8f1d1d;
	--mcu-warn-bg: #fff3d1;
	--mcu-warn-text: #6b4c00;
	--mcu-shadow: 0 1px 2px rgba(20, 30, 70, .06), 0 6px 20px rgba(20, 30, 70, .07);
	--mcu-shadow-hover: 0 2px 4px rgba(20, 30, 70, .08), 0 12px 32px rgba(20, 30, 70, .12);
	--mcu-radius: 16px;
	--mcu-hero: linear-gradient(135deg, #3a4fd9 0%, #5b3fd1 45%, #0fa3a3 100%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--mcu-bg: #10131c;
		--mcu-bg-2: #151a26;
		--mcu-surface: #1a2030;
		--mcu-surface-2: #212839;
		--mcu-text: #e9ecf4;
		--mcu-muted: #a3abbd;
		--mcu-line: #2f3749;
		--mcu-accent: #8b9bff;
		--mcu-accent-2: #3fd1c9;
		--mcu-accent-soft: #262d4d;
		--mcu-accent-text: #0d1020;
		--mcu-gold: #ffc940;
		--mcu-silver: #c3cad6;
		--mcu-bronze: #e09a62;
		--mcu-ok-bg: #143223;
		--mcu-ok-text: #a8ebc2;
		--mcu-error-bg: #3a1b1b;
		--mcu-error-text: #ffbdbd;
		--mcu-warn-bg: #3a2f0e;
		--mcu-warn-text: #ffe08a;
		--mcu-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
		--mcu-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);
		--mcu-hero: linear-gradient(135deg, #2c3aa8 0%, #47309e 45%, #0b7f7f 100%);
	}
}

/* ---------- 基本 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	background:
		radial-gradient(circle at 12% 0%, var(--mcu-bg-2) 0, transparent 40%),
		radial-gradient(circle at 100% 30%, var(--mcu-bg-2) 0, transparent 35%),
		var(--mcu-bg);
	background-attachment: fixed;
	color: var(--mcu-text);
	font-family: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	line-height: 1.65;
	margin: 0;
}
a { color: var(--mcu-accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
	outline: 3px solid var(--mcu-accent);
	outline-offset: 2px;
	border-radius: 6px;
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mcu-skip { position: absolute; left: -999px; }
.mcu-skip:focus { left: 16px; top: 8px; z-index: 100; background: var(--mcu-surface); padding: 8px 12px; border-radius: 8px; }

/* ---------- 頁首與選單 ---------- */
.mcu-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--mcu-surface) 82%, transparent);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--mcu-line);
	padding: 10px 16px 0;
}
.mcu-header-inner { max-width: 960px; margin: 0 auto; }
.mcu-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.mcu-brand-mark {
	display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
	background: var(--mcu-hero); color: #fff; flex: none;
	box-shadow: 0 4px 12px rgba(58, 79, 217, .35);
}
.mcu-brand-mark svg { width: 20px; height: 20px; }
.mcu-header .wp-block-site-title { font-size: 1.05rem; font-weight: 800; margin: 0; letter-spacing: .02em; }
.mcu-header .wp-block-site-title a { color: var(--mcu-text); text-decoration: none; }
.mcu-nav {
	display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
	margin: 0 -16px; padding: 4px 16px 10px;
}
.mcu-nav::-webkit-scrollbar { display: none; }
.mcu-nav a {
	flex: none; padding: 7px 14px; border-radius: 999px; text-decoration: none;
	color: var(--mcu-muted); font-weight: 600; font-size: .95rem;
	transition: background .2s, color .2s;
}
.mcu-nav a:hover { background: var(--mcu-accent-soft); color: var(--mcu-accent); }
.mcu-nav a[aria-current="page"] { background: var(--mcu-accent); color: var(--mcu-accent-text); }

/* ---------- 版面 ---------- */
.mcu-main { max-width: 960px; margin: 0 auto; padding: 20px 16px 8px; }
.mcu-main .wp-block-post-title { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 4px 0 18px; font-weight: 800; letter-spacing: .01em; }
.mcu-footer { color: var(--mcu-muted); font-size: .85rem; text-align: center; padding: 28px 16px 36px; }
.mcu-footer a { color: inherit; }
.mcu-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.mcu-banner {
	background: var(--mcu-warn-bg); color: var(--mcu-warn-text); padding: 10px 16px; text-align: center;
	font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--mcu-warn-text) 20%, transparent);
}
.mcu-banner::before { content: "🛠️ "; }

/* ---------- 首頁主視覺 ---------- */
.mcu-hero {
	position: relative; overflow: hidden; color: #fff; border-radius: 22px; padding: 26px 22px 22px; margin: 0 0 18px;
	background: var(--mcu-hero); box-shadow: 0 10px 30px rgba(58, 79, 217, .3);
}
.mcu-hero::before, .mcu-hero::after {
	content: ""; position: absolute; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%);
}
.mcu-hero::before { width: 260px; height: 260px; right: -70px; top: -90px; animation: mcu-float 9s ease-in-out infinite; }
.mcu-hero::after { width: 160px; height: 160px; left: 40%; bottom: -80px; animation: mcu-float 11s ease-in-out infinite reverse; }
.mcu-hero h2 { font-size: clamp(1.35rem, 5vw, 1.9rem); margin: 0 0 4px; font-weight: 800; position: relative; }
.mcu-hero p { margin: 0 0 14px; opacity: .92; position: relative; }
.mcu-hero .mcu-button { background: #fff; color: #3a2fb8; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.mcu-hero .mcu-button.mcu-secondary { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .6); }
.mcu-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.mcu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; position: relative; }
.mcu-stat {
	background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px;
	padding: 10px 8px; text-align: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mcu-stat b { display: block; font-size: clamp(1.25rem, 5vw, 1.7rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
.mcu-stat span { font-size: .8rem; opacity: .9; }

@keyframes mcu-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 12px); } }

/* ---------- 卡片 ---------- */
.mcu-card {
	background: var(--mcu-surface); border: 1px solid var(--mcu-line); border-radius: var(--mcu-radius);
	padding: 18px; margin: 0 0 16px; box-shadow: var(--mcu-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
.mcu-card h2 { font-size: 1.12rem; margin: 0 0 10px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.mcu-card h2 .mcu-icon { font-size: 1.15rem; }
.mcu-card .mcu-card { box-shadow: none; background: var(--mcu-surface-2); }
.mcu-card-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }
.mcu-card-link::after { content: "→"; transition: transform .2s; }
.mcu-card-link:hover::after { transform: translateX(3px); }
.mcu-muted { color: var(--mcu-muted); }
.mcu-tag {
	display: inline-block; background: var(--mcu-accent); color: var(--mcu-accent-text);
	border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 1px 8px; vertical-align: 2px;
}

/* ---------- 公告 ---------- */
.mcu-notices { list-style: none; margin: 0; padding: 0; }
.mcu-notices li { border-bottom: 1px solid var(--mcu-line); }
.mcu-notices li:last-child { border-bottom: 0; }
.mcu-notices a.mcu-notice-row {
	display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
	padding: 11px 6px; margin: 0 -6px; border-radius: 10px; text-decoration: none; color: var(--mcu-text);
	transition: background .15s;
}
.mcu-notices a.mcu-notice-row:hover { background: var(--mcu-accent-soft); }
.mcu-notices .mcu-notice-title { font-weight: 600; }
.mcu-notices time { flex: none; font-size: .85rem; }
.mcu-notice-body { font-size: 1.02rem; }
.mcu-notice-body img { max-width: 100%; height: auto; }

/* ---------- 提示 ---------- */
.mcu-alert {
	display: flex; gap: 10px; align-items: flex-start;
	background: var(--mcu-warn-bg); color: var(--mcu-warn-text); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px;
	animation: mcu-pop-in .35s ease both;
}
.mcu-alert::before { content: "💡"; }
.mcu-alert.mcu-ok { background: var(--mcu-ok-bg); color: var(--mcu-ok-text); }
.mcu-alert.mcu-ok::before { content: "🎉"; }
.mcu-alert.mcu-error { background: var(--mcu-error-bg); color: var(--mcu-error-text); }
.mcu-alert.mcu-error::before { content: "⚠️"; }
.mcu-alert > div, .mcu-alert > p { margin: 0; }
.mcu-alert p { margin: 0; }
.mcu-alert ul { margin: 4px 0 0; padding-left: 1.2em; }

@keyframes mcu-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- 表單 ---------- */
.mcu-form { max-width: 30rem; }
.mcu-form-card { max-width: 32rem; }
.mcu-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; position: relative; }
.mcu-field label { font-weight: 700; font-size: .95rem; }
.mcu-field input[type=text], .mcu-field input[type=email], .mcu-field input[type=password], .mcu-field select {
	font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--mcu-line); border-radius: 12px;
	background: var(--mcu-surface); color: var(--mcu-text); width: 100%;
	transition: border-color .15s, box-shadow .15s;
}
.mcu-field input:focus, .mcu-field select:focus {
	outline: none; border-color: var(--mcu-accent); box-shadow: 0 0 0 4px var(--mcu-accent-soft);
}
.mcu-field [aria-invalid=true] { border-color: var(--mcu-error-text); }
.mcu-field-error { color: var(--mcu-error-text); font-size: .9rem; }
.mcu-field-error::before { content: "✕ "; font-weight: 700; }
.mcu-check label { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.mcu-check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--mcu-accent); flex: none; }
.mcu-pw { position: relative; }
.mcu-pw input { padding-right: 64px !important; }
.mcu-pw-toggle {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	border: 0; background: transparent; color: var(--mcu-accent); font: inherit; font-size: .85rem; font-weight: 700;
	padding: 8px 10px; border-radius: 8px; cursor: pointer; min-height: 36px;
}
.mcu-pw-toggle:hover { background: var(--mcu-accent-soft); }
.mcu-counter { font-size: .8rem; color: var(--mcu-muted); text-align: right; margin-top: -2px; }

.mcu-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: var(--mcu-accent); color: var(--mcu-accent-text); border: 1.5px solid transparent; border-radius: 12px;
	padding: 11px 20px; font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; min-height: 46px;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--mcu-accent) 35%, transparent);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}
.mcu-button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.mcu-button:active { transform: translateY(1px) scale(.98); }
.mcu-button.mcu-secondary { background: transparent; color: var(--mcu-accent); border-color: var(--mcu-accent); box-shadow: none; }
.mcu-button.mcu-big { width: 100%; font-size: 1.05rem; min-height: 52px; }

.mcu-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 10px; }
.mcu-dl dt { color: var(--mcu-muted); }
.mcu-dl dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }

/* ---------- 表格與排行榜 ---------- */
.mcu-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.mcu-table th { font-size: .8rem; color: var(--mcu-muted); font-weight: 700; text-align: left; padding: 6px 8px; white-space: nowrap; }
.mcu-table td:nth-child(n+3) { white-space: nowrap; }
.mcu-table td { padding: 10px 8px; border-top: 1px solid var(--mcu-line); }
.mcu-table tr.mcu-me td { background: var(--mcu-accent-soft); font-weight: 700; }
.mcu-table tr.mcu-me td:first-child { border-radius: 10px 0 0 10px; }
.mcu-table tr.mcu-me td:last-child { border-radius: 0 10px 10px 0; }
.mcu-rank { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 999px; background: var(--mcu-surface-2); font-weight: 800; font-size: .85rem; }

.mcu-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin: 6px 0 18px; }
.mcu-podium-item { text-align: center; }
.mcu-podium-medal { font-size: 2rem; line-height: 1; display: block; animation: mcu-bob 3s ease-in-out infinite; }
.mcu-podium-item:nth-child(2) .mcu-podium-medal { font-size: 2.6rem; animation-delay: -1s; }
.mcu-podium-name { font-weight: 800; overflow-wrap: anywhere; margin: 4px 0 2px; }
.mcu-podium-score { font-size: .85rem; color: var(--mcu-muted); font-variant-numeric: tabular-nums; }
.mcu-podium-bar { margin-top: 8px; border-radius: 12px 12px 4px 4px; background: var(--mcu-accent-soft); display: grid; place-items: center; font-weight: 800; color: var(--mcu-accent); }
.mcu-podium-item.is-1 .mcu-podium-bar { height: 96px; background: linear-gradient(180deg, color-mix(in srgb, var(--mcu-gold) 45%, transparent), var(--mcu-accent-soft)); }
.mcu-podium-item.is-2 .mcu-podium-bar { height: 70px; background: linear-gradient(180deg, color-mix(in srgb, var(--mcu-silver) 45%, transparent), var(--mcu-accent-soft)); }
.mcu-podium-item.is-3 .mcu-podium-bar { height: 52px; background: linear-gradient(180deg, color-mix(in srgb, var(--mcu-bronze) 45%, transparent), var(--mcu-accent-soft)); }
.mcu-podium-item.is-me .mcu-podium-name::after { content: "（你）"; color: var(--mcu-accent); }

.mcu-myrank {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	background: var(--mcu-accent-soft); border-radius: 14px; padding: 12px 14px; margin-top: 14px; font-weight: 700;
}

@keyframes mcu-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- 闖關卡片 ---------- */
.mcu-stars { color: var(--mcu-gold); letter-spacing: 1px; white-space: nowrap; }
.mcu-stars .mcu-muted { color: var(--mcu-line); }
.mcu-quest { position: relative; overflow: hidden; }
.mcu-quest::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--mcu-hero);
}
.mcu-quest-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.mcu-quest-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; margin: 0 0 12px; }
.mcu-progress { height: 10px; background: var(--mcu-surface-2); border-radius: 999px; overflow: hidden; margin: 0 0 6px; border: 1px solid var(--mcu-line); }
.mcu-progress > span {
	display: block; height: 100%; width: var(--p, 0%); border-radius: inherit;
	background: linear-gradient(90deg, var(--mcu-accent), var(--mcu-accent-2));
	transition: width 1s cubic-bezier(.2, .8, .2, 1);
}
.mcu-progress-label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--mcu-muted); margin: 0 0 12px; }
.mcu-stage-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; }
.mcu-stage-chip {
	display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
	background: var(--mcu-surface-2); border: 1px solid var(--mcu-line); font-size: .88rem;
}
.mcu-stage-chip.is-locked { opacity: .55; }
.mcu-stage-chip.is-done { border-color: color-mix(in srgb, var(--mcu-gold) 60%, var(--mcu-line)); }
.mcu-stage-chip b { font-variant-numeric: tabular-nums; }

/* ---------- 徽章 ---------- */
.mcu-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
.mcu-badge {
	text-align: center; padding: 14px 10px; border-radius: 14px; background: var(--mcu-surface-2);
	border: 1px solid var(--mcu-line); transition: transform .2s;
}
.mcu-badge-icon { font-size: 2rem; display: block; line-height: 1.2; }
.mcu-badge-name { font-weight: 800; display: block; }
.mcu-badge small { color: var(--mcu-muted); display: block; font-size: .78rem; margin-top: 2px; }
.mcu-badge.is-earned {
	background: linear-gradient(160deg, color-mix(in srgb, var(--mcu-gold) 22%, var(--mcu-surface)), var(--mcu-surface));
	border-color: color-mix(in srgb, var(--mcu-gold) 55%, var(--mcu-line));
}
.mcu-badge.is-earned:hover { transform: translateY(-2px) rotate(-1deg); }
.mcu-badge:not(.is-earned) .mcu-badge-icon { filter: grayscale(1); opacity: .45; }

/* ---------- 進場動畫（portal.js 加上 is-visible） ---------- */
.mcu-js .mcu-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.mcu-js .mcu-reveal.is-visible { opacity: 1; transform: none; }

@media (hover: hover) {
	.mcu-card.mcu-lift:hover { transform: translateY(-2px); box-shadow: var(--mcu-shadow-hover); }
}

@media (min-width: 720px) {
	.mcu-main { padding-top: 28px; }
	.mcu-hero { padding: 34px 32px 28px; }
	.mcu-stats { max-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.mcu-js .mcu-reveal { opacity: 1; transform: none; }
}

/* ---------- 稱號 ---------- */
.mcu-title-chip {
	display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
	background: color-mix(in srgb, var(--mcu-gold) 22%, var(--mcu-surface)); color: var(--mcu-text);
	border: 1px solid color-mix(in srgb, var(--mcu-gold) 45%, var(--mcu-line)); vertical-align: 1px; white-space: nowrap;
}
.mcu-podium .mcu-title-chip { margin-bottom: 2px; }
.mcu-title-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mcu-title-option {
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
	border: 1.5px solid var(--mcu-line); background: var(--mcu-surface-2); font-weight: 600;
}
.mcu-title-option:has(input:checked) { border-color: var(--mcu-accent); background: var(--mcu-accent-soft); color: var(--mcu-accent); }
.mcu-title-option input { accent-color: var(--mcu-accent); }
.mcu-badge .mcu-progress { margin: 8px 0 2px; height: 6px; }

/* =====================================================================
   互動與動畫（1.2.0）：背景分子、卡片傾斜、漣漪、實驗台插圖、登入頁、個人頁
   使用者設定「減少動態效果」時，最下方的規則會關掉所有動畫。
   ===================================================================== */

#mcu-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* 頁首 logo：滑過時冒泡 */
.mcu-brand-mark { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2, .9, .3, 1.4); }
.mcu-brand:hover .mcu-brand-mark { transform: rotate(-12deg) scale(1.08); }
.mcu-brand-mark::after {
	content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0;
	left: 13px; bottom: 6px;
}
.mcu-brand:hover .mcu-brand-mark::after { animation: mcu-rise 1s ease-out infinite; }
@keyframes mcu-rise { 0% { opacity: .9; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translateY(-22px) scale(1.2); } }

/* 選單：底線滑入 */
.mcu-nav a { position: relative; }
.mcu-nav a:not([aria-current="page"])::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px;
	background: var(--mcu-accent); transform: scaleX(0); transition: transform .25s ease;
}
.mcu-nav a:not([aria-current="page"]):hover::after { transform: scaleX(1); }

/* 卡片跟著滑鼠微微傾斜（portal.js 設定 --rx、--ry） */
@media (hover: hover) {
	.mcu-card.mcu-lift { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }
	.mcu-card.mcu-lift:hover { --ty: -2px; }
}

/* 按鈕漣漪 */
.mcu-button { position: relative; overflow: hidden; }
.mcu-ripple {
	position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); pointer-events: none;
	transform: scale(0); animation: mcu-ripple .6s ease-out forwards;
}
@keyframes mcu-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- 實驗台插圖（燒瓶） ---------- */
.mcu-lab-scene { --level: .35; display: block; overflow: visible; }
/* 水面高度：瓶底約 y=185，--level 1 時水面到瓶頸下方（y=35）。整組（液體＋水面）一起移動。 */
.mcu-lab-scene .mcu-liquid-level {
	transform: translateY(calc(185px - var(--level) * 150px)); transition: transform .7s cubic-bezier(.2, .9, .3, 1.15);
}
/* 波浪左右平移剛好一個波長（60），循環沒有接縫。 */
.mcu-lab-scene .mcu-wave-move { animation: mcu-wave 2.8s linear infinite; }
.mcu-lab-scene .mcu-wave-back { animation-duration: 4.2s; animation-direction: reverse; }
@keyframes mcu-wave { from { transform: translateX(0); } to { transform: translateX(-60px); } }
.mcu-lab-scene .mcu-bubble { animation: mcu-bubble 2.6s ease-in infinite; }
.mcu-lab-scene .b2 { animation-delay: .7s; animation-duration: 2.2s; }
.mcu-lab-scene .b3 { animation-delay: 1.3s; animation-duration: 3s; }
.mcu-lab-scene .b4 { animation-delay: 1.9s; }
@keyframes mcu-bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-120px); opacity: 0; } }
.mcu-lab-scene .mcu-orbit { transform-box: fill-box; transform-origin: center; animation: mcu-orbit 7s ease-in-out infinite; }
.mcu-lab-scene .mcu-orbit-2 { animation-duration: 9s; animation-direction: reverse; }
@keyframes mcu-orbit { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -10px) rotate(25deg); } }
.mcu-lab-scene .mcu-eyes { transform-box: fill-box; transform-origin: center; animation: mcu-blink 4.5s infinite; }
@keyframes mcu-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.mcu-lab-scene .mcu-sparkles path { transform-box: fill-box; transform-origin: center; animation: mcu-twinkle 2.4s ease-in-out infinite; }
.mcu-lab-scene .mcu-sparkles path:nth-child(2) { animation-delay: 1.2s; }
@keyframes mcu-twinkle { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.mcu-lab-scene .mcu-mouth { transition: d .3s; }
.mcu-lab-scene.is-full .mcu-mouth { d: path("M108 150 q12 14 24 0"); }
.mcu-lab-scene.is-full .mcu-bubble { animation-duration: 1.1s; }
.mcu-lab-scene.is-sad .mcu-mouth { d: path("M112 158 q8 -7 16 0"); }

.mcu-hero-guest { padding-right: 150px; min-height: 190px; }
.mcu-hero-scene { position: absolute; right: -6px; bottom: -6px; width: 170px; height: auto; --level: .55; opacity: .95; }
@media (max-width: 480px) {
	.mcu-hero-guest { padding-right: 22px; padding-top: 120px; }
	.mcu-hero-scene { width: 130px; right: 50%; transform: translateX(50%); top: 4px; bottom: auto; }
}
.mcu-hero-head { display: flex; align-items: center; gap: 12px; position: relative; }
.mcu-hero-head .mcu-avatar { flex: none; border-radius: 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }

/* ---------- 學生登入頁 ---------- */
.mcu-login-stage { display: grid; gap: 8px; align-items: center; }
.mcu-login-art { position: relative; text-align: center; }
.mcu-login-scene { width: min(240px, 70vw); margin: 0 auto; filter: drop-shadow(0 14px 24px rgba(58, 79, 217, .25)); }
.mcu-login-scene path[stroke="#fff"], .mcu-login-scene rect[fill="#fff"] { stroke: var(--mcu-accent); }
.mcu-login-scene rect[fill="#fff"] { fill: var(--mcu-accent); }
.mcu-login-bubble {
	display: inline-flex; flex-direction: column; margin: 0 auto 6px; padding: 8px 14px; border-radius: 14px;
	background: var(--mcu-surface); border: 1px solid var(--mcu-line); box-shadow: var(--mcu-shadow); font-weight: 700; font-size: .92rem;
	animation: mcu-float-y 3.5s ease-in-out infinite;
}
@keyframes mcu-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.mcu-login-stage.has-error .mcu-login-scene { animation: mcu-shake .5s ease 1; }
@keyframes mcu-shake { 20%, 60% { transform: translateX(-8px) rotate(-3deg); } 40%, 80% { transform: translateX(8px) rotate(3deg); } }
@media (min-width: 760px) {
	.mcu-login-stage { grid-template-columns: 1fr 1.1fr; gap: 28px; }
	.mcu-login-scene { width: 280px; }
}

/* 班級代碼：6 格大字輸入框 */
.mcu-field input.mcu-code-input {
	/* 班級代碼 6～12 個英數字（ADR-0033）：整行寬、等寬字、適度字距，360px 也放得下 12 個字。 */
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.45rem; font-weight: 800;
	letter-spacing: .22em; text-transform: uppercase; padding: 10px 12px; width: 100%; max-width: 22ch;
}
.mcu-field input.mcu-code-input:focus { background-color: var(--mcu-accent-soft); }

.mcu-login-go .mcu-go-busy { display: none; }
.mcu-login-go.is-busy .mcu-go-label { display: none; }
.mcu-login-go.is-busy .mcu-go-busy { display: inline; }
.mcu-login-go.is-busy::before {
	content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .4); border-top-color: #fff;
	animation: mcu-spin .8s linear infinite;
}
@keyframes mcu-spin { to { transform: rotate(360deg); } }

/* ---------- 個人頁 ---------- */
.mcu-profile { overflow: hidden; position: relative; }
.mcu-profile::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 92px; background: var(--mcu-hero); opacity: .9;
}
.mcu-profile-head { position: relative; display: flex; gap: 16px; align-items: flex-end; padding-top: 30px; margin-bottom: 14px; }
.mcu-profile-head .mcu-avatar { flex: none; border-radius: 24px; border: 4px solid var(--mcu-surface); box-shadow: var(--mcu-shadow-hover); }
.mcu-profile-head p { margin: 0 0 2px; }
.mcu-profile-name { font-size: 1.4rem; font-weight: 800; }
.mcu-avatar .mcu-avatar-orbit { transform-origin: 50% 50%; transition: transform .8s cubic-bezier(.2, .9, .3, 1.2); }
.mcu-avatar:hover .mcu-avatar-orbit { transform: rotate(120deg); }
#mcu-title-preview.is-pop { animation: mcu-pop .45s cubic-bezier(.2, .9, .3, 1.6); }
@keyframes mcu-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

.mcu-level { display: flex; gap: 14px; align-items: center; margin: 4px 0 14px; }
.mcu-level-badge {
	flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; font-weight: 900; color: #fff;
	background: conic-gradient(from 210deg, #ffd166, #ff7a1a, #ef476f, #7b5cff, #ffd166); box-shadow: 0 6px 16px rgba(255, 122, 26, .35);
	animation: mcu-hue 8s linear infinite;
}
@keyframes mcu-hue { to { filter: hue-rotate(360deg); } }
.mcu-level-body { flex: 1; min-width: 0; }
.mcu-level-body p { margin: 0 0 6px; }
.mcu-xp { height: 12px; }
.mcu-xp > span { background: linear-gradient(90deg, #ffd166, #ff7a1a, #ef476f); position: relative; overflow: hidden; }
.mcu-xp > span::after {
	content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
	transform: translateX(-100%); animation: mcu-shine 2.4s ease-in-out infinite;
}
@keyframes mcu-shine { 60%, 100% { transform: translateX(100%); } }
.mcu-level-next { font-size: .82rem; }

.mcu-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 12px; }
.mcu-ring { position: relative; margin: 0; text-align: center; }
.mcu-ring svg { width: 100%; max-width: 110px; transform: rotate(-90deg); }
.mcu-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.mcu-ring-bg { stroke: var(--mcu-surface-2); }
.mcu-ring-fg { stroke-dasharray: var(--c); stroke-dashoffset: var(--off); transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1) .2s; }
.mcu-js .mcu-reveal:not(.is-visible) .mcu-ring-fg { stroke-dashoffset: var(--c); }
.mcu-ring figcaption { position: absolute; inset: 0; display: grid; place-content: center; line-height: 1.2; }
.mcu-ring figcaption b { font-size: 1.05rem; }
.mcu-ring figcaption span { font-size: .72rem; color: var(--mcu-muted); }

.mcu-details summary { cursor: pointer; font-weight: 700; color: var(--mcu-accent); padding: 6px 0; }

/* 稱號：鎖住的 */
.mcu-title-option.is-locked { opacity: .5; cursor: not-allowed; border-style: dashed; font-weight: 500; }

/* 成就卡：點一下翻面 */
.mcu-badge { perspective: 700px; padding: 0; background: none; border: 0; cursor: pointer; min-height: 150px; }
.mcu-badge:focus-visible { outline: 3px solid var(--mcu-accent); outline-offset: 3px; border-radius: 14px; }
.mcu-badge-inner { position: relative; height: 100%; min-height: 150px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.mcu-badge.is-flipped .mcu-badge-inner { transform: rotateY(180deg); }
.mcu-badge-face, .mcu-badge-back {
	position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 14px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 10px;
	background: var(--mcu-surface-2); border: 1px solid var(--mcu-line);
}
.mcu-badge-back { transform: rotateY(180deg); background: var(--mcu-accent-soft); }
.mcu-badge-back small { display: block; }
.mcu-badge-cond { color: var(--mcu-text) !important; font-weight: 700; font-size: .85rem !important; }
.mcu-badge.is-earned .mcu-badge-face {
	background: linear-gradient(160deg, color-mix(in srgb, var(--mcu-gold) 24%, var(--mcu-surface)), var(--mcu-surface));
	border-color: color-mix(in srgb, var(--mcu-gold) 55%, var(--mcu-line));
}
.mcu-badge.is-earned .mcu-badge-icon { animation: mcu-bob 3s ease-in-out infinite; }
.mcu-badge.is-earned .mcu-badge-face::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%);
	background-size: 250% 100%; animation: mcu-gloss 4s ease-in-out infinite;
}
@keyframes mcu-gloss { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.mcu-badge:not(.is-earned) .mcu-badge-face { filter: grayscale(.6); }
.mcu-badge .mcu-progress { width: 80%; }
.mcu-badge.is-shake .mcu-badge-inner { animation: mcu-shake .4s ease; }

/* 星星爆開（成就卡、按鈕） */
.mcu-burst { position: fixed; pointer-events: none; z-index: 50; font-size: 18px; animation: mcu-burst .9s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes mcu-burst { from { transform: translate(0, 0) scale(.6); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(var(--rot)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	#mcu-bg { display: none; }
	.mcu-card.mcu-lift { transform: none !important; }
	.mcu-lab-scene .mcu-liquid-level { transition: none; }
}