/* =========================================================
   Word of the Day – floating tab + vocabulary journal popup
   Content: assets/js/wotd-data.js   Logic: assets/js/wotd.js
   Brand: #035643 #349C5C #EEFBF2 #FFC000 #FFE8A1 #FFFFFF
   ========================================================= */

/* Bangla script: Hind Siliguri (SIL Open Font License), only the Bengali
   range, so the files download only when Bangla text is on screen. */
@font-face { font-family: "Hind Siliguri"; src: url("../fonts/hind-siliguri-bengali-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
@font-face { font-family: "Hind Siliguri"; src: url("../fonts/hind-siliguri-bengali-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A8F1; }

.wotd-root { --w-dark: #035643; --w-green: #349C5C; --w-light: #EEFBF2; --w-gold: #FFC000; --w-soft: #FFE8A1; --w-line: rgba(3, 86, 67, .12);
  --w-ink: #22332e; --w-muted: #5d6f6a; --w-head: "Poppins", system-ui, sans-serif; --w-body: "Montserrat", system-ui, sans-serif;
  --w-bn: "Hind Siliguri", "Noto Sans Bengali", "Nirmala UI", "Vrinda", "Kohinoor Bangla", sans-serif; --w-ease: cubic-bezier(.2, .7, .2, 1); }
.wotd-root :lang(bn) { font-family: var(--w-bn); }
:where(.wotd-root) button { font-family: var(--w-head); }
.wotd-root svg { flex: none; }

/* ---------------- floating tab ---------------- */
.wotd-tab { position: fixed; z-index: 65; left: 0; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 36px; padding: 8px 0 13px; border: 0; border-radius: 0 12px 12px 0; cursor: pointer; color: #fff;
  background: linear-gradient(160deg, #349C5C 0%, #035643 100%); box-shadow: inset -2.5px 0 0 var(--w-gold), 0 10px 22px rgba(3, 86, 67, .26);
  transform: translate(0, -50%); transition: transform .45s var(--w-ease), box-shadow .3s, opacity .3s, visibility .3s; }
.js .wotd-tab:not(.is-ready) { transform: translate(-110%, -50%); }
.wotd-tab:hover, .wotd-tab:focus-visible { transform: translate(4px, -50%); box-shadow: inset -2.5px 0 0 var(--w-gold), 0 14px 28px rgba(3, 86, 67, .32); }
.wotd-tab:focus-visible { outline: 3px solid var(--w-gold); outline-offset: 3px; }
/* filler on the left edge: when the tab slides out on hover, no gap opens at the side of the screen */
.wotd-tab::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: calc(100% - 3px); width: 19px; background: linear-gradient(160deg, #349C5C 0%, #035643 100%); }
.wotd-tab-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--w-soft); color: var(--w-dark); }
.wotd-tab-icon svg { width: 14px; height: 14px; }
.wotd-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--w-head); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.wotd-tab-peek { position: absolute; left: calc(100% + 12px); top: 50%; width: 196px; padding: 12px 14px 13px; border-radius: 14px; background: #fff; color: var(--w-ink); text-align: left;
  box-shadow: 0 14px 32px rgba(3, 86, 67, .18), 0 0 0 1px var(--w-line); opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(0, -50%); transition: opacity .25s, transform .45s var(--w-ease), visibility .25s; }
.wotd-tab-peek::before { content: ""; position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: #fff; transform: rotate(45deg); box-shadow: -1px 1px 0 var(--w-line); }
.wotd-tab-peek small { display: block; font-family: var(--w-head); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--w-green); }
.wotd-tab-peek b { display: block; margin-top: 2px; font-family: var(--w-head); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--w-dark); }
.wotd-tab-peek i { display: block; margin-top: 4px; font-style: normal; font-size: 12px; line-height: 1.45; color: var(--w-muted); }
.wotd-tab:hover .wotd-tab-peek, .wotd-tab:focus-visible .wotd-tab-peek { opacity: 1; visibility: visible; transform: translate(-4px, -50%); } /* cancels the tab's 4px slide, so the tooltip itself stays still */
.wotd-tab-peek b { min-height: 1.25em; }
html.wotd-open .wotd-tab { opacity: 0; pointer-events: none; }

/* ---------------- dialog shell ---------------- */
.wotd { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; }
.wotd[hidden] { display: none; }
.wotd-backdrop { position: absolute; inset: 0; background: rgba(6, 30, 24, .64); opacity: 0; transition: opacity .35s ease; }
.wotd-panel { position: relative; display: flex; flex-direction: column; width: min(880px, 100%); max-height: min(88vh, 780px); overflow: hidden;
  border-radius: 24px; background: #fff; box-shadow: 0 40px 90px rgba(3, 40, 30, .35), 0 0 0 1px rgba(3, 86, 67, .08);
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .35s ease, transform .5s var(--w-ease); }
.wotd.is-open .wotd-backdrop { opacity: 1; }
.wotd.is-open .wotd-panel { opacity: 1; transform: none; }
html.wotd-open { overflow: hidden; }

/* top bar */
.wotd-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px 14px 24px; border-bottom: 1px solid var(--w-line); background: #fff; }
.wotd-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wotd-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--w-dark); color: var(--w-soft); }
.wotd-mark svg { width: 19px; height: 19px; }
.wotd-kicker { display: block; font-family: var(--w-head); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--w-green); }
.wotd-kicker.is-past { color: #a07400; }
.wotd-date { display: block; font-family: var(--w-head); font-weight: 500; font-size: 14px; color: var(--w-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wotd-actions { display: flex; align-items: center; gap: 8px; }
.wotd-bn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px; border: 1px solid var(--w-line); border-radius: 999px; background: #fff; cursor: pointer;
  font-family: var(--w-head); font-weight: 500; font-size: 13px; color: var(--w-dark); transition: background-color .25s, border-color .25s; }
.wotd-bn:hover { background: var(--w-light); border-color: rgba(52, 156, 92, .4); }
.wotd-bn-sw { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--w-green); transition: background-color .25s; }
.wotd-bn-sw::after { content: ""; position: absolute; top: 2px; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .25s var(--w-ease); }
.wotd-bn[aria-pressed="false"] .wotd-bn-sw { background: #c3cfcb; }
.wotd-bn[aria-pressed="false"] .wotd-bn-sw::after { left: 2px; }
.wotd-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--w-light); color: var(--w-dark); cursor: pointer; transition: background-color .25s, transform .3s var(--w-ease); }
.wotd-close:hover { background: var(--w-soft); transform: rotate(90deg); }
.wotd-close svg { width: 18px; height: 18px; }
.wotd-root button:focus-visible, .wotd-root [tabindex]:focus-visible { outline: 3px solid var(--w-gold); outline-offset: 2px; }

