@font-face {
  font-family: "symbols2";
  font-display: swap;
  src: url("symbols2.woff2?v=3") format("woff2");
}
:root {
    color-scheme: light dark;
  --sidebar-width: clamp(max(12em, 15%), 16.7%, min(18em, 400px)); --vertical-gutter: 1.5rem; --horizontal-gutter: 2rem;
  --sidebar-width-1-5: clamp(max(8em, 15%), 16.7%, min(12em, 400px));
  --text-font-size: clamp(0.875rem, 0.85vw, 1rem); --small-text-font-size: clamp(0.8125rem, 0.875em, 1rem);
  --line-height: 1.25; --h2-font-scale: 1.675; --hx-line-height: 1.2; --h3-font-size: 1.25em;
  --facet-line-height: 1.4375; --selected-line-height: 1.7857; --selected-a-line-height: 1.5715;
  --cover-height: clamp(114px, 7.125rem, 228px); --cover-width: clamp(80px, 5rem, 160px); --cover-top-adjustment: 0.25rem;
  --font-family-regular: Ubuntu, Selawik, "Segoe UI", Roboto, "Proxima Nova", "Noto Sans", sans-serif, symbols2; --font-weight-regular: normal;
  --font-family-medium: Ubuntu, "Selawik SemiBold", "Segoe UI SemiBold", Roboto, "Proxima Nova", "Noto Sans", sans-serif, symbols2; --font-weight-medium: 500;
  --font-family-medium-selected: Ubuntu, "Selawik SemiBold", "Segoe UI SemiBold", Roboto, Arial, "Proxima Nova", "Noto Sans", sans-serif, symbols2;
  --font-family-symbols: symbols2, Ubuntu, Selawik, "Segoe UI", Roboto, "Proxima Nova", "Noto Sans", sans-serif;
  --abstract-rotation: 127deg; --b4-modifier: 0em;

  /* Overwritten for dark mode. (Can mostly be moved to `light-dark()` once support is ubiquitous; keep an eye on the amount of Win7/Fx 115 users.) */
  --subtle-gradient: radial-gradient(farthest-side at 100% 100%, var(--subtle-bg-color), var(--subtle-bg-color-transparent));
  --form-bg-color: #efe8ee; --form-gradients: linear-gradient(184deg, rgba(130,54,228,0.38) 0, rgba(212,210,211,0) 40%), linear-gradient(350deg, rgba(228,54,130,0.24), rgba(220,194,219,0) 40%), linear-gradient(90deg, rgba(220,194,219,0.24), rgba(228,178,227,0) 100%);
  --apply-bg-color: #f5f3f4; --apply-color: #2b2a33; --sugg-current-color: rgba(127, 127, 127, 0.1);
  --bg-color: #f8f6f7; --bg-color-transparent: rgba(248,246,247,0);
  --subtle-bg-color: rgba(232,230,231,0.5); --subtle-bg-color-transparent: rgba(232,230,231,0);
  --brand-color: #882c8c; --brand-offset-color: #000; --text-color: #212121; --deepest-text-color: #000; --meta-color: #514f51; --link-color: #410041; --visited-color: #882c8c;
  --flag-outline-color: #496660; --msg-color: #aaa; --msg-bg-color: #fff; --msg-success-color: #66cc66; --msg-info-color: #66aaff; --msg-warn-color: orange; --msg-error-color: red;
  --ex-color: rgba(136, 34, 34, 0.62); --ex-color-active: #dd0000; --scroll-shadow-color: rgba(0,0,0,.25); --scroll-shadow-color-transparent: rgba(0,0,0,0);
  --label-bg-color: rgba(0,0,0,0.06); --label-border-color: rgba(40,40,40,0.6);
  --label-severe-bg-color: rgba(191,79,79,0.15); --label-severe-border-color: #c00; --label-wow-bg-color: rgba(79,191,79,0.15); --label-wow-border-color: #383;
  --interactive-border-color: #666; --interactive-border-color-active: rgba(40,40,40,0.4); --interactive-border-color-transparent: rgba(40,40,40,0);
  --highlight-bg-color: #bbfa66; --highlight-wow-bg-color: #55fa2a; --highlight-low-shadow-color1: #cc0; --highlight-low-shadow-color2: #e8e800;
  --page-border-color: #979; --page-shadow-color: rgba(204, 165, 204, 0.6); --samp-bg-color: #d4d4d4;
}
li:nth-child(2n+1) { --abstract-rotation: 143deg; }
li:nth-child(3n+1) { --abstract-rotation: 97deg; }
li:nth-child(4n+1) { --abstract-rotation: 173deg; }
li:nth-child(5n+1) { --abstract-rotation: 63deg; }
li:nth-child(6n+1) { --abstract-rotation: 158deg; }
li:nth-child(7n+1) { --abstract-rotation: 81deg; }
li:nth-child(8n+1) { --abstract-rotation: 111deg; }
h1, h2, h3, ol, ul, li, p, dl, dt, dd { margin: 0; padding: 0; list-style: none; }
body { margin: 0.5rem; font-family: var(--font-family-regular); font-size: var(--text-font-size); line-height: var(--line-height); color: var(--text-color); background-color: var(--bg-color); background-attachment: fixed; background-image: linear-gradient(90deg, var(--bg-color) var(--sidebar-width), var(--bg-color-transparent) calc(var(--sidebar-width) * 1.2)), var(--subtle-gradient); backdrop-filter: blur(2px); }
body.page { background-image: none; }

.a11y { position: absolute; overflow: hidden; display: inline-block; width: 1px; height: 1px; white-space: nowrap; clip-path: rect(1px 1px 1px 1px); }
a { text-decoration-thickness: 5.5%; color: var(--link-color); }
abbr, a:hover, a:focus { text-decoration: none; }
ol.results a:visited, article.sub a:visited { color: var(--visited-color); }
button.trigger { margin: 0; border: 0; padding: 0; font-size: inherit; font-family: var(--font-family-medium); font-weight: var(--font-weight-medium); text-align: inherit; line-height: inherit; color: inherit; background-color: transparent; cursor: pointer; }
button.trigger:hover, button.trigger:focus { color: var(--deepest-text-color); }
js-only { display: none; }

