/**
 * Daily Encoded Trivia CSS
 * Based on Rebus Puzzles CSS
 */

/* ===== CSS RESET AND BASE STYLES ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: #f5f5f5;
  /* Fixed padding for navbar space - prevents CLS */
  padding-top: 52px;
  min-height: 100vh;
  overflow-x: hidden;
}

body.has-navbar-fixed-top {
  background-image: url('https://puzzledepot.com/pics/xword_ba.gif');
  background-repeat: repeat;
  background-size: 64px 64px;
  background-color: #e0e0e0;
  /* Explicit padding to prevent layout shift from navbar */
  padding-top: 52px;
}

/* ===== LAYOUT UTILITIES ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
}

.columns.is-centered {
  justify-content: center;
}

.column {
  flex: 1;
  padding: 0 0.5rem;
  min-width: 0;
}

.column.is-narrow {
  flex: none;
}

/* ===== NAVBAR ===== */
.navbar {
  background-color: #3273dc;
  color: white;
  /* Explicit fixed height to prevent CLS */
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Contain layout to prevent shifts */
  contain: layout style;
}

.navbar-brand {
  display: flex;
  align-items: stretch;
  min-height: 3.25rem;
}

.navbar-item {
  display: flex;
  align-items: center;
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

.navbar-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.navbar-item.is-active {
  background-color: rgba(0, 0, 0, 0.2);
  font-weight: bold;
}

.navbar-burger {
  color: white;
  cursor: pointer;
  display: block;
  height: 3.25rem;
  position: relative;
  width: 3.25rem;
  margin-left: auto;
  background: none;
  border: none;
}

.navbar-burger span {
  background-color: currentColor;
  display: block;
  height: 1px;
  left: calc(50% - 8px);
  position: absolute;
  transform-origin: center;
  transition-duration: 86ms;
  transition-property: background-color, opacity, transform;
  transition-timing-function: ease-out;
  width: 16px;
}

.navbar-burger span:nth-child(1) {
  top: calc(50% - 6px);
}

.navbar-burger span:nth-child(2) {
  top: calc(50% - 1px);
}

.navbar-burger span:nth-child(3) {
  top: calc(50% + 4px);
}

.navbar-burger.is-active span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.navbar-burger.is-active span:nth-child(2) {
  opacity: 0;
}

.navbar-burger.is-active span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.navbar-menu {
  display: none;
}

.navbar-menu.is-active {
  display: block;
  background-color: #3273dc;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.5rem 0;
}

@media screen and (min-width: 1024px) {
  .navbar {
    display: flex;
    align-items: stretch;
  }

  .navbar-burger {
    display: none;
  }

  .navbar-menu {
    display: flex;
    flex-grow: 1;
    align-items: stretch;
  }

  .navbar-start {
    display: flex;
    justify-content: flex-start;
    margin-right: auto;
    align-items: stretch;
  }

  .navbar-end {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    align-items: stretch;
  }
}

/* ===== BUTTONS ===== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: calc(0.5em - 1px) 1em;
  text-align: center;
  white-space: nowrap;
  font-size: 1rem;
  height: 2.5em;
  line-height: 1.5;
  position: relative;
  vertical-align: top;
  user-select: none;
  transition: all 0.15s ease;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button.is-small {
  font-size: 0.75rem;
  border-radius: 2px;
}

.button.is-medium {
  font-size: 1.25rem;
  /* Explicit dimensions to prevent CLS */
  min-width: 100px;
  min-height: 40px;
}

/* Submit button stability for CLS prevention */
#submitBtn {
  min-width: 100px;
  min-height: 40px;
}

#hintBtn {
  min-width: 140px;
  min-height: 40px;
}

.button.is-link {
  background-color: #3273dc;
  border-color: transparent;
  color: #fff;
}

.button.is-link:hover:not(:disabled) {
  background-color: #276cda;
}

.button.is-primary {
  background-color: #0f8f8f !important;
  border-color: #0c7070 !important;
  color: #fefefe !important;
  font-weight: 800 !important;
}

.button.is-primary:hover:not(:disabled) {
  background-color: #0c7a7a !important;
}

.button.is-warning {
  background-color: #ffdd57;
  border-color: transparent;
  color: rgba(0, 0, 0, 0.7);
}

.button.is-warning:hover:not(:disabled) {
  background-color: #ffdb4a;
}

.button.is-info {
  background-color: #3298dc;
  border-color: transparent;
  color: #fff;
}

.button.is-success {
  /* Darker green for better contrast with white text (WCAG AA compliant) */
  background-color: #146b2c !important;
  border-color: #0f5621 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.button.is-success:hover:not(:disabled) {
  background-color: #0f5621 !important;
}

