/* ============================================================
海南黎族竹木乐器 · 听音辨器 样式表
版本 1.1.0「南海夕照」——大胆重塑：
深海藏青 × 珊瑚落日橙 × 黎锦鎏金 × 琉璃青
参考"海南三原色"(孔雀蓝/阳光橙/珊瑚粉)与三亚日落渐变
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&display=swap');
:root {
--bayin-abyss: #071a33; /* 深海藏青（最深处） */
--bayin-deepsea: #0d2f52; /* 南海深蓝 */
--bayin-peacock: #11567f; /* 孔雀蓝 */
--bayin-teal: #2ec4b6; /* 琉璃青（点缀） */
--bayin-coral: #ff7e5f; /* 珊瑚橙 */
--bayin-coral-deep: #f25c54; /* 珊瑚红 */
--bayin-gold: #ffb85c; /* 落日鎏金 */
--bayin-gold-soft: #f0d9a0; /* 浅金 */
--bayin-gold-dim: #4a4456; /* 星灭暗灰 */
--bayin-cream: #fff3e2; /* 贝壳米白 */
--bayin-dusk: #2b2a5e; /* 暮色紫 */
--bayin-rose: #8a3a66; /* 晚霞玫瑰 */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
height: 100%;
overflow: hidden;
touch-action: manipulation; /* 移动端禁止双击缩放延迟 */
-webkit-tap-highlight-color: transparent;
}
body.bayin-body {
/* 游戏界面背景：黎族船型屋村落实拍（用户提供）+ 深海色压暗蒙版保证可读性
（开屏序章/八器巡礼由 .bayin-intro 自带「南海夕照」天幕覆盖，不受影响） */
background:
linear-gradient(180deg, rgba(7, 26, 51, .58) 0%, rgba(10, 24, 20, .42) 42%, rgba(6, 16, 12, .68) 100%),
url("../images/游戏背景.jpg") center 28% / cover no-repeat fixed;
color: var(--bayin-cream);
font-family: 'Noto Serif SC', "Songti SC", "SimSun", serif;
-webkit-user-select: none;
user-select: none;
}
/* 黎锦菱形几何纹样铺底（珊瑚金双色，极淡，纯装饰） */
body.bayin-body::before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
pointer-events: none;
background: url("data:image/svg+xml;utf8,") 0 0 / 56px 56px;
opacity: .06;
}
/* 1.1.1：游戏界面改用实拍村落背景，原椰树冠剪影层停用（照片里已有真椰林） */
#bayin-app {
position: relative;
z-index: 1; /* 高于黎锦纹样与椰树剪影装饰层 */
display: flex;
flex-direction: column;
height: 100vh; /* 旧内核 WebView 兜底 */
height: 100dvh;
max-width: 720px;
margin: 0 auto;
}
/* ============ 上 1/3：操作区 ============ */
.bayin-top {
position: relative;
z-index: 56; /* 答对浮层之上，保证按钮可见可点 */
flex: 0 0 33.333%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 16px 4px;
background: linear-gradient(180deg, rgba(255, 126, 95, .16) 0%, rgba(255, 126, 95, 0) 100%); /* 顶部珊瑚暖光 */
}
/* 左上三颗星 */
.bayin-stars {
position: absolute;
top: 12px;
left: 14px;
display: flex;
gap: 6px;
font-size: 30px;
line-height: 1;
}
.bayin-stars .star {
color: var(--bayin-gold);
text-shadow: 0 0 12px rgba(255, 184, 92, .8), 0 0 28px rgba(255, 126, 95, .4);
/* 星星熄灭：600ms 金色渐变暗灰并轻微下沉 */
transition: color 600ms ease, text-shadow 600ms ease, transform 600ms ease;
}
.bayin-stars .star.dim {
color: var(--bayin-gold-dim);
text-shadow: none;
transform: translateY(4px);
}
.bayin-level {
font-size: 15px;
letter-spacing: .2em;
color: var(--bayin-gold);
}
.bayin-hint {
font-size: 13px;
opacity: .8;
margin-bottom: 4px;
text-shadow: 0 1px 6px rgba(7, 26, 51, .6);
}
/* 四个操作按钮：珊瑚描边深海玻璃 */
.bayin-controls {
display: flex;
gap: 14px;
}
.bayin-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 62px;
padding: 10px 12px;
font-size: 20px;
font-family: inherit;
color: var(--bayin-cream);
background: linear-gradient(160deg, rgba(255, 126, 95, .20), rgba(13, 47, 82, .45));
border: 1px solid rgba(255, 184, 92, .55);
border-radius: 14px;
cursor: pointer;
transition: transform .15s ease, box-shadow .2s ease, opacity .3s ease, filter .3s ease;
}
.bayin-btn span { font-size: 11px; letter-spacing: .1em; }
.bayin-btn:active { transform: scale(.92); }
.bayin-btn.primary {
background: linear-gradient(135deg, var(--bayin-coral) 0%, var(--bayin-gold) 100%);
color: #3a1c08;
font-weight: 600;
border-color: rgba(255, 243, 226, .4);
box-shadow: 0 4px 20px rgba(255, 126, 95, .45);
}
.bayin-btn.primary.playing { animation: btnPulse 1.6s ease-in-out infinite; }
/* 锁定按钮：降低透明度 + 禁止点击 */
.bayin-btn.locked {
opacity: .35;
pointer-events: none;
filter: grayscale(.6);
}
.bayin-btn.big { min-width: 180px; padding: 14px 22px; font-size: 24px; }
@keyframes btnPulse {
0%, 100% { box-shadow: 0 4px 20px rgba(255, 126, 95, .45); }
50% { box-shadow: 0 4px 34px rgba(255, 184, 92, .8); }
}
/* ============ 下 2/3：乐器选择区 2×4 ============ */
.bayin-grid {
flex: 0 0 66.667%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
padding: 14px 14px 78px; /* 底部留给频谱条 */
}
.bayin-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
/* 暖棕玻璃卡：呼应船型屋茅草与木色，珊瑚金描边，乐器悬浮其中 */
background: linear-gradient(165deg, rgba(74, 48, 22, .42), rgba(10, 16, 9, .72));
border: 1px solid rgba(255, 184, 92, .32);
border-radius: 16px;
cursor: pointer;
transition: transform .18s ease, border-color .2s ease, box-shadow .25s ease;
}
.bayin-card:active { transform: scale(.94); }
.bayin-card:hover {
border-color: rgba(255, 126, 95, .8);
box-shadow: 0 6px 26px rgba(255, 126, 95, .25);
}
.bayin-card img {
width: 74%;
max-width: 108px;
aspect-ratio: 1;
object-fit: contain;
pointer-events: none;
/* 透明乐器悬浮感：落日暖晕替代原照片投影 */
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .68)) drop-shadow(0 0 16px rgba(255, 184, 92, .34));
}
.bayin-card .card-name {
font-size: 15px;
letter-spacing: .15em;
color: var(--bayin-cream);
text-shadow: 0 1px 5px rgba(7, 26, 51, .7);
pointer-events: none;
}
.bayin-card .card-feature {
font-size: 10px;
opacity: .6;
transform: scale(.92);
pointer-events: none;
}
/* 点击缩放动效 */
.bayin-card.pop { animation: cardPop .3s ease; }
@keyframes cardPop {
0% { transform: scale(1); }
40% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* 答错抖动动画 */
.bayin-card.shake {
border-color: var(--bayin-coral-deep);
animation: cardShake .5s ease;
}
@keyframes cardShake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-9px) rotate(-2deg); }
30% { transform: translateX(8px) rotate(2deg); }
45% { transform: translateX(-6px) rotate(-1.5deg); }
60% { transform: translateX(5px) rotate(1.5deg); }
75% { transform: translateX(-3px); }
90% { transform: translateX(2px); }
}
/* 卡片禁用（答对阶段） */
.bayin-grid.disabled .bayin-card { pointer-events: none; opacity: .55; }
/* 答对后「下一关」珊瑚金呼吸高亮，引导点击 */
.bayin-btn.next-ready {
background: linear-gradient(135deg, var(--bayin-coral) 0%, var(--bayin-gold) 100%);
color: #3a1c08;
font-weight: 600;
border-color: rgba(255, 243, 226, .4);
animation: btnPulse 1.4s ease-in-out infinite;
}
/* ============ 答对放大舞台（FLIP 动画容器） ============ */
.bayin-stage {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 55; /* 高于毛玻璃浮层，放大图标保持清晰 */
pointer-events: none;
}
.bayin-stage .fly-card {
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 18px;
/* 透明图标版：答对放大时无底板，纯乐器悬浮 */
background: transparent;
border: none;
box-shadow: none;
transition: left .55s cubic-bezier(.22, 1, .36, 1),
top .55s cubic-bezier(.22, 1, .36, 1),
width .55s cubic-bezier(.22, 1, .36, 1),
height .55s cubic-bezier(.22, 1, .36, 1);
will-change: left, top, width, height;
}
.bayin-stage .fly-card img {
width: 78%; /* 1.1.2：放大图更饱满 */
object-fit: contain;
filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(255, 184, 92, .45));
animation: flyBreath 2.4s ease-in-out infinite;
}
@keyframes flyBreath {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* ============ 毛玻璃讲解浮层 ============ */
.bayin-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
pointer-events: none; /* 纯视觉层：不拦截任何点击，按钮在上方可操作 */
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0 18px 96px;
/* 1.1.2：答对时背景整体压暗（深色蒙版 + 背景亮度降低），突出乐器与讲解文字 */
background: rgba(3, 9, 18, .58);
backdrop-filter: blur(12px) brightness(.68);
-webkit-backdrop-filter: blur(12px) brightness(.68);
animation: overlayIn .45s ease both;
}
@keyframes overlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
.overlay-card { max-width: 560px; text-align: center; }
.overlay-title {
font-size: clamp(26px, 6.5vw, 34px); /* 随屏宽自适应 */
letter-spacing: .3em;
color: var(--bayin-gold);
text-shadow: 0 2px 16px rgba(7, 26, 51, .7);
}
.overlay-feature {
margin: 6px 0 14px;
font-size: 14px;
letter-spacing: .12em;
opacity: .9;
text-shadow: 0 1px 6px rgba(7, 26, 51, .6);
}
.overlay-lines p {
font-family: 'Noto Serif SC', "Songti SC", serif; /* 讲解文字衬线体 */
font-size: clamp(15px, 3.8vw, 18px); /* 随屏宽自适应 */
line-height: 2;
text-shadow: 0 1px 8px rgba(7, 26, 51, .75);
opacity: 0;
transform: translateY(10px);
}
/* 逐行渐显（每行间隔 200ms，由 JS 设置 animation-delay） */
.overlay-lines p.show { animation: lineIn .5s ease both; }
@keyframes lineIn {
to { opacity: 1; transform: translateY(0); }
}
.overlay-tip { margin-top: 14px; font-size: 12px; opacity: .6; }
/* ============ 通关总结页 ============ */
.bayin-summary {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
background: rgba(7, 26, 51, .55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
animation: overlayIn .5s ease both;
}
.summary-card {
text-align: center;
padding: 36px 28px;
max-width: 480px;
background: linear-gradient(165deg, rgba(17, 86, 127, .5), rgba(7, 26, 51, .9));
border: 1px solid var(--bayin-gold);
border-radius: 22px;
box-shadow: 0 20px 80px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 126, 95, .15);
}
.summary-card h2 {
font-size: 26px;
letter-spacing: .2em;
color: var(--bayin-gold);
margin-bottom: 14px;
}
.summary-card p { font-size: 15px; line-height: 1.9; }
.summary-card .summary-bless { margin: 14px 0 22px; opacity: .85; font-size: 14px; }
/* ============================================================
开屏画面：博物馆式序章，参考故宫 H5
徽章 → 竖排诗行逐行浮现 → 圆形开启钮；乐器如展品漂浮
1.1.0：序章直接浸入南海夕照天幕
============================================================ */
.bayin-intro {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 70; /* 压过游戏所有层 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 序章天幕：与游戏背景同一片南海落日，中央一团鎏金日光 */
background:
radial-gradient(60% 34% at 50% 58%, rgba(255, 195, 107, .45) 0%, rgba(255, 126, 95, .2) 46%, rgba(255, 126, 95, 0) 72%),
radial-gradient(120% 70% at 50% -12%, rgba(46, 196, 182, .08) 0%, rgba(46, 196, 182, 0) 55%),
linear-gradient(180deg,
#0b1636 0%,
var(--bayin-dusk) 26%,
var(--bayin-rose) 48%,
#d95f5c 62%,
#f98f5c 70%,
var(--bayin-peacock) 78%,
var(--bayin-deepsea) 90%,
var(--bayin-abyss) 100%);
transition: opacity .7s ease, visibility .7s ease;
}
.bayin-intro.leaving {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* 漂浮乐器：自暗处浮现并缓慢游移 */
.intro-floaters { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.intro-floater {
position: absolute;
opacity: 0;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(255, 184, 92, .2));
animation: floaterIn 2.2s ease forwards, floaterDrift 12s ease-in-out 2.2s infinite alternate;
}
@keyframes floaterIn {
from { opacity: 0; transform: translateY(26px) scale(.86); }
to { opacity: .22; transform: translateY(0) scale(1); }
}
@keyframes floaterDrift {
from { transform: translateY(0) rotate(-2deg); }
to { transform: translateY(-26px) rotate(3deg); }
}
.intro-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 34px;
}
/* 徽章：浮现 + 呼吸金光 */
.intro-emblem {
opacity: 0;
animation: emblemIn 1.4s ease .3s forwards, emblemGlow 3.2s ease-in-out 1.8s infinite;
}
@keyframes emblemIn {
from { opacity: 0; transform: scale(.7); }
to { opacity: 1; transform: scale(1); }
}
@keyframes emblemGlow {
0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 184, 92, .3)); }
50% { filter: drop-shadow(0 0 22px rgba(255, 126, 95, .6)); }
}
/* 竖排诗行：从右至左三列，逐列浮现 */
.intro-lines {
display: flex;
flex-direction: row-reverse; /* 竖排从右往左读 */
gap: 26px;
height: 200px;
}
.intro-lines p {
writing-mode: vertical-rl;
letter-spacing: .32em;
font-size: 17px;
color: var(--bayin-cream);
text-shadow: 0 1px 10px rgba(7, 26, 51, .6);
opacity: 0;
transform: translateY(14px);
}
.intro-lines p:nth-child(1) { animation: introLineIn .9s ease 1.1s forwards; }
.intro-lines p:nth-child(2) { animation: introLineIn .9s ease 1.9s forwards; }
.intro-lines p:nth-child(3) { animation: introLineIn .9s ease 2.7s forwards; }
@keyframes introLineIn {
to { opacity: .95; transform: translateY(0); }
}
/* 圆形开启钮：珊瑚金双线环，呼吸脉冲 */
.intro-start {
width: 92px;
height: 92px;
border-radius: 50%;
font-family: inherit;
font-size: 16px;
letter-spacing: .2em;
line-height: 1.5;
color: var(--bayin-gold-soft);
background: radial-gradient(circle at 50% 38%, rgba(255, 126, 95, .3), rgba(13, 47, 82, .25) 70%);
border: 1px solid rgba(255, 184, 92, .9);
box-shadow: 0 0 0 5px rgba(255, 184, 92, .14), 0 0 30px rgba(255, 126, 95, .3);
cursor: pointer;
opacity: 0;
animation: introLineIn .9s ease 3.5s forwards, startPulse 2.6s ease-in-out 4.5s infinite;
transition: transform .18s ease;
}
.intro-start span { display: inline-block; padding-left: .2em; /* 视觉居中补偿字距 */ }
.intro-start:active { transform: scale(.93); }
@keyframes startPulse {
0%, 100% { box-shadow: 0 0 0 5px rgba(255, 184, 92, .14), 0 0 30px rgba(255, 126, 95, .3); }
50% { box-shadow: 0 0 0 10px rgba(255, 184, 92, .06), 0 0 52px rgba(255, 126, 95, .55); }
}
.intro-foot {
position: absolute;
bottom: 26px;
font-size: 12px;
letter-spacing: .34em;
opacity: 0;
animation: introLineIn .9s ease 4s forwards;
color: var(--bayin-cream);
text-shadow: 0 1px 8px rgba(7, 26, 51, .6);
}
/* 小屏适配 */
@media (max-width: 480px) {
.intro-lines { height: 168px; gap: 20px; }
.intro-lines p { font-size: 15px; }
.intro-start { width: 82px; height: 82px; font-size: 14px; }
}
/* ============================================================
八器巡礼：开启后逐件登场，参考视频的器物巡展段落
============================================================ */
/* 序章主区退场 */
.bayin-intro.touring .intro-inner,
.bayin-intro.touring .intro-foot {
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
}
.intro-showcase {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
}
.intro-showcase[hidden] { display: none !important; }
/* 聚光灯：器物背后一团落日珊瑚光晕 */
.showcase-spot {
position: absolute;
left: 50%;
top: 50%;
width: 78vmin;
height: 78vmin;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255, 184, 92, .28) 0%, rgba(255, 126, 95, .12) 42%, rgba(255, 126, 95, 0) 68%);
pointer-events: none;
}
/* 登场的乐器：自暗处放大浮现，驻留时轻微呼吸 */
.showcase-icon {
position: relative;
width: 42vmin;
max-width: 300px;
opacity: 0;
filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .6)) drop-shadow(0 0 38px rgba(255, 184, 92, .35));
}
.showcase-icon.show { animation: showcaseIconIn .9s cubic-bezier(.22, 1, .36, 1) forwards, showcaseBreath 2.2s ease-in-out .9s infinite; }
@keyframes showcaseIconIn {
from { opacity: 0; transform: translateY(30px) scale(.8); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes showcaseBreath {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
/* 竖排介绍：乐器名（珊瑚鎏金渐变大字）+ 一句诗行（小字米白） */
.showcase-text {
position: relative;
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
gap: 18px;
height: 46vmin;
max-height: 340px;
opacity: 0;
}
.showcase-text.show { animation: showcaseTextIn .8s ease .25s forwards; }
@keyframes showcaseTextIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.showcase-name {
writing-mode: vertical-rl;
font-size: 40px;
letter-spacing: .3em;
background: linear-gradient(180deg, var(--bayin-cream) 0%, var(--bayin-gold) 45%, var(--bayin-coral) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 2px 10px rgba(7, 26, 51, .5));
}
.showcase-line {
writing-mode: vertical-rl;
font-size: 15px;
letter-spacing: .26em;
line-height: 1.8;
color: var(--bayin-cream);
opacity: .9;
padding-top: 8px;
text-shadow: 0 1px 8px rgba(7, 26, 51, .6);
}
/* 巡礼进度：底部居中「壹 / 八」 */
.showcase-count {
position: absolute;
left: 50%;
bottom: 60px;
transform: translateX(-50%);
font-size: 13px;
letter-spacing: .4em;
color: var(--bayin-gold);
opacity: .85;
text-shadow: 0 1px 8px rgba(7, 26, 51, .6);
}
/* 跳过钮：左上角，低调但可点 */
.intro-skip {
position: absolute;
top: 20px;
left: 20px;
right: auto;
z-index: 3;
font-family: inherit;
font-size: 13px;
letter-spacing: .18em;
color: var(--bayin-cream);
background: rgba(7, 26, 51, .3);
border: 1px solid rgba(255, 243, 226, .35);
border-radius: 999px;
padding: 7px 16px;
cursor: pointer;
opacity: .7;
transition: opacity .2s ease;
}
.intro-skip:hover { opacity: 1; }
.intro-skip[hidden] { display: none !important; }
@media (max-width: 480px) {
.intro-showcase { gap: 18px; }
.showcase-icon { width: 46vmin; }
.showcase-text { height: 52vmin; gap: 12px; }
.showcase-name { font-size: 32px; }
.showcase-line { font-size: 13px; }
}
/* ============ 底部频谱可视化 ============ */
/* hidden 属性必须压过 display:flex，否则浮层永远遮挡页面 */
.bayin-stage[hidden],
.bayin-overlay[hidden],
.bayin-summary[hidden] { display: none !important; }
.bayin-spectrum {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 64px;
z-index: 30;
pointer-events: none;
}
/* ============ 响应式 ============ */
@media (max-width: 480px) {
.bayin-stars { font-size: 24px; }
.bayin-btn { min-width: 56px; padding: 8px 10px; font-size: 18px; }
.bayin-controls { gap: 10px; }
.bayin-grid { gap: 8px; padding: 10px 10px 74px; }
.bayin-card .card-name { font-size: 13px; }
.bayin-card .card-feature { display: none; }
.overlay-title { font-size: 28px; }
.overlay-lines p { font-size: 16px; }
}
@media (max-height: 620px) {
.bayin-hint { display: none; }
.bayin-card .card-feature { display: none; }
}
/* ============================================================
海南风情细节层（覆盖式增强，不改结构）
============================================================ */
/* 标题类文字：珊瑚鎏金渐变字 */
.bayin-level,
.overlay-title,
.summary-card h2 {
background: linear-gradient(95deg, var(--bayin-gold-soft) 0%, var(--bayin-gold) 45%, var(--bayin-coral) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* 按钮：顶部内高光 + 柔和落影，如贝壳釉面 */
.bayin-btn {
box-shadow: inset 0 1px 0 rgba(255, 243, 226, .14), 0 3px 12px rgba(7, 26, 51, .35);
}
.bayin-btn.primary {
box-shadow: inset 0 1px 0 rgba(255, 244, 214, .55), 0 4px 20px rgba(255, 126, 95, .45);
}
/* 乐器卡片：顶部一线珊瑚暖光 */
.bayin-card {
box-shadow: inset 0 1px 0 rgba(255, 184, 92, .14);
}
.bayin-card:hover {
box-shadow: inset 0 1px 0 rgba(255, 184, 92, .14), 0 6px 26px rgba(255, 126, 95, .28);
}
/* 通关总结卡：叠一层极淡黎锦纹 */
.summary-card { position: relative; overflow: hidden; }
.summary-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 22px;
pointer-events: none;
background: url("data:image/svg+xml;utf8,") 0 0 / 56px 56px;
opacity: .07;
}
/* 小屏：椰树冠剪影层已随 1.1.1 停用，无需再适配 */
/* ============================================================
游戏场景层（1.1.1）：游戏界面背景改为用户提供的黎族村落
实拍图（船型屋 + 椰林 + 稻田），原落日/星空/五指山/帆船/
海浪 SVG 场景层整体停用；黎锦纹样层保留作肌理。
开屏序章与八器巡礼的「南海夕照」天幕不受影响。
============================================================ */