:root {
    --bg-dark: #030303;
    --panel-bg: rgba(255, 255, 255, 0.03);
    --panel-border: rgba(255, 255, 255, 0.1);
    --brand-red: #8a0b0b;
    --brand-red-glow: rgba(138, 11, 11, 0.5);
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { background-color: var(--bg-dark); font-family: var(--font-stack); color: var(--text-main); overflow-x: hidden; overflow-y: auto; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-red); }

#app-wrapper { max-width: 1680px; margin: 0 auto; padding: 1.25rem; animation: fadeIn 0.5s ease-out; }
.app-header { margin-bottom: 2rem; border-bottom: 1px solid var(--panel-border); padding-bottom: 1.5rem; text-align: center; }
.glow-title { font-size: 2.5rem; letter-spacing: -0.5px; font-weight: 900; text-transform: uppercase; }
.glow-title span { color: var(--brand-red); text-shadow: 0 0 15px var(--brand-red-glow); }
.app-quote { color: var(--text-muted); font-size: 1rem; margin-top: 0.5rem; font-style: italic; }

.header-ad-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: 0 auto 1rem; }
.hub-nav-bar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--panel-border); border-radius: 6px; padding: .6rem 1rem; margin-bottom: 1.25rem; width: 100%; }
.nav-links-group, .nav-admin-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.nav-links-group { flex: 1; }
.nav-btn { background: transparent; border: 1px solid var(--panel-border); color: var(--text-muted); padding: 0.4rem 1rem; font-size: 0.85rem; font-weight: 600; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; }
.nav-btn:hover, .nav-btn.active { background: var(--brand-red); color: #fff; border-color: var(--brand-red); box-shadow: 0 0 10px var(--brand-red-glow); }

.app-view { display: none; }
.app-view.active { display: block; animation: fadeIn 0.3s ease-out; }
.content-panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; padding: 2rem; }
.panel-header-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--panel-border); padding-bottom: 1rem; }

.directory-layout { display: grid; grid-template-columns: minmax(125px, 12vw) minmax(0, 1fr) minmax(125px, 12vw); gap: 1rem; align-items: stretch; }
.directory-layout--no-side-ads { grid-template-columns: minmax(0, 1fr); }
.directory-layout--community-page { grid-template-columns: minmax(0, 1fr); }
.directory-layout--community-page .side-ad-slot { display: none; }
.directory-layout--community-page .tiles-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; width: 100%; }
.tiles-container > div { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease !important; }
.tiles-container > div:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); border-color: var(--brand-red) !important; }

