/* 工具：中国空间站 3D —— 宿主页样式（iframe 外壳，不是应用本身的样式）。
   应用自己的样式在 app/css/style.css，那份是全屏独占的，不能也不必在这里覆盖。 */

.ss-embed {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;               /* 圆角要能裁到 iframe 与遮罩 */
  background: #02040a;            /* 与应用底色一致，加载那一瞬不闪白 */
  line-height: 0;                 /* 去掉 inline iframe 底部的基线间隙 */
}

.ss-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;               /* 大屏上别把整个视口吃满，留出上下文 */
  border: 0;
}

/* aspect-ratio 不支持时（旧浏览器）退回固定高度，否则 iframe 会塌成 150px 默认高 */
@supports not (aspect-ratio: 16 / 9) {
  .ss-frame { height: 560px; }
}

/* 全屏时必须把上面那几条撤掉。UA 样式表给 :fullscreen 的 width/height:100% 优先级最低，
   作者写的 aspect-ratio 与 max-height 会赢，结果是"全屏了但画面还是 16:9 的小框，四周全黑"。
   两条必须分开写：选择器列表里只要有一个浏览器不认识的伪类，整条规则就作废，
   合在一起会让不支持 -webkit- 前缀的浏览器连标准那条也一起丢掉。 */
.ss-frame:fullscreen {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}
.ss-frame:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}

/* ---------- 交互遮罩 ----------
   应用的滚轮缩放是 { passive:false } + preventDefault（app/js/controls.js:146,156），
   画布还带 touch-action:none，指针一旦落进 iframe，滚轮和手指滑动就都到不了本页面，
   用户滚到这一段会以为页面卡住。所以默认盖一层遮罩：滚轮落在遮罩上＝正常翻页，
   点一下才把控制权交给 3D 画面。embed.js 负责开关，鼠标移出后会重新盖上。 */
.ss-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(2, 4, 10, 0.30);
  transition: opacity .18s;
}
.ss-veil span {
  padding: 9px 18px;
  border: 1px solid rgba(120, 180, 255, 0.35);
  border-radius: 999px;
  background: rgba(8, 16, 30, 0.72);
  color: #e8f1ff;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 1px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ss-embed.is-active .ss-veil { opacity: 0; pointer-events: none; }

/* ---------- 全屏按钮 ---------- */
.ss-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.ss-tip {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
/* 浏览器不支持 Fullscreen API 时由 embed.js 加上，避免按了没反应 */
.ss-fullscreen[hidden] { display: none; }

@media (max-width: 720px) {
  /* 手机竖屏下 16:9 只有两百来像素，模型糊成一条；改高一点。
     同时限 62vh，保证 iframe 上下都还留着能用手指滑动翻页的区域——
     画布 touch-action:none，落在画面内的滑动是旋转模型，不会滚页面。 */
  .ss-frame { aspect-ratio: 4 / 5; max-height: 62vh; }
  @supports not (aspect-ratio: 4 / 5) {
    .ss-frame { height: 62vh; }
  }
}

/* 产物缺失时的占位（embed.css 是无条件加载的，这个分支也得有样式） */
.ss-missing {
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--ink-2);
}
.ss-missing code { background: #fff; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); }

/* site.css 没有给 kbd 定样式，默认的 monospace 在正文里太跳 */
.tool-note kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-alt);
  font-family: inherit;
  font-size: .9em;
}