@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:1.35fr 1fr 1fr}}
.pick{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center}
@media(min-width:760px){.pick{grid-template-columns:96px minmax(0,1fr)}}
.pick h2{margin:7px 0 5px;font:800 26px/1.05 var(--font)}
.pick p{color:var(--muted);font-size:14px;margin-bottom:12px}
.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}}
/* 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}}