/* =========================================================
   Lin2Web — Home page (v2): game icons, live HUD strip,
   feature tiles, onboarding steps, brand-mark community.
   Loaded after ultra.css on the public layout.
   Icons: game-icons.net (CC BY 3.0, img/gi/LICENSE.txt),
   brand marks: simple-icons (CC0, img/brand).
   ========================================================= */
.gi {
    --gi-fill: linear-gradient(180deg, #fbefcf 0%, #e0bf7c 48%, #9a7238 100%);
    display: inline-block; flex: none; width: 1em; height: 1em;
    background: var(--gi-fill);
    -webkit-mask: var(--gi) center / contain no-repeat; mask: var(--gi) center / contain no-repeat;
}
.gi--visored-helm { --gi: url("../img/gi/visored-helm.svg"); }
.gi--two-coins { --gi: url("../img/gi/two-coins.svg"); }
.gi--open-treasure-chest { --gi: url("../img/gi/open-treasure-chest.svg"); }
.gi--anvil-impact { --gi: url("../img/gi/anvil-impact.svg"); }
.gi--trophy-cup { --gi: url("../img/gi/trophy-cup.svg"); }
.gi--three-friends { --gi: url("../img/gi/three-friends.svg"); }
.gi--quill-ink { --gi: url("../img/gi/quill-ink.svg"); }
.gi--cloud-download { --gi: url("../img/gi/cloud-download.svg"); }
.gi--sword-clash { --gi: url("../img/gi/sword-clash.svg"); }
.gi--world { --gi: url("../img/gi/world.svg"); }
.gi--lightning-bolt { --gi: url("../img/gi/lightning-bolt.svg"); }
.gi--shield-reflect { --gi: url("../img/gi/shield-reflect.svg"); }
.ui-btn .gi { width: 20px; height: 20px; }

.brand {
    display: inline-block; flex: none; width: 1em; height: 1em;
    background: currentColor;
    -webkit-mask: var(--brand) center / contain no-repeat; mask: var(--brand) center / contain no-repeat;
}
.brand--telegram { --brand: url("../img/brand/telegram.svg"); }
.brand--discord { --brand: url("../img/brand/discord.svg"); }
.brand--youtube { --brand: url("../img/brand/youtube.svg"); }
.brand--instagram { --brand: url("../img/brand/instagram.svg"); }

/* ---------- Hero + HUD strip ---------- */
.home-hero#main.hero { flex-direction: column; justify-content: center; padding-bottom: 0; }
.home-hero > .wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.home-hud {
    position: relative; z-index: 2; width: 100%;
    margin-top: clamp(36px, 5vh, 72px);
}
.home-hud__row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 1px;
    margin-bottom: clamp(24px, 3vh, 48px);
    border-radius: 16px; overflow: hidden;
    background: rgba(216, 177, 106, .22);
    box-shadow: 0 0 0 1px rgba(216, 177, 106, .25), 0 24px 60px -20px rgba(0, 0, 0, .9);
}
.home-hud__stat {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(180deg, rgba(24, 21, 17, .9), rgba(10, 9, 8, .94));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background .3s;
}
.home-hud__stat:hover { background: linear-gradient(180deg, rgba(40, 32, 22, .92), rgba(12, 10, 8, .95)); }
.home-hud__icon {
    display: grid; place-items: center; flex: none;
    width: 48px; height: 48px; border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #2d261c, #090807 72%);
    box-shadow: inset 0 0 0 1px rgba(216, 177, 106, .55), 0 0 18px -6px var(--u-gold-glow);
}
.home-hud__icon .gi { width: 26px; height: 26px; }
.home-hud__stat--realm .pulse { margin: 0 12px 0 8px; }
.home-hud__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-hud__text b { color: var(--u-gold-hi); font: normal 24px/1 var(--font-accent-bold), serif; letter-spacing: .04em; }
.home-hud__stat--realm b { color: var(--u-text); }
.home-hud__text small { color: var(--u-muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.home-hud__stat--realm small { color: var(--u-life); }

/* ---------- Features ---------- */
.home-features__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(16px, 1.4vw, 28px);
}
.home-feature {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 18px; row-gap: 6px;
    padding: clamp(22px, 1.8vw, 32px);
    border-radius: 16px;
    color: var(--u-text);
    background:
        radial-gradient(90% 120% at 0% 0%, rgba(216, 177, 106, .12), transparent 55%),
        linear-gradient(180deg, rgba(26, 23, 19, .92), rgba(11, 10, 9, .95));
    box-shadow: inset 0 0 0 1px rgba(216, 177, 106, .2), inset 0 1px 0 rgba(255, 240, 210, .06), 0 20px 50px -24px rgba(0, 0, 0, .9);
    transition: transform .35s var(--u-ease), box-shadow .35s;
}
.home-feature::after {
    content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--u-gold), transparent); opacity: .5; transition: opacity .3s;
}
.home-feature:hover { color: var(--u-text); transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(216, 177, 106, .5), 0 26px 60px -22px rgba(0, 0, 0, .95), 0 0 40px -16px var(--u-gold-glow); }
.home-feature:hover::after { opacity: 1; }
.home-feature__icon {
    grid-row: 1 / span 2;
    display: grid; place-items: center;
    width: 64px; height: 64px; border-radius: 18px;
    background: radial-gradient(circle at 50% 30%, #32291d, #0b0a08 75%);
    box-shadow: inset 0 0 0 1px rgba(216, 177, 106, .45), 0 10px 24px -10px rgba(0, 0, 0, .9);
    transition: transform .4s var(--u-ease);
}
.home-feature__icon .gi { width: 36px; height: 36px; }
.home-feature:hover .home-feature__icon { transform: rotate(-6deg) scale(1.06); }
.home-feature strong { align-self: end; padding-right: 20px; color: var(--u-gold-hi); font: normal 17px/1.25 var(--font-accent-bold), serif; letter-spacing: .08em; text-transform: uppercase; }
.home-feature__text { color: var(--u-text-2); font-size: 14px; line-height: 1.6; }
.home-feature__more {
    position: absolute; right: 22px; top: 28px; width: 9px; height: 9px;
    border: solid var(--u-gold); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
    opacity: .4; transition: transform .3s var(--u-ease), opacity .3s;
}
.home-feature:hover .home-feature__more { opacity: 1; transform: translateX(4px) rotate(45deg); }

/* ---------- Steps ---------- */
.home-steps__list {
    position: relative;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 32px);
    margin: 0; padding: 0; list-style: none;
}
.home-steps__list::before {
    content: ""; position: absolute; left: 16%; right: 16%; top: 62px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 177, 106, .55), transparent);
}
.home-step {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 30px 24px 28px; text-align: center;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(22, 20, 17, .7), rgba(9, 8, 7, .8));
    box-shadow: inset 0 0 0 1px rgba(216, 177, 106, .16);
}
.home-step__num { position: absolute; top: 16px; left: 20px; color: rgba(216, 177, 106, .5); font: normal 13px/1 var(--font-accent-bold), serif; letter-spacing: .2em; }
.home-step__icon {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #3b2f1f, #0b0a08 72%);
    box-shadow: 0 0 0 6px rgba(9, 8, 7, .9), inset 0 0 0 1px var(--u-gold), 0 0 26px -6px var(--u-gold-glow);
}
.home-step__icon .gi { width: 32px; height: 32px; }
.home-step strong { color: var(--u-gold-hi); font: normal 17px/1.2 var(--font-accent-bold), serif; letter-spacing: .08em; text-transform: uppercase; }
.home-step p { margin: 0; color: var(--u-text-2); font-size: 14px; }
.home-step .ui-btn { margin-top: 6px; }

