/* Logare / înregistrare: câmp de parolă cu ochi, indicator de parolă, ecran „verifică emailul”, animații */
.onl-pw { position: relative; margin-bottom: 8px; }
.onl-pw .onl-in { margin-bottom: 0; padding-right: 46px; }
.onl-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--g-dim, #a7a49d); cursor: pointer; transition: color .15s, background .15s, transform .15s; }
.onl-eye:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.onl-eye:active { transform: translateY(-50%) scale(.9); }
.onl-eye svg { width: 20px; height: 20px; }
.onl-eye .slash { transition: stroke-dashoffset .25s ease; stroke-dasharray: 26; stroke-dashoffset: 26; }
.onl-eye.on .slash { stroke-dashoffset: 0; }

.onl-str { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 2px 0 10px; }
.onl-str i { height: 4px; border-radius: 0; background: rgba(255, 255, 255, .12); transition: background .25s, transform .25s; }
.onl-str[data-l="1"] i:nth-child(-n+1) { background: #ff6b7a; }
.onl-str[data-l="2"] i:nth-child(-n+2) { background: #ffb24d; }
.onl-str[data-l="3"] i:nth-child(-n+3) { background: #d9e05b; }
.onl-str[data-l="4"] i:nth-child(-n+4) { background: #5fe39a; }
.onl-str-t { font-size: 12px; color: var(--g-dim, #a7a49d); margin: -4px 0 8px; min-height: 16px; }

/* animații de intrare / eroare */
@keyframes onl-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes onl-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
@keyframes onl-pop { 0% { transform: scale(.9); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: none; } }
.onl-card.fx-in > * { animation: onl-in .42s cubic-bezier(.2, .8, .2, 1) both; }
.onl-card.fx-in .onl-verify > .onl-env { animation: onl-float 3.2s ease-in-out infinite; }
.onl-card.fx-in > *:nth-child(2) { animation-delay: .04s; } .onl-card.fx-in > *:nth-child(3) { animation-delay: .08s; } .onl-card.fx-in > *:nth-child(4) { animation-delay: .12s; }
.onl-card.fx-in > *:nth-child(5) { animation-delay: .16s; } .onl-card.fx-in > *:nth-child(n+6) { animation-delay: .2s; }
.onl-card.fx-shake { animation: onl-shake .5s both; }
.onl-ok.fx-pop { animation: onl-pop .4s both; }
.onl-in:focus { box-shadow: 0 0 0 3px rgba(249, 5, 108, .22); }

/* buton ocupat */
.onl-btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.onl-btn.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: onl-spin .7s linear infinite; }
@keyframes onl-spin { to { transform: rotate(360deg); } }

/* ecran „verifică emailul”: aceeași limbă ca meniul jocului (mono cu spațiere mare, bară roz, albina) */
.onl-verify .onl-head { align-items: flex-start; margin-bottom: 18px; }
.onl-kick { font: 500 11px var(--g-mono, monospace); letter-spacing: .3em; text-transform: uppercase; color: var(--g-pink-hi, #ff3d8f); margin-bottom: 6px; }
.onl-verify h2 { font-size: clamp(26px, 5vw, 34px); line-height: 1; }
.onl-verify .onl-btn.wide { width: 100%; }
.onl-send { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--g-line); border-bottom: 1px solid var(--g-line); }
.onl-bee { flex: none; width: 66px; height: 54px; animation: onl-bhover 1.1s ease-in-out infinite alternate; }
.onl-bee svg, .w-bee svg { width: 100%; height: 100%; overflow: visible; }
.onl-bee .wing, .w-bee .wing { transform-box: fill-box; transform-origin: 50% 100%; animation: onl-bflap .09s ease-in-out infinite alternate; }
.onl-bee .wing.b, .w-bee .wing.b { animation-delay: -.045s; }
@keyframes onl-bhover { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-7px) rotate(3deg); } }
@keyframes onl-bflap { from { transform: rotate(-24deg) scaleY(1); } to { transform: rotate(10deg) scaleY(.7); } }
.onl-to { min-width: 0; display: grid; gap: 3px; }
.onl-to span { font: 500 11px var(--g-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--g-dim, #a7a49d); }
.onl-to b { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; color: var(--g-ink, #f4f1ec); }
/* pașii: ca meniul principal, număr mono + bară roz care se aprinde pe rând */
.onl-steps { list-style: none; counter-reset: s; margin: 6px 0 0; padding: 0; }
.onl-steps li { counter-increment: s; position: relative; display: grid; grid-template-columns: 38px 1fr; align-items: baseline; padding: 12px 0 12px 18px; border-bottom: 1px solid var(--g-line); font-size: 15px; line-height: 1.3; }
.onl-steps li::before { content: '0' counter(s); font: 500 12px var(--g-mono, monospace); letter-spacing: .1em; color: var(--g-dim, #a7a49d); grid-row: 1 / 3; transition: color .3s; }
.onl-steps li::after { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: #f9056c; transform: scaleY(0); animation: onl-bar 6s cubic-bezier(.2, .7, .1, 1) infinite; }
.onl-steps li:nth-child(2)::after { animation-delay: 2s; } .onl-steps li:nth-child(3)::after { animation-delay: 4s; }
@keyframes onl-bar { 0%, 33%, 100% { transform: scaleY(0); } 5%, 28% { transform: scaleY(1); } }
.onl-steps b { font-weight: 700; color: var(--g-ink, #f4f1ec); }
.onl-steps small { grid-column: 2; color: var(--g-dim, #a7a49d); font-size: 12.5px; line-height: 1.45; margin-top: 3px; }
.onl-wait { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; font: 500 11px var(--g-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--g-dim, #a7a49d); }
.onl-wait::before { content: ''; width: 8px; height: 8px; background: #ffc933; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); animation: onl-hexp 1.2s ease-in-out infinite; }
@keyframes onl-hexp { 50% { transform: scale(.5); opacity: .4; } }
.onl-links { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 12px; }
.onl-lnk { background: none; border: 0; padding: 4px 0; color: var(--g-ink, #f4f1ec); font: 500 11px var(--g-mono, monospace); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-bottom: 1px solid rgba(244, 241, 236, .3); }
.onl-lnk:hover:not(:disabled) { color: var(--g-pink-hi, #ff3d8f); border-color: var(--g-pink-hi, #ff3d8f); }
.onl-lnk:disabled { color: var(--g-dim, #a7a49d); border-color: transparent; cursor: default; }

/* după conectare: titlu mare, bară roz, albina trece prin ecran, confetti în formă de fagure */
.onl-welcome { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; pointer-events: none; background: rgba(9, 9, 11, .88); animation: onl-wfade 2.7s both; overflow: hidden; }
@keyframes onl-wfade { 0% { opacity: 0; } 10%, 82% { opacity: 1; } 100% { opacity: 0; } }
.onl-welcome .w-box { text-align: left; }
.onl-welcome .w-k { font: 500 11.5px var(--g-mono, monospace); letter-spacing: .3em; text-transform: uppercase; color: var(--g-pink-hi, #ff3d8f); animation: onl-up .5s .05s both; }
.onl-welcome .w-t { font: 800 clamp(44px, 9vw, 104px)/.95 var(--g-display, system-ui); letter-spacing: -.04em; text-transform: uppercase; color: #f4f1ec; margin-top: 10px; animation: onl-up .6s .12s cubic-bezier(.2, .7, .1, 1) both; }
.onl-welcome .w-bar { height: 8px; margin-top: 16px; border-radius: 99px; background: linear-gradient(90deg, #f9056c, #ff4d94 60%, #ffc933); transform-origin: 0 50%; animation: onl-grow .7s .3s cubic-bezier(.2, .7, .1, 1) both; }
.onl-welcome .w-s { margin-top: 14px; font: 500 12px var(--g-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 234, .75); animation: onl-up .5s .5s both; }
@keyframes onl-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes onl-grow { from { transform: scaleX(0); } to { transform: none; } }
.onl-welcome .w-bee { position: absolute; left: 0; top: 30%; width: 84px; height: 70px; animation: onl-fly 2.2s .25s cubic-bezier(.45, .05, .4, 1) both; }
@keyframes onl-fly { from { transform: translate(-120px, 40px) rotate(8deg); } 50% { transform: translate(50vw, -30px) rotate(-6deg); } to { transform: translate(calc(100vw + 120px), 20px) rotate(4deg); } }
.onl-hex { position: absolute; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); opacity: 0; animation: onl-hexf 1.9s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes onl-hexf { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .onl-bee, .onl-bee .wing, .onl-steps li::after, .onl-wait::before, .onl-welcome *, .onl-hex { animation: none !important; } .onl-steps li::after { transform: none; opacity: 0; } .onl-card.fx-in > * { animation: none; } }
.onl-forgot { text-align: right; margin: -2px 0 6px; }
.onl-forgot .onl-lnk { font-size: 10.5px; }
.onl-card > .onl-links { margin-top: 14px; }