body { margin:0; padding:0; min-height:100vh; } .page-shell { max-width:1000px; margin:auto; padding:32px clamp(20px,5vw,64px); } .page-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:28px; border-bottom:1px solid var(--border); } a { color:var(--text); text-underline-offset:5px; } .brand { text-decoration:none; font-size:22px; font-weight:650; } main { padding:clamp(40px,7vw,80px) 0; } .eyebrow { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); } h1 { font-size:clamp(34px,5vw,56px); line-height:1.1; letter-spacing:-1.5px; margin:18px 0; max-width:650px; } .intro { max-width:560px; font-size:17px; line-height:1.7; color:var(--text-muted); } .bank-details { max-width:640px; margin:32px 0 20px; border:1px solid var(--border); border-radius:16px; padding:8px 24px; background:var(--card); } .bank-details div { padding:20px 0; } .bank-details div+div { border-top:1px solid var(--border); } dt { color:var(--text-muted); font-size:13px; margin-bottom:8px; } dd { margin:0; font-size:19px; overflow-wrap:anywhere; } .account-number { font-size:clamp(26px,5vw,36px); font-variant-numeric:tabular-nums; letter-spacing:2px; } .page-action { display:inline-block; padding:12px 20px; border:1px solid var(--border-strong); border-radius:8px; background:var(--text); color:var(--bg); font:inherit; font-weight:600; text-decoration:none; cursor:pointer; } :focus-visible { outline:3px solid var(--accent); outline-offset:4px; } .copy-status { min-height:24px; font-size:14px; color:var(--text-muted); } .development-mark { width:64px; height:64px; display:grid; place-items:center; border:1px solid var(--border); border-radius:16px; background:var(--card); color:var(--accent); margin-bottom:32px; } footer { border-top:1px solid var(--border); padding:24px 0; font-size:12px; color:var(--text-muted); }
.page-action:not(.repeat-action) { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.page-action:hover { background: var(--accent-strong); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
.page-header a:hover { color: var(--accent); }
.level-card:not([aria-disabled="true"]):hover { background: color-mix(in srgb,var(--accent) 12%,var(--card)); }

/* Compact support page: keep the introduction and bank details together. */
.support-page .page-shell { padding-top: 20px; padding-bottom: 16px; }
.support-page .page-header { padding-bottom: 16px; }
.support-page main { padding: 20px 0 12px; }
.support-page .eyebrow { margin: 0 0 10px; }
.support-page h1 { font-size: clamp(32px,3vw,42px); margin: 0 0 12px; }
.support-page .intro { margin: 0 0 18px; line-height: 1.5; }
.support-page .bank-details { margin: 0 0 14px; padding: 4px 20px; }
.support-page .bank-details div { padding: 12px 0; }
.support-page dt { margin-bottom: 4px; }
.support-page .copy-status { margin: 8px 0 0; min-height: 20px; }
.support-page footer { padding: 14px 0; }

/* Match the compact support-page rhythm on both Games routes. */
.games-page .page-shell { padding-top: 20px; padding-bottom: 16px; }
.games-page .page-header { padding-bottom: 16px; }
.games-page main { padding: 20px 0 24px; }
.games-page .development-mark { width: 48px; height: 48px; margin-bottom: 14px; border-radius: 12px; }
.games-page .eyebrow { margin: 0 0 10px; }
.games-page h1 { font-size: clamp(32px,3vw,42px); margin: 0 0 12px; }
.games-page .intro { margin: 0 0 18px; line-height: 1.5; }
.games-page footer { padding: 14px 0; }