.top .nav{position:relative}

/* Remove all accidental raw URL/link text while keeping the social icons visible. */
.social-links{font-size:0!important;line-height:0!important;height:30px!important;min-height:30px!important;overflow:hidden!important;white-space:nowrap!important;}
.social-links a{font-size:0!important;line-height:0!important;text-decoration:none!important;color:transparent!important;overflow:hidden!important;}
.social-links a::before,.social-links a::after{display:none!important;content:none!important;}
.social-links img{display:block!important;width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important;}
.left .profile{font-size:0!important;}
.left .profile h3{font-size:21px!important;line-height:1.1!important;}
.left .profile p{font-size:13px!important;line-height:1.5!important;}
.left .profile .social-links{font-size:0!important;line-height:0!important;}
.top .navlinks{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:24px!important;white-space:nowrap!important;}
.top .navlinks a{display:block!important;white-space:nowrap!important;}
@media(max-width:850px){
.left .social-links{height:30px!important;min-height:30px!important;overflow:hidden!important;margin:8px auto 0!important}.left .social-links a{font-size:0!important;color:transparent!important}.left .profile{font-size:0!important}.left .profile h3{font-size:17px!important;line-height:1.1!important;margin:4px 0!important}.left .profile p{font-size:10px!important;line-height:1.25!important;margin:0 auto!important}.top .navlinks{display:none!important;}
}
.community-tab.whatsapp strong + .community-label,.community-tab.partnership strong + .community-label{display:none!important;}
.community-tab.whatsapp .community-label,.community-tab.partnership .community-label{font-weight:900!important;}
html[lang="en"] .logo small{font-size:0!important}
html[lang="en"] .logo small::after{content:'SUMMONERS WAR';font-size:9px!important}
html[lang="en"] .navlinks a{font-size:0!important}
html[lang="en"] .navlinks a:nth-child(1)::after{content:'⌂ HOME';font-size:13px!important}
html[lang="en"] .navlinks a:nth-child(2)::after{content:'⚔ SUMMONERS WAR';font-size:13px!important}
html[lang="en"] .navlinks a:nth-child(3)::after{content:'❔ HOW TO USE';font-size:13px!important}
html[lang="en"] .community-tab.whatsapp strong{font-size:0!important}
html[lang="en"] .community-tab.whatsapp strong::after{content:'WHATSAPP';font-size:inherit}
html[lang="en"] .community-tab.partnership strong{font-size:0!important}
html[lang="en"] .community-tab.partnership strong::after{content:'🤝 PARTNERSHIP';font-size:inherit}
html[lang="en"] .section-head{font-size:0!important}
html[lang="en"] .section-head::before{content:'⚔ SUMMONERS WAR';font-size:22px!important}
html[lang="en"] .section-head span{font-size:0!important}
html[lang="en"] .section-head span::after{content:'⟳ Always updated!';font-size:12px!important}
html[lang="en"] .profile h3{font-size:0!important}
html[lang="en"] .profile h3::after{content:'♛ YUNAMYST ♛';font-size:21px!important}
html[lang="en"] .profile p{font-size:0!important}
html[lang="en"] .profile p::after{content:'Daily Summoners War content!';font-size:13px!important;line-height:1.5!important}
html[lang="en"] .about{font-size:0!important}
html[lang="en"] .about::after{content:'✦ ABOUT THE SITE\A\AHere you can find the active Summoners War: Sky Arena codes.\A\A💜 Save the site and come back often!';white-space:pre-line;font-size:13px!important;line-height:1.55!important;color:#c6bdcf!important}
html[lang="en"] .tabs .tab{font-size:0!important}
html[lang="en"] .tabs .tab::after{content:'🟢 ACTIVE CODES';font-size:13px!important}
html[lang="en"] .right h2{font-size:0!important}
html[lang="en"] .right .panel:first-child h2::after{content:'❓ HOW TO USE';font-size:18px!important}
html[lang="en"] .right .faq h2::after{content:'❔ FAQ';font-size:18px!important}
html[lang="en"] .ym-feedback h2{font-size:0!important}
html[lang="en"] .ym-feedback h2::after{content:'💜 FEEDBACK';font-size:17px!important}
html[lang="en"] .ym-feedback-label{font-size:0!important}
html[lang="en"] .ym-feedback-label:first-of-type::after{content:'Player name (optional)';font-size:10px!important}
html[lang="en"] .ym-feedback-label:nth-of-type(2)::after{content:'Your rating';font-size:10px!important}
html[lang="en"] .ym-feedback-label:nth-of-type(3)::after{content:'Message';font-size:10px!important}
html[lang="en"] .ym-feedback-submit{font-size:0!important}
html[lang="en"] .ym-feedback-submit::after{content:'SEND FEEDBACK';font-size:10px!important}
html[lang="en"] .ym-feedback-all{font-size:0!important}
html[lang="en"] .ym-feedback-all::after{content:'VIEW ALL FEEDBACK';font-size:10px!important}

/* HOW TO USE: use the real text nodes translated by language-fix.js. */
html[lang="en"] .step{font-size:13px!important;display:flex!important;align-items:flex-start!important;}
html[lang="en"] .step > div:last-child{display:block!important;flex:1!important;min-width:0!important;font-size:13px!important;line-height:1.35!important;}
html[lang="en"] .step > div:last-child b{display:block!important;font-size:13px!important;line-height:1.25!important;margin:0 0 2px!important;color:#dda1ff!important;}
html[lang="en"] .step > div:last-child b::after{content:none!important;display:none!important;}
html[lang="en"] .step > div:last-child::after{content:none!important;display:none!important;}
html[lang="en"] .step::after{content:none!important;display:none!important;}

/* FAQ: exactly 3 questions. h2 is a child before the three .faq-item elements, so use nth-of-type. */
html[lang="en"] .faq-q{font-size:0!important}
html[lang="en"] .faq-q span{font-size:13px!important}
html[lang="en"] .faq-item:nth-of-type(1) .faq-q::before{content:'Where do I enter the codes?';font-size:13px!important}
html[lang="en"] .faq-item:nth-of-type(2) .faq-q::before{content:'Do the codes expire?';font-size:13px!important}
html[lang="en"] .faq-item:nth-of-type(3) .faq-q::before{content:'Can I use it on iPhone?';font-size:13px!important}
html[lang="en"] .faq-a{font-size:0!important}
html[lang="en"] .faq-item:nth-of-type(1) .faq-a::after{content:'Copy the code and use the redemption link.';font-size:12px!important}
html[lang="en"] .faq-item:nth-of-type(2) .faq-a::after{content:'Yes. When they expire, they are moved to the expired codes section.';font-size:12px!important}
html[lang="en"] .faq-item:nth-of-type(3) .faq-a::after{content:'Yes. The site works normally on mobile.';font-size:12px!important}
html[lang="en"] .footer{font-size:0!important}
html[lang="en"] .footer::after{content:'YunaMyst • Summoners War: Sky Arena • Community website';font-size:10px!important}
html[lang="en"] .partnership-card h3{font-size:0!important}
html[lang="en"] .partnership-card h3::after{content:'🤝 YUNAMYST PARTNERSHIP';font-size:17px!important}
html[lang="en"] .partnership-card p{font-size:0!important}
html[lang="en"] .partnership-card p::after{content:'Want to partner with YunaMyst Codes? This space is for creators, brands and projects related to Summoners War.';font-size:13px!important}
html[lang="en"] .contact-link strong{font-size:0!important}
html[lang="en"] .contact-link strong::after{content:'CONTACT US';font-size:12px!important}
html[lang="en"] .contact-link small{font-size:0!important}
html[lang="en"] .contact-link small::after{font-size:10px!important}
html[lang="en"] .contact-link:first-child small::after{content:'Email'}
html[lang="en"] .contact-link:last-child small::after{content:'WhatsApp'}
html[lang="en"] .ym-feedback-modal h3{font-size:0!important}
html[lang="en"] .ym-feedback-modal h3::after{content:'💜 ALL FEEDBACK';font-size:17px!important}
html[lang="en"] .code .cinfo small{font-size:0!important}
html[lang="en"] .code .cinfo small::after{content:'🔄 Active code';font-size:11px!important}
html[lang="en"] .code .copy{font-size:0!important}
html[lang="en"] .code .copy::after{content:'▣ COPY';font-size:11px!important}
html[lang="en"] .code .link{font-size:0!important}
html[lang="en"] .code .link::after{content:'🔗 iOS LINK';font-size:11px!important}
.lang-switch{position:relative!important;z-index:10050!important}
.lang-switch .lang-menu{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;z-index:10060!important}
.lang-switch.open .lang-menu,.lang-switch:focus-within .lang-menu{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;z-index:10060!important}
.lang-switch .lang-option{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;min-height:36px!important}
@media(max-width:850px){.lang-switch .lang-menu{right:0!important;min-width:120px!important;position:absolute!important}.lang-switch.open .lang-menu,.lang-switch:focus-within .lang-menu{display:block!important}}
@media(max-width:850px){html[lang="en"] .section-head::before{font-size:19px!important}html[lang="en"] .profile h3::after{font-size:17px!important}html[lang="en"] .profile p::after{font-size:10px!important}html[lang="en"] .right h2::after{font-size:18px!important}html[lang="en"] .ym-feedback h2::after{font-size:17px!important}html[lang="en"] .code .cinfo small::after{font-size:9px!important}}

/* PC ONLY: Copy and iOS Link stay side-by-side without changing mobile. */
@media(min-width:1051px){
  .code{display:grid!important;grid-template-columns:52px minmax(150px,1fr) 46px 46px 46px 112px 112px!important;column-gap:8px!important;}
  .code>.copy{grid-column:6!important;width:112px!important;min-width:112px!important;max-width:112px!important;height:46px!important;justify-self:stretch!important;}
  .code>.link{grid-column:7!important;width:112px!important;min-width:112px!important;max-width:112px!important;height:46px!important;justify-self:stretch!important;}
}

/* Smaller PC/tablet widths: keep the action buttons usable and inside the code card. */
@media(min-width:851px) and (max-width:1050px){
  .layout{grid-template-columns:180px minmax(0,1fr) 180px!important;gap:14px!important;}
  .code{display:grid!important;grid-template-columns:42px minmax(80px,1fr) 36px 36px 36px 86px 86px!important;column-gap:6px!important;padding:12px 10px!important;}
  .code>.copy,.code>.link{width:86px!important;min-width:86px!important;max-width:86px!important;height:44px!important;}
}

/* Keep the existing mobile layout completely unchanged. */
@media(max-width:850px){
  .code>.copy,.code>.link{width:100%!important;min-width:0!important;max-width:none!important;height:44px!important;}
}

/* Center the Summoners War section title while keeping the update status on the right. */
.section-head{position:relative!important;text-align:center!important;}
.section-head span{float:none!important;position:absolute!important;right:18px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;}
@media(max-width:850px){.section-head span{right:14px!important;font-size:9px!important;}}

/* Restore visible step numbers. The English translation hides the original text, so the number must stay explicit. */
.num{font-size:13px!important;color:#fff!important;line-height:1!important;}
html[lang="en"] .num{font-size:13px!important;color:#fff!important;line-height:1!important;}

/* FINAL: the logo contains the real subtitle text; never generate another one. */
html .logo small::before,html .logo small::after{content:none!important;display:none!important;}
html[lang="en"] .logo small{font-size:8px!important;letter-spacing:3px!important;line-height:1!important;margin-top:5px!important;display:block!important;text-align:center!important;white-space:nowrap!important;}
.logo small{display:block!important;font-size:8px!important;line-height:1!important;letter-spacing:3px!important;margin-top:5px!important;text-align:center!important;white-space:nowrap!important;}
@media(max-width:850px){.logo small{font-size:8px!important;letter-spacing:3px!important;margin-top:5px!important}}

/* FINAL FAQ VISIBILITY FIX: h2 is child #1; the 3 FAQ items are div types #1-#3. */
.faq .faq-item:nth-of-type(n+4){display:none!important;}
.faq .faq-item:nth-of-type(-n+3){display:block!important;width:100%!important;float:none!important;margin:0!important;}
.faq .faq-q{display:flex!important;width:100%!important;align-items:center!important;justify-content:space-between!important;box-sizing:border-box!important;}
@media(max-width:850px){.faq .faq-item:nth-of-type(n+4){display:none!important}.faq .faq-item:nth-of-type(-n+3){display:block!important;width:100%!important}.faq .faq-q{width:100%!important;}}