h2, h3 { margin-bottom: 2px; }
h1 { align-self: end; font-size: 2rem; line-height: 1; font-weight: normal; }
h1 > a { text-decoration: none; color: var(--brand-color); }
h1 > a:hover, h1 > a:focus { text-decoration: underline; text-decoration-thickness: 2.75%; }
h1 > a > b + span { font-weight: 300; color: var(--brand-offset-color); }
h1 > a > b + span + span { font-size: 1rem; }
h2 {                          font-size: calc(1em * var(--h2-font-scale)); font-family: var(--font-family-medium); font-weight: var(--font-weight-medium); line-height: var(--hx-line-height); }
h2:has(> .actual) > .actual { font-size: calc(1em * var(--h2-font-scale)); }
h2:has(> .actual) { font-size: 1em; }
h2:not(:first-child) { margin-top: calc(3 * var(--vertical-gutter)); }
h2 > .normal { font-size: 1rem; font-family: var(--font-family-regular); font-weight: var(--font-weight-regular); }
h2 > .secondary { font-size: 1.25rem; }
h2:has(> .actual) > .normal { font-size: 1em; }
h2:has(> .actual) > .secondary { font-size: 1.25em; }
h3 { font-size: var(--h3-font-size); font-family: var(--font-family-medium); font-weight: var(--font-weight-medium); line-height: var(--hx-line-height); }

header { display: flex; flex-wrap: wrap; gap: 0 2em; }
header > nav { flex: 1 1 auto; display: flex; flex-direction: row-reverse; gap: var(--horizontal-gutter); }
header > nav > .pages { position: relative; display: flex; flex-direction: column; min-width: max-content; justify-content: space-between; }
header > nav > .pages > li.preceding { margin-right: 4.2em; }
header > nav > .pages > li.last { position: absolute; right: 0; bottom: 0; }
header > nav > .pages > li.countrypicker { display: none; }
header > nav > .select { align-content: end; }
header > search { width: 100%; }
.currencyselect, .countryselect { text-align: right; }
.currencyselect p, .currencyselect ul, .countryselect p, .countryselect ul { display: inline; line-height: max(1.125rem, 1.25em); }
.currencies > li, .currencies > li > a, .countries > li { display: inline-block; }
.currencies > li { margin-left: 1ex; }
.currencies > li.current, .currencies > li > a:hover, .currencies > li > a:focus { position: relative; }
.countries > li.current, .countries > li > a { margin-left: 1ex; padding: 0.75rem 0.25ex 0 0.25ex; transition: padding 0.15s; }
.currencies > li.current::before, .currencies > li > a:hover::before, .currencies > li > a:focus::before, .countries > li.current::before, .countries > li > a:hover::before, .countries > li > a:focus::before { content: "🞁"; position: absolute; bottom: -1rem; left: 0; width: 100%; text-align: center; font-family: var(--font-family-symbols); }
.currencies > li.current::before, .currencies > li > a:hover::before, .currencies > li > a:focus::before { bottom: -0.9375rem; }
.countries > li > a { display: inline-block; text-decoration: none; }
.countries img { position: relative; bottom: -0.125rem; display: block; max-height: 1.25rem; box-shadow: 0 0 1px var(--flag-outline-color); transition: margin 0.15s; }
.countries > li.current, .countries > li > a:hover, .countries > li > a:focus { position: relative; padding-top: 0.4375rem; }
.countries > li.current img, .countries > li > a:hover img, .countries > li > a:focus img { margin-bottom: 0.25rem; }
.currencies > li > a:hover::before, .currencies > li > a:focus::before, .countries > li > a:hover::before, .countries > li > a:focus::before { opacity: 0.5; }

form.main { display: flex; clear: left; margin: 0.7ex 0 10px 0; padding: 9px 10px 9px 0; background-color: var(--form-bg-color); background-image: var(--form-gradients); box-shadow: 0 0 16px rgba(219,184,225,0.09) inset; }
form.main > auto-suggest { position: relative; flex: 1000 1 auto; max-width: clamp(12em, 100%, 33em); margin-top: 3px; }
form.main label:first-child { flex: 0 1 calc(var(--sidebar-width-1-5) + var(--horizontal-gutter) - 0.8ex); padding: 5px 0.8ex 0 0; line-height: 1.19; text-align: right; }
form.main label:first-child, form.main input { font-size: 1.5em; }
form.main input[type="search"] { width: clamp(9em, 100% - 3em, 100%); }
form.main input.has_toggle[type="search"] { margin-bottom: 1em; }
form.main input::placeholder { font-size: var(--text-font-size); }
form.main .suggestions { position: absolute; z-index: 1; width: calc(clamp(9em, 100% - 3em, 100%) - 2px); margin-top: -1px; border: 1px solid var(--interactive-border-color); border-top: 0; padding: 0.125ex 0 0.25ex 0; font-size: 1.5em; background-color: field; color: fieldtext; }
form.main .has_toggle + .suggestions { margin-top: calc(-1em - 1px); }
form.main .suggestions:empty { display: none; }
form.main .suggestions > li { overflow: hidden; padding: 0.5ex 1ex 0.5ex 0.6ex; font-size: 0.667em; white-space: nowrap; text-overflow: ellipsis; }
form.main .suggestions > li:first-child { font-style: italic; }
form.main .suggestions > li.current { position: relative; background-color: var(--sugg-current-color); }
form.main .suggestions > li.current::after { position: absolute; right: 0; height: 0; width: 0; content: ""; border: calc(0.5ex + 0.5em) solid transparent; border-right: 0.8ex solid var(--meta-color); border-left: 0; }
form.main .suggestions > li > a { text-decoration: none; color: inherit; }
form.main .suggestions > li > a:hover { text-decoration: underline; }
form.main .suggestions > li > span, form.main .suggestions > li > a > span { color: var(--meta-color); }
form.main .suggestions > li.filter, form.main .suggestions > li.publisher, form.main .suggestions > li.tag { padding-left: calc(0.6125rem + 0.6ex); }
form.main .suggestions > li.filter::before { content: "⮞ "; display: inline-block; min-width: 0.5rem; margin-right: 0.125rem; margin-left: -0.6125rem; font-size: 0.5em; vertical-align: 0.25em; font-family: var(--font-family-symbols); color: var(--meta-color); }
form.main div.defaults { position: absolute; margin-top: -1.375em; margin-left: -3px; }

