/* Variáveis globais de cores */
:root {
  --bg-dark: #020a0c;
  --teal-dark: #062329;
  --teal-main: #0c4d59;
  --teal-light: #248a9e;
  --text-main: #e0f2f5;
  --danger: #590c0c;
  --danger-hover: #8a1313;
}

/* Cores para período noturno */
#game-container.night-time {
  --bg-dark: #020a0c;
  --teal-dark: #062329;
  --teal-main: #0c4d59;
  --teal-light: #248a9e;
  --text-main: #e0f2f5;
}

/* Cores para período diurno */
#game-container.day-time {
  --bg-dark: #1a2820;
  --teal-dark: #2d5f45;
  --teal-main: #4a8f6f;
  --teal-light: #7ab88a;
  --text-main: #f0faf4;
}

/* Bloqueia a seleção de texto no jogo inteiro */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Bloqueia arrastar imagens e ignora o clique nelas */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  pointer-events: none;
}

/* Reset básico de layout */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Courier New", Courier, monospace;
}

/* Formatação base da página */
body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

#game-container {
  width: 100%;
  max-width: 900px;
  height: 90vh;
  background-color: var(--teal-dark);
  border: 2px solid var(--teal-main);
  box-shadow: 0 0 20px rgba(12, 77, 89, 0.3);
  display: flex;
  flex-direction: column;
  position: relative;
}

.header-on-top {
  z-index: 2500 !important;
  position: relative !important;
}

header {
  background-color: #010608;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--teal-main);
  font-weight: bold;
  font-size: 1rem;
  gap: 16px;
  transition: background-color 0.3s ease;
}

#game-container.day-time header {
  background-color: #1a2820;
}

.time-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 2px solid var(--teal-main);
  background-color: rgba(12, 77, 89, 0.2);
  border-radius: 4px;
  transition: all 0.3s ease;
}

#game-container.day-time .time-indicator {
  background-color: rgba(74, 143, 111, 0.2);
  border-color: var(--teal-main);
}

.time-indicator .action-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 4px currentColor);
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.header-chip,
#room-display,
.energy-bar {
  border: 1px solid var(--teal-main);
  background-color: #031317;
  padding: 8px 12px;
  color: var(--text-main);
  white-space: nowrap;
}

#day-display,
#status-box {
  display: none !important;
}

.energy-bar span {
  color: var(--teal-light);
}

.energy-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

#main-screen {
  display: flex;
  flex: 1;
  width: 100%;
}

.view-panel {
  flex: 2;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-right: 2px solid var(--teal-main);
}

.image-container {
  flex: 1;
  background-color: #000;
  border: 2px solid var(--teal-main);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.tutorial-objective {
  position: absolute;
  right: 12px;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 10px 12px;
  border: 1px solid rgba(122, 184, 138, 0.55);
  border-left: 3px solid var(--teal-light);
  background: rgba(1, 8, 10, 0.9);
  color: var(--text-main);
  text-align: left;
  pointer-events: none;
}

.tutorial-objective p {
  font-size: 0.9rem;
  line-height: 1.35;
}

.controls-panel {
  flex: 1;
  padding: 20px;
  background-color: #031317;
  display: flex;
  flex-direction: column;
  gap: 25px;
  overflow-y: auto;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.control-group h3 {
  font-size: 0.9rem;
  color: var(--teal-light);
  text-transform: uppercase;
  border-bottom: 1px solid var(--teal-main);
  padding-bottom: 5px;
  text-align: center;
}

.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.nav-room-btn {
  flex: 0 1 100px;
  min-width: 0;
}

.focused-screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 20px 22px 24px;
  gap: 16px;
  background-color: #010608;
}

#peephole-screen,
#guest-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 14px 24px;
  position: relative;
  overflow: hidden;
  padding: 0 3%;
}

#game-container.door-mode > header {
  display: none;
}

.focused-image-box {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  background-color: #000;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.focused-image-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.peephole-lens,
.guest-scene {
  isolation: isolate;
  position: absolute;
  inset: 0;
}

.guest-scene::after,
.peephole-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.48),
      transparent 32%,
      transparent 78%,
      rgba(0, 0, 0, 0.42)
    ),
    linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.42),
      transparent 28%,
      transparent 75%,
      rgba(0, 0, 0, 0.25)
    );
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.58);
}

