/* 共用组件：拜访场景布局、题目卡、数字键盘、选项按钮、灯灯。 */

/* ---------------------------------------------------------------- 拜访场景 */

.encounter .enc-bg { filter: saturate(1.05); }
.encounter.enc-blur .enc-bg { filter: blur(6px) saturate(0.9) brightness(0.95); transform: scale(1.05); }
.enc-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 20, 10, 0.18), rgba(30, 20, 10, 0) 30%, rgba(30, 20, 10, 0.12));
  pointer-events: none;
}

.enc-title { font-size: 1rem; }
.enc-dots { display: flex; gap: 6px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 250, 240, 0.85); box-shadow: var(--shadow-sm); }
.enc-dots .dot { width: 12px; height: 12px; border-radius: 50%; background: #e2d6c2; transition: background 0.3s; }
.enc-dots .dot.good { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.enc-dots .dot.ok { background: #ffe29a; }
.enc-dots .dot.miss { background: #c9c3bb; }

.enc-layout {
  position: absolute;
  inset: calc(70px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
  display: grid;
  grid-template-columns: minmax(150px, 24%) 1fr;
  gap: 12px;
  align-items: end;
}
.enc-npc { align-self: end; display: flex; justify-content: center; pointer-events: none; }
.enc-npc-img {
  max-height: min(70vh, 560px);
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.3));
  animation: npc-in 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both, breathe 4s ease-in-out 0.6s infinite;
  transform-origin: 50% 100%;
}
@keyframes npc-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 50% { transform: scaleY(1.015) translateY(-2px); } }

.enc-main {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding-right: 120px;
}
.enc-bubble { margin-top: 10px; min-height: 64px; font-size: 1.2rem; }
.enc-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px 10px;
  scrollbar-width: thin;
}
.enc-fit {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: auto 0;
}

.enc-summary {
  padding: 24px 28px;
  display: grid;
  justify-items: center;
  gap: 14px;
  animation: pop-in 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.sum-title { font-family: var(--font-story); font-size: 1.8rem; font-weight: 700; }
.sum-row { display: flex; gap: 22px; }
.sum-big { font-size: 1.7rem; font-weight: 800; color: var(--accent-deep); }
.sum-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sum-stars { display: grid; gap: 6px; justify-items: center; max-width: 460px; }
.sum-stars small { color: var(--ink-soft); }
.sum-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sum-chip { padding: 3px 10px; border-radius: 999px; background: #232b52; color: #ffe7a8; font-size: 0.9rem; font-weight: 700; box-shadow: 0 0 10px rgba(255, 214, 102, 0.35); }

.firefly-btn { align-self: center; }

/* ---------------------------------------------------------------- 灯灯 */

.companion {
  position: absolute;
  right: calc(10px + var(--safe-right));
  bottom: calc(10px + var(--safe-bottom));
  z-index: 30;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
.companion > * { pointer-events: auto; }
.fox-fig { position: relative; width: 110px; flex: none; }
.fox-img { width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3)); animation: float-y 3s ease-in-out infinite; }
.companion.talking .fox-img { animation: fox-talk 0.6s ease-in-out 3; }
@keyframes fox-talk { 50% { transform: translateY(-6px) rotate(-3deg); } }
.fox-wear {
  position: absolute;
  top: -6px;
  left: 18%;
  font-size: 2rem;
  transform: rotate(-14deg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  animation: float-y 3s ease-in-out infinite;
}
.fox-bubble {
  max-width: min(420px, 62vw);
  margin-bottom: 40px;
  font-size: 1.05rem;
  border-color: #f3c28c;
  background: #fff8ec;
  animation: pop-in 0.3s ease both;
}
.fox-bubble::after {
  content: "";
  position: absolute;
  right: -11px;
  bottom: 22px;
  border: 10px solid transparent;
  border-left-color: #f3c28c;
}
.fox-ok { display: flex; margin: 10px 0 0 auto; }
.fox-bubble.inline {
  max-width: none;
  margin: 4px 0 0;
  padding: 12px 16px 12px 18px;
  align-self: stretch;
  font-size: 1.05rem;
  background: #fff4e3;
}
.fox-bubble.inline::after { display: none; }
.fox-bubble.inline .fox-ok { margin-top: 6px; }

/* ---------------------------------------------------------------- 题目卡 */

.question {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.95);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
  animation: pop-in 0.35s ease both;
}
.q-prompt { font-size: 1.25rem; line-height: 1.7; font-weight: 600; }
.q-framing { font-size: 0.95rem; color: var(--ink-soft); font-weight: 500; margin-bottom: 2px; }
.q-figure { display: flex; justify-content: center; color: #5a4636; }
.q-figure img { max-width: min(320px, 80%); max-height: 200px; height: auto; }

.q-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.q-choices.with-figs { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.q-choice {
  appearance: none;
  border: 2px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 56px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.5;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--paper-3);
  transition: transform 0.12s ease, background 0.2s, border-color 0.2s, opacity 0.3s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.q-choice:hover { border-color: #f3c28c; }
.q-choice:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--paper-3); }
.q-choice-fig { display: flex; justify-content: center; width: 100%; color: #5a4636; }
.q-choice-fig img { max-height: 110px; max-width: 100%; }
.q-choice.wrong { background: #f4efe8; color: var(--ink-faint); border-color: #e2d6c2; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.25); }
.q-choice.right { background: #fff6d6; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 207, 77, 0.45); }
.q-choice.revealed { animation: glow 1.2s ease-in-out 2; }
.q-choice.gone { opacity: 0.2; transform: scale(0.96); }
.question.locked .q-choice { cursor: default; }
@keyframes glow { 50% { box-shadow: 0 0 0 8px rgba(255, 207, 77, 0.6); } }

/* ---------------------------------------------------------------- 数字键盘 */

.q-numeric { display: grid; justify-items: center; gap: 10px; }
.q-display-row { display: flex; align-items: center; gap: 8px; }
.q-display {
  min-width: 180px;
  min-height: 58px;
  padding: 8px 18px;
  border-radius: 14px;
  background: #fff;
  border: 3px solid var(--line);
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.q-display.empty { color: transparent; }
.q-display.right { border-color: var(--gold); background: #fff6d6; }
.q-display.revealed { border-color: var(--sky); background: #e9f4fd; }
.q-unit { font-size: 1.3rem; font-weight: 800; padding: 4px 12px; border-radius: 12px; background: rgba(255, 250, 240, 0.92); box-shadow: var(--shadow-sm); color: var(--ink); }
.q-pad { display: grid; grid-template-columns: repeat(5, 58px); gap: 8px; justify-content: center; }
.q-key {
  appearance: none;
  border: 0;
  height: 52px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 0 var(--paper-3), var(--shadow-sm);
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.q-key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--paper-3); }
.q-key-extra { background: var(--gold-soft); font-size: 1.1rem; }
.q-key-fn { background: #f1e6d3; }
.q-key-ok { grid-column: span 2; background: linear-gradient(180deg, #ffb35c, var(--accent)); color: #fff; box-shadow: 0 3px 0 var(--accent-deep), var(--shadow-sm); font-size: 1.15rem; }
.locked .q-key, .q-numeric.locked .q-key { opacity: 0.6; pointer-events: none; }

/* ---------------------------------------------------------------- 大按钮选项（小游戏用） */

.kit-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kit-choice {
  appearance: none;
  border: 3px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 12px 22px;
  min-width: 96px;
  min-height: 64px;
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--paper-3), var(--shadow-sm);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform 0.1s ease, background 0.2s, opacity 0.3s;
}
.kit-choice small { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.kit-choice:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--paper-3); }
.kit-choice.wrong { opacity: 0.45; background: #f4efe8; }
.kit-choice.right { background: #fff6d6; border-color: var(--gold); box-shadow: 0 0 0 5px rgba(255, 207, 77, 0.45); }

/* ---------------------------------------------------------------- 竖屏手机 */

@media (max-aspect-ratio: 1/1) {
  .enc-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    inset: calc(64px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));
    gap: 6px;
  }
  .enc-npc { position: absolute; left: 0; top: 0; width: 86px; z-index: 2; align-self: start; }
  .enc-npc-img { max-height: 120px; }
  .enc-main { padding-right: 0; grid-row: 1 / span 2; }
  .enc-bubble { margin-left: 92px; font-size: 1.05rem; padding: 12px 14px; }
  .enc-stage { padding-bottom: 90px; justify-content: flex-start; }
  .companion .fox-fig { width: 78px; }
  .fox-bubble { margin-bottom: 30px; max-width: 70vw; font-size: 0.98rem; }
  .q-pad { grid-template-columns: repeat(5, 52px); gap: 6px; }
  .q-key { height: 48px; }
  .q-prompt { font-size: 1.12rem; }
  .question { padding: 14px 12px; }
}

@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .enc-layout { inset: calc(58px + var(--safe-top)) 8px 6px 8px; }
  .fox-bubble.inline { padding: 7px 12px; font-size: 0.92rem; line-height: 1.5; }
  .fox-bubble.inline .fox-ok { margin-top: 2px; min-height: 34px; }
  .enc-main { gap: 6px; }
  .enc-bubble { margin-top: 6px; }
  .enc-npc-img { max-height: 62vh; }
  .enc-bubble { font-size: 1rem; padding: 10px 14px; min-height: 48px; }
  .q-key { height: 42px; }
  .q-pad { grid-template-columns: repeat(5, 50px); }
  .q-display { min-height: 46px; font-size: 1.6rem; }
  .fox-fig { width: 80px; }
}