/* ============================================================
 * 游友 · 跟着游轮看世界 —— 新增组件样式
 * 覆盖：背景音乐悬浮球 + 邮轮英语入口/抽屉 + 分享音乐心情选择器
 * 设计：海洋蓝主色，跨端（手机 / iPad 横竖 / PC / 小程序 web-view）自适应
 * ============================================================ */

/* ---------- 背景音乐 · 悬浮球（左下，与右侧图层按钮镜像） ---------- */
.yy-music-wrap{
  position:fixed; left:12px; bottom:calc(76px + env(safe-area-inset-bottom,0px));
  z-index:38; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
.yy-music-pill{
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,#0b3a5c,#1a6fb5);
  color:#fff; border:none; border-radius:999px;
  padding:9px 15px; font-size:12.5px; font-weight:800;
  box-shadow:0 4px 14px rgba(11,61,92,.32); cursor:pointer; white-space:nowrap;
  transition:transform .12s, background .2s, opacity .2s;
}
.yy-music-pill:active{ transform:translateY(1px); }
.yy-music-pill.off{ background:rgba(120,134,148,.92); }
.yy-music-pill .yy-music-ico{ font-size:15px; }
.yy-music-scenes{ display:none; flex-wrap:wrap; gap:6px; max-width:64vw; }
.yy-music-wrap.on .yy-music-scenes{ display:flex; }
.yy-music-chip{
  border:1.5px solid rgba(11,61,92,.25); background:#fff; color:#0b3a5c;
  border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:800; cursor:pointer;
  box-shadow:0 2px 8px rgba(11,61,92,.12);
}
.yy-music-chip.on{ background:#0b3a5c; color:#fff; border-color:#0b3a5c; }

/* ---------- 邮轮英语 · 入口按钮（左上下方） ---------- */
.yy-en-fab{
  position:fixed; left:12px; bottom:calc(138px + env(safe-area-inset-bottom,0px));
  z-index:38; display:flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,#0a7c5a,#13a06f);
  color:#fff; border:none; border-radius:999px;
  padding:9px 15px; font-size:12.5px; font-weight:800;
  box-shadow:0 4px 14px rgba(10,124,90,.32); cursor:pointer; white-space:nowrap;
  transition:transform .12s; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
.yy-en-fab:active{ transform:translateY(1px); }
.yy-en-fab .yy-en-fab-ico{ font-size:15px; }

/* ---------- 邮轮英语 · 抽屉 ---------- */
.yy-en-mask{
  position:fixed; inset:0; background:rgba(8,16,28,.42); z-index:59;
  opacity:0; visibility:hidden; transition:opacity .25s;
}
.yy-en-mask.on{ opacity:1; visibility:visible; }
.yy-en-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  max-height:74vh; display:flex; flex-direction:column;
  background:#fff; border-radius:20px 20px 0 0;
  box-shadow:0 -10px 36px rgba(11,61,92,.28);
  transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
.yy-en-sheet.on{ transform:translateY(0); }
.yy-en-head{
  display:flex; align-items:center; gap:10px; padding:14px 16px 10px;
  border-bottom:1px solid #eef2f6;
}
.yy-en-title{ flex:1; font-size:16px; font-weight:900; color:#0b3a5c; }
.yy-en-title small{ display:block; font-size:11px; font-weight:600; color:#8a99a6; margin-top:2px; }
.yy-en-close{
  width:30px; height:30px; border:none; background:#eef2f6; color:#5f7186;
  border-radius:50%; font-size:15px; cursor:pointer; flex:none;
}
.yy-en-prac{
  border:1.5px solid #0a7c5a; background:#fff; color:#0a7c5a;
  border-radius:999px; padding:6px 12px; font-size:12px; font-weight:800; cursor:pointer; flex:none;
}
.yy-en-prac.on{ background:#0a7c5a; color:#fff; }
.yy-en-chips{
  display:flex; gap:7px; overflow-x:auto; padding:10px 16px 4px; -webkit-overflow-scrolling:touch;
}
.yy-en-chip{
  flex:none; border:1.5px solid #dce4ee; background:#f4f8fc; color:#0b3a5c;
  border-radius:999px; padding:5px 12px; font-size:12px; font-weight:800; cursor:pointer;
}
.yy-en-chip.on{ background:#0b3a5c; color:#fff; border-color:#0b3a5c; }
.yy-en-list{ overflow-y:auto; padding:6px 12px calc(18px + env(safe-area-inset-bottom,0px)); -webkit-overflow-scrolling:touch; }
.yy-en-section{ margin-bottom:6px; }
.yy-en-sec-t{
  font-size:12px; font-weight:900; color:#1a6fb5; letter-spacing:.5px;
  margin:12px 4px 6px; display:flex; align-items:center; gap:6px;
}
.yy-en-item{
  display:flex; align-items:center; gap:10px; padding:11px 10px;
  border-bottom:1px solid #f1f5f9; cursor:pointer;
}
.yy-en-item:active{ background:#f6fafd; }
.yy-en-txt{ flex:1; min-width:0; }
.yy-en-txt b{ display:block; font-size:14.5px; color:#16283a; line-height:1.35; }
.yy-en-txt span{ display:block; font-size:12px; color:#6b7a8c; margin-top:2px; }
.yy-en-btns{ display:flex; gap:6px; flex:none; }
.yy-en-speak,.yy-en-mic{
  width:40px; height:40px; border:none; border-radius:50%; font-size:17px; cursor:pointer;
  display:grid; place-items:center; flex:none; transition:transform .1s;
}
.yy-en-speak{ background:#e7f1fb; color:#0b4d7a; }
.yy-en-mic{ background:#e6f6ee; color:#0a7c5a; }
.yy-en-speak:active,.yy-en-mic:active{ transform:scale(.9); }
.yy-en-feedback{
  margin:0 16px 14px; padding:9px 12px; border-radius:10px;
  background:#eef6ff; color:#0b3a5c; font-size:12.5px; line-height:1.5;
  opacity:0; transform:translateY(6px); transition:.2s; visibility:hidden;
}
.yy-en-feedback.on{ opacity:1; transform:none; visibility:visible; }
body.yy-en-lock{ overflow:hidden; }

/* ---------- 分享 · 音乐心情选择器 ---------- */
.yy-mood-picker{ margin:6px 0 10px; }
.yy-mood-picker .yy-mood-tip{ font-size:11.5px; color:#5b6b7d; margin:0 0 8px; }
.yy-mood-row{ display:flex; flex-wrap:wrap; gap:8px; }
.yy-mood-chip{
  display:flex; align-items:center; gap:6px; border:1.5px solid rgba(11,61,92,.22);
  background:#fff; border-radius:12px; padding:7px 12px; font-size:13px; font-weight:700;
  color:#1c2b3a; cursor:pointer; transition:.15s;
}
.yy-mood-chip .yy-mood-ico{ font-size:16px; }
.yy-mood-chip.on{ background:#0b3a5c; color:#fff; border-color:#0b3a5c; box-shadow:0 3px 10px rgba(11,61,92,.28); }
.yy-mood-caption{ font-size:11.5px; color:#1a6fb5; margin-top:8px; display:none; }
.yy-mood-caption.on{ display:block; }

/* ---------- 大屏（PC / iPad 横）微调 ---------- */
@media (min-width:900px){
  .yy-music-wrap,.yy-en-fab{ left:18px; }
  .yy-en-sheet{ left:50%; right:auto; transform:translate(-50%,100%); width:min(560px,92vw); border-radius:20px; }
  .yy-en-sheet.on{ transform:translate(-50%,0); }
}