.guest-scene > #guest-background,
.peephole-lens > #peephole-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  filter: brightness(0.72) saturate(0.85);
}

.guest-scene > #guest-img,
.peephole-lens > #peephole-character {
  position: absolute;
  z-index: 1;
  width: 80%;
  height: 96%;
  left: 25%;
  top: auto;
  bottom: 0;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: drop-shadow(14px 0 14px rgba(0, 0, 0, 0.3));
}

.focused-dialogue-box {
  min-height: 0;
  border: 2px solid var(--teal-main);
  background: rgba(1, 6, 8, 0.84);
  padding: 22px 26px;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  flex-direction: column;
}

.guide-overlay {
  z-index: 2500;
  padding: 16px;
}

.guide-frame {
  width: min(980px, 100%);
  height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide-frame-content {
  width: 100%;
  flex: 1;
  min-height: 0;
  border: 2px solid var(--teal-main);
  background: #071013;
}

#peephole-dialogue,
#guest-screen > #guest-status {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  width: min(92%, 520px);
  justify-self: center;
  height: auto;
  margin: 14% 0 0;
  overflow: visible;
  border-color: var(--teal-light);
  box-shadow: inset 0 0 28px rgba(12, 77, 89, 0.14);
}

.tutorial-text {
  color: #ffd36a;
  text-shadow: 0 0 8px rgba(255, 211, 106, 0.35);
}

.focused-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

#peephole-controls,
#guest-screen > #guest-controls {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 2;
  width: min(92%, 520px);
  justify-self: center;
  margin: 0;
}

#peephole-controls button:nth-child(3) {
  grid-column: 1 / -1;
}

.focused-options-grid button {
  min-height: 72px;
  border: 2px solid var(--teal-main);
  border-radius: 0;
  background: rgba(1, 6, 8, 0.78);
  color: var(--teal-light);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  font-weight: 400;
}

.focused-options-grid button:hover:not(:disabled) {
  background-color: var(--teal-dark);
  color: var(--text-main);
  border-color: var(--teal-light);
}

@media (max-width: 620px) {
  header {
    padding: 8px 10px;
    gap: 8px;
  }
  .header-stats {
    flex: 1 1 auto;
    gap: 6px;
  }
  .header-chip,
  #room-display,
  .energy-bar {
    padding: 6px 8px;
    font-size: 0.75rem;
  }
  .small-btn {
    padding: 6px 8px !important;
    font-size: 0.7rem !important;
  }
  .focused-screen {
    padding: 12px;
    gap: 12px;
  }
  #peephole-screen,
  #guest-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(280px, 1fr) auto auto;
    gap: 12px;
    padding: 0;
  }
  .guest-scene,
  .peephole-lens {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-height: 0;
  }
  .peephole-lens > #peephole-character,
  .guest-scene > #guest-img {
    width: 100%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  #peephole-dialogue,
  #peephole-controls,
  #guest-screen > #guest-status,
  #guest-screen > #guest-controls {
    grid-column: 1;
    width: calc(100% - 24px);
    margin: 0 12px;
    justify-self: stretch;
  }
  #peephole-dialogue,
  #guest-screen > #guest-status {
    grid-row: 2;
    align-self: end;
    height: auto;
  }
  #peephole-controls,
  #guest-screen > #guest-controls {
    grid-row: 3;
  }
  .focused-options-grid button {
    min-height: 58px;
    padding: 10px;
  }
}

button {
  background-color: var(--teal-main);
  color: var(--text-main);
  border: 2px solid var(--teal-light);
  padding: 15px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: bold;
}

button:hover:not(:disabled) {
  background-color: var(--teal-light);
  color: #000;
}

button:disabled {
  background-color: #1a1a1a;
  border-color: #333;
  color: #555;
  cursor: not-allowed;
  opacity: 0.6;
}

button.danger {
  background-color: var(--danger);
  border-color: #ff4d4d;
}
button.danger:hover:not(:disabled) {
  background-color: var(--danger-hover);
  color: #fff;
}

button.pale-girl-danger-choice {
  color: #fff;
  animation: pale-girl-pulse 1.25s ease-in-out infinite;
}

