@font-face{font-family:Manrope;font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2')}
:root{--bg:#101114;--s1:#1a1c21;--s2:#23262d;--s3:#2c3038;--line:#2c3038;--text:#f2f3f5;--muted:#a7adb7;--faint:#8a909b;--mint:#5fd39a;--plate:#eef0f3;--font:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
body{margin:0;font:500 15px/1.5 var(--font);font-feature-settings:"tnum"}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:6px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block}
[hidden]{display:none!important}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
@media(min-width:900px){.wrap{padding:0 32px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
p{margin:0}
.k-words{--c:#4f6bed}.k-geography{--c:#2f9e5b}.k-math-logic{--c:#5f6673}.k-trivia{--c:#e08a12}.k-visual{--c:#d9487f}.k-movies-tv{--c:#e05a2b}.k-music{--c:#9b51e0}.k-sports{--c:#1895a8}.k-gaming{--c:#6750e5}.k-history{--c:#a0693a}.k-other{--c:#6f9a1e}
/* header */
.top .wrap{display:flex;align-items:center;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo svg{display:block}
.logo span{font:800 19px/1 var(--font);letter-spacing:-.03em}
.logo span i{font-style:normal;color:var(--muted);font-weight:700}
.clock{flex:none;margin-left:auto;text-align:right;font:700 13px/1.3 var(--font);color:var(--muted)}
.clock b{display:block;color:var(--text);font-size:14.5px}
.search{display:none;margin-left:auto;width:300px;height:40px;border-radius:12px;background:var(--s1);border:1px solid var(--line);align-items:center;gap:9px;padding:0 14px;color:var(--faint)}
.search input{flex:1;min-width:0;height:38px;background:none;border:0;color:var(--text);font:600 14px var(--font)}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:0}
.sbtn{flex:none;width:40px;height:40px;border-radius:12px;background:var(--s1);border:1px solid var(--line);display:grid;place-items:center}
/* "Submit a game": bordered like the search button, so Sign in stays the one filled button; "Submit" below 720 px */
.subm{flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 12px;border-radius:12px;background:var(--s1);border:1px solid var(--line);color:var(--text);font:800 14px/1 var(--font);white-space:nowrap}
.subm:hover{border-color:#41464f}
.subm svg{flex:none;color:var(--mint)}
.subm-l{display:none}
@media(min-width:720px){.subm-l{display:inline}}
@media(min-width:900px){.search{display:flex;min-width:180px}.sbtn{display:none}.clock{margin-left:0;text-align:left;padding-left:22px;border-left:1px solid var(--line)}}
.crumbs{font:600 13px/1.3 var(--font);color:var(--faint);margin:6px 0 2px}
.crumbs a{color:var(--muted);display:inline-block;padding:4px 0}
.crumbs a:hover{color:var(--text)}
/* type */
h1,h2,h3{margin:0;letter-spacing:-.025em}
.h1{font:800 clamp(28px,4.2vw,40px)/1.08 var(--font);margin:10px 0 8px}
.upd{margin:-2px 0 10px}
.lede{color:var(--muted);font-size:15.5px;max-width:720px}
.lede+.lede{margin-top:10px}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 14px}
.sh h2{font:800 20px/1.15 var(--font)}
.sh .aside,.sh a.aside{font:700 13px/1.2 var(--font);color:var(--muted);white-space:nowrap}
.sh a.aside:hover{color:var(--text)}
/* icon: the real icon on a plate, or the generated tile */
.ic{position:relative;flex:none;width:100%;aspect-ratio:1;border-radius:23%;overflow:hidden;display:grid;place-items:center;background-color:var(--c,#5f6673);color:#fff;font:800 26px/1 var(--font);letter-spacing:-.03em;isolation:isolate}
.ic b{position:relative;z-index:1;font-weight:800}
.ic::after{content:"";position:absolute;right:-14%;bottom:-14%;width:70%;height:70%;opacity:.2;background-size:contain;background-repeat:no-repeat}
.s-ci::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Ccircle%20cx%3D'50'%20cy%3D'50'%20r%3D'50'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E")}.s-sq::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Crect%20width%3D'100'%20height%3D'100'%20rx%3D'14'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E")}.s-tr::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20d%3D'M50%200l50%20100H0z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E")}.s-di::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20d%3D'M50%200l50%2050-50%2050L0%2050z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E")}.s-ha::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20d%3D'M0%20100a50%2050%200%2001100%200z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E")}.s-ba::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20d%3D'M0%2010h100v22H0zM0%2056h100v22H0z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E")}
.ic img{position:absolute;inset:11%;width:78%;height:78%;object-fit:contain;border-radius:18%;z-index:2}
.ic.has{background-color:var(--plate)}
.ic.has::after,.ic.has b{display:none}
.ic.dk{--plate:#2b2f37}
/* app tiles */
.home{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 12px}
@media(min-width:560px){.home{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:760px){.home{grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 16px}}
@media(min-width:1060px){.home{grid-template-columns:repeat(8,minmax(0,1fr));gap:32px 18px}}
.app{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.app .icw{position:relative;width:100%;max-width:84px}
@media(min-width:760px){.app .icw{max-width:108px}}
.app .nm{margin-top:10px;font:700 13px/1.25 var(--font);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .dm{font:600 11.5px/1.3 var(--font);color:var(--faint);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:760px){.app .nm{font-size:14px}.app .dm{font-size:12px}}
.app .rs{font:700 11px/1.3 var(--font);color:var(--muted)}
.app.played .ic{opacity:.45}
.app.played .nm{color:var(--muted)}
.badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;border:3px solid var(--bg);background:var(--text);z-index:3;display:none}
.is-new .badge{display:block}
.played .badge{display:grid;place-items:center;width:22px;height:22px;top:-6px;right:-6px;background:var(--mint)}
.played .badge::before{content:"";width:9px;height:5px;border-left:2.4px solid var(--bg);border-bottom:2.4px solid var(--bg);transform:translateY(-1px) rotate(-45deg)}
.edit-badge{display:none;position:absolute;top:-7px;left:-7px;width:24px;height:24px;border-radius:50%;background:var(--text);color:var(--bg);font:800 17px/22px var(--font);text-align:center;z-index:4;border:2px solid var(--bg)}
.editing .app .edit-badge{display:block}
.editing .app.inline .edit-badge{background:var(--s3);color:var(--text)}
.editing .app .ic{animation:wig .3s ease-in-out infinite alternate}
@keyframes wig{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
@media(prefers-reduced-motion:reduce){.editing .app .ic{animation:none}}
.legend{display:flex;gap:14px;font:700 12.5px/1 var(--font);color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--text)}
.legend i.g{background:var(--mint)}
/* panels */
.w{background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:18px}
.k{font:800 11.5px/1 var(--font);color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.widgets{display:grid;gap:12px;grid-template-columns:1fr;margin-top:6px}
@media(min-width:760px){.widgets{grid-template-columns:1fr 1fr}}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:12px;background:var(--text);color:var(--bg);font:800 14px/1 var(--font);white-space:nowrap}
.btn.ghost{background:var(--s2);color:var(--text);border:1px solid #393e48}
.btn.big{height:48px;padding:0 24px;font-size:15.5px;border-radius:14px}
.meta{color:var(--faint);font:600 12.5px/1.45 var(--font)}
.soon ul{list-style:none;margin:10px 0 0;padding:0}
.soon li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0}
.soon li[hidden]{display:none}
.soon .ic{width:42px;font-size:15px}
.soon b{font:700 14px/1.2 var(--font);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soon small{display:block;color:var(--faint);font-size:12px}
.soon em{font:800 14px/1 var(--font);font-style:normal}
.soon .played b{color:var(--muted)}
.streak{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.streak .n{font:800 54px/.9 var(--font);letter-spacing:-.04em}
.streak p{margin-top:5px;color:var(--muted);font-size:13.5px}
.days{display:flex;gap:6px;margin-top:14px;grid-column:1/-1}
.days span{flex:1;text-align:center;font:700 11px/1 var(--font);color:var(--faint)}
.days i{display:block;height:28px;border-radius:8px;background:var(--s2);margin-bottom:6px}
.days .on i{background:var(--mint)}
.days .part i{box-shadow:inset 0 -12px 0 var(--mint)}
@media(max-width:759px){.w.soon{display:none}.days{display:none}.streak .n{font-size:44px}.w{padding:16px}}
/* the Featured row (src/featured.mjs): the game's icon, its label above its name (Sponsored on a paid card), its
   shelf, our line about it and its site, all one link to the game. Two by two on phones, four across on wide screens;
   every card the same height (the line is held to two lines), so the row never moves as it fills */
.feat .sh{margin:26px 0 12px}
.feat-home .sh{margin-top:12px}
/* the banner: one game, large. Every part has a set size (the plate, one line of name, two of text, the button), so
   it is the same height whatever it holds; flat colours only, mint for the label and the button */
.fban{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-areas:"art head" "desc desc" "go go";gap:14px 16px;align-items:center;margin-bottom:10px;padding:16px;border-radius:24px;background:var(--s1);border:1px solid var(--line)}
a.fban:hover{border-color:#41464f}
a.fban:hover .fban-go{background:#7be0ae}
.fban-art{grid-area:art;width:88px;height:88px;border-radius:24px;display:grid;place-items:center;background:#1e3a2e}
.fban .ic{width:68px;font-size:24px}
.fban-h{grid-area:head;min-width:0;display:flex;flex-direction:column;gap:5px}
.fban-k{font:800 11.5px/1.1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fban-k b{color:var(--mint);font-weight:800}
.fban.sp .fban-k b{color:var(--text)}
.fban-n{font:800 24px/1.1 var(--font);letter-spacing:-.025em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.fban-s{font:600 12.5px/1.3 var(--font);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fban-d{grid-area:desc;height:2.9em;color:var(--muted);font:500 14.5px/1.45 var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fban-go{grid-area:go;display:flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:14px;background:var(--mint);color:var(--bg);font:800 15.5px/1 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:760px){.fban{grid-template-columns:152px minmax(0,1fr) auto;grid-template-areas:"art head go" "art desc go";gap:8px 28px;padding:22px 28px 22px 22px;margin-bottom:12px;border-radius:28px}.fban-art{width:152px;height:152px;border-radius:32px}.fban .ic{width:120px;font-size:40px}.fban-h{align-self:end}.fban-n{font-size:clamp(30px,3.4vw,44px);-webkit-line-clamp:1;display:block;white-space:nowrap;text-overflow:ellipsis}.fban-d{align-self:start;max-width:640px;font-size:16px}.fban-go{height:54px;padding:0 28px;border-radius:16px;font-size:16.5px;max-width:280px}}
.fcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:980px){.fcards{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
.fc{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;gap:0 10px;min-width:0;background:var(--s1);border:1px solid var(--line);border-radius:20px;padding:12px}
a.fc:hover{border-color:#41464f}
.fc .ic{width:44px;font-size:16px}
.fk{align-self:center;display:flex;flex-direction:column;gap:4px;min-width:0;font:800 11px/1.1 var(--font);letter-spacing:.05em;text-transform:uppercase}
.fk b{color:var(--mint);font-weight:800}
.fc.sp .fk b{color:var(--text)}
.fk span{color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn{grid-column:1/-1;margin-top:10px;font:800 15.5px/1.25 var(--font);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.fd{grid-column:1/-1;margin-top:3px;height:2.8em;color:var(--muted);font:500 13px/1.4 var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fm{grid-column:1/-1;align-self:end;margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 12px/1.3 var(--font)}
.fm .dm{min-width:0;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp{flex:none;color:var(--text);font-weight:800}
.fc.played .ic{opacity:.5}
@media(min-width:760px){.fc{grid-template-columns:56px minmax(0,1fr);gap:0 14px;padding:14px 16px}.fc .ic{width:56px;font-size:20px}.fn{font-size:17px}.fd{font-size:13.5px}}
/* /get-featured: the spots, where they show, the rules and the request */
.how{color:var(--text)}
.tiers{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tier{display:flex;flex-direction:column;gap:10px}
.tier .price b{font:800 38px/1 var(--font);letter-spacing:-.03em}
.tier .price span{color:var(--muted);font:700 14px/1 var(--font);margin-left:4px}
.tier>p:not(.price):not(.meta){color:var(--muted);font-size:14.5px}
.tier ul{list-style:none;margin:2px 0 4px;padding:0;display:grid;gap:7px}
.tier li{position:relative;padding-left:18px;font:600 14px/1.4 var(--font)}
.tier li::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--mint)}
.tier .btn{align-self:flex-start;margin-top:auto}
.gf{display:grid;gap:12px 28px;grid-template-columns:minmax(0,1fr);align-items:start}
.gf .rules{margin-top:22px}
@media(min-width:1000px){.gf{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}.gf .rules{grid-column:2;grid-row:1;margin-top:30px}}
@media(min-width:900px){.sub .next{grid-column:2;grid-row:1}}
.next ol{margin:12px 0 4px;padding-left:20px;display:grid;gap:10px;color:var(--muted);font:600 14px/1.45 var(--font)}
.next li::marker{color:var(--mint);font-weight:800}
.next b{color:var(--text)}
.fex{margin:16px 0 4px}
.fex-card{max-width:330px}
.fex figcaption{margin-top:8px;color:var(--faint);font:600 13px/1.4 var(--font)}
.fpay{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.fpay p{margin-bottom:10px}
.sdone .snip{margin-top:14px;max-height:260px;overflow:auto}
.prose code,.lede code{font:600 13px/1.4 ui-monospace,"SFMono-Regular",Consolas,monospace;color:var(--text);background:var(--s2);padding:1px 5px;border-radius:6px;overflow-wrap:anywhere}
.banner:focus{outline:0}
/* folders */
.folders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:640px){.folders{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.folders{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.folder{display:block;background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:12px}
.folder:hover{border-color:#41464f}
.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mini .ic{font-size:12px;border-radius:26%}
.folder b{display:block;margin-top:10px;font:800 14.5px/1.2 var(--font)}
.folder small{color:var(--faint);font:600 12px/1.2 var(--font)}
.likes{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){.likes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.likes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.like{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:12px 14px}
.like:hover{border-color:#41464f}
.stack{display:flex;flex:none}
.stack .ic{width:40px;font-size:13px;border:2px solid var(--s1);margin-left:-9px;border-radius:28%}
.stack .ic:first-child{margin-left:0}
.like b{font:800 14px/1.2 var(--font)}
.like small{display:block;color:var(--faint);font:600 12px/1.25 var(--font)}
/* list rows */
.list{background:var(--s1);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li .ic{width:48px;font-size:17px}
.li h3{font:800 16px/1.25 var(--font)}
.li h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.li .dm{font:600 12px/1.3 var(--font);color:var(--faint)}
.li p{color:var(--muted);font-size:14px;margin-top:4px}
.li .why{color:var(--text)}
.li .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.li .rs{font:700 12px/1.3 var(--font);color:var(--muted);white-space:nowrap}
.li .play{height:36px;padding:0 14px;border-radius:11px;background:var(--text);color:var(--bg);font:800 13px/36px var(--font);white-space:nowrap}
.li .add{font:700 12px/1 var(--font);color:var(--muted);padding:4px 0}
.li .add.on{color:var(--mint)}
.li .no{font:800 14px/1 var(--font);color:var(--faint);width:22px;text-align:right}
.li.ranked{grid-template-columns:22px 48px minmax(0,1fr) auto}
.li.played .ic{opacity:.5}
.lbl{font:800 10.5px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--mint);margin-left:8px;white-space:nowrap}
@media(max-width:640px){.li{grid-template-columns:44px minmax(0,1fr);padding:12px 14px}.li.ranked{grid-template-columns:44px minmax(0,1fr)}.li .no{display:none}.li .ic{width:44px}.li .side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;width:100%}}
/* game page */
.hero{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;margin-top:10px}
@media(min-width:760px){.hero{grid-template-columns:148px minmax(0,1fr);gap:26px}}
.hero .ic{font-size:44px}
.hero h1{font:800 clamp(30px,4.6vw,44px)/1.05 var(--font)}
.hero .by{color:var(--faint);font:700 13.5px/1.4 var(--font);margin:6px 0 10px}
.hero p.d{font-size:16.5px;color:var(--text);max-width:680px}
.hero .row{margin-top:16px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:26px}
@media(min-width:760px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.facts div{background:var(--s1);padding:13px 16px}
.facts dt{font:800 11px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.facts dd{margin:6px 0 0;font:700 15px/1.3 var(--font)}
.facts dd small{display:block;color:var(--muted);font-weight:600;font-size:12.5px}
.prose{max-width:720px}
.prose h2{font:800 20px/1.2 var(--font);margin:30px 0 10px}
.prose p{color:var(--muted);font-size:15.5px;line-height:1.6}
.prose p+p{margin-top:12px}
.prose ol,.prose ul{color:var(--muted);font-size:15.5px;line-height:1.6;padding-left:22px;margin:0}
.prose li+li{margin-top:6px}
.prose a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:800 16px/1.35 var(--font);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--muted);font-weight:700}
.faq details[open] summary::after{content:"−"}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin-top:10px}
.orig{display:flex;align-items:center;gap:14px;margin-top:20px}
.orig .ic{width:56px;font-size:20px}
.filter{display:flex;gap:10px;align-items:center;margin:18px 0 14px;flex-wrap:wrap}
.filter input{flex:1;min-width:220px;height:44px;border-radius:12px;background:var(--s1);border:1px solid var(--line);color:var(--text);font:600 15px var(--font);padding:0 14px}
.filter select{height:44px;border-radius:12px;background:var(--s1);border:1px solid var(--line);color:var(--text);font:700 14px var(--font);padding:0 12px}
.count{font:700 13px/1 var(--font);color:var(--muted)}
/* the A to Z pages: the letter jump, a letter's first row, the pager */
.az{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.az a{min-width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--s1);border:1px solid var(--line);font:800 14px/1 var(--font);color:var(--muted)}
.az a:hover{color:var(--text)}
.lt{padding:10px 18px 6px;font:800 13px/1 var(--font);color:var(--faint);letter-spacing:.06em;scroll-margin-top:16px}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:22px 0 8px}
.pager a,.pager span{min-width:40px;height:40px;padding:0 12px;display:grid;place-items:center;border-radius:12px;background:var(--s1);border:1px solid var(--line);font:800 14px/1 var(--font);color:var(--muted)}
.pager a:hover{color:var(--text)}
.pager span{background:var(--text);color:var(--bg);border-color:var(--text)}
/* forms: suggest a game */
.sub{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-top:18px;align-items:start}
@media(min-width:900px){.sub{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.sub .rules{grid-column:2;grid-row:1}}
.fld{display:grid;gap:7px;margin-bottom:16px}
.fld label{font:800 14px/1.2 var(--font)}
.fld label span{color:var(--faint);font-weight:700;margin-left:6px}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;border-radius:12px;background:var(--bg);border:1px solid #393e48;color:var(--text);font:600 16px/1.3 var(--font);padding:0 14px}
.fld select{padding:0 10px}
.fld textarea{min-height:96px;padding:12px 14px;line-height:1.45;resize:vertical}
.fld input::placeholder{color:var(--faint)}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible,.chk input:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.fld small{color:var(--faint);font:600 13px/1.4 var(--font)}
.fld small.err{color:#ff9b9b}
.fld [aria-invalid=true]{border-color:#ff9b9b}
.chk{display:flex;gap:12px;align-items:center;min-height:44px;margin:-4px 0 12px;font:700 15px/1.2 var(--font);cursor:pointer}
.chk input{width:22px;height:22px;margin:0;accent-color:var(--mint)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sform .row{margin-top:4px}
.sform .meta{font-size:14px}
.sform button[disabled]{opacity:.55;cursor:default}
.bprevs{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 6px}
.bprev{margin:0;padding:18px;border-radius:16px;border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;align-items:flex-start;max-width:100%}
.bprev img{max-width:100%;height:auto}
.bprev figcaption{font:600 13px/1.4 var(--font)}
.bprev a{text-decoration:underline;text-underline-offset:3px}
.b-light{background:#fff;color:#101114}
.b-dark{background:var(--s1);color:var(--muted)}
.prose .b-light a{color:#101114}
.prose .b-dark a{color:var(--text)}
.bpick{max-width:520px;margin-top:14px}
.bcode{margin:0 0 14px}
.bhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;font:800 14px/1.2 var(--font)}
.bhead .btn{height:36px;padding:0 14px}
.snip{margin:0;padding:12px 14px;background:var(--s1);border:1px solid var(--line);border-radius:12px;color:var(--text);font:500 13px/1.55 ui-monospace,"SFMono-Regular",Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.fine-print{margin-top:14px;color:var(--faint);font:600 13px/1.45 var(--font)}
.fine-print a,.sdone a:not(.btn),.rules a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.sdone h2{font:800 24px/1.15 var(--font);margin:8px 0 8px}
.sdone p{color:var(--muted);font-size:15px;max-width:560px}
.sdone .row{margin-top:16px}
.sdone:focus{outline:0}
.rules ul{list-style:none;margin:12px 0 14px;padding:0;display:grid;gap:12px}
.rules li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 10px}
.rules li::before{content:"";grid-row:span 2;width:18px;height:18px;margin-top:1px;border-radius:6px;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.2l3 3 6-6.4' fill='none' stroke='%23101114' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.rules b{font:800 14.5px/1.3 var(--font)}
.rules li span{color:var(--muted);font-size:13.5px}
.rules p{color:var(--muted);font-size:14px}
/* accounts and lists */
/* the header's account button: "Sign in" in words (a solid button) signed out; the initial and the name signed in */
.acct{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 12px;border-radius:12px;background:var(--text);color:var(--bg);font:800 14px/1 var(--font);white-space:nowrap;max-width:46vw}
.acct:hover{background:#fff}
.acct-ic{position:relative;flex:none;width:17px;height:17px;display:grid;place-items:center}
.acct-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.acct.in{background:var(--s1);color:var(--text);border:1px solid var(--line);padding:0 12px 0 5px}
.acct.in:hover{border-color:#41464f}
.acct.in .acct-ic{width:28px;height:28px}
.acct b{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--bg);font:800 14px/1 var(--font)}
.acct.in svg{visibility:hidden}
@media(min-width:900px){.acct{max-width:220px}}
@media(max-width:399px){.acct:not(.in) .acct-ic{display:none}.acct:not(.in){padding:0 14px}}
.acct:not(.in){flex-shrink:0}
/* the sign-in block: Google and Apple, the same size, one under the other, then "or" and the email and password form
   with its two tabs (Apple's guidelines: a white button on a dark page, the logo and title in black, the system font;
   Google's: its dark button and four-color G) */
.signin .providers,.signin .tabs,.signin form,.signin .mnote{max-width:460px}
.providers{display:grid;gap:10px;margin-bottom:18px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:10px;background:var(--bg);border:1px solid #393e48;border-radius:14px}
.tab{min-height:48px;border-radius:10px;color:var(--muted);font:800 15.5px/1.1 var(--font);padding:0 8px}
.mnote{color:var(--muted);font:600 14px/1.45 var(--font);margin:0 2px 16px}
.tab:hover{color:var(--text)}
.tab[aria-selected=true]{background:var(--s3);color:var(--text)}
.tab:focus-visible{outline:2px solid var(--mint);outline-offset:1px;border-radius:10px}
.pw{position:relative}
.fld .pw input{padding-right:78px}
.pwt{position:absolute;top:2px;right:2px;bottom:2px;min-width:66px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--muted);font:800 13.5px/1 var(--font)}
.pwt:hover{color:var(--text)}
.pwt[aria-pressed=true]{color:var(--mint)}
.pwt:focus-visible{outline:2px solid var(--mint);outline-offset:-2px;border-radius:10px}
.fld .pw input::-ms-reveal{display:none}
.alt{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:8px}
.lnk{min-height:44px;display:inline-flex;align-items:center;color:var(--text);font:700 14px/1.2 var(--font);text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--mint)}
.fintro{margin-bottom:16px}
.fh{font:800 20px/1.2 var(--font);margin:0 0 6px}
.fh:focus{outline:0}
.fintro p{color:var(--muted);font-size:14.5px}
.finish{max-width:520px;margin-top:18px}
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font:700 13px/1 var(--font)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.pbtn{width:100%;gap:10px;padding:0 18px}
.pbtn .plogo{flex:none;width:20px;height:20px}
.pbtn.apple{background:#fff;color:#000;border:0;font:600 17px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;letter-spacing:-.01em}
.pbtn.apple .plogo{margin-top:-3px}
.pbtn.google{background:#131314;color:#e3e3e3;border:1px solid #8e918f;font:500 15.5px/1 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif}
.pbtn:hover{filter:brightness(.94)}
.pbtn.google:hover{filter:none;background:#1f2023}
.pbtn[disabled]{opacity:.6;cursor:default}
.btn.danger{color:#ffb4b4;border-color:#5a3434}
.btn.danger:not(.ghost){background:#ff8d8d;color:var(--bg);border:0}
.banner{background:var(--s2);border:1px solid #393e48;border-radius:14px;padding:12px 14px;margin:12px 0 4px;color:var(--text);font:700 14px/1.4 var(--font)}
.list-actions{margin-top:16px}
.byline{margin-top:14px;font-size:13.5px}
.byline+.h1{margin-top:4px}
.list .empty-row,.empty-row{padding:16px;color:var(--muted);font:600 14px/1.4 var(--font)}
.lic{width:48px;height:48px;border-radius:14px;background:var(--s2);display:grid;place-items:center;font:800 18px/1 var(--font);color:var(--muted)}
.lbl.warn{color:#ffb4b4}
.lbl.dim{color:var(--faint)}
.tools{flex-direction:row!important;gap:6px!important}
.tbtn{width:40px;height:40px;border-radius:11px;background:var(--s2);border:1px solid #393e48;font:800 16px/1 var(--font)}
.tbtn[disabled]{opacity:.35;cursor:default}
.picks{display:grid;gap:6px;margin-top:6px}
.gpick{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:7px 10px;min-height:48px;border-radius:12px;background:var(--bg);border:1px solid #393e48}
.gpick .ic{width:34px;font-size:13px}
.gpick span{font:700 14px/1.2 var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gpick em{font:800 12.5px/1 var(--font);font-style:normal;color:var(--mint)}
.list-edit{margin-top:18px}
.list-edit>.k,.uname>.k{display:block;margin-bottom:14px}
.report{margin-top:22px;color:var(--muted)}
.report summary{cursor:pointer;font:700 13.5px/1 var(--font);min-height:44px;display:inline-flex;align-items:center}
.report form{margin-top:8px;max-width:520px}
.uname{margin:6px 0 4px;max-width:520px}
.uname .meta{margin:6px 0 12px;font-size:13.5px}
.newlist{margin-top:12px}
.acct-end .row{margin-top:12px}
.acct-end [data-delete-confirm]{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* the header on smaller screens: the clock's zone goes first, then the clock (Submit and Sign in need the room), and
   on phones the name sits on two lines so the logo, Submit, the search button and Sign in fit from 360 px (below
   that, the mark alone) */
@media(max-width:639px){.tools .tbtn{width:44px;height:44px}.top .wrap{gap:10px}.clock span{display:none}.clock b{font-size:13.5px;white-space:nowrap}}
@media(max-width:599px){.clock{display:none}.sbtn{margin-left:auto}}
@media(max-width:479px){.top .wrap{gap:8px}.logo{gap:8px}.logo span{display:grid;font-size:15.5px;line-height:1.02}.subm{padding:0 12px 0 10px;gap:6px}}
@media(max-width:359px){.logo span{display:none}}
/* dock */
.dock{position:sticky;bottom:12px;z-index:5;margin:26px auto 12px;width:calc(100% - 24px);max-width:760px;background:var(--s2);border:1px solid #383c46;border-radius:26px;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:center}
.dock .apps{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px 4px 2px;margin:-6px -4px -2px}
.dock .app{flex:none;width:52px}
.dock .app .icw{max-width:52px}
.dock .ic{font-size:17px}
.dock .app .x{display:none;position:absolute;top:-7px;left:-7px;width:22px;height:22px;border-radius:50%;background:var(--text);color:var(--bg);font:800 15px/20px var(--font);text-align:center;z-index:4;border:2px solid var(--s2)}
.editing .dock .app .x{display:block}
.dock .app .badge{border-color:var(--s2)}
.dock .side{display:flex;align-items:center;gap:10px}
.dock .count{text-align:right;font:800 18px/1 var(--font);color:var(--text)}
.dock .count small{display:block;font:700 11px/1.3 var(--font);color:var(--muted)}
.dock .btn{height:42px;padding:0 15px;border-radius:14px}
.dock .line{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #383c46;padding-top:8px;font:600 12.5px/1.3 var(--font);color:var(--muted)}
.dock .line button{font:800 12.5px/1 var(--font);color:var(--text)}
.dock .empty{font:700 13px/1.3 var(--font);color:var(--muted);padding:8px 4px}
@media(max-width:639px){.dock{bottom:8px;width:calc(100% - 16px);grid-template-columns:1fr;padding:10px}.dock .apps{gap:7px}.dock .app{width:calc((100% - 35px) / 6);min-width:40px}.dock .side{justify-content:flex-end}.dock .count{margin-right:auto;text-align:left;display:flex;align-items:baseline;gap:8px;font-size:16px}.dock .count small{display:inline}.dock .btn{height:38px;padding:0 14px}.dock .line{display:none}}
/* the offer to keep the lineup and streak, at the top of the dock */
.nudge{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding:4px 4px 12px;border-bottom:1px solid #383c46}
.nudge-t{min-width:0}
.nudge-t b{display:block;font:800 15px/1.25 var(--font);color:var(--text)}
.nudge-t span{display:block;margin-top:3px;font:600 13px/1.4 var(--font);color:var(--muted)}
.nudge-a{display:flex;gap:8px;flex:none}
@media(max-width:639px){.nudge{flex-direction:column;align-items:stretch;padding:2px 2px 10px}.nudge-a .btn{flex:1}}
.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:var(--text);color:var(--bg);font:800 14px/1 var(--font);padding:12px 16px;border-radius:12px;z-index:9;display:none}
.toast.on{display:block}
footer{margin-top:40px;border-top:1px solid var(--line);color:var(--faint);font:600 13px/1.6 var(--font)}
footer .wrap{padding-top:26px;padding-bottom:30px}
.fgrid{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.fgrid{grid-template-columns:2fr 1fr 1fr 1fr}}
.fgrid h2{font:800 13px/1 var(--font);color:var(--text);margin-bottom:10px;letter-spacing:0}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li a{color:var(--muted);display:inline-block;padding:6px 0;min-height:24px}
.fgrid li a:hover{color:var(--text)}
.fgrid .about{grid-column:1/-1}
@media(min-width:900px){.fgrid .about{grid-column:auto}}
.fine{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.fine a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.fine a:hover{color:var(--text)}
/* /today: when the new puzzles arrive */
.sched .lede{margin-bottom:12px}
.sched .rtl{margin:14px 0 0}
.rtj{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.rtj a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:12px;background:var(--s1);border:1px solid var(--line);font:700 13.5px/1 var(--font)}
.rtj small{color:var(--faint);font-weight:700}
.rtg{scroll-margin-top:12px}
.rtg .lede{margin-bottom:10px}
.rt{width:100%;border-collapse:collapse;font:600 14px/1.4 var(--font)}
.rt th{text-align:left;font:800 11.5px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:8px 10px 8px 0;border-bottom:1px solid var(--line)}
.rt td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.rt td:first-child a{color:var(--text);font-weight:800}
.rt td:first-child a:hover{text-decoration:underline;text-underline-offset:3px}
.rt td small{display:block;color:var(--faint);font-size:12px}
.rt td[data-at]{color:var(--text);white-space:nowrap}
@media(max-width:639px){.rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.rt,.rt tbody{display:block}.rt tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:10px 0;border-bottom:1px solid var(--line)}.rt td{display:block;padding:0;border:0}.rt td:first-child,.rt td.rr{grid-column:1/-1}.rt td[data-at]{text-align:right}}
.slot{display:grid;grid-template-columns:1fr;gap:4px 18px;padding:12px 0;border-top:1px solid var(--line)}
@media(min-width:640px){.slot{grid-template-columns:150px minmax(0,1fr)}}
.slot h3{font:800 15px/1.4 var(--font)}
.slot h3 small{font:700 12px/1 var(--font);color:var(--faint);margin-left:4px}
.slot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 0}
.slot li:not(:last-child)::after{content:"·";color:var(--faint);margin:0 8px}
.slot a{display:inline-block;padding:4px 0;color:var(--muted);font:700 14px/1.4 var(--font)}
.slot a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
/* /for-makers: the game finder */
.bres{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.bres .btn{height:auto;min-height:40px;padding:8px 14px;white-space:normal;text-align:left}
.bres small{color:var(--faint);font-weight:600}
/* lists without icons: makers, franchises */
.mk .li{grid-template-columns:minmax(0,1fr)}
.hero .by a{text-decoration:underline;text-underline-offset:3px}
/* game pages: what we checked */
.checked{list-style:none;padding-left:0!important}
/* guides (src/guides.mjs): a section's text, then its picks; links in the intro and the one-line pointers to a guide */
.gi a,.gline a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.gsec h2{margin-top:36px}
.gl{margin-top:16px}
.more ul{list-style:none;padding-left:0}
.more li a{display:inline-block;padding:3px 0}
@media(min-width:760px){.more ul{columns:2;column-gap:32px}.more li{break-inside:avoid}}