/* Community (community.html): pixel art in the mark's own language (design-system/docs/aspen-design/SKILL.md, Pixel
   art). One cell size for the page, --pixel: 10px, 12px when the column holds 400px cards (a container query, so the
   site panel's fold moves it too). The hero's critters stand on the line above the games; every card is a plate the
   same shape, a creator's cover or the game's own pixel picture (pixel-scenes.mjs). Graphite tones, no gradient fill,
   text from 14px, motion 70/180/240ms. */
.community-page{--community-plate:#1d1d1d;--community-line:#333;--community-ease:cubic-bezier(.2,.8,.2,1);background:#181818;color:#ededed}
body.home-page.community-page::before,.community-page .world-motion{display:none} /* no map field: the pixel art is the page's picture */
.community-page .shell{max-width:1440px}
.community-main{container:community/inline-size;padding:40px 0 90px}
.community-main>section{--pixel:10px}
@container community (min-width:1180px){.community-main>section{--pixel:12px}}

/* Hero: the words, and the community standing on the line below them. */
.community-hero{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);align-items:end;gap:24px 40px}
.community-hero-copy{min-width:0;padding:0 0 40px}
.community-eyebrow{margin:0 0 12px;color:#ababab;font:500 14px/20px var(--sans)}
.community-hero h1{margin:0;color:#ededed;font:500 40px/48px var(--sans);letter-spacing:-.035em}
.community-hero h1:is(:lang(zh),:lang(ja)){letter-spacing:0}
.community-intro{max-width:440px;margin:12px 0 0;color:#ababab;font:400 16px/26px var(--sans);text-wrap:balance}
.community-intro:lang(zh){word-break:keep-all;overflow-wrap:anywhere}.community-intro:lang(ja){word-break:auto-phrase}
.community-hero-art{display:block;width:100%;height:calc(var(--pixel) * 18)}

.community-publish,.community-more,.community-retry{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 16px 0 18px;border:0;border-radius:12px;background:#d1d1d1;color:#242424;text-decoration:none;font:500 15px/20px var(--sans);white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background-color 180ms var(--community-ease),transform 70ms var(--community-ease)}
.community-publish{margin-top:24px}
.community-publish:hover,.community-retry:hover{background:#e0e0e0}
.community-publish:active,.community-more:active,.community-retry:active{transform:translateY(1px)}
.community-more{display:flex;margin:40px auto 0;background:#292929;color:#ededed}
.community-more:hover{background:#303030}
:is(.community-more,.community-retry):disabled{opacity:.55;cursor:default}

/* The library: a heading on the line, then the gallery. */
.community-section-heading{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--community-line);padding:24px 0 20px}
.community-section-heading h2{margin:0;font:500 20px/28px var(--sans);letter-spacing:-.02em}
.community-section-heading span{color:#878787;font:400 14px/20px var(--sans)}
.community-status{margin:0 0 20px;color:#ababab;font:400 15px/1.5 var(--sans)}
.community-status.is-quiet{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.community-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 20px}
.community-card{min-width:0}
.community-art{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:12px;background:var(--community-plate);color:#ababab;text-decoration:none}
.community-art :is(canvas,img){position:absolute;inset:0;display:block;width:100%;height:100%;transition:filter 180ms var(--community-ease)}
.community-cover{object-fit:cover}
.community-art:hover :is(canvas,img),.community-card:focus-within .community-art :is(canvas,img){filter:brightness(1.14)}
.community-art-play{position:absolute;right:12px;bottom:12px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#e0e0e0;color:#242424;opacity:0;transform:translateY(4px);transition:opacity 180ms var(--community-ease),transform 180ms var(--community-ease)}
.community-art-play svg{width:16px;height:16px;fill:currentColor}
.community-art:hover .community-art-play,.community-art:focus-visible .community-art-play{opacity:1;transform:none}
.community-card-title{display:block;margin:12px 0 8px;overflow:hidden;color:#ededed;font:500 16px/22px var(--sans);letter-spacing:-.01em;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.community-card-title:hover{text-decoration:underline;text-underline-offset:3px}
.community-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.community-creator{display:inline-flex;align-items:center;gap:8px;min-width:0;min-height:44px;color:#ababab;text-decoration:none;font:400 14px/20px var(--sans)}
.community-creator:hover{color:#ededed}
.community-creator-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.community-creator .player-avatar{display:grid;place-items:center;flex:none;width:24px;height:24px;overflow:hidden;border-radius:7px;background:#292929;color:#c9c9c9}
.community-creator .player-avatar svg{width:20px;height:20px}
.community-creator .player-avatar img{width:100%;height:100%;object-fit:cover}
.community-card-actions{display:flex;flex:none;align-items:center;gap:4px}
.community-like,.community-edit{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:#ababab;font:400 14px/20px var(--sans);cursor:pointer;transition:background-color 180ms var(--community-ease),color 180ms var(--community-ease)}
.community-like{min-width:52px}
.community-like:hover,.community-edit:hover{background:#242424;color:#ededed}
.community-like[aria-pressed=true]{color:#ededed}
.community-like:disabled{opacity:.6;cursor:default}
.community-like svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
.community-like[aria-pressed=true] svg{fill:currentColor}

/* Loading: the plate's unlit cells with light passing over them, and the caption as two rows of cells. */
.community-skeleton-line{display:block;width:calc(var(--pixel) * 14);height:var(--pixel);margin:16px 0 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect width='10' height='10' rx='2.2' fill='%23262626'/%3E%3C/svg%3E") 0 0/var(--pixel) var(--pixel) repeat-x}
.community-skeleton-line.is-short{width:calc(var(--pixel) * 8);margin-top:14px}

/* Empty and error: one picture, one line, one action. */
.community-state{display:flex;flex-direction:column;align-items:center;padding:16px 0 24px;text-align:center}
.community-state[hidden],.community-state [hidden]{display:none}
.community-state-art{display:block;width:calc(var(--pixel) * 30);max-width:100%;height:calc(var(--pixel) * 15)}
.community-state-title{margin:24px 0 0;color:#ededed;font:500 20px/28px var(--sans);text-wrap:balance}
.community-state .community-publish,.community-retry{margin-top:20px}
.community-retry{background:#292929;color:#ededed}
.community-retry:hover{background:#303030}

.community-page :is(a,button):focus-visible{outline:2px solid #b9b9b9;outline-offset:3px}

@container community (max-width:760px){.community-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.community-skeleton:nth-of-type(n+5){display:none}}
@container community (max-width:640px){
 .community-hero{grid-template-columns:minmax(0,1fr);gap:8px}
 .community-hero-copy{padding:0}
 .community-hero h1{font-size:34px;line-height:42px}
 .community-intro{font-size:15px;line-height:24px}
 .community-art-play{opacity:1;transform:none}
}
@container community (max-width:480px){.community-grid{grid-template-columns:minmax(0,1fr);gap:28px}.community-skeleton:nth-of-type(n+4){display:none}}
@media(max-width:760px){.community-main{padding-top:28px}}
@media(prefers-reduced-motion:reduce){.community-page :is(a,button,canvas,img){transition:none!important}.community-art-play{transform:none!important}}
/* Forced colours: the pixel art draws in the system ink (pixel-art.mjs reads this colour); plates keep an outline. */
@media(forced-colors:active){
 .community-page canvas{color:CanvasText}
 .community-art{border:1px solid CanvasText}
 .community-skeleton-line{background:none;border:1px solid GrayText;border-radius:4px}
 .community-art-play,.community-publish,.community-more,.community-retry{border:1px solid ButtonText}
}