@keyframes pale-girl-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 77, 77, 0.15);
  }
  50% {
    box-shadow: 0 0 18px rgba(255, 77, 77, 0.85);
  }
}

button.small-btn {
  padding: 8px 15px;
  font-size: 0.85rem;
  background-color: #031317;
}

.icon-btn {
  padding: 2px;
  position: relative;
  background-color: var(--teal-dark);
  width: 100px;
  height: 70px;
  border: 2px solid transparent;
}

.icon-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: transparent;
}
.icon-btn:disabled img {
  filter: grayscale(100%) brightness(0.35);
}
.icon-btn.rounded {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.icon-btn.rounded img {
  border-radius: 50%;
}

.guest-identity-card {
  overflow: hidden;
  isolation: isolate;
}
.guest-identity-card .identity-background,
.guest-identity-card .identity-character {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.guest-identity-card .identity-background {
  z-index: 0;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.8);
}
.guest-identity-card .identity-character {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.action-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  flex: 0 0 24px;
  filter: brightness(0) invert(1);
}
.energy-bar .action-icon {
  width: 18px !important;
  height: 18px !important;
  flex-basis: 18px;
}
.icon-btn.current-room {
  cursor: default;
  border-color: #ff8c00;
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.6);
}
.icon-btn.current-room > img:first-child {
  filter: grayscale(1) brightness(3);
}
.icon-btn.current-room:hover {
  background-color: var(--teal-dark);
}
.room-marker,
.presence-marker,
.door-marker {
  position: absolute;
  bottom: 3px;
  width: 25px;
  height: 25px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.room-marker {
  right: 3px;
}
.room-marker img,
.presence-marker img,
.door-marker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.presence-marker {
  right: 30px;
}
.presence-marker span {
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1;
}
.door-marker {
  right: 3px;
}

@keyframes tv-pulse {
  0% {
    box-shadow: 0 0 5px var(--teal-main);
    border-color: var(--teal-main);
  }
  50% {
    box-shadow: 0 0 20px var(--teal-light);
    border-color: var(--teal-light);
  }
  100% {
    box-shadow: 0 0 5px var(--teal-main);
    border-color: var(--teal-main);
  }
}

.tv-alert-btn {
  animation: tv-pulse 1.5s infinite;
  color: #fff !important;
  text-shadow: 0 0 5px #fff;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(2, 10, 12, 0.98);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  text-align: center;
  padding: 40px;
  overflow-y: auto;
}
.ending-panel {
  width: min(100%, 980px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ending-stage {
  width: min(72vw, 560px);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 8, 10, 0.82);
  border: 2px solid var(--teal-light);
  padding: 12px;
  box-shadow: 0 0 16px rgba(36, 138, 158, 0.08);
  cursor: pointer;
}
.ending-stage img {
  width: 100%;
  height: min(62vh, 440px);
  object-fit: contain;
  border: 2px solid var(--teal-main);
  background: rgba(4, 16, 18, 0.8);
}
.ending-current-text {
  min-height: 72px;
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-main);
  text-align: center;
}
.thanks-panel {
  position: relative;
  width: min(100%, 900px);
  min-height: min(80vh, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vh, 22px);
  padding: clamp(18px, 4vw, 40px);
  box-sizing: border-box;
}
#end-screen .thanks-panel h1 {
  margin: 0;
}
.thanks-image {
  display: block;
  width: min(72vw, 560px);
  max-height: 42vh;
  object-fit: contain;
}
#end-screen .thanks-message {
  width: min(100%, 680px);
  margin: 0;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  line-height: 1.55;
}
.thanks-patreon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 2px solid var(--teal-light);
  border-radius: 6px;
  background: var(--teal-dark);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.thanks-patreon-btn:hover {
  background: var(--teal-main);
}
.thanks-logo-link {
  position: fixed;
  right: clamp(14px, 3vw, 32px);
  bottom: clamp(14px, 3vh, 28px);
  display: block;
  width: clamp(48px, 8vw, 76px);
  aspect-ratio: 1;
  z-index: 1;
}
.thanks-logo-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 620px) {
  #end-screen {
    padding: 12px;
  }
  .thanks-panel {
    width: 100%;
    min-height: 0;
    height: 100%;
    gap: 12px;
    padding: 12px 10px 76px;
  }
  #end-screen .thanks-panel h1 {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }
  .thanks-image {
    width: min(80vw, 460px);
    max-height: 30vh;
  }
  #end-screen .thanks-message {
    max-width: 600px;
    font-size: clamp(0.9rem, 3.8vw, 1.05rem);
    line-height: 1.4;
  }
  .thanks-logo-link {
    right: 12px;
    bottom: 12px;
  }
}
@media (max-width: 620px) and (max-height: 650px) {
  .thanks-panel {
    justify-content: flex-start;
    gap: 8px;
    padding-top: 4px;
  }
  #end-screen .thanks-panel h1 {
    font-size: clamp(1.25rem, 6vw, 1.7rem);
  }
  .thanks-image {
    width: min(68vw, 360px);
    max-height: 20vh;
  }
  #end-screen .thanks-message {
    font-size: clamp(0.78rem, 3vw, 0.92rem);
    line-height: 1.3;
  }
}
#window-overlay {
  z-index: 2600;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}
