/* ============================================================
   四叶草的约定 —— 样式表
   配合 index.html 与 game.js 的 DOM 结构
   （game.js 会动态生成 .room-tile / .stat-row / .action-btn /
    .choice-btn 等，这里为它们准备好样式）
============================================================ */

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

:root {
  --pink:      #e5789f;
  --pink-soft: #f7d6e2;
  --ink:       #3a2f35;
  --paper:     #fdf6f0;
  --panel:     #ffffffee;
  --shadow:    0 8px 28px rgba(120, 70, 90, 0.18);
  --radius:    16px;
}

html, body {
  height: 100%;
}

body {
  font-family: "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 20% -10%, #ffe9f1 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 10%, #eaf3ff 0%, transparent 55%),
    var(--paper);
  min-height: 100%;
  overflow-x: hidden;
}

/* 通用隐藏类:game.js 靠增删 .hidden 来切换视图 */
.hidden { display: none !important; }

/* 铺满视口的一屏 */
.screen {
  min-height: 100vh;    /* 老浏览器兜底 */
  min-height: 100svh;   /* 手机:按"始终可见"的最小视口算高度,底部不被浏览器工具栏遮住 */
  display: flex;
  flex-direction: column;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ============================================================
   标题画面
============================================================ */
#title-screen {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.title-inner {
  background: var(--panel);
  padding: 48px 40px;
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
  max-width: 520px;
  width: 100%;
}

#game-title {
  font-size: 2.6rem;
  letter-spacing: 2px;
  color: var(--pink);
  text-shadow: 0 2px 0 #fff;
}

#game-subtitle {
  margin-top: 10px;
  font-size: 1.05rem;
  color: #8a7680;
}

.title-buttons {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.big-btn {
  width: 240px;
  padding: 14px 0;
  font-size: 1.1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #f58cb0, var(--pink));
  color: #fff;
  box-shadow: 0 6px 16px rgba(229, 120, 159, 0.4);
  transition: transform .12s ease, box-shadow .12s ease;
}
.big-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(229,120,159,.5); }
.big-btn:active { transform: translateY(0); }

.big-btn.ghost {
  background: #fff;
  color: var(--pink);
  border: 2px solid var(--pink-soft);
  box-shadow: none;
}

.title-hint {
  margin-top: 22px;
  font-size: .82rem;
  color: #b3a3ab;
}

/* ============================================================
   顶部状态栏 HUD
============================================================ */
.hud {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  padding-top: calc(12px + env(safe-area-inset-top));   /* 避开顶部刘海/状态栏 */
  background: var(--panel);
  box-shadow: 0 2px 12px rgba(120,70,90,.12);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}

.hud-left { min-width: 120px; }

.day-label {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pink);
}
.action-label {
  font-size: .82rem;
  color: #9a8890;
  margin-top: 2px;
}

