/* ============================================================
   白沙湾·夏日奇遇记 — 视觉样式(横屏 2.5D 海岛版)
   按参考图还原: 横屏地图 / 3D卡通标题 / 白色积分胶囊 /
   橙色序号标签卡 / 木牌进度 / 宝箱任务卡 / 沙滩圆钮导航
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    width: 100%; height: 100%; overflow: hidden;
    /* 黑边区(非 16:9 屏幕的多余区域)填充海岛天空渐变, 消除深蓝色块突兀感 */
    background: linear-gradient(180deg, #bfe6f4 0%, #dcf2fa 52%, #f2faf6 100%);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    user-select: none; -webkit-user-select: none;
}

button { font-family: inherit; border: none; background: none; cursor: pointer; }

/* ---------- 舞台: 1280x590 逻辑分辨率(手机横屏最适配基准, 与 map.png 同比例), JS 等比缩放 ---------- */
/* 居中容器: 横屏时加入安全区 padding, 避开刘海与底部指示条 */
.game-container {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding:
        env(safe-area-inset-top, 0px)
        env(safe-area-inset-right, 0px)
        env(safe-area-inset-bottom, 0px)
        env(safe-area-inset-left, 0px);
}

/* 竖屏强制横屏: 把整个容器旋转 90° 并铺满设备(无论手机怎么拿都是横屏全屏)
   JS 在 fitStage() 里会用实际 window.innerWidth/Height 覆盖 width/height,
   并使用 cover 缩放让舞台铺满设备短边, 消除两侧空白 */
.game-container.force-landscape {
    width: 100vh; height: 100vw;
    top: 50%; left: 50%; right: auto; bottom: auto;
    padding: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
}

.stage {
    position: relative;
    width: 1280px; height: 590px;
    flex: none;
    transform-origin: center center;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 80px rgba(0,0,0,.5);
}

/* 地图底图: map.png(1920x883) 与 1280x590 舞台同比例, cover 居中完整显示 */
.map-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}

/* ==================== 环境动效层 ==================== */
.fx-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.fx-layer > * { position: absolute; will-change: transform, opacity; }

/* 海面波光(海风在吹) */
.fx-shimmer {
    left: 0; top: 0; width: 100%; height: 47%;
    background: repeating-linear-gradient(115deg,
        rgba(255,255,255,0) 0 46px,
        rgba(255,255,255,.13) 46px 92px);
    mix-blend-mode: screen;
    opacity: .85;
    animation: shimmerMove 7s linear infinite;
}
@keyframes shimmerMove { 0% { background-position: 0 0; } 100% { background-position: 184px 0; } }

/* 云朵飘移 */
.fx-cloud { right: 0; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,.12)); animation: cloudDrift var(--dur,50s) linear infinite; }
@keyframes cloudDrift { 0% { transform: translateX(1480px); } 100% { transform: translateX(-200px); } }

/* 海鸥飞过 */
.fx-bird { right: 0; display: block; filter: drop-shadow(0 4px 4px rgba(0,0,0,.15)); animation: birdFly var(--dur,18s) linear infinite; }
@keyframes birdFly {
    0%   { transform: translate(1494px, 0) rotate(-5deg); }
    50%  { transform: translate(640px, -19px) rotate(3deg); }
    100% { transform: translate(-120px, 11px) rotate(-5deg); }
}

/* 椰树随风摆动 */
.fx-palm {
    transform-origin: 50% 95%;
    display: block;
    filter: drop-shadow(0 8px 10px rgba(0,40,0,.22));
    animation: palmSway 5.2s ease-in-out infinite;
}
@keyframes palmSway {
    0%,100% { transform: rotate(-2.5deg); }
    50%    { transform: rotate(2.5deg); }
}

/* 小螃蟹沙滩爬行 */
.fx-crab { transform-origin: center; display: block; filter: drop-shadow(0 4px 4px rgba(0,0,0,.22)); animation: crabWalk var(--dur,10s) ease-in-out infinite; }
@keyframes crabWalk {
    0%   { transform: translateX(0) scaleX(1); }
    46%  { transform: translateX(100px) scaleX(1); }
    50%  { transform: translateX(100px) scaleX(-1); }
    96%  { transform: translateX(0) scaleX(-1); }
    100% { transform: translateX(0) scaleX(1); }
}

/* 帆船海面航行: 从左向右沿海平面做起伏曲线轨迹(非直线), 渐隐后循环 */
.fx-boat {
    position: absolute; left: -93px; top: 4px; display: block;
    animation: boatSailX var(--dur,30s) linear infinite;
}
.fx-boat-inner {
    display: block; width: 84px;            /* 缩小 30% (120px → 84px) */
    transform: scaleX(-1);                   /* 船头朝右 */
    filter: drop-shadow(0 5px 8px rgba(0,40,60,.22));
    /* 垂直起伏 + 轻微摇摆: 与外层水平位移叠加形成沿海平面的曲线轨迹 */
    animation: boatBob calc(var(--dur,24s) / 3) ease-in-out infinite;
}
@keyframes boatSailX {
    0%   { transform: translateX(0); opacity: 0; }
    6%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(1440px); opacity: 0; }
}
@keyframes boatBob {
    0%   { transform: scaleX(-1) translateY(0)    rotate(0deg); }
    25%  { transform: scaleX(-1) translateY(-16px) rotate(-3deg); }
    50%  { transform: scaleX(-1) translateY(0)    rotate(0deg); }
    75%  { transform: scaleX(-1) translateY(10px)  rotate(2deg); }
    100% { transform: scaleX(-1) translateY(0)    rotate(0deg); }
}

/* 阳光光斑浮尘 */
.fx-spark { width: 26px; display: block; opacity: 0; animation: sparkFloat var(--dur,8s) ease-in-out infinite; }
@keyframes sparkFloat {
    0%   { transform: translateY(10px) scale(.5); opacity: 0; }
    25%  { opacity: .85; }
    100% { transform: translateY(-70px) scale(1.1); opacity: 0; }
}

/* ---------- 3D 卡通标题(美术字图片) ---------- */
.game-logo {
    position: absolute; left: 148px; top: 54px; z-index: 40;
    pointer-events: none;
}
.logo-img {
    width: 220px; display: block;
    filter: drop-shadow(0 6px 12px rgba(0,60,100,.3));
    animation: logo-in .6s cubic-bezier(.34,1.56,.64,1) backwards;
}
@keyframes logo-in { from { opacity: 0; transform: translateY(-18px) scale(.85); } }