#main-menu-overlay {
  z-index: 3000;
}
#window-overlay-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
#window-overlay-back {
  position: absolute;
  bottom: 24px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}
.overlay h1 {
  font-size: 2.5rem;
  color: var(--teal-light);
  margin-bottom: 20px;
  text-shadow: 0 0 10px var(--teal-main);
}
.overlay p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  max-width: 600px;
  line-height: 1.5;
}
.overlay-image,
#test-gif-img {
  width: min(92vw, 820px);
  max-width: 500px;
  height: min(58vh, 520px);
  border: 4px solid var(--teal-light);
  margin-bottom: 20px;
  object-fit: contain;
  object-position: center;
  background:
    radial-gradient(
      circle at center,
      rgba(58, 167, 188, 0.12),
      transparent 55%
    ),
    rgba(1, 8, 10, 0.9);
  box-shadow: 0 0 18px rgba(36, 138, 158, 0.14);
}
#test-gif-img {
  max-width: none;
}

#sleep-transition {
  background:
    radial-gradient(
      circle at center,
      rgba(36, 138, 158, 0.16),
      transparent 45%
    ),
    rgba(1, 6, 8, 0.98);
  pointer-events: none;
}
#sleep-transition:not(.hidden) {
  animation: sleep-fade 2s ease-in-out both;
}
.sleep-transition-text {
  color: var(--teal-light);
  font-size: 1.4rem;
  letter-spacing: 0;
  text-shadow: 0 0 12px var(--teal-main);
  animation: sleep-text-pulse 2s ease-in-out both;
}

@keyframes sleep-fade {
  0% {
    opacity: 0;
    filter: blur(0);
  }
  30% {
    opacity: 1;
    filter: blur(1px);
  }
  70% {
    opacity: 1;
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    filter: blur(0);
  }
}

@keyframes sleep-text-pulse {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  35%,
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.hidden {
  display: none !important;
}
.indicator-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #ff4d4d;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 5px #000;
  font-weight: bold;
}
.alert-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  font-size: 1.2rem;
  text-shadow: 0 0 5px #ff0000;
}

.save-container {
  width: 100%;
  max-width: 700px;
  background-color: var(--bg-dark);
  border: 4px solid var(--teal-main);
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.save-slots-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
}
.save-slot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 4px solid var(--teal-light);
  padding: 15px 20px;
  background-color: #010608;
  font-size: 1.1rem;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}