/* Navbar notification button - ensure high contrast */
#navNotifyBtn {
  background-color: #146b2c !important;
  border-color: #0f5621 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

#navNotifyBtn:hover:not(:disabled) {
  background-color: #0f5621 !important;
}

/* Notification CTA button */
#notifyCtaBtn {
  background-color: #146b2c !important;
  border-color: #0f5621 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

#notifyCtaBtn:hover:not(:disabled) {
  background-color: #0f5621 !important;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 0.25rem;
}

/* ===== TYPOGRAPHY ===== */
.title {
  color: #363636;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.125;
  margin-bottom: 1.5rem;
}

.title.is-2 {
  font-size: 2.5rem;
}

.title.is-5 {
  font-size: 1.25rem;
}

.subtitle {
  color: #4a4a4a;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 1.5rem;
}

.subtitle.is-5 {
  font-size: 1.25rem;
}

.has-text-centered {
  text-align: center;
}

.has-text-white {
  color: white !important;
}

.has-text-primary {
  color: #00d1b2 !important;
}

.has-text-weight-bold {
  font-weight: 700 !important;
}

.has-background-info {
  background-color: #3298dc !important;
}

.has-background-link {
  background-color: #3273dc !important;
}

.has-background-light {
  background-color: #f5f5f5 !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.mb-5 {
  margin-bottom: 1.5rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mt-5 {
  margin-top: 1.5rem !important;
}

.p-3 {
  padding: 0.75rem !important;
}

/* ===== FORMS ===== */
.field {
  margin-bottom: 0.75rem;
}

.field.is-grouped {
  display: flex;
  justify-content: flex-start;
}

.field.is-grouped.is-grouped-centered {
  justify-content: center;
}

.field.is-grouped>.control {
  flex-shrink: 0;
}

.field.is-grouped>.control:not(:last-child) {
  margin-right: 0.75rem;
}

.control {
  box-sizing: border-box;
  clear: both;
  font-size: 1rem;
  position: relative;
  text-align: inherit;
}

.control.is-expanded {
  flex-grow: 1;
  flex-shrink: 1;
}

.input {
  background-color: #fff;
  border-color: #dbdbdb;
  border-radius: 4px;
  color: #363636;
  box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
  max-width: 100%;
  width: 100%;
  padding: calc(0.5em - 1px) calc(0.75em - 1px);
  border: 1px solid #dbdbdb;
  height: 2.5em;
  font-size: 1rem;
}

.input.is-large {
  font-size: 1.5rem;
  height: 2.5em;
}

.input:focus {
  border-color: #3273dc;
  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
  outline: none;
}

/* ===== GAME SPECIFIC ===== */
.game-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  /* Contain paint to isolate from layout shifts */
  contain: paint;
}

