@charset "UTF-8";

body{--spacing:2em;}
@media only screen and (max-width:480px){
	body{--spacing:1.5em;}
}

#content{display:flex;}
#content>.inner{flex:auto;display:flex;flex-direction:column;gap:var(--spacing);padding-block-start:var(--spacing);padding-inline:var(--spacing);}

#alphabet{}
#alphabet>.inner{display:flex;flex-wrap:wrap;gap:.25em;}
#alphabet a{flex:none;display:flex;align-items:center;justify-content:center;min-width:var(--CPT-US);height:var(--CPT-US);box-sizing:border-box;color:inherit;border-radius:var(--CPT-BDR);cursor:pointer;transition:color 300ms,background-color 300ms;}
#alphabet a>span{font-weight:var(--CPT-FW-B);padding-inline:1em;}
#alphabet a>span[icon]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.75em;padding-inline:1.25em;}
#alphabet a>span[icon]::before{content:attr(icon);display:block;font-size:1.5em;}
#alphabet a:hover{color:var(--SiteTHM);background-color:var(--SiteTHM-A10);}
#alphabet a.on{color:#fff;background-color:var(--SiteTHM);}
#alphabet a.disabled{pointer-events:none;color:var(--body-text-color-a25,rgba(0 0 0/25%));}
@media only screen and (max-width:1280px){}
@media only screen and (max-width:1000px){}
@media only screen and (max-width:800px){}
@media only screen and (max-width:480px){
	#alphabet{margin-inline:calc(var(--spacing) * -1);}
	#alphabet>.inner{padding-inline:var(--spacing);flex-wrap:nowrap;overflow:hidden;overflow-x:auto;}
	#alphabet>.inner::-webkit-scrollbar{display:none;}
	#alphabet>.inner:not(.scroll){scroll-snap-type:x mandatory;}
	#alphabet>.inner:not(.scroll) a.on{scroll-snap-align:center;}
}


/* game list */
#game_list{flex:auto;display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);border-radius:1em;background:var(--background-color-L3,#fff);}
#game_list .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--column-size,28em),1fr));align-items:start;gap:1em;}
#game_list .list .item{display:flex;flex-direction:column;border-radius:.5em;box-shadow:var(--body-text-color-a10,rgba(0 0 0/10%)) 0 0 0 1px inset;background:var(--body-text-color-a5,#fff);overflow:hidden;}
#game_list .list .game{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1.25em;padding:1.25em;color:inherit;transition:background-color 300ms;}
#game_list .list .game:hover{background-color:var(--SiteTHM-A10);}
#game_list .list .cover{width:var(--item-link-img-size,5em);height:var(--item-link-img-size,5em);background:var(--body-text-color-a5,#fff);box-shadow:var(--body-text-color-a10,rgba(0 0 0 / 10%)) 0 0 0 1px;border-radius:25%;overflow:hidden;}
#game_list .list .cover>img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;}
#game_list .list .info{display:flex;flex-direction:column;gap:.25em;}
#game_list .list .name{font-weight:var(--CPT-FW-B);}
#game_list .list .publisher{color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#game_list .list .categories{display:flex;flex-wrap:wrap;align-items:center;padding:.75em;box-shadow:var(--body-text-color-a5,rgba(0 0 0 / 5%)) 0 -1px 0;}
#game_list .list .category{color:inherit;padding:.5em .75em;border-radius:var(--CPT-BDR);transition:color 300ms,background-color 300ms;}
#game_list .list .category:hover{color:var(--SiteTHM);background-color:var(--SiteTHM-A10);}
@media only screen and (max-width:1280px){}
@media only screen and (max-width:1000px){}
@media only screen and (max-width:800px){}
@media only screen and (max-width:480px){
	#game_list{margin-inline:calc(var(--spacing) * -1);}
	#game_list .list{--column-size:20em;}
}


/* card list */
#card_list{flex:auto;display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);border-radius:1em;background:var(--background-color-L3,#fff);}
#card_list .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--column-size,28em),1fr));align-items:start;gap:1em;}
#card_list .list .item{display:flex;flex-direction:column;border-radius:.5em;box-shadow:var(--body-text-color-a10,rgba(0 0 0/10%)) 0 0 0 1px inset;background:var(--body-text-color-a5,#fff);overflow:hidden;}
#card_list .list .card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1.25em;padding:1.25em;color:inherit;transition:background-color 300ms;}
#card_list .list .card:hover{background-color:var(--SiteTHM-A10);}
#card_list .list .cover{width:var(--item-link-img-size,5em);height:var(--item-link-img-size,5em);background:var(--body-text-color-a5,#fff);box-shadow:var(--body-text-color-a10,rgba(0 0 0 / 10%)) 0 0 0 1px;border-radius:25%;}
#card_list .list .cover>img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;}
#card_list .list .info{display:flex;flex-direction:column;gap:.25em;}
#card_list .list .name{font-weight:var(--CPT-FW-B);}
#card_list .list .region{color:var(--body-text-color-a50,rgba(0 0 0/50%));}
@media only screen and (max-width:1280px){}
@media only screen and (max-width:1000px){}
@media only screen and (max-width:800px){}
@media only screen and (max-width:480px){
	#card_list{margin-inline:calc(var(--spacing) * -1);}
	#card_list .list{--column-size:20em;}
}