:root {
  --main-bg: #fff;
  --main-fg: #000;
  --accent-bg: #fffbe6;
  --accent-fg: #005a9c;
  --button-bg: #0078d7;
  --button-fg: #fff;
  --button-border: #005a9c;
  --font-main: Arial, sans-serif;
  --wrap-bg: #f7f7f7;
  --wrap-border: #888;
  --wrap-hover-bg: #ffe;
}

#mode-selector li {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body, .settings-panel, .settings-info, #text-viewport, #text-content, .bar-btn, .side-btn, .level-btn, .story-btn, .selector-list li {
  font-family: var(--font-main) !important;
  background: var(--main-bg) !important;
  color: var(--main-fg) !important;
}

.bar-btn, .side-btn, .level-btn, .story-btn, .selector-list li {
  background: var(--button-bg) !important;
  color: var(--button-fg) !important;
  border-color: var(--button-border) !important;
}

#text-viewport, #text-content {
  background: var(--main-bg) !important;
  color: var(--main-fg) !important;
}

.settings-panel {
  background: var(--main-bg) !important;
  color: var(--main-fg) !important;
}
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
/*   flex: 1 0 auto; Main content grows to fill space */
}


body {
  background-color: lightyellow;
  color: blue;
  font-family: tahoma, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  flex-shrink: 0;
  margin-top: 2em;
  padding: 1em 0;
  background-color: white;
  /* Optional: add a border or shadow for clarity */
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.03);
text-align: center;
}


h1 {
  color: #005a9c;
  font-size: 2.2em;
}

/*main {
  margin-top: 20px;
}*/



#level-indicator {
  font-weight: bold;
  margin-bottom: 10px;
  color: #00796b;
}
#toggles-container {
  position: fixed;
  bottom: 0.5em;
  right: 0.5em;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: rgba(255,255,255,0.92);
  padding: 1em;
  border-radius: 1em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.selector-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 0;
  margin: 0;
  align-items: flex-end;
  background: none;
  box-shadow: none;
}

.selector-list li {
  padding: 0.8em 0.5em;
  border-radius: 0.7em;
  background: #eee;
  color: #005a9c;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: normal;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  user-select: none;
  margin: 0;
  border: 2px solid transparent;
  min-width: 100px;
  text-align: right;
}

.selector-list li.selected {
  background: #005a9c;
  color: #ffe066;
  font-weight: bold;
  border: 2px solid #ffe066;
  box-shadow: 0 2px 12px rgba(0,90,156,0.18);
  transform: scale(1.08);
  letter-spacing: 0.05em;
}

.selector-list li.selected::before {
  content: "✔ ";
  color: #ffe066;
  font-size: 1.1em;
  margin-right: 0.5em;
}



#help-content {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #fff;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

#help-content > div {
  margin-top: 2em;
}

#help-content button {
  font-size: 1.2em;
  margin-right: 1em;
}

#text-viewport {
  position: relative;
  width: 22ch;
  height: 3em; /**/
  overflow: hidden;
  border: 2px solid #005a9c;
  font-size: 2.2em;
 /* margin: 2em auto 1em auto;*/
  background: #fff;
  border-radius: 0.5em;
}

.scroll-zone.right-scroll {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  width: 10% !important;
  z-index: 2 !important;
  background: rgba(0, 90, 156, 0.10) !important;
}

.scroll-zone {
  position: absolute;
  top: 0;
  height: 100%;
  width: 10%;
  z-index: 3;
  background: rgba(0, 90, 156, 0.10); /* Light blue, 10% opacity */
  transition: background 0.2s;
  pointer-events: auto;
}


.left-scroll {
  left: 0;
  cursor: w-resize;
}

.right-scroll {
  right: 0;
  cursor: e-resize;
}

#text-content {
  position: absolute;
  left: 0;
  z-index: 1;
  top: 0;
  white-space: nowrap;
  transition: transform 0.2s ease;
  padding: 0.5em;
  color: #222;
}

