/* 积分场 · 选场页（仿参考截图版式：顶栏返回+玩法名 / 四张主题色底分卡 / 右下快速开始） */
.rooms {
  min-height: 100dvh; padding: 0 4vw 24px;
  background: linear-gradient(180deg, #2a3f8f 0%, #35507f 45%, #0a5940 100%);
  display: flex; flex-direction: column;
}

/* 顶栏 */
.rm-top { display: flex; align-items: center; gap: 12px; padding: 16px 0 8px; }
.rm-back {
  font-size: 30px; line-height: 1; padding: 2px 14px 6px; cursor: pointer;
  color: #fff; background: linear-gradient(180deg, #4fc3f7, #2a7fd4);
  clip-path: polygon(0 50%, 34% 0, 100% 0, 100% 100%, 34% 100%);
  border-radius: 4px;
}
.rm-name { font-size: 22px; letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.rm-tag {
  font-size: 12px; color: #ffe9b0; border: 1px solid rgba(255, 233, 176, 0.7);
  padding: 1px 10px; border-radius: 999px; letter-spacing: 2px;
}

/* 四张场次卡：宽屏一行四张，窄屏 2×2 */
.rm-grid {
  flex: 1; display: grid; gap: 2.2vw; align-content: center;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-aspect-ratio: 9/8) { .rm-grid { grid-template-columns: repeat(2, 1fr); } }

.rm-card {
  position: relative; cursor: pointer; user-select: none;
  border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  padding: 18px 8px 14px; text-align: center; color: #fff;
  transition: transform 0.08s;
}
.rm-card:active { transform: scale(0.96); }
.rm-card-name {
  font-size: 20px; font-weight: 900; letter-spacing: 3px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.rm-base { margin: 10px 0 16px; font-size: 46px; font-weight: 900; line-height: 1.1; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.28); }
.rm-base i {
  position: absolute; left: 10px; top: 58px; font-style: normal; font-size: 14px; font-weight: 400;
  opacity: 0.6; border: 1px solid currentColor; border-radius: 6px; padding: 0 4px;
}
.rm-foot { font-size: 13px; color: rgba(255, 255, 255, 0.88); }
/* 人机对战卡主打字：不显示场名和底分，只留「人机对战」（卡上无其他小字） */
.rm-hj { font-size: 34px; letter-spacing: 5px; margin: 40px 0; }

.r-beginner { background: linear-gradient(180deg, #43d9a3, #1ba876); }
.r-middle   { background: linear-gradient(180deg, #55b9f3, #2a7fd4); }
.r-senior   { background: linear-gradient(180deg, #b78af5, #7a4bd0); }
.r-master   { background: linear-gradient(180deg, #ffd66e, #e29a1f); color: #5a3d00; }
.r-master .rm-card-name, .r-master .rm-base { text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4); }
.r-master .rm-foot { color: rgba(90, 61, 0, 0.85); }
.r-beginner { border-color: #ffe9b0; box-shadow: 0 0 0 2px rgba(255, 214, 110, 0.8), 0 8px 22px rgba(0, 0, 0, 0.35); }

/* 底栏：提示 + 快速开始 */
.rm-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; }
.rm-tip { font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.rm-quick {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 0;
  font-size: 20px; padding: 10px 26px 8px; border-radius: 16px;
}
@media (max-aspect-ratio: 9/8) { .rm-bottom { flex-direction: column; align-items: stretch; text-align: center; } }