/* 心动同行跨页面公共视觉：设计坐标统一为 941 宽。 */
.common-scene { background:transparent !important; isolation:isolate; }
/* 所有活动子页始终预留同一条纵向滚动槽，避免长短页面切换时整体左右跳动。 */
html { min-height:var(--app-vh,100dvh); scrollbar-gutter:stable; }
body { min-height:var(--app-vh,100dvh); }
/* Chrome 设备模拟器会把桌面滚动条槽也算进手机宽度，造成画面右侧少约 15px。 */
@media (max-width:430px) { html { scrollbar-gutter:auto; } }

.common-background-layer { position:absolute; left:0; top:0; z-index:-1; width:941px; height:2460px; pointer-events:none; background:#10a5e9 url("backgrounds/beach-main-v2-opt.webp") center top / 941px 2460px no-repeat; }
.layout-editing .common-background-layer { pointer-events:auto; }

.common-title { left:174px !important; top:79px !important; width:592px !important; height:147px !important; object-fit:fill; }
.common-count-skin { left:236px !important; top:234px !important; width:471px !important; height:50px !important; }
.common-countdown { position:absolute; left:236px; top:234px; z-index:2; width:471px; height:50px; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; white-space:nowrap; font-size:28px; font-weight:900; letter-spacing:1px; text-shadow:0 2px 2px #c63161; }

.common-control { position:absolute; z-index:5; width:93px; height:91px; filter:drop-shadow(0 5px 5px rgba(23,88,151,.28)); transition:transform .12s; }
.common-control:active { transform:scale(.92); }
.common-control img { width:100%; height:100%; object-fit:contain; }
.common-back { left:31px !important; top:51px !important; }
.common-rules { left:817px !important; top:51px !important; }
.common-record { left:817px !important; top:153px !important; }
.common-control-label { position:absolute; left:0; right:0; bottom:8px; font-size:18px; font-weight:900; text-align:center; text-shadow:0 2px 2px #c13d65; }

/* 公共规则/记录弹窗：三个活动页面共用同一视觉与交互。 */
.common-modal { position:fixed; inset:0; z-index:1200; display:none; width:var(--app-vw,100vw); height:var(--app-vh,100dvh); place-items:center; padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px)); background:rgba(15,65,116,.5); backdrop-filter:blur(5px); }
.common-modal.open { display:grid; }
.common-modal .modal-card,.common-modal-card { width:min(360px,88vw); padding:26px; border:3px solid #fff; border-radius:26px; color:#2868a7; text-align:center; background:linear-gradient(#effcff,#cbedfd); box-shadow:0 16px 45px rgba(18,74,139,.3); }
.common-modal .modal-card h2,.common-modal-card h2 { margin:0 0 10px; color:#ed5684; }
.common-modal .modal-card p,.common-modal-card p { margin:0; line-height:1.65; }
.common-modal .modal-card button,.common-modal-card button { margin-top:14px; padding:9px 28px; border:0; border-radius:999px; color:#fff; font-weight:900; background:linear-gradient(#ff86aa,#ed4679); cursor:pointer; }

/* 规则、奖励记录：不用额外图片，完全由 CSS 与动态数据绘制。 */
.campaign-modal-overlay { overflow:auto; align-items:flex-start; }
.campaign-modal-card { position:relative; isolation:isolate; width:min(390px,calc(min(var(--app-vw,100vw),430px) - 24px),calc((var(--app-vh,100dvh) - 24px) * .59337)); height:auto; aspect-ratio:.59337; margin:auto; padding:138px 10.2% 58px; border:0; border-radius:0; color:#2867a6; background:url("modals/modal-shell.webp?v=ui-opt-1") center / 100% 100% no-repeat; box-shadow:none; }
.campaign-modal-card::before { content:""; position:absolute; z-index:-1; left:11%; right:11%; top:24%; bottom:13%; border-radius:19px; background:linear-gradient(180deg,rgba(248,253,255,.97),rgba(210,239,255,.9)); box-shadow:inset 0 2px 9px rgba(70,158,218,.28); }
.campaign-modal-title { position:absolute; top:63px; left:15%; right:15%; width:auto; max-width:none; margin:0; padding:0 10px; border-radius:0; color:#3986d8; font-size:20px; font-weight:900; line-height:34px; text-align:center; text-shadow:0 1px #fff; background:none; box-shadow:none; }
.campaign-modal-close { position:absolute; right:15px; top:75px; z-index:2; width:34px; height:34px; border:0; border-radius:50%; color:#fff; font-size:27px; font-weight:400; line-height:29px; background:transparent; box-shadow:none; cursor:pointer; }
.rules-modal-card { display:flex; flex-direction:column; }
.rule-list { display:grid; flex:1; min-height:0; gap:4px; overflow:auto; }
.rule-item { position:relative; display:grid; grid-template-columns:36px 48px minmax(0,1fr); gap:4px; align-items:center; min-height:57px; padding:4px 12px 4px 16px; border:0; border-radius:0; background:url("modals/rule-row.webp?v=ui-opt-1") center center / 100% auto no-repeat; box-shadow:none; }
.rule-number { align-self:center; display:grid; place-items:center; width:25px; height:25px; margin:0; border:0; border-radius:50%; color:#fff; font-size:14px; font-weight:900; background:transparent; box-shadow:none; }
.rule-icon,.record-icon { display:grid; place-items:center; filter:drop-shadow(0 2px 1px rgba(46,106,163,.15)); font-size:29px; line-height:1; }
.rule-item h3 { margin:0 0 1px; color:#2271bb; font-size:14px; line-height:1.12; }
.rule-item p { margin:0; color:#366b9f; font-size:10px; line-height:1.24; }
.records-modal-card { display:flex; flex-direction:column; padding:138px 10.2% 58px; }
.record-tabs { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0 7px -1px; }
.record-tabs button { min-height:38px; border:2px solid rgba(255,255,255,.9); border-bottom:0; border-radius:13px 13px 0 0; color:#4888c7; font-size:15px; font-weight:900; background:linear-gradient(#f5fcff,#d6efff); cursor:pointer; }
.record-tabs button.active { position:relative; z-index:1; color:#ed5d85; background:linear-gradient(#fff,#fff8fa); }
.record-note { margin:4px 10px 0; color:#6c8fb2; font-size:11px; text-align:center; }
.record-head,.record-row { display:grid; grid-template-columns:50px 44px minmax(0,1.25fr) minmax(44px,.9fr) 52px; align-items:center; column-gap:4px; }
.record-head { padding:8px 6px 5px; color:#5d8cb9; font-size:11px; font-weight:900; }
.record-head span:first-child { grid-column:1; }.record-head span:nth-child(2){grid-column:2 / 4;}.record-head span:nth-child(3){grid-column:4;}.record-head span:nth-child(4){grid-column:5;}
.record-list { --record-row-height:80px; display:grid; flex:1; min-height:0; align-content:start; grid-auto-rows:minmax(var(--record-row-height),max-content); gap:6px; max-height:none; overflow:auto; padding:0 1px; }
.record-row { box-sizing:border-box; min-height:var(--record-row-height); height:auto; overflow:hidden; padding:7px 6px; border:2px solid rgba(207,233,249,.96); border-radius:10px; background:linear-gradient(110deg,#fafdff,#e3f4ff); box-shadow:inset 0 1px 3px rgba(40,126,193,.1); }
.record-row > * { align-self:center; transform:none; }
.record-row time { display:grid; min-height:30px; align-content:center; color:#5483b2; font-size:clamp(10px,2.5vw,11px); line-height:1.3; text-align:center; }.record-row time span+span{color:#7598ba;}
.record-row .record-icon { display:grid; min-height:35px; place-items:center; font-size:35px; line-height:1; }.record-row strong { display:flex; min-width:0; min-height:28px; align-items:center; justify-content:center; overflow:visible; color:#e66686; font-size:clamp(12px,3vw,14px); line-height:1.3; text-align:center; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }.record-source { display:flex; min-width:0; min-height:28px; align-items:center; justify-content:center; overflow:visible; color:#487aac; font-size:clamp(10px,2.5vw,11px); line-height:1.3; text-align:center; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }.record-row em { display:grid; min-height:31px; min-width:0; place-items:center; overflow:hidden; padding:4px 3px; border-radius:999px; color:#fff; font-size:clamp(9px,2.4vw,10px); font-style:normal; font-weight:900; text-align:center; text-overflow:ellipsis; white-space:nowrap; background:linear-gradient(#93d694,#59ba6f); }.record-empty { margin:26px 0; color:#7397b9; text-align:center; }

/* 最终弹窗皮肤：规则为完整静态图；记录图写死标题/页签/表头，仅列表数据保持动态。 */
.rules-modal-card,.records-modal-card { width:min(390px,calc(min(var(--app-vw,100vw),430px) - 24px),calc((var(--app-vh,100dvh) - 24px) * .62935)); height:auto; aspect-ratio:.62935; padding:0; background-position:center; background-size:100% 100%; }

/* 奖励弹窗的内部仍是 880×1564 设计坐标，只在外层按可用高度整体缩放。 */
.result-modal { position:fixed !important; inset:0 !important; width:var(--app-vw,100vw); height:var(--app-vh,100dvh); overflow:hidden; padding:0 !important; place-items:initial !important; }
.result-fit-canvas { position:absolute; left:calc(50% - 440px); top:calc(50% - 782px); width:880px; height:1564px; margin:0; transform:scale(var(--reward-viewport-scale,1)); transform-origin:0 0; }
.rules-modal-card { background-image:url("modals/rules-static.webp?v=ui-opt-1"); }
.records-modal-card { overflow:hidden; background-image:url("modals/records-static.webp?v=ui-opt-1"); }
.rules-modal-card::before,.records-modal-card::before { display:none; }
.rules-modal-card .campaign-modal-title,.rules-modal-card .rule-list { display:none; }
.rules-modal-card .campaign-modal-close,.records-modal-card .campaign-modal-close { top:15%; right:3%; width:50px; height:50px; padding:0; border:0; border-radius:0; color:transparent; font-size:0; background:transparent; box-shadow:none; outline:0; opacity:0; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
.records-modal-card .campaign-modal-title,.records-modal-card .record-note,.records-modal-card .record-head { display:none; }
.records-modal-card .record-tabs { position:absolute; z-index:2; top:20%; left:9%; right:9%; height:10%; margin:0; opacity:0; }
.records-modal-card .record-tabs button { min-height:0; padding:0; border:0; background:transparent; }
.records-modal-card .record-list-viewport { position:absolute; z-index:1; top:35%; right:9%; bottom:10%; left:9%; overflow:hidden; contain:paint; }
.records-modal-card .record-list { --record-row-height:80px; position:absolute; inset:0; display:grid; grid-auto-rows:minmax(var(--record-row-height),max-content); align-content:start; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:0 1px; }
[data-modal-edit] { transform:translate(var(--modal-edit-x,0px),var(--modal-edit-y,0px)) scale(var(--modal-edit-sx,1),var(--modal-edit-sy,1)); transform-origin:center; }
.modal-layout-editor { position:fixed; z-index:1302; right:10px; bottom:calc(12px + env(safe-area-inset-bottom)); display:none; color:#245d97; font:13px/1.35 "PingFang SC","Microsoft YaHei",sans-serif; }.modal-layout-editor.visible{display:block}
.modal-layout-trigger,.modal-group-toggle{padding:9px 13px;border:0;border-radius:999px;color:#fff;font:inherit;font-weight:900;background:linear-gradient(#5abfff,#287bd4);box-shadow:0 5px 18px rgba(20,73,134,.35);cursor:pointer}.modal-group-toggle{position:fixed;right:78px;bottom:calc(12px + env(safe-area-inset-bottom));display:none;background:#557ba5}.modal-group-toggle.visible{display:block}.modal-group-toggle.active,.modal-group-panel.active{background:linear-gradient(#ff7ba3,#e64277)}
.modal-layout-panel{position:fixed;z-index:1302;right:10px;top:10px;display:none;width:min(290px,calc(100vw - 20px));max-height:calc(100vh - 20px);overflow:auto;padding:14px;border:2px solid #fff;border-radius:18px;color:#245d97;background:rgba(239,251,255,.97);box-shadow:0 12px 40px rgba(15,64,119,.35);font-size:13px}.modal-layout-panel.open{display:block}.modal-layout-panel h3{margin:0;color:#ed4f7f;font-size:17px}.modal-layout-panel label{display:block;margin:7px 0 3px;font-weight:800}.modal-layout-panel select,.modal-layout-panel input{width:100%;height:32px;padding:0 7px;border:1px solid #9bd3f3;border-radius:8px;color:#245d97;background:#fff;font:inherit}.modal-layout-panel button{min-height:34px;border:0;border-radius:9px;color:#fff;font-weight:900;background:#408fd8}.modal-layout-dragbar{display:flex;justify-content:space-between;margin:-6px -6px 8px;padding:7px 8px;border-radius:11px;cursor:grab;user-select:none;background:#d9f3ff}.modal-layout-dragbar:active{cursor:grabbing}.modal-layout-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px}.modal-layout-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.modal-layout-section{margin:11px 0 4px;color:#326c9f;font-weight:900}.modal-group-panel{width:100%;margin-top:10px}.modal-layout-lock{display:flex!important;align-items:center;gap:7px}.modal-layout-lock input{width:16px;height:16px}.modal-layout-nudge{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px}.modal-layout-panel p{margin:10px 0 0;color:#5d7895;line-height:1.45}.modal-layout-editing [data-modal-edit]{cursor:move;touch-action:none}.modal-layout-editing [data-modal-edit].modal-edit-selected{outline:3px dashed #ff2f83;outline-offset:2px}.modal-edit-selection{position:fixed;z-index:1301;display:none;border:1px solid #fff;pointer-events:none}.modal-edit-selection.visible{display:block}.modal-edit-resize{position:absolute;right:-10px;bottom:-10px;width:22px;height:22px;padding:0;border:3px solid #fff;border-radius:6px;pointer-events:auto;cursor:nwse-resize;background:#ff2f83}

/* 记录始终锁在白色内容内腔中滚动；编辑器只调整列表整体，不再允许单条记录破坏统一规格。 */
.modal-layout-editing .companion-picker-card,.modal-layout-editing .companion-picker-row { overflow:visible !important; }

/* 公共底部导航只在这里定义尺寸；它是随视口悬浮的公共层，而不是画布中的固定坐标。 */
.common-bottom-nav {
  position:fixed !important;
  /* 导航必须高于各页面自己的奖励、按钮等内容。 */
  z-index:100 !important;
  left:50% !important;
  top:auto !important;
  /* 修正缩放后的视觉底边，保证看见的导航离屏幕底部始终是同一距离。 */
  bottom:calc(10px + env(safe-area-inset-bottom, 0px) - var(--common-nav-scale-correction, 0px)) !important;
  display:block !important;
  box-sizing:border-box !important;
  width:851px !important;
  min-width:851px !important;
  max-width:851px !important;
  height:109px !important;
  min-height:109px !important;
  max-height:109px !important;
  overflow:visible !important;
  transform-origin:0 0;
}
.common-nav-frame {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  box-sizing:border-box !important;
  width:851px !important;
  min-width:851px !important;
  max-width:851px !important;
  height:109px !important;
  min-height:109px !important;
  max-height:109px !important;
  object-fit:fill !important;
}
.common-nav-item {
  position:absolute !important;
  top:12px !important;
  display:block !important;
  box-sizing:border-box !important;
  width:270px !important;
  min-width:270px !important;
  max-width:270px !important;
  height:85px !important;
  min-height:85px !important;
  max-height:85px !important;
  color:#fff;
  font-size:34px;
  font-weight:900;
  white-space:nowrap;
  text-decoration:none;
  text-shadow:0 3px 3px #3a75c0;
}
.common-nav-icon { position:absolute; top:6px; width:74px !important; height:74px !important; object-fit:contain; }
.common-nav-label { position:absolute; top:0; height:85px; display:grid; align-items:center; white-space:nowrap; }
.common-nav-adventure .common-nav-icon,.common-nav-ranking .common-nav-icon { left:43px; }
.common-nav-adventure .common-nav-label,.common-nav-ranking .common-nav-label { left:125px; }
.common-nav-lottery .common-nav-icon { left:26px; }
.common-nav-lottery .common-nav-label { left:108px; }
.common-nav-adventure { left:8px !important; }
.common-nav-lottery { left:291px !important; }
.common-nav-ranking { left:574px !important; }