/* HOMEPAGE ONLY. Original images are displayed in full, with no crop, filter or repaint. */
.hdc-home { margin:0; background:#041325; color:#edf5ff; font-family:Arial,Helvetica,sans-serif; color-scheme:dark; }
.hdc-home * { box-sizing:border-box; }
.hdc-home a { color:inherit; text-decoration:none; }
.hdc-home a:focus-visible,.hdc-home button:focus-visible { outline:3px solid #fff; outline-offset:5px; box-shadow:0 0 0 7px #06223f; }
.hdc-home .home-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.hdc-home .home-skip { position:absolute; z-index:10; top:8px; left:16px; padding:12px 18px; background:#fff; color:#07182c; transform:translateY(-200%); }
.hdc-home .home-skip:focus { transform:none; }
.hdc-home .home-header { min-height:58px; padding:8px max(24px,env(safe-area-inset-right)) 8px max(24px,env(safe-area-inset-left)); display:flex; align-items:center; border-bottom:1px solid #c9dff21c; }
.hdc-home .home-brand { display:inline-flex; gap:10px; align-items:center; min-height:42px; font-size:15px; letter-spacing:.025em; }
.hdc-home .home-brand img { object-fit:contain; }
.hdc-home main { max-width:1920px; margin:auto; }
.hdc-home .home-scene { position:relative; }
.hdc-home picture { display:block; }
.hdc-home .home-art { display:block; width:100%; height:auto; }
.hdc-home .home-actions { position:absolute; top:47%; left:10%; width:180px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:stretch; gap:16px; }
.hdc-home .home-store { display:block; width:100%; padding:0; margin:0; border-radius:8px; }
.hdc-home .home-store img { display:block; width:100%; height:auto; }
.hdc-home .home-handbook { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:9px; padding:8px 12px; color:#162030; border:1px solid #fff3c9; border-radius:8px; background:#efdcad; box-shadow:0 3px 14px #00162940; transition:background-color .18s ease; }
.hdc-home .home-handbook strong { display:block; font-size:16px; font-weight:600; line-height:1.4; }
/* Compact social group, exclusively in this homepage footer. */
.hdc-home .home-socials { grid-area:social; display:flex; width:max-content; align-items:center; justify-content:center; gap:8px; }
.hdc-home .home-social { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:10px; background:transparent; }
.hdc-home .home-social-window { display:grid; place-items:center; position:relative; width:32px; height:32px; overflow:hidden; }
/* Original Facebook mark: empty presentation canvas is clipped by the circular window. */
.hdc-home .home-facebook .home-social-window { border-radius:50%; background:#fff; }
.hdc-home .home-facebook img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:104px; height:auto; max-width:none; }
/* Original Instagram glyph rendered as a white luminance mask on a colored UI tile. */
.hdc-home .home-instagram .home-social-window { border-radius:9px; background:radial-gradient(circle at 27% 103%,#ffd776 0%,#ffb94f 16%,#f56b46 34%,#dc3474 57%,#a738b4 76%,#6350c9 100%); }
.hdc-home .home-social-mark { display:block; width:24px; height:24px; background:#fff; mask-image:url("/assets/homepage/ui/instagram.png"); mask-mode:luminance; mask-position:center; mask-repeat:no-repeat; mask-size:116px auto; }
.hdc-home .home-footer { padding:16px max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); border-top:1px solid #c9dff124; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"links social" "copyright social"; align-items:center; column-gap:24px; row-gap:2px; font-size:12px; line-height:1.5; }
.hdc-home .home-footer-links { grid-area:links; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; column-gap:22px; }
.hdc-home .home-footer-links a { display:inline-flex; align-items:center; min-height:44px; }
.hdc-home .home-copyright { grid-area:copyright; margin:0; color:#b7c9dd; white-space:nowrap; }
@media (hover:hover) { .hdc-home .home-handbook:hover { background:#f7e9c8; } .hdc-home .home-footer-links a:hover { text-decoration:underline; text-underline-offset:4px; } }
@media (orientation:landscape) and (max-width:1366px) { .hdc-home .home-actions { top:46%; left:15%; } }
@media (orientation:landscape) and (max-height:600px) and (max-width:1200px) {
 .hdc-home .home-header { min-height:48px; padding-block:3px; }
 .hdc-home .home-actions { top:44%; left:18.7%; }
 .hdc-home .home-footer { padding-block:8px; }
}
@media (orientation:portrait) {
 .hdc-home .home-actions { top:auto; bottom:16px; left:50%; }
 .hdc-home .home-footer { grid-template-columns:1fr; grid-template-areas:"social" "links" "copyright"; justify-items:center; gap:4px; padding-top:12px; }
 .hdc-home .home-footer-links { justify-content:center; }
}
@media (orientation:portrait) and (max-width:600px) {
 .hdc-home .home-header { min-height:52px; padding:5px max(16px,env(safe-area-inset-right)) 5px max(16px,env(safe-area-inset-left)); }
 .hdc-home .home-brand { font-size:14px; }
 .hdc-home .home-brand img { width:28px; height:28px; }
 .hdc-home .home-actions { bottom:12px; }
 .hdc-home .home-footer-links { column-gap:17px; }
}
/* At exceptional small/short viewports keep controls readable by letting them flow below the artwork. */
@media (max-width:350px), (orientation:landscape) and (max-height:600px) and (max-width:720px) {
 .hdc-home .home-actions { position:static; transform:none; width:min(180px,calc(100% - 32px)); margin:26px auto; }
 .hdc-home .home-footer { grid-template-columns:1fr; grid-template-areas:"social" "links" "copyright"; justify-items:center; }
 .hdc-home .home-footer-links { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { .hdc-home .home-handbook { transition:none; } }