.hover-image-word {
  cursor: pointer;
  border-bottom: 1px dotted; 
  border-bottom-color: var(--wrap-border, #888);
  background: var(--wrap-bg, #f7f7f7);
  transition: background 0.2s;
  color: inherit; /* or set a variable for word colour if you want */
  padding: 0 0.15em;
  border-radius: 0.2em;
}

.hover-image-word:hover {
  background: var(--wrap-hover-bg, #ffe);
}
 


#hover-image-popup {
  border: 2px solid #333;
  background: #fff;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: none;
  position: absolute;
  z-index: 1000;
  pointer-events: none;

}

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



.scroll-zone:hover {
  background: rgba(0, 90, 156, 0.18); /* Slightly more visible on hover */
}


.scroll-zone.hidden {
  display: none !important;
}

#hover-image-popup {
  pointer-events: none;
}

.level-btn {
  display: block;
  width: 400px;
  max-width: 90vw;
  margin: 1em auto;
  padding: 1em 0;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 1.4em;
  color: #fff;                /* Text colour */
  background-color: #0078d7;  /* Button background */
  border: 2px solid #005a9c;
  border-radius: 0.6em;
  box-shadow: 0 2px 8px rgba(0,90,156,0.08);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}


.story-btn {
  display: inline-flex;      /* Use inline-flex for horizontal layout */
  flex-shrink: 0;
  align-items: center;       /* Vertically centre text */
  white-space: nowrap;       /* Prevent text wrapping within the button */
  width: auto;               /* Let the button size to its content */
  min-width: 280px;          /* Optional: minimum width for appearance */
  max-width: 1000px;          /* Optional: maximum width for very long titles */
  margin: 0 0.7em;           /* Horizontal spacing between buttons */
  padding: 1em 2em;          /* Adjust as needed for button size */
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 1.3em;
  color: #fff;
  background-color: #0078d7;
  border: 2px solid #005a9c;
  border-radius: 0.6em;
  box-shadow: 0 2px 8px rgba(0,90,156,0.08);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}


.story-btn:hover, .story-btn:focus, .level-btn:focus, .level-btn:hover {
  background-color: #005a9c;
  color: #ffe066;
  box-shadow: 0 4px 16px rgba(0,90,156,0.15);
  outline: none;
}

/*    <button id="prev-btn" aria-label="Previous beat">Previous</button>*/
/*        <button id="next-btn" aria-label="Next beat">Next</button>*/
/*        <button id="easy-btn" aria-label="Switch to easier level">Easier</button>*/
/*        <button id="hard-btn" aria-label="Switch to harder level">Harder</button>*/
/*        <button id="home-btn" aria-label="Return to home screen">Return to Home</button> */
     

.settings-info {
  position: absolute;
  top: 3em;
  left: 1em;
  z-index: 100;
  display: flex;
  gap: 1em;
  background: rgba(255,255,255,0.9);
  padding: 0.5em 1em;
  border-radius: 1em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}


#reading-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 60vh;
  align-items: center;
  justify-content: center;
  width: 90%;
   margin: 0 auto; 
}

.side-btn {
  flex: 0 0 15vw;
  min-width: 100px;
  max-width: 120px;
  font-size: 1.3em;
  padding: 0;
  margin: auto 0;
/*  height: 80%;*/

  min-height: 40vh;
  align-self: stretch;
  background: #fffbe6;
  color: #005a9c;
  border: 2px solid #005a9c;
  border-radius: 0.6em;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s, color 0.2s;
}
.side-btn:hover, .side-btn:focus {
  background: #ffe066;
  color: #003a6d;
  outline: none;
}

#reading-centre {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 2vw; /*2vw*/
}

/* Example for the beat image and filename */
#beat-scene-img {
  display: block;
/*  margin: 0 auto 0.3em auto;*/
  width: 22ch;
  max-width: 100%;
  border-radius: 0.4em;
  border: 2px solid #005a9c;
}

/*new*/
.bar-btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
/*  margin: 1.2em 0;*/
}

.bar-btn {
  font-size: 1.5em;
  padding: 1.2em 2em;
  border-radius: 0.6em;
  background: #fffbe6;
  color: #005a9c;
  border: 2px solid #005a9c;
  font-weight: bold;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, color 0.2s;
  display: block;
          /* width: 60%;or max-width: 400px; for a fixed width */
          width: 100%;
  max-width: 800px;
/*  margin: 0 auto;*/
}

