/* fun.tyurry.com — 黄昏猫咖场景（大厅首屏）
   纯静态：无框架、无外链、无构建步骤。
   坐标系 = 背景图自身的百分比：stage 与图片严格同框，热点用 % 定位。
   两套坐标（横版 / 竖版）集中写在下方变量里，媒体查询切换。 */

/* ------------------------------------------------------------------ 区块 */

/* 首屏可留给场景图的高度：视口高 - 页头 - 标题条 - 呼吸余量。
   场景图按这个高度等比收缩，保证门和猫始终落在首屏内。 */
:root { --scene-max-h: calc(100svh - 138px); }

@supports not (height: 100svh) {
  :root { --scene-max-h: calc(100vh - 138px); }
}

.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 12px;
  background: var(--paper, #fbf6ec);
}

.scene__head {
  display: flex;
  width: 100%;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 2px 2px 10px;
}

.scene__head h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(23px, 2.2vw, 31px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.scene__head h1 em {
  font-style: normal;
  color: var(--accent-deep);
}

.scene__tagline {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------ 画框 */

/* 尺寸由 aspect-ratio 决定：等比、永不裁切、永不拉伸。
   width 同时受容器宽与"首屏可留给图的高度"约束，保证门和猫始终在首屏。 */
.scene__frame {
  position: relative;
  margin: 0 auto;
  aspect-ratio: 1536 / 1024;
  width: min(100%, calc(var(--scene-max-h) * 1536 / 1024));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: visible;
  isolation: isolate;
}

.scene__bg {
  display: block;
  width: 100%;
  height: 100%;
}

.scene__bg img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
}

/* 图四角与卡片圆角对齐，避免直角压边 */
.scene__stage {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: visible;

  /* 槽位坐标统一在下方 REV2 段「2/3 槽位坐标」定义，此处不再重复 */
}



/* ------------------------------------------------------------------ 热点 */

.hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}

.hotspot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease);
  pointer-events: none;
}

.hotspot:hover::before,
.hotspot:focus-visible::before {
  background: rgba(251, 246, 236, 0.16);
  box-shadow: 0 0 0 1px rgba(251, 246, 236, 0.34) inset;
}

.hotspot:active::before {
  background: rgba(251, 246, 236, 0.3);
  box-shadow: 0 0 0 1px rgba(251, 246, 236, 0.5) inset;
}

.hotspot--door {
  left: calc(var(--door-x) * 1%);
  top: calc(var(--door-y) * 1%);
  width: calc(var(--door-w) * 1%);
  height: calc(var(--door-h) * 1%);
}

.hotspot--board {
  left: calc(var(--board-x) * 1%);
  top: calc(var(--board-y) * 1%);
  width: calc(var(--board-w) * 1%);
  height: calc(var(--board-h) * 1%);
}

.hotspot--cat {
  left: calc(var(--cat-x) * 1%);
  top: calc(var(--cat-y) * 1%);
  width: calc(var(--cat-w) * 1%);
  height: calc(var(--cat-h) * 1%);
}

.hotspot--treat {
  left: calc(var(--treat-x) * 1%);
  top: calc(var(--treat-y) * 1%);
  width: calc(var(--treat-w) * 1%);
  height: calc(var(--treat-h) * 1%);
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}

/* 猫条本体：始终居中在热区里，热区放大时不跟着撑大 */
.hotspot--treat svg {
  position: relative;
  z-index: 1;
  width: min(100%, 58px);
  height: auto;
  transform: scaleY(0.74) rotate(-2deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 4px rgba(59, 50, 38, 0.28));
}

/* 接地阴影：让它"放"在地板上，而不是贴图悬浮 */
.hotspot--treat::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 54%;
  height: 15%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 32, 22, 0.42), rgba(40, 32, 22, 0) 76%);
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------------------ 猫 */