/* scrolling content */
.wotd-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.wotd-body { transition: opacity .28s ease, transform .4s var(--w-ease); }
.wotd-body.is-out-left { opacity: 0; transform: translateX(-22px); }
.wotd-body.is-out-right { opacity: 0; transform: translateX(22px); }

/* hero: like the first page of a vocabulary journal */
.wotd-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 74px 32px 30px;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(3, 86, 67, .045) 31px 32px), radial-gradient(120% 140% at 0% 0%, #fff 0%, var(--w-light) 70%); }
.wotd-hero::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1.5px; background: rgba(255, 192, 0, .45); } /* journal margin line */
.wotd-ribbon { position: absolute; z-index: 2; top: 0; left: 40px; width: 46px; padding: 9px 0 16px; text-align: center; background: var(--w-gold); color: var(--w-dark);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); font-family: var(--w-head); line-height: 1; }
.wotd-ribbon b { display: block; font-weight: 700; font-size: 18px; }
.wotd-ribbon span { display: block; margin-top: 3px; font-weight: 600; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
.wotd-cat { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0; font-family: var(--w-head); font-weight: 500; font-size: 12.5px; color: var(--w-green); }
.wotd-cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--w-gold); }
.wotd-word { position: relative; display: inline-block; overflow-wrap: anywhere; margin: 8px 0 0; font-family: var(--w-head); font-weight: 700; font-size: clamp(40px, 5.6vw, 60px); line-height: 1.05; letter-spacing: -.02em; color: var(--w-dark); outline: none; }
.wotd-word span { position: relative; z-index: 1; }
.wotd-word::after { content: ""; position: absolute; z-index: 0; left: -4px; right: -6px; bottom: .04em; height: .32em; border-radius: 4px; background: var(--w-soft);
  transform-origin: left; transform: scaleX(1); transition: transform .7s var(--w-ease) .25s; }