.save-slot-row.is-latest {
  border-color: #8df5d0;
  box-shadow:
    0 0 12px rgba(75, 235, 188, 0.32),
    inset 0 0 18px rgba(75, 235, 188, 0.08);
}
.save-slot-row.is-saving {
  animation: save-slot-confirm 850ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.save-slot-row .slot-name {
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  color: var(--text-main);
}
.save-slot-row .slot-date {
  flex: 1;
  text-align: center;
  color: var(--teal-light);
}
.latest-save-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #8df5d0;
  color: #baffdf;
  background: rgba(27, 111, 87, 0.3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.save-load-confirm-overlay {
  z-index: 100001 !important;
}
.save-load-confirm-container {
  gap: 18px;
  text-align: center;
}
.save-load-confirm-container h2,
.save-load-confirm-container p {
  margin: 0;
}
.save-load-confirm-container h2 {
  color: var(--teal-light);
}
.save-load-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.save-load-confirm-actions button {
  min-width: 150px;
  padding: 12px 18px;
}
.save-slot-actions {
  display: flex;
  gap: 10px;
}
.save-slot-actions button {
  border: 3px solid var(--teal-light);
  padding: 8px 15px;
  font-size: 0.95rem;
  background-color: var(--bg-dark);
}
.save-bottom-actions {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 20px;
}
.save-bottom-actions button,
.save-bottom-actions label {
  flex: 1;
  border: 4px solid var(--teal-main);
  background-color: var(--bg-dark);
  color: var(--text-main);
  padding: 20px;
  font-size: 1.1rem;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}
.save-bottom-actions button:hover,
.save-bottom-actions label:hover {
  background-color: var(--teal-light);
  color: #000;
}
.close-menu-btn {
  align-self: center;
  padding: 10px 40px;
}

.overlay-content {
  background-color: #222;
  color: #fff;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
.overlay-content h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  color: var(--teal-light);
}
.overlay-content p {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text-main);
}
.overlay-content button {
  padding: 10px 20px;
  font-size: 14px;
  background-color: var(--teal-main);
  color: var(--text-main);
  border: 2px solid var(--teal-light);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.overlay-content button:hover:not(:disabled) {
  background-color: var(--teal-light);
  color: #000;
}
.overlay-content select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  background-color: #333;
  color: #fff;
  border: 2px solid var(--teal-main);
  border-radius: 4px;
  cursor: pointer;
}
.overlay-content select:hover {
  border-color: var(--teal-light);
}

.btn-wide {
  width: 200px;
}
.btn-wide-large {
  width: 250px;
}

#fridge-contents {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
#phone-select-container {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
#save-status-msg {
  color: var(--teal-light);
  text-align: center;
  margin-top: 15px;
  min-height: 20px;
}
#save-status-msg.save-status-success {
  color: #baffdf;
  text-shadow: 0 0 12px rgba(75, 235, 188, 0.7);
  animation: save-status-confirm 450ms ease-out both;
}
@keyframes save-slot-confirm {
  0% {
    transform: scale(0.97);
    background-color: rgba(75, 235, 188, 0.24);
    box-shadow: 0 0 28px rgba(75, 235, 188, 0.65);
  }
  65% {
    transform: scale(1.015);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes save-status-confirm {
  0% {
    opacity: 0.4;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .save-slot-row,
  #save-status-msg.save-status-success {
    animation: none;
  }
}
@media (max-width: 620px) {
  .save-slot-row {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 12px;
  }
  .save-slot-row .slot-name {
    grid-column: 1;
  }
  .save-slot-row .slot-date {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .latest-save-badge {
    grid-column: 2;
    grid-row: 1;
  }
  .save-slot-actions {
    grid-column: 1 / -1;
  }
  .save-slot-actions button {
    flex: 1;
    padding: 8px;
  }
  .save-load-confirm-actions {
    flex-direction: column-reverse;
  }
}
#tv-overlay h1 {
  color: #fff;
}
#tv-news-title {
  color: var(--teal-light) !important;
  margin-bottom: 10px !important;
}
#end-message {
  margin-bottom: 20px;
}

@keyframes consumeItemFloat {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(1.5);
  }
}
@keyframes consumeLabelFloat {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(1.2);
  }
}

/* =========================================
   TELA INICIAL (MAIN MENU)
========================================= */
#start-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  background-color: #000;
  border-radius: inherit;
  overflow: hidden;
}

/* Fundo Escuro com Filtro e Animações */
/* Fundo sem o filtro esverdeado, mas mantendo a escuridão e contraste */
.start-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.3);
  z-index: 1;
  animation:
    camera-pan 25s infinite alternate ease-in-out,
    glitch-flicker 6s infinite;
}