.cat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 两张图同位交叉淡入：底边对齐、同宽，切换不跳位 */
.cat--sleep {
  opacity: 1;
  transition: opacity 0.25s var(--ease);
  animation: cat-breathe 3.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.cat--eat {
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.hotspot--cat.is-eating .cat--sleep { opacity: 0; animation-play-state: paused; }
.hotspot--cat.is-eating .cat--eat { opacity: 1; }
/* 同一状态也可挂在 stage 上（B 段任选其一） */
.scene__stage.is-eating .cat--sleep { opacity: 0; animation-play-state: paused; }
.scene__stage.is-eating .cat--eat { opacity: 1; }

/* 点猫时的轻微脉冲（SPEC 第 4.3 节） */
.hotspot--cat.is-patted .cat--sleep {
  animation: cat-pat 0.4s ease-out;
}

@keyframes cat-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

@keyframes cat-pat {
  0% { transform: scale(1); }
  45% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ 标签 */

.hotspot__tag {
  position: absolute;
  left: calc((var(--tag-tx) - var(--tag-x)) / var(--tag-w) * 100%);
  top: calc((var(--tag-ty) - var(--tag-y)) / var(--tag-h) * 100%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(251, 246, 236, 0.9);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px -2px rgba(59, 50, 38, 0.35);
  backdrop-filter: blur(3px);
  pointer-events: none;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}

.hotspot:hover .hotspot__tag,
.hotspot:focus-visible .hotspot__tag {
  background: rgba(255, 253, 247, 0.97);
}

.hotspot:active .hotspot__tag {
  transform: translate(-50%, -50%) scale(0.96);
}

/* 每个热点把坐标转成自己的标签定位变量 */
.hotspot--door { --tag-x: var(--door-x); --tag-y: var(--door-y); --tag-w: var(--door-w); --tag-h: var(--door-h); --tag-tx: var(--door-tx); --tag-ty: var(--door-ty); }
.hotspot--board { --tag-x: var(--board-x); --tag-y: var(--board-y); --tag-w: var(--board-w); --tag-h: var(--board-h); --tag-tx: var(--board-tx); --tag-ty: var(--board-ty); }
.hotspot--cat { --tag-x: var(--cat-x); --tag-y: var(--cat-y); --tag-w: var(--cat-w); --tag-h: var(--cat-h); --tag-tx: var(--cat-tx); --tag-ty: var(--cat-ty); }
.hotspot--treat { --tag-x: var(--treat-x); --tag-y: var(--treat-y); --tag-w: var(--treat-w); --tag-h: var(--treat-h); --tag-tx: var(--treat-tx); --tag-ty: var(--treat-ty); }

/* ------------------------------------------------------------------ 气泡 */

.scene__bubble {
  position: absolute;
  left: 50%;
  top: 66%;
  transform: translateY(6px);
  max-width: min(78%, 320px);
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.96);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  box-shadow: 0 6px 20px -10px rgba(59, 50, 38, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 3;
}

.scene__bubble.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------------ 氛围 */

/* 窗光：极淡的暖色径向叠层，缓慢呼吸 */
.scene__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 74% 26%, rgba(255, 214, 158, 0.5), transparent 68%),
    radial-gradient(40% 30% at 18% 74%, rgba(255, 197, 142, 0.32), transparent 72%);
  mix-blend-mode: soft-light;
  opacity: 0.5;
  animation: window-glow 6s ease-in-out infinite;
}

/* 尘埃光斑：几粒柔和小圆，慢慢漂 */
.scene__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 30%, rgba(255, 240, 210, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 62%, rgba(255, 236, 200, 0.8) 0 2.5px, transparent 4px),
    radial-gradient(circle at 68% 44%, rgba(255, 244, 220, 0.85) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 68%, rgba(255, 236, 200, 0.7) 0 2px, transparent 3.5px);
  opacity: 0.09;
  animation: dust-drift 26s linear infinite;
}

@keyframes window-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

@keyframes dust-drift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 26px -42px, -18px -30px, 14px -52px, -22px -36px; }
}

/* 喂猫条：飞行中的小图标（由 scene.js 插入并驱动） */
.treat-fly {
  position: absolute;
  z-index: 4;
  width: 6.5%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(59, 50, 38, 0.28));
}

/* ------------------------------------------------------------------ 降级 */

@media (prefers-reduced-motion: reduce) {
  .cat--sleep,
  .scene__stage::before,
  .scene__stage::after,
  .hotspot--cat.is-patted .cat--sleep {
    animation: none !important;
  }
  .scene__bubble,
  .hotspot__tag,
  .hotspot::before { transition: none; }
}

/* 极窄屏：标签小一号，避免压到相邻物件 */
@media (max-width: 430px) {
  .hotspot__tag { font-size: 11.5px; padding: 3px 8px; }
  .scene__head h1 { font-size: 22px; }
  .scene__tagline { font-size: 12px; }
}

/* ============ REV2 全屏改造（Jerry 2026-11-08：大厅=全屏猫咖，无其他区块） ============
   分 3 段追加：结构 / 坐标与标签 / 细节打磨。同优先级覆盖上方规则。 */

