@import url('./style.css');

.family-page{--family-ink:#292543;--family-purple:#5342ba;--family-muted:#656176;background:#f7f6f2;color:var(--family-ink);line-height:1.55}
.family-page :is(main,section,div,form,nav,label){min-width:0}
.family-page button,.family-page input,.family-page select{font:inherit}
.family-page button,.family-page select,.family-page input:not([type=checkbox]){min-height:44px;border:1px solid #d9d5e3;border-radius:12px;padding:9px 14px;background:#fff;color:var(--family-ink);max-width:100%}
.family-page button:hover:not(:disabled){background:#f0ecff;border-color:#8c7ce0}
.family-page button.family-primary{background:var(--family-purple);border-color:var(--family-purple);color:#fff}
.family-page button.family-primary:hover:not(:disabled){background:#433396}
.family-page .family-danger{color:#a0283b;border-color:#dda8b1;margin-top:20px}
.family-page :focus-visible{outline:3px solid #c07b00;outline-offset:3px}
.family-page :is(h1,h2,h3,p){overflow-wrap:anywhere}
.family-page h1{font-size:clamp(2.15rem,4.5vw,3.6rem);line-height:1.08;letter-spacing:-.055em;margin:12px 0 18px;max-width:600px}
.family-page h2{font-size:clamp(1.35rem,2.5vw,1.8rem);letter-spacing:-.025em;line-height:1.2;margin:0 0 12px}
.family-page h3{font-size:1.04rem;margin:0 0 10px}.family-page p{margin:0 0 12px}
.family-header,.family-main,.family-footer{width:min(1140px,calc(100% - 48px));margin-inline:auto}
.family-header{display:flex;align-items:center;gap:26px;padding-block:22px;border-bottom:1px solid #e6e2da}
.family-brand{display:flex;align-items:center;gap:9px;font-size:1.6rem;font-weight:850;letter-spacing:-.055em}
.family-brand>span:first-child{color:#6c54c6;font-size:2rem}.family-brand-small{font-size:.7rem;letter-spacing:.03em;font-weight:650;background:#e9e3fa;border-radius:6px;padding:3px 7px;margin-left:4px}
.family-header nav{display:flex;gap:22px;margin-left:auto;font-size:.9rem;font-weight:650}.family-header nav a{padding-block:10px}
.family-language{display:flex;align-items:center;gap:8px;font-size:.75rem}.family-page .family-language select{font-size:.8rem;padding-inline:8px}
.family-main{padding-block:30px 12px}.family-hero{display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:center;margin-bottom:30px;padding:20px 12px}
.family-eyebrow{color:#6752ad;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.family-hero>div>p:not(.family-eyebrow){max-width:650px}.family-privacy{font-size:.8rem;color:var(--family-muted);margin-top:20px!important}
.family-hero-art{position:relative;min-height:195px}.family-hero-art span{position:absolute;display:grid;place-items:center;width:105px;height:105px;border-radius:30px;font-size:3.5rem}.family-hero-art span:nth-child(1){background:#e8defa;left:3px;top:2px;color:#7154ba;transform:rotate(-12deg)}.family-hero-art span:nth-child(2){background:#f7d8b5;right:2px;top:43px;color:#995419;transform:rotate(12deg)}.family-hero-art span:nth-child(3){background:#d5e9d7;left:36px;bottom:0;color:#467650;transform:rotate(-5deg)}
.family-panel{background:#fff;border:1px solid #e6e3dd;border-radius:23px;padding:26px;margin-bottom:22px;box-shadow:0 4px 12px #32254a03;scroll-margin-top:18px}
.family-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}.family-section-head h2{margin-bottom:0}.family-section-symbol{display:grid;place-items:center;background:#ece8f9;border-radius:50%;width:44px;height:44px;font-size:1.6rem;color:#6752ad}
.family-note{font-size:.85rem;color:var(--family-muted)}.family-status:empty{display:none}.family-status{padding:12px 16px;background:#e5f3e8;border-radius:12px}.family-error{padding:16px;background:#fff0ef;border:1px solid #e7b5ba;border-radius:14px;margin-bottom:20px}.family-error p{color:#822739}.family-dialog-error{color:#a0283b}.family-dialog-error:empty{display:none}
.family-profiles{display:flex;gap:10px;flex-wrap:wrap}.family-page .family-profile{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 15px;min-height:64px;max-width:100%;overflow-wrap:anywhere}.family-profile[aria-pressed=true]{border:2px solid var(--family-purple);background:#f3effc}.family-avatar{font-size:1.65rem}.family-profile-name{display:block;font-weight:700}.family-profile small{display:block;font-size:.7rem;color:#6451a5}.family-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.family-profile .family-avatar{flex-shrink:0}#family-profile-actions{margin-top:16px}#family-profile-actions .family-note{flex-basis:100%}
.family-settings{border-top:1px solid #ece9e3;margin-top:18px;padding-top:14px}.family-page summary{cursor:pointer;font-weight:650;padding:7px 0}.family-settings form{max-width:650px}.family-settings .family-field{max-width:280px}
.family-field{display:grid;gap:7px;font-size:.85rem;font-weight:650;margin-bottom:14px}.family-field :is(input,select){width:100%}.family-check{display:flex;align-items:flex-start;gap:10px;margin:15px 0;font-size:.9rem}.family-check input{width:20px;height:20px;margin:2px 0;accent-color:var(--family-purple);flex-shrink:0}
.family-filters{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:14px;margin-top:24px}.family-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.family-game{display:grid;grid-template-columns:86px minmax(0,1fr);gap:16px;padding:14px;border:1px solid #e6e2ed;border-radius:16px;align-items:start;background:#fdfcfe}.family-game-art{width:86px;aspect-ratio:1;border-radius:13px;object-fit:cover;background:#eee7fa;display:grid;place-items:center;font-size:2rem;overflow:hidden}.family-game img{width:100%;height:100%;object-fit:contain}.family-game h3{margin:0 0 5px;line-height:1.25}.family-game p{font-size:.78rem;color:var(--family-muted);margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.family-page .family-game button{font-size:.8rem;padding:7px 11px;min-height:44px}.family-favourites{margin-top:24px;border-top:1px solid #eeeaf3;padding-top:20px}#family-favourites{display:flex;flex-wrap:wrap;gap:10px}.family-favourite{padding:10px 13px;border-radius:12px;background:#f3f1f8;font-size:.85rem}.family-favourite small{display:block;color:var(--family-muted)}
.family-empty{text-align:center;padding:30px 14px;color:var(--family-muted)}.family-empty h3{font-size:1.15rem;color:var(--family-ink)}
.family-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}.family-metric{padding:18px;border-radius:14px;background:#f4f1fa;overflow-wrap:anywhere}.family-metric:nth-child(2){background:#eff5ed}.family-metric:nth-child(3){background:#fff3e5}.family-metric strong{display:block;font-size:1.85rem;letter-spacing:-.04em}.family-metric span{font-size:.78rem;color:var(--family-muted)}
.family-chart{border:1px solid #e7e2ef;border-radius:15px;padding:18px;margin:20px 0}.family-chart ol{list-style:none;display:grid;grid-template-columns:repeat(var(--bars,12),minmax(0,1fr));gap:8px;padding:0;margin:18px 0 0}.family-chart li{text-align:center;font-size:.67rem;min-width:0}.family-chart-track{height:105px;display:flex;align-items:flex-end;background:#f3f0f8;border-radius:6px;overflow:hidden}.family-chart-fill{width:100%;background:#8b77cc;min-height:2px;border-radius:5px 5px 0 0}.family-chart li[data-source=native] .family-chart-fill{background:#779879}.family-chart small{display:block;overflow-wrap:anywhere;font-size:.65rem}.family-chart-value{display:block;font-weight:700;margin-bottom:5px}
.family-round{border-bottom:1px solid #ece9f0;padding:14px 0}.family-round summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:revert}.family-round summary>div{min-width:0}.family-round .family-round-title{display:block;font-size:.95rem}.family-round small{display:block;color:var(--family-muted);font-size:.76rem}.family-round-metrics{text-align:right;flex-shrink:0;font-size:.85rem}.family-round-metrics strong{display:block;color:#514092}.family-round dl{display:grid;grid-template-columns:minmax(75px,110px) minmax(0,1fr);gap:7px;font-size:.8rem;background:#faf9fc;padding:14px;border-radius:10px}.family-round dt{color:var(--family-muted)}.family-round dd{margin:0;overflow-wrap:anywhere}.family-round ol{padding-left:24px;font-size:.8rem}.family-round li{padding:6px 0;overflow-wrap:anywhere}#family-more{margin-top:18px}.family-score-group{border-top:1px solid #eeeaf3;padding-top:18px;margin-top:18px}.family-score-group ol{padding-left:24px}.family-score-group li{padding:7px 0}.family-score-group li strong{margin-left:12px;color:#6752ad}.family-score-group p{overflow-wrap:anywhere}
.family-backups{background:#ede9f5;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.family-backups p{font-size:.87rem;max-width:620px}.family-footer{display:flex;justify-content:space-between;gap:12px;padding-block:20px 35px;font-size:.8rem;color:var(--family-muted)}
.family-dialog{border:1px solid #e5e0ee;border-radius:22px;padding:26px;width:min(470px,calc(100% - 28px));max-height:calc(100dvh - 36px);overflow:auto;color:var(--family-ink);box-shadow:0 22px 100px #241d4744}.family-dialog::backdrop{background:#29233e80;backdrop-filter:blur(3px)}.family-dialog h2{font-size:1.45rem}.family-dialog .family-actions{justify-content:flex-end;margin-top:22px}.family-dialog p{font-size:.9rem}
.family-skip{position:absolute;top:-100px;left:16px;padding:12px;background:#fff;z-index:100}.family-skip:focus{top:10px}
.family-mixed{margin-bottom:18px}.family-mixed-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:0 18px;max-height:280px;overflow:auto;padding:4px}.family-mixed-options .family-check{font-size:.8rem;margin-block:7px}.family-game .family-compatibility{display:block;color:#8b4b22;font-size:.75rem}.family-page #progress{font-size:inherit;color:inherit}.family-page .family-language select{width:auto}
.family-settings .family-level{max-width:500px;padding:16px;background:#f3effc;border:1px solid #dfd7f2;border-radius:15px;margin-top:14px}.family-level output{font-weight:750;color:#5841a3}.family-page .family-level input[type=range]{padding:0;accent-color:var(--family-purple);background:transparent;cursor:pointer}.family-level .family-note{font-weight:400}
.family-favourites{margin:0 0 20px;padding:0 0 16px;border-top:0;border-bottom:1px solid #eeeaf3}#family-all-games{margin-top:16px}.family-progress-details>summary{color:var(--family-purple)}
@media(max-width:760px){.family-header,.family-main,.family-footer{width:calc(100% - 28px)}.family-header{gap:12px;flex-wrap:wrap;padding-block:15px}.family-header nav{order:3;width:100%;margin:0;gap:22px}.family-language{margin-left:auto}.family-language>span{display:none}.family-hero{grid-template-columns:1fr;padding:10px 3px;margin-bottom:24px}.family-hero-art{display:none}.family-main{padding-top:22px}.family-panel{padding:20px;border-radius:18px}.family-filters{grid-template-columns:1fr 1fr;gap:10px}.family-search{grid-column:1/-1}.family-games{grid-template-columns:1fr}.family-backups{grid-template-columns:1fr;gap:8px}.family-metric{padding:12px}.family-metric strong{font-size:1.5rem}.family-metrics{gap:7px}.family-chart{padding:12px}.family-chart ol{gap:4px}.family-chart small{font-size:.55rem}.family-chart-value{font-size:.6rem}}
@media(max-width:390px){.family-panel{padding:16px}.family-filters{grid-template-columns:1fr}.family-search{grid-column:auto}.family-game{grid-template-columns:68px minmax(0,1fr);gap:12px;padding:12px}.family-game-art{width:68px}.family-metric span{font-size:.7rem}.family-round summary{gap:8px}.family-round-metrics{font-size:.75rem}.family-profile-actions{align-items:stretch}.family-brand-small{display:none}}
@media(prefers-reduced-motion:reduce){.family-page *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}