/* ============================================================================
 * KK game · 启动器样式（游戏选择页）
 * 风格：深色木台面 + 暖光，木牌招牌，游戏像"卡带盒"一样摆在架子上
 * 布局：手机竖屏单列、宽屏自动两列；整页有最大宽度，不会在桌面上被拉散
 * ==========================================================================*/

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: #14110d;
  color: #f4e9d6;
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 木纹台面 + 顶部一盏暖光 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 62% at 50% -12%, rgba(255, 179, 71, .16), rgba(255, 179, 71, 0) 64%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .17) 0 3px, rgba(255, 255, 255, 0) 3px 7px),
    linear-gradient(180deg, #1c1710 0%, #12100b 58%, #0a0806 100%);
}

.wrap {
  position: relative;
  z-index: 1;
  min-height: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding:
    max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* -------------------------------- 招牌 -------------------------------- */

/* 招牌与卡片作为一组整体居中（上下留白均分），页脚钉在底部。
   内容比屏幕高时这些 auto 会自动收成 0，不会把顶部顶出可视区。 */
.brand { text-align: center; padding: 6px 0 0; margin-top: auto; }

.plaque {
  position: relative;
  display: inline-block;
  padding: 13px 30px;
  border-radius: 15px;
  background: linear-gradient(180deg, #6f4d26 0%, #583a1a 52%, #432a10 100%);
  border: 1px solid #8f6a37;
  box-shadow:
    0 6px 0 #2a1908,
    0 12px 30px rgba(0, 0, 0, .58),
    inset 0 1px 0 rgba(255, 228, 176, .3);
}

/* 木牌四角的铆钉 */
.plaque::before,
.plaque::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #f0dcb6, #6d5636);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  top: 9px;
}
.plaque::before { left: 10px; }
.plaque::after { right: 10px; }

.logo {
  display: block;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fff6e6;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 0 22px rgba(255, 196, 107, .35);
}
.logo em {
  font-style: normal;
  color: #ffc46b;
  letter-spacing: 2px;
}

.tagline {
  margin-top: 11px;
  font-size: 13px;
  letter-spacing: 3px;
  color: #a4917a;
}

/* -------------------------------- 卡片架 -------------------------------- */

.shelf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid rgba(255, 220, 170, .14);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #241d16 0%, #1a1510 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 180, .12),
    0 10px 26px rgba(0, 0, 0, .5);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 220, 170, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 180, .16),
    0 16px 34px rgba(0, 0, 0, .56),
    0 0 24px -6px var(--ac, #ffc46b);
}
.card:active { transform: scale(.985); }
.card:focus-visible { outline: 2px solid var(--ac, #ffc46b); outline-offset: 3px; }

/* 封面 */
.shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  background: #0b0a08;
  overflow: hidden;
}
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 封面底部压一层暗角，让下面的信息栏过渡自然 */
.shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46px;
  background: linear-gradient(180deg, rgba(26, 21, 16, 0), rgba(26, 21, 16, .92));
  pointer-events: none;
}

.no {
  position: absolute;
  left: 11px;
  top: 11px;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .46);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 信息栏 */
.meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px 15px;
}
.meta .txt { flex: 1; min-width: 0; }
.meta .nm {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fdf3e2;
}
.meta .ds {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: #b6a189;
}

.play {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ac, #ffc46b);
  box-shadow: 0 5px 16px -4px var(--ac, #ffc46b);
}
.play svg { display: block; margin-left: 2px; }

/* 空状态 */
.empty {
  padding: 46px 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: #8d7c66;
  border: 1px dashed rgba(255, 220, 170, .2);
  border-radius: 18px;
}

/* -------------------------------- 页脚 -------------------------------- */

.foot {
  margin-top: auto;
  padding: 10px 0 4px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .5px;
  color: #8d7c69;
}
.foot .dot { margin: 0 7px; opacity: .55; }

/* -------------------------------- 响应式 -------------------------------- */

/* 宽屏 / 平板：两张卡片并排 */
@media (min-width: 620px) {
  .shelf { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* 矮屏：收紧间距，保证两张卡片能同时看见大半 */
@media (max-height: 700px) {
  .wrap { gap: 13px; }
  .shelf { gap: 12px; }
  .plaque { padding: 10px 24px; }
  .logo { font-size: 26px; }
  .tagline { margin-top: 8px; font-size: 12px; }
}

/* 首屏卡片逐个淡入。
   注意：刻意**不用** `.card{opacity:0}` + 动画的写法 —— 那样一旦动画没跑起来
   （引擎省电、动画被禁用等），卡片会永久隐身、整个启动器空屏。
   这里用 animation-fill-mode:both，元素的常态始终是"可见"，只在动画期间变透明。
   有"减少动态效果"偏好时会整块跳过。 */
@media (prefers-reduced-motion: no-preference) {
  .card { animation: kkIn .42s cubic-bezier(.2, .7, .3, 1) both; }
  .card:nth-child(1) { animation-delay: .03s; }
  .card:nth-child(2) { animation-delay: .10s; }
  .card:nth-child(3) { animation-delay: .17s; }
  .card:nth-child(4) { animation-delay: .24s; }
  .card:nth-child(5) { animation-delay: .31s; }
  @keyframes kkIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
}