.wotd-word.is-long { font-size: clamp(36px, 4.4vw, 48px); }
.wotd-body.is-fresh .wotd-word::after { transform: scaleX(0); transition: none; }
.wotd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.wotd-ipa { font-family: "Segoe UI", "Lucida Sans Unicode", "DejaVu Sans", Arial, sans-serif; font-size: 17px; color: var(--w-ink); }
.wotd-pos { padding: 4px 11px; border-radius: 999px; background: var(--w-dark); color: #fff; font-family: var(--w-head); font-weight: 500; font-size: 12px; letter-spacing: .02em; }
.wotd-say { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border: 1px solid rgba(52, 156, 92, .45); border-radius: 999px; background: #fff; cursor: pointer;
  font-family: var(--w-head); font-weight: 500; font-size: 12.5px; color: var(--w-dark); transition: background-color .25s; }
.wotd-say:hover { background: var(--w-light); }
.wotd-say svg { width: 16px; height: 16px; color: var(--w-green); }
.wotd-say.is-speaking svg { animation: wotdPulse .9s ease-in-out infinite; }
@keyframes wotdPulse { 50% { transform: scale(1.18); } }

.wotd-meaning { position: relative; z-index: 1; display: grid; gap: 0; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px rgba(3, 86, 67, .1), 0 0 0 1px var(--w-line); overflow: hidden; }
.wotd-meaning > div { padding: 16px 20px 17px; }
.wotd-meaning > div + div { border-top: 1px dashed rgba(52, 156, 92, .35); background: linear-gradient(180deg, #fffdf4, #fff); }
.wotd-lab { display: block; margin-bottom: 4px; font-family: var(--w-head); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--w-green); }
.wotd-lab:lang(bn) { letter-spacing: 0; font-size: 13px; text-transform: none; }
.wotd-meaning p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--w-ink); }
.wotd-meaning p:lang(bn) { font-size: 16.5px; line-height: 1.7; }

/* section jump links */
.wotd-jump { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; padding: 10px 32px; overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--w-line); }
.wotd-jump::-webkit-scrollbar { display: none; }
.wotd-jump button { flex: none; height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-family: var(--w-head); font-weight: 500; font-size: 12.5px; color: var(--w-muted); transition: background-color .25s, color .25s; }
.wotd-jump button:hover { background: var(--w-light); color: var(--w-dark); }
.wotd-jump button.is-on { background: var(--w-dark); color: #fff; }

/* sections */
.wotd-sec { padding: 28px 32px 6px; scroll-margin-top: 56px; }
.wotd-sec:last-child { padding-bottom: 32px; }
.wotd-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; font-family: var(--w-head); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--w-dark); }
.wotd-h small { font-family: var(--w-head); font-weight: 600; font-size: 12px; letter-spacing: .08em; color: var(--w-gold); -webkit-text-stroke: .3px #b98a00; }
.wotd-h em { margin-left: auto; font-style: normal; font-family: var(--w-body); font-weight: 500; font-size: 12.5px; color: var(--w-muted); }
.wotd-root mark { padding: 0 3px; border-radius: 4px; background: var(--w-soft); color: var(--w-dark); font-weight: 700; }

/* real-life examples: numbered scene cards */
.wotd-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: wuse; }
.wotd-uses li { position: relative; padding: 16px 18px 17px; border-radius: 16px; background: #fff; border: 1px solid var(--w-line); counter-increment: wuse; transition: border-color .3s, box-shadow .3s, transform .3s var(--w-ease); }
.wotd-uses li:hover { border-color: rgba(52, 156, 92, .45); box-shadow: 0 10px 24px rgba(3, 86, 67, .08); transform: translateY(-2px); }
.wotd-uses li:only-child, .wotd-uses li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.wotd-tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 9px; font-family: var(--w-head); font-weight: 600; font-size: 11.5px; color: var(--w-green); }
.wotd-tag::before { content: counter(wuse); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--w-light); color: var(--w-dark); font-size: 11px; }
.wotd-en { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--w-ink); }
.wotd-bnl { margin: 8px 0 0; padding-left: 12px; border-left: 3px solid var(--w-soft); font-size: 16px; line-height: 1.7; color: #35514a; }
.wotd-note { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--w-muted); }
.wotd-note::before { content: "Note · "; font-family: var(--w-head); font-weight: 600; color: var(--w-dark); }

