/* Component design coordinates: desktop 1280px, mobile 375px.
   Integer local dimensions are scaled together, including strokes and spacing.
   Zoom reserves the scaled layout box and does not compete with GSAP transforms. */
:root { --desktop-scale:calc(100vw / 1280px); --mobile-scale:calc(100vw / 375px); }
/* Fixed event artwork coordinates: scale the complete track, never stretch the frame. */
html[data-locale] body .event-track { zoom:var(--desktop-scale);display:flex;gap:77px; }
html[data-locale] body .event-card { flex:0 0 870px;width:870px;height:314px;min-height:0;padding:0 47px; }
html[data-locale] body .event-text { width:432px;height:246px;max-height:none;justify-content:center; }
html[data-locale] body .event-text-inner { width:432px;flex-shrink:0;gap:7px;transform:scale(var(--event-copy-scale,1));transform-origin:center left; }
html[data-locale] body .event-title { width:100%;font-size:22px;line-height:1.2;white-space:normal; }
html[data-locale] body .event-card:last-child .event-title { font-size:20px; }
html[data-locale] body .event-desc { font-size:13px;line-height:18px; }
html[data-locale] body .event-bullets { width:412px;font-size:11px;line-height:15px;padding-left:18px;letter-spacing:0; }
html[data-locale] body .event-bullets li { line-height:15px; }
html[data-locale] body .event-img-wrap { left:482px;top:23px;width:361px;height:271px;transform:none; }
html[data-locale] body .event-img-border { left:10px;top:4px;width:353px;height:265px;border-width:2px;border-radius:19px; }
html[data-locale] body .event-img-border .event-placeholder { border-radius:19px; }
html[data-locale] body :is(.btn-join-nav,.btn-join-hero,.btn-gold,.btn-dark) { zoom:var(--desktop-scale); }
html[data-locale] body :is(.m-btn-join-nav,.m-btn-join-hero,.m-btn-gold,.m-btn-dark,.m-events-learn-more) { zoom:var(--mobile-scale); }
html[data-locale] body .btn-join-nav { width:103px;height:29px; }
html[data-locale] body .btn-join-hero { width:202px;height:56px; }
html[data-locale] body #m-nav .m-btn-join-nav { width:86px;height:24px; }
html[data-locale] body .m-btn-join-hero { width:198px;height:55px; }
html[data-locale] body [data-join-frame] { width:auto; }
html[data-locale] body .btn-join-nav[data-join-frame] { height:29px;--cta-font:17px; }
html:lang(ja) body .btn-join-nav[data-join-frame] { --cta-font:14px; }
html:lang(zh-TW) body .btn-join-nav[data-join-frame] { --cta-font:12px; }
html[data-locale] body .btn-join-hero[data-join-frame] { height:56px;--cta-font:24px; }
html[data-locale] body #m-nav .m-btn-join-nav[data-join-frame] { width:auto;height:32px;--cta-font:14px; }
html[data-locale] body .m-btn-join-hero[data-join-frame] { height:55px;--cta-font:19px; }
html:lang(vi) body .btn-join-nav[data-join-frame] { height:38px;--cta-font:11px; }
html:lang(vi) body .btn-join-hero[data-join-frame] { --cta-font:17px; }
html:lang(vi) body #m-nav .m-btn-join-nav[data-join-frame] { --cta-font:10px; }
html:lang(vi) body .m-btn-join-hero[data-join-frame] { --cta-font:17px; }
/* Japanese / Korean share the PC frame/text proportions; only the whole component scales. */
html:is(:lang(ja),:lang(ko)) body :is(.btn-join-hero,.m-btn-join-hero)[data-join-frame] { height:56px;--cta-font:27px; }
html[data-locale] body [data-join-frame] .localized-cta-text { font-size:var(--cta-font); }
/* Native vector outlines use rounded joins instead of offset shadow copies. */
html[data-locale] body [data-join-frame] .localized-cta-text { text-shadow:none; }
.localized-cta-vector { display:block;width:100%;height:100%;overflow:visible; }
.localized-cta-vector text { font:inherit;fill:#fff;stroke:#805014;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke fill;-webkit-text-stroke:0; }
.gallery-month-vector { display:block;flex-shrink:0;overflow:visible; }
.gallery-month-vector text { font:inherit;fill:#fff;stroke:#cf7419;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke fill;-webkit-text-stroke:0; }
html[data-locale] body :is(.btn-gold,.btn-dark,.m-btn-gold,.m-btn-dark) {
  height:39px;padding:0 33px;border-width:3px;border-radius:29px;gap:13px;
}
html[data-locale] body :is(.btn-gold,.btn-dark,.m-btn-gold,.m-btn-dark) span {
  font-size:16px;letter-spacing:0;line-height:1;
}
html[data-locale] body :is(.btn-gold,.m-btn-gold) span { -webkit-text-stroke:3px #cf7419; }
html[data-locale] body :is(.btn-dl-icon,.m-btn-kit-icon) { width:17px;height:18px; }
html[data-locale] body .btn-texture { bottom:-32px;left:-183px;width:635px;height:178px; }
html[data-locale] body .m-events-learn-more { width:100px;height:29px; }
html:lang(vi) body .m-events-learn-more { width:120px; }
html[data-locale] body .m-events-learn-more .localized-cta-text { font-size:11px; }
/* Localized Learn More uses a complete blank pill, never a patch over raster text. */
html:not(:lang(en)) body .m-events-learn-more {
  position:relative;box-sizing:border-box;border:2px solid #df910b;border-radius:29px;
  background:url('../img/event-texture.webp') center/cover,linear-gradient(#ffc83b,#ffba00);
  background-blend-mode:soft-light;
}
html:not(:lang(en)) body .m-events-learn-more > img { display:none; }
html:not(:lang(en)) body .m-events-learn-more .localized-cta-text {
  inset:0;width:100%;height:100%;background:none;-webkit-text-stroke:0;text-shadow:none;
}
html:not(:lang(en)) body .m-events-learn-more .localized-cta-vector text { stroke:#cf7419; }

/* Navigation is one component: arrow, dot, selected star and gaps share a zoom. */
:is(.gallery-dot,.gallery-arrow,.m-dot,.m-events-nav-btn,.event-nav-btn) { touch-action:manipulation; }
html[data-locale] body .community-gallery[data-layout='desktop'] .gallery-controls { zoom:var(--desktop-scale);gap:24px;margin-top:20px; }
html[data-locale] body .community-gallery[data-layout='mobile'] .gallery-controls { zoom:var(--mobile-scale);gap:16px;margin-top:15px; }
html[data-locale] body .community-gallery .gallery-arrow { width:44px;height:44px; }
html[data-locale] body .community-gallery .gallery-dot { width:32px;height:40px; }
html[data-locale] body .community-gallery .gallery-dot::after { width:13px;height:13px;background-image:url('../img/gallery-dot.svg?v=20260911-24'); }
html[data-locale] body .community-gallery .gallery-dot[aria-current='true']::after { width:28px;height:28px;transform:none;background-image:url('../img/gallery-star.svg'); }
html[data-locale] body .community-gallery .gallery-dots { gap:0; }
html body .m-events-nav { zoom:var(--mobile-scale);gap:45px; }
html body .m-events-nav-btn { width:44px;height:44px; }
html body #m-dots { gap:15px; }
html body .m-dot { width:20px;height:20px; }
html body .m-dot-active { width:29px;height:29px;transform:none; }
html body button.m-dot { border:0;padding:0;background-color:transparent;background-size:contain;background-position:center;background-repeat:no-repeat; }
html body button.m-dot:focus-visible { outline:2px solid #915000;outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto!important; }
  *, *::before, *::after { animation:none!important;transition:none!important; }
  .m-fade-up { opacity:1;transform:none; }
}
html body .event-nav-btn { zoom:var(--desktop-scale);width:44px;height:44px; }
html body .event-nav-prev { left:10px; }
html body .event-nav-next { right:10px; }

/* Month picker includes its menu in the same scale; text outline is 4px. */
html[data-locale] body .community-gallery[data-layout='desktop'] .gallery-month-picker { zoom:calc(var(--desktop-scale) * .8); }
html[data-locale] body .community-gallery[data-layout='mobile'] .gallery-month-picker { zoom:calc(var(--mobile-scale) * .8); }
/* Locale glyph metrics may change width, but never the button's outer height. */
html[data-locale] body .community-gallery .gallery-month-control { --month-stroke:4px;box-sizing:border-box;height:48.6px;border-width:2px;border-radius:30px;padding-left:12px; }
html[data-locale] body .community-gallery .gallery-month { font-size:21px;height:100%;min-height:0;box-sizing:border-box;padding:5px 12px 5px 8px;letter-spacing:0; }
html[data-locale] body .community-gallery .gallery-month-icon { width:28px;height:28px; }
html[data-locale] body .community-gallery .gallery-month-control > .gallery-icon { width:21px;height:21px; }
html[data-locale] body .community-gallery .gallery-month-chevron { width:18px;height:18px;margin-right:12px; }
html[data-locale] body .community-gallery .gallery-month-option { font-size:18px;padding:12px 8px; }
html[data-locale] body .community-gallery[data-layout='mobile'] .gallery-month-control { height:34.2px; }
html[data-locale] body .community-gallery[data-layout='mobile'] .gallery-month { font-size:14px;min-height:0; }
html[data-locale] body .community-gallery[data-layout='mobile'] .gallery-month-icon { width:22px;height:22px; }
html[data-locale] body .community-gallery[data-layout='mobile'] .gallery-month-option { font-size:14px; }

/* Card components retain the responsive 4.5-column / 2-column track. */
.community-gallery { --card-unit:calc(100vw / 1280);--gallery-gap:calc(16 * var(--card-unit)); }
.community-gallery[data-layout='mobile'] { --card-unit:calc(100vw / 375);--gallery-gap:calc(10 * var(--card-unit)); }
html[data-locale] body .community-gallery .gallery-card { display:flex;flex-direction:column;--card-radius:calc(19 * var(--card-unit));border-width:calc(3 * var(--card-unit));box-shadow:0 calc(4 * var(--card-unit)) 0 #627b0d; }
html[data-locale] body .community-gallery .gallery-cover { flex-shrink:0;border-width:calc(8 * var(--card-unit));border-bottom:0; }
/* Fill the equal-height grid cards so short and wrapped IDs share a white footer. */
html[data-locale] body .community-gallery .gallery-author { flex:1;gap:calc(8 * var(--card-unit));padding:calc(8 * var(--card-unit));margin:0 calc(8 * var(--card-unit)) calc(8 * var(--card-unit));min-height:calc(49 * var(--card-unit));border-width:var(--card-unit); }
html[data-locale] body .community-gallery .gallery-handle { font-size:calc(11 * var(--card-unit)); }
html[data-locale] body .community-gallery .gallery-avatar { width:calc(28 * var(--card-unit));border-width:var(--card-unit); }
html[data-locale] body .community-gallery .gallery-platform { font-size:calc(11 * var(--card-unit));padding:calc(4 * var(--card-unit)) calc(6 * var(--card-unit));border-radius:calc(5 * var(--card-unit));gap:calc(4 * var(--card-unit));top:calc(7 * var(--card-unit));left:calc(7 * var(--card-unit)); }
html[data-locale] body .community-gallery .gallery-cover { border-radius:calc(16 * var(--card-unit)) calc(16 * var(--card-unit)) 0 0; }
html[data-locale] body .community-gallery .gallery-author { border-radius:0 0 calc(8 * var(--card-unit)) calc(8 * var(--card-unit)); }