* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #b0adff;
  color: black;
  line-height: 1.6;
  padding: 20px;
  font-size: 1.2rem;

}

.letter-box,
.kb-key {
  font-family: Verdana, sans-serif;
}


header {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1rem;
}

header h1 {
  font-size: 1.5rem;
}

/* Shared card look for both sections */
.card {
  max-width: 600px;
  margin: 0 auto;              /* centered */
  text-align: center;
  border-radius: 10px;
}

/* Keep your existing header spacing as-is */
#clue-section {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 15px;
  text-align: left;
  margin-bottom: 40px;
}

#solve-section {
  margin-bottom: 30px;
}

#counter-section {
  margin-bottom: 25px;
}

#button-section {
  margin-bottom: 30px;
}


#clue-date {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

#clue-text {
  font-size: 1.5rem;
  margin-left: 5px;
  margin-right: 5px;
}

#input-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 15px 0;
  gap: 0;
}

@keyframes wrong-shake {
  0%   { transform: translate(0px, 0px); }
  10%  { transform: translate(-2px, -2px); }
  20%  { transform: translate(-2px, 2px); }
  30%  { transform: translate(2px, 2px); }
  40%  { transform: translate(2px, -2px); }
  50%  { transform: translate(0px, 0px); }
  60%  { transform: translate(-2px, -2px); }
  70%  { transform: translate(-2px, 2px); }
  80%  { transform: translate(2px, 2px); }
  90%  { transform: translate(2px, -2px); }
  100% { transform: translate(0, 0); }
}

#input-grid.wrong {
  animation: wrong-shake 500ms ease;
}

.letter-box {
  width: 50px;
  height: 50px;
  margin-left: -3.5px;   /* overlap left border */
  text-align: center;
  font-size: 1.6rem;
  border: 3.5px solid #333;
  border-radius: 0;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
  font-weight: bold;  /* all letters bold by default */
  caret-color: transparent; /* hide the blinking text cursor */
  -webkit-user-select: none; /* hides keyboard on iOS */
  user-select: none;         /* hides keyboard on others */
  -webkit-touch-callout: none; /* hides iOS long-press menu */
  touch-action: manipulation;
}

.letter-box.active {
  background-color: #d5ffd5;
}

button {
  margin: 5px;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:disabled {
  cursor: default;   /* or "default" if you prefer */
  pointer-events: none;  /* <-- this is the key: makes it truly unclickable */
  opacity: 0.5;          /* keep your faded look */
}


#check-btn,
#hint-btn {
  font-family: sans-serif;
  font-size: 1.2rem;
  font-weight: bold;

  padding: 14px 28px;        /* bigger buttons */
  border-radius: 999px;      /* very rounded / pill shape */

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* always on */
  
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;

  /* keeps buttons visually stable */
  border: none;
}

/* ---- Check button ---- */
#check-btn {
  background: #d5f2ff;
  color: black;
}

#check-btn:hover:not(:disabled) {
  transform: scale(1.06);
}

/* ---- Hint button ---- */
#hint-btn {
  background: #ffd768;
  color: black;
}

#hint-btn:hover:not(:disabled) {
  transform: scale(1.06);
}

/* ---- Disabled state stays calm ---- */
#check-btn:disabled,
#hint-btn:disabled {
  opacity: 0.5;
  transform: none;
}




/* --- bottom toast (slides up) --- */
.toast {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;     /* center horizontally */
  align-items: flex-end;       /* stick to bottom */
  background: transparent;     /* no dim overlay */
  z-index: 1100;
  pointer-events: auto;        /* toggled by .hidden */
}

/* Hidden: don't catch clicks & force content off-screen */
.toast.hidden {
  pointer-events: none;
}
.toast.hidden .toast-content {
  transform: translateY(110%);
  opacity: 0;
}

/* Content aligns to the clue card width */
.toast-content {
  position: relative;
  background: #fff;
  color: black;
  /* match #clue-section (max-width: 600px; body padding 20px) */
  width: calc(100% - 40px);
  max-width: 500px;

  margin-bottom: 14px;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);

  /* room for big close button */
  padding: 16px 56px 16px 16px;

  /* start hidden off-screen */
  transform: translateY(110%);
  opacity: 0;
  transition: transform .32s cubic-bezier(.2,.9,.2,1), opacity .2s ease;

  /* long content behaves nicely */
  max-height: 60vh;
  overflow-y: auto;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

/* Visible state */
.toast:not(.hidden) .toast-content {
  transform: translateY(0);
  opacity: 1;
}

/* Larger/easier close button (22x22 hit target) */
.toast-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  font-size: 2rem;          /* big X */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.85;
}
.toast-close:hover,
.toast-close:focus {
  opacity: 1;
  outline: none;
}


/* --- bottom-sheet modal (slides up) --- */
/* modal remains a full-screen transparent overlay so outside-clicks still work */
.modal {
  position: fixed;
  inset: 0;                        /* top:0; right:0; bottom:0; left:0; */
  display: flex;
  justify-content: center;
  align-items: flex-end;           /* content sits at the bottom */
  background: transparent;         /* don't gray out the page */
  z-index: 1000;

  /* pointer-events toggled by the hidden class so overlay doesn't block clicks when closed */
  pointer-events: auto;
}

/* when hidden, disable pointer events so clicks fall through and move content off-screen */
.modal.hidden {
  pointer-events: none;
}

/* content card that slides up/down */
.modal-content {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);

  /* start off-screen (below viewport) and invisible */
  transform: translateY(110%);
  opacity: 0;

  /* animation for slide and fade */
  transition: transform 0.36s cubic-bezier(.2,.9,.2,1), opacity 0.22s ease;
  /* leave a little gap above the bottom of the viewport when visible */
  margin-bottom: 10px;
  max-height: 50vh;          /* won't grow tall enough to cover the clue */
  overflow-y: auto;
}

/* visible state: reset transform so it slides into view */
.modal:not(.hidden) .modal-content {
  transform: translateY(0);
  opacity: 1;
}


.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
}

.modal-content h3 {
  margin-bottom: 15px;
}

.modal-content ul {
  list-style: none;
  padding: 0;
}

.modal-content li {
  margin: 10px 0;
}

.hint-option {
  color: black;
  position: relative;
  background: none;
  border: none;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;

  padding: 6px 8px 6px;
  border-radius: 5px;
  text-decoration: none;

  /* create a stacking context so z-index works predictably */
  isolation: isolate;
}

.hint-option {
  z-index: 1;
}

/* colored bar underneath hints */
.hint-option::after {
  content: "";
  position: absolute;
  left: 50%;

  
  bottom: 2px;  /* move bar upward so it slightly intersects the text */

  height: 10px;
  width: calc(100% - 14px);  /* base width of line */
  transform: translateX(-50%);
  opacity: 0.85;

  /* bar behind the text but still inside the button */
  z-index: -1;

  transition: width 0.2s ease;
}

/* hover elongation */
.hint-option:hover::after {
  width: calc(100% - 4px);
}