/* 四项数值条 */
.stats-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 6px 22px;
  flex: 1;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
}
.stat-name { width: 34px; color: #6f5f66; flex-shrink: 0; }
.stat-track {
  flex: 1;
  height: 10px;
  background: #efe6ea;
  border-radius: 999px;
  overflow: hidden;
}
.stat-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width .4s ease;
}
.stat-val { width: 26px; text-align: right; color: #6f5f66; flex-shrink: 0; }

.menu-btn {
  font-size: 1.4rem;
  color: var(--pink);
  padding: 4px 10px;
  border-radius: 10px;
  margin-left: auto;
}
.menu-btn:hover { background: var(--pink-soft); }

/* ============================================================
   视图容器
============================================================ */
.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* ---------- 地图视图 ---------- */
.map-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 房间平面图:home_map.png 作背景，房间热区绝对定位其上。
   aspect-ratio 若与图片实际比例不符，可在此调整。 */
.location-grid {
  position: relative;
  width: min(880px, 96vw);
  aspect-ratio: 3 / 2;
  background: url("home_map.png") center / 100% 100% no-repeat;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 单个房间热区(game.js 生成 .room-tile，并按房间设置 grid-area 名) */
.room-tile {
  position: absolute;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
}

/* 女主角所在的房间抬高层级，避免下方名字被相邻房间盖住 */
.room-tile.her-here { z-index: 6; }

/* 女主角位置标记：一个粉色的点 + 下方她的名字 */
.her-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}
.her-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 4px rgba(229, 120, 159, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.her-label {
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: var(--pink);
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* --- 7 个房间在平面图上的位置(百分比，可自由微调以对齐 home_map.png) ---
   game.js 通过 tile.style.gridArea 写入下列名字，用属性选择器定位。 */
.room-tile[style*="myroom"] { left: 5%; top: 6%; width: 34.6%; height: 34%; }  /* 我的房间 */
.room-tile[style*="bath"] { left: 40.2%; top: 7%; width: 25%; height: 34%; }  /* 浴室 */
.room-tile[style*="hroom"] { left: 66%; top: 6%; width: 29%; height: 34%; }  /* 林晚晚的房间 */
.room-tile[style*="living"] { left: 34%; top: 43.5%; width: 30.4%; height: 36.3%; }  /* 客厅 */
.room-tile[style*="guest"] { left: 5%; top: 44%; width: 28.2%; height: 37%; }  /* 客卧 */
.room-tile[style*="kitchen"] { left: 65.6%; top: 54%; width: 29.3%; height: 26.9%; }  /* 厨房 */
.room-tile[style*="balcony"] { left: 64.3%; top: 81.8%; width: 31.4%; height: 13.1%; }  /* 阳台 */

/* ---------- 热区编辑模式(按 E 开启) ---------- */
.location-grid.edit-on {
  outline: 2px dashed rgba(229, 120, 159, 0.7);
  outline-offset: -2px;
}
.room-tile.editing {
  border: 2px solid rgba(229, 120, 159, 0.9);
  background: rgba(229, 120, 159, 0.18);
  touch-action: none;
}
.room-tile.editing.sel {
  border-color: #3a7bd5;
  background: rgba(58, 123, 213, 0.22);
  z-index: 30;
}
/* 热区左上角的名字 + 实时百分比数值 */
.edit-tag {
  position: absolute;
  left: 2px;
  top: 2px;
  font-size: 10px;
  line-height: 1.25;
  color: #fff;
  background: rgba(58, 47, 53, 0.82);
  padding: 2px 5px;
  border-radius: 5px;
  pointer-events: none;
  white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
/* 右下角缩放手柄(蓝点) */
.edit-resize {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: #3a7bd5;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: nwse-resize;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  touch-action: none;
}

/* 编辑模式的侧边面板 */
.edit-panel {
  position: fixed;
  top: 70px;
  right: 16px;
  width: 260px;
  max-height: 78vh;
  overflow: auto;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #f0d6e0;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(120, 70, 90, 0.28);
  z-index: 90;
  padding: 14px;
  font-size: 12px;
}
.edit-panel h3 { font-size: 13px; color: var(--pink); margin-bottom: 8px; }
.edit-panel .ep-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed #f0e0e8;
}
.edit-panel .ep-name { color: #6f5f66; }
.edit-panel .ep-row.active .ep-name { color: var(--pink); font-weight: 700; }
.edit-panel .ep-val { color: #3a7bd5; font-family: ui-monospace, Menlo, Consolas, monospace; }
.edit-panel .ep-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.edit-panel button {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: var(--pink);
  color: #fff;
}
.edit-panel button.ghost {
  background: #fff;
  color: var(--pink);
  border: 1px solid var(--pink-soft);
}
.edit-panel .ep-hint { color: #a99aa1; margin-top: 10px; line-height: 1.5; }

/* 导出 CSS 的弹框 */
.css-box-mask {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(30, 20, 26, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.css-box {
  width: min(680px, 94vw);
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.css-box h3 { color: var(--pink); margin-bottom: 10px; font-size: 1rem; }
.css-box textarea {
  width: 100%;
  height: 240px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px;
  border: 1px solid #f0d6e0;
  border-radius: 10px;
  resize: vertical;
}
.css-box .cb-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.css-box .cb-btns button { padding: 9px 18px; border-radius: 999px; font-weight: 700; }
.css-box .cb-copy { background: var(--pink); color: #fff; }
.css-box .cb-close { background: #fff; color: var(--pink); border: 2px solid var(--pink-soft); }

.home-footer {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);   /* 避开底部 home 指示条/安全区 */
}
.sleep-btn {
  padding: 12px 28px;
  font-size: 1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #7b93d6, #5a86c0);
  color: #fff;
  box-shadow: 0 6px 16px rgba(90,134,192,.4);
  transition: transform .12s ease;
}
.sleep-btn:hover { transform: translateY(-2px); }

/* ---------- 房间视图 ---------- */
#view-location {
  position: relative;
  align-items: center;
  justify-content: flex-end;   /* 文字面板靠底部 */
  padding: 0 0 calc(28px + env(safe-area-inset-bottom));   /* 底部留出安全区 */
  overflow: hidden;
}
/* 进入房间后显示的场景图片:横边(宽度)铺满整块区域，竖边居中，保持比例 */
.loc-img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
/* 林晚晚立绘的容器:站在房间中下方，底部对齐、水平居中，高度随屏幕 */
.loc-heroine-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 94%;
  z-index: 1;
  pointer-events: none;   /* 只有立绘和按钮本身可点 */
}
.loc-heroine {
  display: block;
  height: 100%;
  width: auto;
  pointer-events: none;   /* 立绘只用于显示,点击交给下方的交谈热点区 */
}
/* 交谈热点区:盖在林晚晚身上的一块透明可点区域,点它才弹出交谈按钮;
   立绘周围的空白处则用来显隐标题面板,所以热点区不做满屏 */
.talk-hotspot {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  width: min(300px, 50%);
  height: 66%;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
/* 点击立绘后，在她旁边(右上方)弹出的交谈按钮/提示 */
.talk-pop {
  position: absolute;
  top: 6%;
  left: 68%;
  z-index: 3;
  white-space: nowrap;
  pointer-events: auto;
}
.talk-btn {
  padding: 10px 18px;
  font-size: 1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #f58cb0, var(--pink));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(229, 120, 159, 0.5);
  animation: talkpop .18s ease;
}
.talk-btn:hover { transform: translateY(-1px); }
.talk-note {
  padding: 8px 14px;
  font-size: .9rem;
  border-radius: 999px;
  background: rgba(58, 47, 53, 0.9);
  color: #fff;
  animation: talkpop .18s ease;
}
@keyframes talkpop {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}
/* 房间里的文字与操作:浮在图片上方、靠底部的半透明面板 */
.room-panel {
  position: relative;
  z-index: 2;
  width: min(520px, 90vw);
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: opacity .2s ease, transform .2s ease;
}
/* 点空白处隐藏标题面板(再点一下恢复) */
.room-panel.panel-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
/* 就地交谈的对话框:浮在房间底部,半透明,不切换画面 */
.room-talk {
  position: absolute;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 5;
  width: min(760px, 92%);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.loc-title {
  font-size: 1.2rem;
  color: var(--pink);
  margin-bottom: 6px;
}
.loc-desc {
  color: #8a7680;
  margin-bottom: 22px;
  line-height: 1.6;
}
.loc-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.action-btn {
  padding: 14px 18px;
  font-size: 1rem;
  border-radius: 12px;
  text-align: left;
  background: #fff;
  border: 2px solid var(--pink-soft);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(229,120,159,.25);
}
.action-btn.talk  { border-color: #bfe0bf; }
.action-btn.talk:hover  { background: #f2fbf2; }
.action-btn.event {
  border-color: var(--pink);
  background: linear-gradient(180deg, #fff, #fff4f8);
  font-weight: 700;
}
.action-note {
  padding: 12px 16px;
  font-size: .9rem;
  color: #a99aa1;
  background: #faf3f6;
  border-radius: 10px;
}

.back-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid var(--pink-soft);
  color: var(--pink);
  background: #fff;
}
.back-btn:hover { background: var(--pink-soft); }

/* ============================================================
   播放层(视频 / 立绘 / 对白 / 选项)
============================================================ */
.seq-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #0b0710;   /* 图片竖向留白/视频黑边处的底色 */
  overflow: hidden;
}

.stage {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-video {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  background: #000;
}
.scene-image {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
}
.scene-poster {
  font-size: 6rem;
  width: min(420px, 80vw);
  height: min(420px, 46vh);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: radial-gradient(circle at 50% 40%, #6a4a5a, #2c1e26);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  padding: 20px;
  line-height: 1.4;
  cursor: pointer;
}

.skip-btn {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top));
  right: 22px;
  z-index: 3;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: .9rem;
  backdrop-filter: blur(4px);
}
.skip-btn:hover { background: rgba(255,255,255,.3); }

.dialog-box {
  position: absolute;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2;
  width: min(900px, 96vw);
  background: rgba(255, 255, 255, 0.5);   /* 半透明 */
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow);
  transition: opacity .2s ease, transform .2s ease;
}
/* 点空白处收起对白框(再点一下恢复) */
.dialog-box.dialog-collapsed {
  opacity: 0;
  transform: translateX(-50%) translateY(14px);
  pointer-events: none;
}
/* ---------- 18+ 年龄确认门 ---------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* 盖住一切(含播放层/编辑面板) */
  background: rgba(20, 14, 18, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
}
.age-gate.hidden { display: none; }
.age-card {
  width: min(460px, 92vw);
  background: #fff;
  border-radius: 18px;
  padding: 28px 26px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.age-title { font-size: 1.3rem; font-weight: 800; color: var(--pink); margin-bottom: 14px; }
.age-desc { color: #6f5f66; line-height: 1.7; margin-bottom: 22px; }
.age-btns { display: flex; flex-direction: column; gap: 12px; }
.age-yes {
  padding: 14px 18px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(180deg, #f58cb0, var(--pink));
  color: #fff;
  box-shadow: 0 6px 16px rgba(229, 120, 159, 0.5);
}
.age-yes:hover { transform: translateY(-1px); }
.age-no {
  padding: 12px 18px;
  border-radius: 999px;
  font-size: .95rem;
  background: #fff;
  color: #a99aa1;
  border: 1px solid #e6d6de;
}
.speaker {
  display: inline-block;
  font-weight: 700;
  color: var(--pink);
  background: var(--pink-soft);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.dialog-text {
  font-size: 1.08rem;
  line-height: 1.8;
  white-space: pre-wrap;   /* story.js 里的 \n 换行能生效 */
  min-height: 2em;
}
.choices {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choice-btn {
  padding: 13px 18px;
  font-size: 1rem;
  text-align: left;
  border-radius: 12px;
  background: #fff;
  border: 2px solid var(--pink-soft);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.choice-btn:hover {
  transform: translateY(-2px);
  background: #fff4f8;
  box-shadow: 0 6px 16px rgba(229,120,159,.25);
}

/* ============================================================
   顶部提示条 toast
============================================================ */
.toast {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  background: rgba(58, 47, 53, 0.94);
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: .95rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 80;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   窄屏适配
============================================================ */
@media (max-width: 620px) {
  .hud { gap: 10px; }
  .stats-bars { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  #game-title { font-size: 2rem; }
}