.beat-image-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.2em 0;
}

/* Fixed size for the beat image */
#beat-scene-img {
  display: block;
  width: 320px;        /* Fixed width */
  height: 200px;       /* Fixed height, adjust as needed */
  object-fit: contain; /* Scale down to fit, do not stretch up */
  background: #fff;
  border-radius: 0.4em;
  border: 2px solid #005a9c;
  margin-bottom: 0.3em;
}




button:disabled,
.bar-btn:disabled,
.side-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #eee !important;
  color: #888 !important;
  border-color: #ccc !important;
  /* Remove box-shadow for flat look */
  box-shadow: none !important;
}


button:not(:disabled):hover,
button:not(:disabled):focus,
.bar-btn:not(:disabled):hover,
.bar-btn:not(:disabled):focus,
.side-btn:not(:disabled):hover,
.side-btn:not(:disabled):focus {
  background-color: #005a9c;
  color: #ffe066;
  box-shadow: 0 4px 16px rgba(0,90,156,0.15);
  outline: none;
}

.phonics-popup {
  background: #fff;
  border: 2px solid #005a9c;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  display: flex;
  gap: 0.5em;
  font-size: 2em;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  color: #222;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.grapheme {
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  transition: background 0.2s, color 0.2s;
}

.grapheme.highlight {
  background: #ffe066;
  color: #005a9c;
}

  
.selector-list {
  list-style: none;
  display: flex;
  gap: 1em;
  padding: 0.5em 0;
  margin: 0;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 0.7em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.selector-list li {
  padding: 0.5em 1.2em;
  border-radius: 0.5em;
  background: #eee;
  color: #005a9c;
  cursor: pointer;
  font-size: 1.1em;
  transition: background 0.2s, color 0.2s;
  user-select: none;
}
.selector-list li.selected {
  background: #005a9c;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,90,156,0.09);
}
.selector-list li.disabled {
  background: #ddd;
  color: #aaa;
  cursor: not-allowed;
  pointer-events: none;
  font-weight: normal;
  box-shadow: none;
}
.selector-list li:not(.disabled):hover {
  background: #cce4f7;
  color: #003a6d;
}

#story-bar-container {
  position: relative;
  display: flex;
    margin-top: 3em;

  align-items: flex-start;
  height: 5.5em; /* slightly taller than buttons */
  background: #f8f9fa;
}

#settings-btn {
  position: absolute;
  top: 0.7em;
  left: 0.7em;
  z-index: 2;
  opacity: 0.5;
  /*cursor: not-allowed;*/
}

#story-bar-scroll-wrapper {
  flex: 1;
  margin-left: 4em; /* leave space for settings */
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 100%;
}

.story-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}


#story-bar {
  display: flex;
  align-items: center;
  gap: 1.2em;
  overflow-x: auto;
  height: 100%;
  padding: 0 2em;
  white-space: nowrap; /* Add this if not present */
}

#story-bar::-webkit-scrollbar {
  display: none;
}

.scroll-zone {
  position: absolute;
  top: 0;
  width: 2em;
  height: 100%;
  z-index: 3;
  opacity: 0.01;
  pointer-events: auto;
}
.scroll-zone.left { left: 0; }
.scroll-zone.right { right: 0; }
.scroll-zone:hover { opacity: 0.1; background: #005a9c; }

#story-collage-preview {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 66vh;
  background: rgba(255,255,255,0.98);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.5em;
  align-items: stretch;
  justify-items: center;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.09);
  padding: 1em 2em;
  overflow: auto;
}
#story-collage-preview.visible {
  opacity: 1;
  pointer-events: auto;
}
#story-collage-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.3em;
  border: 2px solid #005a9c;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,90,156,0.10);
  display: block;
  /* Prevents images from overlapping */
}

#level-screen h2, #home-screen h2  {
  text-align: center;
  width: 100%;
}


