/* Home content only: the shared navigation remains unchanged. */
.hero.home-hero { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; height: auto; min-height: max(780px, 100svh); padding: clamp(130px, 10vw, 175px) 6% 26px; isolation: isolate; background: #06141e; overflow: hidden; }
.home-hero::after { display: none; }
.home-landscape { position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, #06100ef5 0%, #06100e20 38%, transparent 70%), url('/assets/home-landscape-v2.png') center top / cover no-repeat; }
.home-intro { position: relative; width: min(560px, 45%); margin-left: 21%; padding-bottom: 32px; }
.home-kicker { margin: 0 0 15px; color: #b2e9e0; font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .55em; text-shadow: 0 2px 8px #00151d; }
.home-title { margin: 0; font-family: var(--display); font-size: clamp(34px, 4.2vw, 76px); line-height: 1.02; letter-spacing: -.045em; text-transform: uppercase; filter: drop-shadow(0 6px 2px #00151c) drop-shadow(0 0 15px #00151c55); }
.home-title span { display: block; width: max-content; max-width: 100%; color: #e6e7d4; background: linear-gradient(#ffffed 10%, #bfc9ba 48%, #f0f1dd 50%, #899c8e 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #efffe52b; }
.home-title span + span { color: #36e3ae; background-image: linear-gradient(#b7ffc3 0%, #4ce6a2 35%, #0c956b 70%, #52cc95); }
.home-description { max-width: 430px; margin: 20px 0 24px; color: #daece9; font-size: clamp(13px, 1.1vw, 17px); line-height: 1.8; letter-spacing: .075em; text-shadow: 0 2px 8px #00121e; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-join, .home-discord { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 62px; padding: 13px 19px; border: 1px solid #76f6d3; border-radius: 3px 13px 3px 13px; background: linear-gradient(135deg, #0b987d, #075b56); color: #efffff; box-shadow: inset 0 0 14px #5effc835, 0 0 18px #00bd9b24; cursor: pointer; text-align: left; transition: background .2s, transform .2s; }
.home-actions svg { width: 25px; height: 25px; flex: none; fill: currentColor; }
.home-actions span { display: grid; gap: 5px; }
.home-actions strong { font-size: 11px; letter-spacing: .025em; }
.home-actions small { color: #c2ddd9; font-size: 10px; }
.home-discord { background: linear-gradient(135deg, #101e46, #0a172c); border-color: #6c83c8; box-shadow: inset 0 0 14px #8da3ff12; }
.home-discord svg { color: #a3b1ff; }
.home-actions > :hover { transform: translateY(-2px); background: #126b61; }
.home-actions > :focus-visible { outline: 3px solid #b6ffe7; outline-offset: 5px; }
.home-connection { margin-top: 17px; color: #bdd2d1; font-size: 11px; line-height: 1.6; text-shadow: 0 2px 6px #001015; }
.home-server-status { display: inline-flex; gap: 7px; align-items: center; }
.home-server-status[data-server-status='unavailable'] .status-dot, .home-server-status[data-server-status='loading'] .status-dot { background: #bea77d; box-shadow: none; }
.home-connection p { margin: 5px 0 0; }
.home-updates { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; padding: 19px; border: 1px solid #6acbb755; background: #041316d9; box-shadow: 0 18px 40px #0005, inset 0 1px 0 #b1ffde12; }
.home-updates-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 0 15px; }
.home-updates-heading h2 { margin: 0; color: #e5f7ed; font-size: 13px; font-weight: 800; letter-spacing: .025em; }
.home-updates-heading > span { color: #759b91; font-size: 9px; letter-spacing: .14em; }
.home-update-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-update { position: relative; min-width: 0; min-height: 155px; overflow: hidden; border: 1px solid #48776c; border-radius: 3px 12px 3px 12px; background: #08191e; }
.home-update--featured { border-color: #91eac0; box-shadow: 0 0 18px #44e7ba17; }
.home-update-art { position: absolute; inset: 0; background-size: cover; opacity: .6; }
.home-update-art--castle { background-image: url('/assets/home-landscape-v2.png'); background-position: 74% 40%; background-size: 180%; }
.home-update-art--portal { background-image: url('/assets/portal-gateway.webp'); background-position: center; }
.home-update-art--village { background-image: url('/assets/home-landscape-v2.png'); background-position: 85% 80%; background-size: 190%; }
.home-update-art--cavern { background-image: url('/assets/ore-cavern.webp'); background-position: center; }
.home-update-content { position: relative; height: 100%; min-height: inherit; display: flex; flex-direction: column; justify-content: flex-end; padding: 15px; background: linear-gradient(0deg, #031015fa 5%, #031015a8 65%, transparent); }
.home-update-badge, .home-update-category { align-self: flex-start; margin-bottom: 21px; color: #a7d6ce; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.home-update-badge { padding: 5px 8px; border: 1px solid #7fefb85e; color: #abffd0; background: #064235cc; }
.home-update h3 { margin: 0 0 7px; color: #ecfff6; font-size: 14px; line-height: 1.3; }
.home-update p { margin: 0; color: #b5c9c7; font-size: 11px; line-height: 1.6; }
.home-update small { margin-top: 11px; color: #7a9a92; font-size: 9px; }
@media (min-width: 1700px) { .home-intro { margin-left: 22%; padding-bottom: 100px; } }
@media (max-width: 1100px) { .hero.home-hero { min-height: 900px; padding: 155px 5% 28px; } .home-intro { width: 60%; margin-left: 12%; } .home-title { font-size: clamp(34px, 5.5vw, 60px); } .home-update-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-update { min-height: 155px; } }
@media (max-width: 600px) { .hero.home-hero { min-height: 100svh; padding: 145px 20px 24px; } .home-landscape { background-position: 64% top; } .home-landscape::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0014219c, #00142125), linear-gradient(0deg, #06100e 5%, transparent 80%); } .home-intro { width: 100%; margin: 0; padding-bottom: 42px; } .home-title { font-size: clamp(32px, 8.6vw, 50px); } .home-kicker { font-size: 10px; } .home-description { max-width: 340px; font-size: 13px; } .home-actions { gap: 10px; } .home-actions > * { flex: 1 1 145px; padding: 12px; } .home-actions strong { font-size: 10px; } .home-actions small { font-size: 9px; } .home-updates { padding: 13px; } .home-update-grid { gap: 10px; } .home-update-content { padding: 12px; } .home-update h3 { font-size: 13px; } .home-update p { font-size: 10px; } .home-updates-heading > span { display: none; } }
@media (max-width: 360px) { .home-update-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .home-actions > * { transition: none; } }