/* ---------- 顶部玩家胶囊 ---------- */
.player-pill {
    position: absolute; left: 360px; top: 57px; z-index: 50; transform: scale(.85); transform-origin: center;
    display: flex; align-items: center;
    height: 62px; padding: 5px 20px 5px 6px;
    background: linear-gradient(180deg, rgba(23,73,105,.92), rgba(14,52,78,.92));
    border-radius: 34px;
    box-shadow: 0 4px 14px rgba(0,30,60,.4), inset 0 1px 0 rgba(255,255,255,.25);
    cursor: pointer;
}
.player-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(160deg, #ffe9c4, #ffcf8f);
    border: 3px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    flex: none;
}
.player-meta { margin-left: 10px; color: #fff; min-width: 130px; }
.player-name { font-size: 16px; font-weight: 800; letter-spacing: 1px; }
.player-level { font-size: 11.5px; color: #ffd98a; font-weight: 700; margin: 1px 0 3px; }
.exp-track {
    width: 132px; height: 12px; border-radius: 7px;
    background: rgba(0,0,0,.35);
    overflow: hidden; position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}
.exp-fill {
    height: 100%; border-radius: 7px;
    background: linear-gradient(90deg, #ffd23e, #ff9d2e);
    transition: width .5s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 0 8px rgba(255,180,50,.7);
}
.exp-num {
    position: absolute; inset: 0;
    font-size: 9.5px; color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ---------- 顶部右侧积分胶囊 ---------- */
.top-right {
    position: absolute; right: 141px; top: 61px; z-index: 50; transform: scale(.87); transform-origin: center;
    display: flex; align-items: center; gap: 12px;
}
.currency-pill {
    display: flex; align-items: center;
    height: 46px; padding: 4px 6px 4px 10px;
    background: linear-gradient(180deg, #ffffff, #f2f6fa);
    border-radius: 26px;
    box-shadow: 0 4px 12px rgba(0,40,80,.3), inset 0 -2px 0 rgba(0,60,120,.08);
}
.currency-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex: none;
}
.currency-icon.star { background: radial-gradient(circle at 35% 30%, #fff3c4, #ffd23e); }
.currency-icon.shell { background: radial-gradient(circle at 35% 30%, #ffe9d6, #ffb98a); }
.currency-num {
    min-width: 52px; text-align: center;
    font-size: 19px; font-weight: 900; color: #4a3b2a;
    font-variant-numeric: tabular-nums;
}
.currency-plus {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(180deg, #8be26a, #4cb944);
    color: #fff; font-size: 20px; font-weight: 900; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 6px rgba(60,160,50,.5), inset 0 1px 0 rgba(255,255,255,.5);
    transition: transform .15s;
}
.currency-plus:active { transform: scale(.88); }

.gear-btn {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(180deg, #5db8f0, #2f86c9);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff;
    box-shadow: 0 4px 12px rgba(20,90,150,.5), inset 0 2px 0 rgba(255,255,255,.4);
    transition: transform .2s;
}
.gear-btn:active { transform: rotate(40deg) scale(.92); }

/* ---------- 每日签到(带图标版本) ---------- */
.signin-btn {
    position: absolute; right: 157px; top: 130px; z-index: 50; transform-origin: center;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    transition: transform .15s;
}
.signin-btn:active { transform: scale(.92); }
.signin-book {
    width: 66px; height: 66px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.signin-ico { width: 100%; height: 100%; object-fit: contain; }
.signin-check {
    position: absolute; right: -6px; bottom: -6px;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(180deg, #8be26a, #4cb944);
    color: #fff; font-size: 15px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.signin-check.done { background: linear-gradient(180deg, #b8c4cc, #8b98a3); }
.signin-label {
    font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,50,90,.6);
}
.signin-btn .red-dot {
    position: absolute; top: -4px; right: -4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #ff4d4f; border: 2px solid #fff;
    animation: pulse-dot 1.4s infinite;
}
@keyframes pulse-dot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ---------- 地图地点标签卡 ---------- */
.marker {
    position: absolute; z-index: 30;
    transform: translate(-50%, -100%);
    cursor: pointer;
    transition: transform .18s;
    animation: marker-in .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.marker:active { transform: translate(-50%, -100%) scale(.93); }
@keyframes marker-in { from { opacity: 0; transform: translate(-50%, -80%) scale(.6); } }

.marker-card {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(180deg, #ffffff, #fdf6ea);
    border-radius: 18px;
    padding: 8px 16px 8px 10px;
    margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(30,60,40,.3), inset 0 -2px 0 rgba(180,120,40,.12);
    white-space: nowrap;
    position: relative;
    transform: scale(0.9);
    transform-origin: bottom center;
}
.marker-num {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    background: linear-gradient(180deg, #ffc46b, #ff8f2b);
    color: #fff; font-size: 18px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 6px rgba(220,120,20,.5), inset 0 1.5px 0 rgba(255,255,255,.55);
    text-shadow: 0 1px 2px rgba(150,60,0,.4);
}
.marker-texts .m-name { font-size: 17.5px; font-weight: 900; color: #4a3520; letter-spacing: 1px; }
.marker-texts .m-sub { font-size: 11.5px; color: #a08b62; font-weight: 600; margin-top: 1px; }
.marker-pin {
    width: 14px; height: 14px; margin: -2px auto 0;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 0 0 4px 0;
    box-shadow: 3px 3px 5px rgba(30,60,40,.2);
}
.marker.cleared .marker-num { background: linear-gradient(180deg, #9be28a, #55b84a); }
.marker.cleared .marker-card { background: linear-gradient(180deg, #f4fff0, #e8f8e0); }
.marker.cleared .m-name { color: #2e7d32; }
.marker-done-tag {
    position: absolute; top: -9px; right: -7px;
    background: linear-gradient(180deg, #ff7b7b, #ef4444);
    color: #fff; font-size: 10.5px; font-weight: 800;
    padding: 2px 8px; border-radius: 10px;
    border: 1.5px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
    transform: rotate(8deg);
}
.marker .float-hint {
    position: absolute; left: 50%; top: -34px; transform: translateX(-50%);
    font-size: 22px;
    animation: bounce-hint 1.6s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
@keyframes bounce-hint { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-8px); } }

/* ---------- 左下: 木质探索进度牌 ---------- */
.progress-board {
    position: absolute; left: 166px; bottom: 54px; z-index: 45; transform: scale(.69); transform-origin: center;
    width: 218px;
    background: linear-gradient(160deg, #b9854d 0%, #a06a35 55%, #8d5a28 100%);
    border-radius: 14px;
    padding: 14px 16px 12px;
    box-shadow: 0 8px 20px rgba(60,30,0,.45), inset 0 2px 0 rgba(255,220,170,.35), inset 0 -3px 6px rgba(60,30,0,.3);
    border: 3px solid #7a4c1e;
}
.progress-board::before, .progress-board::after {
    content: ''; position: absolute; top: 7px;
    width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e8c890, #8a5a25);
    box-shadow: inset 0 -1px 2px rgba(0,0,0,.4);
}
.progress-board::before { left: 9px; } .progress-board::after { right: 9px; }
.pb-title {
    text-align: center; font-size: 16px; font-weight: 900; color: #fff8e8;
    letter-spacing: 3px; text-shadow: 0 2px 3px rgba(60,30,0,.6);
}
.pb-fraction {
    display: flex; align-items: baseline; justify-content: center; gap: 4px;
    margin: 4px 0 2px;
}
.pb-fraction b {
    font-size: 42px; font-weight: 900; color: #ffe9b0;
    text-shadow: 0 3px 0 rgba(90,50,0,.5), 0 5px 10px rgba(0,0,0,.3);
    line-height: 1;
}
.pb-fraction small { font-size: 20px; font-weight: 800; color: #e8cfa0; }
.pb-fraction .pb-gift { font-size: 30px; animation: swing 2.2s ease-in-out infinite; transform-origin: bottom center; }
@keyframes swing { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.pb-desc { text-align: center; font-size: 12px; color: #ffe2b0; font-weight: 700; line-height: 1.5; }
.pb-desc .highlight { color: #fff; background: rgba(255,120,40,.5); border-radius: 4px; padding: 0 4px; }

/* ---------- 右下: 今日任务卡 + 宝箱 ---------- */
.daily-task {
    position: absolute; right: 103px; bottom: 64px; z-index: 45;
    width: 250px;
    background: linear-gradient(180deg, #ffffff, #fdf8ee);
    border-radius: 20px;
    padding: 14px 16px 16px;
    box-shadow: 0 8px 24px rgba(20,60,40,.35), inset 0 -3px 0 rgba(200,150,60,.15);
}
.dt-title { font-size: 19px; font-weight: 900; color: #4a3520; letter-spacing: 2px; }
.dt-sub { font-size: 12.5px; color: #a08b62; font-weight: 600; margin: 2px 0 10px; }
.dt-btn {
    width: 100%; height: 48px; border-radius: 24px;
    background: linear-gradient(180deg, #ffcf5e, #ff9a2e);
    color: #fff; font-size: 18px; font-weight: 900; letter-spacing: 2px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 5px 0 #d97a12, 0 8px 16px rgba(220,130,20,.45), inset 0 2px 0 rgba(255,255,255,.5);
    text-shadow: 0 2px 2px rgba(180,80,0,.4);
    transition: transform .12s, box-shadow .12s;
}
.dt-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #d97a12, 0 3px 8px rgba(220,130,20,.4); }
.dt-corner-star { position: absolute; top: -12px; right: -10px; font-size: 26px; transform: rotate(15deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.dt-close {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    width: 24px; height: 24px; line-height: 22px; text-align: center;
    border: none; border-radius: 50%;
    background: rgba(74,53,32,.10); color: #6b513a;
    font-size: 18px; font-weight: 700; cursor: pointer;
    transition: background .12s, transform .12s;
}
.dt-close:hover { background: rgba(74,53,32,.20); }
.dt-close:active { transform: scale(.9); }

/* CSS 绘制宝箱 */
.treasure-chest {
    position: absolute; right: 201px; bottom: 63px; z-index: 44;
    width: 100px; height: 92px;
    cursor: pointer;
    filter: drop-shadow(0 8px 14px rgba(60,30,0,.45));
    animation: chest-float 3s ease-in-out infinite;
    transition: transform .15s;
}
.treasure-chest:active { transform: scale(.9); }
.chest-gems {
    position: absolute; top: 0; left: 12px; right: 12px; height: 30px;
    display: flex; align-items: flex-end; justify-content: center; gap: 4px;
    z-index: 1;
}
.chest-gems .gem {
    width: 17px; height: 17px; border-radius: 4px;
    transform: rotate(45deg);
    box-shadow: inset 0 2px 2px rgba(255,255,255,.65), 0 2px 4px rgba(0,0,0,.2);
}
.chest-lid {
    position: absolute; top: 18px; left: 0; width: 100px; height: 34px;
    background: linear-gradient(180deg, #d99a52, #a5672e);
    border-radius: 18px 18px 5px 5px;
    border: 3px solid #7a4c1e;
    z-index: 2;
    box-shadow: inset 0 3px 0 rgba(255,220,170,.4);
}
.chest-body {
    position: absolute; top: 48px; left: 0; width: 100px; height: 40px;
    background: linear-gradient(180deg, #b57a3e, #8d5a28);
    border-radius: 5px 5px 14px 14px;
    border: 3px solid #7a4c1e;
    z-index: 2;
    box-shadow: inset 0 -4px 6px rgba(60,30,0,.3);
}
.chest-lid::before, .chest-body::before {
    content: ''; position: absolute; top: 0; bottom: 0;
    width: 10px; background: rgba(90,55,20,.35);
}
.chest-lid::before, .chest-body::before { left: 18px; }
.chest-lid::after, .chest-body::after {
    content: ''; position: absolute; top: 0; bottom: 0;
    width: 10px; background: rgba(90,55,20,.35);
}
.chest-lid::after, .chest-body::after { right: 18px; }
.chest-lock {
    position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 26px; z-index: 3;
    background: linear-gradient(180deg, #ffe27a, #e0a92e);
    border-radius: 6px;
    border: 3px solid #a67c1e;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.3);
}
.chest-lock::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 6px; height: 9px; transform: translate(-50%,-40%);
    background: #7a5c10; border-radius: 3px;
}
@keyframes chest-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.chest-sparkle {
    position: absolute; font-size: 20px; pointer-events: none; z-index: 4;
    animation: sparkle 1.8s ease-in-out infinite;
}
.chest-sparkle.s1 { top: -10px; left: 4px; }
.chest-sparkle.s2 { top: 8px; right: -8px; animation-delay: .6s; }
.chest-sparkle.s3 { bottom: 16px; left: -12px; animation-delay: 1.1s; }
@keyframes sparkle { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------- 底部海浪(全宽, 在沙滩条之上) ---------- */
.fx-wave-bottom {
    position: absolute; left: 0; bottom: 0px; width: 100%; height: auto;
    display: block; pointer-events: none; z-index: 41;
    transform-origin: top center;
    animation: waveBandBreathe 6s ease-in-out infinite;
}
@keyframes waveBandBreathe {
    0%, 100% { transform: translateY(0) scaleY(1); }
    /* Extend the opaque lower part past the viewport as the crest rises. */
    50%      { transform: translateY(-4px) scaleY(1.12); }
}

/* ---------- 底部沙滩条(全宽背景, 在海浪下一层) ---------- */
.bottom-beach {
    position: absolute; left: 0; right: 0; bottom: -14px; height: 72px; z-index: 40;
    background: linear-gradient(180deg, rgba(255,238,200,0) 0%, rgba(250,222,160,.82) 26%, rgba(244,206,138,.96) 100%);
    pointer-events: none;
}

/* ---------- 底部导航(独立定位, 可拖拽) ---------- */
.bottom-nav-outer {
    position: absolute; left: 394px; bottom: 33px; z-index: 42; transform: scale(.87); transform-origin: center;
    display: flex; align-items: flex-end;
    padding-bottom: 5px;
    pointer-events: auto;
}
.bottom-nav {
    display: flex; gap: 29px; align-items: flex-end;
    pointer-events: auto;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: relative; z-index: 1;
    transition: transform .15s;
}
.nav-item:active { transform: scale(.88); }
.nav-circle {
    width: 74px; height: 74px; border-radius: 50%;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    box-shadow: none;
    border: 0;
    position: relative;
}
.nav-icon { width: 74px; height: 74px; display: block; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(120,80,20,.18)); }
.nav-label { font-size: 14px; font-weight: 900; color: #6b4f2a; text-shadow: 0 1px 0 rgba(255,255,255,.82), 0 2px 3px rgba(150,100,30,.12); }
.nav-badge {
    position: absolute; top: -2px; right: -4px;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; background: #ff4d4f;
    color: #fff; font-size: 11.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.nav-item.active .nav-circle { background: linear-gradient(180deg, #ffe9b8, #ffd98a); box-shadow: 0 5px 14px rgba(200,140,30,.5); }

/* ---------- 竖屏提示已移除: 改为强制横屏旋转(见 .game-container.force-landscape) ---------- */

/* ============================================================
   通用: 覆盖页面 (活动中心/商城/背包/排行榜/分享)
   ============================================================ */
.overlay-page {
    position: absolute; inset: 0; z-index: 200;
    background: linear-gradient(180deg, rgba(14,60,96,.55), rgba(10,45,75,.72));
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    animation: fade-in .25s;
}
@keyframes fade-in { from { opacity: 0; } }

.panel {
    width: 880px; max-height: 540px;
    background: linear-gradient(180deg, #fffdf6, #fdf3df);
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(0,20,40,.5), inset 0 2px 0 #fff;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: pop-in .32s cubic-bezier(.34,1.56,.64,1);
    position: relative;
}
@keyframes pop-in { from { opacity: 0; transform: scale(.82) translateY(30px); } }

.panel-head {
    padding: 20px 28px 14px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px dashed #ecd9b5;
    flex: none;
}
.panel-title { display: flex; align-items: center; gap: 12px; }
.panel-title .t-icon {
    width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 25px;
    box-shadow: 0 4px 8px rgba(0,0,0,.15), inset 0 1.5px 0 rgba(255,255,255,.5);
}
.panel-title .t-icon.orange { background: linear-gradient(160deg, #ffcf6e, #ff9a2e); }
.panel-title .t-icon.green { background: linear-gradient(160deg, #9be28a, #4cb944); }
.panel-title .t-icon.blue { background: linear-gradient(160deg, #7ec8f5, #2f86c9); }
.panel-title .t-icon.purple { background: linear-gradient(160deg, #c9a7f5, #8b5cf6); }
.panel-title .t-icon.red { background: linear-gradient(160deg, #ffa08a, #ef5350); }
.panel-title h2 { font-size: 23px; font-weight: 900; color: #4a3520; letter-spacing: 2px; }
.panel-title .t-sub { font-size: 12.5px; color: #a08b62; font-weight: 600; }
/* 统一 UI 图标(2.5D 卡通) */
.tab-ico { width: 22px; height: 22px; object-fit: contain; vertical-align: -4px; }
.mini-ico { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); padding: 2px; vertical-align: -7px; }
.dt-ico { width: 24px; height: 24px; object-fit: contain; vertical-align: -5px; margin-right: 3px; }
.t-ico { width: 30px; height: 30px; object-fit: contain; }
.ach-head { display: flex; align-items: center; gap: 6px; }
.ach-ico { width: 22px; height: 22px; object-fit: contain; }

.panel-close {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(180deg, #ff8a7a, #ef5350);
    color: #fff; font-size: 19px; font-weight: 900;
    box-shadow: 0 4px 0 #c62828, 0 6px 12px rgba(200,40,40,.35), inset 0 1.5px 0 rgba(255,255,255,.4);
    transition: transform .12s;
    flex: none;
}
.panel-close:active { transform: translateY(3px); box-shadow: 0 1px 0 #c62828; }

.panel-body { flex: 1; overflow-y: auto; padding: 20px 28px 26px; }
.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb { background: #e0c58f; border-radius: 4px; }

/* 顶部货币条(面板内) */
.wallet-bar {
    display: flex; gap: 12px; margin-bottom: 16px;
}
.wallet-chip {
    flex: 1; display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 16px; padding: 10px 16px;
    box-shadow: 0 3px 10px rgba(160,110,40,.15), inset 0 -2px 0 rgba(200,150,60,.1);
}
.wallet-chip .wc-icon { font-size: 28px; }
.wallet-chip .wc-name { font-size: 12px; color: #a08b62; font-weight: 700; }
.wallet-chip .wc-num { font-size: 21px; font-weight: 900; color: #4a3520; font-variant-numeric: tabular-nums; }

/* ---------- 签到面板 ---------- */
.signin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.signin-cell {
    background: #fff; border-radius: 18px; padding: 14px 8px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    box-shadow: 0 4px 12px rgba(160,110,40,.14), inset 0 -2px 0 rgba(200,150,60,.1);
    border: 2px solid transparent;
    position: relative;
}
.signin-cell .day { font-size: 13px; font-weight: 800; color: #a08b62; }
.signin-cell .reward-icon { font-size: 34px; }
.signin-cell .reward-num { font-size: 13.5px; font-weight: 900; color: #e8850c; }
.signin-cell.signed { background: linear-gradient(180deg, #f0fae8, #e2f5d2); border-color: #9fd98a; }
.signin-cell.signed::after {
    content: '✓'; position: absolute; top: 6px; right: 8px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #4cb944; color: #fff; font-size: 12px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.signin-cell.today { border-color: #ffb03a; box-shadow: 0 0 0 3px rgba(255,176,58,.3), 0 6px 16px rgba(255,150,40,.3); animation: today-glow 1.6s infinite; }
@keyframes today-glow { 0%,100% { box-shadow: 0 0 0 3px rgba(255,176,58,.3), 0 6px 16px rgba(255,150,40,.3); } 50% { box-shadow: 0 0 0 6px rgba(255,176,58,.45), 0 6px 20px rgba(255,150,40,.5); } }
.signin-cell.day7 {
    grid-column: span 1;
    background: linear-gradient(160deg, #fff3d6, #ffe3a8);
    border-color: #f0c060;
}
.signin-big-btn {
    width: 100%; height: 54px; margin-top: 16px; border-radius: 27px;
    background: linear-gradient(180deg, #ffcf5e, #ff9a2e);
    color: #fff; font-size: 19px; font-weight: 900; letter-spacing: 3px;
    box-shadow: 0 5px 0 #d97a12, 0 8px 18px rgba(220,130,20,.4), inset 0 2px 0 rgba(255,255,255,.5);
    text-shadow: 0 2px 2px rgba(180,80,0,.35);
    transition: transform .12s, box-shadow .12s;
}
.signin-big-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #d97a12; }
.signin-big-btn:disabled { background: linear-gradient(180deg, #cfc8bb, #b0a892); box-shadow: 0 4px 0 #948b7c; text-shadow: none; }

/* ---------- 任务列表 ---------- */
.task-list { display: flex; flex-direction: column; gap: 12px; }
.task-item {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border-radius: 18px; padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(160,110,40,.13), inset 0 -2px 0 rgba(200,150,60,.08);
}
.task-icon {
    width: 52px; height: 52px; border-radius: 15px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 27px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 6px rgba(0,0,0,.12);
}
.task-info { flex: 1; min-width: 0; }
.task-name { font-size: 16px; font-weight: 900; color: #4a3520; }
.task-desc { font-size: 12px; color: #a08b62; font-weight: 600; margin: 1px 0 6px; }
.task-progress { display: flex; align-items: center; gap: 8px; }
.task-track { flex: 1; max-width: 240px; height: 10px; border-radius: 6px; background: #f0e6cf; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); }
.task-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ffd23e, #ff9d2e); transition: width .4s; }
.task-frac { font-size: 12px; font-weight: 800; color: #b09468; font-variant-numeric: tabular-nums; }
.task-reward { text-align: center; flex: none; margin-right: 4px; }
.task-reward .tr-icon { font-size: 22px; }
.task-reward .tr-num { font-size: 12.5px; font-weight: 900; color: #e8850c; }
.task-btn {
    min-width: 92px; height: 40px; border-radius: 20px; flex: none;
    font-size: 14.5px; font-weight: 900; letter-spacing: 1px; color: #fff;
    transition: transform .12s, box-shadow .12s;
}
.task-btn.go { background: linear-gradient(180deg, #7ec8f5, #3a92d8); box-shadow: 0 4px 0 #2471ad, 0 6px 12px rgba(50,130,200,.35); text-shadow: 0 1px 2px rgba(20,80,130,.4); }
.task-btn.claim { background: linear-gradient(180deg, #ffcf5e, #ff9a2e); box-shadow: 0 4px 0 #d97a12, 0 6px 12px rgba(220,130,20,.4); text-shadow: 0 1px 2px rgba(180,80,0,.35); animation: claim-pulse 1.4s infinite; }
.task-btn.done { background: linear-gradient(180deg, #cfc8bb, #b5ad9e); box-shadow: 0 3px 0 #948b7c; }
.task-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
@keyframes claim-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------- 商城 ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.shop-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 6px 16px rgba(160,110,40,.16), inset 0 -2px 0 rgba(200,150,60,.1);
    display: flex; flex-direction: column;
    transition: transform .18s;
}
.shop-card:active { transform: scale(.96); }
.shop-thumb {
    height: 108px; display: flex; align-items: center; justify-content: center;
    font-size: 52px; position: relative; overflow: hidden;
}
.shop-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.shop-emoji { position: relative; z-index: 1; line-height: 1; }
.shop-tag {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    font-size: 10.5px; font-weight: 900; color: #fff;
    padding: 3px 9px; border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.shop-tag.hot { background: linear-gradient(90deg, #ff7b54, #ff4d4f); }
.shop-tag.new { background: linear-gradient(90deg, #4cc9f0, #4361ee); }
.shop-tag.limit { background: linear-gradient(90deg, #b5179e, #7209b7); }
.shop-info { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.shop-name { font-size: 15px; font-weight: 900; color: #4a3520; line-height: 1.35; min-height: 40px; }
.shop-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.shop-price { display: flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 900; color: #e8850c; }
.shop-price .old { font-size: 11.5px; color: #c3b394; text-decoration: line-through; font-weight: 600; }
.shop-buy {
    height: 36px; padding: 0 16px; border-radius: 18px;
    background: linear-gradient(180deg, #9be28a, #4cb944);
    color: #fff; font-size: 13.5px; font-weight: 900;
    box-shadow: 0 3px 0 #379336, 0 5px 10px rgba(70,170,60,.4), inset 0 1px 0 rgba(255,255,255,.5);
    text-shadow: 0 1px 2px rgba(30,110,30,.4);
    transition: transform .12s, box-shadow .12s;
}
.shop-buy:active { transform: translateY(3px); box-shadow: 0 1px 0 #379336; }
.shop-buy.poor { background: linear-gradient(180deg, #cfc8bb, #b5ad9e); box-shadow: 0 3px 0 #948b7c; text-shadow: none; }

/* ---------- 优惠券卡(背包) ---------- */
.coupon-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.coupon-card {
    background: linear-gradient(160deg, #fffdf4, #fdf2dc);
    border: 2px dashed #d9b878;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 14px rgba(160,110,40,.16);
}
.coupon-ribbon {
    position: absolute; top: 10px; left: -24px; z-index: 2;
    background: linear-gradient(90deg, #ff7b54, #ff4d4f);
    color: #fff; font-size: 10px; font-weight: 900; letter-spacing: 1px;
    padding: 3px 26px; transform: rotate(-38deg);
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
}
.coupon-img {
    height: 86px; display: flex; align-items: center; justify-content: center;
    font-size: 44px;
}
.coupon-body { padding: 10px 14px 12px; border-top: 1.5px dashed #e0c58f; }
.coupon-name { font-size: 14.5px; font-weight: 900; color: #4a3520; line-height: 1.4; }
.coupon-discount { font-size: 30px; font-weight: 900; color: #ef5330; line-height: 1.1; }
.coupon-discount small { font-size: 15px; }
.coupon-code { font-size: 11px; color: #a08b62; font-weight: 700; margin-top: 4px; }
.coupon-code b { color: #7a5f35; background: #f5ead0; padding: 1px 6px; border-radius: 4px; letter-spacing: 1px; }
.coupon-use {
    margin-top: 8px; width: 100%; height: 34px; border-radius: 17px;
    background: linear-gradient(180deg, #7ec8f5, #3a92d8);
    color: #fff; font-size: 13px; font-weight: 900; letter-spacing: 1px;
    box-shadow: 0 3px 0 #2471ad;
}
.coupon-use:active { transform: translateY(2px); box-shadow: 0 1px 0 #2471ad; }

/* ---------- 我的兑换卡(背包·商城好礼) ---------- */
.bag-goods { display: flex; flex-direction: column; gap: 12px; }
.bag-good {
    display: flex; gap: 14px; align-items: center;
    background: linear-gradient(160deg, #fffdf4, #fdf2dc);
    border: 2px dashed #d9b878; border-radius: 16px; padding: 12px 14px;
    box-shadow: 0 5px 14px rgba(160,110,40,.16);
}
.bg-icon {
    width: 58px; height: 58px; flex: none; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 32px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}
.bg-body { flex: 1; min-width: 0; }
.bg-name { font-size: 14.5px; font-weight: 900; color: #4a3520; line-height: 1.4; }
.bg-code { font-size: 11.5px; color: #a08b62; font-weight: 700; margin-top: 4px; }
.bg-code b { color: #7a5f35; background: #f5ead0; padding: 1px 6px; border-radius: 4px; letter-spacing: 1px; }
.bg-use {
    margin-top: 8px; height: 32px; padding: 0 16px; border-radius: 16px;
    background: linear-gradient(180deg, #ffcf5e, #ff9a2e); color: #fff;
    font-size: 12.5px; font-weight: 900; letter-spacing: 1px; box-shadow: 0 3px 0 #d97a12;
}
.bg-use:active { transform: translateY(2px); box-shadow: 0 1px 0 #d97a12; }

/* ---------- 徽章墙 ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
.badge-cell {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: #fff; border-radius: 18px; padding: 16px 8px 14px;
    box-shadow: 0 4px 12px rgba(160,110,40,.13);
}
.badge-shield {
    width: 74px; height: 82px; position: relative;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    background: linear-gradient(160deg, #ffe9a8, #ffc44d);
    clip-path: polygon(50% 0%, 100% 12%, 100% 62%, 50% 100%, 0% 62%, 0% 12%);
    filter: drop-shadow(0 4px 6px rgba(180,120,20,.4));
}
.badge-cell.locked .badge-shield { background: linear-gradient(160deg, #d8d2c4, #b3ab99); filter: grayscale(.7) drop-shadow(0 3px 5px rgba(0,0,0,.15)); }
.badge-cell.locked .badge-shield span { opacity: .35; }
.badge-name { font-size: 12.5px; font-weight: 900; color: #4a3520; text-align: center; }
.badge-cond { font-size: 10.5px; color: #a08b62; font-weight: 600; text-align: center; line-height: 1.4; }
.badge-cell.unlocked .badge-name { color: #b8720a; }

/* ---------- 排行榜 ---------- */
.rank-tabs { display: flex; gap: 10px; margin-bottom: 14px; }
.rank-tab {
    padding: 8px 22px; border-radius: 18px;
    background: #fff; color: #a08b62; font-size: 14px; font-weight: 800;
    box-shadow: 0 3px 8px rgba(160,110,40,.13);
}
.rank-tab.active {
    background: linear-gradient(180deg, #ffcf5e, #ff9a2e); color: #fff;
    box-shadow: 0 3px 0 #d97a12;
    text-shadow: 0 1px 2px rgba(180,80,0,.35);
}
.rank-list { display: flex; flex-direction: column; gap: 9px; }
.rank-row {
    display: flex; align-items: center; gap: 13px;
    background: #fff; border-radius: 16px; padding: 9px 16px 9px 10px;
    box-shadow: 0 3px 9px rgba(160,110,40,.12);
}
.rank-row.top1 { background: linear-gradient(90deg, #fff6d8, #ffedb8); border: 1.5px solid #f0cd70; }
.rank-row.top2 { background: linear-gradient(90deg, #f4f8fb, #e8f0f6); border: 1.5px solid #c3d5e3; }
.rank-row.top3 { background: linear-gradient(90deg, #fdf0e0, #f9e2c6); border: 1.5px solid #ecc493; }
.rank-medal { width: 42px; text-align: center; font-size: 25px; font-weight: 900; color: #b3a586; flex: none; font-style: normal; }
.rank-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.rank-name { flex: 1; font-size: 15.5px; font-weight: 800; color: #4a3520; }
.rank-name .rn-sub { display: block; font-size: 11px; color: #a08b62; font-weight: 600; }
.rank-score { font-size: 17px; font-weight: 900; color: #e8850c; font-variant-numeric: tabular-nums; }
.rank-row.me { background: linear-gradient(90deg, #e4f4ff, #d2e9fb); border: 1.5px solid #8ec8f0; }
.rank-row.me .rank-name { color: #1e6ba8; }
.rank-week-note {
    text-align: center; font-size: 11.5px; font-weight: 700; color: #a08b62;
    background: #fff7e8; border: 1px dashed #e4c98f; border-radius: 12px;
    padding: 7px 10px; margin-bottom: 12px;
}

/* ---------- 分享页 ---------- */
.share-hero {
    text-align: center; padding: 10px 0 18px;
}
.share-hero .sh-icon { font-size: 72px; display: block; animation: chest-float 3s ease-in-out infinite; }
.share-hero h3 { font-size: 21px; font-weight: 900; color: #4a3520; margin-top: 8px; }
.share-hero p { font-size: 13px; color: #a08b62; font-weight: 600; margin-top: 4px; }
.share-rewards { display: flex; gap: 14px; margin: 6px 0 18px; }
.share-reward-card {
    flex: 1; background: #fff; border-radius: 18px; padding: 16px 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(160,110,40,.14);
}
.share-reward-card .sr-icon { font-size: 36px; }
.share-reward-card .sr-title { font-size: 14px; font-weight: 900; color: #4a3520; margin-top: 6px; }
.share-reward-card .sr-desc { font-size: 11.5px; color: #a08b62; font-weight: 600; margin-top: 3px; line-height: 1.5; }
.share-btn {
    width: 100%; height: 54px; border-radius: 27px;
    background: linear-gradient(180deg, #9be28a, #4cb944);
    color: #fff; font-size: 18px; font-weight: 900; letter-spacing: 2px;
    box-shadow: 0 5px 0 #379336, 0 8px 18px rgba(70,170,60,.4), inset 0 2px 0 rgba(255,255,255,.5);
    text-shadow: 0 2px 2px rgba(30,110,30,.35);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: transform .12s, box-shadow .12s;
}
.share-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #379336; }
.invite-tip {
    margin-top: 14px; text-align: center; font-size: 12px; font-weight: 700;
    color: #1e6ba8; background: #e8f4ff; border: 1px dashed #8ec8f0;
    border-radius: 12px; padding: 9px 12px; line-height: 1.5;
}

/* ---------- 四色渐变胶囊按钮(美术包第5组) ---------- */
.btn-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 50px; padding: 0 28px; border-radius: 25px;
    color: #fff; font-size: 16.5px; font-weight: 900; letter-spacing: 1.5px;
    text-shadow: 0 2px 2px rgba(0,0,0,.22);
    transition: transform .12s, box-shadow .12s;
    position: relative;
}
.btn-pill .bp-icon {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.28);
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.btn-pill.orange { background: linear-gradient(180deg, #ffcf5e, #ff8f2b); box-shadow: 0 5px 0 #d97a12, 0 8px 16px rgba(220,130,20,.4), inset 0 2px 0 rgba(255,255,255,.5); }
.btn-pill.green  { background: linear-gradient(180deg, #9be28a, #4cb944); box-shadow: 0 5px 0 #379336, 0 8px 16px rgba(70,170,60,.4), inset 0 2px 0 rgba(255,255,255,.5); }
.btn-pill.blue   { background: linear-gradient(180deg, #7ec8f5, #3a92d8); box-shadow: 0 5px 0 #2471ad, 0 8px 16px rgba(50,130,200,.4), inset 0 2px 0 rgba(255,255,255,.5); }
.btn-pill.purple { background: linear-gradient(180deg, #c9a7f5, #8b5cf6); box-shadow: 0 5px 0 #6d3fd4, 0 8px 16px rgba(130,80,230,.4), inset 0 2px 0 rgba(255,255,255,.5); }
.btn-pill:active { transform: translateY(4px); }
.btn-pill.orange:active { box-shadow: 0 1px 0 #d97a12; }
.btn-pill.green:active { box-shadow: 0 1px 0 #379336; }
.btn-pill.blue:active { box-shadow: 0 1px 0 #2471ad; }
.btn-pill.purple:active { box-shadow: 0 1px 0 #6d3fd4; }

/* ---------- 地点详情弹窗 ---------- */
.modal-mask {
    position: absolute; inset: 0; z-index: 300;
    background: rgba(10,40,70,.55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    overflow: auto; padding: 16px;
    animation: fade-in .22s;
}
.spot-modal {
    width: 660px; border-radius: 24px; overflow: hidden;
    background: linear-gradient(180deg, #fffdf6, #fdf3df);
    box-shadow: 0 24px 70px rgba(0,20,40,.55);
    animation: pop-in .3s cubic-bezier(.34,1.56,.64,1);
    position: relative;
}
.spot-illu {
    height: 220px; position: relative;
    display: flex; align-items: center; justify-content: center;
    font-size: 96px;
}
.spot-illu .si-deco { position: absolute; width: 34px; opacity: .9; display: block; }
.spot-close {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: #8a7a5e;
    font-size: 17px; font-weight: 900;
    box-shadow: 0 3px 8px rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
}
.spot-close:active { transform: scale(.9); }
.spot-body { padding: 18px 30px 26px; }
.spot-name-row { display: flex; align-items: center; gap: 10px; }
.spot-name { font-size: 25px; font-weight: 900; color: #4a3520; letter-spacing: 1px; }
.spot-slogan { font-size: 13px; color: #c98a2e; font-weight: 800; margin-top: 2px; letter-spacing: 1px; }
.spot-desc { font-size: 13.5px; color: #7a6748; line-height: 1.75; margin: 10px 0 14px; font-weight: 500; }
.spot-tags { display: flex; gap: 9px; margin-bottom: 18px; flex-wrap: wrap; }
.spot-tag {
    font-size: 12px; font-weight: 800; color: #b8720a;
    background: linear-gradient(180deg, #fff3d9, #ffe7ba);
    padding: 5px 13px; border-radius: 12px;
    border: 1.5px solid #f0d09a;
}
.spot-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.spot-reward-hint { flex: 1; font-size: 12.5px; color: #a08b62; font-weight: 700; line-height: 1.5; }
.spot-reward-hint b { color: #e8850c; }
.spot-games { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.spot-games .btn-pill { width: 100%; justify-content: center; font-size: 15px; padding: 12px 18px; }
.spot-games .btn-pill .bp-icon { background: rgba(255,255,255,.32); }

/* ---------- 小游戏弹窗 ---------- */
.mini-modal {
    width: min(760px, 94%); max-height: 94%;
    border-radius: 24px; overflow: hidden;
    background: linear-gradient(180deg, #fffdf6, #fdf3df);
    box-shadow: 0 24px 70px rgba(0,20,40,.55);
    animation: pop-in .3s cubic-bezier(.34,1.56,.64,1);
    display: flex; flex-direction: column;
}
.mini-head {
    padding: 16px 24px 12px; flex: none;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px dashed #ecd9b5;
}
.mini-title { font-size: 19px; font-weight: 900; color: #4a3520; display: flex; align-items: center; gap: 10px; }
.mini-hud { display: flex; gap: 10px; align-items: center; }
.hud-chip {
    background: #fff; border-radius: 14px; padding: 5px 13px;
    font-size: 13.5px; font-weight: 900; color: #4a3520;
    box-shadow: 0 2px 6px rgba(160,110,40,.15);
    font-variant-numeric: tabular-nums;
}
.hud-chip.timer.warn { color: #ef4444; animation: claim-pulse 1s infinite; }
/* 计时 / 最佳纪录(小游戏头部) */
.hud-chip.timer-chip, .hud-chip.best-chip { font-size: 12.5px; padding: 5px 10px; }
.hud-chip.timer-chip { color: #2f7fa8; background: linear-gradient(180deg,#fff,#eaf6fd); }
.hud-chip.best-chip  { color: #b8720a; background: linear-gradient(180deg,#fff,#fdf1dc); }
.panel-close.restart {
    width: 36px; height: 36px; font-size: 15px;
    background: linear-gradient(180deg, #7ec8f5, #3a92d8);
    box-shadow: 0 3px 0 #2471ad, 0 5px 10px rgba(50,130,200,.35), inset 0 1.5px 0 rgba(255,255,255,.4);
}
.panel-close.restart:active { transform: translateY(3px); box-shadow: 0 1px 0 #2471ad; }
.mini-head { flex-wrap: wrap; gap: 10px; }
.mini-title { flex: 1 1 auto; min-width: 0; }
.mini-hud { flex: none; }
.mini-body { flex: 1; overflow-y: auto; padding: 20px 24px 24px; display: flex; flex-direction: column; align-items: center; }
.mini-tip { font-size: 13px; color: #a08b62; font-weight: 700; margin-bottom: 14px; text-align: center; line-height: 1.6; }

/* 配对游戏 */
.match-grid { display: grid; grid-template-columns: repeat(4, 92px); gap: 10px; justify-content: center; }
.match-card {
    width: 92px; height: 92px; border-radius: 18px;
    background: linear-gradient(160deg, #58b7e8, #2f86c9);
    cursor: pointer;
    box-shadow: 0 4px 0 #1e6396, 0 6px 12px rgba(30,100,160,.35), inset 0 2px 0 rgba(255,255,255,.35);
    transition: transform .25s, background .25s, box-shadow .25s;
    position: relative;
}
.match-card .card-back, .match-card .card-face {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.match-card .card-back { opacity: .95; }
.match-card .card-back img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,60,110,.4)); }
.match-card .card-face { font-size: 42px; opacity: 0; transition: opacity .2s; }
.match-card.flipped { background: linear-gradient(160deg, #fff, #fdf3df); transform: rotateY(180deg); box-shadow: 0 4px 0 #d9c295, 0 6px 12px rgba(160,110,40,.25); }
.match-card.flipped .card-back { opacity: 0; }
.match-card.flipped .card-face { opacity: 1; transform: rotateY(180deg); }
.match-card.matched { background: linear-gradient(160deg, #e8f8dc, #d2f0bc); box-shadow: 0 4px 0 #9fd080; animation: matched-pop .4s; }
.match-card.matched .card-back { opacity: 0; }
.match-card.matched .card-face { opacity: 1; transform: none; }
@keyframes matched-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* 深呼吸·盐雾清肺 */
.breath-stage { position: relative; width: 100%; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 4px 0 16px; overflow: hidden; }
.breath-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.breath-particle {
    position: absolute; left: calc(8% + var(--i) * 7%); bottom: -20px;
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(180,230,255,.55);
    box-shadow: 0 0 6px rgba(180,230,255,.6);
    animation: mist-rise var(--d, 5s) linear infinite;
    animation-delay: calc(var(--i) * -0.6s);
    opacity: .7;
}
.breath-particle:nth-child(3n) { width: 8px; height: 8px; border-radius: 0; transform: rotate(45deg); background: rgba(200,240,255,.65); }
@keyframes mist-rise {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    12% { opacity: .8; }
    88% { opacity: .8; }
    100% { transform: translateY(-340px) translateX(var(--x, 0)); opacity: 0; }
}
.breath-ring { position: relative; z-index: 1; width: 240px; height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.breath-orb {
    width: 200px; height: 200px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 36%, #f4fbff, #dff4fc 55%, #c6ecf7);
    box-shadow: 0 0 0 10px rgba(255,255,255,.5), 0 12px 30px rgba(60,150,200,.28), inset 0 -8px 20px rgba(40,120,170,.18);
    will-change: transform;
}
.breath-ring.inhale .breath-orb { box-shadow: 0 0 0 14px rgba(180,230,255,.55), 0 18px 44px rgba(60,170,230,.5), inset 0 -10px 24px rgba(40,120,170,.22); }
.breath-ring.exhale .breath-orb { background: radial-gradient(circle at 50% 36%, #f6fcff, #e4f6f9 55%, #ccebf2); }
.breath-ring.holding .breath-orb { box-shadow: 0 0 0 18px rgba(120,210,255,.6), 0 20px 50px rgba(40,160,230,.55), inset 0 -10px 24px rgba(40,120,170,.22); }
.breath-labels { position: relative; z-index: 1; text-align: center; margin-top: 8px; }
.breath-phase { font-size: 28px; font-weight: 900; color: #1f6f9c; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(255,255,255,.9); }
.breath-sub { font-size: 13px; font-weight: 800; color: #3f8fb8; margin-top: 4px; }
.breath-hold {
    position: relative; z-index: 1; overflow: hidden;
    font-size: 13px; font-weight: 800; color: #3f8fb8; white-space: nowrap;
    background: rgba(255,255,255,.72); border-radius: 12px; padding: 6px 14px;
    box-shadow: 0 2px 6px rgba(120,170,200,.25); margin-top: 8px;
}
.breath-hold-fill {
    position: absolute; left: 0; top: 0; height: 100%; width: 0%;
    background: linear-gradient(90deg, rgba(126,200,245,.55), rgba(58,146,216,.8));
    border-radius: 12px; transition: width 50ms linear;
}
.breath-hold-text { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(255,255,255,.9); }
.breath-cheer { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.breath-confetti {
    position: absolute; left: 50%; top: 55%;
    font-size: 22px; opacity: 0;
    animation: confetti-pop 1.7s ease-out forwards;
}
@keyframes confetti-pop {
    0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 1; }
    20% { transform: translate(calc(-50% + var(--dx) * 0.15), calc(-50% + var(--dy) * 0.15)) scale(1.1) rotate(var(--a)); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.55) rotate(calc(var(--a) * 1.6)); opacity: 0; }
}
.breath-pips { display: flex; gap: 10px; margin-bottom: 14px; }
.breath-pip { width: 14px; height: 14px; border-radius: 50%; background: #e3dccb; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); transition: all .3s ease; }
.breath-pip.on { background: linear-gradient(180deg, #7ec8f5, #3a92d8); box-shadow: 0 2px 6px rgba(50,130,200,.4); }

/* 寻宝点击 */
/* 皮划艇竞速·内湖穿梭 */
.kayak-arena {
    width: 100%; height: 340px; border-radius: 20px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #bfeaff 0%, #8fd2f5 36%, #5fb4e8 66%, #3f93d4 100%);
    box-shadow: inset 0 4px 14px rgba(255,255,255,.5), inset 0 -30px 40px rgba(20,80,130,.25);
    cursor: ew-resize; touch-action: none; user-select: none;
}
.kayak-waves {
    position: absolute; left: -10px; right: -10px; top: 0; height: 48px; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.4) 16px, rgba(255,255,255,0) 32px);
    opacity: .5; animation: kayak-wave 2.2s linear infinite;
}
@keyframes kayak-wave { from { background-position: 0 0; } to { background-position: 64px 0; } }
.kayak-item { position: absolute; font-size: 38px; line-height: 1; will-change: transform; filter: drop-shadow(0 3px 5px rgba(10,60,110,.4)); }
.kayak-item.got { animation: kayak-got .24s forwards; }
@keyframes kayak-got { to { transform: scale(.3) translateY(-18px); opacity: 0; } }
.kayak-boat {
    position: absolute; bottom: 10px; font-size: 60px; line-height: 1; pointer-events: none;
    will-change: transform; filter: drop-shadow(0 8px 12px rgba(10,60,110,.45)); transition: transform .06s;
}
.kayak-boat.hurt { animation: kayak-hurt .32s; }
@keyframes kayak-hurt { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-10px) rotate(-8deg); } 75% { transform: translateX(10px) rotate(8deg); } }
.kayak-combo {
    position: absolute; top: 12px; right: 14px; font-size: 20px; font-weight: 900; color: #0d5e92;
    text-shadow: 0 2px 6px rgba(255,255,255,.7); pointer-events: none; opacity: 0; transition: opacity .2s;
}
.kayak-combo.on { opacity: 1; animation: kayak-combo-pop .4s; }
@keyframes kayak-combo-pop { from { transform: scale(1.6); } }

/* 找不同 / 找物品(广悦华酒店"谁闯进了房间") */
.find-arena {
    width: 100%; height: 380px; border-radius: 20px; position: relative; overflow: hidden;
    box-shadow: inset 0 4px 14px rgba(0,40,80,.18);
}
.find-item {
    position: absolute; font-size: 55px; line-height: 1; cursor: pointer; user-select: none;
    transform: translate(-50%, -50%); padding: 13px; transition: transform .12s;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.22)); text-align: center;
}
.find-item:active { transform: translate(-50%, -50%) scale(.88); }
.find-item.found { animation: found-pop .45s forwards; }
@keyframes found-pop { 40% { transform: translate(-50%, -50%) scale(1.45) rotate(10deg); } 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; } }

/* 观海定格·落日抓拍 —— 精致海景取景 */
.snap-arena { position: relative; width: 100%; height: 372px; border-radius: 20px; overflow: hidden;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), inset 0 10px 30px rgba(0,30,60,.30), 0 14px 34px rgba(20,40,70,.32);
    isolation: isolate; }
.snap-arena::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:9;
    background: radial-gradient(125% 95% at 50% 38%, transparent 52%, rgba(8,20,40,.34) 100%); }

/* 天空主题 */
.snap-dawn  { background: linear-gradient(180deg,#ffe2c8 0%,#ffc59e 34%,#8fc0e6 68%,#4f86b8 100%); }
.snap-noon  { background: linear-gradient(180deg,#d4f1ff 0%,#9bd8f7 42%,#5aa9e0 74%,#2f7fc0 100%); }
.snap-dusk  { background: linear-gradient(180deg,#ffc18a 0%,#ff8a63 40%,#9a5fa8 74%,#4b3b7a 100%); }
.snap-night { background: linear-gradient(180deg,#1a2c4d 0%,#22385f 40%,#2c4878 72%,#152238 100%); }

.snap-stars { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; z-index: 1; background-image:
    radial-gradient(2px 2px at 18% 24%, #fff, transparent),
    radial-gradient(2px 2px at 64% 16%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 40% 10%, #fff, transparent),
    radial-gradient(2px 2px at 82% 34%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 30% 30%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 52% 26%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 72% 12%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 12% 40%, #fff, transparent);
    animation: starTwinkle 2.6s ease-in-out infinite; }
@keyframes starTwinkle { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* 日 / 月 */
.snap-sun { position: absolute; left: 50%; top: 52%; width: 128px; height: 128px; transform: translate(-50%,-50%);
    border-radius: 50%; z-index: 2; filter: blur(.4px);
    background: radial-gradient(circle at 50% 50%, #fff 0%, var(--sun,#fff3c4) 42%, transparent 72%);
    box-shadow: 0 0 70px 26px var(--sun-glow, rgba(255,225,160,.55)); opacity: .92; }
.snap-arena.snap-night .snap-sun { --sun: #eaf2ff; --sun-glow: rgba(200,220,255,.5); }

/* 云 */
.snap-cloud { position: absolute; z-index: 3; height: 26px; border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.35));
    filter: blur(2px); opacity: .82; animation: cloudDrift linear infinite; }
.snap-cloud.c1 { top: 13%; width: 150px; --dur: 27s; }
.snap-cloud.c2 { top: 25%; width: 96px; opacity: .6; --dur: 36s; animation-delay: -13s; }
@keyframes cloudDrift { from { transform: translateX(-190px); } to { transform: translateX(690px); } }

/* 海面 */
.snap-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: 4;
    background: linear-gradient(180deg, var(--sea-top, rgba(120,180,220,.55)), var(--sea-bot, rgba(20,60,100,.85)));
    box-shadow: inset 0 10px 26px rgba(255,255,255,.16); }
.snap-sea::before { content:''; position:absolute; left:0; right:0; top:0; height:42%;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 2px, transparent 2px 11px);
    opacity: .5; animation: seaShimmer 3.2s ease-in-out infinite; }
@keyframes seaShimmer { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(3px); opacity: .72; } }
.snap-sea::after { content:''; position:absolute; left:0; right:0; top:-2px; height:3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); filter: blur(1px); }

/* 取景目标光球 */
.snap-orb { position: absolute; width: 54px; height: 54px; border-radius: 50%; z-index: 5;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.28)); }
.snap-orb::before { content:''; position:absolute; inset:14px; border-radius:50%;
    background: radial-gradient(circle at 38% 36%, #ffffff, rgba(255,255,255,.2) 60%, transparent 70%); }
.snap-orb::after { content:''; position:absolute; inset:-8px; border-radius:50%;
    border:1px solid rgba(255,255,255,.5); opacity:.55; animation: orbPulse 1.8s ease-in-out infinite; }
@keyframes orbPulse { 0%,100% { transform: scale(.92); opacity: .35; } 50% { transform: scale(1.08); opacity: .7; } }

/* 取景框(相机感) */
.snap-frame { position: absolute; left: 50%; top: 0; width: 0; height: 100%; transform: translateX(-50%); z-index: 6;
    border-left: 2px dashed rgba(255,255,255,.30); }
.snap-frame-ring { position: absolute; left: 50%; top: 46%; width: 96px; height: 96px; transform: translate(-50%,-50%);
    border: 3px solid rgba(255,255,255,.85); border-radius: 18px; z-index: 7;
    box-shadow: 0 0 16px rgba(255,255,255,.4), inset 0 0 12px rgba(255,255,255,.25);
    transition: border-color .15s, box-shadow .15s; }
.snap-arena.aligned .snap-frame-ring { border-color: #8effc0;
    box-shadow: 0 0 28px rgba(120,255,180,.85), inset 0 0 16px rgba(120,255,180,.45); }
.snap-arena.aligned .snap-frame { border-left-color: rgba(140,255,190,.55); }

/* 四角对焦括号 + 十字 */
.snap-vf { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.vf-c { position: absolute; width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.82); border-radius: 4px; }
.vf-c.tl { left: 16px; top: 16px; border-right: 0; border-bottom: 0; }
.vf-c.tr { right: 16px; top: 16px; border-left: 0; border-bottom: 0; }
.vf-c.bl { left: 16px; bottom: 16px; border-right: 0; border-top: 0; }
.vf-c.br { right: 16px; bottom: 16px; border-left: 0; border-top: 0; }
.vf-cross { position: absolute; left: 50%; top: 46%; width: 14px; height: 14px; transform: translate(-50%,-50%); opacity: .5; }
.vf-cross::before, .vf-cross::after { content:''; position: absolute; background: rgba(255,255,255,.7); }
.vf-cross::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.vf-cross::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }

/* 前景甲板 / 栏杆 */
.snap-deck { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; z-index: 8;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(14,18,30,.72));
    border-top: 3px solid rgba(255,255,255,.32); box-shadow: 0 -6px 18px rgba(0,0,0,.25); }
.snap-deck::after { content:''; position:absolute; left:0; right:0; top:8px; height:2px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 14px, transparent 14px 40px); }

/* 快门闪光 */
.snap-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 10; pointer-events: none; }
.snap-flash.on { animation: snapFlash .42s ease-out; }
@keyframes snapFlash { 0% { opacity: 0; } 14% { opacity: .82; } 100% { opacity: 0; } }

/* 评级弹字 */
.snap-pop { position: absolute; left: 50%; top: 30%; transform: translate(-50%,-50%) scale(.6); font-size: 26px;
    font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); opacity: 0; z-index: 12; pointer-events: none; white-space: nowrap; }
.snap-pop.on { animation: snapPop .72s cubic-bezier(.2,.8,.3,1.2); }
@keyframes snapPop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 25% { opacity: 1; transform: translate(-50%,-62%) scale(1.12); } 100% { opacity: 0; transform: translate(-50%,-92%) scale(1); } }

/* 定格印章 */
.snap-stamp { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%) rotate(-12deg) scale(.4);
    font-size: 22px; font-weight: 900; letter-spacing: 2px; color: #fff; z-index: 12; pointer-events: none;
    padding: 6px 14px; border: 3px solid #fff; border-radius: 10px; opacity: 0;
    text-shadow: 0 2px 6px rgba(0,0,0,.4); box-shadow: 0 0 16px rgba(255,255,255,.5); }
.snap-stamp.on { animation: snapStamp .6s cubic-bezier(.2,.8,.3,1.4); }
@keyframes snapStamp { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-12deg) scale(.4); } 40% { opacity: 1; transform: translate(-50%,-50%) rotate(-12deg) scale(1.05); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-12deg) scale(1.12); } }

/* 问答 */
.quiz-q { font-size: 18.5px; font-weight: 900; color: #4a3520; text-align: center; line-height: 1.6; margin-bottom: 20px; padding: 0 10px; }
.quiz-opts { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 480px; }
.quiz-opt {
    width: 100%; padding: 14px 20px; border-radius: 16px;
    background: #fff; text-align: left;
    font-size: 15px; font-weight: 800; color: #5a4632;
    box-shadow: 0 3px 0 #e3d3ae, 0 5px 10px rgba(160,110,40,.15);
    display: flex; align-items: center; gap: 12px;
    transition: transform .12s;
}
.quiz-opt:active { transform: scale(.97); }
.quiz-opt .qo-letter {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: linear-gradient(180deg, #7ec8f5, #3a92d8); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900;
}
.quiz-opt.right { background: linear-gradient(160deg, #e8f8dc, #cdf0b4); box-shadow: 0 3px 0 #8ecb6a; }
.quiz-opt.right .qo-letter { background: linear-gradient(180deg, #9be28a, #4cb944); }
.quiz-opt.wrong { background: linear-gradient(160deg, #ffe9e4, #ffd4c8); box-shadow: 0 3px 0 #f0a08a; }
.quiz-opt.wrong .qo-letter { background: linear-gradient(180deg, #ff8a7a, #ef5350); }

/* 找不同 */
.diff-mark {
    position: absolute; width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid #ff4d4f; pointer-events: none;
    animation: diff-ring .4s;
    transform: translate(-50%, -50%);
}
@keyframes diff-ring { from { transform: translate(-50%,-50%) scale(1.8); opacity: 0; } }

/* 铁板快炒·颠勺接菜 */
.wok-arena {
    width: 100%; height: 340px; border-radius: 20px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #2c1f19 0%, #3d2b22 34%, #5a3a29 64%, #241a15 100%);
    box-shadow: inset 0 4px 14px rgba(0,0,0,.5), inset 0 -34px 44px rgba(255,120,40,.2);
    cursor: ew-resize; touch-action: none; user-select: none;
}
.wok-flame {
    position: absolute; left: -6%; right: -6%; bottom: 0; height: 88px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,150,50,0) 0%, rgba(255,130,35,.42) 52%, rgba(255,80,20,.72) 100%);
    transform-origin: bottom center;
    animation: wok-fire 1.05s ease-in-out infinite alternate;
}
@keyframes wok-fire { from { opacity: .55; transform: scaleY(.86); } to { opacity: 1; transform: scaleY(1.14); } }
.wok-fire-gif {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
    opacity: .42; pointer-events: none; mix-blend-mode: screen;
}
.wok-item {
    position: absolute; font-size: 42px; line-height: 1; will-change: transform;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.wok-item.bad { font-size: 34px; }
.wok-item.gone { animation: wok-gone .28s forwards; }
@keyframes wok-gone { to { transform: scale(.4) rotate(40deg); opacity: 0; } }
.wok-pan {
    position: absolute; bottom: 10px; font-size: 68px; line-height: 1; pointer-events: none;
    will-change: transform; filter: drop-shadow(0 8px 12px rgba(0,0,0,.55));
}
.wok-pan.toss { animation: wok-toss .34s ease-out; }
@keyframes wok-toss { 0% { transform: translateY(0) rotate(0); } 38% { transform: translateY(-24px) rotate(-15deg); } 100% { transform: translateY(0) rotate(0); } }
.wok-pan.hurt { animation: wok-hurt .32s; }
@keyframes wok-hurt { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-11px) rotate(-9deg); } 75% { transform: translateX(11px) rotate(9deg); } }
.wok-combo {
    position: absolute; top: 12px; right: 14px; font-size: 20px; font-weight: 900; color: #ffd79a;
    text-shadow: 0 2px 6px rgba(0,0,0,.6); pointer-events: none; opacity: 0; transition: opacity .2s;
}
.wok-combo.on { opacity: 1; animation: wok-combo-pop .4s; }
@keyframes wok-combo-pop { from { transform: scale(1.6); } }

/* 荷花茶叙拼图 */
.puzzle-wrap {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    padding: 12px 0;
}
.puzzle-board {
    position: relative;
    width: 270px; height: 270px;
    border-radius: 16px;
    background: linear-gradient(160deg, #e8f5e9, #d0e8d0);
    box-shadow: inset 0 0 0 4px #fff, 0 10px 30px rgba(0,40,20,.25);
    overflow: hidden;
}
.puzzle-tile {
    position: absolute; left: 0; top: 0;
    width: 90px; height: 90px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.15);
    cursor: pointer;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
    user-select: none; -webkit-user-select: none;
}
.puzzle-tile:active { transform: scale(.95); }
.puzzle-preview {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.puzzle-preview-label {
    font-size: 14px; font-weight: 800; color: #4a6b4a; letter-spacing: 1px;
}
.puzzle-preview-img {
    width: 100px; height: 100px;
    border-radius: 12px;
    background-size: cover; background-position: center;
    box-shadow: 0 4px 12px rgba(0,40,20,.2), inset 0 0 0 2px #fff;
}

/* ---------- 奖励结算弹窗 ---------- */
.reward-modal {
    width: 460px; border-radius: 26px; overflow: hidden;
    background: linear-gradient(180deg, #fff8e6, #ffeec8);
    box-shadow: 0 24px 70px rgba(0,20,40,.55);
    animation: pop-in .35s cubic-bezier(.34,1.56,.64,1);
    text-align: center; padding: 30px 30px 28px;
    position: relative;
}
.reward-burst { font-size: 74px; animation: burst-in .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes burst-in { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
.reward-title { font-size: 24px; font-weight: 900; color: #b8720a; margin-top: 10px; letter-spacing: 2px; }
.reward-items { display: flex; justify-content: center; gap: 16px; margin: 18px 0 22px; }
.reward-item {
    background: #fff; border-radius: 16px; padding: 12px 18px;
    box-shadow: 0 4px 10px rgba(180,120,20,.2);
    animation: reward-up .45s backwards;
}
.reward-item:nth-child(2) { animation-delay: .12s; }
.reward-item:nth-child(3) { animation-delay: .24s; }
@keyframes reward-up { from { opacity: 0; transform: translateY(18px); } }
.reward-item .ri-icon { font-size: 32px; }
.reward-item .ri-num { font-size: 16px; font-weight: 900; color: #e8850c; margin-top: 3px; }

/* 结算用时 / 纪录 */
.reward-time {
    display: inline-flex; align-items: center; gap: 12px; margin-top: 14px;
    background: #fff; border-radius: 14px; padding: 7px 18px;
    box-shadow: 0 3px 8px rgba(180,120,20,.18);
    font-size: 14.5px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.reward-time .rt-now { color: #2f7fa8; }
.reward-time .rt-best { color: #b8720a; }
.reward-time.record { background: linear-gradient(180deg, #fff5cf, #ffe294); box-shadow: 0 3px 10px rgba(220,150,20,.35); }
.reward-time.record .rt-best { color: #e04a1f; animation: claim-pulse 1.1s infinite; }
.reward-btns { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.btn-pill.ghost {
    color: #b8720a; text-shadow: none;
    background: linear-gradient(180deg, #ffffff, #f6e7c8);
    box-shadow: 0 5px 0 #d9b681, 0 8px 16px rgba(180,120,20,.22), inset 0 2px 0 rgba(255,255,255,.8);
}
.btn-pill.ghost:active { box-shadow: 0 1px 0 #d9b681; }
.btn-pill.ghost .bp-icon { background: rgba(220,150,20,.16); }

/* ---------- 重复挑战成绩面板 ---------- */
.result-modal {
    width: 430px; border-radius: 26px; overflow: hidden;
    background: linear-gradient(180deg, #fff8e6, #ffeec8);
    box-shadow: 0 24px 70px rgba(0,20,40,.55);
    animation: pop-in .35s cubic-bezier(.34,1.56,.64,1);
    text-align: center; padding: 28px 30px 26px;
}
.result-burst { font-size: 66px; animation: burst-in .55s cubic-bezier(.34,1.56,.64,1); }
.result-title { font-size: 25px; font-weight: 900; color: #b8720a; margin-top: 6px; letter-spacing: 2px; }
.result-sub { font-size: 14px; font-weight: 700; color: #a08b62; margin-top: 8px; }
.result-time { display: flex; gap: 14px; margin: 20px 0 12px; }
.rt-cell {
    flex: 1; background: #fff; border-radius: 18px; padding: 14px 8px;
    box-shadow: 0 4px 10px rgba(180,120,20,.2);
}
.rt-label { font-size: 12.5px; font-weight: 800; color: #a08b62; }
.rt-val { font-size: 26px; font-weight: 900; color: #2f7fa8; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rt-val.best { color: #e8850c; }
.result-tip { font-size: 13px; font-weight: 700; color: #b08d55; line-height: 1.6; }

/* ---------- Toast ---------- */
.toast-wrap {
    position: absolute; top: 96px; left: 50%; transform: translateX(-50%);
    z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none;
}
.toast {
    background: rgba(30,40,50,.88); color: #fff;
    padding: 10px 22px; border-radius: 22px;
    font-size: 14.5px; font-weight: 700;
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
    animation: toast-in .3s cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap;
}
.toast.out { animation: toast-out .3s forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.85); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px) scale(.9); } }

/* ---------- 飘分 ---------- */
.float-score {
    position: absolute; z-index: 480; pointer-events: none;
    font-size: 22px; font-weight: 900;
    text-shadow: 0 2px 4px rgba(0,0,0,.3);
    animation: float-up 1.1s ease-out forwards;
}
@keyframes float-up {
    0% { opacity: 0; transform: translateY(6px) scale(.6); }
    20% { opacity: 1; transform: translateY(0) scale(1.1); }
    100% { opacity: 0; transform: translateY(-64px) scale(1); }
}

/* ---------- 加载 ---------- */
.loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: linear-gradient(180deg, #7ecbf0, #c8ecfa); }
.loading-spinner {
    width: 54px; height: 54px; border-radius: 50%;
    border: 6px solid rgba(255,255,255,.5); border-top-color: #ff9a2e;
    animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 15px; color: #fff; font-weight: 700; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,80,140,.4); }

/* ============================================================
   可视化布局编辑模式(仅 ?layout=1 时由 JS 添加 le-editable 类)
   ============================================================ */
.le-editable {
    outline: 2px dashed rgba(255,80,80,.95);
    outline-offset: 2px;
    cursor: grab;
    touch-action: none;
    animation: none !important;          /* 禁用入场/浮动动画, 保证拖拽与测量精确 */
    pointer-events: auto !important;     /* .bottom-beach 等原本 pointer-events:none, 需强制开启才能拖 */
}
.le-editable.le-active { outline-color: #ffd23e; cursor: grabbing; }
.le-editable::after {
    content: attr(data-le-name);
    position: absolute; top: -20px; left: 0;
    background: rgba(20,30,40,.85); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1.5;
    padding: 1px 7px; border-radius: 7px;
    white-space: nowrap; pointer-events: none; z-index: 99;
}

/* 顶部工具栏 */
.le-toolbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: rgba(20,30,40,.94); color: #fff;
    font-size: 13px; padding: 8px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.le-toolbar .le-tip { font-weight: 800; }
.le-toolbar .le-coord {
    color: #ffd23e; font-weight: 800; min-width: 170px;
    font-variant-numeric: tabular-nums;
}
.le-toolbar .le-zoom { display: flex; align-items: center; gap: 6px; }
.le-toolbar .le-btn {
    height: 30px; padding: 0 14px; border-radius: 15px;
    background: linear-gradient(180deg, #ffcf5e, #ff9a2e);
    color: #fff; font-size: 13px; font-weight: 900;
    box-shadow: 0 2px 0 #d97a12;
}
.le-toolbar .le-btn:active { transform: translateY(2px); box-shadow: none; }
.le-toolbar .le-btn.ghost { background: rgba(255,255,255,.16); box-shadow: none; }

/* 导出配置文本框 */
.le-export {
    position: fixed; left: 50%; top: 60px; transform: translateX(-50%);
    width: min(680px, 92vw); height: 180px; z-index: 9999;
    font-size: 12px; padding: 8px; display: none;
    border: 2px solid #ff9a2e; border-radius: 10px;
    background: #fffdf6; color: #4a3520;
}

/* 缩放手柄: 元素右下角橙色圆点, 拖拽调整大小 */
.le-resize {
    position: absolute; right: -9px; bottom: -9px;
    width: 18px; height: 18px; border-radius: 50%;
    background: linear-gradient(180deg, #ffcf5e, #ff9a2e);
    border: 2.5px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.35);
    cursor: nwse-resize; z-index: 100;
    pointer-events: auto;
}
.le-resize:active { cursor: grabbing; }

/* ---------- 移动端适配：面板与列表在手机上不超出屏幕 ---------- */
@media (max-width: 1024px) {
    /* 面板整体收紧，保证在 1280×590 舞台里无论横竖屏都不溢出 */
    .panel { max-height: 510px; border-radius: 22px; }
    .panel-head { padding: 12px 18px 8px; }
    .panel-title { gap: 8px; }
    .panel-title .t-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 19px; }
    .panel-title h2 { font-size: 18px; }
    .panel-title .t-sub { font-size: 10px; }
    .panel-close { width: 34px; height: 34px; font-size: 15px; }
    .panel-body { padding: 10px 16px 14px; }

    .tab-ico { width: 17px; height: 17px; }

    /* 任务列表紧凑化 */
    .rank-tabs { gap: 6px; margin-bottom: 8px; }
    .rank-tab { padding: 5px 12px; border-radius: 14px; font-size: 12px; }

    .task-list { gap: 7px; }
    .task-item { padding: 7px 9px; gap: 9px; border-radius: 13px; }
    .task-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 20px; }
    .task-name { font-size: 13.5px; line-height: 1.2; }
    .task-desc { font-size: 9.5px; line-height: 1.25; margin: 0 0 3px; }
    .task-progress { gap: 5px; }
    .task-track { max-width: 160px; height: 7px; border-radius: 4px; }
    .task-frac { font-size: 9.5px; }
    .task-reward .tr-num { font-size: 10.5px; }
    .task-btn { min-width: 62px; height: 28px; border-radius: 14px; font-size: 11.5px; letter-spacing: 0; }

    /* 签到面板紧凑化 */
    .signin-grid { gap: 10px; }
    .signin-cell { padding: 10px 6px 9px; border-radius: 14px; gap: 4px; }
    .signin-cell .day { font-size: 11px; }
    .signin-cell .reward-icon { font-size: 26px; }
    .signin-cell .reward-num { font-size: 11px; }
    .signin-big-btn { height: 44px; margin-top: 12px; border-radius: 22px; font-size: 16px; letter-spacing: 1px; }

    /* 商城、背包、徽章、优惠券统一收紧 */
    .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .shop-card { border-radius: 16px; }
    .shop-thumb { height: 82px; font-size: 40px; }
    .shop-info { padding: 8px 10px 11px; gap: 6px; }
    .shop-name { font-size: 12.5px; min-height: 34px; }
    .shop-price { font-size: 14px; }
    .shop-price .old { font-size: 10px; }
    .shop-buy { height: 28px; padding: 0 12px; border-radius: 14px; font-size: 12px; }

    .coupon-list { gap: 10px; }
    .coupon-card { border-radius: 14px; }
    .coupon-img { height: 68px; font-size: 36px; }
    .coupon-body { padding: 8px 10px 10px; }
    .coupon-name { font-size: 12.5px; }
    .coupon-discount { font-size: 24px; }
    .coupon-discount small { font-size: 13px; }
    .coupon-code { font-size: 10px; }
    .coupon-use { height: 28px; border-radius: 14px; font-size: 11.5px; }

    .badge-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .badge-cell { padding: 10px 4px 9px; border-radius: 14px; gap: 5px; }
    .badge-shield { width: 56px; height: 62px; font-size: 27px; }
    .badge-name { font-size: 10.5px; }
    .badge-cond { font-size: 9px; }

    .bag-goods { gap: 8px; }
    .bag-good { padding: 9px 10px; gap: 10px; border-radius: 13px; }
    .bg-icon { width: 44px; height: 44px; border-radius: 11px; font-size: 24px; }
    .bg-name { font-size: 12.5px; }
    .bg-code { font-size: 10px; }
    .bg-use { height: 26px; padding: 0 12px; border-radius: 13px; font-size: 11px; margin-top: 5px; }

    .rank-list { gap: 7px; }
    .rank-row { padding: 7px 10px 7px 8px; border-radius: 13px; gap: 10px; }
    .rank-avatar { width: 36px; height: 36px; font-size: 18px; }
    .rank-name { font-size: 13px; }
    .rank-score { font-size: 15px; }

    /* 面板内货币条 */
    .wallet-bar { gap: 8px; margin-bottom: 12px; }
    .wallet-chip { border-radius: 12px; padding: 7px 10px; }
    .wallet-chip .wc-icon { font-size: 22px; }
    .wallet-chip .wc-name { font-size: 10px; }
    .wallet-chip .wc-num { font-size: 16px; }
}


/* 广悦华 · 海岛旅行手账 */
.journal-modal { width: 940px; max-height: 564px; background: #fffaf0; border: 1px solid #fff9e7; }
.journal-modal .mini-head { padding: 12px 22px; border-bottom: 1px dashed #d8cbb6; }
.journal-modal .mini-title { font-size: 18px; color: #375d59; }
.journal-modal .mini-hud { gap: 6px; }
.journal-modal .hud-chip { font-size: 12px; padding: 5px 9px; }
.journal-body { padding: 12px 22px 15px; gap: 11px; overflow: hidden; background-image: radial-gradient(#c2ac8322 .7px, transparent .7px); background-size: 5px 5px; }
.journal-chapters { display: flex; width: 100%; justify-content: space-between; gap: 12px; }
.journal-tab { flex: 1; display: flex; align-items: center; gap: 9px; color: #9a9b89; border-bottom: 2px solid #e4ddca; padding: 0 0 8px; }
.journal-tab strong { display: block; font-size: 14px; letter-spacing: 1px; }
.journal-tab small { display: block; font-size: 9px; letter-spacing: 1px; margin-top: 3px; }
.journal-seal { display: grid; place-items: center; width: 33px; height: 33px; border: 1px dashed #b7b6a3; border-radius: 50%; font-size: 17px; }
.journal-tab.active { color: #346c64; border-color: #438878; }
.journal-tab.active .journal-seal { background: #e1ede0; border-color: #438878; }
.journal-tab.done .journal-seal { color: #c97558; border: 3px double #c97558; transform: rotate(-12deg); background: #fff1df; }
.journal-arena { position: relative; width: 100%; height: 302px; flex: none; overflow: hidden; border: 5px solid #fff; border-radius: 5px; box-shadow: 0 3px 12px #54433021; cursor: crosshair; touch-action: manipulation; }
.journal-scene,.journal-photo-art { background-image: url('assets/snap-journal-atlas.webp'); background-size: 200% 200%; background-repeat: no-repeat; background-color: #82b6b0; }
.journal-scene { position: absolute; inset: 0; }
.journal-dawn { background-position: 0 0; }.journal-noon { background-position: 100% 0; }.journal-dusk { background-position: 0 100%; }.journal-night { background-position: 100% 100%; }
.journal-location { position: absolute; top: 13px; right: 15px; font-size: 9px; letter-spacing: 2px; color: #3a625d; background: #fff9e7d9; padding: 6px 10px; border-radius: 2px; }
.journal-caption { position: absolute; top: 20px; left: 24px; color: #335953; text-shadow: 0 1px 6px #fff7d9; }
.journal-caption small { display: block; letter-spacing: 3px; font-size: 11px; margin-bottom: 7px; }
.journal-caption strong { font-size: 22px; font-family: 'STKaiti','KaiTi',serif; letter-spacing: 2px; }
.journal-arena[data-chapter='3'] .journal-caption { color: #fff0c5; text-shadow: 0 2px 6px #182d51; }
.journal-target { position: absolute; top: 64%; width: 72px; height: 72px; transform: translate(-50%,-50%); filter: drop-shadow(0 3px 2px #193e4233); pointer-events: none; }
.journal-target svg { width: 100%; height: 100%; }
.journal-focus { position: absolute; top: 64%; left: 50%; width: 98px; height: 88px; transform: translate(-50%,-50%); pointer-events: none; color: #fffbea; filter: drop-shadow(0 1px 2px #234e58); transition: color .15s; }
.journal-focus i { position: absolute; width: 20px; height: 20px; border: solid currentColor; }
.journal-focus i:nth-child(1) { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 6px 0 0; }.journal-focus i:nth-child(2) { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 6px 0 0; }.journal-focus i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 6px; }.journal-focus i:nth-child(4) { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 6px; }
.journal-arena.aligned .journal-focus { color: #caffbb; background: #edffc31c; border-radius: 6px; }
.journal-helper { position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); background: #244f59b8; color: #fffbea; padding: 6px 16px; border-radius: 20px; font-size: 11px; letter-spacing: 1px; white-space: nowrap; pointer-events: none; }
.journal-feedback { position: absolute; z-index: 11; top: 40%; left: 50%; transform: translate(-50%,-50%); background: #fff8e9f5; color: #95613f; font-size: 16px; font-weight: 800; padding: 10px 20px; border-radius: 4px; box-shadow: 0 4px 15px #273f3b24; opacity: 0; pointer-events: none; white-space: nowrap; }
.journal-feedback.show { animation: journal-feedback .72s both; }
@keyframes journal-feedback { 0% { opacity: 0; margin-top: 8px; } 20%,75% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: -5px; } }
.journal-footer { width: 100%; display: flex; align-items: center; gap: 18px; }
.journal-film-label { color: #42675e; width: 130px; flex: none; }.journal-film-label strong { font-size: 14px; letter-spacing: 1px; }.journal-progress { display: block; font-size: 11px; margin-top: 7px; color: #9b8972; }
.journal-film { display: flex; gap: 13px; flex: 1; }
.journal-photo { width: 82px; height: 66px; padding: 4px 4px 2px; background: #fffdf7; box-shadow: 0 2px 5px #4b4c3722; transform: rotate(-3deg); text-align: center; flex: none; }.journal-photo:nth-child(even) { transform: rotate(3deg); }
.journal-photo-art { height: 44px; position: relative; overflow: hidden; }.journal-photo small { display: block; font-size: 9px; color: #b48452; line-height: 16px; }.journal-photo-subject { position: absolute; width: 22px; height: 22px; left: 50%; top: 62%; transform: translate(-50%,-50%); }
.journal-photo.empty { border: 1px dashed #cfc8b8; box-shadow: none; background: #eae6d852; }.journal-photo.empty>span { display: grid; place-items: center; height: 41px; color: #bdb69f; font: italic 20px Georgia,serif; }
.new-photo { animation: journal-photo-in .4s ease-out; }@keyframes journal-photo-in { from { opacity: 0; translate: 0 -24px; rotate: -8deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.journal-shutter,.journal-collect { background: #cd785d; color: #fff9ea; border: 1px solid #b96852; border-radius: 25px; padding: 11px 20px; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 #a85e49; cursor: pointer; }.journal-shutter span { font-size: 24px; vertical-align: middle; margin-right: 7px; }.journal-shutter:disabled { opacity: .7; }.journal-shutter:active,.journal-collect:active { transform: translateY(2px); box-shadow: none; }
.journal-souvenir { width: 100%; min-height: 380px; padding: 22px; text-align: center; color: #41655b; border: 1px solid #e6d6ba; background: #fff8e9; }.journal-souvenir>small { font-size: 10px; letter-spacing: 3px; color: #b27e5a; }.journal-souvenir h2 { font: bold 27px 'STKaiti','KaiTi',serif; margin: 12px 0 8px; letter-spacing: 3px; }.journal-souvenir p { font-size: 12px; color: #9e8c70; }.journal-souvenir-photos { display: flex; justify-content: center; gap: 20px; margin: 22px 0; }.souvenir-photo { width: 156px; height: 131px; padding: 7px; }.souvenir-photo .journal-photo-art { height: 97px; }.souvenir-photo small { font-size: 12px; line-height: 22px; }.souvenir-photo .journal-photo-subject { width: 36px; height: 36px; }.journal-souvenir-note { font-size: 12px; margin: 8px 0 18px; color: #958266; }
.journal-body [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .journal-body * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.journal-caption { padding: 9px 13px; top: 13px; left: 13px; border-radius: 3px; background: #fff8e7cf; text-shadow: none; }
.journal-arena[data-chapter='3'] .journal-caption { background: #203d60bb; }

/* 盐晶浮岛：轻松漂流，场景随旅程从薄荷蓝过渡至晚霞紫 */
.salt-modal { width: 940px; max-height: 550px; background: #f8fbf4; }
.salt-modal .mini-head { padding: 12px 22px; border-bottom: 1px solid #dbe8dc; }
.salt-modal .mini-title { color: #416f70; font-size: 18px; }
.salt-body { padding: 14px 20px 16px; gap: 13px; overflow: hidden; }
.salt-lake { position: relative; width: 100%; height: 355px; flex: none; overflow: hidden; border-radius: 17px; touch-action: none; outline-offset: 2px; background: radial-gradient(ellipse at 48% 30%,#e0f7e7 0%,#90d5d5 52%,#68b7c6 100%); box-shadow: inset 0 0 30px #5b9aab20; }
.salt-lake::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center,transparent 40%,#fff2be 100%); opacity: var(--salt-glow,0); pointer-events: none; transition: opacity .5s; }
.salt-lake[data-phase='1'] { background: radial-gradient(ellipse at 48% 30%,#e3f4fa,#b4cfe4 55%,#8cb8d5); }.salt-lake[data-phase='2'] { background: radial-gradient(ellipse at 48% 30%,#f7e7e3,#ccbfdb 55%,#9ca9d3); }
.salt-landscape { position: absolute; inset: 0; pointer-events: none; }.salt-landscape>svg { width: 100%; height: 100%; }
.salt-ripples { position: absolute; inset: -60px 19%; opacity: .35; pointer-events: none; background: repeating-radial-gradient(ellipse at 50% 0%,transparent 0 27px,#fff9 28px 29px,transparent 30px 59px); animation: salt-water 7s linear infinite; mask-image: linear-gradient(transparent,#000 20%,#000 80%,transparent); }
@keyframes salt-water { from { transform: translateY(-25px); } to { transform: translateY(34px); } }
.salt-chapter { position: absolute; top: 19px; left: 24px; color: #406d70; background: #fffdf0d9; padding: 9px 15px; border-radius: 8px; z-index: 2; }.salt-chapter small { font-size: 9px; letter-spacing: 2px; display: block; margin-bottom: 5px; }.salt-chapter strong { font: bold 22px 'STKaiti','KaiTi',serif; letter-spacing: 3px; }
.salt-scene-note { position: absolute; right: 24px; top: 25px; color: #466f75; background: #fffdf0b8; padding: 7px 12px; border-radius: 20px; font-size: 11px; letter-spacing: 1px; }
.salt-player { position: absolute; top: 76%; left: 50%; width: 95px; height: 85px; transform: translate(-50%,-50%); z-index: 4; pointer-events: none; }.salt-player svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 4px #438d9633); }.salt-player.spinning svg { animation: salt-spin 1.1s ease-in-out infinite; }@keyframes salt-spin { to { transform: rotate(360deg); } }
.salt-item { position: absolute; transform: translate(-50%,-50%); pointer-events: none; z-index: 3; }.salt-crystal { width: 33px; height: 44px; filter: drop-shadow(0 0 9px #fff); }.salt-whirl { width: 76px; height: 52px; }.salt-whirl svg { animation: salt-whirl 4s linear infinite; }.salt-item svg { width: 100%; height: 100%; }@keyframes salt-whirl { 50% { transform: scale(.87); } }
.salt-notice { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); background: #fffff1e6; color: #477c7a; border: 1px solid #fff; padding: 8px 17px; border-radius: 20px; font-size: 12px; opacity: 0; transition: opacity .2s; z-index: 5; pointer-events: none; white-space: nowrap; }.salt-notice.on { opacity: 1; }
.salt-intro { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #f3fcf0cc; backdrop-filter: blur(4px); color: #416c6b; }.salt-intro>small { font-size: 10px; letter-spacing: 3px; }.salt-intro h2 { font: bold 36px 'STKaiti','KaiTi',serif; letter-spacing: 7px; margin: 12px 0 18px; }.salt-intro p { font-size: 15px; line-height: 1.9; }.salt-intro .salt-intro-detail { font-size: 12px; color: #7a9488; margin-top: 3px; }.salt-start { margin-top: 22px; padding: 12px 27px; border-radius: 25px; color: #fffdf0; background: #62978c; box-shadow: 0 4px 0 #457c74; font-size: 14px; font-weight: 800; letter-spacing: 1px; }.salt-start:active { transform: translateY(2px); box-shadow: 0 2px 0 #457c74; }.salt-start:focus-visible { outline: 3px solid #ddaf62; outline-offset: 4px; }
.salt-footer { display: flex; width: 100%; align-items: center; gap: 25px; }.salt-route { flex: 1; }.salt-route-labels { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 1px; color: #6f9489; margin-bottom: 7px; }.salt-progress { height: 7px; background: #e1eadd; border-radius: 10px; overflow: hidden; }.salt-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg,#6bad9f,#c5b5d6); border-radius: 10px; }.salt-status { width: 270px; text-align: right; color: #6e918a; font-size: 12px; }
.salt-result h2 { margin-bottom: 4px; }.salt-result-count { font: italic 56px Georgia,serif; color: #689e9b; margin: 0 0 5px; }.salt-result .salt-start { margin-top: 17px; }
@media (prefers-reduced-motion: reduce) { .salt-ripples,.salt-player.spinning svg,.salt-whirl svg { animation: none; } }

/* Approved bath concept: sandstone, window light, emerald saltwater. */
.float-modal { width: 1000px; max-height: 558px; border: 2px solid #ecd4ad; border-radius: 24px; background: #fff7e9; }
.float-modal .mini-head { padding: 9px 18px; border-bottom: 1px solid #dfc9a6; background: linear-gradient(#fffaf1,#f5e8d2); }
.float-modal .mini-title { color: #684c31; font: bold 24px 'STKaiti','KaiTi',serif; letter-spacing: 2px; }
.float-modal .mini-hud { gap: 7px; }.float-modal .hud-chip { color: #785a38; background: #fffaf0; box-shadow: none; font-size: 12px; }.float-modal .panel-close { background: #fff6e6; color: #7b5a35; box-shadow: 0 2px 0 #d2b88b; }
.float-body { padding: 0; overflow: hidden; display: block; flex: none; }
.float-arena { height: 420px; width: 100%; position: relative; overflow: hidden; touch-action: none; background: #1b8d95; outline-offset: -4px; }
.float-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.float-shimmer { position: absolute; left: 25%; right: 2%; top: 49%; bottom: 1%; pointer-events: none; background: repeating-linear-gradient(115deg,transparent 0 30px,#ffffff12 33px 34px,transparent 38px 80px); mask-image: linear-gradient(transparent,#000,transparent); animation: float-water 9s linear infinite; }
@keyframes float-water { to { background-position: 160px 0; } }
.float-swimmer { position: absolute; width: 167px; height: 112px; transform: translate(-50%,-50%) rotate(var(--float-tilt,0deg)); z-index: 4; pointer-events: none; }
.float-swimmer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 3px #07495555); }
.float-body-ripple { position: absolute; inset: 21% 3% 12%; border: 1px solid #eaffffc2; border-radius: 50%; transform: rotate(17deg); box-shadow: 0 0 0 7px #ffffff12,0 0 0 13px #ffffff30; animation: float-body-wave 3s ease-in-out infinite; }
@keyframes float-body-wave { 50% { scale: 1.08; opacity: .55; } }
.float-target { position: absolute; width: 182px; height: 83px; transform: translate(-50%,-50%); border: 1px dashed #f9f7d9; border-radius: 18px; background: #eafad41a; z-index: 3; color: #fff4cb; box-shadow: 0 0 20px #e7ffe21a; }
.float-target>i { position: absolute; width: 24px; height: 20px; border: solid currentColor; filter: drop-shadow(0 0 4px #fff7b8); }.float-target>i:nth-child(1){left:-2px;top:-2px;border-width:4px 0 0 4px;border-radius:15px 0 0;}.float-target>i:nth-child(2){right:-2px;top:-2px;border-width:4px 4px 0 0;border-radius:0 15px 0 0;}.float-target>i:nth-child(3){left:-2px;bottom:-2px;border-width:0 0 4px 4px;border-radius:0 0 0 15px;}.float-target>i:nth-child(4){right:-2px;bottom:-2px;border-width:0 4px 4px 0;border-radius:0 0 15px;}
.float-target.steady { color: #d9ffc7; border-color: #e6ffd6; background: #e7ffbc33; }.float-target.captured { background: #fff7cb55; }
.float-target-label { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 13px; border-radius: 20px; color: #735432; background: #fff7e6ef; font-size: 12px; box-shadow: 0 2px 8px #15555a25; }.float-target-label::after { content: ''; position: absolute; top: 100%; left: 50%; border: 5px solid transparent; border-top-color: #fff7e6ef; margin-left: -5px; }
.float-hold-meter { position: absolute; left: 15%; right: 15%; bottom: -9px; height: 4px; border-radius: 5px; overflow: hidden; background: #1e555f55; }.float-hold-meter span { display: block; height: 100%; width: 0; background: #f1ffc8; }
.float-gesture { position: absolute; top: 85%; left: 35%; color: #fff9d7; font-size: 13px; text-shadow: 0 1px 4px #1b555b; pointer-events: none; }
.float-push-ripple { position: absolute; width: 28px; height: 15px; margin: -7px -14px; border: 2px solid #f1ffffdd; border-radius: 50%; pointer-events: none; z-index: 5; animation: float-push .9s ease-out forwards; }@keyframes float-push { to { transform: scale(4); opacity: 0; } }
.float-feedback { position: absolute; top: 45%; left: 50%; transform: translateX(-50%); color: #725431; font-size: 15px; font-weight: 800; border-radius: 20px; z-index: 6; background: #fff6e4ed; white-space: nowrap; }.float-feedback:not(:empty) { padding: 9px 20px; }
.float-footer { height: 42px; display: flex; align-items: center; justify-content: center; gap: 20px; color: #785735; background: linear-gradient(#fffaf0,#f4e5cd); border-top: 1px solid #e1cba6; }.float-hint { font: bold 16px 'STKaiti','KaiTi',serif; }.float-subhint { font-size: 11px; border-left: 1px solid #c9af88; padding-left: 20px; }.float-dots { display: flex; gap: 12px; }.float-dot { color: #c6b69a; font-size: 22px; }.float-dot.done { color: #b98737; }
.float-intro,.float-result { position: absolute; z-index: 7; left: 50%; top: 52%; transform: translate(-50%,-50%); width: 420px; text-align: center; padding: 25px; border: 1px solid #e3c795; border-radius: 18px; background: #fff8e9ed; box-shadow: 0 12px 45px #18535730; color: #785a39; }.float-intro small,.float-result small { letter-spacing: 3px; font-size: 11px; }.float-intro h2,.float-result h2 { font: bold 27px 'STKaiti','KaiTi',serif; margin: 14px 0; }.float-intro p,.float-result p { font-size: 12px; line-height: 1.9; }.float-start { margin-top: 18px; color: #fff9e8; background: #a78049; border: 1px solid #977241; padding: 11px 25px; border-radius: 24px; box-shadow: 0 3px 0 #7e603b; font-weight: 800; }.float-start:focus-visible { outline: 3px solid #50887c; outline-offset: 3px; }
.float-result { top: 30%; width: 435px; padding: 17px; }.float-result h2 { font-size: 25px; margin: 8px 0; }.float-result .float-start { margin-top: 10px; }
.float-arena [hidden] { display: none!important; }
@media(prefers-reduced-motion:reduce){.float-shimmer,.float-body-ripple{animation:none;}}

.float-swimmer img { clip-path: polygon(2.5% 60%,3% 56%,6% 54%,11% 47%,17% 39%,23% 32%,25% 29%,25% 26%,21% 27%,18% 26%,15% 23%,13% 19%,14% 15%,17% 12%,19% 8%,22% 4%,25% 4%,28% 7%,31% 12%,32% 17%,30% 20%,31% 23%,35% 23%,39% 24%,44% 21%,51% 18%,60% 14%,67% 11%,70% 11%,71% 12%,70% 13%,72% 12%,73% 13%,72% 15%,70% 17%,66% 18%,61% 21%,54% 25%,47% 29%,43% 30%,45% 34%,48% 37%,53% 38%,58% 43%,62% 48%,67% 54%,72% 62%,77% 68%,83% 75%,89% 82%,94% 88%,98% 90%,99% 92%,98% 94%,97% 95%,96% 97%,94% 96%,92% 93%,88% 90%,83% 86%,78% 82%,73% 78%,68% 73%,65% 69%,61% 66%,57% 65%,52% 64%,48% 63%,45% 61%,43% 58%,42% 54%,42% 49%,39% 47%,35% 45%,33% 41%,31% 37%,30% 34%,27% 35%,23% 41%,19% 47%,14% 52%,9% 56%,6% 58%,5% 62%,4% 63%,3% 61%,2.5% 62%); }

/* 广悦臻酒店 · 悦臻夜未眠 */
.night-modal { width: 1000px; max-height: 558px; border: 2px solid #d4b66f; background:#071f3a; border-radius:24px; }
.night-modal .mini-head { padding:9px 18px; border-bottom:1px solid #b8954c; background:linear-gradient(180deg,#082a4d,#061d37); }
.night-modal .mini-title { color:#fff0c5; font:700 23px 'STKaiti','KaiTi',serif; letter-spacing:2px; }
.night-modal .mini-hud { gap:7px; }.night-modal .hud-chip { padding:5px 10px; color:#ffedb6; background:#0e3154; border:1px solid #92763c; box-shadow:none; font-size:12px; }
.night-modal .panel-close { background:#0d3459; color:#ffedbd; border:1px solid #ad8d4e; box-shadow:none; }
.night-body { padding:0; overflow:hidden; display:block; flex:none; }
.night-arena { position:relative; width:100%; height:420px; overflow:hidden; touch-action:manipulation; background:#061b38; outline-offset:-4px; }
.night-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.night-moon-glow { position:absolute; right:5%; top:5%; width:90px; height:90px; border-radius:50%; background:#fff2be0d; box-shadow:0 0 40px #fff0ab12; pointer-events:none; }
.night-window { position:absolute; z-index:3; width:43px; height:38px; transform:translate(-50%,-50%); border-radius:6px 6px 3px 3px; border:1px solid transparent; background:#061a3044; transition:filter .18s,background .18s,box-shadow .18s,transform .18s; }
.night-window:disabled { cursor:default; }.night-window:not(:disabled){cursor:pointer;}.night-window:not(:disabled):hover{border-color:#9fded0;}.night-window:focus-visible{outline:3px solid #fff0a7;outline-offset:2px;}
.night-window.lit { background:radial-gradient(circle at 50% 45%,#fffce9 0 12%,#ffd783 45%,#c7822d 100%); border-color:#dcffca; box-shadow:0 0 8px #fff7bd,0 0 22px #8dffd69e,inset 0 0 8px #fff; }
.night-window.preview { transform:translate(-50%,-50%) scale(1.16); filter:brightness(1.35); }.night-window.correct { animation:night-correct .45s ease-out; }.night-window.wrong{background:#ff735c;box-shadow:0 0 20px #ff473f;animation:night-wrong .32s ease-in-out 2;}
.night-window.next::after { content:''; position:absolute; inset:-8px; border:1px solid #8be0cd55; border-radius:10px; animation:night-next 1.2s ease-in-out infinite; }
.night-window-number { display:grid;place-items:center;width:20px;height:20px;margin:auto;border-radius:6px;color:#143a44;background:#fff3c7e8;font-size:11px;font-weight:900;opacity:0; }.night-window.lit .night-window-number{opacity:1;}
.night-window.finale { animation:night-finale .75s both; }.night-trail{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;}.night-trail path{fill:none;stroke:#bcffd5;stroke-width:2;stroke-dasharray:5 6;filter:drop-shadow(0 0 4px #76ffd3);animation:night-dash 1.4s linear infinite;}
@keyframes night-correct{50%{transform:translate(-50%,-50%) scale(1.24);}}@keyframes night-wrong{50%{transform:translate(-50%,-50%) translateX(5px);}}@keyframes night-next{50%{transform:scale(1.13);opacity:.3;}}@keyframes night-finale{from{opacity:.2;transform:translate(-50%,-50%) scale(.7);}to{opacity:1;}}@keyframes night-dash{to{stroke-dashoffset:-22;}}
.night-prompt{position:absolute;z-index:5;left:50%;top:20%;transform:translateX(-50%);padding:8px 18px;border-radius:22px;color:#fff0bd;background:#092d4edb;border:1px solid #c0a15b;font-size:13px;font-weight:800;letter-spacing:1px;white-space:nowrap;box-shadow:0 4px 18px #001a30aa;pointer-events:none;}.night-prompt.turn{background:#0a5148e8;border-color:#9ee2bd;}.night-prompt.error{background:#742f37e8;border-color:#ffb39d;}.night-prompt.success{background:#705328e8;border-color:#ffe09a;}.night-prompt.finale{font-size:16px;top:17%;}
.night-intro,.night-result{position:absolute;z-index:7;left:50%;top:53%;transform:translate(-50%,-50%);width:430px;padding:25px;text-align:center;color:#ffe9b0;background:#082845e9;border:1px solid #b9974f;border-radius:18px;box-shadow:0 15px 50px #00112399,0 0 32px #e5c06f1f;}.night-intro small,.night-result small{font-size:10px;letter-spacing:3px;}.night-intro h2,.night-result h2{font:700 28px 'STKaiti','KaiTi',serif;letter-spacing:3px;margin:13px 0;}.night-intro p,.night-result p{font-size:13px;line-height:1.8;}.night-intro-sub{color:#b8cbd3;font-size:11px!important;}.night-start{margin-top:18px;padding:11px 25px;border-radius:24px;color:#092a42;background:linear-gradient(#fff0b7,#d9b863);box-shadow:0 3px 0 #98783b;font-weight:900;}.night-start:focus-visible{outline:3px solid #95ddcd;outline-offset:3px;}
.night-result{top:49%;width:420px;padding:20px;}.night-result h2{margin:9px 0;}.night-result .night-start{margin-top:11px;}
.night-footer{height:42px;display:flex;align-items:center;justify-content:center;gap:20px;color:#785b31;background:linear-gradient(#fff9e9,#f0dfbd);border-top:1px solid #caaa67;}.night-footer strong{font:700 16px 'STKaiti','KaiTi',serif;letter-spacing:1px;}.night-footer small{padding-left:20px;border-left:1px solid #c3a76f;color:#917954;}.night-dots{display:flex;gap:12px;font-size:20px;}.night-dot{color:#b9ad96;}.night-dot.active{color:#157a75;text-shadow:0 0 6px #78d9c7;}.night-dot.done{color:#a87a26;}.night-arena [hidden]{display:none!important;}
@media(prefers-reduced-motion:reduce){.night-window,.night-trail path{animation:none!important;transition:none!important;}}

/* 潮玩海岸 · 6×6潮汐珍藏馆 */
.match-modal-6{width:880px;max-height:540px;background:#fff9ed;border:2px solid #f2c887;}.match-modal-6 .mini-head{padding:10px 20px;border-bottom:1px solid #eac48e}.match-modal-6 .mini-title{color:#356f73}.match-body-6{padding:0;overflow:hidden}.match-beach-arena{position:relative;width:100%;height:448px;background:url('assets/match-beach.webp') center/cover;overflow:hidden;padding:14px 34px 16px}.match-beach-arena::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fff9ea18,#fff9ead8 80%);pointer-events:none}.match-beach-heading{position:relative;z-index:2;color:#39777a;margin:0 0 7px 72px}.match-beach-heading strong{font:700 18px 'STKaiti','KaiTi',serif;letter-spacing:2px}.match-beach-heading small{font-size:10px;margin-left:15px;color:#8a8069}.match-play-layout{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:30px}.match-grid-6{grid-template-columns:repeat(6,58px);gap:7px;padding:10px;border-radius:20px;background:#fff9ed96;box-shadow:0 8px 28px #7b6b4a22,inset 0 0 0 1px #fff}.match-card-6{position:relative;width:58px;height:58px;border-radius:15px;background:linear-gradient(145deg,#62c7cf,#287f96);box-shadow:0 4px 0 #1d6a7b,0 6px 10px #245d6638;transform-style:preserve-3d;transition:transform .3s,box-shadow .3s;cursor:pointer}.match-card-6 .card-back,.match-card-6 .card-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:inherit;backface-visibility:hidden}.match-card-6 .card-back{color:#fff6cf;background:radial-gradient(circle at 35% 25%,#8adce0,#439bad 60%,#2c788c);border:1px solid #dff9eb}.match-card-6 .card-back::before,.match-card-6 .card-back::after{content:'';position:absolute;border:1px solid #ffffff3d;border-radius:50%}.match-card-6 .card-back::before{inset:8px}.match-card-6 .card-back::after{inset:13px}.shell-mark{font-size:20px;line-height:18px}.match-card-6 .card-back small{font-size:6px;letter-spacing:.5px;margin-top:2px}.match-card-6 .card-face{transform:rotateY(180deg);background:linear-gradient(150deg,#fffdf5,#ffedd0);border:1px solid #f1c98e;color:#755230}.match-card-6 .card-face b{font-size:27px;line-height:30px}.match-card-6 .card-face small{font-size:8px;font-weight:800}.match-card-6.flipped{transform:rotateY(180deg);box-shadow:0 3px 0 #d7b27a,0 5px 10px #795e3433}.match-card-6.matched{transform:rotateY(180deg) scale(.92);box-shadow:0 0 0 2px #8ac98e,0 0 18px #a4e995;background:#e6f6d5;animation:match-water-pop .5s}.match-card-6.mismatch{animation:match-shake .3s ease-in-out 2}.match-collection{width:230px;display:grid;grid-template-columns:repeat(6,31px);gap:7px;padding:14px 12px;border-radius:18px;background:#fffaf0e8;border:1px solid #e3c997;box-shadow:0 8px 25px #836d4533}.match-collection>strong,.match-collection>small{grid-column:1/-1;text-align:center}.match-collection>strong{font:700 17px 'STKaiti','KaiTi',serif;color:#437a74;letter-spacing:2px}.match-collection>small{font-size:7px;color:#aa9170;letter-spacing:2px;margin-top:-5px}.match-slot{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#ded9c8aa;border:1px dashed #bbb29c;filter:grayscale(1);opacity:.48;transition:.35s}.match-slot i{font-style:normal;font-size:17px}.match-slot.collected{background:#fff0bf;border:1px solid #e4af55;filter:none;opacity:1;box-shadow:0 0 11px #ffd981;animation:match-slot-in .45s}.match-feedback{position:absolute;z-index:4;left:50%;top:48%;transform:translate(-50%,-50%) scale(.8);padding:9px 20px;border-radius:24px;color:#fff;background:#267f7de8;font-weight:900;opacity:0;pointer-events:none}.match-feedback.on{animation:match-feedback .7s}.match-beach-arena>*{position:relative;z-index:1}@keyframes match-water-pop{50%{filter:brightness(1.3);transform:rotateY(180deg) scale(1.08)}}@keyframes match-shake{50%{translate:5px 0}}@keyframes match-slot-in{50%{transform:scale(1.3) rotate(12deg)}}@keyframes match-feedback{20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-65%) scale(1)}}

/* 听海水屋 · 环湖迎宾 */
.race-modal{width:1000px;max-height:560px;border:2px solid #d5ae5d;border-radius:24px;background:#062e45}.race-modal .mini-head{padding:9px 18px;border-bottom:1px solid #bd9142;background:linear-gradient(#073d59,#052a40)}.race-modal .mini-title{color:#fff0bf;font:700 23px 'STKaiti','KaiTi',serif;letter-spacing:2px}.race-modal .hud-chip{color:#ffe8a2;background:#0a4864;border:1px solid #a98546;box-shadow:none;font-size:12px}.race-modal .panel-close{color:#ffefc2;background:#0b4561;border:1px solid #a58449;box-shadow:none}.race-body{padding:0;overflow:hidden;display:block;flex:none}.race-arena{position:relative;width:100%;height:420px;overflow:hidden;touch-action:none;background:#075477;outline-offset:-4px}.race-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.race-tint{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 54%,transparent 10%,#00354b24 80%),linear-gradient(#001b331b,#00465b05 55%,#001b3350);pointer-events:none}.race-top{position:absolute;z-index:7;left:20px;top:16px;display:flex;align-items:center;gap:10px}.race-clock{width:57px;height:57px;display:grid;place-items:center;border-radius:50%;color:#193d47;background:linear-gradient(#fff2b8,#d9b25d);border:3px solid #fff5cf;box-shadow:0 4px 16px #00182799}.race-clock b{font-size:22px;line-height:17px}.race-clock small{font-size:9px;margin-top:-8px}.race-clock.urgent{color:#fff;background:#d6503f;animation:race-urgent .55s infinite alternate}.race-order{min-width:180px;padding:7px 15px 7px 16px;border-radius:12px;color:#fff2c7;background:#073d58e8;border:1px solid #b99551;box-shadow:0 5px 18px #001b2f99}.race-order small,.race-order b,.race-order span{display:block}.race-order small{font-size:8px;letter-spacing:2px;color:#8fd5cb}.race-order b{font:700 16px 'STKaiti','KaiTi',serif;margin:2px 0}.race-order span{font-size:9px;color:#ead8ac}@keyframes race-urgent{to{transform:scale(1.08)}}
.race-dock{position:absolute;z-index:4;left:51%;top:76%;transform:translate(-50%,-50%);width:102px;padding:7px 8px 7px 37px;border-radius:12px;color:#61472b;background:#fff1c6e8;border:1px solid #d5ad5e;box-shadow:0 5px 16px #001b2f77;opacity:.7}.race-dock span{position:absolute;left:7px;top:10px;font-size:24px}.race-dock b,.race-dock small{display:block}.race-dock b{font-size:12px}.race-dock small{font-size:8px;color:#94764d}.race-dock.active{opacity:1;animation:race-target 1s ease-in-out infinite}.race-stop{position:absolute;z-index:4;transform:translate(-50%,-50%);min-width:93px;padding:6px 7px 6px 34px;border-radius:11px;color:#624829;background:#fff7e2d9;border:1px solid #cbaa69;box-shadow:0 4px 14px #00182755;opacity:.55;transition:.25s;pointer-events:none}.race-stop i{position:absolute;left:5px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;background:#d2a657}.race-stop b,.race-stop small{display:block}.race-stop b{font:700 11px 'STKaiti','KaiTi',serif}.race-stop small{font-size:7px;color:#8b744d}.race-stop.active{opacity:1;border-color:#fff1a6;box-shadow:0 0 0 3px #ffe49e45,0 0 25px #78ffdc99;animation:race-target 1s ease-in-out infinite}.race-stop.served{background:#fff0a7;filter:brightness(1.3);transform:translate(-50%,-50%) scale(1.14)}@keyframes race-target{50%{filter:brightness(1.22);box-shadow:0 0 0 7px #ffe9a51d,0 0 30px #7fffe09e}}
.race-boat{position:absolute;z-index:6;width:78px;height:50px;transform-origin:center;filter:drop-shadow(0 6px 4px #001c2dbb);pointer-events:none}.race-boat svg{width:100%;height:100%}.race-boat>i{position:absolute;z-index:2;right:2px;top:13px;font-style:normal;font-size:17px;opacity:0}.race-boat.loaded>i{opacity:1}.race-boat>em{position:absolute;left:2px;top:42%;width:20px;height:12px;border:2px solid #c8fff3;border-radius:50%;opacity:.5;animation:race-wake .8s infinite}.race-boat.boost{filter:drop-shadow(0 6px 4px #001c2dbb) drop-shadow(0 0 12px #7cffe4)}.race-boat.boost>em{width:40px;border-color:#fff0a0}.race-mover{position:absolute;z-index:5;transform:translate(-50%,-50%);font-size:34px;filter:drop-shadow(0 3px 3px #00223699);pointer-events:none}.race-ring{position:absolute;z-index:4;transform:translate(-50%,-50%);display:grid;place-items:center;width:43px;height:25px;border:3px solid #9bffe2;border-radius:50%;color:#fff19b;background:#22a6a65c;box-shadow:0 0 14px #81ffda;animation:race-ring 1s infinite alternate;pointer-events:none}.race-ring[hidden]{display:none}.race-ring::after{content:'';position:absolute;inset:-9px;border:1px solid #b1ffe38a;border-radius:50%}@keyframes race-wake{to{transform:translateX(-18px) scale(1.4);opacity:0}}@keyframes race-ring{to{transform:translate(-50%,-50%) scale(1.12)}}
.race-toast{position:absolute;z-index:9;left:50%;top:45%;transform:translate(-50%,-50%) scale(.8);padding:9px 18px;border-radius:22px;color:#fff3bd;background:#10726eea;border:1px solid #a9f3d8;font-weight:900;font-size:13px;opacity:0;pointer-events:none;white-space:nowrap}.race-toast.bad{background:#813e35eb;border-color:#ffc3a3}.race-toast.pop{animation:race-toast 1.15s}@keyframes race-toast{15%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}.race-steer-hint{position:absolute;z-index:5;left:50%;bottom:20px;transform:translateX(-50%);padding:7px 14px;border-radius:20px;color:#fff2c3;background:#043b54bd;font-size:11px;pointer-events:none;transition:.3s}.race-steer-hint span{font-size:17px}.race-steer-hint.off{opacity:0}.race-arena.shake{animation:race-shake .16s 2}@keyframes race-shake{50%{translate:5px 0}}
.race-footer{height:42px;display:flex;align-items:center;justify-content:center;gap:22px;color:#73562e;background:linear-gradient(#fff8e7,#ecd9b4);border-top:1px solid #c8a461}.race-footer strong{font:700 15px 'STKaiti','KaiTi',serif;letter-spacing:1px}.race-footer small{padding-left:22px;border-left:1px solid #b79a67;color:#8c744e}.race-intro,.race-result{position:absolute;z-index:10;left:50%;top:52%;transform:translate(-50%,-50%);width:450px;padding:22px;text-align:center;color:#ffedb9;background:#063650ee;border:1px solid #d4ab5b;border-radius:18px;box-shadow:0 15px 48px #001725c4}.race-intro>small,.race-result>small{font-size:9px;letter-spacing:3px}.race-intro h2,.race-result h2{font:700 29px 'STKaiti','KaiTi',serif;letter-spacing:3px;margin:11px 0}.race-intro p,.race-result p{white-space:pre-line;font-size:12px;line-height:1.8}.race-rules{display:flex;justify-content:center;gap:8px;margin-top:12px}.race-rules span{padding:5px 9px;border-radius:15px;color:#d5eee5;background:#0d536a;font-size:9px}.race-start{margin-top:16px;padding:11px 27px;border-radius:24px;color:#163b43;background:linear-gradient(#fff1b7,#d9b45d);box-shadow:0 3px 0 #8d6d34;font-weight:900}.race-start:focus-visible{outline:3px solid #96ebd6;outline-offset:3px}.race-result{top:49%;width:410px}.race-result h2{font-size:25px;margin:7px}.race-final-score{font:bold italic 52px Georgia,serif;color:#ffe08a;text-shadow:0 3px 0 #956a26}.race-result .race-start{margin-top:10px}@media(prefers-reduced-motion:reduce){.race-clock,.race-stop,.race-boat>em,.race-ring{animation:none!important}}

.welcome-modal{width:1000px;max-height:560px;border:2px solid #d1ad67;border-radius:24px;background:#062d45}.welcome-modal .mini-head{padding:9px 18px;border-bottom:1px solid #b9914d;background:linear-gradient(#073b58,#052a41)}.welcome-modal .mini-title{color:#fff0c5;font:700 23px 'STKaiti','KaiTi',serif;letter-spacing:2px}.welcome-modal .hud-chip{color:#ffe7a8;background:#0b4663;border:1px solid #a4864e;box-shadow:none;font-size:12px}.welcome-modal .panel-close{color:#ffefc2;background:#0b4561;border:1px solid #a58449;box-shadow:none}.welcome-body{padding:0;overflow:hidden;display:block;flex:none}.welcome-arena{position:relative;width:100%;height:420px;overflow:hidden;touch-action:none;background:#075477;outline-offset:-4px}.welcome-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.welcome-water-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 52% 55%,#2bc5d319,transparent 36%),linear-gradient(transparent 65%,#032a3d45);pointer-events:none}.welcome-route{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}.welcome-route path{fill:none;stroke-linecap:round;stroke-linejoin:round}.welcome-route-shadow{stroke:#063a4caa;stroke-width:9}.welcome-route-line{stroke:#fff0a8;stroke-width:4;stroke-dasharray:10 9;filter:drop-shadow(0 0 4px #77f7e5);animation:welcome-dash 1s linear infinite}@keyframes welcome-dash{to{stroke-dashoffset:-19}}
.welcome-boat{position:absolute;z-index:5;width:88px;height:60px;transform:translate(-50%,-50%);filter:drop-shadow(0 7px 5px #001e2f99);pointer-events:none;transition:filter .2s}.welcome-boat svg{width:100%;height:100%}.welcome-boat-gift{position:absolute;right:5px;top:18px;z-index:2;font-size:18px}.welcome-boat.moving{filter:drop-shadow(0 7px 5px #001e2f99) drop-shadow(0 0 9px #7ff7e0)}
.welcome-stop{position:absolute;z-index:4;width:112px;min-height:64px;transform:translate(-50%,-50%);padding:7px 7px 6px 38px;text-align:left;border-radius:12px;color:#644a2d;background:#fff7e8e8;border:1px solid #d4b677;box-shadow:0 5px 15px #001c2f66;pointer-events:none;opacity:.72;transition:.35s}.welcome-stop-pin{position:absolute;left:-13px;top:50%;width:45px;height:45px;display:grid;place-items:center;transform:translateY(-50%);border-radius:50% 50% 50% 8px;background:#927243;border:2px solid #ffe6a7;font-size:22px;box-shadow:0 0 0 4px #fff2bf28}.welcome-stop b,.welcome-stop small,.welcome-stop i{display:block}.welcome-stop b{font:700 13px 'STKaiti','KaiTi',serif}.welcome-stop small{font-size:10px;margin:2px 0}.welcome-stop i{font-style:normal;font-size:8px;color:#997c52}.welcome-stop.active{opacity:1;scale:1.06;border-color:#fff0a6;box-shadow:0 0 0 3px #ffe99f3b,0 0 25px #8dffe288}.welcome-stop.active .welcome-stop-pin{animation:welcome-pin 1.2s ease-in-out infinite}.welcome-stop.done{opacity:1;background:#fff4c9f2;border-color:#f2ce72}.welcome-stop.done .welcome-stop-pin{background:#2d8a78}.welcome-stop.flash{animation:welcome-flash .8s}.welcome-arena.complete .welcome-stop{box-shadow:0 0 24px #ffd877aa;background:#fff0b9f2}@keyframes welcome-pin{50%{transform:translateY(-57%);box-shadow:0 0 0 8px #fff2bf18}}@keyframes welcome-flash{50%{filter:brightness(1.6);transform:translate(-50%,-50%) scale(1.15)}}
.welcome-obstacle{position:absolute;z-index:3;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;filter:drop-shadow(0 3px 3px #00283d88)}.welcome-obstacle.kayak{font-size:38px}.welcome-obstacle.buoy{width:28px;height:28px;color:#ff765f;border:6px solid #fff;border-radius:50%;background:#ff765f;font-size:0}.welcome-obstacle.whirl{width:74px;height:42px;border-radius:50%;color:#c3f8f2;font-size:48px;line-height:34px;border:2px solid #b9f5ed88;box-shadow:inset 0 0 0 8px #d0fff51c;animation:welcome-whirl 2.6s linear infinite}@keyframes welcome-whirl{to{transform:translate(-50%,-50%) rotate(360deg)}}
.welcome-feedback{position:absolute;z-index:8;left:50%;top:48%;transform:translate(-50%,-50%) scale(.85);padding:9px 20px;border-radius:22px;color:#fff4c7;background:#126e6eea;border:1px solid #b8f4d8;font-size:13px;font-weight:900;opacity:0;transition:.2s;pointer-events:none;white-space:nowrap}.welcome-feedback.on{opacity:1;transform:translate(-50%,-50%) scale(1)}.welcome-feedback.bad{background:#7c4437eb;border-color:#ffc39e}.welcome-footer{height:42px;display:flex;align-items:center;justify-content:center;gap:22px;color:#775a32;background:linear-gradient(#fff8e8,#eddbb7);border-top:1px solid #c8a664}.welcome-footer strong{font:700 16px 'STKaiti','KaiTi',serif;letter-spacing:1px}.welcome-footer small{padding-left:22px;border-left:1px solid #b79a67;color:#8b744f}
.welcome-intro,.welcome-result{position:absolute;z-index:9;left:50%;top:52%;transform:translate(-50%,-50%);width:440px;padding:24px;text-align:center;color:#ffedbd;background:#063551ed;border:1px solid #d0aa61;border-radius:18px;box-shadow:0 15px 48px #001b2dbb}.welcome-intro small,.welcome-result small{font-size:10px;letter-spacing:3px}.welcome-intro h2,.welcome-result h2{font:700 29px 'STKaiti','KaiTi',serif;letter-spacing:3px;margin:13px 0}.welcome-intro p,.welcome-result p{white-space:pre-line;font-size:13px;line-height:1.9}.welcome-start{margin-top:17px;padding:11px 26px;border-radius:24px;color:#153c46;background:linear-gradient(#fff0b4,#d8b35c);box-shadow:0 3px 0 #8d6d35;font-weight:900}.welcome-start:focus-visible{outline:3px solid #96ebd6;outline-offset:3px}.welcome-result{top:48%;width:420px;padding:20px}.welcome-result h2{font-size:25px;margin:9px 0}.welcome-result .welcome-start{margin-top:11px}.welcome-arena [hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.welcome-route-line,.welcome-stop.active .welcome-stop-pin,.welcome-obstacle.whirl{animation:none!important}}