/* 灯路、连续答题面板、巡灯，以及星图上「快忘了」的样子（遗忘曲线相关的界面） */

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

.scene-road { background: var(--night); }
.road-bg { filter: saturate(0.9) brightness(0.8); }
.road-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 26, 54, 0.55), rgba(20, 26, 54, 0.15) 40%, rgba(20, 26, 54, 0.45));
  pointer-events: none;
}
.road-main {
  position: absolute;
  top: calc(62px + var(--safe-top));
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 20px));
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  z-index: 10;
}
.road-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 16px 12px;
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.92);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.road-title { margin: 0; font-family: var(--font-story); font-size: 1.35rem; }
.road-meter {
  grid-column: 1 / -1;
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #eadbc0;
}
.road-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffcf4d, #f08c2e);
  transition: width 0.6s ease;
}
.road-meter-goal { position: absolute; top: 50%; transform: translate(-50%, -55%); font-size: 1.15rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.road-meter-text { font-size: 0.92rem; color: var(--ink-soft); }
.road-review { grid-row: 1; grid-column: 2; }

.road-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.road-tab {
  appearance: none;
  border: 1.5px solid rgba(255, 231, 168, 0.4);
  background: rgba(20, 26, 54, 0.55);
  color: #f4ecd8;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}
.road-tab small { font-weight: 500; opacity: 0.75; font-size: 0.8rem; }
.road-tab.on { background: #ffe7a8; color: #3b2f2a; border-color: #ffe7a8; }

.road-path {
  overflow-y: auto;
  min-height: 0;
  padding: 6px 0 calc(150px + var(--safe-bottom));
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.road-band {
  align-self: center;
  margin: 8px 0 2px;
  padding: 2px 16px;
  border-radius: 999px;
  background: rgba(255, 231, 168, 0.18);
  color: #ffe7a8;
  font-weight: 700;
  letter-spacing: 4px;
}
.road-end { align-self: center; font-size: 2.4rem; filter: drop-shadow(0 0 12px rgba(255, 215, 106, 0.6)); }

.lamp {
  --lamp-w: min(300px, 82vw);
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  width: var(--lamp-w);
  margin-left: clamp(0px, calc(var(--x) - var(--lamp-w) / 2), calc(100% - var(--lamp-w)));
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.lamp:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; border-radius: 16px; }
.lamp-post { position: relative; flex: none; width: 54px; height: 54px; display: grid; place-items: center; }
.lamp-light {
  width: 42px;
  height: 46px;
  border-radius: 48% 48% 44% 44%;
  border: 2px solid #8a6a46;
  background: radial-gradient(circle at 50% 45%, #f2ead8, #b9ad96 70%);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.6s ease, background 0.6s ease, filter 0.6s ease;
}
.lamp.kindling .lamp-light,
.lamp.lit .lamp-light,
.lamp.fading .lamp-light {
  background: radial-gradient(circle at 50% 45%, #fffbe6, #ffd76a 45%, #f08c2e);
  box-shadow: 0 0 calc(6px + var(--glow) * 30px) calc(var(--glow) * 8px) rgba(255, 207, 77, 0.75), inset 0 -6px 0 rgba(160, 80, 0, 0.18);
  filter: brightness(calc(0.65 + var(--glow) * 0.45)) saturate(calc(0.5 + var(--glow) * 0.6));
}
.lamp.fading .lamp-light { animation: lamp-flicker 2.2s ease-in-out infinite; }
@keyframes lamp-flicker { 50% { filter: brightness(0.55) saturate(0.5); } }
.lamp-bell { position: absolute; top: -4px; right: -6px; font-size: 1.1rem; animation: bell-ring 2.4s ease-in-out infinite; }
@keyframes bell-ring { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(18deg); } 92% { transform: rotate(-14deg); } }
.lamp-info {
  flex: 1;
  min-width: 0;
  display: grid;
  padding: 6px 12px;
  border-radius: 14px;
  background: rgba(255, 250, 240, 0.9);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.lamp-info strong { font-size: 0.98rem; }
.lamp-title { font-size: 0.88rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lamp-info small { font-size: 0.8rem; color: var(--accent-deep); font-weight: 700; }
.lamp.dark .lamp-info { background: rgba(240, 236, 228, 0.82); }
.lamp:active .lamp-info { transform: translateY(2px); }

.road-companion .fox-bubble { max-width: min(380px, 60vw); }

/* ---------------------------------------------------------------- 连续答题面板 */

.session {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(14px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
  background: radial-gradient(circle at 50% 40%, rgba(60, 50, 90, 0.55), rgba(20, 22, 40, 0.75));
  backdrop-filter: blur(3px);
  overflow: auto;
  animation: scene-in 0.3s ease both;
}
.session-card { width: min(760px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: center; margin: auto; }
.session-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.92);
  box-shadow: var(--shadow-sm);
}
.session-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-icon { font-size: 1.3rem; }
.session-pips { display: flex; gap: 5px; }
.session-pip { width: 14px; height: 14px; border-radius: 50%; background: #e3d6bf; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); }
.session-pip.good { background: #ffcf4d; box-shadow: 0 0 8px #ffcf4d; }
.session-pip.ok { background: #9fd39b; }
.session-pip.miss { background: #b9b3c4; }
.session-pip.skip { background: transparent; border: 1.5px dashed #c9b893; box-shadow: none; }
.session-close { width: 40px; height: 40px; }
.session-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.session-fox { width: 92px; flex: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3)); animation: float-y 3s ease-in-out infinite; }
.session-say { flex: 1; font-size: 1.08rem; border-color: #f3c28c; background: #fff8ec; }
.session-body { width: 100%; display: grid; gap: 10px; justify-items: center; }
.session-sum {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  animation: pop-in 0.3s ease both;
}
.session-sum .sum-title { font-family: var(--font-story); font-size: 1.5rem; color: var(--accent-deep); }
.session-sum p { margin: 0; line-height: 1.7; }

/* ---------------------------------------------------------------- 岛上的灯路入口、航海图上的巡灯 */

.isle-road {
  position: absolute;
  left: calc(12px + var(--safe-left));
  bottom: calc(14px + var(--safe-bottom));
  z-index: 30;
  display: grid;
  justify-items: start;
  gap: 0;
  line-height: 1.25;
  padding: 0.5em 1.2em;
}
.isle-road small { font-size: 0.78rem; font-weight: 600; opacity: 0.92; }
.isle-road.pulse, .map-patrol.pulse { animation: road-pulse 1.6s ease-in-out infinite; }
@keyframes road-pulse { 50% { box-shadow: 0 4px 0 var(--accent-deep), 0 0 0 8px rgba(255, 207, 77, 0.5); } }
.map-actions {
  position: absolute;
  left: calc(12px + var(--safe-left));
  bottom: calc(14px + var(--safe-bottom));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.map-actions .map-ending { position: static; }
.isle-due {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff1c2;
  color: var(--accent-deep);
  font-size: 0.78rem;
  font-weight: 800;
}

/* ---------------------------------------------------------------- 手账：快忘了的星星、遗忘曲线 */

.starmap .fading .core { fill: #d9b25e; opacity: 0.75; animation: seen-pulse 2.8s ease-in-out infinite; }
.starmap .fading .ring { fill: none; stroke: rgba(255, 215, 106, 0.55); stroke-width: 1.5; stroke-dasharray: 3 3; }
.tc-dot.fading { background: #d9b25e; box-shadow: 0 0 0 3px rgba(217, 178, 94, 0.35); }
.tc-chip.fading { border-color: #d9b25e; border-style: dashed; }
.tc-memory { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: #fff6e2; border: 1.5px solid var(--line); }
.tc-memory-row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.92rem; }
.tc-memory-row b { color: var(--accent-deep); }
.tc-curve { width: 100%; height: 70px; display: block; }
.tc-curve .axis { stroke: #d8c6a4; stroke-width: 1; }
.tc-curve .target { stroke: #c9a46a; stroke-width: 1; stroke-dasharray: 4 3; }
.tc-curve .line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.tc-curve .area { fill: rgba(255, 207, 77, 0.25); }
.tc-curve .now { stroke: var(--teal); stroke-width: 1.6; }
.tc-curve .dot { fill: var(--teal); }
.tc-curve text { font-size: 10px; fill: var(--ink-soft); }
.tc-memory p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; }

@media (max-aspect-ratio: 1/1) {
  .road-head { padding: 8px 12px 10px; }
  .road-title { font-size: 1.15rem; }
  .road-meter-text { grid-column: 1 / -1; }
  .session-fox { width: 64px; }
  .session-say { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lamp.fading .lamp-light, .lamp-bell, .isle-road.pulse, .map-patrol.pulse, .starmap .fading .core { animation: none; }
}