/* Header right-side options: ?hdr=1..5 (desktop) */
@media (min-width: 961px) {
/* shared: everything on the right the same height, aligned */
.hdr-v .bar-in { gap: 28px; }
.hdr-v .bar .btn-sm, .hdr-v .bar-login { height: 42px; min-height: 42px; display: inline-flex; align-items: center; }
/* a plain-text language switch */
.hdr-v .lang-cur svg, .hdr-v .lang-opt svg { display: none; }
.hdr-v .lang-cur, .hdr-v .lang-opt { width: auto; height: 42px; padding: 0 2px; }
.hdr-v .lang-cur span, .hdr-v .lang-opt span { top: 0; left: 0; color: var(--teal) !important; font: 600 13px/1 "Outfit", sans-serif; letter-spacing: .12em; }

/* 1: language as small text, a thin divider, then Log in (outline) + Start playing */
.hv-1 .lang-menu { order: 3; margin-left: 0; }
.hv-1 .bar-login { order: 4; margin-left: 0; border: 1px solid rgba(31,42,43,.2); border-radius: 10px; padding: 0 18px; font-size: 15px; }
.hv-1 .bar .btn-sm { order: 5; }
.hv-1 .lang-menu::after { content: ""; position: absolute; right: -15px; top: 11px; height: 20px; width: 1px; background: rgba(31,42,43,.18); }

/* 2: language moves next to the logo; right: Log in text + Start playing */
.hv-2 .logo { order: 0; } .hv-2 .lang-menu { order: 1; margin-left: -14px; }
.hv-2 .lang-cur span { color: #8A9494 !important; }
.hv-2 .nav { order: 2; } .hv-2 .bar-login { order: 3; margin-left: auto; } .hv-2 .bar .btn-sm { order: 4; }

/* 3: Log in and Start playing joined as one pill */
.hv-3 .lang-menu { order: 3; margin-left: 0; } .hv-3 .bar-login { order: 4; margin-left: 0; }
.hv-3 .bar .btn-sm { order: 5; margin-left: -28px; border-radius: 0 10px 10px 0 !important; }
.hv-3 .bar-login { background: #F6F2EC; border-radius: 10px 0 0 10px; padding: 0 18px; font-size: 15px; }

/* 4: fewer links in the nav (no See it / FAQ), Log in outline, Start playing, language last */
.hv-4 .nav a[href="#action"], .hv-4 .nav a[href="#faq"] { display: none; }
.hv-4 .bar-login { border: 1px solid rgba(35,103,106,.35); border-radius: 10px; padding: 0 18px; font-size: 15px; }

/* 5: one quiet group: "EN · Log in" as text, then the button */
.hv-5 .lang-menu { order: 3; margin-left: auto; } .hv-5 .bar-login { order: 4; margin-left: 0; font-weight: 500; }
.hv-5 .bar .btn-sm { order: 5; }
.hv-5 .bar-login::before { content: "·"; color: #B8C0C0; margin-right: 22px; }
.hv-5 .nav { margin-right: 0; }
}
@media (min-width: 961px) {
.hv-5 .bar-login::before { content: ""; width: 1px; height: 18px; background: rgba(31,42,43,.2); margin-right: 22px; display: inline-block; }
.hv-5 .bar-in { gap: 22px; }
}
@media (min-width: 961px) {
.hv-4 .nav a[href="#faq"] { display: inline-flex !important; }
.hv-4 .bar-login + .btn-sm { margin-left: -18px; }
}
@media (min-width: 961px) {
.hv-4 .nav a[href="#action"] { display: inline-flex !important; }
.hv-4 .nav a:nth-child(2) { display: none !important; }
}

/* ---------- language switcher options: ?lang=0..4 ---------- */
@media (min-width: 961px) {
/* 0: the original speech bubble */
.lv-0 .lang-cur svg, .lv-0 .lang-opt svg { display: block !important; }
.lv-0 .lang-cur, .lv-0 .lang-opt { width: 38px !important; height: 33px !important; padding: 0 !important; }
.lv-0 .lang-cur span { top: -4px !important; left: 1px !important; color: #fff !important; font: 800 11px/1 "Outfit", sans-serif !important; letter-spacing: .5px !important; }
.lv-0 .lang-opt span { top: -4px !important; color: var(--teal) !important; font: 800 11px/1 "Outfit", sans-serif !important; }
/* 1: a globe and EN */
.lv-1 .lang-cur { padding-left: 24px !important; position: relative; }
.lv-1 .lang-cur::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background: var(--teal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* 2: both languages visible as a little toggle, EN | ES */
.lv-2 .lang-menu { display: inline-flex; align-items: center; background: #F6F2EC; border-radius: 99px; padding: 4px; gap: 2px; }
.lv-2 .lang-drop { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; padding: 0 !important; }
.lv-2 .lang-cur, .lv-2 .lang-opt { height: 32px !important; padding: 0 12px !important; border-radius: 99px; }
.lv-2 .lang-cur { background: var(--teal) !important; } .lv-2 .lang-cur span { color: #fff !important; }
.lv-2 .lang-opt span { color: #4A5656 !important; font: 600 13px/1 "Outfit", sans-serif; letter-spacing: .12em; }
/* 3: a small outlined pill with a little arrow */
.lv-3 .lang-cur { border: 1px solid rgba(31,42,43,.18) !important; border-radius: 99px !important; padding: 0 30px 0 14px !important; height: 38px !important; position: relative; }
.lv-3 .lang-cur::after { content: ""; position: absolute; right: 13px; top: 15px; width: 6px; height: 6px; border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal); transform: rotate(45deg); }
/* 4: the language written out, in serif: English */
.lv-4 .lang-cur span { font-size: 0 !important; }
.lv-4 .lang-cur span::after { content: "English"; font: 400 16px/1 p22-mackinac-pro, "Fraunces", Georgia, serif; letter-spacing: 0; color: var(--teal); }
.lv-4 .lang-cur { padding-right: 18px !important; position: relative; }
.lv-4 .lang-cur::after { content: ""; position: absolute; right: 2px; top: 17px; width: 5px; height: 5px; border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal); transform: rotate(45deg); }
.lv-4 .lang-opt span { font-size: 0 !important; } .lv-4 .lang-opt span::after { content: "Espa\00f1ol"; font: 400 16px/1 p22-mackinac-pro, "Fraunces", Georgia, serif; color: var(--teal); }
.lv-4 .lang-drop, .lv-1 .lang-drop, .lv-3 .lang-drop { background: #fff; border-radius: 12px; box-shadow: 0 12px 24px -12px rgba(0,0,0,.25); padding: 6px 10px !important; }
}