/* Nightfall: layered transitions and anchored PC controls. */
#scene-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #385348, #102426 75%);
  display: grid;
  place-items: center;
  pointer-events: all;
  isolation: isolate;
}
#scene-transition[hidden] {
  display: none !important;
}
.scene-shutter {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  background: linear-gradient(90deg, #06181ed9, #243e38f5);
  animation: shutter var(--scene-duration) cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.scene-shutter.left {
  left: 0;
  transform-origin: left;
}
.scene-shutter.right {
  right: 0;
  transform-origin: right;
}
.scene-home .scene-shutter {
  background: linear-gradient(90deg, #392e28, #384336);
}
.scene-sleep {
  background: radial-gradient(
    ellipse at 50% 40%,
    #273849,
    #0d1a2b 75%
  ) !important;
}
.scene-dust {
  position: absolute;
  inset: 0;
}
.scene-dust i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #d4d9a2;
  opacity: 0.25;
  animation: scene-drift var(--scene-duration) ease-out both;
  animation-delay: calc(var(--i) * -40ms);
}
.scene-emblem {
  position: relative;
  text-align: center;
  display: grid;
  gap: 18px;
  color: #eee7c6;
  animation: scene-emblem var(--scene-duration) ease both;
}
.scene-emblem > span {
  font-size: 36px;
  color: #d1bf88;
  text-shadow: 0 0 35px #ddc98c99;
}
.scene-emblem b {
  font-size: clamp(23px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: 0.12em;
}
.scene-emblem small {
  color: #b9c6b1;
  font-size: 14px;
  letter-spacing: 0.1em;
}
.scene-rule {
  width: 140px;
  height: 1px;
  margin: 5px auto;
  background: linear-gradient(90deg, transparent, #b8a77c, transparent);
}
@keyframes shutter {
  0% {
    transform: scaleX(0);
  }
  35%,
  68% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes scene-emblem {
  0%,
  15% {
    opacity: 0;
    transform: translateY(15px) scale(0.97);
  }
  42%,
  68% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(1.025);
  }
}
@keyframes scene-drift {
  from {
    transform: translate(-30px, 15px);
  }
  to {
    transform: translate(65px, -65px);
  }
}
.scene-pulse {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  background: radial-gradient(ellipse at 50% 40%, #ead6a140, transparent 72%);
}
.scene-pulse.dawn {
  background: linear-gradient(130deg, #ffe3a67a, transparent 55%);
}
#panel {
  overflow: hidden;
}
.panel-heading,
.home-heading {
  flex: none;
  z-index: 4;
  background: linear-gradient(105deg, #eee5ce, #e0d5b9);
}
#panel-content {
  min-height: 0;
  scroll-padding-top: 136px;
}
.panel-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #e7ddc4;
  border-bottom: 1px solid #b9ab8270;
  box-shadow: 0 4px 10px #37432812;
}
.craft-batch {
  position: sticky;
  top: var(--tabs-height, 65px);
  z-index: 3;
  background: #e7ddc4;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #b9ab8270;
}
.build-tools {
  position: sticky;
  top: var(--tabs-height, 104px);
  z-index: 3;
  background: #e7ddc4;
}
.panel-heading h2 {
  line-height: 1.25;
}
#dialog {
  max-height: calc(100vh - 64px);
  overflow: auto;
}
.dialog-head {
  position: sticky;
  top: -26px;
  z-index: 2;
  background: #efe6d1;
  padding-bottom: 12px;
}
.dialog-close {
  flex: none;
}
#title-language {
  padding: 8px 14px;
  background: #19352a88;
  color: #e2dfc0;
  border: 1px solid #bfb68e60;
  border-radius: 3px;
  font: inherit;
  pointer-events: auto;
}
#title-language option {
  background: #22382d;
  color: #eee3c4;
}
.utilities {
  gap: 6px;
}
.utilities button {
  min-width: 34px;
}
.utilities .utility-text {
  font-size: 12px;
  padding: 8px 10px;
}
#goal-card {
  position: absolute;
  right: 22px;
  top: 410px;
  width: 218px;
  padding: 12px 14px;
  text-align: left;
  background: #17332edc;
  border: 1px solid #acb89866;
  box-shadow: 0 8px 20px #0827293b;
  color: #ecdfb8;
  font: inherit;
  pointer-events: auto;
  z-index: 8;
}
#goal-card small {
  display: block;
  font-size: 10px;
  color: #aaba9e;
  margin-bottom: 7px;
}
#goal-card b {
  font-size: 13px;
  font-weight: 400;
  display: block;
  line-height: 1.6;
}
#goal-card .goal-meter {
  height: 3px;
  background: #587065;
  margin: 9px 0 5px;
}
#goal-card .goal-meter i {
  display: block;
  height: 100%;
  background: #c5bd85;
}
#goal-card em {
  font-size: 10px;
  font-style: normal;
  color: #bbc7ae;
}
body:has(#village-pulse-panel:not([hidden])) #goal-card,
.is-inside #goal-card {
  display: none;
}
#goals-panel .milestone {
  display: grid;
  grid-template-columns: 39px 1fr auto;
  gap: 13px;
  padding: 18px 6px;
  border-bottom: 1px solid #a2a78655;
  align-items: center;
}
.milestone > span {
  font-size: 27px;
  color: #999977;
}
.milestone.earned > span {
  color: #b68531;
  text-shadow: 0 1px #fff3b7;
}
.milestone b {
  font-weight: 400;
  font-size: 16px;
}
.milestone p {
  font-size: 12px;
  margin: 5px 0;
  line-height: 1.6;
  color: #6e755b;
}
.milestone button {
  font-size: 11px;
  padding: 8px 12px;
}
.milestone small {
  font-size: 11px;
  color: #758469;
}
.goals-intro {
  padding: 12px 15px;
  background: #d7ddc8;
  font-size: 13px;
  line-height: 1.8;
}
#tutorial-card {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: 154px;
  transform: translateX(-50%);
  width: min(530px, calc(100vw - 70px));
  padding: 20px 25px;
  background: #f0e4c9f7;
  border: 1px solid #c5af77;
  box-shadow: 0 14px 60px #081c2666;
  color: #354b3d;
  pointer-events: auto;
}
#tutorial-card small {
  color: #7e8767;
  font-size: 11px;
  letter-spacing: 0.15em;
}
#tutorial-card h3 {
  font-weight: 400;
  font-size: 21px;
  margin: 9px 0;
}
#tutorial-card p {
  line-height: 1.9;
  font-size: 14px;
  margin: 0;
}
#tutorial-card .tutorial-dots {
  display: flex;
  gap: 7px;
  margin-top: 15px;
}
.tutorial-dots i {
  height: 3px;
  width: 36px;
  background: #c5c6a9;
}
.tutorial-dots i.done {
  background: #5d826c;
}
.tutorial-active .dock {
  opacity: 0.55;
}
.tutorial-active .tutorial-focus {
  opacity: 1 !important;
  outline: 2px solid #dccc91;
  outline-offset: 3px;
}
#tool-feedback {
  position: absolute;
  left: 50%;
  bottom: 149px;
  transform: translateX(-50%);
  padding: 8px 17px;
  background: #19332dda;
  color: #e0e1c4;
  border: 1px solid #aabca650;
  pointer-events: none;
  z-index: 8;
  min-width: 160px;
  text-align: center;
  font-size: 12px;
}
#tool-feedback progress {
  display: block;
  width: 100%;
  height: 4px;
  accent-color: #dac691;
  margin-top: 7px;
}
.tutorial-active #tool-feedback {
  display: none;
}
#room-banner {
  z-index: 10;
}
#door-prompt {
  pointer-events: none;
}
#room-context {
  position: absolute;
  bottom: 151px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: #213c32e8;
  border: 1px solid #bdc69780;
  color: #ede2ba;
  text-align: center;
  max-width: min(670px, 80vw);
  font-size: 13px;
  line-height: 1.7;
  z-index: 9;
  pointer-events: none;
}
.home-rest-guide {
  margin: 14px 0;
  padding: 12px;
  border-left: 3px solid #7f9276;
  background: #d1d7bd77;
  font-size: 12px;
  line-height: 1.9;
}
.home-rest-guide b {
  display: block;
  font-weight: 400;
  color: #405840;
}
#dialog.diary-dialog {
  width: min(800px, calc(100vw - 64px));
  padding: 30px;
  background: linear-gradient(120deg, #f1e7ce, #dfd0af);
  box-shadow:
    0 30px 100px #051724a6,
    inset 0 0 0 4px #fff5d030;
}
.diary-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #a79e7970;
  padding-bottom: 17px;
}
.diary-top small {
  font-size: 11px;
  letter-spacing: 0.13em;
  color: #6d836c;
}
.diary-top h2 {
  font-size: 34px;
  font-weight: 400;
  margin: 8px 0 0;
}
.diary-top .diary-date {
  font-family: WorldTitle, serif;
  font-size: 45px;
  color: #ad9566;
}
.diary-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 22px 0;
}
.diary-columns h3 {
  font-size: 16px;
  font-weight: 400;
  color: #57725e;
  border-bottom: 1px solid #b8b795;
  padding-bottom: 9px;
}
.diary-entry {
  padding: 11px 0;
  border-bottom: 1px dashed #b9b19166;
  font-size: 14px;
  line-height: 1.85;
}
.diary-person {
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #dde0c855;
  border: 1px solid #acb69655;
}
.diary-person b {
  font-size: 15px;
  font-weight: 400;
}
.diary-person small {
  color: #7b8266;
  margin-left: 10px;
}
.diary-person p {
  font-size: 12px;
  line-height: 1.85;
  margin: 6px 0 0;
  color: #607356;
}
.diary-recovery {
  color: #4c735b;
  background: #d6dfc8;
  padding: 11px 15px;
  font-size: 13px;
  line-height: 1.7;
}
.diary-footer {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #b8ad8566;
  padding-top: 17px;
}
.diary-footer p {
  font-size: 12px;
  color: #738166;
}
.diary-footer button {
  padding: 12px 22px;
  font-size: 14px;
}
.diary-history {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.diary-history button {
  font-size: 11px;
  padding: 6px 9px;
  background: #d9d5bb;
}
.settings-section {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #7c8c6b;
  margin: 24px 0 6px;
  border-bottom: 1px solid #bfc4a055;
  padding-bottom: 7px;
}
.settings-help {
  font-size: 12px;
  color: #627b64;
  line-height: 1.8;
  background: #dde3ce70;
  padding: 12px;
}
.setting-row select {
  font: inherit;
  min-width: 145px;
  max-width: 55%;
  padding: 7px;
  background: #e4dfc7;
  border: 1px solid #b3bd9e;
}
.setting-row output {
  font-size: 12px;
  min-width: 38px;
  text-align: right;
  color: #69816c;
}
.setting-range {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 65%;
}
.setting-range input {
  width: 165px !important;
  max-width: 100%;
}
@media (max-height: 800px) {
  #tutorial-card {
    bottom: 137px;
    padding: 14px 20px;
  }
  #tutorial-card h3 {
    font-size: 18px;
  }
  #room-context {
    bottom: 138px;
    font-size: 12px;
  }
  #tool-feedback {
    bottom: 135px;
  }
  #dialog.diary-dialog {
    padding: 21px;
  }
  .diary-top h2 {
    font-size: 27px;
  }
  .diary-columns {
    margin: 12px 0;
    gap: 20px;
  }
  .diary-entry {
    padding: 7px 0;
  }
  .diary-person {
    padding: 8px 12px;
  }
  #goal-card {
    top: 405px;
    width: 190px;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene-shutter,
  .scene-emblem,
  .scene-dust i {
    animation: none !important;
  }
}
.reduced-motion .scene-shutter,
.reduced-motion .scene-emblem,
.reduced-motion .scene-dust i {
  animation: none !important;
}

/* Text controls must not inherit square icon widths. */
#daybook,
#trophies {
  width: auto;
  min-width: 48px;
  padding: 0 9px;
  white-space: nowrap;
  font-size: 12px;
}
#room-context b,
#room-context span {
  display: block;
}
#room-context kbd {
  margin-left: 7px;
}
.day-info {
  min-width: 125px;
}
.settings-section {
  letter-spacing: 0.03em;
}
.settings-section h3 {
  font-size: 13px;
}
.settings-section .setting-row {
  font-size: 14px;
}
.scene-changing #hover-label,
.scene-changing #toast-stack {
  visibility: hidden;
}