/* ==========================================================================
   情侣小世界 v3 · 世界内 UI（提示条 / 互动弹窗 / 背包 / 场景栏）
   独立成文件，避免把 experience-next.css 继续撑大。
   ========================================================================== */

/* ---- 世界舞台：室内地图变宽了，把舞台也放宽一点 ---- */
.world-stage{max-width:min(100%,760px)}
.world-stage.world-wide{max-width:100%}
@media(min-width:900px){.world-stage{max-width:min(100%,880px)}}

/* ---- 小提示条：捡到东西 / 进门 / 喂猫，都走这里（比全局 toast 轻得多） ---- */
.world-toast{
  position:absolute;left:50%;top:10px;transform:translate(-50%,-6px);
  max-width:calc(100% - 130px);padding:5px 11px;border-radius:999px;
  background:rgba(38,30,52,.78);color:#fff6e4;font-size:12px;line-height:1.5;
  pointer-events:none;opacity:0;transition:opacity .18s ease,transform .18s ease;
  z-index:18;box-shadow:0 6px 18px rgba(40,26,60,.18);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.world-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- 互动弹窗（猫猫菜单 / NPC 对话 / 结算） ---- */
.world-pop-card p{white-space:pre-line}
/* v3.8：弹窗里的输入框（写给未来的信 / 明信片上的话） */
.world-pop-card .pop-input{margin:10px 0 2px}
.world-pop-card .pop-input input{
  width:100%;box-sizing:border-box;min-height:42px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(120,105,140,.28);background:#fffdf8;font-size:14px;font-family:inherit;color:#4a4358}
.world-pop-card .pop-input input:focus{outline:2px solid rgba(180,140,200,.45);outline-offset:1px}
/* 合影相册里的图 */
.world-pop-card .pop-shot{margin:10px 0 2px;text-align:center}
.world-pop-card .pop-shot img{width:100%;max-width:280px;image-rendering:pixelated;border-radius:12px;border:3px solid #fffdf8;box-shadow:0 4px 14px #29274b26;background:#efe7f5}
/* 画布下面那一行里的元气 / 爱心币 */
.world-hud .wb-stats{font-size:12px;color:#6d6480;background:#f2eef8;border-radius:999px;padding:5px 10px;white-space:nowrap;align-self:center}
.world-hud .wb-stats:empty{display:none}
.world-pop-card .chips{flex-wrap:wrap;gap:8px}
.world-pop-card .chips button{min-height:40px;padding:9px 14px;font-size:14px}
.pop-item{display:inline-flex;align-items:center;gap:6px}
.pop-item img{width:18px;height:18px;image-rendering:pixelated;flex:none}
.pop-note{margin:2px 0 12px;font-size:12px;color:var(--muted)}

/* ---- 画布左上：当前场景 ---- */
.world-here{
  position:absolute;left:10px;top:44px;padding:4px 10px;border-radius:999px;
  background:rgba(38,30,52,.55);color:#ffeccd;font-size:11px;line-height:1.6;
  pointer-events:none;z-index:15;
}

/* ---- 画布底部：主操作 + 背包 ---- */
.world-bar{
  position:absolute;left:0;right:0;bottom:10px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:10px;padding:0 12px;pointer-events:none;z-index:16;
}
.world-bar .wb-act{
  pointer-events:auto;min-height:46px;padding:11px 20px;border-radius:15px;font-size:15px;
  box-shadow:0 10px 26px rgba(60,44,90,.24);
}
.world-bar .wb-act:disabled{opacity:.45}
.wb-inv{pointer-events:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:64%}
.wb-inv .wb-title{font-size:11px;color:#ffeccd;background:rgba(38,30,52,.5);padding:3px 8px;border-radius:999px}
.wb-slot{
  display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:10px;
  background:rgba(255,253,248,.9);font-size:11px;color:#5d4a41;box-shadow:0 3px 10px rgba(60,44,90,.12);
}
.wb-slot img{width:16px;height:16px;image-rendering:pixelated;display:block}
.wb-slot b{font-weight:700}
.wb-empty{font-size:11px;color:#ffeccd;background:rgba(38,30,52,.5);padding:3px 8px;border-radius:999px}

/* ---- 场景栏：左边去哪儿，右边工具 ---- */
.world-scenes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.world-scenes button{min-height:38px;padding:8px 14px;border-radius:12px;font-size:13px;background:#eeecf8;color:var(--accent)}
.world-scenes button.here{background:var(--accent);color:#fff}
.world-tools{margin-top:10px;border-radius:16px;background:#fbfaf6;border:1px solid var(--line);padding:0 14px}
.world-tools>summary{cursor:pointer;padding:11px 0;font-size:13px;color:#6d6480;list-style:none}
.world-tools>summary::-webkit-details-marker{display:none}
.world-tools>summary:before{content:"⚙ "}
.world-tools .world-actions{margin:2px 0 14px}
.world-tools .world-v3-note{margin:0 0 14px;font-size:12px;color:var(--muted);line-height:1.8}

/* ---- 手机 ---- */
@media(max-width:600px){
  .world-toast{top:6px;max-width:calc(100% - 96px);font-size:11px;padding:4px 9px}
  .world-here{top:38px;left:8px;font-size:10px;padding:3px 8px}
  .world-bar{padding:0 8px;bottom:8px;gap:6px}
  .world-bar .wb-act{min-height:42px;padding:9px 15px;font-size:14px}
  .wb-inv{max-width:58%;gap:4px}
  .wb-slot{padding:2px 5px;font-size:10px;gap:2px}
  .wb-slot img{width:14px;height:14px}
  .world-pop-card{padding:16px;border-radius:18px}
  .world-pop-card .chips button{min-height:38px;padding:8px 12px;font-size:13px}
  .world-scenes button{min-height:36px;padding:7px 11px;font-size:12px}
}
/* 全屏（真全屏）时留出安全区 */
.world-stage:fullscreen .world-bar{bottom:max(10px,env(safe-area-inset-bottom))}
.world-stage:fullscreen .world-toast{top:max(8px,env(safe-area-inset-top))}


/* ==========================================================================
   v3.1：横屏 / 小屏适配
   之前画布是 width:100% + aspect-ratio:4/3，在 iPhone 横屏时宽度被撑满、
   高度按 4:3 算出来超过可视区，底部那一截（操作栏 / 背包）就被切掉了。
   现在：宽度和高度都受视口约束，另外给一个「铺满屏幕」开关。
   ========================================================================== */
/* v3.2：可用高度由 JS 用 visualViewport 量出来后写进 --world-max-h，
   这里优先用它；没有 JS 时退回 100dvh/100vh 的估算。 */
.world-card .pixel-canvas,
.world-stage .pixel-canvas{
  width:min(100%, calc((var(--world-max-h, calc(100dvh - 250px))) * 4 / 3));
  max-width:100%;
  height:auto;
  margin:0 auto;
}
/* 铺满模式：宽度拉满，高度由 4:3 决定（边缘可能被裁一点，换来更大的画面） */
.world-stage.world-fill .pixel-canvas{width:100%}

/* 小屏手机：上面那 300px 夸张了，收紧到 250px，让画面大一点 */
@media(max-width:700px){
  .world-card .pixel-canvas,
  .world-stage .pixel-canvas{width:min(100%, calc((var(--world-max-h, calc(100dvh - 220px))) * 4 / 3))}
  .world-stage.world-fill .pixel-canvas{width:100%}
}
/* 横屏手机：底部导航 + 顶部信息占掉很多高度，再收紧，并且把导航缩矮一点 */
@media(orientation:landscape) and (max-height:560px){
  .world-card .pixel-canvas,
  .world-stage .pixel-canvas{width:min(100%, calc((var(--world-max-h, calc(100dvh - 170px))) * 4 / 3))}
  .world-stage.world-fill .pixel-canvas{width:100%}
  .world-stage{border-radius:12px}
  main{padding-top:10px}
  .world-hero{margin:0 0 8px}
  .world-hero h1{font-size:22px!important}
  .world-hero p{display:none}
  .world-mode{display:none}
  .world-version{display:none}
  .world-tip{font-size:11px;padding:5px 10px}
  .world-badge{font-size:11px;padding:5px 10px}
  .world-here{display:none}
  .world-bar .wb-act{min-height:40px;padding:8px 14px;font-size:13px}
  .wb-fit{min-height:40px;padding:8px 12px;font-size:12px}
}

/* 「完整画面」按钮：只在需要的时候由 JS 显示 */
.wb-fit{
  pointer-events:auto;margin-left:8px;min-height:44px;padding:10px 14px;border-radius:14px;
  background:#fffdf8f0;color:#6b554b;border:1px solid rgba(255,255,255,.75);
  box-shadow:0 8px 20px rgba(60,44,90,.18);font-size:13px;font-weight:600;
}
.wb-fit[hidden]{display:none}
.world-bar{align-items:flex-end}


/* ==========================================================================
   v3.2：小游戏入口（浮动画布按钮 + 直通车）
   ========================================================================== */
.world-pad{
  position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:17;
  pointer-events:auto;min-height:46px;padding:11px 24px;border-radius:999px;
  font-size:16px;font-weight:800;letter-spacing:.5px;color:#5b3a2e;
  background:linear-gradient(135deg,#ffe08a,#ffc0c9);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 12px 30px rgba(60,44,90,.32);
  animation:worldPadPulse 1.8s ease-in-out infinite;
}
.world-pad[hidden]{display:none}
.world-pad.playing{background:linear-gradient(135deg,#ffd0d8,#f0a8b8);color:#5b2a3a;animation:none}
@keyframes worldPadPulse{
  0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 12px 30px rgba(60,44,90,.30)}
  50%{transform:translateX(-50%) scale(1.045);box-shadow:0 16px 36px rgba(60,44,90,.40)}
}
@media(prefers-reduced-motion:reduce){.world-pad{animation:none}}

.world-games{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:10px}
.world-games .wg-title{font-size:12px;color:var(--muted);width:100%;text-align:center;margin-bottom:2px}
.world-games button{min-height:38px;padding:8px 14px;border-radius:12px;font-size:13px}

@media(max-width:600px){
  .world-pad{bottom:52px;min-height:44px;padding:10px 20px;font-size:15px}
}
@media(orientation:landscape) and (max-height:560px){
  .world-pad{bottom:48px;min-height:40px;padding:8px 18px;font-size:14px}
}


/* ==========================================================================
   v3.3：真正铺满 —— 引擎分辨率跟着屏幕比例走，黑边彻底消失
   以前画布固定 4:3，竖屏手机上必然左右留黑边。现在：
     · 画布宽度铺满卡片，高度 = JS 用 visualViewport 量出来的可用高度；
     · 同时把引擎内部渲染分辨率改成同样的比例（竖屏 → 竖长条，横屏 → 宽屏）。
   ========================================================================== */
.world-card .pixel-canvas,
.world-stage .pixel-canvas{
  width:100% !important;
  height:auto;
  aspect-ratio:auto !important;
  margin:0;
}
.world-stage{max-width:100%}
.world-stage.world-fill{max-width:none;margin-left:0;margin-right:0;border-radius:0}
.world-stage.world-fill .pixel-canvas{width:100% !important;height:auto}

/* 玩的时候（小岛页）底部导航缩矮一点，把高度让给画面 */
body.world-page .nav{padding:5px;gap:4px;bottom:max(8px,env(safe-area-inset-bottom))}
body.world-page .nav button{padding:9px 13px;font-size:13px;border-radius:13px}
body.world-page main{padding-bottom:88px}
@media(orientation:landscape) and (max-height:560px){
  body.world-page .nav{padding:3px;bottom:max(4px,env(safe-area-inset-bottom))}
  body.world-page .nav button{padding:7px 10px;font-size:12px}
  body.world-page main{padding-bottom:64px;padding-top:8px}
}

/* 真全屏时：舞台和画布都 100%，一点不留 */
.world-stage:fullscreen{width:100vw;height:100vh;max-width:none;border-radius:0}
.world-stage:fullscreen .pixel-canvas{width:100% !important;height:100% !important}


/* ==========================================================================
   v3.4：画布尺寸的最终裁决（提高优先级，压过体验样式里的 4:3 规则）
   之前 experience-next.css 的 .pixel-canvas{aspect-ratio:4/3;height:auto}
   在级联里赢过这里，结果画布被压成一小块竖条（用户看到的"陆地加载不出来"）。
   ========================================================================== */
.world-card .world-stage .pixel-canvas,
.world-stage .pixel-canvas{
  width:100% !important;
  /* v4.0：高度不再 !important —— 交给 JS 写成「实测可用高度」px（fitWorldCanvas），
     否则 height:auto 会把画面压回画布属性的小尺寸（用户看到的“画面特别小”）。 */
  height:auto;
  aspect-ratio:auto !important;
  max-width:100% !important;
  max-height:none !important;
  margin:0 !important;
}
.world-card .world-stage{width:100%}
.world-card .world-stage.world-fill{width:100%;max-width:none;margin:0}
.world-stage.world-fill .pixel-canvas{height:auto}


/* ==========================================================================
   v3.6：控制条搬到画面之外
   画布里只留摇杆和右手按钮（外加必要的信息），
   操作按钮 / 背包 / 玩游戏全部放到画布下面这一条里，绝不遮挡游戏。
   ========================================================================== */
.world-hud{
  margin:12px auto 0;max-width:min(100%,760px);
  display:flex;flex-direction:column;gap:10px;
}
.world-hud .hud-row{
  display:flex;gap:10px;justify-content:center;align-items:stretch;flex-wrap:wrap;
}
.world-hud .hud-row button{
  flex:1 1 0;min-width:110px;min-height:52px;padding:12px 18px;border-radius:16px;
  font-size:16px;font-weight:700;
}
.world-hud .hud-row .world-pad{
  position:static;transform:none;animation:none;left:auto;bottom:auto;
  background:linear-gradient(135deg,#ffe08a,#ffc0c9);color:#5b3a2e;
  border:2px solid rgba(255,255,255,.85);
}
.world-hud .hud-row .world-pad.playing{background:linear-gradient(135deg,#ffd0d8,#f0a8b8);color:#5b2a3a}
.world-hud #worldFull{background:#eeecf8;color:var(--accent)}

/* 背包条：横排铺满，物品多的时候换行 */
.world-hud .wb-inv{
  max-width:none;width:100%;justify-content:center;gap:8px;
  background:#fffdf8;border:1px solid var(--line);border-radius:16px;padding:10px 12px;
  box-shadow:0 8px 20px rgba(60,44,90,.06);
}
.world-hud .wb-inv .wb-title{background:#f2eef8;color:#6d6480}
.world-hud .wb-slot{padding:5px 9px;font-size:13px;background:#f8f5ef;box-shadow:none}
.world-hud .wb-slot img{width:18px;height:18px}
.world-hud .wb-empty{background:#f8f5ef;color:#8a8296;font-size:13px;padding:8px 12px}

@media(max-width:600px){
  .world-hud{margin-top:10px;gap:8px}
  .world-hud .hud-row button{min-height:48px;font-size:15px;padding:10px 12px;min-width:96px}
  .world-hud .wb-inv{padding:8px 10px;gap:6px}
  .world-hud .wb-slot{font-size:12px;padding:4px 7px}
}


/* ==========================================================================
   v3.7：手机横屏"画面太小"的根治
   之前横屏时：大标题 + 说明 + 时钟 + 底部导航 吃掉了近 200px，
   JS 量出来的可用高度只剩 160px 左右 → 画面小得没法玩。
   现在：
     1) 玩小岛时（body.world-page）横屏隐藏页头、大标题、说明、时钟；
     2) 可用高度改用 100dvh（动态视口高度，随地址栏收放变化）；
     3) 底部导航改矮，并在横屏时半透明不抢视线。
   ========================================================================== */
@media(orientation:landscape) and (max-height:600px){
  body.world-page main{padding-top:6px;padding-bottom:64px}
  body.world-page .world-hero{display:none}
  body.world-page header .brand,
  body.world-page header small{display:none}
  body.world-page header{margin-bottom:4px;min-height:0}
  body.world-page .world-mode,
  body.world-page .world-version{display:none}
  body.world-page .world-hud{margin-top:6px;gap:6px}
  body.world-page .world-hud .hud-row button{min-height:42px;font-size:14px;padding:8px 12px}
  body.world-page .world-hud .wb-inv{padding:6px 8px;gap:5px;border-radius:12px}
  body.world-page .world-hud .wb-slot{font-size:11px;padding:3px 6px}
  body.world-page .world-hud .wb-slot img{width:15px;height:15px}
  body.world-page .world-hud .wb-stats{font-size:11px;padding:4px 8px}
  body.world-page .nav{
    padding:3px;gap:3px;bottom:max(3px,env(safe-area-inset-bottom));
    background:#fffef9d8;backdrop-filter:blur(14px);box-shadow:0 6px 26px #29274b1f;
  }
  body.world-page .nav button{padding:6px 9px;font-size:11px;border-radius:11px}
  body.world-page .world-scenes button{min-height:32px;padding:6px 10px;font-size:12px}
}

/* 背包条：无论横竖屏都完整显示、换行不丢东西 */
.world-hud .wb-inv{flex-wrap:wrap;overflow:visible}
.world-hud .wb-inv .wb-slot{white-space:nowrap}

/* ===== v3.9 界面精修：弹窗质感 / 按钮手感 / 状态条 ===== */
.world-pop-card{
  border-radius:18px;
  box-shadow:0 18px 48px rgba(41,39,75,0.28),0 2px 8px rgba(41,39,75,0.14);
  border:1px solid rgba(41,39,75,0.10);
  background:linear-gradient(180deg,#fffefb 0%,#fdf7ee 100%);
}
.world-pop-card h3{letter-spacing:0.02em}
.world-pop .chips button{
  border-radius:999px;
  padding:9px 15px;
  box-shadow:0 2px 6px rgba(41,39,75,0.10);
  transition:transform .12s ease,box-shadow .12s ease;
}
.world-pop .chips button:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(41,39,75,0.16)}
.world-pop .chips button:active{transform:translateY(0) scale(0.98)}
.world-hud .hud-row button{
  border-radius:999px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.world-hud .hud-row button:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(41,39,75,0.16)}
.world-hud .hud-row button:active{transform:scale(0.97)}
.world-hud .hud-row #worldAct{
  background:linear-gradient(180deg,#f6b04e 0%,#e98a3c 100%);
  color:#54300b;box-shadow:0 4px 12px rgba(233,138,60,0.35);font-weight:600;
}
.world-hud .wb-stats{
  border-radius:999px;
  background:rgba(41,39,75,0.07);
  padding:5px 12px;
  letter-spacing:0.02em;
}
.world-pop .pop-shot img{border-radius:12px;box-shadow:0 6px 18px rgba(41,39,75,0.18)}
.world-toast{
  border-radius:999px;
  box-shadow:0 8px 22px rgba(41,39,75,0.22);
}

/* ===== v4.0：世界卡片不许劫持 position:fixed =====
   .card 上的 backdrop-filter（以及 .fade 动画里的 transform）会让它成为
   fixed 子元素的包含块 —— 弹窗的 position:fixed;inset:0 被算到卡片自己的
   盒子上，结果弹窗比屏幕还高、按钮跑到屏幕外（用户反馈的
   「走出会出画面、根本没有办法看」）。世界卡片关掉模糊即可。 */
.world-card{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ===== v4.0：手机上「玩得起来」布局修正 =====
   1) 顶部 hero 收成一行，把高度让给画面；
   2) hud 按钮收紧成两行，永远露在底部导航之上；
   3) 提示条/统计条不许伸出屏幕。 */

/* 顶部 hero：手机上只留一行标题+时钟，说明文字交给画面里的提示条 */
@media(max-width:700px){
  body.world-page .world-hero{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin:2px 0 8px;
  }
  body.world-page .world-hero h1{font-size:20px!important;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.world-page .world-hero p{display:none}
  body.world-page .world-clock{font-size:12px;white-space:nowrap}
  body.world-page main{padding-top:8px}
}

/* hud 操作条：手机上按钮更紧凑，两行放得下、不用滚 */
@media(max-width:700px){
  .world-hud .hud-row{gap:6px;display:flex;flex-wrap:wrap}
  .world-hud .hud-row button{
    min-height:42px;min-width:0;flex:1 1 auto;padding:8px 10px;font-size:13.5px;line-height:1.2;
  }
  .world-hud .hud-row #worldAct{flex:1.6 1 auto}
  .world-hud .hud-row .world-pad{flex:1.4 1 auto}
  .world-hud .wb-stats{flex:1 1 100%;justify-content:center;text-align:center;white-space:normal}
}

/* 提示条 / toast：绝不允许超过画面宽度（v3.9 的 nowrap 提示会左右出屏） */
.world-tip{max-width:calc(100% - 24px);white-space:normal;text-align:center;width:max-content}
.world-toast{max-width:calc(100% - 24px);white-space:normal;text-align:center}

/* 背包条：手机上图标行不换行乱窜，整行可横滑 */
@media(max-width:700px){
  .world-hud .wb-inv{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .world-hud .wb-inv .wb-slot{flex:0 0 auto}
}

/* 整屏弹窗（NPC 对话）里输入框不要触发 iOS 聚焦放大 */
.world-pop-card input,.world-pop-card textarea{font-size:16px}