main { display: flex; flex-wrap: wrap; gap: calc(2 * var(--vertical-gutter)) var(--horizontal-gutter); }

.facets { flex: 0 1 var(--sidebar-width); margin-top: calc(1em * var(--hx-line-height) * var(--h2-font-scale)); }
article.main { flex: 1000 1 clamp(21em, 53%, 100%); }
article.sub { flex: 1 1 var(--sidebar-width); }

filter-set { position: relative; display: block; }
filter-set > h3 { margin-top: var(--vertical-gutter); }
filter-set > h3 > button.trigger { padding-left: 1.5rem; }
filter-set > h3 > button.trigger::before { content: "🞃 "; display: inline-block; min-width: 1.125rem; margin-right: 0.375rem; margin-left: -1.5rem; font-size: 75%; font-family: var(--font-family-symbols); text-align: center; }
filter-set > h3.collapsed > button.trigger::before { content: "🞂 "; }
filter-set > h3.collapsed + button.sort { display: none; }
filter-set > button.sort { position: absolute; top: calc((1 - var(--line-height) + var(--hx-line-height)) * (var(--h3-font-size) - 1em)); right: 0; }
filter-set > button.sort::before { content: "☐ a-z"; }
filter-set > button.sort.sorted::before { content: "☑ a-z"; }
filter-set > button.sort::after { content: "⮃"; padding-left: 0.2ex; font-family: var(--font-family-symbols); font-size: 0.9em; }
filter-set > ol { overflow-y: auto; max-height: clamp(5em * var(--facet-line-height), 50vh, 90vh); margin-bottom: var(--vertical-gutter); padding-bottom: 0.275em;
  /* Hat-tip to @kizmarh and @leaverou for the concept of these scrolling shadows. */
  background: linear-gradient(var(--bg-color) 30%, var(--bg-color-transparent)), linear-gradient(var(--bg-color-transparent), var(--bg-color) 70%) 0 100%,
  radial-gradient(farthest-side at 50% 0, var(--scroll-shadow-color), var(--scroll-shadow-color-transparent)),
  radial-gradient(farthest-side at 50% 100%, var(--scroll-shadow-color), var(--scroll-shadow-color-transparent)) 0 100%;
  background-repeat: no-repeat; background-size: 100% 2em, 100% 2em, 100% 0.5em, 100% 0.5em; background-attachment: local, local, scroll, scroll; transition: max-height 0.25s;
}
filter-set > h3.collapsed ~ ol:not(.transitioning) { display: none; }
.facets p > button.trigger { display: none; }
.facets li { padding-left: 1.5rem; line-height: var(--facet-line-height); } /* Don't allow fonts used to provide the glyphs for non-western scripts to adjust line-height. */
.facets li::before { content: "⮞ "; display: inline-block; min-width: 1.125rem; margin-right: 0.375rem; margin-left: -1.5rem; font-size: 0.5em; vertical-align: 0.25em; font-family: var(--font-family-symbols); text-align: center; }
.facets li.indent { margin-left: 2ex; }
.facets li > a { text-decoration: none; }
.facets li > a:not(.ex):hover, .facets li > a:not(.ex):focus { text-decoration: underline; }
.facets ol.multi > li::before { content: none; }
.facets ol.multi > li > a::before { content: "☐ "; display: inline-block; min-width: 1.125rem; margin-right: 0.375rem; margin-left: -1.5rem; font-size: 1.4375em; line-height: 0.69; vertical-align: -0.04em; font-family: var(--font-family-symbols); text-align: center; }
.facets ol.multi > li:not(.check) > a:hover::before, .facets ol.multi > li:not(.check) > a:focus::before { content: "☑ "; }
.facets ol.multi > li.check > a::before { content: "☑ "; }
.facets ol.multi > li.check > a:hover::before, .facets ol.multi > li.check > a:focus::before { content: "☐ "; color: var(--ex-color-active); }
.facets a.ex { float: right; padding: 0 0.5ex 0 0.75ex; color: var(--ex-color); }
.facets a.ex:hover, .facets a.ex:focus { opacity: 1; color: var(--ex-color-active); }
.facets a.ex:hover + a, .facets a.ex:focus + a { text-decoration: line-through; color: var(--ex-color-active); text-decoration-thickness: initial; }

.message { position: relative; margin: 5px 0; border: 1px solid var(--msg-color); padding: 5px 10px; background-color: var(--msg-bg-color); }
body > .message { margin: 10px 0; }
.message.success { border-color: var(--msg-success-color); padding-top: 6px; padding-bottom: 6px; box-shadow: 0 0 1px 1px inset var(--msg-success-color); }
.message.info { border-color: var(--msg-info-color); padding-top: 6px; padding-bottom: 6px; box-shadow: 0 0 1px 1px inset var(--msg-info-color); }
.message.warn { border-color: var(--msg-warn-color); padding-top: 7px; padding-bottom: 7px; box-shadow: 0 0 1px 2px inset var(--msg-warn-color); }
.message.error { border-color: var(--msg-error-color); padding-top: 8px; padding-bottom: 8px; box-shadow: 0 0 1px 3px inset var(--msg-error-color); }
.message[id^="tip-"]::before { content: ""; float: right; width: 2em; height: 2em; }
.message > button.trigger { position: absolute; top: 5px; right: 8px; line-height: 1; }
.message > button.trigger::after { content: "🗙"; font-family: var(--font-family-symbols); }