/* =========================================
   CARROSSÉIS LATERAIS DE IMAGENS
========================================= */
.carousel-left,
.carousel-right {
  position: absolute;
  top: 0;
  width: 12vw; /* Ajustado para não encostar no centro */
  max-width: 150px; /* Bem menor para evitar sobreposição */
  height: 100%;
  overflow: hidden;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.carousel-left {
  left: 3vw;
}

.carousel-right {
  right: 3vw;
}

.carousel-track {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.carousel-track img {
  width: 100%;
  aspect-ratio: 1.8 / 1;
  object-fit: cover;
  margin-bottom: 15vh;
  border: 2px solid #c2d6d9;
  filter: grayscale(100%) sepia(0.2) hue-rotate(120deg) saturate(0.2)
    brightness(0.7) contrast(1.8);
  image-rendering: pixelated;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  display: block;
}
/* Aplicação das animações por etapas */
.track-down {
  animation: step-scroll-down 24s infinite;
}

.track-up {
  animation: step-scroll-up 24s infinite;
}

/* Sombra Circular (Olho Mágico) */
.start-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 35%,
    rgba(0, 0, 0, 0.4) 75%,
    #000 98%
  );
  z-index: 3;
  pointer-events: none;
}

/* Efeito de Scanlines (Linhas de TV Antiga) */
.start-vignette::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/* Container do Conteúdo */
.start-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Imagem do Título */
.main-title-img {
  width: 55vw; /* Limita a largura para reservar espaço para os carrosséis */
  max-width: 400px;
  object-fit: contain;
  margin-bottom: 40px;
  filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.9));
  animation: float-title 4s infinite ease-in-out;
}

/* Botões Centrais */
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 240px;
}

.menu-buttons button {
  background: transparent;
  border: 2px solid #ffffff;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.25rem;
  padding: 14px 18px;
  font-weight: bold;
  cursor: pointer;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  box-shadow: none;
  transition:
    transform 0.2s ease-in-out,
    background 0.2s ease-in-out,
    color 0.2s;
}

.menu-buttons button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #a3c9b6;
  color: #a3c9b6;
  transform: scale(1.05);
}

/* Logo no Quadrado */
.side-logo-link {
  position: absolute;
  bottom: 30px;
  width: 80px;
  height: 80px;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
  overflow: hidden;
}

.side-logo-link:hover {
  transform: scale(1.1);
  border-color: #a3c9b6;
}

.side-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  color: #fff;
  font-size: 0.8rem;
  font-family: "Courier New", Courier, monospace;
}

/* Responsividade (Telas Menores) */
@media (max-width: 768px) {
  .carousel-left {
    left: 1vw;
    width: 18vw;
  }
  .carousel-right {
    right: 1vw;
    width: 18vw;
  }
}

@media (max-width: 620px) {
  .carousel-left,
  .carousel-right {
    display: none; /* Esconde para não cobrir o menu em telemóveis */
  }
  .side-logo-link {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
  }
  .side-logo-link:hover {
    transform: translateX(-50%) scale(1.1);
  }
}

@media (max-width: 760px) {
  #main-screen {
    min-height: 0;
    flex-direction: column;
  }
  #main-screen .view-panel {
    flex: 1 1 42%;
    min-height: 0;
    padding: 8px;
    border-right: 0;
    border-bottom: 2px solid var(--teal-main);
  }
  #main-screen .controls-panel {
    flex: 1 1 58%;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    gap: 14px;
  }
  #controls .control-group {
    min-width: 0;
    gap: 8px;
  }
  #controls .control-group:first-child .icon-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
    gap: 6px;
  }
  #controls .nav-room-btn {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 10 / 7;
    padding: 2px;
  }
  #controls .nav-room-btn .room-marker,
  #controls .nav-room-btn .presence-marker,
  #controls .nav-room-btn .door-marker {
    width: clamp(15px, 5vw, 22px);
    height: clamp(15px, 5vw, 22px);
    bottom: 1px;
  }
  #controls .nav-room-btn .presence-marker {
    right: clamp(18px, 6vw, 26px);
  }
  #controls .nav-room-btn .presence-marker span {
    font-size: clamp(0.55rem, 2.5vw, 0.7rem);
  }
  #controls .control-group > div[style*="display: grid"] button {
    min-width: 0;
    padding: 10px;
    font-size: 0.9rem;
  }
}

@media (max-height: 600px) and (min-width: 761px) {
  #main-screen .controls-panel {
    min-width: 0;
    padding: 8px;
    gap: 10px;
  }
  #controls .control-group {
    min-width: 0;
    gap: 8px;
  }
  #controls .control-group:first-child .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    gap: 5px;
  }
  #controls .nav-room-btn {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 10 / 7;
    padding: 2px;
  }
}

