/* Site footer (2026-10-23 redesign): matches the header - dark top over a green bar.
   The footer resizes by its own width (container "ftr"), not the window's. */

#footer { container: ftr / inline-size; margin: 32px auto 24px; }

.hf-ad { display: flex; justify-content: center; max-width: 100%; overflow: hidden; margin-bottom: 32px; }

.hf { position: relative; font-family: 'Source Sans Pro', 'Source Sans 3', sans-serif; color: #E6EDF3; border: 1px solid #232B33; border-radius: 16px; box-shadow: 0 10px 30px rgb(0 0 0 / 28%); overflow: hidden; }
.hf a { text-decoration: none; }
.hf .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hf a:focus-visible, .hf button:focus-visible { outline: 2px solid #D4E8A6; outline-offset: 2px; }

/* dark top: brand column + link columns */
.hf-top { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; padding: 44px 48px 40px; background: #101417; overflow: hidden; }
.hf-pitch { position: absolute; right: -120px; top: -150px; width: 520px; height: 520px; pointer-events: none; fill: none; stroke: rgb(255 255 255 / 4%); stroke-width: 3; }
.hf-pitch .spot { fill: rgb(255 255 255 / 6%); stroke: none; }

.hf-brandcol { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hf-brand { display: flex; align-items: center; gap: 14px; color: #FFFFFF; }
.hf-brand:hover { color: #FFFFFF; }
.hf-brand img { width: 48px; height: 48px; }
.hf-word { font-size: 24px; font-weight: 700; letter-spacing: 0.02em; color: #FFFFFF; }
.hf-word span { color: #B8D86B; }
.hf-tag { margin: 0; max-width: 300px; font-size: 16px; line-height: 1.5; color: #A9B4C0; }

.hf-live { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-radius: 18px; background: rgb(124 174 122 / 12%); box-shadow: inset 0 0 0 1px rgb(124 174 122 / 28%); color: #D4E8A6; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .15s; }

.hf-live .dot { width: 8px; height: 8px; border-radius: 4px; background: #8BD27E; box-shadow: 0 0 0 4px rgb(139 210 126 / 20%); }

.hf-discord { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 10px; background: #5865F2; color: #FFFFFF; font-size: 16px; font-weight: 700; box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 4px 14px rgb(88 101 242 / 25%); transition: background .15s, transform .15s; }
.hf-discord:hover, .hf-discord:focus { background: #4E5BD8; color: #FFFFFF; transform: translateY(-1px); }

.hf-col { position: relative; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.hf-col h2 { margin: 0 0 4px; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8B97A6; }
.hf-col a { display: flex; align-items: center; gap: 8px; color: rgb(255 255 255 / 78%); transition: color .15s; }
.hf-col a:hover { color: #D4E8A6; }
.hf-col a.hf-hi { color: #B8D86B; font-weight: 600; }
.hf-rg { font-size: 11px; font-weight: 700; color: #8B97A6; }

/* green bar */
.hf-bar { display: flex; align-items: center; gap: 24px; min-height: 58px; padding: 0 48px; background: #4A6B4C; border-top: 1px solid rgb(255 255 255 / 7%); font-size: 15px; color: rgb(255 255 255 / 82%); }
.hf-bar a { color: rgb(255 255 255 / 82%); }
.hf-bar a:hover { color: #FFFFFF; text-decoration: underline; }
.hf-gap { flex: 1 1 auto; }

/* narrower: brand on its own row above four link columns */
@container ftr (max-width: 1080px) {
	.hf-top { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; padding: 36px 32px 32px; }
	.hf-brandcol { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
	.hf-tag { flex: 1 1 260px; max-width: none; }
	.hf-bar { padding: 0 32px; }
}

/* phone: two link columns, full-width Discord button, bar wraps */
@container ftr (max-width: 640px) {
	.hf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 26px 20px 12px; }
	.hf-brandcol { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid #1E262E; }
	.hf-brand, .hf-live { align-self: flex-start; }
	.hf-tag { flex: none; }
	.hf-discord { justify-content: center; height: 48px; }
	.hf-col { gap: 0; }
	.hf-col h2 { margin: 8px 0 2px; }
	.hf-col a { min-height: 44px; }
	.hf-pitch { display: none; }
	.hf-bar { flex-wrap: wrap; gap: 6px 18px; padding: 12px 16px 14px; font-size: 14px; }
	.hf-copy { order: 5; flex: 1 0 100%; }

}