.toggle .control { white-space: nowrap; }
.selected, .toggle { margin-top: 2px; line-height: var(--selected-line-height); }
.selected .facet { white-space: nowrap; }
.selected a + .facet { padding-left: 2ex; }
.selected a, .toggle a, .toggle .current { display: inline-block; border-radius: 0.1875rem; font-family: var(--font-family-medium-selected); font-weight: var(--font-weight-medium); text-transform: uppercase; font-size: clamp(0.9375em, 0.9375rem, 1em); line-height: var(--selected-a-line-height); }
.selected a, .toggle .current { margin-bottom: 1px; padding: 0 0.4375rem 0 0.4375rem; box-shadow: 0 0 1px var(--interactive-border-color) inset; text-decoration: none; }
.toggle .current { padding: 0 0.325rem; }
.selected a > abbr { text-decoration: none; }
.selected a:hover, .selected a:focus { text-decoration: line-through; text-decoration-thickness: initial; color: var(--ex-color-active); }
.selected a::after { content: "🗙"; display: inline-block; margin: -0.0625rem 0 0 0.375rem; padding: 0.125rem 0 0.25rem 0.3125rem; line-height: 1; vertical-align: 0.0625rem; font-size: 1rem; font-family: var(--font-family-symbols); color: var(--ex-color); box-shadow: -1px 0 1px -1px var(--interactive-border-color); }
.selected a:hover, .selected a:focus, .selected a:hover::after, .selected a:focus::after { color: var(--ex-color-active); opacity: 1; }

form.sort { float: right; margin-left: var(--horizontal-gutter); }

.apply { margin: 1.5ex 0; text-align: center; background-image: linear-gradient(90deg, rgba(161,150,160,0), rgba(161,150,160,0.45) 15%, rgba(161,150,160,0.45) 85%, rgba(161,150,160,0)); background-size: 100% 1px; background-position: center; background-repeat: no-repeat; }
.apply > button.trigger { display: flex; gap: 0 1ex; margin: 0 auto; border: 1px solid rgba(161,150,160,0.45); border-radius: 5px; padding: 0 1ex; font-size: var(--small-text-font-size); font-weight: normal; color: var(--apply-color); background-color: var(--apply-bg-color); }
.apply > button.trigger:hover, .apply > button.trigger:focus { color: var(--deepest-text-color); }
.apply > button.trigger::before { content: "⮤ "; font-family: var(--font-family-symbols); }
.apply > button.trigger::after { content: " ⮥"; font-family: var(--font-family-symbols); }
.selected:has(.apply) + ol.results > li:first-child { margin-top: calc(0.5 * var(--vertical-gutter)); }