/* Bangla hidden = guess first, tap to check */
.wotd-root.is-guess [data-bn] { filter: blur(6px); cursor: pointer; user-select: none; -webkit-user-select: none; transition: filter .35s ease; }
.wotd-root.is-guess [data-bn].is-peeked { filter: none; cursor: auto; user-select: auto; -webkit-user-select: auto; }
.wotd-guess-hint { display: none; margin: 0 32px; padding: 10px 14px; border-radius: 12px; background: var(--w-soft); color: var(--w-dark); font-size: 13px; line-height: 1.5; }
.wotd-root.is-guess .wotd-guess-hint { display: block; }
.wotd-guess-hint b { font-family: var(--w-head); }

/* sentence patterns */
.wotd-pats { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wotd-pats li { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 6px 22px; padding: 14px 18px; border-radius: 16px; background: var(--w-light); }
.wotd-form { align-self: start; justify-self: start; padding: 6px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--w-green); font-family: var(--w-head); font-weight: 600; font-size: 14px; line-height: 1.45; color: var(--w-dark); }
.wotd-pat-ex { margin: 0; font-size: 15px; line-height: 1.6; color: var(--w-ink); font-style: italic; }
.wotd-pats .wotd-bnl { grid-column: 2; margin-top: 2px; font-size: 15px; }

