#states { list-style:none; padding:0; display:flex; gap:4px; flex-wrap:wrap; }
#states li { padding:2px 4px; background:#222; border-radius:3px; }
#states li .ttl { font-size:0.8em; margin-left:2px; }
.trust { display:block; }
#trust { list-style:none; padding:0; margin:0 0 0.25rem 0; display:flex; gap:6px; flex-wrap:wrap; }
#trust li { padding:3px 6px; background:#222; border-radius:4px; font-size:0.9em; }
.chip.time-mod { background:#444; }

#toast-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  align-items: center;
}

@media (max-width: 640px) {
  #toast-container {
    top: 100%;
    transform: translate(-50%, 0);
    margin-top: 0.25rem;
  }
}

#toast-container .toast {
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--border);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 2px 8px var(--shadow);
  font-size: 1rem;
}

#toast-container .toast.toast--red {
  border-color: var(--danger);
  background: rgba(255, 107, 107, 0.15);
}

#toast-container .toast.toast--gold {
  border-color: var(--focus);
  background: rgba(255, 209, 102, 0.15);
}

#toast-container .toast.toast--blue {
  border-color: var(--accent);
  background: rgba(139, 208, 255, 0.15);
}
/* --- Footer Social Icons Styling --- */

/* This targets the container for the social links */
.footer-socials {
  display: flex; /* Aligns icons in a row */
  align-items: center; /* Vertically centers the icons if needed */
  gap: 1rem;     /* Creates space between each icon. Adjust 1rem as you see fit. */
}

/* This targets the individual icon links */
.footer-socials a {
  text-decoration: none; /* **Removes the underline** from the links */
  color: #cccccc;        /* Sets the **default icon color** to light grey */
  transition: color 0.2s ease-in-out; /* Adds a smooth transition for the hover effect */
}

/* This changes the color when you mouse over an icon */
.footer-socials a:hover {
  color: #a972ff; /* Sets the **icon color on hover** to a nice purple */
}

/* Ensure keyboard users can see focus */
.footer-socials a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- General Footer Layout --- */

/* Optional: This helps align the copyright text and social icons on opposite sides */
.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ensure footer spans the full width */
    padding: 1rem 2rem; /* Example padding */
    box-sizing: border-box;
}

@media (max-width: 480px) {
  .tutorial-entry small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }
}

/* --- Privacy Modal Styles --- */
.privacy-modal-content {
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.privacy-intro {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--panel);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.privacy-intro p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

.privacy-section {
  margin-bottom: 1.5rem;
}

.privacy-section h3 {
  margin: 0 0 1rem 0;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
}

.privacy-toggle {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.privacy-toggle .toggle-label {
  flex: 1;
}

.privacy-toggle .toggle-text {
  display: block;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.privacy-toggle .toggle-description {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.privacy-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.2s ease;
}

.radio-option:hover {
  border-color: var(--focus);
}

.radio-option input[type="radio"] {
  margin-top: 0.125rem;
  accent-color: var(--focus);
}

.radio-label {
  flex: 1;
}

.radio-label strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.radio-description {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.privacy-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.privacy-info {
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.privacy-info h3 {
  margin: 0 0 0.75rem 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}

.privacy-info ul {
  margin: 0;
  padding-left: 1.25rem;
}

.privacy-info li {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

.privacy-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .privacy-modal-content {
    margin: 1rem;
    max-height: 90vh;
  }

  .privacy-toggle {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .privacy-toggle .toggle-switch {
    align-self: flex-start;
  }
}

/* --- Right sidebar split panels (Inventory + Promises) --- */
.hud-right {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.75rem;
  width: 320px;
  box-sizing: border-box;
}

.hud-right .panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  overflow: hidden;
}

/* Make Trust and States visually match the panels in the right HUD */
.hud-right .trust,
.hud-right .states {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
}
.hud-right .trust { margin-bottom: 0.5rem; }
.hud-right .trust strong,
.hud-right .states strong { display:block; margin-bottom:0.25rem; font-size:0.95em; }

/* Slightly tighten the lists inside these widgets */
#trust { margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap; }
#trust li { padding:3px 6px; background:#222; border-radius:4px; font-size:0.9em; }

.hud-right .panel .panel-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.5rem;
  margin-bottom:0.5rem;
}

.hud-right .panel .panel-body {
  max-height: calc(65vh - 4rem);
  overflow-y: auto;
  padding-right: 0.25rem;
}

.hud-right .panel .panel-body::-webkit-scrollbar{ width:8px }
.hud-right .panel .panel-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.03); border-radius:8px }

/* make sure the overall HUD stays usable on narrow viewports */
@media (max-width: 900px) {
  .hud-right { width: 260px; }
  .hud-right .panel .panel-body { max-height: calc(50vh - 4rem); }
}

/* Mobile: hide sidebar and expose quick toggles in header */
@media (max-width: 780px) {
  .hud-right { display: none; }
  .top-actions { display:flex; gap:0.5rem; }
  .top-actions .quick-open { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:6px; }
}

/* Keep quick-open header buttons hidden on desktop even if JS unhides them */
.top-actions .quick-open { display: none; }

/* Drawer styles for mobile panels */
.drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--panel);
  border-top: 1px solid var(--border);
  max-height: 90vh;
  transform: translateY(100%);
  transition: transform 220ms ease;
  z-index: 1200;
  display: none; /* Hide on desktop */
  flex-direction: column;
}
.drawer.open { transform: translateY(0%); }
.drawer .drawer-header { display:flex; justify-content:space-between; align-items:center; padding:0.75rem; border-bottom:1px solid var(--border); }
.drawer .drawer-tabs { display:flex; border-bottom:1px solid var(--border); }
.drawer .drawer-tab { flex:1; padding:0.75rem; background:none; border:none; color:var(--text-secondary); cursor:pointer; transition:color 0.2s ease; }
.drawer .drawer-tab.active { color:var(--text); border-bottom:2px solid var(--focus); }
.drawer .drawer-tab:hover { color:var(--text); }
.drawer .drawer-body { overflow-y:auto; padding:0.75rem; }
.drawer .drawer-panel { display:none; }
.drawer .drawer-panel.active { display:block; }

/* when a drawer is open, avoid inline style changes by toggling this class */
body.drawer-open { overflow: hidden; }

/* Mobile: show drawer at top instead of bottom */
@media (max-width: 780px) {
  .drawer {
    display: flex; /* Show on mobile */
    top: 0; /* Position at top instead of bottom */
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 16px 16px; /* Round bottom corners instead of top */
    transform: translateY(-100%); /* Hide above viewport */
  }
  .drawer.open {
    transform: translateY(0%); /* Slide down from top */
  }
}

/* Ensure hidden-actions are properly hidden on desktop during gameplay */
#hidden-actions[hidden] {
  display: none !important;
}