.cover { position: absolute; float: left; max-height: var(--cover-height); max-width: var(--cover-width); margin: var(--cover-top-adjustment) 0.75rem 0.3125rem calc(-1 * var(--cover-width) - 0.75rem); opacity: 0.62; box-shadow: 0 0 1px rgba(0, 0, 0, 0.62); transition: opacity 0.15s; }
.cover.abstract { height: var(--cover-height); width: var(--cover-width); background-image: linear-gradient(var(--abstract-rotation), #333 0 10%, #713b8d 40% 60%, #333 95% 100%); }

.title:not(:last-child) { margin-right: max(5px, 0.3125rem); }
.os:not(:last-child), .os > .w:not(:last-child), .os > .m:not(:last-child), .os > .l:not(:last-child), .line:not(:last-child), .label:not(:last-child) { margin-right: max(3px, 0.1875rem); }

.os { display: inline-block; line-height: 1.15; white-space: nowrap; }
.os > .w, .os > .m, .os > .l { display: inline-block; background-repeat: no-repeat; background-size: contain; }
.os > .w { width: 1.00625rem; height: 0.875rem; background-image: url("/img/windows.png"); }
.os > .m, .os > .l { width: 0.721875rem; height: 0.875rem; }
.os > .m { background-image: url("/img/mac.png"); }
.os > .l { background-image: url("/img/linux.png"); }
.tags > i { font-size: 0.9375em; white-space: nowrap; }

ol.results > li { position: relative; display: flex; flex-wrap: wrap; gap: 0.5em 1em; align-content: flex-start; min-height: calc(2 * var(--cover-top-adjustment) + var(--cover-height)); margin-top: var(--vertical-gutter); padding-left: calc(var(--cover-width) + 0.75rem); }
ol.results > li + li::before { position: absolute; left: 0; content: " "; overflow: hidden; display: block; height: 1px; width: 68%; margin-top: calc(var(--vertical-gutter) / -2); margin-left: -1px; background-image: linear-gradient(90deg, rgba(161,150,160,0.15) 38%, rgba(161,150,160,0)); }

.meta { font-size: 0.9375em; color: var(--meta-color); }
h3 .meta { font-family: var(--font-family-regular); font-weight: var(--font-weight-regular); }
p.meta { margin: 0.25ex 0; }

ol.results > li > h3 { flex: 1000 1 auto; align-self: center; margin: 0; font-size: inherit; }
ol.results > li > h3 > a { display: inline-block; text-decoration: none; }
.game { display: inline-block; } /* Previously inline-block to remove non-link vertical gaps between its lines, but now that `a` is inline-block, it's only for a nice focus outline. */
.game > .meta { line-height: max(1rem, 1.133em); }
.game > .title { font-size: var(--h3-font-size); text-decoration: underline; text-decoration-thickness: 5.5%; }
.game > .os { margin-top: 1px; }
ol.results > li > h3 > a:hover .title, ol.results > li > h3 > a:focus .title { text-decoration: none; }
ol.results > li > h3 > a:hover > .cover, ol.results > li > h3 > a:focus > .cover { opacity: 1; }

.label { border-radius: 5px; font-family: var(--font-family-medium); font-weight: var(--font-weight-medium); white-space: nowrap; vertical-align: 1px; color: var(--text-color); background-color: var(--label-bg-color); box-shadow: 0 0 1px var(--label-border-color); }
.label.severe { background-color: var(--label-severe-bg-color); box-shadow: 0 0 1px var(--label-severe-border-color); }
.label.wow { background-color: var(--label-wow-bg-color); box-shadow: 0 0 1px var(--label-wow-border-color); }
h3 .label { display: inline-block; margin-top: max(2px, 0.125rem); padding: 1px 5px; color: var(--text-color); }
dd > .label, p > .label { padding: 0 5px 1px 5px; font-size: 0.875em; }
dd > .label { line-height: calc(var(--line-height) * 1em / 0.875 + var(--line-height) * 1px); }

.rating { flex: 1 1 auto; line-height: var(--hx-line-height); text-align: right; }
.rating > .meta { line-height: max(1rem, 1.1333em); }

ol.results > li > h3 ~ p:not(.rating), ol.results > li > h3 ~ dl.incl { flex: 1 1 100%; }
dl.incl { display: flex; gap: 0 1em; font-size: 0.9375em; }
dl.incl.few > dt { min-width: 0; }
dl.incl > dt { flex: 0 0 auto; }
dl.incl > div { display: flex; flex-wrap: wrap; gap: 0 1em; flex: 1 1 auto; }
dl.incl dd, dl.incl.reg > div::after { padding-left: 2.6ex; text-indent: -2.6ex; }
dl.incl.reg.m dd, dl.incl.reg.m > div::after {                                     flex: 1 1 clamp(17em, 33.33% - 0.67em - 2.6ex, 25em); }
dl:has(dd > dl.incl.m):has(dd > dl.incl.reg) dd > dl:not(.xxl).incl dd,
dl:has(dd > dl.incl.m):has(dd > dl.incl.reg) dd > dl:not(.xxl).incl > div::after { flex: 1 1 clamp(17em, 33.33% - 0.67em - 2.6ex, 25em); }
dl.incl.reg.l dd, dl.incl.reg.l > div::after {                                     flex: 1 1 clamp(22em, 50% - 0.5em - 2.6ex, 100%); }
dl:has(dd > dl.incl.l):has(dd > dl.incl.reg) dd > dl.incl:not(.xxl) dd,
dl:has(dd > dl.incl.l):has(dd > dl.incl.reg) dd > dl.incl:not(.xxl) > div::after { flex: 1 1 clamp(22em, 50% - 0.5em - 2.6ex, 100%); }
dl.incl.reg.xl dd, dl.incl.reg.xl > div::after {                                    flex: 1 1 clamp(28em, 50% - 0.5em - 2.6ex, 100%); }
dl:has(dd > dl.incl.xl):has(dd > dl.incl.reg) dd > dl.incl:not(.xxl) dd,
dl:has(dd > dl.incl.xl):has(dd > dl.incl.reg) dd > dl.incl:not(.xxl) > div::after { flex: 1 1 clamp(28em, 50% - 0.5em - 2.6ex, 100%); }
dl.incl.reg.xxl dd, dl.incl.reg.xxl > div::after { flex: 1 1 clamp(37em, 50% - 0.5em - 2.6ex, 100%); }
dl.incl dd::before { content: "➜ "; display: inline-block; width: 2.1ex; margin-right: 0.5ex; font-family: var(--font-family-symbols); text-align: right; }
.facets li.gd::before { display: inline-block; min-width: 1.125rem; margin-right: 0.375rem; font-size: 0.9375em; text-align: center; vertical-align: initial; }
.gd.ar::before { content: "🖻 "; }
.gd.au::before { content: "♫ "; }
.gd.av::before { content: "♟ "; }
.gd.ga::before { content: "＋ "; }
.gd.gu::before { content: "🖺 "; }
.gd.ma::before { content: "🕮 "; }
.gd.vi::before { content: "🎞 "; }
.gd.wa::before { content: "🖼 "; }
dl.incl.m:not(.few) > div::after {                             content: ""; } /* Hacky: line out two items on the the last line. */
dl:has(dd > dl.incl.m:not(.few)) > dd > dl.incl > div::after { content: ""; }

.discount { font-family: var(--font-family-medium); font-weight: var(--font-weight-medium); } /* The old price + discount; used in the sidebar and the dd. */

ol.results p.info { display: flex; flex-wrap: wrap; gap: 0.75em 1.5em; align-items: center; flex: 1 1 100%; text-align: center; }
ol.results p.info > .now { display: flex; flex-direction: column; flex: 0 0 7.625em; font-family: var(--font-family-medium); font-weight: var(--font-weight-medium); text-align: right; font-variant-numeric: tabular-nums; }
ol.results p.info > .now > b { font-size: 2.4375em; line-height: 1; white-space: nowrap; }
ol.results p.info > .now > b.l3 { font-size: 2.0625em; }
ol.results p.info > .now > b.l4 { font-size: 1.75em; }
ol.results.currency-m p.info > .now > b { font-size: 2.0625em; }
ol.results.currency-m p.info > .now > b.l3 { font-size: 1.8125em; }
ol.results.currency-m p.info > .now > b.l4 { font-size: 1.5625em; }
ol.results.currency-l p.info > .now > b { font-size: 2em; }
ol.results.currency-l p.info > .now > b.l3 { font-size: 1.75em; }
ol.results.currency-l p.info > .now > b.l4 { font-size: 1.5em; }
ol.results.currency-xl p.info > .now > b { font-size: 1.625em; }
ol.results.currency-xl p.info > .now > b.l3 { font-size: 1.4375em; }
ol.results.currency-xl p.info > .now > b.l4 { font-size: 1.3125em; }

ol.results.currency-m { --b4-modifier: 1em; }
ol.results.currency-l { --b4-modifier: 2em; }
ol.results.currency-xl { --b4-modifier: 3em; }
ol.results p.info > .b4 { display: flex; flex-wrap: wrap; gap: 0.5em 1em; align-items: end; flex: 500 0 auto; min-width: calc(20.5em + var(--b4-modifier)); max-width: calc(20.5em + var(--b4-modifier));  }
ol.results p.info > .b4:has(> .pt:only-child) { min-width: 9.725em; }
ol.results p.info > .b4 > .pt { display: flex; flex-direction: column; flex: 0 0 calc(9.725em + 0.5 * var(--b4-modifier)); text-align: center; max-width: 9.725rem; }
ol.results p.info > .b4 > .pt:has(> strong:only-child) { align-self: center; }
ol.results p.info > .b4 > .pt:has(> strong > u) { align-self: start; }
ol.results.currency-m p.info > .b4:has(> .pt:only-child) { min-width: 9.725em; }
ol.results.currency-l p.info > .b4:has(> .pt:only-child) { min-width: 10.225em; }
ol.results.currency-xl p.info > .b4:has(> .pt:only-child) { min-width: 10.725em; }

ol.results > li u { padding: 0.0625em 0.25em; border-radius: 0.33ex; text-decoration: none; background-color: var(--highlight-bg-color); box-shadow: 0 0 4px rgba(128,192,48,0.38) inset; }
ol.results > li u.wow { background-color: var(--highlight-wow-bg-color); box-shadow: 0 0 4px rgba(96,192,16,0.38) inset; }
ol.results > li > p u { display: inline-block; font-size: 1.125em; }
ol.results > li > dl u { margin-right: 1px; line-height: calc(var(--line-height) * 1em + var(--line-height) * 2px); }
ol.results > li > dl:not(.incl) dt:has(+ dd u) { line-height: calc(var(--line-height) * 1em + var(--line-height) * 2px); }
ol.results p.info .low, ol.results dd .low { font-size: 0.75em; }
ol.results p.info .now .low { line-height: 1.333; }
ol.results dd b.low { display: inline-block; margin: 0 3px; padding: 0 2px; border-radius: 3px; font-weight: normal; box-shadow: 0 0 1px 1px var(--highlight-low-shadow-color1), 0 0 3px 2px var(--highlight-low-shadow-color2); }

ol.results p.info > .tags { flex: 1 1 40%; align-self: start; text-align: left; }

ol.results > li > dl:not(.incl) { flex: 1 1 100%; }
ol.results > li > dl:not(.incl), ol.results > li > dl:not(.incl) > dd > dl:not(.incl) { display: flex; flex-wrap: wrap; }
ol.results > li > dl:not(.incl) > dt { flex: 0 1 13.5ex; padding-right: 0.5ex; }
ol.results > li > dl:not(.incl) > dd > dl:not(.incl) > dt { flex: 0 1 14.5ex; margin-left: -12ex; padding-right: 0.5ex; }
ol.results > li > dl:not(.incl) > dd, ol.results > li > dl:not(.incl) > dd > dl:not(.incl) > dd { flex: 1 0 calc(100% - 18ex); padding-left: 1ex; }
ol.results > li > dl:not(.incl) > dd:not(.alt)::before { content: "• "; margin-left: -1.15ex; }
ol.results > li > dl:not(.incl) > dd + dd { margin-left: 14ex; }
ol.results > li > dl:not(.incl) > dd > dl:not(.incl) > dd + dd { margin-left: 3ex; }
ol.results > li dl.collapsed { max-height: 0; transition: max-height 0.25s; }
ol.results > li dl.collapsed.transitioning { overflow: hidden;  }
ol.results > li dl.collapsed:not(.expanded):not(.transitioning) { display: none; }
ol.results > li dl.collapsed.expanded { max-height: none; }
ol.results > li dl.collapsed.expanded.transitioning { max-height: 110vh; transition-duration: 0.4s;}
ol.results > li dl.collapsed.expanded + p.info { transition: margin-top 0.25s; }
ol.results > li button.trigger span.wow { padding: 1px 2px 2px 1px; border-radius: 0.33ex; font-style: italic; background-color: var(--highlight-wow-bg-color); }

.pagination { margin: calc(var(--vertical-gutter) * 2) 0 var(--vertical-gutter) 0; }
.pagination ol, .pagination li { display: inline; }
.pagination a + ol { margin-left: 3ex; }
.pagination ol + a { margin-left: 3ex; }
.pagination a.prev::before { content: "🞀 "; font-family: var(--font-family-symbols); }
.pagination a.next::after { content: " 🞂"; font-family: var(--font-family-symbols); }
.pagination li { margin: 0 5px; }
.pagination li.current { border-radius: 0.1875rem; box-shadow: 0 0 1px var(--interactive-border-color); }
.pagination li.current, .pagination li > a { display: inline-block; box-sizing: border-box; min-width: 3ex; margin-top: -0.25ex; padding: 0.25ex 0.25ex; text-align: center; }
.pagination li:first-child > .jump { margin: 0 -5px 0 5px; }
.pagination li:last-child > .jump { margin: 0 5px 0 -5px; }
.pagination li a { border-radius: 0.1875rem; box-shadow: 0 0 1px var(--interactive-border-color-transparent); transition: box-shadow 0.15s; }
.pagination li a:hover, .pagination li a:focus { box-shadow: 0 0 1px var(--interactive-border-color-active); }

form.jump { display: inline-block; margin-left: var(--horizontal-gutter); line-height: 2.5; }

article.sub h2 { margin-bottom: 0.2875ex; }
article.sub h2:has(> .actual) { margin-bottom: 0.5ex; }
article.sub > p.privacy { margin-top: calc((var(--selected-line-height) - var(--line-height)) * var(--line-height) * (2em - 1rem)); font-size: var(--small-text-font-size); }
article.sub > p.functionalcookies { margin-top: 1em; font-size: var(--small-text-font-size); }
article.sub > p.privacy button.trigger, article.sub > p.functionalcookies button.trigger { font-weight: bold; }
article.sub > ol { display: flex; flex-wrap: wrap; gap: var(--vertical-gutter) var(--horizontal-gutter); }
article.sub > ol > li { flex: 1 1 clamp(max(12em, 10%), 19em, 19em); }
article.sub h3 > a { display: block; } /* This is block so there's no non-link vertical gaps between its lines. */
article.sub h3 > a::before { display: block; content: ""; max-width: 447px; height: 72px; margin-bottom: 0.1ex; opacity: 0.62; box-shadow: 0 0 1px rgba(0, 0, 0, 0.62); transition: opacity 0.15s; }
article.sub h3 > a:not(.abstract)::before { background-image: var(--bg-image); background-position: center 25%; }
article.sub h3 > a.abstract::before { width: 100%; background-image: linear-gradient(var(--abstract-rotation), #333 0 10%, #713b8d 40% 60%, #333 95% 100%); }
article.sub h3 > a:hover::before, article.sub h3 > a:focus::before { opacity: 1; }
article.sub p.alt { margin-left: calc(var(--horizontal-gutter) / 2); }
article.sub p.alt::before { content: "⮡ "; margin-left: -2ex; font-family: var(--font-family-symbols); }

footer { clear: both; margin-top: var(--vertical-gutter); }


article.page { position: relative; left: -2em; max-width: min(50rem, 80vw); margin: 2em 0 2em calc(var(--sidebar-width) + var(--horizontal-gutter)); padding: 2em; background-color: var(--subtle-bg-color); box-shadow: 0 0 0.125em 0 var(--page-border-color), 0 -2em 2em -2em var(--page-shadow-color), 2em 0 2em -2em var(--page-shadow-color), 0 2em 2em -2em var(--page-shadow-color), -2em 0 2em -2em var(--page-shadow-color); }
article.page h3 { margin-top: var(--vertical-gutter); }
article.page form > * + div, article.page p + p, article.page p + ul, article.page ul + p { margin-top: calc(var(--vertical-gutter) * 0.5); }
article.page kbd:not(.example) { padding: 0 0.6ex; font-weight: bold; }
article.page samp { padding: 0 0.3ex; background-color: var(--samp-bg-color); }
article.page li { margin-left: 2ex; list-style: initial; }
article.page img.viz { max-width: 100%; height: auto; margin: 1em 0; }
article.page form { margin: 1em 0; }
article.page form fieldset { margin: 0.5em 0; border: 0; padding: 0; }
article.page form label { display: inline-block; min-width: 12ex; margin-right: 0.5ex; }
article.page form label, article.page form legend { font-family: var(--font-family-medium); font-weight: var(--font-weight-medium); }
article.page form legend ~ label { display: block; font-family: inherit; font-weight: inherit; }
article.page form input { font-size: 125%; }
article.page :user-invalid { box-shadow: 0 0 3px 1px var(--msg-error-color); }
article.page form textarea { box-sizing: border-box; width: 100%; height: 30vh; }

@supports (width: round(0px, 0px)) {
  body { font-size: round(clamp(0.875rem, 0.85vw, 1rem), 1px); }
  filter-set > ol { max-height: clamp(5em * var(--facet-line-height), round(50vh, var(--facet-line-height) * 1em), round(down, 91vh, var(--facet-line-height) * 1em)); }
  ol.results > li > dl u { line-height: round(up, calc(var(--line-height) * 1em + var(--line-height) * 2px), 1px); }
  ol.results > li > dl:not(.incl) dt:has(+ dd u) { line-height: round(up, calc(var(--line-height) * 1em + var(--line-height) * 2px), 1px); }
  dd > .label { line-height: round(up, calc(var(--line-height) * 1em / 0.875 + var(--line-height) * 1px), 1px); }
}
@media (hover: none) {
  .cover, article.sub h3 > a::before { opacity: 1; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --subtle-gradient: radial-gradient(farthest-corner at 40% 0%, var(--subtle-bg-color), var(--subtle-bg-color-transparent));
    --form-bg-color: #443140; --form-gradients: linear-gradient(184deg, rgba(130,54,228,0.38) 0, rgba(212,210,211,0) 40%), linear-gradient(350deg, rgba(228,54,130,0.24), rgba(220,194,219,0) 40%), linear-gradient(90deg, rgba(84,40,80,0.24), rgba(228,178,227,0) 100%);
    --apply-bg-color: #2b2a33; --apply-color: #ddd; --sugg-current-color: rgba(127, 127, 127, 0.2);
    --bg-color: #212121; --bg-color-transparent: rgba(33,33,33,0);
    --subtle-bg-color: rgba(53,51,52,0.5); --subtle-bg-color-transparent: rgba(53,51,52,0);
    --brand-color: #c659cb; --brand-offset-color: #fff; --text-color: #f7f7f7; --deepest-text-color: #fff; --meta-color: #b6b6b6; --link-color: #f4d0f4; --visited-color: #de8cde;
    --flag-outline-color: #99a6a0; --msg-color: #666; --msg-bg-color: #000;
    --ex-color: rgba(248, 162, 162, 0.62); --ex-color-active: #ff4444; --scroll-shadow-color: rgba(255,255,255,.25); --scroll-shadow-color-transparent: rgba(255,255,255,0);
    --label-bg-color: rgba(255,255,255,0.15); --label-border-color: #fff;
    --label-severe-bg-color: rgba(223,95,95,0.25); --label-severe-border-color: #f99; --label-wow-bg-color: rgba(95,159,95,0.25); --label-wow-border-color: #8f8;
    --interactive-border-color: rgba(255,255,255,0.68); --interactive-border-color-active: rgba(255,255,255,0.4); --interactive-border-color-transparent: rgba(255,255,255,0);
    --highlight-bg-color: #668000; --highlight-wow-bg-color: #008a00; --highlight-low-shadow-color1: #cc0; --highlight-low-shadow-color2: rgba(200,200,0,0.7);
    --page-border-color: #757; --page-shadow-color: rgba(85, 51, 85, 0.9); --samp-bg-color: #5c5c5c;
  }
  ol.results > li u, ol.results > li button.trigger span.wow { text-shadow: 0 0 2px #000; }
  .os > .w { background-image: url("/img/windows-w.png"); }
  .os > .m { background-image: url("/img/mac-w.png"); }
  .os > .l { height: 1rem; width: 0.875rem; background-image: url("/img/linux-w.png"); }
}

@media (min-width: 135rem) {
  body { max-width: 134rem; margin-right: auto; margin-left: auto; }
}
@media (max-width: 73rem) {
  article.page { margin-left: auto; margin-right: auto; left: 0; }
  .rating { min-width: 100%; text-align: left; }
  .rating > br { display: none; }
  .rating > br + .meta::before { content: " - "; margin-left: 0.5ex; padding-right: 0.5ex; }
}
@media (max-width: 61rem) {
  ol.results p.info > .now { align-self: start; }
  ol.results p.info > .b4 { min-width: 13.35em; width: 13.35em; }
  ol.results p.info > .b4 > .pt { max-width: 10.5em; }
}
@media not all and (max-width: 47rem) {
  ol.results > li p.showfull { display: none; }
}
@media (max-width: 47rem) {
  ol.results > li:not(.full) .extra, ol.results > li:not(.full) > dl.incl:not(.collapsed), ol.results > li:not(.full) .tags { display: none; }
}
@media (min-width: 39.9rem) and (max-width: 45rem) {
  dl.incl { flex-wrap: wrap; }
}
@media (max-width: 39.89rem) {
  body { background-image: none; }
  form.main { display: block; padding-left: 10px; }
  form.main > auto-suggest { display: inline-block; width: clamp(12em, 100%, 33em); }
  .facets { display: flex; flex-wrap: wrap; gap: var(--vertical-gutter) var(--horizontal-gutter); min-width: 100%; }
  filter-set { flex: 1 1 12em; max-width: 19rem; }
  filter-set > h3 { margin-top: 0; }
  filter-set > ol { max-height: calc(5em * var(--facet-line-height)); margin: 0; }

  .facets.collapsible { transition: max-height 0.25s; overflow: hidden; }
  .facets.collapsible:not(.expanded):not(.transitioning) > filter-set:nth-child(5), .facets.collapsible:not(.expanded):not(.transitioning) > filter-set:nth-child(5) ~ * { display: none; }
  .facets.collapsible p > button.trigger { display: inline-block; margin-top: 2em; }
  .facets.collapsible:not(.expanded) { max-height: calc(5em * var(--facet-line-height) + 0.275em + 1.5em + 2px); } /* ol + h3 */
  .facets.collapsible.expanded.transitioning { max-height: 110vh; transition-duration: 0.4s; }

  .selected > p { clear: both; }
  .selected > p::after { content: ""; display: block; clear: both; }
  .selected > p:not(.apply) > * { float: left; margin-right: 0.5ex; }
  .selected > p > .facet { clear: left; padding-left: 0; }
  .selected > p > .facet + .facet { clear: none; }
  .selected a { margin-top: 0.175em; }

  article.main { min-width: 100%; }
  ol.results > li { --vertical-gutter: 2rem; display: block; padding-left: 0; }
  ol.results > li > h3 > a { display: initial; }
  ol.results > li > h3 ~ * { margin-top: 0.5em; }
  .cover { position: static; margin-left: 0; }
  .game { display: inline; padding: 0.5ex 0; } /* A hacky solution for the non-clickable gap between lines. */

  ol.results p.info + p, ol.results p.info + dl { clear: left; }

  article.page { max-width: 100%; margin: 0; padding: 10px; background-color: transparent; box-shadow: none; }
}
@media (max-width: 38.49rem) {
  header > nav { flex-direction: column; flex-wrap: wrap; gap: 1ex; }
  header > nav > .pages { flex-direction: row; flex-wrap: wrap; gap: 1em; min-width: 100%; margin: 0.5em 0; }
  header > nav > .pages > li.preceding { margin-right: 0; }
  header > nav > .pages > li.last { position: static; }
  header > nav > .pages > li.countrypicker { display: block; }
  header > nav > .pages > li.countrypicker > button.trigger { display: inline-block; vertical-align: top; }
  header > nav > .pages > li.countrypicker > button.trigger > img { margin-top: -0.375rem; display: inline-block; max-height: 1.25rem; box-shadow: 0 0 1px var(--flag-outline-color); }
  header > nav > .select:not(.full) { display: none; }
}
@media (max-width: 36.49rem) {
  .facets.collapsible:not(.expanded):not(.transitioning) > filter-set:nth-child(4) { display: none; }
}
@media (max-width: 30rem) {
  :root { --h3-font-size: 1em; --cover-width: clamp(60px, 3.75rem, 160px); --cover-height: clamp(85px, 5.34375rem, 228px); }
  ol.results > li + li::before { width: 100%; background-image: linear-gradient(90deg, rgba(161,150,160,0.57) 38%, rgba(161,150,160,0.19)); }
  ol.results > li:not(.full) .game > .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  ol.results > li:not(.full) .game > .meta + br { display: none; }
  .os { line-height: 1.5; }
  h3 .label { margin-top: max(3px, 0.1875rem); font-size: 0.875em; }
  ol.results > li:not(.full) p.rating { display: none; }
  ol.results p.info > .b4 { min-width: 9.725em; width: 9.725em; }
  ol.results > li > dl:not(.incl), ol.results > li > dl:not(.incl) > dd > dl:not(.incl) { display: block; }
  ol.results > li > dl:not(.incl) > dd + dt { margin-top: calc(0.5 * var(--vertical-gutter)); }
  ol.results > li > dl:not(.incl) > dd, ol.results > li > dl:not(.incl) > dd > dl:not(.incl) > dd { padding-left: 1.15ex; }
  ol.results > li > dl:not(.incl) > dd + dd { margin-left: 0; }
  dl.incl { flex-wrap: wrap; }
}
@media (max-width: 25rem) {
  .facets { gap: var(--vertical-gutter) calc(0.5 * var(--horizontal-gutter)); }
}
@media (max-width: 23.5rem) {
  ol.results p.info { gap: 0.75em 0.5em; }
}
@media (max-width: 22.99rem) {
  .facets.collapsible:not(.expanded):not(.transitioning) > filter-set:nth-child(3) { display: none; }
  .facets.collapsible:not(.expanded) { max-height: calc(var(--selected-line-height) * 1em + var(--line-height) * 1em + 1em + 2px); }
  .facets.collapsible p > button.trigger { margin-top: 1em; }
  ol.results > li > dl:not(.incl) > dd { min-width: 100%; }
  ol.results > li > dl:not(.incl) > dd + dd { margin-left: 0; }
}