+
@@ -566,6 +642,11 @@ onBeforeUnmount(() => {
×{{ m.factor }}
+
发现存档
@@ -654,6 +735,11 @@ onBeforeUnmount(() => {
×{{ m.factor }}
+
邀请好友（{{ friendList.length }}）· 同一人 1 分钟内不可重复
@@ -775,7 +861,40 @@ onBeforeUnmount(() => {
💰{{ p.price }}
+
+
+
+
+
+
选择 Mod
+
+ 新开局时生效 · 已选 {{ selMods.length }} 个{{ modFactor !== 1 ? ` · 得分 ×${modFactor}` : '' }}
+
+
+
+
{{ selMods.includes(m.id) ? '✓' : '' }}
+
{{ m.name }}
+
{{ m.desc }}
+
+
+
+
+
+
+
+
+
🔒
@@ -1324,4 +1443,218 @@ onBeforeUnmount(() => {
font-size: 12px;
color: var(--text-dim, #9a9ac4);
}
+
+/* ---- Mod 改为卡片多选模态框：隐藏旧的平铺列表，触发按钮 + 卡片模态框 ---- */
+.mod-pick {
+ display: none;
+}
+.mod-trigger {
+ width: min(420px, 92%);
+ justify-content: center;
+ gap: 8px;
+}
+.mod-trigger-count {
+ font-size: 12px;
+ color: var(--primary-2);
+ font-weight: 700;
+}
+.mod-trigger-factor {
+ font-size: 12px;
+ font-weight: 700;
+ color: #67d18f;
+}
+.mod-trigger-factor.up {
+ color: #e0a63c;
+}
+.modal-mask {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.6);
+ backdrop-filter: blur(3px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 200;
+ padding: 20px;
+}
+.mod-modal {
+ position: relative;
+ width: min(680px, 100%);
+ max-height: 84vh;
+ overflow: auto;
+ padding: 20px 18px 18px;
+}
+.bm-close {
+ position: absolute;
+ top: 10px;
+ right: 12px;
+ border: 0;
+ background: transparent;
+ color: var(--text-dim);
+ font-size: 16px;
+ cursor: pointer;
+}
+.bm-close:hover {
+ color: var(--text);
+}
+.mod-card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 10px;
+ margin: 14px 0;
+}
+.mod-card {
+ position: relative;
+ background: var(--bg-card);
+ border: 1.5px solid var(--border);
+ border-radius: 12px;
+ padding: 12px;
+ cursor: pointer;
+ transition: all 0.15s;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+.mod-card:hover {
+ border-color: var(--primary);
+ transform: translateY(-2px);
+}
+.mod-card.on {
+ border-color: var(--accent);
+ box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
+ background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
+}
+.mod-card-check {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ width: 22px;
+ height: 22px;
+ border-radius: 50%;
+ border: 2px solid var(--border);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 13px;
+ font-weight: 800;
+ color: #fff;
+}
+.mod-card.on .mod-card-check {
+ background: var(--accent);
+ border-color: var(--accent);
+}
+.mod-card-name {
+ font-weight: 800;
+ font-size: 14px;
+ padding-right: 26px;
+}
+.mod-card-desc {
+ font-size: 12px;
+ color: var(--text-dim);
+ line-height: 1.5;
+}
+.mod-card-foot {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin-top: auto;
+}
+.mod-card-tag {
+ font-size: 11px;
+ padding: 2px 8px;
+ border-radius: 999px;
+ border: 1px solid var(--border);
+ color: var(--text-dim);
+}
+.mod-card-factor {
+ font-size: 11px;
+ font-weight: 700;
+ color: #67d18f;
+ margin-left: auto;
+}
+.mod-card-factor.up {
+ color: #e0a63c;
+}
+/* ---- 邀请好友移到右侧悬浮栏，不挤占中间 ---- */
+.friend-invite {
+ position: absolute;
+ right: 16px;
+ top: 16px;
+ bottom: 16px;
+ width: 260px;
+ max-height: none;
+ height: auto;
+ z-index: 6;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+@media (max-width: 900px) {
+ .friend-invite {
+ position: static;
+ width: min(440px, 96%);
+ height: auto;
+ max-height: 220px;
+ box-shadow: none;
+ }
+}
+.overlay.room {
+ padding-right: 280px;
+}
+@media (max-width: 900px) {
+ .overlay.room {
+ padding-right: 20px;
+ }
+}
+
+/* ---- 饥荒页内顶部信息条：悬浮小条，自动隐藏，鼠标靠近顶部展示 ---- */
+.play-head.play-head-float {
+ position: fixed;
+ top: 40px;
+ left: 12px;
+ right: 12px;
+ z-index: 149;
+ transition: transform 0.25s ease;
+ margin: 0;
+}
+.play-head.play-head-float.play-head-hidden {
+ transform: translateY(calc(-100% - 40px));
+}
+/* ---- 创建/加入房间入口：卡片式排版 ---- */
+.overlay.room-entry .room-entry-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 14px;
+ padding: 16px 18px;
+}
+.overlay.room-entry .ov-btns {
+ width: min(360px, 92%);
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 14px;
+ padding: 14px 16px;
+ justify-content: center;
+}
+.overlay.room-entry .ov-btns .btn-lg {
+ width: 100%;
+}
+.overlay.room-entry .join-row {
+ width: min(360px, 92%);
+ justify-content: center;
+}
+.overlay.room-entry .join-row {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ padding: 12px 14px;
+ gap: 10px;
+}
+.overlay.room-entry .join-input {
+ width: 180px;
+ height: 38px;
+}
+
+/* 选择组队（创建/加入）和房间面板：垂直居中，不要贴顶 */
+.overlay.room,
+.overlay.room-entry {
+ justify-content: center;
+}