/* ==========================================================================
   H5P Crossword — END */
/* =========================================================
H5P Mark the Words. START
Modern School / LMS UI
Duolingo-inspired
Scoped to: .h5p-container.h5p-mark-the-words
========================================================= */

.h5p-container.h5p-mark-the-words {
--mtw-bg: #f7f9fb;
--mtw-surface: #ffffff;
--mtw-surface-soft: #f9fbff;
--mtw-border: #dcdfe4;
--mtw-border-soft: #e7ebf0;
--mtw-text: #3c3c3c;
--mtw-text-soft: #6b7280;

--mtw-orange: #f1a52d;
--mtw-orange-dark: #d98d17;
--mtw-green: #58cc6c;
--mtw-green-dark: #43b85a;
--mtw-purple: #7c6df2;
--mtw-purple-dark: #6857e6;
--mtw-red: #ff6b6b;
--mtw-red-dark: #d64545;
--mtw-red-soft: #fff2f2;

--mtw-radius-xl: 28px;
--mtw-radius-lg: 20px;
--mtw-radius-md: 14px;
--mtw-radius-sm: 10px;
--mtw-radius-pill: 999px;

--mtw-shadow:
0 12px 30px rgba(60, 60, 60, 0.08),
0 4px 10px rgba(60, 60, 60, 0.04);

--mtw-shadow-soft:
0 8px 20px rgba(60, 60, 60, 0.05);

--mtw-transition-fast: 0.18s ease;
--mtw-transition-med: 0.24s ease;

color: var(--mtw-text) !important;
background: transparent !important;
}

