/* 奶蛙幸存者 —— v0.5 主界面
 * 直接使用 menu-bg.png 作为 3:2 原画：中间保持原图，四周用同一张图模糊补满。
 * 图上所有文字/按钮都按原画百分比定位，缩放时不会跑位。
 * 开始按钮使用 start-btn.webp（上半=普通，下半=悬停高亮）。
 */

/* ---------------- 外框与舞台 ---------------- */
#start.menu-screen {
  z-index: 20;
  padding: 0;
  overflow: hidden;
  background: #07100c;
}

.menu-fill {
  position: absolute;
  inset: -7%;
  z-index: 0;
  width: 114%;
  height: 114%;
  object-fit: cover;
  filter: blur(28px) brightness(0.54) saturate(0.9);
  transform: scale(1.04);
  pointer-events: none;
}

.menu-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(125% 105% at 50% 48%, transparent 54%, rgba(3, 8, 6, 0.62) 100%),
    linear-gradient(180deg, rgba(4, 10, 8, 0.32), transparent 18% 82%, rgba(4, 10, 8, 0.42));
}

.menu-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(var(--stage-w, 100vw), calc(var(--stage-h, 100vh) * 1.5));
  height: min(var(--stage-h, 100vh), calc(var(--stage-w, 100vw) / 1.5));
  transform: translate(-50%, -50%);
  font-size: clamp(6px, min(calc(var(--stage-h, 100vh) * 0.022), calc(var(--stage-w, 100vw) * 0.0147)), 18px);
  line-height: 1.2;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
}

.menu-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

/* 竖屏用的墓碑特写裁切；横屏/伪横屏不显示 */
.menu-art-portrait { display: none; }

/* ---------------- 标题 ---------------- */
.brand {
  position: absolute;
  top: 3.2%;
  left: 3.4%;
  width: 45%;
  transform: rotate(-2deg);
  transform-origin: left top;
  color: #ffe9a8;
  pointer-events: none;
}

.brand-kicker {
  margin: 0 0 0.2em;
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #ffe9a8;
  opacity: 0.86;
  text-shadow: 0 1px 0 #2c4628, 0 0.2em 0.5em rgba(0, 0, 0, 0.45);
}

.brand-title {
  margin: 0;
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "楷体", "Noto Serif SC", serif;
  font-size: 3.2em;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.04em;
  color: #ffe9a8;
  text-shadow:
    0 0.08em 0 #2c4628, 0.08em 0 0 #2c4628, -0.08em 0 0 #2c4628, 0 -0.08em 0 #2c4628,
    0.06em 0.06em 0 #2c4628, -0.06em 0.06em 0 #2c4628, 0.06em -0.06em 0 #2c4628, -0.06em -0.06em 0 #2c4628,
    0 0.3em 0.55em rgba(0, 0, 0, 0.5);
}

.brand-sub {
  margin: 0.4em 0 0;
  font-size: 0.92em;
  font-weight: 600;
  color: #fff6d8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 0.6em rgba(0, 0, 0, 0.35);
}

