/* Scoped container so we don't overwrite global body styles */
#app {
  max-width: 640px;
  margin: 2em auto;
  background: #f8f8f8;
  border: 1px solid #0074d9;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  padding: 1.5em 2em 2.5em 2em;
  color: #111;
}

/* Dark emphasis blocks inside light container */
.locked, .unlocked, .flip-result {
  background: #222;
  border: 1px solid #444;
}

input, textarea {
  font-size: 1.05em;
  margin: 0.4em 0;
  padding: 0.5em 0.6em;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: inherit;
}
textarea { width: 100%; box-sizing: border-box; }

button { font-family: inherit; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Reuse global .button and allow sizing variations */
.game-btn { @media (min-width:0){/* placeholder to ensure rule kept */} }
.game-btn.button { margin-right: .5em; margin-bottom:.5em; }
/* Alternate success style */
.button-success {
  background:#2e8b57;
}
.button-success:hover {
  background:#256c45;
}
hr {
  border: none;
  border-top: 1px solid #444;
  margin: 1.5em 0;
}
.state-string {
  word-break: break-all;
  font-size: 0.9em;
  background: #333;
  padding: 0.5em;
  border-radius: 6px;
  margin: 0.5em 0;
}
.locked {
  color: #d4af37;
  border-radius: 10px;
  padding: 1em 1.2em;
  margin-bottom: 1em;
  font-size: 1.05em;
}
.unlocked {
  color: #2e8b57;
  border-radius: 10px;
  padding: 1em 1.2em;
  margin-bottom: 1em;
  font-size: 1.05em;
}
.desc {
  display: block;
  color: #fff;
  margin-top: 0.5em;
}
.virtue {
  display: block;
  color: #4caf50;
  margin-top: 0.5em;
}
.calendar {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
  font-size: 0.95em;
}
.calendar td {
  border: 1px solid #444;
  min-width: 40px;
  height: 48px;
  vertical-align: middle;
  font-weight: bold;
}
.calendar tr {
  background: none;
}

/* Banner and mode toggle */
.banner {
  width: 100%;
  height: 96px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;
}
.banner-sfw {
  background: linear-gradient(135deg, #1f2a44, #243b55);
}
.banner-nsfw {
  background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b);
}
.banner .banner-icon { font-size: 2rem; }
.mode-row { display:flex; align-items:center; justify-content:space-between; }
.mode-row .subhead { color:#bbb; margin-top: -0.25em; }
.mode-toggle { display:flex; gap:0.5em; align-items:center; font-size:0.95em; color:#ddd; }

/* Flip result box styling to match site */
/* Flip result box styling - dark theme, visually consistent */
.flip-result {
  border-radius: 10px;
  padding: 1em 1.2em;
  margin: 1em 0 0.5em 0;
  font-size: 1.05em;
  color: #d4af37;
}