/* --- 1/3 结构：一屏不滚 + 标题叠加 + 画框通栏 cover --- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
@supports not (height: 100svh) { body { min-height: 100vh; } }

.shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.scene {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.scene__head {
  position: absolute;
  top: 1.1rem;
  left: 1.4rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: auto;
  padding: 0;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(251, 246, 236, 0.95), 0 0 12px rgba(251, 246, 236, 0.85), 0 2px 5px rgba(59, 50, 38, 0.55);
}
.scene__head h1 { color: #3B3226; }
.scene__tagline { color: rgba(59, 50, 38, 0.96); }

.scene__frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.scene__bg { display: block; }
.scene__bg img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 0;
}

/* stage 默认与 frame 同框；scene.js 会把它镜像成图片渲染盒（热点% = 图片%） */
.scene__stage {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
/* --- 1/3 结束 --- */

/* --- 2/3 槽位坐标（REV2 R3）与标签定位 --- */
.scene__stage {
  --door-x: 68;   --door-y: 10;   --door-w: 17;  --door-h: 60;  --door-tx: 64;   --door-ty: 55;
  --board-x: 14;  --board-y: 66;  --board-w: 14; --board-h: 12; --board-tx: 21;  --board-ty: 81;
  --cat-x: 68;    --cat-y: 78.5;  --cat-w: 16;   --cat-h: 14;   --cat-tx: 88;    --cat-ty: 88;
  --treat-x: 58;  --treat-y: 86;  --treat-w: 9;  --treat-h: 6;  --treat-tx: 58;  --treat-ty: 84.5;
}

@media (max-width: 767px) {
  .scene__stage {
    --door-x: 80;   --door-y: 13;  --door-w: 19;  --door-h: 64;  --door-tx: 90;   --door-ty: 30;
    --board-x: 21;  --board-y: 62; --board-w: 59; --board-h: 19; --board-tx: 50;  --board-ty: 58;
    --cat-x: 40;    --cat-y: 81;   --cat-w: 26;   --cat-h: 12;   --cat-tx: 53;    --cat-ty: 90;
    --treat-x: 84;  --treat-y: 86; --treat-w: 14; --treat-h: 8;  --treat-tx: 83;  --treat-ty: 80.5;
  }
  .hotspot--door .hotspot__tag { --tag-tr: translate(-100%, -50%); transform: var(--tag-tr); }
  .hotspot--door:hover .hotspot__tag,
  .hotspot--door:focus-visible .hotspot__tag { transform: var(--tag-tr) scale(1.04); }
  .hotspot--door:active .hotspot__tag { transform: var(--tag-tr) scale(0.96); }
}

.hotspot__tag {
  --tag-tr: translate(-50%, -50%);
  transform: var(--tag-tr);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  padding: 5px 11px;
  border: 1px solid rgba(59, 50, 38, 0.16);
  box-shadow: 0 3px 10px -2px rgba(59, 50, 38, 0.45);
}
.hotspot__tag .tag-ico { width: 18px; height: 9px; flex: none; }
.hotspot:hover .hotspot__tag,
.hotspot:focus-visible .hotspot__tag {
  background: rgba(255, 253, 247, 0.97);
  transform: var(--tag-tr) scale(1.04);
}
.hotspot:active .hotspot__tag {
  transform: var(--tag-tr) scale(0.96);
}
/* --- 2/3 结束 --- */

/* --- 3/3 细节打磨：猫条可读、猫接地阴影、极窄屏 --- */
.hotspot--treat::before {
  background: rgba(255, 238, 198, 0.25);
  box-shadow: 0 0 0 1px rgba(181, 139, 94, 0.3) inset;
  border-radius: 50%;
}
.hotspot--treat svg {
  width: min(100%, 110px);
  height: auto;
  transform: rotate(-2deg);
  transform-origin: 50% 100%;
}

.cat--sleep,
.cat--eat {
  filter: drop-shadow(0 5px 8px rgba(40, 32, 22, 0.3));
}

@media (max-width: 430px) {
  .hotspot__tag { font-size: 12.5px; padding: 4px 9px; gap: 4px; }
  .hotspot__tag .tag-ico { width: 16px; height: 8px; }
}
/* --- REV2 全部结束 --- */

/* 手机横屏（contain 小图）：猫条盒上移避让、标签缩一号，防止标签互叠与按钮撑出画框 */
@media (orientation: landscape) and (max-height: 560px) {
  .scene__stage { --treat-y: 78; --treat-h: 6; --treat-ty: 76; --door-ty: 50; }
  .hotspot__tag { font-size: 11.5px; padding: 3px 8px; gap: 3px; }
  .hotspot__tag .tag-ico { width: 14px; height: 7px; }
}

/* 横屏矮视口且足够宽（844×375 / 812×375 一类）：棋盘与猫的标签上提到离屏幕底 ≥35px。
   实测 844×375 原为 20px / 13px；本档取 75/79 后为 42px / 42px，标签两两不重叠。
   窄横屏（667×375 等，宽 <700）不套用，避免标签横向互叠。 */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 700px) {
  .scene__stage { --board-ty: 75; --cat-ty: 79; }
}