/* Wordlark styles. Moved out of pageheader.asp on 2026-09-29 so they are
   fetched once and cached. The address carries the file time as its
   version (AssetUrl in init.asp), so a change here is picked up at once. */
body            { background:#f7f7f9; padding:2rem 1rem; }
.form-signin    { max-width:420px; margin:0 auto; }
.form-signin.table-form { max-width:760px; }
.form-floating  { margin-bottom:.75rem; }
.input-icons    { position:relative; }
.input-icons .icon { position:absolute; right:.9rem; top:1.1rem; z-index:5; color:#6c757d; }
.custom-table   { background:#fff; }
.custom-table tbody tr { cursor:pointer; }
.custom-table tbody tr:hover { background:#eef4ff; }
.btn-block      { width:100%; }
.content        { margin-top:1rem; }
/* The original flag sprite did not survive; these stand in for
   "flag flag-uk" and "flag flag-netherlands". */
/* Flags as SVG images (2026-09-28): emoji flags render as two letters on Windows */
.flag           { font-style:normal; display:inline-block; width:1.35em; height:1em; vertical-align:-.12em; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.flag-uk         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/gb.svg); }
.flag-netherlands { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/nl.svg); }
.flag-en         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/gb.svg); }
.flag-nl         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/nl.svg); }
.flag-fr         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/fr.svg); }
.flag-de         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/de.svg); }
.flag-es         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/es.svg); }
.flag-it         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/it.svg); }
.flag-pt         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/pt.svg); }
.flag-pl         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/pl.svg); }
.flag-sv         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/se.svg); }
.flag-no         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/no.svg); }
.flag-da         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/dk.svg); }
.flag-tr         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/tr.svg); }
.flag-ro         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/ro.svg); }
.flag-hu         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/hu.svg); }
.flag-vi         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/vn.svg); }
.flag-cy         { background-image:url(https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/flags/4x3/gb-wls.svg); }
.flag-la        { background:none; box-shadow:none; width:auto; }
.flag-la::before { font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f66f"; color:#8a6d3b; }
.upload-help    { font-size:.9rem; color:#6c757d; }
.row-problem    { background:#fff3cd; }
/* Play screen and home strip (2026-09-27) */
.play-wrap      { max-width:560px; margin:0 auto; }
.card           { background:#fff; border:1px solid #e4e7ec; border-radius:16px; padding:1.25rem 1.25rem; margin-bottom:1rem; box-shadow:0 2px 8px rgba(16,24,40,.05); }
.hud            { display:flex; align-items:stretch; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.hud-item       { flex:1 1 0; min-width:96px; background:#fff; border:1px solid #e4e7ec; border-radius:14px; padding:.55rem .6rem; text-align:center; line-height:1.15; }
.hud-item i     { font-size:1.15rem; display:block; margin-bottom:.15rem; }
.hud-num        { display:block; font-weight:700; font-size:1.25rem; }
.hud-of         { font-weight:400; color:#98a2b3; font-size:.9rem; }
.hud-lbl        { display:block; font-size:.72rem; color:#667085; text-transform:uppercase; letter-spacing:.03em; }
.hud-item.ring svg { display:block; margin:0 auto .15rem; }
.hud-item.streak i { color:#98a2b3; }
.hud-item.streak.tier-1 i { color:#f59e0b; }
.hud-item.streak.tier-2 i { color:#f97316; }
.hud-item.streak.tier-3 i { color:#ef4444; animation:vd-flicker 1s infinite alternate; }
.hud-item.streak.tier-4 i { color:#a855f7; animation:vd-flicker .6s infinite alternate; text-shadow:0 0 10px #c084fc; }
.hud-item.best i { color:#eab308; }
.goal-bar       { height:8px; background:#e4e7ec; border-radius:4px; overflow:hidden; margin:.35rem 0 .4rem; }
.goal-fill      { height:100%; background:#2f6fd6; border-radius:4px; transition:width .6s ease; }
.goal-fill.done { background:#2e9e5b; }
.hud-mute       { flex:0 0 auto; align-self:center; border:1px solid #e4e7ec; background:#fff; border-radius:12px; width:44px; height:44px; color:#667085; }
.hud-mute.off   { color:#b42318; }
.fanfare        { display:flex; align-items:center; gap:.7rem; border-radius:14px; padding:.7rem 1rem; margin-bottom:.6rem; overflow:hidden; max-height:6rem; animation:vd-pop .45s ease-out, vd-fanfare-out .7s ease-in 6s forwards; }
@keyframes vd-fanfare-out { to { opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-bottom:0; } }
.fanfare i      { font-size:1.4rem; }
.fanfare.level-1 { background:#eef4ff; color:#1c3f8a; }
.fanfare.level-2 { background:#fff4e5; color:#9a3412; }
.fanfare.level-3 { background:linear-gradient(90deg,#fde68a,#fca5a5,#c4b5fd); color:#1f2937; }
.result-card    { animation:vd-pop .35s ease-out; }
.result-card.is-right  { border-color:#2e9e5b; box-shadow:0 0 0 4px rgba(46,158,91,.12); }
.result-card.is-almost { border-color:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.12); }
.result-card.is-wrong  { border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.12); animation:vd-shake .4s; }
.result-verdict { font-weight:700; font-size:1.05rem; margin-bottom:.4rem; }
.is-right .result-verdict  { color:#2e9e5b; }
.is-almost .result-verdict { color:#b45309; }
.is-wrong .result-verdict  { color:#dc2626; }
.result-answer  { font-size:1.35rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.result-prompt  { color:#475467; }
.result-arrow   { color:#98a2b3; font-size:1rem; }
.result-target  { font-weight:700; }
.result-yours   { color:#667085; margin-top:.3rem; }
.question-list  { color:#98a2b3; font-size:.85rem; margin-bottom:.6rem; }
.question-lang  { display:inline-block; color:#667085; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem; }
.question-word  { font-size:2rem; font-weight:700; line-height:1.15; margin-bottom:.9rem; }
.question-hint  { color:#475467; font-size:1.05rem; margin-bottom:.9rem; }
.answer-row     { display:flex; gap:.5rem; }
.answer-input   { flex:1 1 auto; font-size:1.25rem; }
.answer-btn     { white-space:nowrap; }
.play-links     { text-align:center; color:#667085; margin-top:.5rem; }
.home-strip     { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin:0 0 1rem; }
.chip           { background:#fff; border:1px solid #e4e7ec; border-radius:999px; padding:.4rem .9rem; font-size:.9rem; color:#475467; }
.chip b         { color:#1f2937; }
.chip i         { margin-right:.3rem; }
.chip.fire i    { color:#f97316; }
.chip.risk      { background:#fff4e5; border-color:#fed7aa; }
.chip .mini-bar { display:inline-block; width:80px; height:6px; background:#e4e7ec; border-radius:3px; vertical-align:middle; margin-left:.4rem; overflow:hidden; }
.chip .mini-bar span { display:block; height:100%; background:#2f6fd6; }
@keyframes vd-pop     { 0% { transform:scale(.96); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes vd-shake   { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
@keyframes vd-flicker { from { transform:scale(1); } to { transform:scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .fanfare { animation:vd-fanfare-out .1s linear 8s forwards; } .result-card { animation:none; } .hud-item.streak i { animation:none; } }
/* Full-screen effects, XP, bonus, crowns, markers, leaderboard, lightning (2026-09-27) */
.vd-fx          { position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.vd-fx-fire     { background:linear-gradient(to top, rgba(255,90,0,.28), rgba(255,160,0,.10) 40%, transparent 65%); animation:vd-fade 3.3s forwards; }
.vd-flame       { position:absolute; bottom:-80px; border-radius:50% 50% 40% 40% / 60% 60% 40% 40%; opacity:0; filter:blur(1.5px);
                  background:radial-gradient(ellipse at 50% 85%, #fff59d 0%, #ffb300 30%, #ff5722 60%, rgba(255,61,0,0) 74%);
                  animation:vd-rise 2s ease-out forwards; }
.vd-fx-flash    { animation:vd-flash .55s ease-out forwards; background:#fff; }
.vd-big         { position:absolute; left:50%; top:38%; font-size:7.5rem; line-height:1; transform:translate(-50%,-50%) scale(.2); opacity:0;
                  animation:vd-zoom 2.4s ease-out forwards; filter:drop-shadow(0 8px 20px rgba(0,0,0,.28)); }
@keyframes vd-rise    { 0% { transform:translateY(0) scaleX(1); opacity:0; } 12% { opacity:.95; } 60% { transform:translateY(-60vh) scaleX(.8); opacity:.8; } 100% { transform:translateY(-115vh) scaleX(.35); opacity:0; } }
@keyframes vd-flash   { 0% { opacity:.85; } 100% { opacity:0; } }
@keyframes vd-zoom    { 0% { transform:translate(-50%,-50%) scale(.2); opacity:0; } 18% { transform:translate(-50%,-50%) scale(1.2); opacity:1; } 32% { transform:translate(-50%,-50%) scale(1); } 78% { opacity:1; } 100% { transform:translate(-50%,-75%) scale(1.15); opacity:0; } }
@keyframes vd-fade    { 0%,70% { opacity:1; } 100% { opacity:0; } }
.level-line     { display:flex; align-items:center; gap:.6rem; margin:-.3rem 0 1rem; font-size:.85rem; color:#667085; }
.level-badge    { background:#1c3f8a; color:#fff; border-radius:999px; padding:.15rem .6rem; font-weight:700; white-space:nowrap; }
.level-bar      { flex:1 1 auto; height:8px; background:#e4e7ec; border-radius:4px; overflow:hidden; }
.level-fill     { height:100%; background:linear-gradient(90deg,#7c3aed,#2f6fd6); border-radius:4px; }
.level-xp       { white-space:nowrap; }
.xp-chip        { float:right; font-size:.8rem; font-weight:700; background:#eef4ff; color:#1c3f8a; border-radius:999px; padding:.15rem .55rem; }
.xp-chip.bonus  { background:#fdf4ff; color:#7c3aed; }
.xp-chip.dup    { background:#f2f4f7; color:#667085; font-weight:600; }
.question-card.is-bonus { border-color:#7c3aed; box-shadow:0 0 0 4px rgba(124,58,237,.12); }
.bonus-ribbon   { display:inline-block; background:linear-gradient(90deg,#7c3aed,#c026d3); color:#fff; font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:.25rem .8rem; margin-bottom:.6rem; animation:vd-pop .5s ease-out; }
.crown          { margin-left:.4rem; }
.crown.bronze   { color:#b87333; }
.crown.silver   { color:#9aa5b1; }
.crown.gold     { color:#f5b301; }
.mark-hot       { color:#f97316; margin-left:.35rem; }
.mark-cold      { color:#60a5fa; margin-left:.35rem; }
.lightning-bar  { display:flex; align-items:center; gap:.6rem; background:#fff7cc; border:1px solid #fde68a; border-radius:14px; padding:.55rem .9rem; margin-bottom:.8rem; font-weight:700; color:#92400e; }
.lightning-time { margin-left:auto; font-size:1.3rem; font-variant-numeric:tabular-nums; }
.lightning-time.urgent { color:#dc2626; animation:vd-flicker .5s infinite alternate; }
.lightning-count { font-weight:400; color:#78350f; }
.lb-table td, .lb-table th { padding:.35rem .5rem; }
.lb-me          { background:#eef4ff; font-weight:700; }
.lb-rank        { color:#98a2b3; width:1.5rem; }
/* Top navigation, language cards, word image (2026-09-27) */
body            { padding-top:1rem; }
.topnav         { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; max-width:760px; margin:0 auto 1.25rem; background:#fff; border:1px solid #e4e7ec; border-radius:14px; padding:.5rem .8rem; }
.topnav .brand  { display:flex; align-items:center; gap:.45rem; font-weight:800; color:#1c3f8a; text-decoration:none; font-size:1.05rem; }
.topnav .brand img { height:22px; width:auto; }
.topnav .links  { display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; margin-left:auto; }
.topnav .links a { color:#475467; text-decoration:none; padding:.35rem .55rem; border-radius:8px; font-size:.92rem; white-space:nowrap; }
.topnav .links a:hover, .topnav .links a.active { background:#eef4ff; color:#1c3f8a; }
.topnav .links a.lang { border:1px solid #e4e7ec; margin-left:.25rem; }
.topnav .links a.lang .flag { margin-right:.25rem; }
.topnav .links span.lang { color:#475467; padding:.35rem .55rem; border:1px solid #e4e7ec; border-radius:8px; font-size:.92rem; margin-left:.25rem; white-space:nowrap; }
.topnav .links span.lang .flag { margin-right:.25rem; }
/* Popup window for a page inside another (settings on the play page) */
.vd-pop-back    { position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:1190; display:flex; align-items:center; justify-content:center; padding:1rem; animation:vd-fadein .15s ease-out; }
.vd-pop         { background:#f6f7fb; border-radius:18px; box-shadow:0 18px 50px rgba(16,24,40,.25); width:100%; max-width:640px; height:min(85vh, 760px); display:flex; flex-direction:column; overflow:hidden; animation:vd-pop .2s ease-out; }
.vd-pop-head    { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; background:#fff; border-bottom:1px solid #e4e7ec; font-weight:700; }
.vd-pop-head button { border:0; background:transparent; font-size:1.2rem; color:#667085; width:36px; height:36px; border-radius:10px; }
.vd-pop-head button:hover { background:#f2f4f7; color:#1f2937; }
.vd-pop iframe  { flex:1 1 auto; border:0; width:100%; }
body.is-embed   { padding-top:0; background:#f6f7fb; }
body.is-embed .play-wrap { padding-top:.75rem; }
body.is-embed .embed-hide { display:none; }
.pw-card        { padding:.9rem 1.25rem; }
.pw-summary     { cursor:pointer; font-weight:700; color:#1c3f8a; list-style:none; }
.pw-summary::-webkit-details-marker { display:none; }
.pw-summary i   { margin-right:.4rem; color:#f59e0b; }
.pw-card[open] .pw-summary { margin-bottom:.25rem; }
.quit-btn       { border:1px solid #fecaca; background:#fff5f5; color:#b42318; border-radius:8px; padding:.35rem .65rem; font-size:.92rem; margin-left:.25rem; }
.quit-btn:hover { background:#fee2e2; }
.quit-menu .dropdown-menu { border-radius:12px; border-color:#e4e7ec; box-shadow:0 10px 30px rgba(16,24,40,.12); padding:.4rem; min-width:14rem; }
.quit-menu .dropdown-item { border-radius:8px; padding:.5rem .7rem; }
.quit-menu .dropdown-item i { width:1.3rem; color:#667085; margin-right:.2rem; }
.lang-card      { display:block; text-decoration:none; color:inherit; }
.lang-card:hover { border-color:#2f6fd6; box-shadow:0 0 0 4px rgba(47,111,214,.12); color:inherit; }
.lang-card.is-current { border-color:#2f6fd6; }
.lang-head      { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.lang-head .flag { font-size:1.6rem; }
.lang-name      { font-size:1.25rem; font-weight:700; }
.lang-lists     { margin-left:auto; color:#667085; font-size:.9rem; }
.lang-stats     { display:flex; gap:1rem; flex-wrap:wrap; color:#475467; font-size:.9rem; }
/* Picture beside the prompt (2026-09-28): a wider column when there is one, never taller than the prompt block */
.question-card  { position:relative; }
.question-head  { margin-bottom:.9rem; }
.question-head .question-word { margin-bottom:0; }
.question-image { position:absolute; top:.9rem; right:.9rem; width:130px; height:130px; border-radius:12px; object-fit:cover; background:#f7f7f9; }
.has-image .question-list, .has-image .question-head, .has-image .bonus-ribbon { max-width:calc(100% - 150px); }
.play-wrap.has-image { max-width:680px; }
.result-image   { display:block; max-height:120px; border-radius:10px; margin:.5rem 0 0; object-fit:contain; }
.reset-link     { font-family:monospace; font-size:.8rem; word-break:break-all; }
/* Hints (2026-09-27) */
.hint-bar       { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:.8rem; }
.hint-btn       { display:inline-flex; align-items:center; gap:.55rem; border:0; background:#fff7e6; color:#7c4a03; border-radius:12px; padding:.5rem .9rem .5rem .7rem; text-align:left; box-shadow:inset 0 0 0 1px #fcd9a4; }
.hint-btn:hover { background:#ffefd0; }
.hint-btn:disabled { opacity:.55; cursor:default; }
.hint-btn i     { color:#f59e0b; font-size:1.35rem; }
.hint-btn .hint-ico { position:relative; display:inline-block; line-height:1; margin-right:.15rem; }
.hint-btn .hint-ico .hint-q { position:absolute; right:-.55rem; bottom:-.3rem; font-size:.8rem; color:#1c3f8a; background:#fff; border-radius:50%; }
.hint-btn .hint-main { display:block; font-weight:700; font-size:.95rem; line-height:1.15; }
.hint-btn .hint-next { display:block; font-size:.78rem; color:#9a6b1f; line-height:1.15; }
.hint-worth     { font-size:.85rem; color:#667085; }
.hint-worth b   { color:#1f2937; }
.hint-list      { margin:0 0 .7rem; display:flex; flex-direction:column; gap:.45rem; }
.hint-btn .hint-cost { display:none; font-weight:600; }
/* Inside the hint box the button becomes a small pill on the first row's right; no extra height */
.hint-row .hint-bar.in-box { float:right; margin:-.15rem 0 .2rem .6rem; gap:0; }
.hint-bar.in-box .hint-btn { padding:.2rem .6rem .2rem .45rem; border-radius:999px; gap:.35rem; font-size:.85rem; }
.hint-bar.in-box .hint-btn i { font-size:1rem; }
.hint-bar.in-box .hint-btn .hint-ico .hint-q { font-size:.65rem; right:-.4rem; bottom:-.2rem; }
.hint-bar.in-box .hint-main { font-size:.85rem; }
.hint-bar.in-box .hint-cost { display:inline; }
.hint-bar.in-box .hint-next, .hint-bar.in-box .hint-worth { display:none; }
.hint-row       { background:#fffbf2; border:1px solid #fde8c4; border-radius:12px; padding:.55rem .8rem; }
.hint-row.is-new { animation:vd-pop .3s ease-out; border-color:#f59e0b; }
.hint-tag       { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#b45309; background:#fde8c4; border-radius:999px; padding:.1rem .5rem; margin-right:.4rem; vertical-align:middle; }
.hint-cap       { font-size:.92rem; color:#3f3f46; vertical-align:middle; }
.hint-cap b     { color:#1c3f8a; }
.hint-note      { font-size:.8rem; color:#98a2b3; margin-top:.3rem; }
.hint-shape     { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.5rem; align-items:flex-end; }
.hint-shape .slot { width:1.6rem; height:2.1rem; border-bottom:3px solid #94a3b8; text-align:center; font-size:1.3rem; font-weight:700; line-height:2rem; color:#1c3f8a; }
.hint-shape .slot.shown { border-bottom-color:#2f6fd6; }
.hint-shape .slot.just  { background:#eef4ff; border-radius:6px 6px 0 0; }
.hint-shape .gap  { width:1rem; }
.hint-shape .punct { width:.9rem; text-align:center; font-size:1.3rem; line-height:2rem; color:#475467; }
.hint-tiles     { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; }
.hint-shape + .hint-tiles { margin-top:.7rem; padding-top:.6rem; border-top:1px dashed #fde8c4; }
.hint-tiles .tile { width:2.1rem; height:2.3rem; border:1px solid #e4e7ec; border-radius:8px; background:#fff; box-shadow:0 1px 0 #d0d5dd; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.15rem; color:#1f2937; transition:all .15s; }
.hint-tiles .tile.used { background:#f2f4f7; color:#b6bcc6; box-shadow:none; transform:scale(.92); }
.answer-input.buzz { animation:vd-shake .3s; border-color:#ef4444; }
.result-card.is-helped { border-color:#2e9e5b; box-shadow:0 0 0 4px rgba(46,158,91,.12); border-style:dashed; }
/* Confirm dialog (2026-09-27): window.vdConfirm({...}) in pagefooter.asp */
.vd-dlg-back    { position:fixed; inset:0; background:rgba(16,24,40,.45); display:flex; align-items:center; justify-content:center; z-index:1200; padding:1rem; animation:vd-fadein .15s ease-out; }
.vd-dlg         { background:#fff; border-radius:18px; box-shadow:0 18px 50px rgba(16,24,40,.25); max-width:420px; width:100%; padding:1.4rem 1.5rem 1.25rem; animation:vd-pop .2s ease-out; }
.vd-dlg-icon    { width:48px; height:48px; border-radius:14px; background:#eef4ff; color:#1c3f8a; display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:.8rem; }
.vd-dlg-icon.warn { background:#fff4e5; color:#9a3412; }
.vd-dlg h2      { font-size:1.2rem; font-weight:800; margin:0 0 .35rem; color:#1f2937; }
.vd-dlg p       { color:#475467; margin:0 0 1.1rem; }
.vd-dlg-btns    { display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; }
.vd-dlg-btns .btn { border-radius:10px; padding:.5rem 1.1rem; font-weight:600; }
@keyframes vd-fadein { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .vd-dlg-back, .vd-dlg { animation:none; } }
/* Accent keyboard under the answer box (2026-09-28) */
.accent-keys    { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin-top:.55rem; }
.accent-keys button { min-width:2.3rem; height:2.3rem; padding:0 .4rem; border:1px solid #e4e7ec; border-radius:8px; background:#fff; box-shadow:0 1px 0 #d0d5dd; font-size:1.15rem; color:#1f2937; }
.accent-keys button:hover { background:#eef4ff; border-color:#c7d2fe; }
.accent-keys button:active { transform:translateY(1px); box-shadow:none; }
.accent-keys.is-upper button { background:#fffbeb; }
.accent-keys .keys-note { font-size:.75rem; color:#98a2b3; margin-left:.3rem; }
/* Phones (2026-09-28): one menu, a compact HUD, and only the basics while typing */
.narrow-only    { display:none; }
@media (max-width: 576px) {
  body          { padding:.5rem .6rem; }
  .wide-only    { display:none !important; }
  .narrow-only  { display:revert; }
  li.narrow-only { display:list-item; }
  .topnav       { padding:.35rem .6rem; margin-bottom:.6rem; gap:.4rem; }
  .topnav .brand { font-size:1rem; }
  .quit-btn     { border-color:#e4e7ec; background:#fff; color:#475467; }
  .hud          { gap:.35rem; margin-bottom:.5rem; }
  .hud-item     { min-width:0; padding:.3rem .35rem; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:.3rem; }
  .hud-item i   { font-size:.95rem; display:inline; margin:0; }
  .hud-num      { display:inline; font-size:.95rem; }
  .hud-lbl      { display:none; }
  .hud-item.ring svg { display:none; }
  .hud-item.goal { display:flex; }
  .play-wrap .goal-bar { display:none; }
  .hud-item.goal::before { content:"\f11d"; font-family:"Font Awesome 6 Free"; font-weight:900; color:#2f6fd6; font-size:.9rem; }
  .hud-item.ring::before { content:"\f058"; font-family:"Font Awesome 6 Free"; font-weight:900; color:#2e9e5b; font-size:.9rem; }
  .level-line   { margin:0 0 .6rem; font-size:.78rem; gap:.4rem; }
  .level-badge  { padding:.1rem .5rem; }
  .fanfare      { padding:.5rem .7rem; font-size:.9rem; }
  .card         { padding:.85rem .9rem; border-radius:14px; margin-bottom:.7rem; }
  .result-verdict { font-size:.95rem; margin-bottom:.25rem; }
  .result-answer { font-size:1.15rem; gap:.4rem; }
  .result-yours { font-size:.9rem; margin-top:.15rem; }
  .question-list { font-size:.78rem; margin-bottom:.35rem; }
  .question-word { font-size:1.6rem; margin-bottom:.6rem; }
  .question-hint { font-size:.95rem; margin-bottom:.6rem; }
  .bonus-ribbon { font-size:.72rem; }
  .answer-input { font-size:1.1rem; }
  /* Flags instead of language names, arrow-only Check, floating hint button */
  .question-prompt { display:flex; align-items:center; gap:.5rem; }
  .question-prompt .question-lang { font-size:0; margin:0; letter-spacing:0; }
  .question-prompt .question-lang .flag { font-size:1.4rem; }
  .question-prompt .question-word { margin:0; }
  .question-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; max-width:none; }
  .question-head .question-prompt { flex:1 1 auto; }
  .question-image { position:static; width:64px; height:64px; border-radius:8px; flex:0 0 auto; }
  .has-image .question-list, .has-image .bonus-ribbon { max-width:none; padding-right:3rem; }
  .play-wrap.has-image { max-width:none; }
  .answer-line  { display:flex; align-items:center; gap:.5rem; }
  .answer-line .question-lang { font-size:0; margin:0; letter-spacing:0; flex:0 0 auto; }
  .answer-line .question-lang .flag, .answer-line .question-lang .fa-solid { font-size:1.4rem; color:#667085; }
  .answer-line .answer-row { flex:1 1 auto; }
  .answer-btn   { padding:.5rem .8rem; }
  .hint-bar     { position:absolute; top:.55rem; right:.55rem; margin:0; gap:0; }
  .hint-row .hint-bar.in-box { position:static; float:right; }
  .hint-bar.in-box .hint-main { display:inline; }
  .hint-btn     { padding:.35rem .5rem; border-radius:999px; gap:0; }
  .hint-btn i   { font-size:1.2rem; }
  .hint-btn .hint-main, .hint-btn .hint-next { display:none; }
  .hint-worth   { display:none; }
  .question-card .question-list { padding-right:3rem; }
  .hint-shape .slot { width:1.3rem; height:1.8rem; font-size:1.1rem; line-height:1.7rem; }
  .hint-tiles .tile { width:1.8rem; height:2rem; font-size:1rem; }
  .accent-keys button { min-width:2.1rem; height:2.1rem; font-size:1.05rem; }
  .accent-keys .keys-note { display:none; }
  .mobile-hide  { display:none; }
  /* The keyboard is up: keep the question and the answer box, drop the rest. */
  body.is-typing .hud, body.is-typing .level-line, body.is-typing .fanfare, body.is-typing .question-list { display:none; }
  body.is-typing .topnav { margin:1rem auto 0; }
  body.is-typing .result-card { padding:.5rem .8rem; }
  body.is-typing .result-answer { font-size:1rem; }
  body.is-typing .result-yours { display:none; }
  body.is-typing .question-image { width:48px; height:48px; }   /* beside the word, no extra height */
}
/* Browse page (2026-09-28): tabs, folder cards, list table, pick bar */
.mark-known     { color:#2e9e5b; font-size:.85rem; margin-left:.25rem; }
.mark-shared    { color:#98a2b3; font-size:.75rem; margin-left:.25rem; }
.browse-wrap    { max-width:760px; margin:0 auto; }
.browse-head    { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin:.5rem 0 1rem; }
.browse-tabs    { display:flex; gap:.3rem; background:#fff; border:1px solid #e4e7ec; border-radius:12px; padding:.25rem; }
.btab           { color:#475467; text-decoration:none; padding:.4rem .8rem; border-radius:9px; font-weight:600; white-space:nowrap; }
.btab i         { margin-right:.3rem; color:#98a2b3; }
.btab.active    { background:#1c3f8a; color:#fff; }
.btab.active i  { color:#c7d2fe; }
.browse-search  { display:flex; gap:.3rem; flex:1 1 220px; max-width:320px; }
.crumbs         { font-size:.9rem; color:#667085; margin-bottom:.3rem; }
.crumbs a       { color:#1c3f8a; text-decoration:none; }
.crumbs i       { color:#c0c6d0; font-size:.75rem; margin:0 .15rem; }
.browse-title   { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.6rem; }
.browse-title h1 { margin:0; }
.browse-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.type-tag       { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#9a6b1f; background:#fff4e5; border-radius:999px; padding:.1rem .5rem; vertical-align:middle; }
.folder-grid    { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:.6rem; margin-bottom:1rem; }
.folder-card    { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; column-gap:.6rem; align-items:center; background:#fff; border:1px solid #e4e7ec; border-radius:14px; padding:.7rem .85rem; text-decoration:none; color:inherit; }
.folder-card:hover { border-color:#2f6fd6; box-shadow:0 0 0 4px rgba(47,111,214,.1); color:inherit; }
.folder-card > i { grid-row:1 / span 3; font-size:1.5rem; color:#f59e0b; }
.folder-name    { font-weight:700; }
.folder-meta    { font-size:.8rem; color:#667085; }
.folder-bar     { display:block; height:5px; background:#eef0f3; border-radius:3px; overflow:hidden; margin-top:.3rem; }
.folder-bar span { display:block; height:100%; background:#2e9e5b; }
.list-table td.pick, .list-table th.pick { width:2rem; }
.list-table .list-link { color:#1f2937; font-weight:600; text-decoration:none; }
.list-table .list-link:hover { color:#1c3f8a; }
.list-table td.stars { white-space:nowrap; color:#f59e0b; font-size:.85rem; }
.pick-bar       { display:none; align-items:center; gap:.8rem; position:sticky; bottom:.5rem; background:#fff; border:1px solid #e4e7ec; border-radius:12px; padding:.5rem .8rem; box-shadow:0 6px 20px rgba(16,24,40,.12); }
.pick-bar.show  { display:flex; }
.organise h2    { color:#475467; }
.organise-list  { border-top:1px dashed #e4e7ec; padding:.6rem 0; }
@media (max-width: 576px) { .browse-search { max-width:none; } .list-table th:nth-child(4), .list-table td:nth-child(4), .list-table th:nth-child(5), .list-table td:nth-child(5) { display:none; } }
/* Screen heights and widths (2026-09-28): the HUD moves to the side margin on
   wide screens, shrinks on short ones; the last answer folds to one line. */
.play-wrap      { position:relative; }
.play-side, .play-main { display:block; }
@media (min-width: 1100px) {
  /* HUD and level line as a left column, the whole block as wide as the header and centred */
  .play-wrap.is-play { max-width:760px; display:flex; align-items:flex-start; gap:1.1rem; }
  .play-wrap.is-play.has-image { max-width:760px; }
  .play-side  { flex:0 0 190px; width:190px; }
  .play-main  { flex:1 1 auto; min-width:0; }
  .play-side .hud { flex-direction:column; flex-wrap:nowrap; gap:.5rem; margin-bottom:.8rem; }
  .play-side .hud-item { flex:0 0 auto; min-width:0; }
  .play-side .level-line { flex-direction:column; align-items:stretch; gap:.35rem; margin:0; }
  .play-side .level-line .level-xp { white-space:normal; font-size:.8rem; }
  .lightning-bar { width:100%; }
}
@media (min-width: 577px) and (max-width: 1099px) and (max-height: 760px) {
  .hud          { gap:.35rem; margin-bottom:.5rem; }
  .hud-item     { min-width:0; padding:.3rem .35rem; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:.3rem; }
  .hud-item i   { font-size:.95rem; display:inline; margin:0; }
  .hud-num      { display:inline; font-size:.95rem; }
  .hud-lbl      { display:none; }
  .hud-item.ring svg { display:none; }
  .play-wrap .goal-bar { display:none; }
  .level-line   { margin:0 0 .6rem; font-size:.78rem; }
  .card         { padding:.85rem 1rem; margin-bottom:.7rem; }
  .question-word { font-size:1.6rem; margin-bottom:.6rem; }
  .question-image { width:90px; height:90px; }
}
/* Folded last answer: one small line, the words kept, the score dropped */
.result-card    { transition:padding .2s ease; cursor:pointer; }
.result-card.compact { padding:.25rem .7rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.6rem; flex-wrap:nowrap; box-shadow:none; animation:none; min-height:0; }
.result-card.compact .result-verdict { flex:0 0 auto; margin:0; font-size:.8rem; font-weight:600; display:inline-flex; align-items:center; gap:.3rem; color:#667085; white-space:nowrap; }
.result-card.compact .result-verdict .xp-chip { display:none; }
.result-card.compact .result-answer { flex:1 1 auto; min-width:0; font-size:.9rem; gap:.35rem; margin:0; flex-wrap:nowrap; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-card.compact .result-answer > span { overflow:hidden; text-overflow:ellipsis; }
.result-card.compact .result-answer .result-prompt { font-size:.9rem; }
.result-card.compact .result-yours { display:none; }
.result-card.compact .result-arrow { font-size:.8rem; }
.result-card.compact.is-right .result-verdict { color:#2e9e5b; }
.result-card.compact.is-wrong .result-verdict { color:#b42318; }
.result-card.compact.is-almost .result-verdict { color:#b45309; }
/* Social sign-in (2026-09-28) */
.social-row     { display:flex; flex-direction:column; gap:.5rem; margin-top:1rem; }
.social-or      { text-align:center; color:#98a2b3; font-size:.85rem; position:relative; }
.social-or::before, .social-or::after { content:""; position:absolute; top:50%; width:42%; border-top:1px solid #e4e7ec; }
.social-or::before { left:0; }  .social-or::after { right:0; }
.social-btn     { display:flex; align-items:center; justify-content:center; gap:.5rem; }
.social-btn i   { font-size:1.1rem; }
/* Multiple choice (2026-09-28) */
.choice-grid    { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin:.5rem 0 .3rem; }
.choice-btn     { border:1px solid #d0d5dd; background:#fff; border-radius:12px; padding:.75rem .9rem; font-size:1.15rem; font-weight:600; color:#1f2937; text-align:center; transition:all .12s; }
.choice-btn:hover { border-color:#2f6fd6; background:#eef4ff; }
.choice-btn:active { transform:translateY(1px); }
.choice-btn.is-out { color:#c0c6d0; text-decoration:line-through; background:#f7f7f9; border-style:dashed; }
@media (max-width: 576px) { .choice-grid { grid-template-columns:1fr; gap:.4rem; } .choice-btn { padding:.6rem .8rem; font-size:1.05rem; } }
/* Multiple choice: nothing moves under the mouse - no folding, no collapsing banners */
.is-choose .result-card { cursor:default; }
.is-choose .result-card.compact { transition:none; }
.result-card.is-placeholder { border-color:#e4e7ec; box-shadow:none; color:#98a2b3; }
.result-card.is-placeholder .result-verdict { color:#98a2b3; }
.is-choose .fanfare { animation:vd-pop .45s ease-out; max-height:none; }
.is-choose .hud-item.streak i { animation:none; }
.game-block     { background:#fff; border:1px solid #e4e7ec; border-radius:14px; padding:.8rem 1rem; margin-bottom:.7rem; text-align:left; }
.game-block h3  { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:#667085; margin:0 0 .5rem; }
.game-block .row-btns { display:flex; gap:.5rem; flex-wrap:wrap; }
.game-block .row-btns .btn { flex:1 1 auto; }
/* The learning ladder (2026-09-29) */
.ladder         { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:#667085; margin:-.25rem 0 .6rem; }
.rung-pips      { display:inline-flex; gap:3px; align-items:flex-end; vertical-align:middle; }
.rung-pips i    { display:block; width:8px; border-radius:2px; background:#e4e7ec; }
.rung-pips i:nth-child(1) { height:5px; }  .rung-pips i:nth-child(2) { height:7px; }  .rung-pips i:nth-child(3) { height:9px; }
.rung-pips i:nth-child(4) { height:11px; } .rung-pips i:nth-child(5) { height:13px; } .rung-pips i:nth-child(6) { height:15px; }
.rung-pips i.on { background:#2f6fd6; }
.rung-pips i.on.top { background:#f4b63f; }
.rung-chip      { float:right; font-size:.8rem; font-weight:700; border-radius:999px; padding:.15rem .55rem; margin-right:.35rem; background:#f2f4f7; color:#475467; }
.rung-chip.up   { background:#ecfdf3; color:#067647; }
.rung-chip.down { background:#fff4ed; color:#b93815; }
.result-card.compact .result-verdict .rung-chip { display:none; }
.flash-card     { border:2px dashed #c7d7f5; background:#f5f9ff; border-radius:16px; padding:1rem 1rem 1.1rem; text-align:center; margin:.2rem 0 .7rem; animation:vd-pop .3s ease-out; }
.flash-label    { font-size:.75rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#1c3f8a; }
.flash-target   { font-size:2.1rem; font-weight:800; line-height:1.2; margin:.35rem 0 .1rem; }
.flash-note     { font-size:.8rem; color:#667085; }
.flash-actions  { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:.8rem; }
.flash-card.is-down { display:none; }
.flash-card.is-peek .flash-actions { display:none; }
.flash-peek     { display:none; text-align:right; margin:-.3rem 0 .2rem; }
.flash-card.is-down + .flash-peek { display:block; }
.question-card.card-up #vd-hint-area, .question-card.card-up .answer-line, .question-card.card-up .accent-keys,
.question-card.card-up > .hint-bar, .question-card.card-up .flash-peek { display:none; }
.hint-row.is-given { background:#f5f9ff; border-color:#d6e4ff; }
.hint-row.is-given .hint-tag { color:#1c3f8a; background:#d6e4ff; }
.game-block.is-main { border-color:#2f6fd6; box-shadow:0 0 0 4px rgba(47,111,214,.08); }
.word-chip .wc-rung { font-size:.75rem; color:#067647; background:#ecfdf3; border-radius:999px; padding:.05rem .4rem; }
body.is-typing .ladder { display:none; }
.question-card.is-busy .choice-btn, .question-card.is-busy .answer-btn { pointer-events:none; opacity:.75; }
.ladder-know    { margin-left:auto; border:0; background:none; color:#2f6fd6; font-size:.8rem; font-weight:600; padding:.1rem .35rem; border-radius:6px; white-space:nowrap; }
.ladder-know:hover { background:#eef4ff; }
.ladder-know i  { font-size:.7rem; }
.question-card.card-up .ladder-know { display:none; }
.has-image .ladder { max-width:calc(100% - 150px); }
.reset-box      { margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid #e4e7ec; text-align:center; font-size:.9rem; color:#667085; }
.reset-box .btn { margin-top:.4rem; }
@media (max-width: 576px) { .flash-target { font-size:1.7rem; } .flash-card { padding:.8rem .7rem .9rem; } }
/* Summary page (2026-09-29) */
.summary-wrap   { max-width:640px; margin:0 auto; }
.summary-head   { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.stat-row       { display:grid; grid-template-columns:repeat(6, 1fr); gap:.5rem; margin-bottom:.6rem; }
.stat-tile      { background:#fff; border:1px solid #e4e7ec; border-radius:12px; padding:.6rem .4rem; text-align:center; }
.stat-num       { font-size:1.35rem; font-weight:700; color:#1c3f8a; line-height:1.2; }
.stat-num.small { font-size:.95rem; }
.stat-lbl       { font-size:.72rem; color:#667085; text-transform:uppercase; letter-spacing:.03em; }
.stat-row .stat-tile { padding:.5rem .3rem; }
.stat-row .stat-num { font-size:1.15rem; }
.goal-line      { display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.goal-line .goal-bar { flex:0 0 160px; }
.list-card.featured { border-color:#2f6fd6; box-shadow:0 0 0 4px rgba(47,111,214,.08); }
.list-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-bottom:.5rem; }
.list-card-btns { display:flex; gap:.4rem; }
.list-stats     { display:flex; gap:1rem; flex-wrap:wrap; font-size:.9rem; color:#475467; }
.lists-today td { vertical-align:middle; }
.word-chips     { display:flex; flex-wrap:wrap; gap:.4rem; }
.word-chip      { display:inline-flex; align-items:center; gap:.35rem; border:1px solid #e4e7ec; background:#fff; border-radius:999px; padding:.3rem .75rem; text-decoration:none; color:#1f2937; font-size:.92rem; }
.word-chip:hover { border-color:#2f6fd6; color:#1c3f8a; }
.word-chip i    { color:#98a2b3; font-size:.75rem; }
.word-chip .wc-src { color:#475467; }
.word-chip .wc-n { font-size:.75rem; color:#b42318; background:#fef3f2; border-radius:999px; padding:.05rem .4rem; }
.word-chip.is-new { border-color:#bbf7d0; background:#f0fdf4; }
.word-chip.is-trouble { border-color:#fecaca; }
.word-rank tr.is-trouble td:first-child { border-left:3px solid #ef4444; }
.word-rank tr.is-new td:first-child { border-left:3px solid #2e9e5b; }
@media (max-width: 576px) { .stat-row { grid-template-columns:repeat(3, 1fr); } .goal-line .goal-bar { flex-basis:100px; } }