/* ============ 节日系统样式（festival.js 按日期给 挂 .fes-） ============ */
/* ---------- 中秋主题 ---------- */
html.fes-zhongqiu body::before {
content: '🌕';
position: fixed;
top: 86px; right: 5vw;
font-size: clamp(48px, 7vw, 84px);
line-height: 1;
opacity: .92;
pointer-events: none;
z-index: 0;
filter: drop-shadow(0 0 26px rgba(255, 215, 110, .55));
animation: fesMoonFloat 7s ease-in-out infinite;
}
@keyframes fesMoonFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
html.fes-zhongqiu .footer-moon {
transform: scale(1.45);
background: radial-gradient(circle at 35% 35%, #fff6d8, #ffd76e 55%, #e8a94e);
box-shadow: 0 0 34px 10px rgba(255, 215, 110, .45);
}
html.fes-zhongqiu .lantern {
filter: hue-rotate(-18deg) saturate(1.35) brightness(1.12) drop-shadow(0 0 10px rgba(255, 170, 60, .8));
}
.story-chip.fes-chip {
background: linear-gradient(to right, #b8860b, #d4a017);
box-shadow: 0 8px 20px rgba(184, 134, 11, .5);
animation: fesChipGlow 2.2s ease-in-out infinite;
}
@keyframes fesChipGlow {
0%, 100% { box-shadow: 0 8px 20px rgba(184, 134, 11, .5); transform: translateY(0); }
50% { box-shadow: 0 8px 30px rgba(255, 215, 110, .85); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .story-chip.fes-chip { animation: none; } }
@media (prefers-reduced-motion: reduce) {
html.fes-zhongqiu body::before { animation: none; }
}
/* ---------- 宗门饼房：中秋夜市主题（弹性高度，窄屏自适应） ---------- */
/* 非中秋/未开密令时整个厅隐藏（.hidden 对饼房生效的关键规则） */
#fesGame.hidden { display: none; }
#fesGame .mc-game {
position: relative;
width: 100%;
max-width: 560px;
margin: 14px auto 4px;
height: clamp(500px, 74vh, 680px);
display: flex; flex-direction: column;
border-radius: 18px;
overflow: hidden;
border: 3px solid #8a6238;
box-shadow: 0 18px 50px rgba(10, 14, 30, .45), inset 0 0 0 2px #3a2a18;
background: #141b33;
color: #f5e6c8;
font-family: 'ZCOOL KuaiLe', 'Microsoft YaHei', sans-serif;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* 顶栏：夜蓝 HUD */
#fesGame .mc-hud {
display: flex; justify-content: space-between; align-items: center; gap: 6px;
padding: 8px 12px; background: #0e1426; font-size: 14px; flex-wrap: wrap; flex: none;
border-bottom: 2px solid #8a6238;
}
#fesGame .mc-hud b { color: #ffd76e; }
#fesGame .mc-day { color: #9db4e8; font-size: 12.5px; }
#fesGame .mc-hud button {
background: #3a4a6e; border: 1.5px solid #5b7ab8; color: #f5e6c8;
border-radius: 8px; padding: 5px 12px; font-family: inherit; font-size: 13px; cursor: pointer;
}
#fesGame .mc-hud button:active { background: #5b7ab8; }
/* 柜台：中秋夜空（星、月、木台）——高度弹性伸缩 */
#fesGame .mc-counter {
position: relative; flex: 1; min-height: 190px;
overflow: hidden;
background: linear-gradient(#1b2648 0%, #243258 55%, #2c2417 78%, #241a10 100%);
}
/* 繁星 */
#fesGame .mc-counter::before {
content: '';
position: absolute; inset: 0 0 30% 0; pointer-events: none;
background-image:
radial-gradient(1.6px 1.6px at 12% 18%, #fff8 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 28% 8%, #fff6 50%, transparent 51%),
radial-gradient(1.8px 1.8px at 44% 22%, #ffd76e88 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 63% 12%, #fff7 50%, transparent 51%),
radial-gradient(1.6px 1.6px at 78% 26%, #fff8 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 90% 10%, #ffd76e77 50%, transparent 51%),
radial-gradient(1.4px 1.4px at 8% 38%, #fff5 50%, transparent 51%),
radial-gradient(1.4px 1.4px at 55% 36%, #fff6 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 35% 40%, #ffd76e66 50%, transparent 51%);
animation: mcStars 4s ease-in-out infinite alternate;
}
@keyframes mcStars { from { opacity: .65; } to { opacity: 1; } }
/* 挂月 */
#fesGame .mc-counter::after {
content: '';
position: absolute; top: 9%; right: 7%;
width: 54px; height: 54px; border-radius: 50%;
background: radial-gradient(circle at 36% 34%, #fffbe8, #ffe9a8 55%, #f4c560);
box-shadow: 0 0 26px 8px rgba(255, 220, 130, .35);
pointer-events: none;
}
/* 木台 */
#fesGame .mc-floor {
position: absolute; bottom: 0; width: 100%; height: 64px;
background:
repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, .18) 46px 48px),
linear-gradient(#7a5230, #8f6238);
border-top: 5px solid #a8793f;
box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
}
/* 顾客 */
#fesGame .mc-cust {
position: absolute; bottom: 58px; width: 74px; text-align: center;
transition: left .5s, opacity .4s;
animation: mcArrive .35s ease-out;
}
@keyframes mcArrive { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
#fesGame .mc-face {
width: 54px; height: 54px; margin: 0 auto;
border-radius: 50%; overflow: hidden;
background: radial-gradient(circle at 40% 30%, #4a5a86, #2a3560);
border: 2.5px solid #ffd76e;
box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
display: flex; align-items: center; justify-content: center;
}
#fesGame .mc-face svg, #fesGame .mc-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#fesGame .mc-cust.angry .mc-face { animation: mcShake .3s infinite; border-color: #e05a4a; }
#fesGame .mc-cust.happy .mc-face { border-color: #7ed957; }
@keyframes mcShake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
#fesGame .mc-bubble {
background: #fffde8; color: #4a2f12; border-radius: 10px;
padding: 4px 5px; font-size: 11.5px; margin: 0 auto 5px; width: auto; max-width: 96px;
border: 2px solid #c9a86a; position: relative;
display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
}
#fesGame .mc-cust.duo .mc-bubble { border-color: #d4a017; box-shadow: 0 0 8px rgba(212, 160, 23, .35); }
#fesGame .mc-ord { display: flex; flex-direction: column; align-items: center; line-height: 1; }
#fesGame .mc-ord i { font-style: normal; font-size: 9.5px; margin-top: 1px; color: #7a5a34; }
#fesGame .mc-ord.got { opacity: .35; filter: grayscale(.6); }
#fesGame .mc-ord.got::after { content: '✓'; color: #4a8a3a; font-size: 10px; }
#fesGame .mc-bubble .mc-mk { font-size: 10px; color: #a8642a; width: 100%; text-align: center; font-weight: normal; }
#fesGame .mc-pat { height: 5px; background: #d8c8a8; border-radius: 3px; overflow: hidden; width: 100%; margin-top: 2px; }
#fesGame .mc-pat div { height: 100%; background: #7ed957; transition: width .6s linear; }
#fesGame .mc-coin {
position: absolute; bottom: 108px; font-size: 24px; font-weight: bold; color: #ffd76e;
pointer-events: none; animation: mcCoinUp 2.2s ease-out forwards; text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
}
@keyframes mcCoinUp { 0% { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-52px); opacity: 0; } }
#fesGame .mc-toast {
position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
font-size: clamp(17px, 4vw, 23px); font-weight: bold; color: #ffd76e;
text-shadow: 0 2px 10px #000, 0 0 20px rgba(255, 215, 110, .35);
pointer-events: none; opacity: 0; transition: opacity .25s; white-space: nowrap; z-index: 10;
}
/* 工作台：暖木 + 金线（步骤槽位式备料） */
#fesGame .mc-bench {
flex: none;
padding: 9px; display: flex; flex-direction: column; gap: 7px;
background:
repeating-linear-gradient(90deg, transparent 0 60px, rgba(0, 0, 0, .07) 60px 62px),
linear-gradient(#2c2013, #241a10);
border-top: 3px solid #8a6238;
}
#fesGame .mc-trayrow { display: flex; align-items: stretch; gap: 8px; }
#fesGame .mc-tray {
flex: 1; display: flex; align-items: center; gap: 6px;
background: linear-gradient(#1a1209, #171009);
border: 2px solid #6b4a2a; border-radius: 14px;
padding: 7px 10px; min-height: 68px; font-size: 13px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5);
}
/* 步骤槽：①饼皮 ②馅料 ③压模 */
#fesGame .mc-step {
display: flex; align-items: center; gap: 5px;
padding: 3px 8px; border-radius: 10px;
background: rgba(107, 74, 42, .18);
border: 1.5px dashed #5a4226;
transition: border-color .2s, background .2s;
}
#fesGame .mc-step .no {
width: 16px; height: 16px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
background: #4a3620; color: #b89b6e; font-size: 10.5px; font-style: normal;
}
#fesGame .mc-step em {
display: flex; align-items: center; justify-content: center;
min-width: 34px; min-height: 36px; font-style: normal; line-height: 0;
}
#fesGame .mc-step em b { font-size: 12px; color: #8a6f4a; font-weight: normal; }
#fesGame .mc-step.on {
border-style: solid; border-color: #ffd76e; background: rgba(255, 215, 110, .08);
box-shadow: 0 0 8px rgba(255, 215, 110, .18);
}
#fesGame .mc-step.on .no { background: #ffd76e; color: #4a2f12; }
#fesGame .mc-arrow { color: #6b4a2a; font-size: 16px; align-self: center; }
#fesGame .mc-ready {
margin-left: auto; color: #7ed957; font-size: 12.5px;
animation: mcBlink 1s ease-in-out infinite;
}
@keyframes mcBlink { 50% { opacity: .5; } }
#fesGame .mc-item { line-height: 0; animation: mcPop .25s; }
#fesGame .mc-item svg { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
#fesGame .lbl { color: #b89b6e; font-size: 12px; }
#fesGame .mc-acts { display: flex; gap: 6px; }
#fesGame .mc-acts button {
padding: 0 14px; border: none; border-radius: 10px; font-family: inherit;
font-size: 13.5px; font-weight: bold; cursor: pointer; white-space: nowrap;
}
#fesGame #mcMold { background: linear-gradient(#d8a058, #c98f4e); color: #3a2412; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
#fesGame #mcMold:active { background: #e0a860; }
#fesGame #mcTrash { background: #6e3a30; color: #f5e6c8; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
#fesGame #mcTrash:active { background: #8a4a3c; }
#fesGame .mc-bins, #fesGame .mc-ovens { display: flex; gap: 7px; }
#fesGame .mc-bin, #fesGame .mc-oven {
flex: 1; min-width: 0;
background: linear-gradient(#42301c, #3a2a18);
border: 2px solid #6b4a2a; border-radius: 12px;
text-align: center; padding: 7px 2px 5px; cursor: pointer;
transition: border-color .15s, box-shadow .15s, transform .1s, background .15s;
box-shadow: inset 0 1px 0 rgba(255, 220, 150, .08);
}
#fesGame .mc-bin:hover, #fesGame .mc-oven:hover {
border-color: #c9a86a;
background: linear-gradient(#4a3620, #42301c);
box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
#fesGame .mc-bin:active, #fesGame .mc-oven:active { transform: scale(.95); }
#fesGame .mc-bin svg, #fesGame .mc-oven .cake svg { max-width: 100%; height: auto; }
#fesGame .mc-bin .nm, #fesGame .mc-oven .t { font-size: 11px; color: #d8bd93; margin-top: 2px; }
/* 烤炉：拱形炉口 + 炭火 */
#fesGame .mc-oven { background: linear-gradient(#33241a, #221810); border-color: #7a5230; }
#fesGame .mc-oven .mouth {
width: 34px; height: 26px; margin: 2px auto 4px;
border-radius: 17px 17px 6px 6px;
background: radial-gradient(ellipse at 50% 80%, #ffb35e 0%, #b3502a 45%, #42190c 100%);
border: 2px solid #5a3a20;
}
#fesGame .mc-oven.baking .mouth { animation: mcFire .5s ease-in-out infinite alternate; }
@keyframes mcFire { from { box-shadow: 0 0 6px 1px rgba(255, 150, 60, .5); } to { box-shadow: 0 0 16px 4px rgba(255, 170, 70, .8); } }
#fesGame .mc-oven.baking .t { color: #ff9d6e; }
#fesGame .mc-oven.ready { border-color: #7ed957; box-shadow: 0 0 12px rgba(126, 217, 87, .45); }
#fesGame .mc-oven.ready .t { color: #7ed957; }
/* 开场 / 打烊遮罩 */
#fesGame .mc-overlay {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center; text-align: center;
padding: 20px 26px; z-index: 20;
background:
radial-gradient(60% 46% at 78% 16%, rgba(255, 226, 150, .16), transparent 70%),
rgba(10, 14, 28, .92);
}
#fesGame .mc-overlay h2 { color: #ffd76e; margin: 0 0 10px; font-size: clamp(19px, 4vw, 24px); }
#fesGame .mc-overlay p { font-size: 13.5px; line-height: 1.9; color: #e8d5b0; margin: 0; }
#fesGame .mc-overlay button {
margin-top: 14px; padding: 11px 34px; font-size: 16px; border-radius: 50px; border: none;
background: linear-gradient(to right, #ffd76e, #f4b942); color: #4a2f12;
font-weight: bold; cursor: pointer; font-family: inherit;
box-shadow: 0 6px 18px rgba(244, 185, 66, .4);
}
#fesGame .mc-overlay button:active { transform: translateY(1px); }
/* 升级面板 */
#fesGame .mc-shop {
position: absolute; inset: 0; display: none;
flex-direction: column; padding: 16px; z-index: 15; overflow-y: auto;
background: rgba(14, 18, 34, .96);
}
#fesGame .mc-shop h2 { color: #ffd76e; text-align: center; margin: 4px 0 12px; }
#fesGame .mc-shopclose {
position: absolute; top: 10px; right: 12px; background: none; border: none;
color: #f5e6c8; font-size: 22px; cursor: pointer;
}
#fesGame .mc-upg {
background: #2a3560; border: 1.5px solid #4a5a86; border-radius: 12px;
padding: 10px 12px; margin-bottom: 8px;
display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
#fesGame .mc-upg .info { flex: 1; min-width: 0; }
#fesGame .mc-upg .info b { font-size: 14px; }
#fesGame .mc-upg .info span { display: block; font-size: 12px; color: #9db4e8; margin-top: 2px; }
#fesGame .mc-upg button {
background: #ffd76e; border: none; border-radius: 8px; padding: 8px 12px;
font-weight: bold; cursor: pointer; white-space: nowrap; font-family: inherit; color: #4a2f12;
}
#fesGame .mc-upg button:disabled { background: #3a4a6e; color: #7a8ab8; cursor: not-allowed; }
#fesGame .mc-go {
background: linear-gradient(to right, #ffd76e, #f4b942) !important;
border: none; border-radius: 50px; padding: 12px 32px !important;
font-weight: bold; font-size: 16px; cursor: pointer; font-family: inherit; color: #4a2f12;
}
/* ---------- 窄屏适配 ---------- */
@media (max-width: 640px) {
#fesGame .mc-game { height: clamp(440px, 78vh, 620px); border-width: 2px; }
#fesGame .mc-hud { font-size: 12px; padding: 6px 8px; gap: 4px; }
#fesGame .mc-hud button { padding: 4px 9px; font-size: 12px; }
#fesGame .mc-cust { width: 62px; bottom: 52px; }
#fesGame .mc-face { width: 44px; height: 44px; }
#fesGame .mc-bubble { width: 70px; font-size: 10.5px; padding: 3px 4px; }
#fesGame .mc-counter::after { width: 40px; height: 40px; }
#fesGame .mc-floor { height: 52px; }
#fesGame .mc-bench { padding: 7px; gap: 5px; }
#fesGame .mc-trayrow { flex-wrap: wrap; }
#fesGame .mc-acts { width: 100%; }
#fesGame .mc-acts button { flex: 1; padding: 8px 0; }
#fesGame .mc-bin .nm, #fesGame .mc-oven .t { font-size: 10px; }
#fesGame .mc-oven .mouth { width: 28px; height: 22px; }
}