.dg-stats-page { min-width: 320px; background: var(--ud-black); color: var(--ud-white); }
.dg-stats-page main { overflow: hidden; }
.dg-stats-shell { width: min(100%, 1500px); margin: 0 auto; padding-inline: var(--dp-shell-gutter); }
.dg-stats-hero { position: relative; padding: calc(var(--dp-shell-height) + clamp(4rem, 10vw, 8rem)) 0 clamp(4rem, 8vw, 7rem); background: radial-gradient(circle at 82% 18%, rgba(122, 76, 242, 0.24), transparent 27rem), linear-gradient(145deg, var(--ud-black) 44%, var(--ud-purple-black) 100%); }
.dg-stats-hero::before, .dg-stats-content::before { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--ud-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ud-grid) 1px, transparent 1px); background-size: 76px 76px; content: ""; }
.dg-stats-hero > *, .dg-stats-content > * { position: relative; z-index: 1; }
.dg-stats-eyebrow, .dg-section-label { margin: 0; color: var(--ud-purple-bright); font-family: var(--dp-shell-data); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.dg-stats-hero h1 { max-width: 13ch; margin: 1rem 0; font-family: var(--dp-shell-font); font-size: clamp(3.25rem, 9vw, 8.2rem); font-weight: 590; letter-spacing: -0.075em; line-height: 0.86; }
.dg-stats-hero h1 span { color: var(--ud-purple-bright); }
.dg-stats-intro { max-width: 39rem; margin: 0; color: rgba(245, 243, 239, 0.72); font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.5; }
.dg-stats-content { position: relative; display: grid; gap: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(5rem, 10vw, 9rem); background: var(--ud-black); }
.dg-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ud-line); }
.dg-sync-status { margin: 0; color: var(--ud-white-muted); font-family: var(--dp-shell-data); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.dg-overview h2, .dg-game-stats h2, .dg-recent h2, .dg-account-state h2, .dg-auth-card h2 { margin: clamp(1.25rem, 3vw, 2rem) 0; font-family: var(--dp-shell-font); font-size: clamp(1.65rem, 3.6vw, 3rem); font-weight: 590; letter-spacing: -0.055em; line-height: 1; }
.dg-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ud-line); border-left: 1px solid var(--ud-line); }
.dg-overview-grid dl { min-width: 0; min-height: 9rem; margin: 0; padding: 1.25rem; border-right: 1px solid var(--ud-line); border-bottom: 1px solid var(--ud-line); background: rgba(245, 243, 239, 0.018); }
.dg-overview-grid dt { color: var(--ud-white-muted); font-family: var(--dp-shell-data); font-size: 0.58rem; letter-spacing: 0.08em; line-height: 1.45; text-transform: uppercase; }
.dg-overview-grid dd { margin: 1.25rem 0 0; color: var(--ud-white); font-family: var(--dp-shell-font); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; overflow-wrap: anywhere; }
.dg-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ud-line); border-left: 1px solid var(--ud-line); }
.dg-game-card { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border-right: 1px solid var(--ud-line); border-bottom: 1px solid var(--ud-line); background: rgba(245, 243, 239, 0.018); transition: background-color 180ms ease, border-color 180ms ease; }
.dg-game-card:hover { border-color: rgba(154, 119, 255, 0.62); background: rgba(122, 76, 242, 0.09); }
.dg-game-card h3 { margin: 0 0 1.25rem; color: var(--ud-white); font-family: var(--dp-shell-font); font-size: 1.35rem; font-weight: 620; letter-spacing: -0.04em; }
.dg-game-card dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.62rem 1rem; margin: 0; }
.dg-game-card dt { color: var(--ud-white-muted); font-size: 0.75rem; }
.dg-game-card dd { margin: 0; color: var(--ud-white); font-family: var(--dp-shell-data); font-size: 0.68rem; font-variant-numeric: tabular-nums; text-align: right; }
.dg-recent-list { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--ud-line); list-style: none; }
.dg-recent-list li { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 4rem; padding: 0.75rem 0; border-bottom: 1px solid var(--ud-line); color: var(--ud-white); }
.dg-recent-list time, .dg-recent-list small { color: var(--ud-white-muted); font-family: var(--dp-shell-data); font-size: 0.6rem; letter-spacing: 0.04em; }
.dg-recent-list strong { overflow: hidden; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; }
.dg-recent-list span { color: var(--ud-purple-bright); font-family: var(--dp-shell-data); font-size: 0.66rem; text-align: right; white-space: nowrap; }
.dg-account-state, .dg-auth-card { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--ud-line); background: radial-gradient(circle at 100% 0, rgba(122, 76, 242, 0.16), transparent 25rem), var(--ud-black-raised); }
.dg-account-state h2, .dg-auth-card h2 { margin: 0.75rem 0; }
.dg-account-state p:not(.dg-section-label), .dg-auth-card p:not(.dg-section-label) { max-width: 42rem; margin: 0; color: var(--ud-white-muted); font-size: 0.88rem; line-height: 1.55; }
.dg-auth-card { display: block; max-width: 48rem; }
.dg-auth-card .dg-button { margin-top: 1.5rem; }
.dg-button, .dg-text-button { min-height: 3rem; border: 1px solid var(--ud-purple); border-radius: 0; background: var(--ud-purple); color: var(--ud-white); cursor: pointer; font-family: var(--dp-shell-font); font-size: 0.76rem; font-weight: 650; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--dp-shell-ease); }
.dg-button { padding: 0 1.25rem; }
.dg-button:hover { border-color: var(--ud-purple-bright); background: var(--ud-purple-bright); transform: translateY(-1px); }
.dg-text-button { padding: 0 0.35rem; border-color: transparent; background: transparent; color: var(--ud-white-muted); }
.dg-text-button:hover { color: var(--ud-white); }
.dg-button:focus-visible, .dg-text-button:focus-visible { outline: 3px solid var(--ud-focus); outline-offset: 4px; }
.dg-auth-error { margin-top: 1rem; color: #ef9a9a; }
@media (max-width: 760px) { .dg-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dg-game-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .dg-overview-grid { grid-template-columns: 1fr; } .dg-account-state { display: grid; align-items: start; } .dg-recent-list li { grid-template-columns: 4.5rem minmax(0, 1fr); } .dg-recent-list span { grid-column: 2; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .dg-game-card, .dg-button, .dg-text-button { transition-duration: 0.01ms; } }