/* mistake */
.wotd-fix { display: grid; gap: 10px; }
.wotd-row { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 14px; font-size: 15.5px; line-height: 1.55; }
.wotd-row svg { width: 20px; height: 20px; margin-top: 2px; }
.wotd-row.is-wrong { background: #fbf3f2; color: #6b3d38; }
.wotd-row.is-wrong svg { color: #c4574b; }
.wotd-row.is-wrong span { text-decoration: line-through; text-decoration-color: rgba(196, 87, 75, .55); text-decoration-thickness: 1.5px; }
.wotd-row.is-right { background: var(--w-light); color: var(--w-dark); font-weight: 600; }
.wotd-row.is-right svg { color: var(--w-green); }
.wotd-fix .wotd-bnl { margin: 2px 0 0; }

/* related expressions */
.wotd-rel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.wotd-rel li { padding: 12px 16px; border-radius: 14px; border: 1px dashed rgba(52, 156, 92, .5); }
.wotd-rel b { display: block; font-family: var(--w-head); font-weight: 600; font-size: 14.5px; color: var(--w-dark); }
.wotd-rel span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.6; color: #35514a; }

/* practice */
.wotd-try { padding: 22px 24px 24px; border-radius: 20px; background: linear-gradient(135deg, var(--w-dark), #07684f); color: #fff; }
.wotd-q { margin: 0; font-family: var(--w-head); font-weight: 500; font-size: 17px; line-height: 1.55; }
.wotd-q .wotd-blank { display: inline-block; min-width: 76px; margin: 0 2px; border-bottom: 2px solid var(--w-gold); text-align: center; color: var(--w-gold); font-weight: 700; }
.wotd-opts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.wotd-opts.is-cols { flex-direction: column; }
.wotd-opt { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 16px; border: 1.5px solid rgba(255, 255, 255, .28); border-radius: 14px; background: rgba(255, 255, 255, .07);
  cursor: pointer; text-align: left; font-family: var(--w-body); font-weight: 500; font-size: 15px; line-height: 1.4; color: #fff; transition: background-color .25s, border-color .25s, transform .25s var(--w-ease); }
.wotd-opt::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.wotd-opt:hover:not(:disabled) { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.wotd-opt[aria-checked="true"] { border-color: var(--w-gold); background: rgba(255, 192, 0, .14); }
.wotd-opt[aria-checked="true"]::before { border-color: var(--w-gold); background: var(--w-gold); box-shadow: inset 0 0 0 3px var(--w-dark); }
.wotd-opt:disabled { cursor: default; }
.wotd-opt.is-correct { border-color: #9be2b4; background: #fff; color: var(--w-dark); font-weight: 600; }
.wotd-opt.is-correct::before { border-color: var(--w-green); background: var(--w-green); box-shadow: none; }
.wotd-opt.is-wrong { border-color: #f1b3aa; background: rgba(241, 179, 170, .16); }
.wotd-opt.is-wrong::before { border-color: #f1b3aa; background: #f1b3aa; box-shadow: none; }
.wotd-opt.is-correct, .wotd-opt.is-wrong { animation: wotdSettle .45s var(--w-ease); }
@keyframes wotdSettle { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: none; } }
.wotd-try-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.wotd-check { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--w-gold); color: var(--w-dark); cursor: pointer;
  font-family: var(--w-head); font-weight: 600; font-size: 14.5px; transition: transform .25s var(--w-ease), opacity .25s, background-color .25s; }
.wotd-check:hover:not(:disabled) { transform: translateY(-2px); background: #ffcb2e; }
.wotd-check:disabled { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .6); cursor: not-allowed; }
.wotd-try.is-done .wotd-try-tip { display: none; }
.wotd-try-tip { font-size: 13px; color: rgba(255, 255, 255, .75); }
.wotd-fb { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: #fff; color: var(--w-ink); }
.wotd-fb[hidden] { display: none; }
.wotd-fb-head { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--w-head); font-weight: 700; font-size: 16px; color: var(--w-dark); }
.wotd-fb-head i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--w-green); color: #fff; font-style: normal; animation: wotdPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.wotd-fb.is-miss .wotd-fb-head i { background: var(--w-gold); color: var(--w-dark); }
.wotd-fb-head svg { width: 16px; height: 16px; }
@keyframes wotdPop { from { transform: scale(0); } to { transform: none; } }
.wotd-fb p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; }
.wotd-fb .wotd-bnl { font-size: 15.5px; }
.wotd-again { margin-top: 12px; height: 36px; padding: 0 16px; border: 1.5px solid var(--w-dark); border-radius: 999px; background: #fff; cursor: pointer; font-family: var(--w-head); font-weight: 600; font-size: 13px; color: var(--w-dark); }
.wotd-again:hover { background: var(--w-light); }

/* footer: this week's words */
.wotd-foot { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--w-line); background: #fbfdfc; }
.wotd-foot-lab { flex: none; font-family: var(--w-head); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--w-muted); }
.wotd-arrow { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--w-line); border-radius: 50%; background: #fff; color: var(--w-dark); cursor: pointer; transition: background-color .25s, opacity .25s; }
.wotd-arrow:hover:not(:disabled) { background: var(--w-light); }
.wotd-arrow:disabled { opacity: .35; cursor: default; }
.wotd-arrow svg { width: 16px; height: 16px; }
.wotd-days { flex: 1 1 auto; display: flex; gap: 6px; min-width: 0; margin: 0; padding: 2px; overflow-x: auto; list-style: none; scrollbar-width: none; }
.wotd-days::-webkit-scrollbar { display: none; }
.wotd-day { position: relative; display: flex; flex-direction: column; align-items: flex-start; flex: 1 0 84px; min-width: 84px; padding: 7px 10px 8px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; transition: background-color .25s, border-color .25s; }
.wotd-day:hover { background: var(--w-light); }
.wotd-day small { font-family: var(--w-head); font-weight: 500; font-size: 10.5px; letter-spacing: .04em; color: var(--w-muted); }
.wotd-day b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--w-head); font-weight: 600; font-size: 13px; color: var(--w-dark); }
.wotd-day.is-today small { color: #a07400; font-weight: 600; }
.wotd-day[aria-current="true"] { border-color: var(--w-green); background: #fff; box-shadow: 0 6px 14px rgba(3, 86, 67, .1); }
.wotd-day.is-seen::after { content: ""; position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--w-green); }
.wotd-today-btn { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--w-gold); color: var(--w-dark); cursor: pointer; font-family: var(--w-head); font-weight: 600; font-size: 12.5px; }
.wotd-today-btn[hidden] { display: none; }
.wotd-foot.is-past .wotd-foot-lab { display: none; }

.wotd-error { margin: 0; padding: 40px 32px; text-align: center; color: var(--w-muted); }
.wotd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- tablet and smaller: compact pill at the bottom left ---------------- */
@media (max-width: 1099px) {
  .wotd-tab { top: auto; bottom: 24px; left: 16px; flex-direction: row; gap: 7px; width: auto; height: 40px; padding: 0 13px 0 8px; border-radius: 999px;
    box-shadow: inset 0 -2.5px 0 var(--w-gold), 0 12px 26px rgba(3, 86, 67, .3); transform: none; background: linear-gradient(135deg, #349C5C, #035643); }
  .js .wotd-tab:not(.is-ready) { transform: translateY(140%); }
  .wotd-tab:hover, .wotd-tab:focus-visible { transform: translateY(-2px); }
  .wotd-tab-label { writing-mode: horizontal-tb; transform: none; font-size: 10px; letter-spacing: .1em; }
  .wotd-tab-peek { display: none; }
  .wotd-tab::before { display: none; }
}

@media (max-width: 760px) {
  .wotd-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 70px 22px 24px 30px; }
  .wotd-hero::before { left: 16px; }
  .wotd-ribbon { left: 30px; width: 40px; }
  .wotd-uses, .wotd-rel { grid-template-columns: minmax(0, 1fr); }
  .wotd-pats li { grid-template-columns: minmax(0, 1fr); }
  .wotd-pats .wotd-bnl { grid-column: 1; }
  .wotd-sec { padding: 24px 22px 4px; }
  .wotd-jump { padding: 8px 18px; }
  .wotd-guess-hint { margin: 0 22px; }
}

/* ---------------- phone: full-height bottom sheet ---------------- */
@media (max-width: 640px) {
  .wotd-tab { bottom: calc(22px + env(safe-area-inset-bottom)); left: 14px; height: 38px; padding: 0 12px 0 7px; }
  .wotd-tab-label { font-size: 9.5px; letter-spacing: .08em; }
  .wotd-tab-icon { width: 22px; height: 22px; }
  .wotd { place-items: end stretch; padding: 0; }
  .wotd-panel { width: 100%; height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: none; border-radius: 22px 22px 0 0; transform: translateY(100%); transition: opacity .2s ease, transform .5s var(--w-ease); }
  .wotd.is-open .wotd-panel { transform: none; }
  .wotd-top { padding: 18px 12px 12px 16px; }
  .wotd-top::before { content: ""; position: absolute; left: 50%; top: 7px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #d5dfdb; }
  .wotd-mark { width: 32px; height: 32px; border-radius: 10px; }
  .wotd-date { font-size: 13px; }
  .wotd-bn { height: 36px; padding: 0 10px 0 8px; font-size: 12px; }
  .wotd-bn-text { display: none; }
  .wotd-close { width: 38px; height: 38px; }
  .wotd-word { font-size: 42px; }
  .wotd-word.is-long { font-size: 33px; }
  .wotd-h { font-size: 17.5px; }
  .wotd-h em { display: none; }
  .wotd-en { font-size: 15px; }
  .wotd-try { padding: 20px 18px; border-radius: 18px; }
  .wotd-q { font-size: 16px; }
  .wotd-opt { width: 100%; }
  .wotd-foot { flex-wrap: wrap; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .wotd-foot-lab { display: none; }
  .wotd-days { order: 0; flex-basis: calc(100% - 92px); }
  .wotd-day { flex: 0 0 auto; min-width: 78px; }
  .wotd-today-btn { order: 1; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wotd-tab, .wotd-tab-peek, .wotd-backdrop, .wotd-panel, .wotd-body, .wotd-word::after, .wotd-uses li, .wotd-opt, .wotd-close { transition: none !important; animation: none !important; }
  .wotd-fb-head i, .wotd-opt.is-correct, .wotd-opt.is-wrong, .wotd-say.is-speaking svg { animation: none !important; }
  .js .wotd-tab:not(.is-ready) { transform: translate(0, -50%); }
  .wotd-scroll { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1099px) { .js .wotd-tab:not(.is-ready) { transform: none; } }

/* desktop: a slimmer side tab (the hover card keeps its size) */
@media (min-width: 1100px) {
  .wotd-tab { width: 28px; gap: 7px; padding: 6px 0 10px; border-radius: 0 10px 10px 0; box-shadow: inset -2px 0 0 var(--w-gold), 0 8px 18px rgba(3, 86, 67, .24); }
  .wotd-tab:hover, .wotd-tab:focus-visible { box-shadow: inset -2px 0 0 var(--w-gold), 0 12px 24px rgba(3, 86, 67, .3); }
  .wotd-tab-icon { width: 20px; height: 20px; }
  .wotd-tab-icon svg { width: 12px; height: 12px; }
  .wotd-tab-label { font-size: 8.5px; letter-spacing: .12em; }
}