/* =========================================
   KEYFRAMES (ANIMAÇÕES DO MENU)
========================================= */
@keyframes camera-pan {
  0% {
    transform: scale(1.02) translate(0, 0);
  }
  100% {
    transform: scale(1.12) translate(-1%, 1%);
  }
}

@keyframes glitch-flicker {
  0%,
  91%,
  95%,
  100% {
    opacity: 1;
    filter: brightness(1.3);
  }
  92% {
    opacity: 0.8;
    filter: brightness(1.7) contrast(1.2);
  }
  94% {
    opacity: 0.6;
    filter: brightness(0.5);
  }
  96% {
    opacity: 0.9;
    filter: brightness(1.3);
  }
}

@keyframes float-title {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Animação do carrossel direito (Para Cima, com pausas) */
@keyframes step-scroll-up {
  0%,
  12% {
    transform: translateY(0);
  }
  16.66%,
  28.66% {
    transform: translateY(-8.333%);
  }
  33.33%,
  45.33% {
    transform: translateY(-16.666%);
  }
  50%,
  62% {
    transform: translateY(-25%);
  }
  66.66%,
  78.66% {
    transform: translateY(-33.333%);
  }
  83.33%,
  95.33% {
    transform: translateY(-41.666%);
  }
  100% {
    transform: translateY(-50%);
  }
}

/* Animação do carrossel esquerdo (Para Baixo, com pausas) */
@keyframes step-scroll-down {
  0%,
  12% {
    transform: translateY(-50%);
  }
  16.66%,
  28.66% {
    transform: translateY(-41.666%);
  }
  33.33%,
  45.33% {
    transform: translateY(-33.333%);
  }
  50%,
  62% {
    transform: translateY(-25%);
  }
  66.66%,
  78.66% {
    transform: translateY(-16.666%);
  }
  83.33%,
  95.33% {
    transform: translateY(-8.333%);
  }
  100% {
    transform: translateY(0);
  }
}

/* =========================================
   CORREÇÃO DO MENU DE SAVE
========================================= */
#save-menu {
  z-index: 99999 !important;
}

/* =========================================
   MENU DE CONQUISTAS (ACHIEVEMENTS)
========================================= */
#achievements-menu {
  z-index: 15000 !important; /* Fica acima de tudo, igual ao save menu */
}

.achievements-container {
  width: 95%;
  max-width: 800px;
  height: 85vh;
  background-color: #0b1c18; /* Verde escuro do print */
  border: 2px solid #204539;
  padding: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
}

.achievements-header {
  font-family: "Courier New", Courier, monospace;
  font-size: 2rem;
  color: #fff;
  text-align: left;
  border-bottom: 2px solid #204539;
  padding-bottom: 15px;
  margin-bottom: 10px;
}

/* Área rolável da lista */
.achievements-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-right: 15px; /* Espaço para a barra de rolagem */
}

/* Customização da barra de rolagem para combinar com o jogo */
.achievements-list::-webkit-scrollbar {
  width: 8px;
}
.achievements-list::-webkit-scrollbar-track {
  background: #06110f;
}
.achievements-list::-webkit-scrollbar-thumb {
  background: #204539;
  border-radius: 4px;
}

/* Item individual */
.achievement-item {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 25px 10px;
  border-bottom: 1px solid #1a332a; /* Linha divisória suave */
}

.achievement-item:last-child {
  border-bottom: none;
}