.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-window { background: #0a0a0a; border: 1px solid var(--brand-red); border-radius: 8px; padding: 2rem; width: min(600px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; box-shadow: 0 0 30px var(--brand-red-glow); }
.ad-slot { min-height: 94px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; color: var(--text-muted); text-align: center; font-size: .78rem; }
.ad-slot-placeholder { background: rgba(255,255,255,.025); border: 1px dashed rgba(255,255,255,.2); }
.ad-slot img { width: 100%; height: 100%; min-height: 94px; object-fit: cover; display: block; }
.is-empty { display: none !important; }
.side-ad-slot { min-height: 440px; }
.side-ad-slot .ad-slot { height: 100%; min-height: 440px; }
.community-directory-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.community-tile { display: grid; grid-template-columns: minmax(110px, .3fr) minmax(0, 1fr) minmax(110px, .3fr); gap: .75rem; padding: .75rem; background: rgba(255,255,255,.02); border: 1px solid var(--panel-border); border-radius: 10px; align-self: start; }
.community-tile--no-side-ads { grid-template-columns: minmax(0, 1fr); }
.community-tile--no-side-ads .community-main { grid-column: 1; }
.community-top-ads { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.community-top-ads .ad-slot { min-height: 130px; }
.community-side-ad .ad-slot { min-height: 100%; height: 100%; }
.community-main { min-width: 0; display: grid; gap: .75rem; }
.community-brand { display: grid; grid-template-columns: 120px minmax(0, 1fr) 72px; gap: .6rem; align-items: stretch; }
.community-logo, .dgg-logo { background: #080808; border: 1px solid var(--panel-border); min-height: 100px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; color: var(--text-muted); font-size: .72rem; text-align: center; }
.community-logo img, .dgg-logo img { width: 100%; height: 100%; object-fit: cover; }
.community-title { background: #080808; border: 1px solid var(--panel-border); border-radius: 6px; display: flex; align-items: center; padding: 1rem; }
.community-title h2 { font-size: clamp(1.2rem, 2.4vw, 2rem); }
.community-details { display: grid; grid-template-columns: 1.1fr .9fr; gap: .75rem; }
.community-panel { border: 1px solid var(--panel-border); border-radius: 6px; padding: 1rem; background: #080808; min-height: 210px; }
.community-panel p { color: var(--text-muted); line-height: 1.55; white-space: pre-wrap; }
.community-panel dl { margin-top: 1rem; display: grid; gap: .45rem; color: var(--text-muted); font-size: .88rem; }
.community-panel dt { color: #fff; font-weight: 700; }
.community-actions { display: grid; gap: .65rem; margin-top: 1rem; }
.community-actions a, .community-actions button { display: block; width: 100%; padding: .65rem .8rem; border: 0; border-radius: 4px; background: var(--brand-red); color: #fff; cursor: pointer; font: inherit; font-weight: 700; text-align: center; text-decoration: none; }
.community-actions a:hover, .community-actions button:hover { background: #ad1010; }
.field-hint { display: block; margin: .35rem 0 .5rem; color: var(--text-muted); font-size: .78rem; font-weight: 400; line-height: 1.35; }
.privacy-data-controls { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--panel-border); }
.privacy-data-controls h3 { margin-bottom: .5rem; }
.privacy-data-controls p { max-width: 760px; margin-bottom: .85rem; line-height: 1.5; }
.danger-btn { border-color: #c94b4b; color: #ffd7d7; }
.danger-btn:hover { background: #8a0b0b; border-color: #d86060; color: #fff; }
.community-highlights { grid-column: 1 / -1; min-height: 120px; border: 1px solid var(--panel-border); border-radius: 6px; padding: 1rem; background: #080808; }
.community-highlights h3 { margin-bottom: .5rem; }
.directory-tile { min-height: 190px; padding: 1.25rem; background: rgba(255,255,255,.02); color: var(--text-main); text-align: left; border: 1px solid var(--panel-border); border-radius: 8px; cursor: pointer; font: inherit; }
.directory-tile h3 { margin: .65rem 0; font-size: 1.2rem; }
.directory-tile p { color: var(--text-muted); line-height: 1.45; }
.directory-tile strong { display: block; margin-top: 1rem; color: #d5a1a1; }
.directory-tile img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; }
.request-review { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--panel-border); }
.request-review h3 { margin-bottom: .35rem; }
.request-review > div:last-child { display: flex; flex-wrap: wrap; gap: .5rem; }
.request-search-panel, .review-queue, .selected-game-panel { margin-top: 1rem; padding: 1rem; border: 1px solid var(--panel-border); border-radius: 6px; background: rgba(255,255,255,.015); }
.inline-form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.inline-form input { flex: 1 1 260px; color: #fff; background: #151515; border: 1px solid var(--panel-border); border-radius: 4px; padding: .65rem; font: inherit; }
.store-search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-top: 1rem; }
.store-result { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .5rem; align-items: center; color: #fff; text-align: left; background: #111; border: 1px solid var(--panel-border); border-radius: 5px; padding: .45rem; cursor: pointer; font: inherit; }
.store-result img { width: 48px; height: 28px; object-fit: cover; }
.store-result small { grid-column: 2; color: var(--text-muted); }
.success-message { color: #92d093; }
.form-grid { display: grid; gap: .8rem; }
.form-grid label { display: grid; gap: .35rem; color: var(--text-muted); font-size: .85rem; }
.form-grid input, .form-grid textarea { width: 100%; color: #fff; background: #151515; border: 1px solid var(--panel-border); border-radius: 4px; padding: .65rem; font: inherit; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.premium-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.premium-offer, .premium-activation { border: 1px solid var(--panel-border); border-radius: 8px; padding: 1.2rem; background: rgba(255,255,255,.02); }
.premium-offer--owned { border-color: rgba(213,161,161,.75); box-shadow: inset 0 0 0 1px rgba(138,11,11,.22); }
.premium-offer h3, .premium-activation h3 { margin-bottom: .55rem; }
.premium-offer p { color: var(--text-muted); line-height: 1.5; margin-bottom: .65rem; }
.premium-offer .premium-price { color: #fff; font-size: 1.3rem; font-weight: 800; }
.premium-offer .premium-owned { color: #a9e1aa; font-weight: 700; }
.premium-offer .nav-btn { margin-top: .4rem; }
.premium-activation { margin-top: 1rem; }
.premium-activation .inline-form { align-items: center; }
.premium-activation select { flex: 1 1 240px; color: #fff; background: #151515; border: 1px solid var(--panel-border); border-radius: 4px; padding: .65rem; font: inherit; }
.community-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.community-badge { display: inline-flex; align-items: center; border: 1px solid rgba(213,161,161,.7); border-radius: 999px; padding: .2rem .55rem; color: #f3d6d6; background: rgba(138,11,11,.25); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.community-badge--spotlight { color: #ffec99; border-color: #c9a227; background: rgba(201,162,39,.16); }
.community-feature-slot { grid-column: 1 / -1; border: 1px solid rgba(213,161,161,.46); border-radius: 10px; padding: .8rem; background: linear-gradient(90deg, rgba(138,11,11,.19), rgba(255,255,255,.025)); }
.community-feature-slot--spotlight { border-color: rgba(201,162,39,.62); background: linear-gradient(90deg, rgba(201,162,39,.15), rgba(255,255,255,.025)); }
.community-feature-slot__label { color: #f3d6d6; font-size: .75rem; font-weight: 900; letter-spacing: .12em; margin: 0 0 .55rem .2rem; text-transform: uppercase; }
.community-feature-slot--spotlight .community-feature-slot__label { color: #ffec99; }
.community-feature-card { display: block; width: 100%; color: #fff; text-align: left; font: inherit; cursor: pointer; border: 1px solid var(--panel-border); border-radius: 7px; overflow: hidden; background: #080808; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.community-feature-card:hover { border-color: #d5a1a1; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.community-feature-card--spotlight:hover { border-color: #c9a227; }
.community-feature-card__eyebrow { padding: .35rem .7rem; background: rgba(138,11,11,.46); color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.community-feature-card--spotlight .community-feature-card__eyebrow { background: rgba(201,162,39,.44); color: #fff6c5; }
.community-feature-card__content { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: .85rem; align-items: center; padding: .85rem; }
.community-feature-card__content img, .community-feature-card__logo { width: 94px; height: 64px; object-fit: cover; border: 1px solid var(--panel-border); border-radius: 4px; }
.community-feature-card__logo { display: grid; place-items: center; color: var(--text-muted); font-size: .75rem; }
.community-feature-card h2 { font-size: clamp(1.1rem, 2vw, 1.65rem); }
.community-feature-card p { color: var(--text-muted); margin-top: .25rem; }
.community-feature-card span { display: inline-block; color: #f3d6d6; font-size: .82rem; font-weight: 800; margin-top: .55rem; }
.community-feature-card--spotlight span { color: #ffec99; }
.player-spotlight-card { display: grid; align-content: start; gap: .55rem; width: 100%; min-height: 440px; color: #fff; text-align: left; font: inherit; cursor: pointer; border: 1px solid rgba(213,161,161,.55); border-radius: 6px; padding: .7rem; background: linear-gradient(180deg, rgba(138,11,11,.26), #080808 42%); }
.player-spotlight-card:hover { border-color: #d5a1a1; box-shadow: 0 0 18px rgba(138,11,11,.25); }
.player-spotlight-card__eyebrow { color: #f3d6d6; font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.player-spotlight-card__image { width: 100%; height: 132px; object-fit: cover; border: 1px solid var(--panel-border); border-radius: 4px; }
.player-spotlight-card__image--empty { display: grid; place-items: center; color: var(--text-muted); background: rgba(255,255,255,.03); }
.player-spotlight-card__gamertag, .player-spotlight-card__community, .player-spotlight-card__bio { color: var(--text-muted); font-size: .8rem; line-height: 1.4; }
.player-spotlight-card__community { color: #d5a1a1; font-weight: 700; }
.player-spotlight-card__comments { display: block; overflow: hidden; min-height: 78px; border: 1px solid var(--panel-border); border-radius: 4px; }
.player-spotlight-card__comments img { display: block; width: 100%; height: 78px; object-fit: cover; }
.player-spotlight-card__comments--empty { display: grid; place-items: center; color: #777; font-size: .72rem; }
.player-spotlight-card__action { color: #f3d6d6; font-size: .8rem; font-weight: 800; }
.player-ballot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--panel-border); }
.player-ballot__header, .player-nominee__title, .player-nominee__footer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.player-ballot__header h3, .player-nominee h3 { margin-bottom: .2rem; }
.player-ballot__header > span { color: var(--text-muted); font-size: .8rem; }
.player-nominee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.player-nominee { display: grid; gap: .6rem; border: 1px solid var(--panel-border); border-radius: 6px; padding: .75rem; background: rgba(255,255,255,.02); }
.player-nominee__title { justify-content: flex-start; }
.player-nominee__title img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.player-nominee p { color: var(--text-muted); line-height: 1.45; white-space: pre-wrap; }
.player-nominee__comments { overflow: hidden; border: 1px solid var(--panel-border); border-radius: 4px; }
.player-nominee__comments img { display: block; width: 100%; height: 90px; object-fit: cover; }
.player-nominee__footer { margin-top: auto; color: var(--text-muted); font-size: .82rem; }
.application-panel { padding: 1rem; border: 1px solid var(--panel-border); border-radius: 6px; background: rgba(255,255,255,.015); }
.application-panel h3 { margin-bottom: .45rem; }
.application-panel > p { color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem; }
.agreement-check { grid-template-columns: 1.25rem 1fr !important; align-items: start; }
.agreement-check input { width: auto !important; margin-top: .15rem; }
.site-footer { max-width: 1680px; margin: 0 auto; padding: 0 1.25rem 1.25rem; color: var(--text-muted); font-size: .85rem; text-align: center; }
.site-footer a { color: #ddd; }
@media (max-width: 980px) { .directory-layout { grid-template-columns: 1fr; } .side-ad-slot { display: none; } .community-tile { grid-template-columns: 1fr; } .community-top-ads, .community-highlights { grid-column: 1; } .community-side-ad { display: none; } .header-ad-slots { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .tiles-container, .premium-offers, .player-nominee-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { #app-wrapper { padding: .75rem; } .hub-nav-bar { align-items: flex-start; flex-direction: column; } .header-ad-slots { grid-template-columns: repeat(2, 1fr); } .header-ad-slots > :last-child { grid-column: 1 / -1; } .community-brand { grid-template-columns: 88px minmax(0, 1fr); } .dgg-logo { display: none; } .community-details { grid-template-columns: 1fr; } .content-panel, .modal-window { padding: 1rem; } }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }