.fan-site{background:#f5f7f5}.fan-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px max(24px,calc((100% - 1200px)/2));background:white;border-bottom:1px solid #dce4dd}.fan-brand{display:flex;align-items:center;gap:12px;color:#123d32;text-decoration:none;font-size:20px}.fan-brand img{width:108px;height:96px;object-fit:contain;flex:none}.fan-header nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.fan-header nav a:not(.button){color:inherit;text-decoration:none}.fan-header nav a:hover{text-decoration:underline}.fan-header form{margin:0}.fan-main{max-width:1200px;margin:auto;padding:32px 24px;min-height:75vh}.fan-hero{padding:48px;border-radius:20px;background:#123d32;color:white;margin-bottom:36px}.fan-hero h1{font-size:clamp(32px,6vw,58px);margin:12px 0}.fan-hero p{max-width:700px}.fan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin-bottom:32px}.fan-grid .panel{margin:0}.fan-grid h3{font-size:22px}.fan-copy{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.fan-article{max-width:850px;margin:24px auto}.fan-article h1{font-size:36px}.fan-footer{max-width:1200px;margin:auto;display:flex;justify-content:space-between;padding:24px;border-top:1px solid #dce4dd}.fan-footer a{color:#123d32}.fan-site .login-container{max-width:520px;margin:24px auto}@media(max-width:760px){.fan-header{align-items:flex-start;flex-direction:column;padding:16px 24px}.fan-header nav{gap:12px;font-size:14px}.fan-hero{padding:28px}.fan-main{padding:24px 16px}.fan-footer{flex-wrap:wrap;gap:12px}.fan-article h1{font-size:28px}}

.fan-hero .eyebrow{color:inherit;opacity:.85}

.fan-site .panel>.eyebrow,.fan-site .game-card>.pill{font-size:12px;line-height:1.5;font-weight:750;letter-spacing:1px;color:var(--portal-label,#123d32)}

/* Portal accents inherit the readable brand shade. The identity badge defines its own role colours. */
body.fan-site[data-area="fan"]{--area-colour:var(--portal-label,var(--role-fan));--area-soft:var(--portal-soft,#fbeaf5)}
.fan-site .fan-header{border-top-color:var(--area-colour)}
.fan-site .fan-brand,.fan-site .fan-footer a,.fan-site .button.subtle,.fan-site a.campaign-reward-artwork{color:var(--portal-label,#123d32)}
.fan-site .area-destination .area-glyph{color:var(--area-colour)}
.fan-site a.campaign-reward-artwork:hover{background:var(--portal-soft,#eaf3ef);border-color:var(--area-colour)}
.fan-site :is(.content-card-thumbnail,.campaign-reward-artwork,.pagination a):focus-visible{outline-color:var(--area-colour)}

.redemption-code{font-family:monospace;font-size:clamp(18px,4vw,30px);font-weight:700;overflow-wrap:anywhere;letter-spacing:1px}

/* Activity symbols use the same contrast-adjusted portal colour as their text labels. */
.fan-site .activity-kind{display:flex;align-items:center;gap:12px;min-width:0;color:var(--portal-label,#123d32)}
.fan-site .activity-mark{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border:0;background:transparent}
.fan-site .activity-glyph{display:block;width:28px;height:28px;flex:none}
.fan-site .activity-kind>span:last-child{min-width:0;overflow-wrap:anywhere}
.fan-site .game-card>.activity-kind{font-size:12px;line-height:1.5;font-weight:750;letter-spacing:1px}

/* Clip the decorative rings inside their own layer, keeping focus outlines unobstructed. */
.fan-site .fan-activity-card{position:relative;isolation:isolate}
.fan-site .fan-activity-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;color:var(--portal-label,#123d32);opacity:.04;background:radial-gradient(circle at calc(100% - 48px) 42px,transparent 0 116px,currentColor 117px 144px,transparent 145px),radial-gradient(circle at 100% 166px,transparent 0 100px,currentColor 101px 102px,transparent 103px)}
@media print{.fan-site .fan-activity-card::before{display:none}}