/* Quadrado reservado para a imagem do achievement */
.achievement-icon {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  background-color: #06110f;
  border: 2px solid #4a8270; /* Borda verde clara do print */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Quando você adicionar as imagens, use <img src="..."> dentro da div .achievement-icon. Esta regra vai formatá-la: */
.achievement-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Textos */
.achievement-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.achievement-title {
  font-family: Arial, sans-serif; /* Fonte sem serifa para facilitar leitura */
  font-weight: 900;
  font-size: 1.15rem;
  color: #ffffff;
  text-transform: uppercase;
}

.achievement-desc {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  color: #c7d6d1; /* Texto ligeiramente esverdeado/cinza */
  line-height: 1.4;
}

/* =========================================
   SISTEMA DE NOTIFICAÇÃO (TOAST)
========================================= */
.achievement-toast {
  position: fixed;
  top: 20px;
  right: -400px; /* Começa escondido fora da tela */
  width: 320px;
  background-color: #0b1c18;
  border: 2px solid #204539;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  z-index: 999999;
  transition: right 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animação elástica */
}

/* Classe que o JS vai adicionar para mostrar na tela */
.achievement-toast.show {
  right: 20px;
}

.toast-icon {
  width: 55px;
  height: 55px;
  background-color: #06110f;
  border: 1px solid #4a8270;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.toast-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toast-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toast-label {
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  color: #4a8270;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.toast-title {
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  color: #ffffff;
}

/* Efeito para conquistas não descobertas (Cinza e Transparente) */
.achievement-item.locked {
  opacity: 0.35;
  filter: grayscale(100%);
  pointer-events: none; /* Impede interações extras */
}

/* Quadrado de imagem para conquistas bloqueadas */
.achievement-icon.locked-icon {
  background-color: #030807;
  border-color: #1a332a;
}

/* O ponto de interrogação no centro */
.locked-question-mark {
  font-family: "Courier New", Courier, monospace;
  font-size: 2.5rem;
  color: #204539;
  font-weight: bold;
}

/* --- TELA DE AVISO / DISCLAIMER --- */
#disclaimer-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #05080a;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: clamp(10px, 3vh, 24px) clamp(10px, 3vw, 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: "Courier New", Courier, monospace;
}

.disclaimer-box {
  border: 1px solid #4a8f6f;
  background-color: #010608;
  max-width: 800px;
  max-height: calc(100vh - 2 * clamp(10px, 3vh, 24px));
  max-height: calc(100dvh - 2 * clamp(10px, 3vh, 24px));
  width: 100%;
  padding: clamp(16px, 4vw, 40px);
  margin-block: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.9);
  text-align: left;
}

.disclaimer-title {
  flex: 0 0 auto;
  color: #d4af37;
  text-align: center;
  margin-bottom: clamp(14px, 3vh, 30px);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-family: Georgia, serif;
  letter-spacing: 1px;
}

.disclaimer-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  color: #ccc;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: clamp(14px, 3vh, 30px);
}

.disclaimer-heading {
  color: #fff;
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 5px;
}

.disclaimer-text {
  margin-top: 0;
  margin-bottom: 15px;
}

.disclaimer-last-text {
  margin-bottom: 0;
}

#disclaimer-error {
  color: #888;
  text-align: center;
  margin-bottom: 20px;
  min-height: 1.2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 0.9rem;
}

.disclaimer-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-confirm-age,
.btn-reject-age {
  flex: 1;
  min-width: 250px;
  padding: 12px;
  background: transparent;
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-confirm-age {
  color: #fff;
  border: 1px solid #4a8f6f;
}

.btn-confirm-age:hover {
  background-color: #4a8f6f;
  color: #000;
}

.btn-reject-age {
  color: #555;
  border: 1px solid #333;
}

.btn-reject-age:hover {
  border-color: #777;
  color: #aaa;
}

@media (max-width: 600px) {
  .disclaimer-box {
    padding: 18px 16px;
  }

  .disclaimer-title {
    font-size: clamp(1.05rem, 5vw, 1.35rem);
    line-height: 1.25;
    letter-spacing: 0.5px;
  }

  .disclaimer-content {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .disclaimer-heading {
    font-size: 0.92rem;
  }

  .disclaimer-text {
    margin-bottom: 10px;
  }

  #disclaimer-error {
    margin-bottom: 12px;
    font-size: 0.82rem;
  }

  .disclaimer-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .btn-confirm-age,
  .btn-reject-age {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    padding: 12px 8px;
    font-size: 0.8rem;
  }
}

@media (max-height: 600px) {
  #disclaimer-screen {
    padding-block: 8px;
  }

  .disclaimer-box {
    padding-block: 14px;
  }

  .disclaimer-title,
  .disclaimer-content {
    margin-bottom: 12px;
  }

  .disclaimer-text {
    margin-bottom: 8px;
  }

  #disclaimer-error {
    margin-bottom: 10px;
  }
}