.scroll-zone {
  position: absolute;
  top: 0;
  width: 2.5em;
  height: 100%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: linear-gradient(to right, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0));
  transition: background 0.2s, opacity 0.2s;
  opacity: 0.6;
}
.scroll-zone.right {
  right: 0;
  left: auto;
  background: linear-gradient(to left, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0));
}
.scroll-zone.left {
  left: 0;
  right: auto;
}
.scroll-zone:hover {
  opacity: 1;
  background: rgba(0,90,156,0.09);
}

.scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  background: #fff;
  border: 2px solid #005a9c;
  border-radius: 50%;
  color: #005a9c;
  font-size: 1.6em;
  box-shadow: 0 2px 8px rgba(0,90,156,0.08);
  opacity: 0.8;
  pointer-events: none; /* ensures only the zone, not the icon, gets mouse events */
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.scroll-zone:hover .scroll-arrow {
  background: #005a9c;
  color: #fff;
  opacity: 1;
}

.scroll-zone.disabled .scroll-arrow {
  opacity: 0.3;
  cursor: not-allowed;
 /* pointer-events: none;*/
}
.scroll-zone.disabled {
/*  pointer-events: none;*/
  cursor: not-allowed;
  
}


.scheme-black-white {
  --main-bg: #fff;
  --main-fg: #000;
  --button-bg: #0078d7;
  --button-fg: #fff;
  --button-border: #005a9c;
}
.scheme-black-yellow {
  --main-bg: #ffff00;
  --main-fg: #000;
  --button-bg: #000;
  --button-fg: #ffff00;
  --button-border: #000;
}
.scheme-blue-cream {
  --main-bg: #FFFDD0;
  --main-fg: #1A237E;
  --button-bg: #1A237E;
  --button-fg: #FFFDD0;
  --button-border: #1A237E;
}
.scheme-white-darkblue {
  --main-bg: #003366;
  --main-fg: #fff;
  --button-bg: #fff;
  --button-fg: #003366;
  --button-border: #fff;
}
.scheme-yellow-darkblue {
  --main-bg: #003366;
  --main-fg: #ffff00;
  --button-bg: #ffff00;
  --button-fg: #003366;
  --button-border: #ffff00;
}

.scheme-black-white {
  --wrap-bg: #f7f7f7;
  --wrap-border: #888;
  --wrap-hover-bg: #ffe;
}

.scheme-black-yellow {
  --wrap-bg: #fff700;
  --wrap-border: #333;
  --wrap-hover-bg: #fffecb;
}

.scheme-blue-cream {
  --wrap-bg: #fffbe6;
  --wrap-border: #1A237E;
  --wrap-hover-bg: #f2f1e0;
}

.scheme-white-darkblue {
  --wrap-bg: #004080;
  --wrap-border: #fff;
  --wrap-hover-bg: #0050a0;
}

.scheme-yellow-darkblue {
  --wrap-bg: #003366;
  --wrap-border: #ffff00;
  --wrap-hover-bg: #334488;
}

#settings-screen {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(255,255,255,0.98);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-panel {
  background: #fff;
  border: 2px solid #005a9c;
  border-radius: 1em;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  padding: 2em 3em;
  min-width: 320px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  align-items: stretch;
}

.settings-panel h2 {
  margin-top: 0;
  margin-bottom: 1em;
  color: #005a9c;
  text-align: center;
}

.settings-option {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 1.1em;
  margin: 0.3em 0;
}

.settings-option label {
  flex: 1 0 140px;
}

.settings-option input[type="checkbox"] {
  width: 1.5em;
  height: 1.5em;
}

.settings-option select {
  font-size: 1.1em;
  padding: 0.3em 0.6em;
  border-radius: 0.4em;
}

#settings-home-btn {
  margin-bottom: 1em;
}

#settings-screen[hidden] {
  display: none !important;
}

#comprehension-modal {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.28);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
#comprehension-modal[hidden] { display: none !important; }

#comprehension-box {
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  padding: 2em 2.5em;
  min-width: 320px;
  max-width: 98vw;
  text-align: center;
}