/* ---------- Community ---------- */
.home-community__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 1.4vw, 28px); }
.home-social {
    --tone: #d8b16a;
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 18px;
    padding: 22px 24px;
    border-radius: 16px;
    color: var(--u-text);
    background:
        radial-gradient(80% 140% at 0% 50%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(24, 21, 17, .92), rgba(10, 9, 8, .95));
    box-shadow: inset 0 0 0 1px rgba(216, 177, 106, .18), 0 20px 50px -24px rgba(0, 0, 0, .9);
    transition: transform .35s var(--u-ease), box-shadow .35s;
}
.home-social--telegram { --tone: #2aabee; }
.home-social--discord { --tone: #5865f2; }
.home-social--youtube { --tone: #ff3d3d; }
.home-social--instagram { --tone: #e1306c; }
.home-social:hover { color: var(--u-text); transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent), 0 26px 60px -22px rgba(0, 0, 0, .95), 0 0 40px -14px var(--tone); }
.home-social__icon {
    display: grid; place-items: center; flex: none;
    width: 58px; height: 58px; border-radius: 50%;
    color: #f4ead6;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tone) 50%, #111), #0a0908 78%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 60%, transparent), 0 0 22px -8px var(--tone);
    transition: transform .4s var(--u-ease);
}
.home-social__icon .brand { width: 26px; height: 26px; }
.home-social:hover .home-social__icon { transform: scale(1.08) rotate(-6deg); }
.home-social__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; text-align: left; }
.home-social__body strong { color: var(--u-gold-hi); font: normal 16px/1.2 var(--font-accent-bold), serif; letter-spacing: .1em; text-transform: uppercase; }
.home-social__body span { color: var(--u-text-2); font-size: 13px; line-height: 1.5; }
.home-social__arrow { flex: none; width: 9px; height: 9px; border: solid var(--u-gold); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: .5; transition: transform .3s var(--u-ease), opacity .3s; }
.home-social:hover .home-social__arrow { opacity: 1; transform: translateX(4px) rotate(45deg); }

/* ---------- Footer socials ---------- */
.site-footer__socials { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer__socials a {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%;
    color: var(--u-text-2);
    background: radial-gradient(circle at 50% 30%, #2a241b, #0a0908 75%);
    box-shadow: inset 0 0 0 1px rgba(216, 177, 106, .35);
    transition: color .25s, box-shadow .25s, transform .25s var(--u-ease);
}
.site-footer__socials a .brand { width: 18px; height: 18px; }
.site-footer__socials a:hover { color: var(--u-gold-hi); transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--u-gold), 0 0 18px -4px var(--u-gold-glow); }

@media (max-width: 960px) {
    .home-steps__list { grid-template-columns: 1fr; }
    .home-steps__list::before { display: none; }
    .home-hud__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .home-hud__row { grid-template-columns: 1fr; }
    .home-feature { grid-template-columns: 1fr; text-align: left; }
    .home-feature__icon { grid-row: auto; margin-bottom: 8px; }
}

/* layout fixes: one HUD row, balanced feature grid */
.home-hero .home-hud .wrap { width: min(calc(100% - 2 * var(--u-gutter)), 1400px); }
@media (min-width: 961px) {
    .home-hud__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
}
@media (min-width: 1200px) {
    .home-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}