.game-container.dark-theme {
  background: #1d1f26;
  color: #f0f2f7;
  border: 1px solid #2a2d38;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.game-board {
  /* Reserve vertical space to prevent layout shifts */
  min-height: 600px;
  /* Contain layout recalculations */
  contain: layout style;
  /* Prevent content from causing shifts */
  overflow: visible;
  background: #252836;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.input-section {
  margin-bottom: 1rem;
  /* Explicit fixed height prevents CLS */
  min-height: 140px;
  height: 140px;
  /* Contain layout to prevent reflows */
  contain: layout style;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Input field stability */
.input-section .field {
  min-height: 52px;
}

.input-section .field.is-grouped {
  min-height: 45px;
}

.puzzle-container {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2b2f3c;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.puzzle-text {
  font-size: 2.5rem;
  font-weight: 900;
  color: #ffd700 !important;
  text-align: center;
  line-height: 1.4;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.answer-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.answer-tile {
  width: 2.5rem;
  height: 3rem;
  border-bottom: 3px solid #dbdbdb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #363636;
  margin-right: 0.25rem;
}

.answer-tile.correct {
  background-color: #48c774;
  /* Green */
  color: white;
  border-bottom: none;
  border-radius: 4px;
}

.answer-tile.present {
  background-color: #ffdd57;
  /* Yellow */
  color: white;
  border-bottom: none;
  border-radius: 4px;
}

.answer-tile.absent {
  background-color: #b5b5b5;
  /* Grey */
  color: white;
  border-bottom: none;
  border-radius: 4px;
}

.answer-tile.space {
  width: 1.5rem;
  border-bottom: none;
  background-color: transparent;
}

.answer-tile.filled {
  border-bottom-color: #3273dc;
  color: #3273dc;
}

.answer-tile.revealed {
  /* Map revealed to correct style if we want them green,
     or keep blue text if we want them to look like "filled in" blanks.
     User asked for "green tile" for correct letters. */
  background-color: #48c774;
  color: white;
  border-bottom: none;
  border-radius: 4px;
}

.answer-tile.punctuation {
  border-bottom: none;
}

.guess-item {
  padding: 0.75rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.guess-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}

.guess-tile {
  width: 2rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 4px;
  color: white;
  background-color: #b5b5b5;
}

.guess-tile.correct {
  background-color: #48c774;
}

.guess-tile.present {
  background-color: #ffdd57;
  color: rgba(0, 0, 0, 0.7);
}

.guess-tile.absent {
  background-color: #787c7e;
}

.guess-tile.space {
  width: 15px;
  border: none;
  background: transparent;
}

.attempt-label {
  font-size: 0.75rem;
  color: #666;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* ===== COMPLETION OVERLAY ===== */
.completion-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  text-align: center;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: slideDown 0.3s ease-out;
}

.completion-overlay.is-success {
  background: linear-gradient(135deg, #48c774 0%, #3eb368 100%);
  color: white;
}

.completion-overlay.is-danger {
  background: linear-gradient(135deg, #f14668 0%, #e03e5c 100%);
  color: white;
}

.completion-message p {
  margin-bottom: 0.5rem;
}

.completion-overlay .button.is-white.is-outlined {
  background-color: white;
  border-color: white;
  color: #363636;
  font-weight: 600;
}

.completion-overlay .button.is-white.is-outlined:hover {
  background-color: #f5f5f5;
  border-color: #f5f5f5;
  color: #363636;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== TABS (for notification modal) ===== */
.tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.tabs ul {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dbdbdb;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs li {
  display: block;
}

.tabs li.is-active a {
  border-bottom-color: #3273dc;
  color: #3273dc;
}

.tabs a {
  align-items: center;
  border-bottom: 1px solid #dbdbdb;
  color: #4a4a4a;
  display: flex;
  justify-content: center;
  margin-bottom: -1px;
  padding: 0.5em 1em;
  vertical-align: top;
  text-decoration: none;
  cursor: pointer;
}

.tabs a:hover {
  border-bottom-color: #363636;
  color: #363636;
}

.tabs.is-centered ul {
  justify-content: center;
}

.tabs.is-boxed a {
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.tabs.is-boxed li.is-active a {
  background-color: white;
  border-color: #dbdbdb;
  border-bottom-color: transparent !important;
}

/* Level display (for stats) */
.level {
  display: flex;
  justify-content: space-between;
}

.level.is-mobile {
  display: flex;
}

.level-item {
  align-items: center;
  display: flex;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
}

.level-item.has-text-centered {
  text-align: center;
}

.heading {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.notification {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 1.25rem 2.5rem 1.25rem 1.5rem;
  position: relative;
}

.notification.is-info.is-light {
  background-color: #eef6fc;
  color: #1d72aa;
}

.notification.is-success {
  background-color: #48c774;
  color: #fff;
}

.notification.is-danger {
  background-color: #f14668;
  color: #fff;
}

.notification.is-warning {
  background-color: #ffdd57;
  color: rgba(0, 0, 0, 0.7);
}

/* ===== MODALS ===== */
.modal {
  display: none;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 40;
}

.modal.is-active {
  display: flex;
}

.modal-background {
  background-color: rgba(10, 10, 10, 0.86);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.modal-card {
  margin: 0 auto;
  max-height: calc(100vh - 40px);
  width: 640px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.modal-card-head {
  align-items: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #dbdbdb;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  display: flex;
  flex-shrink: 0;
  justify-content: flex-start;
  padding: 20px;
  position: relative;
}

.modal-card-title {
  color: #363636;
  flex-grow: 1;
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 600;
}

.modal-card-body {
  -webkit-overflow-scrolling: touch;
  background-color: white;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto;
  padding: 20px;
}

.modal-card-foot {
  align-items: center;
  background-color: #f5f5f5;
  border-top: 1px solid #dbdbdb;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  display: flex;
  flex-shrink: 0;
  justify-content: flex-start;
  padding: 20px;
}

.delete {
  -webkit-touch-callout: none;
  background-color: rgba(10, 10, 10, 0.2);
  border: none;
  border-radius: 290486px;
  cursor: pointer;
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 0;
  height: 20px;
  max-height: 20px;
  max-width: 20px;
  min-height: 20px;
  min-width: 20px;
  outline: none;
  position: relative;
  vertical-align: top;
  width: 20px;
}

.delete::before,
.delete::after {
  background-color: white;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform-origin: center center;
}

.delete::before {
  height: 2px;
  width: 50%;
}

.delete::after {
  height: 50%;
  width: 2px;
}

.delete:hover {
  background-color: rgba(10, 10, 10, 0.3);
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
  font-size: 1rem;
  white-space: nowrap;
}

.breadcrumb ul {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}

.breadcrumb li {
  align-items: center;
  display: flex;
}

.breadcrumb li+li::before {
  color: rgba(255, 255, 255, 0.7);
  content: "\0002f";
  padding: 0 0.75em;
}

.breadcrumb a {
  align-items: center;
  color: #ffdd57;
  display: flex;
  justify-content: center;
  padding: 0 0.75em;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #ffd447;
}

.breadcrumb li.is-active a {
  color: #363636;
  cursor: default;
  pointer-events: none;
}

/* Archive hero breadcrumb current item should be legible on dark hero */
.hero-intro .breadcrumb a.breadcrumb-current {
  color: #ffdd57 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  pointer-events: none;
}

/* ===== BOX ===== */
.box {
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
  color: #4a4a4a;
  display: block;
  padding: 1.25rem;
}

/* ===== CONTENT ===== */
.content {
  color: #4a4a4a;
}

.content p:not(:last-child) {
  margin-bottom: 1em;
}

.is-size-7 {
  font-size: 0.75rem !important;
}

/* ===== FOOTER ===== */
.footer {
  padding: 3rem 1.5rem 3rem;
  background-color: #f5f5f5;
}

.footer.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.has-background-dark {
  background-color: #363636 !important;
}

.has-text-warning {
  color: #ffdd57 !important;
}

.has-text-warning:hover {
  color: #ffd83d !important;
  text-decoration: underline;
}

.columns.is-multiline {
  flex-wrap: wrap;
}

.column.is-one-quarter {
  flex: none;
  width: 25%;
}

.cryptogram-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0.5rem auto;
}

.crypto-cell {
  min-width: 26px;
  min-height: 32px;
  border: 1px solid #c3c3c3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  padding: 2px 4px;
  background: #fff;
  border-radius: 4px;
}

.rebus-image {
  max-width: 320px;
  margin: 0.5rem auto;
  display: block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  border-radius: 8px;
}

.puzzle-ad-display {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem auto;
}

.column.is-full-mobile {
  flex: none;
  width: 100%;
}

@media screen and (min-width: 769px) {
  .column.is-11-tablet {
    flex: none;
    width: 91.66667%;
  }
}

@media screen and (min-width: 1024px) {
  .column.is-9-desktop {
    flex: none;
    width: 75%;
  }
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 768px) {

  /* Fix container overflow on mobile */
  .column.is-narrow {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .game-container {
    padding: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .game-board {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Fix input section overflow */
  .input-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 0.5rem;
  }

  .input-section .field {
    width: 100%;
    max-width: 100%;
  }

  .input-section .control.is-expanded {
    width: 100%;
    max-width: 100%;
  }

  .input-section .input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .title.is-2 {
    font-size: 1.75rem;
  }

  .puzzle-text {
    font-size: 1.5rem;
  }

  .answer-tile {
    width: 2rem;
    height: 2.5rem;
    font-size: 1.25rem;
  }

  .input.is-large {
    font-size: 1.25rem;
    width: 100%;
    max-width: 100%;
  }

  .modal-card {
    width: calc(100% - 40px);
    max-height: calc(100vh - 100px);
  }

  /* Footer responsive - stack columns on mobile */
  .column.is-one-quarter {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .column.is-one-quarter {
    width: 100%;
  }
}

/* Footer contrast fixes */
.footer {
  color: #fefefe;
}

.footer p,
.footer span {
  color: #fefefe;
}

.footer a {
  color: #fefefe !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer a:hover {
  color: #ffd447 !important;
}

.footer .box.has-background-dark {
  border: 1px solid #4a4a4a;
}

.footer .has-text-white {
  color: #fefefe !important;
}

/* Overlay status box */
.status-overlay {
  position: fixed;
  top: 15vh;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
  width: calc(100% - 32px);
  z-index: 1000;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

/* Share overlay */
.share-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1100;
}

.share-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  padding: 0;
  width: min(520px, 90vw);
  position: relative;
}

.share-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2f73da;
  color: #fff;
  padding: 0.75rem 1rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.share-card-header h3 {
  margin: 0;
  color: #fff;
}

.share-card .delete {
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  opacity: 0.98;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  font-weight: 700;
}

.share-card .delete:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: #fff;
}

.share-card>p,
.share-card>.textarea,
.share-card>.mt-3,
.share-status {
  padding: 0 1rem;
}

.share-card .textarea {
  width: 100%;
  min-height: 180px;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  margin: 0;
  background: #f7f7f9;
  color: #111;
  border: 1px solid #c7c7d1;
  resize: vertical;
}

.share-status {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  color: #2f7b2f;
  font-weight: 600;
}

/* ===== ACCESSIBILITY CONTRAST OVERRIDES ===== */
.hero-intro .title,
.hero-intro .subtitle {
  color: #f5f7fb !important;
  text-shadow: none;
  font-weight: 700;
}

.hero-intro #puzzleDate {
  color: #f5f7fb !important;
  font-weight: 700;
}

.category-tag {
  background-color: #ffd447 !important;
  color: #f5f7fb !important;
  border: 1px solid #b88d00 !important;
  font-weight: 800 !important;
}

.button.is-link:disabled {
  background-color: #94a8e6;
  color: #0a1633;
  opacity: 1;
}

.button.contrast-primary {
  background-color: #ffd447 !important;
  color: #f5f7fb !important;
  border: 1px solid #b88d00 !important;
  font-weight: 700;
}

/* ===== CONTRAST TUNING ===== */
#puzzleDate,
.hero-intro .subtitle {
  color: #f5f7fb !important;
  text-shadow: none;
  font-weight: 700;
}

.hero-intro #puzzleDate {
  color: #f5f7fb !important;
  font-weight: 700;
}

/* Explicit heading sizes to avoid UA defaults */
.hero-intro .title.is-2 {
  font-size: 2.4rem;
  line-height: 1.2;
}

.hero-intro .subtitle.is-5 {
  font-size: 1.3rem;
  line-height: 1.3;
  color: #f5f7fb !important;
  font-weight: 700;
}

#puzzleCategory,
.category-tag {
  background-color: #ffd447 !important;
  color: #0b0b0b !important;
  border: 1px solid #b88d00 !important;
  font-weight: 800 !important;
}

.button.is-link,
.button.is-link span {
  color: #ffffff !important;
}

.button.is-link {
  background-color: #1f5ad6;
  border-color: #0f2f73;
}

.button.is-link:hover {
  background-color: #1a4fbf;
}

.button.is-link:disabled {
  background-color: #9cafde;
  color: #0a1633 !important;
  opacity: 1;
}

/* ===== CLS (CUMULATIVE LAYOUT SHIFT) PREVENTION ===== */
/* Reserve space for dynamic content areas */

/* Section containing the main game */
.section {
  /* Ensure consistent padding */
  padding: 1.5rem 1rem;
  overflow-x: hidden;
}

/* Game header intro section - reserve space */
.game-header.hero-intro {
  min-height: 200px;
  background: linear-gradient(135deg, #1f1f2b 0%, #252c3b 100%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

/* Notification CTA button container */
.has-text-centered.mb-4:has(#notifyCtaBtn) {
  min-height: 48px;
}

/* Answer template container */
.answer-template {
  min-height: 80px;
  contain: layout;
}

/* Guesses container */
.guesses-container {
  min-height: 60px;
}

/* Game status area */
.game-status {
  min-height: 150px;
}

.game-status .notification {
  min-height: 120px;
  background: #2b2f3c;
  color: #e9ecf5;
  border: 1px solid #343847;
}

/* Ad container space reservation */
.puzzle-ad-display {
  min-height: 250px;
  min-width: 300px;
  contain: strict;
}

/* Social share section (hidden initially) */
.social-share-section {
  min-height: 0;
}

/* SEO content container */
#seoContentContainer {
  min-height: 0;
}

/* Bottom navigation */
#bottomNav {
  min-height: 0;
}

/* Prevent FOUT (Flash of Unstyled Text) */
.title,
.subtitle,
.category-tag {
  font-display: swap;
}

/* Mobile-specific CLS prevention */
@media screen and (max-width: 768px) {

  body,
  body.has-navbar-fixed-top {
    padding-top: 52px;
  }

  .game-board {
    min-height: 500px;
  }

  .input-section {
    min-height: 120px;
    height: auto;
  }

  .game-header.hero-intro {
    min-height: 180px;
  }

  .puzzle-container {
    min-height: 150px;
  }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
  .game-board {
    min-height: 450px;
  }

  .input-section {
    min-height: 110px;
  }

  .game-header.hero-intro {
    min-height: 160px;
  }
}