/* ---------- Main wrapper ---------- */
.h5p-container.h5p-mark-the-words,
.h5p-container.h5p-mark-the-words .h5p-question-main-content {
background: transparent !important;
border: none !important;
border-radius: var(--mtw-radius-xl) !important;
box-shadow: none !important;
padding: 0 !important;
color: var(--mtw-text) !important;
position: relative !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-main-content {
overflow: hidden !important;
}

/* ---------- Introduction ---------- */
.h5p-container.h5p-mark-the-words .h5p-question-introduction {
background: var(--mtw-surface) !important;
border: 1px solid var(--mtw-border-soft) !important;
border-radius: var(--mtw-radius-lg) !important;
padding: 1rem 1.1rem !important;
margin: 0 0 1rem 0 !important;
box-shadow: var(--mtw-shadow-soft) !important;
min-height: 3.25rem !important;
display: flex !important;
align-items: center !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-introduction > div,
.h5p-container.h5p-mark-the-words .h5p-question-introduction p {
margin: 0 !important;
color: var(--mtw-text) !important;
font-size: 1rem !important;
line-height: 1.5 !important;
width: 100% !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-introduction em {
font-style: normal !important;
font-weight: 800 !important;
color: var(--mtw-purple-dark) !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-introduction:empty,
.h5p-container.h5p-mark-the-words .h5p-question-introduction > div:empty {
display: none !important;
}

/* ---------- Task content card ---------- */
.h5p-container.h5p-mark-the-words .h5p-question-content.h5p-word {
background: rgba(255, 255, 255, 0.4) !important;
border: 1px solid #edf1f5 !important;
border-radius: calc(var(--mtw-radius-xl) - 6px) !important;
padding: 0 !important;
overflow: hidden !important;
}

/* ---------- Inner text area ---------- */
.h5p-container.h5p-mark-the-words .h5p-word-inner {
background: transparent !important;
border: none !important;
border-radius: var(--mtw-radius-lg) !important;
padding: 1.15rem !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
margin: 0 !important;
}

/* ---------- Word list ---------- */
.h5p-container.h5p-mark-the-words .h5p-word-selectable-words {
word-break: normal !important;
overflow-wrap: break-word !important;
color: var(--mtw-text) !important;
}

.h5p-container.h5p-mark-the-words .h5p-word-selectable-words ol {
margin: 0 !important;
padding-left: 1.5rem !important;
list-style-position: outside !important;
}

.h5p-container.h5p-mark-the-words .h5p-word-selectable-words li {
margin: 0 !important;
color: var(--mtw-text) !important;
font-size: clamp(1rem, 0.98rem + 0.2vw, 1.08rem) !important;
line-height: 2.15 !important;
letter-spacing: 0.01em !important;
}

.h5p-container.h5p-mark-the-words .h5p-word-selectable-words li:last-child {
margin-bottom: 0 !important;
}

.h5p-container.h5p-mark-the-words .h5p-word-selectable-words p {
margin: 0 !important;
color: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}

/* ---------- Individual selectable words ---------- */
.h5p-container.h5p-mark-the-words .h5p-word-selectable-words [role="option"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 2rem !important;
padding: 0.18rem 0.15rem;
margin: 0rem !important;
border: 1px solid transparent;
border-radius: var(--mtw-radius-pill) !important;
color: var(--mtw-text) !important;
font-weight: 600 !important;
cursor: pointer !important;
user-select: none !important;
vertical-align: baseline !important;
text-decoration: none !important;
transition:
transform var(--mtw-transition-fast),
background-color var(--mtw-transition-fast),
border-color var(--mtw-transition-fast),
color var(--mtw-transition-fast),
box-shadow var(--mtw-transition-fast) !important;
}

/* Hover */
.h5p-container.h5p-mark-the-words .h5p-word-selectable-words [role="option"]:hover {
background: #fff7e8 !important;
border-color: rgba(241, 165, 45, 0.35) !important;
color: var(--mtw-orange-dark) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 14px rgba(241, 165, 45, 0.14) !important;
}

/* Active */
.h5p-container.h5p-mark-the-words .h5p-word-selectable-words [role="option"]:active {
transform: translateY(0) scale(0.98) !important;
}

/* Focus */
.h5p-container.h5p-mark-the-words .h5p-word-selectable-words [role="option"]:focus,
.h5p-container.h5p-mark-the-words .h5p-word-selectable-words [role="option"]:focus-visible {
outline: none !important;
border-color: var(--mtw-purple) !important;
background: #f4f1ff !important;
color: var(--mtw-purple-dark) !important;
box-shadow:
0 0 0 4px rgba(124, 109, 242, 0.16),
0 8px 18px rgba(124, 109, 242, 0.14) !important;
}

/* Selected */
.h5p-container.h5p-mark-the-words .h5p-word-selectable-words [role="option"][aria-selected="true"] {
background: linear-gradient(180deg, #fff4db 0%, #ffe7b2 100%) !important;
border-color: var(--mtw-orange) !important;
color: #8a5a00 !important;
box-shadow:
0 8px 18px rgba(241, 165, 45, 0.2),
inset 0 -2px 0 rgba(217, 141, 23, 0.25) !important;
padding-left: 15px !important;
padding-right: 15px !important;
}

/* Selected + hover */
.h5p-container.h5p-mark-the-words .h5p-word-selectable-words [role="option"][aria-selected="true"]:hover {
background: linear-gradient(180deg, #ffefcc 0%, #ffe19b 100%) !important;
border-color: var(--mtw-orange-dark) !important;
color: #7a4f00 !important;
}

/* ---------- Evaluation states after checking ---------- */
.h5p-container.h5p-mark-the-words [aria-describedby="h5p-description-correct"] {
background: linear-gradient(180deg, #eefbf0 0%, #daf6df 100%) !important;
border-color: rgba(88, 204, 108, 0.35) !important;
color: var(--mtw-green-dark) !important;
box-shadow:
0 8px 18px rgba(88, 204, 108, 0.14),
inset 0 -2px 0 rgba(67, 184, 90, 0.18) !important;
}

.h5p-container.h5p-mark-the-words [aria-describedby="h5p-description-incorrect"] {
background: linear-gradient(180deg, #fff5f5 0%, #ffe1e1 100%) !important;
border-color: rgba(255, 107, 107, 0.3) !important;
color: var(--mtw-red-dark) !important;
box-shadow:
0 8px 18px rgba(255, 107, 107, 0.12),
inset 0 -2px 0 rgba(214, 69, 69, 0.16) !important;
}

.h5p-container.h5p-mark-the-words [aria-describedby="h5p-description-missed"] {
background: #f3f0ff !important;
border-color: rgba(124, 109, 242, 0.22) !important;
color: var(--mtw-purple-dark) !important;
box-shadow:
0 8px 18px rgba(124, 109, 242, 0.14),
inset 0 -2px 0 rgba(104, 87, 230, 0.18) !important;
padding-left: 10px !important;
padding-right: 10px !important;
}

.h5p-container.h5p-mark-the-words [aria-describedby="h5p-description-missed"]::after {
content: " 👀" !important;
position: relative;
right: calc(var(--h5p-theme-spacing-s) * 0.1);
display: inline-flex;
text-decoration: none;
padding-left: calc(var(--h5p-theme-spacing-s) * 0.75);
}

/* ---------- Descriptions / legend ---------- */
.h5p-container.h5p-mark-the-words .h5p-mark-the-words-descriptions {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.65rem !important;
margin-top: 1rem !important;
padding-top: 0.9rem !important;
border-top: 1px dashed #e3e8ef !important;
}

.h5p-container.h5p-mark-the-words .h5p-mark-the-words-descriptions > div {
display: inline-flex !important;
align-items: center !important;
gap: 0.45rem !important;
padding: 0.55rem 0.85rem !important;
border-radius: var(--mtw-radius-pill) !important;
font-size: 0.92rem !important;
font-weight: 800 !important;
line-height: 1 !important;
border: 1px solid transparent !important;
}

.h5p-container.h5p-mark-the-words #h5p-description-correct {
background: #eefbf0 !important;
border-color: rgba(88, 204, 108, 0.28) !important;
color: var(--mtw-green-dark) !important;
}

.h5p-container.h5p-mark-the-words #h5p-description-correct::before {
  content: "\e903";
  font-family: 'h5p-theme';
}

.h5p-container.h5p-mark-the-words #h5p-description-incorrect {
background: var(--mtw-red-soft) !important;
border-color: rgba(255, 107, 107, 0.22) !important;
color: var(--mtw-red-dark) !important;
}

.h5p-container.h5p-mark-the-words #h5p-description-incorrect::before {
  font-family: 'h5p-theme';
    text-decoration: none;
    content: "\e902";
}

.h5p-container.h5p-mark-the-words #h5p-description-missed {
background: #f3f0ff !important;
border-color: rgba(124, 109, 242, 0.2) !important;
color: var(--mtw-purple-dark) !important;
}

.h5p-container.h5p-mark-the-words #h5p-description-missed::before {
content: "👀" !important;
}

/* ---------- Buttons area ---------- */
.h5p-container.h5p-mark-the-words .h5p-question-buttons {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
margin-top: 1rem !important;
padding: 0 !important;
}

/* Primary button - Duolingo-inspired */
.h5p-container.h5p-mark-the-words .h5p-question-check-answer,
.h5p-container.h5p-mark-the-words .h5p-joubelui-button {
appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    border-bottom: 4px solid #6f4200 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #9a5c00 0%, #8b5300 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    min-height: 42px !important;
    padding: 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    text-shadow: 0 1px 0 rgb(0 0 0 / 0.08) !important;
    cursor: pointer !important;
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease !important;
    text-transform: uppercase;
}

.h5p-container.h5p-mark-the-words .h5p-question-check-answer:hover,
.h5p-container.h5p-mark-the-words .h5p-joubelui-button:hover {
  filter: brightness(1.04) !important;
  box-shadow:
    0 10px 22px rgb(241 165 45 / 0.28),
    0 2px 0 rgb(255 255 255 / 0.2) inset !important;
  transform: translateY(-2px) !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-check-answer:active,
.h5p-container.h5p-mark-the-words .h5p-joubelui-button:active {
  transform: translateY(2px) !important;
  border-bottom-width: 2px !important;
  box-shadow:
    0 4px 10px rgb(241 165 45 / 0.18),
    0 1px 0 rgb(255 255 255 / 0.16) inset !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-check-answer:focus,
.h5p-container.h5p-mark-the-words .h5p-question-check-answer:focus-visible{
  box-shadow: 0 0 0 4px rgb(101 251 117 / 12%), 0 4px 20px rgb(74 150 80 / 12%), 0 2px 0 rgb(255 255 255 / 0.2) inset !important;
}
.h5p-container.h5p-mark-the-words .h5p-question-show-solution:focus,
.h5p-container.h5p-mark-the-words .h5p-question-show-solution:focus-visible{
box-shadow: 0 5px 12px rgb(91 45 241 / 10%), 0 2px 0 rgb(162 125 243 / 22%) inset !important;}
.h5p-container.h5p-mark-the-words .h5p-joubelui-button:focus,
.h5p-container.h5p-mark-the-words .h5p-joubelui-button:focus-visible {
  box-shadow:
    0 0 0 4px rgb(241 165 45 / 0.22),
    0 8px 18px rgb(241 165 45 / 0.22),
    0 2px 0 rgb(255 255 255 / 0.2) inset !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-check-answer:disabled,
.h5p-container.h5p-mark-the-words .h5p-question-check-answer[disabled],
.h5p-container.h5p-mark-the-words .h5p-joubelui-button:disabled,
.h5p-container.h5p-mark-the-words .h5p-joubelui-button[disabled] {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.08) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------- Accessibility / hidden reader area ---------- */
.h5p-container.h5p-mark-the-words .h5p-question-read {
margin-top: 0.5rem !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
.h5p-container.h5p-mark-the-words .h5p-question-main-content {
padding: 1rem !important;
border-radius: 22px !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-introduction,
.h5p-container.h5p-mark-the-words .h5p-question-content.h5p-word,
.h5p-container.h5p-mark-the-words .h5p-word-inner {
padding: 0.9rem !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-introduction {
border-radius: 18px !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-content.h5p-word,
.h5p-container.h5p-mark-the-words .h5p-word-inner {
border-radius: 18px !important;
}

.h5p-container.h5p-mark-the-words .h5p-word-selectable-words p,
.h5p-container.h5p-mark-the-words .h5p-word-selectable-words li {
font-size: 1rem !important;
line-height: 2 !important;
}

.h5p-container.h5p-mark-the-words .h5p-word-selectable-words [role="option"] {
min-height: 2rem !important;
padding: 0.15rem 0.1rem;
font-size: 0.96rem !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-check-answer,
.h5p-container.h5p-mark-the-words .h5p-joubelui-button {
width: 100% !important;
justify-content: center !important;
}
}

@media (max-width: 480px) {
.h5p-container.h5p-mark-the-words .h5p-question-main-content {
padding: 0.85rem !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-introduction {
padding: 0.85rem !important;
}

.h5p-container.h5p-mark-the-words .h5p-question-introduction > div,
.h5p-container.h5p-mark-the-words .h5p-question-introduction p {
font-size: 0.96rem !important;
}

.h5p-container.h5p-mark-the-words .h5p-word-selectable-words p,
.h5p-container.h5p-mark-the-words .h5p-word-selectable-words li {
line-height: 1.95 !important;
}

.h5p-container.h5p-mark-the-words .h5p-word-inner {
padding: 0.85rem !important;
}

.h5p-container.h5p-mark-the-words .h5p-word-selectable-words ol {
padding-left: 1.2rem !important;
}

.h5p-container.h5p-mark-the-words .h5p-mark-the-words-descriptions {
gap: 0.5rem !important;
}

.h5p-container.h5p-mark-the-words .h5p-mark-the-words-descriptions > div {
width: 100% !important;
justify-content: center !important;
}
}