/* ---------------- 标题下的最高记录 ---------------- */
.best {
  position: absolute;
  top: 17.2%;
  left: 3.4%;
  width: 34%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "label time"
    "meta meta";
  align-items: center;
  column-gap: 0.6em;
  padding: 0.42em 0.72em 0.48em;
  text-align: left;
  color: #ffe9a8;
  background: linear-gradient(180deg, rgba(20, 26, 23, 0.5), rgba(10, 15, 12, 0.4));
  border: 1px solid rgba(255, 233, 168, 0.24);
  border-radius: 0.85em;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

.best-label {
  grid-area: label;
  margin: 0;
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #cbbf9a;
  white-space: nowrap;
}

.best-time {
  grid-area: time;
  margin: 0;
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "楷体", "Noto Serif SC", serif;
  font-size: 2.7em;
  font-weight: 900;
  line-height: 1;
  color: #ffe9a8;
  white-space: nowrap;
  text-shadow: 0 0.05em 0 rgba(0, 0, 0, 0.55), 0 0 0.3em rgba(0, 0, 0, 0.35);
}

.best-time.is-empty {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 2.05em;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.best-meta {
  grid-area: meta;
  margin: 0.12em 0 0;
  overflow: hidden;
  font-size: 0.72em;
  color: #d8d2bd;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------------- 开始冒险（图二素材） ---------------- */
.start-btn {
  position: absolute;
  top: 12%;
  left: 55%;
  z-index: 4;
  width: 31%;
  aspect-ratio: 331 / 146;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: url("start-btn.webp?v=2");
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 100% 200%;
  filter: drop-shadow(0 0.55em 0.85em rgba(0, 0, 0, 0.45));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.16s, transform 0.12s;
}
.start-btn:active {
  background-position: 50% 100%;
  transform: translateY(0.14em) scale(0.995);
}
.start-btn:focus-visible {
  background-position: 50% 100%;
  outline: 0.18em solid #ffe9a8;
  outline-offset: 0.2em;
}

@media (hover: hover) {
  .start-btn:hover {
    background-position: 50% 100%;
    filter: drop-shadow(0 0.75em 1.05em rgba(0, 0, 0, 0.55)) brightness(1.03);
  }
}

/* ---------------- 图里三个石钮的透明热区 ---------------- */
.hotspot {
  position: absolute;
  z-index: 5;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 48%;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.hotspot:hover,
.hotspot:focus-visible {
  outline: none;
  background: radial-gradient(ellipse at center, rgba(255, 248, 210, 0.3), rgba(255, 248, 210, 0) 70%);
  box-shadow: 0 0 2.2em rgba(255, 240, 180, 0.28);
}
.spot-options { top: 79%; left: 70.2%; width: 10%; height: 14.5%; }
.spot-help { top: 83.5%; left: 80.4%; width: 9%; height: 13%; }
.spot-exit { top: 82%; left: 89.6%; width: 9.4%; height: 13.5%; }

/* ---------------- 版本号 ---------------- */
.menu-screen .ver {
  position: absolute;
  bottom: 2.2%;
  left: 2.4%;
  z-index: 3;
  margin: 0;
  font-size: clamp(7px, calc(var(--stage-h, 100vh) * 0.018), 12px);
  letter-spacing: 0.04em;
  color: rgba(255, 245, 215, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ---------------- 石头弹窗（选项 / 帮助 / 退出） ---------------- */
.panel.stone-panel {
  width: min(430px, 92%);
  max-height: 92%;
  color: #2b3138;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.35), transparent 52%),
    radial-gradient(90% 70% at 82% 100%, rgba(0, 0, 0, 0.18), transparent 62%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 10px),
    linear-gradient(165deg, #b4bac1 0%, #939ba5 48%, #7b838e 100%);
  border: 3px solid #555d67;
  border-radius: 24px 20px 22px 18px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -20px 40px rgba(0, 0, 0, 0.14),
    0 24px 60px rgba(0, 0, 0, 0.55);
}
.stone-panel h1 {
  color: #2b3138;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.stone-panel .info { color: #333a42; }
.stone-panel .hint { color: #333a42; }
.stone-panel .hint li::before { color: #58616c; }
.stone-panel .hint-big b { color: #243428; }
#hint .stone-panel .hint-big b { color: #243428; }
.stone-panel .dim { color: #555d67; }

#hint { z-index: 30; }
#settings,
#exit { z-index: 35; }

#settings .panel,
#exit .panel { text-align: left; }
#settings h1,
#exit h1 { text-align: center; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(43, 49, 56, 0.28);
}
.setting-label {
  font-size: 13px;
  font-weight: 700;
  color: #2f353c;
  white-space: nowrap;
}
.setting-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.setting-actions .stone-sm { flex: 1; }
.setting-tip {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #4a515a;
}

.stone-sm {
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #20252b;
  background: linear-gradient(180deg, #b6bcc3, #929aa4 62%, #7e8792);
  border: 2px solid #59616c;
  border-radius: 9px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 0 #4c545e;
  cursor: pointer;
  transition: filter 0.12s, transform 0.1s, box-shadow 0.1s;
}
.stone-sm:hover { filter: brightness(1.09); }
.stone-sm:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #4c545e;
}
.stone-sm:focus-visible { outline: 2px solid #ffe9a8; outline-offset: 2px; }

.hint-ok { width: 100%; margin-top: 14px; }
.setting-tip:empty { display: none; }

/* 选项里的显示模式小石头 */
#settings .modes {
  display: flex;
  gap: 6px;
  margin: 0;
}
#settings .mode {
  flex: 0 1 auto;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #2a3037;
  background: linear-gradient(180deg, #b6bcc3, #8d96a0);
  border: 2px solid #5a626d;
  border-radius: 8px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28);
  cursor: pointer;
}
#settings .mode.sel {
  color: #243a22;
  background: linear-gradient(180deg, #dbe8bd, #b9d18d);
  border-color: #4c7148;
}
#settings .fliptoggle {
  display: none;
  width: 100%;
  margin-top: 10px;
  padding: 8px 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #2a3037;
  background: linear-gradient(180deg, #b6bcc3, #8d96a0);
  border: 2px dashed #5a626d;
  border-radius: 9px;
  cursor: pointer;
}
body:not(.portrait-host) #modeRow,
body:not(.portrait-host) .setting-tip { display: none; }

/* ---------------- 小屏收紧 ---------------- */
body.fake-landscape .brand-kicker,
body.fake-landscape .ver { display: none; }

@media (max-height: 460px) {
  .brand-kicker,
  .ver { display: none; }
}

/* 竖屏但没开伪横屏：换用墓碑特写裁切，按钮放大到手指好点 */
@media (orientation: portrait) {
  body:not(.fake-landscape) .menu-art { display: none; }
  body:not(.fake-landscape) .menu-art-portrait { display: block; }
  body:not(.fake-landscape) .menu-stage {
    width: min(var(--stage-w), calc(var(--stage-h) * 0.78333));
    height: min(var(--stage-h), calc(var(--stage-w) / 0.78333));
    font-size: clamp(9px, calc(var(--stage-w) * 0.025), 16px);
  }
  body:not(.fake-landscape) .brand {
    top: 1.2%;
    left: 50%;
    width: 92%;
    transform: translateX(-50%) rotate(-1.5deg);
    text-align: center;
  }
  body:not(.fake-landscape) .brand-kicker,
  body:not(.fake-landscape) .brand-sub { display: none; }
  body:not(.fake-landscape) .brand-title { font-size: 3.2em; }
  body:not(.fake-landscape) .best {
    top: 9.2%;
    left: 50%;
    width: 78%;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 0.8em;
    padding: 0.4em 0.7em 0.46em;
    text-align: center;
    transform: translateX(-50%);
  }
  body:not(.fake-landscape) .best-time { font-size: 2.7em; }
  body:not(.fake-landscape) .best-meta { font-size: 0.74em; }
  body:not(.fake-landscape) .start-btn {
    top: 27.2%;
    left: 23.4%;
    width: 57.5%;
  }
  body:not(.fake-landscape) .spot-options { top: 79%; left: 43%; width: 19%; height: 14.5%; }
  body:not(.fake-landscape) .spot-help { top: 83.5%; left: 60.6%; width: 18.2%; height: 13%; }
  body:not(.fake-landscape) .spot-exit { top: 82%; left: 79.2%; width: 16.2%; height: 13.5%; }
}

.boot-error {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 6;
  width: min(420px, 86%);
  margin: 0;
  padding: 12px 14px;
  transform: translateX(-50%);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: #ffe9a8;
  background: rgba(12, 17, 14, 0.86);
  border: 1px solid rgba(255, 233, 168, 0.35);
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .start-btn,
  .hotspot,
  .stone-sm { transition: none; }
}