:root{--color-background: #F4F1EC;--color-surface: #FFFFFF;--color-text: #1A1A1A;--color-subtle: #8A8A8A;--color-border: #DDD8D0;--color-accent: #C4622D;--font-heading: "Advent Pro", sans-serif;--font-body: "Questrial", sans-serif;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--transition: .15s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-body);background-color:var(--color-background);color:var(--color-text);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:1.2;font-weight:700}button{font-family:var(--font-body);cursor:pointer}input,textarea,select{font-family:var(--font-body)}a{color:var(--color-accent);text-decoration:none}#root{min-height:100vh;display:flex;flex-direction:column}.app-layout{display:flex;min-height:100vh}.app-sidebar{width:220px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;padding:var(--space-xl) 0 var(--space-xl)}.app-sidebar__logo{padding:0 var(--space-lg) var(--space-xl)}.app-sidebar__logo-text{font-family:var(--font-heading);font-size:.9rem;font-weight:700;color:var(--color-text);letter-spacing:.02em;text-transform:uppercase}.app-nav{display:flex;flex-direction:column;gap:2px;padding:0 var(--space-sm)}.app-nav__link{display:flex;align-items:center;gap:var(--space-sm);padding:10px var(--space-md);border-radius:var(--radius-md);color:var(--color-subtle);font-size:.875rem;text-decoration:none;transition:background var(--transition),color var(--transition);border:none;background:none;width:100%;text-align:left;cursor:pointer}.app-nav__link:hover,.app-nav__link--active{background:var(--color-background);color:var(--color-text)}.app-nav__link--disabled{opacity:.4;cursor:default;pointer-events:none}.app-nav__soon{margin-left:auto;font-size:.65rem;background:var(--color-border);color:var(--color-subtle);padding:2px 6px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.06em}.app-main{flex:1;margin-left:220px;display:flex;flex-direction:column;min-height:100vh}.app-topbar,.app-drawer-overlay{display:none}@media(max-width:768px){.app-sidebar{display:none}.app-main{margin-left:0}.app-topbar{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100}.app-topbar__hamburger{background:none;border:none;color:var(--color-text);padding:0;display:flex;align-items:center;cursor:pointer}.app-topbar__title{font-family:var(--font-heading);font-weight:700;font-size:.9rem;letter-spacing:.02em;text-transform:uppercase}.app-drawer-overlay{display:block;position:fixed;inset:0;background:#1a1a1a66;z-index:200}.app-drawer{position:absolute;top:0;left:0;bottom:0;width:260px;background:var(--color-surface);padding:var(--space-xl) 0;display:flex;flex-direction:column}.app-drawer__close{position:absolute;top:var(--space-lg);right:var(--space-lg);background:none;border:none;color:var(--color-text);cursor:pointer;display:flex;align-items:center}}.dashboard-tabs{display:flex;gap:var(--space-lg);padding:0 var(--space-xl);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.dashboard-tabs__tab{padding:var(--space-md) 0;font-size:.875rem;color:var(--color-subtle);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--transition),border-color var(--transition);white-space:nowrap}.dashboard-tabs__tab:hover{color:var(--color-text)}.dashboard-tabs__tab--active{color:var(--color-text);border-bottom-color:var(--color-accent)}@media(max-width:768px){.dashboard-tabs{padding:0 var(--space-md);gap:var(--space-md)}}.overview{display:flex;flex-direction:column;gap:var(--space-xl)}.overview__streak{display:flex;align-items:center;gap:var(--space-md)}.overview__streak-icon{color:var(--color-accent);flex-shrink:0}.overview__streak-text{display:flex;align-items:baseline;gap:var(--space-sm)}.overview__streak-count{font-family:var(--font-heading);font-size:3rem;font-weight:700;color:var(--color-accent);line-height:1}.overview__streak-label{font-size:.875rem;color:var(--color-subtle)}.overview__stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.overview__stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs)}.overview__stat-value{font-family:var(--font-heading);font-size:2.25rem;font-weight:700;color:var(--color-text);line-height:1}.overview__stat-label{font-size:.75rem;color:var(--color-subtle);text-transform:uppercase;letter-spacing:.06em}.overview__section{display:flex;flex-direction:column;gap:var(--space-md)}.overview__section-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;color:var(--color-text)}.overview__last-game{display:flex;align-items:center;gap:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md);cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),border-color var(--transition);width:100%}.overview__last-game:hover{box-shadow:var(--shadow-md);border-color:#c8c3bb}.overview__last-game-swatch{width:44px;height:44px;border-radius:var(--radius-md);flex-shrink:0}.overview__last-game-title{font-family:var(--font-heading);font-size:.95rem;font-weight:700;color:var(--color-text)}.overview__last-game-meta{font-size:.8rem;color:var(--color-subtle);margin-top:2px}.overview__categories{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.overview__category-tag{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);font-size:.85rem;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md)}.overview__trophies-toggle{display:flex;align-items:center;gap:var(--space-sm);background:none;border:none;font-family:var(--font-heading);font-size:1rem;font-weight:700;color:var(--color-text);cursor:pointer;padding:0;text-align:left}.overview__trophies{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg)}.overview__empty-hint{color:var(--color-subtle);font-size:.875rem}.overview__trophy-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) 0;border-bottom:1px solid var(--color-border)}.overview__trophy-row:last-child{border-bottom:none}.overview__trophy-name{font-size:.875rem;color:var(--color-text)}.overview__trophy-date{font-size:.8rem;color:var(--color-subtle)}.game-card{display:flex;align-items:center;gap:var(--space-md);width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md);cursor:pointer;text-align:left;transition:box-shadow var(--transition),border-color var(--transition);box-shadow:var(--shadow-sm)}.game-card:hover{box-shadow:var(--shadow-md);border-color:#c8c3bb}.game-card__swatch{width:52px;height:52px;border-radius:var(--radius-md);flex-shrink:0;border:3px solid transparent}.game-card__swatch--bronze{border-color:#cd7f32}.game-card__swatch--silver{border-color:#a8a9ad}.game-card__swatch--gold{border-color:#d4af37}.game-card__swatch--platinum{border-color:#d4af37;animation:platinum-shimmer 2.5s ease-in-out infinite}@keyframes platinum-shimmer{0%{border-color:#e2e2e2}25%{border-color:#d4af37}50%{border-color:#b0c4de}75%{border-color:#d4af37}to{border-color:#e2e2e2}}.game-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-xs)}.game-card__title{font-family:var(--font-heading);font-size:1rem;font-weight:700;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}.game-card__tag{font-size:.72rem;color:var(--color-subtle);background:var(--color-background);border:1px solid var(--color-border);padding:2px 7px;border-radius:var(--radius-sm);white-space:nowrap}.game-card__tag--difficulty{text-transform:capitalize}.game-card__tag--draft{color:var(--color-accent);border-color:var(--color-accent);background:transparent}.favorites{display:flex;flex-direction:column;gap:var(--space-lg)}.favorites--empty{padding:var(--space-2xl) 0;text-align:center}.favorites__empty-text{color:var(--color-subtle);font-size:.9rem}.favorites__header{display:flex;justify-content:flex-end}.favorites__manage{background:none;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-xs) var(--space-md);font-family:var(--font-body);font-size:.8rem;color:var(--color-subtle);cursor:pointer;transition:background var(--transition),color var(--transition)}.favorites__manage:hover,.favorites__manage--active{background:var(--color-background);color:var(--color-text)}.favorites__list{display:flex;flex-direction:column;gap:var(--space-sm)}.favorites__row{display:flex;align-items:center;gap:var(--space-sm)}.favorites__row .game-card{flex:1}.favorites__remove{width:32px;height:32px;flex-shrink:0;background:none;border:1px solid var(--color-border);border-radius:50%;font-size:1.25rem;line-height:1;color:var(--color-subtle);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition),color var(--transition),border-color var(--transition)}.favorites__remove:hover{background:var(--color-background);color:var(--color-text);border-color:var(--color-subtle)}.my-games{display:flex;flex-direction:column;gap:var(--space-lg)}.my-games__header{display:flex;align-items:center}.my-games__create{display:inline-flex;align-items:center;gap:var(--space-sm);background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md);padding:10px var(--space-lg);font-family:var(--font-body);font-size:.875rem;cursor:pointer;transition:opacity var(--transition)}.my-games__create:hover{opacity:.88}.my-games__controls{display:flex;gap:var(--space-sm);align-items:center}.my-games__search{flex:1;display:flex;align-items:center;gap:var(--space-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:9px var(--space-md);transition:border-color var(--transition)}.my-games__search:focus-within{border-color:var(--color-subtle)}.my-games__search-icon{color:var(--color-subtle);flex-shrink:0}.my-games__search-input{border:none;background:none;outline:none;flex:1;font-size:.875rem;color:var(--color-text)}.my-games__search-input::placeholder{color:var(--color-subtle)}.my-games__sort{display:flex;align-items:center;gap:var(--space-xs);color:var(--color-subtle)}.my-games__sort-icon{flex-shrink:0}.my-games__sort-select{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-family:var(--font-body);font-size:.875rem;padding:9px var(--space-md);outline:none;cursor:pointer}.my-games__list{display:flex;flex-direction:column;gap:var(--space-sm)}.my-games__empty{padding:var(--space-2xl) 0;text-align:center}.my-games__empty-title{color:var(--color-text);font-size:1rem}.my-games__empty-sub{color:var(--color-subtle);font-size:.875rem;margin-top:var(--space-xs)}.dashboard{display:flex;flex-direction:column;flex:1}.dashboard__content{padding:var(--space-xl);max-width:860px;width:100%}@media(max-width:768px){.dashboard__content{padding:var(--space-lg) var(--space-md)}}.game-detail{padding:var(--space-xl);max-width:640px;width:100%;display:flex;flex-direction:column;gap:var(--space-xl)}.game-detail--not-found{gap:var(--space-lg)}.game-detail__not-found-text{color:var(--color-subtle)}.game-detail__back{display:inline-flex;align-items:center;gap:var(--space-xs);background:none;border:none;color:var(--color-subtle);font-family:var(--font-body);font-size:.875rem;cursor:pointer;padding:0;transition:color var(--transition);align-self:flex-start}.game-detail__back:hover{color:var(--color-text)}.game-detail__header{display:flex;align-items:center;gap:var(--space-lg)}.game-detail__cover{width:72px;height:72px;border-radius:var(--radius-lg);flex-shrink:0}.game-detail__header-text{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}.game-detail__title{font-family:var(--font-heading);font-size:1.6rem;font-weight:700;color:var(--color-text);line-height:1.2}.game-detail__meta{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.game-detail__tag{font-size:.72rem;color:var(--color-subtle);background:var(--color-surface);border:1px solid var(--color-border);padding:2px 8px;border-radius:var(--radius-sm);white-space:nowrap}.game-detail__description{font-size:.925rem;color:var(--color-subtle);line-height:1.6}.game-detail__divider{height:1px;background:var(--color-border)}.game-detail__medal-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-md) 0}.game-detail__medal-circle{width:96px;height:96px;border-radius:50%;background-color:var(--color-border)}.game-detail__medal-circle--platinum{animation:medal-shimmer 2.5s ease-in-out infinite}@keyframes medal-shimmer{0%{background-color:#e2e2e2}25%{background-color:#d4af37}50%{background-color:#b0c4de}75%{background-color:#d4af37}to{background-color:#e2e2e2}}.game-detail__medal-label{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--color-subtle);letter-spacing:.02em}.game-detail__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}.game-detail__stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-sm);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.game-detail__stat-value{font-family:var(--font-heading);font-size:1.4rem;font-weight:700;color:var(--color-text);line-height:1}.game-detail__stat-label{font-size:.7rem;color:var(--color-subtle);text-transform:uppercase;letter-spacing:.05em}.game-detail__timeline{display:flex;flex-direction:column;gap:var(--space-md)}.game-detail__timeline-row{display:flex;align-items:center;gap:var(--space-md)}.game-detail__timeline-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--color-border);background:transparent;flex-shrink:0}.game-detail__timeline-dot--earned{border-color:transparent}.game-detail__timeline-tier{font-size:.875rem;color:var(--color-text);flex:1}.game-detail__timeline-date{font-size:.8rem;color:var(--color-subtle)}.game-detail__scores{display:flex;flex-direction:column;gap:var(--space-sm)}.game-detail__score-row{display:flex;justify-content:space-between;align-items:center}.game-detail__score-label{font-size:.875rem;color:var(--color-subtle)}.game-detail__score-value{font-size:.875rem;color:var(--color-text)}.game-detail__never-played{font-size:.875rem;color:var(--color-subtle)}.game-detail__play{width:100%;padding:var(--space-md);background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-heading);font-size:1.1rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:opacity var(--transition)}.game-detail__play:hover{opacity:.88}@media(max-width:768px){.game-detail{padding:var(--space-lg) var(--space-md)}.game-detail__title{font-size:1.3rem}.game-detail__stats{grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}}