#comprehension-question {
  font-size: 1.3em;
  margin-bottom: 1.4em;
  font-weight: bold;
}

#comprehension-answers {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-bottom: 1.2em;
}

.comp-answer-btn {
  font-size: 1.13em;
  border-radius: 0.5em;
  border: 2px solid #005a9c;
  background: #f8f9fa;
  color: #005a9c;
  padding: 0.8em 1.2em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
}

.comp-answer-btn.selected-wrong {
  background: #ffe0e0;
  color: #b10000;
  border-color: #b10000;
  font-weight: bold;
}

.comp-answer-btn.selected-correct {
  background: #e0ffe0;
  color: #007900;
  border-color: #007900;
  font-weight: bold;
}

#comprehension-close {
  margin-top: 1em;
  font-size: 1em;
  border-radius: 0.4em;
  padding: 0.6em 1.2em;
  background: #005a9c;
  color: #fff;
  border: none;
  cursor: pointer;
}



#comprehension-modal,
#comprehension-box {
  font-family: var(--font-main) !important;
  background: var(--main-bg) !important;
  color: var(--main-fg) !important;
}

#comprehension-box {
  border: 2px solid var(--button-border, #005a9c);
}

.comp-answer-btn {
  background: var(--button-bg, #f8f9fa) !important;
  color: var(--button-fg, #005a9c) !important;
  border-color: var(--button-border, #005a9c) !important;
}
.comp-answer-btn.selected-wrong {
  background: #ffe0e0 !important;
  color: #b10000 !important;
  border-color: #b10000 !important;
}
.comp-answer-btn.selected-correct {
  background: #e0ffe0 !important;
  color: #007900 !important;
  border-color: #007900 !important;
}
#comprehension-close {
  background: var(--button-bg, #005a9c) !important;
  color: var(--button-fg, #fff) !important;
}


/* Help Button */




/* Help Circles */
.has-help-circle {
  position: relative;
}
.has-help-circle::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 3px dashed #005a9c;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
}

/* Help Popup */
.help-popup {
  position: fixed;
  background: #fff;
  border: 2px solid #005a9c;
  border-radius: 0.5em;
  padding: 0.8em 1em;
  box-shadow: 0 4px 16px rgba(0,90,156,0.15);
  font-family: var(--font-main);
  font-size: 1.1em;
  max-width: 240px;
  z-index: 500;
  pointer-events: none;
}


/* Help Button */
.help-button-wrapper {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 400;
}

#text-viewport.has-help-circle::after {
  left: 20%;
  right: 20%;
  top: -10px;
  bottom: -10px;
  border-radius: 1em; /* Optional: makes it slightly oval */
}


.corner-btn {
  position: fixed;
  top: 1.5rem;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 2px solid #005a9c;
  background: #fff;
  color: #005a9c;
  font-size: 1.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,90,156,0.10);
}
.home-btn {
  left: 1.5rem;
}
.help-btn {
  right: 1.5rem;
}

.help-btn {
  background: blue;
  color: yellow;
  border: 2px solid #005a9c;
  border-radius: 50%;
  width: 4.5em;
  height: 4.5em;
  font-size: 1.2em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.settings-btn {
  left: 1.5rem;
  /* If you want it to always be visible, do not use 'hidden' */
}

.corner-btn:focus,t
.corner-btn:hover {
  background: #005a9c;
  color: #ffe066;
  border-color: #ffe066;
  outline: none;
}

#home-btn[hidden] {
  display: none !important;
}

button.help-btn.active {
  background: yellow !important;
  color: blue !important;
  border-color: #005a9c !important;
}

#settings-btn[hidden] {
  display: none !important;
}


.tricky-word {
  color: #b10000 !important;
  font-weight: bold !important;
  background: #ffe0e0 !important;
  border-radius: 0.2em !important;
/*  pointer-events: auto !important;*/
/*  cursor: auto !important;*/
}


.tricky-word:hover {
  color: #b10000 !important;
  font-weight: normal !important;
  background: #ffe0e0 !important;
  border-radius: 0.4em !important;
/*  pointer-events: auto !important;*/
/*  cursor: auto !important;*/
}