.hint-indicators::after { background: #f5d1fd; }
.hint-fodder::after     { background: #fff2b1; }
.hint-definition::after { background: #d5e8ff; }
.hint-letter::after     { background: #fff2b1; }

/* Soft-disabled hint buttons: look muted but remain clickable */
.hint-option.is-disabled {
  cursor: pointer;
}
.hint-option.is-disabled {
  color: rgba(0,0,0,0.5);   /* fades text only */
}



.reset-progress {
  background: #ffa2a2;
}


.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
}

.revealed-letter {
  background-color: #fff2b1; /* soft yellow */
}

.letter-box:disabled {
  cursor: default;
  user-select: none;
  -webkit-text-fill-color: #000; /* fixes WebKit (Chrome/Safari) */
  color: #000;                   /* fallback for other browsers */
  opacity: 1;                    /* prevents global dimming */
}

.highlight-definition {
  background-color: #d5e8ff;
  border-radius: 4px;
}

.highlight-fodder {
  background-color: #fff2b1;
  border-radius: 4px;
}

.highlight-indicator {
  background-color: #f5d1fd;
  border-radius: 4px;
}

.solved-letter {
  background-color: #d5ffd5; /* same pale green as focus */
}

.hint-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
}

.hint-dot {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #c4c2ff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.hint-dot.used {
  background: #fff;
}

/* --- on-screen keyboard --- */
.keyboard {
  position: fixed;
  inset: auto 0 0 0;                 /* stick to bottom */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 900;                       /* below toast (1100) and modal (1000) */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
  pointer-events: none;               /* let only the inner content receive clicks */
}

.keyboard-content {
  pointer-events: auto;               /* clickable */
  width: calc(100% - 2px);           /* 2px padding each side */
  max-width: 600px;                   /* match clue card max width */
  margin-bottom: 0px;
  border-radius: 12px;
  padding: 5px;
}

.kb-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0px;
  margin: 0px 0;
}

.kb-key {
  color: black;
  user-select: none;
  -webkit-user-select: none;
  appearance: none;
  border: none;
  border-radius: 4px;
  margin: 3px;
  background: #ffffff;
  padding: 12px 0;
  font-size: 1.1rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;

  /* soft shadow per key */
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.kb-key:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Dim keyboard whenever a toast or a modal is open */
body.toast-open .keyboard-content,
body.modal-open .keyboard-content {
  opacity: 0.4;
  filter: brightness(0.8);
  transition: opacity 0.25s ease, filter 0.25s ease;
  pointer-events: none; /* disable taps while an overlay is shown */
}


/* Hidden until solved */
#end-section {
  display: none;
  background: #c4c2ff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  text-align: left;
  margin-bottom: 30px;
  max-width: 500px;
}

body.solved #end-section {
  display: block;
}

/* Hidden until solved */
#solved-section {
  display: none;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  padding: 12px;
  text-align: center;
  margin-bottom: 30px;
  max-width: 500px;

  opacity: 0.5;
  transform: translateY(20px);
}

body.solved #solved-section {
  display: block;

  animation: solved-enter 500ms ease-out forwards; /* trigger animation */
}

@keyframes solved-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#solved-title {
  font-size: 1.6rem;
  margin-bottom: 6px;
}

#solved-timer {
  font-size: 1rem;
  margin: 4px 0;
}

.end-title {
  margin: 4px 0 10px;
  font-size: 1.2rem;
}

.end-row {
  margin: 10px 0;
  font-size: 0.9rem;
}

.end-row h4 {
  margin-bottom: 4px;
  font-size: 1rem;
}

.yt-embed-link {
  display: block;
  text-decoration: none;
}

.yt-embed-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  cursor: pointer;
}

/* fake play button */
.yt-play-button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* red rounded rectangle */
.yt-play-button::before {
  content: "";
  width: 68px;
  height: 48px;
  background: #ff0000;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  position: absolute;
}

/* white triangle */
.yt-play-button::after {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent white;
  position: relative;
}


body.solved #button-section,
body.solved #touch-keyboard,
body.solved #counter-section {
  display: none;
}

body.solved #clue-section,
body.solved #solve-section {
  margin-bottom: 0px;
}

body.solved .hint-dot {
  background: #d5ffd5;         
  outline: 2px solid #333;
  outline-offset: -2px;
}

body.solved .hint-dot.used {
  background: #fff;
}

#solved-section {
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  #clue-text {
    font-size: 1.25rem;
  }
}





footer {
  margin-top: 40px;
  text-align: center;
  font-size: 0.9rem;
  color: #888;
}