.completion-page { margin:0; min-height:100dvh; display:flex; flex-direction:column; }
.completion-page .site-header { display:flex; align-items:center; min-height:60px; gap:12px; border-bottom:1px solid var(--gft-line); }
.completion-page .brand { display:flex; align-items:center; min-width:0; text-decoration:none; color:var(--gft-text); }
.completion-page .brand-copy { min-width:0; }
.completion-page .brand-copy strong { font-size:20px; line-height:1.25; white-space:normal; }
.completion-page .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.completion-main { width:min(1280px,calc(100% - 40px)); margin:24px auto 0; flex:1 0 auto; min-width:0; }
.completion-page :is(button,select,input) { font:inherit; }
.completion-page :is(button,select) { cursor:pointer; }
.completion-page :is(button,input,select,a,summary):focus-visible { outline:2px solid var(--gft-sage); outline-offset:3px; }
.completion-page [hidden] { display:none !important; }
.completion-controls { display:grid; grid-template-columns:minmax(200px,1.5fr) minmax(100px,.5fr) minmax(120px,.6fr) minmax(150px,.7fr); gap:12px; align-items:center; max-width:980px; margin:0; }
.completion-search { display:flex; align-items:center; gap:9px; border:1px solid var(--gft-line); border-radius:4px; padding-left:12px; min-width:0; background:var(--gft-surface); }
.completion-search > .gft-icon { width:18px; height:18px; color:var(--gft-muted); }
.completion-search input { background:none; border:0; color:var(--gft-text); min-width:0; width:100%; height:46px; padding:9px 0; outline-offset:-3px; font-size:16px; }
.completion-search input::-webkit-search-cancel-button { -webkit-appearance:none; }
.completion-search button { background:transparent; border:0; color:var(--gft-muted); display:grid; place-items:center; min-width:44px; min-height:44px; padding:0; }
.completion-select { min-width:0; }
.completion-select select { border:1px solid var(--gft-line); border-radius:4px; color:var(--gft-text); background:var(--gft-surface); width:100%; min-height:48px; padding:9px 10px; font-size:15px; }
.completion-context { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 16px; margin:14px 0 3px; color:var(--gft-muted); font-size:12px; }
.completion-context p,.completion-qualifier { margin:0; }
.completion-qualifier { color:var(--gft-muted); font-size:13px; margin-bottom:16px; }
.completion-results { border:1px solid var(--gft-line); border-radius:4px; }
.completion-columns { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(200px,1fr); padding:14px 64px 14px 24px; color:var(--gft-muted); font-size:14px; border-bottom:1px solid var(--gft-line); }
.completion-list { list-style:none; padding:0; margin:0; }
.completion-item + .completion-item { border-top:1px solid var(--gft-line); }
.completion-summary { display:grid; grid-template-columns:56px minmax(0,1.2fr) minmax(200px,1fr) 26px; align-items:center; gap:18px; width:100%; min-height:100px; padding:12px 24px; background:transparent; border:0; color:var(--gft-text); text-align:left; }
.completion-summary:hover,.completion-summary[aria-expanded="true"] { background:rgba(141,183,166,.035); }
.completion-art { width:52px; height:70px; aspect-ratio:3/4; flex:none; background:var(--gft-surface); display:grid; place-items:center; border-radius:2px; overflow:hidden; }
.completion-art img { display:block; width:100%; height:100%; object-fit:cover; }
.completion-art:empty::after { content:"No cover"; color:var(--gft-muted); font-size:10px; text-align:center; }
.completion-name { min-width:0; font-size:18px; line-height:1.3; }
.completion-name strong { overflow-wrap:anywhere; }
.completion-submeta { display:block; margin-top:5px; font-size:12px; color:var(--gft-muted); }
.completion-score { display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:16px; align-items:center; }
.completion-bar { height:6px; border-radius:3px; overflow:hidden; background:var(--gft-raised); }
.completion-bar span { display:block; width:var(--completion); height:100%; background:var(--gft-sage); }
.completion-percent { font-size:22px; color:var(--gft-sage); white-space:nowrap; }
.completion-summary > .gft-icon { width:18px; height:18px; color:var(--gft-muted); }
.completion-summary[aria-expanded="true"] > .gft-icon { transform:rotate(180deg); }
.completion-detail { padding:8px 26px 20px; }
.completion-page .completion-detail h2 { font-size:16px; color:var(--gft-muted); margin:4px 0 12px; }
.completion-timeline { display:grid; grid-template-columns:repeat(var(--points),minmax(0,1fr)); list-style:none; margin:0 0 12px; padding:0; }
.completion-checkpoint { position:relative; min-width:0; text-align:center; display:flex; flex-direction:column; align-items:center; isolation:isolate; }
.completion-checkpoint::after { content:""; height:3px; background:var(--gft-sage); position:absolute; top:42px; left:50%; width:100%; z-index:-1; }
.completion-checkpoint:last-child::after { display:none; }
.completion-checkpoint.is-gap::after { background:var(--gft-amber); }
.checkpoint-percent { font-size:16px; height:32px; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
.checkpoint-dot { width:13px; height:13px; margin:5px 0 12px; border-radius:50%; background:var(--gft-sage); }
.completion-checkpoint.is-ending .checkpoint-percent { color:var(--gft-sage); font-size:23px; font-weight:600; }
.completion-checkpoint.is-ending .checkpoint-dot { width:17px; height:17px; margin:3px 0 10px; }
.checkpoint-label { font-size:12px; color:var(--gft-muted); line-height:1.35; padding:0 5px; min-height:34px; overflow-wrap:anywhere; }
.completion-mobile-timeline { display:none; }
.completion-summary-note { font-size:12px; color:var(--gft-muted); margin:0 0 10px; }
.completion-gap { color:var(--gft-muted); font-size:13px; margin:0 0 9px; }
.completion-gap strong { color:var(--gft-amber); }
.completion-points,.completion-evidence { margin-top:8px; }
.completion-page summary { display:flex; align-items:center; gap:8px; list-style:none; min-height:44px; cursor:pointer; color:var(--gft-sage); font-size:14px; }
.completion-page summary::-webkit-details-marker { display:none; }
.completion-page summary::after { content:""; display:inline-block; width:16px; height:16px; background:currentColor; mask:url(/games/assets/icons/lucide/chevron-down.svg) center/contain no-repeat; -webkit-mask:url(/games/assets/icons/lucide/chevron-down.svg) center/contain no-repeat; }
.completion-page details[open] > summary::after { transform:rotate(180deg); }
.completion-point-list { list-style:none; margin:0; padding:0; max-width:700px; }
.completion-point-list li { display:grid; grid-template-columns:minmax(0,1fr) 68px minmax(95px,.65fr); gap:12px; font-size:13px; padding:8px 0; border-bottom:1px solid var(--gft-line); }
.completion-point-list .point-gap { color:var(--gft-muted); text-align:right; }
.completion-evidence { border-top:1px solid var(--gft-line); padding-top:4px; color:var(--gft-muted); font-size:13px; }
.completion-evidence p { margin:8px 0; max-width:88ch; overflow-wrap:anywhere; }
.completion-evidence a,.completion-coverage a { color:var(--gft-sage); display:inline-flex; align-items:center; min-height:44px; padding-right:14px; overflow-wrap:anywhere; }
.completion-evidence dl { margin:0; display:grid; grid-template-columns:110px minmax(0,1fr); gap:6px 12px; }
.completion-evidence dt,.completion-evidence dd { margin:0; overflow-wrap:anywhere; }
.completion-awards { margin:0; padding-left:20px; }
.completion-awards li { padding:6px 0; }
.completion-coop,.completion-only { font-size:13px; color:var(--gft-muted); margin:8px 0; }
.completion-empty { padding:24px; color:var(--gft-muted); }
.completion-empty p { margin:0 0 10px; }
.completion-empty button { padding:10px 14px; min-height:44px; color:var(--gft-text); border:1px solid var(--gft-line); background:var(--gft-surface); border-radius:4px; }
.completion-coverage { margin-top:14px; color:var(--gft-muted); font-size:13px; }
.completion-coverage p { margin:8px 0; }
.completion-coverage ul { list-style:none; padding:0; }
.completion-coverage li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; border-bottom:1px solid var(--gft-line); padding:8px 0; }
.completion-page .site-legal-footer { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 18px; width:min(1280px,calc(100% - 40px)); margin:24px auto 0; padding:12px 0; border-top:1px solid var(--gft-line); font-size:13px; }
.completion-page .site-legal-footer a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; color:var(--gft-muted); }
.completion-page .site-legal-footer a:hover { color:var(--gft-sage); }
@media(max-width:767px) {
 .completion-main { width:calc(100% - 24px); margin-top:14px; }
 .completion-controls { grid-template-columns:minmax(0,.75fr) minmax(0,.8fr) minmax(0,1.2fr); gap:8px; }
 .completion-search { grid-column:1/-1; }
 .completion-select select { font-size:16px; min-height:44px; padding:8px; }
 .completion-context { margin-top:10px; font-size:11px; }
 .completion-qualifier { font-size:12px; margin-bottom:12px; }
 .completion-columns { grid-template-columns:1fr auto; padding:12px; font-size:13px; }
 .completion-summary { grid-template-columns:46px minmax(0,1fr) 59px 17px; grid-template-rows:auto auto; gap:8px 10px; padding:12px; min-height:90px; }
 .completion-art { grid-row:1/3; width:44px; height:59px; }
 .completion-name { grid-column:2; grid-row:1; font-size:15px; align-self:end; line-height:1.3; }
 .completion-submeta { display:none; }
 .completion-score { display:contents; }
 .completion-bar { grid-column:2; grid-row:2; align-self:start; margin-top:3px; height:5px; }
 .completion-percent { grid-column:3; grid-row:1/3; font-size:18px; text-align:right; }
 .completion-summary > .gft-icon { grid-column:4; grid-row:1/3; width:16px; }
 .completion-detail { padding:4px 12px 14px; }
 .completion-full-timeline { display:none; }
 .completion-mobile-timeline { display:block; }
 .completion-gap { font-size:12px; }
 .checkpoint-percent { font-size:14px; }
 .completion-checkpoint.is-ending .checkpoint-percent { font-size:20px; }
 .checkpoint-label { font-size:11px; padding:0 3px; }
 .completion-point-list li { grid-template-columns:minmax(0,1fr) 48px minmax(70px,.6fr); gap:8px; font-size:12px; }
 .completion-page .site-legal-footer { width:calc(100% - 24px); margin-top:18px; gap:2px 16px; }
}
@media(max-width:360px) {
 .completion-main { width:calc(100% - 20px); }
 .completion-summary { grid-template-columns:42px minmax(0,1fr) 51px 14px; gap:8px; padding:10px; }
 .completion-art { width:40px; height:54px; }
 .completion-name { font-size:14px; }
 .completion-percent { font-size:17px; }
 .completion-detail { padding-inline:10px; }
 .completion-page .brand-copy strong { white-space:normal; overflow:visible; text-overflow:clip; }
 .completion-select select { padding-inline:6px; }
}
@media(prefers-reduced-motion:reduce) { .completion-page * { scroll-behavior:auto; } }