/* 你儂我儂 — pastel clay romance UI */

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

html, body {
  height: 100%;
  overflow: hidden;
  background: #f7d9dd;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #6b4a52;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* touch-action 不寫在這裡: 有效值是祖先鏈的交集, html/body 寫 none 會連選單、過關卡
     一起鎖死, 手機橫向(844x390)放不下時捲不到底下的按鈕。none 只給畫布(#game)。 */
  overscroll-behavior: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---- HUD ---- */

#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
  z-index: 5;
}

#hud[hidden] { display: none; }

/* 右上角是園區那一排(收合時一顆 40px)。HUD 是排版容器, 所以讀收合寬度 --park-dock-rest-w,
   不讀展開寬度: 展開是點一下就收的覆蓋層, 對局列不該為它重排。沒掛園區時變數不存在, 退回原樣。 */
#hud { padding-right: calc(14px + var(--park-dock-rest-w, 0px) + 10px); }

.icon-btn {
  pointer-events: auto;
  width: 40px; height: 40px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 252, 250, 0.82);
  color: #b0596c;
  box-shadow: 0 2px 8px rgba(158, 90, 106, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn:active { transform: scale(0.93); }

#hudCenter {
  text-align: center;
  background: rgba(255, 252, 250, 0.82);
  border-radius: 16px;
  padding: 6px 18px;
  box-shadow: 0 2px 8px rgba(158, 90, 106, 0.18);
}

#hudLevel { font-size: 14px; font-weight: 700; letter-spacing: 1px; }
#hudHint  { font-size: 11px; color: #b0596c; margin-top: 1px; }

/* ---- toast ---- */

#toast {
  position: fixed;
  left: 50%;
  top: 26%;
  transform: translate(-50%, 0);
  background: rgba(107, 74, 82, 0.88);
  color: #fff6f4;
  font-size: 14px;
  letter-spacing: 2px;
  padding: 9px 20px;
  border-radius: 999px;
  z-index: 6;
  pointer-events: none;
  animation: toast-pop 1.1s ease forwards;
}

#toast[hidden] { display: none; }

@keyframes toast-pop {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.9); }
  15%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* ---- overlays ---- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: linear-gradient(180deg, rgba(250, 226, 221, 0.86), rgba(244, 205, 214, 0.92));
  backdrop-filter: blur(6px);
  overflow-y: auto;
  touch-action: pan-y;
}

.overlay[hidden] { display: none; }

/* 主選單裡分級標示是 .panel 的下一個兄弟。.overlay 是橫向 flex, 兩塊並排會把卡片擠成
   130px 寬(390px 手機實測)。窄螢幕改直排(桌機並排放得下, 直排反而把標示推到第一屏外); 上下用 margin:auto 置中而不是 justify-content,
   矮螢幕放不下時才能從頂端開始捲, 不會被裁掉。 */
/* 內容比螢幕高時(手機橫向 390px 實測)置中會把標題推到頂端之外、捲不回來。safe center: 放得下才置中,
   放不下就從頂端排、可捲。不支援 safe 的瀏覽器會丟掉這一行, 退回上一行的 center。 */
.overlay { align-items: safe center; }
@media (max-width: 720px) {
  #menu { flex-direction: column; justify-content: flex-start; overflow-y: auto; }
  #menu > .panel { margin-top: auto; flex: none; }
  #menu > .bnbRating { margin-bottom: auto; flex: none; }
}

.panel {
  width: min(360px, 100%);
  background: rgba(255, 252, 250, 0.94);
  border-radius: 28px;
  box-shadow: 0 14px 44px rgba(158, 90, 106, 0.28);
  padding: 26px 24px calc(24px + env(safe-area-inset-bottom));
  text-align: center;
}

#titleArt, #clearArt {
  width: 68%;
  max-width: 230px;
  border-radius: 22px;
  margin-bottom: 12px;
}

h1 {
  font-family: "Noto Serif TC", "PingFang TC", serif;
  font-size: 40px;
  letter-spacing: 8px;
  text-indent: 8px;
  color: #a04b5f;
  margin-bottom: 8px;
}

h2 {
  font-family: "Noto Serif TC", "PingFang TC", serif;
  font-size: 26px;
  letter-spacing: 5px;
  color: #a04b5f;
  margin-bottom: 6px;
}

.poem {
  font-family: "Noto Serif TC", "PingFang TC", serif;
  font-size: 14px;
  line-height: 1.7;
  color: #97646f;
  margin-bottom: 12px;
}

.howto {
  font-size: 13px;
  line-height: 1.8;
  color: #6b4a52;
  margin-bottom: 16px;
}

#clearDesc {
  font-size: 14px;
  line-height: 1.7;
  color: #97646f;
  margin-bottom: 18px;
}

/* ---- level grid ---- */

#levelGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.lv-btn {
  aspect-ratio: 1;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #a04b5f;
  background: #fbe4e4;
  box-shadow: inset 0 -2px 0 rgba(160, 75, 95, 0.16);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lv-btn.selected {
  background: #e5647a;
  color: #fff6f4;
  box-shadow: 0 4px 12px rgba(229, 100, 122, 0.45);
}

.lv-btn.locked {
  background: #f3e7e5;
  color: #cbb2b4;
  cursor: default;
  box-shadow: none;
}

.lv-btn.done::after { content: ""; }

/* ---- buttons ---- */

.primary-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef7d90, #e5647a);
  color: #fff6f4;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 4px;
  text-indent: 4px;
  padding: 13px 40px;
  box-shadow: 0 8px 20px rgba(229, 100, 122, 0.45);
  cursor: pointer;
}

.primary-btn:active { transform: scale(0.96); }

.ghost-btn {
  border: 2px solid #e9b7bd;
  border-radius: 999px;
  background: transparent;
  color: #a04b5f;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 11px 26px;
  cursor: pointer;
}

.ghost-btn:active { transform: scale(0.96); }

.btn-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}